/* Fragment homepage, round three (round two's code, copied so round two stays as Brad saw it).
   Fragment homepage, round two.
   The hero carries on from V3 (round one stays as Brad saw it, in
   hero-src): the notched gold card, a smeared photo behind, and the transit
   lines, which run into the product's own graph. Below it, the rest of the
   homepage in the order of Brad's doc. After Hunter's notes (Oct 21): every
   section's top right corner is cut at 45 degrees so the one above shows
   through; one 12 column grid; the hero's transit lines carry on through
   the page (into the exception rate, the panels, the workflows, the phases);
   the panels, the ask and the footer sit on live shaders; no tan bars. */

.stage {
  --ink: #1A1A15;
  --cream: #E2E0D7;
  --surface: #F1F0E6;
  --muted: #524B45;
  --warm-grey: #524B45;
  --brown: #4C3725;
  --button: #9F816B;
  --gold: #957760;
  --rust: #CD987A;
  --tint: #D6DDB8;
  --line: rgba(226, 224, 215, 0.16);
  --rule: rgba(26, 26, 21, 0.14);
  /* the card, gold by default (see HERO_CARDS) */
  --card: #957760;
  --card-ink: #1A1A15;
  --card-soft: rgba(26, 26, 21, 0.8);
  --card-line: rgba(26, 26, 21, 0.22);
  --card-btn: #1A1A15;
  --card-btn-ink: #E2E0D7;
  --card-btn-hover: #34271C;
  --card-alt-hover: rgba(26, 26, 21, 0.08);
  --gutter: 40px;
  --nav-h: 72px;
  --notch: 52px;
  --cut: 56px;
  --wrap: 1280px;
  --gap: 24px;
  /* the grid, for things positioned across the full width (cards, nav,
     the padding inside cards): its side margin, and one column plus its
     gap, measured against the page (the stage is the container). */
  --M: max(var(--gutter), calc((100cqw - var(--wrap)) / 2));
  --P: calc((100cqw - 2 * var(--M) + var(--gap)) / 12);
  container-type: inline-size;
  position: relative;
  min-height: 100%;
  background: var(--ink);
  color: var(--cream);
  font-family: "APK Galeria", "Geist", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* the mono sizes came down a step (Hunter: the eyebrows and labels were too big) */
.mono { font: 400 11px/1.4 "Fragment Mono", ui-monospace, monospace; letter-spacing: 0.05em; text-transform: uppercase; }
.eyebrow { font: 400 10.5px/1.3 "Fragment Mono", ui-monospace, monospace; letter-spacing: 0.06em; text-transform: uppercase; }
/* a scrambling label holds its width (scramble.js) */
[data-scramble] { display: inline-block; white-space: nowrap; pointer-events: none; }

/* ---- the hero: one screen tall, plus the strip the next section's cut overlaps ---- */
.hero { position: relative; isolation: isolate; height: calc(100svh + var(--cut)); min-height: calc(560px + var(--cut)); overflow: hidden; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero .lines { pointer-events: none; }
/* round four: the light hero (Mat: more contrast than a dark smear), ink nav, JD's primary logo */
.hero.light { background: #E2E0D7; }
.hero.light .nav-links a, .hero.light .nav-menu { color: var(--ink); }
.media .living { z-index: 1; }

.nav {
  position: absolute; z-index: 3; top: 0; left: 0; right: 0;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 40px;
  padding: 0 var(--M);
}
.nav-logo { display: block; flex: none; line-height: 0; }
.nav-logo img, .nav-logo svg { display: block; height: 22px; width: auto; }
.nav-links { display: flex; gap: 32px; margin: 0 auto; padding: 0; list-style: none; }
.nav-links a {
  color: var(--cream); text-decoration: none;
  font: 400 13px/1 "Fragment Mono", ui-monospace, monospace; letter-spacing: 0.04em; text-transform: uppercase;
  opacity: 0.86; transition: opacity 0.15s;
}
.nav-links a:hover, .nav-links a:focus-visible { opacity: 1; }
.nav-menu { display: none; }

/* JD's button: tan, square, Fragment Mono in capitals */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 34px; padding: 0 14px;
  background: var(--button); color: var(--ink);
  font: 400 12px/1 "Fragment Mono", ui-monospace, monospace; letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none; border: 0; border-radius: 0; cursor: pointer;
  transition: background 0.15s;
}
.btn:hover, .btn:focus-visible { background: #B59F8D; }
.btn:focus-visible, .nav a:focus-visible, .link:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.arrow { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.25; transition: transform 0.2s; }
a:hover .arrow, a:focus-visible .arrow { transform: translateX(3px); }

/* the notched card, from the left guide line (24px outside the grid, Hunter
   Oct 22) to the next section's edge; its text starts on the first column */
.card {
  position: absolute; z-index: 2;
  --card-in: 24px;
  left: calc(var(--M) - var(--card-in)); bottom: var(--cut);
  /* six columns, ending on the gutter line */
  width: calc(var(--card-in) + 6 * var(--P) - var(--gap) / 2);
  background: var(--card);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}
.card-head { padding: 34px 30px 44px var(--card-in); }
.card h1, .card h2 {
  margin: 0; max-width: 13em;
  font-weight: 400; font-size: clamp(32px, min(4.3vw, 7.2vh), 66px); line-height: 1.02; letter-spacing: -0.025em;
  color: var(--card-ink);
  text-wrap: balance;
}
.card-body { border-top: 1px solid var(--card-line); padding: 22px 30px 26px var(--card-in); }
.card-body p { margin: 0; max-width: 34em; font-size: 16px; line-height: 1.42; color: var(--card-soft); }
.card-actions { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--card-line); }
.card-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; padding: 0 30px;
  font: 400 13px/1 "Fragment Mono", ui-monospace, monospace; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--card-ink); text-decoration: none;
  transition: background 0.15s;
}
.card-btn:first-child { padding-left: var(--card-in); }
.card-btn + .card-btn { border-left: 1px solid var(--card-line); }
.card-btn:hover { background: var(--card-alt-hover); }
.card-btn.primary { background: var(--card-btn); color: var(--card-btn-ink); }
.card-btn.primary:hover { background: var(--card-btn-hover); }
.card-btn:focus-visible { outline: 1px solid var(--card-ink); outline-offset: -5px; }
.card-btn.primary:focus-visible { outline-color: var(--card-btn-ink); }

/* ---- sections ----
   Each one overlaps the one above by --cut and cuts its own top right
   corner at 45 degrees, so the section above shows through the notch.
   Bottom padding carries the next section's overlap. */
.band, .ask, .foot {
  position: relative; isolation: isolate;
  margin-top: calc(-1 * var(--cut));
  /* the 45 degree notch starts on the right guide line (Hunter: they need to
     line up); where the guide is further in than the cut, the cut runs on
     across as a step */
  --g: calc(var(--M) - 24px);
  clip-path: polygon(0 0, calc(100% - var(--g)) 0, calc(100% - var(--g) + var(--cut)) var(--cut), 100% var(--cut), 100% 100%, 0 100%);
}
.band { padding: 128px var(--gutter) calc(128px + var(--cut)); }
.wrap { position: relative; max-width: var(--wrap); margin: 0 auto; }
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.band.cream { background: var(--cream); color: var(--ink); }
.band.ink { background: var(--ink); color: var(--cream); }
/* The problem band keeps only JD's left and right guides, 24px outside the
   grid like the cream bands (Hunter, Oct 22: no column lines here) */
