/* ===========================================================================
   Mila — the site's design system.
   One stylesheet, no build step, no external requests, no @font-face.

   Order: tokens, base, type, controls, layout, components, motion.
   Every component states its keyboard and reduced-motion behaviour next to it,
   because those are the parts that rot first.
   ======================================================================== */

/* --- 1. Tokens ----------------------------------------------------------
   Carried forward unchanged from the previous homepage and reference pages so
   the two do not drift. The contrast ratio is noted where it is load-bearing. */
:root{
  --c-ivory:#F6F3EC;
  --c-teal:#123B37;          /* ink on ivory — 11.1:1  */
  --c-teal-deep:#0C2C29;     /* dark band ground        */
  --c-mint:#DCECE3;
  --c-apricot:#E9BCA4;
  --c-action:#176C62;        /* control fill; ivory on it — 5.6:1 */
  --c-action-press:#0F5A52;
  --c-muted:#48605A;         /* muted ink on ivory — 6.7:1 */
  --c-on-teal:#F6F3EC;
  --c-on-teal-muted:#A6C0B6; /* on deep teal — 6.4:1 */
  --c-app:#FFFFFF;
  --c-hair:rgba(18,59,55,.14);
  --c-hair-strong:rgba(18,59,55,.24);
  --c-hair-on-teal:rgba(246,243,236,.20);

  --font-sans:ui-sans-serif, system-ui, -apple-system, "SF Pro Text",
    "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --fs-hero:clamp(2.25rem, 1.6rem + 2.7vw, 3.5rem);
  --lh-hero:clamp(2.5rem, 1.9rem + 2.4vw, 3.75rem);
  --fs-title:clamp(1.625rem, 1.36rem + 1.1vw, 2.25rem);
  --fs-h3:clamp(1.1875rem, 1.14rem + 0.2vw, 1.3125rem);
  --fs-lead:clamp(1.125rem, 1.06rem + 0.28vw, 1.3125rem);
  --fs-body:clamp(1.0625rem, 1.035rem + 0.11vw, 1.125rem);
  --lh-body:clamp(1.6875rem, 1.633rem + 0.23vw, 1.8125rem);
  --fs-cap:0.875rem;
  --fs-micro:0.8125rem;

  --gutter:24px;
  --content:1120px;
  --measure:64ch;
  --section-y:clamp(2.375rem, 1.45rem + 3.6vw, 3.125rem);
  --r-lg:18px;
  --r-md:12px;
  --r-sm:9px;
  --r-pill:999px;
  --tap:44px;
  --lift:0 1px 2px rgba(18,59,55,.05), 0 16px 34px -18px rgba(18,59,55,.28);
  --ease:cubic-bezier(.22,1,.36,1);
  --dur:180ms;
}
@media (max-width:520px){ :root{ --gutter:18px; } }

/* --- 2. Base ------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--c-ivory); color:var(--c-teal);
  font-family:var(--font-sans); font-size:var(--fs-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
/* After the display rule above, not before it: an author rule beats the
   browser's own [hidden], so without this the copy tick is on the button from
   the moment the page loads, saying a thing was copied that was not. */
[hidden]{ display:none!important; }
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{ margin:0; }
h1,h2,h3,h4{ font-weight:640; letter-spacing:-0.017em; text-wrap:balance; }
a{ color:var(--c-action); }
ul,ol{ padding:0; list-style:none; }
button{ font:inherit; color:inherit; }
[id]{ scroll-margin-top:5rem; }

/* One focus ring everywhere: two pixels of teal, three of offset. It clears
   the mint fills, and the dark band flips it to mint so it stays visible. */
:where(a,button,summary,[tabindex],input,select):focus-visible{
  outline:2px solid var(--c-teal); outline-offset:3px; border-radius:var(--r-sm);
}
.on-teal :where(a,button,summary,[tabindex]):focus-visible{ outline-color:var(--c-mint); }

.vh{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:60;
  padding:.75rem 1rem; background:var(--c-teal); color:var(--c-ivory); text-decoration:none;
}
.skip:focus{ left:.5rem; top:.5rem; }

