/* The six inner pages (How it works, Why it helps, Research, Privacy, Questions, Join). Loaded after site.css, which owns the
   palette v3 tokens, the nav bar, the pale reading band (.band-mist) and the footer card on a sky crop (.close). Open sky for the head, pale lavender for every
   reading surface, deep plum for ink. Every page is ordinary flow: nothing holds or pins; the only scroll-driven motion left is the Why it helps reveals
   (html.rv-on, set by pages.js), which use transform and opacity only. */

:root { --mist-2: #DDD2F1; --card: #F6F2FB; --edge: rgba(43, 26, 79, .14); }
body.pg { background: var(--mist); color: var(--plum); }
.pg main a { text-underline-offset: .2em; }
.pg .textlink { color: var(--plum); text-decoration-color: rgba(43, 26, 79, .45); }
.pg .textlink:hover { text-decoration-color: var(--plum); }

h1 { font: 600 clamp(2.5rem, 5.4vw, 5rem)/1 var(--font); letter-spacing: -.035em; text-wrap: balance; max-width: 20ch; color: var(--plum); }
@media (max-width: 767px) { h1 { font-size: clamp(2.25rem, 10.5vw, 3rem); } }

/* ---------------------------------------------------------------- page head: a different crop of the sky plate, the h1 over a local scrim only (about 0.6 screens) */
.p-head { position: relative; isolation: isolate; display: grid; align-items: end; min-height: clamp(24rem, 60svh, 40rem); padding: calc(var(--bar-top) + var(--bar-h) + 2.5rem) var(--gutter) clamp(3rem, 7vh, 4.5rem); background: linear-gradient(180deg, var(--sky), var(--lavender)); overflow: clip; }
.p-head-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.p-head-media picture { display: block; height: 100%; }
.p-head-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--ox, 50%) var(--oy, 50%); transform: scale(var(--z, 1)); transform-origin: var(--ox, 50%) var(--oy, 50%); }
.p-head::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 3rem; background: linear-gradient(180deg, rgba(237, 230, 247, 0), var(--mist)); pointer-events: none; }
.p-head-copy { position: relative; justify-self: start; width: max-content; max-width: min(58rem, 100%); display: grid; gap: 1rem; justify-items: start; }
.p-head-copy::before { content: ""; position: absolute; z-index: -1; inset: -2rem -4rem -2rem -4rem; border-radius: 4rem; background: rgba(237, 230, 247, .5); filter: blur(40px); pointer-events: none; }
.p-lede { max-width: 38rem; font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.45; color: var(--plum); }
.p-head--how { --ox: 52%; --oy: 58%; --z: 1; }
.p-head--why { --ox: 60%; --oy: 55%; --z: 1.3; }
.p-head--research { --ox: 45%; --oy: 60%; --z: 1.6; }
.p-head--privacy { --ox: 70%; --oy: 52%; --z: 1.2; }
.p-head--questions { --ox: 40%; --oy: 56%; --z: 1.45; }
.p-head--join { --ox: 55%; --oy: 62%; --z: 1.8; }
@media (max-width: 860px) {
  .p-head { min-height: clamp(22rem, 60svh, 30rem); padding-top: calc(var(--bar-top) + var(--bar-h) + 1.8rem); padding-bottom: 3rem; }
  .p-head-copy { width: auto; }
  .p-head-copy::before { inset: -1.5rem -1.5rem -1.5rem -1.5rem; filter: blur(28px); }
  .p-head--how, .p-head--why, .p-head--research, .p-head--privacy, .p-head--questions, .p-head--join { --z: 1; }
  .p-head--how { --ox: 50%; --oy: 80%; } .p-head--why { --ox: 50%; --oy: 25%; } .p-head--research { --ox: 50%; --oy: 55%; }
  .p-head--privacy { --ox: 50%; --oy: 38%; } .p-head--questions { --ox: 50%; --oy: 68%; } .p-head--join { --ox: 50%; --oy: 12%; }
}

