/*
  CHOICEWRIGHT ON THE WEB: ONE STYLESHEET FOR EVERY PAGE (2026-10-02).

  The owner: "a nice site, responsive, that for now will have everything we
  need to actually move. maybe terms subscriptions etc". docs/WEBSITE.md has
  the whole of it; what matters in this file:

  - THE APP'S OWN PALETTE AND TYPE. The colours are src/constants/palette.json
    (ink, parchment, ember, arcane), the faces are the app's Cinzel for titles
    and Spectral for reading (tailwind.config.js), self-hosted from
    /assets/fonts. A visitor who installs the game later should recognise it.
  - DARK ONLY, ON PURPOSE. The game has no light theme; a light website would
    be a second brand. `color-scheme: dark` tells the browser so its own
    controls (scrollbars, form bits) match.
  - CONTRAST, MEASURED (the WCAG formula). Body text is parchment on ink
    (about 17:1). The muted grey is the app's #8E8799 lifted to #A29BAD,
    because the site's small print is 13 to 15 px: 6.9:1 on the card colour,
    7.4:1 on ink. Ember-bright links 9.5 to 10:1; dark text on an ember button
    7.5:1. Arcane violet is lightened to #A893FF for text (7.3:1); the app's
    #7C5CFF stays for diamonds and borders only.
  - MOTION. The hero die floats; prefers-reduced-motion stops it, and every
    other transition, below.
  - SPACING LIVES ON CONTAINERS, the app's own rule (docs/LAYOUT.md): a section
    owns its padding, siblings are spaced with `gap` on the parent.
  - NO EM OR EN DASHES in anything a visitor reads (house rule, pnpm
    check:dashes, which walks site/ since this commit).
*/

@font-face {
  font-family: 'Cinzel';
  src: url('/assets/fonts/cinzel-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Spectral';
  src: url('/assets/fonts/spectral-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Spectral';
  src: url('/assets/fonts/spectral-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Spectral';
  src: url('/assets/fonts/spectral-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #0b0a0f;
  --ink-800: #14121b;
  --ink-700: #1e1b27;
  --ink-600: #2a2635;
  --ink-500: #3a3547;
  --parchment: #f4f1e8;
  --parchment-dim: #c9c3b8;
  --muted: #a29bad;
  --ember: #e8873a;
  --ember-bright: #ffa55c;
  --arcane: #7c5cff;
  --arcane-text: #a893ff;
  --display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --body: 'Spectral', Georgia, 'Times New Roman', serif;
  --wrap: 1200px;
  --gutter: 16px;
  --radius: 16px;
}
@media (min-width: 720px) {
  :root {
    --gutter: 32px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}
body {
  margin: 0;
  background: var(--ink);
  color: var(--parchment);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
  overflow-x: hidden;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--ember-bright);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--parchment);
}
:focus-visible {
  outline: 2px solid var(--ember-bright);
  outline-offset: 3px;
  border-radius: 4px;
}
h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  letter-spacing: 0.02em;
}
p,
ul,
ol {
  margin: 0;
}
strong {
  font-weight: 600;
  color: var(--parchment);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 10;
  background: var(--ember);
  color: var(--ink);
  padding: 8px 14px;
  border-radius: 8px;
}
.skip:focus {
  left: 8px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---- header ------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(11, 10, 15, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink-600);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--parchment);
  text-decoration: none;
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: 0.12em;
}
.brand img {
  width: 30px;
  height: 30px;
  border-radius: 7px;
}
.site-nav {
  display: flex;
  gap: 18px;
  font-size: 16px;
}
.site-nav a {
  color: var(--parchment-dim);
  text-decoration: none;
}
/* Every header link is a 44 px target (2026-10-04, the responsiveness pass the
   owner asked for: "Check also while you are at it for responsiveness"). The
   row links measured 26 px tall and the button 38 to 40. */
.site-nav > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.site-nav a:hover,
.site-nav a[aria-current='page'] {
  color: var(--ember-bright);
}
/* The wordmark stays on a phone (2026-10-04). It was hidden under 480 px, and
   the owner, on a 412 px phone, saw the eye alone and "Support" floating beside
   the button: "that support is not good there placed". The links went into a
   menu (below, .nav-menu), which leaves room for the name down to 320 px; only
   under 390 px does the icon step aside for it (measured: at 360 the icon, the
   name, the button and the menu need 367 px). */
@media (max-width: 479px) {
  .brand {
    font-size: 15px;
    letter-spacing: 0.08em;
  }
  .site-nav {
    gap: 8px;
  }
}
@media (max-width: 389px) {
  .brand img {
    display: none;
  }
  .brand {
    letter-spacing: 0.04em;
  }
}

/* ---- buttons and small parts ------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 14px;
  background: var(--ember);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(232, 135, 58, 0.26);
}
.button:hover {
  background: var(--ember-bright);
  color: var(--ink);
}
.button.quiet {
  background: transparent;
  color: var(--parchment);
  border: 1px solid var(--ink-500);
  box-shadow: none;
}
.button.quiet:hover {
  border-color: var(--ember);
  color: var(--ember-bright);
}
.eyebrow {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ember-bright);
}
.pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--ink-500);
  color: var(--parchment-dim);
  font-size: 14px;
  line-height: 1.4;
}
.pill.ember {
  border-color: rgba(232, 135, 58, 0.5);
  color: var(--ember-bright);
}
.lede {
  font-size: 20px;
  color: var(--parchment-dim);
}
.muted {
  color: var(--muted);
}
.small {
  font-size: 15px;
}

/* ---- sections ----------------------------------------------------------- */

/* 48 px a side on a phone, 72 from 720 px (2026-10-04). The owner, on his
   phone: an "empty" dark band before Plans. It was two section paddings, 144 px
   of nothing between the last card of one section and the eyebrow of the next,
   which on a 412 px screen is a sixth of the view and reads as a block that
   failed to load. The anchored sections also stop clear of the sticky header. */
.section {
  padding: 48px 0;
  scroll-margin-top: 60px;
}
@media (min-width: 720px) {
  .section {
    padding: 72px 0;
  }
}
.section.tight {
  padding: 48px 0;
}
.section + .section {
  border-top: 1px solid var(--ink-700);
}
.section-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
  margin-bottom: 36px;
}
.section-head h2 {
  font-size: clamp(26px, 5vw, 38px);
}