/* --- 3. Type ------------------------------------------------------------ */
.t-hero{ font-size:var(--fs-hero); line-height:var(--lh-hero); }
.t-title{ font-size:var(--fs-title); line-height:1.22; }
.t-h3{ font-size:var(--fs-h3); line-height:1.35; font-weight:620; }
.t-lead{ font-size:var(--fs-lead); line-height:1.55; color:var(--c-muted); text-wrap:pretty; }
.t-cap{ font-size:var(--fs-cap); line-height:1.5; color:var(--c-muted); }
.t-micro{ font-size:var(--fs-micro); line-height:1.45; color:var(--c-muted); }
.eyebrow{
  font-size:var(--fs-micro); font-weight:660; letter-spacing:.09em;
  text-transform:uppercase; color:var(--c-muted);
}
.measure{ max-width:var(--measure); }
.mono{ font-family:var(--font-mono); font-size:.92em; }
.on-teal{ color:var(--c-on-teal); }
.on-teal .t-lead,.on-teal .t-cap,.on-teal .t-micro,.on-teal .eyebrow{ color:var(--c-on-teal-muted); }
.on-teal a{ color:var(--c-mint); }

/* --- 4. Controls -------------------------------------------------------- */
/* The press state is a real 1px translate with the shadow collapsing under it:
   on a trackpad that reads as the button taking the weight. Hover only changes
   fill, so a pointer resting on the page never makes anything move. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:48px; padding:0 1.25rem; border-radius:var(--r-md);
  background:var(--c-action); color:var(--c-ivory);
  border:1px solid var(--c-action); box-shadow:0 1px 2px rgba(12,44,41,.16);
  font-weight:620; font-size:1rem; text-decoration:none; cursor:pointer;
  transition:background var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             transform 120ms var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover{ background:var(--c-action-press); border-color:var(--c-action-press); }
.btn:active{ transform:translateY(1px); box-shadow:none; }
.btn--ghost{ background:transparent; color:var(--c-action); box-shadow:none; }
.btn--ghost:hover{ background:rgba(23,108,98,.08); }
.btn--quiet{ background:var(--c-app); color:var(--c-teal); border-color:var(--c-hair-strong); }
.btn--quiet:hover{ background:var(--c-mint); border-color:var(--c-hair-strong); }
.btn--sm{ min-height:40px; padding:0 .95rem; font-size:.9375rem; }
.btn--wide{ width:100%; }
.on-teal .btn{ background:var(--c-mint); color:var(--c-teal-deep); border-color:var(--c-mint); }
.on-teal .btn:hover{ background:#EAF4EE; border-color:#EAF4EE; }
.on-teal .btn--ghost{ background:transparent; color:var(--c-mint); border-color:var(--c-hair-on-teal); }
.on-teal .btn--ghost:hover{ background:rgba(246,243,236,.10); }

/* Pills. Three weights, so the state survives greyscale: filled, tinted, outline. */
.pill{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.22rem .6rem; border-radius:var(--r-pill);
  font-size:var(--fs-micro); font-weight:640;
  border:1px solid transparent; white-space:nowrap;
}
.pill--live{ background:var(--c-teal); color:var(--c-ivory); }
.pill--soft{ background:var(--c-mint); color:var(--c-teal); }
.pill--edge{ border-color:var(--c-hair-strong); color:var(--c-muted); }
.pill--warm{ background:var(--c-apricot); color:#4A2A18; }

/* --- 5. Layout ---------------------------------------------------------- */
.wrap{ max-width:var(--content); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); }
.section--tight{ padding-block:calc(var(--section-y) * .5); }
.band{ background:var(--c-teal-deep); }
.band-mint{ background:var(--c-mint); }
.rule{ border:0; border-top:1px solid var(--c-hair); }
.stack > * + *{ margin-top:1rem; }
.stack-sm > * + *{ margin-top:.5rem; }
.cols{ display:grid; gap:clamp(1.25rem,2.6vw,1.75rem); }
@media (min-width:760px){
  .cols--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cols--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
.head-block{ max-width:36rem; margin-bottom:clamp(1.5rem,2.6vw,2.25rem); }

/* The hero. The screenshot is the argument, so it sits beside the sentence
   rather than a screen below it: 5/7 puts the capture at about 630px, which
   is close to the width it was taken at, so the app's own text reads true. */
.hero-grid{ display:grid; gap:clamp(1.75rem,3.5vw,2.75rem); align-items:center; }
@media (min-width:900px){ .hero-grid{ grid-template-columns:5fr 7fr; } }
.head-block .t-lead{ margin-top:.8rem; }
.head-block .eyebrow{ display:block; margin-bottom:.55rem; }

/* --- 6. Site header ----------------------------------------------------- */
.site-head{
  position:sticky; top:0; z-index:40;
  background:rgba(246,243,236,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--c-hair);
}
.site-head-in{ display:flex; align-items:center; gap:1rem; min-height:64px; }
.brand{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:700; font-size:1.25rem; letter-spacing:-.01em;
  color:var(--c-teal); text-decoration:none;
}
.brand::before{ content:""; width:.7rem; height:.7rem; border-radius:50%; background:var(--c-action); flex:none; }
.site-nav{ margin-left:auto; display:none; gap:1.5rem; font-size:.9375rem; }
.site-nav a{ color:var(--c-teal); text-decoration:none; }
.site-nav a:hover{ color:var(--c-action); text-decoration:underline; text-underline-offset:.2em; }
/* The section links fold away on a small screen; the one action never does.
   A visitor on a phone should not have to find the bottom of the page, and
   should not be relying on the bar that appears once they scroll. */
@media (min-width:860px){ .site-nav{ display:flex; } }
@media (max-width:859px){ .site-head-in .brand{ margin-right:auto; } }

/* --- 7. Card ------------------------------------------------------------
   Lift on hover, and the same lift on focus-within so a keyboard sees it. */
.card{
  background:var(--c-app); border:1px solid var(--c-hair);
  border-radius:var(--r-lg); padding:clamp(1.1rem,2vw,1.45rem);
  box-shadow:0 1px 2px rgba(18,59,55,.04);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.card--link:hover,.card--link:focus-within{
  transform:translateY(-3px); box-shadow:var(--lift); border-color:var(--c-hair-strong);
}
.card h3{ margin-bottom:.4rem; }
.on-teal .card{ background:rgba(246,243,236,.06); border-color:var(--c-hair-on-teal); color:var(--c-on-teal); }

/* --- 8. Facts row -------------------------------------------------------
   Four facts. No quotes, no logos, no invented practices: there are no
   customers yet, and a made-up one would be the worst thing on the page. */
.facts{
  display:grid; gap:1px; background:var(--c-hair);
  border:1px solid var(--c-hair); border-radius:var(--r-lg); overflow:hidden;
}
@media (min-width:640px){ .facts{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){ .facts{ grid-template-columns:repeat(4,1fr); } }
.fact{ background:var(--c-ivory); padding:1rem 1.1rem; }
.fact b{ display:block; font-weight:660; font-size:1.0625rem; }
.fact span{ display:block; margin-top:.25rem; font-size:var(--fs-micro); color:var(--c-muted); line-height:1.45; }

/* --- 9. The demonstration stage ----------------------------------------- */
.stage{
  display:grid; gap:1rem; align-items:start;
  background:rgba(246,243,236,.05); border:1px solid var(--c-hair-on-teal);
  border-radius:var(--r-lg); padding:clamp(.8rem,1.5vw,1rem);
}
@media (min-width:900px){ .stage{ grid-template-columns:1fr 1fr; gap:1rem; } }
.panel{ background:var(--c-app); color:var(--c-teal); border-radius:var(--r-md); padding:.85rem .9rem; }
.panel-head{
  display:flex; align-items:center; gap:.55rem; flex-wrap:wrap;
  padding-bottom:.55rem; margin-bottom:.55rem; border-bottom:1px solid var(--c-hair);
}
.panel-head .who{ font-weight:640; font-size:.9375rem; }
.panel-head .clock{ margin-left:auto; font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--c-muted); }

/* The recording pulse. The ring is decorative; the word "Recording" carries
   the meaning, so a stopped animation loses nothing at all. */
.rec{ position:relative; width:.6rem; height:.6rem; border-radius:50%; background:#B4442E; flex:none; }
.rec::after{ content:""; position:absolute; inset:-.35rem; border-radius:50%; border:2px solid #B4442E; opacity:0; }
.is-live .rec::after{ animation:pulse 1.6s var(--ease) infinite; }
@keyframes pulse{ 0%{ opacity:.55; transform:scale(.6); } 100%{ opacity:0; transform:scale(1.15); } }

/* Transcript turns */
.turns{ display:flex; flex-direction:column; gap:.28rem; min-height:15.5rem; }
.turn{
  border-left:3px solid var(--c-hair); padding:.22rem 0 .22rem .7rem;
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.turn[data-who="Dentist"]{ border-left-color:var(--c-action); }
.turn .who{
  display:block; font-size:var(--fs-micro); font-weight:660; letter-spacing:.07em;
  text-transform:uppercase; color:var(--c-muted);
}
.turn .who .at{ font-family:var(--font-mono); font-weight:500; letter-spacing:0; margin-left:.4rem; }
.turn p{ font-size:.9375rem; line-height:1.5; }
.turn.is-lit{ background:var(--c-mint); border-left-color:var(--c-action); }

/* The note card: the note a dentist writes, with each line traceable to the
   conversation it came from. */
/* The colour is set here as well as the background. Without it the card takes
   the dark band's ivory text onto its own white and disappears — which is what
   it did, until somebody looked at it. */
.note-card{
  background:var(--c-app); color:var(--c-teal); border:1px solid var(--c-hair);
  border-radius:var(--r-md); padding:.85rem .9rem;
}
.note-head{
  display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;
  padding-bottom:.5rem; margin-bottom:.5rem; border-bottom:1px solid var(--c-hair);
}
.note-head b{ font-weight:660; font-size:.9375rem; }
.note-lines{ display:flex; flex-direction:column; gap:.25rem; }
.note-line{
  display:block; width:100%; text-align:left; background:none; border:0;
  padding:.3rem .45rem; border-radius:var(--r-sm); cursor:pointer;
  font-size:.9375rem; line-height:1.5; color:inherit;
  transition:background var(--dur) var(--ease);
}
.note-line:hover,.note-line.is-lit{ background:var(--c-mint); }

/* The tooth-number moment: "upper right four" turns over and reads UR4. */
.tooth{
  display:inline-block; font-family:var(--font-mono); font-weight:660;
  background:var(--c-mint); border-radius:.35rem; padding:0 .3rem;
}
.stage-foot{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-top:.9rem; }
.stage-foot .t-micro{ flex:1 1 15rem; }

/* The stage says what it is doing in words, not only in colour. One of these
   three shows at a time; with scripting off the stage is 'done' and reads
   "Ready for you", which is where the scene ends anyway. */
.when-idle,.when-live,.when-done{ display:none; }
.stage[data-state="idle"] .when-idle,
.stage[data-state="recording"] .when-live,
.stage[data-state="written"] .when-done,
.stage[data-state="done"] .when-done{ display:inline-flex; }

/* --- 10. Copy button ----------------------------------------------------
   Turns into its own confirmation. The tick is drawn, not an emoji, so it
   inherits the text colour and never falls back to a system glyph. */
.copy-tick{ width:1rem; height:1rem; flex:none; }
.copy-tick path{ stroke:currentColor; stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.btn.is-done{ background:var(--c-teal); border-color:var(--c-teal); color:var(--c-ivory); }
.on-teal .btn.is-done{ background:var(--c-ivory); border-color:var(--c-ivory); color:var(--c-teal-deep); }

/* --- 11. Microphone meter ----------------------------------------------- */
.meter{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  padding:.85rem .95rem; border:1px solid var(--c-hair); border-radius:var(--r-md); background:var(--c-app);
}
.meter-bar{ flex:1 1 8rem; height:.5rem; min-width:6rem; border-radius:var(--r-pill); background:var(--c-hair); overflow:hidden; }
.meter-fill{ display:block; height:100%; width:0%; border-radius:inherit; background:var(--c-action); transition:width 90ms linear; }
.meter-note{ flex:1 1 100%; }

/* --- 12. Pricing --------------------------------------------------------
   Written, styled and ready; not published. The founder settles the numbers
   before they go on the page. Add ?pricing to the address to read it as it
   would look; publish it by deleting the first of these two rules. */
#pricing{ display:none; }
[data-pricing="on"] #pricing{ display:block; }
.price-card{ display:flex; flex-direction:column; }
.price-card .amount{
  font-size:clamp(1.875rem,1.5rem + 1.5vw,2.375rem); font-weight:660;
  letter-spacing:-.02em; line-height:1.1; margin-top:.45rem;
}
.price-card .amount small{ font-size:var(--fs-cap); font-weight:500; color:var(--c-muted); }
.price-card .incl{ font-size:var(--fs-micro); color:var(--c-muted); margin-top:.2rem; }
.price-card ul{ margin-top:.85rem; display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.1rem; }
.price-card li{ font-size:.9375rem; line-height:1.45; padding-left:1.05rem; position:relative; }
.price-card li::before{
  content:""; position:absolute; left:0; top:.55em; width:.4rem; height:.4rem;
  border-radius:50%; background:var(--c-apricot);
}
.price-card .btn{ margin-top:auto; }
.price-card--lead{ border-color:var(--c-action); box-shadow:var(--lift); }

/* --- 13. FAQ accordion --------------------------------------------------
   A button plus a region, not <details>: the open height has to be animated,
   and a half-closed <details> hides its own text from find-in-page. Closed is
   [hidden] — complete, or absent, never a squashed remnant. */
.faq{ border-top:1px solid var(--c-hair); }
.faq-item{ border-bottom:1px solid var(--c-hair); }
.faq-q{
  display:flex; align-items:center; gap:1rem; width:100%;
  min-height:var(--tap); padding:.85rem 0; background:none; border:0; cursor:pointer;
  text-align:left; font-size:var(--fs-h3); font-weight:620; letter-spacing:-.01em;
}
.faq-q:hover{ color:var(--c-action); }
.faq-sign{ margin-left:auto; flex:none; width:1rem; height:1rem; position:relative; }
.faq-sign::before,.faq-sign::after{
  content:""; position:absolute; inset:50% 0 auto; height:2px; background:currentColor;
  border-radius:2px; transform:translateY(-50%);
}
.faq-sign::after{ transform:translateY(-50%) rotate(90deg); transition:transform var(--dur) var(--ease); }
.faq-q[aria-expanded="true"] .faq-sign::after{ transform:translateY(-50%) rotate(0deg); }
.faq-a{ overflow:hidden; }
.faq-a > div{ padding-bottom:1.1rem; max-width:var(--measure); }

/* --- 14. Sticky call to action, small screens only ---------------------- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(246,243,236,.96); backdrop-filter:blur(8px);
  border-top:1px solid var(--c-hair);
  display:flex; align-items:center; gap:.75rem;
}
.sticky-cta .t-micro{ flex:1; }
@media (min-width:860px){ .sticky-cta{ display:none!important; } }

/* --- 15. Steps ---------------------------------------------------------- */
.steps{ counter-reset:step; display:flex; flex-direction:column; gap:1.4rem; }
.step{ counter-increment:step; display:grid; grid-template-columns:2.25rem 1fr; gap:1rem; }
.step::before{
  content:counter(step); display:grid; place-items:center;
  width:2.25rem; height:2.25rem; border-radius:50%;
  background:var(--c-mint); color:var(--c-teal); font-weight:660; font-size:.9375rem;
}
.step h3{ margin-bottom:.3rem; }
.step ul{ margin-top:.55rem; display:flex; flex-direction:column; gap:.45rem; }
.step li{ padding-left:1.05rem; position:relative; }
.step li::before{
  content:""; position:absolute; left:.15rem; top:.7em; width:.35rem; height:.35rem;
  border-radius:50%; background:var(--c-hair-strong);
}

/* --- 16. Figures and artwork slots -------------------------------------- */
.shot{
  border-radius:var(--r-md); overflow:hidden; border:1px solid var(--c-hair);
  background:var(--c-app); box-shadow:var(--lift);
}
figcaption{ margin-top:.7rem; font-size:var(--fs-cap); line-height:1.5; color:var(--c-muted); max-width:34rem; }

/* An artwork slot holds its own shape and looks finished while it is empty:
   a warm field with a hairline, never a broken frame waiting for a picture.
   When artwork arrives it goes in as an <img> and the field never shows. */
.art{
  aspect-ratio:3 / 2; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(160deg, var(--c-mint), #EFE7DC);
  border:1px solid var(--c-hair);
}
.art img{ width:100%; height:100%; object-fit:cover; }

/* --- 17. Footer --------------------------------------------------------- */
.site-foot{ background:var(--c-teal-deep); color:var(--c-on-teal); padding-block:clamp(2.25rem,3.6vw,3rem); }
.foot-grid{ display:grid; gap:1.6rem; }
@media (min-width:760px){ .foot-grid{ grid-template-columns:1.5fr 1fr 1fr; } }
.foot-grid h3{
  font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:.09em;
  color:var(--c-on-teal-muted); font-weight:660;
}
.foot-grid ul{ margin-top:.55rem; display:flex; flex-direction:column; gap:.35rem; }
.foot-grid a{ color:var(--c-ivory); text-decoration:none; font-size:.9375rem; }
.foot-grid a:hover{ text-decoration:underline; text-underline-offset:.2em; }
.foot-fine{ margin-top:1.75rem; padding-top:1.1rem; border-top:1px solid var(--c-hair-on-teal); }

/* --- 18. Reference pages ------------------------------------------------ */
.doc{ padding-block:clamp(2rem,3.6vw,3rem) clamp(2.75rem,4.5vw,4rem); }
.doc-head{ max-width:44rem; }
.doc-head .t-lead{ margin-top:1rem; }
.doc h2{ font-size:clamp(1.375rem,1.2rem + .7vw,1.75rem); margin-top:2.25rem; }
.doc h3{ font-size:var(--fs-h3); margin-top:1.4rem; }
.doc p,.doc ul,.doc ol{ max-width:var(--measure); }
.doc p + p,.doc h2 + p,.doc h3 + p,.doc p + ul,.doc ul + p,.doc p + .tw{ margin-top:.9rem; }
.doc ul.bullets{ list-style:disc; padding-left:1.35rem; }
.doc ul.bullets li{ margin-top:.45rem; }
.toc{ margin-top:1.6rem; padding:1rem 1.15rem; border:1px solid var(--c-hair); border-radius:var(--r-md); }
.toc ul{ margin-top:.5rem; display:flex; flex-wrap:wrap; gap:.35rem 1.25rem; }
.toc a{ font-size:.9375rem; }
.tw{ overflow-x:auto; border:1px solid var(--c-hair); border-radius:var(--r-md); max-width:100%; }
.tw:focus-visible{ outline:2px solid var(--c-teal); outline-offset:2px; }
table{ border-collapse:collapse; width:100%; font-size:.9375rem; line-height:1.5; min-width:38rem; }
th,td{ text-align:left; padding:.6rem .8rem; border-bottom:1px solid var(--c-hair); vertical-align:top; }
thead th{ background:var(--c-mint); font-weight:660; }
tbody tr:last-child th,tbody tr:last-child td{ border-bottom:0; }

/* --- 19. Motion ---------------------------------------------------------
   Everything above moves for 120–300ms. Below, none of it does, and the page
   must still be whole: the demonstration writes its finished state in one go,
   the accordion opens and shuts with no tween, the pulse rests as a plain dot. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:1ms!important; animation-iteration-count:1!important;
    transition-duration:1ms!important; scroll-behavior:auto!important;
  }
  .card--link:hover,.card--link:focus-within{ transform:none; }
  .btn:active{ transform:none; }
}
/* The same switch, by hand, for checking the still path in a browser that will
   not emulate the media query: put data-motion="off" on <html>, or load the
   page with ?motion=off. */
[data-motion="off"] *,[data-motion="off"] *::before,[data-motion="off"] *::after{
  animation-duration:1ms!important; animation-iteration-count:1!important;
  transition-duration:1ms!important;
}