/* =============================================================================
   KlariVis efficiency calculator — prototype styles
   Tokens sampled from Figma (efficiency-calc-landing-page, file EW1YCZ5Zry9OVcJfNJ756l).
   Every value here is a stand-in bound to a real KlariVis / HubSpot theme token later.
   ========================================================================== */

/* brand display face: Gilroy, self-hosted. Inter + JetBrains Mono via <link>. */
@font-face{font-family:'Gilroy';src:url('fonts/Gilroy-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Gilroy';src:url('fonts/Gilroy-SemiBold.otf') format('opentype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Gilroy';src:url('fonts/Gilroy-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Gilroy';src:url('fonts/Gilroy-ExtraBold.otf') format('opentype');font-weight:800;font-style:normal;font-display:swap}

:root{
  /* --- surfaces + ink ------------------------------------------------------ */
  --cream:#F9F6F2;
  --card:#FFFFFF;
  --ink:#3F0047;              /* dark plum, display + strong ink */
  --ink-80:rgba(63,0,71,.82);
  --ink-64:rgba(63,0,71,.64);
  --ink-45:rgba(63,0,71,.45);
  --magenta:#742765;            /* primary accent: slider fill, links, adjust */
  --magenta-lift:#8A2F79;
  --plum-deep:#351130;       /* result card / proof / footer surfaces */
  --plum-deeper:#280C24;
  --teal:#1FB7C9;            /* accent: numbers on dark, recognition, live */
  --teal-ink:#0C7C8B;        /* teal for text on light (contrast-safe) */
  --indigo:#4A3B82;          /* eyebrow labels */
  --mauve:#B88CAC;           /* soft captions on dark + dividers */
  --plum2:rgba(96,33,84,.86);/* proof stat card */
  --lede:#E4D6E0;            /* hero lede on dark */
  --track:#E6E1DA;           /* slider track, hairlines */
  --track-ink:rgba(63,0,71,.14);
  --on-dark:#F3E9F0;         /* text on plum surfaces */
  --on-dark-64:rgba(243,233,240,.64);
  --on-dark-40:rgba(243,233,240,.4);

  /* --- type roles (swap for the KlariVis brand faces) --------------------- */
  --font-display:'Gilroy','Inter',system-ui,sans-serif;                 /* headlines only */
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;    /* body + all numbers */
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;  /* data readouts + labels */

  /* --- shape --------------------------------------------------------------- */
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;
  --shadow-card:0 24px 60px -28px rgba(63,0,71,.32);
  --shadow-soft:0 10px 30px -18px rgba(63,0,71,.4);
  --wrap:1264px; --pad:88px;

  /* --- motion -------------------------------------------------------------- */
  --dur-1:130ms; --dur-2:260ms; --dur-3:440ms; --dur-4:620ms;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-back:cubic-bezier(.34,1.42,.5,1);   /* slight overshoot, spring feel */
}

/* -------------------------------------------------------------- reset-ish */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}   /* beat class-level display rules */
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
.display{font-family:var(--font-display);font-weight:700;letter-spacing:-.015em;line-height:1.04}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
[data-scheme="dark"]{color:var(--on-dark)}

/* eyebrow label used across sections */
.card__statustext,.summary__lbl{letter-spacing:.14em;text-transform:uppercase}

/* Buttons live in system.css (.btn / .btn--primary / .btn--secondary / .btn--sm). */

.link{font-weight:600;font-size:15px;transition:color var(--dur-1) var(--ease)}
.link--magenta{color:var(--magenta)}
.link--magenta:hover{color:var(--magenta-lift)}
.link--chev::after{content:"\00BB";margin-left:.5em;display:inline-block;transition:transform var(--dur-2) var(--ease-back)}
.link--chev:hover::after{transform:translateX(4px)}

.pill{border-radius:var(--r-pill);border:1px solid transparent;padding:8px 18px;font-weight:600;font-size:13px;
  transition:transform var(--dur-1) var(--ease-out),background var(--dur-2) var(--ease)}
.pill:active{transform:scale(.95)}
.pill--adjust{background:var(--magenta);color:#fff}
.pill--adjust:hover{background:var(--magenta-lift)}
.pill--adjust[aria-expanded="true"]{background:var(--ink)}

/* ----------------------------------------------------------------- field */
.field{
  width:100%;border:1px solid var(--track-ink);border-radius:var(--r-sm);
  background:#fff;padding:14px 16px;font-size:15px;color:var(--ink);
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
.field::placeholder{color:var(--ink-45)}
.field:focus{outline:none;border-color:var(--magenta);box-shadow:0 0 0 4px rgba(116,39,101,.14)}
.field-lbl{display:block;font-size:14px;font-weight:600;margin-bottom:8px;color:var(--ink-80)}

/* =========================================================== dev switcher */
.devbar{position:fixed;z-index:90;right:14px;bottom:14px;display:flex;gap:6px;align-items:center;
  background:var(--ink);color:var(--cream);padding:8px 10px;border-radius:var(--r-pill);
  box-shadow:var(--shadow-card);font-size:12px}
.devbar__tag{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;opacity:.6;padding-right:4px}
.devbar button{background:rgba(243,233,240,.1);border:0;border-radius:var(--r-pill);color:var(--cream);padding:6px 11px;font-size:12px}
.devbar button:hover{background:var(--magenta)}
.devbar__rm{display:flex;align-items:center;gap:5px;opacity:.75;padding-left:4px}

/* ================================================================== nav */
.nav{position:absolute;inset:0 0 auto 0;z-index:20}
.nav__inner{display:flex;align-items:center;justify-content:space-between;padding-top:26px;padding-bottom:26px}
.brand{display:inline-flex;align-items:center}
.klv-logo{height:25px;width:auto;display:block}
.klv-logo--mono{filter:brightness(0) invert(1)}   /* color mark to full white */
.kdai-logo{height:72px;width:auto;display:block;margin-bottom:8px}
.nav__links{display:flex;align-items:center;gap:28px;font-size:15px;font-weight:500}
.nav__links a:not(.btn){opacity:.85;transition:opacity var(--dur-1)}
.nav__links a:not(.btn):hover{opacity:1}
.nav__rule{width:1px;height:18px;background:rgba(243,233,240,.3)}
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:6px}
.nav__burger span{width:22px;height:2px;background:var(--on-dark);border-radius:2px}

/* ================================================================= hero */
.hero{position:relative;overflow:hidden;background:#3F0047;padding:176px 0 96px;min-height:660px}
.hero__media{position:absolute;inset:0;overflow:hidden;background:#3F0047;isolation:isolate}
.hero__stage{position:absolute;top:0;left:0;width:1440px;height:660px;transform-origin:0 0}
.hero__img{position:absolute;max-width:none;object-fit:cover;mix-blend-mode:exclusion;pointer-events:none}
.hero__img1{left:-138px;top:-219px;width:1578px;height:997px;opacity:.44}
.hero__img2{left:0;top:-116px;width:1560px;height:877px;opacity:.06}
.hero__inner{position:relative;display:grid;grid-template-columns:1fr 400px;gap:56px;align-items:center}
/* size + placement only; the gradient + hover drift come from .t-display */
.hero__title{font-size:clamp(46px,4.5vw,64px);font-weight:700;margin-bottom:26px;letter-spacing:-.02em}
.hero__lede{max-width:527px;color:var(--lede);font-size:16px;line-height:1.42}
.hero__caps{margin-top:40px;display:flex;gap:44px;flex-wrap:wrap;font-size:11px;font-weight:500;color:var(--mauve)}

/* recognition card */
.startcard{background:var(--card);color:var(--ink);border-radius:var(--r-xl);padding:30px;box-shadow:var(--shadow-card)}
.startcard__h{font-size:24px;margin-bottom:8px}
.startcard__sub{font-size:14px;color:var(--ink-64);line-height:1.5;margin-bottom:22px}
.startcard__form{display:flex;flex-direction:column;gap:12px}
.startcard__cta{width:100%}
.startcard__manual{display:flex;flex-direction:column;gap:6px;animation:rise var(--dur-3) var(--ease-out) both}
.startcard__recog{margin-top:16px;font-family:var(--font-mono);font-size:12.5px;line-height:1.5;color:var(--ink-64);
  display:flex;gap:9px;align-items:flex-start}
.startcard__recog::before{content:"";flex:0 0 8px;width:8px;height:8px;margin-top:4px;border-radius:50%;
  background:var(--teal);box-shadow:0 0 0 0 rgba(31,183,201,.5)}
.startcard[data-state="found"] .startcard__recog::before{animation:pulse 1.6s var(--ease) 1}
.startcard[data-state="miss"] .startcard__recog::before{background:var(--magenta)}
.startcard__recog strong{color:var(--ink);font-weight:600}

/* =============================================================== result */
.result{padding:120px 0 112px}
.result__head{max-width:760px;margin-bottom:34px}
.result__title{font-size:clamp(34px,4.3vw,50px);margin-bottom:16px}
.result__sub{color:var(--ink-64);font-size:16.5px;max-width:620px}

/* summary bar */
.summary{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:rgba(255,255,255,.5);border:1px solid var(--track);border-radius:var(--r-pill);
  padding:12px 12px 12px 24px;margin-bottom:16px}
.summary__lbl{font-size:11px;color:var(--ink-45)}
.summary__chips{display:flex;gap:10px;flex-wrap:wrap;flex:1}
.chip{display:inline-flex;gap:6px;align-items:baseline;border:1px solid var(--track);border-radius:var(--r-pill);
  padding:7px 15px;font-size:13.5px;background:#fff;transition:border-color var(--dur-2) var(--ease)}
.chip__k{color:var(--ink-64)}
.chip__v{font-family:var(--font-mono);font-weight:600;color:var(--teal-ink)}
.chip--updated{border-color:var(--teal);animation:chipPop var(--dur-3) var(--ease-back)}

/* edit card */
.editcard{background:var(--card);border-radius:var(--r-xl);box-shadow:var(--shadow-card);padding:34px 40px 40px;margin-bottom:26px;
  overflow:hidden}
.editcard.is-opening{animation:expand var(--dur-3) var(--ease-out)}
.editcard__top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid var(--track)}
.editcard__bank{font-size:18px;display:flex;align-items:center;gap:9px}
.dot-teal{width:9px;height:9px;border-radius:50%;background:var(--teal);display:inline-block}
.editcard__meta{font-size:14px;color:var(--ink-64);margin-top:5px}
.editcard__grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 56px}
.editcard__col{display:flex;flex-direction:column;gap:26px}
.editcard__note{font-size:13.5px;color:var(--ink-45);margin-top:auto}

/* a rendered field (slider or select) */
.f{display:flex;flex-direction:column;gap:10px}
.f.is-entering{animation:rise var(--dur-3) var(--ease-out) both}
.f__head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.f__lbl{font-size:15px;font-weight:600}
.f__opt{font-size:12px;color:var(--ink-45);font-weight:500}
.f__val{font-family:var(--font-mono);font-weight:600;color:var(--teal-ink);font-size:14px;
  border:1px solid var(--track);border-radius:var(--r-sm);padding:7px 14px;min-width:92px;text-align:center;
  transition:border-color var(--dur-2) var(--ease),color var(--dur-1)}
.f--active .f__val{border-color:var(--magenta);color:var(--magenta)}

/* custom slider over native range */
.slider{position:relative;height:26px;display:flex;align-items:center}
.slider__track{position:absolute;left:0;right:0;height:5px;border-radius:3px;background:var(--track)}
.slider__fill{position:absolute;left:0;height:5px;border-radius:3px;background:var(--magenta);width:var(--pct,50%);
  transition:width var(--dur-1) linear}
.slider input[type=range]{position:relative;width:100%;margin:0;background:transparent;-webkit-appearance:none;appearance:none;height:26px}
.slider input[type=range]:focus{outline:none}
.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;
  background:#fff;border:3px solid var(--magenta);box-shadow:0 2px 8px -2px rgba(63,0,71,.5);cursor:grab;
  transition:transform var(--dur-1) var(--ease-back),box-shadow var(--dur-2) var(--ease)}
.slider input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--magenta);
  box-shadow:0 2px 8px -2px rgba(63,0,71,.5);cursor:grab}
.slider input[type=range]:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.12);
  box-shadow:0 0 0 8px rgba(116,39,101,.16),0 2px 8px -2px rgba(63,0,71,.5)}