/* ---- hero --------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero-art {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 40%;
  opacity: 0.55;
}
.hero-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 10, 15, 0.35) 0%, rgba(11, 10, 15, 0.7) 55%, var(--ink) 100%),
    linear-gradient(90deg, rgba(11, 10, 15, 0.92) 0%, rgba(11, 10, 15, 0.55) 60%, rgba(11, 10, 15, 0.2) 100%);
}
.hero .wrap {
  display: grid;
  gap: 32px;
  padding-top: 56px;
  padding-bottom: 72px;
  align-items: center;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 620px;
}
.hero h1 {
  font-size: clamp(34px, 8vw, 60px);
  text-wrap: balance;
}
.hero h1 em {
  font-style: normal;
  color: var(--ember-bright);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.soon {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  border: 1px solid var(--ink-500);
  border-radius: 14px;
  background: rgba(20, 18, 27, 0.8);
}
.soon strong {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.08em;
}
.soon span {
  font-size: 15px;
  color: var(--muted);
}
.hero-die {
  justify-self: center;
  width: min(220px, 52vw);
  filter: drop-shadow(0 0 40px rgba(124, 92, 255, 0.45));
  animation: float 7s ease-in-out infinite;
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
@media (min-width: 900px) {
  .hero .wrap {
    grid-template-columns: 1.4fr 1fr;
    padding-top: 96px;
    padding-bottom: 112px;
    min-height: 560px;
  }
  .hero-die {
    width: 300px;
    order: 2;
  }
}
@media (max-width: 899px) {
  .hero-die {
    order: -1;
  }
}

/* ---- steps, features, cards -------------------------------------------- */

.steps {
  display: grid;
  gap: 16px;
  counter-reset: step;
  padding: 0;
  list-style: none;
}
@media (min-width: 760px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}
.steps li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--ink-600);
  border-radius: var(--radius);
  background: var(--ink-800);
}
.steps li::before {
  counter-increment: step;
  content: counter(step, upper-roman);
  font-family: var(--display);
  font-size: 22px;
  color: var(--ember-bright);
}
.steps h3,
.card h3 {
  font-size: 20px;
}
.steps p,
.card p {
  color: var(--parchment-dim);
}

.feature {
  display: grid;
  gap: 24px;
  align-items: center;
}
.feature + .feature {
  margin-top: 56px;
}
.feature-art {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--ink-600);
  background: var(--ink-800);
  aspect-ratio: 6 / 5;
}
.feature-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feature-copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.feature-copy h3 {
  font-size: clamp(22px, 4vw, 30px);
}
.feature-copy p {
  color: var(--parchment-dim);
}
.ticks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  list-style: none;
}
.ticks li {
  position: relative;
  padding-left: 26px;
  color: var(--parchment-dim);
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  background: var(--ember);
  border-radius: 2px;
}
@media (min-width: 860px) {
  .feature {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
  }
  .feature.flip .feature-art {
    order: 2;
  }
}

.grid {
  display: grid;
  gap: 16px;
}
@media (min-width: 640px) {
  .grid.two {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .grid.three {
    grid-template-columns: repeat(3, 1fr);
  }
}
.card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--ink-600);
  border-radius: var(--radius);
  background: var(--ink-800);
}

