/* Starpeer fax guide — scroll-driven training page.
   Restyled 2026-09-26 onto the VanBelkum Help system: one typeface (Figtree),
   one accent, flat surfaces, alternating white/gray bands, ink hero. Tokens
   mirror vanbelkum-help/site/help.css. Pinned stages sized in svh (stable under
   mobile URL-bar collapse); a 100vh declaration ships first as the legacy fallback. */

:root{
  --ink:#0B1A26; --ink-2:#12283A; --ink-3:#1B3448;
  --fg:#0B1A26; --muted:#5B6B78; --muted-2:#6E7D8A;
  --bg:#FFFFFF; --bg-2:#EEF2F5; --card:#F3F6F9; --line:#DDE3E8; --line-dark:rgba(255,255,255,.14);
  --accent:#1A6FD1; --accent-dark:#12529E;
  --sans:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,monospace;
  --ease:cubic-bezier(.4,0,.2,1);
  --r:6px;
  --container:1216px; --gutter:24px;
  --phone-shadow:0 24px 56px rgba(11,26,38,.22), 0 0 0 1px rgba(11,26,38,.08);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html.motion{ scroll-behavior:auto; }
html.lenis,html.lenis body{ height:auto; }
html.lenis-smooth{ scroll-behavior:auto; }

body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img,svg{ max-width:100%; }
code{ font-family:var(--mono); font-size:.88em; background:var(--bg-2); border:1px solid var(--line); padding:.08em .4em; border-radius:4px; }
em{ font-style:normal; color:var(--accent); }
a{ color:var(--accent); text-decoration:none; transition:color .4s var(--ease); }
a:hover{ color:var(--accent-dark); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.wrap{ width:min(var(--container),calc(100% - 2*var(--gutter))); margin-inline:auto; }

/* Reading progress: a hairline of accent along the top edge. */
.progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:70; background:transparent; pointer-events:none; }
.progress i{ display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:0 50%; background:var(--accent); }

/* ---------- Header: the portal top bar plus a section rail ---------- */
.top{ position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--line); transition:transform .45s var(--ease); }
.top.is-hidden{ transform:translateY(-100%); }
.top__row{ display:grid; grid-template-columns:auto auto 1fr auto; align-items:center; gap:24px; height:72px; }
.top__brand{ display:flex; align-items:center; gap:12px; color:var(--fg); }
.top__brand img{ height:22px; width:auto; }
.top__brand span{ font-size:15px; font-weight:500; color:var(--muted); padding-left:12px; border-left:1px solid var(--line); line-height:1; }
.top__crumb{ margin:0; font-size:14px; color:var(--muted); white-space:nowrap; }
.top__crumb a{ color:var(--muted); }
.top__crumb a:hover{ color:var(--accent); }
.top__crumb span{ color:var(--muted-2); margin:0 8px; }
.top__crumb b{ font-weight:500; color:var(--fg); }
.top__tools{ display:flex; align-items:center; gap:20px; justify-self:end; }
.top__phone{ font-size:14px; font-weight:500; color:var(--fg); white-space:nowrap; }
.top__phone:hover{ color:var(--accent); }
.top__rail{ border-top:1px solid var(--line); }
.top__rail .wrap{ display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; }
.top__rail .wrap::-webkit-scrollbar{ display:none; }
.top__rail a{ padding:0 12px; font-size:13px; font-weight:500; color:var(--muted); line-height:42px; white-space:nowrap; }
.top__rail a:first-child{ padding-left:0; }
.top__rail a:hover{ color:var(--accent); }

