/* AstroDestiny web kit. Brand book: Paper (cream), Sindoor (accent), Haldi (butter). Light only.
   Every page root is .pg, a size container: rules under @container switch to the phone layout,
   so the same page renders as web at 1440 and as phone inside a 390 frame. */
/* Fonts: self-hosted (all SIL OFL 1.1, from Google Fonts' own latin files), website/assets/fonts/. Latin is the
   main file; the rupee sign and Latin Extended-A are tiny separate files the browser fetches only when a page uses them.
   chrome.mjs and the SPA shells preload inter-latin and fraunces-latin. A changed font gets a new file name (-vNN). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/inter-latin-v20.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/inter-inr-v20.woff2) format("woff2"); unicode-range: U+20B9; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/inter-ext-v20.woff2) format("woff2"); unicode-range: U+0100-017F; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/fraunces-latin-v38.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/fraunces-inr-v38.woff2) format("woff2"); unicode-range: U+20B9; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/fraunces-ext-v38.woff2) format("woff2"); unicode-range: U+0100-017F; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 500; font-display: swap; src: url(/assets/fonts/fraunces-italic-latin-v38.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 500; font-display: swap; src: url(/assets/fonts/fraunces-italic-inr-v38.woff2) format("woff2"); unicode-range: U+20B9; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 500; font-display: swap; src: url(/assets/fonts/fraunces-italic-ext-v38.woff2) format("woff2"); unicode-range: U+0100-017F; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/plexmono-latin-v20.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/plexmono-inr-v20.woff2) format("woff2"); unicode-range: U+20B9; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/plexmono-ext-v20.woff2) format("woff2"); unicode-range: U+0100-017F; }
@font-face { font-family: "Tiro Devanagari Hindi"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/tiro-deva-v7.woff2) format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A; }
@font-face { font-family: "Tiro Devanagari Hindi"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/tiro-latin-v7.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --paper: #fcf9f3;
  --sheet: #f6f0e5;
  --white: #ffffff;
  --ink: #1f1a16;
  --ink2: #4a423a;
  --muted: #6b6258;
  --line: #e2d6c2;
  --line2: #cdbfa8;
  --sindoor: #c2410c;
  --sindoor-d: #a8370a;
  --peach: #f6c3a4;
  --peach-l: #fbe3d3;
  --butter: #f5d98f;
  --butter-l: #faecc4;
  --haldi-d: #8a5a00;
  --ok: #3f6b3a;
}
body { margin: 0; background: var(--paper); }
.pg { container-type: inline-size; background: var(--paper); color: var(--ink); font: 400 16px/1.55 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; min-height: 100%; position: relative; }
.pg * { box-sizing: border-box; }
.pg h1, .pg h2, .pg h3, .pg h4, .pg p, .pg ul, .pg ol, .pg figure { margin: 0; }
.pg ul, .pg ol { padding: 0; list-style: none; }
.pg a { color: inherit; }
.pg em { font-style: italic; color: var(--sindoor); }
.pg button { font: inherit; color: inherit; }
.pg :focus-visible { outline: 2px solid var(--sindoor); outline-offset: 3px; }

/* type */
.serif { font-family: "Fraunces", Georgia, serif; font-weight: 500; letter-spacing: -.015em; }
.d1 { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 78px; line-height: 1; letter-spacing: -.03em; }
.d2 { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 54px; line-height: 1.05; letter-spacing: -.025em; }
.d3 { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 32px; line-height: 1.12; letter-spacing: -.015em; }
.d4 { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 23px; line-height: 1.22; letter-spacing: -.01em; }
.lead { font-size: 20px; line-height: 1.5; color: var(--ink2); }
.body { font-size: 16px; line-height: 1.6; color: var(--ink2); }
.small { font-size: 14px; line-height: 1.5; color: var(--muted); }
.eyebrow { font: 500 12px/1.3 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.eyebrow.s { color: var(--sindoor-d); }
.hi { font-family: "Tiro Devanagari Hindi", serif; }
.num { font-variant-numeric: tabular-nums; }

/* layout */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
/* --wz: the side gutter for a .wrap whose section class sets `padding: X 0` (.sec, .hero, .top, .foot...).
   40px below 1200px, easing to 0 by 1280px (so wide desktop is unchanged), 16px on phone. 0 on everything else. */
.pg, .wrap > * { --wz: 0px; }
.wrap { --wz: 40px; }
.narrow { max-width: 760px; margin: 0 auto; }
.sec { padding: 112px var(--wz, 0); }
.sec-s { padding: 72px var(--wz, 0); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 72px; align-items: center; }
.side { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; }
.band-sheet { background: var(--sheet); }
.band-peach { background: var(--peach); }
.band-butter { background: var(--butter); }
.band-peach-l { background: var(--peach-l); }
.band-butter-l { background: var(--butter-l); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* surfaces */
.card { background: var(--sheet); border: 1px solid var(--line); border-radius: 22px; }
.card-w { background: var(--white); border: 1px solid var(--line); border-radius: 22px; }
.pad { padding: 28px; }
.pad-l { padding: 40px; }
.chip { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 4px 12px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font: 500 13px/1.2 "Inter", sans-serif; color: var(--ink); white-space: nowrap; }
.chip.s { background: var(--peach-l); border-color: #efb592; color: #7a2a08; }
.chip.h { background: var(--butter-l); border-color: #e3c26b; color: #5e3f00; }
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font: 500 10.5px/1 "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; background: var(--ink); color: var(--sheet); }
.tag.o { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line2); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.ic { width: 22px; height: 22px; flex: none; }
.ic-s { width: 18px; height: 18px; flex: none; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 28px; border-radius: 999px; font: 600 17px/1 "Inter", sans-serif; text-decoration: none; border: 0; cursor: pointer; white-space: nowrap; }
.btn-p { background: var(--sindoor); color: #fff !important; }
.btn-p:hover { background: var(--sindoor-d); }
.btn-o { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-o:hover { background: var(--sheet); }
.btn-i { background: var(--ink); color: var(--sheet) !important; }
.btn-l { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line2); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn-w { width: 100%; }
.link { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.arrow-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; color: var(--ink); }
.iconbtn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line2); background: var(--sheet); display: inline-grid; place-items: center; flex: none; cursor: pointer; padding: 0; }

/* nav */
.nav { height: 76px; display: flex; align-items: center; gap: 36px; }
.site-head .nav { height: 80px; gap: 32px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo b { font: 500 23px/1 "Fraunces", Georgia, serif; letter-spacing: -.01em; }
.logo b i { color: var(--sindoor); }
.nav-links { display: flex; gap: 28px; font: 500 15px/1 "Inter", sans-serif; }
.nav-links a { text-decoration: none; color: var(--ink2); padding: 8px 0; }
.nav-links a.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--sindoor); }
/* public header (.site-head): a larger logo, nav items as soft pills in one tray, the current page a raised white pill */
.site-head .logo { gap: 12px; }
.site-head .logo svg { width: 46px; height: 27px; }
.site-head .logo b { font-size: 28px; }
.site-head .nav-links { gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--sheet); }
.site-head .nav-links a { padding: 11px 16px; border-radius: 999px; transition: background-color .15s ease, color .15s ease; }
.site-head .nav-links a:hover { color: var(--ink); background: rgba(255, 255, 255, .7); }
.site-head .nav-links a.on { color: var(--sindoor-d); background: var(--white); box-shadow: 0 1px 3px rgba(31, 26, 22, .12), inset 0 0 0 1px var(--line); }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.lang { display: inline-flex; border: 1px solid var(--line2); border-radius: 999px; padding: 3px; background: var(--white); }
.lang span { padding: 5px 11px; border-radius: 999px; font-size: 13px; line-height: 1.2; }
.lang .on { background: var(--ink); color: var(--sheet); }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--sindoor); color: #fff; display: inline-grid; place-items: center; font: 500 18px/1 "Fraunces", serif; flex: none; }

/* forms */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label, .lbl { font: 600 14px/1.3 "Inter", sans-serif; color: var(--ink); }
.inp { height: 56px; border: 1.5px solid var(--line2); border-radius: 14px; background: var(--white); padding: 0 16px; font: 400 17px/1 "Inter", sans-serif; color: var(--ink); width: 100%; }
.inp:focus { outline: 2px solid var(--sindoor); outline-offset: 0; border-color: transparent; }
.check { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink2); }
.check input { width: 20px; height: 20px; accent-color: var(--sindoor); margin: 0; }

