:root{--ink:#172036;--muted:#65708a;--blue:#4657f2;--mint:#c6f5d8;--cream:#fbfaf4;--line:#e6e8f0;--coral:#ff7561}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:Manrope,system-ui,sans-serif}
.grid-shell{min-height:850px;background-color:#fcfcfb;background-image:linear-gradient(#e9edf1 1px,transparent 1px),linear-gradient(90deg,#e9edf1 1px,transparent 1px);background-size:32px 32px;border-bottom:1px solid var(--line)}
.wrap{width:min(1180px,calc(100% - 48px));margin:auto}
.nav{height:88px;display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:800;font-size:19px;text-decoration:none;color:var(--ink);letter-spacing:-.8px}
.brand-mark{display:inline-grid;place-items:center;color:white;background:var(--blue);clip-path:polygon(50% 0,62% 33%,100% 50%,62% 67%,50% 100%,38% 67%,0 50%,38% 33%);width:30px;height:30px;margin-right:7px}
.nav-links{display:flex;gap:30px}
.nav-links a{font-size:13px;text-decoration:none;color:var(--muted);font-weight:700}
.nav-cta{font-size:13px;font-weight:800;color:var(--ink);text-decoration:none;border:1px solid var(--ink);padding:11px 15px;border-radius:10px}
.nav-cta span{color:var(--blue)}
.hero{text-align:center;padding:55px 0 0}
.launch-note{margin:0 auto 30px;width:max-content;max-width:100%;border:1px solid #b8bedc;border-radius:999px;background:#fff;padding:8px 19px;font:500 11px 'DM Mono',monospace;color:#505977}
.launch-note span{color:#45c779;margin-right:8px}
.eyebrow{text-transform:uppercase;letter-spacing:1.6px;font:500 11px 'DM Mono',monospace;color:#65708a;margin:0 0 13px}
.hero h1,.how h2,.coverage h2{font-size:clamp(42px,6.1vw,78px);line-height:.96;letter-spacing:-5px;margin:0;font-weight:800}
.lead{max-width:620px;margin:24px auto;color:var(--muted);font-size:16px;line-height:1.65}
.hero-actions{display:flex;justify-content:center;gap:10px;margin:27px 0}
.button{padding:14px 19px;text-decoration:none;border-radius:12px;font-size:14px;font-weight:800}
.button-primary{color:#fff;background:var(--blue);box-shadow:0 8px 0 #2d3cbe}
.button-quiet{color:var(--ink);border:1px solid #cdd2df;background:#fff}
.button-quiet span{font-size:17px;margin-left:6px}
.hero-art{height:515px;max-width:820px;margin:35px auto 0;position:relative}
.phone{width:315px;height:445px;background:#fff;border:9px solid var(--ink);border-radius:37px 37px 0 0;position:absolute;left:50%;transform:translateX(-50%);bottom:0;box-shadow:13px 13px 0 rgba(23,32,54,.16);text-align:left;padding:15px 12px;z-index:2}
.phone-top{display:flex;justify-content:space-between;font-size:9px;font-weight:800;padding:0 5px}
.phone-top b{width:65px;height:7px;border-radius:99px;background:var(--ink)}
.chat-title{display:flex;align-items:center;gap:8px;padding:12px 4px;border-bottom:1px solid #edf0f4}
.avatar-group{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--mint);font-size:10px;font-weight:800}
.chat-title strong,.chat-title small{display:block}
.chat-title strong{font-size:11px}
.chat-title small,.message small{font-size:8px;color:#8992a8}
.dots{margin-left:auto;font-size:13px}
.message{max-width:210px;margin:15px 0;padding:10px 10px 7px;border-radius:12px;font-size:10px;line-height:1.4}
.message small{display:block;text-align:right;margin-top:3px}
.from-family{background:#f0f1f5}
.from-family span{color:#fa6854}
.guard-message{display:flex;gap:7px;background:#e5e7ff;border:1px solid #bcc3ff;border-radius:12px;padding:10px;margin:16px 0;font-size:9px;line-height:1.45}
.guard-message b{font-size:10px}
.guard-message p{margin:3px 0;color:#39447a}
.guard-icon{display:grid;place-items:center;width:22px;height:22px;background:var(--blue);color:white;border-radius:7px;flex:none}
.reply{background:var(--mint);margin-left:auto}
.composer{position:absolute;left:12px;right:12px;bottom:13px;border:1px solid #e5e8ef;border-radius:10px;padding:8px;font-size:9px;color:#9aa2b1}
.composer b{float:right;background:var(--blue);color:#fff;border-radius:6px;padding:1px 4px}
.shield{position:absolute;z-index:3;right:155px;top:190px;width:125px;height:145px;clip-path:polygon(50% 0,94% 17%,86% 75%,50% 100%,14% 75%,6% 17%);background:var(--mint);border:4px solid var(--ink);display:grid;place-items:center;box-shadow:7px 7px 0 #5e6cf3;transform:rotate(8deg)}
.shield div{font-size:44px}
.shield span{font:700 10px 'DM Mono';text-align:center;letter-spacing:1px;margin-top:-22px}
.sticker{position:absolute;z-index:4;font-weight:800;filter:drop-shadow(4px 4px 0 rgba(23,32,54,.14))}
.sticker span{font:700 9px 'DM Mono';display:block}
.sticker-link{left:105px;top:118px;font-size:37px;transform:rotate(-9deg);color:#4657f2}
.sticker-heart{right:105px;top:90px;color:#ff6881;font-size:57px}
.sticker-flag{right:90px;top:265px;font-size:33px;color:#ff9b58;transform:rotate(13deg)}
.sticker-spark{left:176px;top:312px;font-size:48px;color:#fed646}
.safety-orbit{position:absolute;border:2px dashed #a8b0cc;border-radius:50%;width:52px;height:52px}
.orbit-a{left:31px;top:230px}
.orbit-b{right:25px;top:177px}
.floor{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:45px;width:690px;background:#ffe0ad;border:3px solid var(--ink);border-radius:18px 18px 0 0;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:0 35px}
.tiny-family{font-size:20px;color:#ff7561;letter-spacing:2px}
.floor-copy{font:500 10px 'DM Mono';color:#766049}
.how{padding:120px 0;text-align:center}
.how h2{font-size:clamp(38px,5vw,64px);letter-spacing:-3.5px}
.how em{font-style:normal;color:var(--blue)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px;text-align:left}
.steps article{border:1px solid var(--line);border-radius:20px;padding:25px;background:#fff;position:relative}
.step-num{position:absolute;right:21px;color:#9aa3b7;font:500 11px 'DM Mono'}
.step-icon{font-size:28px;margin:13px 0 27px}
.steps h3{font-size:17px;margin:0 0 9px}
.steps p{font-size:13px;line-height:1.7;color:var(--muted);margin:0}
.coverage{background:#172036;color:#fff;padding:88px 0}
.coverage-inner{display:flex;justify-content:space-between;gap:80px;align-items:center}
.coverage .eyebrow{color:#aeb8d3}
.coverage h2{font-size:clamp(40px,5vw,67px)}
.chips{display:flex;flex-wrap:wrap;gap:10px;max-width:470px}
.chips span{padding:12px 15px;border:1px solid #49546e;border-radius:10px;font-size:13px;background:#202b45}
.footer{height:90px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted)}
.footer b{color:var(--blue);font-size:19px}
.footer a{color:var(--ink);font-weight:800;text-decoration:none}
@media(max-width:720px){.wrap{width:min(100% - 32px,1180px)}
.nav-links{display:none}
.nav{height:72px}
.hero{padding-top:36px}
.hero h1{letter-spacing:-2.8px}
.lead{font-size:14px}
.hero-art{transform:scale(.77);transform-origin:top center;margin-bottom:-110px}
.steps{grid-template-columns:1fr}
.coverage-inner{display:block}
.chips{margin-top:32px}
.footer{height:auto;padding:28px 0;gap:14px;flex-wrap:wrap}
.sticker-link{left:20px}
.sticker-heart{right:15px}
.shield{right:82px}
}

/* Desktop hero: copy and illustration share a single row. */
@media (min-width:721px){
  .hero{text-align:left;padding-top:46px}
  .launch-note{margin:0 0 18px}
  .hero-row{display:grid;grid-template-columns:minmax(360px,.85fr) minmax(500px,1.15fr);align-items:center;gap:18px}
  .hero-copy{padding-bottom:42px}
  .hero h1{font-size:clamp(48px,5vw,70px)}
  .lead{max-width:490px;margin-left:0;margin-right:0}
  .hero-actions{justify-content:flex-start}
  .hero-art{margin:0;width:100%}
  .sticker-link{left:24px}
  .sticker-heart{right:16px}
  .sticker-flag{right:0}
  .sticker-spark{left:88px}
  .orbit-a{left:0}
  .orbit-b{right:-18px}
  .shield{right:40px}
  .floor{width:min(100%,690px)}
}

@media (max-width:720px){
  .hero-row{display:block}
  .hero-copy{text-align:center}
  .lead{margin-left:auto;margin-right:auto}
  .hero-actions{justify-content:center}
}