@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@500;600;700&family=IBM+Plex+Mono:wght@400;600&display=swap');
/* Shared structure for the three v4 options. Each style file sets the tokens and the personality. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.5; }
a { color: inherit; }
img { max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
h1, h2 { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.02; }
h1 { font-size: clamp(2.4rem, 7vw, 6.2rem); max-width: 16ch; }
h2 { font-size: clamp(1.8rem, 4.2vw, 3.4rem); max-width: 20ch; }
.eyebrow { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.4rem; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width: 52ch; margin-top: 1.6rem; color: var(--ink2); }
.body { max-width: 60ch; margin-top: 1.4rem; color: var(--ink2); font-size: 1.05rem; }
.h3 { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; }

/* top bar */
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 2rem; padding: 0.9rem clamp(16px, 4vw, 56px); background: var(--bg); border-bottom: 1px solid var(--line); }
.wordmark { font-family: var(--mono); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; font-size: 0.95rem; }
.topnav { display: flex; gap: 1.6rem; margin-left: auto; }
.topnav a { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--ink2); }
.topnav a:hover { color: var(--ink); }
.topcta { display: flex; gap: 0.6rem; }

/* buttons */
.btn { display: inline-block; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; padding: 0.85rem 1.3rem; border: 1px solid var(--ink); border-radius: var(--radius); line-height: 1; }
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.actions { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 2.2rem; }

/* rail */
.rail { position: fixed; right: clamp(12px, 2.5vw, 40px); top: 50%; transform: translateY(-50%); z-index: 5; }
.rail ol { border-right: 1px solid var(--line2); }
.rail li a { position: relative; display: block; padding: 0.55rem 0.9rem 0.55rem 0; text-decoration: none; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-align: right; }
.rail li a .t { position: absolute; right: 100%; top: 50%; transform: translateY(-50%); margin-right: 0.6rem; white-space: nowrap; opacity: 0; transition: opacity .15s; }
.rail li a:hover .t { opacity: 1; }
.rail li a .n { position: relative; display: inline-block; }
.rail li a .n::after { content: ""; position: absolute; right: -0.95rem; top: 50%; width: 0.5rem; height: 1px; background: var(--line2); }
.rail li a:hover { color: var(--accent); }

/* chapters */
main { padding: 0 clamp(16px, 4vw, 56px); }
.chapter { padding: clamp(4rem, 10vw, 8rem) 0; max-width: 1180px; margin: 0 auto; border-top: 1px solid var(--line); }
.chapter.hero { border-top: 0; padding-top: clamp(3rem, 8vw, 6rem); }
.chapter.hero h1 em { font-style: normal; }

