/*
 * Launch.
 *
 * The site is a product launch: a dark stage, the real app lit from behind,
 * and headlines set large in Geist. One blue carries every accent -- the
 * eyebrow over a heading, the light behind a product shot, the flat line that
 * is our price -- and white carries every primary action. Headlines come in
 * two tones: the claim in white, what follows from it in grey.
 *
 * Every screen on the site is the real app. The frames around them, a browser
 * window and a phone, are the only things drawn, and they are drawn plainly:
 * no invented status bars, no notifications that never happened.
 */

@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/geist-mono-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* The stage, and the one step up from it that tiles and windows sit on. */
  --bg: #050607;
  --bg-lift: #0a0c0f;
  --tile: #0b0d11;
  --chrome: #111318;

  --tx: #f5f6f8;
  --tx2: #a1a9b5;
  --tx3: #818a97;
  /* The second line of a two-tone headline. 4.6:1 on the stage. */
  --dim: #7d8694;
  /* Long-form reading: a step under white, so a page of it does not glare. */
  --read: #c9ced6;

  --line: rgba(255, 255, 255, 0.08);
  --line2: rgba(255, 255, 255, 0.14);

  /* The one accent, and the light it throws. */
  --blue: #8fb0ff;
  --blue-line: #6f9bff;
  --glow: 64 112 255;
  /* State, where state is the point: a window closing, a service up or down. */
  --amber: #f2b33d;
  --green: #45c486;
  --red: #ff6b6b;

  /* Older names the page-local styles (the plan helper, the status board)
     were written against. */
  --card: var(--tile);
  --bd: var(--line);
  --bd2: var(--line2);
  --fill: rgba(255, 255, 255, 0.05);
  --green-dot: var(--green);
  --r: 24px;

  --f: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Corners: controls, windows, tiles. Actions are pills. */
  --r-s: 8px;
  --r-m: 16px;
  --r-l: 24px;

  /* The type ramp. Every size on the site is one of these. */
  --fs-plate: 12.5px;
  --fs-small: 14px;
  --fs-body: 17px;
  --fs-eyebrow: 17px;
  --fs-lead-s: 19px;
  --fs-lead: clamp(18px, 1.55vw, 22px);
  --fs-h3: 22px;
  --fs-h2-minor: clamp(28px, 3vw, 40px);
  --fs-h2: clamp(40px, 5.6vw, 80px);
  --fs-h1: clamp(50px, 8vw, 116px);
  --fs-close: clamp(54px, 7.8vw, 112px);
  --fs-figure: clamp(128px, 15.3vw, 220px);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font-family: var(--f);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  accent-color: var(--blue);
  caret-color: var(--blue);
}

::selection { background: rgb(var(--glow) / 0.5); color: #fff; }

.wrap { max-width: 1304px; margin: 0 auto; padding-inline: 32px; }
@media (max-width: 640px) { .wrap { padding-inline: 20px; } }

section { padding-block: clamp(48px, 5.3vw, 76px); }

/* ---------- Type --------------------------------------------------------- */

h1, h2, h3 { font-weight: 600; text-wrap: balance; color: var(--tx); }
h1 { font-size: var(--fs-h1); line-height: 0.96; letter-spacing: -0.055em; margin: 0 0 0.3em; }
h2 { font-size: var(--fs-h2); line-height: 1; letter-spacing: -0.05em; margin: 0 0 0.4em; }
h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 0.4em; }
h2.minor { font-size: var(--fs-h2-minor); line-height: 1.1; letter-spacing: -0.035em; }
.dim { color: var(--dim); }

p { margin: 0 0 1em; }
.eyebrow { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: -0.01em; color: var(--blue); margin: 0 0 16px; }
.lead { font-size: var(--fs-lead); line-height: 1.45; color: var(--tx2); max-width: 46ch; }
.small { font-size: var(--fs-small); color: var(--tx2); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
b, strong { font-weight: 600; color: var(--tx); }
.center { text-align: center; }
.center .lead, .center.lead { margin-inline: auto; }

@media (max-width: 640px) { br.wide { display: none; } }

a {
  color: var(--tx);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
a:hover { text-decoration-color: currentColor; }

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

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--tx); color: var(--bg); font-weight: 600; text-decoration: none;
  padding: 10px 16px; border-radius: 999px;
}
.skip:focus { top: 12px; }

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

/* ---------- Actions ------------------------------------------------------ */

/* One primary action, white, everywhere. The others are outlines or a blue
   line of text with a chevron. */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px;
  background: var(--tx); color: var(--bg);
  font-family: var(--f); font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 160ms ease, box-shadow 160ms ease;
}
.button:hover { background: #fff; text-decoration: none; }
.button:active { transform: scale(0.97); }
.button.large { min-height: 56px; padding: 0 32px; font-size: 18px; }
.button.quiet { background: transparent; color: var(--tx); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
.button.quiet:hover { background: rgba(255, 255, 255, 0.06); }
/* Names the older markup still uses for the primary action. */
.button.live, .button.accent, .button.light { background: var(--tx); color: var(--bg); }

.more {
  display: inline-block; padding-block: 10px; text-wrap: balance;
  color: var(--blue); font-weight: 500; text-decoration: none;
}
.more::after {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 10px; vertical-align: 0.12em;
  border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg);
  transition: transform 160ms var(--ease-out);
}
.more:hover { text-decoration: none; color: #b3c8ff; }
@media (hover: hover) and (pointer: fine) { .more:hover::after { transform: translateX(3px) rotate(45deg); } }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin: 38px 0 0; }
.center .actions, .hero .actions { justify-content: center; }

/* ---------- The notice --------------------------------------------------- */

/* One sentence of status above everything, until Meta's review is done. */
.notice { background: var(--bg-lift); border-bottom: 1px solid var(--line); color: var(--tx2); font-size: 13px; line-height: 1.45; }
.notice .wrap { display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 40px; padding-block: 9px; text-align: center; }
.notice p { margin: 0; }
.notice strong { color: var(--tx); }
.notice a { color: var(--tx); text-underline-offset: 3px; }
.n-short { display: none; }
@media (max-width: 640px) { .n-long { display: none; } .n-short { display: inline; } .notice .wrap { min-height: 36px; padding-block: 7px; } }

/* ---------- Header ------------------------------------------------------- */

.top {
  position: sticky; top: 0; z-index: 40;
  background: rgba(5, 6, 7, 0.74);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid var(--line);
}
.top .row {
  max-width: 1304px; margin: 0 auto; padding: 0 32px; height: 72px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
}
.mark {
  display: inline-flex; align-items: center; gap: 10px; justify-self: start;
  font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--tx); text-decoration: none;
}
.mark:hover { text-decoration: none; }
.mark .tile { width: 30px; height: 30px; border-radius: 8px; background: var(--tx); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.top nav.main { display: flex; gap: 34px; }
.top nav.main a { color: var(--tx2); font-size: 14.5px; text-decoration: none; padding: 10px 0; transition: color 160ms ease; }
.top nav.main a:hover, .top nav.main a[aria-current="page"] { color: var(--tx); }
.top .end { justify-self: end; display: flex; align-items: center; gap: 24px; }
.top .login { color: var(--tx2); font-size: 14.5px; text-decoration: none; padding: 10px 0; }
.top .login:hover { color: var(--tx); }
.top .button { min-height: 38px; padding: 0 18px; font-size: 14.5px; }

/* The phone menu: a disclosure, so it works without a line of script. */
.menu { display: none; }
.menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; }
.menu summary::-webkit-details-marker { display: none; }
.menu .bars { position: relative; display: block; width: 20px; height: 12px; }
.menu .bars::before, .menu .bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.8px; border-radius: 2px; background: var(--tx);
  transition: transform 200ms var(--ease-out), top 200ms var(--ease-out);
}
.menu .bars::before { top: 2px; }
.menu .bars::after { top: 8px; }
.menu[open] .bars::before { top: 5px; transform: rotate(45deg); }
.menu[open] .bars::after { top: 5px; transform: rotate(-45deg); }
.menu nav {
  position: absolute; left: 0; right: 0; top: 100%;
  display: grid; padding: 6px 20px 22px;
  background: var(--bg); border-bottom: 1px solid var(--line);
  box-shadow: 0 40px 60px -20px rgba(0, 0, 0, 0.8);
}
.menu nav a {
  display: flex; align-items: center; min-height: 54px; border-bottom: 1px solid var(--line);
  color: var(--tx); font-size: 20px; font-weight: 500; letter-spacing: -0.02em; text-decoration: none;
}
.menu nav a:last-child { border-bottom: 0; color: var(--tx2); }
.menu nav a[aria-current="page"] { color: var(--blue); }

