@font-face{font-family:"Bricolage";src:url(fonts/bricolage-wght.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Atkinson";src:url(fonts/atkinson-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson";src:url(fonts/atkinson-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --dusk:#1A1535; --dusk-2:#251E4A; --dusk-3:#372D68;
  --paper:#F5F3FB; --white:#FFFFFF; --ink:#1D1838; --muted:#5A5480; --line:#DDD8EE;
  --ping:#FF4D94; --ping-deep:#C81F66; --done:#4FE0B0; --done-deep:#0B7F5B;
  --display:"Bricolage",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Atkinson",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(18px,5vw,56px);
  --max:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.6 var(--body)}
img,svg{max-width:100%}
a{color:var(--ping-deep)}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--ping);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--display);line-height:1.08;letter-spacing:-.02em;margin:0}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-999px;top:8px;background:var(--white);color:var(--ink);padding:10px 14px;border-radius:8px;z-index:10}
.skip:focus{left:8px}

/* header */
.site-head{background:var(--dusk);color:#F3EFFF}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;padding-bottom:16px}
.logo{font:800 1.5rem/1 var(--display);letter-spacing:-.03em;color:#F3EFFF;text-decoration:none;display:inline-flex;align-items:center;gap:2px}
.logo i{width:.42em;height:.42em;border-radius:50%;background:var(--ping);display:inline-block;margin-left:2px;transform:translateY(-.5em)}
.nav{display:flex;align-items:center;gap:6px 22px;flex-wrap:wrap;justify-content:flex-end}
.nav a{color:#D8D2F2;text-decoration:none;font-size:16px}
.nav a:hover{color:#fff;text-decoration:underline}
.nav a[aria-current=page]{color:#fff;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.btn{display:inline-block;background:var(--ping);color:var(--dusk);font:700 1.05rem/1 var(--body);padding:15px 24px;border-radius:12px;text-decoration:none;border:0;cursor:pointer}
.btn:hover{background:#FF73AD;text-decoration:none}
.btn.small{padding:10px 16px;font-size:15px}
.btn.light{background:var(--ping-deep);color:#fff}
.btn.light:hover{background:#A9184F}
.nav .btn{color:var(--dusk)}
.nav .btn:hover{color:var(--dusk);text-decoration:none}
@media (max-width:640px){.nav a.opt{display:none}}

/* hero */
.hero{background:var(--dusk);color:#F3EFFF;padding:clamp(28px,6vw,72px) 0 clamp(48px,8vw,96px);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,5vw,64px);align-items:center}
.hero h1{font-size:clamp(2.5rem,6.4vw,4.9rem);font-weight:800;font-stretch:100%;margin-bottom:22px}
.hero .lede{font-size:clamp(1.1rem,2vw,1.3rem);color:#D8D2F2;max-width:34em;margin-bottom:30px}
.hero .cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.hero .fine{color:#B9B1DE;font-size:15px;margin:0}
@media (max-width:820px){.hero .wrap{grid-template-columns:1fr}.hero .phone-wrap{order:-1}}

/* lock screen */
.phone-wrap{display:flex;justify-content:center}
.lock{width:min(310px,100%);aspect-ratio:9/18.4;border-radius:44px;padding:18px 14px;background:linear-gradient(170deg,var(--dusk-3),#241C4C 60%,#1F1842);border:3px solid #4A3F82;box-shadow:0 30px 60px rgba(0,0,0,.35);position:relative}
.lock:before{content:"";position:absolute;top:12px;left:50%;width:84px;height:22px;margin-left:-42px;border-radius:12px;background:#120E27}
.lock .time{font:300 4.2rem/1 var(--display);text-align:center;margin-top:46px;letter-spacing:-.03em}
.lock .day{text-align:center;color:#C9C1EA;font-size:15px;margin:4px 0 26px}
.note{background:rgba(255,255,255,.13);border-radius:18px;padding:10px 12px;margin-bottom:10px;display:grid;grid-template-columns:30px 1fr;gap:3px 10px;font-size:14.5px;line-height:1.35}
.note .ico{grid-row:1 / span 2;width:30px;height:30px;border-radius:8px;background:var(--ping);color:var(--dusk);font:800 15px/30px var(--display);text-align:center}
.note .top{display:flex;justify-content:space-between;color:#C9C1EA;font-size:12.5px}
.note b{font-weight:700;color:#fff}
.note.done .ico{background:var(--done)}
@keyframes arrive{from{opacity:0;transform:translateY(-14px) scale(.97)}to{opacity:1;transform:none}}
.note{animation:arrive .5s cubic-bezier(.2,.8,.2,1) both}
.note:nth-of-type(1){animation-delay:.6s}
.note:nth-of-type(2){animation-delay:1.9s}
.note:nth-of-type(3){animation-delay:3.2s}
@media (prefers-reduced-motion:reduce){.note{animation:none}html{scroll-behavior:auto}}

/* sections */
section{padding:clamp(48px,8vw,96px) 0}
.sec-head{max-width:36em;margin-bottom:clamp(28px,5vw,48px)}
.sec-head h2{font-size:clamp(1.9rem,4vw,3rem);font-weight:800;margin-bottom:12px}
.sec-head p{color:var(--muted);font-size:1.1rem;margin:0}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0 28px;counter-reset:s}
.steps li{position:relative;padding-top:56px;counter-increment:s}
.steps li:before{content:counter(s);position:absolute;top:0;left:0;width:40px;height:40px;border-radius:50%;background:var(--dusk);color:#fff;font:800 1.1rem/40px var(--display);text-align:center;z-index:1}
.steps li:after{content:"";position:absolute;top:19px;left:48px;right:-28px;height:2px;background:var(--line)}
.steps li:last-child:after{display:none}
.steps h3{font-size:1.2rem;font-weight:700;margin-bottom:6px}
.steps p{color:var(--muted);font-size:1rem;margin:0}
@media (max-width:820px){
  .steps{grid-template-columns:1fr;gap:26px}
  .steps li{padding:0 0 0 58px;min-height:44px}
  .steps li:after{top:44px;bottom:-26px;left:19px;right:auto;width:2px;height:auto}
}

/* features */
.features{background:var(--white)}
.features .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,6vw,80px);align-items:start}
.flist{margin:0;padding:0;list-style:none}
.flist li{padding:16px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:10.5em 1fr;gap:4px 20px}
.flist li:last-child{border-bottom:1px solid var(--line)}
.flist b{font:700 1.08rem/1.35 var(--display)}
.flist span{color:var(--muted)}
@media (max-width:820px){.features .wrap{grid-template-columns:1fr}.flist li{grid-template-columns:1fr}}
@media (max-width:520px){.flist li{padding:14px 0}}

/* app mock (draws the real screen) */
.mock-wrap{position:sticky;top:24px;display:flex;flex-direction:column;align-items:center;gap:12px}
@media (max-width:820px){.mock-wrap{position:static}}
.mock{width:min(300px,100%);border-radius:34px;border:3px solid #2C3A5F;background:#0A1428;color:#E8EEF8;padding:14px 12px 16px;font:13.5px/1.35 var(--body);box-shadow:0 18px 40px rgba(29,24,56,.25)}
.mock .bar{display:flex;align-items:center;gap:8px;padding:4px 6px 10px;border-bottom:1px solid #2A3B5E;margin-bottom:10px;font-weight:700}
.mock .bar span.d{width:9px;height:9px;border-radius:50%;background:#2ECC8F}
.mock .bar em{margin-left:auto;color:#C8AA6E;font-style:normal;font-variant-numeric:tabular-nums}
.mock .turn{background:#121E36;border:1px solid #C8AA6E;border-radius:12px;padding:9px 11px;margin-bottom:10px}
.mock .turn b{color:#F0E6D2}
.mock .cols{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mock h4{margin:0 0 5px;font:700 11.5px/1.2 var(--body);color:#8A99B5}
.mock .row{background:#121E36;border-radius:8px;padding:5px 8px;margin-bottom:4px;font-size:12.5px;display:flex;justify-content:space-between;gap:6px}
.mock .row i{font-style:normal;color:#8A99B5;font-size:11px}
.mock .row.me{outline:1px solid #C8AA6E}
.mock .ban{display:inline-block;background:#1A2A48;color:#8A99B5;border-radius:6px;padding:3px 8px;margin:0 4px 4px 0;font-size:12px;text-decoration:line-through}
.mock .tabs{display:flex;gap:5px;margin:12px 0 10px}
.mock .tabs span{flex:1;text-align:center;padding:7px 0;border-radius:9px;background:#121E36;border:1px solid #2A3B5E;color:#8A99B5;font-weight:700;font-size:12px}
.mock .tabs span.on{border-color:#C8AA6E;color:#F0E6D2;background:#1A2A48}
.mock .lockbtn{background:#C8AA6E;color:#1A1405;text-align:center;font:800 15px/1 var(--display);padding:13px;border-radius:12px}
.cap{color:var(--muted);font-size:14px;text-align:center;margin:0;max-width:280px}

/* pricing */
.pricing .cols{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--ink)}
.pricing .col{padding:26px 0 8px}
.pricing .col+.col{padding-left:clamp(20px,4vw,48px);border-left:1px solid var(--line)}
.pricing h3{font-size:1.5rem;font-weight:800;margin-bottom:4px}
.pricing .price{font:700 1.15rem/1.4 var(--display);margin-bottom:16px}
.pricing ul{margin:0 0 14px;padding-left:1.2em}
.pricing li{margin:6px 0}
.pricing .early{margin-top:22px;padding:14px 18px;border-left:4px solid var(--done-deep);background:var(--white);border-radius:0 10px 10px 0;max-width:46em}
@media (max-width:700px){.pricing .cols{grid-template-columns:1fr}.pricing .col+.col{padding-left:0;border-left:0;border-top:1px solid var(--line);margin-top:12px}}

/* safety */
.safe{background:var(--white)}
.safe .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.safe .trio div{border-left:3px solid var(--ping-deep);padding-left:16px}
.safe h3{font-size:1.15rem;font-weight:700;margin-bottom:6px}
.safe p{color:var(--muted);margin:0;font-size:1rem}
@media (max-width:760px){.safe .trio{grid-template-columns:1fr}}

/* closing band */
.band{background:var(--dusk);color:#F3EFFF;text-align:left}
.band .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.band h2{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800}
.band p{color:#D8D2F2;margin:6px 0 0}

/* inner pages */
.page-head{background:var(--dusk);color:#F3EFFF;padding:clamp(32px,6vw,64px) 0}
.page-head h1{font-size:clamp(2rem,5vw,3.4rem);font-weight:800}
.page-head p{color:#D8D2F2;margin:12px 0 0;max-width:38em;font-size:1.1rem}
.doc{padding:clamp(32px,6vw,64px) 0 clamp(48px,8vw,96px)}
.doc .wrap{max-width:760px}
.doc h2{font-size:1.5rem;font-weight:800;margin:2em 0 .5em}
.doc h2:first-child{margin-top:0}
.doc h3{font-size:1.15rem;font-weight:700;margin:1.5em 0 .4em}
.doc ul,.doc ol{padding-left:1.3em;margin:0 0 1em}
.doc li{margin:.4em 0}
.doc .stamp{color:var(--muted);font-size:15px}
.doc table{border-collapse:collapse;width:100%;margin:0 0 1.2em;font-size:16px}
.doc th,.doc td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.doc th{font-family:var(--display);font-weight:700}
.dl-box{background:var(--white);border:2px solid var(--ink);border-radius:16px;padding:22px 24px;margin-bottom:30px;display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between}
.dl-box .meta{color:var(--muted);font-size:15px;margin:6px 0 0}
.hash{font:14px/1.4 ui-monospace,Consolas,monospace;word-break:break-all;color:var(--muted)}
details{border-top:1px solid var(--line);padding:14px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{font:700 1.12rem/1.4 var(--display);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";font-size:1.4rem;line-height:1;color:var(--ping-deep)}
details[open] summary:after{content:"\2212"}
details p{margin:10px 0 0;color:#3B3560;max-width:42em}

/* footer */
.site-foot{background:var(--dusk);color:#C9C1EA;padding:36px 0 44px;font-size:15px}
.site-foot .wrap{display:grid;grid-template-columns:1fr auto;gap:20px 40px}
.site-foot nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.site-foot a{color:#E6E1FA}
.site-foot .legal{grid-column:1 / -1;font-size:13.5px;color:#B9B1DE;max-width:60em;margin:0}
@media (max-width:700px){.site-foot .wrap{grid-template-columns:1fr}}