@font-face{font-family:Clash;src:url(fonts/clash-display-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Satoshi;src:url(fonts/satoshi-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Satoshi;src:url(fonts/satoshi-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Satoshi;src:url(fonts/satoshi-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --bg:#f4f7fa;--surface:#ffffff;--ink:#12151d;--dim:#525a6b;--line:#e2e6ef;
  --accent:#2373b3;--accent-ink:#ffffff;--soft:#e3eff8;--warm:#fbe9e2;--warm-ink:#8a3218;
  --shadow:0 18px 50px rgba(30,70,110,.10);
  --r:18px;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0e1216;--surface:#161a24;--ink:#eef1f7;--dim:#a2aabb;--line:#262c3a;
    --accent:#74b6e8;--accent-ink:#0a1520;--soft:#16283a;--warm:#3a1f17;--warm-ink:#f6b8a3;
    --shadow:0 18px 50px rgba(0,0,0,.4)}
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 17px/1.6 Satoshi,system-ui,sans-serif;overflow-x:hidden}
h1,h2{font-family:Clash,system-ui,sans-serif;font-weight:600;letter-spacing:-.02em;line-height:1.05}
h1{font-size:clamp(2.4rem,5.6vw,4.4rem);max-width:13ch}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:22px;max-width:20ch}
p{max-width:62ch}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding-left:20px;padding-right:20px}
section{padding-top:clamp(64px,10vw,120px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* nav */
.nav{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;height:64px;padding:0 20px;
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.wm{text-decoration:none;font-weight:500;color:var(--dim)}
.wm b{font-family:Clash;color:var(--ink);font-size:1.15rem;margin-right:2px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:var(--accent-ink);border:0;border-radius:999px;
  padding:14px 28px;font:700 1rem Satoshi,sans-serif;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s}
.btn:hover{box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 35%,transparent);transform:translateY(-1px)}
.btn:active{transform:scale(.98)}
.btn:focus-visible,.link:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.btn.sm{padding:9px 18px;font-size:.92rem}
.btn.lg{padding:18px 40px;font-size:1.1rem}
.link{font-weight:700;text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.link:hover{color:var(--accent)}

/* hero */
.hero{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:40px;min-height:min(calc(100dvh - 64px),760px);padding-top:24px;padding-bottom:40px}
.for{color:var(--dim);font-weight:500;margin-bottom:18px}
.for em{font-style:normal;color:var(--ink);font-weight:700}
.lede{font-size:1.2rem;color:var(--dim);margin:22px 0 32px;max-width:44ch}
.ctas{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.logo{height:44px;width:auto;vertical-align:middle;margin-left:6px}
.hero-img{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3}
.hero-img img{width:100%;height:100%;object-fit:cover;display:block}
@media (prefers-reduced-motion:no-preference){
  .rise>*{animation:rise .8s cubic-bezier(.16,1,.3,1) both}
  .rise>*:nth-child(2){animation-delay:.08s}.rise>*:nth-child(3){animation-delay:.16s}.rise>*:nth-child(4){animation-delay:.24s}
  .hero-img.rise{animation:rise 1s .2s cubic-bezier(.16,1,.3,1) both}
}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}

/* noticed */
.sub{color:var(--dim);margin:-10px 0 30px}
.notes{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 48px}
.n{display:flex;gap:16px}
.n>i{flex:none;font-size:1.4rem;color:var(--warm-ink);background:var(--warm);width:46px;height:46px;border-radius:50%;display:grid;place-items:center}
.n b{font-size:1.06rem;display:block;margin-bottom:2px}
.n p{color:var(--dim);font-size:.96rem}

/* who */
.big{font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.45;max-width:34ch}
.adam{display:flex;gap:14px;align-items:center;margin-top:32px}
.av{width:48px;height:48px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font:600 1.2rem Clash}
.adam span{display:block;color:var(--dim);font-size:.92rem}

/* store demo */
.store{display:grid;grid-template-columns:1fr;gap:28px}
.store-copy p{color:var(--dim)}
.note{font-size:.88rem;margin-top:14px}
.demo{display:grid;grid-template-columns:1.25fr .75fr;gap:16px}
.pdp,.bag{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow)}
.pdp{overflow:hidden}
.demo{grid-template-columns:1.5fr .7fr;max-width:1000px}
.feel{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap}
.f{--c:#888;border:2px solid color-mix(in srgb,var(--c) 45%,transparent);background:var(--surface);color:var(--ink);border-radius:999px;padding:10px 18px;font:500 .95rem Satoshi,sans-serif;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.f.on{background:var(--c);border-color:var(--c);color:#fff}
.pdp{--c:#cf5a3a;display:grid;grid-template-columns:.9fr 1.1fr;border-top:5px solid var(--c);transition:border-color .3s}
.pdp img{width:100%;height:100%;object-fit:cover;aspect-ratio:1;display:block;transition:opacity .16s}
.pdp.swap img,.pdp.swap .pdp-body{opacity:0}
.pdp-body{transition:opacity .16s;padding:24px;display:flex;flex-direction:column;gap:10px}
.theme{display:block;font-weight:700;color:var(--c);font-size:.9rem}
.pwhy{color:var(--dim);font-size:.94rem}
.row{display:flex;gap:14px;align-items:center;margin-top:auto}
.add{flex:1}
.bag{padding:20px;display:flex;flex-direction:column;gap:12px;align-self:start}
.bag-head{display:flex;gap:8px;align-items:center;font-weight:700}
.bag-head b{margin-left:auto;background:var(--accent);color:var(--accent-ink);border-radius:999px;min-width:26px;text-align:center;font-size:.85rem;padding:1px 8px}
#shipMsg{font-size:.9rem;color:var(--dim)}
.meter{height:6px;border-radius:9px;background:var(--bg);overflow:hidden}
.meter span{display:block;height:100%;width:0;background:var(--accent);border-radius:9px;transition:width .5s cubic-bezier(.16,1,.3,1)}
#bagList{list-style:none;display:grid;gap:8px;font-size:.9rem}
#bagList li{display:flex;gap:8px;align-items:center}
#bagList i{width:12px;height:12px;border-radius:50%;flex:none}
#bagList span{margin-left:auto;color:var(--dim)}
.empty{color:var(--dim)}

/* setup bento */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tile{background:var(--surface);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:8px}
.tile i{font-size:1.6rem;color:var(--accent)}
.tile b{font:600 1.2rem Clash}
.tile p{color:var(--dim);font-size:.96rem}
.t-wide{grid-column:span 2}
.t-blue{background:var(--accent);color:var(--accent-ink)}
.t-blue i,.t-blue p{color:inherit}.t-blue p{opacity:.85}
.t-warm{background:var(--warm);color:var(--warm-ink)}
.t-warm i,.t-warm p{color:inherit}
.t-photo{padding:0;overflow:hidden;grid-row:span 2}
.t-photo img{width:100%;height:100%;object-fit:cover;display:block}
.t-ink{background:var(--ink);color:var(--bg)}
.t-ink p{color:inherit;opacity:.75}.t-ink i{color:var(--bg)}

/* more */
.more-list{display:grid;grid-template-columns:repeat(2,1fr);gap:34px 48px;max-width:900px}
.more-list div{display:grid;grid-template-columns:auto 1fr;column-gap:16px}
.more-list i{grid-row:span 2;font-size:1.5rem;color:var(--accent);background:var(--soft);width:48px;height:48px;border-radius:50%;display:grid;place-items:center}
.more-list b{font:600 1.15rem Clash}
.more-list p{color:var(--dim)}

/* how */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0;counter-reset:s;border-top:1px solid var(--line)}
.steps li{padding:26px 26px 0 0;counter-increment:s}
.steps li::before{content:counter(s);font:600 2.6rem Clash;color:var(--accent);display:block;line-height:1;margin-bottom:14px}
.steps b{font-size:1.15rem}
.steps p{color:var(--dim)}

/* end */
.end{text-align:center;padding-bottom:40px}
.end h2{margin:0 auto 14px;max-width:none}
.end p{margin:0 auto 30px;color:var(--dim)}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:60px;padding-bottom:40px;color:var(--dim);font-size:.9rem}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:28px}
  .store,.demo{grid-template-columns:1fr}
  .notes{grid-template-columns:1fr}
  .t-photo{grid-row:auto;aspect-ratio:16/10}
  .grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
}
@media (max-width:600px){
  body{font-size:16px}
  .grid,.more-list{grid-template-columns:1fr}
  .t-wide{grid-column:auto}
  .pdp{grid-template-columns:1fr}
  .pdp img{aspect-ratio:16/10}
}