/* Slips — public landing page.
   Loaded ONLY by templates/landing.html, on top of app.css (which supplies the
   palette tokens, so the marketing page and the product can never drift apart).
   Everything here is scoped under .lp so nothing leaks into the app.

   CSP is `default-src 'self'` — no inline styles, no inline script, no external
   fonts, no CDN. Every visual on this page is CSS or inline SVG by necessity,
   which turns out to be the right answer anyway: the phone mockups re-theme
   themselves in dark mode and never need re-shooting when a screen changes. */

.lp {
  /* Marketing-only surfaces. The product's tokens stay authoritative for ink,
     accent and borders; these just give the page more air than a dashboard. */
  --lp-bg: #ffffff;
  --lp-bg2: #f6f6f4;
  --lp-card: #ffffff;
  --lp-hair: color-mix(in srgb, var(--ink) 9%, transparent);
  --lp-ink-soft: color-mix(in srgb, var(--ink) 62%, transparent);
  --lp-nav-h: 56px;
  --lp-max: 1120px;
  --lp-r: 22px;
  background: var(--lp-bg);
  color: var(--ink);
  overflow-x: clip;
}
@media (prefers-color-scheme: dark) {
  .lp {
    --lp-bg: #000000;
    --lp-bg2: #0c0c0c;
    --lp-card: #141414;
    --lp-hair: color-mix(in srgb, var(--ink) 14%, transparent);
    --lp-ink-soft: color-mix(in srgb, var(--ink) 66%, transparent);
  }
}

/* The landing page owns the whole document: no tab bar, no app padding. */
body.lp-body { padding-bottom: 0; background: var(--lp-bg); min-height: 100dvh; }

.lp-wrap { width: 100%; max-width: var(--lp-max); margin: 0 auto; padding: 0 22px; }
@media (min-width: 760px) { .lp-wrap { padding: 0 34px; } }

.lp section { position: relative; }
.lp-sec { padding: clamp(56px, 9vw, 128px) 0; }
.lp-sec.tight { padding: clamp(40px, 6vw, 84px) 0; }
.lp-sec.alt { background: var(--lp-bg2); }

/* ---------------------------------------------------------------- type ---- */

.lp h1, .lp h2, .lp h3 { margin: 0; text-wrap: balance; }
.lp h1 {
  font-size: clamp(2.35rem, 7.4vw, 4.4rem); font-weight: 700;
  letter-spacing: -0.038em; line-height: 1.03;
}
.lp h2 {
  font-size: clamp(1.75rem, 4.6vw, 3rem); font-weight: 700;
  letter-spacing: -0.032em; line-height: 1.08;
}
.lp h3 { font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.012em; line-height: 1.3; }
.lp p { margin: 0; }

