/* ============================================================
   BACKLIST AUDIO — visual layer v3 (rebuilt by Fable)
   Identity: Laverty Prod DNA (Cormorant Garamond + Inter,
   ivory paper, ink, bronze) executed at production grade.
   ============================================================ */

:root{
  /* Palette — oklch, neutrals tinted toward the bronze brand hue (~80) */
  --paper:        oklch(0.977 0.006 90);
  --paper-deep:   oklch(0.958 0.010 88);
  --ink:          oklch(0.27 0.012 80);
  --ink-soft:     oklch(0.42 0.014 80);
  --stone:        oklch(0.55 0.016 80);
  --line:         oklch(0.89 0.012 85);
  --line-strong:  oklch(0.80 0.016 82);
  --bronze:       oklch(0.55 0.065 75);   /* Laverty accent (#8b7355) */
  --bronze-deep:  oklch(0.47 0.065 72);
  --brass:        oklch(0.80 0.095 85);   /* accent on dark */
  --brass-soft:   oklch(0.87 0.06 88);
  --dark:         oklch(0.235 0.014 78);
  --dark-2:       oklch(0.285 0.016 78);
  --dark-line:    oklch(0.37 0.02 78);
  --dark-text:    oklch(0.93 0.012 88);
  --dark-muted:   oklch(0.72 0.02 84);

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Fluid type scale (~1.3 ratio) */
  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.11rem);
  --step-1:  clamp(1.25rem, 1.18rem + 0.35vw, 1.45rem);
  --step-2:  clamp(1.6rem, 1.45rem + 0.75vw, 2rem);
  --step-3:  clamp(2.1rem, 1.8rem + 1.5vw, 2.9rem);
  --step-4:  clamp(2.9rem, 2.3rem + 3vw, 4.6rem);

  --space-sec: clamp(4.5rem, 4rem + 4vw, 8rem);

  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --dur: 0.9s;
  --radius: 14px;
}

/* ---------- Reset & base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--sans);
  font-size:var(--step-0);
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
::selection{ background:oklch(0.87 0.06 88); color:var(--ink); }

.wrap{ width:min(1120px, 100% - 3rem); margin-inline:auto; }

.skip{
  position:absolute; left:-999px; top:0; z-index:100;
  background:var(--ink); color:var(--paper); padding:0.6rem 1rem; border-radius:0 0 8px 0;
}
.skip:focus{ left:0; }

/* ---------- Type ---------- */
h1,h2,h3{ font-family:var(--serif); font-weight:600; line-height:1.08; letter-spacing:-0.01em; }
h1{ font-size:var(--step-4); }
h2{ font-size:var(--step-3); max-width:22ch; }
h3{ font-size:var(--step-2); }
p{ max-width:65ch; }

.eyebrow{
  font-family:var(--sans); font-size:0.72rem; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--bronze);
  display:flex; align-items:center; gap:0.75rem;
}
.eyebrow::before{ content:""; width:2rem; height:1px; background:var(--bronze); flex:none; }
.eyebrow-brass{ color:var(--brass); }
.eyebrow-brass::before{ background:var(--brass); }

.sec{ padding-block:var(--space-sec); }
.sec-tint{ background:var(--paper-deep); }
.sec-head{ margin-bottom:clamp(2.5rem, 2rem + 2vw, 4rem); }
.sec-head h2{ margin-top:1.1rem; }
.sec-sub{ margin-top:1rem; color:var(--ink-soft); font-size:var(--step-0); max-width:52ch; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:0.55rem;
  font-family:var(--sans); font-size:0.95rem; font-weight:600; text-decoration:none;
  padding:0.85rem 1.5rem; border-radius:999px; border:1px solid transparent;
  transition:transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out),
             background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); transition-duration:0.1s; }
.btn:focus-visible{ outline:2px solid var(--bronze); outline-offset:3px; }
.btn .arw{ transition:transform 0.45s var(--ease-out); }
.btn:hover .arw{ transform:translateX(4px); }

