.families-page{background:#fffdf8;color:var(--navy)}
.families-page .navbar{position:absolute}
.families-nav-current{position:relative;color:#0d8e86!important}
.families-nav-current:after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:3px;border-radius:3px;background:#15a097}
.families-kicker{display:inline-block;color:#7658ca;font:900 12px/1 system-ui,sans-serif;letter-spacing:.7px;text-transform:uppercase;background:#f0eafe;border-radius:999px;padding:9px 13px}
.families-hero{position:relative;overflow:hidden;padding:128px 48px 74px;background:
radial-gradient(circle at 12% 15%,rgba(242,182,76,.16),transparent 27%),
radial-gradient(circle at 87% 80%,rgba(18,155,147,.13),transparent 30%),
#fffdf8}
.families-hero-inner{width:min(1400px,100%);margin:0 auto;display:grid;grid-template-columns:.92fr 1.08fr;gap:46px;align-items:center}
.families-hero-copy{position:relative;z-index:2;padding-left:18px}
.families-hero h1{margin:22px 0 0;max-width:680px;font-size:70px;line-height:1.01;letter-spacing:-3.2px;color:var(--navy)}
.families-hero h1 span{color:#6351be}
.families-hero-copy>p{max-width:650px;margin:24px 0 0;color:#536d86;font:400 21px/1.55 system-ui,sans-serif}
.families-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.families-btn{min-height:58px;border-radius:20px;padding:0 25px;display:inline-flex;align-items:center;justify-content:center;gap:12px;font-size:17px;font-weight:900;border:0}
.families-btn.primary{background:linear-gradient(180deg,#765fd3,#624bbd);color:#fff;box-shadow:0 12px 28px rgba(98,75,189,.18)}
.families-btn.secondary{background:#fff;color:#123b57;border:2px solid #75aeb7}
.families-btn.pending{background:#eef2f4;color:#758793;cursor:default}
.families-btn.pending small{font:800 9px/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.45px}
.families-store{margin-top:28px;display:flex;align-items:center;gap:10px;color:#163a55}
.families-store .play-mark{transform:scale(.75);transform-origin:center}
.families-store small{display:block;font:800 9px/1 system-ui,sans-serif;letter-spacing:.6px}
.families-store strong{display:block;font:900 21px/1.05 system-ui,sans-serif}
.families-store>div:last-child>span{display:block;margin-top:4px;color:#758a9c;font:500 11px/1.2 system-ui,sans-serif}
.families-hero-art{
  position:relative;z-index:2;overflow:hidden;border-radius:44px;
  aspect-ratio:1.275/1;box-shadow:0 26px 60px rgba(5,45,69,.13)
}
.families-hero-art img{
  width:100%;height:100%;display:block;object-fit:cover;object-position:center
}
.families-orbit{position:absolute;border:3px dashed rgba(122,92,201,.14);border-radius:50%;pointer-events:none}
.families-orbit.one{width:400px;height:400px;right:-120px;top:-120px}
.families-orbit.two{width:240px;height:240px;left:-95px;bottom:-115px;border-color:rgba(18,155,147,.16)}

.families-heading{text-align:center;max-width:880px;margin:0 auto}
.families-heading h2,.families-follow h2,.families-context h2,.families-multiple h2,.families-school-bridge h2,.families-final h2{margin:16px 0 0;font-size:50px;line-height:1.04;letter-spacing:-2px}
.families-heading h2 span,.families-follow h2 span,.families-context h2 span,.families-multiple h2 span,.families-school-bridge h2 span,.families-final h2 span{color:#6751c2}
.families-heading>p{margin:15px auto 0;max-width:780px;color:#60758d;font:400 18px/1.55 system-ui,sans-serif}

.families-journey{padding:82px 56px 102px;background:#fff}
.journey-grid{width:min(1360px,100%);margin:54px auto 0;display:grid;grid-template-columns:1fr 54px 1fr 54px 1fr;gap:0;align-items:start}
.journey-step{min-width:0}
.journey-image{
  overflow:hidden;border-radius:28px;aspect-ratio:1.79/1;
  box-shadow:0 18px 45px rgba(5,45,69,.09);background:#fff
}
.journey-image img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.journey-copy{display:grid;grid-template-columns:46px 1fr;gap:14px;margin-top:20px;align-items:start}
.journey-number{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;font:900 18px/1 system-ui,sans-serif}
.journey-number.amber{background:#f1ad2f}.journey-number.purple{background:#7557ca}.journey-number.blue{background:#418ad7}
.journey-copy h3{margin:0;font-size:20px;line-height:1.2}.journey-copy p{margin:6px 0 0;color:#61768d;font:400 15px/1.5 system-ui,sans-serif}
.journey-connector{align-self:center;justify-self:center;color:#6a58c7;font-size:38px;margin-top:118px}

.families-follow{padding:88px 56px 96px;background:linear-gradient(180deg,#f5f0ff 0%,#fbf9ff 100%)}
.follow-intro{width:min(1280px,100%);margin:0 auto 40px}
.follow-intro h2{max-width:800px}.follow-intro>p{max-width:670px;color:#60758d;font:400 17px/1.55 system-ui,sans-serif}
.follow-grid{width:min(1280px,100%);margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.follow-card{min-height:215px;background:rgba(255,255,255,.82);border:1px solid rgba(90,67,170,.1);border-radius:26px;padding:24px;box-shadow:0 12px 30px rgba(54,37,113,.05)}
.follow-icon{width:50px;height:50px;border-radius:17px;display:grid;place-items:center;font-size:22px;font-weight:900;margin-bottom:18px}
.follow-icon.mood{background:#fff0bd;color:#e7a621}.follow-icon.need{background:#eee7ff;color:#7357ca}.follow-icon.school{background:#dff4ef;color:#129b93}.follow-icon.alert{background:#ffe8d4;color:#e7863c}.follow-icon.report{background:#e5eefc;color:#4686d0}
.follow-card h3{margin:0;font-size:17px;line-height:1.2}.follow-card p{margin:9px 0 0;color:#667a90;font:400 14px/1.45 system-ui,sans-serif}

.families-context{width:min(1380px,calc(100% - 80px));margin:86px auto;display:grid;grid-template-columns:1fr 1.02fr;gap:60px;align-items:center;background:linear-gradient(135deg,#fff5df,#f7faf6);border-radius:42px;padding:46px 54px}
.context-art{overflow:hidden;border-radius:34px;box-shadow:0 24px 52px rgba(22,53,78,.13);background:#fff5df;aspect-ratio:16/10}
.context-art picture{display:block;width:100%;height:100%}
.context-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.context-copy>p{color:#5d738a;font:400 17px/1.58 system-ui,sans-serif}
.context-copy ul{list-style:none;padding:0;margin:24px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:13px 22px}
.context-copy li{position:relative;padding-left:28px;color:#294d64;font:700 14px/1.4 system-ui,sans-serif}
.context-copy li:before{content:"✓";position:absolute;left:0;top:-2px;width:20px;height:20px;border-radius:50%;background:#d9f4ed;color:#0d927f;display:grid;place-items:center;font-size:12px}

.families-multiple{padding:90px 56px;display:grid;grid-template-columns:.9fr 1.1fr;gap:75px;align-items:center;width:min(1320px,100%);margin:0 auto}
.multiple-copy>p{margin-top:20px;color:#61758c;font:400 17px/1.55 system-ui,sans-serif;max-width:570px}
.kid-switcher{background:#f8f4ff;border:1px solid #e9e0ff;border-radius:34px;padding:22px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kid-chip{border:1px solid #e1d8f7;background:#fff;border-radius:22px;padding:14px 16px;display:flex;align-items:center;gap:12px;text-align:left;color:#183c56;font:inherit}
.kid-chip.active{border-color:#8168d4;box-shadow:0 10px 24px rgba(104,81,194,.12)}.kid-chip:disabled{opacity:.8}
.kid-avatar{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:#fff;font-weight:900}.kid-avatar.amber{background:#eeb04a}.kid-avatar.teal{background:#24998f}
.kid-chip strong{display:block;font-size:15px}.kid-chip small{display:block;margin-top:3px;color:#768999;font:500 11px/1.2 system-ui,sans-serif}
.kid-context-card{grid-column:1/-1;background:linear-gradient(135deg,#7059c8,#5f4ab6);color:#fff;border-radius:25px;padding:24px}
.context-status{display:inline-block;background:rgba(255,255,255,.16);border-radius:999px;padding:6px 9px;font:800 9px/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.5px}
.kid-context-card strong{display:block;font-size:26px;margin-top:13px}.kid-context-card p{margin:7px 0 0;color:#eeeaff;font:400 14px/1.45 system-ui,sans-serif}

.families-school-bridge{width:min(1320px,calc(100% - 80px));margin:20px auto 90px;background:linear-gradient(135deg,#e9f8f5,#fff7e8);border-radius:38px;padding:48px 54px;display:grid;grid-template-columns:1fr auto;gap:50px;align-items:center}
.families-school-bridge h2{font-size:40px;max-width:900px}.families-school-bridge p{max-width:850px;color:#5f748b;font:400 16px/1.55 system-ui,sans-serif}
.bridge-link{white-space:nowrap}

.families-final{padding:96px 42px;background:linear-gradient(160deg,#082f49,#103d58);color:#fff;text-align:center}
.families-final-inner{max-width:850px;margin:0 auto}.families-final .families-kicker{background:rgba(255,255,255,.1);color:#d9d1ff}
.families-final h2{color:#fff;font-size:55px}.families-final h2 span{color:#78d3cb}.families-final p{color:#d3e0e7;font:400 18px/1.55 system-ui,sans-serif;margin:18px auto 0;max-width:700px}
.families-final-actions{display:flex;justify-content:center;gap:14px;margin-top:30px}

@media(max-width:1100px){
  .families-hero h1{font-size:56px}
  .families-hero-inner{grid-template-columns:1fr 1fr;gap:24px}
  .follow-grid{grid-template-columns:repeat(3,1fr)}
  .families-context{grid-template-columns:1fr;gap:28px}
  .context-art{max-width:680px;margin:0 auto;width:100%}
  .families-multiple{gap:40px}
  .families-school-bridge{grid-template-columns:1fr}
  .bridge-link{justify-self:start}
}
@media(max-width:720px){
  .families-page .navbar{height:74px}
  .families-nav-current:after{display:none}
  .families-hero{padding:98px 18px 42px}
  .families-hero-inner{display:flex;flex-direction:column;gap:26px}
  .families-hero-copy{padding:0}
  .families-hero h1{font-size:43px;letter-spacing:-2px;line-height:1.02;margin-top:16px}
  .families-hero-copy>p{font-size:16px;line-height:1.5;margin-top:18px}
  .families-hero-actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:23px}
  .families-btn{width:100%;min-height:54px;border-radius:18px;font-size:16px}
  .families-store{margin-top:20px}
  .families-hero-art{
    width:calc(100% + 8px);margin:0 -4px;border-radius:28px;
    aspect-ratio:1.08/1
  }
  .families-hero-art img{object-position:center 42%}
  .families-heading h2,.families-follow h2,.families-context h2,.families-multiple h2,.families-final h2{font-size:36px;letter-spacing:-1.4px}
  .families-heading>p{font-size:15px}
  .families-journey{padding:60px 18px 72px}
  .journey-grid{display:flex;flex-direction:column;gap:0;margin-top:34px}
  .journey-step{width:100%;background:#fff;border:1px solid rgba(5,45,69,.08);border-radius:26px;padding:9px 9px 18px;box-shadow:0 12px 28px rgba(5,45,69,.05)}
  .journey-image{border-radius:20px}
  .journey-copy{grid-template-columns:40px 1fr;padding:0 8px}
  .journey-number{width:38px;height:38px;font-size:16px}
  .journey-copy h3{font-size:18px}.journey-copy p{font-size:14.5px}
  .journey-connector{width:3px;height:34px;margin:4px auto;font-size:0;background:#b6aae5;border-radius:4px;position:relative}
  .journey-connector:after{content:"";position:absolute;bottom:0;left:50%;width:10px;height:10px;border-right:3px solid #806bd0;border-bottom:3px solid #806bd0;transform:translateX(-50%) rotate(45deg)}
  .families-follow{padding:62px 18px 68px}
  .follow-grid{grid-template-columns:1fr;gap:10px}
  .follow-card{min-height:0;padding:19px;display:grid;grid-template-columns:48px 1fr;column-gap:13px;align-items:start}
  .follow-icon{width:44px;height:44px;margin:0;grid-row:1/3}.follow-card p{margin-top:5px}
  .families-context{width:calc(100% - 36px);margin:56px auto;padding:25px 20px;border-radius:28px}
  .context-art{aspect-ratio:4/3}
  .context-copy ul{grid-template-columns:1fr}
  .families-multiple{padding:58px 18px;display:flex;flex-direction:column;gap:30px}
  .kid-switcher{width:100%;grid-template-columns:1fr;padding:14px;border-radius:26px}
  .kid-context-card{grid-column:auto}
  .families-school-bridge{width:calc(100% - 36px);margin:8px auto 60px;padding:28px 22px;border-radius:28px;gap:24px}
  .families-school-bridge h2{font-size:33px}
  .bridge-link{width:100%}
  .families-final{padding:68px 18px}.families-final h2{font-size:39px}.families-final p{font-size:15.5px}
  .families-final-actions{display:grid;grid-template-columns:1fr;gap:10px}
}
@media(max-width:390px){.families-hero h1{font-size:39px}.families-heading h2,.families-follow h2,.families-context h2,.families-multiple h2,.families-final h2{font-size:33px}}