/* Dentista Journey — styles. Tokens first; everything derives from them. Single light look. */
img{max-width:100%}
[hidden]{display:none!important}

/* Layout concept: an Emons-style cinematic journey. The page opens inside a real-time 3D render of a dental
   clinic (wide establishing shot with the headline over it), then a pinned camera walks five numbered chapters
   with a tablet or phone showing the real Dentista app; below, short big-type editorial blocks on a quiet ground.
   Single light look by the user's choice, so the page reads the same on any host theme. */
:root{
  --bg:#F3F6F5; --surface:#FFFFFF; --line:#D6E0DE;
  --fg:#0E1A1C; --muted:#4F6563; --faint:#8AA09D;
  --accent:#008080; --accent-ink:#FFFFFF; --accent-deep:#006666;
  --amber:#C98A00; --orange:#F39C12; --red:#D63B2E; --blue:#2F62D9;
  --paper:#FFFFFF; --paper-fg:#101A1C; --paper-muted:#5B6F6D; --paper-line:#DCE5E3; --app-bg:#F3F3F8;
  --stage:#E6EEEC; --stage-ink:#0E1A1C;
  --display:"Archivo","Archivo Expanded","Helvetica Neue",Arial,sans-serif;
  --body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gutter:clamp(16px,5vw,72px);
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-stretch:100%;letter-spacing:-0.03em;line-height:.95;margin:0;text-wrap:balance;font-weight:800}
p{margin:0}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.wrap{padding-inline:var(--gutter)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- Nav ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;display:flex;align-items:center;gap:28px;padding-block:12px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:background-color .4s ease,border-color .4s ease,backdrop-filter .4s ease,-webkit-backdrop-filter .4s ease}
/* Over the 3D journey the bar is clear, so the scene runs to the top of the screen; once the last chapter has
   scrolled away it turns translucent again. journey.js adds .clear while the journey is under the bar, .dark
   while the stage is at dusk, and pulls the journey up under the bar by --navh. Without the script the bar stays
   translucent and nothing overlaps. */
.nav.clear{background-color:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.brand .wm,.nav .links>a,.nav summary{transition:color .6s}
/* Grey links read faintly over the daytime sky, so while the bar is clear they take the ink colour. */
.nav.clear:not(.dark) .links>a,.nav.clear:not(.dark) summary{color:var(--fg)}
.nav.clear:not(.dark) .links>a:hover,.nav.clear:not(.dark) summary:hover{color:var(--accent-deep)}
.nav.clear.dark .brand .wm,.nav.clear.dark .links>a:hover,.nav.clear.dark details[open] summary{color:#EEF3F2}
.nav.clear.dark .links>a,.nav.clear.dark summary{color:#B9CCC9}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.brand img{width:34px;height:34px;flex:none;display:block}
/* The wordmark as live text (Branding/README.md), so it follows the bar's colour at dusk: "dentista." in Archivo 800,
   lowercase with its full stop. */
.wm{display:block;font-family:var(--display);font-weight:800;font-size:23px;letter-spacing:-.035em;line-height:1;color:var(--fg);white-space:nowrap}
.wm b{font-weight:inherit}
.nav .links{display:flex;gap:22px;align-items:center;font-size:14px;font-weight:500}
.nav .links a{text-decoration:none;color:var(--muted)}
.nav .links a:hover{color:var(--fg)}
.nav details{position:relative}
.nav summary{list-style:none;cursor:pointer;color:var(--muted);font-size:14px;font-weight:500;display:flex;gap:6px;align-items:center}
.nav summary::-webkit-details-marker{display:none}
.nav details[open] summary{color:var(--fg)}
.menu{position:absolute;right:0;top:calc(100% + 12px);width:300px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px;display:grid;gap:2px;box-shadow:0 20px 50px rgba(14,26,28,.14)}
.menu a{display:grid;gap:2px;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--fg)}
.menu a small{color:var(--muted);font-size:12.5px}
.menu a:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.platforms{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--faint);white-space:nowrap}
@media (max-width:760px){.nav .links .hide-sm,.platforms{display:none}.nav{gap:16px}}
/* On a phone the mark, its old "Patient records" line and three links came to ~420px and pushed the page sideways at
   375. The name already says what the line said, so it went; the mark and links tighten. */
@media (max-width:640px){
  .nav{gap:14px}
  .brand{gap:8px}
  .brand img{width:28px;height:28px}
  .wm{font-size:20px}
  .nav .links,.nav summary{gap:14px;font-size:13px}
  .nav summary{gap:4px}
}
/* 320px phones: 11px short even so. */
@media (max-width:360px){.nav{gap:10px}.nav .links{gap:10px}.nav .links,.nav summary{font-size:12.5px}.wm{font-size:18px}}

/* ---------- Journey (pinned) ---------- */
.journey{position:relative;height:calc(6 * 112vh + 100vh);background:var(--stage);margin-top:calc(-1 * var(--navh,0px))}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--stage);color:var(--stage-ink);--sr:230 238 236}
.scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.stills{position:absolute;inset:0;display:none}
.stage.mode-stills .stills{display:block}
.stage.mode-stills .scene{display:none}
.stills img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}
.stills img.on{opacity:1}
.scrim{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgb(var(--sr) / .9) 0%,rgb(var(--sr) / .5) 30%,rgb(var(--sr) / 0) 52%),
  linear-gradient(0deg,rgb(var(--sr) / .96) 0%,rgb(var(--sr) / .35) 30%,rgb(var(--sr) / 0) 52%)}
