/*
 * The landing's styles, third version (owner, 2026-10-19: DECISIONS.es.md). Light only.
 *
 * Colours: the logo's navy and teal (below), on tokens.css (generated from packages/ui-tokens).
 * Geist for everything but what someone said, which is Castoro, as in the app. The logo is an image.
 *
 * Layout: one column for the phone first; from 760px the grids open, from 1024px the hero and the
 * bento go wide (content at most 1180px, reading pages at most 70 characters).
 *
 * Motion: the hero rises on load and its iPhone turns its screens; sections rise as they scroll in (where the
 * browser has scroll-driven animations); cards lift on hover. Nothing moves with reduced motion, and
 * nothing is ever hidden at rest.
 */

@font-face {
  font-family: Castoro;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/castoro-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: Castoro;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/castoro-latin-400-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/geist-latin-wght-normal.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
}

/* ---------- Tokens ---------- */

:root {
  --bg: #fbfcfe;
  --surface: #ffffff;
  --tint: #f0f4fa;
  --tint-2: #e6edf8;
  --ink: var(--mt-ink);
  --ink-2: var(--mt-ink-2);
  --ink-3: var(--mt-ink-3);
  --line: rgba(24, 34, 48, 0.09);
  --line-2: rgba(24, 34, 48, 0.16);
  /* The logo's navy and teal (owner, 2026-10-23, assets/brand). The app takes them later; then
     --navy goes back to var(--mt-deep). The logo's teal on navy (5.6:1) and, by the owner's choice, for
     the headlines' highlighted words (2.4:1, as in the logo); on light grounds --teal for graphics and
     large labels (3.4:1) and --teal-ink for small text (5:1). */
  --navy: #062b5b;
  --navy-2: #041f42;
  --teal-bright: #00b5d0;
  --teal: #0098b0;
  --teal-ink: #007a8c;
  --blue: var(--teal);
  --sky: #b8eaf2;
  --on-navy: #ffffff;
  --on-navy-2: rgba(255, 255, 255, 0.76);
  --up: var(--mt-up);
  --down: var(--mt-down);
  --amber: #a15c00;
  --glow: rgba(0, 181, 208, 0.24);
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.05), 0 6px 18px rgba(16, 24, 40, 0.06);
  --shadow-2: 0 2px 6px rgba(16, 24, 40, 0.06), 0 22px 48px rgba(16, 24, 40, 0.12);
  --shadow-3: 0 4px 10px rgba(16, 24, 40, 0.08), 0 40px 90px rgba(28, 44, 72, 0.22);
  --bezel: #0e1218;
  --flag-bg: #ffe58a;
  --flag-ink: #3a2a00;
  --sans: var(--mt-family-ui);
  --serif: var(--mt-family-display);
  --mono: var(--mt-family-mono);
  --gutter: 18px;
  --wide: 1180px;
  --measure: 70ch;
  --r-card: 28px;
  --r-small: 16px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: light;
  interpolate-size: allow-keywords;
}

@media (min-width: 760px) {
  :root {
    --gutter: 32px;
  }
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 18px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--teal-ink);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 8px;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--navy);
  text-wrap: balance;
}

h1 {
  font: 790 clamp(46px, 12vw, 92px) / 0.96 var(--sans);
  letter-spacing: -0.05em;
}

h2 {
  font: 770 clamp(36px, 8vw, 64px) / 1 var(--sans);
  letter-spacing: -0.045em;
}

h3 {
  font: 690 clamp(21px, 2.4vw, 25px) / 1.15 var(--sans);
  letter-spacing: -0.025em;
}

p {
  margin: 0;
  text-wrap: pretty;
}

.icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.wrap {
  width: 100%;
  max-width: calc(var(--wide) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sub {
  font-size: clamp(18px, 2.1vw, 21px);
  line-height: 1.45;
  color: var(--ink-2);
}

.sr-only,
.tabs > input,
.pricing > input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--navy);
  color: var(--on-navy);
}

.skip:focus {
  top: 12px;
}

/* ---------- Motion ---------- */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
}

@keyframes reveal {
  from {
    opacity: 0.2;
    transform: translateY(40px) scale(0.98);
  }
}

@keyframes bob {
  50% {
    transform: translateY(-10px);
  }
}

@keyframes level {
  0%,
  100% {
    transform: scaleY(0.45);
  }

  50% {
    transform: scaleY(1);
  }
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes draw {
  from {
    stroke-dashoffset: 400;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .rise {
    animation: rise 0.9s var(--ease) both;
  }

  .rise.d1 {
    animation-delay: 0.08s;
  }

  .rise.d2 {
    animation-delay: 0.16s;
  }

  .rise.d3 {
    animation-delay: 0.26s;
  }

  .rise.d4 {
    animation-delay: 0.38s;
  }

  .wave i {
    animation: level 2.4s ease-in-out infinite;
  }

  .wave i:nth-child(2) {
    animation-delay: 0.3s;
  }

  .wave i:nth-child(3) {
    animation-delay: 0.6s;
  }

  .wave i:nth-child(4) {
    animation-delay: 0.9s;
  }

  .wave i:nth-child(5) {
    animation-delay: 1.2s;
  }

  .spark path {
    stroke-dasharray: 400;
    animation: draw 1.6s var(--ease) both;
  }

  .lift {
    transition:
      transform 0.35s var(--ease),
      box-shadow 0.35s var(--ease);
  }

  .lift:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-3);
  }

  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }

    /* Cards, rows and items in a group enter one after another. */
    .reveal:nth-child(2) {
      animation-range: entry 10% entry 95%;
    }

    .reveal:nth-child(3) {
      animation-range: entry 20% entry 100%;
    }

    .reveal:nth-child(4) {
      animation-range: entry 30% entry 100%;
    }

    .reveal:nth-child(5) {
      animation-range: entry 40% entry 100%;
    }

    .reveal:nth-child(n + 6) {
      animation-range: entry 50% entry 100%;
    }

    .compare tbody tr {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }

    .spark path {
      animation: draw linear both;
      animation-timeline: view();
      animation-range: entry 20% entry 100%;
    }
  }
}

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

/* ---------- Header and footer ---------- */

/* Almost opaque, without a backdrop blur: the blur repainted under the header on every frame of a
   scroll, the most expensive thing on the page (measured on an Intel Mac, 2026-10-27). */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 5;
  background: rgba(251, 252, 254, 0.96);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--navy);
  text-decoration: none;
  flex-shrink: 0;
}

.brand img {
  display: block;
  height: 28px;
  width: auto;
}

