/* ==========================================================================
   آقای ناشر — Landing styles
   Static, no build. RTL-first. Design tokens → components → responsive.
   Palette / type / motion per the direction contract in index.html.
   ========================================================================== */

/* ---- 0. Self-hosted fonts (no Google dependency — reliable inside Iran) --
   Variable woff2, subset by script. Estedad = display, Vazirmatn = text.
   Files: assets/fonts/  (from @fontsource-variable, OFL). --------------- */
@font-face{
  font-family:'Vazirmatn';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/vazirmatn.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}
@font-face{
  font-family:'Vazirmatn';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/vazirmatn-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Estedad';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/estedad.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}
@font-face{
  font-family:'Estedad';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/estedad-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---- 1. Reset ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,svg{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
ul{list-style:none}
a{color:inherit}

/* ---- 2. Tokens ------------------------------------------------------------ */
:root{
  /* surfaces */
  --paper:#ffffff;
  --ground:#faf8f3;
  --ground-2:#f3efe6;
  --ink-deep:#171310;          /* dark plate */

  /* ink */
  --ink:#1a1714;
  --ink-2:#5c554b;
  --ink-3:#787063;
  --ink-on-dark:#f5f1e8;
  --ink-2-on-dark:#c4bcab;

  /* gold — structural accent only. Olive-gold, keyed to the انعکاس logo (~#909068). */
  --gold:#8c7c3e;              /* large numerals, rules, borders (≥3:1 on light) */
  --gold-text:#6b6440;         /* gold at body size — AA on paper/ground/ground-2 */
  --gold-line:#cfc7a6;         /* decorative hairline */
  --gold-wash:#f1eee0;         /* faint fill */
  --gold-on-dark:#c9b57e;      /* olive-gold for dark plates (9:1 on --ink-deep) */

  /* lines */
  --rule:#e7e0d2;
  --rule-strong:#d5ccbb;
  --rule-on-dark:rgba(245,241,232,.14);

  /* feedback */
  --danger:#a12b1e;
  --danger-bg:#fbf1ef;
  --ok:#2f6b3f;

  /* radius */
  --r-xs:3px; --r-sm:5px; --r-md:9px; --r-lg:14px;

  /* shadow — offset + blur, never a flat halo */
  --sh-sm:0 1px 2px rgba(26,23,20,.04), 0 1px 3px rgba(26,23,20,.06);
  --sh-md:0 6px 18px -6px rgba(26,23,20,.10), 0 2px 6px -2px rgba(26,23,20,.06);
  --sh-lg:0 20px 48px -16px rgba(26,23,20,.16), 0 6px 16px -8px rgba(26,23,20,.10);

  /* rhythm */
  --wrap:1140px;
  --wrap-narrow:760px;
  --gutter:clamp(1.25rem,5vw,3rem);
  --section-y:clamp(4.5rem,9vw,8rem);
  --header-h:76px;

  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur:.42s;

  /* type */
  --font-text:"Vazirmatn","Segoe UI",Tahoma,Arial,sans-serif;
  --font-display:"Estedad","Vazirmatn","Segoe UI",Tahoma,sans-serif;

  color-scheme:light;
}

/* ---- 3. Base ------------------------------------------------------------- */
body{
  font-family:var(--font-text);
  font-weight:400;
  font-size:1.0625rem;         /* 17px — Persian reads a touch larger */
  line-height:1.85;
  color:var(--ink);
  background:var(--ground);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1.5rem)}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.32;
  color:var(--ink);
  text-wrap:balance;
  letter-spacing:-.003em;
}
h2{font-size:clamp(1.6rem,1rem + 2.6vw,2.45rem);font-weight:800}
h3{font-size:clamp(1.18rem,1rem + .8vw,1.4rem);font-weight:700;line-height:1.4}
p{max-width:64ch}
strong{font-weight:700;color:var(--ink)}

::selection{background:var(--gold-wash);color:var(--ink)}
:root{caret-color:var(--gold-text)}
*{scrollbar-width:thin;scrollbar-color:var(--rule-strong) transparent}
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-thumb{background:var(--rule-strong);border-radius:99px;border:3px solid var(--ground)}

a{text-underline-offset:.22em;text-decoration-thickness:from-font}

:focus-visible{
  outline:2px solid var(--gold-text);
  outline-offset:3px;
}
.plate :focus-visible{outline-color:var(--gold-on-dark)}

.skip-link{
  position:fixed;inset-block-start:.65rem;inset-inline-start:.65rem;
  z-index:200;background:var(--ink);color:var(--ink-on-dark);
  padding:.6rem 1rem;border-radius:var(--r-sm);
  transform:translateY(-160%);transition:transform .2s var(--ease);
}
.skip-link:focus-visible{transform:none}
#main:focus{outline:none}

/* ---- 4. Layout helpers ------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:var(--wrap-narrow)}
.section{padding-block:var(--section-y);border-block-start:1px solid var(--rule)}
.section[id]{scroll-margin-block-start:calc(var(--header-h) + 1rem)}

/* deliberate paper / ground alternation, dark plates self-delimiting */
.section--problem,.section--pillars,.section--beforeafter,
.section--proof,.section--why{background:var(--paper)}
.section--intro,.section--outcomes,.section--pricing,
.section--about,.section--contact{background:var(--ground)}
.section--faq{background:var(--gold-wash);border-block-start-color:var(--gold-line)}
.plate,.plate + .section{border-block-start-color:transparent}

.section__head{max-width:52ch;margin-block-end:clamp(2.25rem,4vw,3.5rem)}
.section__head--wide{max-width:60ch}
.section__intro{margin-block-start:1rem;color:var(--ink-2);font-size:1.075rem}
.section--intro .section__head{
  max-width:46rem;margin-inline:auto;text-align:center;
}
.section--intro .eyebrow{justify-content:center}

/* ---- 5. Eyebrow (brief-pinned; rendered as a classification label) --- */
.eyebrow{
  display:flex;align-items:center;gap:.7rem;
  font-size:.82rem;font-weight:600;letter-spacing:.04em;
  color:var(--gold-text);margin-block-end:1.1rem;max-width:none;
}
.eyebrow__rule{inline-size:2rem;block-size:1px;background:var(--gold);flex:none}
.eyebrow--ondark{color:var(--gold-on-dark)}
.eyebrow--ondark .eyebrow__rule{background:var(--gold-on-dark)}

/* ---- 6. Buttons ----------------------------------------------------------- */
.btn{
  --btn-bg:var(--ink);--btn-fg:var(--ink-on-dark);--btn-bd:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.6rem;min-block-size:48px;
  font-family:var(--font-text);font-weight:600;font-size:1rem;line-height:1;
  text-decoration:none;cursor:pointer;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid var(--btn-bd);border-radius:var(--r-sm);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),transform .12s var(--ease),
             box-shadow var(--dur) var(--ease);
}
.btn--primary:hover{--btn-bg:#000;--btn-bd:#000;box-shadow:var(--sh-md)}
.btn--primary:active{transform:translateY(1px)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--rule-strong)}
.btn--ghost:hover{--btn-bd:var(--ink);--btn-bg:rgba(26,23,20,.03)}
.btn--sm{padding:.6rem 1.05rem;min-block-size:40px;font-size:.92rem}
.btn--block{display:flex;inline-size:100%}
.btn--ondark.btn--primary{--btn-bg:var(--gold-on-dark);--btn-fg:#20180a;--btn-bd:var(--gold-on-dark)}
.btn--ondark.btn--primary:hover{--btn-bg:#d6bd85;--btn-bd:#d6bd85}
.btn--ondark.btn--ghost{--btn-fg:var(--ink-on-dark);--btn-bd:rgba(245,241,232,.4)}
.btn--ondark.btn--ghost:hover{--btn-bd:var(--ink-on-dark);--btn-bg:rgba(245,241,232,.06)}

/* ---- 7. Header --------------------------------------------------------- */
.site-header{
  position:sticky;inset-block-start:0;z-index:100;
  background:var(--ground);
  background:color-mix(in srgb,var(--ground) 82%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-block-end:1px solid transparent;
  transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.site-header.is-scrolled{
  background:color-mix(in srgb,var(--ground) 92%,transparent);
  border-block-end-color:var(--rule);
  box-shadow:0 1px 0 rgba(26,23,20,.02),0 8px 24px -18px rgba(26,23,20,.3);
}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;
  min-block-size:var(--header-h);gap:1rem}

.brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
.brand__logo{block-size:42px;inline-size:auto;flex:none}
.brand__name{
  font-family:var(--font-display);font-weight:800;font-size:1.12rem;color:var(--ink);
  padding-inline-start:.7rem;border-inline-start:1px solid var(--rule-strong);
}

.site-nav__list{display:flex;align-items:center;gap:.35rem}
.site-nav__list a:not(.btn){
  display:inline-block;padding:.5rem .8rem;border-radius:var(--r-xs);
  font-size:.95rem;font-weight:500;color:var(--ink-2);text-decoration:none;
  transition:color .2s var(--ease),background .2s var(--ease);
}
.site-nav__list a:not(.btn):hover{color:var(--ink);background:rgba(26,23,20,.04)}
.site-nav__list a:not(.btn)[aria-current="true"]{
  color:var(--ink);font-weight:600;
  box-shadow:inset 0 -2px 0 var(--gold);border-radius:0;
}
.site-nav__cta{margin-inline-start:.5rem}

.nav-toggle{display:none;align-items:center;gap:.5rem;background:none;border:0;
  padding:.5rem;cursor:pointer;color:var(--ink)}
.nav-toggle__bars{inline-size:22px;block-size:14px;position:relative;display:block}
.nav-toggle__bars span{position:absolute;inset-inline:0;block-size:2px;background:currentColor;
  border-radius:2px;transition:transform .25s var(--ease),opacity .2s var(--ease)}
.nav-toggle__bars span:nth-child(1){inset-block-start:0}
.nav-toggle__bars span:nth-child(2){inset-block-start:6px}
.nav-toggle__bars span:nth-child(3){inset-block-start:12px}
.nav-toggle__label{font-size:.9rem;font-weight:600}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---- 8. Hero -------------------------------------------------------------- */
.hero{background:var(--ground);padding-block:clamp(3.5rem,7vw,6.5rem) var(--section-y);position:relative}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero__title{font-size:clamp(2.3rem,1.3rem + 4.4vw,4rem);font-weight:900;line-height:1.18;margin-block-end:.5rem}
.hero__lede{font-family:var(--font-display);font-weight:600;font-size:clamp(1.15rem,1rem + .7vw,1.45rem);
  color:var(--ink-2);margin-block-end:1.4rem;max-width:40ch}
.hero__desc{color:var(--ink-2);font-size:1.08rem;max-width:56ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-block-start:2rem}
.hero__microcopy{margin-block-start:1rem;font-size:.9rem;color:var(--ink-3)}

/* stage rail — the one authored motion moment */
.hero__rail{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:clamp(1.4rem,3vw,2.2rem);box-shadow:var(--sh-md);
}
.rail__caption{font-size:.8rem;font-weight:600;letter-spacing:.03em;color:var(--ink-3);
  margin-block-end:1.6rem}
.rail{position:relative;display:flex;justify-content:space-between;gap:.5rem}
.rail::before{                     /* the track — spans first dot centre to last */
  content:"";position:absolute;inset-block-start:5px;inset-inline:8.333%;block-size:2px;
  background:var(--rule-strong);
}
.rail::after{                      /* the drawn line */
  content:"";position:absolute;inset-block-start:5px;inset-inline:8.333%;block-size:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:right center;
}
.rail.is-drawn::after{animation:rail-draw .9s var(--ease) forwards}
@keyframes rail-draw{to{transform:scaleX(1)}}
.rail__stage{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:.65rem;flex:1;min-inline-size:0}
.rail__dot{inline-size:12px;block-size:12px;border-radius:50%;background:var(--paper);
  border:2px solid var(--rule-strong);position:relative;z-index:1;flex:none;
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease)}
.rail.is-drawn .rail__dot{border-color:var(--gold);background:var(--gold)}
.rail__label{font-size:.82rem;font-weight:500;color:var(--ink-2);text-align:center;line-height:1.5}
.rail.is-drawn .rail__stage:last-child .rail__dot{transform:scale(1.35);background:var(--gold);
  box-shadow:0 0 0 4px var(--gold-wash)}
.rail__note{margin-block-start:1.5rem;font-size:.9rem;color:var(--ink-3);max-width:none}
/* stagger the dots lighting up */
.rail.is-drawn .rail__stage:nth-child(1) .rail__dot{transition-delay:.05s}
.rail.is-drawn .rail__stage:nth-child(2) .rail__dot{transition-delay:.2s}
.rail.is-drawn .rail__stage:nth-child(3) .rail__dot{transition-delay:.35s}
.rail.is-drawn .rail__stage:nth-child(4) .rail__dot{transition-delay:.5s}
.rail.is-drawn .rail__stage:nth-child(5) .rail__dot{transition-delay:.65s}
.rail.is-drawn .rail__stage:nth-child(6) .rail__dot{transition-delay:.8s}

/* ---- 9. Problem -------------------------------------------------------- */
.problem-list{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(1.5rem,4vw,3.5rem);
  border-block-start:1px solid var(--rule);
}
.problem-list li{
  padding-block:1.05rem;padding-inline-start:1.6rem;position:relative;
  border-block-end:1px solid var(--rule);color:var(--ink-2);font-size:1.02rem;
}
.problem-list li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:1.5rem;
  inline-size:7px;block-size:7px;border-block-start:1.5px solid var(--gold);
  border-inline-end:1.5px solid var(--gold);transform:rotate(45deg);
}
.problem-turn{
  margin-block-start:2.5rem;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.15rem,1rem + 1vw,1.5rem);line-height:1.6;color:var(--ink);max-width:44ch;
}
.problem-turn strong{color:var(--gold-text)}

