/* The landing page is a poster. The privacy and support pages are documents.
   site.css is the document stylesheet, shared by all three; this file is what
   the poster needs on top of it, and nothing else loads it.

   Three things it changes, all for the same reason. The app is dark only, so
   the page selling it commits to dark rather than following the visitor's
   theme. The app's own field is wide, so the poster leaves the 44rem reading
   column that a privacy policy should keep. And the app says what a figure
   means with colour, so the page does too. */

body.landing {
  /* Straight from packages/design_system/lib/tokens/app_colors.dart. */
  --bg: #040d1a;
  --bg-top: #071229;
  --surface: #060f1e;
  --dim: #456594;
  --mint: #8fddaa; /* cash, and the runway itself */
  --pink: #e8829e; /* what a month costs */
  --gold: #cb9a3e; /* what you still owe */
  --accent: var(--mint);
  --link: #7fb6ef;
  /* The poster's own: a second surface, and the four cut-paper grounds the
     sections are blocked out in. The app has no use for any of them. */
  --surface-2: #0b1930;
  --violet: #a987ff;
  --paper: #f2efe7;
  --ink: #08142b;
  --violet-field: #6327d4;
  --yellow-field: #f4d84b;
  /* Three of the app's values the poster overrides, each a step lighter. */
  --text: #edf3fa;
  --muted: #9aa9bc;
  --border: #17304e;
  color-scheme: dark;
  background: var(--bg);
}

/* ── The hero: the claim, and the screen that makes it ──────────────────── */
.hero {
  display: grid;
}

.hero h1 {
  text-wrap: balance;
}

@media (max-width: 54rem) {
  .hero {
    grid-template-columns: 1fr;
    gap: 2.25rem;
    margin-bottom: 3.25rem;
  }

  .hero .lede {
    max-width: none;
  }
}

body.landing::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(143, 221, 170, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 221, 170, 0.08) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}
html {
  scroll-behavior: smooth;
}
.landing header.site {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.landing header.site nav {
  margin-left: auto;
}
.landing header.site nav a {
  color: var(--muted);
}
.app-mark {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  box-sizing: border-box;
  padding: 3px;
  overflow: hidden;
  border: 1px solid rgba(143, 221, 170, 0.31);
  border-radius: 10px;
  background: rgba(143, 221, 170, 0.06);
  box-shadow: 0 0 14px 1px rgba(143, 221, 170, 0.1);
  animation: runway-stable-pulse 2800ms ease-in-out infinite alternate;
}
.app-mark-large {
  width: 78px;
  height: 78px;
  border-radius: 22px;
}
.app-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inset(2% round 24%);
}
.review-badge,
.store-status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--muted);
  font-size: 0.83rem;
  white-space: nowrap;
}
.review-badge i,
.store-status i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0.25rem rgba(203, 154, 62, 0.11);
}
.eyebrow,
.step {
  margin: 0 0 1rem;
  color: var(--mint);
  font:
    650 0.74rem/1.2 "JetBrains Mono",
    ui-monospace,
    monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0;
}
.hero .lede {
  margin: 1.6rem 0 0;
  font-size: clamp(1.08rem, 2vw, 1.28rem);
  line-height: 1.6;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 1.5rem;
  margin: 2rem 0;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.2rem;
  padding: 0 1.35rem;
  border-radius: 0.85rem;
  text-decoration: none;
  font-weight: 720;
}
.button.primary {
  color: #06110c;
  background: var(--mint);
  box-shadow: 0 14px 40px rgba(61, 169, 100, 0.2);
}
/* Sits on the cream hero and on the dark sections, so it takes its colour from
   whichever it is on rather than naming a token that is right in only one. */
.button.ghost {
  /* site.css gives every .button the accent fill; ghost has to undo it. */
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  opacity: 0.68;
}
.button.ghost:hover,
.button.ghost:focus-visible {
  opacity: 1;
}

.button.primary:hover {
  color: #06110c;
  transform: translateY(-2px);
}

.device-frame {
  position: relative;
  width: 78%;
  margin-left: auto;
  padding: 0.55rem;
  border: 1px solid rgba(169, 203, 237, 0.28);
  border-radius: 2.2rem;
  background: rgba(6, 15, 30, 0.72);
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.5);
  transform: rotate(2.4deg);
}
.device-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.7rem;
}
.metric-card {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 22%;
  display: grid;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(143, 221, 170, 0.3);
  border-radius: 1rem;
  background: rgba(8, 20, 38, 0.88);
  backdrop-filter: blur(18px);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.38);
}
.metric-card strong {
  color: var(--mint);
  font:
    750 2.35rem/1 "JetBrains Mono",
    ui-monospace,
    monospace;
}
.metric-card span {
  margin-top: 0.28rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.section-heading h2,
.solution-section h2,
.price-intro h2,
.final-cta h2 {
  /* These two were the only section headings left in the body sans. */
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-weight: 400;
  margin: 0;
  font-size: clamp(2rem, 4.5vw, 3.55rem);
  line-height: 1.07;
  letter-spacing: -0.04em;
}

.problem-section {
  border-top: 1px solid var(--border);
}

.solution-section {
  display: grid;
  margin-inline: calc(clamp(1.5rem, 5vw, 5rem) * -1);
  border-block: 1px solid var(--border);
}
.solution-copy > p:not(.eyebrow) {
  line-height: 1.7;
  max-width: 35rem;
}
.input-list {
  display: grid;
  gap: 0.8rem;
  padding: 0;
  margin: 2rem 0 0;
  list-style: none;
}
.input-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.input-list li span {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
}
.mint-dot {
  background: var(--mint);
}
.pink-dot {
  background: var(--pink);
}
.runway-answer {
  min-height: 22rem;
  display: grid;
  align-content: center;
  padding: clamp(2rem, 5vw, 3.5rem);
  border: 1px solid rgba(143, 221, 170, 0.25);
  border-radius: 1.5rem;
  background:
    radial-gradient(circle at 72% 18%, rgba(143, 221, 170, 0.13), transparent 16rem),
    linear-gradient(145deg, rgba(11, 25, 48, 0.96), rgba(6, 15, 30, 0.9));
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.34),
    inset 0 1px rgba(255, 255, 255, 0.03);
}
.runway-answer > p {
  margin: 0 0 1rem;
  color: var(--muted);
  font:
    0.7rem "JetBrains Mono",
    ui-monospace,
    monospace;
  letter-spacing: 0.16em;
}
.runway-number {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
}
.runway-number strong {
  color: var(--mint);
  font:
    800 clamp(5.5rem, 11vw, 8rem)/0.85 "JetBrains Mono",
    ui-monospace,
    monospace;
  letter-spacing: -0.1em;
}
.runway-number > span {
  color: var(--mint);
  font:
    0.95rem "JetBrains Mono",
    ui-monospace,
    monospace;
}
.runway-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.runway-meta small {
  color: var(--muted);
}
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(143, 221, 170, 0.31);
  border-radius: 0.3rem;
  color: var(--mint);
  background: rgba(143, 221, 170, 0.06);
  font:
    650 0.66rem/1 "JetBrains Mono",
    ui-monospace,
    monospace;
  letter-spacing: 0.08em;
}
.status-badge i {
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 0.08rem;
  background: var(--mint);
  box-shadow: 0 0 10px rgba(143, 221, 170, 0.32);
}

