/* Verunel "Načrt Signal" foundation: self-hosted fonts and --vx-* tokens (light on :root; dark
   for data-color-scheme sites and for standalone pages that follow the system or data-theme).
   packages/web-ui/build.ts prepends this file to public.css (public site) and portal-signal.css
   (customer portal), so both layers and design-system/public-components.html share one source. */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/newsreader-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/newsreader-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/atkinson-hyperlegible-next-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/atkinson-hyperlegible-next-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/atkinson-hyperlegible-next-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/atkinson-hyperlegible-next-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Atkinson Hyperlegible Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/atkinson-hyperlegible-mono-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/atkinson-hyperlegible-mono-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --vx-display:'Newsreader',Georgia,'Times New Roman',serif;
  --vx-sans:'Atkinson Hyperlegible Next','Segoe UI',Arial,sans-serif;
  --vx-mono:'Atkinson Hyperlegible Mono',ui-monospace,Menlo,Consolas,monospace;
  --vx-canvas:#FFFFFF;--vx-band:#F4F6F8;--vx-surface:#FFFFFF;--vx-surface-2:#F7F9FC;
  --vx-ink:#0B1B2E;--vx-muted:#4A5A6B;--vx-line:#E1E6EC;--vx-line-strong:#C3CDD8;
  --vx-blue:#1E4FA3;--vx-blue-2:#2F64C4;--vx-blue-hover:#183F84;--vx-blue-text:#1E4FA3;--vx-blue-tint:#EEF3FB;--vx-on-blue:#FFFFFF;
  --vx-signal:#3FC1DB;--vx-signal-text:#0B6F82;--vx-signal-ring:rgba(63,193,219,.22);--vx-proof:#1E4FA3;
  --vx-pass:#1F7A4D;--vx-pass-tint:#E6F2EB;--vx-warn:#8F5A00;--vx-warn-tint:#FBF0DC;--vx-crit:#B42318;--vx-crit-tint:#FBE9E7;
  --vx-plate:#0B1B2E;--vx-plate-2:#12253B;--vx-on-plate:#F4F6F8;--vx-on-plate-muted:#AFBCCB;--vx-on-plate-accent:#7FD6E8;
  --vx-stripe:linear-gradient(118deg,#183F84 0%,#1E4FA3 22%,#3767BC 44%,#3FC1DB 72%,#B7E8F2 100%);
  --vx-glow-a:rgba(138,169,223,.55);--vx-glow-b:rgba(63,193,219,.30);--vx-glow-c:rgba(30,79,163,.16);
  --vx-grid:rgba(30,79,163,.07);
  --vx-shadow:0 1px 2px rgba(11,27,46,.06),0 8px 24px -10px rgba(11,27,46,.16);
  --vx-shadow-lg:0 1px 2px rgba(11,27,46,.06),0 30px 60px -24px rgba(11,27,46,.32),0 12px 30px -18px rgba(30,79,163,.22);
  --vx-radius:10px;--vx-radius-lg:16px;
  --vx-chevron-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%231E4FA3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --vx-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html[data-color-scheme=dark],:root[data-theme=dark]:not([data-color-scheme]){
  --vx-canvas:#0B1B2E;--vx-band:#0F2238;--vx-surface:#12253B;--vx-surface-2:#162B44;
  --vx-ink:#F4F6F8;--vx-muted:#B2BFCD;--vx-line:#253A52;--vx-line-strong:#36506E;
  --vx-blue:#8AA9DF;--vx-blue-2:#A9C1EA;--vx-blue-hover:#B7CBEC;--vx-blue-text:#A9C1EA;--vx-blue-tint:#16304F;--vx-on-blue:#0B1B2E;
  --vx-signal-text:#7FD6E8;--vx-signal-ring:rgba(63,193,219,.28);--vx-proof:#3FC1DB;
  --vx-pass:#7FD4A4;--vx-pass-tint:#143A2A;--vx-warn:#F2C46B;--vx-warn-tint:#3A2E14;--vx-crit:#FF9C8F;--vx-crit-tint:#45201E;
  --vx-plate:#081626;--vx-plate-2:#12253B;
  --vx-stripe:linear-gradient(118deg,#133266 0%,#1E4FA3 28%,#2F64C4 52%,#0B6F82 78%,#3FC1DB 100%);
  --vx-glow-a:rgba(30,79,163,.55);--vx-glow-b:rgba(63,193,219,.20);--vx-glow-c:rgba(138,169,223,.14);
  --vx-grid:rgba(138,169,223,.07);
  --vx-shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -10px rgba(0,0,0,.5);
  --vx-shadow-lg:0 1px 2px rgba(0,0,0,.3),0 30px 60px -24px rgba(0,0,0,.65),0 12px 30px -18px rgba(63,193,219,.12);
  --vx-chevron-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%23A9C1EA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){:root:not([data-color-scheme]):not([data-theme=light]){
  --vx-canvas:#0B1B2E;--vx-band:#0F2238;--vx-surface:#12253B;--vx-surface-2:#162B44;
  --vx-ink:#F4F6F8;--vx-muted:#B2BFCD;--vx-line:#253A52;--vx-line-strong:#36506E;
  --vx-blue:#8AA9DF;--vx-blue-2:#A9C1EA;--vx-blue-hover:#B7CBEC;--vx-blue-text:#A9C1EA;--vx-blue-tint:#16304F;--vx-on-blue:#0B1B2E;
  --vx-signal-text:#7FD6E8;--vx-signal-ring:rgba(63,193,219,.28);--vx-proof:#3FC1DB;
  --vx-pass:#7FD4A4;--vx-pass-tint:#143A2A;--vx-warn:#F2C46B;--vx-warn-tint:#3A2E14;--vx-crit:#FF9C8F;--vx-crit-tint:#45201E;
  --vx-plate:#081626;--vx-plate-2:#12253B;
  --vx-stripe:linear-gradient(118deg,#133266 0%,#1E4FA3 28%,#2F64C4 52%,#0B6F82 78%,#3FC1DB 100%);
  --vx-glow-a:rgba(30,79,163,.55);--vx-glow-b:rgba(63,193,219,.20);--vx-glow-c:rgba(138,169,223,.14);
  --vx-grid:rgba(138,169,223,.07);
  --vx-shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -10px rgba(0,0,0,.5);
  --vx-shadow-lg:0 1px 2px rgba(0,0,0,.3),0 30px 60px -24px rgba(0,0,0,.65),0 12px 30px -18px rgba(63,193,219,.12);
  --vx-chevron-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%23A9C1EA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme:dark;
}}
/* Verunel public layer "Načrt Signal" (ALE-14). Public pages only; loads after nacrt.css.
   Components with header and footer; the build prepends signal-tokens.css (fonts and tokens), so
   design-system/public-components.html renders exactly what the site renders. Layout concept:
   short claim on the left, a real report excerpt in a product window on the right, light canvas,
   one skewed Blueprint-to-Signal stripe behind the hero window and an Ink band for the demo.
   Component selectors start with `.vx` so they outrank the legacy nc-/site.css rules; components
   adapt to their container (container queries), not only to the viewport. */
/* Base. Section wrappers, page bodies, windows, header and footer are size containers, so every
   component adapts to the width it is placed in (page, catalog column or phone frame). */
.vx{background:var(--vx-canvas);color:var(--vx-ink);font:400 17px/1.6 var(--vx-sans)}
.vx p,.vx li,.vx dd{color:inherit}
.vx :focus-visible{outline:2px solid var(--vx-blue);outline-offset:3px}
.vx .vx-muted{color:var(--vx-muted)}
.vx .vx-mono{font-family:var(--vx-mono)}
.vx .nc-icon{display:inline-block;width:1em;height:1em;flex:none;vertical-align:-.125em}
.vx .vx-section,.vx .vx-page-body,.vx .vx-hero-wrap,.vx .vx-cta-wrap,.vx .vx-plans-section,.vx .vx-window,.vx .vx-header-bar,.vx .vx-footer-bar{container-type:inline-size}
.vx .vx-section{padding-block:clamp(64px,8vw,112px)}
.vx .vx-section--tight{padding-block:clamp(40px,5vw,64px)}
.vx .vx-band{background:var(--vx-band)}
.vx .vx-rule{border-top:1px solid var(--vx-line)}

/* Type */
.vx .vx-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0;font:500 12px/1.4 var(--vx-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--vx-blue-text)}
.vx .vx-eyebrow::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--vx-signal);box-shadow:0 0 0 4px var(--vx-signal-ring)}
.vx h1.vx-display{margin:0;font:500 clamp(40px,5.6vw,76px)/1.02 var(--vx-display);letter-spacing:-.035em;color:var(--vx-ink);text-wrap:balance}
.vx h1.vx-display--page{font-size:clamp(36px,4.6vw,62px)}
.vx h2.vx-title{margin:0;font:500 clamp(32px,3.8vw,52px)/1.06 var(--vx-display);letter-spacing:-.03em;color:var(--vx-ink);text-wrap:balance}
.vx h2.vx-title--sm{font-size:clamp(26px,2.6vw,34px)}
.vx .vx-accent{color:var(--vx-blue-text);background:linear-gradient(100deg,var(--vx-blue-text) 10%,var(--vx-signal-text) 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.vx .vx-lead{margin:0;max-width:36em;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--vx-muted)}
.vx .vx-head{display:grid;gap:18px;max-width:780px;margin-bottom:clamp(36px,5vw,56px)}
.vx .vx-head .vx-head{margin-bottom:0}
.vx .vx-head--split{max-width:none;align-items:end;gap:20px 8%}
.vx .vx-head--center{margin-inline:auto;justify-items:center;text-align:center}
.vx .vx-head--center .vx-lead{margin-inline:auto}
@media (forced-colors:active){.vx .vx-accent{-webkit-text-fill-color:currentColor;background:none}}

/* Actions. `.vx.vx` outranks the legacy dark-theme rule that resets link and heading colours. */
.vx .vx-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.vx.vx .vx-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 20px;border:1px solid var(--vx-blue);border-radius:var(--vx-radius);background:linear-gradient(135deg,var(--vx-blue),var(--vx-blue-2));color:var(--vx-on-blue);font:700 16px/1.2 var(--vx-sans);text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 20px -10px rgba(30,79,163,.75);transition:box-shadow .2s,transform .2s,background-color .15s}
.vx.vx .vx-btn:hover{background:var(--vx-blue-hover);border-color:var(--vx-blue-hover);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 28px -10px rgba(30,79,163,.85)}
.vx.vx .vx-btn--ghost{background:var(--vx-surface);color:var(--vx-ink);border-color:var(--vx-line-strong);box-shadow:var(--vx-shadow)}
.vx.vx .vx-btn--ghost:hover{background:var(--vx-blue-tint);border-color:var(--vx-blue)}
.vx.vx .vx-btn--small{min-height:40px;padding:8px 14px;font-size:15px}
.vx .vx-btn .nc-icon,.vx .vx-link .nc-icon{transition:transform .18s}
.vx .vx-btn:hover .nc-icon,.vx .vx-link:hover .nc-icon{transform:translateX(3px)}
.vx.vx .vx-link{display:inline-flex;align-items:center;gap:8px;color:var(--vx-blue-text);font-weight:700;text-decoration:none}
.vx .vx-link span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)}
.vx .vx-link:hover span{text-decoration-color:currentColor}

