/* ==========================================================================
   base.css: layout and components for the "get started" prototype.
   Uses tokens only. No raw colours, font names, radii, shadows or durations
   appear here, except in the clearly marked switcher block at the very end.

   Custom properties that start with "--_" are component-internal plumbing
   (--_btn-ink, --_badge-dot, --_callout-icon/-bg/-ink, --_progress,
   --_progress-value, --_fan-w, --_topbar-h, --_indicator-size, --_fit). They are not
   part of the token contract in section 6 of the brief: look files must not
   set them, and they always resolve to a contract token or a size.

   Contract tokens this file does not use yet, kept reserved for the design
   system: --radius-lg, --radius-xl, --shadow-xs, --shadow-sm, --space-20.
   Classes the brief names that no screen uses yet, kept for the same reason:
   .btn--block, .input--lg, .badge--tint-1, .badge--tint-5, and the heading
   scale .h2 to .h4. Everything else defined here is used by index.html.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset and page
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
}
html[data-theme="dark"] { color-scheme: dark; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-page);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
/* Headings take their size from a class, never from the tag. */
h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; line-height: inherit; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { cursor: pointer; }
a { color: inherit; }
strong { font-weight: var(--font-weight-semibold); }
[hidden] { display: none !important; }

/* One focus ring for everything focusable: 2px, offset 2px, ring colour. */
:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* Motion off: the system setting or still=1 in the hash. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
html[data-still="1"] *,
html[data-still="1"] *::before,
html[data-still="1"] *::after {
  animation: none !important;
  transition: none !important;
}

/* --------------------------------------------------------------------------
   2. Icons (Lucide symbols inlined in index.html)
   -------------------------------------------------------------------------- */

.icon {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--sm { width: 1em; height: 1em; }
.icon--spin { animation: spin calc(var(--duration-slow) * 3) linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

.display,
.h1, .h2, .h3, .h4,
.question__title {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  line-height: var(--heading-leading);
  color: var(--color-ink);
  text-wrap: balance;
}
.display { font-size: var(--text-5xl); }
.h1, .question__title { font-size: var(--text-3xl); }
.h2 { font-size: var(--text-2xl); }
.h3 { font-size: var(--text-xl); line-height: var(--leading-snug); }
.h4 { font-size: var(--text-lg); line-height: var(--leading-snug); letter-spacing: 0; }

.lede,
.question__help {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
  text-wrap: pretty;
}
.eyebrow {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-muted);
}
.text-muted { color: var(--color-ink-muted); }
.text-sm { font-size: var(--text-sm); }
.text-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   4. Layout: screens, containers, top bar, wizard frame
   -------------------------------------------------------------------------- */

.screen { display: none; }
.screen.is-active { display: block; }

.container {
  width: 100%;
  margin: 0 auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}
.container--step { max-width: calc(var(--width-step) + var(--space-6) * 2); }
.container--wide { max-width: calc(var(--width-wide) + var(--space-6) * 2); }
.container--page { max-width: calc(var(--width-page) + var(--space-6) * 2); }

/* Top bar. Its height is one private property so the welcome screen's
   full-height hero can subtract it; the phone override lives in section 18. */
.app { --_topbar-h: 64px; }
.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--_topbar-h);
  padding: 0 var(--space-6);
  background: var(--color-page);
  border-bottom: var(--border-width) solid var(--color-line);
}
.topbar__nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: var(--space-4);
}
.topbar__spacer { flex: 1; }
.topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.nav-link {
  display: inline-flex;
  align-items: center;
  height: var(--control-h-sm);
  padding: 0 var(--space-3);
  border-radius: var(--radius-control);
  color: var(--color-ink-muted);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.nav-link:hover { color: var(--color-ink); }
.nav-link.is-current { color: var(--color-ink); background: var(--color-sunken); }

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-ink);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--heading-tracking);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.logo__mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--color-brand-mark, var(--color-accent));
}
.logo__mark .icon { width: 30px; height: 30px; fill: currentColor; stroke: none; }
.logo__text {
  font-family: var(--font-brand, var(--font-display));
  font-size: 1.45em;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.015em;
  line-height: 1;
  transform: translateY(-1px);
}
/* The lockup as the mock draws it (nav pill, making screen): a 50 x 35 mark, a 40px wordmark.
   The mark's svg crops the symbol's viewBox to the petals themselves so they fill the box. */
.logo--hero { gap: calc(var(--space-1) * 1.5); }
.logo--hero .logo__mark {
  width: var(--logo-mark-w, 30px);
  height: var(--logo-mark-h, 30px);
  border-radius: 0;
}
.logo--hero .logo__mark .icon { width: 100%; height: 100%; }
.logo--hero .logo__text {
  font-size: var(--text-wordmark, 1.45em);
  font-weight: var(--wordmark-weight, var(--font-weight-medium));
  transform: translateY(-2px);
}

/* Wizard frame: stepper, question, answer, footer */
.step {
  padding-top: var(--space-10);
  padding-bottom: var(--space-12);
}

.stepper { margin-bottom: var(--space-8); }
.stepper__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-muted);
}
.stepper__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-2);
}
.stepper__seg {
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-sunken);
}
.stepper__seg.is-done,
.stepper__seg.is-current { background: var(--color-accent); }

.question { margin-bottom: var(--space-8); }
.question__help { margin-top: var(--space-3); max-width: 60ch; }

.answer > * + * { margin-top: var(--space-6); }

.step__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--color-line);
}
/* The plan's cost line sits in the footer beside the button that spends the
   credits. The auto margin keeps Back on the left and groups the rest right. */
.step__cost { margin-left: auto; }

/* Screen-reader-only text (labels tied to inputs that the headline already asks) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Look probes: one hidden element per look, so the switcher can read each
   look's name. A missing look file leaves the name empty, not inherited. */
.look-probes {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.look-probe {
  --look-name: initial;
  --look-blurb: initial;
}

/* --------------------------------------------------------------------------
   5. Buttons and links
   -------------------------------------------------------------------------- */

.btn {
  --_btn-ink: var(--color-ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-h-md);
  padding: 0 var(--space-5);
  border: var(--border-width-control) solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--_btn-ink);
  font-size: var(--text-base);
  font-weight: var(--button-weight);
  line-height: var(--leading-tight);
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn--primary {
  --_btn-ink: var(--color-on-primary);
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-button);
}
.btn--primary:hover:not(:disabled) { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn--primary:active:not(:disabled) { background: var(--color-primary-active); border-color: var(--color-primary-active); }

.btn--secondary {
  --_btn-ink: var(--color-ink);
  background: var(--color-surface);
  border-color: var(--color-line-strong);
}
.btn--secondary:hover:not(:disabled) { background: var(--color-sunken); }
.btn--secondary:active:not(:disabled) { background: var(--color-sunken); border-color: var(--color-ink-muted); }

.btn--quiet {
  --_btn-ink: var(--color-ink-muted);
  background: transparent;
  border-color: transparent;
}
.btn--quiet:hover:not(:disabled) { --_btn-ink: var(--color-ink); background: var(--color-sunken); }
.btn--quiet:active:not(:disabled) { --_btn-ink: var(--color-ink); background: var(--color-sunken); }
/* A quiet toggle that is on (the thumbs on the result screen). */
.btn--quiet[aria-pressed="true"] { --_btn-ink: var(--color-accent-ink); background: var(--color-accent-soft); }

.btn--danger {
  --_btn-ink: var(--color-on-danger);
  background: var(--color-danger);
  border-color: var(--color-danger);
}
.btn--danger:hover:not(:disabled) { background: var(--color-danger-hover); border-color: var(--color-danger-hover); }

.btn--sm { height: var(--control-h-sm); padding: 0 var(--space-4); font-size: var(--text-sm); }
.btn--lg { height: var(--control-h-lg); padding: 0 var(--space-8); font-size: var(--text-lg); }
.btn--block { display: flex; width: 100%; }

.btn--icon { width: var(--control-h-md); padding: 0; }
.btn--icon.btn--sm { width: var(--control-h-sm); }
.btn--icon.btn--lg { width: var(--control-h-lg); }

/* Loading: text goes invisible, a spinner in the button's own ink appears. */
.btn.is-loading { color: transparent; pointer-events: none; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.1em;
  height: 1.1em;
  margin: -0.55em 0 0 -0.55em;
  border: 2px solid var(--_btn-ink);
  border-right-color: transparent;
  border-radius: var(--radius-full);
  animation: spin calc(var(--duration-slow) * 3) linear infinite;
}

.link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-link, var(--color-accent-ink));
  font-weight: var(--font-weight-medium);
  text-decoration: var(--link-decoration, none);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  cursor: pointer;
  border-radius: var(--radius-xs);
}
.link:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   6. Fields, inputs, link input group
   -------------------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label {
  font-size: var(--text-sm);
  font-weight: var(--label-weight);
  color: var(--color-ink);
}
.field__help {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}
.field__error {
  display: none;
  align-items: flex-start;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-danger-ink);
}
/* Lock the icon to the first line of a message that wraps. */
.field__error .icon { margin-top: calc((var(--leading-normal) * 1em - 1em) / 2); }
.field.is-invalid .field__error { display: flex; }
.field.is-invalid .input,
.field.is-invalid .input-group { border-color: var(--color-danger); }

.input {
  display: block;
  width: 100%;
  height: var(--control-h-md);
  padding: 0 var(--space-4);
  border: var(--border-width-control) solid var(--color-line-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-base);
  transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.input::placeholder { color: var(--color-ink-subtle); }
.input:hover:not(:disabled) { border-color: var(--color-ink-muted); }
.input:disabled {
  background: var(--color-sunken);
  border-color: var(--color-line);
  color: var(--color-ink-subtle);
  cursor: not-allowed;
}
.input--lg { height: var(--control-h-lg); padding: 0 var(--space-5); font-size: var(--text-lg); }
/* Demo only: pretend to be focused on the parts sheet. */
.input.is-focused { outline: 2px solid var(--color-ring); outline-offset: 2px; }

.input-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-h-lg);
  padding: 0 var(--space-1) 0 var(--space-4);
  border: var(--border-width-control) solid var(--color-line-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.input-group:hover { border-color: var(--color-ink-muted); }
.input-group:focus-within { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.input-group__icon { color: var(--color-ink-subtle); }
.input-group__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  font-size: var(--text-base);
  outline: none;
}
.input-group__input::placeholder { color: var(--color-ink-subtle); }
.input-group .btn { flex-shrink: 0; }

/* --------------------------------------------------------------------------
   7. Dropdown: .select button + .menu listbox
   -------------------------------------------------------------------------- */

.select-wrap { position: relative; }

.select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  height: var(--control-h-md);
  padding: 0 var(--space-3) 0 var(--space-4);
  border: var(--border-width-control) solid var(--color-line-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-base);
  text-align: left;
  transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.select:hover { border-color: var(--color-ink-muted); }
.select[aria-expanded="true"] { border-color: var(--color-accent); }
.select__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.select__chevron {
  color: var(--color-ink-muted);
  transition: transform var(--duration-base) var(--ease-out);
}
.select[aria-expanded="true"] .select__chevron { transform: rotate(180deg); }

.menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--space-1));
  left: 0;
  display: none;
  min-width: 100%;
  padding: var(--space-1);
  background: var(--color-raised);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-raised);
}
.menu.is-open { display: block; }
.menu--inline { position: static; display: block; max-width: 280px; }

.menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  cursor: pointer;
  white-space: nowrap;
  outline-offset: -2px;
}
/* Hover and arrow-key highlight: the accent tint, like a selected chip or
   choice row, so it reads in dark as well as light (sunken on raised did not). */
.menu__item:hover,
.menu__item:focus-visible,
.menu__item.is-hovered,
.menu__item.is-active { background: var(--color-accent-soft); }
.menu__item[aria-selected="true"] {
  color: var(--color-accent-ink);
  font-weight: var(--font-weight-medium);
}
.menu__check { visibility: hidden; color: var(--color-accent-ink); }
.menu__item[aria-selected="true"] .menu__check { visibility: visible; }

