/* em-theme.css — the four Excel Monitor pages (and only those) in the app's own colours: the Fenzi slate of its dialogs
   (#1D242D, Theme.xaml) and the board's green (#00835D), with the board's frit dots glowing out of the hero's
   bottom-left corner. Layout, dock, buttons and footer are the homepage's (copied from the inline <style> in /index.html;
   keep them in step when the homepage changes), recoloured. Never load this next to rs-theme.css.
   The dock and footer are plain markup in each page (like the homepage), not fetched partials.
   Hooks for JS are ids and data-* only: the deploy encoder renames every class here. */
:root{
  --bg:#141a20;--bg-elev:#1d242d;--bg-hi:#252e39;--fg:#f2f3f5;--muted:#aeb6c1;--copy:#c5cbd3;
  --line:#2a333e;--line-2:#36414e;
  /* the app's green is for fills (white text on it); text and marks on slate use the mint, with --on-mint text on it */
  --green:#00835d;--green-soft:rgba(0,131,93,.16);--mint:#52d3a6;--mint-hi:#9be8cb;--on-mint:#04241a;
  --sans:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:'Red Hat Display','Inter',system-ui,sans-serif;
  --mono:ui-monospace,"Cascadia Code","SF Mono","Segoe UI Mono",Consolas,monospace;
  --maxw:1180px;--gut:clamp(20px,5vw,72px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}   /* author display rules (.em-plan{display:flex}) would otherwise beat the UA's [hidden] */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);line-height:1.5;letter-spacing:-.006em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}
::selection{background:rgba(0,131,93,.55);color:#fff}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:2px}
main [id]{scroll-margin-top:24px}
.em-skip{position:fixed;top:-64px;left:16px;z-index:200;padding:10px 16px;border-radius:10px;background:var(--mint);color:var(--on-mint);font-weight:600;transition:top .15s}
.em-skip:focus{top:14px}
.em-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* frit — the board's green halftone (DrawFrit in the app's MainWindow.xaml.cs, same geometry in its 1920x1080 units)
   glowing out of the bottom-left of the first screen, then scrolling away with the hero. One small SVG: each dot is a
   cone masked over the corner gradient and a colour matrix keeps cone + gradient > 1, so dots shrink with distance,
   merging into solid green in the corner. Its bottom edge fades out so nothing ends in a hard line once you scroll.
   Above the vignette (which would mud it), under the grain and the page. */
