/* Sentry Seal — marketing site. Brand per CLAUDE.md rule 1 (locked):
   mark blue light->deep, wordmark Playfair in --wordmark-ink, cyan = the
   interactive accent, Fraunces display / Inter UI / Space Grotesk numbers,
   cool paper light surface, ink navy dark surface.
   Layout: a practice ledger -- pages read as entries down a single column
   with a hairline margin; product screens sit in plain frames beside them. */
:root{
  --bg:#ffffff; --panel:#ffffff; --panel2:#f1f4f9; --line:#e1e6ef; --tint:#f6f8fc;
  --ink:#1f2733; --muted:#4a5770; --faint:#5f6b82;
  --cyan:#23756a; --cyan-ink:#ffffff; --cyan-wash:rgba(35,117,106,.10);
  --logo-sky:#6fa8ff; --logo-deep:#2f6bed; --wordmark-ink:#1e4fb5;
  --navy:#0e1626; --navy-2:#141d30; --navy-ink:#e8edf6; --navy-muted:#a3b2cb; --navy-line:#2a3752;
  --red:#a8392d; --amber:#7d5e22; --green:#2a6b4a;
  --shadow:0 1px 2px rgba(14,22,38,.06),0 12px 32px -12px rgba(14,22,38,.22);
  --display:'Playfair Display',Georgia,'Times New Roman',serif;
  --ui:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --num:'Space Grotesk','Inter',system-ui,sans-serif;
  --wordmark:'Playfair Display',Georgia,serif;
  --measure:64ch; --wrap:1120px;
  color-scheme:light;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--ui);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--cyan);text-underline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.12;text-wrap:balance;margin:0;letter-spacing:-.01em;font-variant-numeric:lining-nums}
h1{font-size:clamp(2.3rem,5.2vw,3.9rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3,h2.h3{font-size:1.28rem;font-weight:600}
p{margin:0}
.num{font-family:var(--num);font-variant-numeric:tabular-nums}
.eyebrow{font:600 .76rem/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--wordmark-ink)}
.hl{color:var(--logo-deep)}
.lede{font-size:1.18rem;color:var(--muted);max-width:var(--measure)}

/* ---- frame: one outer gutter, bands span the width */
.band{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:var(--wrap);margin:0 auto}
.section{padding-block:clamp(56px,8vw,104px)}
.section + .section{border-top:1px solid var(--line)}
.section.tint{background:var(--tint)}
.stack{display:grid;gap:18px;align-content:start}
.stack-lg{display:grid;gap:28px;align-content:start}

/* ---- header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:24px;min-height:66px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--wordmark-ink)}
.brand b{font:600 1.32rem/1 var(--wordmark);letter-spacing:.005em}
.brand svg{flex:none}
.nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav a{color:var(--muted);text-decoration:none;font-size:.95rem;font-weight:500;padding:8px 12px;border-radius:8px}
.nav a:hover{color:var(--ink);background:var(--panel2)}
.nav a[aria-current="page"]{color:var(--ink);background:var(--panel)}
.nav a.cta-sm{background:var(--cyan);color:var(--cyan-ink)}
.menu{display:none;margin-left:auto}
.menu summary{list-style:none;cursor:pointer;font-weight:600;padding:8px 12px;border:1px solid var(--line);border-radius:8px}
.menu summary::-webkit-details-marker{display:none}
.menu nav{display:grid;padding:8px 0 14px}
.menu nav a{padding:10px 4px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
@media (max-width:860px){ .nav{display:none} .menu{display:block;width:auto} .menu[open]{width:100%} }

/* ---- buttons */
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;font:600 1rem/1 var(--ui);padding:14px 20px;border-radius:10px;text-decoration:none;border:1px solid transparent}
.btn.primary{background:var(--cyan);color:var(--cyan-ink)}
.btn.ghost{border-color:var(--line);color:var(--ink);background:var(--panel)}
.btn:hover{filter:brightness(1.05)}


/* ---- two audiences */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:760px){ .duo{grid-template-columns:minmax(0,1fr)} }
.aud{border-radius:18px;padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit;border:1px solid var(--line);background:var(--panel);transition:background-color .2s,border-color .2s,box-shadow .2s}
.aud:hover,.aud:focus-visible{background:var(--tint);border-color:#cdd6e4;box-shadow:var(--shadow)}
.aud .tag{font:600 .76rem/1 var(--ui);letter-spacing:.14em;text-transform:uppercase}
.aud.desk .tag{color:var(--cyan)}
.aud.doc .tag{color:var(--wordmark-ink)}
.aud ul{margin:0;padding-left:1.1em;display:grid;gap:6px}
.aud .go{font-weight:600;margin-top:auto;padding-top:4px}
.aud.desk .go{color:var(--cyan)}
.aud.doc .go{color:var(--wordmark-ink)}
.muted{color:var(--muted)}

/* ---- steps (a real sequence) */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:s}
@media (max-width:860px){ .steps{grid-template-columns:minmax(0,1fr)} }
.step{display:grid;gap:10px;padding-top:18px;border-top:2px solid var(--logo-deep)}
.step h3,.step h2.h3{color:var(--ink)}
.step .n{font:600 .9rem/1 var(--num);color:var(--logo-deep)}

/* ---- feature blocks with a screen */
.feature{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:start}
.feature.flip > :first-child{order:2}
@media (max-width:900px){ .feature,.feature.flip{grid-template-columns:minmax(0,1fr)} .feature.flip > :first-child{order:0} }
.feature .copy{display:grid;gap:14px;min-width:0}
.screen{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.screen img{width:100%;height:auto}
.screen figcaption{font-size:.86rem;color:var(--faint);padding:10px 14px;border-top:1px solid var(--line)}
.screen.narrow{max-width:380px;justify-self:center}

.checks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.checks li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start}
.checks li::before{content:"";width:16px;height:16px;margin-top:5px;border-radius:50%;border:2px solid var(--cyan);box-shadow:inset 0 0 0 3px var(--panel),inset 0 0 0 8px var(--cyan)}
.checks b{font-weight:600}



/* alarm sample rows */
.alarms{display:grid;gap:10px}
.alarm{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;padding:14px 16px;border-radius:12px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--red)}
.alarm.amber{border-left-color:var(--amber)}
.alarm b{font-weight:600}
.alarm .num{font-weight:600}
.alarm span.muted{grid-column:1/-1;font-size:.92rem}

/* ---- story */
.story-head{display:grid;gap:20px;padding-bottom:30px;border-bottom:1px solid var(--line)}
.story-head h1{font-size:clamp(2.4rem,5.6vw,4.2rem)}
.story-open{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,5vw,80px);padding-top:clamp(28px,4vw,48px);align-items:start}
.story-open .prose{max-width:none}
.chapters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,5vw,64px) clamp(28px,5vw,80px)}
.chapter{display:grid;gap:14px;align-content:start;padding-top:20px;border-top:2px solid var(--logo-deep);font-size:1.05rem}
.chapter .n{font:600 .9rem/1 var(--num);color:var(--wordmark-ink)}
.chapter h2{font-size:clamp(1.45rem,2.5vw,1.85rem)}
.signoff{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.sig-block{display:flex;align-items:center;gap:16px}
.sig-block > div{display:grid;gap:2px}
.signature{font:italic 600 clamp(1.5rem,2.6vw,1.9rem)/1.15 var(--display);color:var(--ink)}
@media (max-width:860px){ .story-open,.chapters{grid-template-columns:minmax(0,1fr)} }
.byline{display:flex;align-items:center;gap:14px}
.byline .badge{flex:none;width:52px;height:52px;border-radius:50%;background:var(--tint);border:1px solid var(--line);display:grid;place-items:center}
.byline > div{display:grid;gap:2px}
.byline .sig{font-size:1.2rem}
.prose{display:grid;gap:18px;max-width:var(--measure);font-size:1.08rem}
.prose h2{margin-top:12px}
.pull{font:500 clamp(1.4rem,2.6vw,1.9rem)/1.35 var(--display);color:var(--ink);border-left:3px solid var(--logo-deep);padding-left:18px}
.sig{font:600 1.3rem/1.2 var(--display)}

/* ---- legal / long text */
.legal{max-width:760px;display:grid;gap:16px}
.legal h2{font-size:1.4rem;margin-top:18px}
.legal ul{margin:0;padding-left:1.2em;display:grid;gap:6px}
.legal .meta{color:var(--faint);font-size:.95rem}


/* ---- contact */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px)}
@media (max-width:860px){ .contact{grid-template-columns:minmax(0,1fr)} }
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;display:grid;gap:14px}
.mailline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mailline code{font:600 1.05rem/1 var(--num);background:var(--panel2);padding:10px 12px;border-radius:8px;user-select:all}
.copy-btn{font:600 .9rem/1 var(--ui);padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer}
label{font-weight:600;font-size:.92rem;display:grid;gap:6px}
input,select,textarea{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;width:100%}
textarea{min-height:110px;resize:vertical}
.form{display:grid;gap:14px}
.note{font-size:.9rem;color:var(--faint)}

/* ---- footer */
.foot{border-top:1px solid var(--line);padding-block:40px}
.foot .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:24px}
@media (max-width:700px){ .foot .wrap{grid-template-columns:minmax(0,1fr)} }
.foot nav{display:grid;gap:8px}
.foot a{color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--ink)}
.foot small{color:var(--faint)}


