/* GPUVault - guides.
   Long-form article layout, the informative graphics frame, the rent-or-buy
   calculator and the coming-soon notify band. Loads after pages.css and reuses its
   tokens, .glass, .cmp tables and .section rhythm. */

/* ── Article shell ──────────────────────────────────────────────────────── */

.guide-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px;
  margin-top: 18px; color: var(--text-3); font-size: 13.5px;
}
.guide-meta > span + span { padding-left: 14px; border-left: 1px solid var(--line); }

.guide { padding: clamp(38px, 6vh, 72px) var(--pad-x) 0; max-width: 1440px; margin: 0 auto; }

.guide-body {
  max-width: 72ch;
  margin: 0 auto;
  font-size: clamp(16.5px, 1.25vw, 18px);
  line-height: 1.75;
  color: var(--text-2);
}

.guide-body > p { margin-bottom: 22px; }
.guide-body > p > strong, .guide-body li > strong { color: var(--text); font-weight: 650; }
.guide-body em { font-style: italic; }

.guide-body h2 {
  margin: 52px 0 18px;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--text);
  font-weight: 700;
  scroll-margin-top: 100px;
}
.guide-body h2:first-child { margin-top: 0; }

.guide-body h3 {
  margin: 36px 0 12px;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.3;
  color: var(--text);
  font-weight: 650;
  scroll-margin-top: 100px;
}

.guide-body ul, .guide-body ol { margin: 0 0 24px; padding-left: 24px; }
.guide-body li { margin-bottom: 10px; }
.guide-body ul { list-style: none; padding-left: 0; }
.guide-body ul > li { position: relative; padding-left: 26px; }
.guide-body ul > li::before {
  content: ""; position: absolute; left: 6px; top: .68em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--amber);
}
.guide-body ol { list-style: decimal; }
.guide-body ol::marker, .guide-body li::marker { color: var(--amber); }

.guide-body a { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.guide-body a:hover { color: var(--amber-hover); }

.guide-body blockquote {
  margin: 28px 0; padding: 4px 0 4px 22px;
  border-left: 3px solid var(--amber);
  color: var(--text); font-size: 1.05em; line-height: 1.6;
}

.guide-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em; padding: 2px 6px; border-radius: 5px;
  background: rgba(255, 255, 255, .07); color: var(--text);
}

.guide-body hr { margin: 44px 0; border: 0; border-top: 1px solid var(--line); }

.guide-body .table-wrap { margin: 0 0 28px; }

/* ── The short answer ───────────────────────────────────────────────────── */

/* The snippet play. First thing on the page, and the thing an AI overview lifts. */
.answer {
  margin-bottom: 40px; padding: 24px 26px;
  border: 1px solid rgba(245, 166, 35, .38);
  border-left: 4px solid var(--amber);
  border-radius: 14px;
  background: rgba(245, 166, 35, .06);
}
.answer-label {
  display: block; margin-bottom: 10px;
  color: var(--amber); font-size: 11.5px; font-weight: 700; letter-spacing: 2.4px;
}
.answer p { margin: 0; color: var(--text); font-size: 1.06em; line-height: 1.65; }

/* ── Table of contents ──────────────────────────────────────────────────── */