/* ---- 10. Tablet showcase + slider -------------------------------- */
.tablet-showcase{
  display:flex;flex-direction:column;align-items:center;gap:1.5rem;
  max-width:720px;margin-inline:auto;
}
.tablet{
  width:100%;
  filter:drop-shadow(0 18px 40px rgba(26,23,20,.14)) drop-shadow(0 4px 12px rgba(26,23,20,.08));
}
.tablet__bezel{
  position:relative;
  padding:clamp(14px,2.2vw,18px) clamp(14px,2.2vw,18px) clamp(18px,2.8vw,24px);
  background:linear-gradient(160deg,#2a2622 0%,#171310 45%,#0f0d0b 100%);
  border-radius:clamp(22px,3.5vw,32px);
  border:1px solid #3a342e;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.tablet__camera{
  width:8px;height:8px;margin:0 auto .55rem;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#4a4540,#1a1714 70%);
  box-shadow:0 0 0 2px #0f0d0b;
}
.tablet__screen{
  position:relative;overflow:hidden;border-radius:clamp(6px,1vw,10px);
  background:#000;aspect-ratio:4 / 3;
}
.tablet__home{
  width:clamp(56px,12%,72px);height:4px;margin:.85rem auto 0;border-radius:99px;
  background:rgba(255,255,255,.18);
}
.tablet-slider{position:relative;inline-size:100%;block-size:100%}
.tablet-slider__track{position:relative;inline-size:100%;block-size:100%}
.tablet-slider__slide{
  position:absolute;inset:0;margin:0;opacity:0;
  transition:opacity .55s var(--ease);
  pointer-events:none;
}
.tablet-slider__slide.is-active{opacity:1;pointer-events:auto;z-index:1}
.tablet-slider__slide img{width:100%;height:100%;object-fit:cover}

.tablet-controls{
  display:flex;align-items:center;justify-content:center;gap:1rem;
}
.tablet-controls__btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;border-radius:50%;
  border:1px solid var(--rule-strong);background:var(--paper);color:var(--ink);
  cursor:pointer;transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.tablet-controls__btn svg{width:1.1rem;height:1.1rem}
.tablet-controls__btn:hover{border-color:var(--ink);background:var(--ground-2)}
.tablet-controls__btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.tablet-controls__dots{display:flex;align-items:center;gap:.5rem}
.tablet-controls__dot{
  width:.55rem;height:.55rem;padding:0;border:0;border-radius:50%;
  background:var(--rule-strong);cursor:pointer;
  transition:transform .2s var(--ease),background .2s var(--ease);
}
.tablet-controls__dot.is-active{background:var(--gold);transform:scale(1.25)}
.tablet-controls__dot:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .tablet-slider__slide{transition:none}
}