.slider input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 6px rgba(116,39,101,.22)}
.slider.at-limit input[type=range]::-webkit-slider-thumb{animation:nudge var(--dur-2) var(--ease-back)}
.slider__scale{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11.5px;color:var(--ink-45);margin-top:2px}

/* select */
.f__select{position:relative}
.f__select select{width:100%;-webkit-appearance:none;appearance:none;border:1px solid var(--track);border-radius:var(--r-sm);
  background:#fff;padding:15px 16px;font-size:15px;color:var(--ink);cursor:pointer;
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.f__select select:focus{outline:none;border-color:var(--magenta);box-shadow:0 0 0 4px rgba(116,39,101,.14)}
.f__select::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;border-right:2px solid var(--ink-45);
  border-bottom:2px solid var(--ink-45);transform:translateY(-70%) rotate(45deg);pointer-events:none}

/* ------------------------------------------------------------ result card */
.card{position:relative;overflow:hidden;background:var(--plum-deep);color:var(--on-dark);
  border-radius:var(--r-xl);padding:56px 56px 52px;min-height:300px;
  transition:box-shadow var(--dur-3) var(--ease)}
.card__bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;isolation:isolate;background:var(--plum-deep)}
.card__tex{position:absolute;max-width:none;object-fit:cover;mix-blend-mode:exclusion}
.card__tex1{left:20.6%;top:-88px;width:79.1%;height:563px;opacity:.66}     /* AdobeStock_219996753 */
.card__tex2{left:9.57%;top:-214px;width:100.2%;height:712px;opacity:.44}   /* AdobeStock_226593787 */
.card__fade{position:absolute;inset:0;
  background:linear-gradient(90deg,#3F0047 0%,rgba(63,0,71,.94) 46%,rgba(63,0,71,.32) 72%,rgba(63,0,71,0) 100%)}
.card__status{position:absolute;top:30px;right:34px;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--teal)}
.card__dot{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(31,183,201,.6)}
.card[data-state="live"] .card__dot{animation:pulse 2.2s var(--ease) infinite}
.card[data-state="recalc"] .card__status{color:var(--on-dark-40)}
.card[data-state="recalc"] .card__dot{background:var(--on-dark-40);animation:blink .9s steps(2,end) infinite}
.card__body{position:relative;transition:opacity var(--dur-2) var(--ease),filter var(--dur-2) var(--ease)}
.card__num{font-family:var(--font-body);font-size:clamp(38px,4.6vw,58px);font-weight:900;color:var(--teal);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.card__num--sm{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3.4vw,38px);color:var(--on-dark)}
.card[data-state="recalc"] .card__body{opacity:.9}
.card[data-state="recalc"] .card__num{color:#5b6b7a;filter:saturate(.2);transition:color var(--dur-2),filter var(--dur-2)}
.card__caption{margin-top:20px;max-width:520px;color:var(--on-dark-64);font-size:15.5px;line-height:1.5}
.card__how{margin-top:34px;max-width:720px}
.card__how-lbl{font-family:var(--font-body);font-weight:500;font-size:13px;color:var(--mauve);margin-bottom:8px}
.card__how-body{font-size:14px;color:var(--on-dark-64);line-height:1.55}

/* stagger children in on reveal */
.card.is-revealing .card__num{animation:rise var(--dur-3) var(--ease-out) both}
.card.is-revealing .card__caption{animation:rise var(--dur-3) var(--ease-out) .06s both}
.card.is-revealing .card__how{animation:rise var(--dur-3) var(--ease-out) .12s both}

/* skeleton (S2) */
.card__skeleton{position:absolute;left:56px;right:56px;top:56px;display:none;flex-direction:column;gap:20px}
.card[data-state="calculating"] .card__skeleton{display:flex}
.card[data-state="calculating"] .card__body{opacity:0}
.card[data-state="calculating"] .card__status{color:var(--on-dark-40)}
.sk{display:block;border-radius:8px;background:linear-gradient(100deg,rgba(243,233,240,.06) 30%,rgba(31,183,201,.16) 50%,rgba(243,233,240,.06) 70%);
  background-size:220% 100%;animation:shimmer 1.15s linear infinite}
.sk--num{height:64px;width:min(560px,80%)}
.sk--line{height:14px;width:70%;margin-top:26px}
.sk--short{width:44%;margin-top:2px}

/* degraded (S5) */
.card[data-state="degraded"]{background:var(--plum-deeper)}
.card[data-state="degraded"] .card__body{display:none}
.worksheet{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px;max-width:560px;font-size:14px;color:var(--on-dark-64)}
.worksheet li{display:flex;justify-content:space-between;gap:20px;padding-bottom:10px;border-bottom:1px solid rgba(243,233,240,.12)}
.worksheet span{color:var(--on-dark-40)}

/* actions + gate */
.actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:30px}
.gate{margin-top:22px;max-width:520px;animation:rise var(--dur-3) var(--ease-out) both}
.gate__row{display:flex;gap:10px;margin-top:8px}
.gate__row .field{flex:1}
.gate__note{margin-top:12px;font-size:11px;color:var(--ink-45)}

/* ========================================================= inputs (step 2) */
.inputs{padding:118px 0 44px}
.inputs__head{max-width:760px;margin-bottom:30px}
.eyebrow{display:inline-block;font-size:11px;color:var(--indigo);margin-bottom:14px}
.inputs__title{font-size:clamp(30px,3.8vw,44px);margin-bottom:14px}
.inputs__sub{color:var(--ink-64);font-size:16.5px;max-width:600px}
.inputs__cta{display:flex;align-items:center;gap:20px;margin-top:26px;flex-wrap:wrap}
.inputs__hint{font-size:11.5px;color:var(--ink-45);letter-spacing:.02em}

/* sections added by the flow spring in with an ease-back overshoot */
.section-in{animation:sectionSpring var(--dur-4) var(--ease-back) both}
@keyframes sectionSpring{0%{opacity:0;transform:translateY(30px) scale(.985)}100%{opacity:1;transform:none}}

/* ================================================================ proof */
.proof{background:var(--plum-deep);padding:112px 0}
.proof__title{font-size:clamp(28px,3.4vw,38px);font-weight:400;max-width:720px;line-height:1.12}
.proof__title strong{font-weight:700}
.proof__sub{margin-top:16px;color:#E6D8E2;max-width:600px;font-size:17px}
.proof__stats{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--plum2);border-radius:14px;padding:28px 40px}
.stat{display:flex;flex-direction:column;gap:6px;padding:2px 8px}
.stat+.stat{border-left:1px solid rgba(184,140,172,.3);padding-left:40px}
.stat__num{font-family:var(--font-body);font-weight:900;font-size:clamp(25px,2.7vw,31px);color:var(--teal);letter-spacing:-.01em;line-height:1.1}
.stat__lbl{font-family:var(--font-body);font-weight:500;font-size:14.5px;color:var(--mauve)}
.proof__disc{margin-top:26px;font-size:12.5px;color:#A882A0;text-transform:none;letter-spacing:0}

/* ============================================================ readiness */
.ready{padding:120px 0}
.ready__title{font-size:clamp(30px,4vw,46px);max-width:820px}
.ready__sub{margin-top:18px;color:var(--ink-64);max-width:640px}
.steps{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:34px;position:relative}
.step{position:relative;padding-top:52px}
.step__no{position:absolute;top:0;left:0;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;border:1px solid var(--track-ink);color:var(--ink-45);background:var(--cream);z-index:2}
.step--on .step__no{background:var(--plum-deep);color:var(--cream);border-color:var(--plum-deep)}
.steps::before{content:"";position:absolute;top:17px;left:34px;right:34px;height:1px;background:var(--track-ink)}
.step__h{font-size:22px;margin-bottom:10px}
.step__p{font-size:14.5px;color:var(--ink-64);line-height:1.55;max-width:300px}

/* =============================================================== footer */
.foot{background:var(--plum-deep)}
.foot__top{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding-top:100px;padding-bottom:64px}
.foot__wordmark{font-family:var(--font-display);font-weight:600;font-size:20px}
.foot__inst-name{font-size:44px;font-weight:600;margin-top:2px;line-height:1}
.foot__inst-name .amp{color:var(--magenta);font-weight:400}
.foot__inst-sum{font-size:13px;font-style:italic;color:var(--on-dark-64);margin-top:6px;letter-spacing:.05em;text-transform:none}
.foot__h{font-size:26px;margin-bottom:12px;max-width:360px}
.foot__p{color:var(--on-dark-64);font-size:14.5px;max-width:420px;margin-bottom:24px}
.foot__bottom{display:grid;grid-template-columns:auto 1fr;row-gap:22px;align-items:center;
  padding-top:72px;padding-bottom:60px;border-top:1px solid rgba(243,233,240,.12)}
.foot__logo{line-height:0}
.foot__logo .brand__k,.foot__wordmark .brand__k{color:var(--teal)}
.foot__tag{justify-self:end;font-size:22px;color:var(--teal)}
/* align-items:center keeps the row's items on one centre line when it wraps */
.foot__links{grid-column:1/-1;display:flex;align-items:center;gap:22px;font-size:14px;color:var(--on-dark-64);flex-wrap:wrap}
/* The Cookie Settings control has to be a <button> - it runs script, it is not
   navigation - but it sits between two policy links and should read as a third
   one, so strip the UA button chrome and let it inherit the row. HubSpot's
   snippet ships an inline style that paints it as a filled purple button;
   that was removed from the markup rather than fought with !important here,
   since an inline style outranks this rule. If the snippet is ever re-pasted
   from the portal it will arrive styled again - delete the style attribute,
   not this block.
   The global button rule at the top of this file already hands back the font,
   colour and pointer cursor; only the box needs undoing here.
   The vertical padding is a hit target, not spacing: stripping the snippet's
   10px/16px left a control about 17px tall, under the 24px WCAG 2.2 asks for,
   and small enough that a near-miss click reads as "the button is broken". The
   matching negative margin keeps the row the same height, so the padding costs
   nothing visually. Horizontal stays 0 so the 22px flex gap measures from the
   text edge exactly as it does on the two links either side. */
.foot__links button{background:none;border:0;padding:6px 0;margin:-6px 0;line-height:inherit;text-align:left}
.foot__links a:hover,.foot__links button:hover{color:var(--on-dark)}
.foot__legal{grid-column:1/-1;display:flex;gap:14px;font-size:11px;color:var(--on-dark-40);text-transform:none;letter-spacing:0}
.foot__legal span{margin-left:auto}

/* =========================================================== reveal obs
   Gated behind .js so content is always visible if the script never runs. */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity var(--dur-4) var(--ease-out),transform var(--dur-4) var(--ease-out)}
.js [data-reveal].in{opacity:1;transform:none}
.js .hero[data-reveal]{transform:none}      /* hero never offsets, only fades */

/* ============================================================ keyframes */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes expand{from{opacity:0;transform:translateY(-8px);max-height:0}to{opacity:1;transform:none;max-height:900px}}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,183,201,.5)}70%{box-shadow:0 0 0 10px rgba(31,183,201,0)}100%{box-shadow:0 0 0 0 rgba(31,183,201,0)}}
@keyframes blink{50%{opacity:.3}}
@keyframes chipPop{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes nudge{0%{transform:translateX(0)}40%{transform:translateX(3px)}100%{transform:translateX(0)}}

/* ============================================================ responsive */
@media (max-width:1080px){
  :root{--pad:40px}
  .hero__inner{grid-template-columns:1fr 360px;gap:36px}
}
@media (max-width:820px){
  :root{--pad:22px}
  .nav__links{display:none}
  .nav__burger{display:flex}
  .hero{padding:104px 0 40px}
  .hero__inner{grid-template-columns:1fr;gap:30px}
  .hero__title{font-size:clamp(40px,12vw,60px)}
  .startcard{max-width:none}
  .result{padding:64px 0 56px}
  .inputs{padding:72px 0 28px}
  .summary{border-radius:var(--r-lg);align-items:flex-start;flex-direction:column;gap:12px;padding:18px 20px}
  .summary__chips{width:100%}
  .summary .pill--adjust{align-self:flex-end;margin-top:-44px}
  .editcard{padding:24px 20px 28px}
  .editcard__grid{grid-template-columns:1fr;gap:26px}
  .card{padding:34px 24px 32px}
  .card__status{top:22px;right:20px}
  .card__skeleton{left:24px;right:24px;top:34px}
  .card__num{font-size:clamp(36px,10vw,52px)}
  .actions{gap:12px}
  .actions .btn{width:100%}
  .proof__stats{grid-template-columns:1fr;padding:20px 22px}
  .stat+.stat{border-left:0;border-top:1px solid rgba(184,140,172,.3);padding-left:8px;padding-top:18px;margin-top:18px}
  .steps{grid-template-columns:1fr;gap:8px}
  .steps::before{top:17px;bottom:17px;left:17px;right:auto;width:1px;height:auto}
  .step{padding-top:0;padding-left:52px;padding-bottom:26px}
  .step__no{top:0}
  .foot__top{grid-template-columns:1fr;gap:34px}
  .foot__bottom{grid-template-columns:1fr}
  .foot__tag{justify-self:start}
  .devbar{right:8px;bottom:8px;flex-wrap:wrap;max-width:94vw;justify-content:center}
}

/* ======================================================= reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  [data-reveal]{opacity:1;transform:none}
  .sk{background:rgba(243,233,240,.1)}
}
/* dev-forced reduced motion mirrors the media query */
body.rm *,body.rm *::before,body.rm *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
body.rm [data-reveal]{opacity:1;transform:none}

/* =============================================================================
   WIZARD — Eli's 4-step calculator, rebuilt in our design system. Tokens from
   the :root above; buttons + tertiary link from system.css. Everything below is
   layout + component styling for the tool that replaced the instant-slider flow.
   ========================================================================== */

/* hero is single-column now that the recognition card moved into wizard step 1 */
.hero__inner{grid-template-columns:1fr}
.hero__copy{max-width:760px}

/* ---------------------------------------------------------- section shell */
.calc{background:var(--cream);padding:80px 0 104px}
.calc__wrap{max-width:900px;padding-inline:32px}

/* ------------------------------------------------------------- progress */
.wizprogress{margin-bottom:30px}
.wzp{list-style:none;display:flex;padding:0;margin:0}
.wzp__step{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;position:relative;color:var(--ink-45)}
.wzp__step::before{content:"";position:absolute;top:16px;left:-50%;width:100%;height:2px;background:var(--track);z-index:0}
.wzp__step:first-child::before{display:none}
.wzp__step.is-done::before,.wzp__step.is-current::before{background:var(--teal)}
.wzp__no{position:relative;z-index:1;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:2px solid var(--track);font-weight:700;font-size:14px;color:var(--ink-45)}
.wzp__step.is-current .wzp__no{border-color:var(--teal);color:var(--teal-ink);box-shadow:0 0 0 4px rgba(31,183,201,.14)}
.wzp__step.is-done .wzp__no{background:var(--teal);border-color:var(--teal);color:#fff}
.wzp__label{font-size:12.5px;font-weight:600}
.wzp__step.is-current .wzp__label{color:var(--ink)}
.wzp__step.is-done .wzp__label{color:var(--ink-64)}

/* ---------------------------------------------------------------- cards */
.wzcard{background:var(--card);border:1px solid var(--track);border-radius:var(--r-xl);box-shadow:var(--shadow-card);padding:34px 36px}
.wzcard__h{font-family:var(--font-display);font-weight:700;font-size:23px;letter-spacing:-.01em;color:var(--ink);margin-bottom:6px}
.wzcard__h3{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--ink);margin-bottom:18px}
/* No measure on this one, deliberately. The three subtitles it carries are 96 to
   114 characters and every one of them fits the 762px card column on a single
   line; the 62ch cap that used to be here spanned 548px, 72% of the column, and
   broke all three into a second line holding 12% to 30% of a line's worth of
   words. A cap loose enough to fix step 2 made step 3's orphan worse, so there
   is no value that helps - measured in Edge against the self-hosted Inter, where
   1ch is 8.84px. They still wrap as the card narrows, which is what we want. */
.wzcard__sub{font-size:14px;color:var(--ink-64);line-height:1.5;margin-bottom:24px}
.wzcard__sub--center{text-align:center;margin-inline:auto}
.wzcard__rule{height:1px;background:var(--track);margin:24px 0}
.wzcard__foot{display:flex;justify-content:space-between;gap:16px;margin-top:28px}
.wzcard__foot--end{justify-content:flex-end}

/* ------------------------------------------------------------- form grid */
.cf{display:flex;flex-wrap:wrap;gap:16px}
.cf__field{flex:1 1 100%;min-width:0;display:flex;flex-direction:column}
.cf__field--half{flex:1 1 calc(50% - 8px)}
.cf__field--full{flex:1 1 100%}
.cf__label{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-64);margin-bottom:7px}
.cf__req{color:var(--magenta)}
.cf__input{width:100%;border:1.5px solid var(--track);border-radius:var(--r-sm);background:#fff;padding:11px 13px;
  font-size:15px;color:var(--ink);font-family:var(--font-body);
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.cf__input::placeholder{color:var(--ink-45)}
.cf__input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(31,183,201,.13)}
.cf__select{appearance:none;-webkit-appearance:none;padding-right:36px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%3E%3Cpath%20d='M2%204l4%204%204-4'%20fill='none'%20stroke='%23360F2E'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:12px}
.cf__hint{font-size:12px;color:var(--ink-45);margin-top:6px}

