/* /penetration-testing (Lance) only — the dark skin and the page's own blocks, on top of global/sections/responsive.
   Approved mockup: archive/docs/solution-new/penetration-testing-mockup-evervault.html (2026-10-29), decisions in
   archive/docs/solution-new/redesign-evervault/CONSENSUS-evervault-redesign.md. The figures are css/isofig.css. */

/* 1) dark skin: the house reads semantic tokens, so overriding them here repaints the shared components */
:root{
  --surface-page:#0a0d18;
  --surface-section:#0e1324;
  --surface-chip:#141a30;
  --surface-tint:#0c1020;
  --surface-footer:#070912;
  --text-strong:#ffffff;
  --text-body:#c6ccdf;
  --text-muted:#8b94b4;
  --accent-text:var(--cp-sky-light);
  --cp-slate:#a9b1ce;
  --cp-ink:#c6ccdf;
  --cta-bg:var(--cp-periwinkle);
  --cta-bg-hover:var(--cp-violet);
  --cta-fg:#ffffff;
  --cp-hairline:rgba(255,255,255,.12);
  --cp-hairline-soft:rgba(255,255,255,.10);
  --cp-hairline-strong:rgba(255,255,255,.18);
  --cp-border:rgba(255,255,255,.22);
  /* page-local values */
  --lance-card-bg:rgba(255,255,255,.035);
  --lance-outline-bg:rgba(93,116,224,.07);
  --lance-glass-bg:rgba(255,255,255,.05);
  --lance-figure-bg:rgba(255,255,255,.04);
  --lance-frame-bar:rgba(255,255,255,.02);
  --lance-frame-dot:rgba(255,255,255,.16);
  --lance-frame-shadow:0 24px 60px rgba(0,0,0,.45);
  --lance-glow:radial-gradient(ellipse,rgba(124,92,255,.30),rgba(93,116,224,.11) 45%,transparent 70%);
  --lance-chip-bg:#000000;
  --lance-sev-c:#e5667a;
  --lance-sev-h:#f0894e;
  --lance-sev-m:#e8bd57;
  --lance-sev-l:#9aa4bf;
  --lance-cmp-old:#8b94b4;
  --lance-mono:ui-monospace,"SF Mono","JetBrains Mono",monospace;
  --lance-fs-cap:13.5px;
  --lance-gap:18px;
  --lance-block:40px;
  --lance-section-y:clamp(72px,10vw,150px);
  --lance-sub-gap:72px;
  --lance-ls-eyebrow:.16em;
  --lance-ls-tag:.1em;
  --lance-ls-step:.08em;
  --lance-ls-num:-.02em;
  --lance-lh-copy:1.6;
  --lance-lh-small:1.5;
}
.card{background:var(--lance-card-bg);border-color:var(--cp-hairline-soft)}
.card--outline{border-color:var(--cp-periwinkle-a40);background:var(--lance-outline-bg)}
.card--glass{background:var(--lance-glass-bg);border-color:var(--cp-glass-14)}
.consult .section__bg{opacity:.18}
.section--sky .section__bg{opacity:.14}

/* 2) type set closer to geometric, without a font change; small mono eyebrow */
.hero__title{font-weight:var(--fw-500);letter-spacing:-.025em;line-height:1.04}
.h2{font-weight:var(--fw-500);letter-spacing:-.018em;line-height:1.14}
.lede{line-height:var(--lance-lh-copy);color:var(--text-muted)}
.eyebrow-mono{display:inline-flex;align-items:center;gap:.7em;margin:0 0 var(--lance-gap);
  font-family:var(--lance-mono);font-size:var(--fs-12);font-weight:var(--fw-500);letter-spacing:var(--lance-ls-eyebrow);text-transform:uppercase;color:var(--cp-sky-light)}
.eyebrow-mono::before{content:"";width:6px;height:6px;background:var(--cp-sky-light)}
.section .center .eyebrow-mono{justify-content:center}
.section{padding-top:var(--lance-section-y);padding-bottom:var(--lance-section-y)}

/* 3) blocks */
.diagram{margin:44px auto 0;max-width:960px}
.diagram__cap{margin:var(--lance-gap) auto 0;max-width:620px;text-align:center;font-size:var(--lance-fs-cap);line-height:var(--lance-lh-copy);color:var(--text-muted)}
.diagram__cap b{color:var(--cp-sky-light);font-weight:var(--fw-600)}
.lance-bridge{max-width:640px;margin:36px auto 0;color:var(--text-muted);font-size:var(--fs-15);line-height:1.7}

.device-frame{margin:0;border:1px solid var(--cp-hairline);border-radius:14px;overflow:hidden;background:var(--surface-chip);box-shadow:var(--lance-frame-shadow)}
.device-frame__bar{display:flex;align-items:center;gap:var(--space-7px);padding:11px 15px;border-bottom:1px solid var(--cp-hairline);background:var(--lance-frame-bar)}
.device-frame__bar i{width:10px;height:10px;border-radius:50%;background:var(--lance-frame-dot)}
.device-frame img{display:block;width:100%;height:auto}
.proof-pair{display:grid;grid-template-columns:1fr;gap:var(--space-4);margin:var(--lance-block) auto 0;max-width:980px}
.proof-pair__tag{font-family:var(--lance-mono);font-size:var(--fs-12);letter-spacing:var(--lance-ls-tag);text-transform:uppercase;color:var(--text-muted);text-align:center}
.lance-kev{max-width:720px;margin:var(--lance-block) auto 0;text-align:center}

