/* ==========================================================================
   Chartside additions — header toggle, hero GIF stage, early-access modal.
   Everything reuses the existing Clinic Sky tokens and the nav-link / btn /
   pios-* primitives already on the site. No new colors, no new type.
   ========================================================================== */

/* --- Header: Dictation | Tracking toggle — styled like the nav-link pills --- */
.story-toggle {
  display: inline-flex;
  align-items: center;
  gap: .125rem;
  padding: .1875rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--canvas);
}
.story-toggle__opt {
  font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: .875rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  padding: .3125rem .75rem;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: color .15s ease, border-color .15s ease;
  position: relative;
  isolation: isolate;
}
/* The sliding thumb (William, 2026-09-30): one pill glides under the active
   option like a switch being dragged, and cross-fades warm (Dictation) to
   mint (Tracking) as it goes. chartside.js sizes and places it. */
.story-toggle { position: relative; isolation: isolate; }
.story-toggle__thumb {
  position: absolute; top: .1875rem; left: 0; height: calc(100% - .375rem); width: 0;
  z-index: -1; border-radius: 999px; border: 1px solid rgba(255,255,255,.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(23,24,26,.06), 0 2px 6px rgba(23,24,26,.14);
  background: linear-gradient(120deg, #F3D9C9, #DDE1F2 52%, #CDE5EE);
  overflow: hidden; opacity: 0;
  transition: transform .42s cubic-bezier(.3,.7,.2,1), width .42s cubic-bezier(.3,.7,.2,1);
}
.story-toggle__thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, #BFE6DE, #E6F3F1 52%, #D3E3F6);
  opacity: 0; transition: opacity .42s ease;
}
.story-toggle__thumb.is-ready { opacity: 1; }
[data-story-active="tracking"] .story-toggle__thumb::after { opacity: 1; }
.story-toggle.has-thumb .story-toggle__opt[aria-current="true"] { background: none; border-color: transparent; box-shadow: none; }
.story-toggle__opt:hover { color: var(--ink); }
.story-toggle__opt[aria-current="true"] {
  color: var(--ink);
  border-color: rgba(255,255,255,.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(23,24,26,.06), 0 2px 6px rgba(23,24,26,.14);
}

/* Mobile header (≤700px): the same two-row grid the site already uses —
   mark + button on row one, toggle + link pills on row two. */
@media (max-width: 700px) {
  /* Phones (William, 2026-10-01): logo left, the toggle directly opposite on
     the right, Pricing centered under the toggle. Library lives in the footer. */
  .site-header__inner {
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand toggle";
  }
  /* Phones: no Pricing in the header (William, 2026-10-01); desktop keeps it. */
  .site-header .nav-links { display: none !important; }
  .story-toggle { grid-area: toggle; justify-self: end; }
  .story-toggle__opt { font-size: .78125rem; font-weight: 600; padding: .3125rem .625rem; }
  .nav-links { justify-content: center; justify-self: stretch; }
}
@media (max-width: 400px) {
  .story-toggle__opt { font-size: .71875rem; padding: .25rem .5rem; }
  .nav-links .nav-link { font-size: .6875rem; padding: .3125rem .5rem; }
}

/* --- Hero stage: the Chartside GIF inside the existing .stage frame -------- */
.stage--chartside {
  margin-top: var(--s5);             /* pulled up so the video sits above the fold */
  padding: 0;
  overflow: hidden;
  background: #EDEFF3;
  border: 1px solid rgba(23,24,26,.08);
  /* one clean, neutral shadow — no tint, no tilt */
  box-shadow: 0 24px 56px -16px rgba(23,24,26,.22), 0 2px 6px rgba(23,24,26,.06);
  transform: none;
}
.stage__gif { display: block; width: 100%; height: auto; }
.stage__gif[hidden] { display: none; }
.hero__panel--chartside { padding-top: clamp(var(--s5), 4vw, var(--s6)); isolation: isolate; }
/* Tracking (2026-09-30, William): the hero fades to the mint-and-sky wash of the
   HIPAA guarantee band. Dictation is untouched: this layer is invisible there. */
.hero__panel--chartside::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 55% 60% at 10% 8%, rgba(150,214,200,.55), transparent 70%),
    radial-gradient(ellipse 50% 55% at 92% 92%, rgba(186,210,242,.6), transparent 70%),
    linear-gradient(120deg, #E4F3F0, #F1F6F8 52%, #E6EEF8);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
[data-story-active="tracking"] .hero__panel--chartside::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero__panel--chartside::before, .story-toggle__thumb, .story-toggle__thumb::after { transition: none; }
}
/* The GIF is the selling point, so it sits directly under the headline on
   every screen; description and buttons follow it. Same pieces, new order. */
.hero__panel--chartside { display: flex; flex-direction: column; align-items: center; }
.hero__panel--chartside > * { order: 2; }
.hero__panel--chartside > .pill-label,
.hero__panel--chartside > .hero__headline,
.hero__panel--chartside > .hero__headline + p { order: 0; }
.hero__panel--chartside > .stage--chartside { order: 1; width: 100%; max-width: 920px; margin-top: var(--s5); margin-bottom: var(--s2); }
.hero__panel--chartside > .hero__sub { margin-top: var(--s3); }
/* Swapped in place by the toggle: shown at once, no scroll-reveal fade. */
.anim-on .hero__sub[data-story] { transition: none; }
/* Desktop: description sits between the teal line and the GIF. Phones keep
   the GIF directly under the headline. */
@media (min-width: 701px) {
  .hero__panel--chartside > .hero__sub { order: 0; }
  .hero__panel--chartside > .stage--chartside { margin-top: var(--s5); }
}
@media (max-width: 700px) {
  .hero__panel--chartside > .stage--chartside { margin-top: var(--s4); }
}

/* "Chartside" in the teal line: bold, with a slow light sweep across the
   letters themselves (same rhythm as the Get Early Access button's sheen). */
.hero__brand {
  font-weight: 700;
  background: linear-gradient(115deg,
    var(--teal-deep) 0%, var(--teal-deep) 42%, #6FCFC3 50%, var(--teal-deep) 58%, var(--teal-deep) 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: brand-sheen 7s ease-in-out infinite;
}
@keyframes brand-sheen {
  0%, 60% { background-position: 100% 0; }
  90%, 100% { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) { .hero__brand { animation: none; background: none; color: inherit; } }
/* Phones: "Introducing Chartside" only, for space. */
/* "Chartside" a touch heavier than "Introducing" (William, 2026-09-30). */
.hero__brand { font-weight: 700; }

/* --- Early-access modal: existing form primitives in a card ---------------- */
.ea-modal {
  width: min(440px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--float-shadow);
  background: var(--canvas);
  color: var(--body);
}
.ea-modal::backdrop { background: rgba(23, 24, 26, .45); }
.ea-modal__body { padding: var(--s5); position: relative; }
.ea-modal__close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--hairline); background: var(--canvas);
  color: var(--muted); cursor: pointer; display: grid; place-items: center;
}
.ea-modal__close:hover { color: var(--ink); }
.ea-modal .h3 { padding-right: 40px; }
.ea-modal__lede { margin-top: var(--s2); font-size: .9375rem; color: var(--muted); line-height: 1.55; }
.ea-modal form { margin-top: var(--s4); }
.ea-roles { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ea-roles label { position: relative; }
.ea-roles input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ea-roles span {
  display: block; text-align: center;
  font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: .9375rem; font-weight: 600; color: var(--body);
  padding: .625rem .5rem; border: 1px solid #E1E7E7; border-radius: 12px; background: #fff;
  cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.ea-roles input:checked + span { border-color: var(--teal); background: var(--teal-tint); color: var(--teal-deep); }
.ea-roles input:focus-visible + span { outline: 2px solid var(--teal-deep); outline-offset: 2px; }
.ea-check { display: flex; align-items: center; gap: .625rem; font-size: .9375rem; color: var(--body); cursor: pointer; margin-top: .875rem; }
.ea-check input { width: 18px; height: 18px; accent-color: var(--teal-deep); }
.ea-modal .btn { width: 100%; margin-top: var(--s4); }
.ea-modal .btn[disabled] { opacity: .6; cursor: progress; }
.ea-fine { margin-top: var(--s3); font-size: .8125rem; color: var(--muted); text-align: center; line-height: 1.5; }
.ea-done { text-align: center; padding: var(--s2) 0; }
.ea-done .pill-label { margin-bottom: var(--s3); }

/* ==========================================================================
   Homepage sections below the hero — Chartside positioning. Built from the
   site's own primitives (.card, .grid, .pill-label, .qpill, .step__num,
   .guarantee, .faq); the small glass pieces use the approved glass tokens.
   ========================================================================== */
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--s5), 5vw, var(--s7)); align-items: center; }
.card .h4 { margin-top: 0; }
.serif { font-family: Georgia, "Times New Roman", serif; }
mark { background: rgba(43,179,163,.16); color: inherit; border-radius: 3px; padding: 0 2px; }

