/* vibefix - page styles.
   Built on the Mont3 v3 design system (mont3.ch, static/v3/style.css): same
   tokens, type, buttons, tier grid, terminal card and closing band, copied so
   the two sites read as one family. The vf-* blocks are this site's own. */

/* ─── theme tokens (Mont3 v3) ─── */
:root{
  --bone:#F2F3F5; --bone2:#DCDEE2; --paper:#FAFBFC;
  --ink:#141414; --ink2:#2A2825; --ink3:#4A4842; --ink4:#7E7A72;
  --red:#CB2828;
  --rule:rgba(20,20,20,0.18);
  --grid-line:rgba(20,20,20,0.04);
  --grid-major:rgba(20,20,20,0.075);
  --grid-dot:rgba(203,40,40,0.20);
  --header-bg:rgba(242,243,245,.82);
  --traffic-1:#E94B3C; --traffic-2:#E8B43A; --traffic-3:#3DAA5E;
  /* A dark panel that stays dark in both themes (featured tier). In light it
     is the ink; in dark var(--ink) flips light, so it gets its own value. */
  --slab:#141414; --on-slab:#F2F4F6;
  --sans:'Inter',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --pad:clamp(20px,4vw,56px);
  --max:1440px;
}

[data-theme="dark"]{
  --bone:#23252A; --bone2:#181A1E; --paper:#2E3137;
  --ink:#F2F4F6; --ink2:#D6D8DB; --ink3:#9CA0A6; --ink4:#65686D;
  --red:#DC3C34;
  --rule:rgba(242,244,246,0.16);
  --grid-line:rgba(242,244,246,0.04);
  --grid-major:rgba(242,244,246,0.08);
  --grid-dot:rgba(220,60,52,0.30);
  --header-bg:rgba(24,26,30,0.85);
  --traffic-1:#FF5F57; --traffic-2:#FEBC2E; --traffic-3:#28C840;
  --slab:#15171c;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* the fixed header is 72px: anchors land below it, not under it */
html{scroll-behavior:smooth; scroll-padding-top:72px}
body{
  background:var(--bone); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .25s ease, color .25s ease;
}
a{color:inherit}
::selection{background:var(--red); color:#fff}
:focus-visible{outline:2px solid var(--red); outline-offset:3px}

.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--pad)}
section{position:relative; background:var(--bone)}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:12px; top:-80px; z-index:100;
  padding:10px 14px; background:var(--ink); color:var(--bone);
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; transition:top .15s;
}
.skip-link:focus{top:12px}


/* ─── type ─── */
.display{font-weight:800; letter-spacing:-.045em; line-height:.92; font-size:clamp(44px, 7vw, 116px); margin:0}
.h2{
  font-weight:800; letter-spacing:-.035em; line-height:.96;
  font-size:clamp(32px, 4.25vw, 68px); margin:0;
  text-wrap:balance;
}
.h3{font-weight:700; letter-spacing:-.025em; line-height:1.05; font-size:clamp(22px, 2.4vw, 36px); margin:0}
.display, .h2, .h3, .wd-cta-h{overflow-wrap:break-word}
.lead{font-size:clamp(18px, 1.5vw, 22px); line-height:1.5; max-width:58ch; color:var(--ink3); margin:0}
.h2 em, .display em{color:var(--red); font-style:italic}
em.r{font-style:normal; color:var(--red); font-weight:500}
.lead em.r{font-weight:600}


/* ─── marker (section number tag) ─── */
.marker{
  display:flex; align-items:center; gap:14px;
  padding-top:clamp(36px,5vw,64px);
  margin-bottom:clamp(24px,3vw,40px);
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink3);
}
.marker::before{content:""; width:22px; height:1px; background:currentColor; opacity:.5}
.marker .n{color:var(--red); font-weight:600}


/* ─── header ─── */
.header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  height:72px; display:flex; align-items:center;
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  background:var(--header-bg);
  border-bottom:1px solid var(--rule);
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.header-inner{width:100%; display:flex; align-items:center; gap:clamp(16px,3vw,44px)}
.header-inner .nav{margin-inline:auto}
/* pinned right, also when the nav is hidden and nothing else pushes it */
.header-actions{display:flex; align-items:center; gap:10px; flex-shrink:0; margin-left:auto}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; line-height:1}
.brand-mark{display:block; height:30px; width:auto; flex-shrink:0}
.brand-text{display:flex; flex-direction:column; gap:3px}
.brand-word{font-family:var(--sans); font-weight:800; font-size:19px; letter-spacing:-.03em; line-height:1}
.brand-word .brand-fix{color:var(--red)}
.brand-tag{
  font-family:var(--mono); font-size:9px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink3); line-height:1;
}
@media (max-width:640px){
  .brand-mark{height:26px}
  .brand-word{font-size:16px}
  .brand-tag{font-size:8px; letter-spacing:.16em}
}
@media (max-width:480px){
  .header .btn{padding:7px 9px; font-size:9px; letter-spacing:.06em; gap:0; white-space:nowrap}
  .header .btn .ar{display:none}
}

