/* Arryfy — site styles. Palette & shapes inherited from the app. */
:root{
  --ink:#191626; --bg:#EFEBFB; --surface:#F6F3FD; --card:#ffffff; --line:#E7E3F5;
  --muted:#5B5670; --violet:#6D4CF2; --deep:#6A45F4; --orchid:#A755F0; --pink:#F25FB0;
  --ember:#FF8A3D; --rose:#FF4E86; --green:#0E9E6E; --amber:#B87400;
  --grad-hero:linear-gradient(135deg,#6A45F4 0%,#A755F0 52%,#F25FB0 100%);
  --grad-violet:linear-gradient(135deg,#6D4CF2,#9A5CF6);
  --grad-warm:linear-gradient(135deg,#FF8A3D,#FF4E86);
  --maxw:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:"Bricolage Grotesque","Inter",sans-serif; font-weight:700; letter-spacing:-.02em; line-height:1.05; margin:0}
a{color:var(--violet); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
img,svg{display:block}
:focus-visible{outline:3px solid var(--violet); outline-offset:3px; border-radius:6px}

/* ---- nav ---- */
.nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(12px); background:color-mix(in srgb,var(--bg) 82%,transparent); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:68px}
.brand{display:flex; align-items:center; gap:11px; font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:1.25rem; color:var(--ink)}
.brand:hover{text-decoration:none}
.mark{width:34px; height:34px; border-radius:10px; background:var(--grad-violet); display:grid; place-items:center; flex:none; box-shadow:0 4px 14px rgba(109,76,242,.35)}
.mark span{display:block; height:2.6px; background:#fff; border-radius:2px; margin:2.3px 0}
.nav-links{display:flex; align-items:center; gap:26px}
/* :not(.btn) matters — without it these rules out-specify .btn-primary and the
   "Get the app" button renders muted grey on the violet gradient (1.3:1). */
.nav-links a:not(.btn){color:var(--muted); font-size:.95rem; font-weight:500}
.nav-links a:not(.btn):hover{color:var(--ink); text-decoration:none}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-size:1rem; border-radius:14px; padding:13px 22px; border:0; cursor:pointer; font-family:inherit}
.btn-primary{background:var(--grad-violet); color:#fff; box-shadow:0 8px 22px rgba(109,76,242,.34)}
.btn-primary:hover{text-decoration:none; filter:brightness(1.05)}
.btn-ghost{background:var(--card); color:var(--ink); border:1.5px solid var(--line)}
.btn-ghost:hover{text-decoration:none; border-color:#d6cff0}
.nav .btn{padding:10px 18px; border-radius:12px}

/* ---- mobile nav toggle (hidden above 900px) ---- */
.nav-toggle{display:none; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; background:var(--card); border:1.5px solid var(--line); cursor:pointer; padding:0; flex:none}
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after{display:block; width:18px; height:2px; background:var(--ink); border-radius:2px}
.nav-toggle .bars{position:relative; transition:background .18s}
.nav-toggle .bars::before, .nav-toggle .bars::after{content:""; position:absolute; left:0; transition:transform .18s}
.nav-toggle .bars::before{top:-6px}
.nav-toggle .bars::after{top:6px}
.nav-toggle[aria-expanded="true"] .bars{background:transparent}
.nav-toggle[aria-expanded="true"] .bars::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bars::after{transform:translateY(-6px) rotate(-45deg)}

/* ---- hero ---- */
.hero{position:relative; overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; padding:72px 0 84px}
.eyebrow{display:inline-flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line); color:var(--muted); font-size:.88rem; font-weight:600; padding:7px 14px; border-radius:999px}
.dot-live{width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(14,158,110,.5); animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(14,158,110,.45)}70%{box-shadow:0 0 0 9px rgba(14,158,110,0)}100%{box-shadow:0 0 0 0 rgba(14,158,110,0)}}
.hero h1{font-size:clamp(2.6rem,5.4vw,4.15rem); margin:22px 0 0}
.hero h1 .grad{background:var(--grad-hero); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p.lede{font-size:1.24rem; color:var(--muted); max-width:33ch; margin:20px 0 0}
.hero-cta{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:32px}
.hero-note{margin-top:16px; color:var(--muted); font-size:.95rem}
.hero-note b{color:var(--ink); font-weight:600}

/* ---- phone mockup (the signature) ----
   Current-generation iPhone: Dynamic Island rather than a notch, thin uniform
   bezels, continuous 54px corners and a brushed titanium rail. Drawn entirely
   in CSS — no product photography. */
.phone-stage{display:flex; justify-content:center; position:relative}
.glow{position:absolute; inset:-10% -6% -14% -6%; background:radial-gradient(60% 55% at 60% 35%,rgba(167,85,240,.42),transparent 70%); filter:blur(30px); z-index:0}
.phone{position:relative; z-index:1; width:300px; height:630px; border-radius:54px; padding:9px;
  background:linear-gradient(142deg,#6a6280 0%,#201b2e 15%,#39324e 38%,#15121f 62%,#2b2540 80%,#6a6280 100%);
  box-shadow:0 44px 88px -22px rgba(53,30,120,.58),
             inset 0 0 0 1.4px rgba(255,255,255,.17),
             0 0 0 1px rgba(16,13,26,.92)}
.screen{position:relative; width:100%; height:100%; background:var(--bg); border-radius:46px; overflow:hidden; display:flex; flex-direction:column}

/* Dynamic Island */
.island{position:absolute; top:12px; left:50%; transform:translateX(-50%); width:92px; height:27px;
  background:#08070e; border-radius:999px; z-index:6; box-shadow:inset 0 0 0 .5px rgba(255,255,255,.08)}
.island::after{content:""; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle at 35% 32%,#2d2846,#0d0b15 68%);
  box-shadow:inset 0 0 0 .5px rgba(130,118,190,.45)}

/* side buttons on the titanium rail */
.side{position:absolute; width:3px; background:linear-gradient(180deg,#6b6484,#2c2641); z-index:0}
.side.act{left:-3px; top:104px; height:26px; border-radius:2px 0 0 2px}
.side.vol{left:-3px; top:152px; height:38px; border-radius:2px 0 0 2px; box-shadow:0 50px 0 0 #413a5b}
.side.pwr{right:-3px; top:186px; height:64px; border-radius:0 2px 2px 0}

.s-status{display:flex; justify-content:space-between; align-items:center; padding:13px 21px 5px; font-size:12px; font-weight:700; color:var(--ink)}
.s-ind{display:flex; align-items:center; gap:5px}
.s-ind svg{height:11px; width:auto; fill:currentColor; display:block}
.s-ind svg.batt{height:12px}
.s-body{padding:6px 15px 15px; overflow:hidden; flex:1}

/* bottom tab bar + home indicator, so the taller screen reads as a real app */
.s-tabs{display:flex; justify-content:space-around; align-items:flex-end; padding:9px 6px 5px;
  background:rgba(255,255,255,.86); backdrop-filter:blur(10px); border-top:1px solid var(--line)}
.tab{display:flex; flex-direction:column; align-items:center; gap:3px; font-size:9.5px; font-weight:600; color:var(--muted)}
.tab svg{width:17px; height:17px; fill:currentColor; display:block}
.tab.on{color:var(--violet)}
.s-home{height:19px; background:rgba(255,255,255,.86); display:grid; place-items:center}
.s-home::after{content:""; width:104px; height:4.5px; border-radius:3px; background:#1b1730; opacity:.7}
.s-top{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:19px; margin:4px 2px 10px}
.s-chips{display:flex; gap:7px; margin-bottom:11px}
.chip{font-size:11.5px; font-weight:700; padding:6px 10px; border-radius:11px; background:var(--card); color:var(--ink)}
.chip.warm{background:var(--grad-warm); color:#fff}
.s-hero{background:var(--grad-hero); border-radius:18px; padding:15px; color:#fff}
.s-hero .lbl{font-size:10.5px; font-weight:700; opacity:.85; letter-spacing:.04em}
.s-hero .big{font-size:27px; font-weight:800; margin:3px 0 1px}
.s-hero .sub{font-size:11.5px; opacity:.9}
.s-hero .track{height:7px; border-radius:5px; background:rgba(255,255,255,.28); margin-top:11px; overflow:hidden}
.s-hero .fill{height:100%; width:64%; background:#fff; border-radius:5px}
.s-card{background:var(--card); border-radius:16px; padding:13px; margin-top:11px}
.s-row{display:flex; justify-content:space-between; align-items:center}
.s-row + .s-row{margin-top:11px}
.s-name{display:flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600}
.s-sub{font-size:11px; color:var(--muted); margin-top:1px}
.tick{width:9px; height:9px; border-radius:50%}
.pill{font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:8px}
.pill.ok{background:rgba(14,158,110,.14); color:var(--green)}
.pill.warn{background:rgba(184,116,0,.14); color:var(--amber)}
.count{font-size:13px; font-weight:800; color:var(--ink); white-space:nowrap}
.s-sess{display:flex; align-items:center; gap:10px; background:var(--card); border-radius:14px; padding:11px 12px; margin-top:11px; border-left:4px solid var(--violet)}
.cbx{width:19px; height:19px; border-radius:6px; border:2px solid var(--line); flex:none}
.cbx.done{background:var(--green); border-color:var(--green); display:grid; place-items:center}
.cbx.done::after{content:"✓"; color:#fff; font-size:12px; line-height:1}

/* ---- generic section ---- */
section{padding:76px 0}
.sec-head{max-width:56ch}
.sec-head h2{font-size:clamp(2rem,3.6vw,2.7rem)}
.sec-head p{color:var(--muted); font-size:1.12rem; margin:14px 0 0}

/* ---- features: asymmetric, not identical cards ---- */
.features{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.feat-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:44px}
.feat{background:var(--card); border:1px solid var(--line); border-radius:22px; padding:26px}
.feat.wide{grid-column:span 2; display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center}
.feat h3{font-size:1.35rem; margin:14px 0 8px}
.feat p{color:var(--muted); margin:0; font-size:1rem}
.ficon{width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-size:22px}
.ficon.v{background:rgba(109,76,242,.12)}
.ficon.g{background:rgba(14,158,110,.14)}
.ficon.p{background:rgba(242,95,176,.14)}
.ficon.w{background:rgba(255,138,61,.16)}
/* readiness demo inside wide feature */
.ready-demo{background:var(--surface); border-radius:16px; padding:16px; border:1px solid var(--line)}
.ready-row{display:flex; justify-content:space-between; align-items:center; padding:9px 0}
.ready-row + .ready-row{border-top:1px solid var(--line)}
.subj{font-weight:600; font-size:.95rem}
.subj-bar{display:block; height:9px; border-radius:5px; background:#E3DEF2}

/* ---- how: a real sequence, so it's numbered ---- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:46px; counter-reset:step}
.step{position:relative; padding-top:16px; border-top:2px solid var(--line)}
.step::before{counter-increment:step; content:counter(step); position:absolute; top:-16px; left:0; font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:.95rem; color:#fff; background:var(--violet); width:30px; height:30px; border-radius:9px; display:grid; place-items:center; transform:translateY(-50%)}
.step h3{font-size:1.12rem; margin:6px 0 6px}
.step p{color:var(--muted); font-size:.96rem; margin:0}

/* ---- private band ---- */
.private{background:var(--grad-hero); color:#fff; border-radius:28px; padding:52px; margin:0 24px; max-width:calc(var(--maxw) - 0px); margin-inline:auto}
.private-inner{max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center}
.private h2{font-size:clamp(1.9rem,3.4vw,2.5rem)}
.private p{opacity:.92; margin:12px 0 0; max-width:52ch; font-size:1.1rem}
.private .btn-ghost{background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.4)}
.private .btn-ghost:hover{background:rgba(255,255,255,.24)}

/* ---- cta ---- */
.cta{text-align:center}
.cta h2{font-size:clamp(2.1rem,4vw,3rem)}
.cta p{color:var(--muted); font-size:1.15rem; margin:16px auto 30px; max-width:46ch}

/* ---- footer ---- */
footer{background:var(--ink); color:#cfc9e6; padding:52px 0 40px}
footer .wrap{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px}
footer .brand{color:#fff}
footer h4{font-family:"Bricolage Grotesque",sans-serif; font-size:.95rem; color:#fff; margin:0 0 14px}
footer a{color:#cfc9e6; display:block; margin-bottom:10px; font-size:.95rem}
footer a:hover{color:#fff}
.foot-note{color:#8f88ad; font-size:.85rem; margin-top:14px; max-width:38ch}
.foot-bottom{border-top:1px solid #2b2545; margin-top:36px; padding-top:22px; color:#8f88ad; font-size:.85rem}

/* ---- doc pages (privacy / terms / support) ---- */
.doc{max-width:760px; margin:0 auto; padding:64px 24px 80px}
.doc h1{font-size:clamp(2.2rem,4vw,3rem)}
.doc .updated{color:var(--muted); margin-top:10px; font-size:.95rem}
.doc h2{font-size:1.4rem; margin:38px 0 10px}
.doc p,.doc li{color:#332f47; font-size:1.05rem}
.doc a{font-weight:600}
.doc .lead{font-size:1.2rem; color:var(--ink); margin-top:22px}
.doc ul{padding-left:22px}
.doc li{margin:6px 0}
.callout{background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--violet); border-radius:14px; padding:18px 20px; margin:26px 0}
.callout p{margin:0}
.callout p + p{margin-top:10px}
.doc h3{font-size:1.12rem; margin:26px 0 6px}
.doc .fine{font-size:.94rem; color:var(--muted)}
.doc ol{padding-left:22px}
.doc ol li{margin:6px 0; color:#332f47; font-size:1.05rem}

/* ---- App Store badge (swap the link for the real one at launch) ---- */
.btn-store{background:var(--ink); color:#fff; border:0; padding:12px 22px; gap:11px}
.btn-store:hover{text-decoration:none; filter:brightness(1.18)}
.btn-store svg{width:22px; height:22px; fill:currentColor; flex:none}
.btn-store .s-lines{display:flex; flex-direction:column; align-items:flex-start; line-height:1.15}
.btn-store .s-sm{font-size:.7rem; font-weight:500; opacity:.82; letter-spacing:.02em}
.btn-store .s-lg{font-size:1.02rem; font-weight:600}

/* ---- version chip ---- */
.chips-row{display:flex; flex-wrap:wrap; gap:9px; margin-top:16px}
.vchip{display:inline-flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--line); color:var(--muted); font-size:.86rem; font-weight:600; padding:6px 13px; border-radius:999px}

/* ---- 404 ---- */
.notfound{max-width:620px; margin:0 auto; padding:110px 24px 130px; text-align:center}
.notfound .code{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:clamp(4rem,13vw,7rem); line-height:1; background:var(--grad-hero); -webkit-background-clip:text; background-clip:text; color:transparent}
.notfound h1{font-size:clamp(1.8rem,4vw,2.5rem); margin:14px 0 0}
.notfound p{color:var(--muted); font-size:1.12rem; margin:16px auto 30px; max-width:44ch}
.notfound .hero-cta{justify-content:center}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:44px; text-align:center; padding:52px 0 64px}
  .hero p.lede{margin-left:auto; margin-right:auto}
  .hero-cta{justify-content:center}
  .feat-grid,.steps{grid-template-columns:1fr}
  .feat.wide{grid-template-columns:1fr}
  .private-inner{grid-template-columns:1fr; text-align:center}
  .private{padding:40px 26px}
  footer .wrap{grid-template-columns:1fr 1fr}

  /* Real menu instead of hiding the links: Support, Privacy and Terms have to
     stay reachable on a phone, not footer-only. */
  .nav-toggle{display:flex}
  .nav-links{display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    padding:6px 24px 20px; background:var(--bg);
    border-bottom:1px solid var(--line); box-shadow:0 18px 34px -22px rgba(53,30,120,.5)}
  .nav-links.open{display:flex}
  .nav-links a:not(.btn){padding:14px 2px; font-size:1.05rem; border-bottom:1px solid var(--line)}
  .nav-links .btn{margin-top:16px; justify-content:center; padding:13px 22px}
}
@media (max-width:560px){ footer .wrap{grid-template-columns:1fr} .private .btn{width:100%} }
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important; scroll-behavior:auto} }