@font-face { font-family: Fraunces; font-style: normal; font-weight: 300 500; font-display: swap; src: url(/fonts/fraunces.woff2) format('woff2'); }
@font-face { font-family: Fraunces; font-style: italic; font-weight: 300 400; font-display: swap; src: url(/fonts/fraunces-italic.woff2) format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/inter.woff2) format('woff2'); }
/* rekhapalm.com. Night sections borrow Dala's constellation-on-black; paper sections borrow Steep's serif-on-warm-paper.
   Colours are the app's own tokens (apps/mobile/src/ui/tokens.ts). */
:root {
  --night: #140E1B; --night-2: #1E1628; --night-ink: #F3EDE2; --night-muted: #BBB1C3; --night-line: #3A2F45;
  --gold: #D9B972; --gold-hi: #F1DCA4; --gold-ink: #7A5D27;
  --paper: #F4EFEB; --surface: #FBF8F5; --sunk: #ECE5E0; --hairline: #DCD2CC;
  --ink: #1F1A2B; --muted: #5E5668; --plum: #4B2E55;
  --heart: #9B2C4B; --head: #2F4A8A; --life: #2F6B45; --fate: #7A5D27; --mounts: #8A4A2B;
  --heart-tint: #F1E4E4; --head-tint: #E7E7EA; --life-tint: #E7EAE3; --fate-tint: #EEE9E0; --mounts-tint: #F0E7E1;
  --radius: 24px; --pill: 999px; --measure: 40rem;
  --serif: Fraunces, 'Iowan Old Style', Georgia, serif;
  --sans: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1A1320; --surface: #241B2D; --sunk: #2B2134; --hairline: #43374E;
    --ink: #F3EDE2; --muted: #BBB1C3; --plum: #D2B8DC; --gold-ink: #D9B972;
    --heart: #F2A7BC; --head: #A9BFF0; --life: #9FD4AE; --fate: #D9B972; --mounts: #E8B08F;
    --heart-tint: #3A2A37; --head-tint: #2E2B3E; --life-tint: #2C3032; --fate-tint: #352C2C; --mounts-tint: #382B30;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.6 var(--sans); overflow-x: hidden; }
img, svg { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.12; margin: 0; letter-spacing: -0.01em; }
p, ul, ol { margin: 0; }
a { color: var(--plum); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 0.5rem; background: var(--gold); color: var(--night); padding: 0.5rem 1rem; border-radius: var(--pill); z-index: 10; }
.skip:focus { left: 0.5rem; }
.wrap { width: min(100% - 2rem, 72rem); margin-inline: auto; }
.narrow { width: min(100% - 2rem, 46rem); }
.center { text-align: center; justify-content: center; }
.fine { font-size: 0.85rem; color: var(--muted); }

/* Header: transparent over the night hero, solid elsewhere */
.site-head { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--night) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--night-line); }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.75rem; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--night-ink); text-decoration: none; font: 500 1.2rem/1 var(--serif); letter-spacing: 0.01em; }
.brand img { width: 2rem; height: 2rem; border-radius: 50%; box-shadow: 0 0 0 1px rgba(217,185,114,0.45); }
.site-nav { display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; }
.site-nav a { color: var(--night-muted); text-decoration: none; font-size: 0.9rem; padding: 0.6rem 0.65rem; border-radius: var(--pill); white-space: nowrap; }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--night-ink); }
.site-nav a[aria-current] { box-shadow: inset 0 0 0 1px var(--night-line); }
@media (max-width: 30rem) { .site-nav a:nth-child(4) { display: none; } .site-nav a { padding-inline: 0.5rem; } }

