/* Portainer V3UI site theme — self-hosted, built from the homepage. Single source of truth. Default dark; light via [theme='light'] on . No external CDN dependency. */ :root, [theme='light']{ --bg:#f9fafb; --surface:#ffffff; --surface-2:#fafafb; --border:#ecedee; --border-strong:#d1d5db; --text:#111827; --text-semi:#374151; --muted:#667085; --accent:#1570ef; --accent-2:#2e90fa; --on-accent:#fff; --brand:#1570ef; --brand-soft:#2e90fa; --success:#12b76a; --danger:#f04438; --warning:#f79009; --eyebrow-bg:#eaf3ff; --eyebrow-border:#d6e8ff; --eyebrow-text:#1570ef; --nav-bg:rgba(255,255,255,.86); --nav-border:var(--border); --wayfind-bg:#eff6ff; --wayfind-text:#374151; --wayfind-link:#1570ef; --wayfind-dot:#d1d5db; --announce-bg:#1570ef; --announce-text:#fff; --twelve:#98a2b3; --phrase:#1570ef; --go:#1570ef; --puppy:#667085; --trust-logo:#98a2b3; --hook-strong:#374151; --logo:#2e2f33; --panel:#fff; --panel-border:var(--border); --door-bg:#fff; --door-border:var(--border); --door-primary-border:#d1d5db; --door-primary-glow:0 0 0 1px #d1d5db, var(--card-shadow); --std-border:#d1d5db; --std-glow:0 0 0 1px #d1d5db, var(--card-shadow); --std-lbl:#1570ef; --btn-ghost-bg:transparent; --btn-ghost-text:#374151; --btn-ghost-border:#d1d5db; --btn-ghost-hover:#f3f4f6; --code-bg:#f3f4f6; --code-text:#1f2937; --quote-bar:#1570ef; --card-shadow:0px 2px 8px -2px rgba(0,0,0,.07); --pop-shadow:0 4px 6px -2px rgba(0,0,0,.1),0 12px 24px -4px rgba(0,0,0,.15); --glow-a:transparent; --glow-b:transparent; --grid-op:0; --grid-line:rgba(17,24,39,.04); } [theme='dark']{ --bg:#18181b; --surface:#232327; --surface-2:#2a2a2f; --border:#34343a; --border-strong:#46464d; --text:#fafafa; --text-semi:#e2e2e6; --muted:#a1a1aa; --accent:#2e90fa; --accent-2:#60a5fa; --on-accent:#fff; --brand:#60a5fa; --brand-soft:#3b82f6; --success:#34d399; --danger:#f87171; --warning:#fbbf24; --eyebrow-bg:rgba(46,144,250,.14); --eyebrow-border:rgba(46,144,250,.32); --eyebrow-text:#93c5fd; --nav-bg:rgba(24,24,27,.78); --nav-border:rgba(255,255,255,.08); --wayfind-bg:transparent; --wayfind-text:#e5e7eb; --wayfind-link:#60a5fa; --wayfind-dot:rgba(255,255,255,.3); --announce-bg:rgba(255,255,255,.05); --announce-text:#d4d4d8; --twelve:#71717a; --phrase:#60a5fa; --go:#60a5fa; --puppy:#a1a1aa; --trust-logo:#6b6b73; --hook-strong:#e2e2e6; --logo:#fff; --panel:#232327; --panel-border:rgba(255,255,255,.1); --door-bg:rgba(255,255,255,.04); --door-border:rgba(255,255,255,.09); --door-primary-border:rgba(255,255,255,.16); --door-primary-glow:0 0 0 1px rgba(255,255,255,.14); --std-border:rgba(255,255,255,.16); --std-glow:0 0 0 1px rgba(255,255,255,.14); --std-lbl:#60a5fa; --btn-ghost-bg:rgba(255,255,255,.06); --btn-ghost-text:#e5e7eb; --btn-ghost-border:rgba(255,255,255,.16); --btn-ghost-hover:rgba(255,255,255,.12); --code-bg:#202024; --code-text:#dbe4f3; --quote-bar:#60a5fa; --card-shadow:none; --pop-shadow:0 12px 30px -12px rgba(0,0,0,.6); --glow-a:transparent; --glow-b:transparent; --grid-op:0; --grid-line:rgba(255,255,255,.03); } *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text);font-family:"DM Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;transition:background .25s,color .25s} a{color:inherit;text-decoration:none} .wrap{max-width:1180px;margin:0 auto;padding:0 24px} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px} :root{--fs-hero:clamp(40px,6vw,76px);--fs-lead:clamp(18px,2vw,23px)} @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} .wayfind{background:var(--wayfind-bg);border-bottom:1px solid var(--nav-border)} .wayfind .wrap{display:flex;gap:10px;align-items:center;justify-content:center;min-height:38px;font-size:13px;color:var(--wayfind-text);flex-wrap:wrap;text-align:center} .wayfind b{color:var(--text);font-weight:600} .wayfind a{color:var(--wayfind-link);font-weight:600;border-bottom:1px solid transparent} .wayfind a:hover{border-bottom-color:var(--wayfind-link)} .wayfind .dot{color:var(--wayfind-dot)} .announce{background:var(--announce-bg);color:var(--announce-text);border-bottom:1px solid var(--nav-border)} .announce .wrap{display:flex;gap:8px;align-items:center;justify-content:center;min-height:40px;font-size:13.5px;font-weight:500} .announce a{display:inline-flex;gap:8px;align-items:center;color:var(--announce-text)} .announce .arw{transition:transform .2s}.announce a:hover .arw{transform:translateX(3px)} .nav{position:sticky;top:0;z-index:60;background:var(--nav-bg);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--nav-border)} .nav .wrap{display:flex;align-items:center;gap:26px;height:64px} .brand{display:flex;align-items:center;color:var(--logo)} .brand-logo{height:21px;width:auto;display:block} .navlinks{display:flex;gap:6px;align-items:center;margin-left:6px} .navlinks>a,.ddwrap>button{font-family:inherit;font-size:14.5px;color:var(--text-semi);font-weight:500;cursor:pointer;background:none;border:0;padding:8px 10px;border-radius:6px;display:inline-flex;align-items:center;gap:5px} .navlinks>a:hover,.ddwrap>button:hover{color:var(--text);background:var(--btn-ghost-hover)} .ddwrap{position:relative} .ddwrap>button svg{opacity:.5;transition:transform .2s} .ddwrap:hover>button svg,.ddwrap:focus-within>button svg{transform:rotate(180deg)} .ddpanel{position:absolute;top:calc(100% + 8px);left:0;min-width:290px;background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;box-shadow:var(--pop-shadow);padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s;z-index:70} .ddwrap:hover .ddpanel,.ddwrap:focus-within .ddpanel{opacity:1;visibility:visible;transform:translateY(0)} .dditem{display:flex;gap:12px;padding:10px;border-radius:8px;align-items:flex-start} .dditem:hover{background:var(--btn-ghost-hover)} .dditem .di-ic{flex:none;width:32px;height:32px;border-radius:8px;background:var(--eyebrow-bg);color:var(--eyebrow-text);display:grid;place-items:center} .dditem .di-t{font-size:14px;font-weight:600;color:var(--text);display:block} .dditem .di-s{font-size:12.5px;color:var(--muted);line-height:1.35;display:block} .dddiv{height:1px;background:var(--border);margin:6px 8px} .navspace{margin-left:auto;display:flex;gap:10px;align-items:center} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:14.5px;font-weight:600;border-radius:6px;padding:0 16px;height:38px;cursor:pointer;border:1px solid transparent;transition:.15s;white-space:nowrap} .btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{filter:brightness(1.08)} .btn-ghost{background:var(--btn-ghost-bg);color:var(--btn-ghost-text);border-color:var(--btn-ghost-border)} .btn-ghost:hover{background:var(--btn-ghost-hover);color:var(--text)} .btn-lg{height:46px;padding:0 22px;font-size:15.5px} .tmt{width:38px;height:38px;border-radius:6px;border:1px solid var(--btn-ghost-border);background:var(--btn-ghost-bg);color:var(--text-semi);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s} .tmt:hover{background:var(--btn-ghost-hover);color:var(--text)} .tmt .sun{display:none}[theme='dark'] .tmt .sun{display:block}[theme='dark'] .tmt .moon{display:none} .menu-btn{display:none;background:var(--btn-ghost-bg);border:1px solid var(--btn-ghost-border);border-radius:6px;width:40px;height:38px;align-items:center;justify-content:center;cursor:pointer} .menu-btn span,.menu-btn span:before,.menu-btn span:after{content:"";display:block;width:16px;height:2px;background:var(--text);position:relative;transition:background .15s .05s,top .1s .05s,transform .1s} .menu-btn span:before{position:absolute;top:-5px}.menu-btn span:after{position:absolute;top:5px} .nav.menu-open .menu-btn span{background:transparent} .nav.menu-open .menu-btn span:before{top:0;transform:rotate(45deg)} .nav.menu-open .menu-btn span:after{top:0;transform:rotate(-45deg)} .hero{position:relative;overflow:hidden;padding:76px 0 84px} .hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(66% 58% at 80% -8%,var(--glow-a),transparent 60%),radial-gradient(52% 55% at 6% 6%,var(--glow-b),transparent 60%)} .hero:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--grid-op);background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(70% 60% at 50% 28%,#000,transparent 82%);mask-image:radial-gradient(70% 60% at 50% 28%,#000,transparent 82%)} .hero .wrap{position:relative;z-index:1} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--eyebrow-text);background:var(--eyebrow-bg);border:1px solid var(--eyebrow-border);padding:5px 12px;border-radius:999px;margin-bottom:24px} .eyebrow .pmark{height:13px;width:auto;display:block;flex:none} h1{font-size:var(--fs-hero);line-height:1.02;letter-spacing:-.015em;font-weight:800;margin:0 0 22px;max-width:16ch;color:var(--text)} h1 .twelve{color:var(--twelve)} .lead{font-size:var(--fs-lead);line-height:1.45;color:var(--text-semi);max-width:62ch;margin:0 0 20px;font-weight:500} .hook{font-size:16px;line-height:1.62;color:var(--muted);max-width:64ch;margin:0 0 12px} .hook b{color:var(--hook-strong);font-weight:600}.phrase{color:var(--phrase);font-weight:600} .cta-row{display:flex;gap:12px;margin:30px 0 6px;flex-wrap:wrap} .cta-row.renew-cta{justify-content:center;flex-wrap:nowrap} .doors{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:44px} .door{background:var(--door-bg);border:1px solid var(--door-border);border-radius:16px;padding:26px 26px 22px;box-shadow:var(--card-shadow);transition:.18s} .door:hover{transform:translateY(-2px);box-shadow:var(--pop-shadow)} .door.primary{border-color:var(--door-primary-border);box-shadow:var(--door-primary-glow)} .door .tag{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:12px} .door.primary .tag{color:var(--phrase)} .door h3{font-size:21px;letter-spacing:-.02em;margin:0 0 10px;font-weight:700;color:var(--text)} .door p{font-size:15px;line-height:1.55;color:var(--text-semi);margin:0 0 18px} .door .go{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:600;color:var(--go)} .door .go .arw{transition:transform .2s}.door:hover .go .arw{transform:translateX(4px)} .trust{padding:44px 0 8px;text-align:center} .trust .t{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:22px} .logos{display:flex;flex-wrap:wrap;gap:14px 40px;justify-content:center;align-items:center} .logos span{font-size:18px;font-weight:700;color:var(--trust-logo);letter-spacing:-.01em} .caps{padding:78px 0 20px} .sec-head{text-align:left;max-width:74ch;margin:0 0 40px} .sec-head h2{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.015em;font-weight:800;margin:0 0 14px;color:var(--text)} .sec-head p{font-size:17px;color:var(--text-semi);margin:0} .capgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px} .cap{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px;box-shadow:var(--card-shadow)} .cap .ci{width:38px;height:38px;border-radius:10px;background:var(--eyebrow-bg);color:var(--eyebrow-text);display:grid;place-items:center;margin-bottom:16px} .cap h3{font-size:18px;letter-spacing:-.02em;margin:0 0 8px;font-weight:700;color:var(--text)} .cap p{font-size:14.5px;line-height:1.55;color:var(--text-semi);margin:0} .compare{padding:72px 0 20px} .cgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px} .col{border-radius:16px;padding:28px;border:1px solid var(--border);background:var(--surface)} .col.standard{border-color:var(--std-border);box-shadow:var(--std-glow)} .col .lbl{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px} .col.bespoke .lbl{color:var(--muted)}.col.standard .lbl{color:var(--std-lbl)} .col .name{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-bottom:20px;color:var(--text)} .row{display:flex;gap:11px;padding:11px 0;border-top:1px solid var(--border);font-size:14.5px;color:var(--text-semi);line-height:1.45} .row:first-of-type{border-top:none}.row .ic{flex:none;width:18px;font-weight:700} .col.bespoke .ic{color:var(--danger)}.col.standard .ic{color:var(--success)} .puppy{margin-top:16px;font-size:13.5px;color:var(--puppy);font-style:italic} .final{padding:80px 0} .final .box{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:48px;text-align:center;box-shadow:var(--card-shadow);position:relative;overflow:hidden} .final .box:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 80% at 50% -20%,var(--glow-a),transparent 60%)} .final h2{position:relative;font-size:clamp(26px,3.2vw,38px);letter-spacing:-.015em;font-weight:800;margin:0 0 12px;color:var(--text)} .final p{position:relative;font-size:17px;color:var(--text-semi);max-width:52ch;margin:0 auto 26px} .final .cta-row{position:relative;justify-content:center} footer{background:var(--surface-2);border-top:1px solid var(--border);padding:56px 0 34px;margin-top:20px} .fcols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:32px} .fbrand .brand-logo{height:22px;margin-bottom:16px;color:var(--logo)} .fbrand p{font-size:14px;color:var(--muted);line-height:1.55;max-width:34ch;margin:0} .fcol h4{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;margin:0 0 14px} .fcol a{display:block;font-size:14px;color:var(--text-semi);padding:5px 0} .fcol a:hover{color:var(--text)} .fbot{display:grid;grid-template-columns:1fr auto;column-gap:16px;row-gap:6px;align-items:baseline;margin-top:40px;padding-top:22px;border-top:1px solid var(--border);font-size:13px;color:var(--muted)} .fbot .flinks,.fbot .flegal{text-align:right} .flegal{display:flex;gap:16px;justify-content:flex-end;flex-wrap:wrap} @media (max-width:900px){ .navlinks,.navspace .btn-ghost,.navspace .btn-primary{display:none}.menu-btn{display:inline-flex} .doors,.cgrid,.capgrid{grid-template-columns:1fr} .fbot{grid-template-columns:1fr} .fbot .flinks,.fbot .flegal{text-align:left} .flegal{justify-content:flex-start} .fcols{grid-template-columns:1fr 1fr} .hero{padding:52px 0 56px}.final .box{padding:32px 22px} .nav.menu-open .navlinks{display:flex;flex-direction:column;align-items:stretch;gap:2px;position:absolute;top:64px;left:0;right:0;background:var(--panel);border-bottom:1px solid var(--nav-border);box-shadow:var(--pop-shadow);padding:10px 20px 18px;max-height:calc(100vh - 64px);overflow-y:auto} .nav.menu-open .navlinks>a,.nav.menu-open .ddwrap>button{width:100%;justify-content:space-between} .ddwrap.dd-open>button svg{transform:rotate(180deg)} /* Mobile dropdowns only ever open via .dd-open (tap-driven, see theme.js). display:none (not the desktop opacity/visibility fade) is required here: an opacity/visibility-hidden .ddpanel still occupies its absolutely- positioned layout box, which .navlinks' overflow-y:auto then counts as scrollable content - inflating the panel with ~290px of invisible empty space per collapsed dropdown. display:none removes it from layout (and therefore from that scrollable-overflow calculation) entirely, and also can't be reopened by the desktop :hover/:focus-within rule above, which otherwise left a stuck floating panel after a tapped button kept :focus. */ .nav .ddpanel{display:none} .nav .ddwrap.dd-open .ddpanel{display:block;position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:none;min-width:0;margin-top:2px;padding:4px 0 4px 14px} } /* ===== inner-page additions (articles, prose, generic helpers) ===== */ img{max-width:100%;height:auto} .section{padding:64px 0} .eyebrow-lg{margin-bottom:20px} .article-hero{position:relative;overflow:hidden;padding:64px 0 34px;border-bottom:1px solid var(--border)} .article-hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 60% at 82% -10%,var(--glow-a),transparent 60%),radial-gradient(46% 55% at 4% 4%,var(--glow-b),transparent 60%)} .article-hero .wrap{position:relative;max-width:820px} .article-kicker{font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--phrase);margin-bottom:14px} .article-hero h1{font-size:clamp(30px,4.4vw,50px);line-height:1.06;letter-spacing:-.015em;font-weight:800;margin:0;color:var(--text);max-width:none} .article-meta{display:flex;gap:14px;align-items:center;margin-top:20px;font-size:14px;color:var(--muted)} .article-meta .dot{opacity:.5} .prose{max-width:760px;margin:0 auto;padding:44px 24px 12px;font-size:17.5px;line-height:1.72;color:var(--text-semi)} .prose>*:first-child{margin-top:0} .prose h2{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.015em;font-weight:800;color:var(--text);margin:44px 0 14px;line-height:1.2} .prose h3{font-size:clamp(20px,2.1vw,24px);letter-spacing:-.02em;font-weight:700;color:var(--text);margin:34px 0 12px} .prose h4{font-size:18px;font-weight:700;color:var(--text);margin:26px 0 10px} .prose p{margin:0 0 20px} .prose a{color:var(--accent);font-weight:500;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px} .prose a:hover{color:var(--accent-2)} .prose a.btn{text-decoration:none} .prose a.btn-primary,.prose a.btn-primary:hover{color:#fff} .prose a.btn-ghost,.prose a.btn-ghost:hover{color:var(--btn-ghost-text)} .prose a.btn-ghost:hover{color:var(--text)} .prose ul,.prose ol{margin:0 0 22px;padding-left:26px} .prose li{margin:0 0 10px}.prose li::marker{color:var(--brand)} .prose strong{color:var(--text);font-weight:700} .prose img{border-radius:12px;border:1px solid var(--border);margin:26px 0;display:block} .prose figure{margin:26px 0}.prose figcaption{font-size:13.5px;color:var(--muted);text-align:center;margin-top:8px} .prose blockquote{margin:26px 0;padding:6px 0 6px 22px;border-left:3px solid var(--quote-bar,var(--brand));color:var(--text);font-size:19px} .prose code{background:var(--code-bg,#0f1830);color:var(--code-text,#dbe4f3);padding:2px 6px;border-radius:5px;font-size:.9em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace} .prose pre{background:var(--code-bg,#0f1830);color:var(--code-text,#dbe4f3);padding:18px 20px;border-radius:12px;overflow:auto;border:1px solid var(--border);margin:24px 0} .prose pre code{background:none;padding:0} .prose hr{border:0;border-top:1px solid var(--border);margin:34px 0} .prose table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px} .prose th,.prose td{border:1px solid var(--border);padding:10px 12px;text-align:left} .prose th{background:var(--surface-2);color:var(--text);font-weight:700} .prose aside .eyebrow{margin-bottom:12px}.prose aside ul{margin-bottom:0} .article-cta{max-width:760px;margin:20px auto 0;padding:0 24px} .article-cta .box{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:30px;text-align:center;box-shadow:var(--card-shadow)} .article-cta h3{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:0 0 8px;color:var(--text)} .article-cta p{color:var(--text-semi);margin:0 0 18px} .article-cta .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .grid{display:grid;gap:18px}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)} .card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:var(--card-shadow)} .card h3{font-size:18px;font-weight:700;letter-spacing:-.02em;margin:0 0 8px;color:var(--text)} .card p{font-size:14.5px;color:var(--text-semi);margin:0;line-height:1.55} .card .ctag{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 0 10px} .card p+.pm{margin-top:14px}.card .pm:first-of-type{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)} footer.site{background:var(--surface-2);border-top:1px solid var(--border);padding:56px 0 34px;margin-top:40px} footer.site .fbot a,footer.site .flegal a{color:var(--wayfind-link);font-weight:600} @media (max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}.prose{font-size:16.5px}} .logowall{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:38px;margin-top:26px} .logowall img{height:32px;width:auto;opacity:.9;transition:opacity .18s} .logowall img:hover{opacity:1} [theme='dark'] .logowall img.dark-invert{filter:invert(1) brightness(1.7)} @media(max-width:700px){.logowall{gap:26px}.logowall img{height:26px}} h1,h2,h3{text-wrap:balance} .sform{display:flex;flex-direction:column;gap:16px}.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:flex;flex-direction:column;gap:6px}.field label{font-size:13px;font-weight:600;color:var(--text-semi)}.field input,.field textarea,.field select{font-family:inherit;font-size:15px;color:var(--text);background:var(--surface);border:1px solid var(--border-strong);border-radius:10px;padding:11px 13px;transition:border-color .15s}.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent)}.field textarea{resize:vertical}.sform .btn{align-self:flex-start;margin-top:4px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}@media(max-width:900px){.form-grid{grid-template-columns:1fr;gap:32px}.frow{grid-template-columns:1fr}}.form-note{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 20px;font-size:14px;color:var(--text-semi);line-height:1.55;margin-top:20px}.form-note a{color:var(--accent);font-weight:600} /* Fixed light background for embedded HubSpot forms - their own styles assume a light page and aren't theme-aware, so a literal white box (not var(--surface), which goes dark in dark mode) keeps the form's text readable regardless of site theme. */ .hs-form-box{background:#fff;border:1px solid var(--border);border-radius:14px;padding:24px;box-shadow:var(--card-shadow)} .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:46px;align-items:center} .hero-visual{min-width:0} .hero-visual img{width:100%;height:auto;display:block;border:1px solid var(--border);border-radius:14px;box-shadow:var(--card-shadow);cursor:zoom-in;transition:transform .2s,box-shadow .2s} .hero-visual img:hover{transform:translateY(-2px);box-shadow:var(--pop-shadow)} .hv-cap{display:block;text-align:center;margin-top:10px;font-size:12.5px;color:var(--muted)} .hook-sec{padding-top:6px;padding-bottom:6px}.hook-sec .hook,.hook-sec .hook-h{max-width:820px}.hook-h{font-size:15px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--phrase);margin:0 0 18px;text-align:left} #lb{display:none;position:fixed;inset:0;background:rgba(0,0,0,.86);z-index:2000;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}#lb img{max-width:100%;max-height:100%;border-radius:8px} @media(max-width:960px){.hero-grid{grid-template-columns:1fr;gap:26px}.hero-visual{order:2}} /* article tables */ .prose table,.content-table,.table-optimized,.wf-table,.wf-compare-table,.pricing-table,.comparison-table,.partner-table{width:100%;border-collapse:collapse;margin:22px 0;font-size:14.5px;color:var(--text-semi);background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden} .prose th,.prose td,.content-table th,.content-table td,.table-optimized th,.table-optimized td,.wf-table th,.wf-table td,.wf-compare-table th,.wf-compare-table td,.pricing-table th,.pricing-table td,.comparison-table th,.comparison-table td,.partner-table th,.partner-table td{padding:11px 14px;border:1px solid var(--border);text-align:left;vertical-align:top;background:transparent} .prose thead th,.content-table th,.table-optimized th,.wf-table th,.wf-compare-table th,.pricing-table th,.comparison-table th,.partner-table th{background:var(--surface-2);color:var(--text);font-weight:700} /* ========================================================= COMPONENT STYLES - consolidated from page templates. All colors and fonts reference the tokens in :root above, so editing a token restyles the whole site. ========================================================= */ .field input,.field textarea{font-family:inherit;font-size:15px;color:var(--text);background:var(--surface);border:1px solid var(--border-strong);border-radius:10px;padding:11px 13px;transition:border-color .15s} .field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)} .faq-item{border-top:1px solid var(--border);padding:20px 0;max-width:820px;margin:0 auto} .faq-item h3{font-size:16.5px;font-weight:700;color:var(--text);margin:0 0 8px} .faq-item p{font-size:14.5px;color:var(--text-semi);line-height:1.6;margin:0} .faq-item p a{color:var(--accent);font-weight:600} .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start} .cs-note{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 20px;font-size:14px;color:var(--text-semi);line-height:1.55;margin-top:20px} .cs-note a{color:var(--accent);font-weight:600} .rt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .rt{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px;box-shadow:var(--card-shadow);color:inherit;transition:.18s} .rt:hover{transform:translateY(-3px);box-shadow:var(--pop-shadow);border-color:var(--std-border)} .rt h3{font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--text);margin:0 0 10px} .rt p{font-size:14.5px;color:var(--text-semi);line-height:1.5;margin:0 0 18px} .rt-go{margin-top:auto;font-size:14px;font-weight:600;color:var(--go)} .rtabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 26px} .rtab{font-family:inherit;font-size:14px;font-weight:600;color:var(--text-semi);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:8px 16px;cursor:pointer;transition:.15s} .rtab:hover{color:var(--text);background:var(--btn-ghost-hover);border-color:var(--border-strong)} .rtab.active{background:var(--surface-2);color:var(--text);border-color:var(--border-strong)} .rc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .rc{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px;box-shadow:var(--card-shadow);color:inherit;transition:.18s} .rc:hover{transform:translateY(-3px);box-shadow:var(--pop-shadow);border-color:var(--std-border)} .rc-badge{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:4px 10px;border-radius:999px;margin-bottom:14px} .rc-badge.case{background:var(--eyebrow-bg);color:var(--eyebrow-text)} .rc-badge.wp{background:rgba(18,183,106,.14);color:var(--success)} .rc-badge.event-upcoming{background:rgba(251,191,36,.14);color:var(--warning)} .rc-badge.event-past{background:rgba(152,162,179,.14);color:var(--muted)} .rc-badge.insight{background:rgba(147,197,253,.14);color:var(--accent-2)} .rc h3{font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--text);margin:0 0 16px;line-height:1.3} .rc-go{margin-top:auto;font-size:14px;font-weight:600;color:var(--go)} .rc.hide{display:none} .hl{color:var(--accent)} .hero h1{max-width:20ch} .phase{position:relative} .phase .pn{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:10px} .phase.key{border-color:var(--std-border);box-shadow:var(--std-glow)} .phase.key .pn{color:var(--phrase)} .phase.dim{opacity:.72} .note{background:var(--surface);border:1px solid var(--border);border-left:1px solid var(--border);border-radius:12px;padding:18px 22px;color:var(--text-semi);font-size:15px;line-height:1.6;max-width:820px;margin:6px auto 0} p.notice{background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.4);border-left:3px solid var(--warning);border-radius:12px;padding:18px 22px;color:var(--text);font-size:15px;line-height:1.6;max-width:820px;margin:20px auto} .pull{max-width:900px;margin:0 auto;text-align:center} .pull h2{font-size:clamp(26px,3.4vw,40px)} .pull p{font-size:17px;color:var(--text-semi);line-height:1.65;max-width:70ch;margin:18px auto 26px} .pillars{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:8px} .pillars span{display:inline-flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:10px 18px;font-size:15px;font-weight:600;color:var(--text)} .pillars span:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)} .lead-wide{max-width:66ch;margin:0 auto} .closing-note{max-width:70ch;margin:32px auto 0;text-align:center;color:var(--text-semi);font-size:16px;line-height:1.6} .feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px} .feat{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px;box-shadow:var(--card-shadow)} .feat h3{font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--phrase);margin:0 0 16px} .feat ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px} .feat li{display:flex;gap:10px;font-size:14.5px;color:var(--text-semi);line-height:1.4} .feat li:before{content:"✓";color:var(--success);font-weight:700;flex:none} .price-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;margin-top:8px} .price-tier{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:30px;box-shadow:var(--card-shadow);display:flex;flex-direction:column;position:relative} .price-tier.featured{border-color:var(--std-border);box-shadow:var(--std-glow)} .price-tier .badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 12px;border-radius:999px;white-space:nowrap} .price-tier .tname{font-size:14px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)} .price-tier .price{font-size:38px;font-weight:800;letter-spacing:-.03em;color:var(--text);margin:12px 0 0} .price-tier .price small{font-size:16px;font-weight:600;color:var(--muted)} .price-tier .subprice{font-size:13px;color:var(--muted);margin-bottom:16px;min-height:18px} .price-tier .tdesc{font-size:14px;color:var(--text-semi);line-height:1.5;margin:0 0 18px} .price-tier ul{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:10px} .price-tier li{display:flex;gap:10px;font-size:14px;color:var(--text-semi);line-height:1.4} .price-tier li:before{content:"✓";color:var(--success);font-weight:700;flex:none} .price-tier .btn{margin-top:auto;width:100%} .pnote{max-width:820px;margin:26px auto 0;background:var(--surface);border:1px solid var(--border);border-left:1px solid var(--border);border-radius:12px;padding:18px 22px;color:var(--text-semi);font-size:14.5px;line-height:1.55} .pnote b{color:var(--text)} .uc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .uc-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px;box-shadow:var(--card-shadow);transition:.18s;color:inherit} .uc-card:hover{transform:translateY(-3px);box-shadow:var(--pop-shadow);border-color:var(--std-border)} .uc-tag{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--phrase);margin-bottom:12px} .uc-card h3{font-size:19px;letter-spacing:-.02em;font-weight:700;color:var(--text);margin:0 0 12px;line-height:1.25} .uc-card p{font-size:14.5px;color:var(--text-semi);line-height:1.55;margin:0 0 18px} .uc-go{margin-top:auto;font-size:14px;font-weight:600;color:var(--go)} .opt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch} .opt{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:30px;box-shadow:var(--card-shadow)} .opt.featured{border-color:var(--std-border);box-shadow:var(--std-glow)} .opt .badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 12px;border-radius:999px;white-space:nowrap} .opt h3{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--text);margin:0 0 16px} .opt ul{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:10px} .opt li{display:flex;gap:10px;font-size:14.5px;color:var(--text-semi);line-height:1.4} .opt li:before{content:"✓";color:var(--success);font-weight:700;flex:none} .opt .btn{margin-top:auto;width:100%} .inst{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:8px} .card ul{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column;gap:8px} .card li{display:flex;gap:9px;font-size:14px;color:var(--text-semi);line-height:1.4} .card li:before{content:"\2713";color:var(--success);font-weight:700;flex:none} .callout{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:26px 28px;max-width:820px;margin:24px auto} .callout h3{font-size:17px;font-weight:700;color:var(--text);margin:0 0 10px} .callout p{font-size:14.5px;color:var(--text-semi);line-height:1.6;margin:0 0 10px} .callout p:last-child{margin-bottom:0} .chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center} .chips span{display:inline-flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:10px 20px;font-size:15px;font-weight:600;color:var(--text)} .chips span:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)} .trust-line{font-size:14px;color:var(--muted);text-align:center;margin-top:8px} .card ul.chk{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:9px} .card ul.chk li{display:flex;gap:9px;font-size:14px;color:var(--text-semi);line-height:1.4} .card ul.chk li:before{content:"\2713";color:var(--success);font-weight:700;flex:none} ul.checklist{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:10px} ul.checklist li{display:flex;gap:10px;margin:0} ul.checklist li:before{content:"\2713";color:var(--success);font-weight:700;flex:none} .tiers{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;align-items:stretch} .tier{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:30px;box-shadow:var(--card-shadow)} .tier.feat{border-color:var(--std-border);box-shadow:var(--std-glow)} .tier .tbadge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 12px;border-radius:999px;white-space:nowrap} .tier .tname{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--text)} .tier .ttag{font-size:13px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--phrase);margin:4px 0 14px} .tier p{font-size:14.5px;color:var(--text-semi);line-height:1.55;margin:0 0 22px} .tier .btn{margin-top:auto;width:100%} .oc{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px 22px;font-size:15.5px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:12px} .oc:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--success);flex:none} .gov4{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:900px;margin:0 auto} .gp{display:flex;gap:11px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px 20px;font-size:14.5px;color:var(--text-semi);line-height:1.45} .gp:before{content:"\2713";color:var(--success);font-weight:700;flex:none} .vc{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px;box-shadow:var(--card-shadow)} .vc .vlabel{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--eyebrow-text);background:var(--eyebrow-bg);padding:4px 10px;border-radius:999px;margin-bottom:14px} .vc h3{font-size:18px;font-weight:700;color:var(--text);margin:0 0 8px} .vc p{font-size:14px;color:var(--text-semi);line-height:1.5;margin:0 0 16px} .vc ul.stats{list-style:none;padding:16px 0 0;margin:0;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:10px} .vc ul.stats li{display:flex;gap:9px;font-size:13.5px;font-weight:600;color:var(--text);line-height:1.4} .vc ul.stats li:before{content:"\2197";color:var(--accent-2);font-weight:700;flex:none} .quote{max-width:760px;margin:0 auto;text-align:center} .quote blockquote{font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--text);line-height:1.4;margin:0 0 16px} .quote cite{font-size:14px;color:var(--muted);font-style:normal} .subtag{font-size:14px;color:var(--phrase);font-weight:600;margin-top:18px} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .step{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:26px;box-shadow:var(--card-shadow)} .step .sn{font-size:13px;font-weight:800;color:var(--accent);letter-spacing:.06em;margin-bottom:12px} .step h3{font-size:18px;font-weight:700;color:var(--text);margin:0 0 8px} .step p{font-size:14.5px;color:var(--text-semi);line-height:1.5;margin:0} .twoways{margin-top:20px;background:var(--surface);border:1px solid var(--border);border-left:1px solid var(--border);border-radius:12px;padding:18px 22px;color:var(--text-semi);font-size:14.5px;line-height:1.6} .twoways b{color:var(--text)} .stack{max-width:640px;margin:0 auto;display:flex;flex-direction:column;align-items:stretch;gap:0} .layer{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px 24px;text-align:center} .layer .lk{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:6px} .layer .lt{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--text);margin-bottom:8px} .layer p{font-size:14px;color:var(--text-semi);line-height:1.5;margin:0} .layer:nth-child(3){border-color:var(--std-border);box-shadow:var(--std-glow)} .larrow{color:var(--muted);font-size:20px;text-align:center;padding:8px 0} .quad{max-width:640px;margin:24px auto 0;position:relative;border:1px solid var(--border);border-radius:14px;aspect-ratio:1.4/1;background:var(--surface);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr} .quad .cell{border:1px dashed var(--border);display:flex;align-items:center;justify-content:center;text-align:center;font-size:13px;color:var(--muted);padding:12px} .quad .open{background:rgba(46,144,250,.10);border:1px solid var(--accent);color:var(--text)} .quad .open b{color:var(--accent);font-size:16px;display:block;margin-bottom:4px} .axl{position:absolute;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)} .axl.top{top:-22px;left:50%;transform:translateX(-50%)} .axl.bot{bottom:-22px;left:50%;transform:translateX(-50%)} .axl.left{left:-8px;top:50%;transform:translate(-100%,-50%);width:110px;text-align:right} .axl.right{right:-8px;top:50%;transform:translate(100%,-50%);width:110px;text-align:left} .gov-ctx{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--phrase);text-align:center;margin-bottom:16px} .checks{display:flex;flex-direction:column;gap:10px;max-width:520px;margin:0 auto 24px;text-align:left} .checks div{display:flex;gap:10px;color:var(--text-semi);font-size:15px} .checks div:before{content:"✓";color:var(--success);font-weight:700} .ed{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:28px;box-shadow:var(--card-shadow)} .ed.feat{border-color:var(--std-border);box-shadow:var(--std-glow)} .ed h3{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--text);margin:0 0 12px} .ed p{font-size:14.5px;color:var(--text-semi);line-height:1.55;margin:0 0 22px} .ed .btn{margin-top:auto;align-self:flex-start} .ctwrap{overflow-x:auto;border:1px solid var(--border);border-radius:14px} .ctable{width:100%;border-collapse:collapse;background:var(--surface);min-width:560px} .ctable th,.ctable td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--border);font-size:14.5px;color:var(--text-semi);vertical-align:top} .ctable thead th{font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:700} .ctable thead th .sub{text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted)} .ctable td.dim{color:var(--muted);font-weight:600;white-space:nowrap} .ctable .ks{color:var(--text);font-weight:600;background:var(--eyebrow-bg)} .ctable thead th.ks{color:var(--accent-2)} .ctable tbody tr:last-child td{border-bottom:none} .ks-inst{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:26px 28px;max-width:760px;margin:0 auto} .ks-inst h3{font-size:16px;font-weight:700;color:var(--text);margin:0 0 10px} .ks-inst p{font-size:14.5px;color:var(--text-semi);line-height:1.6;margin:0 0 12px} .ks-inst code{background:var(--code-bg);color:var(--code-text);padding:2px 7px;border-radius:5px;font-size:13px} .cs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .cs{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px;box-shadow:var(--card-shadow);color:inherit;transition:.18s} .cs:hover{transform:translateY(-3px);box-shadow:var(--pop-shadow);border-color:var(--border-strong)} .cs-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px} .cs-ind{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;background:var(--eyebrow-bg);color:var(--eyebrow-text);padding:4px 10px;border-radius:999px} .cs-reg{font-size:11px;font-weight:600;color:var(--muted);padding:4px 0} .cs h3{font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--text);margin:0 0 16px;line-height:1.3} .cs-go{margin-top:auto;font-size:14px;font-weight:600;color:var(--go)} .ev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .ev{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:var(--card-shadow)} .ev-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px} .ev-kind{font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--phrase)} .ev-date{font-size:12.5px;color:var(--muted);font-weight:600} .ev h3{font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--text);margin:0 0 10px;line-height:1.3} .ev-loc{font-size:14px;color:var(--text-semi);margin-bottom:18px} .ev-go{margin-top:auto;font-size:14px;font-weight:600;color:var(--go)} .ev-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;margin-bottom:16px;border:1px solid var(--border)} @media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:32px}.frow{grid-template-columns:1fr}} @media(max-width:900px){.rt-grid{grid-template-columns:1fr}} @media(max-width:900px){.rc-grid{grid-template-columns:1fr}} @media(max-width:900px){.grid-3{grid-template-columns:1fr}} @media(max-width:900px){.feat-grid{grid-template-columns:1fr}} @media(max-width:900px){.price-tiers{grid-template-columns:1fr}} @media(max-width:900px){.uc-grid{grid-template-columns:1fr}} @media(max-width:900px){.opt-grid{grid-template-columns:1fr}} @media(max-width:900px){.tiers{grid-template-columns:1fr}} @media(max-width:900px){.gov4{grid-template-columns:1fr}} @media(max-width:900px){.steps{grid-template-columns:1fr}.quad{aspect-ratio:1/1.1}} @media(max-width:900px){.cs-grid{grid-template-columns:1fr}} @media(max-width:900px){.ev-grid{grid-template-columns:1fr}} .ctable.wide{min-width:920px} .ctable .catrow td{background:var(--surface-2);font-weight:700;color:var(--phrase);text-transform:uppercase;font-size:11.5px;letter-spacing:.05em;padding-top:16px} .ctable .catrow td.ks{background:var(--eyebrow-bg);color:var(--accent-2)} .pm{display:flex;gap:9px;font-size:14px;line-height:1.45;color:var(--text-semi);margin-bottom:9px}.pm:last-child{margin-bottom:0}.pm.plus:before{content:"+";color:var(--success);font-weight:800;flex:none}.pm.minus:before{content:"\2013";color:var(--danger);font-weight:800;flex:none} .model{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:28px;box-shadow:var(--card-shadow)}.model.mp{border-color:var(--std-border);box-shadow:var(--std-glow)}.model h3{font-size:18px;font-weight:700;color:var(--text);margin:0 0 10px}.model .mdesc{font-size:14px;color:var(--text-semi);line-height:1.55;margin:0 0 18px;padding-bottom:16px;border-bottom:1px solid var(--border)} /* Blog posts (Eleventy) */ .blog-post{max-width:760px;margin:0 auto;padding-top:44px}.blog-post h1{font-size:37px;line-height:1.13;letter-spacing:-.015em;margin:0 0 14px}.post-meta{font-size:14px;color:var(--muted);margin-bottom:26px}.post-hero,.blog-post img{max-width:100%;height:auto;border-radius:12px;border:1px solid var(--border)}.post-hero{width:100%;margin:6px 0 26px}.blog-post img{margin:22px 0}.blog-post h2{margin-top:38px}.post-end{border:0;border-top:1px solid var(--border);margin:42px 0 26px} .blog-feat{display:flex;justify-content:space-between;align-items:center;gap:24px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px 30px;box-shadow:var(--card-shadow);transition:border-color .15s,transform .15s}.blog-feat:hover{border-color:var(--accent);transform:translateY(-2px)}.blog-feat h3{font-size:20px;margin:8px 0 6px;color:var(--text)}.blog-feat p{margin:0;color:var(--text-semi);font-size:14.5px;max-width:640px}.blog-feat .rc-go{white-space:nowrap;font-weight:600}@media(max-width:700px){.blog-feat{flex-direction:column;align-items:flex-start}} /* Case studies (Eleventy) */ .cs-hero .cs-logo{height:34px;width:auto;max-width:180px;object-fit:contain;object-position:left;margin-bottom:18px;display:block} .case-study-post{max-width:760px;margin:0 auto;padding-top:8px}.case-study-post h2{margin-top:38px}.case-study-post h3{margin-top:28px}.case-study-post img{margin:22px 0} .cs-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px 28px;margin:0 0 30px;box-shadow:var(--card-shadow)} .cs-stat{display:flex;flex-direction:column;gap:4px} .cs-stat-value{font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--phrase)} .cs-stat-label{font-size:13px;color:var(--text-semi);line-height:1.35} /* Events (Eleventy) */ .ev-hero .wrap{max-width:1100px} .ev-detail-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start} .ev-detail-date-row{display:flex;gap:14px;align-items:center;margin:22px 0;font-size:14px;color:var(--muted);font-weight:600} .ev-detail-date-row .ev-detail-date{color:var(--phrase)} .ev-detail-lead{font-size:18px;line-height:1.6;color:var(--text-semi);margin:0 0 24px} .ev-detail-cta{margin:0 0 8px} .event-post{max-width:none;margin:0;padding:0 0 12px}.event-post h2{margin-top:38px}.event-post h3{margin-top:28px}.event-post img{margin:22px 0;border-radius:12px} .event-back{display:inline-block;margin-top:8px;font-size:14px;font-weight:600;color:var(--go)} .ev-detail-right{position:sticky;top:96px} .ev-detail-image{width:100%;height:auto;border-radius:16px;border:1px solid var(--border);display:block;box-shadow:var(--card-shadow)} @media(max-width:900px){.ev-detail-grid{grid-template-columns:1fr}.ev-detail-right{position:static}} .tile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}@media(max-width:800px){.tile-grid{grid-template-columns:1fr}} .tile{position:relative;display:block;min-height:150px;border-radius:16px;border:1px solid var(--border);background:var(--surface);padding:24px 26px;overflow:hidden;transition:transform .15s,border-color .15s} .tile:hover{transform:translateY(-3px);border-color:var(--accent)} .tile.t-a{background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--accent) 16%,var(--surface)))}.tile.t-b{background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--accent-2) 16%,var(--surface)))}.tile.t-c{background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--brand) 14%,var(--surface)))}.tile.t-d{background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--brand-soft) 14%,var(--surface)))} .tile-arw{position:absolute;top:20px;right:22px;font-size:22px;color:var(--muted)} .tile-kick{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-2)} .tile h3{font-size:19px;margin:10px 0 6px;color:var(--text);max-width:80%}.tile p{margin:0;color:var(--text-semi);font-size:14px} .tile-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} label.tile{cursor:pointer} label.tile:has(.tile-input:checked){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset} label.tile:has(.tile-input:focus-visible){outline:2px solid var(--accent);outline-offset:2px} .res-controls{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px;align-items:center} .res-search{flex:1;min-width:220px;max-width:340px;font-family:inherit;font-size:14.5px;color:var(--text);background:var(--surface);border:1px solid var(--border-strong);border-radius:10px;padding:10px 14px}.res-search:focus{outline:none;border-color:var(--accent)} .rtabs{display:flex;gap:6px;flex-wrap:wrap} .rc-badge.blog{background:var(--accent-2);color:#0a0f1a} .res-empty{text-align:center;color:var(--muted);padding:40px 0} .rc p{font-size:13.5px;color:var(--text-semi);line-height:1.5;margin:6px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .sec-head .eyebrow{margin-bottom:14px} .cost-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:8px}@media(max-width:900px){.cost-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.cost-grid{grid-template-columns:1fr}} .cost-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px 14px;text-align:center}.cost-tier{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.cost-amt{display:block;font-size:26px;font-weight:800;color:var(--text);margin:8px 0 2px}.cost-card:nth-child(3) .cost-amt{color:var(--accent-2)}.cost-sub{display:block;font-size:12px;color:var(--muted)}.cost-det{display:block;font-size:12.5px;color:var(--text-semi);margin-top:8px} .split{display:grid;grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);gap:48px;align-items:start}@media(max-width:900px){.split{grid-template-columns:1fr;gap:28px}}.split-l .sec-head,.split-l h2{text-align:left}.split-l h2{text-align:left}.split-l .eyebrow{margin-bottom:14px}.split-l p{margin-bottom:16px}.split-l .callout{text-align:left;margin:6px 0 20px} .ind-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--border)}.ind-list li{display:flex;gap:12px;align-items:flex-start;padding:14px 6px;border-bottom:1px solid var(--border);font-size:14.5px;color:var(--text-semi)}.ind-list li:before{flex:none;margin-top:1px;font-weight:800;color:var(--accent)}.ind-list.warn li:before{content:"›"}.ind-list.arrow li:before{content:"→"} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}@media(max-width:960px){.grid-4{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.grid-4{grid-template-columns:1fr}} .cap-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:18px;margin-top:8px}.cap-group{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px 26px 22px;box-shadow:var(--card-shadow)}.cap-group h3{font-size:18px;font-weight:700;color:var(--text);margin:0 0 8px;line-height:1.3}.cap-lede{font-size:14px;color:var(--text-semi);line-height:1.55;margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--border)}.cap-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.cap-list li{position:relative;padding-left:22px;font-size:13.5px;color:var(--text-semi);line-height:1.45}.cap-list li:before{content:"";position:absolute;left:2px;top:7px;width:6px;height:6px;border-radius:2px;background:var(--accent)} .cap-theme{margin-top:34px}.cap-theme-label{display:block;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-2);margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--border)}.card h4{font-size:16px;margin:0 0 8px;color:var(--text)} .cap-otherwise{font-size:12.5px;color:var(--muted);margin:0 0 8px;font-weight:600} .soln-diagram{margin-top:14px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px}.soln-svg{width:100%;height:auto;display:block;font-family:inherit}.soln-svg .dbox rect,.soln-svg .dbox2 rect{fill:var(--bg);stroke:var(--border);stroke-width:1.5}.soln-svg .dband{fill:var(--surface-2,#141922);stroke:var(--accent);stroke-width:1.5}.soln-svg .dpill{fill:var(--bg);stroke:var(--border);stroke-width:1}.soln-svg .dt{fill:var(--text);font-size:16px;font-weight:700;text-anchor:middle}.soln-svg .dband-t{fill:var(--accent-2);font-size:15px;font-weight:700;text-anchor:middle}.soln-svg .ds{fill:var(--muted);font-size:12.5px;text-anchor:middle}.soln-svg .dpill-t{fill:var(--text-semi);font-size:12px;font-weight:600;text-anchor:middle}.soln-svg .dedge{fill:var(--muted);font-size:12px;text-anchor:middle;font-style:italic} .cap-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}@media(max-width:820px){.cap-grid{grid-template-columns:1fr}}.cap-card{display:flex;flex-direction:column}.cap-card h4{margin:0 0 6px}.cap-ui{margin-bottom:14px;border-radius:12px;overflow:hidden;line-height:0}.uifrag{width:100%;height:auto;display:block;font-family:inherit}.uf-win{fill:var(--surface-2);stroke:var(--border);stroke-width:1.5}.uf-dot{fill:var(--muted);opacity:.4}.uf-div{stroke:var(--border);stroke-width:1}.uf-t{fill:var(--muted);font-size:10px;font-weight:600}.uf-row{fill:var(--surface);stroke:var(--border);stroke-width:1}.uf-lbl{fill:var(--text);font-size:10.5px;font-weight:600}.uf-sub{fill:var(--muted);font-size:9.5px}.uf-ok{fill:var(--accent)}.uf-acc{fill:var(--accent);font-size:12px;font-weight:700}.uf-acc-soft{fill:var(--accent);opacity:.16}.uf-badge{fill:var(--eyebrow-bg);stroke:var(--eyebrow-border);stroke-width:1}.uf-badge-t{fill:var(--accent);font-size:8.5px;font-weight:700}.uf-btn{fill:none;stroke:var(--accent);stroke-width:1.2;stroke-dasharray:3 2}.uf-btn-t{fill:var(--accent);font-size:9.5px;font-weight:700}.uf-mono{fill:var(--text-semi);font-size:9.5px;font-family:ui-monospace,Menlo,monospace}.uf-chart-a{fill:var(--accent);opacity:.15}.uf-chart-l{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linejoin:round} .cap-rows{display:flex;flex-direction:column;gap:48px;margin-top:10px}.cap-row{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}.cap-row:nth-child(even) .cap-txt{order:2}.cap-row:nth-child(even) .cap-ui{order:1}.cap-row .cap-ui{margin:0;border-radius:12px;overflow:hidden;line-height:0}.cap-txt h3{font-size:21px;margin:0 0 8px;color:var(--text)}.cap-txt p{color:var(--text-semi);font-size:14.5px;line-height:1.6;margin:0}.cap-txt .cap-otherwise{margin:0 0 10px}@media(max-width:820px){.cap-row{grid-template-columns:1fr;gap:18px}.cap-row:nth-child(even) .cap-txt,.cap-row:nth-child(even) .cap-ui{order:0}} .poc-hero{padding-top:40px;padding-bottom:30px}.poc-hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:52px;align-items:center}@media(max-width:900px){.poc-hero-grid{grid-template-columns:1fr;gap:32px}}.poc-hero-copy h1{font-size:46px;line-height:1.05;margin:14px 0 18px}@media(max-width:600px){.poc-hero-copy h1{font-size:34px}}.poc-hero-copy .lead{max-width:none}.ls-svg{width:100%;height:auto;display:block}.ls-kick{fill:var(--muted);font-size:12px;font-weight:700;letter-spacing:.14em;font-family:inherit}.ls-sub{fill:var(--muted);font-size:10.5px;font-family:inherit}.ls-tile{fill:var(--surface);stroke:var(--border);stroke-width:1}.ls-dot{fill:var(--accent)}.ls-fn{stroke:var(--border);stroke-width:1}.ls-fnlabel{fill:var(--muted);font-size:10px;font-style:italic;font-family:inherit}.ls-box{fill:var(--surface-2);stroke:var(--accent);stroke-width:2}.ls-boxt{fill:var(--text);font-size:20px;font-weight:800;font-family:inherit}.ls-boxs{fill:var(--accent-2);font-size:11px;font-weight:600;font-family:inherit}.poc-stance{border-top:1px solid var(--border)}.poc-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:900px;margin-top:6px}@media(max-width:760px){.poc-cols{grid-template-columns:1fr;gap:18px}}.poc-cols p{color:var(--text-semi);font-size:15.5px;line-height:1.65;margin:0}.poc-strip{margin-top:30px;padding:14px 18px;border:1px solid var(--border);border-radius:10px;background:var(--surface);font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:var(--muted)}.poc-strip .ps-a{color:var(--text-semi);font-weight:700}.poc-strip .ps-b{color:var(--accent);font-weight:700}.poc-strip .ps-arrow{color:var(--accent);font-weight:700;padding:0 4px} .rt-sec{border-top:1px solid var(--border)}.rt-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.rt-chips span{padding:9px 18px;border:1px solid var(--border-strong,var(--border));border-radius:999px;background:var(--surface);color:var(--text);font-weight:600;font-size:14px} .hero-cmp{width:100%;height:auto;display:block;border-radius:14px;border:1px solid var(--border);cursor:zoom-in;box-shadow:var(--card-shadow,0 1px 3px rgba(0,0,0,.2))} .sec-copy{max-width:760px}.sec-copy p{font-size:16.5px;line-height:1.72;color:var(--text-semi);margin:0 0 18px}.sec-copy p:last-child{margin-bottom:0} .pullquote{margin-top:26px;font-size:22px;line-height:1.42;font-weight:600;color:var(--text);border-left:3px solid var(--accent);padding:4px 0 4px 22px;max-width:820px;font-style:italic}