/* ============================================================================
   craft/p-custom-build.css · the Custom Build page, on the interior kit
   Loaded after craft/inner.css. Only what the kit does not cover: the claim
   set to the width of the column, the focus frame on the workaround, the moat
   list, the render queue (the signature), the founder rail, the circuit and
   its phone trace, and the extra large price heading. Every colour is one of
   D's tokens; the few raw
   values are D's own (the #0b0b0f screen ground, the scanline rgba).
   ========================================================================== */

/* the column D's .wrap leaves for content, used to size type to the column */
.cb-hero,.cb-price{--cb-col:calc(min(100vw, var(--maxw)) - 2 * clamp(1.25rem, 4vw, 3rem))}

/* ---- 1 · header: the claim as big as the column allows --------------------
   Kallisto's widest line here is WE BUILD WHAT (8.59em at -0.02em tracking,
   measured), so the size is the column over 8.85: that line fills it with a
   3% margin, OFF-THE-SHELF (8.19em) sits just under it, and CAN'T. lands
   alone on the third line. off-the-shelf is free to break at a hyphen, so
   with a reader's own spacing (WCAG 1.4.12) it wraps instead of running
   off the edge.
   A phone gets its own stack, so the claim stays the biggest type on the
   page: WE BUILD / WHAT OFF- / THE-SHELF / CAN'T. The widest of those is
   THE-SHELF at 5.87em, so the size is the column over 6.1 (about 57px at
   390, against 41px for the section heads). */
.cb-hero h1{font-size:min(calc(var(--cb-col) / 8.85), 9.4rem);max-width:none;line-height:.84;text-wrap:wrap}
@media(max-width:640px){.cb-hero h1{font-size:min(calc(var(--cb-col) / 6.1), 5rem)}}
@media(min-width:641px){.cb-hero .kanji{top:auto;bottom:-14%;right:-5vw;font-size:min(44vw,560px)}}
.cb-hero__row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(1.4rem,4vw,3.6rem);align-items:end;margin-top:1.8rem}
.cb-hero .sub{margin-top:0}
.cb-hero .substat{margin-top:0;max-width:32ch}
.cb-hero .cta-row{margin-top:1.6rem}
@media(max-width:900px){.cb-hero__row{grid-template-columns:minmax(0,1fr);align-items:start}.cb-hero .substat{margin-top:.4rem}}

/* the text link: every CTA past the two buttons is one of these (brief §3) */
.cb-tlink{display:inline-flex;align-items:center;min-height:44px;padding-inline:.2rem;color:var(--ash);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--line-lime);
  transition:color .16s var(--e-io),text-decoration-color .16s var(--e-io)}
.cb-tlink:hover{color:var(--lime);text-decoration-color:var(--lime)}
.cta-band .cb-tlink{font-size:.68rem}
@media(max-width:640px){.cb-hero .cta-row .cb-tlink{justify-content:center}}

/* ---- 2 · the workaround: a screen in the workbook's own 16:10 ------------- */
.cb-stakes__h{font-size:clamp(2rem,4.6vw,3.8rem);max-width:24ch}
.cb-stakes__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(1.6rem,4.5vw,4rem);align-items:center;margin-top:1.2rem}
@media(max-width:900px){.cb-stakes__grid{grid-template-columns:minmax(0,1fr)}}
/* D's .screen, reshaped: a .screen would also take the kit's pixel boot, and
   this frame is driven by scroll instead (a rack focus, p-custom-build.js) */
.cb-shot,.cb-plate__fig,.cb-portrait{position:relative;margin:0;border:1px solid var(--line-lime);overflow:hidden;background:#0b0b0f}
.cb-shot{aspect-ratio:16/10}
.cb-shot img,.cb-plate__fig img,.cb-portrait img{display:block;width:100%;height:100%;object-fit:cover}
.cb-shot::after,.cb-plate__fig::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.16) 2px 3px),
  linear-gradient(180deg,rgba(24,23,28,.06),rgba(24,23,28,.26))}

/* ---- 3 · the moat: a bill of materials on cream --------------------------- */
.cb-moat{overflow:hidden}
.cb-moat .kanji{left:-3vw;bottom:-10%;font-size:min(40vw,520px)}
.cb-moat .wrap{position:relative;z-index:2}
.cb-moat__h{font-size:clamp(2.4rem,6.2vw,5.4rem);max-width:16ch;margin-bottom:2.2rem}
.cb-gets{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line-paper)}
.cb-gets li{position:relative;display:grid;grid-template-columns:3.6rem minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(.8rem,2.4vw,2rem);
  align-items:baseline;padding:clamp(1.05rem,2vw,1.45rem) 0;border-top:1px solid var(--line-paper)}