/* The narrowest phones: a smaller logo beside the menu. */
@media (max-width: 420px) {
  .brand img {
    height: 22px;
  }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.site-nav a {
  font: 550 15px/1 var(--sans);
  color: var(--ink-2);
  text-decoration: none;
  padding: 10px;
  border-radius: 10px;
  transition: color 0.2s ease;
}

.site-nav a:hover {
  color: var(--teal);
}

/* Phones and narrow windows: the five links in a menu that opens under the header, with no script.
   The menu opens when its anchor (#menu), which draws no box so following it never scrolls the page,
   is the page's :target; following any other link, a section or the close button's #close, closes it. */
.menu-anchor {
  display: none;
}

.menu-button,
.menu-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border-radius: 12px;
  color: var(--ink);
}

.menu-button .icon,
.menu-close .icon {
  width: 24px;
  height: 24px;
}

@media (max-width: 899px) {
  .site-header .wrap {
    position: relative;
  }

  .site-nav {
    display: none;
  }

  .menu-button {
    display: inline-flex;
  }

  #menu:target ~ .site-header .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: grid;
    gap: 0;
    padding: 4px var(--gutter) 12px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 36px rgba(6, 43, 91, 0.1);
  }

  #menu:target ~ .site-header .site-nav a {
    padding: 15px 0;
    border-radius: 0;
    font-size: 17px;
    border-bottom: 1px solid var(--line);
  }

  #menu:target ~ .site-header .site-nav a:last-child {
    border-bottom: 0;
  }

  #menu:target ~ .site-header .menu-button {
    display: none;
  }

  #menu:target ~ .site-header .menu-close {
    display: inline-flex;
  }
}

/* The footer's height, one line, or two on narrow screens: the closing screen leaves it room. */
:root {
  --footer-h: 83px;
}

@media (max-width: 559px) {
  :root {
    --footer-h: 112px;
  }
}

.site-footer {
  margin-top: 120px;
  padding-block: 28px 32px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 14px;
}

/* One line: the copyright, and the two legal pages, which no header links to. */
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 22px;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.site-footer nav a {
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.2s ease;
}

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

.site-footer small {
  font-size: inherit;
}

/* ---------- The App Store badges (Apple's artwork, never altered or animated) ---------- */

.badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.badges a {
  display: block;
  line-height: 0;
  border-radius: 10px;
}

.badges img {
  height: 50px;
  width: auto;
}

.badges--center {
  justify-content: center;
}

/* One badge: with universal purchase the iPhone and Mac app share one App Store link. */
/* The store's page does not exist yet: the badge shows what is coming, with no link. */
.badge-soon {
  position: relative;
  display: block;
  line-height: 0;
}

.badge-soon img {
  opacity: 0.55;
}

.badge-soon__tag {
  position: absolute;
  top: -9px;
  right: -10px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--teal-bright);
  color: var(--navy);
  font: 700 11px/1 var(--sans);
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: var(--shadow-1);
}

.badges__for {
  font: 600 15px/1.3 var(--sans);
  color: var(--ink-2);
}

@media (max-width: 420px) {
  .badges {
    gap: 10px;
  }

  .badges img {
    height: 44px;
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(55% 60% at 78% 32%, var(--glow), transparent 70%),
    radial-gradient(40% 40% at 8% 90%, rgba(182, 211, 253, 0.35), transparent 70%),
    linear-gradient(180deg, var(--tint) 0%, var(--bg) 85%);
}

.hero .wrap {
  display: grid;
  gap: 56px;
  padding-block: 64px 88px;
}

.hero__text {
  display: grid;
  gap: 26px;
  align-content: center;
}

.hero .sub {
  max-width: 34rem;
}

.hero__note {
  font-size: 15px;
  color: var(--ink-3);
}

@media (min-width: 1024px) {
  .hero .wrap {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 32px;
    padding-block: 96px 120px;
  }
}

/* The picture: the brand's level bars and an iPhone whose key pieces lift out of the glass. */
.stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 560px;
}

.wave {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vw, 26px);
  opacity: 0.55;
}

.wave i {
  display: block;
  width: clamp(26px, 6vw, 46px);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--sky), rgba(182, 211, 253, 0.2));
  transform-origin: center;
}

.wave i:nth-child(1),
.wave i:nth-child(5) {
  height: 32%;
}

.wave i:nth-child(2) {
  height: 60%;
}

.wave i:nth-child(3) {
  height: 86%;
}

.wave i:nth-child(4) {
  height: 52%;
}

.stage .phone {
  width: min(285px, 74vw);
}

@media (min-width: 1024px) {
  .stage {
    min-height: 640px;
  }

  .stage .phone {
    width: 305px;
  }
}

/* ---------- iPhone ---------- */

.phone {
  position: relative;
  margin: 0;
  padding: 9px;
  border-radius: 54px;
  background: var(--bezel);
  box-shadow:
    var(--shadow-3),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.14);
  width: min(270px, 100%);
}

.phone::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 19px;
  left: 50%;
  width: 30%;
  height: 25px;
  transform: translateX(-50%);
  border-radius: 14px;
  background: #000000;
}

.phone img {
  width: 100%;
  height: auto;
  aspect-ratio: 390 / 844;
  object-fit: cover;
  border-radius: 45px;
  background: var(--tint);
}

/* The hero's iPhone shows five screens in turn, each arriving its own way: pushed in from the side,
   zoomed out of a blur, wiped up from below, pushed up, and settled in. The screens are the app's own
   panoramas; over each, one card with a few words. With reduced motion, the first screen and card alone. */
.screens {
  display: grid;
  overflow: hidden;
  border-radius: 45px;
  isolation: isolate;
}

.screens img {
  grid-area: 1 / 1;
}

.screens img + img {
  opacity: 0;
}

/* Over each screen, one card with a few words, a little wider than the glass, as in a product shot. */
.hcards {
  position: absolute;
  inset: 9px;
  pointer-events: none;
}

.hcard {
  position: absolute;
  left: -9%;
  right: -9%;
  top: 64%;
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.8),
    0 22px 48px rgba(6, 43, 91, 0.3);
  color: var(--ink);
  opacity: 0;
}

.hcard--1 {
  opacity: 1;
}

.hcard__label {
  font: 600 13px/1.3 var(--sans);
  color: var(--ink-3);
}

.hcard__name {
  font: 760 22px/1.15 var(--sans);
  letter-spacing: -0.02em;
  color: var(--navy);
}

.hcard__figure {
  justify-self: start;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--teal-bright) 18%, transparent);
  color: var(--teal-ink);
  font: 680 13px/1.3 var(--sans);
}

.hcard__quote {
  font: italic 400 20px/1.35 var(--serif);
  color: var(--ink);
}