/* faq */
.faq details { border-bottom: 1px solid var(--line); padding: 22px 0; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; font: 500 20px/1.3 "Fraunces", Georgia, serif; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 24px/1 "Inter", sans-serif; color: var(--sindoor); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin-top: 10px; color: var(--ink2); max-width: 64ch; }

/* footer */
.foot { padding: 72px var(--wz, 0) 40px; border-top: 1px solid var(--line); }
.foot a { text-decoration: none; color: var(--ink2); }
.foot p .link { text-decoration: underline; }
.foot h4 { font: 500 12px/1.3 "IBM Plex Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }

/* phone-only chrome */
.only-m, .only-m-f { display: none !important; }
.sticky { position: sticky; bottom: 0; z-index: 5; display: none; padding: 12px 16px 16px; background: rgba(252, 249, 243, .95); backdrop-filter: blur(8px); border-top: 1px solid var(--line); }
.tabbar { position: sticky; bottom: 0; z-index: 5; display: none; grid-template-columns: repeat(5, minmax(0, 1fr)); background: rgba(251, 247, 239, .97); backdrop-filter: blur(8px); border-top: 1px solid var(--line); padding: 6px 8px 14px; }
.tabbar a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; font: 500 12px/1 "Inter", sans-serif; color: var(--muted); text-decoration: none; border-radius: 12px; }
.tabbar a.on { color: var(--sindoor-d); background: var(--peach-l); }

