/* ==========================================================================
   UmanID — marketing site
   Standalone rebuild of "UmanID Landing.dc.html".

   The design file rendered inside Claude Design: an <x-dc> wrapper, support.js
   and the "broadsheet" design-system bundle supplied --font-heading,
   --color-text, --color-divider and the .btn classes. None of that ships here.
   Every one of those tokens is pinned below, with the source of the value.
   ========================================================================== */

/* ---------- fonts --------------------------------------------------------
   One family. Outfit is a geometric sans; the Newsreader serif that used to
   set the headings read editorial, and this is a product, not a magazine.
   Dropping Newsreader and Archivo also removes 285 KB of font. */
@font-face{
  font-family:"Outfit";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/outfit.woff2") format("woff2");
}

/* ---------- tokens ------------------------------------------------------- */
:root{
  /* PINNED — the design system supplied these; values chosen here.
     --font-heading was a serif in the "broadsheet" system; Newsreader matches
     its proportions and carries the same 600 weight the design asks for. */
  --font-heading:"Outfit","Segoe UI",system-ui,sans-serif;
  --font-body:"Outfit","Segoe UI",system-ui,sans-serif;

  /* PINNED — #f3f2f2 is taken verbatim from the design file: it is the fill on
     the hero check-circle, set to match the page so the arrows pass behind it. */
  --color-bg:#F3F2F2;
  --color-surface:#FFFFFF;
  --color-text:#17201B;
  /* precomputed equivalents of the design's color-mix(--color-text N%) */
  --color-text-78:#454B47;
  --color-text-70:#5A605C;
  --color-divider:#DCDCD9;

  /* THE ACCENT RAMP, re-anchored on the sampled brand green.
     The lightness scale is still the designer's. The hue and chroma now come
     from the mark itself — #43794E, averaged over the core ink of
     brand/source/mark-colour-reference.png. That measures L 52.6% C 0.089
     h 149.2, which is 35% less chromatic than the #349C5B this ramp used to
     sit on; that value came from a Wix re-export, not the original artwork.
     Chroma is scaled x0.658 so the ramp passes through the real green.
     Hex first, so browsers without oklch() keep it. */
  --color-accent:#4A8055;      --color-accent:oklch(55% 0.0888 149.2);
  --color-accent-100:#ECF4ED;  --color-accent-100:oklch(96% 0.0132 149.2);
  --color-accent-200:#D4E7D7;  --color-accent-200:oklch(91% 0.0296 149.2);
  --color-accent-300:#B0D1B5;  --color-accent-300:oklch(83% 0.0526 149.2);
  --color-accent-400:#85B28C;  --color-accent-400:oklch(72% 0.0724 149.2);
  --color-accent-500:#5A8F64;  --color-accent-500:oklch(60% 0.0855 149.2);
  --color-accent-600:#3B7147;  --color-accent-600:oklch(50% 0.0888 149.2);
  --color-accent-700:#2A5633;  --color-accent-700:oklch(41% 0.0756 149.2);
  --color-accent-800:#1B3B22;  --color-accent-800:oklch(32% 0.0592 149.2);
  --color-accent-900:#0A1D0E;  --color-accent-900:oklch(21% 0.0395 149.2);

  /* The large green field. One green doing the work — this is the same hue as
     the mark, taken deep and saturated so it can hold a whole section rather
     than sit on grey as an accent. */
  --green-field:#0E3A1A;
  --on-green:#FFFFFF;
  --on-green-soft:#C4D7C7;
  --on-green-mute:#A2B8A5;
  --green-hairline:#2D4B32;
  --green-raised:1D3E24;

  --shell:1680px;
  --gutter:clamp(20px,4.5vw,88px);
  color-scheme:light;
}

/* ---------- base --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--color-bg);color:var(--color-text);
  font-family:var(--font-body);font-size:16px;line-height:1.5;
  text-wrap:pretty;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,ul,li,figure,figcaption,blockquote{margin:0}
h1,h2,h3,.h1,.h2{font-feature-settings:"ss01"}
ul{padding:0;list-style:none}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
svg{display:block}
:focus-visible{outline:2px solid var(--color-accent-600);outline-offset:3px;border-radius:4px}
::selection{background:var(--color-accent-200);color:var(--color-accent-900)}

/* min-width:0 so the shell can shrink inside a flex or grid parent — without
   it, a wide child (the dashboard) propagates its min-content width up and
   widens the whole page. */
