/* Shelltown website. One page per language; tokens in tokens.css. The page is the lobby of the tower: a brass-framed
   directory lists what is in the building, and each entry opens onto one plate with one sentence and one frame of the real
   app (demo mode). Corners are angular with a one-pixel notch, shadows are hard, pixels are scaled by whole numbers. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 24px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.55 var(--font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
::selection { background: rgb(212 166 76 / 35%); color: var(--text); }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-round); color: var(--text); margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
figcaption { margin-top: 10px; font: 500 0.875rem/1.4 var(--font-round); color: var(--text-3); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip {
  position: absolute; left: 16px; top: -64px; z-index: 10;
  padding: 8px 12px; background: var(--accent); color: var(--on-fill); font: 600 0.9375rem/1.2 var(--font-round); text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { width: min(100% - 32px, 1176px); margin-inline: auto; }

/* ───────── Buttons: square tiles, the pixel bevel; brass for the one main action ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px;
  font: 650 1rem/1 var(--font-round); letter-spacing: 0.005em; text-decoration: none;
  color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge), var(--bevel);
  border: 0; border-radius: 0; cursor: pointer;
  transition: transform 120ms var(--ease-out), background-color 150ms ease;
}
.btn-primary { color: var(--on-fill); background: var(--accent); box-shadow: var(--bevel-fill); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--accent-hi)); }
}
.btn:active { transform: translateY(1px); }
.btn:disabled {
  cursor: not-allowed; transform: none;
  color: var(--text-2); background: transparent; box-shadow: inset 0 0 0 2px var(--edge-dim);
}

/* ───────── Header ───────── */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.brand { display: inline-flex; padding: 8px 0; color: var(--text); }
.brand .wordmark { width: 114px; height: 21px; }
.lang {
  font: 600 0.9375rem/1 var(--font-round); color: var(--text-2); text-decoration: none;
  padding: 10px 12px; margin-right: -12px;
}
.lang:hover { color: var(--text); }

/* ───────── Hero: the promise, then the office inside a MacBook, its notch open on a request ───────── */
.hero { padding: 24px 0 8px; }
.hero-copy { display: grid; gap: 20px; }
.hero h1 {
  font-size: clamp(2.375rem, 1.35rem + 4.3vw, 4.5rem);
  font-weight: 750; line-height: 1.02; letter-spacing: -0.025em; max-width: 12ch;
}
.lead { font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem); line-height: 1.5; color: var(--text-2); max-width: 36ch; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 20px; }
.cta-note { font: 500 0.9375rem/1.3 var(--font-round); color: var(--text-3); }
@media (min-width: 960px) {
  .hero { padding-top: 32px; }
  .hero-copy { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; column-gap: 48px; }
  .hero-side { padding-bottom: 6px; }
}

/* The MacBook is drawn on a grid of 160 × 107 units; --u is one unit in CSS pixels, always a whole number. The notch is part of
   the screen, so it is drawn on the finer grid of the screen's own interface: --n, also a whole number. */
.mac-figure { margin: 40px 0 0; }
.mac { --u: 2px; --n: 2px; position: relative; width: calc(160 * var(--u)); height: calc(107 * var(--u)); margin-inline: auto; }
/* The largest whole unit for which 160 units fit between the 16 px gutters. */
@media (min-width: 520px) { .mac { --u: 3px; } }
@media (min-width: 680px) { .mac { --u: 4px; } }
@media (min-width: 840px) { .mac { --u: 5px; --n: 3px; } }
@media (min-width: 1680px) and (min-height: 980px) { .mac { --u: 6px; } }
.mac-frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.mac-screen {
  position: absolute; left: calc(9 * var(--u)); top: calc(8 * var(--u));
  width: calc(142 * var(--u)); height: calc(90 * var(--u)); overflow: hidden; background: var(--bg);
}
.mac-screen video { width: 100%; height: 100%; object-fit: cover; }
.mac-figure figcaption { margin-top: 16px; text-align: center; }

/* The notch: 84 × 32 of its pixels, hanging from the top of the screen. It opens on a permission request, Allow is pressed,
   the waiting diamond becomes the working disc, and it closes into the hardware notch again: a ten-second loop in
   four-step pixel moves. Closed, it is clipped to a rectangle inside the hardware notch drawn on the frame. */
