/* Jeeran design tokens for the web admin. Mirrors docs/DESIGN.md (Tokens) and the
   design system's tokens.json: the accent and LabelSecondary are the only brand
   colours; everything else is Apple's semantic system colour for the same role.
   Light-mode success, warning and destructive use Apple's increased-contrast values,
   because the admin sets them as text on status chips and the defaults fall below 4.5:1. */

:root {
  color-scheme: light dark;

  --accent: #1b7a3e;
  --accent-increased: #14612f;
  --on-accent: #ffffff;
  --accent-tint: rgba(27, 122, 62, 0.14);
  --bg-grouped: #f2f2f7;
  --bg-elevated: #ffffff;
  --bg-grouped-tertiary: #f2f2f7;
  --label: #000000;
  --label-secondary: rgba(60, 60, 67, 0.74);
  --label-tertiary: rgba(60, 60, 67, 0.3);
  --separator: rgba(60, 60, 67, 0.29);
  --fill-search: rgba(118, 118, 128, 0.12);
  --fill-segment-selected: #ffffff;
  --fill-placeholder: #e5e5ea;
  --success: #248a3d;
  --warning: #c93400;
  --destructive: #d70015;
  --info: #007aff;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --inset-screen: 16px;

  --radius-card: 20px;
  --radius-thumb: 14px;
  --radius-control: 22px;
  --radius-chip: 999px;

  --font-text: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui,
    'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #34c26a;
    --accent-increased: #5cd98a;
    --on-accent: #000000;
    --accent-tint: rgba(52, 194, 106, 0.2);
    --bg-grouped: #000000;
    --bg-elevated: #1c1c1e;
    --bg-grouped-tertiary: #2c2c2e;
    --label: #ffffff;
    --label-secondary: rgba(235, 235, 245, 0.6);
    --label-tertiary: rgba(235, 235, 245, 0.3);
    --separator: rgba(84, 84, 88, 0.65);
    --fill-search: rgba(118, 118, 128, 0.24);
    --fill-segment-selected: #636366;
    --fill-placeholder: #2c2c2e;
    --success: #30d158;
    --warning: #ff9f0a;
    --destructive: #ff453a;
    --info: #0a84ff;
  }
}

@media (prefers-contrast: more) {
  :root {
    --accent: var(--accent-increased);
  }
}

/* Text styles: Apple's sizes, scaled from the browser's root size so zoom and the user's
   font-size setting apply (the web counterpart of Dynamic Type). */
.large-title { font: 700 2.125rem/1.2 var(--font-text); letter-spacing: 0.01em; }
.title-1 { font: 700 1.75rem/1.2 var(--font-text); }
.title-2 { font: 700 1.375rem/1.27 var(--font-text); }
.headline { font: 600 1.0625rem/1.3 var(--font-text); }
.body { font: 400 1.0625rem/1.3 var(--font-text); }
.subheadline { font: 400 0.9375rem/1.33 var(--font-text); }
.footnote { font: 400 0.8125rem/1.38 var(--font-text); }
.caption-1 { font: 400 0.75rem/1.33 var(--font-text); }
.secondary { color: var(--label-secondary); }

/* Jeeran public site. Built on admin/src/ui/tokens.css (the build puts it first in
   site.css), so the site, the admin and the app share one set of colours and spacing
   (docs/DESIGN.md, Tokens). Only web-only values are defined here. No inline styles
   anywhere: the CSP allows stylesheets from this origin only. */

:root {
  /* Apple's systemBackground: the plain page behind grouped sections. */
  --bg-base: #ffffff;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --radius-panel: 28px;
  --font-rounded: ui-rounded, 'SF Pro Rounded', -apple-system, system-ui, sans-serif;
  --font-ar: 'SF Arabic', 'Geeza Pro', 'Noto Naskh Arabic', 'Segoe UI', system-ui, sans-serif;
  --phone-frame: #1d1d1f;
  --phone-edge: rgba(0, 0, 0, 0.08);
  --chip-fill: var(--bg-grouped-tertiary);
}