@media (max-width: 960px) {
  .top .row { grid-template-columns: 1fr auto auto; height: 60px; padding: 0 10px 0 20px; gap: 6px; }
  .top nav.main, .top .login { display: none; }
  .top .end { gap: 6px; }
  .menu { display: block; }
  .mark { font-size: 17px; }
  .mark .tile { width: 28px; height: 28px; border-radius: 7px; }
  .top .button { min-height: 36px; padding: 0 15px; font-size: 14px; }
}

/* ---------- Light ------------------------------------------------------ */

/* The blue light behind a product. Always behind, never on the text. */
.glow {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--glow) / 0.24), rgb(var(--glow) / 0));
}

/* ---------- The hero ----------------------------------------------------- */

.hero { position: relative; overflow-x: clip; text-align: center; padding: clamp(52px, 6.4vw, 92px) 0 clamp(40px, 5vw, 76px); }
.hero > .wrap { position: relative; }
.hero .glow {
  top: clamp(360px, 30vw, 430px); width: 1700px; height: 1150px;
  background: radial-gradient(closest-side, rgb(var(--glow) / 0.32), rgb(var(--glow) / 0.1) 52%, rgb(var(--glow) / 0));
}
.hero h1 { margin: 0; }
.hero .lead { max-width: 700px; margin: 32px auto 0; }
.hero-note { margin: 18px 0 0; font-size: var(--fs-small); color: var(--tx3); }
.caption { margin: 18px 0 0; font-size: 13px; color: var(--tx3); }

/* The product on its stage: the inbox in a browser window, the same
   conversation on a phone in front of it. One coordinate system, so the two
   stay where they were composed at every width. */
.stage { position: relative; width: 100%; max-width: 1240px; aspect-ratio: 1240 / 820; margin: 76px auto 0; text-align: left; }
.stage .window { position: absolute; left: 0; top: 0; width: 91.94%; }
.stage .device { position: absolute; right: 0; top: 23.2%; width: 23.87%; }

/* ---------- Frames ------------------------------------------------------- */

.window {
  margin: 0; border-radius: 16px; overflow: hidden; background: #0f1116;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 90px 160px -50px rgba(0, 0, 0, 0.95), 0 0 160px -40px rgb(var(--glow) / 0.45);
}
.window .bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 40px; padding: 0 16px; background: var(--chrome); border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.window .dots { display: flex; gap: 8px; }
.window .dots span { width: 11px; height: 11px; border-radius: 50%; background: #2b2f37; }
.window .url {
  display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 14px; border-radius: 8px;
  background: #181b21; font-size: 12.5px; color: #8b94a1; white-space: nowrap;
}
.window img { display: block; width: 100%; height: auto; }

.device {
  margin: 0; border-radius: 52px; padding: 3px;
  background: linear-gradient(150deg, #555b66, #1d2025 28%, #0b0c0f 62%, #3b4049);
  box-shadow: 0 60px 120px -30px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(0, 0, 0, 0.7);
}
.device .bezel { border-radius: 49px; background: #000; padding: 9px; }
.device .screen { position: relative; display: block; }
.device img { display: block; width: 100%; height: auto; border-radius: 40px; }
.device.large { border-radius: 66px; }
.device.large .bezel { border-radius: 63px; }
.device.large img { border-radius: 54px; }

@media (max-width: 760px) {
  .stage { aspect-ratio: 350 / 372; margin-top: 40px; }
  .stage .window { width: 94.3%; border-radius: 10px; }
  .stage .device { width: 35.4%; top: 28%; border-radius: 24px; padding: 2px; }
  .stage .device .bezel { border-radius: 22px; padding: 6px; }
  .stage .device img { border-radius: 17px; }
  .stage .window .bar { height: 22px; padding: 0 9px; }
  .stage .window .dots { gap: 4px; }
  .stage .window .dots span { width: 6px; height: 6px; }
  .stage .window .url { height: 13px; width: 110px; padding: 0; font-size: 0; }
  .stage .window .url svg { display: none; }
}

/* ---------- One conversation, annotated ----------------------------------- */

.inside { position: relative; overflow-x: clip; }
.annotated { position: relative; margin: 84px auto 0; }
.annotated .glow { top: 40px; width: 1100px; height: 900px; background: radial-gradient(closest-side, rgb(var(--glow) / 0.22), rgb(var(--glow) / 0)); }
.annotated .device { position: relative; width: 404px; }
.callouts { list-style: none; margin: 0; padding: 0; }
.callouts h3 { font-size: 19px; line-height: 26px; letter-spacing: -0.015em; margin: 0; }
.callouts p { margin: 6px 0 0; font-size: 16px; line-height: 1.45; color: var(--tx2); }

/* The markers on the screen, for when the notes cannot sit beside it. */
.pin {
  position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  background: var(--blue); color: var(--bg); font-size: 12px; font-weight: 600; line-height: 22px; text-align: center;
  box-shadow: 0 0 0 3px rgb(143 176 255 / 0.25), 0 0 14px rgb(143 176 255 / 0.8);
}
.pin.p1 { left: 91.8%; top: 9.57%; }
.pin.p2 { left: 7.18%; top: 20.6%; }
.pin.p3 { left: 92.3%; top: 42.3%; }
.pin.p4 { left: 7.7%; top: 77.4%; }

/* Wide enough: each note sits beside the phone on a hairline that ends in a
   dot on the thing it describes. The offsets are the phone's own pixels. */
@media (min-width: 1100px) {
  .annotated { width: 1192px; height: 900px; }
  .annotated .device { position: absolute; left: 50%; top: 0; margin-left: -202px; }
  .pin { display: none; }
  .callouts li { position: absolute; width: 300px; }
  .callouts li::before { content: ""; position: absolute; top: 13px; height: 1px; background: rgba(255, 255, 255, 0.3); }
  .callouts li::after {
    content: ""; position: absolute; top: 8px; width: 11px; height: 11px; border-radius: 50%;
    background: var(--blue); box-shadow: 0 0 0 4px rgb(143 176 255 / 0.22), 0 0 18px rgb(143 176 255 / 0.9);
  }
  .callouts .c1 { left: calc(50% + 296px); top: 82px; }
  .callouts .c1::before { right: calc(100% + 16px); width: 121px; }
  .callouts .c1::after { left: -142px; }
  .callouts .c2 { right: calc(50% + 296px); top: 177px; text-align: right; }
  .callouts .c2::before { left: calc(100% + 16px); width: 117px; }
  .callouts .c2::after { left: calc(100% + 128px); }
  .callouts .c3 { left: calc(50% + 296px); top: 365px; }
  .callouts .c3::before { right: calc(100% + 16px); width: 119px; }
  .callouts .c3::after { left: -140px; }
  .callouts .c4 { right: calc(50% + 296px); top: 668px; text-align: right; }
  .callouts .c4::before { left: calc(100% + 16px); width: 119px; }
  .callouts .c4::after { left: calc(100% + 130px); }
}
@media (max-width: 1099px) {
  .annotated { display: grid; justify-items: center; gap: 36px; max-width: 600px; margin-top: 40px; padding-inline: 20px; }
  .annotated .glow { width: 560px; height: 560px; }
  .annotated .device { width: min(300px, 78vw); border-radius: 46px; padding: 2px; }
  .annotated .device .bezel { border-radius: 44px; padding: 8px; }
  .annotated .device img { border-radius: 37px; }
  .callouts { display: grid; gap: 22px; justify-self: stretch; counter-reset: note; }
  .callouts li { position: relative; padding-left: 40px; counter-increment: note; }
  .callouts li::before {
    content: counter(note); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%;
    background: rgb(143 176 255 / 0.16); color: #b3c8ff; font-size: 12.5px; font-weight: 600; line-height: 24px; text-align: center;
  }
  .callouts h3 { font-size: 17px; line-height: 24px; }
  .callouts p { font-size: 15px; }
}

/* ---------- The builder band --------------------------------------------- */

.builder-band { position: relative; overflow-x: clip; }
.builder-band .glow { left: auto; right: -300px; transform: none; top: 0; width: 1200px; height: 900px; background: radial-gradient(closest-side, rgb(var(--glow) / 0.2), rgb(var(--glow) / 0)); }
.builder-grid {
  position: relative; display: grid; grid-template-columns: 450px minmax(0, 1fr); column-gap: 50px;
  grid-template-areas: "text window" "list window";
}
.builder-text { grid-area: text; align-self: end; }
.builder-list { grid-area: list; align-self: start; }
.builder-band .window.bleed { grid-area: window; align-self: center; }
.builder-grid .lead { font-size: var(--fs-lead-s); line-height: 1.5; }
.builder-band .window.bleed { width: 1120px; max-width: none; }

.checks { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 14px; font-size: 16px; color: var(--read); }
.checks li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; }
.checks li::before, .includes li::before {
  content: ""; width: 6px; height: 11px; margin: 4px 0 0 5px;
  border: solid var(--blue); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

@media (max-width: 1099px) {
  .builder-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "window" "list"; row-gap: 32px; }
  .builder-band .window.bleed { width: 100%; }
}
@media (max-width: 640px) {
  .builder-band .window.bleed { border-radius: 18px; }
  .builder-band .window .bar { display: none; }
}

/* ---------- Tiles -------------------------------------------------------- */

.tiles { list-style: none; margin: 72px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tiles > li {
  position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 340px;
  border-radius: 28px; background: var(--tile); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  padding: 40px 38px;
}
.tiles > li::before {
  content: ""; position: absolute; left: -30%; top: -70%; width: 160%; height: 130%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--glow) / 0.18), rgb(var(--glow) / 0));
}
.tiles > li > * { position: relative; }
.glyph { font-size: 112px; line-height: 0.9; font-weight: 600; letter-spacing: -0.06em; color: var(--blue); }
.tiles h3 { margin: auto 0 0; padding-top: 34px; }
.tiles p { margin: 10px 0 0; font-size: 16.5px; line-height: 1.5; color: var(--tx2); }
.more-row { margin: 36px 0 0; }
@media (max-width: 900px) {
  .tiles { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 36px; }
  .tiles > li { min-height: 0; padding: 28px 26px 26px; border-radius: 24px; }
  .glyph { font-size: 72px; }
  .tiles h3 { font-size: 19px; }
  .tiles p { font-size: 15px; }
}

