/* =========================================================
   Child360 global styles
   All colors and design values live in :root below.
   Pages must not contain hard-coded colors.
   ========================================================= */
:root{
  --color-primary:#0F766E;
  --color-primary-hover:#115E59;
  --color-primary-light:#14B8A6;
  --color-primary-soft:#E0F2EF;
  --color-accent:#FF7A59;
  --color-accent-text:#2A0F07;
  --color-sun:#FFC845;
  --color-bg:#F4F7F8;
  --color-surface:#FFFFFF;
  --color-surface-alt:#F1F8F6;
  --color-text:#0F172A;
  --color-text-muted:#5B6576;
  --color-border:#E3E9EC;
  --color-success:#22C55E;
  --color-warning:#F59E0B;
  --color-danger:#EF4444;
  --color-on-primary:var(--color-surface);
  --color-warning-soft:color-mix(in srgb,var(--color-warning) 12%,var(--color-surface));
  --color-highlight:color-mix(in srgb,var(--color-sun) 35%,var(--color-surface));

  --font-sans:"Plus Jakarta Sans",system-ui,sans-serif;
  --fs-h1:clamp(2.75rem,5vw,3.5rem);
  --fs-h2:clamp(2rem,3.2vw,2.25rem);
  --fs-h3:1.25rem;
  --fs-body:1.0625rem;
  --fs-small:.9375rem;

  --radius-btn:12px;
  --radius-card:20px;
  --radius-inner:16px;
  --radius-pill:999px;
  --shadow-sm:0 1px 3px rgba(15,23,42,.06);

  --container:1120px;
  --prose:720px;
  --section-y:96px;
  --tap:44px;
}
@media (max-width:720px){
  :root{--fs-h1:2.125rem;--fs-h2:1.625rem;--section-y:64px}
}

/* ---------- base ---------- */
html{color-scheme:light;scroll-behavior:smooth;scroll-padding-top:88px}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
h1,h2,h3{margin:0;color:var(--color-text);line-height:1.15}
h1{font-size:var(--fs-h1);font-weight:800;letter-spacing:-1px}
h2{font-size:var(--fs-h2);font-weight:800;letter-spacing:-.5px}
h3{font-size:var(--fs-h3);font-weight:700;line-height:1.3}
p{margin:0}
a{color:var(--color-primary);text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--color-primary-hover)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--color-primary-light);outline-offset:3px;border-radius:6px}
.muted{color:var(--color-text-muted);font-size:var(--fs-small)}
.container{width:min(var(--container),100% - 40px);margin-inline:auto}
mark.ph{background:var(--color-highlight);color:inherit;padding:0 3px;border-radius:4px}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:20;background:var(--color-surface);border-bottom:1px solid var(--color-border)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px}
.logo{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);color:var(--color-text);text-decoration:none;font-weight:800;font-size:1.2rem;letter-spacing:-.5px}
.logo:hover{color:var(--color-text)}
.logo svg{width:30px;height:30px}
.logo .ring-mark{fill:none;stroke:var(--color-primary);stroke-width:4.5;stroke-linecap:round}
.logo .dot-mark{fill:var(--color-accent)}
.main-nav{display:flex;align-items:center;gap:8px}
.main-nav a:not(.btn){display:inline-flex;align-items:center;min-height:var(--tap);padding:0 12px;color:var(--color-text-muted);text-decoration:none;font-weight:600;font-size:var(--fs-small);border-radius:var(--radius-btn)}
.main-nav a:not(.btn):hover{color:var(--color-primary)}
.main-nav a[aria-current="page"]{color:var(--color-primary)}
.main-nav .btn{margin-left:8px}
@media (max-width:760px){.main-nav a:not(.btn){display:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--tap);padding:12px 22px;border-radius:var(--radius-btn);font-family:inherit;font-weight:600;font-size:1rem;line-height:1.2;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.btn svg{width:20px;height:20px;flex:none}
.btn-primary{background:var(--color-primary);color:var(--color-on-primary)}
.btn-primary:hover{background:var(--color-primary-hover);color:var(--color-on-primary)}
.btn-secondary{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border)}
.btn-secondary:hover{border-color:var(--color-primary);color:var(--color-primary)}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--radius-pill);background:var(--color-primary-soft);color:var(--color-primary);font-size:.875rem;font-weight:600;line-height:1.3}
.chip-accent{background:var(--color-accent);color:var(--color-accent-text)}
.chip-neutral{background:var(--color-surface);color:var(--color-text-muted);border:1px solid var(--color-border)}

