/* CareBridge SSM — marketing funnel
   Palette and type pairing carried over from the approved 2026-07 landing page.
   Atkinson Hyperlegible is an accessibility choice, not a stylistic one. */

:root{
  --stone:#F4F1EA;
  --stone-2:#EDE8DD;
  --ink:#14293A;
  --slate:#1E3A50;
  --slate-soft:#3D566A;
  --teal:#1F6F66;
  --teal-deep:#175951;
  --teal-tint:#E4EEEB;
  --line:#DBD6CA;
  --white:#FEFDFB;
  --amber:#C9772F;
  --shadow:0 1px 2px rgba(20,41,58,.06), 0 12px 30px -12px rgba(20,41,58,.18);
  --radius:14px;
  --maxw:1160px;
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --sans:"Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--stone); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:var(--serif); font-weight:500; letter-spacing:-.01em; color:var(--ink); margin:0}
a{color:var(--teal-deep); text-underline-offset:3px}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}

.skip{position:absolute; left:-9999px}
.skip:focus{left:8px; top:8px; z-index:100; background:var(--white); padding:10px 14px; border-radius:8px; box-shadow:var(--shadow)}
:focus-visible{outline:3px solid var(--teal); outline-offset:2px; border-radius:6px}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-weight:700; font-size:15.5px;
  padding:12px 20px; border-radius:10px; cursor:pointer; text-decoration:none; border:1px solid transparent;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--teal); color:#fff; box-shadow:0 8px 20px -8px rgba(31,111,102,.6)}
.btn-primary:hover{background:var(--teal-deep)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--slate); background:var(--white)}

/* header */
header{position:sticky; top:0; z-index:20; background:rgba(244,241,234,.9); backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; height:72px}
.brand{display:flex; flex-direction:column; text-decoration:none; color:var(--ink)}
.brand .name{font-family:var(--serif); font-size:20px; font-weight:600; line-height:1}
.brand .name b{color:var(--teal-deep); font-weight:600}
.brand .sub{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--slate-soft); margin-top:3px}
nav.links{display:flex; align-items:center; gap:26px}
nav.links a{color:var(--slate); text-decoration:none; font-size:15.5px}
nav.links a:hover{color:var(--teal-deep)}
.nav .btn{padding:10px 17px}

/* sections */
section.band{padding:84px 0}
section[id]{scroll-margin-top:88px}
.sec-head{max-width:62ch}
.sec-head h2{font-size:clamp(28px,3.2vw,40px); line-height:1.1; margin:0}
.sec-head p{font-size:18px; color:var(--slate-soft); margin:16px 0 0}
.note{font-size:14.5px; color:var(--slate-soft)}

/* hero */
.hero{padding:76px 0 30px}
.eyebrow{display:inline-block; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal-deep); background:var(--teal-tint); padding:7px 13px; border-radius:100px; border:1px solid rgba(31,111,102,.18); margin:0}
.hero h1{font-size:clamp(38px,4.6vw,58px); line-height:1.05; margin:22px 0 0; max-width:18ch}
.hero .sub{font-size:19px; line-height:1.62; color:var(--slate-soft); margin:24px 0 0; max-width:56ch}
.hero .note{margin:16px 0 28px; max-width:56ch}

/* before / after */
.ba-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:44px}
.ba-col{background:var(--white); border:1px solid var(--line); border-radius:16px; padding:28px; box-shadow:var(--shadow)}
.ba-col h3{font-size:19px; margin-bottom:16px}
blockquote.raw{margin:0; font-size:15.5px; color:var(--slate); background:var(--stone-2);
  border:1px dashed #CFC7B6; border-radius:10px; padding:16px; line-height:1.55}
.dap{margin:0}
.dap dt{font-weight:700; color:var(--teal-deep); font-size:13px; letter-spacing:.06em; text-transform:uppercase; margin-top:14px}
.dap dd{margin:5px 0 0; font-size:15px; color:var(--ink); line-height:1.5}
.extracted{list-style:none; padding:0; margin:20px 0 0; display:flex; flex-direction:column; gap:8px}
.extracted li{font-size:14.5px; color:var(--teal-deep); background:var(--teal-tint); border-radius:8px; padding:8px 12px}

/* capabilities */
.cap-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px}
.cap{background:var(--white); border:1px solid var(--line); border-radius:16px; padding:26px; box-shadow:var(--shadow)}
.cap h3{font-size:18px; line-height:1.25}
.cap p{font-size:15px; color:var(--slate-soft); margin:12px 0 0; line-height:1.55}

/* ROI calculator */
.roi{display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:44px; align-items:start;
  background:var(--white); border:1px solid var(--line); border-radius:20px; padding:32px; box-shadow:var(--shadow)}
.roi-inputs p{margin:0 0 18px}
.roi label,.lead label{display:block; font-weight:700; font-size:15px; margin-bottom:6px}
.roi .hint{font-weight:400; color:var(--slate-soft)}
.roi input,.lead input,.lead select{width:100%; padding:11px 13px; border:1px solid var(--line);
  border-radius:10px; font:inherit; background:var(--white); color:var(--ink)}