/* product drawings */
.product { margin: clamp(2.5rem, 6vw, 4.5rem) 0 0; background: var(--panel); border: 1px solid var(--line2); border-radius: var(--radius-lg); overflow: hidden; }
.product figcaption { display: flex; gap: 1rem; align-items: baseline; padding: 0.8rem 1.2rem; border-bottom: 1px solid var(--line2); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.product figcaption .tag { color: var(--ink); font-weight: 700; }
.today .briefing { padding: 1.2rem 1.2rem; border-bottom: 1px solid var(--line2); font-size: 1.05rem; max-width: 70ch; }
.decisions li { display: grid; grid-template-columns: 9.5rem 1fr 11rem 6rem; gap: 1rem; align-items: baseline; padding: 0.95rem 1.2rem; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.decisions .kind { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.decisions .who { color: var(--muted); font-size: 0.85rem; }
.decisions .state { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; text-align: right; color: var(--muted); }
.decisions .state.due { color: var(--accent); }
.today .run { display: flex; gap: 1.2rem; align-items: baseline; padding: 0.9rem 1.2rem; font-size: 0.9rem; }
.today .runlabel { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

/* compare */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 2.6rem; }
.pane { border: 1px solid var(--line2); border-radius: var(--radius-lg); background: var(--panel); overflow: hidden; display: flex; flex-direction: column; }
.paneh { display: flex; justify-content: space-between; padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--line2); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.paneh .who { font-weight: 700; }
.paneh .what { color: var(--muted); }
.pane.new .paneh .what { color: var(--accent); }
.pane .screen { padding: 1.1rem; flex: 1; }
.pane.old .screen { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; align-content: start; }
.widget { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.8rem; display: flex; flex-direction: column; gap: 0.4rem; }
.widget .lbl { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.widget .val { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; }
.dkind { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.dtitle { font-size: 1.15rem; font-weight: 700; margin-top: 0.5rem; line-height: 1.25; }
.dwhy { margin-top: 0.7rem; font-size: 0.92rem; color: var(--ink2); }
.dcheck { margin-top: 0.9rem; border-top: 1px solid var(--line); }
.dcheck li { padding: 0.45rem 0 0.45rem 1.5rem; border-bottom: 1px solid var(--line); font-size: 0.88rem; position: relative; }
.dcheck li::before { content: ""; position: absolute; left: 0; top: 0.6rem; width: 0.8rem; height: 0.8rem; border: 1px solid var(--ink2); border-radius: 2px; }
.dwho { margin-top: 0.9rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.panenote { padding: 0.8rem 1.1rem; border-top: 1px solid var(--line2); font-size: 0.88rem; color: var(--muted); }

/* kinds */
.kinds { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line2); border-left: 1px solid var(--line2); margin-top: 2.6rem; counter-reset: k; }
.kinds li { border-right: 1px solid var(--line2); border-bottom: 1px solid var(--line2); padding: 1.2rem 1.2rem 1.4rem; display: flex; flex-direction: column; gap: 0.4rem; counter-increment: k; }
.kinds li::before { content: counter(k, decimal-leading-zero); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--accent); }
.kinds .k { font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.kinds .s { font-size: 0.9rem; color: var(--ink2); }

/* package */
.package { margin-top: 2.6rem; border-top: 1px solid var(--line2); max-width: 760px; }
.package li { display: grid; grid-template-columns: 3rem 1fr; align-items: baseline; padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
.package .n { font-family: var(--mono); font-size: 0.8rem; color: var(--accent); }
.package .p { font-size: 1.15rem; font-weight: 600; }

/* record */
.record table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.record th { text-align: left; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: 0.7rem 1.2rem; border-bottom: 1px solid var(--line2); }
.record td { padding: 0.75rem 1.2rem; border-bottom: 1px solid var(--line); }
.record td.ok { color: var(--good); font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.record td.bad { color: var(--accent); font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.record .sum { padding: 0.9rem 1.2rem; font-size: 0.9rem; color: var(--ink2); }

/* two-column */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2.4rem; max-width: 760px; }
.two ul li { padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
.two.runs p:not(.h3) { color: var(--ink2); }

/* cta + footer */
.chapter.cta { padding-bottom: clamp(5rem, 12vw, 9rem); }
.foot { padding: 2rem clamp(16px, 4vw, 56px); border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.foot .vision { max-width: 60ch; font-size: 0.9rem; color: var(--ink2); }
.foot .legal { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); display: flex; gap: 1.2rem; }
.foot .legal a { text-decoration: none; }

/* phone */
@media (max-width: 860px) {
  .rail { display: none; }
  .topnav { display: none; }
  .decisions li { grid-template-columns: 1fr; gap: 0.3rem; }
  .decisions .state { text-align: left; }
  .compare, .two, .kinds { grid-template-columns: 1fr; }
  .pane.old .screen { grid-template-columns: 1fr 1fr; }
  .today .run { flex-direction: column; gap: 0.3rem; }
}

/* OPTION B - Control room. Near-black, one amber signal colour, the product drawn like the
   screens in a control room: hairlines, monospace figures, nothing decorative. */
:root {
  --bg: #0c0e10; --panel: #111417; --ink: #ecebe6; --ink2: #b7b5ad; --muted: #7b7a74;
  --line: #1e2226; --line2: #2b3035; --accent: #f2a72a; --good: #5ad186;
  --sans: "IBM Plex Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --radius: 2px; --radius-lg: 4px;
}
body { background-image: radial-gradient(ellipse at 20% 0%, rgba(242,167,42,0.07), transparent 55%); }
h1 { font-weight: 700; letter-spacing: -0.03em; }
.chapter.hero h1 em { color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #141210; }
.btn-primary:hover { background: #ffc158; border-color: #ffc158; color: #141210; }
.btn-ghost { border-color: var(--line2); color: var(--ink); }
.eyebrow { color: var(--accent); }
.eyebrow::before { content: "▮ "; }
.product figcaption, .paneh { background: #0e1114; }
.decisions .title, .dtitle { font-family: var(--sans); }
.decisions .state.due { background: rgba(242,167,42,0.12); padding: 0.15rem 0.4rem; }
.widget .val { font-family: var(--mono); font-weight: 600; }
.record td:nth-child(2), .record td:nth-child(3) { font-family: var(--mono); }
.kinds li { background: var(--bg); }
.kinds li::before { color: var(--accent); }
.top { background: rgba(12,14,16,0.92); backdrop-filter: blur(8px); }

.foot .vision { color: var(--muted); }

/* ---- v4 on top of option B, and nothing more (Azim, 20:35: "where's the elegance of [option B]").
   Two additions only: the logo image in the bar in place of the text wordmark, and one
   photograph band before chapter 04. The type, the amber and the dark ground are B's as drawn. ---- */
.wordmark img { display: block; height: 46px; width: auto; }
.band { position: relative; margin: 0 calc(-1 * clamp(16px, 4vw, 56px)); height: clamp(260px, 36vw, 460px); overflow: hidden; }
.band img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; filter: saturate(0.5) brightness(0.7); }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg) 0%, rgba(12,14,16,0.3) 30%, rgba(12,14,16,0.35) 70%, var(--bg) 100%); }
.band .bandline { position: absolute; left: clamp(16px, 4vw, 56px); right: clamp(16px, 4vw, 56px); bottom: clamp(1.5rem, 5vw, 3rem); z-index: 1; font-weight: 700; letter-spacing: -0.02em; font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1.1; max-width: 26ch; margin: 0 auto; color: var(--ink); }
@media (min-width: 1300px) { .band .bandline { left: calc((100% - 1180px) / 2); margin: 0; } }
@media (max-width: 860px) { .wordmark img { height: 38px; } }

/* ---- smaller type, and the product beside the words on the first screen
   (Azim, 20:33: "this is too big. the whole page with just giant text.") ---- */
h1 { font-size: clamp(2.1rem, 3.4vw, 3.5rem); max-width: 18ch; line-height: 1.06; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 2.4vw, 2.3rem); max-width: 26ch; line-height: 1.12; }
.chapter.cta h2 { font-size: clamp(1.8rem, 3vw, 2.9rem); }
.lead { font-size: clamp(1rem, 1.2vw, 1.12rem); max-width: 52ch; margin-top: 1.2rem; }
.body { font-size: 1rem; }
.eyebrow { margin-bottom: 1rem; }
.actions { margin-top: 1.8rem; }
.chapter { padding: clamp(3rem, 7vw, 5.5rem) 0; }
/* the hero: words on the left, the Today page on the right, on one screen */
@media (min-width: 1100px) {
  .chapter.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 3.5rem; align-items: center; padding-top: clamp(2.5rem, 5vw, 4rem); }
  .chapter.hero > .eyebrow, .chapter.hero > h1, .chapter.hero > .lead, .chapter.hero > .actions { grid-column: 1; }
  .chapter.hero > .product.today { grid-column: 2; grid-row: 1 / span 4; margin: 0; align-self: center; }
  .chapter.hero h1 { max-width: none; }
}
.today .briefing { font-size: 0.95rem; }
.decisions li { grid-template-columns: 7.5rem 1fr 9rem 5rem; padding: 0.8rem 1.1rem; font-size: 0.88rem; }
.today .run { font-size: 0.85rem; }

/* ---- 07 security, first version (seven items) - superseded 20:47, rules kept for .package.security
   in case it returns ---- (Azim, 20:43: "add a section about security - from what we support") ---- */
.package.security li { grid-template-columns: 3rem 1fr; grid-template-rows: auto auto; padding: 1rem 0; }
.package.security .n { grid-row: 1 / span 2; align-self: start; padding-top: 0.2rem; }
.package.security .p { font-size: 1.05rem; }
.package.security .s { grid-column: 2; font-size: 0.92rem; color: var(--ink2); margin-top: 0.3rem; }
.notyet { margin-top: 2.2rem; max-width: 760px; border: 1px solid var(--line2); padding: 1.1rem 1.2rem; border-radius: var(--radius-lg); }
.notyet ul li { padding: 0.35rem 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.notyet ul li:last-child { border-bottom: 0; }

/* ---- 07 security as a deployment posture: two axes, two answers each (Azim, 20:47: "I meant
   deployment security posture - hosted vs private cloud/data center, public llm vs local") ---- */
.posture { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-top: 2.4rem; }
.axis { border: 1px solid var(--line2); border-radius: var(--radius-lg); background: var(--panel); padding: 1.2rem 1.3rem; }
.axis .h3 { margin-bottom: 1rem; }
.opt { padding: 0.9rem 0; border-top: 1px solid var(--line); }
.opt p { font-size: 0.95rem; color: var(--ink2); }
.optname { font-weight: 700; color: var(--ink) !important; font-size: 1.05rem !important; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.35rem; }
.optname .state { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); font-weight: 400; white-space: nowrap; }
.body.small { font-size: 0.92rem; margin-top: 1.8rem; color: var(--muted); max-width: 70ch; }
@media (max-width: 860px) { .posture { grid-template-columns: 1fr; } }

/* ---- the gauge replaces the numbered rail (Azim, 21:05: "this seems the same as torus. don't
   copy it. do something original"). A level gauge, bottom right: one segment per chapter, filled
   to where you are, the chapter's name beside it. Reads like an instrument, not a table of
   contents. ---- */
.rail { display: none; }
.gauge { position: fixed; right: clamp(12px, 2.5vw, 40px); bottom: 18px; z-index: 6; display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.7rem; background: var(--panel); border: 1px solid var(--line2); border-radius: var(--radius-lg); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); box-shadow: 0 8px 30px rgba(20,24,27,0.12); }
.gauge .gname { color: var(--ink); white-space: nowrap; }
.gauge .gsegs { display: flex; gap: 3px; }
.gauge .gsegs a { display: block; width: 14px; height: 10px; background: var(--line); border-radius: 1px; transition: background .2s; }
.gauge .gsegs a.on { background: var(--line2); }
.gauge .gsegs a.here { background: var(--accent); }
.gauge .gsegs a:hover { background: var(--ink); }
.gauge .gcount b { color: var(--ink); font-weight: 400; }
@media (max-width: 860px) { .gauge { display: none; } }

/* the twenty files, three bands */
.bands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 2.4rem; }
.bands ol { list-style: none; counter-reset: none; }
.bands ol li { padding: 0.45rem 0 0.45rem 2.2rem; border-bottom: 1px solid var(--line); position: relative; font-size: 0.98rem; }
.bands ol li::before { content: counter(f, decimal-leading-zero); counter-increment: f; position: absolute; left: 0; top: 0.5rem; font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }
.bands .bandcol:nth-child(1) ol { counter-reset: f 0; }
.bands .bandcol:nth-child(2) ol { counter-reset: f 5; }
.bands .bandcol:nth-child(3) ol { counter-reset: f 13; }
@media (max-width: 860px) { .bands { grid-template-columns: 1fr; gap: 1.2rem; } }

/* ---- the drawing under chapter 04, the way the live architecture page does it (Azim, 21:30:
   "add this hero like this in this section where there's empty white space on the right"):
   the plant drawn across the section, white on the left under the words, the drawing clear on
   the right where the column is empty. v3's own gradient stops, carried over. ---- */
.chapter.drawn { position: relative; }
.chapter.drawn > * { position: relative; z-index: 2; }
.chapter.drawn .drawing { position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: 0; overflow: hidden; }
.chapter.drawn .drawing img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center right; }
.chapter.drawn .drawing .veil { position: absolute; inset: 0; background: linear-gradient(to right, var(--bg) 0%, rgba(247,248,249,0.97) 35%, rgba(247,248,249,0.7) 58%, rgba(247,248,249,0) 80%); }
.chapter.drawn .package { max-width: 620px; }
@media (max-width: 860px) { .chapter.drawn .drawing .veil { background: rgba(247,248,249,0.88); } }

/* 21:33, Azim: "actually move it here. we talk about their plant here." The drawing moves from 04
   to 08, the offer; the chapter gets enough height for the plant to show. */
.chapter.cta.drawn { min-height: 560px; display: flex; flex-direction: column; justify-content: center; }
.chapter.cta.drawn h2, .chapter.cta.drawn .body { max-width: 24ch; }
.chapter.cta.drawn .body { max-width: 48ch; }

/* 21:35, Azim: "make the image smaller so more of it shows." The whole drawing fits the
   chapter's height at the right edge instead of being cropped to fill it. */
.chapter.cta.drawn .drawing img { object-fit: contain; object-position: right center; }
.chapter.cta.drawn .drawing .veil { background: linear-gradient(to right, var(--bg) 0%, var(--bg) 38%, rgba(247,248,249,0.85) 50%, rgba(247,248,249,0.3) 66%, rgba(247,248,249,0) 80%); }
.chapter.cta.drawn { min-height: 600px; }

/* the legal pages: v3's words in the v4 shell */
.chapter.legal { border-top: 0; }
.legal-body { max-width: 72ch; }
.legal-body h1 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); margin-bottom: 1rem; }
.legal-body h2 { font-size: 1.15rem; margin: 1.8rem 0 0.5rem; max-width: none; }
.legal-body p, .legal-body li { margin: 0.6rem 0; font-size: 1rem; color: var(--ink2); }
.legal-body ul { list-style: disc; padding-left: 1.4rem; }
.legal-body a { color: var(--accent); }

