/* ============================================================
   TaskR — styles
   One stylesheet, organised top to bottom:
   1. Tokens & resets   2. Primitives (buttons, inputs, cards)
   3. Marketing page    4. Auth & onboarding
   5. App shell + nav   6. Chat   7. Family roster
   8. Account / plan    9. Accessibility panel, toast
   10. Responsive (tablet, mobile)
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --bg:#EDEBE8; --surface:#FFFFFF; --surface-2:#F7F5F1; --line:#DCD8D2;
  --ink:#1B2426; --ink-soft:#55605F; --ink-mute:#8A938F;
  --teal:#0F6E63; --teal-deep:#0B564D; --teal-wash:#E4EFEC;
  --terra:#C2562F; --terra-deep:#A8451F; --terra-wash:#F6E7DF; --gold:#E8A23D;
  --tg:#2C6BED; --tg-wash:#E7EEFB; --wa:#1FA855; --wa-wash:#E4F3EA;
  --ok:#1E6E52; --err:#A8321F;

  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:26px;
  --sh-sm:0 1px 2px rgba(27,36,38,.06), 0 4px 14px rgba(27,36,38,.05);
  --sh:0 1px 2px rgba(27,36,38,.05), 0 10px 30px rgba(27,36,38,.08);
  --sh-lg:0 18px 50px rgba(27,36,38,.16);

  --fs:18px; --lh:1.6; --maxw:1120px;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
}
/* accessibility scaling — scale the ROOT so rem-based UI text grows too (not just body) */
html{ font-size:100%; }
html[data-text="large"]{ font-size:112.5%; --fs:20px; }
html[data-text="xl"]{ font-size:125%; --fs:23px; }
html[data-contrast="high"]{
  --bg:#EBE8E3; --line:#8c948f; --ink:#0C1214; --ink-soft:#2c3633; --ink-mute:#46504c;
  --teal:#0A5249; --teal-deep:#063b34; --terra:#8f3a1a; --terra-deep:#6f2c12;
}
html[data-motion="reduced"] *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }

*{ box-sizing:border-box; }
html,body{ margin:0; min-height:100%; }
body{
  font:400 var(--fs)/var(--lh) var(--sans); color:var(--ink);
  background:
    radial-gradient(1100px 560px at 82% -8%, #EFF2EC 0%, transparent 60%),
    var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{ font-family:var(--serif); line-height:1.16; margin:0; letter-spacing:-.015em; font-weight:600; }
p{ margin:0; }
a{ color:var(--teal-deep); cursor:pointer; }
img{ display:block; max-width:100%; }
:focus-visible{ outline:3px solid var(--teal); outline-offset:2px; border-radius:6px; }
.hidden{ display:none !important; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---------- 2. Primitives ---------- */
.btn{
  font:600 1rem/1 var(--sans); cursor:pointer; border:0; border-radius:12px;
  min-height:52px; padding:0 22px; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  transition:filter .15s, background .15s, transform .04s, box-shadow .15s; text-decoration:none; white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn:disabled{ filter:grayscale(.3) opacity(.55); cursor:default; }
.btn-primary{ background:var(--teal); color:#fff; box-shadow:var(--sh-sm); }
.btn-primary:hover:not(:disabled){ background:var(--teal-deep); }
.btn-accent{ background:var(--terra); color:#fff; }
.btn-accent:hover:not(:disabled){ background:var(--terra-deep); }
.btn-wa{ background:var(--wa); color:#fff; }
.btn-wa:hover:not(:disabled){ filter:brightness(.94); }
.btn-ghost{ background:transparent; color:var(--teal-deep); border:2px solid var(--teal); }
.btn-ghost:hover{ background:var(--teal-wash); }
.btn-soft{ background:var(--surface-2); color:var(--ink); border:1.5px solid var(--line); }
.btn-soft:hover{ border-color:var(--teal); color:var(--teal-deep); }
.btn-block{ width:100%; }
.btn-lg{ min-height:58px; font-size:1.05rem; padding:0 28px; }
.btn-sm{ min-height:42px; font-size:.92rem; padding:0 16px; border-radius:10px; }

label{ display:block; font:600 .92rem/1.3 var(--sans); color:var(--ink); margin-bottom:8px; }
.hint{ font-weight:400; color:var(--ink-soft); }
input,select{
  width:100%; font:inherit; color:var(--ink); background:var(--surface);
  border:1.5px solid var(--line); border-radius:12px; padding:14px; min-height:54px;
  outline:none; transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus{ border-color:var(--teal); box-shadow:0 0 0 3px rgba(15,110,99,.16); }
.field{ margin-bottom:18px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.err{ color:var(--err); font-weight:600; font-size:.95rem; margin-top:12px; min-height:1.1em; display:flex; gap:8px; align-items:flex-start; }
.err:empty{ display:none; } .err svg{ flex:none; margin-top:2px; }

.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh); }
.logo-img{ object-fit:contain; border-radius:22%; }

/* ---------- 3. Marketing ---------- */
.public{ max-width:var(--maxw); margin:0 auto; padding-inline:24px; }
.mk-nav{ display:flex; align-items:center; justify-content:space-between; padding:20px 0; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand .logo-img{ width:46px; height:46px; flex:none; }
.brand b{ font:600 1.32rem/1 var(--serif); }
.brand small{ display:block; font:500 .74rem/1.3 var(--sans); color:var(--ink-soft); margin-top:3px; }
.mk-nav .links{ display:flex; align-items:center; gap:16px; }

.hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; padding:36px 0 64px; }
.hero h1{ font-size:clamp(36px,5.2vw,58px); }
.hero .lead{ font-size:1.16rem; color:var(--ink-soft); margin:22px 0 30px; max-width:34ch; }
.hero .cta{ display:flex; flex-wrap:wrap; gap:14px; }

.hero-carousel{ position:relative; display:flex; align-items:center; justify-content:center; min-height:520px; }
.hc-slide{ position:absolute; width:min(440px,92%); aspect-ratio:1200/896; object-fit:cover;
  border-radius:24px; border:7px solid #fff; box-shadow:var(--sh-lg);
  opacity:0; transform:scale(.95); transition:opacity .7s ease, transform .7s ease; }
.hc-slide.on{ opacity:1; transform:scale(1); }
.hc-dots{ position:absolute; bottom:6px; left:50%; transform:translateX(-50%); display:flex; gap:9px; z-index:5; }
.hc-dots button{ width:9px; height:9px; padding:0; border:0; border-radius:50%; background:var(--line); cursor:pointer; transition:background .2s, width .2s; }
.hc-dots button.on{ background:var(--teal); width:26px; border-radius:5px; }

.trust{ text-align:center; padding:16px 24px; background:var(--teal); color:#fff; font-weight:600; border-radius:var(--r); }
.sec{ padding:64px 0; }
.sec > h2{ font-size:clamp(27px,3.6vw,38px); text-align:center; }
.sec > .sub{ text-align:center; color:var(--ink-soft); max-width:60ch; margin:14px auto 0; }
.cards3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:42px; }
.feature{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:28px; box-shadow:var(--sh-sm); }
.feature .ic{ width:54px; height:54px; border-radius:14px; display:grid; place-items:center; background:var(--teal-wash); color:var(--teal-deep); margin-bottom:16px; }
.feature h3{ font-size:1.25rem; margin-bottom:8px; }
.feature p{ color:var(--ink-soft); font-size:1rem; }

.steps{ background:var(--surface-2); border-radius:var(--r-xl); padding:48px 32px; }
.step-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:42px; }
.step{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px; }
.step .n{ width:40px; height:40px; border-radius:50%; background:var(--terra); color:#fff; font:600 1.15rem/40px var(--serif); text-align:center; margin-bottom:14px; }
.step h4{ font-size:1.1rem; margin-bottom:6px; }
.step p{ color:var(--ink-soft); font-size:.96rem; }

.who{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:42px; }
.persona{ border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden; box-shadow:var(--sh-sm); }
.persona img{ width:100%; height:188px; object-fit:cover; }
.persona .body{ padding:24px; }
.persona .tag{ display:inline-block; font:600 .76rem/1 var(--sans); padding:7px 13px; border-radius:20px; background:var(--terra-wash); color:var(--terra-deep); margin-bottom:14px; }
.persona h4{ font-size:1.16rem; margin-bottom:8px; }
.persona p{ color:var(--ink-soft); font-size:.98rem; }

.price{ display:grid; place-items:center; }
.plan{ width:min(460px,100%); background:var(--surface); border:2px solid var(--teal); border-radius:var(--r-xl); padding:36px; text-align:center; box-shadow:var(--sh); margin-top:38px; }
.plan .badge{ display:inline-block; background:var(--teal); color:#fff; font:600 .8rem/1 var(--sans); padding:8px 16px; border-radius:20px; letter-spacing:.04em; }
.plan .big{ font:600 3rem/1 var(--serif); margin:18px 0 2px; }
.plan .big small{ font:500 1.1rem/1 var(--sans); color:var(--ink-soft); }
.plan .per{ color:var(--ink-soft); }
.plan ul{ list-style:none; padding:0; margin:24px 0; text-align:left; display:grid; gap:13px; }
.plan li{ display:flex; gap:11px; align-items:flex-start; font-size:1rem; }
.plan li svg{ flex:none; margin-top:3px; color:var(--teal); }
.mk-foot{ background:var(--ink); color:#cfd6d2; padding:34px 24px; text-align:center; font-size:.92rem; border-radius:var(--r-xl) var(--r-xl) 0 0; margin-top:20px; }
.mk-foot a{ color:#fff; }

/* ---------- 4. Auth & onboarding ---------- */
.center-wrap{ min-height:100vh; display:grid; place-items:center; padding:24px; }
.auth-card{ width:min(470px,100%); padding:38px 32px; }
.brand-center{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; margin-bottom:22px; }
.brand-center .logo-img{ width:70px; height:70px; }
.auth-card h2{ font-size:1.65rem; text-align:center; }
.auth-card .sub{ color:var(--ink-soft); text-align:center; margin:10px 0 26px; }
.code-input{ letter-spacing:.4em; text-align:center; font-size:1.5rem; font-weight:700; }
.switch-line{ text-align:center; color:var(--ink-soft); font-size:.95rem; margin-top:16px; }

.ob-card{ width:min(640px,100%); padding:36px; }
.ob-steps{ display:flex; gap:8px; margin-bottom:24px; }
.ob-steps .s{ flex:1; height:6px; border-radius:3px; background:var(--line); }
.ob-steps .s.on{ background:var(--teal); }
.ob-card h2{ font-size:1.55rem; }
.ob-card > .sub{ color:var(--ink-soft); margin:8px 0 26px; }
.ob-foot{ display:flex; gap:12px; margin-top:8px; }
.ob-foot .btn{ flex:1; }

/* care circle list (onboarding + add) */
.circle{ display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.circle-item{ display:flex; align-items:center; gap:13px; border:1px solid var(--line); border-radius:var(--r); padding:13px 15px; background:var(--surface); }
.circle-item .av{ width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; font:600 .95rem/1 var(--sans); }
.circle-item .meta{ flex:1; min-width:0; }
.circle-item .meta b{ font-size:1.02rem; }
.circle-item .meta span{ display:block; font-size:.82rem; color:var(--ink-soft); text-transform:capitalize; }
.circle-item .you{ font:600 .72rem/1 var(--sans); color:var(--teal-deep); background:var(--teal-wash); padding:4px 9px; border-radius:20px; }
.circle-item .x{ background:none; border:0; color:var(--ink-mute); font-size:1.4rem; line-height:1; cursor:pointer; padding:4px 8px; }
.circle-item .x:hover{ color:var(--err); }
.addbox{ border:1.5px dashed var(--line); border-radius:var(--r); padding:18px; background:var(--surface-2); margin-bottom:18px; }
.cap{ font-size:.92rem; color:var(--ink-soft); margin:4px 0 18px; }
.cap b{ color:var(--ink); }

/* ---------- 5. App shell ---------- */
.app{ display:grid; grid-template-columns:264px 1fr; min-height:100vh; }
.rail{ background:var(--surface); border-right:1px solid var(--line); padding:20px 14px; display:flex; flex-direction:column; gap:5px; position:sticky; top:0; height:100vh; }
.who-mini{ display:flex; align-items:center; gap:11px; padding:6px 8px 16px; border-bottom:1px solid var(--line); margin-bottom:10px; }
.who-mini .logo-img{ width:42px; height:42px; flex:none; }
.who-mini b{ font:600 1.05rem/1.1 var(--serif); }
.who-mini small{ display:block; color:var(--ink-soft); font-size:.78rem; margin-top:2px; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-item{ display:flex; align-items:center; gap:13px; padding:13px 14px; border-radius:12px; color:var(--ink);
  font-weight:600; font-size:1rem; text-decoration:none; cursor:pointer; min-height:50px; border:0; background:transparent; width:100%; text-align:left; }
.nav-item svg{ flex:none; color:var(--ink-soft); }
.nav-item:hover{ background:var(--surface-2); }
.nav-item.active{ background:var(--teal-wash); color:var(--teal-deep); }
.nav-item.active svg{ color:var(--teal-deep); }
.nav-item .lbl{ display:inline; }
.nav-item.logout{ margin-top:auto; color:var(--terra-deep); }
.nav-item.logout svg{ color:var(--terra-deep); }
.app-top{ display:none; }   /* mobile-only header */

.main{ min-width:0; display:flex; flex-direction:column; }
.content{ padding:30px; max-width:860px; width:100%; }
.c-head h2{ font-size:1.6rem; }
.c-head p{ color:var(--ink-soft); margin:6px 0 0; font-size:.96rem; }

/* ---------- 6. Chat ---------- */
.chatview{ display:flex; flex-direction:column; height:100vh; }
.panel-top{ display:flex; align-items:center; gap:13px; padding:15px 24px; background:var(--surface); border-bottom:1px solid var(--line); }
.panel-top .logo-img{ width:46px; height:46px; flex:none; }
.panel-top b{ font:600 1.12rem/1 var(--serif); }
.panel-top .status{ display:flex; align-items:center; gap:7px; color:var(--ink-soft); font-size:.82rem; margin-top:4px; }
.panel-top .status .dot{ width:9px; height:9px; border-radius:50%; background:var(--ok); }
.chat{ flex:1; padding:24px; display:flex; flex-direction:column; gap:15px; overflow-y:auto; }
.msg{ display:flex; gap:11px; max-width:80%; }
.msg .av{ width:38px; height:38px; flex:none; border-radius:50%; overflow:hidden; }
.msg .av .logo-img{ width:100%; height:100%; }
.bubble{ background:var(--surface); border:1px solid var(--line); border-radius:16px; border-top-left-radius:5px;
  padding:12px 16px; font-size:1rem; box-shadow:var(--sh-sm); white-space:pre-wrap; word-break:break-word; }
.msg.me{ margin-left:auto; flex-direction:row-reverse; }
.msg.me .bubble{ background:var(--teal); color:#fff; border-color:var(--teal); border-top-left-radius:16px; border-top-right-radius:5px; }
.msg.me .av{ background:var(--terra); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.85rem; }
.typing{ display:inline-flex; gap:4px; }
.typing i{ width:8px; height:8px; border-radius:50%; background:var(--ink-soft); opacity:.5; animation:bounce 1s infinite; }
.typing i:nth-child(2){ animation-delay:.15s } .typing i:nth-child(3){ animation-delay:.3s }
@keyframes bounce{ 0%,60%,100%{ transform:translateY(0) } 30%{ transform:translateY(-5px) } }
.quick{ display:flex; flex-wrap:wrap; gap:10px; padding:0 24px 12px; }
.quick button{ font:600 .94rem/1 var(--sans); background:var(--surface); border:1.5px solid var(--teal); color:var(--teal-deep);
  border-radius:24px; padding:11px 17px; min-height:46px; cursor:pointer; }
.quick button:hover{ background:var(--teal-wash); }
.composer{ display:flex; gap:12px; padding:14px 24px; background:var(--surface); border-top:1px solid var(--line); }
.composer input{ flex:1; }
.composer .send{ width:54px; min-height:54px; flex:none; border-radius:14px; background:var(--terra); color:#fff; display:grid; place-items:center; border:0; cursor:pointer; }
.composer .send:hover{ background:var(--terra-deep); }

/* ---------- 7. Family roster (collapsible) ---------- */
.cap-note{ font-size:.95rem; color:var(--ink-soft); margin:4px 0 18px; }
.cap-note b{ color:var(--ink); }
.m-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); margin-bottom:12px; box-shadow:var(--sh-sm); overflow:hidden; }
.m-row{ display:flex; align-items:center; gap:14px; padding:15px 18px; width:100%; background:transparent; border:0; cursor:pointer; text-align:left; }
.m-row:hover{ background:var(--surface-2); }
.m-row .av{ width:48px; height:48px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; font:600 1.1rem/1 var(--sans); }
.m-id{ flex:1; min-width:0; }
.m-id b{ font-size:1.08rem; }
.m-id .role{ display:block; color:var(--ink-soft); font-size:.85rem; text-transform:capitalize; }
.markers{ display:flex; gap:7px; flex:none; }
.marker{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--surface-2); border:1.5px solid var(--line); color:var(--ink-mute); position:relative; }
.marker.on.tg{ background:var(--tg-wash); border-color:var(--tg); color:var(--tg); }
.marker.on.wa{ background:var(--wa-wash); border-color:var(--wa); color:var(--wa); }
.marker.on.web{ background:var(--teal-wash); border-color:var(--teal); color:var(--teal-deep); }
.marker.admin{ background:var(--terra-wash); border-color:var(--terra); color:var(--terra-deep); }
.m-chev{ flex:none; color:var(--ink-mute); transition:transform .2s; }
.m-card.open .m-chev{ transform:rotate(180deg); }
.m-panel{ display:none; padding:4px 18px 18px; border-top:1px solid var(--line); }
.m-card.open .m-panel{ display:block; }
.m-panel .pill-row{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.statpill{ font:600 .78rem/1 var(--sans); padding:7px 12px; border-radius:18px; display:inline-flex; gap:6px; align-items:center; background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--line); }
.statpill.on.tg{ background:var(--tg-wash); color:var(--tg); border-color:transparent; }
.statpill.on.wa{ background:var(--wa-wash); color:var(--wa); border-color:transparent; }
.statpill.on.web{ background:var(--teal-wash); color:var(--teal-deep); border-color:transparent; }
.invite{ margin-top:12px; }
.invite .l{ font:600 .82rem/1 var(--sans); color:var(--ink-soft); margin-bottom:7px; display:flex; align-items:center; gap:7px; }
.invite .ib{ display:flex; gap:8px; }
.invite input{ font-size:.86rem; min-height:48px; background:var(--surface-2); }
.m-acts{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.addbox h3{ font-size:1.18rem; margin-bottom:16px; }
.check-row{ display:flex; align-items:flex-start; gap:12px; margin:4px 0 18px; padding:14px; border:1.5px solid var(--line); border-radius:12px; background:var(--surface); }
.check-row input{ width:24px; height:24px; min-height:0; flex:none; margin-top:2px; accent-color:var(--teal); }
.check-row label{ margin:0; }
.check-row .s2{ display:block; font-weight:400; color:var(--ink-soft); font-size:.86rem; margin-top:3px; }

/* ---------- 8. Account / plan ---------- */
.up-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:14px; }
.up-card{ border:2px solid var(--line); border-radius:18px; padding:28px; background:var(--surface); }
.up-card.cur{ border-color:var(--teal); }
.up-card .nm{ font:600 1.3rem/1 var(--serif); }
.up-card .free{ color:var(--teal-deep); font-weight:700; margin:4px 0 6px; }
.up-card .pr{ font:600 2.3rem/1 var(--serif); margin:12px 0 2px; }
.up-card .pr small{ font:500 .85rem/1 var(--sans); color:var(--ink-soft); }
.up-card ul{ list-style:none; padding:0; margin:18px 0; display:grid; gap:10px; }
.up-card li{ display:flex; gap:10px; font-size:.95rem; }
.up-card li svg{ flex:none; color:var(--teal); margin-top:3px; }

/* ---------- 9. a11y panel, toast, spinner ---------- */
.a11y-fab{ position:fixed; right:20px; bottom:20px; z-index:80; display:flex; align-items:center; gap:9px;
  background:var(--teal); color:#fff; border:0; border-radius:30px; padding:13px 18px; font:600 .98rem/1 var(--sans);
  cursor:pointer; box-shadow:0 8px 24px rgba(11,86,77,.36); }
.a11y-fab:hover{ background:var(--teal-deep); }
.a11y-panel{ position:fixed; right:20px; bottom:80px; z-index:80; width:330px; max-width:calc(100vw - 40px);
  background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--sh-lg); padding:22px; display:none; }
.a11y-panel.open{ display:block; }
/* keep the accessibility button clear of the chat composer while the app is open */
body:has(#view-app:not(.hidden)) .a11y-fab{ bottom:96px; }
body:has(#view-app:not(.hidden)) .a11y-panel{ bottom:156px; }
.a11y-panel h3{ font-size:1.18rem; margin-bottom:4px; }
.a11y-panel .pp{ color:var(--ink-soft); font-size:.88rem; margin-bottom:18px; }
.a11y-group{ margin-bottom:18px; }
.a11y-group .gl{ font:600 .85rem/1 var(--sans); margin-bottom:10px; display:block; }
.seg{ display:flex; gap:8px; }
.seg button{ flex:1; font:600 .9rem/1 var(--sans); padding:12px 6px; border-radius:10px; border:1.5px solid var(--line); background:var(--surface); cursor:pointer; color:var(--ink); }
.seg button.on{ background:var(--teal); color:#fff; border-color:var(--teal); }
.toggle-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; }
.toggle-row span{ font-weight:600; font-size:.95rem; }
.tg-sw{ width:54px; height:30px; border-radius:20px; background:var(--line); border:0; cursor:pointer; position:relative; flex:none; }
.tg-sw::after{ content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; transition:left .15s; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.tg-sw.on{ background:var(--teal); } .tg-sw.on::after{ left:27px; }

.toast{ position:fixed; left:50%; bottom:90px; transform:translateX(-50%); background:var(--ink); color:#fff;
  padding:14px 22px; border-radius:30px; font-weight:600; box-shadow:var(--sh); z-index:100; display:none; max-width:90vw; text-align:center; }
.toast.show{ display:block; }
.spin{ width:20px; height:20px; border:3px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:rot .7s linear infinite; }
@keyframes rot{ to{ transform:rotate(360deg) } }

/* ---------- 10. Responsive ---------- */
@media (max-width:980px){
  .hero{ grid-template-columns:1fr; text-align:center; gap:24px; }
  .hero .lead{ margin-inline:auto; } .hero .cta{ justify-content:center; }
  .hero-carousel{ min-height:470px; order:-1; }
  .step-row{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  :root{ --fs:17px; }
  .cards3,.who,.up-grid,.row2{ grid-template-columns:1fr; }
  .sec{ padding:46px 0; }
  /* app: rail becomes bottom nav, add a top header */
  .app{ grid-template-columns:1fr; }
  .app-top{ display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:12px 16px; background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30; }
  .app-top .brand b{ font-size:1.1rem; }
  .app-top .logo-img{ width:38px; height:38px; }
  .app-top .out{ background:none; border:0; color:var(--terra-deep); display:flex; align-items:center; gap:7px; font-weight:600; cursor:pointer; font-size:.95rem; }
  .rail{ position:fixed; bottom:0; left:0; right:0; top:auto; height:auto; flex-direction:row;
    border-right:0; border-top:1px solid var(--line); padding:6px 6px calc(6px + env(safe-area-inset-bottom)); gap:2px; z-index:40; box-shadow:0 -4px 20px rgba(27,36,38,.07); }
  .who-mini{ display:none; }
  .nav-item{ flex:1; flex-direction:column; gap:4px; padding:8px 2px; min-height:0; font-size:.72rem; border-radius:10px; justify-content:center; }
  .nav-item .lbl{ font-size:.72rem; }
  .nav-item.logout{ display:none; }   /* logout lives in the top header on mobile */
  .content{ padding:20px 16px 90px; }
  .chatview{ height:auto; min-height:calc(100vh - 56px); }
  .chat{ padding:18px 16px; }
  .quick{ padding:0 16px 10px; }
  .composer{ padding:12px 16px calc(12px + env(safe-area-inset-bottom)); position:sticky; bottom:64px; }
  .msg{ max-width:90%; }
  .a11y-fab{ bottom:78px; }
  .a11y-panel{ bottom:138px; }
  .toast{ bottom:140px; }
  body:has(#view-app:not(.hidden)) .a11y-fab{ bottom:140px; }
  body:has(#view-app:not(.hidden)) .a11y-panel{ bottom:200px; }
  .ob-card,.auth-card{ padding:28px 22px; }
  .plan{ padding:28px 22px; }
}
@media (max-width:400px){
  .markers{ gap:5px; } .marker{ width:26px; height:26px; }
  .hero-carousel{ min-height:420px; } .hc-slide{ width:min(320px,92%); }
}
@media (min-width:1500px){
  :root{ --maxw:1240px; }
}

/* ---------- daily check-in control (member add/edit) ---------- */
.checkin-row{ border:1.5px solid var(--line); border-radius:12px; padding:14px; background:var(--surface); margin:4px 0 18px; }
.checkin-row .toggle-line{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.checkin-row .tl-txt b{ font:600 .92rem/1.3 var(--sans); color:var(--ink); }
.checkin-row .s2{ display:block; font-weight:400; color:var(--ink-soft); font-size:.86rem; margin-top:3px; }
.checkin-row .ci-time{ margin-bottom:0; }

/* ---------- phone field with country code ---------- */
.phone-field .phone-row{ display:flex; gap:10px; }
.phone-field .phone-row select{ width:auto; flex:none; min-width:118px; max-width:160px; }
.phone-field .phone-row input{ flex:1; }

/* ---------- 11. Today (landing dashboard) ---------- */
.todayview{ max-width:1080px; }
.today-greet h2{ font-size:clamp(26px,3.4vw,38px); }
.today-greet p{ color:var(--ink-soft); margin:6px 0 0; font-size:1rem; }
#today-body{ margin-top:22px; }
.today-loading{ display:grid; place-items:center; padding:60px 0; }
.today-loading .spin,.today-empty .spin{ border:3px solid var(--teal-wash); border-top-color:var(--teal); }
.today-empty{ text-align:center; padding:40px 0; color:var(--ink-soft); display:grid; gap:16px; place-items:center; }

/* progress rings row */
.rings{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.rcard{ background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:22px; box-shadow:var(--sh-sm); display:flex; align-items:center; gap:18px; }
.ring{ width:104px; height:104px; flex:none; position:relative; }
.ring svg{ transform:rotate(-90deg); }
.ring .track{ stroke:var(--surface-2); }
.ring .val{ transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1); }
.ring .mid{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; }
.ring .mid b{ font:600 1.55rem/1 var(--serif); }
.ring .mid b i{ color:var(--ink-mute); font-style:normal; font-size:1.05rem; }
.rcard .lbl b{ font:600 1.06rem/1.2 var(--serif); display:block; }
.rcard .lbl span{ color:var(--ink-soft); font-size:.9rem; }
.rcard .lbl .up{ display:inline-block; margin-top:8px; font:600 .74rem/1 var(--sans); padding:5px 10px; border-radius:20px; }
.up.teal{ background:var(--teal-wash); color:var(--teal-deep); }
.up.terra{ background:var(--terra-wash); color:var(--terra-deep); }
.up.gold{ background:var(--gold-wash,#F7ECD8); color:#9a6a1c; }
.up.mute{ background:var(--surface-2); color:var(--ink-mute); }

/* two-column */
.cols{ display:grid; grid-template-columns:1.05fr .95fr; gap:18px; }
.panel{ background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:24px; box-shadow:var(--sh-sm); }
.panel > h3{ font-size:1.2rem; margin-bottom:4px; }
.panel > .psub{ color:var(--ink-soft); font-size:.9rem; margin-bottom:16px; }

/* care circle orbit */
.orbit{ position:relative; height:330px; margin:6px 0 10px; }
.orbit .spokes{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.orbit .spokes line{ stroke:var(--line); stroke-width:1.5; stroke-dasharray:2 4; stroke-linecap:round; }
.node{ position:absolute; z-index:1; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:6px; width:96px; text-align:center; }
.node .av{ width:58px; height:58px; border-radius:50%; display:grid; place-items:center; color:#fff; font:600 1.15rem/1 var(--sans); box-shadow:var(--sh-sm); position:relative; }
.node.hub .av{ width:78px; height:78px; font-size:1.45rem; box-shadow:var(--sh); }
.node .nm{ font:600 .82rem/1.1 var(--sans); }
.node .rl{ font-size:.7rem; color:var(--ink-mute); text-transform:capitalize; }
.node .dot{ position:absolute; right:-2px; bottom:-2px; width:20px; height:20px; border-radius:50%; border:2.5px solid var(--surface); display:grid; place-items:center; font-size:10px; color:#fff; }
.dot.ok{ background:var(--ok); } .dot.wait{ background:var(--gold,#E8A23D); color:#5a3d0e; } .dot.off{ background:var(--ink-mute); }
.pill{ font:600 .66rem/1 var(--sans); padding:4px 9px; border-radius:20px; white-space:nowrap; }
.pill.ok{ background:var(--wa-wash); color:var(--wa); } .pill.wait{ background:var(--gold-wash,#F7ECD8); color:#9a6a1c; }

/* today panel: check-in banner + task list */
.chk{ display:flex; align-items:center; gap:12px; background:var(--wa-wash); border:1px solid #c8e6d3; border-radius:14px; padding:13px 15px; margin-bottom:14px; }
.chk.wait{ background:var(--gold-wash,#F7ECD8); border-color:#e7d3a6; }
.chk.soft{ background:var(--surface-2); border-color:var(--line); }
.chk.soft .ic{ background:var(--ink-mute); }
.chk .ic{ width:34px; height:34px; border-radius:50%; background:var(--wa); color:#fff; display:grid; place-items:center; font-weight:700; flex:none; }
.chk.wait .ic{ background:var(--gold,#E8A23D); }
.chk b{ font-size:.95rem; } .chk span{ display:block; color:var(--ink-soft); font-size:.84rem; margin-top:2px; }
.ci-empty{ background:var(--surface-2); border:1px dashed var(--line); border-radius:14px; padding:18px; margin-bottom:14px; display:grid; gap:10px; }
.ci-empty b{ font-size:1rem; } .ci-empty span{ color:var(--ink-soft); font-size:.9rem; }
.ci-empty .btn{ justify-self:start; }
.t-list{ display:grid; }
.t-none{ color:var(--ink-soft); padding:10px 2px; }
.task{ display:flex; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid var(--line); }
.task:last-child{ border-bottom:0; }
.tcheck{ width:26px; height:26px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; font-size:.9rem; }
.tcheck.done{ background:var(--teal); }
.tcheck.todo::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--ink-mute); }
.tbody{ flex:1; min-width:0; }
.tbody b{ font-size:.98rem; font-weight:600; }
.tbody.done b{ color:var(--ink-mute); text-decoration:line-through; }
.tbody span{ display:block; color:var(--ink-soft); font-size:.82rem; }
.task.na{ background:var(--terra-wash); border-radius:12px; padding:13px 14px; border-bottom:0; margin:2px 0; }
.t-flag{ font:600 .74rem/1 var(--sans); color:var(--terra-deep); background:var(--surface); border:1px solid var(--terra); padding:6px 10px; border-radius:16px; flex:none; }

@media (max-width:820px){
  .rings{ grid-template-columns:1fr; } .cols{ grid-template-columns:1fr; }
}

/* ---------- 12. Family contacts (Account) ---------- */
.fc-row{ display:flex; align-items:center; gap:10px; padding:11px 4px; border-bottom:1px solid var(--line); }
.fc-row:last-child{ border-bottom:0; }
.fc-main{ flex:1; min-width:0; }
.fc-main b{ display:block; font-size:.98rem; }
.fc-main span{ color:var(--ink-soft); font-size:.86rem; }
.fc-empty{ color:var(--ink-soft); font-size:.92rem; padding:8px 0 4px; }
.fc-form{ margin-top:16px; border-top:1px solid var(--line); padding-top:14px; }
.fc-actions{ display:flex; gap:10px; margin-top:4px; }
.icon-btn{ width:34px; height:34px; border-radius:9px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink-soft); display:grid; place-items:center; cursor:pointer; flex:none; }
.icon-btn:hover{ color:var(--ink); border-color:var(--ink-mute); }

/* ---------- 13. Morning Sky restyle ---------- */
body{ background:linear-gradient(180deg,#F2F6F5 0%, #EFEDE8 42%, var(--bg) 100%) fixed, var(--bg); }
.todayview .today-greet{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; }
.todayview .today-greet::after{ content:""; width:64px; height:64px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 34% 32%, #F6D48B, #E8A23D);
  box-shadow:0 0 0 10px rgba(232,162,61,.14), 0 0 0 22px rgba(232,162,61,.06); }
.panel, .rcard, .today-card{ border-radius:26px; border-color:#E6E2DB; }
.task{ border-bottom:0; border-radius:18px; background:var(--surface-2); padding:13px 16px; margin-bottom:9px; }
.task.done{ background:var(--teal-wash); }
.task.na{ background:var(--terra-wash); margin:0 0 9px; }
.tcheck.todo{ border:0; width:26px; }
.tcheck.todo::before{ width:9px; height:9px; }
.tbody span{ margin-top:1px; }
.chk{ border:0; }
.orbit .oring{ fill:none; stroke:#CFC9C0; stroke-width:1.6; stroke-dasharray:2 5; vector-effect:non-scaling-stroke; }
.orbit .spokes line{ stroke:#CFC9C0; }

/* ---------- 14. Landing (Morning Sky) ---------- */
.hero{ position:relative; }
.trust-line{ margin-top:18px; color:var(--ink-soft); font-size:.9rem; }
.trust-line b{ color:var(--ink); }
.strip{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; padding:6px 22px 26px; }
.pillx{ display:flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line);
  border-radius:24px; padding:10px 18px; font:600 .9rem var(--sans); box-shadow:var(--sh-sm); }
.pillx .d{ width:9px; height:9px; border-radius:50%; }
.timeline{ max-width:620px; margin:0 auto; }
.tl{ display:flex; gap:16px; margin-bottom:14px; }
.tl .t{ font:600 .85rem var(--sans); color:var(--ink-soft); width:74px; flex:none; text-align:right; padding-top:12px; }
.tl .c{ flex:1; background:#fff; border:1px solid var(--line); border-radius:18px; padding:13px 16px; box-shadow:var(--sh-sm); }
.tl .c b{ font-size:.96rem; } .tl .c span{ display:block; color:var(--ink-soft); font-size:.87rem; }
.quote{ max-width:660px; margin:0 auto; text-align:center; min-height:150px; }
.quote p{ font:500 1.4rem/1.55 var(--serif); color:var(--ink); margin:0; }
.who-q{ color:var(--ink-soft); font-size:.92rem; margin-top:12px; }
.fbk-dots{ margin-top:16px; display:flex; gap:7px; justify-content:center; }
.fbk-dots span{ width:8px; height:8px; border-radius:50%; background:var(--line); display:inline-block; cursor:pointer; }
.fbk-dots span.on{ background:var(--teal); }
.plans2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:780px; margin:0 auto; }
.plans2 .plan{ margin:0; max-width:none; }
.plan .pn{ font-size:1.15rem; }
.plan.featured{ border:2px solid var(--teal); }
@media (max-width:760px){ .plans2{ grid-template-columns:1fr; } }

/* chat-bubble demos */
.demo{ text-align:left; }
.bub{ border-radius:16px; padding:9px 13px; font-size:.9rem; line-height:1.45; margin:7px 0; max-width:92%; }
.bub.v{ background:var(--surface-2, #F2F7F5); border:1px solid var(--line); color:var(--ink); border-bottom-left-radius:5px; }
.bub.p{ background:var(--teal); color:#fff; margin-left:auto; border-bottom-right-radius:5px; }
.demo-note{ color:var(--ink-soft); font-size:.85rem; margin-top:10px; }
.tl .c .bub{ font-size:.88rem; }

/* phone row + task pills + contact icons */
.phone-row{ display:flex; gap:8px; } .phone-row select{ width:150px; flex:none; font-size:.88rem; }
.tpill{ display:inline-block; border-radius:999px; padding:2px 9px; font:600 .68rem var(--sans); margin-left:8px; vertical-align:2px; }
.tpill.crit{ background:var(--terra-wash); color:var(--terra-deep); }
.tpill.rec{ background:var(--teal-wash); color:var(--teal-deep); }
.fc-ico{ width:36px; height:36px; border-radius:50%; background:var(--teal-wash); display:grid; place-items:center; font-size:1.05rem; flex:none; margin-right:10px; }

@media (max-width:760px){ .phone-row select{ width:128px; } .demo .bub{ max-width:100%; } .tl .c .bub{ max-width:100%; } }