/* New Plan Care - warm, trustworthy, premium. Built for the mid-50s daughter
   researching care for a parent. Teal-forward brand world, real photography,
   humanist type. Calm is the point; craft is the "wow", not noise. */

:root{
  --paper:#FBFAF6;         /* warm ivory ground */
  --paper-2:#F1ECE2;       /* warm sand, alternating bands */
  --card:#FFFFFF;
  --ink:#222E29;           /* deep forest ink for text */
  --ink-soft:#4C574F;      /* secondary text */
  --ink-faint:#7C857D;
  --teal:#0E6E68;          /* brand primary */
  --teal-deep:#0A4E4A;
  --teal-wash:#E5EFEA;     /* pale sage tint */
  --teal-line:#CBDED6;
  --brass:#A9772A;         /* warm accent, used sparingly */
  --line:#E4DED2;          /* warm hairline */
  --shadow:0 1px 2px rgba(30,45,40,.04), 0 8px 30px rgba(30,45,40,.06);
  --shadow-lg:0 2px 6px rgba(30,45,40,.05), 0 24px 60px rgba(30,45,40,.10);
  --r:16px;
  --r-sm:11px;
  --wrap:1160px;
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.62;
  font-feature-settings:"ss01","cv05"; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--teal-deep); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px}
a:hover{color:var(--teal)}
h1,h2,h3{font-family:var(--serif); font-weight:500; line-height:1.1; letter-spacing:-.01em; color:var(--ink); margin:0}
h1{font-size:clamp(2.3rem,5.2vw,3.9rem); font-optical-sizing:auto}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem)}
h3{font-size:1.24rem; line-height:1.22}
p{margin:0 0 1.05em}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
section{padding:76px 0}
section.alt{background:var(--paper-2)}
:focus-visible{outline:3px solid var(--teal); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important; scroll-behavior:auto!important}}