.pricing-section {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 4rem;
}
.price-intro h2 span {
  color: var(--mint);
}
.price-intro > p:not(.eyebrow) {
  max-width: 26rem;
  color: var(--muted);
  line-height: 1.65;
}
.price-intro .store-status {
  margin-top: 1rem;
}
.plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.plans article {
  padding: 1.6rem;
  border: 1px solid var(--border);
  background: rgba(4, 13, 26, 0.55);
}
.plans article.pro {
  border-color: rgba(143, 221, 170, 0.35);
}
.plans article > p {
  color: var(--violet);
  font:
    0.7rem "JetBrains Mono",
    ui-monospace,
    monospace;
  letter-spacing: 0.12em;
}
.plans .pro > p {
  color: var(--mint);
}
.plans h3 {
  font-size: 1.15rem;
}
.plans ul {
  display: grid;
  gap: 0.75rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.plans li {
  color: var(--muted);
  font-size: 0.88rem;
}
.plans li::before {
  content: "✓";
  margin-right: 0.55rem;
}
.founder {
  max-width: 58rem;
  margin: 0 auto 7rem;
  text-align: center;
}
.founder blockquote {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.45;
  letter-spacing: -0.025em;
}
/* Marks rather than characters, so the sentence stays byte-identical to the
   one in the submission and can be grepped against it. */
.founder blockquote::before,
.founder blockquote::after {
  /* The quote is set in the body sans; the marks take the display face, and
     a muted colour so they frame the sentence without competing with it.
     Not mint: mint means cash everywhere else on this page. */
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  color: var(--muted);
  font-size: 1.35em;
  line-height: 0;
}
.founder blockquote::before {
  content: "\201C";
}
.founder blockquote::after {
  content: "\201D";
}
.final-cta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem 2rem;
  align-items: center;
  margin-bottom: 2rem;
}
.final-cta .eyebrow {
  margin-bottom: 0.45rem;
}
.final-cta h2 {
  font-size: clamp(1.6rem, 3vw, 2.35rem);
}
.final-cta div > p:last-child {
  margin: 0.5rem 0 0;
  color: var(--muted);
}

@keyframes runway-stable-pulse {
  from {
    box-shadow: 0 0 14px 1px rgba(143, 221, 170, 0.1);
  }
  to {
    box-shadow: 0 0 14px 1px rgba(143, 221, 170, 0.32);
  }
}

@media (max-width: 64rem) {
  .pricing-section {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 48rem) {
  .landing header.site {
    flex-wrap: wrap;
    gap: 0.8rem 1rem;
  }
  .landing header.site nav {
    order: 3;
    width: 100%;
    gap: 1rem;
  }
  .hero {
    min-height: auto;
    padding: 4rem 0 5rem;
    gap: 4rem;
  }
  .hero h1 {
    font-size: clamp(3rem, 14vw, 4.3rem);
  }
  .problem-grid,
  .problem-contrast,
  .solution-section,
  .story,
  .pricing-section,
  .plans,
  .final-cta {
    grid-template-columns: 1fr;
  }
  .solution-section {
    gap: 3rem;
  }
  .runway-answer {
    min-height: 21rem;
  }
  .pricing-section {
    padding: 1.4rem;
    gap: 2.5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .app-mark {
    box-shadow: 0 0 14px 1px rgba(143, 221, 170, 0.18);
  }
}

/* Editorial direction: the product moves through the story instead of sitting
   inside a stack of equal cards. Shapes borrow the app icon's angles and the
   runway number remains the visual anchor. */
body.landing::before {
  display: none;
}
/* No cap. The sections are colour blocks that run to the edges, and an 88rem
   wrap stopped them short of the screen on a wide monitor, leaving the page
   ground showing down both sides. The reading widths are set on the copy
   itself, so the text does not stretch with the window. */
body.landing .wrap {
  max-width: none;
  padding: 1.15rem clamp(1rem, 2.6vw, 2.4rem) 3rem;
}

/* A plain header. It floated, with two colour states and a blur, to keep a
   wordmark, three links and a status badge in reach: nothing to act on, over
   the section showing the product. It earns the sticky back when it has an
   App Store link to carry. */
.landing header.site {
  margin: 0;
  padding: 0.75rem 1rem 0.75rem 1.2rem;
}
.landing header.site .brand,
.landing header.site nav a {
  color: #f3f5fa;
}
.landing header.site .brand > span:last-child {
  color: var(--mint);
}
.landing header.site .review-badge {
  color: #b8c3d1;
}

.hero {
  min-height: 43rem;
  grid-template-columns: minmax(0, 1.05fr) minmax(23rem, 0.95fr);
  gap: 0;
  align-items: stretch;
  margin: -5.55rem calc(clamp(1rem, 2.6vw, 2.4rem) * -1) 0;
  padding: 5.55rem 0 0;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(4rem, 7vw, 7rem) clamp(2rem, 6vw, 6.5rem);
  color: var(--ink);
  background: var(--paper);
}
.hero-copy .eyebrow {
  color: #596379;
}
.hero h1 {
  max-width: 10.5ch;
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(3.7rem, 7vw, 6.5rem);
  line-height: 0.92;
  letter-spacing: -0.065em;
}
.hero .lede {
  max-width: 33rem;
  color: #49546a;
}

.hero .button.primary {
  color: var(--ink);
  box-shadow: none;
}
/* Cut paper, not a pill. The shape lives on a ::before rather than on the
   link, because clip-path clips everything including the focus ring, and a
   button a keyboard cannot see is worse than a round one. Keeping the link
   itself unclipped also keeps the whole rectangle clickable, so the torn
   corners are not dead. The script re-cuts it on hover. */
.hero-actions .button.primary {
  position: relative;
  isolation: isolate;
  background: transparent;
  box-shadow: none;
  transition: transform 180ms ease;
}
.hero-actions .button.primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--mint);
  clip-path: var(--cta-cut, polygon(2% 12%, 97% 0%, 100% 82%, 4% 100%));
  transition: clip-path 260ms ease;
}
.hero-actions .button.primary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}
.hero .store-status {
  color: #657087;
}