.nav{display:flex; gap:30px; font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase}
.nav a{text-decoration:none; opacity:.65; transition:opacity .15s, color .15s; padding-block:6px; margin-block:-6px}
.nav a:hover{opacity:1}
.nav .idx{color:var(--red); margin-right:6px}
/* four anchors + the CTA need ~980px; below that the burger takes over */
@media (max-width:980px){ .nav{display:none} }

.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; padding:0;
  border:1px solid var(--ink); background:transparent; color:var(--ink);
  cursor:pointer; font-family:var(--mono); font-size:12px; line-height:1;
  transition:background .15s, color .15s, border-color .15s;
  position:relative; flex-shrink:0;
}
.theme-toggle:hover{background:var(--ink); color:var(--bone)}
.theme-toggle .sun, .theme-toggle .moon{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .2s ease, transform .2s ease;
}
.theme-toggle .moon{opacity:0; transform:rotate(-30deg)}
[data-theme="dark"] .theme-toggle .sun{opacity:0; transform:rotate(30deg)}
[data-theme="dark"] .theme-toggle .moon{opacity:1; transform:rotate(0)}
.theme-toggle .sun svg, .theme-toggle .moon svg{width:16px; height:16px; display:block}

/* mobile nav: burger + full-screen panel (≤980px, where .nav is hidden) */
.nav-burger{
  display:none; align-items:center; justify-content:center;
  width:32px; height:32px; padding:0;
  border:1px solid var(--ink); background:transparent; color:var(--ink);
  cursor:pointer; flex-shrink:0;
  transition:background .15s, color .15s, border-color .15s;
}
.nav-burger:hover{background:var(--ink); color:var(--bone)}
.nav-burger-lines{position:relative; width:16px; height:12px; display:block}
.nav-burger-lines i{
  position:absolute; left:0; right:0; height:2px; background:currentColor;
  transition:transform .22s ease, opacity .15s ease, top .22s ease;
}
.nav-burger-lines i:nth-child(1){top:0}
.nav-burger-lines i:nth-child(2){top:5px}
.nav-burger-lines i:nth-child(3){top:10px}
html.nav-open .nav-burger-lines i:nth-child(1){top:5px; transform:rotate(45deg)}
html.nav-open .nav-burger-lines i:nth-child(2){opacity:0}
html.nav-open .nav-burger-lines i:nth-child(3){top:5px; transform:rotate(-45deg)}
@media (max-width:980px){ .nav-burger{display:inline-flex} }
/* under 375px the theme switch moves into the panel, CTA + burger stay */
.mnav-theme{display:none; margin-top:18px}
@media (max-width:374px){
  .header .theme-toggle{display:none}
  .mnav-theme{display:block}
}

.mobile-nav{
  position:fixed; top:72px; left:0; right:0; bottom:0; z-index:49;
  background:var(--bone);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
html.nav-open .mobile-nav{opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0)}
@media (max-width:980px){ html.nav-open, html.nav-open body{overflow:hidden} }
@media (min-width:981px){ .mobile-nav{display:none} }
.mobile-nav-inner{
  max-width:var(--max); margin:0 auto; padding:10px var(--pad) 44px;
  display:flex; flex-direction:column;
  font-family:var(--mono); font-size:13px; letter-spacing:.18em; text-transform:uppercase;
}
.mobile-nav .idx{color:var(--red); margin-right:10px}
.mnav-item{
  display:flex; align-items:center; min-height:56px; padding:14px 0;
  text-decoration:none; color:var(--ink); opacity:.85; transition:opacity .15s, color .15s;
}
.mnav-item + .mnav-item{border-top:1px solid var(--rule)}
.mnav-item:hover{opacity:1}
.mnav-theme-btn{
  display:inline-flex; align-items:center; min-height:44px; padding:0 14px;
  border:1px solid var(--rule); background:transparent; color:var(--ink); cursor:pointer;
  font:inherit; font-size:12px; letter-spacing:.14em; text-transform:inherit; opacity:.8;
}