/* a moss cap on each rule, the kit's step detail */
.cb-gets li::before{content:"";position:absolute;left:0;top:-1px;width:44px;height:1px;background:var(--moss-deep)}
.cb-gets__n{color:var(--moss-ink)}
.cb-gets h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(1.12rem,1.9vw,1.55rem);
  line-height:1.05;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.cb-gets p{font-size:clamp(.98rem,1.3vw,1.08rem);line-height:1.55;color:#33332c;max-width:46ch}
@media(max-width:720px){
  .cb-gets li{grid-template-columns:2.4rem minmax(0,1fr);row-gap:.45rem}
  .cb-gets p{grid-column:2}
}

/* ---- 4 · the tools: the render queue (the signature) ---------------------- */
.cb-proof{background:var(--ink-3)}
.cb-proof__stage{background:var(--ink-3)}
.cb-proof__reg{bottom:20px;left:clamp(1.25rem,4vw,3rem)}
.cb-proof__head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;margin-bottom:clamp(1.4rem,2.6vw,2.2rem)}
.cb-proof__head .sec-head{font-size:clamp(2.1rem,4.2vw,3.6rem);max-width:none;margin-bottom:0}
.cb-proof__q{color:var(--ash);padding-bottom:.35rem}
.cb-proof__q b{font-weight:400;color:var(--lime)}
/* three frames, stepped down like jobs in a queue; a trace between each pair
   lights once the job before it has finished rendering */
.cb-plates{--cb-gap:clamp(1rem,2.4vw,2rem);--cb-step:clamp(1rem,2.6vw,2.6rem);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cb-gap);align-items:start}
.cb-plate{position:relative}
.cb-plate:nth-child(2){margin-top:var(--cb-step)}
.cb-plate:nth-child(3){margin-top:calc(var(--cb-step) * 2)}
.cb-plate+.cb-plate::before{content:"";position:absolute;right:100%;top:calc(22px - var(--cb-step));width:var(--cb-gap);height:var(--cb-step);
  color:var(--ash-dim);pointer-events:none;transition:color .3s var(--e-io);
  background:linear-gradient(currentColor,currentColor) 0 0/50% 1px no-repeat,
    linear-gradient(currentColor,currentColor) 50% 0/1px 100% no-repeat,
    linear-gradient(currentColor,currentColor) 100% 100%/50% 1px no-repeat}
.cb-plate.is-done+.cb-plate::before{color:var(--lime)}
.cb-plate__fig{aspect-ratio:16/10}
.cb-plate__cv{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none}
.cb-plate__st b{font-weight:400}
/* the status is QUEUED, a count (050/096) or COMPLETE: a fixed box for the
   longest of them (8 characters and their tracking), so the chip never steps */
.cb-plate__st b{display:inline-block;min-width:calc(8ch + 8 * .22em);text-align:left}
.cb-plate .k{margin-top:1.05rem}
.cb-plate h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(1.05rem,1.45vw,1.3rem);
  line-height:1.05;margin:.6rem 0 .5rem;color:#F4F4F0;text-wrap:balance}
.cb-plate p{font-size:.93rem;line-height:1.52;color:var(--ash)}
/* a short desktop (a 13 inch laptop, a tablet on its side): the stage is one
   viewport, so the head and the queue give up some air to keep every line in */
@media(min-width:901px) and (max-height:820px){
  .cb-proof__head{margin-bottom:1rem}
  .cb-proof__head .sec-head{font-size:clamp(1.9rem,3.4vw,2.8rem)}
  .cb-proof .eyebrow{margin-bottom:.9rem}
  .cb-plates{--cb-step:clamp(.6rem,1.4vw,1.2rem)}
  .cb-plate p{font-size:.86rem;line-height:1.45}
}
/* The kit decides pin or flow once, at load, and marks the flow page
   html.ri-flow (INNER-KIT 7.11), so the queue follows that decision rather
   than the live width. On the flow page (a phone) the pin is a section and
   the queue a column. A page loaded wide and then narrowed (a tablet turned
   to portrait) keeps its sticky, one viewport stage, so the queue keeps its
   three columns there and gives up some air to stay inside it. */
@media(max-width:900px){
  html.ri-flow .cb-plates{grid-template-columns:minmax(0,1fr);gap:2.4rem}
  html.ri-flow .cb-plate:nth-child(n){margin-top:0}
  html.ri-flow .cb-plate+.cb-plate::before{display:none}
  html.ri-flow .cb-proof__q{display:none}
  html:not(.ri-flow) .cb-plates{--cb-gap:.9rem;--cb-step:.8rem}
  html:not(.ri-flow) .cb-proof__head .sec-head{font-size:clamp(1.7rem,4.6vw,2.4rem)}
  html:not(.ri-flow) .cb-plate h3{font-size:.95rem}
  html:not(.ri-flow) .cb-plate p{font-size:.8rem;line-height:1.42}
}
html.ri-flow .cb-proof__stage{padding-block:clamp(3.2rem,8vw,5rem)}

/* ---- 5 · the guide --------------------------------------------------------- */
.cb-guide__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.6rem,4vw,3.2rem);align-items:start;margin-top:.6rem}
@media(max-width:820px){.cb-guide__grid{grid-template-columns:minmax(0,1fr)}}
.cb-portrait{aspect-ratio:3/2}
.cb-guide .prose p.lede{margin-top:1.2rem}
/* the proof rail: four cells, numerals on one baseline. The third item reads
   "Director of AI, $150M company", so its first words sit above the numeral
   in a row the other cells leave empty. */