.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter);min-width:0}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--color-surface);padding:10px 14px;border-radius:8px;border:1px solid var(--color-divider)}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- type --------------------------------------------------------- */
.h1{font-family:var(--font-heading);font-weight:600;font-size:clamp(42px,6.4vw,104px);line-height:.99;letter-spacing:-.038em}
.h1 span{display:block}
.h2{font-family:var(--font-heading);font-weight:600;font-size:clamp(30px,4vw,62px);line-height:1.06;letter-spacing:-.03em}
.lede{font-size:clamp(17px,1.45vw,23px);line-height:1.55;max-width:46ch;color:var(--color-text-78)}
.kicker{display:block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-70)}

/* ---------- buttons — rebuilt; the design system's .btn shipped in _ds/ ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-weight:600;font-size:15px;line-height:1;
  padding:14px 22px;border-radius:10px;border:1px solid transparent;
  cursor:pointer;text-decoration:none;text-align:center;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.btn-primary{background:var(--color-accent-600);color:#fff}
.btn-primary:hover{background:var(--color-accent-700)}
.btn-ghost{background:transparent;color:var(--color-text);border-color:var(--color-divider)}
.btn-ghost:hover{border-color:var(--color-accent-600);color:var(--color-accent-700)}
.btn-sm{padding:10px 16px;font-size:14px}
.btn-block{width:100%}

/* ---------- nav ---------------------------------------------------------- */
/* The header is part of the green field rather than a light strip above it.
   On the home page it runs straight into the hero with no seam; elsewhere it
   is the brand band. */
.nav{position:sticky;top:0;z-index:40;background:var(--green-field);border-bottom:1px solid transparent}
.nav[data-stuck="true"]{box-shadow:0 1px 0 rgba(255,255,255,.10)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:20px}
/* ---------- the logo ------------------------------------------------------
   Mark as SVG, wordmark as real text in Outfit — selectable, accessible, and
   it does not drag a 43 KB embedded woff2 onto every page the way the
   handoff SVGs in brand/ do.

   Proportions come from build-brand.py: the wordmark's cap height is 58
   against a 100-unit mark (Outfit's cap is 0.71em, so font-size is mark
   height x 0.58 / 0.71 = x0.817), the gap is 0.24 of mark height, and the
   wordmark sits 2/100 of mark height below mathematical centre because the
   mark's mass is low-left while the check opens the top-right. */