/* --------------------------------------------------------------------------
   8. Switch, checkbox, radio (real inputs underneath)
   -------------------------------------------------------------------------- */

.switch,
.checkbox,
.radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 24px;
  cursor: pointer;
}
.switch__input,
.checkbox__input,
.radio__input,
.option-card__input,
.choice-row__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.switch__label,
.checkbox__label,
.radio__label { font-size: var(--text-base); color: var(--color-ink); }

.switch__track {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 28px;
  border: var(--border-width-control) solid var(--color-line-strong);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  transition: background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.switch__thumb {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: var(--radius-full);
  background: var(--color-line-strong);
  transition: transform var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out);
}
.switch:hover .switch__track { border-color: var(--color-ink-muted); }
.switch__input:checked + .switch__track {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.switch__input:checked + .switch__track .switch__thumb {
  transform: translateX(20px);
  background: var(--color-on-accent);
}
.switch:hover .switch__input:checked + .switch__track {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}
.switch__input:focus-visible + .switch__track { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.switch__input:disabled + .switch__track { opacity: 0.5; }

.checkbox__box,
.radio__circle {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: var(--border-width-control) solid var(--color-line-strong);
  background: var(--color-surface);
  color: var(--color-on-accent);
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.checkbox__box { border-radius: var(--radius-xs); }
.checkbox__box .icon { width: 15px; height: 15px; stroke-width: calc(var(--icon-stroke) * 1.7); opacity: 0; }
.checkbox:hover .checkbox__box,
.radio:hover .radio__circle { border-color: var(--color-ink-muted); }
.checkbox__input:checked + .checkbox__box {
  background: var(--color-accent-strong, var(--color-accent));
  border-color: var(--color-accent-strong, var(--color-accent));
}
.checkbox__input:checked + .checkbox__box .icon { opacity: 1; }
.checkbox:hover .checkbox__input:checked + .checkbox__box,
.radio:hover .radio__input:checked + .radio__circle {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}
.checkbox__input:focus-visible + .checkbox__box,
.radio__input:focus-visible + .radio__circle { outline: 2px solid var(--color-ring); outline-offset: 2px; }

.radio__circle { border-radius: var(--radius-full); }
.radio__circle::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--color-on-accent);
  opacity: 0;
}
.radio__input:checked + .radio__circle {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.radio__input:checked + .radio__circle::after { opacity: 1; }

/* --------------------------------------------------------------------------
   9. Option card and choice row (radio groups with a real input underneath)
   -------------------------------------------------------------------------- */

/* Both share the card surface (see section 10) and add selection states.
   The selection ring is a pseudo-element so it never fights the focus ring. */
.option-card,
.choice-row {
  --_indicator-size: 26px;
  position: relative;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}
.option-card::after,
.choice-row::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 2px solid var(--color-accent);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.option-card:hover,
.choice-row:hover {
  border-color: var(--color-line-strong);
  box-shadow: var(--shadow-card-hover);
}
.option-card:has(.option-card__input:checked),
.choice-row:has(.choice-row__input:checked) { border-color: var(--color-accent); }
.option-card:has(.option-card__input:checked)::after,
.choice-row:has(.choice-row__input:checked)::after { opacity: 1; }
.option-card:has(.option-card__input:focus-visible),
.choice-row:has(.choice-row__input:focus-visible) {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

/* The check badge, shared by both */
.option-card__check,
.choice-row__indicator {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--_indicator-size);
  height: var(--_indicator-size);
  border: var(--border-width-control) solid var(--color-line-strong);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-on-accent);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}
.option-card__check .icon,
.choice-row__indicator .icon {
  width: 15px;
  height: 15px;
  stroke-width: calc(var(--icon-stroke) * 1.4);
  opacity: 0;
}
.option-card:has(.option-card__input:checked) .option-card__check,
.choice-row:has(.choice-row__input:checked) .choice-row__indicator {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.option-card:has(.option-card__input:checked) .option-card__check .icon,
.choice-row:has(.choice-row__input:checked) .choice-row__indicator .icon { opacity: 1; }

/* Option card: picture on top, title, one line */
.option-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
}
.option-card__media {
  position: relative;
  aspect-ratio: 9 / 16;
  background: var(--color-stage);
}
.option-card__media img { width: 100%; height: 100%; object-fit: cover; }
.option-card__badge { position: absolute; top: var(--space-2); left: var(--space-2); z-index: 2; }
.option-card__check {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 2;
  opacity: 0;
  transform: scale(0.7);
}
.option-card:has(.option-card__input:checked) .option-card__check { opacity: 1; transform: none; }
.option-card__body { padding: var(--space-3) var(--space-4) var(--space-4); }
.option-card__title {
  display: block;
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-ink);
}
.option-card__text {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-ink-muted);
}
.option-card__note {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-subtle);
}

/* Choice row: a full-width radio row with text */
.choice-row__main {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
}
.choice-row__body {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  min-width: 0;
}
.choice-row__text { color: var(--color-ink); line-height: var(--leading-snug); }
.choice-row__extra {
  display: none;
  /* Indented past the indicator so the input lines up with the row's text. */
  padding: 0 var(--space-5) var(--space-5) calc(var(--space-5) + var(--_indicator-size) + var(--space-3));
}
.choice-row:has(.choice-row__input:checked) { background: var(--color-accent-soft); }
.choice-row:has(.choice-row__input:checked) .choice-row__extra { display: block; }

/* --------------------------------------------------------------------------
   10. Cards: card, product card
   -------------------------------------------------------------------------- */

/* One surface for everything card-shaped. The product card and the summary
   compose it in the HTML (class="card product-card"); the option card and the
   choice row share the rule here because they reset its padding anyway. */
.card,
.option-card,
.choice-row {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.card { padding: var(--space-6); }

.product-card {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  grid-template-areas:
    "photo body"
    "photo strip";
  column-gap: var(--space-5);
  row-gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
}
.product-card__photo {
  grid-area: photo;
  width: 168px;
  height: 168px;
  border-radius: var(--radius-md);
  background: var(--color-stage);
  object-fit: cover;
}
.product-card__body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.product-card__title {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: 0;
}
.product-card__shop { font-size: var(--text-sm); color: var(--color-ink-muted); }
.product-card__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.product-card__price {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.product-card__rating {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-ink);
}
.product-card__rating .icon { width: 16px; height: 16px; color: var(--color-warning); fill: currentColor; }
.product-card__strip {
  grid-area: strip;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  align-self: end;
}
.product-card__thumb {
  width: 44px;
  height: 44px;
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-sm);
  object-fit: cover;
}
.product-card__count {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

/* --------------------------------------------------------------------------
   11. Badge, chip, tabs
   -------------------------------------------------------------------------- */

.badge {
  --_badge-dot: var(--color-ink-subtle);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 24px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-chip);
  background: var(--color-sunken);
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-tight);
  white-space: nowrap;
}
.badge .icon { width: 14px; height: 14px; }
.badge__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--_badge-dot);
}
.badge--neutral { background: var(--color-sunken); color: var(--color-ink-muted); }
.badge--success { --_badge-dot: var(--color-success); background: var(--color-success-soft); color: var(--color-success-ink); }
.badge--warning { --_badge-dot: var(--color-warning); background: var(--color-warning-soft); color: var(--color-warning-ink); }
.badge--danger { --_badge-dot: var(--color-danger); background: var(--color-danger-soft); color: var(--color-danger-ink); }
.badge--info { --_badge-dot: var(--color-info); background: var(--color-info-soft); color: var(--color-info-ink); }
.badge--accent { --_badge-dot: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent-ink); }
.badge--on-media { --_badge-dot: var(--color-on-media); background: var(--color-media-scrim); color: var(--color-on-media); }
/* Category tags (the opening-line tags) use the look's tints; ink stays --color-ink. */
.badge--tint-1 { background: var(--color-tint-1); color: var(--color-ink); }
.badge--tint-2 { background: var(--color-tint-2); color: var(--color-ink); }
.badge--tint-3 { background: var(--color-tint-3); color: var(--color-ink); }
.badge--tint-4 { background: var(--color-tint-4); color: var(--color-ink); }
.badge--tint-5 { background: var(--color-tint-5); color: var(--color-ink); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-h-sm);
  padding: 0 var(--space-4);
  border: var(--border-width-control) solid var(--color-line-strong);
  border-radius: var(--radius-chip);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}
.chip:hover { background: var(--color-sunken); }
.chip.is-selected,
.chip[aria-pressed="true"] {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}
.chip.is-selected:hover,
.chip[aria-pressed="true"]:hover { background: var(--color-accent-soft-hover); }

.tabs {
  display: flex;
  gap: var(--space-2);
  border-bottom: var(--border-width) solid var(--color-line);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-h-md);
  padding: 0 var(--space-3);
  margin-bottom: calc(-1 * var(--border-width));
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: none;
  color: var(--color-ink-muted);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.tab:hover { color: var(--color-ink); }
.tab.is-active { color: var(--color-ink); border-bottom-color: var(--color-accent); }
.tab__count { font-size: var(--text-sm); color: var(--color-ink-subtle); font-variant-numeric: tabular-nums; }
.tab.is-active .tab__count { color: var(--color-accent-ink); }

/* --------------------------------------------------------------------------
   12. Callout, progress, checklist
   -------------------------------------------------------------------------- */

.callout {
  --_callout-icon: var(--color-info);
  --_callout-bg: var(--color-info-soft);
  --_callout-ink: var(--color-info-ink);
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--_callout-bg);
  color: var(--_callout-ink);
}
.callout__icon { flex-shrink: 0; margin-top: 2px; color: var(--_callout-icon); }
.callout__body { flex: 1; min-width: 0; }
.callout__title { display: block; font-weight: var(--font-weight-semibold); }
.callout .link { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
.callout--info { --_callout-icon: var(--color-info); --_callout-bg: var(--color-info-soft); --_callout-ink: var(--color-info-ink); }
.callout--success { --_callout-icon: var(--color-success); --_callout-bg: var(--color-success-soft); --_callout-ink: var(--color-success-ink); }
.callout--warning { --_callout-icon: var(--color-warning); --_callout-bg: var(--color-warning-soft); --_callout-ink: var(--color-warning-ink); }
.callout--danger { --_callout-icon: var(--color-danger); --_callout-bg: var(--color-danger-soft); --_callout-ink: var(--color-danger-ink); }

.progress {
  display: block;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-sunken);
  overflow: hidden;
}
.progress--sm { height: 4px; }
.progress__bar {
  display: block;
  width: var(--_progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent);
  transition: width var(--duration-slow) var(--ease-out);
}

.progress-ring { position: relative; width: 80px; height: 80px; }
.progress-ring--lg { width: 112px; height: 112px; }
.progress-ring__svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.progress-ring__track { fill: none; stroke: var(--color-sunken); stroke-width: 8; }
.progress-ring__bar {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: var(--_progress-value, 0) 100;
  transition: stroke-dasharray var(--duration-slow) var(--ease-out);
}
.progress-ring__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}
.progress-ring--lg .progress-ring__label { font-size: var(--text-xl); }

.checklist { display: flex; flex-direction: column; gap: var(--space-3); }
.checklist__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-ink-muted);
}
.checklist__mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: var(--border-width-control) solid var(--color-line-strong);
  border-radius: var(--radius-full);
  color: transparent;
}
.checklist__mark .icon { width: 14px; height: 14px; stroke-width: calc(var(--icon-stroke) * 1.4); }
.checklist__item.is-done { color: var(--color-ink); }
/* Done: the contract's own status pair (soft background, ink on it), which
   passes 3:1 in both themes; a white check on solid success did not in dark. */
.checklist__item.is-done .checklist__mark {
  background: var(--color-success-soft);
  border-color: var(--color-success-soft);
  color: var(--color-success-ink);
}
.checklist__item.is-current { color: var(--color-ink); font-weight: var(--font-weight-medium); }
.checklist__item.is-current .checklist__mark { border-color: var(--color-accent); color: var(--color-accent); }
.checklist__item.is-todo .checklist__mark { color: transparent; }

