/*
 * Duneed — the one stylesheet for apps/web (ADR 049, redesigned in ADR 068).
 *
 * Colours are the app's own tokens (apps/mobile/src/core/ui/tokens.ts) read at
 * their resolved values, so the site and the product do not drift into two
 * different greens. Light is the base and dark is a media-query override,
 * exactly as the app resolves its palette from the system scheme.
 *
 * The design vocabulary is the receipt: monospace tabular figures, dotted
 * leaders between a label and its price, the double rule a printer puts above
 * a total, and one torn paper edge. It is structural, not decorative — wherever
 * it appears, the content underneath really is a receipt line, a price or a
 * total.
 */

/* ── Tokens ─────────────────────────────────────────────────────────────── */

:root {
  /* Surfaces. `bg` is the page, `surface` a card on it, `sunken` the band a
     section uses to separate itself from its neighbours. */
  --bg: #ffffff;
  --surface: #ffffff;
  --sunken: #f2f2f7;
  --fill: #e5e5ea;

  /* The receipt is printed on paper in both schemes — the app draws Fiş on
     exactly this white whatever the system scheme is, and a QR code needs it
     to scan. These three never invert. */
  --paper: #f7f5f0;
  --paper-ink: #1c1c1e;
  /* 4.94:1 on --paper: the receipt's header line is real text.
     --paper-rule is a hairline, held to 1.4.11's 3:1. */
  --paper-muted: #6f6a5e;
  --paper-rule: #8a8478;

  --text: #000000;
  --text-secondary: #3c3c43bf;
  --text-tertiary: #3c3c4399;
  --text-inverted: #ffffff;

  --border: #d1d1d6;
  --separator: #c6c6c8;

  --accent: #0b7a5a;
  --accent-hover: #096349;
  --accent-text: #0b7a5a;
  --accent-surface: #e7f2ef;

  --warning: #8a5a00;
  --warning-surface: #fbf0dc;
  --success: #1d7a3a;
  --success-surface: #e6f2e9;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 6%);
  --shadow-md: 0 1px 2px rgb(0 0 0 / 4%), 0 8px 24px rgb(0 0 0 / 6%);
  --shadow-lg: 0 2px 4px rgb(0 0 0 / 4%), 0 16px 48px rgb(0 0 0 / 10%);

  /* Measures: prose is a reading column, text a wide reading column, wide the
     marketing grid. */
  --w-prose: 42rem;
  --w-text: 56rem;
  --w-wide: 72rem;
  --gutter: 1.25rem;

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;

  /* 4pt grid, the app's own spacing ramp. */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;

  --font:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* The receipt-printer voice: prices, quotas, eyebrows, and anything with a
     column of figures in it. */
  --font-mono:
    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --surface: #1c1c1e;
    --sunken: #121214;
    --fill: #2c2c2e;

    --text: #ffffff;
    --text-secondary: #ebebf599;
    --text-tertiary: #ebebf566;

    --border: #38383a;
    --separator: #38383a;

    --accent: #0d8462;
    --accent-hover: #0fa077;
    --accent-text: #2fb88e;
    --accent-surface: #0e3b2e;

    --warning: #f0a93b;
    --warning-surface: #3a2a0a;
    --success: #3dd07a;
    --success-surface: #12321f;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow-md: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 40%);
    --shadow-lg: 0 2px 4px rgb(0 0 0 / 30%), 0 16px 48px rgb(0 0 0 / 50%);
  }
}

/* ── Base ───────────────────────────────────────────────────────────────── */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* iPhone notch and home indicator: the site is read on phones more than
     anywhere else, and a header under the status bar looks broken. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}

img,
svg {
  max-width: 100%;
}

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

