/* ============================================================================
   FTE TRACKER - the public website, Odoo idiom, palette A.
   Implements design/odoo-2026/05-website.html against the tokens locked in
   design/odoo-2026/04-foundations.html.

   The token block below is the SAME block the application mounts on
   (app-odoo/css/tokens.css). Only the scale tokens differ, and they differ by
   exactly one step of ambition: a headline is read once at two metres, a view
   title a hundred times at half a metre. Radii, chips, badges, fund identities
   and the brand / action split are unchanged.

   Palette A only. There is no palette B here, no palette switcher and no
   aubergine.

   Nothing below this token block writes a raw colour.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. TOKENS - light
   ------------------------------------------------------------------------ */
:root{
  color-scheme: light;

  /* radii */
  --r:4px; --r-sm:3px; --r-lg:6px;

  /* neutral ramp */
  --g100:#f8f9fa; --g200:#e9ecef; --g300:#dee2e6; --g400:#ced4da;
  --g500:#adb5bd; --g600:#6c757d; --g700:#495057; --g900:#212529;

  --bg:var(--g100);
  --view:#ffffff;
  --ink:var(--g900);
  --ink-2:#4b545c;
  --ink-3:#6a7278;
  --line:var(--g300);
  --line-soft:var(--g200);
  --hover:rgba(0,0,0,.045);

  --shadow-1:0 1px 2px rgba(0,0,0,.06);
  --shadow-2:0 6px 20px rgba(0,0,0,.14);
  --shadow-3:0 18px 50px rgba(0,0,0,.18);

  --focus:#1a73c7;
  --focus-on-brand:#ffffff;
  --field-line:#868e94;
  --placeholder:#6a7278;

  /* semantic */
  --ok:#0a6b2d; --warn:#8a5d00; --bad:#b3241f; --info:#0d6d8c; --neutral:#5b6570;
  --ok-bg:#e6f4ea; --warn-bg:#fdf3dd; --bad-bg:#fbe9e7; --info-bg:#e4f1f6; --neutral-bg:#eceff1;

  /* PALETTE A - the FTE Tracker green, with the separate action colour.
     --brand is a FILL ONLY. It is never text and never a 1px boundary. */
  --brand:#16603C; --brand-dk:#0f462b; --brand-ink:#ffffff;
  --action:#11627D; --action-soft:#e3f0f4; --action-ink:#ffffff;

  /* fund identities - the two-letter code is the identity, hue is third */
  --f1:#a3376b; --f1-bg:#fbeaf1; --f1-br:#eec4d6; --f1-ink:#8e2d5c;
  --f2:#1d6fa5; --f2-bg:#e6f0f8; --f2-br:#bcd8ea; --f2-ink:#155a8a;
  --f3:#a8661a; --f3-bg:#fdf1e2; --f3-br:#efd5b0; --f3-ink:#7c4a0f;
  --f4:#6d4fae; --f4-bg:#efeaf9; --f4-br:#d6cbee; --f4-ink:#5b3f96;
  --f5:#7a3b1b; --f5-bg:#f9ece5; --f5-br:#e6cbb9; --f5-ink:#6b3416;
  --f6:#5b6472; --f6-bg:#f0f2f4; --f6-br:#d5dae0; --f6-ink:#4d5663;
  --lv:#5b6472; --lv-bg:#f0f2f4; --lv-br:#d5dae0; --lv-ink:#4d5663;

  /* paper - the printed sheet never inverts */
  --paper:#ffffff; --paper-ink:#111111; --paper-ink-2:#333333;
  --paper-ink-3:#555555; --paper-rule:#767676;

  /* type */
  --font-ui: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
               "Liberation Mono", monospace;

  /* scale - the only tokens that differ from the application */
  --s-h1:40px; --s-h2:28px; --s-h3:17px;
  --s-body:15px; --s-sm:13px; --s-xs:11.5px;
  /* --s-hd is the bar at the top of the page; --s-hd-c is the same bar once
     the reader has scrolled. Both are needed as tokens because the bar is
     FIXED: the body reserves the first, and every anchor lands under the
     second. */
  --s-sec:84px; --s-gut:40px; --s-max:1200px; --s-hd:60px; --s-hd-c:48px;

  /* motion */
  --t-enter:140ms; --t-reveal:220ms; --e-out:cubic-bezier(.2,.7,.3,1);
}

/* ---------------------------------------------------------------------------
   2. TOKENS - dark. One token set, two mountings. If a band has to be
   redrawn to survive dark mode, the band was wrong in light.
   In dark --action is a LIGHT colour, so text on an action fill is
   --action-ink, never white.
   ------------------------------------------------------------------------ */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --g100:#15181a; --g200:#1d2124; --g300:#2c3236; --g400:#3b4348;
    --g500:#6f7a80; --g600:#98a3aa; --g700:#c3cbd0; --g900:#e9edef;
    --bg:#0f1214; --view:#191d20; --ink:#e9edef; --ink-2:#aab4bb; --ink-3:#97a1a7;
    --line:#2c3236; --line-soft:#232829; --hover:rgba(255,255,255,.06);
    --shadow-1:0 1px 2px rgba(0,0,0,.5);
    --shadow-2:0 10px 28px rgba(0,0,0,.6);
    --shadow-3:0 20px 56px rgba(0,0,0,.7);
    --focus:#62b0f0; --field-line:#6b757b; --placeholder:#97a1a7;
    --ok:#5cc98a; --warn:#e0b45a; --bad:#f08a80; --info:#6ec4de; --neutral:#9aa5ac;
    --ok-bg:#12291d; --warn-bg:#2b2412; --bad-bg:#2e1a18; --info-bg:#11282f; --neutral-bg:#21262a;
    --brand:#1b7a4d; --brand-dk:#125836; --brand-ink:#ffffff;
    --action:#6ec4de; --action-soft:#12282f; --action-ink:#0f1214;
    --f1:#e089ae; --f1-bg:#2f1522; --f1-br:#4d2438; --f1-ink:#e089ae;
    --f2:#6cb4e0; --f2-bg:#0f2434; --f2-br:#1d3c53; --f2-ink:#6cb4e0;
    --f3:#dda05a; --f3-bg:#2b1e0d; --f3-br:#4b3618; --f3-ink:#dda05a;
    --f4:#a794db; --f4-bg:#241d38; --f4-br:#3b3057; --f4-ink:#a794db;
    --f5:#d08a63; --f5-bg:#2a1710; --f5-br:#4a2a1c; --f5-ink:#d08a63;
    --f6:#8d98a6; --f6-bg:#1b2027; --f6-br:#333b45; --f6-ink:#8d98a6;
    --lv:#8d98a6; --lv-bg:#1b2027; --lv-br:#333b45; --lv-ink:#8d98a6;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --g100:#15181a; --g200:#1d2124; --g300:#2c3236; --g400:#3b4348;
  --g500:#6f7a80; --g600:#98a3aa; --g700:#c3cbd0; --g900:#e9edef;
  --bg:#0f1214; --view:#191d20; --ink:#e9edef; --ink-2:#aab4bb; --ink-3:#97a1a7;
  --line:#2c3236; --line-soft:#232829; --hover:rgba(255,255,255,.06);
  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 10px 28px rgba(0,0,0,.6);
  --shadow-3:0 20px 56px rgba(0,0,0,.7);
  --focus:#62b0f0; --field-line:#6b757b; --placeholder:#97a1a7;
  --ok:#5cc98a; --warn:#e0b45a; --bad:#f08a80; --info:#6ec4de; --neutral:#9aa5ac;
  --ok-bg:#12291d; --warn-bg:#2b2412; --bad-bg:#2e1a18; --info-bg:#11282f; --neutral-bg:#21262a;
  --brand:#1b7a4d; --brand-dk:#125836; --brand-ink:#ffffff;
  --action:#6ec4de; --action-soft:#12282f; --action-ink:#0f1214;
  --f1:#e089ae; --f1-bg:#2f1522; --f1-br:#4d2438; --f1-ink:#e089ae;
  --f2:#6cb4e0; --f2-bg:#0f2434; --f2-br:#1d3c53; --f2-ink:#6cb4e0;
  --f3:#dda05a; --f3-bg:#2b1e0d; --f3-br:#4b3618; --f3-ink:#dda05a;
  --f4:#a794db; --f4-bg:#241d38; --f4-br:#3b3057; --f4-ink:#a794db;
  --f5:#d08a63; --f5-bg:#2a1710; --f5-br:#4a2a1c; --f5-ink:#d08a63;
  --f6:#8d98a6; --f6-bg:#1b2027; --f6-br:#333b45; --f6-ink:#8d98a6;
  --lv:#8d98a6; --lv-bg:#1b2027; --lv-br:#333b45; --lv-ink:#8d98a6;
}

