/* Home: full-screen pages, one scroll moves to the next.
   Without JS (or before it runs) the pages stack and scroll normally, snapping per page. */
:root{color-scheme:light;--paper:#f2f2f2;--ink:#141414;--dim:#6b6b6b;--faint:#9a9a9a;--line:#d9d9d9;--accent:#6f7fbf;--vh:100vh;--edge:min(clamp(16px,3.2vw,64px),calc(var(--vh)*.08));--ease:cubic-bezier(.76,0,.24,1);--dur:.9s}
@supports(height:100dvh){:root{--vh:100dvh}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink)}
html{scroll-snap-type:y mandatory}
body{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;-webkit-font-smoothing:antialiased}
a{color:inherit;-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
code{font:inherit}

/* Fixed chrome, the same on every page */
.mark{position:fixed;z-index:3;top:var(--edge);left:var(--edge);font-size:13px;letter-spacing:.04em;text-decoration:none}
.links{position:fixed;z-index:3;right:var(--edge);bottom:var(--edge);display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 25px;font-size:11px;line-height:1.5}
.links a{color:var(--dim);text-decoration:none;transition:color .2s}
.links a:hover{color:var(--ink)}
.dots{position:fixed;z-index:3;right:var(--edge);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px}
.dots button{display:block;width:18px;height:18px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.dots button::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--line);transition:background .3s,transform .3s}
.dots button:hover::after{background:var(--dim)}
.dots button[aria-current="true"]::after{background:var(--ink);transform:scale(1.35)}

/* Pages */
.slide{position:relative;height:var(--vh);overflow:hidden;scroll-snap-align:start}
.paged,.paged body{height:var(--vh);overflow:hidden;overscroll-behavior:none}
.paged .pager{position:fixed;inset:0;overflow:hidden}
.paged .track{transition:transform var(--dur) var(--ease);will-change:transform}

