/* Session PAGES — the marketing surface, on top of /style.css.

   This sheet ADDS; it does not restate. Every page links /style.css first and
   this second, so the tokens (--paper, --ink, --brand, --line, --zoneA..D, --r),
   the type scale, .wrap, .card, .eyebrow, .chip, .cta, .btn-ghost, .mtable,
   header/.mast/.mark/nav and footer/.row all arrive already defined and are
   reused unchanged. What follows is only what four marketing pages need and the
   app did not already have.

   Three rules this file keeps, each pinned by tests/test_pages_surface.py, and
   stated here without writing the forbidden tokens (the pins are substring
   scans, so a comment naming them would fail them):
     - It declares no font face of its own. The six IBM Plex faces are declared
       once, in style.css, and a seventh arriving here would break the pin that
       counts them.
     - It imports nothing and names no absolute URL — no CDN, no font host. The
       privacy page's "fonts are self-hosted; this page loads nothing from a
       third-party CDN" has to stay true on this surface too.
     - A phone floor. Mobile-first: the base rules below are the small-screen
       layout and the min-width media blocks are the enhancement.

   Reduced motion needs no block here: this sheet declares no transition and no
   animation, so style.css's global `*{transition:none!important}` under
   prefers-reduced-motion has nothing of ours to switch off. */

/* ── page rhythm ──────────────────────────────────────────────────────
   Marketing sections are separated by space and a hairline, never by boxes.
   The app's landing already reads that way; this keeps the two consistent. */
.msec{padding:34px 0 6px; border-top:1px solid var(--line)}
.msec:first-of-type{border-top:0; padding-top:26px}
.msec h2{font:600 24px/1.2 "IBM Plex Sans Condensed",sans-serif; letter-spacing:.005em;
         max-width:24ch; margin:0 0 10px}
.msec h3{font:600 16px/1.3 "IBM Plex Sans",sans-serif; margin:0 0 6px}
.msec p{max-width:68ch; margin:0 0 14px}
.mlead{font-size:17px; color:var(--mut); max-width:60ch}
.mlead b{color:var(--ink); font-weight:600}

/* A quiet, indented aside for the sentence that qualifies the claim above it.
   Left rule rather than a tint: the app uses `.lane` the same way. */
.mnote{border-left:3px solid var(--line); padding:2px 0 2px 14px; margin:0 0 16px;
       color:var(--mut); font-size:14.5px; max-width:64ch}