.btn-ink{ background:var(--ink); color:var(--paper); box-shadow:0 1px 2px oklch(0.27 0.012 80 / 0.25); }
.btn-ink:hover{ box-shadow:0 10px 24px -8px oklch(0.27 0.012 80 / 0.45); }
.btn-ghost{ border-color:var(--line-strong); color:var(--ink); background:transparent; }
.btn-ghost:hover{ border-color:var(--ink); background:oklch(0.27 0.012 80 / 0.03); }
.btn-brass{ background:var(--brass); color:var(--dark); }
.btn-brass:hover{ box-shadow:0 10px 28px -8px oklch(0.80 0.095 85 / 0.5); }
.btn-ghost-light{ border-color:oklch(0.55 0.02 80); color:var(--dark-text); }
.btn-ghost-light:hover{ border-color:var(--brass-soft); color:var(--brass-soft); }
.btn-sm{ padding:0.6rem 1.15rem; font-size:0.88rem; }
.btn-full{ justify-content:center; width:100%; margin-top:auto; }

/* ---------- Header ---------- */
.site-head{
  position:sticky; top:0; z-index:50;
  background:oklch(0.977 0.006 90 / 0.85);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.head-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:0.9rem; }
.brand{ display:flex; align-items:baseline; gap:0.6rem; text-decoration:none; }
.brand-mark{ width:26px; height:26px; align-self:center; fill:var(--ink); flex:none; }
.brand-mark .w1,.brand-mark .w2,.brand-mark .w3{ fill:var(--bronze); transform-origin:center; }
.brand:hover .w1{ animation:wave 0.9s var(--ease-out); }
.brand:hover .w2{ animation:wave 0.9s var(--ease-out) 0.08s; }
.brand:hover .w3{ animation:wave 0.9s var(--ease-out) 0.16s; }
@keyframes wave{ 0%,100%{ transform:scaleY(1);} 40%{ transform:scaleY(1.55);} }
.brand-name{ font-family:var(--serif); font-size:1.45rem; font-weight:700; letter-spacing:-0.01em; }
.brand-sub{ font-size:0.66rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--stone); }
.nav{ display:flex; align-items:center; gap:1.6rem; }
.navlink{
  font-size:0.92rem; font-weight:500; text-decoration:none; color:var(--ink-soft);
  position:relative; padding-block:0.3rem;
}
.navlink::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--bronze); transform:scaleX(0); transform-origin:right;
  transition:transform 0.45s var(--ease-out);
}
.navlink:hover{ color:var(--ink); }
.navlink:hover::after{ transform:scaleX(1); transform-origin:left; }
@media (max-width: 780px){ .navlink{ display:none; } }

/* ---------- Hero ---------- */
.hero{ position:relative; padding-block:clamp(4rem, 3rem + 4vw, 7.5rem) 0; overflow:hidden; }
.hero-grid{
  display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap:clamp(2.5rem, 2rem + 3vw, 5rem); align-items:center;
  padding-bottom:clamp(4rem, 3rem + 4vw, 7rem);
}
@media (max-width: 900px){ .hero-grid{ grid-template-columns:1fr; } }

.hero-h{ margin-top:1.4rem; }
.hero-h em{ font-style:italic; color:var(--bronze-deep); }
.hero-h .line{ display:block; overflow:hidden; padding-bottom:0.08em; margin-bottom:-0.08em; }
.hero-h .line-in{ display:inline-block; }
.js .hero-h .line-in{ transform:translateY(110%); }
.js .hero-h.armed .line:nth-child(1) .line-in{ animation:riseIn 1s var(--ease-out) 0.1s forwards; }
.js .hero-h.armed .line:nth-child(2) .line-in{ animation:riseIn 1s var(--ease-out) 0.22s forwards; }
.js .hero-h.armed .line:nth-child(3) .line-in{ animation:riseIn 1s var(--ease-out) 0.34s forwards; }
@keyframes riseIn{ to{ transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .js .hero-h .line-in{ transform:none !important; animation:none !important; }
}

.lede{ margin-top:1.6rem; font-size:var(--step-1); font-family:var(--serif); font-weight:500; line-height:1.45; color:var(--ink-soft); max-width:44ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:0.9rem; margin-top:2.2rem; }
.hero-note{ margin-top:1.6rem; font-size:var(--step--1); color:var(--stone); display:flex; align-items:center; gap:0.6rem; }
.pulse-dot{ width:8px; height:8px; border-radius:50%; background:var(--bronze); animation:pulse 2.4s ease-in-out infinite; flex:none; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 oklch(0.55 0.065 75 / 0.45);} 50%{ box-shadow:0 0 0 7px oklch(0.55 0.065 75 / 0);} }
@media (prefers-reduced-motion: reduce){ .pulse-dot{ animation:none; } }

