/*
  Ahorrao sales site: the home page and the legal pages.
  The hero is a field of the app's emerald with its home screen drawn in
  HTML. After it the page is white, paper and night, with the app's emerald
  and mint as the only accents, two-tone headlines, and real screenshots of
  the app in iPhone frames. Pieces of the app are marked data-ui: inside
  them the app's own look applies (rounded corners, soft shadows).
*/

@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope-latin-wght-normal.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

:root {
  /* The app's colours. */
  --paper: #f3f5f4;
  --mist: #e2e8e5;
  --ink: #0c1210;
  --ink-soft: #33403b;
  --emerald: #0b7a52;
  --emerald-deep: #086341;
  --mint: #4fe3a2;
  --amber: #ffbf5c;
  --blue: #1b47b8;
  --rose: #ff9cc6;
  --card: #0e1513;
  /* After the hero. */
  --white: #ffffff;
  --night: #0a0d0c;
  --night-card: #131917;
  --on-night: #f1f4f2;
  --dim: #7b8681;
  --dim-night: #66716c;
  --rule: #e1e7e4;
  --text-2: #46524d;


  /* Five type steps. */
  --t-display: clamp(60px, 12.4vw, 200px);
  --t-h2: clamp(34px, 4.6vw, 68px);
  --t-lead: clamp(19px, 1.55vw, 24px);
  --t-body: 18px;
  --t-small: 15px;

  --m: clamp(16px, 3.2vw, 44px);
  --radius: 28px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
  overflow-x: clip;
}