/* ─── buttons ─── */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 18px; font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  text-decoration:none; cursor:pointer; border:1px solid var(--ink);
  background:var(--ink); color:var(--bone);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{background:var(--red); border-color:var(--red); color:#fff}
.btn .ar{display:inline-block; transition:transform .2s ease}
.btn:hover .ar{transform:translateX(4px)}
.btn-ghost{background:transparent; color:inherit; border-color:currentColor}
.btn-ghost:hover{background:var(--red); border-color:var(--red); color:#fff}
/* phones: full width, label left, arrow right (the header CTA stays inline) */
@media (max-width:560px){
  .btn{width:100%; justify-content:space-between}
  .header .btn{width:auto; justify-content:center}
  .hero-actions{flex-direction:column; align-items:stretch; gap:12px}
}


/* ─── hero ─── */
.ws-hero{padding:128px 0 40px}
.ws-hero .display{font-size:clamp(40px, 6.5vw, 96px)}
.ws-hero .display .line{display:block}
.ws-hero .display .quiet{color:var(--ink3); font-weight:400; font-size:.76em}
.ws-hero .display em{font-weight:800}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.04fr) minmax(280px, .96fr);
  gap:clamp(28px,3.4vw,48px);
  align-items:stretch;
}
.hero-main{display:flex; flex-direction:column; justify-content:center; gap:clamp(28px,4vw,48px)}
.hero-foot{display:flex; flex-direction:column; gap:22px; padding-top:24px}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap}
.hero-side{
  display:flex; flex-direction:column; justify-content:center;
  gap:18px; padding-top:8px; min-width:0;
}
.hero-side-meta{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink3);
}
.hero-side-meta .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--red);
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.4; transform:scale(.85)}}
@keyframes blink{50%{opacity:0}}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:48px}
}

/* summit background: radial elevation + engineering grid, 28px hairlines,
   140px major lines, red registration dots (Mont3 subpage heroes) */
.ws-hero.bg-summit{
  overflow:hidden;
  background:
    radial-gradient(circle, var(--grid-dot) 1.2px, transparent 2px),
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    radial-gradient(ellipse 90% 70% at 50% 45%, var(--paper) 0%, var(--bone) 45%, var(--bone2) 100%);
  background-size:140px 140px, 140px 140px, 140px 140px, 28px 28px, 28px 28px, 100% 100%;
  background-position:center;
}

/* scramble: per-letter roll on the headline's last word (site.js) */
.scram{display:inline-block; font-variant-ligatures:none; white-space:nowrap}
.scram > i{display:inline-block; font-style:inherit; overflow:visible}
.scram > i.rolling{color:var(--red)}


/* ─── terminal card + scan report ─── */
.term-card{
  background:var(--paper);
  border:1px solid var(--ink);
  display:flex; flex-direction:column;
  font-family:var(--mono);
  color:var(--ink2);
  overflow:hidden;
}
.term-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px;
  border-bottom:1px solid var(--ink);
  background:var(--bone2);
}
.term-bar .dots{display:flex; gap:6px}
.term-bar .dots i{width:10px; height:10px; border-radius:50%; display:block}
.term-bar .dots i:nth-child(1){background:var(--traffic-1)}
.term-bar .dots i:nth-child(2){background:var(--traffic-2)}
.term-bar .dots i:nth-child(3){background:var(--traffic-3)}
.term-host{font-size:11px; color:var(--ink3); letter-spacing:.04em}
.term-body{padding:16px 16px 18px; font-size:13px; line-height:1.7; flex:1}
.term-line{display:block; white-space:normal}
.term-line .sym{color:var(--red); margin-right:6px; font-weight:700}
.term-line .kw{color:var(--ink); font-weight:500}
.term-comment{color:var(--ink3); font-style:italic}
.term-line .caret{
  display:inline-block; width:7px; height:1em; background:var(--ink);
  vertical-align:-2px; animation:blink 1s steps(1) infinite;
}
.term-body.invoice{
  font-size:12.5px; line-height:1.65;
  display:flex; flex-direction:column; gap:1px;
}
.invoice .inv-rule{border-top:1px dashed var(--ink); opacity:.6; margin:2px 0}
.invoice .term-line + .inv-rule{margin-top:6px}
.invoice .inv-title{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  font-weight:700; color:var(--ink); padding:2px 0;
}
.invoice .inv-title .inv-ref{color:var(--red); font-weight:600; letter-spacing:.18em}
.invoice .inv-row{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.invoice .inv-k{color:var(--ink2); font-weight:500}
.invoice .inv-v{color:var(--ink); font-weight:600; white-space:nowrap}
.invoice .inv-v .x{color:var(--red)}
.invoice .term-comment{margin-top:6px}


/* ─── sections ─── */
.ws-section{padding:clamp(40px,5vw,72px) 0 clamp(56px,6vw,96px); border-top:1px solid var(--rule)}
.ws-section .marker{margin-bottom:clamp(16px,2vw,28px); padding-top:0}
.vf-packages, .vf-report, .vf-faq-sec{background:var(--bone2)}
.vf-checks-sec, .vf-how{background:var(--bone)}

.ws-head{
  display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr);
  gap:clamp(28px,4vw,72px); align-items:end;
  margin-bottom:clamp(28px,3vw,48px);
}
.ws-head .h2{font-size:clamp(32px,4vw,60px)}
.ws-head em{font-style:italic; font-weight:800; color:var(--red)}
.ws-head .lead{padding-bottom:6px; font-size:clamp(16px,1.3vw,19px)}
@media (max-width:820px){ .ws-head{grid-template-columns:1fr} }