/* phone with Office/Mobile segmented toggle */
.cf__row,.cf__phone{display:flex}
.cf__seg{display:flex;flex:none;border:1.5px solid var(--track);border-right:0;border-radius:var(--r-sm) 0 0 var(--r-sm);overflow:hidden}
.cf__seg-btn{padding:0 14px;font-size:12.5px;font-weight:600;white-space:nowrap;background:#fff;color:var(--ink-64);border:0;
  transition:background var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.cf__seg-btn.is-on{background:var(--ink);color:#fff}
.cf__phone-input{flex:1;min-width:0;border-radius:0 var(--r-sm) var(--r-sm) 0}

/* currency inputs */
/* margin-top:auto bottom-aligns the input inside its field. The two spend
   labels in step 3 are different lengths - one wraps to two lines at most
   widths and the other does not - and .cf__field is a flex column inside a
   flex row, so without this the wrapped label pushes its own input a line
   lower than its neighbour and the pair reads as misaligned. Safe here in a
   way it would not be on .cf__input: currencyField appends nothing after the
   box, so there is no hint, error or warning underneath to be shoved around. */
.cf__currency{position:relative;display:flex;align-items:center;margin-top:auto}
.cf__currency-sym{position:absolute;left:13px;color:var(--ink-45);font-size:15px;pointer-events:none}
.cf__input--currency{padding-left:26px;font-variant-numeric:tabular-nums}

/* institution typeahead */
.cf__typeahead{position:relative}
.cf__menu{position:absolute;z-index:30;top:100%;left:0;right:0;margin:4px 0 0;list-style:none;padding:4px;
  background:#fff;border:1px solid var(--track);border-radius:var(--r-sm);box-shadow:var(--shadow-card);
  max-height:264px;overflow-y:auto}
.cf__menu-item{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:10px 12px;border-radius:8px;cursor:pointer}
.cf__menu-item:hover{background:var(--cream)}
.cf__menu-name{font-weight:600;font-size:14px;color:var(--ink)}
.cf__menu-loc{font-size:12px;color:var(--ink-45);font-family:var(--font-mono);white-space:nowrap}

/* --------------------------------------------------- department table (s2) */
.dt__scroll{overflow-x:auto;margin:0 -4px}
.dt{width:100%;border-collapse:collapse;font-size:13.5px}
.dt__th{text-align:center;padding:10px 8px;color:var(--ink);border-bottom:2px solid var(--ink);
  font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.dt__th--l{text-align:left}
.dt__th--r{text-align:right}
.dt__tr:nth-child(even){background:var(--cream)}
.dt__td{padding:7px 8px;text-align:center;vertical-align:middle}
.dt__td--name{text-align:left;font-weight:600;white-space:nowrap}
.dt__td--cost{text-align:right;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.dt__input{width:76px;text-align:center;border:1.5px solid var(--track);border-radius:8px;padding:6px 4px;
  font-size:13.5px;background:#fff;color:var(--ink);font-family:var(--font-body)}
.dt__input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(31,183,201,.13)}

/* running totals bar */
.dtotals{margin-top:18px;padding:18px 22px;border-radius:var(--r-md);border:1px solid var(--track-ink);
  background:linear-gradient(135deg,rgba(116,39,101,.04),rgba(31,183,201,.06));
  display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between}
.dtotal{display:flex;flex-direction:column;gap:4px}
.dtotal__lbl{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-64)}
.dtotal__v{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--ink);font-variant-numeric:tabular-nums}
.dtotal__v--accent{color:var(--magenta)}

/* ------------------------------------------------- current-spend summary (s3) */
.spendsum{margin-top:24px;padding:22px 24px;border-radius:var(--r-md);border:1px solid var(--track);
  background:linear-gradient(135deg,rgba(116,39,101,.03),rgba(74,59,130,.05))}
.spendsum__lbl{font-size:13px;color:var(--ink-64)}
.spendsum__row{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.spendsum__v{font-family:var(--font-display);font-weight:700;font-size:32px;color:var(--magenta);font-variant-numeric:tabular-nums}
.spendsum__unit{font-size:14px;color:var(--ink-45)}

/* --------------------------------------------------------- results (s4) */
.wzresult{display:flex;flex-direction:column;gap:20px}
/* result hero: a drenched multi-hue brand gradient. The base stays dark (deep
   plum -> dark magenta -> dark indigo, each 9:1+ under white text); magenta,
   indigo, and teal enter as corner glows, with teal kept out of the number's
   path so legibility never drops below the floor. */
.rhero{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:48px 40px;text-align:center;color:var(--on-dark);
  background:
    radial-gradient(115% 130% at 6% 0%, rgba(138,47,121,.5), rgba(138,47,121,0) 52%),
    radial-gradient(95% 120% at 100% 2%, rgba(31,183,201,.24), rgba(31,183,201,0) 48%),
    radial-gradient(130% 150% at 92% 100%, rgba(74,59,130,.7), rgba(74,59,130,0) 60%),
    linear-gradient(140deg, #2A0B26 0%, #3D1338 42%, #33164C 74%, #230A31 100%)}
/* luminous top edge ties the three accents together */
.rhero::after{content:"";position:absolute;inset:0 0 auto 0;height:2px;pointer-events:none;
  background:linear-gradient(90deg, var(--teal), var(--magenta-lift) 55%, var(--indigo))}
.rhero__eyebrow{position:relative;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-64);margin-bottom:12px}
.rhero__num{position:relative;font-family:var(--font-display);font-weight:800;font-size:clamp(38px,6vw,56px);letter-spacing:-.02em;line-height:1;color:#fff}
.rhero__metrics{position:relative;display:flex;justify-content:center;gap:46px;margin-top:26px;flex-wrap:wrap}
.rmetric{display:flex;flex-direction:column;gap:4px}
.rmetric__v{font-family:var(--font-display);font-weight:700;font-size:24px;color:#fff}
.rmetric__l{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--on-dark-64)}

/* before / after comparison (replaces the mixed-scale bar chart) */
.bcompare{display:flex;flex-direction:column;gap:14px;margin-bottom:16px}
.bcompare__row{display:grid;grid-template-columns:112px 1fr 92px;gap:14px;align-items:center}
.bcompare__lbl{font-size:13px;font-weight:600;color:var(--ink);text-align:right}
.bcompare__track{display:flex;height:32px;border-radius:8px;overflow:hidden;background:rgba(63,0,71,.06)}
.bcompare__seg{height:100%;width:0;transition:width .9s var(--ease-out)}
.bcompare__seg:not(:last-child){box-shadow:inset -1.5px 0 rgba(255,255,255,.45)}
.bcompare__seg--retained{background:rgba(63,0,71,.5)}
.bcompare__elim{position:relative;display:flex;align-items:center;justify-content:center;width:0;overflow:hidden;
  transition:width .9s var(--ease-out);
  background:repeating-linear-gradient(135deg,rgba(31,183,201,.22),rgba(31,183,201,.22) 7px,rgba(31,183,201,.11) 7px,rgba(31,183,201,.11) 14px)}
.bcompare__elim-lbl{font-size:12px;font-weight:700;color:var(--teal-ink);white-space:nowrap;padding:0 8px}
.bcompare__val{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);text-align:left}
.bcompare__row--after .bcompare__val{color:var(--teal-ink)}
.bcompare__legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:22px;padding-left:126px}
.bcompare__key{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:rgba(63,0,71,.66)}
.bcompare__dot{width:11px;height:11px;border-radius:3px;flex:none}
.bcompare__dot--elim{background:repeating-linear-gradient(135deg,rgba(31,183,201,.75),rgba(31,183,201,.75) 3px,rgba(31,183,201,.38) 3px,rgba(31,183,201,.38) 6px)}

/* comparison + department-impact tables */
.ctab__scroll{overflow-x:auto}
.ctab{width:100%;border-collapse:collapse;font-size:14px}
.ctab__th{padding:10px 12px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;
  border-bottom:2px solid var(--ink);color:var(--ink);white-space:nowrap}
.ctab__th--l{text-align:left}
.ctab__th--r{text-align:right}
.ctab__th--save{color:var(--teal-ink)}
.ctab__tr{border-bottom:1px solid var(--track)}
.ctab__td{padding:10px 12px}
.ctab__td--name{font-weight:600}
.ctab__td--r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ctab__td--save{color:var(--teal-ink);font-weight:600}
.ctab__tr--sub{background:var(--cream)}
.ctab__tr--sub .ctab__td{font-weight:700}
.ctab__tr--total{background:rgba(116,39,101,.05)}
.ctab__tr--total .ctab__td--name{font-weight:700;color:var(--ink);font-size:15px}
.ctab__tr--total .ctab__td--save{font-weight:700;font-size:16px}

/* CTA + disclaimer */
.wzcard--cta{text-align:center}
.wzcard__ctarow{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:8px}
.wzcard__restart{margin-top:20px}
.wzrestart{background:none;border:0;color:var(--ink-45);font-size:13px;text-decoration:underline}
.wzrestart:hover{color:var(--magenta)}
.wzdisc{font-size:11.5px;color:var(--ink-45);text-align:center;line-height:1.6;max-width:620px;margin:6px auto 0}

/* --------------------------------------------------------- wizard responsive */
@media (max-width:720px){
  .calc{padding:56px 0 80px}
  .calc__wrap{padding-inline:16px}
  .cf__field--half{flex:1 1 100%}
  .wzcard{padding:24px 20px}
  .wzp__label{font-size:10px}
  .bcompare__row{grid-template-columns:78px 1fr 74px;gap:8px}
  .bcompare__lbl{font-size:11.5px}
  .bcompare__elim-lbl{font-size:11px}
  .bcompare__legend{padding-left:0}
  .rhero__metrics{gap:22px}
  .wzcard__foot .btn{flex:1}
}
@media (max-width:520px){
  .wzp__label{display:none}
  .dtotals{gap:14px 20px}
  .dtotal__v{font-size:19px}
}

/* =============================================================================
   WIZARD v2 — Impeccable pass. Contrast, the FTE stepper, Step 1 progressive
   disclosure (recognition-first), field validation, and keyboard states.
   ========================================================================== */

/* ---- contrast: lift muted text to >=4.5:1 on light surfaces ---- */
.cf__input::placeholder{color:rgba(63,0,71,.6)}
.cf__hint{color:rgba(63,0,71,.62)}
.cf__currency-sym{color:rgba(63,0,71,.6)}
.wzcard__sub{color:rgba(63,0,71,.72)}
.wzdisc{color:rgba(63,0,71,.56)}

/* ---- focus-visible rings (keyboard only) ---- */
.cf__input:focus-visible,.stpr:focus-within{outline:none}
.s1link:focus-visible,.recog__change:focus-visible,.wzrestart:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}

/* ---- field error state ---- */
.cf__field.is-error .cf__input{border-color:#C02B4E}
.cf__field.is-error .cf__input:focus{box-shadow:0 0 0 3px rgba(192,43,78,.14)}
/* the phone toggle owns the left half of that control's border - without this
   the input turns red while the toggle stays grey and it reads as a glitch */
.cf__field.is-error .cf__seg{border-color:#C02B4E}
.cf__error{font-size:12px;color:#C02B4E;margin-top:6px;display:flex;align-items:center;gap:5px}
.cf__error::before{content:"";width:13px;height:13px;flex:none;border-radius:50%;background:#C02B4E;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4v5M8 11.5v.5' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4v5M8 11.5v.5' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---- field warning: advisory, deliberately NOT the error treatment ----
   No border colour, no red, no icon dot. The value is valid and every one of
   those would say it is not. Shape carries the distinction as well as hue does,
   because amber-vs-red is the one pair colour-blind visitors reliably lose: the
   error leads with a dot, this leads with a rule.
   #8A5A00 is 5.9:1 on the white card (.wzcard is var(--card), not --cream), so
   it is accessible as authored and must NOT get an entry in the contrast lift
   at the top of this section - that block exists to rescue muted tokens, and a
   second declaration for a colour that already passes is just drift waiting to
   happen. The rule is decorative; the text carries the whole message. */
.cf__warn{font-size:12px;line-height:1.45;color:#8A5A00;margin-top:6px;
  padding-left:9px;border-left:2px solid #C98A14}
/* both channels lit at once - tighten the gap so they read as one stack */
.cf__error+.cf__warn{margin-top:4px}

/* ---- Step 1 progressive disclosure ---- */
.s1lede{font-size:14px;color:rgba(63,0,71,.72);line-height:1.5;margin-bottom:22px;max-width:52ch}
.s1notlisted{margin-top:14px;font-size:13px;color:rgba(63,0,71,.62)}
.s1link{background:none;border:0;padding:0;color:var(--teal-ink);font-weight:600;font-size:13px;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;font-family:var(--font-body)}
.s1link:hover{color:var(--magenta)}
.s1reveal{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease-out)}
.s1reveal.is-open{grid-template-rows:1fr}
.s1reveal__inner{overflow:hidden;min-height:0}
.s1reveal__body{padding-top:24px}
/* The top margin is load-bearing, not decoration. This heading is preceded by
   either the recognition card or the manual tier select, and neither carries a
   bottom margin, so at margin-top:0 "About you" sits flush against whichever
   one is showing and reads as part of it. Owning the gap here rather than on
   .recog fixes both paths with one rule. */
.s1about-h{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink);margin:22px 0 16px}

/* recognition confirmation */
.recog{display:flex;align-items:flex-start;gap:13px;padding:16px 18px;border-radius:var(--r-md);
  background:linear-gradient(135deg,rgba(31,183,201,.07),rgba(116,39,101,.04));border:1px solid rgba(31,183,201,.3)}
.recog__dot{flex:none;width:10px;height:10px;margin-top:5px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(31,183,201,.16)}
.recog__body{flex:1;min-width:0}
.recog__name{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--ink)}
.recog__loc{font-weight:500;font-size:13px;color:rgba(63,0,71,.64);margin-left:8px}
.recog__meta{font-size:12.5px;color:rgba(63,0,71,.66);margin-top:3px}
.recog__change{flex:none;align-self:center;background:none;border:0;color:var(--teal-ink);font-size:13px;font-weight:600;
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;font-family:var(--font-body)}
.recog__change:hover{color:var(--magenta)}

/* ---- FTE / hours stepper (replaces native number spinners) ---- */
.stpr{display:inline-flex;align-items:stretch;height:38px;border:1.5px solid var(--track);border-radius:10px;overflow:hidden;background:#fff;
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.stpr:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px rgba(31,183,201,.13)}
.stpr__btn{width:36px;flex:none;border:0;background:#fff;color:rgba(63,0,71,.5);font-size:19px;font-weight:600;line-height:1;
  display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.stpr__btn:hover{background:var(--cream);color:var(--teal-ink)}
.stpr__btn:active{background:rgba(31,183,201,.12)}
.stpr__btn:disabled{color:rgba(63,0,71,.18);cursor:default;background:#fff}
.stpr__val{width:46px;flex:none;border:0;border-inline:1px solid var(--track);text-align:center;
  font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink);background:#fff;font-family:var(--font-body)}
.stpr__val:focus{outline:none}
.stpr__val::-webkit-outer-spin-button,.stpr__val::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ---- typeahead: keyboard-active item + no-match ---- */
.cf__menu-item.is-active{background:var(--cream)}
.cf__menu-empty{padding:13px 12px;font-size:13px;color:rgba(63,0,71,.66);line-height:1.5}
.cf__menu-empty button{color:var(--teal-ink);font-weight:600;background:none;border:0;padding:0;text-decoration:underline;cursor:pointer;font-family:var(--font-body)}