@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0');

:root{
  --cream:#F4F1EA; --paper:#FBF9F4; --paper-2:#F0ECE3;
  --ink:#0F4C5C; --ink-deep:#08323F; --ink-soft:rgba(15,76,92,0.06);
  --gold:#E9C46A; --gold-soft:rgba(233,196,106,0.18);
  --text:#1A2326; --text-sub:#5A6669; --text-mute:#8A9499;
  --hair:rgba(15,76,92,0.13); --hair-strong:rgba(15,76,92,0.22);
  --success:#2E7D4F; --warning:#C97B2C; --danger:#B5524A;
  --display:'Instrument Serif',Georgia,serif;
  --body:'Geist',-apple-system,system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,monospace;
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;font-family:var(--body);color:var(--text);background:var(--cream);-webkit-font-smoothing:antialiased;font-feature-settings:'tnum' 1,'cv11' 1;line-height:1.55}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--ink-deep)}
img{max-width:100%;display:block}
.ms{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;font-feature-settings:'liga';-webkit-font-smoothing:antialiased}
.serif{font-family:var(--display);font-weight:400;letter-spacing:-0.01em}
.serif-i{font-family:var(--display);font-style:italic;font-weight:400}
.mono{font-family:var(--mono);font-feature-settings:'tnum' 1}
.tnum{font-variant-numeric:tabular-nums}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* ---- Header ---- */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--cream) 88%,transparent);backdrop-filter:saturate(1.2) blur(12px);border-bottom:1px solid var(--hair)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:0 28px;height:66px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:23px;letter-spacing:-0.01em;color:var(--text)}
.brand:hover{color:var(--text)}
.brand-mark{width:30px;height:30px;border-radius:9px;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.brand-mark .ms{font-size:19px}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:14.5px;color:var(--text-sub);font-weight:500;letter-spacing:-0.005em}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:14px}
@media(max-width:820px){.nav-links{display:none}}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:100px;border:1px solid transparent;background:var(--ink);color:var(--paper);font-family:var(--body);font-size:14.5px;font-weight:500;letter-spacing:-0.005em;cursor:pointer;transition:transform .15s ease,background .15s ease}
.btn:hover{background:var(--ink-deep);color:var(--paper);transform:translateY(-1px)}
.btn-lg{padding:15px 28px;font-size:15.5px}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--hair-strong)}
.btn-ghost:hover{background:var(--ink-soft);color:var(--ink);border-color:var(--ink)}
.btn-gold{background:var(--gold);color:#2A1F0A}
.btn-gold:hover{background:#E0B653;color:#2A1F0A}
.btn .ms{font-size:19px}

/* ---- Generic ---- */
.eyebrow{font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink);font-weight:600;display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--gold);display:inline-block}
.section{padding:96px 0}
.section-head{max-width:660px}
.h-display{font-family:var(--display);font-weight:400;letter-spacing:-0.02em;line-height:1.02;font-size:clamp(38px,5.4vw,68px)}
.h-sec{font-family:var(--display);font-weight:400;letter-spacing:-0.02em;line-height:1.05;font-size:clamp(30px,3.8vw,46px)}
.lead{font-size:clamp(16px,1.5vw,19px);color:var(--text-sub);line-height:1.6}
.hair{height:1px;background:var(--hair);border:0;margin:0}
.pill-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:100px;font-size:11px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase}
.pill-tag.success{color:var(--success);background:color-mix(in oklab,var(--success) 12%,transparent)}
.pill-tag.warning{color:var(--warning);background:color-mix(in oklab,var(--warning) 12%,transparent)}
.pill-tag.danger{color:var(--danger);background:color-mix(in oklab,var(--danger) 12%,transparent)}
.pill-tag.ink{color:var(--ink);background:var(--gold-soft)}