/* ---------------------------------------------------------------------------
   3. RESET AND BASE
   ------------------------------------------------------------------------ */
*{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* Every in-page anchor lands under the COMPACT bar, because by the time a
     hash is followed the bar is always in its compact state. */
  scroll-padding-top:calc(var(--s-hd-c) + 14px);
  overflow-x:hidden;                 /* no page ever scrolls sideways */
}
body{
  margin:0;
  background:var(--view);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:var(--s-body);
  line-height:1.6;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* The marketing page's bar is FIXED and therefore out of flow, so the first
   screenful is reserved here. The four legal pages carry body.lg and their own
   bar, and are deliberately left alone: their markup is contract markup. */
body:not(.lg){padding-top:var(--s-hd)}

img,svg{display:block; max-width:100%}
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.022em; line-height:1.14}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
a{color:inherit; text-decoration:none}
b,strong{font-weight:650}

:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:2px}
.s-hd :focus-visible,
.s-cta :focus-visible{outline-color:var(--focus-on-brand)}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:fixed; left:16px; top:-100px; z-index:300;
  background:var(--action); color:var(--action-ink);
  padding:11px 18px; border-radius:var(--r); font-weight:600; font-size:14px;
}
.skip:focus{top:12px}

/* ---------------------------------------------------------------------------
   4. STRUCTURE
   ------------------------------------------------------------------------ */
.sw{width:100%; max-width:var(--s-max); margin:0 auto; padding:0 var(--s-gut)}
.s-sec{padding:var(--s-sec) 0}
.s-sec--view{background:var(--view)}
.s-sec--tint{
  background:var(--g100);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.s-eyebrow{
  font-size:var(--s-xs); font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-2); margin:0 0 14px;
}
.s-h1{font-size:var(--s-h1); max-width:17ch}
.s-h2{font-size:var(--s-h2); max-width:22ch}
.s-lead{font-size:17px; color:var(--ink-2); max-width:58ch; margin-top:14px; line-height:1.55}
.s-hdr2{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:32px; margin-bottom:36px; flex-wrap:wrap;
}
.s-note{font-size:var(--s-sm); color:var(--ink-2)}
.s-note a{color:var(--action); text-decoration:underline; text-underline-offset:3px}
/* a file path is not a link, so it is not underlined and not the action
   colour; it is set in the mono face, which is what it is. */
.s-inline{font-family:var(--font-mono); font-size:12.5px; color:var(--ink);
  background:var(--g100); border:1px solid var(--line); border-radius:var(--r-sm); padding:1px 5px}
.s-sec--tint .s-inline{background:var(--view)}
.s-ktitle{
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:14px;
}

/* ---------------------------------------------------------------------------
   5. EXACTLY ONE BUTTON SHAPE ON THE WHOLE PAGE
   ------------------------------------------------------------------------ */
.s-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 20px;
  border-radius:var(--r); border:1px solid var(--action);
  background:var(--action); color:var(--action-ink);
  font-family:inherit; font-size:var(--s-body); font-weight:600;
  cursor:pointer; white-space:nowrap;
  transition:filter var(--t-enter) var(--e-out);
}
.s-btn:hover{filter:brightness(.93)}
.s-btn--sm{height:34px; padding:0 14px; font-size:var(--s-sm)}
.s-btn svg{width:15px; height:15px; flex:none; stroke:currentColor; stroke-width:2;
  fill:none; stroke-linecap:round; stroke-linejoin:round}
.s-link{
  color:var(--action); text-decoration:underline; text-underline-offset:3px;
  font-weight:600; font-size:var(--s-body);
}
.s-acts{display:flex; align-items:center; gap:22px; margin-top:26px; flex-wrap:wrap}
.s-reassure{font-size:var(--s-sm); color:var(--ink-3); margin-top:16px}

.s-onbrand{color:var(--brand-ink)}
.s-onbrand h1,.s-onbrand h2,.s-onbrand h3{color:var(--brand-ink)}
.s-onbrand .s-link{color:var(--brand-ink)}
.s-onbrand .s-reassure{color:rgba(255,255,255,.92)}

/* ---------------------------------------------------------------------------
   6. HEADER - the application's own bar at 60px instead of 46px, and FIXED.

   DEPARTURE from 05-website.html, on the owner's instruction: the bar used to
   be position:sticky. It is now position:fixed, for two reasons. The owner
   asked for a bar that stays on desktop AND on a phone; and sticky was in fact
   broken here, because html and body both carry overflow-x:hidden, which makes
   the body its own scroll container and quietly cancels stickiness. Fixed has
   no such dependency. The body reserves --s-hd at its top, the bar compacts to
   --s-hd-c once scrolled, and html carries scroll-padding-top so no anchor
   ever lands underneath it.
   ------------------------------------------------------------------------ */
.s-hd{
  height:var(--s-hd); background:var(--brand); color:var(--brand-ink);
  display:flex; align-items:center;
  position:fixed; top:0; left:0; right:0; z-index:60;
  transition:height var(--t-reveal) var(--e-out),
             box-shadow var(--t-reveal) var(--e-out);
}
/* scrolled: shorter, and separated from the page by a shadow rather than by
   a rule, because the ground underneath it changes band by band */
