/*
 * owemeapp.com
 *
 * ## The palette is not invented here
 *
 * Every colour below is transcribed from `apps/mobile/src/theme/tokens.ts`.
 * A landing page whose blue is a shade off the app's is a page that quietly
 * says the two were made by different people. A React Native StyleSheet and a
 * CSS file cannot share a source, so this is a copy — but it is a copy with one
 * named origin, and that file is the authority if they ever disagree.
 *
 * ## No web font, and that is on purpose
 *
 * The loudest claim on this page is that OweMe never asks you for a financial
 * detail. Loading a typeface from someone else's CDN, on that page, would hand
 * a third party the IP address of everybody who came to read it. The app itself
 * ships no custom font either, so the system stack is also the accurate one.
 *
 * ## Everything is same-origin
 *
 * No stylesheet, script, image or font from another host — which is what lets
 * `_headers` set a Content-Security-Policy with no `unsafe-inline` and no
 * third-party sources at all. If you add an asset, add it here, not from a CDN.
 */

/* ------------------------------------------------------------------ */
/* Tokens                                                              */
/* ------------------------------------------------------------------ */

:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-alt: #f5f6f8;
  --surface-high: #edeff3;

  --border: #e6e8ec;
  --border-strong: #c9cdd6;

  --text: #131720;
  --muted: #5b6270;
  --faint: #868c9b;

  --accent: #116dff;
  --accent-soft: rgba(17, 109, 255, 0.1);
  --accent-line: rgba(17, 109, 255, 0.28);
  --accent-on: #ffffff;

  --pos: #00806a;
  --pos-soft: rgba(0, 128, 106, 0.1);
  --neg: #d3312b;
  --neg-soft: rgba(211, 49, 43, 0.1);

  --shadow-card: 0 2px 8px rgba(11, 18, 32, 0.05);
  --shadow-raised: 0 6px 16px rgba(11, 18, 32, 0.09);
  --shadow-float: 0 10px 24px rgba(11, 18, 32, 0.16), 0 2px 6px rgba(11, 18, 32, 0.06);

  --nav-bg: rgba(255, 255, 255, 0.82);
  --phone-frame: #d6dae2;
  --phone-bezel: #0e1014;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;

  --wrap: 1120px;
  --gut: 1.5rem;
}

/*
 * Dark is declared under both scopes for the same reason the API's pages do it:
 * the media query alone means the OS always wins. There is no toggle on this
 * page today, but leaving the hook out is how a toggle added later turns out to
 * be decorative.
 */
:root[data-theme='dark'] {
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0e1014;
    --surface: #171a21;
    --surface-alt: #171a21;
    --surface-high: #1e222b;

    --border: #272c37;
    --border-strong: #3a4150;

    --text: #f2f4f8;
    --muted: #a0a7b6;
    --faint: #767d8c;

    --accent: #4c93ff;
    --accent-soft: rgba(76, 147, 255, 0.16);
    --accent-line: rgba(76, 147, 255, 0.4);
    --accent-on: #0e1014;

    --pos: #2fd4a0;
    --pos-soft: rgba(47, 212, 160, 0.15);
    --neg: #ff6b6b;
    --neg-soft: rgba(255, 107, 107, 0.15);

    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-raised: 0 6px 16px rgba(0, 0, 0, 0.4);
    --shadow-float: 0 10px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);

    --nav-bg: rgba(14, 16, 20, 0.8);
    --phone-frame: #2b3140;
    --phone-bezel: #05060a;
  }
}

:root[data-theme='dark'] {
  --bg: #0e1014;
  --surface: #171a21;
  --surface-alt: #171a21;
  --surface-high: #1e222b;
  --border: #272c37;
  --border-strong: #3a4150;
  --text: #f2f4f8;
  --muted: #a0a7b6;
  --faint: #767d8c;
  --accent: #4c93ff;
  --accent-soft: rgba(76, 147, 255, 0.16);
  --accent-line: rgba(76, 147, 255, 0.4);
  --accent-on: #0e1014;
  --pos: #2fd4a0;
  --pos-soft: rgba(47, 212, 160, 0.15);
  --neg: #ff6b6b;
  --neg-soft: rgba(255, 107, 107, 0.15);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-raised: 0 6px 16px rgba(0, 0, 0, 0.4);
  --shadow-float: 0 10px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  --nav-bg: rgba(14, 16, 20, 0.8);
  --phone-frame: #2b3140;
  --phone-bezel: #05060a;
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

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

em {
  font-style: normal;
  color: var(--text);
  font-weight: 600;
}

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

.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: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--accent-on);
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 var(--r-md) 0;
  font-weight: 650;
  text-decoration: none;
}
.skip:focus {
  left: 0;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gut);
}
.wrap.narrow {
  max-width: 760px;
}
.center {
  text-align: center;
}