/* --------------------------------------------------------------------------
   13. Thumb (one 9:16 media box, reused by tiles, storyboard, fan, making)
   -------------------------------------------------------------------------- */

.thumb {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-tile);
  background: var(--color-stage);
}
.thumb > img { width: 100%; height: 100%; object-fit: cover; }
.thumb__tl { position: absolute; top: var(--space-2); left: var(--space-2); z-index: 2; }
.thumb__br { position: absolute; right: var(--space-2); bottom: var(--space-2); z-index: 2; }
.thumb__caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  padding: var(--space-10) var(--space-3) var(--space-3);
  background: linear-gradient(to top, var(--color-media-scrim), transparent);
  color: var(--color-on-media);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
  text-align: center;
  text-wrap: balance;
}
.thumb__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--color-surface);
  opacity: 0.55;
}

/* Play disc: the scrim circle with a play glyph, on tiles (hover) and the
   player (always). One component at two sizes. */
.play-disc {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-media-scrim);
  color: var(--color-on-media);
}
.play-disc .icon { width: 20px; height: 20px; margin-left: 2px; fill: currentColor; }
.play-disc--lg { width: 64px; height: 64px; }
.play-disc--lg .icon { width: 28px; height: 28px; margin-left: 3px; }

/* --------------------------------------------------------------------------
   14. Video tile
   -------------------------------------------------------------------------- */

.video-tile { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.video-tile__media {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.video-tile__media:hover { box-shadow: var(--shadow-card-hover); }
.video-tile__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}
.video-tile__media:hover .video-tile__play,
.video-tile__media:focus-visible .video-tile__play { opacity: 1; }
.video-tile__progress {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  left: var(--space-3);
  z-index: 2;
}
.video-tile__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.video-tile__title {
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-snug);
  color: var(--color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.video-tile__meta { font-size: var(--text-sm); color: var(--color-ink-muted); line-height: var(--leading-snug); text-wrap: pretty; }
.video-tile[data-status="attention"] .video-tile__meta { color: var(--color-warning-ink); }
.video-tile[data-status="failed"] .video-tile__meta { color: var(--color-danger-ink); }
.video-tile__actions { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
/* A quiet small button here starts a line, so pull its padding back and the
   icon sits flush with the title and meta above it. */
.video-tile__actions .btn--sm { margin-left: calc(-1 * (var(--space-4) + var(--border-width-control))); }

/* --------------------------------------------------------------------------
   15. Player
   -------------------------------------------------------------------------- */

.player { display: flex; flex-direction: column; gap: var(--space-4); }
.player__stage {
  display: flex;
  justify-content: center;
  padding: var(--space-6);
  border-radius: var(--radius-card);
  background: var(--color-stage);
}
/* The frame is a .thumb (class="thumb player__frame"); this only sizes and lifts it. */
.player__frame {
  width: 100%;
  max-width: 300px;
  box-shadow: var(--shadow-md);
}
/* The play button is a large .play-disc centred on the frame. */
.player__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  margin: -32px 0 0 -32px;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out);
}
.player__play:hover { transform: scale(1.05); }
/* The caption sits inside TikTok's safe area: above the caption strip and
   left of the button column, like a real post. */
.player__caption {
  position: absolute;
  right: 20%;
  bottom: 22%;
  left: 5%;
  z-index: 2;
  text-align: left;
}
.player__caption span {
  display: inline;
  padding: 2px var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--color-media-scrim);
  color: var(--color-on-media);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-normal);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.player__duration { position: absolute; right: var(--space-2); bottom: var(--space-2); z-index: 2; }
.player__safe { position: absolute; inset: 0; z-index: 1; display: none; pointer-events: none; }
.player.is-safe-on .player__safe { display: block; }
.player__zone {
  position: absolute;
  background: var(--color-overlay);
  border: var(--border-width-control) dashed var(--color-on-media);
}
.player__zone--top { top: 0; right: 0; left: 0; height: 9%; }
.player__zone--side { top: 38%; right: 0; width: 17%; height: 44%; }
.player__zone--bottom { right: 0; bottom: 0; left: 0; height: 19%; }
/* Labels sit on a scrim pill, like the caption, so they stay legible over
   bright footage where the dim alone is not enough. */
.player__zone-label {
  position: absolute;
  top: var(--space-1);
  left: var(--space-2);
  padding: 2px var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--color-media-scrim);
  color: var(--color-on-media);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-snug);
  white-space: nowrap;
}
.player__zone--side .player__zone-label {
  top: var(--space-2);
  left: 50%;
  writing-mode: vertical-rl;
  transform: translateX(-50%);
}

/* --------------------------------------------------------------------------
   16. Small parts: cost line, credit pill, avatar, toast, tooltip, skeleton
   -------------------------------------------------------------------------- */

.cost-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-ink);
  text-wrap: pretty;
}
.cost-line .icon { color: var(--color-ink-muted); }

.credit-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-h-sm);
  padding: 0 var(--space-3);
  border-radius: var(--radius-chip);
  background: var(--color-sunken);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}
.credit-pill .icon { color: var(--color-warning); }

.avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-tint-1);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
}

.toast {
  position: fixed;
  z-index: 50;
  bottom: var(--space-8);
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  background: var(--color-inverse);
  color: var(--color-ink-inverse);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  box-shadow: var(--shadow-raised);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, var(--space-2));
  transition:
    opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out),
    visibility var(--duration-base);
}
.toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.toast .icon { color: var(--color-success); }
.toast--inline { position: static; opacity: 1; visibility: visible; transform: none; }

.tooltip {
  position: relative;
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-inverse);
  color: var(--color-ink-inverse);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-snug);
  white-space: nowrap;
  box-shadow: var(--shadow-raised);
}
.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--color-inverse);
}

.skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-sunken);
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--color-line), transparent);
  opacity: 0.7;
  transform: translateX(-100%);
  animation: shimmer calc(var(--duration-slow) * 5) var(--ease-in-out) infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: var(--space-4);
}
.swatch__color {
  height: 64px;
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-md);
}
.swatch__name { margin-top: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-weight-medium); }
.swatch__token { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-muted); }

/* --------------------------------------------------------------------------
   17. Screen layouts
   -------------------------------------------------------------------------- */

/* Welcome */
.welcome {
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--_topbar-h));
  padding-top: var(--space-12);
  padding-bottom: var(--space-16);
}
.welcome__hero {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--space-16);
  align-items: center;
}
.welcome__text {
  max-width: 34ch;
  margin-top: var(--space-6);
  font-size: var(--text-xl);
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
}
.welcome__cta { margin-top: var(--space-8); }
.welcome__fine {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}
.welcome__points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-12);
}
.point {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink);
}
.point__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-sunken);
  color: var(--color-ink);
}
.point:nth-child(1) .point__icon { background: var(--color-tint-1); }
.point:nth-child(2) .point__icon { background: var(--color-tint-2); }
.point:nth-child(3) .point__icon { background: var(--color-tint-4); }

.fan {
  --_fan-w: 200px;
  position: relative;
  width: 100%;
  height: calc(var(--_fan-w) * 16 / 9 + var(--space-10));
}
.fan__tile {
  position: absolute;
  top: var(--space-5);
  left: 50%;
  width: var(--_fan-w);
  box-shadow: var(--shadow-lg);
  transform-origin: center bottom;
}
.fan__tile--left { z-index: 1; transform: translateX(-108%) rotate(-7deg); }
.fan__tile--front { z-index: 3; transform: translate(-50%, -6px) scale(1.04); }
.fan__tile--right { z-index: 2; transform: translateX(8%) rotate(7deg); }

/* Landing page: a big rounded "sky" panel with a floating glass navigation pill,
   soft clouds and pastel hills (our own drawing of Craft's friendliness), one
   flowing colour ribbon (the Stripe sign-in feeling), the headline, and the app
   window rising from the bottom edge. Below it, "Made for your imagination".
   Every colour is a token; looks may set --color-sky-1/2, --color-cloud,
   --color-hill-1/2, --color-ribbon-1/2/3 and --color-glass, with fallbacks here. */
.landing { padding: var(--sky-inset-y, var(--space-4)) var(--sky-inset-x, var(--space-4)) var(--space-20); }
/* The panel. A look may supply --sky-plate (a picture of its sky scene, see
   assets/plates) which sits over the gradient; without one the gradient and the drawn
   clouds and paper (.sky__art) show. overflow: clip rather than hidden keeps the box out of
   the scroll-container category, so a panel with an aspect ratio still grows to fit its
   content when the viewport is narrow. */
.sky {
  position: relative;
  isolation: isolate;
  overflow: clip;
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-5) 0;
  background-color: var(--color-sky-2, var(--color-page));
  background-image:
    var(--sky-plate, none),
    linear-gradient(180deg, var(--color-sky-1, var(--color-accent-soft)) 0%, var(--color-sky-2, var(--color-page)) 55%, var(--color-sky-2, var(--color-page)) 100%);
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
}
/* Fallback artwork (Addendum 6): our drawn clouds and torn paper from assets/art, inlined once as
   symbols in the sprite and placed here with <use>. They show wherever the plate does not: phone
   widths, the dark theme, and the making screen whose panel is taller than the plate's ratio.
   Positions follow INTEGRATION.md's tables for a 1440 frame, as percentages of the panel; the
   clouds' shaded side faces the middle of the page (mirrored on the left). Never animated: the
   half-tone is masks and filters. The page edge stretches (preserveAspectRatio none) across the
   panel's width; the 2.5% squeeze is invisible. */
.sky__art {
  position: absolute;
  z-index: 0;
  display: var(--sky-art-display, block);
  height: auto;
  pointer-events: none;
}
.sky__art--flip { transform: scaleX(-1); }
.sky__art--paper-page { left: 0; bottom: -10px; width: 100%; }
/* Home: clouds under the pill and the ends of the headline, periwinkle at the bottom-left, lined
   yellow at the bottom-right. */
.sky--home .sky__art--cloud-1 { left: -6.4%; top: 108px; width: 28.5%; }
.sky--home .sky__art--cloud-2 { left: 75.8%; top: 70px; width: 28.5%; }
.sky--home .sky__art--cloud-3 { left: 71.2%; top: 368px; width: 17%; }
.sky--home .sky__art--cloud-4 { left: 2.8%; top: 448px; width: 13.5%; opacity: 0.85; }
.sky--home .sky__art--cloud-5 { left: 89%; top: 408px; width: 13.5%; }
.sky--home .sky__art--paper-left { left: 0; bottom: -30px; width: 44%; }
.sky--home .sky__art--paper-right { right: 0; bottom: -30px; width: 40%; }
/* Pricing (full-bleed): two half-clipped clouds at the top, two medium ones at mid height, the
   lined yellow (mirrored) and purple paper in the bottom corners with a big cloud over each. */
.sky--pricing .sky__art--cloud-1 { left: -14%; top: 80px; width: 28%; }
.sky--pricing .sky__art--cloud-2 { left: 76.4%; top: 60px; width: 28%; }
.sky--pricing .sky__art--cloud-3 { left: -9%; top: 540px; width: 19.5%; }
.sky--pricing .sky__art--cloud-4 { left: 86.8%; top: 540px; width: 19.5%; }
.sky--pricing .sky__art--cloud-5 { left: -4%; bottom: 10px; width: 39%; }
.sky--pricing .sky__art--cloud-6 { left: 65%; bottom: -20px; width: 39%; }
.sky--pricing .sky__art--paper-left { left: 0; bottom: -30px; width: 29%; }
.sky--pricing .sky__art--paper-right { right: 0; bottom: -30px; width: 42%; }
/* Making: the panel is the whole viewport; clouds at mid height either side of the headline. */
.sky--making .sky__art--cloud-1 { left: -6%; top: 34%; width: 28%; }
.sky--making .sky__art--cloud-2 { left: 76%; top: 22%; width: 28%; }
.sky--making .sky__art--cloud-3 { left: 2%; top: 64%; width: 13.5%; opacity: 0.85; }
.sky--making .sky__art--cloud-4 { left: 88%; top: 58%; width: 13.5%; }
.sky--making .sky__art--paper-left { left: 0; bottom: -30px; width: 36%; }
.sky--making .sky__art--paper-right { right: 0; bottom: -30px; width: 34%; }