.nav-brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:#fff}
/* the footer is on the light ground */
.foot-brand .nav-brand{color:var(--color-accent-700)}
.nav-brand .mark{height:32px;width:auto;flex:none;display:block}
.nav-brand .wm{
  font-family:"Outfit","Segoe UI",system-ui,sans-serif;
  font-size:26px;line-height:1;letter-spacing:-.012em;
  transform:translateY(0.6px);white-space:nowrap;
}
.wm-a{font-weight:600}
.wm-b{font-weight:700}
.foot-brand .nav-brand{gap:9px}
.foot-brand .mark{height:36px;width:auto}
.foot-brand .wm{font-size:29px;transform:translateY(0.7px)}
@media (max-width:520px){
  .nav-brand{gap:7px}
  .nav-brand .mark{height:28px;width:auto}
  .nav-brand .wm{font-size:23px}
}
.nav-set{display:none;align-items:center;gap:28px;flex-wrap:wrap}
.nav-link{color:var(--on-green-soft);text-decoration:none;font-size:14.5px;padding-block:4px;border-bottom:1px solid transparent}
.nav-link:hover{color:#fff;border-bottom-color:rgba(255,255,255,.55)}
.nav-link[aria-current="page"]{color:#fff;border-bottom-color:#fff}
.burger{display:flex;flex-direction:column;gap:5px;padding:10px 4px;background:none;border:0;cursor:pointer}
.burger span{display:block;width:22px;height:1.8px;background:#fff;transition:transform .2s ease,opacity .2s ease}
.nav[data-open="true"] .burger span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.nav[data-open="true"] .burger span:nth-child(2){opacity:0}
.nav[data-open="true"] .burger span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}
.nav-panel{display:none;padding-block:4px 20px;border-top:1px solid var(--green-hairline)}
.nav[data-open="true"] .nav-panel{display:block}
.nav-panel a:not(.btn){display:block;padding:14px 2px;font-size:16px;text-decoration:none;color:var(--on-green-soft);border-bottom:1px solid var(--green-hairline)}
.nav-panel .btn{margin-top:18px;width:100%}
@media (min-width:900px){
  .nav-set{display:flex}
  .burger{display:none}
  .nav-panel{display:none!important}
  .nav-in{padding-block:24px}
}

/* ---------- hero --------------------------------------------------------- */
.hero{display:grid;gap:clamp(28px,5vw,64px);align-items:center;padding:clamp(24px,5vw,56px) 0 clamp(40px,6vw,72px)}
.hero-copy .lede{margin-top:24px}
.hero-actions{display:flex;gap:15px;flex-wrap:wrap;margin-top:32px}
@media (min-width:900px){.hero{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}}

/* the verification screen the customer actually sees — replaces the two
   head silhouettes from the design file */
.hero-figure{position:relative;margin:0}
/* The hero stage holds the verification card alone. It used to sit beside a
   photograph; the card is the product, so the photograph was decoration. */
.hero-stage{
  position:relative;border-radius:22px;background:var(--color-accent-100);
  border:1px solid var(--color-accent-200);overflow:hidden;
  display:grid;place-items:center;padding:clamp(20px,3vw,32px);
}
.hero-figure figcaption{margin-top:10px;font-size:12.5px;color:var(--color-text-70)}

.vcard{
  width:100%;max-width:400px;
  background:var(--color-surface);border:1px solid var(--color-divider);
  border-radius:16px;padding:18px 18px 16px;
  box-shadow:0 18px 40px -26px rgba(10,32,20,.45);
  display:flex;flex-direction:column;gap:9px;
}
.vcard-top{display:flex;align-items:center;gap:8px;color:var(--color-accent-700);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.vcard-check{width:20px;height:20px;flex:none}
.vcard-org{font-family:var(--font-heading);font-weight:600;font-size:22px;line-height:1.15}
.vcard-team{font-size:13.5px;color:var(--color-text-70)}
.vcard-reason{font-size:15px;line-height:1.45;border-left:2px solid var(--color-accent-500);padding-left:11px;margin-top:4px}
.vcard-note{margin-top:6px;padding-top:12px;border-top:1px solid var(--color-divider);font-size:11.5px;color:var(--color-text-70)}
.vcard-keys{display:flex;gap:8px;margin-top:12px}
.vcard-key{flex:1;text-align:center;font-weight:600;font-size:13.5px;padding:13px 0;border-radius:10px}
.vcard-key--no{background:#F0F0EE;color:var(--color-text-70)}
.vcard-key--yes{background:var(--color-accent-600);color:#fff}


/* ---------- five moments ------------------------------------------------- */
.moments{padding:clamp(32px,5vw,56px) 0 clamp(48px,7vw,88px)}
.moments .kicker{margin:0 0 40px}
.moment{
  display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px 16px;
  align-items:start;padding:28px 0;border-top:1px solid var(--color-divider);
}
.moment:last-child{border-bottom:1px solid var(--color-divider)}
.moment-idx{display:flex;flex-direction:column;gap:10px}
.moment-num{font-family:var(--font-heading);font-size:15px;color:var(--color-accent-700)}
.moment-ico{width:40px;height:40px}
.moment-label{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-70);margin:0 0 8px}
.moment-line{font-family:var(--font-heading);font-size:clamp(21px,2.2vw,28px);line-height:1.35;max-width:34ch}

@media (min-width:900px){
  .moment{grid-template-columns:110px minmax(0,1fr);align-items:baseline;gap:32px}
}

/* ---------- closing band ------------------------------------------------- */
.closer{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:24px;padding:clamp(32px,5vw,48px) 0 clamp(56px,8vw,96px);
}
.closer .h2{max-width:22ch}
.closer-actions{display:flex;gap:15px;flex-wrap:wrap}

/* ---------- pricing ------------------------------------------------------ */
.page-head{padding:clamp(24px,5vw,56px) 0 clamp(28px,4vw,44px)}
.page-head .lede{margin-top:20px}
.plans{display:grid;gap:20px;padding-bottom:clamp(40px,6vw,72px)}
.plan{
  display:flex;flex-direction:column;gap:14px;
  background:var(--color-surface);border:1px solid var(--color-divider);
  border-radius:18px;padding:28px 24px;
}
.plan--featured{border-color:var(--color-accent-400);box-shadow:0 20px 44px -32px rgba(10,50,28,.5)}
.plan-name{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-70)}
.plan-price{font-family:var(--font-heading);font-weight:600;font-size:clamp(34px,4vw,46px);line-height:1;letter-spacing:-.02em}
.plan-unit{font-family:var(--font-body);font-weight:400;font-size:15px;color:var(--color-text-70);letter-spacing:0}
.plan-note{font-size:13.5px;color:var(--color-text-70)}
.plan-list{display:flex;flex-direction:column;gap:11px;margin-top:2px}
.plan-list li{display:flex;gap:10px;align-items:baseline;font-size:15.5px;line-height:1.45}
.plan-list svg{width:15px;height:15px;flex:none;color:var(--color-accent-600);transform:translateY(2px)}
.plan .btn{margin-top:auto}
.plan-cta-wrap{margin-top:auto;padding-top:8px}
@media (min-width:820px){.plans{grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}}

/* ---------- footer ------------------------------------------------------- */
.foot{border-top:1px solid var(--color-divider);padding-block:clamp(36px,5vw,56px)}
.foot-top{display:flex;flex-wrap:wrap;gap:32px 56px;justify-content:space-between}
.foot-brand{display:flex;flex-direction:column;gap:12px;max-width:34ch}
.foot-tag{font-family:var(--font-heading);font-size:19px;line-height:1.35}
.foot-cols{display:flex;flex-wrap:wrap;gap:32px 56px}
.foot-col{display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--color-text-70);max-width:32ch}
.foot-col b{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text);margin-bottom:4px;font-weight:700}
.foot-col a{text-decoration:none}
.foot-col a:hover{color:var(--color-accent-700);text-decoration:underline}
.foot-bot{margin-top:32px;padding-top:18px;border-top:1px solid var(--color-divider);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:12.5px;color:var(--color-text-70)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.001ms!important;animation-duration:.001ms!important}
}

