/* Homebot One homepage (KOKO for families with aging parents). Shared pages keep styles.css. */
/* Layout: one calm column of alternating text/photo bands; KOKO green used only for actions and the timeline thread */
:root{
  --bg:#F5F6F1; --surface:#FFFFFF; --ink:#171A12; --muted:#5A6150; --line:#DEE2D5;
  --green:#4FA52E; --green-ink:#2E6A19; --green-soft:#E6F2DE; 
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1120px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0F120C; --surface:#171B13; --ink:#EDF0E6; --muted:#A2A996; --line:#2A3023;
  --green:#76CC52; --green-ink:#9BDD7E; --green-soft:#1D2A16;  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0F120C; --surface:#171B13; --ink:#EDF0E6; --muted:#A2A996; --line:#2A3023;
  --green:#76CC52; --green-ink:#9BDD7E; --green-soft:#1D2A16;  color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:clamp(16px,4vw,32px)}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;letter-spacing:-0.02em}
h1{font-size:clamp(2.5rem,5vw,4.1rem);line-height:1.02;font-weight:800}
h2{font-size:clamp(1.9rem,3.8vw,2.9rem);line-height:1.08;font-weight:700}
h3{font-size:1.35rem;line-height:1.2;font-weight:700}
p{margin:0;max-width:62ch}
.eyebrow{font:500 .76rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--green-ink)}
.lede{font-size:1.2rem;color:var(--muted)}
section{padding-block:clamp(64px,9vw,112px)}
img{display:block;max-width:100%;height:auto}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:24px;padding-block:14px}
.brand{display:flex;align-items:center;gap:10px;font:700 1.05rem var(--display);text-decoration:none}
.brand svg{width:30px;height:30px;border-radius:7px;border:1px solid var(--line)}
.nav ul{display:flex;align-items:center;gap:22px;list-style:none;margin:0 0 0 auto;padding:0}
.nav ul a{text-decoration:none;color:var(--muted);font-weight:500;font-size:.95rem}
.nav ul a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:12px 22px;font:600 1rem var(--body);cursor:pointer;text-decoration:none;white-space:nowrap}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-primary:hover{background:var(--green-ink)}
.nav .btn{padding:9px 18px;font-size:.92rem}
@media (max-width:860px){.nav ul{display:none}.nav .btn{margin-left:auto}}

/* hero */
.hero{padding-block:clamp(40px,6vw,72px) clamp(56px,7vw,88px)}
.hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.hero-copy{display:grid;gap:24px;min-width:0}
.hero-media{position:relative;min-width:0}
.hero-media img,.hero-media video{border-radius:24px;aspect-ratio:5/4;object-fit:cover;object-position:52% 50%;width:100%}
.hero-media video{display:block;height:auto;max-width:100%;background:var(--green-soft)}
h1 .accent{color:var(--green-ink);display:block}
.hero-media .tag{position:absolute;left:16px;bottom:16px;background:var(--surface);color:var(--ink);border-radius:12px;padding:10px 14px;font-size:.85rem;box-shadow:0 6px 24px rgb(0 0 0 / .14);display:flex;gap:10px;align-items:center;max-width:calc(100% - 32px)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--green);flex:none;box-shadow:0 0 0 4px var(--green-soft)}
form.signup{display:flex;gap:8px;flex-wrap:wrap;max-width:500px}
form.signup input{flex:1 1 220px;min-width:0;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:12px 20px;font:400 1rem var(--body)}
form.signup input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
.thanks{color:var(--green-ink);font-weight:600}
.ks{font-size:.95rem;color:var(--muted)}
.ks a{color:var(--green-ink);font-weight:600;text-decoration-thickness:1px;text-underline-offset:3px}
.trust{display:flex;flex-wrap:wrap;gap:6px 18px;font:500 .78rem/1.4 var(--mono);color:var(--muted);letter-spacing:.02em}
.trust span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:8px;vertical-align:middle}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}.hero-media{order:2}}

/* scene */
.scene{background:var(--surface);border-block:1px solid var(--line)}
.scene .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.scene-copy{display:grid;gap:20px;min-width:0}
.scene-copy p{font-size:1.12rem;color:var(--muted)}
.scene-copy p strong{color:var(--ink);font-weight:600}
.phone{justify-self:center;width:min(100%,330px);background:var(--bg);border:1px solid var(--line);border-radius:30px;padding:22px 18px;display:grid;gap:12px}
.phone .time{font:500 .8rem var(--mono);color:var(--muted);text-align:center}
.notif{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 14px;display:grid;gap:3px}
.notif b{font-size:.82rem;display:flex;justify-content:space-between;gap:8px}
.notif b span{font:500 .72rem var(--mono);color:var(--muted)}
.notif p{font-size:.92rem;color:var(--ink)}
.phone small{font-size:.72rem;color:var(--muted);text-align:center}
@media (max-width:860px){.scene .wrap{grid-template-columns:1fr}}