.s-hd[data-compact="1"]{height:var(--s-hd-c); box-shadow:var(--shadow-2)}
.s-hd .in{
  display:flex; align-items:center; gap:30px;
  width:100%; max-width:var(--s-max); margin:0 auto; padding:0 var(--s-gut);
}
.s-wm{display:flex; align-items:center; gap:9px; font-size:17px; font-weight:700; letter-spacing:-.015em}
.s-wm .mk{
  width:24px; height:24px; border-radius:var(--r);
  background:var(--brand-ink); color:var(--brand);
  display:grid; place-items:center; font-size:13px; font-weight:800; line-height:1;
  flex:none;
  transition:width var(--t-reveal) var(--e-out), height var(--t-reveal) var(--e-out);
}
.s-hd[data-compact="1"] .s-wm .mk{width:21px; height:21px; font-size:12px}
.s-hd nav{display:flex; gap:24px; font-size:14px; font-weight:500}
.s-hd nav a{opacity:.92}
.s-hd nav a:hover{opacity:1; text-decoration:underline; text-underline-offset:4px}
.s-hd .right{margin-left:auto; display:flex; align-items:center; gap:18px}
.s-hd .demo,
.s-hd .signin{font-size:14px; font-weight:500; text-decoration:underline; text-underline-offset:3px; opacity:.94}
.s-hd .demo:hover,.s-hd .signin:hover{opacity:1}
.s-hd .s-btn--sm{background:var(--brand-ink); border-color:var(--brand-ink); color:var(--brand); font-weight:700}
.s-hd[data-compact="1"] .s-btn--sm{height:30px}

/* the phone's one extra control - a control, not a decoration */
.s-burger{
  width:34px; height:34px; display:none; place-content:center; gap:5px;
  margin-left:auto; flex:none; background:none; border:0; padding:0; cursor:pointer;
}
.s-burger i{display:block; width:19px; height:2px; background:var(--brand-ink); border-radius:1px}
/* The panel hangs off the fixed bar, so it is fixed too - otherwise it would
   sit at the top of the document and open off-screen once scrolled. */
.s-menu{
  display:none; background:var(--brand-dk); color:var(--brand-ink);
  padding:8px var(--s-gut) 16px;
  position:fixed; left:0; right:0; top:var(--s-hd); z-index:59;
  max-height:calc(100vh - var(--s-hd)); overflow-y:auto;
  box-shadow:var(--shadow-2);
}
.s-hd[data-compact="1"] + .s-menu{top:var(--s-hd-c)}
.s-menu[data-open="1"]{display:block}
.s-menu a{
  display:block; padding:12px 0; font-size:15px; font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.s-menu a:last-child{border-bottom:0}

/* ---------------------------------------------------------------------------
   7. THE SCREENSHOT FRAME
   ------------------------------------------------------------------------ */
.shot{
  background:var(--view); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-3); overflow:hidden; min-width:0;
}
.shot > .cap{
  display:flex; align-items:center; gap:8px; min-height:28px; padding:0 11px;
  background:var(--g100); border-bottom:1px solid var(--line);
  font-size:11px; color:var(--ink-2); font-weight:500; letter-spacing:.01em;
}
/* the breadcrumb separator is read, not decoration: --g400 on --g100 is 1.4:1 */
.shot > .cap .sep{color:var(--ink-3)}
.shot > .cap .live{
  margin-left:auto; display:inline-flex; align-items:center; gap:5px;
  font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ok);
}
.shot > .cap .live i{width:6px; height:6px; border-radius:50%; background:var(--ok); display:block; flex:none}
.shotcap{font-size:11px; color:var(--ink-3); margin-top:10px; letter-spacing:.01em}
.shotcap b{color:var(--ink-2); font-weight:600}

/* The screens, two up. Each photograph is taken off the running application
   at a viewport of 1320 pixels and shown at roughly half that, so it is
   sharp on a dense screen and is never drawn larger than it was taken.
   align-items:start keeps two frames of different heights sitting on the
   same line rather than stretching the shorter one. */
.s-shots{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}
.s-shots .shot{margin:0}
.s-shots .shot img{width:100%; height:auto; display:block; background:var(--g100)}
.s-shots--pair{margin-top:28px}
@media (max-width:980px){
  .s-shots{grid-template-columns:1fr; gap:14px}
}

/* ---------------------------------------------------------------------------
   8. PHOTOGRAPH SLOTS - the page is complete and shippable with all five empty
   ------------------------------------------------------------------------ */
.pslot{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--g200);
}
.pslot img{width:100%; height:100%; object-fit:cover; display:block}
.pslot.r41{aspect-ratio:4/1}
.pslot.r32{aspect-ratio:3/2}
.pslot.r45{aspect-ratio:4/5}
.pslot.bleed{border-radius:0; border-left:0; border-right:0; border-top:0}

/* ---------------------------------------------------------------------------
   9. HERO
   ------------------------------------------------------------------------ */
.s-hero{background:var(--view); padding:74px 0 80px; overflow:hidden; position:relative}
.s-hero .grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  gap:54px; align-items:center;
}
.s-hero .grid > *{min-width:0}

/* The animation's mount point. js/hero-flow.js fills it and css/hero-flow.css
   dresses it; both load after this file and both win. Everything below applies
   only while the element is EMPTY, so the hero is finished with that script
   absent and these rules vanish the instant it puts a child in. */
.hero-flow{min-width:0}
/* The ground and the label are painted without touching display, position or
   size, because hero-flow.css owns the box (it reserves it with an
   aspect-ratio at ID specificity, so the hero never collapses). The label is
   absolutely positioned rather than centred with the box's own alignment, so
   this holds whatever that sheet sets. min-height is the second net, for the
   case where hero-flow.css is missing too. */
.hero-flow:empty{
  position:relative; min-height:340px;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:
    radial-gradient(120% 96% at 100% 0%, var(--action-soft), transparent 62%),
    linear-gradient(180deg, var(--g100), var(--view));
  box-shadow:var(--shadow-1);
}
.hero-flow:empty::before{
  content:"Post \00a0\00b7\00a0 Approve \00a0\00b7\00a0 Sign \00a0\00b7\00a0 Print";
  position:absolute; inset:0; display:grid; place-items:center; padding:0 20px;
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); text-align:center;
}

/* ---------------------------------------------------------------------------
   10. STANDARDS BAND
   ------------------------------------------------------------------------ */