.cb-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:clamp(2.4rem,5vw,3.6rem)}
.cb-rail__c{position:relative;outline:1px solid var(--hl);display:grid;grid-template-rows:minmax(1.1rem,auto) auto auto;align-content:end;
  padding:clamp(1.3rem,2.6vw,2rem) clamp(1rem,1.8vw,1.5rem)}
.cb-rail__c::before{content:"";position:absolute;left:0;top:0;width:26px;height:1px;background:var(--lime)}
.cb-rail .n{grid-row:2;font-family:var(--font-display);font-weight:900;font-size:clamp(2.4rem,4.6vw,3.9rem);line-height:.9;
  letter-spacing:-.01em;color:var(--lime);font-variant-numeric:tabular-nums}
.cb-rail .l{grid-row:3;margin-top:.7rem;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;line-height:1.5;color:var(--ash)}
.cb-rail .l--pre{grid-row:1;margin:0 0 .5rem}
@media(max-width:820px){.cb-rail{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- 6 · the plan: the circuit lands on each step's cap --------------------- */
.cb-circuit{margin-top:1.6rem}
@media(min-width:821px){.cb-circuit+.steps{margin-top:0}}
/* The phone trace. Below 820px the kit hides the circuit (the steps stack),
   so the pen writes the same circuit down a trace beside them: a pad on each
   step's rule with a tick into it, the paired traces (cut and elevation, as
   on the wide circuit) running to the next pad, and the last pad feeding the
   chip the wide circuit ends on. The Book page's rail, in this page's parts.
   The runs stretch with their step (preserveAspectRatio none on a 24 unit
   wide box drawn 24px wide, so the vertical strokes keep their weight); the
   pads and the chip never stretch. Each svg is its own wire, drawn as it
   clears the bottom of the viewport (data-to="0": over a quarter of the
   section's travel from there). */
.cb-trace{display:none}
@media(max-width:820px){
  .cb-plan .steps{padding-left:2.25rem;row-gap:2.2rem}
  .cb-plan .cb-trace{display:block;position:absolute;left:-30px;width:24px;margin:0;overflow:visible}
  .cb-plan .cb-trace--node,.cb-plan .cb-trace--end{top:-12px;height:auto}
  .cb-plan .cb-trace--node{aspect-ratio:1}
  .cb-plan .cb-trace--end{aspect-ratio:24/72}
  /* from under this pad to just above the next: the step's padding box plus
     the row gap, less the two pad radii (with stroke) */
  .cb-plan .cb-trace--run{top:8px;height:calc(100% + 2.2rem - 15px)}
}

/* ---- 7 · pricing: the heading is the display type --------------------------- */
.cb-price{overflow:hidden}
.cb-price .kanji{right:-4vw;top:-6%;font-size:min(30vw,380px)}
.cb-price .wrap{position:relative;z-index:2}
/* The heading carries the figure, so it is written once, through the scan,
   and the cards under it stay at card size. The column sets the breaks, as a
   measure in em, because the size is a fraction of the column. Measured in
   Kallisto 900 at -0.02em: "Platforms from" is 10.05em and the whole line
   15.39em. At the column over 10.4 the column is 10.4em, so "Platforms from"
   fills the first line with a 3% margin and "$25,000." sits alone on the
   second. A phone sets one word per line: at the column over 8.1 the column
   is 8.1em, wider than "Platforms" (6.64em) and narrower than "from $25,000."
   (8.52em).
   The host keeps the full column as its box, with no max-width: the engine
   masks each line in a block the width of the host, so a box narrower than
   a word cuts it. With a reader's own spacing (WCAG 1.4.12: .12em letters,
   .16em words) "Platforms" grows to 7.9em, which still fits the phone's
   8.1em; on wider screens the first line wraps inside its own line block
   instead of running off the edge. Plain text, a solid colour and
   proportional figures, because the scan paints the words itself; wrap, not
   balance, because balance would move the break to after "Platforms". */
.cb-price__h{font-size:calc(var(--cb-col) / 10.4);line-height:.9;letter-spacing:-.02em;color:var(--lime);
  max-width:none;text-wrap:wrap;margin:0}
@media(max-width:640px){.cb-price__h{font-size:calc(var(--cb-col) / 8.1);line-height:.92}}
/* the rail breaks between its three phrases, never inside one */
.cb-price__rail{margin-top:1.5rem;color:var(--ash);letter-spacing:.16em;line-height:1.7;text-wrap:balance}
.cb-price__rail span{white-space:nowrap}
.cb-price__grid{margin-top:clamp(1.8rem,3.4vw,2.6rem)}

/* ---- 9 · the close: the kit's (decision line, roster line, words origin) ---- */

/* ---- reduced motion: the finished state ---------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .cb-plate__cv,.cb-shot .pixfx{display:none}
  .cb-tlink,.cb-plate+.cb-plate::before{transition:none}
}