/* ---- chapter 04 filled out (Azim, 21:41: "the section looks spare"): the seven parts with a
   line each on the left, a drawn decision package on the right ---- */
.verify-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3rem; margin-top: 2.6rem; align-items: start; }
.verify-grid .package { margin-top: 0; max-width: none; }
.package li { grid-template-rows: auto auto; }
.package .n { grid-row: 1 / span 2; align-self: start; padding-top: 0.25rem; }
.package .s { grid-column: 2; font-size: 0.9rem; color: var(--ink2); margin-top: 0.2rem; }
.package-screen { margin: 0; }
.pk { padding: 1.1rem 1.2rem 1.2rem; }
.pk-n { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 0.9rem; }
.pk-n:first-child { margin-top: 0; }
.pk-title { font-size: 1.1rem; font-weight: 700; line-height: 1.3; margin-top: 0.25rem; }
.pk-text { font-size: 0.92rem; color: var(--ink2); margin-top: 0.25rem; }
.pk-links { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pk-links span { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; padding: 0.25rem 0.5rem; border: 1px solid var(--line2); border-radius: var(--radius); color: var(--ink); }
.pk .dcheck { margin-top: 0.4rem; }
.pk-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line2); }
.pk-btn { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.6rem 0.9rem; border: 1px solid var(--line2); border-radius: var(--radius); color: var(--ink); }
.pk-btn.primary { background: var(--accent); border-color: var(--accent); color: #141210; }
.pk-note { font-size: 0.82rem; color: var(--muted); margin-left: auto; }
@media (max-width: 860px) { .verify-grid { grid-template-columns: 1fr; gap: 1.6rem; } }

/* 21:43, Azim: "make the right black box fit the left text height." Both columns take the same
   height: the screen is set tighter, and the seven parts share whatever remains between them. */
.verify-grid { align-items: stretch; }
.verify-grid .package { display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.verify-grid .package li { flex: 1 1 auto; align-content: center; }
.package-screen { display: flex; flex-direction: column; height: 100%; }
.package-screen .pk { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 0.9rem 1.1rem 1rem; }
.pk-n { margin-top: 0.55rem; font-size: 0.64rem; }
.pk-title { font-size: 1.02rem; }
.pk-text { font-size: 0.88rem; margin-top: 0.15rem; }
.pk-links span { font-size: 0.68rem; padding: 0.2rem 0.45rem; }
.pk .dcheck { margin-top: 0.3rem; }
.pk .dcheck li { padding: 0.35rem 0 0.35rem 1.4rem; font-size: 0.86rem; }
.pk .dcheck li::before { top: 0.5rem; }
.pk-actions { margin-top: 0.8rem; padding-top: 0.8rem; }
.pk-btn { padding: 0.5rem 0.8rem; }

/* WordPress's admin bar, seen only when logged in, sits above the sticky bar */
body.admin-bar .top { top: 32px; }
@media (max-width: 782px) { body.admin-bar .top { top: 46px; } }


/* v5: the scope line under the headline, and the gate under the pilot buttons. Same voice as .lead,
   smaller, with the ochre rule the eyebrows use so it reads as a label, not as more lead copy. */
.hero .scope { max-width: 46rem; margin: 0 0 1.4rem; padding-left: .9rem; border-left: 3px solid var(--accent);
  font-size: clamp(1rem, 1.15vw, 1.15rem); line-height: 1.5; color: var(--ink2); }
.hero .scope strong { color: var(--ink); }
.chapter.cta .gate { max-width: 40rem; margin: 1.6rem 0 0; font-size: .98rem; line-height: 1.55; color: var(--ink2); }
.chapter.cta .gate strong { color: var(--ink); }

/* v5: the phone fix. Line ~185 re-set .decisions li to four fixed columns AFTER the 860px media
   query above it, so at 390px the rows kept 21.5rem of fixed columns and the four state chips sat
   62-83px past the viewport's right edge (measured on live v4 with a real 390px viewport, 6-Oct;
   nothing else overflowed). The cascade's last word has to be the narrow one. */
@media (max-width: 860px) {
  .decisions li { grid-template-columns: 1fr; gap: 0.3rem; }
  .product, .pane, .record, .verify-grid, .posture, .bands { max-width: 100%; min-width: 0; }
}

/* 5.0.1 (Azim, 6-Oct-2026: "make this wider"): the hero's text column was 5 of 12 and the Today
   screen 7; the headline wrapped to seven lines beside a screen with room to spare. Now the text
   column takes the larger share and the screen the smaller; the scope line rides in column 1 too
   (it was added after the grid rule and fell to the implicit row). */
@media (min-width: 1100px) {
  .chapter.hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 3rem;
    grid-template-rows: auto auto auto auto 1fr; align-items: start; }
  .chapter.hero > .scope { grid-column: 1; }
  .chapter.hero > .product.today { grid-row: 1 / span 5; align-self: start; }
  .chapter.hero .decisions li { grid-template-columns: 6.5rem 1fr 8rem 4.5rem; }
}
/* 5.0.2 (Azim: "this is not centered anymore"): the first 5.0.1 gave the hero 100px more than the
   other chapters, all to the right, so the hero sat off-centre against the page's own padding.
   Instead every chapter is 1280px wide (was 1180) and centred, so the hero's two equal columns get
   the room the headline needs and the whole page stays one centred column. */
.chapter { max-width: 1280px; }
@media (min-width: 1300px) { .band .bandline { left: calc((100% - 1280px) / 2); } }

/* THE LIGHT VARIANT of v4. Same layout, same type, same chapters; only the ground and the
   colours change. Not option A's warm paper (Azim: "too much like torus"): a cool, near-white
   ground, graphite type, the amber kept dark enough to read on white, the button graphite. */
:root {
  --bg: #f7f8f9; --panel: #ffffff; --ink: #15181b; --ink2: #3f454b; --muted: #7b838b;
  --line: #e4e7ea; --line2: #cfd4d9; --accent: #b86e07; --amber: #b86e07; --good: #1f7a4d;
}
body { background-image: none; }
.top { background: rgba(247,248,249,0.94); backdrop-filter: blur(8px); border-bottom-color: var(--line2); }
.btn-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-ghost { border-color: var(--line2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.chapter.hero h1 em { color: var(--accent); }
.eyebrow { color: var(--accent); }
.product, .pane { box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 12px 40px rgba(20,24,27,0.06); }
.product figcaption, .paneh { background: #fbfbfc; }
.decisions .state.due { color: var(--accent); background: rgba(184,110,7,0.1); }
.kinds li { background: var(--panel); }
.foot .vision { color: var(--ink2); }
.band img { filter: saturate(0.7) brightness(0.85); }
.band::after { background: linear-gradient(180deg, var(--bg) 0%, rgba(247,248,249,0.05) 30%, rgba(247,248,249,0.1) 70%, var(--bg) 100%); }
.band .bandline { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,0.55); }

/* THE MIX: the light page, with the product drawn as dark screens. The ground, type and buttons
   are the light variant's; every place the product itself is shown - the Today page, the
   Decision OS pane, the record - is the dark variant's panel with its amber, so the product
   reads as a screen in a bright room. The "dashboard" pane stays light on purpose: it is the
   old thing, and the contrast is the argument. Appended after style-light.css. */
.product, .pane.new {
  --panel: #111417; --ink: #ecebe6; --ink2: #b7b5ad; --muted: #7b7a74; --line: #1e2226; --line2: #2b3035;
  --accent: #f2a72a; --amber: #f2a72a; --good: #5ad186;
  background: var(--panel); color: var(--ink); border-color: var(--line2);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 18px 50px rgba(20,24,27,0.18);
}
.product figcaption, .pane.new .paneh { background: #0e1114; }
.product figcaption .tag, .pane.new .paneh .who { color: var(--ink); }
.decisions .state.due { color: var(--amber); background: rgba(242,167,42,0.12); }
.pane.new .dcheck li::before { border-color: var(--ink2); }
.record td.bad { color: var(--accent); }
.record td.ok { color: var(--good); }