.navpill {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: var(--navpill-w, 940px);
  height: var(--navpill-h, 56px);
  margin: 0 auto;
  padding: 0 var(--space-6) 0 var(--space-8);
  border-radius: var(--radius-full);
  background: var(--color-glass, var(--color-surface));
  box-shadow: var(--shadow-navpill, var(--shadow-md));
  backdrop-filter: blur(10px);
}
/* The links are centred on the pill itself, not on the space left between the logo and the
   actions (which would pull them towards the narrower logo side). */
.navpill__links {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  transform: translateX(-50%);
}
.navpill .nav-link {
  height: var(--control-h-nav, var(--control-h-sm));
  padding: 0 var(--space-3);
  color: var(--color-ink);
}
.navpill__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.navpill .btn--sm {
  height: var(--control-h-nav, var(--control-h-sm));
  padding: 0 var(--space-6);
  font-size: var(--text-base);
}
.navpill .btn--quiet { --_btn-ink: var(--color-ink); padding: 0 var(--space-3); font-weight: var(--font-weight-medium); }
.navpill .btn--primary { font-weight: var(--font-weight-semibold); }
/* The current page's link (Pricing on the pricing screen): a soft yellow pill, 38px tall in the
   mock (x813-905, y44-82), 22px of side padding around the word. */
.navpill .nav-link[aria-current="page"] {
  height: var(--nav-active-h, var(--control-h-nav, var(--control-h-sm)));
  padding: 0 calc(var(--space-5) + 2px);
  border-radius: var(--radius-full);
  background: var(--color-brand-soft, var(--color-accent-soft));
  color: var(--color-ink);
}

.hero {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
  padding-top: var(--space-20);
  text-align: center;
}
.hero__eyebrow { margin-bottom: var(--space-4); }
.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--heading-weight);
  line-height: var(--heading-leading);
  letter-spacing: var(--heading-tracking);
  color: var(--color-ink);
  text-wrap: balance;
}
.hero__text {
  max-width: 46ch;
  margin: var(--space-6) auto 0;
  font-size: var(--text-xl);
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
}
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-8); }
.hero__points { justify-content: center; margin-top: var(--space-10); }
.btn--glass {
  --_btn-ink: var(--color-ink);
  background: var(--color-glass, var(--color-surface));
  border-color: transparent;
  color: var(--color-ink);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
}
.btn--glass:hover:not(:disabled) { background: var(--color-surface); box-shadow: var(--shadow-lg); }

/* The app window rising out of the sky panel; its bottom is cut by the panel. */
.preview {
  position: relative;
  z-index: 3;
  max-width: 980px;
  margin: var(--space-16) auto -72px;
  overflow: hidden;
  border: var(--border-width) solid var(--color-line);
  border-bottom: 0;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  text-align: left;
}
.preview__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 56px;
  padding: 0 var(--space-5);
  border-bottom: var(--border-width) solid var(--color-line);
}
.preview__bar .logo__mark { width: 24px; height: 24px; }
.preview__bar .logo__text { font-size: var(--text-sm); }
.preview__icon { display: grid; place-items: center; width: 32px; height: 32px; color: var(--color-ink-muted); }
.preview__body { display: grid; grid-template-columns: 220px minmax(0, 1fr); }
.preview__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-4);
  border-right: var(--border-width) solid var(--color-line);
}
.side-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-control);
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
}
.side-link .icon { width: 18px; height: 18px; }
.side-link.is-current { background: var(--color-accent-soft); color: var(--color-accent-ink); }
.preview__main { padding: var(--space-6) var(--space-6) var(--space-8); }
.preview__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.preview__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  color: var(--color-ink);
}
.preview__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.pv-tile {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-tile);
  background: var(--color-stage);
}
.pv-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pv-tile__play { position: absolute; left: var(--space-3); bottom: var(--space-3); width: 36px; height: 36px; }
.pv-tile__play .icon { width: 16px; height: 16px; }
.pv-caption { margin-top: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--color-ink); }

/* "Made for your imagination" */
.made { padding-top: var(--space-20); text-align: center; }
.made__title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--heading-weight);
  line-height: var(--heading-leading);
  letter-spacing: var(--heading-tracking);
  color: var(--color-ink);
  text-wrap: balance;
}
.made__text { max-width: 52ch; margin: var(--space-4) auto 0; font-size: var(--text-lg); color: var(--color-ink-muted); }
.made__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-8); }
.made__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-12); text-align: left; }
.made__item { margin: 0; }
.made__tile {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-tile);
  background: var(--color-stage);
  box-shadow: var(--shadow-card);
}
.made__tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.made__play { position: absolute; left: var(--space-4); bottom: var(--space-4); }
.made__item figcaption { margin-top: var(--space-3); font-weight: var(--font-weight-medium); color: var(--color-ink); }

@media (max-width: 900px) {
  .preview__body { grid-template-columns: 1fr; }
  .preview__side { display: none; }
  .preview__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .made__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .landing { padding: var(--space-2) var(--space-2) var(--space-16); }
  .sky { padding: var(--space-3) var(--space-3) 0; }
  .navpill { height: 52px; padding-left: var(--space-4); }
  .navpill__links { display: none; }
  .hero { padding-top: var(--space-12); }
  .hero__title { font-size: var(--text-4xl); }
  .hero__text { font-size: var(--text-base); }
  .preview { margin-top: var(--space-10); }
}
@media (max-width: 600px) {
  .hero__title { font-size: var(--text-3xl); }
  .hero__points { gap: var(--space-3); }
  .made { padding-top: var(--space-16); }
  .made__title { font-size: var(--text-3xl); }
  .made__grid { gap: var(--space-4); }
}

/* Home page v2: the composer, the chips under it, lined paper on the right hill,
   and the "A little inspiration" tiles. Login: a still card over a rainbow ribbon
   that flows and changes shape continuously (CSS keyframes on the SVG path's d,
   alternating so the loop is seamless; off under reduced motion and still=1). */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The home panel: at 1440 it is the viewport minus the side inset and keeps the plate's
   aspect ratio, so the plate shows whole; the hero floats between the pill and the bottom
   (auto margins), which puts the headline 60px under the pill and the chips 56px above the
   torn edge as in the mock. When the content needs more height than the ratio gives, the
   panel grows and the plate crops at the sides (background-size: cover). */
.sky--home {
  display: flex;
  flex-direction: column;
  aspect-ratio: var(--sky-ratio, auto);
  padding-bottom: var(--sky-pad-bottom, 150px);
  border-bottom-left-radius: var(--sky-bottom-radius, var(--radius-xl));
  border-bottom-right-radius: var(--sky-bottom-radius, var(--radius-xl));
}
/* width: 100% because auto cross-axis margins (the pill's margin: 0 auto) switch off flex
   stretching; max-width then caps it at the pill's width. */
.sky--home .navpill { flex: none; width: 100%; }

.hero--composer {
  width: 100%;
  max-width: none;
  margin: auto 0;
  padding-top: var(--hero-pad-top, var(--space-16));
}
.hero--composer .hero__title {
  font-size: var(--text-hero, var(--text-5xl));
  font-weight: var(--hero-weight, var(--heading-weight));
  line-height: var(--hero-leading, var(--heading-leading));
  letter-spacing: var(--hero-tracking, var(--heading-tracking));
}
.hero--composer .hero__text {
  max-width: none;
  margin-top: var(--space-2);
  font-size: var(--text-2xl);
  color: var(--color-ink);
}
/* The composer card: 930 x 158 at 1440 (padding 16/16/12/20, the two-row textarea at 62px,
   a 12px gap, the 56px tool row), its shadow soft and blue-tinted. */
.composer {
  max-width: var(--composer-w, 930px);
  margin: var(--space-8) auto 0;
  padding: var(--space-4) var(--space-4) var(--space-3) var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-float, var(--shadow-lg));
  text-align: left;
}
.composer:focus-within { outline: 2px solid var(--color-ring); outline-offset: 3px; }
.composer__input {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: var(--space-1) var(--space-3);
  border: 0;
  background: transparent;
  resize: none;
  font: inherit;
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-ink);
  outline: none;
}
.composer__input::placeholder { color: var(--color-ink-subtle); }
.composer__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-3); }
.composer__tool {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--control-h-md);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.composer__tool:hover { background: var(--color-sunken); }
.composer__tool:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
/* Tool row spacing from the mock: circle -> label 12, label -> separator 32, separator -> icon
   32, icon -> label 20, label -> chevron 12, chevron -> separator 24. */
.composer__tool:first-child { padding-left: var(--space-2); }
.composer__tool > .icon { width: 18px; height: 18px; }
.composer__tool > .icon:first-child { margin-right: var(--space-2); }
.composer__plus { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--radius-full); background: var(--color-sunken); }
.composer__plus .icon { width: 17px; height: 17px; stroke-width: calc(var(--icon-stroke) * 1.33); }
.composer__tool > .composer__chev { width: 1em; height: 1em; margin-right: calc(-1 * var(--space-2)); color: var(--color-ink-muted); }
.composer__sep { width: var(--composer-sep-w, var(--border-width)); height: 30px; background: var(--color-line); }
.composer__spacer { flex: 1; }
.composer .btn--brand {
  gap: var(--space-4);
  height: var(--control-h-xl, var(--control-h-lg));
  padding: 0 calc(var(--space-6) + var(--space-1));
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
}
.composer .btn--brand .icon { width: 24px; height: 24px; }
.hero__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-top: var(--space-6); }
.chip--lg { height: var(--chip-h, var(--control-h-md)); padding: 0 var(--space-5) 0 var(--space-6); gap: var(--space-3); font-size: var(--text-sm); }
.chip--lg .icon { width: 18px; height: 18px; }
.chip--glass {
  border-color: transparent;
  background: var(--color-glass-soft, var(--color-glass, var(--color-surface)));
  box-shadow: var(--shadow-chip, var(--shadow-sm));
  backdrop-filter: blur(8px);
}
.chip--glass:hover { background: var(--color-surface); }

.btn--brand {
  --_btn-ink: var(--color-on-brand, var(--color-on-accent));
  background: var(--color-brand, var(--color-accent));
  border-color: transparent;
  color: var(--color-on-brand, var(--color-on-accent));
}
.btn--brand:hover:not(:disabled) { background: var(--color-brand-hover, var(--color-accent-hover)); border-color: transparent; }
.btn--brand:active:not(:disabled) { background: var(--color-brand-hover, var(--color-accent-hover)); }

/* "A little inspiration": 1340 wide at 1440, the title 32px light, tiles 16:15 with 12px
   corners and no shadow. A look whose plate ends in page-coloured rows may pull the section
   up over them (--inspo-overlap); it is positioned so it paints above the panel. */
.inspo {
  position: relative;
  z-index: 1;
  max-width: calc(var(--width-inspo, var(--width-page)) + var(--space-6) * 2);
  margin-top: var(--inspo-overlap, var(--space-12));
}
.inspo__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--heading-weight-section, var(--heading-weight));
  line-height: var(--heading-leading);
  letter-spacing: var(--heading-tracking);
  color: var(--color-ink);
}
.inspo__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.inspo__tile {
  position: relative;
  display: block;
  aspect-ratio: 16 / 15;
  overflow: hidden;
  border-radius: var(--radius-tile-wide, var(--radius-tile));
  background: var(--color-stage);
  box-shadow: var(--shadow-tile-wide, var(--shadow-card));
  color: var(--color-on-media);
  text-decoration: none;
}
.inspo__label .play-disc { background: var(--color-play-disc, var(--color-media-scrim)); color: var(--color-play-glyph, var(--color-on-media)); }
.inspo__tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.inspo__tile:hover img { transform: scale(1.03); }
.inspo__tile:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.inspo__tile::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(to top, var(--color-media-scrim), transparent); }
.inspo__label { position: absolute; left: var(--space-4); bottom: var(--space-4); z-index: 1; display: flex; align-items: center; gap: var(--space-3); font-weight: var(--font-weight-semibold); }
.play-disc--sm { width: 36px; height: 36px; }
.play-disc--sm .icon { width: 16px; height: 16px; }

