/* Goodtime Medical prototype — shared design language.
   Every page links this. Do not restyle locally; extend here so the pages cannot drift. */

:root{
  --ink:#141a20; --ink-2:#43505c; --ink-3:#7b8894;
  --line:#e2e0da; --line-2:#cfcbc2;
  --paper:#ffffff; --shell:#f7f5f1; --warm:#efebe3;
  --navy:#16283b; --red:#a8232b; --green:#1d6b4c;
  --r:3px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans); color:var(--ink); background:var(--shell);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
.wrap{max-width:1240px; margin:0 auto; padding:0 24px}

/* ---------- chrome ---------- */
.utility{background:var(--navy); color:#cfdae6; font-size:13px; letter-spacing:.01em}
.utility .wrap{display:flex; gap:24px; align-items:center; justify-content:space-between; min-height:38px; flex-wrap:wrap}
.utility strong{color:#fff; font-weight:600}
.util-r{display:flex; gap:22px; align-items:center; flex-wrap:wrap}

header{background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40}
header .wrap{display:flex; align-items:center; gap:28px; min-height:74px}
.brand{font-weight:700; font-size:19px; letter-spacing:-.02em; line-height:1.1; white-space:nowrap;
  text-decoration:none; display:flex; flex-direction:column; justify-content:center; min-height:46px}
.brand span{display:block; font-size:10.5px; font-weight:600; letter-spacing:.22em; color:var(--ink-3); text-transform:uppercase}
nav{display:flex; gap:26px; font-size:14.5px; margin-left:auto; flex-wrap:wrap}
nav a{text-decoration:none; color:var(--ink-2); padding:6px 0; border-bottom:2px solid transparent}
nav a:hover,nav a.on{color:var(--ink); border-bottom-color:var(--red)}
.callbar{font-size:14px; font-weight:600; white-space:nowrap}
.callbar em{display:block; font-style:normal; font-size:11px; font-weight:500; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase}

.crumb{font-size:13px; color:var(--ink-3); padding:18px 0 0}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}

/* ---------- type ---------- */
h1{font-size:34px; line-height:1.14; letter-spacing:-.025em; margin:2px 0 6px; font-weight:700}
h2.sec{font-size:26px; letter-spacing:-.022em; margin:0 0 6px; font-weight:700}
.eyebrow{font-size:12px; text-transform:uppercase; letter-spacing:.16em; color:var(--ink-3); font-weight:700; margin:0 0 8px}
.lede{color:var(--ink-2); font-size:17px; max-width:62ch; margin:0}

/* ---------- buttons ---------- */
.btn{
  font:inherit; font-size:15px; font-weight:600; padding:14px 22px; border-radius:var(--r);
  cursor:pointer; border:1px solid transparent; text-align:center; white-space:nowrap;
  text-decoration:none; display:inline-block; min-height:46px;
}
.btn-p{background:var(--navy); color:#fff}
.btn-p:hover{background:#0e1c2a}
.btn-s{background:var(--paper); color:var(--ink); border-color:var(--line-2)}
.btn-s:hover{border-color:var(--navy)}

/* ---------- viewer ---------- */
.stage{position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:26px 26px 18px; overflow:hidden}
.stage-inner{position:relative; aspect-ratio:600/590; max-width:520px; margin:0 auto}
.stage-inner img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain}
.stage-inner.left{transform:scaleX(-1)}
.floor{position:absolute; left:6%; right:6%; bottom:7%; height:26px; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(20,26,32,.22), rgba(20,26,32,0) 72%); z-index:0}
.stage-cap{display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-3)}
.stage-cap b{color:var(--ink); font-weight:600}
.livedot{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--green); margin-right:7px; vertical-align:middle}
.madein{display:flex; align-items:center; gap:10px; margin-top:16px; font-size:12.5px; color:var(--ink-2)}
.madein img{width:52px; height:auto}

/* ---------- controls ---------- */
.grp{padding:22px 0; border-bottom:1px solid var(--line)}
.grp-h{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:12px}
.grp-h h3{font-size:12px; text-transform:uppercase; letter-spacing:.13em; margin:0; color:var(--ink-3); font-weight:700}
.grp-h .val{font-size:14px; font-weight:600}
.hint{font-size:12.5px; color:var(--ink-3); margin:-4px 0 12px}

