/* theauctioneer.ai waitlist: "Waitlist Final" design (claudeDesignWaiting, 2026-09-07).
   Every value here is lifted from Waitlist Final.dc.html / DESIGN_SPEC.md:
   ground #0f0e0e, ink #201E1D, paper #F3F2F2, royal blue #4169E1 (hover #2F51B8),
   light blue #8FA7F0, tint #EEF2FC, warning #9b2c2c, muted #6b6a66.
   Type: Instrument Serif 400 for h1/h2/the big number, Instrument Sans for the rest.
   2026-09-08 additions: the gavel loading screen (Gavel Loader 1b White handoff, lifted
   verbatim), back arrows on the cards, the "Already in line?" button, the mobile particle
   field, and a "reservations open soon" state for the subscribe prompt. */

:root {
  --ground: #0f0e0e; --ink: #201E1D; --paper: #F3F2F2; --blue: #4169E1; --blue-hover: #2F51B8;
  --blue-light: #8FA7F0; --tint: #EEF2FC; --red: #9b2c2c; --muted: #6b6a66;
  --serif: "Instrument Serif", Georgia, serif; --sans: "Instrument Sans", system-ui, sans-serif;
  /* U, 6 October 2026 (Henry): two roundings for everything. Rounding 1 sits between the square
     Sign in button and the 6px Request beta access button; rounding 2 between that button and the
     social proof pill, about 22px at its height. On this page everything is rounding 1 but that pill. */
  --r1: 3px; --r2: 14px;
  /* gavel loader (design tokens, verbatim) */
  --gvl-ink: #FFFFFF; --gvl-bg: #0f0e0e; --gvl-sw: 3; --gvl-dur: 7.4s; --gvl-size: min(52vw, 420px);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--ground); color: var(--paper); font: 16px/1.4 var(--sans); -webkit-font-smoothing: antialiased; min-height: 100vh; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
h1, h2, .big { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; margin: 0; }

@keyframes driftUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes driftDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(65,105,225,.6); } 100% { box-shadow: 0 0 0 14px rgba(65,105,225,0); } }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes orbA { 0%,100% { transform: translate(-22%,-18%) scale(.9); } 50% { transform: translate(18%,22%) scale(1.1); } }
@keyframes orbB { 0%,100% { transform: translate(20%,-24%) scale(.8); } 50% { transform: translate(-18%,16%) scale(1); } }
@keyframes orbC { 0%,100% { transform: translate(0,24%) scale(.7); } 50% { transform: translate(8%,-20%) scale(.95); } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .4s ease-out; }

/* ── loading screen: self-drawing gavel, one 7.4s loop (gavelloader.html, verbatim) ── */
.gvl { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; background: var(--gvl-bg); transition: opacity .45s ease; }
.gvl.out { opacity: 0; pointer-events: none; }
.gvl svg { display: block; width: var(--gvl-size); overflow: visible; }
.gvl g.mark { fill: none; stroke: var(--gvl-ink); stroke-width: var(--gvl-sw); stroke-linecap: round; stroke-linejoin: round; }
.gvl .draw { stroke-dasharray: 1; }          /* paths carry pathLength="1" */
.gvl .band { fill: var(--gvl-ink); opacity: .16; stroke: none; }
.gvl .hairline { opacity: .4; }
.gvl .p-head { animation: gvl-head var(--gvl-dur) infinite; }
.gvl .p-handle { animation: gvl-handle var(--gvl-dur) infinite; }
.gvl .p-knob { animation: gvl-knob var(--gvl-dur) infinite; }
.gvl .p-block { animation: gvl-block var(--gvl-dur) infinite; }
.gvl .p-detail { animation: gvl-detail var(--gvl-dur) infinite; }
.gvl .gavel { animation: gvl-strike var(--gvl-dur) infinite; transform-box: view-box; transform-origin: 150px 74px; }
/* draw on (dashoffset 1 -> 0), hold, retract off the same end (0 -> -1) */
@keyframes gvl-head {
  0%, 4% { stroke-dashoffset: 1; animation-timing-function: cubic-bezier(.3,.6,.3,1); }
  13.5%, 77% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(.4,0,.6,.5); }
  92%, 100% { stroke-dashoffset: -1; }
}
@keyframes gvl-handle {
  0%, 13.5% { stroke-dashoffset: 1; animation-timing-function: cubic-bezier(.3,.6,.3,1); }
  23%, 77% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(.4,0,.6,.5); }
  92%, 100% { stroke-dashoffset: -1; }
}
@keyframes gvl-knob {
  0%, 23% { stroke-dashoffset: 1; animation-timing-function: cubic-bezier(.3,.6,.3,1); }
  28%, 77% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(.4,0,.6,.5); }
  92%, 100% { stroke-dashoffset: -1; }
}
@keyframes gvl-block {
  0%, 30% { stroke-dashoffset: 1; animation-timing-function: cubic-bezier(.3,.6,.3,1); }
  38.5%, 77% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(.4,0,.6,.5); }
  92%, 100% { stroke-dashoffset: -1; }
}
@keyframes gvl-detail { 0%, 32% { opacity: 0; } 38.5%, 88% { opacity: 1; } 92%, 100% { opacity: 0; } }
/* single strike: wind up, down, small recoil, fully back to rest by 59% */
@keyframes gvl-strike {
  0%, 44% { transform: translate(0,0) rotate(-56deg); animation-timing-function: cubic-bezier(.33,0,.2,1); }
  48.6% { transform: translate(0,-14px) rotate(-47deg); animation-timing-function: cubic-bezier(.6,0,.9,.3); }
  52% { transform: translate(0,26px) rotate(-62deg); animation-timing-function: cubic-bezier(.2,.8,.4,1); }
  55% { transform: translate(0,16px) rotate(-59deg); animation-timing-function: cubic-bezier(.3,0,.2,1); }
  59%, 100% { transform: translate(0,0) rotate(-56deg); }
}
/* the loading bar underneath: fills over the same 7.4s while the photos preload */
.gvl-bar { width: min(40vw, 260px); height: 2px; border-radius: var(--r1); background: rgba(255,255,255,.16); overflow: hidden; }
.gvl-bar i { display: block; height: 100%; width: 0; background: var(--gvl-ink); border-radius: var(--r1); transition: width .2s linear; }

/* ── stage + nav (both screens) ─────────────────────────────────────── */
.stage { position: relative; min-height: 100vh; min-height: calc(100vh - var(--ac-consent-h, 0px)); overflow: hidden; background: var(--ground); color: var(--paper); } /* U, 7 October 2026: above the cookie banner until it is answered (consent.js) */
.nav { position: absolute; z-index: 3; top: 18px; left: 32px; right: 32px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font-size: 15px; }
.brand { display: flex; align-items: center; gap: 12px; justify-self: start; text-decoration: none; color: inherit; }
/* R36: the app icon (paper mesa on ink) wherever the brand appears; hard corners, no border or shadow, never under 24px */
.brand img { display: block; flex: none; width: 40px; height: 40px; }
.wordmark { font-weight: 600; font-size: 18px; }
.links { display: flex; align-items: center; gap: 26px; color: var(--paper); justify-self: center; }
.navlink { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: none; cursor: pointer; transition: color .2s; }
.links-b { color: rgba(243,242,242,.6); }
.links-b .navlink:hover { color: var(--paper); }
/* R36 outline button (team spec; Sign in, and until 11 October Access code and Sign out, which moved into the
   account menu below): rounding 1 (U, 6 October), 36px tall, a paper outline at 28%, the full paper outline and
   a faint paper wash on hover */
.signin-btn { justify-self: end; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px; border: 1px solid color-mix(in srgb, var(--paper) 28%, transparent); border-radius: var(--r1); background: transparent; color: var(--paper); font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; transition: background .2s, border-color .2s; }
.signin-btn:hover { background: color-mix(in srgb, var(--paper) 6%, transparent); border-color: var(--paper); }
/* the right-hand nav cell; R36: Sign in alone, the access card opens from the cards and from ?access=1 */
.nav-actions { justify-self: end; display: inline-flex; align-items: center; gap: 8px; }
/* The signed-in nav (U, 11 October 2026, Carl: "Replace these with the account button and drop down showing
   email sign out and access code in the drop down", with a crop of a concept that draws the button as a round
   person icon, "Your account" and a chevron): the email, Access code and Sign out give way to that one button,
   and its panel holds the three. No outline, paper type; the wash on hover, and while the panel is open, is the
   page's paper at 8% at rounding 1. The chevron ends on the page margin, as Sign out did and as Discover's card
   does (its glyph sits 4px inside its box, so the box and the wash reach 10px past the margin). The panel opens
   under the button with its right edge on the button's box, over Discover (the nav is z-index 3, the columns 2). */