.problem::before {
  content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; pointer-events: none;
  left: calc(max(var(--gutter), calc((100% - var(--wrap)) / 2)) - 24px); right: calc(max(var(--gutter), calc((100% - var(--wrap)) / 2)) - 24px);
  border-left: 1px solid var(--gridline); border-right: 1px solid var(--gridline);
}
.problem { --gridline: rgba(226, 224, 215, 0.1); }
/* JD's thin vertical guides, just outside the grid on the cream pages */
.band.cream .wrap::before, .band.cream .wrap::after {
  content: ''; position: absolute; top: -400px; bottom: -400px; width: 1px; background: var(--rule); pointer-events: none;
}
.band.cream .wrap::before { left: -24px; }
.band.cream .wrap::after { right: -24px; }
h2 {
  margin: 0; font-weight: 400; font-size: clamp(34px, 4vw, 56px); line-height: 1.04; letter-spacing: -0.025em;
  text-wrap: balance;
}
h3 { margin: 0; font-weight: 400; font-size: 26px; line-height: 1.12; letter-spacing: -0.015em; }
.lede { margin: 20px 0 0; max-width: 38em; font-size: 18px; line-height: 1.45; opacity: 0.8; }
p { text-wrap: pretty; }

/* ---- transit maps drawn over sections and panels (minimap.js, sections.js) ---- */
.map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.map .grid-v { fill: none; stroke: rgba(226, 224, 215, 0.13); stroke-width: 1; }
.map .ln { fill: none; stroke: rgba(226, 224, 215, 0.5); stroke-width: 1; }
.map .ln.lit { stroke: var(--tint); stroke-width: 1.5; }
.map .comet { fill: none; stroke: var(--tint); stroke-width: 2; }
.map .comet.exc { stroke: var(--rust); }
.map .comet.done { stroke: var(--cream); }
.map .waiting { fill: var(--rust); }
.map .st-core { fill: rgba(226, 224, 215, 0.95); transition: fill 0.3s; }
.map .st.on .st-core, .map .st.done .st-core { fill: var(--tint); }
.map .st.stop .st-core { fill: var(--rust); }
.map .lbl { fill: rgba(226, 224, 215, 0.9); font: 400 9.5px "Fragment Mono", ui-monospace, monospace; letter-spacing: 0.05em; paint-order: stroke; stroke: rgba(26, 26, 21, 0.55); stroke-width: 3px; stroke-linejoin: round; }
.map .lbl .code, .map .lbl .sub { fill: rgba(226, 224, 215, 0.55); }
.map .lbl.done .sub { fill: var(--tint); }
/* round three: the context engine as the product draws it (circles, straight edges, a cloud of fragments) */
.map .thread { fill: none; stroke: rgba(226, 224, 215, 0.3); stroke-width: 0.6; }
.map .edge { fill: none; stroke-width: 1.25; }
.map .edge.feed { stroke: rgba(226, 224, 215, 0.55); }
.map .edge.link { stroke: #B59F8D; }
.map .node circle { transition: fill 0.3s; }
.map .node.rec circle { fill: #B59F8D; }
.map .node.sys circle { fill: rgba(226, 224, 215, 0.92); }
.map .node.on circle { fill: var(--cream); }
.map .comet.link { stroke: var(--cream); }
/* round three: the agents' two lines, with the manual steps and their days */
.map .diamond { fill: rgba(226, 224, 215, 0.92); }
.map .st.hot .st-core { fill: var(--rust); }
.map .lbl.mid { fill: rgba(226, 224, 215, 0.62); }
.map .lbl.day { fill: var(--rust); }
.map .playhead { stroke: rgba(226, 224, 215, 0.35); stroke-width: 1; }
.map .wait { fill: none; stroke: var(--rust); stroke-width: 1.5; stroke-dasharray: 3 4; }
.map .waiting.resolved, .map .done { fill: var(--tint); }
.map .next { fill: var(--tint); transition: opacity 0.2s; }
.map .lbl.big { font-size: 20px; letter-spacing: 0.02em; fill: var(--tint); }
.map .lbl.big.exc { fill: var(--rust); }
.map .st-core.on { fill: var(--tint); }
.map .note-box { fill: rgba(26, 26, 21, 0.62); }
.map .spur { stroke: rgba(226, 224, 215, 0.28); }
.map .st-core.exc { fill: var(--rust); }
.map .st-core.exc.on { fill: #E7B79A; }
/* each agent's row: quiet until it moves on, then bright for a moment */
.map .lbl.row { fill: rgba(226, 224, 215, 0.5); transition: fill 1.2s; }
.map .lbl.row.fresh { fill: rgba(226, 224, 215, 0.95); transition: none; }
.map .lbl.row.in { fill: rgba(205, 152, 122, 0.7); }
.map .lbl.row.in.fresh { fill: #E7B79A; }

/* ---- the problem: warm grey so the hero card's ink button doesn't run into
   it; the copy left, the rate huge on the right, the hero's lines arriving */
.problem { background: var(--warm-grey); color: var(--cream); }
.problem .wrap { align-items: end; }
.problem-copy { grid-column: 1 / span 6; position: relative; z-index: 1; }
.problem-copy p { margin: 22px 0 0; max-width: 31em; font-size: 18px; line-height: 1.5; color: rgba(226, 224, 215, 0.8); }
.problem-copy h2 + p { margin-top: 32px; }
.stat { grid-column: 8 / span 5; position: relative; z-index: 1; padding-top: 0; }
.stat-label { display: block; padding-left: calc(var(--bundle, 11px) + 14px); color: rgba(226, 224, 215, 0.85); line-height: 12px; }
.stat-figure { display: flex; align-items: flex-start; margin-top: 18px; font-size: clamp(170px, 21vw, 330px); line-height: 0.76; letter-spacing: -0.055em; color: var(--cream); font-variant-numeric: tabular-nums; }
.stat-figure > span:first-child { margin-left: -0.049em; }
.stat-figure small { font-size: 0.36em; line-height: 1; letter-spacing: -0.02em; margin: 0.06em 0 0 0.06em; }
.stat .source { margin-top: 26px; color: rgba(226, 224, 215, 0.5); }
.problem .carry .ln { stroke: rgba(226, 224, 215, 0.42); }

/* ---- how Fragment does it: the two parts, on the grid ---- */
.how-head { margin-bottom: 104px; }
.how-head h2 { grid-column: 1 / span 6; }
/* the lede sits under the title, so the right half is the panels' (Hunter, Oct 22) */
.how-head .lede { grid-column: 1 / span 5; grid-row: 2; margin: 28px 0 0; }
/* a centre line down the section: the panels start on it and run to the right guide */
.how::after { content: ''; position: absolute; z-index: 0; top: 0; bottom: 0; left: calc(50% - 0.5px); width: 1px; background: var(--rule); pointer-events: none; }
.feature { align-items: center; }
.feature + .feature { margin-top: 128px; }
.feature-copy { grid-column: 1 / span 5; }
/* both panels on the right, 4:5 (Hunter: square, then taller), from the centre line out to JD's right guide line (Oct 22) */
.feature .media { grid-column: 7 / span 6; aspect-ratio: 4 / 5; margin: 0 -24px 0 calc(var(--gap) / -2); }
.feature-copy .eyebrow { color: var(--muted); margin: 0 0 20px; }
.feature-copy h3 { font-size: clamp(28px, 2.6vw, 38px); }
.feature-copy p:not(.eyebrow) { margin: 20px 0 0; font-size: 17px; line-height: 1.5; color: rgba(26, 26, 21, 0.75); }

/* a live shader cut with the 45 degree notch, a transit map on it */
.media {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink);
  clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 0 100%);
}
.media canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.media .cube { z-index: 1; }
.cube-caption { position: absolute; z-index: 2; pointer-events: none; left: 24px; right: 24px; bottom: 18px; margin: 0; display: flex; flex-direction: column; gap: 4px; color: rgba(226, 224, 215, 0.6); }
.cube-caption span:last-child { color: var(--tint); }
/* a counting number: an invisible copy of its final value holds the space,
   the count runs on top of it, right-aligned, so nothing moves and no width
   is measured */
.count { position: relative; display: inline-block; }
.count .ghost { visibility: hidden; }
.count .live { position: absolute; right: 0; top: 0; }

/* ---- proof: one number moving on a line, and the quote beside it ---- */
.proof { background: var(--brown); color: var(--cream); }
.proof .wrap { align-items: stretch; }
.proof-main { grid-column: 1 / span 7; display: flex; flex-direction: column; justify-content: space-between; gap: 72px; padding-right: 24px; }
.proof h2 { font-size: clamp(30px, 3.2vw, 46px); max-width: 14em; }
/* the customer's own logo, large, above the line about them */
.customer-logo { display: block; height: clamp(34px, 3.2vw, 46px); width: auto; margin-bottom: 32px; }
.shift-row { display: flex; align-items: stretch; }
.shift-track { position: relative; flex: 1; min-width: 140px; }
.shift-to { display: flex; align-items: flex-start; font-size: clamp(120px, 13vw, 210px); line-height: 0.76; letter-spacing: -0.055em; font-variant-numeric: tabular-nums; }
.shift-to small { font-size: 0.36em; line-height: 1; letter-spacing: -0.02em; margin: 0.06em 0 0 0.05em; }
.shift-from { position: absolute; z-index: 1; left: 0; bottom: 26px; margin: 0; }
.from-num { display: block; font-size: 44px; line-height: 1; letter-spacing: -0.03em; }
.shift-from .mono { display: block; margin-top: 8px; color: rgba(226, 224, 215, 0.7); }
.shift-meta { display: flex; justify-content: space-between; gap: 24px; margin-top: 28px; color: rgba(226, 224, 215, 0.7); }
.shift-meta b { font-weight: 400; color: var(--cream); }
.quote { grid-column: 8 / span 5; display: flex; flex-direction: column; background: var(--surface); color: var(--ink); margin: 0; clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 0 100%); }
.quote-photo { aspect-ratio: 16 / 7; background: center / cover no-repeat; }
.quote-body { flex: 1; padding: 36px 36px 40px; display: flex; flex-direction: column; }
.quote-mark { width: 36px; height: 28px; fill: var(--button); margin-bottom: 22px; }
.quote blockquote { margin: 0; font-size: clamp(21px, 1.8vw, 26px); line-height: 1.28; letter-spacing: -0.01em; }
.quote figcaption { margin-top: auto; padding-top: 32px; }
.quote figcaption .mono + .mono { margin-top: 4px; color: rgba(26, 26, 21, 0.55); }

/* ---- workflows: centred, the side guides become transit lines that branch
   into each card and merge in the middle under the headline ---- */
.workflows .wrap::before, .workflows .wrap::after { display: none; }
.wf-head { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; text-align: center; }
.wf-head .lede { margin: 20px auto 0; }
.workflows .map .ln { stroke: rgba(26, 26, 21, 0.24); }
.workflows .map .ln.lit { stroke: var(--ink); stroke-width: 1.5; transition: stroke 0.2s; }
.workflows .map .comet { stroke: var(--gold); }
.workflows .map .st-core { fill: var(--ink); }
.workflows .map .st.on .st-core { fill: var(--gold); }
.cards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-top: 152px; }
/* the notch cuts the card itself, so the page shows through it (cutting only
   the image left a light triangle of the card's surface: Hunter's corner bug) */