/* Pricing (Addendum 3): the sky panel is full-bleed with its own plate (the pricing mock has no
   page margin), the pill a touch wider, then the headline, three plan cards and a fine-print
   line; the FAQ accordion sits on the page under the torn edge. Geometry from the mock at 1440:
   pill y31-95; headline x-height y167-203; cards 397 x 571 from y284 with 12px between them,
   their text inset 35px and the button 26px; a 2px hairline; 33px feature rows with 18px ticks;
   fine print y875-888; plate bottom y932; FAQ heading y943; 43px rows with 6px gaps. */
.landing--pricing { padding: 0 0 var(--space-20); }
.sky--pricing {
  display: flex;
  flex-direction: column;
  align-items: center;
  aspect-ratio: var(--sky-pricing-ratio, auto);
  padding: var(--sky-pricing-pad-top, var(--space-5)) var(--space-5) var(--sky-pricing-pad-bottom, var(--space-16));
  border-radius: 0;
  background-image:
    var(--sky-pricing-plate, var(--sky-plate, none)),
    linear-gradient(180deg, var(--color-sky-1, var(--color-accent-soft)) 0%, var(--color-sky-2, var(--color-page)) 55%, var(--color-sky-2, var(--color-page)) 100%);
}
.sky--pricing .navpill { flex: none; width: 100%; max-width: var(--navpill-w-wide, var(--navpill-w, 940px)); }
.pricing__hero { position: relative; z-index: 2; margin-top: var(--pricing-hero-top, var(--space-10)); text-align: center; }
.pricing__title {
  font-family: var(--font-display);
  font-size: var(--text-pricing-title, var(--text-5xl));
  font-weight: var(--hero-weight, var(--heading-weight));
  line-height: 1;
  letter-spacing: var(--hero-tracking, var(--heading-tracking));
  color: var(--color-ink);
  text-wrap: balance;
}
.pricing__text { margin-top: var(--space-3); font-size: var(--text-lede, var(--text-xl)); line-height: var(--leading-normal); color: var(--color-ink); }
.tiers {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: var(--plan-gap, var(--space-4));
  width: 100%;
  max-width: calc(var(--plan-w, 360px) * 3 + var(--plan-gap, var(--space-4)) * 2);
  margin-top: var(--plans-top, var(--space-8));
}
/* The border is part of every card's box (transparent on two of them), so the recommended card
   keeps the same outer size and inner geometry as its neighbours. */
.tier {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  max-width: var(--plan-w, 360px);
  padding: calc(var(--space-6) - 1px) var(--space-6) calc(var(--space-8) - 1px);
  border: 2px solid transparent;
  border-radius: var(--radius-xl);
  background: var(--color-card-cream, var(--color-surface));
  box-shadow: var(--shadow-plan, var(--shadow-card));
  text-align: left;
}
.tier--recommended { border-color: var(--color-brand-line, var(--color-brand, var(--color-accent))); }
.tier__head { display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-2); }
.tier__name {
  font-family: var(--font-display);
  font-size: var(--text-plan-name, var(--text-2xl));
  font-weight: var(--plan-name-weight, var(--heading-weight));
  line-height: 1;
  letter-spacing: var(--heading-tracking);
  color: var(--color-ink);
}
.badge--brand {
  height: 28px;
  padding: 0 var(--space-4);
  background: var(--color-badge-brand, var(--color-accent-soft));
  color: var(--color-ink);
  font-size: var(--text-sm);
}
.tier__tag { margin-top: var(--space-2); padding: 0 var(--space-2); font-size: var(--text-plan-tag, var(--text-base)); line-height: var(--leading-normal); color: var(--color-ink-muted); }
.tier__price { display: flex; flex-direction: column; margin-top: var(--space-2); padding: 0 var(--space-2); }
.tier__amount {
  font-family: var(--font-display);
  font-size: var(--text-plan-price, var(--text-5xl));
  font-weight: var(--plan-price-weight, var(--heading-weight));
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.tier__per { margin-top: 2px; font-family: var(--font-display); font-size: var(--text-plan-per, var(--text-lg)); line-height: 1; color: var(--color-ink-muted); }
.tier__cta { margin-top: var(--space-6); gap: var(--space-5); font-size: var(--text-lg); }
.tier__cta .icon { width: 20px; height: 20px; stroke-width: calc(var(--icon-stroke) * 1.33); }
.btn--outline {
  --_btn-ink: var(--color-ink);
  background: transparent;
  border-width: 1.5px;
  border-color: var(--color-ink-muted);
}
.btn--outline:hover:not(:disabled) { background: var(--color-surface); border-color: var(--color-ink); }
.tier__rule { height: 2px; margin: var(--space-5) 0 0; border: 0; background: var(--color-line); }
.tier__features { display: flex; flex-direction: column; margin-top: var(--space-3); padding: 0 var(--space-2) 0 calc(var(--space-2) - 1px); }
/* 33px rows: the mock's ticks are 16 x 12 (a 24px Lucide check) with the text 35px after their left edge. */
.tier__feature {
  display: flex;
  align-items: center;
  gap: calc(var(--space-3) + 2px);
  font-size: var(--text-tier-feature, var(--text-lg));
  line-height: calc(var(--text-lg) * 1.85);
  color: var(--color-ink-muted);
}
.tier__feature .icon { width: 24px; height: 24px; }
.tier__tick { color: var(--color-check, var(--color-info)); stroke-width: calc(var(--icon-stroke) * 1.6); }
.tier__dash { color: var(--color-ink-subtle); stroke-width: calc(var(--icon-stroke) * 1.33); }
.pricing__fine { position: relative; z-index: 2; margin-top: var(--space-4); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-ink-muted); text-align: center; }

.faq {
  position: relative;
  z-index: 1;
  max-width: calc(var(--faq-w, var(--width-wide)) + var(--space-6) * 2);
  margin-top: var(--faq-top, var(--space-12));
  text-align: center;
}
.faq__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--heading-weight-section, var(--heading-weight));
  line-height: var(--heading-leading);
  letter-spacing: var(--heading-tracking);
  color: var(--color-ink);
  text-wrap: balance;
}
.faq__list { display: flex; flex-direction: column; gap: calc(var(--space-1) * 1.5); margin-top: var(--space-3); text-align: left; }
.faq__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  min-height: var(--faq-row-h, var(--control-h-md));
  padding: var(--space-2) var(--space-6) var(--space-2) calc(var(--space-8) + 2px);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-snug);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.faq__btn:hover { background: var(--color-sunken); }
.faq__icon { width: 14px; height: 14px; color: var(--color-ink-muted); transition: transform var(--duration-base) var(--ease-out); }
.faq__btn[aria-expanded="true"] .faq__icon { transform: rotate(45deg); }
.faq__panel { padding: var(--space-3) var(--space-12) var(--space-4) calc(var(--space-8) + 2px); color: var(--color-ink-muted); line-height: var(--leading-normal); text-wrap: pretty; }