/* Product window: every product display sits in one */
.vx .vx-window{position:relative;min-width:0;color:var(--vx-ink);background:var(--vx-surface);border:1px solid var(--vx-line);border-radius:var(--vx-radius-lg);box-shadow:var(--vx-shadow-lg);overflow:hidden}
.vx .vx-window-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--vx-line);background:var(--vx-surface-2)}
.vx .vx-window-dots{display:flex;gap:6px}.vx .vx-window-dots i{width:9px;height:9px;border-radius:50%;background:var(--vx-line-strong)}
.vx .vx-window-url{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:4px 10px;border:1px solid var(--vx-line);border-radius:7px;background:var(--vx-canvas);font:12px/1.5 var(--vx-mono);color:var(--vx-muted)}
.vx .vx-window-body{padding:clamp(16px,4cqi,28px)}
.vx .vx-caption{display:flex;align-items:center;gap:8px;margin:14px 0 0;font:500 12px/1.5 var(--vx-mono);letter-spacing:.02em;color:var(--vx-muted)}
.vx .vx-caption::before{content:"";flex:none;width:14px;height:1px;background:currentColor}

/* Glow and drafting grid behind product displays */
.vx .vx-glow{position:relative;isolation:isolate}
.vx .vx-glow::before{content:"";position:absolute;z-index:-1;inset:-12% -8% -16% -8%;background:radial-gradient(42% 46% at 68% 30%,var(--vx-glow-a),transparent 72%),radial-gradient(34% 40% at 92% 72%,var(--vx-glow-b),transparent 72%),radial-gradient(36% 38% at 40% 88%,var(--vx-glow-c),transparent 72%);filter:blur(8px);pointer-events:none}
.vx .vx-grid-bg{position:relative;isolation:isolate}
.vx .vx-grid-bg::after{content:"";position:absolute;z-index:-2;inset:0 calc(50% - 50vw);background-image:linear-gradient(var(--vx-grid) 1px,transparent 1px),linear-gradient(90deg,var(--vx-grid) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%);pointer-events:none}

/* Chips and status */
.vx .vx-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border:1px solid var(--vx-line);border-radius:999px;background:var(--vx-surface-2);font:500 12px/1.5 var(--vx-sans);color:var(--vx-ink);white-space:nowrap}
.vx .vx-chip--pass{border-color:transparent;background:var(--vx-pass-tint);color:var(--vx-pass)}
.vx .vx-chip--warn{border-color:transparent;background:var(--vx-warn-tint);color:var(--vx-warn)}
.vx .vx-chip--crit{border-color:transparent;background:var(--vx-crit-tint);color:var(--vx-crit)}
.vx .vx-chip--info{border-color:transparent;background:var(--vx-blue-tint);color:var(--vx-blue-text)}
.vx .vx-chip--label{border-style:dashed;font-family:var(--vx-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--vx-muted);background:transparent}
.vx .vx-status{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;font:700 12px/1 var(--vx-sans)}
.vx .vx-status .nc-icon{width:12px;height:12px;stroke-width:2.2}
.vx .vx-status--pass{background:var(--vx-pass-tint);color:var(--vx-pass)}
.vx .vx-status--warn{background:var(--vx-warn-tint);color:var(--vx-warn)}
.vx .vx-status--crit{background:var(--vx-crit-tint);color:var(--vx-crit)}