.film{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 95% at 50% 45%,transparent 55%,rgba(14,26,28,.22) 100%)}
.film::after{content:"";position:absolute;inset:0;opacity:.06;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.stage.night{--sr:24 44 48}
.stage.night .chap h2,.stage.night .chap p b,.stage.night .chap a.more,.stage.night .tab.on{color:#EEF3F2}
.stage.night .chap p,.stage.night .chap ul,.stage.night .chap .num small,.stage.night .tab,.stage.night .hint{color:#B9CCC9}
.stage.night .tabs{background:linear-gradient(0deg,rgba(24,44,48,.96),rgba(24,44,48,.7));border-top-color:rgba(255,255,255,.12)}
.stage.night .tab{border-right-color:rgba(255,255,255,.08)}
.chap h2,.chap p,.chap a.more,.tab,.tabs{transition:color .6s,background .6s}

/* boot: a small animated tooth, shown only if the scene takes a moment */
.boot{position:absolute;inset:0;z-index:9;background:var(--stage);display:grid;place-items:center;align-content:center;gap:14px;opacity:0;transition:opacity .5s ease;pointer-events:none}
.boot.show{opacity:1}
.boot .tooth{position:relative;width:52px;height:52px}
.boot .tooth img{width:52px;height:52px;display:block;animation:toothRock 1.6s ease-in-out infinite;transform-origin:50% 60%}
.boot .tooth i{position:absolute;inset:-7px;border-radius:50%;border:2px solid transparent;border-top-color:var(--accent);animation:spin 1.1s linear infinite}
.boot span{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
@keyframes toothRock{0%,100%{transform:rotate(-10deg) translateY(0)}50%{transform:rotate(10deg) translateY(-3px)}}
@keyframes spin{to{transform:rotate(360deg)}}
.stage.ready .boot{opacity:0}
@media (prefers-reduced-motion:reduce){.boot .tooth img,.boot .tooth i{animation:none}}

/* opener (hero over the wide shot) */
.opener{position:absolute;left:var(--gutter);top:50%;translate:0 -50%;z-index:6;width:min(680px,78vw)}
/* The platforms sit over the headline, as on the page this replaced, not in the top bar; the asterisk is
   answered by .foot below. On a phone .foot is hidden, so the asterisk goes with it. */
.opener .kicker{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--muted);margin-bottom:18px}
.opener h1{font-size:clamp(54px,9.2vw,150px);line-height:.88;letter-spacing:-.045em}
.opener h1 em{font-style:normal;color:var(--accent)}
.opener .lede{margin-top:22px;max-width:44ch;font-size:clamp(16px,1.35vw,21px)}
/* The bold sentence is its own line; the next one starts below it. */
.opener .lede b{font-weight:600;display:block}
.opener .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.opener .foot{margin-top:16px;font-size:13px;color:var(--muted);max-width:52ch}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;border:1px solid var(--line);color:var(--fg);background:color-mix(in srgb,var(--bg) 70%,transparent);font-family:var(--body);cursor:pointer}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn svg{width:16px;height:16px}

/* device */
.dev-wrap{position:absolute;right:6%;top:50%;translate:0 -50%;perspective:1600px;z-index:5;transition:opacity .7s ease,scale .9s cubic-bezier(.2,.7,.2,1),translate .9s cubic-bezier(.2,.7,.2,1)}
.dev-wrap.hidden{opacity:0;scale:.92;translate:0 calc(-50% + 48px);pointer-events:none}
.device{--w:min(660px,42vw);--h:calc((var(--w) - 28px) * .625 + 28px);width:var(--w);height:var(--h);border-radius:26px;background:#0E1316;padding:14px;
  box-shadow:0 60px 110px -30px rgba(14,26,28,.5),0 0 0 1px rgba(255,255,255,.08) inset;
  transform:rotateY(-14deg) rotateX(4deg);transform-style:preserve-3d;transition:width .9s cubic-bezier(.7,0,.2,1),height .9s cubic-bezier(.7,0,.2,1),border-radius .9s,padding .9s;position:relative}
.device.iphone{--w:min(286px,19.5vw);--h:calc((var(--w) - 20px) * 1.778 + 20px);border-radius:40px;padding:10px}
.device::after{content:"";position:absolute;left:50%;top:4px;transform:translateX(-50%);width:7px;height:7px;border-radius:999px;background:#2A3436;transition:top .9s}
.device.iphone::after{top:14px;left:auto;right:24px;transform:none}
.screen{position:absolute;inset:14px;border-radius:12px;overflow:hidden;background:#F3F3F8;transition:inset .9s,border-radius .9s}
.device.iphone .screen{inset:10px;border-radius:31px}
.scr{position:absolute;inset:0;opacity:0;transition:opacity .55s ease;background:#F3F3F8;overflow:hidden}
.scr.on{opacity:1}
.scr img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.tap{position:absolute;border-radius:50%;pointer-events:none;opacity:0;border:2px solid #008080;background:rgba(0,128,128,.25)}
.scr.live .tap{animation:ripple 1.3s ease-out 2}
@keyframes ripple{0%{opacity:.95;transform:scale(.5)}100%{opacity:0;transform:scale(2.8)}}
@keyframes float{50%{transform:translateY(-10px)}}
.dev-wrap.float{animation:float 6s ease-in-out infinite}

/* chapter panel */
.chapters{position:absolute;left:var(--gutter);bottom:96px;width:min(460px,70vw);z-index:6}
.chap{position:absolute;left:0;bottom:0;width:100%;opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.chap.on{opacity:1;transform:none;pointer-events:auto}
.chap .num{display:block}
.chap .num small{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
/* Three voices in a chapter, one job each: Archivo for the feature word only, Instrument Sans for everything read
   (the lead is the paragraph's bold first sentence, as in the opener), mono for the small label alone. The feature
   is sized so "Appointments", the longest, fits the 460px column. */
.chap h2{font-weight:900;font-size:clamp(44px,4.3vw,64px);line-height:.9;letter-spacing:-.04em;margin-top:10px;color:var(--accent)}
.chap p{margin-top:14px;color:var(--muted);font-size:clamp(14px,1.15vw,17px);max-width:46ch}
.chap p b{color:var(--fg);font-weight:600;display:block} /* own line, as in the opener */
.chap ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:6px;font-size:14px;color:var(--muted)}
.chap ul li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:2px;background:var(--accent);margin-right:10px;transform:translateY(-1px)}
.chap a.more{display:inline-flex;gap:8px;align-items:center;margin-top:18px;font-weight:600;font-size:14px;color:var(--fg);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:2px}

/* tabs */
.tabs{position:absolute;left:0;right:0;bottom:0;display:flex;z-index:7;border-top:1px solid var(--line);background:linear-gradient(0deg,rgba(243,246,245,.97),rgba(243,246,245,.75));backdrop-filter:blur(8px);padding-bottom:env(safe-area-inset-bottom,0px);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:1 0 auto;min-width:140px;background:none;border:0;border-right:1px solid var(--line);color:var(--muted);font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:16px 18px 18px;text-align:left;cursor:pointer;position:relative;display:flex;gap:10px;align-items:center}
.tab b{font-family:var(--display);font-weight:800;letter-spacing:-.02em;font-size:15px;color:var(--faint)}
.tab.on{color:var(--fg)}
.tab.on b{color:var(--accent)}
.tab i{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--accent);transition:width .15s linear}
.hint{position:absolute;right:6%;bottom:78px;z-index:6;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;gap:10px;align-items:center;transition:opacity .5s}
.hint.off{opacity:0}
.hint svg{width:14px;height:14px;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){
  .dev-wrap.float{animation:none}
  .chap,.scr,.device,.screen,.dev-wrap,.stills img{transition-duration:.01s}
  .hint svg,.boot svg{animation:none}
  /* The tap on 44 is still marked, as a still ring rather than a pulse. */
  .scr.live .tap{animation:none;opacity:.95}
}
@media (max-width:900px){
  .dev-wrap{right:4%;top:calc(6% + 74px);translate:none}
  .dev-wrap.hidden{translate:0 48px}
  .device{--w:min(400px,60vw)}
  .device.iphone{--w:min(210px,40vw)}
  .device,.dev-wrap.float .device{transform:rotateY(-10deg) rotateX(3deg)}
  .opener{top:auto;bottom:84px;translate:none;width:calc(100% - 2*var(--gutter))}
  .opener h1{font-size:clamp(44px,13vw,72px)}
  .opener .lede{font-size:15px}
  .opener .foot,.opener .kicker .star{display:none}
  .opener .kicker{font-size:11px;margin-bottom:12px}
  .chapters{width:calc(100% - 2*var(--gutter));bottom:78px}
  .chap h2{font-size:clamp(36px,11.5vw,48px)}
  .chap p{font-size:14px;max-width:none}
  .chap ul{display:none}
  .scrim{background:linear-gradient(0deg,rgb(var(--sr) / .98) 0%,rgb(var(--sr) / .8) 40%,rgb(var(--sr) / .1) 62%,rgb(var(--sr) / 0) 100%)}
  .tab{min-width:120px;padding:12px 14px 14px}
  .hint{display:none}
}

/* Phones: the screenshots were too small to read (a 205px tablet, a 150px phone at 375 wide), so the device is
   bigger, but still to the right and tilted as on desktop, so the 3D scene shows beside it. The phone is capped by
   the screen's height so it stays clear of the chapter text, but is never smaller than before (40vw). A thinner
   bezel gives the pixels to the screen. */
@media (max-width:640px){
  .dev-wrap{right:4%;top:calc(env(safe-area-inset-top,0px) + 66px)}
  .device{--w:min(80vw,520px);--h:calc((var(--w) - 18px) * .625 + 18px);padding:9px;border-radius:18px}
  .device .screen{inset:9px;border-radius:9px}
  .device.iphone{--w:min(58vw,max(40vw,calc((100svh - 430px) / 1.778 + 20px)));padding:8px;border-radius:32px}
  .device.iphone .screen{inset:8px;border-radius:25px}
  .device.iphone::after{top:11px;right:20px}
  .device,.dev-wrap.float .device{transform:rotateY(-14deg) rotateX(4deg)}
  /* Offline (chapter 04): the wide dusk shot has the lit tooth sign on the right, so the phone slides to the left
     and turns the other way. translate's 100% is the wrap's own width, which is the device's. */
  .dev-wrap.left{translate:calc(100% - 92vw) 0}
  .dev-wrap.left.hidden{translate:calc(100% - 92vw) 48px}
  .dev-wrap.left .device{transform:rotateY(14deg) rotateX(4deg)}
  .device{transition:width .9s cubic-bezier(.7,0,.2,1),height .9s cubic-bezier(.7,0,.2,1),border-radius .9s,padding .9s,transform .9s cubic-bezier(.7,0,.2,1)}
}

/* ---------- Editorial sections ---------- */
/* No border of its own: every section opens with an eyebrow whose rule already divides it from the one above. */
.section{padding-block:clamp(44px,6.5vw,88px)}
.eyebrow{display:flex;gap:14px;align-items:center;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:28px}
.eyebrow b{color:var(--accent);font-weight:500}
.eyebrow .sep{color:var(--faint)}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}
.h-xl{font-size:clamp(40px,6.2vw,104px)}
.h-lg{font-size:clamp(32px,4.6vw,72px)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,80px);align-items:start}
.split .copy{display:grid;gap:22px;font-size:clamp(17px,1.35vw,20px);max-width:58ch}
.split .copy p{color:var(--muted)}
.split .copy p strong{color:var(--fg);font-weight:600}
.split .copy p a{color:var(--accent);text-decoration:none;font-weight:600}
.split .copy .btn{justify-self:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.reveal.in{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:.2;transform:translateY(22px)}}
@media (prefers-reduced-motion:reduce){.reveal.in{animation:none}}

/* stats row (Emons-style) */
.stats{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--surface)}
.stat{padding:28px 24px;border-right:1px solid var(--line);display:grid;gap:8px;align-content:start;min-width:0}
.stat:last-child{border-right:0}
.stat .v{font-family:var(--display);font-weight:800;font-size:clamp(34px,3.6vw,56px);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.stat .v small{font-size:.5em;color:var(--accent);letter-spacing:0}
.stat .l{font-size:14px;color:var(--muted);line-height:1.35}
@media (max-width:1100px){.stats{grid-template-columns:repeat(3,1fr)}.stat:nth-child(3){border-right:0}.stat:nth-child(-n+3){border-bottom:1px solid var(--line)}}
@media (max-width:560px){.stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(3){border-right:1px solid var(--line)}.stat:nth-child(2n){border-right:0}.stat:nth-child(-n+4){border-bottom:1px solid var(--line)}.stat:nth-child(3){border-bottom:1px solid var(--line)}}

/* mockups in sections (styled after the real app) */
.mock{background:var(--paper);color:var(--paper-fg);border-radius:18px;border:1px solid var(--line);box-shadow:0 40px 80px -40px rgba(14,26,28,.3);overflow:hidden;font-size:14px;max-width:100%}
/* Title over label, never side by side: in a half-width card the two wrapped each other into four ragged lines. */
.mock .head{display:grid;gap:6px;padding:18px 22px;border-bottom:1px solid var(--paper-line)}
.mock .head b{font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-.02em}
.mock .head span{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--paper-muted)}
.mock table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.mock th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-muted);text-align:left;padding:10px 22px;border-bottom:1px solid var(--paper-line);font-weight:500}
.mock td{padding:11px 22px;border-bottom:1px solid var(--paper-line);vertical-align:top}
.mock td.r,.mock th.r{text-align:right;white-space:nowrap}
.mock tr.rev td{color:#B3261E;background:#FFF6F5}
.mock tr.rev td.r{text-decoration:line-through}
.mock .tot{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--paper-line)}
.mock .tot div{background:var(--paper);padding:16px 22px;display:grid;gap:4px}
.mock .tot .l{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-muted)}
.mock .tot .v{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.03em}
.mock .tot .now .v{color:var(--orange)}
/* The method moves under the entry whenever the card itself is narrow: four columns need ~540px, and the card's
   overflow:hidden (it rounds the corners) silently cut the Status column off rather than scrolling. A container
   query, not a viewport one, because the card is narrowest beside the copy on a small laptop (~430px at 1024),
   not only on a phone. */