/* Login */
.login {
  /* Composed for the mock's 1086px-tall frame (--login-frame-h). On shorter viewports the bar
     height, the card's top offset, its vertical padding and the vertical rhythm inside it all
     shrink by one factor so the card fits without scrolling; at the frame height and above the
     factor is 1 and nothing changes. tan(atan2(a, b)) is a / b as a plain number (CSS cannot
     divide two lengths directly), and the deficit is applied 1.8 times over because the card's
     text and controls do not shrink: at 900px that lands the whole page, footer included, on
     one screen. The floor keeps very short viewports from collapsing the spacing entirely. */
  --_fit: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-page);
}
/* Browsers without the trigonometric functions (before 2023) keep the full-height rhythm. */
@supports (opacity: tan(atan2(1px, 1px))) {
  .login { --_fit: clamp(0.66, calc(1 - 1.8 * (1 - tan(atan2(100vh, var(--login-frame-h, 100vh))))), 1); }
}
.login__sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* ribbon:start (generated by shots/cleanup-fix/make-ribbon-d.ps1; edit the generator, not this block) */
.rainbow { display: block; width: 100%; height: 100%; }
.rainbow__p { fill: none; stroke-linecap: round; }
.rainbow__p--glow { d: path("M 280 -400 C 358 -333, 632 -105, 745 0 C 858 105, 902 158, 960 230 C 1018 302, 1053 367, 1090 430 C 1127 493, 1140 559, 1180 610 C 1220 661, 1267 701, 1330 735 C 1393 769, 1473 793, 1560 815 C 1647 837, 1802 857, 1850 865"); animation: rw-glow 16s ease-in-out infinite alternate; }
@keyframes rw-glow { to { d: path("M 302 -400 C 377 -333, 642 -106, 751 0 C 861 105, 903 165, 961 235 C 1020 304, 1069 351, 1103 417 C 1137 483, 1124 578, 1164 628 C 1204 678, 1276 687, 1343 718 C 1411 749, 1482 792, 1569 814 C 1655 836, 1814 845, 1863 851"); } }
.rainbow__p--skywash { d: path("M 72 -158 C 149 -93, 422 135, 532 230 C 642 325, 679 356, 733 412 C 786 469, 812 508, 852 568 C 892 628, 915 707, 975 772 C 1035 836, 1125 906, 1212 953 C 1300 1000, 1401 1029, 1500 1055 C 1599 1081, 1757 1100, 1808 1109"); animation: rw-skywash 14s ease-in-out infinite alternate; }
@keyframes rw-skywash { to { d: path("M 88 -144 C 165 -85, 440 117, 547 212 C 653 306, 675 364, 727 422 C 779 480, 816 500, 857 559 C 898 619, 909 715, 971 781 C 1034 847, 1142 913, 1232 956 C 1322 1000, 1413 1017, 1511 1042 C 1609 1067, 1769 1096, 1820 1107"); } }
.rainbow__p--lav { d: path("M 195 -301 C 272 -235, 545 -6, 657 94 C 769 195, 811 240, 867 305 C 922 370, 954 425, 992 487 C 1030 549, 1047 620, 1096 676 C 1144 733, 1208 785, 1282 825 C 1355 864, 1443 890, 1535 914 C 1627 937, 1783 957, 1833 965"); animation: rw-lav 13s ease-in-out infinite alternate; }
@keyframes rw-lav { to { d: path("M 208 -287 C 286 -226, 565 -20, 672 82 C 780 183, 797 256, 853 321 C 909 386, 970 410, 1008 472 C 1046 534, 1034 637, 1082 693 C 1131 750, 1223 775, 1299 812 C 1376 848, 1452 889, 1544 912 C 1635 936, 1796 945, 1846 951"); } }
.rainbow__p--s3 { d: path("M 176 -279 C 253 -213, 526 15, 638 115 C 750 215, 790 258, 846 322 C 901 385, 932 438, 971 499 C 1009 561, 1027 634, 1077 691 C 1127 749, 1196 804, 1271 844 C 1347 885, 1437 912, 1530 935 C 1623 959, 1779 979, 1829 987"); animation: rw-s3 10s ease-in-out infinite alternate; }
@keyframes rw-s3 { to { d: path("M 190 -265 C 267 -204, 546 1, 653 102 C 760 202, 776 274, 832 338 C 888 402, 948 423, 987 484 C 1025 546, 1013 650, 1064 708 C 1114 766, 1211 794, 1290 832 C 1369 870, 1446 911, 1538 934 C 1630 958, 1792 967, 1842 974"); } }
.rainbow__p--hi { d: path("M 256 -372 C 333 -305, 607 -77, 720 27 C 833 131, 877 181, 934 251 C 991 321, 1025 383, 1062 446 C 1099 509, 1114 576, 1156 629 C 1198 681, 1250 725, 1316 760 C 1382 796, 1465 821, 1553 843 C 1641 865, 1796 885, 1845 893"); animation: rw-hi 14s ease-in-out infinite alternate; }
@keyframes rw-hi { to { d: path("M 276 -369 C 352 -303, 619 -80, 728 24 C 837 129, 874 190, 930 260 C 986 329, 1027 377, 1064 440 C 1101 503, 1109 585, 1153 637 C 1196 690, 1257 724, 1325 757 C 1394 789, 1476 808, 1564 830 C 1653 853, 1808 881, 1856 891"); } }
.rainbow__p--org { d: path("M 318 -444 C 395 -377, 670 -149, 784 -42 C 898 65, 943 122, 1001 197 C 1060 271, 1097 341, 1133 405 C 1169 469, 1181 532, 1217 581 C 1254 629, 1292 664, 1351 695 C 1410 727, 1487 750, 1571 771 C 1655 792, 1810 812, 1858 821"); animation: rw-org 12s ease-in-out infinite alternate; }
@keyframes rw-org { to { d: path("M 327 -430 C 407 -367, 692 -159, 802 -52 C 912 55, 931 139, 989 212 C 1047 286, 1114 326, 1149 390 C 1185 454, 1168 549, 1203 597 C 1239 645, 1300 648, 1362 677 C 1425 706, 1495 749, 1580 770 C 1664 792, 1822 801, 1870 807"); } }
.rainbow__p--s1 { d: path("M 337 -467 C 415 -400, 690 -171, 804 -64 C 918 44, 964 104, 1023 180 C 1081 255, 1120 328, 1156 392 C 1191 456, 1202 518, 1237 565 C 1271 612, 1306 644, 1362 675 C 1419 705, 1493 728, 1577 749 C 1660 769, 1814 789, 1862 798"); animation: rw-s1 11s ease-in-out infinite alternate; }
@keyframes rw-s1 { to { d: path("M 346 -452 C 426 -389, 712 -181, 822 -74 C 933 34, 953 120, 1011 195 C 1069 270, 1136 313, 1172 377 C 1207 442, 1189 535, 1223 582 C 1256 628, 1312 628, 1372 656 C 1433 683, 1502 726, 1585 748 C 1669 769, 1826 778, 1874 784"); } }
.rainbow__p--coral { d: path("M 377 -513 C 455 -445, 729 -217, 844 -107 C 959 3, 1006 66, 1066 145 C 1125 224, 1166 301, 1201 366 C 1236 431, 1245 490, 1276 535 C 1306 579, 1333 606, 1385 634 C 1437 662, 1507 684, 1588 703 C 1669 723, 1823 743, 1870 751"); animation: rw-coral 11s ease-in-out infinite alternate; }
@keyframes rw-coral { to { d: path("M 394 -508 C 470 -441, 740 -214, 852 -104 C 964 6, 1007 74, 1065 151 C 1124 229, 1168 295, 1202 360 C 1237 424, 1244 496, 1275 541 C 1305 585, 1332 601, 1386 626 C 1440 651, 1517 670, 1600 690 C 1682 711, 1833 740, 1880 749"); } }
.rainbow__p--pink { d: path("M 422 -565 C 500 -497, 775 -269, 891 -157 C 1006 -45, 1055 23, 1115 105 C 1176 187, 1219 270, 1253 336 C 1287 402, 1294 458, 1320 500 C 1347 541, 1364 561, 1410 586 C 1457 611, 1523 632, 1601 651 C 1679 670, 1832 690, 1879 698"); animation: rw-pink 16s ease-in-out infinite alternate; }
@keyframes rw-pink { to { d: path("M 430 -552 C 510 -487, 798 -277, 910 -165 C 1022 -52, 1044 40, 1103 121 C 1162 203, 1230 258, 1264 324 C 1298 390, 1281 476, 1306 516 C 1331 556, 1363 544, 1414 566 C 1465 589, 1531 630, 1610 650 C 1689 669, 1844 678, 1891 684"); } }
.rainbow__p--s4 { d: path("M 410 -551 C 488 -483, 763 -255, 878 -144 C 994 -33, 1042 35, 1102 116 C 1162 197, 1204 278, 1239 344 C 1273 409, 1281 466, 1308 509 C 1336 551, 1355 573, 1403 599 C 1452 625, 1519 646, 1598 665 C 1676 684, 1830 705, 1876 712"); animation: rw-s4 13s ease-in-out infinite alternate; }
@keyframes rw-s4 { to { d: path("M 418 -538 C 498 -473, 786 -263, 898 -152 C 1010 -40, 1031 51, 1089 132 C 1148 213, 1217 266, 1251 332 C 1285 397, 1267 484, 1294 526 C 1320 567, 1356 556, 1408 579 C 1460 602, 1526 644, 1606 664 C 1687 684, 1842 693, 1889 698"); } }
.rainbow__p--violet { d: path("M 462 -611 C 540 -543, 815 -314, 931 -201 C 1047 -87, 1097 -14, 1158 71 C 1220 156, 1264 243, 1298 310 C 1331 376, 1337 430, 1359 469 C 1382 508, 1390 522, 1433 545 C 1475 568, 1537 588, 1612 605 C 1688 623, 1841 644, 1887 652"); animation: rw-violet 15s ease-in-out infinite alternate; }
@keyframes rw-violet { to { d: path("M 477 -608 C 554 -539, 828 -311, 941 -197 C 1055 -82, 1098 -6, 1157 78 C 1216 161, 1263 239, 1297 305 C 1330 371, 1335 436, 1357 475 C 1379 514, 1384 517, 1428 537 C 1473 556, 1546 574, 1624 593 C 1703 612, 1851 640, 1897 650"); } }
.rainbow__p--sky { d: path("M 507 -664 C 585 -595, 861 -367, 977 -251 C 1094 -135, 1146 -57, 1208 31 C 1270 119, 1317 213, 1350 280 C 1382 347, 1386 397, 1404 434 C 1422 470, 1421 477, 1458 497 C 1495 517, 1553 536, 1625 553 C 1698 570, 1851 591, 1896 599"); animation: rw-sky 13s ease-in-out infinite alternate; }
@keyframes rw-sky { to { d: path("M 519 -659 C 598 -590, 874 -361, 988 -245 C 1103 -130, 1149 -50, 1209 36 C 1269 123, 1316 208, 1348 275 C 1380 342, 1385 404, 1402 439 C 1419 475, 1412 471, 1451 488 C 1490 505, 1562 522, 1638 540 C 1713 559, 1861 587, 1906 597"); } }
.rainbow__p--s2 { d: path("M 519 -678 C 598 -609, 873 -381, 990 -264 C 1107 -148, 1159 -69, 1221 20 C 1284 110, 1331 204, 1363 272 C 1396 339, 1399 389, 1416 424 C 1433 460, 1430 466, 1465 485 C 1501 504, 1557 522, 1629 539 C 1701 556, 1853 577, 1898 585"); animation: rw-s2 14s ease-in-out infinite alternate; }
@keyframes rw-s2 { to { d: path("M 531 -673 C 609 -604, 886 -375, 1001 -258 C 1116 -142, 1162 -62, 1222 26 C 1282 113, 1330 200, 1362 267 C 1394 335, 1398 395, 1414 430 C 1430 464, 1419 458, 1457 475 C 1495 491, 1566 508, 1641 526 C 1716 544, 1864 573, 1908 582"); } }
.rainbow__p--face { d: path("M 227 -338 C 304 -272, 578 -44, 691 59 C 803 161, 846 209, 902 276 C 959 344, 992 403, 1029 465 C 1067 528, 1083 597, 1128 651 C 1173 705, 1231 753, 1300 790 C 1370 828, 1455 853, 1545 876 C 1635 899, 1790 919, 1839 927"); animation: rw-face 15s ease-in-out infinite alternate; }
@keyframes rw-face { to { d: path("M 249 -335 C 323 -270, 589 -48, 698 55 C 807 158, 846 215, 901 283 C 957 350, 992 397, 1029 460 C 1067 522, 1079 604, 1126 659 C 1172 714, 1238 755, 1310 789 C 1382 823, 1466 841, 1556 863 C 1646 886, 1801 915, 1851 925"); } }
.rainbow__p--gloss { d: path("M 295 -418 C 373 -351, 647 -122, 760 -17 C 874 89, 919 144, 977 217 C 1034 290, 1071 356, 1107 420 C 1144 484, 1156 548, 1195 598 C 1233 648, 1277 686, 1339 719 C 1400 752, 1479 776, 1564 798 C 1650 819, 1805 839, 1853 847"); animation: rw-gloss 12s ease-in-out infinite alternate; }
@keyframes rw-gloss { to { d: path("M 311 -409 C 388 -345, 663 -129, 773 -22 C 882 84, 912 157, 969 229 C 1026 301, 1079 347, 1115 410 C 1152 474, 1148 560, 1187 610 C 1226 660, 1283 679, 1348 709 C 1412 739, 1488 769, 1574 791 C 1661 812, 1817 831, 1865 839"); } }
.rainbow__p--r-lav { d: path("M 1863 945 C 1820 967, 1687 1036, 1604 1077 C 1522 1118, 1423 1136, 1370 1191 C 1316 1246, 1297 1370, 1283 1406"); animation: rw-r-lav 13s ease-in-out infinite alternate; }
@keyframes rw-r-lav { to { d: path("M 1877 927 C 1830 955, 1682 1054, 1598 1095 C 1515 1137, 1431 1121, 1377 1176 C 1323 1231, 1294 1382, 1277 1423"); } }
.rainbow__p--r-s3 { d: path("M 1872 962 C 1829 984, 1694 1054, 1613 1094 C 1532 1135, 1436 1152, 1384 1205 C 1332 1259, 1315 1379, 1301 1414"); animation: rw-r-s3 10s ease-in-out infinite alternate; }
@keyframes rw-r-s3 { to { d: path("M 1886 944 C 1840 972, 1689 1071, 1607 1112 C 1525 1153, 1443 1137, 1391 1190 C 1339 1243, 1311 1392, 1295 1432"); } }
.rainbow__p--r-hi { d: path("M 1836 890 C 1793 912, 1662 978, 1576 1020 C 1491 1063, 1382 1086, 1323 1146 C 1264 1206, 1240 1341, 1223 1380"); animation: rw-r-hi 14s ease-in-out infinite alternate; }
@keyframes rw-r-hi { to { d: path("M 1853 883 C 1805 907, 1650 984, 1564 1027 C 1479 1070, 1400 1079, 1340 1140 C 1281 1200, 1230 1349, 1208 1390"); } }
.rainbow__p--r-org { d: path("M 1808 834 C 1765 856, 1636 919, 1548 963 C 1459 1007, 1340 1035, 1276 1100 C 1212 1165, 1182 1312, 1163 1354"); animation: rw-r-org 12s ease-in-out infinite alternate; }
@keyframes rw-r-org { to { d: path("M 1816 815 C 1770 843, 1631 936, 1542 981 C 1452 1025, 1345 1017, 1281 1082 C 1218 1147, 1181 1321, 1161 1368"); } }
.rainbow__p--r-s1 { d: path("M 1799 816 C 1756 838, 1628 900, 1538 945 C 1449 990, 1327 1019, 1262 1085 C 1196 1152, 1164 1302, 1144 1346"); animation: rw-r-s1 11s ease-in-out infinite alternate; }
@keyframes rw-r-s1 { to { d: path("M 1806 798 C 1761 825, 1623 918, 1533 963 C 1443 1008, 1331 1001, 1266 1067 C 1201 1133, 1163 1311, 1142 1359"); } }
.rainbow__p--r-coral { d: path("M 1781 781 C 1738 802, 1612 863, 1520 909 C 1429 955, 1301 986, 1232 1056 C 1163 1126, 1127 1284, 1106 1329"); animation: rw-r-coral 11s ease-in-out infinite alternate; }
@keyframes rw-r-coral { to { d: path("M 1794 775 C 1746 798, 1600 869, 1508 915 C 1417 960, 1316 977, 1246 1047 C 1177 1118, 1118 1288, 1092 1336"); } }
.rainbow__p--r-pink { d: path("M 1761 740 C 1717 761, 1593 820, 1499 867 C 1406 914, 1271 949, 1198 1023 C 1125 1097, 1085 1262, 1062 1310"); animation: rw-r-pink 16s ease-in-out infinite alternate; }
@keyframes rw-r-pink { to { d: path("M 1766 724 C 1721 751, 1589 841, 1495 888 C 1401 934, 1275 933, 1203 1005 C 1131 1077, 1085 1268, 1061 1321"); } }
.rainbow__p--r-s4 { d: path("M 1767 751 C 1723 772, 1598 831, 1505 878 C 1412 925, 1279 959, 1207 1032 C 1135 1105, 1096 1268, 1074 1315"); animation: rw-r-s4 13s ease-in-out infinite alternate; }
@keyframes rw-r-s4 { to { d: path("M 1772 734 C 1726 762, 1594 852, 1501 899 C 1407 945, 1284 943, 1212 1014 C 1141 1085, 1096 1274, 1073 1327"); } }
.rainbow__p--r-violet { d: path("M 1743 705 C 1700 726, 1577 782, 1481 831 C 1385 879, 1244 916, 1168 994 C 1092 1071, 1048 1244, 1024 1294"); animation: rw-r-violet 15s ease-in-out infinite alternate; }
@keyframes rw-r-violet { to { d: path("M 1753 701 C 1706 724, 1566 792, 1471 839 C 1376 887, 1260 909, 1183 985 C 1106 1062, 1040 1245, 1011 1297"); } }
.rainbow__p--r-sky { d: path("M 1723 664 C 1679 685, 1559 739, 1460 789 C 1362 838, 1214 879, 1134 960 C 1054 1041, 1005 1222, 980 1274"); animation: rw-r-sky 13s ease-in-out infinite alternate; }
@keyframes rw-r-sky { to { d: path("M 1730 659 C 1683 681, 1547 748, 1449 796 C 1352 845, 1228 870, 1147 950 C 1066 1030, 996 1221, 966 1276"); } }
.rainbow__p--r-s2 { d: path("M 1718 653 C 1674 674, 1554 728, 1455 778 C 1356 827, 1206 869, 1125 951 C 1043 1033, 994 1216, 968 1269"); animation: rw-r-s2 14s ease-in-out infinite alternate; }
@keyframes rw-r-s2 { to { d: path("M 1724 648 C 1678 671, 1542 736, 1444 785 C 1346 834, 1219 860, 1138 941 C 1056 1022, 985 1215, 954 1270"); } }
[data-still="1"] .rainbow__p { animation: none; }
@media (prefers-reduced-motion: reduce) { .rainbow__p { animation: none; } }
/* ribbon:end */