.toc {
  margin: 0 0 44px; padding: 22px 26px;
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(255, 255, 255, .03);
}
.toc-head {
  display: block; margin-bottom: 12px;
  color: var(--text-3); font-size: 11.5px; font-weight: 700; letter-spacing: 2.4px;
}
.toc ol { margin: 0; padding-left: 28px; counter-reset: toc; list-style: none; }
.toc li { margin-bottom: 8px; counter-increment: toc; position: relative; font-size: 15px; }
.toc li::before {
  content: counter(toc); position: absolute; left: -28px; top: 1px; width: 20px; text-align: right;
  color: var(--text-3); font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.toc a { color: var(--text-2); text-decoration: none; }
.toc a:hover { color: var(--amber-hover); }

/* ── Informative graphics ───────────────────────────────────────────────── */

.gfx { margin: 34px 0 38px; }
.gfx-frame {
  padding: 22px 24px;
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  overflow-x: auto;
}
.gfx-svg { display: block; width: 100%; min-width: 460px; height: auto; }
.gfx figcaption {
  margin-top: 12px; color: var(--text-3);
  font-size: 13.5px; line-height: 1.55; text-align: left;
}
.gfx-table { margin: 0; }
.gfx-data { margin-top: 10px; }
/* pages.css styles every details > summary as a space-between flex row for the model
   pages, which would fling the "+" and the label to opposite edges here. */
.gfx-data > summary {
  display: block; cursor: pointer; color: var(--text-3); font-size: 13px;
  padding: 6px 0; list-style: none;
}
.gfx-data > summary::-webkit-details-marker { display: none; }
.gfx-data > summary::before { content: "+ "; color: var(--amber); }
.gfx-data[open] > summary::before { content: "\2212 "; }
.gfx-data > summary:hover { color: var(--amber-hover); }
.gfx-data .table-wrap { margin-top: 10px; }

.cmp .row-hi th, .cmp .row-hi td { background: rgba(245, 166, 35, .07); }
.cmp .row-hi th[scope="row"] { color: var(--amber); }

/* ── The author block ───────────────────────────────────────────────────── */

/* Sits at the foot of the prose, inside the column, so it reads as a signature on the
   piece rather than as another site module bolted underneath it. */
.authorbox {
  display: flex; gap: 18px; align-items: flex-start;
  margin: 44px 0 8px; padding: 22px 24px;
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(255, 255, 255, .03);
}
.authorbox-img {
  flex: 0 0 auto; width: 66px; height: 66px;
  border-radius: 50%; object-fit: cover;
  border: 1px solid rgba(245, 166, 35, .45);
}
.authorbox-text { min-width: 0; }
.authorbox-name { margin: 0; font-size: 15px; font-weight: 600; color: #fff; }
.authorbox-name a { color: var(--amber); text-decoration: none; }
.authorbox-name a:hover { color: var(--amber-hover); text-decoration: underline; }
.authorbox-role {
  margin: 2px 0 0; font-size: 12.5px; color: var(--text-3);
  letter-spacing: .04em; text-transform: uppercase;
}
.authorbox-bio { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--text-2); }

@media (max-width: 560px) {
  .authorbox { flex-direction: column; gap: 14px; padding: 20px; }
}

/* A photograph inside the prose. No frame - the picture is the frame - but the same
   rounded edge and the same caption treatment as the charts, so a piece reads as one
   thing rather than as prose with pictures dropped between the paragraphs. */
.gfx-photo img {
  display: block; width: 100%; height: auto;
  border-radius: 14px; border: 1px solid var(--line);
}

/* Model cards dropped into an article. Full bleed of the prose column. */
.gfx-models { margin: 34px 0; }
.gfx-models .mgrid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* ── Pull quote ─────────────────────────────────────────────────────────── */

.keynote {
  margin: 34px 0; padding: 22px 26px;
  border: 1px solid var(--line-strong); border-radius: 14px;
  background: linear-gradient(180deg, rgba(245, 166, 35, .07), rgba(245, 166, 35, .02));
}
.keynote p { margin: 0; color: var(--text); font-size: 1.08em; line-height: 1.6; font-weight: 500; }

/* ── Rent-or-buy calculator ─────────────────────────────────────────────── */

.rbcalc { margin: 34px 0; padding: 26px; border-radius: var(--radius); }
.rbcalc-head h3 { margin: 0; color: var(--text); font-size: 20px; font-weight: 700; }
.rbcalc-head .eyebrow { margin-bottom: 10px; }

.rbcalc-input { margin: 22px 0 20px; }
.rbcalc-input label { display: block; margin-bottom: 10px; color: var(--text-3); font-size: 13.5px; }
.rbcalc .calc-controls { display: flex; align-items: center; gap: 16px; }
.rbcalc .calc-range { flex: 1; }
.rbcalc .calc-num { width: 92px; }

.rbcalc-out { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rbcalc-side {
  padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px;
  background: rgba(255, 255, 255, .03);
}
.rbcalc-label { display: block; margin-bottom: 6px; color: var(--text-3); font-size: 12.5px; }
.rbcalc-side strong {
  display: block; font-size: clamp(22px, 2.4vw, 28px); font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--text); letter-spacing: -.02em;
}
.rbcalc-side.is-cheaper { border-color: rgba(245, 166, 35, .45); background: rgba(245, 166, 35, .08); }
.rbcalc-side.is-cheaper strong { color: var(--amber); }

.rbcalc-verdict { margin: 16px 0 0; color: var(--text); font-size: 15.5px; }
.rbcalc-verdict b { color: var(--amber); font-variant-numeric: tabular-nums; }
.rbcalc-note { margin: 10px 0 0; color: var(--text-3); font-size: 13px; line-height: 1.55; }

/* ── Cluster list and up-link ───────────────────────────────────────────── */

.clusterlist { margin: 52px 0 0; }
.clusterlist h2 { margin-bottom: 18px; }
.clusterlist ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.clusterlist li {
  margin: 0; padding: 0; border-bottom: 1px solid var(--line);
}
.clusterlist li a {
  display: block; padding: 16px 0 4px;
  color: var(--text); font-weight: 650; font-size: 17px; text-decoration: none;
}
.clusterlist li a:hover { color: var(--amber-hover); }
.clusterlist li span { display: block; padding-bottom: 16px; color: var(--text-3); font-size: 14px; line-height: 1.55; }

.uplink {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  max-width: 72ch; margin: 0 auto; padding: 18px 22px;
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(255, 255, 255, .03);
}
.uplink > span { color: var(--text-3); font-size: 14px; }
.uplink a { color: var(--amber); font-weight: 600; font-size: 15px; }
.uplink a:hover { color: var(--amber-hover); }

/* ── /guides/ index ─────────────────────────────────────────────────────── */

.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.gcard {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 22px; border-radius: var(--radius); color: var(--text-2); text-decoration: none;
}
.gcard:hover { border-color: rgba(245, 166, 35, .42); color: var(--text); transform: translateY(-3px); box-shadow: 0 20px 50px var(--shadow); }
.gcard strong { color: var(--text); font-size: 17.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.gdesc { color: var(--text-2); font-size: 14px; line-height: 1.55; flex: 1; }
.gread { color: var(--text-3); font-size: 12.5px; }
.gtag {
  align-self: flex-start; padding: 4px 10px; border-radius: 999px;
  border: 1px solid rgba(245, 166, 35, .35); background: rgba(245, 166, 35, .1);
  color: var(--amber); font-size: 11.5px; font-weight: 700; letter-spacing: .6px;
}

/* ── Coming-soon notify band ────────────────────────────────────────────── */

.notify {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 48px);
  align-items: center; padding: clamp(26px, 3.6vw, 42px); border-radius: var(--radius);
  scroll-margin-top: 100px;
}
.notify-body h2, .notify-body h3 {
  margin: 0 0 12px; color: var(--text); letter-spacing: -.02em; line-height: 1.15;
  font-size: clamp(22px, 2.4vw, 30px); font-weight: 700;
}
.notify-body p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.6; }

