/* ==========================================================================
   VANDFORT beta landing - APPROVED COMPOSITION

   GENERATED FILE. DO NOT HAND-EDIT.
   Source:  docs/landing-artifact/styles.css (frozen, see its APPROVED.md)
   sha256:  2a0c96dd9cd24dede6efc4851e53c4c907fa6928c5056727a6ea6240ceaddd15
   Regenerate: python apps/web/scripts/port-approved-landing.py

   Every rule is scoped to :is(.vf-landing, .vf-chrome), because this
   stylesheet is linked on every beta route and the artifact's bare `body`,
   `p` and `img` rules would otherwise restyle /audit and the portal. Custom
   properties stay on :root, where they are inert unless referenced.

   Each rule is emitted twice, descendant and compound: `.vf-chrome` sits ON
   the header, footer and skip link rather than around them, because a wrapper
   would become the sticky header's containing block and stop it sticking.
   ========================================================================== */

/* ==========================================================================
   VANDFORT landing - visual system implementation
   Palette, type scale, grid and image rules follow
   VandFort_Website_Design_Visual_System_Guide.pdf (17pp).
   ========================================================================== */

:root{
  /* --- palette (guide, section 3) --- */
  --ivory:      #FAF8F4;   /* main page background      */
  --glass:      #FFFDFC;   /* panels, glass structures  */
  --orange:     #F47A20;   /* graphic accents, light    */
  --energy:     #FF8A2A;   /* light cores, gradients    */
  --gold:       #F6B83F;   /* AI energy, glass edges    */
  --champagne:  #F5D7A6;   /* reflections, halos        */
  --charcoal:   #252525;   /* primary text              */
  --gray:       #6B6966;   /* body / supporting text    */
  --hairline:   #E8E1D9;   /* dividers, outlines        */

  /* Accessible orange inks. #F47A20 is 2.6:1 on ivory and cannot carry text,
     so it stays a graphic colour. These are its text-safe siblings.        */
  --orange-ink:     #B0540B;  /* 4.8:1 on ivory - eyebrows, small text      */
  --orange-display: #C55D0C;  /* 3.9:1 on ivory - large display emphasis    */
  --orange-btn:     #C05509;  /* 4.6:1 vs white - primary button fill       */

  /* --- layout (guide, section 5) --- */
  --gutter: 12px;
  --gap:    8px;
  --colw:   1fr;
  --card:   18px;
  --sec-pad: 72px;
}

@media (min-width: 768px){
  :root{ --gutter: 32px; --gap: 20px; --sec-pad: 96px; }
}
@media (min-width: 1200px){
  :root{ --gutter: 48px; --gap: 24px; --colw: 86px; --sec-pad: 112px; }
}

/* --------------------------------------------------------------- reset */
:is(.vf-landing, .vf-chrome) *, :is(.vf-landing, .vf-chrome), :is(.vf-landing, .vf-chrome) *::before, :is(.vf-landing, .vf-chrome)::before, :is(.vf-landing, .vf-chrome) *::after, :is(.vf-landing, .vf-chrome)::after{ box-sizing:border-box; }
:is(.vf-landing, .vf-chrome){ -webkit-text-size-adjust:100%; }
:is(.vf-landing, .vf-chrome){
  margin:0;
  background:var(--ivory);
  color:var(--charcoal);
  font-family: Inter, "Neue Haas Grotesk Display Pro", "Helvetica Neue",
               Helvetica, Arial, "Segoe UI", sans-serif;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
:is(.vf-landing, .vf-chrome) img{ display:block; max-width:100%; height:auto; }
:is(.vf-landing, .vf-chrome) h1, :is(.vf-landing, .vf-chrome) h2, :is(.vf-landing, .vf-chrome) p, :is(.vf-landing, .vf-chrome) ul, :is(.vf-landing, .vf-chrome) ol, :is(.vf-landing, .vf-chrome) figure, :is(.vf-landing, .vf-chrome) figcaption{ margin:0; }
:is(.vf-landing, .vf-chrome) ul, :is(.vf-landing, .vf-chrome) ol{ list-style:none; padding:0; }
:is(.vf-landing, .vf-chrome) a{ color:inherit; text-decoration:none; }

:is(.vf-landing, .vf-chrome) .skip, :is(.vf-landing, .vf-chrome).skip{
  position:absolute; left:16px; top:-64px; z-index:100;
  background:var(--charcoal); color:#fff; padding:12px 18px; border-radius:0 0 10px 10px;
  transition:top .16s ease;
}
:is(.vf-landing, .vf-chrome) .skip:focus, :is(.vf-landing, .vf-chrome).skip:focus{ top:0; }

/* --------------------------------------------- 12 column bleed grid */
:is(.vf-landing, .vf-chrome) .layout, :is(.vf-landing, .vf-chrome).layout{
  display:grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [main-start] repeat(12, minmax(0, var(--colw))) [main-end]
    minmax(var(--gutter), 1fr) [full-end];
  column-gap: var(--gap);
}
:is(.vf-landing, .vf-chrome) .layout > *, :is(.vf-landing, .vf-chrome).layout > *{ grid-column: main-start / main-end; }

/* ------------------------------------------------------- typography */
:is(.vf-landing, .vf-chrome) .display, :is(.vf-landing, .vf-chrome).display{
  font-size: clamp(38px, 6.4vw, 60px);
  line-height:1.02;
  letter-spacing:-0.028em;
  font-weight:600;
  margin:0;
  text-wrap:balance;
}
:is(.vf-landing, .vf-chrome) .display em, :is(.vf-landing, .vf-chrome).display em{ font-style:normal; color:var(--orange-display); }

:is(.vf-landing, .vf-chrome) .h2, :is(.vf-landing, .vf-chrome).h2{
  font-size: clamp(28px, 4.2vw, 43px);
  line-height:1.08;
  letter-spacing:-0.024em;
  font-weight:600;
  max-width:17ch;
  text-wrap:balance;
}

:is(.vf-landing, .vf-chrome) .eyebrow, :is(.vf-landing, .vf-chrome).eyebrow{
  font-size:12px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--orange-ink);
  margin-bottom:20px;
}

:is(.vf-landing, .vf-chrome) .body, :is(.vf-landing, .vf-chrome).body{
  font-size: clamp(16px,1.15vw,17px);
  line-height:1.62;
  color:var(--gray);
  max-width:46ch;
}
:is(.vf-landing, .vf-chrome) .lede, :is(.vf-landing, .vf-chrome).lede{
  font-size: clamp(17px,1.35vw,19px);
  line-height:1.6;
  color:var(--gray);
  max-width:48ch;
}
:is(.vf-landing, .vf-chrome) .micro, :is(.vf-landing, .vf-chrome).micro{
  font-size:13.5px;
  line-height:1.5;
  color:var(--gray);
  max-width:46ch;
}
:is(.vf-landing, .vf-chrome) .micro--rule, :is(.vf-landing, .vf-chrome).micro--rule{
  margin-top:24px; padding-top:18px;
  border-top:1px solid var(--hairline);
  max-width:50ch;
}

/* ------------------------------------------------------------ buttons */
:is(.vf-landing, .vf-chrome) .btn, :is(.vf-landing, .vf-chrome).btn{
  display:inline-flex; align-items:center; gap:10px;
  min-height:52px; padding:0 26px;
  border-radius:999px;
  font-size:16px; font-weight:600; letter-spacing:-0.005em;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
:is(.vf-landing, .vf-chrome) .btn--primary, :is(.vf-landing, .vf-chrome).btn--primary{
  background:var(--orange-btn);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 10px 26px -8px rgba(244,122,32,.62),
    0 2px 6px rgba(37,37,37,.10);
}
:is(.vf-landing, .vf-chrome) .btn--primary::after, :is(.vf-landing, .vf-chrome).btn--primary::after{ content:"→"; font-size:15px; line-height:1; }
:is(.vf-landing, .vf-chrome) .btn--primary:hover, :is(.vf-landing, .vf-chrome).btn--primary:hover{ background:#A94A07; transform:translateY(-1px); }
:is(.vf-landing, .vf-chrome) .btn--sm, :is(.vf-landing, .vf-chrome).btn--sm{ min-height:44px; padding:0 20px; font-size:14.5px; }
:is(.vf-landing, .vf-chrome) .btn--lg, :is(.vf-landing, .vf-chrome).btn--lg{ min-height:58px; padding:0 32px; font-size:17px; }

:is(.vf-landing, .vf-chrome) .link-quiet, :is(.vf-landing, .vf-chrome).link-quiet{
  font-size:15px; color:var(--gray);
  border-bottom:1px solid var(--hairline);
  padding-bottom:2px;
  transition:color .18s ease, border-color .18s ease;
}
:is(.vf-landing, .vf-chrome) .link-quiet:hover, :is(.vf-landing, .vf-chrome).link-quiet:hover{ color:var(--charcoal); border-color:var(--orange); }

:is(.vf-landing, .vf-chrome) .cta-row, :is(.vf-landing, .vf-chrome).cta-row{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }

:is(.vf-landing, .vf-chrome) :where(a,button):focus-visible, :is(.vf-landing, .vf-chrome):where(a,button):focus-visible{
  outline:3px solid var(--orange-ink);
  outline-offset:4px;
  border-radius:6px;
}

/* =============================================================== HEADER */
:is(.vf-landing, .vf-chrome) .site-head, :is(.vf-landing, .vf-chrome).site-head{
  position:sticky; top:0; z-index:40;
  background:rgba(250,248,244,.88);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid rgba(232,225,217,.75);
}
:is(.vf-landing, .vf-chrome) .site-head__in, :is(.vf-landing, .vf-chrome).site-head__in{ align-items:center; padding-block:16px; }
:is(.vf-landing, .vf-chrome) .site-head__in > .brand, :is(.vf-landing, .vf-chrome).site-head__in > .brand{ grid-column: main-start / span 6; }
:is(.vf-landing, .vf-chrome) .site-head__in > .site-nav, :is(.vf-landing, .vf-chrome).site-head__in > .site-nav{ grid-column: span 6 / main-end; }

:is(.vf-landing, .vf-chrome) .brand, :is(.vf-landing, .vf-chrome).brand{ display:flex; align-items:center; gap:10px; }
:is(.vf-landing, .vf-chrome) .brand__mark, :is(.vf-landing, .vf-chrome).brand__mark{ width:24px; height:auto; }
:is(.vf-landing, .vf-chrome) .brand__word, :is(.vf-landing, .vf-chrome).brand__word{ width:100px; height:auto; }

:is(.vf-landing, .vf-chrome) .site-nav, :is(.vf-landing, .vf-chrome).site-nav{ display:flex; align-items:center; justify-content:flex-end; gap:22px; }

/* ================================================================ HERO */
:is(.vf-landing, .vf-chrome) .hero, :is(.vf-landing, .vf-chrome).hero{
  position:relative;
  align-items:center;
  padding-block: 52px 60px;
  overflow:hidden;
}
/* stacked: copy first, then the visual - never behind it */
:is(.vf-landing, .vf-chrome) .hero__copy, :is(.vf-landing, .vf-chrome).hero__copy{
  grid-column: main-start / main-end;
  grid-row:1;
  position:relative; z-index:2;
}
:is(.vf-landing, .vf-chrome) .hero__media, :is(.vf-landing, .vf-chrome).hero__media{
  grid-column: full-start / full-end;
  grid-row:2;
  position:relative;
  margin-top:40px;
  z-index:1;
}
:is(.vf-landing, .vf-chrome) .hero__media img, :is(.vf-landing, .vf-chrome).hero__media img{ width:100%; height:auto; }
:is(.vf-landing, .vf-chrome) .hero__veil, :is(.vf-landing, .vf-chrome).hero__veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, var(--ivory) 0%, rgba(250,248,244,0) 30%);
  pointer-events:none;
}