h1,
h2,
h3,
p,
ol,
ul {
  margin: 0;
}
ol,
ul {
  padding: 0;
  list-style: none;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
::selection {
  background: var(--mint);
  color: var(--ink);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wrap {
  width: 100%;
  padding-inline: var(--m);
}

/* ---------- Type steps ---------- */
.display {
  font-size: var(--t-display);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.86;
}
.h2 {
  font-size: var(--t-h2);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.98;
}
.h3 {
  font-size: var(--t-lead);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.lead {
  font-size: var(--t-lead);
  line-height: 1.4;
  font-weight: 600;
}
.body {
  font-size: var(--t-body);
  line-height: 1.55;
}
.small {
  font-size: var(--t-small);
  line-height: 1.45;
}

/* ---------- Buttons: one shape, fully round ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 160ms var(--ease), background 160ms;
}
.btn:active {
  transform: scale(0.96);
}
.btn-small {
  min-height: 44px;
  padding: 0 20px;
  font-size: var(--t-small);
}
.btn-big {
  min-height: 60px;
  padding: 0 34px;
  font-size: 19px;
}
.btn-mint {
  background: var(--mint);
  color: var(--ink);
}
.btn-ink {
  background: var(--ink);
  color: var(--paper);
}
.btn-on-dark {
  background: var(--paper);
  color: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-2px);
  }
  .btn-mint:hover {
    background: #6deab3;
  }
  .btn-ink:hover {
    background: #1d2824;
  }
}

/* ---------- Fields: the chapters ---------- */
.field {
  position: relative;
  overflow: clip;
}
.f-emerald {
  background: var(--emerald);
  color: var(--paper);
}
.f-ink {
  background: var(--ink);
  color: var(--paper);
}
.f-amber {
  background: var(--amber);
  color: var(--ink);
}
.f-mint {
  background: var(--mint);
  color: var(--ink);
}
.f-blue {
  background: var(--blue);
  color: #ffffff;
}
.f-paper {
  background: var(--paper);
  color: var(--ink);
}
.f-mist {
  background: var(--mist);
  color: var(--ink);
}

/* ---------- The bar: a floating white capsule ---------- */
.bar {
  position: fixed;
  top: 20px;
  left: 50%;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 28px;
  width: min(1120px, calc(100% - 40px));
  height: 60px;
  padding: 0 8px 0 22px;
  translate: -50% 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.86);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  backdrop-filter: saturate(1.6) blur(18px);
  color: var(--ink);
  box-shadow: 0 8px 28px -12px rgb(12 18 16 / 0.28); /* taste-skill-ignore: the fixed bar is an overlay */
}
.bar-logo img {
  height: 26px;
  width: auto;
}
.bar-links {
  display: flex;
  gap: 26px;
  margin-left: auto;
  font-size: var(--t-small);
  font-weight: 600;
  color: #4a5651;
}
.bar-links a {
  text-decoration: none;
  transition: color 160ms;
}
@media (hover: hover) and (pointer: fine) {
  .bar-links a:hover {
    color: var(--ink);
  }
}
.bar .btn {
  min-height: 44px;
}
@media (max-width: 860px) {
  .bar {
    top: 22px;
    width: calc(100% - 44px);
    height: 56px;
    padding-left: 18px;
  }
  .bar-links {
    display: none;
  }
  .bar .btn {
    margin-left: auto;
  }
}
.legal-page .bar {
  position: sticky;
  margin: 12px auto 0;
  translate: none;
  left: auto;
}

/* ---------- 1. Hero: a rounded emerald field and the app on a real iPhone ---------- */
.hero {
  padding: 12px 12px 0;
  background: var(--white);
}
.hero-field {
  /* The picture is placed by its height, so the notes can find the phone.
     On narrow screens it is kept short enough to leave the text its room. */
  --hh: clamp(620px, min(calc(100svh - 24px), calc((100vw - 640px) / 0.6)), 900px);
  position: relative;
  height: var(--hh);
  border-radius: 32px;
  overflow: hidden;
  background: #03583d;
  color: var(--paper);
}
/* The picture sits a little low, clear of the bar; its top fades into the field. */
.hero-art img {
  position: absolute;
  top: 7%;
  right: 0;
  height: 100%;
  width: auto;
  max-width: none;
  /* Top and left edges fade into the field, so no seam shows on short screens. */
  -webkit-mask-image: linear-gradient(transparent, #000 9%), linear-gradient(to right, transparent, #000 30%); /* taste-skill-ignore: fades a photograph's edge, no colour is added */
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(transparent, #000 9%), linear-gradient(to right, transparent, #000 30%); /* taste-skill-ignore: fades a photograph's edge */
  mask-composite: intersect;
}
.hero-text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  max-width: 660px;
  padding: 96px 0 56px clamp(28px, 5vw, 80px);
}
.hero h1 {
  font-size: clamp(64px, 8.4vw, 128px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.9;
}
.ink-2 {
  color: var(--mint);
}
.hero-lead {
  max-width: 30ch;
  margin-top: 32px;
  color: #e3f1ea;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 36px;
}
.hero-price {
  font-size: var(--t-small);
  max-width: 26ch;
  color: #d6e9e0;
}

/* Notifications beside the phone: how the app talks to you. The phone's
   left edge sits 0.567 of the field's height from its right edge. */
.notes {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  right: calc(var(--hh) * 0.567 + 14px); /* clear of the phone, never on it */
  width: 270px;
}
.note {
  position: absolute;
  right: 0;
  width: 270px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 18px;
  border-radius: 20px;
  background: #ffffff;
  color: #0c1210;
  font-size: 14px;
  line-height: 1.35;
  box-shadow: 0 22px 44px -18px rgb(0 0 0 / 0.5); /* taste-skill-ignore: a notification floats over the device */
}
.note b {
  font-size: 15px;
}
.note span {
  color: #46524d;
}
.n1 {
  top: 30%;
}
.n2 {
  top: 50%;
  right: 40px;
}
.n3 {
  top: 70%;
}

@media (max-width: 1100px) {
  .notes {
    display: none;
  }
}
@media (max-width: 960px) {
  .hero-field {
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .hero-art {
    order: 2;
  }
  .hero-text {
    height: auto;
    padding: 112px 24px 8px;
  }
  .hero h1 {
    font-size: clamp(56px, 16vw, 96px);
  }
  .hero-art img {
    position: static;
    display: block;
    width: min(100%, 460px);
    height: auto;
    margin: 0 auto;
    /* All but the bottom edge fade, so the picture has no box around it. */
    -webkit-mask-image: linear-gradient(transparent, #000 14%), linear-gradient(to right, transparent, #000 16%, #000 84%, transparent); /* taste-skill-ignore: fades a photograph's edge */
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(transparent, #000 14%), linear-gradient(to right, transparent, #000 16%, #000 84%, transparent); /* taste-skill-ignore: fades a photograph's edge */
    mask-composite: intersect;
  }
}

/* ======================================================================
   After the hero: white, paper and night. One accent (the app's emerald
   and mint), headlines in two tones, and the real app in iPhone frames.
   ====================================================================== */

.f-white {
  background: var(--white);
  color: var(--ink);
}
.f-night {
  background: var(--night);
  color: var(--on-night);
}

/* Headlines: the second half steps back. */
.lineup .h2,
.anotar .h2,
.insights .h2,
.bento-section .h2,
.calc .h2,
.privacy .h2,
.steps .h2,
.pricing .h2,
.faq .h2 {
  font-weight: 750;
  letter-spacing: -0.042em;
  line-height: 1.02;
}
.dim {
  color: var(--dim);
}
.f-night .dim {
  color: var(--dim-night);
}
.soft {
  color: var(--text-2);
}
.f-night .soft {
  color: #aab5b0;
}
.faint {
  color: #6b7772;
}
.f-night .faint,
.foot .faint {
  color: #7f8a85;
}
.link {
  color: var(--emerald);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.center-head {
  text-align: center;
  max-width: 1180px;
  margin-inline: auto;
}
.center-head .lead {
  max-width: 40ch;
  margin: 24px auto 0;
  font-weight: 500;
}

/* ---------- The phone: a real screenshot in an iPhone frame ---------- */
.phone {
  --pw: 300px;
  position: relative;
  width: var(--pw);
  margin: 0;
  padding: calc(var(--pw) * 0.034);
  border-radius: calc(var(--pw) * 0.17);
  background: #101314;
  box-shadow: /* taste-skill-ignore: a device frame is a product picture */
    inset 0 0 0 1px #3c4246,
    inset 0 0 0 calc(var(--pw) * 0.012) #1b1f21,
    0 50px 90px -40px rgba(8, 20, 15, 0.55),
    0 22px 40px -24px rgba(8, 20, 15, 0.35);
  flex: none;
}
.phone img,
.phone video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--pw) * 0.138);
  background: #f3f5f4;
}
/* The Dynamic Island. */
.phone::after {
  content: '';
  position: absolute;
  top: calc(var(--pw) * 0.058);
  left: 50%;
  width: calc(var(--pw) * 0.3);
  height: calc(var(--pw) * 0.088);
  translate: -50% 0;
  border-radius: 999px;
  background: #000;
}
.f-night .phone {
  box-shadow: /* taste-skill-ignore: a device frame is a product picture */
    inset 0 0 0 1px #4a5156,
    inset 0 0 0 calc(var(--pw) * 0.012) #1d2224,
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 50px 100px -40px rgba(0, 0, 0, 0.8);
}

/* ---------- Photographs: the real app on real phones ---------- */
.photo {
  margin: 0;
  border-radius: 28px;
  overflow: hidden;
}
.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 2. Lineup: two phones, the month at a glance ---------- */
.lineup {
  padding: clamp(88px, 9vw, 136px) 0;
}
.photo-wide {
  max-width: 1240px;
  margin: clamp(48px, 5vw, 80px) auto 0;
  aspect-ratio: 16 / 9;
}
.photo-tall {
  aspect-ratio: 4 / 5;
  width: min(100%, 520px);
  margin-inline: auto;
}
.trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  max-width: 1180px;
  margin: clamp(64px, 7vw, 100px) auto 0;
}
.trio-item {
  padding-top: 8px;
}
.trio-item .body {
  margin-top: 10px;
}
.h3 {
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* ---------- Split sections: words on one side, the phone on the other ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: center;
  max-width: 1240px;
  margin-inline: auto;
}
.split-text .lead {
  margin-top: 24px;
  max-width: 34ch;
  font-weight: 500;
}
.split-text > .body {
  margin-top: 24px;
  max-width: 44ch;
}
.anotar,
.insights,
.privacy {
  padding: clamp(88px, 9vw, 136px) 0;
}

/* Two phones, one in front of the other. */
.pair {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: calc(var(--pair-w) * 2.22);
  --pair-w: clamp(250px, 23vw, 320px);
}
.pair .phone {
  --pw: var(--pair-w);
}
.pair .phone-back {
  position: absolute;
  top: calc(var(--pair-w) * 0.22);
  left: calc(50% + var(--pair-w) * 0.02);
  --pw: calc(var(--pair-w) * 0.86);
}
.phone-front {
  translate: calc(var(--pair-w) * -0.34) 0;
  z-index: 1;
}
.pair-one {
  min-height: 0;
}

/* Numbered steps of Anotar. */
.count {
  margin-top: 40px;
  display: grid;
  gap: 0;
  max-width: 460px;
}
.count {
  gap: 8px;
}
.count li {
  padding: 18px 22px;
  border-radius: 18px;
  background: var(--white);
  font-size: var(--t-body);
}
.count b {
  font-weight: 800;
  color: var(--emerald);
}

/* ---------- 4. What the app says ---------- */
.split-flip .pair {
  order: -1;
}
.says {
  margin-top: 36px;
  display: grid;
  gap: 12px;
  max-width: 480px;
}
.says li {
  padding: 18px 22px;
  border-radius: 20px;
  background: var(--night-card);
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.45;
}
.insights .small {
  margin-top: 18px;
}

/* ---------- 5. Bento of features ---------- */
.bento-section {
  padding: 0 0 clamp(88px, 9vw, 136px);
}
.bento-title .dim,
.cta .dim {
  display: block;
}
.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(48px, 5vw, 72px);
}
.tile-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 520px;
  padding: clamp(26px, 2.6vw, 40px);
  border-radius: 32px;
  background: var(--night-card);
  overflow: hidden;
}
.t-wide {
  grid-column: span 2;
  flex-direction: row;
  gap: 32px;
}
.t-wide .tile-text {
  flex: 1;
  align-self: center;
  max-width: 380px;
}
.t-wide .tile-text .body {
  margin-top: 16px;
}
.h3-big {
  margin-top: 10px;
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.t-short .body {
  margin-top: 14px;
}
.t-short {
  min-height: 0;
}
/* Phones rise from the bottom edge of their tile. */
.phone-peek {
  --pw: clamp(230px, 19vw, 270px);
  margin: 32px auto calc(var(--pw) * -1.15);
}
.t-wide .phone-peek {
  margin: 24px 6% calc(var(--pw) * -1.02) 0;
  align-self: flex-end;
  --pw: clamp(260px, 24vw, 330px);
}
.swatches {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 12px;
}
.swatches li {
  display: grid;
  justify-items: center;
  gap: 10px;
  font-size: var(--t-small);
  font-weight: 600;
  color: #aab5b0;
}
.swatches li::before {
  content: '';
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--c);
}
.swatches li:first-child::before {
  outline: 2px solid var(--mint);
  outline-offset: 4px;
}

/* ---------- 6. Calculator ---------- */
.calc {
  padding: clamp(88px, 9vw, 136px) 0;
}
.calc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 20px;
  max-width: 1080px;
  margin: clamp(48px, 5vw, 72px) auto 0;
  align-items: stretch;
}
.calc-list {
  display: grid;
  border-radius: 28px;
  background: var(--paper);
  padding: 8px;
}
.pick {
  width: 100%;
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 18px 18px;
  border-radius: 20px;
  text-align: left;
  transition: background 160ms;
  user-select: none;
}
.pick b {
  font-size: 17px;
  font-weight: 700;
}
.pick span {
  font-size: var(--t-small);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.pick i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #c3ccc8;
  display: grid;
  place-items: center;
  transition: background 160ms, border-color 160ms;
}
.pick[aria-pressed='true'] {
  background: var(--white);
}
.pick[aria-pressed='true'] i {
  background: var(--emerald);
  border-color: var(--emerald);
}
.pick[aria-pressed='true'] i::after {
  content: '';
  width: 10px;
  height: 6px;
  border: solid #fff;
  border-width: 0 0 2.5px 2.5px;
  rotate: -45deg;
  translate: 0 -1px;
}
.pick:active {
  transform: scale(0.985);
}
@media (hover: hover) and (pointer: fine) {
  .pick:hover {
    background: rgba(255, 255, 255, 0.7);
  }
}
.calc-card {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 44px);
  border-radius: 28px;
  background: var(--night);
  color: var(--on-night);
}
.faint-on-dark {
  color: #8f9a95;
  font-weight: 600;
}
.figure {
  margin-top: 6px;
  font-size: clamp(56px, 7vw, 104px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--mint);
  font-variant-numeric: tabular-nums;
}
.calc-caption {
  margin-top: 18px;
  color: #c4ccc8;
  max-width: 40ch;
}
.calc-vs {
  margin-top: auto;
  padding-top: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.calc-vs div {
  display: grid;
  gap: 2px;
  padding: 18px 20px;
  border-radius: 18px;
  background: var(--night-card);
}
.calc-vs .small {
  color: #8f9a95;
}
.calc-vs b {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* ---------- 7. Privacy: where each thing lives ---------- */
.where {
  margin-top: 36px;
  display: grid;
  gap: 10px;
  max-width: 540px;
}
.where li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  padding: 20px 22px;
  border-radius: 22px;
  background: var(--white);
}
.where b {
  font-size: 17px;
  font-weight: 750;
}
.where span {
  grid-column: 1;
  font-size: var(--t-small);
  color: var(--text-2);
  line-height: 1.5;
}
.where em {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  font-style: normal;
  font-size: 14px;
  font-weight: 800;
  padding: 7px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.where .yes {
  background: #dff3e9;
  color: var(--emerald-deep);
}
.where .no {
  background: var(--ink);
  color: var(--white);
}
.where .us {
  background: var(--mist);
}

/* ---------- 8. Steps ---------- */
.steps {
  padding: clamp(88px, 9vw, 136px) 0;
}
.step-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin-top: clamp(48px, 5vw, 72px);
}
.step {
  padding: 28px;
  border-radius: 28px;
  background: var(--paper);
}
.step-n {
  display: block;
  font-size: clamp(56px, 5vw, 80px);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--emerald);
  margin-bottom: 28px;
}
.step .body {
  margin-top: 10px;
}