/* Night sections */
.night { position: relative; background: radial-gradient(120% 80% at 70% 0%, #2A1E38 0%, var(--night-2) 38%, var(--night) 100%); color: var(--night-ink); overflow: hidden; isolation: isolate; }
.night a { color: var(--gold-hi); }
.stars { position: absolute; inset: 0; z-index: -1; opacity: 0.55;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff8 50%, transparent 51%), radial-gradient(1px 1px at 27% 72%, #fff6 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 41% 33%, #F1DCA4aa 50%, transparent 51%), radial-gradient(1px 1px at 58% 12%, #fff7 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 58%, #fff5 50%, transparent 51%), radial-gradient(1.6px 1.6px at 83% 26%, #F1DCA4bb 50%, transparent 51%),
    radial-gradient(1px 1px at 91% 77%, #fff6 50%, transparent 51%), radial-gradient(1px 1px at 7% 88%, #fff5 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 49% 91%, #F1DCA488 50%, transparent 51%), radial-gradient(1px 1px at 75% 44%, #fff4 50%, transparent 51%); }
@media (prefers-reduced-motion: no-preference) { .stars { animation: twinkle 6s ease-in-out infinite alternate; } }
@keyframes twinkle { from { opacity: 0.35; } to { opacity: 0.7; } }
.eyebrow { font: 600 0.78rem/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 0.9rem; }
.night .eyebrow { color: var(--gold); }
.section-title { font-size: clamp(2rem, 6.2vw, 3.4rem); }
.section-lede { margin-top: 1rem; font-size: 1.1rem; color: var(--muted); max-width: 38rem; }
.night .section-lede, .night .lede { color: var(--night-muted); }
.more { display: inline-block; margin-top: 1.5rem; font-weight: 500; text-decoration: none; color: var(--plum); }
.night .more { color: var(--gold-hi); }
.more:hover { text-decoration: underline; }

/* Hero */
.hero { padding-block: 2.25rem 1rem; }
.hero-grid { display: grid; gap: 0.5rem; align-items: center; }
@media (min-width: 56rem) { .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 3rem; min-height: min(84vh, 46rem); } .hero { padding-block: 3rem 2rem; } }
.hero h1 { font-size: clamp(2.6rem, 11vw, 5.6rem); font-weight: 350; letter-spacing: -0.025em; line-height: 1.02; }
.hero h1 { text-wrap: balance; }
.lede { margin-top: 1.1rem; font-size: clamp(1.08rem, 2.8vw, 1.3rem); max-width: 34rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1.6rem; }
.pill { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.3rem; border-radius: var(--pill); font: 500 1rem/1 var(--sans); text-decoration: none; border: 1px solid transparent; cursor: pointer; }
.pill-gold, .night .pill-gold { background: linear-gradient(135deg, var(--gold-hi), var(--gold)); color: var(--night); font-weight: 600; }
.pill-gold:hover { filter: brightness(1.05); }
.store-badge { display: inline-flex; align-items: center; min-height: 3rem; }
.store-badge img { display: block; height: 3rem; width: auto; }
.soon { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 3rem; padding: 0 0.4rem; font-size: 0.9rem; color: var(--night-muted); }
.soon::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(217,185,114,0.6); }
@media (prefers-reduced-motion: no-preference) { .soon::before { animation: beacon 2.4s ease-out infinite; } }
@keyframes beacon { 0% { box-shadow: 0 0 0 0 rgba(217,185,114,0.55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(217,185,114,0); } }
.pill-ghost { border-color: rgba(241,220,164,0.45); color: var(--gold-hi); background: transparent; }
.pill-ghost:hover { border-color: var(--gold-hi); }
.pill-solid { background: var(--ink); color: var(--surface); }
.assurances { list-style: none; padding: 0; margin-top: 1.2rem; display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; font-size: 0.88rem; color: var(--night-muted); }
.assurances li::before { content: '✦'; color: var(--gold); margin-right: 0.4rem; font-size: 0.7rem; vertical-align: 0.1em; }
.hero-hand { margin: 0; justify-self: center; width: min(78vw, 25rem); order: -1; }
@media (min-width: 56rem) { .hero-hand { order: 0; width: min(100%, 30rem); } }
@media (max-width: 55.99rem) { .hero-hand { width: min(46vw, 13rem); margin-top: -0.5rem; } }
.tap-hint { text-align: center; margin-top: 0.4rem; font: 600 0.72rem var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); opacity: 0.85; }

/* The palm */
.palm { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 18px rgba(217,185,114,0.18)); }
.palm .outline { fill: none; stroke: rgba(243,237,226,0.85); stroke-width: 0.9; stroke-linecap: round; stroke-linejoin: round; }
.palm .crease, .palm .minor { fill: none; stroke: rgba(187,177,195,0.45); stroke-width: 0.45; stroke-linecap: round; }
.palm .line .ink { fill: none; stroke: url(#gold); stroke-width: 1.5; stroke-linecap: round; pointer-events: none; transition: stroke-width 0.25s ease, opacity 0.25s; }
.palm .line .hit { fill: none; stroke: transparent; stroke-width: 12; stroke-linecap: round; cursor: pointer; pointer-events: stroke; }
.palm.has-active .line .ink { opacity: 0.35; }
.palm .line.active .ink { opacity: 1; stroke-width: 2.6; filter: drop-shadow(0 0 3px rgba(241,220,164,0.9)); }
@media (prefers-reduced-motion: no-preference) {
  .palm .outline { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.6s ease-out 0.1s forwards; }
  .palm .line .ink { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.4s ease-out forwards; }
  .palm [data-line="life"] .ink { animation-delay: 0.9s; }
  .palm [data-line="head"] .ink { animation-delay: 1.25s; }
  .palm [data-line="fate"] .ink { animation-delay: 1.6s; }
  .palm [data-line="heart"] .ink { animation-delay: 1.95s; }
  .palm .line.active .ink { animation: pulse 1.8s ease-in-out infinite alternate; stroke-dashoffset: 0; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pulse { from { stroke-width: 2.2; } to { stroke-width: 3; } }

/* Tap a line */
.lines { padding-block: 1rem 4.5rem; }
.lines .section-title { font-size: clamp(1.7rem, 5vw, 2.6rem); text-align: center; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1.4rem; }
.chip { min-height: 2.9rem; padding: 0 1.1rem; border-radius: var(--pill); border: 1px solid var(--night-line); background: rgba(255,255,255,0.03); color: var(--night-ink); font: 500 0.95rem var(--sans); cursor: pointer; }
.chip[aria-selected="true"] { background: var(--gold-hi); color: var(--night); border-color: var(--gold-hi); }
.line-panels { margin-top: 1.5rem; }
.line-panel { padding: 1.5rem; border-radius: var(--radius); background: rgba(255,255,255,0.04); box-shadow: inset 0 0 0 1px var(--night-line); }
.line-panel h3 { font-size: 1.7rem; }
.line-panel h3 span { display: block; font: italic 300 1.05rem/1.4 var(--serif); color: var(--gold); margin-top: 0.2rem; }
.line-panel .where { margin-top: 0.6rem; color: var(--night-muted); font-size: 0.95rem; }
.two { display: grid; gap: 1rem; margin-top: 1.2rem; }
@media (min-width: 40rem) { .two { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.two h4 { font: 600 0.75rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.4rem; }
.lines:not(.js) .line-panel[hidden] { display: block; }
.lines:not(.js) .line-panel + .line-panel { margin-top: 1rem; }

/* Paper sections */
.paper { padding-block: clamp(4rem, 10vw, 7rem); }
.paper + .paper { padding-top: 0; }
.quiz { background: linear-gradient(180deg, var(--night) 0, var(--paper) 7rem); padding-top: 7rem; }
@media (prefers-color-scheme: dark) { .quiz { background: linear-gradient(180deg, var(--night) 0, var(--paper) 7rem); } }

/* Quiz */
.quiz-form { margin-top: 2rem; display: grid; gap: 1rem; }
.quiz-form fieldset { border: 0; margin: 0; padding: 1.2rem; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); display: flex; flex-wrap: wrap; gap: 0.5rem; }
.quiz-form legend { float: left; width: 100%; font: 400 1.25rem/1.3 var(--serif); margin-bottom: 0.6rem; }
.quiz-form legend span { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; margin-right: 0.5rem; border-radius: 50%; background: var(--ink); color: var(--surface); font: 600 0.85rem var(--sans); vertical-align: 0.15em; }
.quiz-form label { position: relative; display: inline-flex; align-items: center; min-height: 2.9rem; padding: 0 1rem; border-radius: var(--pill); box-shadow: inset 0 0 0 1px var(--hairline); cursor: pointer; font-size: 0.97rem; background: var(--paper); }
.quiz-form input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.quiz-form label:has(input:checked) { background: var(--ink); color: var(--surface); box-shadow: none; }
.quiz-form label:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.quiz-form button { justify-self: start; margin-top: 0.4rem; min-height: 3.2rem; padding-inline: 1.8rem; font-size: 1.05rem; }
.result { margin-top: 2rem; }
.result-card { border-radius: var(--radius); padding: 1.6rem; background: var(--night); color: var(--night-ink); position: relative; overflow: hidden; }
.result-card .eyebrow { color: var(--gold); }
.result-card h3 { font-size: clamp(1.9rem, 6vw, 2.6rem); }
.result-card .two p { color: var(--night-ink); }
.result-card .active-hand { margin-top: 1.2rem; color: var(--night-muted); font-size: 0.95rem; }
.result-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; }
.result-actions .pill { min-height: 2.8rem; }
.result-actions .pill-solid { background: var(--gold-hi); color: var(--night); }

/* Method */
.steps { list-style: none; counter-reset: step; padding: 0; margin-top: 2.5rem; display: grid; gap: 1px; background: var(--hairline); border-radius: var(--radius); overflow: hidden; box-shadow: 0 0 0 1px var(--hairline); }
@media (min-width: 44rem) { .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 68rem) { .steps { grid-template-columns: repeat(4, 1fr); } .steps li:last-child { grid-column: span 2; } }
.steps li { counter-increment: step; background: var(--surface); padding: 1.5rem; }
.steps li::before { content: counter(step, decimal-leading-zero); display: block; font: 300 2.2rem/1 var(--serif); color: var(--gold-ink); margin-bottom: 0.8rem; }
.steps h3 { font-size: 1.3rem; margin-bottom: 0.4rem; }
.steps p { color: var(--muted); font-size: 0.98rem; }

/* How it works */
.how-grid { display: grid; gap: 2.5rem; align-items: center; margin-top: 2.5rem; }
@media (min-width: 52rem) { .how-steps { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.phone { justify-self: center; width: 15rem; aspect-ratio: 9 / 19; border-radius: 2.6rem; background: var(--night); padding: 0.7rem; box-shadow: 0 30px 60px -20px rgba(31,26,43,0.45), inset 0 0 0 1px #3A2F45; }
.screen { height: 100%; border-radius: 2rem; background: radial-gradient(90% 60% at 50% 40%, #2A1E38, #140E1B); color: var(--night-ink); display: grid; place-items: center; align-content: center; gap: 1.2rem; text-align: center; padding: 1rem; font: 400 1.05rem var(--serif); }
.ring { width: 8.5rem; height: 8.5rem; border-radius: 50%; border: 2px dashed rgba(241,220,164,0.35); display: grid; place-items: center; }
.ring span { width: 7rem; height: 7rem; border-radius: 50%; border: 3px solid var(--gold); border-right-color: transparent; border-bottom-color: transparent; }
@media (prefers-reduced-motion: no-preference) { .ring span { animation: spin 3s linear infinite; } }
@keyframes spin { to { transform: rotate(360deg); } }
.screen .hint { font: 500 0.85rem var(--sans); color: var(--gold-hi); background: rgba(241,220,164,0.1); padding: 0.4rem 0.8rem; border-radius: var(--pill); }
.how-steps { display: grid; gap: 1.8rem; }
.how-steps h3 { font-size: 1.5rem; display: flex; align-items: center; gap: 0.6rem; }
.how-steps h3 span { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--gold-ink); color: var(--gold-ink); font: 600 0.9rem var(--sans); }
.how-steps p { margin-top: 0.4rem; color: var(--muted); }

/* Real app screens */
.screens { display: grid; grid-auto-flow: column; grid-auto-columns: min(68vw, 15.5rem); gap: 1rem; margin-top: 2.8rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0.5rem 1rem 1.5rem; margin-inline: -1rem; scrollbar-width: none; }
.screens::-webkit-scrollbar { display: none; }
@media (min-width: 56rem) { .screens { grid-auto-columns: 1fr; overflow: visible; margin-inline: 0; padding-inline: 0; gap: 2rem; justify-content: center; grid-template-columns: repeat(3, minmax(0, 16rem)); grid-auto-flow: row; } .shot:nth-child(2) { transform: translateY(-1.5rem); } }
.shot { margin: 0; scroll-snap-align: center; }
.shot img { display: block; width: 100%; height: auto; border-radius: 2rem; border: 7px solid var(--night); box-shadow: 0 30px 60px -24px rgba(31,26,43,0.5), 0 0 0 1px #3A2F45; background: var(--night); }
.shot figcaption { margin-top: 0.9rem; text-align: center; font-size: 0.92rem; color: var(--muted); }

/* Sample cards */
.cards { display: grid; gap: 1rem; margin-top: 2.2rem; }
@media (min-width: 56rem) { .cards { grid-template-columns: repeat(3, 1fr); } .cards .card:nth-child(2) { transform: translateY(1.5rem); } }
.card { border-radius: var(--radius); padding: 1.5rem; background: var(--surface); box-shadow: 0 1px 0 var(--hairline), 0 20px 40px -24px rgba(31,26,43,0.25); border-top: 4px solid var(--accent, var(--gold-ink)); }
.card .tag { font: 600 0.74rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.card h3 { font-size: 1.5rem; margin: 0.6rem 0 0.6rem; }
.card p { font-size: 0.98rem; }
.card .seen { margin-top: 1rem; font-size: 0.85rem; color: var(--muted); background: var(--tint, var(--sunk)); padding: 0.5rem 0.75rem; border-radius: 12px; }
.topic-heart { --accent: var(--heart); --tint: var(--heart-tint); }
.topic-head { --accent: var(--head); --tint: var(--head-tint); }
.topic-life { --accent: var(--life); --tint: var(--life-tint); }
.topic-fate { --accent: var(--fate); --tint: var(--fate-tint); }
.topic-mounts { --accent: var(--mounts); --tint: var(--mounts-tint); }

/* Daily card */
.daily { padding-block: clamp(4rem, 10vw, 7rem); text-align: center; }
.daily .section-lede { margin-inline: auto; }
.daily-card { margin: 2rem auto 0; max-width: 32rem; text-align: left; padding: 1.8rem; border-radius: var(--radius); background: linear-gradient(160deg, rgba(241,220,164,0.1), rgba(255,255,255,0.02)); box-shadow: inset 0 0 0 1px rgba(217,185,114,0.35); }
.daily-meta { display: flex; justify-content: space-between; gap: 1rem; font: 600 0.78rem var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.daily-card h3 { font-size: 1.9rem; margin: 0.8rem 0; }
.daily-card p { color: var(--night-muted); }
.daily-card .prompt { margin-top: 1.1rem; color: var(--night-ink); font: italic 300 1.25rem/1.45 var(--serif); }
.daily-card .prompt:empty { display: none; }
.share-day { margin-top: 1.3rem; }
.invite { margin-top: 1.6rem; padding: 1rem 1.2rem; border-radius: 18px; background: var(--night); color: var(--gold-hi); font: italic 300 1.25rem/1.4 var(--serif); }

/* Honest */
.two-col { display: grid; gap: 2rem; }
@media (min-width: 52rem) { .two-col { grid-template-columns: 0.9fr 1.1fr; gap: 4rem; } }
.ticks { list-style: none; padding: 0; display: grid; gap: 1.1rem; }
.ticks li { padding-left: 2rem; position: relative; color: var(--muted); }
.ticks li strong { color: var(--ink); font-weight: 600; }
.ticks li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--ink); color: var(--surface); font-size: 0.8rem; display: grid; place-items: center; }

/* Pricing */
.plans { display: grid; gap: 1rem; margin-top: 2.2rem; }
@media (min-width: 44rem) { .plans { grid-template-columns: 1fr 1fr; } }
@media (min-width: 68rem) { .plans { grid-template-columns: repeat(4, 1fr); } }
.plan { border-radius: var(--radius); padding: 1.5rem; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); }
.plan h3 { font: 600 1rem var(--sans); }
.plan .price { font: 300 2.4rem/1.1 var(--serif); margin-top: 0.6rem; }
.plan .price span { font: 400 0.95rem var(--sans); color: var(--muted); }
.plan .per { font-size: 0.9rem; color: var(--muted); }
.plan ul { margin-top: 1rem; padding-left: 1.1rem; display: grid; gap: 0.35rem; font-size: 0.95rem; color: var(--muted); }
.plan-best { background: var(--night); color: var(--night-ink); box-shadow: 0 0 0 1px var(--gold), 0 24px 50px -24px rgba(31,26,43,0.5); }
.plan-best .price span, .plan-best .per, .plan-best ul { color: var(--night-muted); }
.badge { display: inline-block; font: 600 0.72rem var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--night); background: var(--gold-hi); padding: 0.3rem 0.7rem; border-radius: var(--pill); margin-bottom: 0.8rem; }
.pricing .fine { margin-top: 1.4rem; }

/* FAQ */
.faq { border-bottom: 1px solid var(--hairline); }
.faq summary { list-style: none; cursor: pointer; padding: 1.2rem 2.5rem 1.2rem 0; font: 400 1.25rem/1.35 var(--serif); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 0.2rem; top: 1rem; font: 300 1.6rem var(--sans); color: var(--gold-ink); transition: transform 0.2s; }
.faq[open] summary::after { transform: rotate(45deg); }
.faq div { padding-bottom: 1.3rem; color: var(--muted); }
.faq div p + p { margin-top: 0.7rem; }
.faq-home .section-title { margin-bottom: 1rem; }

/* Finale */
.finale { padding-block: clamp(5rem, 12vw, 8rem); }
.finale h1, .finale h2 { font-size: clamp(2.3rem, 8vw, 4.4rem); font-weight: 350; text-wrap: balance; }
.finale .lede { margin-inline: auto; }

/* Footer */
.site-foot { background: var(--night); color: var(--night-muted); padding-block: 3.5rem 2rem; font-size: 0.95rem; }
.foot-grid { display: grid; gap: 2rem; }
@media (min-width: 52rem) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.foot-brand p { margin-top: 1rem; max-width: 22rem; }
.site-foot .fine { color: var(--night-muted); opacity: 0.85; }
.site-foot nav { display: grid; gap: 0.55rem; align-content: start; }
.site-foot nav h2 { font: 600 0.75rem var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.3rem; }
.site-foot a { color: var(--night-ink); text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }
.foot-base { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--night-line); font-size: 0.85rem; }

/* Guides */
.guide-hero { padding-block: 2.5rem 3rem; }
.guide-hero .crumbs { font-size: 0.85rem; color: var(--night-muted); margin-bottom: 1.2rem; }
.guide-hero .crumbs a { color: var(--night-muted); }
.guide-hero h1 { font-size: clamp(2.3rem, 8vw, 4rem); font-weight: 350; letter-spacing: -0.02em; text-wrap: balance; }
.guide-hero .indian { font: italic 300 1.2rem var(--serif); color: var(--gold); margin-top: 0.5rem; }
.guide-hero .answer { margin-top: 1.3rem; font-size: 1.15rem; color: var(--night-ink); max-width: 40rem; }
.guide-hero .updated { margin-top: 1.2rem; font-size: 0.82rem; color: var(--night-muted); }
.guide { padding-block: 3rem 4rem; }
.guide > * + * { margin-top: 1.1rem; }
.guide h2 { font-size: clamp(1.6rem, 4.6vw, 2.2rem); margin-top: 2.8rem; }
.guide h3 { font-size: 1.3rem; margin-top: 1.8rem; }
.guide p, .guide li { color: var(--ink); }
.guide ul, .guide ol { padding-left: 1.3rem; display: grid; gap: 0.45rem; }
.guide .definition { padding: 1.2rem 1.3rem; border-radius: 18px; background: var(--surface); box-shadow: inset 4px 0 0 var(--gold-ink), inset 0 0 0 1px var(--hairline); }
.guide .definition strong { font-family: var(--serif); font-weight: 500; }
.guide .note { font-size: 0.95rem; color: var(--muted); }
.table { overflow-x: auto; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--hairline); }
.table table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: 0.95rem; }
.table th, .table td { text-align: left; vertical-align: top; padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--hairline); }
.table thead th { background: var(--surface); font-weight: 600; }
.table tr:last-child td { border-bottom: 0; }
@media (max-width: 40rem) {
  .table { box-shadow: none; overflow: visible; }
  .table table, .table tbody, .table tr, .table td { display: block; min-width: 0; }
  .table thead { display: none; }
  .table tr { margin-bottom: 0.8rem; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); padding: 0.4rem 0; }
  .table td { border: 0; padding: 0.45rem 1rem; }
  .table td:first-child { font-family: var(--serif); font-size: 1.12rem; }
  .table td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; font: 600 0.7rem/1.4 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); }
}
@media (max-width: 24rem) { .pill { font-size: 0.92rem; padding-inline: 1rem; } }
.cta-card { margin-top: 3rem; padding: 1.8rem; border-radius: var(--radius); background: var(--night); color: var(--night-ink); }
.cta-card h2 { margin-top: 0; font-size: clamp(1.6rem, 5vw, 2.1rem); }
.cta-card p { color: var(--night-muted); margin-top: 0.7rem; }
.related { margin-top: 3rem; }
.related h2 { font-size: 1.4rem; margin-top: 0; }
.related ul { list-style: none; padding: 0; display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); margin-top: 1rem; }
.related a { display: block; padding: 1rem 1.1rem; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); text-decoration: none; color: var(--ink); font-family: var(--serif); font-size: 1.1rem; }
.related a:hover { box-shadow: inset 0 0 0 1px var(--gold-ink); }