/* Statement card — the memorable object */
.statement{
  background:linear-gradient(175deg, oklch(0.99 0.004 95), oklch(0.965 0.010 88));
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  padding:clamp(1.5rem, 1.2rem + 1vw, 2.2rem);
  box-shadow:
    0 1px 2px oklch(0.27 0.012 80 / 0.06),
    0 24px 48px -20px oklch(0.27 0.012 80 / 0.25);
  rotate:0.6deg;
  transition:rotate 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
.statement:hover{ rotate:0deg; box-shadow:0 1px 2px oklch(0.27 0.012 80 / 0.06), 0 32px 64px -24px oklch(0.27 0.012 80 / 0.3); }
.st-head{
  display:flex; justify-content:space-between; gap:1rem;
  font-size:0.66rem; font-weight:600; letter-spacing:0.15em; text-transform:uppercase; color:var(--stone);
  padding-bottom:0.9rem; border-bottom:1px solid var(--line);
}
.st-title{ font-family:var(--serif); font-size:var(--step-1); font-weight:600; line-height:1.25; margin-top:1.1rem; }
.st-figures{ display:flex; align-items:flex-end; gap:1rem; margin-top:1.4rem; }
.st-fig strong{ font-family:var(--serif); font-size:clamp(1.9rem, 1.6rem + 1.4vw, 2.7rem); font-weight:700; line-height:1; display:block; font-variant-numeric:tabular-nums; }
.st-fig.right strong{ color:var(--bronze-deep); }
.st-cap{ font-size:0.66rem; font-weight:600; letter-spacing:0.13em; text-transform:uppercase; color:var(--stone); display:block; margin-bottom:0.4rem; }
.st-arrow{ flex:1; min-width:40px; padding-bottom:0.5rem; }
.st-arrow svg{ width:100%; height:34px; overflow:visible; }
.spark{
  fill:none; stroke:var(--bronze); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:240; stroke-dashoffset:240;
}
.js .statement.armed .spark{ animation:draw 1.6s var(--ease-out) 0.5s forwards; }
html:not(.js) .spark{ stroke-dashoffset:0; }
@media (prefers-reduced-motion: reduce){ .spark{ stroke-dashoffset:0 !important; animation:none !important; } }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.st-rows{ margin-top:1.5rem; border-top:1px solid var(--line); }
.st-row{
  display:flex; justify-content:space-between; gap:1rem; padding-block:0.7rem;
  border-bottom:1px solid var(--line); font-size:var(--step--1);
}
.st-row span{ color:var(--stone); }
.st-row strong{ font-weight:600; }
.st-foot{ margin-top:1rem; font-size:0.78rem; color:var(--stone); line-height:1.5; }

/* Hero waveform divider */
.hero-wave{
  height:64px; display:flex; align-items:center; justify-content:center; gap:2px;
  overflow:hidden; padding-inline:2px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.hw-bar{
  flex:0 0 auto; width:3px; height:70%; border-radius:2px; background:var(--bronze);
  opacity:0.5; transform:scaleY(0.16); transform-origin:center;
  animation:hwpulse var(--dur,2s) ease-in-out calc(var(--i) * -0.045s) infinite;
  will-change:transform;
}
@keyframes hwpulse{ 0%,100%{ transform:scaleY(0.16); } 50%{ transform:scaleY(1); } }
@media (prefers-reduced-motion: reduce){
  .hw-bar{ animation:none; transform:scaleY(0.7); }
}

/* ---------- Trust strip ---------- */
.trust{ border-block:1px solid var(--line); background:var(--paper-deep); }
.trust-row{ display:flex; align-items:center; justify-content:space-between; gap:2rem; padding-block:1.4rem; flex-wrap:wrap; }
.trust-row p{ font-size:var(--step--1); color:var(--stone); max-width:38ch; }
.trust-row ul{ display:flex; gap:2.2rem; list-style:none; padding:0; flex-wrap:wrap; }
.trust-row li{ font-family:var(--serif); font-size:1.15rem; font-weight:600; color:var(--ink-soft); }

/* ---------- Steps ---------- */
.steps{
  list-style:none; padding:0;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(1.5rem, 1rem + 2vw, 3rem);
}
@media (max-width: 860px){ .steps{ grid-template-columns:1fr; max-width:34rem; } }
.step{ position:relative; padding-top:1.4rem; border-top:1px solid var(--line-strong); }
.step .idx{
  font-family:var(--serif); font-size:3.2rem; font-weight:500; font-style:italic;
  color:var(--bronze); opacity:0.55; line-height:1; display:block;
}
.step h3{ margin-top:0.9rem; font-size:var(--step-1); }
.step p{ margin-top:0.7rem; color:var(--ink-soft); font-size:var(--step--1); line-height:1.7; }

/* ---------- Proof (dark) ---------- */
.proof{ background:var(--dark); color:var(--dark-text); padding-block:var(--space-sec); }
.proof .sec-sub{ color:var(--dark-muted); }
.proof h2{ color:oklch(0.96 0.008 90); }
.proof .eyebrow{ color:var(--brass); }
.proof .eyebrow::before{ background:var(--brass); }
.proof-grid{
  display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, 0.75fr);
  gap:clamp(2rem, 1.5rem + 2vw, 4rem); align-items:stretch;
}
@media (max-width: 900px){ .proof-grid{ grid-template-columns:1fr; } }

.chartcard{
  background:var(--dark-2); border:1px solid var(--dark-line); border-radius:var(--radius);
  padding:clamp(1.4rem, 1.1rem + 1vw, 2rem);
}
.ch-top{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.ch-top span{ font-size:0.7rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--dark-muted); }
.ch-top strong{ font-family:var(--serif); font-size:var(--step-1); color:var(--brass-soft); font-variant-numeric:tabular-nums; }
#revchart{ width:100%; height:auto; }
#revchart .gridline{ stroke:var(--dark-line); stroke-width:1; stroke-dasharray:3 5; }
#revchart .area{ opacity:0; transition:opacity 1.2s ease 0.9s; }
#revchart.armed .area{ opacity:1; }
#revchart .linepath{ fill:none; stroke:var(--brass); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
#revchart .dot{ fill:var(--dark-2); stroke:var(--brass); stroke-width:2.5; opacity:0; }
#revchart .lbl{ font-family:var(--sans); font-size:13px; font-weight:600; fill:var(--brass-soft); opacity:0; }
#revchart .mon{ font-family:var(--sans); font-size:12px; fill:var(--dark-muted); }
#revchart.armed .dot, #revchart.armed .lbl{ animation:fadeUp 0.6s var(--ease-out) forwards; }
html:not(.js) #revchart .dot, html:not(.js) #revchart .lbl, html:not(.js) #revchart .area{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  #revchart .dot, #revchart .lbl, #revchart .area{ opacity:1 !important; animation:none !important; }
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }

.proof-stats{ display:flex; flex-direction:column; gap:1px; background:var(--dark-line); border:1px solid var(--dark-line); border-radius:var(--radius); overflow:hidden; }
.pstat{ background:var(--dark-2); padding:1.4rem 1.6rem; flex:1; display:flex; flex-direction:column; justify-content:center; }
.pstat strong{ font-family:var(--serif); font-size:clamp(2rem, 1.7rem + 1.5vw, 2.9rem); font-weight:700; line-height:1.1; color:oklch(0.96 0.008 90); font-variant-numeric:tabular-nums; }
.pstat span{ font-size:var(--step--1); color:var(--dark-muted); margin-top:0.2rem; }
.proof-foot{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--dark-line); color:var(--dark-muted); font-size:var(--step--1); max-width:70ch; }

/* ---------- Pricing ---------- */
.plans{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.2rem, 1rem + 1vw, 2rem); align-items:stretch; }
@media (max-width: 820px){ .plans{ grid-template-columns:1fr; } }
.plan{
  display:flex; flex-direction:column;
  border:1px solid var(--line-strong); border-radius:var(--radius);
  padding:clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem);
  background:oklch(0.985 0.004 95);
  transition:transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.plan:hover{ transform:translateY(-4px); box-shadow:0 24px 48px -20px oklch(0.27 0.012 80 / 0.2); }
