/* Dictate page CSS: only the drawings of the app (the hero demo and the pictures on the cards).
   Layout, type, colour and components come from ds/v1.css. The drawings keep the app's own colours
   and sizes, through the .mac and --app-* values below. The pills in the hero copy Dictate 0.13.0,
   including the one place it uses colour on purpose: Me and Call. Status colours (record red, call green, window lights) stay. The call and chat
   windows are generic and stay neutral. The demo's timing lives in index.html. */
:root {
  --sans: var(--font);
  --app-control: #ffffff; --app-fill: rgba(120,120,128,.16); --app-green: #34c759; --app-off: #b6b6bf;
  --app-ring: 0 1px 3px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.06);
  --app-float: 0 30px 60px -28px rgba(16,24,40,.32), 0 0 0 1px rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark) {
  :root {
    --app-control: #2c2c2e; --app-fill: rgba(120,120,128,.32); --app-green: #30d158; --app-off: #5a5a63;
    --app-ring: 0 1px 3px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.08);
    --app-float: 0 30px 60px -28px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.1);
  }
}

/* Corners step down from the outside in: the floating nav (radius 28), then cards and frames (24),
   then buttons (22 from ds/v1.css). The nav's 36px Download button sits 10px in on top, bottom and
   right, so its corners stay concentric with the nav's (28 = 18 + 10), and the logo sits the same
   10px in on the left, so the two ends of the capsule mirror each other. */
:root { --nav-h: 56px; --radius-card: 24px; }
.nav { width: min(calc(var(--page) + 56px), 100% - 24px); padding: 0 10px; }
/* The name's line box is centred on the logo, but the word has no descenders, so its ink sits high. Moving
   it down 2px puts the middle of its capitals on the logo's centre line. A transform, so the phone rule in
   ds/v1.css that hides the name by positioning it still applies. */
.nav .brand .name { transform: translateY(2px); }