/* ─── 001 · packages: tier grid (Mont3 /website-development/) ─── */
.tier-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--ink);
  margin-bottom:clamp(20px,3vw,32px);
}
@media (max-width:900px){ .tier-grid{grid-template-columns:1fr} }
.tier{
  background:var(--paper); color:var(--ink);
  padding:30px 26px 26px;
  border-right:1px solid var(--ink);
  display:flex; flex-direction:column;
  position:relative;
}
.tier:last-child{border-right:none}
@media (max-width:900px){
  .tier{border-right:none; border-bottom:1px solid var(--ink)}
  .tier:last-child{border-bottom:none}
}
.tier--featured{background:var(--slab); color:var(--on-slab)}
.tier--featured::before{
  content:""; position:absolute; left:0; right:0; top:0;
  height:4px; background:var(--red);
}
/* min-height: the Recommended flag is taller than a bare tag, and without a
   shared height it pushed Pro's whole list ~6px below the other two cards */
.tier-top{display:flex; justify-content:space-between; align-items:center; min-height:22px; margin-bottom:22px}
.tier-tag{
  font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink4);
}
.tier--featured .tier-tag{color:rgba(255,255,255,.55)}
.tier-flag{
  font-family:var(--mono); font-size:9px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:#fff; background:var(--red);
  padding:4px 8px;
}
.tier-name{
  font-family:var(--sans); font-weight:800;
  font-size:clamp(30px,3vw,40px); letter-spacing:-.035em;
  line-height:1; margin:0 0 6px; color:inherit;
}
.tier-name-sub{
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink4); margin:0 0 22px;
}
.tier--featured .tier-name-sub{color:rgba(255,255,255,.5)}
.tier-price{
  display:flex; align-items:baseline; gap:6px;
  padding-bottom:20px; margin-bottom:20px;
  border-bottom:1px solid var(--rule);
}
.tier--featured .tier-price{border-bottom-color:rgba(255,255,255,.2)}
.tier-price .num{
  font-family:var(--sans); font-weight:800;
  font-size:clamp(34px,3.6vw,48px); letter-spacing:-.04em;
  line-height:1; color:inherit;
}
.tier-price .cur{
  font-family:var(--mono); font-size:13px; font-weight:600;
  letter-spacing:.12em; color:var(--red);
}
.tier-price .from{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink4); margin-left:6px;
}
.tier--featured .tier-price .from{color:rgba(255,255,255,.5)}
.tier-feat{
  list-style:none; padding:0; margin:0 0 24px;
  display:flex; flex-direction:column; gap:11px;
}
.tier-feat li{
  display:flex; gap:11px; align-items:baseline;
  font-size:14px; line-height:1.4; color:var(--ink2);
}
.tier--featured .tier-feat li{color:rgba(255,255,255,.82)}
.tier-feat li::before{
  content:"+"; flex-shrink:0;
  font-family:var(--mono); font-weight:700; font-size:13px;
  color:var(--red);
}
/* Every card lists its checks in the same order under the same headings, so
   a check sits on the same line in every card that has it. What a tier
   doesn't include is left out, and the space under its list stays blank. */
.tier-feat li.tier-group{
  justify-content:space-between; gap:12px;
  margin-top:6px; padding-top:14px; border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:10px; font-weight:600; line-height:1.3;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink4);
}
.tier-feat li.tier-group:first-child{margin-top:0; padding-top:0; border-top:none}
.tier-feat li.tier-group::before{content:none}
.tier--featured .tier-feat li.tier-group{color:rgba(255,255,255,.5); border-top-color:rgba(255,255,255,.2)}

/* Why it matters: site.js puts a note over every row that has one (package
   cards and "What we check"), shown on hover, on keyboard focus and on tap
   (the rows take focus). The note sits inside the row's markup, so screen
   readers read it with the check. */