/* ---------- cards & icons ---------- */
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);padding:24px}
.icon-tile{width:48px;height:48px;flex:none;border-radius:14px;background:var(--color-primary-soft);color:var(--color-primary);display:grid;place-items:center;font-weight:800;font-size:1.25rem}
.icon-tile svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.check{width:22px;height:22px;flex:none;margin-top:2px}
.check circle{fill:var(--color-primary-soft)}
.check path{fill:none;stroke:var(--color-primary);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- sections ---------- */
.section{padding:var(--section-y) 0;background:var(--color-bg)}
.section-alt{background:var(--color-surface-alt)}
.section-soft{background:var(--color-primary-soft)}
.section-head{max-width:640px;margin-bottom:40px}
.section-head p{margin-top:14px;color:var(--color-text-muted);font-size:1.0625rem}

/* ---------- footer ---------- */
.site-footer{background:var(--color-surface-alt);border-top:1px solid var(--color-border);padding:48px 0;color:var(--color-text-muted);font-size:var(--fs-small)}
.site-footer .container{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px}
.site-footer p{margin-top:6px}
.footer-nav{display:flex;flex-wrap:wrap;gap:4px 8px}
.footer-nav a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 8px;color:var(--color-text-muted);text-decoration:none}
.footer-nav a:hover{color:var(--color-primary)}

/* ================= LANDING ================= */
.hero{padding:72px 0 var(--section-y)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero h1{max-width:13ch}
.hero .lede{margin:22px 0 32px;max-width:46ch;color:var(--color-text-muted);font-size:1.1875rem}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.hero .chip{margin-top:24px}

/* phone frame (hero + openness). Replace .phone-screen content with an <img> for a real screenshot. */
.phone{width:100%;max-width:330px;margin-inline:auto;background:var(--color-surface);border:1px solid var(--color-border);border-radius:44px;padding:12px;box-shadow:var(--shadow-sm)}
.phone-screen{position:relative;background:var(--color-bg);border-radius:34px;padding:34px 18px 22px;min-height:620px;overflow:hidden}
.phone-screen::before{content:"";position:absolute;top:12px;left:50%;width:80px;height:8px;margin-left:-40px;border-radius:var(--radius-pill);background:var(--color-border)}
.phone-screen img{display:block;width:100%;height:100%;object-fit:cover}
.report-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:14px 0 4px}
.report-head strong{font-size:1rem}
.report-head span{font-size:.8125rem;color:var(--color-text-muted)}
.ring{display:block;width:100%;margin:4px auto}
.ring .track{fill:none;stroke:var(--color-primary-soft);stroke-width:10}
.ring .tick{stroke:var(--color-border);stroke-width:2;stroke-linecap:round}
.ring .bar{stroke:var(--color-primary);stroke-width:9;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:grow .7s cubic-bezier(.2,.8,.2,1) forwards}
.ring .bar.idle{stroke:var(--color-border)}
.ring .hourlabels text{fill:var(--color-text-muted);font:500 15px var(--font-sans)}
.ring .total{fill:var(--color-text);font:800 32px var(--font-sans);letter-spacing:-1px}
.ring .sub{fill:var(--color-text-muted);font:500 15px var(--font-sans)}
@keyframes grow{to{stroke-dashoffset:0}}
.apps{list-style:none;margin:6px 0 0;padding:14px;display:grid;gap:10px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-inner)}
.apps li{display:grid;grid-template-columns:10px 62px 1fr 54px;align-items:center;gap:10px;font-size:.8125rem;font-weight:500}
.apps .sw{width:10px;height:10px;border-radius:3px}
.apps .meter{height:6px;background:var(--color-primary-soft);border-radius:6px;overflow:hidden}
.apps .meter i{display:block;height:100%;border-radius:6px}
.apps .tm{text-align:right;white-space:nowrap;color:var(--color-text-muted);font-variant-numeric:tabular-nums}
.c1{background:var(--color-primary)}.c2{background:var(--color-primary-light)}.c3{background:var(--color-accent)}.c4{background:var(--color-sun)}.c5{background:var(--color-text-muted)}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.steps .card{display:flex;flex-direction:column;gap:10px;height:100%}
.steps .card .icon-tile{margin-bottom:6px}
.steps .card p{color:var(--color-text-muted)}
.steps .chip{align-self:flex-start;margin-top:auto}
.steps .card p + .chip{margin-top:8px}