.hcard--3 .stamp {
  justify-self: start;
}

.hcard__ask {
  justify-self: end;
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 18px 18px 4px 18px;
  background: var(--navy);
  color: var(--on-navy);
  font: 600 16px/1.3 var(--sans);
}

@media (prefers-reduced-motion: no-preference) {
  .screens img {
    animation: 20s ease-in-out infinite both;
  }

  .screens img:nth-child(1) {
    animation-name: screen-1;
  }

  .hcard--1 {
    animation: card-1 20s var(--ease) infinite both;
  }

  .screens img:nth-child(2) {
    animation-name: screen-2;
  }

  .hcard--2 {
    animation: card-2 20s var(--ease) infinite both;
  }

  .screens img:nth-child(3) {
    animation-name: screen-3;
  }

  .hcard--3 {
    animation: card-3 20s var(--ease) infinite both;
  }

  .screens img:nth-child(4) {
    animation-name: screen-4;
  }

  .hcard--4 {
    animation: card-4 20s var(--ease) infinite both;
  }

  .screens img:nth-child(5) {
    animation-name: screen-5;
  }

  .hcard--5 {
    animation: card-5 20s var(--ease) infinite both;
  }
}

/* Twenty seconds, a fifth for each screen; the change takes the last fifth of each slot.
   1 → 2 pushed aside, 2 → 3 zoomed out of a blur, 3 → 4 wiped up, 4 → 5 pushed up, 5 → 1 settled in. */
@keyframes screen-1 {
  0%,
  16% {
    opacity: 1;
    transform: none;
    z-index: 1;
  }

  20% {
    opacity: 0.4;
    transform: translateX(-34%) scale(0.96);
  }

  20.01%,
  96% {
    opacity: 0;
    transform: scale(1.06);
    z-index: 0;
  }

  100% {
    opacity: 1;
    transform: none;
    z-index: 1;
  }
}

@keyframes screen-2 {
  0%,
  16% {
    opacity: 1;
    transform: translateX(100%);
    z-index: 2;
  }

  20%,
  36% {
    opacity: 1;
    transform: none;
    filter: blur(0);
    z-index: 2;
  }

  40%,
  100% {
    opacity: 0;
    transform: scale(0.92);
    filter: blur(6px);
    z-index: 0;
  }
}

@keyframes screen-3 {
  0%,
  36% {
    opacity: 0;
    transform: scale(1.14);
    filter: blur(10px);
    z-index: 3;
  }

  40%,
  60% {
    opacity: 1;
    transform: none;
    filter: blur(0);
    z-index: 3;
  }

  60.01%,
  100% {
    opacity: 0;
    z-index: 0;
  }
}

@keyframes screen-4 {
  0%,
  56% {
    opacity: 1;
    clip-path: inset(100% 0 0 0 round 45px);
    transform: none;
    z-index: 4;
  }

  60%,
  76% {
    opacity: 1;
    clip-path: inset(0 0 0 0 round 45px);
    transform: none;
    z-index: 4;
  }

  80% {
    opacity: 0.3;
    clip-path: inset(0 0 0 0 round 45px);
    transform: translateY(-22%);
  }

  80.01%,
  100% {
    opacity: 0;
    z-index: 0;
  }
}

@keyframes screen-5 {
  0%,
  76% {
    opacity: 1;
    transform: translateY(100%);
    z-index: 5;
  }

  80%,
  96% {
    opacity: 1;
    transform: none;
    z-index: 5;
  }

  100% {
    opacity: 0;
    transform: none;
    z-index: 5;
  }
}

