/* ===========================================================
   MIKE — shared design system
   Colours are the approved brand hexes from the handover doc.
   =========================================================== */
:root{
  --navy:#061A2B; --navy-2:#0C2940; --navy-3:#0a2338; --white:#FFFFFF; --mist:#F4F8FB;
  --cyan:#25D9EA; --blue:#32A8FF; --purple:#7567F8; --pink:#E779E8;
  --ink-2:rgba(255,255,255,.72); --ink-3:rgba(255,255,255,.5);
  --rule:rgba(255,255,255,.12); --rule-soft:rgba(255,255,255,.07);
  --dark-ink:#0a1f30; --dark-ink-2:rgba(10,31,48,.68);
  --grad: linear-gradient(90deg, var(--cyan), var(--blue), var(--purple), var(--pink));
  --grad-soft: linear-gradient(135deg, rgba(37,217,234,.16), rgba(117,103,248,.14) 55%, rgba(231,121,232,.12));
  --display:"Manrope",system-ui,sans-serif;
  --body:"Inter",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--navy); color:var(--white); font-family:var(--body); font-size:16px; line-height:1.6; margin:0; overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--display); text-wrap:balance; letter-spacing:-.01em; margin:0; color:var(--white); font-weight:800}
p{margin:0}
a{color:inherit}
img{max-width:100%; display:block}
button{font-family:inherit}

.gutter{max-width:1240px; margin:0 auto; padding-inline:clamp(20px,5vw,56px)}
.band{padding-block:clamp(4rem,8vw,7rem)}
.band-tight{padding-block:clamp(2.5rem,5vw,4rem)}

.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

.eyebrow{font-family:var(--display); font-weight:700; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan); margin-bottom:1rem; display:flex; align-items:center; gap:.6rem}
.eyebrow::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--grad)}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6rem; font:800 14.5px/1 var(--display); padding:1rem 1.9rem; border-radius:999px; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s}
.btn-solid{background:var(--grad); color:#04101c; box-shadow:0 10px 30px -10px rgba(117,103,248,.55)}
.btn-solid:hover{transform:translateY(-2px) scale(1.015); box-shadow:0 16px 36px -8px rgba(117,103,248,.7)}
.btn-cta{padding:1.05rem 2.1rem; font-size:15px; animation:ctaPulse 2.8s ease-in-out infinite}
.btn-cta:hover{animation-play-state:paused}
@keyframes ctaPulse{
  0%,100%{box-shadow:0 10px 30px -10px rgba(117,103,248,.55), 0 0 0 0 rgba(37,217,234,.45)}
  50%{box-shadow:0 12px 34px -8px rgba(117,103,248,.8), 0 0 0 9px rgba(37,217,234,0)}
}
@media (prefers-reduced-motion: reduce){.btn-cta{animation:none}}
.btn-line{border-color:var(--rule); color:var(--white); background:rgba(255,255,255,.04); backdrop-filter:blur(6px)}
.btn-line:hover{border-color:rgba(255,255,255,.4); transform:translateY(-2px)}
.btn-ghost{color:var(--white); text-decoration:none; font:700 13.5px var(--display); display:inline-flex; align-items:center; gap:.4rem}
.btn-ghost:hover{color:var(--cyan)}

/* Top navigation */
.topbar{position:sticky; top:0; z-index:50; background:rgba(6,26,43,.72); backdrop-filter:blur(16px); border-bottom:1px solid var(--rule-soft)}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; padding-block:14px}
.brand{display:flex; align-items:center; gap:9px; text-decoration:none}
.brand img{height:30px; width:auto; object-fit:contain}
.brand span{font-family:var(--display); font-weight:800; font-size:19px; color:var(--white); letter-spacing:-.01em}
.topnav{display:flex; gap:1.9rem; font-size:14px; font-weight:600; color:var(--ink-2)}
.topnav a{text-decoration:none; transition:color .2s}
.topnav a:hover{color:var(--white)}
.topbar .cta-slot{display:flex; align-items:center; gap:1rem}
@media(max-width:920px){.topnav{display:none}}
.navtoggle{display:none; background:rgba(255,255,255,.05); border:1px solid var(--rule); color:var(--white); width:40px; height:40px; border-radius:10px; align-items:center; justify-content:center; cursor:pointer}
@media(max-width:920px){.navtoggle{display:flex}}
.navdrawer{display:none; flex-direction:column; gap:1px; background:var(--navy-2); border:1px solid var(--rule); border-radius:14px; margin:0 20px 14px; overflow:hidden}
.navdrawer.is-open{display:flex}
.navdrawer a{color:var(--white); text-decoration:none; padding:1rem 1.2rem; font-size:14.5px; font-weight:600; border-bottom:1px solid var(--rule-soft)}