.ledger{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ledger .card{padding:32px}
.ledger h3{margin-bottom:6px}
.ledger .card > p.muted{margin-bottom:18px}
.checklist{list-style:none;margin:0;padding:0}
.checklist li{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--color-border)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips .chip-neutral{text-decoration:line-through}
.ledger .note{margin-top:22px;padding:14px 16px;border-radius:var(--radius-btn);background:var(--color-surface-alt)}

.openness{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.openness .phone-screen{min-height:460px;background:var(--color-primary-soft)}
.status{display:flex;justify-content:space-between;font-size:.8125rem;font-weight:600;color:var(--color-text-muted);padding:0 6px 26px}
.clock{font-weight:800;font-size:3.5rem;line-height:1;text-align:center;letter-spacing:-2px;margin-bottom:30px}
.notif{display:grid;grid-template-columns:40px 1fr;gap:2px 12px;padding:14px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-inner)}
.notif .icon-tile{grid-row:span 3;width:40px;height:40px;border-radius:12px}
.notif .icon-tile svg{width:22px;height:22px}
.notif .app{font-size:.8125rem;color:var(--color-text-muted)}
.notif .msg{font-weight:700;font-size:.9375rem;line-height:1.35}
.notif .pin{font-size:.8125rem;color:var(--color-text-muted);margin-top:4px}
.features{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.features .card{display:flex;gap:18px;align-items:flex-start}
.features h3{margin:2px 0 4px}
.features p{color:var(--color-text-muted)}

.faq{max-width:780px;padding:8px 24px}
.faq details + details{border-top:1px solid var(--color-border)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:64px;font-weight:700;font-size:1.0625rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:10px;height:10px;flex:none;border-right:2px solid var(--color-primary);border-bottom:2px solid var(--color-primary);transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq details p{padding:0 0 20px;color:var(--color-text-muted);max-width:64ch}

.closing{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:28px;padding:48px;background:var(--color-primary-soft);border-color:var(--color-primary-soft)}
.closing h2{max-width:18ch}
.closing p{margin-top:10px;color:var(--color-text-muted)}

@media (max-width:920px){
  .hero-grid,.openness{grid-template-columns:1fr;gap:48px}
  .steps,.ledger{grid-template-columns:1fr}
  .closing{padding:32px 24px}
}
@media (max-width:720px){.hero{padding-top:48px}.ledger .card{padding:24px}}

/* ================= LEGAL PAGES ================= */
.legal-page{padding:56px 0 var(--section-y)}
.prose-wrap{width:min(var(--prose),100% - 40px);margin-inline:auto}
.doc-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.doc-tabs a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 16px;border-radius:var(--radius-pill);background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-muted);text-decoration:none;font-weight:600;font-size:var(--fs-small)}
.doc-tabs a:hover{color:var(--color-primary);border-color:var(--color-primary)}
.doc-tabs a[aria-current="page"]{background:var(--color-primary-soft);border-color:var(--color-primary-soft);color:var(--color-primary)}
.doc-title p.muted{margin-top:12px;font-size:1rem}
.doc-dates{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.doc-card{margin-top:32px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);padding:48px}
@media (max-width:720px){.doc-card{padding:24px}}

.doc{font-size:var(--fs-body);line-height:1.7;overflow-wrap:break-word}
.doc p,.doc li{overflow-wrap:anywhere}
.doc p{margin:0 0 16px}
.doc h2{font-size:1.625rem;letter-spacing:-.5px;margin:40px 0 14px}
.doc h3{font-size:var(--fs-h3);margin:24px 0 10px}
.doc ul,.doc ol{margin:0 0 20px;padding-left:1.35rem}
.doc li{margin:8px 0;padding-left:4px}
.doc li::marker{color:var(--color-primary);font-weight:700}
.doc .summary{padding:22px 24px;border-radius:var(--radius-inner);background:var(--color-primary-soft);margin-bottom:24px}
.doc .summary strong:first-child{display:block;font-size:1.125rem;margin-bottom:4px}
.toc{padding:22px 24px;border-radius:var(--radius-inner);background:var(--color-surface-alt);border:1px solid var(--color-border);margin-bottom:8px}
.toc h2{font-size:1rem;letter-spacing:0;margin:0 0 8px}
.toc ol{margin:0;padding-left:1.4rem;columns:2;column-gap:28px;font-size:var(--fs-small);line-height:1.4}
.toc li{break-inside:avoid;margin:0;padding:0}
.toc a{display:inline-flex;align-items:center;min-height:36px;color:var(--color-text);text-decoration:none}
.toc a:hover{color:var(--color-primary);text-decoration:underline}
@media (max-width:560px){.toc ol{columns:1}}
.table-wrap{overflow-x:auto;margin:18px 0 24px;border:1px solid var(--color-border);border-radius:var(--radius-inner)}
.doc table{width:100%;border-collapse:collapse;font-size:var(--fs-small);line-height:1.55;min-width:520px}
.doc th,.doc td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--color-border)}
.doc tr:last-child td{border-bottom:0}
.doc th{background:var(--color-surface-alt);font-weight:700}
.doc td:first-child{font-weight:600}
.contact-card{padding:18px 20px;border-radius:var(--radius-inner);background:var(--color-surface-alt)}
.legal-note{margin-top:40px;padding:18px 20px;border-radius:var(--radius-inner);background:var(--color-warning-soft);border:1px solid var(--color-warning);font-size:var(--fs-small)}