@keyframes card-1 {
  0%,
  2% {
    opacity: 0;
    transform: translateY(18px) scale(0.94);
  }

  5%,
  13% {
    opacity: 1;
    transform: none;
  }

  15.5%,
  100% {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
}

@keyframes card-2 {
  0%,
  22% {
    opacity: 0;
    transform: translateY(18px) scale(0.94);
  }

  25%,
  33% {
    opacity: 1;
    transform: none;
  }

  35.5%,
  100% {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
}

@keyframes card-3 {
  0%,
  42% {
    opacity: 0;
    transform: translateY(18px) scale(0.94);
  }

  45%,
  53% {
    opacity: 1;
    transform: none;
  }

  55.5%,
  100% {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
}

@keyframes card-4 {
  0%,
  62% {
    opacity: 0;
    transform: translateY(18px) scale(0.94);
  }

  65%,
  73% {
    opacity: 1;
    transform: none;
  }

  75.5%,
  100% {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
}

@keyframes card-5 {
  0%,
  82% {
    opacity: 0;
    transform: translateY(18px) scale(0.94);
  }

  85%,
  93% {
    opacity: 1;
    transform: none;
  }

  95.5%,
  100% {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
}

/* ---------- Pieces of the app, drawn in the page ---------- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 13px/1.3 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
}

.stamp {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 650 13px/1.2 var(--sans);
  padding: 6px 11px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--tint);
  color: var(--ink-2);
}

.stamp--up {
  color: var(--up);
  background: color-mix(in srgb, var(--up) 12%, transparent);
}

.stamp--down {
  color: var(--down);
  background: color-mix(in srgb, var(--down) 11%, transparent);
}

.stamp--moment {
  color: var(--teal-ink);
  background: color-mix(in srgb, var(--teal) 14%, transparent);
}

.stamp--mid {
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 12%, transparent);
}

.said {
  font: italic 400 18px/1.4 var(--serif);
  color: var(--ink);
}

.who {
  font: 600 13px/1.3 var(--sans);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.avatar {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font: 680 12px/1 var(--sans);
  color: var(--mt-person-ink);
  flex-shrink: 0;
}

.avatar--you {
  background: var(--mt-person-11);
}

.avatar--tom {
  background: var(--mt-person-6);
}

.avatar--jonas {
  background: var(--mt-person-4);
}

.avatar--unknown {
  background: var(--ink-3);
}

.avatar--priya {
  background: var(--mt-person-14);
}

.avatar--marta {
  background: var(--mt-person-16);
}

.avatar--laura {
  background: var(--mt-person-13);
}

.bubble {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  align-items: start;
}

.bubble .avatar {
  grid-row: span 2;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* In the row of four cards the tell card's quotes are smaller, so its proof and the other tells fit. */
@media (min-width: 1024px) {
}

.chip {
  font: 650 12px/1.3 var(--sans);
  padding: 6px 9px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.spark {
  width: 100%;
  height: auto;
  overflow: visible;
}

.spark path {
  fill: none;
  stroke: var(--blue);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.spark .area {
  fill: color-mix(in srgb, var(--blue) 12%, transparent);
  stroke: none;
}

/* ---------- Sections ---------- */

.section {
  padding-top: 120px;
}

.head {
  display: grid;
  gap: 16px;
  max-width: 48rem;
  margin-bottom: 40px;
}

.head--center {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}

/* Wide screens: a headline on one line where it fits, its subtitle at reading width. */
@media (min-width: 1024px) {
  .head {
    max-width: none;
  }

  .head .sub {
    max-width: 48rem;
  }
}

@media (min-width: 1024px) {
  .section {
    padding-top: 160px;
  }
}

/* Where conversations come from: a band of the apps MasterTells reads, scrolling on its own. */
.sources {
  padding-top: 24px;
  text-align: center;
}

.sources__title {
  font-size: 15px;
  color: var(--ink-3);
  padding-inline: var(--gutter);
}

.marquee {
  display: flex;
  overflow: hidden;
  margin-top: 18px;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.marquee__track {
  list-style: none;
  margin: 0;
  padding: 0 14px 0 0;
  display: flex;
  flex-shrink: 0;
  gap: 14px;
}

.marquee__track li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font: 650 16px/1 var(--sans);
  color: var(--ink-2);
  white-space: nowrap;
}

.marquee__track img {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}

/* Word and PDF are formats, not apps: a tile of the format's usual colour, no one's logo. */
.marquee__track .tile {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: inline-grid;
  place-items: center;
  color: #fff;
}

.marquee__track .tile .icon {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.tile--docx {
  background: #185abd;
}

.tile--pdf {
  background: #e5252a;
}

@keyframes marquee {
  to {
    transform: translateX(-100%);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .marquee__track {
    animation: marquee 48s linear infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee {
    mask-image: none;
    justify-content: center;
  }

  .marquee__track {
    flex-wrap: wrap;
    flex-shrink: 1;
    justify-content: center;
    padding: 0 var(--gutter);
  }

  .marquee__track[aria-hidden='true'] {
    display: none;
  }
}

/* The clues every conversation leaves: a conversation with them marked. */
.transcript {
  margin: 0 auto;
  max-width: 900px;
  display: grid;
  gap: 4px;
  padding: clamp(18px, 3vw, 32px);
  border-radius: 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-3);
}

.transcript__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font: 600 13px/1.3 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
}

/* An objection, the answer that moved on, and the mark MasterTells puts on it. */
.exchange {
  display: grid;
  gap: 12px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.exchange__lines {
  display: grid;
  gap: 10px;
}

.line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 14px;
  align-items: start;
}

.line__text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.line .said {
  font-size: clamp(16px, 1.8vw, 19px);
}

.line mark {
  color: inherit;
  padding: 0.05em 0.15em;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(0, 181, 208, 0.2), rgba(0, 181, 208, 0.26)) no-repeat;
  background-size: 100% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.clue {
  justify-self: start;
  margin-left: 46px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--teal) 12%, var(--surface));
  color: var(--teal-ink);
  font: 680 14px/1.2 var(--sans);
}

.clue .num {
  margin-right: 0;
}

.clue .icon {
  width: 18px;
  height: 18px;
}

/* What MasterTells makes of them. */
.verdict {
  display: grid;
  gap: 16px;
  margin-top: 18px;
  padding: 22px 24px;
  border-radius: 22px;
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(0, 181, 208, 0.26), transparent 70%), var(--navy);
  color: var(--on-navy);
}

.verdict div {
  display: grid;
  gap: 6px;
  align-content: start;
}

.verdict__label {
  font: 600 13px/1.3 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--teal-bright);
}

.verdict b {
  font: 720 19px/1.25 var(--sans);
}

.verdict p {
  font-size: 16px;
  line-height: 1.45;
  color: var(--on-navy-2);
}

/* What MasterTells makes of each clue: a label and a line, the same in every column. */

/* The conversation's six scores for you; the lowest stands out. */
.verdict__scores {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
}

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

.verdict__scores div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: baseline;
  gap: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.verdict__scores dt {
  font-size: 15px;
  color: var(--on-navy-2);
}

.verdict__scores dd {
  margin: 0;
  font: 720 20px/1 var(--sans);
  color: var(--on-navy);
  font-variant-numeric: tabular-nums;
}

/* Each clue is the evidence for one score: the clue and its score carry the same number. */
.num {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--teal-bright);
  color: var(--navy);
  font: 720 11px/1 var(--sans);
  font-style: normal;
  letter-spacing: 0;
  vertical-align: 1px;
}

.outcome span {
  color: var(--navy);
}

.verdict__scores .is-linked dt,
.verdict__scores .is-linked dd {
  color: var(--teal-bright);
}

.verdict__scores dt {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.verdict__scores small {
  grid-column: 1 / -1;
  font: 600 13px/1.3 var(--sans);
  letter-spacing: 0;
  color: var(--on-navy-2);
}

.verdict__scores .is-off dd {
  color: var(--on-navy-2);
}

@media (min-width: 1024px) {
  .verdict__scores {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .verdict__scores div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .verdict__scores dd {
    font-size: 28px;
  }
}

/* On wide screens the three exchanges stand side by side, so the section fits one screen. */
@media (min-width: 1024px) {
  .transcript {
    max-width: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .transcript__head,
  .verdict {
    grid-column: 1 / -1;
  }

  .exchange {
    grid-template-rows: 1fr auto auto;
    gap: 16px;
    padding: 20px 24px 4px;
    border-bottom: 0;
    border-left: 1px solid var(--line);
  }

  .transcript__head + .exchange {
    border-left: 0;
    padding-left: 0;
  }

  .exchange:has(+ .verdict) {
    padding-right: 0;
  }

  .exchange__lines {
    align-content: start;
    gap: 8px;
  }

  .exchange .line .said {
    font-size: 16px;
  }

  .verdict {
    margin-top: 10px;
    padding: 14px 24px;
    gap: 8px;
  }

  .verdict__scores div {
    gap: 3px;
  }

  .verdict__scores dd {
    font-size: 24px;
  }

  .line .said {
    font-size: 17px;
  }
}

@keyframes highlight {
  from {
    background-size: 0% 100%;
  }
}

@keyframes pop {
  from {
    opacity: 0;
    transform: translateX(16px) scale(0.92);
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .line mark {
      animation: highlight linear both;
      animation-timeline: view();
      animation-range: entry 50% entry 100%;
    }

    .line .clue {
      animation: pop linear both;
      animation-timeline: view();
      animation-range: entry 60% entry 100%;
    }
  }
}

/* Bento: what MasterTells finds, each card with a piece of the app. */
.bento {
  display: grid;
  gap: 16px;
}

.card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 18px;
  padding: 28px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.card > p {
  color: var(--ink-2);
  font-size: 17px;
}

.card__show {
  align-self: stretch;
  align-content: center;
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 20px;
  background: var(--tint);
}

.card--hero {
  background:
    radial-gradient(70% 60% at 90% 0%, rgba(182, 211, 253, 0.45), transparent 70%), var(--surface);
}

.card--hero .card__show {
  background: var(--surface);
  box-shadow: var(--shadow-2);
  border: 1px solid var(--line);
}

.spark--big {
  max-width: none;
  height: 96px;
}

.tell-name {
  font: 720 clamp(22px, 3vw, 28px) / 1.15 var(--sans);
  letter-spacing: -0.03em;
  color: var(--navy);
}

.trend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.trend .spark {
  flex: 1 1 120px;
  min-width: 0;
  max-width: 160px;
}

/* One piece per card: a big quote, the list of a person's tells. */
.said--big {
  font-size: 22px;
  line-height: 1.35;
}

.tell-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.tell-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--tint);
  color: var(--ink-2);
  font-size: 15px;
}

.tell-list b {
  font-weight: 600;
}

.tell-list span {
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  white-space: nowrap;
}

.tell-list .is-on {
  background: var(--navy);
  color: var(--on-navy);
  box-shadow: var(--shadow-2);
}

.tell-list .is-on b {
  font-size: 17px;
}

.tell-list .is-on span {
  color: var(--teal-bright);
}

.claim-row {
  display: grid;
  gap: 8px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-2);
}

.claim-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.claim-row:first-child {
  padding-top: 0;
}

.claim-row .said {
  font-size: 16px;
}

.notes dt {
  font: 680 14px/1.3 var(--sans);
  color: var(--ink);
  margin-top: 8px;
}

.notes dt:first-child {
  margin-top: 0;
}

.notes dd {
  margin: 0;
  font-size: 16px;
  color: var(--ink-2);
  padding: 6px 0;
  border-bottom: 1px solid var(--line-2);
}

.ask-q {
  justify-self: end;
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 18px 18px 4px 18px;
  background: var(--navy);
  color: var(--on-navy);
  font-size: 15px;
  line-height: 1.35;
}

/* The three things to try, each with the moment it comes from. */
.tries {
  list-style: none;
  counter-reset: try;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.tries li {
  counter-increment: try;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink);
}

.tries li::before {
  content: counter(try);
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--teal-bright);
  color: var(--navy);
  font: 720 12px/1 var(--sans);
}

.paper {
  justify-self: center;
  width: min(220px, 100%);
  display: grid;
  gap: 10px;
  padding: 18px 16px;
  border-radius: 6px;
  background: var(--surface);
  box-shadow: var(--shadow-2);
  transform: rotate(-2deg);
}

.paper b {
  font: 700 15px/1.25 var(--sans);
  color: var(--navy);
}

.paper__bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 46px;
}

.paper__bars i {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: var(--blue);
}

.paper__bars i:nth-child(1) {
  height: 70%;
}

.paper__bars i:nth-child(2) {
  height: 100%;
  background: var(--sky);
}

.paper__bars i:nth-child(3) {
  height: 45%;
}

.paper__bars i:nth-child(4) {
  height: 60%;
  background: var(--sky);
}

.paper__lines {
  display: grid;
  gap: 6px;
}

.paper__lines i {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--tint-2);
}

