/* ============================================================
   Patuxent River Dental Care, v4
   Varden Hill's design language, Patuxent's brand.

   Borrowed from Varden Hill:
   - Custom navy/blue over a neutral gray scale
   - Blue-tinted shadows (7% brand blue, not black). Reads expensive.
   - Percentage horizontal padding, so gutters scale with viewport
   - #EFF5FC as the selected/highlight wash

   Deliberately NOT borrowed:
   - Playfair Display (already rejected for Patuxent. We compete against
     ClearChoice's licensed foundry fonts, Varden Hill competes against nobody)
   - Eight different border radii. We use exactly two: 8px cards, 4px controls.
   - Near-white page. Ours is gray so the card has an edge, because this
     page is a form, not a story.

   Copy rule enforced here: NO EM DASHES in patient-facing text.
   ============================================================ */

:root{
  /* Sampled from PRDC LOGO HZ.png */
  --navy:#101838;
  --blue:#0880D8;
  --blue-deep:#0668B0;

  --ink:#101838;
  --ink-2:#26304F;
  --body:#414A61;
  --muted:#6B7280;      /* Varden Hill's, better than what we had */

  --wash:#EFF5FC;
  --page:#E9ECF1;
  --panel:#FFFFFF;
  --rule:#E1E5EC;
  --rule-soft:#EDF0F4;

  --ok:#15794C;
  --err:#C0342B;

  --serif:"Source Serif 4",Georgia,serif;
  --sans:"Instrument Sans",-apple-system,"Segoe UI",Arial,sans-serif;

  /* Two radii. That is the whole system. */
  --r-card:8px;
  --r-ctl:4px;

  /* Blue-tinted, never black */
  --shadow:0 4px 24px rgba(8,128,216,.07);
  --shadow-lift:0 10px 34px rgba(8,128,216,.11);

  --maxw:1240px;
  --gut:5%;
}

*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--page);font-family:var(--sans);font-size:19px;line-height:1.6;
  color:var(--body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
img{display:block;max-width:100%;}
svg{flex:none;}
[hidden]{display:none !important;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:2px;}

h1,h2,h3{font-family:var(--serif);color:var(--ink);font-weight:600;letter-spacing:-1.2px;line-height:1.1;}
h1{font-size:56px;}
h2{font-size:38px;letter-spacing:-1px;}
h3{font-size:25px;letter-spacing:-.5px;line-height:1.22;}

.label{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);}
.label .n{color:var(--blue);}
.rule{height:1px;background:var(--rule);border:0;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);}

/* ---------- HEADER ---------- */
.hdr{background:var(--panel);border-bottom:1px solid var(--rule);}
.hdr-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);height:84px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;}
.hdr .brand img{height:50px;}
.hdr-right{display:flex;align-items:center;gap:26px;}
.hdr-tel{display:inline-flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;
  font-weight:600;white-space:nowrap;}
.hdr-tel svg{color:var(--blue);}
.hdr-tel:hover{color:var(--blue);}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:62px;padding:0 34px;background:var(--navy);color:#fff;border:none;
  border-radius:var(--r-ctl);font-family:var(--sans);font-size:18px;font-weight:600;
  text-decoration:none;cursor:pointer;transition:background .13s,transform .07s,box-shadow .13s;}
.btn:hover{background:var(--blue-deep);box-shadow:var(--shadow-lift);}
.btn:active{transform:translateY(1px);}
.btn[disabled]{background:#C4CBD6;cursor:not-allowed;box-shadow:none;}
.btn--out{background:transparent;color:var(--ink);border:1.5px solid var(--rule);font-weight:600;}
.btn--out:hover{background:var(--panel);border-color:var(--ink);color:var(--ink);box-shadow:none;}
.next-step{font-size:15px;color:var(--muted);margin-top:14px;max-width:48ch;}
.enter-hint{font-size:14px;color:var(--muted);}
.enter-hint kbd{font-family:var(--sans);font-size:12px;font-weight:700;background:var(--wash);
  border:1px solid var(--rule);border-radius:3px;padding:2px 7px;color:var(--ink);}
@media (hover:none){.enter-hint{display:none;}}

/* ---------- PANELS ---------- */
.panel{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-card);
  box-shadow:var(--shadow);}

/* ---------- OPTIONS ---------- */
.opts{display:flex;flex-direction:column;gap:12px;}
.opt{position:relative;width:100%;min-height:66px;padding:16px 54px 16px 16px;
  display:flex;align-items:center;gap:14px;text-align:left;background:var(--panel);
  border:1.5px solid var(--rule);border-radius:var(--r-ctl);cursor:pointer;
  font-family:var(--sans);font-size:18px;font-weight:400;line-height:1.35;color:var(--ink-2);
  transition:border-color .12s,background .12s,box-shadow .12s;}
.opt:hover{border-color:var(--blue);background:#FCFDFF;box-shadow:var(--shadow);}
.opt .k{width:30px;height:30px;flex:none;border:1.5px solid var(--rule);border-radius:3px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:var(--muted);background:var(--panel);transition:all .12s;}
.opt .ck{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--blue);
  opacity:0;transition:opacity .12s;}
.opt[aria-pressed="true"]{border-color:var(--blue);background:var(--wash);color:var(--ink);
  font-weight:500;box-shadow:inset 3px 0 0 var(--blue);}
.opt[aria-pressed="true"] .k{background:var(--blue);border-color:var(--blue);color:#fff;}
.opt[aria-pressed="true"] .ck{opacity:1;}

/* Yes/No: two big targets, one tap, no reading */
.yn{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.yn .opt{justify-content:center;padding:22px 16px;min-height:96px;font-size:21px;font-weight:500;}
.yn .opt .ck{display:none;}
@media (max-width:560px){ .yn{grid-template-columns:1fr;} .yn .opt{min-height:74px;} }

/* ---------- FIELDS ---------- */
.f-grid{display:flex;flex-direction:column;gap:20px;}
.f-row{display:flex;gap:18px;}
.f{position:relative;flex:1;display:flex;flex-direction:column;gap:7px;}
.f label{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);}
.f input{width:100%;height:58px;padding:0 15px;background:var(--panel);
  border:1.5px solid var(--rule);border-radius:var(--r-ctl);outline:none;
  font-family:var(--sans);font-size:18px;color:var(--ink);transition:border-color .12s,box-shadow .12s;}
.f input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(8,128,216,.14);}
.f .e{display:none;font-size:14px;color:var(--err);font-weight:500;}
.f.bad input{border-color:var(--err);}
.f.bad .e{display:block;}
@media (max-width:640px){.f-row{flex-direction:column;}}

.consent{display:flex;gap:13px;align-items:flex-start;margin-top:24px;padding-top:22px;
  border-top:1px solid var(--rule-soft);font-size:14px;line-height:1.55;color:var(--muted);}
.consent input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--blue);}
.consent a{color:var(--blue);}

/* ---------- FOOTER ---------- */
.ftr{border-top:1px solid var(--rule);background:var(--panel);}
.ftr-in{max-width:var(--maxw);margin:0 auto;padding:30px var(--gut);display:flex;
  justify-content:space-between;gap:22px;flex-wrap:wrap;font-size:14px;color:var(--muted);}
.ftr-in a{color:var(--muted);text-decoration:none;margin-right:22px;}
.ftr-in a:hover{color:var(--ink);}

@media (max-width:820px){
  :root{--maxw:100%;--gut:20px;}
  h1{font-size:36px;letter-spacing:-.9px;}
  h2{font-size:28px;}
  .hdr-in{height:70px;}
  .hdr .brand img{height:40px;}
  .hdr-tel .lbl{display:none;}
  .btn{width:100%;}
}