/* Score ring (pathLength 100) */
.vx .vx-score{display:grid;place-items:center;flex:none;width:112px;height:112px;position:relative}
.vx .vx-score svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.vx .vx-score circle{fill:none;stroke-width:9}
.vx .vx-score .vx-score-track{stroke:var(--vx-line)}
.vx .vx-score .vx-score-value{stroke:var(--vx-warn);stroke-linecap:round}
.vx .vx-score--good .vx-score-value{stroke:var(--vx-pass)}
.vx .vx-score strong{font:500 38px/1 var(--vx-display);letter-spacing:-.02em;color:var(--vx-ink)}
.vx .vx-score small{display:block;margin-top:2px;font:12px/1 var(--vx-mono);color:var(--vx-muted);text-align:center}
.vx .vx-score>span{position:relative;text-align:center}

/* Report excerpt: narrow first, wider layouts by the window's own width */
.vx .vx-report-top{display:grid;gap:16px;justify-items:start;margin-bottom:22px}
.vx .vx-report-split{display:grid;gap:22px}
.vx .vx-mini-title{margin:0 0 10px;font:500 11px/1.4 var(--vx-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--vx-muted)}
.vx .vx-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;width:100%;margin:0;border:1px solid var(--vx-line);border-radius:var(--vx-radius);overflow:hidden;background:var(--vx-line)}
.vx .vx-kpis>div{min-width:0;padding:10px 12px;background:var(--vx-surface)}
.vx .vx-kpis dt{font:500 11px/1.4 var(--vx-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--vx-muted);overflow:hidden;text-overflow:ellipsis}
.vx .vx-kpis dd{margin:4px 0 0;font:500 22px/1.1 var(--vx-display);font-variant-numeric:tabular-nums;color:var(--vx-ink)}
.vx .vx-bars{list-style:none;margin:0;padding:0;display:grid;gap:14px 28px}
.vx .vx-bars li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:6px 12px;font-size:14px;line-height:1.3}
.vx .vx-bar{grid-column:1/-1;position:relative;height:7px;border-radius:99px;background:var(--vx-line)}
.vx .vx-bar i{position:absolute;inset:0 auto 0 0;width:calc(var(--v) * 1%);border-radius:inherit;background:linear-gradient(90deg,var(--vx-warn),color-mix(in srgb,var(--vx-warn) 70%,var(--vx-signal)));transform-origin:left;animation:vx-grow .9s cubic-bezier(.2,.7,.2,1) both}
.vx .vx-bar--good i{background:var(--vx-pass)}
.vx .vx-bars b{grid-row:1;grid-column:2;font:700 14px/1 var(--vx-sans);font-variant-numeric:tabular-nums;text-align:right}
.vx .vx-priorities{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.vx .vx-priorities li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 12px;padding:10px 12px;border:1px solid var(--vx-line);border-radius:var(--vx-radius);background:var(--vx-surface)}
.vx .vx-priorities strong{font-weight:700;font-size:15px;line-height:1.35}
.vx .vx-priorities small{grid-column:2;font:12px/1.4 var(--vx-mono);color:var(--vx-muted)}
.vx .vx-when{justify-self:start;padding:2px 9px;border-radius:999px;font:500 11px/1.6 var(--vx-mono);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.vx .vx-when--now{background:var(--vx-blue);color:var(--vx-on-blue)}
.vx .vx-when--next{background:var(--vx-blue-tint);color:var(--vx-blue-text)}
.vx .vx-when--later{background:var(--vx-surface-2);color:var(--vx-muted);box-shadow:inset 0 0 0 1px var(--vx-line)}
@container (min-width:420px){.vx .vx-report-top{grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center}}
@container (min-width:520px){.vx .vx-bars{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:620px){.vx .vx-priorities li{grid-template-columns:76px minmax(0,1fr) auto}.vx .vx-priorities small{grid-column:auto;text-align:right}}
@keyframes vx-grow{from{transform:scaleX(.35)}to{transform:scaleX(1)}}

/* Small panel over a window (what already works) */
.vx .vx-float{position:relative;z-index:2;width:auto;margin:-10px 14px 0;padding:16px 18px;border:1px solid var(--vx-line);border-radius:var(--vx-radius-lg);background:var(--vx-surface);box-shadow:var(--vx-shadow-lg)}
.vx .vx-float-title{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-weight:700;font-size:15px}
.vx .vx-checklist{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px;line-height:1.35}
.vx .vx-checklist li{display:flex;align-items:center;gap:10px}
.vx .vx-checklist b{margin-left:auto;font-variant-numeric:tabular-nums}

/* Hero: stacked by default; two columns once the hero container is wide enough. A skewed
   Blueprint-to-Signal stripe sits behind the product window (the page's one bold gesture). */
.vx .vx-hero-wrap{position:relative;isolation:isolate;overflow-x:clip}
.vx .vx-hero{display:grid;gap:clamp(36px,6cqi,88px);align-items:center;padding-block:clamp(40px,7cqi,104px) clamp(56px,9cqi,128px)}
.vx .vx-hero-copy{display:grid;gap:24px;align-content:start;max-width:40rem}
.vx .vx-hero h1.vx-display{font-size:clamp(36px,8.4cqi,60px);max-width:13em}
.vx .vx-hero-stage{position:relative;isolation:isolate;min-width:0}
.vx .vx-hero-stage::before{content:"";position:absolute;z-index:-1;inset:18% -40vw -10% -14%;background:var(--vx-stripe);border-radius:28px 0 0 28px;transform:skewY(-6deg);transform-origin:left top;box-shadow:0 40px 80px -30px rgba(30,79,163,.45)}
.vx .vx-hero-stage .vx-caption{width:fit-content;margin:16px 0 0 auto;padding:4px 12px;border-radius:999px;background:rgba(8,22,38,.62);color:#F4F6F8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vx .vx-hero-stage .vx-caption::before{background:#7FD6E8}
.vx .vx-hero .vx-window::after{content:"";position:absolute;inset:0 0 auto;z-index:3;height:46%;background:linear-gradient(180deg,transparent,rgba(63,193,219,.10) 70%,rgba(63,193,219,.42) 98%,transparent);transform:translateY(-110%);animation:vx-scan 2.6s cubic-bezier(.45,0,.2,1) .4s 1 both;pointer-events:none}
.vx .vx-hero .vx-eyebrow::before{animation:vx-pulse 2.2s ease-out 3}
@keyframes vx-scan{from{transform:translateY(-110%)}to{transform:translateY(240%);opacity:0}}
@keyframes vx-pulse{0%{box-shadow:0 0 0 0 rgba(63,193,219,.55)}80%,100%{box-shadow:0 0 0 10px rgba(63,193,219,0)}}
@container (min-width:1000px){
  .vx .vx-hero{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}
  .vx .vx-hero h1.vx-display{font-size:clamp(46px,4.9cqi,76px)}
  .vx .vx-hero-stage{padding-bottom:72px}
  .vx .vx-hero-stage::before{inset:-6% -40vw 4% 10%}
  .vx .vx-float{position:absolute;left:-34px;bottom:0;width:min(300px,62%);margin:0}
}

/* Tool strip: tools the scanner really uses */
.vx .vx-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 26px;padding-block:28px;border-block:1px solid var(--vx-line)}
.vx .vx-tools p{margin:0;font:500 12px/1.4 var(--vx-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--vx-muted)}
.vx .vx-tools ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.vx .vx-tools li{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid var(--vx-line);border-radius:999px;background:var(--vx-surface);font:500 14px/1.2 var(--vx-mono);color:var(--vx-ink)}
.vx .vx-tools li::before{content:"";width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--vx-blue),var(--vx-signal))}