/* Glass island — light frosted glass, glass-teal → glass-sky tint */
.gi {
  display: inline-flex; align-items: center; gap: .5rem;
  height: 44px; padding: 0 .9rem 0 .5rem; border-radius: 999px;
  background: linear-gradient(90deg, rgba(18,140,140,.16), rgba(91,184,212,.16)), rgba(255,255,255,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(255,255,255,.5), 0 8px 22px rgba(16,35,46,.16);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  font-size: .8125rem; color: #10232E; white-space: nowrap; max-width: 100%;
}
.gi__mic { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; background: linear-gradient(90deg, var(--glass-teal), var(--glass-sky)); box-shadow: 0 0 0 3px rgba(18,140,140,.16); }
.gi__bars { display: inline-flex; align-items: center; gap: 2px; height: 18px; flex: none; }
.gi__bars i { display: block; width: 2.5px; border-radius: 2px; background: var(--glass-teal); animation: gi-bars .9s ease-in-out infinite; transform-origin: center; }
.gi__bars i:nth-child(1) { height: 12px; } .gi__bars i:nth-child(2) { height: 18px; animation-duration: .7s; background: #2FA3AC; }
.gi__bars i:nth-child(3) { height: 10px; animation-duration: 1.1s; background: #45AFC4; } .gi__bars i:nth-child(4) { height: 16px; animation-duration: .8s; background: var(--glass-sky); }
.gi__bars i:nth-child(5) { height: 9px; animation-duration: 1s; background: var(--glass-sky); }
@keyframes gi-bars { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
.gi__text { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gi__key { font-size: .6875rem; color: #4A6070; flex: none; }
.gi--idle { height: 34px; padding: 0 .75rem; gap: .4rem; }
.gi--idle .gi__mic { width: 8px; height: 8px; box-shadow: none; }
.gi--idle .gi__mic svg { display: none; }
.gi--armed { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1.5px rgba(18,140,140,.45), 0 8px 22px rgba(16,35,46,.16); }
.gi__insert { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 8px; color: #fff; font-weight: 700; font-size: .75rem; background: linear-gradient(90deg, var(--glass-teal), var(--glass-sky)); }
.gl-demo { margin-top: var(--s4); display: flex; justify-content: center; min-height: 52px; align-items: center; }
.gl-demo--note { text-align: left; font-family: Georgia, serif; font-size: .875rem; line-height: 1.6; color: #1E2B38; background: #fff; border: 1px solid var(--hairline); border-radius: 10px; padding: var(--s3); }
.keycap { display: inline-block; padding: .5rem 1rem; border-radius: 10px; background: #F2F4F7; box-shadow: 0 3px 0 #C9D1D8, inset 0 1px 0 #fff; color: var(--teal-deep); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .gi__bars i { animation: none; } }

/* Dot Phrase library + dictionary lists */
.dp-list, .dict { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.dp-list li { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: baseline; padding: .625rem .5rem; border-top: 1px solid var(--hairline); font-size: .875rem; color: var(--body); }
.dp-list li .mono { color: var(--ink); font-size: .8125rem; }
.dp-list li span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-list li em { font-style: normal; font-family: var(--mono); font-size: .75rem; color: var(--muted); }
.dp-list li.is-hot { background: var(--teal-tint); border-radius: 8px; border-top-color: transparent; }
.dict li { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: .75rem; align-items: center; padding: .5rem 0; border-top: 1px solid var(--hairline); font-size: .9375rem; }
.dict li s { color: var(--muted); } .dict li span { color: var(--faint); } .dict li b { color: var(--ink); }
.dict li em { font-style: normal; display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; color: var(--teal-deep); }

/* Copilot strip */
.strip { display: grid; grid-template-columns: auto auto 1fr auto; gap: var(--s4); align-items: center; }
.strip__code { font-family: var(--display); font-weight: 800; font-size: 1.75rem; letter-spacing: -.02em; color: var(--ink); line-height: 1.1; margin-top: .25rem; }
.strip__code small { font-family: var(--sans); font-weight: 600; font-size: .8125rem; color: var(--teal-deep); letter-spacing: 0; }
.strip__sub { font-size: .8125rem; color: var(--muted); }
.strip__arrow { font-size: 1.5rem; color: var(--teal-deep); }
.strip__quote { margin-top: .5rem; font-size: .8125rem; font-style: italic; color: var(--body); display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.strip__insert { font-style: normal; display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .7rem; border-radius: 8px; color: #fff; font-weight: 700; font-size: .75rem; background: linear-gradient(90deg, var(--glass-teal), var(--glass-sky)); }
.strip__col--end { border-left: 1px solid var(--hairline); padding-left: var(--s4); }

/* Tally tiles */
.tally__num { font-size: 2rem; color: var(--ink); margin: .25rem 0 .5rem; }
.tally__num small { font-size: .875rem; color: var(--muted); font-weight: 500; }

/* App windows */
.appwin { padding: 0; overflow: hidden; }
.appwin__bar { display: flex; align-items: center; gap: .375rem; padding: .625rem var(--s3); font-size: .75rem; color: var(--muted); border-bottom: 1px solid var(--hairline); background: var(--canvas-alt); }
.appwin__bar i { width: 8px; height: 8px; border-radius: 50%; background: #E1E7E7; } .appwin__bar i:first-child { background: var(--orange); margin-right: -0.125rem; } .appwin__bar i:nth-child(2) { background: #E0A93E; } .appwin__bar i:nth-child(3) { background: var(--teal); margin-right: .375rem; }
.appwin__body { padding: var(--s3) var(--s3) var(--s4); font-size: .875rem; line-height: 1.6; color: var(--ink); min-height: 96px; }
.appwin .gi { margin: 0 var(--s3) var(--s3); height: 36px; font-size: .75rem; }

/* Data flow rows */
.flow { display: grid; gap: var(--s2); }
.flow__row { display: grid; grid-template-columns: 150px 1fr auto 1fr auto 1fr auto; gap: var(--s2); align-items: center; padding: var(--s3) var(--s4); }
.flow__what { color: var(--ink); }
.flow__step { font-size: .875rem; color: var(--body); line-height: 1.4; padding: .5rem .75rem; border: 1px solid var(--hairline); border-radius: 10px; background: var(--canvas); }
.flow__step small { display: block; font-size: .75rem; color: var(--muted); }
.flow__arrow { color: var(--faint); }

/* Pricing card */
.price { max-width: 460px; margin: var(--s6) auto 0; padding: 0; overflow: hidden; text-align: left; }
.price__charter { background: linear-gradient(90deg, var(--teal), var(--sky)); color: #fff; font-size: .8125rem; font-weight: 600; padding: .625rem var(--s4); }
.price__charter span { font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; margin-right: .5rem; }
.price__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s4) var(--s4) 0; }
.price__seg { display: inline-flex; padding: 3px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--canvas-alt); }
.price__seg button { font: inherit; font-size: .8125rem; font-weight: 600; color: var(--muted); background: none; border: 0; padding: .375rem .75rem; border-radius: 999px; cursor: pointer; }
.price__seg button[aria-checked="true"] { background: var(--teal-deep); color: #fff; }
.price__amt { padding: var(--s3) var(--s4) 0; display: flex; align-items: baseline; gap: .375rem; }
.price__amt .mono { font-family: var(--display); font-weight: 800; font-size: 3rem; letter-spacing: -.03em; color: var(--ink); line-height: 1; }
.price__amt small { color: var(--muted); }
.price > .card__text { padding: .5rem var(--s4) 0; }
.price__list { list-style: none; margin: var(--s3) 0 0; padding: var(--s3) var(--s4) 0; border-top: 1px solid var(--hairline); display: grid; gap: .5rem; }
.price__list li { display: flex; align-items: center; gap: .625rem; color: var(--ink); font-weight: 500; }
.price__list svg { color: var(--teal-deep); flex: none; }
.price > .btn { display: flex; margin: var(--s4) var(--s4) 0; }
.price__fine { padding: var(--s3) var(--s4) var(--s4); text-align: center; font-size: .8125rem; color: var(--muted); }
.price__fine a { color: var(--muted); }

@media (max-width: 900px) {
  .grid--3 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .strip { grid-template-columns: 1fr; }
  .strip__arrow { display: none; }
  .strip__col--end { border-left: 0; padding-left: 0; border-top: 1px solid var(--hairline); padding-top: var(--s3); }
  .flow__row { grid-template-columns: 1fr; }
  .flow__arrow { display: none; }
}
@media (max-width: 720px) {
  .dict li { grid-template-columns: 1fr auto 1fr; } .dict li em { display: none; }
  .dp-list li span:nth-child(2) { display: none; }
  .price__head { flex-direction: column; align-items: flex-start; }
}

/* v2 section graphics (assets/chartside) — sit inside the section like a card */
.v2fig { margin: var(--s6) auto 0; max-width: 1040px; }
.v2fig picture, .v2fig img { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--card-shadow); border: 1px solid var(--hairline); }
.split > .v2fig { margin: 0; }
.stage--chartside video { display: block; width: 100%; height: auto; background: #EDEFF3; }
.stage--chartside video[hidden] { display: none; }
/* Both hero videos stay loaded; the inactive one sits invisibly on top of the
   stage so a toggle is an instant cross-fade, never a load (William, 2026-09-30). */
/* The stage owns its size (the chart window, 1240x760); both videos are laid
   over it absolutely, so swapping one for the other can never collapse it.
   (Safari collapsed the stage to 0px on toggle: the white screen.) */
.stage--chartside { position: relative; aspect-ratio: 1240 / 760; }
.stage--chartside.is-portrait-stage { aspect-ratio: 720 / 880; }
.stage--chartside .stage-link { position: absolute; inset: 0; }
.stage--chartside video { transition: opacity .3s ease; }
.stage--chartside video.is-off { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .stage--chartside video { transition: none; } }

/* Library: the first shelf gets its own ombre so it doesn't repeat the hero wash */
.l1-panel--library { background: linear-gradient(120deg, #E3F4F2, #E9F1FB 52%, #EEEAFD); }
/* Charter banner: one line at card width */
.price__charter { font-size: .78125rem; white-space: nowrap; padding: .625rem var(--s3); }
.price__charter span { letter-spacing: .05em; margin-right: .5rem; }
@media (max-width: 420px) { .price__charter { font-size: .6875rem; } }
/* The slide-out tab's picture: a product still, not a logo */
.tab-thumb--pic { padding: 0; overflow: hidden; }
.tab-thumb--pic img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* The hero video carries its own pastel margin around the chart window
   (window = 1240×760 at 100,70 in a 1440×900 frame). Crop to the window so
   the hero shows one background, not a wash inside a wash. */
.stage--chartside { border-radius: 24px; }
.stage--chartside video {
  position: absolute;
  left: -8.065%;
  top: -9.21%;              /* 70/760 of the stage: the window's top edge */
  width: 116.13%;
  height: auto;
  max-width: none;
  margin: 0;
}

/* --- Phone hero: the video is the point. It bleeds to the panel's edges, and
   the headline/teal line tighten so the description peeks above the fold. --- */
@media (max-width: 700px) {
  .hero__panel--chartside { padding-top: var(--s4); padding-bottom: var(--s4); }
  .hero__panel--chartside > .pill-label { font-size: .6875rem; margin-bottom: var(--s2); }
  .hero__panel--chartside > .hero__headline { font-size: clamp(2.1rem, 9.6vw, 2.6rem); line-height: 1.04; }
  .hero__panel--chartside > .hero__headline + p { font-size: 1rem; margin-top: var(--s2); }
  .hero__panel--chartside > .stage--chartside { margin: var(--s3) 0 var(--s1); border-radius: 18px; }
  .hero__panel--chartside > .hero__sub { font-size: 1rem; margin-top: var(--s3); }
}
@media (max-width: 700px) {
  /* Phones: crop the chart's note list off the left so the island, Dot Phrase
     card, Copilot chip and tally fill the frame (window x 240–1240 of 1240). */
  .stage--chartside video.is-portrait { left: 0; top: 0; width: 100%; margin: 0; }
}

/* The hero visual is a quiet link to pricing: no link styling, no pointer. */
.stage-link { display: block; color: inherit; text-decoration: none; cursor: default; }
.stage-link:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 3px; }

/* The animated "Chartside" is a quiet link to the pricing card: no link styling. */
.hero__brand-link { color: inherit; text-decoration: none; cursor: default; }
.hero__brand-link:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 3px; border-radius: 4px; }

/* ==========================================================================
   2026-09-30 (William approved): the Mac button + the speech ribbon.
   ========================================================================== */

/* --- "Get CHARTSIDE for Mac": the one mint button on the site ------------- */
/* The fill is the glass island's own mint (#D3E8EB, sampled from the app);
   ink on it is ~14:1. No other button uses this color. */
.mac-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
  margin-top: var(--s4);
  padding: .875rem 1.5rem .875rem 1.25rem;
  font-family: var(--sans); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  background: #D3E8EB;
  border: 1px solid var(--ink);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 6px 18px -8px rgba(23,24,26,.35);
  transition: transform .18s ease, box-shadow .18s ease;
}
.mac-cta:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 10px 22px -8px rgba(23,24,26,.4); }
.mac-cta:active { transform: translateY(0); }
.mac-cta:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 3px; }
.mac-cta__apple { flex: none; margin-top: -3px; }
.hero__panel--chartside > .hero__ctas { order: 0; }
/* Mac + Windows side by side, same size (William, 2026-09-30). */
.hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin-top: var(--s4); }
.hero__ctas .mac-cta, .hero__ctas .win-cta { margin-top: 0; width: 19.5rem; }
/* The Windows ghost: dashed teal outline, no fill, muted ink. Not yet
   available, but it still opens early access with Windows ticked. */
.win-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
  padding: .875rem 1.5rem .875rem 1.25rem;
  font-family: var(--sans); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--muted); text-decoration: none; white-space: nowrap;
  background: rgba(255,255,255,.18);
  border: 1.5px dashed rgba(15,122,110,.55);
  border-radius: 14px;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.win-cta__label { display: inline-grid; }
.win-cta__label > span { grid-area: 1 / 1; text-align: center; transition: opacity .18s ease; }
.win-cta__hover { opacity: 0; }
/* Hover: icon, outline and "Get notified" take a deeper shade of the Mac button's mint (#3A7F8A, same hue as #D3E8EB, 4.8:1 on white); fill is clean white (William). */
.win-cta:hover, .win-cta:focus-visible { color: #3A7F8A; border-style: solid; border-color: #3A7F8A; background: #fff; }
.win-cta:hover .win-cta__rest, .win-cta:focus-visible .win-cta__rest { opacity: 0; }
.win-cta:hover .win-cta__hover, .win-cta:focus-visible .win-cta__hover { opacity: 1; }
.win-cta:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 3px; }
.win-cta__logo { flex: none; }
@media (max-width: 700px) {
  .hero__ctas { margin-top: var(--s3); flex-direction: column; align-items: stretch; width: 100%; max-width: 20rem; }
  .hero__ctas .mac-cta, .hero__ctas .win-cta { font-size: 1rem; padding: .8125rem 1.25rem .8125rem 1.125rem; width: auto; }
  /* one CTA on phones: the Mac button replaces the header's Get Early Access */
  .site-header .hdr-cta { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .mac-cta, .win-cta, .win-cta__label > span { transition: none; } }

/* --- Flow ribbon (2026-09-30, rebuilt): what you say curls in as faint
       text, passes through the glass island, and leaves as clean text on
       an inkwell (#31363A) ribbon. Chips above the island name each edit.
       Its own band under the hero so it never competes with the video.
       The SVG is a fixed 1200x300 composition: phones see its centre
       (Wispr-style crop), wide screens see it whole. chartside.js drives
       the text marquees, the chips and the waveform; it pauses off-screen. */
.flow { position: relative; overflow: hidden; padding-block: clamp(8px, 2vw, 24px) clamp(24px, 4vw, 48px); }
.flow__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.flow__stage {
  --flow-w: clamp(860px, 100vw, 1320px);
  position: relative; width: var(--flow-w); margin-left: calc(50% - var(--flow-w) / 2);
  aspect-ratio: 1200 / 300;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.flow__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flow__raw { font-family: var(--sans); font-size: 24px; font-weight: 600; letter-spacing: -0.005em; fill: #31363A; opacity: .3; }
/* 2026-09-30 (William): ribbon face = the raw-text gray on the island's left
   (#31363A at 30% on white = #C1C3C4); a darker gray underside gives it depth. */
.flow__base { fill: none; stroke: url(#flow-base-fade); stroke-width: 39; stroke-linecap: butt; transform: translateY(5px); }
.flow__band { fill: none; stroke: url(#flow-fade); stroke-width: 39; stroke-linecap: butt; }
.flow__clean { font-family: var(--sans); font-size: 22px; font-weight: 600; letter-spacing: -0.005em; fill: #31363A; }
/* Centered on the ribbon face with a baseline shift (dy on the <text>), not
   dominant-baseline: Safari ignores dominant-baseline on textPath. */

/* The island: the app's own glass pill at the app's own proportions. */
.flow__island { position: absolute; left: 50%; top: 58.67%; transform: translate(-50%, -50%); z-index: 2; display: flex; flex-direction: column; align-items: center; }
.flow__pill {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  height: 64px; padding: 0 24px 0 10px; border-radius: 999px;
  background: #D3E8EB;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1.5px rgba(255,255,255,.75), 0 0 0 1px rgba(18,140,140,.12), 0 14px 34px -6px rgba(16,35,46,.22), 0 3px 8px rgba(16,35,46,.08);
}
.flow__mic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #128C8C, #5BB8D4); box-shadow: 0 0 0 5px rgba(18,140,140,.13); }
.flow__bars { display: inline-flex; align-items: center; gap: 4px; height: 28px; }
.flow__bars i { display: block; width: 4px; height: 28px; border-radius: 3px; background: #128C8C; transform: scaleY(.3); transform-origin: 50% 50%; transition: transform 90ms linear; }
.flow__bars i:nth-child(3n+2) { background: #2A9EA9; }
.flow__bars i:nth-child(3n) { background: #45AFC4; }

/* Edit chips: one at a time, rising out of the island. */
.flow__chips { position: absolute; bottom: calc(100% + 12px); left: 50%; width: 0; height: 34px; }
.flow__chip {
  position: absolute; left: 0; bottom: 0; transform: translate(-50%, 8px) scale(.96); opacity: 0;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  height: 32px; padding: 0 14px; border-radius: 999px;
  font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: -0.005em;
  transition: opacity .32s ease, transform .42s cubic-bezier(.2,.8,.2,1);
}
.flow__chip.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.flow__chip.is-off { opacity: 0; transform: translate(-50%, -10px) scale(.98); }
.flow__chip--done { background: #0F7A6E; color: #fff; box-shadow: 0 8px 18px -8px rgba(15,122,110,.6); }
.flow__chip--swap { background: #fff; color: #6E7276; box-shadow: 0 0 0 1px rgba(49,54,58,.1), 0 8px 18px -10px rgba(49,54,58,.35); }
.flow__chip--swap b { color: #31363A; font-weight: 700; }
.flow__chip--strike { background: none; padding: 0 6px; font-size: 20px; color: #31363A; }
.flow__chip--strike s { text-decoration: none; position: relative; }
.flow__chip--strike s::after { content: ""; position: absolute; left: -4px; right: -4px; top: 55%; height: 3px; border-radius: 3px; background: #5BB8D4; transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s .12s ease; }
.flow__chip--strike.is-on s::after { transform: scaleX(1); }

@media (max-width: 700px) {
  .flow { padding-block: 0 var(--s4); }
  .flow__stage { --flow-w: 640px; margin-left: calc(50% - var(--flow-w) / 2); } /* island dead-centre on phones (William, 2026-10-01) */
  .flow__raw { font-size: 29px; }
  .flow__clean { font-size: 27px; }
  .flow__pill { height: 42px; gap: 8px; padding: 0 14px 0 6px; }
  .flow__mic { width: 30px; height: 30px; box-shadow: 0 0 0 3px rgba(18,140,140,.13); }
  .flow__mic svg { width: 14px; height: 14px; }
  .flow__bars { gap: 3px; height: 18px; }
  .flow__bars i { width: 3px; height: 18px; }
  .flow__bars i:nth-child(n+8) { display: none; }
  .flow__chip { font-size: 13.5px; height: 29px; padding: 0 12px; }
  .flow__chip--strike { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .flow__chip, .flow__chip--strike s::after, .flow__bars i { transition: none; }
}

/* Phones: one early-access button in the hero (the Mac button). The hero's
   own Get Early Access goes; See Pricing stays. */
@media (max-width: 700px) {
  .hero__cta .btn[data-early-access] { display: none; }
}

/* --- Phones: a quiet "See pricing" edge tab (William, 2026-10-01) ----------
   Vertical, on the right edge beside the hero, in the old early-access tab's
   ink with white text. Slides in 1.5 s after landing; homepage only. */
.price-tab { display: none; }
@media (max-width: 700px) {
  .price-tab {
    display: block; position: fixed; z-index: 890; right: 0; top: 22vh;
    transform: translateX(110%);
    background: #1694A6; color: #fff; text-decoration: none;   /* logo teal (William chose over ink) */
    border-radius: 8px 0 0 8px; padding: .75rem .34375rem;   /* ~15% wider so it overlaps the hero card edge */
    font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: .625rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    writing-mode: vertical-rl;
    box-shadow: 0 6px 16px -8px rgba(23,24,26,.45);
    opacity: .92;
    transition: transform .55s cubic-bezier(.2,.8,.2,1);
  }
  .price-tab.is-open { transform: translateX(0); }
  .price-tab:active { background: #12808F; }
}
@media (prefers-reduced-motion: reduce) { .price-tab { transition: none; } }

/* --- Phone hero, Wispr-style order (William, 2026-10-02) ----------------------
   eyebrow "Chartside Medical Dictation" -> headline -> one-line description ->
   Mac / Windows buttons -> the speech ribbon -> the hero video. Desktop unchanged. */
.only-phone { display: none; }
@media (max-width: 700px) {
  .only-phone { display: inline; }
  .only-desk { display: none; }
  .hero__panel--chartside > .hero__intro { display: none; }
  .hero__panel--chartside > .hero__sub { order: 0; margin-top: var(--s3); }
  .hero__panel--chartside > .hero__ctas { order: 0; }
  .hero__panel--chartside > .flow { order: 1; align-self: stretch; margin-inline: calc(-1 * clamp(var(--s3), 4vw, var(--s6))); margin-top: var(--s3); padding-block: 0; }
  .hero__panel--chartside > .stage--chartside { order: 1; }
}

/* Phone hero, pass 2: eyebrow pill sits higher in the card; the audience line
   follows it as plain text in the pill's own muted color. */
.only-phone-block { display: none; }
@media (max-width: 700px) {
  .only-phone-block { display: block; }
  .hero__panel--chartside { padding-top: var(--s3) !important; }
  .hero__panel--chartside > .pill-label { margin-bottom: 0; }
  .hero__panel--chartside > .pill-label { margin-bottom: var(--s2); }
  /* Order under the buttons: ribbon (1), audience line (2), video (3), the rest (4). */
  .hero__panel--chartside > * { order: 4; }
  .hero__panel--chartside > .stage--chartside { order: 3; }
  .hero__panel--chartside > .hero__audience {
    order: 2; margin: 0 0 var(--s3); white-space: nowrap;
    font-size: .625rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    color: var(--muted);
  }
}

/* Phones: the hero's old See Pricing / Get Early Access row under the video is
   gone (the Mac button and the See-pricing edge tab cover it). */
@media (max-width: 700px) { .hero__panel--chartside > .hero__cta { display: none !important; } } /* beats its inline display:flex */

/* Phones: the charter line in the body face, on one line. */
@media (max-width: 700px) {
  .hero__panel--chartside > .hero__charter { font-family: var(--sans); font-size: .875rem !important; white-space: nowrap; }
}

/* The charter price links to /pricing, underlined (William, 2026-10-02). */
.charter-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.charter-link:hover { color: var(--teal-deep); }

/* --- How it works, card 01: Shift is held, then Option is tapped (William,
   2026-10-02). One 6 s loop: Shift goes down and stays down ("hold"), lifts;
   then Option taps twice ("tap"). Static keys under reduced motion. ------- */
.gl-keys { display: flex; justify-content: center; gap: var(--s3); flex-wrap: wrap; }
.gl-key { display: inline-flex; flex-direction: column; align-items: center; gap: .375rem; }
.gl-key__cue { font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); opacity: .35; }
.kc-shift, .kc-opt { transition: none; }
@media (prefers-reduced-motion: no-preference) {
  .kc-shift { animation: kc-hold 6s ease-in-out infinite; }
  .kc-opt { animation: kc-tap 6s ease-in-out infinite; }
  .gl-key:first-child .gl-key__cue { animation: cue-hold 6s ease-in-out infinite; }
  .gl-key:last-child .gl-key__cue { animation: cue-tap 6s ease-in-out infinite; }
}
@keyframes kc-hold {
  0%, 6% { transform: translateY(0); box-shadow: 0 3px 0 #C9D1D8, inset 0 1px 0 #fff; background: #F2F4F7; }
  10%, 38% { transform: translateY(3px); box-shadow: 0 0 0 #C9D1D8, inset 0 1px 0 #fff; background: #E3F1EF; }
  42%, 100% { transform: translateY(0); box-shadow: 0 3px 0 #C9D1D8, inset 0 1px 0 #fff; background: #F2F4F7; }
}
@keyframes kc-tap {
  0%, 52% { transform: translateY(0); box-shadow: 0 3px 0 #C9D1D8, inset 0 1px 0 #fff; background: #F2F4F7; }
  54%, 57% { transform: translateY(3px); box-shadow: 0 0 0 #C9D1D8, inset 0 1px 0 #fff; background: #E3F1EF; }
  59%, 76% { transform: translateY(0); box-shadow: 0 3px 0 #C9D1D8, inset 0 1px 0 #fff; background: #F2F4F7; }
  78%, 81% { transform: translateY(3px); box-shadow: 0 0 0 #C9D1D8, inset 0 1px 0 #fff; background: #E3F1EF; }
  83%, 100% { transform: translateY(0); box-shadow: 0 3px 0 #C9D1D8, inset 0 1px 0 #fff; background: #F2F4F7; }
}
@keyframes cue-hold { 0%, 6% { opacity: .35; } 10%, 38% { opacity: 1; color: var(--teal-deep); } 42%, 100% { opacity: .35; } }
@keyframes cue-tap { 0%, 52% { opacity: .35; } 54%, 83% { opacity: 1; color: var(--teal-deep); } 87%, 100% { opacity: .35; } }

/* --- Card 03: the dictated sentence is highlighted as it lands, a green sweep
   running left to right line by line (one background laid across the line
   fragments). Runs when the card scrolls into view. ------------------------- */
.gl-demo--note[data-sweep] mark { background-color: transparent; background-image: linear-gradient(rgba(43,179,163,.16), rgba(43,179,163,.16));   /* same green as the static highlight */ background-repeat: no-repeat; background-size: 0% 100%; }
.gl-demo--note[data-sweep].is-swept mark { background-size: 100% 100%; transition: background-size 1.6s cubic-bezier(.45,.05,.35,1) .25s; }
@media (prefers-reduced-motion: reduce) { .gl-demo--note[data-sweep] mark { background-size: 100% 100%; } }

/* Card 01, pass 2: each press also throws the hero's click ripple — one teal
   ring that rises fast then expands and fades (44pt, ~375 ms), same as the
   hero videos. Synced to the key loop: Shift at 10%, Option at 54% and 78%. */
.gl-key .keycap { position: relative; }
.gl-key .keycap::after, .gl-key .keycap::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%; border: 2px solid #1694A6; opacity: 0; transform: scale(.4); pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .kc-shift::after { animation: rip-shift 6s linear infinite; }
  .kc-opt::after { animation: rip-opt1 6s linear infinite; }
  .kc-opt::before { animation: rip-opt2 6s linear infinite; }
}
@keyframes rip-shift { 0%, 9.4% { opacity: 0; transform: scale(.4); } 10% { opacity: .9; transform: scale(.55); } 16.25% { opacity: 0; transform: scale(2.1); } 100% { opacity: 0; transform: scale(2.1); } }
@keyframes rip-opt1 { 0%, 53.4% { opacity: 0; transform: scale(.4); } 54% { opacity: .9; transform: scale(.55); } 60.25% { opacity: 0; transform: scale(2.1); } 100% { opacity: 0; transform: scale(2.1); } }
@keyframes rip-opt2 { 0%, 77.4% { opacity: 0; transform: scale(.4); } 78% { opacity: .9; transform: scale(.55); } 84.25% { opacity: 0; transform: scale(2.1); } 100% { opacity: 0; transform: scale(2.1); } }

/* --- On your Mac (William, 2026-10-02): the section is pinned while you
   scroll; it holds the whole laptop, zooms toward the glass pill, holds, then
   releases. Phones 2.4x; desktop 1.9x with the laptop sized to fit the pinned
   view under the headline. Reduced motion: phones the close crop, desktop the
   whole laptop, no pin. chartside.js drives --z. */
#on-your-mac .mac-pin { height: 290vh; }
#on-your-mac .mac-pin__stick { position: sticky; top: 84px; }
#on-your-mac .mac-pin__stick .v2fig { margin-top: var(--s4); max-width: min(820px, 100%); margin-inline: auto; }
#on-your-mac .v2fig picture { display: block; overflow: hidden; border-radius: var(--radius); box-shadow: var(--card-shadow); border: 1px solid var(--hairline); }
#on-your-mac .v2fig picture { background: #fff; }
#on-your-mac .v2fig img { border: 0; border-radius: 0; box-shadow: none; transform: translateY(var(--ty, 0%)) scale(var(--z, 1)); transform-origin: 50% 80%; will-change: transform; clip-path: inset(0 0 var(--clip, 0%) 0); }
@media (max-width: 700px) {
  #on-your-mac { padding-top: var(--s5); padding-bottom: var(--s2); }
  #on-your-mac + #dot-phrases { padding-top: var(--s4); }
  #on-your-mac .mac-pin { height: 185vh; }
  #on-your-mac .mac-pin__stick { top: 76px; }
  /* Phones (William, 2026-10-02): no card frame and no white chart. As it zooms, the
     image is trimmed to the two glass boxes and they lift up under the headline, then
     scroll off with the page. chartside.js drives --k (0 whole laptop -> 1 boxes only). */
  #on-your-mac .mac-pin__stick .v2fig { margin-bottom: calc(var(--k, 0) * -26vw); } /* close the space the trimmed chart leaves */
  #on-your-mac .v2fig picture { border: 0; box-shadow: none; background: transparent; overflow: hidden; border-radius: 14px; }
  #on-your-mac .v2fig img {
    border-radius: 14px;
    transform: translateY(calc(var(--k, 0) * -37%)) scale(var(--z, 1));
    clip-path: inset(calc(var(--k, 0) * 61.6%) calc(var(--k, 0) * 28.9%) calc(var(--k, 0) * 14.6%) calc(var(--k, 0) * 28.9%) round calc(14px - var(--k, 0) * 9px));
  }
}
@media (prefers-reduced-motion: reduce) {
  #on-your-mac .mac-pin { height: auto; }
  #on-your-mac .mac-pin__stick { position: static; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 700px) {
  #on-your-mac .v2fig img { --k: 1; transform: translateY(-37%) scale(2.4); }
}

/* --- Dot Phrases scene (William, 2026-10-02): one live, readable moment in
   place of the old busy graphic. Plays when it scrolls into view:
   s1 words in the pill -> "dot hf discharge plan" -> the Library box rises with
   the match ringed -> the phrase lands in the note with the green sweep -> the
   box settles away and dictation carries on. Reduced motion: the end state. */
.dpx { margin: 0; position: relative; border-radius: var(--radius); padding: clamp(18px, 3vw, 28px); background: linear-gradient(120deg, #F3D9C9, #DDE1F2 52%, #CDE5EE); box-shadow: var(--card-shadow); display: flex; flex-direction: column; gap: 18px; min-height: 340px; overflow: hidden; }
.dpx__note { background: #fff; border-radius: 12px; border: 1px solid var(--hairline); padding: 16px 18px; font-family: Georgia, serif; font-size: .9375rem; line-height: 1.6; color: #1E2B38; box-shadow: 0 8px 22px -14px rgba(16,35,46,.35); min-height: 112px; }
.dpx__note p { margin: 0; }
.dpx__note .dpx__h { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; margin-bottom: 4px; }
.dpx__land { background-image: linear-gradient(rgba(43,179,163,.16), rgba(43,179,163,.16)); background-repeat: no-repeat; background-size: 0% 100%; border-radius: 3px; opacity: 0; transition: opacity .3s ease, background-size 1.1s cubic-bezier(.45,.05,.35,1) .15s; }
/* Everything Chartside typed is highlighted: the phrase, then the dictated words after it. */
.dpx__tail { opacity: 0; background-image: linear-gradient(rgba(43,179,163,.16), rgba(43,179,163,.16)); background-repeat: no-repeat; background-size: 0% 100%; border-radius: 3px; transition: opacity .3s ease, background-size .7s cubic-bezier(.45,.05,.35,1) .1s; }
.dpx.st4 .dpx__tail { background-size: 100% 100%; }
.dpx__stack { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dpx__box { width: min(100%, 420px); background: rgba(236,246,247,.92); border: 1px solid rgba(255,255,255,.9); border-radius: 14px; padding: 10px 12px; box-shadow: 0 14px 30px -14px rgba(16,35,46,.35); opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.dpx__eyebrow { display: flex; align-items: center; gap: 7px; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #12808F; padding: 0 2px 6px; }
.dpx__eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #128C8C, #5BB8D4); }
.dpx__row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; padding: 7px 9px; border-radius: 9px; font-size: .8125rem; color: #4A6070; }
.dpx__row b { font-family: var(--mono); font-weight: 600; color: #10232E; font-size: .8125rem; }
.dpx__row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dpx__row em { font-style: normal; color: #0F7A6E; font-weight: 700; }
.dpx__row.is-on { background: #fff; box-shadow: 0 0 0 1.5px #5BB8D4; }
.dpx__pill { width: min(100%, 420px); display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px 0 8px; border-radius: 999px; background: #D3E8EB; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1.5px rgba(255,255,255,.75), 0 12px 28px -8px rgba(16,35,46,.25); }
.dpx__mic { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #128C8C, #5BB8D4); }
.dpx__bars { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.dpx__bars i { width: 3px; height: 18px; border-radius: 2px; background: #128C8C; transform: scaleY(.35); }
/* Always a mild idle motion; fuller while the scene is "talking". */
.dpx__bars i { animation: dpx-idle 1.6s ease-in-out infinite; }
.dpx.is-talking .dpx__bars i { animation: dpx-bar .7s ease-in-out infinite; }
@keyframes dpx-idle { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(.55); } }
.dpx__bars i:nth-child(2) { animation-delay: .1s !important; } .dpx__bars i:nth-child(3) { animation-delay: .2s !important; }
.dpx__bars i:nth-child(4) { animation-delay: .05s !important; } .dpx__bars i:nth-child(5) { animation-delay: .15s !important; } .dpx__bars i:nth-child(6) { animation-delay: .25s !important; }
@keyframes dpx-bar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.dpx__said { flex: 1; min-width: 0; position: relative; height: 1.4em; font-size: .875rem; color: #10232E; }
.dpx__said > span { position: absolute; inset: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .3s ease; }
.dpx__said b { color: #0F7A6E; font-weight: 700; }
.dpx.st1 .s1, .dpx.st2 .s2, .dpx.st3 .s2, .dpx.st4 .s3 { opacity: 1; }
.dpx.st2 .dpx__box, .dpx.st3 .dpx__box, .dpx.st4 .dpx__box { opacity: 1; transform: none; }
.dpx.st3 .dpx__land, .dpx.st4 .dpx__land { opacity: 1; background-size: 100% 100%; }
.dpx.st4 .dpx__tail { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .dpx * { transition: none !important; animation: none !important; }
  .dpx .dpx__said .s3, .dpx .dpx__box, .dpx .dpx__land, .dpx .dpx__tail { opacity: 1; transform: none; background-size: 100% 100%; }
}
@media (max-width: 700px) { .dpx { min-height: 0; } .dpx__stack { margin-top: 0; } .dpx__note { font-size: .875rem; } }

/* Dot Phrases tags (William, 2026-10-02): three equal pills, evenly spaced,
   in the white pill style of the section labels. */
.dp-tags { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: .625rem; max-width: 30rem; }
.dp-tags .qpill { justify-content: center; background: #fff; border: 1px solid var(--hairline); color: var(--ink); font-weight: 500; box-shadow: 0 2px 8px -6px rgba(23,24,26,.25); }
@media (max-width: 700px) { .dp-tags { max-width: none; } .dp-tags .qpill { font-size: .875rem; padding: .5rem .5rem; } }

/* --- Works in every app (William, 2026-10-02): four live windows on the pastel wash,
   each a different app with the glass island at the bottom. Sizes are in cqw so a
   window reads the same at any size; phones zoom each one in turn (chartside.js). */
.apx { margin: var(--s5) auto 0; max-width: 1000px; position: relative; border-radius: var(--radius); padding: clamp(10px, 2.4vw, 26px); background: linear-gradient(120deg, #F3D9C9, #DDE1F2 52%, #CDE5EE); box-shadow: var(--card-shadow); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1.8vw, 20px); }
.apx__tile { container-type: inline-size; position: relative; aspect-ratio: 4 / 3; background: #fff; border-radius: clamp(7px, 1.2vw, 12px); overflow: hidden; box-shadow: 0 10px 26px -14px rgba(16,35,46,.4), 0 0 0 1px rgba(16,35,46,.06); transform-origin: 0 0; will-change: transform; transition: opacity .25s ease; font-family: var(--sans, system-ui); color: #1E2B38; display: flex; flex-direction: column; }
.apx__tile p { margin: 0; }
.apx__bar { display: flex; align-items: center; gap: 2cqw; height: 8cqw; padding: 0 3cqw; font-size: 2.9cqw; color: #5A6B78; border-bottom: 1px solid #EEF1F2; flex: none; white-space: nowrap; }
.apx__bar b { color: #12808F; font-weight: 700; } .apx__bar em { margin-left: auto; font-style: normal; }
.apx__dots { display: inline-flex; gap: 1.1cqw; margin-right: 1cqw; } .apx__dots i { width: 1.9cqw; height: 1.9cqw; border-radius: 50%; background: #E46A5E; } .apx__dots i:nth-child(2) { background: #E8B33F; } .apx__dots i:nth-child(3) { background: #5DBB63; }
.apx__dict { background-image: linear-gradient(rgba(43,179,163,.2), rgba(43,179,163,.2)); background-repeat: no-repeat; background-size: 0% 100%; border-radius: 2px; transition: background-size 1.1s cubic-bezier(.45,.05,.35,1) .2s; }
.apx__tile.is-live .apx__dict { background-size: 100% 100%; }
/* the glass island */
.apx__isl { position: absolute; left: 50%; bottom: 3.6cqw; transform: translateX(-50%); width: 74%; height: 9.4cqw; display: flex; align-items: center; gap: 1.8cqw; padding: 0 3cqw 0 1.2cqw; border-radius: 99px; background: rgba(211,232,235,.94); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.75), 0 2cqw 5cqw -1.6cqw rgba(16,35,46,.3); }
.apx__mic { width: 7cqw; height: 7cqw; flex: none; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #128C8C, #5BB8D4); } .apx__mic svg { width: 3.6cqw; height: 3.6cqw; }
.apx__bars { display: inline-flex; align-items: center; gap: .6cqw; flex: none; } .apx__bars i { width: .7cqw; height: 4cqw; border-radius: 1cqw; background: #128C8C; transform: scaleY(.35); animation: dpx-idle 1.6s ease-in-out infinite; }
.apx__tile.is-live .apx__bars i { animation: dpx-bar .7s ease-in-out infinite; }
.apx__bars i:nth-child(2) { animation-delay: .1s; } .apx__bars i:nth-child(3) { animation-delay: .2s; } .apx__bars i:nth-child(4) { animation-delay: .05s; } .apx__bars i:nth-child(5) { animation-delay: .15s; }
.apx__said { flex: 1; min-width: 0; font-size: 2.7cqw; color: #10232E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apx__keys { font-size: 2.1cqw; color: #6B7F8A; flex: none; }
/* 1 — EHR */
.apx__tabs { display: flex; gap: 1cqw; padding: 1.4cqw 2.4cqw 0; background: #DCE6EB; flex: none; } .apx__tabs span { display: inline-flex; align-items: center; gap: 1cqw; font-size: 2.5cqw; padding: 1.2cqw 2cqw; border-radius: 1.2cqw 1.2cqw 0 0; background: #EEF2F4; color: #4A5D6A; } .apx__tabs span.on { background: #fff; color: #1E2B38; font-weight: 600; } .apx__tabs i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; }
.apx__ehr { display: grid; grid-template-columns: 24% 1fr; flex: 1; min-height: 0; } .apx__side { border-right: 1px solid #E3E9EC; padding: 2.4cqw 2cqw; display: flex; flex-direction: column; gap: 1.6cqw; font-size: 2.4cqw; color: #A0463E; } .apx__side small { font-size: 2.2cqw; color: #6B7F8A; } .apx__side span.on { background: #E5EEF3; color: #1E2B38; margin: 0 -2cqw; padding: .8cqw 2cqw; box-shadow: inset .6cqw 0 0 #1E2B38; }
.apx__doc { padding: 2.6cqw 3.4cqw; font-family: Georgia, serif; font-size: 2.85cqw; line-height: 1.5; } .apx__doc .c { text-align: center; margin-bottom: 1.8cqw; } .apx__doc .u { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; margin-bottom: .6cqw; }
/* 2 — Word */
.apx--word .apx__bar { background: #185ABD; color: #DCE7F7; border: 0; } .apx--word .apx__bar b { color: #fff; }
.apx__ribbon { display: flex; align-items: center; gap: 2.6cqw; padding: 1.4cqw 3cqw; font-size: 2.5cqw; color: #3B4A57; background: #F3F5F8; border-bottom: 1px solid #E1E5EA; flex: none; } .apx__ribbon .on { color: #185ABD; font-weight: 700; box-shadow: 0 .5cqw 0 #185ABD; } .apx__ribbon em { margin-left: auto; font-style: normal; letter-spacing: .6cqw; color: #1E2B38; }
.apx__page { flex: 1; margin: 3cqw 9cqw 0; background: #fff; box-shadow: 0 0 0 1px #E1E5EA, 0 1.4cqw 3cqw -1.4cqw rgba(16,35,46,.25); padding: 4.4cqw 5.4cqw; font-family: Calibri, Carlito, "Segoe UI", system-ui, sans-serif; font-size: 2.9cqw; line-height: 1.55; }
.apx--word { background: #E9ECF0; } .apx__page .t { font-weight: 700; font-size: 3.6cqw; color: #185ABD; margin-bottom: 1.6cqw; }
/* 3 — Apple Notes (yellow) */
.apx--notes { background: #FFFDF5; } .apx--notes .apx__bar { background: #FBF4DA; border-color: #EFE3B6; } .apx--notes .apx__bar b { color: #8A6A00; } .apx--notes .apx__bar em { color: #D9A400; font-size: 3.4cqw; }
.apx__nts { display: grid; grid-template-columns: 32% 1fr; flex: 1; min-height: 0; } .apx__list { background: #FBF6E4; border-right: 1px solid #EFE3B6; padding: 2cqw; display: flex; flex-direction: column; gap: 1cqw; } .apx__list span { display: flex; flex-direction: column; font-size: 2.6cqw; font-weight: 600; padding: 1.2cqw 1.8cqw; border-radius: 1.4cqw; } .apx__list span.on { background: #F7D774; } .apx__list small { font-weight: 400; font-size: 2.1cqw; color: #7A6A3A; }
.apx__note { padding: 2.6cqw 3.6cqw; font-size: 2.9cqw; line-height: 1.55; } .apx__note small { display: block; text-align: center; font-size: 2.1cqw; color: #9A8F6E; margin-bottom: 1.4cqw; } .apx__note .t { font-weight: 800; font-size: 3.8cqw; margin-bottom: 1cqw; }
/* 4 — Mail */
.apx--mail .apx__bar b { color: #1E2B38; } .apx__badge { background: #2F7CF6; color: #fff; font-weight: 700; font-size: 2.3cqw; border-radius: 99px; padding: .2cqw 1.6cqw; } .apx--mail .apx__bar em { color: #2F7CF6; font-size: 3.4cqw; }
.apx__mail { display: grid; grid-template-columns: 40% 1fr; flex: 1; min-height: 0; } .apx__msgs { border-right: 1px solid #E8ECEF; display: flex; flex-direction: column; } .apx__msgs span { position: relative; display: flex; flex-direction: column; font-size: 2.3cqw; color: #5A6B78; padding: 1.8cqw 2cqw 1.8cqw 4.2cqw; border-bottom: 1px solid #EEF1F2; } .apx__msgs b { font-size: 2.6cqw; color: #1E2B38; } .apx__msgs i { position: absolute; left: 1.6cqw; top: 2.8cqw; width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #2F7CF6; } .apx__msgs span.on { background: #2F7CF6; color: #E3EEFF; } .apx__msgs span.on b { color: #fff; } .apx__msgs span.on i { background: #fff; }
.apx__reply { position: relative; padding: 2.6cqw 3.4cqw; font-size: 2.9cqw; line-height: 1.55; } .apx__reply .t { font-weight: 700; margin-bottom: 1.2cqw; } .apx__send { display: inline-block; margin-top: 2cqw; background: #2F7CF6; color: #fff; font-weight: 700; font-size: 2.5cqw; padding: .8cqw 3cqw; border-radius: 99px; }
/* Phones: the section pins while each window zooms in, holds and zooms back out in turn. */
@media (max-width: 700px) {
  #every-app .apx-pin { height: 420vh; }
  #every-app .apx-pin__stick { position: sticky; top: 76px; }
  #every-app .apx { margin-top: var(--s4); }
  .apx__tile.is-zoom { z-index: 2; box-shadow: 0 18px 40px -16px rgba(16,35,46,.45), 0 0 0 1px rgba(16,35,46,.06); }
}
@media (prefers-reduced-motion: reduce) { #every-app .apx-pin { height: auto !important; } #every-app .apx-pin__stick { position: static !important; } .apx__dict { background-size: 100% 100%; } }
/* Desktop hover (William, 2026-10-02, pass 3): a partial light box. The window under the mouse
   lifts ~6% above a dark veil; the wash and the other three windows dim behind it. */
@media (hover: hover) and (min-width: 701px) {
  .apx::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(14,22,30,.42); opacity: 0; transition: opacity .35s ease; pointer-events: none; z-index: 1; }
  .apx:has(.apx__tile:hover)::before { opacity: 1; }
  .apx__tile { transform-origin: 50% 50%; transition: scale .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
  .apx .apx__tile:hover { scale: 1.06; z-index: 2; box-shadow: 0 30px 60px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.4); }
}
/* Dot Phrases, still scene (William, 2026-10-03): note highlights and the Library box sit finished; only the island loops. */
.dpx.is-static .dpx__box { opacity: 1; transform: none; transition: none; }
.dpx.is-static .dpx__land, .dpx.is-static .dpx__tail { opacity: 1; background-size: 100% 100%; transition: none; }
.dpx.p1 .s1, .dpx.p2 .s2, .dpx.p3 .s3 { opacity: 1; }

/* --- The glass island (William, 2026-10-03): three live states on a larger wash. Panel contents are sized
   in cqmin so they read the same small or expanded; chartside.js expands each panel in turn on scroll. */
.glx { margin: var(--s5) auto 0; max-width: 1120px; position: relative; border-radius: var(--radius); background: linear-gradient(120deg, #F3D9C9, #DDE1F2 52%, #CDE5EE); box-shadow: var(--card-shadow); display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 14px; height: min(560px, calc(100vh - 300px)); min-height: 380px; }
.glx__panel { container-type: size; position: relative; border-radius: 14px; background: rgba(255,255,255,.34); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); overflow: hidden; transition: opacity .25s ease, background .3s ease; }
.glx.is-js .glx__panel { position: absolute; }
.glx__panel.is-big { z-index: 2; background: rgba(255,255,255,.5); box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), 0 24px 50px -24px rgba(16,35,46,.35); }
.glx__in { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6cqmin; padding: 6cqmin 5cqmin; text-align: center; }
.glx__lbl { font-family: var(--mono); font-size: max(9px, 3.6cqmin); letter-spacing: .14em; text-transform: uppercase; color: #12808F; font-weight: 600; }
.glx__vis { width: min(94cqw, 125cqmin); display: flex; flex-direction: column; align-items: center; gap: 3cqmin; }
.glx__cap { margin: 0; max-width: min(92cqw, 125cqmin); font-size: max(8px, 4.4cqmin); line-height: 1.5; color: #3E5260; }
.glx__isl { width: 100%; height: 13cqmin; display: flex; align-items: center; gap: 2.6cqmin; padding: 0 4cqmin 0 1.8cqmin; border-radius: 99px; background: rgba(211,232,235,.95); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.75), 0 3cqmin 7cqmin -2.4cqmin rgba(16,35,46,.3); }
.glx__isl--idle { width: 42%; justify-content: center; gap: 4cqmin; padding: 0 4cqmin; height: 11cqmin; background: rgba(225,236,239,.8); }
.glx__mic { width: 9.6cqmin; height: 9.6cqmin; flex: none; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #128C8C, #5BB8D4); } .glx__mic svg { width: 5cqmin; height: 5cqmin; }
.glx__bars { display: inline-flex; align-items: center; gap: .9cqmin; flex: none; } .glx__bars i { width: 1cqmin; height: 6cqmin; border-radius: 1cqmin; background: #128C8C; transform: scaleY(.35); animation: dpx-bar .7s ease-in-out infinite; }
.glx__bars i:nth-child(2) { animation-delay: .1s; } .glx__bars i:nth-child(3) { animation-delay: .2s; } .glx__bars i:nth-child(4) { animation-delay: .05s; } .glx__bars i:nth-child(5) { animation-delay: .15s; } .glx__bars i:nth-child(6) { animation-delay: .25s; }
.glx__bars--still i { animation: none; background: #7FAFB6; } .glx__bars--still i:nth-child(odd) { transform: scaleY(.5); }
.glx__key { font-size: 4.4cqmin; color: #5A7380; border: 1px solid rgba(90,115,128,.35); border-radius: 1.4cqmin; padding: .2cqmin 1.6cqmin; }
.glx__said { flex: 1; min-width: 0; text-align: left; font-size: 4cqmin; color: #10232E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.glx__hk { flex: none; font-size: 3cqmin; color: #6B7F8A; }
.glx__chip { font-family: var(--mono); font-weight: 600; color: #0F6F7C; border: 1px solid #5BB8D4; border-radius: 1.2cqmin; padding: 0 1.2cqmin; }
.glx__box { width: 100%; text-align: left; background: rgba(236,246,247,.95); border: 1px solid rgba(255,255,255,.9); border-radius: 3.6cqmin; padding: 2.4cqmin 2.8cqmin; box-shadow: 0 3cqmin 7cqmin -3cqmin rgba(16,35,46,.3); }
.glx__eye { display: flex; align-items: center; gap: 1.6cqmin; font-size: 3cqmin; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #12808F; padding-bottom: 1.4cqmin; } .glx__eye i { width: 1.8cqmin; height: 1.8cqmin; border-radius: 50%; background: linear-gradient(135deg, #128C8C, #5BB8D4); }
.glx__row { display: grid; grid-template-columns: auto 1fr auto; gap: 2.4cqmin; align-items: baseline; padding: 1.6cqmin 2cqmin; border-radius: 2cqmin; font-size: 3.3cqmin; color: #4A6070; } .glx__row b { font-family: var(--mono); font-weight: 600; color: #10232E; } .glx__row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .glx__row em { font-style: normal; color: #0F7A6E; font-weight: 700; } .glx__row.on { background: #fff; box-shadow: 0 0 0 .4cqmin #5BB8D4; }
#island .glx-pin { height: 360vh; } #island .glx-pin__stick { position: sticky; top: 84px; }
@media (max-width: 700px) {
  .glx { gap: 8px; padding: 10px; height: auto; aspect-ratio: 1 / 1.08; min-height: 0; margin-top: var(--s4); }
  .glx__panel { border-radius: 10px; }
  #island .glx-pin { height: 400vh; } #island .glx-pin__stick { top: 76px; }
}
@media (prefers-reduced-motion: reduce) { #island .glx-pin { height: auto !important; } #island .glx-pin__stick { position: static !important; } .glx__bars i { animation: none; } }
.glx__panel.is-big { background: rgba(250,251,252,.88); }
@media (max-width: 700px) { .glx__hk { display: none; } }
/* Glass island, pass 2 (William, 2026-10-03): the headline sits inside the wash, top centre; the three
   panels are shorter so there is no dead space above and below them. Expansion fills the panel stage. */
.glx { display: flex; flex-direction: column; height: auto; min-height: 0; padding: clamp(14px, 2.4vw, 28px); gap: clamp(12px, 2vw, 22px); margin-top: var(--s4); }
.glx__h { margin: 0; text-align: center; font-size: clamp(1.35rem, 3.2vw, 2.4rem); line-height: 1.12; }
.glx__stage { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; height: min(400px, calc(100vh - 340px)); min-height: 300px; }
.glx.is-js .glx__panel { position: absolute; }
.glx__in { gap: 4.5cqmin; padding: 4cqmin 4cqmin; }
@media (max-width: 700px) {
  .glx { aspect-ratio: auto; padding: 12px; gap: 12px; }
  .glx__h { font-size: 1.25rem; padding: 2px 6px 0; }
  .glx__stage { gap: 8px; height: 66vw; min-height: 0; }
  .glx__cap { font-size: max(7.5px, 4.2cqmin); }
}
#island .glx { margin-top: var(--s3); }
#island .glx__stage { height: min(340px, calc(100vh - 340px)); min-height: 280px; }
@media (max-width: 700px) { #island .glx__stage { height: 64vw; min-height: 0; } }
/* Glass island, pass 3 (William, 2026-10-03): the headline is itself a glass island — a wide translucent
   bar with the mic disk and an idle waveform — so it belongs to the graphic and still reads as the title. */
#island .glx__h { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 18px); padding: clamp(8px, 1.1vw, 12px) clamp(16px, 2.2vw, 28px) clamp(8px, 1.1vw, 12px) clamp(8px, 1.1vw, 12px); border-radius: 999px; background: rgba(255,255,255,.42); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.7), 0 14px 32px -16px rgba(16,35,46,.3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-align: left; }
.glx__hmic { flex: none; width: clamp(34px, 4.4vw, 52px); height: clamp(34px, 4.4vw, 52px); border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #128C8C, #5BB8D4); box-shadow: 0 6px 14px -6px rgba(18,140,140,.6); } .glx__hmic svg { width: 46%; height: 46%; }
.glx__htxt { flex: 1; min-width: 0; text-align: center; }
.glx__hbars { flex: none; display: inline-flex; align-items: center; gap: 3px; } .glx__hbars i { width: 3px; height: clamp(16px, 2vw, 24px); border-radius: 2px; background: #7FAFB6; transform: scaleY(.4); animation: dpx-idle 1.6s ease-in-out infinite; }
.glx__hbars i:nth-child(2) { animation-delay: .15s; } .glx__hbars i:nth-child(3) { animation-delay: .3s; } .glx__hbars i:nth-child(4) { animation-delay: .45s; } .glx__hbars i:nth-child(5) { animation-delay: .6s; }
@media (max-width: 700px) {
  #island .glx__h { border-radius: 26px; gap: 10px; padding: 9px 12px 9px 9px; font-size: 1.1rem; line-height: 1.18; }
  .glx__hbars { gap: 2px; } .glx__hbars i { width: 2.5px; }
}
/* Glass island headline mic (William, 2026-10-03): one soft "click" with a ripple ring every 5 s. */
.glx__hmic { position: relative; animation: glx-click 5s ease-in-out infinite; }
.glx__hmic::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(91,184,212,.85); opacity: 0; animation: glx-ripple 5s ease-out infinite; pointer-events: none; }
@keyframes glx-click { 0%, 6%, 100% { transform: scale(1); } 3% { transform: scale(.9); } }
@keyframes glx-ripple { 0%, 3% { opacity: 0; transform: scale(1); } 4% { opacity: .9; transform: scale(1.02); } 22% { opacity: 0; transform: scale(1.9); } 100% { opacity: 0; transform: scale(1.9); } }
@media (prefers-reduced-motion: reduce) { .glx__hmic, .glx__hmic::after { animation: none; } }

/* --- Built for your specialty (William, 2026-10-03): one large card, headline inside; the personal
   dictionary follows the highlighted specialty. */
.vdx { margin: var(--s4) auto 0; max-width: 1120px; background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: clamp(18px, 3.4vw, 40px); display: flex; flex-direction: column; gap: clamp(20px, 3vw, 32px); }
.vdx__top { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(20px, 3.4vw, 44px); align-items: center; }
.vdx__h { margin: 0; }
.vdx__lede { margin: 14px 0 0; font-size: 1.125rem; line-height: 1.55; color: var(--muted, #5A6B78); }
.vdx__dict { background: #F7FAFA; border: 1px solid var(--hairline); border-radius: 16px; padding: 18px 20px 14px; box-shadow: 0 12px 30px -20px rgba(16,35,46,.35); }
.vdx__eye { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font-family: var(--mono); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #12808F; margin-bottom: 10px; } .vdx__eye i { width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #128C8C, #5BB8D4); align-self: center; } .vdx__eye small { margin-left: auto; font-size: .6875rem; color: #6B7F8A; letter-spacing: .08em; }
.vdx__rows { transition: opacity .22s ease, transform .22s ease; } .vdx__rows.is-swap { opacity: 0; transform: translateY(4px); }
.vdx__row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 4px; border-bottom: 1px solid #E8EEF0; font-size: 1rem; }
.vdx__row:last-child { border-bottom: 0; }
.vdx__row s { color: #8A98A2; text-decoration-color: #C26A60; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vdx__ar { color: #9AAAB3; } .vdx__row b { color: #10232E; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vdx__row em { font-style: normal; font-size: .8125rem; color: #0F7A6E; font-weight: 600; white-space: nowrap; }
.vdx__foot { margin: 8px 0 0; font-family: var(--mono); font-size: .6875rem; line-height: 1.5; color: #7A8A94; }
.vdx__pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.vpill { font: inherit; font-size: .9375rem; padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--hairline); background: #fff; color: var(--ink, #1E2B38); cursor: pointer; transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease; box-shadow: 0 2px 8px -6px rgba(23,24,26,.25); }
.vpill.is-on { background: var(--teal-tint, #E3F4F1); color: var(--teal-deep, #0F6F63); border-color: rgba(43,179,163,.45); box-shadow: 0 0 0 3px rgba(43,179,163,.12); }
.vpill--more { cursor: default; color: #7A8A94; border-style: dashed; }
@media (max-width: 860px) { .vdx__top { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .vdx { padding: 18px 14px; }
  .vdx__h { font-size: 1.6rem; line-height: 1.12; }
  .vdx__lede { font-size: 1rem; }
  .vdx__dict { padding: 14px 14px 10px; }
  .vdx__eye small { margin-left: 0; width: 100%; }
  .vdx__row { gap: 8px; font-size: .9375rem; padding: 10px 2px; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; }
  .vdx__row em { font-size: 0; } .vdx__row em::first-letter { font-size: .9375rem; }
  .vdx__pills { gap: 8px; } .vpill { font-size: .8125rem; padding: .45rem .75rem; }
}
.vdx__spec { font-size: 1.25rem; font-weight: 700; color: #0F6F7C; margin: -2px 0 6px; transition: opacity .22s ease; }
@media (max-width: 700px) { .vdx__eye small { margin-left: auto; width: auto; } .vdx__spec { font-size: 1.125rem; } }
.vdx__h { text-align: center; }
/* Phones (William, 2026-10-03): four rows only — Psychiatry through Oncology, then "+ more". */
@media (max-width: 700px) { .vdx__pills .vpill[data-i]:nth-child(n+9) { display: none; } }

/* --- Built for HIPAA (William, 2026-10-03): the data-flow card in HTML; the pastel "nothing is stored"
   band sits inside the card where the dark bar was. */
.hpx { margin: var(--s5) auto 0; max-width: 1040px; background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: clamp(14px, 2.6vw, 30px); display: flex; flex-direction: column; gap: 12px; }
.hpx__row { display: grid; grid-template-columns: 210px 1fr; gap: 16px; align-items: center; padding: 14px 16px; border: 1px solid #EEF2F3; border-radius: 14px; background: #FBFCFC; }
.hpx__who { display: flex; align-items: center; gap: 10px; } .hpx__who b { font-size: 1rem; color: var(--ink, #1E2B38); }
.hpx__ic { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: #E6F4F2; color: #12808F; } .hpx__ic svg { width: 18px; height: 18px; }
.hpx__badge { display: none; }
.hpx__flow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; position: relative; padding-right: 92px; }
.hpx__flow::after { content: none; }
.hpx__step { display: flex; flex-direction: column; padding: 8px 12px; border: 1px solid #E3E9EB; border-radius: 10px; background: #fff; font-size: .9375rem; color: #1E2B38; line-height: 1.3; } .hpx__step small { font-size: .75rem; color: #7A8A94; }
.hpx__ar { color: #9AAAB3; }
.hpx__row { position: relative; }
.hpx__row .hpx__badge { display: inline-block; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-style: normal; font-family: var(--mono); font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #0F7A6E; background: #E3F4F1; border: 1px solid rgba(43,179,163,.35); border-radius: 999px; padding: 3px 10px; }
.hpx__band { margin-top: 6px; padding: clamp(20px, 3.4vw, 34px) clamp(16px, 3vw, 32px); }
.hpx__band .guarantee__text { margin-top: 0; font-size: clamp(1rem, 1.6vw, 1.1875rem); }
@media (max-width: 760px) {
  .hpx__row { grid-template-columns: 1fr; gap: 10px; padding: 12px; }
  .hpx__row .hpx__badge { top: 14px; right: 12px; transform: none; }
  .hpx__flow { flex-direction: column; align-items: stretch; gap: 4px; padding-right: 0; }
  .hpx__ar { align-self: center; transform: rotate(90deg); line-height: 1; font-size: .875rem; }
  .hpx__step { font-size: .9375rem; }
}
@media (min-width: 761px) {
  .hpx__row { grid-template-columns: 190px 1fr; }
  .hpx__flow { flex-wrap: nowrap; gap: 8px; padding-right: 108px; }
  .hpx__step { flex: 1 1 0; min-width: 0; font-size: .875rem; padding: 8px 11px; }
}

/* --- Pricing card (William, 2026-10-03): the charter banner uses the pastel "nothing is stored" ombre
   with dark text and wraps instead of clipping; Monthly | Annual matches the header toggle. */
.price__charter { white-space: normal; text-align: center; color: var(--body, #3E5260); font-weight: 500; font-size: .875rem; line-height: 1.5; padding: .875rem var(--s4);
  background: radial-gradient(60% 120% at 10% 0%, rgba(43,179,163,.24), transparent 62%), radial-gradient(60% 120% at 92% 100%, rgba(74,144,226,.20), transparent 62%), linear-gradient(135deg, #E9F6F4, #EDF3FB);
  border-bottom: 1px solid rgba(43,179,163,.22); }
.price__charter span { display: block; margin: 0 0 2px; color: var(--teal-deep, #0F6F63); font-weight: 700; letter-spacing: .1em; }
.price__charter b { color: var(--ink, #17181A); font-weight: 700; }
@media (max-width: 420px) { .price__charter { font-size: .8125rem; padding: .75rem var(--s3); } }
.price__seg { position: relative; isolation: isolate; gap: .125rem; padding: .1875rem; background: var(--canvas, #fff); border: 1px solid var(--hairline); }
.price__seg button { position: relative; font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif; font-size: .875rem; font-weight: 500; color: var(--muted); padding: .3125rem .75rem; border: 1px solid transparent; transition: color .15s ease; }
.price__seg button:hover { color: var(--ink); }
.price__seg button[aria-checked="true"] { background: none; color: var(--ink); }
.price__thumb { position: absolute; top: .1875rem; left: 0; height: calc(100% - .375rem); width: 0; z-index: -1; border-radius: 999px; border: 1px solid rgba(255,255,255,.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(23,24,26,.06), 0 2px 6px rgba(23,24,26,.14);
  background: linear-gradient(120deg, #F3D9C9, #DDE1F2 52%, #CDE5EE); overflow: hidden; opacity: 0;
  transition: transform .42s cubic-bezier(.3,.7,.2,1), width .42s cubic-bezier(.3,.7,.2,1); }
.price__thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, #BFE6DE, #E6F3F1 52%, #D3E3F6); opacity: 0; transition: opacity .42s ease; }
.price__thumb.is-ready { opacity: 1; } .price__thumb.is-annual::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .price__thumb, .price__thumb::after { transition: none; } }
@media (max-width: 420px) { .price__seg button { font-size: .8125rem; padding: .3125rem .625rem; } }
.price > .btn { width: auto; max-width: none; box-sizing: border-box; }

/* --- The dictation catalog (William, 2026-10-03): website graphic of the log window. Light glass, pastel
   rail; *** = removed identifier, [___] = low-confidence word; copy / flag / more per entry, no play. */
.dcx { margin: var(--s5) auto 0; max-width: 1080px; display: grid; grid-template-columns: 1fr 280px; gap: 18px; align-items: start; }
.dcx__list { background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 10px 0 6px; overflow: hidden; }
.dcx__day { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px 8px; font-family: var(--mono); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #6B7F8A; }
.dcx__day svg { width: 16px; height: 16px; color: #9AAAB3; }
.dcx ul { list-style: none; margin: 0; padding: 0; }
.dcx__row { display: grid; grid-template-columns: 74px 1fr auto; gap: 14px; align-items: center; padding: 14px 22px; border-top: 1px solid #EEF2F3; }
.dcx__row.is-new { background: linear-gradient(90deg, rgba(43,179,163,.07), rgba(91,184,212,.05)); }
.dcx__row time { font-size: .8125rem; color: #7A8A94; font-variant-numeric: tabular-nums; }
.dcx__row p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ink, #1E2B38); }
.dcx__red { font-family: var(--mono); font-weight: 700; color: #0F6F7C; background: #E3F4F1; border-radius: 5px; padding: 0 5px; letter-spacing: .06em; }
.dcx__unk { font-family: var(--mono); font-weight: 700; color: #9A5B2E; background: #FBEDE3; border-radius: 5px; padding: 0 5px; }
.dcx__act { display: flex; gap: 4px; }
.dcx__act span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: #5A6B78; }
.dcx__act span:hover { background: #F1F5F6; color: var(--ink); }
.dcx__act svg { width: 17px; height: 17px; }
.dcx__rail { display: flex; flex-direction: column; gap: 12px; }
.dcx__stat { background: #fff; border: 1px solid var(--hairline); border-radius: 16px; padding: 16px 18px; box-shadow: var(--card-shadow); }
.dcx__stat b { display: block; font-size: 1.75rem; line-height: 1.1; color: var(--ink, #17181A); letter-spacing: -.01em; }
.dcx__stat span { font-size: .875rem; color: #5A6B78; }
.dcx__stat--lead { border-color: rgba(43,179,163,.3); background: radial-gradient(60% 120% at 10% 0%, rgba(43,179,163,.22), transparent 62%), radial-gradient(60% 120% at 92% 100%, rgba(74,144,226,.18), transparent 62%), linear-gradient(135deg, #E9F6F4, #EDF3FB); }
.dcx__stat--lead b { font-size: 2.25rem; color: #0F6F63; }
.dcx__key { padding: 6px 4px; display: flex; flex-direction: column; gap: 8px; }
.dcx__key p { margin: 0; font-size: .8125rem; line-height: 1.4; color: #5A6B78; display: flex; align-items: center; gap: 8px; }
.dcx__key b { flex: none; }
.dcx__ki { width: 22px; height: 22px; display: grid; place-items: center; color: #5A6B78; flex: none; } .dcx__ki svg { width: 15px; height: 15px; }
@media (max-width: 860px) {
  .dcx { grid-template-columns: 1fr; }
  .dcx__rail { order: -1; display: grid; grid-template-columns: 1fr 1fr; }
  .dcx__key { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .dcx__row { grid-template-columns: 1fr auto; grid-template-areas: "time act" "text text"; gap: 4px 10px; padding: 12px 14px; }
  .dcx__row time { grid-area: time; } .dcx__row p { grid-area: text; font-size: .9375rem; } .dcx__act { grid-area: act; }
  .dcx__act span { width: 28px; height: 28px; }
  .dcx__day { padding: 12px 14px 6px; }
  .dcx__stat { padding: 12px 14px; } .dcx__stat b { font-size: 1.375rem; } .dcx__stat--lead b { font-size: 1.625rem; } .dcx__stat span { font-size: .8125rem; }
}
/* Catalog, pass 2 (William, 2026-10-03): one dashboard window — sidebar (logo, Dictation, Tracker,
   Insights, Dictionary, .library, Style, Scratchpad), the list, and the stats/key rail inside it. */
.dcx { display: grid; grid-template-columns: 210px 1fr; gap: 0; max-width: 1120px; background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: 0 24px 60px -30px rgba(16,35,46,.35), var(--card-shadow); overflow: hidden; align-items: stretch; }
.dcx__side { background: linear-gradient(180deg, #F4F8F8, #EEF4F7); border-right: 1px solid #E8EEF0; padding: 18px 12px; display: flex; flex-direction: column; gap: 2px; }
.dcx__brand { display: flex; align-items: center; gap: 8px; font-family: "Schibsted Grotesk", var(--sans, system-ui), sans-serif; font-weight: 800; font-size: 1.05rem; color: #1694A6; padding: 2px 8px 16px; }
.dcx__nav { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: .9rem; color: #33475A; }
.dcx__nav svg { width: 18px; height: 18px; color: #5A7380; flex: none; }
.dcx__nav.is-on { background: #fff; color: #10232E; font-weight: 600; box-shadow: 0 1px 3px rgba(16,35,46,.08), inset 0 0 0 1px rgba(16,35,46,.05); }
.dcx__nav.is-on svg { color: #128C8C; }
.dcx__navfoot { margin-top: auto; padding-top: 14px; border-top: 1px solid #E3EAEC; display: flex; flex-direction: column; gap: 2px; }
.dcx__main { min-width: 0; padding: 20px 22px 22px; background: #FBFCFC; }
.dcx__head { font-size: 1.35rem; font-weight: 700; color: #10232E; margin: 2px 2px 14px; letter-spacing: -.01em; }
.dcx__body { display: grid; grid-template-columns: 1fr 230px; gap: 16px; align-items: start; }
.dcx__list { box-shadow: none; border-radius: 16px; }
.dcx__rail { gap: 10px; }
.dcx__stat { box-shadow: none; border-radius: 14px; }
.dcx__key { background: #fff; border: 1px solid var(--hairline); border-radius: 14px; padding: 12px 14px; }
@media (max-width: 1000px) { .dcx__body { grid-template-columns: 1fr; } .dcx__rail { order: -1; display: grid; grid-template-columns: 1fr 1fr; } .dcx__key { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .dcx { grid-template-columns: 1fr; }
  .dcx__side { flex-direction: row; align-items: center; gap: 4px; padding: 10px 10px; border-right: 0; border-bottom: 1px solid #E8EEF0; overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .dcx__brand { padding: 0 8px 0 2px; font-size: .95rem; } .dcx__brand img { width: 28px; height: 18px; }
  .dcx__nav { padding: 6px 9px; font-size: .8125rem; gap: 6px; } .dcx__nav svg { width: 15px; height: 15px; }
  .dcx__navfoot { display: none; }
  .dcx__main { padding: 14px 12px 14px; }
  .dcx__head { font-size: 1.1rem; margin-bottom: 10px; }
}
@media (max-width: 760px) { .dcx__brand { font-size: 0; gap: 0; padding-right: 4px; } }
/* Catalog legend under the log */
.dcx__key--foot { border: 0; border-top: 1px solid #EEF2F3; border-radius: 0; background: #FBFCFC; padding: 14px 22px; flex-direction: row; flex-wrap: wrap; gap: 8px 22px; }
@media (max-width: 700px) { .dcx__key--foot { flex-direction: column; padding: 12px 14px; } }

/* --- Tracking window, live on the page (William, 2026-10-03): three columns; − folds the middle away
   and the ends meet; + reopens. Glass-light, Clinic Sky only. */
.tkw { --gap: 22px; position: relative; margin: var(--s5) auto 0; max-width: 1080px; display: flex; align-items: stretch; padding: 20px 24px; border-radius: 22px;
  background: linear-gradient(90deg, rgba(18,140,140,.12), rgba(91,184,212,.12)), rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 18px 44px -18px rgba(16,35,46,.35); transition: max-width .6s cubic-bezier(.3,.7,.2,1); }
.tkw__lab { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #3C5B6B; }
.tkw__today { flex: none; width: 190px; padding-right: var(--gap); border-right: 1px solid rgba(16,35,46,.12); }
.tkw__big { display: flex; align-items: baseline; gap: 6px; margin: 8px 0 4px; font-family: var(--display, inherit); font-size: 2.9rem; line-height: 1; color: #0B5F63; font-weight: 700; letter-spacing: -.02em; }
.tkw__big small, .tkd__big small { font-size: .75rem; font-weight: 700; color: #33475A; letter-spacing: 0; }
.tkw__sub { font-size: .875rem; font-weight: 600; color: #33475A; }
.tkw__mid { flex: 1 1 auto; min-width: 0; overflow: hidden; max-width: 760px; opacity: 1; transition: max-width .6s cubic-bezier(.3,.7,.2,1), opacity .25s ease .2s, padding .6s cubic-bezier(.3,.7,.2,1); padding: 0 var(--gap); }
.tkw__midin { width: 640px; display: flex; flex-direction: column; gap: 10px; }
.tkw__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tkw__row .tkw__lab { width: 82px; flex: none; }
.tkw__cb { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px 6px 8px; border-radius: 9px; background: rgba(255,255,255,.8); box-shadow: inset 0 0 0 1px rgba(16,35,46,.1); cursor: pointer; }
.tkw__cb input { width: 15px; height: 15px; margin: 0; accent-color: #128C8C; }
.tkw__cb span { display: flex; flex-direction: column; line-height: 1.1; } .tkw__cb b { font-size: .875rem; color: #10232E; } .tkw__cb small { font-size: .6875rem; color: #5A7380; margin-top: 2px; }
.tkw__time { display: flex; align-items: center; gap: 10px; }
.tkw__time p { flex: 1; margin: 0; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.8); box-shadow: inset 0 0 0 1px rgba(16,35,46,.08); font-size: .8125rem; font-style: italic; color: #10232E; line-height: 1.4; }
.tkw__ins { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 11px; background: linear-gradient(90deg, #128C8C, #5BB8D4); color: #fff; font-weight: 600; font-size: .875rem; }
.tkw__ins kbd { font-family: inherit; font-size: .65rem; font-weight: 700; line-height: 1; color: rgba(255,255,255,.92); padding: 3px 6px; border-radius: 5px; background: rgba(255,255,255,.22); }
.tkw__roll { flex: none; width: 200px; padding-left: var(--gap); border-left: 1px solid rgba(16,35,46,.12); }
.tkw__roll .tkw__lab { margin-bottom: 6px; padding-right: 34px; }
.tkw__roll div { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; border-bottom: 1px solid rgba(16,35,46,.08); font-size: .875rem; color: #33475A; } .tkw__roll div:last-child { border-bottom: 0; }
.tkw__roll b { font-size: 1.25rem; color: #10232E; }
.tkw__pm { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: rgba(255,255,255,.9); box-shadow: 0 1px 4px rgba(16,35,46,.14), inset 0 0 0 1px rgba(16,35,46,.1); color: #0B5F63; font: 700 18px/1 system-ui, sans-serif; transition: box-shadow .2s ease, transform .15s ease; z-index: 2; }
.tkw__pm span { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .2s ease; }
.tkw__pm .p { opacity: 0; }
.tkw__pm:hover, .tkw__pm:focus-visible { box-shadow: 0 0 0 5px rgba(91,184,212,.28), 0 0 16px rgba(18,140,140,.45), inset 0 0 0 1px rgba(18,140,140,.5); outline: none; }
.tkw__pm:active { transform: scale(.9); }
.tkw.is-min { max-width: 520px; }
.tkw.is-min .tkw__mid { max-width: 0; opacity: 0; padding: 0; transition: max-width .6s cubic-bezier(.3,.7,.2,1), opacity .15s ease, padding .6s cubic-bezier(.3,.7,.2,1); }
.tkw.is-min .tkw__pm .m { opacity: 0; } .tkw.is-min .tkw__pm .p { opacity: 1; }
.tkw.is-min .tkw__today { flex: 1; }
@media (max-width: 860px) {
  .tkw { flex-wrap: wrap; padding: 16px; }
  .tkw__today { flex: 1; width: auto; border-right: 0; padding-right: 0; }
  .tkw__roll { width: 48%; border-left: 0; padding-left: 0; }
  .tkw__mid { order: 3; flex-basis: 100%; max-width: none; max-height: 420px; padding: 12px 0 0; margin-top: 12px; border-top: 1px solid rgba(16,35,46,.12); transition: max-height .6s cubic-bezier(.3,.7,.2,1), opacity .25s ease .2s, padding .6s ease, margin .6s ease; }
  .tkw__midin { width: auto; }
  .tkw.is-min { max-width: 1080px; } .tkw.is-min .tkw__mid { max-width: none; max-height: 0; padding: 0; margin-top: 0; border-top-color: transparent; }
  .tkw__big { font-size: 2.3rem; } .tkw__time { flex-direction: column; align-items: stretch; } .tkw__ins { align-self: flex-end; }
  .tkw__row .tkw__lab { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .tkw, .tkw__mid { transition: none !important; } }

/* --- Tracker dashboard (Tracking tab): same window as the catalog, stats only, no log. */
.tkd { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; }
.tkd__card { background: #fff; border: 1px solid var(--hairline); border-radius: 16px; padding: 16px 18px; }
.tkd__card--lead { background: radial-gradient(60% 120% at 10% 0%, rgba(43,179,163,.22), transparent 62%), radial-gradient(60% 120% at 92% 100%, rgba(74,144,226,.18), transparent 62%), linear-gradient(135deg, #E9F6F4, #EDF3FB); border-color: rgba(43,179,163,.3); }
.tkd__big { display: flex; align-items: baseline; gap: 6px; margin: 10px 0 6px; font-size: 3.2rem; line-height: 1; color: #0B5F63; font-weight: 700; letter-spacing: -.02em; }
.tkd__mid { display: block; margin: 8px 0 4px; font-size: 2rem; line-height: 1.1; color: #10232E; font-weight: 700; }
.tkd__sub { font-size: .875rem; color: #5A6B78; }
.tkd__rr { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px solid #EEF2F3; font-size: .9375rem; color: #33475A; } .tkd__rr:last-child { border-bottom: 0; } .tkd__rr b { font-size: 1.35rem; color: #10232E; }
.tkd .tkw__lab { margin-bottom: 4px; }
.dcx--trk { margin-top: var(--s5); }
@media (max-width: 700px) { .tkd { grid-template-columns: 1fr 1fr; gap: 10px; } .tkd__card { padding: 12px; } .tkd__card--lead, .tkd__card:nth-child(2) { grid-column: 1 / -1; } .tkd__big { font-size: 2.4rem; } .tkd__mid { font-size: 1.4rem; } }
/* Tracker: 12-month wRVU bars (William, 2026-10-03). One series: past months a soft teal, this month
   glass-teal and labeled. Hover/focus shows the month's value. */
.tkd__card--wide { grid-column: 1 / -1; }
.tkc__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tkc__now { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 600; color: #0B5F63; }
.tkc__now i { width: 9px; height: 9px; border-radius: 3px; background: #128C8C; }
.tkc { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; height: 150px; align-items: end; border-bottom: 1px solid #DCE5E8; padding-top: 22px;
  background: linear-gradient(#EEF3F4, #EEF3F4) 0 50% / 100% 1px no-repeat; }
.tkc__col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; outline: none; cursor: default; }
.tkc__col i { display: block; width: min(70%, 28px); border-radius: 4px 4px 0 0; background: #BFDCDA; transition: background .15s ease; }
.tkc__col:hover i, .tkc__col:focus-visible i { background: #8FC4C1; }
.tkc__col.is-now i { background: linear-gradient(180deg, #5BB8D4, #128C8C); box-shadow: 0 6px 14px -6px rgba(18,140,140,.6); }
.tkc__col em { position: absolute; bottom: -20px; font-style: normal; font-size: .6875rem; color: #7A8A94; }
.tkc__col.is-now em { color: #0B5F63; font-weight: 700; }
.tkc__val { position: absolute; font-size: .75rem; font-weight: 700; color: #10232E; transform: translateY(-4px); bottom: calc(312.6 / 360 * 100%); }
.tkc__tip { position: absolute; bottom: calc(100% - 14px); left: 50%; transform: translate(-50%, 4px); white-space: nowrap; padding: 5px 9px; border-radius: 8px; background: #fff; border: 1px solid var(--hairline); box-shadow: 0 6px 16px -8px rgba(16,35,46,.35); font-size: .75rem; color: #33475A; opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease; z-index: 2; }
.tkc__tip b { color: #10232E; }
.tkc__col:hover .tkc__tip, .tkc__col:focus-visible .tkc__tip { opacity: 1; transform: translate(-50%, 0); }
.tkc__col:first-child .tkc__tip { left: 0; transform: translate(0, 4px); } .tkc__col:first-child:hover .tkc__tip { transform: none; }
.tkc__col:last-child .tkc__tip { left: auto; right: 0; transform: translate(0, 4px); } .tkc__col:last-child:hover .tkc__tip { transform: none; }
.tkd__card--wide { padding-bottom: 30px; }
@media (max-width: 700px) { .tkc { height: 120px; } .tkc__col em { font-size: .625rem; } }

/* CPT checkboxes, cleaner (William, 2026-10-03): no white tile behind each code — a check, the code, its label. */
.tkw__cb { padding: 4px 6px; background: none; box-shadow: none; border-radius: 8px; gap: 8px; }
.tkw__cb:hover { background: rgba(255,255,255,.55); }
.tkw__cb input { width: 16px; height: 16px; }
.tkw__row { gap: 4px 14px; }
.tkw__cb input { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(16,35,46,.35); display: grid; place-items: center; cursor: pointer; flex: none; }
.tkw__cb input:checked { background: linear-gradient(90deg, #128C8C, #5BB8D4); box-shadow: none; }
.tkw__cb input:checked::after { content: ""; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(42deg); }
.tkw__cb input:focus-visible { outline: 2px solid #5BB8D4; outline-offset: 2px; }

/* Hero stage corners (William, 2026-10-04): the 28px round clipped "Chart PROD" and "Log Out" in the
   window's top bar on both stories. A tighter radius keeps every word inside the frame. */
.stage--chartside { border-radius: 14px; }
@media (max-width: 700px) { .stage--chartside { border-radius: 12px; } }
.to-top { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center;
  background: #fff; color: #128C8C; box-shadow: 0 6px 18px -6px rgba(16,35,46,.35), inset 0 0 0 1px rgba(16,35,46,.08);
  opacity: 0; transform: translateY(8px) scale(.9); pointer-events: none; transition: opacity .25s ease, transform .25s ease, box-shadow .2s ease; }
.to-top svg { width: 18px; height: 18px; }
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover, .to-top:focus-visible { box-shadow: 0 0 0 4px rgba(91,184,212,.25), 0 8px 20px -6px rgba(18,140,140,.45); outline: none; }
@media (max-width: 700px) { .to-top { right: 14px; bottom: 16px; width: 38px; height: 38px; } }
/* Tracking window, pass 3 (William, 2026-10-04): codes on a tight grid (box centred on the code, descriptor
   underneath), a short time statement beside them, mint Insert; smoother fold. */
.tkw { max-width: 1000px; transition: max-width .7s cubic-bezier(.65,0,.35,1); }
.tkw__mid { max-width: 640px; transition: max-width .7s cubic-bezier(.65,0,.35,1), opacity .3s ease .25s, padding .7s cubic-bezier(.65,0,.35,1); }
.tkw.is-min .tkw__mid { transition: max-width .7s cubic-bezier(.65,0,.35,1), opacity .18s ease, padding .7s cubic-bezier(.65,0,.35,1); }
.tkw__midin { width: 560px; display: grid; grid-template-columns: auto 1fr; gap: 0 22px; align-items: start; }
.tkw__codes { display: grid; grid-template-columns: auto auto; gap: 10px 12px; align-items: start; }
.tkw__codes > .tkw__lab { padding-top: 3px; width: auto; }
.tkw__set { display: flex; gap: 2px 14px; flex-wrap: wrap; }
.tkw__cb { display: grid; grid-template-columns: 16px auto; grid-template-rows: auto auto; column-gap: 7px; align-items: center; padding: 2px 4px; }
.tkw__cb input { grid-row: 1; grid-column: 1; align-self: center; }
.tkw__cb b { grid-row: 1; grid-column: 2; font-size: .9375rem; line-height: 1.2; color: #10232E; }
.tkw__cb small { grid-row: 2; grid-column: 2; font-size: .6875rem; color: #5A7380; line-height: 1.2; }
.tkw__more { align-self: flex-start; margin-top: 1px; padding: 3px 9px; border-radius: 8px; border: 1px dashed rgba(16,35,46,.25); font-size: .75rem; font-weight: 600; color: #3C5B6B; }
.tkw__time { flex-direction: column; align-items: stretch; gap: 8px; }
.tkw__time p { font-size: .8125rem; padding: 8px 10px; }
.tkw__ins { align-self: flex-start; background: linear-gradient(120deg, #BFE6DE, #E6F3F1 52%, #D3E3F6); color: #10232E; border: 1px solid rgba(255,255,255,.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 2px 8px rgba(16,35,46,.14); cursor: pointer; transition: box-shadow .2s ease; }
.tkw__ins:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 0 0 4px rgba(91,184,212,.2), 0 4px 12px rgba(16,35,46,.16); }
.tkw__ins kbd { background: rgba(255,255,255,.8); color: #3C5B6B; }
.tkw.is-min { max-width: 500px; }
@media (max-width: 860px) {
  .tkw__midin { width: auto; grid-template-columns: 1fr; gap: 12px; }
  .tkw__codes { grid-template-columns: 1fr; gap: 6px; }
  .tkw__mid { max-width: none; transition: max-height .7s cubic-bezier(.65,0,.35,1), opacity .3s ease .25s, padding .7s ease, margin .7s ease; }
  .tkw.is-min .tkw__mid { transition: max-height .7s cubic-bezier(.65,0,.35,1), opacity .18s ease, padding .7s ease, margin .7s ease; }
  .tkw__time { flex-direction: row; align-items: center; } .tkw__time .tkw__lab { display: none; } .tkw__ins { align-self: center; }
}
.tkw { max-width: 1100px; } .tkw__mid { max-width: 720px; } .tkw__midin { width: 700px; grid-template-columns: auto 200px; }
.tkw__set { gap: 2px 10px; } .tkw__ins kbd { white-space: nowrap; } .tkw__ins { white-space: nowrap; }
.tkw__codes > .tkw__lab { white-space: nowrap; }
@media (max-width: 860px) { .tkw__midin { width: auto; grid-template-columns: 1fr; } .tkw__set { gap: 4px 8px; } .tkw__cb { padding: 2px; } }
.tkw__mid { max-width: 780px; } .tkw__midin { width: 690px; grid-template-columns: auto 210px; }
@media (max-width: 860px) { .tkw__mid { max-width: none; } .tkw__midin { width: auto; grid-template-columns: 1fr; } }
.tkw__midin { width: 620px; grid-template-columns: auto 196px; gap: 0 18px; } .tkw__codes { gap: 10px 10px; }
.tkw__today { width: 170px; } .tkw__roll { width: 190px; }
@media (max-width: 860px) { .tkw__midin { width: auto; grid-template-columns: 1fr; } .tkw__today { width: auto; } .tkw__roll { width: 48%; } }
/* Bars rise left to right when the chart comes into view (William, 2026-10-04). */
.tkc .tkc__col i { transform: scaleY(0); transform-origin: 50% 100%; transition: transform .7s cubic-bezier(.2,.8,.2,1), background .15s ease; transition-delay: calc(var(--i, 0) * 70ms), 0s; }
.tkc.is-up .tkc__col i { transform: none; }
.tkc .tkc__val { opacity: 0; transition: opacity .3s ease .95s; } .tkc.is-up .tkc__val { opacity: 1; }
.tkc__col em { font-size: .6875rem; }
@media (max-width: 700px) { .tkc__col em { font-size: .5625rem; letter-spacing: -.01em; } }
@media (prefers-reduced-motion: reduce) { .tkc .tkc__col i { transform: none; transition: none; } .tkc .tkc__val { opacity: 1; } }
/* On your screen, Tracking story: the laptop shows the Tracking window; on phones the trim lands on it. */
#on-your-mac .v2fig picture[hidden] { display: none; }
@media (max-width: 700px) {
  #on-your-mac .v2fig picture[data-story="tracking"] img { clip-path: inset(calc(var(--k, 0) * 70%) calc(var(--k, 0) * 28.9%) calc(var(--k, 0) * 14.4%) calc(var(--k, 0) * 28.9%) round calc(14px - var(--k, 0) * 9px)); transform: translateY(calc(var(--k, 0) * -45%)) scale(var(--z, 1)); }
}
@media (max-width: 700px) {
  #on-your-mac .v2fig picture[data-story="tracking"] img { clip-path: inset(calc(var(--k, 0) * 70%) calc(var(--k, 0) * 26.5%) calc(var(--k, 0) * 14.4%) calc(var(--k, 0) * 26.5%) round calc(14px - var(--k, 0) * 9px)); transform: translateY(calc(var(--k, 0) * -42%)) scale(calc(1 + (var(--z, 1) - 1) * .78)); }
}
/* Tracking story: keep sections alternating once the dictation-only ones are hidden. */
[data-story-active="tracking"] #tally { background: var(--canvas, #fff); }
/* The speech ribbon belongs to the Dictation story only — hidden outright on Tracking (William, 2026-10-04). */
.flow[hidden], [data-story-active="tracking"] .flow { display: none !important; }
/* Insert: the deep green of "Introducing Chartside", centred under the time statement (William, 2026-10-04). */
.tkw__ins { align-self: center; background: #0F7A6E; color: #fff; border: 0; box-shadow: 0 4px 12px -4px rgba(15,122,110,.55); }
.tkw__ins:hover { box-shadow: 0 0 0 4px rgba(15,122,110,.18), 0 6px 14px -4px rgba(15,122,110,.6); }
.tkw__ins kbd { background: rgba(255,255,255,.2); color: rgba(255,255,255,.92); }
/* Tracking window stays one horizontal rectangle at every width (JS scales it); undo the old stacked phone layout. */
@media (max-width: 860px) {
  .tkw { flex-wrap: nowrap; padding: 20px 24px; max-width: 1060px; width: 1060px; }
  .tkw.is-min { max-width: 500px; }
  .tkw__today { flex: none; width: 170px; border-right: 1px solid rgba(16,35,46,.12); padding-right: var(--gap); }
  .tkw.is-min .tkw__today { flex: 1; }
  .tkw__roll { width: 190px; border-left: 1px solid rgba(16,35,46,.12); padding-left: var(--gap); }
  .tkw__mid { order: 0; flex: 1 1 auto; flex-basis: auto; max-width: 780px; max-height: none; padding: 0 var(--gap); margin-top: 0; border-top: 0;
    transition: max-width .7s cubic-bezier(.65,0,.35,1), opacity .3s ease .25s, padding .7s cubic-bezier(.65,0,.35,1); }
  .tkw.is-min .tkw__mid { max-width: 0; max-height: none; padding: 0; transition: max-width .7s cubic-bezier(.65,0,.35,1), opacity .18s ease, padding .7s cubic-bezier(.65,0,.35,1); }
  .tkw__midin { width: 620px; grid-template-columns: auto 196px; gap: 0 18px; }
  .tkw__codes { grid-template-columns: auto auto; gap: 10px; }
  .tkw__time { flex-direction: column; align-items: stretch; } .tkw__time .tkw__lab { display: block; } .tkw__ins { align-self: center; }
  .tkw__big { font-size: 2.9rem; }
}
.tkw { margin-left: auto; margin-right: auto; }
.tkw-fit { position: relative; }
.tkw-fit.is-scaled { overflow: hidden; margin-top: var(--s5); padding-top: 4px; }
.tkw-fit.is-scaled .tkw { position: absolute; top: 4px; left: 50%; margin: 0 0 0 -530px; transform-origin: 50% 0; width: 1060px; }
.tkw-fit.is-scaled .tkw.is-min { margin-left: -250px; }
@media (max-width: 860px) { .tkw { transition: max-width .7s cubic-bezier(.65,0,.35,1), margin .7s cubic-bezier(.65,0,.35,1), width .7s cubic-bezier(.65,0,.35,1); } .tkw.is-min { width: 500px; } }

/* On your screen (William, 2026-10-04): the zoom frames BOTH the bottom window and the Copilot side tab.
   Desktop: zoom 1.5 from a point that keeps the tab in frame. Phones: trim to the box that holds both. */
#on-your-mac .v2fig img { transform-origin: 72% 80%; }
@media (max-width: 700px) {
  #on-your-mac .v2fig picture img, #on-your-mac .v2fig picture[data-story="tracking"] img {
    transform-origin: 58% 62.5%;
    clip-path: inset(calc(var(--k, 0) * 37%) calc(var(--k, 0) * 10.5%) calc(var(--k, 0) * 13%) calc(var(--k, 0) * 26%) round calc(14px - var(--k, 0) * 9px));
    transform: translate(calc(var(--k, 0) * -7.75%), calc(var(--k, 0) * -24%)) scale(calc(1 + var(--k, 0) * .55));
  }
  #on-your-mac .mac-pin__stick .v2fig { margin-bottom: calc(var(--k, 0) * -0.13 * (100vw - 32px)); }
}
/* Back-to-top: a mostly translucent white disc, lifted clear of the phone browser bar. */
.to-top { background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); box-shadow: 0 6px 18px -6px rgba(16,35,46,.3), inset 0 0 0 1px rgba(255,255,255,.8), inset 0 0 0 1.5px rgba(16,35,46,.06); }
@media (max-width: 700px) { .to-top { right: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); width: 42px; height: 42px; } }
.hero__sub { text-wrap: balance; }
/* Insert: a little lower and larger, still smaller than the statement box (William, 2026-10-04). */
.tkw__ins { margin-top: 6px; padding: 12px 22px; font-size: 1rem; border-radius: 12px; }
.tkw__ins kbd { font-size: .7rem; padding: 3px 7px; }

/* On your screen, Tracking — third zoom beat: the folded window and the side tab, close up, then a scroll cue. */
#on-your-mac .v2fig { position: relative; }
.mz3 { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1440 / 900; border-radius: var(--radius); overflow: hidden; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 34px);
  background: linear-gradient(120deg, #F3D9C9, #DDE1F2 52%, #CDE5EE); opacity: var(--s3, 0); transform: scale(calc(.94 + var(--s3, 0) * .06)); pointer-events: none; }
.mz3[hidden] { display: none; }
.mz3__row { display: flex; align-items: center; gap: clamp(12px, 3vw, 36px); }
.mz3__win { position: relative; display: flex; gap: clamp(14px, 2.6vw, 30px); padding: clamp(14px, 2.4vw, 28px) clamp(16px, 2.8vw, 32px); border-radius: clamp(14px, 2vw, 22px);
  background: linear-gradient(90deg, rgba(18,140,140,.12), rgba(91,184,212,.12)), rgba(255,255,255,.88); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 24px 50px -22px rgba(16,35,46,.45); }
.mz3__today { padding-right: clamp(14px, 2.6vw, 30px); border-right: 1px solid rgba(16,35,46,.12); }
.mz3__today b, .mz3__chip b { display: flex; align-items: baseline; gap: 6px; margin: 6px 0 4px; font-size: clamp(1.9rem, 5vw, 3.6rem); line-height: 1; color: #0B5F63; font-weight: 700; letter-spacing: -.02em; }
.mz3__today b small, .mz3__chip b small { font-size: .7rem; color: #33475A; letter-spacing: 0; }
.mz3__today > span:last-child { font-size: clamp(.75rem, 1.6vw, 1rem); font-weight: 600; color: #33475A; }
.mz3__roll { min-width: clamp(130px, 18vw, 220px); }
.mz3__roll div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 4px 0; border-bottom: 1px solid rgba(16,35,46,.08); font-size: clamp(.75rem, 1.5vw, .95rem); color: #33475A; } .mz3__roll div:last-child { border-bottom: 0; }
.mz3__roll b { font-size: clamp(1rem, 2.4vw, 1.5rem); color: #10232E; }
.mz3__pm { position: absolute; top: 10px; right: 12px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #0B5F63; font: 700 17px/1 system-ui, sans-serif; box-shadow: 0 0 0 4px rgba(91,184,212,.22), 0 2px 8px rgba(16,35,46,.18); }
.mz3__chip { padding: clamp(12px, 2vw, 22px) clamp(14px, 2.2vw, 24px); border-radius: clamp(12px, 1.8vw, 18px); background: linear-gradient(90deg, rgba(18,140,140,.14), rgba(91,184,212,.14)), rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 20px 44px -20px rgba(16,35,46,.45); }
.mz3__chip > span:not(.mz3__lab) { display: block; font-size: clamp(.75rem, 1.5vw, .95rem); color: #33475A; }
.mz3__chip em { display: block; margin-top: 2px; font-style: normal; font-size: clamp(.65rem, 1.2vw, .8rem); color: #5A7380; }
.mz3__lab { display: flex; align-items: center; gap: 6px; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #3C5B6B; } .mz3__lab i { width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #128C8C, #5BB8D4); }
.mz3__cue { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.78); color: #0B5F63; font-weight: 600; font-size: clamp(.8rem, 1.6vw, .95rem); box-shadow: 0 6px 16px -8px rgba(16,35,46,.35); }
.mz3__cue svg { width: 16px; height: 16px; animation: mz3-bob 1.4s ease-in-out infinite; }
@keyframes mz3-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@media (max-width: 700px) {
  .mz3 { aspect-ratio: auto; height: calc((100vw - 32px) * .625 * .76); border-radius: 14px; gap: 10px; }
  .mz3__row { gap: 8px; } .mz3__win { gap: 10px; padding: 12px 12px; } .mz3__today { padding-right: 10px; }
  .mz3__roll { min-width: 104px; } .mz3__chip { padding: 10px 10px; } .mz3__chip em { display: none; }
  .mz3__pm { width: 22px; height: 22px; font-size: 14px; top: 6px; right: 6px; } .mz3__lab { font-size: .55rem; letter-spacing: .1em; }
  .mz3__today b, .mz3__chip b { font-size: 1.6rem; } .mz3 .tkw__lab { font-size: .55rem; }
}
@media (prefers-reduced-motion: reduce) { .mz3 { display: none !important; } .mz3__cue svg { animation: none; } }
@media (max-width: 700px) {
  .mz3 { height: calc((100vw - 32px) * .9); justify-content: center; gap: 12px; padding: 0 12px; }
  .mz3__row { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
  .mz3__win { justify-content: space-between; }
  .mz3__chip { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 10px 14px; }
  .mz3__chip b { margin: 0; font-size: 1.35rem; } .mz3__chip > span:not(.mz3__lab) { font-size: .75rem; }
  .mz3__today b { font-size: 1.9rem; } .mz3__roll { min-width: 120px; } .mz3__roll b { font-size: 1rem; }
  .mz3__cue { padding: 6px 12px; font-size: .8rem; }
}
/* Phones: the audience line sits halfway between the Windows button and the hero video (William, 2026-10-04). */
@media (max-width: 700px) {
  .hero__panel--chartside > .hero__audience { margin: 22px 0 0 !important; line-height: 1; }
  .hero__panel--chartside > .stage--chartside { margin-top: 22px !important; }
  .hero__ctas { margin-bottom: 0 !important; }
}
@media (max-width: 700px) { .hero__panel--chartside > .flow { margin-bottom: -30px; } }
/* Phones: the close-up view takes real space in the layout, so the next section never slides under it. */
@media (max-width: 700px) {
  .mz3 { height: calc((100vw - 32px) * .66); }
  [data-story-active="tracking"] #on-your-mac .mac-pin__stick .v2fig { margin-bottom: calc(var(--k, 0) * -0.13 * (100vw - 32px) + var(--s3, 0) * 0.17 * (100vw - 32px)); }
}
/* Phones, on the Pricing page only (William, 2026-10-04, v2): one row — logo left, the toggle in the
   middle, an outlined "Pricing" pill on the right (the desktop current-page style). */
@media (max-width: 700px) {
  .site-header__inner:has(.nav-link[aria-current="page"]) { grid-template-columns: auto 1fr; column-gap: 6px; }
  .site-header .site-header__nav:has(.nav-link[aria-current="page"]) { display: flex !important; justify-content: space-between; align-items: center; gap: 6px; width: 100%; margin-left: 0 !important; }
  .site-header .nav-links:has(.nav-link[aria-current="page"]) { display: flex !important; margin-left: auto; }
  .site-header__nav:has(.nav-link[aria-current="page"]) .story-toggle { margin: 0 auto; }
  .site-header__nav:has(.nav-link[aria-current="page"]) .story-toggle__opt { font-size: .6875rem; padding: .25rem .45rem; }
  .site-header .nav-link[aria-current="page"] { font-size: .6875rem; font-weight: 600; padding: .3rem .6rem; border-radius: 999px; color: #0F7A6E; border: 1px solid rgba(15,122,110,.55); background: rgba(227,244,241,.6); white-space: nowrap; }
  .site-header__inner:has(.nav-link[aria-current="page"]) .wordmark--cs { font-size: .95rem; gap: 6px; }
  .site-header__inner:has(.nav-link[aria-current="page"]) .wordmark--cs img { width: 40px; height: auto; }
}

/* --- Note Ladder (Tracking tab; coming soon). Glass tab on the left that widens toward the bottom;
   green check = section done, gray + red X = required section skipped. Clinic Sky palette. */
.soon-tag { font-style: normal; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #E3F4F1; color: #0F7A6E; font-size: .85em; letter-spacing: .06em; }
.nlx { margin: var(--s5) auto 0; max-width: 960px; display: grid; grid-template-columns: 250px 1fr; gap: clamp(14px, 3vw, 32px); align-items: start;
  padding: clamp(14px, 3vw, 32px); border-radius: var(--radius); background: linear-gradient(120deg, #F3D9C9, #DDE1F2 52%, #CDE5EE); box-shadow: var(--card-shadow); }
.nlx__ladder { list-style: none; margin: 0; padding: 12px; display: flex; flex-direction: column; gap: 7px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(18,140,140,.10), rgba(91,184,212,.14)), rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 18px 40px -20px rgba(16,35,46,.35); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.nlx__head { display: flex; flex-direction: column; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #0B5F63; padding: 2px 4px 6px; }
.nlx__head i { display: none; } .nlx__head small { font-size: .6875rem; letter-spacing: 0; text-transform: none; font-weight: 500; color: #5A7380; margin-top: 2px; }
.nlx__rung { width: var(--w); display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 11px; background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(16,35,46,.07);
  font-size: .875rem; color: #6B7F8A; transition: width .6s cubic-bezier(.2,.8,.2,1), background .35s ease, color .35s ease, box-shadow .35s ease; }
.nlx__rung b { font-weight: 600; }
.nlx__mark { position: relative; width: 20px; height: 20px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(16,35,46,.2); background: #fff; transition: background .3s ease, box-shadow .3s ease; }
.nlx__mark i { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.4); transition: opacity .3s ease, transform .4s cubic-bezier(.2,1.4,.4,1); }
.nlx__mark svg { width: 12px; height: 12px; }
.nlx__mark .ok { color: #fff; } .nlx__mark .no { color: #C2564B; }
.nlx__rung.is-active { background: rgba(255,255,255,.95); color: #10232E; box-shadow: inset 0 0 0 1.5px rgba(91,184,212,.8), 0 4px 12px -6px rgba(18,140,140,.5); }
.nlx__rung.is-done { color: #10232E; background: rgba(255,255,255,.85); }
.nlx__rung.is-done .nlx__mark { background: linear-gradient(135deg, #1E9E74, #2BB38F); box-shadow: none; }
.nlx__rung.is-done .ok { opacity: 1; transform: none; }
.nlx__rung.is-skip { background: rgba(214,220,224,.7); color: #8A979F; }
.nlx__rung.is-skip .nlx__mark { background: #FCEDEB; box-shadow: inset 0 0 0 1.5px rgba(194,86,75,.5); }
.nlx__rung.is-skip .no { opacity: 1; transform: none; }
.nlx__note { background: #fff; border-radius: 14px; border: 1px solid var(--hairline); padding: 16px 20px; min-height: 360px; font-family: Georgia, serif; font-size: .9375rem; line-height: 1.5; color: #1E2B38; box-shadow: 0 10px 26px -16px rgba(16,35,46,.35); }
.nlx__title { font-weight: 700; text-align: center; margin-bottom: 10px; }
.nlx__sec { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .5s ease, opacity .4s ease, margin .5s ease; margin: 0; }
.nlx__sec > * { overflow: hidden; }
.nlx__sec span { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; display: block; }
.nlx__sec p { margin: 2px 0 0; }
.nlx__sec.is-in { grid-template-rows: auto auto; opacity: 1; margin: 0 0 10px; }
.nlx__sec.is-new p { background: linear-gradient(rgba(43,179,163,.16), rgba(43,179,163,.16)) no-repeat 0 0 / 100% 100%; border-radius: 3px; }
.nlx__sec[data-s="bill"] p { font-family: var(--sans, system-ui); font-size: .875rem; color: #0B5F63; font-weight: 600; }
@media (max-width: 700px) {
  .nlx { grid-template-columns: 116px 1fr; gap: 10px; padding: 10px; }
  .nlx__ladder { padding: 8px; gap: 5px; border-radius: 14px; } .nlx__head { font-size: .5625rem; padding: 0 2px 4px; } .nlx__head small { font-size: .5625rem; }
  .nlx__rung { padding: 6px 6px; gap: 5px; font-size: .6875rem; } .nlx__mark { width: 15px; height: 15px; } .nlx__mark svg { width: 9px; height: 9px; }
  .nlx__note { padding: 10px 12px; font-size: .75rem; min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) { .nlx__rung, .nlx__mark, .nlx__mark i, .nlx__sec { transition: none; } }
.nlx__sec.is-new p { background: none; } .nlx__sec.is-new > div { background: linear-gradient(rgba(43,179,163,.12), rgba(43,179,163,.12)); border-radius: 6px; }
@media (max-width: 700px) { .nlx__rung { width: calc(var(--w) + 14%); max-width: 100%; } }

/* Note Ladder v2 (William, 2026-10-04): slim vertical tab; one-line label; uniform rungs that appear one at a
   time as dictation moves down; thin progress bar across the top; on/off switch. */
.nlx { grid-template-columns: 210px 1fr; }
.nlx__ladder { position: relative; padding: 14px 10px 10px; gap: 0; display: block; overflow: hidden; }
.nlx__bar { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(16,35,46,.08); }
.nlx__bar i { display: block; height: 100%; width: var(--prog, 0%); background: linear-gradient(90deg, #128C8C, #5BB8D4); border-radius: 0 2px 2px 0; transition: width .8s cubic-bezier(.2,.8,.2,1); }
.nlx__head { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; white-space: nowrap; padding: 2px 2px 8px; font-size: .625rem; letter-spacing: .1em; }
.nlx__sw { width: 26px; height: 15px; border-radius: 99px; background: linear-gradient(90deg, #128C8C, #5BB8D4); position: relative; flex: none; }
.nlx__sw i { position: absolute; top: 2px; right: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.nlx__ladder ol { list-style: none; margin: 0; padding: 0; }
.nlx__rung { width: 100% !important; display: grid; grid-template-rows: 0fr; opacity: 0; transform: translateY(-6px); padding: 0; margin: 0; background: none; box-shadow: none;
  transition: grid-template-rows .55s cubic-bezier(.2,.8,.2,1), opacity .45s ease .1s, transform .55s cubic-bezier(.2,.8,.2,1), margin .55s ease; }
.nlx__rung > .nlx__in { overflow: hidden; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 11px; background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(16,35,46,.07); font-size: .8125rem; color: #6B7F8A; min-height: 0; transition: background .35s ease, color .35s ease, box-shadow .35s ease; }
.nlx__rung.is-active, .nlx__rung.is-done, .nlx__rung.is-skip { grid-template-rows: 1fr; opacity: 1; transform: none; margin-top: 6px; background: none; box-shadow: none; }
.nlx__rung.is-active > .nlx__in { background: rgba(255,255,255,.95); color: #10232E; box-shadow: inset 0 0 0 1.5px rgba(91,184,212,.8), 0 4px 12px -6px rgba(18,140,140,.5); }
.nlx__rung.is-done > .nlx__in { color: #10232E; background: rgba(255,255,255,.85); }
.nlx__rung.is-skip > .nlx__in { background: rgba(214,220,224,.7); color: #8A979F; }
.nlx__rung.is-active, .nlx__rung.is-done, .nlx__rung.is-skip { color: inherit; }
.nlx__note { min-height: 330px; }
@media (max-width: 700px) {
  .nlx { grid-template-columns: 124px 1fr; }
  .nlx__ladder { padding: 12px 7px 7px; } .nlx__head { font-size: .5rem; letter-spacing: .06em; gap: 4px; } .nlx__sw { width: 20px; height: 12px; } .nlx__sw i { width: 8px; height: 8px; }
  .nlx__rung > .nlx__in { padding: 6px 6px; gap: 5px; font-size: .625rem; }
}
@media (max-width: 700px) { .nlx { grid-template-columns: 112px 1fr; } .nlx__head { font-size: .5625rem; } .nlx__rung > .nlx__in { white-space: nowrap; } }
/* Close-up beat: the Note Ladder sits across from the Copilot tab. */
.mz3__lad { position: relative; overflow: hidden; align-self: flex-start; padding: clamp(10px, 1.6vw, 16px) clamp(8px, 1.2vw, 12px) clamp(8px, 1.2vw, 12px); border-radius: clamp(12px, 1.8vw, 18px);
  background: linear-gradient(180deg, rgba(18,140,140,.10), rgba(91,184,212,.14)), rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 20px 44px -20px rgba(16,35,46,.45); }
.mz3__lbar { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #128C8C, #5BB8D4); }
.mz3__lhead { display: flex; align-items: center; justify-content: space-between; gap: 6px; white-space: nowrap; font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #0B5F63; }
.mz3__lad ol { list-style: none; margin: 0; padding: 0; }
.mz3__lad li { display: flex; align-items: center; gap: 7px; margin-top: 5px; padding: 6px 8px; border-radius: 9px; background: rgba(255,255,255,.88); box-shadow: inset 0 0 0 1px rgba(16,35,46,.07); font-size: clamp(.7rem, 1.2vw, .8125rem); font-weight: 600; color: #10232E; white-space: nowrap; }
.mz3__lad li span { width: 15px; height: 15px; border-radius: 50%; background: linear-gradient(135deg, #1E9E74, #2BB38F); display: grid; place-items: center; flex: none; } .mz3__lad li svg { width: 9px; height: 9px; }
@media (max-width: 700px) {
  .mz3 { height: calc((100vw - 32px) * 1.05); }
  .mz3__row { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "win win" "lad chip"; gap: 8px; align-items: start; }
  .mz3__win { grid-area: win; } .mz3__lad { grid-area: lad; } .mz3__chip { grid-area: chip; align-self: start; flex-direction: column; align-items: flex-start; gap: 2px; }
  .mz3__lhead { font-size: .45rem; } .mz3__lad li { font-size: .6rem; padding: 4px 6px; margin-top: 4px; gap: 5px; } .mz3__lad li span { width: 12px; height: 12px; } .mz3__lad li svg { width: 7px; height: 7px; }
  [data-story-active="tracking"] #on-your-mac .mac-pin__stick .v2fig { margin-bottom: calc(var(--k, 0) * -0.13 * (100vw - 32px) + var(--s3, 0) * 0.55 * (100vw - 32px)); }
}
/* Tracking zoom keeps both side tabs: desktop zooms from the centre; phones trim wider. */
[data-story-active="tracking"] #on-your-mac .v2fig img { transform-origin: 50% 62%; }
@media (max-width: 700px) {
  #on-your-mac .v2fig picture[data-story="tracking"] img {
    transform-origin: 50% 56%;
    clip-path: inset(calc(var(--k, 0) * 26%) calc(var(--k, 0) * 10%) calc(var(--k, 0) * 13%) calc(var(--k, 0) * 10%) round calc(14px - var(--k, 0) * 9px));
    transform: translateY(calc(var(--k, 0) * -8%)) scale(calc(1 + var(--k, 0) * .26));
  }
}
/* Close-up: window across the top; Note Ladder bottom-left, Copilot tab bottom-right — at every width. */
.mz3__row { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "win win" "lad chip"; gap: clamp(8px, 1.6vw, 16px); align-items: start; }
.mz3__win { grid-area: win; } .mz3__lad { grid-area: lad; } .mz3__chip { grid-area: chip; justify-self: end; align-self: start; }
@media (min-width: 701px) { .mz3 { justify-content: center; } .mz3__today b, .mz3__chip b { font-size: clamp(1.8rem, 3.6vw, 2.8rem); } .mz3__win { padding: 18px 24px; } }
/* Close-up order matches the screen (William, 2026-10-04): Note Ladder left, Copilot tab right, the big window at the base. */
.mz3__row { grid-template-areas: "lad chip" "win win" !important; align-items: start; }
.mz3__chip { justify-self: end; }
@media (max-width: 700px) {
  [data-story-active="tracking"] #on-your-mac .mac-pin__stick .v2fig { margin-bottom: calc(var(--k, 0) * -0.13 * (100vw - 32px) + var(--s3, 0) * 0.86 * (100vw - 32px)); }
}
/* Keep the figure's reserved space inside the pinned block (no margin collapse), so the next section can't ride up under the close-up. */
#on-your-mac .mac-pin__stick { display: flow-root; }

/* Dictation laptop now carries the Note Ladder too: same centred zoom and wider phone trim as Tracking. */
#on-your-mac .v2fig img { transform-origin: 50% 62%; }
@media (max-width: 700px) {
  #on-your-mac .v2fig picture img {
    transform-origin: 50% 56%;
    clip-path: inset(calc(var(--k, 0) * 26%) calc(var(--k, 0) * 10%) calc(var(--k, 0) * 13%) calc(var(--k, 0) * 10%) round calc(14px - var(--k, 0) * 9px));
    transform: translateY(calc(var(--k, 0) * -8%)) scale(calc(1 + var(--k, 0) * .26));
  }
}
/* Dictation third beat: Note Ladder left, Copilot tab right, the Dot Phrase box + island at the base. */
.mz3--dict .mz3__row { grid-template-areas: "lad chip" "dp dp" !important; }
.mz3__dp { grid-area: dp; display: flex; flex-direction: column; gap: 8px; }
.mz3__box { background: rgba(236,246,247,.95); border: 1px solid rgba(255,255,255,.9); border-radius: 14px; padding: 10px 12px; box-shadow: 0 14px 30px -14px rgba(16,35,46,.35); }
.mz3__eye { display: flex; align-items: center; gap: 7px; font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #12808F; padding-bottom: 6px; } .mz3__eye i { width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #128C8C, #5BB8D4); }
.mz3__row2 { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; padding: 6px 8px; border-radius: 9px; font-size: clamp(.68rem, 1.2vw, .8125rem); color: #4A6070; }
.mz3__row2 b { font-family: var(--mono); font-weight: 600; color: #10232E; } .mz3__row2 span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .mz3__row2 em { font-style: normal; color: #0F7A6E; font-weight: 700; white-space: nowrap; }
.mz3__row2.on { background: #fff; box-shadow: 0 0 0 1.5px #5BB8D4; }
.mz3__isl { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px 0 6px; border-radius: 999px; background: #D3E8EB; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1.5px rgba(255,255,255,.75), 0 12px 28px -8px rgba(16,35,46,.25); }
.mz3__mic { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #128C8C, #5BB8D4); } .mz3__mic svg { width: 15px; height: 15px; }
.mz3__bars { display: inline-flex; gap: 3px; align-items: center; } .mz3__bars i { width: 3px; height: 16px; border-radius: 2px; background: #128C8C; animation: dpx-bar .7s ease-in-out infinite; } .mz3__bars i:nth-child(2){animation-delay:.1s} .mz3__bars i:nth-child(3){animation-delay:.2s} .mz3__bars i:nth-child(4){animation-delay:.05s} .mz3__bars i:nth-child(5){animation-delay:.15s}
.mz3__said { flex: 1; min-width: 0; font-size: clamp(.72rem, 1.3vw, .875rem); color: #10232E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz3__chipx { font-family: var(--mono); font-weight: 600; color: #0F6F7C; border: 1px solid #5BB8D4; border-radius: 6px; padding: 0 5px; }
@media (max-width: 700px) { .mz3__row2 { grid-template-columns: auto 1fr; } .mz3__row2 em { display: none; } .mz3__isl { height: 40px; } .mz3__mic { width: 28px; height: 28px; } }
.mz3--dict { aspect-ratio: auto !important; height: auto !important; min-height: 100%; padding: clamp(14px, 3vw, 28px) clamp(10px, 3vw, 28px); justify-content: center; }
.mz3__row2 b { white-space: nowrap; }
@media (max-width: 700px) { .mz3--dict { padding: 12px; } .mz3__row2 { font-size: .625rem; gap: 8px; padding: 5px 6px; } .mz3__box { padding: 8px; } }