li.has-why{position:relative; cursor:help}
li.has-why:focus{outline:none}
li.has-why:focus-visible{outline:2px solid var(--red); outline-offset:3px}
.has-why > .t{
  text-decoration:underline dotted 1px; text-decoration-color:var(--ink4);
  text-underline-offset:4px; transition:color .15s ease, text-decoration-color .15s ease;
}
.tier--featured .has-why > .t{text-decoration-color:rgba(255,255,255,.35)}
li.has-why:is(:hover, :focus) > .t{color:var(--ink); text-decoration-color:var(--red)}
.tier--featured li.has-why:is(:hover, :focus) > .t{color:#fff}
.why{
  position:absolute; z-index:20; left:-12px; right:-12px; bottom:100%;
  /* the transparent border is the gap above the row; it belongs to the note,
     so the pointer can move up into the note without it closing */
  border-bottom:10px solid transparent; background-clip:padding-box;
  padding:11px 14px 12px;
  background:var(--ink); color:var(--bone);
  font-size:13px; line-height:1.5; font-weight:400;
  opacity:0; transform:translateY(4px); pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}
.why::before{
  content:"Why it matters"; display:block; margin-bottom:4px;
  font-family:var(--mono); font-size:9.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--red);
}
.why::after{
  content:""; position:absolute; left:22px; top:100%;
  border:6px solid transparent; border-top-color:var(--ink);
}
/* on the dark Pro card an ink note would vanish: it takes the paper colour */
.tier--featured .why{background:var(--paper); color:var(--ink)}
.tier--featured .why::after{border-top-color:var(--paper)}
li.has-why:is(:hover, :focus) > .why{opacity:1; transform:none; pointer-events:auto}
.tier-foot{margin-top:auto}
.tier-foot .btn{width:100%; justify-content:space-between}
.tier--featured .tier-foot .btn{background:var(--on-slab); color:#141414; border-color:var(--on-slab)}
.tier--featured .tier-foot .btn:hover{background:var(--red); color:#fff; border-color:var(--red)}
[data-theme="dark"] .tier--featured .tier-foot .btn{background:var(--red); color:#fff; border-color:var(--red)}

.wd-note{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 18px;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink4);
}
.wd-note strong{color:var(--red); font-weight:700}
.vf-fine{margin:14px 0 0; font-size:14px; color:var(--ink3)}
/* "hover" or "tap", whichever the device can do; only once the notes exist */
.vf-hint{display:none}
.why-on .vf-hint--hover{display:inline}
@media (hover:none){
  .why-on .vf-hint--hover{display:none}
  .why-on .vf-hint--touch{display:inline}
}


/* ─── 002 · what we check: three tier bands of three questions ─── */
.vf-bands{display:flex; flex-direction:column; gap:clamp(32px,3.6vw,52px)}
.vf-band-head{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 18px;
  padding-bottom:14px;
}
.vf-band-tier{
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink3);
}
.vf-band-tier .n{color:var(--red); margin-right:8px}
.vf-band-name{font-weight:800; font-size:clamp(20px,1.9vw,26px); letter-spacing:-.025em; line-height:1.1}
.vf-band-meta{
  margin-left:auto;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink4);
}
.vf-band-meta b{color:var(--ink); font-weight:600}
@media (max-width:560px){ .vf-band-meta{margin-left:0; width:100%} }

.vf-areas{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--ink); background:var(--paper);
}
@media (max-width:900px){ .vf-areas{grid-template-columns:1fr} }
/* no overflow:hidden here: the note over a card's first rows rises above them */
.vf-area{
  position:relative;
  display:flex; flex-direction:column; gap:10px;
  padding:clamp(24px,2.6vw,36px) clamp(22px,2.2vw,32px) clamp(22px,2.4vw,30px);
  background:var(--paper);
  border-right:1px solid var(--ink);
  transition:background .2s ease;
}
.vf-area:last-child{border-right:none}
@media (max-width:900px){
  .vf-area{border-right:none; border-bottom:1px solid var(--ink)}
  .vf-area:last-child{border-bottom:none}
}
/* red accent bar grows on hover, as on Mont3's included grid */
.vf-area::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--red); transform:scaleY(0); transform-origin:top;
  transition:transform .25s ease;
}
.vf-area:hover{background:var(--bone)}
.vf-area:hover::before{transform:scaleY(1)}
.vf-area-k{
  position:absolute; top:12px; right:18px;
  font-weight:800; font-size:clamp(56px,6vw,84px); line-height:1; letter-spacing:-.05em;
  color:var(--ink); opacity:.06; pointer-events:none;
  transition:opacity .2s ease, color .2s ease;
}
.vf-area:hover .vf-area-k{opacity:.14; color:var(--red)}
.vf-area-q{
  position:relative; margin:0; padding-right:40px;
  font-weight:800; font-size:clamp(22px,2.1vw,28px); letter-spacing:-.03em; line-height:1.05;
  color:var(--ink); transition:color .2s ease;
}
.vf-area:hover .vf-area-q{color:var(--red)}
.vf-area-p{position:relative; margin:0 0 4px; font-size:14px; line-height:1.5; color:var(--ink3); max-width:38ch}
.vf-checks{
  position:relative; list-style:none; margin:0; padding:16px 0 0;
  border-top:1px solid var(--rule);
  display:flex; flex-direction:column; gap:9px;
}
.vf-checks li{display:flex; gap:11px; align-items:baseline; font-size:14px; line-height:1.4; color:var(--ink2)}
/* drawn, not typed: a checkbox glyph is not in the mono subset */
.vf-checks li::before{
  content:""; flex-shrink:0; width:9px; height:9px;
  border:1.5px solid var(--red); transform:translateY(-1px);
}
.vf-area-tags{
  position:relative; margin:auto 0 0; padding-top:18px;
  font-family:var(--mono); font-size:10px; line-height:1.7; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink4);
}


/* ─── when a check fails: a dark interlude band with real cases ───
   Dark in both themes (the slab), so the band's red is opened up: #EF5148 is
   5.2:1 on the slab, where the logo red would be 3.4:1 under body text. */