/* ------------------------------------------------------------------ */
/* Type                                                                */
/* ------------------------------------------------------------------ */

h1 {
  font-size: clamp(2.6rem, 6.4vw, 4.4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.045em;
  margin-bottom: 1.35rem;
}

h2 {
  font-size: clamp(1.85rem, 3.8vw, 2.7rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.012em;
}

.hl {
  color: var(--accent);
}

.over {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.85rem;
}

.sec-h {
  max-width: 20ch;
}

.lede,
.sec-lede {
  font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
  line-height: 1.62;
  color: var(--muted);
}

.sec-lede {
  max-width: 58ch;
  margin-top: 1.1rem;
}

.body {
  color: var(--muted);
  margin-top: 1.1rem;
  max-width: 56ch;
}

/* A body paragraph centred in a narrow column — the join page's fallback text.
   A class rather than a style attribute: `_headers` sets `style-src 'self'`
   with no 'unsafe-inline', and that blocks style attributes as well as <style>
   blocks. An inline one here would simply not apply. */
.body.mid {
  margin-left: auto;
  margin-right: auto;
}

.fineprint {
  margin-top: 2.25rem;
  font-size: 0.875rem;
  color: var(--faint);
  max-width: 62ch;
}

/* ------------------------------------------------------------------ */
/* Buttons + form                                                      */
/* ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--accent);
  color: var(--accent-on);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: 0.95rem 1.4rem;
  font: inherit;
  font-weight: 650;
  letter-spacing: -0.011em;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    filter 0.15s ease,
    transform 0.15s ease;
}
.btn:hover {
  filter: brightness(1.08);
}
.btn:active {
  transform: translateY(1px);
}

.btn-sm {
  padding: 0.55rem 0.95rem;
  font-size: 0.875rem;
  border-radius: var(--r-sm);
}

.notify {
  margin-top: 2rem;
  max-width: 30rem;
}
.notify.big {
  margin: 2.25rem auto 0;
}

.notify-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.notify input[type='email'] {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 0.95rem 1rem;
  font: inherit;
  line-height: 1.15;
  box-shadow: var(--shadow-card);
}
.notify input[type='email']::placeholder {
  color: var(--faint);
}
.notify input[type='email']:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent-soft);
  outline-offset: 0;
}

/* The honeypot. Off-screen rather than display:none — some bots skip
   anything that is not rendered, and this one should look fillable. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.note {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--faint);
  line-height: 1.5;
}

.formmsg {
  margin-top: 0.7rem;
  font-size: 0.875rem;
  font-weight: 600;
  min-height: 1.3em;
}
.formmsg.ok {
  color: var(--pos);
}
.formmsg.bad {
  color: var(--neg);
}

/* ------------------------------------------------------------------ */
/* Nav                                                                 */
/* ------------------------------------------------------------------ */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-bg);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.nav.stuck {
  border-bottom-color: var(--border);
}

.nav-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0.7rem var(--gut);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text);
  text-decoration: none;
  font-weight: 750;
  letter-spacing: -0.022em;
  font-size: 1.0625rem;
  /* Matches the focus ring's own radius, so the outline hugs the pair rather
     than cutting the corners off the mark. */
  border-radius: 8px;
  transition: opacity 0.15s ease;
}
/* Fading mark and wordmark together says they are one clickable object.
   Recolouring only the word would suggest the logo was decoration beside it. */
.brand:hover {
  opacity: 0.65;
}
.brand:active {
  opacity: 0.85;
}
.brand-mark {
  width: 28px;
  height: 28px;
  display: block;
  border-radius: 7px;
}

.nav-links {
  margin-left: auto;
  display: flex;
  gap: 1.6rem;
}
.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 550;
}
.nav-links a:hover {
  color: var(--text);
}

@media (max-width: 800px) {
  .nav-links {
    display: none;
  }
  .nav-inner .btn-sm {
    margin-left: auto;
  }
}

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */

.hero {
  position: relative;
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
}

/*
 * The aurora, borrowed from the app's own background.
 *
 * Deliberately faint. In the app these are stacked rings whose overlap
 * accumulates; here they are three plain radial gradients tuned to land at
 * roughly the same visible density, which is "you would not notice it if you
 * were not looking for it".
 */