/* 1: the face, the line split around it */
.stage{--size:clamp(13px,1.35vw,26px);--lead:calc(var(--size)*1.35);--gap:clamp(28px,3vw,80px);--w:min(calc((100vw - var(--edge)*2)*.34),calc((var(--vh) - var(--edge)*2 - 160px)*1.55));--h:calc(var(--w)/1.553);position:absolute;inset:var(--edge)}
.hero{position:absolute;left:50%;top:50%;width:var(--w);height:var(--h);transform:translate(-50%,-50%);pointer-events:none}
.hero img{display:block;width:100%;height:100%;object-fit:contain;animation:breathe 7s ease-in-out infinite}
@keyframes breathe{50%{transform:translateY(-1.5%) scale(1.01)}}
.line{position:absolute;inset:50% 0 auto;display:grid;grid-template-columns:minmax(0,1fr) var(--w) minmax(0,1fr);column-gap:var(--gap);align-items:center;transform:translateY(-50%);margin:0;font-size:var(--size);font-weight:400;line-height:var(--lead);letter-spacing:.035em;pointer-events:none}
.line>span{white-space:nowrap;position:relative}
.line>span:first-child{grid-column:1;justify-self:end}
.line>span:last-child{grid-column:3;justify-self:start}
[data-reveal]>span>.ghost,[data-type]>.ghost{visibility:hidden}
[data-reveal]>span>.live,[data-type]>.live{position:absolute;inset:0}
html[data-motion=wait] [data-reveal]{visibility:hidden}
.sub{position:absolute;left:0;bottom:0;max-width:34ch;margin:0;font-size:11px;line-height:1.5;color:var(--dim)}
.cue{position:absolute;left:50%;bottom:0;margin:0;transform:translateX(-50%);font-size:10px;letter-spacing:.2em;color:var(--faint);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{50%{transform:translate(-50%,4px);opacity:.5}}

/* 2-6: big type */
.copy{position:absolute;left:var(--edge);right:calc(var(--edge) + 40px);top:50%;transform:translateY(-50%);max-width:1400px}
.kicker{margin:0 0 clamp(12px,2.4vh,28px);font-size:11px;letter-spacing:.16em;color:var(--faint)}
.big,.mid{position:relative;display:inline-block;margin:0;font-weight:400;line-height:.95;white-space:nowrap;color:var(--ink)}
.big{font-size:min(14vw,26vh);letter-spacing:-.02em}
.mid{font-size:min(7vw,13vh);letter-spacing:-.03em}
.what{max-width:56ch;margin:clamp(16px,3.4vh,40px) 0 0;font-size:clamp(14px,1.45vw,21px);line-height:1.55;color:var(--ink);text-wrap:pretty}
.what.small{font-size:clamp(13px,1.1vw,16px);color:var(--dim)}
.what code{padding:0 .3em;background:#e4e4e4}
.fact{display:flex;flex-wrap:wrap;gap:6px 28px;margin:clamp(14px,2.6vh,28px) 0 0;font-size:12px;color:var(--dim)}
.fact span::before{content:"— ";color:var(--faint)}
.fact s{color:var(--faint)}
.more{display:inline-block;margin-top:clamp(18px,3.6vh,40px);font-size:13px;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;transition:border-color .2s}
.more:hover{border-color:var(--ink)}


/* Install and get started */
.sh{display:flex;align-items:center;gap:12px;max-width:100%;margin:clamp(24px,5vh,56px) 0 0;padding:clamp(14px,2.2vh,22px) clamp(16px,1.6vw,24px);border:1px solid var(--ink);font-size:clamp(13px,1.6vw,24px)}
.sh code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.sh code::-webkit-scrollbar{display:none}
.pr{color:var(--faint);user-select:none}
.copy-btn{flex:none;padding:6px 12px;border:1px solid var(--line);background:none;font:inherit;font-size:11px;letter-spacing:.06em;color:var(--dim);cursor:pointer;transition:border-color .2s,color .2s}
.copy-btn:hover{border-color:var(--ink);color:var(--ink)}
.win{margin:12px 0 0;font-size:11px;color:var(--dim)}
.win code{color:var(--ink)}
.then{margin:clamp(16px,3vh,32px) 0 0;font:inherit;font-size:13px;line-height:1.7;color:var(--ink)}
.cm{color:var(--faint)}
.cta{display:flex;align-items:baseline;flex-wrap:wrap;gap:16px 28px;margin-top:clamp(20px,4vh,44px)}
.cta .more{margin:0}
.go{display:inline-block;padding:14px 26px;background:var(--ink);color:var(--paper);font-size:15px;letter-spacing:.02em;text-decoration:none;transition:background .2s}
.go:hover{background:#333}

/* Entering a page: the copy rises in after the slide lands */
.paged .slide .copy>*{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.paged .slide.on .copy>*{opacity:1;transform:none}
.paged .slide.on .copy>:nth-child(1){transition-delay:.25s}
.paged .slide.on .copy>:nth-child(2){transition-delay:.3s}
.paged .slide.on .copy>:nth-child(3){transition-delay:.45s}
.paged .slide.on .copy>:nth-child(4){transition-delay:.55s}
.paged .slide.on .copy>:nth-child(5){transition-delay:.65s}
.paged .slide.on .copy>:nth-child(6){transition-delay:.72s}
.paged .slide.on .copy>:nth-child(7){transition-delay:.8s}
.paged .intro .stage{transition:opacity .7s ease,transform var(--dur) var(--ease)}
.paged .intro:not(.on) .stage{opacity:.25;transform:scale(.96)}

@media(max-width:900px),(max-aspect-ratio:1/1){
  .stage{--size:clamp(13px,3.1vw,19px);--gap:clamp(24px,8vmin,56px);--w:min(calc((100vw - var(--edge)*2)*.8),480px,calc((var(--vh) - var(--edge)*2 - 200px - var(--lead)*2 - var(--gap)*2)*1.55))}
  .line{grid-template-columns:1fr;grid-template-rows:var(--lead) var(--h) var(--lead);gap:var(--gap) 0;text-align:center;letter-spacing:.02em}
  .line>span:first-child{grid-column:1;grid-row:1;justify-self:center}
  .line>span:last-child{grid-column:1;grid-row:3;justify-self:center}
  .sub{right:0;bottom:calc(1.5em + 18px);max-width:none;font-size:10px;text-align:center}
  .cue{display:none}
  .links{left:var(--edge);justify-content:center;gap:8px 18px;font-size:10px}
  .dots{right:calc(var(--edge) - 6px)}
  .copy{right:calc(var(--edge) + 18px);top:calc(50% - 16px)}
  .big{font-size:min(14.5vw,20vh)}
  .mid{font-size:min(9.5vw,10vh);white-space:normal}
  .then{display:none}
  .sh{font-size:12px;padding:12px}
}
@media(max-height:560px){.then,.fact,.win{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* Why froog: the three needs, each a ruled row that jumps to its product */
.mid.wrap{white-space:normal;max-width:18ch}
.why .mid{font-size:min(5vw,9vh);line-height:1;max-width:22ch}
.needs{list-style:none;margin:clamp(24px,5vh,56px) 0 0;padding:0;max-width:1100px;border-bottom:1px solid var(--line)}
.needs li{border-top:1px solid var(--ink)}
.needs a{display:grid;grid-template-columns:minmax(0,1fr) auto 2ch;align-items:baseline;gap:24px;padding:clamp(12px,2.2vh,22px) 0;text-decoration:none;transition:padding .3s cubic-bezier(.22,1,.36,1)}
.need{font-size:clamp(17px,2.2vw,32px);letter-spacing:-.01em}
.prod-n{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);transition:color .2s}
.arr{color:var(--faint);transition:transform .3s cubic-bezier(.22,1,.36,1),color .2s}
.needs a:hover{padding-left:10px}
.needs a:hover .prod-n,.needs a:hover .arr{color:var(--ink)}
.needs a:hover .arr{transform:translateX(4px)}
@media(max-width:900px),(max-aspect-ratio:1/1){
  .why .mid{font-size:min(9vw,7vh)}
  .needs a{grid-template-columns:minmax(0,1fr) 2ch;gap:4px 12px}
  .prod-n{grid-column:1;grid-row:2}
  .arr{grid-column:2;grid-row:1/3;align-self:center}
}

/* Product pages: the name split over two lines on the left, what it does on the right */
.prod .copy{display:grid;grid-template-columns:auto minmax(0,44ch);column-gap:clamp(32px,5vw,104px);align-items:end;max-width:none}
.prod .kicker{grid-column:1/-1}
.big.split{font-size:min(15vw,27vh);line-height:.86;letter-spacing:-.03em}
.big.split>span{display:block;position:relative;width:max-content}
.prod .aside{padding-bottom:.4vh}
.prod .aside .what{margin-top:0}
@media(max-width:900px),(max-aspect-ratio:1/1){
  .prod .copy{grid-template-columns:minmax(0,1fr)}
  .big.split{font-size:min(27vw,17vh)}
  .prod .aside{margin-top:clamp(16px,3vh,32px)}
}
.big.split{display:flex;flex-direction:column;width:max-content}
.big.split>span:last-child{align-self:flex-end}

/* Product pages: the price, under the facts */
.tag{display:flex;align-items:center;flex-wrap:wrap;gap:4px 14px;margin:clamp(16px,3vh,30px) 0 0;padding-top:clamp(10px,1.8vh,16px);border-top:1px solid var(--ink)}
.tag b{font-weight:400;font-size:clamp(28px,3.4vw,52px);letter-spacing:-.03em;line-height:1}
.tag span{flex:1 1 22ch;font-size:12px;line-height:1.5;color:var(--dim)}
.tag b{flex:none}