/* delete account */
.doc .lead{font-size:1.125rem;color:var(--color-text-muted);margin-bottom:24px}
.option{padding:24px;border-radius:var(--radius-inner);background:var(--color-surface-alt);border:1px solid var(--color-border);margin-bottom:16px}
.option.is-primary{background:var(--color-surface);border:2px solid var(--color-primary)}
.option h2{margin:12px 0 4px;font-size:1.375rem}
.option .muted{margin-bottom:12px}
.option ol{list-style:none;padding:0;margin:0 0 16px;counter-reset:st}
.option ol li{counter-increment:st;display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start;padding:10px 0;margin:0;border-top:1px solid var(--color-border)}
.option ol li::before{content:counter(st);width:32px;height:32px;border-radius:10px;background:var(--color-primary-soft);color:var(--color-primary);font-weight:800;display:grid;place-items:center;font-size:.9375rem}
.option .result{margin:0;padding:12px 14px;border-radius:var(--radius-btn);background:var(--color-primary-soft);font-size:var(--fs-small)}
.doc .btn{text-decoration:none;margin:8px 0 8px}
.gone{list-style:none;padding:0;margin:0}
.doc .gone li{display:flex;gap:12px;padding:12px 0 12px;margin:0;border-top:1px solid var(--color-border)}
.after{margin-top:16px;padding:14px 16px;border-radius:var(--radius-btn);background:var(--color-surface-alt)}
.kept{border:1px solid var(--color-border);border-radius:var(--radius-inner);overflow:hidden}
.kept-row{display:grid;grid-template-columns:1fr auto;gap:8px 20px;padding:16px 18px;border-top:1px solid var(--color-border)}
.kept-row:first-child{border-top:0}
.kept-row h3{margin:0 0 2px;font-size:1.0625rem}
.kept-row p{margin:0;color:var(--color-text-muted);font-size:var(--fs-small)}
.kept-row .chip{align-self:center;justify-self:end;white-space:nowrap}
.device{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.device > div{padding:18px 20px;border-radius:var(--radius-inner);border:1px solid var(--color-border)}
.device h3{margin:0 0 4px;font-size:1.0625rem}
.device p{margin:0;color:var(--color-text-muted);font-size:var(--fs-small)}
@media (max-width:620px){.device{grid-template-columns:1fr}.kept-row{grid-template-columns:1fr}.kept-row .chip{justify-self:start}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.ring .bar{stroke-dashoffset:0}html{scroll-behavior:auto}}
figure.phone{margin-block:0}
.openness .section-head{margin-bottom:28px}
.hero .phone-screen{display:flex;flex-direction:column;min-height:600px}
.hero .apps{margin-top:auto}
@media (max-width:720px){.doc-card{padding:20px}.doc .summary,.toc,.option{padding:18px}}

/* logo image + store buttons */
.logo img{display:block;height:44px;width:auto}
.site-footer .logo img{height:36px}
.store-row{display:flex;flex-wrap:wrap;gap:12px}
.btn-store{min-height:56px;padding:10px 20px 10px 16px;text-align:left}
.btn-store svg{width:26px;height:26px}
.btn-store span{display:flex;flex-direction:column;font-size:1.0625rem;line-height:1.15;font-weight:700}
.btn-store small{font-size:.75rem;font-weight:500}
.hero .store-row{margin-bottom:20px}
.hero-link{font-weight:600}
.hero .phone-screen > .chip{align-self:flex-start}