/* First light: firnbrowser.com's stylesheet (design: design/first-light/).
   Light mode is "first light", dark mode ("blue hour") is the
   prefers-color-scheme block. Phone layout below 600px at the end. */
@font-face{font-family:'Fraunces';src:url(assets/fonts/fraunces.woff2) format('woff2');font-weight:100 900;font-display:swap}
:root{color-scheme:light dark;
--frame:#E9E3DA;--page:#FBFAF8;--ink:#241F1B;--muted:#5E564E;--faint:#9D9389;--line:rgba(60,40,20,.10);
--btn:#241F1B;--btn-ink:#FBFAF8;--field:#FFFFFF;--field-line:rgba(60,40,20,.12);
--frost:rgba(130,168,190,.45);--dot-glacier:#7F9CB0;
--shadow-page:0 1px 3px rgba(60,40,20,.14),0 6px 20px rgba(60,40,20,.2);
--shadow-win:0 2px 8px rgba(40,28,16,.14),0 18px 48px rgba(40,28,16,.22);
--shadow-field:0 1px 2px rgba(60,40,20,.06),0 6px 18px rgba(60,40,20,.07);
--sky-cool:rgba(157,183,200,.30);--sky-warm:rgba(242,196,160,.42);--sky-warm2:rgba(236,206,186,.30);--sky-top:#F4F6F7;
--light-1:#9DB7C8;--light-2:#F0CBA8;--light-3:#B9CDB5;--light-4:#E2CBB3;--light-op:.5;
--glass:rgba(251,250,248,.58);--glass-edge:rgba(255,255,255,.65);--glass-shadow:0 1px 2px rgba(40,60,80,.08),0 8px 24px rgba(40,60,80,.12);
--win-glass:rgba(233,227,218,.62);--tile:rgba(255,255,255,.5);--tile-on:rgba(255,255,255,.78);
--panel:linear-gradient(160deg,#EEF2F4,#F6EEE6);--wm-op:.10;
--sun:rgba(244,194,152,.62);--sun-mid:rgba(244,194,152,.22);
--snow:url(assets/firn-snow-layers-clear.svg);--flake:#7F9CB0;--flake-op:1;
--grain-op:.13;--grain-blend:multiply;--logo-l:block;--logo-d:none}
@media (prefers-color-scheme:dark){:root{--frame:#3A3734;--page:#2B2826;--ink:#F5F1EC;--muted:#D4CDC5;--faint:#958D85;--line:rgba(255,250,245,.09);
--btn:#F5F1EC;--btn-ink:#2B2826;--field:rgba(255,250,245,.08);--field-line:rgba(255,250,245,.12);
--frost:rgba(160,196,214,.45);--dot-glacier:#8FB0C6;
--shadow-page:0 1px 3px rgba(0,0,0,.3),0 6px 22px rgba(0,0,0,.35);
--shadow-win:0 2px 8px rgba(0,0,0,.3),0 18px 48px rgba(0,0,0,.4);
--shadow-field:0 1px 2px rgba(0,0,0,.15),0 6px 18px rgba(0,0,0,.18);
--sky-cool:rgba(110,152,178,.22);--sky-warm:rgba(214,146,104,.16);--sky-warm2:rgba(160,120,110,.10);--sky-top:#2E2F31;
--light-1:#4E6E84;--light-2:#7A5A48;--light-3:#4F6250;--light-4:#5B5070;--light-op:.55;
--glass:rgba(43,40,38,.55);--glass-edge:rgba(255,250,245,.10);--glass-shadow:0 1px 2px rgba(0,0,0,.25),0 8px 24px rgba(0,0,0,.3);
--win-glass:rgba(58,55,52,.62);--tile:rgba(255,250,245,.08);--tile-on:rgba(255,250,245,.14);
--panel:linear-gradient(160deg,rgba(110,152,178,.10),rgba(214,146,104,.07));--wm-op:.10;
--sun:rgba(214,140,96,.30);--sun-mid:rgba(214,140,96,.10);
--snow:url(assets/firn-snow-layers-dark-clear.svg);--flake:#7F9CB0;--flake-op:.6;
--grain-op:.5;--grain-blend:soft-light;--logo-l:none;--logo-d:block;}}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
.serif{font-family:'Fraunces',Georgia,serif;font-variation-settings:'SOFT' 100,'WONK' 0;font-optical-sizing:auto}
a{color:var(--ink)}
:focus-visible{outline:3px solid var(--frost);outline-offset:2px;border-radius:10px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2{text-wrap:balance}
/* frame + sheet */
.frame{background:var(--page);color:var(--ink);min-height:100vh}
.sheet{position:relative;background:var(--page);overflow:hidden;min-height:100vh;display:flex;flex-direction:column}
.sheet::after{content:"";position:absolute;inset:0;pointer-events:none;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .28 0 0 0 0 .2 0 0 0 0 .13 0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");opacity:var(--grain-op);mix-blend-mode:var(--grain-blend);z-index:5}
/* sky (morning glow) */
.sky{position:absolute;left:0;right:0;top:0;height:1250px;pointer-events:none;
 background:radial-gradient(900px 420px at 50% -10%,var(--sky-cool),transparent 70%),
  radial-gradient(760px 520px at 84% 70%,var(--sky-warm),transparent 68%),
  radial-gradient(620px 420px at 12% 58%,var(--sky-warm2),transparent 70%),
  linear-gradient(var(--sky-top),transparent 420px);
 -webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.sky.short{height:760px}
/* drifting flakes */
.fl{position:absolute;pointer-events:none;fill:var(--flake);z-index:1}
/* header */
header{position:relative;z-index:2;width:100%;max-width:1120px;margin:0 auto;padding:28px 32px;display:flex;align-items:center;justify-content:space-between;gap:16px}
header img{height:34px;display:block}
.logo-l{display:var(--logo-l)}.logo-d{display:var(--logo-d)}
nav.top{display:flex;gap:28px;font-size:15px}
nav.top a{text-decoration:none;color:var(--muted)}
nav.top a:hover,nav.top a[aria-current]{color:var(--ink)}
/* hero */
.hero{position:relative;padding:72px 32px 0;text-align:center}
.hero .c{position:relative;z-index:2;max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:24px}
.eyebrow{margin:0;font-size:15px;color:var(--muted)}
.eyebrow .short{display:none}
.hero h1{margin:0;font-size:76px;line-height:1.04;font-weight:360;letter-spacing:-.015em}
.hero h1 .em{font-weight:600;white-space:nowrap}
.lede{margin:0;font-size:19px;line-height:1.55;color:var(--muted)}
/* sign-up capsule */
.signup{width:100%;max-width:420px;margin-top:12px}
.capsule{display:flex;align-items:center;gap:6px;height:56px;padding:5px 5px 5px 20px;border:1px solid var(--field-line);border-radius:14px;background:var(--field);box-shadow:var(--shadow-field)}
.capsule:focus-within{box-shadow:0 0 0 3px var(--frost)}
.capsule input{flex:1;min-width:0;height:100%;border:0;outline:none;background:transparent;font:inherit;font-size:16px;color:var(--ink)}
.capsule input::placeholder{color:var(--faint)}
.capsule button{flex:none;height:44px;padding:0 20px;border:0;border-radius:10px;background:var(--btn);color:var(--btn-ink);font:inherit;font-size:15px;font-weight:500;cursor:pointer}
.thanks{margin:12px 0 0;padding:16px 22px;border-radius:14px;background:var(--glass);border:1px solid var(--glass-edge);font-size:16px}
/* stage: window on colour light */
.stage{position:relative;margin-top:72px;padding:64px 32px 72px}
.light{position:absolute;border-radius:50%;filter:blur(70px);opacity:var(--light-op);pointer-events:none}
.win{position:relative;z-index:2;max-width:1040px;margin:0 auto;border-radius:14px;padding:10px;background:var(--win-glass);border:1px solid var(--glass-edge);
 backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);box-shadow:var(--shadow-win)}
.win .in{display:flex;gap:10px;height:520px}
.side{flex:0 0 230px;display:flex;flex-direction:column;gap:14px;padding:8px 6px}
.bar{height:36px;border-radius:10px;background:var(--tile);display:flex;align-items:center;padding:0 12px;font-size:13px;color:var(--faint)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.tiles i{height:40px;border-radius:10px;background:var(--tile)}.tiles i:first-child{background:var(--tile-on)}
.lbl{font-size:12px;color:var(--muted);padding:6px 6px 0}
.tab{height:36px;border-radius:10px;display:flex;align-items:center;gap:10px;padding:0 12px;font-size:13px;color:var(--muted)}
.tab.on{background:var(--tile-on);color:var(--ink)}
.tab em{width:14px;height:14px;border-radius:4px}
.dots{margin-top:auto;display:flex;gap:10px;padding:6px}.dots em{width:10px;height:10px;border-radius:99px}
.pg{flex:1;border-radius:12px;background:var(--page);box-shadow:var(--shadow-page);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--faint)}
/* features */
h2{margin:0 0 48px;font-size:40px;line-height:1.15;font-weight:380;text-align:center}
.feats{position:relative;z-index:2;max-width:1040px;width:100%;margin:0 auto;padding:96px 32px 24px}
.row{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.row>div{padding:32px 24px;border-left:1px solid var(--line)}.row>div:first-child{border-left:0}
.row em{display:block;width:10px;height:10px;border-radius:99px;margin-bottom:18px}
.row h3{margin:0 0 8px;font-size:18px;font-weight:600}.row p{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}
/* statement */
.statement{position:relative;z-index:2;max-width:1040px;width:100%;margin:96px auto 0;padding:0 32px}
.statement .box{position:relative;overflow:hidden;border-radius:20px;background:var(--panel);padding:72px 64px}
.statement .wm{position:absolute;right:-90px;top:-80px;width:440px;height:440px;opacity:var(--wm-op);fill:#6E98B2}
.statement h2{text-align:left;margin:0 0 40px;font-size:48px;position:relative}
.lg{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:36px 56px}
.lg h3{margin:0 0 8px;font-size:22px;font-weight:400}.lg p{margin:0;font-size:16px;line-height:1.6;color:var(--muted)}
/* inner pages */
.intro{position:relative;z-index:2;max-width:720px;margin:0 auto;padding:64px 32px 0;text-align:center}
.intro h1{margin:0;font-size:56px;line-height:1.05;font-weight:360;letter-spacing:-.015em}
.intro p{margin:18px 0 0;font-size:19px;line-height:1.55;color:var(--muted);text-wrap:balance}
.notes{position:relative;z-index:2;max-width:880px;width:100%;margin:0 auto;padding:72px 32px 24px}
.entry{display:grid;grid-template-columns:180px 1fr;gap:32px;padding:40px 0;border-top:1px solid var(--line)}
.entry:first-child{border-top:0;padding-top:0}
.meta{font-size:14px;color:var(--muted);line-height:1.6}
.meta strong{display:block;font-weight:600;color:var(--ink);font-size:15px}
.badge{display:inline-block;margin-top:8px;padding:3px 10px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-edge);font-size:12px;color:var(--muted)}
.entry h2{text-align:left;margin:0 0 12px;font-size:30px;line-height:1.15}
.entry p{margin:0 0 20px;font-size:17px;line-height:1.6;color:var(--muted)}
.entry h3{margin:24px 0 8px;font-size:13px;font-weight:600}
.entry ul{margin:0;padding:0 0 0 20px;font-size:16px;line-height:1.7;color:var(--muted)}
.entry li::marker{color:var(--dot-glacier)}
.give{position:relative;z-index:2;max-width:560px;margin:36px auto 0;padding:0 32px;text-align:center}
.btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 26px;border-radius:10px;background:var(--btn);color:var(--btn-ink);text-decoration:none;font-size:16px;font-weight:500}
.btn svg{width:18px;height:18px;fill:currentColor}
.give small{display:block;margin-top:14px;font-size:14px;color:var(--muted)}
.where{position:relative;z-index:2;max-width:1040px;width:100%;margin:0 auto;padding:88px 32px 0}
.where h2,.other h2{margin:0 0 32px;font-size:32px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{border-radius:14px;padding:28px;background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.card h3{margin:0 0 8px;font-size:17px;font-weight:600}.card p{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}
.other{position:relative;z-index:2;max-width:720px;width:100%;margin:0 auto;padding:80px 32px 24px}
.other ul{list-style:none;margin:0;padding:0}
.other li{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:18px 4px;border-top:1px solid var(--line);font-size:16px}
.other li:last-child{border-bottom:1px solid var(--line)}
.other li span{color:var(--muted);font-size:15px;text-align:right}
/* dawn: sunrise behind the snow, footer pills on it */
.dawn{position:relative;margin-top:auto;padding-top:40px;height:600px;overflow:hidden;flex:none}
.dawn .sun{position:absolute;left:50%;bottom:-50px;width:1500px;height:540px;transform:translateX(-50%);pointer-events:none;
 background:radial-gradient(closest-side,var(--sun),var(--sun-mid) 50%,transparent)}
.dawn .snow{position:absolute;left:0;right:0;bottom:0;height:clamp(240px,20vw,288px);background:var(--snow) center bottom/max(100%,1100px) auto no-repeat}
.pills{position:absolute;left:0;right:0;bottom:36px;z-index:3;max-width:1040px;margin:0 auto;padding:0 32px;display:flex;justify-content:space-between;gap:12px}
.pill{display:flex;align-items:center;gap:20px;height:44px;padding:0 20px;border-radius:999px;font-size:14px;color:var(--ink);
 background:var(--glass);border:1px solid var(--glass-edge);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:var(--glass-shadow)}
.pill p{margin:0}
.pill a{color:var(--ink);text-decoration:none}.pill a:hover{text-decoration:underline}
.pill i{width:1px;height:16px;background:var(--line)}
@media (prefers-reduced-motion:no-preference){.capsule button,.btn,nav.top a{transition:opacity .2s cubic-bezier(.33,1,.68,1),color .2s}.capsule{transition:box-shadow .2s cubic-bezier(.33,1,.68,1)}}
/* phones */
@media (max-width:600px){
 header{padding:22px 24px 6px} header img{height:30px} nav.top{gap:20px;font-size:14px}
 .hero{padding:40px 24px 0}.hero .c{gap:18px}
 .eyebrow{font-size:14px}.eyebrow .long{display:none}.eyebrow .short{display:inline}
 .hero h1{font-size:46px;line-height:1.02}.lede{font-size:17px;line-height:1.5}.lede br{display:none}
 .stage{margin-top:28px;padding:40px 16px 48px}
 .win{width:1040px;max-width:none;zoom:.335}
 .feats{padding:64px 24px 16px}h2{font-size:30px;margin-bottom:28px}
 .row{grid-template-columns:1fr}.row>div{border-left:0;border-top:1px solid var(--line);padding:24px 4px}.row>div:first-child{border-top:0}
 .statement{margin-top:56px;padding:0 16px}.statement .box{padding:44px 24px}.statement h2{font-size:34px;margin-bottom:28px}
 .statement .wm{width:280px;height:280px;right:-80px;top:-60px}
 .lg{grid-template-columns:1fr;gap:24px}
 .intro{padding:40px 24px 0}.intro h1{font-size:42px}.intro p{font-size:17px}
 .notes{padding:48px 24px 16px}.entry{grid-template-columns:1fr;gap:12px;padding:32px 0}.entry h2{font-size:26px}
 .where,.other{padding-left:24px;padding-right:24px}.where{padding-top:64px}.other{padding-top:56px}
 .where h2,.other h2{font-size:28px}.cards{grid-template-columns:1fr}
 .other li{flex-direction:column;gap:4px}.other li span{text-align:left}
 .dawn{height:420px}
 .dawn .sun{width:760px;height:380px;bottom:-40px}
 .hero .fl{display:none}
 .sky{height:820px}.sky.short{height:560px}
 .light{width:240px !important;height:190px !important;filter:blur(44px)}
 .pills{flex-direction:column;align-items:center;bottom:24px;padding:0 16px;gap:10px}
 .pill{height:auto;min-height:40px;padding:10px 16px;gap:14px;font-size:13px;flex-wrap:wrap;justify-content:center}
}

/* Live-site additions (not in the design files) */
/* Sign-up: error message, spam trap, busy button */
.signup-error{margin:12px 0 0;font-size:14px;color:var(--ink)}
.trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.capsule button:disabled{cursor:progress;opacity:.7}
/* The hero's floating flakes sit on the text below about 970px wide; the
   design hides them on phones, this extends that to tablets. */
@media (max-width:999px){.hero .fl{display:none}}
/* Smooth scrolling. The window's live backdrop blur, combined with the
   full-page grain blending on top of it, made the browser redo a large
   blur and blend on every scroll frame (about 20 fps over the haze).
   - The window keeps its semi-clear glass colour but drops the live blur:
     behind it are only already-blurred colour glows, so blurring them
     again changed nothing visible.
   - The grain sits under the content (sky, glows, snow) instead of on top
     of everything. Visually within 8/255 of the design at every pixel.
   The footer pills and support cards keep their real frosted blur. */
.win{backdrop-filter:none;-webkit-backdrop-filter:none}
.sheet::after{z-index:0}
/* iPhone: the page runs under the status bar (viewport-fit=cover). Safari
   tints the status-bar strip from the page background, so it's the sky's
   top colour; the header and footer pills keep clear of the status bar,
   home indicator and (in landscape) the notch. iOS text autosizing is off
   so the scaled mockup's small text isn't enlarged. */
html,body{background:var(--sky-top)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
header{padding-top:calc(28px + env(safe-area-inset-top));padding-left:max(32px,env(safe-area-inset-left));padding-right:max(32px,env(safe-area-inset-right))}
.pills{bottom:calc(36px + env(safe-area-inset-bottom));padding-left:max(32px,env(safe-area-inset-left));padding-right:max(32px,env(safe-area-inset-right))}
/* Phones: the window mockup is drawn at its full 1040×542px and scaled down
   as one picture with transform (Safari's zoom let the sidebar text
   reflow). .win-fit takes the scaled size so the page flows around it.
   --s keeps it inside the 16px side padding on narrower phones. */
@media (max-width:600px){
 header{padding-top:calc(22px + env(safe-area-inset-top));padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
 .pills{bottom:calc(24px + env(safe-area-inset-bottom));padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
 .win-fit{--s:.335;width:calc(1040px * var(--s));height:calc(542px * var(--s));margin:0 auto}
 .win{zoom:normal;transform:scale(var(--s));transform-origin:0 0}
}
@media (max-width:380px){.win-fit{--s:.31}}
@media (max-width:354px){.win-fit{--s:.27}}
/* Smallest phones: at 46px, the bold "for everyone." (277px) is wider than
   the 272px text area at 320px. 44px keeps it inside the margins. */
@media (max-width:339px){.hero h1{font-size:44px}}