/* Rapid Alpha — shared stylesheet
   Visual system inherited, not invented. Locked values only.

   Type: Poppins, self-hosted. Five weights, subset to latin, 38KB total —
   served from ./fonts/, so there is still no network call and the site
   renders correctly from a zip on a disk with no connection (skill §10).
   font-display:swap means text paints in the fallback first and never
   blocks. Poppins metrics run small, so sizes are trimmed where set. */

@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;
  src:url("fonts/Poppins-Light.woff2") format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/Poppins-Regular.woff2") format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/Poppins-Medium.woff2") format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/Poppins-SemiBold.woff2") format("woff2")}
/* ExtraBold covers 700–900. Poppins has no 900; ExtraBold is the heaviest
   cut shipped, and at display sizes it is the right weight anyway. */
@font-face{font-family:Poppins;font-style:normal;font-weight:700 900;font-display:swap;
  src:url("fonts/Poppins-ExtraBold.woff2") format("woff2")}

:root{
  --hero:#0b1a2e;
  --strip:#111221;
  --ink:#111221;
  --body:#3a4654;
  --primary:#075A9C;
  --bright:#1987C9;
  --highlight:#4fb0e8;
  --muted:#7f8b96;
  --teal:#0F7E6D;
  --purple:#454193;
  --line:#e3e7ea;
  --wash:#f7f9fb;
  --r:2px;
  --rb:3px;                 /* buttons only */
  --sans:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* 1136 = Figma's 1080px content + the wrap's own 2x28px gutter, so at a
     1440 viewport the CONTENT starts at 180px and is 1080px wide, matching
     Figma exactly. It was 1080px, which put content at 208px and only
     1024px wide — 56px narrower than the design, which is why every prose
     block ran taller than its frame. */
  --w:1136px;
  --narrow:760px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.6;color:var(--body);background:#fff}
img{max-width:100%;display:block}
/* Form controls do not inherit type. Without this the diagnostic's answer
   buttons and the mobile menu render in the browser's UI font, not Poppins. */
button,input,select,textarea{font-family:inherit}
a{color:var(--primary);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--bright)}
strong,b{font-weight:600;color:var(--ink)}
/* Poppins is geometric and round. The -.02em tracking here was set for the
   old grotesque system stack, which needs it; Poppins does not, and at
   display size it closed the counters up. Relaxed, not removed. */
h1,h2,h3,h4{font-weight:900;color:var(--ink);letter-spacing:-.008em;line-height:1.15}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;background:var(--wash);padding:1px 5px;border-radius:var(--r)}

.wrap{max-width:var(--w);margin:0 auto;padding:0 28px}
.narrow{max-width:var(--narrow);margin:0 auto;padding:0 28px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:10px 14px;z-index:99;border:1px solid var(--primary)}

/* ---------- header ---------- */
.hdr{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:50}
.hdr .wrap{display:flex;align-items:center;gap:22px;height:65px}  /* 65 + 1px rule = Figma's 66 */
.brand{flex:none;display:block;line-height:0}
/* Wide lockup, 500x80 source. Height-driven so the header rhythm is set by
   the bar, not the asset; width:auto keeps the 6.25:1 ratio. */
