/* Shared marketing chrome — radio on every public page. */
@font-face { font-family: 'Oxanium'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/oxanium-400.woff2') format('woff2'); }
@font-face { font-family: 'Oxanium'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/oxanium-600.woff2') format('woff2'); }
@font-face { font-family: 'Oxanium'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/oxanium-600.woff2') format('woff2'); }
@font-face { font-family: 'Saira Extra Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/saira-extra-condensed-500.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/assets/fonts/space-grotesk.woff2') format('woff2'); }

* { box-sizing: border-box; }
html { color-scheme: dark; background: #030201; }
body { margin: 0; background: #030201; color: var(--marketing-text); font: 400 16px/1.5 var(--font-ui); -webkit-font-smoothing: antialiased; }
html:has(.cabinet-home),
html:has(.cabinet-room),
.cabinet-home,
.cabinet-room,
.cabinet-home *,
.cabinet-room * {
  cursor: url('/assets/cursor-hand.png') 14 10, url('/assets/cursor-hand.svg') 13 3, pointer;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: url('/assets/cursor-hand.png') 14 10, url('/assets/cursor-hand.svg') 13 3, pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--marketing-accent); outline-offset: 4px; }
::selection { background: var(--marketing-accent); color: var(--marketing-accent-ink); }
p, h1, h2, h3, h4 { margin: 0; }
h1, h2, h3, .brand, .wordmark, .price, .radio-brand { font-family: var(--font-marketing); font-weight: 600; }
h1, h2 { letter-spacing: -.04em; line-height: 1.08; }
h1 { font-size: 56px; }
h2 { font-size: 32px; }
h3 { font-size: 24px; line-height: 1.25; }
code, pre { font: 400 12px/1.6 var(--font-mono); }
code { overflow-wrap: anywhere; }
[hidden] { display: none; }
.wrap { width: min(100% - 96px, 1312px); margin-inline: auto; }
.section { padding-block: var(--space-page-lg); }
.sr-only, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { position: fixed; inset: 16px auto auto 16px; z-index: 40; padding: var(--space-xl); background: var(--marketing-accent); color: var(--marketing-accent-ink); }

/* Radio — the photograph is the tuner. Links sit on the painted labels. */
.radio {
  --needle: 50%;
  position: relative;
  z-index: 8;
  display: grid;
  grid-template-columns: 96px 1fr 96px;
  align-items: center;
  gap: 12px;
  min-height: 104px;
  padding: 12px 20px 16px;
  color: var(--marketing-text);
  background-color: #070605;
}
/* Compaction factor 0 (full 1024:192 photo) → 1 (pinned bar). Registered so the
   scroll-free drivers (route pages, mobile, reduced motion) can tween it. */
@property --compact {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
.radio.hero-image,
.radio.photo-radio {
  background-color: #050403;
  background-image: url('/assets/radio-face.jpg');
  background-size: 100% auto;
  background-position: 0 calc(-1 * var(--cy, 0px));
  background-repeat: no-repeat;
  border: 0;
  box-shadow: none;
}
/* The radio is the one element that resizes with the window. Full state: the
   whole photo at viewport width (height --ph = 192/1024 of the width). Compact
   state: a full-width bar --bar-h tall (96px at 1440, never under 64px) that
   shows the tuner row of the same photo — horizontal percentages are untouched,
   so words, needle, lit crops and knobs stay pixel-synced; vertical positions
   are photo lengths minus the crop offset --cy. */
.photo-radio {
  --ph: 18.75cqw;
  --bar-h: clamp(64px, 6.667cqw, var(--ph));
  --compact: 0;
  --y0: clamp(0px, calc(0.64 * var(--ph) - var(--bar-h) / 2), calc(var(--ph) - var(--bar-h)));
  --cy: calc(var(--compact) * var(--y0));
  /* Written as bar + (1 - c) * (ph - bar): Chrome evaluates
     `ph - c * (ph - clamp(...))` to 0. */
  --radio-h: calc(var(--bar-h) + (1 - var(--compact)) * (var(--ph) - var(--bar-h)));
  --kr: 4.88cqw;
  display: block;
  min-height: 0;
  padding: 0;
  height: var(--radio-h);
  container-type: inline-size;
  transition: --compact 0.28s ease;
}
html[data-compact] .photo-radio { --compact: 1; }
html.cabinet-scroll .cabinet-home .photo-radio {
  --compact: var(--doors, 0);
  transition: none;
}
@media (prefers-reduced-motion: reduce) { .photo-radio { transition: none; } }
.radio-knob {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  justify-self: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: transparent;
}
.photo-radio .radio-home {
  --kc: calc(0.6424 * var(--ph) - var(--cy));
  position: absolute;
  left: 14.05%;
  top: var(--kc);
  transform: translate(-50%, -50%);
  width: 9.76%;
  aspect-ratio: 1;
  height: auto;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
}
/* In the compact bar the knob circles are letterboxed by the photo crop; clip
   the hit targets to the same band so nothing reacts outside the bar. */
.photo-radio .radio-home,
.photo-radio .radio-sign {
  clip-path: inset(
    max(0px, calc(var(--kr) - var(--kc)))
    0
    max(0px, calc(var(--kc) + var(--kr) - var(--radio-h)))
    0
  );
}
.radio-sign {
  display: grid;
  justify-items: center;
  align-items: center;
  gap: 0;
  justify-self: center;
  text-align: center;
  color: transparent;
}
.photo-radio .radio-sign {
  --kc: calc(0.6406 * var(--ph) - var(--cy));
  position: absolute;
  right: auto;
  left: 84.08%;
  top: var(--kc);
  transform: translate(-50%, -50%);
  width: 9.76%;
  aspect-ratio: 1;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  border-radius: 50%;
  grid-template-rows: 1fr 1fr 1fr;
}
.photo-radio .radio-sign .radio-knob {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
  display: grid;
  place-items: center;
}
.photo-radio .radio-sign .sign-up {
  letter-spacing: 0.1em;
  transform: translateY(1px);
}
.photo-radio .radio-sign .sign-word {
  letter-spacing: 0.08em;
}
.photo-radio .radio-sign .sign-in {
  letter-spacing: 0.1em;
  transform: translateY(-1px);
}
.radio-knob .knob-label, .radio-sign .sign-word {
  font-family: var(--font-marketing);
  font-size: clamp(11px, 1.05cqw, 16px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: center;
}
.knob-preview {
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  z-index: 3;
  min-width: 14ch;
  transform: translateX(-50%);
  font-family: var(--font-marketing);
  font-size: 12px;
  color: var(--marketing-accent);
  text-shadow: 0 0 10px var(--marketing-accent);
  pointer-events: none;
  white-space: nowrap;
}
.radio-home .knob-label {
  color: transparent;
  transition: color 0.15s ease, text-shadow 0.15s ease;
  letter-spacing: 0.08em;
  transform: translateY(1px);
}
.radio-home:hover .knob-preview,
.radio-home.is-hot .knob-preview,
.radio-home:focus-visible .knob-preview { opacity: 1; }
.radio-face { min-width: 0; }
.photo-radio .radio-face {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.photo-radio .radio-scale,
.photo-radio #site-nav { pointer-events: auto; }
.photo-radio .radio-home,
.photo-radio .radio-sign { z-index: 3; }
.radio-brand, .radio-tag { color: transparent; }
.radio-brand { display: inline-flex; align-items: baseline; gap: 0; font-size: 16px; }
.radio-brand sup { font-size: 10px; }
.brand-mark { color: var(--marketing-accent); }
/* Compact bar: the plate's own wordmark (photo x 172–330, y 22–58) is cropped
   out with the top of the radio, so the same crop is re-set left of the HOME
   knob in the tuner row. Fades in with --compact; the text stays for readers. */
.photo-radio .radio-brand {
  position: absolute;
  left: 1%;
  top: 50%;
  width: 7.6%;
  aspect-ratio: 158 / 36;
  margin: 0;
  display: block;
  font-size: 0;
  opacity: var(--compact);
  transform: translateY(-50%);
  background: url('/assets/radio-face.jpg') 19.861% 14.103% / 648.101% auto no-repeat;
  pointer-events: none;
  z-index: 2;
}
.photo-radio .radio-brand sup { font-size: 0; }
/* The tagline is painted on the plate; the text is for readers only. */
.photo-radio .radio-tag {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.radio-scale {
  position: relative;
  height: 44px;
}
/* Photo rows: scale y 24%–90%, tick band y 54.36%–80.76% of the plate. In the
   compact bar the scale is clipped to the bar; the tick band keeps its plate
   position so the needle never leaves the photographed band. */
.photo-radio .radio-scale {
  position: absolute;
  left: 17%;
  right: 17%;
  top: max(0px, calc(0.24 * var(--ph) - var(--cy)));
  bottom: max(0px, calc(var(--cy) + var(--radio-h) - 0.9 * var(--ph)));
  height: auto;
}
/* The tick band is the photographed baseline: x 217–783 of the 1024px plate,
   i.e. 21.19%–76.46% of the radio, so 50% of --needle is the plate's own
   centre mark (where the baked needle rested before it was painted out). */
.photo-radio .radio-ticks {
  position: absolute;
  left: 6.35%;
  right: 9.91%;
  top: calc(0.5436 * var(--ph) - var(--cy) - max(0px, calc(0.24 * var(--ph) - var(--cy))));
  height: calc(0.264 * var(--ph));
  overflow: hidden;
  pointer-events: none;
}
.radio-needle {
  position: absolute;
  top: 8%;
  left: var(--needle);
  height: 84%;
  width: auto;
  aspect-ratio: 12 / 95;
  background: url('/assets/radio-needle.png') center / 100% 100% no-repeat;
  transform: translateX(-50%);
  transition: left 0.16s ease-out;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .radio-needle { transition: none; } }
.radio #site-nav {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: 'Saira Extra Condensed', var(--font-marketing);
  font-size: 16px;
  font-weight: 600;
}
.photo-radio #site-nav {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: block;
  margin: 0;
  padding: 0;
}
.radio #site-nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: flex-start;
  padding-top: 2px;
  color: transparent;
}
.photo-radio #site-nav a {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  min-height: 0;
  padding: 0;
  margin: 0;
  display: block;
  text-decoration: none;
  color: transparent;
  background: none;
}
.photo-radio #site-nav a .station-label {
  position: absolute;
  color: transparent;
  pointer-events: none;
  font-size: 0;
}
.radio #site-nav a:hover,
.radio #site-nav a:focus-visible,
.radio #site-nav a[aria-current='page'],
.radio #site-nav a.is-lit {
  color: transparent;
  background: none;
}
.photo-radio #site-nav a:hover .station-label,
.photo-radio #site-nav a.is-lit .station-label,
.photo-radio #site-nav a[aria-current='page'] .station-label {
  color: transparent;
  text-shadow: none;
}

