/*
 * Public site: the Wōden page (/), the Code Legion page (/code-legion), and
 * sign in (/login, /signup). Always dark; colors and type come from brand.css.
 * Brand rules: hairline borders, square corners, no shadows or gradients.
 */
@import url("legion/brand.css");

:root {
    --s-ground: var(--brand-obsidian);
    --s-ink: var(--brand-bone);
    --s-dim: var(--brand-parchment);
    --s-accent: var(--brand-sand);
    --s-faint: var(--brand-umber);
    --s-line: var(--brand-loam);
    --s-line-soft: color-mix(in srgb, var(--brand-loam) 45%, var(--brand-obsidian));
    --s-gutter: clamp(16px, 4.5vw, 64px);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body.site {
    background: var(--s-ground);
    color: var(--s-ink);
    font-family: var(--brand-sans);
    -webkit-font-smoothing: antialiased;
    color-scheme: dark;
}
.site a { color: inherit; text-decoration: none; }
.site a:hover { color: var(--s-accent); }
.site a:focus-visible, .site button:focus-visible, .site input:focus-visible {
    outline: 2px solid var(--s-accent);
    outline-offset: 3px;
}
.wrap { max-width: 1440px; margin: 0 auto; padding-inline: var(--s-gutter); }
.is-hidden { display: none !important; }

/* Wordmarks */
/* Official outlined artwork (static/brand/). The SVGs carry their own clear
   space, so a negative margin lines the letters up with the text column.
   font-size on the wrapper sets the size; the artwork is never recolored. */
.wm-legion, .wm-woden { display: inline-flex; align-items: center; line-height: 1; white-space: nowrap; }
.wm-img { display: block; width: auto; }
.wm-woden .wm-img { height: 1em; margin-left: -0.127em; }
.wm-legion .wm-img { height: 1.33em; margin-left: -0.149em; }

/* Type */
.display { font-family: var(--brand-serif); font-weight: 400; letter-spacing: -0.025em; line-height: 0.95; margin: 0; }
.eyebrow {
    margin: 0 0 28px;
    font-family: var(--brand-sans);
    font-weight: 500;
    font-size: 11px;
    line-height: 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--s-accent);
}
.lede { margin: 0; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--s-dim); }

/* Buttons and links */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 28px;
    border: 0;
    border-radius: 0;
    background: var(--s-ink);
    color: var(--s-ground) !important;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease;
}
.btn:hover { background: var(--s-accent); }
.btn-sm { min-height: 44px; padding: 0 20px; font-size: 15px; }
.arrow-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.arrow { display: inline-block; transition: transform .3s ease; }
a:hover .arrow { transform: translateX(5px); }