.em-glow{position:absolute;top:0;left:0;width:100%;height:min(100vh,1000px);height:min(100svh,1000px);z-index:2;pointer-events:none;opacity:.42;-webkit-mask-image:linear-gradient(0deg,transparent,#000 140px);mask-image:linear-gradient(0deg,transparent,#000 140px);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1472' height='961' viewBox='0 0 1472 961'%3E%3Cdefs%3E%3CradialGradient id='d'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cpattern id='p' width='24' height='41.569' y='961' patternUnits='userSpaceOnUse'%3E%3Cg fill='url(%23d)'%3E%3Ccircle cx='-12' cy='20.78' r='14.64'/%3E%3Ccircle cx='0' cy='0' r='14.64'/%3E%3Ccircle cx='12' cy='20.78' r='14.64'/%3E%3Ccircle cx='0' cy='41.57' r='14.64'/%3E%3Ccircle cx='24' cy='0' r='14.64'/%3E%3Ccircle cx='36' cy='20.78' r='14.64'/%3E%3Ccircle cx='24' cy='41.57' r='14.64'/%3E%3C/g%3E%3C/pattern%3E%3Cmask id='m'%3E%3Crect width='1472' height='961' fill='url(%23p)'/%3E%3C/mask%3E%3CradialGradient id='g' gradientUnits='userSpaceOnUse' cx='392' cy='740' r='740' fx='0' fy='961' gradientTransform='scale(1.3 1)'%3E%3Cstop offset='0.05' stop-color='%23ff0000'/%3E%3Cstop offset='0.25' stop-color='%23c00000'/%3E%3Cstop offset='0.5' stop-color='%23760000'/%3E%3Cstop offset='0.75' stop-color='%23330000'/%3E%3Cstop offset='0.9' stop-color='%23110000'/%3E%3Cstop offset='1' stop-color='%23000000'/%3E%3C/radialGradient%3E%3Cfilter id='t' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0.514 0 0 0 0 0.365 12 0 0 12 -11.5'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23t)'%3E%3Crect width='1472' height='961' fill='url(%23g)' mask='url(%23m)'/%3E%3C/g%3E%3C/svg%3E") left bottom/min(800px,110vw) auto no-repeat,radial-gradient(50% 45% at 0% 100%,rgba(0,131,93,.35),transparent)}
.grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 80% at 70% 0%,transparent 40%,rgba(0,0,0,.55) 100%)}
.dotmatrix{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.6;-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.65) 40%,rgba(0,0,0,.4) 75%,rgba(0,0,0,.28) 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.65) 40%,rgba(0,0,0,.4) 75%,rgba(0,0,0,.28) 100%)}
.dotmatrix::before{content:"";position:absolute;top:0;left:0;right:-240px;bottom:-240px;will-change:transform;background-image:radial-gradient(rgba(220,228,240,.12) 1px,transparent 1.7px),repeating-linear-gradient(45deg,rgba(220,228,240,.055) 0 1px,transparent 1px 34px),repeating-linear-gradient(-45deg,rgba(220,228,240,.055) 0 1px,transparent 1px 34px);background-size:24px 24px,auto,auto}
@supports (animation-timeline: scroll()){.dotmatrix::before{animation:floor-drift linear both;animation-timeline:scroll(root)}@keyframes floor-drift{to{transform:translate(-240px,-240px)}}}
@media(max-width:680px){.dotmatrix::before{background-size:20px 20px,auto,auto}}
.shell{position:relative;z-index:3;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

/* dock — the homepage's primary nav, links pointed back at its sections */
.dock{position:fixed;left:50%;bottom:max(22px,env(safe-area-inset-bottom));z-index:50;width:max-content;white-space:nowrap;max-width:calc(100vw - 16px);display:flex;align-items:center;gap:4px;padding:7px;border-radius:20px;background:rgba(20,26,32,.66);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border:1px solid var(--line-2);box-shadow:0 20px 54px -14px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.05);transform:translateX(-50%)}
.dock a{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 15px;border-radius:14px;font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--muted);transition:transform .22s cubic-bezier(.22,1,.36,1),color .2s,background .2s}
.dock a:hover{color:var(--fg);background:rgba(255,255,255,.05);transform:translateY(-5px)}
.dock .dbrand{padding:10px}
.dock .glyph{position:relative;display:block;width:11px;height:11px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(82,211,166,.16),0 0 18px 2px rgba(0,170,120,.55)}
.dock .glyph::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--mint);animation:ping 2.6s ease-out infinite}
@keyframes ping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(3.2);opacity:0}}
.dock .sep{width:1px;height:22px;background:var(--line-2);margin:0 3px;flex:none}
.dock .dcta{color:var(--on-mint);font-weight:600;background:linear-gradient(180deg,var(--mint-hi),var(--mint));box-shadow:0 6px 18px -6px rgba(0,170,120,.7)}
.dock .dcta:hover{color:var(--on-mint);background:linear-gradient(180deg,#bdf1dd,var(--mint));box-shadow:0 12px 26px -6px rgba(0,170,120,.85);transform:translateY(-5px)}
.dock .dcta .l-short{display:none}
@media(max-width:700px){.dock .dcta .l-long{display:none}.dock .dcta .l-short{display:inline}}   /* "Software" is wider than the homepage's "Studio": the short CTA keeps the dock inside 561–700px, where the Codex pill still shows */
@media(max-width:560px){.dock{gap:2px;padding:6px}.dock a{padding:9px 11px;font-size:12.5px}.dock .dcta{font-size:12px}}
@media(max-width:400px){.dock{gap:0;padding:5px}.dock a{padding:9px 9px}.dock .dbrand{padding:8px}.dock .sep{display:none}.dock .dcta .l-long{display:none}.dock .dcta .l-short{display:inline}}

/* type */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:10px}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px 1px var(--green)}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.03;text-wrap:balance}
p{text-wrap:pretty}
.lead{color:var(--muted);font-family:var(--sans);font-size:clamp(16px,1.5vw,19px);line-height:1.6;max-width:62ch;text-wrap:pretty}
.shimmer-head{background:linear-gradient(100deg,#e6e9ef,#e6e9ef 40%,#ffffff 50%,var(--mint) 58%,#e6e9ef 70%,#e6e9ef);background-size:300% 100%;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer-head 13s ease-in-out infinite}
@keyframes shimmer-head{0%{background-position:100% 0}15%,100%{background-position:0% 0}}
/* links inside running copy; buttons, chips and nav keep their own look */
main :is(p,li,td,dd) a:not(.btn){color:var(--mint);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
main :is(p,li,td,dd) a:not(.btn):hover{color:var(--mint-hi)}
code{font:500 .92em/1 var(--mono);color:var(--fg);background:var(--bg-hi);border:1px solid var(--line-2);border-radius:5px;padding:1px 5px;overflow-wrap:anywhere}

/* buttons — the primary is the app's green button (white on #00835d, #006a4b at the edges) with the homepage's liquid-metal
   flow in darker greens only, so nothing behind its text gets lighter than #00835d; needs the #liquid-metal SVG filter in the page */
.btn{font-family:var(--sans);font-size:15px;font-weight:600;padding:14px 24px;border-radius:9px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .3s,background .25s,border-color .25s}
.btn-primary{position:relative;overflow:hidden;color:#fff;text-shadow:0 1px 2px rgba(0,36,25,.65);border:1px solid rgba(155,232,203,.38);background:linear-gradient(120deg,#006a4b,#00835d 28%,#00704f 50%,#00835d 72%,#006a4b);background-size:220% 220%;animation:lm-flow 7s ease-in-out infinite;box-shadow:0 10px 34px -12px rgba(0,170,120,.6),inset 0 1px 0 rgba(255,255,255,.3),inset 0 -7px 15px -7px rgba(0,40,28,.55)}
.btn-primary::before{content:"";position:absolute;inset:-45%;background:conic-gradient(from 120deg,#004d37,#00835d,#00704f,#006a4b,#004d37,#00835d,#005c41,#004d37);filter:url(#liquid-metal) blur(2.5px);opacity:.55;mix-blend-mode:soft-light;animation:lm-spin 10s linear infinite;pointer-events:none}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.2) 48%,transparent 60%);transform:translateX(-140%);animation:lm-sheen 5.2s ease-in-out infinite;pointer-events:none}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 54px -12px rgba(0,170,120,.8),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -7px 15px -7px rgba(0,40,28,.6)}
.btn-primary:hover::before{opacity:.85;animation-duration:5s}
@keyframes lm-flow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes lm-spin{to{transform:rotate(1turn)}}
@keyframes lm-sheen{0%{transform:translateX(-140%)}60%,100%{transform:translateX(140%)}}
.btn-ghost{color:var(--fg);background:rgba(29,36,45,.6);border:1px solid var(--line-2)}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--fg);background:rgba(37,46,57,.8)}
.btn .arrow{transition:transform .25s}.btn:hover .arrow{transform:translate(3px,-3px)}

/* footer — same as the homepage's, plus margin-top so it never touches the last section (spacing-guard) */
.site-foot{position:relative;z-index:3;border-top:1px solid rgba(255,255,255,.11);margin-top:clamp(60px,6vw,88px);padding:42px 0 108px;background:rgba(20,26,32,.6);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.mf-top{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.mf-brand{display:inline-flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:16px;color:#fff}
.mf-brand .glyph{width:10px;height:10px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(82,211,166,.16),0 0 14px 2px rgba(0,170,120,.5)}
.mf-links{display:flex;gap:10px 26px;flex-wrap:wrap}
.mf-links a{color:var(--muted);font-size:14px;transition:color .2s}
.mf-links a:hover{color:var(--fg)}
.mf-social{display:flex;gap:10px}
.mf-social a{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;color:var(--muted);transition:color .2s,border-color .2s,background .2s,transform .2s}
.mf-social a:hover{color:var(--mint);border-color:var(--mint);background:var(--green-soft);transform:translateY(-2px)}
.mf-social svg{width:16px;height:16px;stroke-width:1.7;fill:none;stroke:currentColor}
.mf-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.04em}
.credit{display:inline-flex;align-items:center;gap:9px}
.credit-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.mau-credit{height:13px;width:auto;display:block;opacity:.62;transition:opacity .25s}
.credit:hover .mau-credit{opacity:1}
.thon-badge:hover{color:var(--fg)}
@media(max-width:680px){.mf-top{flex-direction:column;align-items:flex-start;gap:22px}.mf-bottom{flex-direction:column;align-items:flex-start}}

/* ===== product pages (Excel Monitor) ===== */
/* spacing-guard: every top-level block gets its gap from margin-top, never margin-bottom. main.em-page (0,1,1) on purpose:
   it must beat single-class component resets like .em-shot{margin:0} that come later in this file. */
.em-page{padding-top:clamp(56px,10vh,112px)}
main.em-page>*{margin-bottom:0}
main.em-page>*+*{margin-top:clamp(48px,6vw,72px)}
.em-page>.em-head+.em-pnav{margin-top:30px}
.em-page>.em-pnav+*{margin-top:30px}
.em-head .eyebrow{margin-bottom:20px}
.em-h1{font-size:clamp(2.3rem,5.4vw,4rem);line-height:1.04;max-width:20ch}
.em-head .lead{margin:20px 0 0}
.em-tools{display:flex;flex-wrap:wrap;gap:12px}
.em-head .em-tools{margin-top:28px}
.em-h2{font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.1;margin:0 0 14px}
/* section heading: display type behind the green bar the board puts before every slide title */
.em-sh{display:flex;align-items:center;gap:12px;font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.1;margin:0 0 20px}
.em-sh::before{content:"";width:4px;height:.92em;flex:none;background:var(--mint)}
.em-h3{font-family:var(--display);font-weight:700;font-size:1.2rem;letter-spacing:-.01em;line-height:1.2;color:#fff;margin:0 0 8px;overflow-wrap:anywhere}
.em-p{margin:0;color:var(--copy);font-size:16px;line-height:1.6;overflow-wrap:anywhere}
.em-p+.em-p{margin-top:10px}
.em-p strong,.em-list strong{color:var(--fg);font-weight:600}
.em-small{margin:14px 0 0;color:var(--muted);font-size:14px;line-height:1.55;max-width:80ch}
.em-intro{margin:0 0 18px;color:var(--copy);font-size:16px;line-height:1.6;max-width:66ch}

/* product sub-nav: a small dock-style bar; the current page wears the dock's CTA gradient */
.em-pnav{display:flex;flex-wrap:wrap;gap:4px;width:fit-content;max-width:100%;padding:6px;border-radius:16px;background:rgba(20,26,32,.66);border:1px solid var(--line-2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.em-pnav a{min-height:44px;display:inline-flex;align-items:center;padding:8px 15px;border-radius:11px;font-size:14px;font-weight:500;color:var(--muted);transition:color .2s,background .2s}
.em-pnav a:hover{color:var(--fg);background:rgba(255,255,255,.05)}
.em-pnav a[aria-current="page"]{color:var(--on-mint);font-weight:600;background:linear-gradient(180deg,var(--mint-hi),var(--mint))}

/* chips */
.em-keys{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg);padding:7px 12px;border:1px solid var(--line-2);border-radius:999px;background:rgba(29,36,45,.6)}
.em-keys .chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px 1px var(--green)}
.em-st{color:var(--mint);border-color:rgba(82,211,166,.45)}
.em-status{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:18px 0 0;color:var(--copy);font-size:15px;line-height:1.5;max-width:72ch}

/* cards and grids */
.card{position:relative;background:var(--bg-elev);border:1px solid var(--line);border-radius:16px;transition:border-color .3s,box-shadow .35s}
.card:hover{border-color:var(--line-2)}
.em-grid{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:760px){.em-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}.em-grid--pairs{grid-template-columns:1fr 1fr}}
.em-grid>*{min-width:0;margin:0}
.em-item{padding:24px}
.em-card{padding:clamp(20px,3vw,30px)}
.em-col{max-width:820px}
.em-num{display:inline-grid;place-items:center;width:38px;height:38px;margin:0 0 16px;border-radius:10px;border:1px solid var(--line-2);background:var(--green-soft);color:var(--mint);font:700 16px/1 var(--display)}

/* screenshots: 16:9 board renders (demo data); width/height attributes reserve the space so nothing shifts */
.em-shot{margin:0;padding:0;overflow:hidden;border-radius:18px}
.em-grid>li>.em-shot{height:100%}
.em-shot img{display:block;width:100%;height:auto;background:#f2f3f5;border-bottom:1px solid var(--line)}
.em-shot figcaption{padding:16px 20px 18px}
.em-cap{margin:0;color:var(--copy);font-size:15px;line-height:1.55}
.em-cap strong{color:var(--fg);font-weight:600}

/* tables scroll sideways on tablets; on phones each row becomes a small stacked block */
.em-tablewrap{margin:18px 0 0;overflow-x:auto;border:1px solid var(--line-2);border-radius:12px}
.em-table{width:100%;min-width:560px;border-collapse:collapse;font-size:15px;line-height:1.45}
.em-table th,.em-table td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.em-table tr:last-child td,.em-table tr:last-child th{border-bottom:0}
.em-table th{font-weight:600;color:var(--fg);background:var(--bg-hi)}
.em-table td{color:var(--copy)}
.em-table tbody th{color:var(--fg);font-weight:500;background:none}
@media (max-width:640px){
.em-table{min-width:0}
.em-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.em-table tr{display:block;padding:12px 14px;border-bottom:1px solid var(--line)}
.em-table tr:last-child{border-bottom:0}
.em-table td,.em-table tbody th{display:block;padding:2px 0;border:0;white-space:normal;overflow-wrap:anywhere}
.em-table tbody th{margin-bottom:2px}
.em-table td[data-label]::before{content:attr(data-label) ": ";color:var(--muted);font-weight:600}
}

/* lists */
.em-list{margin:0;padding:0 0 0 22px;display:grid;gap:8px;color:var(--copy);font-size:16px;line-height:1.6}
.em-list li{padding-left:4px;overflow-wrap:anywhere}
.em-list li::marker{color:var(--mint);font-weight:700}
.em-need{list-style:none;margin:0;padding:0;display:grid;gap:14px 28px}
@media (min-width:760px){.em-need{grid-template-columns:1fr 1fr}}
.em-need li{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;min-width:0}
.em-need svg,.em-checks svg{margin-top:3px;color:var(--mint)}
.em-checks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.em-checks li{display:grid;grid-template-columns:18px 1fr;gap:8px;align-items:start;color:var(--copy);font-size:15px;line-height:1.5;min-width:0}

/* glass panel with the homepage CTA's travelling beam, in green */
.em-panel{position:relative;border:1px solid rgba(255,255,255,.13);border-radius:24px;padding:clamp(24px,4.4vw,52px);overflow:hidden;background:radial-gradient(120% 120% at 50% 120%,var(--green-soft),transparent 60%),rgba(29,36,45,.5);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 40px 80px -34px rgba(0,0,0,.7)}
@property --beam{syntax:'<angle>';inherits:false;initial-value:0deg}
.em-panel::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--beam),transparent 0 62%,var(--green) 78%,var(--mint-hi) 85%,var(--mint) 90%,transparent 96%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:beam 7s linear infinite;pointer-events:none}
@keyframes beam{to{--beam:360deg}}
.em-cta{display:grid;gap:16px;justify-items:start}

/* download */
.em-dl{display:grid;gap:clamp(26px,4vw,44px);grid-template-columns:1fr}
@media (min-width:900px){.em-dl{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}.em-dl-steps{grid-column:1/-1}}
.em-dl-main{display:grid;gap:18px;justify-items:start;align-content:start;min-width:0}
.em-dl-main .em-h2{margin:0}
.em-lock{display:grid;grid-template-columns:20px 1fr;gap:10px;margin:0;color:var(--copy);font-size:15px;line-height:1.55}
.em-lock svg{margin-top:2px;color:var(--mint)}
.em-lock strong{color:var(--fg);font-weight:600}
.em-facts{margin:0;align-self:start;min-width:0;border:1px solid var(--line-2);border-radius:14px;background:rgba(14,19,24,.5)}
.em-facts>div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;padding:13px 16px;border-top:1px solid var(--line)}
.em-facts>div:first-child{border-top:0}
.em-facts dt{font:600 11px/1.9 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.em-facts dd{margin:0;color:var(--fg);font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.em-facts .em-hash{display:block;font-size:12.5px;line-height:1.55;word-break:break-all;background:none;border:0;padding:0}
.em-dl-steps{min-width:0}
.em-dl-steps .em-h3{margin-bottom:12px}

/* pricing — cards are cloned from data-plan templates by /js/em-prices.js; a plan with a note gets the green edge */
.em-plans{max-width:880px}
.em-plan{display:flex;flex-direction:column;gap:12px;padding:26px}
.em-plan[data-pick]{border-color:rgba(82,211,166,.55);box-shadow:0 0 0 1px rgba(82,211,166,.2),0 30px 60px -30px rgba(0,170,120,.45)}
.em-plan-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.em-plan-name{font-size:1.6rem;margin:0 auto 0 0}
.em-price{margin:4px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.em-amt{font:700 46px/1 var(--display);background:linear-gradient(180deg,#fff,var(--mint));-webkit-background-clip:text;background-clip:text;color:transparent}
.em-per{font-size:14px;color:var(--copy)}
.em-plan .btn{justify-content:center;margin-top:auto}
.em-note{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.em-foot{margin:16px 0 0;color:var(--copy);font-size:15px;line-height:1.55;max-width:72ch}
.em-feats{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:760px){.em-feats{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}}
.em-feats li{min-width:0;border:1px solid var(--line);border-radius:12px;padding:18px;background:rgba(255,255,255,.015)}
.em-media{margin:0;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;background:var(--bg-elev)}
.em-media img{display:block;width:100%;height:auto;background:#f2f3f5}
.em-media figcaption{padding:10px 14px;color:var(--muted);font-size:13px;line-height:1.4;border-top:1px solid var(--line)}
.em-shots{display:grid;gap:14px;grid-template-columns:1fr;margin-top:20px}
@media (min-width:760px){.em-shots{grid-template-columns:1fr 1fr}}
.em-soon{margin:20px 0 0;display:grid;gap:8px;justify-items:start}

/* help: jump chips + FAQ (each answer is a <details class="card">) */
.em-jump{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.em-jump a.chip{min-height:40px;text-transform:none;letter-spacing:.02em;font-size:13px;color:var(--copy)}
.em-jump a.chip:hover{color:var(--fg);border-color:var(--fg)}
.em-stack{display:grid;gap:14px}
.em-note-s{margin:14px 0 0;color:var(--muted);font-size:14px;line-height:1.55}
.em-faq{display:grid;gap:10px}
.em-q{border-radius:14px}
.em-q[open]{border-color:rgba(82,211,166,.4)}
.em-q>summary{display:flex;align-items:center;gap:12px;min-height:44px;padding:16px 20px;cursor:pointer;list-style:none;font:600 17px/1.35 var(--sans);color:var(--fg);border-radius:14px}
.em-q>summary::-webkit-details-marker{display:none}
.em-q>summary:hover .em-qt{text-decoration:underline;text-underline-offset:3px}
.em-qt{min-width:0;overflow-wrap:anywhere}
.em-chev{flex:none;width:0;height:0;border:6px solid transparent;border-left:8px solid var(--mint);margin-left:auto;transition:transform .15s}
.em-q[open] .em-chev{transform:rotate(90deg)}
.em-a{margin:0;padding:0 20px 18px}

/* privacy */
.em-policy{padding:clamp(20px,3.4vw,40px)}
.em-policy h2{font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.15;margin:32px 0 10px}
.em-policy h2:first-of-type{margin-top:0}
.em-policy p{margin:0;max-width:70ch;color:var(--copy);font-size:16px;line-height:1.7;overflow-wrap:anywhere}
.em-policy p+p{margin-top:12px}
.em-policy .em-updated{margin:0 0 24px;color:var(--muted);font-size:14px;line-height:1.5}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .shimmer-head{color:#e6e9ef;-webkit-text-fill-color:#e6e9ef}
  .btn:hover,.dock a:hover,.mf-social a:hover{transform:none}
}
/* Contrast (WCAG 2.x, computed with Python; page #141a20, card #1d242d, code/th #252e39, chip #192028):
   #f2f3f5 text / #1d242d ......... 14.1   #c5cbd3 copy / #1d242d ......... 9.6    #aeb6c1 muted / #1d242d ......... 7.6
   #52d3a6 link+chev / #1d242d .... 8.4    #aeb6c1 lead / #141a20 ......... 8.6    #f2f3f5 code+th / #252e39 ....... 12.4
   #04241a / #52d3a6 (current, CTA) 8.8    #52d3a6 chip / #192028 ......... 8.7    #c5cbd3 cell / #252e39 .......... 8.4
   #52d3a6 num / #183335 .......... 7.2    #52d3a6 focus ring / #141a20 ... 9.4 (non-text)
   Text over the frit, worst pixel (a dot, #00835d at .42 over the page = #0c463a): muted 5.3, copy 6.6, mint 5.8, text 9.7.
   Primary button: #fff on #00835d, its lightest stop, is 4.8 (6.6 on #006a4b); the liquid flow only darkens it (soft-light
   with greens no lighter than #00835d). Only the passing sheen briefly lifts it, so the text carries a dark-green halo.
   all >= 4.5 */