.s-std{
  background:var(--g200);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:var(--s-sec) 0;
}
.s-std .grid{display:grid; grid-template-columns:232px minmax(0,1fr); gap:48px; align-items:start}
.s-std .grid > *{min-width:0}
.s-plate{background:var(--brand); color:var(--brand-ink); border-radius:var(--r-lg); padding:20px 22px 16px}
.s-plate .over{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:.92}
.s-plate .num{font-size:92px; line-height:.86; font-weight:800; letter-spacing:-.05em; margin:10px 0 2px}
.s-plate .sub{
  font-size:13px; font-weight:600; opacity:.92;
  border-top:1px solid rgba(255,255,255,.40); padding-top:9px; margin-top:12px;
}
.s-clauses{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  margin-top:30px; border-top:1px solid var(--line);
}
.s-clauses > div{padding:18px 22px 4px 0; border-right:1px solid var(--line); min-width:0}
.s-clauses > div:last-child{border-right:0; padding-right:0}
.s-clauses .rn{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  /* --ink-3 on the --g200 standards ground is 4.13:1; the clause number is
     the citation itself, so it takes --ink-2 and clears AA at 6.6:1 */
  color:var(--ink-2); text-transform:uppercase;
}
.s-clauses .rh{font-size:15px; font-weight:700; margin:6px 0 5px}
.s-clauses .rb{font-size:13.5px; color:var(--ink-2); line-height:1.5}
.s-funders{
  margin-top:28px; padding-top:18px; border-top:1px solid var(--line);
  font-size:14px; color:var(--ink-2); line-height:1.9;
}
.s-funders b{color:var(--ink); font-weight:600}
.s-caveat{
  margin-top:22px; border-left:3px solid var(--ink-3); padding:2px 0 2px 14px;
  font-size:13.5px; color:var(--ink-2); max-width:70ch;
}

/* ---------------------------------------------------------------------------
   11. ALTERNATING PRODUCT BLOCKS
   ------------------------------------------------------------------------ */
.s-alt{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; margin-bottom:64px}
.s-alt > *{min-width:0}
.s-alt:last-child{margin-bottom:0}
.s-alt.flip .txt{order:2}
.s-alt h3{font-size:24px; letter-spacing:-.02em; margin-bottom:12px}
.s-alt p{font-size:15.5px; color:var(--ink-2); line-height:1.6; max-width:46ch}
.s-alt .k{margin-top:18px; display:flex; flex-direction:column; gap:7px; font-size:13.5px; color:var(--ink-2)}
.s-alt .k span{display:flex; gap:9px; align-items:flex-start}
.s-alt .k svg{
  width:15px; height:15px; flex:none; margin-top:3px; color:var(--ok);
  stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round;
}
.s-chiprow{margin-top:22px; display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.s-chiprow .cap{font-size:12px; color:var(--ink-3)}

/* ---------------------------------------------------------------------------
   12. NUMBERED STEPS
   ------------------------------------------------------------------------ */
.s-steps{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); margin-top:30px}
.s-steps > div{padding:20px 22px 0 0; border-right:1px solid var(--line); min-width:0}
.s-steps > div:last-child{border-right:0; padding-right:0}
.s-steps .n{
  font-family:var(--font-mono); font-size:12px; font-weight:500;
  letter-spacing:.1em; color:var(--action);
}
.s-steps h3{font-size:16px; margin:8px 0 6px}
.s-steps p{font-size:13.5px; color:var(--ink-2); line-height:1.5}

/* ---------------------------------------------------------------------------
   13. COMPARISON TABLE
   ------------------------------------------------------------------------ */
/* Two columns, two verdicts. The spreadsheet column recedes - grey ground,
   grey ink, a cross. The FTE Tracker column comes forward - green ground,
   full ink, a check, a brand cap. The GLYPH is the non-colour channel, so the
   table still reads on a photocopy and for a reader who cannot see the
   difference between the two grounds. */
.cmpscroll{max-width:100%}
.s-cmp{width:100%; border-collapse:separate; border-spacing:0; font-size:14px; margin-top:26px}
.s-cmp th,.s-cmp td{text-align:left; vertical-align:top; padding:15px 18px; border-bottom:1px solid var(--line)}
.s-cmp th:first-child,.s-cmp td:first-child{padding-left:0}
.s-cmp thead th{
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2); padding-bottom:11px; border-bottom:2px solid var(--ink);
}
.s-cmp col.c1{width:34%} .s-cmp col.c2{width:31%} .s-cmp col.c3{width:35%}
.s-cmp td.req{font-weight:650; color:var(--ink); padding-right:26px; font-size:14.5px}

/* the spreadsheet column, greyed and receding */
.s-cmp .ss{background:var(--g100); color:var(--ink-3)}
.s-cmp thead th.ss{background:var(--g100); color:var(--ink-3); font-weight:600}
.s-cmp tbody tr:last-child td.ss{border-bottom-left-radius:var(--r-lg); border-bottom-right-radius:var(--r-lg)}

/* the FTE Tracker column, forward and in colour */
.s-cmp .us{
  background:var(--ok-bg); color:var(--ink); font-weight:600;
  border-left:1px solid var(--line); border-right:1px solid var(--line);
}
.s-cmp thead th.us{
  background:var(--brand); color:var(--brand-ink); border-bottom-color:var(--brand);
  border-left-color:var(--brand); border-right-color:var(--brand);
  border-top-left-radius:var(--r-lg); border-top-right-radius:var(--r-lg);
  padding-top:11px;
}
.s-cmp thead th.us .tag{font-size:13px; letter-spacing:.04em}
.s-cmp tbody tr:last-child td.us{
  border-bottom:1px solid var(--line);
  border-bottom-left-radius:var(--r-lg); border-bottom-right-radius:var(--r-lg);
}

.s-cmp .mk{display:flex; align-items:baseline; gap:9px}
.s-cmp .mk .g{font-weight:700; font-size:15px; line-height:1; flex:none; width:1.1em}
.s-cmp td.ss .g{color:var(--ink-3)}
.s-cmp td.us .g{color:var(--ok); font-size:16px}
.s-cmp .cite{
  font-family:var(--font-mono); font-size:11px; color:var(--ink-3);
  display:block; margin-top:5px; font-weight:400;
}

/* what used to be two columns is one honest note and the page's one action */
.s-after{
  margin-top:34px; border-top:1px solid var(--line); padding-top:26px;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:36px 48px; align-items:center;
}
.s-after p{font-size:14px; color:var(--ink-2); line-height:1.6; max-width:62ch}
.s-after .act{text-align:right}
.s-after .act .s-reassure{margin-top:10px; text-align:right}

/* ---------------------------------------------------------------------------
   14. SIX-CELL SECURITY GRID
   ------------------------------------------------------------------------ */
.s-grid6{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; margin-top:30px;
}
.s-grid6 > div{
  background:var(--view); padding:26px 24px 24px; min-width:0;
  position:relative; border-top:3px solid var(--c, var(--brand));
}
.s-sec--tint .s-grid6 > div{background:var(--view)}
.s-grid6 .gl{min-height:34px; display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap}
.s-grid6 h3{font-size:15.5px; margin-bottom:7px}
.s-grid6 p{font-size:13.5px; color:var(--ink-2); line-height:1.55}

/* the coloured tile. Each cell owns one hue through --c and --cbg, so the
   six are six things rather than one thing repeated, and the accent rail at
   the top of the cell carries the same hue. Ink is never set from --c: the
   glyph is, and a glyph is not text. */