.paper__lines i:nth-child(2) {
  width: 85%;
}

.paper__lines i:nth-child(3) {
  width: 60%;
}

.dims {
  margin: 0;
  gap: 10px;
}

.dim {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.dim dt {
  color: var(--ink-2);
  font-weight: 560;
}

.dim dd {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: center;
  gap: 8px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  color: var(--navy);
}

.dim dd i {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--sky));
  transform-origin: left;
}

.dim--90 dd i {
  width: 90%;
}

.dim--80 dd i {
  width: 80%;
}

.dim--70 dd i {
  width: 70%;
}

.dim--50 dd i {
  width: 50%;
  background: linear-gradient(90deg, var(--down), color-mix(in srgb, var(--down) 50%, transparent));
}

@keyframes grow {
  from {
    transform: scaleX(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .dim dd i,
    .bar i,
    .paper__bars i {
      animation: grow linear both;
      animation-timeline: view();
      animation-range: entry 40% entry 100%;
    }

    .paper__bars i {
      transform-origin: bottom;
      animation-name: rise-bar;
    }
  }
}

@keyframes rise-bar {
  from {
    transform: scaleY(0);
  }
}

.big-figure {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.big-figure b {
  font: 780 56px/1 var(--sans);
  letter-spacing: -0.04em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.big-figure span {
  font: 650 16px/1.3 var(--sans);
  color: var(--up);
}

@media (min-width: 760px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card--hero,
  .card--wide {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .bento {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .card {
    grid-column: span 2;
  }

  .card--hero {
    grid-column: span 4;
    grid-row: span 2;
  }

  .card--tall {
    grid-column: span 2;
    grid-row: span 2;
  }

  .card--wide {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    grid-template-rows: auto;
    align-items: center;
  }
}

/* Four cards to a section: a row on wide screens, so each section fits one screen. */
@media (min-width: 760px) {
  .bento--four .card--hero {
    grid-column: auto;
  }
}

@media (min-width: 1024px) {
  .bento--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .bento--four .card,
  .bento--four .card--hero,
  .bento--four .card--tall {
    grid-column: auto;
    grid-row: auto;
    padding: 22px;
    gap: 12px;
  }

  .bento--four .card > p {
    font-size: 15px;
  }

  .bento--four .card__show {
    padding: 16px;
    gap: 10px;
  }

  .bento--four .tell-name {
    font-size: 22px;
  }

  .bento--four .spark--big {
    height: 64px;
  }
}

/* Who it's for: a tab per kind of person, with no script. */
.tablist {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* Snapping keeps the gutter: the first tab lines up with the text above, not the screen's edge. */
  scroll-padding-inline: var(--gutter);
  margin-inline: calc(-1 * var(--gutter));
  padding: 4px var(--gutter) 12px;
  scrollbar-width: none;
}

.tablist::-webkit-scrollbar {
  display: none;
}

.tablist label {
  flex-shrink: 0;
  scroll-snap-align: start;
  cursor: pointer;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  font: 620 15px/1 var(--sans);
  color: var(--ink-2);
  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

.tablist label:hover {
  border-color: var(--teal);
  color: var(--teal);
}

.panel {
  display: none;
  margin-top: 20px;
  gap: 28px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 32px;
  background:
    radial-gradient(60% 70% at 100% 0%, rgba(0, 181, 208, 0.16), transparent 70%), var(--tint);
}

.panel__text {
  display: grid;
  gap: 16px;
  align-content: center;
}

.panel__text ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  color: var(--ink-2);
}

.panel__text li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
}

.panel__text li .icon {
  color: var(--teal);
  margin-top: 3px;
}

.panel__media {
  position: relative;
  padding-bottom: 56px;
}

.panel__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: var(--shadow-2);
}

.panel__show {
  position: absolute;
  left: 16px;
  bottom: 0;
  width: min(300px, calc(100% - 32px));
  display: grid;
  gap: 10px;
  align-content: center;
  padding: 18px 20px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-3);
  border: 1px solid var(--line);
}

.panel__show .tell-name {
  font-size: 22px;
}

@media (prefers-reduced-motion: no-preference) {
  .panel .panel__show {
    animation: rise 0.6s var(--ease) 0.15s both;
  }

  .panel .panel__media img {
    animation: panel-in 0.6s var(--ease) both;
  }
}

.bars {
  display: grid;
  gap: 10px;
}

.bar {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.bar i {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: var(--blue);
}

.bar--66 i {
  width: 66%;
}

.bar--13 i {
  width: 13%;
  background: var(--sky);
}

.bar--12 i {
  width: 12%;
  background: var(--sky);
}

.bar--9 i {
  width: 9%;
  background: var(--tint-2);
}

.speak {
  display: grid;
  gap: 4px;
}

.speak dt {
  font: 650 15px/1.3 var(--sans);
  color: var(--ink);
}

.speak dd {
  margin: 0 0 10px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.speak dd b {
  color: var(--up);
  font-weight: 650;
}

#who-managers:checked ~ .tablist label[for='who-managers'],
#who-sales:checked ~ .tablist label[for='who-sales'],
#who-founders:checked ~ .tablist label[for='who-founders'],
#who-speakers:checked ~ .tablist label[for='who-speakers'],
#who-coaches:checked ~ .tablist label[for='who-coaches'],
#who-sports:checked ~ .tablist label[for='who-sports'],
#who-everyone:checked ~ .tablist label[for='who-everyone'] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--on-navy);
}

#who-managers:focus-visible ~ .tablist label[for='who-managers'],
#who-sales:focus-visible ~ .tablist label[for='who-sales'],
#who-founders:focus-visible ~ .tablist label[for='who-founders'],
#who-speakers:focus-visible ~ .tablist label[for='who-speakers'],
#who-coaches:focus-visible ~ .tablist label[for='who-coaches'],
#who-sports:focus-visible ~ .tablist label[for='who-sports'],
#who-everyone:focus-visible ~ .tablist label[for='who-everyone'] {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

#who-managers:checked ~ .panels .panel--managers,
#who-sales:checked ~ .panels .panel--sales,
#who-founders:checked ~ .panels .panel--founders,
#who-speakers:checked ~ .panels .panel--speakers,
#who-coaches:checked ~ .panels .panel--coaches,
#who-sports:checked ~ .panels .panel--sports,
#who-everyone:checked ~ .panels .panel--everyone {
  display: grid;
}

@media (prefers-reduced-motion: no-preference) {
  .panel {
    animation: panel-in 0.45s var(--ease) both;
  }
}

@media (min-width: 900px) {
  .panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
  }

  .tablist {
    flex-wrap: wrap;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
}

/* More than a note taker. */
.compare {
  overflow-x: auto;
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-2);
  border: 1px solid var(--line);
}

.compare table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 16px;
}