/* ---------- Wōden page ---------- */
.woden { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.woden-head { padding: 40px var(--s-gutter) 0; }
.woden-head .wm-woden { font-size: 34px; }
.woden-main {
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px 56px;
    padding: 40px var(--s-gutter) 48px;
}
.woden-copy { flex: 1 1 440px; min-width: 0; }
.woden-copy .display { font-size: clamp(52px, 7vw, 112px); letter-spacing: -0.02em; }
.woden-copy .lede { margin: 32px 0 0; max-width: 30em; }
.woden-copy .eyebrow { margin: 36px 0 0; }
.neurons { flex: 1 1 440px; min-width: 0; max-width: 680px; position: relative; aspect-ratio: 1.3 / 1; }
.neurons canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.woden-foot {
    margin: 0 var(--s-gutter);
    padding: 28px 0 40px;
    border-top: 1px solid var(--s-line);
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: space-between;
    align-items: flex-end;
}
.woden-foot .label { display: block; margin-bottom: 10px; font-size: 13px; color: var(--s-accent); }
.woden-foot .wm-legion { font-size: clamp(28px, 3.4vw, 44px); }
.woden-foot .arrow { font-weight: 400; letter-spacing: 0; margin-left: 14px; }
.small { font-size: 13px; color: var(--s-faint); }

/* ---------- Code Legion page ---------- */

/* Hero rhythm: headline (one unit) → subline → CTAs. --hero-gap is the hero's
   existing step and is used both above the subline and above the CTAs. */
.hero { --hero-gap: clamp(32px, 4vw, 56px); padding-top: clamp(56px, 9vw, 128px); padding-bottom: clamp(72px, 9vw, 128px); container-type: inline-size; }
/* Two equal lines that never wrap, in the display serif at medium (500). The longer
   line is under 9.1em wide, so 10.4cqi keeps it inside the hero down to
   phones, and 30px keeps it in a 320px viewport. Capped at 104px on desktop.
   Line-height: in the display serif "g" descends 0.29em and "l" rises 0.71em, so
   baselines need 1.00em to touch; 1.17 leaves 0.17em of air between the
   lines at every size while keeping them a tight pair. */
.hero .display { font-size: clamp(30px, 10.4cqi, 104px); font-weight: 500; line-height: 1.17; }
.hero-line { display: block; white-space: nowrap; }
.hero-row { display: flex; flex-direction: column; align-items: flex-start; gap: var(--hero-gap); margin-top: var(--hero-gap); }
.hero-row .lede { max-width: 560px; text-wrap: balance; }
.cta-row { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
.cta-row a:not(.btn) { color: var(--s-dim); }

/* The formation (hero animation) */
.fm { font-family: var(--brand-mono); font-size: 12px; line-height: 1.5; color: var(--s-ink); }
.fm-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-bottom: 14px; color: var(--s-faint); letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; }
.fm-cmd { display: flex; gap: 12px; align-items: baseline; padding: 18px 0 22px; border-top: 1px solid var(--s-line); font-size: clamp(14px, 1.35vw, 17px); min-height: 26px; }
.fm-cmd .prompt { color: var(--s-accent); }
.fm-cursor { display: inline-block; width: 0.55em; height: 1.1em; margin-left: 2px; vertical-align: -0.18em; background: var(--s-accent); animation: fm-blink 1.05s steps(1) infinite; }
.fm-cursor.is-off { visibility: hidden; }
@keyframes fm-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.fm-lanes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); column-gap: 32px; border-top: 1px solid var(--s-line); }
.fm-lane { display: flex; flex-direction: column; gap: 6px; padding: 14px 0 12px; border-bottom: 1px solid var(--s-line-soft); opacity: 0.08; transition: opacity .5s ease; }
.fm-lane.is-queued { opacity: 0.45; }
.fm-lane.is-on { opacity: 1; }
.fm-row { display: flex; gap: 10px; align-items: baseline; font-size: 11px; letter-spacing: 0.04em; }
.fm-id { color: var(--s-faint); }
.fm-repo { color: var(--s-accent); }
.fm-status { margin-left: auto; color: var(--s-faint); white-space: nowrap; }
.fm-lane.is-done .fm-status { color: var(--s-ink); }
.fm-title { font-family: var(--brand-sans); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-track { position: relative; height: 1px; margin-top: 4px; background: var(--s-line); }
.fm-fill { position: absolute; left: 0; top: 0; height: 1px; width: 0; background: var(--s-accent); transition: width .12s linear; }
.fm-lane.is-done .fm-fill { background: var(--s-ink); }
.fm-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 18px; min-height: 20px; font-size: 13px; }
.fm-summary { opacity: 0; transition: opacity .6s ease; }
.fm-summary.is-on { opacity: 1; }
.fm-clock { color: var(--s-faint); }