/* Written adventures: a cover, its title, its one line. */
.shelf {
  display: grid;
  gap: 20px;
}
@media (min-width: 640px) {
  .shelf {
    grid-template-columns: repeat(3, 1fr);
  }
}
.book {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ink-600);
  border-radius: var(--radius);
  background: var(--ink-800);
  overflow: hidden;
}
.book img {
  aspect-ratio: 1;
  width: 100%;
  object-fit: cover;
}
.book-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 22px;
}
.book h3 {
  font-size: 18px;
}
.book p {
  color: var(--parchment-dim);
  font-size: 16px;
}
/*
  "More on the way" (2026-10-05; the owner: "at the written stories do write
  more coming"): the width of the shelf, after the books, a dashed edge so it
  reads as a promise of more rather than a fourth book.
*/
.shelf-more {
  grid-column: 1 / -1;
  border-style: dashed;
  background: transparent;
}
/* The line under the reward cards (2026-10-05, gen:rewards). The grid owns the gap above it. */
.rewards-note {
  margin-top: 16px;
}
.book .facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* On a phone a square cover is a whole screen each: a shelf row instead. */
@media (max-width: 639px) {
  .book {
    flex-direction: row;
    align-items: stretch;
  }
  .book img {
    width: 112px;
    flex: none;
    aspect-ratio: auto;
    object-fit: cover;
  }
  .book-body {
    padding: 14px 16px;
    gap: 6px;
  }
  .book p {
    font-size: 15px;
  }
  .book .pill {
    font-size: 13px;
    padding: 2px 10px;
  }
  .feature-art {
    aspect-ratio: 16 / 10;
  }
}

/* ---- plans -------------------------------------------------------------- */

/*
  ONE ROW, NOT A STACK (2026-10-04, later). The owner: "the subscription plans
  as side-by-side cards on desktop and a swipeable/segmented row on phones
  with the recommended plan highlighted". Below 1180 px the five plans are a
  row you swipe (snap to a card; /assets/home.js starts it on the Recommended
  one); from 1180 px all five sit side by side. They were one card a screen
  on a phone before, five screens of prices.
*/
.plans {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78vw, 290px);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 18px var(--gutter) 22px;
  margin: 0 calc(-1 * var(--gutter));
  scrollbar-width: thin;
  scrollbar-color: var(--ink-500) transparent;
}
.plans > .plan {
  scroll-snap-align: center;
}
@media (min-width: 1180px) {
  .plans {
    grid-auto-flow: row;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-columns: auto;
    overflow: visible;
    margin: 0;
    padding: 18px 0 0;
    gap: 14px;
  }
  .plans-hint {
    display: none;
  }
}
.plan {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 20px;
  border: 1px solid var(--ink-600);
  border-radius: var(--radius);
  background: var(--ink-800);
}
.plan.top {
  border-color: rgba(124, 92, 255, 0.55);
  background: linear-gradient(180deg, rgba(124, 92, 255, 0.14), var(--ink-800) 60%);
}
.plan h3 {
  font-size: 19px;
}
.plan .price {
  font-family: var(--display);
  font-size: 26px;
  color: var(--ember-bright);
  line-height: 1.1;
}
.plan .price small {
  font-family: var(--body);
  font-size: 15px;
  color: var(--muted);
  letter-spacing: 0;
}
.plan .price.open {
  font-size: 17px;
  color: var(--arcane-text);
}
.plan .about {
  color: var(--parchment-dim);
  font-size: 16px;
  font-style: italic;
}
.plan ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  list-style: none;
  font-size: 15px;
  color: var(--parchment-dim);
}
.plan li {
  position: relative;
  padding-left: 18px;
}
.plan li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--ember);
}
.plan.top li::before {
  background: var(--arcane);
}
.extras {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}
@media (min-width: 760px) {
  .extras {
    grid-template-columns: repeat(3, 1fr);
  }
}
.notes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 24px;
  font-size: 15px;
  color: var(--muted);
}

/* ---- closing call ------------------------------------------------------- */

.closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  padding: 40px 24px;
  border: 1px solid var(--ink-600);
  border-radius: 24px;
  background:
    radial-gradient(ellipse at top, rgba(232, 135, 58, 0.18), transparent 65%),
    var(--ink-800);
}
.closing h2 {
  font-size: clamp(24px, 5vw, 34px);
}
.closing p {
  max-width: 560px;
  color: var(--parchment-dim);
}

/* ---- reading pages (legal, subscriptions, support) ---------------------- */

.page-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 48px 0 28px;
  border-bottom: 1px solid var(--ink-700);
  margin-bottom: 32px;
}
.page-head h1 {
  font-size: clamp(30px, 6vw, 44px);
}
.page-head .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.reading {
  display: grid;
  gap: 32px;
  padding-bottom: 72px;
}
@media (min-width: 960px) {
  .reading.with-toc {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 56px;
  }
}
/*
  THE CONTENTS, TWICE (2026-10-02): a folded <details> on a phone, where a
  sixteen-line list before the first word would push the text a screen down,
  and an open sticky list beside the text on a wide screen. Two copies rather
  than one <details> forced open, because a closed <details> hides its
  contents in most browsers whatever the stylesheet says, and the site has no
  script to open it.
*/
.toc {
  font-size: 15px;
}
.toc-mobile {
  border: 1px solid var(--ink-600);
  border-radius: 12px;
  background: var(--ink-800);
  padding: 0 16px;
}
/* A 44 px tap target (2026-10-04, responsiveness pass): the summary was the
   21 px line of its text, inside a box that looked four times bigger. */