:is(.vf-landing, .vf-chrome) .display + .lede, :is(.vf-landing, .vf-chrome).display + .lede{ margin-top:24px; }

/* the audit terms sit on a hairline that carries warm light into the room */
:is(.vf-landing, .vf-chrome) .facts, :is(.vf-landing, .vf-chrome).facts{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:14px 34px;
  margin-top:32px; padding-top:20px;
  border-top:1px solid var(--hairline);
  position:relative;
}
:is(.vf-landing, .vf-chrome) .facts li, :is(.vf-landing, .vf-chrome).facts li{ display:flex; align-items:baseline; gap:8px; }
:is(.vf-landing, .vf-chrome) .facts strong, :is(.vf-landing, .vf-chrome).facts strong{ font-size:20px; font-weight:600; letter-spacing:-0.02em; }
:is(.vf-landing, .vf-chrome) .facts span, :is(.vf-landing, .vf-chrome).facts span{ font-size:13.5px; color:var(--gray); }
:is(.vf-landing, .vf-chrome) .facts__rail, :is(.vf-landing, .vf-chrome).facts__rail{ display:none; }

:is(.vf-landing, .vf-chrome) .hero .cta-row, :is(.vf-landing, .vf-chrome).hero .cta-row{ margin-top:32px; }
:is(.vf-landing, .vf-chrome) .hero .micro, :is(.vf-landing, .vf-chrome).hero .micro{ margin-top:16px; }

/* ======================================================= 2. LEAK BAND */
:is(.vf-landing, .vf-chrome) .sec, :is(.vf-landing, .vf-chrome).sec{ padding-block: var(--sec-pad); position:relative; }

:is(.vf-landing, .vf-chrome) .leak__copy, :is(.vf-landing, .vf-chrome).leak__copy{ grid-column: main-start / main-end; grid-row:2; margin-top:32px; }
:is(.vf-landing, .vf-chrome) .leak__copy .body + .body, :is(.vf-landing, .vf-chrome).leak__copy .body + .body{ margin-top:16px; }
:is(.vf-landing, .vf-chrome) .leak__copy .h2 + .body, :is(.vf-landing, .vf-chrome).leak__copy .h2 + .body{ margin-top:22px; }

:is(.vf-landing, .vf-chrome) .leak__fig, :is(.vf-landing, .vf-chrome).leak__fig{
  grid-column: full-start / full-end;
  grid-row:1;
  position:relative;
}
:is(.vf-landing, .vf-chrome) .leak__fig img, :is(.vf-landing, .vf-chrome).leak__fig img{ width:100%; }

:is(.vf-landing, .vf-chrome) .seam, :is(.vf-landing, .vf-chrome).seam, :is(.vf-landing, .vf-chrome) .break, :is(.vf-landing, .vf-chrome).break{ position:absolute; pointer-events:none; }
:is(.vf-landing, .vf-chrome) .seam, :is(.vf-landing, .vf-chrome).seam{
  top:30%; height:32%; width:1px;
  background:linear-gradient(180deg, rgba(37,37,37,0), rgba(37,37,37,.26) 26%, rgba(37,37,37,.26) 74%, rgba(37,37,37,0));
}
:is(.vf-landing, .vf-chrome) .seam--a, :is(.vf-landing, .vf-chrome).seam--a{ left:27.5%; }
:is(.vf-landing, .vf-chrome) .seam--b, :is(.vf-landing, .vf-chrome).seam--b{ left:63%; }

/* the node marks the joint where the light escapes; the plume in the
   photograph is the connector down to the caption. */
:is(.vf-landing, .vf-chrome) .break, :is(.vf-landing, .vf-chrome).break{ left:51.5%; top:45.5%; width:0; height:0; }
:is(.vf-landing, .vf-chrome) .break i, :is(.vf-landing, .vf-chrome).break i{
  position:absolute; left:0; top:0; width:12px; height:12px;
  transform:translate(-50%,-50%);
  border-radius:50%; background:var(--orange);
  box-shadow:0 0 0 5px rgba(244,122,32,.22), 0 0 18px 4px rgba(255,138,42,.55);
}
:is(.vf-landing, .vf-chrome) .break__cap, :is(.vf-landing, .vf-chrome).break__cap{
  position:absolute; left:51.5%; top:90%;
  transform:translateX(-50%);
  white-space:nowrap;
  font-size:11.5px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--orange-ink);
  background:rgba(255,253,252,.97);
  border:1px solid var(--hairline);
  border-radius:999px;
  padding:7px 15px;
}

/* ================================================== 3. AUDIT OUTPUTS */
:is(.vf-landing, .vf-chrome) .out__head, :is(.vf-landing, .vf-chrome).out__head{ grid-column: main-start / main-end; }
:is(.vf-landing, .vf-chrome) .out__sub, :is(.vf-landing, .vf-chrome).out__sub{ grid-column: main-start / main-end; margin-top:20px; }
:is(.vf-landing, .vf-chrome) .out__fig, :is(.vf-landing, .vf-chrome).out__fig{ grid-column: main-start / main-end; position:relative; margin-top:44px; }
:is(.vf-landing, .vf-chrome) .out__fig img, :is(.vf-landing, .vf-chrome).out__fig img{ width:100%; border-radius:var(--card); }

:is(.vf-landing, .vf-chrome) .out__pins, :is(.vf-landing, .vf-chrome).out__pins{ position:absolute; inset:0; }
:is(.vf-landing, .vf-chrome) .pin, :is(.vf-landing, .vf-chrome).pin{ position:absolute; display:flex; flex-direction:column; gap:6px; }
:is(.vf-landing, .vf-chrome) .pin b, :is(.vf-landing, .vf-chrome).pin b{ font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--orange-ink); }
:is(.vf-landing, .vf-chrome) .pin strong, :is(.vf-landing, .vf-chrome).pin strong{ font-size:16px; font-weight:600; letter-spacing:-0.015em; line-height:1.18; }
:is(.vf-landing, .vf-chrome) .pin em, :is(.vf-landing, .vf-chrome).pin em{ font-style:normal; font-size:13px; line-height:1.42; color:var(--gray); }

:is(.vf-landing, .vf-chrome) .out__also, :is(.vf-landing, .vf-chrome).out__also{
  grid-column: main-start / main-end;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px;
  margin-top:32px; padding-top:20px;
  border-top:1px solid var(--hairline);
  font-size:14px; color:var(--gray);
}
:is(.vf-landing, .vf-chrome) .out__also-label, :is(.vf-landing, .vf-chrome).out__also-label{
  font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--charcoal); margin-right:4px;
}
:is(.vf-landing, .vf-chrome) .out__also span:not(.out__also-label), :is(.vf-landing, .vf-chrome).out__also span:not(.out__also-label){ display:flex; align-items:center; gap:7px; }
:is(.vf-landing, .vf-chrome) .out__also span:not(.out__also-label)::before, :is(.vf-landing, .vf-chrome).out__also span:not(.out__also-label)::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--orange); flex:none;
}