/* ---------- 9. Pricing ---------- */
.pricing {
  padding: clamp(88px, 9vw, 136px) 0;
}
.plans {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: 16px;
  max-width: 1000px;
  margin: clamp(48px, 5vw, 72px) auto 0;
  align-items: stretch;
}
.plan {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 44px);
  border-radius: 32px;
  background: var(--white);
}
.plan-main {
  background: var(--night);
  color: var(--on-night);
}
.plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tag {
  font-size: 13px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--mint);
  color: var(--ink);
}
.price {
  margin-top: 22px;
  font-size: clamp(56px, 6vw, 84px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
}
.price span {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-2);
}
.plan-main .price span {
  color: #aab5b0;
}
.checks {
  margin: 28px 0 36px;
  display: grid;
  gap: 14px;
}
.checks li {
  position: relative;
  padding-left: 32px;
  font-size: 17px;
  line-height: 1.45;
}
.checks li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 6px;
  width: 11px;
  height: 6px;
  border: solid var(--emerald);
  border-width: 0 0 2.5px 2.5px;
  rotate: -45deg;
}
.plan-main .checks li::before {
  border-color: var(--mint);
}
.plan .btn {
  margin-top: auto;
  align-self: stretch;
}
.btn-line {
  background: var(--paper);
  color: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  .btn-line:hover {
    background: var(--ink);
    color: var(--white);
  }
}