/* Journey: four stages from domain to priorities */
.vx .vx-journey{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:20px;counter-reset:vx-stage}
.vx .vx-journey>li{display:grid;grid-template-rows:auto 1fr;gap:16px;min-width:0}
.vx .vx-journey-copy{display:grid;gap:6px}
.vx .vx-journey-copy h3{display:grid;justify-items:start;gap:12px;margin:0;font:700 18px/1.3 var(--vx-sans);color:var(--vx-ink)}
.vx .vx-journey-copy h3::before{counter-increment:vx-stage;content:counter(vx-stage);position:relative;z-index:1;display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,var(--vx-blue),var(--vx-blue-2));color:var(--vx-on-blue);font:500 13px/1 var(--vx-mono);box-shadow:0 0 0 4px var(--vx-canvas),0 6px 14px -6px rgba(30,79,163,.7)}
.vx .vx-journey-copy p{margin:0;font-size:15px;color:var(--vx-muted)}
.vx .vx-journey .vx-window{align-self:stretch;box-shadow:var(--vx-shadow)}
.vx .vx-journey .vx-window-body{padding:16px;display:grid;gap:10px;align-content:start;font-size:14px}
@container (min-width:560px){.vx .vx-journey{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:1000px){.vx .vx-journey{grid-template-columns:repeat(4,minmax(0,1fr))}.vx .vx-journey::before{content:"";position:absolute;z-index:0;top:14px;left:14px;right:14px;height:2px;background:repeating-linear-gradient(90deg,var(--vx-blue) 0 8px,transparent 8px 14px);opacity:.45}}

/* Mock UI parts used inside windows (illustrations of the real portal) */
.vx .vx-ui-label{font:500 11px/1.4 var(--vx-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--vx-muted)}
.vx .vx-ui-input{display:block;padding:9px 11px;border:1px solid var(--vx-line-strong);border-radius:8px;background:var(--vx-canvas);font:13px/1.4 var(--vx-mono);color:var(--vx-ink)}
.vx .vx-ui-button{justify-self:start;padding:7px 12px;border-radius:8px;background:var(--vx-blue);color:var(--vx-on-blue);font:700 13px/1.3 var(--vx-sans)}
.vx .vx-ui-rows{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.vx .vx-ui-rows li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border:1px solid var(--vx-line);border-radius:8px;background:var(--vx-canvas);font:13px/1.4 var(--vx-mono)}
.vx .vx-ui-rows li .nc-icon{color:var(--vx-muted)}
.vx .vx-ui-rows .vx-chip{font-size:11px;padding:1px 8px}
.vx .vx-ui-add{display:inline-flex;align-items:center;gap:6px;color:var(--vx-blue-text);font-weight:700;font-size:13px}
.vx .vx-mail{display:grid;gap:4px;padding:12px;border:1px solid var(--vx-line);border-radius:10px;background:var(--vx-canvas)}
.vx .vx-mail b{font-size:14px}.vx .vx-mail span{font-size:13px;color:var(--vx-muted)}
.vx .vx-ui-stack{display:grid;gap:10px}
.vx .vx-ui-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.vx .vx-ui-text{margin:0;font-size:14px}
.vx .vx-panes{display:grid;gap:12px}
.vx .vx-pane{display:grid;gap:8px;align-content:start;min-width:0;padding:14px;border:1px solid var(--vx-line);border-radius:var(--vx-radius);background:var(--vx-canvas);font-size:14px}
.vx .vx-pane--dev{background:var(--vx-surface-2)}
.vx .vx-pane b{font-size:15px;line-height:1.3}
.vx .vx-pane code{font:12px/1.4 var(--vx-mono);color:var(--vx-blue-text);overflow-wrap:anywhere}
.vx .vx-pane small,.vx .vx-ui-meta{font-size:12px;color:var(--vx-muted)}
.vx .vx-finding-mini{display:grid;gap:4px;padding-left:12px;border-left:3px solid var(--vx-blue);font-size:14px}
@container (min-width:460px){.vx .vx-panes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vx .vx-page-body{padding-bottom:clamp(56px,7vw,96px)}
.vx .vx-narrow{max-width:920px}

/* Lens demo: one finding, two views, on an Ink band */
.vx .vx-lens{display:grid;gap:clamp(32px,5cqi,72px);align-items:center}
.vx .vx-lens-tabs{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--vx-line);border-radius:12px;background:var(--vx-surface-2)}
.vx.vx .vx-lens-tabs a{padding:8px 14px;border-radius:9px;color:var(--vx-muted);font-weight:700;font-size:15px;text-decoration:none}
.vx .vx-lens-tabs a[aria-selected=true]{background:var(--vx-surface);color:var(--vx-ink);box-shadow:var(--vx-shadow)}
.vx .vx-lens-body{display:grid;gap:20px}
.vx .vx-lens-panel{display:grid;gap:16px}
.vx .vx-finding-title{margin:0;font:500 26px/1.15 var(--vx-display);letter-spacing:-.02em;color:var(--vx-ink)}
.vx .vx-facts{display:grid;gap:12px;margin:0}
.vx .vx-facts>div{display:grid;gap:4px;padding-top:12px;border-top:1px solid var(--vx-line)}
.vx .vx-facts dt{font:500 11px/1.6 var(--vx-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--vx-muted)}
.vx .vx-facts dd{margin:0;font-size:15px;line-height:1.5}
.vx .vx-facts code{font:13px/1.5 var(--vx-mono);color:var(--vx-blue-text)}
@container (min-width:520px){.vx .vx-facts>div{grid-template-columns:150px minmax(0,1fr);gap:14px}}
@container (min-width:960px){.vx .vx-lens{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}}
.vx .vx-meter{display:grid;gap:8px}
.vx .vx-meter-track{position:relative;height:10px;border-radius:99px;background:linear-gradient(90deg,var(--vx-pass-tint) 0 var(--t),var(--vx-warn-tint) var(--t) 100%)}
.vx .vx-meter-track i{position:absolute;top:-3px;left:calc(var(--v) - 8px);width:16px;height:16px;border:3px solid var(--vx-surface);border-radius:50%;background:var(--vx-warn);box-shadow:var(--vx-shadow)}
.vx .vx-meter-track b{position:absolute;top:-6px;bottom:-6px;left:var(--t);width:2px;background:var(--vx-pass)}
.vx .vx-meter-legend{display:flex;justify-content:space-between;gap:12px;font:12px/1.4 var(--vx-mono);color:var(--vx-muted)}
.vx .vx-section--ink{position:relative;isolation:isolate;overflow:hidden;background:var(--vx-plate);color:var(--vx-on-plate)}
.vx .vx-section--ink::before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(40% 60% at 85% 40%,rgba(30,79,163,.55),transparent 70%),radial-gradient(30% 40% at 70% 90%,rgba(63,193,219,.22),transparent 70%),linear-gradient(rgba(138,169,223,.07) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(138,169,223,.07) 1px,transparent 1px) 0 0/48px 48px}
.vx .vx-section--ink .vx-eyebrow{color:var(--vx-on-plate-accent)}
.vx .vx-section--ink h2.vx-title{color:var(--vx-on-plate)}
.vx .vx-section--ink .vx-lead,.vx .vx-section--ink .vx-caption{color:var(--vx-on-plate-muted)}
.vx .vx-section--ink :focus-visible{outline-color:var(--vx-signal)}

