:root {
  --ink: #10213b;
  --ink-soft: #213854;
  --muted: #52647a;
  --blue: #2e63e6;
  --blue-deep: #1748bd;
  --blue-dark: #123a94;
  --blue-pale: #edf3ff;
  --blue-soft: #dbe7ff;
  --surface: #f6f8fb;
  --white: #ffffff;
  --line: #dce4ef;
  --header-height: 74px;
  --shell: 1680px;
  --gutter: clamp(24px, 4vw, 64px);
  --section-space: clamp(64px, 7vw, 104px);
  --radius: 18px;
  --font: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background: var(--white);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
figure,
figcaption,
ol,
dl,
dd {
  margin: 0;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p,
li,
figcaption {
  text-wrap: pretty;
}

a {
  color: inherit;
}

button,
summary {
  color: inherit;
  font: inherit;
}

img {
  max-width: 100%;
}

::selection {
  color: var(--white);
  background: var(--blue);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
.table-scroll:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--blue-deep);
}

.shell {
  width: min(100%, var(--shell));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.narrow {
  width: min(calc(100% - (var(--gutter) * 2)), 820px);
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  color: var(--white);
  background: var(--ink);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-180%);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  min-height: var(--header-height);
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgba(220, 228, 239, 0.9);
  backdrop-filter: blur(16px);
}

.header-inner {
  min-height: var(--header-height);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(24px, 4vw, 54px);
  align-items: center;
}

.wordmark {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
}

/* The logo file is drawn in the current text colour, so one file serves the
   light header and the dark footer. */
.wordmark-logo {
  height: 39px;
  aspect-ratio: 1425 / 258;
  display: block;
  background: currentColor;
  -webkit-mask: url("assets/logo.svg") center / contain no-repeat;
  mask: url("assets/logo.svg") center / contain no-repeat;
  forced-color-adjust: none;
}

.site-nav {
  display: flex;
  justify-content: center;
  gap: clamp(20px, 2.6vw, 34px);
}

.site-nav a,
.site-footer nav a {
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: color 180ms ease;
}

.site-nav a:hover,
.site-footer nav a:hover {
  color: var(--blue);
}

.button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms var(--ease);
}

.button:hover {
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(0) scale(0.98);
}

.button-small {
  min-height: 44px;
  padding: 10px 17px;
  color: var(--white);
  background: var(--ink);
  font-size: 13px;
}

.button-small:hover {
  background: var(--blue-deep);
}

.button-primary {
  color: var(--white);
  background: var(--blue);
  box-shadow: 0 12px 28px rgba(46, 99, 230, 0.24);
}

.button-primary:hover {
  background: var(--blue-deep);
}

.button-light {
  color: var(--blue-deep);
  background: var(--white);
  border-color: rgba(255, 255, 255, 0.5);
}

.button-light:hover {
  color: var(--white);
  background: var(--ink);
  border-color: var(--ink);
}

.hero {
  position: relative;
  display: grid;
  overflow: hidden;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.hero::before,
.hero::after {
  position: absolute;
  z-index: 0;
  width: min(34vw, 490px);
  height: min(34vw, 490px);
  border: 1px solid rgba(46, 99, 230, 0.17);
  border-radius: 50%;
  content: "";
}

.hero::before {
  top: -23vw;
  left: -9vw;
}

.hero::after {
  right: -15vw;
  bottom: -25vw;
}

.hero-glow {
  position: absolute;
  z-index: 0;
  top: -42%;
  left: 50%;
  width: min(1080px, 92vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46, 99, 230, 0.18) 0, rgba(46, 99, 230, 0.08) 34%, rgba(46, 99, 230, 0) 68%);
  transform: translateX(-50%);
  pointer-events: none;
}

/* Same columns as .contents-layout. The cover is drawn at the height of the
   phone lineup in #isi (script.js sets --lineup-height), hangs from the header
   and runs off the right screen edge, so only its bottom edge needs a fade. */
