/* ==========================================================================
   OY — Og'riqqa Yechim
   Design system · fixed chrome · hero · problem

   Type direction
   --------------
   Three faces, each with one job, because the product's promise is
   "numbers you can trust":

     Commissioner (display) — headlines. An institutional grotesque with
                           Latin and Cyrillic drawn as one family, which the
                           brand name in Cyrillic requires.
     Inter Tight (body)  — reading copy. Holds up in Uzbek at small sizes.
     IBM Plex Mono (data)— anything the *system* measures or labels: eyebrows,
                           KPI labels, tags, prices, step timings, table
                           chrome. Figures themselves stay in the display face
                           with tabular numerals.

   Colour rule
   -----------
   Lime is a fill, never text on a light surface. Greys are split into a
   text ramp (--gray, --gray-2 — both clear 4.5:1 on every surface used
   here) and a decoration-only value (--line-3) so the two cannot be
   confused again.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* Surfaces */
  --white:#FFFFFF;
  --paper:#FFFFFF;          /* icon highlight — inherits into <use> shadow trees */
  --bg:#F0F2F3;
  --bg-2:#F7F8F8;
  --dark:#141414;
  --darker:#0E100F;

  /* Ink & text greys — every value below clears 4.5:1 on --white, --bg-2
     and --bg. Do not use --line-3 for text. */
  --ink:#1A1C1B;
  --ink-2:#3C3F3E;
  --gray:#5F6361;           /* body copy on light   6.10:1 white · 5.19:1 hero */
  --gray-2:#6A6E6C;         /* quiet meta           5.17:1 white · 4.61:1 --bg */
  /* The two above are tuned for light surfaces and are far too dark on
     --dark (3.56:1). Muted text on a dark section uses this instead. */
  --gray-on-dark:#9DA19E;   /* quiet meta on dark   7.04:1 on --dark */
  --line-3:#A7A9AC;         /* DECORATION ONLY — never text */

  /* Accent — fills, chips, marks. Never text on light. */
  --lime:#CEFE46;
  --lime-soft:#E4FF8F;
  --lime-deep:#A8D619;
  --lime-ink:#3A4416;       /* accessible text ON lime */

  /* Semantic */
  --danger:#E5484D;         /* fills and decoration */
  --danger-text:#B4383D;    /* the same idea, safe as text on light */
  --danger-soft:#FFE9EA;
  --ok:#2FA36B;             /* fills and dots */
  --ok-text:#1E7A4D;        /* safe as text on light */

  /* Lines & shadows */
  --line:rgba(0,0,0,.08);
  --line-2:rgba(0,0,0,.05);
  --line-dark:rgba(255,255,255,.09);
  --line-field:#818682;     /* 3.5:1 on --bg-2 — meets 1.4.11 */
  --sh-sm:0 2px 8px rgba(0,0,0,.05);
  --sh-md:0 4px 20px rgba(0,0,0,.07);
  --sh-lg:0 20px 50px rgba(0,0,0,.11);
  --sh-xl:0 34px 80px rgba(0,0,0,.16);
  --sh-lime:0 18px 40px rgba(140,190,20,.28);
  --sh-hover:0 22px 48px rgba(140,190,20,.18), 0 8px 22px rgba(0,0,0,.07);
  --sh-hover-dark:0 22px 48px rgba(206,254,70,.13), 0 10px 26px rgba(0,0,0,.42);

  /* Radii — only these four. */
  --r-section:44px;
  --r-card:28px;
  --r-md:20px;
  --r-sm:14px;
  --r-pill:999px;

  /* Spacing — two card paddings, not five. */
  --gap:16px;
  --pad-card:clamp(24px,2.8vw,34px);
  --pad-card-sm:clamp(20px,2.2vw,28px);
  --pad-section:clamp(62px,6.6vw,104px);

  /* Type */
  --font:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --font-display:'Commissioner','Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Motion */
  --ease:cubic-bezier(.22,.61,.24,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.22s;
  --t-mid:.45s;
  --t-slow:.8s;

  /* Fixed chrome */
  --chrome-y:0px;
  --chrome-top:16px;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{
  scroll-behavior:smooth;
  /* Both ends: the fixed nav sits over the top, and on phones the sticky CTA
     bar owns the bottom strip. Without the second value, tabbing to a control
     near the foot of the viewport scrolls it to exactly where the bar covers
     it. */
  scroll-padding-top:104px;
  scroll-padding-bottom:calc(var(--mcta-h) + 16px);
  -webkit-text-size-adjust:100%;
}

body{
  font-family:var(--font);
  background:var(--white);
  color:var(--ink);
  font-size:16px;
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Lenis is driving the scroll — let it. */
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}

a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;border:none;background:none;cursor:pointer}
address{font-style:normal}

.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* Inline icon. Sized by the context that uses it. */
.ic{width:1em;height:1em;fill:currentColor;flex:0 0 auto}

/* Focus ring — a dark ring with a lime halo. The pair stays visible on the
   white cards, the grey slabs and the near-black sections alike; a single
   lime ring was 1.5:1 on light backgrounds. */
:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:3px;
  box-shadow:0 0 0 8px rgba(206,254,70,.85);
  border-radius:4px;
}
.section--dark :focus-visible,
.navpanel :focus-visible,
.nav :focus-visible,
.socials :focus-visible,
.pain-note :focus-visible{
  outline-color:var(--lime);
  box-shadow:0 0 0 8px rgba(20,22,21,.9);
}

/* Skip link — hidden until focused, then a real, visible control. */
.skip{
  position:fixed;
  top:10px;left:50%;
  transform:translate(-50%,-160%);
  z-index:200;
  background:var(--lime);
  color:var(--lime-ink);
  font-family:var(--font-mono);
  font-size:13px;font-weight:600;
  letter-spacing:.04em;
  padding:14px 24px;
  border-radius:var(--r-pill);
  box-shadow:var(--sh-lg);
  transition:transform var(--t-fast) var(--ease);
}
.skip:focus{transform:translate(-50%,0)}

/* --------------------------------------------------------------------------
   3. Type
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.05;
  text-wrap:balance;
}
h1{font-size:clamp(38px,5.2vw,68px);letter-spacing:-.038em;line-height:1.01}
h2{font-size:clamp(30px,4.2vw,52px);letter-spacing:-.034em}
h3{font-size:clamp(21px,2.2vw,29px);font-weight:600;letter-spacing:-.022em;line-height:1.14;}
h4{font-size:clamp(18px,1.7vw,22px);font-weight:600;letter-spacing:-.018em;line-height:1.2;}

p{text-wrap:pretty}

/* Anything the system measures gets the mono. */
.eyebrow,.pill,.btn__meta,.kpi__label,.kpi__delta,.dash__title,.dash__live,
.dash__sample,.rows__tag,.rows__qty,.chart__head span,.ticker__track,
.pcard__idx,.step__day,.price__top,.price__badge,.svc__c1,.svc__c2,
.sector__hit,.foot-h,.legal,.field label,.fact dt,.tiers__head h4,
.nav__burger-txt,.rail__btn span,.painstack__hint{
  font-family:var(--font-mono);
  font-variation-settings:normal;
}