/* ---------------------------------------------------------------- bands: pale lavender reading surfaces */
.band { position: relative; padding: clamp(2rem, 4vw, 3.5rem) var(--gutter); }
.band--mist2 { background: var(--mist-2); }
.band-in { max-width: 76rem; display: grid; gap: clamp(1rem, 1.8vw, 1.4rem); justify-items: start; }
.band-in > h2 { max-width: 20ch; }
.band-in p, .band-in li { max-width: 62ch; }
.band strong { font-weight: 600; }
.cite { color: var(--plum-soft); text-decoration: none; font-size: .8em; font-weight: 600; vertical-align: super; line-height: 0; padding: 0 .1em; }
.cite:hover { text-decoration: underline; }
.callout { max-width: 62ch; padding: 1.1rem 1.4rem; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--edge); }
.card { border-radius: 24px; padding: clamp(1.25rem, 2.4vw, 2rem); background: var(--card); box-shadow: inset 0 0 0 1px var(--edge), 0 18px 40px -20px rgba(43, 26, 79, .25); }

/* ---------------------------------------------------------------- reading layout: contents list + article (Research, Privacy) */
.read { display: grid; grid-template-columns: minmax(12rem, 17rem) minmax(0, 46rem); gap: clamp(2rem, 6vw, 6rem); padding: clamp(2.5rem, 5vw, 4.5rem) var(--gutter) clamp(3.5rem, 7vw, 6rem); background: var(--mist); }
.toc { position: sticky; top: calc(var(--bar-top) + var(--bar-h) + 1.5rem); align-self: start; display: grid; gap: .15rem; }
.toc p { font: 500 .75rem/1.4 var(--font); text-transform: uppercase; letter-spacing: .14em; color: var(--plum-soft); margin-bottom: .6rem; }
.toc a { display: block; text-decoration: none; padding: .45rem .8rem; border-radius: 999px; font-size: .98rem; color: var(--plum-soft); }
.toc a:hover { background: rgba(43, 26, 79, .08); }
.toc a[aria-current="true"] { background: var(--glow); color: var(--plum); font-weight: 500; }
.prose { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4rem); }
.prose > section, .prose > .intro-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; scroll-margin-top: 6rem; }
.prose h2 { font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.08; letter-spacing: -.025em; }
.prose h3 { font: 600 1.35rem/1.25 var(--font); letter-spacing: -.01em; }
.prose p, .prose li { font-size: 1.125rem; line-height: 1.65; max-width: 68ch; }
.prose ul { padding-left: 1.2rem; display: grid; gap: .6rem; list-style: disc; }
.prose ul li::marker { color: var(--plum-soft); }
.prose strong { font-weight: 600; }
.prose a:not(.cite) { text-decoration-color: rgba(43, 26, 79, .45); text-underline-offset: .2em; }
.prose a:not(.cite):hover { text-decoration-color: var(--plum); }
.stat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.stat div { padding: 1.1rem 1.3rem; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--edge); }
.stat dt { font: 600 clamp(1.7rem, 3vw, 2.4rem)/1.05 var(--font); letter-spacing: -.03em; color: var(--plum); }
.stat dd { margin: .4rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--plum-soft); }
.sources { display: grid; gap: .8rem; padding-left: 1.6rem; list-style: decimal; }
.sources li { font-size: 1rem; line-height: 1.55; overflow-wrap: anywhere; }
.sources a { color: var(--plum); }
@media (max-width: 860px) {
  .read { grid-template-columns: minmax(0, 1fr); padding: 2rem var(--gutter) 3.5rem; }
  .toc { position: static; display: flex; flex-wrap: wrap; gap: .4rem; }
  .toc p { flex-basis: 100%; margin-bottom: .1rem; }
  .toc a { background: rgba(43, 26, 79, .08); }
}
@media (max-width: 520px) { .stat { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- how it works: five short steps in the order a person does them */
.step-in { max-width: 76rem; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.4rem clamp(2rem, 5vw, 5rem); align-items: start; }
.step-text { display: grid; gap: .9rem; justify-items: start; align-content: start; }
.step-text h2 { font-size: clamp(1.9rem, 3.2vw, 3rem); line-height: 1.05; max-width: 16ch; }
.step-kick { font: 500 .8rem/1.4 var(--font); text-transform: uppercase; letter-spacing: .14em; color: var(--plum-soft); }
.step-text p { max-width: 38ch; }
.step-side { display: grid; gap: 1rem; align-content: start; }
.step-wide { grid-column: 1 / -1; }
.checks { display: grid; gap: .9rem; counter-reset: s; }
.checks li { position: relative; padding-left: 3rem; line-height: 1.5; counter-increment: s; max-width: 52ch; }
.checks li::before { content: counter(s); position: absolute; left: 0; top: .1rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--glow); color: var(--plum); font: 600 .95rem/1 var(--font); }
.control { display: grid; gap: .8rem; padding: 1.2rem 1.4rem; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1px var(--edge); }
.control p { max-width: 54ch; }
.control p + p { padding-top: .8rem; border-top: 1px solid var(--edge); }

/* Small drawn screens: the sample reply flow, the voice card, the correction example. Static; labelled "Sample" wherever they show text. */
.ui { display: grid; gap: .6rem; align-content: start; padding: 1rem 1.1rem; border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 1px var(--edge), 0 18px 40px -22px rgba(43, 26, 79, .3); }
.ui .meta { font-size: .72rem; }
.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.flow-step { display: grid; gap: .8rem; align-content: start; }
.flow-cap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .7rem; align-items: start; }
.flow-cap h3 { font: 600 1.15rem/1.3 var(--font); letter-spacing: -.01em; }
.flow-cap p { grid-column: 2; font-size: 1rem; line-height: 1.5; max-width: 34ch; }
.pin { display: grid; place-items: center; flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--glow); color: var(--plum); font: 600 .9rem/1 var(--font); }
.cap-row { display: flex; justify-content: space-between; align-items: start; gap: .6rem; padding: .6rem .8rem; border-radius: 14px; background: var(--mist); font-size: .98rem; line-height: 1.4; }
.cap-row b { flex: none; padding: .15rem .6rem; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--plum-soft); color: var(--plum-soft); font: 500 .8rem/1.4 var(--font); }
.cap-row.is-removed span { text-decoration: line-through; color: var(--plum-soft); }
.cap-row.is-removed b { background: var(--plum-soft); color: var(--card); box-shadow: none; }
.ui-btn { justify-self: start; padding: .65rem 1.3rem; border-radius: 999px; background: var(--glow); color: var(--plum); font: 600 1rem/1 var(--font); }
.ui-drafts { display: grid; gap: .5rem; }
.ui-drafts li { padding: .6rem .85rem; border-radius: 14px; background: var(--mist); font-size: .98rem; line-height: 1.4; }
.ui-drafts li.is-pick { box-shadow: inset 0 0 0 2px var(--plum); }
.ui-drafts .tag { display: block; font: 500 .7rem/1.4 var(--font); text-transform: uppercase; letter-spacing: .12em; color: var(--plum-soft); }
.ui-field { padding: .65rem .9rem; border-radius: 14px; background: #FBF8FF; box-shadow: inset 0 0 0 1.5px var(--plum-soft); font-size: .98rem; line-height: 1.4; }
.ui-field mark { background: var(--cloud-rose); color: var(--plum); border-radius: 4px; padding: 0 .2em; }
.bub { padding: .7rem 1rem; border-radius: 18px; font-size: 1rem; line-height: 1.45; max-width: 30rem; }
.bub--her { background: var(--cloud-rose); color: var(--plum); border-bottom-left-radius: 6px; }
.bub--him { background: var(--lavender); color: var(--plum); justify-self: end; border-bottom-right-radius: 6px; }

/* dictate */
.voice-fig { display: grid; gap: .9rem; }
.voice-pic { aspect-ratio: 16 / 9; max-height: 18rem; width: 100%; border-radius: 24px; overflow: hidden; background: linear-gradient(135deg, var(--lavender), var(--cloud-rose)); }
.voice-pic picture { display: block; height: 100%; }
.voice-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.wave { height: 28px; color: var(--plum-soft); }
.wave svg { width: 100%; height: 28px; }
.vc-row { display: grid; gap: .2rem; font-size: 1.08rem; line-height: 1.45; }
.vc-row--tidy { font-weight: 500; }

/* say it better */
.say { gap: 1rem; }
.say-line { position: relative; isolation: isolate; font: 600 clamp(2rem, 3.6vw, 3.1rem)/1.1 var(--font); letter-spacing: -.03em; padding-top: 2.3rem; max-width: none; white-space: nowrap; }
.say-ctx { position: relative; }
.say-ctx::before { content: ""; position: absolute; z-index: -1; inset: .08em -.1em 0; border-radius: .14em; background: rgba(231, 169, 201, .55); }
.say-bad { position: relative; display: inline-block; }
.say-bad::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.1em; height: .14em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Cpath d='M0 5 Q6 0 12 5 T24 5' fill='none' stroke='%23D08AAF' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / auto 100%; }
.say-line .pin { position: absolute; top: -2.2rem; }
.pin--a { left: 8%; }
.pin--b { left: 62%; }
.pin--c { left: 50%; transform: translateX(-50%); }
.say-notes { display: grid; gap: .55rem; }
.say-notes li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: start; font-size: 1rem; line-height: 1.45; }
.say-strip { display: flex; flex-wrap: wrap; gap: .5rem; max-width: none; }
.say-strip span { padding: .6rem 1rem; border-radius: 14px; background: var(--mist); font: 500 1.05rem/1 var(--font); }
.say-strip .is-main { background: var(--glow); color: var(--plum); }
.say-rule { border: 0; border-top: 1px solid var(--edge); margin: .2rem 0; }
.say-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .7rem; }
.say-pair > div { display: grid; gap: .3rem; align-content: start; padding: .8rem .95rem; border-radius: 16px; background: var(--mist); font-size: 1rem; line-height: 1.45; }
.say-pair > div:last-child { background: var(--cloud-rose); }
.say-pair > div:last-child .meta { color: var(--plum); } /* plum-soft on the rose fill is 4.1:1; plum is well over 4.5 */