.s-grid6 .tile{
  width:34px; height:34px; flex:none; border-radius:var(--r);
  display:grid; place-items:center;
  background:var(--cbg, var(--ok-bg)); color:var(--c, var(--brand));
  border:1px solid currentColor;
}
.s-grid6 .tile svg{width:18px; height:18px}
.s-grid6 .k1{--c:var(--info); --cbg:var(--info-bg)}
.s-grid6 .k2{--c:var(--ok);   --cbg:var(--ok-bg)}
.s-grid6 .k3{--c:var(--f2);   --cbg:var(--f2-bg)}
.s-grid6 .k4{--c:var(--f1);   --cbg:var(--f1-bg)}
.s-grid6 .k5{--c:var(--f4);   --cbg:var(--f4-bg)}
.s-grid6 .k6{--c:var(--f3);   --cbg:var(--f3-bg)}

/* ---------------------------------------------------------------------------
   15. PRICING - one wide panel. Not three columns; with no public number,
   three columns reads as evasion.
   ------------------------------------------------------------------------ */
/* Dressed like the FTE Tracker column of the comparison table, on the owner's
   instruction: a brand cap, a green ground under the included list, green
   checks. There is still no number on the page - the confidence is in the
   treatment, not in a figure that would be wrong for half the readers. */
.s-price{
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--view); overflow:hidden; margin-top:30px;
  box-shadow:var(--shadow-1);
}
.s-price .band{
  background:var(--brand); color:var(--brand-ink);
  padding:11px 34px; font-size:12.5px; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase;
}
.s-price .top{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:0}
.s-price .l{padding:32px 34px; border-right:1px solid var(--line)}
.s-price .r{padding:32px 34px; background:var(--ok-bg)}
.s-price h3{font-size:22px; margin-bottom:12px; max-width:20ch}
.s-price .unit{font-size:15px; color:var(--ink); font-weight:600; max-width:44ch}
.s-price .drv{font-size:13.5px; color:var(--ink-2); margin-top:14px; line-height:1.55; max-width:44ch}
.s-price .r .s-ktitle{color:var(--ink-2)}
.s-price .inc{display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; margin-top:6px}
.s-price .inc span{display:flex; gap:9px; align-items:flex-start; font-size:13.5px; color:var(--ink)}
.s-price .inc svg{
  width:15px; height:15px; flex:none; margin-top:3px; color:var(--ok);
  stroke:currentColor; stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round;
}
.s-price .foot{
  border-top:1px solid var(--line); background:var(--g100); padding:18px 34px;
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
}
.s-price .foot p{font-size:13.5px; color:var(--ink-2)}
.s-price .foot b{color:var(--ink)}

/* ---------------------------------------------------------------------------
   16. ACCORDION
   ------------------------------------------------------------------------ */
.s-qgrid{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:56px; align-items:start}
.s-acc{border-top:1px solid var(--line)}
.s-acc details{border-bottom:1px solid var(--line)}
.s-acc summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:16px;
  padding:18px 0; font-size:16px; font-weight:600;
}
.s-acc summary::-webkit-details-marker{display:none}
.s-acc summary .ch{
  margin-left:auto; width:18px; height:18px; flex:none; color:var(--ink-3);
  stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round;
  transition:transform var(--t-enter) var(--e-out);
}
.s-acc details[open] summary .ch{transform:rotate(180deg)}
.s-acc .ans{padding:0 0 20px; font-size:14.5px; color:var(--ink-2); line-height:1.6; max-width:66ch}
.s-acc .ans a{color:var(--action); text-decoration:underline; text-underline-offset:3px}

/* ---------------------------------------------------------------------------
   17. ABOUT
   ------------------------------------------------------------------------ */
.s-about{display:grid; grid-template-columns:288px minmax(0,1fr); gap:48px; align-items:start}
.s-about .body p{font-size:15.5px; color:var(--ink-2); line-height:1.62; margin-bottom:14px; max-width:56ch}
.s-about .sig{margin-top:20px; padding-top:16px; border-top:1px solid var(--line); font-size:14px}
.s-about .sig b{display:block; font-weight:700; color:var(--ink)}
.s-about .sig span{color:var(--ink-3); font-size:13px}

/* ---------------------------------------------------------------------------
   18. CLOSING BAND - the only full brand fill on the page. That is what
   makes it an ending.
   ------------------------------------------------------------------------ */
.s-cta{
  background:var(--brand); color:var(--brand-ink); padding:76px 0;
  position:relative; isolation:isolate; overflow:hidden;
}
/* THE GROUND. Three layers on one brand fill, none of them a new colour:
   a soft light at the top right, a deepening toward the bottom left, and a
   faint diagonal rule that gives the band a surface instead of a slab. The
   text sits on the brand green throughout, so contrast is the brand's own. */