/* ============================================= 4. AUDIT, BUILD, RUN */
:is(.vf-landing, .vf-chrome) .sec--path, :is(.vf-landing, .vf-chrome).sec--path{ padding-block: calc(var(--sec-pad) * .5); }
:is(.vf-landing, .vf-chrome) .path__shell, :is(.vf-landing, .vf-chrome).path__shell{
  grid-column: full-start / full-end;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(115% 85% at 82% 22%, rgba(246,184,63,.17) 0%, rgba(246,184,63,0) 58%),
    linear-gradient(168deg, #FCF8F1 0%, #F6EEE3 100%);
  border-block:1px solid var(--hairline);
  padding: 56px 0;
}
:is(.vf-landing, .vf-chrome) .path__copy, :is(.vf-landing, .vf-chrome).path__copy{ padding-inline: var(--gutter); }
:is(.vf-landing, .vf-chrome) .path__copy .h2 + .body, :is(.vf-landing, .vf-chrome).path__copy .h2 + .body{ margin-top:22px; }

:is(.vf-landing, .vf-chrome) .path__steps, :is(.vf-landing, .vf-chrome).path__steps{ margin-top:30px; display:flex; flex-direction:column; }
:is(.vf-landing, .vf-chrome) .path__steps li, :is(.vf-landing, .vf-chrome).path__steps li{
  display:grid; grid-template-columns:auto 1fr; gap:4px 16px;
  padding:16px 0;
  border-top:1px solid rgba(232,225,217,.9);
  position:relative;
}
:is(.vf-landing, .vf-chrome) .path__steps li:last-child, :is(.vf-landing, .vf-chrome).path__steps li:last-child{ border-bottom:1px solid rgba(232,225,217,.9); }
:is(.vf-landing, .vf-chrome) .path__steps b, :is(.vf-landing, .vf-chrome).path__steps b{
  grid-row:1 / span 2;
  font-size:11px; font-weight:700; letter-spacing:.14em;
  color:var(--orange-ink); padding-top:5px;
}
:is(.vf-landing, .vf-chrome) .path__steps strong, :is(.vf-landing, .vf-chrome).path__steps strong{ font-size:19px; font-weight:600; letter-spacing:-0.02em; }
:is(.vf-landing, .vf-chrome) .path__steps em, :is(.vf-landing, .vf-chrome).path__steps em{ font-style:normal; font-size:14.5px; color:var(--gray); }
/* the same warm light, travelling down the stage rail */
:is(.vf-landing, .vf-chrome) .path__steps li::before, :is(.vf-landing, .vf-chrome).path__steps li::before{
  content:""; position:absolute; left:-14px; top:-1px; width:2px; height:100%;
  background:linear-gradient(180deg, var(--gold), rgba(246,184,63,.22));
  opacity:0;
}
:is(.vf-landing, .vf-chrome) .path__fig, :is(.vf-landing, .vf-chrome).path__fig{ position:relative; margin-top:40px; }
:is(.vf-landing, .vf-chrome) .path__fig img, :is(.vf-landing, .vf-chrome).path__fig img{ width:100%; }

:is(.vf-landing, .vf-chrome) .node, :is(.vf-landing, .vf-chrome).node{
  position:absolute; width:12px; height:12px; border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 5px rgba(255,138,42,.18), 0 0 18px 4px rgba(255,138,42,.5);
  transform:translate(-50%,-50%);
}
:is(.vf-landing, .vf-chrome) .node--1, :is(.vf-landing, .vf-chrome).node--1{ left:29%; top:79%; }
:is(.vf-landing, .vf-chrome) .node--2, :is(.vf-landing, .vf-chrome).node--2{ left:52%; top:60%; }
:is(.vf-landing, .vf-chrome) .node--3, :is(.vf-landing, .vf-chrome).node--3{ left:83%; top:22%; }

/* ================================================= 5. NAMED SYSTEMS */
:is(.vf-landing, .vf-chrome) .sys__media, :is(.vf-landing, .vf-chrome).sys__media{
  grid-column: full-start / full-end;
  grid-row:2;
  position:relative;
  margin-top:36px;
}
:is(.vf-landing, .vf-chrome) .sys__media img, :is(.vf-landing, .vf-chrome).sys__media img{ width:100%; }
:is(.vf-landing, .vf-chrome) .sys__veil, :is(.vf-landing, .vf-chrome).sys__veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, var(--ivory) 0%, rgba(250,248,244,0) 26%);
  pointer-events:none;
}
:is(.vf-landing, .vf-chrome) .sys__copy, :is(.vf-landing, .vf-chrome).sys__copy{ grid-column: main-start / main-end; grid-row:1; }
:is(.vf-landing, .vf-chrome) .sys__copy .h2 + .body, :is(.vf-landing, .vf-chrome).sys__copy .h2 + .body{ margin-top:22px; }

:is(.vf-landing, .vf-chrome) .sys__list, :is(.vf-landing, .vf-chrome).sys__list{ margin-top:30px; }
:is(.vf-landing, .vf-chrome) .sys__list li, :is(.vf-landing, .vf-chrome).sys__list li{
  display:grid; grid-template-columns:auto 1fr; gap:16px;
  padding:15px 0;
  border-top:1px solid var(--hairline);
}
:is(.vf-landing, .vf-chrome) .sys__list li:last-child, :is(.vf-landing, .vf-chrome).sys__list li:last-child{ border-bottom:1px solid var(--hairline); }
:is(.vf-landing, .vf-chrome) .sys__list b, :is(.vf-landing, .vf-chrome).sys__list b{
  font-size:11px; font-weight:700; letter-spacing:.14em;
  color:var(--orange-ink); padding-top:5px;
}
:is(.vf-landing, .vf-chrome) .sys__list div, :is(.vf-landing, .vf-chrome).sys__list div{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; }
:is(.vf-landing, .vf-chrome) .sys__list strong, :is(.vf-landing, .vf-chrome).sys__list strong{ font-size:17.5px; font-weight:600; letter-spacing:-0.018em; }
:is(.vf-landing, .vf-chrome) .sys__list span, :is(.vf-landing, .vf-chrome).sys__list span{
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gray);
}
:is(.vf-landing, .vf-chrome) .sys__list em, :is(.vf-landing, .vf-chrome).sys__list em{ font-style:normal; font-size:14.5px; color:var(--gray); flex-basis:100%; }

/* ============================================ 6. PROOF AND AUTONOMY */
:is(.vf-landing, .vf-chrome) .proof__fig, :is(.vf-landing, .vf-chrome).proof__fig{ grid-column: full-start / full-end; grid-row:2; margin-top:36px; position:relative; }
:is(.vf-landing, .vf-chrome) .proof__fig img, :is(.vf-landing, .vf-chrome).proof__fig img{ width:100%; }
:is(.vf-landing, .vf-chrome) .proof__copy, :is(.vf-landing, .vf-chrome).proof__copy{ grid-column: main-start / main-end; grid-row:1; }
:is(.vf-landing, .vf-chrome) .proof__copy .h2 + .body, :is(.vf-landing, .vf-chrome).proof__copy .h2 + .body{ margin-top:22px; }

:is(.vf-landing, .vf-chrome) .rung-label, :is(.vf-landing, .vf-chrome).rung-label{
  margin-top:30px;
  font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--charcoal);
}
:is(.vf-landing, .vf-chrome) .rungs, :is(.vf-landing, .vf-chrome).rungs{ margin-top:14px; position:relative; padding-left:20px; }
/* the rail widens as the boundary widens */
:is(.vf-landing, .vf-chrome) .rungs::before, :is(.vf-landing, .vf-chrome).rungs::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px;
  border-radius:3px;
  background:linear-gradient(180deg, var(--hairline) 0%, rgba(246,184,63,.7) 45%, var(--orange) 100%);
}
:is(.vf-landing, .vf-chrome) .rungs li, :is(.vf-landing, .vf-chrome).rungs li{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; padding:8px 0; }
:is(.vf-landing, .vf-chrome) .rungs b, :is(.vf-landing, .vf-chrome).rungs b{ font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--orange-ink); }
:is(.vf-landing, .vf-chrome) .rungs strong, :is(.vf-landing, .vf-chrome).rungs strong{ font-size:15.5px; font-weight:600; }
:is(.vf-landing, .vf-chrome) .rungs em, :is(.vf-landing, .vf-chrome).rungs em{ font-style:normal; font-size:14.5px; color:var(--gray); }

/* ================================================== 7. CLOSING BAND */
:is(.vf-landing, .vf-chrome) .sec--close, :is(.vf-landing, .vf-chrome).sec--close{ padding:0; position:relative; overflow:hidden; }
:is(.vf-landing, .vf-chrome) .close__media, :is(.vf-landing, .vf-chrome).close__media{ grid-column: full-start / full-end; grid-row:1; position:relative; }
:is(.vf-landing, .vf-chrome) .close__media img, :is(.vf-landing, .vf-chrome).close__media img{ width:100%; }
:is(.vf-landing, .vf-chrome) .close__veil, :is(.vf-landing, .vf-chrome).close__veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, var(--ivory) 0%, rgba(250,248,244,.5) 20%, rgba(250,248,244,0) 44%);
}
:is(.vf-landing, .vf-chrome) .close__copy, :is(.vf-landing, .vf-chrome).close__copy{
  grid-column: main-start / main-end;
  grid-row:2;
  padding-block: 40px 76px;
  position:relative; z-index:2;
}
:is(.vf-landing, .vf-chrome) .h2--close, :is(.vf-landing, .vf-chrome).h2--close{ max-width:14ch; }
:is(.vf-landing, .vf-chrome) .close__copy .h2 + .body, :is(.vf-landing, .vf-chrome).close__copy .h2 + .body{ margin-top:20px; }
:is(.vf-landing, .vf-chrome) .close__copy .cta-row, :is(.vf-landing, .vf-chrome).close__copy .cta-row{ margin-top:30px; }
:is(.vf-landing, .vf-chrome) .close__copy .micro, :is(.vf-landing, .vf-chrome).close__copy .micro{ margin-top:16px; }

/* ============================================================== FOOTER */
:is(.vf-landing, .vf-chrome) .site-foot, :is(.vf-landing, .vf-chrome).site-foot{ border-top:1px solid var(--hairline); padding-block:32px; background:var(--ivory); }
:is(.vf-landing, .vf-chrome) .site-foot__in, :is(.vf-landing, .vf-chrome).site-foot__in{ align-items:center; row-gap:12px; }
:is(.vf-landing, .vf-chrome) .foot__word, :is(.vf-landing, .vf-chrome).foot__word{ width:92px; height:auto; opacity:.85; grid-column: main-start / main-end; }
:is(.vf-landing, .vf-chrome) .foot__tag, :is(.vf-landing, .vf-chrome).foot__tag{ font-size:13.5px; color:var(--gray); grid-column: main-start / main-end; }
:is(.vf-landing, .vf-chrome) .site-foot__in .link-quiet, :is(.vf-landing, .vf-chrome).site-foot__in .link-quiet{ grid-column: main-start / main-end; justify-self:start; font-size:13.5px; }