.plan .tag{ font-size:0.7rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--bronze); }
.plan .price{ font-size:clamp(2.4rem, 2rem + 2vw, 3.4rem); font-weight:700; margin-top:0.8rem; line-height:1; }
.plan .per{ font-family:var(--sans); font-size:1rem; font-weight:500; color:var(--stone); margin-left:0.3rem; }
.plan .desc{ margin-top:0.9rem; color:var(--ink-soft); font-size:var(--step--1); }
.feat{ list-style:none; padding:0; margin-top:1.4rem; display:grid; gap:0.7rem; }
.feat li{ font-size:var(--step--1); line-height:1.55; padding-left:1.5rem; position:relative; }
.feat li::before{ content:""; position:absolute; left:0; top:0.55em; width:0.7rem; height:1px; background:var(--bronze); }
.plan .cap{ margin-top:1.4rem; margin-bottom:1.4rem; font-size:0.8rem; color:var(--stone); line-height:1.55; }
.plan-dark{ background:var(--dark); border-color:var(--dark); color:var(--dark-text); }
.plan-dark .tag{ color:var(--brass); }
.plan-dark .price{ color:oklch(0.96 0.008 90); }
.plan-dark .per,.plan-dark .desc,.plan-dark .cap{ color:var(--dark-muted); }
.plan-dark .feat li::before{ background:var(--brass); }
.plan-dark:hover{ box-shadow:0 28px 56px -20px oklch(0.235 0.014 78 / 0.55); }

.founding{
  margin-top:clamp(2rem, 1.6rem + 1.5vw, 3rem);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  background:var(--paper-deep); border:1px solid var(--line-strong); border-radius:var(--radius);
  padding:clamp(1.4rem, 1.2rem + 1vw, 2rem);
}
.founding-line{ margin-top:0.7rem; font-family:var(--serif); font-size:var(--step-1); line-height:1.4; max-width:46ch; }
.founding-line strong{ color:var(--bronze-deep); }
.vat-note{ margin-top:1rem; font-size:0.8rem; color:var(--stone); }

/* ---------- FAQ ---------- */
.faq-grid{ display:grid; grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr); gap:clamp(2rem, 1.5rem + 2vw, 4rem); align-items:start; }
@media (max-width: 860px){ .faq-grid{ grid-template-columns:1fr; } }
.sticky-head{ position:sticky; top:6rem; margin-bottom:0; }
@media (max-width: 860px){ .sticky-head{ position:static; } }
.faq-list{ display:flex; flex-direction:column; }
.faq-item{ border-bottom:1px solid var(--line-strong); }
.faq-item:first-child{ border-top:1px solid var(--line-strong); }
.faq-item summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  font-family:var(--serif); font-size:var(--step-1); font-weight:600; padding-block:1.2rem;
  transition:color 0.3s ease;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--bronze-deep); }