/* Cards */
.panel{background:var(--navy-2); border:1px solid var(--rule); border-radius:20px}
.panel-glass{background:rgba(255,255,255,.045); border:1px solid var(--rule); border-radius:20px; backdrop-filter:blur(10px)}

/* Footer */
footer{border-top:1px solid var(--rule); padding-block:3.2rem 2.2rem; background:var(--navy)}
.ft__top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.4rem}
@media(max-width:820px){.ft__top{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ft__top{grid-template-columns:1fr}}
.ft__brand{display:flex; align-items:center; gap:9px; margin-bottom:1rem}
.ft__brand img{height:24px; width:auto; object-fit:contain}
.ft__brand span{font-family:var(--display); font-weight:800; font-size:17px}
footer p.tag{color:var(--ink-2); font-size:13.5px; max-width:32ch; line-height:1.6}
.ft__col h4{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:1rem; font-weight:700}
.ft__col nav{display:grid; gap:.65rem}
.ft__col nav a{color:var(--ink-2); text-decoration:none; font-size:13.5px}
.ft__col nav a:hover{color:var(--cyan)}
.ft__bottom{border-top:1px solid var(--rule-soft); margin-top:2.6rem; padding-top:1.3rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.8rem; font-size:12px; color:var(--ink-3)}
.ft__social{display:flex; gap:.9rem}
.ft__social a{color:var(--ink-2); text-decoration:none; font-weight:600; font-size:13px}
.ft__social a:hover{color:var(--cyan)}

/* Scroll reveal */
html.js [data-reveal]{opacity:0; transform:translateY(24px)}
html.js [data-reveal].is-in{opacity:1; transform:none; transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion: reduce){
  html.js [data-reveal]{opacity:1 !important; transform:none !important; transition:none !important}
  html{scroll-behavior:auto}
}

.skip{position:fixed; top:-60px; left:1rem; z-index:400; background:var(--cyan); color:#04101c; padding:.7rem 1.1rem; font-weight:800; font-family:var(--display); font-size:13px; text-decoration:none; transition:top .25s; border-radius:8px}
.skip:focus{top:1rem}

/* Disclaimer strip, used on Safety/Youth/legal pages */
.disclaimer{display:flex; gap:.9rem; align-items:flex-start; border:1px solid rgba(50,168,255,.35); background:rgba(50,168,255,.08); border-radius:14px; padding:1.1rem 1.3rem; font-size:13.5px; line-height:1.65; color:var(--ink-2)}
.disclaimer strong{color:var(--blue)}
.disclaimer svg{width:18px; height:18px; margin-top:1px; color:var(--blue); flex:none}

.pending{display:flex; gap:.9rem; align-items:flex-start; border:1px solid rgba(231,121,232,.35); background:rgba(231,121,232,.07); border-radius:14px; padding:1.1rem 1.3rem; font-size:13px; line-height:1.6; color:var(--ink-2); margin-bottom:1.6rem}
.pending strong{color:var(--pink)}
.pending svg{width:17px; height:17px; margin-top:1px; color:var(--pink); flex:none}

/* Stat tiles — shared by the homepage facts band and the Enterprise page */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:24px; overflow:hidden}
.stats.stats--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.stats{grid-template-columns:1fr}}
.stat{background:var(--navy-2); padding:clamp(1.8rem,3vw,2.4rem) 1.6rem; text-align:center}
.stat__num{font-family:var(--display); font-weight:800; font-size:clamp(2rem,4vw,2.7rem); background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; font-variant-numeric:tabular-nums}
.stat__label{margin-top:.7rem; font-size:13.5px; color:var(--ink-2); line-height:1.5}
.stat__source{margin-top:.6rem; font-size:11px; color:var(--ink-3); letter-spacing:.02em}