.hero-field {
  position: relative;
  min-height: 43rem;
  overflow: hidden;
  background: var(--violet-field);
  isolation: isolate;
}
.hero-shape {
  position: absolute;
  z-index: -2;
  inset: 13% -24% auto -11%;
  height: 72%;
  border-radius: 52% 35% 47% 41%;
  background: var(--mint);
  transform: rotate(-8deg);
  animation: hero-field-drift 8s ease-in-out infinite alternate;
}
.hero-shard {
  position: absolute;
  z-index: -1;
  right: -5rem;
  bottom: -7rem;
  width: 23rem;
  height: 23rem;
  background: var(--yellow-field);
  clip-path: polygon(0 48%, 100% 0, 77% 100%);
}
.hero-field .device-frame {
  position: absolute;
  left: 9%;
  top: 13%;
  width: min(55%, 18rem);
  margin: 0;
  padding: 0.52rem;
  border-color: rgba(255, 255, 255, 0.13);
  border-radius: 2.55rem;
  background: #020916;
  transform: rotate(-4deg);
  animation: hero-device-float 5s ease-in-out infinite;
}
.hero-field .device-frame img {
  border-radius: 2rem;
}
.hero-field .metric-card {
  left: auto;
  right: 6%;
  top: 25%;
  width: min(46%, 17rem);
  padding: 1.35rem;
  border: 0;
  border-radius: 1rem;
  color: var(--ink);
  background: #f8f7f2;
  box-shadow: 0 1.8rem 4.5rem rgba(3, 7, 22, 0.34);
  transform: rotate(5deg);
  backdrop-filter: none;
}
.hero-field .metric-card span {
  order: -1;
  margin: 0;
  color: #657087;
  font:
    0.68rem "JetBrains Mono",
    ui-monospace,
    monospace;
  letter-spacing: 0.12em;
}
.hero-field .metric-card strong {
  margin: 0.65rem 0 0.2rem;
  color: var(--ink);
  font-size: clamp(2.4rem, 5vw, 4rem);
  letter-spacing: -0.08em;
}
.hero-field .metric-card small {
  color: #657087;
  font-size: 0.76rem;
}