/* ---------- cost band (Wix: "And Then the Organization Pays the Price") --- */
.band{padding:clamp(32px,5vw,56px) 0 clamp(40px,6vw,72px)}
.band .kicker{margin:0 0 20px}
.band .h2{max-width:26ch}
.band-list{display:grid;gap:0;margin-top:clamp(28px,4vw,44px)}
.band-item{padding:22px 0;border-top:1px solid var(--color-divider);font-family:var(--font-heading);font-size:clamp(19px,1.8vw,23px);line-height:1.35}
.band-item:last-child{border-bottom:1px solid var(--color-divider)}
@media (min-width:820px){
  .band-list{grid-template-columns:repeat(3,1fr);gap:0 clamp(28px,4vw,56px)}
  .band-item{border-bottom:1px solid var(--color-divider)}
}

/* ---------- split: figure beside a short argument -------------------------- */
.split{display:grid;gap:clamp(26px,4.5vw,56px);align-items:center;padding:clamp(28px,4.5vw,52px) 0}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* ---------- split--text: the editorial two-column ------------------------
   Kicker and heading hold the left column, the argument the right. This is
   what the image splits become without the photography — the two-column
   rhythm was doing the work, not the stock photo. */
.split--text{align-items:start}
.split--text .split-head .h2{margin-top:12px;max-width:18ch}
.split--text .split-body .lede{max-width:52ch}
.split--text .split-body .lede + .points{margin-top:22px}
.split--text .split-body > .points{margin-top:0}
@media (min-width:900px){
  .split--text{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px)}
  .split--text.split--flip .split-head{order:2}
  .split--text.split--flip .split-body{order:1}
}