.faq-item summary:focus-visible{ outline:2px solid var(--bronze); outline-offset:3px; }
.faq-item summary::after{
  content:"+"; font-family:var(--sans); font-size:1.3rem; font-weight:400; color:var(--bronze);
  flex:none; transition:transform 0.45s var(--ease-out);
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-a p{ padding-bottom:1.3rem; color:var(--ink-soft); font-size:var(--step--1); line-height:1.7; max-width:60ch; }

/* ---------- CTA ---------- */
.cta{ background:var(--dark); color:var(--dark-text); padding-block:var(--space-sec); position:relative; overflow:hidden; }
.cta::before{
  content:""; position:absolute; inset:-40% -20%; pointer-events:none;
  background:radial-gradient(ellipse at 70% 30%, oklch(0.80 0.095 85 / 0.07), transparent 55%);
}
.cta-inner{ position:relative; max-width:56ch; }
.cta h2{ color:oklch(0.96 0.008 90); margin-top:1.1rem; }
.cta .sec-sub{ color:var(--dark-muted); }
.cta-actions{ display:flex; flex-wrap:wrap; gap:0.9rem; margin-top:2.2rem; }
.cta-note{ margin-top:1.4rem; font-size:var(--step--1); color:var(--dark-muted); }

/* ---------- Footer ---------- */
.site-foot{ border-top:1px solid var(--line); padding-block:3.5rem 2rem; background:var(--paper); }
.foot-row{ display:flex; justify-content:space-between; gap:2.5rem; flex-wrap:wrap; }
.foot-brand{ max-width:36ch; }
.foot-brand .brand-mark{ fill:var(--ink); margin-bottom:0.6rem; }
.foot-brand .brand-mark rect:not(:first-child){ fill:var(--bronze); }
.foot-brand .brand-name{ font-family:var(--serif); font-size:1.3rem; font-weight:700; }
.foot-brand p{ margin-top:0.8rem; font-size:var(--step--1); color:var(--stone); }
.foot-cols{ display:flex; gap:4rem; flex-wrap:wrap; }
.foot-col h4{ font-size:0.7rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--stone); margin-bottom:1rem; }
.foot-col a{ display:block; text-decoration:none; color:var(--ink-soft); font-size:var(--step--1); padding-block:0.3rem; transition:color 0.25s ease; }
.foot-col a:hover{ color:var(--bronze-deep); }
.foot-bottom{ margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--line); }
.foot-bottom p{ font-size:0.78rem; color:var(--stone); max-width:none; }

/* ---------- Reveal system (safe by default) ----------
   Content is VISIBLE unless <html> has .js (added by main.js).
   If JS fails or never runs, nothing is ever hidden. */
.js .reveal{ opacity:0; transform:translateY(24px); }
.js .reveal.in{
  opacity:1; transform:none;
  transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.js .reveal.d1.in{ transition-delay:0.08s; }
.js .reveal.d2.in{ transition-delay:0.16s; }
.js .reveal.d3.in{ transition-delay:0.24s; }
.js .reveal.d4.in{ transition-delay:0.32s; }
.js .reveal.d5.in{ transition-delay:0.4s; }
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .btn, .plan{ transition:none !important; }
}

/* ============================================================
   Legal pages (privacy, terms)
   ============================================================ */
.legal-head{ border-bottom:1px solid var(--line); }
.legal-head .head-row{ min-height:72px; }
.legal{ max-width:44rem; margin-inline:auto; padding:clamp(2.5rem,5vw,4.5rem) 0 clamp(3rem,6vw,5rem); }
.legal .eyebrow{ margin-bottom:1rem; }
.legal h1{ font-size:clamp(2rem,1.4rem+2.4vw,3rem); line-height:1.05; margin-bottom:1rem; }
.legal .updated{ color:var(--stone); font-size:var(--step--1); margin-bottom:1.5rem; }
.legal .note{ background:var(--paper-deep); border:1px solid var(--line-strong); border-radius:12px;
  padding:1rem 1.25rem; font-size:var(--step--1); color:var(--ink-soft); margin-bottom:2.5rem; }
.legal h2{ font-size:var(--step-1); margin:2.2rem 0 0.6rem; }
.legal h3{ font-size:1.05rem; font-family:var(--sans); font-weight:600; margin:1.4rem 0 0.4rem; color:var(--ink); }
.legal p{ color:var(--ink-soft); line-height:1.75; margin-bottom:0.9rem; max-width:none; }
.legal ul{ color:var(--ink-soft); line-height:1.7; margin:0 0 1rem 1.1rem; padding:0; }
.legal li{ margin-bottom:0.4rem; }
.legal a{ color:var(--bronze-deep); text-decoration:underline; text-underline-offset:2px; }
.legal a:hover{ color:var(--ink); }
.legal .back{ display:inline-flex; align-items:center; gap:0.4rem; margin-top:2.5rem;
  font-family:var(--sans); font-size:var(--step--1); text-decoration:none; color:var(--ink-soft); }
.legal .back:hover{ color:var(--bronze-deep); }