/* ---- status chips */
.chip{font:600 .78rem/1 var(--ui);padding:6px 9px;border-radius:999px;background:var(--panel2);color:var(--muted);white-space:nowrap}
.chip.ok{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green)}
.chip.bad{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red)}
.chip.warn{background:color-mix(in srgb,var(--amber) 14%,transparent);color:var(--amber)}


.stack-lg:has(> .feature){gap:clamp(56px,7vw,96px)}

/* ---- the checks ledger: EOB closed vs bank deposit */
.ledgerbox{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.lb-head,.lb-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:12px 18px;align-items:center;padding:12px 18px}
.lb-head{font:600 .74rem/1.2 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);background:var(--panel2)}
.lb-row{border-top:1px solid var(--line);font-size:.95rem}
.lb-row b{font-weight:600}
@media (max-width:640px){ .lb-head{display:none} .lb-row{grid-template-columns:minmax(0,1fr)} }
/* ™ on the wordmark ("Sentry Seal" is a trademark application, 2026-10-04) */
.brand b::after{content:"\2122";font:500 19px/0 var(--ui);margin-left:.04em}

/* Accessibility: keyboard users can jump past the header. */
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}

/* ======================================================= HOME: hero band
   The top of the home page sits on its own surface (a soft blue wash with
   the seal's rings held still behind it) so it reads as the front cover,
   not one more white band. */
