/* Omnistat — site styles.
   One token set, light by default, dark when the visitor asks for it.
   The dark bands (hero, Pro) keep their own palette in both themes so the site
   matches the App Store screenshots. */

:root {
  --ground: #f6f8fc;
  --surface: #ffffff;
  --surface-sunken: #eef1f8;
  --ink: #0b1222;
  --ink-soft: #46506a;
  --ink-muted: #6b768f;
  --line: #e1e6f1;
  --accent: #1f57e8;
  --accent-soft: #eaf0ff;
  --violet: #6d3bff;
  --navy: #070c1a;
  --navy-2: #0d1734;
  --on-navy: #f2f6ff;
  --on-navy-muted: #9db0d8;
  --on-navy-accent: #7fb2ff;
  --on-accent: #ffffff;

  --radius: 16px;
  --radius-lg: 24px;
  --measure: 68ch;
  --shadow: 0 1px 2px rgba(11, 18, 34, .05), 0 12px 32px -16px rgba(11, 18, 34, .22);

  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #070c1a;
    --surface: #0e1527;
    --surface-sunken: #0a1120;
    --ink: #eef2fa;
    --ink-soft: #c2ccdf;
    --ink-muted: #94a1bc;
    --line: #1b2540;
    --accent: #7fb2ff;
    --accent-soft: #12203f;
    --on-accent: #050a16;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 40px -20px rgba(0, 0, 0, .8);
  }
}

/* ---------- base ---------- */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.6rem); font-weight: 600; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); font-weight: 600; }
h3 { font-size: 1.12rem; font-weight: 600; }
p { margin: 0; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
img { max-width: 100%; height: auto; display: block; }

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

.wrap { width: min(1120px, 100% - 3rem); margin-inline: auto; }
.narrow { width: min(var(--measure), 100% - 3rem); margin-inline: auto; }

.eyebrow {
  font: 500 .72rem/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
}

.lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 60ch; }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

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

.site-nav { margin-left: auto; display: flex; gap: 1.4rem; align-items: center; }
.site-nav a { color: var(--ink-soft); text-decoration: none; font-size: .95rem; }
.site-nav a:hover { color: var(--ink); }

@media (max-width: 720px) {
  .site-nav a:not(.button) { display: none; }
}

.button {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 500;
  font-size: .95rem;
  text-decoration: none;
  border: 0;
  white-space: nowrap;
}

.site-nav a.button { color: var(--on-accent); }
.button:hover { filter: brightness(1.06); }
.button.ghost { background: transparent; color: var(--on-navy); border: 1px solid rgba(255, 255, 255, .28); }
.button.ghost:hover { background: rgba(255, 255, 255, .08); }

/* ---------- dark bands ---------- */

.band-dark {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% 108%, rgba(20, 200, 224, .16), transparent 60%),
    radial-gradient(90% 55% at 50% 62%, rgba(47, 107, 255, .40), transparent 62%),
    radial-gradient(70% 40% at 50% -6%, rgba(123, 70, 255, .34), transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 55%, var(--navy) 100%);
  color: var(--on-navy);
}

/* The measurement grid from the store screenshots, kept faint. */
.band-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .8), transparent 55%);
  pointer-events: none;
}

.band-dark > * { position: relative; }
.band-dark h1, .band-dark h2 { color: var(--on-navy); }
.band-dark p { color: var(--on-navy-muted); }
.band-dark .eyebrow { color: var(--on-navy-accent); }

/* ---------- hero ---------- */

.hero { padding: clamp(3.5rem, 8vw, 6rem) 0 0; text-align: center; }
.hero .lede { margin-inline: auto; }
.hero-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.hero-note { font: 400 .85rem/1.5 var(--sans); color: var(--on-navy-muted); margin-top: .9rem; }

.hero-shot {
  margin: clamp(2.5rem, 6vw, 4rem) auto -6rem;
  width: min(320px, 68vw);
  border-radius: 34px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .1);
}

/* ---------- sections ---------- */

section { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.section-head { max-width: 46ch; margin-bottom: 2.5rem; }
.section-head p { color: var(--ink-soft); margin-top: .8rem; }

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.card .label {
  font: 500 .7rem/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.card h3 { margin: .9rem 0 .5rem; }
.card p { color: var(--ink-soft); font-size: .97rem; }

.card.pro { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.tag {
  display: inline-block;
  margin-left: .5rem;
  padding: .12rem .45rem;
  border-radius: 5px;
  background: var(--accent-soft);
  color: var(--accent);
  font: 500 .62rem/1.5 var(--mono);
  letter-spacing: .1em;
  vertical-align: 2px;
}

/* showcase: text beside a screenshot */

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

@media (min-width: 860px) {
  .showcase { grid-template-columns: 1.1fr .9fr; }
  .showcase.flip > :first-child { order: 2; }
}

.showcase img {
  width: min(300px, 70vw);
  margin-inline: auto;
  border-radius: 30px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}

.band-dark .showcase img { border-color: rgba(255, 255, 255, .12); }

.checks { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .7rem; }
.checks li { display: flex; gap: .7rem; align-items: baseline; color: var(--ink-soft); }
.checks li::before { content: "—"; color: var(--accent); font-family: var(--mono); }
.band-dark .checks li { color: var(--on-navy-muted); }
.band-dark .checks li::before { color: var(--on-navy-accent); }

/* ---------- the read-out: editorial rows, then the full list on demand ---------- */

#reads { padding-bottom: clamp(4rem, 8vw, 6rem); }

.section-head.wide { max-width: 34ch; }
.section-head.wide p { max-width: 46ch; }

/* three figures that say how big the thing is, before the detail */
.stat-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  margin: 0 0 clamp(1rem, 3vw, 2rem);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.stat-band > div { background: var(--surface); padding: 1.5rem 1.6rem; }

.stat-band dt {
  font: 600 clamp(2.2rem, 1.6rem + 1.6vw, 3rem)/1 var(--sans);
  letter-spacing: -0.03em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.stat-band dd { margin: .5rem 0 0; color: var(--ink-soft); font-size: .95rem; max-width: 26ch; }

/* one row per detail: picture on one side, the point on the other */
.feature-row {
  display: grid;
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: center;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-bottom: 1px solid var(--line);
}

.feature-rows .feature-row:last-child { border-bottom: 0; }

@media (min-width: 880px) {
  .feature-row { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  /* Alternate the side the screenshot sits on. */
  .feature-row:nth-child(even) .feature-figure { order: 2; }
}

.feature-figure { position: relative; margin: 0; }

/* A tinted plate behind the screenshot, so it sits in the page instead of floating. */
.feature-figure::before {
  content: "";
  position: absolute;
  inset: 14px -14px -14px 14px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--violet) 16%, transparent));
}

.feature-figure img {
  position: relative;
  width: 100%;
  aspect-ratio: 900 / 567;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.feature-copy h3 {
  margin: .6rem 0 .9rem;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.95rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.feature-copy > p { color: var(--ink-soft); max-width: 48ch; }

.metrics {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.metrics li {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font: 400 .8rem/1.5 var(--mono);
}

.metrics li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* the exhaustive table, folded away */
.full-list {
  margin-top: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.full-list > summary {
  padding: 1.1rem 1.4rem;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  position: relative;
  padding-right: 3rem;
}

.full-list > summary::-webkit-details-marker { display: none; }

.full-list > summary::after {
  content: "+";
  position: absolute;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  font: 400 1.3rem/1 var(--mono);
  color: var(--accent);
}

.full-list[open] > summary { border-bottom: 1px solid var(--line); }
.full-list[open] > summary::after { content: "\2212"; }
.full-list > summary:hover { color: var(--accent); }

.full-list .readout { border: 0; border-radius: 0; background: transparent; }

.readout-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: .8rem 1.5rem;
  padding: 1.05rem 1.4rem;
  border-top: 1px solid var(--line);
}

.readout-row:first-child { border-top: 0; }

.readout-label {
  font: 500 .74rem/1.9 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
}

.pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }

.pills li {
  padding: .25rem .6rem;
  border-radius: 7px;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font: 400 .8rem/1.5 var(--mono);
}

@media (max-width: 680px) {
  .readout-row { grid-template-columns: 1fr; gap: .65rem; }
}

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 2.5rem 0 3.5rem;
  background: var(--surface-sunken);
  color: var(--ink-muted);
  font-size: .92rem;
}

.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
.site-footer nav { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-left: auto; }
.site-footer a { color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- legal pages ---------- */

.legal { padding: clamp(2.5rem, 6vw, 4.5rem) 0 5rem; }
.legal h1 { margin-bottom: .6rem; }
.legal .updated { font: 400 .85rem/1 var(--mono); color: var(--ink-muted); }
.legal h2 { font-size: 1.25rem; margin: 2.6rem 0 .8rem; scroll-margin-top: 90px; }
.legal h3 { margin: 1.6rem 0 .5rem; }
.legal p, .legal li { color: var(--ink-soft); }
.legal p + p { margin-top: 1rem; }
.legal ul { padding-left: 1.2rem; display: grid; gap: .5rem; margin: 1rem 0; }
.legal strong { color: var(--ink); font-weight: 600; }

.legal .toc {
  margin: 2rem 0 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.legal .toc ol { margin: .6rem 0 0; padding-left: 1.2rem; columns: 2; column-gap: 2rem; }
@media (max-width: 640px) { .legal .toc ol { columns: 1; } }
.legal .toc li { margin-bottom: .35rem; font-size: .93rem; }

.callout {
  margin: 1.6rem 0;
  padding: 1.1rem 1.35rem;
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .95rem;
}

.summary-table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: .93rem; }
.summary-table th, .summary-table td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.summary-table th { font: 500 .72rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.summary-table td { color: var(--ink-soft); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Cards and copy inside a dark band take the band's palette. */
.band-dark .card {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .14);
}

.band-dark .card h3 { color: var(--on-navy); }
.band-dark .card p { color: var(--on-navy-muted); }
.band-dark .card .label { color: var(--on-navy-accent); }
.band-dark a { color: var(--on-navy-accent); }

.fine-print { margin-top: 2rem; max-width: 62ch; }

/* The hero screenshot hangs below its band; the next section clears it. */
.below-hero { padding-top: clamp(7rem, 12vw, 9rem); }
.mono { font-family: var(--mono); font-size: .95em; }

/* ---------- screen explorer ---------- */

.explorer { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  padding-bottom: .25rem;
}

@media (max-width: 720px) {
  /* One scrolling row rather than four stacked lines of chips. */
  .chips {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    margin-inline: -1.5rem;
    padding-inline: 1.5rem;
    scrollbar-width: none;
    /* Fade the right edge so it reads as "there is more to scroll". */
    mask-image: linear-gradient(90deg, #000 0 88%, transparent);
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { scroll-snap-align: center; }
}

.chip {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: var(--on-navy-muted);
  font: 500 .88rem/1 var(--sans);
  cursor: pointer;
  overflow: hidden;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.chip:hover { color: var(--on-navy); background: rgba(255, 255, 255, .1); }

.chip.is-active {
  color: var(--navy);
  background: var(--on-navy);
  border-color: transparent;
  font-weight: 600;
}

.chip-tag {
  font: 500 .6rem/1.6 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 0 .35rem;
  border-radius: 4px;
  background: rgba(127, 178, 255, .22);
  color: var(--on-navy-accent);
}

.chip.is-active .chip-tag { background: rgba(31, 87, 232, .14); color: var(--accent); }

/* Autoplay progress, restarted from JS by toggling .is-running. */
.chip-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--accent);
  opacity: .9;
}

.chip.is-active .chip-bar.is-running { animation: chip-progress 5s linear forwards; }

@keyframes chip-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.stage {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  justify-items: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 900px) {
  .stage { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); text-align: left; }
}

/* the device */

.phone {
  position: relative;
  width: min(296px, 72vw);
  padding: 9px;
  border-radius: 46px;
  background: linear-gradient(155deg, #3c4658 0%, #161d2c 42%, #0a0f1c 100%);
  box-shadow:
    0 2px 2px rgba(255, 255, 255, .18) inset,
    0 40px 70px -30px rgba(0, 0, 0, .9),
    0 0 0 1px rgba(0, 0, 0, .5);
}

/* Dynamic Island: the capture has the area, the hardware has the pill. */
.phone::after {
  content: "";
  position: absolute;
  top: 22px;
  left: 50%;
  width: 94px;
  height: 27px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #05070d;
}

.phone-screen {
  position: relative;
  aspect-ratio: 1320 / 2868;
  border-radius: 38px;
  overflow: hidden;
  background: #0b1020;
}

.shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transform: translateY(8px) scale(1.012);
  /* The outgoing screenshot leaves quickly so the two never sit on top of each
     other as a muddy double exposure. */
  transition: opacity .16s ease-in, transform .32s cubic-bezier(.2, .7, .2, 1);
}

.shot.is-active {
  opacity: 1;
  transform: none;
  transition: opacity .3s ease-out .06s, transform .34s cubic-bezier(.2, .7, .2, 1);
}

/* the copy beside it */

/* The hero centres its text; the panel beside the phone reads as a column. */
.stage-copy { position: relative; width: min(46ch, 100%); text-align: left; }

.panel { animation: panel-in .36s cubic-bezier(.2, .7, .2, 1) both; }

@keyframes panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.panel h2 { margin-bottom: .7rem; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); }
.panel > p { color: var(--on-navy-muted); }

.panel-eyebrow {
  font: 500 .72rem/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-navy-accent);
  margin-bottom: .9rem;
}

.mono-list {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  gap: .55rem;
  font: 400 .88rem/1.5 var(--mono);
  color: var(--on-navy-muted);
}

.mono-list li { display: grid; grid-template-columns: 1.4rem 1fr; }
.mono-list li::before { content: "▸"; color: var(--on-navy-accent); }

.band-dark .panel .tag { background: rgba(127, 178, 255, .18); color: var(--on-navy-accent); }

.grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* Four cards read better as a 2x2 block than as a row of three and an orphan. */
@media (min-width: 760px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .shot, .panel { transition: none; animation: none; }
  .chip-bar { display: none; }
}

/* ---------- trust strip ---------- */

.trust {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.5rem;
  font: 400 .78rem/1.4 var(--mono);
  letter-spacing: .04em;
  color: var(--on-navy-muted);
}

.trust li { display: flex; align-items: center; gap: .55rem; }
.trust li + li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--on-navy-accent); opacity: .7; }

/* ---------- pricing ---------- */

.plans { display: grid; gap: 1rem; align-items: start; }

@media (min-width: 900px) {
  .plans { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
}

.plan-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius);
  overflow: hidden;
}