/* Ambient background orbs — slow drifting gradient glows */
.bg-orbs{position:fixed; inset:0; z-index:-3; overflow:hidden; pointer-events:none}
.bg-orbs span{position:absolute; border-radius:50%; filter:blur(90px); opacity:.28; will-change:transform}
.bg-orbs span:nth-child(1){width:440px; height:440px; background:var(--purple); top:-12%; left:-10%; animation:orbDrift 26s ease-in-out infinite}
.bg-orbs span:nth-child(2){width:380px; height:380px; background:var(--cyan); top:38%; right:-12%; animation:orbDrift 32s ease-in-out infinite -8s}
.bg-orbs span:nth-child(3){width:320px; height:320px; background:var(--pink); bottom:-10%; left:28%; animation:orbDrift 36s ease-in-out infinite -18s}
@keyframes orbDrift{0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(40px,-50px) scale(1.1)} 66%{transform:translate(-30px,30px) scale(.92)}}
@media (prefers-reduced-motion: reduce){.bg-orbs span{animation:none}}

/* Shared page-header block, used by every inner page */
.phead{padding-block:clamp(3rem,7vw,5rem) clamp(2rem,4vw,3rem); text-align:center}
.phead h1{font-size:clamp(2.2rem,5vw,3.4rem); max-width:22ch; margin-inline:auto}
.phead p{color:var(--ink-2); max-width:60ch; margin:1.2rem auto 0; font-size:16px; line-height:1.7}