.acct { position: relative; justify-self: end; display: inline-flex; align-items: center; color: var(--paper); }
.acct-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; margin-right: -10px; padding: 0 6px 0 10px; border: 0; border-radius: var(--r1); background: transparent; color: inherit; font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; transition: background .2s; }
.acct-btn:hover, .acct-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--paper) 8%, transparent); }
.acct-btn:focus-visible, .acct-item:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 2px; }
.acct-ico { flex: none; display: block; width: 28px; height: 28px; }
.acct-disc { fill: var(--paper); }
.acct-fig { fill: var(--ground); }
/* 11 October 2026 (Carl: "The avatar on the top right should be replaced with their avatar that they choose on sign-in. The AI
   movable avatar that animates"). Once the status names the person's mark (renderAvatar, waitlist.js) it takes the round person's
   place in the button, in the same 28px so nothing beside it moves: the app's own picture, an animated <auc-mark> (app/marks.js)
   on a dark disc as the app's rail draws it, ringed in paper so the disc reads against the page's ground. Until the status names
   it, or if marks.js will not load, the person stays. The disc clips the mark, which is square. The mark turns toward the pointer
   anywhere over the button (data-mark-hover, set in script) and holds a still frame under reduced motion by itself, so there is
   nothing for the reduced-motion block below to do. */
