/* ============================================================================
   ADMISSION PUZZLE — public landing page ("Variation B", zinc 2026-08-03)
   White page, cool light-blue bands, ONE blue. Matches the reference zinc
   approved: 3-column hero (copy | illustration | live cards), full-width rail,
   programme-match cards, promise strip. Only this file styles home.ejs — the
   in-app sheet is style.css.
   Contrast floor 4.5:1 for all text · 44px tap targets · data comes from the
   DB through the template, never from this file.
   ============================================================================ */

:root{
  /* EVIDENCE palette — 2026-08-15 redesign. The public page is predominantly
     WHITE with very pale blue atmosphere; no cream, no beige (handoff §3).
     Blue = pending/actionable · mint = confirmed/verified · navy = trust. */
  --page:#FFFFFF;          /* CARD colour */
  --paper:#FFFFFF;         /* the page canvas — white, gradients do the work */
  --tint:#F7FAFE;          /* ice band                                       */
  --tint-2:#E9F0FF;        /* blue chip / icon tint (action family)          */
  --ox:#079B72;            /* MINT — the "verified" accent                   */
  --ox-d:#07795A;          /* mint as TEXT (5.4:1 on white)                  */
  --ox-t:#E4F8F1;
  --line:#D9E2EF;
  --line-2:#C2D0E4;

  --blue:#175DEB;          /* fills + borders     */
  --blue-d:#124FCB;        /* blue as TEXT        */
  --blue-deep:#0E3F9F;
  --blue-500:#2F66F6;

  --navy:#0B1F3A;          /* headlines           */
  --navy-950:#071A38;      /* deepest trust field */
  --body:#29415F;          /* body text           */
  --mut:#5C6B84;           /* secondary           */

  --green:#07795A;         /* mint as TEXT        */
  --green-fig:#079B72;     /* mint in artwork     */
  --green-t:#E4F8F1;
  --mint-400:#50E3B3;

  --amber:#A65A00;         /* "your check" text   */
  --amber-t:#FFF2D9;

  --sh-sm:0 1px 2px rgba(11,31,58,.05);
  --sh:0 2px 6px rgba(11,31,58,.05), 0 12px 32px rgba(11,31,58,.08);
  --sh-lg:0 24px 64px rgba(11,31,58,.16);
  --r:16px; --r-sm:12px; --r-lg:24px;

  /* handoff §3: the display serif is used ONLY on three marketing headlines. */
  --serif:'DM Serif Display',Georgia,'Times New Roman',serif;
  --font:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}}
body{
  margin:0;background:var(--paper);color:var(--body);
  font:400 16px/1.6 var(--font);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--blue-d);text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:8px}
h1,h2,h3{color:var(--navy);letter-spacing:-.02em;margin:0}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}

/* ---------------------------------------------------------------- header -- */
/* Sticky header. No backdrop-filter: it repaints the whole bar on every scroll frame and
   the page behind it is white anyway, so it bought nothing but jank on a cheap phone. */
.top{background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.top .wrap{display:flex;align-items:center;gap:10px;min-height:72px;flex-wrap:wrap;
  padding-top:8px;padding-bottom:8px}
.brand{display:inline-flex;align-items:center;gap:11px;min-height:44px}
.brand svg{width:34px;height:34px;flex:none}
.brand b{display:block;font-size:17px;font-weight:800;color:var(--navy);line-height:1.15;letter-spacing:-.03em}
.brand i{display:block;font:600 9.5px/1 var(--font);font-style:normal;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut);margin-top:3px;white-space:nowrap}
.nav{display:flex;gap:2px;margin-left:22px;margin-right:auto}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 13px;border-radius:10px;
  font-size:14px;font-weight:600;color:var(--body)}
.nav a:hover{color:var(--navy);background:var(--tint)}
.hb{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
  padding:0 18px;border-radius:999px;font-size:14px;font-weight:700;white-space:nowrap}
.hb:active{transform:translateY(1px)}
.hb-plain{color:var(--body);padding:0 12px;border-radius:10px}
.hb-plain:hover{color:var(--navy)}
.hb-out{border:1.5px solid var(--blue);color:var(--blue-d);background:var(--page)}
.hb-out:hover{background:var(--tint)}
.hb-solid{background:var(--blue);color:#fff;box-shadow:var(--sh-sm)}
.hb-solid:hover{background:var(--blue-d)}
.hb .dot{width:7px;height:7px;border-radius:50%;background:#50E3B3;flex:none}

/* ------------------------------------------------------------------ hero -- */
.hero{position:relative;overflow:hidden;background:transparent}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(640px 300px at 88% -60px, rgba(7,155,114,.10), transparent 70%),
    radial-gradient(520px 260px at -60px 110%, rgba(23,93,235,.07), transparent 70%);
}
/* 52/48 two-column, 88–104px vertical padding (handoff §5.1) */
.hero .wrap{position:relative;display:grid;grid-template-columns:52fr 48fr;
  gap:40px;align-items:center;padding-top:88px;padding-bottom:8px}
.hero .wrap.railrow{display:block;padding-top:0;padding-bottom:54px}

.pill{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:5px 16px;border-radius:999px;
  background:var(--tint-2);border:1px solid #C9DAFB;color:var(--blue-d);
  font:700 11.5px/1.4 var(--font);letter-spacing:.1em;text-transform:uppercase;margin-bottom:22px}
.pill .pico{width:15px;height:15px;flex:none}
/* type-display-xl: 72/0.98/750 desktop → 44/1.02 mobile */
.hero h1{font-size:clamp(44px,5.2vw,72px);line-height:.98;font-weight:800;letter-spacing:-.035em;
  margin-bottom:22px}
/* The approved hero breaks in four: "Your study / abroad journey, / backed by / real answers."
   Letting the blue phrase wrap put "real" on line 3 and "answers." alone on line 4, which is not
   the composition zinc approved. Above the stacking breakpoint the phrase takes its own line. */
.hero h1 span{color:var(--blue)}
@media(min-width:701px){ .hero h1 span{display:block} }
.lede{font-size:18px;line-height:1.6;color:var(--body);max-width:46ch;margin:0 0 30px}

.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;
  padding:0 24px;border-radius:12px;font:700 15px/1 var(--font);cursor:pointer;white-space:nowrap}
