/* carebravo-site.css · carebravo.com on the CareBravo v3 design system (27 Oct 2026, D-6)
   Tokens are copied verbatim from the product's web.css (v3) and mobile.css (v3 overlay).
   Rules carried over: one red action per page, outlined ink for everything else, violet = Cary only,
   status = a dot and a word, system font, no serif, sentence case, hairline cards, no shadows.
   The only token the site adds: --hero-size (marketing hero step). Load this file last. */

:root{
  --cb-font:-apple-system,system-ui,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;
  --bg:#F4F4F4;--surface:#FFFFFF;
  --ink:#161616;--t1:#161616;--t2:#575757;--t3:#6B6B6B;
  --line:#E3E3E3;--line2:#D0D0D0;
  --cb-red:#C60018;--cb-red-press:#9A0013;
  --teal:#0B7A3B;--teal-soft:#E7F4EC;
  --amber:#9A4707;--amber-soft:#FFF1E0;
  --red:#B23A0A;--red-soft:#FDE8E4;
  --copper:#5B3FA8;--copper-soft:#F4F0FC;
  --r:12px;
  --hero-size:48px;            /* site-only step; the product's page title is 32px */
  --measure:680px;
}
@media (max-width:640px){:root{--hero-size:34px}}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{font-family:var(--cb-font);background:var(--bg);color:var(--ink);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
body *:not(svg):not(svg *){font-family:var(--cb-font)}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.narrow{max-width:var(--measure)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 14px;border-radius:0 0 10px 0;z-index:100}
.skip:focus{left:0}

/* type: bold system, tight tracking, no serif, no italics */
h1,h2,h3,h4{font-style:normal;font-weight:700;letter-spacing:-.02em;line-height:1.12}
h1{font-size:var(--hero-size);letter-spacing:-.025em;line-height:1.08}
h2{font-size:32px}
h3{font-size:20px;letter-spacing:-.01em;line-height:1.2}
h4{font-size:15px;letter-spacing:0}
@media (max-width:640px){h2{font-size:26px}}
.lead{font-size:20px;line-height:1.45;color:var(--t2);max-width:var(--measure)}
.sub{font-size:17px;color:var(--t2);max-width:var(--measure);margin-top:12px}
.eyebrow{font-size:13px;font-weight:700;color:var(--t2);text-transform:none;letter-spacing:0;margin-bottom:12px}
.small{font-size:13px;color:var(--t3)}
.num{font-variant-numeric:tabular-nums}

/* header */
header.top{position:sticky;top:0;z-index:50;background:rgba(244,244,244,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header.top .nav{display:flex;align-items:center;gap:20px;height:64px}
.logo{display:block;flex:none}
.logo img{height:26px;width:auto}
.navlinks{display:flex;gap:4px;margin-left:12px;font-size:14px;font-weight:500}
.navlinks a{text-decoration:none;color:var(--t2);padding:8px 12px;border-radius:999px}
.navlinks a:hover{color:var(--ink);background:#EBEBEB}
.navlinks a[aria-current="page"]{background:var(--ink);color:#fff;font-weight:700}
.navcta{margin-left:auto;min-height:40px;padding:0 20px;font-size:15px}
.menu{display:none;margin-left:auto;background:#fff;border:1.5px solid var(--ink);border-radius:999px;font-weight:700;font-size:14px;padding:8px 16px;min-height:44px;cursor:pointer}
@media (max-width:860px){
  header.top .navlinks{display:none}
  .menu{display:inline-flex;align-items:center;margin-left:10px}
  header.top.open .navlinks{display:flex;flex-direction:column;position:absolute;top:64px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);padding:12px 24px 16px;gap:2px;margin:0}
  header.top.open .navlinks a{padding:12px 14px;font-size:16px}
}

/* buttons: red is the one primary; the second CTA is outlined ink */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:10px;font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;border:0;line-height:1.1;text-align:center}
.btn.primary{background:var(--cb-red);color:#fff}
.btn.primary:hover{background:var(--cb-red-press)}
.btn.secondary{background:#fff;color:var(--ink);border:1.5px solid var(--ink)}
.btn.secondary:hover{background:#F2F2F2}
.btn.small{min-height:40px;padding:0 16px;font-size:14px;border-radius:999px}
.btn.pill{border-radius:999px}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.ctanote{font-size:13px;color:var(--t3);margin-top:12px}
@media (max-width:520px){.ctas .btn{width:100%}}

/* sections */
section.s{padding-top:64px;padding-bottom:8px}
section.s.first{padding-top:56px}
.hero{padding-top:64px;padding-bottom:24px}
.hero .lead{margin-top:20px}
.hero .tagline{margin-top:20px;font-size:18px;font-weight:700}
.rule{border:0;border-top:1px solid var(--line);margin:56px 0 0}

/* trust strip: a line with ticks, not tiles */
.strip{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:28px;font-size:14px;color:var(--t2);font-weight:500}
.strip span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--teal);margin-right:8px;vertical-align:1px}

/* cards: white, 1px hairline, 12px radius, no shadow */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.card h3{margin-bottom:6px}
.card p{color:var(--t2);font-size:15px}
.grid{display:grid;gap:14px;margin-top:28px}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.grid.c3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid.c2,.grid.c3{grid-template-columns:1fr}}

/* status = a dot and a word */
.mark{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--t2)}
.mark::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.mark.ok{color:var(--teal)}.mark.needs{color:var(--amber)}.mark.stop{color:var(--red)}.mark.cary{color:var(--copper)}

/* Tuesday: two columns, now vs on CareBravo */
.tuesday{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
@media (max-width:760px){.tuesday{grid-template-columns:1fr}}
.tcol{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.tcol.after{border:1.5px solid var(--ink)}
.tcol h3{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:17px}
.tevent{display:grid;grid-template-columns:72px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:15px}
.tevent:first-of-type{margin-top:12px}
.tevent .time{font-size:13px;font-weight:700;color:var(--t3);padding-top:2px;font-variant-numeric:tabular-nums}
.tcol .tevent p{color:var(--t2)}
.tcol.after .tevent p{color:var(--ink)}

/* the nine jobs */
.jobs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
@media (max-width:900px){.jobs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.jobs{grid-template-columns:1fr}}
.job{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;text-decoration:none;color:inherit}
.job:hover{border-color:var(--ink)}
.job .jn{font-size:13px;font-weight:700;color:var(--t3);font-variant-numeric:tabular-nums}
.job h3{margin-top:4px}
.job .out{font-size:14.5px;color:var(--t2);margin-top:8px}
.job .night{font-size:14.5px;font-weight:700;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.job.room{background:var(--copper-soft);border-color:#DCD3F2}
.room-note{font-size:14px;color:var(--t2);margin-top:14px}

/* who does these jobs: three plans */
.whodoes{margin-top:28px;display:grid;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.wrow{display:grid;grid-template-columns:220px 1fr 220px;gap:20px;padding:20px;border-top:1px solid var(--line);align-items:start}
.wrow:first-child{border-top:0}
@media (max-width:860px){.wrow{grid-template-columns:1fr;gap:6px}}
.wrow .who{font-weight:700}
.wrow .plan{font-size:17px;font-weight:700}
.wrow p{color:var(--t2);font-size:15px;margin-top:4px}
.wrow .price{font-size:14px;color:var(--t2)}
.wrow .price b{display:block;color:var(--ink);font-size:17px;font-variant-numeric:tabular-nums}
.floorline{margin-top:20px;font-size:15px;font-weight:700}

/* promises */
.promises .card h3{font-size:18px}
.link{font-size:14px;font-weight:700;color:var(--ink);text-underline-offset:3px}

/* rails (job pages) */
.rail{margin-top:28px}
.rail .rhead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.rail .rhead p{font-size:14px;color:var(--t2)}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:16px}
.moment{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:8px}
.moment .who{font-size:13px;font-weight:700;color:var(--t3)}
.moment q{font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.25;quotes:"\201C" "\201D"}
.moment .what{font-size:14px;color:var(--t2)}
.moment .state{margin-top:auto;padding-top:6px}
.qlist{display:grid;gap:14px;margin-top:16px}
.qcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.qcard h3{font-size:19px}
.qcard .qwho{font-size:13px;font-weight:700;color:var(--t3);margin-bottom:6px}
.ans{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:16px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.ans.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:860px){.ans,.ans.two{grid-template-columns:1fr}}
.a{padding:14px 16px;border-left:1px solid var(--line);font-size:14.5px}
.a:first-child{border-left:0}
@media (max-width:860px){.a{border-left:0;border-top:1px solid var(--line)}.a:first-child{border-top:0}}
.a .lbl{display:flex;justify-content:space-between;gap:8px;font-size:13px;font-weight:700;margin-bottom:6px}
.a .lbl i{font-style:normal;color:var(--t3);font-weight:500}
.a.cary .lbl{color:var(--copper)}
.a p{color:var(--ink)}
.a .close{display:block;margin-top:8px;font-size:13px;font-weight:700;color:var(--t2)}
.strip-note{margin-top:14px;font-size:14px;color:var(--t2);padding:12px 16px;border:1px dashed var(--line2);border-radius:10px;background:transparent}

/* sentences list */
.sentences{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:0 32px;max-width:900px}
@media (max-width:760px){.sentences{grid-template-columns:1fr}}
.sentences li{list-style:none;padding:14px 0;border-top:1px solid var(--line);font-size:17px;font-weight:500}
.sentences li::before{content:"\201C"}.sentences li::after{content:"\201D"}

/* stats as a line, not tiles */
.statline{margin-top:28px;display:flex;flex-wrap:wrap;gap:20px 40px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat b{display:block;font-size:30px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:14px;color:var(--t2);max-width:260px}
.stat small{display:block;font-size:12.5px;color:var(--t3);margin-top:4px}

/* FAQ */
.faq{margin-top:20px;max-width:var(--measure)}
.faq details{border-top:1px solid var(--line);padding:16px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{font-weight:700;font-size:17px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:500;color:var(--t3)}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin-top:10px;color:var(--t2);font-size:16px}

/* closing panel */
.closing{padding-top:64px;padding-bottom:72px}
.panel{background:var(--ink);color:#fff;border-radius:var(--r);padding:44px 40px}
@media (max-width:640px){.panel{padding:32px 20px}}
.panel h2{color:#fff}
.panel p{color:#D0D0D0;max-width:var(--measure);margin-top:12px;font-size:17px}
.panel .btn.secondary{background:transparent;color:#fff;border-color:#fff}
.panel .btn.secondary:hover{background:rgba(255,255,255,.1)}
.panel .ctanote{color:#B8B8B8}

/* plans (pricing) */
.stack{margin-top:28px;display:grid;gap:14px}
.plan-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:grid;grid-template-columns:240px 1fr;gap:20px}
@media (max-width:760px){.plan-card{grid-template-columns:1fr}}
.plan-card .pname{font-size:20px;font-weight:700}
.plan-card .pprice{font-size:15px;margin-top:6px;color:var(--t2)}
.plan-card .pprice b{display:block;font-size:26px;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.layers{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.layer{font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px;border:1.5px solid var(--ink);background:#fff}
.layer.base{background:var(--ink);color:#fff}
.layer.cary{border-color:var(--copper);color:var(--copper)}
.plan-card ul{list-style:none;display:grid;gap:6px;font-size:15px;color:var(--t2)}
.plan-card li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--teal);margin-right:10px}
.founding{display:inline-flex;gap:10px;align-items:baseline;margin-top:20px;border:1.5px solid var(--ink);border-radius:999px;padding:8px 18px;font-size:14px;font-weight:700}
.founding a{font-weight:700}
.slider{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.slider{grid-template-columns:1fr}}
.field label{display:block;font-size:14px;font-weight:700;margin-bottom:6px}
.field input[type=number],.field input[type=email],.field input[type=text]{width:100%;min-height:48px;border:1.5px solid var(--line2);border-radius:10px;padding:10px 14px;font-size:17px;background:#fff;color:var(--ink);font-variant-numeric:tabular-nums}
.field input:focus{outline:2px solid var(--ink);outline-offset:0;border-color:transparent}
.field .hint{font-size:13px;color:var(--t3);margin-top:6px}
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
@media (max-width:760px){.prices{grid-template-columns:1fr}}
.price-out{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.price-out .po-name{font-size:14px;font-weight:700;color:var(--t2)}
.price-out .po-val{font-size:28px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:4px}
.price-out .po-note{font-size:13px;color:var(--t3);margin-top:2px}

/* simple tables */
.tbl{width:100%;border-collapse:collapse;margin-top:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:15px}
.tbl th{font-size:12.5px;font-weight:600;color:var(--t2);text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);background:#FAFAFA}
.tbl td{padding:12px 16px;border-top:1px solid var(--line);vertical-align:top}
.tbl tr:first-child td{border-top:0}
.tbl td:first-child{font-weight:700;white-space:nowrap}
.tblwrap{overflow-x:auto;border-radius:var(--r)}
@media (max-width:640px){.tbl td:first-child{white-space:normal}}

/* steps (parallel promise) */
.steps{margin-top:28px;display:grid;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.step{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:20px;border-top:1px solid var(--line)}
.step:first-child{border-top:0}
@media (max-width:640px){.step{grid-template-columns:1fr;gap:4px}}
.step .wk{font-weight:700;font-variant-numeric:tabular-nums}
.step h3{font-size:18px}
.step p{color:var(--t2);margin-top:4px;font-size:15px}

/* forms */
form.stackform{display:grid;gap:14px;max-width:460px;margin-top:24px}
.formmsg{display:none;margin-top:16px;padding:14px 16px;border:1.5px solid var(--teal);border-radius:10px;color:var(--teal);font-weight:700}
.formmsg.show{display:block}

/* Cary mention: violet is Cary only */
.cary-name{color:var(--copper);font-weight:700}

/* footer */
footer.foot{border-top:1px solid var(--line);padding:44px 0 36px;font-size:14px;color:var(--t2);background:var(--surface)}
.foot-tag{font-size:18px;font-weight:700;color:var(--ink);margin-bottom:28px}
.footcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px}
.footcols h4{font-size:13px;color:var(--t3);font-weight:600;margin-bottom:10px;letter-spacing:0}
.footcols a{display:block;text-decoration:none;color:var(--t2);margin-top:8px;font-size:14px}
.footcols a:hover{color:var(--ink);text-decoration:underline}
.legal{margin-top:28px;font-size:12px;color:var(--t3);max-width:860px;line-height:1.6}

/* ===== v2 · phone-first: real product screens carry the page (27 Oct, after founder review) ===== */
.herodark{background:var(--ink);color:#fff;padding:40px 0 20px;overflow:hidden}
.herogrid{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.herodark h1{color:#fff;font-size:var(--hero-size)}
.herodark .eyebrow{color:#BDBDBD}
.herodark .lead{color:#E3E3E3;font-size:19px;margin-top:16px}
.herodark .btn.secondary{background:transparent;color:#fff;border-color:#fff}
.herodark .btn.secondary:hover{background:rgba(255,255,255,.12)}
.heroproof{margin-top:22px;font-size:15px;color:#E3E3E3}
.heroproof b{color:#fff}.heroproof span{color:#A8A8A8}
.herophones{position:relative;height:540px;display:flex;justify-content:center}
.phone{margin:0}
.phone{border-radius:13%/6%;overflow:hidden}
.phone img{width:100%;height:auto;display:block}
.herophones .phone{position:absolute;width:250px;top:0}
.herophones .phone.back{left:4%;top:44px;transform:rotate(-4deg);opacity:.96}
.herophones .phone.front{right:4%;transform:rotate(2.5deg)}
.samplenote{font-size:13px;color:var(--t3);margin-top:14px}
.herodark .samplenote{color:#A8A8A8;margin-top:10px}
.tuesday.big .tevent{grid-template-columns:84px 1fr;font-size:17px;padding:16px 0}
.tuesday.big .tevent .time{font-size:20px;color:var(--ink);letter-spacing:-.01em}
.tuesday.big .tcol{padding:24px}
.tuesday.big .tcol:not(.after) .time{color:var(--t3)}
.railsec{padding-left:0;padding-right:0}
.railsec .samplenote{padding-left:24px}
.shots{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:28px 0 8px;scrollbar-width:none}
.shots::-webkit-scrollbar{display:none}
.shotpad{flex:0 0 max(24px,calc((100vw - 1032px)/2))}
.shot{flex:0 0 250px;scroll-snap-align:center}
.shot .phone{border:1px solid var(--line);border-radius:30px;overflow:hidden;background:var(--surface)}
.shot .swho{font-size:13px;font-weight:700;color:var(--t3);margin-top:14px}
.shot h3{font-size:18px;margin-top:4px}
.railsec .samplenote{margin-top:8px}
.browser{margin-top:24px;border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.browser .bar{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--bg)}
.browser .bar i{width:10px;height:10px;border-radius:50%;background:var(--line2)}
.browser img{width:100%;height:auto}
.jrows{margin-top:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.jrow{display:flex;align-items:center;gap:16px;padding:18px 20px;border-top:1px solid var(--line);text-decoration:none;color:inherit;min-height:68px}
.jrow:first-child{border-top:0}
.jrow:hover{background:var(--bg)}
.jrow .jn{flex:0 0 28px;font-size:14px;font-weight:700;color:var(--t3);font-variant-numeric:tabular-nums}
.jrow .jt{flex:1;display:flex;flex-direction:column;gap:2px}
.jrow .jt b{font-size:19px;letter-spacing:-.01em}
.jrow .jt i{font-style:normal;font-size:15px;color:var(--t2)}
.jrow .go{font-size:28px;color:var(--t3);line-height:1}
.jrow.room{background:var(--copper-soft)}
.proofgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pf{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:8px}
.pf b{font-size:30px;letter-spacing:-.02em;line-height:1}
.pf span{font-size:14.5px;color:var(--t2)}
.pf a{color:var(--ink)}
.switch{margin-top:14px}
.stickycta{display:none}
@media (max-width:900px){
  .herogrid{grid-template-columns:1fr;gap:8px}
  .herophones{height:470px;order:2}
  .herophones .phone{width:218px}
  .proofgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .herodark{padding:28px 0 0}
  .herodark .lead{font-size:18px}
  .herophones{height:340px;overflow:hidden}
  .herophones .phone{width:206px}
  .herophones .phone.back{display:none}
  .herophones .phone.front{right:auto;transform:none;width:230px}
  .shotpad{flex-basis:16px}
  .shot{flex-basis:232px}
  .proofgrid{grid-template-columns:1fr}
  .pf b{font-size:28px}
  .jrow{padding:16px}
  .stickycta{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .2s}
  .stickycta.on{transform:none}
  .stickycta .btn{flex:1;min-height:48px;padding:12px 10px;font-size:15px}
  .stickycta .btn.primary{flex:1.5}
  body{padding-bottom:0}
}

/* hero v3: the product's own left navigation (nine jobs + Community) behind, the nurse's phone in front */
.herostage{position:relative;height:500px}
.herostage .screen{position:absolute;left:0;top:34px;width:128%;max-width:none;border-radius:var(--r);border:1px solid #3A3A3A;overflow:hidden;background:#fff}
.herostage .screen img{width:100%;height:auto}
.herostage .phone{position:absolute;right:2%;bottom:-6px;width:238px;border:1px solid #3A3A3A;border-radius:30px}
.herostage .phone.front{transform:rotate(1.5deg)}
@media (max-width:900px){.herostage{height:430px}.herostage .screen{width:150%}.herostage .phone{width:214px}}
@media (max-width:640px){.herostage{height:420px;overflow:hidden}.herostage .screen{width:190%;top:6px}.herostage .phone{width:210px;right:0;left:auto;bottom:0}}
/* job page: the product, as the proof */
.prodgrid{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;align-items:start;margin-top:24px}
.prodgrid .browser{margin-top:0}
.prodcap{font-size:15px;color:var(--t2);margin-top:12px;max-width:var(--measure)}
.prodcap b{color:var(--ink)}
@media (max-width:860px){.prodgrid{grid-template-columns:1fr}}
.follow{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:18px}
.follow a{color:var(--t2);text-decoration:none;font-size:14px;font-weight:600;border:1px solid var(--line2);border-radius:999px;padding:8px 14px;min-height:40px;display:inline-flex;align-items:center}
.follow a:hover{color:var(--ink);border-color:var(--ink)}

/* v3: more pages on real screens */
.shotgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:24px}
.shotgrid.three{grid-template-columns:repeat(3,1fr)}
.shotfig{margin:0}.shotfig .browser{margin-top:0}
.shotfig figcaption{margin-top:10px;font-size:14.5px;color:var(--t2)}
.shotfig figcaption b{color:var(--ink)}
@media (max-width:860px){.shotgrid,.shotgrid.three{grid-template-columns:1fr}}
.stgrid{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;margin-top:20px}
.st{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;aspect-ratio:1;border:1px solid var(--line);border-radius:10px;background:var(--surface);text-decoration:none;color:var(--t3)}
.st b{font-size:17px;letter-spacing:-.01em}.st span{font-size:11px;font-weight:600}
.st.live{border:1.5px solid var(--ink);background:var(--ink);color:#fff}
.st.live span{color:#BDE5CC}
@media (max-width:640px){.stgrid{grid-template-columns:repeat(5,1fr)}}
.demogrid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.demovis{display:flex;flex-direction:column;align-items:center}
.demovis .phone{width:260px;border:1px solid var(--line);border-radius:34px}
@media (max-width:860px){.demogrid{grid-template-columns:1fr}.demovis{order:2}}
.covgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:24px}
.cov .browser{margin-top:0}
.cov .covtag{margin-top:12px;font-size:13px;font-weight:700;color:var(--teal)}
.cov.soon .covtag{color:var(--amber)}
.cov h3{margin-top:2px}
.cov p:last-child{color:var(--t2);margin-top:6px;font-size:15px}
@media (max-width:760px){.covgrid{grid-template-columns:1fr}}

/* learn */
.learn{padding-top:56px;padding-bottom:24px}
.learn .lead{margin-top:16px;color:var(--ink);font-weight:500}
.learnbody{margin-top:24px;font-size:18px;line-height:1.6;color:var(--ink);display:grid;gap:16px}
.learnbody ol{padding-left:24px;display:grid;gap:8px}
.learnbody p,.learnbody li{max-width:var(--measure)}
.helpbox{margin-top:28px}
.srcs{margin-top:10px;padding-left:20px;display:grid;gap:6px;font-size:15px;color:var(--t2)}
.srcs a{color:var(--ink)}
.learn .ctas{margin-top:32px}

/* Home v3: the argument (big idea > old way > this way > Cary > category > proof > offer) */
.herodark .lead2{color:#C9C9C9;font-size:17px;margin-top:14px;max-width:var(--measure)}
.flow{display:grid;grid-template-columns:200px 48px 1fr;gap:12px;align-items:center;margin:24px 0}
.fsrc{background:var(--surface);border:1.5px solid var(--ink);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:4px}
.fsrc b{font-size:17px;letter-spacing:-.01em}.fsrc span{font-size:13px;color:var(--t2)}
.farrow{height:2px;background:var(--line2);position:relative}
.farrow::after{content:"";position:absolute;right:-1px;top:-5px;border:6px solid transparent;border-left-color:var(--line2)}
.fouts{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.fouts div{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 10px;display:flex;flex-direction:column;gap:2px;text-align:center}
.fouts b{font-size:14px}.fouts span{font-size:12px;font-weight:600}
.flow.old .fouts span{color:var(--red)}
.flow.old .fouts div{border-style:dashed}
.flow.new .fouts span{color:var(--teal)}
.flow.new .fsrc{background:var(--ink);color:#fff;border-color:var(--ink)}.flow.new .fsrc span{color:#C9C9C9}
@media (max-width:760px){.flow{grid-template-columns:1fr;gap:8px}.farrow{width:2px;height:28px;margin:0 auto}.farrow::after{right:-5px;top:auto;bottom:-1px;border:6px solid transparent;border-top-color:var(--line2)}.fouts{grid-template-columns:repeat(2,1fr)}.fouts div:last-child{grid-column:span 2}}
.phonefig{margin:0;display:grid;grid-template-columns:180px 1fr;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.phonefig .phone{border:1px solid var(--line);border-radius:22px}
.phonefig figcaption{font-size:15px;color:var(--t2)}.phonefig .swho{display:block;font-size:13px;font-weight:700;color:var(--t3);margin-bottom:4px}
@media (max-width:640px){.phonefig{grid-template-columns:120px 1fr}}
.carygrid{display:grid;grid-template-columns:1fr 220px;gap:32px;align-items:center}
.caryfig{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.caryfig img{width:160px;height:160px;border-radius:50%;border:3px solid var(--copper)}
.caryfig figcaption{font-weight:700;color:var(--copper)}
@media (max-width:760px){.carygrid{grid-template-columns:1fr}.caryfig{order:-1;align-items:flex-start}.caryfig img{width:96px;height:96px}}
.tbl.cmp td:last-child{font-weight:600;color:var(--ink)}
.tbl.cmp td:nth-child(2){color:var(--t2)}
.promises{margin-top:28px;background:var(--surface);border:1.5px solid var(--ink);border-radius:var(--r);padding:24px}
.promises h3{font-size:22px}
.promises ol{margin-top:14px;padding-left:22px;display:grid;gap:10px;font-size:16px;color:var(--t2)}
.promises li b{color:var(--ink)}
.promises .founding{margin-top:18px}
.proofgrid.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:640px){.proofgrid.two{grid-template-columns:1fr}}
.jrow.agent .jt i.outc{color:var(--ink);font-size:15px}
.jrow.agent .jt i.nite{color:var(--t3);font-size:14px}
.jrow.agent .jt{gap:4px}

/* site-wide argument */
.lead2{font-size:17px;color:var(--t2);margin-top:14px;max-width:var(--measure)}
.lead2.night{font-size:20px;font-weight:700;color:var(--ink);margin-top:10px}
.hero .lead b{color:var(--ink);font-weight:600}
.mech .card .eyebrow{margin-bottom:8px}
.mech .card.old{border-style:dashed}
.mech .card.new{border:1.5px solid var(--ink)}
.mech .card p:last-child{color:var(--ink);font-size:16px;line-height:1.5}
.promises.compact{padding:20px 22px}
.promises.compact h3{font-size:19px}
.promises.compact ol{font-size:15px;gap:8px}
.panel .eyebrow{color:#BDBDBD;margin-bottom:8px}

/* phone: the category table stacks into cards */
@media (max-width:640px){
  .tbl.cmp thead{display:none}
  .tbl.cmp,.tbl.cmp tbody,.tbl.cmp tr,.tbl.cmp td{display:block;width:100%}
  .tbl.cmp tr{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px}
  .tbl.cmp td{border:0;padding:2px 0}
  .tbl.cmp td:first-child{font-weight:700;font-size:16px;padding-bottom:4px}
  .tbl.cmp td:nth-child(2)::before{content:"Today: ";font-weight:600;color:var(--red)}
  .tbl.cmp td:nth-child(3)::before{content:"On CareBravo: ";font-weight:600;color:var(--teal)}
}
.costgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.costgrid .pf b{font-size:26px}
@media (max-width:760px){.costgrid{grid-template-columns:1fr}}

/* compare + states */
ul.plain{padding-left:20px;display:grid;gap:6px;margin-top:6px;color:var(--ink);font-size:15.5px}
.keybox{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.kb{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.kb span{font-size:13px;font-weight:700;color:var(--t3)}.kb b{font-size:15.5px;line-height:1.35}
@media (max-width:760px){.keybox{grid-template-columns:1fr}}
.st.guide{color:var(--ink);border-color:var(--line2)}
.st.guide span{color:var(--t2)}

/* header v2: Log in is a quiet text link; Menu is an icon button (no twin pills) */
header.top .login{margin-left:auto;font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;padding:10px 4px;min-height:44px;display:inline-flex;align-items:center}
header.top .login:hover{text-decoration:underline;text-underline-offset:3px}
.menu{display:none;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:10px;background:transparent;align-items:center;justify-content:center;margin-left:8px;cursor:pointer;color:var(--ink)}
.menu svg path{stroke:currentColor;stroke-width:2;stroke-linecap:round;transition:transform .2s,opacity .2s;transform-origin:12px 12px}
header.top.open .menu .m1{transform:translateY(6px) rotate(45deg)}
header.top.open .menu .m2{opacity:0}
header.top.open .menu .m3{transform:translateY(-6px) rotate(-45deg)}
.menu:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (max-width:860px){.menu{display:inline-flex}}

/* ============ Design review fixes (28 Oct) ============ */
/* grey on grey (P1-1): white bars and panels, meaningful fills only */
header.top{background:rgba(255,255,255,.96)}
.navlinks a:hover{background:none;color:var(--ink);text-decoration:underline;text-underline-offset:6px}
.btn.secondary:hover{background:var(--ink);color:#fff}
.herodark .btn.secondary:hover,.panel .btn.secondary:hover{background:#fff;color:var(--ink)}
.strip-note{background:var(--surface);border:1px solid var(--line);border-style:solid}
.tbl th{background:var(--surface)}
.jrow:hover{background:var(--surface);box-shadow:inset 3px 0 0 var(--ink)}
.jrow.room,.job.room{background:var(--surface);box-shadow:inset 3px 0 0 var(--ink);border-color:var(--line)}
.browser .bar{background:var(--surface)}
.phone,.browser{background:var(--surface)}
.phone img,.browser img{background:var(--line)}

/* header (P0-2): Log in stays a quiet link in the bar; menu panel white and full height with the one red action */
.menucta{display:none}
.navcta{display:none}
@media (min-width:861px){header.top.scrolled .navcta{display:inline-flex;min-height:40px;padding:0 18px;font-size:14px;margin-left:16px}
  header.top.scrolled .login{margin-left:auto}}
@media (max-width:860px){
  header.top.open .navlinks{background:var(--surface);min-height:calc(100dvh - 64px);padding:8px 16px 24px;overflow-y:auto;gap:0}
  header.top.open .navlinks a{padding:16px 4px;font-size:18px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line);border-radius:0}
  header.top.open .navlinks a[aria-current="page"]{background:none;color:var(--ink);font-weight:700;box-shadow:inset 3px 0 0 var(--ink);padding-left:12px}
  header.top.open .navlinks a.menucta{display:flex;margin-top:24px;border:0;border-radius:10px;color:#fff;justify-content:center;font-size:16px}
}

/* sticky bar (P0-1): one action, one line */
@media (max-width:640px){
  .stickycta{padding:8px 16px calc(8px + env(safe-area-inset-bottom))}
  .stickycta .btn.secondary{display:none}
  .stickycta .btn.primary{flex:1 1 100%;font-size:16px;min-height:52px;white-space:nowrap}
}

/* comparison tables on phone (P0-3): labels from each table's own headers, no status colour on a named company */
@media (max-width:640px){
  .tblwrap:has(.tbl.cmp){background:transparent;border:0}
  .tbl.cmp{background:transparent;border:0;border-radius:0}
  .tbl.cmp td:nth-child(2)::before,.tbl.cmp td:nth-child(3)::before{content:none}
  .tbl.cmp td[data-label]::before{content:attr(data-label) ": ";font-weight:600;color:var(--t3)}
  .tbl.cmp td[data-label]:last-child::before{color:var(--ink)}
  .tbl.cmp td{padding:3px 0}
}

/* screenshots on phone (P0-4) */
@media (max-width:640px){
  .browser .bar{display:none}
  .browser{border-radius:10px}
  .covgrid .cov.soon .browser{display:none}
}

/* pricing (P0-5) */
.price-out .po-val{font-size:32px}
.plan-card .pprice b{font-size:32px}

/* phone heroes (P0-6) */
@media (max-width:640px){
  :root{--hero-size:30px}
  h1{line-height:1.1}
  .lead,.herodark .lead{font-size:17px;line-height:1.45}
  .hero .lead2:not(.night),.herodark .lead2{display:none}
  .hero{padding-top:32px}
  .herocopy{display:flex;flex-direction:column}
  .herocopy .heroproof{order:3;margin-top:14px;font-size:14px}
  .herocopy .ctas{order:4}
}

/* rhythm (P1-2): white band for the turn sections, even spacing, 16px phone gutter */
section.band{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-bottom:56px;margin-top:64px}
section.band .card,section.band .whodoes,section.band .promises,section.band .wrow{background:var(--bg)}
section.s{padding-top:56px;padding-bottom:0}
@media (max-width:640px){section.s{padding-top:44px}.wrap{padding:0 16px}section.band{padding-bottom:40px;margin-top:44px}}

/* founding + plan chips (P1-3) */
.founding{border-radius:10px;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
@media (max-width:640px){.founding{display:block;padding:12px 14px;font-size:14px}.founding a{display:inline-block;margin-top:6px}}
.layer{border:0;background:var(--bg);color:var(--ink);padding:6px 10px;border-radius:6px}
.layer.base{background:var(--ink);color:#fff}
.layer.cary{background:var(--copper-soft);color:var(--copper)}

/* footer (P1-4) */
footer.foot .follow{margin:0 0 32px;gap:8px}
footer.foot .follow a{min-height:36px;padding:6px 12px;font-size:13px}
@media (max-width:640px){
  .footcols{grid-template-columns:1fr 1fr;gap:24px 16px}
  .footcols>div:first-child{grid-column:1/-1;columns:2;column-gap:16px}
  .footcols>div:first-child h4{column-span:all}
  .footcols a{margin-top:10px;font-size:15px}
}

/* closing panel (P1-5) */
.panel .eyebrow{display:none}
@media (max-width:640px){.panel{padding:28px 18px}.panel .btn{padding:0 14px;font-size:15.5px;white-space:nowrap}}

/* job hero (P1-6) */
.hero .lead2.night{font-size:18px;font-weight:600;color:var(--t2)}
.hero .grid.c2{grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.hero .grid.c2 .card{border:0;border-radius:0;padding:14px 16px;background:transparent}
.hero .grid.c2 .card+.card{border-left:1px solid var(--line)}

/* state guide (P1-7) */
.kb b{font-weight:500;color:var(--ink)}
.kb b::first-line{font-weight:700}
.statebox{border:1px solid var(--line)}
.statebox .ctas{margin-top:18px}

/* compare lists (P1-8) */
ul.plain{gap:10px}

/* polish (P2) */
.railsec .samplenote{max-width:1080px;margin:8px auto 0;padding:0 24px}
@media (max-width:640px){.railsec .samplenote{padding:0 16px}}
.railsec{position:relative}
@media (min-width:861px){.railsec::after{content:"";position:absolute;right:0;top:28px;bottom:40px;width:64px;background:linear-gradient(90deg,rgba(244,244,244,0),var(--bg));pointer-events:none}}
@media (max-width:640px){.jrow.agent .jt i.nite{display:none}}
@media (max-width:640px){.qcard{padding:16px 0;background:none;border:0;border-top:1px solid var(--line);border-radius:0}}
.herodark .btn.secondary,.panel .btn.secondary{border-color:rgba(255,255,255,.55)}
.lead2.bridge{margin-top:28px;color:var(--ink);font-weight:600}
@media (min-width:861px){header.top.scrolled .navcta{margin-left:auto}header.top.scrolled .login{margin-left:16px}}

/* AEO answer line: the one sentence an assistant can quote */
.answer{margin-top:16px;font-size:18px;line-height:1.5;color:var(--ink);font-weight:500;max-width:760px;padding-left:14px;border-left:3px solid var(--ink)}
.herodark .answer{color:#fff;border-color:#fff}
@media (max-width:640px){.answer{font-size:16px}}
/* home proof grid of three; owner screen off on phone */
.proofgrid.three{grid-template-columns:repeat(3,1fr)}
.proofgrid .pf small{display:block;margin-top:6px;font-size:12.5px;color:var(--t3)}
@media (max-width:760px){.proofgrid.three{grid-template-columns:1fr}}
@media (max-width:640px){.hide-phone{display:none}}
/* desktop measure (P2-9) */
.sub,.lead,.lead2{max-width:760px}
/* compare lead on phone: keep the first screen for the table */
@media (max-width:640px){.hero .lead{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}}
/* How it works: a day, agent by agent */
.day{margin-top:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.dayrow{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:18px 20px;border-top:1px solid var(--line)}
.dayrow:first-child{border-top:0}
.dayrow .dt{font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}
.dayrow .dag{font-weight:700;color:var(--ink);margin-bottom:4px}
.dayrow p{font-size:15.5px;color:var(--ink);max-width:680px}
.dayrow .dconf{margin-top:6px;color:var(--t2);font-size:14.5px}
@media (max-width:640px){.dayrow{grid-template-columns:1fr;gap:4px;padding:16px}}

/* ============ Re-score fixes (28 Oct, second pass) ============ */
@media (max-width:640px){
  .wrap{padding:0;padding-left:16px;padding-right:16px}
  .hero.wrap{padding-top:32px}
  .hero .lead{display:block;-webkit-line-clamp:unset;overflow:visible}
}
/* founding notice reads as information, not a control */
.founding{border:0;background:var(--surface);border-left:3px solid var(--ink);border-radius:0 var(--r) var(--r) 0;font-weight:600}
/* comparison tables: the answer column in ink, the context column quiet */
.tbl.cmp td:nth-child(2){color:var(--ink)}
.tbl.cmp td:last-child{font-weight:600;color:var(--ink)}
#list ~ section .tbl.cmp td:last-child,.tbl.cmp.ai td:last-child{font-weight:400;color:var(--t2)}
/* long explanatory copy in ink, grey only for captions and notes */
.sub{color:var(--ink)}
.card p,.cov p:last-child{color:var(--ink)}
/* job hero: product in the first screen on desktop */
.jobhero{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:48px;align-items:start}
.jobhero .jobshot{margin:8px 0 0}
@media (max-width:980px){.jobhero{grid-template-columns:1fr;gap:20px}.jobhero .jobshot{display:none}}
@media (max-width:640px){.learn.wrap{padding-top:32px}}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.jump a{font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;border:1px solid var(--line2);border-radius:999px;padding:6px 12px;background:var(--surface)}
.jump a:hover{border-color:var(--ink)}
tr[id]{scroll-margin-top:80px}
@media (max-width:640px){.tbl.cmp td{font-size:14.5px;line-height:1.45}}
/* Home on phone: same story, fewer repeats (28 Oct) */
@media (max-width:640px){
 [data-page=home] #why-works .shotgrid figure:nth-of-type(2),
 [data-page=home] #cary .shotgrid,
 [data-page=home] #coverage .browser,
 [data-page=home] #category table td:nth-child(2),
 [data-page=home] #category table th:nth-child(2),
 [data-page=home] #category > p.sub:last-of-type{display:none}
 [data-page=home] #cary .carygrid > div > p.sub:nth-of-type(3){display:none}
 [data-page=home] #coverage .covgrid{gap:10px}
 [data-page=home] #why-works .shotgrid{grid-template-columns:1fr;justify-items:center}
}
@media (max-width:640px){
 [data-page=home] #why-still > p.sub:last-of-type,
 [data-page=home] #cost > p.sub:last-of-type{display:none}
 [data-page=home] section.s{padding-top:36px;padding-bottom:0}
 [data-page=home] .promises li{padding-top:8px;padding-bottom:8px}
}
@media (max-width:640px){
 [data-page=home] #category .tblwrap{display:none}
 .aicards{grid-template-columns:1fr}
}
@media (max-width:640px){
  .hero .grid.c2.aicards{grid-template-columns:1fr}
  .hero .grid.c2.aicards .card+.card{border-left:0;border-top:1px solid var(--line)}
}

/* ---- Go-live additions (28 Oct 2026). Appended after Anand's carebravo-site.css by build.py.
   Same tokens, system font, hairline cards. Only for: form controls the package did not style
   (tel, select, textarea), the six pages carried from the old site, and the tutorials shell. ---- */

/* form controls the package stylesheet does not cover */
.field input[type=tel],.field select,.field textarea{width:100%;min-height:48px;border:1.5px solid var(--line2);border-radius:10px;padding:10px 14px;font-size:17px;background:#fff;color:var(--ink)}
.field textarea{min-height:120px;resize:vertical;line-height:1.45}
.field select:focus,.field textarea:focus{outline:2px solid var(--ink);outline-offset:0;border-color:transparent}
.hp-field{position:absolute!important;left:-9999px!important;top:-9999px!important;height:0!important;width:0!important;overflow:hidden!important}

/* links whose old target no longer exists (kept as text until approved) */
.unlinked{font-size:14px;font-weight:700;color:var(--t3)}
.ctalinks{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:20px}
.panel .ctalinks .link{color:#fff}
.panel .unlinked{color:#A8A8A8}

/* /contact/ */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:start}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
.contact-form h2{font-size:26px}
.contact-form form.stackform{max-width:none}
.contact-info-item{padding:18px 0;border-bottom:1px solid var(--line)}
.contact-info-item:first-child{padding-top:4px}
.contact-info-item h3{font-size:15px;margin-bottom:6px}
.contact-info-item p{color:var(--t2);font-size:15px}
#demo-form-message{font-size:15px}

/* /privacy-policy/ and /terms/ */
.legal-meta-bar{margin-top:8px}
.legal-meta-inner{display:flex;flex-wrap:wrap;gap:12px 32px;padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.legal-meta-item{display:flex;flex-direction:column;gap:2px}
.legal-meta-label{font-size:12px;font-weight:700;color:var(--t3)}
.legal-meta-value{font-size:15px;color:var(--ink)}
.legal-meta-value a,.legal-body a,.legal-toc a{color:var(--ink);text-underline-offset:3px}
.legal-inner{display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:start}
@media (max-width:860px){.legal-inner{grid-template-columns:1fr}}
.legal-toc{position:sticky;top:84px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;font-size:14px}
@media (max-width:860px){.legal-toc{position:static}}
.legal-toc-label{font-weight:700;margin-bottom:8px}
.legal-toc-list{padding-left:20px;display:grid;gap:6px;color:var(--t2)}
.legal-body{max-width:var(--measure)}
.legal-section{padding-bottom:28px;margin-bottom:28px;border-bottom:1px solid var(--line);scroll-margin-top:84px}
.legal-section h2{font-size:24px;margin-bottom:12px}
.legal-section h3{font-size:17px;margin:18px 0 8px}
.legal-section p,.legal-section li{font-size:16px;line-height:1.6;color:var(--t1);margin-top:10px}
.legal-section ul,.legal-section ol{padding-left:22px}
.legal-def-row{display:grid;grid-template-columns:180px 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:15px}
@media (max-width:640px){.legal-def-row{grid-template-columns:1fr;gap:2px}}
.legal-caps-block,.legal-callout,.legal-intro-block,.legal-contact-block{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-top:12px}
.legal-caps-block p{font-size:14px}
.legal-exhibit-header{margin-bottom:12px}

/* /404.html */
.notfound{text-align:center;min-height:52vh;display:flex;flex-direction:column;align-items:center;justify-content:center}
.notfound .code404{font-size:72px;font-weight:700;letter-spacing:-.04em;line-height:1}
.notfound h1{font-size:32px;margin-top:12px}
.notfound .sub{margin:12px auto 0}
.notfound .ctas{justify-content:center}

/* CareDrain(TM) Calculator (/calculate): the old page's tool styles, scoped to .cdcalc, re-pointed at the
   site tokens and the system font. Generated once by tools/scope-calc-css.mjs; edit here. */
.cdcalc{--paper:var(--bg);--card:var(--surface);--mid:var(--t2);--drain:var(--red);--drain-soft:var(--red-soft);--ledger:var(--teal);--ledger-soft:var(--teal-soft);--manila:var(--amber-soft);--focus:var(--ink);--sans:var(--cb-font);--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.cdcalc .btn-cta{background:var(--cb-red);color:#fff}
.cdcalc .btn-cta:hover{background:var(--cb-red-press)}
.cdcalc .wrap{max-width:860px; margin:0 auto; padding:0 20px;}
.cdcalc a{color:var(--ledger);}
.cdcalc button:focus-visible,.cdcalc input:focus-visible,.cdcalc .seg label:focus-within{outline:2px solid var(--focus); outline-offset:2px;}
.cdcalc .screen{display:none; padding:48px 0 72px;}
.cdcalc .screen.active{display:block; animation:cdrise .45s ease both;}
@keyframes cdrise{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
.cdcalc .eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--mid); margin-bottom:14px;}
.cdcalc h1{font-size:clamp(30px,5.4vw,46px); line-height:1.12; letter-spacing:-.01em;}
.cdcalc h2{font-size:clamp(23px,3.6vw,30px); line-height:1.2;}
.cdcalc .lede{font-size:17.5px; color:var(--mid); max-width:56ch; margin-top:16px;}
.cdcalc .stepbar{display:flex; gap:6px; margin:0 0 34px;}
.cdcalc .stepbar i{height:3px; flex:1; background:var(--line); border-radius:2px;}
.cdcalc .stepbar i.on{background:var(--ink);}
.cdcalc .note{font-size:13px; color:var(--mid);}
.cdcalc .mono{font-family:var(--mono);}
.cdcalc #intro .bleedline{margin:44px 0 0; border-top:1px solid var(--line); padding-top:26px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.cdcalc #intro .bleedline div{font-size:14px; color:var(--mid);}
.cdcalc #intro .bleedline b{display:block; font-family:var(--mono); font-size:13px; color:var(--ink); margin-bottom:5px; letter-spacing:.04em;}
.cdcalc .fgrid{display:grid; grid-template-columns:1fr 1fr; gap:20px 26px; margin-top:30px;}
.cdcalc .field{display:flex; flex-direction:column; gap:7px;}
.cdcalc .field label{font-weight:600; font-size:14.5px;}
.cdcalc .field .hint{font-size:12.5px; color:var(--mid); }
.cdcalc .field input,.cdcalc .field select{font-family:var(--sans); font-size:16px; padding:12px 13px; border:1.5px solid var(--line); border-radius:3px; background:var(--card); color:var(--ink); width:100%;}
.cdcalc .field .money{position:relative;}
.cdcalc .field .money::before{content:'$'; position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--mid); font-family:var(--mono);}
.cdcalc .field .money input{padding-left:28px; font-family:var(--mono);}
.cdcalc .formfoot{margin-top:34px; display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.cdcalc .field.miss input,.cdcalc .field.miss select{border-color:var(--drain); background:#FDF6F4;}
.cdcalc .fn.miss{border-color:var(--drain); box-shadow:0 0 0 1px var(--drain);}
.cdcalc .formerr{display:none; color:var(--drain); font-size:14px; font-weight:600; margin-top:14px;}
.cdcalc .fn{background:var(--card); border:1px solid var(--line); border-radius:4px; padding:18px 18px 16px; margin-top:14px;}
.cdcalc .fn h3{font-family:var(--sans); font-weight:700; font-size:15.5px; margin-bottom:2px;}
.cdcalc .fn .sub{font-size:13px; color:var(--mid); margin-bottom:12px;}
.cdcalc .seg{display:flex; flex-wrap:wrap; gap:7px;}
.cdcalc .seg label{font-size:13px; border:1.5px solid var(--line); border-radius:20px; padding:7px 13px; cursor:pointer; user-select:none; background:var(--paper); color:var(--ink);}
.cdcalc .seg input{position:absolute; opacity:0; pointer-events:none;}
.cdcalc .seg label:has(input:checked){background:var(--ink); border-color:var(--ink); color:#fff;}
.cdcalc .seg.warn label:has(input:checked){background:var(--drain); border-color:var(--drain);}
.cdcalc .segrow{display:grid; grid-template-columns:1fr 1fr; gap:10px 26px;}
.cdcalc .segrow .cap{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--mid); margin:8px 0 6px;}
.cdcalc .hours{margin-top:26px; background:var(--card); border:1px solid var(--line); border-radius:4px; padding:18px;}
.cdcalc .hours output{font-family:var(--mono); font-weight:600;}
.cdcalc input[type=range]{width:100%; accent-color:var(--ink); margin-top:10px;}
.cdcalc .letterhead{border:1px solid var(--ink); background:var(--card); border-radius:3px; padding:30px clamp(20px,4vw,40px); margin-top:8px; box-shadow:0 1px 0 var(--ink);}
.cdcalc .letterhead .to{font-family:var(--mono); font-size:12.5px; color:var(--mid); letter-spacing:.05em; display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:22px;}
.cdcalc .letterhead .to b{color:var(--ink); font-weight:600;}
.cdcalc .rptitle{font-size:clamp(24px,4vw,32px); line-height:1.15;}
.cdcalc .rpsub{color:var(--mid); margin-top:8px; font-size:15px; max-width:60ch;}
.cdcalc .secband{margin:44px 0 14px; display:flex; align-items:baseline; gap:12px;}
.cdcalc .secband .n{font-family:var(--mono); font-size:12px; color:var(--mid); letter-spacing:.1em;}
.cdcalc .secband h2{font-size:clamp(20px,3vw,25px);}
.cdcalc .drainrow{margin:14px 0 0;}
.cdcalc .drainrow .top{display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:14.5px;}
.cdcalc .drainrow .top b{font-weight:600;}
.cdcalc .drainrow .amt{font-family:var(--mono); font-size:13px; color:var(--drain); font-weight:600; white-space:nowrap;}
.cdcalc .bar{height:12px; background:var(--drain-soft); border-radius:2px; margin-top:6px; overflow:hidden;}
.cdcalc .bar i{display:block; height:100%; width:0; background:var(--drain); transition:width .9s cubic-bezier(.2,.7,.2,1);}
.cdcalc .drainrow .why{font-size:12.5px; color:var(--mid); margin-top:5px;}
.cdcalc .finding{background:var(--manila); border-radius:3px; padding:14px 16px; font-size:14px; margin-top:20px;}
.cdcalc .finding b{font-weight:700;}
.cdcalc .stamp{margin-top:6px; background:var(--card); border:1px solid var(--line); border-radius:4px; padding:24px; display:grid; grid-template-columns:1fr auto; gap:8px 20px; align-items:center;}
.cdcalc .stamp .lbl{font-size:14.5px; max-width:46ch;}
.cdcalc .stamp .lbl small{display:block; color:var(--mid); font-size:12.5px; margin-top:6px;}
.cdcalc .stamp .val{font-family:var(--mono); font-weight:600; font-size:clamp(24px,4.4vw,34px); color:var(--drain); text-align:right; white-space:nowrap;}
.cdcalc .stamp.green .val{color:var(--ledger);}
.cdcalc .futures{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:6px;}
.cdcalc .fut{border-radius:4px; padding:22px; border:1px solid var(--line); background:var(--card);}
.cdcalc .fut.h{border-color:var(--ledger); background:var(--ledger-soft);}
.cdcalc .fut .tag{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mid);}
.cdcalc .fut .big{font-family:var(--mono); font-weight:600; font-size:clamp(22px,4vw,30px); margin:10px 0 6px;}
.cdcalc .fut.a .big{color:var(--drain);}
.cdcalc .fut.h .big{color:var(--ledger);}
.cdcalc .fut p{font-size:13.5px; color:var(--mid);}
.cdcalc .modes{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-top:6px;}
.cdcalc .mode{border:1.5px solid var(--line); border-radius:4px; padding:16px; background:var(--card); position:relative;}
.cdcalc .mode.rec{border-color:var(--ink); box-shadow:0 0 0 1px var(--ink);}
.cdcalc .mode .pick{position:absolute; top:-10px; left:12px; background:var(--ink); color:#fff; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; padding:3px 9px; border-radius:2px; text-transform:uppercase;}
.cdcalc .mode h4{font-size:14.5px; font-weight:700; margin-bottom:6px;}
.cdcalc .mode .rate{font-family:var(--mono); font-size:15px; font-weight:600;}
.cdcalc .mode .rate small{color:var(--mid); font-size:11.5px;}
.cdcalc .mode p{font-size:12.5px; color:var(--mid); margin-top:7px;}
.cdcalc .modefine{font-size:13px; color:var(--mid); margin-top:14px; max-width:70ch;}
.cdcalc .plan{border-left:3px solid var(--ink); padding:2px 0 2px 20px; margin-top:8px;}
.cdcalc .plan .wk{margin:0 0 18px;}
.cdcalc .plan .wk b{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; display:block; margin-bottom:4px;}
.cdcalc .plan .wk p{font-size:14.5px; max-width:66ch;}
.cdcalc .gate{border:1.5px solid var(--ink); background:var(--manila); border-radius:4px; padding:26px; margin-top:34px;}
.cdcalc .gate h3{font-size:22px; margin-bottom:8px;}
.cdcalc .gate p{font-size:14.5px; color:var(--ink); max-width:58ch;}
.cdcalc .gate .row{display:grid; grid-template-columns:1fr 1fr auto; gap:12px; margin-top:18px;}
.cdcalc .gate input{font-size:15.5px; padding:12px 13px; border:1.5px solid var(--ink); border-radius:3px; background:#fff;}
.cdcalc .gate .err{color:var(--drain); font-size:13px; margin-top:8px; display:none;}
.cdcalc .locked{display:none;}
.cdcalc .report-cta{margin-top:52px; border-top:1px solid var(--line); padding-top:30px;}
.cdcalc .method{margin-top:56px; font-size:13px; color:var(--mid);}
.cdcalc .method summary{cursor:pointer; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;}
.cdcalc .method .inner{margin-top:12px; border:1px dashed var(--line); border-radius:3px; padding:16px; line-height:1.7;}
.cdcalc .src{font-size:12px; color:var(--mid); margin-top:8px;}
@media (max-width:640px){
.cdcalc .fgrid,.cdcalc .segrow,.cdcalc .futures{grid-template-columns:1fr;}
.cdcalc .gate .row{grid-template-columns:1fr;}
.cdcalc .stamp{grid-template-columns:1fr;}
.cdcalc .stamp .val{text-align:left;}
}

/* /demo/ form: a failed send says so (29 Oct) */
.stackform .formerr{color:var(--red);font-size:14px;font-weight:600;margin-top:10px}
.stackform .formerr[hidden]{display:none}
/* reCAPTCHA badge (/demo/, /contact/) sits above the phone CTA bar, never under it */
@media (max-width:860px){.grecaptcha-badge{bottom:88px!important}}

/* ════════════════════════════════════════════════════════════════════════
   UI pass (29 Oct 2026, staging feedback). Appended last by build.py.
   Same tokens, same copy; layout, spacing and responsiveness only.
   ════════════════════════════════════════════════════════════════════════ */

/* 1. Section rhythm: ~96/80px on desktop, 64/56 on tablet, 40/36 on phones.
      Consecutive plain sections share one gap instead of stacking two. */
section.s,section.s.first{padding-top:96px;padding-bottom:80px}
section.s + section.s{padding-top:16px}
.hero{padding-top:88px;padding-bottom:56px}
.closing{padding-top:80px;padding-bottom:96px}
@media (max-width:1024px){
  section.s,section.s.first{padding-top:64px;padding-bottom:56px}
  .hero{padding-top:64px;padding-bottom:40px}
  .closing{padding-top:56px;padding-bottom:72px}
}
@media (max-width:640px){
  section.s,section.s.first{padding-top:40px;padding-bottom:36px}
  section.s + section.s{padding-top:4px}
  .hero{padding-top:40px;padding-bottom:28px}
  .closing{padding-top:36px;padding-bottom:48px}
}
section.s h2{max-width:920px;text-wrap:balance}
.sub{text-wrap:pretty}

/* full-bleed white bands (no horizontal overflow: box-shadow + clip-path) */
.costband,.railsec{position:relative;background:var(--surface);box-shadow:0 0 0 100vmax var(--surface);clip-path:inset(0 -100vmax)}
section.costband,section.railsec,section.s + section.costband,section.s + section.railsec{padding-top:96px;padding-bottom:88px}
section.costband + section.s,section.railsec + section.s{padding-top:96px}
@media (max-width:1024px){
  section.costband,section.railsec,section.s + section.costband,section.s + section.railsec{padding-top:64px;padding-bottom:56px}
  section.costband + section.s,section.railsec + section.s{padding-top:64px}
}
@media (max-width:640px){
  section.costband,section.railsec,section.s + section.costband,section.s + section.railsec{padding-top:40px;padding-bottom:36px}
  section.costband + section.s,section.railsec + section.s{padding-top:40px}
}

/* 2. What the tangle costs you: the argument beside an itemised bill */
.costlayout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:start}
.costcopy .sub{margin-top:16px}
.costcopy .sub b{color:var(--ink);background:linear-gradient(transparent 62%,var(--red-soft) 62%);padding:0 2px}
.costbill{background:var(--surface);border:1px solid var(--line2);border-radius:16px;overflow:hidden;box-shadow:0 24px 48px -32px rgba(22,22,22,.35)}
.costline{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:16px;row-gap:6px;padding:24px 28px;border-bottom:1px dashed var(--line2)}
.costline .costn{grid-row:1 / span 2;font-size:13px;font-weight:700;color:var(--t3);padding-top:8px;font-variant-numeric:tabular-nums}
.costline b{font-size:32px;line-height:1.05;letter-spacing:-.025em;color:var(--red);font-variant-numeric:tabular-nums}
.costline .costwhat{font-size:15px;line-height:1.5;color:var(--t2)}
.costline.drift{background:var(--red-soft)}
.costline.drift b{color:var(--ink)}
.costcta{padding:22px 28px;background:var(--bg)}
.costcta .btn{width:100%}
.costband .samplenote{margin-top:28px;max-width:860px}
@media (max-width:900px){.costlayout{grid-template-columns:1fr;gap:32px}}
@media (max-width:640px){
  .costline{grid-template-columns:28px minmax(0,1fr);padding:20px 18px;column-gap:10px}
  .costline b{font-size:26px}
  .costcta{padding:18px}
}

/* 3. Product-screen rails: a centred grid where cards fit; a swipe slider with arrows on small screens */
.railsec{padding-left:0;padding-right:0}
.railsec .samplenote{max-width:1080px;margin:16px auto 0;padding:0 24px;text-align:center}
@media (min-width:700px){
  .shots{display:flex;flex-wrap:wrap;justify-content:center;gap:40px 32px;overflow:visible;scroll-snap-type:none;max-width:1032px;margin:0 auto;padding:40px 24px 8px}
  .shotpad{display:none}
  .shot{flex:0 0 260px}
}
@media (min-width:700px) and (max-width:900px){.shot{flex-basis:calc(50% - 16px);max-width:280px}}
.shot .phone{box-shadow:0 20px 40px -28px rgba(22,22,22,.45)}
.shot h3{text-wrap:balance}
@media (max-width:699px){
  .shots{gap:14px;padding:24px 20px 8px;scroll-padding-inline:20px}
  .shot{flex:0 0 min(76vw,260px);scroll-snap-align:start}
  .shotpad{display:none}
  .shots::after{content:"";flex:0 0 6px}
}
.railnav{display:none}
@media (max-width:699px){
  .railnav{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:14px}
  .railnav button{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);background:#fff;color:var(--ink);font-size:20px;line-height:1;cursor:pointer}
  .railnav button:disabled{opacity:.35;cursor:default}
  .railnav .raildots{display:flex;gap:6px}
  .railnav .raildots i{width:7px;height:7px;border-radius:50%;background:var(--line2)}
  .railnav .raildots i.on{background:var(--ink)}
}

/* 4. Footer: logo over the tagline, social row clear of the columns, stronger column headings */
footer.foot{padding:72px 0 40px}
.foot-logo{display:inline-block;margin-bottom:14px}
.foot-logo img{height:30px;width:auto}
.foot-tag{margin-bottom:20px}
footer.foot .follow{margin:0 0 44px;gap:10px 12px}
.footcols{gap:32px 24px}
.footcols h4{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:14px;letter-spacing:-.005em}
.footcols a{font-size:15px;margin-top:10px}
footer.foot .legal{border-top:1px solid var(--line);padding-top:24px;margin-top:44px}
footer.foot .legal + .legal{border-top:0;padding-top:0;margin-top:10px}
@media (max-width:640px){
  footer.foot{padding:48px 0 calc(96px + env(safe-area-inset-bottom))}
  .footcols{grid-template-columns:repeat(2,minmax(0,1fr))}
  footer.foot .follow{margin-bottom:32px}
}

/* 4b. Header: Anand's 29 Oct header markup and styles are used as shipped (components/header.html).
       Only guard the narrowest phones so logo + "Log in" + hamburger always fit. */
@media (max-width:340px){header.top .nav{gap:10px}.logo img{height:22px}}
/* Desktop: one line always. The bar is wider than the page wrap, nothing wraps, and spacing
   tightens in steps on smaller laptops once the red CTA joins the bar (on scroll). */
@media (min-width:861px){
  header.top .wrap.nav{max-width:1280px}
  header.top .navlinks{flex:0 1 auto;min-width:0}
  header.top .navlinks a,header.top .navcta,header.top .login{white-space:nowrap}
  header.top .navcta,header.top .login,.logo{flex:none}
}
@media (min-width:861px) and (max-width:1240px){
  header.top.scrolled .nav{gap:12px}
  header.top.scrolled .navlinks{margin-left:4px;gap:0}
  header.top.scrolled .navlinks a{padding:8px 9px}
  header.top.scrolled .navcta{margin-left:auto;padding:0 14px}
  header.top.scrolled .login{margin-left:4px}
}
@media (min-width:861px) and (max-width:1100px){
  header.top.scrolled .navlinks{font-size:13px}
  header.top.scrolled .navlinks a{padding:8px 6px}
  header.top.scrolled .navcta{font-size:13px;padding:0 12px}
  header.top.scrolled .login{font-size:14px}
}
@media (min-width:861px) and (max-width:940px){
  header.top.scrolled .nav{gap:8px}
  header.top.scrolled .logo img{height:21px}
  header.top.scrolled .navlinks{margin-left:0}
  header.top.scrolled .navlinks a{padding:8px 4px}
  header.top.scrolled .navcta{padding:0 10px}
}

/* 4c. Compatibility with Anand's 29 Oct stylesheet (we keep our rail grid, white bands and the
       carried pages' panel text). */
.railsec::after{display:none!important}
.closing.keep-eyebrow .panel .eyebrow{display:block}
@media (max-width:640px){
  [data-page=home] section.costband,[data-page=home] section.railsec{padding-top:40px;padding-bottom:36px}
  [data-page=home] section.costband + section.s,[data-page=home] section.railsec + section.s{padding-top:40px}
}

/* 5. Overflow hardening, site-wide */
html,body{overflow-x:clip}
main{overflow-wrap:break-word}
h1,h2,h3{overflow-wrap:break-word}
img,video,iframe,svg{max-width:100%}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.btn{max-width:100%;white-space:normal}
@media (max-width:640px){.wrap{padding-left:20px;padding-right:20px}}
@media (max-width:380px){h1{font-size:30px}h2{font-size:24px}.lead{font-size:18px}}

/* 6. Home hero on phones (30 Oct, user request) */
@media (max-width:640px){
  .herostage{height:510px;overflow:hidden}
  .herodark{padding:35px 0 35px}
}

/* /schedule-demo/ (carried from the old site, 29 Oct). Old page CSS scoped to .sdemo; old tokens mapped to the site tokens.
   Generated once by tools/port-schedule-demo.mjs; edit here. */
.sdemo{--white:#fff;--pearl:var(--line);--cloud:var(--bg);--slate:var(--t2);--ink-muted:var(--t2);--silver:var(--t3);--accent:var(--cb-red);--accent-light:var(--cb-red-press);--sans:var(--cb-font);--serif:var(--cb-font)}
.sdemo-hero{text-align:center}
.sdemo-hero .lead{margin-left:auto;margin-right:auto}
.sdemo > section:not(.hero){padding-bottom:80px}
@media (max-width:640px){.sdemo > section:not(.hero){padding-bottom:40px}}
.sdemo .btn-arrow{margin-left:2px}
.sdemo p#hero-subtext{text-align: center;}
.sdemo .schedule-grid{display: grid; grid-template-columns: 1fr 1.15fr; gap: 3rem; margin: 2.5rem 0; align-items: start;}
@media (max-width: 900px){
.sdemo .schedule-grid{grid-template-columns: 1fr !important;}
}
.sdemo .lead-card{background: var(--white); border: 1px solid var(--pearl); border-radius: 8px; padding: 2rem;}
.sdemo .lead-card h3{font-family: var(--sans); font-size: 0.95rem; font-weight: 700; color: var(--ink); margin-bottom: 1.25rem;}
.sdemo .lead-row{display: flex; justify-content: space-between; gap: 1rem; padding: 0.65rem 0; border-bottom: 1px solid var(--pearl);}
.sdemo .lead-row:last-child{border-bottom: none;}
.sdemo .lead-row .lead-label{font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--slate);}
.sdemo .lead-row .lead-value{font-size: 0.92rem; color: var(--ink); font-weight: 500; text-align: right;}
.sdemo .included-list{list-style: none; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--pearl);}
.sdemo .included-list li{display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.88rem; line-height: 1.6; color: var(--ink-muted); margin-bottom: 0.65rem;}
.sdemo .included-list li::before{content: '✓'; color: var(--teal); font-weight: 700; flex-shrink: 0;}
.sdemo .schedule-card{background: var(--white); border: 1px solid var(--pearl); border-radius: 8px; padding: 2.5rem;}
.sdemo .schedule-card h2{font-size: 1.5rem; margin-bottom: 0.5rem;}
.sdemo .schedule-sub{font-size: 0.92rem; color: var(--ink-muted); margin-bottom: 1.75rem; line-height: 1.6;}
.sdemo .cal-header{display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;}
.sdemo .cal-header .cal-month{font-family: var(--sans); font-size: 0.92rem; font-weight: 700; color: var(--ink);}
.sdemo .cal-nav-btn{width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--pearl); background: var(--cloud); color: var(--ink); font-size: 0.9rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s;}
.sdemo .cal-nav-btn:hover:not(:disabled){border-color: var(--accent); color: var(--accent);}
.sdemo .cal-nav-btn:disabled{opacity: 0.35; cursor: not-allowed;}
.sdemo .cal-weekdays{display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; margin-bottom: 0.4rem;}
.sdemo .cal-weekdays span{font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate); text-align: center;}
.sdemo .cal-days{display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem;}
.sdemo .cal-day{aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; color: var(--ink); background: var(--cloud); border: 1px solid transparent; border-radius: 6px; cursor: pointer; transition: all 0.15s;}
.sdemo .cal-day:hover:not(.is-disabled):not(.is-empty){border-color: var(--accent); color: var(--accent);}
.sdemo .cal-day.is-empty{background: transparent; cursor: default;}
.sdemo .cal-day.is-disabled{color: var(--silver); background: transparent; cursor: not-allowed;}
.sdemo .cal-day.is-selected{background: var(--accent); color: var(--white); font-weight: 600;}
.sdemo .cal-day.is-today:not(.is-selected){border-color: var(--teal); color: var(--teal); font-weight: 700;}
.sdemo .slots-section{margin-top: 1.75rem;}
.sdemo .slots-label{display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink); margin-bottom: 0.75rem;}
.sdemo .time-input{width: 100%; max-width: 220px; padding: 0.75rem 1rem; font-family: var(--sans); font-size: 0.92rem; color: var(--ink); background: var(--cloud); border: 1px solid var(--pearl); border-radius: 6px; outline: none; transition: border-color 0.2s;}
.sdemo .time-input:focus{border-color: var(--teal);}
.sdemo .time-input.is-invalid{border-color: #B3261E;}
.sdemo .time-input:disabled{opacity: 0.6; cursor: not-allowed;}
.sdemo .slots-empty{font-size: 0.85rem; color: var(--slate); padding: 1rem 0;}
.sdemo .time-hint{font-size: 0.8rem; color: var(--ink-muted); margin-top: 0.6rem;}
.sdemo .schedule-meta-row{display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--pearl);}
.sdemo .schedule-meta-item{flex: 1 1 200px;}
.sdemo .duration-pill{display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1rem; background: var(--teal-soft); border-radius: 6px; font-size: 0.85rem; font-weight: 600; color: var(--teal);}
.sdemo .next-steps{display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem;}
@media (max-width: 700px){
.sdemo .next-steps{grid-template-columns: 1fr;}
}
.sdemo .next-step{padding: 1.5rem; background: var(--cloud); border-radius: 8px;}
.sdemo .next-step .next-step-num{display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--white); font-size: 0.8rem; font-weight: 700; margin-bottom: 0.85rem;}
.sdemo .next-step h4{font-family: var(--sans); font-size: 0.92rem; font-weight: 700; color: var(--ink); margin-bottom: 0.4rem;}
.sdemo .next-step p{font-size: 0.85rem; line-height: 1.6; color: var(--ink-muted); margin: 0;}
.sdemo .state-panel{background: var(--white); border: 1px solid var(--pearl); border-radius: 8px; padding: 3rem 2.5rem; text-align: center;}
.sdemo .state-icon{width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 1.25rem;}
.sdemo .state-icon.success{background: var(--teal-soft); color: var(--teal);}
.sdemo .state-icon.error{background: var(--accent-soft); color: var(--accent);}
.sdemo .state-panel h2{font-size: 1.4rem; margin-bottom: 0.75rem;}
.sdemo .state-panel p{font-size: 0.95rem; color: var(--ink-muted); max-width: 460px; margin: 0 auto 0.5rem; line-height: 1.65;}
.sdemo .confirm-details{display: inline-block; text-align: left; margin: 1.75rem auto 0; background: var(--cloud); border-radius: 8px; padding: 1.5rem 2rem;}
.sdemo .confirm-details .lead-row{min-width: 260px;}
.sdemo .spinner{width: 34px; height: 34px; border: 3px solid var(--pearl); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 1.25rem;}
@keyframes spin{to { transform: rotate(360deg); }}
.sdemo .sr-only{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;}
.sdemo [hidden]{display: none !important;}