.wrap {
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap-text {
  max-width: var(--w-text);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap-prose {
  max-width: var(--w-prose);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.section-sunken {
  background: var(--sunken);
}

.section-head {
  max-width: 34rem;
  margin-bottom: var(--s6);
}

.section-head > :last-child {
  margin-bottom: 0;
}

/* Body copy inside a full-width section: the left edge stays on the grid with
   every other section while the line length stays readable. */
.measure {
  max-width: 44rem;
}

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

/* ── Type ───────────────────────────────────────────────────────────────── */

h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

h1 {
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 700;
  margin: 0 0 var(--s4);
}

h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin: 0 0 var(--s3);
}

h3 {
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 650;
  margin: 0 0 var(--s2);
}

p,
ul,
ol,
dl {
  margin: 0 0 var(--s4);
}

ul,
ol {
  padding-left: 1.35rem;
}

li {
  margin-bottom: var(--s1);
}

a {
  color: var(--accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

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

strong,
b {
  font-weight: 650;
}

.lede {
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: var(--s5);
}

.muted {
  color: var(--text-secondary);
}

.meta {
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

/* The mono eyebrow: a receipt header line. It labels a section, never
   decorates one. */
.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 var(--s3);
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ── Skip link ──────────────────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  left: var(--s4);
  top: var(--s4);
  z-index: 60;
  padding: var(--s2) var(--s4);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transform: translateY(-250%);
}

.skip-link:focus-visible {
  transform: none;
}

/* ── Install bar ────────────────────────────────────────────────────────── */

.install-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--s3);
  background: var(--accent);
  color: var(--text-inverted);
  padding: var(--s2) var(--gutter);
  font-size: 0.9375rem;
}

.install-bar[hidden] {
  display: none;
}

.install-bar img {
  border-radius: 22%;
  flex: 0 0 auto;
}

.install-bar span {
  flex: 1 1 auto;
  min-width: 0;
}

.install-bar-cta {
  flex: 0 0 auto;
  color: var(--text-inverted);
  font-weight: 650;
  white-space: nowrap;
  text-underline-offset: 3px;
}

.install-bar-cta:hover {
  color: var(--text-inverted);
}

.install-bar button {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin-block: -0.5rem;
  border: none;
  background: none;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--text-inverted);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.install-bar button:hover {
  background: rgb(255 255 255 / 18%);
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 60px;
}

.wordmark {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--s2);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
}

.wordmark img {
  /* iOS masks the square source into a squircle; the web has to do it itself. */
  border-radius: 22%;
  display: block;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s1);
  font-size: 0.9375rem;
}

.site-nav .btn {
  margin-left: var(--s2);
}

/* Measured with the button no longer allowed to wrap: the wordmark is 89px,
   the nav with both links and the button is 251px, and the gap is 16px — 356px
   against 335px of room at 375px wide. So the links go below 26rem and the
   action stays, the action being the point. */
@media (max-width: 26rem) {
  .site-nav a:not(.btn) {
    display: none;
  }
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--s3);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--text);
  background: var(--fill);
}

.site-nav a[aria-current='page'] {
  color: var(--text);
  font-weight: 650;
}

@media (max-width: 30rem) {
  .site-nav {
    font-size: 0.875rem;
  }

  .site-nav a {
    padding-inline: var(--s2);
  }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  padding-inline: var(--s5);
  border-radius: 12px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

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

.btn-primary:hover {
  background: var(--accent-hover);
  color: var(--text-inverted);
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

.btn-secondary:hover {
  color: var(--text);
  border-color: var(--text-tertiary);
}

/* Apple's own badge asset, black on light and white on dark, at the height
   Apple's marketing guidelines set. */
.appstore-badge {
  display: inline-block;
  line-height: 0;
}

.appstore-badge img {
  height: 48px;
  width: auto;
  display: block;
}

.btn-sm {
  min-height: 38px;
  padding-inline: var(--s4);
  font-size: 0.9375rem;
  border-radius: 10px;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
  margin-bottom: var(--s4);
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero {
  padding-block: clamp(2.5rem, 6vw, 4rem) 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 62rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
}

.hero-copy > :last-child {
  margin-bottom: 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  background: var(--accent-surface);
  color: var(--accent-text);
  border-radius: 999px;
  padding: var(--s1) var(--s3);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 var(--s5);
}

.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentcolor;
}

/* ── The signature: a receipt that becomes a pantry ─────────────────────── */

.transform {
  display: grid;
  gap: var(--s4);
  justify-items: center;
  margin: 0;
}

.receipt {
  width: min(100%, 20rem);
  background: var(--paper);
  color: var(--paper-ink);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  padding: var(--s5) var(--s5) var(--s6);
  box-shadow: var(--shadow-lg);
  /* The torn bottom edge. A polygon rather than a mask, so it renders the same
     everywhere including in a PDF print of this page. */
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 9px),
    96.875% 100%,
    93.75% calc(100% - 9px),
    90.625% 100%,
    87.5% calc(100% - 9px),
    84.375% 100%,
    81.25% calc(100% - 9px),
    78.125% 100%,
    75% calc(100% - 9px),
    71.875% 100%,
    68.75% calc(100% - 9px),
    65.625% 100%,
    62.5% calc(100% - 9px),
    59.375% 100%,
    56.25% calc(100% - 9px),
    53.125% 100%,
    50% calc(100% - 9px),
    46.875% 100%,
    43.75% calc(100% - 9px),
    40.625% 100%,
    37.5% calc(100% - 9px),
    34.375% 100%,
    31.25% calc(100% - 9px),
    28.125% 100%,
    25% calc(100% - 9px),
    21.875% 100%,
    18.75% calc(100% - 9px),
    15.625% 100%,
    12.5% calc(100% - 9px),
    9.375% 100%,
    6.25% calc(100% - 9px),
    3.125% 100%,
    0 calc(100% - 9px)
  );
}