.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 3.5vw, 48px);
  align-items: center;
  text-align: left;
}

.hero-copy {
  display: grid;
  justify-items: start;
  padding-block: 56px;
}

.hero-visual {
  align-self: start;
  min-width: 0;
  margin-right: calc(-1 * max(0px, (100vw - var(--shell)) / 2) - var(--gutter));
}

.hero-visual img {
  width: 100%;
  height: auto;
  max-height: var(--lineup-height, min(628px, 37.5vw));
  display: block;
  aspect-ratio: 1221 / 1080;
  object-fit: contain;
  object-position: right top;
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent);
  mask-image: linear-gradient(to bottom, #000 76%, transparent);
}

.hero h1 {
  margin-bottom: 26px;
  font-size: clamp(42px, 4.2vw, 60px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.96;
}

.hero p {
  max-width: 46ch;
  margin-bottom: 31px;
  color: var(--muted);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
}

.section {
  padding-block: var(--section-space);
}

.section-heading {
  margin-bottom: clamp(36px, 4.5vw, 56px);
  text-align: center;
}

.section-heading h2,
.contents h2,
.process h2,
.faq h2,
.closing h2 {
  font-size: clamp(42px, 4vw, 68px);
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.section-heading h2 {
  margin-bottom: 20px;
}

.section-heading p,
.section-lead,
.process-copy > p,
.closing p {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.65;
}

.section-heading p {
  max-width: 680px;
  margin-inline: auto;
}

.contents {
  background: var(--blue-pale);
}

.contents-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 3.5vw, 48px);
  align-items: center;
}

.contents-copy h2 {
  margin-bottom: 24px;
}

.section-lead {
  max-width: 600px;
  margin-bottom: 32px;
}

.feature-ledger {
  border-top: 1px solid rgba(16, 33, 59, 0.55);
}

.feature-ledger article {
  display: grid;
  grid-template-columns: minmax(165px, 0.68fr) minmax(0, 1.32fr);
  gap: 28px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(16, 33, 59, 0.15);
}

.feature-ledger h3 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.35;
}

.feature-ledger p {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
}

/* The phones take their height from the copy column: the image is pulled out
   of flow so the row is sized by the text alone. Where the column is too
   narrow for that height, the phones fill its width instead. */
.sample-phone {
  position: relative;
  align-self: stretch;
  min-width: 0;
  margin-right: calc(-1 * max(0px, (100vw - var(--shell)) / 2) - var(--gutter));
}

.sample-phone img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: left center;
}

.sample-phone figcaption {
  max-width: 440px;
  display: grid;
  gap: 4px;
  margin: 16px auto 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.sample-phone figcaption strong {
  color: var(--blue-deep);
  font-size: 14px;
}

.friction {
  background: var(--surface);
}

/* Frames never drop below ~380px: the row fits three, two or one on its own. */
.problem-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: clamp(24px, 3.5vw, 48px);
}

.problem-figure {
  min-width: 0;
}