/* ---------------------------------------------------------------- the everyday things, and Why it helps lists */
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.8rem, 1.6vw, 1.3rem); width: 100%; margin-top: .4rem; }
.features > div { border-radius: 20px; padding: clamp(1.1rem, 1.8vw, 1.5rem); background: var(--card); box-shadow: inset 0 0 0 1px var(--edge); display: grid; gap: .4rem; align-content: start; }
.features dt { font: 600 clamp(1.15rem, 1.6vw, 1.35rem)/1.2 var(--font); letter-spacing: -.01em; color: var(--plum); }
.features dd { margin: 0; font-size: 1.02rem; line-height: 1.5; color: var(--plum-soft); }
.steps-list { display: grid; gap: 1rem; counter-reset: s; width: 100%; max-width: 62ch; }
.steps-list li { position: relative; padding-left: 3rem; font-size: 1.125rem; line-height: 1.55; counter-increment: s; }
.steps-list li::before { content: counter(s); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--glow); color: var(--plum); font: 600 .95rem/1 var(--font); }
.sample { max-width: 38rem; display: grid; gap: .8rem; }
.sample .tones { display: flex; flex-wrap: wrap; gap: .5rem; }
.sample .tones span { padding: .4rem .9rem; border-radius: 999px; background: var(--mist); font-size: .95rem; }
.sample .tones span.is-on { background: var(--glow); color: var(--plum); }
.sample .drafts { display: grid; gap: .5rem; }
.sample .drafts li { padding: .65rem 1rem; border-radius: 14px; background: var(--mist); font-size: 1rem; line-height: 1.4; }
.sample .drafts li.is-pick { box-shadow: inset 0 0 0 2px var(--plum); }
@media (max-width: 1000px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- questions: real buttons, answers open on click */
.faq { display: grid; gap: clamp(2rem, 4vw, 3.2rem); padding: clamp(2.5rem, 5vw, 4.5rem) var(--gutter) clamp(3.5rem, 7vw, 6rem); background: var(--mist); }
.faq-group { display: grid; gap: .6rem; max-width: 52rem; }
.faq-group > h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.1; margin-bottom: .6rem; }
.qa { border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1px var(--edge); }
.qa.is-open { background: #FBF8FF; }
.qa > h3 { font: inherit; letter-spacing: normal; }
.qa-q { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; padding: 1.1rem 1.3rem; border: 0; border-radius: 20px; background: transparent; text-align: left; cursor: pointer; font: 500 1.2rem/1.3 var(--font); color: var(--plum); }
.qa-q::after { content: "+"; flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--glow); color: var(--plum); font: 600 1.3rem/1 var(--font); transition: transform 200ms var(--ease); }
.qa-q[aria-expanded="true"]::after { transform: rotate(45deg); }
.qa-body { padding: 0 1.3rem 1.3rem; display: grid; gap: .7rem; }
.qa-body[hidden] { display: none; }
.qa-body p { color: var(--plum); max-width: 64ch; }