.notch {
  --closed: inset(0 calc(42 * var(--n) - 11 * var(--u)) calc(32 * var(--n) - 3 * var(--u)) calc(42 * var(--n) - 11 * var(--u)));
  position: absolute; left: calc(80 * var(--u) - 42 * var(--n)); top: calc(4 * var(--u));
  width: calc(84 * var(--n)); height: calc(32 * var(--n));
}
.notch svg { width: 100%; height: 100%; }
.n-work, .n-press { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .notch { clip-path: var(--closed); animation: notch-open 10s steps(4, end) infinite; }
  .n-wait { animation: n-wait 10s steps(1, end) infinite; }
  .n-work { animation: n-work 10s steps(1, end) infinite; }
  .n-press { animation: n-press 10s steps(1, end) infinite; }
  /* Off screen (site.js), the loop stops. */
  .mac[data-offscreen] .notch, .mac[data-offscreen] .notch g { animation-play-state: paused; }
}
@keyframes notch-open {
  0%, 18% { clip-path: var(--closed); }
  22%, 76% { clip-path: inset(0 0 0 0); }
  80%, 100% { clip-path: var(--closed); }
}
@keyframes n-wait { 0% { opacity: 1; } 64% { opacity: 0; } 100% { opacity: 0; } }
@keyframes n-work { 0% { opacity: 0; } 64% { opacity: 1; } 100% { opacity: 1; } }
@keyframes n-press { 0% { opacity: 0; } 61% { opacity: 1; } 64% { opacity: 0; } 100% { opacity: 0; } }

/* ───────── Plates ───────── */
.plate { background: var(--surface); box-shadow: var(--ring); }
.shot { margin: 28px 0 0; background: var(--well); box-shadow: var(--ring); }
.shot img, .shot video { width: 100%; height: auto; }

/* ───────── The floors: the directory on the left, one room per idea on the right ───────── */
.floors { padding: 72px 0 0; }
.directory { display: none; }
@media (min-width: 1100px) {
  .floors { display: grid; grid-template-columns: 216px minmax(0, 880px); justify-content: space-between; column-gap: 64px; }
  .directory { display: block; }
  .directory-plate { position: sticky; top: 24px; padding: 18px 10px 12px; }
}
.dir-sign { width: 129px; height: 33px; margin: 0 auto 14px; }
.directory ol { list-style: none; margin: 0; padding: 0; }
.directory a {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  font: 600 0.9375rem/1.3 var(--font-round); color: var(--text-2); text-decoration: none;
}
.directory a::before { content: ""; flex: none; width: 6px; height: 10px; clip-path: polygon(0 0, 33% 0, 33% 20%, 67% 20%, 67% 40%, 100% 40%, 100% 60%, 67% 60%, 67% 80%, 33% 80%, 33% 100%, 0 100%); }
.directory a:hover { color: var(--text); background: var(--surface-2); }
.directory a[aria-current="true"] { color: var(--text); }
.directory a[aria-current="true"]::before { background: var(--accent); }

/* The rooms are spaced by the gap of their column, so every heading lands at the same height after a jump. */
.rooms { --room-gap: 104px; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--room-gap); }
@media (max-width: 759px) { .rooms { --room-gap: 80px; } }
.room h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; max-width: 24ch; }
:where(.room) > p { margin-top: 12px; color: var(--text-2); max-width: 56ch; }

/* State legend: shape first, then the word (never colour alone). */
.states { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 16px 0 0; padding: 0; font: 600 0.9375rem/1.3 var(--font-round); color: var(--text-2); }
.states li { display: inline-flex; align-items: center; gap: 8px; }
.dot { width: 10px; height: 10px; flex: none; clip-path: var(--px-disc); }
.dot-work { background: var(--work); }
.dot-rest { background: var(--rest); position: relative; }
.dot-rest::after { content: ""; position: absolute; inset: 2px; background: var(--bg); clip-path: var(--px-disc); }
.dot-wait { background: var(--wait); clip-path: var(--px-diamond); width: 12px; height: 12px; }

/* Two rooms side by side. */
.pair { display: grid; gap: var(--room-gap) 40px; }
@media (min-width: 760px) {
  .pair { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); row-gap: 0; }
  .pair .room { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
  .pair .room h2 { max-width: 16ch; align-self: end; }
}

