/* ══════════════════════════════════════════════════════════════════════════
   Vilkax · NEXUS — Business + Developers shared components (on top of nexus.css)
   ══════════════════════════════════════════════════════════════════════════ */

/* surface switcher in topbar */
.tb-surface{display:flex;align-items:center;gap:2px;padding:3px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--vx-line);margin-left:20px}
.tb-surface a{font-family:var(--vx-f-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--vx-text-dim);padding:6px 12px;border-radius:9px;transition:.16s}
.tb-surface a:hover{color:var(--vx-text)}
.tb-surface a.on{color:var(--hero-br);background:var(--hero-sf);box-shadow:inset 0 0 0 1px var(--hero-ln)}
@media (max-width:920px){.tb-surface{display:none}}
.surface-tag{font-family:var(--vx-f-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--vx-text-dim);
  padding:3px 8px;border-radius:6px;border:1px solid var(--vx-line);margin-left:2px}

/* pill row (allow / review / block) */
.pill-row{display:flex;gap:8px;flex-wrap:wrap}
.verdict-pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--vx-f-mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;padding:7px 13px;border-radius:20px;border:1px solid var(--vx-line)}
.verdict-pill .d{width:7px;height:7px;border-radius:50%}
.verdict-pill.allow{color:var(--vx-mint-br);border-color:var(--vx-mint-ln);background:var(--vx-mint-sf)}
.verdict-pill.allow .d{background:var(--vx-mint);box-shadow:0 0 8px var(--vx-mint)}
.verdict-pill.review{color:var(--vx-sev-elevated);border-color:var(--vx-sev-elevated-ln);background:var(--vx-sev-elevated-sf)}
.verdict-pill.review .d{background:var(--vx-sev-elevated);box-shadow:0 0 8px var(--vx-sev-elevated)}
.verdict-pill.block{color:var(--vx-sev-critical);border-color:var(--vx-sev-critical-ln);background:var(--vx-sev-critical-sf)}
.verdict-pill.block .d{background:var(--vx-sev-critical);box-shadow:0 0 8px var(--vx-sev-critical)}

/* two big cards (one engine, two ways in) */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:44px}
.duo-card{position:relative;padding:30px 28px;border-radius:22px;overflow:hidden;
  background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.015));border:1px solid var(--vx-line);transition:.34s var(--vx-ease)}
.duo-card::before{content:"";position:absolute;inset:0;opacity:0;transition:.34s;pointer-events:none;background:radial-gradient(70% 60% at 30% 0%,var(--dc-sf,var(--hero-sf)),transparent 70%)}
.duo-card:hover{transform:translateY(-6px);border-color:var(--dc-ln,var(--hero-ln));box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.duo-card:hover::before{opacity:1}
.duo-card .dc-ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;position:relative;z-index:1;
  background:var(--dc-sf,var(--hero-sf));border:1px solid var(--dc-ln,var(--hero-ln));color:var(--dc-c,var(--hero-br))}
.duo-card .dc-ic .icon{width:26px;height:26px}
.duo-card .dc-k{font-family:var(--vx-f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--vx-text-faint);margin:18px 0 8px;position:relative;z-index:1}
.duo-card .dc-t{font-family:var(--vx-f-disp);font-weight:600;font-size:23px;letter-spacing:-.01em;position:relative;z-index:1}
.duo-card .dc-d{font-size:14px;color:var(--vx-text-dim);line-height:1.6;margin-top:10px;position:relative;z-index:1}
.duo-card .dc-d b{color:var(--vx-text-muted)}

/* threat / tool cards grid (reuses .method visual language but denser) */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:40px}
.tcard{position:relative;padding:24px 22px;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.012));border:1px solid var(--vx-line);transition:.3s var(--vx-ease)}
.tcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--tc-c,var(--hero))}
.tcard:hover{transform:translateY(-5px);border-color:var(--tc-ln,var(--hero-ln));box-shadow:0 26px 54px -30px rgba(0,0,0,.8)}
.tcard .tc-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--tc-sf,var(--hero-sf));border:1px solid var(--tc-ln,var(--hero-ln));color:var(--tc-c,var(--hero-br))}
.tcard .tc-ic .icon{width:22px;height:22px}
.tcard .tc-t{font-family:var(--vx-f-disp);font-weight:600;font-size:17px;letter-spacing:-.01em;margin:16px 0 7px}
.tcard .tc-d{font-size:13px;color:var(--vx-text-dim);line-height:1.55}
.tcard .tc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tc-chip{font-family:var(--vx-f-mono);font-size:9px;letter-spacing:.03em;color:var(--vx-text-muted);padding:4px 9px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--vx-line)}
.tcard .tc-by{margin-top:auto;padding-top:14px;font-family:var(--vx-f-mono);font-size:9.5px;letter-spacing:.03em;color:var(--vx-text-faint)}
.tcard .tc-by b{color:var(--tc-c,var(--hero-br));font-weight:500}

/* check lists */
.list-check{display:flex;flex-direction:column;gap:11px;margin-top:20px}
.list-check li{display:flex;gap:12px;align-items:flex-start;list-style:none;font-size:14px;color:var(--vx-text-muted);line-height:1.5}
.list-check .ck{width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;background:var(--vx-mint-sf);border:1px solid var(--vx-mint-ln);color:var(--vx-mint-br)}
.list-check .ck .icon{width:15px;height:15px}
.list-check li b{color:var(--vx-text)}

/* quickstart steps */
.qsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px}
.qstep{position:relative;padding:24px 20px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid var(--vx-line);transition:.3s var(--vx-ease)}
.qstep:hover{transform:translateY(-4px);border-color:var(--hero-ln);background:rgba(255,255,255,.05)}
.qstep .qn{font-family:var(--vx-f-mono);font-size:11px;color:var(--hero-br);letter-spacing:.1em;border:1px solid var(--hero-ln);background:var(--hero-sf);border-radius:8px;padding:4px 9px;display:inline-block}
.qstep .qt{font-family:var(--vx-f-disp);font-weight:600;font-size:17px;margin:16px 0 8px}
.qstep .qd{font-size:12.5px;color:var(--vx-text-dim);line-height:1.55}
.qstep .qd code{font-family:var(--vx-f-mono);font-size:11px;color:var(--hero-br);background:var(--hero-sf);padding:1px 5px;border-radius:5px}

/* code terminal */
.terminal{position:relative;border-radius:18px;overflow:hidden;background:rgba(8,10,16,.92);border:1px solid var(--vx-line-2);
  box-shadow:var(--vx-shadow-pop);margin-top:8px}
.terminal .t-bar{height:38px;display:flex;align-items:center;gap:8px;padding:0 15px;background:rgba(11,14,22,.9);border-bottom:1px solid var(--vx-line)}
.terminal .t-bar i{width:10px;height:10px;border-radius:50%}
.terminal .t-bar .r{background:#FF5F57}.terminal .t-bar .y{background:#FEBC2E}.terminal .t-bar .g{background:#28C840}
.terminal .t-bar .tt{margin-left:8px;font-family:var(--vx-f-mono);font-size:11px;color:var(--vx-text-dim);letter-spacing:.03em}
.terminal .t-bar .tt-r{margin-left:auto;font-family:var(--vx-f-mono);font-size:9px;color:var(--vx-mint-br);letter-spacing:.06em}
.terminal pre{margin:0;padding:20px 22px;font-family:var(--vx-f-mono);font-size:12.5px;line-height:1.75;color:var(--vx-text-muted);
  overflow-x:auto;white-space:pre;tab-size:2}
.terminal .c-cmd{color:var(--vx-blue-br)}
.terminal .c-flag{color:var(--vx-text-dim)}
.terminal .c-str{color:var(--vx-mint-br)}
.terminal .c-key{color:var(--hero-br)}
.terminal .c-num{color:var(--vx-sev-elevated)}
.terminal .c-cmt{color:var(--vx-text-faint)}
.terminal .t-resp{display:block;margin-top:14px;padding-top:14px;border-top:1px solid var(--vx-line);color:var(--vx-text)}
.terminal .t-resp .arrow{color:var(--vx-mint-br)}
.cursor-blink::after{content:"";display:inline-block;width:8px;height:15px;background:var(--hero-br);margin-left:3px;vertical-align:-2px;
  animation:blink 1.1s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* endpoints table */
.eptable{margin-top:36px;border:1px solid var(--vx-line);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.02)}
.eprow{display:grid;grid-template-columns:74px 1fr 128px 54px;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--vx-line);transition:.16s}
.eprow:last-child{border-bottom:none}
.eprow:hover{background:rgba(255,255,255,.03)}
.eprow.head{background:rgba(255,255,255,.03)}
.eprow.head span{font-family:var(--vx-f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--vx-text-faint)}
.ep-m{font-family:var(--vx-f-mono);font-size:10px;font-weight:600;letter-spacing:.04em;text-align:center;padding:4px 0;border-radius:6px}
.ep-m.post{color:var(--vx-mint-br);background:var(--vx-mint-sf);border:1px solid var(--vx-mint-ln)}
.ep-m.get{color:var(--vx-blue-br);background:var(--vx-blue-sf);border:1px solid var(--vx-blue-ln)}
.ep-path{font-family:var(--vx-f-mono);font-size:12px;color:var(--vx-text)}
.ep-path small{display:block;font-size:11px;color:var(--vx-text-dim);margin-top:2px;letter-spacing:0}
.ep-scope{font-family:var(--vx-f-mono);font-size:10px;color:var(--hero-br)}
.ep-units{font-family:var(--vx-f-mono);font-size:12px;color:var(--vx-text-muted);text-align:center}
@media (max-width:760px){.eprow{grid-template-columns:64px 1fr;}.ep-scope,.ep-units{display:none}}

