:root{
  color-scheme:dark;
  --paper:#15130e; --paper-2:#1d1a14; --ink:#f4efe2; --ink-2:#b5ad99; --ink-3:#847c6b;
  --rule:rgba(244,239,226,.18); --grain:.07;
  --moss:#8fae6a; --ochre:#e2b259; --plum:#b08fc2; --coral:#e08874; --teal:#6cc0bc;
  --slab:#cdc4ae; --slab-ink:#1b1810; --btn:#f4efe2; --btn-ink:#17140d;
  --sans:"Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --spring:cubic-bezier(.34,1.56,.64,1);
}
:root[data-theme="light"]{
  color-scheme:light;
  --paper:#f7f3e9; --paper-2:#efe9da; --ink:#2c2318; --ink-2:#5c5343; --ink-3:#938a77;
  --rule:rgba(44,35,24,.2); --grain:.045;
  --moss:#6b8a4c; --ochre:#c08f2e; --plum:#8260a0; --coral:#c55c47; --teal:#3f948f;
  --slab:#2c2318; --slab-ink:#f7f3e9; --btn:#2c2318; --btn-ink:#f7f3e9;
}
@media (prefers-color-scheme:light){:root[data-theme="auto"]{
  color-scheme:light;
  --paper:#f7f3e9; --paper-2:#efe9da; --ink:#2c2318; --ink-2:#5c5343; --ink-3:#938a77;
  --rule:rgba(44,35,24,.2); --grain:.045;
  --moss:#6b8a4c; --ochre:#c08f2e; --plum:#8260a0; --coral:#c55c47; --teal:#3f948f;
  --slab:#2c2318; --slab-ink:#f7f3e9; --btn:#2c2318; --btn-ink:#f7f3e9;
}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:19px/1.75 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-image:
    radial-gradient(60vw 50vw at 12% 8%, color-mix(in srgb,var(--moss) 13%,transparent), transparent 70%),
    radial-gradient(50vw 44vw at 92% 32%, color-mix(in srgb,var(--plum) 13%,transparent), transparent 70%),
    radial-gradient(55vw 46vw at 30% 78%, color-mix(in srgb,var(--ochre) 11%,transparent), transparent 70%);
  background-attachment:fixed;
}
body::before{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:1140px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0}

/* loose type: serif display, light weight, roomy leading */
.display{font-family:var(--serif);font-weight:400;font-size:clamp(46px,7.2vw,96px);line-height:1.02;letter-spacing:-.02em;margin:0}
.h2{font-family:var(--serif);font-weight:400;font-size:clamp(36px,5vw,66px);line-height:1.06;letter-spacing:-.015em;margin:0}
.h3{font-family:var(--serif);font-weight:400;font-size:clamp(27px,3vw,40px);line-height:1.15;margin:0}
.lede{font-size:clamp(19px,1.7vw,23px);line-height:1.7;color:var(--ink-2);max-width:40ch;margin:28px 0 0}
p{margin:18px 0 0}

/* hand-drawn ink marks */
.ink{stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}
.squiggle{display:block;width:100%;height:.34em;margin-top:-.1em;color:var(--ochre);overflow:visible}
.mark-word{position:relative;display:inline-block}
.underline{position:absolute;left:0;width:100%;height:.22em;bottom:-.1em;color:var(--ochre);pointer-events:none;overflow:visible}
.underline path{stroke:currentColor;fill:none;stroke-linecap:round}
.underline path:nth-child(2){opacity:.5}

/* header: no bar, no blur, just things sitting on the page */
.top{display:flex;align-items:center;gap:clamp(14px,3vw,34px);padding:30px 0 10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-family:var(--serif);font-size:23px;letter-spacing:-.01em}
.brand img{width:38px;transform:rotate(-6deg);transition:transform .4s var(--spring)}
.brand:hover img{transform:rotate(7deg) scale(1.12)}
.top nav{display:flex;gap:22px;margin-left:auto;font-size:17px}
.top nav a{text-decoration:none;color:var(--ink-2);padding-bottom:2px}
.top nav a:hover{color:var(--ink);box-shadow:0 2px 0 var(--ochre)}
.swatch{display:flex;gap:3px}
.swatch button{width:28px;height:26px;display:grid;place-items:center;border:0;background:transparent;
  color:var(--ink-3);cursor:pointer;border-radius:999px}
