/* ============================================================
   HomeCrew — homecrew.family
   Shared stylesheet. Apple-inspired, family-warm.
   No external fonts, no trackers, no third-party requests.
   ============================================================ */

:root{
  /* Brand palette (from HomeCrew visual identity) */
  --ink:#15383b;
  --ink-2:#28454a;
  --muted:#647a7d;
  --teal:#087f89;
  --teal-dark:#08616a;
  --aqua:#28bfd0;
  --orange:#ffb21f;
  --orange-deep:#b76800;
  --mint:#a9dfb7;
  --green:#73b980;

  /* Surfaces */
  --bg:#ffffff;
  --surface:#f7f9f9;
  --surface-2:#eef4f4;
  --soft:#f3f6f6;
  --line:#e2eaea;
  --card:#ffffff;

  --radius:28px;
  --radius-sm:16px;
  --shadow-sm:0 10px 30px rgba(21,56,59,.06);
  --shadow-md:0 20px 55px rgba(21,56,59,.10);
  --shadow-lg:0 34px 90px rgba(21,56,59,.16);

  --maxw:1200px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Rounded","SF Pro Display","Segoe UI",Inter,Roboto,system-ui,sans-serif;

  color:var(--ink);
  font-family:var(--font);
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  scroll-behavior:smooth;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit}
h1,h2,h3,h4{margin:0;letter-spacing:-.02em;line-height:1.05}
p{margin:0}
:focus-visible{outline:3px solid rgba(8,127,137,.45);outline-offset:2px;border-radius:6px}
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 12px 0;z-index:200}
.skip-link:focus{left:0}

/* ---------- Layout helpers ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:24px}
.section{padding:96px 0}
.section-sm{padding:64px 0}
.bg-soft{background:var(--surface)}
.center{text-align:center}
.eyebrow{
  display:inline-block;text-transform:uppercase;letter-spacing:.14em;
  font-size:12px;font-weight:800;color:var(--orange-deep);margin-bottom:16px;
}
.section-title{font-size:clamp(30px,4.2vw,52px);line-height:1.04;margin:0 0 18px}
.section-lead{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:640px;margin:0 auto}
.lead-left{margin:0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding:0 26px;border:0;border-radius:14px;
  font-weight:700;font-size:16px;cursor:pointer;white-space:nowrap;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease,color .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--teal);color:#fff;box-shadow:0 12px 28px rgba(8,127,137,.24)}
.btn-primary:hover{background:var(--teal-dark)}
.btn-ghost{background:transparent;color:var(--teal);min-height:auto;padding:0 6px}
.btn-ghost .arrow{transition:transform .18s ease}
.btn-ghost:hover{transform:none}
.btn-ghost:hover .arrow{transform:translateX(4px)}
.btn-quiet{background:var(--soft);color:var(--ink)}
.btn-quiet:hover{background:#e7efef}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#0e2a2d}
.btn-lg{min-height:58px;padding:0 32px;font-size:17px}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:var(--maxw);margin:0 auto;height:66px;padding-inline:24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:19px;letter-spacing:-.02em}
.brand img{width:36px;height:36px;border-radius:11px}
.nav{display:flex;align-items:center;gap:30px}
.nav a{color:var(--muted);font-size:15px;font-weight:600;transition:color .15s}
.nav a:hover{color:var(--teal)}
.header-cta{display:flex;align-items:center;gap:12px}
.header-cta .btn{min-height:42px;padding:0 18px;font-size:15px}
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--ink)}
.nav-toggle svg{width:26px;height:26px}

/* ---------- Hero (full-bleed background photo) ---------- */
.hero-bg{position:relative;overflow:hidden;min-height:clamp(600px,84vh,840px);display:flex;align-items:center}
.hero-bg-media{position:absolute;inset:0;z-index:-1}
.hero-bg-media img{width:100%;height:100%;object-fit:cover;object-position:60% center}
.hero-bg-media .scrim{display:none}
.hero-bg-inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:48px 24px;width:100%}
.hero-bg-inner .hero-copy{max-width:520px}

