/* CareProTools website — "Calm" design rules (see DESIGN.md in the app).
   One stylesheet for the homepage, Residential and Education pages.
   Themes: body.t-hub (both), body.t-res (berry), body.t-edu (indigo). */
@font-face{font-family:'Lexend';src:url(fonts/Lexend-Variable.woff) format('woff');font-weight:300 700;font-style:normal;font-display:swap}

:root{
  --indigo:#33389A; --indigo-ground:#F0F1F8; --butter:#FFF1BF; --indigo-ink:#1E2033; --indigo-muted:#5E6280; --indigo-tint:#E4E5F4;
  --berry:#6B2D5C;  --berry-ground:#F6F1F4;  --blush:#F1D7E5;  --berry-ink:#2A1F27;  --berry-muted:#6E5F69;  --berry-tint:#EFE3EA;
  --good-bg:#E3F2E8; --good:#1F6640; --warn-bg:#FFF1BF; --warn:#6B4E00; --bad-bg:#FBE1E1; --bad:#8F2525;
  --white:#FFFFFF; --radius:26px; --radius-sm:16px;
  --brand:var(--indigo); --ground:#F3F3F8; --soft:var(--butter); --ink:#1E2033; --muted:#5E6280; --tint:var(--indigo-tint);
}
body.t-res{--brand:var(--berry); --ground:var(--berry-ground); --soft:var(--blush); --ink:var(--berry-ink); --muted:var(--berry-muted); --tint:var(--berry-tint)}
body.t-edu{--brand:var(--indigo); --ground:var(--indigo-ground); --soft:var(--butter); --ink:var(--indigo-ink); --muted:var(--indigo-muted); --tint:var(--indigo-tint)}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 1.0625rem/1.6 'Lexend',system-ui,-apple-system,"Segoe UI",sans-serif}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--brand)}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-weight:600;line-height:1.2;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4.6vw,3.1rem)}
h2{font-size:clamp(1.55rem,3vw,2.1rem)}
h3{font-size:1.15rem}
p{margin:0 0 1em}
.lead{font-size:1.2rem;color:var(--muted);max-width:40em}
.muted{color:var(--muted)}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:8px;background:var(--brand);color:#fff;padding:10px 16px;border-radius:12px;z-index:20}
.skip:focus{left:16px}