.s-cta::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(74% 120% at 88% -14%, rgba(255,255,255,.17), transparent 58%),
    linear-gradient(152deg, var(--brand) 0%, var(--brand) 42%, var(--brand-dk) 100%);
}
.s-cta::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:repeating-linear-gradient(
    -45deg, rgba(255,255,255,.055) 0 1px, transparent 1px 13px);
  -webkit-mask-image:linear-gradient(105deg, #000 0%, rgba(0,0,0,.25) 62%, transparent 92%);
          mask-image:linear-gradient(105deg, #000 0%, rgba(0,0,0,.25) 62%, transparent 92%);
}
.s-cta .in{
  display:flex; align-items:center; justify-content:space-between;
  gap:48px; flex-wrap:wrap; position:relative;
}
.s-cta h2{font-size:32px; max-width:20ch}
.s-cta p{font-size:16px; margin-top:14px; color:rgba(255,255,255,.92); max-width:52ch}
.s-cta .s-btn{background:var(--brand-ink); border-color:var(--brand-ink); color:var(--brand)}
.s-cta .s-btn:hover{filter:brightness(.92)}
.s-cta .s-acts{margin-top:0}

/* ---------------------------------------------------------------------------
   19. FOOTER - deliberately not brand-filled, so the closing band keeps
   its one job.
   ------------------------------------------------------------------------ */
.s-ft{
  background:var(--g100); border-top:1px solid var(--line);
  padding:54px 0 28px; font-size:13.5px; color:var(--ink-2);
}
.s-ft .cols{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:36px}
.s-ft .cols > *{min-width:0}
.s-ft h4{
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 12px;
}
.s-ft li{margin-bottom:7px}
.s-ft a:hover{text-decoration:underline; text-underline-offset:3px}
.s-ft .blurb{font-size:13px; color:var(--ink-3); margin-top:12px; max-width:30ch; line-height:1.5}
.s-ft .signin{
  margin-top:38px; padding-top:18px; border-top:1px solid var(--line);
  font-size:13px; color:var(--ink-3); max-width:78ch;
}
.s-ft .signin b{color:var(--ink-2)}
.s-ft .base{
  margin-top:16px; display:flex; gap:20px; flex-wrap:wrap; align-items:center;
  font-size:12.5px; color:var(--ink-3);
}
.s-ft .s-wm{color:var(--ink); font-size:15px}
.s-ft .s-wm .mk{background:var(--brand); color:var(--brand-ink); width:21px; height:21px; font-size:11px}

/* the theme control - a small control, in the footer, where it belongs */
.s-theme{display:inline-flex; align-items:center; gap:0; margin-left:auto; border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; background:var(--view)}
.s-theme button{
  font:inherit; font-size:12px; font-weight:600; padding:5px 11px;
  background:var(--view); color:var(--ink-2); border:0;
  border-right:1px solid var(--line); cursor:pointer;
}
.s-theme button:last-child{border-right:0}
.s-theme button[aria-pressed="true"]{background:var(--action-soft); color:var(--action)}

/* ---------------------------------------------------------------------------
   20. STICKY PHONE BAR - a visitor who has read as far as the comparison
   table should not travel back to the top to act on it.
   ------------------------------------------------------------------------ */
.s-sticky{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  background:var(--view); border-top:1px solid var(--line);
  padding:10px 20px calc(10px + env(safe-area-inset-bottom, 0px));
  box-shadow:0 -4px 14px rgba(0,0,0,.09);
}
.s-sticky .s-btn{width:100%; height:44px}
.s-sticky .sr{font-size:11.5px; color:var(--ink-3); text-align:center; margin-top:7px}
.s-sticky .sr a{color:var(--action); font-weight:600; text-decoration:underline; text-underline-offset:3px}

/* ============================================================================
   21. APPLICATION FRAGMENTS ".a" - the product's own components at shipping
   size. The page does not draw pictures of them; it mounts them.
   ========================================================================= */
.a{font-size:14px; line-height:1.5; color:var(--ink); background:var(--view); font-variant-numeric:tabular-nums}
.a *{box-sizing:border-box}
.a-cp{background:var(--view); border-bottom:1px solid var(--line)}
.a-cp .r1{display:flex; align-items:center; gap:10px; padding:7px 16px 5px; flex-wrap:wrap}
.a-cp .r2{display:flex; align-items:center; gap:8px; padding:0 16px 7px}
.a-bc{display:flex; flex-direction:column; min-width:0}
.a-bc .trail{font-size:12px; color:var(--ink-2)}
.a-bc .cur{font-size:18px; font-weight:600; letter-spacing:-.01em; line-height:1.25}
.a-btn{
  display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px;
  border-radius:var(--r); border:1px solid var(--line);
  background:var(--view); color:var(--ink); font-size:13px; font-weight:500; white-space:nowrap;
}
.a-btn--p{background:var(--action); border-color:var(--action); color:var(--action-ink); font-weight:600}
.a-spacer{margin-left:auto}
.a-period{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--line); border-radius:var(--r);
  height:28px; padding:0 9px; font-size:12.5px; background:var(--view);
}
.a-period b{font-weight:600}
.a-period .cal{width:14px; height:14px; color:var(--ink-2); stroke:currentColor; stroke-width:1.6; fill:none}
.a-asof{font-size:11.5px; color:var(--ink-3); white-space:nowrap}
.a-pager{display:inline-flex; align-items:center; gap:4px; font-size:12.5px; color:var(--ink-2)}
.a-pager .b{
  width:22px; height:22px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--view);
}
.a-pager svg{width:12px; height:12px; stroke:currentColor; stroke-width:1.8; fill:none;
  stroke-linecap:round; stroke-linejoin:round}
.a-vs{display:inline-flex; border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.a-vs span{
  width:28px; height:26px; display:grid; place-items:center;
  background:var(--view); border-right:1px solid var(--line); color:var(--ink-2);
}
.a-vs span:last-child{border-right:0}
.a-vs span.on{background:var(--action-soft); color:var(--action); box-shadow:inset 0 -2px 0 var(--action)}
.a-vs svg{width:14px; height:14px; stroke:currentColor; stroke-width:1.7; fill:none;
  stroke-linecap:round; stroke-linejoin:round}
.a-facet{
  display:inline-flex; align-items:stretch; border:1px solid var(--action);
  border-radius:var(--r-sm); font-size:11.5px; font-weight:600;
  overflow:hidden; line-height:1.6; flex:none;
}
.a-facet .k{display:flex; align-items:center; padding:1px 5px; background:var(--action); color:var(--action-ink)}
.a-facet .v{display:flex; align-items:center; padding:1px 6px; color:var(--action); background:var(--action-soft)}
.a-facet .x{
  display:flex; align-items:center; padding:0 5px;
  background:var(--action-soft); color:var(--action); border-left:1px solid var(--action);
}
.a-facet svg{width:9px; height:9px; stroke:currentColor; stroke-width:2.2; fill:none}
.a-facet .k svg{width:10px; height:10px; stroke-width:1.9}
.a-sel{
  display:inline-flex; align-items:stretch; border:1px solid var(--action);
  border-radius:var(--r-sm); overflow:hidden; font-size:12px; flex:none;
}
.a-sel .n{background:var(--action-soft); color:var(--action); padding:2px 9px; font-weight:700; display:flex; align-items:center}
.a-sel .all{background:var(--action); color:var(--action-ink); padding:2px 9px; font-weight:600; display:flex; align-items:center; gap:5px}
.a-sel .x{background:var(--action-soft); color:var(--action); padding:2px 7px; display:flex; align-items:center}
.a-sel svg{width:11px; height:11px; stroke:currentColor; stroke-width:2; fill:none;
  stroke-linecap:round; stroke-linejoin:round}
.a-tbl{width:100%; border-collapse:collapse; font-size:14px; background:var(--view)}
.a-tbl th{
  font-size:12.5px; font-weight:600; color:var(--ink-2); text-align:left;
  padding:6px 5px; border-bottom:1px solid var(--line); background:var(--view); white-space:nowrap;
}
.a-tbl td{padding:8px 5px; border-bottom:1px solid var(--line-soft); vertical-align:middle; white-space:nowrap}
.a-tbl th:first-child,.a-tbl td:first-child{padding-left:16px}
.a-tbl th:last-child,.a-tbl td:last-child{padding-right:16px}
.a-tbl td.n,.a-tbl th.n{text-align:right; font-variant-numeric:tabular-nums}
.a-tbl tr.grp td{
  background:var(--g100); font-weight:600;
  border-bottom:1px solid var(--line); padding-top:7px; padding-bottom:7px;
}
.a-tbl tr.selrow td{background:var(--action-soft)}
.a-tbl tfoot td{background:var(--g100); font-weight:700; border-top:1px solid var(--ink); border-bottom:0}
.a-check{
  width:14px; height:14px; border:1px solid var(--field-line); border-radius:2px;
  display:grid; place-items:center; background:var(--view);
}
.a-check.on{background:var(--action); border-color:var(--action); color:var(--action-ink)}
.a-check svg{width:10px; height:10px; stroke:currentColor; stroke-width:2.6; fill:none;
  stroke-linecap:round; stroke-linejoin:round}

/* the fund chip - the two-letter code is the identity, hue is the third channel */
.a-fchip{
  display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600;
  padding:0 7px 0 5px; border-radius:var(--r-sm); border:1px solid currentColor;
  line-height:1.6; white-space:nowrap;
}
.a-fchip .cd{font-weight:700; letter-spacing:.03em}
.a-fchip.f1{color:var(--f1-ink); background:var(--f1-bg); border-color:var(--f1-br)}
.a-fchip.f2{color:var(--f2-ink); background:var(--f2-bg); border-color:var(--f2-br)}
.a-fchip.f3{color:var(--f3-ink); background:var(--f3-bg); border-color:var(--f3-br)}
.a-fchip.f4{color:var(--f4-ink); background:var(--f4-bg); border-color:var(--f4-br)}
.a-fchip.f5{color:var(--f5-ink); background:var(--f5-bg); border-color:var(--f5-br)}
.a-fchip.f6{color:var(--f6-ink); background:var(--f6-bg); border-color:var(--f6-br)}
.fsw{
  width:10px; height:10px; border-radius:2px; display:inline-block; flex:none;
  border:1px solid rgba(0,0,0,.28); background-clip:padding-box;
}
.fsw.p1{background-color:var(--f1)}
.fsw.p2{background-color:var(--f2); background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.88) 0 1.2px,transparent 1.2px 3.2px)}
.fsw.p3{background-color:var(--f3); background-image:radial-gradient(rgba(255,255,255,.92) .7px,transparent .9px); background-size:3.2px 3.2px}
.fsw.p4{background-color:var(--f4); background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.88) 0 1.2px,transparent 1.2px 3.2px)}
.fsw.p5{background-color:var(--f5); background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.88) 0 1.2px,transparent 1.2px 3.2px)}
.fsw.p6{background-color:transparent; box-shadow:inset 0 0 0 2.4px var(--f6)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .fsw{border-color:rgba(255,255,255,.35)}
}
:root[data-theme="dark"] .fsw{border-color:rgba(255,255,255,.35)}