.wcard { display: flex; flex-direction: column; background: var(--surface); color: var(--ink); text-decoration: none; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.1, 1), opacity 0.25s; }
.wcard-img { position: relative; aspect-ratio: 4 / 3; background: center / cover no-repeat; }
.chip {
  position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 8px 10px;
  background: rgba(26, 26, 21, 0.9); color: var(--cream);
  font: 400 10px/1.35 "Fragment Mono", ui-monospace, monospace; letter-spacing: 0.04em; text-transform: uppercase;
}
.wcard-copy { padding: 22px 20px 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.wcard h3 { font-size: 22px; }
.wcard p { margin: 0; font-size: 15px; line-height: 1.45; color: rgba(26, 26, 21, 0.72); }
/* the action: a full-bleed row along the card's foot, like the hero card's */
.wcard-cta {
  display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 20px;
  border-top: 1px solid var(--rule);
  font: 400 11px/1 "Fragment Mono", ui-monospace, monospace; letter-spacing: 0.05em; text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
}
.wcard:hover .wcard-cta, .wcard:focus-visible .wcard-cta { background: var(--ink); color: var(--cream); }
.cards:hover .wcard:not(:hover) { opacity: 0.6; }
.wcard:hover { transform: translateY(-4px); }
.wcard:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

/* ---- what makes Fragment different: four marks cut from the logo's grid, each moving ---- */
.diff-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); margin-top: 72px; border-top: 1px solid var(--line); }
.diff { padding: 32px 0 0; }
.glyph { display: block; width: 56px; height: 56px; overflow: visible; margin-bottom: 44px; }
.glyph .pc { fill: var(--gold); }
.glyph .grid { fill: none; stroke: rgba(226, 224, 215, 0.12); stroke-width: 0.5; }
.glyph .lit { fill: var(--tint); }
.diff h3 { font-size: 22px; min-height: 2.5em; } /* two lines' room, so every paragraph starts on one line (Mat) */
.diff p { margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: rgba(226, 224, 215, 0.7); }