/* ---------- Sign in ---------- */
.signin { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.signin-bg { position: absolute; top: 112px; left: var(--s-gutter); right: var(--s-gutter); bottom: 0; opacity: 0.2; pointer-events: none; overflow: hidden; }
.signin-head { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 32px var(--s-gutter); }
.signin-head .wm-legion { font-size: 26px; }
.signin-main { position: relative; flex-grow: 1; display: flex; align-items: center; justify-content: center; padding: 24px 16px 80px; }
.panel { width: 100%; max-width: 420px; background: var(--s-ground); border: 1px solid var(--s-line); padding: clamp(28px, 4vw, 48px); }
.panel.wide { max-width: 520px; }
.panel h1 { margin: 0 0 28px; font-family: var(--brand-serif); font-weight: 400; font-size: 44px; line-height: 1; letter-spacing: -0.015em; }
.panel form { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.panel label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--s-accent); }
.panel input {
    height: 48px;
    padding: 0 14px;
    background: transparent;
    border: 1px solid var(--s-line);
    border-radius: 0;
    color: var(--s-ink);
    font: inherit;
    font-size: 16px;
    transition: border-color .2s ease;
}
.panel input:focus { outline: none; border-color: var(--s-accent); }
.panel .btn { margin-top: 8px; width: 100%; }
.panel .btn[disabled] { opacity: 0.6; cursor: progress; }
.switch { margin: 8px 0 0; font-size: 14px; color: var(--s-faint); }
.text-btn {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--s-dim);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--s-faint);
}
.text-btn:hover { color: var(--s-accent); }
.form-error { margin: 0 0 20px; padding: 12px 14px; border: 1px solid var(--brand-clay); color: var(--s-ink); font-size: 14px; line-height: 1.45; }
.panel .hint { margin: -8px 0 0; font-size: 13px; line-height: 1.45; color: var(--s-faint); }
.panel h1 + .hint { margin: -16px 0 8px; }
.connectors {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}
.connectors legend {
    padding: 0;
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--s-accent);
}
.panel .chip {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--s-line);
    color: var(--s-ink);
    font-size: 14px;
    cursor: pointer;
}
.panel .chip.chip-full { grid-column: 1 / -1; }
.panel .chip input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
    border: 0;
    padding: 0;
}
.panel .chip:has(input:checked) {
    border-color: var(--s-accent);
    color: var(--s-accent);
}

@media (prefers-reduced-motion: reduce) {
    .arrow, .btn, .fm-lane, .fm-fill, .fm-summary, .panel input { transition: none; }
    .fm-cursor { animation: none; }
}

/* ---------- Billing (signed in) ---------- */
.billing { max-width: 1120px; margin: 0 auto; padding: clamp(32px, 5vw, 64px) var(--s-gutter) 96px; }
.billing-title { font-size: clamp(48px, 6vw, 80px); padding-bottom: 40px; border-bottom: 1px solid var(--s-line); }
.billing-section { padding: 48px 0 56px; border-bottom: 1px solid var(--s-line); }
.billing-section h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.billing-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 32px; margin-bottom: 28px; }
.billing-head p { margin: 0; font-size: 15px; color: var(--s-faint); }
.packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 640px) { .packs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .pack { padding: 18px; min-height: 112px; } .pack-amount { font-size: 30px; } }
.pack { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 128px; padding: 24px; border: 1px solid var(--s-line); color: var(--s-ink) !important; transition: border-color .2s ease; }
a.pack:hover { border-color: var(--s-accent); }
.pack-amount { font-family: var(--brand-serif); font-size: 44px; line-height: 1; }
.pack-amount.pack-other { font-family: var(--brand-sans); font-size: 20px; font-weight: 600; line-height: 1.2; }
.pack-action { font-size: 14px; color: var(--s-accent); }
.pack.is-off, .btn-ghost.is-off { opacity: 0.45; cursor: default; }
.billing-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; }
.billing-row p { margin: 12px 0 0; max-width: 560px; font-size: 16px; line-height: 1.55; color: var(--s-dim); }
.btn-ghost { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border: 1px solid var(--s-line); color: var(--s-ink) !important; font-size: 15px; font-weight: 600; transition: border-color .2s ease; }
a.btn-ghost:hover { border-color: var(--s-accent); }
.billing-foot { margin: 32px 0 0; font-size: 14px; line-height: 1.6; color: var(--s-faint); }
.billing-foot a { color: var(--s-dim); text-decoration: underline; text-underline-offset: 3px; }
.signin-head .arrow-link { font-size: 15px; color: var(--s-dim); }

