: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 {
  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;
}

.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;
  }

  .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-copy > :nth-child(4) {
  animation-delay: 270ms;
}

.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;
}

/* 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;
  }
}

.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;
  }
}

/* Bigger or custom projects: quoted separately. */
.custom-project {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  margin-top: 16px;
  padding: 28px 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.custom-project h3 {
  margin-bottom: 8px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.custom-project p {
  max-width: 62ch;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

@media (max-width: 680px) {
  .custom-project {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px 22px;
  }

  .custom-project .button {
    width: 100%;
  }
}

/* Plain line under the headline; pulled up so the gap stays tight. */
.hero .hero-tagline {
  max-width: none;
  margin: -8px 0 16px;
  color: var(--blue-deep);
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.early-note {
  margin-bottom: 20px;
  color: var(--blue-deep);
  font-size: 17px;
  font-weight: 650;
  line-height: 1.4;
  text-align: center;
}

/* Pricing: two plan cards. Langganan switches between monthly and yearly. */
.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.plan {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 36px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

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

.plan-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  margin-bottom: 20px;
}

.plan-head h3 {
  font-size: 20px;
  font-weight: 700;
}

.period-toggle {
  display: inline-flex;
  padding: 4px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
}

.period-toggle button {
  min-height: 36px;
  padding: 0 16px;
  color: var(--white);
  background: transparent;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.period-toggle button[aria-pressed="true"] {
  color: var(--blue-deep);
  background: var(--white);
}

.plan .price-old {
  margin-bottom: 4px;
}

.plan-featured .price-old {
  color: rgba(255, 255, 255, 0.7);
}

.plan-amount {
  font-size: clamp(40px, 4.4vw, 52px);
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1;
}

.plan-unit {
  margin-top: 8px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.plan-featured .plan-unit {
  color: var(--blue-pale);
}

.plan-save {
  align-self: flex-start;
  margin-top: 12px;
  padding: 4px 12px;
  color: var(--blue-deep);
  background: var(--white);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.plan-save[hidden] {
  display: none;
}

.plan-list {
  display: grid;
  gap: 12px;
  margin: 28px 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  font-size: 15px;
  line-height: 1.45;
}

.plan-featured .plan-list {
  border-top-color: rgba(255, 255, 255, 0.22);
}

.plan-list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
}

.plan-list li::before {
  color: var(--blue);
  content: "✓";
  font-weight: 800;
}

.plan-featured .plan-list li::before {
  color: var(--white);
}

.plan-list li.is-paid::before {
  color: var(--muted);
  content: "–";
}

.plan .button {
  width: 100%;
  margin-top: auto;
}

@media (max-width: 760px) {
  .plans {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .plan {
    padding: 24px 20px;
  }
}