.toc-mobile summary {
  display: flex;
  align-items: center;
  min-height: 44px;
}
.toc-mobile ol {
  margin-bottom: 14px;
}
.toc summary,
.toc-title {
  cursor: pointer;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--parchment-dim);
}
.toc ol {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
  padding: 0;
  list-style: none;
}
.toc a {
  color: var(--parchment-dim);
  text-decoration: none;
}
.toc a:hover {
  color: var(--ember-bright);
}
.toc-desktop {
  display: none;
}
@media (min-width: 960px) {
  .toc > div {
    position: sticky;
    top: 84px;
  }
  .toc-mobile {
    display: none;
  }
  .toc-desktop {
    display: block;
  }
  .toc-title {
    cursor: default;
  }
}

/* Long addresses break instead of widening the page (2026-10-04,
   responsiveness pass). The SRD notice's licence URL is one unbreakable word,
   and it pushed /terms to 443 px on every phone from 320 to 412. "anywhere"
   rather than "break-word" because only "anywhere" lowers the min-content
   width, which is what the reading grid sizes its column by. */
.prose,
.footer-fine,
.facts-table dd {
  overflow-wrap: anywhere;
}
.prose {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
  min-width: 0;
  font-size: 18px;
}
.prose h2 {
  font-size: 22px;
  margin-top: 24px;
  scroll-margin-top: 80px;
}
.prose h3 {
  font-size: 18px;
  margin-top: 12px;
  scroll-margin-top: 80px;
  color: var(--parchment-dim);
}
.prose p,
.prose li {
  color: var(--parchment-dim);
}
.prose ul,
.prose ol {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 24px;
}
.prose ul ul,
.prose ol ol,
.prose ul ol,
.prose ol ul {
  margin-top: 8px;
}
.prose blockquote {
  margin: 0;
  padding: 12px 18px;
  border-left: 3px solid var(--ember);
  background: var(--ink-800);
  border-radius: 0 12px 12px 0;
}
.prose hr {
  border: 0;
  border-top: 1px solid var(--ink-600);
  margin: 8px 0;
}
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ink-600);
  border-radius: 12px;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.prose th,
.prose td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--ink-600);
}
.prose th {
  font-weight: 600;
  color: var(--parchment);
  background: var(--ink-800);
}
.prose tr:last-child td {
  border-bottom: 0;
}
.prose .panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--ink-600);
  border-radius: var(--radius);
  background: var(--ink-800);
}
.prose .panel h2,
.prose .panel h3 {
  margin-top: 0;
}
.prose .callout {
  border-color: rgba(232, 135, 58, 0.5);
}
.faq {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq details {
  border: 1px solid var(--ink-600);
  border-radius: 12px;
  background: var(--ink-800);
}
.faq summary {
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 600;
  color: var(--parchment);
}
.faq details > div {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 18px 16px;
}

/* ---- footer ------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--ink-600);
  background: var(--ink-800);
  font-size: 15px;
  color: var(--muted);
}
.site-footer .wrap {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 40px;
  padding-bottom: 40px;
}
.footer-cols {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px) {
  .footer-cols {
    grid-template-columns: 1.4fr repeat(3, 1fr);
  }
}
.footer-cols h2 {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--parchment-dim);
  margin-bottom: 10px;
}
.footer-cols ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  list-style: none;
}
.footer-cols a {
  color: var(--muted);
  text-decoration: none;
}
.footer-cols a:hover {
  color: var(--ember-bright);
}
.footer-brand {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 760px) {
  .footer-brand {
    grid-column: auto;
  }
}
.footer-fine {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--ink-600);
  font-size: 13px;
  line-height: 1.55;
}
.footer-fine a {
  color: var(--muted);
}

/* ---- the 404 ------------------------------------------------------------ */

.lost {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  padding: 72px 0 96px;
}
.lost img {
  width: 140px;
  opacity: 0.85;
  filter: drop-shadow(0 0 30px rgba(124, 92, 255, 0.4));
}
.lost h1 {
  font-size: clamp(28px, 6vw, 40px);
}
.lost p {
  max-width: 520px;
  color: var(--parchment-dim);
}

.extras .card p {
  font-size: 16px;
}
.plan .fine {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--ink-600);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.card h3 span {
  font-family: var(--body);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
}

/*
  A TABLE THAT STACKS ON A PHONE (2026-10-02). Below 640 px each row becomes
  a card and each cell says its column (data-label, written by
  scripts/site.mjs), so nothing scrolls sideways or cuts a sentence.
*/
.prose td[data-label='Price'] {
  white-space: nowrap;
}
@media (max-width: 639px) {
  .stacked {
    border: 0;
    overflow: visible;
  }
  .stacked table,
  .stacked tbody,
  .stacked tr,
  .stacked td {
    display: block;
    width: 100%;
  }
  .stacked thead {
    display: none;
  }
  .stacked tbody {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .stacked tr {
    border: 1px solid var(--ink-600);
    border-radius: 12px;
    background: var(--ink-800);
    padding: 6px 0;
  }
  .stacked td {
    border: 0;
    padding: 6px 16px;
  }
  .stacked td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--display);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .stacked td[data-label='What']::before {
    display: none;
  }
  .stacked td[data-label='What'] {
    font-size: 19px;
  }
}

/* A reading page with no contents column sits in one centred column. */
.wrap.narrow {
  max-width: 820px;
}
.wrap.narrow .prose {
  max-width: none;
}
.site-footer .brand span {
  display: inline;
}

/* ==========================================================================
   THE MARKETING PAGE (2026-10-04, docs/WEBSITE.md "The marketing site").

   The owner: "Also a marketing page ... If i want to go to reddit to promote
   my app i will use that link so we need this to work well so design it
   well." What changed and why, in short (the research is in the doc):
   - THE GAME IS VISIBLE ABOVE THE FOLD. A visitor from a Reddit post decides
     in seconds; the old hero showed a die and a tavern table, which says
     "fantasy" and not "a game you play by choosing". Now two real
     screenshots in phones sit beside the pitch, on the painted book.
   - PHONES ARE CSS, NOT PICTURES OF PHONES. The screenshot is the only
     image; the frame is a border and a radius, so it stays crisp at any
     size, weighs nothing, and draws no real brand's hardware.
   - On a phone the four "how it plays" steps are a row you swipe (scroll
     snap) inside the page, not four full-height screenshots stacked: that
     was four screens of scrolling before the first word about the AI.
     The page itself never scrolls sideways (body overflow-x: hidden).
   - Spacing on containers with gap, as everywhere here (docs/LAYOUT.md).
   ========================================================================== */

.site-nav .nav-cta {
  white-space: nowrap;
  color: var(--ink);
  background: var(--ember);
  padding: 6px 14px;
  border-radius: 10px;
  font-weight: 600;
}
.site-nav .nav-cta:hover {
  background: var(--ember-bright);
  color: var(--ink);
}
@media (max-width: 719px) {
  .site-nav .nav-wide {
    display: none;
  }
  .site-nav .nav-cta {
    padding: 0 12px;
    font-size: 15px;
  }
}
.site-nav {
  align-items: center;
}
/* The phone menu (2026-10-04, the owner: "that support is not good there
   placed"). A <details>, so it works with no script and the keyboard; the
   summary is a 44 px target (Apple's and WCAG's minimum for a tap). Hidden at
   720 px and up, where the same links sit in the row. */
.nav-menu {
  position: relative;
}
.nav-menu summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--ink-500);
  cursor: pointer;
}
.nav-menu summary::-webkit-details-marker {
  display: none;
}
.nav-menu[open] summary,
.nav-menu summary:hover {
  border-color: var(--ember);
}
.nav-menu .bars,
.nav-menu .bars::before,
.nav-menu .bars::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--parchment);
}
.nav-menu .bars {
  position: relative;
}
.nav-menu .bars::before,
.nav-menu .bars::after {
  content: '';
  position: absolute;
  left: 0;
}
.nav-menu .bars::before {
  top: -6px;
}
.nav-menu .bars::after {
  top: 6px;
}
.nav-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--ink-500);
  background: var(--ink-800, #14121b);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}
.nav-menu-list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 17px;
}
.nav-menu-list a:hover {
  background: rgba(255, 255, 255, 0.04);
}
@media (min-width: 720px) {
  .nav-menu {
    display: none;
  }
}

