/* CareLite public site — same ink and accent as the application, but with air.
   The app is a counter ledger; the site is a brochure, so it breathes. */

:root{
  --ink:#12212e; --ink-soft:#3d5265; --canvas:#ffffff; --wash:#f2f5f7;
  --accent:#0b6e5f; --accent-dark:#095448; --line:#dbe3e9; --due:#b26a00;
  --radius:10px; --shell:1140px;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
.container{max-width:var(--shell); margin:0 auto; padding:0 20px}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2; letter-spacing:-.015em; margin:0 0 .5em}
h1{font-size:clamp(1.9rem,4vw,2.9rem); font-weight:700}
h2{font-size:clamp(1.4rem,2.6vw,2rem); font-weight:650}
h3{font-size:1.05rem; font-weight:650}
p{margin:0 0 1rem}

/* ---- header ---- */
.site-head{background:var(--ink); color:#fff; position:sticky; top:0; z-index:50}
.site-head .container{display:flex; align-items:center; gap:24px; height:64px}
.brand{font-weight:700; font-size:1.25rem; color:#fff; letter-spacing:-.02em}
.brand span{color:var(--accent)}
.brand:hover{text-decoration:none; color:#fff}
.site-head nav{display:flex; gap:18px; margin-left:auto; flex-wrap:wrap}
.site-head nav a{color:rgba(255,255,255,.78); font-size:.88rem}
.site-head nav a:hover,.site-head nav a.active{color:#fff; text-decoration:none}
.site-head nav a.active{box-shadow:inset 0 -2px 0 var(--accent)}
.head-actions{display:flex; gap:8px}
.btn-accent{background:var(--accent); border-color:var(--accent); color:#fff}
.btn-accent:hover{background:var(--accent-dark); border-color:var(--accent-dark); color:#fff}

/* ---- hero ---- */
.hero{background:linear-gradient(180deg,var(--ink) 0%,#16303f 100%); color:#fff; padding:72px 0 64px}
.hero h1{color:#fff; max-width:16ch}
.hero .lede{font-size:1.15rem; color:rgba(255,255,255,.82); max-width:60ch}
.hero .kicker{
  text-transform:uppercase; letter-spacing:.12em; font-size:.72rem;
  color:var(--accent); font-weight:700; margin-bottom:12px;
}
.hero-actions{margin-top:28px; display:flex; gap:10px; flex-wrap:wrap}
.hero-points{display:flex; gap:28px; flex-wrap:wrap; margin-top:36px; color:rgba(255,255,255,.72); font-size:.9rem}
.hero-points div{border-left:2px solid var(--accent); padding-left:12px}

/* ---- sections ---- */
section{padding:56px 0}
section.wash{background:var(--wash)}
.section-head{max-width:64ch; margin-bottom:32px}
.section-head p{color:var(--ink-soft)}

.grid{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card-flat{
  background:var(--canvas); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; height:100%;
}
.card-flat h3{margin-bottom:6px}
.card-flat p{color:var(--ink-soft); font-size:.93rem; margin:0}
.card-flat .tag{
  display:inline-block; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--accent); font-weight:700; margin-bottom:10px;
}

.checks{list-style:none; padding:0; margin:0}
.checks li{padding:8px 0 8px 26px; position:relative; color:var(--ink-soft); border-bottom:1px solid var(--line)}
.checks li:last-child{border-bottom:0}
.checks li::before{
  content:""; position:absolute; left:4px; top:16px; width:8px; height:8px;
  background:var(--accent); border-radius:2px;
}

/* ---- pricing ---- */
.plans{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.plan{border:1px solid var(--line); border-radius:var(--radius); padding:26px; background:#fff}
.plan.featured{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.plan .price{
  font-size:2rem; font-weight:700; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; margin:8px 0 2px;
}
.plan .per{color:var(--ink-soft); font-size:.85rem}
.plan ul{list-style:none; padding:0; margin:18px 0 22px}
.plan li{padding:6px 0; border-bottom:1px solid var(--line); font-size:.92rem; color:var(--ink-soft)}

/* ---- faq ---- */
.faq details{border-bottom:1px solid var(--line); padding:16px 0}
.faq summary{font-weight:650; cursor:pointer; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; float:right; color:var(--accent); font-weight:700}
.faq details[open] summary::after{content:"\2013"}
.faq p{margin:12px 0 0; color:var(--ink-soft)}

/* ---- forms ---- */
.form-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px}
.form-card label{font-size:.82rem; font-weight:600; color:var(--ink-soft); margin-bottom:4px}
.req{color:#b3261e}
.hp{position:absolute; left:-9999px}

/* ---- cta ---- */
.cta{background:var(--ink); color:#fff; text-align:center}
.cta h2{color:#fff}
.cta p{color:rgba(255,255,255,.78); max-width:52ch; margin:0 auto 22px}

/* ---- prose (CMS body) ---- */
.prose{max-width:72ch}
.prose h2{margin-top:2rem}
.prose ul{padding-left:20px; color:var(--ink-soft)}
.prose table{width:100%; border-collapse:collapse; margin:1rem 0}
.prose th,.prose td{border:1px solid var(--line); padding:8px 10px; text-align:left; font-size:.92rem}

/* ---- footer ---- */
.site-foot{background:var(--ink); color:rgba(255,255,255,.72); padding:48px 0 24px; margin-top:0}
.site-foot h3{color:#fff; font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:12px}
.site-foot a{display:block; color:rgba(255,255,255,.72); font-size:.9rem; padding:3px 0}
.site-foot a:hover{color:#fff}
.site-foot .brand{margin-bottom:10px}
.foot-base{border-top:1px solid rgba(255,255,255,.12); margin-top:32px; padding-top:18px; color:rgba(255,255,255,.5)}

@media (max-width:820px){
  .site-head .container{height:auto; padding-top:12px; padding-bottom:12px; flex-wrap:wrap}
  .site-head nav{order:3; width:100%; margin-left:0; gap:14px}
  .head-actions{margin-left:auto}
  section{padding:40px 0}
  .hero{padding:52px 0 44px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ---- related links ---- */
.related .card-flat{display:block; color:inherit; transition:border-color .12s ease}
.related .card-flat:hover{border-color:var(--accent); text-decoration:none}
.related .card-flat h3{color:var(--accent); font-size:.98rem}