.compare th,
.compare td {
  padding: 11px 20px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.compare tbody tr:last-child th,
.compare tbody tr:last-child td {
  border-bottom: 0;
}

.compare thead th {
  font: 680 15px/1.2 var(--sans);
  color: var(--ink-3);
  padding-block: 14px;
}

.compare thead th:nth-child(2),
.compare td:nth-child(2) {
  background: var(--tint);
}

.compare thead th:last-child {
  background: var(--navy);
}

.compare thead th:last-child img {
  display: block;
  width: 132px;
  max-width: 100%;
  height: auto;
}

.compare tbody th {
  font-weight: 560;
  color: var(--ink);
}

.compare td {
  width: 26%;
  color: var(--ink-2);
  font-size: 15px;
}

.compare td:last-child {
  background: var(--navy);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  color: var(--on-navy);
  font-weight: 560;
}

.compare td span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.compare .yes .icon {
  color: var(--ink-3);
}

.compare td:last-child .yes .icon {
  color: var(--teal-bright);
}

.compare .no .icon {
  color: var(--ink-3);
  opacity: 0.6;
}

/* On the phone the table keeps its icons only, so all three columns fit. */
@media (max-width: 640px) {
  .compare table {
    min-width: 0;
    font-size: 15px;
  }

  .compare th,
  .compare td {
    padding: 14px 12px;
  }

  .compare td {
    width: 76px;
    text-align: center;
  }

  .compare td span {
    font-size: 0;
  }

  .compare thead th {
    font-size: 13px;
    text-align: center;
  }

  .compare thead th:first-child {
    text-align: left;
  }

  .compare thead th:last-child img {
    width: 36px;
    margin-inline: auto;
  }
}

/* Privacy. */
.private {
  display: grid;
  gap: 40px;
  padding: clamp(28px, 5vw, 64px);
  border-radius: 36px;
  background:
    radial-gradient(60% 70% at 0% 0%, rgba(182, 211, 253, 0.55), transparent 70%),
    radial-gradient(50% 60% at 100% 100%, rgba(0, 181, 208, 0.2), transparent 70%), var(--tint);
}

.private__head {
  display: grid;
  gap: 18px;
  align-content: start;
}

.lock {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: var(--navy);
  color: var(--teal-bright);
  box-shadow: var(--shadow-2);
}

.lock .icon {
  width: 32px;
  height: 32px;
}

.promises {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.promise {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 4px 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-2);
}

.promise:last-child {
  border-bottom: 0;
}

.promise .icon {
  grid-row: span 2;
  color: var(--teal);
  margin-top: 2px;
}

.promise b {
  font: 690 18px/1.3 var(--sans);
  color: var(--navy);
}

.promise span {
  color: var(--ink-2);
  font-size: 16px;
}

.compliance {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.compliance span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  font: 600 14px/1.2 var(--sans);
  color: var(--ink-2);
}

.compliance .icon {
  width: 18px;
  height: 18px;
  color: var(--teal);
}

@media (min-width: 1024px) {
  .private {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 64px;
  }
}

/* Pricing. */
/* The subtitle and the switch share a row: centred and stacked on the phone, side by side wide. */
.head__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 32px;
}