/* the status pill - never legible by background fill alone */
.a-pill{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  padding:0 8px; border-radius:999px; border:1px solid currentColor;
  line-height:1.7; white-space:nowrap;
}
.a-pill .mk{flex:none; display:block; width:7px; height:7px; background:currentColor}
.a-pill .mk.sq{border-radius:1px}
.a-pill .mk.tri{
  background:none; width:0; height:0;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-bottom:7px solid currentColor;
}
.a-pill .mk.disc{border-radius:50%}
.a-pill .mk.dia{border-radius:1px; transform:rotate(45deg); width:6px; height:6px}
.a-pill .mk.bar{
  background:none; width:8px; height:7px;
  border-top:2.2px solid currentColor; border-bottom:2.2px solid currentColor;
}
.a-pill.dr{color:var(--neutral); background:var(--neutral-bg); border-color:var(--neutral)}
.a-pill.pe{color:var(--warn); background:var(--warn-bg); border-color:var(--warn)}
.a-pill.ap{color:var(--ok); background:var(--ok-bg); border-color:var(--ok)}
.a-pill.rb{color:var(--bad); background:var(--bad-bg); border-color:var(--bad)}
.a-pill.lk{color:var(--info); background:var(--info-bg); border-color:var(--info)}

/* the variance chip - it states the CORRECTION, not the delta */
.a-diff{
  display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:700;
  padding:0 6px; border-radius:var(--r-sm); border:1px solid currentColor;
  line-height:1.6; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.a-diff .ar{font-size:10px; line-height:1}
.a-diff .al{width:11px; height:11px; stroke:currentColor; stroke-width:2; fill:none;
  stroke-linecap:round; stroke-linejoin:round; flex:none}
.a-diff.b0{color:var(--ok); background:var(--ok-bg); border-color:var(--ok)}
.a-diff.b1{color:var(--neutral); background:var(--neutral-bg); border-color:var(--neutral)}
.a-diff.b2{color:var(--warn); background:var(--warn-bg); border-color:var(--warn)}
.a-diff.b3{color:var(--bad); background:var(--bad-bg); border-color:var(--bad)}

/* the chevron status bar, built with the same geometry as the application */
.a-stages{
  display:flex; align-items:stretch; height:33px; font-size:12.5px;
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--view);
}
.a-stages.wrap{height:auto; flex-wrap:wrap}
.a-stage{
  display:flex; align-items:center; gap:6px; padding:0 14px 0 18px;
  background:var(--g100); color:var(--ink-2); position:relative; white-space:nowrap;
}
.a-stages.wrap .a-stage{padding:5px 12px 5px 14px}
.a-stage:first-child{padding-left:12px}
.a-stage::after{
  content:""; position:absolute; right:-8px; top:0; bottom:0; width:16px; z-index:2;
  background:inherit; transform:skewX(-20deg); border-right:1px solid var(--line);
}
.a-stage:last-child::after{display:none}
.a-stage.done{background:var(--g200); color:var(--ink)}
.a-stage.on{background:var(--action-soft); color:var(--action); font-weight:700}
.a-stage .ring{width:8px; height:8px; border-radius:50%; border:1.6px solid currentColor; flex:none}
.a-stage .disc{width:8px; height:8px; border-radius:50%; background:currentColor; flex:none}
.a-stage svg{width:11px; height:11px; stroke:currentColor; stroke-width:2.4; fill:none;
  stroke-linecap:round; stroke-linejoin:round; flex:none}

/* stat buttons - label above value, always navigation, never an action */
.a-statbtns{display:flex; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--view)}
.a-statbtn{
  display:flex; flex-direction:column; justify-content:center; padding:5px 14px;
  border-right:1px solid var(--line); min-width:88px;
}
.a-statbtn:last-child{border-right:0}
.a-statbtn .v{font-size:13px; font-weight:700; color:var(--action)}
.a-statbtn .k{font-size:11px; color:var(--ink-2)}