/* ---------- points: short claims with a tick ------------------------------ */
.points{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.points li{display:flex;gap:11px;align-items:baseline;font-size:16.5px;line-height:1.45}
.points svg{width:15px;height:15px;flex:none;color:var(--color-accent-600);transform:translateY(2px)}

/* ---------- steps --------------------------------------------------------- */
.steps{display:grid;gap:0;margin-top:clamp(30px,4vw,46px)}
.step{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px 16px;align-items:start;padding:26px 0;border-top:1px solid var(--color-divider)}
.step:last-child{border-bottom:1px solid var(--color-divider)}
.step-num{font-family:var(--font-heading);font-size:15px;color:var(--color-accent-700)}
.step h3{font-family:var(--font-heading);font-weight:600;font-size:clamp(20px,2.1vw,30px);line-height:1.25;margin-bottom:8px}
.step p{font-size:clamp(16px,1.15vw,18px);line-height:1.55;color:var(--color-text-78);max-width:52ch}
@media (min-width:900px){.step{grid-template-columns:110px minmax(0,1fr);gap:32px}}

/* ---------- cases: plain list of situations ------------------------------- */
.cases{display:grid;gap:0;margin-top:clamp(26px,3.5vw,40px)}
.case{padding:20px 0;border-top:1px solid var(--color-divider);font-family:var(--font-heading);font-size:clamp(18px,1.7vw,22px);line-height:1.35}
.case:last-child{border-bottom:1px solid var(--color-divider)}
@media (min-width:820px){
  .cases{grid-template-columns:repeat(2,1fr);gap:0 clamp(28px,4vw,56px)}
  .case{border-bottom:1px solid var(--color-divider)}
}

/* ---------- faq ----------------------------------------------------------- */
.faq{margin-top:clamp(30px,4vw,46px);border-top:1px solid var(--color-divider)}
.faq details{border-bottom:1px solid var(--color-divider)}
.faq summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:22px 0;cursor:pointer;list-style:none;
  font-family:var(--font-heading);font-size:clamp(19px,1.9vw,24px);line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:13px;height:13px;margin-top:8px;
  border-right:2px solid var(--color-accent-600);border-bottom:2px solid var(--color-accent-600);
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{color:var(--color-accent-700)}
.faq-body{padding:0 0 24px;font-size:16px;line-height:1.6;color:var(--color-text-78);max-width:62ch}
.faq-body p+p,.faq-body p+ul{margin-top:12px}
.faq-body ul{display:flex;flex-direction:column;gap:8px}
.faq-body li{display:flex;gap:10px;align-items:baseline}
.faq-body li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--color-accent-500);flex:none;transform:translateY(-3px)}

/* ---------- form ---------------------------------------------------------- */
.form{display:grid;gap:16px;max-width:620px;margin-top:clamp(28px,4vw,40px)}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:13.5px;font-weight:600;letter-spacing:.01em}
.field .req{color:var(--color-accent-700)}
.field input,.field textarea{
  font-family:var(--font-body);font-size:16px;color:var(--color-text);
  background:var(--color-surface);border:1px solid var(--color-divider);
  border-radius:10px;padding:12px 13px;width:100%;
}
.field textarea{min-height:132px;resize:vertical}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--color-accent-600);outline-offset:1px;border-color:var(--color-accent-600)}
.form-row{display:grid;gap:16px}
@media (min-width:640px){.form-row{grid-template-columns:1fr 1fr}}
.form-note{font-size:13.5px;color:var(--color-text-70);max-width:52ch}
.hp{position:absolute;left:-9999px}

/* ---------- contact detail block ------------------------------------------ */
.contact-grid{display:grid;gap:clamp(28px,4vw,56px);padding-bottom:clamp(40px,6vw,72px)}
@media (min-width:900px){.contact-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}
.contact-aside{display:flex;flex-direction:column;gap:22px}
.contact-aside h2{font-family:var(--font-heading);font-weight:600;font-size:20px}
.contact-aside p,.contact-aside address{font-size:15.5px;line-height:1.6;color:var(--color-text-78);font-style:normal}
.contact-aside a{color:var(--color-accent-700)}

/* ---------- hero: two more sectors under the illustration ---------------- */
.hero-egs{display:flex;flex-direction:column;gap:0;margin-top:14px;border-top:1px solid var(--color-divider)}
.hero-egs li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:11px 0;border-bottom:1px solid var(--color-divider)}
.hero-egs .eg-tick{width:14px;height:14px;flex:none;color:var(--color-accent-600);transform:translateY(2px)}
.hero-egs .eg-org{font-family:var(--font-heading);font-weight:600;font-size:15.5px}
.hero-egs .eg-why{font-size:13px;color:var(--color-text-70)}