/* Sign-up agreement */
.agree { margin: -4px 0 0; font-size: 13px; line-height: 1.5; color: var(--s-faint); }
.agree a { color: var(--s-dim); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--s-faint); }

/* Legal pages */
.legal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 40px var(--s-gutter) 0; }
.legal-head .wm-woden { font-size: 34px; }
.legal-head a:not(.wm-woden) { font-size: 15px; color: var(--s-dim); }
.legal { max-width: 760px; margin: 0 auto; padding: clamp(56px, 8vw, 112px) var(--s-gutter) 120px; }
.legal h1 { font-size: clamp(48px, 6.4vw, 88px); }
.legal .updated { margin: 28px 0 0; font-size: 15px; color: var(--s-faint); }
.legal-doc { margin-top: 48px; padding-top: 8px; border-top: 1px solid var(--s-line); }
.legal-doc h2 { margin: 56px 0 16px; font-family: var(--brand-serif); font-weight: 400; font-size: 30px; line-height: 1.15; letter-spacing: -0.01em; }
.legal-doc h2 span { display: inline-block; width: 48px; color: var(--s-faint); }
.legal-doc p, .legal-doc li { font-size: 17px; line-height: 1.7; color: var(--s-dim); }
.legal-doc p { margin: 0 0 16px; }
.legal-doc ul { margin: 0 0 16px; padding-left: 20px; }
.legal-doc li { margin-bottom: 6px; }
.legal-doc strong { color: var(--s-ink); font-weight: 600; }
.legal-doc .tbd { color: var(--s-accent); }

/* ---------- Code Legion page (/code-legion) ----------
 * Always dark, apart from the Bone band in pricing. Square corners, hairlines,
 * no shadows, glows or gradients. Greys are Bone mixed into Obsidian. */
.cl {
    --cl-body: color-mix(in srgb, var(--brand-parchment) 78%, var(--brand-obsidian));
    --cl-quiet: color-mix(in srgb, var(--brand-parchment) 64%, var(--brand-obsidian));
    --cl-mute: color-mix(in srgb, var(--brand-parchment) 45%, var(--brand-obsidian));
    --cl-rule: color-mix(in srgb, var(--brand-bone) 8%, var(--brand-obsidian));
    --cl-rule-soft: color-mix(in srgb, var(--brand-bone) 5%, var(--brand-obsidian));
    --cl-line: color-mix(in srgb, var(--brand-bone) 14%, var(--brand-obsidian));
    --cl-line-strong: color-mix(in srgb, var(--brand-bone) 20%, var(--brand-obsidian));
    --cl-band: color-mix(in srgb, var(--brand-obsidian) 78%, #000);
    --cl-good: var(--brand-state-good-dark);
    --cl-run: var(--brand-state-run-dark);
    --cl-attn: var(--brand-state-attn-dark);
    --cl-gutter: clamp(16px, 4vw, 32px);
}
.cl-wrap { max-width: calc(1200px + 2 * var(--cl-gutter)); margin: 0 auto; padding-inline: var(--cl-gutter); }
.cl-section { padding-block: clamp(88px, 11vw, 150px); }
.cl-rule { border-top: 1px solid var(--cl-rule); }
.cl-band { background: var(--cl-band); }
.cl-eyebrow { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-umber); }
.cl-title { display: flex; flex-direction: column; gap: 16px; }
.cl-stack { display: flex; flex-direction: column; gap: 26px; }
.cl-h2 { margin: 0; font-family: var(--brand-serif); font-weight: 500; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.05; }
.cl-body { margin: 0; font-size: 18px; line-height: 1.6; color: var(--cl-body); }
.cl-sub { margin: 0; font-size: 19px; color: var(--cl-body); }
.cl-kicker { margin: 6px 0 0; font-family: var(--brand-serif); font-size: clamp(28px, 2.8vw, 34px); font-weight: 500; line-height: 1.15; color: var(--brand-sand); }
.cl-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 72px; align-items: start; }
.cl-span { grid-column: 1 / -1; }