.btn .ico{width:18px;height:18px;flex:none}
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 8px 20px rgba(23,93,235,.25)}
.btn-blue:hover{background:var(--blue-d)}
.btn-white{background:var(--page);color:var(--navy);border:1.5px solid var(--line-2)}
.btn-white:hover{border-color:var(--blue);color:var(--blue-d)}

/* Proof row: three columns divided by hairlines, exactly as the approved hero shows it. */
.trust{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:20px;max-width:100%}
.trust>*{position:relative;padding-right:22px}
.trust>*:not(:last-child)::after{content:"";position:absolute;right:0;top:2px;bottom:2px;
  width:1px;background:var(--line)}
.seal{display:flex;align-items:flex-start;gap:10px}
.seal .sg{width:26px;height:26px;flex:none;margin-top:1px}
.seal b{display:block;font-size:13.5px;color:var(--navy);line-height:1.25}
.seal span{display:block;font-size:12px;color:var(--mut);line-height:1.35;margin-top:2px}
.tstat{display:flex;align-items:center;gap:10px}
.tstat .ti{width:22px;height:22px;color:var(--green-fig);flex:none}
.tstat b{font-size:20px;font-weight:800;color:var(--navy);line-height:1;font-variant-numeric:tabular-nums}
.tstat span{display:block;font-size:12px;color:var(--mut);line-height:1.25;margin-top:3px}
.noguar{display:flex;align-items:center;gap:8px;margin:16px 0 0;font-size:12.5px;color:var(--mut)}
.noguar svg{width:15px;height:15px;flex:none;color:var(--mut)}
.noguar b{color:var(--navy);font-variant-numeric:tabular-nums}

/* ==========================================================================
   HERO VISUAL — the approved composition (approved-hero-reference.png).
   Open and borderless: no card frame around it. A tilted official letter sits
   over a faint globe and two destination skylines, with drawn flag medallions
   and two confirmation pills floating clear of the paper.
   Everything here is decoration; the letter's aria-label carries the meaning.
   ========================================================================== */
.stage{position:relative;min-height:640px;display:grid;place-items:center}
/* The painterly wash the approved hero sits the artwork in — without it the landmarks read as
   loose line art on white instead of one tinted illustration. */
.stage::before{
  content:"";position:absolute;inset:-12% -20% -6% -20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(52% 46% at 52% 40%, rgba(140,172,222,.20), rgba(140,172,222,0) 72%),
    radial-gradient(60% 34% at 50% 76%, rgba(120,158,216,.16), rgba(120,158,216,0) 74%);
}

/* The atmosphere behind the letter. In the approved hero this is not a hint — it is a full
   lavender-blue illustration filling the right half: a globe, a montage of world landmarks and
   their reflection in water. It has to be BIG and actually visible, or the right side reads as
   empty white space (zinc, 2026-08-15: "does these 2 look the same???"). */