/* ---- phones ------------------------------------------------------------- */

.phone {
  position: relative;
  width: var(--pw, 260px);
  flex: none;
  padding: calc(var(--pw, 260px) * 0.035);
  border-radius: calc(var(--pw, 260px) * 0.13);
  background: linear-gradient(160deg, #2a2635 0%, #14121b 60%);
  border: 1px solid var(--ink-500);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}
.phone img {
  width: 100%;
  height: auto;
  border-radius: calc(var(--pw, 260px) * 0.1);
  background: var(--ink-800);
}

/* ---- the hero, with the game in it -------------------------------------- */

.hero.showcase .hero-art img {
  opacity: 0.6;
  object-position: 70% 50%;
}
.hero.showcase .hero-art::after {
  background:
    linear-gradient(180deg, rgba(11, 10, 15, 0.25) 0%, rgba(11, 10, 15, 0.55) 60%, var(--ink) 100%),
    linear-gradient(90deg, rgba(11, 10, 15, 0.94) 0%, rgba(11, 10, 15, 0.6) 55%, rgba(11, 10, 15, 0.25) 100%);
}
.hero.showcase .wrap {
  padding-top: 40px;
  padding-bottom: 56px;
}
.facts-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hero-phones {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.hero-phones .phone.front {
  --pw: min(250px, 62vw);
  z-index: 1;
}
.hero-phones .phone.back {
  --pw: min(210px, 50vw);
  margin-right: calc(min(210px, 50vw) * -0.42);
  transform: rotate(-6deg) translateY(-18px);
  opacity: 0.92;
}
@media (min-width: 900px) {
  .hero.showcase .wrap {
    grid-template-columns: 1.15fr 1fr;
    padding-top: 72px;
    padding-bottom: 88px;
  }
  .hero-phones .phone.front {
    --pw: 290px;
  }
  .hero-phones .phone.back {
    --pw: 240px;
    margin-right: -90px;
  }
}

/* ---- how it plays, in four phones ------------------------------------------ */

.walk {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(74vw, 290px);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px var(--gutter) 20px;
  margin: 0 calc(-1 * var(--gutter));
  list-style: none;
  counter-reset: walk;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-500) transparent;
}
.walk li {
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-snap-align: center;
  counter-increment: walk;
}
.walk .phone {
  width: 100%;
  padding: 8px;
  border-radius: 34px;
}
.walk .phone img {
  border-radius: 27px;
}
.walk h3 {
  font-size: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.walk h3::before {
  content: counter(walk);
  font-size: 14px;
  color: var(--ink);
  background: var(--ember);
  border-radius: 999px;
  min-width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.walk p {
  color: var(--parchment-dim);
  font-size: 17px;
}
.swipe-hint {
  font-size: 15px;
  color: var(--muted);
}
@media (min-width: 1000px) {
  .walk {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-columns: auto;
    overflow: visible;
    margin: 0;
    padding: 0;
  }
  .swipe-hint {
    display: none;
  }
}

/* ---- features with a phone ---------------------------------------------- */

.showpiece {
  display: grid;
  gap: 28px;
  align-items: center;
}
.showpiece + .showpiece {
  margin-top: 64px;
}
.showpiece .phone {
  --pw: min(260px, 70vw);
  justify-self: center;
}
@media (min-width: 860px) {
  .showpiece {
    grid-template-columns: 300px 1fr;
    gap: 56px;
  }
  .showpiece.flip {
    grid-template-columns: 1fr 300px;
  }
  .showpiece.flip .phone {
    order: 2;
  }
  .showpiece .phone {
    --pw: 280px;
  }
}

/* ---- the AI, honestly --------------------------------------------------- */

.honest {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.honest-art {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.honest-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  opacity: 0.32;
}
.honest-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--ink) 0%, rgba(11, 10, 15, 0.55) 30%, rgba(11, 10, 15, 0.7) 70%, var(--ink) 100%);
}
.two-lists {
  display: grid;
  gap: 16px;
}
@media (min-width: 760px) {
  .two-lists {
    grid-template-columns: 1fr 1fr;
  }
}
.two-lists .card {
  background: rgba(20, 18, 27, 0.9);
}

/* ---- the beta box and store buttons ---------------------------------------- */

.beta {
  display: grid;
  gap: 20px;
  padding: 28px;
  border: 1px solid rgba(232, 135, 58, 0.45);
  border-radius: 20px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(124, 92, 255, 0.16), transparent 60%), var(--ink-800);
}
.beta h2 {
  font-size: clamp(24px, 4.5vw, 34px);
}
.store-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.store-row .button {
  min-width: 230px;
  justify-content: flex-start;
}
.store-row .button span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
}
.store-row .button small {
  font-size: 13px;
  font-weight: 400;
  opacity: 0.85;
}
.store-row svg {
  width: 22px;
  height: 22px;
  flex: none;
}