/* Nav */
.cl-nav { border-bottom: 1px solid var(--cl-rule); }
.cl-nav-in { min-height: 76px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding-block: 12px; }
.cl-nav .wm-legion { font-size: 26px; }
.cl-nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 30px; font-size: 14.5px; }
.cl-nav-start { min-height: 40px; padding: 0 18px; font-size: 14.5px; }
@media (max-width: 560px) { .cl-nav-links { gap: 8px 18px; } }

/* Hero: typography as tuned in .hero; only the spacing is set here. */
.cl-hero { padding-top: clamp(88px, 11vw, 150px); padding-bottom: clamp(88px, 10vw, 140px); }
.cl-hero .hero-row { margin-top: 48px; gap: 44px; }
.cl-hero .lede { font-size: 20px; color: var(--brand-parchment); }
.cl-hero .cta-row { gap: 16px 28px; }
.cl-hero .cta-row a:not(.btn) { color: var(--s-ink); }
.cl-hero .cta-row a:not(.btn):hover { color: var(--s-accent); }

/* Command: the live, read-only Field */
.cl-command { border-top: 1px solid var(--cl-rule); border-bottom: 1px solid var(--cl-rule); }
.cl-command-in { display: flex; flex-direction: column; gap: 40px; padding-block: clamp(80px, 9vw, 110px); }
.cl-command-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.cl-command-head .cl-title { gap: 14px; }
.cl-total { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cl-total-n { font-family: var(--brand-serif); font-size: 56px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.cl-total-label { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cl-good); }
.cl-field-frame { border: 1px solid var(--cl-rule); }
.cl-field-scroll { overflow-x: auto; }
.cl-field { min-width: 820px; }
.cl-field-cols, .cl-frow { display: grid; grid-template-columns: 170px minmax(0, 1fr); }
.cl-field-cols { height: 40px; align-items: center; border-bottom: 1px solid var(--cl-rule); }
.cl-field-cols-in { position: relative; height: 40px; }
.cl-col { position: absolute; top: 50%; transform: translateY(-50%); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cl-mute); white-space: nowrap; }
.cl-col.is-merged { color: var(--cl-good); }
.cl-frow { height: 96px; border-bottom: 1px solid var(--cl-rule-soft); }
.cl-frow:last-child { border-bottom: 0; }
.cl-frow-label { padding-left: 20px; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
.cl-frow-name { font-family: var(--brand-mono); font-size: 14px; }
.cl-frow-sub { font-size: 12px; color: var(--cl-mute); }
.cl-track { position: relative; overflow: hidden; }
.cl-sep { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--cl-rule); }
.cl-merged-zone { position: absolute; top: 0; bottom: 0; left: 84%; right: 0; background: color-mix(in srgb, var(--cl-good) 5%, transparent); }
.cl-u { position: absolute; display: flex; align-items: center; transform: translate(-100%, -50%); transition: left 0.1s linear, opacity 0.4s ease; }
.cl-u.is-fresh { transition: none; }
.cl-u.is-merging { transition: left 0.1s linear; color: var(--cl-good); }
.cl-u-tail { display: none; height: 1px; background: currentColor; opacity: 0.35; }
.cl-u.has-tail .cl-u-tail { display: block; }
.cl-u-dot { display: block; box-sizing: border-box; border-radius: 50%; background: currentColor; }
.cl-u.is-queued { color: var(--brand-umber); }
.cl-u.is-queued .cl-u-dot { background: transparent; border: 1.5px solid currentColor; }
.cl-u.is-planning { color: var(--brand-sand); }
.cl-u.is-coding { color: var(--cl-run); }
.cl-u.is-checking { color: color-mix(in srgb, var(--cl-run) 55%, var(--brand-bone)); }
.cl-u.is-review { color: var(--brand-bone); }
.cl-u.is-waiting { color: var(--cl-attn); }
.cl-count { position: absolute; left: 87%; top: 50%; transform: translateY(-50%); font-family: var(--brand-serif); font-size: 30px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--cl-good); transition: color 0.5s ease; }
.cl-count.is-flash { color: var(--brand-bone); }
.cl-caption { margin: 0; font-size: 15px; color: var(--cl-quiet); }