/* ---------- a bounded, honest statement of availability ------------------ */
.notice{
  margin-top:clamp(24px,3vw,34px);padding:15px 18px;
  border-left:2px solid var(--color-accent-500);background:var(--color-surface);
  border-radius:0 12px 12px 0;font-size:15px;line-height:1.55;
  color:var(--color-text-78);max-width:64ch;
}
.notice b{color:var(--color-text)}

/* ---------- who built it ------------------------------------------------- */
.creds{padding:clamp(30px,4.5vw,52px) 0;border-top:1px solid var(--color-divider)}
.creds p{font-family:var(--font-heading);font-size:clamp(19px,2vw,25px);line-height:1.4;max-width:38ch;margin-top:14px}

/* ---------- a pointer to another page ------------------------------------ */
.pointer{
  display:inline-flex;align-items:baseline;gap:9px;margin-top:18px;
  font-size:16px;color:var(--color-accent-700);text-decoration:none;
  border-bottom:1px solid var(--color-accent-300);padding-bottom:2px;
}
.pointer:hover{border-bottom-color:var(--color-accent-600)}
.pointer::after{content:"\2192"}

/* a plan that is not something the reader can go and buy */
.plan-foot{font-size:14px;line-height:1.5;color:var(--color-text-70);border-top:1px solid var(--color-divider);padding-top:16px}

/* ==========================================================================
   THE GREEN FIELD — hero band
   One idea, one large visual, and the green carrying a whole section rather
   than trimming a grey one.
   ========================================================================== */
.gfield{background:var(--green-field);color:var(--on-green)}
.gfield .h1,.gfield .h2{color:var(--on-green)}
.gfield .lede{color:var(--on-green-soft);max-width:44ch}
.gfield .kicker{color:var(--on-green-mute)}

.hero-band{padding-block:clamp(48px,6.5vw,124px) clamp(56px,8vw,148px)}
.hero-grid{display:grid;gap:clamp(40px,5vw,96px);align-items:center}
.hero-copy .lede{margin-top:clamp(22px,2vw,34px);max-width:40ch}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(28px,3.5vw,40px)}
.btn-on-green{background:#fff;color:var(--green-field);border-color:#fff}
.btn-on-green:hover{background:var(--on-green-soft);color:var(--green-field)}
.btn-ghost-green{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.btn-ghost-green:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
.hero-note{margin-top:22px;font-size:13px;color:var(--on-green-mute);max-width:46ch}
@media (min-width:940px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,520px)}
}

/* ---------- the device ---------------------------------------------------
   The product, drawn rather than photographed. No rounded blobs, no
   illustration — a plain slab and a real screen. */
