/* ============================================================================
   signalscreener.fr — home page
   ----------------------------------------------------------------------------
   The Big Board. A filing is a departure: the board says what landed, and flips
   to say what it means. The page is the concourse (paper, bright); the board is
   the instrument standing in it (dark, enamelled).

   Self-contained on purpose. styles.css still owns the glossary, analysis,
   legal and 404 pages, which have not moved to this world yet, and a shared
   sheet would have meant fighting the old cascade on every rule below.

   Two rules that are not style decisions and must survive any edit:
     - Text on the orange is ink (#111827), never white. White on #FF6419 is
       2.96:1 and fails even the 3:1 large-text floor; ink is 5.99:1. Secondary
       text on the band is --on-accent-2 (#3F1D08): 5.10:1 at the band's deep
       end, 5.83:1 at its light end, hover included. Its predecessor (#5A2B12)
       measured 3.96:1 and failed AA in the first viewport, in every locale.
     - Within the board, the orange is lit on exactly one row. The marker band
       and the primary button are the page's only other orange fields, and that
       is the whole list; nothing else may claim it.
   ========================================================================== */

/* ---- Faces ---------------------------------------------------------------
   Self-hosted: no third-party font request from a French company's site, and
   no render-blocking round trip to another origin. Latin and Latin-Ext only;
   ja/ko/zh/hi fall through to the platform stack by unicode-range.           */

@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/publicsans-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/publicsans-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/publicsans-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/publicsans-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/publicsans-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/publicsans-800-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Martian Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/martianmono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Martian Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/martianmono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Martian Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/martianmono-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Martian Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/martianmono-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* Concourse */
  --paper:#F4F5F7;
  --paper-sunk:#EAECF1;
  --rule:#DDE1E8;
  --rule-strong:#BFC6D1;

  /* Ink. --ink is the brand's --text-primary and doubles as the board ground. */
  --ink:#111827;
  --ink-2:#434C5C;
  --ink-3:#616B7C;

  /* Board */
  --board:#111827;
  --board-rail:#232C3C;
  --board-row-hover:#1A2233;
  --board-label:#9AA4B4;   /* 7.05:1 on --board */
  --flap:#E9E4DA;
  --flap-top:#DED8CB;   /* the flap's upper half, above the seam */
  --flap-ink:#141A24;
  --flap-seam:#C6BFB0;

  /* The one orange, and the rules that come with it */
  --accent:#FF6419;
  --marker-start:#FF7A3D;
  --accent-hover:#FF8752;
  --accent-hover-deep:#FF7333;
  --on-accent:#111827;     /* 5.99:1 — never white */
  --on-accent-2:#3F1D08;   /* secondary text ON the band; 5.10:1 worst case */
  --accent-deep:#C2410C;   /* 4.75:1 on --paper — small text and links */
  --accent-deep-sunk:#9A3412; /* --accent-deep is only 4.38:1 on --paper-sunk */

  --danger:#B42318;   /* form validation only; never a market direction */
  --card:#FFFFFF;
  --shadow-board:0 18px 40px -20px rgba(17,24,39,.55), 0 2px 6px -2px rgba(17,24,39,.18);
  --shadow-lift:0 6px 14px -10px rgba(17,24,39,.34), 0 1px 2px -1px rgba(17,24,39,.12);

  --sans:'Public Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans JP','Noto Sans KR','Noto Sans SC','Noto Sans Devanagari',sans-serif;
  --mono:'Martian Mono',ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;

  --gutter:clamp(1rem,4vw,3rem);
  --measure:68ch;
  color-scheme:light;
}

/* ---- Reset and page ----------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .18vw,1.0625rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
/* An inline icon with a viewBox but no width or height attribute has no
   intrinsic size, so `max-width:100%` resolves against the container and paints
   a 1400px arc down the page. The generators emit several of these. Size them
   to the text they sit in; anything that declares its own dimensions or class
   is untouched. */
svg:not([width]):not([height]):not([class]){width:1.25em;height:1.25em;flex:none}
h1,h2,h3{margin:0;line-height:1.08;letter-spacing:-0.025em;font-weight:800;text-wrap:balance}
p{margin:0}
a{color:var(--accent-deep);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}

/* Browser surfaces are part of the design, not the browser's business. */
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px;border-radius:2px}
html{scrollbar-color:var(--rule-strong) var(--paper)}
*::-webkit-scrollbar{width:12px;height:12px}
*::-webkit-scrollbar-track{background:var(--paper)}
*::-webkit-scrollbar-thumb{background:var(--rule-strong);border:3px solid var(--paper);border-radius:99px}
*::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}
input,textarea,select,button{font:inherit;color:inherit}
input,textarea{caret-color:var(--accent-deep)}

.shell{width:100%;max-width:78rem;margin-inline:auto;padding-inline:var(--gutter)}

