/* Pautia landing page.
   Tokens first, then base, then components, in page order.
   No build step, no imports, no dependencies. One file, and it is the whole
   design system: a value that appears twice is a value that will drift. */

:root {
  --brand-600: #0e7c6b;
  --brand-700: #0b6459;
  --brand-100: #e6f4f1;
  --on-brand: #ffffff;
  --accent-line: #b45309;
  --inv-bg: #0b1220;
  --inv-fg: #ffffff;
  --inv-accent: #fbbf24;
  --ink-900: #0b1220;
  --ink-700: #263243;
  --ink-500: #5a6b7f;
  --ink-300: #a9b4c2;
  --line: #e3e8ef;
  --line-soft: #eef2f6;
  --bg: #ffffff;
  --bg-sub: #f6f8fa;
  /* A panel is the colour its section is not, so a section can alternate
     without every card having to know where it is going to land. */
  --panel: var(--bg-sub);
  --ok: #15803d;
  --warn: #b45309;
  --danger: #b42318;

  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 20px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: 1.5rem;
  --step-3: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --step-4: clamp(2rem, 1.4rem + 2.4vw, 3rem);

  --shadow-1: 0 1px 2px rgb(11 18 32 / 6%), 0 1px 3px rgb(11 18 32 / 4%);
  --shadow-2: 0 8px 24px rgb(11 18 32 / 10%);

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, sfmono-regular, menlo, monospace;
  --wrap: 1120px;
  --prose: 68ch;
  --header-h: 64px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand-600: #2fb39c;
    --brand-700: #57c9b4;
    --brand-100: #10312b;
    --on-brand: #06231e;
    --accent-line: #fbbf24;
    --inv-bg: #eef2f7;
    --inv-fg: #0b1220;
    --inv-accent: #92400e;
    --ink-900: #eef2f7;
    --ink-700: #c7d2df;
    --ink-500: #93a3b5;
    --ink-300: #5a6b7f;
    --line: #22303f;
    --line-soft: #1a2532;
    --bg: #0b1220;
    --bg-sub: #101a28;
    --ok: #4ade80;
    --warn: #fbbf24;
    --danger: #fda29b;
    --shadow-1: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow-2: 0 8px 24px rgb(0 0 0 / 45%);
  }
}

/* Base */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-700);
  font-family: var(--font);
  font-size: var(--step-1);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink-900);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 {
  font-size: var(--step-4);
}

h2 {
  font-size: var(--step-3);
}

h3 {
  font-size: var(--step-2);
}

p {
  margin: 0;
}

a {
  color: var(--brand-600);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--brand-700);
}

img,
svg {
  display: block;
  max-width: 100%;
}

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

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

[hidden] {
  display: none !important;
}

/* Layout */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.section {
  padding-block: var(--space-9);
  scroll-margin-top: calc(var(--header-h) + var(--space-4));
}

.section--sub {
  --panel: var(--bg);
  background: var(--bg-sub);
  border-block: 1px solid var(--line-soft);
}

.section__head {
  max-width: var(--prose);
  margin-bottom: var(--space-8);
}

.section__head p {
  margin-top: var(--space-4);
  color: var(--ink-500);
  font-size: var(--step-1);
}

.lede {
  max-width: var(--prose);
  font-size: var(--step-1);
  color: var(--ink-500);
}

.eyebrow {
  display: inline-block;
  margin-bottom: var(--space-3);
  color: var(--brand-600);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 10;
  padding: var(--space-2) var(--space-4);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-m);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn--primary {
  background: var(--brand-600);
  color: var(--on-brand);
}

.btn--primary:hover {
  background: var(--brand-700);
  color: var(--on-brand);
}

.btn--ghost {
  border-color: var(--line);
  background: var(--bg);
  color: var(--ink-900);
}

.btn--ghost:hover {
  border-color: var(--ink-300);
  color: var(--ink-900);
}

.btn--block {
  width: 100%;
}

/* Header */

.header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  border-bottom: 1px solid var(--line-soft);
  backdrop-filter: blur(8px);
}

