:root{
  --petrol:#004851; --petrol-80:#4F868E; --petrol-60:#7FA9AE; --petrol-40:#ABC7C9; --petrol-20:#D9E1E2;
  --orange:#F58C61; --orange-80:#FAAA8D; --orange-60:#FFBE9F;
  --sand:#F2ECE4; --coconut:#F7F4F3; --slate:#D7D2CB; --white:#fff;
  --success:#4F866E; --error:#C25450; --warning:#D9B48F;
  --font:"Museo Sans",Arial,sans-serif;
  --r-card:1.5rem; --r-btn:9999px; --r-input:.5rem; --r-badge:.375rem;
}
*{box-sizing:border-box}
body{margin:0;background:var(--sand);color:var(--petrol);font-family:var(--font);
     font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:66rem;margin:0 auto;padding:2rem 1.25rem 5rem}
.narrow{max-width:31rem}
h1{font-size:1.875rem;font-weight:700;margin:0 0 .5rem;letter-spacing:-.01em}
h2{font-size:1.125rem;font-weight:700;margin:2.5rem 0 .75rem}
h3{font-size:1rem;font-weight:700;margin:0 0 .5rem}
p{margin:.5rem 0}
.lede{color:var(--petrol-80);margin:0 0 2rem}
.card{background:var(--white);border-radius:var(--r-card);padding:1.75rem;margin:0 0 1rem}
.card.tight{padding:1.25rem 1.5rem}
.muted{color:var(--petrol-80)} .small{font-size:.875rem} .xs{font-size:.75rem}
hr{border:0;border-top:1px solid var(--slate);margin:1.5rem 0}

/* buttons — one orange per screen */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;
     padding:.75rem 1.75rem;border-radius:var(--r-btn);border:0;font:inherit;font-weight:700;
     cursor:pointer;text-decoration:none;transition:background .15s}
.btn-primary{background:var(--orange);color:var(--petrol)}
.btn-primary:hover{background:var(--orange-80)}
.btn-secondary{background:transparent;color:var(--petrol);border:2px solid var(--petrol)}
.btn-secondary:hover{background:var(--petrol-20)}
.btn-quiet{background:transparent;color:var(--petrol-80);text-decoration:underline;min-height:auto;padding:.25rem 0;font-weight:400}

.badge{display:inline-block;padding:.15rem .55rem;border-radius:var(--r-badge);
       font-size:.75rem;font-weight:700;background:var(--petrol-20);color:var(--petrol)}