.brand img{height:26px;width:auto}
.nav{display:flex;align-items:center;gap:22px;margin-left:8px;flex:1}
.nav a{font-size:15px;font-weight:500;color:var(--body);text-decoration:none}
.nav a:hover,.nav a[aria-current=page]{color:var(--primary)}
.nav details{position:relative}
.nav summary{font-size:15px;font-weight:500;color:var(--body);cursor:pointer;list-style:none;display:flex;align-items:center;gap:5px}
.nav summary::-webkit-details-marker{display:none}
.nav summary:hover{color:var(--primary)}
.nav summary::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px}
.nav details[open] summary::after{transform:rotate(-135deg);margin-top:2px}
.disc{position:absolute;top:30px;left:-14px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:8px;min-width:230px;box-shadow:0 6px 24px rgba(11,26,46,.1)}
.disc a{display:block;padding:9px 12px;font-size:15px}
.disc a:hover{background:var(--wash)}
.disc a[aria-current=page]{color:var(--primary);background:var(--wash)}
/* Active state for the disclosure itself, so the header always shows where you are. */
.nav details.on>summary{color:var(--primary)}
/* A header CTA for the page you are already on: same box, not a link. */
.hdr .cta .is-here{opacity:.55;cursor:default;pointer-events:none}
.cta{display:flex;gap:10px;flex:none;align-items:center}
.btn,.btn-out{display:inline-block;font-family:var(--sans);font-size:15px;font-weight:600;line-height:18px;border-radius:var(--rb);padding:9px 17px;text-decoration:none;cursor:pointer;border:1px solid var(--primary);transition:background .12s,border-color .12s,color .12s;white-space:nowrap;text-align:center}
.btn{background:var(--primary);color:#fff}
.btn:hover{background:#064a80;border-color:#064a80;color:#fff}
.btn-out{background:transparent;color:var(--primary)}
.btn-out:hover{background:#f2f7fb;color:var(--primary)}
.btn-lg{font-size:16px;line-height:19px;padding:13px 25px}
.lbl-min{display:none}
.menu{display:none;background:none;border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;cursor:pointer;font-size:14px;color:var(--body)}

/* ---------- hero ----------
   Figma "hero": a photograph behind an 80%-opacity --primary tint. The photo
   is a background-image so the navy underneath shows through if the file is
   missing — the hero degrades to the old flat colour rather than to nothing.
   Metrics from Figma: pt82/pb76, 18px between every child, h1 52/60 at
   max-width 830, lede Regular 19/30 at max-width 760, CTA gap 12. */
.hero{position:relative;background:var(--hero);color:#fff;padding:82px 0 76px;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:var(--hero-img,none) center/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--primary);opacity:.8}
.hero .wrap>*+*{margin-top:18px}
.hero h1{color:#fff;font-size:clamp(31px,4.6vw,52px);line-height:1.155;max-width:830px}
.hero p.lede{color:#fff;font-size:19px;line-height:30px;font-weight:400;max-width:760px}
.hero .hl{color:var(--highlight)}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
/* Reversed on the hero: the filled button is white with primary text. */
.hero .cta .btn{background:#fff;border-color:#fff;color:var(--primary)}
.hero .cta .btn:hover{background:#e8f1f8;border-color:#e8f1f8;color:var(--primary)}
.hero .btn-out{color:#fff;border-color:#fff}
.hero .btn-out:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--highlight);font-weight:600;margin-bottom:18px}

/* ---------- positioning strip ---------- */
.strip{background:var(--strip);color:#c9d2dd;padding:34px 0}
.strip p{font-size:19px;max-width:46em;line-height:1.5}
.strip strong{color:#fff}

/* ---------- sections ----------
   Figma bands: py62, the 1080 wrap (NOT the 760 prose measure), 18px between
   every child, h2 ExtraBold 32/37, body Regular 17/27. Bands alternate white
   and --primary down each page; .blue carries the inverted palette. The old
   1px rules between sections are gone — the colour change separates them. */
main{display:block}
section.s{padding:62px 0;background:#fff}
section.s>.wrap>*+*,section.s>.narrow>*+*{margin-top:18px}
section.s h2{font-size:clamp(24px,2.6vw,32px);line-height:1.156;color:var(--primary);margin:0}
section.s p{font-size:17px;line-height:27px;font-weight:400;color:var(--ink);margin:0;max-width:none}
section.s .src{font-size:14px;line-height:22px;color:var(--muted)}

/* Blue band — inverted. */
section.s.blue{background:var(--primary)}
section.s.blue h2,section.s.blue p,section.s.blue strong,section.s.blue b{color:#fff}
section.s.blue a{color:#fff;text-decoration-color:rgba(255,255,255,.5)}
section.s.blue a:hover{color:#fff;text-decoration-color:#fff}
section.s.blue .src{color:#c6d2de}
section.s.blue .lead-p{color:#fff}
/* Stat tiles inherit ink-on-white; on a blue band they were dark-on-blue and
   effectively invisible. Figma's frame omits these tiles entirely (see README)
   but while they are in the copy they have to be legible. */
section.s.blue .stat{border-top-color:rgba(255,255,255,.55)}
section.s.blue .stat b{color:#fff}
section.s.blue .stat span{color:#d7e3ee}

/* Two-column band: fixed 342px heading rail, body fills the rest, 48px gap. */
section.s.split>.wrap{display:flex;gap:48px;align-items:flex-start}
section.s.split .rail{width:342px;flex:none}
section.s.split .rail>*+*{margin-top:18px}
section.s.split .col{flex:1 1 0;min-width:0}
section.s.split .col>*+*{margin-top:18px}
section.s.split>.wrap>*+*{margin-top:0}

.kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);font-weight:600}
.lead-p{font-size:19px;line-height:30px;color:var(--ink);font-weight:700}

/* ---------- ladder ---------- */
.ladder{border-top:1px solid var(--line);margin-top:8px}
.rung{display:grid;grid-template-columns:44px 1fr 190px;gap:22px;padding:26px 0;border-bottom:1px solid var(--line);align-items:start}
.rung .n{font-weight:900;font-size:14px;color:var(--muted);padding-top:3px;letter-spacing:.04em}
.rung h3{font-size:19px;margin-bottom:7px}
.rung p{font-size:16px;margin:0;max-width:none}
.rung .fee{font-size:14px;color:var(--muted);text-align:right;padding-top:4px}
.rung .fee b{display:block;color:var(--ink);font-weight:600;font-size:15px}
.rung.free{background:var(--wash);margin:0 -18px;padding:26px 18px;border-radius:var(--r)}
.rung.grad{border-bottom:none}
.tok{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#a06800;background:#fff6e0;border:1px solid #f0dfb4;padding:2px 7px;border-radius:var(--r)}

/* ---------- misc blocks ---------- */
.callout{background:var(--wash);border-left:3px solid var(--primary);padding:24px 26px;margin:26px 0}
.callout p{margin-bottom:10px}
.callout p:last-child{margin-bottom:0}
.pending{background:#fff6e0;border-left:3px solid #d9a300;padding:18px 22px;margin:24px 0;font-size:15px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.stat{border-top:2px solid var(--primary);padding-top:16px}
.stat b{display:block;font-size:30px;font-weight:900;color:var(--ink);line-height:1.1;letter-spacing:-.02em}
.stat span{font-size:15px;color:var(--muted)}
.src{font-size:14px;color:var(--muted)}
.endcta{background:var(--hero);color:#fff;padding:62px 0}
.endcta .wrap>*+*{margin-top:18px}
.endcta h2{color:#fff;font-size:clamp(24px,2.6vw,32px);line-height:1.156;max-width:640px}
.endcta p{color:#c6d2de;font-size:17px;line-height:27px;font-weight:300;max-width:640px}
.endcta .cta{display:flex;gap:12px;flex-wrap:wrap}
.endcta .cta .btn-out{color:#fff;border-color:#fff}
.endcta .cta .btn-out:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}

/* ---------- footer ---------- */
footer{background:var(--strip);color:#8e99a8;padding:52px 0 30px;font-size:15px}
.fcols h2{font-size:12px;line-height:17px;letter-spacing:.13em;text-transform:uppercase;color:#fff;margin-bottom:9px;font-weight:600}
.fcols{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding-bottom:34px;border-bottom:1px solid #242b3d}
footer h4{color:#fff;font-size:12px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:14px;font-weight:600}
footer ul{list-style:none}
footer li{margin-bottom:9px}
footer li:last-child{margin-bottom:0}
footer a{line-height:24px;font-size:15px}
footer a{color:#b7c1cd;text-decoration:none}
footer a:hover{color:var(--highlight)}
.futil{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:22px;font-size:14px;line-height:22px;color:#69748a}
.futil a{color:#69748a}

@media(max-width:860px){
  .fcols{grid-template-columns:1fr 1fr;gap:26px}
  .two{grid-template-columns:1fr;gap:24px}
  .rung{grid-template-columns:32px 1fr;gap:14px}
  .rung .fee{grid-column:2;text-align:left;padding-top:8px}
}
/* The desktop header lockup — logo, four nav items, two full-label CTAs —
   needs about 920px. The nav used to collapse to the menu only at 720px, so
   between 721 and 900 the header overflowed its own bar by up to 153px. It
   now collapses at 940px, while the 66px height and the full CTA labels
   (which still fit to ~720px) stay. Verified across 16 widths. */
@media(max-width:1080px){
  .hdr .wrap{gap:12px}
  .nav{display:none;position:absolute;top:66px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:0;padding:8px 28px 16px;margin:0}
  .nav.open{display:flex}
  .nav a,.nav summary{padding:12px 0;width:100%;font-size:16px}
  .nav details{width:100%}
  .disc{position:static;border:none;box-shadow:none;padding:0 0 0 14px;min-width:0}
  .menu{display:block;margin-left:auto;margin-right:4px}
}
@media(max-width:720px){
  body{font-size:16px}
  .hdr .wrap{height:60px;gap:10px}
  .nav{top:60px}
  .cta{gap:7px}
  .hdr .cta .btn,.hdr .cta .btn-out{padding:9px 12px;font-size:14px}
  .hdr .cta .lbl-full{display:none}
  .hdr .cta .lbl-min{display:inline}
  .hero{padding:52px 0 50px}
  .hero p.lede{font-size:17px}
  section.s{padding:44px 0}
  .strip p{font-size:17px}
}
@media(max-width:420px){
  .brand img{height:21px}
  .hdr .wrap{padding:0 16px;gap:7px}
  .hdr .cta .btn,.hdr .cta .btn-out{padding:8px 10px;font-size:13px}
  .menu{padding:7px 9px;font-size:13px}
}
/* Under 375px the logo, Menu and both CTAs cannot share the bar — the wide
   logo takes ~57px more than the old text wordmark did. The outline Book
   button yields; it stays in the menu and the footer, so the diagnostic —
   the site's single conversion point — keeps its place in the header. */
@media(max-width:374px){
  .hdr .cta .btn-out{display:none}
  .hdr .wrap{padding:0 12px;gap:6px}
  .brand img{height:19px}
}

/* ── Growth-gap figures ─────────────────────────────────────────────
   A figure inside .narrow would be capped at the 704px prose measure,
   which shrinks a 1000px table to 70% and to 32% on a phone. So the
   figure breaks out of the measure up to the page width, and wide
   content scrolls inside its own box rather than scaling into mush. */
/* Sections now use the full 1080 wrap, so the old breakout that escaped the
   760px prose measure is obsolete — the figure simply fills its column, which
   is what Figma shows (1080 x 540 for the 2:1 charts). */
.fig{margin:0;width:100%}
.fig img,.fig svg{width:100%;height:auto;display:block}
.fig figcaption{font-size:13px;color:var(--muted);line-height:1.55;margin-top:12px;max-width:60em}
.fig .key{display:flex;flex-wrap:wrap;gap:9px 24px;margin:15px 0 0;padding:0;list-style:none;font-size:14.5px}
.fig .key li{display:flex;align-items:center;gap:9px;color:var(--body)}
.fig .key .sw{width:13px;height:13px;border-radius:2px;flex:none}
.fig .key .sw.ln{height:3px}

/* Wide tables keep a legible floor and scroll instead of shrinking. */
.fig.wide .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.fig.wide .scroll img,.fig.wide .scroll svg{min-width:760px}
/* Charts get a lower floor than tables — 600px is enough to read the axis
   labels on a phone and needs one short swipe rather than three. */
.fig.wide.chart .scroll img,.fig.wide.chart .scroll svg{min-width:600px}
/* Start the chart at its right-hand end. The left end is where the two lines
   coincide and carries no information; the gap and its label are on the right,
   so that is what a phone reader should land on. */
@media(max-width:820px){
  .fig.wide.chart .scroll{direction:rtl}
  .fig.wide.chart .scroll img,.fig.wide.chart .scroll svg{direction:ltr}
}
.fig.wide .scroll::-webkit-scrollbar{height:8px}
.fig.wide .scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.fig.wide .hint{display:none;font-size:13px;color:var(--muted);margin-top:9px}
@media(max-width:820px){ .fig.wide .hint{display:block} }

/* Charts are 800px artwork; don't stretch them past a modest 1.1x. */
/* (the old 880px cap is gone — Figma runs charts to the full 1080 measure) */

/* ── Bands and the split rail on narrow screens ──────────────────────
   Derived, not from Figma — the file has Desktop variants only. The band
   colours and the type scale carry down unchanged; only the two-column
   rail and the vertical rhythm change. */
@media(max-width:900px){
  section.s.split>.wrap{display:block}
  section.s.split .rail{width:auto}
  section.s.split .col{margin-top:18px}
}
@media(max-width:720px){
  section.s{padding:44px 0}
  .endcta{padding:44px 0}
  .hero{padding:52px 0 50px}
  .hero p.lede{font-size:17px;line-height:27px}
  section.s>.wrap>*+*,section.s>.narrow>*+*,.hero .wrap>*+*,.endcta .wrap>*+*{margin-top:14px}
  section.s.split .col{margin-top:14px}
  .lead-p{font-size:17px;line-height:27px}
  .hero .cta,.endcta .cta{gap:10px}
  .hero .cta .btn-lg,.endcta .cta .btn-lg{font-size:15px;padding:12px 18px}
}

/* ── Hero photography ────────────────────────────────────────────────
   The hero already composites a --hero-img layer under an 80% primary
   wash, so a page only has to name its image. Four plates rotate across
   the site; the wash keeps type contrast identical whichever one loads,
   and a missing file degrades to the flat navy rather than to nothing. */
.hero--a{--hero-img:url("img/hero-a.jpg")}
.hero--b{--hero-img:url("img/hero-b.jpg")}
.hero--c{--hero-img:url("img/hero-c.jpg")}
.hero--d{--hero-img:url("img/hero-d.jpg")}

/* ── Paired sections: copy one side, artwork the other ────────────
   Sections carrying a figure run as two columns of equal measure with the
   artwork beside the prose rather than stacked beneath it. Every SVG in a
   .duo is drawn on a 512-wide viewBox so it renders close to 1:1 in its
   column and its labels stay legible. .duo--rev flips the order so the
   sides alternate down the page. */
section.s > .wrap.duo{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
/* Qualified with section.s so these outrank `section.s p{margin:0}` (0,1,2)
   further up the file — unqualified .duo__t rules lose to it and every gap in
   a paired column collapses to nothing. */
section.s .duo__t > *:first-child{margin-top:0}
section.s .duo__t > * + *{margin-top:18px}
/* A heading in a half-width column sits against a tighter wrap of text than
   the same heading does at full measure, so 18px reads short here. The extra
   6px restores the optical gap the full-width sections have. */
section.s .duo__t > h2 + *{margin-top:24px}
.duo__f{min-width:0}
.duo--rev .duo__t{order:2}
.duo--rev .duo__f{order:1}
.duo__f .fig figcaption{margin-top:14px}
@media(max-width:900px){
  section.s > .wrap.duo{display:block}
  .duo--rev .duo__t,.duo--rev .duo__f{order:0}
  .duo__f{margin-top:34px}
}
/* A pale wash marks the evidence section without introducing a new band. */
section.s.tint{background:#F2F7FB}

/* Narrow screens: paired columns tighten with everything else. This block has
   to sit after the desktop .duo__t rules — a media query adds no specificity,
   so an equal-weight rule later in the file would win regardless of viewport. */
@media(max-width:820px){
  section.s .duo__t > * + *{margin-top:14px}
  section.s .duo__t > h2 + *{margin-top:20px}
}

/* ── Phase grid ───────────────────────────────────────────────────────
   The four phases read as a comparison, not a sequence of paragraphs, so
   they sit as columns beneath the section's headline row rather than as
   stacked rungs beside it. Qualified with section.s so the type rules beat
   `section.s p{...;margin:0}` further up the file. */
.phases{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:52px}
section.s .phase{border-top:2px solid var(--primary);padding-top:16px}
section.s .phase .n{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
section.s .phase h3{font-size:16px;line-height:1.24;color:var(--ink);margin:9px 0 10px}
section.s .phase p{font-size:13.5px;line-height:21px;color:var(--body);margin:0}
section.s.blue .phase{border-top-color:rgba(255,255,255,.65)}
section.s.blue .phase .n{color:#c6d2de}
section.s.blue .phase h3,section.s.blue .phase p{color:#fff}
@media(max-width:1000px){.phases{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:620px){.phases{grid-template-columns:1fr;gap:24px;margin-top:36px}}

/* A full-width row following a paired row needs its own gap; .phases brings
   its own margin, so this is opt-in rather than a blanket adjacent rule. */
section.s > .wrap.after-duo{margin-top:40px}
@media(max-width:900px){section.s > .wrap.after-duo{margin-top:30px}}

/* ── Mid-page prompt ──────────────────────────────────────────────────
   A blue band that interrupts the read to push one action. Deeper padding
   than a normal section, a reversed button so the CTA is the brightest
   thing on the page, and the qualifying facts as chips rather than prose
   so the eye takes them in without reading a sentence. */
section.s.prompt{padding:78px 0}
section.s.blue .btn{background:#fff;border-color:#fff;color:var(--primary)}
section.s.blue .btn:hover{background:#e8f1f8;border-color:#e8f1f8;color:var(--primary)}
section.s .cta{display:flex;gap:12px;flex-wrap:wrap;flex:0 1 auto;align-items:center}
.prompt .meta{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:0;padding:0}
.prompt .meta li{font-size:12.5px;font-weight:600;letter-spacing:.03em;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.38);
  border-radius:2px;padding:6px 13px}
.prompt .kicker{color:var(--highlight)}
@media(max-width:720px){section.s.prompt{padding:52px 0}}

/* Icon buttons are opt-in via .has-ico — the header buttons swap their label
   through .lbl-full/.lbl-min spans and must stay inline-block, so the flex
   alignment is scoped rather than applied to .btn globally. The glyph uses
   currentColor so it inverts with the button on a blue band. */
.btn.has-ico,.btn-out.has-ico{display:inline-flex;align-items:center;gap:10px}
.btn-ico{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn.has-ico:hover .btn-ico{transform:translateX(2px)}
.btn-ico{transition:transform .12s}
@media(prefers-reduced-motion:reduce){.btn-ico{transition:none}
  .btn.has-ico:hover .btn-ico{transform:none}}

/* ── Product views ────────────────────────────────────────────────────
   EVOS screens run the full 1080 measure and carry their own chrome, so
   they sit outside the prose column in a framed figure rather than in a
   .duo half-column, where the 11px UI labels would be unreadable. */
.shot{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#FAFAFA;
  box-shadow:0 4px 24px rgba(17,18,33,.09)}
.shot svg{display:block;width:100%;height:auto}
section.s > .wrap.shotwrap{margin-top:36px}
@media(max-width:900px){section.s > .wrap.shotwrap{margin-top:26px}}