.roi-output{background:var(--teal-tint); border-radius:14px; padding:26px}
.roi-label{font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-deep); margin:0}
.roi-figure{font-family:var(--serif); font-size:44px; color:var(--ink); margin:10px 0 0; line-height:1}
.roi-figure .per{font-family:var(--sans); font-size:15px; font-weight:700; color:var(--slate-soft)}
.roi-secondary{font-size:15px; color:var(--slate); margin:10px 0 0}
.roi-illustrative{font-size:13.5px; color:var(--slate-soft); margin:18px 0 0; line-height:1.5}

/* boundaries */
.bounds{list-style:none; padding:0; margin:40px 0 0; display:flex; flex-direction:column; gap:14px; max-width:80ch}
.bounds li{background:var(--white); border:1px solid var(--line); border-left:3px solid var(--amber);
  border-radius:10px; padding:16px 18px; font-size:15.5px; color:var(--slate-soft); line-height:1.55}
.bounds li b{color:var(--ink)}
.scoped{margin-top:32px; background:var(--stone-2); border:1px solid var(--line); border-radius:14px; padding:24px; max-width:80ch}
.scoped h3{font-size:18px}
.scoped p{font-size:15px; color:var(--slate-soft); margin:10px 0 0; line-height:1.55}

/* pricing */
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px; align-items:stretch}
.price-card{background:var(--white); border:1px solid var(--line); border-radius:20px; padding:30px;
  display:flex; flex-direction:column; box-shadow:var(--shadow)}
.price-card.featured{border:1.6px solid var(--teal); box-shadow:0 22px 48px -22px rgba(31,111,102,.5)}
.price-card h3{font-size:21px}
.price{font-family:var(--serif); font-size:42px; color:var(--ink); line-height:1; margin:18px 0 0}
.price .per{font-family:var(--sans); font-size:15px; font-weight:700; color:var(--slate-soft)}
.price.custom{font-size:30px}
.price-desc{font-size:15px; color:var(--slate-soft); margin:14px 0 0; line-height:1.5}
.terms{list-style:none; padding:0; margin:20px 0 22px; display:flex; flex-direction:column; gap:9px; flex:1}
.terms li{font-size:14px; color:var(--slate-soft); line-height:1.5; padding-left:16px; position:relative}
.terms li::before{content:"·"; position:absolute; left:4px; color:var(--teal-deep); font-weight:700}
.authz{font-size:13.5px; color:var(--slate); background:#F6ECDF; border-radius:10px; padding:14px; margin:0 0 18px; line-height:1.5}
.price-card .btn{width:100%; justify-content:center}

/* security */
.sec-body{margin-top:36px; max-width:80ch}
.sec-body h3{font-size:19px; margin-top:32px}
.sec-body h3:first-child{margin-top:0}
.sec-body p{font-size:16px; color:var(--slate-soft); margin:12px 0 0; line-height:1.6}
.sec-body ul{margin:14px 0 0; padding-left:20px}
.sec-body li{font-size:15.5px; color:var(--slate-soft); margin-bottom:9px; line-height:1.55}

/* founder */
#founder p{font-size:17px; line-height:1.7; color:var(--slate); margin-top:18px; max-width:70ch}

/* lead form */
.cta{background:var(--ink)}
.cta .sec-head h2{color:#FCFAF5}
.cta .sec-head p{color:#AFC2C1}
.lead{margin-top:36px; max-width:560px; background:var(--white); border-radius:20px; padding:30px; box-shadow:var(--shadow)}
.lead p{margin:0 0 18px}
.lead .consent{font-size:13.5px; color:var(--slate-soft); line-height:1.5}
.lead .consent b{color:var(--ink)}
.lead button{width:100%; justify-content:center}
.form-status{font-size:14px; color:var(--teal-deep); margin-top:12px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* footer */
footer{background:var(--stone-2); border-top:1px solid var(--line); padding:56px 0 40px; font-size:14.5px; color:var(--slate-soft)}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px}
.foot-brand .name{font-family:var(--serif); font-size:19px; color:var(--ink); font-weight:600}
.foot-brand .accent{color:var(--teal-deep)}
.foot-brand p{margin:12px 0 0; max-width:44ch; line-height:1.6}
.foot-col h4{font-family:var(--sans); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); margin:0 0 14px}
.foot-col a{display:block; color:var(--slate-soft); text-decoration:none; margin-bottom:10px}
.foot-col a:hover{color:var(--teal-deep)}
.foot-bar{margin-top:40px; padding-top:22px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px}

/* legal documents */
.legal-doc{max-width:78ch}
.legal-doc h1{font-size:clamp(30px,3.4vw,40px)}
.legal-doc h2{font-size:22px; margin-top:38px}
.legal-doc p,.legal-doc li{font-size:16px; color:var(--slate-soft); line-height:1.65}
.legal-doc .meta{font-size:14px; color:var(--slate-soft); margin-top:12px}
.legal-doc .callout{background:var(--teal-tint); border-radius:14px; padding:22px; margin:28px 0}
.legal-doc .callout p{color:var(--slate); margin:0 0 12px}
.legal-doc .callout p:last-child{margin-bottom:0}
.legal-doc .back{margin-top:44px}

@media (max-width:920px){
  .ba-grid,.roi,.cap-grid,.pricing-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  section.band{padding:60px 0}
  nav.links a:not(.btn){display:none}
}
@media (max-width:520px){
  .wrap{padding:0 18px}
  .hero{padding:48px 0 18px}
  .btn{width:100%; justify-content:center}
  .nav .btn{width:auto}
  .foot-grid{grid-template-columns:1fr}
  .brand .sub{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}