/* pillars */
.section-head{display:grid;gap:14px;margin-bottom:clamp(36px,5vw,56px);max-width:720px}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pillar{background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.pillar .media{aspect-ratio:4/3;background:var(--green-soft);overflow:hidden}
.pillar .media img{width:100%;height:100%;object-fit:cover}
.pillar .body{padding:22px 22px 26px;display:grid;gap:12px;align-content:start}
.pillar .kicker{font:500 .78rem var(--mono);color:var(--muted)}
.pillar h3 em{display:block;font-style:normal;color:var(--green-ink)}
.pillar ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.pillar li{display:grid;grid-template-columns:18px 1fr;gap:8px;font-size:.98rem;line-height:1.45}
.pillar li::before{content:"";width:8px;height:8px;margin-top:8px;border-radius:2px;background:var(--line)}
.pillar li.body-only::before{background:var(--green)}
.pillar li.body-only{font-weight:600}
.legend{margin-top:18px;font-size:.88rem;color:var(--muted);display:flex;align-items:center;gap:8px}
.legend i{width:8px;height:8px;border-radius:2px;background:var(--green);display:inline-block}
.shoot{width:100%;height:100%;display:grid;place-content:center;text-align:center;gap:8px;padding:20px;color:var(--green-ink);background:repeating-linear-gradient(-45deg,var(--green-soft) 0 14px,transparent 14px 28px)}
.shoot b{font:600 .95rem var(--body)}
.shoot span{font:500 .75rem var(--mono)}
@media (max-width:920px){.pillars{grid-template-columns:1fr;max-width:620px}.pillar .media{aspect-ratio:16/9}}

/* principle band */
.band{background:var(--ink);color:var(--bg);padding-block:clamp(44px,6vw,64px)}
.band p{font:600 clamp(1.3rem,2.6vw,1.9rem)/1.3 var(--display);max-width:30ch;letter-spacing:-0.01em}
.band p span{color:var(--green)}
.band .sub{font:400 1.05rem/1.55 var(--body);opacity:.75;margin-top:14px;max-width:58ch}

/* timeline */
.timeline{position:relative;display:grid;grid-template-columns:repeat(5,minmax(176px,1fr));gap:18px;overflow-x:auto;padding:8px 2px 18px;scroll-snap-type:x mandatory}
.timeline::before{content:"";position:absolute;left:0;right:0;top:27px;height:2px;background:linear-gradient(90deg,var(--green),var(--green-soft))}
.stop{position:relative;scroll-snap-align:start;display:grid;gap:10px;align-content:start;min-width:0}
.stop .t{justify-self:start;background:var(--bg);font:500 .82rem var(--mono);color:var(--green-ink);border:2px solid var(--green);border-radius:999px;padding:6px 12px;position:relative}
.stop h3{font-size:1.15rem;margin-top:8px}
.stop p{font-size:.96rem;color:var(--muted)}
.stop.body-only .t{background:var(--green);color:var(--bg)}

/* safety */
.split{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,6vw,72px);align-items:center}
.split > *{min-width:0}
.split img{border-radius:24px;width:100%;aspect-ratio:4/3.4;object-fit:cover}
#safety .split img{object-position:66% 50%}
.checks{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.checks li{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.checks b{font:500 .8rem/1.5 var(--mono);color:var(--green-ink);text-transform:uppercase;letter-spacing:.06em;padding-top:2px}
.checks span{font-size:1rem}
@media (max-width:860px){.split{grid-template-columns:1fr}.checks li{grid-template-columns:1fr;gap:4px}}

/* privacy */
.privacy{background:var(--surface);border-block:1px solid var(--line)}
.priv-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;grid-template-rows:auto auto;gap:16px}
.priv{border:1px solid var(--line);border-radius:18px;padding:22px;display:grid;gap:8px;align-content:start;background:var(--bg);min-width:0}
.priv h3{font-size:1.1rem}
.priv p{font-size:.95rem;color:var(--muted)}
.priv.key{grid-row:span 2;padding:0;overflow:hidden;display:flex;flex-direction:column}
.priv.key .shoot{min-height:220px;flex:1}
.priv.key .txt{padding:22px;display:grid;gap:8px}
@media (max-width:860px){.priv-grid{grid-template-columns:1fr 1fr}.priv.key{grid-column:span 2;grid-row:auto}}
@media (max-width:560px){.priv-grid{grid-template-columns:1fr}.priv.key{grid-column:auto}}

/* proof */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:40px}
.stat{border-top:2px solid var(--ink);padding-top:14px;display:grid;gap:4px}
.stat b{font:800 clamp(2rem,4vw,2.8rem)/1 var(--display);letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.stat span{color:var(--muted);font-size:.95rem}
.stat.todo b{color:var(--muted)}
.press{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.press a{display:grid;gap:8px;text-decoration:none;border:1px solid var(--line);border-radius:16px;padding:18px 20px;background:var(--surface);min-width:0}
.press a:hover{border-color:var(--green)}
.press .src{font:500 .75rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--green-ink)}
.press .hl{font-weight:600;line-height:1.4}
.press .dt{font-size:.85rem;color:var(--muted)}
@media (max-width:760px){.stats,.press{grid-template-columns:1fr}}

/* story */
.story .split{grid-template-columns:1.1fr 1fr;align-items:center}
.story blockquote h2{font-size:clamp(1.9rem,3.4vw,2.6rem)}
.story blockquote{margin:14px 0 0}
.story blockquote{margin:0;display:grid;gap:18px}
.story blockquote p{font-size:1.1rem;color:var(--muted)}
.sig{display:grid;gap:2px;margin-top:6px}
.sig b{font:700 1.05rem var(--display)}
.sig span{font-size:.9rem;color:var(--muted)}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
.member{border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:grid;gap:2px;min-width:0}
.member b{font-weight:600}
.member span{font-size:.86rem;color:var(--muted)}
.member.todo{border-style:dashed}
.member.todo b{color:var(--muted)}
@media (max-width:860px){.story .split{grid-template-columns:1fr}.team{grid-template-columns:1fr}}

/* final cta */
.final{text-align:left}
.final .box{background:var(--green-soft);border-radius:28px;padding:clamp(32px,6vw,64px);display:grid;gap:22px}
.final h2{font-size:clamp(2.2rem,5vw,3.6rem)}
.partner{font-size:.95rem;color:var(--muted)}
.partner code{font:500 .9rem var(--mono);color:var(--ink);user-select:all}

/* footer */
footer{border-top:1px solid var(--line);padding-block:40px 56px;font-size:.9rem;color:var(--muted)}
footer .wrap{display:grid;gap:18px}
footer nav{display:flex;flex-wrap:wrap;gap:8px 22px}
footer nav a{text-decoration:none}
footer nav a:hover{color:var(--ink)}
.disclaimer{font-size:.82rem;max-width:80ch}

/* proof strip */
.proof{border-top:1px solid var(--line);padding-block:26px 30px}
.proof-row{display:grid;grid-template-columns:repeat(3,minmax(0,auto)) minmax(0,1fr);gap:20px clamp(24px,4vw,56px);align-items:end}
.stat-s{display:grid;gap:2px}
.stat-s b{font:800 clamp(1.7rem,3vw,2.2rem)/1 var(--display);letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.stat-s span{font-size:.88rem;color:var(--muted)}
.stat-s.todo b{color:var(--muted)}
.press-s{justify-self:end;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;font-size:.92rem}
.press-s span{font:500 .72rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.press-s a{font-weight:600;text-decoration:none;color:var(--ink)}
.press-s a:hover{color:var(--green-ink)}
@media (max-width:860px){.proof-row{grid-template-columns:repeat(3,minmax(0,1fr))}.press-s{grid-column:1/-1;justify-self:start}}

/* technology */
.tech-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:40px}
.tech{border-top:2px solid var(--ink);padding-top:16px;display:grid;gap:8px;align-content:start}
.tech h3{font-size:1.15rem}
.tech p{font-size:.96rem;color:var(--muted)}
.specs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--surface);margin:0}
.specs div{padding:16px 18px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;gap:4px;min-width:0}
.specs dt{font:500 .72rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.specs dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.specs dd.todo{color:var(--muted);font-weight:500}
.specs-cap{font-size:.86rem;color:var(--muted);margin-top:12px}
@media (max-width:860px){.tech-grid{grid-template-columns:1fr}.specs{grid-template-columns:repeat(2,minmax(0,1fr))}}

.story blockquote p.pull{font:700 clamp(1.25rem,2.2vw,1.5rem)/1.3 var(--display);color:var(--ink);letter-spacing:-0.01em}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:80px}

