/* Evatin marketing site.
   Tokens are taken from the Figma style sheet and app/globals.css: one ink at fixed opacities,
   purple for Eva only, 8pt spacing, Major Third type scale.

   The page is drawn on a grid. Two hairline rails frame a 1200px column from under the nav to the
   footer; every section is a strip closed by a full-width hairline, and the content inside a strip
   is divided into cells by more hairlines. Nothing floats; everything sits on a line. */

:root {
  --ink: 32 30 29;
  --page: #f6f5f4;
  --card: #ffffff;
  --inset: #fbfaf9;
  --band: #e5e5e5;
  --core: #5b4ce0;
  --mid: #8f83ff;
  --light: #dedaff;
  --shade: #3f31b8;
  --orb: radial-gradient(circle at 32% 28%, #dedaff, #8f83ff 56%, #5b4ce0);
  --glow: 91 76 224;
  --line: rgb(var(--ink) / 0.09);

  --green-bg: rgba(20, 110, 70, 0.1);  --green-fg: #1f7a4d;
  --blue-bg: rgba(63, 111, 216, 0.1);  --blue-fg: #3f6fd8;
  --amber-bg: rgba(154, 106, 18, 0.11); --amber-fg: #8a5f10;
  --pink-bg: rgba(216, 63, 140, 0.1);  --pink-fg: #c2357a;
  --alarm: #cf3a1c;

  --shadow-card: 0 1px 2px rgba(32, 30, 29, 0.05);
  --shadow-lift: 0 12px 32px rgba(32, 30, 29, 0.1);

  --syne: "Syne", "Inter", system-ui, sans-serif;
  --inter: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; --s11: 160px;

  --r-sm: 8px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* The column and its rails. */
  --col: 1200px;
  --gutter: 32px;   /* content inset from a rail */
  --strip-top: 160px; /* from the strip's top edge to its heading */
  --strip: 72px;      /* from the heading block down to the cells */
}

/* The dark inversion used by the Eva section. Same alphas, one triple swapped. */
.theme-dark {
  --ink: 244 243 242;
  --page: #000000;
  --card: #1a1a1a;
  --inset: #121212;
  --line: rgb(var(--ink) / 0.14);
  --shadow-card: none;
  --shadow-lift: 0 12px 32px rgba(0, 0, 0, 0.4);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--page);
  color: rgb(var(--ink));
  font-family: var(--inter);
  font-size: 16px;
  line-height: 1.625;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--syne); font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }

.ink-88 { color: rgb(var(--ink) / 0.88); }
.ink-62 { color: rgb(var(--ink) / 0.62); }
.ink-46 { color: rgb(var(--ink) / 0.46); }

/* ---- Type scale ----------------------------------------------------------- */
.display { font-size: clamp(40px, 5.5vw, 64px); line-height: 1.125; }
.h1 { font-size: clamp(34px, 4vw, 48px); line-height: 56px; }
@media (max-width: 899px) { .h1 { line-height: 1.17; } }
.h2 { font-size: clamp(28px, 3vw, 36px); line-height: 1.22; font-weight: 600; letter-spacing: -0.01em; }
.h3 { font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.01em; }
@media (max-width: 899px) { .h3 { font-size: 22px; line-height: 30px; } }
.h4 { font-size: 22px; line-height: 1.36; font-weight: 600; letter-spacing: 0; }
.lede { font-size: 18px; line-height: 28px; color: rgb(var(--ink) / 0.62); }
.small { font-size: 14px; line-height: 1.57; }
.caption { font-size: 12px; line-height: 1.5; font-weight: 500; letter-spacing: 0.02em; }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--core);
}
.theme-dark .eyebrow { color: #a79dff; }

/* ============================================================================ THE GRID */
/* A strip is a section. Its wrap carries the rails; the strip's bottom edge is a full-width line. */
.strip { border-bottom: 1px solid var(--line); }
.wrap { width: 100%; max-width: var(--col); margin: 0 auto; border-inline: 1px solid var(--line); }
@media (max-width: 1239px) { .wrap { width: calc(100% - 32px); } }

/* A block of heading copy inside a strip. */
.head { text-align: center; padding: var(--strip-top) var(--gutter) var(--strip); }
.head > * { max-width: 820px; margin-inline: auto; }
.head .lede { margin-top: 16px; max-width: 620px; }
/* "So how does any of this / get filled in?" breaks after "this" and sits 48 above the split, not 72. */
.how .head, #testimonials .head { padding-bottom: 48px; }
.how .head .h1 { max-width: 960px; text-wrap: initial; }
.head .eyebrow { margin-bottom: var(--s4); }
.head .btn { margin-top: var(--s5); }
.head-left { text-align: left; }
.head-left > * { margin-inline: 0; }

/* Cells. A cell grid is drawn with hairlines; the open variant divides the space, the card variant
   fills each cell white with a small radius so the line shows through at the corners. */
.cells { display: grid; border-top: 1px solid var(--line); }
.cells > * { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.cells-2 { grid-template-columns: repeat(2, 1fr); }
.cells-3 { grid-template-columns: repeat(3, 1fr); }
.cells-2 > *:nth-child(2n), .cells-3 > *:nth-child(3n) { border-right: 0; }
.cells-2 > *:nth-last-child(-n + 2), .cells-3 > *:nth-last-child(-n + 3) { border-bottom: 0; }
.cells-card { gap: 2px; background: var(--line); border-top: 0; }
.cells-card > * { background: var(--card); border: 0 !important; border-radius: 8px; }
.cell { padding: var(--s8) var(--gutter); }
@media (max-width: 899px) {
  .cells-2, .cells-3 { grid-template-columns: 1fr; }
  .cells-2 > *, .cells-3 > * { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .cells-2 > *:last-child, .cells-3 > *:last-child { border-bottom: 0 !important; }
  .cells-card > * { border: 0 !important; }
  .cell { padding: var(--s6) var(--s5); }
  :root { --gutter: 24px; --strip: 48px; --strip-top: 96px; }
}

/* ---- Buttons ---------------------------------------------------------------- */
/* Not pills. The nav button is 10px all round with a 7px radius; every other button is
   20px across, 12px down, 10px radius, from the Figma component. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 12px 20px; border-radius: 10px; line-height: 1.25;
  font-weight: 600; font-size: 16px; white-space: nowrap;
  transition: background 0.2s, color 0.2s, transform 0.2s var(--ease), box-shadow 0.2s;
}
.btn-primary { background: var(--core); color: #fff; }
.btn-primary:hover { background: var(--shade); transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgb(var(--glow) / 0.5); }
.btn-primary:active { transform: translateY(0); }
.btn-primary .arw { transition: transform 0.2s var(--ease); }
.btn-primary:hover .arw { transform: translateX(3px); }
.btn-ghost { color: rgb(var(--ink) / 0.88); border: 1px solid rgb(var(--ink) / 0.14); background: var(--card); }
.btn-ghost:hover { border-color: rgb(var(--ink) / 0.3); }
.btn-ink { background: rgb(var(--ink)); color: var(--page); }
.btn-ink:hover { background: rgb(var(--ink) / 0.85); }
.btn-lg { font-size: 16px; padding: 14px 24px; }
.btn-nav { padding: 10px; border-radius: 7px; font-size: 14px; }
.theme-dark .btn-primary { background: #fff; color: #000; box-shadow: none; }
.theme-dark .btn-primary:hover { background: var(--light); color: #000; }

/* ---- Pills -------------------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: var(--s2);
  height: 32px; padding-inline: 14px; border-radius: 999px;
  font-size: 14px; font-weight: 500;
  border: 1px solid rgb(var(--ink) / 0.14); background: var(--card); color: rgb(var(--ink) / 0.72);
}
.pill .orb { width: 12px; height: 12px; }
.pill-eva { border-color: rgb(var(--glow) / 0.28); background: rgb(var(--glow) / 0.06); color: var(--core); }

/* ---- The orb: Eva's only avatar, the only gradient -------------------------------- */
.orb { display: inline-block; border-radius: 50%; background: var(--orb); position: relative; flex: 0 0 auto; }
.orb::after { content: ""; position: absolute; left: 22%; top: 18%; width: 25%; height: 25%; border-radius: 50%; background: rgba(255, 255, 255, 0.7); filter: blur(1px); }
.orb-glow { box-shadow: 0 0 18px rgb(var(--glow) / 0.5); }
@media (prefers-reduced-motion: no-preference) { .orb-breathe { animation: breathe 3.2s ease-in-out infinite; } }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 14px rgb(var(--glow) / 0.4); } 50% { box-shadow: 0 0 26px rgb(var(--glow) / 0.7); } }

/* ---- Reveal on scroll ---------------------------------------------------------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: 0.08s; } .rv-d2 { transition-delay: 0.16s; } .rv-d3 { transition-delay: 0.24s; } .rv-d4 { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* ============================================================================ NAV */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: 80px; display: flex; align-items: center;
  background: rgba(246, 245, 244, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: height 0.25s var(--ease);
}
.nav.scrolled { height: 64px; }
.nav .wrap { border: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s5); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--syne); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; }
.brand-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--core); display: grid; place-items: center; }
.brand-mark svg { width: 18px; height: 18px; }
.nav-links { display: none; gap: 36px; }
.nav-links a { font-size: 14px; font-weight: 500; color: rgb(var(--ink) / 0.62); padding: 8px 12px; margin: -8px -12px; border-radius: var(--r-sm); transition: color 0.2s; }
.nav-links a:hover { color: rgb(var(--ink)); }
.nav-cta { display: flex; align-items: center; gap: var(--s4); }
.nav-burger { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; height: 44px; margin-right: -10px; border-radius: var(--r-sm); }
.nav-burger span { display: block; width: 22px; height: 2px; background: rgb(var(--ink)); border-radius: 2px; transition: transform 0.25s var(--ease), opacity 0.2s; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-drawer { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: var(--s4) var(--s5) var(--s5); background: var(--page); border-bottom: 1px solid var(--line); }
.nav-drawer.open { display: grid; gap: var(--s2); }
.nav-drawer a { padding: 12px 0; font-size: 16px; font-weight: 500; border-bottom: 1px solid var(--line); }
.nav-drawer .drawer-cta { margin-top: var(--s3); justify-content: center; border-bottom: 0; }
@media (min-width: 900px) {
  .nav-links { display: flex; }
  .nav-burger, .nav-drawer { display: none !important; }
}
@media (max-width: 1239px) { .nav .wrap { padding-inline: var(--s5); } }

/* ============================================================================ HERO */
.hero-text { text-align: center; padding: var(--s10) var(--gutter) 0; }
@media (max-width: 899px) { .hero-text { padding-top: var(--s8); } }
.hero-text > * { max-width: 910px; margin-inline: auto; }
.hero-text .tag-line { margin-bottom: var(--s5); }
.hero-text .display { margin-bottom: 16px; }
.hero-text .lede { max-width: 560px; margin-bottom: 20px; }
.hero-actions { display: flex; justify-content: center; gap: var(--s3); flex-wrap: wrap; }

/* The tag above the headline: dark text inside a border that is a moving gradient. */
@property --tag-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.tag-line {
  display: inline-flex; padding: 1px; border-radius: 999px;
  background: conic-gradient(from var(--tag-angle), var(--light), var(--core), var(--light), var(--mid), var(--light));
}
.tag-line span { display: block; padding: 7px 14px; border-radius: 999px; background: var(--page); font-size: 14px; line-height: 1.3; font-weight: 500; color: rgb(var(--ink)); }
@media (prefers-reduced-motion: no-preference) { .tag-line { animation: tagSpin 9s linear infinite; } }
@keyframes tagSpin { to { --tag-angle: 360deg; } }

/* The product frame sits in a solid purple cell that fills the column, inset a few pixels on every
   side with all four corners rounded, so purple shows at each corner. A blurred purple halo sits
   behind the cell on all sides, and the strip's line runs right under it. */
.hero-stage { position: relative; margin-top: 72px; }
.hero-glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: var(--mid); filter: blur(50px); opacity: 0.8;
}
.product-cell { position: relative; z-index: 1; background: var(--core); height: 560px; }
@media (max-width: 899px) { .product-cell { height: 440px; } }
.product { position: relative; border-radius: 20px; background: var(--card); overflow: hidden; height: 100%; }
.product-body { display: grid; grid-template-columns: 1fr; height: 100%; }
@media (min-width: 720px) { .product-body { grid-template-columns: 204px 1fr; } }

