/* ══════════════════════════════════════════════════════════════════════════
   Shared stylesheet for the marketing pages beneath the homepage —
   use-cases, and platform / solutions / industries / demo as they are written.

   Separate from wp.css on purpose. Whitepapers are documents: one narrow column,
   optimised for reading five thousand words and printing. These pages are scanned
   in ninety seconds by someone deciding whether to keep reading, so they need a
   wider grid, cards and more air.

   Tokens are copied from the homepage rather than imported, because the homepage
   keeps its CSS inline. If those change, change them here too — the alternative
   was to extract a shared token file, which would mean editing the homepage, and
   the homepage is deliberately not being touched.
   ══════════════════════════════════════════════════════════════════════════ */

/* Match the homepage's typography: Segoe UI body, Cambria serif display headings,
   Consolas labels — all system faces, so there is no webfont round-trip. Each has
   a cross-platform fallback in the stack below. */

:root{
  --navy:#0b1b34; --navy-2:#12294b; --navy-3:#1b3860;
  --em:#0f9d6e; --em-d:#0a6f4e; --em-t:#e9f7f1;
  --bg:#fff; --bg-2:#f5f8fa; --line:#e2e7ee;
  --ink:#0b1b34; --dim:#4a5a72; --faint:#8493a8;
  --red:#c0392b; --amber:#b45309;
  --f:"Segoe UI",-apple-system,system-ui,sans-serif;
  --serif:"Cambria",Georgia,"Times New Roman",serif;
  --m:"Consolas","JetBrains Mono","Fira Code",ui-monospace,monospace;
  --w:1120px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f);color:var(--ink);background:var(--bg);line-height:1.6;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--w);margin:0 auto;padding:0 clamp(20px,4vw,40px)}
section{padding:clamp(3rem,7vh,5rem) 0}
/* Display headings in Fraunces (serif) to match the homepage; card titles (h3)
   stay in the sans body face. */
h1,h2{font-family:var(--serif);font-optical-sizing:auto;font-weight:600;
  letter-spacing:-.018em;line-height:1.08;text-wrap:balance}
h3{letter-spacing:-.02em;line-height:1.15;text-wrap:balance}

/* Section labels are boxed pills, matching the homepage hero pill. */
.eyebrow{display:inline-block;font-family:var(--m);font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--em-d);background:var(--em-t);
  border:1px solid rgba(15,157,110,.25);border-radius:999px;padding:.34rem .9rem}
/* Navy sections (e.g. the "one model" band) get a translucent-mint pill. */
.onemodel .eyebrow,.platform .eyebrow{background:rgba(57,211,155,.1);
  border-color:rgba(57,211,155,.32)}

.btn{display:inline-block;padding:.7rem 1.4rem;border-radius:8px;font-weight:600;
  font-size:.95rem;border:1px solid transparent;
  transition:transform .18s var(--ease),background .18s,border-color .18s,box-shadow .18s,color .18s}
.btn-p{background:var(--em);color:#fff}
.btn-p:hover{background:var(--em-d);transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(15,157,110,.55)}
.btn-g{border-color:var(--line);color:var(--dim);background:#fff}
.btn-g:hover{border-color:var(--em);color:var(--em-d);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* ── page head ───────────────────────────────────────────────────────────── */
.ph{padding:clamp(3rem,7vh,4.5rem) 0 clamp(2rem,4vh,3rem)}
.ph h1{font-size:clamp(2rem,4.6vw,3.1rem);margin:.9rem 0 1rem;max-width:20ch}
.ph h1 em{font-style:italic;color:var(--em)}
.ph-sub{font-size:clamp(1.03rem,1.4vw,1.18rem);color:var(--dim);max-width:56ch}

/* ── role selector: a jump list, because a visitor arrives as one role ────── */
.roles{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.8rem}
.roles a{font-size:.88rem;padding:.45rem .95rem;border:1px solid var(--line);
  border-radius:999px;color:var(--dim);background:#fff}
.roles a:hover{border-color:var(--em);color:var(--em-d)}

/* ── the role blocks ─────────────────────────────────────────────────────── */
.role{border-top:1px solid var(--line);padding:clamp(2rem,4vh,3rem) 0}
.role:first-of-type{border-top:none}
.role-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(1.5rem,4vw,3rem);align-items:start}
@media(max-width:860px){.role-grid{grid-template-columns:1fr}}

.role-who{font-family:var(--m);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint)}
.role h2{font-size:clamp(1.35rem,2.6vw,1.8rem);margin:.4rem 0 .8rem}
.role-q{font-size:1.05rem;color:var(--em-d);font-weight:600;margin-bottom:.9rem}
.role-ctx{color:var(--dim);font-size:.97rem}

/* today / with Prak Knit, side by side — the transformation shape, per role */
.ba{display:grid;gap:.7rem}
.ba-col{border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.2rem;background:#fff}
.ba-col h3{font-family:var(--m);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:.7rem}
.ba-today h3{color:var(--faint)}
.ba-with{border-color:var(--em);background:var(--em-t)}
.ba-with h3{color:var(--em-d)}
.ba-col li{list-style:none;font-size:.93rem;line-height:1.5;padding-left:1.1rem;
  position:relative;margin-bottom:.45rem}
.ba-col li:last-child{margin-bottom:0}
.ba-today li::before{content:'×';position:absolute;left:0;color:var(--red);font-weight:700}
.ba-with li::before{content:'✓';position:absolute;left:0;color:var(--em);font-weight:700}

.role-metric{margin-top:1rem;font-size:.88rem;color:var(--dim);
  border-left:3px solid var(--em);padding-left:.9rem}
.role-metric b{color:var(--ink)}
.role-link{display:inline-block;margin-top:1rem;font-weight:600;font-size:.92rem;
  color:var(--em-d);border-bottom:1px solid transparent}
.role-link:hover{border-bottom-color:var(--em)}

/* ── summary table ───────────────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto;margin-top:1.8rem}
table.tbl{width:100%;border-collapse:collapse;font-size:.92rem;min-width:40rem}
table.tbl th{text-align:left;font-family:var(--m);font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--line);
  padding:.5rem 1rem .5rem 0}
table.tbl td{padding:.65rem 1rem .65rem 0;border-bottom:1px solid var(--line);vertical-align:top}

/* ── closing ─────────────────────────────────────────────────────────────── */
.cta{background:var(--navy);color:#fff;text-align:center}
.cta h2{font-size:clamp(1.6rem,3.4vw,2.3rem)}
.cta h2 em{font-style:italic;color:#39d39b}
.cta p{color:#a9bcd4;max-width:48ch;margin:1rem auto 0}
.cta-act{display:flex;justify-content:center;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.cta .btn-g{background:transparent;border-color:rgba(255,255,255,.25);color:#c3d3e6}
.cta .btn-g:hover{border-color:#39d39b;color:#fff}

.note{background:var(--bg-2)}
.note p{max-width:62ch;color:var(--dim)}