/* BeargrassAI DIY (board page kit, at /diy/), after /brand/tokens.css and base.css. Moving rules sit under .m, so
   reduced motion and scripts off show the still composition. About: BGA 2.0.0-preview.19 (round 4: the first screen opens on
   sq-bench, BGA 73 to 75). */

/* 1 and 2 · One night for the first screen and the survey line; its sky turns toward blue hour. */
.build { position: relative; overflow-x: clip; } /* clip, not hidden, so the stage still pins */
.kit-track { background: radial-gradient(ellipse 80% 62% at 82% 6%, rgba(43, 69, 99, 0.4), rgba(43, 69, 99, 0) 72%) 0 0 / 100% 100vh no-repeat, linear-gradient(180deg, #060a18 0%, #0a1024 22%, #0d1630 50%, #141f36 76%, var(--night-2) 100%); }
.incl { margin-top: 12px; max-width: 44ch; font: 400 13.5px/1.55 var(--mono); color: var(--cream-2); }
.actions .btn { min-width: 150px; }
.hero-art .veil { position: absolute; z-index: 0; left: 0; top: 0; width: 100%; height: 100%; max-width: none; }
.hero-art .veil { z-index: 1; display: block; background: #060a1a; opacity: 0; pointer-events: none; }
.m .hero-art .veil { opacity: 0.66; }
.m .hero-art.risen .veil { opacity: 0; transition: opacity 2.8s cubic-bezier(0.3, 0, 0.2, 1) 0.15s; }
.art-in { position: absolute; z-index: 3; inset: 0; overflow: hidden; pointer-events: none; }
.art-in .glow { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The township, laid on the bench top by page.js. Without scripts it has no place on the picture, so it is not shown. */
.hero-art .twp { position: absolute; z-index: 1; left: 0; top: 0; width: 240px; height: 240px; margin: 0; transform-origin: 0 0; visibility: hidden; }
.hero-art .twp.laid { visibility: visible; }
.hero-art .twp i { padding: 4px 5px; font-size: 9px; }
/* Phone and tablet with scripts: the first screen is one screen, and the band takes what the words leave. The band is a
   size container, and the picture is laid in it by CSS alone (BGA preview.19, so nothing moves when the script
   arrives): as wide as the screen, or down to 86% of it on a short band so the tools stay inside it; the bench top
   (the master's 0.435 to 0.805) in the band's middle; the window fading in behind the headline and the bench's front
   into the night behind the lead. --k, --ar and --vm come from the crop (crops.json): --k is the picture's width per
   pixel of bench, --ar its height over its width, --vm the bench's middle down the picture, times --ar. The picture
   stays at 0.42 behind the whole headline, its descenders too, so every letter keeps 3:1 over the lit sill; it comes
   to full a little below them. page.js reads the box this makes to lay the township; it never moves it. */
@media (max-width: 899px) {
  .js .hero-art .veil, .js .art-in {
    --iw: clamp(calc(var(--lo) * 102cqw), calc((100cqh - 6px) * var(--k)), 102cqw);
    --t: calc(var(--iw) * var(--vm) - 50cqh);
    --sd: clamp(0px, calc((102cqw - var(--iw)) * 8), 30px);
  }
  .js .hero-art .veil { left: calc((100cqw - var(--iw)) / 2); top: calc(-1 * var(--t)); width: var(--iw); height: calc(var(--iw) * var(--ar)); object-fit: fill;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--t) - 200px), rgba(0, 0, 0, var(--up1)) calc(var(--t) - 116px), rgba(0, 0, 0, var(--up2)) calc(var(--t) - 22px), rgba(0, 0, 0, var(--up2)) calc(var(--t) + 5px), #000 calc(var(--t) + 22px), #000 calc(var(--t) + 100cqh - 14px), rgba(0, 0, 0, var(--dn)) calc(var(--t) + 100cqh + var(--dn1)), transparent calc(var(--t) + 100cqh + var(--dn2))), linear-gradient(90deg, transparent 0, #000 var(--sd), #000 calc(100% - var(--sd)), transparent);
    mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--t) - 200px), rgba(0, 0, 0, var(--up1)) calc(var(--t) - 116px), rgba(0, 0, 0, var(--up2)) calc(var(--t) - 22px), rgba(0, 0, 0, var(--up2)) calc(var(--t) + 5px), #000 calc(var(--t) + 22px), #000 calc(var(--t) + 100cqh - 14px), rgba(0, 0, 0, var(--dn)) calc(var(--t) + 100cqh + var(--dn1)), transparent calc(var(--t) + 100cqh + var(--dn2))), linear-gradient(90deg, transparent 0, #000 var(--sd), #000 calc(100% - var(--sd)), transparent);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
  /* the township and the glints end where the picture does */
  .js .art-in { -webkit-mask-image: linear-gradient(90deg, transparent calc(50% - var(--iw) / 2), #000 calc(50% - var(--iw) / 2 + var(--sd)), #000 calc(50% + var(--iw) / 2 - var(--sd)), transparent calc(50% + var(--iw) / 2)); mask-image: linear-gradient(90deg, transparent calc(50% - var(--iw) / 2), #000 calc(50% - var(--iw) / 2 + var(--sd)), #000 calc(50% + var(--iw) / 2 - var(--sd)), transparent calc(50% + var(--iw) / 2)); }
}

/* The plat: the township (tiles-light), the lots where the steps light, the line between them. */
.kit-track .stage { overflow: hidden; }
.plat { position: relative; z-index: 2; width: 100%; aspect-ratio: 1 / 1; }
.plat .twp { position: absolute; inset: 0; }
.lots { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); pointer-events: none; }
.lots b { position: relative; display: grid; place-items: end; padding: 0 7px 6px 0; background: rgba(244, 196, 90, 0.22); box-shadow: inset 0 0 0 1px rgba(244, 196, 90, 0.85); }
.lots span { font: 600 14px/1 var(--mono); color: var(--gold-bright); text-shadow: 0 0 10px rgba(10, 16, 36, 0.95); }
/* phone: step 0's number keeps 12px from the edge */
@media (max-width: 899px) { .lots b:first-child { padding-right: 12px; } }
.snake { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.snake path { fill: none; stroke: var(--gold-bright); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 0 8; vector-effect: non-scaling-stroke; }

/* The ten steps, by name, beside the plat. */
.steps-copy { position: relative; z-index: 3; padding-top: 24px; padding-bottom: 40px; }
.steps-copy h2 { max-width: 16ch; font-size: clamp(30px, 8.2vw, 54px); line-height: 1.06; color: var(--white); }
.steplist { margin-top: 14px; }
.steplist li { padding: 4px 0; font: 500 16px/1.35 var(--sans); color: var(--cream); }
.steplist .sn { font: 500 14px/1 var(--mono); color: var(--gold-bright); }
.steplist .sd { color: var(--cream-2); }

/* In motion: the track pins the stage; the plat sits under the first screen's words, then rises and stays. */
.m .kit-track { height: 560vh; }
.m .kit-track .stage { display: flex; flex-direction: column; }
.m .plat { flex: none; aspect-ratio: auto; height: clamp(240px, 100svh - 470px, 100vw); margin-top: 6px; }
.m .lots b { opacity: 0; background: rgba(244, 196, 90, 0.3); box-shadow: inset 0 0 0 1px rgba(244, 196, 90, 0.95), 0 0 24px rgba(244, 196, 90, 0.26); transition: opacity 0.35s ease; }
.m .lots b.on { opacity: 0.58; }
.m .lots b.now, .m .plat.done .lots b { opacity: 1; }
.m .snake { display: none; }
.m .steps-copy { padding-top: 18px; padding-bottom: 0; }
.m .steplist .sn { opacity: 0.6; transition: opacity 0.3s ease; }
.m .steplist .sd, .m .steplist .st { opacity: 0; transition: opacity 0.35s ease; }
.m .steplist li.on .sn, .m .steplist li.on .sd { opacity: 1; }
.m .steplist li.on .st { opacity: 0.72; }
.m .steplist li.now .st { opacity: 1; color: var(--white); }

/* 3 · Sunrise: the heading at night, then the dawn, where the plan of one page sweeps to the printed page. */
.live { position: relative; background: var(--paper); color: var(--ink); }
.live-head { padding: 64px 0 34px; background: linear-gradient(180deg, #0b1122 0%, var(--night-2) 34%, #24364f 68%, var(--indigo) 100%); color: var(--cream); }
html:not(.js) .live-head { background: linear-gradient(180deg, var(--night-2) 0%, #24364f 60%, var(--indigo) 100%); }
.live-head .eyebrow { color: var(--cream-2); }
.live-head h2 { max-width: 18ch; font-size: clamp(32px, 8.6vw, 60px); line-height: 1.06; color: var(--white); }
.h2b { display: block; margin-top: 0.3em; color: var(--cream); }
.dawn .card-c { max-width: 920px; }
.m #dawn .dawn-art { -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent); mask-image: linear-gradient(180deg, #000 78%, transparent); }
#day > .topo { -webkit-mask-image: linear-gradient(180deg, transparent 70px, #000 300px); mask-image: linear-gradient(180deg, transparent 70px, #000 300px); }
.site-card .face-day, .site-card .face-night { display: block; }
.sk-cap { position: relative; z-index: 2; margin-top: 18px; font: 400 13px/1.5 var(--mono); color: var(--ink-2); }

/* The page by day in ink; by night, the plan in dashed cream. */
.sk { color: var(--ink); }
.sk-url { display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--rule-ink); font: 500 11.5px/1 var(--mono); letter-spacing: 0.04em; color: var(--ink-2); }
.sk-url i { width: 9px; height: 9px; border: 1px solid currentColor; }
.sk-in { display: grid; gap: 16px; padding: 16px 16px 20px; }
.sk-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sk-name { font: 600 17px/1.2 var(--sans); }
.sk-links { display: flex; gap: 9px; }
.sk-links i { width: 24px; height: 4px; background: var(--ink-2); }
.sk-hero { display: grid; gap: 16px; }
.sk-photo { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--ink-2); background: #e6dcc2; }
.sk-photo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sk-cl { fill: none; stroke: rgba(133, 145, 96, 0.5); stroke-width: 0.5; }
.sk-mt2 { fill: #b9b48f; }
.sk-mt { fill: var(--olive); }
.sk-sun { fill: #f1cf92; }
.sk-tag { position: absolute; left: 9px; bottom: 8px; padding: 4px 6px; background: var(--paper-hi); font: 500 10px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.sk-words { display: grid; gap: 8px; }
.sk-h, .sk-p { display: grid; gap: 7px; }
.sk-h i { height: 13px; background: var(--ink); }
.sk-h i + i { width: 62%; }
.sk-p { margin-top: 4px; }
.sk-p i { height: 5px; background: var(--ink-3); }
.sk-p i:nth-child(2) { width: 88%; }
.sk-p i:nth-child(3) { width: 54%; }
.sk-btn { width: 112px; height: 34px; margin-top: 8px; background: var(--ink); }
.sk-low { display: grid; gap: 16px; }
.sk-hours { padding: 10px 0; border-top: 1px solid var(--rule-ink); border-bottom: 1px solid var(--rule-ink); font: 500 14.5px/1.4 var(--mono); }
.sk-form { display: grid; gap: 8px; }
.sk-k { font: 500 10.5px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.sk-form i { height: 34px; border: 1px solid var(--ink-2); background: var(--paper); }
.sk-form b { justify-self: start; padding: 10px 18px; background: var(--ink); color: var(--paper-hi); font: 600 11px/1 var(--sans); font-stretch: 125%; letter-spacing: 0.14em; text-transform: uppercase; }
.face-night .sk { color: var(--cream); }
.face-night .sk-url { border-color: var(--rule); color: var(--cream-2); }
.face-night .sk-links i, .face-night .sk-h i, .face-night .sk-p i, .face-night .sk-btn { background: none; outline: 1px dashed rgba(240, 230, 207, 0.55); outline-offset: -1px; }
.face-night .sk-photo { border: 1px dashed rgba(240, 230, 207, 0.55); background: none; }
.face-night .sk-photo svg path, .face-night .sk-photo svg circle { fill: none; stroke: rgba(240, 230, 207, 0.6); stroke-width: 0.6; stroke-dasharray: 2 2; }
.face-night .sk-photo svg .sk-cl { stroke: rgba(240, 230, 207, 0.3); }
.face-night .sk-tag { background: none; color: var(--cream-2); }
.face-night .sk-hours { border-color: var(--rule); color: var(--cream-2); }
.face-night .sk-k { color: var(--cream-2); }
.face-night .sk-form i { border: 1px dashed rgba(240, 230, 207, 0.5); background: none; }
.face-night .sk-form b { background: none; outline: 1px dashed rgba(240, 230, 207, 0.55); outline-offset: -1px; color: var(--cream-2); }

/* 3, continued · Editor 2's real screens, cropped in CSS (--cx --cy --cw --ch in the screen's pixels; --iw its width). */
.edit { position: relative; padding: 56px 0 24px; }
.edit .eyebrow { margin-bottom: 12px; }
.edit-say { max-width: 24ch; font: 400 clamp(27px, 7vw, 42px)/1.16 var(--display); color: var(--ink); text-wrap: balance; }
.editor { margin: 26px 0 0; }
.ed-tag { display: inline-block; padding: 8px 11px; border: 1px solid var(--ink); background: var(--paper-hi); font: 600 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.ed-flow { display: grid; margin-top: 22px; }
.ed-k { position: relative; padding-left: 20px; font: 600 11.5px/1.3 var(--sans); font-stretch: 125%; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.ed-k::before, .ed-end b { content: ""; position: absolute; left: 0; top: 2px; width: 9px; height: 9px; border: 1px solid var(--ink-2); }
.shot { position: relative; box-sizing: content-box; overflow: hidden; margin-top: 10px; aspect-ratio: var(--cw) / var(--ch); background: #fafaf8; border: 1px solid var(--ink-2); box-shadow: 0 24px 44px -32px rgba(35, 31, 26, 0.55); }
.shot img { position: absolute; left: 0; top: 0; max-width: none; height: auto; width: calc(var(--iw) / var(--cw) * 100%); transform: translate(calc(var(--cx) / var(--iw) * -100%), calc(var(--cy) / var(--ih) * -100%)); }
.ed-a .shot { --iw: 1440; --ih: 900; --cx: 0; --cy: 316; --cw: 564; --ch: 520; }
.ed-b .shot { --iw: 1440; --ih: 900; --cx: 485; --cy: 0; --cw: 470; --ch: 530; }
.ed-c .shot { --iw: 1440; --ih: 900; --cx: 0; --cy: 852; --cw: 408; --ch: 48; }
.ed-trail { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 0; }
.ed-trail i { position: relative; width: 5px; height: 5px; background: var(--gold); }
.ed-trail i::after { content: ""; position: absolute; inset: -7px; background: radial-gradient(closest-side, rgba(244, 196, 90, 0.75), rgba(244, 196, 90, 0)); opacity: 0; transition: opacity 0.2s ease; }
.ed-trail i.head::after { opacity: 1; }
.chk { margin: 10px 0 0; padding: 4px 14px; border: 1px solid var(--ink-2); background: var(--paper-hi); font: 400 13.5px/1.45 var(--mono); }
.chk div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; padding: 8px 0; }
.chk div + div { border-top: 1px solid var(--rule-ink); }
.chk dt { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.chk dd { color: var(--ink); }
.chk-ok dd { font-weight: 600; }
.chk-cap { margin-top: 8px; font: 400 12.5px/1.4 var(--mono); color: var(--ink-2); }
.ed-step.lit .chk, html:not(.m) .chk { --cm: var(--gold-ink); }
.ed-go { margin-top: 14px; }
.go { display: inline-flex; align-items: center; min-height: 44px; font: 600 15.5px/1.25 var(--sans); color: var(--ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(35, 31, 26, 0.42); }
.go:hover { text-decoration-color: var(--ink); }
.btn-ink { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-ink:hover { background: rgba(35, 31, 26, 0.06); }
.ed-end { position: relative; justify-self: center; padding-left: 22px; font: 400 clamp(24px, 6vw, 30px)/1.2 var(--display); color: var(--ink); }
.ed-end b { top: 0.42em; width: 11px; height: 11px; border-color: var(--gold-ink); background: var(--gold-bright); }
.ed-step.lit .ed-k::before { border-color: var(--gold-ink); background: var(--gold-bright); }
.ed-step.lit .shot { --cm: var(--gold-ink); }
.m .ed-trail i { opacity: 0.3; }
.m .ed-trail i.lit { opacity: 1; }
.m .ed-end b { opacity: 0.25; transition: opacity 0.3s ease; }
.m .ed-end.lit b { opacity: 1; }
html:not(.m) .ed-trail i { background: var(--gold-bright); }
html:not(.m) .ed-k::before { border-color: var(--gold-ink); background: var(--gold-bright); }
html:not(.m) .ed-step .shot { --cm: var(--gold-ink); }

/* 4 and 5 · What we do, and the price, on the day's paper. */
.dp { position: relative; display: grid; gap: 44px; padding-top: 44px; padding-bottom: 60px; }
.do h2 { max-width: 14ch; }
.do-rows { margin-top: 20px; border-top: 1px solid var(--rule-ink); }
.do-rows li { position: relative; padding: 13px 0 13px 26px; border-bottom: 1px solid var(--rule-ink); font: 600 19px/1.35 var(--sans); color: var(--ink); }
.do-rows li::before { content: ""; position: absolute; left: 1px; top: 21px; width: 8px; height: 8px; border: 1px solid var(--ink-2); }
.price-card { position: relative; padding: 22px 20px 24px; background: var(--paper-hi); border: 1px solid var(--ink-2); }
#price-h { margin-top: 12px; font: 500 clamp(46px, 13vw, 76px)/1 var(--mono); letter-spacing: -0.03em; color: var(--ink); }
.ph-for { display: block; margin-top: 10px; font-size: clamp(19px, 5.2vw, 25px); letter-spacing: 0; color: var(--ink-2); }
.price-year { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule-ink); max-width: 32ch; font-size: 17px; line-height: 1.5; color: var(--ink); }
.price-fine { margin-top: 14px; font: 400 13px/1.5 var(--mono); color: var(--ink-2); }
.price-own { margin-top: 12px; max-width: 34ch; font-size: 16px; line-height: 1.5; color: var(--ink); }
.price-go { margin-top: 20px; }
.price-go .btn { min-width: 150px; }
.price-say { margin-top: 16px; max-width: 32ch; font-size: 19px; line-height: 1.5; color: var(--ink); }
.price-say .then { display: block; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule-ink); }
.mono { font-family: var(--mono); font-size: 0.93em; font-weight: 500; white-space: nowrap; }

/* 6 · What comes with it: the parts on a line, lit as the light passes. */
.comes { position: relative; padding-top: 12px; padding-bottom: 64px; scroll-margin-top: 70px; }
.comes-head h2 { max-width: 15ch; }
.comes-say, .b-say, .off-say { margin-top: 12px; max-width: 42ch; font-size: 17.5px; line-height: 1.5; color: var(--ink-2); }
.cw-wrap { position: relative; margin-top: 28px; }
.cw-line { position: absolute; left: 5px; top: 24px; bottom: 24px; width: 1px; background: repeating-linear-gradient(180deg, rgba(35, 31, 26, 0.38) 0 3px, transparent 3px 7px); }
.cw-lit, .cw-head { position: absolute; left: 0; top: 0; }
.cw-lit { width: 1px; height: 100%; background: var(--gold); transform-origin: 50% 0; }
.cw-head { left: -11px; top: -11px; width: 23px; height: 23px; background: radial-gradient(closest-side, rgba(244, 196, 90, 0.95), rgba(244, 196, 90, 0)); opacity: 0; }
.cw-ol { display: grid; gap: 14px; }
.cw { margin-left: 30px; padding: 16px 16px 12px; border: 1px solid var(--rule-ink); background: var(--paper-hi); }
.cw-pin { position: absolute; left: -30px; top: 19px; width: 11px; height: 11px; border: 1px solid var(--ink-2); background: var(--paper); }
/* the pin's light comes on by opacity alone (only transform and opacity animate) */
.cw-pin::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--gold-ink); background: var(--gold-bright); opacity: 0; transition: opacity 0.3s ease; }
.cw.lit .cw-pin::after, html:not(.m) .cw-pin::after { opacity: 1; }
.cw.lit, html:not(.m) .cw { border-color: rgba(35, 31, 26, 0.5); }
.cw h3 { font: 400 clamp(24px, 6.4vw, 29px)/1.15 var(--display); color: var(--ink); }
.cw p { margin-top: 6px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.cw .go { margin-top: 4px; }
.cw-two { display: flex; flex-wrap: wrap; gap: 0 22px; }
.m .cw-lit { transform: scaleY(0); }

/* 7 · Beargrass Builders (Start's form pattern) and the learning shelf. */
.learn { position: relative; display: grid; gap: 56px; padding-top: 8px; padding-bottom: 64px; }
.builders h2, .shelf h2 { max-width: 15ch; }
.builders, .shelf { scroll-margin-top: 70px; }
.form-card { margin-top: 22px; padding: 20px 16px 20px; background: var(--paper-hi); border: 1px solid rgba(35, 31, 26, 0.3); box-shadow: 0 30px 60px -44px rgba(35, 31, 26, 0.6); }
.form { display: grid; gap: 16px; }
.lab { display: block; font: 600 11.5px/1.4 var(--sans); font-stretch: 125%; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.fw { display: block; margin-top: 9px; --cm: var(--ink); }
.field.mono { font-family: var(--mono); font-size: 15.5px; }
.field:hover { border-color: var(--ink); }
.field[aria-invalid="true"] { border-color: var(--barn); box-shadow: inset 3px 0 0 var(--barn); }
.err { margin-top: 7px; font: 500 13.5px/1.45 var(--sans); color: var(--barn); }
.err:empty { display: none; }
.send { display: flex; flex-wrap: wrap; gap: 14px; }
.send .btn { min-width: 150px; }
.fine, .rc-fine { font: 400 13px/1.5 var(--mono); color: var(--ink-2); }
.received { display: none; outline: none; }
.js .received.show, html:not(.js) .received:target { display: block; }
html:not(.js) .form-card:has(.received:target) .form, .js .form-card.got .form { display: none; }
.rc-top { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; }
.received .brand-day { margin: 2px 0 0; }
.rc-h { font: 400 clamp(28px, 7.6vw, 38px)/1.08 var(--display); color: var(--ink); }
.rc-to { margin-top: 14px; font-size: 16.5px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.rc-to b { font: 500 0.92em/1 var(--mono); }
.rc-fine { margin-top: 12px; }
.rc-act { margin-top: 4px; }
.shelf-list { display: grid; gap: 14px; margin-top: 22px; }
.book { display: grid; gap: 6px; padding: 16px 16px 18px; border: 1px solid var(--ink-2); background: var(--paper-hi); color: var(--ink); text-decoration: none; }
.book:hover, .book:focus-visible { background: #fffaf0; --cm: var(--gold-ink); }
.bk-k { font: 500 11px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); }
.book strong { font: 400 clamp(24px, 6.4vw, 29px)/1.15 var(--display); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; text-decoration-color: rgba(35, 31, 26, 0.35); }
.bk-say { font-size: 16px; line-height: 1.5; color: var(--ink-2); }

/* 8 · The off-ramp. */
.off { position: relative; padding-top: 8px; padding-bottom: 72px; }
.off-card { padding: 26px 20px 24px; border: 1px solid var(--ink-2); background: var(--paper-hi); }
.off h2 { max-width: 17ch; font-size: clamp(30px, 8.2vw, 50px); line-height: 1.08; }
.off-b { display: block; }
.off-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin-top: 20px; }
.off-go .btn { min-width: 150px; }

/* 9 · The AI box. On the real site the path strip follows it. */
.ai-end { position: relative; padding: 0 0 72px; }
.ai-in { max-width: 860px; }
.ai-end .aibox { margin-top: 0; }

/* clip, not hidden: the laptop's "What comes with it" heading can stay in view */
#day { overflow: clip; }

/* The phone menu stays open over the day (the header takes the class "day" there). */
.site.day { overflow: visible; }

/* Short phones: the same night, set tighter. */
@media (max-height: 760px) and (max-width: 899px) {
  .incl { margin-top: 8px; }
  .m .plat { height: clamp(220px, 100svh - 410px, 100vw); }
  .m .steps-copy { padding-top: 12px; }
  .steps-copy h2 { font-size: 28px; }
  .steplist { margin-top: 8px; }
  .steplist li { padding: 2px 0; font-size: 14.5px; }
  .steplist .sn { font-size: 13px; }
}

/* Narrow phones, and a phone at 125% page zoom (about 314px): Start and its link on one row, so the bench keeps its band. */
@media (max-width: 360px) {
  .actions .btn { min-width: 108px; padding-left: 18px; padding-right: 18px; }
  .actions .more { font-size: 15px; gap: 7px; }
}

/* A very short screen (an old phone, 600px tall or less): the words set a little tighter and the band shorter, so
   Start stays on the screen. The picture keeps the screen's width and shows only the band's slice of the bench, as
   Custom work's band does; nothing of it reaches behind the words. */
@media (max-width: 599px) and (max-height: 600px) {
  .incl { font-size: 12.5px; line-height: 1.45; }
}
/* Tablet and up */
@media (min-width: 700px) {
  .sk-in { padding: 20px 24px 24px; }
}

/* Laptop: the first screen's words at the left over the stage, the plat at the right; the steps take the words' place. */
@media (min-width: 900px) {
  .kit-track { --tw: min(520px, calc((100vw - var(--read-x) * 2 - 56px) * 0.46)); --lx: var(--read-x); --ww: min(460px, calc(100vw - var(--read-x) * 2 - var(--tw) - 56px)); }
  .hero-art .veil { -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.5) 13%, #000 30%); mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.5) 13%, #000 30%); }
  .hero-art .twp i { padding: 6px 7px; font-size: 10.5px; }
  /* the township and the glints stay on the bench, right of the words: nothing of them reaches the words' column */
  .art-in { -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 9%, #000 24%); mask-image: linear-gradient(90deg, transparent 0, transparent 9%, #000 24%); }
  /* The first screen is its own hero, so the plat is in view as soon as this track starts. */
  .lots span { font-size: 19px; }
  .steplist li { padding: 6px 0; font-size: 18px; }
  .steplist .sn { font-size: 15px; }
  html:not(.m) .kit-track .stage { display: grid; grid-template-columns: minmax(0, 1fr) var(--tw); align-items: center; gap: 72px; max-width: var(--max); margin: 0 auto; padding: 40px 32px 110px; }
  html:not(.m) .plat { grid-column: 2; grid-row: 1; }
  html:not(.m) .steps-copy { grid-column: 1; grid-row: 1; padding: 0; }
  .m .kit-track { height: 540vh; }
  .m .kit-track .stage { display: block; }
  .m .plat { position: absolute; top: calc(50% + 24px); right: var(--read-x); width: var(--tw); height: var(--tw); margin: 0; transform: translateY(-50%); }
  .m .steps-copy { position: absolute; top: calc(50% + 24px); left: var(--lx); right: calc(var(--read-x) + var(--tw) + 40px); width: auto; max-width: none; padding: 0; transform: translateY(-50%); }
  .live-head { padding: 104px 0 44px; }
  .sk-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 28px; }
  .sk-hero .sk-photo { order: 2; }
  .sk-words { gap: 10px; }
  .sk-h i { height: 16px; }
  .sk-low { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 28px; }
  .edit { padding: 92px 0 30px; }
  .ed-flow { grid-template-columns: minmax(0, 1.5fr) minmax(0, max-content) minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 0; row-gap: 26px; width: 100%; min-width: 0; max-width: 100%; }
  .ed-step, .shot, .editor { min-width: 0; max-width: 100%; }
  .ed-a { grid-column: 1; grid-row: 1; }
  .ed-a .shot { --cy: 0; --cw: 912; --ch: 850; }
  .ed-flow > .ed-trail:nth-of-type(1) { grid-column: 2; grid-row: 1; }
  .ed-b { grid-column: 3; grid-row: 1; }
  .ed-c { grid-column: 3; grid-row: 2; }
  .ed-flow > .ed-trail:nth-of-type(2) { grid-column: 3; grid-row: 1 / span 2; align-self: end; display: none; }
  .ed-flow > .ed-trail:nth-of-type(3) { grid-column: 2; grid-row: 2; }
  .ed-g { grid-column: 1; grid-row: 2; justify-self: end; width: min(100%, 380px); }
  .ed-flow > .ed-tr4 { grid-column: 1; grid-row: 3; justify-self: end; width: min(100%, 380px); flex-direction: column; padding: 0; gap: 7px; }
  .ed-end { grid-column: 1; grid-row: 4; justify-self: end; margin-right: 92px; }
  .ed-trail { flex-direction: row; padding: 0 18px; gap: 10px; }
  .dp { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: start; gap: 80px; padding-top: 96px; padding-bottom: 96px; }
  .do-rows li { font-size: 20px; }
  .price-card { padding: 30px 32px 32px; margin-top: 30px; }
  .comes { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 72px; align-items: start; padding-top: 40px; padding-bottom: 96px; }
  .comes-head { position: sticky; top: 96px; padding-top: 24px; }
  .cw-wrap { margin-top: 0; }
  .cw { padding: 20px 24px 14px; }
  .cw-pin { top: 25px; }
  .cw-line { top: 30px; }
  .learn { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; padding-bottom: 96px; }
  .form-card { padding: 26px 28px 26px; }
  .off-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); column-gap: 56px; align-items: end; padding: 40px 44px 40px; }
  .off-card h2 { grid-row: 1 / span 2; }
  .off-go { margin-top: 18px; }
  .off { padding-bottom: 96px; }
  .ai-end { padding-bottom: 110px; }
}