.aurora {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 130%;
  pointer-events: none;
  background:
    radial-gradient(46rem 30rem at 18% 8%, rgba(17, 109, 255, 0.09), transparent 62%),
    radial-gradient(38rem 26rem at 88% 22%, rgba(124, 58, 237, 0.06), transparent 60%),
    radial-gradient(34rem 24rem at 62% 88%, rgba(0, 182, 122, 0.05), transparent 62%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .aurora {
    background:
      radial-gradient(46rem 30rem at 18% 8%, rgba(76, 147, 255, 0.11), transparent 62%),
      radial-gradient(38rem 26rem at 88% 22%, rgba(140, 90, 255, 0.09), transparent 60%),
      radial-gradient(34rem 24rem at 62% 88%, rgba(0, 200, 140, 0.06), transparent 62%);
  }
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* Stacked, and each pill only as wide as its own text — two tags rather than
   two bars. `align-items: flex-start` is what stops them stretching to the
   column width, which is the difference between a label and a banner. */
.eyebrows {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  margin-bottom: 1.6rem;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  padding: 0.34rem 0.8rem 0.34rem 0.65rem;
  font-size: 0.78125rem;
  font-weight: 650;
  letter-spacing: -0.005em;
}

/*
 * The second platform, deliberately quieter.
 *
 * Android is close and iOS is behind it, so they should not shout equally —
 * two identical accent pills would promise two imminent launches. This one is
 * outlined rather than filled, which reads as "also planned" without needing
 * the word.
 */
.eyebrow.later {
  background: transparent;
  color: var(--muted);
  border-color: var(--border-strong);
}
.eyebrow.later .dot {
  opacity: 0.5;
}
.dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  flex: none;
}

/* A grid child's default min-width is auto, which means "as wide as my
   longest unbreakable thing". Left alone, the headline stops the column
   shrinking and pushes the phone off the side of a narrow screen. */
.hero-copy {
  min-width: 0;
}

.lede {
  max-width: 46ch;
}

/* ------------------------------------------------------------------ */
/* Phone mockup                                                        */
/* ------------------------------------------------------------------ */

.hero-art {
  display: flex;
  justify-content: center;
}

.phone {
  width: min(320px, 100%);
  aspect-ratio: 320 / 660;
  border-radius: 46px;
  padding: 11px;
  background: var(--phone-bezel);
  box-shadow:
    var(--shadow-float),
    0 0 0 1px var(--phone-frame),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.09);
}

.phone-screen {
  position: relative;
  height: 100%;
  border-radius: 36px;
  background: var(--bg);
  overflow: hidden;
  padding: 1.15rem 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  font-size: 13px;
}

.app-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.app-mark {
  width: 21px;
  height: 21px;
  border-radius: 5px;
}
.app-brand {
  font-weight: 750;
  font-size: 0.9375rem;
  letter-spacing: -0.03em;
}
.app-bell {
  width: 18px;
  height: 18px;
  margin-left: auto;
  color: var(--text);
}

.app-greet {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.1;
}

.app-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 0.85rem 0.9rem;
}

.app-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}
.app-amount {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  margin-top: 0.05rem;
}
.pos {
  color: var(--pos);
}
.neg {
  color: var(--neg);
}

.app-split {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
}
.app-split > div {
  flex: 1;
}
.app-rule {
  width: 1px;
  align-self: stretch;
  background: var(--border);
}
.app-faint {
  font-size: 0.6875rem;
  color: var(--faint);
}
.app-sum {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.app-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
}
.app-stat {
  padding: 0.6rem 0.5rem;
  text-align: center;
}
.app-stat b {
  display: block;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.app-stat span {
  font-size: 0.6875rem;
  color: var(--muted);
}

.app-over {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.15rem;
}

.app-cats {
  display: grid;
  gap: 0.7rem;
}
.app-cat-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.8125rem;
  margin-bottom: 0.35rem;
}
.app-cat-top b {
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.app-track {
  height: 5px;
  border-radius: 999px;
  background: var(--surface-high);
  overflow: hidden;
}
.app-track i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}
.w69 {
  width: 69%;
}
.w25 {
  width: 25%;
}
.w6 {
  width: 6%;
}