/* Figures: display face, tabular so columns of numbers line up. */
.trust__item strong,.kpi__value,.price__amt,.svc__price,.band__circ,
.step__num,.rows__qty{
  font-variant-numeric:tabular-nums;
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.wrap{
  width:100%;
  max-width:1400px;
  margin-inline:auto;
  padding-inline:clamp(20px,4vw,56px);
}

.section{
  background:var(--bg);
  border-radius:var(--r-section);
  margin:10px;
  padding-block:var(--pad-section);
  position:relative;
  /* `hidden` makes the section a scroll container, which silently kills every
     `position:sticky` descendant — it was doing exactly that to the FAQ's
     sticky column. `clip` crops identically without creating one. The
     `hidden` line stays as the fallback for browsers that lack `clip`. */
  overflow:hidden;
  overflow:clip;
}
.section--white{background:var(--white)}
.section--dark{background:var(--dark);color:var(--white)}

/* --------------------------------------------------------------------------
   5. Components
   -------------------------------------------------------------------------- */

/* Eyebrow pill ----------------------------------------------------------- */
.pill{
  display:inline-block;
  background:var(--white);
  border:1px solid var(--line);
  padding:9px 17px;
  border-radius:var(--r-pill);
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.section--white .pill{background:var(--bg);border-color:transparent}
.section--dark .pill{
  background:#1F1F1F;
  border-color:var(--line-dark);
  color:#E6E8E5;
}

.eyebrow{
  font-size:12px;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--gray-2);
}

/* Buttons ---------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  border-radius:var(--r-pill);
  padding:14px 26px;
  font-size:15.5px;
  font-weight:600;
  letter-spacing:-.01em;
  min-height:48px;
  transition:transform var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--block{width:100%;justify-content:center}

.btn--dark{background:var(--dark);color:var(--white);box-shadow:var(--sh-md)}
.btn--dark:hover{box-shadow:var(--sh-lg)}
.btn--white{background:var(--white);color:var(--ink);box-shadow:var(--sh-md)}
.btn--lime{background:var(--lime);color:var(--lime-ink)}
.btn--lime:hover{box-shadow:var(--sh-lime)}

/* Quiet until the hero's own CTA has scrolled away — two lime buttons in
   one viewport competed rather than reinforced. */
.btn--outline{
  background:rgba(20,20,20,.9);
  color:var(--white);
  border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.btn--outline:hover{background:var(--dark)}
html[data-past-hero="true"] .btn--outline{
  background:var(--lime);
  color:var(--lime-ink);
  border-color:transparent;
}

/* A meta note inside a button. Reads as an annotation, not a second control
   the way the old lime pill-in-a-pill did. */
.btn__meta{
  display:inline-flex;align-items:center;
  padding-left:12px;
  border-left:1px solid currentColor;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.03em;
  white-space:nowrap;
}
.btn__ic{display:inline-flex;font-size:15px}

/* Section header ---------------------------------------------------------- */
.sec-head{
  text-align:center;
  max-width:680px;
  margin:0 auto clamp(42px,4.8vw,66px);
  position:relative;
  z-index:2;
}
.sec-head h2,.sec-head__h2{margin-top:22px}
.sec-sub{
  color:var(--gray);
  font-size:16.5px;
  max-width:52ch;
  margin:18px auto 0;
  line-height:1.55;
}
.sec-sub--left{margin-inline:0;text-align:left}
.section--dark .sec-sub{color:#A6A8A6}

/* Decorative concentric rings -------------------------------------------- */
.rings{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:0;
}
.rings i{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  border:1px solid var(--line);
  border-radius:50%;
  display:block;
}
.rings i:nth-child(1){width:640px;height:640px}
.rings i:nth-child(2){width:1000px;height:1000px}
.rings i:nth-child(3){width:1380px;height:1380px}
.section--dark .rings i{border-color:rgba(255,255,255,.055)}

/* Form fields (shared by the quick capture and the full form) ------------- */
.field{margin-top:18px}
.field label{
  display:block;
  font-size:12px;font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:8px;
  color:var(--ink-2);
}
.field .req{color:var(--danger-text)}
.label-opt{
  color:var(--gray-2);
  font-weight:500;
  text-transform:none;
  letter-spacing:.02em;
}
.field input,
.field select,
.field textarea{
  width:100%;
  font-family:inherit;
  /* 16px exactly: iOS Safari zooms the viewport when a focused input is
     smaller, and the visitor lands mid-form at 1.3x with the rest of the
     page off-screen. */
  font-size:16px;
  color:var(--ink);
  background:var(--bg-2);
  border:1.5px solid var(--line-field);
  border-radius:var(--r-sm);
  padding:13px 16px;
  min-height:50px;
  transition:border-color var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease);
}
.field textarea{resize:vertical;min-height:88px}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:3px solid var(--ink);
  outline-offset:2px;
  border-color:var(--ink);
  background:var(--white);
  box-shadow:0 0 0 7px rgba(206,254,70,.7);
}
.field input::placeholder,
.field textarea::placeholder{color:var(--gray-2)}
.field[data-invalid="true"] input,
.field[data-invalid="true"] select{
  border-color:var(--danger-text);
  background:#FFF7F7;
}
.field__err{
  display:none;
  font-size:13.5px;
  font-weight:500;
  color:var(--danger-text);
  margin-top:7px;
}
.field[data-invalid="true"] .field__err{display:block}

/* Honeypot — hidden from people, visible to naive bots */
.hp{
  position:absolute!important;
  left:-9999px!important;
  width:1px;height:1px;
  overflow:hidden;
}

.form__status{
  display:none;
  /* Clears the sticky mobile CTA bar when scrolled into view. */
  scroll-margin-bottom:calc(var(--mcta-h) + 16px);
  margin-top:16px;
  border-radius:var(--r-sm);
  padding:14px 16px;
  font-size:14.5px;
  line-height:1.45;
}
.form__status[data-state="ok"]{display:block;background:#EAF7F0;color:#17603E}
.form__status[data-state="err"]{display:block;background:#FDECEC;color:#963136}
.form__status a{text-decoration:underline}

/* --------------------------------------------------------------------------
   6. Fixed chrome

   The nav retreats on scroll-down and returns on scroll-up. It used to be
   an opaque pill parked over the content: 68 headings passed behind it.
   -------------------------------------------------------------------------- */
.socials{
  position:fixed;
  top:var(--chrome-top);left:18px;
  display:flex;gap:8px;
  z-index:120;
  transform:translateY(var(--chrome-y));
  transition:transform .34s var(--ease);
}
.soc{
  width:44px;height:44px;
  border-radius:50%;
  background:var(--dark);
  color:var(--white);
  display:grid;place-items:center;
  transition:transform var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease);
}
.soc:hover{transform:scale(1.08);background:var(--lime);color:var(--ink)}
.soc svg{width:18px;height:18px;fill:currentColor}

.nav{
  position:fixed;
  top:var(--chrome-top);left:50%;
  transform:translateX(-50%) translateY(var(--chrome-y));
  background:rgba(18,18,18,.92);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-pill);
  display:flex;align-items:center;gap:2px;
  padding:6px 18px 6px 8px;
  z-index:140;
  box-shadow:0 10px 34px rgba(0,0,0,.22);
  transition:transform .34s var(--ease);
}
.nav__home{
  display:grid;place-items:center;
  width:48px;height:48px;
  border-radius:50%;
}
.nav__logo{height:36px;width:auto;filter:invert(1)}
.nav__sep{
  width:1px;height:20px;
  background:var(--line-dark);
  margin-inline:8px;
}
.nav__link{
  color:#EDEDED;
  font-size:14.5px;
  font-weight:500;
  display:inline-flex;align-items:center;
  min-height:44px;
  padding:0 12px;
  border-radius:var(--r-pill);
  white-space:nowrap;
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.nav__link:hover{color:var(--lime);background:rgba(255,255,255,.07)}

.nav__burger{
  display:none;
  align-items:center;gap:9px;
  min-height:44px;
  padding:0 14px 0 12px;
  border-radius:var(--r-pill);
  color:var(--white);
  font-size:12px;font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.nav__burger .ic{width:19px;height:19px}
.nav__burger .ic--close{display:none}
.nav__burger[aria-expanded="true"] .ic--open{display:none}
.nav__burger[aria-expanded="true"] .ic--close{display:block}
.nav__burger:hover{background:rgba(255,255,255,.07)}

.nav-right{
  position:fixed;
  top:var(--chrome-top);right:18px;
  display:flex;gap:8px;align-items:center;
  z-index:120;
  transform:translateY(var(--chrome-y));
  transition:transform .34s var(--ease);
}
.nav-right .btn{min-height:46px;padding:12px 22px;font-size:14.5px}

/* Mobile menu ------------------------------------------------------------- */
.navpanel{
  position:fixed;
  inset:0;
  z-index:130;
  background:var(--dark);
  color:var(--white);
  overflow-y:auto;
  padding:96px clamp(20px,6vw,40px) 40px;
}
.navpanel[hidden]{display:none}
.navpanel__inner{max-width:520px;margin-inline:auto}
.navpanel .eyebrow{color:#8E918D}
.navpanel__nav{
  display:grid;
  margin-top:16px;
  border-top:1px solid var(--line-dark);
}
.navpanel__nav a{
  font-family:var(--font-display);
  font-size:clamp(23px,6.4vw,30px);
  font-weight:600;
  letter-spacing:-.028em;
  padding:15px 0;
  border-bottom:1px solid var(--line-dark);
  transition:color var(--t-fast) var(--ease),padding-left var(--t-fast) var(--ease);
}
.navpanel__nav a:hover{color:var(--lime);padding-left:8px}
.navpanel__foot{margin-top:30px;display:grid;gap:14px}
.navpanel__tel{
  display:flex;align-items:center;gap:12px;
  min-height:48px;
  font-size:16px;font-weight:500;
}
.navpanel__tel .ic{width:18px;height:18px;color:var(--lime)}

html[data-menu="open"]{overflow:hidden}
html[data-menu="open"] body{overflow:hidden}

/* Sticky conversion bar (phones) ------------------------------------------ */
.mcta{
  position:fixed;
  left:10px;right:10px;
  bottom:calc(10px + env(safe-area-inset-bottom,0px));
  z-index:110;
  display:none;
  gap:8px;
  padding:8px;
  background:rgba(18,18,18,.94);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-pill);
  box-shadow:0 14px 40px rgba(0,0,0,.34);
}
.mcta__btn{
  flex:1;
  display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;
  border-radius:var(--r-pill);
  font-size:15px;font-weight:600;
  color:var(--white);
  background:rgba(255,255,255,.1);
}
.mcta__btn .ic{width:16px;height:16px}
.mcta__btn--lime{background:var(--lime);color:var(--lime-ink)}
html[data-menu="open"] .mcta{display:none !important}
/* Out of the way once the visitor is actually at the form. */
.mcta--away{
  transform:translateY(calc(100% + 16px));
  opacity:0;
  pointer-events:none;
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero{
  background:
    radial-gradient(120% 90% at 78% 18%, #FBFCF7 0%, rgba(251,252,247,0) 58%),
    /* The dark end used to bottom out at #E6E9E9, which pushed the muted
       greys sitting on it below 4.5:1. Lightened so the whole hero surface
       stays a safe backdrop for text. */
    linear-gradient(158deg,#F8F9F9 0%,#F1F2F2 58%,#EBEDED 100%);
  border-radius:var(--r-section);
  margin:10px;
  padding-top:clamp(94px,9vw,122px);
  position:relative;
  overflow:hidden;
}

.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(24px,3vw,48px);
  align-items:center;
}

.hero__copy{padding-bottom:clamp(30px,3.4vw,54px)}

.hero__eyebrow{
  display:inline-flex;
  align-items:center;gap:9px;
  background:rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.9);
  border-radius:var(--r-pill);
  padding:7px 16px 7px 7px;
  font-family:var(--font-mono);
  font-size:12px;font-weight:500;
  letter-spacing:.02em;
  color:var(--ink-2);
  box-shadow:var(--sh-sm);
  margin-bottom:22px;
}
.hero__eyebrow img{height:22px;width:auto;border-radius:5px}

.hero h1{color:var(--ink)}
.hero h1 em{
  font-style:normal;
  position:relative;
  white-space:nowrap;
}
/* Lime underline as decoration — the word stays dark, so contrast is unaffected */
.hero h1 em::after{
  content:"";
  position:absolute;
  left:-.04em;right:-.04em;bottom:.03em;
  height:.28em;
  background:var(--lime);
  border-radius:4px;
  z-index:-1;
}

.hero__sub{
  color:var(--gray);
  font-size:clamp(16px,1.2vw,17.5px);
  line-height:1.6;
  max-width:44ch;
  margin-top:22px;
}

.hero__cta{
  display:flex;align-items:center;
  gap:16px;flex-wrap:wrap;
  margin-top:32px;
}
.hero__cta-note{
  font-size:13.5px;
  color:var(--gray);
}
.hero__cta-note a{text-decoration:underline;text-underline-offset:3px}

/* Trust row — four measurements, all of them real. */
.hero__trust{
  display:flex;
  gap:clamp(18px,2.4vw,34px);
  flex-wrap:wrap;
  margin-top:34px;
  padding-top:24px;
  border-top:1px solid var(--line);
  max-width:560px;
}
.trust__item strong{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(23px,2.3vw,31px);
  font-weight:700;
  letter-spacing:-.035em;
  line-height:1;
  white-space:nowrap;
}
.trust__item span{
  display:block;
  font-size:13px;
  color:var(--gray);
  margin-top:8px;
  line-height:1.3;
  max-width:16ch;
}

/* --------------------------------------------------------------------------
   8. Hero stage — Excel chaos → МойСклад order
   -------------------------------------------------------------------------- */
.stage{
  position:relative;
  min-height:clamp(460px,45vw,620px);
  padding-bottom:clamp(30px,4vw,60px);
  /* Bleed into the wrap's right padding. Buys ~30px of width so the chaos
     cluster keeps a readable strip clear of the dashboard. The hero clips
     overflow, so this can never cause a horizontal scrollbar. */
  margin-right:calc(-1 * clamp(12px,2.4vw,34px));
}

/* --- 8a. Chaos cluster (back layer) ------------------------------------- */
.chaos{
  position:absolute;
  inset:0;
  z-index:1;
  filter:saturate(.55);
}
.chaos__item{
  position:absolute;
  background:var(--white);
  border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.10);
  opacity:.92;
}

/* Handwritten notebook page */
.chaos__note{
  width:150px;height:186px;
  top:1%;left:0;
  transform:rotate(-11deg);
  padding:16px 14px;
  background:
    repeating-linear-gradient(
      transparent 0 21px,
      rgba(120,140,190,.22) 21px 22px
    ),
    #FFFDF5;
  border:1px solid rgba(0,0,0,.07);
}
.chaos__note svg{width:100%;height:auto;opacity:.6}

/* Broken Excel grid */
.chaos__excel{
  width:208px;
  top:31%;left:1%;
  transform:rotate(6deg);
  padding:0;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
}
.chaos__excel-bar{
  height:22px;
  background:#E8EAE9;
  display:flex;align-items:center;
  gap:5px;padding-inline:9px;
  border-bottom:1px solid rgba(0,0,0,.07);
}
.chaos__excel-bar i{
  width:7px;height:7px;border-radius:50%;
  background:#C6C9C8;
}
.chaos__excel table{
  width:100%;
  border-collapse:collapse;
  font-family:var(--font-mono);
  font-size:9px;
  color:#6E7270;
}
.chaos__excel td{
  border:1px solid rgba(0,0,0,.07);
  padding:5px 6px;
  height:20px;
}
.chaos__excel .err{
  background:var(--danger-soft);
  color:var(--danger);
  font-weight:600;
}
.chaos__excel .blank{background:#FAFAF8}

/* Loose receipt slip */
.chaos__slip{
  width:96px;height:118px;
  bottom:5%;left:3%;
  transform:rotate(10deg);
  padding:12px 10px;
  background:#FFFEFA;
  display:grid;
  align-content:start;
  gap:7px;
}
.chaos__slip i{
  display:block;height:5px;border-radius:3px;
  background:rgba(0,0,0,.13);
}
.chaos__slip i:nth-child(2){width:72%}
.chaos__slip i:nth-child(3){width:88%}
.chaos__slip i:nth-child(4){width:56%}
.chaos__slip i:nth-child(5){width:80%}

/* Floating question marks */
.chaos__q{
  position:absolute;
  font-family:var(--font-display);
  font-size:34px;
  font-weight:700;
  color:rgba(90,95,92,.26);
  z-index:2;
  user-select:none;
}
/* Kept inside the strip left of the dashboard, or they vanish behind it */
.chaos__q--1{top:13%;left:24%;font-size:26px;transform:rotate(-12deg)}
.chaos__q--2{top:56%;left:19%;transform:rotate(14deg)}
.chaos__q--3{bottom:27%;left:6%;font-size:21px;transform:rotate(-6deg)}

/* --- 8b. The arrow between states --------------------------------------- */
.stage__arrow{
  position:absolute;
  top:44%;
  /* Anchored to the dashboard's left edge (470px in from the stage's right)
     rather than a percentage, so it straddles the seam at every width
     instead of drifting free of it on wide screens. */
  left:auto;
  right:440px;
  z-index:8;
  width:60px;height:60px;
  border-radius:50%;
  background:var(--lime);
  display:grid;place-items:center;
  box-shadow:var(--sh-lime);
  color:var(--lime-ink);
}
.stage__arrow .ic{width:24px;height:24px}

/* --- 8c. Order cluster — the dashboard (front layer) -------------------- */
.order{
  position:absolute;
  top:50%;right:0;
  transform:translateY(-50%);
  /* 470px leaves a ~178px strip of the stage clear on the left for the
     chaos cluster. Wider than this and the chaos disappears behind it. */
  width:min(100%,470px);
  z-index:5;
}

.dash{
  background:var(--white);
  border-radius:var(--r-md);
  box-shadow:var(--sh-xl);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.7);
}

.dash__bar{
  display:flex;align-items:center;gap:9px;
  padding:12px 16px;
  border-bottom:1px solid var(--line-2);
  background:linear-gradient(180deg,#FCFDFC,#F7F8F8);
}
.dash__dots{display:flex;gap:5px}
.dash__dots i{width:9px;height:9px;border-radius:50%;background:#DCDFDE}
.dash__dots i:first-child{background:#E9C3C3}
.dash__title{
  font-size:11.5px;font-weight:600;
  color:var(--ink-2);
  letter-spacing:-.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;   /* flex items default to min-content; let it ellipsis instead */
}
/* The figures in this panel are illustrative. Saying so costs one chip and
   removes any chance a prospect reads them as a claim. */
.dash__sample{
  font-size:11.5px;font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-2);
  background:var(--bg);
  border:1px solid var(--line);
  padding:3px 8px;
  border-radius:var(--r-pill);
  flex:0 0 auto;
}
.dash__live{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:600;
  color:var(--ok-text);
  background:rgba(47,163,107,.11);
  padding:5px 10px;border-radius:var(--r-pill);
  flex:0 0 auto;
}
.dash__live i{
  width:6px;height:6px;border-radius:50%;
  background:var(--ok-text);
}

.dash__body{padding:20px}

/* KPI tiles */
.kpi{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.kpi__tile{
  background:var(--bg-2);
  border-radius:var(--r-sm);
  padding:14px 14px 15px;
  border:1px solid var(--line-2);
}
.kpi__tile--accent{
  background:linear-gradient(150deg,var(--lime-soft),var(--lime));
  border-color:transparent;
}
.kpi__label{
  font-size:11px;
  color:var(--gray);
  font-weight:500;
  letter-spacing:.02em;
}
.kpi__tile--accent .kpi__label{color:var(--lime-ink)}
/* Mono, not the display face. Commissioner has no `tnum` feature — its
   digits measure 18.1px to 26.6px at the same size — so the tabular-nums
   declaration below is inert and these counters, which animate 0 to 12 450
   on load, visibly shuddered as the digit widths changed under them. The
   mono is monospaced by construction, and a dashboard readout is exactly
   what this page already sets in mono. */
.kpi__value{
  font-family:var(--font-mono);
  font-size:clamp(16px,1.55vw,19.5px);
  font-weight:600;
  letter-spacing:-.035em;
  margin-top:7px;
  line-height:1;
}
.kpi__tile--accent .kpi__value{color:var(--lime-ink)}
.kpi__delta{
  display:inline-flex;align-items:center;gap:3px;
  font-size:11.5px;font-weight:600;
  margin-top:7px;
  color:var(--ok-text);
}
.kpi__delta--down{color:var(--danger-text)}
.kpi__tile--accent .kpi__delta{color:var(--lime-ink)}

/* Bar chart */
.chart{margin-top:16px}
.chart__head{
  display:flex;align-items:baseline;
  justify-content:space-between;
  margin-bottom:12px;
}
.chart__head b{font-size:12.5px;font-weight:600}
.chart__head span{font-size:11px;color:var(--gray-2)}
.chart__bars{
  display:flex;align-items:flex-end;
  gap:clamp(5px,1vw,9px);
  height:78px;
}
.chart__bar{
  flex:1;
  border-radius:5px 5px 3px 3px;
  background:#E3E6E5;
  transform-origin:bottom;
}
.chart__bar:nth-child(1){height:38%}
.chart__bar:nth-child(2){height:56%}
.chart__bar:nth-child(3){height:47%}
.chart__bar:nth-child(4){height:72%}
.chart__bar:nth-child(5){height:60%}
.chart__bar:nth-child(6){height:100%}
.chart__bar:nth-child(7){height:81%}
.chart__bar--on{background:var(--dark)}
.chart__bar--peak{background:var(--lime)}

/* Mini stock table */
.rows{
  margin-top:16px;
  border-top:1px solid var(--line-2);
  padding-top:6px;
}
.rows__row{
  display:flex;align-items:center;gap:10px;
  padding:8px 2px;
  font-size:12.5px;
  border-bottom:1px solid var(--line-2);
}
.rows__row:last-child{border-bottom:none}
.rows__dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--ok);flex:0 0 auto;
}
.rows__dot--warn{background:#E8A33D}
.rows__name{color:var(--ink-2);font-weight:500}
.rows__qty{margin-left:auto;color:var(--gray);font-size:11.5px}
.rows__tag{
  font-size:11px;font-weight:600;
  letter-spacing:.04em;
  padding:3px 9px;border-radius:var(--r-pill);
  background:var(--bg);color:var(--gray);
  white-space:nowrap;
}
.rows__tag--warn{background:#FDF1E2;color:#8A5410}

/* --- 8d. Floating badges around the dashboard --------------------------- */
.float-badge{
  position:absolute;
  display:flex;align-items:center;gap:11px;
  background:rgba(20,22,21,.78);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-pill);
  padding:8px 20px 8px 8px;
  color:var(--white);
  z-index:6;
  box-shadow:var(--sh-lg);
}
.float-badge__circ{
  width:38px;height:38px;
  border-radius:50%;
  background:var(--lime);
  color:var(--lime-ink);
  display:grid;place-items:center;
  flex:0 0 auto;
}
.float-badge__circ .ic{width:15px;height:15px}
.float-badge__circ--txt{
  font-family:var(--font-mono);
  font-weight:600;font-size:12.5px;
}
.float-badge span{
  font-size:12.5px;
  line-height:1.3;
  max-width:17ch;
}
.float-badge--1{top:2%;right:14%;transform:rotate(-4deg)}
.float-badge--2{bottom:4%;right:2%;transform:rotate(3deg)}

/* --- 8e. Decorative 3D objects ------------------------------------------ */
.obj{
  position:absolute;
  z-index:6;
  pointer-events:none;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.20));
}
.obj--box{width:clamp(58px,6vw,84px);top:-3%;right:7%}
/* Straddles the dashboard's lower-left edge so it reads as sitting in front */
.obj--tag{width:clamp(50px,5.2vw,72px);bottom:6%;left:20%;transform:rotate(-14deg)}

/* --------------------------------------------------------------------------
   9. Problem — the pinned pain sequence

   Layout contract
   ---------------
   `.painstack` is a tall spacer; `.painstack__pin` sticks inside it for the
   whole of that height. One `--panel-step` of scroll is spent per card, so
   the page appears to hold still while the cards advance. Nothing here uses
   position:fixed or a JS-managed pin — just a sticky element and an index
   that JS derives from scroll position, which is the cheapest thing that can
   work and the hardest to break.

   Three gates, and site.js checks the identical three, so CSS and JS can
   never disagree about whether the effect is on:

     @media (min-height:560px)  a panel needs room to hold its own copy
     @supports (overflow:clip)  .section would otherwise be overflow:hidden,
                                which makes it a scroll container and kills
                                every sticky descendant — the pin would not
                                pin while JS went on swapping cards
     @supports (height:100svh)  see the note on --panel-step below

   Miss any of them and the cards are an ordinary grid: same content, no pin.
   Reduced motion and absent scripting land there too.
   -------------------------------------------------------------------------- */
.painstack{
  position:relative;
  z-index:2;
}

/* Why this is not written as `--panel-step:70vh; --panel-step:70svh`:
   custom properties accept almost any token sequence, so a browser that has
   never heard of `svh` still stores `70svh` happily and discards the vh
   fallback. The failure only surfaces later, when the value is substituted
   into calc() — and then the whole `height` is invalid at computed-value
   time and collapses to auto. Measured: 3492px to 812px, i.e. zero travel
   and a dead sequence. @supports is the only honest gate. */
@supports (height:100svh){
  .painstack{--panel-step:70svh}
}

.painstack__inner{width:100%}

/* Room for the sticky mobile CTA bar, which is fixed over the bottom of the
   viewport and would otherwise sit exactly on top of the progress rail —
   measured as a full 44px overlap at 375x812, with the bar winning the hit
   test. The rail is the only thing telling a visitor the sequence ends. */
:root{--mcta-h:0px}
@media (max-width:900px){
  :root{--mcta-h:calc(76px + env(safe-area-inset-bottom,0px))}
}

/* --- the resting state: a plain grid of cards ---------------------------
   Not a single column: at 1288px wide that ran the body copy to one
   1288px line. This is the four-across grid the section had before the
   sequence existed, with the answer card spanning the full width. */
.painstack__cards{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
}
.pcard--answer{grid-column:1/-1}

.pcard{
  position:relative;
  background:#1D1D1D;
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r-card);
  padding:var(--pad-card);
  overflow:hidden;
}
.pcard__ghost,
.pcard__idx,
.pcard__art,
.painstack__rail,
.painstack__hint{display:none}
.pcard__grid{position:relative;z-index:1}

.pcard__t{
  color:var(--white);
  font-size:clamp(19px,1.7vw,22px);
  letter-spacing:-.025em;
}
.pcard__p{
  color:#A2A5A3;
  font-size:14.5px;
  line-height:1.55;
  margin-top:12px;
  max-width:56ch;
}
.pcard__cost{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.07);
  font-size:13.5px;
  line-height:1.4;
  color:#EDB6B8;
}
.pcard__cost::before{
  content:"";
  width:6px;height:6px;
  border-radius:50%;
  background:#D9575C;
  flex:0 0 auto;
  margin-top:6px;
}
.pcard__quote{
  font-family:var(--font-display);
  font-size:clamp(21px,2vw,27px);
  font-weight:600;
  letter-spacing:-.026em;
  line-height:1.22;
  color:var(--white);
  text-wrap:balance;
}
.pcard--answer .pcard__p b{color:var(--lime);font-weight:600}
.pcard__cta{margin-top:clamp(22px,3vh,38px)}

/* ==========================================================================
   Active state — one card per screen.
   ========================================================================== */
@media (min-height:560px){
@supports ((overflow:clip) and (height:100svh)){

  .painstack[data-stack="on"]{
    height:calc(100svh + var(--panels,5) * var(--panel-step));
  }
  .painstack[data-stack="on"] .painstack__pin{
    position:sticky;
    top:0;
    height:100svh;
    display:flex;
    align-items:center;
    /* Clears the fixed nav band above; below, the rail plus whatever the
       sticky mobile CTA bar occupies. */
    padding-top:clamp(76px,9vh,104px);
    padding-bottom:calc(clamp(72px,8vh,96px) + var(--mcta-h));
  }
  .painstack[data-stack="on"] .painstack__inner{
    position:relative;
    height:100%;
  }
  .painstack[data-stack="on"] .painstack__cards{
    display:block;
    position:relative;
    height:100%;
  }

  .painstack[data-stack="on"] .pcard{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    padding:0;
    background:none;
    border:0;
    border-radius:0;
    opacity:0;
    pointer-events:none;
    transform:translate3d(0,44px,0);
    transition:opacity .5s var(--ease),transform .62s var(--ease);
  }
  /* Cards already read leave upward, cards still to come wait below: the
     sequence has a direction, and scrolling back reverses it. */
  .painstack[data-stack="on"] .pcard[data-state="past"]{
    transform:translate3d(0,-44px,0);
  }
  .painstack[data-stack="on"] .pcard[data-state="current"]{
    opacity:1;
    pointer-events:auto;
    transform:none;
  }

  /* --- composition ------------------------------------------------------ */
  .painstack[data-stack="on"] .pcard__grid{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:clamp(20px,4vw,64px);
    align-items:center;
    width:100%;
  }
  /* `ch` on the grid resolves against the inherited 16px, not the 58px
     quote — it collapsed this column to ~240px and pushed the panel 280px
     past the pin. The measure belongs on the type, in its own font size. */
  .painstack[data-stack="on"] .pcard--answer .pcard__grid{
    grid-template-columns:minmax(0,1fr);
    max-width:min(100%,900px);
  }

  .painstack[data-stack="on"] .pcard__idx{
    display:block;
    color:var(--gray-on-dark);
    font-size:13px;
    font-weight:600;
    letter-spacing:.14em;
    margin-bottom:clamp(14px,2vh,26px);
  }
  .pcard__idx b{color:var(--lime);font-weight:600}

  .painstack[data-stack="on"] .pcard__t{
    font-size:clamp(38px,6.6vw,96px);
    line-height:.98;
    letter-spacing:-.04em;
  }
  .painstack[data-stack="on"] .pcard__p{
    color:#C7CAC6;
    font-size:clamp(17px,1.65vw,25px);
    line-height:1.5;
    margin-top:clamp(16px,2.4vh,30px);
    max-width:34ch;
  }
  .painstack[data-stack="on"] .pcard__cost{
    margin-top:clamp(20px,3.4vh,44px);
    padding-top:clamp(16px,2.6vh,30px);
    font-size:clamp(15px,1.25vw,20px);
    gap:12px;
    max-width:32ch;
  }
  .painstack[data-stack="on"] .pcard__cost::before{
    width:8px;height:8px;
    margin-top:.45em;
  }

  /* The icon, given room to be a graphic rather than a bullet. */
  .painstack[data-stack="on"] .pcard__art{
    display:grid;
    place-items:center;
  }
  .pcard__ic{
    width:clamp(150px,23vw,330px);
    aspect-ratio:1;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:radial-gradient(circle at 34% 28%,rgba(206,254,70,.16),rgba(206,254,70,.03) 62%);
    border:1px solid rgba(206,254,70,.16);
  }
  .pcard__ic svg{
    width:46%;
    height:auto;
    stroke:var(--lime);
    fill:none;
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  /* Oversized index in the display face, anchoring each panel. */
  .painstack[data-stack="on"] .pcard__ghost{
    display:block;
    position:absolute;
    right:-.04em;
    bottom:-.22em;
    z-index:0;
    font-family:var(--font-display);
    font-size:clamp(200px,32vw,440px);
    font-weight:700;
    line-height:.8;
    letter-spacing:-.05em;
    color:rgba(255,255,255,.05);
    user-select:none;
    pointer-events:none;
  }

  .painstack[data-stack="on"] .pcard__quote{
    font-size:clamp(29px,4.4vw,58px);
    line-height:1.1;
    letter-spacing:-.035em;
    max-width:18ch;
  }
  .painstack[data-stack="on"] .pcard--answer .pcard__p{max-width:38ch}

  /* --- progress rail ---------------------------------------------------- */
  .painstack[data-stack="on"] .painstack__rail{
    display:flex;
    gap:8px;
    position:absolute;
    left:0;right:0;
    bottom:calc(-1 * clamp(52px,6vh,70px));
    z-index:4;
  }
  .rail__btn{
    flex:1;
    display:grid;
    gap:9px;
    padding:12px 0 0;
    min-height:44px;
    align-content:start;
    color:var(--gray-on-dark);
    transition:color var(--t-fast) var(--ease);
  }
  .rail__btn::before{
    content:"";
    display:block;
    height:3px;
    border-radius:2px;
    /* This bar is the progress indicator, so 1.4.11 applies to it: at
       .16 alpha it composited to 1.61:1 on #141414. */
    background:rgba(255,255,255,.42);
    transition:background var(--t-mid) var(--ease);
  }
  .rail__btn span{
    font-size:12px;
    font-weight:600;
    letter-spacing:.12em;
    text-align:left;
  }
  .rail__btn:hover{color:#E2E4E1}
  .rail__btn:hover::before{background:rgba(255,255,255,.7)}
  .rail__btn[data-state="past"]::before{background:rgba(206,254,70,.55)}
  .rail__btn[aria-current="true"]{color:var(--lime)}
  .rail__btn[aria-current="true"]::before{background:var(--lime)}

  /* --- scroll affordance ------------------------------------------------ */
  .painstack[data-stack="on"] .painstack__hint{
    display:flex;
    align-items:center;
    gap:10px;
    position:absolute;
    right:0;
    top:calc(-1 * clamp(38px,5vh,52px));
    z-index:4;
    font-size:12px;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--gray-on-dark);
    transition:opacity var(--t-mid) var(--ease);
  }
  .painstack[data-stack="on"] .painstack__hint[data-spent="true"]{opacity:0}
  .painstack__hint-ic{
    display:grid;
    place-items:center;
    width:26px;height:26px;
    border-radius:50%;
    background:rgba(206,254,70,.14);
    color:var(--lime);
  }
  .painstack__hint-ic .ic{
    width:12px;height:12px;
    transform:rotate(90deg);
    animation:hintNudge 1.9s ease-in-out infinite;
  }

  /* --- narrow: one column, icon above the headline ---------------------- */
  @media (max-width:1180px){
    .painstack[data-stack="on"] .pcard__grid{
      grid-template-columns:minmax(0,1fr);
      gap:clamp(16px,3vh,30px);
      align-content:center;
    }
    .painstack[data-stack="on"] .pcard__art{justify-items:start;order:-1}
    .pcard__ic{width:clamp(88px,17vw,132px)}
    .painstack[data-stack="on"] .pcard__t{font-size:clamp(38px,7.6vw,68px)}
    .painstack[data-stack="on"] .pcard__p{font-size:clamp(17px,2.4vw,21px);max-width:40ch}
  }

  @media (max-width:720px){
    .painstack{--panel-step:66svh}
    .painstack[data-stack="on"] .painstack__pin{
      padding-top:clamp(74px,11vh,92px);
      padding-bottom:calc(clamp(64px,9vh,80px) + var(--mcta-h));
    }
    .painstack[data-stack="on"] .pcard__ghost{font-size:clamp(150px,44vw,240px)}
    .painstack[data-stack="on"] .pcard__t{font-size:clamp(40px,11vw,60px)}
    .painstack[data-stack="on"] .pcard__quote{font-size:clamp(30px,8.4vw,44px)}
    .painstack[data-stack="on"] .pcard__cost{font-size:15.5px}
    .pcard__ic{width:clamp(96px,26vw,140px)}
    .rail__btn span{font-size:11px;letter-spacing:.08em}
    .painstack[data-stack="on"] .painstack__hint{
      right:auto;left:0;
      top:calc(-1 * clamp(34px,5vh,44px));
    }
  }

  /* Short viewports — laptops with a shallow window, phones in landscape.
     A panel has to hold its whole card; at 560–719px tall the full scale
     ran to 100% of the available height, leaving nothing for a longer word
     or a bumped OS font size. Everything steps down a tier. Last in source
     order so it wins over the width tiers above. */
  @media (max-height:719px){
    .painstack[data-stack="on"] .painstack__pin{
      padding-top:68px;
      padding-bottom:calc(60px + var(--mcta-h));
    }
    .painstack[data-stack="on"] .pcard__idx{margin-bottom:12px}
    .painstack[data-stack="on"] .pcard__t{font-size:clamp(32px,4.8vw,56px)}
    .painstack[data-stack="on"] .pcard__p{
      font-size:clamp(16px,1.3vw,19px);
      margin-top:14px;
    }
    .painstack[data-stack="on"] .pcard__cost{
      margin-top:18px;padding-top:14px;font-size:15px;
    }
    /* The answer panel is the tallest of the five — quote, paragraph and a
       button — and it was the one that ran to 100% of the available height
       once the mobile CTA bar's space was reserved. */
    .painstack[data-stack="on"] .pcard__quote{font-size:clamp(22px,3.4vw,42px)}
    .painstack[data-stack="on"] .pcard--answer .pcard__p{
      font-size:15.5px;
      margin-top:10px;
    }
    .pcard__cta{margin-top:16px}
    .pcard__ic{width:clamp(120px,15vw,200px)}
    .painstack[data-stack="on"] .painstack__rail{bottom:-46px}
    .painstack[data-stack="on"] .painstack__hint{top:-34px}
  }
  /* Stacked layout and no height to spare: the icon is the one element
     that carries no information, so it goes first. */
  @media (max-height:719px) and (max-width:1180px){
    .painstack[data-stack="on"] .pcard__art{display:none}
  }

}
}

@keyframes hintNudge{
  0%,100%{transform:rotate(90deg) translateX(0)}
  50%    {transform:rotate(90deg) translateX(5px)}
}

/* Objection + the first place to answer it -------------------------------- */
.pain-note{
  position:relative;
  z-index:2;
  margin-top:clamp(72px,9vh,120px);
  background:linear-gradient(102deg,#1F1F1F 0%,#232619 62%,#2A2F17 100%);
  border:1px solid rgba(206,254,70,.2);
  border-radius:var(--r-card);
  padding:clamp(28px,3.4vw,48px);
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:clamp(28px,3.6vw,56px);
}
/* This lands straight after a full-screen sequence, so at body-copy scale it
   read as a footnote to the thing the visitor just spent five screens on.
   It is the ask — it gets headline treatment. */
.pain-note__quote{
  font-family:var(--font-display);
  font-size:clamp(29px,3.6vw,52px);
  font-weight:700;
  letter-spacing:-.038em;
  line-height:1.02;
  color:var(--white);
  max-width:15ch;
  text-wrap:balance;
}
/* Lime as text is only unsafe on white — on #1F1F1F it clears AA comfortably */
.pain-note__quote em{font-style:normal;color:var(--lime)}
.pain-note b{color:var(--lime);font-weight:600}
.pain-note__sub{
  font-size:clamp(15.5px,1.25vw,18px);
  color:#B7BAB6;
  margin-top:20px;
  max-width:40ch;
  line-height:1.5;
}

/* Compact capture, so the page has a phone-number field before screen 8 */
.quick{
  background:var(--white);
  color:var(--ink);
  border-radius:var(--r-md);
  padding:clamp(20px,2.4vw,26px);
  box-shadow:var(--sh-lg);
}
.quick__t{font-size:clamp(18px,1.7vw,21px)}
.quick__s{font-size:13.5px;color:var(--gray);margin-top:6px;line-height:1.45}
.quick__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quick .field{margin-top:14px}
.quick .btn{margin-top:16px}

/* --------------------------------------------------------------------------
   10. Idle motion

   GSAP owns `transform` on every parallaxed element, so a CSS animation on
   the same node gets overwritten every frame. Each of these animates an
   INNER element instead — the outer node keeps its scroll parallax, the
   inner one drifts on its own clock.
   -------------------------------------------------------------------------- */
@keyframes floaty{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%    {transform:translate3d(0,-15px,0) rotate(3.5deg)}
}
@keyframes floaty-alt{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%    {transform:translate3d(0,-11px,0) rotate(-5deg)}
}
@keyframes qdrift{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg);opacity:.24}
  50%    {transform:translate3d(0,-10px,0) rotate(7deg);opacity:.44}
}
@keyframes paperdrift{
  0%,100%{transform:translate3d(0,0,0)}
  50%    {transform:translate3d(0,-6px,0)}
}

.obj__in{
  width:100%;
  animation:floaty 6.9s ease-in-out infinite;
  will-change:transform;
}
.obj--tag .obj__in{animation:floaty-alt 8.2s ease-in-out infinite}

.chaos__q i{
  display:block;
  font-style:normal;
  animation:qdrift 5.6s ease-in-out infinite;
  will-change:transform,opacity;
}
.chaos__q--2 i{animation-duration:7.4s;animation-delay:-2.1s}
.chaos__q--3 i{animation-duration:6.2s;animation-delay:-3.8s}

.chaos__note svg{animation:paperdrift 9.5s ease-in-out infinite}
.chaos__slip{animation:paperdrift 11s ease-in-out -4s infinite}

/* A pulsing ring on the transformation arrow.
   Lives on a pseudo-element, so GSAP's transform on .stage__arrow is untouched. */
@keyframes ringPulse{
  0%  {transform:translate(-50%,-50%) scale(.8);opacity:.6}
  70% {opacity:0}
  100%{transform:translate(-50%,-50%) scale(1.85);opacity:0}
}
.stage__arrow::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:100%;height:100%;
  border-radius:50%;
  border:2px solid var(--lime);
  animation:ringPulse 2.9s cubic-bezier(.2,.6,.3,1) infinite;
  pointer-events:none;
}