.stat-band{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--lance-gap);margin-top:var(--lance-block)}
.stat-band__item{text-align:center;padding:30px 14px;border:1px solid var(--cp-hairline);border-radius:var(--lance-gap);background:var(--lance-frame-bar)}
.stat-band__n{font-size:clamp(38px,5vw,56px);font-weight:var(--fw-600);letter-spacing:var(--lance-ls-num);line-height:1;color:var(--text-strong)}
.stat-band__l{margin-top:var(--space-10px);font-size:var(--fs-14);color:var(--text-muted)}
.sev-legend{display:flex;gap:var(--space-14px);justify-content:center;flex-wrap:wrap;margin-top:26px;font-size:var(--lance-fs-cap);color:var(--text-muted)}
.sev-legend b{font-weight:var(--fw-600)}
.sev-legend .c{color:var(--lance-sev-c)}.sev-legend .h{color:var(--lance-sev-h)}.sev-legend .m{color:var(--lance-sev-m)}.sev-legend .l{color:var(--lance-sev-l)}

.trust-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--lance-gap);margin-top:var(--space-20px);font-size:var(--fs-13);color:var(--text-muted)}
.trust-badges span{display:inline-flex;align-items:center;gap:var(--space-7px)}
.trust-badges span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cp-sky-light)}

/* 4) hero: message only, centred, with a periwinkle glow in place of a screenshot */
.hero--lance{background:var(--surface-page)}
.hero--lance .hero__bg{opacity:.13;filter:brightness(.34) saturate(.9)}
.hero--lance .hero__fade{background:linear-gradient(180deg,transparent,var(--surface-page))}
.hero--lance .hero__copy{position:relative;z-index:var(--z-1)}
.hero--lance .hero__title{margin:0}
.hero--lance .hero__sub{margin-top:var(--space-20px)}
.lance-hero__cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--lance-gap);margin-top:var(--space-28px)}
/* the house .hero__copy .cta margin-top would drop the CTA below the secondary button in this row */
.lance-hero__cta .cta{margin-top:0}
.lance-hero__cta .cta__chip{background:var(--lance-chip-bg)}
/* the secondary button matches the .cta height (60px; 52px under 760px, responsive.css) */
.lance-hero__cta .btn--glass{font-size:var(--fs-17);padding:var(--space-4) var(--space-28px)}
.hero__glow{position:absolute;left:50%;top:40%;width:min(820px,82vw);aspect-ratio:1.7;transform:translate(-50%,-50%);
  border-radius:50%;background:var(--lance-glow);filter:blur(28px);z-index:0;pointer-events:none}

/* manual vs Lance */
.cmp-list{list-style:none;padding:0;margin:var(--space-4) 0 0}
.cmp-list li{position:relative;padding:var(--space-10px) 0 var(--space-10px) var(--space-28px);font-size:var(--fs-15);line-height:var(--lance-lh-small);color:var(--text-body);border-top:1px solid var(--cp-hairline-soft)}
.cmp-list li:first-child{border-top:0}
.cmp-list li::before{position:absolute;left:0;top:var(--space-10px);font-family:var(--lance-mono);font-size:var(--fs-13);font-weight:var(--fw-600)}
.cmp-list--old li{color:var(--text-muted)}
.cmp-list--old li::before{content:"\00D7";color:var(--lance-cmp-old)}
.cmp-list--new li::before{content:"\2713";color:var(--cp-sky-light)}

/* product breadth: three screens */
.lance-sub{margin-top:var(--lance-sub-gap)}
.shots-montage{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--lance-gap);margin-top:44px}
.shots-montage figure{margin:0}
.shots-montage figcaption{margin-top:var(--space-3);font-size:var(--lance-fs-cap);line-height:var(--lance-lh-small);color:var(--text-muted);text-align:center}
.shots-montage figcaption b{display:block;color:var(--text-body);font-weight:var(--fw-600);margin-bottom:var(--space-2px)}
/* one line on desktop (user request 2026-10-29); narrow screens wrap by themselves */
.hero--lance .hero__sub,#how-simple .lede,#graph .diagram__cap{max-width:none}

/* three easy steps */
.steps-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--lance-gap);margin-top:var(--space-48px)}
.step-card__n{font-family:var(--lance-mono);font-size:var(--fs-13);letter-spacing:var(--lance-ls-step);color:var(--cp-sky-light);margin-bottom:var(--space-10px)}
.step-card .card__title{margin-top:0}
.step-card__term{margin-top:var(--space-14px);padding-top:var(--space-3);border-top:1px solid var(--cp-hairline-soft);font-family:var(--lance-mono);font-size:11.5px;letter-spacing:.02em;color:var(--text-muted)}
#trust .boundary-grid{margin-top:var(--lance-block)}

/* 5) hero entry: one staggered fade-up (cp-fade-up drops the movement under reduced motion, global.css) */
html.js .hero--lance .reveal-seq{animation:cp-fade-up var(--dur-700ms) var(--ease-reveal) both}
html.js .hero--lance .reveal-seq:nth-child(1){animation-delay:.05s}
html.js .hero--lance .reveal-seq:nth-child(2){animation-delay:.14s}
html.js .hero--lance .reveal-seq:nth-child(3){animation-delay:.23s}
html.js .hero--lance .reveal-seq:nth-child(4){animation-delay:.32s}
html.js .hero--lance .reveal-seq:nth-child(5){animation-delay:.41s}

@media (max-width:860px){
  .shots-montage,.steps-3{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}
}
@media (max-width:760px){
  .stat-band{grid-template-columns:repeat(2,1fr)}
  .lance-hero__cta .btn--glass{font-size:var(--fs-15);padding:13px 22px}
}