:root{
  color-scheme:dark;
  --paper:#15130e; --paper-2:#1d1a14; --ink:#f4efe2; --ink-2:#b5ad99; --ink-3:#8b8372;
  --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);
  --firefly:236,242,150; --woods-far:rgba(143,174,106,.055); --woods-near:rgba(143,174,106,.09);
}
:root[data-theme="light"]{
  color-scheme:light;
  --paper:#f7f3e9; --paper-2:#efe9da; --ink:#2c2318; --ink-2:#5c5343; --ink-3:#6f6756;
  --rule:rgba(44,35,24,.2); --grain:.045;
  --moss:#6b8a4c; --ochre:#805c12; --plum:#8260a0; --coral:#c55c47; --teal:#3f948f;
  --slab:#2c2318; --slab-ink:#f7f3e9; --btn:#2c2318; --btn-ink:#f7f3e9;
  --firefly:214,168,40; --woods-far:rgba(107,138,76,.08); --woods-near:rgba(107,138,76,.13);
}
@media (prefers-color-scheme:light){:root[data-theme="auto"]{
  color-scheme:light;
  --paper:#f7f3e9; --paper-2:#efe9da; --ink:#2c2318; --ink-2:#5c5343; --ink-3:#6f6756;
  --rule:rgba(44,35,24,.2); --grain:.045;
  --moss:#6b8a4c; --ochre:#805c12; --plum:#8260a0; --coral:#c55c47; --teal:#3f948f;
  --slab:#2c2318; --slab-ink:#f7f3e9; --btn:#2c2318; --btn-ink:#f7f3e9;
  --firefly:214,168,40; --woods-far:rgba(107,138,76,.08); --woods-near:rgba(107,138,76,.13);
}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
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;margin-left:auto}
.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;pointer-events:none;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-child(odd){margin-left:auto;grid-template-columns:1fr 140px}
.stop:nth-child(odd) .stop-art{order:2}
.stop:nth-child(odd) .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-child(odd) .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-child(odd) .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-child(odd){grid-template-columns:96px 1fr;margin-left:0}
  .stop:nth-child(odd) .stop-art{order:0}
  .stop:nth-child(odd) .stop-copy{text-align:left}
  .stop:nth-child(odd) .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}
}
/* the woods: a faint treeline and fireflies, fixed behind everything */
.woods,.fireflies{position:fixed;left:0;width:100%;pointer-events:none;z-index:-1}
.fireflies{top:0;height:100%}
.woods{bottom:0;height:min(34vh,300px)}
.woods svg{display:block;width:100%;height:100%}
.woods .far{fill:var(--woods-far)}
.woods .near{fill:var(--woods-near)}
.woods::before{content:"";position:absolute;inset:auto 0 0;height:60%;
  background:linear-gradient(to top,color-mix(in srgb,var(--moss) 7%,transparent),transparent)}