.swatch button svg{width:15px;height:15px}
.swatch button[aria-pressed=true]{color:var(--ink);background:color-mix(in srgb,var(--ink) 11%,transparent)}

/* hero: scattered, not clustered */
.hero{position:relative;padding:clamp(40px,7vw,90px) 0 clamp(90px,13vw,170px)}
.hero .display{max-width:15ch}
.hero .lede{margin-top:34px}
.scatter{position:absolute;inset:0;pointer-events:none}
.scatter img{position:absolute;filter:drop-shadow(0 16px 30px rgba(0,0,0,.3))}
.s1{width:148px;right:4%;top:2%;transform:rotate(-9deg)}
.s2{width:104px;right:24%;top:26%;transform:rotate(11deg)}
.s3{width:120px;right:2%;top:46%;transform:rotate(5deg)}
.s4{width:86px;right:30%;top:62%;transform:rotate(-14deg)}
.s5{width:96px;right:14%;top:74%;transform:rotate(8deg)}
@keyframes drift{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-12px) rotate(calc(var(--r,0deg) + 2deg))}}
.scatter img{animation:drift 7s ease-in-out infinite}
.s1{--r:-9deg}.s2{--r:11deg;animation-delay:-1.4s}.s3{--r:5deg;animation-delay:-2.8s}
.s4{--r:-14deg;animation-delay:-4.2s}.s5{--r:8deg;animation-delay:-5.6s}
.hero-friend{position:absolute;left:-10px;bottom:-30px;width:clamp(96px,13vw,168px);animation:drift 8s ease-in-out infinite}
.btn-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:40px;align-items:center}
.btn{display:inline-block;padding:15px 28px;border-radius:999px;background:var(--btn);color:var(--btn-ink);
  text-decoration:none;font-weight:600;font-size:17px;transform:rotate(-1.2deg);transition:transform .3s var(--spring)}
.btn:hover{transform:rotate(1deg) translateY(-3px)}
.btn.plain{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--rule);transform:rotate(1deg)}
.btn.plain:hover{box-shadow:inset 0 0 0 2px var(--ink);transform:rotate(-1deg) translateY(-3px)}

/* wavy rule between sections */
.rule{width:100%;height:26px;color:var(--rule);overflow:visible;margin:clamp(40px,6vw,74px) 0}

/* the trail: apps wander down a dotted path, no cards */
.trail{position:relative;padding:clamp(20px,4vw,40px) 0 clamp(50px,8vw,90px)}
.trail-path{position:absolute;left:0;top:0;width:100%;height:100%;color:var(--ink-3);opacity:.5;overflow:visible}
.stop{text-decoration:none;position:relative;display:grid;grid-template-columns:140px 1fr;gap:clamp(20px,4vw,44px);
  align-items:center;margin:clamp(44px,7vw,86px) 0;max-width:720px}
.stop:nth-of-type(even){margin-left:auto;grid-template-columns:1fr 140px}
.stop:nth-of-type(even) .stop-art{order:2}
.stop:nth-of-type(even) .stop-copy{text-align:right}
.stop-art{position:relative;display:grid;place-items:center}
.stop-art .app{width:118px;filter:drop-shadow(0 18px 32px rgba(0,0,0,.32))}
.stop-art .pal{position:absolute;width:74px;right:-34px;bottom:-24px;transform:rotate(9deg)}
.stop:nth-of-type(even) .stop-art .pal{right:auto;left:-34px;transform:rotate(-9deg)}
.stop:nth-of-type(1) .app{transform:rotate(-5deg)}
.stop:nth-of-type(2) .app{transform:rotate(6deg)}
.stop:nth-of-type(3) .app{transform:rotate(-8deg)}
.stop:nth-of-type(4) .app{transform:rotate(4deg)}
.stop:nth-of-type(5) .app{transform:rotate(-3deg)}
.stop-copy .num{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--ink-3)}
.stop-copy h3{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.4vw,44px);margin:6px 0 0;line-height:1.1}
.stop-copy p{color:var(--ink-2);margin:10px 0 0;font-size:18px;max-width:34ch}
.stop:nth-of-type(even) .stop-copy p{margin-left:auto}
.tag{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ochre);box-shadow:0 1.5px 0 var(--ochre);margin-top:12px}
.stop:hover .stop-copy h3{box-shadow:0 3px 0 var(--ochre)}
.stop-copy h3{display:inline-block;transition:box-shadow .2s}
.stop:hover .app{transform:scale(1.06) rotate(0deg)}
.stop .app{transition:transform .4s var(--spring)}