/* Free vs Plus split cards */
.split{display:grid; grid-template-columns:1fr 1fr; gap:1.6rem}
@media(max-width:820px){.split{grid-template-columns:1fr}}
.splitcard{border-radius:24px; padding:clamp(1.8rem,3vw,2.6rem); position:relative; overflow:hidden}
.splitcard.free{background:var(--navy-2); border:1px solid var(--rule)}
.splitcard.plus{background:linear-gradient(155deg, rgba(37,217,234,.12), rgba(117,103,248,.16) 55%, rgba(231,121,232,.12)); border:1px solid rgba(117,103,248,.4)}
.splitcard .tier{font-family:var(--display); font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; padding:.4rem .9rem; border-radius:999px; display:inline-block; margin-bottom:1.2rem}
.splitcard.free .tier{background:rgba(255,255,255,.08); color:var(--ink-2)}
.splitcard.plus .tier{background:var(--grad); color:#04101c}
.splitcard h3{font-size:1.6rem}
.splitcard p.desc{color:var(--ink-2); margin-top:.8rem; font-size:14.5px; line-height:1.6}
.splitcard ul{list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:.75rem}
.splitcard li{display:flex; gap:.6rem; align-items:flex-start; font-size:14px; color:var(--ink-2)}
.splitcard li svg{width:16px; height:16px; margin-top:2px; flex:none}
.splitcard.free li svg{color:var(--cyan)}
.splitcard.plus li svg{color:var(--pink)}
.splitcard .btn{margin-top:1.8rem}

/* Trust / reassurance cards */
.trust{display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem}
@media(max-width:900px){.trust{grid-template-columns:repeat(2,1fr)}}
.tcard{padding:1.6rem}
.tcard svg{width:24px; height:24px; color:var(--cyan); margin-bottom:1rem}
.tcard h4{font-size:.98rem; margin-bottom:.5rem}
.tcard p{font-size:12.5px; color:var(--ink-2); line-height:1.55}

/* Real-life scenario cards */
.scenarios{display:grid; gap:1rem}
.scenario{padding:1.5rem 1.7rem; display:grid; grid-template-columns:auto 1fr; gap:1.2rem; align-items:flex-start}
.scenario__icon{width:38px; height:38px; border-radius:12px; background:var(--grad-soft); display:flex; align-items:center; justify-content:center; flex:none}
.scenario__icon svg{width:18px; height:18px; color:var(--cyan)}
.scenario p{font-size:14.5px; color:var(--ink-2); line-height:1.65}
.scenario strong{color:var(--white)}

/* Waitlist CTA band */
.waitlist{position:relative; overflow:hidden; border-radius:32px; background:linear-gradient(150deg, #0c2940 0%, #16335e 45%, #3a2e6e 78%, #5a2f5e 100%)}
.waitlist::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 70% at 80% 10%, rgba(231,121,232,.25), transparent 60%), radial-gradient(50% 60% at 10% 90%, rgba(37,217,234,.2), transparent 55%)}
.waitlist__inner{position:relative; padding:clamp(2.6rem,6vw,4.5rem); text-align:center}
.waitlist h2{font-size:clamp(2rem,5vw,3rem); max-width:18ch; margin-inline:auto}
.waitlist p{color:rgba(255,255,255,.8); max-width:50ch; margin:1.1rem auto 0; font-size:16px}
.waitform{margin-top:2.2rem; display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; max-width:520px; margin-inline:auto}
.waitform input[type=email]{flex:1; min-width:220px; padding:.95rem 1.2rem; border-radius:999px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:var(--white); font-size:14.5px}
.waitform input::placeholder{color:rgba(255,255,255,.55)}
.waitform .submitBtn{border:0; cursor:pointer}
.wait-status{margin-top:1rem; font-size:13px; color:rgba(255,255,255,.85); min-height:1.2em}
.waitform__note{margin-top:1rem; font-size:11.5px; color:rgba(255,255,255,.55); max-width:44ch; margin-inline:auto}

/* Related-pillars cross-link grid */
.related{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem}
@media(max-width:820px){.related{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.related{grid-template-columns:1fr}}
.related a{padding:1.3rem 1.4rem; display:flex; align-items:center; gap:.9rem; text-decoration:none; transition:transform .25s, border-color .25s}
.related a:hover{transform:translateY(-3px); border-color:rgba(255,255,255,.28)}
.related .icon{width:38px; height:38px; border-radius:11px; background:var(--grad-soft); display:flex; align-items:center; justify-content:center; flex:none}
.related .icon svg{width:18px; height:18px; color:var(--cyan)}
.related span{font-family:var(--display); font-weight:700; font-size:14px; color:var(--white)}

/* Illustrative-example badge, used on mockup cards */
.jp-example{font-family:var(--display); font-size:10px; letter-spacing:.1em; font-weight:700; color:var(--ink-3); border:1px solid var(--rule); padding:.3rem .6rem; border-radius:999px}

/* "Your connections" dashboard mockup, used by MIKE Circle sections */
.circle-panel-wrap{max-width:640px; margin-inline:auto}
.circle-panel{padding:clamp(1.5rem,3vw,2rem)}
.circle-panel__head{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:.4rem}
.circle-panel__head h3{font-size:15px}
.circle-row{display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:center; padding:1rem 0; border-top:1px solid var(--rule-soft)}
.circle-row__avatar{width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none}
.circle-row__avatar svg{width:19px; height:19px; color:#fff}
.circle-row__info strong{display:block; font-size:14px; color:var(--white)}
.circle-row__info .role{font-size:11.5px; color:var(--ink-3)}
.circle-row__shared{margin-top:.5rem; display:flex; gap:.4rem; flex-wrap:wrap}
.circle-chip{font-family:var(--display); font-size:10.5px; font-weight:700; color:var(--ink-2); background:rgba(255,255,255,.06); border:1px solid var(--rule); padding:.28rem .65rem; border-radius:999px; white-space:nowrap}
.circle-chip.off{color:var(--ink-3); border-style:dashed}
.circle-toggle{width:38px; height:21px; border-radius:999px; position:relative; flex:none}
.circle-toggle.on{background:var(--grad)}
.circle-toggle.off{background:rgba(255,255,255,.12)}
.circle-toggle i{position:absolute; top:2.5px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.4)}
.circle-toggle.on i{left:20px}
.circle-toggle.off i{left:3px}
.circle-panel__foot{margin-top:1.3rem; padding-top:1.2rem; border-top:1px solid var(--rule-soft); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.9rem}
.circle-add{font-family:var(--display); font-weight:700; font-size:12.5px; color:var(--ink-2); border:1px dashed var(--rule); border-radius:999px; padding:.6rem 1rem; display:inline-flex; align-items:center; gap:.4rem}
.circle-add svg{width:14px; height:14px}
.circle-panel__foot p{font-size:11.5px; color:var(--ink-3); max-width:26ch; margin:0}
.circle-note{text-align:center; font-size:11.5px; color:var(--ink-3); margin-top:1.1rem}

/* Interactive slider calculators */
.calc{padding:clamp(1.8rem,3vw,2.4rem); border-radius:24px}
.calc__label{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; font-family:var(--display); font-weight:700; font-size:14px; flex-wrap:wrap}
.calc__value{font-size:1.5rem; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; white-space:nowrap}
.calc input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:999px; margin:1.3rem 0 .4rem; background:linear-gradient(90deg, var(--cyan) 0%, var(--purple) var(--fill,50%), rgba(255,255,255,.12) var(--fill,50%), rgba(255,255,255,.12) 100%); cursor:pointer; outline-offset:6px}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:24px; height:24px; border-radius:50%; background:var(--white); border:3px solid var(--purple); box-shadow:0 4px 12px rgba(0,0,0,.45); cursor:pointer}
.calc input[type=range]::-moz-range-thumb{width:24px; height:24px; border-radius:50%; background:var(--white); border:3px solid var(--purple); box-shadow:0 4px 12px rgba(0,0,0,.45); cursor:pointer}
.calc input[type=range]::-moz-range-track{height:8px; border-radius:999px; background:rgba(255,255,255,.12)}
.calc input[type=range]::-moz-range-progress{height:8px; border-radius:999px; background:linear-gradient(90deg, var(--cyan), var(--purple))}
.calc__scale{display:flex; justify-content:space-between; font-size:10.5px; color:var(--ink-3)}
.calc__results{display:grid; gap:.7rem; margin-top:1.8rem}
.calc__result{display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:center; padding:.9rem 1.1rem; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid var(--rule); transition:border-color .3s, background .3s}
.calc__result.is-reached{border-color:rgba(37,217,234,.4); background:rgba(37,217,234,.07)}
.calc__result .n{font-family:var(--display); font-weight:800; font-size:1.05rem; color:var(--white); white-space:nowrap; min-width:5.5em}
.calc__result p{font-size:13px; color:var(--ink-2); margin:0; line-height:1.45}
.calc__source{font-size:11px; color:var(--ink-3); margin-top:1.3rem; line-height:1.65}
.calc__readout{padding:1rem 1.2rem; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid var(--rule); margin-top:1.6rem}
.calc__readout .big{font-family:var(--display); font-weight:800; font-size:1.3rem; color:var(--white)}
.calc__readout p{font-size:13.5px; color:var(--ink-2); margin-top:.4rem; line-height:1.55}
.calc__bac{height:10px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; margin-top:.9rem}
.calc__bac i{display:block; height:100%; background:linear-gradient(90deg, var(--cyan), var(--pink)); border-radius:999px; transition:width .3s}
.bac-labels{display:flex; justify-content:space-between; font-size:10.5px; color:var(--ink-3); margin-top:.4rem}

/* Numbered timeline list */
.tl{list-style:none; margin:0; padding:0}
.tl li{display:grid; grid-template-columns:3.5rem 1fr; gap:1.4rem; padding:1.6rem 0; border-top:1px solid var(--rule); align-items:start}
.tl li:last-child{border-bottom:1px solid var(--rule)}
.tl .num{font-family:var(--display); font-weight:800; font-size:1.3rem; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.tl h3{font-size:1.15rem}
.tl p{font-size:14.5px; color:var(--ink-2); margin-top:.5rem; line-height:1.65; max-width:64ch}