.notify-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.notify-form input[type="email"] {
  flex: 1; min-width: 200px; min-height: 50px; padding: 12px 16px;
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: rgba(255, 255, 255, .05); color: var(--text);
  font: inherit; font-size: 15px;
}
.notify-form input[type="email"]::placeholder { color: var(--text-3); }
.notify-form input[type="email"]:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-color: transparent; }
.notify-form .btn { min-height: 50px; white-space: nowrap; }
.notify-msg { flex-basis: 100%; margin: 0; min-height: 1.2em; font-size: 13.5px; color: var(--text-3); }
.notify-msg.is-ok { color: var(--amber); }
.notify-msg.is-err { color: #ff9b9b; }
.notify-form.is-done input, .notify-form.is-done .btn { display: none; }
.notify-form.is-done .notify-msg { font-size: 16px; }

/* Homepage: the honest line under the ask box while rentals are still closed. */
.ask-soon { margin: 16px 0 0; color: var(--text-3); font-size: 13.5px; }
.ask-soon a { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; }
.ask-soon a:hover { color: var(--amber-hover); }

/* ── Narrow ─────────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .notify { grid-template-columns: 1fr; }
  .rbcalc-out { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .guide { padding-top: 30px; }
  .guide-body { font-size: 16.5px; }
  .answer { padding: 20px; }
  .gfx-frame { padding: 16px; }
  .notify-form .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .gcard { transition-duration: .01ms !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MODEL-FIRST SURFACES
   The homepage teaser, /what-is-an-ai-model/, /how-it-works/ and the
   asking-vs-running silo. Everything here is outcome-first copy, so nothing in
   it is styled to look technical: no terminal type, no spec-sheet tables, no
   monospace outside the two places where a number is genuinely a reading.
   See GPUVAULT_CONTENT_ARCHITECTURE.md.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Page wrapper for the standalone explainers ─────────────────────────── */

.page-wrap { padding: 0 var(--pad-x); max-width: 1440px; margin: 0 auto; }
.page-wrap > * { max-width: 72ch; margin-left: auto; margin-right: auto; }
.page-note {
  max-width: 72ch; margin: 22px auto 0;
  color: var(--text-3); font-size: 14.5px; line-height: 1.65;
}
.page-note a { color: var(--amber); }

/* ── The six kinds of model ─────────────────────────────────────────────── */

/* Three across, so nine cells land as a clean 3x3. At two columns the ninth cell sits
   alone beside an empty one, and an empty cell inside a bordered grid reads as a bug
   rather than as whitespace. If the list ever stops being a multiple of three, check
   this again - the grid is only tidy while the count is. */
.kinds {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; margin: 30px 0 34px;
  background: var(--line); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden;
}
.kind { background: var(--bg-deep); padding: 20px 22px; }
.kind-t {
  font-weight: 650; font-size: 15.5px; color: var(--amber);
  margin-bottom: 7px; letter-spacing: -.005em;
}
.kind-d { color: var(--text-3); font-size: 14.5px; line-height: 1.6; }

/* The homepage placement is a teaser, so the cells lose their descriptions'
   breathing room and gain a column. It is a rhythm, not a reference table. */
.kinds-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 26px 0 0; }
.kinds-compact .kind { padding: 15px 17px; }
.kinds-compact .kind-t { font-size: 14.5px; margin-bottom: 5px; }
.kinds-compact .kind-d { font-size: 13.5px; line-height: 1.5; }