/* The difference */
.cl-compare { border-top: 1px solid var(--cl-line); }
.cl-compare-head, .cl-compare-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; border-bottom: 1px solid var(--cl-rule); }
.cl-compare-head { padding: 16px 0; border-bottom-color: var(--cl-line); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.cl-compare-head .is-manual { color: var(--cl-mute); }
.cl-compare-head .is-legion { color: var(--brand-sand); }
.cl-compare-row { padding: 22px 0; align-items: baseline; }
.cl-compare-k { font-size: 14px; color: var(--brand-umber); }
.cl-compare-a { font-size: 17px; color: var(--cl-mute); }
.cl-compare-b { font-size: 17px; font-weight: 500; }

/* How it works */
.cl-how { display: flex; flex-direction: column; gap: 64px; }
.cl-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 40px; }
.cl-step { display: flex; flex-direction: column; gap: 16px; padding-top: 24px; border-top: 1px solid var(--cl-line); }
.cl-step.is-last { border-top: 2px solid var(--brand-sand); }
.cl-step-n { font-family: var(--brand-mono); font-size: 13px; color: var(--brand-umber); }
.cl-step h3 { margin: 0; font-family: var(--brand-serif); font-weight: 500; font-size: 30px; }
.cl-step p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--cl-body); }
.cl-points { display: flex; flex-wrap: wrap; gap: 12px 36px; padding-top: 28px; border-top: 1px solid var(--cl-rule); font-size: 14px; color: var(--cl-quiet); }

/* Quality */
.cl-quality { align-items: center; }
.cl-qpoints { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; font-size: 15px; color: var(--brand-parchment); }
.cl-qpoints li { padding-top: 12px; border-top: 1px solid var(--cl-line); }
.cl-chart { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.cl-chart svg { display: block; height: auto; }
.cl-chart-axis { stroke: var(--cl-line); stroke-width: 1; }
.cl-chart-manual, .cl-chart-legion { fill: none; stroke-width: 2; }
.cl-chart-manual { stroke: var(--brand-clay); }
.cl-chart-legion { stroke: var(--cl-good); }
.cl-chart text { font-family: var(--brand-sans); }
.cl-chart-tag { font-size: 13px; }
.cl-chart-tag.is-manual { fill: var(--brand-clay); }
.cl-chart-tag.is-legion { fill: var(--cl-good); }
.cl-chart-tick { font-size: 12px; fill: var(--cl-mute); }
.cl-chart figcaption { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--cl-mute); }
.cl-quality .cl-kicker { margin-top: 8px; }

