/* Shared by every page of the site: tokens, the seven palettes, nav, buttons, phone frame, footer. */

:root{
  --copper:oklch(58% 0.1155 210);--copper-deep:oklch(44% 0.1078 210);--copper-soft:oklch(93% 0.0347 210);--cream:oklch(97% 0.0072 223);--sand:oklch(94% 0.0096 223);--paper:#fff;--line:oklch(90% 0.0084 223);--ink:oklch(20% 0.012 223);--ink-2:oklch(46% 0.012 223);--band-hi:oklch(64% 0.1155 210);--band:oklch(54% 0.1232 210);--band-lo:oklch(40% 0.1155 210);--shadow:0 30px 60px -20px oklch(25% 0.0616 210)/.35,0 10px 24px -12px oklch(25% 0.0616 210)/.25;
  --green:#2f8a4e;--red:#c2412f;--hero-ink:#fff;--radius:22px;--maxw:1160px;
  --head:'Manrope',system-ui,-apple-system,sans-serif;--body:'Inter',system-ui,-apple-system,sans-serif;
}
/* Section palettes — the app's own seven, rotated from the same table
   (neutral hue/chroma, accent hue/chroma) that re-skins the app. */
.pal-sand{--copper:oklch(58% 0.15 55);--copper-deep:oklch(44% 0.14 55);--copper-soft:oklch(93% 0.045 55);--cream:oklch(97% 0.012 75);--sand:oklch(94% 0.016 75);--paper:#fff;--line:oklch(90% 0.014 75);--ink:oklch(20% 0.02 75);--ink-2:oklch(46% 0.02 75);--band-hi:oklch(64% 0.15 55);--band:oklch(54% 0.16 55);--band-lo:oklch(40% 0.15 55);--shadow:0 30px 60px -20px oklch(25% 0.08 55)/.35,0 10px 24px -12px oklch(25% 0.08 55)/.25}
.pal-blush{--copper:oklch(58% 0.15 318);--copper-deep:oklch(44% 0.14 318);--copper-soft:oklch(93% 0.045 318);--cream:oklch(97% 0.0192 15);--sand:oklch(94% 0.0256 15);--paper:#fff;--line:oklch(90% 0.0224 15);--ink:oklch(20% 0.032 15);--ink-2:oklch(46% 0.032 15);--band-hi:oklch(64% 0.15 318);--band:oklch(54% 0.16 318);--band-lo:oklch(40% 0.15 318);--shadow:0 30px 60px -20px oklch(25% 0.08 318)/.35,0 10px 24px -12px oklch(25% 0.08 318)/.25}
.pal-lagoon{--copper:oklch(58% 0.1275 190);--copper-deep:oklch(44% 0.119 190);--copper-soft:oklch(93% 0.0382 190);--cream:oklch(97% 0.018 185);--sand:oklch(94% 0.024 185);--paper:#fff;--line:oklch(90% 0.021 185);--ink:oklch(20% 0.03 185);--ink-2:oklch(46% 0.03 185);--band-hi:oklch(64% 0.1275 190);--band:oklch(54% 0.136 190);--band-lo:oklch(40% 0.1275 190);--shadow:0 30px 60px -20px oklch(25% 0.068 190)/.35,0 10px 24px -12px oklch(25% 0.068 190)/.25}
.pal-violet{--copper:oklch(58% 0.1725 300);--copper-deep:oklch(44% 0.161 300);--copper-soft:oklch(93% 0.0517 300);--cream:oklch(97% 0.0132 300);--sand:oklch(94% 0.0176 300);--paper:#fff;--line:oklch(90% 0.0154 300);--ink:oklch(20% 0.022 300);--ink-2:oklch(46% 0.022 300);--band-hi:oklch(64% 0.1725 300);--band:oklch(54% 0.184 300);--band-lo:oklch(40% 0.1725 300);--shadow:0 30px 60px -20px oklch(25% 0.092 300)/.35,0 10px 24px -12px oklch(25% 0.092 300)/.25}
.pal-periwinkle{--copper:oklch(58% 0.18 275);--copper-deep:oklch(44% 0.168 275);--copper-soft:oklch(93% 0.054 275);--cream:oklch(97% 0.018 268);--sand:oklch(94% 0.024 268);--paper:#fff;--line:oklch(90% 0.021 268);--ink:oklch(20% 0.03 268);--ink-2:oklch(46% 0.03 268);--band-hi:oklch(64% 0.18 275);--band:oklch(54% 0.192 275);--band-lo:oklch(40% 0.18 275);--shadow:0 30px 60px -20px oklch(25% 0.096 275)/.35,0 10px 24px -12px oklch(25% 0.096 275)/.25}
.pal-champagne{--copper:oklch(58% 0.087 80);--copper-deep:oklch(44% 0.0812 80);--copper-soft:oklch(93% 0.0261 80);--cream:oklch(97% 0.0036 80);--sand:oklch(94% 0.0048 80);--paper:#fff;--line:oklch(90% 0.0042 80);--ink:oklch(20% 0.006 80);--ink-2:oklch(46% 0.006 80);--band-hi:oklch(64% 0.087 80);--band:oklch(54% 0.0928 80);--band-lo:oklch(40% 0.087 80);--shadow:0 30px 60px -20px oklch(25% 0.0464 80)/.35,0 10px 24px -12px oklch(25% 0.0464 80)/.25}
.pal-arctic{--copper:oklch(58% 0.1155 210);--copper-deep:oklch(44% 0.1078 210);--copper-soft:oklch(93% 0.0347 210);--cream:oklch(97% 0.0072 223);--sand:oklch(94% 0.0096 223);--paper:#fff;--line:oklch(90% 0.0084 223);--ink:oklch(20% 0.012 223);--ink-2:oklch(46% 0.012 223);--band-hi:oklch(64% 0.1155 210);--band:oklch(54% 0.1232 210);--band-lo:oklch(40% 0.1155 210);--shadow:0 30px 60px -20px oklch(25% 0.0616 210)/.35,0 10px 24px -12px oklch(25% 0.0616 210)/.25}
/* Blush's accent (318) sits next to Violet; its band takes the palette's rose side instead. */
.band.pal-blush{--band-hi:oklch(70% 0.13 355);--band:oklch(60% 0.16 350);--band-lo:oklch(46% 0.15 345)}
/* A light band: Arctic Blue is the app's one light theme, so its hero keeps dark ink. */
.band.pal-arctic{--band-hi:oklch(97% 0.02 215);--band:oklch(92% 0.045 220);--band-lo:oklch(85% 0.07 228)}
.hero.light{--hero-ink:var(--ink)}
.hero.light .pill{background:rgba(255,255,255,.6);border-color:rgba(0,40,80,.12);color:var(--ink)}
.hero.light .pill i{background:var(--copper);color:#fff}
.hero.light h1 em::after{background:var(--copper);opacity:.25}
.hero.light p.sub{color:var(--ink-2)}
.hero.light .for span{background:rgba(255,255,255,.7);color:var(--ink)}
.hero.light .dots button{background:rgba(0,40,80,.2)}
.hero.light .dots button.on{background:var(--copper)}
.nav.on-light{color:var(--ink)}
.nav.on-light .btn-light{background:var(--copper);color:#fff}
.pal{background:var(--cream);color:var(--ink)}
.band{background:radial-gradient(120% 90% at 85% 10%,var(--band-hi) 0%,var(--band) 45%,var(--band-lo) 100%)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;color-scheme:light only;background:var(--cream);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--head);line-height:1.08;letter-spacing:-.025em;margin:0}
h2{font-size:clamp(32px,4.6vw,52px);font-weight:800}
h3{font-size:22px;font-weight:700;letter-spacing:-.015em}
p{margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{display:inline-block;font:700 13px/1 var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--copper)}
.lede{font-size:19px;color:var(--ink-2);max-width:600px}
.center{text-align:center}.center .lede{margin-left:auto;margin-right:auto}

/* ---------- nav ---------- */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:50;width:min(var(--maxw),calc(100% - 24px));
  display:flex;align-items:center;gap:20px;padding:10px 10px 10px 18px;border-radius:999px;transition:background .25s,box-shadow .25s,color .25s;color:#fff}
.nav.scrolled{background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 8px 30px -10px rgba(0,0,0,.2);color:var(--ink)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 19px/1 var(--head);letter-spacing:-.02em}
.brand img{width:34px;height:34px;border-radius:9px}
.nav ul{display:flex;gap:26px;list-style:none;margin:0 auto;padding:0}
.nav ul a{text-decoration:none;font:600 15px/1 var(--head);opacity:.88}
.nav ul a:hover{opacity:1}
.btn{display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;text-decoration:none;font:700 15px/1 var(--head);border-radius:999px;padding:13px 22px;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px)}
.btn-light{background:#fff;color:var(--copper-deep)}
.nav.scrolled .btn-light{background:var(--copper);color:#fff}
.btn-copper{background:var(--copper);color:#fff;box-shadow:0 10px 24px -10px rgba(184,105,42,.7)}
.store{display:inline-flex;align-items:center;gap:10px;background:#000;color:#fff;text-decoration:none;border-radius:12px;padding:9px 18px 9px 14px;border:1px solid rgba(255,255,255,.25);transition:transform .15s}
.store:hover{transform:translateY(-1px)}
.store svg{width:26px;height:26px}
.store small{display:block;font:500 11px/1 var(--body);opacity:.85}
.store b{display:block;font:600 20px/1.1 var(--body);letter-spacing:-.01em}

/* Phone frame: one clean dark rim, a hairline highlight on the outer edge,
   side keys. The screenshots carry their own status bar and island, and the
   screen keeps their exact shape (1320x2868), so nothing is cropped. */
.phone{position:relative;width:100%;padding:2.4%;border-radius:17%/7.8%;background:#121214;
  box-shadow:var(--shadow),0 0 0 1px #77777c,inset 0 0 0 1.5px #3b3b3f}
.phone::after{content:"";position:absolute;right:-1%;top:20%;width:1%;height:13%;border-radius:0 3px 3px 0;background:#4a4a4e}
.phone .keys,.phone .keys::before,.phone .keys::after{position:absolute;left:-1%;width:1%;border-radius:3px 0 0 3px;background:#4a4a4e}
.phone .keys{top:14%;height:4%}
.phone .keys::before,.phone .keys::after{content:"";left:0;width:100%}
.phone .keys::before{top:210%;height:190%}
.phone .keys::after{top:450%;height:190%}
.phone .screen{position:relative;z-index:1;width:100%;aspect-ratio:1320/2868;border-radius:14.5%/6.7%;overflow:hidden;background:#000}
.phone .screen img,.phone .screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}

/* ---------- footer ---------- */
footer{background:#171410;color:#e9e1d6;padding:80px 0 40px;position:relative}
footer .wave{top:-1px;bottom:auto;transform:scaleY(-1);color:oklch(97% 0.012 75)}
.fgrid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px}
.fgrid h4{font:800 12px/1 var(--head);letter-spacing:.14em;text-transform:uppercase;color:#a99c8c;margin:0 0 18px}
.fgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.fgrid a{text-decoration:none;opacity:.9;font-size:15px}
.fgrid a:hover{opacity:1;text-decoration:underline}
.fgrid .brand{color:#fff;margin-bottom:16px}
.fgrid p{color:#b4a898;font-size:15px;max-width:320px}
.legal{border-top:1px solid #2e2821;margin-top:56px;padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13.5px;color:#9a8e7f}


/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.wavebars i{animation:none;height:12px}html{scroll-behavior:auto}}