/* ==========================================================================
   >= 768px  - tablet
   ========================================================================== */
@media (min-width: 768px){

  :is(.vf-landing, .vf-chrome) .brand__mark, :is(.vf-landing, .vf-chrome).brand__mark{ width:27px; }
  :is(.vf-landing, .vf-chrome) .brand__word, :is(.vf-landing, .vf-chrome).brand__word{ width:112px; }

  :is(.vf-landing, .vf-chrome) .hero, :is(.vf-landing, .vf-chrome).hero{ padding-block: 64px 72px; }
  :is(.vf-landing, .vf-chrome) .hero__copy, :is(.vf-landing, .vf-chrome).hero__copy{ grid-column: main-start / span 10; }
  :is(.vf-landing, .vf-chrome) .hero__media, :is(.vf-landing, .vf-chrome).hero__media{ margin-top:48px; }

  :is(.vf-landing, .vf-chrome) .out__head, :is(.vf-landing, .vf-chrome).out__head{ grid-column: main-start / span 8; }
  :is(.vf-landing, .vf-chrome) .out__sub, :is(.vf-landing, .vf-chrome).out__sub{ grid-column: span 8 / main-end; margin-top:24px; }

  :is(.vf-landing, .vf-chrome) .path__copy, :is(.vf-landing, .vf-chrome).path__copy{ padding-inline: 44px; }

  :is(.vf-landing, .vf-chrome) .foot__word, :is(.vf-landing, .vf-chrome).foot__word{ grid-column: main-start / span 4; }
  :is(.vf-landing, .vf-chrome) .foot__tag, :is(.vf-landing, .vf-chrome).foot__tag{ grid-column: span 4; justify-self:center; }
  :is(.vf-landing, .vf-chrome) .site-foot__in .link-quiet, :is(.vf-landing, .vf-chrome).site-foot__in .link-quiet{ grid-column: span 4 / main-end; justify-self:end; }
}

/* ==========================================================================
   >= 1000px - desktop composition
   ========================================================================== */