.badge-warn{background:var(--warning)} .badge-err{background:var(--error);color:#fff}
.badge-ok{background:var(--success);color:#fff}

table{width:100%;border-collapse:collapse;font-size:.9375rem}
th{text-align:left;font-weight:700;color:var(--petrol-80);font-size:.8125rem;
   padding:.5rem .625rem;border-bottom:2px solid var(--petrol-20);white-space:nowrap}
td{padding:.625rem;border-bottom:1px solid var(--petrol-20)}
tr:last-child td{border-bottom:0}
.num{text-align:right;font-variant-numeric:tabular-nums}

.grid{display:grid;gap:1rem}
@media(min-width:52rem){.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}}

/* the one number a screen is about */
.big{font-size:3rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.big.sm{font-size:2.25rem}
.label{font-size:.8125rem;color:var(--petrol-80);margin-top:.5rem}

.topbar{background:var(--petrol);color:#fff;padding:.875rem 1.25rem}
.topbar .row{max-width:66rem;margin:0 auto;display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap}
.topbar a{color:#fff;text-decoration:none;font-size:.875rem;font-weight:700;opacity:.75}
.topbar a:hover,.topbar a.on{opacity:1}
.topbar a.on{text-decoration:underline;text-underline-offset:.3rem}
.topbar .who{margin-left:auto;font-size:.75rem;opacity:.8}
.mark{width:1.5rem;height:1.5rem;flex:0 0 auto}

/* always-on demo notice — what this is, on every page and in every environment.
   Distinct from the env strip (system chrome); this uses brand orange so it reads as
   an app-level "this is a demo" notice a forwarded link can't miss. */
.demo-banner{display:flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:1.75rem;padding:.25rem 1rem;background:var(--orange);color:var(--petrol);
  font-size:.8125rem;font-weight:700;letter-spacing:.01em;text-align:center;line-height:1.25}

/* demo chrome — a way back to the demo start from patient screens (not part of the product) */
.demo-back{position:fixed;top:2.25rem;right:.75rem;z-index:10;display:inline-flex;align-items:center;
  background:var(--petrol);color:#fff;text-decoration:none;font-size:.75rem;font-weight:700;
  padding:.375rem .75rem;border-radius:999px;opacity:.85;box-shadow:0 1px 4px rgba(0,72,81,.25)}
.demo-back:hover{opacity:1}

/* patient flow — as few elements as the question allows */
.pt{max-width:31rem;margin:0 auto;padding:1.5rem 1.25rem 4rem}
.pt-head{display:flex;align-items:center;gap:.625rem;margin-bottom:2rem}
.pt-head .mark path{fill:var(--petrol)}
.pt-head span{font-weight:700;font-size:.9375rem}
.prog{height:.25rem;background:var(--petrol-20);border-radius:var(--r-btn);overflow:hidden;margin-bottom:.5rem}
.prog>i{display:block;height:100%;background:var(--orange);transition:width .25s}
.q{font-size:1.375rem;font-weight:700;line-height:1.35;margin:2rem 0 1.75rem}
.opts{display:grid;gap:.625rem}
.opt{display:flex;align-items:center;gap:.875rem;min-height:56px;padding:.75rem 1.25rem;
     border:2px solid var(--slate);border-radius:var(--r-input);background:var(--white);cursor:pointer;
     transition:border-color .12s,background .12s}
.opt:hover{border-color:var(--petrol-60)}
.opt input{width:1.25rem;height:1.25rem;accent-color:var(--petrol);flex:0 0 auto}
.opt.sel{border-color:var(--petrol);background:var(--petrol-20)}
.step{border:0;padding:0;margin:0}
.step legend{display:block;float:left;width:100%;padding:0}
.step .opts{clear:both}

/* the phone, for showing the sms as the patient sees it */
.phone{width:19rem;margin:0 auto;background:var(--petrol);border-radius:2rem;padding:.75rem;
       box-shadow:0 12px 40px rgba(0,72,81,.18)}
.phone .screen{background:var(--coconut);border-radius:1.5rem;padding:1.25rem 1rem;min-height:16rem}
.phone .from{font-size:.75rem;color:var(--petrol-80);text-align:center;margin-bottom:.875rem}
.bubble{background:var(--white);border-radius:1.125rem 1.125rem 1.125rem .3rem;padding:.875rem 1rem;
        font-size:.9375rem;line-height:1.5}
.bubble a{color:var(--petrol);word-break:break-all}

pre{background:var(--petrol);color:#D9E1E2;padding:1rem 1.125rem;border-radius:var(--r-input);
    overflow-x:auto;font-size:.8125rem;line-height:1.55;margin:.5rem 0}
pre .k{color:var(--orange-60)}
code{font-size:.875rem;background:var(--petrol-20);padding:.1rem .35rem;border-radius:var(--r-badge)}
.note{border-left:3px solid var(--petrol-40);background:var(--coconut);padding:.875rem 1.125rem;
      border-radius:0 var(--r-input) var(--r-input) 0;font-size:.875rem;margin:1.25rem 0}
.note.warn{border-left-color:var(--warning)} .note.err{border-left-color:var(--error)}

details{margin-top:1rem}
summary{cursor:pointer;font-size:.875rem;color:var(--petrol-80);font-weight:700;list-style:none}
summary::-webkit-details-marker{display:none}
summary:before{content:"+ ";font-weight:700}
details[open] summary:before{content:"– "}
details>*:not(summary){margin-top:1rem}

input[type=text],input[type=date],select{padding:.625rem .75rem;border-radius:var(--r-input);
  border:2px solid var(--slate);font:inherit;background:var(--white);color:var(--petrol)}
input:focus,select:focus{outline:0;border-color:var(--petrol)}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{
  body{background:#fff} .topbar,form,.btn,details,.demo-back{display:none!important}
  .card{border:1px solid var(--slate);break-inside:avoid} .wrap{max-width:none;padding:0}
}