/* ============================================================
   ScalerGig — DSOs (GH #16)
   Uses layout-home.ejs, same as index.ejs/thank-you.ejs. Shared
   tokens/reset live in sg-base.css, hero/.btn/.wrap/.steps/.office/
   .faq/.byline/.avatar etc. in home.css — both already linked by
   that layout, so only what's specific to this page lives here.

   --magenta-deep isn't defined anywhere shared yet (home.css only
   has --magenta/--magenta-tint), so it's declared locally per the
   same convention as home.css's own page-specific tokens.
   ============================================================ */
:root{
  --magenta-deep:#7d2f70;
  --red:#c0392b;
}

/* This page is magenta-led (employer/office side of the brand), so the
   shared .eyebrow pill and .step number badges - teal by default, tuned
   for the worker-facing homepage - are overridden here to match. Scoped
   to body[data-aud="office"] rather than edited in home.css, since teal
   is still correct everywhere else that uses those shared classes. */
body[data-aud="office"] .eyebrow{color:var(--magenta-deep);background:var(--magenta-tint)}
body[data-aud="office"] .step .n{background:var(--magenta-tint);color:var(--magenta-deep)}

.hero .micro{margin-top:16px;font-size:.87rem;color:var(--muted)}

/* Hero snapshot card */
.snapshot{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow)}
.snapshot h4{margin:0 0 18px;font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:800}
.srow{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:13px 0;border-bottom:1px solid #f0f3f4}
.srow:last-child{border-bottom:0}
.srow span{color:var(--ink-2);font-size:.93rem}
.srow b{font-size:1.35rem;letter-spacing:-.025em;color:var(--magenta-deep);white-space:nowrap}
.snapshot .fine{font-size:.78rem;color:var(--muted);margin-top:16px;border-top:1px solid var(--line);padding-top:14px;line-height:1.5}

/* Problem / what-we-do-instead split */
.split{display:grid;gap:18px}
@media(min-width:860px){.split{grid-template-columns:1fr 1fr;gap:22px}}
.pane{border-radius:var(--r-lg);padding:28px 26px;border:1.5px solid var(--line);background:#fff}
.pane.dim{background:var(--bg)}
.pane.win{border-color:rgba(176,71,158,.4);background:linear-gradient(160deg,var(--magenta-tint),#fff)}
.pane h3{font-size:.82rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.pane.win h3{color:var(--magenta-deep)}
.pane ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.pane li{display:flex;gap:12px;font-size:.96rem;color:var(--ink-2);line-height:1.5}
.pane li i{font-style:normal;flex:none;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;
  font-size:.7rem;font-weight:800;margin-top:2px;background:#e8ebec;color:var(--muted)}
.pane.win li i{background:var(--magenta);color:#fff}

/* Economics cards (band chrome reuses .office from home.css) */
.econ{display:grid;gap:16px}
@media(min-width:760px){.econ{grid-template-columns:repeat(3,1fr);gap:20px}}
.ec{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);padding:26px 24px}
.ec b{display:block;font-size:1.5rem;letter-spacing:-.03em;color:var(--amber);margin-bottom:8px}
.ec p{color:rgba(255,255,255,.72);font-size:.94rem;line-height:1.55}

/* Proof quotes (static 2-up; .byline/.avatar reused from home.css) */
.quotes{display:grid;gap:18px}
@media(min-width:860px){.quotes{grid-template-columns:1.15fr .85fr;gap:22px}}
.q{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:16px}
.q.lead{background:linear-gradient(160deg,var(--magenta-tint),#fff);border-color:rgba(176,71,158,.32)}
.q p{font-size:1.02rem;color:var(--ink-2);line-height:1.62}
.q.lead p{font-size:1.14rem;color:var(--ink);font-weight:500}

/* Contact band + form */
.contact{background:linear-gradient(155deg,var(--magenta),var(--magenta-deep));color:#fff}
.contact h2{color:#fff}
.contact .lede{color:rgba(255,255,255,.86)}
.cgrid{display:grid;gap:32px;align-items:start}
@media(min-width:900px){.cgrid{grid-template-columns:.95fr 1.05fr;gap:52px}}
.clist{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:13px}
.clist li{display:flex;gap:12px;font-size:.97rem;color:rgba(255,255,255,.9);line-height:1.5}
.clist i{font-style:normal;flex:none;color:var(--amber);font-weight:800}
.form{background:#fff;border-radius:var(--r-lg);padding:26px 24px;box-shadow:0 22px 60px rgba(0,0,0,.2)}
@media(min-width:560px){.form{padding:30px 28px}}
.frow{display:grid;gap:14px;margin-bottom:14px}
@media(min-width:520px){.frow.two{grid-template-columns:1fr 1fr}}
.lab{display:block;font-weight:700;font-size:.87rem;margin-bottom:6px;color:var(--ink)}
.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}
select.in{padding-right:38px}
.in:focus{outline:0;border-color:var(--magenta);box-shadow:0 0 0 4px rgba(176,71,158,.14)}
.form .fine{font-size:.8rem;color:var(--muted);margin-top:14px;line-height:1.5}
.err{color:var(--red);font-size:.86rem;margin-top:8px;display:none}
.err.show{display:block}
.sent{display:none;text-align:center;padding:22px 0}
.sent.show{display:block}
.sent .ok{width:60px;height:60px;border-radius:50%;background:var(--magenta-tint);color:var(--magenta-deep);
  display:grid;place-items:center;font-size:1.7rem;margin:0 auto 16px}