/* ---- how you start: a transit line down the phases, the diagram on a shader ---- */
.start .wrap { align-items: start; }
.start-copy { grid-column: 1 / span 6; }
.deploy { grid-column: 8 / span 5; position: sticky; top: 48px; }
.phases-wrap { position: relative; margin-top: 56px; }
.phases { position: relative; list-style: none; margin: 0; padding: 0; }
/* the rail: off the left grid line at 45 degrees, down the stations, back onto it */
.rail { position: absolute; inset: 0; pointer-events: none; }
.rail svg { position: absolute; left: 0; top: 0; overflow: visible; }
.rail path { fill: none; }
.rail .base { stroke: rgba(26, 26, 21, 0.2); stroke-width: 1; }
.rail .lit { stroke: var(--ink); stroke-width: 2; stroke-linejoin: miter; transition: stroke-dashoffset 0.6s cubic-bezier(0.45, 0, 0.2, 1); }
.phase { position: relative; padding-left: 52px; }
/* each phase's station: a solid square on the rail, no border */
.phase::before { content: ''; position: absolute; left: 2px; top: 24px; width: 12px; height: 12px; background: #B9B6AD; transition: background 0.3s; }
.phase.past::before { background: var(--ink); }
.phase.on::before { background: var(--gold); }
.phase button { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 24px 0 16px; cursor: pointer; }
/* the eyebrow's line is the square's height, so the two share a centre (Hunter) */
.phase button .mono { display: block; margin-bottom: 12px; line-height: 12px; color: var(--muted); }
.phase-title { display: block; font-size: clamp(30px, 3vw, 44px); line-height: 1.04; letter-spacing: -0.025em; color: rgba(26, 26, 21, 0.38); transition: color 0.3s; }
.phase.on .phase-title, .phase button:hover .phase-title { color: var(--ink); }
.phase p { margin: 0; max-width: 30em; max-height: 0; overflow: hidden; font-size: 16px; line-height: 1.5; color: rgba(26, 26, 21, 0.72); transition: max-height 0.45s, padding 0.45s; }
.phase.on p { max-height: 180px; padding-bottom: 8px; }
.phase button:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.deploy .media { aspect-ratio: 4 / 5; }
.diagram { position: absolute; inset: 0; z-index: 1; }
.diagram svg { width: 100%; height: 100%; overflow: visible; }
.diagram .node rect { fill: rgba(26, 26, 21, 0.9); stroke: rgba(226, 224, 215, 0.28); }
.diagram .node text { fill: rgba(226, 224, 215, 0.5); font-family: "Fragment Mono", ui-monospace, monospace; letter-spacing: 0.05em; text-transform: uppercase; }
.diagram .wire { fill: none; stroke: rgba(226, 224, 215, 0.2); stroke-width: 1; }
.diagram .wire.lit { stroke: var(--tint); stroke-width: 1.5; }
.diagram .comet { fill: none; stroke: var(--cream); stroke-width: 2; }
.diagram .on rect { stroke: var(--cream); }
.diagram .on text { fill: var(--cream); }
.diagram .ace rect { fill: var(--ink); stroke: rgba(226, 224, 215, 0.4); }
.diagram .ace text { fill: rgba(226, 224, 215, 0.7); }
.diagram .ace.on rect { fill: var(--cream); stroke: none; }
.diagram .ace.on text { fill: var(--ink); }
.diagram rect, .diagram text { transition: fill 0.3s, stroke 0.3s; }

/* ---- round three: how you start, the phases as a ladder down the page ---- */
.start-head { align-items: end; }
.start-head h2 { grid-column: 1 / span 6; }
.start-head .lede { grid-column: 8 / span 5; margin: 0; }
.ladder { position: relative; margin-top: 128px; }
.ladder-line { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 0; }
.ladder-line path { fill: none; }
.ladder-line .base { stroke: rgba(26, 26, 21, 0.2); stroke-width: 1; }
.ladder-line .lit { stroke: var(--ink); stroke-width: 2; stroke-linejoin: miter; }
.steps { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.step { grid-column: span 3; position: relative; }
/* the phase and its headline sit on the line, above the station; the copy hangs below it */
.step-head { min-height: 112px; display: flex; flex-direction: column; justify-content: flex-end; }
.step-dot { display: flow-root; position: relative; height: 0; margin: 20px 0 24px; } /* flow-root: its margins must not collapse through it */
.step:nth-child(2) { margin-top: 150px; }
.step:nth-child(3) { margin-top: 300px; }
.step:nth-child(4) { margin-top: 450px; }
/* the station each phase hangs from, on the line */
.step-dot::before { content: ''; position: absolute; left: 2px; top: -6px; width: 12px; height: 12px; background: #B9B6AD; transition: background 0.3s; }
.step.on .step-dot::before { background: var(--ink); }
.step .mono { display: block; margin: 0 0 12px; line-height: 12px; color: var(--muted); }
.step h3 { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.12; }
.step p:not(.mono) { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(26, 26, 21, 0.72); }
/* The rail leaves each station along its line, then drops 150px at 45
   degrees to the next one, through this phase's copy. A float shaped like
   that drop, starting 24px under the station, makes the copy's lines break
   short of the rail (20px clear). */
.step-cut {
  float: right; width: 100%; height: calc(138px - var(--gap));
  shape-outside: polygon(calc(100% + var(--gap) - 138px) 0, 100% 0, 100% 100%);
}

/* the story graphics (story.js): squares are units, rust an exception, the tint resolved */
.invoices { position: relative; height: 172px; margin-top: 32px; }
/* the invoices that went through are quiet; only the exceptions show (Hunter) */
.invoices .unit:not(.exc) { fill: rgba(226, 224, 215, 0.14); }
.map .unit { fill: rgba(226, 224, 215, 0.8); transition: fill 0.25s; }
.map .unit.exc { fill: var(--rust); }
.map .unit.done { fill: var(--tint); }
.map .unit.person { fill: none; stroke: var(--cream); stroke-width: 1; }
.map .lbl.tag { fill: var(--tint); }
.story .note-box { fill: rgba(26, 26, 21, 0.72); }
.story .feed { fill: none; stroke: rgba(226, 224, 215, 0.75); stroke-width: 1.25; }
.story .link { fill: none; stroke: rgba(226, 224, 215, 0.45); stroke-width: 1; }
.story .rec { fill: #B59F8D; }
.story .src { fill: var(--cream); }
.story .lbl.big { font-size: 34px; letter-spacing: -0.01em; fill: var(--cream); }

/* ---- the ask: like the hero, a live shader and the card pinned bottom left ---- */
.ask { height: calc(clamp(600px, 92svh, 880px) + var(--cut)); overflow: hidden; background: var(--ink); }
.ask canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ask .lines { pointer-events: none; }
/* the pre-footer card is teal 200 (Hunter: apart from the hero gold, and not the cream) */
.ask-card.light {
  --card: #7F979B; --card-ink: #1A1A15; --card-soft: rgba(26, 26, 21, 0.8); --card-line: rgba(26, 26, 21, 0.22);
  /* the primary button is cream: ink would run into the ink footer below (Hunter) */
  --card-btn: #E2E0D7; --card-btn-ink: #1A1A15; --card-btn-hover: #F1F0E6; --card-alt-hover: rgba(26, 26, 21, 0.08);
}

/* ---- resources: drawn covers, one large and two across ---- */
.res-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.link { color: inherit; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 400 12px/1 "Fragment Mono", ui-monospace, monospace; letter-spacing: 0.04em; text-transform: uppercase; }
/* warm grey, with the guides and a centre line; the lead runs from the left
   guide to the centre line, the other two from the centre line to the right
   guide (Hunter, Oct 22) */
.resources { background: var(--warm-grey); color: var(--cream); }
.resources::before, .foot::before {
  content: ''; position: absolute; z-index: 0; top: 0; bottom: 0; pointer-events: none;
  left: calc(max(var(--gutter), calc((100% - var(--wrap)) / 2)) - 24px); right: calc(max(var(--gutter), calc((100% - var(--wrap)) / 2)) - 24px);
  border-left: 1px solid rgba(226, 224, 215, 0.12); border-right: 1px solid rgba(226, 224, 215, 0.12);
}
.resources::after { content: ''; position: absolute; z-index: 0; top: 0; bottom: 0; left: calc(50% - 0.5px); width: 1px; background: rgba(226, 224, 215, 0.12); pointer-events: none; }
.resources .wrap { z-index: 1; }
.res-list { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 48px; margin: 72px -24px 0; } /* more air (Mat: busy, close); round six (Mat: still too tight): a gutter round the centre line, so each piece stands apart */
.res {
  display: flex; flex-direction: column; background: var(--surface); color: var(--ink); text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.1, 1), opacity 0.25s;
}
.res.lead { grid-column: 1; grid-row: 1 / span 2; }
.res.side { grid-column: 2; flex-direction: row; }
.res.lead .res-copy .inner { padding-left: 24px; }
/* the cover is a drawing sheet on the resource's ramp colour, with a little grain */
.res-cover { position: relative; overflow: hidden; background: var(--c, #525025); }
.res-cover::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.32; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.res.lead .res-cover { flex: 1; min-height: 360px; }
.res.side .res-cover { flex: 0 0 54%; }
.res-cover .sheet { position: absolute; inset: 0; width: 100%; height: 100%; }
.sheet .f-border { fill: none; stroke: rgba(226, 224, 215, 0.5); stroke-width: 1; }
.sheet .f-tick { stroke: rgba(226, 224, 215, 0.4); stroke-width: 1; }
.sheet .f-zone { fill: rgba(226, 224, 215, 0.45); font: 400 7.5px "Fragment Mono", ui-monospace, monospace; }
.sheet .f-note { fill: rgba(226, 224, 215, 0.72); font: 400 9px "Fragment Mono", ui-monospace, monospace; letter-spacing: 0.08em; }
/* the part, fitted whole inside the border, clear of the notes in its corners */
.res-cover .part { position: absolute; left: 28px; top: 44px; width: calc(100% - 56px); height: calc(100% - 88px); overflow: visible; }
.part path { fill: none; stroke: rgba(226, 224, 215, 0.88); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: stroke 0.3s; }
.part .k-object { stroke-width: 1.5; }
.part .k-thin, .part .k-center, .part .k-text { stroke-width: 0.75; stroke: rgba(226, 224, 215, 0.62); }
.part .k-hidden { stroke-width: 0.8; stroke: rgba(226, 224, 215, 0.55); }
.part .k-hatch { stroke-width: 0.5; stroke: rgba(226, 224, 215, 0.4); }
.part .k-arrow { fill: rgba(226, 224, 215, 0.62); stroke: none; transition: fill 0.3s; }
/* hover: the drawing comes up to full strength, the other cards step back */
.res:hover .part path, .res:focus-visible .part path { stroke: var(--cream); }
.res:hover .part .k-hatch, .res:focus-visible .part .k-hatch { stroke: rgba(226, 224, 215, 0.7); }
.res:hover .part .k-arrow, .res:focus-visible .part .k-arrow { fill: var(--cream); }
.res-copy { display: flex; flex-direction: column; gap: 14px; flex: 1; min-width: 0; }
.res-copy .inner { display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 28px; flex: 1; }
.res .meta { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); margin: 0; }
.res h3 { font-size: 22px; }
.res.lead h3 { font-size: clamp(26px, 2.4vw, 34px); }
.res .by { margin: auto 0 0; color: rgba(26, 26, 21, 0.55); }
.res .wcard-cta { border-top: 1px solid var(--rule); }
.res:hover .wcard-cta, .res:focus-visible .wcard-cta { background: var(--ink); color: var(--cream); }
.res-list:hover .res:not(:hover) { opacity: 0.75; }
.resources .res:focus-visible { outline-color: var(--cream); }
.res:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

/* round three: the covers as JD's blog collages */
.res-cover .collage { position: absolute; inset: 0; width: 100%; height: 100%; }
.collage .halftone circle { fill: rgba(226, 224, 215, 0.5); }
.collage .reg { fill: none; stroke: rgba(226, 224, 215, 0.8); stroke-width: 1; }
.collage .leader { fill: none; stroke: rgba(226, 224, 215, 0.6); stroke-width: 1; }
.collage .mark { fill: var(--cream); }
.collage .art path { fill: none; stroke: rgba(226, 224, 215, 0.9); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.collage .art .k-object { stroke-width: 1.5; }
.collage .art .k-thin, .collage .art .k-center, .collage .art .k-text { stroke-width: 0.8; }
.collage .art .k-hatch { stroke-width: 0.5; }
.collage .art .k-arrow { fill: rgba(226, 224, 215, 0.8); stroke: none; }
.collage .art.ink path { stroke: rgba(26, 26, 21, 0.86); }
.collage .art.ink .k-thin, .collage .art.ink .k-center, .collage .art.ink .k-text, .collage .art.ink .k-hidden { stroke: rgba(26, 26, 21, 0.62); }
.collage .art.ink .k-hatch { stroke: rgba(26, 26, 21, 0.4); }
.collage .art.ink .k-arrow { fill: rgba(26, 26, 21, 0.75); }
.collage .slide { transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.1, 1); }
.res:hover .collage .slide.a { transform: translateX(8px); }
.res:hover .collage .slide.b { transform: translateX(-8px); }

/* ---- the footer: large, on a live shader, the logo assembling across it ---- */
.foot { background: var(--ink); color: var(--cream); }
.foot-body, .foot-hero { position: relative; z-index: 1; }
.foot-hero { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 64px; min-height: clamp(520px, 78svh, 760px); padding: 136px var(--gutter) 72px; }
.foot-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.foot-hero .wrap { width: 100%; }
.foot-statement { position: relative; margin: 0; max-width: 11em; font-weight: 400; font-size: clamp(48px, 6.6vw, 108px); line-height: 0.98; letter-spacing: -0.035em; text-wrap: balance; }
/* the two actions sit edge to edge, like the hero card's button row (Hunter) */
.foot-actions { position: relative; display: flex; flex-wrap: wrap; gap: 0; }
.btn.large { height: 52px; padding: 0 22px; gap: 16px; font-size: 13px; }
.btn.ghost { background: var(--ink); color: var(--cream); }
.btn.ghost:hover { background: #34271C; }
.foot-body { padding: 128px var(--gutter) 28px; }
.foot-lead { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 88px; }
.foot-lead .foot-statement { margin: 0; max-width: 12em; font-weight: 400; font-size: clamp(36px, 4.4vw, 66px); line-height: 1; letter-spacing: -0.03em; text-wrap: balance; }
.foot-cols { row-gap: 40px; }
.foot-cols > div { grid-column: span 2; }
.foot-cols > .foot-join { grid-column: 11 / span 2; }
.foot h4 { margin: 0 0 18px; color: rgba(226, 224, 215, 0.5); font-weight: 400; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.foot ul a { color: var(--cream); text-decoration: none; font-size: 16px; opacity: 0.86; }
.foot ul a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.foot-join p { margin: 0 0 16px; font-size: 16px; line-height: 1.4; color: rgba(226, 224, 215, 0.86); }
.foot-logo { margin-top: 112px; line-height: 0; cursor: default; }
.foot-logo svg { display: block; width: 100%; height: auto; }
.foot-legal { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; color: rgba(226, 224, 215, 0.5); }

/* ---- smaller screens ---- */
@media (max-width: 1100px) {
  .card { width: calc(var(--card-in) + 7 * var(--P) - var(--gap) / 2); }
  .stage { --gap: 20px; }
  .problem-copy { grid-column: 1 / span 7; }
  .stat { grid-column: 8 / span 5; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diff-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diff:nth-child(3) { padding-left: 0; border-left: 0; }
  .diff:nth-child(n + 3) { margin-top: 32px; }
  .proof-main, .quote { grid-column: 1 / -1; }
  .quote { margin-top: 56px; }
  .start-copy { grid-column: 1 / span 7; }
  .deploy { grid-column: 8 / span 5; }
  .foot-cols > div { grid-column: span 4; }
  .foot-cols > .foot-join { grid-column: span 4; }
}
@media (max-height: 720px) {
  .card-head { padding: 26px 30px 30px var(--card-in); }
  .card-body { padding-top: 16px; padding-bottom: 18px; }
  .card-body p { font-size: 15px; }
  .card-btn { height: 52px; }
}
@media (max-width: 760px) {
  .stage { --gutter: 16px; --nav-h: 60px; --notch: 36px; --cut: 32px; --gap: 16px; }
  .nav { gap: 16px; }
  .nav-logo img, .nav-logo svg { height: 19px; }
  .nav-links { display: none; }
  .nav .btn { margin-left: auto; height: 30px; padding: 0 10px; font-size: 11px; }
  .nav-menu {
    display: inline-flex; align-items: center; height: 30px; padding: 0;
    background: none; border: 0; color: var(--cream); cursor: pointer;
    font: 400 11px/1 "Fragment Mono", ui-monospace, monospace; letter-spacing: 0.04em; text-transform: uppercase;
  }
  .card { --card-in: var(--gutter); left: 0; right: 0; width: auto; }
  .card-head { padding: 24px 20px 28px var(--gutter); }
  .card h1, .card h2 { font-size: clamp(30px, min(9.4vw, 5.4vh), 44px); }
  .card-body { padding: 18px 20px 20px var(--gutter); }
  .card-body p { font-size: 15px; }
  .card-btn { height: 52px; padding: 0 16px; font-size: 12px; }
  .card-btn:first-child { padding-left: var(--card-in); }

  .band { padding: 80px var(--gutter) calc(80px + var(--cut)); }
  .band.cream .wrap::before, .band.cream .wrap::after { display: none; }
  .problem::before { display: none; }
  .g12 > *, .problem-copy, .stat, .how-head h2, .how-head .lede, .feature-copy, .feature .media, .proof-main, .quote, .start-copy, .deploy { grid-column: 1 / -1; grid-row: auto; }
  .stat { margin-top: 56px; }
  .stat-figure { font-size: 44vw; }
  .problem .carry { display: none; }
  .stat-label { padding-left: 0; }
  .how-head { row-gap: 20px; margin-bottom: 56px; }
  .feature { row-gap: 32px; }
  .feature + .feature { margin-top: 80px; }
  .media { aspect-ratio: 4 / 5; }
  .feature .media { aspect-ratio: 4 / 5; margin: 0; }
  .how::after { display: none; }
  .proof-main { gap: 48px; padding-right: 0; }
  .shift-to { font-size: 30vw; }
  .shift-row { margin-top: 84px; }
  .shift-from { bottom: calc(100% + 14px); }
  .shift-meta { flex-direction: column; gap: 6px; }
  .quote { margin-top: 48px; }
  .quote-body { padding: 28px 22px 32px; }
  .wf-head { text-align: left; }
  .workflows .map { display: none; }
  .cards { margin-top: 48px; }
  .cards, .diff-list { grid-template-columns: 1fr; }
  .diff + .diff, .diff:nth-child(3) { padding-left: 0; border-left: 0; margin-top: 32px; }
  .deploy { position: relative; top: 0; margin-top: 48px; }
  .start-head h2, .start-head .lede { grid-column: 1 / -1; }
  .start-head { row-gap: 20px; }
  .ladder { margin-top: 64px; }
  .step, .step:nth-child(n) { grid-column: 1 / -1; margin-top: 0; padding-left: 40px; }
  .step-cut { display: none; }
  .step-head { min-height: 0; }
  .step-dot::before { left: -38px; } /* back on the rail, outside the step's 40px inset */
  .step + .step { margin-top: 64px; }
  .phase { padding-left: 40px; }
  .ask .card { bottom: var(--cut); }
  .res-list { grid-template-columns: 1fr; grid-template-rows: none; margin: 40px 0 0; }
  .resources::before, .resources::after, .foot::before { display: none; }
  .res.lead .res-copy .inner { padding-left: 22px; }
  .res.lead, .res.side { grid-column: 1 / -1; grid-row: auto; flex-direction: column; }
  .res.side .res-cover, .res.lead .res-cover { flex: none; aspect-ratio: 4 / 3; min-height: 0; }
  .res-cover .part { left: 24px; top: 40px; width: calc(100% - 48px); height: calc(100% - 80px); }
  .foot-hero { padding: 96px var(--gutter) 48px; min-height: 0; }
  .foot-body { padding-top: 88px; }
  .foot-lead { flex-direction: column; align-items: flex-start; margin-bottom: 56px; }
  .foot-actions .btn { flex: 1 1 100%; justify-content: space-between; }
  .foot-cols > div, .foot-cols > .foot-join { grid-column: span 6; }
  .foot-cols > .foot-join { grid-column: 1 / -1; }
  .foot-logo { margin-top: 64px; }
  .foot-legal { flex-direction: column; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .wcard, .res, .phase p, .rail .lit { transition: none; }
}

/* ==== Request demo (round three, 02) ==== */
.btn.current { background: #B59F8D; }
/* the hero: the photo and lines above, two cards side by side at its foot */
/* the hero grows with its one card: the card sits at the foot, from the left guide line, six columns */
.demo-hero { height: auto; min-height: calc(max(100svh, 860px) + var(--cut)); display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--nav-h) + 72px) 0 var(--cut); }
.demo-hero .demo-card { position: relative; left: auto; bottom: auto; margin: 0 0 0 calc(var(--M) - var(--card-in)); display: flex; flex-direction: column; color: var(--card-ink); }
.demo-hero .demo-card h1 { font-size: clamp(36px, min(4.6vw, 7.6vh), 72px); }
.promises { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.promises li { display: flex; gap: 14px; align-items: baseline; font-size: 16px; line-height: 1.4; color: var(--card-soft); }
.promises li::before { content: ''; flex: none; width: 8px; height: 8px; background: var(--card-ink); transform: translateY(-1px); }
.form-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 26px var(--gap); padding: 28px 30px 26px var(--card-in); border-top: 1px solid var(--card-line); }
.field { position: relative; display: flex; flex-direction: column; gap: 8px; }
.field.wide { grid-column: 1 / -1; }
/* underlined fields (Hunter, Oct 22), in the card's own ink so any card colour works */
.field > .mono { font-size: 10.5px; color: var(--card-soft); }
.field em { font-style: normal; margin-left: 8px; color: color-mix(in srgb, var(--card-ink) 50%, transparent); }
.field input, .field textarea, .drop-box {
  --under: color-mix(in srgb, var(--card-ink) 42%, transparent);
  font: 400 16px/1.4 "APK Galeria", "Geist", system-ui, sans-serif; color: var(--card-ink);
  background: transparent; border: 0; border-radius: 0; padding: 6px 0 10px; outline: none; resize: none;
  box-shadow: inset 0 -1px 0 var(--under); transition: box-shadow 0.15s;
}
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--card-ink) 42%, transparent); }
.field input:hover, .field textarea:hover { --under: color-mix(in srgb, var(--card-ink) 70%, transparent); }
.field input:focus, .field textarea:focus { box-shadow: inset 0 -2px 0 var(--card-ink); }
.field.bad input { box-shadow: inset 0 -2px 0 var(--rust); }
.field.drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop-box { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 15px; }
.drop-box .mono { font-size: 10px; color: var(--card-soft); }
.field.drop:hover .drop-box { --under: color-mix(in srgb, var(--card-ink) 70%, transparent); }
.field.drop:focus-within .drop-box { box-shadow: inset 0 -2px 0 var(--card-ink); }
.form-note { margin: 0; padding: 0 30px 20px var(--card-in); color: var(--card-soft); }
.card-actions.one { grid-template-columns: 1fr; }
button.card-btn { border: 0; width: 100%; cursor: pointer; text-align: left; }
.demo-card.sent .form-fields, .demo-card.sent .form-note, .demo-card.sent .card-actions { display: none; }
.form-done { padding: 36px 30px 44px var(--card-in); border-top: 1px solid var(--card-line); }
.form-done h2 { font-size: clamp(32px, 3.2vw, 48px); }
.form-done p { margin: 16px 0 28px; max-width: 26em; font-size: 16px; line-height: 1.45; color: var(--card-soft); }
/* what the demo covers: three graphics on one row */
.covers-row { list-style: none; margin: 88px 0 0; padding: 0; row-gap: 48px; }
.cover-step { grid-column: span 4; }
.story-art.media { aspect-ratio: 4 / 3; }
.cover-step h3 { margin-top: 22px; max-width: 15em; font-size: clamp(20px, 1.8vw, 24px); }
/* FAQ: a question to a row, hairlines between, from the centre line to the
   right guide; the mark turns 45 degrees from + to x as a row opens */
.faq .wrap { align-items: start; }
.faq::after { content: ''; position: absolute; z-index: 0; top: 0; bottom: 0; left: calc(50% - 0.5px); width: 1px; background: var(--rule); pointer-events: none; }
.faq-head { grid-column: 1 / span 5; position: relative; z-index: 1; }
.faq-head .eyebrow { margin: 0 0 18px; color: var(--muted); }
.faq-list { grid-column: 7 / span 6; position: relative; z-index: 1; margin: 0 -24px 0 calc(var(--gap) / -2); border-top: 1px solid var(--rule); interpolate-size: allow-keywords; }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 24px 26px calc(var(--gap) / 2); font-size: 20px; line-height: 1.25; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 1px solid var(--ink); outline-offset: -4px; }
.faq-mark { position: relative; flex: none; width: 14px; height: 14px; transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.1, 1); }
.faq-mark::before, .faq-mark::after { content: ''; position: absolute; background: currentColor; }
.faq-mark::before { left: 0; right: 0; top: 6.5px; height: 1px; }
.faq-mark::after { top: 0; bottom: 0; left: 6.5px; width: 1px; }
.faq-item[open] .faq-mark { transform: rotate(45deg); }
.faq-item summary:hover .faq-mark { color: var(--gold); }
.faq-item::details-content { block-size: 0; overflow: hidden; transition: block-size 0.35s cubic-bezier(0.2, 0.7, 0.1, 1), content-visibility 0.35s allow-discrete; }
.faq-item[open]::details-content { block-size: auto; }
.faq-a { padding: 0 72px 28px calc(var(--gap) / 2); }
.faq-a p { margin: 0; max-width: 34em; font-size: 16px; line-height: 1.5; color: rgba(26, 26, 21, 0.72); }
@media (max-width: 1100px) {
  .cover-step { grid-column: span 6; }
  .faq-head { grid-column: 1 / span 5; }
}
@media (max-width: 760px) {
  .demo-hero { min-height: 0; padding-top: 46svh; }
  .demo-hero .demo-card { margin: 0; width: auto; }
  .form-fields { grid-template-columns: 1fr; padding: 24px 20px 20px var(--gutter); }
  .form-note { padding: 0 20px 16px var(--gutter); }
  .form-done { padding: 32px 20px 36px var(--gutter); }
  .faq::after { display: none; }
  .diff h3 { min-height: 0; }
  .faq-head, .faq-list { grid-column: 1 / -1; }
  .faq-list { margin: 40px 0 0; }
  .faq-item summary { padding: 20px 0; font-size: 18px; }
  .faq-a { padding: 0 0 24px; }
  .cover-step { grid-column: 1 / -1; }
}

/* ==== Autonomous Context Engine (round three, 03) ==== */
/* the graph takes the hero's right half, from the middle gutter line to the edge */
.ace-graph { position: absolute; z-index: 1; top: calc(var(--nav-h) + 8px); bottom: calc(var(--cut) + 12px); left: calc(var(--M) + 6 * var(--P) - var(--gap) / 2); right: 0; }
.map .node circle.hit { fill: transparent; cursor: pointer; }
.map .node { outline: none; }
.map .node.on circle:not(.hit) { fill: var(--cream); }
.map .node.on .lbl { fill: var(--cream); }
.map .hold rect { fill: rgba(26, 26, 21, 0.92); stroke: rgba(226, 224, 215, 0.25); }
.ace-layer .wrap { align-items: center; }
.layer-copy { grid-column: 1 / span 5; }
.layer-copy p { margin: 20px 0 0; font-size: 17px; line-height: 1.5; color: rgba(26, 26, 21, 0.75); }
.layer-copy h2 + p { margin-top: 28px; }
.layer-art.media { grid-column: 7 / span 6; aspect-ratio: 4 / 5; margin: 0 -24px 0 calc(var(--gap) / -2); }
/* the ACE's layers as isometric slabs: a tinted top with its dots, two thin sides */
.story .slab-top { fill: rgba(26, 26, 21, 0.5); stroke: rgba(226, 224, 215, 0.6); stroke-width: 1; stroke-linejoin: round; }
.story .slab-side { fill: rgba(26, 26, 21, 0.62); stroke: rgba(226, 224, 215, 0.4); stroke-width: 1; stroke-linejoin: round; }
.story .slab-side.dark { fill: rgba(26, 26, 21, 0.78); }
.story .slab .unit { fill: rgba(226, 224, 215, 0.22); }
.story .slab .unit.done { fill: var(--tint); }
/* a centre line, like the homepage's How section: the panel runs from it to the right guide */
.band.centred::after { content: ''; position: absolute; z-index: 0; top: 0; bottom: 0; left: calc(50% - 0.5px); width: 1px; background: var(--rule); pointer-events: none; }
/* the ACE hero's cube: the homepage's, on the right half */
.ace-graph .cube, .ace-graph .living { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ace-graph .cube-caption { left: 24px; bottom: 22px; }
/* round six (Mat): the network takes most of the hero, like the homepage's, and runs on behind the card; the caption stays on the right half */
@media (min-width: 761px) {
  .ace-graph.wide { left: 0; }
  .ace-graph.wide .cube-caption { left: calc(var(--M) + 6 * var(--P) - var(--gap) / 2 + 24px); }
}
.quote-band .wrap { align-items: start; }
.quote-logo { grid-column: 1 / span 3; padding-top: 10px; }
.quote-logo .customer-logo { margin: 0; }
.big-quote { grid-column: 4 / span 8; margin: 0; }
.big-quote blockquote { margin: 0; font-size: clamp(26px, 2.7vw, 40px); line-height: 1.18; letter-spacing: -0.015em; text-wrap: balance; }
.big-quote figcaption { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 32px; color: rgba(226, 224, 215, 0.7); }
.audit-band h2 { max-width: 16em; }
.audit { margin-top: 64px; align-items: stretch; }
/* the audit map: from guide to guide, tall enough for its three parts */
.audit-art.media { grid-column: 1 / -1; margin: 64px -24px 0; aspect-ratio: auto; height: clamp(480px, 34vw, 540px); }
.audit-col { grid-column: span 3; background: rgba(226, 224, 215, 0.05); padding: 22px 22px 26px; }
.audit-col.talk { grid-column: span 6; display: flex; flex-direction: column; gap: 14px; }
.col-head { margin: 0 0 18px; color: rgba(226, 224, 215, 0.55); }
.col-head.record { margin-top: 30px; }
.layers, .tasks, .audit-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.layers li, .tasks li { display: flex; gap: 12px; align-items: center; font: 400 11px/1.3 "Fragment Mono", ui-monospace, monospace; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(226, 224, 215, 0.55); transition: color 0.3s; }
.layers li::before, .tasks li::before { content: ''; flex: none; width: 8px; height: 8px; background: rgba(226, 224, 215, 0.25); transition: background 0.3s; }
.layers li.on { color: var(--cream); }
.layers li.on::before { background: var(--tint); }
.tasks li.done { color: var(--cream); }
.tasks li.done::before { background: var(--tint); }
.audit-log li { font: 400 10px/1.4 "Fragment Mono", ui-monospace, monospace; letter-spacing: 0.04em; color: rgba(226, 224, 215, 0.6); }
.msg { opacity: 0; transform: translateY(8px); transition: opacity 0.35s, transform 0.35s cubic-bezier(0.2, 0.7, 0.1, 1); max-width: 80%; }
.msg.in { opacity: 1; transform: none; }
.msg .mono { color: rgba(226, 224, 215, 0.5); }
.msg p { margin: 6px 0 0; padding: 12px 14px; font-size: 15px; line-height: 1.45; background: rgba(226, 224, 215, 0.08); }
.msg.from-agent { align-self: flex-end; }
.msg.from-agent .mono { display: block; text-align: right; }
.msg.from-agent p { background: var(--tint); color: var(--ink); }
.learn-row { margin-top: 80px; row-gap: 48px; }
.learn-card { grid-column: span 4; }
.media.plain { aspect-ratio: 4 / 3; background: var(--ink); }
.learn-card h3 { margin-top: 22px; font-size: 22px; }
.learn-card p { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: rgba(26, 26, 21, 0.72); }
.media.learn-art { aspect-ratio: 4 / 3; }
/* enterprise-ready: the claim left, five rows with marks from the centre line to the right guide */
.band.ink.centred::after { background: var(--line); }
.ready .wrap { align-items: start; position: relative; z-index: 1; }
.ready-head { grid-column: 1 / span 5; max-width: 9em; }
.ready-list { grid-column: 7 / span 6; margin: 0 -24px 0 calc(var(--gap) / -2); border-top: 1px solid var(--line); }
.ready-row { display: grid; grid-template-columns: 56px 1fr; gap: 28px; align-items: start; padding: 28px 24px 28px calc(var(--gap) / 2); border-bottom: 1px solid var(--line); }
.ready-row .glyph { margin: 2px 0 0; width: 48px; height: 48px; }
.ready-row h3 { font-size: 21px; }
.ready-row p { margin: 10px 0 0; max-width: 30em; font-size: 15px; line-height: 1.5; color: rgba(226, 224, 215, 0.7); }

/* ==== Use case (round three, 04) ==== */
.uc-stats { padding-top: 96px; padding-bottom: calc(96px + var(--cut)); }
.uc-stat { grid-column: span 4; }
.uc-num { margin: 0; font-size: clamp(56px, 6.2vw, 100px); line-height: 0.9; letter-spacing: -0.045em; }
.uc-stat .mono { margin: 18px 0 0; max-width: 20em; color: rgba(226, 224, 215, 0.7); }
.uc-lead { align-items: center; }
.uc-lead-copy { grid-column: 1 / span 5; }
.uc-lead-copy .eyebrow, .uc-head .eyebrow, .uc-compare .eyebrow, .uc-impact-copy .eyebrow, .next-head .eyebrow { margin: 0 0 18px; color: var(--muted); }
.ink .eyebrow { color: rgba(226, 224, 215, 0.55) !important; }
.uc-art.media { grid-column: 7 / span 6; aspect-ratio: 4 / 3; }
.uc-cards { margin-top: 88px; row-gap: 40px; }
.uc-cards > div { grid-column: span 3; }
.uc-cards h3, .uc-steps h3 { font-size: 20px; line-height: 1.15; }
.uc-cards p, .uc-steps p { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: rgba(26, 26, 21, 0.72); }
.uc-head { align-items: end; }
.uc-head-copy { grid-column: 1 / span 6; }
.uc-head .lede { grid-column: 8 / span 5; margin: 0; }
.uc-run.media { margin-top: 64px; aspect-ratio: auto; height: clamp(300px, 30vw, 420px); clip-path: none; background: rgba(226, 224, 215, 0.04); }
.uc-steps { list-style: none; margin: 32px 0 0; padding: 0; row-gap: 32px; }
.uc-steps li { grid-column: span 3; }
.uc-steps p { color: rgba(226, 224, 215, 0.7); }
.map .station-bar { stroke: rgba(226, 224, 215, 0.5); stroke-width: 1; }
.map .doc { fill: rgba(26, 26, 21, 0.86); stroke: rgba(226, 224, 215, 0.2); }
.map .match { fill: none; stroke: var(--tint); stroke-width: 1.25; transition: stroke 0.3s; }
.map .match.bad { stroke: var(--rust); stroke-dasharray: 3 3; }
.map .lbl.bad { fill: var(--rust); }
.map .unit.maybe { fill: none; stroke: var(--cream); stroke-width: 1; }
.map .unit.gone { fill: rgba(226, 224, 215, 0.12); }
.compare { margin-top: 56px; }
.compare-head { margin: 0 0 14px; }
.compare-head .mono { grid-column: span 6; color: var(--muted); }
.compare-rows { list-style: none; margin: 0; padding: 0; }
.compare-rows li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: 20px 0; border-top: 1px solid var(--rule); }
.compare-rows li > span { grid-column: span 6; display: flex; gap: 14px; align-items: baseline; font-size: 18px; line-height: 1.35; }
.compare-rows li > span:first-child { color: rgba(26, 26, 21, 0.6); }
.sq { flex: none; display: inline-block; width: 8px; height: 8px; transform: translateY(-1px); }
.sq.exc { background: var(--rust); }
.sq.done { background: var(--ink); }
.uc-impact .wrap { align-items: center; }
.uc-impact-copy { grid-column: 1 / span 5; }
.outcomes { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 14px; }
.outcomes li { display: flex; gap: 14px; align-items: baseline; font-size: 17px; line-height: 1.4; color: rgba(226, 224, 215, 0.85); }
.outcomes li::before { content: ''; flex: none; width: 8px; height: 8px; background: var(--tint); transform: translateY(-1px); }
.next-head h2 { margin: 0; }
@media (max-width: 1100px) {
  .learn-card, .uc-cards > div, .uc-steps li { grid-column: span 6; }
  .audit-col { grid-column: span 4; }
  .audit-col.talk { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 760px) {
  .layer-copy, .layer-art.media, .quote-logo, .big-quote, .learn-card, .ready-head, .ready-list, .audit-col, .audit-col.talk,
  .uc-stat, .uc-lead-copy, .uc-art.media, .uc-cards > div, .uc-head-copy, .uc-head .lede, .uc-steps li, .uc-impact-copy,
  .compare-head .mono, .compare-rows li > span { grid-column: 1 / -1; }
  .ace-graph { position: relative; left: auto; right: auto; top: auto; bottom: auto; height: 62svh; margin-top: var(--nav-h); }
  .ace-hero { height: auto; min-height: 0; padding-bottom: var(--cut); }
  .ace-hero .card { position: relative; bottom: auto; }
  .layer-art.media, .uc-art.media { margin-top: 40px; margin-left: 0; margin-right: 0; }
  .audit-art.media { margin: 40px 0 0; height: 780px; }
  .ready-list { margin: 40px 0 0; }
  .ready-row { grid-template-columns: 40px 1fr; gap: 20px; padding: 24px 0; }
  .ready-row .glyph { width: 40px; height: 40px; }
  .ready-head { max-width: none; }
  .band.centred::after { display: none; }
  .big-quote { margin-top: 32px; }
  .uc-stat + .uc-stat { margin-top: 40px; }
  .compare-head { display: none; }
  .compare-rows li > span:first-child::after { content: none; }
  .compare-rows li > span + span { margin-top: 10px; }
  .msg { max-width: 100%; }
}