/* ============================================================
   LOCKWORK, the brand site (one responsive page, phone to desktop)
   Dark, one grotesk, one ember accent. Sales first: the product is
   shown, the offer is plain, nothing moves unless it helps you decide.
   ============================================================ */

/* Archivo, self-hosted (variable: weight 100–900, width 62–125%).
   No request ever leaves this origin: the brand promise, enforced. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #070707;
  --bg-2: #0d0d0d;
  --ink: #f2efe9;
  --dim: #9a978f;
  --line: rgba(242, 239, 233, 0.16);
  --line-strong: rgba(242, 239, 233, 0.38);
  --accent: #ff5a1f;
  --accent-hi: #ff7a47;
  --bone: #eceae3;
  --bone-ink: #101010;
  --bone-dim: #6d6a62;
  --bone-line: rgba(16, 16, 16, 0.16);
  --pad: clamp(20px, 4vw, 64px);
  --bar-h: 64px;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 10px); -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
::selection { background: var(--accent); color: #000; }

sup { font-size: 0.55em; color: var(--dim); margin-left: 0.35em; font-weight: 500; }
.dim { color: var(--dim); }
.tiny { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; }

/* ---------- shared furniture ---------- */
.meta-row {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dim); font-weight: 500;
}
.sect-light .meta-row { border-top-color: var(--bone-line); color: var(--bone-dim); }
/* A section marker with only its name left: left-aligned deliberately, rather than a
   lone item floated by space-between. */
.meta-row-solo { justify-content: flex-start; }