.plan-table th, .plan-table td { padding: .85rem 1rem; border-top: 1px solid rgba(255, 255, 255, .1); }
.plan-table thead th { border-top: 0; background: rgba(255, 255, 255, .05); }

.plan-table thead th {
  font: 500 .72rem/1.4 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-navy-accent);
  text-align: center;
}

.plan-table thead th:first-child { text-align: left; color: var(--on-navy-muted); }

.plan-table tbody th {
  text-align: left;
  font-weight: 400;
  font-size: .95rem;
  color: var(--on-navy);
}

.plan-table td { text-align: center; width: 5.5rem; color: var(--on-navy-accent); font-size: 1.1rem; }
.plan-table td.no { color: rgba(157, 176, 216, .5); }
.plan-table tbody tr:nth-child(odd) { background: rgba(255, 255, 255, .02); }

.plan-note {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.plan-note h3 { color: var(--on-navy); }
.plan-note .checks { margin-top: 1rem; }
.plan-note .button { margin-top: 1.5rem; }
.plan-note .fine-print { margin-top: 1rem; font-size: .82rem; }

/* ---------- FAQ ---------- */

.faq {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq-item { border-top: 1px solid var(--line); }
.faq-item:first-child { border-top: 0; }

.faq-item summary {
  padding: 1.1rem 3rem 1.1rem 1.4rem;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  list-style: none;
}

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

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  font: 400 1.3rem/1 var(--mono);
  color: var(--accent);
}

.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:hover { color: var(--accent); }
.faq-answer { padding: 0 3rem 1.3rem 1.4rem; color: var(--ink-soft); font-size: .97rem; }

/* ---------- closing call to action ---------- */

.closing { text-align: center; }
.closing-icon { width: 76px; height: 76px; margin: 0 auto 1.5rem; border-radius: 18px; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .9); }
.closing p { margin-top: .8rem; }
.closing .hero-actions { margin-top: 1.8rem; }