/* Bento grid of checked areas */
.vx .vx-bento{display:grid;gap:18px}
.vx .vx-tile{display:grid;grid-template-rows:auto auto 1fr;gap:12px;min-width:0;padding:24px;border:1px solid transparent;border-radius:var(--vx-radius-lg);background:linear-gradient(var(--vx-surface),var(--vx-surface)) padding-box,linear-gradient(135deg,var(--vx-line),var(--vx-line)) border-box;box-shadow:var(--vx-shadow);transition:transform .2s,box-shadow .2s}
.vx .vx-tile:hover{transform:translateY(-2px);background:linear-gradient(var(--vx-surface),var(--vx-surface)) padding-box,linear-gradient(135deg,var(--vx-blue),var(--vx-signal)) border-box;box-shadow:var(--vx-shadow-lg)}
.vx .vx-tile-head{display:flex;align-items:center;gap:12px}
.vx .vx-tile-icon{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,var(--vx-blue),var(--vx-signal-text));color:var(--vx-on-blue);box-shadow:0 8px 18px -10px rgba(30,79,163,.8)}
.vx .vx-tile-icon .nc-icon{width:22px;height:22px}
.vx .vx-tile h3{margin:0;font:700 19px/1.25 var(--vx-sans);color:var(--vx-ink)}
.vx .vx-tile>p{margin:0;font-size:15px;line-height:1.55;color:var(--vx-muted)}
.vx .vx-tile-demo{align-self:end;display:grid;gap:7px;padding:12px;border-radius:var(--vx-radius);background:var(--vx-surface-2);border:1px solid var(--vx-line);font-size:13px}
.vx .vx-tile-demo .vx-row{display:flex;align-items:center;gap:10px;min-width:0}
.vx .vx-tile-demo .vx-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vx .vx-tile-demo code{font:12px/1.4 var(--vx-mono)}
.vx .vx-tile-demo .vx-row>.vx-chip{margin-left:auto}
@container (min-width:560px){.vx .vx-bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:960px){.vx .vx-bento{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.vx .vx-tile,.vx .vx-tile:hover{transform:none;transition:none}}

/* Two report views */
.vx .vx-views{display:grid;gap:18px}
.vx .vx-view{display:grid;gap:10px;align-content:start;padding:26px;border:1px solid var(--vx-line);border-radius:var(--vx-radius-lg);background:var(--vx-surface)}
.vx .vx-view h3{margin:0;font:700 20px/1.25 var(--vx-sans)}
.vx .vx-view p{margin:0;color:var(--vx-muted);font-size:16px}
.vx .vx-view ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px;font-size:15px}
.vx .vx-view li{display:flex;gap:10px;align-items:flex-start}
.vx .vx-view li .nc-icon{margin-top:.25em;color:var(--vx-pass)}
.vx .vx-shared{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:18px 22px;border-radius:var(--vx-radius-lg);background:var(--vx-blue-tint)}
.vx .vx-shared p{margin:0;font-size:15px}
.vx .vx-shared ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
@container (min-width:600px){.vx .vx-views{grid-template-columns:repeat(2,minmax(0,1fr))}.vx .vx-shared{grid-column:1/-1}}