/* a thought, floating — no panel, no card */
.think{position:relative;padding-block:clamp(40px,7vw,80px);display:grid;
  grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,80px);align-items:center}
.think .h3{max-width:17ch}
.think p{color:var(--ink-2);max-width:42ch}
.think-art{position:relative;display:grid;place-items:center;min-height:260px}
.think-art .big{width:clamp(150px,20vw,230px);animation:drift 9s ease-in-out infinite}
.note{position:absolute;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ink-3)}
.note.a{top:6%;left:0;transform:rotate(-7deg)}
.note.b{bottom:10%;right:2%;transform:rotate(5deg)}
.arrow{position:absolute;width:92px;color:var(--teal);overflow:visible;top:20%;left:12%}

/* the slab: soft, lopsided, creatures on the lip */
.slab{position:relative;margin:clamp(40px,7vw,80px) 0 0;padding:clamp(60px,9vw,120px) 0 clamp(120px,16vw,200px);
  background:var(--slab);color:var(--slab-ink);
  border-radius:48% 52% 46% 54% / 7% 8% 7% 6%;}
.slab .mono{color:color-mix(in srgb,var(--slab-ink) 55%,transparent)}
.slab .h2{max-width:16ch}
.slab p{color:color-mix(in srgb,var(--slab-ink) 72%,transparent);max-width:38ch}
.lineup{position:absolute;left:0;right:0;bottom:-6px;display:flex;justify-content:center;
  align-items:flex-end;gap:clamp(10px,4vw,52px);padding:0 24px;pointer-events:none}
.lineup img{width:clamp(66px,10vw,124px);margin-bottom:clamp(-30px,-2.6vw,-14px);animation:drift 6s ease-in-out infinite}
.lineup img:nth-child(2){animation-delay:-1.5s}
.lineup img:nth-child(3){animation-delay:-3s}
.lineup img:nth-child(4){animation-delay:-4.5s}

/* footer: a ground line */
.foot{padding-block:clamp(60px,9vw,110px) 50px}
.foot-cols{display:flex;flex-wrap:wrap;gap:clamp(28px,6vw,70px)}
.foot h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:400;margin:0 0 12px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot a{text-decoration:none;color:var(--ink-2)}
.foot a:hover{color:var(--ink);box-shadow:0 1.5px 0 var(--ochre)}
.foot-end{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:54px;
  font-family:var(--mono);font-size:12px;color:var(--ink-3)}