@media (max-width: 860px) {
  .kinds, .kinds-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .kinds, .kinds-compact { grid-template-columns: 1fr; }
}

/* ── The run ledger ─────────────────────────────────────────────────────── */

/* Five steps and a proportional bar. The bar is the argument - two segments are
   almost always most of it - so it gets the amber and the steps stay quiet. */
.ledger {
  margin: 32px 0 36px; padding: 22px; border: 1px solid var(--line);
  border-radius: 16px; background: rgba(30, 29, 58, .45);
}
.ledger-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.ledger-lbl {
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
}
/* Tabular figures: this is a meter reading, and the digits should not shuffle. */
.ledger-meter {
  font-variant-numeric: tabular-nums; font-size: 14px; color: var(--amber);
  font-weight: 600;
}

.ledger-steps {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px;
}
.ledger-steps > li {
  margin: 0; padding: 0 0 0 0; display: flex; flex-direction: column; gap: 4px;
}
.ledger-steps > li::before { content: none; }
.ledger-steps .ln {
  font-size: 10.5px; letter-spacing: .1em; color: var(--text-3); font-weight: 600;
}
.ledger-steps .lt { font-size: 14px; color: var(--text); line-height: 1.35; }
.ledger-steps .ld {
  font-size: 13px; color: var(--amber); font-variant-numeric: tabular-nums;
}

.ledger-bar {
  display: flex; gap: 2px; height: 8px; border-radius: 999px;
  overflow: hidden; margin-bottom: 20px;
}
.ledger-bar > i {
  display: block; height: 100%; background: rgba(245, 166, 35, .3); min-width: 2px;
}
/* The two long steps are the point, so they carry the solid amber. Sized off the
   data rather than nth-child, so a job with a different shape still reads right. */
.ledger-bar > i:nth-child(2) { background: var(--amber); }
.ledger-bar > i:nth-child(4) { background: var(--amber-dark); }