.receipt-head {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--paper-muted);
  text-transform: uppercase;
  margin-bottom: var(--s3);
}

.receipt-lines {
  list-style: none;
  margin: 0;
  padding: 0;
}

.receipt-lines li {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  margin: 0;
  padding-block: 2px;
}

/* The dotted leader running from a line item to its price. */
.receipt-lines li::after {
  content: '';
  order: 1;
  flex: 1 1 auto;
  min-width: var(--s5);
  border-bottom: 1px dotted var(--paper-rule);
  transform: translateY(-3px);
}

.receipt-lines .price {
  order: 2;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.receipt-total {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s3);
  padding-block: var(--s2);
  border-top: 1px solid var(--paper-rule);
  border-bottom: 1px solid var(--paper-rule);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.transform-arrow {
  display: block;
  color: var(--text-tertiary);
}

.pantry-card {
  width: min(100%, 20rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.pantry-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pantry-card li {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: 0;
  padding: var(--s3) var(--s4);
  font-size: 0.9375rem;
}

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

.pantry-card .name {
  flex: 1 1 auto;
  min-width: 0;
}

.pill {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px var(--s2);
  border-radius: 999px;
  background: var(--warning-surface);
  color: var(--warning);
  white-space: nowrap;
}

.pill-ok {
  background: var(--success-surface);
  color: var(--success);
}

/* The load reveal: the receipt settles, the arrow follows, the pantry rises. */
@media (prefers-reduced-motion: no-preference) {
  .transform > * {
    animation: rise 620ms cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
  }

  .transform > :nth-child(2) {
    animation-delay: 140ms;
  }

  .transform > :nth-child(3) {
    animation-delay: 260ms;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* ── Steps ──────────────────────────────────────────────────────────────── */

/* Numbered because scanning really is a sequence: photograph, check, save. */
.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.steps li {
  counter-increment: step;
  margin: 0;
  padding-top: var(--s4);
  border-top: 1px solid var(--separator);
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent-text);
  margin-bottom: var(--s2);
}

.steps p {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  margin: 0;
}

/* ── Feature cards ──────────────────────────────────────────────────────── */

.cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

/* Six cards want three columns, not the four a 16rem minimum gives them on a
   wide screen — 4+2 leaves a ragged last row. */
.cards-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.cards li {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s5);
}

.cards .icon {
  display: block;
  color: var(--accent-text);
  margin-bottom: var(--s3);
}

.cards p {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  margin: 0;
}

/* ── Screenshots ────────────────────────────────────────────────────────── */

/* Screens are shown at phone scale in a rail — four across on a desktop, a
   swipe on a phone. Stretching a 430×935 capture to a full column, which is
   what the first pass did, made two enormous images stacked on each other. */
.shots {
  list-style: none;
  padding: 0 var(--gutter) var(--s3);
  margin: 0 calc(var(--gutter) * -1);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 13.5rem;
  gap: var(--s5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

.shots li {
  margin: 0;
  scroll-snap-align: center;
}

@media (min-width: 62rem) {
  .shots {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
}

.shots figure {
  margin: 0;
}

/* The phone: a bezel drawn in CSS, so what sits inside stays a real screenshot
   rather than a picture of a picture. */
.phone {
  background: var(--text);
  border-radius: 30px;
  padding: 6px;
  box-shadow: var(--shadow-md);
}

.phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 25px;
}

.shots figcaption {
  margin-top: var(--s3);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* ── Pledge ─────────────────────────────────────────────────────────────── */

.pledge {
  background: var(--accent-surface);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 3rem);
}

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

.pledge-list {
  list-style: none;
  padding: 0;
  margin: var(--s5) 0 0;
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.pledge-list li {
  margin: 0;
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.pledge-list strong {
  color: var(--text);
  display: block;
}

.pledge-list svg {
  flex: 0 0 auto;
  color: var(--accent-text);
  margin-top: 3px;
}

/* ── Pricing ────────────────────────────────────────────────────────────── */

/* No `align-items: start`: the cards carry different numbers of rows, and
   letting each take its own height left one plan visibly shorter than the
   other. They stretch to the taller one and the list takes up the slack. */
.plans {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.plan {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
}

.plan-featured {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.plan-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s4);
}

.plan-name h3 {
  margin: 0;
  font-size: 1.25rem;
}

.plan-tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: var(--accent-surface);
  padding: 2px var(--s2);
  border-radius: 999px;
}

.price {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s1);
}

.price .amount {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.price .per {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.plan .trial {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: var(--s5);
}

.plan .btn {
  width: 100%;
  margin-bottom: var(--s5);
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1 1 auto;
  font-size: 0.9375rem;
}

.plan-features li {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  padding-block: var(--s2);
  margin: 0;
  border-top: 1px solid var(--separator);
}

.plan-features li:first-child {
  border-top: 0;
}

.plan-features svg {
  flex: 0 0 auto;
  margin-top: 4px;
  color: var(--accent-text);
}

.plan-features .off {
  color: var(--text-secondary);
}

.plan-features .off svg {
  color: var(--text-secondary);
}

/* A receipt-style comparison: label left, values right, dotted leader between. */
.compare {
  margin: 0;
}

.compare-head,
.compare-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5rem 5rem;
  gap: var(--s3);
  align-items: baseline;
}

@media (min-width: 34rem) {
  .compare-head,
  .compare-row {
    grid-template-columns: minmax(0, 1fr) 8rem 8rem;
  }
}

.compare-head {
  padding-bottom: var(--s2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.compare-head span:not(:first-child),
.compare-row dd {
  text-align: right;
}

.compare-row {
  padding-block: var(--s3);
  border-top: 1px solid var(--separator);
}

.compare-row dt {
  min-width: 0;
}

.compare-row dd {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
}

.compare-row .off {
  color: var(--text-secondary);
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */

.faq {
  max-width: var(--w-text);
}

.faq details {
  border-top: 1px solid var(--separator);
}

.faq details:last-of-type {
  border-bottom: 1px solid var(--separator);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 44px;
  padding-block: var(--s3);
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '';
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--text-tertiary);
  border-bottom: 2px solid var(--text-tertiary);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 160ms ease;
}

.faq details[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.faq details p {
  color: var(--text-secondary);
  margin: 0 0 var(--s4);
  max-width: 44rem;
}

/* ── Closing call to action ─────────────────────────────────────────────── */

.closer {
  background: var(--accent-surface);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 4rem);
  text-align: center;
}

.closer p {
  color: var(--text-secondary);
  max-width: 34rem;
  margin-inline: auto;
}

.closer .cta-row {
  justify-content: center;
  margin-bottom: 0;
}

.qr-card {
  display: inline-block;
  background: #ffffff;
  padding: var(--s3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  line-height: 0;
}

.qr-aside {
  display: flex;
  align-items: center;
  gap: var(--s4);
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-align: left;
}

/* ── Legal documents ────────────────────────────────────────────────────── */

.doc h2 {
  margin-top: var(--s7);
  padding-top: var(--s4);
  border-top: 1px solid var(--separator);
}

.doc h3 {
  margin-top: var(--s5);
}

.doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--s5);
  font-size: 0.9375rem;
}

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

.doc th {
  font-weight: 650;
  white-space: nowrap;
}

/* Wide content must scroll inside itself, never take the page with it. */
.scroll-x {
  overflow-x: auto;
}

.doc-meta {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  margin-bottom: var(--s6);
}

/* ── Install modal ──────────────────────────────────────────────────────── */

dialog#install-modal {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  max-width: 23rem;
  width: calc(100% - 2.5rem);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

dialog#install-modal::backdrop {
  background: rgb(0 0 0 / 60%);
}

.install-modal-close {
  display: flex;
  justify-content: flex-end;
  padding: var(--s2) var(--s2) 0;
  margin: 0;
}

.install-modal-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 999px;
}

.install-modal-close-btn:hover {
  background: var(--fill);
  color: var(--text);
}

/* `showModal()` focuses the first focusable element, which put a bright focus
   ring on the close button and made dismissing the thing the loudest offer on
   screen. Focus goes to the panel instead — a screen reader still announces
   the heading, and the ring is saved for whatever the visitor tabs to. */
.install-modal-body {
  text-align: center;
  padding: 0 var(--s6) var(--s6);
}

.install-modal-body:focus {
  outline: none;
}

.install-modal-body h2 {
  font-size: 1.3125rem;
  margin-bottom: var(--s2);
}

.install-modal-body > p {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  margin-bottom: 0;
}

.install-modal-body .qr-card {
  margin-block: var(--s5) var(--s4);
  box-shadow: var(--shadow-sm);
}

.install-modal-body .store-link {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  word-break: break-all;
  margin-bottom: var(--s4);
}

.install-modal-body .platform {
  color: var(--text-secondary);
  font-size: 0.8125rem;
  padding-top: var(--s4);
  border-top: 1px solid var(--separator);
  margin: 0;
}

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

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: var(--s8);
  padding: var(--s7) 0 var(--s8);
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s5);
  margin-bottom: var(--s5);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
}

.site-footer a {
  color: var(--text-secondary);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--text);
  text-decoration: underline;
}

.site-footer p {
  margin: 0;
  color: var(--text-secondary);
}

/* ── Motion ─────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Focus ──────────────────────────────────────────────────────────────── */

/* Keyboard users must be able to see where they are. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 4px;
}