@media (prefers-contrast: more) {
  :root {
    --separator: var(--label-secondary);
    --label-tertiary: var(--label-secondary);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-base: #000000;
    --phone-frame: #2c2c2e;
    --phone-edge: rgba(255, 255, 255, 0.14);
    --chip-fill: #3a3a3c;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg-grouped);
  color: var(--label);
  font: 400 1.0625rem/1.47 var(--font-text);
  -webkit-font-smoothing: antialiased;
}

/* Classes below set display; the hidden attribute must still win. */
[hidden] {
  display: none !important;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent);
}

h1,
h2,
h3,
p {
  margin: 0;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

[lang='ar'] {
  font-family: var(--font-ar);
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

@media (min-width: 768px) {
  .wrap {
    padding: 0 var(--space-xl);
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: var(--space-md);
  top: -60px;
  background: var(--bg-elevated);
  color: var(--label);
  padding: var(--space-sm) var(--space-md);
  border-radius: 999px;
  z-index: 10;
}

.skip:focus {
  top: var(--space-md);
}

/* Header */
.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
}

.brand img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.brand .ar {
  font-weight: 500;
  color: var(--label-secondary);
  font-size: 1.0625rem;
}

/* Buttons and the invite form */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  border: 0;
  font: inherit;
  font-weight: 600;
  font-size: 1.0625rem;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.btn:disabled {
  cursor: default;
  opacity: 0.6;
}

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
}

.btn-tinted {
  background: var(--accent-tint);
  color: var(--accent-increased);
}

.btn-small {
  min-height: 44px;
  padding: 0 18px;
  font-size: 0.9375rem;
}

.invite {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 540px;
}

.invite fieldset {
  display: contents;
  border: 0;
  margin: 0;
  padding: 0;
}

.invite .row {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.invite input[type='email'],
.invite input[type='text'] {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 50px;
  padding: 0 20px;
  border-radius: 999px;
  /* label-secondary, not separator: a field's edge needs 3:1 (WCAG 1.4.11). */
  border: 1px solid var(--label-secondary);
  background: var(--bg-elevated);
  color: var(--label);
  font: inherit;
  font-size: 1.0625rem;
}

.invite input::placeholder {
  color: var(--label-secondary);
}

.invite input[aria-invalid='true'] {
  border-color: var(--destructive);
  border-width: 2px;
}

.invite .btn {
  flex: 1 0 auto;
}

@media (min-width: 520px) {
  .invite .btn {
    flex: 0 0 auto;
  }
}

/* The Turnstile widget, on its own row under the field. invite.js picks size flexible (the
   form's width, at least 300px) or, on screens too narrow for that, compact. Empty until
   the script renders it, so it takes no space without JavaScript. */
.turnstile:empty {
  display: none;
}

.field-error {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  color: var(--destructive);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
}

.field-error::before {
  content: '!';
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.2em;
  height: 1.2em;
  margin-top: 0.05em;
  border-radius: 50%;
  background: var(--destructive);
  color: var(--bg-elevated);
  font-size: 0.8em;
  font-weight: 700;
}

.field-error:empty {
  display: none;
}

/* Never shown to people; a field bots fill in. */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.fine {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--label-secondary);
}

.fine a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.done {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 50px;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--accent-increased);
}

.done::before {
  content: '';
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 18px no-repeat;
}

.done:focus {
  outline: none;
}

.done:focus-visible {
  outline: 3px solid var(--accent);
}

/* Footer */
.site-foot {
  border-top: 1px solid var(--separator);
  padding: var(--space-xl) 0 var(--space-xxl);
  font-size: 0.9375rem;
  color: var(--label-secondary);
  background: var(--bg-grouped);
}

.site-foot .wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.site-foot strong {
  color: var(--label);
}

.site-foot nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-lg);
}