/* `.container` is the incumbent wrapper the analysis and legal generators emit.
   site.css only styled it in the contexts it knew about, so every other one —
   the analysis CTA, the disclaimers box — rendered full-bleed with no gutter
   and pushed its text off the left edge. It is a shell; give it the shell. */
.container{width:100%;max-width:78rem;margin-inline:auto;padding-inline:var(--gutter)}
.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}

/* ---- Header ------------------------------------------------------------- */

.header{position:sticky;top:0;z-index:50;background:rgba(244,245,247,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.header-inner{display:flex;align-items:center;gap:1.5rem;width:100%;max-width:78rem;margin-inline:auto;padding:.75rem var(--gutter)}
.logo{display:flex;align-items:center;gap:.6rem;color:var(--ink);text-decoration:none;font-weight:800;letter-spacing:-0.02em;font-size:1.0625rem;margin-right:auto}
.logo img{width:32px;height:32px;border-radius:7px}
.nav-links{display:flex;align-items:center;gap:1.75rem}
.nav-links>a{font-family:var(--mono);font-size:.6875rem;font-weight:400;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;padding-block:.35rem;border-bottom:2px solid transparent}
.nav-links>a:hover{color:var(--ink);border-bottom-color:var(--accent)}

.language-selector{position:relative}
.language-btn{display:flex;align-items:center;gap:.4rem;background:none;border:1px solid var(--rule-strong);border-radius:3px;padding:.3rem .5rem;cursor:pointer;font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.language-btn:hover{border-color:var(--ink-3);color:var(--ink)}
.language-btn svg{width:11px;height:11px;stroke-width:2.5}
.language-dropdown{position:absolute;top:calc(100% + .5rem);right:0;min-width:12rem;max-height:60vh;overflow-y:auto;background:var(--paper);border:1px solid var(--rule-strong);border-radius:4px;box-shadow:var(--shadow-lift);padding:.3rem;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .16s ease,transform .16s ease,visibility .16s}
.language-selector:hover .language-dropdown,.language-selector:focus-within .language-dropdown{opacity:1;visibility:visible;transform:none}
.language-dropdown a{display:flex;align-items:baseline;gap:.6rem;padding:.35rem .5rem;border-radius:3px;color:var(--ink-2);text-decoration:none;font-size:.875rem}
.language-dropdown a:hover{background:var(--paper-sunk);color:var(--ink)}
.language-dropdown a.active{color:var(--ink);font-weight:700}
.lang-code{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);min-width:1.6rem}

.mobile-menu-btn{display:none;background:none;border:1px solid var(--rule-strong);border-radius:3px;padding:.4rem;cursor:pointer;color:var(--ink-2)}
.mobile-menu-btn svg{width:20px;height:20px;stroke-width:2}
.mobile-nav{display:none;flex-direction:column;background:var(--paper);border-bottom:1px solid var(--rule);padding:.5rem var(--gutter) 1rem}
.mobile-nav a{padding:.65rem 0;color:var(--ink-2);text-decoration:none;font-family:var(--mono);font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;border-bottom:1px solid var(--rule)}
.mobile-nav.open{display:flex}

/* ---- Dateline ------------------------------------------------------------
   The strip above the board: what day it is and what is on tonight. It is the
   page's freshness signal, so it is server-rendered text, never fetched.     */

.dateline{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1.25rem;padding:1.5rem 0 .875rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.dateline time{color:var(--ink-2);font-weight:700;font-variant-numeric:tabular-nums}
.dateline-quiz{display:flex;align-items:baseline;gap:.6rem;min-width:0}
.dateline-quiz b{font-weight:400;color:var(--ink-3);white-space:nowrap}
.dateline-quiz .quiz-title{font-family:var(--sans);font-size:.9375rem;font-weight:700;letter-spacing:-0.01em;text-transform:none;color:var(--ink)}
.dateline-quiz a{color:var(--accent-deep);white-space:nowrap;font-size:.6875rem;letter-spacing:.08em}
/* No quiz today: the cell is drawn unlit rather than removed, so the strip
   keeps its shape and the absence is legible instead of invisible. */
.quiz-empty{color:var(--ink-3);opacity:.65;letter-spacing:.14em}
.quiz-empty::before{content:'';display:inline-block;width:.5rem;height:.5rem;margin-right:.5rem;border:1px solid currentColor;border-radius:2px;vertical-align:baseline}

/* ---- The board ----------------------------------------------------------- */

.board{
  background:var(--board);
  border-radius:5px;
  box-shadow:var(--shadow-board);
  overflow:hidden;
  /* The enamel frame: a hairline of lighter metal inside the dark body. */
  outline:1px solid var(--board-rail);
  outline-offset:-1px;
}
.board-head,.board-row{
  display:grid;
  grid-template-columns:minmax(9.5rem,13rem) 5.5rem 6.5rem 5.25rem minmax(0,1fr);
  align-items:center;
  gap:1.25rem;
  padding:0 1.25rem;
}
.board-head{
  padding-block:.7rem;
  font-family:var(--mono);
  font-size:.6875rem;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--board-label);
  border-bottom:1px solid var(--board-rail);
}
.board-head .col-age{text-align:right;white-space:nowrap}

.board-row{
  position:relative;
  min-height:4rem;
  border-bottom:1px solid var(--board-rail);
  color:var(--flap);
  text-decoration:none;
  transition:background-color .18s ease;
}
.board-row:last-child{border-bottom:0}
.board-row:hover{background:var(--board-row-hover)}
.board-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

.row-co{min-width:0}
.row-ticker{font-family:var(--mono);font-size:1rem;font-weight:700;letter-spacing:.02em;color:var(--flap)}
.row-name{display:block;font-size:.75rem;line-height:1.3;color:var(--board-label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.15rem}

/* Form type as a coded chip. Fixed width so the column reads as a column and
   10-K, 10-Q and 8-K stack into one optical edge. */
.chip{display:inline-block;min-width:3.9rem;text-align:center;padding:.25rem .45rem;border:1px solid var(--board-label);border-radius:2px;font-family:var(--mono);font-size:.6875rem;font-weight:700;letter-spacing:.06em;color:var(--flap)}

.row-filed{font-family:var(--mono);font-size:.75rem;color:var(--board-label);font-variant-numeric:tabular-nums}
.row-age{font-family:var(--mono);font-size:.75rem;color:var(--board-label);text-align:right;font-variant-numeric:tabular-nums}

/* The flap. Both faces exist in the markup and the readable one is the resting
   state, so the summary is in the HTML with no JavaScript and no animation:
   .is-flipping is added only when motion is allowed, and it plays the board
   arriving at the state it already holds. */
.says{position:relative;perspective:900px}
.says-inner{position:relative;transform-style:preserve-3d;transform-origin:center center}
.says{
  /* The flap itself: a bone card on the dark board, split across the middle. The
     two halves differ by a shade and meet at a hairline, which is what a
     split-flap looks like at rest — and reading as material is what keeps it
     from reading as a line struck through the text. */
  background:linear-gradient(to bottom,var(--flap-top) 0 calc(50% - .5px),var(--flap-seam) calc(50% - .5px) calc(50% + .5px),var(--flap) calc(50% + .5px) 100%);
  border-radius:2px;
  padding:.5rem .7rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px -1px rgba(0,0,0,.45);
}
.says-face{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden;
  backface-visibility:hidden;
  font-size:.875rem;line-height:1.45;color:var(--flap-ink);
}
.says-face--from{
  position:absolute;inset:0;
  transform:rotateX(180deg);backface-visibility:hidden;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--flap-ink);
  -webkit-line-clamp:1;line-clamp:1;
}
@keyframes flap{
  from{transform:rotateX(-180deg)}
  to{transform:rotateX(0)}
}
.board.is-flipping .says-inner{
  animation:flap .62s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(var(--row) * 70ms + 120ms);
}

/* The live row. The only orange on the page, and the surlignement translated
   into the board's own vocabulary: a marker band laid across the row that
   matters. Ink on the band, as everywhere. */
.board-row--live{background:linear-gradient(100deg,var(--marker-start),var(--accent));color:var(--on-accent)}
.board-row--live:hover{background:linear-gradient(100deg,var(--accent-hover),var(--accent-hover-deep))}
.board-row--live .row-ticker{color:var(--on-accent)}
.board-row--live .row-name,.board-row--live .row-filed,.board-row--live .row-age{color:var(--on-accent-2)}
.board-row--live .chip{border-color:var(--on-accent-2);color:var(--on-accent)}
.board-row--live:focus-visible{outline-color:var(--ink)}

/* The live flag rides in the company cell, so the row states its own state in
   words. With colour removed it still reads LIVE. */
.row-live-flag{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--mono);font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--on-accent-2);margin-top:.25rem}
.row-live-flag::before{content:'';width:.4rem;height:.4rem;border-radius:99px;background:var(--on-accent-2)}