/* Drawn app UI in native macOS colours. The pill values are sampled from the 0.13.0 renders. */
.mac {
  --win: #fff; --field: #f5f5f7; --text: #1d1d1f; --text2: #6a6a70; --text3: #86868c; --sep: rgba(0,0,0,.09);
  --fill2: rgba(120,120,128,.2); --red: #c42130; --ok: #1f8a3b;
  --desk: linear-gradient(180deg, #e7e7ec, #d9d9df); --bar: rgba(255,255,255,.55); --bar-edge: rgba(0,0,0,.07);
  --winedge: rgba(0,0,0,.16); --winshadow: 0 22px 44px -16px rgba(0,0,0,.28); --tile: #eceef2;
  --pill: rgba(246,246,248,.97); --pill-edge: rgba(0,0,0,.1); --pill-shadow: 0 10px 28px -8px rgba(0,0,0,.24), 0 1px 3px rgba(0,0,0,.08);
  --p1: #3c3c41; --p2: #6b6b73; --me: rgba(0,122,255,.75); --call: rgba(175,82,222,.75);
  --rec: #f52f32; --go: #26bf4d; --track: rgba(0,0,0,.1); --pbtn: rgba(0,0,0,.085); 
  --keycap: #fff; --keyedge: rgba(0,0,0,.18); --endcall: #ff3b30;
}
@media (prefers-color-scheme: dark) {
  .mac {
    --win: #2c2c2e; --field: #3a3a3c; --text: #f4f4f6; --text2: #a4a4ab; --text3: #84848b; --sep: rgba(255,255,255,.1);
    --fill2: rgba(255,255,255,.16); --red: #ff6b6b; --ok: #3bd45f;
    --desk: linear-gradient(180deg, #232326, #151517); --bar: rgba(0,0,0,.32); --bar-edge: rgba(255,255,255,.08);
    --winedge: rgba(255,255,255,.14); --winshadow: 0 22px 44px -16px rgba(0,0,0,.7); --tile: #232326;
    --pill: rgba(52,52,57,.97); --pill-edge: rgba(255,255,255,.14); --pill-shadow: 0 10px 28px -8px rgba(0,0,0,.7), 0 1px 3px rgba(0,0,0,.4);
    --p1: #ebebed; --p2: #a5a4ad; --me: rgba(10,132,255,.75); --call: rgba(191,90,242,.75);
    --rec: #ff4747; --go: #3bdb63; --track: rgba(255,255,255,.14); --pbtn: rgba(255,255,255,.12); 
    --keycap: #48484c; --keyedge: rgba(0,0,0,.5); --endcall: #ff453a;
  }
}

/* The card picture of the dictation pill uses these three. */
.rd { width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none; }
.time { color: var(--text2); font-variant-numeric: tabular-nums; }
.levelbar { width: 56px; height: 4px; border-radius: 2px; background: var(--fill2); overflow: hidden; }
.levelbar i { display: block; height: 100%; width: 10%; background: var(--text2); border-radius: 2px; }

/* Pictures on the cards */
.art { padding: var(--sp-3); display: flex; flex-direction: column; justify-content: center; gap: 8px; overflow: hidden; font-size: 14px; line-height: 1.35; }
.art .pillc { display: flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; padding: 6px 12px; border-radius: 14px; background: var(--app-control); box-shadow: var(--app-ring); font-size: 13px; }
.art .pillc.col { flex-direction: column; align-items: flex-start; align-self: center; gap: 4px; }
.art .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 10px; background: var(--app-control); box-shadow: var(--app-ring); }
.switch { flex: none; position: relative; width: 38px; height: 22px; border-radius: 11px; background: var(--app-off); }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.switch.on { background: var(--app-green); }
.switch.on::after { left: 18px; }
.art .sug { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 10px; background: var(--app-control); box-shadow: var(--app-ring); }
.art .sug .g { flex: 1; min-width: 0; }
.art .sug .bt { padding: 1px 8px; border-radius: 6px; background: var(--app-fill); font-size: 12px; }
.art .pill { position: static; align-self: center; width: max-content; min-width: min(340px, 100%); max-width: 100%; margin: 0; opacity: 1; transform: none; font: 500 12px/16px var(--sans); }
.art .ml { display: flex; gap: 8px; font-size: 13px; }
.art .ml .w { flex: 0 0 34px; color: var(--text2); }
.art .tool { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 8px; background: var(--app-control); box-shadow: var(--app-ring); font: 13px var(--mono); }

/* History card: the real History window of Dictate 0.14 without its sidebar, the list of calls on the
   left and the open call's transcript on the right (a 1303 by 600 crop of a 2120 by 1360 capture). At
   the card's width the whole window would set its text near 7px, so the crop ends inside the transcript
   and fades out to the right and at the bottom. The well takes the capture's own background so the
   fade reads as the window going on. The frame's hairline is drawn over the well so it stays visible. */
.well.shot { position: relative; height: auto; aspect-ratio: 1303 / 600; overflow: hidden; background: #fff; }
.well.shot picture, .well.shot img { display: block; width: 100%; height: auto; }
.well.shot img {
  -webkit-mask-image: linear-gradient(to right, #000 82%, transparent), linear-gradient(to bottom, #000 88%, transparent);
  mask-image: linear-gradient(to right, #000 82%, transparent), linear-gradient(to bottom, #000 88%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.well.shot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--hairline); pointer-events: none; }
@media (prefers-color-scheme: dark) { .well.shot { background: #1e1e1e; } }
/* From 735px every well in the grid takes the capture's ratio and every row the height of the tallest
   card, so wells, headings and card edges line up across the whole grid. */
@media (min-width: 735px) {
  .cards { grid-auto-rows: 1fr; }
  .cards .well { height: auto; aspect-ratio: 1303 / 600; }
}

/* Hero demo. A 420 by 500 scene of the top of a Mac screen, scaled to the column by the script so
   it reads the same at every width. Every window stays sharp; the camera leans in on the pills at
   the top during the first step only, so the message field stays on stage while it fills. */
.demo-wrap { justify-self: end; width: 100%; max-width: 440px; }
@media (max-width: 834px) { .demo-wrap { justify-self: center; } }
.stage { position: relative; aspect-ratio: 420 / 500; overflow: hidden; }
.stage::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--hairline); pointer-events: none; }
.scene { position: absolute; left: 0; top: 0; width: 420px; height: 500px; transform-origin: 0 0; background: var(--desk); color: var(--text); font: 500 12px/16px var(--sans); transition: opacity .5s ease; }
.scene.out { opacity: 0; }
.instant * { transition: none !important; }
.cam { position: absolute; inset: 0; transform-origin: 50% 0; transition: transform .6s cubic-bezier(.4,0,.15,1); }
.cam.top { transform: scale(1.16); }

.menubar { position: absolute; z-index: 4; left: 0; right: 0; top: 0; height: 24px; display: flex; align-items: center; padding: 0 12px; background: var(--bar); box-shadow: 0 .5px 0 var(--bar-edge); font: 600 11.5px/24px var(--sans); }
.menubar .clock { font-weight: 500; }
.menubar .mbicon { margin-left: auto; display: flex; width: 20px; height: 16.4px; margin-right: 10px; font-weight: 400; }
.menubar .mbicon svg { width: 100%; height: 100%; display: block; }
.menubar .mbicon g { display: none; }
.menubar .mbicon[data-state="idle"] .i-idle, .menubar .mbicon[data-state="call"] .i-call, .menubar .mbicon[data-state="dict"] .i-dict { display: inline; }
.menubar .clock { margin-left: 0; }
.pill .bt, .art .bt { white-space: nowrap; }
.art .pill > span { white-space: nowrap; }
.art .pill .s { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .art .pill.nudge { gap: 6px; padding: 0 10px; } .art .pill .s { display: none; } .art .nudge .bt { padding: 0 7px; } }

/* Windows */
.stage .win { position: absolute; z-index: 2; border-radius: 12px; background: var(--win); box-shadow: 0 0 0 .5px var(--winedge), var(--winshadow); overflow: hidden; opacity: 0; transform: translateY(10px) scale(.985); transition: opacity .4s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.stage .win.on { opacity: 1; transform: none; }
.stage .wtitle { flex: none; height: 30px; display: flex; align-items: center; justify-content: center; position: relative; border-bottom: 1px solid var(--sep); font: 600 12.5px/1 var(--sans); }
.stage .lights { position: absolute; left: 11px; top: 9.5px; display: flex; gap: 7px; }
.stage .lights i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.stage .lights i:nth-child(2) { background: #febc2e; }
.stage .lights i:nth-child(3) { background: #28c840; }

.callwin { left: 60px; top: 136px; width: 300px; height: 288px; }
.callwin .tile { margin: 10px 10px 0; height: 156px; border-radius: 10px; background: var(--tile); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.callwin .avatar { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--fill2); color: var(--text2); font: 600 28px/1 var(--sans); margin-bottom: 4px; }
.callwin .who { font: 600 15px/1.2 var(--sans); }
.callwin .slot { position: relative; display: grid; place-items: center; width: 100%; height: 24px; }
.callwin .slot > * { grid-area: 1 / 1; transition: opacity .25s ease, transform .12s; }
.callwin .join { padding: 0 20px; height: 24px; border-radius: 12px; background: var(--text); color: var(--win); font: 600 12px/24px var(--sans); }
.callwin .join.down { transform: scale(.94); filter: brightness(.82); }
.callwin .ctime, .callwin .ctrls { transition: opacity .25s ease; }
.callwin:not(.joined) .ctime { opacity: 0; }
.callwin.joined .join { opacity: 0; }
.callwin:not(.joined) .ctrls { opacity: .4; }
.callwin .ctime { color: var(--text2); font: 500 12px/16px var(--sans); font-variant-numeric: tabular-nums; }
.callwin .ctrls { display: flex; justify-content: center; gap: 14px; }
.callwin .cb { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--fill2); color: var(--text); }
/* The meeting app's captions, between the video and the controls: one line said at a time. */
.callwin .caps { display: grid; height: 40px; margin: 6px 14px; align-items: center; text-align: center; font: 400 12px/16px var(--sans); }
.callwin .cap { grid-area: 1 / 1; margin: 0; text-wrap: balance; opacity: 0; transition: opacity .3s ease; }
.callwin .cap.on { opacity: 1; }
.callwin .cap b { font-weight: 600; color: var(--text2); margin-right: 4px; }
.callwin .cb.end { background: var(--endcall); color: #fff; }
.callwin .cb svg { width: 16px; height: 16px; }

.chat { left: 22px; top: 116px; width: 376px; height: 368px; display: flex; flex-direction: column; }
.chat .msgs { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 14px 12px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 32px); mask-image: linear-gradient(transparent, #000 32px); font: 400 13.5px/1.42 var(--sans); }
/* Each message opens its own height, so what is above it slides up instead of jumping. */
.chat .mw { flex: none; display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s cubic-bezier(.2,.8,.2,1), opacity .4s ease; }
.chat .mw > div { min-height: 0; overflow: hidden; }
.chat .mw.on { grid-template-rows: 1fr; opacity: 1; }
.chat .mw.on.dim { opacity: .4; }
.chat .m { margin-top: 10px; }
.chat .m.me { width: fit-content; max-width: 84%; margin-left: auto; padding: 8px 12px; border-radius: 16px 16px 4px 16px; background: var(--fill2); }
.chat .m.tools { padding: 3px 0; border-radius: 10px; background: var(--field); box-shadow: inset 0 0 0 .5px var(--sep); }
.chat .tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; padding: 3px 10px; font: 12px/18px var(--mono); color: var(--text2); }
/* Each call names its source, the Dictate MCP server. The icon is the one colour; an argument that does not fit drops to its own line under the name. */
.chat .tr .src { flex: none; width: 12px; height: 12px; border-radius: 3px; }
.chat .tr .by { font: 400 12px/18px var(--sans); color: var(--text2); }
.chat .tr .nm { min-width: 0; }
.chat .tr .arg { flex: 0 0 100%; padding-left: 20px; font: 500 12px/18px var(--sans); color: var(--text); }
.chat .st { flex: none; position: relative; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--fill2); border-top-color: var(--text2); animation: spin .8s linear infinite; }
.chat .done .st { border: 0; animation: none; }
.chat .done .st::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid var(--text2); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.chat .m.mail { padding: 10px 12px; border-radius: 10px; background: var(--field); box-shadow: inset 0 0 0 .5px var(--sep); }
.chat .mail .to { display: block; margin-bottom: 4px; color: var(--text2); font-size: 12px; }
.chat .w { opacity: 0; transition: opacity .35s ease; }
.chat .w.on { opacity: 1; }
.chat .inp { flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--sep); }
.chat .field { flex: 1; min-width: 0; min-height: 32px; padding: 6px 12px; border-radius: 16px; background: var(--field); box-shadow: inset 0 0 0 .5px var(--sep); font: 400 13.5px/1.45 var(--sans); transition: box-shadow .4s ease; }
.chat .field.hot { box-shadow: inset 0 0 0 1.5px var(--text2); }
.chat .field .ph { color: var(--text3); }
.chat .field .txt, .chat .field.has .ph { display: none; }
.chat .field.has .txt { display: block; }
.chat .field .w { display: none; opacity: 1; }
.chat .field .w.on { display: inline; }
/* Words settle into the field as they arrive: a short blur and a 2 px drop to sharp and in place. No colour, no overshoot. */
.chat .field .w.in { position: relative; animation: land .26s ease-out; }
@keyframes land { from { opacity: 0; filter: blur(2px); top: 2px; } to { opacity: 1; filter: blur(0); top: 0; } }
/* The text caret blinks while the field has focus. */
.chat .field .caret { display: none; width: 1.5px; height: 16px; margin-right: 1px; vertical-align: -3px; background: var(--text); animation: blink 1s steps(1) infinite; }
.chat .field.hot:not(.has) .c0, .chat .field.hot.has .c1 { display: inline-block; }
@keyframes blink { 50% { opacity: 0; } }
.chat .send { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--fill2); color: var(--text2); transition: background-color .3s, color .3s, transform .12s; }
.chat .send svg { width: 16px; height: 16px; }
.chat .send.ready { background: var(--text); color: var(--win); }
.chat .send.down { transform: scale(.88); }

/* On a narrow column the scene is 360 wide and the camera stays still, so the pills keep their size. */
.stage.narrow { aspect-ratio: 360 / 500; }
.stage.narrow .scene { width: 360px; }
.stage.narrow .callwin { left: 30px; }
.stage.narrow .chat { left: 10px; width: 340px; }
.stage.narrow .cam.top { transform: none; }

/* Dictate's pills, at the top of the screen. */
.pill { position: absolute; z-index: 5; left: 0; right: 0; top: 36px; width: max-content; margin-inline: auto; padding: 6px 14px; min-height: 28px; border-radius: 14px; background: var(--pill); box-shadow: 0 0 0 .5px var(--pill-edge), var(--pill-shadow); color: var(--p1); opacity: 0; transform: translateY(-8px) scale(.97); transition: opacity .45s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.pill.on { opacity: 1; transform: none; }
.pill .row { display: flex; align-items: center; gap: 8px; height: 16px; white-space: nowrap; }
.pill .s { color: var(--p2); }
.pill .tn { font-variant-numeric: tabular-nums; }
.pill .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--rec); }
/* As in 0.15.2: the question and the call app on one line, Ask before you record. under them. */
.nudge { top: 74px; width: 340px; height: 48px; padding: 0 14px; border-radius: 16px; display: flex; align-items: center; gap: 8px; }
.nudge .q { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nudge .q .r { display: flex; gap: 8px; min-width: 0; }
.nudge .ask { font: 400 11px/14px var(--sans); color: var(--p2); }
.pill .dic { flex: none; width: 14px; height: 14px; border-radius: 3.5px; display: block; }
.nudge .sp { flex: 1; }
.nudge > span { white-space: nowrap; }
.nudge .bt { padding: 0 9px; line-height: 20px; border-radius: 5px; background: var(--pbtn); transition: background-color .12s, transform .12s; }
.nudge .bt.down { background: var(--track); filter: brightness(.82); transform: scale(.96); }
.callpill.open, .dpill { border-radius: 16px; }
.callpill .ln { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s cubic-bezier(.2,.8,.2,1), opacity .4s ease-out; }
.callpill .ln.on { grid-template-rows: 1fr; }
/* Each line's text sits at the bottom of its row, so a closing line slides up and out and an opening one rises in. */
.callpill .ln > div { min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.callpill .ln span { display: flex; gap: 6px; width: 320px; padding-top: 4px; white-space: nowrap; }
.callpill .me { color: var(--me); }
.callpill .them { color: var(--call); }
.stopped { display: flex; align-items: center; gap: 8px; }
.stopped .sq { flex: none; width: 8px; height: 8px; border-radius: 1.5px; background: var(--p2); }
.stopped .copy { padding: 2px 9px; border-radius: 999px; background: var(--pbtn); }
.dpill { min-height: 32px; }
.dpill .lv { width: 48px; height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; }
.dpill .lv i { display: block; height: 100%; width: 6%; border-radius: 2px; background: var(--go); transition: width .12s linear; }
.dpill .dtext { width: 320px; margin-top: 4px; white-space: normal; }
.dpill .dtext:empty { display: none; }
.dpill .busy, .dpill.is-busy .rec { display: none; }
.dpill.is-busy .busy { display: flex; }
.dpill.is-busy .dtext { display: none; }
.dpill .spin { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--track); border-top-color: var(--p2); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* The shortcut, shown on screen as it is pressed. */
.hud { position: absolute; z-index: 6; left: 0; right: 0; top: 236px; width: max-content; margin-inline: auto; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 18px; background: var(--pill); box-shadow: 0 0 0 .5px var(--pill-edge), var(--pill-shadow); color: var(--p1); opacity: 0; transform: scale(.94); transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.hud.on { opacity: 1; transform: none; }
.hud .key { position: relative; width: 52px; height: 48px; border-radius: 8px; background: var(--keycap); box-shadow: 0 0 0 .5px var(--pill-edge), 0 2px 0 var(--keyedge); transition: transform .1s, box-shadow .1s; }
.hud.down .key { transform: translateY(2px); box-shadow: 0 0 0 .5px var(--pill-edge), 0 0 0 var(--keyedge); }
.hud .key.opt { width: 64px; }
.hud .key b { position: absolute; font-weight: 500; }
.hud .opt .sym { right: 8px; top: 6px; font-size: 13px; }
.hud .opt .lab { left: 8px; bottom: 6px; font-size: 11px; }
.hud .tick .sym { left: 0; right: 0; top: 5px; text-align: center; font-size: 13px; }
.hud .tick .lab { left: 0; right: 0; bottom: 3px; text-align: center; font-size: 22px; line-height: 22px; }
.hud .plus { color: var(--p2); font-size: 15px; }

.cursor { position: absolute; z-index: 20; left: 0; top: 0; width: 20px; height: 24px; opacity: 0; transition: opacity .2s ease, transform .55s cubic-bezier(.45,.05,.2,1); }
.cursor.on { opacity: 1; }
.cursor svg { display: block; width: 100%; height: 100%; transform-origin: 3px 2px; transition: transform .12s; }
.cursor.down svg { transform: scale(.86); }

/* Under the stage: the three phases as buttons, the current one filling like a progress bar, and Pause beside them. */
.beats { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-4) var(--sp-3); }
/* The list keeps its content width so no caption wraps; when Pause does not fit beside it, Pause drops to its own row. All three capsules share the widest width. */
.beats .phases { list-style: none; margin: 0; padding: 0; width: max-content; max-width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-2); }
.beats .phases li { margin: 0; padding: 0; max-width: 100%; }
.beats .phase { position: relative; isolation: isolate; overflow: hidden; display: flex; width: 100%; max-width: 100%; padding-block: 6px; justify-content: flex-start; text-align: left; white-space: nowrap; }
/* The current step keeps a fixed outline: it shows at 0 s and under reduced motion, and hover cannot outdo it. */
.beats .phase[aria-current] { box-shadow: inset 0 0 0 1.5px var(--text); }
.beats .prog { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
.beats .prog b { display: block; height: 100%; background: var(--fill-active); transform-origin: 0 50%; transform: scaleX(0); }
.beats .n { display: inline-block; min-width: 0; font-variant-numeric: tabular-nums; }
/* Pause is a control drawn as a link: underlined in the text colour, the line turning solid on hover as
   the design system's links do, at the phase buttons' height so its text sits level with theirs. */
.linklike { appearance: none; -webkit-appearance: none; border: 0; padding: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--link-line); text-underline-offset: .22em; transition: text-decoration-color .15s; border-radius: 4px; }
.linklike:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.beats #pause { flex: none; min-height: 36px; }
.beats.still .prog, .beats.still #pause { display: none; }
@media (prefers-reduced-motion: reduce) { .beats .prog, .beats #pause { display: none; } }
@media (prefers-reduced-motion: reduce) { .chat .st, .dpill .spin, .chat .field .caret, .chat .field .w.in { animation: none; } }
/* Install steps: the number sits inside the text's left edge, and a wrapped line aligns with the step's text. */
.get .steps ol { margin-left: 0; padding: 0; list-style: none; counter-reset: step; }
.get .steps li { display: grid; grid-template-columns: 1.5em 1fr; counter-increment: step; }
.get .steps li::before { content: counter(step) "."; font-variant-numeric: tabular-nums; }
.get .steps li + li { margin-top: 0; }
.get .meta > span { text-wrap: wrap; }
/* get.js appends the live count as plain text, so the markup cannot hold "41 spots left." together; balanced lines keep the count off a line of its own. */
.get .meta > [data-left] { text-wrap: balance; }
/* Notify-me form, shown once the founding spots are gone: the field and its button share a row up to
   the width of a short line, the consent line sits under it like the other facts of the group. */
.notify { margin-top: var(--sp-4); }
.notify label + .notify-row { margin-top: var(--sp-2); }
.notify-row { display: flex; gap: var(--sp-2); max-width: 420px; }
.notify-row input { flex: 1 1 auto; min-width: 0; }
.notify-row .button { flex: none; }
.notify-done, .notify-err { margin-top: var(--sp-2); }
.notify-done:focus { outline: none; }
.notify-err:empty { display: none; }
.notify .meta { margin-top: var(--sp-2); }
.notify-ts { height: 0; overflow: hidden; }
.notify-ts.is-shown { height: auto; margin-top: var(--sp-2); }

/* And more: one line per item between hairlines, the same rule the Questions list draws, so the list
   sits quietly between the cards above and the FAQ below. */
.more-list { list-style: none; padding: 0; border-top: 1px solid var(--hairline); }
.more-list li { padding: var(--sp-3) 0; border-bottom: 1px solid var(--hairline); }

/* How it compares: a plain table in body text. Dictate's column is drawn exactly like the other two.
   th is 400 because browsers make it bold. Hairlines between rows match the Questions list. */
.compare-table { width: 100%; border-collapse: collapse; margin-top: var(--sp-6); text-align: left; }
.compare p + .compare-table, .compare-table + p { margin-top: var(--sp-6); }
.compare-table th, .compare-table td { font-weight: 400; text-align: left; vertical-align: top; padding: var(--sp-4) var(--sp-4) var(--sp-4) 0; border-bottom: 1px solid var(--hairline); }
.compare-table thead tr:first-child > * { border-top: 1px solid var(--hairline); }
.compare-table tr > :last-child { padding-right: 0; }
.compare-table .apps { display: block; }

/* Below 735 px the table keeps its three columns as a grid: the headings on top, then each question on its
   own full-width line with its marks beneath, aligned under the headings. The roles in the HTML keep the
   table semantics for screen readers. */
@media (max-width: 734px) {
  .compare-table, .compare-table thead, .compare-table tbody { display: block; }
  .compare-table tr { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr) 10.25rem; column-gap: var(--sp-3); }
  .compare-table th, .compare-table td { display: block; padding: 0; border: 0; overflow-wrap: break-word; }
  .compare-table thead td { display: none; }
  .compare-table thead tr:first-child > * { border-top: 0; }
  .compare-table thead tr { padding: var(--sp-4) 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
  .compare-table tbody tr { padding: var(--sp-4) 0; border-bottom: 1px solid var(--hairline); row-gap: var(--sp-2); }
  .compare-table tbody th { grid-column: 1 / -1; }
}
/* The search pages set Dictate against one app, so their two columns share the width evenly. */
@media (max-width: 734px) {
  .compare-table.pair tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .compare-table tr { column-gap: 6px; }
}

/* How it compares by price: Dictate, then Cloud, then Local. From 735px the columns share their rows (name,
   the line of apps, price) through subgrid, so the names and the prices sit level across all three; Dictate
   leaves the apps row empty. Under each price is one paragraph that wraps, at the same gap in every column,
   so no line is held level with another and no column carries an empty row. The icon sits beside Dictate's
   name and sets the name row's height for every column. Dictate is the raised card and runs on below its
   paragraph with its button; the flat columns end at theirs. All prices share one display size. Below 735px
   it is one column in the same order. */
.tiers { margin-top: var(--sp-6); display: grid; gap: var(--sp-8); }
.tier p { margin: 0; }
.tier .apps { margin-top: var(--sp-2); }
.tier .fig { margin-top: var(--sp-5); font-size: 48px; line-height: 1; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.tier .fig .per { font-size: 26px; letter-spacing: -.01em; }
.tier .terms { margin-top: var(--sp-4); }
.tier .get { margin-top: var(--sp-5); }
.tier-dictate { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--app-float); padding: var(--sp-5); }
.tier-dictate .name { display: flex; align-items: center; gap: var(--sp-3); }
.tier-dictate .name img { flex: none; width: 40px; height: 40px; border-radius: 9px; box-shadow: 0 4px 12px -4px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.08); }

@media (min-width: 735px) {
  .tiers { grid-template-columns: 1.15fr 1fr 1fr; grid-template-rows: repeat(5, auto); gap: 0 var(--sp-6); }
  .tier { display: grid; grid-row: 1 / span 5; grid-template-rows: subgrid; align-content: start; padding: var(--sp-5) 0; }
  .tier-dictate { padding: var(--sp-5); }
  .tier > h3 { grid-row: 1; align-self: center; }
  .tier > .apps { grid-row: 2; }
  .tier > .fig { grid-row: 3; align-self: baseline; }
  .tier > .terms { grid-row: 4; }
  .tier > .get { grid-row: 5; }
}
@media (min-width: 735px) and (max-width: 1000px) {
  .tiers { column-gap: var(--sp-5); }
  .tier-dictate { padding: var(--sp-5) var(--sp-4); }
  .tier .fig { font-size: 34px; }
  .tier .fig .per { font-size: 20px; }
}
@media (max-width: 734px) {
  .tier .fig { font-size: 40px; }
  .tier-dictate .actions > .button { flex: 1 1 auto; }
}

/* Hero headline: "call transcription" never splits at any width. From 1000px each phrase
   is an inline-block, so the headline breaks between phrases (three lines) and never inside one
   unless a phrase is wider than the column. */
@media (min-width: 1000px) {
  .h1-part { display: inline-block; }
}

/* At 360 px the phone's "Send to my Mac" button does not fit beside both links: the nav keeps the brand icon, Questions and the button, and the footer still links GitHub. */
@media (max-width: 380px) {
  .nav { gap: var(--sp-2); }
  .nav .brand { flex: none; }
  .nav .links { gap: var(--sp-3); }
  .nav .links a:not(.button):not([href="#questions"]) { display: none; }
}

.nowrap { white-space: nowrap; }


/* A note behind a phrase in running text: the phrase is a button drawn with a dotted underline in the
   text colour, the note a surface card under it with the page's soft shadow and radius. Body size,
   text colour, no weight. */
.note { position: relative; }
.note-mark { appearance: none; -webkit-appearance: none; border: 0; padding: 0; background: none; color: inherit; font: inherit; line-height: inherit; text-align: inherit; cursor: pointer; text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-decoration-color: var(--link-line); text-underline-offset: .22em; border-radius: 4px; transition: text-decoration-color .15s; }
.note-mark:hover, .note-mark[aria-expanded="true"] { text-decoration-color: currentColor; }
.note-pop { position: absolute; z-index: 30; top: calc(100% + var(--sp-2)); left: 0; width: min(420px, calc(100vw - 32px)); padding: var(--sp-4) var(--sp-5); hyphens: manual; border-radius: var(--radius-card); background: var(--surface); box-shadow: 0 0 0 1px var(--hairline), var(--float); color: var(--text); text-align: left; white-space: normal; }
.note-pop:not([hidden]) { display: block; }

/* Data retention card: the two pickers of Settings, Data retention in 0.15.2 at their defaults. The audio
   picker is drawn open so the shorter choices show. Its menu lies over the button the way macOS opens
   a pop-up, with the checked item on the button. The rows sit low in the well to leave the menu room. */
.art.ret { justify-content: flex-end; }
.art.ret .toggle-row { position: relative; }
.art .popup { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.art .popup.open { visibility: hidden; }
.art .popup svg { width: 7px; height: 11px; color: var(--text2); }
.art .menu { position: absolute; right: 4px; bottom: 3px; z-index: 1; display: flex; flex-direction: column; padding: 5px; border-radius: 8px; background: var(--pill); box-shadow: 0 0 0 .5px var(--pill-edge), var(--pill-shadow); font-size: 13px; line-height: 22px; white-space: nowrap; }
.art .menu > span { position: relative; padding: 0 22px 0 22px; border-radius: 4px; }
.art .menu .sel::before { content: ""; position: absolute; left: 8px; top: 6px; width: 4px; height: 8px; border: solid var(--text); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }

/* Under the consent answer: a meeting where six of eight participants are notetaker bots. Smaller and in
   softer tones than the cards, so the answer stays the main thing. */
.faq-list details > .bots { max-width: 360px; margin: var(--sp-2) 0 0; }
.botwin { border-radius: 12px; background: var(--win); box-shadow: 0 0 0 .5px var(--winedge); overflow: hidden; color: var(--text2); font: 500 11px/14px var(--sans); }
.botwin .bt-title { padding: 7px 10px; border-bottom: 1px solid var(--sep); text-align: center; font-weight: 600; color: var(--text); }
.botwin .grid8 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px; }
.botwin .t { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 4 / 3; border-radius: 6px; background: var(--tile); }
.botwin .av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--fill2); color: var(--text); font-weight: 600; }
.botwin .bot { display: grid; place-items: center; width: 24px; height: 24px; }
.botwin .bot svg { width: 18px; height: 18px; }
.botwin .b { opacity: .8; }
.bots figcaption { margin-top: var(--sp-2); }