/* The list of views. Each row is a label with a small rounded square that fills
   when selected. In ink, not purple: purple is spent on Eva. Children ("A client's page", "Call
   detail") are indented under their parent. */
.app-list { background: var(--card); border-right: 1px solid var(--line); padding: var(--s3); display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.app-list::-webkit-scrollbar { display: none; }
@media (min-width: 720px) { .app-list { flex-direction: column; padding: var(--s4) var(--s3); } }
.item {
  position: relative; display: flex; align-items: flex-start; gap: 10px; flex: 0 0 auto;
  padding: 7px 10px; border-radius: var(--r-sm); text-align: left;
  font-size: 14px; line-height: 20px; font-weight: 500; color: rgb(var(--ink) / 0.62);
  transition: background 0.2s, color 0.2s;
}
/* A child row hangs off its parent: an elbow drawn from under the parent's square into the child's. */
.item.sub { margin-left: 22px; position: relative; }
.item.sub::before { content: ""; position: absolute; left: -5px; top: -6px; width: 13px; height: 23px; border: solid rgb(var(--ink) / 0.22); border-width: 0 0 1.5px 1.5px; border-bottom-left-radius: 6px; pointer-events: none; }
.item .mark { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 3px; border-radius: 4px; border: 1.5px solid rgb(var(--ink) / 0.3); transition: border-color 0.2s, background 0.2s; }
.item:hover { background: rgb(var(--ink) / 0.06); color: rgb(var(--ink) / 0.88); }
/* The selected row is the inverted one: ink behind it, white text, the square filled white. */
.item[aria-selected="true"] { background: rgb(var(--ink)); color: var(--page); }
.item[aria-selected="true"] .mark { border-color: var(--page); background: var(--page); }
.side-foot { margin-top: auto; padding-top: var(--s4); display: none; }
@media (min-width: 720px) { .side-foot { display: block; } }
.side-hint { font-size: 12px; color: rgb(var(--ink) / 0.46); padding-inline: 10px; line-height: 1.5; }

.app-view { position: relative; background: var(--page); overflow: hidden; }
.app-view .view { position: absolute; inset: 0; opacity: 0; transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); transform: translateY(6px); pointer-events: none; }
.app-view .view.on { opacity: 1; transform: none; pointer-events: auto; }
/* A window onto the top-left of the real screen: the picture fills the cell and is cut at the right and bottom. */
.app-view .view img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.app-view .view.placeholder { display: grid; place-items: center; color: rgb(var(--ink) / 0.46); font-size: 14px; }

/* ============================================================================ PAIN */
/* Copy at the top of the cell; below it the little UI is the card's picture. It has no frame,
   runs off the bottom of the cell, and fades into the cell's own colour as it rises. */
.pain { display: flex; flex-direction: column; padding: var(--s7) 82px 0; overflow: hidden; }
@media (max-width: 1099px) { .pain { padding: var(--s7) var(--s6) 0; } }
@media (max-width: 899px) { .pain { padding: var(--s6) var(--s5) 0; } }
.pain h3 { margin-bottom: var(--s3); }
.pain p { color: rgb(var(--ink) / 0.62); max-width: 44ch; }
.vig { position: relative; height: 210px; margin-top: var(--s6); }
.vig::after { content: ""; position: absolute; left: -100px; right: -100px; top: 0; height: 52%; background: linear-gradient(to bottom, var(--page) 10%, rgb(246 245 244 / 0) 100%); z-index: 3; pointer-events: none; }
.vig-row { position: absolute; left: 0; right: 0; height: 44px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); display: flex; align-items: center; gap: 10px; padding-inline: 14px; font-size: 13px; }
.vig-row .av { width: 22px; height: 22px; border-radius: 50%; background: var(--blue-bg); color: var(--blue-fg); display: grid; place-items: center; font-weight: 600; font-size: 10px; }
.vig-row .nm { font-weight: 500; }
.vig-row .mt { margin-left: auto; color: rgb(var(--ink) / 0.46); font-variant-numeric: tabular-nums; }
.vig-row .tag { padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; }
.tag-lead { background: var(--amber-bg); color: var(--amber-fg); }
.tag-client { background: var(--green-bg); color: var(--green-fg); }
.tag-cold { background: rgb(var(--ink) / 0.06); color: rgb(var(--ink) / 0.46); }