/* Refined direction (from "KOKO Homepage Refined"): warm, editorial family technology.
   Deep forest ink, warm paper, lime KOKO green, a touch of sun. Dark panels use --deep so they stay dark in both themes. */
:root{
  --bg:#F2F0E8; --surface:#FBFAF5; --ink:#17332A; --muted:#66746C; --line:#D8DED4;
  --green:#95D95A; --green-ink:#286A42; --green-soft:#E2F2CE; --sun:#F2B36D;
  --deep:#17332A; --on-deep:#F4F3E9; --on-deep-muted:rgb(244 243 233 / .72); --on-ink:#FBFAF5;
  --shadow-c:22 49 39;
  --wrap:1220px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#10231C;--surface:#173028;--ink:#F4F3E9;--muted:#B2BDB4;--line:#365047;
  --green:#A9E46F;--green-ink:#C4F49A;--green-soft:#244631;--sun:#F2B36D;
  --deep:#0A1812;--on-deep:#F4F3E9;--on-deep-muted:rgb(244 243 233 / .72);--on-ink:#10231C;--shadow-c:0 0 0;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#10231C;--surface:#173028;--ink:#F4F3E9;--muted:#B2BDB4;--line:#365047;
  --green:#A9E46F;--green-ink:#C4F49A;--green-soft:#244631;--sun:#F2B36D;
  --deep:#0A1812;--on-deep:#F4F3E9;--on-deep-muted:rgb(244 243 233 / .72);--on-ink:#10231C;--shadow-c:0 0 0;color-scheme:dark}

body{font-size:18px;line-height:1.58}
.wrap{padding-inline:clamp(20px,4.5vw,52px)}
section{padding-block:clamp(82px,10vw,148px)}
h1{font-size:clamp(3.2rem,6.4vw,6.2rem);line-height:.92;letter-spacing:-.06em;max-width:10.5ch}
h2{font-size:clamp(2.3rem,4.4vw,4.4rem);line-height:.98;letter-spacing:-.045em}
h3{letter-spacing:-.025em}
p{line-height:1.62}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.72rem;letter-spacing:.16em}
.eyebrow::before{content:"";width:28px;height:2px;border-radius:2px;background:var(--green)}
.section-head{gap:20px;margin-bottom:clamp(46px,7vw,76px);max-width:820px}
.section-head h2{max-width:14ch}

