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

:root {
  --red: #d81b47;
  --red-dark: #b3143a;
  --red-tint: #fff1f4;
  --dark: #111827;
  --mid: #374151;
  --gray: #5b6472;
  --light-gray: #f5f6f8;
  --border: #e3e6ea;
  --white: #ffffff;
  --ink: #0d1117;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,.10);
  --focus: #1d4ed8;
}

html { font-size: 16px; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: var(--dark);
  background: var(--white);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout ─────────────────────────────────────────────────────────────── */

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.container--narrow {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px;
}

main { flex: 1; }

/* ── Nav ────────────────────────────────────────────────────────────────── */

.nav {
  border-bottom: 1px solid var(--border);
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
}

.nav__logo {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark);
  letter-spacing: -.3px;
}

.nav__logo span { color: var(--red); }

.nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}

.nav__links a {
  color: var(--mid);
  font-size: .9rem;
  font-weight: 500;
}

.nav__links a:hover { color: var(--dark); text-decoration: none; }

.nav__links .btn--nav {
  background: var(--red);
  color: var(--white);
  padding: 7px 16px;
  border-radius: 6px;
  font-size: .875rem;
  font-weight: 600;
}

.nav__links .btn--nav:hover { background: var(--red-dark); text-decoration: none; }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.footer {
  border-top: 1px solid var(--border);
  padding: 32px 0;
  margin-top: 80px;
  color: var(--gray);
  font-size: .85rem;
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}


/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background .15s, opacity .15s;
  text-decoration: none;
  line-height: 1.4;
}

.btn:hover { text-decoration: none; }

.btn--primary { background: var(--red); color: var(--white); }
.btn--primary:hover { background: var(--red-dark); }

.btn--secondary { background: var(--white); color: var(--dark); border: 1px solid var(--border); }
.btn--secondary:hover { background: var(--light-gray); }

.btn--danger { background: var(--white); color: #dc2626; border: 1px solid #fca5a5; }
.btn--danger:hover { background: #fef2f2; }

.btn--danger-fill { background: #dc2626; color: var(--white); }
.btn--danger-fill:hover { background: #b91c1c; }

.btn--lg { padding: 13px 28px; font-size: 1rem; }
.btn--sm { padding: 6px 14px; font-size: .82rem; }

.btn[disabled], .btn--disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--block { display: flex; width: 100%; }

/* ── Cards ──────────────────────────────────────────────────────────────── */

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}

.card + .card { margin-top: 16px; }

/* ── Forms ──────────────────────────────────────────────────────────────── */

.form-group { margin-bottom: 20px; }

.form-group label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--mid);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: .95rem;
  font-family: inherit;
  color: var(--dark);
  background: var(--white);
  transition: border-color .15s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(255,56,92,.12);
}

.form-group textarea { resize: vertical; min-height: 100px; }

.form-hint {
  font-size: .8rem;
  color: var(--gray);
  margin-top: 4px;
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.form-check:last-child { border-bottom: none; }

.form-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--red);
  cursor: pointer;
}

.form-check__label { font-size: .9rem; color: var(--dark); }
.form-check__desc { font-size: .82rem; color: var(--gray); margin-top: 2px; }

/* ── Alerts ─────────────────────────────────────────────────────────────── */

.alert {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: .9rem;
  margin-bottom: 20px;
  line-height: 1.5;
}

.alert--success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.alert--error   { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.alert--info    { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.alert--warning { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }

/* ── Page header ────────────────────────────────────────────────────────── */

.page-header {
  padding: 52px 0 40px;
}

.page-header h1 { font-size: 2rem; font-weight: 700; letter-spacing: -.5px; }
.page-header p  { color: var(--gray); margin-top: 8px; font-size: 1.05rem; }

/* ── Section ────────────────────────────────────────────────────────────── */

.section { padding: 64px 0; }
.section--sm { padding: 40px 0; }
.section--gray { background: var(--light-gray); }

/* ── Account portal ─────────────────────────────────────────────────────── */

.portal-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: start;
  padding-top: 40px;
  padding-bottom: 60px;
}

@media (max-width: 700px) {
  .portal-grid { grid-template-columns: 1fr; }
}

.portal-nav {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.portal-nav__header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gray);
}

.portal-nav a {
  display: block;
  padding: 11px 18px;
  font-size: .9rem;
  color: var(--mid);
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}