/* ---------- buttons ---------- */
.btn-solid, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px;
  padding: 12px 20px;
  font-family: var(--font); font-size: 12px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; line-height: 1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--accent);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.btn-solid { background: var(--accent); color: #000; }
.btn-solid:hover { background: var(--accent-hi); border-color: var(--accent-hi); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.btn-lg { padding: 17px 26px; font-size: 13px; }
.btn-solid:focus-visible, .btn-ghost:focus-visible, .pack:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.btn-solid .arrow, .btn-ghost .arrow { font-size: 14px; font-weight: 700; transition: transform 0.2s ease; }
.btn-solid:hover .arrow, .btn-ghost:hover .arrow { transform: translate(2px, -2px); }
.sect-light .btn-ghost { color: var(--bone-ink); border-color: var(--bone-line); }

/* signed-in / signed-out variants: main.js sets body.is-signed-in from lockwork:auth */
body.is-signed-in [data-when="out"], body:not(.is-signed-in) [data-when="in"] { display: none !important; }

/* ---------- reveals: a short fade-up, nothing more ---------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: var(--d, 0s);
}
.reveal.in { opacity: 1; transform: none; }
/* without JS (or before it runs) nothing may stay invisible */
html.no-js .reveal { opacity: 1; transform: none; }

/* ============================================================
   FIXED HEADER
   ============================================================ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
  height: calc(var(--bar-h) + var(--sat)); padding: var(--sat) var(--pad) 0;
  background: #070707;
  border-bottom: 1px solid var(--line);
}
.topbar-brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink); text-decoration: none;
  font-weight: 800; letter-spacing: 0.04em; font-size: 15px;
  white-space: nowrap;
}
/* the stencil wordmark (design/logo, 2026-09-14): the SVG carries its own colour */
.topbar-logo { display: block; height: 20px; width: auto; }
.footer-logo { display: block; width: clamp(220px, 32vw, 380px); height: auto; }
.brand-glyph {
  width: 11px; height: 11px; flex: none;
  background: var(--accent);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.topbar-links {
  display: flex; gap: clamp(16px, 1.9vw, 30px);
  margin: 0 auto 0 clamp(26px, 3vw, 46px);
}
.topbar-links a, .topbar-account {
  color: var(--ink); text-decoration: none;
  font-size: 14px; font-weight: 500;
  opacity: 0.9; white-space: nowrap;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.topbar-links a:hover, .topbar-account:hover { color: var(--accent); opacity: 1; }
.topbar-right { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); flex-shrink: 0; }
.topbar-account { max-width: 20ch; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
.topbar-balance { font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); font-weight: 600; white-space: nowrap; }
.topbar-balance b { color: var(--accent); font-weight: 800; }
.topbar .btn-solid, .topbar .btn-ghost { padding: 11px 16px; font-size: 11px; min-height: 40px; }
.topbar-links a[aria-current="page"] { color: var(--ink); opacity: 1; }
.topbar-challenge { font-family: var(--font); }
.topbar-locked { white-space: nowrap; }

/* ============================================================
   REFERRAL LANDING BANNER: shown only on ?ref= visits, signed out
   ============================================================ */
.ref-banner {
  position: relative; z-index: 6;
  margin-top: calc(var(--bar-h) + var(--sat));
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px 18px;
  padding: 11px var(--pad);
  background: var(--accent); color: #000;
  font-size: 13.5px; font-weight: 600;
}
.ref-banner b { font-weight: 900; }
.ref-banner a {
  color: #000; text-decoration: none;
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid #000; padding: 7px 12px 6px;
  transition: background 0.2s ease, color 0.2s ease;
}
.ref-banner a:hover { background: #000; color: var(--accent); }
.ref-banner:not([hidden]) + .hero { padding-top: clamp(28px, 5vh, 56px); }

/* ============================================================
   HERO: the offer on the left, the product on the right
   ============================================================ */
.hero {
  position: relative;
  min-height: min(80vh, 780px);
  padding: calc(var(--bar-h) + var(--sat) + clamp(40px, 7vh, 96px)) var(--pad) clamp(56px, 9vh, 110px);
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
/* ---------- hero demonstration (2026-09-17, rebuilt 09-18) ----------
   A sales piece, not a diagram: the actual product — warm paper, the brass lock, the real
   clue sheet — shown as a device resting on the dark hero. It has to be immediately
   recognisable as the thing behind the button, and it has to stand out from the hero
   rather than blend into it, so it carries its own light surface and a hard shadow. */
.hero-demo { margin-top: 30px; }
@media (min-width: 1040px) {
  /* Two columns: the offer copy flows in the first, the device sits in the second. Each
     copy element is placed explicitly and the device spans their rows, so the two columns
     stay side by side instead of every child claiming a row of its own. */
  .hero-offer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    column-gap: clamp(32px, 4vw, 76px);
    align-items: start;
  }
  .hero-offer > .hero-eyebrow { grid-column: 1; grid-row: 1; }
  .hero-offer > h1            { grid-column: 1; grid-row: 2; }
  .hero-offer > .hero-sub     { grid-column: 1; grid-row: 3; }
  .hero-offer > .hero-actions { grid-column: 1; grid-row: 4; }
  .hero-offer > .hero-trust   { grid-column: 1; grid-row: 5; }
  .hero-offer > .hero-more    { grid-column: 1; grid-row: 6; }
  .hero-offer > .hero-live    { grid-column: 1; grid-row: 7; }
  .hero-demo { grid-column: 2; grid-row: 1 / 8; align-self: center; margin-top: 0; }
  .hero-offer h1 { max-width: 17ch; }
}

/* the same device as a recorded loop, phones only (see the touch block below) */
/* Kept a plain rectangle on purpose: a video with rounded corners or a shadow of its own
   loses the hardware overlay path on iOS and is composited in software every frame. The
   recording carries the device's rounded corners against the hero; the shadow sits on the
   link around it (touch block). */
.demo-video { display: none; width: 100%; height: auto; background: transparent; }
/* the device: LOCKED's own paper, tilted very slightly, lifted off the hero */
.demo-device {
  background: linear-gradient(180deg, #fbf8f1 0%, #f4f0e7 100%);
  border-radius: 10px;
  padding: 3px; overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.10),
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 28px 50px -18px rgba(0, 0, 0, 0.85),
    0 60px 90px -60px rgba(255, 90, 31, 0.45);
  transform: perspective(1200px) rotateY(-3deg) rotateX(1.2deg);
  transform-origin: right center;
}
.demo-screen { padding: 14px 14px 16px; transition: background 0.5s ease; }
.demo-device:has(.demo-lock.open) .demo-screen { background: linear-gradient(180deg, rgba(242,113,44,0.09), transparent 42%); }

.demo-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-bottom: 9px; margin-bottom: 10px; border-bottom: 1px solid rgba(20, 20, 20, 0.12);
}
.demo-brand {
  font-size: 14px; font-weight: 800; letter-spacing: 0.06em; color: #141414; font-stretch: 112%;
}
.demo-no { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #8d887d; font-weight: 700; }

.demo-clues { list-style: none; margin: 0 0 11px; padding: 0; display: grid; gap: 6px; }
.demo-clues li {
  font-size: 12.5px; line-height: 1.3; color: #141414; font-weight: 500;
  display: grid; grid-template-columns: 17px 1fr; gap: 8px; align-items: start;
  position: relative; transition: opacity 0.35s ease;
}
.demo-clues li i {
  font-style: normal; font-size: 9px; font-weight: 800; color: #8d887d;
  border: 1px solid rgba(20, 20, 20, 0.16); width: 15px; height: 15px;
  display: grid; place-items: center; margin-top: 1px;
}
/* the red pen: a hand-drawn ring stroked on over the clue being read, so the visitor sees
   someone working the sheet rather than a diagram updating itself */
.demo-clues li { padding: 1px 0; }
.demo-ring {
  position: absolute; left: 18px; right: -6px; top: -7px; height: calc(100% + 11px);
  width: auto; overflow: visible; pointer-events: none; opacity: 0;
}
.demo-ring path {
  fill: none; stroke: #e2412b; stroke-width: 2.2; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 560; stroke-dashoffset: 560;
}
.demo-clues li.reading .demo-ring { opacity: 1; }
.demo-clues li.reading .demo-ring path { animation: penring 0.62s cubic-bezier(0.4, 0, 0.3, 1) forwards; }
@keyframes penring { to { stroke-dashoffset: 0; } }
/* a clue already used stays lightly ringed */
.demo-clues li.read .demo-ring { opacity: 0.4; }
.demo-clues li.read .demo-ring path { stroke-dashoffset: 0; }
/* the dial a clue just set */
.demo-dial.set { box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), 0 0 0 2px var(--accent); }

/* the board, bottom-up like the game */
.demo-board { display: flex; flex-direction: column-reverse; gap: 4px; margin-bottom: 12px; }
.demo-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.demo-cell {
  aspect-ratio: 1 / 0.68; display: grid; place-items: center; border-radius: 2px;
  font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums;
  border: 1px solid rgba(20, 20, 20, 0.13); color: #8d887d; background: transparent;
}
.demo-cell.empty { aspect-ratio: auto; height: 1px; border: 0; background: rgba(20, 20, 20, 0.10); align-self: center; }
.demo-board .demo-row:has(.demo-cell.empty) { gap: 4px; }
.demo-cell.flip { animation: demoflip 0.34s ease both; }
@keyframes demoflip { 0% { transform: rotateX(90deg); } 100% { transform: none; } }
.demo-cell.g { background: #3f9e5c; border-color: #3f9e5c; color: #fff; }
.demo-cell.a { background: #e8a93a; border-color: #e8a93a; color: #fff; }
.demo-cell.x { background: #cfcabe; border-color: #cfcabe; color: #fff; }

/* the lock itself: the same machined object the game uses, in miniature */
.demo-lock {
  position: relative; isolation: isolate; margin-top: 44px; padding: 7px 8px; display: flex; gap: 8px; align-items: stretch;
  border-radius: 7px 7px 8px 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0 1px, transparent 1px),
    linear-gradient(177deg, #4a4742 0%, #35322e 34%, #2a2724 62%, #201e1c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 1px 1px rgba(20, 20, 20, 0.22), 0 10px 20px -8px rgba(20, 20, 20, 0.5);
}
/* the body plate, painted above the shackle so the bar disappears into it */
.demo-lock > .demo-dials, .demo-lock > .demo-latch { position: relative; z-index: 2; }
.demo-lock::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1;
  background: inherit; box-shadow: inherit;
}
.demo-lock::after {
  content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 86px; height: 8px; border-radius: 0 0 5px 5px; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
}
.demo-shackle {
  position: absolute; left: 50%; top: -28px; transform: translateX(-50%);
  width: 86px; height: 50px; z-index: 0; border-radius: 43px 43px 0 0;
  border: 12px solid transparent; border-bottom: 0;
  background: linear-gradient(94deg, #55504a 0%, #8f8a82 14%, #d8d3ca 32%, #f6f3ed 44%,
              #cdc7be 58%, #9b958c 72%, #6b655e 86%, #45403b 100%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: transform 0.55s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.demo-lock.open .demo-shackle { transform: translateX(-50%) translateY(-22px) rotate(-14deg); }
.demo-dials {
  display: flex; gap: 5px; flex: 1 1 auto; padding: 5px 6px; border-radius: 4px;
  background: linear-gradient(180deg, #14120f, #1d1a17);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.72);
}
.demo-dial {
  flex: 1 1 0; height: 40px; border-radius: 3px; position: relative; overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #5f5030 0%, #806c3f 5%, #a8924f 12%, #cdb474 22%,
    #e6d29c 33%, #f8f0dc 45%, #fdf8ea 50%, #f3e7cc 56%, #dcc48a 67%, #b99f5c 78%, #8b7541 88%, #5f5030 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.demo-dial b {
  font-size: 17px; font-weight: 700; color: #221c10; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  display: block; transition: transform 0.16s ease-out;
}
.demo-dial.spin b { animation: dialspin 0.34s ease; }
@keyframes dialspin { 0% { transform: translateY(9px); opacity: 0.25; } 100% { transform: none; opacity: 1; } }
.demo-latch {
  flex: 0 0 46px; border-radius: 4px; display: grid; place-items: center;
  font-size: 9px; font-weight: 800; letter-spacing: 0.1em; color: #3a1a06;
  background: linear-gradient(180deg, #ff9a5e 0%, var(--accent-hi) 18%, var(--accent) 52%, #cf5a1e 88%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 2px rgba(90, 30, 0, 0.35);
  transition: transform 0.08s ease, filter 0.2s ease;
}
.demo-latch.press { transform: translateY(2px); filter: brightness(1.12); }

/* the narration band: part of the device, not a footnote under it. Dark against the
   paper so a newcomer reads it as commentary on what just happened. FIXED height, two
   lines' worth: the words change all cycle long, the device never changes size. */
.demo-caption {
  margin: 0; padding: 12px 18px; height: 68px;
  /* flex + a single inner span (main.js wraps every line): grid/flex would split
     bare inline fragments around each <b> into stacked rows in WebKit */
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: linear-gradient(180deg, #24211e 0%, #1a1816 100%);
  border-radius: 0 0 8px 8px;
  font-size: 15px; line-height: 1.42; letter-spacing: 0.005em; font-weight: 500;
  color: #cfcabe;
  transition: opacity 0.17s ease;
}
.demo-caption.swap { opacity: 0; }
.demo-caption .cap-line { display: block; text-align: center; text-wrap: balance; }
.demo-caption b { color: #fff; font-weight: 800; }
.demo-caption .hot { color: var(--accent-hi); font-weight: 800; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .demo-cell.flip, .demo-dial.spin b { animation: none; }
  .demo-device { transform: none; }
}

.hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 70% at 78% 40%, rgba(255, 90, 31, 0.26) 0%, rgba(110, 26, 2, 0.18) 42%, transparent 74%),
    radial-gradient(45% 45% at 6% 100%, rgba(15, 63, 70, 0.4) 0%, transparent 70%);
}
.hero-copy { position: relative; z-index: 2; min-width: 0; max-width: 760px; }
/* With the demonstration beside it the hero uses two columns, so the copy block needs the
   full measure; the 760px cap above is for the single-column layout. */
@media (min-width: 1040px) { .hero-copy { max-width: 1240px; } }
.hero-copy .hero-desk { max-width: 880px; }

.hero-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700; color: var(--accent);
  margin-bottom: 22px;
}
.hero-offer h1 {
  font-size: clamp(34px, 3.9vw, 60px);
  font-weight: 800;
  font-stretch: 104%;
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  max-width: 18ch;
}
/* The second clause is the rhythm of the game, not a second headline: smaller, so the
   eye takes the promise first and the detail second. */
.hero-offer h1 .outline {
  font-size: 0.42em; display: inline-block; margin-top: 0.26em;
  font-weight: 600; letter-spacing: -0.005em; color: var(--dim);
}
.hero-sub { font-size: clamp(15.5px, 1.2vw, 17.5px); line-height: 1.55; color: var(--dim); max-width: 54ch; margin-bottom: 26px; text-wrap: pretty; }
.hero-sub b { color: var(--ink); font-weight: 600; }
.hero-sub { margin-bottom: 34px; }

/* ---------- the catalogue line (2026-09-19) ----------
   The daily is the hero's subject; the rooms are the second thing you learn, on their own
   line so "two of them free" is not buried in a paragraph about the daily. Deliberately
   quieter than .hero-sub — it is a glance, not the pitch. */
.hero-more {
  font-size: clamp(14px, 1.05vw, 15.5px);
  line-height: 1.55; color: var(--dim);
  max-width: 54ch; margin-top: 34px; padding-top: 24px; margin-bottom: 0;
  border-top: 1px solid rgba(242, 239, 233, 0.13);
}
.hero-more b { color: var(--ink); font-weight: 600; }
.hero-more a { color: var(--accent); font-weight: 600; text-decoration: none; white-space: nowrap; }
.hero-more a:hover { text-decoration: underline; }
.hero-more-down { display: inline-block; margin-left: 5px; }
@media (prefers-reduced-motion: no-preference) {
  .hero-more-down { animation: more-down 2.2s ease-in-out infinite; }
}
@keyframes more-down {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-actions .hero-point { flex-wrap: nowrap; }

/* ---------- the pointer (2026-09-19) ----------
   Ties the CTA to the device beside it. Hand-drawn rather than a UI chevron: the light
   touch keeps it reading as an aside to the visitor, not another button competing with
   the one it points at. Only shown where the two actually sit side by side. */
.hero-point { display: none; }
@media (min-width: 1180px) {
  .hero-point {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--accent); margin-left: 10px;
    transform: translateY(-4px);
    flex: 1 1 auto; min-width: 0;
  }
  .hero-point-label {
    /* No handwriting face is loaded (the site ships Archivo only, deliberately), so the
       lighter touch comes from the tilt and the italic, not from a webfont. */
    font-size: 14px; font-weight: 700; font-style: italic; letter-spacing: 0.02em;
    transform: rotate(-6deg); white-space: nowrap;
  }
  .hero-point-arrow { flex: 1 1 auto; width: 100%; min-width: 90px; height: 30px; overflow: visible; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1180px) {
  .hero-point-arrow { animation: point-nudge 2.6s ease-in-out infinite; }
}
@keyframes point-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(5px); }
}

/* The device is a link now, so it needs to look like one on hover. */
.hero-demo { display: block; text-decoration: none; color: inherit; }
@media (prefers-reduced-motion: no-preference) {
  .hero-demo { transition: transform 0.25s ease; }
  .hero-demo:hover { transform: translateY(-3px); }
}
.demo-play {
  display: block; text-align: center; margin-top: 12px;
  font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700; color: var(--accent);
}
.hero-demo:hover .demo-play { text-decoration: underline; }
.hero-trust {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  max-width: 540px;         /* ~.hero-sub's measure; ch would resolve against 11.5px here */
  margin-top: 22px;
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  color: var(--dim);
}
.hero-trust li::before { content: "◆"; color: var(--accent); font-size: 8px; margin-right: 8px; vertical-align: 2px; }
.hero-live { margin-top: 14px; font-size: 13.5px; color: var(--ink); font-weight: 500; }
.hero-live b { color: var(--accent); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- the desk (the same fold, signed in; desk.js fills it) ---------- */
.hero-desk {
  position: relative; z-index: 4;
  padding: 24px 28px 24px;
  border: 1px solid var(--line-strong);
  background: rgba(7, 7, 7, 0.88);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.hero-desk::before, .hero-desk::after {      /* corner ticks */
  content: ""; position: absolute; width: 10px; height: 10px; pointer-events: none;
}
.hero-desk::before { top: -1px; left: -1px; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.hero-desk::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.hero-desk .hero-eyebrow { margin-bottom: 14px; }
.hero-desk h2 {
  font-size: clamp(30px, 3.4vw, 50px);
  font-weight: 800; font-stretch: 104%;
  line-height: 0.98; letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.desk-stats {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 6px 22px;
  margin-bottom: 22px;
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  color: var(--dim);
}
.desk-stats b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; margin-left: 4px; }
.desk-stats a { color: inherit; text-decoration: none; }
.desk-stats a:hover { color: var(--accent); }
.desk-stats a b { color: var(--accent); }
.desk-rooms {
  list-style: none;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 22px;
}
.desk-room a {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  padding: 11px 12px 10px;
  border: 1px solid var(--line);
  background: rgba(242, 239, 233, 0.025);
  color: var(--ink); text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.desk-room a:hover { border-color: var(--accent); background: rgba(242, 239, 233, 0.05); }
.desk-room-no { font-size: 10px; letter-spacing: 0.12em; color: var(--dim); font-weight: 600; }
.desk-room-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.desk-room-main b { font-size: 12px; letter-spacing: 0.06em; font-weight: 800; line-height: 1.15; }
.desk-room-state { font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desk-room-go { font-size: 10px; letter-spacing: 0.14em; font-weight: 800; color: var(--accent); white-space: nowrap; }
.desk-room-done .desk-room-state { color: #5fd08a; }
.desk-room-playing .desk-room-state, .desk-room-today .desk-room-state { color: var(--ink); }
.desk-room-locked .desk-room-state { color: var(--accent); }
.desk-room-locked .desk-room-state::before { content: "◆ "; }
.desk-room-queued .desk-room-state::before { content: "◇ "; }
.desk-room-today a { border-color: var(--line-strong); }
.desk-invite {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  margin-top: 18px;
  font-size: 13px; color: var(--dim); line-height: 1.5;
}
.desk-invite b { color: var(--ink); font-weight: 700; }
.desk-invite .ref-line { flex: 1 1 260px; max-width: 400px; }
.hero-desk .hero-live { margin-top: 12px; }

/* the catalogue carries the desk's verdicts (desk.js adds these to the tiles) */
.chip-state { color: #0a7a3c; }
.chip-state::before { content: "●"; margin-right: 7px; }

/* ============================================================
   SECTIONS: shared
   ============================================================ */
.sect { position: relative; padding: 26px var(--pad) clamp(70px, 10vh, 130px); }
.sect-head { margin: clamp(36px, 6vh, 72px) 0 clamp(30px, 5vh, 56px); max-width: 900px; }
.sect-title {
  font-size: clamp(30px, 4vw, 56px);
  font-weight: 800; font-stretch: 104%;
  line-height: 1.0; letter-spacing: -0.02em;
}
.sect-title .dim { color: var(--dim); }
.sect-sub { margin-top: 16px; font-size: 16px; line-height: 1.55; color: var(--dim); max-width: 56ch; }

/* ============================================================
   01 · ROOMS (light)
   ============================================================ */
.sect-light { background: var(--bone); color: var(--bone-ink); }
.sect-light ::selection { background: var(--bone-ink); color: var(--bone); }

.rooms-head {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 400px);
  gap: 40px;
  align-items: end;
  margin: clamp(36px, 6vh, 72px) 0 clamp(30px, 5vh, 56px);
}
.rooms-title {
  font-size: clamp(40px, 6.5vw, 104px);
  font-weight: 900;
  font-stretch: 112%;
  line-height: 0.94;
  letter-spacing: -0.01em;
}
.rooms-title .outline { color: transparent; -webkit-text-stroke: 1.5px var(--bone-ink); }
/* Hero headline, second line: the rooms are the upgrade behind the daily, so they are
   drawn rather than filled. Bone stroke on the dark hero (the rooms title is on bone). */
.rooms-sub { font-size: 15.5px; line-height: 1.6; color: var(--bone-dim); max-width: 40ch; }
.rooms-note { font-size: 13px; line-height: 1.6; color: var(--bone-dim); max-width: 40ch;
  padding-top: 12px; border-top: 1px solid var(--bone-line); }
.rooms-side { display: flex; flex-direction: column; gap: 16px; }

.tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 28px);
}
.tile {
  position: relative;
  background: #fff;
  border: 1px solid var(--bone-line);
  display: flex; flex-direction: column;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.tile:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(16, 16, 16, 0.4); }
/* tile art: line-drawn, one motif per room, a small motion on hover.
   (THE SABLE EXPRESS also carries the cinematic reveal, below: artwork + a trailer control.) */
.tile-art {
  position: relative;
  aspect-ratio: 4 / 2.35;
  display: grid; place-items: center;
  color: var(--bone);
  background: #101010;
  overflow: hidden;
}
.tile-art svg { width: 74%; height: auto; max-height: 86%; transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1); }
.tile:hover .tile-art svg { transform: scale(1.06); }
@keyframes cross-blink { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.12; } }

.tile-art-vault { background: radial-gradient(120% 130% at 30% 20%, #3a1002 0%, #140602 46%, #0a0a0a 100%); }
.tile-art-vault .notch { stroke: var(--accent); }
/* Origin as a % of the dial's own box, not px in viewBox units; WebKit scales px SVG
   transform-origins by Safari's page zoom, so at anything but 100% the dial orbited. */
.tile:hover .tile-art-vault .dial { transform-box: fill-box; transform-origin: 50% 50%; animation: dial-spin 9s linear infinite; }
@keyframes dial-spin { to { transform: rotate(360deg); } }

.tile-art-drop { background: radial-gradient(120% 130% at 70% 15%, #0d2b31 0%, #071316 48%, #0a0a0a 100%); }
.tile-art-drop .waves { opacity: 0.4; }
.tile:hover .tile-art-drop .waves { animation: wave-pulse 1.6s ease-in-out infinite; }
@keyframes wave-pulse { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.9; } }

.tile-art-express { background: linear-gradient(180deg, #131b26 0%, #0a0e14 65%, #0a0a0a 100%); }
.tile-art-express .lit { fill: rgba(255, 90, 31, 0.35); stroke: var(--accent); }
.tile:hover .tile-art-express .carriage { animation: rock 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes rock { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-6px); } }

/* ---------- the cinematic reveal (2026-09-21) ----------
   Pattern from Codex's storyboard experiment: on hover (or keyboard focus) the line-drawn
   motif dissolves into concept artwork with a slow camera push, the title and hook rise,
   and a play control opens the room's trailer. Touch screens have nothing to hover, so
   they get the artwork from the start. A tile opts in with .tile-art-cine. */
.tile-art-cine > svg { transition: opacity 0.72s ease, transform 1.1s ease; }
.tile-cine { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.85s ease, visibility 0.85s; }
.tile-cine img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); transition: transform 4.5s ease-out; }
.tile-cine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 12, 22, 0.78), transparent 45%), linear-gradient(0deg, rgba(6, 12, 22, 0.7), transparent 32%); }
.tile-cine-copy {
  position: absolute; z-index: 1; left: 5%; right: 5%; top: 8%; bottom: 8%;
  display: flex; flex-direction: column; align-items: flex-start;
  color: #fff4dd; opacity: 0; transform: translateY(10px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.tile-cine-kicker { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: #d6b477; font-weight: 600; margin-bottom: 5px; }
.tile-cine-title { font-size: clamp(18px, 1.7vw, 26px); font-weight: 900; font-stretch: 108%; letter-spacing: -0.01em; line-height: 1; margin-bottom: 5px; }
.tile-cine-line { font-size: clamp(12px, 0.95vw, 14px); line-height: 1.35; margin-bottom: auto; color: rgba(255, 244, 221, 0.9); }
/* the control stays small: the artwork is the hero of the tile (Mahindra, 2026-09-21) */
.tile-watch {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--bone-ink);
  padding: 6px 12px 6px 6px; min-height: 30px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1;
  cursor: pointer; transition: background 0.2s ease, transform 0.2s ease;
}
.tile-watch:hover, .tile-watch:focus-visible { background: var(--accent-hi); transform: translateY(-1px); }
.tile-watch:focus-visible { outline: 2px solid #fff4dd; outline-offset: 2px; }
.tile-watch small { display: none; }
.tile-watch-disc { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--bone-ink); color: var(--accent); display: grid; place-items: center; font-size: 7px; padding-left: 1px; }
.tile-cine-hint { position: absolute; bottom: 14px; right: 18px; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(236, 234, 227, 0.7); transition: opacity 0.5s; }
.tile:is(:hover, :focus-within) .tile-art-cine > svg { opacity: 0; transform: scale(1.045); }
.tile:is(:hover, :focus-within) .tile-cine { opacity: 1; visibility: visible; }
.tile:is(:hover, :focus-within) .tile-cine img { transform: scale(1); }
.tile:is(:hover, :focus-within) .tile-cine-copy { opacity: 1; transform: none; }
.tile:is(:hover, :focus-within) .tile-cine-hint { opacity: 0; }

/* the trailer dialog: the room's manifest decides what plays (storyboard stills or a video) */
.trailer {
  position: fixed; inset: 0; margin: auto;
  width: min(1120px, 96vw); max-width: 96vw; max-height: 96vh; padding: 0; overflow: auto;
  border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--ink);
  box-shadow: 0 40px 140px -30px rgba(255, 90, 31, 0.35);
}
.trailer::backdrop { background: rgba(0, 0, 0, 0.82); }
body.trailer-open { overflow: hidden; }
.trailer-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 8px 8px 8px 18px; border-bottom: 1px solid var(--line); }
.trailer-kicker { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); font-weight: 600; }
.trailer-x { background: none; border: 0; color: var(--dim); cursor: pointer; font-size: 15px; padding: 10px; min-width: 44px; min-height: 44px; line-height: 1; }
.trailer-x:hover { color: var(--accent); }
.trailer-screen { position: relative; aspect-ratio: 16 / 9; max-height: 68vh; width: 100%; background: #070b12; overflow: hidden; }
.trailer-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trailer-screen.is-contain .trailer-img { object-fit: contain; }
.trailer-screen.is-cover.is-playing .trailer-img { animation: trailer-drift 12s linear both; }
@keyframes trailer-drift { from { transform: scale(1); } to { transform: scale(1.06); } }
.trailer-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3, 8, 18, 0.78), transparent 42%); pointer-events: none; }
.trailer-screen.is-contain::after { background: linear-gradient(0deg, rgba(3, 8, 18, 0.85), transparent 25%); }
.trailer-copy { position: absolute; left: 5%; right: 5%; bottom: 7%; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-shadow: 0 3px 18px #000; }
.trailer-line { font-size: clamp(20px, 3.6vw, 48px); font-weight: 900; font-stretch: 108%; letter-spacing: -0.01em; line-height: 1.05; color: #fff4dd; }
.trailer-sub { font-size: clamp(14px, 1.8vw, 24px); color: rgba(255, 244, 221, 0.92); line-height: 1.3; }
.trailer-line:empty, .trailer-sub:empty { display: none; }
.trailer-cta { display: inline-block; margin-top: 8px; background: var(--accent); color: var(--bone-ink); padding: 11px 20px; font-size: 12px; letter-spacing: 0.12em; font-weight: 700; text-decoration: none; text-shadow: none; }
.trailer-cta:hover { background: var(--accent-hi); }
.trailer-cta[hidden] { display: none; }
.trailer-tag { position: absolute; top: auto; bottom: 7%; right: 5%; z-index: 2; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 10px; border: 1px solid rgba(242, 239, 233, 0.35); background: rgba(10, 16, 26, 0.85); color: var(--ink); }
.trailer-tag:empty { display: none; }
.trailer-bar { height: 3px; background: rgba(242, 239, 233, 0.12); }
.trailer-progress { display: block; height: 100%; width: 0; background: var(--accent); }
.trailer-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; }
.trailer-clock { font-size: 11.5px; letter-spacing: 0.1em; color: var(--dim); font-variant-numeric: tabular-nums; }
.trailer-note { margin-left: auto; font-size: 12px; color: var(--dim); }
.trailer video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #000; z-index: 3; }
.trailer.is-video .trailer-copy, .trailer.is-video .trailer-tag, .trailer.is-video .trailer-bar, .trailer.is-video .trailer-controls, .trailer.is-video .trailer-screen::after { display: none; }

.tile-art-bjorn { background: radial-gradient(130% 120% at 50% 0%, #22160a 0%, #100b06 52%, #0a0a0a 100%); }
.tile-art-bjorn .rune { stroke: #d8b27a; }
.tile:hover .tile-art-bjorn .rune { animation: cross-blink 1.8s ease-in-out infinite; }

.tile-art-edition { background: radial-gradient(125% 125% at 40% 10%, #23201a 0%, #12100c 50%, #0a0a0a 100%); }
.tile-art-edition .ring { stroke: #b3372e; stroke-dasharray: 210; stroke-dashoffset: 210; }
.tile:hover .tile-art-edition .ring { animation: ring-draw 1.1s ease-out forwards; }
@keyframes ring-draw { to { stroke-dashoffset: 0; } }

.tile-art-cube { background: radial-gradient(125% 130% at 55% 15%, #2a1d07 0%, #140e04 50%, #0a0a0a 100%); }
.tile-art-cube .stone { stroke: #f0c464; }
.tile-art-cube .cube { transform-box: fill-box; transform-origin: 50% 50%; transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1); }
.tile:hover .tile-art-cube .cube { transform: rotate(-4deg) scale(1.03); }
.ribbon {
  position: absolute; z-index: 2; top: 0; left: 0;
  background: var(--accent); color: #000;
  font-size: 12px; letter-spacing: 0.14em; font-weight: 800; text-transform: uppercase;
  padding: 11px 16px 10px;
}
.tile-info { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tile-no { font-size: 11px; letter-spacing: 0.12em; color: var(--bone-dim); font-weight: 600; }
.tile-info h3 {
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 900; font-stretch: 110%;
  letter-spacing: -0.01em; line-height: 1;
}
.tile-kind { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-dim); font-weight: 600; }
.tile-copy { font-size: 14.5px; line-height: 1.55; color: #3c3a35; max-width: 50ch; }
.tile-facts {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin-top: 4px;
  font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  color: var(--bone-dim);
}
.tile-facts li::before { content: "◆"; color: var(--accent); font-size: 7px; margin-right: 7px; vertical-align: 2px; }
.tile-foot {
  margin-top: auto; padding-top: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.tile-enter {
  font-size: 11px; letter-spacing: 0.14em; font-weight: 800;
  color: var(--accent);
  padding: 9px 12px 8px;
  border: 1px solid var(--accent);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease;
}
.tile:hover .tile-enter { background: var(--accent); color: #000; }
.chip {
  padding: 6px 10px 5px;
  font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 700;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.chip-live { color: #0a7a3c; }
.chip-live::before { content: "●"; margin-right: 7px; }
.chip-price { color: var(--accent); }
.chip-price::before { content: "◆"; margin-right: 7px; }
.chip-owned { color: #0a7a3c; }
.chip-owned::before { content: "●"; margin-right: 7px; }
.chip-queued { color: var(--bone-dim); }
.chip-queued::before { content: "◇"; margin-right: 7px; }

/* Open tiles: upright cards, two to a row, art over words (the original shape).
   A full-width row per tile (art left, words right) was tried on 2026-09-20 for the
   staged rollout and reverted the same evening at Mahindra's call: the long tiles read
   worse than an odd last row. Phones stack to one column. */

/* ============================================================
   01b · THE QUEUE (staged rollout, 2026-09-20)
   Rooms that are built and not yet open. A list, not cards: the tiles above are
   doors you can walk through, this is the notice on the wall about the next ones.
   ============================================================ */
.queue { margin-top: clamp(48px, 7vh, 88px); border-top: 1px solid var(--bone-ink); padding-top: clamp(28px, 4vh, 44px); }
.queue-head {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 480px);
  gap: 40px;
  align-items: end;
  margin-bottom: clamp(20px, 3vh, 32px);
}
.queue-title {
  font-size: clamp(30px, 4.2vw, 60px);
  font-weight: 900; font-stretch: 112%;
  line-height: 0.96; letter-spacing: -0.01em;
}
.queue-sub { font-size: 14.5px; line-height: 1.6; color: var(--bone-dim); max-width: 46ch; }
.queue-list { list-style: none; border-top: 1px solid var(--bone-line); }
.queue-item {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 24px 30px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--bone-line);
}
.queue-item .tile-art { aspect-ratio: 4 / 2.35; width: 200px; }
.queue-item .tile-art svg { width: 62%; }
.queue-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.queue-info h3 { font-size: clamp(20px, 1.8vw, 26px); font-weight: 900; font-stretch: 110%; letter-spacing: -0.01em; line-height: 1; }
.queue-copy { font-size: 14px; line-height: 1.55; color: #3c3a35; max-width: 62ch; }
.queue-side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; white-space: nowrap; }
.queue-when {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800;
  color: var(--bone-dim);
}
.queue-when::before { content: "◇"; margin-right: 7px; }
.queue-item[data-queue-when="next"] .queue-when, .queue-item[data-queue-when="dated"] .queue-when { color: var(--accent); }
.queue-item[data-queue-when="dated"] .queue-when::before { content: "◆"; }
.queue-count {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bone-dim);
  font-variant-numeric: tabular-nums;
}
.queue-count b { font-size: 18px; font-weight: 800; color: var(--bone-ink); letter-spacing: 0; margin-right: 1px; }
.queue-notify, .queue-form button {
  font: inherit;
  font-size: 11px; letter-spacing: 0.14em; font-weight: 800; text-transform: uppercase;
  color: var(--bone-ink); background: transparent;
  padding: 10px 14px 9px;
  border: 1px solid var(--bone-ink);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.queue-notify:hover, .queue-form button:hover { background: var(--bone-ink); color: var(--bone); }
.queue-form { display: flex; gap: 8px; }
.queue-form input {
  font: inherit; font-size: 13px;
  padding: 9px 12px; min-width: 200px;
  background: #fff; border: 1px solid var(--bone-ink); color: var(--bone-ink);
}
.queue-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.queue-done { font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 700; color: #0a7a3c; }
.queue-done::before { content: "●"; margin-right: 7px; }
.queue-fail { color: #b3372e; }
.queue-empty { padding: 20px 0; font-size: 14px; color: var(--bone-dim); border-bottom: 1px solid var(--bone-line); }

/* ============================================================
   ◆ · PRICING (start / earn / buy)
   ============================================================ */
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 26px);
  align-items: start;
}
body.is-signed-in .plans { grid-template-columns: repeat(2, 1fr); } /* the Start card is for strangers */
.plan {
  position: relative;
  display: flex; flex-direction: column; gap: 18px;
  padding: 30px 28px 28px;
  border: 1px solid var(--line);
  background: rgba(242, 239, 233, 0.02);
}
.plan-featured { border-color: var(--accent); background: rgba(255, 90, 31, 0.06); }
.plan-featured::before {
  content: "One payment, no subscription"; position: absolute; top: -1px; right: 20px;
  background: var(--accent); color: #000;
  font-size: 10px; letter-spacing: 0.16em; font-weight: 800; text-transform: uppercase;
  padding: 6px 10px 5px;
}
.plan-name { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--dim); }
.plan-price {
  font-size: clamp(36px, 3.6vw, 56px);
  font-weight: 900; font-stretch: 112%;
  line-height: 1; letter-spacing: -0.01em;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.plan-price small { font-size: 13px; font-weight: 500; font-stretch: 100%; letter-spacing: 0.02em; color: var(--dim); }
.plan-copy { font-size: 15px; line-height: 1.55; color: var(--dim); max-width: 34ch; }
.plan-copy b { color: var(--ink); font-weight: 700; }
.plan-foot { margin-top: 4px; padding-top: 6px; display: flex; flex-direction: column; gap: 12px; }
.plan-foot .btn-solid, .plan-foot .btn-ghost { width: 100%; }
.plan-alt { font-size: 12.5px; color: var(--dim); line-height: 1.5; text-decoration: none; }
a.plan-alt:hover { color: var(--accent); }
.plan-alt b { color: var(--ink); }
.ref-line { display: flex; gap: 8px; }
.ref-line input {
  flex: 1; min-width: 0;
  background: transparent; border: 1px solid var(--line-strong); color: var(--ink);
  font-family: var(--font); font-size: 16px; padding: 10px 12px; outline: none; border-radius: 0;
}
.ref-line .btn-solid { width: auto; flex: 0 0 auto; padding: 10px 16px; }
.packs { display: flex; flex-direction: column; gap: 8px; }
.pack {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  min-height: 48px;
  padding: 12px 14px;
  background: transparent; border: 1px solid var(--line-strong); color: var(--ink);
  font-family: var(--font); text-align: left; cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.pack:hover { border-color: var(--accent); background: rgba(255, 90, 31, 0.08); }
.pack-featured { border-color: var(--accent); background: rgba(255, 90, 31, 0.1); }
.pack-l { display: flex; flex-direction: column; gap: 3px; }
.pack-l b { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800; }
.pack-l span { font-size: 12px; color: var(--dim); }
.pack em { font-style: normal; font-size: 18px; font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; }
.plans-fine { margin-top: 18px; font-size: 12px; line-height: 1.6; color: var(--dim); max-width: 78ch; }

/* ============================================================
   03 · HOW IT WORKS: four short cards
   ============================================================ */
.why {
  list-style: none;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 26px);
  align-items: stretch;
}
.why-card {
  padding: 26px 24px 28px;
  border: 1px solid var(--line);
  background: rgba(242, 239, 233, 0.02);
  display: flex; flex-direction: column; gap: 10px;
}
.why-no { font-size: 11px; letter-spacing: 0.16em; font-weight: 800; color: var(--accent); }
.why-card h3 { font-size: clamp(19px, 1.7vw, 24px); font-weight: 800; letter-spacing: -0.01em; }
.why-card p { font-size: 14.5px; line-height: 1.6; color: var(--dim); }

/* ============================================================
   CTA + SIGNAL
   ============================================================ */
.cta {
  position: relative;
  border-top: 1px solid var(--line);
  overflow: hidden;
  background:
    radial-gradient(60% 90% at 50% 115%, rgba(255, 90, 31, 0.28) 0%, rgba(122, 18, 0, 0.18) 40%, transparent 75%),
    var(--bg-2);
}
.cta-inner { position: relative; text-align: center; padding: clamp(70px, 12vh, 150px) var(--pad); }
.cta-kicker { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin-bottom: 22px; font-weight: 600; }
.cta-title {
  font-size: clamp(42px, 7.5vw, 120px);
  font-weight: 900; font-stretch: 112%;
  line-height: 0.94; letter-spacing: -0.01em;
  margin-bottom: clamp(30px, 5vh, 56px);
  text-shadow: 0 0 120px rgba(255, 90, 31, 0.35);
}
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; }
.cta-alt { font-size: 14px; color: var(--dim); text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; }
.cta-alt:hover { color: var(--accent); border-color: var(--accent); }

.signal-block {
  margin: clamp(56px, 9vh, 110px) auto 0;
  max-width: 460px;
  text-align: left;
  border-top: 1px solid var(--line);
  padding-top: 26px;
}
.signal-head { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); font-weight: 600; margin-bottom: 14px; }
.signal-copy { font-size: 15.5px; line-height: 1.6; margin-bottom: 22px; }
.signal-form { display: flex; gap: 0; align-items: stretch; }
.signal-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.signal-form input[type="email"] {
  flex: 1; min-width: 0;
  background: transparent;
  border: none; border-bottom: 1px solid var(--line-strong);
  color: var(--ink);
  font-family: var(--font); font-size: 16px;
  padding: 10px 2px; outline: none; border-radius: 0;
}
.signal-form input[type="email"]:focus { border-bottom-color: var(--accent); }
.signal-form input[type="email"]::placeholder { color: var(--dim); }
.signal-form button {
  position: relative;
  background: transparent;
  border: none; border-bottom: 1px solid var(--ink);
  color: var(--ink);
  font-family: var(--font); font-size: 14px; font-weight: 700; letter-spacing: 0.12em;
  padding: 10px 34px 10px 18px;
  min-height: 44px;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.signal-form button:hover { color: var(--accent); border-color: var(--accent); }
.btn-corner {
  position: absolute; right: 8px; top: 14px;
  width: 9px; height: 9px;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
}
.lw-sub-done { padding: 12px 0; border-bottom: 1px solid var(--accent); color: var(--accent); font-weight: 600; letter-spacing: 0.04em; font-size: 15px; }
.signal-done { font-size: 15px; color: var(--ink); font-weight: 600; }
.signal-fine { margin-top: 16px; font-size: 12px; color: var(--dim); line-height: 1.6; }
.signal-fine a { color: var(--dim); }
.signal-fine a:hover { color: var(--accent); }

/* ============================================================
   FAQ
   ============================================================ */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 2fr;
  gap: clamp(32px, 6vw, 120px);
  margin-top: clamp(36px, 6vh, 72px);
}
.faq-title { font-size: clamp(34px, 4.5vw, 68px); font-weight: 900; font-stretch: 112%; line-height: 0.95; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 20px 0;
  font-size: clamp(17px, 1.5vw, 21px); font-weight: 600;
  transition: color 0.2s ease;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--accent); }
.sum-mark { font-weight: 300; font-size: 24px; transition: transform 0.3s ease; }
details[open] .sum-mark { transform: rotate(45deg); }
.faq-list details p { padding: 0 0 24px; color: var(--dim); font-size: 15.5px; line-height: 1.65; max-width: 58ch; }
.faq-list details p a { color: var(--ink); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { padding: 26px var(--pad) calc(40px + var(--sab)); border-top: 1px solid var(--line); }
.footer .meta-row { border-top: none; padding-top: 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; padding: clamp(30px, 5vh, 60px) 0; }
.footer-brand { display: block; color: var(--ink); text-decoration: none; line-height: 0; }
.footer-brandcol { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.footer-col { display: flex; flex-direction: column; gap: 9px; font-size: 14px; font-weight: 500; }
.footer-col .tiny { margin-bottom: 6px; }
.footer-col a { color: var(--ink); text-decoration: none; transition: color 0.2s ease; padding: 2px 0; }
.footer-col a:hover { color: var(--accent); }
.footer-line { max-width: 60ch; }

/* ============================================================
   PHONE-ONLY STICKY CTA: main.js shows it once the hero scrolls away
   ============================================================ */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
  display: none;
  align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--pad) calc(10px + var(--sab));
  background: #070707;
  border-top: 1px solid var(--line);
}
.sticky-cta-copy { font-size: 12.5px; color: var(--dim); min-width: 0; }
.sticky-cta-copy b { color: var(--ink); font-weight: 700; }
.sticky-cta .btn-solid { flex: none; padding: 11px 16px; font-size: 11px; }
body.sticky-on .sticky-cta:not([hidden]) { display: flex; }
body.sticky-on { padding-bottom: 70px; }

/* ============================================================
   THE POPUP: one quiet ask; see main.js for the rules
   ============================================================ */
.pop {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; padding: 20px;
  background: rgba(0, 0, 0, 0.72);
}
.pop[hidden] { display: none; }
body.pop-open { overflow: hidden; }
.pop-box {
  position: relative;
  width: min(540px, 94vw);
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  padding: 40px 42px 32px;
  box-shadow: 0 40px 140px -30px rgba(255, 90, 31, 0.35);
  animation: pop-in 0.45s ease;
}
@keyframes pop-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.pop-x { position: absolute; top: 10px; right: 10px; background: none; border: 0; color: var(--dim); cursor: pointer; font-size: 15px; padding: 10px; line-height: 1; min-width: 44px; min-height: 44px; }
.pop-x:hover { color: var(--accent); }
.pop-kicker { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); font-weight: 600; margin-bottom: 16px; }
.pop-title { font-size: clamp(30px, 3.6vw, 48px); font-weight: 900; font-stretch: 108%; line-height: 0.98; letter-spacing: -0.015em; margin-bottom: 16px; }
.pop-copy { font-size: 15.5px; line-height: 1.6; color: var(--dim); margin-bottom: 26px; }
.pop-copy b { color: var(--ink); font-weight: 700; }
.pop-actions { display: flex; flex-direction: column; gap: 10px; }
.pop-actions .btn-solid, .pop-actions .btn-ghost { width: 100%; }
.pop-fine { margin-top: 16px; font-size: 12px; color: var(--dim); line-height: 1.6; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
  .topbar-links { gap: clamp(12px, 2vw, 24px); }
  .why { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  /* header: brand · Sign in · Play free; section links go, the page scrolls */
  .topbar-links { display: none; }
  .topbar-balance { display: none; }
  .topbar-right { margin-left: auto; }

  .hero {
    min-height: 0;
    padding-top: calc(var(--bar-h) + var(--sat) + 28px);
    padding-bottom: 44px;
  }
  .hero-offer h1 { max-width: none; font-size: clamp(34px, 9vw, 52px); }
  .hero-eyebrow { font-size: 10px; letter-spacing: 0.14em; margin-bottom: 14px; }
  .hero-actions .btn-lg { width: 100%; }
  /* the demo sits right under the CTA on a phone (the rooms line follows it), and
     runs a little shorter: flatter feedback cells, less air over the lock */
  .hero-demo { margin-top: 26px; max-width: 420px; }
  .demo-cell { aspect-ratio: 1 / 0.52; }
  .demo-lock { margin-top: 26px; }
  .hero-more { margin-top: 26px; padding-top: 20px; }
  .hero-desk { padding: 18px 18px 18px; }
  .desk-rooms { grid-template-columns: 1fr; }
  .desk-room-state { white-space: normal; }


  .rooms-head { grid-template-columns: 1fr; align-items: start; gap: 22px; }
  .tiles { grid-template-columns: 1fr; }
  .queue-head { grid-template-columns: 1fr; align-items: start; gap: 14px; }
  .queue-item { grid-template-columns: 1fr; gap: 14px; }
  .queue-item .tile-art { width: 100%; aspect-ratio: 4 / 1.4; }
  .queue-item .tile-art svg { width: 44%; }
  .queue-side { align-items: flex-start; white-space: normal; }
  .queue-form { flex-wrap: wrap; }
  .queue-form input { flex: 1 1 200px; min-width: 0; }
  .tile-art { aspect-ratio: 4 / 1.7; }      /* the motif reads at this height; the page gets ~350px shorter */
  .tile-art svg { width: 56%; }
  .tile-info { padding: 18px 18px 20px; }
  .sect { padding-bottom: clamp(56px, 8vh, 96px); }
  .signal-block { margin-top: clamp(44px, 7vh, 80px); }
  .cta-inner { padding-top: clamp(56px, 9vh, 110px); padding-bottom: clamp(56px, 9vh, 110px); }
  .plans, body.is-signed-in .plans { grid-template-columns: 1fr; }
  .why { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brandcol { grid-column: 1 / -1; }
  .cta-actions .btn-lg { width: 100%; }
}

@media (max-width: 480px) {
  /* signed in, the bar carries a name and "Today's lock"; keep both on one line */
  .topbar { gap: 12px; }
  .topbar-right { gap: 10px; }
  .topbar-account { max-width: 9ch; }
  .topbar .btn-solid, .topbar .btn-ghost { padding: 10px 12px; font-size: 10.5px; letter-spacing: 0.1em; }
  .topbar .btn-solid .arrow, .topbar .btn-ghost .arrow { display: none; }
  .topbar-locked .lbl-long, .topbar-challenge .lbl-long { display: none; }
  /* a member's truncated name buys nothing on a phone; the account lives on the desk
     and in the footer. A stranger's "Sign in" stays. */
  body.is-signed-in .topbar-account { display: none; }
  .topbar-brand { flex-shrink: 0; }
  .footer-grid { grid-template-columns: 1fr; }
  /* chip on its own row; the button drops to a full-width row below */
  .tile-foot { align-items: center; row-gap: 10px; }
  .tile-foot .tile-enter { flex-basis: 100%; text-align: center; }
  /* the cinematic copy has ~200px of art to sit in on a phone */
  /* a taller frame on a phone so the artwork is seen, not glimpsed (2026-09-21);
     the line-art tiles take the same proportion so the grid stays even */
  .tiles .tile-art { aspect-ratio: 4 / 3; }
  .tile-cine-copy { top: 7%; bottom: 7%; }
  .tile-cine-kicker { font-size: 7.5px; margin-bottom: 3px; }
  .tile-cine-title { font-size: 17px; margin-bottom: 3px; }
  .tile-cine-line { font-size: 11px; }
  .tile-watch { min-height: 28px; padding: 5px 10px 5px 5px; font-size: 9px; gap: 6px; }
  .trailer-controls { padding: 12px; gap: 10px; }
  .trailer-note { margin-left: 0; flex-basis: 100%; }
  .trailer-tag { bottom: 4%; right: 4%; font-size: 8.5px; padding: 3px 6px; }
  .trailer-cta { padding: 8px 14px; font-size: 10.5px; }
  /* the popup: less padding, and the two buttons may wrap; a 360px phone
     has 250px inside the box, "JUST LET ME CRACK TODAY'S LOCK" needs 270 */
  .pop { padding: 14px; }
  .pop-box { width: min(540px, 100%); padding: 34px 22px 24px; }
  .pop-actions .btn-lg, .hero-actions .btn-lg, .cta-actions .btn-lg { white-space: normal; text-align: center; line-height: 1.3; padding: 14px 16px; }
}

/* ---------- touch: no hover choreography, and the sticky bar stays out of a
   landscape phone's 390px of height ---------- */
@media (hover: none) {
  /* the hero demo on a phone (2026-09-21, Mahindra: "the site lags over the hero"):
     first pass cut the paint cost (no tilt, one shadow, own layer) and it still juddered,
     so touch screens play one recorded loop of the same demonstration as a small silent
     video instead, and the live DOM demo is not run at all (main.js checks this). The
     two infinite arrow nudges stay off here too. */
  .demo-device { display: none; }
  .demo-video { display: block; }
  .hero-demo { box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.8); }
  .hero-more-down, .hero-point-arrow { animation: none; }
  .tile:hover { transform: none; box-shadow: none; }
  .tile:hover .tile-art svg { transform: none; }
  .tile:hover .tile-art-vault .dial, .tile:hover .tile-art-drop .waves, .tile:hover .tile-art-express .carriage,
  .tile:hover .tile-art-bjorn .rune, .tile:hover .tile-art-edition .ring { animation: none; }
  .tile:hover .tile-art-cube .cube { transform: none; }
  .btn-solid:hover, .btn-ghost:hover { transform: none; }
  /* nothing to hover: the cinematic tiles show their artwork from the start */
  .tile .tile-art-cine > svg { opacity: 0; }
  .tile .tile-cine { opacity: 1; visibility: visible; }
  .tile .tile-cine img { transform: none; }
  .tile .tile-cine-copy { opacity: 1; transform: none; }
  .tile .tile-cine-hint { display: none; }
  .tile-watch:hover { transform: none; }
}
@media (max-height: 500px) {
  body.sticky-on .sticky-cta:not([hidden]) { display: none; }
  body.sticky-on { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- the bridge (2026-09-19) ----------
   One line between the hero and the rooms, where a numbered three-step strip used to be.
   It is set large and given room, so the pause reads as intentional rather than as a
   section that lost its contents. */
.bridge {
  padding: clamp(52px, 7.5vw, 104px) var(--pad);
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.bridge p {
  margin: 0 auto;
  max-width: 34ch;
  text-align: center;
  font-size: clamp(20px, 2.5vw, 31px);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}

/* the closing ask: a line of context above the two open doors (2026-09-19) */
.cta-sub {
  margin: 0 auto 26px; max-width: 46ch;
  font-size: clamp(15px, 1.2vw, 17px); line-height: 1.55;
  color: var(--dim); text-wrap: pretty;
}
.cta-alt-line { margin-top: 16px; }

/* ============================================================
   THE MEMBER'S DESK PAGE (/desk, 2026-09-21)
   Same chrome and tokens as the front door, a different page:
   signed out it is the sign-in page; signed in, the desk fold
   then one "next move" card, the queue, today's board, credits,
   account. Nothing here sells to a stranger.
   ============================================================ */
.dp-fold {
  position: relative; overflow: hidden;
  padding: calc(var(--bar-h) + var(--sat) + clamp(40px, 7vh, 90px)) var(--pad) clamp(50px, 8vh, 100px);
  background: var(--bg);
}
.dp-fold-inner { position: relative; z-index: 2; max-width: 1100px; }
.dp-signin h1 {
  font-size: clamp(38px, 5.6vw, 84px);
  font-weight: 900; font-stretch: 112%;
  line-height: 0.96; letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.dp-signin .hero-sub { max-width: 50ch; }
.dp-signin .hero-more { margin-top: 26px; }
@media (min-width: 1040px) { .dp-fold .desk-rooms { grid-template-columns: repeat(3, 1fr); } }

.dp-verify {
  margin: 0 var(--pad);
  padding: 14px 18px;
  border: 1px solid var(--accent);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px;
  font-size: 13.5px; line-height: 1.5; color: var(--dim);
}
.dp-verify b { color: var(--ink); }
.dp-verify a { color: var(--accent); font-weight: 700; text-decoration: none; white-space: nowrap; }
.dp-verify a:hover { text-decoration: underline; }

.dp-sect-head { margin-top: clamp(24px, 4vh, 48px); }

/* the desk head: the headline, nothing else on the top level */
.dp-desk-head { margin-bottom: clamp(26px, 4vh, 44px); }
.dp-headline {
  font-size: clamp(32px, 4.2vw, 64px);
  font-weight: 800; font-stretch: 104%;
  line-height: 0.98; letter-spacing: -0.02em;
  text-wrap: balance;
}

/* the padlock: LOCKED's own button. A small lock with a shackle that springs once the
   day's lock is cracked, dials that tumble under the pointer, and the clock to the next. */
.dp-padlock {
  position: relative; display: inline-flex; flex-direction: column; align-items: flex-start;
  margin-top: 26px; padding-top: 18px;
  color: var(--ink); text-decoration: none;
}
.dp-padlock-shackle {
  /* centred over the seam between the second and third wheels: body padding 10 +
     dials padding 5 + two wheels and a gap (55) + half a gap, less half the shackle */
  position: absolute; left: 49px; top: 0;
  width: 44px; height: 30px; border-radius: 22px 22px 0 0;
  border: 7px solid transparent; border-bottom: 0;
  background: linear-gradient(94deg, #55504a 0%, #8f8a82 14%, #d8d3ca 32%, #f6f3ed 44%, #cdc7be 58%, #9b958c 72%, #6b655e 86%, #45403b 100%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: transform 0.55s cubic-bezier(0.3, 1.5, 0.5, 1);
  transform-origin: 8px 100%;
}
.dp-padlock-body {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 14px 10px 10px;
  border-radius: 8px;
  background: linear-gradient(177deg, #4a4742 0%, #35322e 34%, #2a2724 62%, #201e1c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.55), 0 14px 30px -12px rgba(0, 0, 0, 0.8), 0 0 0 0 rgba(255, 90, 31, 0);
  transition: transform 0.2s ease, box-shadow 0.35s ease;
}
.dp-padlock:hover .dp-padlock-body { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.55), 0 18px 34px -12px rgba(0, 0, 0, 0.85), 0 0 0 4px rgba(255, 90, 31, 0.22); }
.dp-padlock:hover .dp-padlock-shackle { transform: translateY(-3px); }
.dp-padlock-dials {
  display: flex; gap: 3px; padding: 4px 5px; border-radius: 4px;
  background: linear-gradient(180deg, #14120f, #1d1a17);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.72);
}
.dp-padlock-dial {
  width: 26px; height: 32px; border-radius: 3px; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(180deg, #5f5030 0%, #806c3f 5%, #a8924f 12%, #cdb474 22%, #e6d29c 33%, #f8f0dc 45%, #fdf8ea 50%, #f3e7cc 56%, #dcc48a 67%, #b99f5c 78%, #8b7541 88%, #5f5030 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.dp-padlock-dial b { font-size: 15px; font-weight: 700; color: #221c10; font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); display: block; }
.dp-padlock-dial.spin b { animation: dialspin 0.42s ease; }
.dp-padlock-words { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dp-padlock-words b { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800; color: var(--ink); white-space: nowrap; }
.dp-padlock-words small { font-size: 11px; letter-spacing: 0.04em; color: #b7b2a8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dp-padlock-latch {
  width: 34px; height: 34px; border-radius: 4px; display: grid; place-items: center;
  font-size: 14px; font-weight: 800; color: #3a1a06;
  background: linear-gradient(180deg, #ff9a5e 0%, var(--accent-hi) 18%, var(--accent) 52%, #cf5a1e 88%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 2px rgba(90, 30, 0, 0.35);
  transition: transform 0.2s ease;
}
.dp-padlock:hover .dp-padlock-latch { transform: translate(2px, -2px); }
.dp-padlock.is-open .dp-padlock-shackle { transform: translateY(-9px) rotate(-28deg); }
.dp-padlock.is-open .dp-padlock-latch { background: linear-gradient(180deg, #7fe0a5 0%, #4cc47f 40%, #2f9d5f 100%); color: #06301a; }
.dp-padlock.is-open .dp-padlock-words b { color: #5fd08a; }
.dp-padlock.is-open:hover .dp-padlock-body { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.55), 0 18px 34px -12px rgba(0, 0, 0, 0.85), 0 0 0 4px rgba(95, 208, 138, 0.22); }
@media (prefers-reduced-motion: reduce) { .dp-padlock-dial.spin b { animation: none; } }
@media (max-width: 480px) {
  .dp-padlock { display: flex; }
  .dp-padlock-body { width: 100%; gap: 12px; }
  .dp-padlock-words { flex: 1; }
  .dp-padlock-words b, .dp-padlock-words small { white-space: normal; }
}

/* bands: a small label row, then a row of cards (or, for the lock, the device + strip) */
.dp-band, .dp-band-sect .dp-band {
  grid-column: 1 / -1;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px;
  margin-top: clamp(18px, 3vh, 30px); margin-bottom: 4px; padding-top: 12px;
  border-top: 1px solid var(--line);
}
.dp-band:first-child, .dp-band-sect .dp-band { margin-top: 0; }
.dp-band-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); font-weight: 700; white-space: nowrap; }
.dp-band-label::before { content: "◆"; color: var(--accent); font-size: 8px; margin-right: 8px; vertical-align: 2px; }
.dp-band-sub { font-size: 13px; color: var(--dim); line-height: 1.5; max-width: 70ch; }
.dp-band-sub b { color: var(--ink); font-weight: 700; }
.dp-band-action { margin-left: auto; }
.dp-band-action .btn-solid, .dp-band-action .btn-ghost { padding: 11px 16px; font-size: 11px; min-height: 40px; }

/* band 1: LOCKED's device and the week of locks */
.dp-lockrow {
  display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  gap: clamp(12px, 1.5vw, 20px); align-items: stretch;
  margin-bottom: 4px;
}
.dp-lock {
  display: flex; flex-direction: column; gap: 0;
  padding: 18px 18px 16px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, #f4f1ea 0%, #e9e5dc 100%);
  color: #221c10; text-decoration: none;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.dp-lock:hover { transform: translateY(-2px); box-shadow: 0 34px 80px rgba(0, 0, 0, 0.55); }
.dp-lock-meta { display: flex; gap: 12px; align-items: baseline; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #6d6a62; font-weight: 600; }
.dp-lock-meta b { color: #221c10; font-weight: 900; letter-spacing: 0.18em; font-size: 12px; }
.dp-lock-meta span:last-child { margin-left: auto; }
.dp-lock .demo-lock { margin-top: 40px; }
.dp-lock .demo-dial b { font-size: 19px; }
.dp-lock-verdict { margin-top: auto; padding-top: 14px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800; color: var(--accent); display: flex; align-items: center; gap: 8px; }
.dp-lock:hover .dp-lock-verdict { text-decoration: underline; }
.dp-lock .demo-lock.open + .dp-lock-verdict { color: #0a7a3c; }
.dp-lock .demo-lock.open .demo-latch { background: linear-gradient(180deg, #7fe0a5 0%, #4cc47f 40%, #2f9d5f 100%); color: #06301a; }
.dp-streak {
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px 20px 16px;
  border: 1px solid var(--line);
  background: rgba(242, 239, 233, 0.025);
  min-width: 0;
}
.dp-streak-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.dp-streak-title { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); font-weight: 600; }
.dp-streak-sum { font-size: 13px; font-weight: 800; color: var(--accent); letter-spacing: 0.04em; }
.dp-streak-sum.is-quiet { color: var(--dim); font-weight: 600; }
.dp-streak-strip { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; flex: 1; }
.dp-streak-day {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 78px; padding: 10px 4px 8px;
  border: 1px solid var(--line);
  color: var(--dim);
  font-size: 11px;
}
.dp-streak-day b { font-size: 11px; letter-spacing: 0.06em; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.dp-streak-day small { font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.dp-streak-mark { font-size: 13px; line-height: 1; }
.dp-streak-cracked { border-color: rgba(95, 208, 138, 0.5); background: rgba(95, 208, 138, 0.07); }
.dp-streak-cracked .dp-streak-mark { color: #5fd08a; }
.dp-streak-today { border-color: var(--accent); background: rgba(255, 90, 31, 0.08); }
.dp-streak-today .dp-streak-mark { color: var(--accent); }
.dp-streak-missed .dp-streak-mark, .dp-streak-skipped .dp-streak-mark { color: var(--dim); opacity: 0.6; }
.dp-streak-ghost { border-style: dashed; opacity: 0.35; }
.dp-streak-go { position: absolute; inset: 0; text-indent: -9999px; overflow: hidden; }
.dp-streak-today:hover { background: rgba(255, 90, 31, 0.16); }
.dp-streak-note { font-size: 12.5px; color: var(--dim); line-height: 1.5; }

/* the doors: four to a row, the front door's tiles, dark, with this player's verdict */
.dp-doors {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
}
.dp-door {
  background: rgba(242, 239, 233, 0.025);
  border: 1px solid var(--line);
  color: var(--ink);
}
.dp-door:hover { border-color: var(--line-strong); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); }
.dp-door-art { position: relative; display: block; color: inherit; text-decoration: none; }
.dp-door .tile-art { color: var(--bone); }
.dp-door-chip {
  position: absolute; z-index: 3; top: 10px; left: 10px; max-width: calc(100% - 20px);
  padding: 6px 9px 5px;
  background: rgba(7, 7, 7, 0.82); border: 1px solid rgba(242, 239, 233, 0.25);
  color: var(--ink);
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; line-height: 1;
  backdrop-filter: blur(4px);
}
.dp-door-chip::before { content: "●"; margin-right: 6px; font-size: 8px; }
.dp-door[data-chip="done"] .dp-door-chip { color: #5fd08a; }
.dp-door[data-chip="playing"] .dp-door-chip { color: var(--ink); }
.dp-door[data-chip="locked"] .dp-door-chip { color: var(--accent); border-color: var(--accent); }
.dp-door[data-chip="locked"] .dp-door-chip::before { content: "◆"; }
.dp-door[data-chip="queued"] .dp-door-chip { color: var(--dim); }
.dp-door[data-chip="queued"] .dp-door-chip::before { content: "◇"; }
.dp-door[data-chip="free"] .dp-door-chip::before, .dp-door[data-chip="owned"] .dp-door-chip::before { color: #5fd08a; }
.dp-door[data-state="queued"] .tile-art { filter: saturate(0.6) brightness(0.8); }
.dp-door-count {
  display: block; padding: 10px 14px 0;
  font-family: ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dim); font-variant-numeric: tabular-nums;
}
.dp-door-count b { font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: 0; margin-right: 1px; }
.dp-door-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px 13px;
}
.dp-door-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dp-door-name .tile-no { color: var(--dim); font-size: 10px; }
.dp-door-name h3 { font-size: 12.5px; font-weight: 900; font-stretch: 108%; letter-spacing: 0.02em; line-height: 1.1; }
.dp-door-name .tile-kind { display: none; }  /* little text: the art and the name carry the room */
.dp-door-go {
  flex: none;
  font-size: 10px; letter-spacing: 0.14em; font-weight: 800; color: var(--accent);
  text-decoration: none; white-space: nowrap; background: none; border: 0; cursor: pointer; font-family: var(--font); padding: 0;
}
.dp-door-go:hover { text-decoration: underline; }
.dp-door-go:disabled { color: var(--dim); cursor: default; }
.dp-door .queue-done { color: #5fd08a; font-size: 10px; }
/* the Express keeps its cinematic reveal on hover; the copy over the art is the front
   door's, kept to the trailer control here (the name is in the foot) */
.dp-door .tile-cine-copy { top: auto; bottom: 10%; }
.dp-door .tile-cine-kicker, .dp-door .tile-cine-title, .dp-door .tile-cine-line { display: none; }
.dp-door .tile-cine-hint { display: none; }
.dp-door-copy[hidden] { display: none; }
.dp-fold .hero-live { margin-top: 16px; }

/* today's board */
.dp-board { border: 1px solid var(--line); }
.dp-board table { width: 100%; border-collapse: collapse; }
.dp-board th { text-align: left; color: var(--dim); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; padding: 12px 18px 8px; border-bottom: 1px solid var(--line); }
.dp-board td { padding: 11px 18px; font-size: 14px; border-bottom: 1px solid rgba(242, 239, 233, 0.07); font-variant-numeric: tabular-nums; }
.dp-board td.rk { color: var(--dim); width: 3.2em; }
.dp-board td.al { font-weight: 600; }
.dp-board td.al .anon { color: var(--dim); font-weight: 400; }
.dp-board tr.top1 td.rk, .dp-board tr.top1 td.al { color: var(--accent); font-weight: 700; }
.dp-board tr.you td { background: rgba(255, 90, 31, 0.08); }
.dp-board tr.you td.al::after { content: " · you"; color: var(--accent); font-size: 11px; letter-spacing: 0.1em; }
.dp-board tr.gap td { border-top: 1px dashed var(--line-strong); }
.dp-board-empty { padding: 30px 18px; color: var(--dim); font-size: 14px; }
.dp-board-empty a { color: var(--accent); font-weight: 700; text-decoration: none; }
.dp-board-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; padding: 12px 18px; color: var(--dim); font-size: 12px; letter-spacing: 0.05em; }
.dp-board-foot a { color: var(--accent); text-decoration: none; font-weight: 700; }
.dp-board-foot a:hover { text-decoration: underline; }

/* credits: three cards for a member (the front door's grid drops the Start card to two) */
body.is-signed-in .plans.dp-plans { grid-template-columns: repeat(3, 1fr); }
.dp-ledger { list-style: none; display: flex; flex-direction: column; font-size: 12.5px; color: var(--dim); }
.dp-ledger li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(242, 239, 233, 0.07); }
.dp-ledger li:last-child { border-bottom: 0; }
.dp-ledger b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 700; }
.dp-ledger b.plus { color: #5fd08a; }

/* account */
.dp-account {
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
  padding: 26px 28px;
  border: 1px solid var(--line);
  background: rgba(242, 239, 233, 0.02);
  margin-top: clamp(20px, 3vh, 36px);
}
.dp-account dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: 14.5px; }
.dp-account dt { color: var(--dim); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; align-self: baseline; }
.dp-account dd { min-width: 0; overflow-wrap: anywhere; }
.dp-account dd b.ok { color: #5fd08a; font-weight: 600; }
.dp-account dd b.no { color: var(--accent); font-weight: 600; }
.dp-account .hero-actions { justify-content: flex-end; }
.dp-account button.btn-ghost { font-family: var(--font); }

@media (max-width: 1180px) {
  .dp-doors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dp-lockrow { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .dp-account { grid-template-columns: 1fr; }
  .dp-account .hero-actions { justify-content: flex-start; }
  body.is-signed-in .plans.dp-plans { grid-template-columns: 1fr; }
  .dp-verify { margin: 0; padding: 14px var(--pad); border-left: 0; border-right: 0; }
  .dp-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dp-band-action { margin-left: 0; flex-basis: 100%; }
  .dp-streak-day { min-height: 68px; }
}
@media (max-width: 480px) {
  .dp-door-chip { font-size: 8.5px; letter-spacing: 0.08em; padding: 5px 7px 4px; top: 8px; left: 8px; }
  .dp-streak-strip { gap: 4px; }
  .dp-streak-day { padding: 8px 2px 6px; }
  .dp-streak-day small { font-size: 8px; letter-spacing: 0.06em; }
}
@media (max-width: 420px) {
  .dp-door-foot { padding: 10px 11px; }
  .dp-door-name h3 { font-size: 11px; }
}