.problem-image {
  width: 100%;
  aspect-ratio: 662 / 731;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.problem-image img {
  width: 100%;
  height: 100%;
  display: block;
  aspect-ratio: 662 / 731;
  object-fit: contain;
}

.problem-figure figcaption {
  display: grid;
  gap: 7px;
  padding: 16px 8px 0;
  border-top: 1px solid var(--line);
}

.problem-figure figcaption strong {
  font-size: clamp(21px, 2.2vw, 28px);
  font-weight: 650;
  letter-spacing: -0.025em;
}

.problem-figure figcaption span {
  max-width: 54ch;
  color: var(--muted);
  font-size: 15px;
}

.showcase {
  background: var(--white);
}

.showcase-layout {
  display: grid;
  gap: clamp(28px, 3.5vw, 44px);
}

.showcase-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.showcase-tab {
  min-height: 44px;
  padding: 11px 20px;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.25;
  white-space: nowrap;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.showcase-tab:hover {
  color: var(--blue-deep);
  border-color: var(--blue-soft);
}

.showcase-tab[aria-selected="true"] {
  color: var(--white);
  background: var(--blue);
  border-color: var(--blue);
}

.showcase-panel {
  min-width: 0;
}

.showcase-hint {
  display: none;
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

.showcase-stage {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 28px 62px rgba(16, 33, 59, 0.12);
}

.showcase-stage img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1600 / 971;
  object-fit: contain;
}

.showcase-panel figcaption {
  display: grid;
  grid-template-columns: minmax(210px, 0.55fr) minmax(0, 1.45fr);
  gap: clamp(30px, 7vw, 94px);
  align-items: start;
  padding: 24px 6px 0;
}

.showcase-panel figcaption strong {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.showcase-panel figcaption span {
  max-width: 68ch;
  color: var(--muted);
  font-size: 16px;
}

.pricing {
  background: var(--white);
}

.pricing-wrap {
  max-width: 1180px;
}

.monthly-promise {
  margin-bottom: 20px;
  padding: 20px 24px;
  color: var(--white);
  background: var(--blue);
  border-radius: var(--radius) var(--radius) 0 0;
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.2;
  text-align: center;
}

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  scrollbar-color: var(--blue) var(--blue-pale);
}

table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--white);
}

caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

th,
td {
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.45;
  text-align: left;
  vertical-align: middle;
}

thead th {
  padding-top: 28px;
  padding-bottom: 28px;
  background: var(--surface);
}

thead th:first-child {
  width: 27%;
  color: var(--muted);
  font-weight: 600;
}

thead th:not(:first-child) {
  width: 36.5%;
}

thead th span,
thead th small,
thead th strong {
  display: block;
}

thead th span {
  margin-bottom: 13px;
  font-size: 16px;
  font-weight: 700;
}

thead th strong {
  margin-bottom: 4px;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
}

thead th small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

tbody th {
  color: var(--muted);
  background: var(--surface);
  font-weight: 600;
}

tbody td {
  color: var(--ink);
  font-weight: 650;
}

table tr > :nth-child(2) {
  color: var(--white);
  background: var(--blue);
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

table thead tr > :nth-child(2) small {
  color: var(--blue-pale);
}

table th + th,
table th + td,
table td + td {
  border-left: 1px solid var(--line);
}

table tr > :nth-child(2) + :nth-child(3) {
  border-left-color: transparent;
}

tbody tr:last-child > * {
  border-bottom: 0;
}

.table-actions th,
.table-actions td {
  padding-top: 24px;
  padding-bottom: 24px;
}

.button-table {
  width: 100%;
  min-height: 48px;
  padding-inline: 17px;
  font-size: 13px;
}

.table-actions td:last-child .button-primary {
  box-shadow: none;
}

.placeholder-note {
  margin-top: 18px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.process {
  color: var(--white);
  background: var(--ink);
}

.process-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(480px, 1.18fr);
  gap: clamp(58px, 10vw, 150px);
  align-items: start;
}

.process-copy {
  position: sticky;
  top: calc(var(--header-height) + 54px);
}

.process h2 {
  margin-bottom: 24px;
  color: var(--white);
}

.process-copy > p {
  max-width: 490px;
  color: #c5d2e1;
}

.process-copy > .process-note {
  max-width: 490px;
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 13px;
  line-height: 1.5;
}

.process-list {
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.48);
  list-style: none;
}