.device{
  width:100%;max-width:clamp(300px,26vw,430px);margin-inline:auto;
  background:#081A0D;border-radius:clamp(34px,3vw,44px);padding:clamp(9px,0.8vw,12px);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.07) inset;
}
.device-screen{background:#fff;border-radius:clamp(26px,2.3vw,34px);overflow:hidden;color:var(--color-text);display:flex;flex-direction:column}
.device-bar{display:flex;justify-content:space-between;align-items:center;padding:13px 18px 6px;font:600 11.5px/1 var(--font-body);font-variant-numeric:tabular-nums;color:#0E1A12}
.device-bar i{display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.35;margin-left:3px}
.device-cap{margin-top:26px;text-align:center;font-size:12.5px;color:var(--color-text-70)}
.gfield .device-cap{color:var(--on-green-mute)}
.gfield .device-cap{color:var(--on-green-mute)}

/* incoming verified call */
.scr-call{padding:20px 18px 16px;display:flex;flex-direction:column;gap:9px}
.scr-eyebrow{font:700 10px/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--color-accent-700);display:flex;align-items:center;gap:7px}
.scr-eyebrow svg{width:16px;height:16px}
.scr-org{font-family:var(--font-heading);font-weight:600;font-size:23px;letter-spacing:-.02em;line-height:1.15}
.scr-team{font-size:13.5px;color:var(--color-text-70)}
.scr-reason{font-size:14.5px;line-height:1.45;border-left:2px solid var(--color-accent-500);padding-left:11px;margin-top:5px}
.scr-meta{margin-top:10px;padding-top:14px;border-top:1px solid var(--color-divider);font-size:11.5px;color:var(--color-text-70)}
.scr-keys{display:flex;gap:9px;padding:0 18px 20px}
.scr-key{flex:1;text-align:center;font:600 13.5px/1 var(--font-body);padding:14px 0;border-radius:12px}
.scr-key--no{background:#F0F1EF;color:var(--color-text-70)}
.scr-key--yes{background:var(--color-accent-600);color:#fff}

/* the app's list of verified contacts */
.scr-list{padding:16px 14px 18px;display:flex;flex-direction:column;gap:8px}
.scr-title{font-family:var(--font-heading);font-weight:600;font-size:19px;letter-spacing:-.02em;padding:0 4px 2px}
.scr-sub{font-size:12px;color:var(--color-text-70);padding:0 4px 8px}
.scr-row{display:flex;gap:11px;align-items:center;background:#F6FAF6;border:1px solid var(--color-accent-200);border-radius:13px;padding:11px 12px}
.scr-tick{width:22px;height:22px;flex:none;border-radius:7px;background:var(--color-accent-200);color:var(--color-accent-700);display:grid;place-items:center}
.scr-tick svg{width:13px;height:13px}
.scr-org-sm{font:600 13.5px/1.25 var(--font-body);display:block}
.scr-meta-sm{font-size:11px;line-height:1.35;color:var(--color-text-70);display:block;margin-top:2px}
.scr-foot{margin-top:12px;padding:12px 6px 0;font-size:11px;color:var(--color-text-70);border-top:1px solid var(--color-divider)}

/* ---------- five moments, at scale --------------------------------------- */
.moments{padding-block:clamp(60px,8vw,120px)}
.moments-head{max-width:min(100%,860px);margin-bottom:clamp(34px,4.5vw,58px)}
.moments-head .h2{margin-top:14px}
.moments-grid{display:grid;gap:clamp(36px,5vw,72px);align-items:start}
@media (min-width:940px){
  .moments-grid{grid-template-columns:minmax(0,1fr) minmax(0,380px)}
}
.moment{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 20px;
  align-items:center;padding:clamp(20px,2.4vw,28px) 0;
  border-top:1px solid var(--color-divider);
}
.moment:last-of-type{border-bottom:1px solid var(--color-divider)}
.moment-ico{width:38px;height:38px;grid-row:span 2;color:var(--color-accent-600)}
.moment-label{font:600 11px/1 var(--font-body);letter-spacing:.15em;text-transform:uppercase;color:var(--color-text-70)}
.moment-line{font-family:var(--font-heading);font-weight:500;font-size:clamp(19px,1.9vw,27px);line-height:1.3;letter-spacing:-.018em;margin-top:6px;max-width:30ch}
.moment-num{display:none}
@media (min-width:940px){
  .moment{grid-template-columns:52px minmax(0,1fr);gap:4px 24px}
  .moment-ico{width:46px;height:46px}
}

/* ==========================================================================
   BIG SECTIONS — fewer, taller, one idea each
   ========================================================================== */
.sec{padding-block:clamp(72px,10vw,150px)}
.sec-head{max-width:min(100%,900px)}
.sec-head .h2{margin-top:16px}
.sec-head .lede{margin-top:20px}
.sec-split{display:grid;gap:clamp(44px,6vw,86px);align-items:center;margin-top:clamp(44px,5vw,72px)}
@media (min-width:980px){
  .sec-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .sec-split--wide{grid-template-columns:minmax(0,1fr) minmax(0,360px)}
}
.centred{text-align:center;margin-inline:auto}
.centred .lede{margin-inline:auto}
.centred .hero-actions{justify-content:center}

/* ---------- browser frame ------------------------------------------------ */
.device-wrap{margin:0;max-width:100%;min-width:0}
/* A dashboard is wide. Below ~560px it scrolls inside its own box rather than
   forcing the page wider — the standard treatment for wide content. */
.browser-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;
  border-radius:14px;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.browser{
  min-width:520px;
  border-radius:14px;overflow:hidden;background:#0B1929;
  box-shadow:0 50px 100px -45px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.10);
}
.browser-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#0A1420;border-bottom:1px solid #16283C}
.browser-dot{width:9px;height:9px;border-radius:50%;background:#24405C}
.browser-url{
  margin-left:10px;flex:1;background:#0E1E2E;border-radius:6px;padding:5px 10px;
  font:500 11px/1 "Outfit",sans-serif;color:#6E8CA8;letter-spacing:.01em;
}

/* ---------- the org portal, rebuilt ------------------------------------- */
.portal{padding:20px 20px 22px;color:#E8F0F8;font-family:"Outfit",sans-serif}
.portal-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.portal-h{font-weight:800;font-size:19px;letter-spacing:-.02em}
.portal-live{font-size:12px;color:#5FCB7C;margin-top:3px;display:flex;align-items:center;gap:6px}
.portal-live b{width:7px;height:7px;border-radius:50%;background:#5FCB7C;display:inline-block}
.portal-btn{font:600 11.5px/1 "Outfit",sans-serif;color:#8FA8C0;border:1px solid #22384E;border-radius:8px;padding:8px 12px}
.portal-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.portal-stat{background:#0E1E2E;border:1px solid #182D42;border-radius:11px;padding:12px 13px}
.portal-stat .k{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#6E8CA8}
.portal-stat .v{font-weight:800;font-size:23px;margin-top:5px;letter-spacing:-.02em}
.portal-stat .v.g{color:#5FCB7C}
.portal-table{border:1px solid #182D42;border-radius:11px;overflow:hidden}
.portal-row{display:grid;grid-template-columns:1.5fr 1.2fr .9fr .8fr;gap:10px;padding:10px 13px;font-size:11.5px;align-items:center}
.portal-row+.portal-row{border-top:1px solid #142639}
.portal-row.head{background:#0E1E2E;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#6E8CA8}
.portal-row .mono{font-variant-numeric:tabular-nums;color:#8FA8C0}
.portal-pill{display:inline-block;font:600 10px/1 "Outfit",sans-serif;padding:4px 8px;border-radius:999px}
.portal-pill.ok{background:rgba(95,203,124,.16);color:#5FCB7C}
.portal-pill.wait{background:rgba(214,168,84,.16);color:#D6A854}

/* ---------- the PWA verify screen, rebuilt ------------------------------- */
.pwa{background:#070D16;color:#E8F0F8;font-family:"Outfit",sans-serif;display:flex;flex-direction:column;min-height:clamp(452px,34vw,560px)}
.pwa-top{display:flex;justify-content:space-between;padding:14px 18px 0;font-size:11px;color:#7C8CA0;font-variant-numeric:tabular-nums}
.pwa-brand{display:flex;align-items:center;gap:7px;padding:14px 18px 14px;font-weight:600;font-size:16px}
.pwa-brand img{height:20px;width:auto}
.pwa-body{padding:0 16px 18px;display:flex;flex-direction:column;gap:11px;flex:1}
.pwa-q{font-size:12.5px;color:#8FA0B4}
.pwa-num{background:#0E1826;border:1px solid #1C2B3D;border-radius:12px;padding:12px 13px;font-size:15px;color:#E8F0F8;font-variant-numeric:tabular-nums}
.pwa-card{background:rgba(74,128,85,.15);border:2px solid #4A8055;border-radius:16px;padding:14px;display:flex;gap:12px;align-items:flex-start}
.pwa-check{width:30px;height:30px;flex:none;border-radius:9px;background:#4A8055;color:#fff;display:grid;place-items:center}
.pwa-check svg{width:17px;height:17px}
.pwa-h{font-weight:800;font-size:14.5px;color:#7FBE8C;line-height:1.25}
.pwa-l1{font-size:11px;color:#8FA0B4;margin-top:3px}
.pwa-l2{font-size:10px;color:#6E7F94;margin-top:2px}
.pwa-note{margin-top:auto;font-size:10.5px;color:#5E6E82;line-height:1.45}
.gfield .device{max-width:clamp(310px,28vw,460px)}

/* a hero with no product screen beside it */
.hero-solo{max-width:min(100%,880px)}
.hero-solo .lede{max-width:52ch}

/* the Verify screen's lower half — recent checks, so a taller screen is
   populated rather than showing a void */
.pwa-sub{margin-top:14px;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#5E6E82}
.pwa-past{display:flex;flex-direction:column;gap:7px;margin-top:8px}
.pwa-past-row{display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:#0C1622;border:1px solid #16253A;border-radius:11px;padding:10px 12px;font-size:11.5px}
.pwa-past-row .ok{color:#7FBE8C;font-weight:600;font-size:10.5px}
.pwa-past-row .no{color:#C08A6A;font-weight:600;font-size:10.5px}