.header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-900);
  font-size: var(--step-2);
  font-weight: 650;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand__mark {
  width: 28px;
  height: 28px;
  color: var(--brand-600);
}

.nav {
  display: flex;
  gap: var(--space-5);
}

.nav a {
  color: var(--ink-500);
  font-size: var(--step-0);
  text-decoration: none;
}

.nav a:hover {
  color: var(--ink-900);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Menus. The mobile navigation and the language picker are the same component:
   one class for the panel, one for its items, one behaviour. A details element,
   so it opens and closes with the keyboard and needs no script; the script only
   adds what a details element does not do by itself. */

.menu {
  position: relative;
  flex: 0 0 auto;
}

.menu__summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-s);
  color: var(--ink-700);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.menu__summary::-webkit-details-marker {
  display: none;
}

.menu__summary:hover {
  background: var(--bg-sub);
  color: var(--ink-900);
}

.menu__summary svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

/* The panel is as wide as what is inside it and never wider than the screen, so
   the items are not left floating in an empty box. It hangs from the button that
   opened it, which is what makes both menus read the same. */
.menu__body {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 1;
  display: grid;
  gap: var(--space-1);
  width: max-content;
  max-width: calc(100vw - var(--space-4) * 2);
  padding: var(--space-2);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-2);
}

.menu__item {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-s);
  color: var(--ink-900);
  text-decoration: none;
  white-space: nowrap;
}

.menu__item:hover {
  background: var(--bg-sub);
}

.menu__item[aria-current="true"] {
  font-weight: 650;
}

/* The navigation fits the header until it stops fitting, and then its links
   become a button. The button is the shared menu component above; this is the
   only thing that differs about it. */
.nav-toggle {
  display: none;
}

@media (max-width: 900px) {
  .nav {
    display: none;
  }

  .nav-toggle {
    display: block;
  }
}

@media (max-width: 640px) {
  .header__actions .btn {
    padding-inline: var(--space-4);
    white-space: nowrap;
  }
}

/* Narrower than this the header cannot hold the brand, the menu, the language
   and the call to action at once. The hero carries the same call to action right
   below, so the header keeps what navigates. */
@media (max-width: 520px) {
  .header__actions > .btn {
    display: none;
  }
}

/* Language picker. A details element, so it opens and closes with the keyboard
   and needs no script; the script only fills it in and swaps the language. */

.lang {
  position: relative;
  flex: 0 0 auto;
}

.lang__summary {
  display: flex;
  align-items: center;
  padding: var(--space-2);
  border-radius: var(--radius-s);
  color: var(--ink-700);
  cursor: pointer;
  list-style: none;
}

.lang__summary::-webkit-details-marker {
  display: none;
}

.lang__summary:hover {
  background: var(--bg-sub);
  color: var(--ink-900);
}

.lang__summary svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.lang__body {
  position: absolute;
  inset: calc(100% + var(--space-2)) 0 auto auto;
  display: grid;
  min-width: 9rem;
  padding: var(--space-2);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-2);
}

.lang__option {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-s);
  color: var(--ink-700);
  text-decoration: none;
  white-space: nowrap;
}

.lang__option:hover {
  background: var(--bg-sub);
}

.lang__option[aria-current="true"] {
  color: var(--ink-900);
  font-weight: 650;
}

/* Hero */

.hero {
  padding-block: var(--space-9) var(--space-8);
}

.hero__grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

.hero h1 {
  max-width: 16ch;
}

.hero__sub {
  max-width: 46ch;
  margin-top: var(--space-5);
  font-size: var(--step-1);
  color: var(--ink-500);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.hero__note {
  margin-top: var(--space-4);
  color: var(--ink-500);
  font-size: var(--step--1);
}

/* Conversation mockup. Decorative: it is a drawing, not a screenshot. */

.mock {
  padding: var(--space-4);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-2);
}

.mock__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-2) var(--space-4);
}

.mock__avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: var(--brand-600);
  border-radius: var(--radius-pill);
  color: var(--on-brand);
}

