/* Closed Form Labs, hero direction F: "The Finishing Bench".
   The visitor picks a format (video ad, website, Reel). The bench shows that
   thing finished, rewinds to the AI first draft and lands three named fixes one
   at a time, until the tag locks as "Finished, checked by Josh".

   Everything here works with JavaScript off: the chooser is three native
   radios, and showing a demo restarts its keyframes, so each pick replays its
   own pass. The pass is driven by animated numbers on the demo figure:
     --dr  0 finished .. 1 rewound to the AI draft
     --x1..--x3  0 flaw .. 1 fixed        --kf, --kd  the tag flip and keystone drop
     --g   1 .. 0 when the rings and dots step back after the pass, so the
           finished work loops clean (hovering a fix brings its mark back)
     --st, --pp  the Reel's edit strip (draft only) and its playhead
   Every layer reads them, so the first frame (and reduced motion) is always
   the finished state. hero-bench.js only adds extras. */

@property --dr { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --x1 { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --x2 { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --x3 { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --kf { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --kd { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --ra { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --g { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --g2 { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --st { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --pp { syntax: "<number>"; inherits: true; initial-value: 0; }

/* Rings and dots are drawn on the demo footage and pages, not on the page
   itself, so they keep the brand emerald (the light --accent) in both themes,
   with a white halo. Mint on cream would fail contrast in dark mode. */
:root { --mark: #0A7A55; }

/* ================= the copy ================= */
.hero.hb { padding: 108px 0 0; min-height: calc(100svh - 64px); }
.hb-grid { display: grid; grid-template-columns: minmax(0, 1.36fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.hb-copy { display: grid; justify-items: start; container-type: inline-size; }
.hb-kicker { margin-bottom: 18px; font: 500 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
/* sized to the column: line 2 is 7.86 ems wide and never wraps; it may run 8px into
   the gap, so the headline reaches 88px at 1280 and up */
.hero.hb .hb-h1 { font-size: min(5.5rem, calc((100cqi + 8px) / 7.86), 9.8vh); font-weight: 650; line-height: .96; letter-spacing: -.02em; word-spacing: .01em; }
.hb-h1 .hl { display: block; white-space: nowrap; }
.hb-h1 .hl2 { color: var(--accent); }
.hb-h1 .ai { letter-spacing: .05em; }
.hero.hb .sub { margin-top: 26px; font-size: 1.25rem; line-height: 1.5; color: var(--ink-2); max-width: 31em; }
/* The brand mark on a disc, the avatar tile's look (the booker's .av): the keystone from #ks,
   never redrawn, in --on-accent on --accent. Beside "I'm Josh" here and larger in About. */
.ks-disc { display: inline-grid; place-items: center; flex: none; border-radius: 50%; background: var(--accent); }
.ks-disc svg { display: block; width: 64%; height: auto; aspect-ratio: 1.8833; fill: var(--on-accent); }
.hb-copy .ks-disc { width: 28px; height: 28px; margin: -6px 9px -6px 0; vertical-align: middle; }
.hb-cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: .8rem; }
.hb-note { margin-top: 28px; max-width: 38rem; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.hb-n1 { display: block; color: var(--ink-2); font-weight: 500; }
.hb-see-in { display: none; }

/* ================= the bench ================= */
.bench { position: relative; border-radius: 28px; background: color-mix(in srgb, var(--sheet) 70%, var(--tint)); border: 1px solid var(--line); box-shadow: 0 1px 2px rgb(14 21 18 / .04), 0 40px 80px -44px rgb(14 21 18 / .28); }
.bench-glow { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.bench-glow i { position: absolute; left: -170px; top: -150px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(closest-side, rgb(10 122 85 / .10), rgb(10 122 85 / 0)); animation: hbDrift 24s ease-in-out infinite alternate; }
@keyframes hbDrift { to { transform: translate3d(320px, 400px, 0); } }
.bench-in { position: relative; padding: 22px 20px 16px; container-type: inline-size; }

/* ---- the chooser: three native radios, each with a thumbnail of the real work ---- */
.need { border: 0; margin: 0; padding: 0; min-inline-size: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.need legend { float: left; padding: 0; white-space: nowrap; font: 500 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.seg { position: relative; flex: 0 1 340px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: 44px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 5%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.seg label { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; border-radius: 999px; font: 600 14px/1 var(--body); color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: color .28s var(--ease), background-color .4s ease; -webkit-tap-highlight-color: transparent; }
.seg label:hover { color: var(--ink); }
.seg input:checked + label { color: var(--paper); }
.seg input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.th { position: relative; flex: none; display: block; border-radius: 3px; background: #1A1F1C center / cover no-repeat; box-shadow: 0 0 0 1px rgb(14 21 18 / .18); }
.th-ad { width: 12px; height: 20px; background-image: url(media/web/th-ad.jpg); }
.th-site { width: 25px; height: 18px; border-top: 3px solid #E4DCD2; background-image: url(media/web/kettlecroft-wide-800.webp); background-position: 28% 62%; }
.th-reel { width: 12px; height: 20px; background-image: url(media/web/th-reel.jpg); }
.th-reel::after { content: ""; position: absolute; left: 4px; top: 6.5px; border-left: 5px solid #FFF6E8; border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; }
.seg input:checked + label .th { box-shadow: 0 0 0 1px color-mix(in srgb, var(--paper) 45%, transparent); }
.seg-pill { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 999px; background: var(--ink); box-shadow: 0 2px 8px rgb(14 21 18 / .16); transition: transform .28s var(--ease); }
/* a narrow bench (small laptops): the chips take the whole row and the legend is read, not shown */
@container (max-width: 450px) {
  .need legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .seg { flex: 1 1 100%; }
}
#need-site:checked ~ .seg-pill { transform: translateX(100%); }
#need-reel:checked ~ .seg-pill { transform: translateX(200%); }
/* the one-time nudge: a tinted chip and two rings, never an automatic switch */
.seg label.pulse { background-color: var(--accent-soft); color: var(--ink); }
.seg label.pulse::before, .seg label.pulse::after { content: ""; position: absolute; inset: 3px; border-radius: inherit; animation: hbPulse 1.2s ease-out both; }
.seg label.pulse::after { animation-delay: .5s; }
@keyframes hbPulse { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } to { box-shadow: 0 0 0 14px color-mix(in srgb, var(--accent) 0%, transparent); } }

/* ---- the device area. Two units: --uh follows the screen height (and sets the
   area's height, so a pick never moves the fix list), --us also fits the
   540-unit website layout into the bench's width. Phone demos use --uh. ---- */
.stagebox { position: relative; margin-top: 18px;
  --uh: clamp(.72px, calc((100svh - 476px) / 424), 1px);
  --us: min(var(--uh), calc(100cqi / 540));
  --u: min(var(--uh), calc(100cqi / 330)); }
.bench-demo { display: none; }
.bench:has(#need-ad:checked) .demo-ad,
.bench:has(#need-site:checked) .demo-site,
.bench:has(#need-reel:checked) .demo-reel { display: block; }
.demo-site { --u: var(--us); }
.dev-wrap { position: relative; z-index: 1; height: calc(424 * var(--uh)); display: grid; place-items: center; pointer-events: none; }
.dev { position: relative; pointer-events: auto; transition: transform .5s var(--ease); }
/* the website uses the full height of the device area: the tag on top, the browser
   under it, the phone standing at the lower left and the controls beside it */
.demo-site .dev { width: calc(540 * var(--u)); height: calc(424 * var(--uh)); }
.bench:hover .bench-demo .dev { transform: translate3d(0, -6px, 0); }

/* ---- the website, waiting on the bench behind the phone: a small page (address,
   photo, headline, button) with its own Demo chip. Only its last 30px tuck under
   the phone, and its text keeps clear of them. ---- */
.peek { position: absolute; z-index: 0; top: calc(66 * var(--u)); right: calc(50% + 118 * var(--u) - 30px); width: min(168px, calc(50% - 118 * var(--u) + 46px)); display: flex; flex-direction: column; align-items: flex-start; padding-bottom: 11px; border-radius: 10px; overflow: hidden; background: #F2E4C9; color: #4B2E1A; box-shadow: 0 0 0 1px rgb(14 21 18 / .10), 0 22px 36px -18px rgb(14 21 18 / .5); transform: rotate(-4deg); transform-origin: 100% 50%; cursor: pointer; transition: transform .45s var(--ease), box-shadow .45s var(--ease); -webkit-tap-highlight-color: transparent; }
.peek:hover { transform: translate3d(-8px, -2px, 0) rotate(-6deg); box-shadow: 0 0 0 1px rgb(14 21 18 / .14), 0 26px 40px -18px rgb(14 21 18 / .55); }
.pk-bar { align-self: stretch; display: flex; align-items: center; height: 19px; padding: 0 9px; background: #EFEAE3; border-bottom: 1px solid rgb(75 46 26 / .08); font: 500 8.5px/1 var(--mono); color: #6B5647; white-space: nowrap; }
.pk-ph { position: relative; align-self: stretch; display: block; height: 64px; }
.pk-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 60%; }
.pk-demo { position: absolute; left: 7px; top: 7px; display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 600 8.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 2px 8px rgb(0 0 0 / .25); }
.pk-demo::before { content: ""; width: 5px; height: 5px; border-radius: 1px; background: #5FD3A5; }
.pk-h { display: block; margin: 9px 40px 0 10px; font: 650 12.5px/1.06 var(--display); letter-spacing: -.02em; }
.pk-btn { margin: 9px 0 0 10px; padding: 5px 8px; border-radius: 4px; background: #4B2E1A; color: #F7EBD6; font: 600 8.5px/1 var(--body); white-space: nowrap; }
.bench:has(#need-site:checked) .peek { display: none; }

/* ================= the pass =================
   First load: finished until 1.1s (counted from first paint), then the rewind,
   a half-second wipe up the screen with "AI first draft" inside it; the draft
   holds long enough to read the ad's garbled label, rings start at 1.9, 2.3
   and 2.65s (each fix lands 360ms later), the tag flips at 3.1s and the keystone
   is seated by 3.45s. A pick: the draft at once, fixes 150, 500 and 850ms in,
   the keystone locks at about 1.6s. */
.bench-demo {
  --r: 0s; --rd: .2s; --f1: .15s; --f2: .5s; --f3: .85s; --k: 1.3s; --ro: 2.8s;
  --g2at: calc(var(--f2) + .62s);
  --s1: calc(1 - var(--dr) * (1 - var(--x1)));
  --s2: calc(1 - var(--dr) * (1 - var(--x2)));
  --s3: calc(1 - var(--dr) * (1 - var(--x3)));
  --T: calc(var(--dr) * (1 - var(--kf)));
  --L: calc(var(--dr) * (1 - var(--kd)));
  animation:
    hbDr var(--rd) cubic-bezier(.4, 0, .2, 1) var(--r) both,
    hbX1 .24s ease-out calc(var(--f1) + .36s) both,
    hbX2 .24s ease-out calc(var(--f2) + .36s) both,
    hbX3 .24s ease-out calc(var(--f3) + .36s) both,
    hbKf .2s ease-out var(--k) both,
    hbKd .34s linear var(--k) both,
    hbG .5s ease var(--ro) both,
    hbG2 .3s ease var(--g2at) both,
    hbSt .6s ease calc(var(--f3) + 1.1s) both,
    hbPpA calc(var(--f3) + .6s - var(--r)) linear var(--r) both,
    hbPpB .5s cubic-bezier(.2, .7, .3, 1) calc(var(--f3) + .6s) forwards;
}
.demo-ad, .bench.boot .bench-demo { --r: 1.1s; --rd: .5s; --f1: 1.9s; --f2: 2.3s; --f3: 2.65s; --k: 3.1s; --ro: 4.6s; }
.bench.picked .bench-demo { --r: 0s; --rd: .2s; --f1: .15s; --f2: .5s; --f3: .85s; --k: 1.3s; --ro: 2.8s; }
@keyframes hbDr { from { --dr: 0; } to { --dr: 1; } }
@keyframes hbX1 { from { --x1: 0; } to { --x1: 1; } }
@keyframes hbX2 { from { --x2: 0; } to { --x2: 1; } }
@keyframes hbX3 { from { --x3: 0; } to { --x3: 1; } }
@keyframes hbKf { from { --kf: 0; } to { --kf: 1; } }
@keyframes hbG { from { --g: 1; } to { --g: 0; } }
@keyframes hbG2 { from { --g2: 1; } to { --g2: 0; } }
@keyframes hbSt { from { --st: 1; } to { --st: 0; } }
@keyframes hbPpA { from { --pp: .3; } to { --pp: .97; } }
@keyframes hbPpB { from { --pp: 0; } to { --pp: .16; } }
/* the keystone: an accelerating fall, a dead stop, a 2px rebound */
@keyframes hbKd {
  0% { --kd: 0; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  64% { --kd: 1; animation-timing-function: cubic-bezier(0, .55, .45, 1); }
  82% { --kd: .8; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  100% { --kd: 1; }
}
.sp1, .d1 { --s: var(--s1); }
.sp2, .d2 { --s: var(--s2); }
.sp3, .d3 { --s: var(--s3); }
/* draft and finished text swap in turn, never both at once */
.swap { display: inline-grid; }
.swap > del, .swap > ins { grid-area: 1 / 1; text-decoration: none; }
.swap > del { opacity: calc(1 - var(--s) * 2); }
.swap > ins { opacity: calc(var(--s) * 2 - 1); }

/* rings: hand-drawn loops that draw round each flaw, then step back with the dots */
.ring { position: absolute; left: -12%; top: -28%; width: 124%; height: 156%; overflow: visible; pointer-events: none; z-index: 3; opacity: var(--g); filter: drop-shadow(0 0 1.5px rgb(255 255 255 / .95)) drop-shadow(0 0 2.5px rgb(255 255 255 / .55)); -webkit-mask-image: conic-gradient(from -24deg, #000 var(--ra), transparent 0); mask-image: conic-gradient(from -24deg, #000 var(--ra), transparent 0); }
.ring path { fill: none; stroke: var(--mark); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sp1 .ring { animation: hbDraw .36s cubic-bezier(.55, .1, .35, 1) var(--f1) both; }
.sp2 .ring { animation: hbDraw .36s cubic-bezier(.55, .1, .35, 1) var(--f2) both; }
.sp3 .ring { animation: hbDraw .36s cubic-bezier(.55, .1, .35, 1) var(--f3) both; }
@keyframes hbDraw { from { --ra: 0deg; } to { --ra: 361deg; } }
/* on text the ring is a hand-drawn loop (rounded box) sized so every letter sits inside it */
.ring.bx { left: -6%; width: 112%; top: -22%; height: 144%; }
.tight > .ring.bx { left: -6%; width: 112%; top: -15%; height: 130%; }

/* dots: numbered, beside each fixed spot, never on its letters */
.dot { position: absolute; right: -9px; top: -9px; z-index: 4; width: 22px; height: 22px; border-radius: 50%; background: var(--mark); color: #fff; font: 600 11px/22px var(--mono); font-style: normal; text-align: center; box-shadow: 0 0 0 2px rgb(255 255 255 / .92), 0 2px 8px rgb(0 0 0 / .28); opacity: calc(var(--s) * var(--g)); transform: scale(calc(.3 + .7 * var(--s))); }
.dot.l { right: auto; left: -9px; }
/* hovering a line in the fix list brings its ring and dot back */
.fixes li { cursor: default; }
.bench-demo:has(.fixes li:nth-child(1):hover) :is(.sp1, .d1) { --g: 1; }
.bench-demo:has(.fixes li:nth-child(2):hover) :is(.sp2, .d2):not(.r-long, .a-cap2) { --g: 1; }
.bench-demo:has(.fixes li:nth-child(3):hover) :is(.sp3, .d3) { --g: 1; }

/* the state tag, with a 14px copy of the mark whose keystone drops in. In the
   draft it is a filled pencil-grey pill, so the rewind reads as a state, and it
   is only as wide as its label (the font is mono, so 1ch is one letter) */
.tag { position: absolute; z-index: 5; left: 50%; top: -16px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px 0 9px; border-radius: 999px; background: color-mix(in srgb, var(--pencil) calc(var(--T) * 100%), var(--sheet)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) calc((1 - var(--T)) * 40%), var(--line)), 0 8px 20px -8px rgb(14 21 18 / .3); font: 500 11px/1 var(--mono); color: color-mix(in srgb, var(--accent) calc((1 - var(--T)) * 100%), var(--ink)); white-space: nowrap; }
.tg-ks { height: 14px; width: auto; aspect-ratio: 1356 / 720; overflow: visible; flex: none; }
.tg-ks .h { fill: color-mix(in srgb, var(--ink-2) calc((1 - var(--T)) * 100%), var(--ink)); }
.tg-ks .k { fill: #0A7A55; opacity: calc(1 - var(--T)); transform: translateY(calc(var(--L) * -520px)); }
.tg-roll { display: inline-grid; justify-items: start; width: calc((25 - 4 * var(--T)) * 1ch); height: 14px; line-height: 14px; overflow: hidden; }
.tg-roll > span { grid-area: 1 / 1; }
.tg-d { opacity: var(--T); transform: translateY(calc((1 - var(--T)) * 100%)); }
.tg-f { opacity: calc(1 - var(--T)); transform: translateY(calc(var(--T) * -100%)); }
/* the Demo badge sits inside the screen's top-right corner, where platform UI sits */
.bbadge { position: absolute; z-index: 5; right: calc(16 * var(--u)); top: calc(19 * var(--u)); display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 600 9.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 2px 10px rgb(0 0 0 / .25); }
.bbadge::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: #5FD3A5; }
/* the website's tag and badge sit above the browser bar, never on it */
.demo-site .tag { left: calc(40 * var(--u)); top: 0; transform: none; }
.demo-site .bbadge { right: 0; top: 1px; height: 26px; padding: 0 10px; gap: 6px; font-size: 10.5px; box-shadow: none; }

/* inside the screen too: while the draft shows, a dark "AI first draft" label sits
   on the footage or page, and a light band wipes up the screen as it rewinds */
.dlab { position: absolute; z-index: 5; left: 5%; top: 11%; display: inline-flex; align-items: center; gap: 6px; height: 25px; padding: 0 9px 0 8px; border-radius: 6px; background: rgb(0 0 0 / .58); color: #fff; font: 600 12px/1 var(--mono); white-space: nowrap; pointer-events: none; opacity: var(--T); transform: translate3d(0, calc((1 - var(--T)) * -5px), 0); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dlab .rw { flex: none; width: 11px; height: 8px; background: currentColor; clip-path: polygon(0 50%, 50% 0, 50% 50%, 100% 0, 100% 100%, 50% 50%, 50% 100%); }
.dv-browser .dlab { left: 25%; top: calc(9cqw + 2.6cqw); }
.demo-reel .dlab { top: auto; bottom: 16.5%; left: 6%; }
/* the band is a full-height box moved with transform (no layout per frame); its line is the top edge */
.sweep { position: absolute; z-index: 4; left: 0; right: 0; top: -1px; height: 100%; pointer-events: none; font-style: normal; transform: translate3d(0, calc((1 - var(--dr)) * 100%), 0); opacity: calc(var(--dr) * (1 - var(--dr)) * 4); }
.sweep::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, rgb(255 255 255 / 0), #fff 18%, #fff 82%, rgb(255 255 255 / 0)); box-shadow: 0 0 14px 4px rgb(255 255 255 / .5); }

/* ================= devices ================= */
.dv-phone { position: relative; width: calc(236 * var(--u)); height: calc(420 * var(--u)); border-radius: calc(36 * var(--u)); background: #0E1512; box-shadow: calc(12 * var(--u)) calc(4 * var(--u)) 0 calc(-3 * var(--u)) #27302C, inset 0 0 0 1px rgb(255 255 255 / .06), 0 36px 60px -28px rgb(14 21 18 / .6); }
.dv-phone .screen { position: absolute; inset: calc(6 * var(--u)); border-radius: calc(30 * var(--u)); overflow: hidden; background: #1A1F1C; container-type: inline-size; }
.screen > video, .lay-draft, .lay-draft video { position: absolute; inset: 0; width: 100%; height: 100%; }
.screen video { display: block; object-fit: cover; }
/* the posters also sit behind each video, so a frame paints before any video data (and with JS off) */
.demo-ad .screen { background: #1A1F1C url(media/web/halvey-hook-poster.webp) center / cover no-repeat; }
/* the AI draft wipes up over the finished cut (the rewind): the ad's product shot with the label
   text garbled (halv3y, SPF 5O). Fix 1 redoes the label on the same frame; at the tag flip the draft
   fades and the finished cut plays on from that frame. Both stills are frames of halvey-ad.mp4 at 2s. */
.lay-draft { opacity: calc(1 - var(--kf)); clip-path: inset(calc((1 - var(--dr)) * 100%) 0 0 0); background: #1A1F1C url(media/web/halvey-label-fixed.jpg) center / cover no-repeat; }
.lay-draft .lbl-bad { position: absolute; inset: 0; background: url(media/web/halvey-label-draft.jpg) center / cover no-repeat; opacity: calc(1 - var(--x1)); }
.screen.reel { background: #1A1F1C url(media/web/kettlecroft-reel-poster.jpg) center / cover no-repeat; }
.screen video::-webkit-media-controls, .screen video::-webkit-media-controls-enclosure { display: none !important; }

/* ---- the Halvey ad ---- */
.ugc { position: absolute; inset: 0; pointer-events: none; color: #fff; }
.ugc-h { position: absolute; left: 6%; bottom: 5%; font: 600 5.4cqw/1 var(--body); text-shadow: 0 1px 6px rgb(0 0 0 / .5); }
.ugc-i { position: absolute; right: 4%; bottom: 15%; display: grid; gap: 5cqw; }
.ugc-i svg { display: block; width: 9cqw; height: 9cqw; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; filter: drop-shadow(0 1px 3px rgb(0 0 0 / .5)); }
/* the draft caption leaves before the finished one arrives, so they never overlap */
.capwrap { position: absolute; left: 6%; right: 22%; top: 56%; opacity: calc(1 - var(--T) * 2); }
.capwrap.cw-top { top: 12.5%; }
.cap, .cap-still { margin: 0; font: 650 7cqw/1.16 var(--display); letter-spacing: -.01em; color: #111; }
.cap { display: none; }
.cap .w { display: inline-block; }
.cap-still > span, .hb-live .cap.on { display: inline-block; background: #fff; padding: .14em .36em .18em; border-radius: .3em; box-shadow: 0 2px 12px rgb(0 0 0 / .2); }
.hb-live .cap-still { display: none; }
.hb-live .cap.on { animation: hbChip .22s var(--ease) both; }
.hb-live .cap.on .w { animation: hbWord .26s var(--ease) calc(var(--i) * 55ms) both; }
@keyframes hbChip { from { opacity: 0; transform: scale(.92); } }
@keyframes hbWord { from { opacity: 0; transform: translate3d(0, .35em, 0); } }
/* The draft is the product shot, so its caption works on that frame. The caption keeps its finished
   width all the way through; fix 3 only moves it, from low and right (over the share button, running
   off the edge, below the label) up to the safe band above the stick, where the finished cut's own
   product caption sits (.capwrap.cw-top). 121cqw is 66.5% of the 9:16 screen's height. */
.demo-ad { --mx: calc((1 - var(--s3)) * 15cqw); --my: calc((1 - var(--s3)) * 121cqw); }
.dcap { position: absolute; left: 6%; right: 22%; top: 12.5%; opacity: calc(var(--T) * 2 - 1); --s: var(--s2); transform: translate(var(--mx), var(--my)); }
.dcap-in { display: grid; grid-template-columns: 100%; justify-items: start; color: #111; }
.dcap-in > del, .dcap-in > ins { align-self: start; background: #fff; padding: .16em .4em .2em; border-radius: .3em; box-shadow: 0 2px 12px rgb(0 0 0 / .2); }
.dcap-in > del { font: 500 6.4cqw/1.18 var(--body); white-space: nowrap; }
.dcap-in > ins { font: 650 7cqw/1.16 var(--display); letter-spacing: -.01em; }
/* mark 1: the label on the stick (x 34 to 59.5%, y 64 to 74.5% of the screen in both stills) */
.a-label { position: absolute; left: 34%; top: 64%; width: 25.5%; height: 10.5%; opacity: var(--dr); }
.a-cap2 { position: absolute; left: 6%; right: 22%; top: 12.5%; height: calc(10cqw + var(--s2) * var(--T) * 17cqw); transform: translate(var(--mx), var(--my)); }
.dot.a-capdot { right: auto; left: 6%; top: calc(12.5% - 28px); opacity: calc(var(--s) * var(--g) * var(--dr)); transform: translate(var(--mx), var(--my)) scale(calc(.3 + .7 * var(--s))); }
.a-icons { position: absolute; right: 3%; top: 60%; width: 14%; height: 28%; }
.demo-ad { --g2at: var(--k); }
.demo-ad .a-cap2 { --g: var(--g2); }
.a-icons > .dot.l { left: 50%; margin-left: -11px; top: -30px; }
/* the in-screen "AI first draft" label leaves as fix 3 lands, before the caption reaches its band */
.demo-ad .dlab { opacity: calc(var(--T) * (1 - var(--x3))); }
/* marks 1 and 2 belong to the product shot, where the pass ends: on the presenter shot
   (hero-bench.js sets .on-hook from the video's own clock) they step aside. With no live video
   (JavaScript off, Save-Data) they leave with the draft at the tag flip. */
.demo-ad :is(.a-label, .a-capdot, .a-cap2) { transition: filter .3s ease; }
.demo-ad.on-hook :is(.a-label, .a-capdot, .a-cap2) { filter: opacity(0); }
.bench:is(:not(.hb-live), .hb-still) .demo-ad :is(.a-label, .a-capdot) { --g: var(--g2); }

/* ---- the Kettlecroft site: a browser plus the same site at phone width. The phone
   stands in front at the lower left, over the photo, big enough to read its
   "Order for Saturday" bar (fix 3); the browser's copy column stays clear ---- */
.dv-browser { position: absolute; left: calc(40 * var(--u)); top: 36px; width: calc(500 * var(--u)); height: min(calc(424 * var(--uh) - 92px), calc(380 * var(--u))); border-radius: calc(12 * var(--u)); overflow: hidden; background: #FBF8F3; box-shadow: 0 0 0 1px rgb(14 21 18 / .10), 0 34px 60px -30px rgb(14 21 18 / .5); }
.b-bar { position: relative; height: calc(26 * var(--u)); display: flex; align-items: center; gap: calc(5 * var(--u)); padding: 0 calc(11 * var(--u)); background: #EFEAE3; border-bottom: 1px solid rgb(75 46 26 / .08); }
.b-bar i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: #D3C9BD; }
.b-addr { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 40%; text-align: center; font: 500 calc(10 * var(--u))/1.7 var(--mono); color: #6B5647; background: #FBF8F3; border-radius: 999px; padding: 0 calc(12 * var(--u)); }
.dv-browser .screen { position: absolute; left: 0; right: 0; bottom: 0; top: calc(26 * var(--u)); overflow: hidden; container-type: inline-size; background: #F2E4C9; color: #4B2E1A; }
.k-nav { position: relative; z-index: 2; height: 9cqw; display: flex; align-items: center; justify-content: space-between; padding: 0 4cqw; background: #F2E4C9; border-bottom: 1px solid rgb(75 46 26 / .12); }
.k-name { position: relative; font: 650 3.3cqw/1 var(--display); letter-spacing: -.01em; white-space: nowrap; }
.k-name > .ring.bx { left: -5%; width: 110%; top: -34%; height: 168%; }
.k-name > .dot { right: auto; left: calc(100% + 8px); top: 50%; margin-top: -11px; }
.k-links { font: 500 2.1cqw/1 var(--body); color: #7A5A45; }
.k-hero { position: absolute; left: 0; right: 0; top: 9cqw; bottom: 0; }
.k-photo { position: absolute; left: 0; top: 0; width: 58%; height: 100%; object-fit: cover; object-position: 30% 62%; -webkit-mask-image: linear-gradient(to right, #000 80%, transparent); mask-image: linear-gradient(to right, #000 80%, transparent); }
.k-copy { position: absolute; left: 57%; right: 4.5cqw; top: 50%; transform: translateY(-50%); display: grid; gap: 2.4cqw; justify-items: start; }
.k-h { position: relative; margin: 0; font: 650 5.2cqw/1.02 var(--display); letter-spacing: -.02em; }
.k-h > .dot { right: auto; left: -30px; top: -2px; }
.k-sub { margin-top: 1.4cqw; font: 500 2.3cqw/1.35 var(--body); color: #6B4A36; }
.k-btn { display: inline-block; padding: 1.6cqw 2.8cqw; border-radius: 1.2cqw; background: #4B2E1A; color: #F7EBD6; font: 600 2.3cqw/1 var(--body); opacity: var(--s3); }
/* the draft's flaw, in the browser too: a small grey "Order" cut off below the fold */
.k-grey { position: absolute; left: 57%; bottom: 0; transform: translateY(48%); padding: 1.6cqw 2.8cqw; border-radius: 1.2cqw; background: #B9B1A7; color: #fff; font: 600 2.3cqw/1 var(--body); opacity: calc(1 - var(--s3)); }
.dv-mini { position: absolute; left: 0; bottom: 0; z-index: 2; width: calc(150 * var(--u)); height: calc(300 * var(--u)); border-radius: calc(24 * var(--u)); background: #0E1512; box-shadow: calc(8 * var(--u)) calc(3 * var(--u)) 0 calc(-2 * var(--u)) #27302C, 0 28px 44px -18px rgb(14 21 18 / .6); }
.dv-mini .screen { position: absolute; inset: calc(5 * var(--u)); border-radius: calc(19 * var(--u)); overflow: hidden; container-type: inline-size; background: #F2E4C9; color: #4B2E1A; }
.km-nav { height: 15cqw; display: flex; align-items: center; justify-content: space-between; padding: 0 6cqw; }
.km-nav .spot { position: relative; font: 650 8.4cqw/1 var(--display); letter-spacing: -.01em; }
.km-nav .spot > .dot { right: auto; left: calc(100% + 4px); top: 50%; margin-top: -11px; }
.km-burger { position: relative; width: 8cqw; height: 5.5cqw; border-top: 1.5px solid; border-bottom: 1.5px solid; font-style: normal; }
.km-burger::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid; transform: translateY(-50%); }
.km-photo { display: block; width: 100%; height: 34%; object-fit: cover; object-position: 26% 60%; }
.km-h { position: relative; margin: 5cqw 6cqw 0; font: 650 9.4cqw/1.02 var(--display); letter-spacing: -.02em; }
.km-h > .dot { right: 0; top: -26px; }
.km-sub { margin: 6cqw 6cqw 0; font: 500 6cqw/1.3 var(--body); color: #6B4A36; }
.km-grey { position: absolute; left: 6cqw; bottom: 0; transform: translateY(55%); padding: 2.8cqw 6cqw; border-radius: 2cqw; background: #B9B1A7; color: #fff; font: 600 6.4cqw/1 var(--body); opacity: calc(1 - var(--s3)); }
.km-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 4cqw 5cqw 5.5cqw; background: rgb(242 228 201 / calc(var(--s3) * .94)); box-shadow: 0 -1px 0 rgb(75 46 26 / calc(var(--s3) * .14)); }
.km-bar > .ring.bx { left: 2%; width: 96%; top: -2%; height: 98%; }
.km-bar > .dot.l { left: auto; right: 6px; top: -25px; }
.km-btn { display: block; text-align: center; padding: 3.4cqw 0; border-radius: 2.4cqw; background: #4B2E1A; color: #F7EBD6; font: 600 7.2cqw/1 var(--body); white-space: nowrap; opacity: var(--s3); }
.m-only > .ring, .m-only > .dot { display: none; }

/* ---- the Kettlecroft Reel ---- */
.reel .r-scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(24 14 6 / .6) 0%, rgb(24 14 6 / .2) 42%, rgb(24 14 6 / 0) 58%, rgb(24 14 6 / .4) 100%); }
.kbeats { position: absolute; left: 7%; right: 7%; top: 15%; height: 28%; }
.beat, .beat-still { position: absolute; left: 0; right: 0; top: 0; margin: 0; font: 700 10.6cqw/.98 var(--display); letter-spacing: -.005em; text-transform: uppercase; color: #FFF6E8; text-shadow: 0 2px 16px rgb(30 16 6 / .5); }
.beat { display: none; }
.beat .w { display: inline-block; }
.beat-still { opacity: calc(var(--s1) * 2 - 1); }
.hb-live .beat-still { opacity: calc(var(--T) + var(--s1) * 2 - 2); }
.hb-live .beat.on { display: block; opacity: calc(1 - var(--T)); }
.hb-live .beat.on .w { animation: hbWordUp .5s var(--ease) calc(var(--i) * 90ms) both; }
@keyframes hbWordUp { from { opacity: 0; transform: translate3d(0, .5em, 0) scale(.96); } }
.r-zone { position: absolute; left: 7%; right: 5%; top: 15%; height: 26%; }
.r-zone > .ring.bx { left: -4%; width: 106%; top: -14%; height: 96%; }
.r-cut { position: absolute; left: 0; top: 0; white-space: nowrap; font: 700 17cqw/.92 var(--display); text-transform: uppercase; color: #FFF6E8; text-shadow: 0 2px 14px rgb(30 16 6 / .5); opacity: calc(1 - var(--s1) * 2); }
.r-long { position: absolute; left: 9%; right: 9%; top: 55%; height: 17%; display: grid; place-items: center; }
.demo-reel { --g2at: calc(var(--f2) + .62s); }
.demo-reel .r-long { --g: var(--g2); }
.r-long-t { display: block; font: 500 5cqw/1.3 var(--body); color: #fff; text-align: center; background: rgb(0 0 0 / .42); padding: 2cqw 3cqw; border-radius: 2cqw; opacity: calc(1 - var(--s2)); }
.dot.r-capdot { right: auto; left: 7%; top: 36%; }
/* the edit strip belongs to the draft: after fix 3 the playhead wraps from the
   last frame to the first once, then the strip goes and the Reel plays clean */
.r-strip { position: absolute; left: 6%; right: 6%; bottom: 4%; height: 10%; display: flex; gap: 1.6cqw; padding: 1.5cqw; border-radius: 2.6cqw; background: rgb(12 8 5 / .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: calc(var(--dr) * var(--st)); }
.r-strip .t { position: relative; flex: 1; border-radius: 1.4cqw; font-style: normal; background: url(media/web/kettlecroft-reel-poster.jpg) 45% 62% / 280% auto no-repeat; }
.r-strip .t2 { background-position: 22% 45%; }
.r-strip .t3 { background-position: 70% 72%; }
.r-strip .t4 { background-position: 40% 88%; }
.r-strip .t1, .r-strip .t5 { box-shadow: 0 0 0 calc(var(--s3) * 1.5px) var(--stage-accent); }
.t-end { position: absolute; inset: 0; border-radius: inherit; display: grid; place-items: center; background: #000; color: #fff; font: 600 3.4cqw/1 var(--mono); font-style: normal; letter-spacing: .04em; opacity: calc(1 - var(--s3)); }
.r-strip .ph { position: absolute; top: 1cqw; bottom: 1cqw; left: calc(1.5cqw + var(--pp) * (100% - 3cqw - 2px)); width: 2px; border-radius: 2px; background: #fff; box-shadow: 0 0 4px rgb(0 0 0 / .5); font-style: normal; }

/* ================= the fix list ================= */
.fixbox { margin-top: 10px; }
.fix-head { margin-bottom: 8px; font: 500 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
/* equal columns, the tick right after its own label, and room for three lines on
   every pick, so a pick never changes the bench height (or moves the headline) */
.fixes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fixes li { --s: var(--s1); display: flex; align-items: flex-start; gap: 8px; min-height: calc(3 * 1.3em); font: 500 13px/1.3 var(--body); color: color-mix(in srgb, var(--ink) calc(var(--s) * 100%), var(--pencil)); }
.fixes li:nth-child(2) { --s: var(--s2); }
.fixes li:nth-child(3) { --s: var(--s3); }
.fixes .n { flex: none; width: 22px; height: 22px; margin-top: -2px; border-radius: 50%; display: grid; place-items: center; font: 600 11px/1 var(--mono); font-style: normal; color: var(--on-accent); background: color-mix(in srgb, var(--accent) calc(var(--s) * 100%), var(--pencil)); }
.fixes .nw { white-space: nowrap; }
.fixes .tick { display: inline-block; width: 12px; height: 12px; margin: 0 0 0 5px; vertical-align: -1px; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fixes .tick path { stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--s)); }

/* ---- controls ---- */
.hb-ctl { position: absolute; z-index: 6; top: calc(424 * var(--uh) - 44px); display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; cursor: pointer; }
.hb-replay { right: calc(50% + 118 * var(--u) + 10px); padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--sheet) 80%, transparent); font: 500 11px/1 var(--mono); color: var(--ink-2); white-space: nowrap; }
.hb-replay:hover { color: var(--ink); border-color: var(--ink-3); }
.hb-replay svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hb-pause { left: calc(50% + 118 * var(--u) + 12px); width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--sheet); color: var(--ink); box-shadow: var(--shadow); }
.hb-pause .ic { width: 12px; height: 14px; background: linear-gradient(90deg, currentColor 0 34%, transparent 34% 66%, currentColor 66%); }
.bench.paused .hb-pause .ic { width: 0; height: 0; margin-left: 3px; background: none; border-left: 12px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.bench:has(#need-site:checked) .hb-pause { left: auto; right: calc((100% - 540 * var(--us)) / 2); }
.bench:has(#need-site:checked) .hb-replay { right: auto; left: calc((100% - 540 * var(--us)) / 2 + 150 * var(--us) + 18px); }
.bench.hb-still .hb-pause { display: none; }
.bench:not(.hb-live) .hb-ctl { display: none; }

/* ---- the receipt: turnaround and the safeguard for this pick ---- */
.receipt { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: 4px 24px; align-items: end; }
.rc-time { display: grid; gap: 6px; }
.rc-b { font: 600 15px/1.2 var(--body); color: var(--ink); }
.hb-range { --a: 2; --b: 4; height: 8px; }
.hb-range i { transition: left .4s var(--ease), width .4s var(--ease); }
.bench:has(#need-site:checked) .hb-range { --a: 7; --b: 14; }
.bench:has(#need-reel:checked) .hb-range { --a: 2; --b: 5; }
.rc-lines { display: grid; align-content: end; gap: 1px; min-height: calc(3 * 1.45em + 2px); font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.rc-lines li { display: flex; gap: 9px; align-items: baseline; }
.rc-lines li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 1px; background: var(--accent); transform: translateY(-2px); }
.rc-ph { display: none; }
.rc-micro { grid-column: 1 / -1; min-height: calc(2 * 1.4em); margin-top: 6px; font-size: 12px; line-height: 1.4; color: var(--ink-3); }
.r-site, .r-reel { display: none; }
.bench:has(#need-site:checked) .r-ad, .bench:has(#need-reel:checked) .r-ad { display: none; }
.bench:has(#need-site:checked) .r-site, .bench:has(#need-reel:checked) .r-reel { display: inline; }
.bench.picked .receipt :is(.r-ad, .r-site, .r-reel) { animation: hbFade .4s ease both; }
@keyframes hbFade { from { opacity: 0; } }

/* ---- holds: a phone card waiting for the lower third, the pause button, hidden tabs ---- */
/* .hold-paint: set before the first paint and cleared once the browser reports its
   first contentful paint, so the finished state always shows for its full 1.1s.
   It holds the pass clock (the figure and its rings), not the live captions */
.bench.hold-paint .bench-demo, .bench.hold-paint .bench-demo .ring,
.bench.hold .bench-demo, .bench.hold .bench-demo *,
.bench.paused .bench-demo, .bench.paused .bench-demo *, .bench.paused .bench-glow i,
.bench.offscreen .bench-glow i { animation-play-state: paused !important; }
.bench.hb-rise:not(.hb-in) .stagebox { opacity: 0; transform: translate3d(0, 36px, 0); }
.bench.hb-rise.hb-in .stagebox { transition: opacity .9s var(--ease), transform .9s var(--ease); }

/* ================= entrances (never on the bench: it paints finished and still) ================= */
@media (prefers-reduced-motion: no-preference) {
  .hb-kicker, .hb-h1 .hl, .hero.hb .sub, .hb-cta, .hb-note { animation: hbRise .7s var(--ease) both; }
  .hb-h1 .hl2 { animation-delay: .14s; }
  .hero.hb .sub { animation-delay: .3s; }
  .hb-cta { animation-delay: .45s; }
  .hb-note { animation-delay: .55s; }
  @keyframes hbRise { from { opacity: 0; transform: translate3d(0, 24px, 0); } }
  /* a pick swings the device in */
  .bench.picked .bench-demo .dev-wrap { animation: hbSwing .48s var(--ease) backwards; }
  @keyframes hbSwing { from { opacity: .25; transform: perspective(1200px) rotateY(10deg) scale(.95); } }
  .fix-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ================= the demo stage: real media in the cards ================= */
/* the stage peeks across the bottom of the hero: a lit top edge, so it reads as the next scene, not a footer */
body .darkstage { position: relative; z-index: 2; border-radius: 28px 28px 0 0; background: radial-gradient(70% 120px at 50% 0, rgb(95 211 165 / .13), transparent), var(--stage); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--stage-accent) 34%, transparent); }
/* the hero is taller than a viewport minus the peek, so the bar gets its glass as soon as the page moves */
.hb-navbg:not(.cf-scrolled) .nav-in { background: color-mix(in srgb, var(--paper) 86%, transparent); border-color: var(--line); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
body .darkstage .stage-in { padding-top: 22px; }
body .darkstage .sec-head .kicker { margin-bottom: clamp(2.4rem, 7vh, 4rem); font-size: 13px; }
body .demo .frame { --T: 0; --s1: 1; container-type: inline-size; }
.demo .st-v { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.capwrap.st { left: 7%; right: 18%; top: 60%; }
.capwrap.st.cw-top { top: 13.5%; }
.kbeats.st { top: 13%; }
.demo .play.is-playing::before { width: 12px; height: 14px; margin: 0; border: 0; background: linear-gradient(90deg, #EEF0F4 0 34%, transparent 34% 66%, #EEF0F4 66%); }
/* clip, not hidden: keyboard focus must never scroll the stage sideways under the rail's own drift */
body .darkstage { overflow: hidden; overflow: clip; }

/* ---- the order of the cards. With no pick yet the hero has just played the ad, so the
   finished website leads; a pick puts that format first, and the Halvey ad always comes
   before the landing page it sends people to ---- */
.rail .site-card { order: 1; } .rail .ad-card { order: 2; } .rail .reel-card { order: 3; } .rail .land-card { order: 4; } .rail .endcard { order: 9; }
html[data-need="ad"] .rail .ad-card { order: 1; } html[data-need="ad"] .rail .land-card { order: 2; } html[data-need="ad"] .rail .site-card { order: 3; } html[data-need="ad"] .rail .reel-card { order: 4; }
html[data-need="site"] .rail .site-card { order: 1; } html[data-need="site"] .rail .ad-card { order: 2; } html[data-need="site"] .rail .land-card { order: 3; } html[data-need="site"] .rail .reel-card { order: 4; }
html[data-need="reel"] .rail .reel-card { order: 1; } html[data-need="reel"] .rail .site-card { order: 2; } html[data-need="reel"] .rail .ad-card { order: 3; } html[data-need="reel"] .rail .land-card { order: 4; }
.carry { font: 500 .9rem/1.4 var(--mono); color: var(--stage-accent); text-wrap: balance; }
.carry span { display: none; }
html:not([data-need]) .carry .cy-0, html[data-need="ad"] .cy-ad, html[data-need="site"] .cy-site, html[data-need="reel"] .cy-reel { display: inline; }

/* ---- the Kettlecroft website card: a browser on wide screens, the phone-width site on phones ---- */
.sc-site { position: absolute; inset: 0; background: #F2E4C9; }
.sc-bar { position: relative; height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 14px; background: #EFEAE3; border-bottom: 1px solid rgb(75 46 26 / .08); }
.sc-bar i { width: 8px; height: 8px; border-radius: 50%; background: #D3C9BD; }
.sc-addr { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 38%; text-align: center; font: 500 11px/1.8 var(--mono); color: #6B5647; background: #FBF8F3; border-radius: 999px; padding: 0 14px; }
.sc-screen { position: absolute; left: 0; right: 0; bottom: 0; top: 30px; overflow: hidden; container-type: inline-size; background: #F2E4C9; color: #4B2E1A; }
:is(.site-card, .land-card) .badge { left: auto; right: 10px; top: 4px; }
.sc-m { display: none; position: absolute; inset: 0; flex-direction: column; background: #F2E4C9; color: #4B2E1A; }
.scm-nav { display: flex; align-items: center; justify-content: space-between; flex: none; height: 15cqw; padding: 0 6cqw; font: 650 6.6cqw/1 var(--display); letter-spacing: -.01em; }
.scm-photo { display: block; width: 100%; height: 38%; object-fit: cover; object-position: 26% 60%; }
.scm-h { margin: 6cqw 6cqw 0; font: 650 9.6cqw/1.02 var(--display); letter-spacing: -.02em; }
.scm-sub { margin: 4cqw 6cqw 0; font: 500 5.4cqw/1.35 var(--body); color: #6B4A36; }
.scm-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 4cqw 5cqw 6cqw; background: rgb(242 228 201 / .94); box-shadow: 0 -1px 0 rgb(75 46 26 / .14); }
.scm-bar span { display: block; padding: 4cqw 0; border-radius: 2.6cqw; background: #4B2E1A; color: #F7EBD6; text-align: center; font: 600 5.6cqw/1 var(--body); }

/* ---- the Halvey landing page: the ad's promise as the headline, a Shop button, the product
   loop, and the same page at phone width with its Shop bar fixed under the thumb ---- */
.lp { position: absolute; inset: 0; background: linear-gradient(135deg, #FFF3E2, #F6D2B0); color: #3A1810; }
.lp-screen { position: absolute; left: 0; right: 0; top: 30px; bottom: 0; overflow: hidden; }
.lp-nav { display: flex; align-items: center; gap: 4cqw; height: 7cqw; padding: 0 4cqw; border-bottom: 1px solid rgb(58 24 16 / .1); }
.lp-logo { font: 500 3cqw/1 var(--body); letter-spacing: .01em; }
.lp-links { font: 500 1.7cqw/1 var(--body); color: #7A4A38; }
.lp-copy { position: absolute; left: 4cqw; top: 11cqw; width: 36cqw; display: grid; gap: 1.6cqw; justify-items: start; }
.lp-k { font: 600 1.5cqw/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #9A4E32; }
.lp-h { font: 650 5.2cqw/1 var(--display); letter-spacing: -.03em; text-wrap: balance; }
.lp-sub { font: 500 1.8cqw/1.4 var(--body); color: #6B3A2A; max-width: 30cqw; }
.lp-btn { margin-top: .6cqw; padding: 1.4cqw 2.4cqw; border-radius: 1cqw; background: #B4532F; color: #FFF6EE; font: 600 1.8cqw/1 var(--body); }
.lp-media { position: absolute; left: 43cqw; top: 11cqw; width: 28cqw; aspect-ratio: 1; border-radius: 1.6cqw; overflow: hidden; background: #E9CDB0; box-shadow: 0 24px 50px -22px rgb(58 24 16 / .5); }
.lp-media .pp-v { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-phone { position: absolute; right: 3.5cqw; bottom: 3.5cqw; width: 21cqw; aspect-ratio: 9 / 19; padding: .9cqw; border-radius: 3.4cqw; background: #14100E; box-shadow: 0 20px 40px -14px rgb(0 0 0 / .45); }
.lp-ph { position: relative; height: 100%; overflow: hidden; border-radius: 2.6cqw; background: #FFF3E2; container-type: inline-size; }
.lp-ph-logo { display: block; padding: 8cqw 8cqw 5cqw; font: 500 9cqw/1 var(--body); }
.lp-ph-img { display: block; width: 100%; aspect-ratio: 1 / .8; object-fit: cover; }
.lp-ph-h { padding: 6cqw 8cqw 0; font: 650 11.5cqw/1.02 var(--display); letter-spacing: -.02em; }
.lp-ph-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 5cqw 6cqw 7cqw; background: rgb(255 243 226 / .94); box-shadow: 0 -1px 0 rgb(58 24 16 / .12); }
.lp-ph-bar span { display: block; padding: 6cqw 0; border-radius: 4cqw; background: #B4532F; color: #FFF6EE; text-align: center; font: 600 8.5cqw/1 var(--body); }
.land-card .play { top: auto; right: auto; left: 12px; bottom: 12px; }
/* phones: the website card stands up and shows the site at phone width, close to its real size,
   so "Here it is at full size" stays true there too */
@media (max-width: 900px) {
  .rail .demo.site-card { width: 72vw; max-width: 300px; }
  .demo.wide.site-card .frame { aspect-ratio: 9 / 16; }
  .demo.site-card .sc-site { display: none; }
  .demo.site-card .sc-m { display: flex; }
  .demo.site-card .badge { left: 10px; right: auto; top: calc(15cqw + 10px); }
}

/* ---- the end card: a finished panel with the mark, the line and the one action at its foot ---- */
body .endcard { justify-content: space-between; gap: 1.4rem; border: 1px solid var(--stage-line); background: radial-gradient(120% 55% at 0 0, rgb(95 211 165 / .12), transparent 62%), color-mix(in srgb, var(--stage-fg) 4%, var(--stage)); }
.ec-ks { width: 56px; height: auto; fill: var(--stage-accent); }
.ec-body { display: grid; gap: 1.1rem; justify-items: start; }
.ec-m { display: none; }

/* ---- a visit from Fiverr or Upwork (?via=): no call pitch anywhere, the platform note stands alone ---- */
.via-market .ec-d, .via-market .ec-note { display: none; }
.via-market .ec-m { display: inline; }
.via-market #call .call-copy > :not(.market) { display: none; }
.via-market #call .wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.via-market #call .call-copy { max-width: 42rem; }
.via-market #call .market { margin: 0; padding: clamp(1.6rem, 3vw, 2.4rem); gap: .7rem; font-size: 1.12rem; text-align: center; }
.via-market #call .market .m-title { font: 700 clamp(1.7rem, 3.2vw, 2.4rem)/1.1 var(--display); letter-spacing: -.03em; }

/* ---- About: the hero's keystone disc, larger, with the name under it ---- */
body .about .wrap { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.me { display: grid; justify-items: center; gap: .9rem; padding-top: .4rem; text-align: center; }
.me-disc { display: grid; width: 112px; height: 112px; }
.me-name { display: grid; gap: .15rem; font-size: .9rem; color: var(--ink-3); }
.me-name b { font: 600 1.05rem/1.2 var(--display); color: var(--ink); }
.facts-more { font-size: .98rem; color: var(--ink-2); max-width: 54ch; }
.facts-more a { color: var(--ink); font-weight: 600; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
@media (max-width: 1000px) {
  body .about .wrap { grid-template-columns: minmax(0, 1fr); }
  .me { grid-auto-flow: column; justify-content: start; align-items: center; gap: 1rem; padding: 0; text-align: left; }
  .me-disc { width: 72px; height: 72px; }
}

/* ---- the booker: how booking works, by email until the Cal.com link is set ----
   data-cal on <html> is the switch; v5.js adds .cal-on when it holds a link, so with
   JavaScript off the email version (whose button still works) is the one shown. */
.bk-how { display: grid; gap: .55rem; padding: 1rem 1.1rem; border-radius: 12px; background: var(--tint); font-size: .95rem; line-height: 1.45; color: var(--ink-2); }
.bk-how.bk-cal, .cal-on .bk-how.bk-mail { display: none; }
.cal-on .bk-how.bk-cal { display: grid; }
.bk-how li { display: flex; gap: .6rem; align-items: baseline; }
.bk-how li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 1px; background: var(--accent); transform: translateY(-2px); }

/* ---- no lone words at the end of short lines ---- */
.rc-lines li, .rc-micro, .fixes li, .r-name p, .demo figcaption span, .demo figcaption em, .beats p, .facts li { text-wrap: pretty; }

/* ---- JavaScript off: the rail is a swipe strip (the drift needs the script), the play buttons
   that need the script go, and the nav keeps a background so it never sits on text ---- */
html:not(.js) [data-rail] { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
html:not(.js) [data-rail] > * { scroll-snap-align: start; }
html:not(.js) .demo .play { display: none; }
html:not(.js) .nav-in { background: color-mix(in srgb, var(--sheet) 86%, transparent); border-color: var(--line); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }

/* ---- the carry-through below: services row tag and the call list ---- */
.pick-tag { display: none; justify-self: start; align-items: center; gap: .45rem; padding: .35rem .6rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 600 .72rem/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.pick-tag::before { content: ""; width: 7px; height: 7px; border-radius: 1px; background: currentColor; }
html[data-need="site"] .row-site .pick-tag, html[data-need="ad"] .row-ad .pick-tag, html[data-need="reel"] .row-reel .pick-tag { display: inline-flex; }
.cl-ad, .cl-site, .cl-reel { display: none; }
html[data-need] .cl-0 { display: none; }
html[data-need="ad"] .cl-ad, html[data-need="site"] .cl-site, html[data-need="reel"] .cl-reel { display: inline; }

/* ================= dark mode ================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bench { background: color-mix(in srgb, var(--sheet) 70%, var(--paper)); box-shadow: 0 0 0 1px rgb(95 211 165 / .06), 0 40px 80px -40px rgb(0 0 0 / .7); }
  :root:not([data-theme="light"]) .bench-glow i { background: radial-gradient(closest-side, rgb(95 211 165 / .09), rgb(95 211 165 / 0)); }
  :root:not([data-theme="light"]) .tg-ks .k { stroke: #5FD3A5; stroke-width: 100; paint-order: stroke; }
  :root:not([data-theme="light"]) .bbadge::before { background: #0A7A55; }
  :root:not([data-theme="light"]) .dv-phone, :root:not([data-theme="light"]) .dv-mini { box-shadow: calc(12 * var(--u)) calc(4 * var(--u)) 0 calc(-3 * var(--u)) #1E2622, inset 0 0 0 1px rgb(255 255 255 / .1), 0 36px 60px -28px rgb(0 0 0 / .8); }
  :root:not([data-theme="light"]) .peek { box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 22px 36px -18px rgb(0 0 0 / .8); }
  :root:not([data-theme="light"]) body .darkstage { background: radial-gradient(90% 160px at 50% 0, rgb(125 221 182 / .13), transparent), color-mix(in srgb, var(--stage-2) 40%, var(--tint)); box-shadow: inset 0 1px 0 rgb(125 221 182 / .4); }
  :root:not([data-theme="light"]) .pk-demo::before { background: #0A7A55; }
}
:root[data-theme="dark"] .bench { background: color-mix(in srgb, var(--sheet) 70%, var(--paper)); box-shadow: 0 0 0 1px rgb(95 211 165 / .06), 0 40px 80px -40px rgb(0 0 0 / .7); }
:root[data-theme="dark"] .bench-glow i { background: radial-gradient(closest-side, rgb(95 211 165 / .09), rgb(95 211 165 / 0)); }
:root[data-theme="dark"] .tg-ks .k { stroke: #5FD3A5; stroke-width: 100; paint-order: stroke; }
:root[data-theme="dark"] .bbadge::before { background: #0A7A55; }
:root[data-theme="dark"] .dv-phone, :root[data-theme="dark"] .dv-mini { box-shadow: calc(12 * var(--u)) calc(4 * var(--u)) 0 calc(-3 * var(--u)) #1E2622, inset 0 0 0 1px rgb(255 255 255 / .1), 0 36px 60px -28px rgb(0 0 0 / .8); }
:root[data-theme="dark"] .peek { box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 22px 36px -18px rgb(0 0 0 / .8); }
:root[data-theme="dark"] body .darkstage { background: radial-gradient(90% 160px at 50% 0, rgb(125 221 182 / .13), transparent), color-mix(in srgb, var(--stage-2) 40%, var(--tint)); box-shadow: inset 0 1px 0 rgb(125 221 182 / .4); }
:root[data-theme="dark"] .pk-demo::before { background: #0A7A55; }

/* ================= tablets: one column, the bench under the copy ================= */
/* 601 to 1180px: portrait tablets keep the full bench (the phone card is for 600px and below) */
@media (max-width: 1180px) and (min-width: 601px) {
  .hb-grid { grid-template-columns: 1fr; gap: 36px; }
  .hb-par { width: min(100%, 620px); justify-self: center; }
  .hero.hb { padding-bottom: 56px; }
}
/* landscape tablets and small laptops: two columns, so the headline sizes to its column and the
   work sits beside it on the first screen */
@media (min-width: 901px) and (max-width: 1180px) and (min-aspect-ratio: 5/4) {
  .hb-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; }
  .hb-par { width: auto; justify-self: stretch; }
  .hero.hb { padding-bottom: 0; }
}
/* short laptop screens (1366x768, 1280x720): less air above the bench, so the demo keeps its size */
@media (min-width: 901px) and (max-height: 820px) {
  .hero.hb { padding-top: 84px; }
  .bench-in { padding-top: 16px; }
  .stagebox { margin-top: 12px; --uh: clamp(.72px, calc((100svh - 432px) / 424), 1px); }
  .receipt { margin-top: 10px; padding-top: 10px; }
}

/* ================= phones: a card built for a thumb, nothing pinned ================= */
@media (max-width: 600px) {
  .hero.hb { padding: 74px 0 0; min-height: calc(100svh - 32px); }
  .hb-grid { grid-template-columns: 1fr; gap: 0; }
  .hb-kicker { display: none; }
  .hero.hb .hb-h1 { font-size: clamp(2.2rem, 10.6vw, 2.9rem); }
  .hero.hb .sub { margin-top: 12px; font-size: 16px; line-height: 1.5; }
  .hb-copy .ks-disc { width: 24px; height: 24px; margin: -5px 7px -5px 0; }
  .hb-cta { margin-top: 16px; width: 100%; }
  .hb-cta .btn-primary { flex: 1 1 100%; }
  .hb-see { display: none; }
  .hb-note { margin-top: 10px; font-size: 13px; line-height: 1.45; }
  .hb-n1 { display: inline; }
  .hb-see-in { display: inline; position: relative; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; white-space: nowrap; }
  .hb-see-in::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); }
  .hb-par { transform: none !important; }
  .bench { margin-top: 14px; background: none; border: 0; border-radius: 0; box-shadow: none; transform: none !important; }
  :root .bench { background: none !important; box-shadow: none !important; }
  .bench-glow { display: none; }
  .bench-in { padding: 0; container-type: normal; }
  .need legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .seg { flex: 1 1 100%; }
  .seg label { gap: 6px; }
  .stagebox { --uh: calc(150px / 236); --us: var(--uh); --u: var(--uh); margin-top: 12px; height: 282px; border-radius: 22px; overflow: hidden; container-type: inline-size; touch-action: pan-y; background: radial-gradient(240px 220px at 24% 78%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), var(--tint); box-shadow: inset 0 0 0 1px var(--line); }
  .peek { display: none; }
  .bench-demo { position: absolute; inset: 0; }
  .dev-wrap { height: auto; display: block; position: static; }
  .dev { position: absolute; left: 16px; top: 36px; }
  .demo-site .dev { width: 150px; height: 240px; }
  .dv-browser { display: none; }
  .dv-mini { left: 0; top: 0; width: 150px; height: 240px; border-radius: 24px; }
  .dv-mini .screen { inset: 5px; border-radius: 20px; }
  /* the card crops the phone at its foot: keep the handle and the draft strip above the crop */
  .ugc-h { bottom: 12%; }
  .r-strip { bottom: 11%; }
  .dlab, .dv-browser .dlab, .demo-reel .dlab, .demo-ad .dlab { left: 6px; top: 6px; bottom: auto; height: 19px; gap: 4px; padding: 0 6px; border-radius: 5px; font-size: 9px; }
  /* the ad's draft caption ends in the band at the top left, so its label waits at the top right */
  .demo-ad .dlab { left: auto; right: 6px; }
  .dlab .rw { width: 8px; height: 6px; }
  .m-only > .ring, .m-only > .dot { display: block; }
  .bench:hover .bench-demo .dev { transform: none; }
  .tag, .demo-site .tag { left: -6px; top: -26px; transform: none; height: 26px; gap: 6px; padding: 0 10px 0 8px; font-size: 9.5px; }
  .tg-ks { height: 12px; }
  .bbadge, .demo-site .bbadge { top: -25px; right: calc(150px - 100cqi + 28px); height: 24px; padding: 0 8px; font-size: 9.5px; gap: 5px; box-shadow: none; }
  .dot { width: 18px; height: 18px; font-size: 9.5px; line-height: 18px; right: -7px; top: -7px; }
  .dot.l { left: -7px; }
  .km-nav .spot > .dot { margin-top: -9px; }
  .km-h > .dot { right: 0; top: -21px; }
  .km-bar > .dot.l { left: auto; right: 6px; top: -12px; }
  .dot.a-capdot { top: calc(12.5% - 22px); }
  .a-icons > .dot.l { left: 50%; margin-left: -9px; top: -24px; }
  .fixbox { position: absolute; left: 182px; right: 12px; top: 50px; bottom: 62px; margin: 0; display: flex; flex-direction: column; justify-content: center; }
  .fixes { grid-template-columns: 1fr; gap: 10px; }
  .fixes li { min-height: 0; font-size: 12.5px; gap: 7px; }
  .fixes .n { width: 20px; height: 20px; font-size: 10px; margin-top: -2px; }
  .fixes .tick { width: 11px; height: 11px; }
  .hb-ctl.hb-replay { display: none; }
  .hb-pause, .bench:has(#need-site:checked) .hb-pause { top: auto; bottom: 12px; right: 12px; left: auto; }
  .receipt { display: block; margin-top: 10px; padding: 0; border: 0; }
  .rc-time, .rc-lines { display: none; }
  .rc-ph { display: block; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
  .rc-micro { margin-top: 2px; font-size: 11px; }
  body .darkstage .stage-in { padding-top: 12px; }
}
/* narrow phones: the state tag and the Demo badge share one row above the phone */
@media (max-width: 380px) {
  .tag, .demo-site .tag { font-size: 8.5px; padding: 0 8px 0 6px; gap: 4px; }
  .bbadge, .demo-site .bbadge { padding: 0 6px; font-size: 8.5px; gap: 4px; }
}
@media (max-width: 359px) {
  .fix-head { display: none !important; }
  .fixes { gap: 6px; }
  .fixes li { font-size: 11.5px; }
  .fixbox { bottom: 64px; }
}
/* below 340px there is no room for both: the badge moves inside the screen's top-right corner */
@media (max-width: 339px) {
  .bbadge, .demo-site .bbadge { top: calc(19 * var(--u)); right: calc(16 * var(--u)); height: 20px; }
  .demo-ad .dlab { left: 6px; right: auto; }
}
@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  .bench.picked .bench-demo .dev-wrap { animation: none; }
  .bench.picked .bench-demo .dev, .bench.picked .bench-demo .fixbox { animation: hbWipe .32s var(--ease) backwards; }
  @keyframes hbWipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
}
@media (max-width: 600px) {
  .bench-demo { --r: 0s; --rd: .2s; --f1: .32s; --f2: .47s; --f3: .62s; --k: 1.1s; --ro: 2.8s; }
  .demo-ad, .bench.boot .bench-demo { --r: 1.1s; --rd: .45s; --f1: 1.75s; --f2: 2.05s; --f3: 2.35s; --k: 2.9s; --ro: 4.3s; }
  .bench.picked .bench-demo { --r: 0s; --rd: .2s; --f1: .32s; --f2: .47s; --f3: .62s; --k: 1.1s; --ro: 2.8s; }
}

/* ================= stills: reduced motion, Save-Data, no autoplay ================= */
.hb-still .cap, .hb-still .beat { display: none !important; }
.hb-still .cap-still { display: block; }
.hb-still .beat-still { opacity: calc(var(--s1) * 2 - 1); }
@media (prefers-reduced-motion: reduce) {
  .bench-demo, .bench-demo *, .bench-glow i, .seg-pill, .seg label, .hb-range i, .dev, .peek, .stagebox { animation: none !important; transition: none !important; }
  .hb-ctl { display: none !important; }
  .cap, .beat { display: none !important; }
  .cap-still { display: block !important; }
  .beat-still { opacity: 1 !important; }
  .bench:hover .bench-demo .dev { transform: none; }
  .peek:hover { transform: rotate(-4deg); }
}

/* the one inline link in About keeps a 44px hit area without changing the line */
.facts-more a { position: relative; }
.facts-more a::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }