:root {
  color-scheme: light dark;
  --bg: #fff;
  --bar: #f5f5f7;
  --card: #f5f5f7;
  --card-hi: #e8e8ed;
  --raised: #fff;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #a1a1a6;
  --line: #00000014;
  --accent: #007aff;
  --hot: #eb6834;
  --shadow: 0 30px 80px -20px #0f1e4647, 0 0 0 1px #00000014;
  --plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7v10M7 12h10' stroke='%236e6e73' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E");
  --soft-shadow: 0 1px 2px #0000000f, 0 0 0 1px #0000000a;

  /* Section tints */
  --t-blue: #2a78d6; --t-purple: #7d4fd1; --t-orange: #e07a00; --t-indigo: #4a3aa7;
  --t-green: #1d9a5b; --t-pink: #d4417f; --t-teal: #0891b2; --t-red: #e0352b;

  /* Speaker hues: yours is reserved, the rest go in order of appearance */
  --sp-me: #007aff; --sp-1: #e8590c; --sp-2: #2b9a48; --sp-3: #9c36b5; --sp-4: #c2255c; --sp-5: #0c8599;

  --ease: cubic-bezier(.32,.72,0,1);
  --spring: cubic-bezier(.34,1.4,.64,1);
  --glow-max: 9%;
  --glow-color: #007aff;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131315; --bar: #1a1a1d; --card: #1f1f22; --card-hi: #27272b; --raised: #2a2a2e;
    --ink: #f5f5f7; --ink-2: #a1a1a6; --ink-3: #6e6e73; --line: #ffffff1a; --accent: #0a84ff;
    --shadow: 0 30px 80px -20px #000000b3, 0 0 0 1px #ffffff1a;
    --soft-shadow: 0 0 0 1px #ffffff12;
    --glow-max: 8%;
    --glow-color: #fff;
    --plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7v10M7 12h10' stroke='%23a1a1a6' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E");
    --t-blue: #3987e5; --t-purple: #a585f0; --t-orange: #f0a030; --t-indigo: #9085e9;
    --t-green: #2fb36e; --t-pink: #e8689e; --t-teal: #22a8cc; --t-red: #ff5a50;
    --sp-me: #0a84ff; --sp-1: #ff8a4c; --sp-2: #51cf66; --sp-3: #cc5de8; --sp-4: #f06595; --sp-5: #3bc9db;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #131315; --bar: #1a1a1d; --card: #1f1f22; --card-hi: #27272b; --raised: #2a2a2e;
  --ink: #f5f5f7; --ink-2: #a1a1a6; --ink-3: #6e6e73; --line: #ffffff1a; --accent: #0a84ff;
  --shadow: 0 30px 80px -20px #000000b3, 0 0 0 1px #ffffff1a;
  --soft-shadow: 0 0 0 1px #ffffff12;
  --glow-max: 8%;
  --glow-color: #fff;
  --plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7v10M7 12h10' stroke='%23a1a1a6' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E");
  --t-blue: #3987e5; --t-purple: #a585f0; --t-orange: #f0a030; --t-indigo: #9085e9;
  --t-green: #2fb36e; --t-pink: #e8689e; --t-teal: #22a8cc; --t-red: #ff5a50;
  --sp-me: #0a84ff; --sp-1: #ff8a4c; --sp-2: #51cf66; --sp-3: #cc5de8; --sp-4: #f06595; --sp-5: #3bc9db;
}
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); font: 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; }
p { margin: 0; }
button { font: inherit; color: inherit; }

.wrap { max-width: 1072px; margin: 0 auto; padding: 0 24px; }

/* Type scale, straight from the reference */
.h-hero { margin: 0; font-size: 60px; font-weight: 600; line-height: 1.04; letter-spacing: -.032em; }
.h-section { margin: 0; font-size: 40px; font-weight: 600; line-height: 1.08; letter-spacing: -.026em; text-wrap: balance; }
.h-card { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.num { font-family: var(--rounded); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 700; letter-spacing: .02em; color: var(--tint, var(--accent)); }
.lede { font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.small { font-size: 14px; color: var(--ink-3); }
/* --glow is registered so the light can fade in and out instead of popping */
@property --glow { syntax: "<number>"; inherits: false; initial-value: 0; }
.card {
  --mx: 50%; --my: 50%;
  border-radius: 18px;
  background:
    radial-gradient(360px circle at var(--mx) var(--my), color-mix(in srgb, var(--glow-color) calc(var(--glow) * var(--glow-max)), transparent), transparent 70%),
    var(--card);
  transition: --glow .4s ease-out;
}
.card.lit { --glow: 1; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: #fff; font-size: 16px; font-weight: 600;
  transition: transform .45s var(--spring), box-shadow .3s, filter .2s, background .2s;
}
.btn:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--accent) 75%, transparent); }
.btn:active { transform: scale(.97); transition-duration: .12s; box-shadow: none; }
.btn .nudge { margin: 0 -4px 0 -2px; transition: transform .35s var(--spring); }
.btn:hover .nudge { transform: translateX(3px); }
.btn-sm { gap: 7px; padding: 9px 18px; font-size: 14.5px; }
.btn-quiet { background: var(--card); color: var(--ink); }
.btn-quiet:hover { filter: none; background: var(--card-hi); box-shadow: none; }
.apple { width: 14px; height: 17px; margin-top: -2px; }
.btn-sm .apple { width: 13px; height: 15px; }

/* Top bar */
.topbar { background: var(--bar); font-size: 13px; color: var(--ink-2); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 36px; }
/* Maker credit: a little mountain for the Adirondacks, linking out to the studio */
.maker { display: inline-flex; align-items: center; gap: 8px; margin-left: -8px; padding: 4px 8px; border-radius: 999px; color: var(--ink-2); transition: background .2s, color .2s; }
.maker b { font-weight: 600; color: var(--ink); }
.maker .peaks { width: 20px; height: 14px; color: var(--ink-2); transition: color .25s, transform .4s var(--spring); }
.maker .out { width: 10px; height: 10px; opacity: .6; transition: transform .35s var(--spring), opacity .2s; }
.maker:hover { background: var(--card-hi); color: var(--ink); }
.maker:hover .peaks { color: #0ad9ab; transform: translateY(-1px); }
.maker:hover .out { opacity: 1; transform: translate(2px, -2px); }
.foot-link { transition: color .2s; }
.foot-link:hover { color: var(--ink); }
.icon-btn { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 7px; background: none; color: var(--ink-2); cursor: pointer; }
.icon-btn { transition: background .2s, color .2s, transform .45s var(--spring); }
.icon-btn:active { transform: rotate(180deg); }
.icon-btn:hover { background: var(--card-hi); color: var(--ink); }

/* Nav */
.nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
.nav-inner { display: flex; align-items: center; gap: 32px; height: 64px; }
.brand { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.brand img { border-radius: 6px; }
/* First builds are betas; the badge says so right next to the name */
.beta { margin-left: 1px; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); transform: translateY(1px); }
.nav-links { display: flex; gap: 24px; font-size: 14.5px; color: var(--ink-2); }
.nav-links a { transition: color .2s; }
.nav-links a:hover { color: var(--ink); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.nav-status { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hot); }

/* Hero */
.hero { padding: 88px 0 0; text-align: center; }
.announce { display: inline-flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border-radius: 999px; box-shadow: 0 0 0 1px var(--line); font-size: 14px; color: var(--ink); }
.announce { transition: background .2s; }
.announce:hover { background: var(--card); }
.announce svg { transition: transform .35s var(--spring); }
.announce:hover svg { transform: translateX(3px); }
.announce-tag { padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-size: 12.5px; font-weight: 600; }
.announce svg { color: var(--ink-3); }
.hero .h-hero { margin: 28px auto 0; max-width: 900px; }
.inline-icon { display: inline-block; width: .92em; height: .92em; margin: 0 .02em; vertical-align: -.13em; }
.hero-sub { margin: 24px auto 0; max-width: 600px; font-size: 19px; line-height: 1.55; color: var(--ink-2); text-wrap: balance; }
.hero-cta { display: flex; justify-content: center; gap: 12px; margin-top: 32px; }
.hero-meta { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; font-size: 14.5px; color: var(--ink-2); }
.hero-meta i { font-style: normal; color: var(--ink-3); }
.hero-meta .hot { color: var(--hot); font-weight: 600; }
.hero-meta-2 { margin-top: 8px; font-size: 13.5px; color: var(--ink-3); }

.proof { display: inline-flex; align-items: center; gap: 12px; margin-top: 32px; text-align: left; }
.voices { display: flex; }
.voices span { display: grid; place-items: center; width: 34px; height: 34px; margin-left: -8px; border-radius: 50%; border: 2px solid var(--bg); background: var(--c); color: #fff; font-size: 11px; font-weight: 700; }
.voices span:first-child { margin-left: 0; }
.proof-text { display: flex; flex-direction: column; font-size: 14.5px; line-height: 1.3; color: var(--ink-2); }
.proof-text strong { color: var(--ink); font-weight: 600; }
.proof-text span { font-size: 13.5px; color: var(--ink-3); }

/* Hero app window, laid out like the real Briefwell window */
.window { position: relative; margin: 64px auto 0; border-radius: 22px; background: var(--bg); box-shadow: var(--shadow); text-align: left; overflow: hidden; }
.aw { display: grid; grid-template-columns: 270px 1fr; min-height: 600px; }
.lights { display: flex; gap: 8px; }
.lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.lights i:nth-child(2) { background: #febc2e; }
.lights i:nth-child(3) { background: #28c840; }

.aw-side { padding: 14px 10px; background: var(--bar); }
.aw-side-top { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 14px 8px; }
.aw-round { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--ink-2); background: color-mix(in srgb, var(--raised) 70%, transparent); box-shadow: inset 0 0 0 .5px var(--line), 0 1px 3px #0000001a; }
.aw-sec { padding: 4px 10px 6px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.aw-item { display: flex; align-items: flex-start; gap: 10px; padding: 7px 10px; border-radius: 10px; font-size: 13.5px; }
.aw-item .ic { flex: none; width: 17px; height: 17px; margin-top: 7px; color: var(--ink-3); }
.aw-item div { min-width: 0; }
.aw-item b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-item span { display: block; font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-item.on { background: var(--accent); color: #fff; }
.aw-item.on .ic, .aw-item.on span { color: #ffffffd9; }

.aw-main { min-width: 0; display: flex; flex-direction: column; }
.aw-toolbar { display: flex; align-items: center; gap: 12px; padding: 12px 14px 10px 22px; }
.aw-title { font-size: 16px; font-weight: 700; }
.aw-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.aw-glass {
  display: inline-flex; align-items: center; gap: 12px; height: 36px; padding: 0 12px; border: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--raised) 70%, transparent); color: var(--ink-2);
  box-shadow: inset 0 0 0 .5px var(--line), 0 1px 3px #0000001a;
}
.aw-glass svg { width: 18px; height: 18px; }
.aw-glass .chev { width: 13px; height: 13px; margin-left: -6px; }

.rec-pill { gap: 10px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; transition: background .2s, transform .35s var(--spring); }
.rec-pill:hover { background: var(--card-hi); }
.rec-pill:active { transform: scale(.96); }
.rec-pill .chev { margin-left: 0; color: var(--ink-2); }
.aw-div { width: 1px; height: 16px; background: var(--line); }
.rec-label { display: inline-block; font-variant-numeric: tabular-nums; }
.rec-label:empty { display: none; }
/* record.circle: a ring with a dot. Recording turns the dot into a stop square; Stop is not red, same as the app. */
.rec-ic { position: relative; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.6px var(--ink); }
.rec-ic::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--ink); transition: border-radius .35s var(--ease), inset .35s var(--ease); }
.rec-pill[aria-pressed="true"] .rec-ic::after { inset: 5.5px; border-radius: 1.5px; }

.aw-head { padding: 6px 22px 16px; border-bottom: 1px solid var(--line); }
.aw-head h3 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.aw-meta, .aw-pub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.aw-meta span, .aw-pub span { display: inline-flex; align-items: center; gap: 8px; }
.aw-meta svg, .aw-pub svg { width: 17px; height: 17px; color: var(--ink-3); }
.aw-with { margin-top: 6px; font-size: 14px; color: var(--ink-2); }
.aw-pub { margin-top: 10px; gap: 6px 40px; }
.aw-pub .aw-link, .aw-pub .aw-link svg { color: var(--accent); }

.aw-tabs-row { display: flex; justify-content: center; padding: 14px; border-bottom: 1px solid var(--line); }
.tabs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--card); }
.tab { display: flex; align-items: center; padding: 7px 18px; border: 0; border-radius: 999px; background: none; font-size: 14.5px; font-weight: 500; color: var(--ink); cursor: pointer; transition: color .25s; }
.tabs, .seg { position: relative; }
.tab, .seg button { position: relative; z-index: 1; }
.thumb { position: absolute; top: 3px; bottom: 3px; left: 0; border-radius: 999px; pointer-events: none; transition: transform .5s var(--spring), width .5s var(--spring); }
.tabs .thumb { background: var(--accent); }
.seg .thumb { top: 2px; bottom: 2px; background: var(--raised); box-shadow: 0 1px 2px #0000001f; }
.tab[aria-selected="true"] { background: var(--accent); color: #fff; }
.has-thumb .tab[aria-selected="true"], .has-thumb button[aria-pressed="true"] { background: none; box-shadow: none; }
.seg button { transition: color .25s; }

.aw-content { padding: 20px 22px 24px; }
.pane[hidden] { display: none; }
.pane.enter { animation: blur-in .4s var(--ease) both; }
@keyframes blur-in { from { opacity: 0; filter: blur(6px); transform: scale(.985); } }

/* Transcript rows: name and time stacked on the right of a narrow column, text beside it */
.lines { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.line { display: grid; grid-template-columns: 104px 1fr; gap: 14px; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.line.pending { opacity: 0; transform: translateY(6px); }
.line .who { display: flex; flex-direction: column; align-items: flex-end; font-size: 12.5px; font-weight: 500; line-height: 1.35; color: var(--c); transition: color .4s; }
.line .name { display: inline-block; white-space: nowrap; }
.line.anon .who { color: var(--ink-3); }
.line time { font-size: 12.5px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.line p { font-size: 15px; line-height: 1.45; }
.stream .w { transition: opacity .16s ease-out, filter .16s ease-out; }
.stream .w:not(.on) { opacity: 0; filter: blur(3px); }
/* Zero advance so the caret never pushes words around while they stream in */
.lines .caret { margin-right: -4px; }
.caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -.12em; background: var(--accent); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Minutes: rendered Markdown, with a raw view that pops out of the </> button like the app */
.aw-minutes { position: relative; height: 330px; margin: -20px -22px 0; background: color-mix(in srgb, var(--card) 60%, var(--bg)); overflow: hidden; }
.md, .md-raw { position: absolute; inset: 0; padding: 22px 64px 22px 30px; overflow: auto; }
.md h4 { margin: 0 0 8px; font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.md h4:not(:first-child) { margin-top: 22px; }
.md p, .md li { font-size: 15px; line-height: 1.5; }
.md ul { margin: 0; padding-left: 26px; }
.md-raw {
  margin: 0; background: inherit; font: 14px/1.55 ui-monospace, "SF Mono", Menlo, monospace; white-space: pre-wrap; color: var(--ink);
  clip-path: circle(0 at calc(100% - 38px) 34px); transition: clip-path .55s var(--ease);
}
.mh { color: var(--ink-3); }
.mt { color: var(--accent); font-weight: 600; }
.aw-minutes.raw .md-raw { clip-path: circle(150% at calc(100% - 38px) 34px); }
.aw-raw-btn {
  position: absolute; top: 14px; right: 18px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, var(--raised) 75%, transparent); color: var(--ink);
  box-shadow: inset 0 0 0 .5px var(--line), 0 1px 4px #00000024; transition: transform .35s var(--spring);
}
.aw-raw-btn:active { transform: scale(.92); }
.aw-raw-btn svg { grid-area: 1 / 1; width: 19px; height: 19px; transition: opacity .25s, transform .35s var(--spring); }
.aw-raw-btn .i-doc, .aw-minutes.raw .aw-raw-btn .i-code { opacity: 0; transform: scale(.6); }
.aw-minutes.raw .aw-raw-btn .i-doc { opacity: 1; transform: none; }
.aw-notes { margin: 0 -22px; padding: 16px 30px 0; border-top: 1px solid var(--line); }
.aw-notes b { font-size: 13.5px; font-weight: 600; }
.aw-notes-box { margin-top: 8px; padding: 10px 12px; min-height: 64px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; color: var(--ink-3); }

/* Speakers: one row per voice with talk time, inside a rounded card */
.aw-spk { padding: 6px 26px; border-radius: 18px; background: var(--card); }
.spk { display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(80px, 210px) 64px 48px; align-items: center; gap: 16px; padding: 10px 0; }
.spk .av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c); color: #fff; font-size: 12px; font-weight: 700; }
.spk b { display: block; font-size: 15px; font-weight: 500; }
.spk small { display: block; font-size: 13px; color: var(--ink-3); }
.bar { height: 6px; border-radius: 3px; background: var(--card-hi); overflow: hidden; }
.bar i { display: block; height: 100%; width: var(--w); border-radius: 3px; background: var(--c); }
.spk .dur { text-align: right; font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.spk .pct { text-align: right; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.aw-spk-foot { display: flex; justify-content: flex-end; margin-top: 12px; }
.aw-btn { padding: 6px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 500; background: color-mix(in srgb, var(--raised) 75%, transparent); box-shadow: inset 0 0 0 .5px var(--line), 0 1px 3px #0000001a; }

.try { margin-top: 18px; font-size: 13.5px; color: var(--ink-3); }

/* Sections */
.section { padding: 120px 0 0; }
.section:last-of-type { padding-bottom: 120px; }
.split { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: center; }
.split.flip { grid-template-columns: 6fr 5fr; }
.split.flip .copy { order: 2; }
.copy .h-section { margin-top: 18px; }
.copy .lede { margin-top: 18px; }
.copy .lede + .lede { margin-top: 12px; }
.head { max-width: 680px; }
.head .h-section { margin-top: 18px; }
.head .lede { margin-top: 18px; }
.centered { text-align: center; margin: 0 auto; }

/* Demo cards */
.demo { padding: 16px; }
.demo-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.demo-top .label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.demo-top .meta { font-size: 12.5px; color: var(--ink-3); }
.panel { background: var(--raised); border-radius: 12px; box-shadow: var(--soft-shadow); }
.seg { display: flex; padding: 2px; border-radius: 999px; background: var(--card-hi); }
.seg button { padding: 4px 12px; border: 0; border-radius: 999px; background: none; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--raised); color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px #0000001f; }

.rows { padding: 6px 0; }
.row { display: grid; grid-template-columns: 96px 1fr 44px; gap: 12px; align-items: baseline; padding: 7px 14px; font-size: 13.5px; }
.row .n { font-weight: 600; color: var(--c, var(--ink-3)); transition: color .3s; }
.row time { text-align: right; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.row .src { grid-column: 2 / -1; margin-top: -4px; font-size: 11.5px; color: var(--ink-3); }
.who-demo[data-state="before"] .row .n { --c: var(--ink-3); }
.who-demo[data-state="before"] .row .src { visibility: hidden; }

/* Compare table */
.compare { margin-top: 48px; padding: 6px 0; }
.compare table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.compare th, .compare td { padding: 16px 24px; text-align: left; vertical-align: top; }
.compare thead th { padding-top: 14px; padding-bottom: 14px; font-weight: 500; color: var(--ink-2); }
.compare thead th > span { display: inline-flex; align-items: center; gap: 9px; }
.compare thead img { border-radius: 5px; }
.compare tbody tr { border-top: 1px solid var(--line); }
.compare tbody th { width: 30%; font-weight: 600; }
.compare td { width: 35%; color: var(--ink-2); }
.compare td.us { color: var(--ink); }
.compare td.us::before { content: "✓"; margin-right: 8px; color: var(--accent); font-weight: 700; }
.bot-ic { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: var(--card-hi); }

/* Minutes demo */
.min-demo .panel { padding: 14px 16px; }
.min-demo .panel + .panel { margin-top: 8px; }
.min-label { margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--ink-3); }
.min-demo p, .min-demo li { font-size: 13.5px; line-height: 1.5; }
.min-demo ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.owner { display: inline-block; margin-right: 6px; padding: 0 7px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); }

/* Menu bar demo: a native macOS menu, same items as the app */
.mb-strip { display: flex; align-items: center; gap: 14px; padding: 6px 14px; border-radius: 10px; font-size: 13px; }
.mb-strip .apple { width: 12px; height: 14px; margin: 0; }
.mb-strip b { font-weight: 600; }
.mb-strip .right { margin-left: auto; display: flex; align-items: center; gap: 14px; color: var(--ink-2); }
.mb-icon { display: grid; place-items: center; width: 38px; height: 24px; border-radius: 7px; background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }
.mb-glyph { width: 19px; height: 17px; background: currentColor; -webkit-mask: url(menu-idle.png) center / contain no-repeat; mask: url(menu-idle.png) center / contain no-repeat; }
.mb-demo[data-state="rec"] .mb-glyph { -webkit-mask-image: url(menu-recording.png); mask-image: url(menu-recording.png); }
.mac-menu {
  width: 290px; margin: 6px 52px 0 auto; padding: 5px; border-radius: 12px; font-size: 14px;
  background: color-mix(in srgb, var(--raised) 82%, transparent);
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 12px 32px -10px #00000040, 0 0 0 .5px #0000002e, inset 0 1px 0 #ffffff40;
}
.mi { display: flex; align-items: center; width: 100%; padding: 4px 10px; border: 0; border-radius: 7px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: default; }
button.mi { cursor: pointer; }
.mi:not(.dim):hover { background: var(--accent); color: #fff; }
.mi.dim { color: var(--ink-3); }
.mi-r { margin-left: auto; color: var(--ink-3); }
.mi:not(.dim):hover .mi-r { color: #ffffffcc; }
.mb-clock { font-variant-numeric: tabular-nums; }
.mac-menu hr { margin: 5px 10px; border: 0; border-top: 1px solid var(--line); }
.mb-demo[data-state="idle"] [data-when="rec"], .mb-demo[data-state="rec"] [data-when="idle"] { display: none; }
.mb-btn { margin-left: auto; padding: 4px 12px; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: filter .2s, transform .35s var(--spring); }
.mb-btn:hover { filter: brightness(1.08); }
.mb-btn:active { transform: scale(.94); }

/* Privacy cards */
.trio { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.trio .card { padding: 26px 24px 28px; }
.badge { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: color-mix(in srgb, var(--tint) 16%, transparent); color: var(--tint); }
.badge svg { width: 16px; height: 16px; }
.trio .h-card { margin-top: 22px; }
.trio p { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }

/* Also included */
.extras { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.extra { padding: 12px 12px 24px; }
.extra .stage { display: grid; place-items: center; min-height: 168px; padding: 16px; }
.extra .h-card { margin: 20px 12px 0; }
.extra p { margin: 6px 12px 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.chips span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--card); font-size: 12.5px; }
.chips span i { width: 7px; height: 7px; border-radius: 50%; background: var(--t-green); }
.chips span.off { color: var(--ink-3); }
.chips span.off i { background: var(--ink-3); }

.toast { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; font-size: 13px; }
.toast img { border-radius: 6px; }
.toast small { display: block; color: var(--ink-3); font-size: 11.5px; }
.toast .ok { margin-left: auto; color: var(--t-green); font-weight: 600; font-size: 12px; }

.dests { width: 100%; padding: 4px 0; font-size: 13px; }
.dests div { display: flex; align-items: center; padding: 8px 14px; }
.dests div + div { border-top: 1px solid var(--line); }
.dests b { font-weight: 600; }
.dests span { margin-left: auto; font-size: 12px; font-weight: 600; }
.dests .ok { color: var(--t-green); }

/* The picker, sitting still inside a feature card */
.picker.mini { position: relative; width: 100%; max-width: 260px; padding: 10px; border-radius: 14px; animation: none; background: var(--raised); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--soft-shadow), 0 6px 18px -8px #00000033; }
.picker.mini::before { display: none; }
.picker.mini .pk-quote { font-size: 12.5px; border-left-width: 3px; padding-left: 10px; }
.picker.mini .pk-label { margin: 10px 0 2px; font-size: 10.5px; }
.picker.mini .pk-item { padding: 4px 6px; font-size: 13px; gap: 10px; }
.picker.mini .pk-item i { width: 8px; height: 8px; }
.picker.mini .pk-foot { margin-top: 6px; padding-top: 8px; }
.picker.mini .pk-foot .seg button { padding: 3px 12px; font-size: 12.5px; }
.notice { width: 100%; padding: 12px; font-size: 13px; }
.notice b { display: block; font-weight: 600; }
.notice span { color: var(--ink-3); font-size: 12px; }
.notice .mb-btn { display: inline-block; margin: 10px 0 0; }

.room { display: flex; align-items: center; gap: 14px; }
.room .mic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--raised); box-shadow: var(--soft-shadow); color: var(--ink-2); }
.room .arrow { color: var(--ink-3); }
.room .voices span { border-color: var(--card); }

.live { width: 100%; padding: 12px 14px; text-align: center; }
/* Same chip as the app's empty state: icon, name, four green bars bobbing on a sine */
.source-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--card) 70%, transparent);
  backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: inset 0 1px 0 #ffffff59, inset 0 0 0 .5px var(--line), 0 4px 14px -6px #0000002e;
  font-size: 15px; font-weight: 500;
}
.app-ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #5b5fc7; color: #fff; font-size: 11px; font-weight: 700; }
.lvl { display: flex; align-items: center; gap: 2px; height: 14px; }
.lvl i { width: 3px; height: 4px; border-radius: 2px; background: #34c759; animation: bob .35s ease-in-out infinite alternate; }
/* Phase steps match the app: each bar trails the last by 1.1 rad at 9 rad/s */
.lvl i:nth-child(2) { animation-delay: -.12s; }
.lvl i:nth-child(3) { animation-delay: -.24s; }
.lvl i:nth-child(4) { animation-delay: -.37s; }
@keyframes bob { to { height: 12px; } }
.live p { margin-top: 12px; font-size: 13px; color: var(--ink-2); }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: 4fr 7fr; gap: 48px; align-items: start; }
.faq-side { position: sticky; top: 96px; }
.faq-side .lede { margin-top: 18px; font-size: 15px; }
.faq-group + .faq-group { margin-top: 36px; }
.faq-group h3 { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.faq-group details { border-radius: 14px; background: var(--card); }
.faq-group details + details { margin-top: 8px; }
.faq-group summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; list-style: none; cursor: pointer; font-size: 15.5px; font-weight: 600; }
.faq-group summary::-webkit-details-marker { display: none; }
/* Plus is an SVG drawn on the circle's exact center; text and gradient bars land on half pixels */
.faq-group summary::after {
  content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--plus) center / 24px 24px no-repeat, var(--card-hi);
}
.faq-group details[open]:not(.closing) summary::after { transform: rotate(45deg); }
.faq-body { overflow: hidden; }
.faq-group summary::after { transition: transform .4s var(--spring), background-color .2s; }
.faq-group summary:hover::after { background-color: color-mix(in srgb, var(--card-hi) 80%, var(--ink) 8%); }
.faq-group details p { padding: 0 18px 18px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }

/* Final CTA */
.final { position: relative; overflow: hidden; padding: 72px 24px; text-align: center; }
.final .trace { position: absolute; left: 0; right: 0; top: 64px; width: 100%; height: 80px; color: var(--accent); opacity: .3; }
.final img { position: relative; margin: 0 auto; filter: drop-shadow(0 10px 24px #007aff40); }
.final .h-section { position: relative; margin: 28px auto 0; max-width: 18ch; }
.final .lede { margin: 14px auto 0; max-width: 460px; font-size: 16px; }
.final .btn { margin-top: 28px; }

.footer { margin-top: 0; padding: 32px 0 48px; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13.5px; color: var(--ink-3); }
.footer .brand { font-size: 15px; color: var(--ink); }
.footer nav { display: flex; gap: 20px; }
.footer nav a:hover { color: var(--ink); }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .caret, .lvl i { animation: none; }
  .thumb, .btn, .line, .card { transition: none; }
  .btn:hover { transform: none; }
  .lvl i { height: 8px; }
}

/* Responsive */
@media (max-width: 960px) {
  .nav-links { display: none; }
  .split, .split.flip { grid-template-columns: 1fr; gap: 40px; }
  .split.flip .copy { order: 0; }
  .extras { grid-template-columns: 1fr 1fr; }
  .faq-grid { grid-template-columns: 1fr; }
  .faq-side { position: static; }
}
@media (max-width: 720px) {
  .aw { grid-template-columns: 1fr; min-height: 0; }
  .aw-side { display: none; }
  .line { grid-template-columns: 1fr; gap: 2px; }
  .line .who { flex-direction: row; gap: 8px; align-items: baseline; }
  .trio, .extras { grid-template-columns: 1fr; }
  .nav-status { display: none; }
  .compare th, .compare td { padding: 12px 14px; font-size: 13.5px; }
  .compare tbody th { width: auto; }
}
@media (max-width: 640px) {
  br.lg { display: none; }
  .wrap { padding: 0 16px; }
  .h-hero { font-size: 38px; }
  .h-section { font-size: 30px; }
  .hero { padding-top: 48px; }
  .announce { max-width: 100%; }
  .announce > span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hero-sub { font-size: 17px; }
  .hero-cta { flex-direction: column; }
  .window { margin-top: 48px; border-radius: 18px; }
  .aw-toolbar .hide-sm { display: none; }
  .aw-head, .aw-content { padding-left: 16px; padding-right: 16px; }
  .tab { padding: 6px 14px; font-size: 13.5px; }
  .md, .md-raw { padding: 18px 60px 18px 16px; }
  .aw-notes { padding-left: 16px; padding-right: 16px; }
  .aw-minutes { margin-left: -16px; margin-right: -16px; }
  .aw-notes { margin-left: -16px; margin-right: -16px; }
  .aw-spk { padding: 4px 14px; }
  .spk { grid-template-columns: 34px 1fr 40px; gap: 4px 12px; }
  .spk .bar { grid-column: 2 / -1; grid-row: 2; }
  .spk .dur { display: none; }
  .section { padding-top: 88px; }
  .mb-strip .hide-sm { display: none; }
  .mac-menu { width: 100%; margin-right: 0; }
  /* Stack the table so the Briefwell answer never scrolls off screen */
  .compare thead { display: none; }
  .compare tbody tr { display: grid; grid-template-columns: 1fr; padding: 14px 16px; gap: 4px; }
  .compare tbody th, .compare td { width: auto; padding: 0; }
  .compare td.us { order: 1; }
  .compare td:not(.us) { order: 2; font-size: 12.5px; color: var(--ink-3); }
  .compare td:not(.us)::before { content: "Cloud bots: "; }
  .compare tbody tr:first-child { border-top: 0; }
  .final { padding: 56px 20px; }
  .footer-inner { flex-direction: column; }
}
@media (max-width: 359px) { .h-hero { font-size: 33px; } }

/* ---- Hero states: live (LiveView), processing (after Stop), done (meeting detail) ---- */
.window[data-state="done"] .aw-live,
.window:not([data-state="done"]) .aw-detail { display: none; }
.window[data-state="done"] .aw-now { display: none; }
.window:not([data-state="done"]) .done-row { display: none; }
.window[data-state="done"] .done-row { animation: blur-in .45s var(--ease) both; }
.window[data-state="done"] .aw-detail { animation: blur-in .45s var(--ease) both; }
.window[data-state="live"] .rec-pill,
.window:not([data-state="done"]) .aw-group,
.window:not([data-state="done"]) .aw-more { display: none; }
.window:not([data-state="live"]) .aw-stop { display: none; }
.window[data-state="processing"] .rec-pill { opacity: .45; pointer-events: none; }

.aw-stop { width: 36px; padding: 0; justify-content: center; color: var(--ink); cursor: pointer; transition: transform .35s var(--spring), background .2s; }
.aw-stop svg { width: 15px; height: 15px; }
.aw-stop:hover { background: var(--card-hi); }
.aw-stop:active { transform: scale(.92); }
.rp-rec { display: grid; place-items: center; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }

/* Sidebar "Now" row */
.live-row { align-items: center; }
.rec-dot { flex: none; width: 8px; height: 8px; margin: 0 5px 0 4px; border-radius: 50%; background: #ff3b30; }
.live-row div { flex: 1; }
.live-status { color: #ff3b30 !important; }
.aw-item.on .live-status { color: #ffd2cf !important; }
.busy { display: none; height: 3px; margin-top: 5px; border-radius: 2px; background: color-mix(in srgb, currentColor 20%, transparent); overflow: hidden; }
.busy i { display: block; height: 100%; width: var(--f, 100%); border-radius: 2px; background: currentColor; opacity: .9; transition: width .3s ease-out; }
.busy.indeterminate i { opacity: .45; }
.side-stop { flex: none; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: none; color: inherit; cursor: pointer; }
.side-stop svg { width: 11px; height: 11px; }
.side-stop:hover { background: #ffffff33; }
.spin { display: none; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; opacity: .7; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.window[data-state="processing"] .live-row .rec-dot,
.window[data-state="processing"] .side-stop { display: none; }
.window[data-state="processing"] .spin { display: block; }
.window[data-state="processing"] .busy { display: block; }
.window[data-state="processing"] .live-status { color: inherit !important; }

/* LiveView */
.aw-live { display: flex; flex-direction: column; flex: 1; }
.lv-head { display: flex; align-items: baseline; gap: 14px; padding: 8px 22px 12px; }
.lv-head > div:first-child { flex: 1; min-width: 0; }
.lv-head h3 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.lv-status { margin-top: 4px; font-size: 14px; color: var(--ink-2); }
.lv-clock { display: flex; align-items: center; gap: 8px; }
.lv-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff3b30; animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.lv-time { font-family: var(--rounded); font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.window[data-state="processing"] .lv-dot { display: none; }
.window[data-state="processing"] .lv-clock .spin { display: block; }

.lv-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 22px 16px; border-bottom: 1px solid var(--line); }
.lv-tile { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 10px; background: color-mix(in srgb, var(--card) 85%, transparent); }
.lv-top { display: flex; align-items: center; gap: 8px; }
.lv-top > div { flex: 1; min-width: 0; }
.lv-top b { display: block; font-size: 14px; font-weight: 600; }
.lv-top small { display: block; font-size: 12px; color: var(--ink-3); }
.lv-ic { display: grid; place-items: center; width: 26px; height: 26px; color: var(--ink-2); }
.lv-ic svg { width: 16px; height: 16px; }
.lv-state { font-size: 12px; font-weight: 500; color: var(--ink-3); transition: color .3s; }
.lv-tile.hearing .lv-state { color: #34c759; }
.lv-level { height: 6px; border-radius: 3px; background: var(--card-hi); overflow: hidden; }
.lv-level i { display: block; height: 100%; width: 0; border-radius: 3px; background: #34c759; transition: width .08s linear; }
.lv-tile.speaking .lv-level i { animation: level 1.3s steps(14) infinite; }
@keyframes level {
  0% { width: 22%; } 15% { width: 48%; } 30% { width: 31%; } 45% { width: 57%; } 60% { width: 26%; } 75% { width: 52%; } 90% { width: 37%; } 100% { width: 22%; }
}
.lv-text { min-height: 40px; font-size: 13.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lv-text.idle { color: var(--ink-3); }
.window[data-state="processing"] .lv-tile { opacity: .6; transition: opacity .4s; }

.lv-transcript { padding: 18px 22px 22px; }
.aw-detail { display: flex; flex-direction: column; flex: 1; }
.aw-detail .pane[data-pane="transcript"] .lines { max-width: 760px; }

/* Speaker names are buttons that open the picker */
.line .name { padding: 0 5px; margin-right: -5px; border-radius: 5px; cursor: pointer; transition: background .15s, box-shadow .15s; }
.line .name:hover, .line .name.open { background: color-mix(in srgb, var(--c) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); }
.line.anon .name:hover, .line.anon .name.open { background: color-mix(in srgb, var(--ink-3) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink-3) 45%, transparent); }

/* Speaker picker popover, like the app's */
.picker {
  position: absolute; z-index: 30; width: 340px; padding: 14px; border-radius: 18px;
  background: color-mix(in srgb, var(--raised) 88%, transparent);
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 18px 44px -12px #00000059, 0 0 0 .5px #00000033, inset 0 1px 0 #ffffff33;
  transform-origin: left center; animation: pop .28s var(--spring) both;
}
@keyframes pop { from { opacity: 0; transform: scale(.92); } }
.picker::before { content: ""; position: absolute; left: -7px; top: var(--ay, 30px); width: 14px; height: 14px; background: inherit; transform: rotate(45deg); box-shadow: -.5px .5px 0 #00000033; clip-path: polygon(0 0, 0 100%, 100% 100%); }
.pk-quote { padding: 2px 0 2px 14px; border-left: 4px solid var(--c); font-size: 14.5px; font-style: italic; color: var(--ink-2); }
.pk-search { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 12px; border-radius: 10px; background: var(--card); color: var(--ink-3); font-size: 15px; }
.pk-search svg { width: 16px; height: 16px; }
.pk-label { margin: 14px 0 4px; padding: 0 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; color: var(--ink-3); }
.pk-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.pk-item:hover { background: var(--card); }
.pk-item i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.pk-item.cur { font-weight: 700; }
.pk-item.cur::after { content: "✓"; margin-left: auto; color: var(--accent); font-weight: 600; }
.pk-foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); text-align: center; }
.pk-foot p { font-size: 13px; font-weight: 500; color: var(--ink-3); text-align: left; }
.pk-foot .seg { display: inline-flex; margin-top: 6px; }
.pk-foot .seg button { padding: 4px 14px; font-size: 14px; }
.pk-foot .seg button[aria-pressed="true"] { background: var(--accent); color: #fff; }

/* Menu demo submenu opens to the left, the way macOS flips it near the screen edge */
.has-sub { position: relative; }
.submenu {
  display: none; position: absolute; top: -5px; right: calc(100% + 4px); width: 230px; padding: 5px; border-radius: 12px; z-index: 5; color: var(--ink);
  background: color-mix(in srgb, var(--raised) 92%, transparent);
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 12px 32px -10px #00000040, 0 0 0 .5px #0000002e, inset 0 1px 0 #ffffff40;
}
.has-sub:hover > .submenu, .has-sub.open > .submenu, .has-sub:focus-within > .submenu { display: block; }
.has-sub:hover, .has-sub.open { background: var(--accent); color: #fff; }
.has-sub:hover > .mi-r, .has-sub.open > .mi-r { color: #ffffffcc; }
.submenu .mi { color: var(--ink); }
.submenu .mi.dim { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.submenu .mi:not(.dim):hover { color: #fff; }
.mac-menu { position: relative; }

@media (max-width: 720px) {
  .lv-tiles { grid-template-columns: 1fr; }
  .lv-tile[data-ch="mic"] .lv-text, .lv-tile[data-ch="remote"] .lv-text { min-height: 20px; -webkit-line-clamp: 1; }
}
@media (max-width: 640px) {
  .lv-head, .lv-transcript { padding-left: 16px; padding-right: 16px; }
  .lv-tiles { padding: 0 16px 14px; }
  .submenu { right: auto; left: 12px; top: 30px; }
  .picker { width: min(340px, calc(100vw - 32px)); }
  .picker::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lv-dot, .spin, .lv-tile.speaking .lv-level i { animation: none; }
  .picker, .window[data-state="done"] .aw-detail, .window[data-state="done"] .done-row { animation: none; }
}

/* Auto-stop: a ring fills around Stop for the last ten seconds, with a note under it */
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
.aw-toolbar { position: relative; }
.aw-stop { position: relative; --p: 0; transition: transform .35s var(--spring), background .2s, --p 1s linear; }
.aw-stop::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; opacity: 0; transition: opacity .3s;
  background: conic-gradient(var(--accent) calc(var(--p) * 1turn), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
}
.aw-stop.counting::after { opacity: 1; }
.auto-hint {
  position: absolute; top: 15px; right: 62px; z-index: 4; padding: 7px 12px; border-radius: 999px; pointer-events: none;
  font-size: 13px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--raised) 85%, transparent); color: var(--ink);
  backdrop-filter: blur(16px) saturate(170%); -webkit-backdrop-filter: blur(16px) saturate(170%);
  box-shadow: 0 8px 22px -10px #00000040, 0 0 0 .5px var(--line);
  opacity: 0; transform: translateX(6px) scale(.96); transform-origin: right center;
  transition: opacity .3s var(--ease), transform .4s var(--spring);
}
.auto-hint.show { opacity: 1; transform: none; }
.window:not([data-state="live"]) .auto-hint { right: 104px; }
.aw-title { transition: opacity .3s; }
@media (max-width: 640px) {
  .auto-hint { font-size: 12px; }
  .aw-toolbar:has(.auto-hint.show) .aw-title { opacity: 0; }
}