.board-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:1rem 0 0;font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.board-foot a{color:var(--accent-deep);margin-left:auto}
.board-note{color:var(--ink-3);letter-spacing:.08em}

/* ---- Pitch: the surlignement headline and the action -------------------- */

.pitch{padding:clamp(1.5rem,3vw,2.25rem) 0 clamp(2rem,5vw,3.5rem)}
.pitch h1{font-size:clamp(2.5rem,6.6vw,4.5rem);letter-spacing:-0.04em;max-width:16ch}
.pitch h1>span{display:block}
/* The tilt lives here: a rotation on a display:inline box is ignored. */
.pitch h1>span:last-child{display:block;transform:rotate(-.8deg);transform-origin:left center}
/* The marker. A band laid down by hand: a gradient rather than a flat fill,
   rounded like a chisel tip, sitting a fraction off true. */
.marker{
  display:inline;
  background:linear-gradient(100deg,var(--marker-start),var(--accent));
  color:var(--on-accent);
  padding:.02em .26em .06em;
  margin-left:-.06em;
  border-radius:.1em;
  line-height:1.02;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.pitch p{margin-top:1.25rem;max-width:var(--measure);font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);color:var(--ink-2)}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
/* The shape lives on the colour classes too. Several generated pages — every
   locale 404, quiz.html — emit `class="btn-primary"` with no `.btn` base, and
   under a layered rule those rendered as unpadded coloured text. A colour class
   that cannot stand alone is a trap in a codebase with four generators. */
