/* Almanac marketing site. Shared by every page of the website. No build step.
   The look: a framed page with hairline rails, oversized regular-weight headlines in two tones,
   serif copy, warm panels with corner marks, and product pictures drawn in real HTML. */
:root{
  --bg:#FFFFFF; --canvas:#F4F4F5; --surface:#FFFFFF; --raised:#F4F4F5; --rail:#FAFAFA; --hover:#F7F7F8;
  --line:#EBEBED; --line2:#DCDCE0; --text:#0A0A0B; --ink2:#3F3F46; --muted:#71717A; --faint:#A1A1AA;
  --brand:#2F6BFF; --brandsoft:#EEF3FF; --brandtext:#1D4ED8; --good:#22C55E; --goodtext:#16A34A; --goodsoft:#E8FAEF; --warn:#FFB020; --warntext:#D98200; --warnsoft:#FFF5DC;
  --btn:#0A0A0B; --btntext:#FFFFFF; --glass:rgba(255,255,255,.8); --warm:#F5F3EE; --mark:#C9C5BB;
  --shadow:0 1px 2px rgba(10,10,11,.04),0 24px 60px rgba(10,10,11,.10);
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0B0B0D; --canvas:#09090B; --surface:#121214; --raised:#1C1C1F; --rail:#101012; --hover:#18181B;
    --line:#242428; --line2:#303036; --text:#FAFAFA; --ink2:#D4D4D8; --muted:#A1A1AA; --faint:#6B6B74;
    --brand:#6E9BFF; --brandsoft:#14213F; --brandtext:#93B4FF; --good:#30D158; --goodtext:#4ADE80; --goodsoft:#0F2D1B; --warn:#FFC53D; --warntext:#FFCA4D; --warnsoft:#2E2408;
    --btn:#FAFAFA; --btntext:#09090B; --glass:rgba(11,11,13,.8); --warm:#151412; --mark:#3A3833;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 24px 60px rgba(0,0,0,.5);
  }
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font:400 16px/1.55 var(--sans);letter-spacing:-.011em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;letter-spacing:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
img,svg{display:block}
.wrap{max-width:1208px;margin:0 auto;padding:0 40px}
.frame{max-width:1208px;margin:0 auto;border-inline:1px solid var(--line)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:6px;border:1px solid var(--line2);background:var(--surface);font-weight:500;font-size:15px;cursor:pointer;white-space:nowrap;transition:transform .12s,background .12s,opacity .12s}
.btn:hover{background:var(--hover)}
.btn:active{transform:scale(.98)}
.btn.pri{background:var(--btn);border-color:var(--btn);color:var(--btntext)}
.btn.pri:hover{opacity:.86;background:var(--btn)}
.btn.sm{height:34px;padding:0 12px;font-size:13.5px}
.mk{position:relative;width:22px;height:22px;border-radius:6px;background:var(--text);flex:none;display:block}
.mk::after{content:"";position:absolute;left:25%;right:25%;bottom:25%;height:25%;border-radius:6px 6px 0 0;background:var(--bg)}