/* ---------- The price ---------------------------------------------------- */

.figure { margin: 64px 0 0; font-size: var(--fs-figure); line-height: 0.86; font-weight: 600; letter-spacing: -0.065em; }
.price .lead { max-width: 620px; margin: 26px auto 0; }

/* ManyChat's bill rises with the people who write; ours is one flat line
   drawn straight across it. The bars are to scale. */
.chart { width: 100%; max-width: 960px; margin: 72px auto 0; }
.plot {
  position: relative; height: 250px; margin-top: 40px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 100%; align-items: end;
  border-bottom: 1px solid var(--line2);
}
.plot .bar {
  position: relative; justify-self: center; width: min(132px, 56%); height: calc(var(--h) * 1%);
  border-radius: 14px 14px 4px 4px; background: linear-gradient(180deg, #2c323c, #15181d);
}
.plot .val {
  position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%);
  font-family: var(--mono); font-size: 18px; color: var(--tx2); white-space: nowrap;
}
.plot .flat {
  position: absolute; left: 2.5%; right: 2.5%; bottom: calc(var(--h) * 1%); height: 3px; margin-bottom: -1.5px;
  border-radius: 3px; background: var(--blue-line); box-shadow: 0 0 22px 2px rgb(111 155 255 / 0.7);
}
.axis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.axis-label { margin: 10px 0 0; font-size: var(--fs-small); color: var(--tx3); }
.key { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 34px; margin: 22px 0 0; font-size: 15px; color: var(--read); }
.key > span { display: inline-flex; align-items: center; gap: 10px; }
.key .k-theirs { width: 14px; height: 14px; border-radius: 4px; background: linear-gradient(180deg, #2c323c, #15181d); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.key .k-ours { width: 22px; height: 3px; border-radius: 3px; background: var(--blue-line); box-shadow: 0 0 10px rgb(111 155 255 / 0.8); }
.footnote { max-width: 76ch; margin: 18px auto 0; font-size: 13px; line-height: 1.6; color: var(--tx3); }
.footnote a { color: var(--tx2); }
@media (max-width: 640px) {
  .figure { margin-top: 34px; }
  .chart { margin-top: 40px; }
  .plot { height: 190px; }
  .plot .val { font-size: 14px; }
  .plot .bar { border-radius: 10px 10px 3px 3px; }
  .axis { font-size: 16px; }
}

/* ---------- Plans -------------------------------------------------------- */

.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 72px 0 0; }
.plan {
  position: relative; display: flex; flex-direction: column;
  border-radius: 24px; background: var(--tile); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  padding: 34px 30px 30px;
}
.plan.featured {
  background: linear-gradient(180deg, #0f1a36 0%, var(--tile) 62%);
  box-shadow: inset 0 0 0 1.5px rgb(111 155 255 / 0.75), 0 40px 90px -40px rgb(var(--glow) / 0.6);
}
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 26px; }
.plan h3 { font-size: 20px; letter-spacing: -0.015em; margin: 0; }
.badge {
  display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px;
  background: rgb(111 155 255 / 0.16); color: #b3c8ff; font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.plan .price { display: flex; align-items: baseline; gap: 6px; margin: 22px 0 0; }
.plan .amount { font-size: 60px; line-height: 1; font-weight: 600; letter-spacing: -0.055em; }
.plan .per { font-size: 15px; color: var(--tx3); }
.plan .vat { margin: 8px 0 0; font-size: 13px; color: var(--tx3); }
.plan .plan-note { margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: var(--tx2); min-height: 3em; }
.includes {
  list-style: none; margin: 26px 0 0; padding: 24px 0 0; border-top: 1px solid var(--line);
  display: grid; gap: 14px; font-size: 15.5px; line-height: 1.45; color: var(--read);
}
.includes li { display: grid; grid-template-columns: 17px minmax(0, 1fr); gap: 10px; }
.includes li::before { margin-top: 3px; }
.plan .cta { margin: auto 0 0; padding-top: 34px; }
.plan .cta .button { width: 100%; }
.plans-foot { margin: 28px 0 0; }
.plan .short { display: none; }
@media (max-width: 1100px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .plans { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 36px; }
  .plan { padding: 26px 24px 24px; }
  /* On the home page a plan is one line of what it holds under its price. */
  .plans.compact .plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 18px 22px 20px; border-radius: 20px; }
  .plans.compact .plan-head { justify-content: flex-start; min-height: 0; }
  .plans.compact .price { grid-column: 2; grid-row: 1; margin: 0; }
  .plans.compact .amount { font-size: 36px; }
  .plans.compact .per, .plans.compact .cta { display: none; }
  .plans.compact .includes { display: none; }
  .plans.compact .short { display: block; grid-column: 1 / -1; margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--tx2); }
}

.plan-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 36px; margin-top: 28px; }
.plan-notes p { margin: 0; }
@media (max-width: 860px) { .plan-notes { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Questions ---------------------------------------------------- */

.faq { max-width: 820px; margin: 0 auto; }
.faq > h2 { margin-bottom: 56px; }
@media (max-width: 640px) { .faq > h2 { margin-bottom: 32px; } }
main details { border-bottom: 1px solid var(--line); padding: 22px 0; }
main details:first-of-type { border-top: 1px solid var(--line); }
main details summary {
  cursor: pointer; list-style: none; display: flex; gap: 16px; align-items: baseline;
  font-size: var(--fs-lead-s); font-weight: 600; letter-spacing: -0.015em;
}
main details summary::-webkit-details-marker { display: none; }
main details summary::after {
  content: ""; order: 1; margin-left: auto; flex: none; width: 12px; height: 12px;
  background:
    linear-gradient(var(--tx2), var(--tx2)) center / 12px 1.8px no-repeat,
    linear-gradient(var(--tx2), var(--tx2)) center / 1.8px 12px no-repeat;
  transition: transform 200ms var(--ease-out);
}
main details[open] summary::after { transform: rotate(45deg); }
main details p { margin: 12px 0 0; color: var(--tx2); max-width: 64ch; }
h3.faq-group { font-size: var(--fs-lead-s); margin: 40px 0 12px; }
h3.faq-group:first-of-type { margin-top: 20px; }

/* ---------- The close ---------------------------------------------------- */

.close { position: relative; overflow-x: clip; text-align: center; padding-block: clamp(96px, 12.5vw, 180px) clamp(88px, 10.4vw, 150px); }
.close .glow { top: 40px; width: 1400px; height: 760px; }
.close > .wrap { position: relative; }
.close h2 { font-size: var(--fs-close); line-height: 0.96; letter-spacing: -0.055em; margin: 0; }
.close .lead { margin: 28px auto 0; max-width: 52ch; }
.close .actions { justify-content: center; margin-top: 40px; }
.close .small { margin: 20px auto 0; max-width: 60ch; color: var(--tx3); }

/* ---------- Inner pages -------------------------------------------------- */

/* Older markup marks the bands of the switchboard this site used to be. They
   are plain stage now. */
.panel { background: transparent; }

.page-head { position: relative; overflow-x: clip; padding-block: clamp(52px, 6.6vw, 96px) clamp(40px, 5vw, 72px); }
.page-head::before {
  content: ""; position: absolute; left: 50%; top: -260px; width: 1500px; height: 900px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--glow) / 0.2), rgb(var(--glow) / 0));
}
.page-head > .wrap { position: relative; }
.page-head-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
@media (max-width: 960px) { .page-head-grid { grid-template-columns: minmax(0, 1fr); } }
.page-head h1 { font-size: clamp(44px, 6vw, 84px); line-height: 0.98; letter-spacing: -0.05em; margin: 0; }
.page-head .lead { margin: 26px 0 0; }
.page-head .actions { margin-top: 32px; gap: 12px 20px; }
.page-head .actions .small { margin: 0; color: var(--tx3); }