.ledger-nums {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  padding-top: 16px; border-top: 1px solid var(--line);
}
.ledger-nums > div { display: flex; flex-direction: column; gap: 5px; }
.ledger-nums .k {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
}
.ledger-nums .v {
  font-size: 19px; font-weight: 650; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.ledger-nums .v.accent { color: var(--amber); }

@media (max-width: 760px) {
  .ledger-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger-nums { grid-template-columns: 1fr; gap: 12px; }
  .ledger-nums > div { flex-direction: row; align-items: baseline; justify-content: space-between; }
}

/* ── The two-lane flow ──────────────────────────────────────────────────── */

/* Left lane is three steps and seconds. Right lane is five steps and hours. The
   lanes are deliberately unequal - balancing them for tidiness would erase the
   only thing the diagram is trying to say. The handoff band spans both. */
.lanes {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 20px; margin: 30px 0 34px; align-items: start;
}
.lane {
  border: 1px solid var(--line); border-radius: 16px; padding: 20px;
  background: rgba(30, 29, 58, .4);
}
.lane-you { border-color: rgba(245, 166, 35, .34); background: rgba(245, 166, 35, .05); }

.lane-hd {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  padding-bottom: 13px; margin-bottom: 15px; border-bottom: 1px solid var(--line);
}
.lane-t { font-weight: 650; font-size: 15px; color: var(--text); }
.lane-you .lane-t { color: var(--amber); }
.lane-clock {
  font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums;
}

.lane-steps { list-style: none; margin: 0; padding: 0; counter-reset: lane; }
.lane-steps > li {
  margin: 0 0 14px; padding: 0 0 0 26px; position: relative;
  font-size: 14.5px; line-height: 1.55; color: var(--text-2);
}
.lane-steps > li::before { content: none; }
.lane-steps > li:last-child { margin-bottom: 0; }
.lane-dot {
  position: absolute; left: 0; top: 7px;
  width: 9px; height: 9px; border-radius: 50%;
  background: transparent; border: 1.5px solid var(--line-strong);
}
.lane-you .lane-dot { border-color: var(--amber); background: var(--amber); }
.lane-txt b, .lane-txt strong { color: var(--text); font-weight: 650; }
.lane-txt small {
  display: block; margin-top: 4px; font-size: 13px;
  color: var(--text-3); line-height: 1.5;
}
/* The mid-run checkpoint stays visible on purpose: it is honest, and it is the
   thing that demonstrates draft-then-finish rather than describing it. */
.lane-step.is-checkpoint .lane-dot { border-color: var(--amber); background: var(--amber); }
.lane-step.is-checkpoint { color: var(--text); }

.handoff {
  grid-column: 1 / -1; margin-top: 20px;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px 18px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: 12px;
  background: rgba(245, 166, 35, .1); border: 1px solid rgba(245, 166, 35, .28);
}
.handoff-h { font-weight: 650; font-size: 14.5px; color: var(--amber); }
.handoff-s { font-size: 13.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* Stacking keeps the handoff band between the lanes rather than under both,
   because the band marks a moment in time and the order is the meaning. */
@media (max-width: 760px) {
  .lanes { grid-template-columns: 1fr; gap: 16px; }
  .lane-you { order: 1; }
  .handoff { order: 2; margin-top: 0; }
  .lane-run { order: 3; }
}

/* ── Job summary cards ──────────────────────────────────────────────────── */

.jobcards {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; margin: 30px 0 34px;
}
.jobcard {
  display: flex; flex-direction: column; gap: 8px;
  padding: 20px; border: 1px solid var(--line); border-radius: 16px;
  background: rgba(30, 29, 58, .4);
  text-decoration: none; color: inherit;
  transition: border-color .18s var(--ease-out), background .18s var(--ease-out), transform .18s var(--ease-out);
}
.jobcard:hover {
  border-color: rgba(245, 166, 35, .45); background: rgba(245, 166, 35, .06);
  transform: translateY(-2px); color: inherit;
}
.jobcard-eyebrow {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
}
.jobcard-h {
  font-size: 17px; font-weight: 650; color: var(--text);
  line-height: 1.3; letter-spacing: -.012em;
}
.jobcard:hover .jobcard-h { color: var(--amber); }
.jobcard-sub { font-size: 14px; color: var(--text-3); line-height: 1.55; }
.jobcard-nums {
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums;
}
.jobcard-nums b { color: var(--amber); font-weight: 600; }

@media (max-width: 700px) { .jobcards { grid-template-columns: 1fr; } }

/* ── The width selector (job 05 only) ───────────────────────────────────── */

.widthsel {
  margin: 32px 0 36px; padding: 22px; border: 1px solid var(--line);
  border-radius: 16px; background: rgba(30, 29, 58, .45);
}
.widthsel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
}
.widthsel-head .eyebrow {
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600; margin: 0;
}
.widthsel-picks { display: flex; gap: 8px; }
.widthsel-picks button {
  min-width: 56px; padding: 8px 14px; border-radius: 10px; cursor: pointer;
  background: transparent; border: 1px solid var(--line-strong);
  color: var(--text-2); font: inherit; font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: border-color .16s, background .16s, color .16s;
}
.widthsel-picks button:hover { border-color: var(--amber); color: var(--text); }
.widthsel-picks button[aria-pressed="true"] {
  background: var(--amber); border-color: var(--amber); color: #191505;
}

.widthsel-bar {
  height: 10px; border-radius: 999px; margin-bottom: 20px;
  background: rgba(255, 255, 255, .06); overflow: hidden;
}
.widthsel-bar > i {
  display: block; height: 100%; border-radius: 999px; background: var(--amber);
  transition: width .4s var(--ease-out);
}
.widthsel-nums {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.widthsel-nums > div { display: flex; flex-direction: column; gap: 5px; }
.widthsel-nums .k {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
}
.widthsel-nums .v {
  font-size: 20px; font-weight: 650; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.widthsel-nums .v.accent { color: var(--amber); }
.widthsel figcaption { margin-top: 14px; }

@media (max-width: 620px) {
  .widthsel-nums { grid-template-columns: 1fr; gap: 12px; }
  .widthsel-nums > div { flex-direction: row; align-items: baseline; justify-content: space-between; }
}

/* ── The job picker (/how-it-works/) ────────────────────────────────────── */

.picker { padding: clamp(34px, 5vh, 56px) 0 0; }
.picker-h {
  font-size: clamp(21px, 2.2vw, 28px); font-weight: 700; letter-spacing: -.018em;
  margin: 0 0 22px;
}

.jobpicks {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; margin-bottom: 26px;
}
/* aria-pressed rather than a selected class: the state is what a screen reader
   announces, so it may as well be the same thing the stylesheet reads. */
.jobpick {
  display: flex; flex-direction: column; gap: 9px; text-align: left;
  padding: 18px; border-radius: 14px; cursor: pointer;
  background: rgba(30, 29, 58, .4); border: 1px solid var(--line);
  color: var(--text-2); font: inherit;
  transition: border-color .18s var(--ease-out), background .18s var(--ease-out);
}
.jobpick:hover { border-color: var(--line-strong); }
.jobpick[aria-pressed="true"] {
  border-color: var(--amber); background: rgba(245, 166, 35, .08); color: var(--text);
}
.jobpick-ic {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
}
.jobpick[aria-pressed="true"] .jobpick-ic { color: var(--amber); }
.jobpick-t { font-size: 15px; font-weight: 600; line-height: 1.35; }

.otherjob { margin-bottom: 34px; }
.otherjob > label {
  display: block; margin-bottom: 9px; font-size: 13.5px;
  color: var(--text-3); font-weight: 600;
}
.otherjob-row { display: flex; gap: 10px; flex-wrap: wrap; }
.otherjob-row input {
  flex: 1 1 260px; min-width: 0; padding: 14px 16px; border-radius: 11px;
  background: rgba(30, 29, 58, .55); border: 1px solid var(--line);
  color: var(--text); font: inherit; font-size: 15.5px;
}
.otherjob-row input::placeholder { color: var(--text-3); }
.otherjob-row input:focus { outline: none; border-color: var(--amber); }
.otherjob-msg { margin: 10px 0 0; font-size: 13.5px; color: var(--text-3); min-height: 1em; }
.otherjob-msg.is-err { color: var(--amber-hover); }

@media (max-width: 900px) { .jobpicks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .jobpicks { grid-template-columns: 1fr; }
  .otherjob-row .btn { width: 100%; }
}

/* ── A job panel ────────────────────────────────────────────────────────── */

.jobpanel { padding-bottom: 20px; }
.jobpanel > .eyebrow {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600; margin: 0 0 10px;
}
.jobpanel > h2 {
  font-size: clamp(23px, 2.6vw, 33px); font-weight: 700;
  letter-spacing: -.02em; margin: 0 0 12px; line-height: 1.15;
}
.jobpanel-sub {
  color: var(--text-2); font-size: 16px; line-height: 1.65; margin: 0 0 8px;
}

.result {
  margin: 4px 0 26px; padding: 20px 22px; border-radius: 14px;
  border: 1px solid var(--line); background: rgba(30, 29, 58, .4);
}
.result-h {
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600; margin: 0 0 14px;
}
.result ul { list-style: none; margin: 0; padding: 0; }
.result li {
  position: relative; padding-left: 22px; margin-bottom: 11px;
  font-size: 14.5px; line-height: 1.6; color: var(--text-2);
}
.result li:last-child { margin-bottom: 0; }
.result li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--amber);
}
.result li b { color: var(--text); font-weight: 650; }

.jobmeta {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; margin-bottom: 22px;
  padding: 18px 22px; border-radius: 14px;
  border: 1px solid var(--line); background: rgba(30, 29, 58, .4);
}
.jobmeta > div { display: flex; flex-direction: column; gap: 5px; }
.jobmeta .k {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
}
.jobmeta .v {
  font-size: 20px; font-weight: 650; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.jobmeta .v.accent { color: var(--amber); }

/* Model names live here and nowhere else on a conversion surface, closed by
   default. Somebody who wants them goes looking; nobody else is shown a spec. */
.under {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 18px; margin-bottom: 18px; background: rgba(30, 29, 58, .3);
}
.under > summary {
  cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text-2);
  list-style: none;
}
.under > summary::-webkit-details-marker { display: none; }
.under > summary::before { content: "+ "; color: var(--amber); font-weight: 700; }
.under[open] > summary::before { content: "\2212 "; }
.under > summary:hover { color: var(--text); }
.under > p {
  margin: 13px 0 0; font-size: 14px; line-height: 1.65; color: var(--text-3);
}
.under code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em; padding: 1px 5px; border-radius: 4px;
  background: rgba(255, 255, 255, .07); color: var(--text-2);
}