/* announcement bar and nav */
.announce{position:relative;display:flex;justify-content:center;align-items:center;gap:10px;height:38px;font-size:13.5px;background:var(--warm);overflow:hidden}
.announce .art{position:absolute;top:0;bottom:0;width:26%}
.announce .art:first-child{left:0;-webkit-mask-image:linear-gradient(90deg,#000 55%,transparent);mask-image:linear-gradient(90deg,#000 55%,transparent)}
.announce .art:last-child{right:0;-webkit-mask-image:linear-gradient(270deg,#000 55%,transparent);mask-image:linear-gradient(270deg,#000 55%,transparent)}
.announce span,.announce a{position:relative}
.announce a{font-weight:500;text-decoration:underline;text-underline-offset:3px}
.nav{position:sticky;top:0;z-index:30;background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:30px;height:60px}
.logo{display:flex;align-items:center;gap:9px;font-weight:600;font-size:16px;letter-spacing:-.02em}
.nav nav{display:flex;gap:24px;font-size:14px;color:var(--muted)}
.nav nav a:hover,.nav nav a.here{color:var(--text)}
.nav .end{margin-left:auto;display:flex;gap:8px;align-items:center;font-size:14px}
.nav .end>a:not(.btn){padding:0 8px;color:var(--ink2)}

/* type */
.eyebrow{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.eyebrow::before{content:"";width:6px;height:6px;background:var(--good)}
h1,h2{font-weight:450}
h1{font-size:clamp(44px,6.4vw,84px);line-height:1;letter-spacing:-.045em}
h2{font-size:clamp(32px,4.2vw,54px);line-height:1.04;letter-spacing:-.04em}
h3{font-weight:600;font-size:17px;letter-spacing:-.02em;line-height:1.3}
.dim{color:var(--faint)}
.lead{font-family:var(--serif);font-size:clamp(17px,1.5vw,19px);line-height:1.5;letter-spacing:0;color:var(--text);max-width:620px}
.sec{padding:104px 0;border-top:1px solid var(--line)}
.sec.tint{background:var(--warm)}
.sec-h{max-width:780px}
.sec-h h2{margin-top:16px}
.sec-h .lead{margin-top:18px}
.sec-h.mid{margin:0 auto;text-align:center}
.sec-h.mid .eyebrow,.sec-h.mid .name{justify-content:center}
.sec-h.mid .lead{margin-left:auto;margin-right:auto}
.name{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;font-weight:500;color:var(--text);border:1px solid var(--line2);padding:3px 9px 3px 8px;border-radius:6px}
.name i{width:7px;height:7px;border-radius:50%;background:var(--good)}
.name i.b{background:var(--brand)} .name i.w{background:var(--warn)}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.fine{margin-top:16px;font-size:13.5px;color:var(--muted)}

/* painted art (drawn by paint() in site.js) and corner marks */
.art{position:relative;overflow:hidden;background:#EDE7DA;display:block}
.art svg{position:absolute;inset:0;width:100%;height:100%}
.marks{position:relative}
.marks::after{content:"";position:absolute;inset:14px;pointer-events:none;background:linear-gradient(var(--mark),var(--mark)) 0 0/5px 5px no-repeat,linear-gradient(var(--mark),var(--mark)) 100% 0/5px 5px no-repeat,linear-gradient(var(--mark),var(--mark)) 0 100%/5px 5px no-repeat,linear-gradient(var(--mark),var(--mark)) 100% 100%/5px 5px no-repeat}

/* hero */
.hero{position:relative;padding:92px 0 0;text-align:center}
.hero .wrap{position:relative}
.hero h1{margin:22px auto 0;max-width:820px;position:relative;z-index:1}
.hero .lead{margin:24px auto 0;position:relative;z-index:1}
.hero .cta{justify-content:center}
.tile-a{position:absolute;z-index:0;border-radius:2px}
.t1{left:40px;top:-8px;width:150px;height:200px}
.t2{left:-8px;top:170px;width:128px;height:128px}
.t3{right:40px;top:6px;width:170px;height:128px}
.t4{right:0;top:120px;width:120px;height:170px}
.rot{display:inline-flex;align-items:center;gap:.22em;white-space:nowrap}
.rot i{display:inline-grid;place-items:center;width:.82em;height:.82em;border-radius:.2em;background:var(--goodsoft);color:var(--goodtext);font-style:normal}
.rot i svg{width:58%;height:58%}
.stage{position:relative;margin-top:72px;padding:56px 56px 0;border-radius:10px 10px 0 0;overflow:hidden;text-align:left}
.stage>.art{position:absolute;inset:0}
.stage>.win{position:relative;max-width:1000px;margin:0 auto;border-bottom:0;border-radius:14px 14px 0 0;background:var(--canvas);box-shadow:0 30px 80px rgba(20,16,8,.28)}
.float{position:absolute;z-index:3;width:270px;padding:12px 14px;border-radius:12px;background:var(--surface);box-shadow:0 0 0 1px var(--line2),0 18px 50px rgba(10,10,11,.18);font-size:13px;line-height:1.45;opacity:0}
.float small{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;color:var(--muted);margin-bottom:5px}
.float small i{width:7px;height:7px;border-radius:50%;background:var(--good)}
.float b{font-weight:500}
.float p{color:var(--muted);margin-top:2px}
.f1{top:96px;right:18px}
.f2{bottom:40px;left:18px}
.strip{display:flex;border-top:1px solid var(--line);font-size:13.5px;font-weight:500}
.strip>*{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;height:60px;box-shadow:-1px 0 0 var(--line);white-space:nowrap;padding:0 12px}
.strip>span:first-child{color:var(--muted);font-weight:400;box-shadow:none}

/* product pictures: the app's own pieces, drawn in HTML */
.win{border:1px solid var(--line2);border-radius:12px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden;font-size:13px;line-height:1.45;letter-spacing:-.006em;text-align:left}
.app{display:grid;grid-template-columns:200px minmax(0,1fr);min-height:452px}
.side{padding:12px 8px;display:flex;flex-direction:column;gap:1px;font-weight:500;color:var(--muted)}
.side .ws{display:flex;align-items:center;gap:8px;padding:4px 8px 12px;color:var(--text);font-weight:600}
.side .ws .mk{width:18px;height:18px;border-radius:5px}
.side .ws .mk::after{background:var(--canvas)}
.side a{display:flex;justify-content:space-between;padding:4px 8px;border-radius:7px}
.side a.on{background:rgba(120,120,130,.14);color:var(--text)}
.side a em{font-style:normal;font-weight:400;font-size:12px}
.side small{padding:12px 8px 4px;font-size:12px;color:var(--faint)}
.panel{background:var(--surface);border-left:1px solid var(--line);border-top:1px solid var(--line);border-radius:10px 0 0 0;margin-top:10px;min-width:0}
.ph{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px 4px}
.ph b{font-weight:600;font-size:15px;letter-spacing:-.018em}
.ph span{color:var(--muted)}
.pills{display:flex;gap:5px;padding:8px 18px 12px;flex-wrap:wrap}
.pill{height:26px;padding:0 10px;border:1px solid var(--line);border-radius:8px;font-size:12px;font-weight:500;color:var(--muted);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
button.pill:hover{color:var(--text)}
.pill.on{background:rgba(120,120,130,.14);border-color:transparent;color:var(--text)}
.bar{display:flex;align-items:center;gap:8px;height:30px;padding:0 18px;background:var(--rail);border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:12.5px}
.bar b{font-weight:500}
.bar span{color:var(--muted)}
.row{display:flex;align-items:center;gap:10px;height:36px;padding:0 18px;min-width:0;transition:background .5s}
.row.flash{background:var(--goodsoft)}
.row b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:60px}
.row .s{flex:1;min-width:0;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .r{display:flex;align-items:center;gap:6px;margin-left:auto;flex:none}
.tag{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border:1px solid var(--line2);border-radius:999px;font-size:11.5px;color:var(--ink2);white-space:nowrap;background:var(--surface)}
.tag i{width:7px;height:7px;border-radius:50%;background:var(--faint)}
.tag i.g{background:var(--good)} .tag i.w{background:var(--warn)} .tag i.b{background:var(--brand)}
.num{font-family:var(--mono);font-size:12px;color:var(--muted);min-width:52px;text-align:right}
.av{width:20px;height:20px;border-radius:50%;background:var(--raised);display:grid;place-items:center;font-size:9px;font-weight:600;color:var(--ink2);flex:none}
.gl{width:14px;height:14px;flex:none}
.lg{width:18px;height:18px;border-radius:4px;flex:none}
.act{height:24px;padding:0 9px;border:1px solid var(--line2);border-radius:6px;font-size:12px;font-weight:500;display:inline-flex;align-items:center;background:var(--surface);white-space:nowrap}
.pad{padding:18px 20px}
.k{font-family:var(--mono);font-size:10.5px;padding:1px 6px;border-radius:5px;background:var(--raised);color:var(--ink2)}
.k.al{background:var(--brandsoft);color:var(--brandtext)}
.k.you{background:var(--text);color:var(--bg)}
.tok{background:var(--brandsoft);color:var(--brandtext);border-radius:5px;padding:1px 5px;font-weight:500;white-space:nowrap}
.tok.c{background:var(--raised);color:var(--text)}
.tok img{display:inline-block;width:15px;height:15px;margin-right:5px;vertical-align:-2px;border-radius:3px}
.steps{display:grid;margin-top:14px}
.steps div{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.steps div span:last-child{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap}
.m{align-self:flex-start;max-width:86%;padding:8px 12px;border-radius:14px 14px 14px 4px;background:var(--raised)}
.m.me{align-self:flex-end;background:var(--btn);color:var(--btntext);border-radius:14px 14px 4px 14px}
.capb{height:6px;border-radius:3px;background:var(--raised);flex:1;min-width:60px;overflow:hidden}
.capb i{display:block;height:100%;background:var(--good);border-radius:3px}
.capb i.w{background:var(--warn)}

/* feature rows */
.feat{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:72px;align-items:center}
.feat.flip>div:first-child{order:2}
.feat h2{margin-top:16px;font-size:clamp(30px,3.6vw,46px)}
.feat .lead{margin-top:18px}
.pts{list-style:none;padding:0;margin-top:24px;display:grid;gap:12px}
.pts li{display:grid;grid-template-columns:18px 1fr;gap:10px;color:var(--ink2);font-size:15.5px}
.pts li::before{content:"";width:6px;height:6px;background:var(--good);margin:9px 0 0 4px}
.pts b{color:var(--text);font-weight:600}

/* the problem: one question, twelve tabs */
.words span{opacity:.16}
.sprawl{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:16px;margin-top:56px;align-items:stretch}
.sp-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.sp-h b{font-weight:500;color:var(--text)}
.sp-h em{font-style:normal;font-family:var(--mono);font-size:12px}
.tabbar{display:flex;flex-wrap:wrap;gap:4px;padding:10px 12px;background:var(--rail);border-bottom:1px solid var(--line)}
.tb{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border-radius:7px;font-size:12px;color:var(--muted);border:1px solid transparent;white-space:nowrap}
.tb.on{background:var(--surface);border-color:var(--line2);color:var(--text);box-shadow:0 1px 2px rgba(10,10,11,.06)}
.tb.did{color:var(--faint)}
.tb .lg{width:14px;height:14px}
.sp-b{padding:16px;min-height:178px;display:flex;flex-direction:column;gap:10px}
.sp-q{font-weight:500;font-size:15px;letter-spacing:-.015em}
.sp-now{color:var(--muted);min-height:20px}
.sp-found{display:flex;flex-wrap:wrap;gap:6px}
.sp-one{display:flex;flex-direction:column}
.sp-one .sp-b{flex:1;justify-content:center;gap:14px}
.sp-row{display:flex;align-items:center;gap:10px}
.sp-row b{font-weight:500;font-size:15px}
.sp-tags{display:flex;flex-wrap:wrap;gap:6px}
.math{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:16px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.math div{padding:20px 22px;box-shadow:-1px 0 0 var(--line)}
.math b{display:block;font-weight:450;font-size:40px;letter-spacing:-.04em;line-height:1}
.math span{display:block;margin-top:8px;color:var(--muted);font-size:14px}

/* onboarding timeline */
.tl{padding:8px 20px 18px}
.tl-i{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line);opacity:.35;transition:opacity .4s}
.tl-i:first-child{border-top:0}
.tl-i.on{opacity:1}
.tl-i .ic{width:28px;height:28px;border-radius:7px;border:1px solid var(--line);display:grid;place-items:center;background:var(--surface)}
.tl-i .ic .lg{width:16px;height:16px}
.tl-i .ic svg{width:15px;height:15px;color:var(--ink2)}
.tl-i b{display:block;font-weight:500}
.tl-i small{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:12px;flex-wrap:wrap}
.tl-i small .lg{width:13px;height:13px}
.tl-i em{font-style:normal;font-size:12px;color:var(--muted);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.tl-i.on em{color:var(--goodtext)}
.kick{display:flex;align-items:center;gap:14px;margin:4px 20px 20px;padding:14px 16px;border-radius:10px;background:var(--goodsoft);opacity:0}
.kick .cal{width:44px;border-radius:8px;overflow:hidden;background:var(--surface);text-align:center;box-shadow:0 0 0 1px var(--line2);flex:none}
.kick .cal small{display:block;font-size:10px;font-weight:600;color:#fff;background:var(--good);padding:1px 0;letter-spacing:.04em}
.kick .cal b{display:block;font-weight:600;font-size:19px;line-height:1.5}
.kick b{font-weight:600}
.kick span{display:block;color:var(--ink2);font-size:12.5px}

/* Signal: a code block and the tags it installs */
.code{margin-top:28px;border-radius:10px;background:#0E0E11;color:#E4E4E7;font-family:var(--mono);font-size:12.5px;line-height:1.75;overflow:hidden;box-shadow:0 18px 50px rgba(10,10,11,.2)}
.code-h{display:flex;align-items:center;gap:7px;padding:9px 12px;border-bottom:1px solid #26262B;color:#8B8B94;font-size:11.5px}
.code-h i{width:9px;height:9px;border-radius:50%;background:#34343B}
.code-h span{margin-left:8px;padding:2px 9px;border-radius:5px;background:#1C1C20;color:#D4D4D8}
.code-h button{margin-left:auto;color:#D4D4D8;border:1px solid #34343B;border-radius:5px;padding:1px 9px;font-family:var(--sans);font-size:12px}
.code-h button:hover{background:#1C1C20}
.code pre{margin:0;padding:12px 0;overflow-x:auto}
.code pre div{padding:0 16px 0 0;white-space:pre}
.code pre div::before{content:attr(data-n);display:inline-block;width:38px;text-align:right;margin-right:16px;color:#4B4B55}
.code pre div.hl{background:rgba(34,197,94,.13);box-shadow:inset 2px 0 0 #22C55E}
.code .c{color:#6B6B76} .code .t{color:#7CC4FA} .code .a{color:#B5E48C} .code .s{color:#FFD08A}
.snip-n{margin-top:10px;font-size:13.5px;color:var(--muted)}
.px-row{display:flex;align-items:center;gap:12px;padding:13px 18px;border-top:1px solid var(--line);opacity:0}
.px-row:first-of-type{border-top:0}
.px-row .lg{width:20px;height:20px}
.px-row b{font-weight:500;min-width:150px}
.px-ev{display:flex;gap:5px;flex-wrap:wrap;flex:1;min-width:0}
.px-ev span{font-family:var(--mono);font-size:11px;padding:1px 7px;border-radius:5px;background:var(--raised);color:var(--ink2)}
.px-st{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap}
.px-st i{width:7px;height:7px;border-radius:50%;background:var(--warn);animation:blink 1s infinite}
.px-row.live .px-st{color:var(--goodtext)}
.px-row.live .px-st i{background:var(--good);animation:none}
@keyframes blink{50%{opacity:.35}}
.px-f{display:flex;justify-content:space-between;gap:12px;padding:11px 18px;border-top:1px solid var(--line);background:var(--rail);font-size:12.5px;color:var(--muted)}
.px-f b{color:var(--text);font-weight:500}

/* Presence */
.pres{margin-top:52px}
.pres-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line)}
.seg{display:inline-flex;padding:3px;border-radius:9px;background:var(--raised);gap:2px}
.seg button{height:30px;padding:0 13px;border-radius:7px;font-size:13px;font-weight:500;color:var(--muted)}
.seg button.on{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(10,10,11,.1)}
.pres-top .pills{padding:0}
.pres-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.pres-l{padding:24px;border-right:1px solid var(--line)}
.pres-l small{color:var(--muted);font-size:12.5px}
.pres-l .bigrow{display:flex;align-items:baseline;gap:10px;margin-top:6px}
.pres-l .bigrow b{font-weight:450;font-size:54px;letter-spacing:-.05em;line-height:1}
.up{font-family:var(--mono);font-size:12.5px;color:var(--goodtext)} .down{font-family:var(--mono);font-size:12.5px;color:var(--warntext)}
.chart{width:100%;height:150px;margin-top:14px;overflow:visible}
.chart .ar{fill:var(--goodsoft)} .chart .ln{fill:none;stroke:var(--good);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.chart .gd{stroke:var(--line);stroke-width:1}
.mo{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:6px}
.score{display:flex;align-items:center;gap:12px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.ring{position:relative;width:54px;height:54px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:9;stroke:var(--line)}
.ring circle.v{stroke:var(--good);stroke-linecap:round;transition:stroke-dashoffset .9s cubic-bezier(.2,.7,.2,1),stroke .4s}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-weight:600;font-size:16px;letter-spacing:-.03em}
.score p{font-size:13.5px;color:var(--muted)}
.score strong{display:block;color:var(--text);font-weight:600}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start}
.tile{padding:18px 20px 20px;box-shadow:-1px 0 0 var(--line),0 -1px 0 var(--line);min-width:0}
.tile small{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12.5px}
.tile small svg,.tile small .lg{width:15px;height:15px}
.tile b{display:block;margin-top:10px;font-weight:600;font-size:26px;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.tile b span{font-size:14px;font-weight:500;color:var(--muted);letter-spacing:-.01em;margin-left:4px}
.tile p{margin-top:8px;font-size:12.5px;color:var(--muted)}
.tile p.g{color:var(--goodtext)} .tile p.w{color:var(--warntext)}
.tile.own{background:var(--rail)}
.cl{padding:26px 28px}
.cl h3{font-size:24px;font-weight:450;letter-spacing:-.03em}
.cl-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:18px}
.cl-c{border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.cl-c h4{font-weight:500;font-size:12px;color:var(--muted);margin-bottom:6px}
.cl-c .w{font-weight:450;font-size:32px;letter-spacing:-.04em;line-height:1.1}
.cl-c .li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid var(--line);font-size:13px}
.cl-c .li:first-of-type{border-top:0}
.cl-c .li span{color:var(--muted);font-family:var(--mono);font-size:11px;white-space:nowrap}
.cl-ask{display:flex;align-items:center;gap:8px;margin-top:10px;height:38px;padding:0 6px 0 12px;border:1px solid var(--line2);border-radius:9px;color:var(--faint)}
.cl-ask span{flex:1}
.cl-ask i{width:26px;height:26px;border-radius:7px;background:var(--btn);color:var(--btntext);display:grid;place-items:center;font-style:normal;font-size:12px}
.srcs{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;margin-top:22px;font-size:13.5px;color:var(--muted)}
.srcs span{display:inline-flex;align-items:center;gap:7px}

/* two-up */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:120px}
.duo>div{border-radius:12px;background:var(--warm);padding:32px 32px 0;display:flex;flex-direction:column;overflow:hidden}
.duo h2{font-size:clamp(24px,2.6vw,32px);margin-top:14px}
.duo .lead{font-size:16px;margin-top:12px}
.duo .win{margin-top:28px;border-bottom:0;border-radius:12px 12px 0 0;box-shadow:0 1px 2px rgba(10,10,11,.04),0 14px 40px rgba(10,10,11,.07);flex:1}

/* Front Desk */
.fd-h{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:48px;align-items:end}
.fd-h .lead{margin-top:20px;max-width:560px}
.fd-h .art{height:200px;border-radius:2px}
.fd{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);margin-top:56px}
.fd-demo{background:var(--warm);min-height:560px;padding:56px 40px 64px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.msgr{width:min(400px,100%);border-radius:14px;background:#fff;color:#111;box-shadow:0 0 0 1px rgba(17,17,17,.08),0 24px 60px rgba(40,30,10,.16);overflow:hidden;--raised:#F3F2EE;--btn:#111;--btntext:#fff}
.msgr-h{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid #ECEAE4}
.msgr-h .face{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;background:#111;color:#fff;font-weight:600;font-size:12px}
.msgr-h b{display:block;font-weight:600;font-size:14.5px;letter-spacing:-.015em}
.msgr-h small{display:block;color:#77736A;font-size:12px}
.msgr-b{display:flex;flex-direction:column;justify-content:flex-end;gap:7px;height:330px;padding:16px;overflow:hidden;font-size:14px;line-height:1.45}
.msgr-b .sys{align-self:center;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#15803D;background:#E8FAEF;border-radius:6px;padding:3px 9px}
.dots{display:inline-flex;gap:4px;padding:4px 0}
.dots i{width:6px;height:6px;border-radius:50%;background:#A8A49A;animation:blink 1s infinite}
.dots i:nth-child(2){animation-delay:.15s} .dots i:nth-child(3){animation-delay:.3s}
.msgr-f{display:flex;align-items:center;gap:8px;margin:0 12px 12px;padding:0 6px 0 13px;height:42px;border:1px solid #DEDBD2;border-radius:10px;color:#A8A49A;font-size:14px}
.msgr-f span{flex:1}
.msgr-f i{width:28px;height:28px;border-radius:7px;background:#111;color:#fff;display:grid;place-items:center;font-style:normal;font-size:13px}
.fd-cap{margin-top:22px;font-family:var(--mono);font-size:12px;color:var(--muted);min-height:18px;text-align:center}
.fd-cap b{font-weight:500;color:var(--text)}
.fd-list{display:flex;flex-direction:column}
.fd-i{display:block;width:100%;text-align:left;padding:26px 0 26px 40px;border-top:2px solid var(--line);position:relative;color:var(--faint);transition:color .2s}
.fd-i::before{content:"";position:absolute;left:14px;top:34px;width:7px;height:7px;background:currentColor}
.fd-i b{display:block;font-weight:450;font-size:21px;letter-spacing:-.025em;line-height:1.25}
.fd-i span{display:block;max-height:0;overflow:hidden;font-family:var(--serif);font-size:16px;line-height:1.5;transition:max-height .35s ease,margin .35s ease}
.fd-i[aria-pressed="true"]{color:var(--text);border-top-color:var(--good)}
.fd-i[aria-pressed="true"]::before{background:var(--good)}
.fd-i[aria-pressed="true"] span{max-height:160px;margin-top:8px;color:var(--ink2)}
.fd-i:hover{color:var(--text)}
.banner{position:relative;display:flex;align-items:center;gap:28px;margin-top:64px;padding:26px 34px;min-height:128px;overflow:hidden;border-radius:2px;color:#111}
.banner>.art{position:absolute;inset:0}
.banner>.art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#F5F3EE 0,#F5F3EE 30%,rgba(245,243,238,0) 62%)}
.banner div:not(.art){position:relative;flex:1;min-width:0}
.banner h3{font-family:var(--serif);font-weight:400;font-size:34px;letter-spacing:-.02em;line-height:1.1}
.banner p{margin-top:6px;font-size:15px;color:#3F3F46;max-width:430px}
.banner .btn{position:relative;background:#0A0A0B;border-color:#0A0A0B;color:#fff}

/* hairline grids: feature cells, cards, plans */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:52px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.cell{padding:26px 26px 28px;box-shadow:-1px 0 0 var(--line),0 -1px 0 var(--line)}
.cell svg{width:20px;height:20px;color:var(--goodtext)}
.cell h3{margin-top:14px}
.cell p{margin-top:6px;color:var(--ink2);font-size:14.5px}
.cell ul{list-style:none;padding:0;margin-top:14px;display:grid;gap:7px;font-size:14px;color:var(--ink2)}
.cell li{display:flex;gap:9px;align-items:baseline}
.cell li::before{content:"";width:5px;height:5px;background:var(--faint);flex:none;transform:translateY(-2px)}
.cell .k{display:inline-block}
.card{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:24px}

/* integrations: rows of logo pills drifting past each other */
.marq{margin-top:48px;display:grid;gap:12px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marq-r{display:flex;width:max-content;animation:slide 46s linear infinite}
.marq-r:nth-child(2){animation-direction:reverse;animation-duration:58s}
.marq-r:nth-child(3){animation-duration:66s}
.marq:hover .marq-r{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.lp{display:inline-flex;align-items:center;gap:10px;height:46px;margin-right:12px;padding:0 16px 0 13px;border:1px solid var(--line2);border-radius:999px;background:var(--surface);font-size:14.5px;font-weight:500;white-space:nowrap;transition:transform .15s,box-shadow .15s}
.lp:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(10,10,11,.1)}
.lp .lg{width:20px;height:20px}

/* pricing teaser, faq, closing form, footer */
.teaser{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.faq{margin-top:40px;border-top:1px solid var(--line);max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:18px 0;font-weight:500;font-size:17px;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--muted);font-weight:400;font-size:20px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 40px 20px 0;color:var(--ink2);font-size:15.5px;max-width:700px}
.close{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:64px;align-items:center}
.form{padding:24px;display:grid;gap:12px}
.form label{display:grid;gap:5px;font-size:13.5px;color:var(--ink2);font-weight:500}
.form input,.form select{height:42px;border:1px solid var(--line2);border-radius:6px;padding:0 12px;background:var(--bg);font-size:15px;font-weight:400;width:100%}
.form input:focus,.form select:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--brandsoft)}
.form .btn{margin-top:4px}
.form p{font-size:13px;color:var(--muted)}
.thanks{font-weight:500;color:var(--goodtext)!important;font-size:15px!important}
footer{border-top:1px solid var(--line);padding:28px 0 40px;color:var(--muted);font-size:13.5px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer nav{display:flex;gap:20px}

.rise{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rise,.float,.px-row,.kick,.tl-i,.words span{opacity:1!important;transform:none!important;transition:none!important}
  .marq-r,.dots i,.px-st i{animation:none!important}
  html{scroll-behavior:auto}
}
@media (max-width:1100px){.tile-a{display:none}}
@media (max-width:900px){
  .wrap{padding:0 24px}
  .feat,.close,.duo,.sprawl,.fd,.fd-h,.pres-g{grid-template-columns:minmax(0,1fr);gap:36px}
  .fd,.pres-g{gap:0}
  .feat.flip>div:first-child{order:0}
  .duo{margin-top:80px}
  .grid3,.math{grid-template-columns:minmax(0,1fr)}
  .sec{padding:72px 0}
  .nav nav{display:none}
  .app{grid-template-columns:minmax(0,1fr)}
  .side,.float,.fd-h .art{display:none}
  .panel{border-left:0;border-radius:0;margin-top:0}
  .pres-l{border-right:0;border-bottom:1px solid var(--line)}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stage{padding:20px 14px 0}
  .fd-demo{min-height:0;padding:36px 16px 40px}
  .banner{flex-direction:column;align-items:flex-start}
  .banner>.art::after{background:rgba(245,243,238,.82)}
  .strip{flex-wrap:wrap}
  .strip>*{flex:1 1 33%}
  .duo>div{padding:24px 20px 0}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .hero{padding-top:56px}
  .hide-s{display:none}
  .nav .end>a:not(.pri){display:none}
  .tiles,.cl-g{grid-template-columns:minmax(0,1fr)}
  .px-row b{min-width:0}
  .px-ev{display:none}
  .code{font-size:11px}
  .strip>*{flex:1 1 50%}
}

/* the full footer, written by site.js */
.foot{padding:0;border-top:1px solid var(--line);background:var(--warm);color:var(--ink2);font-size:14.5px}
.foot-g{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(4,minmax(0,1fr));gap:40px;padding-top:64px;padding-bottom:52px}
.foot-b p{margin:14px 0 20px;font-family:var(--serif);font-size:17px;line-height:1.45;color:var(--text);max-width:280px}
.foot h4{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.foot-g>div:not(.foot-b) a{display:block;padding:4px 0}
.foot-g>div:not(.foot-b) a:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2)}
.foot-e{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:18px;padding-bottom:18px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.foot-art{height:64px}
@media (max-width:900px){.foot-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;padding-top:44px}.foot-b{grid-column:1/-1}}

/* ---------- Pass five: product pictures as scenes. Painted art that drifts slowly, with rounded
   cards and notifications floating over it, so nothing looks like a plain bordered box. ---------- */
@keyframes drift{to{transform:translate3d(-2.5%,2%,0) scale(1.09) rotate(.8deg)}}
.scene{position:relative;border-radius:14px;overflow:hidden;padding:40px;isolation:isolate}
.scene>.art{position:absolute;inset:-7%;z-index:-1;animation:drift 36s ease-in-out infinite alternate}
.scene>.art::after{content:"";position:absolute;inset:0;background:rgba(245,243,238,.42)}
.stage>.art{inset:-7%;animation:drift 40s ease-in-out infinite alternate}
.cardx{background:var(--surface);border-radius:16px;box-shadow:0 0 0 1px rgba(17,17,17,.06),0 24px 60px rgba(30,22,8,.2);overflow:hidden;font-size:13.5px;line-height:1.45;letter-spacing:-.006em;text-align:left}

/* notifications: approvals in the hero, the calendar invite in onboarding */
.note{position:absolute;z-index:4;width:300px;border-radius:16px;background:color-mix(in srgb,var(--surface) 93%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 0 0 1px rgba(17,17,17,.07),0 22px 54px rgba(20,14,4,.28);padding:12px 14px 14px;font-size:13px;line-height:1.4;text-align:left;opacity:0}
.note-h{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted)}
.note-h .lg{width:16px;height:16px}
.note-h time{margin-left:auto}
.note>b,.note .inv-b b{display:block;margin-top:7px;font-weight:600;font-size:14px;letter-spacing:-.015em}
.note p{color:var(--ink2);margin-top:2px}
.note-a{display:flex;gap:6px;margin-top:11px}
.note-a span{flex:1;height:30px;border-radius:8px;display:grid;place-items:center;font-weight:500;font-size:12.5px;background:var(--raised);transition:background .2s,color .2s}
.note-a span.go{background:var(--btn);color:var(--btntext)}
.note-a span.done{background:var(--good);color:#fff}
.n-l{left:16px;bottom:38px}
.n-r{right:16px;top:92px}
.inv{position:absolute;right:18px;bottom:18px;width:310px}
.inv-b{display:flex;gap:12px;align-items:center;margin-top:10px}
.inv-b b{margin-top:0!important}
.inv .cal{width:46px;border-radius:9px;overflow:hidden;background:var(--surface);text-align:center;box-shadow:0 0 0 1px var(--line2);flex:none}
.inv .cal small{display:block;font-size:10px;font-weight:600;color:#fff;background:#EA4335;padding:2px 0;letter-spacing:.05em}
.inv .cal b{display:block;font-weight:600;font-size:20px;line-height:1.45;margin:0}
.inv-g{display:flex;align-items:center;gap:6px;margin-top:10px;color:var(--muted);font-size:12px}
.inv-g .av+.av{margin-left:-10px;box-shadow:0 0 0 2px var(--surface)}

/* onboarding card */
.ol{max-width:470px}
.ol-h{display:flex;align-items:center;gap:11px;padding:16px 18px 12px}
.av2{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-weight:600;font-size:13px;color:#fff;background:#111;flex:none}
.ol-h b{display:block;font-weight:600;font-size:15px;letter-spacing:-.015em}
.ol-h small{display:block;color:var(--muted);font-size:12.5px}
.ol-t{margin-left:auto;font-family:var(--mono);font-size:12px;padding:4px 9px;border-radius:999px;background:var(--goodsoft);color:var(--goodtext);white-space:nowrap}
.ol-bar{height:4px;margin:0 18px;border-radius:2px;background:var(--line);overflow:hidden}
.ol-bar i{display:block;height:100%;width:0;border-radius:2px;background:var(--good);transition:width .6s cubic-bezier(.2,.7,.2,1)}
.ol .tl{padding:6px 18px 96px}
.ol .tl-i{grid-template-columns:36px minmax(0,1fr) auto;padding:11px 0;opacity:.3}
.ol .tl-i .ic{width:36px;height:36px;border-radius:50%;border:0;background:var(--raised)}
.ol .tl-i .ic .lg{width:18px;height:18px}
.ol .tl-i em{font-family:var(--mono);font-size:11.5px}
.ol .tl-i.on{opacity:1}

/* the problem: a browser full of dashboards against one summary */
.saf{border-radius:12px;overflow:hidden;background:#E9E9EB;box-shadow:0 0 0 1px rgba(17,17,17,.12),0 18px 44px rgba(10,10,11,.12);font-size:12px;color:#3c3c43;display:flex;flex-direction:column}
.saf-bar{display:flex;align-items:center;gap:12px;padding:9px 12px}
.saf-bar .tl3{display:flex;gap:6px}
.saf-bar .tl3 i{width:11px;height:11px;border-radius:50%;background:#FF5F57}
.saf-bar .tl3 i:nth-child(2){background:#FEBC2E} .saf-bar .tl3 i:nth-child(3){background:#28C840}
.saf-nav{color:#8e8e93;font-size:17px;letter-spacing:6px;line-height:1}
.saf-url{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:26px;border-radius:7px;background:#fff;color:#3c3c43;font-size:12px;min-width:0;overflow:hidden;white-space:nowrap}
.saf-url svg{width:10px;height:10px;flex:none;color:#8e8e93}
.saf-clock{font-family:var(--mono);font-size:12px;font-weight:500;color:#111;min-width:42px;text-align:right}
.saf-tabs{display:flex;gap:1px;padding:0 8px;background:#DCDCDF}
.saf-tabs .tb{flex:1 1 0;min-width:0;height:28px;padding:0 7px;border-radius:7px 7px 0 0;border:0;justify-content:center;gap:5px;font-size:11px;color:#6e6e73;overflow:hidden}
.saf-tabs .tb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:none}
.saf-tabs .tb.on{flex:3.4 1 0;background:#fff;color:#111;box-shadow:none}
.saf-tabs .tb.on span{display:block}
.saf-tabs .tb.did{opacity:.55}
.saf-page{height:236px;background:#fff;overflow:hidden}
.saf-foot{padding:10px 12px 12px;background:#F4F4F5;border-top:1px solid #DCDCDF;min-height:86px}
.saf-foot p{color:#6e6e73;margin-bottom:8px;min-height:17px}
.saf-foot .sp-found{gap:5px}
.saf-foot .tag{height:20px;font-size:11px;background:#fff;border-color:#D0D0D4;color:#3c3c43}
.ug{height:100%;display:flex;flex-direction:column;font-size:8.5px;line-height:1.2;color:#444;font-family:Arial,Helvetica,sans-serif;letter-spacing:0}
.ug-h{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;color:#fff;font-weight:700;font-size:10px}
.ug-h span{font-weight:400;font-size:8.5px;background:rgba(255,255,255,.22);padding:2px 6px;border-radius:2px}
.ug-m{flex:1;display:flex;min-height:0}
.ug-n{width:62px;background:#f1f3f4;border-right:1px solid #d6d6d6;padding:8px 7px;display:grid;gap:7px;align-content:start}
.ug-n i{height:5px;background:#c9ccd1;border-radius:1px}
.ug-n i:nth-child(3n){width:70%} .ug-n i:nth-child(2){background:#8ab4f8}
.ug-b{flex:1;min-width:0;padding:7px 8px;overflow:hidden}
.ug-f{display:flex;gap:4px;margin-bottom:6px;flex-wrap:wrap}
.ug-f span{border:1px solid #c4c7c5;border-radius:2px;padding:2px 5px;background:#fff;white-space:nowrap}
.ug-r{display:grid;grid-template-columns:1.6fr repeat(6,1fr);border-bottom:1px solid #e3e3e3}
.ug-r span{padding:3.5px 3px;text-align:right;white-space:nowrap;overflow:hidden;border-right:1px solid #f0f0f0}
.ug-r span:first-child{text-align:left;color:#1a73e8}
.ug-r span.bad{background:#fde7e9;color:#c5221f} .ug-r span.ok{background:#e6f4ea;color:#137333}
.ug-c{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:7px}
.ug-bars{display:flex;align-items:flex-end;gap:2px;height:54px;border:1px solid #dadce0;padding:4px;background:#fafafa}
.ug-bars i{flex:1;background:#4285f4}
.ug-bars:nth-child(2) i{background:#f9ab00} .ug-bars:nth-child(3) i{background:#9aa0a6}
.ug-w{background:#fff4ce;border:1px solid #f1c21b;padding:5px 7px;margin-bottom:6px;color:#5c4400;font-weight:700}
.ug-s{display:grid;grid-template-columns:1fr 70px 22px;gap:8px;align-items:center;padding:5px 0;border-bottom:1px dotted #cfcfcf}
.ug-s i{height:11px;border:1px solid #b0b0b0;background:#fff}
.ug-s b{height:10px;border-radius:5px;background:#9aa0a6}
.ug-s:nth-child(odd) b{background:#34a853}
.ug-x{display:grid;grid-template-columns:repeat(10,1fr);border-top:1px solid #d0d0d0;border-left:1px solid #d0d0d0}
.ug-x span{height:19px;padding:3px 3px;text-align:right;border-right:1px solid #d0d0d0;border-bottom:1px solid #d0d0d0;overflow:hidden}
.sprawl{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch}
.sprawl .scene{display:flex;align-items:center;justify-content:center;padding:34px}
.sum{width:100%;max-width:440px}
.sum-h{display:flex;align-items:center;gap:11px;padding:16px 18px 0}
.sum-h b{display:block;font-weight:600;font-size:15px;letter-spacing:-.015em}
.sum-h small{display:block;color:var(--muted);font-size:12.5px}
.sum-h .ol-t{background:var(--raised);color:var(--ink2)}
.sum-s{padding:14px 18px 6px;font-family:var(--serif);font-size:18px;line-height:1.4;letter-spacing:0}
.sum-r{display:flex;align-items:center;gap:10px;padding:9px 18px;border-top:1px solid var(--line);opacity:0}
.sum-r .lg{width:20px;height:20px}
.sum-r b{font-weight:500;min-width:112px}
.sum-r span{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sum-r i.d{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--good);flex:none}
.sum-r i.d.w{background:var(--warn)}
.sum-f{display:flex;gap:6px;padding:14px 18px 16px;border-top:1px solid var(--line)}
.sum-f span{height:30px;padding:0 12px;border-radius:8px;display:inline-grid;place-items:center;font-weight:500;font-size:12.5px;background:var(--raised)}
.sum-f span:first-child{background:var(--btn);color:var(--btntext)}

/* Signal: the site at the top, a pulse, and a tile per platform */
.sig-top{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;max-width:420px;margin:0 auto}
.sig-top code{font-family:var(--mono);font-size:11.5px;padding:2px 7px;border-radius:6px;background:#0E0E11;color:#B5E48C}
.sig-top b{font-weight:500}
.sig-top em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.sig-wire{position:relative;width:2px;height:34px;margin:0 auto;background:rgba(17,17,17,.14);overflow:hidden}
.sig-wire i{position:absolute;left:0;right:0;height:14px;background:var(--good);animation:pulse 1.2s linear infinite}
@keyframes pulse{from{top:-14px}to{top:34px}}
.sig-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sig-t{padding:14px 14px 12px;border-radius:14px;opacity:0}
.sig-t .lg{width:26px;height:26px;border-radius:6px}
.sig-t b{display:block;margin-top:10px;font-weight:600;font-size:13.5px;letter-spacing:-.01em}
.sig-t .px-ev{margin-top:6px;gap:4px}
.sig-t .px-ev span{font-size:10px;padding:1px 5px}
.sig-t .px-st{margin-top:10px}
.sig-t.live .px-st{color:var(--goodtext)}
.sig-t.live .px-st i{background:var(--good);animation:none;box-shadow:0 0 0 4px var(--goodsoft)}

/* Presence: softer cards and a small picture in every tile */
.pres-scene{margin-top:52px;padding:34px}
.pres-scene .pres{margin-top:0;border:0;border-radius:16px;box-shadow:0 0 0 1px rgba(17,17,17,.06),0 24px 60px rgba(30,22,8,.2)}
.pres-g{background:var(--rail)}
.pres-l{background:var(--surface);border-right:0;margin:12px 0 12px 12px;border-radius:12px;box-shadow:0 0 0 1px var(--line)}
.tiles{gap:10px;padding:12px}
.tile{border-radius:12px;background:var(--surface);box-shadow:0 0 0 1px var(--line);padding:15px 16px 16px}
.tile.own{background:var(--surface);box-shadow:0 0 0 1px var(--line),inset 0 2px 0 var(--good)}
.viz{margin-top:10px;height:22px;display:flex;align-items:center;gap:4px}
.viz .bar{flex:1;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.viz .bar i{display:block;height:100%;border-radius:3px}
.viz svg{width:100%;height:22px}
.viz svg polyline{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.viz .st5{color:var(--warn);font-size:15px;letter-spacing:2px;line-height:1}
.viz .st5 i{font-style:normal;color:var(--line2)}
.viz .dt{width:14px;height:14px;border-radius:50%;background:var(--good)}
.viz .dt.w{background:var(--warn)}
.viz .lg{width:18px;height:18px}
.viz .lg.off{opacity:.22;filter:grayscale(1)}

/* the footer: painted, moving, with the wordmark faded into it */
.foot{position:relative;overflow:hidden;isolation:isolate}
.foot-bg{position:absolute;inset:auto 0 0 0;height:72%;z-index:-1;-webkit-mask-image:linear-gradient(to top,#000 0,rgba(0,0,0,.6) 38%,transparent 100%);mask-image:linear-gradient(to top,#000 0,rgba(0,0,0,.6) 38%,transparent 100%)}
.foot-bg .art{position:absolute;inset:-8%;animation:drift 44s ease-in-out infinite alternate}
.foot-word{display:flex;align-items:center;justify-content:center;gap:.14em;font-weight:600;font-size:clamp(84px,20vw,290px);line-height:.86;letter-spacing:-.06em;color:rgba(255,255,255,.62);margin:12px 0 -.13em;user-select:none;white-space:nowrap}
.foot-word i{display:block;width:.62em;height:.62em;border-radius:.17em;background:rgba(255,255,255,.62);position:relative;flex:none}
.foot-word i::after{content:"";position:absolute;left:25%;right:25%;bottom:25%;height:25%;border-radius:.2em .2em 0 0;background:rgba(245,243,238,.75)}
.foot-e{border-top-color:rgba(17,17,17,.1)}

@media (prefers-reduced-motion:reduce){.scene>.art,.stage>.art,.foot-bg .art,.sig-wire i{animation:none!important}.note,.sum-r,.sig-t{opacity:1!important}}
@media (max-width:900px){
  .scene{padding:18px}
  .note{display:none}
  .inv{display:block;position:relative;right:auto;bottom:auto;width:auto;margin-top:12px}
  .ol{max-width:none}
  .ol .tl{padding-bottom:10px}
  .sig-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pres-scene{padding:14px}
  .pres-l{margin:12px 12px 0}
  .saf-page{height:200px}
}

/* Scroll polish: no live noise filters, full-width backdrop blur or parallax. */
.art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nav{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
.note{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}
.scene>.art,.stage>.art,.foot-bg .art{animation:none;inset:0}
.rise{opacity:1;transform:none;transition:none}
.rise.in{animation:arrive .4s cubic-bezier(.2,.7,.2,1) both}
@keyframes arrive{from{opacity:.6;transform:translateY(10px)}to{opacity:1;transform:none}}
.foot{background:var(--bg);padding-top:64px}
.foot .foot-intro{display:flex;align-items:center;justify-content:space-between;gap:28px;padding-bottom:48px;border-bottom:1px solid var(--line)}
.foot-label{display:block;color:var(--muted);font-size:16px;margin-bottom:8px}
.foot-intro h2{font-size:clamp(32px,4vw,54px);line-height:1.08;letter-spacing:-.045em;font-weight:500;color:var(--text)}
.foot .foot-g{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:28px;padding-top:48px;padding-bottom:48px}
.foot-g a:not(.btn){transition:color .18s,transform .18s}
.foot-g>div:not(.foot-b) a:hover{transform:translateX(3px);text-decoration:none}
.foot-word{color:var(--line2);font-size:clamp(64px,19vw,260px);margin:36px 0 0;padding:0 12px 20px;line-height:1;gap:.12em}
.foot-word i{background:var(--line2)}
.foot-word i::after{background:var(--bg)}
.demo-credentials{border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--rail);font-size:13px}
.demo-credentials>span{color:var(--muted)}
.demo-credentials p{margin:6px 0 12px}
.demo-credentials strong{font-family:var(--mono);font-weight:500}
.demo-credentials button{font-weight:500;color:var(--brandtext);padding:4px 0}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
@media(max-width:900px){.foot .foot-g{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-b{grid-column:1/-1}.foot .foot-intro{align-items:flex-start;flex-direction:column}.foot{padding-top:40px}}
@media(prefers-reduced-motion:reduce){.rise.in{animation:none}.foot-g a:not(.btn){transition:none}}
/* Native disclosure navigation: keyboard/touch friendly, no hover trap. */
.nav-menu summary{cursor:pointer;list-style:none;color:var(--ink2);padding:18px 0}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu summary span{margin-left:4px}
.mega{position:absolute;top:100%;left:50%;transform:translateX(-50%);width:min(720px,calc(100vw - 32px));padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:28px;background:var(--bg);border:1px solid var(--line);border-radius:0 0 18px 18px;box-shadow:0 18px 40px #0000000d;max-height:75vh;overflow:auto}
.mega a{display:block;padding:9px 10px;border-radius:8px;color:var(--text)}
.mega a:hover{background:var(--raised)}
.mega small{display:block;color:var(--muted);font-size:12px;line-height:1.5;margin-top:4px}
.guide{padding-top:48px;padding-bottom:80px}
.crumb{font-size:13px;color:var(--muted);margin-bottom:44px}
.guide>h1{max-width:950px;margin:22px 0;font-size:clamp(38px,5.8vw,72px)}
.guide-lead{max-width:740px;color:var(--ink2);font-size:clamp(18px,2vw,23px);line-height:1.5;margin-bottom:36px}
.scope-note{border-left:2px solid var(--line2);padding:12px 18px;color:var(--muted);font-size:14px;margin:24px 0}
.guide-layout{display:grid;grid-template-columns:minmax(0,740px) minmax(200px,1fr);gap:64px;margin-top:48px}
.guide article{max-width:740px}
.guide article h2{font-size:29px;line-height:1.2;margin:36px 0 14px;letter-spacing:-.025em}
.guide article p,.guide article li{font-size:17px;line-height:1.85;color:var(--ink2);margin-bottom:18px}
.guide article a{text-decoration:underline;text-underline-offset:4px}
.guide aside{padding:24px;background:var(--rail);border:1px solid var(--line);border-radius:14px;align-self:start;font-size:14px}
.guide aside a{display:block;margin-top:20px}
.guide dt{color:var(--muted);margin-top:20px}.guide dd{margin-top:4px}
.guide-cta{margin-top:64px;border-top:1px solid var(--line);padding-top:40px}
.guide-cta h2{font-size:34px}.guide-cta p{margin:16px 0 24px;color:var(--muted)}
.guide-cta .btn{margin:0 8px 10px 0}
.learn-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px}
.learn-card{border:1px solid var(--line);border-radius:18px;padding:32px;background:var(--rail);transition:transform .18s,background .18s}
.learn-card:hover{transform:translateY(-3px);background:var(--raised)}
.learn-card>span{font-family:var(--mono);font-size:12px;color:var(--muted)}
.learn-card h2{font-size:30px;line-height:1.15;margin:18px 0}.learn-card p{color:var(--muted);line-height:1.65}.learn-card b{display:block;margin-top:26px;font-size:25px;font-weight:400}
.finance-guides{padding-top:64px;padding-bottom:64px;border-top:1px solid var(--line)}
.finance-guides h2{margin:18px 0}.finance-guides>p{color:var(--muted);max-width:680px}
.finance-links{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin:28px 0}
.finance-links a{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:18px 0}.finance-links span{color:var(--muted);font-size:12px}
.calculator{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;background:var(--rail);padding:32px;border:1px solid var(--line);border-radius:18px}
.calculator form{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.calculator label{font-size:13px;color:var(--ink2);display:flex;flex-direction:column;gap:8px}
.calculator input{width:100%;padding:12px;border:1px solid var(--line2);border-radius:8px;background:var(--bg)}
.calc-result{padding:24px;border-radius:12px;background:var(--text);color:var(--bg)}
.calc-result span{display:block;font-size:13px;opacity:.75}.calc-result output{display:block;font-size:36px;letter-spacing:-.04em;margin:6px 0 24px}.calc-result p{font-size:12px;opacity:.75}
@media(max-width:900px){.nav .wrap{gap:14px;height:auto;min-height:60px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}.nav nav{display:flex;order:3;width:100%;justify-content:space-between;gap:12px;align-items:center}.nav-menu summary{padding:4px 0}.mega{padding:18px;gap:14px}.guide-layout{grid-template-columns:1fr;gap:24px}.guide aside{display:none}.calculator{grid-template-columns:1fr}.nav .end>a:not(.btn){display:none}}
@media(max-width:560px){.learn-grid,.finance-links{grid-template-columns:1fr}.learn-card{padding:24px}.calculator{padding:18px}.calculator form{grid-template-columns:1fr}.mega{font-size:13px}.guide{padding-top:28px}}
@media(prefers-reduced-motion:reduce){.learn-card{transition:none}.learn-card:hover{transform:none}}

.nav nav{align-items:center}