/* Styles for the TrafficPal landing page (index.html) and its privacy notice (privacy.html). Brand as
   the films and the one-pager: Barlow, the dark ground, the logo gradient as the one accent. The
   hero is dark; the reading sections sit on light paper, as the one-pager does. */

:root {
  --ink: #0c0f13;
  --night: #11161c;
  --raise: #1b2027;
  --rule-dark: #2a333d;
  --on-dark: #f4f6f8;
  --on-dark-muted: #aab4bf;
  --paper: #f3f5f7;
  --card: #ffffff;
  --rule: #d5dae0;
  --text: #1f262e;
  --muted: #5a6673;
  --teal: #68ddba;
  --blue: #52b0d6;
  --deep: #1c6f8f; /* the accent's text tone on paper: the gradient itself fails contrast there */
  --ok: #2f9e6b;
  --grad: linear-gradient(90deg, var(--teal), var(--blue));
  --gutter: clamp(16px, 4vw, 48px);
  --radius: 12px;
}

/* Barlow, served from assets/fonts/ (SIL Open Font License, OFL.txt there) rather than Google
   Fonts, so no visitor's address reaches a third party; the Latin subset covers every character
   on the pages. */
@font-face { font-family: Barlow; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/barlow-latin-400.woff2") format("woff2"); }
@font-face { font-family: Barlow; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/barlow-latin-500.woff2") format("woff2"); }
@font-face { font-family: Barlow; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/barlow-latin-600.woff2") format("woff2"); }
@font-face { font-family: Barlow; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/barlow-latin-700.woff2") format("woff2"); }

* { box-sizing: border-box; }
/* No scroll snapping: browsers only snap once a fling's momentum has run out, which reads as a
   slow, late lock-in, and sections of uneven height cannot each fill the screen anyway. The hero
   is one screen instead; the reading sections flow. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 400 1.0625rem/1.55 Barlow, "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }

h2 {
  font-size: clamp(1.75rem, 1.15rem + 1.9vw, 2.625rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
h3 { font-size: 1.3125rem; font-weight: 600; line-height: 1.2; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 26px; border-radius: 999px;
  font-weight: 600; font-size: 1.0625rem; text-decoration: none; white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn-primary { background: var(--grad); color: var(--ink); box-shadow: 0 8px 28px rgba(82, 176, 214, .28); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 34px rgba(82, 176, 214, .4); }

/* ---- hero ---- */
/* One screen: the corridor loop under a light scrim, the name and title beside the film, the four
   cards under them. The bar and the body run 1400px wide, wider than the page's .wrap, so the
   player gets room; everything below keeps the narrower measure. */
.hero {
  position: relative; isolation: isolate;
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: auto 1fr;
  color: var(--on-dark); background: var(--ink) url("assets/hero/poster-corridor.jpg") center / cover;
  overflow: hidden;
}
.hero-video, .hero-scrim { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero-video { object-fit: cover; }
/* Light: the aerial footage is dark by itself. A little more under the title's left edge, where
   the pale industrial lots sit, and along the bottom under the cards. */
.hero-scrim {
  background:
    linear-gradient(90deg, rgba(12, 15, 19, .42), rgba(12, 15, 19, .22) 45%, rgba(12, 15, 19, .12)),
    linear-gradient(to bottom, rgba(12, 15, 19, .15), transparent 25%, transparent 65%, rgba(12, 15, 19, .35));
}
.bar { display: flex; align-items: center; justify-content: space-between; padding-block: 18px; }
.brand img { height: 38px; width: auto; }
.hero .bar, .hero-body { max-width: 1400px; }

.hero-body { align-self: stretch; display: grid; align-content: space-evenly; gap: clamp(20px, 2.6vh, 44px); padding-block: 0 18px; }
.hero-cta { display: flex; justify-content: center; }
.btn-lg { min-height: 62px; padding: 0 48px; font-size: 1.3125rem; }
.hero-top { display: grid; gap: 32px; align-items: center; }
.hero-name {
  margin-bottom: 26px; font-size: clamp(1.75rem, 1.1rem + 2vw, 2.75rem); font-weight: 700;
  line-height: 1; letter-spacing: -0.02em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero h1 {
  font-size: clamp(2rem, .4rem + 3.8vw, 4rem);
  font-weight: 600; line-height: 1.12; letter-spacing: -0.018em; text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.hero-points {
  display: grid; gap: 12px; margin-top: 30px;
  font-size: clamp(1.1875rem, .95rem + .75vw, 1.625rem); font-weight: 600; line-height: 1.3; color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 2px 16px rgba(0, 0, 0, .6);
}
.hero-points li { position: relative; padding-left: 1.1em; }
/* The highlighted words carry the name's gradient. A clipped-text gradient shows no text shadow
   and a drop-shadow filter bleeds through the transparent fill, so they carry neither, like the name. */
.hero-points em {
  font-style: normal; font-weight: 700; text-shadow: none;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-points li::before { content: ""; position: absolute; left: 0; top: .58em; width: .55em; height: 4px; border-radius: 2px; background: var(--grad); }
.hero-player { margin: 0; }
.hero-cards { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 0 0 20px; overflow: hidden;
  border-radius: 16px; border: 1px solid rgba(244, 246, 248, .14);
  background: linear-gradient(180deg, rgba(27, 32, 39, .92), rgba(17, 22, 28, .88));
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4); backdrop-filter: blur(10px);
}
/* The drawn visual heading each card; the price bars and the chat lay themselves out inside it. */
.card-art { width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 0 0 10px; display: block; box-sizing: border-box; border-bottom: 1px solid rgba(244, 246, 248, .12); background: #11161c; }
.card h3 { padding-inline: 22px; }
.card h3 { font-size: 1.625rem; line-height: 1.12; letter-spacing: -0.012em; text-wrap: balance; }
.card h3 span { display: block; } /* one line a sentence */
.art-price { display: flex; flex-direction: column; justify-content: center; padding: 22px; }
.art-price .row { display: flex; align-items: center; gap: 14px; }
.art-price .big { font-size: 4rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.art-price .cur { display: grid; place-items: center; width: 2.125rem; height: 2.125rem; border-radius: 50%; background: var(--grad); color: var(--ink); font-size: 1.375rem; font-weight: 700; line-height: 1; }
.art-price .strip { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 12px; margin-bottom: 22px; font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: #f4f6f8; }
.art-price .strip i { display: block; width: var(--w); height: 12px; border-radius: 4px; background: #3a4652; }
.art-price .strip i.us { background: var(--grad); }
.art-chat { display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 14px 18px; min-height: 0; font-size: .75rem; line-height: 1.3; font-weight: 500; }
.art-chat li { max-width: 88%; padding: 6px 10px; border-radius: 11px; }
.art-chat .you { align-self: flex-end; background: #2b3440; color: var(--on-dark); border-bottom-right-radius: 3px; }
.art-chat .ai { align-self: flex-start; background: rgba(104, 221, 186, .12); border: 1px solid rgba(104, 221, 186, .45); color: var(--on-dark); border-bottom-left-radius: 3px; }
@media (min-width: 900px) {
  .hero-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; }
}
@media (min-width: 1024px) { .hero-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Laptop screens (1366×768 and the like): tighter air, a narrower film, flatter drawings and a
   regular button, so the hero still fits one screen with the drawings on. */
@media (min-width: 1024px) and (max-height: 820px) {
  .bar { padding-block: 12px; }
  .hero-body { gap: 14px; padding-block: 0 12px; }
  .hero-top { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; }
  .hero h1 { font-size: clamp(2rem, min(.4rem + 3.8vw, 7vh), 4rem); }
  .hero-points { margin-top: 14px; gap: 6px; }
  .hero-name { margin-bottom: 12px; }
  .btn-lg { min-height: 50px; padding: 0 30px; font-size: 1.125rem; }
  .card { padding-bottom: 14px; gap: 6px; }
  .card-art { aspect-ratio: 16 / 7.5; margin-bottom: 6px; }
  .card h3 { font-size: 1.375rem; }
  .art-chat { gap: 5px; padding: 10px 16px; font-size: .6875rem; }
  .art-chat li { padding: 4px 8px; }
}
/* Short windows (a laptop with the browser not maximised): the headline is capped by the window's
   height, the air shrinks and the cards drop their drawings, so the hero still fits one screen. */
@media (max-height: 760px) {
  .bar { padding-block: 14px; }
  .hero-body { gap: 14px; padding-block: 0 14px; }
  .hero-top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } /* the film sets the top's height: give the copy the wider column */
  .btn-lg { min-height: 48px; padding: 0 26px; font-size: 1.0625rem; }
  .hero h1 { font-size: clamp(2rem, min(.4rem + 3.8vw, 6.5vh), 4rem); }
  .hero-points { margin-top: 16px; gap: 6px; font-size: clamp(1.0625rem, .9rem + .5vw, 1.375rem); }
  .hero-name { margin-bottom: 14px; }
  .card { padding: 14px 20px; gap: 4px; }
  .card-art { display: none; }
  .card h3 { padding-inline: 0; font-size: 1.25rem; }
}
/* Phones: compact cards, two by two, so the hero stays one screen there too. */
@media (max-width: 640px) {
  .hero-body { gap: 16px; padding-block: 0 16px; }
  .btn-lg { min-height: 48px; padding: 0 26px; font-size: 1.0625rem; }
  .hero-name { margin-bottom: 14px; }
  .hero-points { margin-top: 16px; gap: 6px; }
  .hero-cards { gap: 10px; }
  .card { padding: 10px 14px; gap: 3px; border-radius: 12px; }
  .card-art { display: none; }
  .card h3 { padding-inline: 0; }
  .card h3 { font-size: 1.0625rem; }
}

/* The film player in the hero. */
.player-frame {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--rule-dark); background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(104, 221, 186, .06);
}
.player-frame video { width: 100%; aspect-ratio: 16 / 9; background: #000; }

/* ---- paper sections ---- */
.paper { background: var(--paper); padding-block: clamp(48px, 5vw, 72px); }
.section-lede { margin-top: 18px; max-width: 40em; color: var(--muted); font-size: 1.125rem; }

/* How it works: one arrow across the page, cut into three chevrons that carry the brand gradient
   from end to end (each paints a third of one gradient: background-size 300%, offset by its
   position), the last one flared into the arrowhead. Stacked on a phone, the arrow points down.
   The gradient fails contrast under white, so the chevrons are lettered in ink. */
/* The flare never exceeds the gutter: stacked, the arrowhead hangs outside the column by --flare,
   and a flare wider than the gutter would scroll the page sideways. */
.steps { display: grid; gap: 40px 8px; margin-top: 48px; --notch: 26px; --head: 60px; --flare: min(18px, var(--gutter)); --pad: 26px; --band: 132px; }
.step { display: grid; gap: 28px; align-content: start; }
.chev {
  display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center;
  min-height: var(--band); padding: 22px var(--pad); color: var(--ink);
  background: linear-gradient(180deg, var(--teal), var(--blue));
  clip-path: polygon(0 0, 50% var(--notch), 100% 0, 100% calc(100% - var(--notch)), 50% 100%, 0 calc(100% - var(--notch)));
  padding-block: calc(22px + var(--notch)) 22px;
}
.step:first-child .chev {
  padding-top: 22px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), 50% 100%, 0 calc(100% - var(--notch)));
}
.step:last-child .chev {
  margin-inline: calc(-1 * var(--flare)); padding-inline: calc(var(--pad) + var(--flare));
  padding-bottom: calc(22px + var(--head) - var(--notch));
  clip-path: polygon(var(--flare) 0, 50% var(--notch), calc(100% - var(--flare)) 0,
    calc(100% - var(--flare)) calc(100% - var(--head)), 100% calc(100% - var(--head)), 50% 100%,
    0 calc(100% - var(--head)), var(--flare) calc(100% - var(--head)));
}
.num { font-size: 2.75rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.chev h3 { font-size: 1.25rem; text-wrap: balance; }
.points { display: grid; gap: 8px; margin-top: 14px; max-width: 26em; }
.points li { position: relative; padding-left: 20px; color: var(--muted); }
.points li::before {
  content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%;
  background: var(--grad);
}
.step .tag {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--rule); color: var(--deep); font-weight: 600; font-size: .9375rem;
}
@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(3, 1fr); column-gap: 8px; }
  .chev {
    padding: 22px var(--pad) 22px calc(var(--pad) + var(--notch));
    background: var(--grad); background-size: 300% 100%;
    clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%, var(--notch) 50%);
  }
  .step:nth-child(2) .chev { background-position: 50% 0; }
  .step:nth-child(3) .chev { background-position: 100% 0; }
  .step:first-child .chev {
    padding-left: var(--pad);
    clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%);
  }
  .step:last-child .chev {
    margin-inline: 0; margin-block: calc(-1 * var(--flare)); /* the flare, outside the row; the
       extra height keeps the shaft level with the other segments */
    min-height: calc(var(--band) + 2 * var(--flare));
    padding: calc(22px + var(--flare)) calc(var(--head) + 8px) calc(22px + var(--flare)) calc(var(--pad) + var(--notch));
    clip-path: polygon(0 var(--flare), calc(100% - var(--head)) var(--flare), calc(100% - var(--head)) 0,
      100% 50%, calc(100% - var(--head)) 100%, calc(100% - var(--head)) calc(100% - var(--flare)),
      0 calc(100% - var(--flare)), var(--notch) 50%);
  }
}

/* Capabilities: the lead claim, the comparison and the closing list, one under the other. */
.caps { border-top: 1px solid var(--rule); }
.cap-grid { display: grid; gap: 36px; margin-top: 40px; }
/* The lead and the comparison are sections of their own: a rule separates each one from what
   follows. */
.cap-lead, .cap-vs { padding-bottom: clamp(28px, 3vw, 40px); border-bottom: 1px solid var(--rule); }
.shot {
  position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden;
  background: #151b22;
  box-shadow: 0 0 0 1px rgba(12, 15, 19, .1), 0 14px 30px -18px rgba(12, 15, 19, .5);
}
.shot > video, .shot > img { width: 100%; height: 100%; object-fit: cover; }
/* Everything else it does: its heading and short items, each opened by its name set off by a
   gradient rule, beside the compare card, whose top meets the heading's. */
.cap-more { display: grid; gap: 32px; align-items: start; }
@media (min-width: 960px) { .cap-more { grid-template-columns: 1fr 1fr; gap: 56px; } }
.cap-more .cap-title { margin-top: 0; }
.cap-list { display: grid; gap: 20px; margin-top: 22px; }
.cap-list li { color: var(--muted); max-width: 36em; }
.cap-name { color: var(--text); font-weight: 600; padding-right: .6em; margin-right: .5em; border-right: 2px solid; border-image: linear-gradient(180deg, var(--teal), var(--blue)) 1; }
/* The search schematic in the lead slot (index.html #search), on the paper itself: no box, no
   window chrome, so it reads as a diagram of what happens and not as a product screen. Three
   columns on a wide screen (chat, trials, the two plans), stacked on a phone. The trials are one
   sprite video (4×4 clips) under 16 overlay tiles; a tile's inset shadow is its cover, which
   opens from the centre to reveal the clip, then its background tints the clip by the result.
   Beats are CSS animations with per-element delays (--d for messages and cards, --i for a tile's
   index); .armed hides everything, .play runs them, and the end state is the plain, un-animated
   one. */
.search {
  aspect-ratio: auto; overflow: visible; border-radius: 0; background: none; box-shadow: none;
  display: grid; gap: 24px; font-size: .9375rem; line-height: 1.35;
}
@media (min-width: 900px) { .search { grid-template-columns: 1.25fr 1fr 1fr; gap: 36px; align-items: start; } }
/* The heading is in the flow, a plain title with the brand rule under it: the lead is a section
   of its own, not a captioned picture like the tiles below. */
.search-title, .cap-title { grid-column: 1 / -1; font-size: 1.625rem; padding-bottom: 12px; position: relative; }
.cap-title { margin-top: 8px; }
.search-title::after, .cap-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 4px; border-radius: 2px; background: var(--grad); }
.chat { display: grid; gap: 10px; align-content: start; }
.msg { max-width: 92%; padding: 10px 14px; border-radius: 10px; background: var(--card); border: 1px solid var(--rule); color: var(--text); }
.msg b { display: block; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.msg.ai { justify-self: end; border-left: 3px solid; border-image: linear-gradient(180deg, var(--teal), var(--blue)) 1; border-radius: 0 10px 10px 0; }
.tiles { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: tile; }
/* Inset by a pixel so the clip never shows at the grid's anti-aliased outer edge; the tiles'
   3 px paper border covers the gap. */
.sims { position: absolute; inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); object-fit: cover; }
.tiles i {
  position: relative; aspect-ratio: 1; border: 3px solid var(--paper); /* the gutter, over the clip */
  font-style: normal; font-size: .6875rem; font-weight: 600; color: var(--text);
  background: var(--c);
}
.tiles i { display: grid; align-content: start; justify-content: start; }
.tiles i::before { content: counter(tile); counter-increment: tile; padding: 2px 6px; background: rgba(243, 245, 247, .85); border-radius: 0 0 4px 0; }
.tiles .r { --c: rgba(201, 85, 85, .5); --dim: rgba(222, 196, 196, .85); }
.tiles .a { --c: rgba(217, 164, 79, .5); --dim: rgba(226, 212, 190, .85); }
.tiles .g { --c: rgba(104, 221, 186, .45); --dim: var(--c); }
.picks { display: grid; gap: 10px; align-content: start; }
.pick { display: grid; gap: 3px; padding: 12px 14px; border-radius: 8px; background: var(--card); border: 1.5px solid var(--rule); font-size: .875rem; color: var(--muted); }
.pick b { color: var(--text); font-weight: 600; }
.pick .delta { color: var(--deep); font-weight: 600; }
.pick.chosen { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
/* Armed: hidden until play. The tiles' end state (the static one) has amber and red dimmed. */
.tiles :is(.r, .a) { background: var(--dim); }
.search.armed :is(.msg, .pick) { opacity: 0; }
.search.armed .tiles i { box-shadow: inset 0 0 0 160px var(--paper); background: none; }
.search.play .msg { animation: msg-in .5s ease-out both; animation-delay: var(--d); }
.search.play .tiles i { animation: trial 1.6s ease-out both; animation-delay: calc(2.4s + var(--i) * .28s); }
/* The number arrives with its clip, a quarter second into the cover opening. */
.search.armed .tiles i::before { opacity: 0; }
.search.play .tiles i::before { animation: msg-in .3s ease-out both; animation-delay: calc(2.8s + var(--i) * .28s); }
.search.play .tiles :is(.r, .a) { animation: trial 1.6s ease-out both, aside .8s both; animation-delay: calc(2.4s + var(--i) * .28s), 8.1s; }
.search.play .pick { animation: msg-in .5s ease-out both; animation-delay: var(--d); }
.search.play .pick.chosen { border-color: var(--rule); box-shadow: none; animation: msg-in .5s ease-out both, chosen .4s both; animation-delay: var(--d), 10.8s; }
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes trial {
  0% { box-shadow: inset 0 0 0 160px var(--paper); background: none; }
  35%, 60% { box-shadow: inset 0 0 0 0 var(--paper); background: none; }
  100% { box-shadow: inset 0 0 0 0 var(--paper); background: var(--c); }
}
@keyframes aside { to { background: var(--dim); } }
@keyframes chosen { to { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); } }


/* The comparison with today's tools (index.html .cap-vs): a table, one row per study step.
   Each cell is rated good (.g), partial (.y) or poor (.r); the dot's shape, full, half or empty,
   repeats the rating for readers who cannot tell the colours apart. On a phone each row becomes a
   card, and the "Today's tools" cell keeps only its bold verdict. */
.cap-vs { --g: #24855a; --g-bg: #e5f4ec; --y: #a67a0c; --y-bg: #fbf2d9; --r: #cf4436; --r-bg: #fbe6e3; }
.vs-lede { margin-top: 18px; max-width: 48em; color: var(--muted); }
.vs { width: 100%; margin-top: 32px; border-collapse: separate; border-spacing: 0; }
.vs th, .vs td { text-align: left; vertical-align: top; border-bottom: 2px solid var(--paper); }
.vs thead th { padding: 16px 18px; font-size: 1.0625rem; font-weight: 700; border-bottom: 2px solid var(--text); vertical-align: bottom; }
.vs thead th small { display: block; font-weight: 500; color: var(--muted); font-size: .875rem; }
/* The gradient bar is a pseudo-element: a border-image would also paint the bottom border. */
.vs thead .us { position: relative; background: var(--card); }
.vs thead .us::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--grad); }
.vs tbody th { width: 20%; padding: 16px 18px 16px 0; font-weight: 600; border-bottom: 1px solid var(--rule); }
.vs td { width: 40%; padding: 16px 18px; font-size: .9375rem; line-height: 1.42; }
.vs td + td { border-left: 2px solid var(--paper); }
.vs td.g { background: var(--g-bg); }
.vs td.y { background: var(--y-bg); }
.vs td.r { background: var(--r-bg); }
.vs td.us { box-shadow: inset 4px 0 0 var(--blue); }
.vs-cell { display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: start; color: var(--muted); }
.vs-cell b { display: block; font-size: 1.0625rem; color: var(--text); margin-bottom: 2px; }
/* Forced colours would blank the fill and leave every dot an empty ring. */
.vs-dot { width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; border: 2px solid; forced-color-adjust: none; }
.g .vs-dot { border-color: var(--g); background: var(--g); }
.y .vs-dot { border-color: var(--y); background: linear-gradient(90deg, var(--y) 50%, transparent 50%); }
.r .vs-dot { border-color: var(--r); }
.vs-key { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; font-size: .875rem; color: var(--muted); }
.vs-key span { display: inline-flex; gap: 8px; align-items: center; }
.vs-key .vs-dot { margin: 0; }
.vs-note { margin-top: 14px; font-size: .875rem; color: var(--muted); max-width: 60em; }
/* Visually hidden, still read by screen readers. */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 760px) {
  .vs thead { display: none; }
  .vs, .vs tbody, .vs tr, .vs tbody th, .vs td { display: block; width: auto; }
  .vs tr { margin-top: 14px; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
  .vs tbody th { padding: 12px 16px; }
  .vs td, .vs td + td { padding: 12px 16px; border-left: 0; }
  .vs td::before { content: attr(data-tool); display: block; font-size: .8125rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
  .vs td:not(.us) { display: flex; gap: 10px; align-items: baseline; padding-block: 9px; }
  .vs td:not(.us)::before { flex: 0 0 7.6em; margin: 0; }
  .vs td:not(.us) .d { display: none; }
  .vs-cell b { font-size: 1rem; margin: 0; }
}

/* The compare card: one plan against today's, as the product shows it. */
.compare {
  background: var(--card); border: 1px solid var(--rule); border-radius: 16px;
  padding: clamp(20px, 3vw, 32px); box-shadow: 0 24px 60px -36px rgba(12, 15, 19, .45);
}
.compare-head { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; font-size: 1.0625rem; }
.compare-head b { font-weight: 700; }
.chip-ok {
  font-size: .875rem; font-weight: 600; color: #1f7a50; border: 1.5px solid var(--ok);
  padding: 3px 10px; border-radius: 999px;
}
.metrics { display: grid; gap: 18px; margin-top: 24px; }
.metric { display: grid; grid-template-columns: 9.5em 1fr auto; gap: 16px; align-items: center; font-variant-numeric: tabular-nums; }
.metric dt { font-weight: 600; }
.bars { display: grid; gap: 4px; }
.bars b { display: block; height: 9px; width: var(--w); border-radius: 5px; background: #c9d0d8; }
.bars b.plan { background: var(--grad); }
.val { color: var(--muted); white-space: nowrap; }
.val span { font-size: .875rem; }
.val strong { color: var(--text); font-weight: 700; }
.legend { display: flex; gap: 20px; margin-top: 22px; font-size: .875rem; color: var(--muted); }
.legend i { display: inline-block; width: 18px; height: 8px; border-radius: 4px; background: #c9d0d8; margin-right: 8px; vertical-align: middle; }
.legend i.plan { background: var(--grad); }
@media (max-width: 520px) {
  .metric { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .metric .bars { grid-column: 1 / -1; grid-row: 2; }
}

/* Who builds it: the founder's round portrait beside his name and facts; stacked on a phone. His
   name is the section's heading, sized as a card title rather than a section title. */
.team { border-top: 1px solid var(--rule); }
.founder { display: grid; gap: 24px 44px; max-width: 920px; align-items: center; }
.founder h2 { font-size: 1.625rem; }
@media (min-width: 720px) { .founder { grid-template-columns: 180px 1fr; } }
.founder img {
  width: clamp(140px, 30vw, 180px); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 7px var(--blue);
}
.founder-role { margin-top: 6px; color: var(--muted); }
.founder-role b { display: block; color: var(--deep); font-weight: 600; text-wrap: balance; }
.founder-bio { margin-top: 16px; max-width: 40em; color: var(--muted); }
.founder-facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 18px; color: var(--muted); }
.founder-facts b { color: var(--text); font-size: 1.25rem; font-weight: 700; }
.founder-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; font-weight: 600; }
.founder-links a { color: var(--deep); text-decoration: none; border-bottom: 1px solid var(--rule); }
.founder-links a:hover { border-bottom-color: var(--deep); }

/* ---- close and footer ---- */
.close {
  background:
    radial-gradient(ellipse 60% 80% at 50% 120%, rgba(82, 176, 214, .22), transparent 70%),
    var(--ink);
  color: var(--on-dark); text-align: center; padding-block: clamp(64px, 7vw, 104px);
}
.close h2 { font-size: clamp(2.5rem, 1.4rem + 4.4vw, 5rem); letter-spacing: -0.02em; line-height: 1.02; }
.close p { margin: 20px auto 36px; color: var(--on-dark-muted); font-size: 1.1875rem; }
/* Early access and the contact form, below the closing buttons; side by side from 860px. */
.close-more { display: grid; gap: 24px; max-width: 980px; margin: clamp(40px, 5vw, 64px) auto 0; text-align: left; }
@media (min-width: 860px) { .close-more { grid-template-columns: 1fr 1.6fr; align-items: start; } }
.close-more p { margin: 8px 0 0; font-size: 1rem; }
.early, .contact { padding: 24px 26px; border: 1px solid var(--rule-dark); border-radius: 12px; background: var(--night); }
.early { border-top: 4px solid var(--teal); }
/* color-scheme dark gives the select's drop-down list the dark look. */
.contact { display: grid; gap: 14px; color-scheme: dark; }
.contact > p { margin-top: -6px; }
.field-row { display: grid; gap: 14px; }
@media (min-width: 520px) { .field-row { grid-template-columns: 1fr 1fr; } }
.contact label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; font-size: .9375rem; font-weight: 600; }
.contact .opt { font-weight: 400; color: var(--on-dark-muted); }
.contact :is(input, select, textarea) {
  flex: 1 1 100%; min-height: 44px; padding: 10px 12px; font: inherit; font-weight: 400; color: var(--on-dark);
  background: var(--raise); border: 1px solid #6b7682; border-radius: 8px; /* 3:1 on --night */
}
.contact textarea { resize: vertical; }
.contact .trap { display: none; }
.contact button { justify-self: start; border: 0; font-family: inherit; cursor: pointer; }
.contact button[aria-disabled="true"] { opacity: .6; cursor: wait; }
/* Kept in the layout while empty: a status region shown and filled at once is often not read out. */
.contact-status { min-height: 1.5em; }
.contact-status a, .contact-note a { color: var(--teal); }
.contact > .contact-note { margin-top: -4px; font-size: .875rem; color: var(--on-dark-muted); }

/* ---- privacy.html: one column of reading text on paper ---- */
.legal { max-width: 44em; }
.legal h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); font-weight: 600; line-height: 1.1; }
.legal h2 { margin-top: 36px; font-size: 1.3125rem; }
.legal p, .legal ul { margin-top: 12px; color: var(--muted); }
.legal ul { padding-left: 1.2em; list-style: disc; }
.legal li + li { margin-top: 6px; }
.legal a { color: var(--text); }
.legal .updated { margin-top: 8px; font-size: .9375rem; }
.legal-bar { background: var(--ink); color: var(--on-dark); }
.legal-bar .bar { padding-block: 18px; }
.bar-link { font-weight: 600; white-space: nowrap; text-decoration: none; padding: 8px 0; border-bottom: 2px solid transparent; }
.bar-link:hover { border-bottom-color: var(--teal); }
.foot { background: var(--ink); color: var(--on-dark-muted); border-top: 1px solid var(--rule-dark); }
.foot-inner { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; padding-block: 28px; font-size: .9375rem; }
.foot img { height: 34px; width: auto; margin-right: auto; }
.foot a { color: var(--on-dark); text-decoration: none; border-bottom: 1px solid var(--rule-dark); }
.foot a:hover { border-bottom-color: var(--teal); }

@media (max-width: 600px) { .brand img { height: 30px; } }