@font-face{font-family:"Averia Serif Libre";src:url(/fonts/averia-serif-libre.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(/fonts/source-sans-3-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(/fonts/source-sans-3-500.woff2) format("woff2");font-weight:500;font-display:swap}
:root{--page:#F3F1EC;--ink:#2A241E;--onink:#F3F1EC;--text:#24201B;--text2:#5E574E;--text3:#70685E;--hover:#EDE8DF;--hair:rgba(80,60,30,.10);
--lines:rgba(58,44,26,.07);--muted:#8C8478;--l1:rgba(255,253,248,.7);--l2:rgba(237,230,218,.5);color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--page:#121110;--ink:#F3EEE7;--onink:#121110;--text:#F3EEE7;--text2:#C8C0B4;--text3:#9E968B;--hover:#2A2622;--hair:rgba(255,240,220,.08);
--lines:rgba(255,244,228,.05);--muted:#7D766C;--l1:rgba(42,36,30,.5);--l2:rgba(26,23,20,.5)}}
*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%;background:var(--page)}
body{margin:0;color:var(--text);background:var(--page);overflow:hidden;font:400 17px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Source Sans 3",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
.display{font-family:"Averia Serif Libre",Georgia,serif;font-weight:400;letter-spacing:-.02em}
/* the paper: two soft lights, the breathing lines, the grain */
.paper{position:fixed;inset:0;pointer-events:none;
background:radial-gradient(60vmax 60vmax at 30% 30%,var(--l1),transparent 70%),radial-gradient(60vmax 60vmax at 80% 80%,var(--l2),transparent 70%)}
.paper .lines{position:absolute;inset:0;width:100%;height:100%;color:var(--lines)}
.paper::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22256%22%20height%3D%22256%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.9%22%20numOctaves%3D%222%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%20.5%20%200%200%200%200%20.5%20%200%200%200%200%20.5%20%200%200%200%20.09%200%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23n)%22%2F%3E%3C%2Fsvg%3E");opacity:.9;mix-blend-mode:multiply}
@media (prefers-color-scheme:dark){.paper::after{mix-blend-mode:screen;opacity:.35}}
/* the app's Button: lg 52, the ink capsule and the soft capsule; a brand's mark leads its label */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 24px;border-radius:999px;font-size:17px;font-weight:500;text-decoration:none;white-space:nowrap;transition:transform .15s ease}
.btn:active{transform:scale(.98)}
.btn .glyph{width:20px;height:20px}
.btn.primary{background:var(--ink);color:var(--onink)}
.btn.secondary{background:var(--hover);color:var(--text);box-shadow:inset 0 0 0 1px var(--hair)}
/* one fold: her line, the headline, the line under it, the capsules, on one rhythm, centred as a group */
.fold{position:relative;height:100svh;min-height:560px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px 72px}
.surface{position:relative;width:min(440px,37svh);height:min(440px,37svh)}
.stage .line{position:absolute;inset:0;display:block;width:100%;height:100%;color:var(--text);--line-page:var(--page)}
/* her drawing: moved by an SVG transform, so her pen keeps its weight inside a surface */
#herG{transform-box:view-box;transform-origin:50% 50%;transition:transform .85s cubic-bezier(.5,0,.15,1)}
#herG.out{transition:transform .7s cubic-bezier(.16,1,.3,1)}
#herG path{vector-effect:non-scaling-stroke}
/* the surfaces in her hand: drawn from the top centre in mirrored halves, details after, at her pen's weight */
.frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--text);stroke-width:5.2;stroke-linecap:round;stroke-linejoin:round}
.frame path{stroke-dasharray:1 2;stroke-dashoffset:1;opacity:0;transition:none}
.frame.on path{stroke-dashoffset:0;opacity:1;transition:stroke-dashoffset .7s cubic-bezier(.45,0,.2,1) calc(120ms + var(--i,0) * 160ms),opacity 0s linear calc(120ms + var(--i,0) * 160ms)}
.frame .faint{stroke-width:1.6}
.frame.on .faint{opacity:.3}
.frame .tick{stroke-width:5.6}
.frame.on .tick{stroke-dashoffset:1;opacity:0;transition:none}
.frame.on.sealed .tick{stroke-dashoffset:0;opacity:1;transition:stroke-dashoffset .3s cubic-bezier(.3,0,.1,1),opacity 0s}
/* release: lifted off forwards, then gone; nothing lingers */
.frame.on.off path{stroke-dashoffset:-1;opacity:0;transition:stroke-dashoffset .55s cubic-bezier(.4,0,.2,1) 60ms,opacity .14s linear .38s}
.frame.on.off .tick{stroke-dashoffset:-1;opacity:0;transition:stroke-dashoffset .15s ease-in,opacity .05s linear .12s}
.stage .line svg{display:block;width:100%;height:100%}
.copy{margin-top:clamp(8px,2svh,24px);width:min(1100px,100%)}
h1{margin:0;font-weight:400;display:flex;flex-direction:column;align-items:center}
/* one sentence in averia: "your go-to for" in ink, the task under it in grey */
h1 .lead,#for{font-size:clamp(44px,min(5.4vw,9.2svh),100px);line-height:1.08}
h1 .lead{color:var(--text)}
#for{color:var(--muted)}
#for{display:block;white-space:nowrap;max-width:100%;transition:opacity .26s ease,transform .26s ease}
#for[data-out]{opacity:0;transform:translateY(6px)}
.sub{font-size:clamp(17px,1.4vw,20px);color:var(--text2);margin:18px 0 32px}
.ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.foot{position:absolute;left:clamp(20px,5vw,72px);right:clamp(20px,5vw,72px);bottom:24px;display:flex;justify-content:space-between;gap:16px;font-size:13px;color:var(--text3)}
.foot div{display:flex;gap:18px;flex-wrap:wrap}
.foot a{text-decoration:none}.foot a:hover{color:var(--text)}
@media (prefers-reduced-motion:no-preference){
.copy>*{opacity:0;transform:translateY(6px);animation:rise .9s ease forwards}
.copy>:nth-child(1){animation-delay:.4s}.copy>:nth-child(2){animation-delay:.55s}.copy>:nth-child(3){animation-delay:.7s}
@keyframes rise{to{opacity:1;transform:none}}}
@media (max-width:820px){
.fold{padding:24px 20px 56px}
.surface{width:min(260px,34svh);height:min(260px,34svh)}
h1 .lead,#for{font-size:clamp(32px,9.4vw,42px)}
#for{white-space:normal}
.sub{font-size:17px;margin:12px 0 24px}
.ctas{flex-direction:column;width:100%;max-width:420px;margin:0 auto}
.ctas .btn{width:100%}
.foot{left:20px;right:20px;bottom:16px}
.foot div{display:none}
}
@media (max-width:820px) and (max-height:700px){.surface{width:180px;height:180px}}
/* tablets in portrait: a larger drawing and headline, the capsules at a phone's width */
@media (min-width:600px) and (max-width:820px){.surface{width:min(400px,32svh);height:min(400px,32svh)}h1 .lead,#for{font-size:clamp(48px,7vw,60px)}.sub{font-size:19px}}