.billing-row {
  display: flex;
  justify-content: center;
}

.head__row .sub,
.head__row .billing {
  margin: 0;
}

.billing {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 5px;
  border-radius: 999px;
  background: var(--tint-2);
  margin-bottom: 36px;
}

.billing__thumb {
  position: absolute;
  inset: 5px auto 5px 5px;
  width: calc(50% - 5px);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-1);
  transition: transform 0.35s var(--ease);
}

#bill-year:checked ~ .head .billing__thumb {
  transform: translateX(100%);
}

.billing label {
  position: relative;
  z-index: 1;
  cursor: pointer;
  padding: 12px 22px;
  text-align: center;
  font: 650 15px/1 var(--sans);
  color: var(--ink-2);
  white-space: nowrap;
}

.billing label small {
  font-size: 13px;
  font-weight: 650;
  color: var(--up);
}

#bill-month:checked ~ .head label[for='bill-month'],
#bill-year:checked ~ .head label[for='bill-year'] {
  color: var(--ink);
}

#bill-month:focus-visible ~ .head .billing,
#bill-year:focus-visible ~ .head .billing {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.plans {
  display: grid;
  gap: 16px;
  align-items: stretch;
}

.plan {
  position: relative;
  display: grid;
  gap: 18px;
  align-content: start;
  padding: 30px 26px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}

.plan h3 {
  font-size: 22px;
}

.plan__for {
  font-size: 15px;
  color: var(--ink-3);
  margin-top: -10px;
}

.plan__price {
  display: grid;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}

.plan__price b {
  font: 790 46px/1 var(--sans);
  letter-spacing: -0.04em;
  color: var(--navy);
}

.plan__price b small {
  font: 600 16px/1 var(--sans);
  letter-spacing: 0;
  color: var(--ink-3);
}

.plan__price span {
  color: var(--ink-3);
  font-size: 14px;
}

/* More specific than .plan__price, which sets display: grid. */
.plan .price-year {
  display: none;
}

#bill-year:checked ~ .plans .price-year {
  display: grid;
}

#bill-year:checked ~ .plans .price-month {
  display: none;
}

.plan__hours {
  margin: 0;
  display: grid;
  gap: 8px;
}

.plan__hours div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--tint);
}

.plan__hours dt {
  font: 720 17px/1.2 var(--sans);
  color: var(--navy);
}

.plan__hours dd {
  margin: 0;
  font: 600 14px/1.2 var(--sans);
  color: var(--ink-2);
  text-align: right;
}

.plan ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
  font-size: 15px;
  color: var(--ink-2);
}

.plan li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
}

.plan li .icon {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--blue);
}

.plan--pro {
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(0, 181, 208, 0.28), transparent 70%), var(--navy);
  border-color: transparent;
  box-shadow: var(--shadow-3);
  color: var(--on-navy);
}

.plan--pro h3,
.plan--pro .plan__price b {
  color: var(--on-navy);
}

.plan--pro .plan__price b small,
.plan--pro .plan__price span,
.plan--pro .plan__for {
  color: var(--on-navy-2);
}

.plan--pro .plan__hours div {
  background: rgba(255, 255, 255, 0.12);
}

.plan--pro .plan__hours dt {
  color: var(--on-navy);
}

.plan--pro .plan__hours dd {
  color: var(--on-navy-2);
}

.plan--pro ul {
  color: var(--on-navy-2);
}

.plan--pro li .icon {
  color: var(--teal-bright);
}

.ribbon {
  position: absolute;
  top: -13px;
  left: 26px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--teal-bright);
  color: var(--navy);
  font: 700 12px/1 var(--sans);
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-1);
}

.extra {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  padding: 22px 26px;
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--teal-bright) 14%, var(--surface));
}

.extra h3 {
  font-size: 19px;
}