/* ---------- 10. FAQ ---------- */
.faq {
  padding: clamp(88px, 9vw, 136px) 0;
}
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 110px);
  max-width: 1240px;
  margin-inline: auto;
}
.faq-head .body {
  margin-top: 20px;
}
@media (min-width: 861px) {
  .faq-head {
    position: sticky;
    top: 110px;
    align-self: start;
  }
}
.faq-list {
  display: grid;
  gap: 8px;
}
.faq-list details {
  padding-inline: 26px;
  border-radius: 22px;
  background: var(--paper);
  transition: background 200ms;
}
.faq-list details[open] {
  background: #e9f7f0;
}
.faq-list summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 24px 56px 24px 0;
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list details p {
  padding: 0 40px 26px 0;
  color: var(--text-2);
  max-width: 62ch;
}
.plus {
  position: absolute;
  right: 4px;
  top: 50%;
  width: 36px;
  height: 36px;
  translate: 0 -50%;
  border-radius: 50%;
  background: var(--white);
  transition: rotate 300ms var(--ease), background 200ms;
}
.plus::before,
.plus::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  translate: -50% -50%;
  border-radius: 2px;
  background: var(--ink);
}
.plus::after {
  rotate: 90deg;
}
details[open] .plus {
  rotate: 45deg;
  background: var(--mint);
}