.vf-risks{
  --red:#EF5148;
  background:var(--slab); color:var(--on-slab);
  padding:clamp(56px,7vw,112px) 0;
}
.vf-risks-tag{
  display:block; margin-bottom:clamp(18px,2.4vw,28px);
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--red);
}
.vf-risks .lead{color:rgba(255,255,255,.72)}
.vf-cases{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  /* the 1px gap over a light background draws the grid lines */
  gap:1px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.16);
}
@media (max-width:1000px){ .vf-cases{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .vf-cases{grid-template-columns:1fr} }
.vf-case{
  background:var(--slab);
  padding:clamp(24px,2.6vw,36px) clamp(22px,2.4vw,32px);
  display:flex; flex-direction:column; gap:12px;
}
.vf-case-h{margin:0; font-weight:700; font-size:clamp(17px,1.4vw,19px); line-height:1.25; color:#fff}
.vf-case-n{
  display:block; margin-bottom:10px;
  font-weight:800; font-size:clamp(48px,5.2vw,80px); line-height:.92; letter-spacing:-.045em;
  color:#fff; transition:color .2s ease;
}
.vf-case:hover .vf-case-n{color:var(--red)}
.vf-case-p{margin:0; font-size:14.5px; line-height:1.55; color:rgba(255,255,255,.66)}
.vf-case-check{
  display:flex; align-items:baseline; gap:10px;
  margin:auto 0 0; padding-top:14px; border-top:1px dashed rgba(255,255,255,.22);
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.75);
}
.vf-case-check .k{color:rgba(255,255,255,.45)}
.vf-case-check b{margin-left:auto; color:var(--red); font-weight:600}
.vf-sources{margin:18px 0 0; font-size:12.5px; line-height:1.7; color:rgba(255,255,255,.5)}
.vf-sources a{color:rgba(255,255,255,.75); text-underline-offset:3px}
.vf-sources a:hover{color:var(--red)}


/* ─── 003 · the report: a page of the PDF + the five parts of a fix ─── */
.vf-report-grid{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(32px,5vw,88px); align-items:start;
}
@media (max-width:900px){ .vf-report-grid{grid-template-columns:1fr} }

.vf-doc{
  position:relative; margin:0 12px 12px 0;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--ink);
  padding:clamp(20px,2.6vw,34px);
  /* a second sheet behind: paper inset by 1px over an ink rectangle */
  box-shadow:12px 12px 0 -1px var(--paper), 12px 12px 0 0 var(--ink);
}
.vf-doc-head{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
}
.vf-doc-head .fix{color:var(--red)}
.vf-doc-head .ref{color:var(--red); font-weight:600; letter-spacing:.18em}
.vf-doc-meta{
  display:flex; flex-wrap:wrap; gap:4px 16px;
  margin-top:8px; padding-bottom:14px; border-bottom:1px dashed var(--ink);
  font-family:var(--mono); font-size:11px; color:var(--ink3); letter-spacing:.04em;
}
.vf-doc-sum{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:14px 0; border-bottom:1px dashed var(--ink);
}
.vf-doc-total{
  margin-left:auto;
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
}
.sev{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:9.5px; font-weight:700; line-height:1.3;
  letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
  padding:3px 7px; border:1px solid currentColor;
}
.sev-crit{background:var(--red); border-color:var(--red); color:#fff}
.sev-high{color:var(--red)}
.sev-med{color:var(--ink3)}

.vf-fix{padding:20px 0 4px}
.vf-fix-top{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-bottom:12px}
.vf-fix-n{font-family:var(--mono); font-size:12px; font-weight:700; color:var(--ink)}
.vf-fix-area{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink4)}
.vf-fix-h{margin:0 0 8px; font-size:clamp(20px,1.8vw,24px); font-weight:800; letter-spacing:-.025em; line-height:1.15}
.vf-fix-p{margin:0 0 16px; font-size:14.5px; line-height:1.5; color:var(--ink3); max-width:56ch}
.vf-doc code{font-family:var(--mono); font-size:.9em; color:var(--ink)}
.vf-fix-dl{display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 16px; margin:0 0 16px; font-size:13.5px; line-height:1.45}
.vf-fix-dl dt{
  font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink4); padding-top:2px;
}
.vf-fix-dl dd{margin:0; color:var(--ink2); overflow-wrap:anywhere}
.vf-prompt{border:1px solid var(--ink); background:var(--bone); padding:12px 14px 14px}
.vf-prompt-k{
  display:flex; justify-content:space-between; gap:12px; margin-bottom:6px;
  font-family:var(--mono); font-size:10px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--red);
}
.vf-prompt-k span:last-child{color:var(--ink4); font-weight:500}
.vf-prompt p{margin:0; font-family:var(--mono); font-size:12.5px; line-height:1.6; color:var(--ink)}
.vf-fix-check{margin:14px 0 0; font-size:13.5px; line-height:1.45; color:var(--ink3)}
.vf-fix-check b{
  font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink4); margin-right:8px;
}
.vf-doc-next{list-style:none; margin:22px 0 0; padding:0; border-top:1px dashed var(--ink)}
.vf-doc-next li{
  display:flex; align-items:center; gap:10px;
  padding:10px 0; border-bottom:1px solid var(--rule);
  font-size:13.5px; line-height:1.35; color:var(--ink2);
}
.vf-doc-next li:last-child{border-bottom:none; padding-bottom:0}
.vf-doc-next .sev{flex-shrink:0; min-width:78px}
.vf-doc-next .t{flex:1; min-width:0}
.vf-doc-next .pg{font-family:var(--mono); font-size:11px; color:var(--ink4); white-space:nowrap}

.vf-anatomy{display:flex; flex-direction:column; gap:22px}
@media (min-width:901px){ .vf-anatomy{position:sticky; top:104px} }
.vf-anatomy-h{
  margin:0; font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink3);
}
.vf-parts{list-style:none; margin:0; padding:0; border-top:1px solid var(--ink)}
.vf-parts li{
  display:grid; grid-template-columns:44px minmax(0,1fr); gap:4px 14px;
  padding:18px 0; border-bottom:1px solid var(--rule);
}
.vf-part-k{
  grid-row:span 2; padding-top:4px;
  font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--red);
}
.vf-part-h{font-weight:800; font-size:clamp(18px,1.6vw,21px); letter-spacing:-.02em; line-height:1.2}
.vf-parts p{margin:0; font-size:14.5px; line-height:1.5; color:var(--ink3)}


/* ─── 004 · how it works: stepper + spec row (Mont3 workshop) ─── */
.wd-flow{
  list-style:none; margin:0 0 clamp(36px,4vw,56px); padding:0; counter-reset:step;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (max-width:820px){ .wd-flow{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .wd-flow{grid-template-columns:1fr} }
.wd-flow li{
  counter-increment:step; position:relative;
  border-top:1px solid var(--ink);
  padding:34px 30px 30px 0;
  display:flex; flex-direction:column; gap:12px;
}
.wd-flow li::after{
  content:""; position:absolute; top:-6px; left:0;
  width:11px; height:11px; background:var(--bone);
  border:1px solid var(--ink); transform:rotate(45deg);
  transition:background .2s ease, border-color .2s ease;
}
.wd-flow li:last-child::after{background:var(--red); border-color:var(--red)}
.wd-flow li::before{
  content:counter(step,decimal-leading-zero);
  font-weight:800; font-size:clamp(38px,3.6vw,56px);
  line-height:1; letter-spacing:-.045em; color:var(--ink); opacity:.13;
  transition:opacity .2s ease, color .2s ease;
}
.wd-flow-tag{
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--red);
}
.wd-flow li p{font-size:14px; line-height:1.5; color:var(--ink3); margin:0; max-width:30ch}
.wd-flow li:hover::before{opacity:.3; color:var(--red)}
.wd-flow li:hover::after{background:var(--red); border-color:var(--red)}

.ws-specs{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--rule);
}
@media (max-width:820px){ .ws-specs{grid-template-columns:repeat(2,minmax(0,1fr))} }
.ws-spec{
  padding:16px 18px;
  border-right:1px solid var(--rule);
  display:flex; flex-direction:column; gap:4px;
  background:var(--paper);
}
.ws-spec:last-child{border-right:none}
@media (max-width:820px){
  .ws-spec{border-bottom:1px solid var(--rule)}
  .ws-spec:nth-child(2n){border-right:none}
  .ws-spec:nth-last-child(-n+2){border-bottom:none}
}
.ws-spec-k{
  font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink4);
}
.ws-spec-v{font-weight:700; font-size:18px; color:var(--ink); letter-spacing:-.01em}
.ws-spec--price{background:var(--red); border-color:var(--red)}
.ws-spec--price .ws-spec-k{color:#fff; opacity:.85}
.ws-spec--price .ws-spec-v{color:#fff}


/* ─── 005 · questions ─── */
.vf-faq-grid{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,5vw,96px); align-items:start;
}
@media (max-width:900px){ .vf-faq-grid{grid-template-columns:1fr} }
.vf-faq-head{display:flex; flex-direction:column; gap:20px}
.vf-faq-head .h2{font-size:clamp(32px,4vw,60px)}
.vf-faq-head em{font-style:italic; font-weight:800; color:var(--red)}
.vf-faq-head .lead{font-size:clamp(16px,1.3vw,19px)}
@media (min-width:901px){ .vf-faq-head{position:sticky; top:104px} }
.vf-faq{border-top:1px solid var(--ink)}
.vf-q{border-bottom:1px solid var(--ink)}
.vf-q summary{
  list-style:none; cursor:pointer;
  display:grid; grid-template-columns:40px minmax(0,1fr) 20px; align-items:center; gap:12px;
  padding:20px 0;
  font-weight:800; font-size:clamp(18px,1.6vw,22px); letter-spacing:-.02em; line-height:1.2;
  transition:color .15s ease;
}
.vf-q summary::-webkit-details-marker{display:none}
.vf-q summary:hover{color:var(--red)}
.vf-q-n{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.12em; color:var(--red)}
.vf-q-ic{position:relative; width:14px; height:14px; justify-self:end}
.vf-q-ic::before, .vf-q-ic::after{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:1.5px; background:currentColor; transform:translateY(-50%);
  transition:transform .2s ease;
}
.vf-q-ic::after{transform:translateY(-50%) rotate(90deg)}
.vf-q[open] .vf-q-ic::after{transform:translateY(-50%) rotate(0)}
.vf-q-a{padding:0 32px 24px 52px; font-size:15.5px; line-height:1.55; color:var(--ink3)}
.vf-q-a p{margin:0; max-width:60ch}
.vf-q-a a{color:var(--ink); text-decoration-color:var(--red); text-underline-offset:3px}
.vf-q-a a:hover{color:var(--red)}
@media (max-width:560px){
  .vf-q summary{grid-template-columns:28px minmax(0,1fr) 16px}
  .vf-q-a{padding:0 0 22px 40px}
}


/* ─── closing band (Mont3 .wd-cta): var(--ink) on var(--bone), flips with the theme ─── */
.wd-cta{background:var(--ink); color:var(--bone); padding:clamp(60px,8vw,124px) 0}
.wd-cta-inner{display:flex; flex-direction:column; align-items:flex-start; gap:clamp(18px,2.6vw,28px)}
.wd-cta-tag{
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--red);
}
.wd-cta-h{
  margin:0; color:inherit; text-wrap:balance;
  font-weight:800;
  font-size:clamp(min(52px,12.5vw),9vw,128px); line-height:.9; letter-spacing:-.045em;
}
.wd-cta-h em{font-style:normal; color:var(--red)}
.wd-cta-lead{color:var(--bone); opacity:.78; max-width:46ch}
.wd-cta-actions{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:clamp(18px,3vw,34px); margin-top:clamp(10px,1.6vw,18px);
}
.wd-cta-mail{
  font-family:var(--mono); font-size:clamp(14px,1.5vw,17px); color:inherit;
  text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:3px;
  opacity:.9; transition:color .15s ease, opacity .15s ease;
}
.wd-cta-mail:hover{color:var(--red); opacity:1}
.wd-cta .btn{background:var(--bone); color:var(--ink); border-color:var(--bone)}
.wd-cta .btn:hover{background:var(--red); color:#fff; border-color:var(--red)}


/* ─── footer ─── */
.footer{background:var(--bone2); color:var(--ink); padding:clamp(48px,6vw,96px) 0 32px}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:clamp(24px,3vw,48px)}
.footer-brand{display:flex; flex-direction:column; gap:18px}
.footer-brand-row{display:flex; align-items:center; gap:14px}
.footer-brand-row svg{width:48px; height:auto; display:block}
.footer-brand .display-sm{font-weight:800; font-size:48px; letter-spacing:-.04em; line-height:1}
.footer-brand .display-sm em{color:var(--red); font-style:normal}
.footer-brand p{margin:0; max-width:34ch; color:var(--ink3); font-size:14px; line-height:1.5}
.footer h2{
  margin:0 0 14px; font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink4); font-weight:500;
}
.footer h2::before{
  content:""; display:inline-block;
  width:5px; height:5px; background:var(--red); margin-right:8px;
  vertical-align:2px;
}
.footer ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; font-size:14px}
.footer ul a{display:inline-block; padding-block:4px; margin-block:-4px; text-decoration:none; opacity:.8; transition:opacity .15s, color .15s}
.footer ul a:hover{opacity:1; color:var(--red)}
.footer-bottom{
  margin-top:clamp(48px,6vw,80px); padding-top:24px;
  border-top:1px solid var(--rule);
  display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink4);
}
.footer-bottom .ver{color:var(--red); font-weight:600}
@media (max-width:820px){ .footer-grid{grid-template-columns:1fr 1fr; gap:28px} }
@media (max-width:560px){
  .footer{padding:40px 0 24px}
  .footer-grid{gap:22px 18px}
  .footer-brand{grid-column:1 / -1; gap:10px; margin-bottom:4px}
  .footer-brand-row svg{width:32px}
  .footer-brand .display-sm{font-size:28px}
  .footer-brand p{font-size:12px; line-height:1.45; max-width:36ch}
  .footer h2{margin:0 0 8px; font-size:9.5px; letter-spacing:.16em}
  .footer ul{gap:5px; font-size:12.5px}
  .footer-bottom{
    margin-top:32px; padding-top:16px; gap:6px;
    flex-direction:column; align-items:flex-start;
    font-size:9.5px; letter-spacing:.12em;
  }
}


/* ─── motion ─── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *, *::before, *::after{animation:none !important; transition:none !important}
  .mobile-nav{transform:none}
}