/* the printed sheet - paper never inverts */
.a-paper{
  background:var(--paper); color:var(--paper-ink); border:1px solid var(--line);
  padding:14px 16px; font-size:9.5px; line-height:1.45;
}
.a-paper h5{margin:0 0 1px; font-size:11px; font-weight:700; color:var(--paper-ink)}
.a-paper .m{font-size:8.5px; color:#444444}
.a-paper table{width:100%; border-collapse:collapse; margin-top:8px; font-size:9px}
.a-paper th{text-align:left; border-bottom:1.2px solid var(--paper-ink); padding:3px 4px 2px; font-weight:700}
.a-paper td{border-bottom:.75px solid var(--paper-rule); padding:3px 4px}
.a-paper td.n,.a-paper th.n{text-align:right; font-variant-numeric:tabular-nums}
.a-paper .sigbox{
  border:1px solid var(--paper-ink); padding:6px 8px; margin-top:10px;
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.a-paper .sigbox .w{font-family:var(--font-mono); font-size:8px; color:var(--paper-ink-2)}
.a-glyph{stroke:currentColor; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round}

/* the four scenes of the "how it works" frame */
.a-four{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line)}
.a-four > div{background:var(--view); padding:14px; min-width:0}
.a-scene{
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:10px;
}
.a-day{border:1px solid var(--line); border-radius:var(--r); padding:10px 11px; background:var(--view)}
.a-day .dt{font-size:12.5px; color:var(--ink-2)}
.a-day .rows{margin-top:9px; display:flex; flex-direction:column; gap:7px}
.a-day .rw{display:flex; justify-content:space-between; align-items:center; gap:8px}
.a-day .rw b{font-size:13px}
.a-day .tot{
  margin-top:9px; padding-top:8px; border-top:1px solid var(--ink);
  display:flex; justify-content:space-between; font-size:12.5px; font-weight:700;
}
.a-queue{border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.a-queue .hd{
  background:var(--action-soft); color:var(--action); font-size:12px; font-weight:700;
  padding:5px 9px; border-bottom:1px solid var(--line);
}
.a-queue .rw{display:flex; justify-content:space-between; padding:6px 9px; font-size:12.5px;
  border-bottom:1px solid var(--line); background:var(--action-soft)}
.a-queue .rw.off{background:var(--view); color:var(--ink-2); border-bottom:0}
.a-queue .ft{padding:7px 9px; border-top:1px solid var(--line); display:flex; gap:6px}
.a-queue .ft .a-btn{height:24px; font-size:12px}
.a-sigline{margin-top:10px; font-size:12px; color:var(--ink-2); line-height:1.5}
.a-sigline b{color:var(--ink)}

/* ---------------------------------------------------------------------------
   22. RESPONSIVE. The type scale is the only thing that shrinks; body, radii,
   chips, badges and row heights are identical to the desktop page.
   ------------------------------------------------------------------------ */
@media (max-width:1180px){
  :root{--s-gut:28px; --s-sec:66px; --s-h1:34px; --s-h2:25px}
  .s-hd nav{gap:18px}
  .s-hd .in{gap:22px}
  .s-hd .right{gap:14px}
  .s-ft .cols{grid-template-columns:1.4fr 1fr 1fr 1fr; gap:26px}
}
@media (max-width:1040px){
  /* the bar runs out of room before the phone breakpoint; the demo link is
     the first thing to go, because it is also in the hero and in the menu */
  .s-hd .demo{display:none}
}
@media (max-width:980px){
  .s-hero{padding:44px 0 54px}
  .s-hero .grid{grid-template-columns:1fr; gap:32px}
  .hero-flow:empty{min-height:260px}
  .s-std .grid{grid-template-columns:1fr; gap:26px}
  .s-plate{display:flex; align-items:baseline; gap:16px; padding:14px 18px}
  .s-plate .num{font-size:52px; margin:0}
  .s-plate .over{align-self:center; flex:none; white-space:nowrap}
  .s-plate .sub{border:0; padding:0; margin:0; flex:1 1 auto; min-width:0}
  .s-alt{grid-template-columns:1fr; gap:24px; margin-bottom:44px}
  .s-alt.flip .txt{order:0}
  .s-grid6{grid-template-columns:1fr 1fr}
  .s-price .top{grid-template-columns:1fr}
  .s-price .l{border-right:0; border-bottom:1px solid var(--line)}
  .s-after{grid-template-columns:1fr; gap:22px}
  .s-after .act,.s-after .act .s-reassure{text-align:left}
  .s-qgrid{grid-template-columns:1fr; gap:30px}
  .s-qgrid .pslot{max-width:420px}
  .s-about{grid-template-columns:1fr; gap:26px}
  .s-about .pslot{max-width:288px}
  .s-steps{grid-template-columns:1fr 1fr}
  .s-steps > div:nth-child(2n){border-right:0; padding-right:0}
  .a-four{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  :root{
    --s-h1:30px; --s-h2:22px; --s-body:15px;
    --s-sec:44px; --s-gut:20px; --s-hd:54px; --s-hd-c:48px;
  }
  /* On a phone the one action the page exists for stays in the bar. The four
     section links and Sign in move behind the burger, where they belong. */
  .s-hd nav,.s-hd .signin,.s-hd .demo{display:none}
  .s-hd .in{gap:12px}
  .s-hd .right{margin-left:auto; gap:8px}
  .s-burger{display:grid; margin-left:0}
  .s-btn{width:100%; height:48px}
  .s-hd .s-btn,.s-theme button{width:auto}
  .s-acts{flex-direction:column; align-items:stretch; gap:14px; margin-top:22px}
  .s-acts .s-link{text-align:center}
  .s-clauses{grid-template-columns:1fr}
  .s-clauses > div{border-right:0; border-bottom:1px solid var(--line); padding:14px 0}
  .s-clauses > div:last-child{border-bottom:0}
  .s-steps{grid-template-columns:1fr}
  .s-steps > div{border-right:0; border-bottom:1px solid var(--line); padding:16px 0}
  .s-steps > div:last-child{border-bottom:0}
  .s-grid6{grid-template-columns:1fr}
  .s-price .l,.s-price .r{padding:22px}
  .s-price .band{padding:10px 22px; font-size:11.5px}
  .s-price .foot{padding:18px 22px}
  .s-price .inc{grid-template-columns:1fr}
  .s-ft .cols{grid-template-columns:1fr 1fr; gap:22px}
  .s-cta{padding:44px 0}
  .s-cta h2{font-size:24px}
  .s-hdr2{margin-bottom:22px; gap:14px}
  .s-lead{font-size:15px}
  .s-alt h3{font-size:19px}
  .a-four{grid-template-columns:1fr}
  .shot > .cap{padding:6px 9px; font-size:10px; line-height:1.35; flex-wrap:wrap; gap:5px}
  .shot > .cap .live{margin-left:0; width:100%}
  .s-sticky{display:block}
  body{padding-bottom:86px}
  .s-theme{margin-left:0}

  /* DEPARTURE: the comparison table scrolls, it does not reflow. Stacked, the
     third cell would arrive two screens after the first and read as an
     unsupported boast. The requirement column is pinned. */
  .cmpscroll{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    margin:0 calc(-1 * var(--s-gut)); padding:0 var(--s-gut);
  }
  .cmpscroll .s-cmp{width:600px; font-size:13px}
  .cmpscroll .s-cmp th,.cmpscroll .s-cmp td{padding:12px 12px}
  .cmpscroll .s-cmp th:first-child,.cmpscroll .s-cmp td:first-child{padding-left:0}
  .cmpscroll .s-cmp td.req{
    position:sticky; left:0; background:var(--view); z-index:1;
    padding-right:14px; box-shadow:1px 0 0 var(--line); font-size:13.5px;
  }
  .cmpscroll .s-cmp thead th:first-child{position:sticky; left:0; background:var(--view); z-index:1}
  .s-sec--tint .cmpscroll .s-cmp td.req,
  .s-sec--tint .cmpscroll .s-cmp thead th:first-child{background:var(--g100)}
}

/* ---------------------------------------------------------------------------
   23. REDUCED MOTION - degrades to a state that still communicates, never
   to nothing.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ---------------------------------------------------------------------------
   24. PRINT
   ------------------------------------------------------------------------ */
@media print{
  .s-hd,.s-sticky,.s-menu,.s-theme,.skip{display:none !important}
  body,body:not(.lg){padding-top:0; padding-bottom:0; background:#ffffff; color:#000000}
  .s-sec,.s-hero,.s-std,.s-cta{padding:18px 0; break-inside:avoid}
  .shot{box-shadow:none}
  .s-acc details{break-inside:avoid}
  .s-acc .ans{display:block !important}
}