/* ---- the press kit ------------------------------------------------------ */

.facts-table {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 20px;
  margin: 0;
}
/* Label above value on a small phone (2026-10-04, responsiveness pass): two
   columns ran the press kit's facts 13 px off a 320 px screen. */
@media (max-width: 479px) {
  .facts-table {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .facts-table dd + dt {
    margin-top: 12px;
  }
}
.facts-table dt {
  color: var(--muted);
}
.facts-table dd {
  margin: 0;
}
.press-shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}
.press-shots a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
}
.press-shots img,
.press-art img {
  border-radius: 14px;
  border: 1px solid var(--ink-600);
}
.press-art {
  display: grid;
  gap: 16px;
}
.press-art a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
}
@media (min-width: 760px) {
  .press-art {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- the deletion form (/delete-account) -------------------------------- */

.web-delete form,
.web-delete > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.web-delete label {
  font-weight: 600;
}
.web-delete input[type='email'],
.web-delete input[type='text'] {
  font: inherit;
  color: var(--parchment);
  background: var(--ink);
  border: 1px solid var(--ink-500);
  border-radius: 12px;
  padding: 12px 14px;
  min-height: 48px;
  width: 100%;
  max-width: 420px;
}
.web-delete input:focus-visible {
  border-color: var(--ember);
}
.web-delete .row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.web-delete .check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-weight: 400;
}
.web-delete .check input {
  width: 20px;
  height: 20px;
  margin-top: 4px;
  accent-color: var(--ember);
  flex: none;
}
.web-delete .note {
  font-size: 16px;
  color: var(--parchment-dim);
}
.web-delete .note:empty {
  display: none;
}
.web-delete [hidden] {
  display: none !important;
}
button.button {
  cursor: pointer;
  border: 0;
  align-self: flex-start;
}
.button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
button.button.quiet {
  border: 1px solid var(--ink-500);
}
/* Delete is red: the app's fumble colour; dark text on it is 5.7:1, and the light red text #ff8a84 is 8.1:1 on the card colour. */
.button.danger {
  background: #f0554f;
  box-shadow: 0 10px 30px rgba(240, 85, 79, 0.25);
}
.button.danger:hover {
  background: #ff7a74;
}
.button.danger-quiet {
  background: transparent;
  color: #ff8a84;
  border: 1px solid rgba(240, 85, 79, 0.6);
  box-shadow: none;
}
.button.danger-quiet:hover {
  color: var(--parchment);
  border-color: #ff8a84;
}

/* ---- the friend's code and the join code (/r, /join) ---------------------- */

.code-box {
  font-family: var(--display);
  font-size: clamp(30px, 9vw, 46px);
  letter-spacing: 0.18em;
  color: var(--ember-bright);
  padding: 12px 22px;
  border: 1px dashed rgba(232, 135, 58, 0.6);
  border-radius: 16px;
  background: var(--ink-800);
  align-self: flex-start;
  user-select: all;
}
.invite {
  display: grid;
  gap: 32px;
  align-items: center;
}
.invite-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.invite .phone {
  --pw: min(240px, 64vw);
  justify-self: center;
}
@media (min-width: 860px) {
  .invite {
    grid-template-columns: 1fr 300px;
  }
  .invite .phone {
    --pw: 270px;
  }
}
.bad {
  color: #ff8a84;
}

/* The hero headline a little smaller on a wide screen (2026-10-04): beside two phones, 60 px broke it into five lines. */
.hero.showcase h1 {
  font-size: clamp(34px, 7vw, 54px);
}

/* ---- the promo video (2026-10-04, docs/WEBSITE.md "The promo video") -------
   The owner: "can you record videos to be added like a promo and add it there
   too?" Its own block under the four steps, the same rounded edge as the
   phones but no phone around it: the video already frames the screen on a
   painting with a caption. Sized by width with aspect-ratio, so nothing moves
   when the poster loads (no layout shift). */
.promo {
  margin: 40px auto 0;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.promo video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  border: 1px solid var(--ink-500);
  background: var(--ink-800);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}
.promo figcaption {
  text-align: center;
  font-size: 15px;
  color: var(--muted);
}

/* ==== MOTION AND THE PRICE TABS (2026-10-04, later) ========================

  The owner, after seeing the new site: "Website should have some animations
  and I think a better structure, especially in the plans/packages --
  everything is dumped in whole pages without epic animations."

  The rules every effect below keeps, and why:
  - ONLY transform and opacity move. They run on the compositor, so a phone
    scrolls at full speed and nothing is laid out again (docs/PERFORMANCE.md
    says the same for the app). No animated box-shadow, filter or size: a
    glow is a pseudo-element whose OPACITY changes.
  - NOTHING SHIFTS. A reveal starts already in its place (translate only),
    so the layout is final from the first paint: CLS stays where it was.
  - NOTHING ABOVE THE FOLD HIDES. /assets/home.js marks only elements that
    start below the screen, so the first screen never blinks, and without
    the script everything is simply visible.
  - prefers-reduced-motion (the OS accessibility setting; no switch on the
    site, the owner's call): the global rule near the top stops every
    animation and transition, and home.js does nothing then.
  - No library. GSAP would be about 70 KB for what thirty lines of
    IntersectionObserver do; it does not earn its weight here.
*/

/* The sky: two slow glows behind the whole page, the app's arcane and ember. */
body::before {
  content: '';
  position: fixed;
  inset: -25vmax;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40vmax 30vmax at 20% 25%, rgba(124, 92, 255, 0.11), transparent 70%),
    radial-gradient(36vmax 28vmax at 80% 70%, rgba(232, 135, 58, 0.08), transparent 70%);
  animation: sky 38s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes sky {
  to {
    transform: translate3d(6vmax, -4vmax, 0) rotate(8deg);
  }
}

/* Reveal on scroll: home.js adds .rv to what starts below the screen, .in when it arrives. */
.rv {
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(0.985);
  transition:
    opacity 0.7s ease var(--d, 0s),
    transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0s);
}
.rv.in {
  opacity: 1;
  transform: none;
}