/* Pricing */
.cl-pricing { display: flex; flex-direction: column; gap: 56px; padding-bottom: clamp(88px, 9vw, 120px); }
.cl-pricing .cl-title { gap: 18px; }
.cl-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 24px; }
.cl-flow-step { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 2px solid var(--cl-line-strong); }
.cl-flow-step.is-charged { border-top-color: var(--cl-good); }
.cl-flow-h { font-size: 18px; font-weight: 600; }
.cl-flow-b { font-size: 15px; line-height: 1.55; color: var(--cl-body); }
.cl-size { display: grid; grid-template-columns: 70px minmax(0, 1fr) 90px; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--cl-rule); align-items: baseline; }
.cl-size-head { padding: 14px 0; border-bottom-color: var(--cl-line); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cl-mute); }
.cl-size-head span:last-child, .cl-size-c { text-align: right; }
.cl-size-k { font-family: var(--brand-mono); font-size: 14px; color: var(--brand-sand); }
.cl-size-h { font-size: 15px; color: var(--brand-parchment); }
.cl-size-c { font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cl-rate { margin: 16px 0 0; font-size: 14px; color: var(--cl-quiet); }
.cl-faq { display: flex; flex-direction: column; }
.cl-faq-label { padding-bottom: 14px; border-bottom: 1px solid var(--cl-line); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cl-mute); }
.cl-faq details { border-bottom: 1px solid var(--cl-rule); }
.cl-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; font-size: 16px; }
.cl-faq summary::-webkit-details-marker { display: none; }
.cl-faq summary:hover { color: var(--brand-sand); }
.cl-plus { font-size: 20px; color: var(--brand-umber); transition: transform 0.2s ease; }
.cl-faq details[open] .cl-plus { transform: rotate(45deg); }
.cl-faq details p { margin: 0 0 20px; font-size: 15px; line-height: 1.6; color: var(--cl-body); }

/* The Bone band */
.cl-bone { background: var(--brand-bone); color: var(--brand-obsidian); color-scheme: light; }
.cl-bone-in { display: flex; flex-direction: column; gap: 56px; padding-block: clamp(88px, 10vw, 130px); }
.cl-bone-h { margin: 0; font-family: var(--brand-serif); font-weight: 500; font-size: clamp(38px, 5.4vw, 76px); line-height: 1.02; letter-spacing: -0.01em; }
.cl-pairs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 40px; }
.cl-pair { display: flex; flex-direction: column; gap: 14px; padding-top: 22px; border-top: 1px solid var(--brand-obsidian); }
.cl-pair-a { font-size: 17px; line-height: 1.5; color: var(--brand-loam); }
.cl-pair-b { font-family: var(--brand-serif); font-size: 30px; font-weight: 500; line-height: 1.15; }
.cl-bone-close { margin: 0; font-family: var(--brand-serif); font-size: clamp(30px, 3.2vw, 38px); font-weight: 500; line-height: 1.15; color: var(--brand-umber); }

/* Customer quotes (hidden until real quotes are in the copy file) */
.cl-quotes { border-bottom: 1px solid var(--cl-rule); }
.cl-quotes-in { display: flex; flex-direction: column; gap: 48px; }
.cl-quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 32px; }
.cl-quote { margin: 0; padding: 32px; border: 1px solid var(--cl-line); display: flex; flex-direction: column; gap: 28px; }
.cl-quote-n { font-family: var(--brand-serif); font-size: 44px; font-weight: 500; color: var(--brand-sand); }
.cl-quote blockquote { margin: 0; font-family: var(--brand-serif); font-size: 24px; line-height: 1.35; color: var(--brand-parchment); }
.cl-quote figcaption { font-size: 14px; color: var(--cl-quiet); }

/* Close and footer */
.cl-close { padding-top: clamp(104px, 12vw, 170px); padding-bottom: clamp(88px, 10vw, 150px); display: flex; flex-direction: column; align-items: center; gap: 64px; text-align: center; }
.cl-close-btn { min-height: 64px; padding: 0 40px; font-size: 19px; }
.cl-maker { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.cl-maker-logo { width: 230px; height: auto; display: block; }
.cl-maker p { margin: 0; max-width: 460px; font-size: 15px; line-height: 1.6; color: var(--cl-quiet); }
.cl-foot { border-top: 1px solid var(--cl-rule); }
.cl-foot-in { padding-block: 32px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--cl-mute); }
.cl-foot-links { display: flex; gap: 24px; }
.cl-foot-links a { color: var(--cl-quiet); }

@media (prefers-reduced-motion: reduce) {
    .cl-u, .cl-count, .cl-plus { transition: none; }
}