.seg{display:flex; border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden; width:fit-content; max-width:100%; flex-wrap:wrap}
.seg button{font:inherit; font-size:14px; background:var(--paper); border:0; padding:10px 18px; cursor:pointer;
  color:var(--ink-2); border-right:1px solid var(--line-2); white-space:nowrap; min-height:46px}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--navy); color:#fff; font-weight:600}

.sw{display:flex; flex-wrap:wrap; gap:7px}
.sw button{width:44px; height:44px; border-radius:var(--r); border:1px solid rgba(0,0,0,.16);
  cursor:pointer; padding:0; background-size:cover; background-position:center; position:relative}
.sw button[aria-pressed="true"]{outline:2px solid var(--navy); outline-offset:2px}
.sw button:focus-visible{outline:2px solid var(--red); outline-offset:2px}
.sw.pads button{width:62px; height:46px}

.optlist{display:flex; flex-direction:column; gap:9px}
.opt{display:flex; align-items:center; gap:12px; border:1px solid var(--line-2); border-radius:var(--r);
  padding:12px 14px; cursor:pointer; background:var(--paper); font-size:14.5px}
.opt input{margin:0; accent-color:var(--navy); flex:none; width:22px; height:22px}
.opt .oc{flex:1; min-width:0}
.opt .op{font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums}
.opt small{display:block; color:var(--ink-3); font-size:12.5px; line-height:1.4}
.opt:has(input:checked){border-color:var(--navy); background:#f6f9fc}
select.qty{font:inherit; font-size:14.5px; padding:10px 12px; border:1px solid var(--line-2);
  border-radius:var(--r); background:var(--paper); min-height:46px}

/* ---------- quote ---------- */
.quote{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); margin-top:26px; overflow:hidden}
.quote-h{background:var(--warm); padding:14px 20px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:14px}
.quote-h h3{margin:0; font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-2); font-weight:700}
.quote-h span{font-size:12.5px; color:var(--ink-3)}
.lines{padding:18px 20px}
.line{display:flex; justify-content:space-between; gap:16px; padding:7px 0; font-size:14.5px; color:var(--ink-2)}
.line span:last-child{font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ink)}
.line.sub{border-top:1px solid var(--line); margin-top:8px; padding-top:12px; font-weight:600; color:var(--ink)}
.line.total{border-top:2px solid var(--navy); margin-top:10px; padding-top:14px; font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--ink)}
.line.total span:first-child{font-size:13px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); align-self:center; font-weight:700}
.est{font-size:12px; color:var(--ink-3); padding:0 20px 16px; line-height:1.5}
.ship{display:flex; align-items:center; gap:10px; padding:14px 20px; background:#f4f8f5; border-top:1px solid var(--line); font-size:14px; color:#1a4a37}
.ship b{font-weight:700}
.cta{display:flex; gap:10px; padding:16px 20px 20px; flex-wrap:wrap}
.cta .btn{flex:1 1 auto}
.terms{display:flex; gap:18px; flex-wrap:wrap; padding:0 20px 18px; font-size:12.5px; color:var(--ink-2)}
.terms i{font-style:normal; color:var(--green); font-weight:700; margin-right:5px}

/* ---------- cards / grids ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:20px}
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column; text-decoration:none}
.card:hover{border-color:var(--line-2); box-shadow:0 6px 22px rgba(20,26,32,.07)}
.card .ph{background:#fff; padding:16px; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center}
.card .ph img{max-height:100%; width:auto; object-fit:contain}
.card .cb{padding:14px 16px 16px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:6px; flex:1}
.card h3{margin:0; font-size:16px; letter-spacing:-.015em; font-weight:600}
.card .pr{font-size:17px; font-weight:700; font-variant-numeric:tabular-nums}
.card .sp{font-size:12.5px; color:var(--ink-3); line-height:1.5; margin-top:auto}
.chips{display:flex; gap:5px; flex-wrap:wrap; margin-top:2px}
.chip{font-size:11px; letter-spacing:.04em; text-transform:uppercase; font-weight:700; color:var(--ink-2);
  background:var(--warm); border-radius:2px; padding:3px 7px}

/* ---------- filter rail ---------- */
.catgrid{display:grid; grid-template-columns:250px minmax(0,1fr); gap:38px; padding:26px 0 64px; align-items:start}
.rail{position:sticky; top:96px}
.rail h3{font-size:12px; text-transform:uppercase; letter-spacing:.13em; color:var(--ink-3); font-weight:700; margin:0 0 10px}
.rail .fset{padding:0 0 18px; margin:0 0 18px; border-bottom:1px solid var(--line)}
.rail label{display:flex; align-items:center; gap:9px; font-size:14.5px; color:var(--ink-2); padding:7px 0; cursor:pointer}
.rail input{accent-color:var(--navy); width:19px; height:19px; margin:0}
.rail .clear{font-size:13px; color:var(--ink-3); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline}
.catbar{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:18px}
.catbar .n{font-size:14px; color:var(--ink-3)}

/* ---------- compare ---------- */
.cmpwrap{overflow-x:auto; background:var(--paper); border:1px solid var(--line); border-radius:var(--r)}
table.cmp{border-collapse:collapse; width:100%; min-width:640px; font-size:14px}
table.cmp th,table.cmp td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
table.cmp thead th{background:var(--warm); font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-2); white-space:nowrap}
table.cmp tbody th{font-weight:600; color:var(--ink-3); font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; white-space:nowrap}
table.cmp td{font-variant-numeric:tabular-nums}
table.cmp .yes{color:var(--green); font-weight:700}
table.cmp .no{color:var(--ink-3)}

/* ---------- proof ---------- */
.proof{background:var(--navy); color:#e8eef5; padding:56px 0}
.proof h2{margin:0 0 6px; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:#7f9dba; font-weight:700}
.proof p.lead{margin:0 0 26px; font-size:24px; letter-spacing:-.02em; max-width:640px; line-height:1.35; color:#fff}
.orgs{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:2px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.1)}
.orgs div{background:var(--navy); padding:16px 18px; font-size:14px; color:#cfdcea}
.proof .foot{margin:22px 0 0; font-size:13.5px; color:#8fa9c2}

/* ---------- modal ---------- */
dialog{border:0; border-radius:var(--r); padding:0; max-width:520px; width:calc(100% - 32px); box-shadow:0 30px 80px rgba(0,0,0,.32)}
dialog::backdrop{background:rgba(20,26,32,.55)}
.dh{padding:22px 26px 0}
.dh h3{margin:0 0 4px; font-size:21px; letter-spacing:-.02em}
.dh p{margin:0; color:var(--ink-3); font-size:14px}
.db{padding:18px 26px 26px}
.fld{margin-bottom:13px}
.fld label{display:block; font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); font-weight:700; margin-bottom:5px}
.fld input{width:100%; font:inherit; font-size:15px; padding:11px 13px; border:1px solid var(--line-2); border-radius:var(--r)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:13px}
.chk{display:flex; align-items:center; gap:9px; font-size:14px; color:var(--ink-2); margin:14px 0 18px}
.chk input{accent-color:var(--navy); width:20px; height:20px}
.recap{background:var(--shell); border:1px solid var(--line); border-radius:var(--r); padding:13px 15px;
  font-size:13.5px; color:var(--ink-2); margin-bottom:16px; line-height:1.6}
.recap b{color:var(--ink)}

footer{background:#0e1620; color:#8c9caa; font-size:13.5px; padding:34px 0}
footer .wrap{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}
footer a{color:#b6c4d0}

@media (max-width:940px){
  .catgrid{grid-template-columns:1fr; gap:24px}
  .rail{position:static}
  h1{font-size:28px}
  nav{display:none}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .cta{flex-direction:column}
  .sw button{width:46px; height:46px}
  .seg{width:100%}
  .seg button{flex:1 1 auto; padding:11px 10px; text-align:center}
  h1{font-size:25px}
  h2.sec{font-size:22px}
  .line.total{font-size:19px}
  .cards{grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:12px}
}