@media (min-width: 1000px){

  /* --- 1. hero: copy left, control room bleeding off the right edge --- */
  :is(.vf-landing, .vf-chrome) .hero, :is(.vf-landing, .vf-chrome).hero{
    padding-block:0;
    min-height: max(730px, calc(100vh - 78px));
    align-items:center;
  }
  :is(.vf-landing, .vf-chrome) .hero__copy, :is(.vf-landing, .vf-chrome).hero__copy{ grid-column: main-start / span 7; padding-block: 64px; }
  :is(.vf-landing, .vf-chrome) .hero__media, :is(.vf-landing, .vf-chrome).hero__media{
    grid-column: 9 / full-end;
    grid-row:1;
    align-self:stretch;
    margin-top:0;
  }
  :is(.vf-landing, .vf-chrome) .hero__media img, :is(.vf-landing, .vf-chrome).hero__media img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover; object-position:100% 50%;
  }
  :is(.vf-landing, .vf-chrome) .hero__veil, :is(.vf-landing, .vf-chrome).hero__veil{
    background:linear-gradient(90deg, var(--ivory) 0%, rgba(250,248,244,.55) 13%, rgba(250,248,244,0) 32%);
  }
  :is(.vf-landing, .vf-chrome) .facts__rail, :is(.vf-landing, .vf-chrome).facts__rail{
    display:block;
    position:absolute; left:100%; top:-1px; width:236px; height:1px;
    background:linear-gradient(90deg, var(--orange) 0%, rgba(246,184,63,.9) 44%, rgba(246,184,63,0) 100%);
  }
  :is(.vf-landing, .vf-chrome) .facts__rail i, :is(.vf-landing, .vf-chrome).facts__rail i{
    position:absolute; left:0; top:50%; width:9px; height:9px;
    transform:translate(-50%,-50%);
    border-radius:50%; background:var(--orange);
    box-shadow:0 0 0 4px rgba(244,122,32,.18), 0 0 14px 3px rgba(255,138,42,.5);
  }

  /* --- 2. leak: rail bleeding off the LEFT edge, copy right --- */
  :is(.vf-landing, .vf-chrome) .sec--leak, :is(.vf-landing, .vf-chrome).sec--leak{ align-items:center; }
  :is(.vf-landing, .vf-chrome) .leak__fig, :is(.vf-landing, .vf-chrome).leak__fig{ grid-column: full-start / 7; grid-row:1; }
  :is(.vf-landing, .vf-chrome) .leak__fig::after, :is(.vf-landing, .vf-chrome).leak__fig::after{      /* dissolve the right cut into the page */
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(90deg, rgba(250,248,244,0) 82%, var(--ivory) 100%);
  }
  :is(.vf-landing, .vf-chrome) .leak__copy, :is(.vf-landing, .vf-chrome).leak__copy{ grid-column: 8 / main-end; grid-row:1; margin-top:0; }

  /* --- 3. outputs: editorial head, one wide framework strip --- */
  :is(.vf-landing, .vf-chrome) .out__head, :is(.vf-landing, .vf-chrome).out__head{ grid-column: main-start / span 7; }
  :is(.vf-landing, .vf-chrome) .out__sub, :is(.vf-landing, .vf-chrome).out__sub{ grid-column: 9 / main-end; margin-top:6px; }
  :is(.vf-landing, .vf-chrome) .out__fig, :is(.vf-landing, .vf-chrome).out__fig{ grid-column: main-start / span 10; margin-top:52px; }
  :is(.vf-landing, .vf-chrome) .out__also, :is(.vf-landing, .vf-chrome).out__also{ margin-top:34px; }

  /* a thin sheet of warm light resting on each glass plate, so the artefact
     names stay legible over the photograph without becoming a card */
  :is(.vf-landing, .vf-chrome) .pin, :is(.vf-landing, .vf-chrome).pin{
    width:21%; top:auto; bottom:13%;
    padding:17px 18px 19px;
    border-radius:0 0 10px 10px;
    border-top:1px solid rgba(246,184,63,.85);
    background:linear-gradient(180deg, rgba(253,251,248,.95), rgba(253,251,248,.9));
  }
  :is(.vf-landing, .vf-chrome) .pin--1, :is(.vf-landing, .vf-chrome).pin--1{ left:8%; }
  :is(.vf-landing, .vf-chrome) .pin--2, :is(.vf-landing, .vf-chrome).pin--2{ left:31.5%; }
  :is(.vf-landing, .vf-chrome) .pin--3, :is(.vf-landing, .vf-chrome).pin--3{ left:54%; }

  /* --- 4. audit, build, run: one warm shell, one continuous beam --- */
  :is(.vf-landing, .vf-chrome) .sec--path, :is(.vf-landing, .vf-chrome).sec--path{ padding-block: calc(var(--sec-pad) * .5); }
  :is(.vf-landing, .vf-chrome) .path__shell, :is(.vf-landing, .vf-chrome).path__shell{
    display:grid;
    grid-template-columns:
      minmax(var(--gutter), 1fr)
      minmax(0, calc(var(--colw) * 6 + var(--gap) * 5))
      minmax(0, calc(var(--colw) * 6 + var(--gap) * 5))
      minmax(var(--gutter), 1fr);
    column-gap: var(--gap);
    align-items:center;
    padding:0;
  }
  :is(.vf-landing, .vf-chrome) .path__copy, :is(.vf-landing, .vf-chrome).path__copy{ grid-column:2; padding-block:64px; padding-inline:0; }
  :is(.vf-landing, .vf-chrome) .path__fig, :is(.vf-landing, .vf-chrome).path__fig{ grid-column:3 / -1; margin-top:0; }
  :is(.vf-landing, .vf-chrome) .path__fig img, :is(.vf-landing, .vf-chrome).path__fig img{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%),
                       linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 16%),
                       linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
    -webkit-mask-composite:source-in; mask-composite:intersect;
  }
  :is(.vf-landing, .vf-chrome) .path__steps li::before, :is(.vf-landing, .vf-chrome).path__steps li::before{ opacity:1; }
  :is(.vf-landing, .vf-chrome) .path__steps, :is(.vf-landing, .vf-chrome).path__steps{ padding-left:14px; }

  /* --- 5. systems: copy left, the engine dissolving off the right edge --- */
  :is(.vf-landing, .vf-chrome) .sec--sys, :is(.vf-landing, .vf-chrome).sec--sys{ align-items:center; }
  :is(.vf-landing, .vf-chrome) .sys__copy, :is(.vf-landing, .vf-chrome).sys__copy{ grid-column: main-start / span 6; grid-row:1; }
  :is(.vf-landing, .vf-chrome) .sys__media, :is(.vf-landing, .vf-chrome).sys__media{ grid-column: 9 / full-end; grid-row:1; margin-top:0; }
  :is(.vf-landing, .vf-chrome) .sys__media img, :is(.vf-landing, .vf-chrome).sys__media img{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20%),
                       linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 20%),
                       linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%);
    -webkit-mask-composite:source-in; mask-composite:intersect;
  }
  :is(.vf-landing, .vf-chrome) .sys__veil, :is(.vf-landing, .vf-chrome).sys__veil{ display:none; }

  /* --- 6. proof: the evaluation structure left, human control right --- */
  :is(.vf-landing, .vf-chrome) .sec--proof, :is(.vf-landing, .vf-chrome).sec--proof{ align-items:center; }
  :is(.vf-landing, .vf-chrome) .proof__fig, :is(.vf-landing, .vf-chrome).proof__fig{ grid-column: full-start / 7; grid-row:1; margin-top:0; }
  :is(.vf-landing, .vf-chrome) .proof__fig img, :is(.vf-landing, .vf-chrome).proof__fig img{
    -webkit-mask-image:linear-gradient(90deg,#000 74%,transparent 100%),
                       linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
            mask-image:linear-gradient(90deg,#000 74%,transparent 100%),
                       linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
    -webkit-mask-composite:source-in; mask-composite:intersect;
  }
  :is(.vf-landing, .vf-chrome) .proof__copy, :is(.vf-landing, .vf-chrome).proof__copy{ grid-column: 8 / main-end; grid-row:1; }

  /* --- 7. close: copy over the quiet field of the conversion band --- */
  :is(.vf-landing, .vf-chrome) .sec--close, :is(.vf-landing, .vf-chrome).sec--close{ align-items:stretch; }
  :is(.vf-landing, .vf-chrome) .close__media, :is(.vf-landing, .vf-chrome).close__media{ grid-row:1; align-self:stretch; }
  :is(.vf-landing, .vf-chrome) .close__media img, :is(.vf-landing, .vf-chrome).close__media img{ position:absolute; inset:0; width:100%; height:100%;
                     object-fit:cover; object-position:50% 58%; }
  :is(.vf-landing, .vf-chrome) .close__copy, :is(.vf-landing, .vf-chrome).close__copy{ grid-column: main-start / span 6; grid-row:1; padding-block: 58px 66px; }
  :is(.vf-landing, .vf-chrome) .close__veil, :is(.vf-landing, .vf-chrome).close__veil{
    background:
      linear-gradient(100deg, rgba(250,248,244,.95) 0%, rgba(250,248,244,.88) 33%, rgba(250,248,244,.32) 57%, rgba(250,248,244,0) 78%),
      linear-gradient(180deg, var(--ivory) 0%, rgba(250,248,244,0) 22%, rgba(250,248,244,0) 84%, var(--ivory) 100%);
  }

  :is(.vf-landing, .vf-chrome) .site-head__in, :is(.vf-landing, .vf-chrome).site-head__in{ padding-block:18px; }
}

/* ==========================================================================
   >= 1200px  - final desktop refinements
   ========================================================================== */
@media (min-width: 1200px){
  :is(.vf-landing, .vf-chrome) .brand__mark, :is(.vf-landing, .vf-chrome).brand__mark{ width:29px; }
  :is(.vf-landing, .vf-chrome) .brand__word, :is(.vf-landing, .vf-chrome).brand__word{ width:118px; }
  :is(.vf-landing, .vf-chrome) .foot__word, :is(.vf-landing, .vf-chrome).foot__word{ width:104px; }

  :is(.vf-landing, .vf-chrome) .pin strong, :is(.vf-landing, .vf-chrome).pin strong{ font-size:17.5px; }
  :is(.vf-landing, .vf-chrome) .pin em, :is(.vf-landing, .vf-chrome).pin em{ font-size:13.5px; }
}

/* ==========================================================================
   < 1000px - copy first, no thumbnails, light path preserved
   ========================================================================== */
@media (max-width: 999px){

  :is(.vf-landing, .vf-chrome) .sec--leak .leak__copy, :is(.vf-landing, .vf-chrome).sec--leak .leak__copy{ grid-row:1; margin-top:0; }
  :is(.vf-landing, .vf-chrome) .sec--leak .leak__fig, :is(.vf-landing, .vf-chrome).sec--leak .leak__fig{ grid-row:2; margin-top:32px; }

  :is(.vf-landing, .vf-chrome) .leak__fig img, :is(.vf-landing, .vf-chrome).leak__fig img, :is(.vf-landing, .vf-chrome) .out__fig img, :is(.vf-landing, .vf-chrome).out__fig img, :is(.vf-landing, .vf-chrome) .path__fig img, :is(.vf-landing, .vf-chrome).path__fig img, :is(.vf-landing, .vf-chrome) .sys__media img, :is(.vf-landing, .vf-chrome).sys__media img, :is(.vf-landing, .vf-chrome) .proof__fig img, :is(.vf-landing, .vf-chrome).proof__fig img{ border-radius:var(--card); }

  :is(.vf-landing, .vf-chrome) .path__shell, :is(.vf-landing, .vf-chrome).path__shell{ padding:48px 0 0; }
  :is(.vf-landing, .vf-chrome) .path__fig, :is(.vf-landing, .vf-chrome).path__fig{ margin-top:36px; }

  /* the three artefacts read below the shelf rather than on plates too
     narrow to hold them */
  :is(.vf-landing, .vf-chrome) .out__pins, :is(.vf-landing, .vf-chrome).out__pins{ position:static; display:grid; gap:20px; margin-top:26px; }
  :is(.vf-landing, .vf-chrome) .pin, :is(.vf-landing, .vf-chrome).pin{ position:static; width:auto; padding:0; background:none; }

  :is(.vf-landing, .vf-chrome) .close__media, :is(.vf-landing, .vf-chrome).close__media{ grid-row:2; }
  :is(.vf-landing, .vf-chrome) .close__copy, :is(.vf-landing, .vf-chrome).close__copy{ grid-row:1; padding-block: var(--sec-pad) 36px; }
  :is(.vf-landing, .vf-chrome) .close__veil, :is(.vf-landing, .vf-chrome).close__veil{ background:linear-gradient(180deg, var(--ivory) 0%, rgba(250,248,244,0) 30%); }
}

@media (max-width: 767px){
  :root{ --sec-pad: 64px; }

  :is(.vf-landing, .vf-chrome) .display, :is(.vf-landing, .vf-chrome).display{ letter-spacing:-0.022em; }
  :is(.vf-landing, .vf-chrome) .h2, :is(.vf-landing, .vf-chrome).h2{ max-width:20ch; }

  /* the header needs to size to its content, not to twelve tiny columns */
  :is(.vf-landing, .vf-chrome) .site-head__in, :is(.vf-landing, .vf-chrome).site-head__in{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding-inline: var(--gutter);
  }
  :is(.vf-landing, .vf-chrome) .brand__mark, :is(.vf-landing, .vf-chrome).brand__mark{ width:24px; }
  :is(.vf-landing, .vf-chrome) .brand__word, :is(.vf-landing, .vf-chrome).brand__word{ width:84px; }        /* mark + 10px gap + word = 118px lockup */

  :is(.vf-landing, .vf-chrome) .site-nav .link-quiet, :is(.vf-landing, .vf-chrome).site-nav .link-quiet{ display:none; }

  :is(.vf-landing, .vf-chrome) .btn, :is(.vf-landing, .vf-chrome).btn{ min-height:52px; }
  :is(.vf-landing, .vf-chrome) .btn--sm, :is(.vf-landing, .vf-chrome).btn--sm{ min-height:44px; padding:0 15px; font-size:13px; white-space:nowrap; }

  :is(.vf-landing, .vf-chrome) .facts, :is(.vf-landing, .vf-chrome).facts{ gap:12px 26px; }
  :is(.vf-landing, .vf-chrome) .facts strong, :is(.vf-landing, .vf-chrome).facts strong{ font-size:18px; }

  /* keep the break legible instead of shrinking it to nothing */
  :is(.vf-landing, .vf-chrome) .break__cap, :is(.vf-landing, .vf-chrome).break__cap{ font-size:10.5px; padding:5px 11px; top:88%; }
  :is(.vf-landing, .vf-chrome) .seam, :is(.vf-landing, .vf-chrome).seam{ display:none; }

  :is(.vf-landing, .vf-chrome) .pin strong, :is(.vf-landing, .vf-chrome).pin strong{ font-size:17px; }

  :is(.vf-landing, .vf-chrome) .sys__list li, :is(.vf-landing, .vf-chrome).sys__list li{ gap:12px; }
  :is(.vf-landing, .vf-chrome) .rungs em, :is(.vf-landing, .vf-chrome).rungs em{ flex-basis:100%; }
}

@media (max-width: 400px){
  :is(.vf-landing, .vf-chrome) .out__also, :is(.vf-landing, .vf-chrome).out__also{ font-size:13px; }
  :is(.vf-landing, .vf-chrome) .facts, :is(.vf-landing, .vf-chrome).facts{ gap:10px 20px; }
  :is(.vf-landing, .vf-chrome) .cta-row, :is(.vf-landing, .vf-chrome).cta-row{ gap:18px; }

  /* pull price and duration above the fold on the smallest handsets */
  :is(.vf-landing, .vf-chrome) .hero, :is(.vf-landing, .vf-chrome).hero{ padding-block: 34px 48px; }
  :is(.vf-landing, .vf-chrome) .display, :is(.vf-landing, .vf-chrome).display{ font-size:33px; }
  :is(.vf-landing, .vf-chrome) .lede, :is(.vf-landing, .vf-chrome).lede{ font-size:16px; line-height:1.5; }
  :is(.vf-landing, .vf-chrome) .display + .lede, :is(.vf-landing, .vf-chrome).display + .lede{ margin-top:18px; }
  :is(.vf-landing, .vf-chrome) .facts, :is(.vf-landing, .vf-chrome).facts{ margin-top:24px; padding-top:16px; }
  :is(.vf-landing, .vf-chrome) .hero .cta-row, :is(.vf-landing, .vf-chrome).hero .cta-row{ margin-top:26px; }

  :is(.vf-landing, .vf-chrome) .brand__mark, :is(.vf-landing, .vf-chrome).brand__mark{ width:22px; }
  :is(.vf-landing, .vf-chrome) .brand__word, :is(.vf-landing, .vf-chrome).brand__word{ width:78px; }        /* mark + 8px gap + word = 108px lockup */
  :is(.vf-landing, .vf-chrome) .brand, :is(.vf-landing, .vf-chrome).brand{ gap:8px; }
  :is(.vf-landing, .vf-chrome) .btn--sm, :is(.vf-landing, .vf-chrome).btn--sm{ padding:0 13px; font-size:12px; gap:7px; }
  :is(.vf-landing, .vf-chrome) .btn--sm::after, :is(.vf-landing, .vf-chrome).btn--sm::after{ font-size:13px; }
  :is(.vf-landing, .vf-chrome) .eyebrow, :is(.vf-landing, .vf-chrome).eyebrow{ font-size:11px; letter-spacing:.1em; }
}

/* ============================================================== motion */
@media (prefers-reduced-motion: reduce){
  :is(.vf-landing, .vf-chrome) *, :is(.vf-landing, .vf-chrome), :is(.vf-landing, .vf-chrome) *::before, :is(.vf-landing, .vf-chrome)::before, :is(.vf-landing, .vf-chrome) *::after, :is(.vf-landing, .vf-chrome)::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}


/* ==========================================================================
   PORT ADJUSTMENTS

   Rules here are NOT in the frozen artifact. The first two exist because the
   artifact WAS the document and this is a scoped subtree of one. The third is
   an authorised post-artifact UI correction, dated and attributed.
   ========================================================================== */

/* 1. The ground behind the scoped surfaces. Without it the full-bleed sections
      sit on the app's default background. Beta only - this stylesheet is not
      linked on the control, so the class is inert there. */
body.vf-beta{ background: var(--ivory); }

/* 2. globals.css sets DM Sans stylistic sets on `body`; they inherit into the
      landing and reshape glyphs. Measured against the approved screenshots as
      1-2px of width drift on most inline runs, which is enough to move a line
      break. The artifact renders with neither, so the scope resets both. */
:is(.vf-landing, .vf-chrome){
  font-feature-settings: normal;
  font-variation-settings: normal;
}

/* 3. Room for the locale control.

      EN/ES/FR is a preserved requirement and the frozen artifact has no
      language switcher, so the header carries one item the approved geometry
      never budgeted for. Dropped in untreated it displaced the approved
      composition twice, both measured against the approval screenshots:

        - at 768 the nav needed 356px inside a 318px column, wrapped to two
          lines, and pushed the header and the whole page down by 6px;
        - at 320 the brand was a shrinkable flex item, so it absorbed the
          overflow and the wordmark lockup compressed to 102px - under the
          108-120px the brief requires.

      The fix is geometry only. No approved element changes size, colour or
      position; the header row is simply given the room the extra control needs.
      Both edges stay anchored - the brand to the content left, the nav to the
      content right - so the approved elements land on the same pixels. */

/* The lockup is never the thing that gives way. */
.vf-chrome .brand{ flex: none; }
.vf-chrome .brand__mark,
.vf-chrome .brand__word{ flex: none; }

/* One line, always. */
.vf-chrome .site-nav{ flex-wrap: nowrap; }
.vf-chrome .site-nav > *{ flex: none; }

@media (min-width: 768px){
  /* Take the columns from the brand's empty right-hand run, not from anything
     that renders: the lockup is ~149px inside a 318px box at 768. */
  .vf-chrome .site-head__in > .brand{ grid-column: main-start / span 4; }
  .vf-chrome .site-head__in > .site-nav{ grid-column: span 8 / main-end; }
}

@media (max-width: 400px){
  /* At 320 the approved row is brand 108 + CTA 157 inside 296px of content,
     leaving 31px of slack. A two-letter locale control fits in that slack; its
     chevron does not, and neither do the approved 12px gaps. Measured: with the
     chevron hidden the nav is 181px, so 108 + 6 + 181 = 295 and the CTA lands on
     its approved x=151, right edge 308. */
  .vf-chrome .site-head__in{ gap: 6px; }
  .vf-chrome .site-nav{ gap: 7px; }
  .vf-chrome .site-nav svg{ display: none; }
}

/* 3. HEADER CTA AFFORDANCE - authorised by Mauricio, 2026-08-15.

      Not a port defect: the app renders `Client portal` byte-identically to the
      artifact (`.link-quiet`, hairline underline, gray). Measured on the preview
      before changing anything. The artifact deliberately kept it quiet so it
      would not compete with the primary CTA.

      Runtime evidence showed the affordance is too low to read as a control at
      all, so this is an authorised post-artifact adjustment rather than a fix.

      SCOPED TO THE HEADER ONLY. The hero keeps the quiet treatment - there the
      link sits 26px from the primary CTA and a second box WOULD compete - and so
      does the footer. Outline, not fill: subordinate to the solid orange primary.

      Inert below 900px, where the approved header already hides this link. */
:is(.vf-landing, .vf-chrome) .site-nav .link-quiet{
  border: 1px solid var(--hairline);
  border-bottom-color: var(--hairline);
  border-radius: 6px;
  padding: 9px 16px;
  color: var(--charcoal);
}
:is(.vf-landing, .vf-chrome) .site-nav .link-quiet:hover{
  border-color: var(--orange);
  color: var(--charcoal);
}

/* 4. FREE TOOLS SECTION - authorised by Mauricio, 2026-08-16.

      Post-artifact addition: the acquisition journey landing -> free tool ->
      result -> audit already exists in the product and was invisible on the
      landing. Deliberately quiet - it borrows the section rhythm and the
      `.link-quiet` treatment rather than introducing a second CTA style, so the
      audit CTA keeps the only strong position on the page. */
:is(.vf-landing, .vf-chrome) .tools__list{
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
:is(.vf-landing, .vf-chrome) .tools__item{
  border-top: 1px solid var(--hairline);
  padding-top: 16px;
}
:is(.vf-landing, .vf-chrome) .tools__name{
  font-size: 17px;
  margin: 0 0 6px;
}
:is(.vf-landing, .vf-chrome) .tools__body{
  color: var(--gray);
  margin: 0 0 12px;
  max-width: 42ch;
}
@media (max-width: 700px){
  :is(.vf-landing, .vf-chrome) .tools__list{ grid-template-columns: 1fr; gap: 18px; }
}

/* 5. CAPABILITY ROW - authorised by Mauricio, 2026-08-17.

      Four domain links, quiet. Borrows the section rhythm and `.link-quiet`
      rather than introducing a fifth CTA style: domains are the map, not the
      menu, so they must not read as four competing offers. */
:is(.vf-landing, .vf-chrome) .caps__list{
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
}
:is(.vf-landing, .vf-chrome) .caps__item{ margin: 0; }
@media (max-width: 700px){
  :is(.vf-landing, .vf-chrome) .caps__list{ gap: 12px 20px; }
}

/* 6. INTERACTION AFFORDANCE SYSTEM - authorised by Mauricio, 2026-08-17.

      The problem, from real screenshots: actions did not read as actions. The
      artifact defined exactly one interactive treatment - the orange pill - and
      everything weaker fell back to `.link-quiet`, a hairline underline. So a
      Free Tool entry point, a portal link and four capability destinations all
      looked like body text with a line under them.

      Four rungs, each visually distinct WITHOUT hover:

        PRIMARY    the approved orange pill. Untouched.
        SECONDARY  same pill geometry, 1px charcoal border, neutral fill.
        TERTIARY   charcoal label + chevron, real padding, own hit area.
        NAV        bordered tile with a chevron pinned right.

      No new brand colour. No fifth style. Nothing about the primary changes. */

/* --- SECONDARY: a real button, never underlined text ------------------------ */
:is(.vf-landing, .vf-chrome) .btn--secondary{
  background: var(--glass);
  color: var(--charcoal);
  border: 1px solid var(--charcoal);
  box-shadow: none;
}
:is(.vf-landing, .vf-chrome) .btn--secondary:hover{
  background: var(--charcoal);
  color: var(--glass);
}
:is(.vf-landing, .vf-chrome) .btn--secondary::after{ content: none; }

/* --- TERTIARY: label + chevron, with a comfortable target ------------------- */
:is(.vf-landing, .vf-chrome) .link-cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;            /* comfortable touch target */
  padding: 6px 2px;
  color: var(--charcoal);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-bottom: 0;
  transition: color .18s ease, gap .18s ease;
}
:is(.vf-landing, .vf-chrome) .link-cta svg{
  flex: 0 0 auto;
  transition: transform .18s ease;
}
:is(.vf-landing, .vf-chrome) .link-cta:hover{ color: var(--orange-ink); gap: 12px; }
:is(.vf-landing, .vf-chrome) .link-cta:hover svg{ transform: translateX(2px); }

/* --- Free Tools become units, not floating links ---------------------------- */
:is(.vf-landing, .vf-chrome) .tools__item{
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 20px 22px 16px;
  background: var(--glass);
  transition: border-color .18s ease, box-shadow .18s ease;
}
:is(.vf-landing, .vf-chrome) .tools__item:hover{
  border-color: var(--orange);
  box-shadow: 0 6px 20px -12px rgba(37,37,37,.18);
}
:is(.vf-landing, .vf-chrome) .tools__body{ margin-bottom: 6px; }

/* --- NAV: capability tiles ------------------------------------------------- */
:is(.vf-landing, .vf-chrome) .caps__list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
:is(.vf-landing, .vf-chrome) .caps__item{ margin: 0; }
:is(.vf-landing, .vf-chrome) .caps__link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 56px;
  padding: 0 18px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--glass);
  color: var(--charcoal);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