/* ---------- 11. The close ---------- */
.cta {
  /* flow-root keeps the phone's negative margin inside, so it is cropped. */
  display: flow-root;
  padding-top: clamp(96px, 10vw, 150px);
  text-align: center;
  overflow: clip;
}
.display-2 {
  font-size: clamp(52px, 8.4vw, 132px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.95;
}
.cta .lead {
  margin-top: 26px;
}
.cta .btn {
  margin-top: 36px;
}
.phone-rise {
  --pw: clamp(260px, 26vw, 360px);
  margin: clamp(64px, 7vw, 96px) auto calc(var(--pw) * -1.15);
}

/* ---------- Footer ---------- */
.foot {
  background: var(--night);
  color: var(--on-night);
  padding: 72px 0 40px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
}
.foot-brand img {
  height: 34px;
  width: auto;
}
.foot-brand .body {
  margin-top: 16px;
  max-width: 28ch;
}
.foot-col {
  display: grid;
  align-content: start;
  gap: 12px;
}
.foot-col a {
  text-decoration: none;
  font-weight: 600;
}
@media (hover: hover) and (pointer: fine) {
  .foot-col a:hover {
    color: var(--mint);
  }
}
.foot-base {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 72px;
}
.foot-base a {
  text-decoration: none;
}

/* ---------- Tablet and phone ---------- */
@media (max-width: 980px) {
  .split {
    grid-template-columns: 1fr;
  }
  .split-flip .pair {
    order: 1;
  }
  .pair {
    margin-top: 16px;
  }
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .t-wide {
    grid-column: span 2;
  }
  .step-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 48px;
  }
  .foot-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 860px) {
  .calc-grid,
  .plans,
  .faq-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  /* On a phone the two phones fill the frame instead of the grey around them. */
  .photo-wide {
    aspect-ratio: 1 / 1;
    border-radius: 22px;
  }
  .trio {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .pair {
    --pair-w: min(60vw, 260px);
  }
  .phone-front {
    translate: calc(var(--pair-w) * -0.26) 0;
  }
  .phone-back {
    left: calc(50% - var(--pair-w) * 0.1);
  }
  .bento {
    grid-template-columns: 1fr;
  }
  .t-wide {
    grid-column: auto;
    flex-direction: column;
  }
  .t-wide .phone-peek {
    align-self: center;
    margin: 32px auto calc(var(--pw) * -1.15);
  }
  .tile-card {
    min-height: 480px;
  }
  .t-short,
  .t-looks {
    min-height: 0;
  }
  .t-looks .swatches {
    margin-top: 28px;
  }
  .step-row {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }
  .step-n {
    margin-bottom: 16px;
  }
  .calc-vs b {
    font-size: 24px;
  }
  .where li {
    grid-template-columns: 1fr;
  }
  .where em {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    margin-top: 8px;
  }
  .foot-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Motion: the masked headline and section entrances ---------- */
.lines .line {
  display: block;
  overflow: clip;
  padding-bottom: 0.06em;
}
.lines [data-line] {
  display: inline-block;
}
@media (prefers-reduced-motion: no-preference) {
  .js .lines [data-line] {
    animation: line-up 900ms var(--ease) both;
    animation-delay: calc(var(--i) * 110ms + 80ms);
  }
  .js [data-after] {
    animation: fade-up 700ms var(--ease) both;
    animation-delay: 520ms;
  }
  .js [data-r] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms var(--ease), transform 700ms var(--ease);
    transition-delay: var(--d, 0ms);
  }
  .js [data-r].in {
    opacity: 1;
    transform: none;
  }
  /* The picture settles in from a little larger, like a camera finding focus. */
  .js .hero-art img {
    animation: art-in 1400ms var(--ease-sheet) both;
  }
  .js .note {
    animation: note-in 700ms var(--ease) both;
  }
  .js .n1 {
    animation-delay: 900ms;
  }
  .js .n2 {
    animation-delay: 1250ms;
  }
  .js .n3 {
    animation-delay: 1600ms;
  }
  [data-float] {
    will-change: transform;
  }
}
@keyframes line-up {
  from {
    transform: translateY(105%);
  }
}
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}
@keyframes art-in {
  from {
    opacity: 0;
    scale: 1.04;
  }
}
@keyframes note-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }
}