/* An instrument is one tile beside a heading: an index, a meter, a clock. */
.instrument { position: relative; margin: 0; border-radius: 24px; background: var(--tile); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); padding: 26px 30px; }

.index { display: grid; }
.index a {
  display: flex; align-items: center; gap: 14px; padding: 16px 2px;
  border-bottom: 1px solid var(--line); color: var(--tx); text-decoration: none;
}
.index a:last-child { border-bottom: 0; }
.index a:hover .line { color: var(--tx); }
.index .num { font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--blue); }
.index .line { color: var(--tx2); font-size: var(--fs-small); transition: color 160ms ease; }
.index .tag-plate { min-width: 64px; }

/* A dot, where the point is a state: amber is a window closing, blue is
   answered and open, a ring is nothing yet. */
.lamp, .st-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px #4a515c; }
.lamp.waiting { background: var(--amber); box-shadow: 0 0 10px rgb(242 179 61 / 0.5); }
.lamp.answered, .lamp.live { background: var(--blue); box-shadow: 0 0 10px rgb(143 176 255 / 0.5); }

.tick { display: inline-block; flex: none; width: 6px; height: 11px; margin: 0 4px 0 3px; border: solid var(--blue); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.dash { display: inline-block; flex: none; width: 11px; height: 2px; background: #4a515c; transform: translateY(-4px); }

/* A label over a line of text, set like a spec sheet. */
.tag-plate {
  display: inline-block; justify-self: start;
  font-size: var(--fs-small); font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; color: var(--blue);
}

.lines {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px;
  border-top: 1px solid var(--line);
}
.lines li { display: grid; gap: 10px; align-content: start; padding: 26px 0; border-bottom: 1px solid var(--line); }
.lines p { margin: 0; color: var(--tx2); max-width: 52ch; }
@media (max-width: 760px) { .lines { grid-template-columns: minmax(0, 1fr); } }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 0 40px; margin-top: 20px; }
.card { border-top: 1px solid var(--line); padding: 22px 0 26px; }
.card h3 { font-size: 18px; letter-spacing: -0.015em; margin: 0 0 8px; }
.card > :last-child { margin-bottom: 0; }
.card .small { color: var(--tx2); line-height: 1.55; }

/* The few things that really are an object: a form, a status board. */
.box { border-radius: 24px; background: var(--tile); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); padding: 24px 26px; }

.shot { margin: 0; }
.screen {
  margin: 0; border-radius: 16px; overflow: hidden; background: #0f1116;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 60px 120px -50px rgba(0, 0, 0, 0.9), 0 0 120px -40px rgb(var(--glow) / 0.35);
}
.screen img { display: block; width: 100%; height: auto; }
.shot figcaption, .shots-note { font-size: 13px; color: var(--tx3); margin-top: 14px; }
.shot.narrow { max-width: 400px; justify-self: center; }

/* How it works: a step is a row, the words on the left and the screen that
   proves them on the right. */
.steps { display: grid; }
.step {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 80px); align-items: center;
  padding-block: clamp(40px, 5vw, 72px); border-top: 1px solid var(--line);
}
.step h2 { font-size: var(--fs-h2-minor); line-height: 1.1; letter-spacing: -0.035em; }
.step-text { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; }
.step-text > :not(.step-rail) { grid-column: 2; }
.step-text p:not(.small) { color: var(--tx2); max-width: 44ch; }
.step-rail { grid-column: 1; grid-row: 1 / span 4; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 10px; }
.step-rail .lamp { width: 12px; height: 12px; }
.step-rail .num { font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--blue); }
.step-rail::after { content: ""; flex: 1; width: 1px; min-height: 40px; background: var(--line2); }
.step .shot { justify-self: center; width: 100%; }
.steps .shots-note { border-top: 1px solid var(--line); padding-top: 16px; margin: 0; }
@media (max-width: 860px) { .step { grid-template-columns: minmax(0, 1fr); } .step .shot { justify-self: start; } }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.split p { color: var(--tx2); max-width: 52ch; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }

.legend { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.legend li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.legend .lamp { transform: translateY(1px); }
.legend p { margin: 0; }

/* The flow builder's palette, as the steps would appear in it. */
.plates { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.plates .tag-plate {
  padding: 10px 16px; border-radius: 999px; background: var(--tile); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  font-family: var(--f); font-size: 14.5px; letter-spacing: -0.005em; text-transform: none; color: var(--tx);
}

.page-head .window { margin-top: clamp(36px, 5vw, 64px); }
.page-head .window + .caption { text-align: left; }

/* Pricing: what a plan counts, and what no plan ever counts. */
.meter .meter-title { font-size: var(--fs-small); font-weight: 600; letter-spacing: 0; line-height: 1.3; color: var(--tx2); margin: 0 0 8px; }
.meter-rows { margin: 0 0 26px; }
.meter-rows div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.meter-rows dt { color: var(--tx); }
.meter-rows dd { margin: 0; color: var(--tx2); text-align: right; }
@media (max-width: 640px) { .meter-counts { display: none; } }
.counter {
  display: inline-block; font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 15px; font-weight: 500; color: var(--tx); background: rgba(255, 255, 255, 0.06);
  border-radius: 8px; padding: 3px 10px;
}
.meter-free { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.meter-free li { display: flex; align-items: center; gap: 10px; }
.meter-note { font-size: 13px; color: var(--tx3); margin: 14px 0 0; }
.meter-note a { color: var(--tx2); }

.bill { width: 100%; border-collapse: collapse; margin: 4px 0 18px; font-size: 15px; }
.bill th, .bill td { padding: 11px 0; border-bottom: 1px solid var(--line); text-align: right; color: var(--tx); vertical-align: middle; }
.bill thead th { font-size: 13px; font-weight: 600; color: var(--tx3); padding-top: 0; }
.bill th:first-child { text-align: left; }
.bill tbody th { font-family: var(--mono); font-weight: 500; }
.bill td:last-child .counter { background: rgb(111 155 255 / 0.16); color: #d3e0ff; }

/* The rules: the 24 hours as one block an hour. */
.window-rows { display: grid; gap: 14px; }
.window-row { display: grid; grid-template-columns: 26px repeat(12, minmax(0, 1fr)) 26px; align-items: center; gap: 0 5px; }
.window-row .num { font-family: var(--mono); font-size: 12.5px; color: var(--tx3); text-align: center; }
.window-row .lamp { width: auto; height: 30px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.window-row .lamp.answered { background: var(--blue); box-shadow: none; }
.window-row .lamp.waiting { background: var(--amber); box-shadow: none; }
.window-row .lamp.now { box-shadow: 0 0 0 2px var(--tile), 0 0 0 4px #fff; }
.clock figcaption { color: var(--tx2); font-size: var(--fs-small); line-height: 1.5; margin-top: 20px; }
@media (max-width: 480px) { .window-row { gap: 0 3px; } .window-row .lamp { height: 24px; border-radius: 4px; } }

.missing { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; border-top: 1px solid var(--line); }
.missing li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--tx2); }
@media (max-width: 700px) { .missing { grid-template-columns: minmax(0, 1fr); } }

.prose { max-width: 66ch; color: var(--tx2); }

/* Reference pages: chapters ruled off, headings at the size of what follows. */
.doc { color: var(--read); }
.doc h2 { font-size: var(--fs-h2-minor); line-height: 1.1; letter-spacing: -0.035em; margin: 1.8em 0 0.5em; padding-top: 0.9em; border-top: 1px solid var(--line); }
.doc h3 { margin-top: 1.4em; }
.doc ul { padding-left: 1.2em; display: grid; gap: 0.35em; }

table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 15px; }
th, td { text-align: left; padding: 0.7rem 0.9rem 0.7rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; color: var(--tx); }

pre {
  background: var(--tile); border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  padding: 1rem 1.2rem; overflow-x: auto; font-size: 14px; line-height: 1.55; color: #d7dce4;
}
code { font-family: var(--mono); font-size: 0.88em; }
:not(pre) > code { background: rgba(255, 255, 255, 0.07); border-radius: 6px; padding: 0.12em 0.4em; }
pre code { font-size: inherit; }
.endpoint { font-family: var(--mono); font-size: 15px; font-weight: 500; margin: 1.8rem 0 0.3rem; overflow-wrap: anywhere; color: var(--tx); }
.endpoint code { background: rgb(111 155 255 / 0.16); color: #d3e0ff; padding: 0.15rem 0.5rem; border-radius: 6px; margin-right: 4px; }

.todo { background: #5a4a12; color: #ffe8a3; padding: 0 0.3rem; border-radius: 4px; }

.legal { max-width: 74ch; color: var(--read); }
.legal h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -0.05em; }
.legal .lead { max-width: none; margin-bottom: 1.6em; }
.legal h2 { font-size: var(--fs-h2-minor); line-height: 1.15; letter-spacing: -0.035em; margin: 2.4em 0 0.5em; padding-top: 1.1em; border-top: 1px solid var(--line); }
.legal h3 { font-size: var(--fs-lead-s); margin: 1.8em 0 0.4em; }
.legal p, .legal li { max-width: 74ch; }
.legal ul { margin: 0 0 1em; padding-left: 1.15em; display: grid; gap: 0.45em; }
.legal table { font-size: var(--fs-small); margin: 0; }
.legal th, .legal td { padding-right: 1rem; }
.legal .scroller { margin: 1rem 0; overflow-x: auto; }
@media (max-width: 760px) {
  .legal .scroller table.cols-4 { min-width: 580px; }
  .legal .scroller table.cols-5 { min-width: 700px; }
  .legal .scroller table.cols-6 { min-width: 800px; }
}
.legal .toc { border-radius: 20px; background: var(--tile); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); padding: 22px 26px 24px; margin-bottom: 8px; }
.legal .toc ol { margin: 0; padding-left: 1.4em; columns: 2; column-gap: 32px; font-size: var(--fs-small); line-height: 1.5; }
.legal .toc li { margin-bottom: 0.4em; break-inside: avoid; }
.legal .toc a { color: var(--tx2); }
.legal .toc a:hover { color: var(--tx); }
@media (max-width: 640px) { .legal .toc ol { columns: 1; } }
.legal :is(h2, h3) { scroll-margin-top: 96px; }

.note { border-radius: 16px; background: var(--tile); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); padding: 18px 22px; margin: 1.4em 0; font-size: 15px; }
.note p:last-child { margin-bottom: 0; }

/* The status board's dots: up is green, down is red, unknown is a ring. */
.st-dot.up { background: var(--green); box-shadow: 0 0 10px rgb(69 196 134 / 0.5); }
.st-dot.down { background: var(--red); box-shadow: 0 0 10px rgb(255 107 107 / 0.5); }

/* ---------- Footer ------------------------------------------------------- */

footer { border-top: 1px solid var(--line); color: var(--tx3); padding-block: 64px 44px; }
footer .cols { display: grid; grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); gap: 40px; }
footer .tagline { margin: 16px 0 0; font-size: var(--fs-small); line-height: 1.5; color: var(--tx3); max-width: 28ch; }
footer .foot-head { font-size: 13.5px; font-weight: 600; letter-spacing: 0; color: var(--tx); margin: 0 0 12px; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--fs-small); }
footer ul a { display: inline-block; min-width: 44px; padding: 4px 0; color: var(--tx2); text-decoration: none; }
footer ul a:hover { color: var(--tx); }
footer .fine {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  margin: 52px 0 0; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12.5px; line-height: 1.5; color: var(--tx3);
}
@media (max-width: 760px) {
  footer { padding-block: 44px 36px; }
  footer .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  footer .cols > :first-child { grid-column: 1 / -1; }
  footer ul a { padding: 5px 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
}

/* Monthly or yearly, above the plan cards on the pricing page. */
.billing-switch { display: flex; align-items: center; justify-content: center; gap: 4px; position: relative; width: max-content; margin: 0 auto 28px; padding: 5px; border-radius: 999px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); }
.billing-switch[hidden] { display: none; }
.billing-switch button { font: inherit; font-size: 15px; font-weight: 500; color: var(--tx2); background: none; border: 0; border-radius: 999px; padding: 10px 22px; cursor: pointer; transition: background 0.2s, color 0.2s; }
.billing-switch button:hover { color: var(--tx); }
.billing-switch button[aria-checked="true"] { background: var(--tx); color: var(--bg); }
.billing-switch .save { position: absolute; left: calc(100% + 10px); white-space: nowrap; font-size: 13px; font-weight: 600; color: #b3c8ff; background: rgb(111 155 255 / 0.16); border-radius: 999px; padding: 5px 11px; }
@media (max-width: 560px) { .billing-switch .save { position: static; margin-left: 6px; } }
.plan .billed { margin: 6px 0 0; font-size: 13px; color: var(--tx3); }


/* Home page, creator-first (grew out of the /pimv1 draft). Scoped under .v4 so
   its section and heading rules cannot reach the other pages. */
.v4{--stage:var(--bg);--lift:var(--bg-lift);--text:var(--tx);--text-2:var(--tx2);--text-3:var(--tx3);--line-2:var(--line2);--bubble-them:#1b1e25;--bubble-me:#3b5bdb;--ease:cubic-bezier(.16,1,.3,1)}
.v4 .pill{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:12px 22px;font:500 15px/1 inherit;font-family:inherit;text-decoration:none;border:0;cursor:pointer;transition:transform .2s var(--ease),background .2s}
.v4 .pill:active{transform:scale(.97)}
.v4 .pill-primary{background:var(--text);color:var(--stage)}
.v4 .pill-primary:hover{background:var(--read)}
.v4 .pill-ghost{color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2)}
.v4 .pill-ghost:hover{background:var(--fill)}
.v4 .pill-sm{padding:10px 16px;font-size:14px}
.v4 .v-hero{display:grid;gap:48px;padding:40px 0 72px;align-items:center}
@media (min-width:960px){.v4 .v-hero{grid-template-columns:1.1fr .9fr;padding:72px 0 112px}}
.v4 h1{font-size:clamp(46px,7.4vw,96px);line-height:.98;letter-spacing:-.045em;font-weight:600;margin:0;text-wrap:balance}
.v4 h1 em{font-style:normal;color:var(--blue)}
.v4 .v-lead{font-size:clamp(18px,1.55vw,21px);line-height:1.5;color:var(--text-2);max-width:40ch;margin:24px 0 32px;text-wrap:pretty}
.v4 .cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.v4 .v-fine{font-size:14px;color:var(--text-3);margin-top:16px}
.v4 .phone{position:relative;width:min(340px,100%);margin:0 auto;border-radius:44px;padding:12px;background:var(--chrome);box-shadow:0 40px 80px -30px rgb(var(--glow)/.45),0 0 0 1px var(--line-2)}
.v4 .v-screen{border-radius:34px;background:var(--lift);overflow:hidden;min-height:520px;display:flex;flex-direction:column}
.v4 .screen-head{display:flex;align-items:center;gap:10px;padding:18px 18px 12px;border-bottom:1px solid var(--line)}
.v4 .avatar{width:32px;height:32px;border-radius:50%;flex:none;background:linear-gradient(135deg,#f2b33d,#e0567a)}
.v4 .screen-head b{font-size:14px;font-weight:600;display:block}
.v4 .screen-head small{font-size:12px;color:var(--text-3)}
.v4 .thread{flex:1;padding:16px 14px;display:flex;flex-direction:column;gap:8px;justify-content:flex-end}
.v4 .b{max-width:80%;padding:9px 13px;border-radius:20px;font-size:14.5px;line-height:1.4}
.v4 .them{background:var(--bubble-them);align-self:flex-start;border-bottom-left-radius:6px}
.v4 .me{background:var(--bubble-me);color:#fff;align-self:flex-end;border-bottom-right-radius:6px}
.v4 .sys{align-self:center;font-size:12px;color:var(--text-3);padding:4px 0}
.v4 .comment{align-self:stretch;background:var(--fill);border-radius:16px;padding:10px 12px;font-size:13.5px;color:var(--text-2)}
.v4 .comment b{color:var(--text)}
.v4 .btn-dm{align-self:flex-end;font-size:13.5px;padding:8px 14px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--blue-line);color:var(--blue)}
.v4 .typing{align-self:flex-end;display:flex;gap:4px;padding:12px 14px;background:var(--bubble-me);border-radius:20px;border-bottom-right-radius:6px}
.v4 .typing i{width:6px;height:6px;border-radius:50%;background:#fff;opacity:.6;animation:dot 1s infinite}
.v4 .typing i:nth-child(2){animation-delay:.15s}
.v4 .typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{opacity:1;transform:translateY(-2px)}}
.v4 .v-step{opacity:0;transform:translateY(8px) scale(.98);filter:blur(4px);transition:opacity .5s var(--ease),transform .5s var(--ease),filter .5s var(--ease)}
.v4 .v-step.on{opacity:1;transform:none;filter:none}
.v4 .try{width:min(340px,100%);margin:20px auto 0;font-size:14px;color:var(--text-2)}
.v4 .try label{display:block;margin-bottom:8px}
.v4 .try-row{display:flex;gap:8px}
.v4 .try input{flex:1;min-width:0;font:inherit;font-size:16px;color:var(--text);background:var(--fill);border:0;box-shadow:inset 0 0 0 1px var(--line-2);border-radius:999px;padding:10px 16px;text-transform:uppercase}
.v4 .try input::placeholder{color:var(--text-3)}
.v4 .try input:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--blue)}
.v4 .tag{position:absolute;right:-8px;top:96px;background:var(--tile);box-shadow:0 0 0 1px var(--line-2),0 18px 40px -16px rgba(0,0,0,.6);border-radius:14px;padding:10px 14px;font-size:13px;max-width:190px;display:none}
.v4 .tag b{display:block;font-weight:600;color:var(--green)}
@media (min-width:1080px){.v4 .tag{display:block;right:-110px}}
.v4 section{padding:88px 0;border-top:1px solid var(--line)}
.v4 h2{font-size:clamp(36px,5vw,68px);line-height:1;letter-spacing:-.04em;font-weight:600;margin:0 0 20px;text-wrap:balance;max-width:16ch}
.v4 .sub{font-size:clamp(17px,1.4vw,20px);color:var(--text-2);max-width:52ch;margin:0 0 48px;text-wrap:pretty}
.v4 .pains{display:grid;gap:0;border-radius:24px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
@media (min-width:860px){.v4 .pains{grid-template-columns:repeat(3,1fr)}}
.v4 .pain{padding:28px;background:var(--tile)}
.v4 .pain+.pain{border-top:1px solid var(--line)}
@media (min-width:860px){.v4 .pain+.pain{border-top:0;border-left:1px solid var(--line)}}
.v4 .ig{display:flex;gap:12px;align-items:flex-start;margin-bottom:18px}
.v4 .ig .av{flex:none;width:36px;height:36px;border-radius:50%}
.v4 .ig b{display:block;font-size:13.5px;font-weight:600;color:var(--text-2);margin-bottom:2px}
.v4 .pain q{display:block;font-size:24px;letter-spacing:-.02em;line-height:1.2;font-weight:500;quotes:none}
.v4 .pain p{margin:0;color:var(--text-2);font-size:15.5px}
.v4 .pain p b{color:var(--text);font-weight:500}
.v4 .who{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:32px;scrollbar-width:none}
.v4 .who::-webkit-scrollbar{display:none}
@media (max-width:899px){.v4 .who{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);margin-right:-16px;padding-right:32px}}
.v4 .who button{flex:none;font:500 15px/1 inherit;font-family:inherit;color:var(--text-2);background:none;border:0;border-radius:999px;padding:11px 18px;box-shadow:inset 0 0 0 1px var(--line-2);cursor:pointer;transition:background .2s,color .2s}
.v4 .who button[aria-selected="true"]{background:var(--text);color:var(--stage);box-shadow:none}
.v4 .case{display:grid;gap:40px;align-items:center}
@media (min-width:900px){.v4 .case{grid-template-columns:1fr 1fr;gap:72px}}
.v4 .case h3{font-size:clamp(28px,3vw,40px);line-height:1.1;letter-spacing:-.035em;margin:0 0 16px;font-weight:600}
.v4 .case .did{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:14px}
.v4 .case .did li{display:flex;gap:12px;color:var(--read);font-size:16px}
.v4 .case .did svg{flex:none;width:20px;height:20px;margin-top:2px;color:var(--green)}
.v4 .case .phone .v-screen{min-height:470px}
@media (max-width:719px){.v4 .v-screen{min-height:0}}
@media (max-width:899px){.v4 .case .phone{order:-1} .v4 .case .phone .v-screen{min-height:0}}
.v4 .v-panel[hidden]{display:none}
.v4 .v-panel.in{animation:panel .45s var(--ease)}
@keyframes panel{from{opacity:.4;transform:translateY(6px)}}
.v4 .day{display:grid;gap:16px}
@media (min-width:860px){.v4 .day{grid-template-columns:1fr 1fr;gap:20px}}
.v4 .col{border-radius:24px;padding:28px;background:var(--tile);box-shadow:0 0 0 1px var(--line)}
.v4 .col.with{box-shadow:0 0 0 1px rgb(var(--glow)/.5),0 30px 60px -30px rgb(var(--glow)/.4)}
.v4 .col h3{margin:0 0 22px;font-size:20px;font-weight:600;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.v4 .dot{width:8px;height:8px;border-radius:50%;background:var(--red)}
.v4 .with .dot{background:var(--green)}
.v4 .big{margin:0 0 26px;padding-bottom:22px;border-bottom:1px solid var(--line);color:var(--text-2);font-size:15.5px}
.v4 .big b{display:block;font-size:clamp(64px,8vw,104px);line-height:.9;letter-spacing:-.06em;font-weight:600;color:var(--text-3);margin-bottom:8px;font-variant-numeric:tabular-nums}
.v4 .with .big b{color:var(--text)}
.v4 .col ol{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.v4 .col li{display:grid;grid-template-columns:56px 1fr;gap:12px;font-size:15.5px;color:var(--text-2)}
.v4 .col li time{font-variant-numeric:tabular-nums;color:var(--text-3);font-size:14px;padding-top:1px}
.v4 .col li b{color:var(--text);font-weight:500}
.v4 .col:not(.with){background:transparent}
.v4 .col:not(.with) li{color:var(--text-3)}
.v4 .col:not(.with) li b{color:var(--text-2)}
.v4 .col.with li span{color:var(--read)}
.v4 .v-note{font-size:13.5px;color:var(--text-3);margin-top:16px}
.v4 .said{font-size:clamp(26px,3.4vw,44px);line-height:1.15;letter-spacing:-.035em;font-weight:500;max-width:22ch;margin:0 0 56px;color:var(--read);text-wrap:balance}
.v4 .said span{color:var(--blue)}
.v4 .setup{display:grid;gap:24px}
@media (min-width:900px){.v4 .setup{grid-template-columns:repeat(3,1fr);gap:0}}
.v4 .s{padding:0 0 24px}
@media (min-width:900px){.v4 .s{padding:0 32px 0 0} .v4 .s+.s{padding-left:32px;border-left:1px solid var(--line)}}
.v4 .s .n{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2);font-size:14px;color:var(--text-2);margin-bottom:18px}
.v4 .s h3{font-size:22px;letter-spacing:-.02em;margin:0 0 8px;font-weight:600}
.v4 .s p{margin:0;color:var(--text-2);font-size:16px}
.v4 .mini{margin-top:20px;border-radius:16px;background:var(--tile);box-shadow:0 0 0 1px var(--line);padding:14px;font-size:14px;color:var(--read)}
.v4 .mini .chip{display:inline-block;margin:3px 4px 3px 0;padding:6px 10px;border-radius:999px;background:var(--fill);font-size:13px}
.v4 .mini .chip.sel{background:var(--text);color:var(--stage)}
.v4 .mini .sw{display:flex;align-items:center;justify-content:space-between}
.v4 .toggle{width:44px;height:26px;border-radius:999px;background:var(--green);position:relative}
.v4 .toggle::after{content:"";position:absolute;right:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff}
.v4 .price{display:grid;gap:40px;align-items:end}
@media (min-width:900px){.v4 .price{grid-template-columns:1.2fr .8fr}}
.v4 .figure{font-size:clamp(96px,14vw,200px);line-height:.86;letter-spacing:-.06em;font-weight:600}
.v4 .figure small{font-size:.22em;letter-spacing:-.02em;color:var(--text-2);font-weight:500;margin-left:.3em}
.v4 .vs{display:grid;gap:10px;font-size:17px}
.v4 .vs div{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.v4 .vs span{color:var(--text-2)}
.v4 .vs b{font-weight:600;font-size:20px;letter-spacing:-.02em}
.v4 .vs b.up{color:var(--amber)}
.v4 .dock{position:fixed;left:16px;right:16px;bottom:max(16px,env(safe-area-inset-bottom));justify-content:center;padding:16px;box-shadow:0 18px 40px -12px rgba(0,0,0,.55);transform:translateY(140%);transition:transform .45s var(--ease);z-index:5}
.v4 .dock.show{transform:none}
@media (min-width:860px){.v4 .dock{display:none}}
@media (prefers-reduced-motion:reduce){.v4 .v-step{opacity:1;transform:none;filter:none;transition:none} .v4 .typing i{animation:none}}

/* Set it up (/flow-builder): a creator's setup page. Scoped under .fb. */
.fb { --me: #3b5bdb; --them: #1b1e25; --ease: cubic-bezier(.16, 1, .3, 1); }
.fb-hero { display: grid; gap: 48px; align-items: center; padding-block: clamp(40px, 6vw, 88px) clamp(48px, 6vw, 96px); }
@media (min-width: 960px) { .fb-hero { grid-template-columns: 1.1fr .9fr; } }
.fb-hero h1 { font-size: clamp(42px, 6.4vw, 84px); line-height: 1; letter-spacing: -0.045em; margin: 0; max-width: 13ch; }
.fb-hero h1 em { font-style: normal; color: var(--blue); }
.fb-lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--tx2); max-width: 40ch; margin: 22px 0 0; }
.fb-route { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; list-style: none; padding: 0; margin: 32px 0 0; counter-reset: fb; max-width: 520px; }
.fb-route li { position: relative; padding-left: 38px; font-size: 14.5px; color: var(--tx3); counter-increment: fb; }
.fb-route li::before { content: counter(fb); position: absolute; left: 0; top: -1px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--tx); background: var(--chrome); box-shadow: inset 0 0 0 1px var(--line2); }
.fb-route b { display: block; color: var(--tx); font-weight: 500; }
.fb-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 32px 0 0; }
.fb-ghost { display: inline-flex; align-items: center; border-radius: 999px; padding: 12px 20px; font-size: 15px; font-weight: 500; color: var(--tx); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line2); }
.fb-ghost:hover { background: var(--fill); }