.jobpanel-more { margin: 0; font-size: 15px; }
.jobpanel-more a {
  color: var(--amber); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.jobpanel-more a:hover { color: var(--amber-hover); }

@media (max-width: 620px) {
  .jobmeta { grid-template-columns: 1fr; gap: 12px; }
  .jobmeta > div { flex-direction: row; align-items: baseline; justify-content: space-between; }
}

/* ── The homepage teaser ────────────────────────────────────────────────── */

/* Sits below the hero and below the primary CTA on purpose: anybody who already
   understands the offer is never slowed down by it. */
.primer { padding: clamp(46px, 7vh, 90px) var(--pad-x); max-width: 1440px; margin: 0 auto; }
.primer-inner { max-width: 78ch; margin: 0 auto; }
.primer h2 {
  font-size: clamp(24px, 2.6vw, 36px); font-weight: 700;
  letter-spacing: -.02em; margin: 0 0 16px; line-height: 1.15;
}
.primer p { color: var(--text-2); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.7; margin: 0 0 14px; }
.primer p strong { color: var(--text); font-weight: 650; }
.primer-more { margin: 22px 0 0; font-size: 15.5px; }
/* A text link, never a button. A second button here would compete with the hero
   CTA and split attention at the moment you least want it split. */
.primer-more a {
  color: var(--amber); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.primer-more a:hover { color: var(--amber-hover); }

@media (prefers-reduced-motion: reduce) {
  .jobcard, .widthsel-bar > i, .jobpick { transition-duration: .01ms !important; }
  .jobcard:hover { transform: none; }
}

/* ── Fixes found in the render pass ─────────────────────────────────────── */

/* .guide-body a underlines every link in an article, which is right for prose and
   wrong for a card: it underlined all four lines of every job card. Beaten here on
   specificity rather than with !important, because the card is genuinely a
   different kind of link rather than an exception to the prose rule. */
.guide-body a.jobcard,
.guide-body a.jobcard:hover { text-decoration: none; }

/* A step whose title wraps to two lines used to push its duration out of line with
   the other four. Reserving two lines keeps the row of durations straight without
   truncating anything. */
.ledger-steps .lt { min-height: 2.7em; }
@media (max-width: 760px) { .ledger-steps .lt { min-height: 0; } }

/* Match the space above the grid so the teaser is symmetrical. */
.primer .primer-more { margin-top: 26px; }

/* The closing notes sit under the FAQ, which already carries the section padding. */
.page-wrap-tail { padding-bottom: clamp(40px, 7vh, 80px); }
.page-wrap-tail .page-note:first-child { margin-top: 0; }

/* ── The closing CTA ────────────────────────────────────────────────────── */

/* Centred and single-column, unlike .notify's two-column band. The band is a thing you
   scroll past; this is a full stop. It gets a teal hairline and a soft teal bloom
   behind it so the block reads as the action zone before you have read a word of it.

   Everything here is the --action colour and it appears nowhere else on the page. That
   rationing is the mechanism - see v2.css. */
.cta-next-wrap { padding-top: clamp(30px, 5vh, 56px); }
.cta-next {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: 780px; margin: 0 auto; text-align: center;
  padding: clamp(34px, 5vw, 58px) clamp(24px, 4vw, 52px);
  border-radius: var(--radius);
  border: 1px solid rgba(45, 212, 191, .32);
  background:
    linear-gradient(180deg, rgba(45, 212, 191, .07) 0%, rgba(45, 212, 191, .02) 42%, transparent 100%),
    rgba(30, 29, 58, .62);
  scroll-margin-top: 100px;
}
/* The bloom. Sits behind the content and never intercepts a click. */
.cta-next-glow {
  position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: -46%; width: 620px; height: 620px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(45, 212, 191, .18) 0%, rgba(45, 212, 191, .06) 42%, transparent 68%);
}

.cta-next .eyebrow {
  display: block; margin: 0 0 14px;
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: var(--action);
}
.cta-next h2 {
  margin: 0 0 14px; color: var(--text);
  font-size: clamp(26px, 3.2vw, 40px); font-weight: 700;
  letter-spacing: -.025em; line-height: 1.1;
}
.cta-next-body p {
  margin: 0 auto; max-width: 56ch;
  color: var(--text-2); font-size: clamp(15.5px, 1.3vw, 17px); line-height: 1.65;
}

.cta-next-form {
  margin: 30px auto 0; max-width: 480px;
  justify-content: center;
}
.cta-next-form input[type="email"] { min-height: 54px; text-align: center; }
.cta-next-form input[type="email"]:focus-visible {
  outline: 2px solid var(--action); outline-offset: 2px; border-color: transparent;
}
.cta-next-form .notify-msg { text-align: center; }
.cta-next-form .notify-msg.is-ok { color: var(--action-hover); }

.cta-next-note {
  margin: 22px 0 0; font-size: 14.5px; color: var(--text-3);
}
/* The lateral link stays a text link. A second button here would compete with the one
   thing this block exists to do. */
.cta-next-note a {
  color: var(--text-2); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.cta-next-note a:hover { color: var(--action-hover); }

@media (max-width: 560px) {
  .cta-next-form { flex-direction: column; align-items: stretch; }
  .cta-next-form .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-next-glow { display: none; }
}

/* ── The homepage primer hand-off ───────────────────────────────────────── */

/* Ends the "what a model actually is" section with somewhere to go. Sits on a teal
   hairline so the action zone is legible before a word of it is read, and carries the
   only teal in the section. */
.primer-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(20px, 3vw, 40px); flex-wrap: wrap;
  margin-top: 30px; padding: clamp(22px, 2.6vw, 30px) clamp(22px, 3vw, 34px);
  border-radius: var(--radius);
  border: 1px solid rgba(45, 212, 191, .3);
  background:
    linear-gradient(110deg, rgba(45, 212, 191, .09) 0%, rgba(45, 212, 191, .02) 46%, transparent 100%),
    rgba(30, 29, 58, .5);
}
.primer-cta-copy { flex: 1 1 320px; min-width: 0; }
.primer-cta-copy strong {
  display: block; margin-bottom: 7px; color: var(--text);
  font-size: clamp(18px, 1.8vw, 22px); font-weight: 700; letter-spacing: -.018em;
}
.primer-cta-copy span {
  display: block; color: var(--text-2); font-size: 15px; line-height: 1.6; max-width: 52ch;
}

.primer-cta-actions {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  flex: 0 0 auto;
}
/* The explainer stays a text link. It is a lateral content link, not a conversion, and
   giving it button treatment would put two competing actions in one row. */
.primer-cta-alt {
  font-size: 14.5px; color: var(--text-3);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  white-space: nowrap;
}
.primer-cta-alt:hover { color: var(--action-hover); }

@media (max-width: 720px) {
  .primer-cta { flex-direction: column; align-items: stretch; }
  /* flex-basis resolves against the MAIN axis, so the 320px that sets a sensible
     minimum width on a row becomes a 320px minimum HEIGHT once this stacks - which
     left a slab of dead space between the copy and the button. */
  .primer-cta-copy { flex: 0 0 auto; }
  .primer-cta-actions { align-items: stretch; }
  .primer-cta-actions .btn { width: 100%; }
  .primer-cta-alt { text-align: center; white-space: normal; }
}

/* ── The go-deeper callout ──────────────────────────────────────────────── */

/* Amber, not teal. Teal is spent on the one conversion per page; this is a content
   hand-off that has to be impossible to miss and still obviously not the button. */
.readnext { margin: 40px 0 8px; }
.readnext-link {
  display: block; padding: 24px 26px; border-radius: var(--radius);
  border: 1px solid rgba(245, 166, 35, .34);
  border-left: 4px solid var(--amber);
  background:
    linear-gradient(110deg, rgba(245, 166, 35, .09) 0%, rgba(245, 166, 35, .025) 52%, transparent 100%),
    rgba(30, 29, 58, .5);
  text-decoration: none; color: inherit;
  transition: border-color .18s var(--ease-out), background .18s var(--ease-out), transform .18s var(--ease-out);
}
/* The block is the link, so it must beat .guide-body a's prose underline. */
.guide-body .readnext-link, .guide-body .readnext-link:hover { text-decoration: none; }
.readnext-link:hover {
  border-color: rgba(245, 166, 35, .6); transform: translateY(-2px); color: inherit;
}

.readnext-eyebrow {
  display: block; margin-bottom: 10px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: var(--amber);
}
.readnext-h {
  display: block; margin-bottom: 9px; color: var(--text);
  font-size: clamp(19px, 2vw, 24px); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.22;
}
.readnext-link:hover .readnext-h { color: var(--amber-hover); }
.readnext-sub {
  display: block; color: var(--text-2); font-size: 15px; line-height: 1.6; max-width: 60ch;
}
.readnext-cue {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  color: var(--amber); font-size: 14.5px; font-weight: 600;
}
.readnext-cue .icon { width: 16px; height: 16px; transition: transform .18s var(--ease-out); }
.readnext-link:hover .readnext-cue .icon { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .readnext-link, .readnext-cue .icon { transition-duration: .01ms !important; }
  .readnext-link:hover { transform: none; }
  .readnext-link:hover .readnext-cue .icon { transform: none; }
}

/* The business example in a kind cell. Set apart from the definition above it by a
   hairline and the amber, because it answers a different question: `d` is what the
   family does, `eg` is what it is worth. Rendered on the full grid only - the homepage
   grid is a teaser and stays at title + definition. */
.kind-eg {
  margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line);
  color: var(--text-2); font-size: 13.5px; line-height: 1.55;
}
.kind-eg::before {
  content: "e.g."; margin-right: 6px;
  color: var(--amber); font-weight: 650; font-size: 12px;
}