.extra ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.extra li {
  padding: 9px 13px;
  border-radius: 12px;
  background: var(--surface);
  font: 650 15px/1.2 var(--sans);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.extra p {
  color: var(--ink-2);
  font-size: 15px;
}

@media (min-width: 760px) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .plans {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .plan--pro {
    transform: translateY(-10px);
  }
}

/* FAQ. */
.faq {
  max-width: 52rem;
  margin-inline: auto;
  display: grid;
  gap: 8px;
}

/* The home's questions in two columns on wide screens, so they fit one screen. */
@media (min-width: 1024px) {
  #faq .faq {
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

.faq details {
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 0 22px;
  transition: box-shadow 0.25s ease;
}

.faq details[open] {
  box-shadow: var(--shadow-2);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  font: 650 18px/1.35 var(--sans);
  color: var(--ink);
}

/* The keyboard's focus rings the whole question, not the line inside it. */
.faq summary:focus-visible {
  outline: none;
}

.faq details:has(summary:focus-visible) {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* The home's questions: every closed one the same height, whatever its length. */
#faq .faq summary {
  min-height: 72px;
  padding-block: 12px;
}

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

.faq summary .icon {
  color: var(--teal);
  transition: transform 0.3s var(--ease);
}

.faq details[open] summary .icon {
  transform: rotate(45deg);
}

.faq .answer {
  padding: 0 0 22px;
  color: var(--ink-2);
  max-width: var(--measure);
}

@media (prefers-reduced-motion: no-preference) {
  .faq details::details-content {
    height: 0;
    overflow: clip;
    transition:
      height 0.35s var(--ease),
      content-visibility 0.35s allow-discrete;
  }

  .faq details[open]::details-content {
    height: auto;
  }
}

/* Prices on wide screens: tighter cards, so the plans, the switch and the extra hours fit one
   screen. */
@media (min-width: 1024px) {
  #pricing .head {
    margin-inline: 0;
    margin-bottom: 28px;
    text-align: left;
    justify-items: stretch;
  }

  .head__row {
    justify-content: space-between;
  }

  .plan {
    gap: 14px;
    padding: 24px 22px;
  }

  .plan__price b {
    font-size: 40px;
  }

  .plan__hours div {
    padding: 9px 12px;
  }

  .plan ul {
    gap: 7px;
    font-size: 14px;
  }

  .extra {
    margin-top: 14px;
    padding: 14px 22px;
  }
}

/* One section at a time on wide, tall-enough screens: each section is two screens of scroll, and for
   the first its content stays pinned, centred under the header; then it leaves as the next one
   comes. Nothing moves the scroll. Phones scroll as usual. */
@media (min-width: 1024px) and (min-height: 700px) {
  /* A link jumps straight to its section instead of scrolling through every held section on the way;
     the section it lands on fades in. */
  html {
    scroll-padding-top: 65px;
    scroll-behavior: auto;
  }

  @media (prefers-reduced-motion: no-preference) {
    .section:target > .wrap > * {
      animation: arrive 0.45s var(--ease) both;
    }
  }

  .section {
    height: 200svh;
    padding: 0;
    /* A link to a section lands once its headline has filled (70% into the hold) and before it fades. */
    scroll-margin-top: calc(-75svh - 65px);
  }

  /* The hero and its band make the first screen, and scroll away like a page: no hold. */
  .opening__stick {
    min-height: calc(100svh - 65px);
    display: grid;
    /* One column no wider than the screen: the band's moving track is wider than the page. */
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
  }

  .section > .wrap {
    position: sticky;
    top: 65px;
    min-height: calc(100svh - 65px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    padding-block: clamp(8px, 2vh, 40px);
  }

  /* Blocks centred with auto margins would shrink to their content in the grid: keep them full width. */
  .section > .wrap > * {
    width: 100%;
  }

  /* Headlines and their gap follow the screen's height, so the shortest laptops fit too. */
  .section h2 {
    font-size: min(64px, 6.5vh);
  }

  .section .head {
    gap: min(16px, 1.4vh);
    margin-bottom: min(40px, 3.5vh);
  }

  .bento--four .card {
    gap: min(12px, 1.2vh);
  }

  .bento--four .card__show {
    padding: min(16px, 1.8vh);
  }

  .bento--four .spark--big {
    height: min(64px, 6vh);
  }

  .plan {
    gap: min(14px, 1.4vh);
  }

  .compare th,
  .compare td {
    padding-block: min(11px, 1.3vh);
  }

  /* The last screen is the closing call and the footer: nothing to pin, nothing to fade. */
  .section.section--closing {
    height: auto;
  }

  .section--closing > .wrap {
    position: static;
    min-height: 0;
    animation: none;
  }

  /* The hero and the band of sources under it make the first screen together: the band is one row
     (about 130px with its margin) when it moves, and the iPhone shrinks on short screens to leave
     room for it. */
  .hero {
    display: grid;
    align-content: center;
    min-height: calc(100svh - 65px - 130px);
  }

  .hero .wrap {
    padding-block: clamp(12px, 2vh, 48px);
  }

  .stage {
    min-height: 0;
  }

  .stage .phone {
    width: min(305px, calc((100svh - 265px) * 0.47));
  }

  .sources {
    padding-bottom: 14px;
  }

  /* While one section leaves and the next arrives, the first fades out and the second fades in. */
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .section {
        view-timeline-name: --section;
      }

      .section > .wrap {
        animation: section-pass linear both;
        animation-timeline: --section;
        animation-range: cover 0% cover 100%;
      }

      /* A held section's headline fills with ink, line by line, as the page scrolls; the teal word
         is there from the start. The padding keeps the descenders inside the painted area. */
      .section .fill {
        padding-bottom: 0.14em;
        background: linear-gradient(
            90deg,
            var(--navy) 0 50%,
            color-mix(in srgb, var(--navy) 18%, transparent) 50% 100%
          )
          100% 0 / 200% 100% no-repeat;
        /* Filled as far as both the scroll and, after a link, the arrival allow: scrolling back always
           empties it again. */
        background-position: calc((1 - min(var(--scroll-fill), var(--arrive-fill))) * 100%) 0;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: scroll-fill linear both;
        animation-timeline: --section;
        animation-range: contain 0% contain 70%;
      }

      .section .fill .accent {
        color: var(--teal-bright);
      }

      /* Arriving by a link, the headline fills in front of the reader instead of being already full;
         the scroll still drives it as soon as the reader scrolls back. */
      .section:target .fill {
        animation:
          scroll-fill linear both,
          arrive-fill 1.1s var(--ease) 0.2s both;
        animation-timeline: --section, auto;
        animation-range:
          contain 0% contain 70%,
          normal;
      }
    }
  }
}

@keyframes arrive {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* How full a held section's headline is: as far as the scroll has gone, and, after a link, as far as
   the arrival has gone. */
@property --scroll-fill {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

@property --arrive-fill {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

@keyframes scroll-fill {
  from {
    --scroll-fill: 0;
  }

  to {
    --scroll-fill: 1;
  }
}

@keyframes arrive-fill {
  from {
    --arrive-fill: 0;
  }

  to {
    --arrive-fill: 1;
  }
}

@keyframes section-pass {
  0% {
    opacity: 0;
  }

  18%,
  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* The closing call. */
.closing {
  margin-top: 120px;
  padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 64px);
  border-radius: 40px;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 26px;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(0, 181, 208, 0.28), transparent 70%), var(--navy);
  overflow: hidden;
}

.closing h2 {
  color: var(--on-navy);
  max-width: 15ch;
}

/* "tells" in the headlines takes the logo's teal, as "Tells" does in the logo. */
.accent {
  color: var(--teal-bright);
}

.closing .accent {
  color: var(--teal-bright);
}

.closing p {
  color: var(--on-navy-2);
}

/* The last screen: the closing call centred between the header and the footer, with nothing of the
   section before it in view. */
.section--closing {
  min-height: calc(100svh - 65px - var(--footer-h));
  display: grid;
  align-content: center;
  padding-block: 24px;
}

.section--closing .closing {
  margin-top: 0;
}

body:has(.section--closing) .site-footer {
  margin-top: 0;
}

/* ---------- Reading pages: privacy, terms, support ---------- */

.doc {
  padding-block: 48px 0;
}

.doc__head {
  display: grid;
  gap: 14px;
  margin-bottom: 32px;
  max-width: var(--measure);
}

.doc__head h1 {
  font-size: clamp(38px, 8vw, 60px);
}

.prose {
  max-width: var(--measure);
  display: grid;
  gap: 14px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
}

.prose strong {
  color: var(--ink);
}

.prose h2 {
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin-top: 28px;
  scroll-margin-top: 88px;
}

.prose ul {
  margin: 0;
  padding-left: 1.3em;
  display: grid;
  gap: 8px;
}

.prose li::marker {
  color: var(--ink-3);
}

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line-2);
  border-radius: var(--r-small);
}

.prose table {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  font-size: 15px;
  line-height: 1.45;
}

.prose th,
.prose td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.prose tr:last-child td {
  border-bottom: 0;
}

.prose th {
  font: 600 13px/1.3 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
  background: var(--tint);
}

/* 404. */
.lost {
  min-height: 50svh;
  display: grid;
  align-content: center;
  gap: 16px;
  padding-block: 64px;
}