.fb-phone { width: min(340px, 100%); margin: 0 auto; border-radius: 42px; padding: 11px; background: var(--chrome); box-shadow: 0 40px 80px -30px rgb(var(--glow) / 0.45), 0 0 0 1px var(--line2); }
.fb-screen { border-radius: 32px; background: var(--bg-lift); overflow: hidden; }
.fb-testbar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: rgb(242 179 61 / 0.14); color: var(--amber); font-size: 12.5px; font-weight: 600; }
.fb-testbar i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.fb-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 12px; border-bottom: 1px solid var(--line); }
.fb-head b { display: block; font-size: 14px; font-weight: 600; }
.fb-head small { display: block; font-size: 12px; color: var(--tx3); }
.fb-av { flex: none; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #f2b33d, #e0567a); }
.fb-thread { padding: 14px; display: flex; flex-direction: column; gap: 8px; min-height: 300px; justify-content: flex-end; }
.fb-b { max-width: 84%; padding: 9px 13px; border-radius: 20px; font-size: 14.5px; line-height: 1.4; animation: fb-in .35s var(--ease) both; }
.fb-me { background: var(--me); color: #fff; align-self: flex-end; border-bottom-right-radius: 6px; }
.fb-them { background: var(--them); color: var(--tx); align-self: flex-start; border-bottom-left-radius: 6px; }
.fb-path { align-self: center; font-size: 12px; color: var(--tx3); text-align: center; }
.fb-path b { color: var(--green); font-weight: 600; }
@keyframes fb-in { from { opacity: 0; transform: translateY(6px); } }

.fb-sec { border-top: 1px solid var(--line); padding-block: clamp(64px, 8vw, 104px); }
.fb-n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--chrome); box-shadow: inset 0 0 0 1px var(--line2); font-size: 13px; font-weight: 600; margin-bottom: 18px; }
.fb h2 { font-size: clamp(32px, 4.2vw, 54px); line-height: 1.02; letter-spacing: -0.04em; margin: 0 0 14px; max-width: 18ch; }
.fb-sub { color: var(--tx2); max-width: 54ch; margin: 0 0 28px; }
.fb-note { font-size: 14px; color: var(--tx3); margin: 18px 0 0; }