.portal-nav a:last-child { border-bottom: none; }
.portal-nav a:hover { background: var(--light-gray); text-decoration: none; color: var(--dark); }
.portal-nav a.active { color: var(--red); font-weight: 600; background: #fff8f9; }

.portal-nav a.danger { color: #dc2626; }
.portal-nav a.danger:hover { background: #fef2f2; }

.portal-content h2 { font-size: 1.35rem; font-weight: 700; margin-bottom: 6px; }
.portal-content .subtitle { color: var(--gray); font-size: .9rem; margin-bottom: 28px; }

/* ── Admin ──────────────────────────────────────────────────────────────── */

.admin-layout {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 32px;
  padding-top: 32px;
  padding-bottom: 60px;
  align-items: start;
}

@media (max-width: 700px) {
  .admin-layout { grid-template-columns: 1fr; }
}

.admin-nav {
  background: var(--dark);
  border-radius: var(--radius);
  overflow: hidden;
  position: sticky;
  top: 74px;
}

.admin-nav__header {
  padding: 14px 16px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9ca3af;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.admin-nav a {
  display: block;
  padding: 10px 16px;
  font-size: .875rem;
  color: #d1d5db;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .1s;
}

.admin-nav a:last-child { border-bottom: none; }
.admin-nav a:hover { background: rgba(255,255,255,.07); text-decoration: none; color: #fff; }
.admin-nav a.active { background: var(--red); color: #fff; }

.admin-content h2 { font-size: 1.4rem; font-weight: 700; margin-bottom: 4px; }
.admin-content .subtitle { color: var(--gray); font-size: .875rem; margin-bottom: 24px; }

/* ── Stats cards ────────────────────────────────────────────────────────── */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.stat-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
}

.stat-card__value { font-size: 1.8rem; font-weight: 800; color: var(--dark); }
.stat-card__label { font-size: .8rem; color: var(--gray); margin-top: 4px; }

/* ── Tables ─────────────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}

th {
  background: var(--light-gray);
  padding: 10px 14px;
  text-align: left;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gray);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--mid);
  vertical-align: middle;
}

tr:last-child td { border-bottom: none; }
tr:hover td { background: #fafafa; }

td a { font-weight: 500; }

/* ── Badges ─────────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge--green  { background: #dcfce7; color: #166534; }
.badge--red    { background: #fee2e2; color: #991b1b; }
.badge--yellow { background: #fef9c3; color: #854d0e; }
.badge--gray   { background: var(--light-gray); color: var(--gray); }
.badge--blue   { background: #dbeafe; color: #1e40af; }

/* ── Search bar ─────────────────────────────────────────────────────────── */

.search-form {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.search-form input {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: .9rem;
  font-family: inherit;
  color: var(--dark);
}

.search-form input:focus { outline: none; border-color: var(--red); }

/* ── Tabs ───────────────────────────────────────────────────────────────── */

.tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 24px;
}

.tab {
  padding: 10px 18px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--gray);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  text-decoration: none;
  transition: color .15s;
}

.tab:hover { color: var(--dark); text-decoration: none; }
.tab.active { color: var(--red); border-bottom-color: var(--red); font-weight: 600; }

/* ── Inline action forms ────────────────────────────────────────────────── */

.action-form { display: inline; }

/* ── Pagination ─────────────────────────────────────────────────────────── */

.pagination {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 24px;
  font-size: .875rem;
}

/* ── Danger zone ────────────────────────────────────────────────────────── */

.danger-zone {
  border: 1px solid #fca5a5;
  border-radius: var(--radius);
  padding: 24px;
  margin-top: 32px;
  background: #fef2f2;
}

.danger-zone h3 { color: #991b1b; margin-bottom: 8px; font-size: 1rem; }
.danger-zone p  { color: #7f1d1d; font-size: .875rem; margin-bottom: 16px; }

/* ── Admin action box ───────────────────────────────────────────────────── */

.action-box {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}

.action-box h4 { font-size: .95rem; margin-bottom: 4px; }
.action-box p  { font-size: .85rem; color: var(--gray); margin-bottom: 14px; }

.action-box .reason-field {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: .875rem;
  font-family: inherit;
  color: var(--dark);
  margin-bottom: 10px;
}

.action-box .reason-field:focus { outline: none; border-color: var(--red); }

/* ── User detail header ─────────────────────────────────────────────────── */

.user-header {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.user-header__info h2 { font-size: 1.4rem; font-weight: 700; margin-bottom: 4px; }
.user-header__info p  { color: var(--gray); font-size: .875rem; }

.user-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* ── Key-value list ─────────────────────────────────────────────────────── */

.kv-list { display: grid; gap: 12px; }

.kv-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  font-size: .875rem;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.kv-row:last-child { border-bottom: none; }
.kv-key { font-weight: 600; color: var(--mid); }
.kv-val { color: var(--dark); word-break: break-all; }

/* ── Legal / policy pages ───────────────────────────────────────────────── */

.legal { max-width: 720px; margin: 0 auto; padding: 56px 24px 80px; }
.legal .page-header { margin-bottom: 8px; }
.legal .legal__updated { color: var(--gray); font-size: .875rem; margin-bottom: 40px; }
.legal h2 { font-size: 1.25rem; font-weight: 700; margin: 40px 0 12px; letter-spacing: -.2px; }
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { font-size: 1rem; font-weight: 700; margin: 24px 0 10px; color: var(--dark); }
.legal p { margin-bottom: 14px; color: var(--mid); }
.legal ul { margin: 0 0 14px 20px; color: var(--mid); }
.legal li { margin-bottom: 6px; }
.legal strong { color: var(--dark); }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .nav__links { gap: 16px; }
  .kv-row { grid-template-columns: 1fr; gap: 2px; }
  .kv-key { color: var(--gray); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
}

/* ── Focus visibility ───────────────────────────────────────────────────── */
/* Every interactive element gets the same ring. The form controls above set
   `outline: none` and signal focus with a border colour alone, which is not
   enough on its own, so the ring is reinstated here for all of them. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -64px;
  z-index: 200;
  background: var(--ink);
  color: var(--white);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 600;
  transition: top .12s;
}

.skip-link:focus { top: 8px; text-decoration: none; }


/* ══════════════════════════════════════════════════════════════════════════
   Marketing pages — the "night" theme
   ──────────────────────────────────────────────────────────────────────────
   Scoped to body.theme-night so the account portal, admin and legal pages keep
   the light chrome above. Palette is sampled from the app icon: a pale violet
   dot radiating arcs across a deep indigo field. The website was using an
   unrelated red before this.
   ══════════════════════════════════════════════════════════════════════════ */

body.theme-night {
  --night: #14102a;
  --night-raised: #1d1740;
  --halo: #ece9f7;
  --halo-dim: #a79fc8;
  --violet: #8d6bec;
  --violet-pale: #c9b8f0;
  --hairline: #2c2455;
  --edge: #6f62ad;

  background: var(--night);
  color: var(--halo);
  font-family: Newsreader, Georgia, 'Times New Roman', serif;
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.theme-night h1,
.theme-night h2,
.theme-night h3,
.theme-night .nav__logo,
.theme-night .btn {
  font-family: 'Familjen Grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -.02em;
}

.theme-night a { color: var(--violet-pale); }
.theme-night a:hover { color: var(--halo); }

.theme-night a:focus-visible,
.theme-night button:focus-visible,
.theme-night summary:focus-visible {
  outline: 3px solid var(--violet-pale);
  outline-offset: 3px;
}

.theme-night .skip-link { background: var(--violet-pale); color: var(--night); }

/* ── Chrome ─────────────────────────────────────────────────────────────── */

.theme-night .nav {
  background: var(--night);
  border-bottom: 1px solid var(--hairline);
}

.theme-night .nav__inner {
  flex-wrap: wrap;
  gap: 8px 22px;
  padding: 12px 0;
  height: auto;
  min-height: 60px;
}

.theme-night .nav__logo { font-size: 1.15rem; color: var(--halo); }
.theme-night .nav__logo span { color: var(--violet-pale); }

.theme-night .nav__links { flex-wrap: wrap; gap: 8px 22px; min-width: 0; }
.theme-night .nav__inner > * { min-width: 0; }

.theme-night .nav__links a {
  font-family: 'Familjen Grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: .95rem;
  color: var(--halo-dim);
  padding: 4px 0;
}

.theme-night .nav__links a:hover { color: var(--halo); }

.theme-night .nav__links .btn--nav {
  background: var(--violet-pale);
  color: var(--night);
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 8px;
}

.theme-night .nav__links .btn--nav:hover { background: #ffffff; color: var(--night); }

.theme-night .btn--primary { background: var(--violet-pale); color: var(--night); }
.theme-night .btn--primary:hover { background: #ffffff; color: var(--night); }

.theme-night .btn--secondary {
  background: transparent;
  color: var(--halo);
  border: 1px solid var(--edge);
}

.theme-night .btn--secondary:hover { background: var(--night-raised); color: var(--halo); }

.theme-night .footer {
  border-top: 1px solid var(--hairline);
  color: var(--halo-dim);
  margin-top: 0;
  font-family: 'Familjen Grotesk', 'Helvetica Neue', Arial, sans-serif;
}

.theme-night .footer a { color: var(--halo-dim); }
.theme-night .footer a:hover { color: var(--halo); }

/* ── Hero ───────────────────────────────────────────────────────────────── */
/* The radiating mark bleeds off the right edge, so the headline sits over the
   near arcs on desktop and the mark drops away entirely on narrow screens
   rather than competing with the type. */

.hero {
  position: relative;
  overflow: hidden;
  padding: 92px 0 84px;
  border-bottom: 1px solid var(--hairline);
}

.hero__inner { position: relative; z-index: 1; max-width: 34rem; }

.hero h1 {
  font-size: clamp(2.35rem, 5.6vw, 3.85rem);
  line-height: 1.04;
  letter-spacing: -.035em;
  max-width: 16ch;
  margin-bottom: 26px;
}

.hero__say {
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  color: var(--halo-dim);
  max-width: 42ch;
  line-height: 1.55;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

.hero__meta {
  margin-top: 26px;
  font-size: .95rem;
  color: var(--halo-dim);
  font-family: 'Familjen Grotesk', 'Helvetica Neue', Arial, sans-serif;
}

.hero__mark {
  position: absolute;
  top: 50%;
  right: -120px;
  transform: translateY(-50%);
  width: 560px;
  height: 560px;
  opacity: .9;
  pointer-events: none;
}

.hero__mark .arc { fill: none; stroke: var(--violet); }
.hero__mark .core { fill: var(--violet-pale); }

/* The one piece of motion on the site: the arcs leave the dot once, on load,
   which is the mark's own meaning. It does not repeat and it does not run for
   anyone who has asked for less movement. */
@media (prefers-reduced-motion: no-preference) {
  .hero__mark .arc { opacity: 0; animation: arc-out .9s ease-out forwards; }
  .hero__mark .arc:nth-of-type(2) { animation-delay: .14s; }
  .hero__mark .arc:nth-of-type(3) { animation-delay: .28s; }
  .hero__mark .arc:nth-of-type(4) { animation-delay: .42s; }
}

@keyframes arc-out {
  from { opacity: 0; transform: scale(.82); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Sections: heading in the gutter, prose in the column ───────────────── */

.movement { border-bottom: 1px solid var(--hairline); }

.movement__inner {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: 16px 56px;
  padding: 76px 24px;
  align-items: start;
}

.movement h2 {
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--halo);
  position: sticky;
  top: 88px;
}

.movement__body > p {
  max-width: 64ch;
  margin-bottom: 20px;
  color: var(--halo);
}

.movement__body > p:last-child { margin-bottom: 0; }

.movement h3 {
  font-size: 1.15rem;
  margin: 40px 0 14px;
  color: var(--violet-pale);
}

/* ── Closing ────────────────────────────────────────────────────────────── */

.coda { padding: 96px 0; text-align: center; }

.coda h2 {
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  margin-bottom: 16px;
}

.coda p { color: var(--halo-dim); max-width: 42ch; margin: 0 auto 32px; }
.coda__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ── Long-form pages (FAQ, Get) ─────────────────────────────────────────── */

.sheet { max-width: 46rem; margin: 0 auto; padding: 80px 24px 104px; }

.sheet__title {
  font-size: clamp(2.1rem, 6vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  margin-bottom: 14px;
}

.sheet__standfirst { color: var(--halo-dim); margin-bottom: 8px; }

.sheet h2 {
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 56px 0 14px;
}

.sheet h3 { font-size: 1.15rem; margin: 36px 0 12px; color: var(--violet-pale); }
.sheet p { margin-bottom: 16px; }
.sheet ul { margin: 0 0 16px 1.3em; }
.sheet li { margin-bottom: 8px; }

.sheet__rule { border: 0; border-top: 1px solid var(--hairline); margin: 0; }

/* ── Get page ───────────────────────────────────────────────────────────── */

.install {
  background: var(--night-raised);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 34px;
  margin-bottom: 8px;
}

.install h2 { margin-top: 0; }
.install .btn { margin-top: 10px; }

.spec { margin: 28px 0 0; }

.spec > div {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--hairline);
  font-size: .98rem;
}

.spec dt {
  font-family: 'Familjen Grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  color: var(--halo-dim);
}

.spec dd { margin: 0; color: var(--halo); }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .hero__mark { display: none; }
  .hero__inner { max-width: none; }
  .hero__say { max-width: 46ch; }
  .movement__inner { grid-template-columns: 1fr; gap: 14px; padding: 56px 24px; }
  .movement h2 { position: static; }
}

@media (max-width: 640px) {
  body.theme-night { font-size: 1.0625rem; }
  .hero { padding: 64px 0 56px; }
  .coda { padding: 68px 0; }
  .sheet { padding: 56px 20px 80px; }
  .install { padding: 24px; border-radius: 12px; }
  .spec > div { grid-template-columns: 1fr; gap: 2px; }
  .hero__actions .btn, .coda__actions .btn { width: 100%; }
}