.mock{container-type:inline-size}
.mock td small .m{display:none}
@container (max-width:540px){
  .mock th,.mock td{padding-inline:12px}
  .mock th:nth-child(2),.mock td:nth-child(2){display:none}
  .mock td small .m{display:inline}
  .mock table{font-size:13px}
  .mock .head,.mock .tot div,.mock .stamp{padding-inline:16px}
  .mock .tot .v{font-size:22px}
}
.mock .stamp{padding:12px 22px;font-family:var(--mono);font-size:11px;color:var(--paper-muted);letter-spacing:.04em;border-top:1px solid var(--paper-line)}
.mock .app{background:var(--app-bg);padding:16px 18px;display:grid;gap:12px}
.mock .app .card{background:#fff;border-radius:14px;overflow:hidden}
.mock .app .row{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid #ECECF2;font-size:15px}
.mock .app .row:last-child{border-bottom:0}
.mock .app .row .k{display:flex;gap:10px;align-items:center}
.mock .app .row .v{color:#6B6B75;text-align:right}
.mock .app .row.warn{color:var(--orange);font-weight:500}
.mock .app .row.act{color:var(--accent);font-weight:500}
.mock .app .row .v.orange{color:var(--orange);font-weight:600}
.mock .app .sec{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#7A7A85;padding:4px 4px 0}
.mock .app .name{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.02em;padding:4px 4px 2px}
.mock .app .chips{display:flex;flex-wrap:wrap;gap:6px;padding:12px 16px}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;padding:5px 9px;border-radius:7px;background:#F3F3F8;color:#2B2B33;border:1px solid #E6E6EE}
.chip i{width:10px;height:10px;border-radius:2px;display:inline-block}
.chip.caries i{background:#B5573F}.chip.filling i{background:#1E8C86}.chip.crown i{background:#fff;border:2px solid #0B4F4B;box-sizing:border-box}.chip.rootcanal i{background:#7A86B3}.chip.missing i{background:#9AA0A6}
.pill{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:5px;background:#E6F0EF;color:#008080;vertical-align:middle}
.pill.red{background:#FBE3E0;color:#B3261E}
.pill.grey{background:#E8ECEB;color:#5B6F6D}
.pill.amber{background:#FFF0CC;color:#8A5B00}

/* privacy panels */
.panels{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
.panel{border:1px solid var(--line);border-radius:16px;padding:24px;display:grid;gap:14px;align-content:start;background:var(--surface);min-width:0}
.panel .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.panel h3{font-size:24px}
.panel p{color:var(--muted);font-size:15px}
@media (max-width:900px){.panels{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.panels{grid-template-columns:1fr}}

/* status table */
.table{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--surface)}
.table .tr{display:grid;grid-template-columns:200px 1fr;gap:20px;padding:20px 24px;border-bottom:1px solid var(--line);font-size:16px}
.table .tr:last-child{border-bottom:0}
.table .k{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);padding-top:4px}
.table .v{color:var(--fg)}
@media (max-width:640px){.table .tr{grid-template-columns:1fr;gap:6px}}

/* footer */
/* A sign-off, not another headline: the name and what it is on one quiet row with the links.
   The platforms are not repeated here; "Where it stands" lists them just above. */
.footer{border-top:1px solid var(--line);padding-block:36px 32px;display:grid;gap:24px}
.footer .row{display:flex;flex-wrap:wrap;gap:20px 32px;justify-content:space-between;align-items:center;font-size:14px;color:var(--muted)}
.footer .row nav{display:flex;gap:20px;flex-wrap:wrap}
.footer a{text-decoration:none;color:var(--muted)}
.footer a:hover{color:var(--fg)}
.footer .sign{display:flex;gap:12px;align-items:center}
.footer .sign img{width:40px;height:40px;flex:none}
.footer .sign .wm{font-size:25px}
.footer .by{display:flex;align-items:center;gap:10px;white-space:nowrap}
.footer .by img{display:block;height:21px;width:auto}
/* one line on a wide screen, the ClinicAide link in the middle; narrower, it drops below the Guide links */
@media (min-width:1060px){.footer .row{display:grid;grid-template-columns:1fr auto 1fr}.footer .sign{justify-self:start}.footer .row nav{justify-self:end}}
@media (max-width:1059px){.footer .by{order:3;flex-basis:100%}}
/* 320px phones: a chapter's bold first sentence must stay on one line, which takes a pixel less than the 14px set
   for phones above. Last in the file so it outranks that rule. */
@media (max-width:360px){.chap p{font-size:13px}}
/* the record mock's Medical Alerts block: red header, icons coloured by severity as in the app */
.mock .app .sec.alert{color:var(--red);font-weight:600;display:flex;gap:6px;align-items:center}
.mock .app .row .ic.red{color:var(--red)}
.mock .app .row .ic.orange{color:var(--orange)}
.mock .app .row .v.red{color:var(--red);font-weight:500}
/* chapter 04: no Wi-Fi and no signal, blinking red in the phone's status bar, left of the screenshot's own battery
   icon (the screen is 540x960, the same 9:16 as the iphone frame, so percentages land on the screenshot). Drawn
   larger than real status icons on purpose: at this size a true-to-scale icon would be a few pixels. */
.nosig{position:absolute;top:-.5%;right:10.6%;display:flex;gap:1.6%;width:13%;color:#E5372C;pointer-events:none}
.nosig svg{width:50%;height:auto;filter:drop-shadow(0 0 3px rgba(229,55,44,.45))}
.scr.on .nosig{animation:nosig 1.4s ease-in-out infinite}
@keyframes nosig{0%,50%{opacity:1}65%,85%{opacity:.18}100%{opacity:1}}
@media (prefers-reduced-motion: reduce){.scr.on .nosig{animation:none}}