/* ───────── The notch, life-size: a drawing of the real panel (native/Notch) ───────── */
.notch-stage { margin: 28px 0 0; padding: 0 16px 40px; background: var(--well); box-shadow: var(--ring); display: flex; justify-content: center; }
.nb {
  --e: 4px;
  width: min(100%, 500px); padding: calc(2 * var(--e) + 14px) calc(2 * var(--e) + 18px) 18px;
  background: var(--notch); color: var(--text);
  font: 400 0.8125rem/1.35 var(--font-text);
  clip-path: polygon(0 0, 100% 0, 100% var(--e), calc(100% - var(--e)) var(--e), calc(100% - var(--e)) calc(2 * var(--e)), calc(100% - 2 * var(--e)) calc(2 * var(--e)),
    calc(100% - 2 * var(--e)) calc(100% - 2 * var(--e)), calc(100% - 3 * var(--e)) calc(100% - 2 * var(--e)), calc(100% - 3 * var(--e)) calc(100% - var(--e)), calc(100% - 5 * var(--e)) calc(100% - var(--e)), calc(100% - 5 * var(--e)) 100%,
    calc(5 * var(--e)) 100%, calc(5 * var(--e)) calc(100% - var(--e)), calc(3 * var(--e)) calc(100% - var(--e)), calc(3 * var(--e)) calc(100% - 2 * var(--e)), calc(2 * var(--e)) calc(100% - 2 * var(--e)),
    calc(2 * var(--e)) calc(2 * var(--e)), var(--e) calc(2 * var(--e)), var(--e) var(--e), 0 var(--e));
}
.nb-head { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "char text tag"; column-gap: 12px; align-items: start; }
.nb-head > div { grid-area: text; }
@media (max-width: 519px) { .nb-head { grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "char text" "char tag"; row-gap: 8px; } }
.nb-char { grid-area: char; width: 56px; height: 72px; }
.nb-title { font: 600 0.9375rem/1.3 var(--font-text); color: var(--text); }
.nb-sub { font-size: 0.75rem; color: var(--text-2); margin-top: 2px; }
.nb-tool { font: 500 0.8125rem/1.3 var(--font-text); margin-top: 6px; }
.nb-tag { grid-area: tag; justify-self: start; font: 600 0.6875rem/18px var(--font-text); height: 18px; padding: 0 8px; color: var(--on-solid); background: var(--solid-ok); white-space: nowrap; }
.nb-field { margin: 12px 0 0; padding: 8px 10px; background: var(--veil-2); font: 400 0.75rem/1.45 var(--font-mono); color: var(--text); white-space: pre-wrap; }
.nb-field b { color: var(--path); font-weight: 600; }
.nb-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.nb-actions span { display: inline-grid; place-items: center; height: 30px; font: 600 0.8125rem/1 var(--font-text); color: var(--on-solid); padding: 0 12px; }
.nb-deny { min-width: 80px; background: var(--solid-danger); box-shadow: inset 0 calc(-1 * var(--px)) 0 var(--solid-danger-edge); }
.nb-allow { min-width: 96px; background: var(--solid-ok); box-shadow: inset 0 calc(-1 * var(--px)) 0 var(--solid-ok-edge); }

/* ───────── Manhattan, by day or by night ───────── */
.city-views { display: grid; }
.city-views > * { grid-area: 1 / 1; }
/* The night view is not displayed (so not downloaded) until it is chosen; it then fades in above the day video. */
.city-night { display: none; position: relative; z-index: 1; }
#manhattan:has(#city-night:checked) .city-night { display: block; animation: fade-in 400ms ease; }
@keyframes fade-in { from { opacity: 0; } }
.city-switch { display: inline-flex; margin: 16px 0 0; padding: 0; border: 0; box-shadow: inset 0 0 0 1px var(--edge); }
.city-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.city-switch label { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; font: 600 0.9375rem/1 var(--font-round); color: var(--text-2); cursor: pointer; }
.city-switch input:checked + label { color: var(--on-fill); background: var(--accent); box-shadow: var(--bevel-fill); }
.city-switch input:focus-visible + label { outline: 2px solid var(--text); outline-offset: 2px; }

/* ───────── What you need, and the price ───────── */
.deal { display: grid; gap: 32px; }
@media (min-width: 760px) { .deal { grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: stretch; } }
.deal .room { padding: 32px 28px; }
.checks { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; color: var(--text-2); }
.checks li { display: grid; grid-template-columns: 8px 1fr; gap: 14px; align-items: baseline; }
.checks li::before { content: ""; width: 8px; height: 8px; background: var(--accent); transform: translateY(-1px); }
.price { box-shadow: var(--ring-strong); display: flex; flex-direction: column; }
.amount { margin: 16px 0 0; font: 750 clamp(3rem, 2.4rem + 2.4vw, 4.25rem)/1 var(--font-round); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--text); }
.price .cta { margin-top: auto; padding-top: 28px; }
.price .btn { min-width: 120px; }

/* ───────── Questions ───────── */
.faq { margin-top: 24px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 4px; cursor: pointer; list-style: none;
  font: 650 1.0625rem/1.35 var(--font-round); color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 10px; height: 6px; background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% 33%, 80% 33%, 80% 67%, 60% 67%, 60% 100%, 40% 100%, 40% 67%, 20% 67%, 20% 33%, 0 33%);
  transition: transform 150ms var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq summary:hover { color: var(--accent-hi); }
.faq details p { padding: 0 4px 20px; color: var(--text-2); max-width: 64ch; }
.room code { font: 0.9em/1 var(--font-mono); color: var(--text); }

/* ───────── Footer ───────── */
.foot { margin-top: 128px; padding: 40px 0 48px; background: var(--well); box-shadow: 0 -1px 0 var(--line); }
.foot-inner { display: grid; gap: 14px; font-size: 0.875rem; color: var(--text-3); }
.foot .brand { color: var(--text-2); }
.foot .brand .wordmark { width: 76px; height: 14px; }
.foot p { max-width: 72ch; }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.foot nav a { color: var(--text-2); text-underline-offset: 3px; }
.foot nav a:hover { color: var(--text); }

/* ───────── Not found ───────── */
.lost { display: grid; gap: 24px; align-content: center; justify-items: start; min-height: 100vh; padding: 48px 0; }
.lost h1 { font-size: clamp(2rem, 1.4rem + 2.5vw, 3.25rem); font-weight: 750; letter-spacing: -0.02em; }
.lost p:last-child { color: var(--text-2); }