/* The floating tab capsule, reduced to its silhouette. */
.app-tabs {
  margin-top: auto;
  margin-bottom: 0.9rem;
  align-self: center;
  display: flex;
  gap: 1.25rem;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-raised);
  padding: 0.6rem 1.1rem;
}
.app-tabs span {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: var(--surface-high);
}
.app-tabs span.on {
  background: var(--accent);
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-art {
    order: -1;
  }
  .phone {
    width: min(280px, 78vw);
    /*
     * Height follows the content here, rather than the 320/660 ratio.
     *
     * Everything inside the mockup is sized in px and rem — the card padding,
     * the row gaps, the 13px type — so none of it shrinks when the frame does.
     * At 320px wide the ratio gives 660px of height for about 660px of content
     * and it fits exactly; at 280px it gives 577px for the same content, and
     * `overflow: hidden` on `.phone-screen` quietly cut the last card in half
     * and pushed the tab capsule onto the bezel curve.
     *
     * Letting the content decide cannot clip, at any width, and the frame still
     * reads as a phone because the content is tall. The alternative — scaling
     * every inner value with container units — is a rewrite of two dozen rules
     * to fix a mockup.
     */
    aspect-ratio: auto;
  }
  .phone-screen {
    height: auto;
  }
}

/* ------------------------------------------------------------------ */
/* Sections                                                            */
/* ------------------------------------------------------------------ */

.sec {
  padding: clamp(4rem, 8.5vw, 7.5rem) 0;
}
.sec.alt {
  background: var(--surface-alt);
  border-block: 1px solid var(--border);
}

/* ---- The guarantee band ---- */

.band {
  padding: clamp(4rem, 8.5vw, 7.5rem) 0;
  background: var(--text);
  color: var(--bg);
}
.band .over {
  color: rgba(255, 255, 255, 0.55);
}
.band h2 {
  max-width: 17ch;
}
.band .body {
  color: rgba(255, 255, 255, 0.68);
}
.band em {
  color: #fff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .band {
    background: var(--surface);
    color: var(--text);
  }
  :root:not([data-theme='light']) .band .over {
    color: var(--muted);
  }
  :root:not([data-theme='light']) .band .body {
    color: var(--muted);
  }
  :root:not([data-theme='light']) .band em {
    color: var(--text);
  }
}

.band-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.nots {
  display: grid;
  gap: 0.1rem;
  font-size: 0.9375rem;
}
.nots li {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.72rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.72);
}
.nots li span {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 700;
  flex: none;
  width: 1ch;
}
.nots li.yes {
  border-bottom: 0;
  color: #fff;
  font-weight: 650;
  padding-top: 1.1rem;
}
.nots li.yes span {
  color: #2fd4a0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .nots li {
    border-bottom-color: var(--border);
    color: var(--muted);
  }
  :root:not([data-theme='light']) .nots li span {
    color: var(--faint);
  }
  :root:not([data-theme='light']) .nots li.yes {
    color: var(--text);
  }
  :root:not([data-theme='light']) .nots li.yes span {
    color: var(--pos);
  }
}

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

/* ---- Steps ---- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  margin-top: 3rem;
  counter-reset: step;
}
.steps li {
  border-top: 2px solid var(--border);
  padding-top: 1.4rem;
}
.steps .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.9rem;
}
.steps h3 {
  margin-bottom: 0.5rem;
}
.steps p {
  color: var(--muted);
  font-size: 0.9375rem;
}

@media (max-width: 860px) {
  .steps {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ---- The optimizer comparison ---- */

.compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: stretch;
  margin-top: 3rem;
}

.col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 1.5rem 1.4rem 1.35rem;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}
.col.win {
  border-color: var(--accent-line);
  box-shadow:
    var(--shadow-raised),
    0 0 0 1px var(--accent-line);
}