.vig-cold .r1 { top: 8px; } .vig-cold .r2 { top: 62px; } .vig-cold .r3 { top: 116px; } .vig-cold .r4 { top: 170px; }
@media (prefers-reduced-motion: no-preference) {
  .vig-cold .r2 { animation: goCold 6s ease-in-out infinite; }
  .vig-cold .r2 .mt::after { content: "2 days ago"; animation: coldDays 6s steps(1) infinite; }
  .vig-cold .r2 .tag { animation: coldTag 6s steps(1) infinite; }
}
@media (prefers-reduced-motion: reduce) { .vig-cold .r2 .mt::after { content: "3 weeks ago"; } }
@keyframes goCold { 0%, 25% { filter: grayscale(0); opacity: 1; } 70%, 100% { filter: grayscale(1); opacity: 0.55; } }
@keyframes coldDays { 0% { content: "2 days ago"; } 30% { content: "9 days ago"; } 55% { content: "3 weeks ago"; } 100% { content: "3 weeks ago"; } }
@keyframes coldTag { 0%, 54% { background: var(--amber-bg); color: var(--amber-fg); } 55%, 100% { background: rgb(var(--ink) / 0.06); color: rgb(var(--ink) / 0.46); } }

.vig-sheet .sheet { position: absolute; left: 0; right: -82px; top: 24px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
@media (max-width: 1099px) { .vig-sheet .sheet { right: -32px; } }
@media (max-width: 899px) { .vig-sheet .sheet { right: -24px; } }
.sheet { display: grid; grid-template-columns: 110px 1fr 1.4fr; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--card); font-size: 12px; box-shadow: var(--shadow-card); grid-auto-rows: max-content; }
.sheet > div { padding: 9px 12px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); white-space: nowrap; overflow: hidden; }
.sheet > div:nth-child(3n) { border-right: 0; }
.sheet .hd { background: var(--inset); font-weight: 600; color: rgb(var(--ink) / 0.62); }
.sheet .typing { color: rgb(var(--ink) / 0.88); }
.sheet .typing::after { content: ""; display: inline-block; width: 1px; height: 11px; background: var(--core); margin-left: 1px; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) { .sheet .typing { animation: typeCell 7s steps(28) infinite; max-width: 0; } }
@keyframes typeCell { 0%, 10% { max-width: 0; } 60%, 100% { max-width: 100%; } }

.vig-net .vig-row { height: 40px; font-size: 12px; }
.vig-net .r1 { top: 8px; } .vig-net .r2 { top: 58px; } .vig-net .r3 { top: 108px; } .vig-net .r4 { top: 158px; }
.vig-net .chk { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid rgb(var(--ink) / 0.3); }
.vig-net .due { margin-left: auto; color: rgb(var(--ink) / 0.46); }
.vig-net .r3 .due { color: var(--alarm); font-weight: 500; }
@media (prefers-reduced-motion: no-preference) { .vig-net .r3 { animation: slipAway 6s var(--ease) infinite; } }
@keyframes slipAway { 0%, 55% { transform: none; opacity: 1; } 80%, 100% { transform: translateY(90px); opacity: 0; } }