.atmos{position:absolute;inset:-10% -18% -4% -18%;z-index:0;pointer-events:none;
  color:#7FA6DC;opacity:.85;
  -webkit-mask-image:radial-gradient(86% 88% at 50% 48%, #000 62%, transparent 100%);
  mask-image:radial-gradient(86% 88% at 50% 48%, #000 62%, transparent 100%);
}
svg.atmos{width:auto;height:auto;display:block}
.globe{position:absolute;width:104%;max-width:660px;color:#9DBAE6;opacity:.30;z-index:0;
  top:50%;left:50%;transform:translate(-50%,-54%)}
.skyline{position:absolute;bottom:9%;width:52%;color:#93B2E2;opacity:.34;z-index:0}
.skyline svg{width:100%;height:auto}
.sky-l{left:-8%}
.sky-r{right:-8%}

.letter{
  position:relative;z-index:2;width:min(392px,86%);
  background:var(--page);border-radius:20px;padding:46px 32px 30px;
  transform:rotate(-3.2deg);
  box-shadow:0 2px 0 rgba(11,31,58,.05), 0 34px 74px rgba(11,31,58,.20);
  text-align:center;
}
/* The mint/blue rim under the paper — the evidence line, showing through the letter.
   Deliberately a plain gradient bar, NOT filter:blur(): a blurred layer of this size
   forces a GPU pass on every paint, and this page has to open on a cheap Android phone
   on mobile data. Measured cost of the blurred version: repeated multi-second repaints
   in Chrome on this machine. */
.letter::after{
  content:"";position:absolute;left:-9%;right:-9%;bottom:-26px;height:56px;z-index:-1;
  background:
    radial-gradient(closest-side, rgba(23,93,235,.55), rgba(23,93,235,0) 78%) left center/58% 100% no-repeat,
    radial-gradient(closest-side, rgba(7,155,114,.55), rgba(7,155,114,0) 78%) right center/58% 100% no-repeat;
}
/* the tight bright lip on the paper's own bottom edge */
.letter::before{
  content:"";position:absolute;left:6%;right:6%;bottom:-4px;height:6px;z-index:-1;
  border-radius:999px;
  background:linear-gradient(90deg,var(--blue) 0%,#2F9FD8 50%,var(--green-fig) 100%);
  opacity:.95;
}
.rosette{position:absolute;top:-26px;left:50%;transform:translateX(-50%);width:48px;height:56px}
.rosette svg{width:100%;height:100%}
.ltag{display:inline-block;margin-bottom:10px;padding:3px 10px;border-radius:999px;
  background:var(--tint);border:1px solid var(--line);
  font:700 9.5px/1.5 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.ltitle{font-size:36px;line-height:1.02;font-weight:800;letter-spacing:-.035em;color:var(--navy);margin:0 0 14px}
.lbest{font:700 14.5px/1.3 var(--font);color:var(--green);margin-bottom:12px;
  padding-top:12px;border-top:1px solid var(--line)}
.lprog{font:700 16px/1.3 var(--font);color:var(--navy);margin-bottom:3px}
.luni{font-size:13.5px;line-height:1.4;color:var(--body)}
.lintake{font-size:13px;color:var(--mut);margin-top:2px}

/* The three metric items sit on ONE row, icon beside two short lines, exactly as the approved
   hero lays them out. They were three lines deep before, which pushed the seal and the signature
   off the bottom of the paper and made the card read as a form instead of a letter. */
.lfacts{display:flex;justify-content:space-between;gap:10px;margin:16px 0 0;
  padding-top:14px;border-top:1px solid var(--line);text-align:left}
.lfact{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;
  gap:0 6px;align-items:center;flex:1;min-width:0;
  font-size:10px;line-height:1.25;color:var(--mut)}
.lfact svg{grid-row:1 / 3;width:15px;height:15px;color:var(--blue-d)}
.lfact i{display:block;font-style:normal;font-weight:700;font-size:11px;color:var(--navy);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lstatus{margin-top:13px;font-size:11.5px;color:var(--mut)}
.lstatus b{color:var(--green);font-weight:700}
.lsrc{margin-top:8px;font:500 10px/1.5 ui-monospace,Consolas,monospace;color:var(--mut);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lsrc i{font-style:normal;color:var(--green);font-weight:700}
.lfoot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:6px}
.lseal{width:74px;height:74px;flex:none;opacity:1}
.lseal svg{width:100%;height:100%}
.lsig{width:112px;height:32px;flex:none;opacity:.85}
.lsig svg{width:100%;height:100%}

/* destination medallions */
/* Destination medallions. In the approved hero these are large, confident discs sitting well
   clear of the paper — at 52px they read as stray dots, so they are 68px and pushed outward. */
.fl{position:absolute;z-index:3;display:flex;align-items:center;justify-content:center;
  width:68px;height:68px;border-radius:50%;background:var(--page);
  box-shadow:0 10px 28px rgba(11,31,58,.16)}
.fl .flagsvg{border-radius:50%;width:40px;height:40px;object-fit:cover}
.fl-ca{top:2%;right:-1%}
.fl-uk{top:36%;right:-3%}
.fl-au{bottom:16%;right:1%}
.fl-us{top:30%;left:-2%}
.fl-de{bottom:14%;left:4%}

/* the two confirmations, floating clear of the paper */
.fpill{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:8px;
  background:var(--page);border-radius:999px;padding:9px 16px 9px 10px;
  box-shadow:0 8px 24px rgba(11,31,58,.14);
  font:700 12.5px/1 var(--font);color:var(--navy);white-space:nowrap}
.fpill svg{width:18px;height:18px;flex:none}
.fp-docs{left:2%;bottom:6%}
.fp-src{right:2%;bottom:12%}

/* ------------------------------------------------------------- the rail -- */
.railwrap{margin-top:46px;background:var(--page);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh);padding:20px 26px}
.rail{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.rstep{display:flex;align-items:center;gap:11px;position:relative}
.rstep:not(:last-child)::after{content:"";position:absolute;right:-9px;top:50%;width:8px;height:2px;
  background:var(--line-2);border-radius:2px}
.rstep .num{display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;
  border-radius:50%;background:#E9F0FF;color:var(--mut);font:800 13.5px/1 var(--font)}
.rstep b{display:block;font-size:13.5px;color:var(--navy);line-height:1.25}
.rstep span span{display:block;font-size:11.5px;color:var(--mut);line-height:1.3}
.rstep.done .num{background:var(--blue);color:#fff}
.rstep.now .num{background:var(--page);color:var(--blue-d);border:2px solid var(--blue);
  box-shadow:0 0 0 4px var(--tint-2)}
.rstep.now b{color:var(--blue-d)}
.rstep.now span span{color:var(--blue-d);font-weight:600}

/* ------------------------------------------------- top programme matches -- */
.matches{background:var(--tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:62px 0 66px}
.mx-h{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin-bottom:26px}
.mx-h h2{font-size:27px;font-weight:800}
.mx-h p{margin:6px 0 0;font-size:14.5px;color:var(--mut)}
.viewall{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:0 18px;border-radius:11px;background:var(--page);border:1.5px solid var(--line-2);
  font:700 13.5px/1 var(--font);color:var(--navy);white-space:nowrap}
.viewall:hover{border-color:var(--blue);color:var(--blue-d)}
.viewall.wide{width:100%;margin-top:14px}

.mx-grid{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:24px;align-items:start}
.mx-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pcard{background:var(--page);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);overflow:hidden;display:flex;flex-direction:column}
.pban{position:relative;height:96px;display:flex;align-items:center;gap:10px;padding:12px 16px}
.pban.b1{background:linear-gradient(135deg,#E9F0FF 0%,#F7FAFE 90%)}
.pban.b2{background:linear-gradient(135deg,#E4F8F1 0%,#F7FAFE 90%)}
.pban.b3{background:linear-gradient(135deg,#D6E4FF 0%,#F7FAFE 90%)}
.pflag{display:flex;flex:none}
.flagsvg{display:block;border-radius:3px;box-shadow:0 0 0 1px rgba(11,31,58,.14)}
.pcountry{font-weight:800;font-size:14px;color:var(--navy);letter-spacing:-.01em}
.ptag{position:absolute;top:10px;right:10px;background:var(--page);border:1px solid var(--line);
  border-radius:999px;padding:4px 11px;font:700 11px/1.4 var(--font);color:var(--green);box-shadow:var(--sh-sm)}
.pbody{padding:15px 16px 16px;display:flex;flex-direction:column;flex:1}
.pname{font-size:15px;font-weight:800;line-height:1.3;margin-bottom:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pinst{font-size:12.5px;color:var(--mut);margin-bottom:12px}
.pfacts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;margin-top:auto}
.pfacts .k{font:600 9.5px/1 var(--font);letter-spacing:.11em;text-transform:uppercase;
  color:var(--mut);margin-bottom:4px}
.pfacts .v{font:700 12.5px/1.35 var(--font);color:var(--navy)}

.mx-side{display:flex;flex-direction:column;gap:16px}
.sumcard{position:relative;background:var(--page);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh);padding:18px 20px}
.sumcard h3{font-size:14.5px;font-weight:800;margin-bottom:14px}
.demo-tag{position:absolute;top:14px;right:14px;background:#DCE7FB;color:var(--mut);
  border-radius:999px;padding:3px 10px;font:700 9.5px/1.5 var(--font);
  letter-spacing:.08em;text-transform:uppercase}
.ringwrap{display:flex;align-items:center;gap:15px}
.ring{width:84px;height:84px;flex:none}
.ringwrap b{display:block;font-size:14px;color:var(--navy);margin-bottom:3px}
.ringwrap span{font-size:12.5px;color:var(--mut);line-height:1.45}
.budget h3{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.bwhere{background:var(--tint-2);color:var(--blue-deep);border-radius:999px;
  padding:2px 9px;font:700 10px/1.6 var(--font);letter-spacing:.05em;text-transform:uppercase}
.bignum{font:800 30px/1 var(--font);color:var(--navy);letter-spacing:-.02em;margin:2px 0 8px}
.bsub{font-size:12.5px;color:var(--body);line-height:1.55;margin-bottom:12px}

/* -------------------------------------------------------- promise strip -- */
/* handoff §5.3: a dark navy trust band, four proof points, MINT dividers. It is the
   page's first dark surface — the visual promise that the evidence is real. */
.strip{padding:0;background:transparent}
.strip .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  background:linear-gradient(135deg,var(--navy-950) 0%,#0B2451 100%);
  border-radius:var(--r-lg);padding:36px 12px;margin-block:8px 56px;
  box-shadow:0 24px 64px rgba(11,31,58,.18)}
.sitem{display:flex;align-items:flex-start;gap:13px;padding:4px 26px;position:relative;
  background:transparent;border:0;border-radius:0}
/* handoff §5.3: the trust band is divided by MINT rules, not grey ones. */
.sitem:not(:last-child)::after{content:"";position:absolute;right:0;top:2px;bottom:2px;width:1px;
  background:linear-gradient(180deg,transparent,var(--green-fig),transparent);opacity:.55}
.sico{display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;
  border-radius:11px;background:rgba(255,255,255,.10);color:var(--mint-400)}
.sico svg{width:19px;height:19px}
.sitem b{display:block;font-size:14px;color:#fff;line-height:1.3}
.sitem span{display:block;font-size:12.5px;color:#B9CBE8;line-height:1.45;margin-top:3px}
/* one small sourced example, so the band shows a receipt instead of only claiming one */
.sproof{grid-column:1 / -1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:26px 26px 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);
  font-size:12.5px;color:#B9CBE8}
.sproof b{color:#fff;font-weight:700}
.sproof .stag{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
  background:rgba(80,227,179,.16);color:var(--mint-400);font:700 11px/1.5 var(--font)}
.sproof a{color:#fff;text-decoration:underline;text-underline-offset:3px;
  display:inline-flex;align-items:center;min-height:32px}
.sproof a:hover{color:var(--mint-400)}

/* ----------------------------------------------------------------- maria -- */
.maria{padding:76px 0;background:transparent}
.maria .wrap{display:grid;grid-template-columns:56px .88fr 1.12fr;gap:0 40px;align-items:center}
/* the blue identity rail */
.mrail{align-self:stretch;display:flex;flex-direction:column;align-items:center;gap:18px;
  background:linear-gradient(180deg,var(--blue) 0%,var(--blue-deep) 100%);
  border-radius:999px;padding:22px 0;min-height:340px}
.mrail-spark{display:flex;width:22px;height:22px;flex:none}
.mrail-spark svg{width:100%;height:100%}
.mrail-txt{writing-mode:vertical-rl;text-orientation:mixed;
  font:700 11px/1 var(--font);letter-spacing:.22em;text-transform:uppercase;color:#fff}
.mrail-line{flex:1;width:2px;border-radius:2px;background:rgba(255,255,255,.35);min-height:24px}
.mphoto{position:relative}
.mphoto .slot{aspect-ratio:4/5;border-radius:20px;overflow:hidden;background:var(--tint);
  border:1px solid var(--line);box-shadow:var(--sh)}
.mphoto img{width:100%;height:100%;object-fit:cover}
.mono{height:100%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#E4F8F1 0%,#F7FAFE 100%)}
.mono b{display:block;font:800 84px/1 var(--font);color:var(--ox);text-align:center}
.mono span{display:block;text-align:center;font:700 13px/1 var(--font);letter-spacing:.22em;
  text-transform:uppercase;color:var(--ox-d);margin-top:10px}
.mbadge{position:absolute;left:18px;bottom:-18px;right:18px;background:var(--page);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);padding:12px 16px}
.mbadge b{display:block;font-size:14px;color:var(--navy)}
.mbadge span{font-size:12px;color:var(--mut);line-height:1.45}
.kicker{display:inline-block;font:700 11.5px/1 var(--font);letter-spacing:.15em;
  text-transform:uppercase;color:var(--ox-d);margin-bottom:14px}
.maria h2{font-family:var(--serif);font-size:clamp(30px,3.6vw,44px);font-weight:400;line-height:1.08;letter-spacing:-.015em;margin-bottom:14px}
.maria .lede{margin-bottom:22px}
.mquote{margin:0 0 22px;padding:14px 18px;border-left:3px solid var(--ox);
  background:var(--tint);border-radius:0 12px 12px 0;font-size:15px;color:var(--navy);line-height:1.6}
.mquote cite{display:block;margin-top:8px;font:600 12px/1 var(--font);font-style:normal;color:var(--mut)}
.stories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:24px}
.story{background:var(--tint);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.story .k{font:700 10px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ox-d);margin-bottom:7px}
.story p{margin:0;font-size:12.5px;line-height:1.5;color:var(--body)}

/* -------------------------------------------------------------- sections -- */
.sec{padding:72px 0;background:transparent}
.sec.tint{background:var(--tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-h{max-width:640px;margin-bottom:36px}
.sec-h h2{font-size:28px;font-weight:800;line-height:1.15;margin:0 0 12px}
.sec-h p{margin:0;font-size:15px;color:var(--body)}

/* ---- how it works: one connected evidence journey (handoff §5.5) ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;
  list-style:none;margin:0;padding:0;position:relative}
.step{position:relative;background:transparent;border:0;border-radius:0;padding:0;text-align:center}
/* the line between the nodes: blue while evidence is in progress, mint once confirmed */
.step:not(:last-child)::before{
  content:"";position:absolute;top:35px;left:calc(50% + 42px);right:calc(-50% + 42px);height:2px;
  background:var(--blue);border-radius:2px;
}
.step.done:not(:last-child)::before{background:var(--green-fig)}
.step:nth-child(2)::before{background:linear-gradient(90deg,var(--blue),var(--green-fig))}
.snode{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:70px;height:70px;margin-bottom:16px;border-radius:50%;
  background:var(--page);border:2px solid var(--blue);color:var(--blue);
  box-shadow:0 0 0 6px rgba(23,93,235,.08)}
.snode svg{width:28px;height:28px}
.step.done .snode{border-color:var(--green-fig);color:var(--green-fig);box-shadow:0 0 0 6px rgba(7,155,114,.10)}
.snode .sn{position:absolute;top:-4px;left:-4px;display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;background:var(--blue);color:#fff;
  font:800 12px/1 var(--font);font-style:normal}
.step.done .snode .sn{background:var(--green-fig)}
.step h3{font-size:15px;margin-bottom:7px}
.step p{margin:0;font-size:13px;line-height:1.55;color:var(--body)}
.steplegend{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;
  margin:34px 0 0;font-size:12.5px;color:var(--mut)}
.steplegend span{display:inline-flex;align-items:center;gap:8px}
.steplegend b{color:var(--navy);font-weight:700}
.lg{width:22px;height:3px;border-radius:2px;flex:none}
.lg-blue{background:var(--blue)}
.lg-mint{background:var(--green-fig)}

/* ---- why us: an asymmetric grid, not six identical cards (handoff §5.6) ---- */
.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
/* "Every fact carries its source" gets the most space; Zinc gets the dark feature panel. */
.feats>.feat:nth-child(1){grid-column:1 / 3;grid-row:1}
.feats>.feat:nth-child(3){grid-column:3;grid-row:1 / 3}
.feats>.feat:nth-child(2){grid-column:1;grid-row:2}
.feats>.feat:nth-child(4){grid-column:2;grid-row:2}
.feats>.feat:nth-child(5){grid-column:1;grid-row:3}
.feats>.feat:nth-child(6){grid-column:2 / 4;grid-row:3}
/* the receipt inside the big panel — a real catalogue row, printed like the app prints it */
.fsrc{margin-top:16px;background:var(--tint);border:1px solid var(--line);
  border-left:3px solid var(--green-fig);border-radius:0 12px 12px 0;padding:13px 15px}
.fsrc .q{display:block;font-size:13px;line-height:1.5;color:var(--navy);font-weight:600}
.fsrc .a{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;
  font:500 11.5px/1.6 ui-monospace,Consolas,monospace;color:var(--mut)}
.fsrc .a i{font-style:normal;color:var(--green);font-weight:700}
.fsrc .a .tier{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;
  background:var(--green-t);color:var(--green);font:700 10px/1.6 var(--font);letter-spacing:.06em;
  text-transform:uppercase}
.feat{background:var(--page);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-sm);padding:22px}
.feat .fi{display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:12px;background:var(--tint-2);color:var(--blue-d);margin-bottom:14px}
.feat .fi svg{width:20px;height:20px}
/* the big panel gets bigger type, so the grid reads as a hierarchy, not six equal boxes */
.feats>.feat:nth-child(1) h3{font-size:22px;letter-spacing:-.02em}
.feats>.feat:nth-child(1) p{font-size:14.5px;max-width:62ch}
.feat h3{font-size:15px;margin-bottom:7px}
.feat p{margin:0;font-size:13px;line-height:1.55;color:var(--body)}
/* The Zinc card is the one to notice. It went blue on 2026-08-03 because dark navy was an odd
   one-off then — it appeared here and on the closing band and nowhere else. In the 2026-08-15
   system navy is the trust surface everywhere (sidebar, trust band, final CTA), so the handoff's
   "give Zinc the dark feature panel" no longer reads as a stray colour. */
.feat.dark{background:linear-gradient(160deg,var(--navy-950) 0%,#0B2451 100%);border-color:transparent;
  position:relative;overflow:hidden}
.feat.dark::after{content:"";position:absolute;right:-40px;top:-40px;width:170px;height:170px;
  border-radius:50%;background:radial-gradient(circle,rgba(80,227,179,.20),transparent 68%)}
.feat.dark .fi{background:rgba(255,255,255,.18);color:#fff}
.feat.dark h3{color:#fff}
.feat.dark p{color:rgba(255,255,255,.86)}

/* ----------------------------------------------------------------- close -- */
/* Was the second (and last) dark-navy surface on the page — removed with the Zinc card's, so the
   whole landing page now runs on one light system. */
/* ---- final CTA: a deep navy field, oversized document watermark (handoff §5.7) ---- */
.close{position:relative;overflow:hidden;text-align:center;padding:92px 0 84px;
  background:linear-gradient(150deg,var(--navy-950) 0%,#0B2451 52%,#123A72 100%)}
.closemark{position:absolute;right:6%;top:50%;transform:translateY(-50%) rotate(9deg);
  height:132%;width:auto;color:#fff;opacity:.055;pointer-events:none}
.close .wrap{position:relative}
.closespark{display:inline-flex;width:34px;height:34px;margin-bottom:14px}
.closespark svg{width:100%;height:100%}
.close h2{color:#fff;font-family:var(--serif);font-size:clamp(34px,4.6vw,58px);line-height:1.02;font-weight:400;letter-spacing:-.01em;
  letter-spacing:-.03em;margin-bottom:14px}
.close p{color:#C7D9F5;font-size:16px;max-width:52ch;margin:0 auto 28px}
.close .btn-blue{background:#fff;color:var(--blue-d);box-shadow:0 10px 26px rgba(0,0,0,.22)}
.close .btn-blue:hover{background:#E9F0FF}
.close .btn-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.close .btn-white:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.reassure{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;
  margin:6px 0 0;font-size:13px;color:#B9CBE8}
.reassure span{display:inline-flex;align-items:center;gap:7px}
.reassure i{font-style:normal;color:var(--mint-400);font-weight:700}

/* ------------------------------------------------------------------ foot -- */
/* ---- footer: white, three columns, opened by a blue→mint evidence rule --- */
.foot{padding:0 0 48px;background:var(--page);border-top:0}
.footrule{position:relative;height:2px;
  background:linear-gradient(90deg,var(--blue) 0%,var(--green-fig) 100%)}
.footdot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:12px;height:12px;border-radius:50%;background:var(--page);
  border:2px solid var(--green-fig)}
.foot .wrap{display:block;padding-top:46px}
.fcols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.5fr;gap:34px}
.fbrand .fb{display:flex;align-items:center;gap:11px}
.fbrand .fb svg{flex:none}
.fsum{margin:14px 0 16px;font-size:13px;line-height:1.65;color:var(--body);max-width:42ch}
.fseal{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:12px;
  background:var(--green-t);color:var(--green)}
.fseal svg{width:19px;height:19px;flex:none;margin-top:1px}
.fseal b{display:block;font-size:12.5px;color:var(--green);line-height:1.35}
.fseal span span,.fseal>span{font-size:11.5px;line-height:1.5;color:var(--body)}
.fcol h2{font:700 11px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut);margin:0 0 6px}
.fcol{display:flex;flex-direction:column}
.fb{font-weight:800;color:var(--navy);font-size:16px;letter-spacing:-.02em}
.fb small{display:block;font:600 9.5px/1 var(--font);letter-spacing:.13em;
  text-transform:uppercase;color:var(--mut);margin-top:4px}
.foot a{display:inline-flex;align-items:center;min-height:44px;   /* touch target floor */
  font-size:13.5px;font-weight:600;color:var(--body)}
.foot a:hover{color:var(--blue-d);text-decoration:underline;text-underline-offset:3px}
.foot .note{margin:0;font-size:12px;line-height:1.65;color:var(--mut)}

/* ------------------------------------------------------------ responsive -- */
@media(max-width:1120px){
  .hero .wrap{gap:28px;padding-top:64px}
  .hero h1{font-size:clamp(38px,5.4vw,52px)}
  .stage{min-height:500px}
  .letter{width:min(320px,90%);padding:40px 24px 30px}
  .ltitle{font-size:31px}
  .fl{width:44px;height:44px}
  .fl .flagsvg{width:26px;height:26px}
  .mx-grid{grid-template-columns:1fr}
  .mx-side{flex-direction:row}
  .mx-side .sumcard{flex:1}
}
@media(max-width:920px){
  .nav{display:none}
  .strip .wrap{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .feats{grid-template-columns:1fr 1fr}
  .maria .wrap{grid-template-columns:1fr;gap:44px}
  .mrail{display:none}                 /* the rail is identity, not information */
  .feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feats>.feat:nth-child(n){grid-column:auto;grid-row:auto}
  .feats>.feat:nth-child(1){grid-column:1 / -1}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
  .step:nth-child(2)::before{display:none}
  .strip .wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 0;padding:28px 8px}
  .sitem:nth-child(2)::after{display:none}
  .stories{grid-template-columns:1fr}
  .mx-cards{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .wrap{padding:0 18px}
  /* mobile: copy first, hero visual second, no non-essential floating items (handoff §5.1) */
  .hero .wrap{grid-template-columns:1fr;padding-top:40px}
  .stage{min-height:0;max-width:420px;margin:26px auto 0;width:100%;padding:26px 0 34px}
  .letter{width:min(300px,86%);padding:38px 22px 28px;transform:rotate(-2deg)}
  .ltitle{font-size:29px}
  .lfacts{gap:9px}
  .fl-uk,.fl-au,.fl-de{display:none}      /* keep two medallions, drop the crowd */
  .fl-ca{top:0;right:0}
  .fl-us{top:22%;left:0}
  .fp-docs{left:0;bottom:0}
  .fp-src{display:none}
  .skyline{width:60%;opacity:.10}
  .trust{gap:16px}
  .trust>*{padding-right:16px}
  .rail{grid-template-columns:1fr;gap:12px}
  .rstep:not(:last-child)::after{display:none}
  .railwrap{margin-top:34px;padding:16px 18px}
  .mx-cards{grid-template-columns:1fr}
  .mx-side{flex-direction:column}
  /* the trust band and the journey both go vertical; the evidence line becomes a rail */
  .strip .wrap{grid-template-columns:1fr;gap:22px;padding:26px 20px}
  .sitem{padding:0}
  .sitem::after{display:none !important}
  .sproof{margin:20px 0 0}
  .steps{grid-template-columns:1fr;gap:0}
  .step{display:grid;grid-template-columns:70px minmax(0,1fr);gap:0 16px;
    text-align:left;padding-bottom:26px}
  .step:not(:last-child)::before{content:"";position:absolute;left:34px;right:auto;
    top:78px;bottom:8px;width:2px;height:auto}
  .snode{margin-bottom:0;grid-row:1 / 3}
  .step h3{align-self:center;margin:0 0 4px;padding-top:14px}
  .step p{grid-column:2}
  .steplegend{justify-content:flex-start;gap:14px;flex-direction:column;align-items:flex-start}
  .feats{grid-template-columns:1fr}
  .feats>.feat:nth-child(n){grid-column:auto;grid-row:auto}
  .fcols{grid-template-columns:1fr;gap:22px}
  .hb-out{display:none}                /* Maria keeps her section + footer links */
  .hero h1{font-size:44px;line-height:1.02;max-width:none}
  .lede{font-size:17px}
  .maria{padding:56px 0}
  .sec{padding:56px 0}
  .mx-h h2,.sec-h h2{font-size:23px}
}

/* ============================================================================
   PRODUCT DEMONSTRATION (handoff §5.2, images/landing/02-demo-before-after.png)
   One continuous transformation instead of four empty boxes: document →
   extraction → confirmation → verified programmes, with the evidence line
   running blue (read by the app) into mint (confirmed by a human).
   Static, not animated: the reference is a diagram a visitor can read at their
   own pace, and an 18s loop meant most visitors never saw the end of it.
   ============================================================================ */
.flow{background:var(--tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:66px 0 72px}
.flow .mx-h,.flow .sec-h{margin-bottom:26px}
.guesspill{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;
  border-radius:999px;background:var(--tint-2);border:1px solid #C9DAFB;color:var(--blue-d);
  font:700 12.5px/1 var(--font);white-space:nowrap}
.guesspill svg{width:16px;height:16px;flex:none}

.fstage{position:relative}

/* ---- the four step headers, with a connector between them ---------------- */
.fsteps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  margin:0 0 18px;padding:0}
.fstep{display:flex;align-items:center;gap:11px;position:relative;padding-right:22px}
.fstep:not(:last-child)::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:2px;
  background:var(--line-2);border-radius:2px}
.fstep:not(:last-child)::before{content:"";position:absolute;right:4px;top:calc(50% - 3px);
  width:0;height:0;border:4px solid transparent;border-left-color:var(--line-2)}
.fstep .fn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;
  border-radius:50%;background:var(--blue);color:#fff;font:800 13px/1 var(--font)}
.fstep b{display:block;font-size:13.5px;color:var(--navy);line-height:1.25}
.fstep i{display:block;font-style:normal;font-size:11.5px;color:var(--mut);line-height:1.3;margin-top:2px}

/* ---- the four panels ----------------------------------------------------- */
.fpanel{position:relative;display:grid;grid-template-columns:.92fr 1.05fr .92fr 1.15fr;gap:14px;
  align-items:stretch}
.fcol{position:relative;background:var(--page);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 14px 14px;display:flex;flex-direction:column;min-width:0}
.fcol-h{display:flex;align-items:center;gap:8px;margin-bottom:11px;padding-bottom:9px;
  border-bottom:1px solid var(--line);
  font:700 12.5px/1.3 var(--font);color:var(--navy)}
.fcol-h i{font-style:normal;font-size:10.5px;color:var(--mut);font-weight:600}
.fdot{width:7px;height:7px;border-radius:50%;background:var(--green-fig);flex:none}
.fpill-b,.fpill-m{margin-left:auto;border-radius:999px;padding:3px 9px;
  font:700 9.5px/1.5 var(--font);letter-spacing:.05em;white-space:nowrap}
.fpill-b{background:var(--tint-2);color:var(--blue-d)}
.fpill-m{background:var(--green-t);color:var(--green)}
.fcol-f{margin:auto 0 0;padding-top:10px;font-size:10.5px;line-height:1.45;color:var(--mut)}

/* 1 — the specimen document */
.fdoc-body{background:var(--tint);border:1px solid var(--line);border-radius:10px;padding:11px}
.fdoc-top{display:flex;gap:11px}
.fmug{width:52px;height:64px;flex:none;border-radius:5px;
  background:linear-gradient(160deg,#D6E4FF,#EAF1FB)}
.flines{flex:1;display:flex;flex-direction:column;gap:7px;justify-content:center;min-width:0}
.flines i{display:block;height:7px;border-radius:4px;background:#DCE7FB}
.flines i:nth-child(1){width:82%}.flines i:nth-child(2){width:64%}
.flines i:nth-child(3){width:74%}.flines i:nth-child(4){width:56%}
.flines i:nth-child(5){width:70%}
.fmrz{margin-top:10px;padding-top:9px;border-top:1px dashed var(--line-2);
  font:500 8px/1.6 ui-monospace,Consolas,monospace;color:var(--mut);word-break:break-all}

/* 2 — extraction: every row ends in a blue evidence node */
.ffrow{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--line)}
.ffrow:last-child{border-bottom:0}
.ffk{flex:none;width:82px;font-size:10px;color:var(--mut);line-height:1.3}
.ffv{flex:1;min-width:0;font-size:11.5px;color:var(--navy);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ffrow .ev-node{width:9px;height:9px;border-radius:50%;flex:none;background:var(--blue);
  box-shadow:0 0 0 3px rgba(23,93,235,.14)}

/* The evidence line itself: each extracted row is joined to its confirmation by a
   segment that runs blue → mint across the 14px gutter. Decoration only — the
   relationship is stated in words in the legend below (handoff §10). */
.ffrow{position:relative}
.ffrow::after{content:"";position:absolute;right:-15px;top:calc(50% - 1px);
  width:15px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--green-fig))}
.fcrow{position:relative}
/* and one mint line carrying the confirmed file on into the catalogue */
.fconf::after{content:"";position:absolute;right:-15px;top:50%;width:15px;height:2px;
  border-radius:2px;background:var(--green-fig)}
.fconf{position:relative}
.fbridge{display:none}

/* 3 — confirmation: the same values, now mint */
.fcrow{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--line)}
.fcrow:last-child{border-bottom:0}
.fcrow b{flex:1;min-width:0;font-size:11.5px;font-weight:600;color:var(--navy);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ftick{display:flex;align-items:center;justify-content:center;width:17px;height:17px;flex:none;
  border-radius:50%;background:var(--green-fig);color:#fff;font:700 10px/1 var(--font)}
.fconf{background:linear-gradient(180deg,var(--green-t) 0%,var(--page) 62%)}

/* 4 — real catalogue rows */
.fmcard{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 9px;
  border:1px solid var(--line);border-radius:11px;padding:10px 11px;margin-bottom:9px}
.fmcard:last-child{margin-bottom:0}
.fmflag{display:flex;align-items:flex-start;padding-top:2px}
.fmflag .flagsvg{border-radius:2px}
.fmtext b{display:block;font-size:12px;line-height:1.3;color:var(--navy);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fmtext i{display:block;font-style:normal;font-size:10.5px;color:var(--mut);margin-top:2px}
.fmmeta{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:4px 14px;
  padding-top:8px;margin-top:2px;border-top:1px solid var(--line)}
.fmmeta span{display:flex;flex-direction:column;font-size:10.5px;color:var(--navy);min-width:0}
.fmmeta i{font-style:normal;font:700 8.5px/1.4 var(--font);letter-spacing:.07em;
  text-transform:uppercase;color:var(--mut)}
.fmsrc{color:var(--green) !important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- the legend the reference closes on ---------------------------------- */
.flegend{display:flex;align-items:center;gap:16px 26px;flex-wrap:wrap;margin-top:16px;
  background:var(--page);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px}
.fl-say{display:flex;align-items:center;gap:11px;flex:1;min-width:min(280px,100%)}
.fl-say svg{width:26px;height:26px;flex:none;color:var(--blue)}
.fl-say b{display:block;font-size:13px;color:var(--navy)}
.fl-say span span,.fl-say>span{font-size:11.5px;line-height:1.45;color:var(--mut)}
.fl-key{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;color:var(--body);white-space:nowrap}
.fl-key i{width:26px;height:3px;border-radius:2px;display:block}
.k-read{background:var(--blue)}
.k-conf{background:var(--green-fig)}
.fl-note{flex:1 0 100%;font-size:11px;color:var(--mut);border-top:1px solid var(--line);padding-top:11px}

@media(max-width:1024px){
  /* handoff §5.2: at 1024 and below the row becomes a vertical sequence */
  .fsteps{grid-template-columns:1fr 1fr}
  .fstep:nth-child(2)::after,.fstep:nth-child(2)::before{display:none}
  .fpanel{grid-template-columns:1fr 1fr}
  .fpanel>.fbridge{display:none}
}
@media(max-width:700px){
  .fsteps{grid-template-columns:1fr;gap:10px}
  .fstep::after,.fstep::before{display:none}
  .fpanel{grid-template-columns:1fr}
  .guesspill{width:100%}
}

/* ---- AA repair, measured 2026-08-15 on the running landing page --------------------------
   White on the artwork mint #079B72 is 3.54:1 — a fail for text of any size. Both places that
   put a glyph on a mint disc (the confirmed tick in the demonstration, the completed step number
   in the how-it-works journey) now use the TEXT mint #07795A, which carries white at 5.40:1.
   The artwork mint stays everywhere it is only a rule, a fill or an icon. */
.step.done .snode .sn{background:var(--green)}
.ftick{background:var(--green)}

/* Footer bottom rule (handoff image 08-footer). No language SELECTOR and no row of social
   icons: the app is English-only and exactly one social account exists. */
.fbot{display:flex;align-items:center;gap:14px 26px;flex-wrap:wrap;
  margin-top:26px;padding-top:18px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--mut)}
.fbot-lang{display:inline-flex;align-items:center;gap:7px;margin-right:auto}
.fbot-lang svg{width:15px;height:15px;flex:none}
.fbot-soc{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 12px;
  border:1px solid var(--line);border-radius:999px;color:var(--blue-d);font-weight:600}
.fbot-soc:hover{border-color:var(--blue);background:var(--tint)}
.fbot-soc svg{width:16px;height:16px;flex:none}
@media(max-width:700px){ .fbot-lang{margin-right:0} .fbot-soc{width:100%;justify-content:center} }

/* At 320px the hero atmosphere and the final-CTA watermark are drawn deliberately wider than the
   screen and are clipped by their own sections — but the ROOT still reported a 17px scrollable
   overflow, which on a phone is a page that jiggles sideways under the thumb. `clip` stops that
   without creating a scroll container, so the sticky header keeps working (`hidden` would break it). */
html{overflow-x:clip}
body{overflow-x:clip}