:root{
  /* Text in the icon's colours: ink on the light page, cream on the dark one. */
  --bg:#fbfbfc;--bg-2:#f2f3f6;--card:#fff;--ink:#181819;--ink-2:#3a3a3c;--muted:#6c6c70;
  --line:rgba(22,24,29,.08);--line-2:rgba(22,24,29,.14);--accent:#181819;--accent-ink:#f8f3e8;
  --glow:rgba(120,135,170,.18);--shadow:0 1px 2px rgba(16,18,24,.04),0 8px 24px rgba(16,18,24,.06);
  --radius:18px;--max:1080px;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0c0d10;--bg-2:#121419;--card:#15171c;--ink:#f8f3e8;--ink-2:#d9d3c7;--muted:#a19c92;
  --line:rgba(255,255,255,.07);--line-2:rgba(255,255,255,.13);--accent:#f8f3e8;--accent-ink:#181819;
  --glow:rgba(120,140,190,.16);--shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px rgba(0,0,0,.35);
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration-color:var(--line-2);text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
@media (max-width:600px){.wrap{padding:0 16px}}

/* Nav */
.nav{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:10px;font-weight:650;letter-spacing:-.01em;text-decoration:none}
.brand picture{display:flex}
.brand img{width:28px;height:28px;border-radius:7px;box-shadow:0 0 0 1px var(--line)}
.nav nav{display:flex;gap:24px;font-size:14.5px;color:var(--muted)}
.nav nav a{text-decoration:none}
.nav nav a:hover{color:var(--ink)}
@media (max-width:600px){.nav nav .hide-sm{display:none}}

/* Hero */
.hero{position:relative;text-align:center;padding:96px 0 72px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-40% -10% auto;height:620px;background:radial-gradient(closest-side,var(--glow),transparent);pointer-events:none}
.hero>*{position:relative}
.app-icon{display:inline-flex;margin-bottom:28px}
.app-icon img{width:112px;height:112px;border-radius:25px;box-shadow:0 0 0 1px var(--line),0 20px 50px -12px rgba(16,18,24,.35)}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:550;color:var(--ink-2);border:1px solid var(--line-2);background:var(--card);border-radius:999px;padding:5px 12px 5px 10px;margin-bottom:22px}
.pill i{width:7px;height:7px;border-radius:50%;background:#34c759;box-shadow:0 0 0 3px rgba(52,199,89,.18)}
.hero h1{font-size:clamp(40px,7vw,68px);line-height:1.04;letter-spacing:-.035em;font-weight:720;margin:0 auto 18px;max-width:14ch}
.hero .lede{font-size:clamp(17px,2.2vw,20px);color:var(--muted);max-width:40rem;margin:0 auto 34px}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 22px;border-radius:12px;font-weight:600;font-size:15px;text-decoration:none;transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-ghost{border:1px solid var(--line-2);background:var(--card)}
.platforms{margin-top:22px;font-size:13.5px;color:var(--muted)}

/* Sections */
section{padding:64px 0}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.section-title{font-size:clamp(28px,4vw,40px);line-height:1.12;letter-spacing:-.025em;font-weight:700;margin:0 0 14px;max-width:26ch;text-wrap:balance}
.section-sub{color:var(--muted);font-size:17px;max-width:40rem;margin:0 0 40px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:760px){.grid{grid-template-columns:1fr}}
.feature{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.feature .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--bg-2);border:1px solid var(--line);margin-bottom:18px}
.feature .ic svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.feature h3{font-size:18px;letter-spacing:-.01em;margin:0 0 6px}
.feature p{margin:0;color:var(--muted);font-size:15.5px}

.privacy-band{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:48px;box-shadow:var(--shadow);display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
@media (max-width:760px){.privacy-band{grid-template-columns:1fr;padding:28px;gap:24px}}
.checks{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.checks li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-2)}
.checks svg{flex:none;width:20px;height:20px;margin-top:3px;stroke:#34c759;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* Footer */
.foot{border-top:1px solid var(--line);margin-top:48px;padding:28px 0 40px;font-size:14px;color:var(--muted)}
.foot .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot nav{display:flex;gap:20px}
.foot a{text-decoration:none}.foot a:hover{color:var(--ink)}

/* Legal / prose page */
.prose{max-width:720px;margin:0 auto;padding:72px 0 24px}
.prose h1{font-size:clamp(34px,5vw,48px);letter-spacing:-.03em;line-height:1.1;margin:0 0 10px}
.prose .meta{color:var(--muted);margin:0 0 36px}
.prose .summary{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow);margin-bottom:12px}
.prose h2{font-size:21px;letter-spacing:-.015em;margin:44px 0 10px}
.prose p,.prose li{color:var(--ink-2)}
.prose ul{padding-left:20px}
.prose li{margin:6px 0}
.prose b{color:var(--ink)}