/* ---------- Hero (legacy two-column, unused in v2.2) ---------- */
.hero{position:relative;overflow:hidden}
.hero-inner{
  max-width:var(--maxw);margin:0 auto;padding:72px 24px 84px;
  display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:center;
}
.hero-copy h1{font-size:clamp(40px,5.4vw,72px);letter-spacing:-.035em;margin:0 0 22px}
.hero-copy h1 .hl{color:var(--teal)}
.hero-copy .sub{font-size:clamp(17px,2vw,21px);color:var(--muted);max-width:540px;margin:0 0 30px}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.trust-row{display:flex;flex-wrap:wrap;gap:18px 26px;margin-top:34px}
.trust-row .t{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.trust-row .t svg{width:18px;height:18px;flex:none;color:var(--teal)}

/* ---------- Phone / app mockup ---------- */
.hero-visual{position:relative;display:grid;place-items:center;min-height:520px}
/* Family photo hero */
.hero-photo{position:relative;width:100%;max-width:560px}
.hero-photo .frame{
  position:relative;border-radius:32px;overflow:hidden;background:var(--surface);
  box-shadow:var(--shadow-lg);border:1px solid var(--line);
  aspect-ratio:5/4;
}
.hero-photo .frame img{width:100%;height:100%;object-fit:cover;object-position:72% center;display:block}
@media (max-width:940px){.hero-photo .frame{aspect-ratio:16/10}}

/* App preview section (relocated phone + info cards) */
.preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.preview-copy .section-title{margin-top:6px}
.preview-list{list-style:none;margin:22px 0 26px;padding:0;display:grid;gap:13px}
.preview-list li{display:flex;gap:11px;font-size:15.5px;color:var(--ink-2);line-height:1.45}
.preview-list li svg{width:20px;height:20px;flex:none;margin-top:1px;color:var(--teal)}
.preview-visual{position:relative;display:grid;place-items:center;min-height:520px}
.phone{
  position:relative;width:min(320px,84%);background:#0f2c2f;border-radius:44px;
  padding:12px;box-shadow:var(--shadow-lg);z-index:2;
}
.phone .screen{background:#fff;border-radius:34px;overflow:hidden}
.phone-notch{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:110px;height:26px;background:#0f2c2f;border-radius:0 0 16px 16px;z-index:3}
.app-top{display:flex;align-items:center;justify-content:space-between;padding:26px 20px 14px}
.app-brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px}
.app-brand img{width:26px;height:26px;border-radius:8px}
.app-avatar{width:34px;height:34px;border-radius:50%;background:var(--orange);color:#5a3a00;display:grid;place-items:center;font-weight:800;font-size:14px}
.app-hello{padding:4px 20px 8px}
.app-hello span{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-deep)}
.app-hello h3{font-size:24px;margin:4px 0 0}
.points{
  margin:14px 20px;background:linear-gradient(150deg,var(--teal),var(--teal-dark));
  color:#fff;border-radius:22px;padding:18px 20px;position:relative;overflow:hidden;
}
.points:after{content:"";position:absolute;width:120px;height:120px;border:22px solid rgba(255,178,31,.28);border-radius:50%;right:-40px;top:-46px}
.points small{font-size:11px;opacity:.85}
.points .n{display:block;font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1;margin:6px 0 2px}
.points .n em{font-style:normal;font-size:12px;opacity:.85;font-weight:600}
.app-list{padding:2px 20px 22px}
.app-list .lbl{display:flex;justify-content:space-between;align-items:center;margin:6px 2px 8px}
.app-list .lbl b{font-size:14px}
.app-list .lbl span{font-size:11px;color:var(--muted)}
.chore{display:grid;grid-template-columns:38px 1fr auto;gap:11px;align-items:center;background:var(--soft);border-radius:15px;padding:11px;margin-bottom:8px}
.chore .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:18px}
.ic.teal{background:#dcf4f5}.ic.amber{background:#fff1cf}.ic.green{background:#e0f3e4}
.chore .txt b{font-size:13px;display:block}
.chore .txt small{font-size:11px;color:var(--muted)}
.chore .pts{font-size:12px;font-weight:800;color:var(--teal);background:#dcf4f5;border-radius:9px;padding:6px 9px}
.float-card{
  position:absolute;z-index:4;background:#fff;border-radius:18px;padding:12px 15px;
  box-shadow:var(--shadow-md);display:flex;align-items:center;gap:11px;
  animation:floaty 4.5s ease-in-out infinite;
}
.float-approve{left:-6%;bottom:16%}
.float-reward{right:-4%;top:12%;animation-delay:1.2s}
.float-card .fic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none}
.fic.ok{background:#dff4e5;color:#23764a}
.fic.rw{background:#fff0c9;color:#9a6300}
.float-card b{font-size:12.5px;display:block}
.float-card span{font-size:11px;color:var(--muted)}
@keyframes floaty{50%{transform:translateY(-9px)}}
@media (prefers-reduced-motion:reduce){.float-card{animation:none}}

/* ---------- Study / evidence band ---------- */
.evidence{background:linear-gradient(160deg,#0f2c2f,#15383b);color:#fff;position:relative;overflow:hidden}
.evidence:before{content:"";position:absolute;inset:0;background:radial-gradient(50% 60% at 85% 10%,rgba(40,191,208,.22),transparent 70%)}
.evidence .wrap{position:relative}
.evidence .eyebrow{color:var(--aqua)}
.evidence-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.evidence h2{font-size:clamp(28px,3.6vw,44px);margin:0 0 18px;color:#fff}
.evidence p{color:#c4d6d7;font-size:17px;margin:0 0 16px}
.evidence .cite{font-size:13px;color:#8fb0b2}
.evidence .cite a{color:var(--aqua);text-decoration:underline;text-underline-offset:2px}
.stat-cards{display:grid;gap:16px}
.stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:22px 24px}
.stat .big{font-size:34px;font-weight:800;letter-spacing:-.03em;color:#fff;display:block;line-height:1}
.stat .cap{font-size:13.5px;color:#bcd2d3;margin-top:8px}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:56px}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-sm)}
.step .num{width:40px;height:40px;border-radius:12px;background:#dcf4f5;color:var(--teal);display:grid;place-items:center;font-weight:800;margin-bottom:20px}
.step h3{font-size:21px;margin:0 0 10px}
.step p{color:var(--muted);font-size:15px}
.step .art{margin-top:22px;background:var(--surface);border-radius:18px;padding:18px;min-height:130px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.mini-row{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:10px 12px;box-shadow:var(--shadow-sm)}
.mini-row .d{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:14px;flex:none}
.mini-row b{font-size:13px}
.mini-row small{font-size:11px;color:var(--muted)}
.mini-row .tag{margin-left:auto;font-size:11px;font-weight:800;border-radius:8px;padding:4px 8px}
.tag.teal{background:#dcf4f5;color:var(--teal)}
.tag.amber{background:#fff1cf;color:#8a5600}
.tag.green{background:#e0f3e4;color:#2c7a4c}
.approve-row{display:flex;gap:8px;margin-top:4px}
.approve-row button{flex:1;height:38px;border-radius:11px;border:1px solid var(--line);background:#fff;font-weight:700;font-size:12px;color:var(--ink)}
.approve-row .yes{background:var(--teal);color:#fff;border:0}
.approve-row .no{background:#fff4f1;color:#a84c42;border:0}

/* ---------- Benefits ---------- */
.benefits-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:52px}
.bcard{border-radius:var(--radius);padding:36px;border:1px solid var(--line)}
.bcard.kids{background:linear-gradient(160deg,#fff8ea,#fffdf8)}
.bcard.parents{background:linear-gradient(160deg,#eefafb,#f8fdfd)}
.bcard .badge{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:14px;padding:8px 14px;border-radius:99px;margin-bottom:22px}
.badge.amber{background:#fff0c9;color:#8a5600}
.badge.teal{background:#dcf4f5;color:var(--teal)}
.bcard h3{font-size:24px;margin:0 0 18px}
.blist{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.blist li{display:flex;gap:11px;font-size:15px;color:var(--ink-2);line-height:1.45}
.blist li svg{width:20px;height:20px;flex:none;margin-top:1px;color:var(--teal)}
.bcard.kids .blist li svg{color:var(--orange-deep)}

/* ---------- Feature strip ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
.feat{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:var(--shadow-sm)}
.feat .fi{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px}
.fi.teal{background:#dcf4f5;color:var(--teal)}
.fi.amber{background:#fff1cf;color:#9a6300}
.fi.green{background:#e0f3e4;color:#2c7a4c}
.feat h3{font-size:18px;margin:0 0 8px}
.feat p{font-size:14.5px;color:var(--muted)}

/* ---------- Download ---------- */
.download-card{
  max-width:940px;margin:0 auto;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-md);padding:44px;
  display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;
}
.dl-copy h2{font-size:clamp(26px,3vw,38px);margin:0 0 14px}
.dl-copy p{color:var(--muted);font-size:16px;margin:0 0 22px}
.soon-pill{display:inline-flex;align-items:center;gap:8px;background:#fff0c9;color:#8a5600;font-weight:800;font-size:13px;padding:9px 15px;border-radius:99px;margin-bottom:18px}
.dl-badges{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.appstore-badge{
  display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:#fff;
  border-radius:14px;padding:11px 20px;opacity:.55;pointer-events:none;
}
.appstore-badge svg{width:26px;height:26px}
.appstore-badge small{display:block;font-size:10px;opacity:.8;line-height:1}
.appstore-badge b{font-size:17px;line-height:1.1}
.dl-visual{display:grid;place-items:center}
.qr-holder{width:170px;height:170px;border-radius:22px;background:var(--surface);border:1px dashed var(--line);display:grid;place-items:center;text-align:center;color:var(--muted);font-size:13px;padding:16px}

/* ---------- Sign-in band ---------- */
.signin{background:linear-gradient(160deg,#0f2c2f,#15383b);color:#fff;border-radius:var(--radius);padding:44px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.signin .eyebrow{color:var(--aqua)}
.signin h2{font-size:clamp(26px,3vw,36px);color:#fff;margin:0 0 12px}
.signin p{color:#bcd2d3;font-size:16px;margin:0 0 8px}
.signin .split{display:grid;gap:14px}
.code-form label{display:block;font-size:13px;font-weight:700;color:#cfe0e1;margin-bottom:9px}
.code-input{display:grid;grid-template-columns:1fr auto;gap:10px}
.code-input input{
  height:56px;border:1px solid #3c5457;background:#1d3d40;color:#fff;border-radius:14px;
  padding:0 18px;text-transform:uppercase;letter-spacing:.22em;font-weight:800;font-size:17px;min-width:0;
}
.code-input input::placeholder{color:#6f898c;letter-spacing:.22em}
.code-input input:focus{outline:3px solid rgba(40,191,208,.4);border-color:var(--aqua)}
.code-hint{font-size:12.5px;color:#8fb0b2;margin-top:12px}
.code-hint a{color:var(--aqua);text-decoration:underline}
.or-line{display:flex;align-items:center;gap:14px;color:#7f9b9d;font-size:12px;margin:6px 0}
.or-line:before,.or-line:after{content:"";height:1px;background:rgba(255,255,255,.15);flex:1}

/* ---------- Pricing ---------- */
.price-card{max-width:720px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:40px}
.price-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:20px}
.price-head .plan{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-deep)}
.price-head h3{font-size:28px;margin:8px 0 6px}
.price-head p{color:var(--muted);font-size:15px;max-width:360px}
.price-amt{text-align:right}
.price-amt .amt{font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1}
.price-amt small{font-size:13px;color:var(--muted)}
.price-list{list-style:none;margin:26px 0;padding:24px 0;border-block:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:14px 26px}
.price-list li{display:flex;gap:10px;font-size:15px;color:var(--ink-2)}
.price-list li svg{width:19px;height:19px;color:var(--teal);flex:none;margin-top:2px}
.price-note{font-size:13px;color:var(--muted);margin-top:16px}

/* ---------- Trust / privacy ---------- */
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.tcard{background:var(--surface);border-radius:20px;padding:26px}
.tcard .ti{width:44px;height:44px;border-radius:13px;background:#fff;box-shadow:var(--shadow-sm);display:grid;place-items:center;color:var(--teal);margin-bottom:16px}
.tcard h3{font-size:17px;margin:0 0 8px}
.tcard p{font-size:14px;color:var(--muted)}

/* ---------- Closing ---------- */
.closing{text-align:center}
.closing img{width:64px;height:64px;border-radius:20px;margin:0 auto 22px}
.closing h2{font-size:clamp(30px,4vw,52px);margin:0 0 16px}
.closing p{color:var(--muted);font-size:18px;max-width:520px;margin:0 auto 28px}
.closing .hero-actions{justify-content:center}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);background:var(--surface)}
.footer-inner{max-width:var(--maxw);margin:0 auto;padding:52px 24px 40px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.footer-brand .brand{margin-bottom:14px}
.footer-brand p{color:var(--muted);font-size:14px;max-width:280px}
.fcol h4{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);margin:0 0 16px}
.fcol a{display:block;color:var(--muted);font-size:14.5px;margin-bottom:11px;transition:color .15s}
.fcol a:hover{color:var(--teal)}
.footer-bottom{border-top:1px solid var(--line)}
.footer-bottom .fb-inner{max-width:var(--maxw);margin:0 auto;padding:22px 24px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;color:var(--muted);font-size:12.5px}
.footer-bottom address{font-style:normal}

/* ---------- Legal / content pages ---------- */
.page-hero{background:var(--surface);border-bottom:1px solid var(--line)}
.page-hero .wrap{padding-block:56px}
.page-hero .eyebrow{margin-bottom:10px}
.page-hero h1{font-size:clamp(30px,4vw,46px);margin:0 0 10px}
.page-hero p{color:var(--muted);font-size:17px;max-width:640px}
.doc{max-width:760px;margin:0 auto;padding:56px 24px 90px}
.doc h2{font-size:22px;margin:38px 0 12px}
.doc h3{font-size:17px;margin:26px 0 8px}
.doc p,.doc li{color:var(--ink-2);font-size:16px;line-height:1.7}
.doc ul{padding-left:22px;margin:12px 0}
.doc li{margin-bottom:8px}
.doc a{color:var(--teal);text-decoration:underline;text-underline-offset:2px}
.doc .meta{color:var(--muted);font-size:14px}
.doc address{font-style:normal;color:var(--ink-2);line-height:1.7}
.callout{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:12px;padding:16px 20px;margin:22px 0}
.callout p{margin:0;font-size:15px}
.faq{border-top:1px solid var(--line);margin-top:8px}
.faq details{border-bottom:1px solid var(--line);padding:6px 0}
.faq summary{cursor:pointer;font-weight:700;font-size:16px;padding:16px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font-size:22px;color:var(--teal);font-weight:600}
.faq details[open] summary:after{content:"–"}
.faq details p{padding:0 0 18px;color:var(--muted)}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:940px){
  .nav{display:none}
  .header-cta .btn-signin-text{display:none}
  .nav-toggle{display:block}
  .hero-inner{grid-template-columns:1fr;gap:44px;padding-top:52px}
  .hero-visual{min-height:auto}
  /* Full-bleed hero → stack: copy on solid, photo as banner below */
  .hero-bg{flex-direction:column;min-height:auto}
  .hero-bg-media{position:relative;order:2;aspect-ratio:16/11;width:100%}
  .hero-bg-media .scrim{display:none}
  .hero-bg-inner{order:1;padding:44px 24px 8px}
  .hero-bg-inner .hero-copy{max-width:none}
  .preview-grid{grid-template-columns:1fr;gap:40px}
  .preview-visual{min-height:480px;order:-1}
  .evidence-grid{grid-template-columns:1fr;gap:36px}
  .steps{grid-template-columns:1fr}
  .benefits-grid{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:1fr}
  .download-card{grid-template-columns:1fr;text-align:center}
  .dl-badges{justify-content:center}
  .signin{grid-template-columns:1fr;gap:26px;padding:30px 22px}
  .signin .split{min-width:0}
  .signin .btn{white-space:normal}
  .code-input input{min-width:0}
  .step{padding:26px 22px}
  .mini-row{min-width:0}
  .mini-row>div{min-width:0}
  .approve-row{min-width:0}
  .approve-row button{min-width:0;padding:0}
  .trust-grid{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr 1fr}
  .price-list{grid-template-columns:1fr}
}
@media (max-width:720px){
  .section{padding:68px 0}
  .mobile-nav{display:none;flex-direction:column;gap:4px;padding:12px 24px 20px;border-bottom:1px solid var(--line);background:var(--bg)}
  .mobile-nav.open{display:flex}
  .mobile-nav a{padding:12px 0;color:var(--ink);font-weight:600;border-bottom:1px solid var(--line)}
  .mobile-nav a:last-child{border-bottom:0}
  .footer-inner{grid-template-columns:1fr 1fr}
  .price-head{flex-direction:column}
  .price-amt{text-align:left}
}
@media (max-width:460px){
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%}
  .footer-inner{grid-template-columns:1fr}
}
.mobile-nav{display:none}

/* ============================================================
   Dark mode
   ============================================================ */
@media (prefers-color-scheme:dark){
  :root{
    --ink:#e8f0f0;
    --ink-2:#c4d4d4;
    --muted:#8ba3a5;
    --bg:#0d1516;
    --surface:#141f21;
    --surface-2:#182527;
    --soft:#182527;
    --line:#25373a;
    --card:#131e20;
    --teal:#2fb1bc;
    --teal-dark:#249aa4;
    --orange-deep:#e0a53a;
  }
  body{background:var(--bg)}
  .site-header{background:rgba(13,21,22,.8);border-bottom-color:var(--line)}
  .hero:before{
    background:
      radial-gradient(60% 55% at 78% 18%,rgba(47,177,188,.14),transparent 70%),
      radial-gradient(46% 50% at 10% 88%,rgba(255,178,31,.08),transparent 70%),
      linear-gradient(180deg,#101b1c 0%,var(--bg) 60%);
  }
  .phone{background:#05201f}
  .phone .screen{background:#0f1a1b}
  .app-hello h3,.app-brand,.chore .txt b{color:#e8f0f0}
  .chore{background:#182527}
  .float-card{background:#182527}
  .float-card b{color:#e8f0f0}
  .step,.feat,.download-card,.price-card,.tcard,.mini-row{background:var(--card);border-color:var(--line)}
  .mini-row{background:#182527}
  .step .art{background:#0f1a1b}
  .bcard.kids{background:linear-gradient(160deg,#1c1b12,#141210)}
  .bcard.parents{background:linear-gradient(160deg,#0f2224,#0c1a1b)}
  .appstore-badge{background:#05201f}
  .btn-quiet{background:#182527;color:var(--ink)}
  .btn-quiet:hover{background:#1f2f31}
  .btn-dark{background:#243638}
  .ic.teal,.fi.teal,.step .num{background:rgba(47,177,188,.16)}
  .ic.amber,.fi.amber{background:rgba(255,178,31,.14)}
  .ic.green,.fi.green{background:rgba(115,185,128,.16)}
  .soon-pill{background:rgba(255,178,31,.16);color:#e0a53a}
  .qr-holder{background:#0f1a1b}
  .callout{background:#141f21}
  .tcard .ti{background:#0f1a1b}
}

/* ============================================================
   v3 — Chores & Goals
   ============================================================ */
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:52px}
.pillar{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow-sm)}
.pillar-icon{width:60px;height:60px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:30px;margin-bottom:20px;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.pillar-icon.teal{background:#dcf4f5}.pillar-icon.amber{background:#fff1cf}
.pillar h3{font-size:24px;margin:0 0 10px;display:flex;align-items:center;gap:10px}
.pillar-badge{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#a5711b;background:#fff0c9;padding:3px 10px;border-radius:99px}
.pillar>p{color:var(--muted);font-size:15.5px;line-height:1.6;margin:0 0 18px}
.pillar-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pillar-list li{position:relative;padding-left:24px;font-size:14.5px;color:var(--ink-2)}
.pillar-list li:before{content:"✓";position:absolute;left:0;top:0;color:var(--teal);font-weight:900}

.goal-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px}
.goal-cat{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:var(--shadow-sm)}
.goal-emoji{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:16px;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.goal-emoji.blue{background:#e6f0fb}.goal-emoji.coral{background:#ffe7df}.goal-emoji.green{background:#e0f3e4}.goal-emoji.amber{background:#fff1cf}
.goal-cat h3{font-size:18px;margin:0 0 12px}
.goal-cat ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.goal-cat li{font-size:13.5px;color:var(--muted);line-height:1.4;padding-left:16px;position:relative}
.goal-cat li:before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--teal);opacity:.55}

.goal-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.goal-note{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border-radius:18px;padding:20px}
.goal-note .gn-ic{font-size:26px;line-height:1;flex:none;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.goal-note b{display:block;font-size:15px;margin-bottom:4px}
.goal-note p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.5}

@media (max-width:940px){
  .pillars{grid-template-columns:1fr}
  .goal-cats{grid-template-columns:1fr 1fr}
  .goal-notes{grid-template-columns:1fr}
}
@media (max-width:560px){ .goal-cats{grid-template-columns:1fr} }

@media (prefers-color-scheme:dark){
  .pillar,.goal-cat{background:var(--card);border-color:var(--line)}
  .pillar-icon.teal,.goal-emoji.green{background:rgba(47,177,188,.16)}
  .pillar-icon.amber,.goal-emoji.amber{background:rgba(255,178,31,.14)}
  .goal-emoji.blue{background:rgba(90,159,230,.16)}
  .goal-emoji.coral{background:rgba(240,113,79,.16)}
  .pillar-badge{background:rgba(255,178,31,.16);color:#e0a53a}
  .goal-note{background:var(--surface)}
}

/* v3 — custom icon-set images inside tiles (replaces emoji) */
.ic,.d.ic,.pillar-icon,.goal-emoji{overflow:hidden}
.ic img,.d.ic img,.pillar-icon img,.goal-emoji img{
  width:100%;height:100%;object-fit:contain;display:block;
  transform:scale(1.22);   /* ~22% larger relative to the tile */
}

/* v3 — hero text readability on the full-bleed photo.
   The photo wall (left side, where the copy sits) is always bright, so the
   hero copy must stay DARK in both light and dark themes. The ONLY exception
   is the mobile stacked layout (<=940px), where the copy sits above the photo
   on the dark page background and must go light in dark mode. */
.hero-bg .eyebrow{color:#b76800}
.hero-bg .hero-copy h1{color:#15383b}
.hero-bg .hero-copy h1 .hl{color:#087f89}
.hero-bg .hero-copy .sub{color:#3f5a5d}
.hero-bg .trust-row .t{color:#284a4d}
.hero-bg .trust-row .t svg{color:#087f89}

@media (prefers-color-scheme:dark) and (max-width:940px){
  .hero-bg .eyebrow{color:#e0a53a}
  .hero-bg .hero-copy h1{color:#e8f0f0}
  .hero-bg .hero-copy h1 .hl{color:#2fb1bc}
  .hero-bg .hero-copy .sub{color:#8ba3a5}
  .hero-bg .trust-row .t{color:#c4d4d4}
  .hero-bg .trust-row .t svg{color:#2fb1bc}
}

/* ===== Family Guides ===== */
.guide-meta{color:var(--muted);font-size:14px;margin:14px 0 0;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.guide-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--muted);opacity:.55}
.doc .lead-p{font-size:18px;color:var(--ink-2);line-height:1.75}
.doc blockquote.pullquote{margin:30px 0;padding:6px 0 6px 22px;border-left:3px solid var(--aqua);
  font-size:21px;line-height:1.5;color:var(--ink);font-weight:600;font-style:normal}
.doc .callout{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin:26px 0}
.doc .callout p:last-child{margin-bottom:0}
.doc .callout .k{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.1em;
  font-weight:800;color:var(--orange-deep);margin-bottom:6px}
.guide-cta{background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:30px 26px;margin:44px 0 8px;text-align:center}
.guide-cta h3{font-size:21px;margin:0 0 8px;color:var(--ink)}
.guide-cta p{color:var(--muted);max-width:470px;margin:0 auto 20px;font-size:16px}
.doc .sources{font-size:14px;color:var(--muted)}
.doc .sources li{margin-bottom:7px;line-height:1.55}
.related{max-width:760px;margin:8px auto 0;padding:0 24px 90px}
.related h2{font-size:20px;margin:0 0 16px;color:var(--ink)}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.related-grid a{display:block;text-decoration:none;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:18px;transition:transform .16s ease,box-shadow .16s ease}
.related-grid a:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(21,56,59,.10)}
.related-grid .k{font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--orange-deep);font-weight:800}
.related-grid .h{display:block;margin-top:6px;color:var(--ink);font-weight:600;font-size:15px;line-height:1.35}
/* Guides index */
.guides-list{max-width:820px;margin:0 auto;padding:56px 24px 90px;display:grid;gap:18px}
.guide-card{display:block;text-decoration:none;background:var(--surface);border:1px solid var(--line);
  border-radius:20px;padding:26px 26px;transition:transform .16s ease,box-shadow .16s ease}
.guide-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(21,56,59,.10)}
.guide-card .k{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--orange-deep);font-weight:800}
.guide-card h2{font-size:22px;margin:8px 0 8px;color:var(--ink)}
.guide-card p{color:var(--muted);font-size:15.5px;line-height:1.6;margin:0}
.guide-card .rt{display:inline-block;margin-top:12px;color:var(--teal);font-weight:600;font-size:14px}
@media (max-width:760px){.related-grid{grid-template-columns:1fr}}

/* Guide banner image */
.guide-figure{max-width:900px;margin:0 auto;padding:30px 24px 0}
.guide-figure img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  border-radius:20px;display:block;border:1px solid var(--line)}
.guides-list .guide-figure,.guide-figure.hub{padding-top:36px}

/* Fix: button links inside article body must keep button styling, not .doc link styling */
.doc a.btn{text-decoration:none}
.doc a.btn-primary,.doc a.btn-dark{color:#fff}
.doc a.btn-primary:hover,.doc a.btn-dark:hover{color:#fff}
.doc a.btn-quiet{color:var(--ink)}

/* Guide & support pages: landing-style hero (full-bleed image, text left) */
.hero-bg.hero-guide{min-height:clamp(380px,52vh,540px)}
.hero-guide .hero-copy h1{font-size:clamp(30px,3.6vw,46px);margin:0 0 16px}
.hero-guide .hero-copy .sub{margin:0 0 16px}
.hero-bg .guide-meta{color:#4f686b}
@media (prefers-color-scheme:dark) and (max-width:940px){
  .hero-bg .guide-meta{color:#c4d4d4}
}

/* Home page — Family Guides grid (replaces FAQ) */
.home-guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.home-guide-grid a{display:block;text-decoration:none;background:var(--surface);
  border:1px solid var(--line);border-radius:18px;padding:24px 22px;
  transition:transform .16s ease,box-shadow .16s ease}
.home-guide-grid a:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(21,56,59,.10)}
.home-guide-grid .k{font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--orange-deep);font-weight:800}
.home-guide-grid h3{font-size:17.5px;line-height:1.32;margin:9px 0 8px;color:var(--ink)}
.home-guide-grid p{font-size:14px;line-height:1.55;color:var(--muted);margin:0}
@media (max-width:880px){.home-guide-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.home-guide-grid{grid-template-columns:1fr}}
.home-guides-cta{max-width:100%;white-space:normal;text-align:center}
/* Safety: decorative floating hero cards must never cause page scroll */
main{overflow-x:clip}

/* ===== Guide cards with thumbnails ===== */
/* Homepage grid — image on top */
.home-guide-grid a{padding:0;overflow:hidden;display:flex;flex-direction:column}
.home-guide-grid a img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.home-guide-grid .hg-body{padding:20px 22px 24px}

/* Guides hub — image on the left */
.guide-card{display:flex;align-items:stretch;padding:0;overflow:hidden;gap:0}
.guide-card img{width:264px;flex:none;object-fit:cover;align-self:stretch}
.guide-card .gc-body{padding:24px 28px}
.guide-card .gc-body h2{margin-top:0}
@media (max-width:640px){
  .guide-card{flex-direction:column}
  .guide-card img{width:100%;aspect-ratio:16/9;align-self:auto}
}

/* Related guides (foot of each article) — image on top */
.related-grid a{padding:0;overflow:hidden}
.related-grid a img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.related-grid a .k{display:block;padding:14px 16px 0}
.related-grid a .h{padding:6px 16px 16px}

/* Guides hub: image on the RIGHT, inner edge blended into the card background */
.guide-card{flex-direction:row-reverse}
.guide-card img{
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 32%);
          mask-image:linear-gradient(to right, transparent 0%, #000 32%);
}
@media (max-width:640px){
  .guide-card{flex-direction:column}
  .guide-card img{
    -webkit-mask-image:linear-gradient(to bottom, #000 70%, transparent 100%);
            mask-image:linear-gradient(to bottom, #000 70%, transparent 100%);
  }
}

/* Guides hub: anchor the crop to the right so subjects (on the right of each photo) aren't cut */
.guide-card img{object-position:right center}
@media (max-width:640px){ .guide-card img{object-position:center} }

/* ===== Family sign-in — simplified device connection ===== */
.signin .connect-opt h3{font-size:18px;color:#fff;margin:0 0 6px}
.signin .opt-sub{font-size:13.5px;color:#9fbcbe;line-height:1.55;margin:0}
.signin .code-error{font-size:13px;color:#ffb1a0;font-weight:600;margin-top:12px;line-height:1.5}
.signin .code-error[hidden]{display:none}
.signin-sep{height:1px;background:rgba(255,255,255,.15);margin:8px 0 2px}
.signin-connected-label{margin:0 0 10px}
.signin-note{margin-top:16px;line-height:1.65}
/* Stack the input and button on narrow screens so nothing overflows; keep large touch targets */
@media (max-width:560px){
  .code-input{grid-template-columns:1fr}
  .code-input .btn{width:100%}
}