.guide dl { display: grid; gap: 0; margin-top: 1.2rem; border-radius: 18px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--hairline); }
.guide dt { font: 500 1.15rem/1.3 var(--serif); padding: 1rem 1.2rem 0.2rem; background: var(--surface); }
.guide dd { margin: 0; padding: 0 1.2rem 1rem; background: var(--surface); color: var(--muted); border-bottom: 1px solid var(--hairline); }
.guide dd:last-of-type { border-bottom: 0; }

/* Legal and support (rendered from docs/legal and src/pages) */
main.doc { padding-block: 3rem 4rem; }
.prose { width: min(100% - 2rem, var(--measure)); margin-inline: auto; }
.doc h1 { font-size: clamp(2rem, 6vw, 2.8rem); margin-bottom: 1.5rem; }
.doc h2 { font-size: 1.45rem; margin: 2.25rem 0 0.75rem; }
.doc p, .doc li { margin-bottom: 0.75rem; }
.doc ul, .doc ol { padding-left: 1.25rem; }
.doc code { font-size: 0.9em; }
.doc .table { margin-block: 1rem; }
.doc details { border-bottom: 1px solid var(--hairline); padding-block: 0.9rem; }
.doc summary { cursor: pointer; font-weight: 600; }
.doc details p { margin-top: 0.6rem; color: var(--muted); }
.legal { font-size: 0.875rem; line-height: 1.6; }
.legal h1 { font-size: clamp(1.7rem, 5vw, 2.2rem); margin-bottom: 1rem; }
.legal h2 { font-size: 1.05rem; margin: 1.75rem 0 0.5rem; }
.legal p, .legal li { margin-bottom: 0.6rem; }
.legal table { font-size: 0.8125rem; }

/* Reveal on scroll (only when JS has marked the page) */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .js-reveal .reveal.in { opacity: 1; transform: none; }
}