/* ---- Footer ---- */
.footer{background:var(--ink-deep);color:#D9E4E7;padding:72px 0 40px}
.footer a{color:#AEC4C9}
.footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.footer .brand{color:#fff}
.footer .brand-mark{background:var(--gold);color:var(--ink-deep)}
.footer h5{font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:#7E9AA0;font-weight:600;margin:0 0 16px}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.footer ul a{font-size:14px}
.footer-bottom{margin-top:56px;padding-top:26px;border-top:1px solid rgba(255,255,255,0.12);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px;color:#7E9AA0}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}

/* ---- Device mockup ---- */
.device{width:300px;height:632px;border-radius:34px;background:var(--cream);border:7px solid #2a2a2a;box-shadow:0 40px 90px rgba(8,50,63,0.22),0 2px 0 rgba(255,255,255,0.05) inset;overflow:hidden;display:flex;flex-direction:column;position:relative;flex-shrink:0}
.device.sm{width:264px;height:556px;border-radius:30px}
.dev-status{height:30px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:500;color:var(--text)}
.dev-status .r{display:flex;gap:5px;align-items:center}
.dev-status .ms{font-size:13px}
.dev-body{flex:1;overflow:hidden;display:flex;flex-direction:column;position:relative;background:var(--cream)}
.dev-pill{height:16px;display:flex;align-items:center;justify-content:center;background:var(--paper)}
.dev-pill span{width:80px;height:4px;border-radius:2px;background:var(--text);opacity:.32}
.rs-prefix{font-size:0.6em;letter-spacing:0.04em;opacity:.72;margin-right:.16em;font-weight:500;font-family:var(--mono)}

/* app bits inside device */
.d-appbar{padding:6px 16px 12px;background:var(--cream)}
.d-appbar .top{height:40px;display:flex;align-items:center;justify-content:space-between}
.d-iconbtn{width:34px;height:34px;border-radius:11px;border:1px solid var(--hair);display:flex;align-items:center;justify-content:center;color:var(--text)}
.d-iconbtn .ms{font-size:17px}
.d-card{background:var(--paper);border-radius:15px;border:1px solid var(--hair)}
.d-seclabel{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-sub);font-weight:600}
.d-avatar{border-radius:50%;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-family:var(--display);flex-shrink:0}
.d-bnav{display:grid;grid-template-columns:repeat(5,1fr);padding:6px 0 9px;border-top:1px solid var(--hair);background:var(--paper);margin-top:auto}
.d-bnav-i{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--text-mute);font-size:9.5px}
.d-bnav-i .ms{font-size:20px;padding:3px 12px}
.d-bnav-i.active{color:var(--ink)}
.d-bnav-i.active .ms{background:var(--gold-soft);border-radius:100px}

/* ---- Feature cards ---- */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:20px;overflow:hidden;margin-top:56px}
.feat{background:var(--cream);padding:34px 30px;display:flex;flex-direction:column;gap:14px}
.feat-ic{width:46px;height:46px;border-radius:13px;background:var(--ink-soft);color:var(--ink);display:flex;align-items:center;justify-content:center}
.feat-ic .ms{font-size:24px}
.feat h3{font-family:var(--display);font-weight:400;font-size:24px;letter-spacing:-0.01em;margin:0;line-height:1.1}
.feat p{margin:0;color:var(--text-sub);font-size:14.5px;line-height:1.6}
@media(max-width:900px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.feat-grid{grid-template-columns:1fr}}

/* ---- Tour rows ---- */
.tour-row{display:grid;grid-template-columns:1fr 300px;gap:64px;align-items:center;padding:60px 0}
.tour-row.flip{grid-template-columns:300px 1fr}
.tour-row.flip .tour-text{order:2}
.tour-num{font-family:var(--display);font-size:15px;color:var(--gold);letter-spacing:0.05em}
.tour-dev{display:flex;justify-content:center}
@media(max-width:820px){.tour-row,.tour-row.flip{grid-template-columns:1fr;gap:36px;justify-items:center;text-align:center}.tour-row.flip .tour-text{order:0}.tour-text{max-width:520px}}

/* ---- Legal / doc pages ---- */
.doc-hero{padding:72px 0 40px;border-bottom:1px solid var(--hair)}
.doc-layout{display:grid;grid-template-columns:230px 1fr;gap:56px;padding:56px 0 96px;align-items:start}
.doc-toc{position:sticky;top:88px}
.doc-toc h5{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-mute);font-weight:600;margin:0 0 14px}
.doc-toc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--hair)}
.doc-toc a{display:block;padding:6px 0 6px 16px;margin-left:-1px;border-left:2px solid transparent;font-size:13.5px;color:var(--text-sub);font-weight:500}
.doc-toc a:hover{color:var(--ink);border-left-color:var(--gold)}
.doc-body{max-width:720px}
.doc-body h2{font-family:var(--display);font-weight:400;font-size:30px;letter-spacing:-0.015em;margin:44px 0 14px;line-height:1.1;scroll-margin-top:88px}
.doc-body h2:first-child{margin-top:0}
.doc-body h3{font-size:17px;font-weight:600;margin:28px 0 8px}
.doc-body p,.doc-body li{color:var(--text-sub);font-size:15.5px;line-height:1.72}
.doc-body ul{padding-left:20px;display:flex;flex-direction:column;gap:8px}
.doc-body strong{color:var(--text);font-weight:600}
.doc-callout{background:var(--paper);border:1px solid var(--hair);border-left:3px solid var(--gold);border-radius:12px;padding:18px 22px;margin:24px 0}
.doc-callout p{margin:0;color:var(--text)}
.doc-meta{display:flex;gap:20px;flex-wrap:wrap;font-size:13.5px;color:var(--text-mute);margin-top:16px}
.doc-meta .mono{color:var(--text-sub)}
@media(max-width:820px){.doc-layout{grid-template-columns:1fr;gap:0}.doc-toc{display:none}}