.vig-clock { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 28px; padding-top: 8px; }
.clock { width: 150px; height: 150px; border-radius: 50%; background: conic-gradient(rgb(var(--glow) / 0.9) var(--admin, 20%), var(--green-bg) 0); position: relative; }
.clock::after { content: ""; position: absolute; inset: 34px; border-radius: 50%; background: var(--page); }
@media (prefers-reduced-motion: no-preference) { .clock { animation: eatTime 7s ease-in-out infinite; } }
@keyframes eatTime { 0%, 15% { --admin: 20%; } 65%, 100% { --admin: 62%; } }
@property --admin { syntax: "<percentage>"; inherits: false; initial-value: 20%; }
.clock-key { display: grid; gap: 10px; font-size: 13px; }
.clock-key span { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.clock-key i { width: 10px; height: 10px; border-radius: 3px; }

/* ============================================================================ ONE SYSTEM */
.system-stage { position: relative; max-width: 1000px; margin: 0 auto; aspect-ratio: 1000 / 620; }
.system-wrap { padding: 0 var(--gutter) var(--s9); }
@media (max-width: 899px) { .system-stage { aspect-ratio: auto; } }

/* Connectors are drawn by main.js from the real chip and card positions: grey, straight, with
   hard corners, from the chip's edge into the card's edge. */
.system-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.system-lines path { fill: none; stroke: #e6e6e6; stroke-width: 1; stroke-linejoin: miter; }
.system-stage.in .system-lines path { animation: drawLine 1.2s var(--ease) forwards; }
.system-lines path:nth-child(1) { animation-delay: 0.30s; } .system-lines path:nth-child(2) { animation-delay: 0.42s; }
.system-lines path:nth-child(3) { animation-delay: 0.54s; } .system-lines path:nth-child(4) { animation-delay: 0.66s; }
.system-lines path:nth-child(5) { animation-delay: 0.78s; } .system-lines path:nth-child(6) { animation-delay: 0.90s; }
.system-lines path:nth-child(7) { animation-delay: 1.02s; } .system-lines path:nth-child(8) { animation-delay: 1.14s; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }

/* Four separate cards brought together with no space between them: each has its own border and
   radius, so where they meet the corners show. The block is narrower than the stage so the corner
   chips sit clear above and below it. */
.core-grid {
  position: absolute; left: 28%; top: 50%; width: 44%; transform: translateY(-50%);
  display: grid; grid-template-columns: 1fr 1fr;
}
.core-cell {
  position: relative; aspect-ratio: 1; overflow: hidden;
  background: var(--card); border: 1px solid #e6e6e6; border-radius: 10px; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 22px;
  font-family: var(--syne); font-weight: 600; font-size: clamp(16px, 2vw, 22px); letter-spacing: -0.01em;
}
.core-cell .name { position: relative; }

/* The illustration stays inside the tile's padding and fades out on every side well before it. */
.art {
  position: absolute; left: 0; right: 0; top: 22px; height: 56%; display: grid; place-items: center; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 46% 62% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 46% 62% at 50% 50%, #000 62%, transparent 100%);
}
.art > div { display: grid; gap: 8px; width: 74%; font-family: var(--inter); font-weight: 500; font-size: 12px; letter-spacing: 0; }
.mini { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); white-space: nowrap; }
.mini .av { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-weight: 600; flex: 0 0 auto; }
.mini .tag { margin-left: auto; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 600; }
.mini .chk { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid rgb(var(--ink) / 0.3); flex: 0 0 auto; }
.mini .chk.done { background: var(--core); border-color: var(--core); position: relative; }
.mini .chk.done::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.mini .file { width: 20px; height: 24px; border-radius: 4px; background: var(--alarm); color: #fff; font-size: 7px; font-weight: 700; display: grid; place-items: center; flex: 0 0 auto; }
.mini.shift { margin-left: 12%; }
/* Lines standing in for text, the way a doc thumbnail draws its body. */
.bars { display: grid; gap: 5px; flex: 1; }
.bars i { display: block; height: 5px; border-radius: 3px; background: rgb(var(--ink) / 0.1); }
.bars i:nth-child(2) { width: 82%; } .bars i:nth-child(3) { width: 64%; }
.doc { padding: 10px 12px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); display: grid; gap: 8px; }
.stack { position: relative; padding-top: 14px; }
.stack .doc { position: relative; }
.stack .behind { position: absolute; left: 10%; right: 10%; top: 0; z-index: 0; padding-block: 8px; opacity: 0.7; }
.stack .front { z-index: 1; }
.doc .hd .orb { width: 10px; height: 10px; }
.doc .hd .tag { margin-left: auto; padding: 1px 6px; border-radius: 999px; font-size: 9px; font-weight: 600; background: var(--green-bg); color: var(--green-fg); }
.doc .hd { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.doc .hd i { font-style: normal; font-weight: 400; color: rgb(var(--ink) / 0.46); font-variant-numeric: tabular-nums; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding: 8px 10px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); font-size: 10px; text-align: center; }
.cal span { padding: 3px 0; border-radius: 4px; color: rgb(var(--ink) / 0.62); font-variant-numeric: tabular-nums; }
.cal .on { background: var(--core); color: #fff; font-weight: 600; }

.chip {
  position: absolute; display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding-inline: 18px; border-radius: 10px;
  background: var(--card); border: 1px solid #e6e6e6; box-shadow: var(--shadow-card);
  font-size: 16px; font-weight: 600; white-space: nowrap;
  opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.94);
  transition: opacity 0.8s var(--ease), transform 1s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.chip i { width: 8px; height: 8px; border-radius: 50%; }
.system-stage.in .chip { opacity: 1; transform: none; }
.chip:hover { border-color: rgb(var(--ink) / 0.3); }
.chip:nth-of-type(1) { transition-delay: 0.05s; } .chip:nth-of-type(2) { transition-delay: 0.12s; }
.chip:nth-of-type(3) { transition-delay: 0.19s; } .chip:nth-of-type(4) { transition-delay: 0.26s; }
.chip:nth-of-type(5) { transition-delay: 0.33s; } .chip:nth-of-type(6) { transition-delay: 0.40s; }
.chip:nth-of-type(7) { transition-delay: 0.47s; } .chip:nth-of-type(8) { transition-delay: 0.54s; }
/* Level chips sit beside a card; corner chips sit clear above and below the block. */
.c-leads    { left: 9%;  top: 44px;    --dx: -30px; --dy: -20px; }
.c-calls    { right: 9%; top: 44px;    --dx: 30px;  --dy: -20px; }
.c-clients  { left: 2%;  top: 33%;     --dx: -40px; }
.c-notes    { right: 2%; top: 33%;     --dx: 40px; }
.c-tasks    { left: 2%;  top: 58%;     --dx: -40px; }
.c-files    { right: 2%; top: 58%;     --dx: 40px; }
.c-calendar { left: 9%;  bottom: 18px; --dx: -30px; --dy: 20px; }
.c-business { right: 9%; bottom: 18px; --dx: 30px;  --dy: 20px; }
/* Under 900px the stage stacks and the chips and their lines go: tablet and phone get the four tiles alone. */
@media (max-width: 899px) {
  .system-lines, .chip-cloud { display: none; }
  .core-grid { position: static; width: 100%; transform: none; margin-top: 0; }
  .core-cell { font-size: 22px; }
}
@media (min-width: 900px) { .chip-cloud { display: contents; } }

/* ============================================================================ HOW */

/* Text on the left, a stack of cards on a light purple ground on the right. */
.how-split { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .how-split { grid-template-columns: 1fr 1fr; } }
.how-steps { display: grid; align-content: center; gap: 8px; padding: var(--s7) var(--gutter) var(--s7) 0; }
.step {
  display: grid; grid-template-columns: 24px 1fr; gap: 16px; align-items: start; text-align: left;
  padding: 16px var(--gutter); border-left: 2px solid transparent; margin-left: -1px;
  transition: border-color 0.3s, opacity 0.3s; opacity: 0.55;
}
.step:hover, .step.live { opacity: 1; }
.step.live { border-left-color: var(--core); }
.step .n { font-size: 12px; font-weight: 600; color: rgb(var(--ink) / 0.46); padding-top: 6px; font-variant-numeric: tabular-nums; }
.step.live .n { color: var(--core); }
.step-body { display: grid; gap: 6px; }
.step-title { font-family: var(--syne); font-weight: 600; font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; }
.step-text { color: rgb(var(--ink) / 0.62); font-size: 16px; line-height: 26px; max-width: 40ch; }

.how-stack { position: relative; min-height: 520px; background: #ecebff; overflow: hidden; }
@media (max-width: 899px) { .how-stack { min-height: 460px; border-top: 1px solid var(--line); } }
/* The stack dissolves into its ground at the top and the left, where the back cards sit. */
.stack-fade { position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(to right, #ecebff 0%, rgb(236 235 255 / 0) 34%), linear-gradient(to bottom, #ecebff 0%, rgb(236 235 255 / 0) 30%); }
.how-stack .panel {
  position: absolute; left: 22%; top: 50%; margin-top: -150px; width: 66%; max-width: 420px; height: 300px;
  transition: transform 0.7s var(--ease), opacity 0.7s var(--ease);
}
.how-stack .pos-0 { z-index: 3; transform: translate(0, 0); opacity: 1; }
.how-stack .pos-1 { z-index: 2; transform: translate(-30px, -30px) scale(0.97); opacity: 0.75; }
.how-stack .pos-2 { z-index: 1; transform: translate(-60px, -60px) scale(0.94); opacity: 0.45; }
.how-stack .leaving { z-index: 4; transform: translate(60px, 24px) scale(0.98); opacity: 0; }
.how-stack .snap { transition: none; }

.panel { border-radius: 10px; background: var(--card); border: 1px solid var(--line); padding: var(--s4); position: relative; overflow: hidden; box-shadow: 0 20px 50px -24px rgba(48, 32, 160, 0.35); }
.panel-label .dim { color: rgb(var(--ink) / 0.46); font-weight: 500; text-transform: none; letter-spacing: 0; }
.panel-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--ink) / 0.46); margin-bottom: var(--s3); }

.call-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.call-tile { aspect-ratio: 4 / 3; border-radius: 8px; background: #2a2826; position: relative; display: grid; place-items: center; overflow: hidden; }
.call-tile .av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 14px; color: #fff; }
.call-tile .nm { position: absolute; left: 8px; bottom: 6px; font-size: 10px; color: rgba(255, 255, 255, 0.85); background: rgba(0, 0, 0, 0.35); padding: 2px 6px; border-radius: 4px; }
.call-eva { grid-column: 1 / -1; aspect-ratio: auto; height: 44px; background: var(--inset); border: 1px solid var(--line); display: flex; align-items: center; gap: 10px; padding-inline: 12px; font-size: 12px; }
.call-eva .orb { width: 16px; height: 16px; }
.call-eva .rec { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: rgb(var(--ink) / 0.62); }
.call-eva .rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--alarm); animation: blink 1.2s steps(1) infinite; }
.wave { position: absolute; left: 14px; right: 14px; bottom: 30px; height: 14px; display: flex; align-items: flex-end; gap: 3px; opacity: 0.85; }
.wave i { flex: 1; background: rgb(var(--glow) / 0.5); border-radius: 2px; height: 30%; animation: wave 1.1s ease-in-out infinite; }
.wave i:nth-child(2n) { animation-delay: -0.3s; } .wave i:nth-child(3n) { animation-delay: -0.6s; } .wave i:nth-child(5n) { animation-delay: -0.9s; }
@keyframes wave { 0%, 100% { height: 25%; } 50% { height: 100%; } }

.tx { display: grid; font-size: 12px; line-height: 1.5; }
.tx-line { display: grid; grid-template-columns: 30px 1fr; gap: 2px 10px; padding: 7px 0; border-top: 1px solid var(--line); opacity: 0; transform: translateY(4px); transition: opacity 0.4s, transform 0.4s; }
.tx-line:first-child { border-top: 0; }
.tx-line.on { opacity: 1; transform: none; }
.tx-line .t { grid-row: 1 / 3; color: rgb(var(--ink) / 0.46); font-size: 11px; font-variant-numeric: tabular-nums; padding-top: 1px; }
.tx-line .who { font-weight: 600; font-size: 11px; }
.tx-line .who.you { color: rgb(var(--ink) / 0.62); font-weight: 500; }
.tx-line .say { color: rgb(var(--ink) / 0.88); }
.tx-line .hl { border-radius: 3px; padding: 0 3px; margin: 0 -3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: background 0.5s 0.5s; }
.tx-line.on .hl { background: linear-gradient(90deg, rgb(var(--glow) / 0.22), rgb(var(--glow) / 0.08)); }
.tx-read { position: absolute; left: 1px; right: 1px; bottom: 1px; display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--core); opacity: 0; transition: opacity 0.5s; padding: 40px 16px 14px; background: linear-gradient(to top, var(--card) 55%, rgb(255 255 255 / 0)); border-radius: 0 0 10px 10px; }
.tx-read.on { opacity: 1; }
.tx-read .orb { width: 12px; height: 12px; }

.rec-card { font-size: 12px; display: grid; gap: 8px; }
.rec-head { display: flex; align-items: center; gap: 8px; }
.rec-head .orb { width: 16px; height: 16px; }
.rec-head .eva-read { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--core); }
.rec-head .tag { margin-left: auto; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; opacity: 0; transition: opacity 0.4s; }
.rec-head .tag.on { opacity: 1; }
.rec-read { line-height: 1.5; color: rgb(var(--ink) / 0.88); min-height: 54px; }
.rec-sub { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--ink) / 0.46); }
.fill { opacity: 0; transition: opacity 0.35s; }
.fill.on { opacity: 1; }
.rec-task { display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateX(-6px); transition: opacity 0.4s, transform 0.4s; }
.rec-task.on { opacity: 1; transform: none; }
.rec-task .ic { width: 16px; height: 16px; border-radius: 4px; display: grid; place-items: center; font-size: 10px; background: rgb(var(--ink) / 0.06); color: rgb(var(--ink) / 0.62); }
.rec-by { margin-top: 2px; font-size: 11px; color: rgb(var(--ink) / 0.46); }

.how-tail { text-align: center; padding: var(--s8) var(--gutter); border-top: 1px solid var(--line); }
.how-tail .h2 em { font-style: normal; color: var(--core); }