.btn,.btn-primary,.btn-secondary{display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.35rem;border-radius:4px;font-weight:700;font-size:.9375rem;letter-spacing:-0.01em;text-decoration:none;border:1px solid transparent;transition:transform .16s cubic-bezier(.16,1,.3,1),box-shadow .16s ease,background-color .16s ease}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-lift)}
.btn-primary:hover{background:var(--marker-start);transform:translateY(-1px)}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--rule-strong)}
.btn-secondary:hover{border-color:var(--ink);transform:translateY(-1px)}

/* ---- Proof: the lead filing, in full ------------------------------------ */

.proof{padding:clamp(2.5rem,6vw,4rem) 0;border-top:1px solid var(--rule)}
.proof-head{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:1.75rem}
.proof-head h2{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.125rem)}
.proof-head .chip{border-color:var(--rule-strong);color:var(--ink-2)}
.proof-card{
  display:grid;
  grid-template-columns:12rem minmax(0,1fr);
  gap:0 2.5rem;
  max-width:58rem;
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:5px;
  padding:clamp(1.25rem,3vw,2rem);
}
.proof-meta{grid-column:1;display:flex;flex-direction:column;gap:.55rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-variant-numeric:tabular-nums;border-right:1px solid var(--rule);padding-right:2rem}
.proof-meta span:first-child{font-size:1rem;font-weight:700;letter-spacing:.02em;color:var(--ink)}
.proof-list{grid-column:2;list-style:none;margin:0;padding:0;display:grid;gap:1.1rem;align-content:start}
.proof-list li{padding-left:1rem;border-left:2px solid var(--rule);font-size:1rem;line-height:1.65}
.proof-note{grid-column:1 / -1;margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--rule);font-size:.8125rem;color:var(--ink-3);max-width:var(--measure)}
.proof-note a{white-space:nowrap}
.proof-note a{color:var(--accent-deep)}

/* ---- Glossary index ------------------------------------------------------ */

.glossary{padding:clamp(2.5rem,6vw,4rem) 0;border-top:1px solid var(--rule)}
.glossary h2{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.125rem);margin-bottom:.75rem}
.glossary>.shell>p{max-width:var(--measure);color:var(--ink-2);margin-bottom:1.75rem}
.term-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));background:var(--paper);border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.term-grid a{display:block;padding:.85rem 1rem;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--paper);color:var(--ink);text-decoration:none;font-family:var(--mono);font-size:.8125rem;letter-spacing:-0.01em;transition:background-color .14s ease}
.term-grid a:hover{background:var(--accent);color:var(--on-accent)}
.glossary-more{margin-top:1.25rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase}

/* ---- Tools: asymmetric, not a card rack --------------------------------- */

.tools{padding:clamp(2.5rem,6vw,4rem) 0;border-top:1px solid var(--rule)}
.tools-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:1.5rem;align-items:start}
.panel{border:1px solid var(--rule);border-radius:5px;padding:clamp(1.25rem,3vw,2rem);background:var(--card)}
.panel--sunk{background:var(--paper-sunk);border-color:var(--rule-strong)}
.panel h3{font-size:1.25rem;margin-bottom:.6rem}
.panel p{color:var(--ink-2);font-size:.9375rem;max-width:52ch}
.metric-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.25rem}
.metric-chips a,.metric-chips span{display:inline-block;font-family:var(--mono);font-size:.6875rem;letter-spacing:.04em;padding:.32rem .55rem;border:1px solid var(--rule-strong);border-radius:2px;color:var(--ink-2);text-decoration:none;transition:background-color .14s ease,border-color .14s ease,color .14s ease}
.metric-chips a:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.panel-quiz-title{margin-top:1rem;padding:.85rem 1rem;background:var(--card);border:1px solid var(--rule);border-radius:4px;font-weight:700;letter-spacing:-0.01em}

/* ---- Contact ------------------------------------------------------------- */