/* Full feature list + scopes */
.spec{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:760px){.spec{grid-template-columns:1fr}}
.spec>div{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;box-shadow:var(--shadow)}
.spec h3{font-size:17px;margin:0 0 10px;letter-spacing:-.01em}
.spec ul{margin:0;padding-left:18px;color:var(--ink-2);font-size:15px}
.spec li{margin:7px 0}
.scopes{display:grid;gap:12px}
.scope{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 24px;display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start}
@media (max-width:760px){.scope{grid-template-columns:1fr;gap:8px}}
.scope code{font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--bg-2);border:1px solid var(--line);border-radius:8px;padding:6px 10px;justify-self:start;word-break:break-all}
.scope p{margin:0;color:var(--ink-2);font-size:15px}

/* Screenshot tour */
.tour{padding-top:24px}
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;align-items:start}
@media (max-width:900px){.shots{grid-template-columns:repeat(2,1fr);gap:24px}}
@media (max-width:480px){.shots{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 8px}.shots figure{flex:0 0 72%;scroll-snap-align:center}}
.shots figure{margin:0}
.phone{position:relative;border-radius:34px;padding:7px;background:linear-gradient(160deg,#3a3f4a,#15171c);box-shadow:0 0 0 1px var(--line-2),0 30px 60px -20px rgba(16,18,24,.45);transition:transform .25s ease}
.phone:hover{transform:translateY(-4px)}
.phone img{display:block;width:100%;aspect-ratio:1206/2330;object-fit:cover;object-position:top;border-radius:28px;background:var(--bg-2)}
.shots figure:nth-child(even){margin-top:40px}
@media (max-width:480px){.shots figure:nth-child(even){margin-top:0}}
figcaption{margin-top:16px;font-size:14.5px;color:var(--muted);line-height:1.5}
figcaption b{display:block;color:var(--ink);font-size:15.5px;margin-bottom:2px}

/* Mac + iPad */
.device{margin:0 0 56px}
.device figcaption{max-width:40rem}
.win{border-radius:14px;overflow:hidden;background:var(--card);box-shadow:0 0 0 1px var(--line-2),0 40px 80px -30px rgba(16,18,24,.45)}
.win .bar{height:34px;display:flex;align-items:center;gap:8px;padding:0 14px;background:var(--bg-2);border-bottom:1px solid var(--line)}
.win .bar i{width:12px;height:12px;border-radius:50%;background:#ff5f57}
.win .bar i:nth-child(2){background:#febc2e}.win .bar i:nth-child(3){background:#28c840}
.win img,.tablet img{display:block;width:100%;height:auto}
.tablet{border-radius:30px;padding:14px;background:linear-gradient(160deg,#3a3f4a,#101216);box-shadow:0 0 0 1px var(--line-2),0 40px 80px -30px rgba(16,18,24,.5)}
.tablet img{border-radius:18px}
@media (min-width:900px){.device.ipad{width:86%;margin-left:auto}}
@media (max-width:600px){.tablet{padding:7px;border-radius:18px}.tablet img{border-radius:12px}}
.shot{border-radius:22px;overflow:hidden;box-shadow:0 0 0 1px var(--line-2),0 30px 60px -24px rgba(16,18,24,.35);transition:transform .25s ease}
.shot:hover{transform:translateY(-4px)}
.shot img{display:block;width:100%;height:auto}
.device .shot{border-radius:16px}

/* Why the name */
.name{text-align:center;padding:40px 0 72px}
.name .eyebrow{margin-bottom:12px}
.name-story{font-size:clamp(18px,2.2vw,22px);line-height:1.5;color:var(--ink-2);max-width:38rem;margin:0 auto;text-wrap:pretty}