/* Love Love Brain — cognitive-accessibility first.
   Large type, high contrast, calm palette, generous spacing, predictable layout,
   no distracting motion. Every choice serves a tired, foggy brain. */
:root{
  --bg:#fbf7f4;
  --surface:#ffffff;
  --ink:#2a2733;
  --ink-soft:#514c5e;
  --line:#eae2dc;
  --heart:#d16a86;
  --heart-deep:#b64f6c;
  --heart-soft:#fbeef1;
  --calm:#5b8a8a;
  --calm-soft:#e6f1f0;
  --sun:#e6a94b;
  --sun-soft:#fdf1dd;
  --focus:#2f6fed;
  --shadow:0 20px 44px -32px rgba(42,39,51,.3);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:18px}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--heart-deep);text-underline-offset:3px}
button{font-family:inherit;cursor:pointer}
input{font-family:inherit}
/* strong, visible focus for keyboard users */
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.wrap{max-width:960px;margin:0 auto;padding:0 22px}

/* skip link for screen readers / keyboard */
.skip:not(:focus):not(:active){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip:focus{position:absolute;left:0;top:0;background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;z-index:100}

.btn{display:inline-flex;align-items:center;gap:9px;font-size:1.05rem;font-weight:700;padding:15px 28px;border-radius:12px;border:2px solid var(--heart);background:var(--heart);color:#fff;text-decoration:none;transition:background .15s}
.btn:hover{background:var(--heart-deep);border-color:var(--heart-deep)}
.btn.calm{background:var(--calm);border-color:var(--calm)}
.btn.calm:hover{background:#4a7373;border-color:#4a7373}
.btn.big{font-size:1.2rem;padding:18px 36px}
.btn.ghost{background:#fff;color:var(--heart-deep)}
.btn.ghost:hover{background:var(--heart-soft)}

/* header — simple, predictable */
header.site{background:var(--surface);border-bottom:2px solid var(--line)}
.hd-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.logo .mark{width:46px;height:46px;flex:0 0 46px}
.logo b{font-size:1.35rem;line-height:1.1}
.logo span{display:block;font-size:.82rem;color:var(--ink-soft);font-weight:500}
.hd-help{font-size:.95rem;color:var(--ink-soft)}
.hd-help a{font-weight:700}

/* main nav — big, plain, wraps calmly */
nav.main{background:var(--calm-soft);border-bottom:2px solid var(--line)}
nav.main ul{list-style:none;display:flex;flex-wrap:wrap;gap:4px;padding:8px 0}
nav.main a{display:block;padding:11px 16px;border-radius:9px;text-decoration:none;color:var(--ink);font-weight:600;font-size:1rem}
nav.main a:hover{background:#fff}
nav.main a[aria-current]{background:var(--calm);color:#fff}

/* hero — warm, calm, one clear action */
.hero{background:linear-gradient(180deg,var(--heart-soft),var(--bg));padding:54px 0 46px}
.hero-in{max-width:720px}
.hero h1{font-size:3rem;line-height:1.15;margin-bottom:16px}
.hero .big-p{font-size:1.25rem;color:var(--ink-soft);margin-bottom:28px}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap}

/* sections */
section.band{padding:52px 0}
.band.white{background:var(--surface)}
.band h2{font-size:2.2rem;margin-bottom:10px}
.band .intro{font-size:1.15rem;color:var(--ink-soft);max-width:60ch;margin-bottom:32px}

/* the "Start Here" path — the most important thing */
.startpath{background:var(--sun-soft);border:2px solid var(--sun);border-radius:18px;padding:34px 30px;text-align:center;box-shadow:var(--shadow)}
.startpath h2{color:var(--ink)}
.startpath p{font-size:1.15rem;color:var(--ink-soft);max-width:52ch;margin:0 auto 24px}
.startpath .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0;text-align:left}
.startpath .st{background:#fff;border-radius:12px;padding:20px}
.startpath .st .num{width:38px;height:38px;border-radius:50%;background:var(--sun);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;margin-bottom:12px}
.startpath .st h4{font-size:1.1rem;margin-bottom:5px}
.startpath .st p{font-size:1rem;margin:0}

/* tool cards — big, calm, one idea each */
.tool-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.tool{background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:26px 26px;text-decoration:none;color:var(--ink);display:block;transition:border-color .15s}
.tool:hover{border-color:var(--heart)}
.tool .ic{width:52px;height:52px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.tool.a .ic{background:var(--heart-soft)}.tool.b .ic{background:var(--calm-soft)}.tool.c .ic{background:var(--sun-soft)}.tool.d .ic{background:#efeaf5}
.tool h3{font-size:1.3rem;margin-bottom:6px}
.tool p{font-size:1.05rem;color:var(--ink-soft)}

.plain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.plain-grid article{background:var(--surface);border:2px solid var(--line);border-radius:12px;padding:24px}
.plain-grid h3{font-size:1.15rem;margin-bottom:8px}
.plain-grid p{font-size:1.05rem;color:var(--ink-soft)}

/* hope stories */
.stories{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.story{background:var(--surface);border:2px solid var(--line);border-radius:16px;overflow:hidden}
.story .sh{padding:22px 24px}
.story .quote{font-size:1.15rem;line-height:1.6;margin-bottom:14px}
.story .who{font-weight:700;color:var(--heart-deep)}
.story .who span{display:block;font-weight:400;color:var(--ink-soft);font-size:.95rem}
.story .more{border-top:2px solid var(--line);padding:16px 24px}
.story .more button{background:none;border:none;color:var(--heart-deep);font-weight:700;font-size:1.02rem;padding:0;text-decoration:underline;text-underline-offset:3px}
.story .full{max-height:0;overflow:hidden;transition:max-height .3s ease;font-size:1.05rem;color:var(--ink-soft)}
.story.open .full{max-height:400px;padding-top:12px}

/* shop / workbooks */
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.book{background:var(--surface);border:2px solid var(--line);border-radius:16px;overflow:hidden;text-align:center}
.book .cover{height:180px;display:flex;align-items:center;justify-content:center;font-size:2.4rem}
.book.a .cover{background:var(--heart-soft)}.book.b .cover{background:var(--calm-soft)}.book.c .cover{background:var(--sun-soft)}
.book .bb{padding:20px}
.book h3{font-size:1.2rem;margin-bottom:4px}
.book .price{font-size:1.3rem;font-weight:800;color:var(--heart-deep);margin:8px 0 14px}
.book .added{display:none;color:var(--calm);font-weight:700;margin-top:10px}
.book.added .added{display:block}
.book.added .btn{background:var(--calm);border-color:var(--calm)}

/* newsletter */
.news{background:var(--calm-soft);border-radius:18px;padding:38px 32px;text-align:center}
.news h2{margin-bottom:8px}
.news p{font-size:1.12rem;color:var(--ink-soft);max-width:50ch;margin:0 auto 22px}
.news form{display:flex;gap:12px;max-width:480px;margin:0 auto;flex-wrap:wrap}
.news input{flex:1;min-width:220px;padding:15px 18px;border:2px solid var(--line);border-radius:12px;font-size:1.05rem;background:#fff}
.news input:focus{outline:none;border-color:var(--calm)}
.news .ok{display:none;font-size:1.1rem;font-weight:700;color:var(--calm);margin-top:16px}
.news .ok.show{display:block}

/* caregiver callout */
.care{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.care .cbox{background:var(--heart-soft);border-radius:18px;padding:32px}
.care h2{margin-bottom:10px}
.care p{font-size:1.12rem;color:var(--ink-soft);margin-bottom:20px}

/* footer */
footer.site{background:var(--ink);color:rgba(255,255,255,.75);padding:44px 0 26px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.15)}
footer .logo b{color:#fff}
footer .logo span{color:rgba(255,255,255,.6)}
footer h4{color:#fff;font-size:1rem;margin-bottom:12px}
footer ul{list-style:none;display:grid;gap:9px}
footer ul a{color:rgba(255,255,255,.75);font-size:1rem}
footer ul a:hover{color:#fff}
.foot-bot{padding-top:22px;font-size:.92rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.foot-bot a{color:#f3b6c4}

@media(max-width:760px){
  html{font-size:17px}
  .hero h1{font-size:2.2rem}
  .band h2{font-size:1.75rem}
  .startpath .steps{grid-template-columns:1fr}
  .tool-grid,.stories,.care,.plain-grid{grid-template-columns:1fr}
  .shop-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
}