/* ---- 11. Checklist (shared) ----------------------------------------- */
.checklist li{position:relative;padding-inline-start:1.6rem;color:var(--ink-2)}
.checklist li::before{        /* CSS checkmark — RTL: inline-start = physical right */
  content:"";position:absolute;inset-inline-start:1px;inset-block-start:.6em;
  inline-size:9px;block-size:5px;
  border-inline-start:1.6px solid var(--gold);
  border-block-end:1.6px solid var(--gold);
  transform:rotate(45deg);
}

/* ---- 12. Pillars (alternating rows) -------------------------------- */
.pillars{border-block-start:1px solid var(--rule)}
.pillar{
  display:grid;grid-template-columns:150px 1fr;gap:clamp(1.5rem,4vw,3.5rem);
  padding-block:clamp(2.25rem,4vw,3.25rem);border-block-end:1px solid var(--rule);
  align-items:start;
}
.pillar--flip{grid-template-columns:1fr 150px}
.pillar--flip .pillar__aside{order:2}
.pillar__aside{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.pillar--flip .pillar__aside{align-items:flex-end}
.pillar__index{
  font-family:var(--font-display);font-weight:800;font-size:3.4rem;line-height:1;
  color:var(--gold);opacity:.28;
}
.pillar__icon{color:var(--ink);inline-size:30px;block-size:30px}
.pillar__icon svg{inline-size:100%;block-size:100%}
.pillar__title{margin-block-end:1.25rem}
.checklist--cols{
  display:grid;grid-template-columns:repeat(2,1fr);gap:.55rem 1.75rem;
  font-size:.98rem;
}
.pillar__value{
  margin-block-start:1.6rem;font-family:var(--font-display);font-weight:700;
  font-size:1.1rem;line-height:1.55;color:var(--ink);max-width:40ch;
}
.pillar__value-rule{display:block;inline-size:2.5rem;block-size:2px;background:var(--gold);
  margin-block-end:.9rem}

/* ---- 13. Platform (dark plate) ------------------------------------- */
.plate{background:var(--ink-deep);color:var(--ink-on-dark)}
.plate h1,.plate h2,.plate h3{color:var(--ink-on-dark)}
.plate .section__intro{color:var(--ink-2-on-dark)}
.plate strong{color:var(--ink-on-dark)}
.plate .section + .section{border-color:var(--rule-on-dark)}

.platform__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.tag-row{display:flex;flex-wrap:wrap;gap:.6rem}
.tag-row li{
  padding:.5rem 1rem;border:1px solid var(--rule-on-dark);border-radius:var(--r-sm);
  font-size:.92rem;font-weight:500;color:var(--ink-on-dark);letter-spacing:.01em;
}
.platform__note{color:var(--ink-2-on-dark);font-size:1.05rem}

/* ---- 14. Before / After ------------------------------------------- */
.ba{display:grid;grid-template-columns:1fr 1px 1fr;gap:clamp(1.5rem,4vw,3.5rem)}
.ba__rail{background:var(--gold-line)}
.ba__tag{font-size:.82rem;font-weight:700;letter-spacing:.05em;margin-block-end:1.4rem;
  padding-block-end:.7rem;border-block-end:1px solid var(--rule)}
.ba__col--before .ba__tag{color:var(--ink-3)}
.ba__col--after .ba__tag{color:var(--gold-text)}
.ba__list{display:flex;flex-direction:column;gap:.85rem}
.ba__col--before .ba__list li{color:var(--ink-3);font-weight:300;padding-inline-start:1.6rem;position:relative}
.ba__col--before .ba__list li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.62em;
  inline-size:10px;block-size:1px;background:var(--ink-3);
}
.ba__col--after .ba__list li{color:var(--ink);font-weight:500}