/* ---------------------------------------------------------------- join */
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; }
.note { font-size: .95rem; color: var(--plum-soft); max-width: 46ch; }

/* ---------------------------------------------------------------- research: the experimental autocorrect demo (moved off the home page) */
.exp { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; padding: clamp(1.1rem, 2.4vw, 1.6rem); border-radius: 26px; background: var(--mist-2); box-shadow: inset 0 0 0 1px var(--edge); }
.prose .exp h3 { font-size: 1.4rem; }
.prose .exp p { font-size: 1rem; line-height: 1.5; }
.exp-flag { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; }
.exp-flag b { padding: .25rem .8rem; border-radius: 999px; background: var(--plum); color: var(--on-sky); font: 600 .78rem/1.4 var(--font); text-transform: uppercase; letter-spacing: .12em; }
.demo { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; padding: 1rem; border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 1px var(--edge); }
.field { display: flex; align-items: center; gap: .4rem; padding: .3rem .35rem .3rem 1rem; border-radius: 999px; background: #FBF8FF; color: var(--plum); box-shadow: inset 0 0 0 1.5px var(--plum-soft); }
.field:focus-within { outline: 2px solid var(--plum); outline-offset: 2px; }
.field-input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--plum); font: 500 1.125rem/1.3 var(--font); padding: .55rem 0; }
.field-input::placeholder { color: var(--plum-soft); }
.field-input:focus { outline: none; }
@media (prefers-reduced-motion: no-preference) { .field-input.word-landed { animation: land 420ms var(--ease); } }
@keyframes land { 0% { transform: scale(.985); } 100% { transform: none; } }
.btn-ghost { border: 0; background: transparent; color: var(--plum-soft); font: 500 .9375rem/1 var(--font); padding: .6rem .8rem; border-radius: 999px; cursor: pointer; }
.btn-ghost:hover { background: rgba(43, 26, 79, .08); }
.strip { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 6px; }
.sugg { min-height: 46px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 .6rem; border: 0; border-radius: 14px; background: var(--mist); color: var(--plum); font: 500 1rem/1 var(--font); transition: background-color 140ms; }
button.sugg:hover { background: var(--lavender); }
.sugg-main { background: var(--glow); }
button.sugg-main:hover { background: var(--cloud-rose); }
.sugg:empty { color: transparent; }
button.sugg { cursor: pointer; }
span.sugg { display: block; text-align: center; line-height: 46px; }
@media (prefers-reduced-motion: no-preference) { .sugg.is-new { animation: pop 260ms var(--ease); } }
@keyframes pop { from { transform: scale(.95); opacity: .4; } to { transform: none; opacity: 1; } }
.keys-kb { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; user-select: none; }
.krow { display: flex; gap: 6px; justify-content: center; }
.key { flex: 1 1 0; min-width: 0; max-width: 3.4rem; min-height: 48px; padding: 0; border: 0; border-radius: 12px; background: var(--lavender); color: var(--plum); font: 500 1.125rem/1 var(--font); cursor: pointer; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), 0 3px 0 rgba(43, 26, 79, .3); transition: transform 100ms var(--ease), background-color 100ms; }
.key:hover { background: #C9BCEB; }
.key.is-down, .key:active { transform: translateY(2px); background: var(--glow); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), 0 1px 0 rgba(43, 26, 79, .3); }
.key-wide { max-width: 4.6rem; flex-grow: 1.5; display: grid; place-items: center; }
.key-ghost { visibility: hidden; }
.key-space { max-width: 20rem; flex: 0 1 20rem; color: var(--plum); } /* plum-soft on the lavender key is 3.7:1 */
.demo-note { min-height: 1.5em; font-size: 1rem; color: var(--plum); }
.demo-note mark { background: var(--cloud-rose); color: inherit; border-radius: 3px; padding: 0 .15em; }
.undo { margin-left: .5rem; border: 0; background: none; color: var(--plum); font: 600 1rem/1 var(--font); text-decoration: underline; cursor: pointer; }
.demo-label { font-size: .875rem; line-height: 1.45; color: var(--plum-soft); }
.how { font-size: .9375rem; color: var(--plum-soft); }
.how summary { cursor: pointer; font-weight: 500; width: max-content; color: var(--plum); }
.how-body { margin-top: .5rem; display: grid; gap: .4rem; }
.ranked { display: grid; gap: 4px; }
.ranked li { display: grid; grid-template-columns: 7rem 1fr; gap: 8px; align-items: center; font-size: .95rem; }
.ranked .bar { height: 6px; border-radius: 3px; overflow: hidden; background: rgba(43, 26, 79, .12); }
.ranked .bar i { display: block; height: 100%; background: var(--plum-soft); transform-origin: left; }
.ranked .is-pick .w { font-weight: 600; color: var(--plum); } .ranked .is-pick .bar i { background: var(--rose); }
.route-pill.is-measured { color: var(--plum); font-weight: 600; }
.demo.is-loading .sugg { color: transparent; background: linear-gradient(100deg, rgba(43, 26, 79, .05) 30%, rgba(43, 26, 79, .14) 50%, rgba(43, 26, 79, .05) 70%) 0 0 / 300% 100%; }
@media (prefers-reduced-motion: no-preference) { .demo.is-loading .sugg { animation: shimmer 1.4s linear infinite; } }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---------------------------------------------------------------- line-by-line reveals (Why it helps), tied to scroll distance */
.rv-on [data-rv] { opacity: 0; }
.rv-on [data-rv].is-live { will-change: transform, opacity; }

/* ---------------------------------------------------------------- phones */
@media (max-width: 860px) {
  .step-in { grid-template-columns: 1fr; }
  .step-text h2 { font-size: 1.9rem; }
  .flow { grid-template-columns: 1fr; }
  .flow-cap p { max-width: none; }
  .say-line { font-size: clamp(1.7rem, 8.4vw, 2.4rem); }
  .say-pair { grid-template-columns: 1fr; }
  .voice-pic { max-height: 17rem; }
  .voice-pic img { object-position: 50% 53%; }
}

/* Reduced motion keeps everything driven by scroll; only time-based motion (hover and open transitions) is skipped. */
@media (prefers-reduced-motion: reduce) { .qa-q::after, .toc a, .key, .sugg { transition: none; } }

/* ---------------------------------------------------------------- Privacy: the page date, and the open-on-click legal details (reuses .qa) */
.prose .p-updated { font-size: 1rem; color: var(--plum-soft); }
.prose .callout ul { gap: .45rem; }
.p-acc { display: grid; gap: .6rem; }
.prose h3[id], .prose li[id] { scroll-margin-top: 6rem; }