/* The hero's phones: a slow float, and a little parallax from home.js (--par). */
.hero-phones .phone {
  animation: bob 7s ease-in-out infinite;
}
.hero-phones .phone.front {
  transform: translate3d(0, var(--par, 0px), 0);
}
.hero-phones .phone.back {
  transform: rotate(-6deg) translate3d(0, calc(-18px + var(--par-back, 0px)), 0);
  animation-delay: -3.5s;
}
@keyframes bob {
  50% {
    translate: 0 -10px;
  }
}

/* The eye glows: the header's icon breathes, as the app's turn button does. */
.brand {
  position: relative;
  isolation: isolate;
}
.brand::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 50%;
  width: 42px;
  height: 42px;
  margin-top: -21px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 135, 58, 0.55), transparent 65%);
  opacity: 0.35;
  z-index: -1;
  animation: breathe 4s ease-in-out infinite;
}
@keyframes breathe {
  50% {
    opacity: 0.9;
    transform: scale(1.18);
  }
}

/* The step numbers of "how a turn plays" pop as each step arrives. */
.walk.in h3::before {
  animation: pop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) calc(var(--i, 0) * 0.15s + 0.3s) both;
}
.walk li:nth-child(2) {
  --i: 1;
}
.walk li:nth-child(3) {
  --i: 2;
}
.walk li:nth-child(4) {
  --i: 3;
}
@keyframes pop {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
}