/* ---- 15. Outcomes ------------------------------------------------- */
.outcomes{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(1.75rem,4vw,3rem) clamp(2rem,5vw,4rem)}
.outcome{border-block-start:2px solid var(--gold);padding-block-start:1.1rem}
.outcome h3{margin-block-end:.5rem}
.outcome p{color:var(--ink-2);font-size:1.01rem}

/* ---- 16. Social proof / video ----------------------------------- */
.proof-video{
  max-width:920px;margin-inline:auto;
  border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--rule-strong);background:var(--ink-deep);
  box-shadow:var(--sh-md);
}
.proof-video__player{
  display:block;width:100%;height:auto;
  aspect-ratio:16 / 9;background:#000;
}

/* ---- 17. Pricing ---------------------------------------------------- */
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.25rem,3vw,2rem);
  max-width:820px}
.plan{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(1.75rem,4vw,2.5rem);
  border:1px solid var(--rule-strong);border-radius:var(--r-lg);background:var(--paper);
}
.plan--featured{
  border-color:var(--gold);
  box-shadow:var(--sh-md), inset 0 0 0 1px var(--gold);
}
.plan__flag{
  align-self:flex-start;margin-block-end:1rem;padding:.35rem .8rem;
  background:var(--gold-wash);color:var(--gold-text);
  font-size:.78rem;font-weight:700;letter-spacing:.03em;border-radius:var(--r-xs);
}
.plan__name{font-size:1.3rem;margin-block-end:.25rem}
.plan__term{font-size:.9rem;color:var(--ink-3)}
.plan__price{
  margin-block-start:1.4rem;font-size:1.05rem;color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.plan__amount{font-family:var(--font-display);font-weight:800;font-size:2.6rem;color:var(--ink);
  margin-inline-end:.35rem}
.plan__permonth{font-size:.9rem;color:var(--ink-3);margin-block-start:.35rem;
  font-variant-numeric:tabular-nums}
.plan__includes{margin-block:1.6rem 1.75rem;display:flex;flex-direction:column;gap:.6rem;
  padding-block-start:1.4rem;border-block-start:1px solid var(--rule)}
.plan .btn{margin-block-start:auto}
.pricing__foot{margin-block-start:1.5rem;font-size:.85rem;color:var(--ink-3)}

/* ---- 18. Why -------------------------------------------------------- */
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.why-item{padding:clamp(1.5rem,3.5vw,2.5rem);border-block-start:1px solid var(--rule)}
.why-item:nth-child(odd){border-inline-end:1px solid var(--rule)}
.why-item h3{margin-block-end:.55rem}
.why-item p{color:var(--ink-2);font-size:1.01rem}

/* ---- 19. About + prose ------------------------------------------- */
.prose{font-size:1.12rem;color:var(--ink-2);line-height:1.9}
.prose strong{color:var(--ink)}

/* ---- 20. FAQ ------------------------------------------------------- */
.faq{border-block-start:1px solid var(--gold-line)}
.faq__item{border-block-end:1px solid var(--gold-line)}
.faq__q{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:1.35rem;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-weight:700;font-size:1.08rem;color:var(--ink);
}
.faq__q::-webkit-details-marker{display:none}
.faq__q:hover{color:var(--gold-text)}
.faq__mark{position:relative;inline-size:16px;block-size:16px;flex:none}
.faq__mark::before,.faq__mark::after{
  content:"";position:absolute;inset-block-start:50%;inset-inline-start:0;
  inline-size:16px;block-size:2px;background:var(--gold);border-radius:2px;
  transform:translateY(-50%);transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.faq__mark::after{transform:translateY(-50%) rotate(90deg)}
.faq__item[open] .faq__mark::after{transform:translateY(-50%) rotate(0);opacity:0}
.faq__a{overflow:hidden}
.faq__a p{padding-block-end:1.5rem;color:var(--ink-2);max-width:62ch}
.faq__item[open] .faq__a{animation:faq-open .3s var(--ease)}
@keyframes faq-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---- 21. Final CTA ---------------------------------------------- */
.finalcta{text-align:center;display:flex;flex-direction:column;align-items:center}
.finalcta h2{font-size:clamp(1.7rem,1.2rem + 2.4vw,2.6rem)}
.finalcta__desc{margin-block-start:1.1rem;color:var(--ink-2-on-dark);font-size:1.1rem}
.finalcta__actions{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center;margin-block-start:2rem}
.finalcta__microcopy{margin-block-start:1rem;font-size:.88rem;color:var(--ink-2-on-dark);opacity:.8}

/* ---- 22. Contact form ----------------------------------------- */
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.contact__intro p{color:var(--ink-2);margin-block-start:1rem}
.contact__points{margin-block-start:1.5rem;display:flex;flex-direction:column;gap:.6rem;font-size:.98rem}

.lead-form{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:clamp(1.5rem,4vw,2.5rem);box-shadow:var(--sh-sm);
}
.form-summary{
  margin-block-end:1.5rem;padding:1rem 1.15rem;border-radius:var(--r-md);
  background:var(--danger-bg);border:1px solid #e7c9c3;
}
.form-summary__title{font-weight:700;color:var(--danger);margin-block-end:.4rem}
.form-summary ul{padding-inline-start:1.1rem;list-style:disc}
.form-summary a{color:var(--danger);font-weight:500}

.field{margin-block-end:1.15rem}
.field label{display:block;font-size:.92rem;font-weight:600;color:var(--ink);margin-block-end:.4rem}
.req{color:var(--gold-text)}
.opt{color:var(--ink-3);font-weight:400}
.field input,.field textarea{
  inline-size:100%;padding:.75rem .85rem;
  background:var(--ground);border:1px solid var(--rule-strong);border-radius:var(--r-sm);
  transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease);
}
.field textarea{resize:vertical;min-block-size:88px;line-height:1.8}
.field input:hover,.field textarea:hover{border-color:var(--ink-3)}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--gold-text);background:var(--paper);
  box-shadow:0 0 0 3px var(--gold-wash);
}
.field__hint{font-size:.82rem;color:var(--ink-3);margin-block-start:.35rem}
.field__err{font-size:.85rem;color:var(--danger);margin-block-start:.35rem;font-weight:500}
.field[data-invalid] input,.field[data-invalid] textarea{border-color:var(--danger)}
.field[data-invalid] input:focus,.field[data-invalid] textarea:focus{box-shadow:0 0 0 3px var(--danger-bg)}