/* Lit overlay images positioned exactly over baked-in letters */
.photo-radio .lit {
  position: absolute;
  top: calc(var(--lt) * var(--ph) - var(--cy));
  height: calc(var(--lh) * var(--ph));
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  transition: opacity 0.15s ease;
  z-index: 2;
}

/* --lt / --lh: crop top and height as a share of the plate height. */
.photo-radio .lit[data-lit="product"]    { left: 24.512%; --lt: 0.50000; width: 5.273%; --lh: 0.06771; }
.photo-radio .lit[data-lit="developers"] { left: 32.812%; --lt: 0.50000; width: 7.129%; --lh: 0.06771; }
.photo-radio .lit[data-lit="agents"]     { left: 43.262%; --lt: 0.50000; width: 4.980%; --lh: 0.06771; }
.photo-radio .lit[data-lit="pricing"]    { left: 53.418%; --lt: 0.50000; width: 4.785%; --lh: 0.06771; }
.photo-radio .lit[data-lit="demo"]       { left: 63.672%; --lt: 0.50000; width: 6.055%; --lh: 0.06771; }
.photo-radio .lit[data-lit="home"]       { left: 12.402%; --lt: 0.61458; width: 4.004%; --lh: 0.04688; }
.photo-radio .lit[data-lit="up"]         { left: 82.910%; --lt: 0.48438; width: 1.758%; --lh: 0.04688; }
.photo-radio .lit[data-lit="sign"]       { left: 82.129%; --lt: 0.60417; width: 3.516%; --lh: 0.05208; }
.photo-radio .lit[data-lit="in"]         { left: 83.008%; --lt: 0.72917; width: 1.758%; --lh: 0.04688; }