/* tier / pricing cards */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.tier{position:relative;padding:30px 26px;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(175deg,rgba(255,255,255,.05),rgba(255,255,255,.014));border:1px solid var(--vx-line);transition:.3s var(--vx-ease)}
.tier:hover{transform:translateY(-6px);border-color:var(--vx-line-2)}
.tier.feature{border-color:var(--hero-ln);background:linear-gradient(175deg,var(--hero-sf),rgba(255,255,255,.02))}
.tier.feature::after{content:"Most popular";position:absolute;top:16px;right:16px;font-family:var(--vx-f-mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--hero-br);background:var(--hero-sf);border:1px solid var(--hero-ln);border-radius:20px;padding:4px 10px}
.tier .ti-n{font-family:var(--vx-f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--vx-text-dim)}
.tier .ti-p{font-family:var(--vx-f-disp);font-weight:700;font-size:38px;letter-spacing:-.02em;margin:14px 0 2px}
.tier .ti-p small{font-family:var(--vx-f-mono);font-size:12px;font-weight:400;color:var(--vx-text-dim);letter-spacing:0}
.tier .ti-s{font-size:12.5px;color:var(--vx-text-dim);line-height:1.5;margin-bottom:18px}
.tier .ti-list{display:flex;flex-direction:column;gap:9px;margin-bottom:22px}
.tier .ti-list div{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--vx-text-muted)}
.tier .ti-list .icon{width:15px;height:15px;flex:none;color:var(--hero-br);margin-top:2px}
.tier .btn{margin-top:auto;justify-content:center}

/* Sign-in-link + plan select on the immersive business start form. Matches the
   handoff .join-form input treatment so the added select reads as one control. */
.join-select{padding:14px 16px;border-radius:13px;background:rgba(255,255,255,.05);border:1px solid var(--vx-line-2);color:var(--vx-text);font:inherit;font-size:14px;outline:none;transition:.2s;cursor:pointer}
.join-select:focus{border-color:var(--hero-ln);background:rgba(255,255,255,.07)}
.join-select option{background:#0b0e16;color:var(--vx-text)}
.join-msg{font-size:13px;color:var(--vx-text-muted);margin-top:12px;min-height:18px;text-align:center;max-width:52ch;margin-left:auto;margin-right:auto}
.join-msg[data-ok="true"]{color:var(--vx-mint-br)}

/* Lead / contact form (arrange a demo) → POST /api/business/lead. */
.lead-form{display:flex;flex-direction:column;gap:16px;width:min(100%,560px);margin:34px auto 0}
.lead-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lead-field{display:flex;flex-direction:column;gap:7px}
.lead-field label{font-family:var(--vx-f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--vx-text-dim)}
.lead-field input,.lead-field textarea{padding:13px 15px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--vx-line-2);color:var(--vx-text);font:inherit;font-size:14px;outline:none;transition:.2s;resize:vertical}
.lead-field input::placeholder,.lead-field textarea::placeholder{color:var(--vx-text-faint)}
.lead-field input:focus,.lead-field textarea:focus{border-color:var(--hero-ln);background:rgba(255,255,255,.07)}
.lead-form .btn{align-self:flex-start;justify-content:center}