.lead-form__status{margin-block-start:1rem;font-size:.92rem;font-weight:500;min-block-size:1.4em}
.lead-form__status[data-tone="ok"]{color:var(--ok)}
.lead-form__status[data-tone="err"]{color:var(--danger)}
.lead-form__status[data-tone="info"]{color:var(--ink-2)}
.lead-form__legal{margin-block-start:1rem;font-size:.8rem;color:var(--ink-3);line-height:1.7}

/* ---- 23. Footer --------------------------------------------------- */
.site-footer{padding-block:clamp(2rem,4vw,3rem)}
.site-footer__inner{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.75rem 1.5rem;text-align:center;font-size:.9rem;color:var(--ink-2-on-dark)}
.site-footer__copy{font-variant-numeric:tabular-nums;margin:0}
.site-footer__phone{color:var(--ink-on-dark);text-decoration:none;
  font-variant-numeric:tabular-nums;transition:color .2s var(--ease)}
.site-footer__phone:hover{color:var(--gold)}

/* ---- 24. Scroll reveal (one restrained fade, staggered in-group) -- */
[data-reveal]{opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal].is-in[data-reveal-d="1"]{transition-delay:.06s}
[data-reveal].is-in[data-reveal-d="2"]{transition-delay:.12s}
[data-reveal].is-in[data-reveal-d="3"]{transition-delay:.18s}
[data-reveal].is-in[data-reveal-d="4"]{transition-delay:.24s}

