/*devi-commercial*/
/* DEVI public web tokens: the single source for the light public look (website preview 23, owner 10/26/2026).
scripts/build-digital-forensics.py inlines this file ahead of site-src/writing/commercial.css on every public page.
Change a value here, rebuild, and every page follows. Guide: design-system/PUBLIC-WEB-STYLE.md. */
:root{color-scheme:light;
/* Ink and text */
--ink:#0B0B0F;--on-grad:#FFFFFF;--text:#2B2D33;--muted:#5B5F69;--soft:#6B7079;--nav-text:#30333A;
/* Surfaces, from the page up */
--surface:#FFFFFF;--band:#F6F7F9;--band2:#EEF0F6;--tint:#F3F2FE;
--tint-stage:linear-gradient(180deg,#F7F8FF,#F1EFFE);
--tint-panel:linear-gradient(135deg,#F5F7FF 0%,#F5F1FF 100%);
/* Lines */
--line:#E4E6EB;--line-strong:#D3D7DF;--line-hover:#AEB4BF;--line-accent:rgba(91,92,240,.18);--field:#C2C7D0;
/* Brand: blue to purple, used as an accent only */
--blue:#3563EE;--blue-ink:#2550D9;--violet:#7B4DF2;--ring:#5B5CF0;
--grad:linear-gradient(100deg,#3563EE 0%,#7B4DF2 100%);--grad-hover:linear-gradient(100deg,#2F5FE8 0%,#6C3EE6 100%);
--grad-down:linear-gradient(180deg,#3563EE,#7B4DF2);
--glow-blue:radial-gradient(closest-side,rgba(59,108,246,.16),transparent 70%);
--glow-violet:radial-gradient(closest-side,rgba(123,77,242,.16),transparent 70%);
/* Status */
--ok:#16794A;--ok-dot:#1E9E60;--ok-text:#14653F;--ok-bg:#E9F7EF;--ok-line:#CBEBD8;
--info-text:#2149B8;--info-bg:#EAF0FE;--danger-text:#A12828;--danger-bg:#FDECEC;
--sample-bg:#FFF4D6;--sample-text:#7A5200;
/* Depth */
--shadow-1:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06);
--shadow-2:0 2px 4px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.08);
--shadow-3:0 4px 8px rgba(16,24,40,.04),0 24px 48px -12px rgba(16,24,40,.18);
--shadow-shot:0 2px 4px rgba(16,24,40,.06),0 32px 64px -24px rgba(31,27,92,.38);
/* Product screenshots: two sizes, one aspect ratio */
--shot-large:1040px;--shot-small:640px;--shot-ratio:16/10;
/* Radius: the product screenshot frame matches a Windows 11 window (8px) */
--radius-shot:8px;--radius-sm:8px;--radius-md:10px;--radius-lg:12px;--r:14px;--r-sm:10px;--radius-xl:24px;--radius-pill:999px;
/* Type */
--font:Inter,"Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
--mono:ui-monospace,SFMono-Regular,"Cascadia Mono",Menlo,Consolas,monospace;
--size-body:16.5px;--size-lead:17px;--size-h1:clamp(2.4rem,5.2vw,4rem);--size-hero:clamp(2.6rem,7vw,5rem);
--size-h2:clamp(2rem,3.8vw,3rem);--size-cta:clamp(1.9rem,3.4vw,2.8rem);
--weight-hero:820;--weight-h1:800;--weight-h2:780;--weight-h3:700;
--track-hero:-.045em;--track-h1:-.038em;--track-h2:-.034em;
/* Space: one scale; 16 px within a group, 24 or 32 px between groups */
--space-1:8px;--space-2:16px;--space-3:24px;--space-4:32px;--space-5:48px;
--max:1280px;--nav-h:72px;--gutter:32px;--gutter-phone:16px;--section:104px;--section-phone:64px;
/* Motion: state changes only; every one is instant under reduced motion */
--motion-fast:.15s;--motion:.18s;--ease:cubic-bezier(.2,.8,.2,1);
/* The older names the shared rules still read, pointed at the tokens above */
--bg-canvas:var(--surface);--bg-surface:var(--surface);--bg-card:var(--surface);--border:var(--line);--stroke:var(--line-strong);
--text-primary:var(--ink);--text-secondary:var(--muted);--text-muted:var(--soft);
--bg:var(--surface);--card:var(--surface);--card2:var(--band);--line2:var(--line-strong);--t1:var(--ink);--t2:var(--muted);--t3:var(--soft);
--hair:var(--line);--hair2:var(--line-strong);--panel:var(--surface);--panel-hover:var(--surface);
--accent:var(--blue);--accent-hover:var(--blue-ink);--accent-deep:var(--blue-ink);--accent-dim:var(--blue-ink);
--accent-blue:var(--blue);--accent-purple:var(--violet);--accent-gradient:var(--grad);--accent-gradient-hover:var(--grad-hover);
--accent-gradient-down:var(--grad-down);--accent-ring:var(--ring);--glow:none;--edge:none;--edge2:none;--fill:none}
html,body{background:var(--surface);color:var(--text)}
body{font-family:var(--font);font-size:var(--size-body);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:rgba(123,77,242,.18)}
.wrap{max-width:var(--max);padding-left:32px;padding-right:32px}
@media(max-width:640px){.wrap,.toolwide{padding-left:16px;padding-right:16px}}
p{color:var(--text)}
.lead,header.doc .lead,.band .lead,.hmsec .lead,.herolead{color:var(--muted)}
:focus-visible{outline:2px solid var(--accent-ring);outline-offset:2px}
/* Type: bold, near-black, tight. No gradient or fade on any heading. */
h1,h2,h3,h4,.hero h1,header.doc h1,.band h2,.hmsec h2,article h2,article h3,body.articlepage header.doc h1,.mission{color:var(--ink);background:none;-webkit-text-fill-color:currentColor;-webkit-background-clip:border-box;background-clip:border-box}
.hero h1,header.doc h1{font-weight:800;letter-spacing:-.038em;line-height:1.04;padding-bottom:.06em}
header.doc h1{font-size:clamp(2.4rem,5.2vw,4rem);max-width:18ch;margin:0 0 20px}
.band h2,.hmsec h2,.sec23 h2{font-weight:780;letter-spacing:-.034em;line-height:1.08;font-size:clamp(2rem,3.8vw,3rem);color:var(--ink)}
article h2{font-weight:750;letter-spacing:-.028em}
h3{letter-spacing:-.015em}
.eyebrow,.taglabel,.toclabel,.flabel,.navlabel{font:600 12px/1.4 ui-monospace,SFMono-Regular,"Cascadia Mono",Menlo,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-ink)}
.eyebrow{margin:0 0 16px}
.eyebrow a{color:inherit!important;-webkit-text-fill-color:currentColor!important;background:none!important}
header.doc{padding:88px 0 44px;border-bottom:0;background:radial-gradient(60% 120% at 85% -20%,rgba(123,77,242,.10),transparent 60%),radial-gradient(50% 100% at 10% -30%,rgba(59,108,246,.10),transparent 60%),var(--surface)}
header.doc .lead{font-size:clamp(17px,1.6vw,20px);line-height:1.6;max-width:60ch}
article p,article li{color:var(--text)}
article li::marker{color:var(--soft)}
code{background:var(--band);border:1px solid var(--line);color:var(--ink)}
pre.block{background:var(--band);border:1px solid var(--line);color:var(--ink)}
pre.block code{color:inherit;background:none;border:0}
hr{border:0;border-top:1px solid var(--line)}
/* Buttons: one primary (the gradient), one quiet. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 22px;border:0;border-radius:var(--radius-md);
background:var(--grad);color:var(--surface);-webkit-text-fill-color:var(--surface);font-weight:650;font-size:15px;letter-spacing:-.005em;text-decoration:none;
box-shadow:0 1px 2px rgba(16,24,40,.08),0 6px 16px -6px rgba(91,77,242,.55);transition:transform var(--motion-fast) var(--ease),box-shadow .15s ease,background .15s ease}
.btn:hover,:is(.productpage,.dashpage) .btn:hover{background:var(--grad-hover);color:var(--surface);-webkit-text-fill-color:var(--surface);text-decoration:none;transform:translateY(-1px);box-shadow:0 2px 4px rgba(16,24,40,.08),0 10px 22px -8px rgba(91,77,242,.6)}
.btn.btnghost,.btn.btnquiet{background:var(--surface);color:var(--ink);-webkit-text-fill-color:var(--ink);border:1px solid var(--line-strong);box-shadow:var(--shadow-1)}
.btn.btnghost:hover,.btn.btnquiet:hover{background:var(--surface);color:var(--ink);-webkit-text-fill-color:var(--ink);border-color:var(--line-hover);box-shadow:var(--shadow-2)}
.downloadmeta{color:rgba(255,255,255,.82)}
/* Links in running text: the brand gradient, solid enough to read. */
a{color:var(--blue-ink)}
/* One card style everywhere. */
.hmcard,.cardlink,.toollist .toolentry,.accountcard,.featurelist li,.servicecard,.neighbor,.outlinebox,.audience>li,.ctacard,.callout,.disclaimer,.env,.evidence,.card23,.toolcard,.highlights li,.confirmbox,#connect .wrap,.frame,.checksum{
background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-1);-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--text)}
.checksum{box-shadow:none;background:var(--band)}
.checksum a,.checksum code{color:var(--ink)}
.hmcard h3,.cardlink h2,.toolentry h2,.accountcard h2,.featurelist h2,.servicecard h2,.audience h2,.card23 h3,.featurelist h2 a{color:var(--ink);-webkit-text-fill-color:var(--ink);background:none}
.hmcard p,.cardlink p,.toolentry p,.featurelist p,.servicecard p,.audience p,.card23 p{color:var(--muted)}
@media (hover:hover) and (pointer:fine){
:is(.hmcard:has(a.hmgo),.cardlink,.neighbor,.servicecard,.featurelist li:has(a),.card23.link){transition:transform var(--motion) var(--ease),box-shadow var(--motion) var(--ease),border-color var(--motion) var(--ease)}
:is(.hmcard:has(a.hmgo),.cardlink,.neighbor,.servicecard,.featurelist li:has(a),.card23.link):hover{transform:translateY(-2px);box-shadow:var(--shadow-3);border-color:var(--line-strong);background:var(--surface)}
}
.cardlink:hover,.hmcard:has(a.hmgo):hover{background:var(--surface);border-color:var(--line-strong)}
.cardlink:hover h2,.cards .cardlink:hover h2{background:none;color:var(--blue-ink);-webkit-text-fill-color:var(--blue-ink)}
.cardfoot{border-top-color:var(--line)}
.typetag{color:var(--blue-ink)}
.callout::before,.evidence.ev-government::before{background:var(--grad-down)}
.snippet mark{background:rgba(123,77,242,.16);color:var(--ink)}
.chip{background:var(--band);border-color:var(--line);color:var(--muted)}
.chip-approved{background:var(--ok-bg);color:var(--ok-text)}.chip-pending{background:var(--info-bg);color:var(--info-text)}.chip-denied{background:var(--danger-bg);color:var(--danger-text)}
input,select,textarea{color:var(--ink)}
.signuprow input[type="email"],.searchfield input,.accountfield input{background:var(--surface);border:1px solid var(--field);color:var(--ink)}
.searchfield input:focus,.accountfield input:focus,.signuprow input[type="email"]:focus{background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad) border-box;border:1px solid transparent;box-shadow:0 0 0 4px rgba(123,77,242,.12)}
.lightbox::backdrop{background:rgba(15,17,23,.78)}
.lightbox-close,.lightbox-prev,.lightbox-next{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
/* ── Header ───────────────────────────────────────────────────────────── */
/* The header blends with the page (owner, 10/26/2026). At the top it is the page itself: no fill, no border, no
shadow, so the home hero's glow runs behind it. After about 8 px of scroll (#navsentinel, the "scrolled" class) it
gains a 1 px hairline and a light translucent fill with a blur, solid where backdrop-filter is missing, in 150 ms.
Without the script ("navjs" never set) it keeps the hairline and a solid fill. Pinned at the top (owner decision,
10/26/2026) by the shared /shared/header-pin.css, which also holds the frosted-glass fill. */
nav.sitenav{position:relative;top:0;z-index:60;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:none;color:var(--ink);animation:none;
transition:background-color var(--motion-fast) var(--ease),border-color var(--motion-fast) var(--ease),-webkit-backdrop-filter var(--motion-fast) var(--ease),backdrop-filter var(--motion-fast) var(--ease)}
nav.sitenav.navjs{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
nav.sitenav.navjs.scrolled{background:rgba(255,255,255,.78);border-bottom-color:var(--line);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){nav.sitenav.navjs.scrolled{background:var(--surface)}}
nav.sitenav.navjs:has(.navdrawer.open){background:var(--surface);border-bottom-color:var(--line)}
@media(prefers-reduced-motion:reduce){nav.sitenav{transition:none}}
/* The hero glow sits on the page, not inside the hero, so it runs up behind the transparent top bar and is never cut off
at the hero's top edge. Every page gets the home page's treatment (10/31/2026). */
body:has(.hero23),body:has(header.doc){position:relative;z-index:0}
body:has(header.doc)::before{height:640px}
body:has(.hero23)::before,body:has(header.doc)::before{content:"";position:absolute;left:0;right:0;top:0;z-index:-1;pointer-events:none;
background:radial-gradient(40% 50% at 22% 30%,rgba(59,108,246,.14),transparent 70%),radial-gradient(40% 55% at 78% 25%,rgba(123,77,242,.14),transparent 70%)}
body:has(.hero23)::before{height:900px}
body .hero23,body header.doc{background:transparent}
body .hero23::before{display:none}
nav.sitenav .wrap{display:flex;align-items:center;gap:28px;height:var(--nav-h);min-height:var(--nav-h);flex-wrap:nowrap}
nav.sitenav .brand{display:inline-flex;align-items:center;min-height:44px;padding:0;color:var(--ink);flex:none}
nav.sitenav .brand:hover{color:var(--ink)}
.wordmark{display:block;height:20px;width:auto;color:currentColor}
nav.sitenav .navdrawer{display:flex;align-items:center;flex:1 1 auto;gap:24px;min-width:0}
.navmenus{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.navmenus>li{position:static;margin:0}
.navmenu>summary{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:var(--radius-sm);list-style:none;cursor:pointer;
font-size:15px;font-weight:600;color:var(--nav-text);letter-spacing:-.005em;user-select:none}
.navmenu>summary::-webkit-details-marker{display:none}
.navmenu>summary:hover,.navmenu[open]>summary{color:var(--ink);background:var(--band)}
.navmenu>summary.here{color:var(--ink)}
.navmenu>summary.here::after{content:"";position:absolute;margin-top:34px;width:18px;height:2px;border-radius:2px;background:var(--grad)}
.navchev{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .16s ease}
.navmenu[open] .navchev{transform:rotate(180deg)}
.navpanel{position:absolute;left:0;right:0;top:100%;padding:0;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
box-shadow:0 24px 48px -16px rgba(16,24,40,.18)}
.navpanel>*{max-width:var(--max);margin-left:auto;margin-right:auto;padding-left:32px;padding-right:32px}
.navpanel>:first-child{padding-top:28px}
.navpanel>:last-child{padding-bottom:28px}
html.motion-ok .navmenu[open] .navpanel{animation:navpanel .16s ease-out}
@keyframes navpanel{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.navlabel{margin:0 0 12px}
.navcols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:40px}
.navside{border-left:1px solid var(--line);padding-left:32px}
.navlist{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.navgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px}
.navlist a{display:flex;gap:14px;align-items:flex-start;padding:12px 14px;border-radius:var(--radius-lg);color:var(--ink);text-decoration:none}
.navlist a:hover{background:var(--band);text-decoration:none}
.navlist strong{display:block;font-size:15px;font-weight:650;color:var(--ink);letter-spacing:-.01em}
.navlist small{display:block;margin-top:2px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.navver{margin-left:6px;padding:1px 7px;border-radius:var(--radius-pill);background:var(--band);border:1px solid var(--line);font:500 11.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-style:normal;color:var(--muted);vertical-align:1px}
.navico{flex:none;width:36px;height:36px;padding:8px;border-radius:var(--radius-md);fill:none;stroke:var(--blue-ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
background:linear-gradient(135deg,rgba(59,108,246,.10),rgba(123,77,242,.12));border:1px solid rgba(91,92,240,.16)}
.navreader{display:flex;gap:14px;align-items:flex-start;margin:0 0 24px;padding:14px;border-radius:var(--radius-lg);background:var(--band);color:var(--text);font-size:14px;line-height:1.5}
.navreader a{display:inline-block;margin-top:4px;font-weight:650}
.navplain{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.navplain a{display:flex;align-items:center;min-height:40px;color:var(--ink);font-weight:550;font-size:14.5px}
.navmore{margin:14px 0 0}
.navmore a{font-weight:650;font-size:14.5px}
.navend{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none}
nav.sitenav .navsignin{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:0;border-radius:var(--radius-sm);color:var(--ink);font-size:15px;font-weight:600;background:none;-webkit-text-fill-color:currentColor}
nav.sitenav .navsignin:hover{background:var(--band);color:var(--ink);-webkit-text-fill-color:currentColor;text-decoration:none}
nav.sitenav .navcta{min-height:42px;padding:9px 18px;font-size:14.5px}
.navtoggle{display:none;width:44px;height:44px;padding:0;margin-left:auto;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);cursor:pointer;align-items:center;justify-content:center}
.navtoggle span,.navtoggle span::before,.navtoggle span::after{background:currentColor}
@media(max-width:1023px){
nav.sitenav .wrap{flex-wrap:wrap;height:auto;gap:0 12px;padding-top:12px;padding-bottom:12px}
nav.sitenav .brand{margin-right:auto}
nav.sitenav .navdrawer{flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px 0 4px}
nav.sitenav.hasmenu .wrap{flex-wrap:nowrap;min-height:64px;padding-top:0;padding-bottom:0}
nav.sitenav.hasmenu .navtoggle:not([hidden]){display:inline-flex}
nav.sitenav.hasmenu .navdrawer{display:none;position:absolute;left:0;right:0;top:100%;max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto;
padding:8px 16px 20px;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 24px 40px -16px rgba(16,24,40,.22)}
nav.sitenav.hasmenu .navdrawer.open{display:flex}
.navmenus{flex-direction:column;align-items:stretch;gap:0}
.navmenus>li{border-bottom:1px solid var(--line)}
.navmenu>summary{justify-content:space-between;min-height:56px;padding:0 4px;font-size:17px;border-radius:0;background:none!important}
.navmenu>summary.here::after{display:none}
/* Hardened to match the desktop .navmenu .navpanel specificity, so the drawer
rule wins below 1024px unconditionally, not only via media-gate exclusivity. */
.navmenu .navpanel{position:static;border:0;box-shadow:none;padding:0}
.navpanel>*{padding-left:0;padding-right:0}
.navpanel>:first-child{padding-top:4px}
.navpanel>:last-child{padding-bottom:16px}
.navcols{grid-template-columns:minmax(0,1fr);gap:16px}
.navside{border-left:0;padding-left:0}
.navgrid{grid-template-columns:minmax(0,1fr)}
.navlist a{padding:10px 4px}
.navend{flex-direction:column;align-items:stretch;margin:16px 0 0;gap:10px}
nav.sitenav .navsignin{justify-content:center;border:1px solid var(--line-strong);min-height:48px}
nav.sitenav .navcta{min-height:48px}
html.motion-ok .navmenu[open] .navpanel{animation:none}
}
/* ── Footer ───────────────────────────────────────────────────────────── */
footer.sitefoot{background:var(--band);border-top:1px solid var(--line);padding:80px 0 36px;font-size:14.5px;color:var(--text)}
footer.sitefoot .fgrid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(5,minmax(0,1fr));gap:40px 28px}
footer.sitefoot .fbrand{display:flex;flex-direction:column;gap:14px;max-width:34ch}
footer.sitefoot .brand{color:var(--ink);min-height:0}
footer.sitefoot .wordmark{height:24px}
footer.sitefoot{position:relative;overflow:hidden}
footer.sitefoot .footmark{max-width:1240px;margin:40px auto 0;padding:0 24px;height:clamp(86px,13vw,200px);overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.95),rgba(0,0,0,0) 94%);mask-image:linear-gradient(to bottom,rgba(0,0,0,.95),rgba(0,0,0,0) 94%)}
footer.sitefoot .footmark .wordmark{display:block;width:100%;height:auto}
@keyframes fmflow{from{transform:translateX(0)}to{transform:translateX(978px)}}
footer.sitefoot .fmflow{animation:fmflow 16s linear infinite}
footer.sitefoot .fmbase{opacity:.5}
footer.sitefoot .tagline{margin:4px 0 0;font-size:16px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
footer.sitefoot .fabout,footer.sitefoot .fcontact{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
footer.sitefoot .fcontact a{color:var(--ink);font-weight:600}
footer.sitefoot .flabel{margin:0 0 14px;color:var(--ink);letter-spacing:.1em}
footer.sitefoot .fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
footer.sitefoot .fcol a{display:inline-flex;align-items:center;min-height:36px;padding:0;color:var(--muted);font-size:14.5px;text-decoration:none}
footer.sitefoot .fcol a:hover{color:var(--ink);background:none;-webkit-text-fill-color:currentColor;text-decoration:underline;text-underline-offset:3px}
footer.sitefoot .freader{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
footer.sitefoot .freader a{display:inline;min-height:0;color:var(--blue-ink);font-weight:600;font-size:13px}
footer.sitefoot .fbot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:56px;padding-top:24px;border-top:1px solid var(--line-strong)}
footer.sitefoot .fbot p{margin:0;color:var(--muted);font-size:13.5px}
footer.sitefoot .fdisclaimer{max-width:72ch}
@media(max-width:1100px){footer.sitefoot .fgrid{grid-template-columns:repeat(3,minmax(0,1fr))}footer.sitefoot .fbrand{grid-column:1/-1}}
@media(max-width:640px){footer.sitefoot{padding:56px 0 28px}footer.sitefoot .fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}}
/* ── Sections, bands and layers ───────────────────────────────────────── */
.sec23{padding:104px 0;position:relative}
.sec23.band23{background:var(--band)}
.sec23.tint23{background:linear-gradient(180deg,var(--surface),var(--tint))}
.sec23 .lead{font-size:clamp(17px,1.5vw,19px);line-height:1.6;max-width:62ch;margin:0}
.sec23 h2{margin:0 0 18px;max-width:22ch;text-wrap:balance}
.sec23 .sechead{max-width:820px;margin:0 0 48px}
.sec23 .sechead.center{margin-left:auto;margin-right:auto;text-align:center}
.sec23 .sechead.center h2,.sec23 .sechead.center .lead{margin-left:auto;margin-right:auto}
@media(max-width:640px){.sec23{padding:64px 0}.sec23 .sechead{margin-bottom:32px}}
.grid23{display:grid;gap:20px;list-style:none;margin:0;padding:0;grid-template-columns:minmax(0,1fr)}
@media(min-width:720px){.grid23.two,.grid23.three,.grid23.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1040px){.grid23.three{grid-template-columns:repeat(3,minmax(0,1fr))}.grid23.four{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card23{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;padding:28px 26px 24px}
.card23 h3{margin:0;font-size:18.5px;font-weight:700;line-height:1.3}
.card23 p{margin:0;font-size:15.5px;line-height:1.6}
.card23 .go{margin-top:auto;padding-top:10px;font-weight:650;font-size:15px;color:var(--blue-ink);text-decoration:none}
.card23 .go::after{content:"";position:absolute;inset:0;border-radius:var(--r)}
.card23 .go span{display:inline-block;margin-left:6px;transition:transform var(--motion-fast) var(--ease)}
.card23:hover .go span{transform:translateX(3px)}
.card23 .go:focus-visible{outline:none}.card23 .go:focus-visible::after{outline:2px solid var(--accent-ring);outline-offset:2px}
.card23.featured::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;border-radius:var(--r) var(--r) 0 0;background:var(--grad)}
.ico23{width:44px;height:44px;padding:10px;border-radius:var(--radius-lg);fill:none;stroke:var(--blue-ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
background:linear-gradient(135deg,rgba(59,108,246,.10),rgba(123,77,242,.13));border:1px solid rgba(91,92,240,.16)}
.num23{font:600 12.5px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.1em;color:var(--blue-ink)}
.chip23{display:inline-flex;align-items:center;gap:6px;width:fit-content;padding:3px 10px;border-radius:var(--radius-pill);font-size:12.5px;font-weight:600;line-height:1.5;background:var(--band);border:1px solid var(--line);color:var(--muted)}
.chip23.ship{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-text)}
.chip23.ship::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok-dot)}
.meta23{margin:0;font-size:13.5px;color:var(--soft)}
/* Product shots float above a tinted, glowing panel. */
.stage23{position:relative;isolation:isolate;margin:0;padding:clamp(20px,3.4vw,44px);border-radius:var(--radius-xl);
background:radial-gradient(70% 90% at 15% 0%,rgba(59,108,246,.16),transparent 60%),radial-gradient(70% 90% at 95% 100%,rgba(123,77,242,.18),transparent 60%),var(--tint-stage);
border:1px solid rgba(91,92,240,.14)}
.stage23::before{content:"";position:absolute;inset:auto 8% -18px 8%;height:36px;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(91,77,242,.28),transparent);filter:blur(12px)}
.shot23{display:block;margin:0;border-radius:var(--radius-shot);overflow:hidden;background:var(--surface);border:1px solid rgba(16,24,40,.10);box-shadow:var(--shadow-shot)}
.shot23 img{display:block;width:100%;height:auto}
.stage23 figcaption{margin:16px 4px 0;font-size:13.5px;color:var(--muted);text-align:center}
.shot23.lift{transform:translateY(-6px)}
@media(min-width:1040px){.stage23.overlap{margin-bottom:-120px;z-index:2}}
/* Trust bar: facts we can show, each with where it is shown. */
.trust23{position:relative;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust23::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--grad);opacity:.9}
.trust23 ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.trust23 li{min-width:0}
.trust23 li+li{border-left:1px solid var(--line)}
.trust23 a{display:flex;gap:12px;align-items:center;min-height:88px;padding:18px 20px;color:var(--ink);text-decoration:none;font-weight:650;font-size:14.5px;line-height:1.35;letter-spacing:-.005em}
.trust23 a:hover{background:var(--band);text-decoration:none}
.trust23 svg{flex:none;width:22px;height:22px;fill:none;stroke:var(--blue-ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1100px){.trust23 ul{grid-template-columns:repeat(2,minmax(0,1fr))}.trust23 li+li{border-left:0}.trust23 li{border-top:1px solid var(--line)}.trust23 li:nth-child(even){border-left:1px solid var(--line)}.trust23 li:first-child,.trust23 li:nth-child(2){border-top:0}.trust23 li:last-child:nth-child(odd){grid-column:1/-1}}
@media(max-width:480px){.trust23 ul{grid-template-columns:minmax(0,1fr)}.trust23 li:nth-child(even){border-left:0}.trust23 li:nth-child(2){border-top:1px solid var(--line)}.trust23 a{min-height:60px;padding:14px 4px}}
/* Closing call to action: the one dark band on a page. */
.cta23{padding:0 0 104px}
.cta23 .ctapanel{position:relative;overflow:hidden;isolation:isolate;display:grid;gap:28px;align-items:center;padding:clamp(36px,5vw,64px);
border-radius:var(--radius-xl);background:var(--tint-panel);border:1px solid var(--line-accent);box-shadow:var(--shadow-2);color:var(--text)}
.cta23 .ctapanel::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad)}
.cta23 .ctapanel::after{content:"";position:absolute;inset:-50% -20% auto auto;width:60%;height:200%;z-index:-1;background:var(--glow-violet)}
.cta23 h2{margin:0 0 12px;color:var(--ink);font-weight:var(--weight-h2);letter-spacing:var(--track-h2);line-height:1.08;font-size:var(--size-cta);max-width:20ch}
.cta23 p{margin:0;color:var(--muted);max-width:56ch;font-size:var(--size-lead)}
.cta23 .actions23{display:flex;flex-wrap:wrap;gap:12px}
@media(min-width:960px){.cta23 .ctapanel{grid-template-columns:minmax(0,1.4fr) auto}}
@media(max-width:640px){.cta23{padding-bottom:64px}.cta23 .actions23 .btn{flex:1 1 100%}}
/* Proof slots (testimonials and logos). Empty lists render nothing. */
.quotes23{display:grid;gap:20px;list-style:none;margin:0;padding:0;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.quotes23{grid-template-columns:repeat(2,minmax(0,1fr))}}
.quote23{margin:0;padding:32px 30px 28px}
.quote23 blockquote{margin:0 0 20px;font-size:clamp(18px,1.7vw,21px);line-height:1.5;letter-spacing:-.01em;color:var(--ink);font-weight:550}
.quote23 blockquote::before{content:"\201C";display:block;height:28px;font-size:56px;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.quote23 figcaption{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:14.5px;line-height:1.4}
.quote23 figcaption strong{display:block;color:var(--ink);font-weight:650}
.quote23 figcaption img{width:auto;height:32px;max-width:120px;object-fit:contain}
.logos23{padding:36px 0;border-bottom:1px solid var(--line)}
.logos23 p{margin:0 0 18px;text-align:center;font:600 12px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.logos23 ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:24px 48px}
.logos23 img{display:block;height:34px;width:auto;max-width:160px;object-fit:contain;filter:grayscale(1);opacity:.72}
.sample23{display:inline-block;margin:0 0 8px;padding:2px 8px;border-radius:6px;background:var(--sample-bg);color:var(--sample-text);font:700 11px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase}
/* Problems, each with the tool that answers it. */
.prob23{display:grid;gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.prob23>li{display:grid;gap:12px 40px;padding:32px 0;border-bottom:1px solid var(--line)}
@media(min-width:900px){.prob23>li{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,.8fr);align-items:start}}
.prob23 h3{margin:0;font-size:20px;font-weight:720;line-height:1.3;color:var(--ink)}
.prob23 p{margin:0;color:var(--text)}
.prob23 .answer{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-radius:var(--radius-lg);background:var(--band);border:1px solid var(--line)}
.prob23 .answer small{font:600 11.5px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.prob23 .answer a{font-weight:700;color:var(--ink);text-decoration:none}
.prob23 .answer a:hover{color:var(--blue-ink)}
.notclaim23{margin:0;padding:24px 26px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--violet)}
.notclaim23 ul{margin:10px 0 0;padding-left:1.2em}
.notclaim23 li{margin:6px 0;color:var(--text)}
/* Hero (home and landing pages) */
.hero23{position:relative;isolation:isolate;overflow:hidden;padding:104px 0 80px;background:var(--surface)}
.hero23::before{content:"";position:absolute;inset:-30% -10% auto -10%;height:900px;z-index:-1;
background:radial-gradient(40% 50% at 22% 30%,rgba(59,108,246,.14),transparent 70%),radial-gradient(40% 55% at 78% 25%,rgba(123,77,242,.14),transparent 70%)}
.hero23 .herocopy{max-width:900px;margin:0 auto;text-align:center}
.hero23 h1{margin:0 auto 22px;font-size:clamp(2.6rem,7vw,5rem);font-weight:820;letter-spacing:-.045em;line-height:1.0;color:var(--ink);max-width:16ch;text-wrap:balance}
.hero23 h1 .hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-inline-end:.06em;margin-inline-end:-.06em}
.hero23 .herolead{margin:0 auto 32px;max-width:52ch;font-size:clamp(17px,1.7vw,20px);line-height:1.6;color:var(--muted)}
.hero23 .heroactions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:0}
.hero23 .herosmall{margin:18px 0 0;font-size:14px;color:var(--soft)}
.hero23 .stage23{margin:64px auto 0;max-width:1120px}
@media(max-width:640px){.hero23{padding-top:56px;padding-bottom:48px}.hero23 .heroactions .btn{flex:1 1 100%}.hero23 .stage23{margin-top:40px;padding:12px;border-radius:var(--radius-lg)}}
.split23{display:grid;gap:40px;align-items:center}
@media(min-width:1040px){.split23{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:56px}.split23.flip>:first-child{order:2}}
/* 10/30/2026: a picture-less product row (logo panels removed) spans the full width. */
@media(min-width:1040px){.split23:has(> :only-child){grid-template-columns:minmax(0,1fr)}}
.split23 h2{margin:0 0 16px}
.ticks23{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.ticks23 li{position:relative;padding-left:30px;color:var(--text);line-height:1.55}
.ticks23 li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:var(--grad)}
.ticks23 li::after{content:"";position:absolute;left:5px;top:8px;width:8px;height:4.5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.more23{margin:28px 0 0}
.more23 a{font-weight:650;color:var(--blue-ink);text-decoration:none}
.more23 a span{display:inline-block;margin-left:6px;transition:transform var(--motion-fast) var(--ease)}
.more23 a:hover span{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.btn:hover,:is(.hmcard,.cardlink,.neighbor,.servicecard,.card23):hover{transform:none!important}}
@media(forced-colors:active){.btn{border:1px solid ButtonText}.trust23::before,.card23.featured::before{display:none}.hero23 h1 .hl{-webkit-text-fill-color:currentColor;color:CanvasText;background:none}}
@media print{nav.sitenav,footer.sitefoot,.cta23{display:none}}
.productshot{margin:8px auto 56px}
@media(max-width:640px){.productshot{margin-bottom:36px}}
/* Numbered steps: white, bold numbers on a filled gradient circle (owner, 10/26/2026). White on the lightest stop,
#3563EE, is 5.0:1 (AA for normal text, above the 4.7:1 the owner asked for). */
.access23 ol li span,.tourflow li::before,.getsteps li::before{background:var(--grad);border-color:transparent;color:var(--on-grad);-webkit-text-fill-color:var(--on-grad);font-weight:700}
/* Screenshot sizes: large and small (tokens --shot-large, --shot-small, --shot-ratio). */
.shot23.large{max-width:var(--shot-large);margin-left:auto;margin-right:auto}
.shot23.small{max-width:var(--shot-small);margin-left:auto;margin-right:auto}
.shot23 img{aspect-ratio:var(--shot-ratio);width:100%;height:auto;object-fit:cover}
.stage23.large{max-width:calc(var(--shot-large) + 88px);margin-left:auto;margin-right:auto}
.stage23.small{max-width:calc(var(--shot-small) + 88px);margin-left:auto;margin-right:auto}
/* Closing call to action: centered in its section, the same space above and below (owner, 10/26/2026). */
.cta23{padding:96px 0}
.cta23 .ctapanel{grid-template-columns:minmax(0,1fr)!important;justify-items:center;align-content:center;text-align:center;min-height:340px}
.cta23 h2{margin-left:auto;margin-right:auto}
.cta23 p{margin-left:auto;margin-right:auto}
.cta23 .actions23{justify-content:center}
@media(max-width:640px){.cta23{padding:64px 0}.cta23 .ctapanel{min-height:0}}
/* Header menus (desktop): every panel is a card centered under its own trigger; NAV_SCRIPT nudges it back inside the
window near an edge (--navshift). The phone drawer below 1024 px is unchanged. */
@media(min-width:1024px){
.navmenus>li{position:relative}
.navmenu .navpanel{left:50%;right:auto;top:calc(100% + 14px);width:min(var(--panel-w,600px),calc(100vw - 32px));
transform:translateX(calc(-50% + var(--navshift,0px)));border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-3)}
.navmenu[data-menu="products"] .navpanel{--panel-w:780px}
.navmenu .navpanel>*{max-width:none;padding-left:24px;padding-right:24px}
.navmenu .navpanel>:first-child{padding-top:24px}
.navmenu .navpanel>:last-child{padding-bottom:24px}
/* The brand on the menus (owner, 11/02/2026): a blue-to-violet hairline on top, a soft glow, rounder corners, and a lit row on hover. */
.navmenu .navpanel{border-radius:20px;overflow:hidden;background-image:radial-gradient(ellipse 60% 70% at 100% 0%,rgba(123,77,242,.14),transparent 70%),radial-gradient(ellipse 50% 60% at 0% 0%,rgba(53,99,238,.12),transparent 70%)}
.navmenu .navpanel::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,#3563EE,#7B4DF2,#C79BFF)}
.navmenu .navlist a{transition:background .15s ease,transform .15s ease}
.navmenu .navlist a:hover{background:linear-gradient(120deg,rgba(53,99,238,.12),rgba(123,77,242,.10));transform:translateX(2px)}
.navmenu .navlist a:hover .navico{background:linear-gradient(135deg,#3563EE,#7B4DF2);stroke:#fff;border-color:transparent}
.navmenu .navlist strong{font-size:15.5px}
.navmenu .navcols{gap:28px}
.navmenu .navside{padding-left:24px}
html.motion-ok .navmenu[open] .navpanel{animation:navcard .16s ease-out}
}
@keyframes navcard{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}
/* Hero rhythm (owner, 10/26/2026): one spacing scale on every hero. Heading to lead 24, lead to buttons 32,
buttons to the note line 24, note to the shot 48. */
.hero23 h1{margin-bottom:var(--space-3)}
.hero23 .herolead{margin:0 auto var(--space-4)}
.hero23 .heroactions{margin:0;gap:var(--space-2)}
.hero23 .herosmall{margin:var(--space-3) 0 0}
.hero23 .stage23{margin-top:var(--space-5)}
header.doc h1{margin:0 0 var(--space-3)}
header.doc .lead{margin:0}
header.doc .heroactions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-4) 0 0}
header.doc .actions{margin:var(--space-3) 0 0}
@media(max-width:640px){.hero23 .herolead{margin-bottom:var(--space-3)}.hero23 .stage23{margin-top:var(--space-4)}}
@media(min-width:1024px){nav.sitenav .navtoggle,nav.sitenav.hasmenu .navtoggle:not([hidden]){display:none}}
/* A vendor note (owner, 10/26/2026): one quiet factual line by the first mention of a vendor. */
.vendornote{margin:16px 0;padding:10px 14px;border-left:3px solid var(--line-strong);border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:var(--band);color:var(--muted);font-size:14px;line-height:1.55;max-width:72ch}
/* Proof (website preview 35, owner 10/26/2026): the stats band, the agency block and numbered steps. Real numbers
only, each computed by scripts/build-writing.py from a file in the repo and linked to where the site shows it. */
.stats35{margin:var(--space-5) 0 0}
.statsec35{padding:var(--space-5) 0 0}.statsec35 .stats35{margin:0}.statsec35 .more23{margin-top:var(--space-3)}
.stats35 ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-1)}
.stats35 li{background:var(--surface)}
.stats35 li:last-child:nth-child(odd){grid-column:1/-1}
.stats35 a{display:flex;flex-direction:column;gap:6px;height:100%;padding:22px 20px;color:var(--text);text-decoration:none;transition:background var(--motion-fast) var(--ease)}
.stats35 a:hover{background:var(--band)}
.stats35 a:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}
.stats35 strong{font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:var(--weight-h1);letter-spacing:var(--track-h2);line-height:1;color:var(--ink)}
.stats35 li:first-child strong{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats35 span{font-size:14.5px;line-height:1.45;color:var(--muted)}
@media(min-width:1040px){.stats35 ul{grid-template-columns:repeat(5,minmax(0,1fr))}.stats35 li:last-child:nth-child(odd){grid-column:auto}}
.agency35{display:grid;gap:32px}
@media(min-width:1040px){.agency35{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:start}}
.agency35 h2,.agency35 h3{margin:0 0 16px}
.agency35 ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
@media(min-width:720px){.agency35 ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
.agency35 li a{display:flex;flex-direction:column;gap:6px;height:100%;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow-1);color:var(--text);text-decoration:none;transition:box-shadow var(--motion) var(--ease),transform var(--motion) var(--ease)}
.agency35 li a:hover{box-shadow:var(--shadow-3);transform:translateY(-2px)}
.agency35 li strong{color:var(--ink);font-weight:var(--weight-h3);font-size:16.5px;line-height:1.3}
.agency35 li span{color:var(--muted);font-size:15px;line-height:1.5}
.steps35{display:grid;gap:32px}
@media(min-width:1040px){.steps35{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start}}
.steps35 ol{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.steps35 ol li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:2px 14px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow-1)}
.steps35 ol li span{grid-row:span 2;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font-size:13.5px;font-weight:750;color:var(--on-grad);background:var(--grad)}
.steps35 ol li strong{color:var(--ink);font-weight:700}
.steps35 ol li em{font-style:normal;color:var(--muted);font-size:15px;line-height:1.5}
.steps35 .heroactions{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.steps35 .small{margin:14px 0 0;color:var(--muted);font-size:14.5px}
.split23.top35{align-items:start}
.ask35 table{width:100%}
.ask35 th[scope=row]{width:44%;color:var(--ink)}
/* The shared link rules paint gradient text on a link inside a list; these cards are not inline links. */
.stats35 ul>li>a,.agency35 ul>li>a{background-image:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;border-image:none}
.stats35 ul>li>a{background-color:var(--surface)}.stats35 ul>li>a:hover{background-color:var(--band)}.agency35 ul>li>a{background-color:var(--surface)}
.stats35 ul>li>a strong,.agency35 ul>li>a strong{color:var(--ink);-webkit-text-fill-color:var(--ink)}
.stats35 ul>li>a span,.agency35 ul>li>a span{color:var(--muted);-webkit-text-fill-color:var(--muted)}
.stats35 ul>li:first-child>a strong{background-image:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ask35{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-1);overflow:hidden}.ask35 table{border-collapse:collapse;margin:0}.ask35 th,.ask35 td{text-align:left;vertical-align:top;padding:14px 18px}.ask35 thead th{background:var(--band);color:var(--muted);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase}.ask35 tbody tr{border-top:1px solid var(--line)}.ask35 td{color:var(--text)}
@media(prefers-reduced-motion:reduce){.stats35 a,.agency35 li a{transition:none}.agency35 li a:hover{transform:none}}
/* ── Website preview 38 (owner, 10/27/2026): fewer repeated boxes ──────────────────────────────────────────────
Facts strips, an audience switcher, numbered process lines, link rows and short prose in place of card grids.
Reveal: /tools/walk/walk.js adds .rv38 to <html> only when motion is allowed and IntersectionObserver exists, so
without JavaScript, or under reduced motion, everything is simply in place. */
.rv38 [data-rv]:not(.vis38)>*,.rv38 .vis38[data-rv],.rv38 .vis38 .st38{transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.rv38 [data-rv]:not(.vis38):not(.in)>*{opacity:0;transform:translateY(18px)}
.rv38 [data-rv]>*:nth-child(2){transition-delay:.07s}.rv38 [data-rv]>*:nth-child(3){transition-delay:.14s}
.rv38 [data-rv]>*:nth-child(4){transition-delay:.21s}.rv38 [data-rv]>*:nth-child(5){transition-delay:.28s}
.rv38 [data-rv]>*:nth-child(6){transition-delay:.35s}.rv38 [data-rv]>*:nth-child(n+7){transition-delay:.42s}
.rv38 .vis38[data-rv]:not(.in){opacity:0;transform:translateY(18px) scale(.985)}
.vis38 .st38{transform-box:fill-box;transform-origin:center}
.rv38 .vis38:not(.in) .st38{opacity:0;transform:translateY(8px)}
.rv38 .vis38 .d1{transition-delay:.25s}.rv38 .vis38 .d2{transition-delay:.4s}.rv38 .vis38 .d3{transition-delay:.55s}.rv38 .vis38 .d4{transition-delay:.7s}
@media(prefers-reduced-motion:reduce){.rv38 [data-rv],.rv38 [data-rv]>*,.rv38 .vis38 .st38{opacity:1!important;transform:none!important;transition:none!important}.tabsjs .audpanel38{animation:none!important}}
/* Drawings */
.vis38{margin:0;min-width:0}
.vis38 svg{display:block;width:100%;height:auto;max-width:520px;margin:0 auto}
/* Facts strip: an icon, a short heading and one line. Hairlines, no boxes. */
.facts38{list-style:none;margin:0;padding:0;display:grid;gap:0 40px;grid-template-columns:minmax(0,1fr)}
@media(min-width:720px){.facts38.c2,.facts38.c3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1040px){.facts38.c3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.facts38 li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:14px;margin:0;padding:18px 0;border-top:1px solid var(--line);max-width:none}
.fico38{width:24px;height:24px;margin-top:1px;fill:none;stroke:var(--blue-ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.facts38 h2,.facts38 h3{margin:0 0 4px;font-size:16.5px;font-weight:700;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
.facts38 h3 a{color:inherit;-webkit-text-fill-color:currentColor;text-decoration:none}
.facts38 h3 a:hover{color:var(--blue-ink);text-decoration:underline;text-underline-offset:3px}
.facts38 p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.facts38 p a{font-weight:650;white-space:nowrap}
@media(max-width:640px){.facts38 li{padding:14px 0;gap:12px}.facts38 p{font-size:14.5px}}
.agency35 .facts38{gap:0 32px}
.agency35 .facts38 li a{display:inline;height:auto;padding:0;border:0;border-radius:0;background:none;box-shadow:none;transform:none}
/* Text beside a drawing */
.duo38{display:grid;gap:32px;align-items:center}
@media(min-width:1040px){.duo38{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:64px}.duo38.flip>div{order:2}}
@media(max-width:1039.98px){.duo38 .vis38{max-width:360px;width:100%;margin:0 auto}}
/* Numbered process line, joined by the gradient */
.proc38{list-style:none;margin:0;padding:0;display:grid;gap:0}
.proc38 li,.access23 .proc38 li,.steps35 .proc38 li{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;margin:0;padding:0 0 26px;border:0;border-radius:0;background:none;box-shadow:none;max-width:none}
.proc38 li:last-child,.access23 .proc38 li:last-child,.steps35 .proc38 li:last-child{padding-bottom:0}
.proc38 li::before{content:"";position:absolute;left:19px;top:44px;bottom:4px;width:2px;border-radius:2px;background:var(--grad-down);opacity:.3}
.proc38 li:last-child::before{display:none}
.proc38 .pn38,.access23 .proc38 .pn38,.steps35 .proc38 .pn38{grid-row:auto;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--grad);color:var(--on-grad);-webkit-text-fill-color:var(--on-grad);font-size:15px;font-weight:750;box-shadow:0 8px 18px -8px rgba(91,92,240,.6)}
.proc38 h3{margin:8px 0 4px;font-size:17px;font-weight:700;line-height:1.35;color:var(--ink)}
.proc38 p{margin:0;font-size:15.5px;line-height:1.55;color:var(--muted);max-width:62ch}
@media(min-width:1040px){
.proc38.across{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:28px}
.proc38.across li{grid-template-columns:minmax(0,1fr);gap:12px;padding:0}
.proc38.across li::before{left:52px;right:-16px;top:19px;bottom:auto;width:auto;height:2px;background:var(--grad)}
}
.steps35 .vis38{margin-top:32px;max-width:420px}
/* The tools' own numbered lists take the same line */
ol.getsteps{gap:0}
ol.getsteps li{padding:0 0 22px 56px;min-height:40px}
ol.getsteps li:last-child{padding-bottom:0}
ol.getsteps li::before{width:40px;height:40px;line-height:40px;font-size:15px;border:0;background:var(--grad);color:var(--on-grad);-webkit-text-fill-color:var(--on-grad);box-shadow:0 8px 18px -8px rgba(91,92,240,.6)}
ol.getsteps li::after{content:"";position:absolute;left:19px;top:44px;bottom:4px;width:2px;border-radius:2px;background:var(--grad-down);opacity:.3}
ol.getsteps li:last-child::after{display:none}
@media(min-width:900px){
.getsection ol.getsteps{gap:28px}
.getsection ol.getsteps li{padding:54px 0 0}
.getsection ol.getsteps li::after{left:52px;right:-16px;top:19px;bottom:auto;width:auto;height:2px;background:var(--grad)}
.getsection ol.getsteps li:last-child::after{display:none}
}
ol.steps li{padding-bottom:6px}
ol.steps li::before{width:28px;height:28px;border:0;background:var(--grad);color:var(--on-grad);-webkit-text-fill-color:var(--on-grad);font-family:var(--font);font-weight:700}
ol.steps li::after{content:"";position:absolute;left:13px;top:32px;bottom:-6px;width:2px;border-radius:2px;background:var(--grad-down);opacity:.25}
ol.steps li:last-child::after{display:none}
/* Key capabilities: a drawing, then two columns of ticked lines */
.feat38{display:grid;gap:24px}
.feat38 .vis38 svg{max-width:440px;margin:0}
.feat38 .featuregrid{gap:0 36px}
.feat38 .featuregrid li{position:relative;padding:14px 0 14px 34px;border:0;border-top:1px solid var(--line);border-radius:0;background:none;box-shadow:none}
.feat38 .featuregrid li::before{content:"";position:absolute;left:0;top:17px;width:20px;height:20px;border-radius:50%;background:var(--grad)}
.feat38 .featuregrid li::after{content:"";position:absolute;left:6px;top:22px;width:7px;height:4px;border-left:2px solid #FFFFFF;border-bottom:2px solid #FFFFFF;transform:rotate(-45deg)}
@media(max-width:719.98px){.feat38 .vis38{max-width:340px}}
/* Check it yourself: a facts strip */
ul.proofgrid{gap:0 36px}
@media(min-width:1180px){ul.proofgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
ul.proofgrid li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:2px 14px;padding:16px 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none;box-shadow:none}
ul.proofgrid li svg{grid-row:1/span 3;margin-top:2px;stroke:var(--blue-ink)}
ul.proofgrid li h3{margin:0}
/* Link rows: places to go, one line each */
.rows38,ul.resgrid{list-style:none;margin:0;padding:0;display:grid;gap:0 40px;grid-template-columns:minmax(0,1fr)}
@media(min-width:860px){.rows38.c2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1180px){ul.resgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rows38 li{margin:0;max-width:none}
.rows38 a{display:grid;grid-template-columns:26px minmax(0,1fr) 18px;gap:14px;align-items:start;padding:18px 0;border-top:1px solid var(--line);color:var(--text);text-decoration:none}
/* Homepage guide/proof rows have no icon element, so without this the text
<span> auto-places into the 26px icon column and wraps one word per line.
Spanning icon+text columns leaves trust-page rows (svg icon first) unchanged. */
.rows38 a > span:first-child{grid-column:1 / span 2}
.rows38 strong{display:block;color:var(--ink);font-weight:700;font-size:16.5px;line-height:1.35}
.rows38 em{display:block;margin-top:2px;font-style:normal;color:var(--muted);font-size:15px;line-height:1.5}
.rows38 b,.productpage ul.resgrid a::after,.productgrid>article ul.resgrid a::after{color:var(--blue-ink);font-weight:600;transition:transform var(--motion-fast) var(--ease)}
.rows38 a:hover strong{color:var(--blue-ink)}.rows38 a:hover b{transform:translateX(3px)}
.productpage ul.resgrid a,.productgrid>article ul.resgrid a{position:relative;gap:2px;padding:14px 28px 14px 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none}
.productpage ul.resgrid a::after,.productgrid>article ul.resgrid a::after{content:"\2192";position:absolute;right:4px;top:14px}
.productpage ul.resgrid a:hover,.productgrid>article ul.resgrid a:hover{background:none}
.productpage ul.resgrid a:hover strong{color:var(--blue-ink)}
@media(prefers-reduced-motion:reduce){.rows38 b{transition:none}.rows38 a:hover b{transform:none}}
/* Short prose and an icon row */
.prose38{max-width:66ch;margin:0;font-size:clamp(17px,1.5vw,19px);line-height:1.65;color:var(--text)}
.prose38 a{font-weight:650}
.iconrow38{list-style:none;display:flex;flex-wrap:wrap;gap:12px 32px;margin:28px 0 0;padding:0}
.iconrow38 li{margin:0}
.iconrow38 a,.iconrow38 span{display:inline-flex;align-items:center;gap:10px;font-weight:650;color:var(--ink);text-decoration:none}
.iconrow38 a:hover{color:var(--blue-ink)}
/* Audience switcher: one segmented control, one panel at a time */
.audtabs38{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;margin:0 0 32px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface);box-shadow:var(--shadow-1)}
.audtabs38[hidden]{display:none}
.audtabs38 button{appearance:none;-webkit-appearance:none;border:0;margin:0;background:none;font:inherit;font-size:15px;font-weight:650;line-height:1.2;color:var(--muted);padding:10px 20px;min-height:44px;border-radius:var(--radius-pill);cursor:pointer;transition:background var(--motion) var(--ease),color var(--motion) var(--ease)}
.audtabs38 button:hover{color:var(--ink)}
.audtabs38 button[aria-selected="true"]{background:var(--grad);color:var(--on-grad);-webkit-text-fill-color:var(--on-grad);box-shadow:0 8px 18px -8px rgba(91,92,240,.6)}
.audtabs38 button:focus-visible{outline:2px solid var(--accent-ring);outline-offset:2px}
.audpanel38{display:grid;gap:28px;align-items:center}
.audpanel38+.audpanel38{margin-top:56px}
.tabsjs .audpanel38+.audpanel38{margin-top:0}
.audpanel38[hidden]{display:none}
@media(min-width:900px){.audpanel38{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}}
.audtext38 h2,.audtext38 h3{margin:0 0 12px;font-size:clamp(1.5rem,2.4vw,2.05rem);font-weight:780;letter-spacing:-.03em;line-height:1.15;color:var(--ink)}
.audtext38>p:not(.eyebrow):not(.more23){margin:0;font-size:17px;line-height:1.6;color:var(--muted);max-width:44ch}
.audtext38 .more23{margin-top:20px}
.tabsjs .audpanel38:not([hidden]){animation:aud38 .8s cubic-bezier(.22,1,.36,1)}
@keyframes aud38{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:640px){
.audtabs38{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;border-radius:18px;margin-bottom:24px}
.audtabs38 button{padding:10px 8px;border-radius:14px;font-size:14.5px}
.audpanel38 .vis38{max-width:340px;width:100%;margin:0 auto}
}
/* Article cards on a phone: one swipeable row instead of a long stack */
@media(max-width:719.98px){
.snap38{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:4px 16px 18px;margin:0 -16px;scroll-padding:0 16px;scrollbar-width:none}
.snap38::-webkit-scrollbar{display:none}
.snap38>li{flex:0 0 84%;scroll-snap-align:start}
}
/* The trust bar on a phone: two columns of small facts, no row of boxes */
@media(max-width:480px){
.trust23 ul{grid-template-columns:repeat(2,minmax(0,1fr));padding:6px 0}
.trust23 li,.trust23 li+li,.trust23 li:nth-child(even),.trust23 li:nth-child(2){border:0}
.trust23 a{min-height:0;padding:9px 2px;gap:8px;font-size:13.5px}
.trust23 svg{width:18px;height:18px}
}
/* The numbers band: figures on a hairline, not a grid of boxes */
.stats35 ul{gap:0;background:none;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;overflow:visible}
.stats35 li{background:none}
.stats35 a{padding:22px 18px 22px 0}
@media(min-width:1040px){.stats35 li+li a{padding-left:22px;border-left:1px solid var(--line)}}
@media(max-width:1039.98px){.stats35 li:nth-child(even) a{padding-left:18px;border-left:1px solid var(--line)}.stats35 li:nth-child(n+3){border-top:1px solid var(--line)}.stats35 a{padding-top:16px;padding-bottom:16px}}
/* Tap targets (CEO site plan, 11/02/2026): small text links get a 44 px touch area without moving the layout. */
.sitefoot a:not(.btn):not(.brand),.stages44 h3 a,.sits43 a,.mx43 li a,.facts38 a,.tiles44 a:not(.btn),.more44,.more23 a{display:inline-block;padding:12px 0;margin:-12px 0}
.tap44{display:inline-block;padding:12px 0;margin:-12px 0}
/* The eight-problem grid (solutions pages, 11/02/2026) is cards, not the three-column rows above. */
.prob23.two>li{display:block;padding:20px 22px;border-bottom:1px solid var(--line)}
/* The skip link: off screen until it has focus (review, 11/02/2026). */
.skip{position:absolute;left:16px;top:-48px;z-index:1000;padding:10px 14px;border-radius:10px;background:var(--grad);color:#fff;font-weight:600;text-decoration:none}
.skip:focus{top:12px;outline:2px solid #fff;outline-offset:2px}
/* The compare tables stack into one card per row on phones (owner, 11/03/2026): three narrow columns read badly. */
@media (max-width:699px){
.comparewrap{overflow:visible}
table.compare,table.compare tbody,table.compare tr,table.compare th,table.compare td{display:block;width:100%;box-sizing:border-box}
table.compare thead{display:none}
table.compare tr{margin:0 0 14px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
table.compare th[scope=row]{padding:14px 16px 8px;font-size:17px;line-height:1.3;border:0;text-align:left;color:var(--ink)}
table.compare td{padding:10px 16px 14px;border:0;border-top:1px solid var(--line);text-align:left;font-size:15px;line-height:1.5}
table.compare td::before{content:attr(data-label);display:block;font:600 11px/1.4 ui-monospace,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
table.compare td.devi{box-shadow:inset 3px 0 0 #4B8DF8}
table.compare td.devi::before{color:#8FB4FF}
body:has(.pgh44) table.compare tr{background:#0D1018;border-color:rgba(255,255,255,.12)}
body:has(.pgh44) table.compare td{border-top-color:rgba(255,255,255,.1)}
}