/* header */
.top{padding:18px 0}
.top .wrap{display:flex;align-items:center;gap:20px}
.brandlink{display:block;flex:none}
.brandlink img{height:52px;width:auto}
.nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav a{color:var(--ink);text-decoration:none;font-weight:500;padding:10px 12px;border-radius:12px}
.nav a:hover{background:var(--tint)}
.menu{display:none;margin-left:auto}
.menu summary{list-style:none;cursor:pointer;font-weight:500;padding:10px 16px;border-radius:12px;background:var(--white)}
.menu summary::-webkit-details-marker{display:none}
.menu[open] .menu-panel{display:flex}
.menu-panel{display:none;flex-direction:column;position:absolute;right:16px;left:16px;margin-top:10px;background:var(--white);border-radius:var(--radius-sm);padding:10px;z-index:10;box-shadow:0 8px 30px rgba(30,32,51,.12)}
.menu-panel a{padding:12px 14px;border-radius:12px;text-decoration:none;color:var(--ink);font-weight:500}
.menu-panel a:hover{background:var(--tint)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:12px;font:500 1rem/1.2 inherit;font-family:inherit;text-decoration:none;cursor:pointer;border:0}
.btn-main{background:var(--brand);color:#fff}
.btn-main:hover{filter:brightness(1.12)}
.btn-soft{background:var(--white);color:var(--brand)}
.btn-soft:hover{background:var(--tint)}
.btn-line{background:transparent;color:var(--brand);box-shadow:inset 0 0 0 1.5px currentColor}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.signin{position:relative}
.signin summary{list-style:none;cursor:pointer}
.signin summary::-webkit-details-marker{display:none}
.signin-panel{position:absolute;right:0;top:calc(100% + 8px);width:290px;background:var(--white);border-radius:var(--radius-sm);padding:8px;z-index:10;box-shadow:0 8px 30px rgba(30,32,51,.12)}
.signin-panel a{display:block;padding:12px 14px;border-radius:12px;text-decoration:none;color:var(--ink)}
.signin-panel a:hover{background:var(--tint)}
.signin-panel b{display:block;font-weight:500}
.signin-panel span{font-size:.88rem;color:var(--muted)}
.signin-panel .res b{color:var(--berry)}
.signin-panel .edu b{color:var(--indigo)}

/* sections */
section{padding:56px 0}
.hero{padding:40px 0 64px}
.hero .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.panel{background:var(--white);border-radius:var(--radius);padding:32px}
.panel-soft{background:var(--soft);border-radius:var(--radius);padding:32px}
.panel-brand{background:var(--brand);color:#fff;border-radius:var(--radius);padding:36px}
.panel-brand a:not(.btn){color:#fff}
.panel-brand .muted{color:rgba(255,255,255,.85)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cards-2{grid-template-columns:repeat(2,1fr)}
.cards-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--white);border-radius:var(--radius);padding:26px}
.card h3{margin-bottom:.4em}
.card p:last-child{margin-bottom:0}
.sechead{max-width:44em;margin-bottom:28px}
.sechead p{color:var(--muted);font-size:1.1rem}
.ticks{list-style:none;padding:0;margin:0}
.ticks li{position:relative;padding-left:30px;margin:0 0 10px}
.ticks li::before{content:"";position:absolute;left:2px;top:.45em;width:14px;height:8px;border-left:2.5px solid var(--brand);border-bottom:2.5px solid var(--brand);transform:rotate(-45deg)}
.tag{display:inline-block;font-size:.85rem;font-weight:500;padding:4px 12px;border-radius:9px;background:var(--tint);color:var(--brand)}

/* the two doors */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.door{border-radius:28px;padding:34px;display:flex;flex-direction:column;gap:6px}
.door-res{background:var(--blush);color:var(--berry-ink)}
.door-edu{background:var(--butter);color:var(--indigo-ink)}
.door .doorlogo{height:58px;width:auto;margin-bottom:14px}
.door h2{font-size:1.6rem}
.door p{max-width:32em}
.door .ticks li::before{border-color:currentColor}
.door-res .ticks li::before{border-color:var(--berry)}
.door-edu .ticks li::before{border-color:var(--indigo)}
.door .btns{margin-top:auto;padding-top:18px}
.door-res .btn-main{background:var(--berry)}
.door-edu .btn-main{background:var(--indigo)}
.door-res .btn-soft{color:var(--berry)}
.door-edu .btn-soft{color:var(--indigo)}
.door .who{font-weight:500;margin-bottom:8px}
.door-res .who{color:var(--berry)}
.door-edu .who{color:var(--indigo)}

/* product previews (drawn in HTML, sample data) */
.preview{background:var(--white);border-radius:28px;padding:22px;font-size:.95rem}
.preview .pv-hello{background:var(--brand);color:#fff;border-radius:20px;padding:20px 22px;margin-bottom:14px}
.preview .pv-hello b{display:block;font-size:1.15rem;font-weight:600}
.preview .pv-hello span{opacity:.88;font-size:.92rem}
.pv-label{font-weight:600;margin:14px 4px 8px}
.pv-row{display:flex;align-items:center;gap:12px;background:var(--ground);border-radius:14px;padding:11px 14px;margin-bottom:8px}
.pv-row .dot{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:.85rem}
.dot.bad{background:var(--bad-bg);color:var(--bad)} .dot.warn{background:var(--warn-bg);color:var(--warn)} .dot.info{background:var(--tint);color:var(--brand)}
.pv-row .grow{flex:1;min-width:0}
.pv-chip{font-size:.8rem;font-weight:500;padding:3px 10px;border-radius:8px;white-space:nowrap}
.chip-g{background:#E1F0E6;color:#1F6640} .chip-y{background:#FFF1BF;color:#6B4E00} .chip-b{background:#E1EAF8;color:#2B4C8C} .chip-r{background:#FBE1E1;color:#8F2525}
.av{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:600;background:var(--soft);color:var(--brand)}
.score{display:flex;align-items:center;gap:18px;background:var(--ground);border-radius:18px;padding:16px 18px;margin-bottom:12px}
.ring{flex:none;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:1.15rem;
  background:conic-gradient(var(--brand) calc(var(--p)*1%),var(--tint) 0);position:relative}
.ring::after{content:"";position:absolute;inset:9px;background:var(--ground);border-radius:50%}
.ring span{position:relative;z-index:1}
.pv-note{font-size:.82rem;color:var(--muted);margin:10px 4px 0}

/* comparison */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.compare .card h3{display:flex;align-items:center;gap:10px}

/* modules (education) */
.modgroup{background:var(--white);border-radius:var(--radius);padding:28px}
.modgroup h3{color:var(--brand)}
.modgroup ul{margin:0;padding:0;list-style:none}
.modgroup li{padding:10px 0;border-top:1.5px solid var(--ground)}
.modgroup li:first-child{border-top:0}
.modgroup li b{font-weight:500;display:block}
.modgroup li span{color:var(--muted);font-size:.95rem}

/* tools */
.tool{display:flex;flex-direction:column}
.tool .btn{margin-top:auto;align-self:flex-start}
.tool p{color:var(--muted)}

/* quote */
.quote{font-size:1.35rem;line-height:1.45;font-weight:500;margin:0 0 12px}

/* contact */
.contact .grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}

/* footer */
footer{padding:48px 0 40px;margin-top:24px;background:var(--white)}
footer .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
footer h3{font-size:1rem;margin-bottom:12px}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:8px}
footer a{color:var(--ink);text-decoration:none}
footer a:hover{color:var(--brand);text-decoration:underline}
footer .flogo{height:46px;width:auto;margin-bottom:14px}
footer .small{font-size:.86rem;color:var(--muted);margin-top:28px;padding-top:20px;border-top:1.5px solid var(--ground)}

/* responsive */
@media (max-width:980px){
  .hero .grid,.contact .grid{grid-template-columns:1fr}
  .cards,.cards-4{grid-template-columns:1fr 1fr}
  footer .grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .nav{display:none}
  .menu{display:block}
  .doors,.cards,.cards-2,.cards-4,.compare{grid-template-columns:1fr}
  .wrap{padding:0 16px}
  section{padding:40px 0}
  .hero{padding:16px 0 40px}
  .panel,.panel-soft,.panel-brand,.door,.card,.modgroup{padding:22px}
  .brandlink img{height:42px}
  footer .grid{grid-template-columns:1fr}
  .btns .btn{flex:1 1 auto}
}
@media print{.top,.menu,.signin{display:none}}

/* fixes */
.nav a.btn-main,.nav a.btn-main:hover{color:#fff;background:var(--brand)}
.door .doorlogo{align-self:flex-start}