@container (max-width: 760px) {
  .wrap { padding-inline: 16px; --wz: 16px; }
  .foot { padding-top: 48px; padding-bottom: 32px; }
  .d1 { font-size: 44px; line-height: 1.02; }
  .d2 { font-size: 34px; line-height: 1.08; }
  .d3 { font-size: 26px; }
  .d4 { font-size: 21px; }
  .lead { font-size: 17px; }
  .sec { padding: 64px var(--wz, 0); }
  .sec-s { padding: 48px var(--wz, 0); }
  .pad { padding: 20px; }
  .pad-l { padding: 24px; }
  .g2, .g3, .split, .side { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .nav { height: 64px; gap: 10px; }
  .site-head .nav { height: 64px; gap: 10px; }
  .site-head .logo { gap: 10px; }
  .site-head .logo svg { width: 40px; height: 23px; }
  .site-head .logo b { font-size: 24px; }
  .nav-links, .only-d { display: none !important; }
  .only-m { display: block !important; }
  .only-m-f { display: flex !important; }
  .m-first { order: -1; }
  .btn { min-height: 54px; padding: 0 22px; }
  .btn-m-w { width: 100%; }
  .sticky { display: block; }
  .tabbar { display: grid; }
  .faq summary { font-size: 18px; }
  .card { border-radius: 18px; }
}

/* v2 additions: arch photo frame, chat bubbles, page title band, breadcrumbs */
.arch { position: relative; border-radius: 20px; overflow: hidden; background: var(--peach); }
.arch > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.arch-sm { border-radius: 14px; overflow: hidden; }
/* the semicircle is kept for the Home hero only */
.arch.arch-top { border-radius: 999px 999px 28px 28px; }
.cutout { display: block; max-width: 100%; height: auto; filter: drop-shadow(0 18px 24px rgba(31, 26, 22, .18)); }
.bubble { max-width: 78%; padding: 12px 16px; border-radius: 20px; font-size: 16px; line-height: 1.5; }
.bubble.them { background: var(--white); border: 1px solid var(--line); border-bottom-left-radius: 6px; align-self: flex-start; }
.bubble.me { background: var(--sindoor); color: #fff; border-bottom-right-radius: 6px; align-self: flex-end; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; }
.quick button, .quick a { min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--line2); background: var(--white); font: 500 15px/1.2 "Inter", sans-serif; color: var(--ink); text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; }
.quick .on { border-color: var(--sindoor); background: var(--peach-l); color: #7a2a08; }
.crumb { font-size: 13px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; }
.crumb a { color: var(--muted); text-decoration: none; }
.titleband { padding: 56px var(--wz, 0) 40px; }
.price-row { display: flex; align-items: baseline; gap: 10px; }
.price-big { font: 500 44px/1 "Fraunces", Georgia, serif; letter-spacing: -.02em; }
.strike { color: var(--muted); text-decoration: line-through; }
/* price display (chrome.price): ~~list~~ real price, "60% off", "one time". The real price is the biggest thing in the row. */
.price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font: 400 15px/1.3 "Inter", sans-serif; color: var(--muted); }
.price s { color: var(--muted); font-size: 16px; }
.price .now { font: 700 32px/1 "Inter", sans-serif; letter-spacing: -.01em; color: var(--ink); }
.price .off { font: 600 13px/1 "Inter", sans-serif; color: var(--haldi-d); background: var(--butter-l); padding: 4px 8px; border-radius: 999px; }
.price-lg .now { font-size: 40px; }
.price-sm { gap: 2px 8px; font-size: 13px; }
.price-sm s { font-size: 14px; }
.price-sm .now { font-size: 26px; }
.price-sm .off { font-size: 12px; padding: 3px 7px; }
.price-in { display: inline; font-size: inherit; color: inherit; }
.price-in > * { display: inline; }
.price-in s { font-size: inherit; }
.price-in .now { font: inherit; font-weight: 700; color: var(--ink); }
.price-in .off { font: inherit; font-weight: 600; background: none; padding: 0; }
.price-in .off::before { content: "("; } .price-in .off::after { content: ")"; }
.price .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font: 600 12px/1 "Inter", sans-serif; background: var(--butter); color: #5e3f00; }

/* face reading: front photo with drawn guide lines (svg viewBox matches the 3:4 photo) */
.face-ov { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.face-side { position: absolute; border: 6px solid #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 12px 26px rgba(31,26,22,.12); aspect-ratio: 3/4; background: var(--peach); }
.face-side img { width: 100%; height: 100%; object-fit: cover; display: block; }
.face-tag { position: absolute; left: 10px; bottom: 10px; background: rgba(255,253,248,.94); border-radius: 999px; padding: 4px 10px; font: 500 11px/1.4 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: #4a423a; }

/* phone header: hamburger sits on the left, before the logo */
.nav { position: relative; }
@container (max-width: 760px) {
  .nav:has(> .nav-end > a[href="Menu.dc.html"]) { padding-left: 54px; }
  .nav-end > a.iconbtn[href="Menu.dc.html"] { position: absolute; left: 0; top: 10px; display: inline-grid !important; }
}

/* tarot cards and report covers are never cropped: show the whole picture */
.whole { object-fit: contain !important; object-position: center; background: transparent !important; }

/* funnel steps: one question per screen, same column on web and phone (like the app funnel) */
.fl { min-height: 100%; display: flex; flex-direction: column; background: var(--paper, #fcf9f3); }
.fl-head { position: relative; height: 64px; display: flex; align-items: center; gap: 4px; padding: 0 24px; border-bottom: 1px solid #f1e9da; }
.fl-head .logo { margin-right: auto; flex: none; }
.fl-back { width: 40px; height: 40px; margin-left: -10px; display: inline-grid; place-items: center; flex: none; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.fl-back:hover { background: var(--sheet); }
.fl-safe { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #6b6258; white-space: nowrap; }
/* Very small phones: the lock alone, so the logo keeps its full size. */
@container (max-width: 380px) { .fl-safe { font-size: 0; gap: 0; } }
.fl-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--line); overflow: hidden; }
.fl-bar i { display: block; height: 100%; background: #c2410c; }
.fl-body { width: 100%; max-width: 520px; margin: 0 auto; padding: 24px 20px 24px; display: flex; flex-direction: column; gap: 22px; flex: 1; }
.fl-h { display: flex; flex-direction: column; gap: 10px; }
.fl-h h1 { font: 500 34px/1.12 "Fraunces", Georgia, serif; letter-spacing: -.015em; margin: 0; }
.fl-h h1 em { color: #c2410c; }
.fl-h p { font-size: 16.5px; line-height: 1.5; color: #4a423a; margin: 0; }
.fl-foot { width: 100%; max-width: 520px; margin: 0 auto; padding: 0 20px 32px; display: flex; flex-direction: column; gap: 12px; align-items: stretch; text-align: center; }
.fl-guide { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid #e2d6c2; border-radius: 16px; padding: 14px 16px; font-size: 15px; line-height: 1.45; color: #4a423a; }
@container (max-width: 760px) {
  .fl-head { height: 56px; padding: 0 16px; }
  .fl-h h1 { font-size: 28px; }
  .fl-body { padding: 18px 16px 20px; gap: 18px; }
  .fl-foot { padding: 0 16px 24px; }
}

/* saved-profile picker on funnel birth steps (signed-in visitors pick someone instead of retyping) */
.pp { display: flex; flex-direction: column; gap: 10px; }
.pp-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pp-c { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 14px 6px 6px; border-radius: 14px; border: 1.5px solid #e2d6c2; background: #fff; font: 500 15px/1.2 "Inter", sans-serif; color: #1f1a16; cursor: pointer; text-align: left; text-decoration: none; }
.pp-c .ini { width: 38px; height: 38px; border-radius: 50%; background: #fbe3d3; color: #a8370a; display: grid; place-items: center; font: 500 16px/1 "Fraunces", serif; flex: none; }
.pp-c small { display: block; font-size: 12.5px; color: #6b6258; font-weight: 400; margin-top: 2px; }
.pp-c.on { border-color: #c2410c; box-shadow: 0 0 0 1px #c2410c; }
.pp-c.new { border-style: dashed; padding-left: 14px; }
.pp-or { display: flex; align-items: center; gap: 12px; font: 500 11px/1 "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: #6b6258; }
.pp-or::before, .pp-or::after { content: ""; flex: 1; height: 1px; background: #e2d6c2; }

/* ===== Site additions (website build). Everything above is copied from the design kit unchanged. ===== */
a { color: var(--ink); }
a:hover { color: var(--sindoor-d); }
.ph { background: var(--butter-l); border-radius: 4px; padding: 0 4px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--white); padding: 10px 16px; border-radius: 10px; }
.skip:focus { left: 16px; }
.analytics-consent { display: none !important; }
/* author display rules (.btn, .chip...) must not beat the hidden attribute */
.pg [hidden] { display: none !important; }
/* phone: a long button label wraps instead of being cut at the screen edge */
@container (max-width: 760px) { .btn { white-space: normal; text-align: center; line-height: 1.2; } } /* tracking.js's own banner; the designed one below replaces it */

/* public header: phone hamburger on the left opens the left drawer (Menu design) */
.nav-end > .nav-menu { display: none; }
@container (max-width: 760px) {
  .nav:has(> .nav-end > .nav-menu) { padding-left: 54px; }
  .nav-end > .nav-menu { display: inline-grid; position: absolute; left: 0; top: 10px; }
}
/* sticky public header: a solid paper bar, a light shadow once the page scrolls (no JS; browsers without
   scroll timelines keep the border only). --head lets sticky panels below sit under it; anchors clear it. */
.site-head { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--line); }
.site-head ~ * { --head: 81px; }
html { scroll-padding-top: 96px; }
@supports (animation-timeline: scroll()) {
  .site-head { animation: head-lift linear both; animation-timeline: scroll(); animation-range: 0 32px; }
  @keyframes head-lift { to { box-shadow: 0 8px 20px -14px rgba(31, 26, 22, .4); } }
}
/* tablet: the pills do not fit beside the logo and buttons, so the menu button takes their place */
.site-head .nav-links a { white-space: nowrap; }
@container (max-width: 1060px) {
  .site-head .nav-links { display: none; }
  .site-head .nav-end > .nav-menu { display: inline-grid; }
}
@container (max-width: 760px) { .site-head ~ * { --head: 65px; } }
@media (max-width: 760px) { html { scroll-padding-top: 76px; } }
dialog.ad-menu { margin: 0; padding: 0; border: 0; height: 100%; max-height: 100%; width: min(420px, 86vw); max-width: 100%; background: var(--paper); color: var(--ink); box-shadow: 30px 0 60px -30px rgba(31,26,22,.55); font: 400 16px/1.55 "Inter", system-ui, sans-serif; }
dialog.ad-menu::backdrop { background: rgba(31,26,22,.34); }
.ad-menu .menu { min-height: 100%; display: flex; flex-direction: column; padding: 0 24px 24px; }
.ad-menu .m-top { height: 64px; display: flex; align-items: center; justify-content: space-between; flex: none; }
.ad-menu .m-big { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ad-menu .m-big a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 8px 14px 8px 16px; text-decoration: none; color: var(--ink); border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.ad-menu .m-big a.on { border-color: var(--sindoor); background: var(--peach-l); }
.ad-menu .m-big a svg { color: var(--line2); flex: none; }
.ad-menu .ml-t { display: flex; flex-direction: column; gap: 3px; }
.ad-menu .ml-t b { font: 500 24px/1.1 "Fraunces", Georgia, serif; letter-spacing: -.01em; }
.ad-menu .ml-t small { font-size: 14px; line-height: 1.35; color: var(--muted); }
.ad-menu .m-small { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.ad-menu .m-small a { display: flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--ink2); font-weight: 500; font-size: 15.5px; }
.ad-menu .m-foot { margin-top: auto; padding-top: 20px; }

/* footer grid (same rule every design page carries) */
.g4.footg { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
.foot button.link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--ink2); text-decoration: none; font-weight: 400; text-align: left; }
@container (max-width: 760px) {
  .g4.footg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footg > div:first-child { grid-column: 1 / -1; }
}

/* consent banner (Consent design): bottom-left card on web, bottom sheet on phone */
form.cb { position: fixed; z-index: 60; left: 40px; bottom: 40px; width: 480px; max-width: calc(100vw - 32px); max-height: calc(100vh - 64px); overflow: auto; background: var(--white); border: 1px solid var(--line); border-radius: 22px; padding: 28px; box-shadow: 0 30px 60px -30px rgba(31,26,22,.6); display: flex; flex-direction: column; gap: 16px; color: var(--ink); font: 400 16px/1.55 "Inter", system-ui, sans-serif; box-sizing: border-box; }
form.cb[hidden] { display: none; }
.cb * { box-sizing: border-box; }
.cb h2, .cb p { margin: 0; }
.cb-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--peach-l); color: var(--sindoor); display: grid; place-items: center; flex: none; }
.cb .sw-rows { display: flex; flex-direction: column; }
.cb .sw-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 12px 0; border-top: 1px solid var(--line); cursor: pointer; }
.cb .sw-t { font-weight: 600; font-size: 15.5px; color: var(--ink); }
.cb .sw-end { display: flex; align-items: center; gap: 10px; flex: none; }
.cb .sw-on { font: 500 11px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cb .sw { appearance: none; -webkit-appearance: none; width: 50px; height: 30px; border-radius: 999px; background: var(--line2); position: relative; cursor: pointer; margin: 0; flex: none; transition: background .15s; }
.cb .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(31,26,22,.3); transition: transform .15s; }
.cb .sw:checked { background: var(--sindoor); }
.cb .sw:checked::after { transform: translateX(20px); }
.cb .sw:disabled { background: var(--peach); cursor: not-allowed; }
.cb .sw:focus-visible { outline: 2px solid var(--sindoor); outline-offset: 3px; }
.cb-btns { display: flex; flex-direction: column; gap: 10px; }
/* The switches and "Save my choices" show only after "Choose" (keeps the first sheet short on a phone). */
.cb:not(.more) .sw-rows, .cb:not(.more) [data-choice="mine"] { display: none; }
.cb.more [data-more] { display: none; }
.cb-btns .btn { min-height: 50px; font-size: 16px; }
@media (max-width: 760px) {
  form.cb { left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 45vh; border-radius: 24px 24px 0 0; border-bottom: 0; padding: 12px 16px 20px; box-shadow: 0 -20px 50px -20px rgba(31,26,22,.45); }
  .cb-grab { display: block !important; }
}

/* consent bar: one slim line at the bottom; the panel above opens from Settings */
.cbar { position: fixed; z-index: 59; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 8px 20px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--white); border-top: 1px solid var(--line); color: var(--ink); font: 400 14px/1.45 "Inter", sans-serif; }
.cbar[hidden] { display: none; }
/* A payment sheet (pay-parts.jsx, aria-modal) sits inside .pg's own stacking context, so no z-index lifts it over this bar: hide the bar while one is open. */
body:has([aria-modal="true"]) .cbar { display: none; }
.cbar p { margin: 0; max-width: 720px; }
.cbar-b { display: flex; align-items: center; gap: 12px; flex: none; }
.cbar .btn { min-height: 40px; padding: 0 18px; font-size: 14px; }
.cbar .link { background: none; border: 0; padding: 8px 4px; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.cbar[data-mode="notice"] .cbar-a, .cbar[data-mode="ask"] .cbar-n { display: none; }
@media (max-width: 760px) {
  .cbar { flex-wrap: wrap; justify-content: flex-end; font-size: 13px; }
  .cbar p { flex: 1 1 100%; }
}
/* Funnel steps (.fl) and report details (.s-rdet): the short line beside the buttons, one slim row, so the step's own button stays visible.
   Same choices and the same Settings panel; only the wording is shorter. */
.cbar-s { display: none; }
body:has(.fl, .s-rdet) .cbar .cbar-l { display: none; }
body:has(.fl, .s-rdet) .cbar[data-mode="notice"] .cbar-s.cbar-n, body:has(.fl, .s-rdet) .cbar[data-mode="ask"] .cbar-s.cbar-a { display: inline; }
body:has(.fl, .s-rdet) .cbar { flex-wrap: nowrap; justify-content: space-between; gap: 10px; padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); font-size: 12.5px; line-height: 1.35; }
body:has(.fl, .s-rdet) .cbar p { flex: 1 1 auto; }
body:has(.fl, .s-rdet) .cbar[data-mode="ask"] { flex-wrap: wrap; justify-content: flex-end; }
body:has(.fl, .s-rdet) .cbar[data-mode="ask"] p { flex-basis: 100%; }
body:has(.fl, .s-rdet) .cbar .cbar-b { gap: 6px; }
body:has(.fl, .s-rdet) .cbar .btn { min-height: 36px; padding: 0 14px; }

/* shared React form pieces (BirthForm) */
.bf { display: flex; flex-direction: column; gap: 16px; }
.bf fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
.bf fieldset.field legend { padding: 0; margin-bottom: 8px; }
.bf .trio { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 10px; }
.bf .trio.t { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bf select.inp { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6258' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; cursor: pointer; }
.bf .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bf .seg button { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 14px; border: 1.5px solid var(--line2); background: var(--white); font: 600 16px/1 "Inter", sans-serif; color: var(--ink); cursor: pointer; }
.bf .seg button.on { border-color: var(--sindoor); background: var(--peach-l); color: var(--sindoor-d); }
.bf .pin { position: relative; display: block; }
.bf .pin svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--sindoor-d); }
.bf .pin .inp { padding-left: 44px; }
.bf .places { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; background: var(--white); overflow: hidden; }
.bf .places button { display: flex; gap: 10px; align-items: center; min-height: 52px; padding: 8px 14px; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; cursor: pointer; font: 400 15px/1.3 "Inter", sans-serif; color: var(--ink2); }
.bf .places button:first-child { border-top: 0; }
.bf .places button b { display: block; color: var(--ink); font-weight: 600; }
.bf .places button.on { background: var(--peach-l); }
.bf .err { color: #a8370a; font-size: 14px; }
.pp-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pp-c { width: 100%; }
@container (max-width: 760px) {
  .bf { gap: 14px; }
  .bf .trio { gap: 8px; }
  .bf .trio .inp { padding: 0 10px; font-size: 16px; }
  .bf select.inp { padding-right: 26px; background-position: right 8px center; }
  .pp-c { padding-right: 8px; gap: 8px; }
}

/* ---- funnel motion (funnel SPA only: .fl steps, .s-rdet report details, .p-* payment pages) ----
   A step slides in from the right (Back: from the left, html[data-nav="back"]) and its parts follow in a short
   stagger; the progress bar grows from the last step's width (--from, set by FunnelFrame/Frame). Answer screens
   (.fl.rv) reveal slower: heading, answer, then the report list one by one, then the price and Pay, calmly.
   Parts further down rise as they scroll into view where the browser can (animation-timeline: view()).
   transform and opacity only; fill-mode backwards so nothing keeps a transform once it has landed. */
.fl, .s-rdet { --dx: 22px; }
html[data-nav="back"] .fl, html[data-nav="back"] .s-rdet { --dx: -22px; }
@keyframes fl-in { from { opacity: 0; transform: translateX(var(--dx)); } }
@keyframes fl-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes fl-fill { from { transform: scaleX(var(--from, 1)); } }
@keyframes fl-pick { 45% { transform: scale(1.035); } }
@keyframes fl-mark { to { background-size: 100% 100%; } }
@keyframes fl-show { from { opacity: 0; } }
.fl-body > *, .fl-foot, .s-rdet .fun > *, .s-rdet form > * { animation: fl-in .34s cubic-bezier(.2,.75,.25,1) backwards; }
.fl-body > :nth-child(2), .s-rdet form > :nth-child(2) { animation-delay: .06s; }
.fl-body > :nth-child(3), .s-rdet form > :nth-child(3) { animation-delay: .12s; }
.fl-body > :nth-child(4), .s-rdet form > :nth-child(4) { animation-delay: .18s; }
.fl-body > :nth-child(5), .s-rdet form > :nth-child(5) { animation-delay: .24s; }
.fl-body > :nth-child(n+6), .s-rdet form > :nth-child(n+6) { animation-delay: .3s; }
.fl-foot { animation-delay: .2s; }
.fl-bar i { transform-origin: left center; animation: fl-fill .6s cubic-bezier(.3,.7,.2,1) backwards; }

/* answer screens: a result being revealed */
.fl.rv .fl-body > * { animation: fl-rise .6s cubic-bezier(.2,.7,.2,1) backwards; }
.fl.rv .fl-body > :nth-child(1) { animation-delay: .05s; }
.fl.rv .fl-body > :nth-child(2) { animation-delay: .22s; }
.fl.rv .fl-body > :nth-child(3) { animation-delay: .4s; }
.fl.rv .fl-body > :nth-child(4) { animation-delay: .58s; }
.fl.rv .fl-body > :nth-child(n+5) { animation-delay: .76s; }
.fl.rv .fl-foot { animation: fl-rise .7s 1s cubic-bezier(.2,.7,.2,1) backwards; }
.fl.rv :is(.inc, .chap, .ticks, .inside, .ch, .kts, .zones) > * { animation: fl-rise .5s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(.7s + var(--i, 0) * .1s); }
.fl.rv :is(.inc, .chap, .ticks, .inside, .ch, .kts, .zones) > :nth-child(2) { --i: 1; }
.fl.rv :is(.inc, .chap, .ticks, .inside, .ch, .kts, .zones) > :nth-child(3) { --i: 2; }
.fl.rv :is(.inc, .chap, .ticks, .inside, .ch, .kts, .zones) > :nth-child(4) { --i: 3; }
.fl.rv :is(.inc, .chap, .ticks, .inside, .ch, .kts, .zones) > :nth-child(5) { --i: 4; }
.fl.rv :is(.inc, .chap, .ticks, .inside, .ch, .kts, .zones) > :nth-child(6) { --i: 5; }
.fl.rv :is(.inc, .chap, .ticks, .inside, .ch, .kts, .zones) > :nth-child(n+7) { --i: 6; }
/* the highlighted words of the answer get a soft marker stroke */
.fl.rv :is(.fl-h h1, .ans h2, .box h2) em { background: linear-gradient(transparent 64%, rgba(246, 195, 164, .6) 64%) no-repeat 0 0 / 0% 100%; animation: fl-mark .9s .8s cubic-bezier(.3,.7,.2,1) forwards; }
@supports (animation-timeline: view()) {
  /* further down: the timed rise, overridden by a scroll-linked one while the part is still below the fold */
  .fl.rv .fl-body > :nth-child(n+4), .fl.rv .fl-foot, .fl.rv :is(.inc, .chap, .ticks, .inside, .ch, .kts, .zones) > * {
    animation-name: fl-rise, fl-rise; animation-duration: .6s, auto; animation-timing-function: cubic-bezier(.2,.7,.2,1), linear;
    animation-fill-mode: backwards, backwards; animation-timeline: auto, view(); animation-range: normal, entry 0% entry 90%;
  }
  /* the foot fades only: a live transform animation would make it the box the fixed payment sheet is placed in */
  .fl.rv .fl-foot { animation-name: fl-rise, fl-show; }
}

/* choices: a soft press, and a small settle when picked */
/* (tarot fan cards, .fc, keep their own rotate-and-lift transform) */
.fl :is(button:not(.btn):not(.iconbtn):not(.fc), .ct, .pp-c, label.check), .s-rdet .pills button, .s-rdet .rd-cb, .p-add .opt { transition: transform .18s ease, background-color .2s, border-color .2s, box-shadow .2s, color .2s; }
.fl :is(button:not(.btn):not(.iconbtn):not(.fc), .ct, .pp-c):active, .s-rdet .pills button:active, .p-add .opt:active { transform: scale(.97); }
.fl :is(button:not(.fc), .pp-c).on, .fl button[aria-pressed="true"]:not(.fc), .fl .ct:has(input:checked), .s-rdet .pills button.on, .p-add .opt.on { animation: fl-pick .34s cubic-bezier(.3,1.3,.5,1); }
.fl .btn, .s-rdet .btn, .p-add .btn, .p-keep .btn { transition: transform .15s ease, background-color .2s, opacity .2s; }
.fl .btn:active:not(:disabled), .s-rdet .btn:active:not(:disabled) { transform: scale(.985); }
.btn[aria-busy="true"] { cursor: progress; opacity: 1 !important; }

/* staged "we are making it" moments (palm, kundli, milan): steps tick one by one */
.bsteps { display: flex; flex-direction: column; gap: 12px; }
.bsteps li { display: flex; gap: 12px; align-items: center; font-size: 15.5px; line-height: 1.35; color: #8f8579; transition: color .4s; }
.bsteps li .mk { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1.5px solid #cdbfa8; display: grid; place-items: center; transition: background-color .35s, border-color .35s; }
.bsteps li .mk svg { width: 13px; height: 13px; color: #fff; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .35s cubic-bezier(.3,1.4,.5,1); }
.bsteps li.now { color: #1f1a16; }
.bsteps li.now .mk { border-color: #c2410c; border-right-color: transparent; animation: pay-spin .9s linear infinite; }
.bsteps li.ok { color: #1f1a16; }
.bsteps li.ok .mk { background: #3f6b3a; border-color: #3f6b3a; }
.bsteps li.ok .mk svg { opacity: 1; transform: none; }
@keyframes pay-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .fl *:not(.spin):not(.mk), .fl, .s-rdet *, .p-add *, .p-keep * { animation: none !important; transition: none !important; }
  .fl.rv :is(.fl-h h1, .ans h2, .box h2) em { background-size: 100% 100%; }
}
/* Route skeleton (ui/react/router.js lazyScreen): shows only when a screen's chunk takes over 150 ms. Opacity only. */
.sk-page { max-width: 640px; margin: 0 auto; padding: 88px 16px 32px; display: flex; flex-direction: column; gap: 14px; animation: sk-in .2s .15s both; }
.sk { display: block; max-width: 100%; border-radius: 12px; background: var(--sheet); animation: sk-pulse 1.1s ease-in-out infinite alternate; }
@keyframes sk-in { from { opacity: 0; } }
@keyframes sk-pulse { from { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .sk, .sk-page { animation: none; } }

/* reviews (website/ui/chrome.mjs reviews, filled by /assets/reviews.js) */
.rv-sec { padding-block: 80px; }
.rv-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 32px; }
.rv-sum { display: flex; align-items: center; gap: 8px; color: var(--ink2); font-size: 16px; }
.rv-sum b { color: var(--ink); }
.rv-stars { display: inline-flex; gap: 2px; }
.rv-stars svg { width: 18px; height: 18px; fill: var(--line); }
.rv-stars svg.on { fill: var(--sindoor); }
.rv-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
/* Under .rv-list: .fl.rv on funnel answer screens is the reveal class, not a review card. */
.rv-list .rv { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: 18px; }
.rv-body { flex: 1; font-size: 16px; line-height: 1.6; color: var(--ink); white-space: pre-line; }
.rv-who { font-size: 14px; color: var(--muted); }
.rv-who b { color: var(--ink); font-weight: 600; }
.rv-on { font: 500 12px/1.3 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--sindoor-d); }
@container (max-width: 1060px) { .rv-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 760px) {
  .rv-sec { padding-block: 52px; }
  .rv-head { margin-bottom: 20px; }
  .rv-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .rv-list::-webkit-scrollbar { display: none; }
  .rv-list .rv { flex: 0 0 84%; scroll-snap-align: start; padding: 20px; }
}

/* trust row and "Featured in" strip (website/ui/chrome.mjs trust, filled by /assets/trust.js) */
.tr-sec { padding-block: 40px; border-block: 1px solid var(--line); }
.tr-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tr { display: flex; gap: 12px; align-items: flex-start; }
.tr svg { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--sindoor); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
.tr-t { display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; line-height: 1.45; color: var(--ink2); }
.tr-t b { font-size: 16px; color: var(--ink); font-weight: 600; }
.tr-press { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
.tr-row:not([hidden]) + .tr-press { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.tr-pub { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 20px; letter-spacing: -.01em; color: var(--ink2); text-decoration: none; }
.tr-pub:hover { color: var(--sindoor-d); text-decoration: underline; text-underline-offset: 4px; }
@container (max-width: 760px) {
  .tr-sec { padding-block: 28px; }
  .tr-row { grid-template-columns: 1fr; gap: 16px; }
  .tr-press { gap: 6px 20px; }
  .tr-pub { font-size: 18px; }
}