.col-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.35rem;
}
.col-tag {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.col.win .col-tag {
  color: var(--accent);
}
.col-count {
  font-size: 0.875rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.col-count b {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text);
  margin-right: 0.15rem;
}
.col.win .col-count b {
  color: var(--accent);
}

.pays {
  display: grid;
}
.pays li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.72rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9375rem;
}
.pays li:last-child {
  border-bottom: 0;
}
.who {
  color: var(--text);
  font-weight: 550;
}
.who i {
  font-style: normal;
  color: var(--faint);
  padding: 0 0.15rem;
}
.amt {
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.col.win .amt {
  color: var(--accent);
}
.tangle .who {
  color: var(--muted);
}

.col-foot {
  margin-top: auto;
  padding-top: 1.1rem;
  font-size: 0.8125rem;
  color: var(--faint);
  line-height: 1.5;
}

.arrow {
  align-self: center;
  color: var(--faint);
}
.arrow svg {
  width: 40px;
  height: 24px;
  display: block;
}

@media (max-width: 900px) {
  .compare {
    grid-template-columns: 1fr;
  }
  .arrow {
    justify-self: center;
  }
  .arrow svg {
    transform: rotate(90deg);
  }
}

/* ---- Feature grid ---- */

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 3rem;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.cell {
  background: var(--bg);
  padding: 1.75rem 1.5rem;
}
.cell h3 {
  margin-bottom: 0.55rem;
}
.cell p {
  color: var(--muted);
  font-size: 0.9375rem;
}
.cell.prem {
  background: linear-gradient(180deg, var(--accent-soft), transparent 55%), var(--bg);
}

.cell .tag {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 0.2rem 0.5rem;
  margin-bottom: 0.7rem;
}

@media (max-width: 980px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Trust ---- */

.trust-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.trust-copy {
  position: sticky;
  top: 6rem;
}
.facts {
  display: grid;
  gap: 1.65rem;
}
.facts li {
  padding-left: 1.15rem;
  border-left: 2px solid var(--accent-line);
}
.facts h3 {
  margin-bottom: 0.35rem;
}
.facts p {
  color: var(--muted);
  font-size: 0.9375rem;
}

@media (max-width: 900px) {
  .trust-grid {
    grid-template-columns: 1fr;
  }
  .trust-copy {
    position: static;
  }
}

/* ---- Pricing ---- */

.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
  align-items: start;
}
.plan {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 1.75rem 1.6rem;
  box-shadow: var(--shadow-card);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.plan.feature {
  border-color: var(--accent-line);
  box-shadow:
    var(--shadow-raised),
    0 0 0 1px var(--accent-line);
}
.plan-name {
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.plan.feature .plan-name {
  color: var(--accent);
}
.plan-price {
  margin-top: 0.8rem;
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-variant-numeric: tabular-nums;
}
.plan-price b {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
}
.plan-price span {
  color: var(--muted);
  font-size: 0.9375rem;
}
.plan-sub {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.875rem;
}
.ticks {
  margin: 1.4rem 0 1.4rem;
  display: grid;
  gap: 0.62rem;
  font-size: 0.9375rem;
}
.ticks li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--text);
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 0.66rem;
  height: 0.36rem;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.plan-caps {
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--faint);
  line-height: 1.55;
}
.plan-caps b {
  color: var(--muted);
}

@media (max-width: 980px) {
  .plans {
    grid-template-columns: 1fr;
    max-width: 32rem;
  }
}

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

.faq {
  margin-top: 2.75rem;
  border-top: 1px solid var(--border);
}
.faq details {
  border-bottom: 1px solid var(--border);
}
.faq summary {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.015em;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '';
  flex: none;
  margin-left: auto;
  margin-top: 0.45rem;
  width: 0.62rem;
  height: 0.62rem;
  border-right: 2px solid var(--faint);
  border-bottom: 2px solid var(--faint);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after {
  transform: rotate(-135deg);
  margin-top: 0.7rem;
}
.faq summary:hover {
  color: var(--accent);
}
.faq details p {
  padding: 0 0 1.35rem;
  color: var(--muted);
  max-width: 62ch;
}

/* ---- Final CTA ---- */

.cta {
  padding: clamp(4rem, 8.5vw, 7rem) 0;
  background:
    radial-gradient(38rem 20rem at 50% 0%, var(--accent-soft), transparent 70%), var(--bg);
  border-top: 1px solid var(--border);
}
.cta h2 {
  max-width: none;
}
.cta-lede {
  margin: 1.1rem auto 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: 1.0625rem;
}

/* ---- Footer ---- */

.foot {
  border-top: 1px solid var(--border);
  background: var(--surface-alt);
  padding: 2.75rem 0 0;
}
.foot-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 2.25rem;
}
.foot-brand {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
}
.foot-brand b {
  font-size: 1rem;
  letter-spacing: -0.022em;
}
.foot-brand p {
  color: var(--muted);
  font-size: 0.875rem;
  margin-top: 0.1rem;
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
}
.foot-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.875rem;
}
.foot-links a:hover {
  color: var(--accent);
}
.foot-legal {
  border-top: 1px solid var(--border);
  padding-top: 1.35rem;
  padding-bottom: 1.75rem;
}
.foot-legal p {
  color: var(--faint);
  font-size: 0.78125rem;
}

/* ------------------------------------------------------------------ */
/* Motion                                                              */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}