.site-foot a {
  color: var(--label);
  text-decoration: none;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

.site-foot a:hover {
  text-decoration: underline;
}

@media (min-width: 768px) {
  .site-foot .wrap {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* Section rhythm */
.sec {
  padding: var(--space-3xl) 0;
}

.sec-base {
  background: var(--bg-base);
}

@media (min-width: 1024px) {
  .sec {
    padding: var(--space-4xl) 0;
  }
}

.eyebrow {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent-increased);
  margin-bottom: var(--space-sm);
}

.h2 {
  font-size: clamp(1.75rem, 4.2vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.lede {
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  color: var(--label-secondary);
  line-height: 1.45;
}

.lede-gap {
  margin-top: var(--space-sm);
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--bg-grouped);
  font-size: 0.9375rem;
  color: var(--label);
}

.chip-more {
  background: transparent;
  border: 1px solid var(--separator);
  color: var(--label-secondary);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Hero */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xxl);
  align-items: center;
  padding-top: var(--space-xl);
  padding-bottom: var(--space-3xl);
}

.hero h1 {
  font-size: clamp(2.375rem, 5.6vw, 4.25rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
  font-weight: 700;
  max-width: 13ch;
}

.hero .lede {
  margin: var(--space-md) 0 var(--space-lg);
  max-width: 34ch;
}

/* The hero form's small print: what signing up means, then the privacy link. */
.hero .project-note {
  max-width: 46ch;
}

.hero .status {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent-increased);
  margin-bottom: var(--space-md);
}

.hero-phone {
  justify-self: center;
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: 1fr auto;
    padding-top: var(--space-xxl);
    padding-bottom: var(--space-4xl);
  }
}

/* iPhone frame: the screen is authored at 390 x 844 pt and scaled with zoom. The screens
   are drawings of the app (sample data), so their sizes stay in pt-like px on purpose. */
.phone {
  --z: 0.74;
  zoom: var(--z);
  width: 414px;
  margin: 0;
  padding: 12px;
  border-radius: 64px;
  background: var(--phone-frame);
  box-shadow: 0 0 0 1px var(--phone-edge);
}

/* 414 x 0.74 = 306px does not fit a 320px screen's 288px column. */
@media (max-width: 359px) {
  .phone {
    --z: 0.66;
  }
}

@media (min-width: 900px) {
  .hero-phone .phone {
    --z: 0.86;
  }
}

.screen {
  text-align: left;
  position: relative;
  width: 390px;
  height: 844px;
  border-radius: 52px;
  overflow: hidden;
  background: var(--bg-grouped);
  color: var(--label);
  font-size: 17px;
  line-height: 1.3;
}

.island {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 124px;
  height: 36px;
  border-radius: 20px;
  background: #000;
  z-index: 3;
}

.sb {
  display: flex;
  justify-content: space-between;
  padding: 18px 34px 0 44px;
  height: 54px;
  font-weight: 600;
  font-size: 17px;
}

.sb i {
  font-style: normal;
  letter-spacing: 1px;
  font-size: 13px;
  padding-top: 2px;
}

.nav {
  padding: 6px 16px 12px;
}

.nav .lt {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.nav .lt-inline {
  font-size: 28px;
}

.nav .st {
  font-size: 15px;
  color: var(--label-secondary);
}

.nav .back {
  color: var(--accent);
  font-size: 17px;
  margin-bottom: 6px;
}

.body {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card {
  background: var(--bg-elevated);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.card .pad {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card .pad-tight {
  gap: 4px;
}

.card .photo {
  height: 168px;
  width: 100%;
  object-fit: cover;
}

.hl {
  font-size: 17px;
  font-weight: 600;
}

.sub {
  font-size: 15px;
  color: var(--label-secondary);
}

.meta {
  font-size: 15px;
}

.chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.fchip {
  font-size: 13px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--chip-fill);
  color: var(--label);
}

.cta {
  align-self: flex-start;
  margin-top: 4px;
  font-weight: 600;
  font-size: 17px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
}

.cta.tinted {
  background: var(--accent-tint);
  color: var(--accent-increased);
}

.sechead {
  font-size: 20px;
  font-weight: 700;
  margin: 10px 0 0;
}

.rows {
  background: var(--bg-elevated);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.rowi {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  position: relative;
}

.rowi-mark {
  grid-template-columns: 44px 1fr auto;
}

.rowi + .rowi::before {
  content: '';
  position: absolute;
  top: 0;
  left: 84px;
  right: 0;
  border-top: 1px solid var(--separator);
}

.rowi img {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-thumb);
  object-fit: cover;
}

.tag {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-increased);
}

.tag-action {
  font-size: 15px;
}

.mark {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-thumb);
  background: var(--accent-tint);
  color: var(--accent-increased);
  font: 600 17px/44px var(--font-rounded);
  text-align: center;
  flex: none;
}

.hh {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hh .hl {
  flex: 1;
}

.more {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--fill-search);
  display: grid;
  place-items: center;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 13px;
}

.search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  border-radius: 12px;
  background: var(--fill-search);
  padding: 0 10px;
  color: var(--label-secondary);
  margin: 0 16px 12px;
}

.filters {
  display: flex;
  gap: 8px;
  padding: 0 16px 14px;
  overflow: hidden;
}

.filters span {
  flex: none;
  font-size: 15px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--bg-elevated);
}

.filters .on {
  background: var(--accent-tint);
  color: var(--accent-increased);
  font-weight: 600;
}

.bubble {
  max-width: 76%;
  padding: 10px 14px;
  border-radius: 20px;
  font-size: 17px;
}

.bubble.them {
  background: var(--bg-elevated);
  align-self: flex-start;
}

.bubble.me {
  background: var(--accent);
  color: var(--on-accent);
  align-self: flex-end;
}

.who {
  font-size: 13px;
  color: var(--label-secondary);
  margin: 6px 0 -6px 14px;
}

.composer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30px;
  padding: 8px 16px;
}

.composer span {
  display: block;
  height: 38px;
  border-radius: 19px;
  border: 1px solid var(--separator);
  background: var(--bg-elevated);
  padding: 8px 14px;
  color: var(--label-secondary);
  font-size: 16px;
}

.tabbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 8px 6px 0;
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
  border-top: 1px solid var(--separator);
}

.tabbar span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 500;
  color: var(--label-secondary);
}

.tabbar svg {
  width: 26px;
  height: 26px;
}

.tabbar .on {
  color: var(--accent);
}

/* Crops of the shared thumbnails for each row (the files are already cropped; these keep
   the same framing if a browser shows the JPEG at another size). */
.pos-low {
  object-position: 50% 78%;
}

/* How it works */
.how .cols {
  display: grid;
  gap: var(--space-xxl);
  margin-top: var(--space-xxl);
}

.how .col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
}

.how .col .phone {
  --z: 0.62;
}

.how h3 {
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.how .col p {
  color: var(--label-secondary);
  max-width: 28ch;
  margin: 4px auto 0;
}

.n {
  display: inline-block;
  font: 600 0.9375rem/1 var(--font-rounded);
  color: var(--accent-increased);
  margin-bottom: 6px;
}

@media (min-width: 900px) {
  .how .cols {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Safety tiles */
.tiles {
  display: grid;
  gap: 12px;
  margin-top: var(--space-xl);
}

.tile {
  background: var(--bg-elevated);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
}

.tile h3 {
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.tile p {
  color: var(--label-secondary);
  margin-top: 4px;
  font-size: 1rem;
}

@media (min-width: 640px) {
  .tiles {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .tiles {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Where */
.where-sec {
  padding-bottom: var(--space-3xl);
}

.where {
  background: var(--bg-elevated);
  border-radius: var(--radius-panel);
  padding: var(--space-xl) var(--space-lg);
  display: grid;
  gap: var(--space-lg);
}

.where .areas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (prefers-color-scheme: dark) {
  .where .chip {
    background: var(--bg-grouped-tertiary);
  }

  .where .chip-more {
    background: transparent;
  }
}

@media (min-width: 900px) {
  .where {
    grid-template-columns: 1fr 1.3fr;
    align-items: center;
    padding: var(--space-xxl);
  }
}

/* Join */
.join {
  display: grid;
  gap: var(--space-lg);
  text-align: center;
  justify-items: center;
}

.join .invite {
  width: 100%;
}

/* Legal and support pages */
.doc {
  max-width: 720px;
  padding-top: var(--space-xl);
  padding-bottom: var(--space-3xl);
}

.doc h1 {
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.doc .doc-meta {
  margin-top: var(--space-sm);
  color: var(--label-secondary);
  font-size: 0.9375rem;
}

.doc .summary {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  border-radius: var(--radius-card);
  background: var(--bg-elevated);
}

.doc .summary ul {
  margin: var(--space-sm) 0 0;
  padding-left: 1.2em;
}

.doc h2 {
  margin-top: var(--space-xxl);
  font-size: 1.375rem;
  line-height: 1.27;
  font-weight: 700;
}

.doc h3 {
  margin-top: var(--space-lg);
  font-size: 1.0625rem;
  font-weight: 600;
}

.doc p,
.doc ul,
.doc ol {
  margin-top: var(--space-sm);
}

.doc li + li {
  margin-top: 6px;
}

.doc .table-scroll {
  margin-top: var(--space-md);
  /* Focusable (tabindex) so it can be scrolled from the keyboard when zoomed. */
  overflow-x: auto;
  border-radius: var(--radius-card);
  background: var(--bg-elevated);
}

.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.doc th,
.doc td {
  padding: 12px var(--space-md);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--separator);
}

.doc tr:last-child td {
  border-bottom: 0;
}

.doc th {
  font-weight: 600;
  color: var(--label-secondary);
}

.doc td:first-child {
  font-weight: 600;
  min-width: 9em;
}

.contact-card {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  border-radius: var(--radius-card);
  background: var(--bg-elevated);
  display: grid;
  gap: var(--space-sm);
}

.contact-card .email {
  font-size: 1.3125rem;
  font-weight: 600;
  word-break: break-all;
}

.not-found,
.leave {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--space-md);
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-4xl);
}

/* The unsubscribe page: the same centred column as the 404. */
.leave-form fieldset {
  display: grid;
  justify-items: center;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  min-width: 0;
  border: 0;
}

/* Link previews (/p/<token>, /i/<code>; ADR 0017): a title and rows with one icon and one
   fact each, the way the app's plan detail reads, then the download or waitlist block. */
.pv {
  max-width: 560px;
  padding-top: var(--space-xl);
  padding-bottom: var(--space-3xl);
}

.pv .lede {
  margin-top: var(--space-sm);
}

.pv-rows {
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: 0 var(--space-md);
  border-radius: var(--radius-card);
  background: var(--bg-elevated);
}

.pv-rows li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 0;
}

.pv-rows li + li {
  border-top: 1px solid var(--separator);
}

.pv-rows svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--accent);
}

.pv-fit {
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
}

.pv-fit .chip {
  background: var(--bg-elevated);
}

.pv-code {
  margin-top: var(--space-md);
}

.pv-code code {
  display: inline-block;
  padding: var(--space-sm) var(--space-md);
  border-radius: 14px;
  background: var(--bg-elevated);
  font: 600 1.75rem/1.2 ui-monospace, 'SF Mono', Menlo, monospace;
  letter-spacing: 0.12em;
  user-select: all;
  -webkit-user-select: all;
}

.pv-get {
  display: grid;
  justify-items: start;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  border-radius: var(--radius-card);
  background: var(--bg-elevated);
}

.pv-get-title {
  font-size: 1.375rem;
  line-height: 1.27;
  font-weight: 700;
}

.pv-get p {
  color: var(--label-secondary);
}

.pv-get .btn {
  margin-top: var(--space-xs);
}