.contact{padding:clamp(2.5rem,6vw,4rem) 0;border-top:1px solid var(--rule)}
.contact h2{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.125rem);margin-bottom:.75rem}
.contact>.shell>p{max-width:var(--measure);color:var(--ink-2);margin-bottom:2rem}
.contact-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:2.5rem;align-items:start}
.form-group{margin-bottom:1.1rem}
.form-group label{display:block;font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.4rem}
.form-input,.form-textarea,.form-select{width:100%;padding:.7rem .85rem;background:var(--card);border:1px solid var(--rule-strong);border-radius:3px;font-size:.9375rem;transition:border-color .14s ease,box-shadow .14s ease}
.form-select{
  appearance:none;-webkit-appearance:none;
  padding-right:2.25rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23616B7C' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .8rem center;
  background-size:14px 14px;
}
.form-input::placeholder,.form-textarea::placeholder{color:var(--ink-3)}
.form-input:focus,.form-textarea:focus,.form-select:focus{outline:none;border-color:var(--accent-deep);box-shadow:0 0 0 3px rgba(194,65,12,.14)}
.form-textarea{resize:vertical;min-height:7rem;font-family:inherit}
.form-error{display:block;margin-top:.35rem;font-size:.8125rem;color:var(--danger)}
.form-input[aria-invalid="true"],.form-textarea[aria-invalid="true"],.form-select[aria-invalid="true"]{border-color:var(--danger)}
.btn[disabled],.btn-primary[disabled],.btn-secondary[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.form-success{padding:1.5rem;border:1px solid var(--rule-strong);border-radius:4px;background:var(--paper-sunk)}
.form-success h3{font-size:1.125rem;margin-bottom:.4rem}
.contact-aside{border-left:1px solid var(--rule);padding-left:2rem}
.contact-aside h3{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:400;margin-bottom:.6rem}
.contact-aside p{font-size:.9375rem;color:var(--ink-2);margin-bottom:1.5rem}

/* ---- Disclaimers and footer --------------------------------------------- */

.disclaimers{padding:clamp(2.5rem,6vw,3.5rem) 0;border-top:1px solid var(--rule);background:var(--paper-sunk)}
.disclaimers h2{font-family:var(--mono);font-size:.6875rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1.25rem}
.disclaimers ul{list-style:none;margin:0;padding:0;display:grid;gap:.85rem;max-width:var(--measure)}
.disclaimers li{font-size:.8125rem;line-height:1.6;color:var(--ink-2)}
.disclaimers strong{color:var(--ink);font-weight:700}

.footer{border-top:1px solid var(--rule);padding:2rem 0}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;width:100%;max-width:78rem;margin-inline:auto;padding-inline:var(--gutter)}
.footer-links{display:flex;gap:1.5rem}
.footer-links a{font-family:var(--mono);font-size:.6875rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);text-decoration:none}
.footer-copy{font-size:.8125rem;color:var(--ink-3)}
.footer-links a:hover{color:var(--ink)}

/* ---- Adaptation ---------------------------------------------------------- */

@media (max-width:1024px){
  .tools-grid{grid-template-columns:1fr}
  .proof-card{grid-template-columns:1fr;gap:0}
  .proof-meta{flex-direction:row;flex-wrap:wrap;gap:.5rem 1.25rem;border-right:0;border-bottom:1px solid var(--rule);padding:0 0 1.1rem}
  .proof-meta span:first-child{font-size:.6875rem;font-weight:700;color:var(--ink)}
  .proof-list{grid-column:1;padding-top:1.25rem}
  .contact-grid{grid-template-columns:1fr;gap:2rem}
  .contact-aside{border-left:0;border-top:1px solid var(--rule);padding-left:0;padding-top:1.5rem}
}

@media (max-width:860px){
  /* Only hide the nav where there is a menu button to reveal it again. The
     glossary and analysis pages ship a simpler header with no button, and
     hiding their nav would leave those pages with no navigation at all; they
     get a tighter wrapping nav instead. A browser without :has() keeps the
     nav visible, which is the safe direction to fail in. */
  .header-inner:has(.mobile-menu-btn) .nav-links{display:none}
  .header-inner:not(:has(.mobile-menu-btn)) .nav-links{gap:.9rem;flex-wrap:wrap;justify-content:flex-end}
  .mobile-menu-btn{display:block}

  /* The board keeps its grammar and changes its shape: each row becomes a
     stacked departure card, ticker and form on the top line, the summary
     below, the seam still running through the flap. */
  .board-head{display:none}
  .board-row{grid-template-columns:1fr auto;gap:.5rem .75rem;padding:1rem 1.1rem;min-height:0}
  .row-co{grid-column:1}
  .row-form{grid-column:2;justify-self:end}
  .row-filed{grid-column:1;font-size:.6875rem}
  .row-age{grid-column:2;text-align:right;font-size:.6875rem}
  .says{grid-column:1 / -1;margin-top:.35rem}
  .says-face{-webkit-line-clamp:3;line-clamp:3}
  .dateline{gap:.4rem .9rem;padding-top:1.25rem}
  .dateline-quiz{flex-basis:100%;flex-wrap:wrap;gap:.25rem .6rem}
  .dateline-quiz .quiz-title{flex-basis:100%;font-size:1rem;line-height:1.35}
  .dateline-quiz a{white-space:normal}
}