/* ============================================================================ EVA (dark) */
.eva { background: var(--page); color: rgb(var(--ink)); position: relative; overflow: hidden; }
.eva::before { content: ""; position: absolute; left: 50%; top: -260px; width: 1400px; height: 900px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(91, 76, 224, 0.34), transparent 62%); pointer-events: none; }
.eva .wrap { position: relative; }
.eva .head .h1, .eva .eva-cta .h1 { color: #fff; }
/* "And it gets better" is a plain line above the heading, not an eyebrow. */
.eva .lead-in { display: block; font-family: var(--syne); font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.01em; color: #fff; margin-bottom: 16px; }
.eva .head .display { color: #fff; max-width: 1100px; }

.trait { padding: var(--s6) var(--gutter) 0; display: flex; flex-direction: column; gap: 12px; min-height: 440px; overflow: hidden; }
.trait h3 { font-size: 28px; line-height: 36px; color: #fff; }
.trait p { color: rgb(var(--ink) / 0.62); font-size: 16px; line-height: 26px; }
.trait-art { margin-top: auto; padding-top: 36px; height: 230px; font-size: 12px; display: grid; gap: 10px; align-content: start; position: relative; }
/* The picture dissolves on every edge: up into the copy, out at the sides, and down past the
   cell's line, so each one reads as a thread that carries on rather than a block that ends. */
.trait-art {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 64%, transparent 100%), linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 64%, transparent 100%), linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
  mask-composite: intersect;
}
.bubble { max-width: 88%; padding: 8px 12px; border-radius: 12px; line-height: 1.45; }
.bubble-me { align-self: flex-end; justify-self: end; background: rgb(var(--ink) / 0.1); border-bottom-right-radius: 4px; }
.bubble-eva { justify-self: start; background: var(--inset); border: 1px solid var(--line); border-bottom-left-radius: 4px; display: grid; gap: 6px; }
.bubble-eva .src { font-size: 10px; color: #a79dff; display: flex; align-items: center; gap: 5px; }
.bubble-eva .src .orb { width: 9px; height: 9px; }
.lead-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; background: var(--inset); border: 1px solid var(--line); }
.lead-row .av { width: 26px; height: 26px; border-radius: 50%; background: rgba(226, 169, 86, 0.15); color: #e8bd7d; display: grid; place-items: center; font-size: 11px; font-weight: 600; }
.lead-row .nm { font-weight: 600; }
.lead-row .sub { font-size: 11px; color: rgb(var(--ink) / 0.46); }
.lead-row .quiet { margin-left: auto; font-size: 11px; color: rgb(var(--ink) / 0.46); font-variant-numeric: tabular-nums; }
.nudge { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; background: rgba(91, 76, 224, 0.2); border: 1px solid rgba(167, 157, 255, 0.35); color: #fff; line-height: 1.45; }
.nudge .orb { width: 14px; height: 14px; margin-top: 2px; }
.brief { display: grid; gap: 8px; }
.brief-line { display: flex; gap: 8px; align-items: flex-start; line-height: 1.45; color: rgb(var(--ink) / 0.88); }
.brief-line::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: rgb(var(--ink) / 0.46); margin-top: 7px; flex: 0 0 auto; }
.suggest { margin-top: 4px; padding: 10px 12px; border-radius: 8px; background: var(--inset); border: 1px solid var(--line); display: grid; gap: 8px; }
.suggest .row { display: flex; gap: 8px; align-items: center; }
.suggest .row .orb { width: 12px; height: 12px; }
.suggest .acts { display: flex; gap: 6px; }
.suggest .acts span { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.suggest .acts .ok { background: #fff; color: var(--core); }
.suggest .acts .no { border: 1px solid rgb(var(--ink) / 0.14); color: rgb(var(--ink) / 0.62); }
@media (prefers-reduced-motion: no-preference) {
  .trait-art .anim { opacity: 0; transform: translateY(6px); animation: artIn 0.6s var(--ease) forwards; }
  .trait-art .anim:nth-child(2) { animation-delay: 0.6s; } .trait-art .anim:nth-child(3) { animation-delay: 1.2s; }
}
@keyframes artIn { to { opacity: 1; transform: none; } }

/* The Stripe-style split cards: text on one side, a gradient panel on the other. */
.splits { display: grid; gap: var(--s4); padding: var(--s9) var(--gutter) 72px; border-top: 1px solid var(--line); }
@media (min-width: 800px) { .splits { grid-template-columns: 1fr 1fr; } }
.split { --mx: 50%; --my: 50%; display: grid; grid-template-columns: 1fr 140px; border-radius: 10px; background: #0f0f0f; /* a step off the section black, not the full card lift */ overflow: hidden; min-height: 142px; position: relative; transition: transform 0.3s var(--ease); }
@media (min-width: 500px) { .split { grid-template-columns: 1fr 180px; } }
.split:hover { transform: translateY(-3px); }
/* The border is drawn as two 1px rings rather than a CSS border: a resting hairline, and over it a
   purple one that only shows in a pool around the pointer (--mx/--my, set from main.js) and follows it. */
.split::before, .split::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.split::before { background: var(--line); }
.split::after { background: radial-gradient(240px circle at var(--mx) var(--my), rgba(167, 157, 255, 0.95), rgba(167, 157, 255, 0.25) 45%, transparent 70%); opacity: 0; transition: opacity 0.35s; }
.split:hover::after { opacity: 1; }
.split-text { padding: var(--s5) var(--s5) var(--s5) var(--s5); display: grid; align-content: center; position: relative; z-index: 1; }
.split-text b { font-weight: 600; color: #fff; }
.split-text p { color: rgb(var(--ink) / 0.62); font-size: 16px; line-height: 26px; max-width: 34ch; }
.split-art { position: static; display: grid; place-items: center; }
/* The wash lives in the art column only. It is fully transparent 200px from the right edge, which
   is past the end of the longest line of copy with room to spare, so the text sits on plain card. */
.split-art::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 200px; pointer-events: none; background: linear-gradient(to left, #12112a 0%, #100f24 30%, rgb(16 15 36 / 0) 100%), radial-gradient(circle at 72% 50%, rgb(var(--glow) / 0.32), transparent 55%); }
.split-art::after { content: ""; position: absolute; left: 66%; top: -50%; width: 90%; height: 200%; pointer-events: none; background: conic-gradient(from 0deg, transparent 0 62%, rgb(var(--glow) / 0.16) 76%, transparent 90%); animation: spin 18s linear infinite; -webkit-mask-image: linear-gradient(to right, transparent, #000 50%); mask-image: linear-gradient(to right, transparent, #000 50%); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .split-art::after { animation: none; } }
.split-art .glyph { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 16px; background: rgb(var(--glow) / 0.16); border: 1px solid rgb(var(--glow) / 0.35); display: grid; place-items: center; color: #b3a9ff; }
.split-art .glyph svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.eva-cta { text-align: center; padding: var(--strip-top) var(--gutter); border-top: 1px solid var(--line); }
.eva-cta .h1 { margin-bottom: 24px; }

/* ============================================================================ QUOTES */
.quote { padding: var(--s6) var(--gutter); display: flex; flex-direction: column; gap: var(--s5); min-height: 440px; }
.quote p { font-size: 22px; line-height: 30px; color: rgb(var(--ink) / 0.88); flex: 1; }
.quote-by { display: flex; align-items: center; gap: 12px; }
.quote-by .av { width: 40px; height: 40px; border-radius: 50%; background: var(--light); display: grid; place-items: center; font-weight: 600; color: var(--core); font-size: 14px; }
.quote-by b { display: block; font-size: 14px; line-height: 22px; font-weight: 600; }
.quote-by span { display: block; font-size: 12px; line-height: 18px; color: rgb(var(--ink) / 0.46); }

/* ============================================================================ FAQ */
/* "Now let's address those / questions": the first line measures 622 at 48px, so 680 breaks after "those".
   The heading sits 48 above the card, and the card leaves 96 of ground before the purple band below. */
#faq .head { padding-bottom: 48px; }
#faq .head .h1 { max-width: 680px; text-wrap: initial; }
#faq .wrap { padding-bottom: 96px; }
.faq-body { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .faq-body { grid-template-columns: 400px 1fr; } }
.faq-art { position: relative; overflow: hidden; min-height: 260px; background: var(--card); }
/* Each scene fills the column inside a 64px padding. */
.faq-art .scene { position: absolute; inset: 64px; opacity: 0; transform: scale(0.98); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.faq-art .scene.on { opacity: 1; transform: none; }
.faq-art .scene:not(.on) { pointer-events: none; }
/* Every scene dissolves towards the bottom of the column. */
.faq-art .scene { -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }
/* Privacy: a field of binary in the brand purple, three tints so it has depth. */
.bin { display: grid; grid-template-columns: repeat(22, 1fr); grid-template-rows: repeat(26, 1fr); overflow: hidden; text-align: center; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--core); }
.bin i { font-style: normal; display: grid; place-items: center; line-height: 1; min-height: 0; }
.bin i.t1 { color: #a79dff; }
.bin i.t2 { color: #dedaff; }
/* How it works: a conversation. Bubbles alternate sides, each a short run of sound bars; one voice in the
   core purple, the other in lavender. Same bubble shape as the Memory card. */
.chat { display: grid; gap: 10px; align-content: center; overflow: hidden; }
.chat div { display: flex; align-items: center; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); width: max-content; max-width: 100%; }
.chat .l { justify-self: start; border-bottom-left-radius: 4px; }
.chat .r { justify-self: end; border-bottom-right-radius: 4px; }
.chat i { display: block; width: 4px; height: calc(var(--h) * 1px); border-radius: 2px; background: var(--core); }
.chat .r i { background: #a79dff; }
/* Pricing: a field of small squares, the first part solid and the rest pale, with a hard edge between. */
.fill { display: grid; grid-template-columns: repeat(14, 1fr); grid-template-rows: repeat(18, 1fr); place-items: center; overflow: hidden; }
.fill i { display: block; width: 13px; height: 13px; border-radius: 3px; background: var(--core); }
.fill i.t2 { background: #dedaff; }
/* Setup: a checklist with no words, the first few ticked. */
.list { display: grid; grid-template-rows: repeat(7, 1fr); gap: 8px; align-items: stretch; overflow: hidden; }
.list div { display: flex; align-items: center; gap: 12px; padding: 0 14px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.list i { display: block; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid #a79dff; flex: 0 0 auto; }
.list b { display: block; height: 6px; width: var(--w); border-radius: 3px; background: #a79dff; }
.list .on i { border-color: var(--core); background: var(--core); }
.list .on b { background: #dedaff; }
/* The list is a two-row grid: the tab row, then every panel stacked in ONE cell, so the card keeps
   the height of its tallest panel and a shorter tab leaves ground at the bottom instead of shrinking it. */
.faq-list { padding: var(--s5) var(--s6) var(--s6); display: grid; grid-template-rows: auto 1fr; align-content: start; }
.faq-tabs { display: flex; gap: 60px; flex-wrap: wrap; justify-content: center; margin-bottom: var(--s4); }
@media (max-width: 899px) { .faq-tabs { gap: 8px; } }
/* Same box as the hero tag-line: 1px ring, 7px 14px inside it, 14/1.3 type. */
.faq-tab { padding: 7px 14px; border-radius: 999px; font-size: 14px; line-height: 1.3; font-weight: 500; color: rgb(var(--ink) / 0.62); border: 1px solid rgb(var(--ink) / 0.14); background: var(--card); transition: all 0.2s; }
.faq-tab:hover { color: rgb(var(--ink)); border-color: rgb(var(--ink) / 0.3); }
.faq-tab[aria-selected="true"] { background: rgb(var(--ink)); color: var(--page); border-color: rgb(var(--ink)); }
.faq-panel { grid-area: 2 / 1; visibility: hidden; }
.faq-panel.on { visibility: visible; }
.acc { border-bottom: 1px solid var(--line); }
.acc-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: 18px 0; text-align: left; font-weight: 600; font-size: 16px; line-height: 1.4; }
.acc-btn .pm { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; background: rgb(var(--ink) / 0.06); display: grid; place-items: center; transition: background 0.2s; }
.acc-btn:hover .pm { background: rgb(var(--ink) / 0.1); }
.acc-btn .pm svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; transition: transform 0.3s var(--ease); }
.acc-btn[aria-expanded="true"] .pm { background: var(--core); color: #fff; }
.acc-btn[aria-expanded="true"] .pm svg { transform: rotate(45deg); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s var(--ease); }
.acc-panel > div { overflow: hidden; }
.acc-panel.open { grid-template-rows: 1fr; }
.acc-panel p { padding-bottom: 20px; color: rgb(var(--ink) / 0.62); font-size: 16px; line-height: 26px; max-width: 62ch; }

/* ============================================================================ FINAL */
/* A full-bleed grey band, the one strip that does not show the rails. */
/* Purple band: white heading, white button with purple text, the picture straight under the button. */
.final { background: var(--core); border-bottom: 0; overflow: hidden; }
.final .wrap { border-color: transparent; }
.final .head { padding-bottom: 44px; }
.final .head .display { color: #fff; }
.final .btn-ink { background: #fff; color: rgb(var(--ink)); }
.final .btn-ink:hover { background: var(--light); }
.final .head > * { max-width: 960px; }
/* One exported picture (laptop and phone, screenshots baked in), drawn in Figma. Its visible
   content is 1201 units wide and the last 22 are only the phone's shadow, so the picture is drawn
   1223/1201 of the column: the bezels land exactly on both rails and the shadow spills past. */
.devices img { display: block; width: calc(100% * 1223 / 1201); max-width: none; height: auto; }

/* ============================================================================ WAITLIST */
/* A dark band, like the Eva section. Heading, bullets and form on the left; on the right a panel
   of halftone dots that flow and part around the pointer, with the mark at rest in the middle. */
.wait { background: var(--page); color: rgb(var(--ink)); }
.wait-grid { display: grid; gap: var(--s6); align-items: stretch; padding: var(--s9) var(--gutter); }
@media (min-width: 900px) { .wait-grid { grid-template-columns: 1fr 1fr; gap: var(--s8); } }
.wait-copy { display: grid; align-content: center; }
.wait-copy .h1 { color: #fff; margin: 0 0 16px; }
.wait .form { background: transparent; border: 0; padding: 0; }
.wait-copy .lede { font-size: 16px; line-height: 26px; color: rgb(var(--ink) / 0.62); max-width: 52ch; margin-bottom: var(--s6); }
/* The field is on the page, not in a card: no chrome, and the dots thin out into the band on every side. A soft ellipse
   keeps the corners from reading as a rectangle; the four linear feathers guarantee every rim reaches zero. */
.wait-art { position: relative; min-height: 680px; }
.wait-field {
  --feather: 120px;
  -webkit-mask-image:
    radial-gradient(ellipse 70% 66% at 50% 50%, #000 30%, transparent 100%),
    linear-gradient(to right, transparent, #000 var(--feather), #000 calc(100% - var(--feather)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--feather), #000 calc(100% - var(--feather)), transparent);
  mask-image:
    radial-gradient(ellipse 70% 66% at 50% 50%, #000 30%, transparent 100%),
    linear-gradient(to right, transparent, #000 var(--feather), #000 calc(100% - var(--feather)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--feather), #000 calc(100% - var(--feather)), transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
@media (max-width: 899px) { .wait-art { order: -1; min-height: 280px; } }
.wait-field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wait-mark { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; transform: translate(-50%, -50%); border-radius: 24px; background: var(--core); display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(11, 10, 18, 0.7), 0 0 60px rgba(91, 76, 224, 0.55); }
.wait-mark svg { width: 52px; height: 52px; }
.form { border-radius: 10px; background: var(--card); border: 1px solid var(--line); padding: var(--s6); display: grid; gap: var(--s4); }
.field { display: grid; gap: 6px; }
.field[hidden] { display: none; } /* display: grid would otherwise beat the hidden attribute */
.field label, .field-label { font-size: 14px; line-height: 22px; font-weight: 600; color: rgb(var(--ink) / 0.88); }
/* Click-to-choose options: the same pill as the FAQ tabs and the hero tag-line, chosen one filled. */
.choices { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
.choice { padding: 7px 14px; border-radius: 999px; font-size: 14px; line-height: 1.3; font-weight: 500; color: rgb(var(--ink) / 0.62); border: 1px solid rgb(var(--ink) / 0.14); background: var(--inset); transition: color 0.2s, border-color 0.2s, background 0.2s; }
.choice:hover { color: rgb(var(--ink)); border-color: rgb(var(--ink) / 0.3); }
.choice:focus-visible { outline: none; border-color: rgb(var(--ink) / 0.4); box-shadow: 0 0 0 3px rgb(var(--ink) / 0.08); }
.choice[aria-checked="true"] { background: rgb(var(--ink)); color: var(--page); border-color: rgb(var(--ink)); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 16px; color: rgb(var(--ink));
  height: 44px; padding-inline: 14px; border-radius: 8px;
  border: 1px solid rgb(var(--ink) / 0.14); background: var(--inset);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { height: auto; min-height: 96px; padding-block: 12px; resize: vertical; }
/* Focus on a form control is a lighter grey ring, not purple: purple is spent on Eva only. */
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: rgb(var(--ink) / 0.4); box-shadow: 0 0 0 3px rgb(var(--ink) / 0.08); }
/* The dropdown is drawn like the app's Select: a trigger shaped like the inputs beside it, and a
   card-shaped list with a tick on the chosen row. The native <select> menu could not be styled. */
.dd { position: relative; }
.dd-btn { width: 100%; height: 44px; padding-inline: 14px; border-radius: 8px; border: 1px solid rgb(var(--ink) / 0.14); background: var(--inset); font: inherit; font-size: 16px; text-align: left; display: flex; align-items: center; gap: 8px; color: rgb(var(--ink) / 0.4); transition: border-color 0.2s, box-shadow 0.2s; }
.dd-btn.has-value { color: rgb(var(--ink)); }
.dd-btn:focus-visible, .dd-btn[aria-expanded="true"] { outline: none; border-color: rgb(var(--ink) / 0.4); box-shadow: 0 0 0 3px rgb(var(--ink) / 0.08); }
.dd-btn svg { margin-left: auto; width: 16px; height: 16px; stroke: rgb(var(--ink) / 0.45); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s var(--ease); }
.dd-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.dd-list { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; border-radius: 10px; border: 1px solid rgb(var(--ink) / 0.12); background: var(--card); box-shadow: 0 18px 40px rgba(32, 30, 29, 0.16); }
.dd-list li { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-radius: 7px; font-size: 14px; color: rgb(var(--ink) / 0.78); cursor: pointer; }
.dd-list li.active { background: rgb(var(--ink) / 0.05); color: rgb(var(--ink)); }
.dd-list li svg { margin-left: auto; width: 14px; height: 14px; stroke: rgb(var(--ink) / 0.55); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.dd-list li[aria-selected="true"] svg { visibility: visible; }
.theme-dark .dd-list { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); }
.form-row { display: grid; gap: var(--s4); }
@media (min-width: 560px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form .btn { width: 100%; margin-top: var(--s2); }
.form-note { font-size: 12px; color: rgb(var(--ink) / 0.46); text-align: center; }
.form-done { display: none; text-align: center; padding: var(--s6) 0; }
.form-done .orb { width: 48px; height: 48px; margin: 0 auto var(--s4); }
.form.sent > :not(.form-done) { display: none; }
.form.sent .form-done { display: block; }
.form-error { display: none; color: var(--alarm); font-size: 12px; line-height: 18px; }
.form-error.on { display: block; }

/* ============================================================================ FOOTER */
/* The footer continues the waitlist's dark ground; the strip line between them is the only seam. */
.footer { background: var(--page); color: rgb(var(--ink)); border-bottom: 0; }
.foot-grid { display: grid; gap: var(--s6); padding: var(--s8) var(--gutter); }
@media (min-width: 800px) { .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: var(--s5); } }
.foot-brand p { margin-top: var(--s3); color: rgb(var(--ink) / 0.62); max-width: 28ch; font-size: 16px; line-height: 26px; }
.foot-col b { display: block; font-size: 14px; line-height: 22px; font-weight: 600; margin-bottom: var(--s3); }
.foot-col a { display: block; padding: 4px 0; font-size: 14px; color: rgb(var(--ink) / 0.62); transition: color 0.2s; }
.foot-col a:hover { color: rgb(var(--ink)); }
.foot-base { padding: var(--s5) var(--gutter); border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap; font-size: 12px; line-height: 18px; color: rgb(var(--ink) / 0.46); }
.foot-base .brand { font-size: 18px; }


/* ============================================================================ PHONES */
/* Under 600px the page is simplified rather than squeezed: rails 10px in, one column, the type one step
   down (every 18 becomes 16), the clickable frame replaced by a phone that fades through the same
   screens, the one-system chips gone, the FAQ picture gone, the quotes a horizontal slider. */
.hero-phone { display: none; }
@media (max-width: 899px) {
  .btn-nav { display: none; }
  /* Tablet and phone share these: no FAQ illustration, the How steps run sideways, and the
     testimonials are one row swiped. */
  .faq-art { display: none; }
  .how-steps { display: flex; gap: 0; padding: var(--s6) 0; overflow: hidden; }
  .how-steps .step { flex: 0 0 100%; opacity: 1; border-left: 0; margin-left: 0; padding: 0 var(--gutter); transform: translateX(calc(var(--i, 0) * -100%)); transition: transform 0.6s var(--ease); }
  .how-steps:has(.step[data-step="2"].live) { --i: 1; }
  .how-steps:has(.step[data-step="3"].live) { --i: 2; }
  /* The front card of the stack is centred in the tile, not pushed right as on desktop. */
  .how-stack .panel { left: calc(50% - min(37%, 210px)); width: 74%; }
  #testimonials .cells-3 { display: flex; overflow: auto hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
  #testimonials .cells-3::-webkit-scrollbar { display: none; }
  #testimonials .quote { flex: 0 0 88%; scroll-snap-align: start; min-height: 320px; padding: var(--s5); }
}
@media (max-width: 599px) {
  :root { --gutter: 20px; --strip: 40px; --strip-top: 72px; }
  /* The rails stay: 10px in from each edge of the phone. */
  .wrap { width: calc(100% - 20px); }
  /* Logo and burger sit 4px in from the rails, not on the copy's gutter. The burger's 44px tap
     target hangs past the rail so its lines land on that 4px. */
  .nav .wrap { padding-inline: 4px; }
  .nav-burger { margin-right: -11px; }
  .nav .brand { gap: 4px; }

  /* Type: one step down. Forced line breaks in headings are desktop breaks; phones wrap on their own. */
  h1 br, h2 br { display: none; }
  .display { font-size: 36px; line-height: 44px; }
  .h1 { font-size: 30px; line-height: 40px; }
  .h2 { font-size: 26px; }
  .h3 { font-size: 20px; line-height: 28px; }
  .h4 { font-size: 18px; }
  .lede, .wait-copy .lede { font-size: 16px; line-height: 26px; }
  .pain p { font-size: 14px; line-height: 22px; }
  /* Eva: the heading at the section size, the lead-in and trait titles at the card-title size. */
  .eva .head .display { font-size: 30px; line-height: 40px; }
  .eva .lead-in, .trait h3 { font-size: 20px; line-height: 28px; }
  .trait p, .split-text p { font-size: 14px; line-height: 22px; }
  .acc-panel p { font-size: 14px; line-height: 22px; }
  /* Heading to content: 24px in the three sections that had 48 on desktop. */
  .how .head, #testimonials .head, #faq .head { padding-bottom: 24px; }
  #testimonials .head, #faq .head { padding-top: 96px; }
  .step-title { font-size: 20px; line-height: 28px; }
  .step-text { font-size: 14px; line-height: 22px; }
  .quote p { font-size: 16px; line-height: 26px; }
  .hero-text .tag-line span { font-size: 12px; }

  /* Hero: the phone instead of the frame. */
  .hero-stage { margin-top: 48px; }
  .product-cell { height: 420px; overflow: hidden; display: grid; align-items: start; }
  .product { display: none; }
  .hero-phone { display: block; width: 100%; }
  .system-wrap { padding-bottom: var(--s7); }
  /* The tile labels sit 11px off the bottom, not 22, and the illustration ends higher above them. */
  .core-cell { padding-bottom: 11px; font-size: 16px; }
  .art { height: 50%; }
  .how-stack { min-height: 380px; }
  .how-tail .h2 { font-size: 20px; line-height: 28px; }
  /* The clock's key sits under the clock, not squashed beside it. */
  .vig-clock { grid-template-columns: 1fr; justify-items: center; gap: 20px; height: auto; padding-bottom: var(--s6); }
}
/* The phone itself: the mockups carry their own bezel and are cut off at the bottom, so the tile
   clips them and the purple shows only past the rounded corners. Cross-faded by main.js. */
.phone { position: relative; aspect-ratio: 1200 / 1839; }
.phone img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s var(--ease); }
.phone img.on { opacity: 1; }

/* ============================================================================ LEGAL PAGES */
/* /privacy and /terms. The same grid as the FAQ: a left-aligned heading block, then a two-column
   body split by a hairline, the page's own contents list on the left and the prose on the right.
   Nothing new is drawn here: the type is the site's scale (22/30 for section headings, 16/26 for
   copy at the same ink as every other run of body text), tables are hairline rows, and the only
   colour is the ink. */
.legal .head { padding-bottom: var(--s7); }
.legal .head .h1 { max-width: 820px; }
.legal .head .lede { margin-top: var(--s3); }
.legal-body { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
/* A grid item's min-width is auto, so a table's intrinsic width would push the prose past the rail on a phone. */
.legal-body > * { min-width: 0; }
@media (min-width: 900px) { .legal-body { grid-template-columns: 320px 1fr; } }
.legal-toc { display: none; }
@media (min-width: 900px) {
  .legal-toc { display: block; border-right: 1px solid var(--line); padding: var(--s8) var(--gutter); }
  .legal-toc > div { position: sticky; top: 96px; }
}
.legal-toc b { display: block; font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--ink) / 0.46); margin-bottom: var(--s3); }
.legal-toc a { display: block; padding: 5px 0; font-size: 14px; line-height: 22px; color: rgb(var(--ink) / 0.62); transition: color 0.2s; }
.legal-toc a:hover { color: rgb(var(--ink)); }
.legal-prose { padding: var(--s8) var(--gutter) var(--s10); max-width: calc(640px + 2 * var(--gutter)); }
.legal-prose h2 { font-size: 22px; line-height: 30px; font-weight: 600; letter-spacing: 0; margin: var(--s7) 0 var(--s3); scroll-margin-top: 96px; }
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose h3 { font-family: var(--inter); font-size: 16px; line-height: 26px; font-weight: 600; letter-spacing: 0; margin: var(--s5) 0 var(--s2); }
.legal-prose p, .legal-prose li { font-size: 16px; line-height: 26px; color: rgb(var(--ink) / 0.62); }
.legal-prose p + p { margin-top: var(--s4); }
.legal-prose p + ul, .legal-prose p + ol, .legal-prose ul + p, .legal-prose ol + p { margin-top: var(--s4); }
/* A table sits one step further from its copy than a list does. */
.legal-prose p + .legal-table-wrap, .legal-prose .legal-table-wrap + p { margin-top: var(--s5); }
.legal-prose ul, .legal-prose ol { padding-left: 22px; display: grid; gap: var(--s2); }
.legal-prose ul { list-style: disc; }
.legal-prose ol { list-style: decimal; }
.legal-prose li::marker { color: rgb(var(--ink) / 0.46); }
.legal-prose strong, .legal-prose b { font-weight: 600; color: rgb(var(--ink) / 0.88); }
.legal-prose a { color: rgb(var(--ink) / 0.88); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(var(--ink) / 0.3); }
.legal-prose a:hover { text-decoration-color: rgb(var(--ink)); }
/* Tables are hairline rows, no vertical lines, header in the caption style. */
.legal-table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--line); }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 22px; }
.legal-table th { font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--ink) / 0.46); padding-top: 10px; padding-bottom: 10px; }
.legal-table td { color: rgb(var(--ink) / 0.62); }
.legal-table td:first-child { color: rgb(var(--ink) / 0.88); font-weight: 600; white-space: nowrap; }
.legal-table-wrap { overflow-x: auto; }
/* A four-column table is squashed under 600px; it keeps a readable width and scrolls sideways inside its own box instead. */
@media (max-width: 599px) { .legal-table-wide .legal-table { min-width: 560px; } }
/* The two pages point at each other, and the reader is told when it was last changed. */
.legal-meta { margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--line); font-size: 14px; line-height: 22px; color: rgb(var(--ink) / 0.46); }
@media (max-width: 599px) {
  .legal .head { padding-bottom: var(--s6); }
  .legal-prose { padding-bottom: var(--s8); }
  .legal-prose h2 { font-size: 20px; line-height: 28px; }
  .legal-prose p, .legal-prose li { font-size: 14px; line-height: 22px; }
  .legal-prose h3 { font-size: 14px; line-height: 22px; }
  .legal-table-wrap:not(.legal-table-wide) .legal-table td:first-child { white-space: normal; }
}

/* ============================================================================ PRICING PAGE */
/* /pricing. Two plan cards on the card grid, a comparison table in hairline rows, and the pricing
   questions from the FAQ. Nothing new is drawn: the cards are the testimonial cells, the price is
   the section-heading size, the ticks are ink, and the table is the legal pages' table with a
   column per plan. */
/* The two cards run rail to rail like every other cell row; the copy is inset as the pain cells are. */
.plan { padding: var(--s7) 82px var(--s8); display: flex; flex-direction: column; }
@media (max-width: 1099px) { .plan { padding: var(--s7) var(--s6) var(--s8); } }
/* Pro is the inverted card: the same ink the selected row and the chosen tab use, with the dark
   theme's alphas for everything on it. The card grid's white background is overridden here, which
   is why this rule sits below .cells-card. */
.plan-pro { background: #201e1d; color: rgb(var(--ink)); }
.plan .h3 { margin-bottom: var(--s2); }
/* The price block is two lines tall on both cards, so the two prices sit level whether or not the
   struck-through standard price is above. */
.plan-price { display: flex; flex-wrap: wrap; align-items: baseline; align-content: flex-end; gap: 0 10px; margin-top: var(--s5); min-height: 92px; }
.plan-amount { font-family: var(--syne); font-weight: 700; font-size: 48px; line-height: 56px; letter-spacing: -0.02em; }
/* The standard price, struck through on its own line above the launch price, at the card-title size. */
.plan-was { flex: 0 0 100%; font-family: var(--syne); font-weight: 600; font-size: 28px; line-height: 36px; letter-spacing: -0.01em; color: rgb(var(--ink) / 0.46); text-decoration-thickness: 2px; }
.plan-per { font-size: 16px; line-height: 26px; color: rgb(var(--ink) / 0.62); }
.plan-note { margin-top: var(--s1); min-height: 22px; font-size: 14px; line-height: 22px; color: rgb(var(--ink) / 0.46); }
/* The ghost button carries a 1px border; the primary one gets a clear one so the two lists start
   level. On the inverted card the primary button is white, as it is in the Eva section. */
.plan .btn { margin-top: var(--s5); width: 100%; }
.plan .btn-primary { border: 1px solid transparent; }
/* The line under the button: the trial on Pro, and a matching line on Free so the two lists stay
   level. Held to two lines on both cards for the same reason the price block is held to two. */
.plan-under { margin-top: var(--s3); min-height: 44px; font-size: 14px; line-height: 22px; color: rgb(var(--ink) / 0.62); }
.plan-plus { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); font-size: 14px; line-height: 22px; font-weight: 600; color: rgb(var(--ink) / 0.88); }
.plan-list { margin-top: var(--s3); display: grid; gap: 10px; }
.plan-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 26px; color: rgb(var(--ink) / 0.62); }
/* A tick in ink, drawn once and used in the cards and the table. */
.tick { display: inline-block; flex: 0 0 auto; width: 16px; height: 16px; margin-top: 5px; background: rgb(var(--ink) / 0.88); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") center / contain no-repeat; }
/* The Pro column's header is the same ink pill as a chosen FAQ tab, at the header's own type. */
.plan-tag { display: inline-flex; align-items: center; height: 24px; padding-inline: 10px; border-radius: 999px; background: rgb(var(--ink)); color: var(--page); margin-block: -3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The comparison table: the feature in the first column, one column per plan, hairline rows. */
.compare { padding: 0 var(--gutter) var(--s9); }
.compare-table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--line); table-layout: fixed; }
.compare-table th, .compare-table td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 26px; }
.compare-table col:first-child { width: auto; }
.compare-table thead th { font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--ink) / 0.46); padding-top: 10px; padding-bottom: 10px; }
.compare-table tbody th { font-weight: 500; color: rgb(var(--ink) / 0.88); }
.compare-table td { color: rgb(var(--ink) / 0.62); }
.compare-table th:not(:first-child), .compare-table td { width: 22%; }
.compare-table td .tick { margin-top: 5px; }

/* The questions: the FAQ's accordion, in one column at the prose width, 96 of ground under it. */
.price-faq { padding: 0 var(--gutter) var(--s9); max-width: calc(760px + 2 * var(--gutter)); margin-inline: auto; }
.price-faq .faq-panel { grid-area: auto; }
#questions .head { padding-bottom: 48px; }

@media (max-width: 899px) {
  .plan { padding: var(--s6) var(--s5) var(--s7); }
  .compare-table th:not(:first-child), .compare-table td { width: 30%; }
}
@media (max-width: 599px) {
  .plan-amount { font-size: 36px; line-height: 44px; }
  .plan-list li { font-size: 14px; line-height: 22px; }
  .plan-was { font-size: 22px; line-height: 30px; }
  .plan-price { min-height: 74px; }
  .plan-list .tick { margin-top: 3px; }
  /* The stacked cards already say everything the table says, and three columns in 313px wrap every
     cell to three lines. The phone page is kept short: the table goes. */
  #compare { display: none; }
  #questions .head { padding-bottom: 24px; }
  .price-faq { padding-bottom: var(--s8); }
}