.eyebrow {
  display: inline-block; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 14px;
}
.lead {
  font-size: clamp(1.0625rem, 1.9vw, 1.3125rem); line-height: 1.5;
  color: var(--lp-ink-soft); letter-spacing: -0.011em;
}
.lead.wide { max-width: 40ch; }
.sec-head { max-width: 46rem; margin-bottom: clamp(28px, 4vw, 52px); }
.sec-head .lead { margin-top: 16px; max-width: 54ch; }
.sec-head.mid { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.mid .lead { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------- nav ------ */

.lp-nav {
  position: sticky; top: 0; z-index: 50;
  padding-top: env(safe-area-inset-top);
  background: color-mix(in srgb, var(--lp-bg) 78%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.lp-nav.stuck { border-bottom-color: var(--lp-hair); }
.lp-nav .lp-wrap {
  height: var(--lp-nav-h); display: flex; align-items: center; gap: 10px;
}
.brand {
  display: inline-flex; align-items: center; gap: 9px; font-weight: 650;
  font-size: 1.0625rem; letter-spacing: -0.02em; color: var(--ink); flex: none;
}
.brand svg { width: 22px; height: 22px; flex: none; }
.brand .dot { color: var(--accent); }
.nav-links { display: none; gap: 2px; margin-left: 18px; flex: 1; min-width: 0; }
@media (min-width: 900px) { .nav-links { display: flex; } }
.nav-links a {
  padding: 8px 12px; border-radius: 9px; font-size: 0.875rem; font-weight: 550;
  color: var(--lp-ink-soft); white-space: nowrap;
}
.nav-links a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.nav-cta { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }

/* ------------------------------------------------------------- buttons ---- */

.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: 999px;
  font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em;
  border: 1px solid var(--lp-hair); background: transparent; color: var(--ink);
  cursor: pointer; white-space: nowrap;
  transition: transform .18s cubic-bezier(.16,1,.3,1), background .18s ease, opacity .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.lp-btn:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.lp-btn:active { transform: scale(.97); }
.lp-btn-primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 40%, transparent),
              0 8px 24px color-mix(in srgb, var(--accent) 26%, transparent);
}
.lp-btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.lp-btn-plain { border-color: transparent; padding: 0 12px; }
.lp-btn-lg { min-height: 52px; padding: 0 26px; font-size: 1rem; }
.lp-btn-sm { min-height: 36px; padding: 0 14px; font-size: 0.875rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.textlink { color: var(--accent); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.textlink .arw { transition: transform .2s ease; }
.textlink:hover .arw { transform: translateX(3px); }

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

.hero { position: relative; padding: clamp(40px, 7vw, 84px) 0 clamp(20px, 4vw, 40px); overflow: clip; }
/* Two soft washes instead of a photograph — they carry the brand hue without
   a single network request, and they invert cleanly in dark mode. */
.hero::before, .hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  border-radius: 50%; filter: blur(70px); opacity: .5;
}
.hero::before {
  width: 60vw; height: 60vw; max-width: 640px; max-height: 640px;
  top: -14%; right: -18%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 42%, transparent), transparent 68%);
}
.hero::after {
  width: 48vw; height: 48vw; max-width: 520px; max-height: 520px;
  bottom: -12%; left: -16%;
  background: radial-gradient(circle, color-mix(in srgb, var(--s3) 30%, transparent), transparent 68%);
}
@media (prefers-color-scheme: dark) { .hero::before, .hero::after { opacity: .34; } }
.hero .lp-wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; gap: clamp(36px, 6vw, 56px); align-items: center; }
@media (min-width: 940px) { .hero-grid { grid-template-columns: 1.02fr .98fr; gap: 40px; } }
.hero h1 { margin-bottom: 20px; }
.hero .lead { max-width: 32ch; }
.hero .btn-row { margin-top: 30px; }
.hero-note { margin-top: 18px; font-size: 0.8125rem; color: var(--ink3); }
.hero-note strong { color: var(--lp-ink-soft); font-weight: 600; }

.pill {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px;
  padding: 6px 14px 6px 8px; border-radius: 999px; font-size: 0.8125rem; font-weight: 550;
  border: 1px solid var(--lp-hair); background: var(--lp-card); color: var(--lp-ink-soft);
}
.pill b { color: var(--ink); font-weight: 650; }
.pill .tag {
  padding: 2px 8px; border-radius: 999px; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
}

/* ------------------------------------------------------------- devices ---- */