@media (max-width:520px){
  .pitch h1{font-size:clamp(2.125rem,9vw,2.75rem)}
  .actions .btn,.actions .btn-primary,.actions .btn-secondary{flex:1 1 100%;justify-content:center}
  .term-grid{grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr))}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .board.is-flipping .says-inner{animation:none}
}

/* ============================================================================
   READ-MODE SURFACES
   ----------------------------------------------------------------------------
   The glossary, the filing analyses, the blog and the legal pages. Same world,
   different job: on the home page the visitor decides, here they understand.

   The translation rule: the PAGE is the concourse (paper, a real measure, quiet
   rhythm) and the DATA is the instrument (dark, mono, tabular). A formula, a
   benchmark band and a filing row belong on the board; prose does not.
   ========================================================================== */

/* ---- Article shell ------------------------------------------------------- */

.article-header{border-bottom:1px solid var(--rule);padding:clamp(1.75rem,4vw,3rem) 0 clamp(1.5rem,3vw,2rem)}
.article-header .container,
.article-content .container,
.legal-content .container{width:100%;max-width:46rem;margin-inline:auto;padding-inline:var(--gutter)}
.article-header h1{font-size:clamp(2rem,1.4rem + 2.6vw,3.25rem);letter-spacing:-0.035em;max-width:18ch}
.article-subtitle{margin-top:.85rem;font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);color:var(--ink-2);max-width:var(--measure)}

/* The breadcrumb speaks the board's label language, not the page's prose. */
.breadcrumb{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1rem}
.breadcrumb a{color:var(--accent-deep);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}

.article-content{padding:clamp(2rem,4vw,3rem) 0 clamp(2.5rem,5vw,4rem)}
.article-content p,.article-content li{max-width:var(--measure)}
.article-intro{font-size:1.125rem;line-height:1.7;color:var(--ink-2)}

/* One spacing rhythm: more space above a heading than below it. */
.definition-section{padding-top:clamp(1.75rem,3.5vw,2.75rem)}
/* The wrapper already opened the page; the first section must not open it twice. */
.definition-section:first-child{padding-top:0}
.definition-section + .definition-section{border-top:1px solid var(--rule)}
.definition-section h2{font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem);margin-bottom:.85rem}
.definition-text{font-size:1.0625rem;line-height:1.7}

/* ---- The instrument bits: formula and benchmarks ------------------------- */

/* A formula is notation, so it is set in the board's own type on the board's
   own ground. Not a terminal: no green-on-black, no prompt, no window chrome. */
.formula-box{
  background:var(--board);
  border-radius:4px;
  padding:1.1rem 1.25rem;
  overflow-x:auto;
}
.formula-box code{
  font-family:var(--mono);
  font-size:.9375rem;
  line-height:1.6;
  color:var(--flap);          /* bone on the board: 12.0:1 */
  white-space:pre-wrap;
}
.formula-components{margin-top:1rem}
.formula-components ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.formula-components li{font-size:.9375rem;color:var(--ink-2);padding-left:1rem;border-left:1px solid var(--rule)}
.formula-components strong{color:var(--ink);font-weight:700}

/* Benchmarks are a range table, so they are drawn as board rows: the range in
   mono holding a fixed column, the reading beside it. */
.benchmarks-grid{display:grid;gap:0;border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.benchmark-item{
  display:grid;
  grid-template-columns:8.5rem minmax(0,1fr);
  gap:.25rem 1.25rem;
  padding:.9rem 1.1rem;
  background:var(--paper);
}
.benchmark-item + .benchmark-item{border-top:1px solid var(--rule)}
.benchmark-range{grid-row:1 / span 2;font-family:var(--mono);font-size:.8125rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;align-self:start}
.benchmark-label{font-weight:700;font-size:.9375rem}
.benchmark-desc{font-size:.875rem;color:var(--ink-2)}

/* ---- Set-aside passages --------------------------------------------------
   An analogy and a worked example are asides, not alerts. A hairline and a
   quieter ground, never a 4px coloured bar. */

.analogy-box,.example-box{
  background:var(--paper-sunk);
  border:1px solid var(--rule);
  border-radius:4px;
  padding:1.1rem 1.25rem;
}
.analogy-box p,.example-box p{margin:0;font-size:1rem;line-height:1.7;color:var(--ink-2)}

/* ---- Lists ---------------------------------------------------------------
   The markers are drawn, not typed: the old pages used a green ✓ glyph, which
   is an emoji standing in for an icon system and carries colour as meaning. */

.matters-list,.cautions-list{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.matters-list li,.cautions-list li{position:relative;padding-left:1.4rem;font-size:1rem;line-height:1.65}
.matters-list li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:.5rem;height:.5rem;border-radius:2px;
  background:var(--accent);
}
.cautions-list li::before{
  content:'';position:absolute;left:0;top:.6em;
  width:.55rem;height:.55rem;
  border:1px solid var(--ink-3);border-radius:2px;
}

/* ---- Call to action at the end of a reading page ------------------------- */

.article-cta{
  margin-top:clamp(2rem,4vw,3rem);
  padding-top:clamp(1.5rem,3vw,2rem);
  border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;
}
.article-cta p{flex-basis:100%;margin-bottom:.35rem;font-weight:700;font-size:1.0625rem}
.article-footer-note{margin-top:1.75rem;font-size:.8125rem;color:var(--ink-3)}
.article-footer-note em{font-style:normal}
.article-divider{border:0;border-top:1px solid var(--rule);margin:2rem 0}

/* ---- Glossary index ------------------------------------------------------ */

.definitions-index{padding-bottom:clamp(2.5rem,5vw,4rem)}
.definitions-index .container{max-width:60rem}
.definition-letter{
  margin-top:2.25rem;
  padding-bottom:.5rem;
  border-bottom:1px solid var(--rule-strong);
  font-family:var(--mono);font-size:.875rem;font-weight:700;letter-spacing:.14em;color:var(--ink-3);
}
/* A link list, not a table: per-cell rules leave a ragged edge wherever the
   last row is short, and there is nothing to align across columns anyway. */
.definition-list{list-style:none;margin:.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:.1rem}
.definition-list li{margin:0}
.definition-list a{
  display:block;padding:.5rem .65rem;border-radius:3px;
  color:var(--ink);text-decoration:none;font-size:.9375rem;
}
.definition-list a:hover{background:var(--accent);color:var(--on-accent)}

/* ---- Filing analyses ----------------------------------------------------- */

.analysis-hero{border-bottom:1px solid var(--rule);padding:clamp(1.75rem,4vw,3rem) 0 clamp(1.5rem,3vw,2rem)}
.analysis-hero .container,.analyses-section .container,.tickers-section .container{width:100%;max-width:58rem;margin-inline:auto;padding-inline:var(--gutter)}
.analysis-hero h1{font-size:clamp(1.875rem,1.4rem + 2.2vw,3rem);letter-spacing:-0.035em}
.analysis-hero .ticker{font-family:var(--mono);font-weight:700;letter-spacing:.02em}
.hero-subtitle{margin-top:.75rem;color:var(--ink-2);max-width:var(--measure)}

.ticker-search{margin-top:1.25rem;max-width:26rem}
.search-input{width:100%;padding:.7rem .85rem;background:var(--card);border:1px solid var(--rule-strong);border-radius:3px;font-size:.9375rem}
.search-input:focus{outline:none;border-color:var(--accent-deep);box-shadow:0 0 0 3px rgba(194,65,12,.14)}

.tickers-section,.analyses-section{padding:clamp(2rem,4vw,3rem) 0}
.tickers-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));background:var(--paper);border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.tickers-grid a{display:block;padding:.75rem .9rem;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none;font-family:var(--mono);font-size:.8125rem}
.tickers-grid a:hover{background:var(--accent);color:var(--on-accent)}

/* One filing = one card, built like a board row that has been opened out. */
.analyses-grid{display:grid;gap:1.25rem}
.analysis-card{background:var(--card);border:1px solid var(--rule);border-radius:5px;padding:clamp(1.1rem,2.5vw,1.6rem)}
.analysis-card-featured{border-color:var(--rule-strong)}
.analysis-header{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;padding-bottom:.9rem;border-bottom:1px solid var(--rule)}
.analysis-meta{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-variant-numeric:tabular-nums}
.filing-date{font-variant-numeric:tabular-nums}
.analysis-content{padding-top:1.1rem}
.insights-list{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:1rem}
.insights-list li{padding-left:1rem;border-left:2px solid var(--rule);font-size:1rem;line-height:1.65;max-width:var(--measure)}
.analysis-footer{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--rule);font-size:.8125rem;color:var(--ink-3)}
.filing-link,.back-link{color:var(--accent-deep)}

/* The form type keeps the board's chip so a filing is recognisable anywhere
   on the site. One shape, four values, never colour-coded by type. */
.form-badge{display:inline-block;min-width:3.9rem;text-align:center;padding:.25rem .45rem;border:1px solid var(--rule-strong);border-radius:2px;font-family:var(--mono);font-size:.6875rem;font-weight:700;letter-spacing:.06em;color:var(--ink-2)}
.form-links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}

/* Filing tone is a reading, not a rating: no green/red verdict on a security. */
.sentiment,.significance{font-family:var(--mono);font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.sentiment-positive,.sentiment-negative,.sentiment-neutral{color:var(--ink-2)}

.other-reports{margin-top:2rem}
.section-title{font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem);margin-bottom:1rem}
.no-analyses-message,.app-exclusive-note{color:var(--ink-2);max-width:var(--measure)}

.analysis-cta,.analysis-cta-fresh{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--rule)}
.cta-buttons{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem}