/* Geometry from login-mock.png (1440 x 1086): a 116px bar with the lockup 51px in (mark 62 x 43,
   wordmark 48px) and "Back to home" 51px from the right; the card 600 x ~794 at y198 with 60px
   side padding, 20px corners, no border; 64px/700 headline; 56px inputs and buttons; 41/31/41/30px
   between the button, the "or" rule, Google, the divider and "New to Velvet?". */
.login__bar { position: relative; z-index: 1; display: flex; align-items: center; height: calc(var(--login-bar-h, 72px) * var(--_fit)); padding: 0 var(--space-12); }
.login__bar .logo--hero { gap: var(--space-2); }
.login__bar .logo--hero .logo__mark { width: var(--logo-mark-w-lg, var(--logo-mark-w, 30px)); height: var(--logo-mark-h-lg, var(--logo-mark-h, 30px)); }
.login__bar .logo--hero .logo__text { font-size: var(--text-wordmark-lg, var(--text-wordmark, 1.45em)); }
.login__back { --_btn-ink: var(--color-ink); gap: var(--space-3); margin-right: calc(-1 * var(--space-3)); padding: 0 var(--space-3); font-weight: var(--font-weight-semibold); }
.login__back .icon { width: 20px; height: 20px; stroke-width: calc(var(--icon-stroke) * 1.33); }
.login__center { position: relative; z-index: 1; flex: 1; display: grid; justify-items: center; align-content: start; padding: calc(var(--login-center-top, var(--space-6)) * var(--_fit)) var(--space-4) 0; }
.login__card {
  width: 100%;
  max-width: 600px;
  padding: calc(var(--space-16) * var(--_fit)) var(--login-card-pad-x, var(--space-12)) calc(var(--space-10) * var(--_fit));
  border-color: transparent;
  border-radius: var(--radius-login-card, var(--radius-xl));
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}
.login__card .input { width: 100%; }
.login__title {
  font-family: var(--font-display);
  font-size: var(--text-6xl, var(--text-5xl));
  font-weight: var(--display-weight, var(--heading-weight));
  line-height: 1.1;
  letter-spacing: var(--display-tracking, var(--heading-tracking));
  color: var(--color-ink);
}
.login__lede { margin-top: calc(var(--space-1) + 2px); font-size: var(--text-lede, var(--text-lg)); line-height: var(--leading-normal); color: var(--color-ink-muted); }
.login__field { gap: calc(var(--space-1) * 2.5); margin-top: calc((var(--space-6) + var(--space-1)) * var(--_fit)); }
.login__title + .login__lede + .login__field { margin-top: calc((var(--space-10) - 4px) * var(--_fit)); }
.login__card .field__label { font-size: var(--text-label, var(--text-sm)); color: var(--color-label, var(--color-ink)); }
.field__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.link--sm { font-size: 0.9375rem; font-weight: var(--font-weight-semibold); }
.input-wrap { position: relative; }
.input-wrap .input { padding-right: 56px; }
.input-wrap__icon {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink-muted);
  transform: translateY(-50%);
  cursor: pointer;
}
.input-wrap__icon .icon { width: 24px; height: 24px; }
.input-wrap__icon:hover { color: var(--color-ink); background: var(--color-sunken); }
.input-wrap__icon:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.login__remember { margin-top: calc(var(--space-5) * var(--_fit)); }
.login__remember .checkbox__label { font-weight: var(--font-weight-medium); }
.login__submit { margin-top: calc(var(--space-5) * var(--_fit)); gap: var(--space-4); font-size: var(--text-xl); }
.login__submit .icon { width: 22px; height: 22px; stroke-width: calc(var(--icon-stroke) * 1.33); }
.login__or { display: flex; align-items: center; gap: var(--space-4); margin: calc((var(--space-6) + var(--space-1)) * var(--_fit)) 0 calc(var(--space-5) * var(--_fit)); font-size: var(--text-base); color: var(--color-ink-muted); }
.login__or::before, .login__or::after { content: ""; flex: 1; height: var(--border-width); background: var(--color-line); }
.login__google { gap: var(--space-4); font-size: var(--text-base); }
.login__google .icon { width: 24px; height: 24px; }
.login__alt { margin-top: calc(var(--space-10) * var(--_fit)); padding-top: calc(var(--space-6) * var(--_fit)); border-top: var(--border-width) solid var(--color-line); text-align: center; color: var(--color-ink-muted); }
.login__footer { position: relative; z-index: 1; display: flex; gap: var(--space-10); margin-top: auto; padding: calc(var(--space-8) * var(--_fit)) var(--space-12) calc(var(--space-10) * var(--_fit)); font-size: var(--text-sm); color: var(--color-ink-muted); }
.login__footlink { color: inherit; text-decoration: none; }
.login__footlink:hover { color: var(--color-ink); text-decoration: underline; }

@media (max-width: 1100px) {
  .tiers { max-width: 100%; }
}
@media (max-width: 900px) {
  .inspo__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .navpill__links { gap: var(--space-2); }
  .navpill .nav-link { padding: 0 var(--space-2); }
  .navpill .nav-link[aria-current="page"] { padding: 0 var(--space-4); }
  .tiers { flex-wrap: wrap; }
  .tier { flex: 1 1 280px; }
  .pricing__title { font-size: var(--text-5xl); }
}
@media (max-width: 860px) {
  .navpill__links { display: none; }
}
/* Phone: the plate goes, the CSS sky with the drawn clouds and paper comes back, and the panel is
   as tall as its content. The art is placed for a 390px panel: two big clouds behind the headline
   (clipped by the panel's sides as in the mocks), one small one over the periwinkle, the paper
   sheets about 60% of the width each so they meet near the middle, the page edge across. */
@media (max-width: 768px) {
  .sky { background-image: linear-gradient(180deg, var(--color-sky-1, var(--color-accent-soft)) 0%, var(--color-sky-2, var(--color-page)) 55%, var(--color-sky-2, var(--color-page)) 100%); }
  .sky__art { display: block; }
  .sky__art--paper-page { bottom: -6px; }
  .sky--home .sky__art--cloud-1 { left: -70px; top: 112px; width: 230px; }
  .sky--home .sky__art--cloud-2 { left: auto; right: -80px; top: 64px; width: 230px; }
  .sky--home .sky__art--cloud-3, .sky--home .sky__art--cloud-5 { display: none; }
  .sky--home .sky__art--cloud-4 { left: 8px; top: auto; bottom: 150px; width: 110px; }
  .sky--home .sky__art--paper-left { bottom: -16px; width: 62%; }
  .sky--home .sky__art--paper-right { bottom: -16px; width: 58%; }
  .sky--pricing .sky__art--cloud-1 { left: -90px; top: 70px; width: 220px; }
  .sky--pricing .sky__art--cloud-2 { left: auto; right: -100px; top: 150px; width: 220px; }
  .sky--pricing .sky__art--cloud-3, .sky--pricing .sky__art--cloud-4 { display: none; }
  .sky--pricing .sky__art--cloud-5 { left: -40px; bottom: 40px; width: 240px; }
  .sky--pricing .sky__art--cloud-6 { left: auto; right: -60px; bottom: 10px; width: 240px; }
  .sky--pricing .sky__art--paper-left { bottom: -16px; width: 46%; }
  .sky--pricing .sky__art--paper-right { bottom: -16px; width: 60%; }
  .sky--making .sky__art--cloud-1 { left: -70px; top: 30%; width: 220px; }
  .sky--making .sky__art--cloud-2 { left: auto; right: -80px; top: 18%; width: 220px; }
  .sky--making .sky__art--cloud-3 { left: 4%; top: auto; bottom: 150px; width: 110px; }
  .sky--making .sky__art--cloud-4 { display: none; }
  .sky--making .sky__art--paper-left { bottom: -16px; width: 62%; }
  .sky--making .sky__art--paper-right { bottom: -16px; width: 58%; }
  .sky--home { aspect-ratio: auto; padding-bottom: 110px; border-bottom-left-radius: var(--radius-xl); border-bottom-right-radius: var(--radius-xl); }
  .landing--pricing { padding: 0 0 var(--space-16); }
  .sky--pricing { aspect-ratio: auto; padding: var(--space-3) var(--space-3) var(--space-16); border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
  .pricing__hero { margin-top: var(--space-10); }
  .pricing__title { font-size: var(--text-4xl); }
  .pricing__text { font-size: var(--text-base); }
  .tiers { flex-direction: column; align-items: center; margin-top: var(--space-8); }
  .tier { flex: none; width: 100%; }
  .faq { margin-top: var(--space-10); }
  .faq__title { font-size: var(--text-2xl); }
  .faq__btn { padding-left: var(--space-5); padding-right: var(--space-4); }
  .faq__panel { padding: var(--space-3) var(--space-5) var(--space-4); }
  .hero--composer { padding-top: var(--space-10); }
  .hero--composer .hero__title { font-size: var(--text-4xl); line-height: var(--heading-leading); letter-spacing: var(--heading-tracking); }
  .hero--composer .hero__text { font-size: var(--text-base); }
  .logo--hero { gap: var(--space-1); }
  .logo--hero .logo__mark { width: 36px; height: 25px; }
  .logo--hero .logo__text { font-size: var(--text-2xl); }
  .inspo { margin-top: var(--space-10); }
  .composer { margin-top: var(--space-8); padding: var(--space-4); }
  .composer__bar .btn--brand { flex: 1 1 100%; }
  .login { --_fit: 1; }  /* phones scroll the card; the height clamp is for desktop viewports */
  .login__bar { height: 64px; padding: 0 var(--space-4); }
  .login__bar .logo--hero .logo__mark { width: 36px; height: 25px; }
  .login__bar .logo--hero .logo__text { font-size: var(--text-2xl); }
  .login__back { padding: 0 var(--space-3); }
  .login__center { padding: var(--space-6) var(--space-4) 0; }
  .login__card { padding: var(--space-8) var(--space-5) var(--space-6); }
  .login__title { font-size: var(--text-4xl); }
  .login__footer { gap: var(--space-6); padding: var(--space-5) var(--space-4); }
}
@media (max-width: 600px) {
  .inspo__title { font-size: var(--text-3xl); }
  .inspo__grid { gap: var(--space-3); }
  .composer__sep { display: none; }
  .hero--composer .hero__title { font-size: var(--text-3xl); }
}



/* Product */
.found__line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink);
}
.found__line .icon { color: var(--color-success); }
.found__alt { margin-top: var(--space-4); }