/* Cards lift on hover (and on a tap, through :active); the glow is an opacity. */
.plan,
.card.glow {
  position: relative;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.showpiece .phone,
.walk .phone {
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.plan::after,
.card.glow::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    0 0 0 1px rgba(232, 135, 58, 0.6),
    0 18px 50px rgba(232, 135, 58, 0.18);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.plan:hover,
.plan:active,
.card.glow:hover {
  transform: translate3d(0, -6px, 0);
}
.plan:hover::after,
.plan:active::after,
.card.glow:hover::after {
  opacity: 1;
}
.showpiece .phone:hover,
.walk .phone:hover {
  transform: translate3d(0, -6px, 0) rotate(-1deg);
}

/* The recommended plan: its own colour, a label, and a slow pulse of light. */
.plan.pick {
  border-color: rgba(232, 135, 58, 0.7);
  background: linear-gradient(180deg, rgba(232, 135, 58, 0.16), var(--ink-800) 55%);
}
.plan.pick::after {
  opacity: 0.55;
  animation: halo 3.2s ease-in-out infinite;
}
.plan.pick:hover::after {
  animation: none;
  opacity: 1;
}
@keyframes halo {
  50% {
    opacity: 1;
  }
}
.plan .badge {
  position: absolute;
  top: -12px;
  left: 20px;
  margin: 0;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--ember);
  color: var(--ink);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The two explainers above the prices. */
.explain {
  display: grid;
  gap: 16px;
  margin-bottom: 28px;
}
@media (min-width: 760px) {
  .explain {
    grid-template-columns: 1fr 1fr;
  }
}
/* Compact (2026-10-04): at full card size the two took a whole phone screen before a price. */
.explain .card {
  padding: 16px 18px;
  gap: 4px;
}
.explain .card h3 {
  font-size: 17px;
}
.explain .card p {
  font-size: 15px;
  line-height: 1.5;
}
/* Under 390 px the header's icon steps aside (above), so its glow does too. */
@media (max-width: 389px) {
  .brand::before {
    display: none;
  }
}

/* The price tabs. Without JavaScript the tab row stays hidden and every panel shows. */
.tab-list {
  display: flex;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  padding: 4px;
  margin-bottom: 8px;
  border: 1px solid var(--ink-600);
  border-radius: 999px;
  background: var(--ink-800);
  scrollbar-width: none;
}
.tab-list[hidden] {
  display: none;
}
.tab-list button {
  flex: none;
  height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--parchment-dim);
  font: 600 15px/1 var(--body);
  cursor: pointer;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}
.tab-list button:hover {
  color: var(--parchment);
}
.tab-list button[aria-selected='true'] {
  background: var(--ember);
  color: var(--ink);
}
/* Measured at 390 and 320 (2026-10-04): the four labels fit only like this. */
@media (max-width: 479px) {
  .tab-list button {
    padding: 0 12px;
    font-size: 14px;
  }
}
@media (max-width: 369px) {
  .tab-list {
    gap: 0;
  }
  .tab-list button {
    padding: 0 7px;
    font-size: 13px;
  }
}
.tab-panel + .tab-panel {
  margin-top: 36px;
}
.tabs.on .tab-panel + .tab-panel {
  margin-top: 0;
}
.tabs.on .tab-panel {
  animation: panel-in 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.tabs.on .tab-panel[hidden] {
  display: none;
}
@keyframes panel-in {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
}
.panel-title {
  font-size: 20px;
  margin-bottom: 6px;
}
.tabs.on .panel-title,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.panel-lede {
  max-width: 760px;
  margin: 14px 0 16px;
  color: var(--parchment-dim);
  font-size: 16px;
}
.table-scroll {
  overflow-x: auto;
}
.price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
}
.price-table th,
.price-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--ink-600);
  vertical-align: top;
}
.price-table thead th {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.price-table tbody th {
  color: var(--parchment);
  font-weight: 600;
}
.price-table td {
  color: var(--parchment-dim);
}
.price-table .num {
  color: var(--ember-bright);
  font-family: var(--display);
  white-space: nowrap;
}
.price-table tbody tr:last-child > * {
  border-bottom: 0;
}
.price-table tbody tr {
  transition: background-color 0.2s ease;
}
.price-table tbody tr:hover {
  background: rgba(232, 135, 58, 0.06);
}
@media (max-width: 479px) {
  .price-table {
    font-size: 15px;
  }
  .price-table th,
  .price-table td {
    padding: 10px 8px;
  }
}
.section-head.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.see .promo {
  margin-top: 0;
}

/* The feature clips (2026-10-04, later): a muted loop laid exactly over the
   still inside a CSS phone, faded in once it is really playing (promo.js adds
   .live), so a slow network or reduced motion shows the still and nothing moves. */
.phone .clip {
  position: absolute;
  inset: calc(var(--pw, 260px) * 0.035);
  width: calc(100% - var(--pw, 260px) * 0.07);
  height: calc(100% - var(--pw, 260px) * 0.07);
  object-fit: cover;
  border-radius: calc(var(--pw, 260px) * 0.1);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.walk .phone .clip {
  inset: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  border-radius: 27px;
}
.phone .clip.live {
  opacity: 1;
}