/* Besley (OFL, on Google Fonts) is the kept alternative headline face; swapping means changing --font-headline and this @font-face.
   The file is Google's latin subset instanced to wght=600 with fonttools varLib.instancer, keeping only the opsz axis;
   every headline is 600, so another weight means instancing again. */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/source-serif-4-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-headline: 'Source Serif 4', Georgia, serif;
  --font-text: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --font-round: ui-rounded, 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, sans-serif;

  --bg: #1C1917;
  --t1: #F3EDE7;
  --t2: #ADA39B;
  --t3: #928980;
  --paper: #FCFAF8;
  --ink: #1E1A17;
  --ink2: #6B635C;
  --ink3: #958C85;
  --orange: #FF9F0A;
  --orange-text: #B04A00;
  --stage: #343437;
  --rule: rgba(255, 236, 220, 0.10);
  --pill-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  --glass: rgba(0, 0, 0, 0.045);
  --glass-edge: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--t1);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
}
button, input { font-family: inherit; }
h1, h2, h3, p { text-wrap: pretty; }
a { color: var(--t1); }
a:hover { opacity: 0.8; }
input::placeholder { color: var(--t3); }
:focus-visible { outline: 3px solid rgba(243, 237, 231, 0.7); outline-offset: 3px; }
.paper :focus-visible { outline-color: rgba(30, 26, 23, 0.7); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

h1, h2, .big, .amount { font-family: var(--font-headline); font-weight: 600; font-optical-sizing: auto; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 22px; border: 0; border-radius: 24px;
  background: #FFFFFF; color: #1d1d1f;
  font-size: 16px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn:disabled { opacity: 0.6; cursor: default; }
.btn-sm { height: 40px; padding: 0 18px; font-size: 14px; }
.btn-block { display: flex; width: 100%; height: 52px; border-radius: 26px; font-size: 17px; }

.brand { display: flex; align-items: center; color: var(--t1); text-decoration: none; font-weight: 600; }
.brand svg { display: block; flex-shrink: 0; }

.caret {
  display: inline-block; width: 2px; height: 18px; vertical-align: -3px;
  background: var(--orange);
  animation: blink 1.06s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.note-caret { display: inline-block; width: 2px; height: 20px; margin-left: 1px; vertical-align: -4px; background: var(--orange); }

/* Drawn icons take their stroke from the text color. */
.stroke { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lights { display: inline-flex; gap: 8px; }
.lights i { width: 12px; height: 12px; border-radius: 6px; background: #ff5f57; }
.lights i:nth-child(2) { background: #febc2e; }
.lights i:nth-child(3) { background: #28c840; }
.bars { display: inline-flex; align-items: center; gap: 2px; height: 12px; }
.bars i { display: block; width: 2px; border-radius: 1px; background: currentColor; }
.bars.orange { color: var(--orange); }
.bars.b3 { gap: 3px; height: 20px; color: rgba(255, 159, 10, 0.9); }
.bars.b3 i { width: 3px; border-radius: 1.5px; }
.dot { flex-shrink: 0; border-radius: 50%; background: var(--orange); }
.mono, .t { font-family: var(--font-mono); }
.app-sq {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 16px; height: 16px; border-radius: 4px;
}
.app-sq svg { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Segmented control, drawn in the app's light chrome. */
.seg {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 17px;
  background: var(--glass); box-shadow: var(--glass-edge);
}
.seg > * {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 28px; padding: 0 12px; border-radius: 14px;
  font-size: 13px; font-weight: 600; color: var(--ink2);
}
.seg > .on, .seg > [aria-pressed='true'] { color: var(--ink); background: rgba(255, 255, 255, 0.95); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.seg svg { flex-shrink: 0; }
.seg > button { border: 0; background: transparent; cursor: pointer; }

/* The pill. --u is one point of the app's pill; the hero draws it at 2x, the phone at 1.2x. */
.pill {
  --u: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: calc(10 * var(--u)); height: calc(36 * var(--u)); padding: 0 calc(14 * var(--u));
  border: 0; border-radius: calc(18 * var(--u));
  background: rgba(40, 40, 44, 0.86);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: var(--pill-shadow);
  color: #ffffff; font-size: calc(13 * var(--u)); font-weight: 500; letter-spacing: -0.01em; white-space: nowrap;
}
.pill-hold {
  min-width: calc(116 * var(--u)); cursor: pointer;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none;
}
.pill-offer, .pill-rec { padding-right: calc(6 * var(--u)); }
.pill button, .pill-drawn > span:not(:first-child) {
  display: inline-flex; align-items: center; gap: 12px;
  height: calc(24 * var(--u)); padding: 0 calc(12 * var(--u)); border: 0; border-radius: calc(12 * var(--u));
  background: rgba(255, 255, 255, 0.14); color: #ffffff;
  font-size: calc(12 * var(--u)); font-weight: 600; letter-spacing: 0; white-space: nowrap; cursor: pointer;
}
.pill .primary { background: #ffffff; color: rgba(0, 0, 0, 0.86); }
.pill .dot { width: calc(10 * var(--u)); height: calc(10 * var(--u)); }
.pill .timer { font-variant-numeric: tabular-nums; }
.pill .square { width: 14px; height: 14px; border-radius: 4px; background: #fff; }
.wave { display: inline-flex; align-items: center; gap: calc(3 * var(--u)); height: calc(20 * var(--u)); }
.wave i {
  display: block; width: calc(3 * var(--u)); border-radius: calc(1.5 * var(--u));
  height: calc(var(--u) * (3.2 + 16.8 * var(--p, 0)));
  background: rgba(255, 255, 255, 0.3);
}
.pill .check { display: none; width: calc(14 * var(--u)); height: calc(14 * var(--u)); fill: none; stroke: #ffffff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pill-offer, .pill-rec { display: none; }

/* body[data-phase] is the demo's one piece of state; site.js sets it and both layouts follow. */
[data-phase='listening'] .wave i { background: rgba(255, 159, 10, 0.9); }
[data-phase='done'] .wave { display: none; }
[data-phase='done'] .pill .check { display: block; }
[data-phase='offer'] .pill-hold, [data-phase='recording'] .pill-hold { display: none; }
[data-phase='offer'] .pill-offer, [data-phase='recording'] .pill-rec { display: inline-flex; }

.perch { position: relative; display: flex; justify-content: center; }
.perch-bird { position: absolute; z-index: 2; display: block; pointer-events: none; }
.pill-slot { position: relative; z-index: 1; display: flex; justify-content: center; }

/* ------------------------------------------------------------ Desktop, 1024 px and wider */

.d > header, .d > footer, .d > main > section { padding-left: max(80px, calc((100% - 1280px) / 2)); padding-right: max(80px, calc((100% - 1280px) / 2)); }

.d-header { display: flex; align-items: center; justify-content: space-between; height: 88px; }
.d-header .brand { gap: 10px; font-size: 18px; letter-spacing: -0.01em; }
.d-header nav { display: flex; align-items: center; gap: 32px; font-size: 15px; }
.d-header nav a:not(.btn) { color: var(--t2); text-decoration: none; }

.d-hero { padding-top: 36px; }
/* The headline keeps its two lines; the side column takes what is left, up to 420 px. */
.d-hero-head { display: grid; grid-template-columns: max-content minmax(0, 420px); justify-content: space-between; column-gap: 48px; align-items: end; }
.d-hero h1 { margin: 0; font-size: clamp(56px, 5.56vw, 80px); line-height: 0.98; letter-spacing: -0.025em; color: var(--t1); }
.d-hero-side { padding-bottom: 6px; }
.d-hero-side p { margin: 0; font-size: 19px; line-height: 1.5; color: var(--t2); }
.d-hero-cta { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.d-hero-cta span { font-size: 14px; line-height: 1.5; color: var(--t3); }

/* A fixed 1280 px wide drawing, scaled to its column by site.js. Without min-height: 0 the
   aspect-ratio box would never be shorter than its unscaled content. */
.fit { position: relative; min-height: 0; }
.fit > * { width: 1280px; transform: scale(var(--fit, 1)); transform-origin: 0 0; }
.mac-fit { margin-top: 52px; aspect-ratio: 1280 / 660; }
.meet-fit { margin-top: 96px; aspect-ratio: 1280 / 700; }

.mac {
  padding: 10px; border-radius: 26px; background: #0D0B0A;
  box-shadow: 0 60px 140px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.screen { position: relative; width: 1260px; height: 640px; border-radius: 16px; overflow: hidden; }
.wallpaper { position: absolute; left: 0; top: 0; display: block; }
.menubar {
  position: absolute; left: 0; right: 0; top: 0; height: 28px; padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(18, 14, 12, 0.55); font-size: 13px; color: rgba(255, 255, 255, 0.92);
}
.menubar .menus, .menubar .status { display: flex; align-items: center; gap: 20px; }
.menubar .status { gap: 16px; }
.menubar svg { display: block; fill: currentColor; }
.menubar .stroke { fill: none; }
.menu-breast { fill: currentColor; }
[data-phase='recording'] .menu-breast { fill: var(--orange); }
.clock { font-variant-numeric: tabular-nums; }

.titlebar { display: flex; align-items: center; gap: 22px; }
.zoom {
  position: absolute; left: 596px; top: 58px; width: 560px; height: 392px;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 12px; background: #121212;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 0 0.5px rgba(255, 255, 255, 0.16);
}
.zoom .titlebar { height: 38px; padding: 0 14px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.72); }
.tiles { flex-grow: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0 8px; }
.tile { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
.tile.speaking { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8); }
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 27px; background: rgba(255, 255, 255, 0.14);
  font-size: 19px; font-weight: 600; color: #fff;
}
.tile .name { position: absolute; left: 10px; bottom: 8px; font-size: 11px; color: rgba(255, 255, 255, 0.88); }
.zoom-controls { height: 56px; display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; }
.ctl { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 17px; background: rgba(255, 255, 255, 0.12); }
.leave { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 15px; background: #D5484D; font-size: 12px; font-weight: 600; }

.mail {
  position: absolute; left: 92px; top: 118px; width: 560px; height: 340px; overflow: hidden;
  border-radius: 12px; background: #1E1D1C;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 0 0.5px rgba(255, 255, 255, 0.16);
}
.mail .titlebar {
  height: 44px; padding: 0 16px; background: #2A2927; border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.85);
}
.mail-fields { padding: 4px 22px 0; }
.mail-fields div { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-size: 13px; color: rgba(255, 255, 255, 0.88); }
.mail-fields span:first-child { width: 58px; color: rgba(255, 255, 255, 0.5); }
.mail-body { height: 200px; padding: 16px 22px 0; overflow: hidden; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.9); }
.mail-body p { margin: 0; }
.mail-body p + p { margin-top: 10px; }

.dock { position: absolute; left: 0; right: 0; bottom: 44px; display: flex; justify-content: center; }
.d .perch-bird { left: 16px; top: -70px; }

/* Positioned so it paints above the scaled drawing's shadow, as it does in the render. */
.d .hint { position: relative; margin: 24px 0 0; height: 24px; font-size: 15px; line-height: 1.5; color: var(--t3); text-align: center; }

.d-section { padding-top: 220px; }
.eyebrow { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.005em; color: var(--t2); }
.paper { background: var(--paper); }
.paper .eyebrow { color: var(--ink2); }
.d-section h2 { margin: 16px 0 0; max-width: 900px; font-size: 58px; line-height: 1.06; letter-spacing: -0.02em; color: var(--t1); }
.d-section.paper h2 { color: var(--ink); }
.d-section h3 { font-family: var(--font-headline); font-weight: 600; font-optical-sizing: auto; }
.d .body { margin: 0; font-size: 18px; line-height: 1.6; color: var(--t2); max-width: 480px; }
.d .body.wide { margin-top: 20px; max-width: 640px; }

/* The design's 560 | 640 columns; the right one keeps room for its drawings as the page narrows. */
.d-cols { display: grid; grid-template-columns: minmax(0, 560fr) minmax(470px, 640fr); column-gap: 80px; margin-top: 64px; }

.steps { list-style: none; margin: 0; padding: 4px 0 0; display: flex; flex-direction: column; gap: 8px; }
.steps li { display: grid; grid-template-columns: 200px 72px minmax(0, 1fr); align-items: center; column-gap: 24px; height: 64px; }
.step-art { display: flex; align-items: center; justify-content: flex-end; }
.mini-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 36px; padding: 0 14px; border-radius: 18px; background: var(--stage);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 0 0 0.5px rgba(255, 255, 255, 0.22);
}
.mini-pill.done { min-width: 64px; }
.mini-pill svg { display: block; fill: none; stroke: #ffffff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.typed-field {
  display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 8px;
  background: #2A2623; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.10);
  font-size: 15px; color: var(--t1); white-space: nowrap;
}
.typed-field .cursor { display: inline-block; width: 1.5px; height: 17px; margin-left: 1px; background: var(--t1); }
.steps .t { font-size: 14px; color: var(--t3); }
.step-text { font-size: 18px; color: var(--t1); }

.d-cols.vocab { margin-top: 136px; }
.vocab h3 { margin: 0; font-size: 32px; line-height: 1.15; letter-spacing: -0.015em; color: var(--t1); }
.vocab .body { margin-top: 20px; max-width: 470px; }
.heard-typed { display: grid; grid-template-columns: 64px minmax(0, 1fr); row-gap: 20px; align-items: baseline; }
.heard-typed > span { font-size: 15px; line-height: 1.5; color: var(--t3); }
.heard-typed p { margin: 0; font-size: 26px; line-height: 1.35; letter-spacing: -0.015em; color: var(--t1); }
.heard-typed .heard, .m-vocab .heard { color: var(--t3); }
.miss { white-space: nowrap; text-decoration: underline dotted; text-decoration-color: var(--t3); text-underline-offset: 7px; color: var(--t2); }
.heard-typed strong { font-weight: 600; white-space: nowrap; }
.rules { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; padding-left: 64px; }
.rules > span {
  display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 16px; border-radius: 19px;
  background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  font-size: 15px; color: var(--t2);
}
.rules svg { flex-shrink: 0; fill: none; stroke: var(--t3); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rules b { font-weight: 600; color: var(--t1); }

#meetings { margin-top: 220px; padding-top: 180px; padding-bottom: 190px; }
#meetings .body { max-width: 548px; color: var(--ink2); }
.offer-row { align-items: center; }
.pill-drawn {
  --u: 1.5px;
  background: var(--stage);
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 0 0 0.75px rgba(255, 255, 255, 0.22);
  padding-right: calc(6 * var(--u));
}
.pill-drawn > span:not(:first-child) { cursor: default; }
.pill-drawn > span.primary { background: #ffffff; color: rgba(0, 0, 0, 0.86); }

.meet-stage { position: relative; height: 700px; }
.notebook {
  position: absolute; left: 0; top: 0; width: 900px; height: 600px; overflow: hidden;
  border-radius: 14px; background: var(--paper); color: var(--ink);
  box-shadow: 0 40px 90px rgba(60, 40, 20, 0.16), 0 0 0 0.5px rgba(40, 30, 20, 0.16);
}
.sidebar { position: absolute; left: 0; top: 0; bottom: 0; width: 280px; background: #F1EDE8; border-right: 1px solid rgba(70, 45, 20, 0.10); }
.sb-top { height: 52px; display: flex; align-items: center; padding: 0 18px; }
.sb-seg { margin: 6px 16px 4px; }
.seg-full { display: flex; border-radius: 16px; }
.seg-full > * { flex: 1; height: 26px; border-radius: 13px; font-size: 12.5px; }
.day { padding: 16px 24px 6px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.row { margin: 2px 10px; padding: 9px 14px; border-radius: 12px; }
.row-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; }
.row-title > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.row.upcoming .row-title { color: var(--ink2); }
.row-time { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink3); }
.now { display: flex; align-items: center; gap: 8px; margin: 6px 24px; }
.now span { font-family: var(--font-mono); font-size: 11px; color: var(--orange-text); }
.now i { flex-grow: 1; height: 1px; background: var(--orange); opacity: 0.7; }
.row.live { display: flex; align-items: center; gap: 10px; background: var(--orange); color: #171311; }
.row.live > div { flex-grow: 1; min-width: 0; }
.row.live .row-title { display: block; font-weight: 600; text-overflow: ellipsis; }
.row.live .row-time { color: rgba(23, 19, 17, 0.72); }
.row.live .bars { height: 16px; }

.pane { position: absolute; left: 280px; right: 0; top: 0; bottom: 0; }
.pane-bar { height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px 0 24px; }
.pane-tools { display: flex; align-items: center; gap: 8px; }
.rec-chip {
  display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 5px 0 14px; border-radius: 17px;
  background: var(--stage); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22), inset 0 0 0 0.5px rgba(255, 255, 255, 0.18);
  color: #fff; font-size: 13px; font-weight: 500;
}
.rec-chip .dot { width: 9px; height: 9px; }
.rec-chip .num { font-variant-numeric: tabular-nums; }
.rec-chip .stop { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 11px; border-radius: 12px; background: rgba(255, 255, 255, 0.14); font-size: 12px; font-weight: 600; }
.rec-chip .square { width: 7px; height: 7px; border-radius: 2px; background: #fff; }
.more { display: inline-flex; align-items: center; justify-content: center; gap: 3px; width: 32px; height: 32px; border-radius: 16px; background: var(--glass); box-shadow: var(--glass-edge); }
.more i { width: 3px; height: 3px; border-radius: 2px; background: var(--ink); }
.page { max-width: 760px; padding: 36px 0 0 88px; }
.meta { display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--ink2); }
.meta > span { display: inline-flex; align-items: center; gap: 6px; }
.meta .mono { font-size: 12.5px; }
.meta > span:last-child { gap: 8px; }
.person {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 10px;
  background: var(--glass); box-shadow: var(--glass-edge); font-size: 9px; font-weight: 700; color: var(--ink);
}
.page-title, .card-title { font-family: var(--font-round); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.page-title { margin-top: 12px; font-size: 32px; }
.bullets { list-style: none; margin: 22px 0 0; padding: 0; }
.bullets li, .plan li { display: grid; grid-template-columns: 22px minmax(0, 1fr); font-size: 17px; line-height: 1.65; }
.bullets li::before, .plan li::before { content: '•' / ''; color: var(--ink3); }

.transcript-card {
  position: absolute; right: 0; top: 120px; width: 440px; height: 476px; overflow: hidden; padding: 0 28px;
  border-radius: 14px; background: #FFFFFF; color: var(--ink);
  box-shadow: 0 44px 90px rgba(60, 40, 20, 0.2), 0 0 0 0.5px rgba(40, 30, 20, 0.2);
}
.card-top { height: 50px; display: flex; align-items: center; }
.transcript-card .card-title { margin-top: 22px; font-size: 24px; }
.turn { margin-top: 18px; }
.turn > div { display: flex; gap: 8px; align-items: baseline; }
.who { font-size: 13px; font-weight: 600; color: var(--ink2); }
.who.you { color: var(--orange-text); }
.turn .t { font-size: 12px; color: var(--ink2); }
.turn p { margin: 3px 0 0; font-size: 15px; line-height: 23px; }
.listening { display: flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 13px; color: var(--ink2); }
.listening .dot { width: 8px; height: 8px; }

.d-cols.features { position: relative; margin-top: 24px; }
.features h3 { margin: 0; font-size: 22px; line-height: 1.3; letter-spacing: -0.005em; color: var(--ink); }
.features p { margin: 10px 0 0; max-width: 500px; font-size: 17px; line-height: 1.6; color: var(--ink2); }

.facts { margin: 72px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 48px 40px; }
.facts dt { font-size: 15px; color: var(--t3); }
.facts dd { margin: 12px 0 0; font-size: 15px; line-height: 1.55; color: var(--t2); }
.facts .big { margin-top: 8px; font-size: 30px; line-height: 1.1; letter-spacing: -0.015em; color: var(--t1); white-space: nowrap; }

.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; align-items: start; margin-top: 64px; }
.plan { padding: 40px 44px 44px; border-radius: 24px; box-shadow: inset 0 0 0 1px var(--rule); }
.plan.pro { background: #26211E; }
.plan h3 { margin: 0; font-family: var(--font-text); font-size: 20px; font-weight: 600; }
.price { margin: 14px 0 0; display: flex; align-items: baseline; gap: 10px; font-size: 17px; color: var(--t2); }
.amount { font-size: 60px; line-height: 1; letter-spacing: -0.02em; color: var(--t1); }
.per { margin: 10px 0 0; min-height: 24px; font-size: 15px; color: var(--t3); }
.plan ul { list-style: none; margin: 22px 0 0; padding: 0; }
.plan li::before { color: var(--t3); }

.d-waitlist { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 240px; padding-bottom: 180px; }
.d-waitlist svg { display: block; }
.d-waitlist h2 { margin: 36px 0 0; font-size: 60px; line-height: 1; letter-spacing: -0.025em; }
.d-waitlist .body { margin-top: 20px; max-width: 620px; }
.d .waitlist { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 40px; }
.d .field {
  display: flex; align-items: center; gap: 12px; width: 600px; max-width: 100%; height: 68px; padding: 0 10px 0 28px;
  border-radius: 34px; background: var(--stage); box-shadow: var(--pill-shadow);
}
.d .field input { flex-grow: 1; min-width: 0; height: 52px; padding: 0; border: 0; background: transparent; color: var(--t1); font-size: 18px; }

.form-error { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--t1); }
.form-error::before {
  content: ''; flex-shrink: 0; width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23F3EDE7' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Cpath d='M8 4.8v3.8M8 11.1v.1'/%3E%3C/svg%3E") center / contain no-repeat;
}
.form-error:empty { display: none; }
.note { margin: 0; font-size: 14px; color: var(--t3); }
.joined { margin: 0; }
.joined:not(:empty) { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 40px; min-height: 68px; font-size: 22px; font-weight: 600; color: var(--t1); }
.joined:not(:empty)::before {
  content: ''; flex-shrink: 0; width: 22px; height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FF9F0A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 8.4l3 3 6.6-6.8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.joined:focus { outline: none; }

.d-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 36px; padding-bottom: 36px; border-top: 1px solid var(--rule); }
.d-footer .brand { gap: 10px; font-size: 15px; }
.d-footer > span:last-child { font-size: 14px; line-height: 1.6; color: var(--t3); text-align: right; }

/* ------------------------------------------------------------ Phone, below 1024 px */

.m > header, .m > footer, .m > main > section { padding-left: max(16px, calc((100% - 640px) / 2)); padding-right: max(16px, calc((100% - 640px) / 2)); }
.m .small { margin: 0; font-size: 14px; line-height: 1.5; color: var(--t3); }
.m .center { text-align: center; }
.m .lede { margin: 14px 0 0; font-size: 17px; line-height: 1.5; color: var(--t2); }
.m .eyebrow { font-size: 15px; letter-spacing: 0; }

.m-header { display: flex; align-items: center; height: 60px; }
.m-header .brand { gap: 8px; font-size: 16px; }

.m-hero { padding-top: 20px; }
.m-hero h1 { margin: 0; font-size: 48px; line-height: 1; letter-spacing: -0.025em; }
.m-demo { margin-top: 28px; }
.m-mail {
  padding: 14px 18px 44px; border-radius: 16px; background: #1E1D1C;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(255, 255, 255, 0.16);
}
.m-mail-top { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, 0.88); }
.m-mail-top .label { margin-left: 10px; color: rgba(255, 255, 255, 0.5); }
.m-mail-body { margin-top: 14px; height: 78px; overflow: hidden; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.9); }
.m-mail-body p { margin: 0; }
.m-mail-body .caret { height: 17px; }
.m-dock { margin-top: -26px; display: flex; justify-content: center; }
.m .perch { display: inline-flex; }
.m .perch-bird { left: 10px; top: -44px; }
.m .pill { --u: 1.2px; letter-spacing: 0; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.m .pill button { gap: 6px; }
.m .pill .square { width: 8px; height: 8px; border-radius: 2px; }
.m .hint { margin: 14px 0 0; min-height: 42px; font-size: 14px; line-height: 1.5; color: var(--t3); text-align: center; }
.m-hero .btn-block { margin-top: 10px; }
.m-hero .btn-block + .small { margin-top: 10px; text-align: center; }

.m-section { padding-top: 88px; }
.m-section h2 { margin: 8px 0 0; font-size: 32px; line-height: 1.1; letter-spacing: -0.02em; color: var(--t1); }
.m-section.paper { margin-top: 88px; padding-top: 72px; padding-bottom: 80px; }
.m-section.paper h2 { color: var(--ink); }
.m-section.paper .lede, .m-section.paper .small { color: var(--ink2); }
.m-section.paper .small { margin-top: 14px; }
.m-vocab { margin-top: 24px; padding: 18px 18px 20px; border-radius: 16px; background: #24201D; box-shadow: inset 0 0 0 1px rgba(255, 236, 220, 0.08); }
.m-vocab p:not(.small) { margin: 4px 0 0; font-size: 19px; line-height: 1.4; }
.m-vocab .small + .heard + .small { margin-top: 14px; }
.m-vocab .miss { text-underline-offset: 6px; }
.m-vocab strong { font-weight: 600; }

.m-meet {
  margin-top: 26px; padding: 16px 18px 22px; border-radius: 18px; background: #FFFFFF; color: var(--ink);
  box-shadow: 0 30px 70px rgba(60, 40, 20, 0.16), 0 0 0 0.5px rgba(40, 30, 20, 0.2);
}
.m-meet-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.m-meet .seg { border-radius: 18px; }
.m-meet .seg > * { gap: 6px; height: 30px; border-radius: 15px; }
.m-meet .rec-chip { gap: 7px; height: 28px; padding: 0 4px 0 11px; border-radius: 14px; box-shadow: none; font-size: 12px; }
.m-meet .rec-chip .dot { width: 7px; height: 7px; }
.m-meet .rec-chip .stop { height: 20px; padding: 0 8px; border-radius: 10px; font-size: 11px; }
.m-meet .meta { gap: 6px; margin-top: 18px; font-size: 12.5px; }
.m-meet .meta .app-sq { width: 14px; height: 14px; border-radius: 3px; }
.m-meet .meta .mono { margin-left: 6px; font-size: 12px; }
.m-meet .card-title { margin-top: 6px; font-size: 22px; }
.m-view { min-height: 176px; }
.m-view .bullets { margin-top: 16px; }
.m-view .bullets li { grid-template-columns: 18px minmax(0, 1fr); font-size: 16px; line-height: 1.6; }
.m-view .note-caret { height: 18px; }
.m-view .turns { margin-top: 4px; }
.m-view .turn { margin-top: 14px; }
.m-view .turn p { margin-top: 2px; line-height: 22px; }
.m-view .listening { margin-top: 16px; }

.m-facts { padding-top: 56px; }
.m-facts > div { padding-top: 32px; }
.m-facts .claim { margin: 8px 0 0; font-size: 28px; line-height: 1.12; letter-spacing: -0.02em; }
.m-facts .sub { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: var(--t2); }

.m-waitlist { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 96px; padding-bottom: 80px; }
.m-waitlist svg { display: block; }
.m-waitlist h2 { margin: 22px 0 0; font-size: 34px; line-height: 1.08; letter-spacing: -0.02em; }
.m-waitlist .signup { width: 100%; }
.m .waitlist { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.m .waitlist input {
  width: 100%; height: 54px; padding: 0 22px; border: 0; border-radius: 27px;
  background: var(--stage); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); color: var(--t1); font-size: 17px;
}
.m .waitlist .btn-block { margin-top: 2px; }
.m .form-error { justify-content: center; }
/* The line wraps on a phone, so the check rides inline with its first word. */
.m .joined:not(:empty) { display: block; margin-top: 26px; min-height: 0; font-size: 19px; }
.m .joined:not(:empty)::before { display: inline-block; margin-right: 10px; vertical-align: -3px; }

.m-footer { padding-top: 24px; padding-bottom: 32px; border-top: 1px solid var(--rule); }

@media (max-width: 1023.98px) { .d { display: none; } }
@media (min-width: 1024px) { .m { display: none; } }
@media (prefers-reduced-motion: reduce) { .caret { animation: none; } }
/* Below 380 px the offer pill (about 330 px at 1.2x) steps down, and the meeting card's
   325 px top row, which fits inside the card's padding at 390, wraps its chip. */
@media (max-width: 379.98px) {
  .m .pill { --u: 1.1px; }
  .m-meet-top { flex-wrap: wrap; }
}