/* phones: no room for the scattered icons beside the headline, so the page
moves in other ways. icons bob, pals wiggle, stops rise in as they scroll in */
@keyframes wiggle{0%,100%{transform:rotate(var(--r,9deg))}50%{transform:rotate(calc(var(--r,9deg) * -1)) translateY(-4px)}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes rise{from{opacity:0;translate:0 38px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
@media (max-width:900px){
  .scatter{display:block}
  .scatter img{width:58px;opacity:.85}
  .s1{right:8%;top:auto;bottom:36%}
  .s3{right:6%;top:auto;bottom:9%}
  .s2,.s4,.s5{display:none}
  .stop-art .app{animation:bob 4.6s ease-in-out infinite}
  .stop:nth-of-type(2n) .app{animation-delay:-1.7s}
  .stop:nth-of-type(3n) .app{animation-delay:-3.1s}
  .stop-art .pal{--r:9deg;animation:wiggle 3.2s ease-in-out infinite}
  .stop:nth-of-type(even) .pal{--r:-9deg;animation-delay:-1.2s}
  .hero-friend{animation:drift 4.5s ease-in-out infinite}
  .lineup img{animation-duration:4s}
  .mark-word .underline path{stroke-dasharray:260;animation:draw 5s ease-in-out infinite}
}
@keyframes draw{0%{stroke-dashoffset:260}35%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-260}}
@supports (animation-timeline:view()){
  @media (max-width:900px){
    .stop{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  }
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{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}
.shot.popup{width:min(100%,340px);border-radius:18px}
.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}


/* the creature on its own, where the How we build section used to sit */
.perch{display:grid;place-items:center;padding-block:clamp(24px,4vw,46px)}
.perch img{width:clamp(120px,15vw,186px);animation:drift 9s ease-in-out infinite}


/* ---------- Plain pages: privacy, support, legal, contact ---------- */

.doc-top{padding:clamp(28px,5vw,56px) 0 clamp(18px,3vw,30px)}
.doc-top .display{font-size:clamp(38px,5.4vw,70px);max-width:18ch}
.doc-top .lede{margin-top:20px}
.updated{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin:18px 0 0}

/* one column, comfortable measure, no cards */
.doc{max-width:68ch;margin:0;padding-bottom:clamp(40px,7vw,80px)}
.doc h2{font-family:var(--serif);font-weight:400;font-size:clamp(25px,2.6vw,34px);line-height:1.2;
  margin:clamp(42px,6vw,66px) 0 0;scroll-margin-top:24px}
.doc h3{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2vw,26px);line-height:1.25;
  margin:34px 0 0}
.doc h2 + p,.doc h3 + p{margin-top:14px}
.doc p{color:var(--ink-2);font-size:18px}
.doc strong{color:var(--ink);font-weight:600}
.doc a{color:var(--ink);text-decoration:none;box-shadow:0 1.5px 0 var(--ochre)}
.doc a:hover{box-shadow:0 2.5px 0 var(--ochre)}
.doc ul,.doc ol{color:var(--ink-2);font-size:18px;margin:16px 0 0;padding-left:1.1em;display:grid;gap:10px}
.doc li{padding-left:4px}
.doc li::marker{color:var(--ochre)}
.doc code{font-family:var(--mono);font-size:.88em;color:var(--ink);
  background:color-mix(in srgb,var(--ink) 9%,transparent);padding:1px 6px;border-radius:5px}
.doc .rule{margin:clamp(34px,5vw,54px) 0}

/* a question and its answer, for the support pages */
.qa{margin:30px 0 0;padding-bottom:26px;border-bottom:1px dashed var(--rule)}
.qa:last-of-type{border-bottom:0}
.qa h3{margin:0}
.qa p{margin-top:10px}

/* a boxed aside, used sparingly, for the one thing people miss */
.callout{margin:26px 0 0;padding:20px 22px;border:2px solid var(--rule);border-radius:18px 20px 17px 19px;
  background:color-mix(in srgb,var(--paper-2) 70%,transparent)}
.callout p{margin:0;color:var(--ink-2);font-size:17px}
.callout p + p{margin-top:12px}
.callout b{color:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:400;display:block;margin-bottom:8px;color:var(--ochre)}

/* contact: one address, big, no form */
.address{font-family:var(--serif);font-size:clamp(26px,3.4vw,40px);line-height:1.3;margin:26px 0 0;
  display:inline-block;text-decoration:none;box-shadow:0 2px 0 var(--ochre)}
.address:hover{box-shadow:0 4px 0 var(--ochre)}

/* a short index of the app policies */
.cards{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px;max-width:46ch}
.cards a{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:center;text-decoration:none;
  box-shadow:none;padding:12px 0;border-bottom:1px dashed var(--rule)}
.cards img{width:48px;transform:rotate(-4deg);transition:transform .4s var(--spring)}
.cards a:hover img{transform:rotate(5deg) scale(1.08)}
.cards b{font-family:var(--serif);font-weight:400;font-size:21px;color:var(--ink)}
.cards span{display:block;font-size:16px;color:var(--ink-3)}

/* 404 */
.lost{text-align:center;padding:clamp(60px,12vw,140px) 0}
.lost img{width:clamp(110px,16vw,180px);margin:0 auto;animation:drift 7s ease-in-out infinite}
.lost .display{max-width:none;margin-top:30px}
.lost .lede{margin-left:auto;margin-right:auto}
.lost .btn-row{justify-content:center}