/* Buttons: ink-filled pill, or the same pill in white or outlined. Never a shadow. */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 24px; border-radius:999px; font-size:14px; font-weight:600; line-height:1; white-space:nowrap; border:1px solid var(--ink); background:var(--ink); color:#fff; cursor:pointer; transition:background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), opacity .5s var(--ease); }
.btn:hover{ color:#fff; opacity:.82; }
.btn--light{ background:#fff; border-color:#fff; color:var(--ink); }
.btn--light:hover{ color:var(--ink); opacity:.88; }
.btn--ghost{ background:transparent; border-color:rgba(255,255,255,.7); color:#fff; }
.btn--ghost:hover{ background:#fff; color:var(--ink); opacity:1; }

/* ---------- Hero: ink band, headline, two paths, three facts ---------- */
.hero{ position:relative; min-height:clamp(560px,84vh,800px); display:grid; place-items:center; padding:96px 0 110px; background:var(--ink); color:#fff; overflow:clip; }
.hero__inner{ position:relative; z-index:2; text-align:center; width:min(880px,calc(100% - 2*var(--gutter))); }

.kicker{ display:inline-flex; align-items:center; gap:12px; font-size:14px; font-weight:500; color:rgba(255,255,255,.62); margin:0 0 28px; }
.kicker .line{ width:32px; height:1px; background:var(--line-dark); }
.kicker, .kicker > span{ white-space:nowrap; }
@media (max-width:520px){ .kicker{ white-space:normal; flex-wrap:wrap; justify-content:center; } }

h1{ font-size:clamp(2.5rem,6vw,4.5rem); line-height:1.02; letter-spacing:-.02em; font-weight:600; margin:0 0 24px; }
.mask{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.04em; }
.mask .up{ display:block; }
.hero h1 em{ color:#8FC0F5; }
.hero__sub{ font-size:clamp(1.05rem,1.8vw,1.2rem); line-height:1.55; color:rgba(255,255,255,.72); max-width:58ch; margin:0 auto 36px; }

.hero__paths{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:56px; }

.hero__meta{ display:flex; gap:48px; justify-content:center; flex-wrap:wrap; }
.hero__meta div{ display:flex; flex-direction:column; gap:4px; }
.hero__meta b{ font-size:1.5rem; font-weight:600; line-height:1; }
.hero__meta span{ font-size:13px; color:rgba(255,255,255,.62); white-space:nowrap; }

.cue{ position:absolute; bottom:28px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; font-size:12px; color:rgba(255,255,255,.55); }
.cue__rail{ width:1px; height:48px; background:var(--line-dark); position:relative; overflow:hidden; }
.cue__rail i{ position:absolute; inset:0; background:#fff; transform:translateY(-100%); }
html.motion .cue__rail i{ animation:cue 2.1s var(--ease) infinite; }
@keyframes cue{ 0%{ transform:translateY(-100%);} 60%{ transform:translateY(100%);} 100%{ transform:translateY(100%);} }

/* ---------- Section furniture ---------- */
.eyebrow{ font-size:14px; font-weight:500; color:var(--muted); margin:0 0 16px; }
h2{ font-size:clamp(1.75rem,3.4vw,2.875rem); line-height:1.05; letter-spacing:normal; font-weight:600; margin:0 0 40px; max-width:24ch; }
h3{ font-size:1.125rem; line-height:1.25; font-weight:600; margin:0 0 8px; }

/* ---------- Getting started ---------- */
.before{ padding:96px 0; background:var(--bg-2); }
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:28px 26px 30px; }
.card__no{ font-size:13px; font-weight:600; color:var(--accent); display:block; margin-bottom:14px; }
.card p{ color:var(--muted); font-size:15px; margin:0; }
.card p b{ color:var(--fg); font-weight:600; }

/* ---------- Method — pinned stage. Track height is a multiple of svh so the stage never resizes mid-scroll. ---------- */
.method{ position:relative; background:var(--bg); border-top:1px solid var(--line); }
.method--alt{ background:var(--bg-2); }
.method__track{ height:auto; }
.method__stage{ padding:96px 0; }

.stage__grid{ display:grid; grid-template-columns:minmax(200px,.85fr) 1fr 1.15fr; gap:clamp(24px,4vw,64px); align-items:start; }
html.motion .stage__side, html.motion .stage__viz{ position:sticky; top:140px; }
.stage__side h2{ margin-bottom:16px; }
.stage__note{ color:var(--muted); font-size:15px; margin:0 0 24px; max-width:34ch; }

.legend{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.legend li{ display:flex; align-items:center; gap:12px; font-size:14px; color:var(--muted-2); transition:color .35s var(--ease); }
.legend li b{ display:grid; place-items:center; width:24px; height:24px; border-radius:50%; border:1px solid var(--line); background:#fff; font-size:12px; font-weight:600; color:var(--muted); transition:background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease); }
.legend li.is-on{ color:var(--fg); }
.legend li.is-on b{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* Stage visual — the phone screenshot. It already carries its own bezel, so it
   gets a shadow and a rounded clip, nothing more. */
.stage__viz{ display:grid; place-items:center; }
.phone{ margin:0; width:100%; max-width:300px; }
.phone img{ display:block; width:100%; height:auto; border-radius:34px; box-shadow:var(--phone-shadow); will-change:transform,opacity; }
html.motion .stage__viz .phone img{ height:min(calc(100svh - 220px),640px); width:auto; max-width:100%; object-fit:contain; }
.phone figcaption{ margin-top:14px; font-size:13px; line-height:1.5; color:var(--muted); text-align:center; }

/* Steps */
.stage__steps{ position:relative; }
.stage__steps{ display:grid; gap:16px; padding-bottom:20vh; }
html.motion .step{ opacity:.55; transition:border-color .35s var(--ease), opacity .35s var(--ease), box-shadow .35s var(--ease); }
html.motion .step.is-active{ opacity:1; border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.stage__hint{ display:flex; gap:8px; align-items:baseline; margin:0 0 12px; height:20px; font-size:13px; font-weight:500; color:var(--muted); }
.stage__hint b,.stage__hintword{ white-space:nowrap; }
.stage__hint b{ font-weight:600; color:var(--fg); }
.stage__hintword::before{ content:"·"; margin-right:8px; color:var(--muted-2); }
.step{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:28px 28px 30px; }
.method:not(.method--alt) .step{ background:var(--card); }
.step__no{ font-size:13px; font-weight:600; color:var(--accent); display:block; margin-bottom:12px; }
.step p{ color:var(--muted); margin:0; font-size:15.5px; }
.step p b{ color:var(--fg); font-weight:600; }
/* Each step carries its own screenshot for the no-JS and reduced-motion layouts.
   With motion on, the sticky phone shows it instead. */
.step__shot{ display:block; width:min(100%,220px); height:auto; margin:22px auto 0; border-radius:26px; box-shadow:var(--phone-shadow); }
html.motion .step__shot{ display:none; }

/* ---------- Messages ---------- */
.messages{ padding:96px 0; background:var(--bg); border-top:1px solid var(--line); }
.messages__grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(32px,6vw,90px); align-items:center; }
.msg-points{ display:grid; gap:14px; }
.msg-point{ border-top:1px solid var(--line); padding-top:16px; }
.msg-point b{ display:block; font-size:13px; font-weight:600; color:var(--accent); margin-bottom:6px; }
.msg-point p{ margin:0; color:var(--muted); font-size:15.5px; }
.msg-point p b{ display:inline; font:inherit; font-weight:600; color:var(--fg); }
.phone--static{ max-width:280px; justify-self:center; }

/* ---------- Quick reference ---------- */
.reference{ padding:96px 0; background:var(--bg-2); border-top:1px solid var(--line); }
.ref{ margin:0; display:grid; gap:0; border-top:1px solid var(--line); }
.ref__row{ display:grid; grid-template-columns:1fr 1.4fr; gap:24px; padding:16px 0; border-bottom:1px solid var(--line); }
.ref dt{ font-weight:600; }
.ref dd{ margin:0; color:var(--muted); }

/* ---------- Knowledge check ---------- */
.quiz{ padding:96px 0 110px; background:var(--bg); border-top:1px solid var(--line); }
.quiz__list{ margin:0; padding:0 0 0 1.4em; display:grid; gap:10px; max-width:760px; }
.quiz__list li::marker{ color:var(--muted); font-size:14px; font-weight:500; }
.quiz details{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:14px 18px; }
.quiz summary{ cursor:pointer; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center; }
.quiz summary::-webkit-details-marker{ display:none; }
.quiz summary::after{ content:"+"; color:var(--accent); flex:0 0 auto; font-weight:500; }
.quiz details[open] summary::after{ content:"–"; }
.quiz details p{ margin:12px 0 2px; color:var(--muted); font-size:15.5px; }

/* ---------- Footer: the portal footer ---------- */
.foot{ border-top:1px solid var(--line); padding:28px 0; font-size:14px; color:var(--muted); }
.foot .wrap{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.foot span{ white-space:nowrap; }
.foot a{ color:var(--muted); }
.foot a:hover{ color:var(--accent); }
.foot__tm{ flex-basis:100%; font-size:12px; color:var(--muted-2); white-space:normal; margin-top:4px; }

/* Reveal — armed by JS, never by CSS alone. */
html.motion.js-reveal-ready .reveal{ opacity:0; }

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .top__crumb{ display:none; }
  .stage__grid{ grid-template-columns:1fr 1fr; }
  .stage__side{ grid-column:1 / -1; }
  .messages__grid{ grid-template-columns:1fr; }
  .phone--static{ max-width:240px; }
}
@media (max-width:860px){
  .top__row{ height:64px; grid-template-columns:auto 1fr auto; }
  .top__tools .btn{ display:none; }
  .top__rail{ display:none; }
  .cards{ grid-template-columns:1fr; }
  .step{ padding:22px 20px 24px; }
  .ref__row{ grid-template-columns:1fr; gap:4px; padding:14px 0; }
  .hero__meta{ gap:28px; }

  /* Phones do NOT pin. The phone sticks to the top of the viewport and every
     step is a real card in document flow, so nothing can be clipped. */
      html.motion .stage__grid{ display:block; }
  html.motion .stage__side{ position:static; margin-bottom:18px; }
  html.motion .stage__side h2{ font-size:1.7rem; margin-bottom:12px; }
  html.motion .stage__note{ margin-bottom:18px; }

  html.motion .stage__viz{
    position:sticky; top:64px; z-index:3; padding:10px 0 14px; margin-bottom:8px;
    background:linear-gradient(var(--bg) 80%, transparent);
  }
  html.motion .method--alt .stage__viz{ background:linear-gradient(var(--bg-2) 80%, transparent); }
  html.motion .stage__viz .phone{ max-width:none; width:auto; }
  html.motion .stage__viz .phone img{ height:min(40svh,360px); width:auto; border-radius:22px; }
  html.motion .stage__viz .phone figcaption{ display:none; }

  html.motion .legend{
    flex-direction:column; gap:11px; margin:0 0 24px;
    padding:18px 18px; border:1px solid var(--line); border-radius:var(--r); background:#fff;
  }
  html.motion .legend li{ font-size:15px; gap:12px; }
  html.motion .legend li b{ width:26px; height:26px; font-size:12px; flex:0 0 auto; }

  html.motion .stage__steps{ padding-bottom:8vh; }
  .stage__hint{ display:none; }
}

/* ---------- Reduced motion — a real layout, not a stripped one. ----------
   Nothing pins, nothing overlays: every step is a numbered card in document order,
   each with its own screenshot. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .progress,.cue{ display:none; }
  .stage__grid{ grid-template-columns:1fr; gap:32px; }
  .legend,.stage__hint,.stage__viz{ display:none; }
  .stage__steps{ padding-bottom:0; }
}

/* Sign-in figure under the Getting Started cards */
.phone--signin{ max-width:250px; margin:44px auto 0; }

/* ===== Fax guide: landscape portal screenshots in a thin window frame ===== */
.hero__inner{ min-width:0; max-width:100%; }
.kicker{ flex-wrap:wrap; justify-content:center; gap:8px 12px; max-width:100%; }
.stage__grid{ grid-template-columns:minmax(220px,.75fr) 1.9fr; gap:clamp(24px,4vw,56px); align-items:start; }
html.motion .stage__side{ position:sticky; top:140px; }
html.motion .stage__main{ display:block; }
html.motion .stage__main .screen{ position:sticky; top:120px; z-index:3; padding:10px 0 14px; margin-bottom:8px; background:linear-gradient(var(--bg) 82%, transparent); }
html.motion .method--alt .stage__main .screen{ background:linear-gradient(var(--bg-2) 82%, transparent); }
.stage__main{ display:grid; gap:18px; align-content:center; }
.screen{ margin:0; width:100%; }
.screen .frame{ display:block; position:relative; overflow:hidden; border-radius:10px; box-shadow:0 18px 44px rgba(11,26,38,.18), 0 0 0 1px rgba(11,26,38,.10); background:#fff; }
.screen .frame img{ border-radius:0; box-shadow:none; transform-origin:0 0; transition:transform .55s var(--ease); }
.screen img{ display:block; width:100%; height:auto; border-radius:10px; box-shadow:0 18px 44px rgba(11,26,38,.18), 0 0 0 1px rgba(11,26,38,.10); background:#fff; will-change:transform,opacity; }
html.motion .stage__main .screen .frame{ max-height:min(52svh,520px); width:auto; max-width:100%; margin-inline:auto; aspect-ratio:1600/833; }
html.motion .stage__main .screen .frame img{ width:100%; height:100%; object-fit:contain; }
.screen figcaption{ margin-top:12px; font-size:13px; line-height:1.5; color:var(--muted); text-align:center; }
.screen--static{ max-width:640px; justify-self:center; }

.step__shot{ width:100%; border-radius:10px; box-shadow:0 18px 44px rgba(11,26,38,.18), 0 0 0 1px rgba(11,26,38,.10); background:#fff; }

/* Admins band */
.admin{ padding:96px 0; background:var(--bg-2); border-top:1px solid var(--line); }
.admin__grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(32px,6vw,80px); align-items:center; }
.admin__points{ display:grid; gap:14px; }
.admin__point{ border-top:1px solid var(--line); padding-top:16px; }
.admin__point b{ display:block; font-size:13px; font-weight:600; color:var(--accent); margin-bottom:6px; }
.admin__point p{ margin:0; color:var(--muted); font-size:15.5px; }
.admin__point p b{ display:inline; font:inherit; font-weight:600; color:var(--fg); }
.source{ color:var(--muted-2); font-size:13px; max-width:60ch; margin:22px 0 0; }
.help{ margin-top:40px; padding:20px 24px; border:1px solid var(--line); border-radius:var(--r); background:var(--card); }
.help b{ display:block; margin-bottom:6px; }
.help p{ margin:0; color:var(--muted); font-size:15.5px; }

@media (max-width:1080px){ .admin__grid{ grid-template-columns:1fr; } }
@media (max-width:860px){
  html.motion .stage__main{ display:block; }
  html.motion .stage__main .screen{ position:sticky; top:64px; z-index:3; padding:10px 0 14px; margin-bottom:8px; background:linear-gradient(var(--bg) 82%, transparent); }
  html.motion .method--alt .stage__main .screen{ background:linear-gradient(var(--bg-2) 82%, transparent); }
  html.motion .stage__main .screen .frame{ max-height:none; width:100%; aspect-ratio:1600/833; border-radius:8px; }
  html.motion .stage__main .screen .frame img{ width:100%; height:auto; }
  html.motion .stage__main .screen figcaption{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .legend,.stage__hint,.stage__main > .screen{ display:none; } }

/* WebPhone guide additions */
.step__tip{ margin-top:10px; padding:10px 12px; border-left:3px solid var(--accent); background:var(--card); border-radius:4px; font-size:14.5px; }
.step ol{ margin:8px 0 0; padding-left:20px; color:var(--muted); }
.step ol li{ margin:4px 0; }
.step ol li b{ color:var(--fg); }