.process-list li {
  position: relative;
  padding: 24px 0 26px 52px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.process-list li::before {
  position: absolute;
  top: 31px;
  left: 0;
  width: 18px;
  height: 18px;
  border: 5px solid var(--blue);
  border-radius: 50%;
  background: var(--ink);
  content: "";
}

.process-list li::after {
  position: absolute;
  top: 49px;
  bottom: -1px;
  left: 8px;
  width: 1px;
  background: rgba(255, 255, 255, 0.23);
  content: "";
}

.process-list li:last-child::after {
  display: none;
}

.process-list strong {
  display: block;
  margin-bottom: 9px;
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -0.025em;
}

.process-list p {
  max-width: 54ch;
  color: #c5d2e1;
  font-size: 16px;
}

.faq {
  background: var(--surface);
}

.faq-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(520px, 1.28fr);
  gap: clamp(58px, 10vw, 148px);
  align-items: start;
}



.faq-list {
  border-top: 1px solid var(--ink);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  position: relative;
  padding: 19px 48px 19px 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

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

.faq-list summary::marker {
  content: "";
}

.faq-list summary::before,
.faq-list summary::after {
  position: absolute;
  top: 50%;
  right: 5px;
  width: 16px;
  height: 2px;
  background: var(--blue);
  content: "";
  transform: translateY(-50%);
}

.faq-list summary::after {
  transform: translateY(-50%) rotate(90deg);
  transition: transform 220ms var(--ease);
}

.faq-list details[open] summary::after {
  transform: translateY(-50%) rotate(0deg);
}

.faq-list summary:hover {
  color: var(--blue-deep);
}

.faq-list details p {
  max-width: 68ch;
  padding: 0 48px 21px 0;
  color: var(--muted);
  font-size: 15px;
}

.closing {
  color: var(--white);
  background: var(--blue);
}

.closing-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 64px;
  align-items: center;
  padding-block: clamp(64px, 7vw, 104px);
}

.closing h2 {
  max-width: 820px;
  margin-bottom: 24px;
  color: var(--white);
}

.closing p {
  max-width: 620px;
  color: var(--blue-pale);
}

.closing-button {
  min-width: 218px;
  min-height: 58px;
}

.site-footer {
  color: #bcc9d8;
  background: var(--ink);
}

.footer-inner {
  min-height: 132px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 42px;
  align-items: center;
}

.wordmark-footer {
  color: var(--white);
}

.footer-inner > p {
  font-size: 13px;
}

.site-footer nav {
  display: flex;
  gap: 24px;
}

.site-footer nav a {
  color: #dbe5f0;
  font-size: 13px;
}

/* Below this the copy column gets too narrow to hold a 68px heading, so the
   lineup drops under the text instead of fighting it for width. */
@media (max-width: 1140px) {
  .contents-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .sample-phone {
    align-self: auto;
    margin-right: 0;
  }

  .sample-phone img {
    position: static;
    height: auto;
    aspect-ratio: 1470 / 1080;
    object-position: center;
  }
}