.hero-band{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(44px,6.5vw,92px) clamp(52px,7.5vw,100px);border-bottom:1px solid var(--line);
  background:radial-gradient(55% 70% at 80% 45%,rgba(111,168,255,.30),transparent 70%),radial-gradient(42% 55% at 4% 4%,rgba(111,166,138,.20),transparent 70%),linear-gradient(180deg,#e9f0fc 0%,#f3f7fd 62%,#fafbfe 100%)}
.hero-rings{position:absolute;z-index:-1;width:min(1080px,150vw);aspect-ratio:1;right:max(-300px,-22vw);top:50%;transform:translateY(-50%);pointer-events:none}
.hero-rings path{fill:none;stroke:#2f6bed;stroke-width:1.2}
.hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero-copy{display:grid;gap:24px;min-width:0}
.hero h1{font-size:clamp(2.35rem,4.9vw,3.75rem)}
.slogan{font:600 1.02rem/1 var(--display);color:var(--logo-deep);letter-spacing:.03em}
@media (max-width:900px){ .hero{grid-template-columns:minmax(0,1fr)} .hero-rings{right:50%;top:auto;bottom:-280px;transform:translateX(50%)} }

/* the patient's tablet */
.tablet{margin:0;justify-self:center;width:min(100%,430px);padding:12px;border-radius:36px;position:relative;
  background:linear-gradient(150deg,#26344f,#0e1626 62%);box-shadow:0 44px 80px -34px rgba(14,22,38,.6),inset 0 1px 0 rgba(255,255,255,.1)}
.tablet::before{content:"";position:absolute;top:5px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#3a4866}
.tablet-screen{position:relative;overflow:hidden;background:#f7f9fc;border-radius:26px;padding:16px 16px 20px;display:grid;justify-items:center;text-align:center}

/* ---- the seal ceremony (ported from the app's patient screen) */
.cer{--sage:#6fa68a;--sage-d:#4f7d65;--teal:#3a9e90;--gold:#c9a35a}
.cer-top{justify-self:stretch;display:flex;align-items:center;gap:7px;padding:2px 4px 12px;margin-bottom:14px;border-bottom:1px solid var(--line);font:600 .7rem/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.cer-head,.cer-sub,.cer-cap{display:grid;justify-items:center}
.cer-head > span,.cer-sub > span,.cer-cap > span{grid-area:1/1;transition:opacity .45s}
.cer-head{font:600 1.32rem/1.2 var(--display);color:var(--ink)}
.cer-sub{font-size:.86rem;line-height:1.45;color:var(--muted);margin-top:6px;max-width:30ch}
.cer .t2,.cer.done .t1{opacity:0} .cer.done .t2{opacity:1}
.cer-x{position:relative;width:340px;height:204px;margin:20px 0 6px}
.cp{position:absolute;top:0;width:112px;display:grid;justify-items:center;transition:opacity .3s}
.cp.you{left:0} .cp.desk{right:0}
.cp-seal{position:relative;width:112px;height:112px;transition:transform 1s cubic-bezier(.6,.05,.25,1)}
.cp-seal svg{width:100%;height:100%;overflow:visible;display:block}
.ptrack{fill:transparent;stroke:rgba(31,39,51,.13);stroke-width:3;transition:fill .45s}
.pdash{fill:none;stroke-width:1.6;stroke-dasharray:3 6;stroke-opacity:.45}
.pring{fill:none;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1)}
.cp.you .pring{stroke:var(--sage);filter:drop-shadow(0 0 5px rgba(111,166,138,.55))} .cp.you .pdash{stroke:var(--sage)}
.cp.desk .pring{stroke:var(--teal);filter:drop-shadow(0 0 5px rgba(58,158,144,.5))} .cp.desk .pdash{stroke:var(--teal)}
.cp-amt{position:absolute;inset:0;display:grid;place-items:center;padding-bottom:11%;font:600 18px/1 var(--ui);color:#2f6bed}
.cp-amt > span{grid-area:1/1;transition:opacity .35s}
.cp-amt .dash{color:var(--faint)} .cp-amt .val{opacity:0}
.cer.desk-amt .cp-amt .val{opacity:1} .cer.desk-amt .cp-amt .dash{opacity:0}
.cp-role{margin-top:10px;font:600 .66rem/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.cp-who{margin-top:5px;font:italic 500 .92rem/1.2 var(--display);color:var(--ink)}
.cp-st{display:grid;margin-top:6px;font:600 .74rem/1 var(--ui)}
.cp-st > span{grid-area:1/1;transition:opacity .3s} .cp-st .w{color:var(--faint)} .cp-st .c{color:var(--green);opacity:0}
.cer.you-ok .you .pring,.cer.desk-ok .desk .pring{stroke-dashoffset:0}
.cer.you-ok .you .ptrack{fill:rgba(111,166,138,.13)} .cer.desk-ok .desk .ptrack{fill:rgba(58,158,144,.13)}
.cer.you-ok .you .cp-st .w,.cer.desk-ok .desk .cp-st .w{opacity:0}
.cer.you-ok .you .cp-st .c,.cer.desk-ok .desk .cp-st .c{opacity:1}
.cer:not(.you-ok) .you .cp-seal,.cer:not(.desk-ok) .desk .cp-seal{animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
/* the link between the two: lights up when both have confirmed */
.cer-link{position:absolute;left:112px;right:112px;top:56px;transition:opacity .3s}
.cer-link .wire{position:absolute;left:2px;right:2px;top:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(111,166,138,.35),rgba(58,158,144,.35))}
.cer.live .cer-link .wire{background:linear-gradient(90deg,var(--sage),var(--teal),var(--sage));background-size:200% 100%;animation:flow 1.1s linear infinite;box-shadow:0 0 12px rgba(111,166,138,.45)}
@keyframes flow{0%{background-position:200% 0}100%{background-position:-200% 0}}
.cer-link .node{position:absolute;left:50%;top:0;width:28px;height:28px;transform:translate(-50%,-50%);border-radius:50%;background:#fff;border:1.5px solid var(--line);display:grid;place-items:center;color:var(--faint);transition:all .4s}
.cer-link .node svg{width:13px;height:13px;fill:currentColor}
.cer.live .cer-link .node{border-color:var(--sage);color:var(--sage-d);box-shadow:0 0 18px rgba(111,166,138,.5);transform:translate(-50%,-50%) scale(1.12)}
/* the two shields slide together ... */
.cer.sealing .cer-link,.cer.done .cer-link{opacity:0}
.cer.sealing .you .cp-seal{transform:translateX(114px) scale(1.16)}
.cer.sealing .desk .cp-seal{transform:translateX(-114px) scale(1.16)}
.cer.sealing .cp-role,.cer.sealing .cp-who,.cer.sealing .cp-st,.cer.sealing .cp-amt{opacity:0;transition:opacity .35s}
.cer.done .cp{opacity:0}
/* ... and lock into one seal */
.cer-merged{position:absolute;left:50%;top:-35px;width:200px;margin-left:-100px;opacity:0;transform:scale(.62);pointer-events:none}
.cer-merged svg{width:100%;height:auto;display:block;overflow:visible}
.cer.done .cer-merged{animation:vaultlock .42s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes vaultlock{0%{opacity:0;transform:scale(.62)}55%{opacity:1;transform:scale(1.08)}72%{transform:scale(.97)}100%{opacity:1;transform:scale(1)}}
.g-draw{stroke-dasharray:100;stroke-dashoffset:100} .g-rev,.g-pop{opacity:0}
.g-pop{transform-box:fill-box;transform-origin:center}
.cer.done .g-draw{animation:gdraw .8s ease forwards}
.cer.done .g-rev{animation:grev .5s ease .45s forwards}
.cer.done .g-pop{animation:gpop .55s cubic-bezier(.2,1.3,.4,1) .3s forwards}
.cer.done .cer-merged svg{animation:sealGlow 2.6s ease-in-out .7s 1}
@keyframes gdraw{to{stroke-dashoffset:0}}
@keyframes grev{to{opacity:1}}
@keyframes gpop{0%{opacity:0;transform:scale(.3)}70%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
@keyframes sealGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(201,163,90,0))}50%{filter:drop-shadow(0 0 18px rgba(201,163,90,.55))}}
.cer-merged .flash{position:absolute;left:50%;top:43%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:2px solid var(--gold);opacity:0}
.cer.done .flash{animation:flashring .55s ease-out .12s}
@keyframes flashring{0%{opacity:0;transform:scale(.7)}40%{opacity:.85}100%{opacity:0;transform:scale(1.5)}}
/* rings press outward from the seal, like a stamp settling */
.rip{position:absolute;left:50%;top:56px;border-radius:50%;border:2px solid currentColor;opacity:0;transform:translate(-50%,-50%) scale(.18);pointer-events:none}
.rip.r1{width:120px;height:120px;color:var(--gold)} .rip.r2{width:150px;height:150px;color:#6fa8ff} .rip.r3{width:180px;height:180px;color:#2f6bed}
.cer.done .rip{animation:rippleOut 1.1s cubic-bezier(.2,.7,.3,1) forwards}
.cer.done .rip.r2{animation-delay:.14s} .cer.done .rip.r3{animation-delay:.28s}
@keyframes rippleOut{0%{transform:translate(-50%,-50%) scale(.18);opacity:.85}70%{transform:translate(-50%,-50%) scale(1.6);opacity:.3}100%{transform:translate(-50%,-50%) scale(2.5);opacity:0}}
/* one line saying what is happening */
.cer-cap{min-height:2.7em;align-items:center;font-size:.9rem;line-height:1.35;color:var(--muted);max-width:32ch}
.cer-cap > span{opacity:0} .cer-cap .s3{color:var(--ink);font-weight:600}
.cer[data-step="0"] .s0,.cer[data-step="1"] .s1,.cer[data-step="2"] .s2,.cer[data-step="3"] .s3{opacity:1}
/* between loops: fade out, reset unseen, fade back in */
.cer.out .cer-x,.cer.out .cer-cap,.cer.out .cer-head,.cer.out .cer-sub{opacity:0}
.cer-x,.cer-head,.cer-sub,.cer-cap{transition:opacity .5s}
.cer.nt,.cer.nt *{transition:none!important;animation:none!important}
/* the finished seal, still: no JavaScript, or reduced motion */
.cer.is-static .cer-merged{opacity:1;transform:none;animation:none}
.cer.is-static .g-draw{stroke-dashoffset:0;animation:none}
.cer.is-static .g-rev,.cer.is-static .g-pop{opacity:1;animation:none}
.cer.is-static .rip,.cer.is-static .flash{display:none}
.cer.is-static .cer-merged svg{animation:none}
@media (max-width:420px){ .cer-x{transform:scale(.8);transform-origin:top center;margin-bottom:-35px} }

/* ======================================================= HOME: the problem */
.facts{padding-block:clamp(44px,6vw,76px)}
.facts .wrap{display:grid;gap:26px}
.facts-head{display:grid;gap:14px;max-width:760px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border-top:1px solid var(--line)}
.stats > div{padding:26px 28px 4px 0;display:grid;gap:10px;align-content:start}
.stats > div + div{padding-left:28px;border-left:1px solid var(--line)}
.stats dt{font-size:clamp(2.3rem,4.6vw,3.3rem);font-weight:600;line-height:1;color:var(--logo-deep);letter-spacing:-.02em}
.stats dd{margin:0;color:var(--muted);max-width:28ch}
.src{font-size:.86rem;color:var(--faint)}
.src a{color:var(--faint)}
@media (max-width:760px){ .stats{grid-template-columns:minmax(0,1fr)} .stats > div,.stats > div + div{padding:20px 0;border-left:0} .stats > div + div{border-top:1px solid var(--line)} }

/* ======================================================= HOME: the founder */
.quote-band{background:var(--tint);border-block:1px solid var(--line);padding-block:clamp(52px,7vw,92px)}
.quote{margin:0 auto;max-width:880px;display:grid;justify-items:center;text-align:center;gap:20px}
.quote blockquote{margin:0}
.quote blockquote p{font:500 clamp(1.45rem,3vw,2.15rem)/1.38 var(--display);color:var(--ink);text-wrap:balance}
.quote blockquote p::before{content:"\201C"} .quote blockquote p::after{content:"\201D"}
.quote figcaption{display:grid;gap:4px}
.quote figcaption b{font:600 1.1rem/1.2 var(--display);color:var(--ink)}
.quote figcaption span{color:var(--muted);font-size:.95rem}
.quote-go{font-weight:600}
.quote-band + .section{border-top:0}
.cer.done .cp-seal{animation:none}

/* ™ one size everywhere: the bare glyph is a speck in body text and a
   blob in a headline. Clamp so it reads at 17px and stays small at 60px. */
.tm{font:500 19px/0 var(--ui);margin-left:.04em;letter-spacing:0}
/* in a headline: half size, lifted so its top meets the capitals */
:is(h1,h2,h3) .tm{font-size:.5em;vertical-align:.73em}
.h1-sm{font-size:clamp(2rem,3.6vw,2.75rem)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* doctor page: big screenshots under their words */
.feature-wide{display:grid;gap:clamp(22px,3vw,34px)}
.fw-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:end}
.fw-copy > div{display:grid;gap:14px;min-width:0}
@media (max-width:860px){ .fw-copy{grid-template-columns:minmax(0,1fr)} }
.screen.big > a{display:block}
.screen.big figcaption a{color:var(--cyan);font-weight:600;white-space:nowrap}

/* ---- contact form */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-grid .full{grid-column:1/-1}
@media (max-width:560px){ .form-grid{grid-template-columns:minmax(0,1fr)} }
label > span{display:block}
.req{color:var(--red)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--cyan);outline-offset:1px;border-color:var(--cyan)}
input,select,textarea{border-color:#c3ccdb}
button.btn{cursor:pointer}
button.btn:disabled{opacity:.6;cursor:wait}
.hp{display:none}
.form-status{min-height:1.4em;font-weight:600}
.form-status:empty{display:none}
.form-status.ok{color:var(--green)}
.form-status.bad{color:var(--red)}

/* ======================================================= HOME: dual-confirmed cash */
.cash-band{background:radial-gradient(60% 55% at 50% 0%,rgba(111,168,255,.16),transparent 70%),var(--bg)}
.cash{display:grid;gap:clamp(30px,4vw,48px)}
.cash-head{max-width:860px;margin:0 auto;text-align:center;display:grid;gap:16px;justify-items:center}
.cash-head h2{font-size:clamp(1.9rem,4vw,3rem)}
.cash-head .lede{max-width:64ch;text-wrap:balance}
/* the what-if demo */
.whatif{background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:clamp(16px,3vw,28px);display:grid;gap:20px}
.wi-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.wi-top h3{font-size:1.25rem}
.wi-tabs{display:flex;flex-wrap:wrap;gap:4px;background:var(--panel2);padding:5px;border-radius:12px}
.wi-tabs [role=tab]{font:600 .93rem/1.1 var(--ui);padding:10px 14px;border-radius:9px;border:0;background:transparent;color:var(--muted);cursor:pointer}
.wi-tabs [role=tab]:hover{color:var(--ink)}
.wi-tabs [role=tab][aria-selected=true]{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(14,22,38,.14)}
.wi-panel{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr) minmax(0,1.45fr);gap:12px;align-items:stretch}
.wi-panel[hidden]{display:none}
.wi-side{border:1px solid var(--line);border-radius:14px;padding:16px 14px;display:grid;gap:6px;align-content:center;justify-items:center;text-align:center;min-width:0}
.wi-who{font:600 .72rem/1.3 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.wi-amt{font-size:clamp(1.7rem,3vw,2.2rem);font-weight:600;line-height:1.1;color:var(--ink)}
.wi-note{font-size:.86rem;color:var(--muted)}
.wi-op{display:grid;place-items:center;font:600 2rem/1 var(--num);color:var(--green)}
.wi-panel.bad .wi-op{color:var(--red)} .wi-panel.none .wi-op{color:var(--amber)}
.wi-panel.bad .wi-side.desk{border-color:color-mix(in srgb,var(--red) 45%,var(--line))}
.wi-panel.bad .wi-side.desk .wi-amt{color:var(--red)}
.wi-out{border-radius:14px;padding:16px 18px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-content:center;align-items:center;min-width:0}
.wi-out .ic{grid-row:span 2;width:54px;height:62px}
.wi-out b{font:600 1.2rem/1.2 var(--display);color:var(--ink);font-variant-numeric:lining-nums}
.wi-out p{grid-column:2;color:var(--muted);font-size:.94rem;line-height:1.5}
.wi-panel.ok .wi-out{background:color-mix(in srgb,var(--logo-sky) 11%,var(--panel));border:1px solid color-mix(in srgb,var(--logo-deep) 28%,var(--line))}
.wi-panel.bad .wi-out{background:color-mix(in srgb,var(--red) 7%,var(--panel));border:1px solid color-mix(in srgb,var(--red) 35%,var(--line))}
.wi-panel.none .wi-out{background:color-mix(in srgb,var(--amber) 8%,var(--panel));border:1px solid color-mix(in srgb,var(--amber) 35%,var(--line))}
.wi-cap{display:none}
.whatif:not(.js) .wi-tabs{display:none}
.whatif:not(.js) .wi-cap{display:block;grid-column:1/-1;font-weight:600}
@media (max-width:900px){ .wi-panel{grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr)} .wi-out{grid-column:1/-1} }
@media (max-width:520px){ .wi-panel{grid-template-columns:minmax(0,1fr)} .wi-op{height:22px;font-size:1.6rem} }
@media (prefers-reduced-motion:no-preference){
  .wi-panel.play .wi-out{animation:wiPop .5s cubic-bezier(.34,1.56,.64,1)}
  .wi-panel.play .wi-op{animation:wiPop .45s cubic-bezier(.34,1.56,.64,1)}
  .wi-panel.bad.play .wi-side.desk{animation:wiShake .5s .15s}
  .wi-panel.ok.play .wi-tick{stroke-dasharray:60;stroke-dashoffset:60;animation:wiTick .5s .25s ease-out forwards}
}
@keyframes wiPop{0%{transform:scale(.94);opacity:.4}100%{transform:none;opacity:1}}
@keyframes wiShake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@keyframes wiTick{to{stroke-dashoffset:0}}
/* the four steps at the desk */
/* what it ends */
.proofs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.proofs > div{background:var(--tint);border:1px solid var(--line);border-radius:16px;padding:20px;display:grid;gap:8px;align-content:start}
.proofs h3{font-size:1.1rem}
.proofs p{color:var(--muted);font-size:.95rem}
@media (max-width:1000px){ .proofs{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .proofs{grid-template-columns:minmax(0,1fr)} }

/* ======================================================= short-form blocks
   Owner 2026-10-15: "catch the attention within 5-10 seconds" -- a short
   headline, at most one short line, and a visual. */
.hero h1{font-size:clamp(2.7rem,6vw,4.6rem)}
.lede.big{font-size:clamp(1.18rem,1.8vw,1.38rem)}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tiles.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;display:grid;gap:8px;align-content:start}
.tile svg{width:22px;height:auto}
.tile h3{font-size:1.12rem}
.tile p{color:var(--muted);font-size:.96rem}
@media (max-width:1000px){ .tiles,.tiles.three{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .tiles,.tiles.three{grid-template-columns:minmax(0,1fr)} }
.cta-band{background:radial-gradient(60% 90% at 50% 100%,rgba(111,168,255,.24),transparent 70%),var(--bg);padding-block:clamp(56px,8vw,104px);border-top:1px solid var(--line)}
.cta{display:grid;justify-items:center;text-align:center;gap:18px}
.cta h2{font-size:clamp(1.9rem,4vw,2.8rem)}
.btns.center{justify-content:center}
.trust-chips{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.trust-chips li{font-size:.9rem;color:var(--muted);background:var(--tint);border:1px solid var(--line);border-radius:999px;padding:7px 12px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
/* hook (owner 2026-10-15: "create a sense of urgency ... a better hook") */
.stats.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.stats .hot dt{color:var(--red)}
@media (max-width:900px){ .stats.four{grid-template-columns:repeat(2,minmax(0,1fr))} .stats.four > div:nth-child(3){border-left:0;padding-left:0} .stats.four > div:nth-child(n+3){border-top:1px solid var(--line)} }
@media (max-width:760px){ .stats.four{grid-template-columns:minmax(0,1fr)} }
/* the promise runs across the top of the hero; the quote is the big line */
.hero-top{margin:0 0 clamp(28px,4vw,48px);padding-bottom:clamp(18px,2.5vw,26px);border-bottom:1px solid rgba(47,107,237,.16);text-align:center;font-size:clamp(1.7rem,3.4vw,2.6rem)}
.hero-quote{font:italic 500 clamp(2rem,4.1vw,3.25rem)/1.16 var(--display);color:var(--ink);letter-spacing:-.01em;text-wrap:balance}
/* six ways money goes missing, six ways it's caught */
.schemes{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.sc-head,.sc-list li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:8px 28px}
.sc-head{padding:12px 22px;background:var(--panel2);font:600 .74rem/1.2 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.sc-list{list-style:none;margin:0;padding:0}
.sc-list li{padding:16px 22px;border-top:1px solid var(--line);align-items:center}
.sc-bad,.sc-good{display:flex;gap:12px;align-items:flex-start;min-width:0}
.sc-bad b{font:600 1.06rem/1.35 var(--display);color:var(--ink)}
.sc-good > span:last-child{color:var(--muted);line-height:1.5}
.sc-x,.sc-ok{flex:none;width:24px;height:24px;margin-top:1px;border-radius:50%;display:grid;place-items:center;font:700 .78rem/1 var(--ui)}
.sc-x{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red)}
.sc-ok{background:color-mix(in srgb,var(--logo-deep) 12%,transparent);color:var(--wordmark-ink)}
@media (max-width:760px){ .sc-head{display:none} .sc-list li{grid-template-columns:minmax(0,1fr)} }

/* ===================================================== 2026-10-24 refresh
   Owner: keep the June site's cyan -> blue in highlighted words and buttons;
   give each section its own background so the page reads in chapters.
   Contrast (WCAG 2.1 AA): highlighted words are headings only (>= 3:1 needed):
   #0e9aa7 is 3.39:1 and #2f6bed 4.72:1 on white. Buttons use the June
   gradient exactly with #08233a text (4.96:1 at the blue end, 11.2:1 at cyan). */
:root{--grad-btn:linear-gradient(95deg,#3df0e0,#4d8cff);--grad-text:linear-gradient(95deg,#0e9aa7,#2f6bed);
  --bg-blue:#edf3fe;--bg-mint:#eaf7f6}
.hl{color:#2f6bed}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hl{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
    -webkit-box-decoration-break:clone;box-decoration-break:clone}
}
@media (forced-colors:active){ .hl{-webkit-text-fill-color:currentColor;background:none} }
.btn.primary,.nav a.cta-sm{background:var(--grad-btn);color:#08233a;border:0;border-radius:999px;font-weight:600}
.btn.ghost{border-radius:999px}
.btn.primary:hover,.nav a.cta-sm:hover{filter:brightness(1.04) saturate(1.05)}

/* section backgrounds: hero (rings) -> blue -> white -> navy -> mint -> white -> blue -> white -> CTA */
.section + .section{border-top:0}
.bg-white{background:#ffffff}
.bg-blue{background:var(--bg-blue)}
.bg-mint{background:var(--bg-mint)}
.cash-band.bg-mint{background:radial-gradient(60% 55% at 50% 0%,rgba(61,240,224,.16),transparent 70%),var(--bg-mint)}
.facts.bg-blue{border-bottom:0}
.quote-band.bg-navy{background:radial-gradient(70% 90% at 50% 0%,rgba(111,168,255,.18),transparent 70%),#0e1626;border:0}
.bg-navy .quote blockquote p,.bg-navy .quote figcaption b{color:#f3f6fb}
.bg-navy .quote figcaption span{color:#b4c2d9}
.bg-navy .quote-go{color:#8fd8ff}
.bg-navy .quote-go:hover{color:#ffffff}
/* the white cards inside tinted bands keep a visible edge */
.bg-blue .stats{border-top-color:#cfdcf3}
.bg-blue .stats > div + div{border-left-color:#cfdcf3}

/* homepage audience cards: each side gets its own wash; the desk card shows
   the proof the desk gets (their count, the patient's match, their name) */
.aud.desk{background:linear-gradient(180deg,#ecf8f7,#ffffff 70%);border-color:#cfe9e6}
.aud.doc{background:linear-gradient(180deg,#eef3fe,#ffffff 70%);border-color:#d5e0f5}
.aud.desk:hover,.aud.desk:focus-visible{background:#e3f4f2;border-color:#b9dfdb}
.aud.doc:hover,.aud.doc:focus-visible{background:#e6eefd;border-color:#c3d3f2}
.aud h3{font-size:clamp(1.3rem,2.2vw,1.55rem)}
.desk-proof{background:#ffffff;border:1px solid #d7e7e5;border-radius:14px;padding:12px 14px;display:grid;gap:6px;box-shadow:0 8px 22px -16px rgba(14,22,38,.35);max-width:360px}
.dp-row{display:flex;justify-content:space-between;gap:12px;font-size:.95rem;color:var(--muted)}
.dp-row b{color:var(--ink);font-weight:600}
.dp-seal{display:flex;align-items:center;gap:8px;border-top:1px dashed #cfe0de;padding-top:8px;margin-top:2px;font-size:.92rem;color:var(--ink)}
.dp-seal svg{flex:none}
.dp-ok{margin-left:auto;font-style:normal;font:600 .78rem/1 var(--ui);color:var(--green);background:rgba(42,107,74,.10);border-radius:999px;padding:5px 9px}
.doc-proof{border-color:#d8e2f4}
.doc-proof .dp-seal{border-top-color:#d5dff1}
.dp-bad{margin-left:auto;font-style:normal;font:600 .78rem/1 var(--ui);color:var(--red);background:rgba(168,57,45,.10);border-radius:999px;padding:5px 9px}
/* desk card: a little to-do list, the way the desk's Today screen reads */
.todo{gap:8px}
.td-h{font:600 .74rem/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.td{display:flex;gap:10px;align-items:baseline;font-size:.93rem;color:var(--ink)}
.td i{font-style:normal;font-weight:700;color:var(--wordmark-ink);flex:none;width:1em;text-align:center}
.td.done{color:var(--muted)}
.td.done i{color:var(--green)}
/* after every visit: three equal cards */
.after{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.after-c{background:#ffffff;border:1px solid #d5e0f5;border-radius:16px;padding:22px;display:grid;gap:10px;align-content:start;box-shadow:0 8px 22px -18px rgba(14,22,38,.4)}
.after-who{font:600 .74rem/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--wordmark-ink)}
.after-c h3{font-size:1.2rem}
.after-c p{color:var(--muted)}
@media (max-width:860px){ .after{grid-template-columns:minmax(0,1fr)} }