/* Developer FAQ accordion. */
.faq{margin-top:34px;max-width:820px}
.faq details{border-bottom:1px solid var(--vx-line);padding:18px 2px}
.faq summary{font-family:var(--vx-f-disp);font-weight:600;font-size:17px;color:var(--vx-text);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--hero-br);font-weight:400;font-size:20px;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq p{margin-top:12px;font-size:14.5px;color:var(--vx-text-muted);line-height:1.6;max-width:70ch}
.faq p code{font-family:var(--vx-f-mono);font-size:12px;color:var(--hero-br)}
.faq p a{color:var(--hero-br);text-decoration:underline;text-underline-offset:3px}

/* Extra footer link row (real nav links). */
.f-links{display:flex;flex-wrap:wrap;gap:16px}
.f-links a{font-size:12.5px;color:var(--vx-text-dim);transition:.16s}
.f-links a:hover{color:var(--vx-text)}

/* ── Business landing: hero CTA + grouped-threats + edge + video slot ──────
   The /business/ page reuses the immersive tokens/classes (aurora field,
   .scene, .tcard, .eyebrow, reveal stagger). These rules only add the few
   biz-specific pieces the page needs on top of the shared design. */

/* The hero is a standalone class (not .scene) so the tool test can match
   <section class="biz-hero">; give it the same immersive full-height scene
   layout the rest of the page uses. */
/* At phone width a hero child measured 4-5px past the viewport and gave
   /business/ a horizontal scroll. Clip on the page (not overflow:hidden, which
   would break sticky descendants). */
body:has(.biz-hero){overflow-x:clip}
.biz-hero{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:120px clamp(24px,7vw,120px) 100px;max-width:1500px;margin:0 auto}

/* Primary hero CTA — a real <button> styled like the immersive .btn.primary.lg
   so the hero has one unmistakable action. */
.submit-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 26px;border-radius:14px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;
  border:1px solid transparent;color:var(--vx-on-accent);
  /* White on the lightened hero fill measured 2.2 to 3.9:1, under WCAG AA. */
  background:linear-gradient(135deg,color-mix(in srgb,var(--hero) 70%,black),color-mix(in srgb,var(--hero) 58%,black));
  box-shadow:0 10px 26px -10px var(--hero-glow),inset 0 1px 0 rgba(255,255,255,.2);transition:.18s}
.submit-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px -10px var(--hero-glow)}
.submit-btn:active{transform:translateY(0)}
.submit-btn:disabled{opacity:.6;cursor:progress;transform:none}
.biz-hero-cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.biz-secondary{color:var(--vx-text-muted);font-size:14px;text-decoration:underline;text-underline-offset:3px;
  background:none;border:none;padding:0;cursor:pointer;font:inherit;transition:.16s}
.biz-secondary:hover{color:var(--vx-text)}

/* Grouped threats — clean chip cards on the shared .tcard frame. The
   .biz-threat-group is a content wrapper inside .tcard (kept a standalone class
   so the tool test can count exactly six); make it a full-height flex column so
   the tool/tier footer still pins to the bottom of the card. */
.biz-threats-grid{align-items:stretch}
.biz-threats-grid>.tcard{height:100%}
.biz-threat-group{display:flex;flex-direction:column;height:100%}
.biz-threat-head{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.biz-threat-ic{flex:0 0 auto}
.biz-threat-h{margin:0;font-family:var(--vx-f-disp);font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--vx-text)}
.biz-threat-hook{font-size:13px;color:var(--vx-text-dim);line-height:1.55;margin:0 0 14px}
.biz-threat-chips{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.biz-threat-chips li{font-family:var(--vx-f-mono);font-size:9.5px;letter-spacing:.03em;color:var(--vx-text-muted);
  padding:4px 9px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--vx-line)}
.biz-threat-foot{margin:auto 0 0;padding-top:14px;border-top:1px solid var(--vx-line);
  font-family:var(--vx-f-mono);font-size:9.5px;letter-spacing:.03em;color:var(--vx-text-faint);
  display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.biz-threat-foot strong{color:var(--tc-c,var(--hero-br));font-weight:600}
.biz-threat-tier{margin-left:auto;flex:0 0 auto;font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tc-c,var(--hero-br));padding:3px 9px;border-radius:12px;
  background:var(--tc-sf,var(--hero-sf));border:1px solid var(--tc-ln,var(--hero-ln))}
.biz-threats-note{max-width:82ch}
.biz-threats-note b{color:var(--vx-text)}

/* The Vilkax edge — four pillars on the shared .tcard frame. .biz-edge is a
   content wrapper inside .tcard (standalone class so the test counts four). */