.fb-goals { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.fb-goals button { font: inherit; font-size: 14px; font-weight: 500; color: var(--tx2); background: none; border: 0; border-radius: 999px; padding: 9px 15px; box-shadow: inset 0 0 0 1px var(--line2); cursor: pointer; }
.fb-goals button[aria-pressed="true"] { background: var(--tx); color: var(--bg); box-shadow: none; }
.fb-pick { display: grid; gap: 32px; align-items: start; }
@media (min-width: 960px) { .fb-pick { grid-template-columns: 1fr 340px; } .fb-preview { position: sticky; top: 96px; } }
.fb-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.fb-ex { text-align: left; font: inherit; color: var(--tx); background: var(--tile); border: 0; border-radius: 16px; padding: 16px; box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 6px; cursor: pointer; transition: box-shadow .2s, transform .2s var(--ease); }
.fb-ex:hover { box-shadow: inset 0 0 0 1px var(--line2); transform: translateY(-2px); }
.fb-ex[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--blue-line); }
.fb-ex b { font-weight: 500; font-size: 15.5px; line-height: 1.3; }
.fb-ex span { font-size: 13.5px; color: var(--tx3); line-height: 1.4; }
.fb-ex[hidden] { display: none; }
@media (max-width: 959px) { .fb-preview { order: -1; } }

.fb-two { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .fb-two { grid-template-columns: 1.15fr .85fr; gap: 72px; } }
.fb-words { display: grid; gap: 8px; }
.fb-words label { font-size: 13px; color: var(--tx3); }
.fb-words textarea { width: 100%; resize: vertical; font: inherit; font-size: 16px; color: var(--tx); background: var(--fill); border: 0; border-radius: 14px; padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--line2); caret-color: var(--blue); }
.fb-words textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--blue); }
.fb-hint { font-size: 13px; color: var(--tx3); margin: 0; }

.fb-switch { background: var(--tile); border-radius: 24px; padding: 8px 22px; box-shadow: inset 0 0 0 1px var(--line); }
.fb-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.fb-row:last-child { border-bottom: 0; }
.fb-row small { display: block; color: var(--tx3); font-size: 13px; }
.fb-toggle { flex: none; width: 46px; height: 28px; border-radius: 999px; background: var(--line2); position: relative; border: 0; cursor: pointer; transition: background .2s; }
.fb-toggle::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .25s var(--ease); }
.fb-toggle[aria-pressed="true"] { background: var(--green); }
.fb-toggle[aria-pressed="true"]::after { transform: translateX(18px); }