@media (max-width: 1080px) {
  .site-nav {
    gap: 18px;
  }

  .feature-ledger article {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .faq-layout {
    grid-template-columns: minmax(260px, 0.7fr) minmax(440px, 1.3fr);
    gap: 62px;
  }
}

@media (max-width: 900px) {
  :root {
    --header-height: 68px;
  }

  .site-nav {
    display: none;
  }

  .header-inner {
    display: flex;
    justify-content: space-between;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 56px;
  }

  .hero-visual {
    order: -1;
    margin-right: calc(-1 * var(--gutter));
  }

  .hero-copy {
    padding-block: 0;
  }

  .hero h1 {
    font-size: clamp(44px, 6.4vw, 56px);
  }

  .contents-layout,
  .process-layout,
  .faq-layout {
    grid-template-columns: 1fr;
  }

  .sample-phone {
    margin-right: 0;
  }



  .process-copy {
    position: static;
  }



  .closing-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .closing-button {
    width: fit-content;
  }
}

@media (max-width: 680px) {
  :root {
    --gutter: 24px;
    --section-space: 60px;
    --radius: 14px;
  }

  /* Shrinks on narrow phones so it always fits beside the header button. */
  .wordmark-logo {
    height: clamp(18px, calc((100vw - 228px) / 5.52), 33px);
  }

  .button-small {
    min-height: 42px;
    padding-inline: 14px;
    font-size: 12px;
  }

  .hero-inner {
    padding-bottom: 48px;
  }

  .hero h1 {
    width: 100%;
    margin-bottom: 22px;
    font-size: clamp(44px, 13.2vw, 62px);
    line-height: 0.98;
  }

  .wide-break {
    display: none;
  }

  .hero p {
    max-width: 34ch;
    margin-bottom: 26px;
    font-size: 16px;
  }

  .section-heading {
    margin-bottom: 34px;
    text-align: left;
  }

  .section-heading h2,
  .contents h2,
  .process h2,
  .faq h2,
  .closing h2 {
    font-size: clamp(37px, 11.5vw, 50px);
  }

  .section-heading p,
  .section-lead,
  .process-copy > p,
  .closing p {
    font-size: 16px;
  }

  .contents-layout {
    gap: 40px;
  }

  .section-lead {
    margin-bottom: 26px;
  }

  .feature-ledger article {
    padding-block: 14px;
  }

  .problem-image {
    max-height: 520px;
  }

  .showcase-tabs {
    justify-content: flex-start;
  }

  /* A laptop-and-phone composition squeezed to 327px shows nothing. Render it
     at a readable size and let the frame scroll sideways instead. */
  .showcase-stage {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .showcase-stage img {
    width: 760px;
    max-width: none;
  }

  .showcase-hint {
    display: block;
  }

  .showcase-stage {
    border-radius: 10px;
  }

  .showcase-panel figcaption {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-top: 18px;
  }

  .showcase-panel figcaption strong {
    font-size: 20px;
  }

  .showcase-panel figcaption span {
    font-size: 15px;
  }

  .monthly-promise {
    padding: 18px 16px;
    text-align: left;
  }

  .table-scroll {
    margin-right: calc(var(--gutter) * -1);
    border-right: 0;
    border-radius: 0 0 0 var(--radius);
  }

  .placeholder-note {
    text-align: left;
  }

  .process-layout {
    gap: 36px;
  }

  .process-list li {
    padding-left: 42px;
  }

  .process-list strong {
    font-size: 21px;
  }

  .faq-layout {
    gap: 32px;
  }

  .faq-list summary {
    padding-right: 38px;
    font-size: 16px;
  }

  .faq-list details p {
    padding-right: 18px;
  }

  .closing-layout {
    gap: 28px;
  }

  .closing-button {
    width: 100%;
  }

  .footer-inner {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 17px;
    padding-block: 34px;
  }

  .site-footer nav {
    flex-wrap: wrap;
  }
}

@media (max-width: 390px) {
  .header-inner {
    gap: 12px;
  }

  .button-small {
    padding-inline: 12px;
    font-size: 11px;
  }

  .hero h1 {
    font-size: 43px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header {
    background: var(--white);
    backdrop-filter: none;
  }
}

.nowrap {
  white-space: nowrap;
}

/* Sits just under the phones without adding to the row height. */
.sample-note {
  position: absolute;
  top: calc(100% + 12px);
  /* Centre of the lineup as drawn = under the middle phone. */
  left: calc(var(--lineup-height, 0px) * 1470 / 1080 / 2);
  transform: translateX(-50%);
  white-space: nowrap;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 1140px) {
  .sample-note {
    position: static;
    margin-top: 12px;
    transform: none;
    text-align: center;
  }
}

/* Motion: a short rise on load for the hero, and the same rise as each block
   scrolls into view. Only applied when JS runs (.js), off for reduced motion. */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

.hero-copy > * {
  animation: rise 800ms var(--ease) both;
}

.hero-copy > :nth-child(2) {
  animation-delay: 90ms;
}

.hero-copy > :nth-child(3) {
  animation-delay: 180ms;
}

.hero-visual img {
  animation: rise 1100ms var(--ease) 120ms both;
}

.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease, transform 900ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

.showcase-panel:not([hidden]) {
  animation: fade 450ms ease both;
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy > *,
  .hero-visual img,
  .showcase-panel:not([hidden]) {
    animation: none;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.price-old {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 17px;
  font-weight: 600;
}

table thead tr > :nth-child(2) .price-old {
  color: rgba(255, 255, 255, 0.7);
}

/* What both plans include, right under the price table. */
.plan-features {
  margin-top: 28px;
  padding: 28px 32px;
  background: var(--surface);
  border-radius: var(--radius);
}

.plan-features h3 {
  margin-bottom: 18px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.plan-features ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 12px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan-features li {
  position: relative;
  padding-left: 28px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.5;
}

.plan-features li::before {
  position: absolute;
  top: 4px;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  content: "";
}

/* Floating WhatsApp button: appears once the hero has scrolled away. */
.wa-float {
  position: fixed;
  z-index: 90;
  right: clamp(16px, 2.5vw, 32px);
  bottom: clamp(16px, 2.5vw, 32px);
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  color: var(--white);
  background: #1fa855;
  border-radius: 50%;
  box-shadow: 0 12px 28px rgba(16, 33, 59, 0.24);
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px) scale(0.9);
  transition: opacity 300ms ease, transform 400ms var(--ease), background-color 200ms ease;
}

.wa-float.is-shown {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.wa-float:hover {
  background: #178a45;
}

.ledger-hint {
  display: none;
}

/* Phones: the four points become a row of cards swiped sideways. The next card
   peeks in from the edge so the row reads as scrollable. */
@media (max-width: 680px) {
  /* Keeps the card row from widening the grid column past the screen. */
  .contents-copy {
    min-width: 0;
  }

  .feature-ledger {
    display: flex;
    gap: 12px;
    margin-inline: calc(-1 * var(--gutter));
    padding: 2px var(--gutter) 6px;
    overflow-x: auto;
    border-top: 0;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .feature-ledger::-webkit-scrollbar {
    display: none;
  }

  .feature-ledger article {
    flex: 0 0 82%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    scroll-snap-align: start;
  }

  .ledger-hint {
    display: block;
    margin-top: 10px;
    color: var(--muted);
    font-size: 13px;
  }
}

/* Phones: two stacked plan cards replace the sideways-scrolling table. */
.plan-cards {
  display: none;
}

@media (max-width: 860px) {
  .table-scroll {
    display: none;
  }

  .plan-cards {
    display: grid;
    gap: 16px;
  }

  .plan-card {
    padding: 24px 22px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }

  .plan-card h3 {
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 700;
  }

  .plan-price {
    margin-bottom: 18px;
    font-size: 38px;
    font-weight: 650;
    letter-spacing: -0.04em;
    line-height: 1;
  }

  .plan-price small {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
  }

  .plan-card dl {
    margin: 0 0 20px;
    border-top: 1px solid var(--line);
  }

  .plan-card dl > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    line-height: 1.45;
  }

  .plan-card dt {
    color: var(--muted);
  }

  .plan-card dd {
    margin: 0;
    font-weight: 650;
  }

  .plan-card .button {
    width: 100%;
  }

  .plan-card-featured {
    color: var(--white);
    background: var(--blue);
    border-color: var(--blue);
  }

  .plan-card-featured .price-old,
  .plan-card-featured .plan-price small,
  .plan-card-featured dt {
    color: rgba(255, 255, 255, 0.75);
  }

  .plan-card-featured dl,
  .plan-card-featured dl > div {
    border-color: rgba(255, 255, 255, 0.22);
  }
}

.ledger-icon {
  display: none;
}

@media (max-width: 680px) {
  .ledger-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    margin-bottom: 6px;
    color: var(--blue);
    background: var(--blue-pale);
    border-radius: 12px;
  }
}