/* Navigation: floating pill */
.nav{top:calc(12px + env(safe-area-inset-top,0px));border:0;background:transparent;backdrop-filter:none;padding-inline:16px;pointer-events:none}
.nav .wrap{pointer-events:auto;max-width:1180px;margin:0 auto;padding:10px 12px 10px 14px;border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);border-radius:999px;background:color-mix(in srgb,var(--surface) 89%,transparent);box-shadow:0 12px 40px rgb(var(--shadow-c) / .08);backdrop-filter:blur(18px)}
.brand{gap:11px;letter-spacing:-.02em}
.brand svg{width:34px;height:34px;border:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgb(0 0 0 / .08)}
.brand-by{font:500 .68rem/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.nav ul a{white-space:nowrap}
@media (max-width:1100px){.brand-by{display:none}}
.nav ul{gap:30px}
.nav ul a{font-size:.9rem;transition:color .2s ease}
.nav .btn{padding:11px 19px}
@media (max-width:1000px){.nav ul{gap:22px}}

/* Buttons and forms */
.btn{border-radius:14px;padding:14px 22px;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--ink);color:var(--on-ink);box-shadow:0 10px 24px rgb(var(--shadow-c) / .16)}
.btn-primary:hover{background:var(--green-ink);box-shadow:0 14px 30px rgb(var(--shadow-c) / .22)}
form.signup{padding:7px;gap:7px;max-width:560px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:0 14px 42px rgb(var(--shadow-c) / .08)}
form.signup input{border:0;background:transparent;border-radius:12px;padding:13px 16px}
form.signup input:focus{box-shadow:none}
form.signup .btn{padding:13px 20px}
.thanks{padding:16px 18px;border:1px solid color-mix(in srgb,var(--green) 55%,var(--line));border-radius:16px;background:var(--green-soft)}

/* Hero */
.hero{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(64px,8vw,112px) clamp(74px,8vw,110px)}
.hero::before{content:"";position:absolute;z-index:-1;width:48vw;height:48vw;min-width:520px;min-height:520px;right:-14vw;top:-13vw;border-radius:50%;background:radial-gradient(circle at 48% 52%,color-mix(in srgb,var(--green) 25%,transparent),transparent 68%)}
.hero::after{content:"";position:absolute;z-index:-1;left:-7rem;bottom:3rem;width:18rem;height:18rem;border-radius:50%;background:color-mix(in srgb,var(--sun) 18%,transparent);filter:blur(2px)}
.hero .wrap{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(46px,7vw,96px)}
.hero-copy{gap:27px;position:relative;z-index:2}
.hero-kicker{width:max-content;max-width:100%;display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border:1px solid color-mix(in srgb,var(--green-ink) 20%,transparent);border-radius:999px;background:color-mix(in srgb,var(--green-soft) 70%,transparent);font:600 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--green-ink)}
.hero-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 18%,transparent)}
h1 .accent{color:var(--green-ink)}
.hero .lede{font-size:clamp(1.15rem,1.55vw,1.38rem);max-width:47ch;color:var(--muted)}
.hero-media{transform:rotate(1.25deg)}
.hero-media::before{content:"";position:absolute;inset:18px -16px -18px 18px;z-index:-1;border-radius:42px;background:var(--green)}
.hero-media img,.hero-media video{aspect-ratio:1/1;object-position:52% 50%;border-radius:38px;box-shadow:0 26px 70px rgb(var(--shadow-c) / .2)}
.hero-media .tag{left:24px;bottom:24px;border:1px solid rgb(255 255 255 / .7);border-radius:16px;padding:13px 16px;background:color-mix(in srgb,var(--surface) 88%,transparent);box-shadow:0 12px 36px rgb(0 0 0 / .16);backdrop-filter:blur(14px);font-weight:600}
.ks{font-size:.88rem}
/* Hero: the Kickstarter line sits just under the form; the status line takes no room until it has something to say */
.signup-block{display:grid;min-width:0}
.signup-block .signup-status{min-height:0;margin:10px 0 0 4px}
.signup-block .signup-status:empty{margin-top:0}
.ks-badge{display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px;margin:14px 0 0 4px}
.ks-badge img{display:block;width:auto;height:14px}
.trust{padding-top:6px;gap:10px 18px;font-size:.69rem;text-transform:uppercase;letter-spacing:.075em}

/* Proof strip: one floating card */
.proof{border:0;padding-block:0 clamp(40px,5vw,64px)}
.proof-row{background:var(--surface);border-radius:26px;padding:clamp(22px,3vw,32px) clamp(22px,3.5vw,40px);box-shadow:0 14px 42px rgb(var(--shadow-c) / .07)}
.stat-s b{color:var(--ink)}
.stat-s{border-left:3px solid var(--green);padding-left:16px}

/* Story scene */
.scene{background:var(--surface);border:0}
.scene .wrap{grid-template-columns:minmax(0,1fr) minmax(300px,.78fr)}
.scene-copy{gap:24px}
.scene-copy h2{max-width:13ch}
.phone{position:relative;width:min(100%,380px);padding:26px 22px 24px;border:1px solid color-mix(in srgb,var(--on-deep) 10%,transparent);border-radius:42px;background:var(--deep);box-shadow:0 28px 70px rgb(var(--shadow-c) / .2);transform:rotate(-1.5deg)}
.phone::before{content:"";justify-self:center;width:72px;height:5px;margin-bottom:4px;border-radius:10px;background:color-mix(in srgb,var(--on-deep) 26%,transparent)}
.phone .time,.phone small{color:var(--on-deep-muted)}
.notif{padding:15px 16px;border:0;border-radius:19px;background:var(--surface);box-shadow:0 5px 20px rgb(0 0 0 / .12)}