.stage { display: flex; justify-content: center; align-items: flex-end; gap: 18px; }
.device {
  position: relative; flex: none; width: min(272px, 76vw);
  aspect-ratio: 9 / 19.3; padding: 9px;
  border-radius: 46px; background: linear-gradient(150deg, #d9d9d6, #f6f6f4 34%, #b9b9b4);
  box-shadow: 0 2px 6px rgba(0,0,0,.18), 0 30px 70px -18px rgba(0,0,0,.38);
}
@media (prefers-color-scheme: dark) {
  .device { background: linear-gradient(150deg, #3a3a3a, #1d1d1d 40%, #464646); }
}
.device.sm { width: min(210px, 60vw); border-radius: 38px; padding: 7px; }
.device.tilt { transform: rotate(-2.2deg); }
.device-screen {
  position: relative; height: 100%; border-radius: 38px; overflow: hidden;
  background: var(--surface2); display: flex; flex-direction: column;
}
.device.sm .device-screen { border-radius: 32px; }
.device-screen::before {   /* the notch — pure decoration, keeps the frame believable */
  content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 33%; height: 18px; border-radius: 999px; background: #000; opacity: .88; z-index: 4;
}
@media (prefers-reduced-motion: no-preference) {
  .device { transition: transform .5s cubic-bezier(.16,1,.3,1); }
}

/* ------- the mock UI inside a device: the product's own shapes, shrunk ----- */

.mk { flex: 1; min-height: 0; display: flex; flex-direction: column; font-size: 11px; line-height: 1.35; }
.mk-top {
  padding: 30px 13px 8px; display: flex; align-items: center; justify-content: space-between;
  font-weight: 650; font-size: 13px; letter-spacing: -.01em;
}
.mk-top .step { color: var(--accent); font-weight: 600; }
.mk-top .av {
  width: 20px; height: 20px; border-radius: 50%; background: var(--s1); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700;
}
.mk-body { flex: 1; min-height: 0; overflow: hidden; padding: 0 11px 10px; }
.mk-body > * + * { margin-top: 8px; }
.mk-card {
  background: var(--card); border-radius: 12px; padding: 10px 11px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.mk-lbl { font-size: 9.5px; color: var(--ink3); font-weight: 600; letter-spacing: .02em; }
.mk-amt { font-size: 26px; font-weight: 680; letter-spacing: -.02em; line-height: 1.1; }
.mk-amt.sm { font-size: 17px; }
.mk-delta { font-size: 10px; font-weight: 650; }
.mk-row { display: flex; align-items: center; gap: 7px; padding: 5px 0; }
.mk-row + .mk-row { border-top: 1px solid var(--border); }
.mk-row .g { flex: 1; min-width: 0; }
/* These are spans (a mock, not a document) — they only stack and only clip when
   they are told to be blocks. */
.mk-row .n { display: block; font-weight: 550; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-row .s { display: block; font-size: 9.5px; color: var(--ink3); }
.mk-row .v { font-weight: 650; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-bar { display: block; height: 4px; border-radius: 2px; background: var(--surface); overflow: hidden; margin-top: 3px; }
.mk-bar i { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
.mk-tile {
  width: 22px; height: 22px; border-radius: 6px; flex: none; background: var(--surface2);
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1;
}
.mk-chart { display: flex; align-items: flex-end; gap: 3px; height: 46px; margin-top: 6px; }
.mk-chart.short { height: 30px; }
.mk-chart.tall { height: 96px; gap: 5px; }
.mk-chart i { flex: 1; height: 50%; border-radius: 2px 2px 0 0; background: var(--dim); }
.mk-chart i.on { background: var(--accent); }
/* Bar heights and bar-list widths as classes, not style attributes: the CSP
   forbids inline styles, and a fixed vocabulary keeps the mockups tidy. */
.mk-chart i.b22{height:22%}.mk-chart i.b31{height:31%}.mk-chart i.b40{height:40%}
.mk-chart i.b44{height:44%}.mk-chart i.b48{height:48%}.mk-chart i.b52{height:52%}
.mk-chart i.b53{height:53%}.mk-chart i.b54{height:54%}.mk-chart i.b55{height:55%}
.mk-chart i.b60{height:60%}.mk-chart i.b61{height:61%}.mk-chart i.b62{height:62%}
.mk-chart i.b64{height:64%}.mk-chart i.b66{height:66%}.mk-chart i.b67{height:67%}
.mk-chart i.b68{height:68%}.mk-chart i.b70{height:70%}.mk-chart i.b71{height:71%}
.mk-chart i.b73{height:73%}.mk-chart i.b74{height:74%}.mk-chart i.b75{height:75%}
.mk-chart i.b78{height:78%}.mk-chart i.b80{height:80%}.mk-chart i.b83{height:83%}
.mk-chart i.b88{height:88%}
.mk-bar i.w22{width:22%}.mk-bar i.w31{width:31%}.mk-bar i.w54{width:54%}.mk-bar i.w86{width:86%}
.mk-bar i.w22{background:var(--s4)}.mk-bar i.w31{background:var(--s3)}
.mk-bar i.w54{background:var(--s2)}.mk-bar i.w86{background:var(--s1)}
.mk-tabs {
  display: flex; border-top: 1px solid var(--border); padding: 7px 4px 9px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}
.mk-tabs span { flex: 1; text-align: center; font-size: 8.5px; font-weight: 600; color: var(--ink3); }
.mk-tabs span.on { color: var(--accent); }
.mk-tabs .plus {
  display: block; width: 22px; height: 22px; margin: 0 auto 2px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 15px; line-height: 21px;
}
.mk-glyph { display: block; width: 18px; height: 18px; margin: 0 auto 2px; border-radius: 5px; background: currentColor; opacity: .5; }
.mk-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px;
  font-size: 9.5px; font-weight: 600; border: 1px solid var(--border); background: var(--card);
}
.mk-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.mk-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.mk-shot {   /* the photo-of-a-receipt block at the top of the review screen */
  height: 86px; border-radius: 10px; background:
    repeating-linear-gradient(180deg, var(--surface) 0 6px, transparent 6px 13px),
    linear-gradient(160deg, #efeee9, #dedcd4);
  border: 1px solid var(--border); position: relative; overflow: hidden;
}
@media (prefers-color-scheme: dark) {
  .mk-shot { background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 6px, transparent 6px 13px),
    linear-gradient(160deg, #2a2a28, #1b1b1a); }
}
.mk-ok { color: var(--good); font-weight: 700; }

.mk-confirm {
  margin-top: 10px; padding: 9px; border-radius: 10px; text-align: center;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 650;
}
.cta-mock { display: flex; align-items: center; min-height: 34px; font-weight: 600; }
.cta-mock .n { font-size: 11.5px; }
.mk-card.ok-note { padding: 7px 11px; font-size: 10px; }
.ask-q {
  align-self: flex-end; max-width: 88%; margin-left: auto; padding: 9px 12px;
  border-radius: 14px 14px 4px 14px; background: var(--accent); color: #fff;
  font-size: 0.8125rem; font-weight: 550; line-height: 1.35;
}
.panel-body .table-scroll { margin: 0 -14px; padding: 0 14px; }
.btn-block-cta { display: flex; width: 100%; }

/* Two phone frames side by side need ~520px to stay legible; below that the
   second one is noise, so it leaves rather than shrinks. */
.hide-sm { display: none; }
@media (min-width: 1120px) { .hide-sm { display: block; } }
.art-mini { display: flex; justify-content: center; }

/* --------------------------------------------------------------- steps ---- */

.steps { display: grid; gap: 18px; counter-reset: step; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.step-card {
  position: relative; padding: 26px 22px 24px; border-radius: var(--lp-r);
  background: var(--lp-card); border: 1px solid var(--lp-hair);
}
.step-card .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; margin-bottom: 14px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent); font-weight: 700; font-size: 0.875rem;
}
.step-card h3 { margin-bottom: 7px; }
.step-card p { color: var(--lp-ink-soft); font-size: 0.9375rem; }

/* --------------------------------------------------------------- bento ---- */

.bento { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .bento { grid-template-columns: repeat(6, 1fr); gap: 16px; } }
.tile {
  position: relative; padding: 24px 22px; border-radius: var(--lp-r);
  background: var(--lp-card); border: 1px solid var(--lp-hair);
  display: flex; flex-direction: column; gap: 9px;
  transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s ease;
}
.tile:hover { border-color: color-mix(in srgb, var(--accent) 32%, transparent); }
a.tile:hover { transform: translateY(-2px); }
.tile h3 { letter-spacing: -.015em; }
.tile p { color: var(--lp-ink-soft); font-size: 0.9375rem; line-height: 1.5; }
.tile .ico {
  width: 34px; height: 34px; border-radius: 10px; margin-bottom: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent);
}
.tile .ico svg { width: 19px; height: 19px; }
.tile .kicker {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent);
}
.tile ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.tile ul li {
  position: relative; padding-left: 20px; font-size: 0.875rem; color: var(--lp-ink-soft); line-height: 1.45;
}
.tile ul li::before {
  content: ""; position: absolute; left: 3px; top: .52em; width: 7px; height: 7px;
  border-radius: 2px; background: color-mix(in srgb, var(--accent) 55%, transparent);
}
/* Hue-varied icon chips keep a 14-tile grid from reading as wallpaper. */
.tile.h2 .ico { background: color-mix(in srgb, var(--s2) 14%, transparent); color: var(--s2); }
.tile.h3 .ico { background: color-mix(in srgb, var(--s3) 14%, transparent); color: var(--s3); }
.tile.h4 .ico { background: color-mix(in srgb, var(--s4) 16%, transparent); color: var(--s4); }
.tile.h5 .ico { background: color-mix(in srgb, var(--s5) 14%, transparent); color: var(--s5); }
.tile.h7 .ico { background: color-mix(in srgb, var(--s7) 14%, transparent); color: var(--s7); }
.tile.wide { gap: 14px; }
@media (min-width: 700px) {
  .b2 { grid-column: span 2; } .b3 { grid-column: span 3; }
  .b4 { grid-column: span 4; } .b6 { grid-column: span 6; }
}
@media (min-width: 700px) and (max-width: 1000px) {
  .b2 { grid-column: span 3; }
}
.tile.feature {
  background:
    radial-gradient(120% 100% at 90% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 62%),
    var(--lp-card);
}
.tile.feature .inner { display: grid; gap: 22px; align-items: center; }
@media (min-width: 860px) { .tile.feature .inner { grid-template-columns: 1fr 1fr; gap: 32px; } }
.tile.feature h3 { font-size: clamp(1.25rem, 2.4vw, 1.75rem); letter-spacing: -.025em; }

/* -------------------------------------------------------------- splits ---- */

.split { display: grid; gap: clamp(28px, 5vw, 56px); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split.rev .split-art { order: -1; }
}
.split + .split { margin-top: clamp(56px, 8vw, 108px); }
.split-copy h2 { margin-bottom: 16px; }
.split-copy .lead { margin-bottom: 20px; }
.split-art { display: flex; justify-content: center; }

/* A framed panel used where a phone frame would be too tall (tables, matrices). */
.panel {
  width: 100%; max-width: 460px; border-radius: 18px; overflow: hidden;
  background: var(--card); border: 1px solid var(--lp-hair);
  box-shadow: 0 20px 50px -26px rgba(0,0,0,.45);
}
.panel-head {
  display: flex; align-items: center; gap: 7px; padding: 11px 14px;
  border-bottom: 1px solid var(--border); font-size: 0.8125rem; font-weight: 650;
}
.panel-head .dots { display: flex; gap: 5px; }
.panel-head .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.panel-body { padding: 14px; font-size: 0.8125rem; }
.panel-body > * + * { margin-top: 10px; }
.cmp { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.cmp th, .cmp td { padding: 7px 6px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
.cmp th:first-child, .cmp td:first-child { text-align: left; white-space: normal; }
.cmp thead th { font-size: 0.6875rem; color: var(--ink2); font-weight: 650; }
.cmp td.num { font-variant-numeric: tabular-nums; font-weight: 600; }
.cmp .miss { color: var(--ink3); }
.cmp .excl { color: var(--bad); font-weight: 600; }
.cmp tfoot td { font-weight: 700; border-bottom: 0; }
.finding {
  padding: 10px 12px; border-radius: 10px; font-size: 0.75rem; line-height: 1.45;
  background: color-mix(in srgb, var(--s4) 15%, transparent);
}
.finding b { font-weight: 700; }

/* --------------------------------------------------------------- stats ---- */

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
  padding: 20px 18px; border-radius: 16px; background: var(--lp-card);
  border: 1px solid var(--lp-hair);
}
.stat .v { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; letter-spacing: -.03em; }
.stat .k { font-size: 0.8125rem; color: var(--lp-ink-soft); margin-top: 3px; }

/* --------------------------------------------------------------- price ---- */

.price-card {
  max-width: 520px; margin: 0 auto; padding: clamp(26px, 4vw, 38px); border-radius: 26px;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 60%),
    var(--lp-card);
  border: 1px solid var(--lp-hair); text-align: center;
}
.price-card .amount { font-size: clamp(2.5rem, 6vw, 3.5rem); font-weight: 700; letter-spacing: -.04em; }
.price-card .per { font-size: 1rem; color: var(--lp-ink-soft); font-weight: 550; }
.price-card ul { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; gap: 11px; text-align: left; }
.price-card li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9375rem; color: var(--lp-ink-soft); }
.price-card li svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--good); }
.price-card .fine { margin-top: 16px; font-size: 0.8125rem; color: var(--ink3); }

/* ----------------------------------------------------------------- faq ---- */

.faq { max-width: 800px; margin: 0 auto; border-top: 1px solid var(--lp-hair); }
.faq details { border-bottom: 1px solid var(--lp-hair); }
.faq summary {
  display: flex; align-items: flex-start; gap: 14px; padding: 20px 2px; cursor: pointer;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .q { flex: 1; }
.faq summary .pm {
  flex: none; width: 22px; height: 22px; position: relative; margin-top: 2px; color: var(--accent);
}
.faq summary .pm::before, .faq summary .pm::after {
  content: ""; position: absolute; left: 4px; top: 10px; width: 14px; height: 2px;
  border-radius: 2px; background: currentColor; transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.faq summary .pm::after { transform: rotate(90deg); }
.faq details[open] summary .pm::after { transform: rotate(0deg); }
.faq .a { padding: 0 36px 22px 0; color: var(--lp-ink-soft); font-size: 0.9375rem; line-height: 1.6; }
.faq .a > * + * { margin-top: 10px; }
.faq .a a { color: var(--accent); font-weight: 600; }

/* -------------------------------------------------------------- closing --- */

.closing {
  text-align: center; border-radius: 30px; padding: clamp(44px, 7vw, 84px) 24px;
  background:
    radial-gradient(90% 120% at 50% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 66%),
    var(--lp-bg2);
  border: 1px solid var(--lp-hair);
}
.closing h2 { margin-bottom: 16px; }
.closing .lead { margin: 0 auto 30px; max-width: 44ch; }
.closing .btn-row { justify-content: center; }

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

.lp-foot { border-top: 1px solid var(--lp-hair); padding: 44px 0 calc(40px + env(safe-area-inset-bottom)); }
.foot-grid { display: grid; gap: 30px; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; } }
.foot-col h4 {
  margin: 0 0 12px; font-size: 0.75rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink3);
}
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
/* app.css paints links inside <li> with the accent (right for prose, wrong for
   a footer column) — this has to out-specify `li a:not(.btn):not(.chip)`. */
.lp .foot-col ul li a { font-size: 0.875rem; color: var(--lp-ink-soft); }
.lp .foot-col ul li a:hover { color: var(--ink); }
.foot-brand p { margin-top: 12px; font-size: 0.875rem; color: var(--lp-ink-soft); max-width: 34ch; }
.foot-legal {
  margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--lp-hair);
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  font-size: 0.8125rem; color: var(--ink3);
}
.foot-legal .sp { margin-left: auto; }

/* ---------------------------------------------------------- scroll reveal - */
/* Sections rise in as they enter the viewport — driven by a CSS scroll-progress
   timeline, with NO JavaScript anywhere in the path.
   The earlier version hid .rv elements and let an IntersectionObserver reveal
   them; anything that doesn't run observers (a hidden tab with frozen timers, a
   headless renderer, a link-preview crawler, a blocked script) got a blank white
   page instead of a landing page. A view() timeline cannot fail that way: where
   it isn't supported the rule simply doesn't apply and the content is just
   there, and an element already on screen at load starts past the range and
   renders at its end state. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .lp .rv {
      animation: rv-rise linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 26%;
    }
  }
}
@keyframes rv-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lp *, .lp *::before, .lp *::after { transition: none !important; animation: none !important; }
}

/* skip link — a marketing page still has to be navigable by keyboard */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 10px 16px; background: var(--accent); color: #fff; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }
.lp :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }