/* Shared tokens and base reset live in sg-base.css, linked first by
   views/partials/head.ejs. Only what is specific to this page stays here —
   including the tokens whose values differ from the other pages (--r is 14px
   here but 16px on home; --r-lg is 22px here but 24px elsewhere), which is why
   they are NOT in the shared file. */
:root{
  --red:#c0392b; --red-tint:#fdf0ee;
  --r-sm:10px; --r:14px; --r-lg:22px;
  --shadow:0 4px 12px rgba(21,49,56,.07), 0 12px 32px rgba(21,49,56,.08);
}
body{background:var(--bg)}
a{text-decoration:none}
h1,h2,h3{margin:0;letter-spacing:-.02em;font-weight:800;line-height:1.15}

/* ---------- Shell ---------- */
header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.nav{max-width:1140px;margin:0 auto;padding:0 20px;height:64px;display:flex;align-items:center;gap:16px}
.nav .logo img{height:28px;width:auto}
.nav .help{margin-left:auto;font-size:.88rem;color:var(--muted)}
.nav .help b{color:var(--ink)}
@media(max-width:600px){.nav .help span{display:none}}

.shell{max-width:1140px;margin:0 auto;padding:24px 20px 140px}
@media(min-width:1000px){
  .shell{display:grid;grid-template-columns:1fr 330px;gap:36px;align-items:start;padding-bottom:60px}
}

/* ---------- Progress ---------- */
.progress{margin-bottom:24px}
.pbar{height:6px;background:var(--line);border-radius:var(--r-pill);overflow:hidden}
.pbar i{display:block;height:100%;background:var(--teal-btn);border-radius:var(--r-pill);
  width:14%;transition:width .35s cubic-bezier(.4,0,.2,1)}
.pmeta{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;font-size:.84rem;color:var(--muted)}
.pmeta b{color:var(--ink);font-size:.95rem}
.psteps{display:none;gap:6px;margin-top:14px;flex-wrap:wrap}
@media(min-width:860px){.psteps{display:flex}}
.psteps button{
  border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:var(--r-pill);
  padding:7px 13px;font-size:.82rem;font-weight:600;cursor:pointer;transition:.15s;min-height:36px;
}
.psteps button[data-state="done"]{border-color:var(--teal);color:var(--teal-deep);background:var(--teal-tint)}
.psteps button[data-state="now"]{background:var(--ink);border-color:var(--ink);color:#fff}
.psteps button:disabled{cursor:default;opacity:.55}

/* ---------- Card / steps ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 22px;box-shadow:var(--shadow-sm)}
@media(min-width:760px){.card{padding:34px 32px}}
.step[hidden]{display:none}
.step h2{font-size:clamp(1.35rem,3.6vw,1.75rem)}
.step .sub{color:var(--ink-2);margin-top:10px;font-size:.97rem;max-width:54ch}
.fieldset{margin-top:26px}
legend,.lab{display:block;font-weight:700;font-size:.94rem;margin-bottom:4px}
.hint{font-size:.85rem;color:var(--muted);margin-bottom:12px;max-width:58ch}
fieldset{border:0;padding:0;margin:0}

/* Inputs */
.in{
  width:100%;min-height:52px;border:1.5px solid var(--line);border-radius:var(--r);
  padding:0 15px;font:inherit;font-size:1rem;background:#fff;color:var(--ink);transition:.15s;
}
textarea.in{min-height:190px;padding:14px 15px;line-height:1.55;resize:vertical}
.in:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 4px rgba(42,167,155,.14)}
.in::placeholder{color:#a3adb1}
.in[aria-invalid="true"]{border-color:var(--red);background:var(--red-tint)}
.row{display:grid;gap:14px}
@media(min-width:620px){
  .row.two{grid-template-columns:1fr 1fr}
  .row.city{grid-template-columns:2fr 1fr 1fr}
}
.err{color:var(--red);font-size:.86rem;margin-top:8px;display:none}
.err.show{display:block}

/* Big choice cards */
.choices{display:grid;gap:12px}
@media(min-width:620px){.choices.three{grid-template-columns:repeat(3,1fr)}.choices.two{grid-template-columns:1fr 1fr}}
.choice{
  position:relative;border:1.5px solid var(--line);border-radius:var(--r);background:#fff;
  padding:18px 16px;cursor:pointer;text-align:left;transition:.15s;display:block;min-height:76px;
}
.choice:hover{border-color:var(--teal)}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice b{display:block;font-size:1rem}
.choice small{color:var(--muted);font-size:.85rem;display:block;margin-top:3px;line-height:1.4}
.choice:has(input:checked){border-color:var(--teal-btn);background:var(--teal-tint);box-shadow:0 0 0 3px rgba(42,167,155,.14)}
.choice .tick{position:absolute;top:14px;right:14px;width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--line);background:#fff;display:grid;place-items:center;font-size:.68rem;color:#fff}
.choice:has(input:checked) .tick{background:var(--teal-btn);border-color:var(--teal-btn)}
.choice:has(input:checked) .tick::after{content:"✓"}

/* Schedule */
.days{display:flex;flex-wrap:wrap;gap:8px}
.day{
  border:1.5px solid var(--line);background:#fff;border-radius:var(--r-pill);padding:0 4px;
  min-width:56px;min-height:48px;display:grid;place-items:center;font-weight:700;font-size:.9rem;
  cursor:pointer;transition:.15s;position:relative;color:var(--muted);
}
.day input{position:absolute;opacity:0;pointer-events:none}
.day:has(input:checked){background:var(--teal-btn);border-color:var(--teal-btn);color:#fff}
.hours{margin-top:20px;border:1px solid var(--line);border-radius:var(--r);padding:16px;background:var(--bg)}
.hrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.hrow .in{min-height:48px;width:auto;flex:1;min-width:120px}
.hrow span{color:var(--muted);font-size:.9rem}
.perday{margin-top:14px;display:none;flex-direction:column;gap:10px}
.perday.show{display:flex}
.pd{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pd b{width:44px;font-size:.88rem}
.pd .in{min-height:44px;flex:1;min-width:110px}

/* Switch */
.switchrow{display:flex;align-items:center;gap:12px;margin-top:16px;cursor:pointer}
.switchrow input{position:absolute;opacity:0}
.sw{width:46px;height:27px;border-radius:var(--r-pill);background:#cfd8dc;position:relative;transition:.2s;flex:none}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switchrow:has(input:checked) .sw{background:var(--teal-btn)}
.switchrow:has(input:checked) .sw::after{transform:translateX(19px)}
.switchrow span{font-size:.93rem;font-weight:600}

/* Wage benchmark */
.wagebox{margin-top:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);padding:18px}
.wagebox .head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.wagebox .head .lab{margin-bottom:0}
.scope{font-size:.78rem;font-weight:700;color:var(--teal-deep);background:var(--teal-tint);
  border-radius:var(--r-pill);padding:4px 11px;white-space:nowrap}
.meter{position:relative;height:46px;margin:26px 0 10px}
.meter .track{position:absolute;left:0;right:0;top:19px;height:8px;border-radius:var(--r-pill);
  background:linear-gradient(90deg,#f0d9d5 0%,#fbedd9 26%,#d9efec 45%,#bfe6e1 70%,#a9ded8 100%)}
.meter .band{position:absolute;top:15px;height:16px;border-radius:4px;background:rgba(42,167,155,.22);
  border-left:2px solid var(--teal);border-right:2px solid var(--teal)}
.meter .mark{position:absolute;top:5px;width:3px;height:36px;background:var(--ink);border-radius:2px;transition:left .25s;display:none}
.meter .mark::after{
  content:attr(data-v);position:absolute;top:-25px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;font-size:.74rem;font-weight:700;padding:3px 8px;border-radius:6px;white-space:nowrap;
}
.meter .lbl{position:absolute;top:32px;font-size:.72rem;color:var(--muted);transform:translateX(-50%);white-space:nowrap}
.verdict{display:flex;gap:11px;align-items:flex-start;font-size:.92rem;line-height:1.55;margin-top:18px}
.verdict .dot{width:9px;height:9px;border-radius:50%;flex:none;margin-top:7px;background:var(--muted)}
.verdict.low .dot{background:#e07a5f}
.verdict.mid .dot{background:var(--amber)}
.verdict.good .dot{background:#2ecc71}
.bump{
  margin-top:14px;border:0;background:var(--ink);color:#fff;border-radius:var(--r-pill);
  padding:10px 18px;font-size:.88rem;font-weight:700;cursor:pointer;min-height:44px;display:none;
}
.bump.show{display:inline-block}
.bump:hover{background:#0d2229}
.wagebox .src{font-size:.78rem;color:var(--muted);margin-top:14px;border-top:1px solid var(--line);padding-top:12px}

/* Notes prompts */
.prompts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.prompts button{
  border:1px solid var(--line);background:#fff;border-radius:var(--r-pill);padding:8px 14px;
  font-size:.85rem;font-weight:600;color:var(--ink-2);cursor:pointer;transition:.15s;min-height:38px;
}
.prompts button:hover{border-color:var(--teal);color:var(--teal-deep);background:var(--teal-tint)}
.counter{display:flex;justify-content:space-between;font-size:.82rem;color:var(--muted);margin-top:8px}
.counter .good{color:var(--teal-deep);font-weight:700}

/* Plans */
.plans{display:grid;gap:12px}
@media(min-width:760px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{position:relative;border:1.5px solid var(--line);border-radius:var(--r);background:#fff;padding:20px 18px;cursor:pointer;transition:.15s}
.plan:has(input:checked){border-color:var(--teal-btn);background:var(--teal-tint);box-shadow:0 0 0 3px rgba(42,167,155,.14)}
.plan input{position:absolute;opacity:0}
.plan .amt{font-size:1.75rem;font-weight:800;letter-spacing:-.03em;margin:6px 0}
.plan .amt span{font-size:.8rem;font-weight:600;color:var(--muted)}
.plan ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:.87rem;color:var(--ink-2)}
.plan li::before{content:"✓";color:var(--teal);font-weight:800;margin-right:7px}
.plan .flag{position:absolute;top:-11px;right:16px;background:var(--teal-btn);color:#fff;font-size:.68rem;
  font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-pill)}

/* Account-email notice — this is how offices receive their login */
.acct{
  display:flex;gap:12px;align-items:flex-start;background:#fff8e6;border:1px solid #f2dfa8;
  border-radius:var(--r);padding:14px 16px;margin-top:14px;font-size:.89rem;line-height:1.5;color:#6b5312;
}
.acct b{color:#4d3c08}
.acct .ic{flex:none;font-size:1rem;margin-top:1px}
.acct[hidden]{display:none}

.terms{display:flex;gap:12px;align-items:flex-start;margin-top:22px;font-size:.9rem;color:var(--ink-2)}
.terms input{width:22px;height:22px;margin-top:1px;accent-color:var(--teal-btn);flex:none}
.terms a{color:var(--teal-deep);text-decoration:underline}

/* ---------- Review ---------- */
.review{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:24px}
.rrow{display:grid;grid-template-columns:118px 1fr auto;gap:12px;align-items:start;
  padding:14px 16px;border-bottom:1px solid var(--line);font-size:.94rem}
.rrow:last-child{border-bottom:0}
.rrow:nth-child(odd){background:#fbfcfc}
.rrow .k{color:var(--muted);font-weight:600;font-size:.87rem;padding-top:1px}
.rrow .v{color:var(--ink);word-break:break-word}
.rrow .v.long{white-space:pre-line;line-height:1.5}
.rrow .e{
  background:none;border:0;color:var(--teal-deep);font-weight:700;font-size:.85rem;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;padding:2px 4px;min-height:32px;
}
.rrow .e:hover{color:var(--ink)}
.rrow .v em{color:var(--red);font-style:normal;font-weight:600}
@media(max-width:560px){
  .rrow{grid-template-columns:1fr auto;gap:4px 12px}
  .rrow .k{grid-column:1/-1}
}
.paybox{
  margin-top:22px;background:var(--ink);color:#fff;border-radius:var(--r);padding:20px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
}
.paybox[hidden]{display:none}
.paybox .l small{display:block;color:rgba(255,255,255,.6);font-size:.82rem}
.paybox .l b{font-size:1.7rem;letter-spacing:-.03em}

/* Nav buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 26px;
  border-radius:var(--r);border:1.5px solid transparent;font-weight:700;font-size:1rem;cursor:pointer;transition:.18s}
/* The display above beats the UA stylesheet's [hidden]{display:none}, so a
   .btn with the hidden attribute (jump() hides #barNext for invoice-billed
   dentists) would still show without this - same reason .step/.acct/.paybox
   each carry one. */
.btn[hidden]{display:none}
.btn-primary{background:var(--teal-btn);color:#fff;box-shadow:0 6px 16px rgba(42,167,155,.28)}
.btn-primary:hover{background:var(--teal-dark);transform:translateY(-1px)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-ink{background:var(--ink);color:#fff}
.navrow{display:flex;gap:12px;margin-top:30px;align-items:center}
.navrow .btn-primary{flex:1}
@media(min-width:620px){.navrow .btn-primary{flex:0 0 auto;min-width:190px}}

/* ---------- Summary rail ---------- */
.rail{display:none}
@media(min-width:1000px){.rail{display:block;position:sticky;top:88px}}
.rail-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-sm)}
.rail-card h3{font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.summary{font-size:.89rem}
.summary div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;color:var(--muted);
  border-bottom:1px solid #f0f3f4}
.summary div:last-child{border-bottom:0}
.summary div b{color:var(--ink);text-align:right;font-weight:600}
.summary .tot{border-top:1px solid var(--line);border-bottom:0;margin-top:8px;padding-top:12px;color:var(--ink)}
.summary .tot b{font-size:1.3rem;letter-spacing:-.02em;font-weight:800}
.railnote{font-size:.8rem;color:var(--muted);margin-top:14px;line-height:1.45}

/* Sticky mobile bar */
.stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);border-top:1px solid var(--line);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  display:flex;gap:12px;align-items:center;box-shadow:0 -6px 22px rgba(21,49,56,.09);
}
.stickybar .t{flex:1;min-width:0}
.stickybar .t b{display:block;font-size:.9rem}
.stickybar .t small{color:var(--muted);font-size:.78rem}
.stickybar .btn{min-height:48px;padding:0 22px}
@media(min-width:1000px){.stickybar{display:none}}

/* Done */
.done{text-align:center;padding:20px 0}
.done .ok{width:64px;height:64px;border-radius:50%;background:var(--teal-tint);color:var(--teal-deep);
  display:grid;place-items:center;font-size:1.9rem;margin:0 auto 20px}
@media(prefers-reduced-motion:reduce){*{transition-duration:.001ms !important}}