/* Style */
.style-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
}

/* Opening */
.choices { display: flex; flex-direction: column; gap: var(--space-3); }

/* Plan: storyboard left with the reassurance beneath it, summary card right.
   The card spans both rows, so the two columns end near the same height. */
.plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "board summary"
    "note  summary";
  gap: var(--space-6) var(--space-8);
  align-items: start;
}
.storyboard {
  grid-area: board;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
.plan__note { grid-area: note; align-self: start; }
.storyboard__frame { display: flex; flex-direction: column; gap: var(--space-2); }
.storyboard__label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  text-align: center;
  color: var(--color-ink);
}
.summary { grid-area: summary; padding: var(--space-2) var(--space-5) var(--space-5); }
.summary__row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  min-height: var(--control-h-lg);
  padding: var(--space-2) 0;
  border-top: var(--border-width) solid var(--color-line);
}
.summary__row:first-child { border-top: 0; }
.summary__key {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-muted);
}
.summary__value { min-width: 0; color: var(--color-ink); }
.summary__product {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: var(--font-weight-medium);
}
.summary__product img {
  width: 40px;
  height: 40px;
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-sm);
  object-fit: cover;
}
.reassure {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
  text-wrap: pretty;
}
.reassure .icon { flex-shrink: 0; margin-top: 1px; color: var(--color-success); }

/* Making (Addendum 4): the whole screen is the sky panel; the logo at the top, then the mark,
   a two-line serif headline, one status line and an indeterminate indicator, centred. */
.landing--full { display: flex; flex-direction: column; min-height: 100vh; padding-bottom: var(--sky-inset-y, var(--space-4)); }
.sky--making {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-10) var(--space-5) var(--space-10);
}
/* The making panel fills the viewport, so it is taller than the plate's 1410:694 on every normal
   screen and the plate (background-size: cover) loses some of its sides: a fifth at 16:10, a third
   at 4:3, still the mock's sky with its clouds and torn paper. Squarer than 5:4 (a tablet held
   upright, a narrow window) the crop passes 40% and the sides with the clouds and paper are gone,
   so there the panel draws its own sky: the gradient plus the drawn clouds and paper (Addendum 6:
   plates at desktop widths, the drawn art wherever the plate cannot be used). */
@media (max-aspect-ratio: 5/4) {
  .sky--making {
    --sky-art-display: block;
    background-image: linear-gradient(180deg, var(--color-sky-1, var(--color-accent-soft)) 0%, var(--color-sky-2, var(--color-page)) 55%, var(--color-sky-2, var(--color-page)) 100%);
  }
}
.making__logo { position: relative; z-index: 2; flex: none; }
.making {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-8) 0 var(--space-16);
  text-align: center;
}
.making__mark {
  display: block;
  width: var(--making-mark-w, 150px);
  height: auto;
  color: var(--color-brand-mark, var(--color-accent));
  fill: currentColor;
  stroke: none;
}
.making__title {
  margin-top: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-hero, var(--text-5xl));
  font-weight: var(--hero-weight, var(--heading-weight));
  line-height: var(--hero-leading, var(--heading-leading));
  letter-spacing: var(--hero-tracking, var(--heading-tracking));
  color: var(--color-ink);
  text-wrap: balance;
}
.making__status { margin-top: var(--space-6); font-size: var(--text-xl); color: var(--color-ink); }
/* The indeterminate indicator: a light 390 x 16 track and an 80 x 16 yellow pill sliding from
   end to end and back, about 1.6s each way. The reduced-motion and still=1 rules freeze it. */
.loader {
  position: relative;
  width: 390px;
  max-width: 100%;
  height: 16px;
  margin-top: var(--space-8);
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--color-glass-soft, var(--color-glass, var(--color-sunken)));
}
.loader__pill {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 100%;
  border-radius: inherit;
  background: var(--color-brand, var(--color-accent));
  animation: loader-slide calc(var(--duration-slow) * 4.5) var(--ease-in-out) infinite alternate;
}
@keyframes loader-slide { to { left: calc(100% - 80px); } }

/* Result */
.result {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
  padding: var(--space-10) 0 var(--space-12);
}
.result__main > * + * { margin-top: var(--space-6); }
.result__title { margin-bottom: var(--space-2); }
.caption-box {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  border-radius: var(--radius-card);
  background: var(--color-sunken);
}
.caption-box__text { flex: 1; min-width: 0; padding-top: var(--space-2); color: var(--color-ink); }
.caption-box__tags { color: var(--color-accent-ink); }
.result__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.feedback {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

/* Library */
.library { padding: var(--space-10) 0 var(--space-12); }
.library__title { margin-bottom: var(--space-6); }
.library .tabs { margin-bottom: var(--space-8); }
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: var(--space-8) var(--space-5);
}

/* Parts */
.parts { padding: var(--space-10) 0 var(--space-16); }
.parts__intro { margin-top: var(--space-2); margin-bottom: var(--space-8); }
.parts-section { padding: var(--space-8) 0; border-top: var(--border-width) solid var(--color-line); }
.parts-section__title { margin-bottom: var(--space-5); }
.parts-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}
.parts-row + .parts-row { margin-top: var(--space-5); }
.parts-row--top { align-items: flex-start; }
.parts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
  max-width: var(--width-wide);
}
/* The four callouts as a 2 x 2 block of equal widths, never an orphan row. */
.parts-grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
.type-sample__numbers { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.type-sample__numbers span { white-space: nowrap; }
.type-sample {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-3) 0;
}
.type-sample__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}
.parts-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  max-width: 880px;
}
.parts-dropdowns {
  display: grid;
  grid-template-columns: repeat(2, 280px);
  gap: var(--space-8);
  align-items: start;
}

/* --------------------------------------------------------------------------
   18. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .plan { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-6); }
  .result { grid-template-columns: 320px minmax(0, 1fr); gap: var(--space-8); }
}

@media (max-width: 900px) {
  .welcome__hero { grid-template-columns: 1fr; gap: var(--space-10); text-align: center; }
  .welcome__text { margin-left: auto; margin-right: auto; }
  .welcome__points { justify-content: center; }
  .style-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "board" "note" "summary";
    gap: var(--space-6);
  }
  .result { grid-template-columns: 1fr; gap: var(--space-8); }
  .result__side { max-width: 400px; }
  .parts-dropdowns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
}

@media (max-width: 768px) {
  .app { --_topbar-h: 56px; }
  .container { padding-left: var(--space-4); padding-right: var(--space-4); }
  .topbar { padding: 0 var(--space-4); }
  .topbar__nav { display: none; }
  .step { padding-top: var(--space-6); padding-bottom: var(--space-10); }
  .stepper, .question { margin-bottom: var(--space-6); }
  .display { font-size: var(--text-4xl); }
  .h1, .question__title { font-size: var(--text-2xl); }
  .lede, .question__help, .welcome__text { font-size: var(--text-base); }
  .step__footer { flex-wrap: wrap; margin-top: var(--space-8); }
  /* The cost line takes its own row above Back and the main button. */
  .step__cost { order: -1; flex: 1 1 100%; margin-left: 0; margin-bottom: var(--space-1); }
  .type-sample { grid-template-columns: 1fr; gap: var(--space-1); }
  /* Making screen on a phone: the headline steps down with the other display sizes. */
  .sky--making { padding: var(--space-8) var(--space-4) var(--space-8); }
  .making__title { font-size: var(--text-4xl); line-height: var(--heading-leading); letter-spacing: var(--heading-tracking); }
  .making__mark { width: 96px; }
  .making__status { font-size: var(--text-base); }
}

@media (max-width: 600px) {
  .display { font-size: var(--text-3xl); }
  .welcome { min-height: 0; padding-top: var(--space-8); padding-bottom: var(--space-10); }
  .welcome__points { gap: var(--space-3); margin-top: var(--space-10); }
  .point { flex: 1; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); text-align: center; }
  .fan { --_fan-w: 150px; }
  .topbar--app .logo__text { display: none; }
  .style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .storyboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary { padding: var(--space-1) var(--space-4) var(--space-4); }
  .summary__row { grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-3); }
  .product-card {
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-areas:
      "photo body"
      "strip strip";
    column-gap: var(--space-4);
  }
  .product-card__photo { width: 112px; height: 112px; }
  .product-card__thumb { width: 40px; height: 40px; }
  .product-card__count { white-space: nowrap; }
  .making__tile { width: 160px; }
  .result { padding-top: var(--space-6); }
  /* The two main buttons share the first row; the quiet one takes a full row
     beneath them, centred, instead of hanging 21px in from the left edge. */
  .result__actions .btn { flex: 1 1 auto; }
  .result__actions .btn--quiet { flex-basis: 100%; }
  /* Four tabs fit one phone row when they tighten up; wrap is the safety net. */
  .tabs { flex-wrap: wrap; gap: 0; }
  .tab { padding: 0 var(--space-2); gap: var(--space-1); font-size: var(--text-sm); }
  /* The link input keeps its words for assistive tech but shows only the icon. */
  .input-group .btn { width: var(--control-h-sm); padding: 0; }
  .input-group .btn__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-3); }
  .parts-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .parts-grid--wide { grid-template-columns: 1fr; }
  .parts-dropdowns { grid-template-columns: 1fr; }
  .btn--lg { padding: 0 var(--space-6); }
}

/* ==========================================================================
   19. SWITCHER BAR: fixed values on purpose.
   The brief (section 10) wants this pill identical in every look and theme,
   so it is the one block that does not use tokens.
   ========================================================================== */

html[data-chrome="1"] body { padding-bottom: 120px; }
html[data-chrome="1"] .toast { bottom: 112px; }
html[data-chrome="0"] .switcher { display: none; }

.switcher {
  position: fixed;
  z-index: 100;
  bottom: 16px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100vw - 24px);
  padding: 6px;
  border-radius: 999px;
  background: #1C1C1F;
  color: #F2F2F2;
  font: 500 12px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06);
  transform: translateX(-50%);
}
.switcher__group { display: flex; align-items: center; gap: 2px; }
.switcher__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #C8C8CC;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.switcher__btn:hover { background: #2E2E33; color: #FFFFFF; }
.switcher__btn.is-active { background: #F2F2F2; color: #111111; }
.switcher__btn:focus-visible { outline: 2px solid #F2F2F2; outline-offset: 1px; }
.switcher__arrow { width: 30px; padding: 0; }
.switcher .icon { width: 16px; height: 16px; stroke-width: 2; }
.switcher__sep { width: 1px; height: 18px; background: #3A3A40; }
.switcher__screen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  color: #FFFFFF;
  white-space: nowrap;
}
.switcher__count { color: #8E8E95; font-variant-numeric: tabular-nums; }
.switcher__blurb {
  max-width: 380px;
  padding: 0 10px 0 2px;
  overflow: hidden;
  color: #9A9AA1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1000px) {
  .switcher__blurb { display: none; }
}
@media (max-width: 600px) {
  html[data-chrome="1"] body { padding-bottom: 150px; }
  html[data-chrome="1"] .toast { bottom: 140px; }
  .switcher {
    bottom: 8px;
    flex-wrap: wrap;
    justify-content: center;
    /* Explicit width: a wrapping group no longer props the pill open, and
       shrink-to-fit would otherwise collapse it to one button per row. */
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    border-radius: 20px;
  }
  /* Five look buttons are wider than a phone, so the group wraps too. */
  .switcher__group { flex-wrap: wrap; justify-content: center; max-width: 100%; row-gap: 2px; }
  .switcher__sep { display: none; }
}