.biz-edge-grid{align-items:stretch}
.biz-edge-grid>.tcard{height:100%}
.biz-edge{display:flex;flex-direction:column;height:100%}
.biz-edge-k{font-family:var(--vx-f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tc-c,var(--hero-br))}
.biz-edge-h{margin:12px 0 8px;font-family:var(--vx-f-disp);font-weight:600;font-size:19px;letter-spacing:-.01em;color:var(--vx-text)}
.biz-edge-body{margin:0;font-size:13.5px;color:var(--vx-text-dim);line-height:1.6}
.biz-edge-body em{font-style:normal;color:var(--vx-text-muted);font-weight:500}

/* Video slot — frames the CSS-only animated preview (vlx-demo.css supplies the
   demo chrome; this just provides the outer frame the immersive page lacks). */
.biz-video-slot{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--vx-line-2);
  background:rgba(255,255,255,.02);box-shadow:0 30px 60px -34px rgba(0,0,0,.8)}

@media (max-width:1080px){
  .duo{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .qsteps{grid-template-columns:1fr 1fr}
  .tiers{grid-template-columns:1fr}
}
@media (max-width:640px){
  .grid-3,.grid-2,.qsteps{grid-template-columns:1fr}
  .lead-row{grid-template-columns:1fr}
  .biz-hero-cta{flex-direction:column;align-items:stretch}
}


/* ── Subscription reminder, landing-page copy of the /app/app.css rules ──────
   The landing page loads pages.css and not app.css, so without this the card
   renders as unstyled text in the middle of the marketing page — the same way
   the welcome banner first shipped invisible for the mirror-image reason.

   Kept byte-identical to the /app rules rather than restyled: it is the same
   card, and two divergent looks for one component is how a design system
   starts to rot. */
.vlx-subnudge {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 14px auto; max-width: 720px;
  /* Padded in from the viewport edge: the /app copy of this rule lives inside a
     container that already has gutters, and the landing page's <main> does not. */
  width: calc(100% - 32px);
  padding: 14px 16px;
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 14px;
  background: rgba(148,163,184,0.06);
  font: 400 13px/1.5 Manrope, system-ui, sans-serif;
}
.vlx-subnudge[hidden] { display: none !important; }
.vlx-subnudge-text { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.vlx-subnudge-title { font-weight: 600; font-size: 14px; }
.vlx-subnudge-body { opacity: 0.82; }
.vlx-subnudge-cta {
  flex: 0 0 auto; align-self: center;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.3);
  text-decoration: none; font-weight: 600; font-size: 13px;
  white-space: nowrap;
}
.vlx-subnudge-close {
  flex: 0 0 auto;
  background: none; border: 0; cursor: pointer;
  font-size: 20px; line-height: 1; opacity: 0.55;
  padding: 2px 4px;
  /* A 32px target, because "not now" is the answer people most need to be able
     to give and a 12px times-sign is a dark pattern by omission. */
  min-width: 32px; min-height: 32px;
}


/* The landing page's header is FIXED (66px, z-index 60) and <main> has no top
   padding of its own -- the hero section carries its own spacing, so nothing
   had ever needed any. The reminder is the first child of <main>, so it sat
   underneath the header with its title cut in half. Caught in a 375px
   screenshot, not by reading the CSS.

   Scoped to the direct child of #content so the /app copy is untouched: there
   the card sits below a static header and needs no offset. --vlx-topbar-h
   carries the same 66px as nexus.css so the two cannot drift apart silently. */
#content { --vlx-topbar-h: 66px; }
#content > .vlx-subnudge {
  margin-top: calc(var(--vlx-topbar-h) + 18px);
  /* An in-page anchor must not park it under the header either. */
  scroll-margin-top: calc(var(--vlx-topbar-h) + 18px);
}


/* At narrow widths the three-across flex row leaves the CTA floating in the
   middle of a tall wrapped paragraph, which reads as a stray button rather
   than the answer to the sentence beside it. Below 480px the card becomes a
   column: text, then the action, with the dismiss pinned top-right where a
   dismiss belongs. Seen in a 375px screenshot, not inferred. */
@media (max-width: 480px) {
  .vlx-subnudge { flex-wrap: wrap; position: relative; padding-inline-end: 44px; }
  .vlx-subnudge-text { flex: 1 1 100%; }
  .vlx-subnudge-cta  { align-self: stretch; text-align: center; margin-top: 4px; }
  .vlx-subnudge-close { position: absolute; top: 8px; inset-inline-end: 8px; }
}