@media (max-width:900px){
  .think{grid-template-columns:1fr}
  .scatter{display:none}
  .hero .display{max-width:none}
}
@media (max-width:640px){
  body{font-size:18px}
  .top nav{display:none}
  .stop,.stop:nth-of-type(even){grid-template-columns:96px 1fr;margin-left:0}
  .stop:nth-of-type(even) .stop-art{order:0}
  .stop:nth-of-type(even) .stop-copy{text-align:left}
  .stop:nth-of-type(even) .stop-copy p{margin-left:0}
  .stop-art .app{width:88px}
  .stop-art .pal{width:52px;right:-18px;bottom:-14px}
  .lineup img:nth-child(4){display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* ---------- App sub-pages ---------- */

.app-top{position:relative;padding:clamp(30px,5vw,60px) 0 clamp(40px,6vw,70px)}
.app-top .wrap{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,52px);align-items:center}
.app-badge{position:relative;display:grid;place-items:center}
.app-badge .glyph{width:clamp(104px,13vw,164px);transform:rotate(-5deg);
  filter:drop-shadow(0 20px 36px rgba(0,0,0,.34));animation:drift 7s ease-in-out infinite}
.app-badge .pal{position:absolute;width:clamp(58px,7vw,86px);right:-30px;bottom:-22px;transform:rotate(10deg)}
.app-top .display{font-size:clamp(42px,6vw,80px)}
.app-top .lede{margin-top:18px}
.specs{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.specs span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);box-shadow:0 1.5px 0 var(--rule);padding-bottom:3px}

/* a block: words one side, a floating screenshot the other. no card, no frame. */
.block{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,76px);align-items:center;
  margin:clamp(56px,9vw,112px) 0;position:relative}
.block:nth-of-type(even) .block-copy{order:2}
.block-copy .mono{margin-bottom:12px}
.block-copy p{color:var(--ink-2);max-width:40ch}
.block-art{position:relative;display:grid;place-items:center}
.shot{width:100%;border-radius:14px;filter:drop-shadow(0 26px 50px rgba(0,0,0,.42));transform:rotate(-1.4deg)}
.block:nth-of-type(even) .shot{transform:rotate(1.6deg)}
.shot.phone{width:min(100%,276px);border-radius:30px}
.block-art .pal{position:absolute;width:clamp(62px,8vw,98px);z-index:2;animation:drift 6.5s ease-in-out infinite}
.pal-br{right:-16px;bottom:-26px;transform:rotate(9deg)}
.pal-bl{left:-20px;bottom:-24px;transform:rotate(-10deg)}
.pal-tr{right:-22px;top:-26px;transform:rotate(-7deg)}

/* creatures with something to say */
.says{position:absolute;z-index:3;font-family:var(--mono);font-size:11px;line-height:1.4;
  letter-spacing:.04em;background:var(--paper-2);color:var(--ink);padding:8px 12px;
  border:2px solid var(--ink);border-radius:16px 18px 15px 17px;max-width:15ch;transform:rotate(-3deg)}
.says::after{content:"";position:absolute;left:16px;bottom:-9px;width:10px;height:10px;
  background:var(--paper-2);border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);
  transform:rotate(38deg)}
.says.right{transform:rotate(3deg)}
.says.right::after{left:auto;right:16px}

/* a plain list of facts, no table chrome */
.facts{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px;max-width:44ch}
.facts li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;
  padding-bottom:11px;border-bottom:1px dashed var(--rule);color:var(--ink-2);font-size:17px}
.facts b{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ochre);font-weight:400;white-space:nowrap}

.more{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,46px);align-items:center;margin-top:30px}
.more a{display:flex;align-items:center;gap:14px;text-decoration:none}
.more img{width:62px;transform:rotate(-4deg);transition:transform .4s var(--spring)}
.more a:hover img{transform:rotate(5deg) scale(1.08)}
.more b{font-family:var(--serif);font-weight:400;font-size:23px}
.more span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-3)}

@media (max-width:860px){
  .block,.block:nth-of-type(even){grid-template-columns:1fr}
  .block:nth-of-type(even) .block-copy{order:0}
  .app-top .wrap{grid-template-columns:1fr}
  .app-badge{justify-self:start}
}


/* ---------- Not yet clickable ---------- */

.stop.is-soon{cursor:default}
.stop.is-soon .app,
.stop.is-soon .pal{filter:saturate(.45);opacity:.6}
.stop.is-soon .stop-copy h3,
.stop.is-soon .stop-copy p{color:var(--ink-3)}
.stop.is-soon .num{opacity:.7}

.more .soon{display:flex;align-items:center;gap:14px;cursor:default;opacity:.45}
.more .soon img{filter:saturate(.4)}
.foot .soon{color:var(--ink-3);cursor:default}