:is(.vf-landing, .vf-chrome) .caps__link svg{
  flex: 0 0 auto;
  color: var(--gray);
  transition: transform .18s ease, color .18s ease;
}
:is(.vf-landing, .vf-chrome) .caps__link:hover{
  border-color: var(--orange);
  box-shadow: 0 6px 20px -12px rgba(37,37,37,.18);
}
:is(.vf-landing, .vf-chrome) .caps__link:hover svg{
  color: var(--orange-ink);
  transform: translateX(2px);
}

/* --- Focus is visible on every rung --------------------------------------- */
:is(.vf-landing, .vf-chrome) .btn:focus-visible,
:is(.vf-landing, .vf-chrome) .link-cta:focus-visible,
:is(.vf-landing, .vf-chrome) .caps__link:focus-visible,
:is(.vf-landing, .vf-chrome) .link-quiet:focus-visible{
  outline: 2px solid var(--orange-ink);
  outline-offset: 3px;
}

@media (max-width: 700px){
  :is(.vf-landing, .vf-chrome) .caps__list{ grid-template-columns: 1fr; }
  :is(.vf-landing, .vf-chrome) .tools__list{ grid-template-columns: 1fr; gap: 14px; }
}

/* 7. VISUAL WEIGHT + PRODUCT MERCHANDISING - authorised by Mauricio, 2026-08-17.

      Affordance was solved but the result went too neutral: the secondary button
      was glass-on-ivory, which is technically a button and visually almost
      nothing, and the Free Tools read as two documentation blocks.

      No new brand colour. Weight comes from fill, border contrast and one very
      shallow shadow - the same three levers the primary already uses. */