/* ---------- Legal pages ---------- */
.legal-page .bar {
  position: sticky;
}
.legal {
  padding: 72px var(--m) 120px;
}
.legal-head {
  max-width: 900px;
}
.legal-head .h2 {
  margin-top: 18px;
}
.legal-date {
  margin-top: 14px;
  color: var(--ink-soft);
}
.summary {
  max-width: 900px;
  margin-top: 40px;
  padding: 32px;
  border-radius: var(--radius);
  background: var(--emerald);
  color: var(--paper);
}
.summary h2 {
  font-size: var(--t-lead);
  font-weight: 800;
}
.summary ul {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.summary li {
  position: relative;
  padding-left: 30px;
  font-size: var(--t-body);
  line-height: 1.5;
}
.summary li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--mint);
}
.legal-body {
  max-width: 760px;
  margin-top: 56px;
}
.legal-body h2 {
  margin-top: 48px;
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.legal-body p,
.legal-body li {
  margin-top: 12px;
  font-size: var(--t-body);
  line-height: 1.6;
}
.legal-body ul {
  list-style: disc;
  padding-left: 22px;
}
.legal-body a {
  color: var(--emerald);
  font-weight: 700;
}
.legal-body table {
  width: 100%;
  margin-top: 16px;
  border-collapse: collapse;
  font-size: var(--t-small);
}
.legal-body th,
.legal-body td {
  padding: 12px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--mist);
}
.legal-body th {
  font-weight: 800;
}
.table-scroll {
  overflow-x: auto;
}
.legal-foot {
  padding: 32px var(--m) 48px;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--t-small);
}
.legal-foot a {
  color: var(--mint);
}


/* Legal pages read as one centred column. */
.legal-head,
.summary,
.legal-body {
  max-width: 860px;
  margin-inline: auto;
}
.summary {
  margin-top: 40px;
}
.legal-body {
  margin-top: 56px;
}