.mnote b{color:var(--ink)}
.mnote.warn{border-left-color:#B5893F}

/* ── feature / step grid ──────────────────────────────────────────────*/
.mgrid{display:grid; grid-template-columns:1fr; gap:18px; margin:18px 0 8px; padding:0; list-style:none}
.mgrid > li{min-width:0}
.mgrid .k{display:block; font:500 10px/1.3 "IBM Plex Mono",monospace; letter-spacing:.14em;
          text-transform:uppercase; color:var(--mut); margin-bottom:6px}
.mgrid p{margin:0; font-size:14.5px; color:var(--mut)}
.mgrid p b{color:var(--ink); font-weight:600}

/* Numbered steps — the ordinal in mono, hanging beside the text. */
.msteps{list-style:none; margin:18px 0 8px; padding:0; counter-reset:mstep}
.msteps > li{position:relative; padding:0 0 22px 44px; counter-increment:mstep}
.msteps > li::before{
  content:counter(mstep,decimal-leading-zero); position:absolute; left:0; top:2px;
  font:500 12px/1 "IBM Plex Mono",monospace; letter-spacing:.08em; color:var(--mut);
}
.msteps > li:last-child{padding-bottom:4px}
.msteps h3{margin-bottom:4px}
.msteps p{margin:0; color:var(--mut); font-size:14.5px}
.msteps code{font:400 13px/1.4 "IBM Plex Mono",monospace; color:var(--ink)}

/* ── pricing ──────────────────────────────────────────────────────────*/
.packs{display:grid; grid-template-columns:1fr; gap:18px; margin:20px 0 6px;
       padding:0; list-style:none}
.pack{display:flex; flex-direction:column; background:var(--card);
      border:1px solid var(--line); border-radius:var(--r); padding:22px 22px 20px}
.pack h3{font:600 18px/1.25 "IBM Plex Sans Condensed",sans-serif; letter-spacing:.01em;
         margin:0 0 4px}
.pack .psum{color:var(--mut); font-size:14px; margin:0 0 16px}
/* The price cell. It held "Contact us" until Session RENAME+PRICE; the
   `.price.contact` modifier died with the fallback, and so did the hairline
   under it — a card that is now three short lines reads better without one. */
.price{font:600 26px/1.2 "IBM Plex Sans Condensed",sans-serif; letter-spacing:.01em;
       color:var(--brand); margin-bottom:2px}
/* The per-report figure, set under the pack price. Derived by `packs.py`, never
   typed, so it cannot disagree with the number above it. */
.peach{color:var(--mut); font-size:14px; margin:0 0 16px}
/* The buy control. A LINK to /billing, not a form: /pricing is rendered once at
   router-build time and is cacheable, so it can carry no CSRF token. Styled off
   .cta in style.css rather than restating it; `style=` attributes are banned on
   this surface (tests/test_pages_surface.py), which is why this is a class. */
.buy{display:inline-block; margin-top:auto; padding:10px 16px; border-radius:var(--r);
     background:var(--brand); color:var(--paper); text-decoration:none;
     font:600 14.5px/1 "IBM Plex Sans Condensed",sans-serif; text-align:center}
.buy:hover{filter:brightness(1.08)}
.pack ul{margin:0; padding:0 0 0 18px; list-style:none}
.pack li{position:relative; font-size:14.5px; line-height:1.5; color:var(--mut);
         margin-bottom:9px}
.pack li::before{content:"—"; position:absolute; left:-18px; color:var(--line)}
.pack li:last-child{margin-bottom:0}

/* ── the demo ─────────────────────────────────────────────────────────*/
.figpair{display:grid; grid-template-columns:1fr; gap:22px; margin:6px 0 4px}
.figpair > *{margin:0; min-width:0}   /* > * not `figure`: the second cell of the
                                        /product pair is prose, not a figure */
.figpair figcaption{font:400 12.5px/1.5 "IBM Plex Sans",sans-serif; color:var(--mut);
                    margin-top:8px}
.figpair figcaption b{color:var(--ink); font-weight:600}
.fhead{display:block; font:500 10px/1 "IBM Plex Mono",monospace; letter-spacing:.14em;
       text-transform:uppercase; color:var(--mut); margin-bottom:10px}

/* The chart itself. Colours here, geometry in the SVG attributes — the markup
   carries no style= attribute at all (marketing/spectra.py). */
.spx{display:block; width:100%; height:auto; background:var(--card);
     border:1px solid var(--line); border-radius:var(--r)}
.spx-tr{fill:none; stroke:var(--brand); stroke-width:1; stroke-linejoin:round}
.spx-ax{stroke:var(--line); stroke-width:1}
.spx-g{stroke:#C9D2CD; stroke-width:1; stroke-dasharray:2 3}
/* Sizes are viewBox units, which the SVG scales with its rendered width. The
   400-unit box (marketing/spectra.py) makes 9 units ~9px in the two-column grid
   and ~6px on a 320px phone; the tables below the charts carry the same numbers
   as text, which is what makes the small end acceptable rather than a loss. */
.spx-lb{font:500 9px/1 "IBM Plex Mono",monospace; letter-spacing:.02em; fill:var(--ink)}
.spx-tk{font:400 8px/1 "IBM Plex Mono",monospace; fill:var(--mut)}

/* The verdict banner. Left rule in the zone colour, never a fill: the report's
   own rule is that colour decorates the sentence and never carries it. */
.verdict{border:1px solid var(--line); border-left:3px solid var(--zoneA);
         border-radius:var(--r); background:var(--card); padding:18px 20px; margin:22px 0 18px}
.verdict p{margin:0; max-width:70ch}
.verdict .vlead{font-size:16.5px; line-height:1.5}
.verdict .vsig{margin-top:12px; font-size:13px; color:var(--mut)}
/* Not-verified is the point of the page, so it gets the amber rule the report
   uses for a qualified answer — not green, which would read as "fixed". */
.verdict.unresolved{border-left-color:#B5893F}

/* Tables inherit .mtable from style.css; these two additions only. */
.mtable td.zone{font:500 12px/1.6 "IBM Plex Mono",monospace; letter-spacing:.08em}
.tscroll{overflow-x:auto; margin:14px 0 4px}

.dl-row{display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 10px}
/* Session UX-4 · U10 named these two by their labels -- "Sample report
   (PDF)" and "The worked before/after" -- as the monospace buttons among
   sans-serif ones. They join style.css's one button system: same family,
   weight, size, radius and height as .btn-ghost, differing only in fill. */
.dl-row a{font:600 var(--t-base)/1 "IBM Plex Sans",system-ui,sans-serif;
          display:inline-flex; align-items:center; justify-content:center;
          min-height:var(--ctl-h);
          border:1px solid var(--line); border-radius:var(--r); background:var(--card);
          color:var(--ink); padding:0 var(--s-4)}
.dl-row a:hover{border-color:var(--brand); color:var(--brand); text-decoration:none}

/* ── wider viewports ──────────────────────────────────────────────────*/
@media (min-width:641px){
  .msec{padding:44px 0 8px}
  .msec h2{font-size:28px}
  .mgrid{grid-template-columns:1fr 1fr; gap:24px 32px}
  .figpair{grid-template-columns:1fr 1fr}
  .packs{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1000px){
  .msec h2{font-size:30px}
}

/* ── the phone floor ──────────────────────────────────────────────────
   Nothing scrolls sideways; the one primary action is full width; long
   machine-shaped strings wrap rather than push the page out. */
@media (max-width:640px){
  .msec h2{font-size:22px}
  .pack, .mgrid > li, .figpair figure{min-width:0}
  /* Session UX-4 · REMOVED, and this is where it had to be removed:
     /marketing.css is linked after /style.css, so this rule beat the table
     treatment there no matter where that rule sat. `overflow-wrap:anywhere`
     is right for an alias somebody typed and wrong for a corpus name or a
     number -- it is what broke "CWRU bearings" into "CWR / U / beari / ngs"
     and "20/24" into one character per line (U2), and "0.01414" into
     "0.01 / 414" (U3). The table scrolls instead; see style.css's UX-4
     layer. */
  .dl-row a{width:100%; text-align:center}
  .verdict{padding:16px 16px}
}