.mock__who {
  color: var(--ink-900);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.2;
}

.mock__state {
  color: var(--ink-500);
  font-size: var(--step--1);
}

.mock__thread {
  display: grid;
  gap: var(--space-2);
}

.bubble {
  max-width: 85%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-m);
  font-size: var(--step-0);
  line-height: 1.45;
}

.bubble--in {
  justify-self: start;
  background: var(--bg);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
  color: var(--ink-700);
}

.bubble--out {
  justify-self: end;
  background: var(--brand-600);
  border-bottom-right-radius: 4px;
  color: var(--on-brand);
}

.mock__caption {
  margin-top: var(--space-3);
  color: var(--ink-500);
  font-size: var(--step--1);
  text-align: center;
}

/* Problem */

.problem__grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 900px) {
  .problem__grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.say {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-line);
  border-radius: var(--radius-m);
  color: var(--ink-700);
}

.say + .say {
  margin-top: var(--space-3);
}

/* Steps */

.steps {
  display: grid;
  gap: var(--space-6);
  counter-reset: step;
}

@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.step {
  counter-increment: step;
}

.step::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-4);
  background: var(--brand-100);
  border-radius: var(--radius-pill);
  color: var(--brand-700);
  font-weight: 650;
}

.step p {
  margin-top: var(--space-3);
  color: var(--ink-500);
}

/* Features and cards */

.cards {
  display: grid;
  gap: var(--space-4);
}

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

@media (min-width: 900px) {
  .cards--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  padding: var(--space-5);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
}

.card h3 {
  font-size: var(--step-1);
  letter-spacing: -0.01em;
}

.card p {
  margin-top: var(--space-3);
  color: var(--ink-500);
  font-size: var(--step-0);
}

.card__icon {
  width: 24px;
  height: 24px;
  margin-bottom: var(--space-4);
  color: var(--brand-600);
}

.split {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: repeat(2, 1fr);
  }
}

.split__col {
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
}

.split__col--yes {
  background: var(--panel);
}

.split__col--no {
  background: var(--inv-bg);
  border-color: var(--inv-bg);
}

.split__col--no h3,
.split__col--no p {
  color: var(--inv-fg);
}

.split__col--no p {
  opacity: 0.78;
}

.split__label {
  display: block;
  margin-bottom: var(--space-4);
  color: var(--brand-600);
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.split__col--no .split__label {
  color: var(--inv-accent);
}

/* Use cases */

.usecases {
  display: grid;
  gap: var(--space-4);
}

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

@media (min-width: 900px) {
  .usecases {
    grid-template-columns: repeat(3, 1fr);
  }
}

.usecase {
  padding: var(--space-5);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
}

.usecase h3 {
  font-size: var(--step-1);
}

.usecase p {
  margin-top: var(--space-2);
  color: var(--ink-500);
  font-size: var(--step-0);
}

/* Plans */

/* The controls over the table are one line anchored to the edges, above the
   plans they announce: the period switch on the left, the currency on the
   right, and both small enough that the line fits a phone. */

.plans__bar {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-1);
  /* Close to the cards: the switch and the currency are part of the table they
     announce, not a section of their own. */
  margin-bottom: var(--space-4);
}

/* Whatever they carry below themselves belongs to the bar, not to each control,
   or the gap doubles and the two stop lining up. Named as well as inherited,
   because .plans__switch carries its own margin further down the file. */
.plans__bar .plans__switch,
.plans__bar .currency,
.plans__bar > * {
  margin-bottom: 0;
}

.plans__bar > :first-child {
  justify-self: start;
}

/* The currency is the menu component with room for sixteen of them, wearing the
   same pill as the period switch so the two read as one line of controls. */
.currency {
  justify-self: end;
  flex: 0 0 auto;
  padding: var(--space-1);
  background: var(--bg-sub);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  /* The button and every currency in its list inherit this one size, so what is
     fixed and what is offered read the same. */
  font-size: 0.8125rem;
}