/* Capabilities */
.pillars{gap:24px}
.pillar{border:0;border-radius:30px;background:var(--surface);box-shadow:0 14px 42px rgb(var(--shadow-c) / .07);transition:transform .3s ease,box-shadow .3s ease}
.pillar:hover{transform:translateY(-7px);box-shadow:0 24px 58px rgb(var(--shadow-c) / .12)}
.pillar .media{aspect-ratio:1.18/1;background:var(--green-soft)}
.pillar .body{padding:28px 28px 32px;gap:15px}
.pillar .kicker{width:max-content;padding:6px 9px;border-radius:999px;background:var(--green-soft);color:var(--green-ink);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em}
.pillar h3{font-size:1.55rem}
.pillar li{font-size:.96rem}
.pillar li::before{border-radius:50%;background:var(--line)}
.pillar li.body-only::before{background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
.legend{margin-top:24px}
.legend i{border-radius:50%}
.shoot{position:relative;overflow:hidden;place-content:end start;text-align:left;padding:28px;background:linear-gradient(145deg,#203D32,#315F48);color:#F4F3E9}
.shoot::before{content:"";position:absolute;width:190px;height:190px;right:-46px;top:-62px;border:1px solid rgb(255 255 255 / .18);border-radius:50%;box-shadow:0 0 0 34px rgb(255 255 255 / .04),0 0 0 68px rgb(255 255 255 / .035)}
.shoot b,.shoot span{position:relative;z-index:1;max-width:23ch}
.shoot b{font:700 1.28rem/1.15 var(--display)}
.shoot span{font:500 .78rem/1.45 var(--body);opacity:.74}

/* Principle band */
.band{position:relative;overflow:hidden;padding-block:clamp(74px,8vw,112px);background:var(--deep);color:var(--on-deep)}
.band::after{content:"K";position:absolute;right:3vw;top:50%;transform:translateY(-54%);font:800 min(26vw,330px)/1 var(--display);color:rgb(255 255 255 / .035);pointer-events:none}
.band p{font-size:clamp(2rem,4vw,4rem);line-height:1.04;max-width:18ch}
.band .sub{max-width:54ch;margin-top:22px;font-size:1.08rem;opacity:1;color:var(--on-deep-muted)}

/* Day timeline */
.timeline{grid-template-columns:repeat(5,minmax(200px,1fr));gap:20px;padding:12px 2px 26px}
.timeline::before{top:34px;background:linear-gradient(90deg,var(--green-ink),var(--green),var(--green-soft))}
.stop{gap:14px;padding-right:12px}
.stop .t{padding:9px 14px;background:var(--surface);box-shadow:0 4px 16px rgb(var(--shadow-c) / .08)}
.stop.body-only .t{background:var(--green);color:#17332A;border-color:var(--green)}
.stop h3{font-size:1.22rem}

/* Safety */
#safety{background:linear-gradient(180deg,var(--bg),color-mix(in srgb,var(--green-soft) 35%,var(--bg)))}
/* A day and Safe at home share a background, so their paddings would stack into one wide gap */
#day{padding-bottom:clamp(32px,4vw,56px)}
#safety{padding-top:clamp(56px,8vw,112px)}
.split img{border-radius:34px;box-shadow:0 24px 62px rgb(var(--shadow-c) / .13)}
.checks{margin-top:34px}
.checks li{grid-template-columns:128px 1fr;padding:19px 0}

/* Privacy */
.privacy{border:0;background:var(--surface)}
.priv-grid{grid-template-columns:1.18fr 1fr 1fr;gap:18px}
.priv{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:24px;padding:26px;background:var(--bg);transition:border .2s ease,transform .2s ease}
.priv:not(.key)::before{content:"✓";display:grid;place-items:center;width:30px;height:30px;margin-bottom:12px;border-radius:50%;background:var(--green-soft);color:var(--green-ink);font-weight:800}
.priv:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--green) 60%,var(--line))}
.priv.key{border:0;background:var(--deep);color:var(--on-deep)}
.priv.key .shoot{min-height:250px}
.priv.key .txt{padding:26px}
.priv.key p{color:var(--on-deep-muted)}

/* Technology */
.tech{border-top:0;border-left:3px solid var(--green);padding:4px 0 4px 20px}
.tech h3{font-size:1.25rem}
.specs{border:0;border-radius:24px;box-shadow:0 14px 42px rgb(var(--shadow-c) / .07);grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:860px){.specs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.specs div{padding:18px 22px}

/* Founder story */
.story .split{gap:clamp(48px,7vw,94px)}
.story blockquote h2{max-width:13ch;font-size:clamp(2.1rem,3.8vw,3.4rem)}
.story blockquote p{font-size:1.08rem}
.sig{margin-top:14px;padding-top:20px;border-top:1px solid var(--line)}
.member{border-radius:18px;background:var(--bg)}

/* Final conversion */
.final{padding-block:clamp(72px,9vw,120px)}
.final .box{position:relative;overflow:hidden;border-radius:38px;padding:clamp(38px,7vw,86px);background:var(--deep);color:var(--on-deep);box-shadow:0 28px 70px rgb(var(--shadow-c) / .18)}
.final .box::after{content:"";position:absolute;right:-90px;bottom:-130px;width:360px;height:360px;border-radius:50%;background:var(--green);opacity:.75}
.final .box>*{position:relative;z-index:1}
.final h2{font-size:clamp(3rem,6vw,6rem);letter-spacing:-.06em}
.final .lede,.final .partner,.final .ks{color:var(--on-deep-muted)}
.final .ks a,.final .partner code{color:var(--green)}
.final form.signup{border:0}

footer{padding-block:52px 64px;background:var(--deep);color:var(--on-deep-muted);border-top:1px solid rgb(255 255 255 / .08)}
footer nav a{color:var(--on-deep)}
footer nav a:hover{color:var(--green)}


@media (max-width:920px){
  .hero .wrap{grid-template-columns:1fr}.hero-copy{max-width:720px}.hero-media{order:2;max-width:720px}.hero-media img,.hero-media video{aspect-ratio:4/3}
}
@media (max-width:860px){
  .nav .wrap{padding:8px 9px 8px 10px}.brand-by{display:none}.nav .btn{font-size:.82rem}
  .scene .wrap{grid-template-columns:1fr}.phone{margin-top:12px}
  .priv-grid{grid-template-columns:1fr 1fr}.priv.key{grid-column:span 2}
}
@media (max-width:600px){
  body{font-size:16px}.wrap{padding-inline:20px}section{padding-block:76px}
  h1{font-size:clamp(2.9rem,15vw,4.4rem)}h2{font-size:clamp(2.1rem,10vw,3rem)}
  .hero{padding-top:48px}.hero .wrap{gap:48px}.hero-media{transform:none}.hero-media::before{inset:12px -9px -12px 12px;border-radius:28px}.hero-media img,.hero-media video{border-radius:26px;aspect-ratio:1/1}.hero-media .tag{left:14px;bottom:14px;font-size:.76rem}
  form.signup{display:grid}form.signup .btn{width:100%}
  .trust{display:grid}.pillar .media{aspect-ratio:1.25/1}.priv-grid{grid-template-columns:1fr}.priv.key{grid-column:auto}
  .final .box{border-radius:28px}.final .box::after{width:220px;height:220px;right:-100px;bottom:-110px}
  .checks li{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.pillar,.priv,.btn{transition:none}.pillar:hover,.priv:hover,.btn:hover{transform:none}}

/* Site plumbing */
.skip-link{position:absolute;left:16px;top:-60px;z-index:50;background:var(--ink);color:var(--on-ink);padding:10px 16px;border-radius:12px;text-decoration:none}
.skip-link:focus{top:12px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.signup-status{min-height:1.4em;margin:0;font-size:.92rem;color:var(--muted)}
.signup-status.is-success{color:var(--green-ink);font-weight:600}
.signup-status.is-error{color:#B42318}
.final .signup-status{color:var(--on-deep-muted)}
.final .signup-status.is-success{color:var(--green)}
.final .signup-status.is-error{color:#FFB4A8}
button.tag{font:inherit;font-size:.85rem;font-weight:600;color:var(--ink);cursor:pointer;text-align:left}
button.tag:hover{background:var(--surface)}
/* Make the in-home testing badge read as a signup, not just a status */
.tag-cta{flex:none;display:inline-flex;align-items:center;gap:6px;margin-left:4px;padding:5px 11px;border-radius:999px;background:var(--green-ink);color:var(--surface);font-size:.78rem;font-weight:700;white-space:nowrap;transition:gap .2s ease}
button.tag:hover .tag-cta,button.tag:focus-visible .tag-cta{gap:9px}
button.tag:focus-visible{outline:2px solid var(--green-ink);outline-offset:3px}
@media (max-width:420px){.hero-media .tag{display:grid;grid-template-columns:auto 1fr;column-gap:10px;row-gap:8px}.tag-cta{grid-column:2;justify-self:start;margin-left:0}}
@media (prefers-reduced-motion:reduce){.tag-cta{transition:none}}
.partner-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.btn-ghost{background:transparent;color:var(--on-deep);border:1px solid color-mix(in srgb,var(--on-deep) 35%,transparent);padding:11px 18px;font-size:.92rem}
.btn-ghost:hover{border-color:var(--green);color:var(--green)}

/* Press */
.press-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.press-cards a{display:grid;gap:12px;align-content:space-between;min-height:200px;text-decoration:none;border-radius:24px;padding:26px;background:var(--surface);box-shadow:0 12px 35px rgb(var(--shadow-c) / .07);transition:transform .25s ease,box-shadow .25s ease;min-width:0}
.press-cards a:hover{transform:translateY(-5px);box-shadow:0 20px 48px rgb(var(--shadow-c) / .12)}
.press-cards .src{font:500 .72rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--green-ink)}
.press-cards .hl{font:700 1.12rem/1.3 var(--display);letter-spacing:-.01em}
.press-cards .dt{font-size:.85rem;color:var(--muted)}
.press-cards .read{font-size:.82rem;font-weight:700;color:var(--green-ink)}
.press-note{margin-top:22px;font-size:.9rem;color:var(--muted)}
@media (max-width:860px){.press-cards{grid-template-columns:1fr}}
/* Featured press video: a still image until the visitor presses play */
.press-video{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);margin-bottom:18px;border-radius:24px;overflow:hidden;background:var(--surface);box-shadow:0 12px 35px rgb(var(--shadow-c) / .07)}
.press-video-frame{position:relative;aspect-ratio:16/9;max-width:100%;background:#0b1410}
.press-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.press-video-play{position:absolute;inset:0;display:block}
.press-video-play img{width:100%;height:100%;object-fit:cover;display:block}
.press-video-icon{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--green-ink);box-shadow:0 10px 30px rgb(0 0 0 / .3);transition:transform .2s ease}
.press-video-icon::after{content:"";position:absolute;left:31px;top:24px;border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent var(--surface)}
.press-video-play:hover .press-video-icon,.press-video-play:focus-visible .press-video-icon{transform:scale(1.08)}
.press-video-play:focus-visible{outline:3px solid var(--green);outline-offset:-3px}
.press-video-meta{display:grid;gap:12px;align-content:center;padding:28px}
.press-video-meta .src{font:500 .72rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--green-ink)}
.press-video-meta .hl{font:700 1.3rem/1.25 var(--display);letter-spacing:-.01em;text-wrap:balance}
.press-video-meta .dt{font-size:.85rem;color:var(--muted)}
.press-video-meta .read{font-size:.82rem;font-weight:700;color:var(--green-ink);text-decoration:none}
.press-video-meta .read:hover{text-decoration:underline}
@media (max-width:860px){.press-video{grid-template-columns:1fr}.press-video-meta{padding:22px}}
@media (prefers-reduced-motion:reduce){.press-video-icon{transition:none}}

/* Footer social */
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px}
.footer-brand{display:flex;align-items:center;gap:10px;color:var(--on-deep);text-decoration:none;font:700 1rem var(--display)}
.footer-brand img{width:30px;height:30px;border-radius:50%;background:#fff}
.social{display:flex;flex-wrap:wrap;gap:10px}
.social a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgb(255 255 255 / .92)}
.social a:hover{background:var(--green)}
.social img{width:18px;height:18px}
footer address{font-style:normal}
footer a.mail{color:var(--on-deep)}

/* Dialogs: demo request and in-home testing */
.home-dialog{width:min(640px,calc(100% - 28px));max-height:calc(100svh - 32px);padding:clamp(22px,4vw,36px);overflow:auto;border:0;border-radius:28px;background:var(--surface);color:var(--ink);box-shadow:0 28px 90px rgb(0 0 0 / .28)}
.home-dialog::backdrop{background:rgb(10 24 18 / .55);backdrop-filter:blur(8px)}
.home-dialog [hidden]{display:none!important}
.dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.dialog-head h2{font-size:clamp(1.9rem,5vw,2.8rem)}
.dialog-close{flex:none;display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:var(--bg);color:var(--ink);font:400 1.6rem/1 var(--body);cursor:pointer}
.dialog-intro{margin:14px 0 22px;color:var(--muted);font-size:1rem}
.home-form{display:grid;gap:20px}
.home-form fieldset{border:0;margin:0;padding:0;display:grid;gap:12px;min-width:0}
.home-form legend{padding:0;margin-bottom:10px;font:700 1.05rem var(--display);letter-spacing:-.01em}
.home-form legend small{font:400 .82rem var(--body);color:var(--muted);margin-left:6px}
.home-form .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.home-form label.field{display:grid;gap:6px;min-width:0}
.home-form label.field > span{font-size:.86rem;font-weight:600}
.home-form input[type=text],.home-form input[type=email],.home-form select,.home-form textarea{width:100%;min-width:0;border:1px solid var(--line);border-radius:14px;background:var(--bg);color:var(--ink);font:400 1rem var(--body);padding:12px 14px}
.home-form textarea{min-height:96px;resize:vertical}
.home-form input:focus,.home-form select:focus,.home-form textarea:focus{outline:none;border-color:var(--green-ink);box-shadow:0 0 0 3px var(--green-soft)}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choices label{position:relative;cursor:pointer}
.choices input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.choices span{display:inline-block;padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:var(--bg);font-size:.92rem;line-height:1.2;transition:background .15s ease,border-color .15s ease}
.choices input:checked + span{background:var(--green-soft);border-color:var(--green-ink);color:var(--green-ink);font-weight:600}
.choices input:focus-visible + span{outline:3px solid var(--green);outline-offset:2px}
.consent{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;font-size:.9rem;color:var(--muted)}
.consent input{margin-top:3px;width:18px;height:18px;accent-color:var(--green-ink)}
.form-status{min-height:1.4em;margin:0;font-size:.92rem;color:#B42318}
.home-form .btn-primary{justify-self:start}
.honeypot{position:absolute;left:-10000px;width:1px;height:1px;opacity:0}
.dialog-success{padding-top:16px;text-align:center;display:grid;gap:18px;justify-items:center}
.dialog-success .mark{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--green-soft);color:var(--green-ink);font-size:2rem;font-weight:800}
.form-privacy{font-size:.8rem;color:var(--muted)}
@media (max-width:600px){.home-form .row{grid-template-columns:1fr}.home-form .btn-primary{justify-self:stretch}}
.form-status.is-success{color:var(--green-ink)}
.split video{display:block;width:min(100%,460px);justify-self:center;aspect-ratio:4/5;object-fit:cover;border-radius:34px;background:var(--green-soft);box-shadow:0 24px 62px rgb(var(--shadow-c) / .13)}

/* A day with KOKO: live house scene above the timeline */
.day-scene{margin:0 0 28px;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--surface);box-shadow:0 10px 30px rgb(var(--shadow-c) / .08)}
.day-scene-svg{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:12/5}
.day-scene-caption{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:14px 20px;border-top:1px solid var(--line)}
.day-scene-time{font:500 .82rem var(--mono);color:var(--green-ink);white-space:nowrap}
.day-scene-what{flex:1 1 220px;min-width:0;font-weight:600;color:var(--ink)}
.day-scene-now{font:inherit;font-size:.85rem;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:999px;padding:5px 14px;cursor:pointer}
.day-scene-now:hover{border-color:var(--green-ink)}
.day-scene-now:focus-visible{outline:2px solid var(--green-ink);outline-offset:2px}
.stop[role="button"]{cursor:pointer}
.stop[role="button"]:focus-visible{outline:2px solid var(--green-ink);outline-offset:6px;border-radius:10px}
.stop.is-active .t{box-shadow:0 0 0 4px var(--green-soft)}
.stop.is-active h3{color:var(--green-ink)}
.day-more{margin-top:6px}
.day-more a{color:var(--green-ink);font-weight:600;text-decoration:none}
.day-more a:hover{text-decoration:underline}
@media (max-width:700px){
  .day-scene-svg{aspect-ratio:6/5}
  .day-scene-caption{padding:12px 16px}
}

/* Keep faces in frame when a portrait photo is cropped to the card shape */
.pillar .media img.media-top{object-position:50% 28%}

/* Memory Key: photo of the plant-shaped key in KOKO's chest */
.priv.key .key-photo{flex:1;min-height:250px;overflow:hidden;background:var(--deep)}
.priv.key .key-photo img{display:block;width:100%;height:100%;max-width:100%;object-fit:cover;object-position:66% 42%}

/* The space in between: small pill bottle and glasses icons inside the question */
.inline-icon{display:inline-block;width:auto;height:1.45em;margin:0 .04em 0 .16em;vertical-align:-.36em}
.inline-icon-wide{height:.95em;vertical-align:-.12em}
/* Phone mockup times follow the visitor's clock; keep each header on one line */
.notif b span{white-space:nowrap}
@media (max-width:480px){.notif b .is-yesterday .notif-clock{display:none}}

/* Meet KOKO film: same click-to-load player as the press video */
.film{padding-block:0 clamp(56px,7vw,96px)}
.film .section-head{margin-bottom:clamp(24px,3.5vw,40px)}
.film-frame{border-radius:28px;overflow:hidden;box-shadow:0 26px 70px rgb(var(--shadow-c) / .18)}
.film-frame .press-video-icon{left:clamp(16px,3vw,36px);top:auto;bottom:clamp(16px,3vw,36px);margin:0;width:76px;height:76px}
.film-play-label{position:absolute;left:calc(clamp(16px,3vw,36px) + 90px);bottom:calc(clamp(16px,3vw,36px) + 25px);padding:6px 12px;border-radius:999px;background:rgb(0 0 0 / .45);backdrop-filter:blur(8px);color:#fff;font:600 .9rem/1.2 var(--display);letter-spacing:-.01em}
.film-real-badge{position:absolute;left:clamp(16px,3vw,36px);top:clamp(16px,3vw,36px);display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgb(255 255 255 / .9);backdrop-filter:blur(8px);color:var(--green-ink);font:600 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;box-shadow:0 6px 20px rgb(0 0 0 / .15)}
.film-real-badge::before{content:"";width:8px;height:8px;border-radius:50%;background:#e5484d}
.film-meta{max-width:none;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;margin-top:16px;font-size:.88rem;color:var(--muted)}
.film-meta a{font-weight:700;color:var(--green-ink);text-decoration:none}
.film-meta a:hover{text-decoration:underline}
@media (max-width:860px){.film-frame{border-radius:20px}.film-frame .press-video-icon{width:56px;height:56px}.film-frame .press-video-icon::after{left:22px;top:17px;border-width:11px 0 11px 17px}.film-play-label{left:calc(clamp(16px,3vw,36px) + 66px);bottom:calc(clamp(16px,3vw,36px) + 15px);font-size:.8rem}}

/* Senior community photo above the press video */
.community-photo{margin:0 0 18px}
.community-photo img{width:100%;height:auto;aspect-ratio:1400/875;object-fit:cover;border-radius:24px;box-shadow:0 12px 35px rgb(var(--shadow-c) / .07)}
.community-photo figcaption{margin-top:12px;font-size:.88rem;color:var(--muted)}
@media (max-width:860px){.community-photo img{border-radius:18px}}

/* In-home testing now lives in the closing section as a text link, so the hero has one call to action */
p.tag{margin:0;max-width:none}
.link-button{padding:0;border:0;background:none;color:var(--green-ink);font:inherit;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer}
.final .ks .link-button{color:var(--green)}
.link-button:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}