/* Cards (teams, articles, prose blocks) */
.vx .vx-cards,.vx .vx-cards--2{display:grid;gap:18px}
.vx .vx-card{display:flex;flex-direction:column;gap:12px;min-width:0;padding:26px;border:1px solid var(--vx-line);border-radius:var(--vx-radius-lg);background:var(--vx-surface)}
.vx .vx-card h3{margin:0;font:700 20px/1.3 var(--vx-sans);color:var(--vx-ink)}
.vx .vx-card>p{margin:0;font-size:16px;color:var(--vx-muted)}
.vx .vx-card h2.vx-card-title{margin:0;font:700 20px/1.3 var(--vx-sans);letter-spacing:0;color:var(--vx-ink)}
.vx .vx-card ul{margin:0;padding-left:20px;list-style:disc;display:grid;gap:8px;font-size:15px;color:var(--vx-muted)}
.vx .vx-card .vx-link{margin-top:auto;align-self:flex-start}
.vx .vx-card-foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:auto;padding:12px 14px;border-radius:var(--vx-radius);background:var(--vx-surface-2);font-size:14px;color:var(--vx-muted)}
.vx.vx .vx-card-foot strong{color:var(--vx-ink);font-size:16px}
.vx .vx-card-foot+.vx-link{margin-top:4px}
.vx .vx-card--article{padding:0;overflow:hidden}
.vx .vx-card--article img{display:block;width:100%;height:auto;aspect-ratio:5/3;object-fit:contain;background:var(--vx-band);border-bottom:1px solid var(--vx-line)}
.vx .vx-card--article>div{display:flex;flex:1;flex-direction:column;gap:12px;padding:22px 24px 24px}
.vx .vx-card--article h3 a{color:inherit;text-decoration:none}
.vx .vx-card--article h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.vx .vx-card--article p{margin:0;font-size:15px;color:var(--vx-muted)}
@container (min-width:600px){.vx .vx-cards,.vx .vx-cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:960px){.vx .vx-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Flow: findings -> agreed tasks -> follow-up review */
.vx .vx-flow{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.vx .vx-flow li{position:relative;display:grid;gap:8px;padding:22px;border:1px solid var(--vx-line);border-radius:var(--vx-radius-lg);background:var(--vx-surface)}
.vx .vx-flow li:not(:last-child)::after{content:"";position:absolute;z-index:1;left:50%;bottom:-21px;width:16px;height:16px;transform:translateX(-50%) rotate(90deg);background:var(--vx-blue);-webkit-mask:var(--vx-arrow) center/contain no-repeat;mask:var(--vx-arrow) center/contain no-repeat}
.vx .vx-flow h3{margin:0;font:700 18px/1.3 var(--vx-sans)}
.vx .vx-flow p{margin:0;font-size:15px;color:var(--vx-muted)}
@container (min-width:760px){.vx .vx-flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.vx .vx-flow li:not(:last-child)::after{left:auto;right:-17px;bottom:auto;top:50%;transform:translateY(-50%)}}

/* Testimonial (renders only with owner-approved data) */
.vx .vx-quotes{display:grid;gap:18px}
.vx .vx-quote{display:grid;gap:18px;margin:0;padding:28px;border:1px solid var(--vx-line);border-radius:var(--vx-radius-lg);background:var(--vx-surface)}
.vx .vx-quote blockquote{margin:0;font:500 clamp(20px,1.8vw,24px)/1.35 var(--vx-display);letter-spacing:-.01em;color:var(--vx-ink)}
.vx .vx-quote figcaption{display:grid;gap:2px;font-size:14px;color:var(--vx-muted)}
.vx.vx .vx-quote figcaption strong{color:var(--vx-ink)}
.vx .vx-draft{justify-self:start;padding:3px 10px;border:1px dashed var(--vx-warn);border-radius:999px;color:var(--vx-warn);font:500 11px/1.5 var(--vx-mono);letter-spacing:.05em;text-transform:uppercase}
@container (min-width:760px){.vx .vx-quotes{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Callout */
.vx .vx-note{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border:1px solid var(--vx-line);border-radius:var(--vx-radius-lg);background:var(--vx-surface-2)}
.vx .vx-note p{margin:0;font-size:15px}
.vx .vx-note--safety{border-color:transparent;background:var(--vx-warn-tint)}
.vx .vx-note--safety p{color:var(--vx-ink)}

/* Closing plate */
.vx .vx-cta{position:relative;isolation:isolate;overflow:hidden;display:grid;gap:32px;align-items:center;margin-block:clamp(48px,6vw,88px);padding:clamp(28px,5cqi,64px);border-radius:22px;background:var(--vx-plate);color:var(--vx-on-plate)}
.vx .vx-cta::before{content:"";position:absolute;z-index:-1;inset:-30% -10% -30% 35%;background:radial-gradient(40% 50% at 60% 50%,rgba(30,79,163,.75),transparent 70%),radial-gradient(30% 40% at 80% 30%,rgba(63,193,219,.35),transparent 70%);filter:blur(10px)}
.vx .vx-cta .vx-eyebrow{color:var(--vx-on-plate-accent)}
.vx .vx-cta h2.vx-title{color:var(--vx-on-plate)}
.vx .vx-cta p{margin:0;color:var(--vx-on-plate-muted);font-size:18px}
.vx .vx-cta-copy{display:grid;gap:18px}
.vx.vx .vx-cta .vx-btn{background:#F4F6F8;border-color:#F4F6F8;color:#0B1B2E;box-shadow:none}
.vx.vx .vx-cta .vx-btn:hover{background:#fff;border-color:#fff}
.vx.vx .vx-cta .vx-link{color:#F4F6F8}
.vx .vx-cta :focus-visible{outline-color:var(--vx-signal)}
.vx .vx-cta-mark{display:none;justify-self:end;width:min(240px,100%);aspect-ratio:1}
.vx .vx-cta-mark .verunel-mark{width:100%;height:100%}
.vx .vx-cta-mark .verunel-mark .verunel-mark-pieces :is(rect,path){fill:rgba(244,246,248,.10)}
.vx .vx-cta-mark .verunel-mark .verunel-mark-proof{fill:#3FC1DB}
@container (min-width:760px){.vx .vx-cta{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}.vx .vx-cta-mark{display:block}}

/* Page hero for subpages */
.vx .vx-page-hero{display:grid;gap:24px 64px;align-items:end;padding-block:clamp(52px,7vw,96px) clamp(40px,5vw,64px)}
.vx .vx-page-hero>div{display:grid;gap:22px}

/* Steps (how it works) */
.vx .vx-steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(20px,3vw,32px)}
.vx .vx-step{display:grid;gap:28px clamp(32px,6cqi,80px);align-items:center;padding:clamp(22px,3cqi,40px);border:1px solid var(--vx-line);border-radius:22px;background:var(--vx-surface)}
.vx .vx-step:nth-child(even){background:var(--vx-band)}
.vx .vx-step-copy{display:grid;gap:14px;max-width:34em}
.vx .vx-step-num{display:inline-grid;place-items:center;justify-self:start;min-width:36px;height:28px;padding:0 8px;border-radius:9px;background:linear-gradient(135deg,var(--vx-blue),var(--vx-blue-2));color:var(--vx-on-blue);font:500 13px/1 var(--vx-mono);letter-spacing:.04em}
.vx .vx-step h2{margin:0;font:500 clamp(26px,2.6vw,36px)/1.1 var(--vx-display);letter-spacing:-.02em;color:var(--vx-ink)}
.vx .vx-step-copy>p{margin:0;font-size:17px;color:var(--vx-muted)}
.vx .vx-step figure{margin:0;min-width:0}
@container (min-width:860px){.vx .vx-step{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}.vx .vx-head--split{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}

/* Plans */
.vx .vx-plans{display:grid;gap:18px;align-items:stretch;max-width:560px}
.vx .vx-plan{display:flex;flex-direction:column;gap:14px;padding:28px;border:1px solid var(--vx-line);border-radius:var(--vx-radius-lg);background:var(--vx-surface);scroll-margin-top:120px}
.vx .vx-plan--featured{border-color:transparent;background:linear-gradient(var(--vx-surface),var(--vx-surface)) padding-box,linear-gradient(135deg,var(--vx-blue),var(--vx-signal)) border-box;box-shadow:var(--vx-shadow-lg)}
.vx .vx-plan-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.vx .vx-plan h2.vx-plan-name{margin:0;font:500 32px/1 var(--vx-display);letter-spacing:-.02em;color:var(--vx-ink)}
.vx .vx-price{display:flex;align-items:baseline;gap:8px;margin:0}
.vx .vx-price strong{font:500 54px/1 var(--vx-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--vx-ink)}
.vx .vx-price span{font-size:15px;color:var(--vx-muted)}
.vx .vx-plan-tax{margin:-8px 0 0;font-size:13px;color:var(--vx-muted)}
.vx .vx-plan-claim{margin:0;font-size:16px}
.vx .vx-plan ul{list-style:none;margin:0;padding:0;display:grid;align-content:start;gap:10px;flex:1;font-size:15px}
.vx .vx-plan li{display:flex;gap:10px;align-items:flex-start}
.vx .vx-plan li .nc-icon{margin-top:.25em;color:var(--vx-blue-text)}
.vx .vx-plan .vx-btn{width:100%}
.vx .vx-included{display:grid;gap:12px 32px;align-items:center;margin-top:18px;padding:20px 24px;border-radius:var(--vx-radius-lg);background:var(--vx-band)}
.vx .vx-band .vx-included{background:var(--vx-surface);box-shadow:inset 0 0 0 1px var(--vx-line)}
.vx .vx-included h3{margin:0;font:700 17px/1.3 var(--vx-sans)}
.vx .vx-included ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:15px}
.vx .vx-included li{display:inline-flex;gap:8px;align-items:center}
.vx .vx-included .nc-icon{color:var(--vx-pass)}
.vx .vx-enterprise{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:18px;padding:24px 28px;border:1px solid var(--vx-line);border-radius:var(--vx-radius-lg)}
.vx .vx-enterprise h3{margin:4px 0 6px;font:500 26px/1.15 var(--vx-display);letter-spacing:-.02em}
.vx .vx-enterprise p{margin:0;font-size:15px;color:var(--vx-muted)}
.vx .vx-plan-note{margin:16px 0 0;font-size:14px;color:var(--vx-muted)}
@container (min-width:760px){.vx .vx-included{grid-template-columns:auto minmax(0,1fr)}}
@container (min-width:900px){.vx .vx-plans{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}}

/* FAQ disclosures keep their nc- hooks for the shared script */
.vx .nc-faq{margin:0;border-top:1px solid var(--vx-line)}
.vx .nc-faq-item{border-bottom:1px solid var(--vx-line)}
.vx.nc-site .nc-faq .nc-faq-q,.vx .nc-faq .nc-faq-q.nc-faq-q{margin:0;font:700 18px/1.35 var(--vx-sans);letter-spacing:0;color:var(--vx-ink)}
.vx .nc-faq-q button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:24px;margin:0;padding:22px 2px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.vx .nc-faq-q button::after{content:"";flex:none;width:32px;height:32px;border-radius:50%;background:var(--vx-blue-tint) var(--vx-chevron-img) center/16px no-repeat;-webkit-mask:none;mask:none;transition:transform .2s}
.vx .nc-faq-q button[aria-expanded=true]::after{transform:rotate(180deg)}
.vx .nc-faq-q button:hover{color:var(--vx-blue-text)}
.vx .nc-faq-a{max-width:70ch;padding:0 2px 24px}
.vx.nc-site .nc-faq-a p,.vx .nc-faq-a p{margin:0;font-size:16px;color:var(--vx-muted)}

/* Editorial prose (articles, methodology, FAQ intro, enterprise) */
.vx .vx-prose{max-width:760px}
.vx .vx-prose>h2{margin:48px 0 14px;font:500 30px/1.15 var(--vx-display);letter-spacing:-.02em;color:var(--vx-ink)}
.vx .vx-prose>p,.vx .vx-prose li{font-size:18px;line-height:1.7;color:var(--vx-ink)}
.vx .vx-prose>p{margin:0 0 18px}
.vx .vx-prose ul{margin:0 0 18px;padding-left:22px;list-style:disc}
.vx .vx-prose a:not([class]){color:var(--vx-blue-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.vx .vx-prose .nc-note{padding:14px 18px;border-left:3px solid var(--vx-blue);border-radius:0 var(--vx-radius) var(--vx-radius) 0;background:var(--vx-blue-tint);font-size:15px}
.vx .vx-prose figure{margin:0 0 36px}
.vx .vx-prose figure img{display:block;width:100%;height:auto;border:1px solid var(--vx-line);border-radius:var(--vx-radius-lg);background:var(--vx-band)}
.vx .vx-prose figcaption{margin-top:12px;font-size:14px;color:var(--vx-muted)}

/* Forms */
.vx .vx-form form{display:grid;gap:8px;max-width:640px;margin:0}
.vx .vx-form-panel form{max-width:none}
.vx .vx-form label{margin-top:12px;font-weight:700;font-size:15px}
.vx .vx-form :is(input,select,textarea){width:100%;max-width:100%;padding:12px 14px;border:1px solid var(--vx-line-strong);border-radius:var(--vx-radius);background:var(--vx-surface);color:var(--vx-ink);font:16px/1.4 var(--vx-sans)}
.vx .vx-form :is(input,select,textarea):focus-visible{border-color:var(--vx-blue);outline:3px solid var(--vx-signal-ring);outline-offset:0}
.vx .vx-form input[type=checkbox]{width:auto}
.vx .vx-form p{margin:4px 0 0;font-size:14px;color:var(--vx-muted)}
.vx .vx-form .cp-consent{display:flex;gap:12px;align-items:flex-start;font-weight:400}
.vx .vx-form .cp-consent input{margin-top:5px;flex:none}
.vx .vx-form button[type=submit]{justify-self:start;margin-top:18px}
.vx .vx-contact{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px clamp(40px,7vw,96px);align-items:start;padding-bottom:clamp(56px,7vw,96px)}
.vx .vx-contact-aside{display:grid;gap:16px;padding:26px;border-radius:var(--vx-radius-lg);background:var(--vx-band)}
.vx .vx-contact-aside p{margin:0;font-size:16px}
.vx.vx .vx-contact-aside a{color:var(--vx-blue-text);font-weight:700;overflow-wrap:anywhere}
.vx .vx-form-panel{padding:clamp(22px,3vw,32px);border:1px solid var(--vx-line);border-radius:var(--vx-radius-lg);background:var(--vx-surface);box-shadow:var(--vx-shadow)}

/* Header. Self-contained so the catalog renders it exactly; the bar is the sticky container and
   the header switches between full navigation and the menu by the bar's own width. */
.vx .vx-header-bar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--vx-canvas) 80%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--vx-line)}
.vx .marketing-header.vx-header{position:static;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:20px;width:min(1400px,calc(100% - 40px));height:72px;margin-inline:auto;padding:0;border:0;background:none}
.vx .vx-header .wordmark,.vx .vx-footer .wordmark{grid-column:1;grid-row:1;display:inline-flex;align-items:center;gap:10px;color:var(--vx-ink);font:700 22px/1 var(--vx-sans)!important;letter-spacing:-.02em;text-decoration:none}
.vx .vx-header .wordmark-mark,.vx .vx-footer .wordmark-mark{display:inline-grid;place-items:center;flex:none;width:30px!important;height:30px!important;background:none;border-radius:0}
.vx .vx-header .verunel-mark,.vx .vx-footer .verunel-mark{width:30px!important;height:30px!important}
.vx :is(.vx-header,.vx-footer) .verunel-mark .verunel-mark-pieces,.vx :is(.vx-header,.vx-footer) .verunel-mark .verunel-mark-pieces rect{fill:var(--vx-ink)}
.vx :is(.vx-header,.vx-footer) .verunel-mark .verunel-mark-proof{fill:var(--vx-proof)}
.vx .vx-header .marketing-nav{grid-column:2;grid-row:1;display:none;justify-content:center;gap:4px}
.vx.vx .vx-header .marketing-nav a{padding:8px 12px;border-radius:8px;color:var(--vx-ink);font:500 15px/1.2 var(--vx-sans)!important;text-decoration:none}
.vx .vx-header .marketing-nav a:hover{background:var(--vx-blue-tint)}
.vx.vx .vx-header .marketing-nav a[aria-current=page]{color:var(--vx-blue-text);background:var(--vx-blue-tint);font-weight:700!important}
.vx .vx-header .marketing-actions{grid-column:3;grid-row:1;display:none;align-items:center;gap:10px}
.vx.vx .vx-header .marketing-signin{display:inline-flex;align-items:center;padding:8px 10px;color:var(--vx-ink);font:700 15px/1.2 var(--vx-sans)!important;text-decoration:none}
.vx .vx-header .marketing-mobile-actions{grid-column:3;grid-row:1;display:flex;align-items:center;justify-self:end;gap:8px;margin:0}
.vx.vx .vx-header .marketing-mobile-sample{display:none;color:var(--vx-ink);font:700 14px/1.2 var(--vx-sans);text-decoration:underline;text-underline-offset:4px;border:0}
.vx .vx-header .marketing-mobile-menu{position:relative}
.vx.vx .vx-header .marketing-mobile-menu summary{display:inline-flex;align-items:center;min-width:0;padding:9px 14px;border:1px solid var(--vx-line);border-radius:10px;background:var(--vx-surface);color:var(--vx-ink);font:700 14px/1 var(--vx-sans);text-transform:none;letter-spacing:0;list-style:none;cursor:pointer}
.vx .vx-header .marketing-mobile-menu summary::-webkit-details-marker{display:none}
.vx .vx-header .marketing-mobile-menu[open] summary{border-color:var(--vx-blue);background:var(--vx-blue-tint)}
.vx.vx .vx-header .marketing-mobile-menu>div{position:absolute;z-index:90;top:calc(100% + 10px);right:0;left:auto;width:min(340px,calc(100vw - 32px));max-height:calc(100vh - 110px);overflow:auto;padding:10px;border:1px solid var(--vx-line);border-radius:14px;background:var(--vx-surface);box-shadow:var(--vx-shadow-lg)}
.vx .vx-header .marketing-mobile-menu nav{display:grid;gap:2px}
.vx.vx .vx-header .marketing-mobile-menu nav a{padding:11px 12px;border:0;border-radius:9px;color:var(--vx-ink);font:500 17px/1.3 var(--vx-sans);text-decoration:none}
.vx .vx-header .marketing-mobile-menu nav a:hover,.vx .vx-header .marketing-mobile-menu nav a[aria-current=page]{background:var(--vx-blue-tint)}
.vx.vx .vx-header .marketing-mobile-menu nav a:last-child{margin-top:8px;background:linear-gradient(135deg,var(--vx-blue),var(--vx-blue-2));color:var(--vx-on-blue);font-weight:700;text-align:center}
@container (min-width:640px){.vx.vx .vx-header .marketing-mobile-sample{display:inline}}
@container (min-width:900px){.vx .marketing-header.vx-header,.vx .marketing-footer.vx-footer{width:min(1400px,calc(100% - 64px))}}
@container (min-width:1080px){.vx .vx-header .marketing-nav,.vx .vx-header .marketing-actions{display:flex}.vx .vx-header .marketing-mobile-actions{display:none}}

/* Language and theme preferences (header and footer) */
.vx .preference-controls{display:inline-flex;align-items:center;gap:6px}
.vx .preference-control{position:relative;flex:none;width:auto;height:auto}
.vx.vx .preference-trigger{display:grid!important;place-items:center;width:38px!important;height:38px!important;min-width:0;padding:0!important;border:1px solid var(--vx-line)!important;border-radius:50%!important;background:var(--vx-surface)!important;color:var(--vx-ink)!important;cursor:pointer}
.vx.vx .preference-trigger:hover,.vx.vx .preference-trigger[aria-expanded=true]{border-color:var(--vx-blue)!important;background:var(--vx-blue-tint)!important}
.vx .preference-trigger svg{width:18px;height:18px}
.vx.vx .preference-control>.preference-popover{position:absolute;z-index:80;top:calc(100% + 8px);right:0;bottom:auto;left:auto;display:grid;gap:2px;width:auto;min-width:210px;padding:6px;border:1px solid var(--vx-line);border-radius:12px;background:var(--vx-surface);color:var(--vx-ink);box-shadow:var(--vx-shadow-lg)}
.vx.vx .preference-control>.preference-popover[hidden]{display:none}
.vx.vx .preference-popover :is(a,button){display:block!important;width:100%;padding:9px 12px!important;border:0!important;border-radius:8px!important;background:none!important;color:var(--vx-ink)!important;font:500 14px/1.3 var(--vx-sans)!important;text-align:left;text-decoration:none;cursor:pointer}
.vx.vx .preference-popover :is(a,button):hover,.vx.vx .preference-popover :is(a[aria-current=page],button[aria-checked=true]){background:var(--vx-blue-tint)!important;color:var(--vx-blue-text)!important}
.vx.vx .vx-footer .preference-control>.preference-popover{top:auto;bottom:calc(100% + 8px);left:0;right:auto}

/* Footer */
.vx .vx-footer-bar{border-top:1px solid var(--vx-line);background:var(--vx-canvas)}
.vx .marketing-footer.vx-footer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;width:min(1400px,calc(100% - 40px));margin-inline:auto;padding:48px 0 28px;border:0;background:none;color:var(--vx-ink);min-height:0;font-size:15px}
.vx .vx-footer>div:first-child{grid-column:1/-1}
.vx .vx-footer nav{display:grid!important;gap:10px;align-content:start;justify-content:start}
.vx .vx-footer h2{margin:0 0 4px;font:500 12px/1.4 var(--vx-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--vx-muted)}
.vx.vx .vx-footer nav a{color:var(--vx-ink);font-size:15px;text-decoration:none}
.vx.vx .vx-footer nav a:hover{color:var(--vx-blue-text);text-decoration:underline;text-underline-offset:4px}
.vx .vx-footer .nc-footer-tagline{display:block;margin:16px 0 0;max-width:22em;font-size:16px;color:var(--vx-muted)}
.vx .vx-footer .marketing-footer-meta{grid-column:1/-1;justify-self:stretch;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-top:24px;border-top:1px solid var(--vx-line);font-size:14px;color:var(--vx-muted);text-align:left}
.vx.vx .vx-footer .marketing-footer-meta a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@container (min-width:600px){.vx .marketing-footer.vx-footer{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container (min-width:900px){.vx .marketing-footer.vx-footer{grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr))}.vx .vx-footer>div:first-child{grid-column:auto}}

/* Viewport-level adjustments for page-wide wrappers that are not inside a container */
@media(max-width:900px){.vx .vx-page-hero,.vx .vx-contact{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.vx .nc-faq-q button::after{transition:none}.vx .vx-bar i,.vx .vx-hero .vx-window::after,.vx .vx-hero .vx-eyebrow::before{animation:none}.vx .vx-hero .vx-window::after{display:none}.vx .vx-btn .nc-icon,.vx .vx-link .nc-icon{transition:none}}