.problem-section {
  margin-inline: calc(clamp(1rem, 2.6vw, 2.4rem) * -1);
  padding: clamp(5.5rem, 9vw, 8.5rem) clamp(2rem, 7vw, 7rem);
  border: 0;
  background: #0b1831;
  overflow: hidden;
}
.life-transition {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(16rem, 0.55fr);
  gap: clamp(3rem, 9vw, 9rem);
  align-items: end;
  min-height: 30rem;
  isolation: isolate;
}
.life-copy {
  position: relative;
  z-index: 2;
  align-self: start;
}
.life-copy .eyebrow {
  margin-bottom: 1rem;
}
.life-copy h2 {
  max-width: 13ch;
  margin: 0;
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(3.4rem, 7vw, 6.6rem);
  line-height: 0.91;
  letter-spacing: -0.065em;
}
.life-context {
  position: relative;
  z-index: 2;
  /* This line's colour is chosen for the dark ground, where it sits at
     10.1:1. A cut shape travels behind it and one of them is bright yellow,
     where the same colour falls to 1.29:1 and the words all but vanish. A
     soft glow cannot lift that, so the shadow is dense enough to put a dark
     ground behind each glyph rather than to soften its edge. */
  text-shadow:
    0 0 3px rgba(4, 13, 26, 1),
    0 0 6px rgba(4, 13, 26, 1),
    0 0 12px rgba(4, 13, 26, 0.9);
  max-width: 28rem;
  margin: 0 0 1.25rem;
  color: #b9c5d5;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.65;
}
.cut-shape {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.cut-leaf {
  right: 8%;
  top: -2rem;
  width: 11rem;
  height: 19rem;
  background: var(--mint);
  clip-path: polygon(
    48% 0,
    70% 24%,
    64% 43%,
    91% 62%,
    61% 70%,
    48% 100%,
    35% 71%,
    4% 63%,
    33% 43%,
    27% 21%
  );
  transform: rotate(13deg);
}
.cut-star {
  right: 37%;
  top: 5.5rem;
  width: 7rem;
  height: 7rem;
  background: #f08b72;
  clip-path: polygon(
    50% 0,
    61% 35%,
    96% 20%,
    72% 49%,
    100% 67%,
    63% 64%,
    59% 100%,
    44% 68%,
    11% 87%,
    29% 55%,
    0 39%,
    38% 39%
  );
  transform: rotate(-14deg);
}
.cut-ribbon {
  left: 39%;
  bottom: -1.5rem;
  width: 23rem;
  height: 7rem;
  background: var(--yellow-field);
  clip-path: polygon(0 48%, 24% 4%, 52% 34%, 79% 2%, 100% 42%, 76% 82%, 48% 59%, 20% 100%);
  transform: rotate(-5deg);
}
.question-shift {
  position: relative;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
  max-width: 66rem;
  margin: 7rem auto 0;
  padding-block: 3rem 1rem;
}
.question-shift .answer::before {
  content: "";
  position: absolute;
  left: -1rem;
  top: 0;
  width: 2rem;
  height: 2rem;
  background: var(--mint);
  clip-path: polygon(
    50% 3%,
    61% 29%,
    87% 14%,
    71% 47%,
    97% 58%,
    71% 66%,
    74% 98%,
    52% 75%,
    24% 94%,
    30% 64%,
    1% 66%,
    25% 44%,
    10% 24%,
    39% 27%
  );
}
.question-shift .eyebrow {
  color: #a4b2c5;
  margin-bottom: 1rem;
  line-height: 1.6;
}
.question-shift > div > p:last-child {
  margin: 0;
  max-width: 15ch;
  color: #b5bfd0;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  line-height: 1.2;
}
.question-shift .answer {
  position: relative;
  padding: 2.8rem 0 1rem 2.5rem;
  border-left: 1px solid rgba(143, 221, 170, 0.4);
}
.question-shift .answer .eyebrow {
  color: var(--mint);
}
.question-shift .answer p:last-child {
  max-width: 12ch;
  color: var(--mint);
  font:
    400 clamp(3rem, 5.5vw, 5rem)/1.02 "Newsreader",
    Georgia,
    "Times New Roman",
    serif;
  letter-spacing: -0.045em;
}

.solution-section {
  position: relative;
  grid-template-columns: 0.88fr 1.12fr;
  gap: 0;
  align-items: stretch;
  min-height: 38rem;
  margin: 0 calc(clamp(1rem, 2.6vw, 2.4rem) * -1);
  padding: 0;
  border: 0;
  color: var(--ink);
  background: var(--mint);
  overflow: hidden;
}
.solution-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(4rem, 8vw, 7rem) clamp(2rem, 6vw, 6rem);
}
.solution-copy .eyebrow {
  color: #285f42;
}
.solution-section h2 {
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(2.8rem, 5vw, 4.7rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}
.solution-copy > p:not(.eyebrow) {
  color: #244538;
}
.solution-copy .input-list li {
  color: #040d1a;
  text-shadow: 0 1px 2px rgba(4, 13, 26, 0.16);
}
.solution-copy .input-list li span {
  flex-shrink: 0;
  box-shadow:
    0 0 0 2px #040d1a,
    0 2px 5px rgba(4, 13, 26, 0.2);
}
.solution-copy .mint-dot {
  background: #8fddaa;
}
.solution-copy .pink-dot {
  background: #e8829e;
}
.solution-copy .blue-dot {
  background: #5b9dc4;
}
.story-field {
  position: relative;
  min-height: 38rem;
  background: var(--violet-field);
  overflow: hidden;
}
.story-shape {
  left: -7rem;
  top: 4rem;
  width: 18rem;
  height: 28rem;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 17%, 74% 100%, 13% 79%);
}
.story-field .runway-answer {
  position: absolute;
  inset: 11% 8% 9% 12%;
  min-height: 0;
  padding: clamp(2rem, 5vw, 3.6rem);
  border: 0;
  border-radius: 1.25rem;
  color: var(--ink);
  background: #f6f3ea;
  box-shadow: 0 2.2rem 5.5rem rgba(5, 4, 18, 0.35);
  transform: rotate(3deg);
}
.runway-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.monthly-breakdown {
  margin-bottom: 1.3rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid #cbc8be;
}
.monthly-label {
  display: flex;
  justify-content: space-between;
  margin: 0 0 0.9rem;
  color: #657087;
  font:
    0.65rem "JetBrains Mono",
    ui-monospace,
    monospace;
  letter-spacing: 0.12em;
}
.monthly-label span {
  letter-spacing: 0;
}
.monthly-breakdown dl {
  display: grid;
  gap: 0.65rem;
  margin: 0;
}
.monthly-breakdown dl > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.monthly-breakdown dt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
}
.monthly-breakdown dd {
  margin: 0;
  font:
    0.9rem "JetBrains Mono",
    ui-monospace,
    monospace;
  font-variant-numeric: tabular-nums;
}
.monthly-breakdown i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.rent-dot {
  background: #5b9dc4;
}
.living-dot {
  background: #e8829e;
}
.subscription-dot {
  background: #bb6dff;
}
.loan-dot {
  background: #cb9a3e;
}
.runway-heading > p {
  margin: 0;
  color: #657087;
  font:
    0.7rem "JetBrains Mono",
    ui-monospace,
    monospace;
  letter-spacing: 0.16em;
}
.story-field .runway-number {
  margin-top: auto;
}
.story-field .runway-number strong {
  color: var(--ink);
}
.story-field .runway-number > span {
  color: #285f42;
}
.story-field .runway-meta {
  border-color: #cbc8be;
}
.story-field .runway-meta small {
  color: #657087;
}
.story-field .status-badge {
  border: 0;
  color: #1c5735;
  background: #d7f6e2;
}