.fb-more { display: grid; gap: 0 32px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.fb-more div { padding: 18px 0; border-top: 1px solid var(--line); }
.fb-more b { display: block; font-weight: 500; margin-bottom: 4px; }
.fb-more p { margin: 0; color: var(--tx2); font-size: 15px; }
.fb-all { margin-top: 32px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fb-all summary { cursor: pointer; padding: 18px 0; font-weight: 500; list-style: none; display: flex; justify-content: space-between; }
.fb-all summary::-webkit-details-marker { display: none; }
.fb-all summary::after { content: "+"; color: var(--tx3); font-size: 20px; line-height: 1; }
.fb-all[open] summary::after { content: "\2013"; }
.fb-plates { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0 0 18px; margin: 0; }
.fb-plates li { font-size: 13px; padding: 6px 11px; border-radius: 999px; background: var(--fill); color: var(--tx2); }
.fb-help { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; margin-top: 56px; background: var(--tile); border-radius: 24px; padding: 28px; box-shadow: inset 0 0 0 1px var(--line); }
.fb-help h3 { margin: 0 0 6px; font-size: 24px; letter-spacing: -0.02em; }
.fb-help p { margin: 0; color: var(--tx2); max-width: 52ch; }
@media (prefers-reduced-motion: reduce) { .fb-b { animation: none; } .fb-ex, .fb-toggle, .fb-toggle::after { transition: none; } }
.fb-preview .fb-thread { min-height: 280px; }
@media (max-width: 959px) { .fb-preview .fb-thread { min-height: 0; } }
.fb-route { grid-template-columns: 1fr; max-width: 440px; }
.fb-small { margin: 14px 0 0; font-size: 14px; color: var(--tx3); }
.fb-use { display: grid; gap: 10px; margin: 18px 0 0; text-align: center; }
.fb-use .button { justify-self: center; }
.fb-use span { font-size: 13px; color: var(--tx3); }
.fb-all-row { margin: 14px 0 0; }
.fb-all-row .fb-ghost[hidden] { display: none; }
.fb-ex.fb-later { display: none; }
@media (min-width: 960px) { .fb-preview { position: static; } .fb-side { position: sticky; top: 96px; } }
@media (max-width: 959px) { .fb-preview { order: 0; } .fb-side { order: -1; } }

/* How it works (/how-it-works): one follower's conversation, from both sides.
   Scoped under .hw, every class prefixed, so the older global names cannot
   reach in. Bubbles match the home page and Set it up. */
.hw { --me: #3b5bdb; --them: #1b1e25; }
.hw-hero { display: grid; gap: 48px; align-items: center; padding-block: clamp(40px, 6vw, 88px) clamp(48px, 6vw, 96px); }
@media (min-width: 960px) { .hw-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.hw-kicker { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: -0.01em; color: var(--blue); margin: 0 0 16px; }
.hw-hero h1 { font-size: clamp(42px, 6.4vw, 84px); line-height: 1; letter-spacing: -0.045em; margin: 0; max-width: 13ch; }
.hw-hero h1 em { font-style: normal; color: var(--blue); }
.hw-lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--tx2); max-width: 42ch; margin: 22px 0 0; }
.hw-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 32px 0 0; }
.hw-ghost { display: inline-flex; align-items: center; border-radius: 999px; padding: 12px 20px; font-size: 15px; font-weight: 500; color: var(--tx); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line2); }
.hw-ghost:hover { background: var(--fill); text-decoration: none; }
.hw-small { margin: 14px 0 0; font-size: 14px; color: var(--tx3); max-width: 46ch; }

.hw-duo { position: relative; }
.hw-phone { width: min(340px, 100%); margin: 0 auto; border-radius: 42px; padding: 11px; background: var(--chrome); box-shadow: 0 40px 80px -30px rgb(var(--glow) / 0.45), 0 0 0 1px var(--line2); }
.hw-screen { border-radius: 32px; background: var(--bg-lift); overflow: hidden; }
.hw-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 12px; border-bottom: 1px solid var(--line); }
.hw-head b { display: block; font-size: 14px; font-weight: 600; }
.hw-head small { display: block; font-size: 12px; color: var(--tx3); }
.hw-av { flex: none; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #f2b33d, #e0567a); }
.hw-av-s { width: 28px; height: 28px; background: linear-gradient(135deg, #45c486, #2f9bd6); }
.hw-av-m { width: 28px; height: 28px; background: linear-gradient(135deg, #b38cff, #ff7aa8); }
.hw-thread { padding: 14px; display: flex; flex-direction: column; gap: 8px; min-height: 300px; justify-content: flex-end; }
.hw-desk-float { width: min(300px, 100%); margin: -32px auto 0; position: relative; box-shadow: inset 0 0 0 1px var(--line2), 0 24px 48px -20px rgba(0, 0, 0, 0.7); }
@media (min-width: 960px) { .hw-duo { margin-bottom: 56px; } .hw-duo .hw-thread { padding-bottom: 64px; } .hw-desk-float { position: absolute; left: 0; bottom: -56px; margin: 0; width: 280px; } }
.hw-desk-title { margin: 0 0 6px; font-size: 12.5px; font-weight: 600; color: var(--tx3); }

.hw-b { max-width: 84%; padding: 9px 13px; border-radius: 20px; font-size: 14.5px; line-height: 1.4; overflow-wrap: anywhere; }
.hw-me { background: var(--me); color: #fff; align-self: flex-end; border-bottom-right-radius: 6px; }
.hw-them { background: var(--them); color: var(--tx); align-self: flex-start; border-bottom-left-radius: 6px; }
.hw-comment { align-self: stretch; background: var(--fill); border-radius: 14px; padding: 9px 12px; font-size: 13.5px; line-height: 1.4; color: var(--tx2); }
.hw-comment b { color: var(--tx); font-weight: 600; margin-right: 4px; }
.hw-comment-quiet { opacity: 0.5; }
.hw-btn { align-self: flex-end; font-size: 13.5px; padding: 8px 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--blue-line); color: var(--blue); }

.hw-sec { border-top: 1px solid var(--line); padding-block: clamp(64px, 8vw, 104px); }
.hw h2 { font-size: clamp(32px, 4.2vw, 54px); line-height: 1.02; letter-spacing: -0.04em; margin: 0 0 14px; max-width: 18ch; }
.hw-dim { color: var(--dim); }
.hw-sub { color: var(--tx2); max-width: 54ch; margin: 0 0 28px; }

.hw-story { list-style: none; margin: 40px 0 0; padding: 0; }
.hw-moment { display: grid; gap: 24px; padding-block: 36px; border-top: 1px solid var(--line); }
.hw-moment:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 960px) { .hw-moment { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; padding-block: 48px; } }
.hw-time { display: inline-block; font-family: var(--mono); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--blue); margin-bottom: 10px; }
.hw-say h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; letter-spacing: -0.025em; margin: 0 0 10px; }
.hw-say p { margin: 0; color: var(--tx2); max-width: 46ch; }
.hw-pair { display: grid; gap: 16px; }
@media (min-width: 640px) { .hw-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hw-side { margin: 0; min-width: 0; display: flex; flex-direction: column; }
.hw-side figcaption { font-size: 13px; font-weight: 600; color: var(--tx3); margin: 0 0 8px; }
.hw-mini { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 14px; border-radius: 22px; background: var(--bg-lift); box-shadow: inset 0 0 0 1px var(--line); }
.hw-desk { flex: 1; padding: 14px; border-radius: 18px; background: var(--tile); box-shadow: inset 0 0 0 1px var(--line); }
.hw-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.hw-row + .hw-row { border-top: 1px solid var(--line); }
.hw-row-text { flex: 1; min-width: 0; }
.hw-row-text b { display: block; font-size: 14px; font-weight: 600; }
.hw-row-text small { display: block; font-size: 13px; color: var(--tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-chip { flex: none; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: rgb(111 155 255 / 0.16); color: #b3c8ff; }
.hw-desk-note { margin: 10px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--tx2); }
.hw-clock { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 13.5px; color: var(--read); font-variant-numeric: tabular-nums; }
.hw-lamp { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.hw-banner { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--fill); font-size: 13.5px; line-height: 1.45; color: var(--tx2); }
.hw-banner b { color: var(--tx); font-weight: 600; }
.hw-handback { margin: 12px 0 0; }
.hw-handback span { display: inline-block; font-size: 13.5px; font-weight: 500; padding: 7px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line2); }

.hw-split { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 860px) { .hw-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.hw-col { padding: 28px; border-radius: 24px; background: var(--tile); box-shadow: inset 0 0 0 1px var(--line); }
.hw-col h3 { font-size: 20px; margin: 0 0 16px; }
.hw-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hw-col li { position: relative; padding-left: 28px; color: var(--read); font-size: 16px; line-height: 1.45; }
.hw-col li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 12px; height: 7px; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg); }
.hw-more { margin: 24px 0 0; }
.hw-more a { color: var(--blue); font-weight: 500; }
.hw-more a:hover { color: #b3c8ff; }

.hw-nots { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 32px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.hw-nots li { padding: 20px 0; border-top: 1px solid var(--line); }
.hw-nots b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 6px; }
.hw-nots p { margin: 0; color: var(--tx2); font-size: 15.5px; }
@media (max-width: 959px) { .hw-duo .hw-thread { padding-bottom: 46px; min-height: 0; } }