/* ==========================================================================
   25. Responsive
   ========================================================================== */
@media (max-width:1000px){
  .hero__grid{grid-template-columns:1fr;gap:2.5rem}
  .hero__rail{order:2}
  .contact__grid{grid-template-columns:1fr;gap:2.5rem}
  .platform__grid{grid-template-columns:1fr;gap:1.75rem}
}

@media (max-width:860px){
  :root{--header-h:66px}
  .nav-toggle{display:inline-flex}
  .site-nav{position:relative}
  .site-nav__list{
    position:absolute;inset-inline-end:0;inset-block-start:calc(100% + .75rem);
    flex-direction:column;align-items:stretch;gap:.15rem;
    min-inline-size:230px;padding:.6rem;
    background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-md);
    box-shadow:var(--sh-lg);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
  }
  .site-nav__list.is-open{opacity:1;visibility:visible;transform:none}
  .site-nav__list a:not(.btn){padding:.7rem .8rem;font-size:1rem}
  .site-nav__cta{margin:.35rem 0 0}
  .site-nav__cta .btn{inline-size:100%}

  .pillar,.pillar--flip{grid-template-columns:1fr;gap:1rem}
  .pillar--flip .pillar__aside{order:0;align-items:flex-start}
  .pillar__aside{flex-direction:row;align-items:center;gap:1rem}
  .pillar__index{font-size:2.4rem}
}

@media (max-width:620px){
  .problem-list{grid-template-columns:1fr}
  .checklist--cols{grid-template-columns:1fr}
  .outcomes{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .why-item:nth-child(odd){border-inline-end:0}
  .ba{grid-template-columns:1fr;gap:2rem}
  .ba__rail{block-size:1px;inline-size:100%}

  .rail{flex-direction:column;align-items:stretch;gap:1.15rem}
  .rail::before,.rail::after{
    inset-block:10% 10%;inset-inline:5px auto;inline-size:2px;block-size:auto;
  }
  .rail::after{transform:scaleY(0);transform-origin:top center}
  .rail.is-drawn::after{animation:rail-draw-v .9s var(--ease) forwards}
  @keyframes rail-draw-v{to{transform:scaleY(1)}}
  .rail__stage{flex-direction:row;justify-content:flex-start;align-items:center;gap:.85rem;inline-size:100%}
  .rail__label{text-align:start}
  .rail.is-drawn .rail__stage:last-child .rail__dot{transform:scale(1.3)}
}

/* ==========================================================================
   26. Reduced motion — render final state, no transforms
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1;transform:none}
  .rail::after{transform:scaleX(1)}
  .rail__dot{border-color:var(--gold);background:var(--gold)}
}