/* --- SECONDARY gains presence, still loses to the primary ------------------ */
:is(.vf-landing, .vf-chrome) .btn--secondary{
  background: #F2EDE6;                          /* warm neutral, clearly not the page */
  border: 1px solid rgba(37,37,37,.30);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 2px 6px -3px rgba(37,37,37,.16);
}
:is(.vf-landing, .vf-chrome) .btn--secondary svg{ color: var(--gray); transition: color .18s ease; }
:is(.vf-landing, .vf-chrome) .btn--secondary:hover{
  background: var(--charcoal);
  color: var(--glass);
  border-color: var(--charcoal);
}
:is(.vf-landing, .vf-chrome) .btn--secondary:hover svg{ color: var(--glass); }

/* --- Free Tools become product previews ----------------------------------- */
:is(.vf-landing, .vf-chrome) .tools__list{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
:is(.vf-landing, .vf-chrome) .tools__item{
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(37,37,37,.14);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  background: var(--glass);
  box-shadow: 0 1px 2px rgba(37,37,37,.04);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
:is(.vf-landing, .vf-chrome) .tools__item:hover{
  border-color: rgba(37,37,37,.30);
  box-shadow: 0 14px 34px -20px rgba(37,37,37,.34);
  transform: translateY(-2px);
}
:is(.vf-landing, .vf-chrome) .tool__head{ padding: 20px 22px 0; }
:is(.vf-landing, .vf-chrome) .tool__tag{
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--orange-ink); margin: 0 0 8px;
}
:is(.vf-landing, .vf-chrome) .tools__name{ font-size: 19px; margin: 0 0 6px; }
:is(.vf-landing, .vf-chrome) .tools__body{ color: var(--gray); margin: 0 0 16px; font-size: 14.5px; }

/* the preview panel - illustrative UI, sitting on its own ground */
:is(.vf-landing, .vf-chrome) .tool__preview{
  margin: 0 22px;
  padding: 16px 18px 14px;
  border: 1px solid rgba(37,37,37,.10);
  border-radius: 10px;
  background: #FBF7F1;
}
:is(.vf-landing, .vf-chrome) .tool__illus{
  font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gray); opacity: .75; margin: 12px 22px 0;
}

/* Pitch Pacer: a score and graded criteria */
:is(.vf-landing, .vf-chrome) .pp__top{ display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
:is(.vf-landing, .vf-chrome) .pp__score{
  font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--charcoal);
}
:is(.vf-landing, .vf-chrome) .pp__of{ font-size: 13px; color: var(--gray); }
:is(.vf-landing, .vf-chrome) .pp__rows{ display: grid; gap: 9px; }
:is(.vf-landing, .vf-chrome) .pp__row{ display: grid; grid-template-columns: 42px 1fr 74px; align-items: center; gap: 10px; }
:is(.vf-landing, .vf-chrome) .pp__time{
  font-size: 11px; color: var(--gray); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
:is(.vf-landing, .vf-chrome) .pp__lab{ font-size: 12px; color: var(--charcoal); }
:is(.vf-landing, .vf-chrome) .pp__bar{ height: 5px; border-radius: 999px; background: rgba(37,37,37,.10); overflow: hidden; }
:is(.vf-landing, .vf-chrome) .pp__bar i{ display: block; height: 100%; border-radius: 999px; background: var(--orange); }
:is(.vf-landing, .vf-chrome) .pp__miss{ margin-top: 12px; font-size: 12px; color: var(--gray); }

/* Lead cleanup: a before/after ledger */
:is(.vf-landing, .vf-chrome) .lc__rows{ display: grid; gap: 8px; }
:is(.vf-landing, .vf-chrome) .lc__row{
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 12.5px; color: var(--charcoal);
  padding-bottom: 7px; border-bottom: 1px solid rgba(37,37,37,.08);
}
:is(.vf-landing, .vf-chrome) .lc__row:last-child{ border-bottom: 0; padding-bottom: 0; }
:is(.vf-landing, .vf-chrome) .lc__n{ font-variant-numeric: tabular-nums; font-weight: 600; }
:is(.vf-landing, .vf-chrome) .lc__row--out .lc__n{ color: var(--gray); }
:is(.vf-landing, .vf-chrome) .lc__row--keep{ padding-top: 8px; border-top: 1px solid rgba(37,37,37,.14); }
:is(.vf-landing, .vf-chrome) .lc__row--keep .lc__lab{ font-weight: 600; }
:is(.vf-landing, .vf-chrome) .lc__row--keep .lc__n{ font-size: 17px; color: var(--orange-ink); }

@media (max-width: 700px){
  :is(.vf-landing, .vf-chrome) .tools__list{ grid-template-columns: 1fr; gap: 16px; }
  :is(.vf-landing, .vf-chrome) .pp__score{ font-size: 34px; }
}

/* 8. REGRESSION FIX - the nav portal control must still hide on mobile.

      The approved header hides the portal link below 999px, because at 375px the
      row is brand + CTA with almost no slack - the trailer note for adjustment 2
      measured 31px of it at 320px. That hide rule targets `.link-quiet`, and
      giving the control a real button class stopped it matching, so the portal
      button rendered on mobile and pushed the primary CTA to x=416 inside a
      375px viewport. Clipped by 41px at 375, by 96px at 320.

      Same rule, new selector. The HERO portal button stays visible on mobile, so
      a phone visitor still has a route into the portal - it simply is not in the
      three-item header row that has no room for it. */
@media (max-width: 999px){
  :is(.vf-landing, .vf-chrome) .site-nav .btn--secondary{ display: none; }
}

/* 9. FOUR DOMAINS become four pillars - authorised by Mauricio, 2026-08-17.

      A row of four bordered tiles worked as navigation and failed as an
      explanation. A reader could see there were four domains and nothing about
      what lived inside them, so the section read as a sitemap rather than as
      the operating map of the firm.

      Same four URLs, same approved copy. What changes is that each card now
      carries the domain's own value line and its own system names, pulled from
      the capability page's namespace - so the card cannot drift from the page
      it routes to.

      No new colour and no new typeface. The depth is three neutral grounds
      (glass head, ivory body, glass foot), two hairlines and one very shallow
      shadow; the only orange is the index numeral and the chevron on hover.
      Four orange buttons is precisely the reading this section must not have -
      the audit is still the only offer.

      The artifact's own `.caps__*` rules are left in place above and are now
      unused. They are artifact CSS, which is frozen, so they are not deleted -
      inert selectors cost a few hundred bytes and removing them would break
      the hash contract this file exists to keep. */

:is(.vf-landing, .vf-chrome) .pillars{
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

/* The card is the click target: `position: relative` is what the CTA's ::after
   resolves against. No `overflow: hidden` - the body band is a middle stripe
   that never meets a rounded corner, and clipping here would eat the focus
   ring the same ::after draws. */
:is(.vf-landing, .vf-chrome) .pillar{
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--glass);
  box-shadow: 0 1px 0 rgba(37, 37, 37, .03), 0 12px 26px -22px rgba(37, 37, 37, .26);
  transition: border-color .18s ease, box-shadow .18s ease;
}
:is(.vf-landing, .vf-chrome) .pillar:hover{
  border-color: var(--orange);
  box-shadow: 0 1px 0 rgba(37, 37, 37, .03), 0 14px 30px -18px rgba(37, 37, 37, .28);
}

/* --- head: index, domain, one line of value ------------------------------- */
:is(.vf-landing, .vf-chrome) .pillar__head{
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--hairline);
}
:is(.vf-landing, .vf-chrome) .pillar__idx{
  display: block;
  margin-bottom: 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  font-variant-numeric: tabular-nums;
  color: var(--orange-ink);
}
:is(.vf-landing, .vf-chrome) .pillar__name{
  margin: 0 0 10px;
  font-size: 23px;
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -0.014em;
  color: var(--charcoal);
}
:is(.vf-landing, .vf-chrome) .pillar__value{
  margin: 0;
  max-width: 44ch;
  min-height: 3em;             /* two lines: keeps the bands aligned across a row */
  font-size: 15px;
  line-height: 1.5;
  color: var(--gray);
}

/* --- body: the systems, on the deeper of the two neutrals ----------------- */
:is(.vf-landing, .vf-chrome) .pillar__body{
  flex: 1 1 auto;
  padding: 15px 24px 17px;
  background: var(--ivory);
}
:is(.vf-landing, .vf-chrome) .pillar__label{
  margin: 0 0 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--gray);
}
:is(.vf-landing, .vf-chrome) .pillar__sys{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 7px;
}
:is(.vf-landing, .vf-chrome) .pillar__sys li{
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: -0.004em;
  color: var(--charcoal);
}
/* Decorative separator, not content - the items are already list items, so the
   dot carries no information a reader would miss. */
:is(.vf-landing, .vf-chrome) .pillar__sys li + li::before{
  content: "\00B7";
  margin-right: 7px;
  font-weight: 400;
  color: var(--gray);
}

/* --- foot: the CTA, stretched over the whole card ------------------------- */
:is(.vf-landing, .vf-chrome) .pillar__cta{
  display: flex;
  min-height: 0;
  padding: 13px 24px 15px;
  border-top: 1px solid var(--hairline);
  border-radius: 0 0 12px 12px;
  background: var(--glass);
  font-size: 14.5px;
}
:is(.vf-landing, .vf-chrome) .pillar__cta::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
}
:is(.vf-landing, .vf-chrome) .pillar:hover .pillar__cta{ color: var(--orange-ink); }
:is(.vf-landing, .vf-chrome) .pillar:hover .pillar__cta svg{ transform: translateX(3px); }

/* The ring belongs on the card, because the card is what the link now covers.
   Drawn by the same ::after so it follows the card's radius; the anchor's own
   outline is dropped, otherwise the focus ring would frame the foot only. */
:is(.vf-landing, .vf-chrome) .pillar__cta:focus-visible{ outline: none; }
:is(.vf-landing, .vf-chrome) .pillar__cta:focus-visible::after{
  outline: 2px solid var(--orange-ink);
  outline-offset: 3px;
}

/* --- the closing note ----------------------------------------------------- */
:is(.vf-landing, .vf-chrome) .pillar__note{
  margin: 22px 0 0;
  max-width: 80ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--gray);
}

@media (max-width: 860px){
  :is(.vf-landing, .vf-chrome) .pillars{ grid-template-columns: 1fr; gap: 14px; }
  :is(.vf-landing, .vf-chrome) .pillar__head{ padding: 18px 20px 15px; }
  :is(.vf-landing, .vf-chrome) .pillar__body{ padding: 13px 20px 15px; }
  :is(.vf-landing, .vf-chrome) .pillar__cta{ padding: 12px 20px 14px; }
  :is(.vf-landing, .vf-chrome) .pillar__value{ max-width: none; min-height: 0; }
  /* Stacked rows, so the dot has nothing left to separate. */
  :is(.vf-landing, .vf-chrome) .pillar__sys{ flex-direction: column; gap: 3px; }
  :is(.vf-landing, .vf-chrome) .pillar__sys li + li::before{ content: none; margin: 0; }
}

/* 10. FREE TOOLS become startable - authorised by Mauricio, 2026-08-18.

      THE MEASUREMENT
      ---------------
      In the 9-block build the two cards were: tag, name, one line, a preview
      panel, the "Illustrative preview" label, then a 15px text link. The only
      actionable pixel in the section was the last one you reached, and it was
      a link among the ten other links on the page.

      WHAT THIS BLOCK CHANGES
      -----------------------
      The card becomes a form. The control the tool opens with - a textarea for
      Pitch Pacer, a dropzone for the cleaner - and a filled button sit directly
      under the one-line description, and the preview drops below them, so the
      first thing you can DO precedes the thing you can read about.

      THE BUTTON IS CHARCOAL, NOT ORANGE
      ----------------------------------
      It has to be unmistakably a button and it must not become a second
      primary: this fold already spends both of BRAND.md's two ember slots on
      the "Free tool" tag and the ledger's usable-rows figure, and the page's
      one orange pill belongs to the audit. Solid charcoal carries the weight
      with none of the accent, and it still loses to the orange pill on colour.

      EVERY STATE IS DRAWN
      --------------------
      Hover, focus-visible, active and - on the dropzone - drag-over and
      file-chosen. A control that accepts a drop has to say so while the file
      is still in the air, or the drop is a guess. */

/* --- the interactive zone -------------------------------------------------- */
:is(.vf-landing, .vf-chrome) .tool__act{
  display: grid;
  gap: 10px;
  margin: 0 22px 18px;
  padding: 14px 15px 15px;
  border: 1px solid rgba(37,37,37,.16);
  border-radius: 12px;
  background: #FFFDFA;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
  transition: border-color .18s ease, box-shadow .18s ease;
}
/* The zone answers the pointer before anything inside it is touched, so which
   part of the card is live is legible without clicking to find out. */
:is(.vf-landing, .vf-chrome) .tools__item:hover .tool__act{
  border-color: rgba(37,37,37,.28);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 6px 18px -12px rgba(37,37,37,.35);
}
:is(.vf-landing, .vf-chrome) .tool__act:focus-within{
  border-color: var(--charcoal);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 6px 18px -12px rgba(37,37,37,.4);
}

/* --- Pitch Pacer: the tool's own `problem` field --------------------------- */
:is(.vf-landing, .vf-chrome) .tool__ctl-label{
  font-size: 12.5px; font-weight: 600; color: var(--charcoal); letter-spacing: -.005em;
}
:is(.vf-landing, .vf-chrome) .tool__input{
  width: 100%;
  min-height: 62px;
  padding: 9px 11px;
  border: 1px solid rgba(37,37,37,.22);
  border-radius: 8px;
  background: #fff;
  color: var(--charcoal);
  font: inherit;
  font-size: 13.5px;
  line-height: 1.45;
  resize: vertical;
  transition: border-color .16s ease, box-shadow .16s ease;
}
:is(.vf-landing, .vf-chrome) .tool__input::placeholder{ color: rgba(37,37,37,.42); }
:is(.vf-landing, .vf-chrome) .tool__input:hover{ border-color: rgba(37,37,37,.36); }
:is(.vf-landing, .vf-chrome) .tool__input:focus{
  outline: none;
  border-color: var(--charcoal);
  box-shadow: 0 0 0 3px rgba(37,37,37,.12);
}
:is(.vf-landing, .vf-chrome) .tool__ctl-hint{
  margin: -2px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--gray);
}

/* --- Lead cleanup: the tool's own CSV input -------------------------------- */

/* Visually hidden, NOT display:none. The input is the thing that receives
   focus and opens the picker on Enter; hiding it the other way would take the
   dropzone off the tab order and leave it mouse-only. */
:is(.vf-landing, .vf-chrome) .tool__file{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
:is(.vf-landing, .vf-chrome) .tool__drop{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 62px;
  padding: 10px 12px;
  border: 1px dashed rgba(37,37,37,.34);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  text-align: center;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
:is(.vf-landing, .vf-chrome) .tool__drop-main{
  font-size: 13.5px; font-weight: 600; color: var(--charcoal);
  overflow-wrap: anywhere;
}
:is(.vf-landing, .vf-chrome) .tool__drop-hint{ font-size: 11.5px; line-height: 1.4; color: var(--gray); }
:is(.vf-landing, .vf-chrome) .tool__drop:hover{ border-color: var(--charcoal); background: #FFFDFA; }
/* Focus lives on the input, so the ring has to be drawn on its sibling. */
:is(.vf-landing, .vf-chrome) .tool__file:focus-visible + .tool__drop{
  outline: 2px solid var(--charcoal);
  outline-offset: 2px;
}
:is(.vf-landing, .vf-chrome) .tool__drop[data-over="true"]{
  border-color: var(--orange-ink);
  border-style: solid;
  background: #FFF6EE;
  box-shadow: 0 0 0 3px rgba(244,122,32,.16);
}
:is(.vf-landing, .vf-chrome) .tool__drop[data-has="true"]{
  border-style: solid;
  border-color: rgba(37,37,37,.34);
  background: #FBF7F1;
}

/* --- the action: a strong secondary, never a second primary ---------------- */
:is(.vf-landing, .vf-chrome) .tool__go{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--charcoal);
  border-radius: 999px;
  background: var(--charcoal);
  color: var(--glass);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 6px 16px -10px rgba(37,37,37,.55);
}
:is(.vf-landing, .vf-chrome) .tool__go::after{ content: "→"; font-size: 15px; line-height: 1; }
:is(.vf-landing, .vf-chrome) .tool__go:hover{
  background: #101010;
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 10px 22px -12px rgba(37,37,37,.6);
}
:is(.vf-landing, .vf-chrome) .tool__go:active{ transform: translateY(0); }
:is(.vf-landing, .vf-chrome) .tool__go:focus-visible{
  outline: 2px solid var(--orange-ink);
  outline-offset: 3px;
}
:is(.vf-landing, .vf-chrome) .tool__go[disabled]{ opacity: .7; cursor: default; transform: none; }

/* --- the preview, demoted to evidence -------------------------------------- */
:is(.vf-landing, .vf-chrome) .tool__prev-label{
  margin: 0 22px 7px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gray);
}
:is(.vf-landing, .vf-chrome) .tool__illus{ margin-bottom: 18px; }
/* The cards are stretched to a common height by the grid; without this the
   shorter panel leaves a dead band beneath its label rather than filling. */
:is(.vf-landing, .vf-chrome) .tool__preview{ flex: 1; }

/* the keep rate, the figure the cleaner's result leads with */
:is(.vf-landing, .vf-chrome) .lc__bar{
  display: block; height: 6px; margin-top: 12px;
  border-radius: 999px; background: rgba(37,37,37,.10); overflow: hidden;
}
:is(.vf-landing, .vf-chrome) .lc__bar i{
  display: block; height: 100%; border-radius: 999px; background: var(--orange);
}
:is(.vf-landing, .vf-chrome) .lc__rate{ margin-top: 8px; font-size: 12px; color: var(--gray); }

@media (max-width: 700px){
  :is(.vf-landing, .vf-chrome) .tool__act{ margin: 0 18px 16px; }
  :is(.vf-landing, .vf-chrome) .tool__prev-label{ margin-inline: 18px; }
  :is(.vf-landing, .vf-chrome) .tool__go{ min-height: 50px; }
}

@media (prefers-reduced-motion: reduce){
  :is(.vf-landing, .vf-chrome) .tool__go:hover{ transform: none; }
}