/* The pause control governs the ambient drift too, not only the marquees. */

/* --------------------------------------------------------------------------
   11. Ticker
   -------------------------------------------------------------------------- */
.ticker{
  border-top:1px solid rgba(0,0,0,.06);
  margin-top:clamp(20px,3vw,40px);
  padding-block:20px;
  padding-right:78px;
  overflow:hidden;
  position:relative;
  z-index:7;
  background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.ticker__track{
  display:flex;
  --marquee-gap:52px;
  gap:var(--marquee-gap);
  white-space:nowrap;
  width:max-content;
  color:var(--gray);
  font-size:13px;
  font-weight:500;
  letter-spacing:.01em;
}
/* Ambient motion only runs when there is a script to stop it with. */
.js .ticker__track{animation:marquee 34s linear infinite}
.ticker__track > span{display:inline-flex;align-items:center;gap:13px}
.ticker__track > span::before{
  content:"";
  width:7px;height:7px;
  border-radius:50%;
  background:var(--lime-deep);
  flex:0 0 auto;
}
.ticker:hover .ticker__track{animation-play-state:paused}

/* Not a plain -50%. That moves by half the track INCLUDING the gaps, but a
   seamless loop has to travel one full set PLUS the gap that follows it —
   otherwise every cycle shows a seam half a gap wide. Measured before the
   fix: 7px on the logo rows, 26px on the ticker. */
@keyframes marquee{
  to{transform:translateX(calc(-50% - var(--marquee-gap,0px) / 2))}
}

/* --------------------------------------------------------------------------
   12. Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1180px){
  .nav__link,.nav__sep{display:none}
  .js .nav__burger{display:inline-flex}

  /* minmax(0,…) rather than a bare 1fr: the dashboard carries several
     `white-space:nowrap` labels, and an auto-min track would size itself to
     their combined min-content and push 86px past the viewport at 320px. */
  .hero__grid{grid-template-columns:minmax(0,1fr)}
  .hero__copy{padding-bottom:20px}
  .stage{min-height:0;padding-bottom:40px;margin-top:16px;margin-right:0}

  /* Stack the two states instead of overlapping them */
  .chaos{
    position:relative;
    inset:auto;
    height:190px;
    margin-bottom:22px;
  }
  .chaos__note{top:0;left:2%}
  .chaos__excel{top:6%;left:35%;width:210px}
  .chaos__slip{display:none}
  .chaos__q--3{display:none}

  .stage__arrow{
    position:relative;
    top:auto;left:auto;right:auto;
    margin:0 auto 20px;
  }
  .order{
    position:relative;
    top:auto;right:auto;
    transform:none;
    width:100%;
    max-width:560px;
    margin-inline:auto;
  }
  /* Stacked layout puts the dashboard in normal flow, so the badges have
     nothing to float over. Drop them into the flow beneath it instead. */
  .float-badge{
    position:relative;
    inset:auto;
    transform:none;
    width:fit-content;
    max-width:100%;
    margin:10px auto 0;
    background:rgba(20,22,21,.92);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  .float-badge span{max-width:none}
  .float-badge--1{margin-top:18px}

  .obj--box{top:-24px;right:2%}
  .obj--tag{display:none}

  .pain-note{grid-template-columns:1fr}
}

@media (max-width:900px){
  .mcta{display:flex}
  body{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
}

@media (max-width:720px){
  :root{--r-section:30px}
  .socials{display:none}
  .nav{left:14px;right:14px;transform:translateY(var(--chrome-y));justify-content:space-between;padding:6px 8px 6px 6px}
  /* The nav pill spans the full width here so the logo and burger sit at
     opposite ends — which parked it (z-140) directly on top of .nav-right
     (z-120), leaving the header CTA painted over and untappable on every
     phone. It is redundant at this width anyway: the sticky bar at the
     bottom and the panel's own button both lead to the same place. */
  .nav-right{display:none}

  .hero{padding-top:100px}
  .hero__trust{gap:20px 24px}
  .trust__item strong{font-size:25px}

  .chaos{height:160px}
  .chaos__note{width:130px;height:160px}
  .chaos__excel{width:170px;left:44%}
  .chaos__q--2{display:none}

  .dash__body{padding:15px}
  /* The window title is chrome; the "sample data" label is a disclosure.
     When space runs out, drop the chrome. */
  .dash__title{display:none}
  .kpi{grid-template-columns:1fr;gap:8px}
  .kpi__tile{display:flex;align-items:center;justify-content:space-between;padding:12px 14px}
  .kpi__value{margin-top:0;margin-left:auto}
  .kpi__delta{margin-top:0;margin-left:10px}
  .chart__bars{height:60px}
  .float-badge span{max-width:15ch;font-size:12px}

  .ticker{padding-right:0}

  .quick__row{grid-template-columns:1fr}
}

@media (max-width:400px){
  .nav__burger-txt{display:none}
  .mcta__btn{font-size:14px}
}

/* --------------------------------------------------------------------------
   13. Motion — entrance states.
   Applied by JS only when it takes over, so the page is fully visible
   if JS fails or is blocked.
   -------------------------------------------------------------------------- */
.js-motion [data-anim]{opacity:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .js-motion [data-anim]{opacity:1 !important;transform:none !important}
  .ticker__track,.marquee__track{animation:none !important}
}