/* The analysis pages hang this box straight off the section with no wrapper,
   so it has to centre itself; the home page puts a .shell in between and is
   unaffected by the padding below. */
.disclaimers-box{margin:2.5rem auto 0;max-width:58rem;padding:1.25rem;background:var(--paper-sunk);border:1px solid var(--rule);border-radius:4px}
.disclaimers:has(> .disclaimers-box){padding-inline:var(--gutter)}
.disclaimers-header{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.75rem}
.disclaimers-header h2{font:inherit;letter-spacing:inherit;margin:0}
.disclaimers-box p,.disclaimers-box li{font-size:.8125rem;line-height:1.6;color:var(--ink-2)}

/* ---- Blog ---------------------------------------------------------------- */

.blog-article .article-hero-image{width:100%;max-width:46rem;margin:0 auto clamp(1.5rem,3vw,2.25rem);border-radius:5px}
.faq-section{margin-top:clamp(2rem,4vw,3rem)}
.faq-item{padding:1.1rem 0;border-top:1px solid var(--rule)}
.faq-item h3{font-size:1.0625rem;margin-bottom:.45rem}
.faq-item p{color:var(--ink-2)}

/* ---- Legal and 404 ------------------------------------------------------- */

.legal-page .legal-content{width:100%;max-width:46rem;margin-inline:auto;padding:clamp(2rem,4vw,3rem) var(--gutter) clamp(2.5rem,5vw,4rem)}
.legal-content h2{font-size:1.25rem;margin:2rem 0 .75rem}
.legal-content h3{font-size:1.0625rem;margin:1.5rem 0 .5rem}
.legal-content p,.legal-content li{max-width:var(--measure);color:var(--ink-2);margin-bottom:.85rem}
.last-updated{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

.not-found{width:100%;max-width:46rem;margin-inline:auto;padding:clamp(3rem,10vw,7rem) var(--gutter);text-align:left}
.not-found .container{width:100%;max-width:46rem;margin-inline:auto;padding-inline:var(--gutter)}
.not-found-code{font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.75rem}
.not-found h1{font-size:clamp(2rem,1.4rem + 2.6vw,3.25rem);letter-spacing:-0.035em}
.not-found p{margin-top:1rem;color:var(--ink-2);max-width:var(--measure)}
.not-found-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.not-found .store-badges{margin-top:1.75rem}
.not-found-back{margin-top:1.25rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase}

/* ---- Read-mode adaptation ------------------------------------------------ */

@media (max-width:640px){
  .benchmark-item{grid-template-columns:1fr;gap:.2rem}
  .benchmark-range{grid-row:auto}
  .definition-list{grid-template-columns:1fr}
  .article-cta .btn,.not-found-actions .btn,.not-found-actions .btn-primary,.not-found-actions .btn-secondary{flex:1 1 100%;justify-content:center}
}

/* ---- Store badges --------------------------------------------------------
   Each store's own wording on a dark pill, the mark drawn inline. Dark because
   that is what both official badges are, and because it makes the button the
   same object as the board: the one dark thing on a paper page.

   These carry the site's install conversion, so they get the strongest
   affordance on any Read-mode page — nothing else here is filled. */

.app-cta{
  margin-top:clamp(2rem,4vw,3rem);
  padding-top:clamp(1.5rem,3vw,2rem);
  border-top:1px solid var(--rule);
}
.app-cta-reason{
  font-size:1.0625rem;
  line-height:1.6;
  font-weight:700;
  letter-spacing:-0.01em;
  max-width:52ch;
  margin-bottom:1.1rem;
}
.app-cta-reason .marker{font-weight:700}

.store-badges{display:flex;flex-wrap:wrap;gap:.75rem}
.store-btn{
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.6rem 1.1rem;
  border-radius:4px;
  background:var(--ink);
  color:var(--flap);
  text-decoration:none;
  transition:transform .16s cubic-bezier(.16,1,.3,1),background-color .16s ease;
}
.store-btn:hover{background:var(--board-rail);transform:translateY(-1px)}
.store-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.store-mark{flex:none}
.store-text{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.store-kicker{font-size:.6875rem;letter-spacing:.01em;opacity:.82}
.store-name{font-size:1.0625rem;font-weight:700;letter-spacing:-0.015em}

/* On the home page the badges ARE the conversion moment, under a 4.5rem
   headline, so they carry a little more weight than the same pair at the foot
   of a glossary entry. Same object, one size up. */
.store-badges--lead{margin-top:1.5rem;gap:.85rem}
.store-badges--lead .store-btn{padding:.75rem 1.35rem;border-radius:5px}
.store-badges--lead .store-name{font-size:1.1875rem}
.store-badges--lead .store-kicker{font-size:.75rem}

@media (max-width:520px){
  .store-badges{flex-direction:column;align-items:stretch}
  .store-btn{justify-content:center}
}