/* ---- eyebrow / small label ---- */
.kicker{
  font-family:var(--sans); font-size:.82rem; font-weight:600; letter-spacing:.02em;
  color:var(--teal-deep); text-transform:none; margin:0 0 .7rem;
  display:inline-flex; align-items:center; gap:.5rem;
}
.kicker::before{content:""; width:22px; height:1.5px; background:var(--brass); display:inline-block; border-radius:2px}

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--sans); font-weight:600; font-size:1rem; line-height:1;
  padding:.92em 1.5em; border-radius:999px; text-decoration:none; cursor:pointer;
  border:1.5px solid transparent; transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn.teal,.btn:not(.ghost):not(.outline){background:var(--teal); color:#fff; box-shadow:0 6px 18px rgba(14,110,104,.22)}
.btn.teal:hover,.btn:not(.ghost):not(.outline):hover{background:var(--teal-deep); transform:translateY(-1px); box-shadow:0 10px 26px rgba(14,110,104,.28); color:#fff}
.btn.ghost{background:rgba(255,255,255,.85); color:var(--teal-deep); border-color:var(--teal-line)}
.btn.ghost:hover{background:#fff; border-color:var(--teal); transform:translateY(-1px)}
.btn.outline{background:transparent; color:var(--teal-deep); border-color:var(--teal-line)}
.btn.outline:hover{border-color:var(--teal); background:var(--teal-wash)}
.btn.lg{font-size:1.06rem; padding:1.02em 1.7em}

/* ---- top strip + header ---- */
.top{background:var(--teal-deep); color:#dff0eb; font-size:.86rem}
.top .wrap{display:flex; align-items:center; justify-content:space-between; padding-top:9px; padding-bottom:9px}
.top a{color:#fff; font-weight:600; text-decoration:none}
.top a:hover{text-decoration:underline}
header.site{position:sticky; top:0; z-index:40; background:rgba(251,250,246,.9); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--line)}
header.site .wrap{display:flex; align-items:center; gap:18px; padding-top:14px; padding-bottom:14px}
header .brand{display:flex; line-height:0}
header .logo{height:46px; width:auto}
header .sp{flex:1}
header .call{font-family:var(--serif); font-size:1.16rem; color:var(--ink); text-decoration:none; font-weight:500}
header .call:hover{color:var(--teal)}
header .nav-links{display:flex; gap:22px; align-items:center}
header .nav-links a{color:var(--ink-soft); text-decoration:none; font-size:.96rem; font-weight:500}
header .nav-links a:hover{color:var(--teal)}
@media(max-width:900px){header .nav-links,header .call{display:none}}

/* ---- hero: photography-led ---- */
.hero{padding:0; background:var(--paper)}
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; padding-top:64px; padding-bottom:64px}
.hero h1{margin-bottom:.35em}
.hero .lede{font-size:1.22rem; color:var(--ink-soft); max-width:34ch; margin-bottom:1.6em}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:1.7em}
.hero-notes{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px 22px}
.hero-notes li{position:relative; padding-left:24px; color:var(--ink-soft); font-size:.96rem; font-weight:500}
.hero-notes li::before{content:""; position:absolute; left:0; top:.42em; width:13px; height:8px; border-left:2px solid var(--teal); border-bottom:2px solid var(--teal); transform:rotate(-45deg)}
.hero-photo{position:relative}
.hero-photo img{width:100%; height:100%; max-height:560px; object-fit:cover; border-radius:22px; box-shadow:var(--shadow-lg)}
.hero-photo .chip{
  position:absolute; left:-14px; bottom:26px; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:14px 18px; box-shadow:var(--shadow); max-width:250px; display:flex; gap:12px; align-items:center;
}
.hero-photo .chip .dot{width:38px; height:38px; border-radius:10px; background:var(--teal-wash); display:grid; place-items:center; flex:none}
.hero-photo .chip b{font-family:var(--serif); font-weight:600; font-size:1.02rem; display:block}
.hero-photo .chip span{font-size:.85rem; color:var(--ink-soft); line-height:1.35}
@media(max-width:860px){
  .hero .wrap{grid-template-columns:1fr; gap:30px; padding-top:40px}
  .hero-photo img{max-height:420px}
  .hero .lede{max-width:none}
}

/* ---- empathy band ---- */
.empathy{background:var(--teal-deep); color:#eaf4f0}
.empathy .wrap{max-width:820px; text-align:center}
.empathy h2{color:#fff; margin-bottom:.5em}
.empathy p{font-size:1.16rem; color:#cfe6df; margin:0 auto}
.empathy .em-list{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 14px; margin-top:1.6em; list-style:none; padding:0}
.empathy .em-list li{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:.5em 1.1em; font-size:.95rem; color:#eaf4f0}

/* ---- generic section head ---- */
.sec-head{max-width:640px; margin-bottom:38px}
.sec-head.center{margin-left:auto; margin-right:auto; text-align:center}
.sec-head .lede{font-size:1.14rem; color:var(--ink-soft); margin-top:.5em}

/* ---- value cards ---- */
.cards3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.vcard{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:26px; box-shadow:var(--shadow)}
.vcard .ic{width:46px; height:46px; border-radius:12px; background:var(--teal-wash); display:grid; place-items:center; margin-bottom:16px}
.vcard .ic svg{width:24px; height:24px; stroke:var(--teal-deep)}
.vcard h3{margin-bottom:.35em}
.vcard p{color:var(--ink-soft); margin:0; font-size:.98rem}
@media(max-width:820px){.cards3{grid-template-columns:1fr}}

/* ---- split (owner, form) ---- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.split .lede{font-size:1.18rem; color:var(--ink-soft)}
@media(max-width:860px){.split{grid-template-columns:1fr; gap:32px}}
.owner-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-lg)}
.owner-card img{width:100%; height:auto; object-fit:cover}
.owner-card .pad{padding:24px 26px}
.owner-card h3{margin-bottom:.3em}
.owner-card .role{color:var(--teal-deep); font-weight:600; font-size:.9rem; font-family:var(--sans); margin-bottom:.8em}
.owner-card p{color:var(--ink-soft); font-size:.97rem; margin:0}

/* ---- services ---- */
.svcs{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.svc{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:24px; box-shadow:var(--shadow); min-height:150px}
.svc h3{margin-bottom:.35em}
.svc p{color:var(--ink-soft); font-size:.96rem; margin:0}
.svc.photo{position:relative; color:#fff; border:0; min-height:230px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden}
.svc.photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.svc.photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,60,56,.05),rgba(8,47,44,.82)); z-index:1}
.svc.photo h3,.svc.photo p{position:relative; z-index:2; color:#fff}
.svc.photo p{color:#e5f1ec}
@media(max-width:820px){.svcs{grid-template-columns:1fr}}
.trust{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:26px}
.trust div{background:var(--teal-wash); border:1px solid var(--teal-line); border-radius:var(--r-sm); padding:16px; font-size:.92rem; color:var(--teal-deep); font-weight:500}
@media(max-width:820px){.trust{grid-template-columns:1fr 1fr}}

/* ---- steps / how it works ---- */
.steps{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:s}
.step{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:24px; position:relative}
.step .num{font-family:var(--serif); font-size:1.5rem; color:var(--brass); font-weight:600; display:block; margin-bottom:.4em}
.step h3{font-size:1.08rem; margin-bottom:.35em}
.step p{color:var(--ink-soft); font-size:.94rem; margin:0}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* ---- RESOURCES library (the differentiator) ---- */
.res-intro{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:34px}
.res-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media(max-width:1040px){.res-grid{grid-template-columns:repeat(2,1fr)}}
.res{display:flex; gap:18px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px; box-shadow:var(--shadow); align-items:flex-start}
.res .tag{flex:none; width:52px; height:66px; border-radius:8px; background:var(--teal-wash); border:1px solid var(--teal-line); display:grid; place-items:center; position:relative}
.res .tag svg{width:24px; height:24px; stroke:var(--teal-deep)}
.res .tag::after{content:"PDF"; position:absolute; bottom:5px; font-size:.54rem; font-weight:700; letter-spacing:.04em; color:var(--teal-deep)}
.res h3{font-size:1.1rem; margin-bottom:.28em}
.res p{color:var(--ink-soft); font-size:.93rem; margin:0 0 .7em}
.res .dl{font-weight:600; font-size:.92rem; color:var(--teal-deep); text-decoration:none; display:inline-flex; align-items:center; gap:.4em}
.res .dl:hover{color:var(--teal)}
.res .dl::after{content:"\2193"; font-weight:700}
@media(max-width:760px){.res-grid{grid-template-columns:1fr}}
.read-list{margin-top:26px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.read-list a{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm); padding:14px 16px; text-decoration:none; color:var(--ink); font-weight:500; font-size:.95rem; display:flex; justify-content:space-between; align-items:center; gap:10px}
.read-list a:hover{border-color:var(--teal); color:var(--teal-deep)}
.read-list a span{color:var(--brass); font-weight:700}
@media(max-width:820px){.read-list{grid-template-columns:1fr}}

/* ---- areas ---- */
.areas{display:flex; flex-wrap:wrap; gap:10px}
.areas a,.areas span{background:var(--card); border:1px solid var(--line); border-radius:999px; padding:.55em 1.1em; font-size:.95rem; color:var(--ink-soft); text-decoration:none}
.areas a:hover{border-color:var(--teal); color:var(--teal-deep)}

/* ---- FAQ ---- */
.faq details{background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); padding:4px 22px; margin-bottom:12px}
.faq summary{font-family:var(--serif); font-size:1.12rem; font-weight:500; cursor:pointer; padding:16px 0; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--teal); font-size:1.5rem; font-family:var(--sans); flex:none}
.faq details[open] summary::after{content:"\2013"}
.faq details p{color:var(--ink-soft); margin:0 0 16px; font-size:.98rem}

/* ---- lead form ---- */
.form-panel{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:30px; box-shadow:var(--shadow-lg)}
.lead label{display:block; font-size:.9rem; font-weight:600; color:var(--ink); margin:14px 0 5px}
.lead input,.lead select,.lead textarea{width:100%; font:inherit; font-size:1rem; padding:.72em .9em; border:1.5px solid var(--line); border-radius:10px; background:#fdfdfb; color:var(--ink)}
.lead input:focus,.lead select:focus,.lead textarea:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-wash)}
.lead .row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:520px){.lead .row2{grid-template-columns:1fr}}
.lead .check{display:flex; gap:10px; align-items:flex-start; font-weight:400; font-size:.8rem; color:var(--ink-faint); margin-top:16px; line-height:1.45}
.lead .check input{width:auto; margin-top:3px; flex:none}
.lead .fineprint{font-size:.78rem; color:var(--ink-faint); margin:12px 0 0}
.lead button{width:100%; margin-top:18px}
.err{color:#b4231f; font-size:.9rem; font-weight:600; margin:12px 0 0; display:none}
.err.show{display:block}
.ok{display:none; background:var(--teal-wash); border:1px solid var(--teal-line); color:var(--teal-deep); border-radius:var(--r); padding:26px; font-size:1.05rem; font-family:var(--serif)}
.ok.show{display:block}
.hide{display:none}

/* ---- footer ---- */
footer.site{background:var(--ink); color:#cdd6d0; padding:56px 0 30px}
footer.site a{color:#eef3f0; text-decoration:none}
footer.site a:hover{text-decoration:underline}
.fgrid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:32px; margin-bottom:34px}
.fbrand{font-family:var(--serif); font-size:1.3rem; color:#fff; display:flex; align-items:center; gap:10px; margin-bottom:12px}
.fbrand .fmark{width:36px; height:36px; border-radius:9px; background:rgba(255,255,255,.1); display:grid; place-items:center}
footer p{margin:0 0 8px; font-size:.95rem; color:#b6c1ba}
footer .copy{border-top:1px solid rgba(255,255,255,.12); padding-top:20px; font-size:.85rem; color:#8f9c94}
@media(max-width:760px){.fgrid{grid-template-columns:1fr 1fr}}

/* Sep 12: contact page copy + resource reassurance (Stacie's spec) */
.lead textarea{resize:vertical; min-height:96px; line-height:1.45}
.lead .opt{font-weight:400; color:var(--ink-faint)}
.lead .hint{font-size:.82rem; color:var(--ink-faint); margin:6px 0 0; line-height:1.45}
.info-first{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px 24px; margin:26px 0 20px; box-shadow:var(--shadow)}
.info-first h3{font-size:1.12rem; margin-bottom:.3em}
.info-first p{color:var(--ink-soft); font-size:.95rem; margin:0 0 .8em}
.info-first ul{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.info-first li a{display:flex; justify-content:space-between; align-items:center; gap:10px; text-decoration:none; font-weight:600; color:var(--teal-deep); background:var(--teal-wash); border:1px solid var(--teal-line); border-radius:var(--r-sm); padding:11px 14px; font-size:.95rem}
.info-first li a::after{content:"\2193"; font-weight:700}
.info-first li a:hover{border-color:var(--teal); color:var(--teal)}
.contact-lines{display:flex; flex-wrap:wrap; gap:8px 26px; font-weight:500; color:var(--ink-soft)}
.contact-lines a{color:var(--teal-deep); font-weight:600; text-decoration:none}
.contact-lines a:hover{color:var(--teal)}
.reassure{margin-top:26px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; background:var(--teal-wash); border:1px solid var(--teal-line); border-radius:var(--r); padding:24px 28px}
.reassure h3{font-size:1.18rem; margin-bottom:.3em}
.reassure p{color:var(--ink-soft); margin:0; max-width:60ch}
.reassure-contact{display:flex; flex-direction:column; gap:10px; align-items:flex-start}
.reassure-contact a{color:var(--teal-deep); font-weight:600; text-decoration:none}
.reassure-contact a.btn{color:#fff; margin-top:4px}
@media(max-width:760px){.reassure{padding:20px}}

/* ===== Sep 12: inner pages (Stacie's 7-page build) ===== */
/* header: CTA + mobile menu */
header .hdr-cta{white-space:nowrap}
header .nav-links a[aria-current="page"]{color:var(--teal-deep); font-weight:600; position:relative}
header .nav-links a[aria-current="page"]::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--brass); border-radius:2px}
header .menu{display:none; position:relative}
header .menu summary{list-style:none; cursor:pointer; width:44px; height:44px; border:1px solid var(--line); border-radius:10px; background:var(--card); display:grid; place-content:center; gap:5px}
header .menu summary::-webkit-details-marker{display:none}
header .menu summary span{display:block; width:20px; height:2px; background:var(--ink); border-radius:2px}
header .menu nav{position:absolute; right:0; top:52px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-lg); padding:12px; min-width:250px; display:grid; gap:2px; z-index:50}
header .menu nav a{text-decoration:none; color:var(--ink); font-weight:500; padding:11px 12px; border-radius:8px}
header .menu nav a:hover{background:var(--teal-wash); color:var(--teal-deep)}
header .menu nav a.btn{margin-top:8px; color:#fff}
@media(max-width:900px){header .menu{display:block} header .hdr-cta{display:none}}
@media(max-width:1100px){header .nav-links{gap:16px} header .nav-links a{font-size:.92rem}}

/* page hero (inner pages): copy left, photo right; .page-hero.plain = no photo */
.page-hero{padding:0; background:var(--paper)}
.page-hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; padding-top:56px; padding-bottom:56px}
.page-hero h1{margin-bottom:.35em; font-size:clamp(2.1rem,4.6vw,3.4rem)}
.page-hero .lede{font-size:1.18rem; color:var(--ink-soft); max-width:38ch; margin-bottom:1.4em}
.page-hero .actions{display:flex; flex-wrap:wrap; gap:12px}
.page-hero .photo img{width:100%; height:100%; max-height:520px; object-fit:cover; border-radius:22px; box-shadow:var(--shadow-lg)}
.page-hero.plain .wrap{grid-template-columns:1fr; max-width:820px; text-align:center}
.page-hero.plain .actions{justify-content:center}
.page-hero.plain .lede{max-width:none}
@media(max-width:860px){.page-hero .wrap{grid-template-columns:1fr; gap:28px; padding-top:36px} .page-hero .photo img{max-height:400px} .page-hero .lede{max-width:none}}

/* feature rows: alternating copy / photo */
.feature{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.feature + .feature{margin-top:64px}
.feature.flip > .copy{order:2}
.feature .photo img{width:100%; height:auto; border-radius:var(--r); box-shadow:var(--shadow-lg); aspect-ratio:4/3; object-fit:cover}
.feature .copy h2{margin-bottom:.45em}
.feature .copy p{color:var(--ink-soft)}
.feature .copy ul{margin:0 0 1.2em; padding-left:1.2em; color:var(--ink-soft)}
.feature .copy li{margin-bottom:.35em}
@media(max-width:860px){.feature{grid-template-columns:1fr; gap:26px} .feature.flip > .copy{order:0} .feature + .feature{margin-top:44px}}

/* photo cards (who we help, services groups) */
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.pcard{background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column}
.pcard img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover}
.pcard .pad{padding:22px 24px 24px; display:flex; flex-direction:column; gap:.5em; flex:1}
.pcard h3{margin-bottom:.1em}
.pcard p{color:var(--ink-soft); margin:0; font-size:.97rem}
.pcard .more{margin-top:auto; padding-top:.6em; font-size:.92rem; font-weight:600; text-decoration:none}
.pcard.text{padding:0}
@media(max-width:900px){.grid3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid2,.grid3{grid-template-columns:1fr}}

/* plain list cards, no photo */
.lcard{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:24px 26px; box-shadow:var(--shadow)}
.lcard h3{margin-bottom:.35em}
.lcard p{color:var(--ink-soft); margin:0; font-size:.97rem}

/* values / chips */
.values{display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none}
.values li{background:var(--card); border:1px solid var(--teal-line); border-radius:999px; padding:.55em 1.1em; font-size:.95rem; color:var(--teal-deep); font-weight:500}

/* long-form (resource pages): readable measure, real headings */
.prose{max-width:720px}
.prose h2{font-size:clamp(1.45rem,2.6vw,1.9rem); margin:1.6em 0 .5em}
.prose h3{margin:1.3em 0 .4em}
.prose p,.prose li{color:var(--ink-soft); font-size:1.05rem}
.prose ul{padding-left:1.2em; margin:0 0 1.2em}
.prose li{margin-bottom:.4em}
.prose .callout{background:var(--teal-wash); border:1px solid var(--teal-line); border-radius:var(--r); padding:20px 24px; margin:1.6em 0}
.prose .callout p{margin:0; color:var(--ink)}
.article{display:grid; grid-template-columns:minmax(0,720px) 320px; gap:56px; align-items:start}
.aside{position:sticky; top:96px; display:grid; gap:16px}
.aside .dlcard{background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow)}
.aside .dlcard img{width:100%; height:auto; aspect-ratio:16/10; object-fit:cover}
.aside .dlcard .pad{padding:20px 22px}
.aside .dlcard h3{font-size:1.1rem; margin-bottom:.35em}
.aside .dlcard p{font-size:.92rem; color:var(--ink-soft); margin:0 0 .9em}
.aside .dlcard .btn{width:100%}
.aside .note{font-size:.88rem; color:var(--ink-faint); margin:0}
@media(max-width:960px){.article{grid-template-columns:1fr} .aside{position:static}}

/* CTA band at the foot of a page */
.cta-band{background:var(--teal-deep); color:#eaf4f0}
.cta-band .wrap{display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center}
.cta-band h2{color:#fff; margin-bottom:.4em}
.cta-band p{color:#cfe6df; font-size:1.12rem; margin-bottom:1.2em}
.cta-band .actions{display:flex; flex-wrap:wrap; gap:12px}
.cta-band .btn.ghost{background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.3)}
.cta-band .btn.ghost:hover{background:rgba(255,255,255,.18)}
.cta-band .accent img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r); box-shadow:var(--shadow-lg)}
@media(max-width:860px){.cta-band .wrap{grid-template-columns:1fr} .cta-band .accent{max-width:420px}}

/* resource strip (home + section ends) */
.res-strip{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:28px 30px; box-shadow:var(--shadow); display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap}
.res-strip h3{font-size:1.3rem; margin-bottom:.25em}
.res-strip p{color:var(--ink-soft); margin:0; max-width:52ch}
.res-strip .actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.res-strip .note{font-size:.85rem; color:var(--ink-faint); flex-basis:100%; max-width:none; margin:0}

/* legal / plain document pages */
main.doc{padding:56px 0 76px}
main.doc .wrap{max-width:760px}
main.doc h1{font-size:clamp(2rem,4vw,2.8rem); margin-bottom:.3em}
main.doc .updated{color:var(--ink-faint); font-size:.95rem; margin-bottom:2em}
main.doc h2{font-size:1.45rem; margin:1.8em 0 .5em}
main.doc p,main.doc li{color:var(--ink-soft); font-size:1.02rem}
main.doc ul{padding-left:1.2em}
main.doc li{margin-bottom:.35em}
main.doc .back{display:inline-block; margin-top:2.5em; font-weight:600; text-decoration:none}
@media(max-width:640px){.top span{display:none} .top .wrap{justify-content:center}}
header .menu nav{min-width:270px}
header .menu nav a.btn{white-space:nowrap}