.currency .menu__summary {
  gap: var(--space-1);
  /* As tall as a segment on the other side of the line, so both boxes are the
     same box and their tops meet. */
  min-height: 36px;
  padding: 0 var(--space-2);
  color: var(--ink-900);
  font-weight: 650;
}

.currency .menu__summary svg {
  width: 16px;
  height: 16px;
}

.currency .menu__summary:hover {
  background: var(--bg);
}

.currency .menu__body--tall {
  max-height: 18rem;
  overflow-y: auto;
}

.currency .menu__item {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
}

@media (min-width: 640px) {
  .plans__bar {
    gap: var(--space-4);
  }
}

.plans__switch {
  display: inline-flex;
  gap: var(--space-1);
  /* A fieldset carries 2px of inline margin of its own; the pill has to sit on
     the same edge as the currency, which the browser does not give it. */
  margin: 0;
  padding: var(--space-1);
  background: var(--bg-sub);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

.plans__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.plans__seg {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  color: var(--ink-500);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.plans__radio:checked + .plans__seg {
  background: var(--bg);
  box-shadow: var(--shadow-1);
  color: var(--ink-900);
}

.plans__radio:focus-visible + .plans__seg {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

.plans__save {
  color: var(--brand-600);
  font-size: 0.75rem;
  font-weight: 650;
}

/* Wider than the smallest phones, the controls grow a little: still smaller than
   the section first set them, but no longer cramped. A 320px screen keeps the
   compact size, which is what lets the two of them share one row even there. */
@media (min-width: 360px) {
  .plans__seg {
    min-height: 38px;
    font-size: 0.9375rem;
  }

  .plans__save {
    font-size: 0.8125rem;
  }

  .currency {
    font-size: 0.9375rem;
  }

  .currency .menu__summary {
    min-height: 38px;
  }

  .currency .menu__summary svg {
    width: 18px;
    height: 18px;
  }
}

.plans__grid {
  display: grid;
  /* minmax(0, 1fr), not 1fr: a track may not grow past its content, because
     Spanish is longer than English and would push the grid past the viewport. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

@media (min-width: 900px) {
  .plans__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.plan {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-6);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
}

.plan--top {
  border-color: var(--brand-600);
  box-shadow: var(--shadow-2);
}

/* The quoted plan is a band under the three priced ones: it spans every column
   and reads left to right, so it does not repeat limits it already inherits. */
.plan--wide {
  grid-column: 1 / -1;
  align-items: center;
  gap: var(--space-4) var(--space-6);
}

@media (min-width: 760px) {
  .plan--wide {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .plan--wide .plan__lead {
    flex: 0 1 320px;
  }

  .plan--wide .plan__pitch {
    min-height: 0;
  }

  .plan--wide .plan__quote {
    flex: 0 0 auto;
    margin-left: auto;
  }

  .plan--wide .price {
    margin-top: 0;
  }

  .plan--wide .plan__cta {
    flex: 0 0 auto;
    margin-top: 0;
  }
}

.plan__tag {
  align-self: flex-start;
  margin-bottom: var(--space-4);
  padding: var(--space-1) var(--space-3);
  background: var(--brand-100);
  border-radius: var(--radius-pill);
  color: var(--brand-700);
  font-size: var(--step--1);
  font-weight: 650;
}

/* The card that recommends itself carries a tag; the others reserve the same
   room with the same box, hidden, so every plan starts on the same line. */
.plan__tag--blank {
  visibility: hidden;
}

.plan__name {
  font-size: var(--step-2);
}

.plan__pitch {
  margin-top: var(--space-2);
  min-height: 3em;
  color: var(--ink-500);
  font-size: var(--step-0);
}

/* The figure on its line and what it buys under it: "al mes" never sits beside
   the price, so a long amount or a long currency cannot push it around, and the
   three cards read the same whatever they cost. */
.price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  margin-top: var(--space-5);
}

.price__amount {
  color: var(--ink-900);
  /* One step down from the display size: the figure is still the thing the eye
     lands on, and a price with a currency in front of it, MX$1.219,30, fits the
     card without crowding it. */
  font-size: var(--step-3);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1;
}

.price__amount--text {
  font-size: var(--step-2);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* What the annual price saves is shown by what it used to be, crossed out above
   it. The line runs at a slight angle on purpose: a flat rule cuts the figures
   in half and hides them, and the point of showing this price is that it can be
   read. */
.price__was {
  position: relative;
  display: inline-block;
  color: var(--ink-500);
  font-size: var(--step-1);
}

.price__was::after {
  content: "";
  position: absolute;
  inset: 55% 0 auto 0;
  border-top: 2px solid currentColor;
  transform: rotate(-8deg);
}

.price__unit {
  color: var(--ink-500);
  font-size: var(--step--1);
}

/* The monthly and the annual price are both in the HTML for the crawler, and
   the switch between them is CSS: two radios and no script. The ids are the
   same in both languages so this rule is written once. */

.price--yearly {
  display: none;
}

.plans:has(#period-yearly:checked) .price--monthly {
  display: none;
}

.plans:has(#period-yearly:checked) .price--yearly {
  display: flex;
}

.plan__cta {
  margin-top: var(--space-5);
}

.plan__rows {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  font-size: var(--step-0);
}

.row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
}

.row__key {
  color: var(--ink-500);
}

.row__value {
  /* "50 MB" is one thing, not two: it never breaks, and the label is what wraps
     if the row gets tight. */
  flex: 0 0 auto;
  color: var(--ink-900);
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.plans__note {
  max-width: var(--prose);
  margin-top: var(--space-6);
  color: var(--ink-500);
  font-size: var(--step-0);
}

.plans__shared {
  display: grid;
  gap: var(--space-2);
  max-width: var(--prose);
  margin-bottom: var(--space-6);
  color: var(--ink-500);
  font-size: var(--step-0);
}

.plans__shared li {
  display: flex;
  gap: var(--space-3);
}

.plans__shared li::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 0.25em;
  background: var(--brand-100);
  border-radius: var(--radius-pill);
}

/* FAQ */

.faq {
  display: grid;
  gap: var(--space-3);
  max-width: 880px;
}

.faq details {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 56px;
  padding: var(--space-4) var(--space-5);
  color: var(--ink-900);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

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

.faq summary::after {
  content: "+";
  flex: none;
  color: var(--ink-500);
  font-size: var(--step-2);
  font-weight: 400;
}

.faq details[open] summary::after {
  content: "−";
}

.faq__answer {
  padding: 0 var(--space-5) var(--space-5);
  max-width: var(--prose);
  color: var(--ink-500);
}

/* Privacy */

.facts {
  display: grid;
  gap: var(--space-4);
}

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

.fact {
  padding: var(--space-5);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
}

.fact dt {
  color: var(--ink-900);
  font-weight: 650;
}

.fact dd {
  margin: var(--space-2) 0 0;
  color: var(--ink-500);
  font-size: var(--step-0);
}

/* Final CTA */

.cta {
  padding-block: var(--space-9);
  background: var(--inv-bg);
  color: var(--inv-fg);
  text-align: center;
  scroll-margin-top: var(--header-h);
}

.cta h2 {
  color: var(--inv-fg);
}

.cta p {
  max-width: 52ch;
  margin: var(--space-4) auto 0;
  opacity: 0.8;
}

.cta .btn {
  margin-top: var(--space-6);
}

/* Footer */

.footer {
  padding-block: var(--space-8) var(--space-6);
  border-top: 1px solid var(--line);
  font-size: var(--step-0);
}

.footer__grid {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .footer__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.footer h3 {
  margin-bottom: var(--space-3);
  color: var(--ink-900);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.footer li + li {
  margin-top: var(--space-2);
}

.footer a {
  color: var(--ink-500);
  text-decoration: none;
}

.footer a:hover {
  color: var(--ink-900);
  text-decoration: underline;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  color: var(--ink-500);
  font-size: var(--step--1);
}