/* Hover, pointer-tracking, and keyboard activation of lit overlays */
.photo-radio:has(#site-nav a[data-station="product"]:hover) .lit[data-lit="product"],
.photo-radio:has(#site-nav a[data-station="developers"]:hover) .lit[data-lit="developers"],
.photo-radio:has(#site-nav a[data-station="agents"]:hover) .lit[data-lit="agents"],
.photo-radio:has(#site-nav a[data-station="pricing"]:hover) .lit[data-lit="pricing"],
.photo-radio:has(#site-nav a[data-station="demo"]:hover) .lit[data-lit="demo"],
.photo-radio:has(.radio-home:hover) .lit[data-lit="home"],
.photo-radio:has(.sign-up:hover) .lit[data-lit="up"],
.photo-radio:has(.sign-word:hover) .lit[data-lit="sign"],
.photo-radio:has(.sign-in:hover) .lit[data-lit="in"],
.photo-radio[data-lit-station="product"] .lit[data-lit="product"],
.photo-radio[data-lit-station="developers"] .lit[data-lit="developers"],
.photo-radio[data-lit-station="agents"] .lit[data-lit="agents"],
.photo-radio[data-lit-station="pricing"] .lit[data-lit="pricing"],
.photo-radio[data-lit-station="demo"] .lit[data-lit="demo"],
.photo-radio[data-lit-knob="home"] .lit[data-lit="home"],
.photo-radio[data-lit-knob="up"] .lit[data-lit="up"],
.photo-radio[data-lit-knob="sign"] .lit[data-lit="sign"],
.photo-radio[data-lit-knob="in"] .lit[data-lit="in"],
.photo-radio .lit.is-lit {
  opacity: 1;
}

/* Hit columns: contiguous, full height, each centred on its lit word so the
   resting needle (column centre) sits under the station name. */
.photo-radio #site-nav a:nth-child(1) { left: 8.387%; width: 13.980%; }
.photo-radio #site-nav a:nth-child(2) { left: 22.367%; width: 13.982%; }
.photo-radio #site-nav a:nth-child(3) { left: 36.349%; width: 14.430%; }
.photo-radio #site-nav a:nth-child(4) { left: 50.779%; width: 16.050%; }
.photo-radio #site-nav a:nth-child(5) { left: 66.829%; width: 16.946%; }

.radio-sign a {
  display: grid;
  place-items: center;
  min-height: 0;
  line-height: 1;
  color: transparent;
}
.sign-up, .sign-in {
  color: transparent;
  font-family: var(--font-marketing);
  font-size: clamp(9px, 0.78cqw, 12px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: center;
}
.sign-word {
  color: transparent;
  font-family: var(--font-marketing);
  font-size: clamp(11px, 1.05cqw, 16px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: center;
}
.radio-home:hover .knob-label,
.radio-home.is-hot .knob-label,
.radio-home:focus-visible .knob-label {
  color: transparent;
  text-shadow: none;
}
.sign-up,
.sign-in,
.sign-word {
  color: transparent;
  text-shadow: none;
}
/* Zone lighting only — lit images handle illumination */
.sign-up:hover,
.sign-up:focus-visible,
.sign-up.is-lit,
.sign-in:hover,
.sign-in:focus-visible,
.sign-in.is-lit,
.sign-word:hover,
.sign-word:focus-visible,
.sign-word.is-lit {
  color: transparent;
  text-shadow: none;
}
.menu-button { display: none; background: none; border: 0; color: inherit; padding: var(--space-lg); }

.button { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-2xl); padding: var(--space-xl) var(--space-3xl); min-height: 48px; border-radius: var(--rounded-sm); font-size: 14px; font-weight: 600; border: 1px solid var(--marketing-border); white-space: nowrap; background: var(--marketing-surface); color: var(--marketing-text); }
.button.primary { background: var(--marketing-accent); border-color: var(--marketing-accent); color: var(--marketing-accent-ink); }
.button.primary:hover { background: var(--marketing-text); border-color: var(--marketing-text); }
.button.secondary:hover { background: var(--marketing-surface-2); }
.text-link { display: inline-flex; align-items: center; gap: var(--space-xl); min-height: 44px; }
.text-link:hover { color: var(--marketing-accent); }
.small-note { font-size: 12px; color: var(--marketing-muted); }
.small-note a { text-decoration: underline; text-underline-offset: 4px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.site-footer { padding-block: var(--space-3xl); border-top: 1px solid var(--marketing-border); display: flex; flex-wrap: wrap; gap: var(--space-3xl); align-items: center; }
.site-footer .brand { font-size: 20px; font-family: var(--font-marketing); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.site-footer p { font-size: 12px; color: var(--marketing-muted); }
.site-footer nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--space-3xl); align-items: center; font-size: 12px; }
.site-footer nav a { min-height: 44px; display: inline-flex; align-items: center; }
.site-footer nav a:hover { color: var(--marketing-accent); }

/* Interior pages sit inside the open cabinet. */
html:has(.cabinet-room),
.cabinet-room {
  scrollbar-width: none;
}
html:has(.cabinet-room)::-webkit-scrollbar,
.cabinet-room::-webkit-scrollbar { width: 0; height: 0; }
.cabinet-room {
  min-height: 100dvh;
  background:
    radial-gradient(42% 28% at 50% 8%, rgba(120, 72, 24, 0.22), transparent 70%),
    #030201;
}
/* The radio is the one element that resizes with the window: edge to edge, no gutters. */
.cabinet-room .radio {
  position: sticky;
  top: 0;
  width: 100%;
  margin: 0 0 20px;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.55));
}
.cabinet-room main {
  width: min(1080px, 94vw);
  margin: 0 auto 48px;
  background-color: var(--marketing-surface);
}
.cabinet-room main.hero-image {
  background-image:
    radial-gradient(80% 50% at 50% 0%, rgba(232, 176, 90, 0.08), transparent 50%),
    linear-gradient(180deg, #1c130d 0%, #120d09 100%);
}

.depth-dial {
  position: fixed;
  top: 12%;
  right: 1.2%;
  z-index: 9;
  width: 28px;
  height: 76%;
  pointer-events: none;
  opacity: 0;
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
.depth-dial.is-on { opacity: 1; }
.depth-ticks {
  position: absolute;
  inset: 0 auto 0 0;
  width: 10px;
  background-image:
    repeating-linear-gradient(180deg, transparent 0 7px, rgba(232, 176, 90, 0.22) 7px 8px),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(232, 176, 90, 0.55) 31px 32px);
  background-size: 5px 100%, 10px 100%;
  background-position: left center, left center;
  background-repeat: no-repeat;
}
.depth-track {
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  background: rgba(232, 176, 90, 0.35);
  box-shadow: none;
}
.depth-marks {
  position: absolute;
  inset: 0 0 0 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: 'Saira Extra Condensed', var(--font-marketing);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: rgba(232, 176, 90, 0.55);
  text-align: left;
  padding: 0;
}
.depth-needle {
  position: absolute;
  left: 0;
  top: calc(var(--p, 0) * 100%);
  width: 12px;
  height: 1.5px;
  background: var(--marketing-accent);
  box-shadow: var(--shadow-filament);
  transform: translateY(-50%);
}

@media (max-width: 1000px) { .wrap { width: calc(100% - 48px); } }
@media (max-width: 860px) {
  /* Knob hit targets never drop under 44px on a narrow radio. */
  .photo-radio .radio-home,
  .photo-radio .radio-sign { min-width: 44px; }
  .js .menu-button {
    display: flex;
    position: absolute;
    right: 8px;
    top: 8px;
    z-index: 3;
    color: var(--marketing-text);
    background: rgba(5, 3, 2, 0.7);
  }
  .js .radio #site-nav { display: none; }
  .js .radio[data-open] #site-nav,
  html:not(.js) .radio #site-nav {
    display: flex;
    flex-direction: column;
    /* The radio's layout containment makes it the fixed containing block, so
       this hangs under the bar whatever height the bar currently has. */
    position: fixed;
    left: 8px;
    right: 8px;
    top: var(--radio-h, 100%);
    bottom: auto;
    width: auto;
    height: auto;
    z-index: 4;
    padding: 12px;
    background: #120c08;
    border: 1px solid rgba(232, 176, 90, 0.3);
    border-radius: var(--rounded-md);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.8);
    gap: 8px;
  }
  .js .radio[data-open] #site-nav a,
  html:not(.js) .radio #site-nav a {
    position: static;
    display: flex;
    align-items: center;
    width: 100%;
    height: auto;
    min-height: 44px;
    padding: 8px 12px;
    color: var(--marketing-text);
    font-size: 16px;
    border-radius: var(--rounded-sm);
  }
  .js .radio[data-open] #site-nav a:hover,
  .js .radio[data-open] #site-nav a.is-lit,
  .js .radio[data-open] #site-nav a[aria-current='page'] {
    background: rgba(232, 176, 90, 0.12);
    color: #FFF2D6;
  }
  .js .radio[data-open] #site-nav a .station-label,
  html:not(.js) .radio #site-nav a .station-label {
    position: static;
    transform: none;
    color: inherit;
    font-size: inherit;
    text-shadow: none;
    letter-spacing: inherit;
  }
  .depth-dial { display: none; }
  .photo-radio .lit { display: none !important; }
}
@media (max-width: 640px) {
  .wrap { width: calc(100% - 32px); }
  h1 { font-size: 32px; }
  h2 { font-size: 24px; }
  .site-footer nav { margin-left: 0; width: 100%; }
}
@media (max-width: 480px) {
  .actions { flex-direction: column; }
  .actions .button { width: 100%; }
}