.acct-ava { display: none; flex: none; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; background: var(--ground); box-shadow: 0 0 0 1px color-mix(in srgb, var(--paper) 28%, transparent); }
.acct-btn[data-mark] .acct-ava { display: block; }
.acct-btn[data-mark] .acct-ico { display: none; }
.acct-chev { flex: none; display: block; width: 16px; height: 16px; transition: transform .2s; }
.acct-btn[aria-expanded="true"] .acct-chev { transform: rotate(180deg); }
.acct-menu { position: absolute; z-index: 4; top: calc(100% + 8px); right: -10px; width: max-content; min-width: 240px; max-width: min(320px, calc(100vw - 36px)); padding: 6px; border: 1px solid color-mix(in srgb, var(--paper) 22%, transparent); border-radius: var(--r1); background: color-mix(in srgb, var(--ground) 94%, transparent); backdrop-filter: blur(14px); box-shadow: 0 30px 60px -20px rgba(0,0,0,.9); font-size: 14px; animation: acctIn .16s ease-out; }
.acct-id { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin-bottom: 6px; padding: 10px 12px 12px; border-bottom: 1px solid color-mix(in srgb, var(--paper) 14%, transparent); }
.acct-id:has(.acct-email:empty) { display: none; }
.acct-k { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(243,242,242,.55); }
.acct-email { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 12px; border: 0; border-radius: var(--r1); background: transparent; color: var(--paper); font-size: 14px; font-weight: 500; text-align: left; transition: background .15s; }
.acct-item svg { flex: none; display: block; width: 16px; height: 16px; opacity: .75; }
.acct-item:hover { background: color-mix(in srgb, var(--paper) 8%, transparent); }
.acct-item:focus-visible { outline-offset: -2px; }
@keyframes acctIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* a phone has no room for the words beside the links: the icon and the chevron stay, the label stays for a screen reader */
@media (max-width: 480px) {
  .acct-btn { gap: 4px; padding: 0 6px; }
  .acct-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.linkish { background: none; border: 0; padding: 0; color: var(--blue-light); font: inherit; cursor: pointer; }
.linkish-blue { background: none; border: 0; padding: 0; color: var(--blue-hover); font: inherit; cursor: pointer; }
.linkish-ink { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: none; }
.linkish-ink:hover { text-decoration: underline; }

/* ── screen A: join ──────────────────────────────────────────────────── */
.wall4 { position: absolute; inset: 0; }
.wall4 .colwrap { position: absolute; top: 0; width: 124px; height: 100%; }
.wall4 .belt { display: flex; flex-direction: column; gap: 14px; will-change: transform; }
.lot { position: relative; width: 100%; flex: none; border-radius: var(--r1); overflow: hidden; box-shadow: 0 40px 80px -40px rgba(0,0,0,.9); cursor: pointer; transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease; }
.lot:hover { transform: scale(1.14); box-shadow: 0 50px 90px -30px rgba(0,0,0,1); z-index: 2; }
.lot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lot .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px; background: linear-gradient(180deg, rgba(15,14,14,0), rgba(15,14,14,.85)); font-size: 12px; line-height: 1.3; }
.lot .cap .cat { display: block; letter-spacing: .12em; text-transform: uppercase; font-size: 10px; color: rgba(243,242,242,.7); }
.particles { position: absolute; inset: 0; width: 100%; height: 100%; display: none; pointer-events: none; }
.veil { position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, #0f0e0e 0, #0f0e0e 62px, rgba(15,14,14,0) 140px), radial-gradient(ellipse 34% 44% at 50% 54%, rgba(15,14,14,.95) 0%, rgba(15,14,14,.7) 60%, rgba(15,14,14,0) 100%); }
.hero-body { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 60px 0; pointer-events: none; }
.pill { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 12px; border: 1px solid rgba(243,242,242,.35); border-radius: var(--r1); background: rgba(15,14,14,.85); font-size: 14.5px; color: var(--paper); white-space: nowrap; }
.pill b { font-weight: 600; }
#hero-pill { border-color: transparent; } /* R36 (Henry): no outline on "Seats open"; transparent, so its size does not change */
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); animation: pulse 1.6s ease-out infinite; flex: none; }
.dot-s { width: 7px; height: 7px; }
.hero-body h1 { margin: 22px 0 0; font-size: 88px; line-height: 1; color: #fff; }
.lede { margin: 18px 0 0; max-width: 540px; font-size: 19px; line-height: 1.5; color: var(--paper); text-wrap: balance; }
.hero-form { display: flex; gap: 8px; margin-top: 28px; width: 460px; max-width: 100%; pointer-events: auto; }
.hero-form input { flex: 1; min-width: 0; height: 50px; padding: 0 16px; border: 1px solid rgba(243,242,242,.4); border-radius: var(--r1); background: rgba(243,242,242,.1); color: var(--paper); font-size: 16px; outline: none; }
.hero-form input::placeholder { color: rgba(243,242,242,.55); }
.hero-form input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(65,105,225,.15); }
.hero-form input.err { border-color: #e05555; }
.hero-form button { height: 50px; padding: 0 22px; border: 0; border-radius: var(--r1); background: var(--blue); color: #fff; font-weight: 600; font-size: 16px; white-space: nowrap; transition: background .2s; }
.hero-form button:hover { background: var(--blue-hover); }
.hero-foot { margin: 12px 0 0; font-size: 14px; color: rgba(243,242,242,.8); }
.hero-foot.err { color: #ffb0b0; }
.learn-link { white-space: nowrap; color: rgba(243,242,242,.85); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(243,242,242,.45); pointer-events: auto; transition: color .2s, text-decoration-color .2s; }
.learn-link:hover { color: #fff; text-decoration-color: #fff; }
.hero-foot { pointer-events: auto; }
.case-line { display: none; margin: 22px 0 0; font-size: 13.5px; line-height: 1.5; color: rgba(243,242,242,.75); text-wrap: balance; }
/* the four things the assistant does (2026-09-08): a two-by-two table under the CTA,
   royal-blue glyphs as the bullets, the lock card's list cut to its core. */
.features { display: grid; grid-template-columns: 1fr 1fr; width: 520px; max-width: 100%; margin: 36px 0 0; padding: 0; list-style: none; border: 1px solid rgba(243,242,242,.16); border-radius: var(--r1); overflow: hidden; background: rgba(243,242,242,.04); backdrop-filter: blur(6px); pointer-events: auto; }
.feature { display: flex; align-items: center; gap: 9px; padding: 9px 14px; font-size: 12.5px; line-height: 1.3; color: rgba(243,242,242,.85); text-align: left; min-width: 0; }
.feature span:last-child { min-width: 0; }
.feature:nth-child(odd) { border-right: 1px solid rgba(243,242,242,.12); }
.feature:nth-child(-n+2) { border-bottom: 1px solid rgba(243,242,242,.12); }
.feature-icon { flex: none; display: grid; place-items: center; width: 16px; height: 16px; color: var(--blue); filter: drop-shadow(0 0 5px rgba(65,105,225,.55)); }
.feature-icon svg { width: 15px; height: 15px; stroke-width: 2; }
.case-pill { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 9px 16px; border-radius: var(--r2); background: rgba(243,242,242,.06); border: 1px solid rgba(243,242,242,.16); backdrop-filter: blur(6px); pointer-events: auto; }
/* U, 6 October 2026 (Henry): no blue box round the figure, and the client's name a quiet link to its
   site: no colour, no underline, nothing on hover */
.case-badge { flex: none; display: inline-flex; align-items: baseline; gap: 3px; padding: 0; border-radius: var(--r1); background: none; color: #fff; font-weight: 600; font-size: 14px; letter-spacing: -.01em; }
.case-badge span { font-size: 9.5px; font-weight: 600; opacity: .85; }
.case-text { font-size: 12.5px; color: rgba(243,242,242,.75); }
.case-text a, .case-line a { color: inherit; text-decoration: none; pointer-events: auto; }
/* U, 6 October 2026: on a phone, where the four columns are hidden, the same twenty-four lots in one row
   under the hero, 3.5 on screen, drifting left (waitlist.js buildWheel). Shown at 720px and under.
   17 October 2026 (Henry): the row scrolls by hand too. It is a scroller, its bar hidden, and the drift is driveWheel's
   (shared/wall.js), no CSS animation, so a finger can stop it. */
.lot-wheel { display: none; }
.lot-wheel::-webkit-scrollbar { display: none; }
.lot-wheel .track { display: flex; width: max-content; will-change: transform; }
.lot-wheel .lot { width: calc((100vw - 35px) / 3.5); height: auto; aspect-ratio: 3 / 4; margin-right: 10px; box-shadow: none; }
.lot-wheel .lot:hover { transform: none; }

/* ── screen B: position ──────────────────────────────────────────────── */
/* Carl, 11 October 2026, 15:56, with a screenshot of this page after its lots had been lifted: "revert ... this page should be darker
   background like before". So this wall is as it was before that day's brightening: the wall at .28, the veil at full strength,
   nothing on the photos, no light that follows the pointer. The lifted version (a filter on each photo, a thinner veil, the light and
   the lit lot) is kept in this repo's refs/backup/position-wall-light-2026-10-11-1559. */
.wallE { position: absolute; inset: -40px 0; display: flex; gap: 12px; padding: 0 20px; opacity: .28; }
.wallE .col { flex: 1; min-width: 0; overflow: hidden; position: relative; height: 100%; }
.wallE .belt { display: flex; flex-direction: column; gap: 12px; animation-timing-function: linear; animation-iteration-count: infinite; }
.wallE img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; border-radius: var(--r1); }
/* Carl, 11 October 2026, about 16:00, after the revert above: "Background of wall loits of 'your position' page should be a tad
   brighter just a bit". The wall's own .28 is not the lever: the veil is fully opaque at the left edge, so no wall opacity gets a photo
   through there, and a brighter wall lifts the right side more than the left. The veil's own opacity is: .8 takes a fifth off its
   coverage everywhere and leaves its stops alone (test/position-wall.test.mjs pins them; position-golden.css overrides only the
   background, so it holds at every width). Measured over a whole drift of the belts, 1440 x 900, content hidden: the page's
   mean goes from 14 to 20 of 255 and its brightest 5% from 18 to 28 (the lifted version that was sent back was 50 and 70), and the
   smallest text keeps 5.9:1 or better against the brightest 5% of the wall behind it, at 1280, 900 and 390 wide. The right side's
   extra darkness (his 10 October "a tad darker fade", about 3 levels of 255) shrinks with it, to about 1. One number: .9 is hardly
   there, .7 is plainly more. Nothing on the wall itself: a filter or a mask on it is run again every frame under the moving belts. */
.veil-b { position: absolute; inset: 0; background: linear-gradient(90deg, #0f0e0e 0%, rgba(15,14,14,.92) 45%, rgba(15,14,14,.6) 100%); opacity: .8; }
/* U, 6 October 2026 (Henry): one view on a desktop, the position on the left and Discover on the right
   (waiting-room.css), both in the flow, so the page grows rather than cutting either off. The reserve and
   profile cards follow the invite card in the left column. */
.stage-position { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 440px); justify-content: space-between; align-items: start; column-gap: 48px; padding: 96px 64px 96px 48px; }
.col-left { position: relative; z-index: 2; }
.col-left .reserve-card, .col-left .profile { margin-top: 12px; }
/* the number with what it means beside it: the pill and the way in, at its foot */
.pos-row { display: flex; align-items: flex-end; gap: 22px; margin-top: 10px; }
.pos-row .pill-row { flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 14px; }
/* arriving: the number counts up from 0 (waitlist.js countUpTo); the pill and the way in wait where they will sit, then fade in once it has stopped */
.pos-row .pill-row { transition: opacity .6s ease; }
.pos-row.counting .pill-row { opacity: 0; visibility: hidden; }
/* 10 October 2026 (Carl: "the number as it goes up should be like fading into view as it climbs up"). While .counting is on, the
   number's strength is --run, which countUpTo sets from 0 to 1 on every frame of the count (0 before the first, so there is no
   flash of "0"). The moment .counting comes off, whether the count ended or a reel took the number over half way up, this rule
   is gone and the number is at full strength. No opacity transition inside the count: one on each frame's change would lag the
   fade behind the digits. One outside it, so a reel that takes over mid-count eases the number up to full instead of snapping. */
.pos-row .big { transition: color .3s, opacity .6s; }
.pos-row.counting .big { opacity: var(--run, 0); transition: color .3s; }
/* 11 October 2026 (Carl: "On load, as te numbers are cycling up, the backgrond should brighten to current brightness. Like the lots
   should fade into view and brigthen up a bit then stop"). The wall of lots rises with the number: while .counting is on, its opacity
   is its resting .28 times --wall-run, which countUpTo sets on #wallE on the same frame as --run (0 until then, so the lots are out of
   sight while the loader or the sign-in card still covers the page). The moment .counting comes off this rule is gone and the wall is
   at its own .28, which the last frame of the count already was, so nothing steps. Only the opacity moves: a filter or a mask on the
   wall is run again every frame under the belts. No transition inside the count, for the reason the number has none; one outside it,
   so a reel that takes over half way up eases the wall to its resting look instead of snapping. The .28 here is the wall's own: the
   test (position-wall-arrival.test.mjs) holds the two equal. */
.stage-position .wallE { transition: opacity .6s; }
.stage-position:has(.pos-row.counting) .wallE { opacity: calc(.28 * var(--wall-run, 0)); transition: none; }
.pill-b { padding: 7px 14px 7px 11px; border-color: rgba(243,242,242,.3); background: none; font-size: 13.5px; }
.pill-b .tabular { font-variant-numeric: tabular-nums; }
/* 10 October 2026 (Carl, of the batch 1 of 20 pill: "a more subtle pulsing animation ... the blue field should dissipate faster").
   The page's shared pulse (.dot, 1.6s) is a 14px ring at 60% that is lit for three quarters of every cycle and spills out past
   the pill's left edge. This dot has a ring of its own: 7px at 34%, gone 40% of the way through a 2.4s cycle (the Reserve
   button's own beat), so the field fades in about half a second and the dot then rests. The reduced-motion block at the
   foot still stills every .dot, this one included. */
@keyframes pillRing { 0% { box-shadow: 0 0 0 0 rgba(65,105,225,.34); } 40%, 100% { box-shadow: 0 0 0 7px rgba(65,105,225,0); } }
.pill-b .dot { animation: pillRing 2.4s ease-out infinite; }
.eyebrow-dim { margin-top: 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(243,242,242,.65); }
.big { font-size: 184px; line-height: .9; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #fff; transition: color .3s; }
.big.spin { color: var(--blue-light); text-shadow: 0 0 32px rgba(65,105,225,.55); }
.ahead { margin: 16px 0 0; font-size: 18px; line-height: 1.4; color: rgba(243,242,242,.85); }
.ahead b { color: #fff; font-weight: 600; }
.bar { margin-top: 22px; height: 8px; background: rgba(243,242,242,.14); border-radius: var(--r1); overflow: hidden; display: flex; gap: 2px; }
.bar .seg { background: var(--paper); }
.bar .seg.you { background: var(--blue); }
.bar-labels { margin-top: 8px; display: flex; justify-content: space-between; gap: 10px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(243,242,242,.6); white-space: nowrap; }
.bar-labels .you { color: var(--blue-light); }
.card-dark { background: rgba(243,242,242,.06); border: 1px solid rgba(243,242,242,.18); border-radius: var(--r1); padding: 14px 18px; backdrop-filter: blur(8px); }
.invite { margin-top: 22px; }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.card-title { font-weight: 600; font-size: 17px; }
.muted-65 { font-size: 12.5px; color: rgba(243,242,242,.65); white-space: nowrap; }
.muted-65 b { color: var(--paper); font-weight: 600; }
.link-row { margin-top: 10px; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border: 1px dashed rgba(243,242,242,.4); border-radius: var(--r1); font-size: 14px; }
.link-row code { flex: 1; min-width: 0; font: inherit; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-row button { height: 32px; padding: 0 12px; border: 1px solid rgba(243,242,242,.4); border-radius: var(--r1); background: transparent; color: var(--paper); font-size: 13px; }
.link-row button.copied { background: var(--blue); color: #fff; }
.foot-65 { margin-top: 8px; font-size: 12.5px; color: rgba(243,242,242,.65); }
/* 10 October 2026 (Carl: the solid paper was too white, too shocking): paper as a tint, not a slab. Off-white at 18% over
   the page's black, with a hairline twice the dark cards' strength, so the reserve card is the one that reads as lit
   without being the brightest block on the screen. The text is the page's own light-on-dark, and the border takes 1px
   off each side of the padding, so the card keeps its size. Raise the two alphas for more presence, lower them for less. */
.card-paper { background: rgba(243,242,242,.18); border: 1px solid rgba(243,242,242,.36); border-radius: var(--r1); padding: 15px 17px 13px; backdrop-filter: blur(8px); }
.eyebrow-blue { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-hover); font-weight: 600; }
.left-red { font-size: 12px; color: var(--red); font-weight: 600; white-space: nowrap; }
.left-red b { font-variant-numeric: tabular-nums; }
.card-paper .eyebrow-blue { color: var(--blue-light); }
.card-paper .left-red { color: #ffb0b0; } /* the page's light red for text on black, as .hero-foot.err */
.reserve-row { align-items: flex-end; gap: 14px; margin-top: 6px; }
.reserve-title { font-weight: 600; font-size: 21px; line-height: 1.15; }
.btn-primary { border: 0; border-radius: var(--r1); background: var(--blue); color: #fff; font-weight: 600; transition: background .2s; }
.btn-primary:hover { background: var(--blue-hover); }
.btn-primary:disabled { opacity: .6; cursor: default; }
.reserve-card .btn-primary { flex: none; height: 46px; padding: 0 18px; font-size: 15px; white-space: nowrap; }
/* 10 October 2026 (Carl, of the "Reserve for $4.17/mo" button, lit or hovered: "the effect is too pronounced ... replace that effect with a
   slight shimmer effect reminiscent of modern AI companies"). The ring that pulsed out of the button (the page's shared `pulse`: 14px at
   60%, every 2.4s) and the darker blue it turned on hover are gone. The face now carries a soft band of white, never above 18%, that
   crosses it slowly once every 6s and rests in between: the Live strip's slow sheen (liveShine), on the blue instead of on text. Only
   the face moves, never the label, so the words stay solid white. Hover or keyboard focus sends one pass at once, a little quicker
   (1.4s, eased out so it is visible within a tenth of a second and then settles), and leaves the colour alone. `.pulse` is still the
   class waitlist.js puts on the button while the seat is not yet reserved: it keeps its name (a new one would be a change to
   waitlist.js and the page for nothing anyone sees) and now means "shimmer". All of it is for people who have not asked for less
   motion: without it the button is the plain blue, and hover darkens it as it does every other .btn-primary above. Dials: the .18
   (the band's peak), 300% (how long the band's strip is, so how soft), 105deg (its tilt), 6s with 42% to 78% (when in the loop it
   passes), and the 1.4s. */
@keyframes btnSheen { 0%, 42% { background-position: 100% 0; } 78%, 100% { background-position: 0 0; } }
@keyframes btnSheenHover { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
  .btn-primary.pulse, .btn-primary.pulse:hover {
    background-color: var(--blue); background-repeat: no-repeat; background-size: 300% 100%; background-position: 100% 0;
    background-image: linear-gradient(105deg, rgba(255,255,255,0) 36%, rgba(255,255,255,.045) 40.7%, rgba(255,255,255,.135) 45.3%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.135) 54.7%, rgba(255,255,255,.045) 59.3%, rgba(255,255,255,0) 64%);
    animation: btnSheen 6s ease-in-out infinite;
  }
  .btn-primary.pulse:hover, .btn-primary.pulse:focus-visible { animation: btnSheenHover 1.4s ease-out; }
}
/* U, 11 October 2026 (Carl, with his redesign mock, redesign.png: "implement the blue highlights and copy the card for the skip every
   batch card"). The card is no longer a tint of paper but the mock's: a navy fill (#0e192b at 92% over the page's black), a 4px bar
   down the left and a 1px hairline round the rest, one azure for both (--rc-edge, #4281f9), and a faint glow of it just inside the top,
   right and bottom edges (not the left, where the bar is). The label is #6cb4ff and a little bolder (700), "500 reserved seats left"
   is a pale blue (#bae6fd, 12.5px) where the page's light red was, and the title is pure white. The button is a deeper blue, #174bfc,
   with a thin 12 x 8 arrow after the words while the seat is not yet reserved: `.pulse` is how the arrow knows (waitlist.js takes it
   off the button when the seat is reserved), so "Seat reserved ✓" has none. The values are read off the mock's pixels (the PNG carries no
   profile, so they are sRGB as they stand) and were checked against a render of this card at the mock's scale. The blues are the
   card's own --blue, --blue-hover and --blue-light, which the button, its shimmer above and the label (.card-paper .eyebrow-blue)
   already read, so none of those rules changed. `.card-paper` itself is left as it was: the docs' strips and form cards take its tint
   (docs.css, held equal by test/docs-panels.test.mjs), so they stay a tinted white and no longer match this card. One departure from
   the mock: its "seats left" stops 3px short of the button's edge, here the two end on one line. The padding is the old card's plus
   the bar (15px 17px 16px 16px under a 4px left border): the words start 2px further in and the card is 3px taller. Dials: --rc-edge,
   the three .22 (the glow's strength), the fill's .92. */
.reserve-card {
  --rc-edge: #4281f9; --rc-glow: 66, 129, 249;
  --blue: #174bfc; --blue-hover: #1038c4; --blue-light: #6cb4ff;
  --rc-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M.8 4h10.4M7 .8 11.2 4 7 7.2'/%3E%3C/svg%3E");
}
.card-paper.reserve-card {
  background: rgba(14,25,43,.92); border: 1px solid var(--rc-edge); border-left-width: 4px; padding: 15px 17px 16px 16px;
  box-shadow: inset 0 7px 9px -6px rgba(var(--rc-glow),.22), inset -7px 0 9px -6px rgba(var(--rc-glow),.22), inset 0 -7px 9px -6px rgba(var(--rc-glow),.22);
}
.card-paper.reserve-card .eyebrow-blue { font-weight: 700; }
.card-paper.reserve-card .left-red { font-size: 12.5px; color: #bae6fd; } /* the class keeps its name: a rename would touch the page and waitlist.js for nothing anyone sees */
.card-paper.reserve-card .reserve-title { color: #fff; text-wrap: balance; } /* the arrow makes the button 18px wider, so under about 1290px the title wraps: two even lines, not "front." alone */
.reserve-card .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 17px; }
.reserve-card .btn-primary::after { content: ""; flex: none; width: 12px; height: 8px; background: currentColor; -webkit-mask: var(--rc-arrow) center / contain no-repeat; mask: var(--rc-arrow) center / contain no-repeat; }
.reserve-card .btn-primary:not(.pulse)::after { display: none; } /* a reserved seat: "Seat reserved ✓", no arrow */
@media (forced-colors: active) { .reserve-card .btn-primary::after { background: ButtonText; } }
.profile { padding: 16px 18px 14px; border-radius: var(--r1); }
.tag-blue { padding: 4px 10px; border: 1px solid var(--blue); border-radius: var(--r1); font-size: 12.5px; font-weight: 600; color: var(--blue-light); white-space: nowrap; }
.group-label { margin-top: 12px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(243,242,242,.5); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip { padding: 5px 11px; border-radius: var(--r1); border: 1px solid rgba(243,242,242,.3); background: transparent; color: rgba(243,242,242,.8); font-size: 12px; }
.chip.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.input-dark { display: block; width: 100%; margin-top: 12px; height: 38px; padding: 0 12px; border: 1px solid rgba(243,242,242,.25); border-radius: var(--r1); background: rgba(243,242,242,.08); color: var(--paper); font-size: 13px; outline: none; }
.input-dark::placeholder { color: rgba(243,242,242,.45); }
.input-dark:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(65,105,225,.15); }
.profile-btn { display: block; width: 100%; margin-top: 12px; height: 40px; font-size: 13.5px; }
.profile-open { display: none; flex: none; height: 32px; padding: 0 14px; font-size: 13px; white-space: nowrap; } /* U: from 901px only, where the questions open in a card of their own */
.live-bar { position: absolute; z-index: 2; left: 48px; right: 40px; bottom: 22px; display: flex; align-items: center; gap: 14px; font-size: 13.5px; color: rgba(243,242,242,.75); border-top: 1px solid rgba(243,242,242,.14); padding-top: 14px; }
.live { display: inline-flex; align-items: center; gap: 7px; color: var(--paper); font-weight: 600; white-space: nowrap; }
.feed { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.in-line { white-space: nowrap; color: rgba(243,242,242,.55); }
.in-line b { color: var(--paper); font-weight: 600; }
/* 10 October 2026 (Carl: "the live section should be slower and more subtle ... fade in, fade out, slow shimmer"). The
   strip breathes instead of flipping. A line that changes fades out, is swapped while it is clear and fades in (waitlist.js
   paintLine reads the duration below, so this is the one place to change it), and "Live" fades in with the first line and
   out with the last. The line carries a slow shimmer, a soft band of the paper colour moving along it and resting between
   passes; it is the sentence only, not the "in line" count. The dot's ring is slower and fainter than the page's other dots
   (.dot, 1.6s). All of it for people who have not asked for less motion: without it the text is plain, a change is
   immediate and the dot is still (the reduced-motion block at the foot). */
.live.is-out, .feed.is-out { opacity: 0; }
@keyframes liveRing { 0% { box-shadow: 0 0 0 0 rgba(65,105,225,.38); } 70%, 100% { box-shadow: 0 0 0 9px rgba(65,105,225,0); } }
@keyframes liveShine { 0% { background-position: 100% 0; } 78%, 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
  .live, .feed { transition: opacity 1.1s ease-in-out; }
  .live .dot { animation: liveRing 4.2s ease-out infinite; }
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .feed-line {
      background: linear-gradient(100deg, rgba(243,242,242,.62) 0%, rgba(243,242,242,.62) 40%, rgba(243,242,242,.98) 50%, rgba(243,242,242,.62) 60%, rgba(243,242,242,.62) 100%) 100% 0 / 300% 100% no-repeat;
      -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
      animation: liveShine 6.5s linear infinite;
    }
  }
}
@media (forced-colors: active) { .feed-line { background: none; -webkit-text-fill-color: currentColor; animation: none; } }

/* ── modals ──────────────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; display: flex; padding: 20px; overflow: auto; }
.modal-lock { z-index: 5; background: rgba(15,14,14,.72); backdrop-filter: blur(8px); }
.modal-task { z-index: 6; background: rgba(15,14,14,.78); backdrop-filter: blur(10px); }
.modal-signin, .modal-pay, .modal-access { z-index: 7; background: rgba(15,14,14,.8); backdrop-filter: blur(12px); }
.modal-checkout { z-index: 8; background: rgba(15,14,14,.82); backdrop-filter: blur(12px); }
.modal-join { z-index: 9; background: rgba(15,14,14,.82); backdrop-filter: blur(12px); }
.box { background: var(--paper); color: var(--ink); position: relative; max-width: 100%; min-width: 0; overflow-wrap: anywhere; margin: auto; }
.box h2 { line-height: 1.1; }
.sub { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.sub-145 { font-size: 14.5px; }
.sub-135 { font-size: 13.5px; line-height: 1.55; }
.sub-15 { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.left { text-align: left; }
.fine { margin: 18px 0 0; font-size: 13px; color: var(--muted); }
.fine-12 { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.fine-13 { font-size: 13px; color: var(--muted); }
.close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; }
.close-ring { position: static; flex: none; width: 28px; height: 28px; border: 1px solid rgba(32,30,29,.2); color: var(--ink); font-size: 14px; }
.close-32 { width: 32px; height: 32px; font-size: 16px; }
.close-z { z-index: 1; }
/* back arrow: top-left of every card except the lot task card, which keeps its X */
.back { position: absolute; top: 12px; left: 12px; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1px solid rgba(32,30,29,.2); background: rgba(243,242,242,.7); color: var(--ink); transition: background .15s, border-color .15s; }
.back:hover { background: #fff; border-color: rgba(32,30,29,.45); }
.back-light { border-color: rgba(243,242,242,.32); background: rgba(243,242,242,.08); color: var(--paper); }
.back-light:hover { background: rgba(243,242,242,.18); border-color: rgba(243,242,242,.6); }
.back-z { z-index: 2; }
/* U, 7 October 2026: the profile's questions in a card of their own on a desktop (#modal-profile), dark like
   the column's cards so the chips and the field read as they do there */
.modal-profile { z-index: 7; background: rgba(15,14,14,.8); backdrop-filter: blur(12px); }
.box-profile { width: 520px; padding: 56px 28px 24px; border: 1px solid rgba(243,242,242,.16); border-radius: var(--r1); background: #1b1a19; color: var(--paper); box-shadow: 0 60px 120px -40px rgba(0,0,0,.95); animation: rise .45s cubic-bezier(.2,.7,.2,1); }
.box-profile h2 { margin: 0; font-size: 26px; color: #fff; }
.box-profile .group-label:first-child { margin-top: 16px; }
/* "Already in line? Sign in": a button people can see, not a line of text */
.btn-secondary { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 100%; margin-top: 12px; min-height: 46px; padding: 6px 14px; border: 1.5px solid rgba(32,30,29,.3); border-radius: var(--r1); background: #fff; color: var(--ink); font-weight: 600; font-size: 14px; transition: border-color .15s, background .15s, box-shadow .15s; }
.btn-secondary:hover { border-color: var(--ink); box-shadow: 0 2px 8px rgba(32,30,29,.08); }
.btn-secondary-inline { width: auto; margin-top: 0; min-height: 38px; padding: 0 14px; font-size: 13px; }
.btn-wide { display: block; width: 100%; }
.btn-48 { height: 48px; border-radius: var(--r1); font-size: 15px; }
.btn-46 { height: 46px; padding: 0 24px; font-size: 15px; white-space: nowrap; }
.btn-52 { height: 52px; border-radius: var(--r1); font-size: 16px; }
.btn-ink { border: 0; background: var(--ink); color: #fff; font-weight: 600; }
.row-top { align-items: flex-start; gap: 14px; text-align: left; }
.row-form { display: flex; gap: 8px; }
.row-form input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border: 1px solid rgba(32,30,29,.32); border-radius: var(--r1); background: #fff; font-size: 15px; color: var(--ink); outline: none; }
.row-form input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(65,105,225,.15); }
.row-form input.err { border-color: #e05555; }
.row-form button { height: 46px; padding: 0 18px; border: 0; border-radius: var(--r1); background: var(--blue); color: #fff; font-weight: 600; font-size: 15px; white-space: nowrap; transition: background .2s; }
.row-form button:hover { background: var(--blue-hover); }
.check { display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; animation: pop .5s ease-out; margin: 0 auto; }
.check-56 { width: 56px; height: 56px; margin-top: 22px; }
.check-64 { width: 64px; height: 64px; }
/* U, 6 October 2026 (Henry): his blue BlueMesa heads the grey cards (sign-in, access), the mark over the
   name as in his artwork, in the page's serif; the join card's built-by line takes the mark alone */
.bm-lockup { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 auto; }
.bm-lockup img { display: block; width: 120px; height: auto; } /* the name runs the mark's width, as in Henry's artwork */
.bm-word { font-family: var(--serif); font-size: 15px; line-height: 1; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }

/* lock */
.box-lock { width: 476px; padding: 28px 28px 24px; border-radius: var(--r1); box-shadow: 0 60px 120px -40px rgba(0,0,0,.9); text-align: center; animation: pop .5s ease-out; }
.lock-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--paper); }
.box-lock h2 { margin: 14px 0 0; font-size: 26px; line-height: 1.15; }
.box-lock p { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.box-lock .row-form { margin-top: 18px; }
.box-lock .btn-secondary { margin-top: 12px; }
.box-signin .btn-secondary { margin-top: 14px; }

/* sign in */
.box-signin { width: 520px; border-radius: var(--r1); box-shadow: 0 60px 120px -40px rgba(0,0,0,.95); padding: 40px 40px 32px; animation: rise .45s cubic-bezier(.2,.7,.2,1); text-align: center; }
.box-signin h2 { margin: 22px 0 0; font-size: 30px; }
.input-center { display: block; width: 100%; margin-top: 26px; height: 54px; padding: 0 18px; border: 1px solid rgba(32,30,29,.25); border-radius: var(--r1); background: #fff; font-size: 17px; color: var(--ink); text-align: center; outline: none; transition: border-color .2s, box-shadow .2s; }
.input-center:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(65,105,225,.15); }
.input-center.err { border-color: #e05555; }
.box-signin .btn-wide { margin-top: 10px; height: 54px; border-radius: var(--r1); font-size: 16px; }
/* access-code card (2026-09-09): the sign-in card's shape, a second field for the code */
.access-link { display: block; margin: 14px auto 0; font-size: 13.5px; }
.box-access .input-center + .input-center { margin-top: 10px; }
.access-input { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 16px; letter-spacing: .12em; text-transform: uppercase; }
.access-input::placeholder { font-family: var(--sans); letter-spacing: 0; text-transform: none; }
.access-err { margin: 10px 0 0; font-size: 13.5px; line-height: 1.4; color: #c43b3b; }
/* R36: "Request access" under the unlock button, the hero's Learn more link set in ink for the paper card */
.access-request { display: inline-block; margin-top: 14px; font-size: 14px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--muted) 55%, transparent); transition: color .2s, text-decoration-color .2s; }
.access-request:hover { color: var(--ink); text-decoration-color: var(--ink); }
/* the admitted state on the position page: the pill says so and the assistant is one button away */
.pill-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.access-link-pos { display: none; margin-top: 8px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; color: rgba(243,242,242,.7); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.access-open { height: 36px; padding: 0 16px; border-radius: var(--r1); font-size: 14px; white-space: nowrap; }
/* Explore sits beside the position, below the batch detail (Carl, 12 October 2026: "below the batch number"). */
.pos-row { flex-wrap: wrap; }
.pos-row .pill-row { min-width: 0; max-width: 100%; }
.pos-row .pill-b { max-width: 100%; white-space: normal; }
.explore-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 48px; height: auto; max-width: 100%; padding: 8px 10px 8px 18px;
  border: 1px solid color-mix(in srgb, var(--blue-light) 72%, transparent);
  border-radius: var(--r1); background-color: var(--ground); background-image: linear-gradient(120deg, rgba(65,105,225,.55), rgba(65,105,225,.35));
  color: var(--paper); font-size: 14px; font-weight: 500; letter-spacing: .01em; white-space: normal;
  box-shadow: inset 0 1px 0 rgba(243,242,242,.06), 0 6px 20px rgba(0,0,0,.16);
  transition: background-color .2s, border-color .2s, box-shadow .2s;
}
.explore-arrow { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: var(--r1); background: rgba(65,105,225,.6); color: #fff; }
.explore-arrow svg { transition: transform .2s; }
.explore-btn:hover { border-color: var(--blue-light); background-color: color-mix(in srgb, var(--blue) 45%, var(--ground)); box-shadow: 0 0 20px rgba(65,105,225,.25); }
.explore-btn:hover .explore-arrow svg { transform: translateX(2px); }
.explore-btn:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 4px; }
.explore-btn:disabled { cursor: wait; opacity: .65; }
@media (prefers-reduced-motion: reduce) { .explore-btn, .explore-arrow svg { transition: none; } .explore-btn:hover .explore-arrow svg { transform: none; } }
/* 13 October 2026 (Carl: "Explore the auctioneer button should be a bit larger and longer"). From 721px up the button goes from 230.8 x 48 to
   280 x 56: the pill above it is 410px wide, so there is room. min-width is the length, and it holds while the label reads "Opening…". A phone keeps
   its size, because the button has to sit beside the number there (it already drops under it at 360px). */
@media (min-width: 721px) {
  .explore-btn { min-width: min(280px, 100%); min-height: 56px; gap: 32px; padding: 9px 10px 9px 24px; font-size: 16px; }
  .explore-arrow { width: 36px; height: 36px; }
  .explore-arrow svg { width: 22px; height: 22px; }
}

.navlink.busy { opacity: .6; pointer-events: none; }
.code-cells { position: relative; display: flex; justify-content: center; gap: 10px; margin-top: 26px; cursor: text; }
.code-cells span { width: 52px; height: 64px; display: grid; place-items: center; border: 1.5px solid rgba(32,30,29,.2); border-radius: var(--r1); background: #fff; font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; transition: border-color .15s, box-shadow .15s; }
.code-cells span.filled { border-color: var(--ink); }
.code-cells span.active { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(65,105,225,.15); }
.code-cells.err span { border-color: var(--red); }
/* 17 October 2026 (Henry: "on mobile view it doesnt let a paste into the otp code box, doesnt give the option on iphone"). The
   field was a 1px speck in the card's corner, so a long press on the boxes landed on a picture of boxes, and an iPhone offered
   nothing. It now lies over the six boxes, the whole row, unseen (no text, no caret, no fill, no ring of its own: the boxes draw
   all of that) but there to be pressed: a tap focuses it, a long press offers Paste, and a code from Mail fills it.
   16px, or an iPhone zooms the page into it. */
.code-input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; outline: none; background: transparent; color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent; font-size: 16px; cursor: text; }
.code-input::selection { background: transparent; }
.code-hint { margin-top: 22px; font-size: 13px; color: var(--muted); min-height: 20px; }
.code-actions { display: flex; justify-content: center; gap: 18px; margin-top: 8px; font-size: 13px; }

/* join: checking / kind / upsell */
.box-join { width: 540px; border-radius: var(--r1); box-shadow: 0 60px 120px -40px rgba(0,0,0,.95); padding: 40px 40px 32px; animation: rise .45s cubic-bezier(.2,.7,.2,1); text-align: center; min-height: 260px; display: flex; flex-direction: column; justify-content: center; }
.orb-wrap { display: grid; place-items: center; }
#join-step-checking .sub { margin-top: 20px; }
.box-join h2 { font-size: 26px; line-height: 1.15; }
.kind-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.kind { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 14px; border: 2px solid rgba(32,30,29,.18); border-radius: var(--r1); background: #fff; color: var(--ink); box-shadow: 0 2px 6px rgba(32,30,29,.06); transition: border-color .18s, box-shadow .18s, transform .18s; }
.kind:hover { border-color: var(--blue); box-shadow: 0 6px 18px rgba(65,105,225,.18); transform: translateY(-2px); }
.kind-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--tint); color: var(--blue); }
.kind-name { font-weight: 600; font-size: 15.5px; }
.kind-sub { font-size: 12.5px; color: var(--muted); }
.upsell h2 { margin: 12px 0 0; font-size: 23px; line-height: 1.2; }
.upsell .row-top { padding-left: 36px; min-height: 20px; }
.toggle { display: flex; gap: 3px; margin-top: 20px; padding: 3px; border-radius: var(--r1); background: rgba(32,30,29,.06); }
.toggle button { flex: 1; height: 34px; border: 0; border-radius: var(--r1); font-size: 13px; font-weight: 600; background: transparent; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 6px; transition: background .2s, color .2s; }
.toggle button.on { background: #fff; color: var(--ink); }
.save-tag { font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: var(--r1); background: rgba(65,105,225,.15); color: var(--blue-hover); }
.toggle button.on .save-tag { background: var(--blue); color: #fff; }
.price-box { margin-top: 16px; border: 1.5px solid var(--blue); border-radius: var(--r1); padding: 16px 18px; background: #fff; text-align: left; }
.row-base { align-items: baseline; }
.price-main { display: flex; align-items: baseline; gap: 8px; }
.now { font-weight: 600; font-size: 30px; letter-spacing: -.01em; }
.per { font-size: 13px; color: var(--muted); }
.was { font-size: 13px; color: var(--muted); text-decoration: line-through; }
#upsell-reserve { margin-top: 14px; }
.skip { display: block; width: 100%; margin-top: 10px; font-size: 13px; }
.built-by { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(32,30,29,.1); font-size: 11.5px; color: #8a8884; text-decoration: underline; }
.box-join.checking .built-by { margin-top: 44px; }
.built-by img { flex: none; width: 28px; height: auto; }

/* task */
.box-task { width: 860px; border-radius: var(--r1); box-shadow: 0 60px 120px -40px rgba(0,0,0,.9); overflow: hidden; animation: rise .45s cubic-bezier(.2,.7,.2,1); display: grid; grid-template-columns: 260px 1fr; }
.task-photo { position: relative; min-height: 100%; }
.task-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.task-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 20px 20px; background: linear-gradient(180deg, rgba(15,14,14,0), rgba(15,14,14,.9)); color: var(--paper); }
.task-cap .cat { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(243,242,242,.7); }
.task-cap .cap { display: block; margin-top: 4px; font-size: 15px; line-height: 1.3; }
.task-form, .task-gate { padding: 36px 40px 32px; }
.task-gate { display: flex; flex-direction: column; justify-content: center; }
.box-task .eyebrow-blue { font-size: 11.5px; }
.box-task h2 { margin: 8px 0 0; font-size: 28px; }
/* U, 6 October 2026: the lot card is the app's composer in small (app.css .composer, .mode-switch): Search or
   Assistant, and the query for this lot written out in it (waitlist.js ASK) */
.ask-composer { margin-top: 26px; padding: 10px 12px 6px; border: 1.5px solid rgba(32,30,29,.16); border-radius: var(--r1); background: #fff; transition: border-color .18s, box-shadow .18s; }
.ask-composer:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(65,105,225,.15); }
.mode-switch { display: inline-flex; padding: 2px; border: 1px solid rgba(32,30,29,.16); border-radius: var(--r1); background: #fff; }
.mode-opt { height: 28px; padding: 0 12px; border: 0; border-radius: var(--r1); background: none; font-size: 12.5px; font-weight: 600; color: var(--muted); transition: background .16s, color .16s; }
.mode-opt:hover { color: var(--ink); }
.mode-opt[aria-pressed="true"] { background: var(--tint); color: var(--blue-hover); }
.mode-opt:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
#task-note { display: block; width: 100%; margin-top: 8px; padding: 4px 2px 6px; border: 0; background: none; font-size: 17px; line-height: 1.45; color: var(--ink); resize: none; outline: none; }
.task-foot { align-items: center; gap: 16px; margin-top: 20px; }
.gate-form { margin-top: 24px; }
.gate-form input { height: 50px; padding: 0 16px; font-size: 16px; }
.gate-form button { height: 50px; padding: 0 22px; font-size: 16px; }
.gate-foot { margin-top: 14px; font-size: 13px; color: var(--muted); }

/* subscribe prompt */
.box-pay { width: 532px; border-radius: var(--r1); box-shadow: 0 60px 120px -40px rgba(0,0,0,.95); padding: 56px 36px 28px; animation: rise .45s cubic-bezier(.2,.7,.2,1); }
.box-pay.soon .plan-box { border-style: dashed; border-color: rgba(32,30,29,.25); color: var(--muted); }
.box-pay .eyebrow-blue { font-size: 11.5px; }
.box-pay h2 { margin: 8px 0 0; font-size: 28px; }
.plan-box { margin-top: 22px; border: 1.5px solid var(--blue); border-radius: var(--r1); padding: 16px 18px; background: #fff; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.plan-name { font-weight: 600; font-size: 17px; }
.plan-sub { margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.plan-price { text-align: right; }
.plan-now { font-weight: 600; font-size: 26px; letter-spacing: -.01em; }
.per-13 { font-size: 13px; font-weight: 400; }
.plan-was { font-size: 12px; color: var(--muted); text-decoration: line-through; }
#pay-subscribe { margin-top: 12px; }
.pay-foot { align-items: center; margin-top: 14px; font-size: 13px; color: var(--muted); }

/* checkout */
.box-checkout { width: 820px; border-radius: var(--r1); box-shadow: 0 60px 120px -40px rgba(0,0,0,.95); overflow: hidden; animation: rise .45s cubic-bezier(.2,.7,.2,1); display: grid; grid-template-columns: 320px 1fr; }
.co-summary { background: var(--ink); color: var(--paper); padding: 60px 30px 28px; display: flex; flex-direction: column; }
.brand-15 img { width: 32px; height: 32px; }
.wordmark-15 { font-weight: 600; font-size: 15px; }
.co-eyebrow { margin-top: 34px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(243,242,242,.6); }
.big2 { margin-top: 6px; font-weight: 600; font-size: 54px; line-height: 1; letter-spacing: -.02em; }
.co-sub { margin-top: 8px; font-size: 13.5px; color: rgba(243,242,242,.7); }
.co-bullets { margin-top: auto; padding-top: 26px; display: grid; gap: 10px; font-size: 13.5px; color: rgba(243,242,242,.85); }
.co-bullets div { display: flex; gap: 10px; align-items: flex-start; }
.dot-6 { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); margin-top: 7px; }
.co-foot { margin-top: 22px; padding-top: 14px; border-top: 1px solid rgba(243,242,242,.14); font-size: 12px; color: rgba(243,242,242,.55); }
.co-foot b { color: var(--paper); font-weight: 600; }
.co-pay { padding: 34px 36px 28px; }
.co-pay h2 { font-size: 26px; }
.co-mount { margin-top: 18px; min-height: 260px; }
.co-loading { margin: 0; font-size: 14px; color: var(--muted); }
.co-dev { display: grid; gap: 10px; }
.co-dev .btn-primary { height: 52px; border-radius: var(--r1); font-size: 16px; }
.co-done { padding: 34px 36px 28px; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.co-done h2 { margin: 20px 0 0; font-size: 30px; }
.co-done .sub-15 b { font-weight: 600; color: var(--ink); }
#co-back { margin-top: 24px; }

/* thinking orb: CSS stand-in from DESIGN_SPEC.md (per-item hue via --h) */
.orb { position: relative; display: block; width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 35% 30%, oklch(92% .04 var(--h)) 0%, oklch(70% .16 var(--h)) 45%, oklch(42% .2 var(--h)) 100%);
  box-shadow: 0 10px 30px -8px oklch(60% .2 var(--h) / .7), inset 0 -6px 14px oklch(30% .15 var(--h) / .6); }
.orb-64 { width: 64px; height: 64px; }
.orb i { position: absolute; inset: 0; border-radius: 50%; filter: blur(4px); mix-blend-mode: screen; }
.orb i:nth-child(1) { background: radial-gradient(circle at 50% 50%, oklch(95% .05 calc(var(--h) + 30)) 0%, transparent 70%); transform: scale(.9); animation: orbA calc(var(--d) + 1s) ease-in-out infinite; }
.orb i:nth-child(2) { background: radial-gradient(circle at 50% 50%, oklch(75% .2 calc(var(--h) - 40)) 0%, transparent 70%); transform: scale(.8); animation: orbB calc(var(--d) + 2s) ease-in-out infinite; }
.orb i:nth-child(3) { background: radial-gradient(circle at 50% 50%, oklch(85% .12 calc(var(--h) + 70)) 0%, transparent 70%); transform: scale(.7); animation: orbC calc(var(--d) + 3s) ease-in-out infinite; }

.toast { position: fixed; left: 50%; bottom: 28px; bottom: calc(28px + var(--ac-consent-h, 0px)); transform: translateX(-50%); z-index: 20; padding: 10px 16px; border-radius: var(--r1); background: var(--paper); color: var(--ink); font-size: 14px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.9); animation: rise .3s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .dot, .pulse, .wallE .belt, .orb i, .check, .box, .rise, .toast { animation: none !important; }
  .lot { transition: none; }
  .gvl .p-head, .gvl .p-handle, .gvl .p-knob, .gvl .p-block, .gvl .gavel { animation: none; }
  .gvl .draw { stroke-dashoffset: 0; }
  .gvl .gavel { transform: rotate(-56deg); }
  .gvl .p-detail { animation: none; opacity: 1; }
  .gvl-bar i { transition: none; }
  .acct-menu { animation: none; }
  .acct-btn, .acct-chev, .acct-item { transition: none; }
}

/* short desktop windows: the hero plus the feature tiles still fit above the fold */
@media (min-width: 901px) and (max-height: 720px) {
  .hero-body { padding-top: 64px; }
  .hero-body h1 { font-size: 64px; margin-top: 12px; }
  .lede { margin-top: 10px; font-size: 16px; }
  .hero-form { margin-top: 16px; }
  .hero-form input, .hero-form button { height: 44px; }
  .hero-foot { margin-top: 8px; }
  .features { margin-top: 30px; }
  .feature { font-size: 12px; padding: 6px 12px; }
  .case-pill { margin-top: 20px; }
}

/* ── narrower than the 1200px design ─────────────────────────────────── */
@media (max-width: 1180px) {
  .wall4 .colwrap.outer { display: none; }
}
/* U, 7 October 2026: the position page is one column, and scrolls, at 900px and under (it was 1100px) */
@media (max-width: 900px) {
  .stage-position { display: block; min-height: 100vh; padding: 88px 24px 90px; }
  .col-left { max-width: 620px; }
  .live-bar { left: 24px; right: 24px; }
  .big { font-size: 140px; }
}
/* U, 7 October 2026 (Henry, at 989 by 844): "on web, can we just have one page please no scroll or overflow".
   From 901px the position page is one screen: its row is the window's height between the nav and the live
   line, Discover's card takes what that leaves (waiting-room.css), the number is sized to the window, and the
   profile's questions open in a card of their own (#modal-profile). A window too short even for that grows
   the page rather than cutting anything off. */
@media (min-width: 901px) {
  .stage-position { --pt: clamp(76px, 10.5vh, 96px); --pb: clamp(72px, 9vh, 96px); grid-template-rows: minmax(calc(100vh - var(--pt) - var(--pb) - var(--ac-consent-h, 0px)), auto); align-items: stretch; padding-top: var(--pt); padding-bottom: var(--pb); }
  .big { font-size: clamp(96px, 19vh, 184px); }
  .profile .profile-q { display: none; }
  .profile > .row { align-items: center; }
  .profile .tag-blue { margin-left: auto; }
  .profile-open { display: block; }
}
/* between 901 and 1100px the two columns share the width, and the number and its pill fit theirs */
@media (min-width: 901px) and (max-width: 1100px) {
  .stage-position { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; padding-left: 32px; padding-right: 40px; }
  .live-bar { left: 32px; right: 40px; }
  .big { font-size: clamp(96px, min(19vh, 12vw), 184px); }
  .pos-row .pill-b { white-space: normal; }
  .pos-row .pill-b b { white-space: nowrap; } /* a batch or a countdown is never split */
}
/* a short window with the reserve card showing too (reserve is off in production on 7 October): the batch
   bar and the line under the invite link step aside, as on a phone, and the cards close up, so the column
   still fits */
@media (min-width: 901px) and (max-height: 760px) {
  .col-left:has(#reserve-card:not([hidden])) :is(.bar, .bar-labels, #invite-foot) { display: none; }
  .col-left:has(#reserve-card:not([hidden])) .invite { margin-top: 12px; }
  .col-left:has(#reserve-card:not([hidden])) :is(.reserve-card, .profile) { margin-top: 8px; }
}
@media (max-width: 900px) {
  .wall4 .colwrap { display: none; }
  .gvl { display: none; }
  .particles { display: block; }
  .box-task { grid-template-columns: 1fr; width: 560px; }
  .task-photo { height: 200px; }
  .box-checkout { grid-template-columns: 1fr; width: 480px; }
  .co-summary .co-bullets { padding-top: 18px; }
}
@media (max-width: 720px) {
  .nav { left: 18px; right: 18px; gap: 8px; }
  .nav .links { gap: 16px; font-size: 14px; }
  .hero-body { padding: 96px 20px 40px; justify-content: flex-start; }
  .hero-body h1 { font-size: 52px; }
  .lede { font-size: 17px; }
  .hero-form { flex-direction: column; width: 100%; }
  .hero-form input { flex: none; width: 100%; }
  .wordmark { display: none; }
  .nav { grid-template-columns: auto 1fr auto; }
  .nav .links { justify-self: center; }
  .access-link-pos { display: inline-block; }
  .access-link-pos[hidden] { display: none; }
  .case-pill { display: none; }
  .case-line { display: block; }
  /* U: the hero grows with the lot row under it, so a short phone scrolls rather than cutting it off */
  .stage-join .hero-body { position: relative; min-height: 100vh; }
  .lot-wheel { display: block; flex: none; width: 100vw; margin-top: 48px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; pointer-events: auto; } /* U: 20px further from the line above (Henry); 17 October: a scroller, a finger moves it */
  .features { width: 100%; margin-top: 26px; }
  .feature { font-size: 12px; padding: 9px 11px; gap: 8px; }
  .stage-position { padding: 84px 18px 36px; }
  /* U, 6 October 2026 (Henry): on a phone the position comes first, with Explore the auctioneer beside it
     when there is beta access; no pill, no batch bar, and no line under the invite link */
  .pill-b, .bar, .bar-labels, #invite-foot { display: none; }
  .pos-row .pill-row { padding-bottom: 8px; }
  .big { font-size: 104px; }
  .ahead { font-size: 16px; }
  .reserve-row { flex-direction: column; align-items: stretch; }
  .live-bar { position: static; margin-top: 36px; flex-wrap: wrap; gap: 8px; }
  .feed { flex-basis: 100%; white-space: normal; }
  .modal { padding: 12px; }
  .box-signin, .box-join, .box-pay, .box-lock { padding: 28px 22px 24px; }
  .kind-grid { grid-template-columns: 1fr; }
  .task-form, .task-gate { padding: 24px 20px; }
  .task-foot, .gate-foot { flex-direction: column; align-items: stretch; }
  .code-cells { gap: 6px; }
  .code-cells span { width: 44px; height: 56px; font-size: 24px; }
}
@media (max-width: 640px) {
  .nav .brand img { width: 32px; height: 32px; } /* R36 team spec: the nav icon is 32px on phones */
}
/* R182 (21 October 2026): Prices, the header's fourth link (the SEO plan: the home page links /prices/), from a 410px
   screen. On a narrower phone the three links and Sign in fill the header: measured in Instrument Sans, at 390px Prices
   would put Sign in 16px from the edge and 8px from it, at 375px against the edge, and at 360px 14px past it. The docs
   page links Prices from its footer at every width. */
@media (max-width: 409px) {
  .nav .nav-prices { display: none; }
}

/* ── the dark cards (R145, 17 October 2026) ─────────────────────────────────────────────────────────────────────────
   Henry, of the light grey cards and Carl's dark one (the six-digit code screen, signin-code.css): "i think we should
   stick to carls, dark card version for all the sign in and other routing, can we make sure we use the left dark
   screenshot design for all grey card styles, the buttons should stay as is, just theme for consistency", and of the
   sign-in card's last step: "the same as the you are in card, batch 1 of 20, can we go dark there as well please".

   Every light card takes the code card's own surface, edge and colours: Beta Users Only (lock), Welcome back and
   You are in. (signin), Finding your place and the plan offer (join), a lot's task and its sign-up step (task), and Do
   you want to subscribe (pay). Each card keeps its own layout and type sizes. The buttons are as they were: the blue ones,
   the white secondary ones and the plan toggle's white pill; the round Back button keeps its shape and takes the light
   ring it already wears on the profile card and the checkout (.back-light). The fields take the access card's dark field, the six boxes'
   edge and ring. The profile card was dark already, a flat #1b1a19: it takes the same surface and edge. Left as they are:
   the subscribe card, whose light pane is Carl's own mockup, and the checkout, whose light pane is Stripe's form. The
   rounding stays the page's one rounding, var(--r1) (Carl, 12 October: one border radius for the whole site), on the
   cards and the fields alike; the code card itself is 6px with 4px fields (signin-code.css), the one place it differs. */
:is(.box-lock, .box-signin, .box-join, .box-task, .box-pay) {
  --dk-fg: #fff; --dk-sub: #c3c9d3; --dk-dim: #aeb4bc; --dk-place: #7d838b;
  --dk-line: rgba(255,255,255,.24); --dk-rule: rgba(255,255,255,.15); --dk-edge: #4c4e50; --dk-fill: rgba(255,255,255,.012);
  --dk-blue: #4678da; --dk-blue-hi: #7ea2f0; --dk-ring: #4373fa; --dk-err: #d9534f;
  border: 1px solid var(--dk-line); color: var(--dk-fg);
  background: linear-gradient(180deg, #171718 0%, #161617 33%, #131415 62%, #121315 100%);
}
.box-profile { border-color: rgba(255,255,255,.24); background: linear-gradient(180deg, #171718 0%, #161617 33%, #131415 62%, #121315 100%); }

/* words */
:is(.box-lock, .box-signin, .box-join, .box-task, .box-pay) :is(.sub, .sub-15, .plan-sub, .fine-12) { color: var(--dk-sub); }
:is(.box-lock, .box-signin, .box-join, .box-task, .box-pay) :is(.fine-13, .per, .was, .plan-was, .pay-foot, .gate-foot) { color: var(--dk-dim); }
.box-lock p { color: var(--dk-sub); }
:is(.box-lock, .box-signin, .box-join, .box-task, .box-pay) .eyebrow-blue { color: var(--dk-blue); }
:is(.box-lock, .box-signin, .box-join, .box-task, .box-pay) .linkish-blue { color: var(--dk-blue); }
:is(.box-lock, .box-signin, .box-join, .box-task, .box-pay) .linkish-blue:hover { color: var(--dk-blue-hi); }
.box-signin .bm-word { color: var(--dk-fg); } /* Henry's blue mark stays; its name is light on the dark */
.box-join .built-by { border-top-color: var(--dk-rule); color: var(--dk-dim); }

/* the round Back and Close, and the lock: their shapes, in light lines */
:is(.box-lock, .box-signin, .box-join, .box-pay) .back { border-color: rgba(243,242,242,.32); background: rgba(243,242,242,.08); color: var(--paper); }
:is(.box-lock, .box-signin, .box-join, .box-pay) .back:hover { border-color: rgba(243,242,242,.6); background: rgba(243,242,242,.18); }
.box-task .close-ring { border-color: var(--dk-line); background: none; color: var(--dk-fg); }
.box-task .close-ring:hover { border-color: rgba(255,255,255,.55); }
.box-lock .lock-icon { border: 1px solid var(--dk-line); background: rgba(255,255,255,.06); color: var(--dk-fg); }

/* the fields: the access card's (signin-code.css .code-field), the six boxes' edge and ring */
:is(.box-lock, .box-signin, .box-join, .box-task, .box-pay) :is(.input-center, .row-form input) { border: 1px solid var(--dk-edge); background: var(--dk-fill); color: var(--dk-fg); box-shadow: none; }
:is(.box-lock, .box-signin, .box-join, .box-task, .box-pay) :is(.input-center, .row-form input)::placeholder { color: var(--dk-place); opacity: 1; }
:is(.box-lock, .box-signin, .box-join, .box-task, .box-pay) :is(.input-center, .row-form input):focus { border-color: var(--dk-ring); box-shadow: inset 0 0 0 1px var(--dk-ring), 0 0 0 1px var(--dk-ring); }
:is(.box-lock, .box-signin, .box-join, .box-task, .box-pay) :is(.input-center, .row-form input).err { border-color: var(--dk-err); box-shadow: none; }
:is(.box-lock, .box-signin, .box-join, .box-task, .box-pay) :is(.input-center, .row-form input).err:focus { box-shadow: inset 0 0 0 1px var(--dk-err), 0 0 0 1px var(--dk-err); }
:is(.box-lock, .box-signin, .box-join, .box-task, .box-pay) :is(.input-center, .row-form input):-webkit-autofill { -webkit-text-fill-color: var(--dk-fg); caret-color: var(--dk-fg); transition: background-color 600000s 0s, color 600000s 0s; }

/* a lot's task: the composer is a dark field too, and its Search or Assistant switch reads on it */
.box-task .ask-composer { border: 1px solid var(--dk-edge); background: var(--dk-fill); }
.box-task .ask-composer:focus-within { border-color: var(--dk-ring); box-shadow: inset 0 0 0 1px var(--dk-ring), 0 0 0 1px var(--dk-ring); }
.box-task .mode-switch { border-color: var(--dk-edge); background: none; }
.box-task .mode-opt { color: var(--dk-dim); }
.box-task .mode-opt:hover { color: var(--dk-fg); }
.box-task .mode-opt[aria-pressed="true"] { background: rgba(67,115,250,.22); color: var(--dk-fg); }
.box-task #task-note { color: var(--dk-fg); }

/* the plan offer and the plan: the blue edge stays, the fill goes dark */
.box-join .toggle { background: rgba(255,255,255,.06); }
.box-join .toggle button { color: var(--dk-dim); }
.box-join .toggle button.on { color: var(--ink); }
.box-join .save-tag { background: rgba(67,115,250,.18); color: var(--dk-blue-hi); }
.box-join .toggle button.on .save-tag { background: var(--blue); color: #fff; }
.box-join .price-box, .box-pay .plan-box { background: rgba(255,255,255,.03); }
.box-pay.soon .plan-box { border-color: var(--dk-line); color: var(--dk-dim); }

/* two things the cards' screenshots showed on narrower screens, both older than R145. The task's sign-up step: from 900px down the card
   is one column, and that column was as wide as the step's email row (the field and Request beta access side by side, 575px), so a
   560px card, or a phone, cut off the button and the Close. The column now takes the card's width, and on a phone the field and its
   button stack, as the landing page's own form does. And on a phone the subscribe offer's eyebrow sat under the round Back: it moves
   beside it, as the plan offer's does (.upsell .row-top). */
@media (max-width: 900px) { .box-task { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .gate-form { flex-direction: column; }
  .gate-form input { flex: none; width: 100%; }
  .box-pay #pay-eyebrow { padding-left: 36px; min-height: 20px; }
}

/* U, 7 October 2026 (Henry): "placeholders on text fields should go away after text fields have been clicked
   on". A field's placeholder clears once the field has focus, not at the first letter typed. Last in the file,
   after every placeholder colour above. */
input:focus::placeholder, textarea:focus::placeholder { color: transparent; }