.stories {
  margin-inline: calc(clamp(1rem, 2.6vw, 2.4rem) * -1);
  padding: 8rem 0 0;
  overflow: clip;
  background: #071329;
}
.story-intro {
  padding: 0 clamp(2rem, 7vw, 7rem) 4rem;
}
.story-intro > p {
  margin: 0 0 1rem;
  color: var(--mint);
  font:
    0.72rem "JetBrains Mono",
    ui-monospace,
    monospace;
  letter-spacing: 0.17em;
}
.story-intro h2 {
  max-width: 14ch;
  margin: 0;
  font:
    400 clamp(3rem, 6vw, 5.7rem)/0.94 "Newsreader",
    Georgia,
    "Times New Roman",
    serif;
  letter-spacing: -0.055em;
}
.story-intro > span {
  display: block;
  max-width: 39rem;
  margin-top: 1.5rem;
  color: var(--muted);
  line-height: 1.65;
}
.story-scroll {
  position: relative;
  display: grid;
  grid-template-columns: minmax(25rem, 1.08fr) minmax(20rem, 0.92fr);
  align-items: start;
  border-top: 1px solid var(--border);
}
.story-product-stage {
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  min-height: 100vh;
  overflow: hidden;
  background: #0d1c37;
}
.story-shape {
  position: absolute;
  pointer-events: none;
}
.story-shape-field {
  width: 26rem;
  height: 31rem;
  left: 9%;
  top: 9%;
  background: var(--mint);
  opacity: 0.92;
  clip-path: polygon(7% 8%, 88% 0, 100% 77%, 18% 100%);
  transform: rotate(-5deg);
}
.story-shape-star {
  width: 12rem;
  height: 12rem;
  right: 4%;
  bottom: 4%;
  background: var(--violet);
  clip-path: polygon(
    50% 0,
    60% 37%,
    94% 20%,
    72% 49%,
    100% 67%,
    63% 64%,
    59% 100%,
    44% 68%,
    11% 87%,
    29% 55%,
    0 39%,
    38% 39%
  );
  opacity: 0.82;
}
.story-phone {
  position: relative;
  z-index: 2;
  width: min(46%, 21rem);
  aspect-ratio: 720/1564;
  filter: drop-shadow(0 2.2rem 2.5rem rgba(0, 0, 0, 0.42));
  transform: rotate(-2deg);
}
.story-screen {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2.7rem;
  opacity: 0;
  translate: 0 1rem;
  transition:
    opacity 0.3s ease,
    translate 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.story-screen.is-active {
  opacity: 1;
  translate: 0 0;
}
.story-detail-frame {
  position: absolute;
  z-index: 3;
  right: 4%;
  top: 13%;
  width: 13.5rem;
  padding: 1rem;
  color: #071329;
  background: #f4f0e7;
  box-shadow: 0 1.3rem 2.6rem rgba(0, 0, 0, 0.3);
  transform: rotate(3deg);
}
.story-detail-crop {
  position: relative;
  height: 7.4rem;
  overflow: hidden;
  border: 1px solid rgba(7, 19, 41, 0.12);
}
.story-detail-image {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: 300% auto;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.story-detail-image.is-active {
  opacity: 1;
}
.detail-living {
  background-image: url("../assets/device/02-living.png");
  background-position: 0% 65%;
  background-size: 185% auto;
}
.detail-log {
  background-image: url("../assets/device/03-log.png");
  background-position: 50% 87%;
  background-size: 118% auto;
}
.detail-plan {
  background-image: url("../assets/device/04-plan.png");
  background-position: 19% 67%;
  background-size: 175% auto;
}
.story-detail-frame p {
  /* Stated, not inherited: it was resolving to a near-white on the frame's
     cream, which made the label a ghost. */
  color: #071329;
  margin: 0.75rem 0 0;
  font:
    0.72rem "JetBrains Mono",
    ui-monospace,
    monospace;
  letter-spacing: 0.1em;
}
.story-copy-stage {
  position: relative;
  min-height: 330vh;
  padding: 0 clamp(1.5rem, 4vw, 4rem) 85vh;
}
.story-point-stack {
  position: sticky;
  z-index: 4;
  top: 4.5rem;
  background: #071329;
}
.story-progress {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.3rem 0;
  color: var(--muted);
  font:
    0.72rem "JetBrains Mono",
    ui-monospace,
    monospace;
  letter-spacing: 0.13em;
}
.story-progress span {
  color: var(--mint);
}
.story-progress i {
  display: block;
  flex: 1;
  height: 1px;
  background: var(--border);
}
/* Revealing a step must not change this box's height. .story-point-stack is
   sticky, so it still takes its normal-flow space, and .story-triggers sits
   after it: a step that opened pushed every trigger down, and the script
   decides which step is current by testing those same triggers. So showing a
   step moved the trigger that had just qualified back out of range, the next
   scroll event un-showed it, and that moved it back in. The two states
   alternated for as long as scroll events kept arriving, which on a phone is
   about a second after a flick and on a trackpad is as long as the momentum
   runs. The thing being measured was moved by the outcome of the measurement.

   So the steps hold their space and only fade. The space costs nothing to
   look at: .story-point-stack is the same colour as .stories behind it, and
   on a phone it is transparent. */
.story-point {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 1.35rem 0.5rem 1.35rem 3.4rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid transparent;
  color: var(--muted);
  opacity: 0;
  translate: 0 1rem;
  transition:
    opacity 0.28s ease,
    translate 0.35s ease,
    color 0.2s ease;
}
.story-point.is-shown {
  opacity: 1;
  translate: 0 0;
}
/* Only the closing step draws its lower rule, and it is held in the box from
   the start so that drawing it does not add a pixel. */
.story-point.is-shown:last-child {
  border-bottom-color: var(--border);
}
.story-point::before {
  content: attr(data-index);
  position: absolute;
  left: 0.1rem;
  top: 1.8rem;
  color: var(--violet);
  font:
    0.72rem "JetBrains Mono",
    ui-monospace,
    monospace;
  letter-spacing: 0.08em;
}
.story-point[aria-current="step"] {
  padding-left: 4.1rem;
  color: var(--text);
}
.story-point[aria-current="step"]::after {
  content: "";
  position: absolute;
  left: 2.2rem;
  top: 1.9rem;
  width: 0.75rem;
  height: 0.75rem;
  background: var(--mint);
  clip-path: polygon(
    50% 0,
    61% 35%,
    96% 20%,
    72% 49%,
    100% 67%,
    63% 64%,
    59% 100%,
    44% 68%,
    11% 87%,
    29% 55%,
    0 39%,
    38% 39%
  );
}
.story-point h3 {
  margin: 0 0 0.5rem;
  color: inherit;
  font:
    400 clamp(1.4rem, 2.5vw, 2rem)/1.05 "Newsreader",
    Georgia,
    "Times New Roman",
    serif;
}
.story-point p {
  max-width: 29rem;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
}
.story-triggers {
  margin-top: 34vh;
}
.story-trigger {
  display: block;
  min-height: 76vh;
}

.trust-section {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(20rem, 1.2fr);
  gap: clamp(3rem, 7vw, 7rem);
  position: relative;
  margin-inline: calc(clamp(1rem, 2.6vw, 2.4rem) * -1);
  padding: clamp(4.5rem, 8vw, 7rem) clamp(2rem, 7vw, 7rem);
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}
.trust-intro {
  position: relative;
  z-index: 1;
  align-self: start;
}
.trust-kicker {
  margin: 0 0 1.25rem;
  color: #285f42;
  font:
    0.72rem "JetBrains Mono",
    ui-monospace,
    monospace;
  letter-spacing: 0.17em;
}
.trust-intro h2 {
  max-width: 10ch;
  margin: 0;
  font:
    400 clamp(3rem, 6vw, 5.7rem)/0.93 "Newsreader",
    Georgia,
    "Times New Roman",
    serif;
  letter-spacing: -0.055em;
}
.trust-summary {
  max-width: 31rem;
  margin: 2rem 0 0;
  color: #566076;
  font-size: 1.02rem;
  line-height: 1.65;
}
.trust-star {
  position: absolute;
  left: -4.5rem;
  top: -4.75rem;
  width: 9rem;
  height: 9rem;
  background: var(--mint);
  opacity: 0.62;
  clip-path: polygon(50% 0, 59% 39%, 100% 50%, 59% 60%, 50% 100%, 40% 60%, 0 50%, 40% 39%);
  transform: rotate(14deg);
  z-index: -1;
}
.trust-scene {
  position: relative;
  min-height: 36rem;
}
.trust-scene article {
  position: absolute;
}
.trust-scene h3 {
  margin: 0 0 0.45rem;
  font:
    500 clamp(1.35rem, 2.5vw, 2rem)/1.08 "Newsreader",
    Georgia,
    "Times New Roman",
    serif;
  letter-spacing: -0.03em;
}
.trust-scene p {
  max-width: 25rem;
  margin: 0;
  color: #566076;
  font-size: 0.9rem;
  line-height: 1.55;
}
.trust-device {
  inset: 0 0 auto 8%;
  width: min(28rem, 85%);
}
.privacy-visual {
  position: relative;
  width: 100%;
  height: 18.5rem;
  margin-bottom: 1.4rem;
  overflow: hidden;
  background: #d7f6e3;
  clip-path: polygon(0 13%, 88% 0, 100% 74%, 18% 100%);
}
.privacy-orbit {
  position: absolute;
  width: 18rem;
  height: 18rem;
  left: 48%;
  top: 48%;
  border: 1px solid rgba(11, 24, 49, 0.28);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.privacy-orbit::after {
  content: "";
  position: absolute;
  inset: 2.4rem;
  border: 1px dashed rgba(11, 24, 49, 0.2);
  border-radius: 50%;
}
.privacy-phone {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6.8rem;
  height: 11.6rem;
  border: 0.33rem solid #0b1831;
  border-radius: 1.55rem;
  background: #f2efe7;
  transform: translate(-50%, -50%) rotate(7deg);
  box-shadow: 0.8rem 1rem 0 rgba(43, 98, 255, 0.16);
}
.privacy-phone::before {
  content: "";
  position: absolute;
  width: 2rem;
  height: 0.28rem;
  left: 50%;
  top: 0.6rem;
  border-radius: 1rem;
  background: #0b1831;
  transform: translateX(-50%);
}
.privacy-phone i {
  position: absolute;
  inset: 3.3rem 1.65rem auto;
  aspect-ratio: 1;
  background: #8fddaa;
  clip-path: polygon(
    50% 3%,
    61% 29%,
    87% 14%,
    71% 47%,
    97% 58%,
    71% 66%,
    74% 98%,
    52% 75%,
    24% 94%,
    30% 64%,
    1% 66%,
    25% 44%,
    10% 24%,
    39% 27%
  );
  transform: rotate(-12deg);
}
.privacy-spark {
  position: absolute;
  right: 13%;
  top: 18%;
  width: 3.6rem;
  height: 3.6rem;
  background: #bb6dff;
  clip-path: polygon(
    50% 0,
    61% 35%,
    96% 20%,
    72% 49%,
    100% 67%,
    63% 64%,
    59% 100%,
    44% 68%,
    11% 87%,
    29% 55%,
    0 39%,
    38% 39%
  );
  transform: rotate(16deg);
}
.trust-bank {
  right: -2%;
  bottom: 0;
  display: grid;
  grid-template-columns: 7.5rem minmax(12rem, 18rem);
  align-items: center;
  gap: 1.25rem;
  padding: 0.9rem 1.5rem 0.9rem 0.9rem;
  background: #0b1831;
  color: #f2efe7;
  transform: rotate(-2.5deg);
}
.trust-bank p {
  color: #aebbd0;
}
.bank-visual {
  position: relative;
  height: 7rem;
  overflow: hidden;
  background: #2b62ff;
}
/* A solid fill, and centred against its own box. A stroke cannot survive the
   clip-path: the border is drawn and then cut, which left a blue square with a
   sliver of roof, and every other shape on this page is a fill anyway. Fixed
   offsets did not survive either, because the box is a different size on a
   phone and they left the bank low and left with dead blue around it. */
.bank-visual span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68%;
  aspect-ratio: 4.8 / 3.7;
  transform: translate(-50%, -50%);
  background: #f2efe7;
  clip-path: polygon(
    50% 0%,
    100% 26%,
    100% 36%,
    90% 36%,
    90% 82%,
    100% 82%,
    100% 100%,
    0% 100%,
    0% 82%,
    10% 82%,
    10% 36%,
    0% 36%
  );
}
/* The columns, cut out of the silhouette in the ground colour. */
.bank-visual span::before {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  top: 40%;
  height: 40%;
  background: repeating-linear-gradient(90deg, #2b62ff 0 0.18rem, transparent 0.18rem 0.58rem);
}
/* Long enough to cross the icon at any box size, struck through the middle. */
.bank-visual i {
  position: absolute;
  width: 124%;
  height: 0.28rem;
  left: 50%;
  top: 50%;
  background: #e8829e;
  transform: translate(-50%, -50%) rotate(-38deg);
  box-shadow: 0 0 0 0.12rem #2b62ff;
}

.pricing-section {
  margin: 0 calc(clamp(1rem, 2.6vw, 2.4rem) * -1) 7rem;
}

@keyframes hero-device-float {
  0%,
  100% {
    transform: translateY(0) rotate(-4deg);
  }
  50% {
    transform: translateY(-0.7rem) rotate(-3deg);
  }
}
@keyframes hero-field-drift {
  from {
    transform: translate(-1%, 0) rotate(-8deg);
  }
  to {
    transform: translate(2%, -2%) rotate(-5deg);
  }
}

@media (max-width: 64rem) {
  .hero h1 {
    font-size: clamp(3.5rem, 8vw, 5rem);
  }
  .life-transition {
    grid-template-columns: 1fr;
    min-height: 36rem;
  }
  .life-context {
    margin-left: auto;
  }
  .cut-leaf {
    right: 4%;
  }
  .cut-star {
    right: 31%;
  }
  .cut-ribbon {
    left: 18%;
  }
  .trust-section {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
  .trust-intro h2 {
    max-width: 13ch;
  }
  .trust-scene {
    max-width: 43rem;
    width: 100%;
    margin-inline: auto;
  }
}
@media (max-width: 48rem) {
  body.landing .wrap {
    padding-inline: 0.75rem;
  }
  /* Below 48rem the nav links are hidden, which leaves a sticky bar holding a
     wordmark and a review badge: no navigation and nothing to act on, for
     about a tenth of the viewport on every screen of a very long page. So on
     a phone it is a normal header and scrolls away. It earns the sticky back
     when it has the App Store link to carry. */
  .landing header.site {
    padding: 0.65rem 0.75rem;
  }
  .landing header.site nav {
    display: none;
  }
  /* The header wraps here, and margin-left:auto sent the badge to the far
     right of its own row, under a brand sitting at the far left. Once it has
     wrapped it is a second line, so it starts where the first line starts. */
  .review-badge {
    margin-left: 0;
  }
  .hero {
    grid-template-columns: 1fr;
    margin-inline: -0.75rem;
    padding-top: 5.55rem;
  }
  .hero-copy {
    padding: 5rem 1.5rem;
  }
  .hero-field {
    min-height: 38rem;
  }
  .hero-field .device-frame {
    left: 5%;
    width: 58%;
  }
  /* Lower, so it overlaps the phone's lower half rather than the runway
     number, which is the one thing the screenshot is there to show. */
  .hero-field .metric-card {
    right: 4%;
    top: 50%;
    width: 48%;
    padding: 1rem;
  }
  .problem-section,
  .solution-section,
  .trust-section,
  .pricing-section {
    margin-inline: -0.75rem;
  }
  .problem-section,
  .trust-section {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .life-transition {
    min-height: 39rem;
    gap: 2rem;
  }
  .life-copy h2 {
    font-size: clamp(3.2rem, 15vw, 5rem);
  }
  .life-context {
    max-width: 23rem;
  }
  .cut-leaf {
    top: 12rem;
    right: -3rem;
    width: 8rem;
    height: 14rem;
  }
  .cut-star {
    top: 18rem;
    right: 31%;
    width: 5rem;
    height: 5rem;
  }
  .cut-ribbon {
    left: -3rem;
    bottom: 10rem;
    width: 19rem;
    height: 6rem;
  }
  .question-shift {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-top: 4rem;
  }
  .question-shift .answer {
    margin-left: 1rem;
    padding-left: 1.5rem;
  }
  .solution-section {
    grid-template-columns: 1fr;
  }
  .story-field {
    min-height: 33rem;
  }
  .story-field .runway-answer {
    inset: 9% 6% 8% 8%;
  }
  .stories {
    padding-top: 6rem;
  }
  .trust-section {
    padding-block: 4.5rem;
  }
  .trust-star {
    left: auto;
    right: -3rem;
    top: -3rem;
  }
  .trust-scene {
    min-height: 40rem;
  }
  .trust-device {
    left: 0;
    width: 100%;
  }
  .trust-bank {
    right: 0;
    grid-template-columns: 6rem minmax(10rem, 18rem);
  }
}
@media (max-width: 32rem) {
  .hero-field {
    min-height: 34rem;
  }
  .hero-field .metric-card strong {
    font-size: 2.1rem;
  }
  .hero-field .metric-card small {
    font-size: 0.67rem;
  }
  .trust-scene {
    min-height: 43rem;
  }
  .privacy-visual {
    height: 17rem;
  }
  .trust-bank {
    left: 0.5rem;
    right: -0.5rem;
    grid-template-columns: 5.5rem 1fr;
    padding-right: 1rem;
  }
  .bank-visual {
    height: 6rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-field .device-frame,
  .hero-shape {
    animation: none;
  }
}

/* ── The scroll stage on a phone ──────────────────────────────────────────
   This section shipped with no rules below 48rem, so its two columns kept
   their 25rem and 20rem minimums on a 390px screen: the copy column began
   past the right edge and .stories{overflow:clip} cut it away, so the text
   was not off-screen but unreachable.

   Layout only. The stage, the triggers and the reveal are the same objects
   doing the same job as on a wide screen, stacked instead of side by side,
   so there is one behaviour to maintain rather than two. */
@media (max-width: 48rem) {
  /* Stacked, only the phone pins. The copy scrolls up and passes behind it,
     which is why the stage sits above the copy and carries its own ground.
     The stage is bounded and the phone sized to fit inside it: an earlier
     version let the stage grow past its own sticky offset, and the copy panel
     ended up pinned inside the thing it was describing. */
  .story-scroll {
    grid-template-columns: 1fr;
  }
  .story-product-stage {
    position: sticky;
    top: 0;
    z-index: 3;
    min-height: 44vh;
    max-height: 44vh;
    padding: 0;
  }
  .story-phone {
    width: min(38%, 10rem);
  }
  /* Centred over the phone. On a phone the screenshot reads as a ground and
     this frame is the thing being looked at, so it stops hiding in a corner
     against the edge of the screen. */
  .story-detail-frame {
    left: 58%;
    right: auto;
    top: 24%;
    width: 11rem;
    padding: 0.7rem;
    transform: translateX(-50%) rotate(3deg);
  }
  .story-detail-crop {
    height: 5.4rem;
  }
  /* Pinned directly under the stage, which is exactly 44vh here, so the
     points stay readable beside the phone instead of scrolling off while the
     triggers carry the remaining scroll. Below the stage in the stacking
     order, so a revealed point passes behind the phone, not over it. */
  .story-point-stack {
    top: 44vh;
    z-index: 1;
    background: transparent;
  }
  .story-copy-stage {
    min-height: 0;
    padding: 1.5rem 1.25rem 24vh;
  }
  /* Three discrete steps, so the scroll comes to rest on one of them rather
     than halfway between two. Only the triggers carry a snap point, so the
     rest of the page scrolls normally, and proximity rather than mandatory
     because a mandatory container pulls the reader back toward a step every
     time they try to leave the section.

     scroll-margin-top decides where a step settles: the snap area starts
     40vh above the trigger, so at rest the trigger's top sits 40vh down the
     screen. The script makes a trigger current at 62vh, so a resting step is
     22vh clear of the line it is being tested against, and the position the
     scroll settles on is never the boundary itself. */
  html {
    scroll-snap-type: y proximity;
  }
  .story-trigger {
    min-height: 52vh;
    scroll-snap-align: start;
    scroll-margin-top: 40vh;
  }
  /* The closing block collapsed to one column, which gave the mark a whole
     row to itself with the width beside it empty. It sits next to the words
     it belongs to, and the store line takes the row under both. */
  .final-cta {
    grid-template-columns: auto 1fr;
    gap: 1rem 1.1rem;
    align-items: center;
  }
  /* The button replaced the store line here, and inherits its full-width row:
     without this it lands in the mark's column and leaves the text's empty. */
  .final-cta .store-status,
  .final-cta .button {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
  .app-mark-large {
    width: 58px;
    height: 58px;
    border-radius: 17px;
  }
}

/* ── The two plans ────────────────────────────────────────────────────────
   They differed by a border tint, carried the same mint ticks and showed no
   price, so nothing said which one costs money or which one you would pick.
   Each states its own price now, and only the paid one is lit. */
.plans .cost {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.55rem 0 0;
}
.plans .cost b {
  font:
    400 2.3rem/1 "Newsreader",
    Georgia,
    "Times New Roman",
    serif;
  letter-spacing: -0.03em;
  color: var(--muted);
}
.plans .cost span {
  color: var(--muted);
  font-size: 0.82rem;
}
.plans .pro .cost b {
  color: var(--mint);
}
.plans h3 {
  min-height: 0;
  margin: 1.1rem 0 1.2rem;
}
.plans li::before {
  color: #3f5f88;
}
.plans .pro li::before {
  color: var(--mint);
}
.plans article.pro {
  background: linear-gradient(180deg, rgba(143, 221, 170, 0.05), rgba(4, 13, 26, 0.55) 12rem);
}

/* The three legal links were bordered cards carrying a line of description
   each, which is three more rounded boxes on a page made of cut paper. They
   are links, so they sit in the footer and look like links. */
.landing footer.site {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}

.landing .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.landing .footer-links a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.landing .footer-links a:hover,
.landing .footer-links a:focus-visible {
  color: var(--tx, #cdd5e0);
  border-bottom-color: var(--mint);
}

.landing footer.site p {
  margin: 0;
}

/* ── The last two boxes ───────────────────────────────────────────────────
   Pricing and the closing block were rounded bordered cards, where the five
   sections above them are colour running to the edges. Below 48rem pricing
   already did this, so the box only existed on a wide screen. The two plan
   cards keep their borders: those separate two things you are meant to
   compare, which is a border doing work rather than decorating. */
.pricing-section {
  border: 0;
  border-radius: 0;
  background: #0b1831;
  margin-inline: calc(clamp(1rem, 2.6vw, 2.4rem) * -1);
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3rem);
}

.plans article {
  border-radius: 0;
}

.final-cta {
  border: 0;
  border-radius: 0;
  background: #0b1831;
  margin-inline: calc(clamp(1rem, 2.6vw, 2.4rem) * -1);
  padding: clamp(2rem, 4vw, 3.2rem) clamp(1.5rem, 4vw, 3rem);
}

@media (prefers-reduced-motion: reduce) {
  .hero-actions .button.primary::before {
    transition: none;
  }
  /* Snapping moves the page the reader did not ask to move. Last in the file
     so it wins over the phone rule that turns it on. */
  html {
    scroll-snap-type: none;
  }
}