/* ==========================================================================
   VerityLoft — LAYER 4: Pages  (vl-pages.css)

   The other layers style ARTICLES. This one styles everything else:
   Home, About, Testing Methodology, Contact, Software Calculators,
   Research & Development, and the article index.

   Requires vl-base.css first. Every colour and font comes from the tokens
   it defines. This file invents none of its own.

   ONE CLASS TO REMEMBER
     .vl-page   goes on the outer <div> of every page in this layer.
                The HTML files already have it. Without it nothing applies,
                which is exactly what keeps these styles off article pages.

   CONTENTS
     1. Page furniture
     2. Home page
     3. Article index
     4. The other five pages
     5. Featured-latest card
     6. Software finder
     7. Footer
   ========================================================================== */


/* ========================================================================
   1. PAGE FURNITURE
   Widths, headings, buttons, section rules — used by every page.
   ======================================================================== */

/* --------------------------------------------------------------------------
   TOKEN BRIDGE

   These pages were designed with short names (--ink, --gold, --rule). Your
   vl-base.css uses longer ones (--vl-blue, --vl-gold-ink, --vl-rule). This
   block maps one onto the other, so there is only ever ONE set of real
   colours — vl-base's. Change a colour there and it changes here too.

   It sits on .vl-page, not :root, so it cannot reach an article page.
   -------------------------------------------------------------------------- */

.vl-page {
  --ground:      var(--vl-porcelain, #FAF8F4);
  --surface:     #FFFFFF;
  --ink:         var(--vl-blue,      #1E293B);
  --ink-2:       var(--vl-graphite,  #333333);
  --body:        var(--vl-graphite,  #333333);
  --muted:       var(--vl-muted,     #5C6472);
  --rule:        var(--vl-rule,      #D8D3C8);
  --rule-soft:   var(--vl-linen,     #E6E2DA);

  /* Gold twice, on purpose. --gold is the dark, readable one for TEXT.
     --gold-bright is the shiny one, for fills and thick rules only.
     vl-base.css explains why: the bright gold fails contrast as text. */
  --gold:        var(--vl-gold-ink,  #7A5F1A);
  --gold-bright: var(--vl-gold,      #DDB849);
  --gold-hi:     var(--vl-gold,      #DDB849);
  --cream:       var(--vl-gold-wash, #FBF3DC);

  /* Grey placeholder boxes where article images go. */
  --ph-bg:       #EDE8DE;
  --ph-line:     #E1DBCE;
  --ph-text:     #9C9484;

  --serif:       var(--vl-serif);
  --sans:        var(--vl-sans);

  /* Space either side of the content. Narrows on small screens, below. */
  --gutter:      64px;

  /* How wide the content is allowed to get before it stops growing and
     centres itself. The pages were designed and tested at this width.
     Raise it for a wider site, lower it for a narrower one. */
  --wrap-max:    1440px;
}

@media (max-width: 1080px) { .vl-page { --gutter: 40px; } }
@media (max-width: 860px)  { .vl-page { --gutter: 24px; } }

/* --------------------------------------------------------------------------
   LINK UNDERLINES

   vl-base.css draws a gold underline under every link inside .entry-content.
   That is right for a link in a sentence. It is wrong under a headline, a
   card, or a button, which is most of the links on these pages.

   So: switch it off everywhere in .vl-page, then put a real border back on
   the few places that genuinely are prose links. Those rules already exist
   further down (.prose a, .callout a, and so on).
   -------------------------------------------------------------------------- */

.vl-page a:not(.wp-block-button__link):not(.vl-btn) { background-image: none; }

/* --------------------------------------------------------------------------
   ESCAPING THE THEME'S NARROW COLUMN

   WordPress squeezes everything inside a page into a column set by the
   theme — often 800px, which is right for a paragraph of text and far too
   narrow for a two-column lead story. That is why the home page had huge
   empty margins and a headline broken over four lines.

   These two rules switch that cap off for our pages only. Width is then
   decided by --wrap-max above, and by nothing else.

   It works the same on a PAGE and on a TEMPLATE, so the article index gets
   it too, with no block settings to remember and no "Full width" to tick.

   Article pages are untouched: vl-article.css and vl-paper.css set their
   own widths (1100px and 74 characters), which is what you want for
   reading, and neither carries the .vl-page class anyway.
   -------------------------------------------------------------------------- */

/* .vl-inline is left out: a block that shares a page with other content
   must keep whatever width the theme gave it. See the note below. */
.vl-page:not(.vl-inline) {
  max-width: none;
}

/* Both kinds of section get the same width and the same centring:
   .wrap      is used by the hand-written HTML
   .vl-section is used by the Query Loop blocks
   Keeping them identical is what makes the two build styles line up. */
.vl-page .wrap,
.vl-page .vl-section {
  max-width: var(--wrap-max);
  margin-left: auto;
  margin-right: auto;
}

.is-layout-constrained:has( > .vl-page:not(.vl-inline) ),
.entry-content:has( > .vl-page:not(.vl-inline) ) {
  max-width: none;
}

/* One page does not want that: the research summary, which shares a page
   with the paper. Widening the column there would widen 18,000 words of
   body text with it. Give that block .vl-inline and it stays inside the
   theme's reading column, with a smaller gutter to suit it. */
.vl-page.vl-inline { --gutter: 26px; }



.vl-page .wrap.narrow { max-width: 900px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
.vl-page .prose h2 { font-size: 26px; font-weight: 600; margin: 34px 0 14px; }
.vl-page .prose h2:first-child { margin-top: 0; }
.vl-page .prose p { font-size: 16.5px; line-height: 1.65; margin: 0 0 16px; }
.vl-page .prose a { border-bottom: 1px solid var(--gold); }
.vl-page .rhead__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-top: 18px; }
.vl-page .rhead__meta a { font-weight: 600; }
.vl-page .threeup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 26px 0 30px; }
.vl-page .threeup__item { border-top: 2px solid var(--ink); padding-top: 14px; }
.vl-page .threeup__n { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--gold); line-height: 1; margin-bottom: 8px; }
.vl-page .threeup h3 { font-size: 19px; font-weight: 600; margin-bottom: 8px; }
.vl-page .threeup p { font-size: 14.5px; line-height: 1.55; margin: 0; }
.vl-page .threeup.compact { margin: 18px 0 18px; gap: 18px; }
.vl-page .threeup.compact h3 { font-size: 16px; }
.vl-page .threeup.compact p { font-size: 13.5px; }
.vl-page .person { padding-top: 8px; padding-bottom: 44px; }
.vl-page .person__card { display: grid; grid-template-columns: 220px 1fr; gap: 32px; background: var(--surface); border: 1px solid var(--rule); border-top: 4px solid var(--gold-bright); padding: 30px 32px 32px; }
.vl-page .person__photo { height: 220px; }
.vl-page .person__text h2 { font-size: 30px; font-weight: 700; margin: 8px 0 12px; }
.vl-page .person__text p { font-size: 15.5px; line-height: 1.62; margin: 0 0 12px; }
.vl-page .wontlist { list-style: none; padding: 0; margin: 0 0 14px; }
.vl-page .wontlist li { padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 15.5px; line-height: 1.55; }
.vl-page .wontlist li:first-child { border-top: 2px solid var(--ink); }
.vl-page .cta-band { padding-top: 40px; padding-bottom: 60px; }
.vl-page .cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; background: var(--ink); padding: 34px 40px; }
.vl-page .cta-band h2 { color: #fff; font-size: 24px; font-weight: 600; }
.vl-page .cta-band p { color: #A9B4C6; font-size: 15px; margin-top: 6px; }
.vl-page .cta-band .btn { margin-top: 0; white-space: nowrap; }
.vl-page .steps { list-style: none; padding: 0; margin: 10px 0 0; }
.vl-page .step { display: grid; grid-template-columns: 84px 1fr; gap: 24px; padding: 30px 0; border-bottom: 1px solid var(--rule); }
.vl-page .step:first-child { border-top: 2px solid var(--ink); }
.vl-page .step__n { font-family: var(--serif); font-size: 40px; font-weight: 700; color: var(--gold); line-height: 1; }
.vl-page .step__body h2 { font-size: 24px; font-weight: 600; margin-bottom: 10px; }
.vl-page .step__body p { font-size: 15.5px; line-height: 1.62; margin: 0 0 10px; }
.vl-page .scale { border: 1px solid var(--rule); background: var(--surface); margin: 6px 0 16px; }
.vl-page .scale__row { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--rule-soft); font-size: 14.5px; }
.vl-page .scale__row:last-child { border-bottom: 0; }
.vl-page .scale__n { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--ink); }
.vl-page .callout { background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--gold-bright); padding: 28px 32px; margin: 24px 0 40px; }
.vl-page .callout h2 { font-size: 23px; font-weight: 600; margin: 8px 0 12px; }
.vl-page .callout p { font-size: 15.5px; line-height: 1.62; margin: 0 0 12px; }
.vl-page .callout a { border-bottom: 1px solid var(--gold); }
.vl-page .cite { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); }
.vl-page .cite__l { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #8A93A3; margin-bottom: 8px; }
.vl-page .cite code { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.vl-page .contact { display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: start; padding-bottom: 64px; max-width: 1060px; }
.vl-page .cform { display: flex; flex-direction: column; gap: 18px; }
.vl-page .cform__row.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.vl-page .field { display: flex; flex-direction: column; gap: 7px; }
.vl-page .field__l { font-size: 13px; font-weight: 600; color: var(--ink); }
.vl-page .field input, .vl-page .field select, .vl-page .field textarea {
    padding: 13px 14px; min-height: 48px; background: #fff; border: 1px solid #D8D1C2; border-radius: 2px;
    font: inherit; font-size: 15px; color: var(--ink); width: 100%; }
.vl-page .field textarea { min-height: 150px; resize: vertical; }
.vl-page .field input:focus, .vl-page .field select:focus, .vl-page .field textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.vl-page .cform__foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.vl-page .cform__foot .btn { margin-top: 0; border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.vl-page .cform__note { font-size: 13.5px; color: var(--muted); }
.vl-page .contact__aside { display: flex; flex-direction: column; gap: 20px; }
.vl-page .tightlist { list-style: none; padding: 0; margin: 12px 0 0; }
.vl-page .tightlist li { font-size: 14px; line-height: 1.55; padding: 9px 0; border-bottom: 1px solid var(--rule-soft); }
.vl-page .tightlist li:last-child { border-bottom: 0; }
.vl-page .tightp { font-size: 14px; line-height: 1.55; margin-top: 12px; }
.vl-page .tightp a { border-bottom: 1px solid var(--gold); }
.vl-page .calc-lead { padding-bottom: 52px; }
.vl-page .calcgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.vl-page .calc { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--rule); padding: 26px 26px 24px; color: inherit; position: relative; transition: border-color .14s ease; }
.vl-page .calc:hover { border-color: #C4B896; color: inherit; }
.vl-page .calc__icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: var(--cream); color: var(--gold); border-radius: 3px; margin-bottom: 6px; }
.vl-page .calc h3 { font-size: 20px; font-weight: 600; }
.vl-page .calc p { font-size: 14.5px; line-height: 1.55; flex-grow: 1; }
.vl-page .calc__status { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #8A93A3; margin-top: 6px; }
.vl-page .calcnote { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 28px 0 56px; max-width: 760px; }
.vl-page .calcnote a { border-bottom: 1px solid var(--gold); }
.vl-page .chooser { padding-bottom: 48px; }
.vl-page .qgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.vl-page .q { display: grid; grid-template-columns: 44px 1fr auto; gap: 18px; align-items: start; background: var(--surface); border: 1px solid var(--rule); padding: 22px 24px; color: inherit; transition: border-color .14s ease, transform .14s ease; }
.vl-page .q:hover { border-color: var(--vl-gold); color: inherit; transform: translateY(-1px); }
.vl-page .q--live { border-top: 4px solid var(--vl-gold); }
.vl-page .q__n { font-family: var(--serif); font-size: 30px; font-weight: 700; color: var(--gold); line-height: 1; }
.vl-page .q h3 { font-size: 19px; font-weight: 600; line-height: 1.25; margin-bottom: 8px; }
.vl-page .q p { font-size: 14.5px; line-height: 1.55; margin-bottom: 10px; }
.vl-page .q__to { font-size: 12.5px; color: var(--muted); }
.vl-page .q__to b { color: var(--ink); font-weight: 600; }
.vl-page .q__status { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8A93A3; white-space: nowrap; padding: 5px 9px; border: 1px solid var(--rule); border-radius: 999px; }
.vl-page .q__status--live { color: var(--vl-blue); background: var(--vl-gold); border-color: var(--vl-gold); }
.vl-page .later { background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--vl-gold); padding: 30px 34px; margin: 8px 0 60px; max-width: 820px; }
.vl-page .later h2 { font-size: 24px; font-weight: 600; margin: 8px 0 12px; }
.vl-page .later p { font-size: 15.5px; line-height: 1.6; margin: 0 0 6px; }
.vl-page .later a:not(.btn) { border-bottom: 1px solid var(--gold); }
.vl-page .later .btn { margin-top: 18px; }
@media (max-width: 860px) {
  .vl-page .qgrid { grid-template-columns: 1fr; }
  .vl-page .q { grid-template-columns: 36px 1fr; }
  .vl-page .q__status { grid-column: 2; justify-self: start; }
}
.vl-page .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 56px; }
.vl-page .stat { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--rule); border-top: 4px solid var(--ink); padding: 26px 26px 22px; color: inherit; transition: border-color .14s ease; }
.vl-page .stat:hover { border-color: var(--gold); color: inherit; }
.vl-page .stat__n { font-family: var(--serif); font-size: 52px; font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -0.02em; }
.vl-page .stat__n small { font-size: 26px; font-weight: 600; color: var(--gold); margin-left: 3px; }
.vl-page .stat__l { font-size: 14.5px; line-height: 1.55; flex-grow: 1; }
.vl-page .stat__tag { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #8A93A3; margin-top: 4px; }
.vl-page .zones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.vl-page .zone { background: var(--surface); border: 1px solid var(--rule); padding: 20px 20px 18px; }
.vl-page .zone--sub { grid-column: 1 / -1; background: var(--ink); border-color: var(--ink); }
.vl-page .zone--sub h3, .vl-page .zone--sub p { color: #fff; }
.vl-page .zone--sub p { color: #A9B4C6; }
.vl-page .zone--sub .zone__n { color: var(--gold-bright); }
.vl-page .zone__n { font-size: 10.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.vl-page .zone h3 { font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.vl-page .zone p { font-size: 13.5px; line-height: 1.5; margin: 0; }
@media (max-width: 1120px) {
  .vl-page .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vl-page .zones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vl-page .calcgrid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .vl-page .contact { grid-template-columns: 1fr; gap: 32px; }
  .vl-page .threeup { grid-template-columns: 1fr; gap: 18px; }
  .vl-page .person__card { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
  .vl-page .person__photo { height: 180px; max-width: 220px; }
  .vl-page .cta-band__inner { flex-direction: column; align-items: flex-start; padding: 26px; }
  .vl-page .step { grid-template-columns: 56px 1fr; gap: 16px; }
  .vl-page .step__n { font-size: 30px; }
}
@media (max-width: 620px) {
  .vl-page .stats, .vl-page .zones { grid-template-columns: 1fr; }
  .vl-page .cform__row.two { grid-template-columns: 1fr; }
  .vl-page .stat__n { font-size: 42px; }
  .vl-page .pagehead h1 { font-size: 30px; }
}

/* ========================================================================
   2. HOME PAGE
   Lead story, review cards, trust band, head-to-head, newsletter.
   ======================================================================== */

.vl-page * { box-sizing: border-box; }
.vl-page a { color: var(--gold); text-decoration: none; }
.vl-page a:hover { color: #8C6A1F; }
.vl-page h1, .vl-page h2, .vl-page h3 { margin: 0; font-family: var(--serif); color: var(--ink); letter-spacing: -0.012em; text-wrap: pretty; }
.vl-page p { margin: 0; }
.vl-page img { max-width: 100%; }
.vl-page .wrap {
  max-width: var(--wrap-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.vl-page .kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold); }
.vl-page .meta { font-size: 13px; color: var(--muted); }
.vl-page .ph {
    background: var(--ph-bg); border: 1px solid var(--ph-line); border-radius: 3px;
    display: flex; align-items: center; justify-content: center; text-align: center; }
.vl-page .ph span { font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ph-text); padding: 0 14px; }
.vl-page .sechead {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding-bottom: 14px; border-bottom: 2px solid var(--ink); margin-bottom: 30px; }
.vl-page .sechead h2 { font-size: 25px; font-weight: 600; }
.vl-page .sechead .aside { font-size: 14px; color: var(--muted); }
.vl-page .lead { display: grid; grid-template-columns: 1.32fr 1fr; gap: 44px; align-items: start; padding-top: 52px; padding-bottom: 52px; }
.vl-page .lead .ph { height: 392px; }
.vl-page .lead .text { display: flex; flex-direction: column; gap: 16px; }
.vl-page .lead h1 { font-size: 35px; line-height: 1.15; font-weight: 700; }
.vl-page .lead .dek { font-size: 16px; line-height: 1.6; }
.vl-page .lead .byline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.vl-page .readmore { font-size: 15px; font-weight: 600; color: var(--gold); border-bottom: 2px solid var(--gold); padding-bottom: 3px; align-self: flex-start; }
.vl-page .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; padding-bottom: 56px; }
.vl-page .card { display: flex; flex-direction: column; gap: 13px; }
.vl-page .card .ph { height: 184px; }
.vl-page .card h2 { font-size: 23px; line-height: 1.25; font-weight: 600; }
.vl-page .card a.title:hover h2 { color: var(--gold); }
.vl-page .card .dek { font-size: 15px; line-height: 1.55; }
.vl-page .finder { padding-top: 8px; padding-bottom: 56px; }
.vl-page .fcard {
    max-width: 940px; margin: 0 auto; background: var(--surface);
    border: 1px solid var(--rule); border-top: 4px solid var(--gold-bright);
    padding: 34px 40px 34px; }
.vl-page .fhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.vl-page .fbars { display: flex; gap: 7px; }
.vl-page .fbars i { display: block; width: 46px; height: 4px; border-radius: 2px; background: #EAE5DA; }
.vl-page .fbars i.done { background: var(--gold-bright); }
.vl-page .fbars i.now { background: #DCCFA8; }
.vl-page .fbody { min-height: 400px; }
.vl-page .fbody h3 { font-size: 27px; line-height: 1.22; font-weight: 600; }
.vl-page .fhelp { font-size: 15px; line-height: 1.55; color: #6B7686; margin-top: 8px; margin-bottom: 18px; }
.vl-page .fopts { display: flex; flex-direction: column; gap: 11px; }
.vl-page .fopt {
    display: flex; align-items: center; gap: 15px; width: 100%; text-align: left;
    padding: 16px 20px; min-height: 56px; border: 1px solid var(--rule); background: var(--surface);
    border-radius: 3px; cursor: pointer; font: inherit; transition: border-color .14s ease, background .14s ease; }
.vl-page .fopt:hover { border-color: #C4B896; background: #FFFDF8; }
.vl-page .fopt .dot { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; background: var(--surface); border: 2px solid #D8D1C2; }
.vl-page .fopt.on { border: 2px solid var(--gold); background: #FFFCF4; }
.vl-page .fopt.on .dot { background: var(--gold-bright); border-color: var(--gold); }
.vl-page .fopt .l { font-size: 16px; font-weight: 600; color: var(--ink); }
.vl-page .fopt .s { font-size: 13px; color: var(--muted); margin-top: 2px; }
.vl-page .fnav { display: flex; align-items: center; gap: 24px; margin-top: 22px; flex-wrap: wrap; }
.vl-page .flink { background: none; border: 0; padding: 11px 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; }
.vl-page .flink:hover { color: var(--ink); }
.vl-page .fchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.vl-page .fchip { padding: 6px 13px; background: var(--cream); border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--body); }
.vl-page .fmatch { border: 1px solid var(--rule); background: #FFFCF4; padding: 26px 28px; display: flex; gap: 26px; align-items: flex-start; }
.vl-page .fmatch .name { font-family: var(--serif); font-size: 30px; font-weight: 700; color: var(--ink); line-height: 1.15; margin: 9px 0; }
.vl-page .fmatch .why { font-size: 15px; line-height: 1.6; max-width: 560px; }
.vl-page .fscore { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.vl-page .fscore .n { width: 62px; height: 62px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; }
.vl-page .fscore .c { font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.vl-page .frunners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 12px; }
.vl-page .frunner { border: 1px solid var(--rule); padding: 16px 18px; }
.vl-page .frunner .n { font-size: 16px; font-weight: 600; color: var(--ink); }
.vl-page .frunner .d { font-size: 13px; line-height: 1.5; color: #6B7686; margin-top: 5px; }
.vl-page .fsub { font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: #8A93A3; margin-top: 22px; }
.vl-page .trust { padding-top: 54px; padding-bottom: 54px; background: var(--ink); }
.vl-page .trust h2 { color: #fff; font-size: 29px; font-weight: 600; }
.vl-page .trust .sub { color: #A9B4C6; font-size: 15px; margin: 8px 0 34px; }
.vl-page .tgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.vl-page .titem { display: flex; flex-direction: column; gap: 10px; }
.vl-page .titem .h { font-size: 16px; font-weight: 600; color: #fff; }
.vl-page .titem .p { font-size: 14px; line-height: 1.6; color: #A9B4C6; }
.vl-page .btn {
    display: inline-block; margin-top: 34px; padding: 14px 26px; min-height: 44px;
    background: var(--gold-bright); color: var(--ink); font-size: 14px; font-weight: 600; border-radius: 2px; }
.vl-page .btn:hover { background: #C9962F; color: var(--ink); }

/* A button is not a prose link. vl-base paints every link inside
   .entry-content gold with a selector three classes deep, which was
   winning here and putting brown text on the gold fill. Same shape, one
   class deeper: navy on the solid button, gold on the outlined one. */
.vl-page a.btn:not(.wp-block-button__link):not(.vl-btn),
.vl-page a.btn:hover:not(.wp-block-button__link):not(.vl-btn) { color: var(--ink); }
.vl-page a.btn.btn--ghost:not(.wp-block-button__link):not(.vl-btn),
.vl-page a.btn.btn--ghost:hover:not(.wp-block-button__link):not(.vl-btn) { color: var(--gold-bright); }
.vl-page .starthere { padding-top: 54px; padding-bottom: 54px; }
.vl-page .guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.vl-page .guide { display: flex; flex-direction: column; gap: 10px; }
.vl-page .guide .num { font-family: var(--serif); font-size: 30px; font-weight: 700; color: var(--gold); line-height: 1; }
.vl-page .guide h3 { font-size: 19px; line-height: 1.3; font-weight: 600; }
.vl-page .guide .d { font-size: 14px; line-height: 1.55; }
.vl-page .guide.empty .num { color: #C8C0AF; }
.vl-page .guide.empty h3 { color: #8A93A3; }
.vl-page .guide.empty .d { color: var(--ph-text); }
.vl-page .news {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center;
    padding-top: 46px; padding-bottom: 46px; background: var(--cream);
    border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.vl-page .news h2 { font-size: 25px; font-weight: 600; }
.vl-page .news p { font-size: 15px; line-height: 1.55; margin-top: 8px; }
.vl-page .newsform { display: flex; gap: 10px; }
.vl-page .newsform input {
    flex-grow: 1; min-width: 0; padding: 14px 16px; min-height: 48px; background: #fff;
    border: 1px solid #D8D1C2; border-radius: 2px; font: inherit; font-size: 15px; color: var(--ink); }
.vl-page .newsform input::placeholder { color: var(--ph-text); }
.vl-page .newsform button {
    padding: 14px 26px; min-height: 48px; background: var(--gold-bright); color: var(--ink);
    border: 0; border-radius: 2px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.vl-page .newsform button:hover { background: #C9962F; }
.vl-page .newsnote { font-size: 13px; color: var(--muted); margin-top: 10px; min-height: 18px; }
@media (max-width: 1080px) {
  .vl-page .lead { grid-template-columns: 1fr; gap: 28px; }
  .vl-page .lead .ph { height: 320px; }
  .vl-page .lead h1 { font-size: 32px; }
}
@media (max-width: 1120px) {
  .vl-page .cards { grid-template-columns: 1fr; gap: 32px; }
  .vl-page .tgrid { grid-template-columns: 1fr; gap: 28px; }
  .vl-page .guides { grid-template-columns: 1fr; gap: 28px; }
  .vl-page .news { grid-template-columns: 1fr; gap: 22px; }
  .vl-page .fcard { padding: 26px 22px; }
  .vl-page .fbody { min-height: 0; }
  .vl-page .fbody h3 { font-size: 23px; }
  .vl-page .fmatch { flex-direction: column; gap: 18px; }
  .vl-page .frunners { grid-template-columns: 1fr; }
  .vl-page .lead h1 { font-size: 28px; }
  .vl-page .sechead h2, .vl-page .trust h2, .vl-page .news h2 { font-size: 22px; }
  .vl-page .sechead .aside { display: none; }
}
@media (max-width: 520px) {
  .vl-page .lead .ph { height: 210px; }
  .vl-page .card .ph { height: 170px; }
  .vl-page .newsform { flex-direction: column; }
  .vl-page .fbars i { width: 32px; }
}
.vl-finder { padding-top: 8px; padding-bottom: 56px; }
@media (max-width: 860px) {
          }
@media (max-width: 520px) {
  }

/* ========================================================================
   3. ARTICLE INDEX
   Everything the [vl_articles] shortcode draws: page header, filter
   buttons, the big card, the rows, the sidebar rail and the page numbers.
   The same rules also style the /reviews/ archive if you use them there.
   ======================================================================== */

.vl-page .pagehead { padding-top: 48px; padding-bottom: 26px; }
.vl-page .pagehead .kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold); }
.vl-page .pagehead h1 { font-size: 42px; line-height: 1.1; font-weight: 700; margin-top: 12px; }
.vl-page .pagehead .dek { font-size: 17px; line-height: 1.6; max-width: 660px; margin-top: 14px; }
/* A centred title block. Used where the page opens with a centred brand
   plate underneath it — the methodology page — so the words and the logo
   read as one unit instead of one left and one middle. Add the modifier
   to the block: class="pagehead pagehead--center wrap". */
.vl-page .pagehead--center { text-align: center; }
.vl-page .pagehead--center .dek { margin-left: auto; margin-right: auto; }

.vl-page .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 2px solid var(--ink); }
.vl-page .pills { display: flex; gap: 8px; flex-wrap: wrap; }
.vl-page .pill { padding: 9px 16px; min-height: 40px; border: 1px solid var(--rule); background: var(--surface); border-radius: 999px; font: inherit; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; transition: border-color .14s ease, background .14s ease; }
.vl-page .pill:hover { border-color: #C4B896; }
.vl-page .pill.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.vl-page .toolright { display: flex; align-items: center; gap: 14px; }
.vl-page .count { font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.vl-page .sortsel { padding: 9px 12px; min-height: 40px; border: 1px solid var(--rule); background: var(--surface); border-radius: 2px; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.vl-page .layout { display: grid; grid-template-columns: 1fr 320px; gap: 52px; padding-top: 34px; padding-bottom: 60px; align-items: start; }
.vl-page .feature { display: grid; grid-template-columns: 420px 1fr; gap: 32px; padding: 30px 0 34px; border-bottom: 2px solid var(--ink); margin-bottom: 8px; }
.vl-page .feature .thumb { height: 260px; }
.vl-page .feature .rowtext { gap: 11px; }
.vl-page .feature h2 { font-size: 31px; line-height: 1.16; font-weight: 700; }
.vl-page .feature .dek { font-size: 16.5px; line-height: 1.55; }
.vl-page .badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; background: var(--ink); border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: #fff; }
.vl-page .badge b { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-hi); }
.vl-page .feature .readmore { font-size: 15px; font-weight: 600; color: var(--gold); border-bottom: 2px solid var(--gold); padding-bottom: 3px; align-self: flex-start; margin-top: 3px; }
.vl-page .restlabel { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #8A93A3; padding: 22px 0 4px; }
.vl-page .list { display: flex; flex-direction: column; }
.vl-page .row { display: grid; grid-template-columns: 240px 1fr; gap: 26px; padding: 26px 0; border-bottom: 1px solid var(--rule); }
.vl-page .row:first-child { padding-top: 0; }
.vl-page .thumb { height: 150px; background: var(--ph-bg); border: 1px solid var(--ph-line); border-radius: 3px; display: flex; align-items: center; justify-content: center; }
.vl-page .thumb span { font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ph-text); }
.vl-page .rowtext { display: flex; flex-direction: column; gap: 9px; }
.vl-page .rowtop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vl-page .tag { font-size: 10.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold); }
.vl-page .row h2 { font-size: 22px; line-height: 1.26; font-weight: 600; }
.vl-page .row h2 a { color: var(--ink); }
.vl-page .row h2 a:hover { color: var(--gold); }
.vl-page .row .dek { font-size: 15px; line-height: 1.55; }
.vl-page .row .meta { font-size: 13px; color: var(--muted); }
.vl-page .empty { padding: 60px 0; text-align: center; color: var(--muted); font-size: 15px; }
.vl-page .rail { display: flex; flex-direction: column; gap: 28px; position: sticky; top: 96px; }
.vl-page .railcard { background: var(--surface); border: 1px solid var(--rule); border-top: 4px solid var(--gold-bright); padding: 22px 22px 24px; }
.vl-page .railcard h3 { font-size: 19px; font-weight: 600; line-height: 1.25; }
.vl-page .railcard p { font-size: 14px; line-height: 1.55; margin-top: 9px; }
.vl-page .railbtn { display: inline-block; margin-top: 16px; padding: 12px 20px; min-height: 44px; background: var(--gold-bright); color: var(--ink); font-size: 14px; font-weight: 600; border-radius: 2px; }
.vl-page .railbtn:hover { background: #C9962F; color: var(--ink); }
.vl-page .railplain { background: var(--surface); border: 1px solid var(--rule); padding: 22px; }
.vl-page .railhead { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #8A93A3; padding-bottom: 12px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; }
.vl-page .mostread { display: flex; flex-direction: column; }
.vl-page .mostread a { display: flex; gap: 13px; padding: 14px 0; border-bottom: 1px solid var(--rule-soft); color: var(--ink); }
.vl-page .mostread a:last-child { border-bottom: 0; padding-bottom: 0; }
.vl-page .mostread a:hover .t { color: var(--gold); }
.vl-page .mostread .n { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--gold); line-height: 1.1; flex-shrink: 0; }
.vl-page .mostread .t { font-family: var(--serif); font-size: 16px; line-height: 1.3; font-weight: 600; }
.vl-page .railnews input { width: 100%; padding: 13px 14px; min-height: 46px; background: #fff; border: 1px solid #D8D1C2; border-radius: 2px; font: inherit; font-size: 15px; margin-top: 12px; }
.vl-page .railnews button { width: 100%; padding: 13px 18px; min-height: 46px; margin-top: 9px; background: var(--gold-bright); color: var(--ink); border: 0; border-radius: 2px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.vl-page .railnews button:hover { background: #C9962F; }
.vl-page .railnote { font-size: 12.5px; color: var(--muted); margin-top: 9px; min-height: 16px; }

/* ---- The sidebar's plain "read more" link ------------------------------ */
.vl-page .rail .readmore { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--gold); border-bottom: 2px solid var(--gold); padding-bottom: 3px; }

/* ---- Page numbers ------------------------------------------------------ */
.vl-page .pager { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 34px; }
.vl-page .pager a, .vl-page .pager span { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--rule); background: var(--surface); border-radius: 2px; font-size: 14px; font-weight: 500; color: var(--ink); }
.vl-page .pager a:hover { border-color: #C4B896; }
.vl-page .pager .on { background: var(--ink); border-color: var(--ink); color: #fff; }
.vl-page .pager .off { color: #B9B3A6; background: transparent; border-color: transparent; }

/* ---- The filter buttons are links, not <button>s -----------------------
   Links, so each filtered view has its own address that can be shared and
   indexed. These two rules give a link the shape a button already had. */
.vl-page a.pill { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.vl-page a.pill.on:hover { background: var(--ink); }

/* ---- Link colour -------------------------------------------------------
   vl-base.css paints every link inside .entry-content gold, using a
   selector three classes deep. The links below are headlines, buttons and
   pictures rather than prose, so each is written in the same shape — one
   class deeper — to take the colour back. Change nothing here without
   checking the same rule in vl-base.css. */
.vl-page a.pill:not(.wp-block-button__link):not(.vl-btn),
.vl-page .pager a:not(.wp-block-button__link):not(.vl-btn),
.vl-page a.railbtn:not(.wp-block-button__link):not(.vl-btn),
.vl-page .mostread a:not(.wp-block-button__link):not(.vl-btn),
.vl-page .feature h2 a:not(.wp-block-button__link):not(.vl-btn),
.vl-page .row h2 a:not(.wp-block-button__link):not(.vl-btn) { color: var(--ink); }

.vl-page a.pill.on:not(.wp-block-button__link):not(.vl-btn) { color: #FFFFFF; }

.vl-page .feature h2 a:hover:not(.wp-block-button__link):not(.vl-btn),
.vl-page .row h2 a:hover:not(.wp-block-button__link):not(.vl-btn) { color: var(--gold); }

/* ---- Article index on smaller screens ---------------------------------- */
@media (max-width: 1080px) {
  .vl-page .layout { grid-template-columns: 1fr 280px; gap: 36px; }
  .vl-page .pagehead h1 { font-size: 36px; }
}

@media (max-width: 900px) {
  .vl-page .layout { grid-template-columns: 1fr; gap: 44px; }
  .vl-page .rail { position: static; }
  .vl-page .feature { grid-template-columns: 320px 1fr; gap: 24px; }
  .vl-page .feature .thumb { height: 210px; }
  .vl-page .feature h2 { font-size: 26px; }
  .vl-page .pagehead h1 { font-size: 30px; }
  .vl-page .pagehead .dek { font-size: 16px; }
  .vl-page .toolbar { align-items: flex-start; }
}

@media (max-width: 620px) {
  .vl-page .row { grid-template-columns: 1fr; gap: 14px; }
  .vl-page .thumb { height: 180px; }
  .vl-page .feature { grid-template-columns: 1fr; gap: 16px; }
  .vl-page .feature .thumb { height: 200px; }
  .vl-page .feature h2 { font-size: 23px; }
  .vl-page .toolright { width: 100%; justify-content: space-between; }
}

@media (max-width: 460px) {
  .vl-page .pills { gap: 6px; }
  .vl-page .pill { padding: 8px 13px; font-size: 13px; }
}

/* ========================================================================
   4. THE OTHER FIVE PAGES
   About, Methodology, Contact, Calculators, Research.
   ======================================================================== */

.vl-page .mast__inner { display: flex; align-items: center; justify-content: space-between; height: 84px; gap: 24px; }
.vl-page .brand__logo { height: 64px; width: auto; display: block; }
.vl-page .dd__menu { position: absolute; top: 100%; left: -14px; min-width: 300px; padding-top: 10px; display: none; z-index: 40; }
.vl-page .dd__menu::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; }
.vl-page .dd__menu > div { background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--vl-gold); box-shadow: 0 14px 34px rgba(30,41,59,.14); padding: 8px; }
.vl-page .dd__menu--wide { min-width: 380px; }
.vl-page .dd__menu a { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; color: var(--ink); border-radius: 2px; }
.vl-page .dd__menu a:hover { background: var(--cream); color: var(--ink); }
.vl-page .dd__menu strong { font-size: 14px; font-weight: 600; }
.vl-page .dd__menu span { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.vl-page .sl__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 22px 16px; border-bottom: 1px solid var(--rule); }
.vl-page .sl__head h2 { font-size: 22px; font-weight: 600; margin-top: 6px; }
.vl-page .sl__close { background: none; border: 0; font-size: 28px; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px 8px; }
.vl-page .sl__body { flex-grow: 1; overflow-y: auto; padding: 8px 22px; }
.vl-page .sl__empty { padding: 26px 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.vl-page .sl__item { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; padding: 14px 0; border-bottom: 1px solid var(--rule-soft); }
.vl-page .sl__item .k { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.vl-page .sl__item a { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.vl-page .sl__item a:hover { color: var(--gold); }
.vl-page .sl__item .s { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.vl-page .sl__item .rm { grid-column: 1 / -1; justify-self: start; background: none; border: 0; padding: 4px 0; font: inherit; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.vl-page .sl__item .rm:hover { color: var(--ink); }
.vl-page .sl__foot { padding: 14px 22px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12.5px; color: var(--muted); }
.vl-page .vl-finder__acts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.vl-page .vl-finder__acts .vl-finder__more { margin-top: 0; }
.vl-page .rhero, .vl-page .ahero { background: var(--vl-blue); color: #E6E2DA; }
.vl-page .ahero + .wrap.narrow { padding-top: 56px; }
.vl-page .rhero + .rlayout { padding-top: 48px; }
.vl-page .rhero__inner, .vl-page .ahero__inner { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: center; padding-top: 48px; padding-bottom: 48px; }
.vl-page .ahero__inner { grid-template-columns: 460px 1fr; }
.vl-page .rhero h1, .vl-page .ahero h1 { color: #fff; font-size: 34px; line-height: 1.16; font-weight: 700; margin: 14px 0 16px; text-wrap: pretty; }
.vl-page .rhero__dek, .vl-page .ahero__dek { font-size: 16.5px; line-height: 1.6; color: #C5CBD6; max-width: 700px; margin: 0; }
.vl-page .rhero__meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: #97A1B0; margin-top: 16px; }
.vl-page .rhero__cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.vl-page .rhero__cta .btn { margin-top: 0; }
.vl-page .rhero__len { font-size: 13px; color: #97A1B0; }
.vl-page .rhero__logo, .vl-page .ahero__logo { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 30px rgba(0,0,0,.35)); }
.vl-page .kicker--onnavy { color: var(--vl-gold); }
.vl-page .btn--ghost { background: transparent; color: var(--vl-gold); border: 1px solid rgba(221,184,73,.6); }
.vl-page .btn--ghost:hover { background: rgba(221,184,73,.12); color: var(--vl-gold); }
.vl-page .rlayout { display: grid; grid-template-columns: 340px 1fr; gap: 52px; align-items: start; padding-top: 44px; padding-bottom: 20px; }
.vl-page .rtoc { position: sticky; top: 100px; background: var(--surface); border: 1px solid var(--rule); padding: 20px 22px 12px; max-height: calc(100vh - 110px); overflow-y: auto; }
.vl-page .sechead--tight { margin-bottom: 12px; padding-bottom: 10px; }
.vl-page .sechead--tight h2 { font-size: 19px; }
.vl-page .rtoc__list { list-style: none; margin: 0; padding: 0; }
.vl-page .rtoc__list > li { padding: 10px 0; border-bottom: 1px solid var(--rule-soft); }
.vl-page .rtoc__list > li:last-child { border-bottom: 0; }
.vl-page .rtoc__list > li > a { display: flex; gap: 10px; font-family: var(--serif); font-size: 15.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.vl-page .rtoc__list > li > a b { color: var(--gold); flex-shrink: 0; }
.vl-page .rtoc__list > li > a:hover { color: var(--gold); }
.vl-page .rtoc__list ol { list-style: none; margin: 8px 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.vl-page .rtoc__list ol a { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.vl-page .rtoc__list ol a:hover { color: var(--ink); }
.vl-page .stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 48px; }
.vl-page .series { list-style: none; margin: 0 0 36px; padding: 0; }
.vl-page .series__item { display: grid; grid-template-columns: 70px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.vl-page .series__item:first-child { border-top: 2px solid var(--ink); }
.vl-page .series__n { font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--gold); }
.vl-page .series__item strong { display: block; font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.vl-page .series__item a:hover strong { color: var(--gold); }
.vl-page .series__item .meta { display: block; margin-top: 4px; }
.vl-page .series__item--next strong { color: var(--muted); }
.vl-page .sechead a.aside:not(.wp-block-button__link):not(.vl-btn) { color: var(--gold); font-weight: 600; }
.vl-page .vl-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.vl-page .vl-footer__logo { height: 34px; width: auto; max-width: 160px; display: block; object-fit: contain; }
.vl-page .vl-footer__name { font-size: 18px; font-weight: 700; line-height: 1; letter-spacing: .2px; color: #fff; }
.vl-page .vl-footer__name em { font-style: normal; color: var(--vl-f-gold); }
.vl-page .vl-footer__blurb { margin: 0; max-width: 30ch; font-size: 13.5px; color: var(--vl-f-muted); }
.vl-page .vl-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vl-page .vl-footer__list a { color: var(--vl-f-ink); font-size: 14px; transition: color .15s ease; }
.vl-page .vl-footer__list a:hover { color: var(--vl-f-gold); text-decoration: underline; text-underline-offset: 3px; }
.vl-page .vl-footer__form { display: flex; gap: 8px; margin-top: 10px; }
.vl-page .vl-footer__form input { flex-grow: 1; min-width: 0; padding: 10px 12px; min-height: 42px; background: rgba(255,255,255,.06); border: 1px solid var(--vl-f-rule); border-radius: 2px; color: #fff; font: inherit; font-size: 14px; }
.vl-page .vl-footer__form input::placeholder { color: var(--vl-f-muted); }
.vl-page .vl-footer__form button { padding: 10px 16px; min-height: 42px; background: var(--vl-f-gold); color: var(--vl-f-bg); border: 0; border-radius: 2px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.vl-page .vl-footer__bottom { grid-column: 1 / -1; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--vl-f-rule); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; }
.vl-page .vl-footer__copy { margin: 0; font-size: 12.5px; color: var(--vl-f-muted); }
@media (max-width: 1180px) {
  .vl-page .dd__menu { position: static; display: block; min-width: 0; background: transparent; border: 0; box-shadow: none; padding: 0 0 8px 14px; }
  .vl-page .dd__menu a { color: #E6E2DA; padding: 9px 0; }
  .vl-page .dd__menu a:hover { background: transparent; color: var(--vl-gold); }
  .vl-page .dd__menu strong { font-weight: 500; font-size: 14.5px; }
  .vl-page .dd__menu span { display: none; }
  .vl-page .rhero__inner, .vl-page .ahero__inner { grid-template-columns: 1fr; gap: 26px; }
  .vl-page .rhero__logo, .vl-page .ahero__logo { max-width: 320px; }
  .vl-page .ahero__logo { order: -1; }
  .vl-page .rlayout { grid-template-columns: 1fr; gap: 36px; }
  .vl-page .rtoc { position: static; max-height: none; }
  .site-footer { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .vl-page .brand__logo { height: 42px; }
  .vl-page .brand__name { font-size: 22px; }
  .vl-page .rhero h1, .vl-page .ahero h1 { font-size: 26px; }
  .vl-page .stats--2 { grid-template-columns: 1fr; }
  .site-footer { grid-template-columns: 1fr; }
  .vl-page .sl__item { grid-template-columns: 1fr auto; }
}

.vl-page .mdoc { display: grid; grid-template-columns: 220px 1fr; gap: 56px; align-items: start; max-width: 1180px; padding-bottom: 20px; }
.vl-page .mtoc { position: sticky; top: 96px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--rule); padding: 18px 18px 14px; }
.vl-page .mtoc a { font-size: 13.5px; color: var(--ink); padding: 7px 0; border-bottom: 1px solid var(--rule-soft); }
.vl-page .mtoc a:last-child { border-bottom: 0; }
.vl-page .mtoc a:hover { color: var(--gold); }
.vl-page .mbody { max-width: 760px; }
.vl-page [id] { scroll-margin-top: 104px; }
.vl-page .mbody h2 { scroll-margin-top: 100px; font-size: 27px; margin-top: 44px; padding-top: 22px; border-top: 2px solid var(--ink); }
.vl-page .mbody h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.vl-page .mbody h3 { font-size: 19px; font-weight: 600; margin: 26px 0 10px; }
.vl-page .mbody .small { font-size: 14px; color: var(--muted); }
.vl-page .ruled { list-style: none; padding: 0; margin: 12px 0 18px; }
.vl-page .ruled li { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 15.5px; line-height: 1.55; }
.vl-page .ruled li:first-child { border-top: 1px solid var(--rule); }
.vl-page .ruled strong { color: var(--ink); }

/* ---- Methodology imagery -----------------------------------------------
   Artwork sits on a navy plate rather than loose on the cream page, so a
   transparent PNG or a pale photograph reads as deliberate. The plate is
   painted on the image itself, which is what lets .wrap keep supplying
   the page gutter around it. */
.vl-page .mfig { margin: 26px 0; }
.vl-page .mfig img { display: block; box-sizing: border-box; width: 100%; height: auto; max-height: 520px; padding: 24px; background: var(--ink); border-radius: 18px; object-fit: contain; }
.vl-page .mfig figcaption { margin-top: 10px; font-size: 14.5px; font-style: italic; line-height: 1.5; text-align: center; color: var(--muted); }
.vl-page .mfig.is-half { max-width: 470px; margin-left: auto; margin-right: auto; }

/* The logo plate. Plain at the top of the page, .is-end to close it. */
.vl-page .mmark { max-width: 1180px; margin: 26px auto 34px; }
.vl-page .mmark img { display: block; box-sizing: border-box; width: 100%; height: auto; max-width: 560px; margin-left: auto; margin-right: auto; padding: 34px 32px; background: var(--ink); border-radius: 18px; object-fit: contain; }
.vl-page .mmark.is-end { margin: 44px auto 8px; }
.vl-page .mmark.is-end img { max-width: 340px; padding: 26px 32px; }

@media (max-width: 780px) {
  .vl-page .mfig img { padding: 16px; max-height: 360px; }
  .vl-page .mfig.is-half { max-width: 100%; }
  .vl-page .mmark img { padding: 24px 20px; max-width: 100%; }
}
.vl-page .bignum { display: grid; grid-template-columns: 180px 1fr; gap: 22px; align-items: center; background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--gold-bright); padding: 22px 26px; margin: 14px 0 6px; }
.vl-page .bignum__n { font-family: var(--serif); font-size: 56px; font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -0.02em; }
.vl-page .bignum__n small { font-size: 20px; color: var(--gold); font-weight: 600; margin-left: 4px; }
.vl-page .bignum__l { font-size: 15px; line-height: 1.6; }
.vl-page .mtable { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 8px 0 12px; background: var(--surface); }
.vl-page .mtable th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: #6B7686; padding: 10px 14px; border-bottom: 2px solid var(--ink); background: var(--cream); }
.vl-page .mtable td { padding: 11px 14px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; line-height: 1.5; }
.vl-page .mtable td:first-child { font-weight: 600; color: var(--ink); white-space: nowrap; }
.vl-page .mtable td:nth-child(2) { font-family: var(--serif); font-weight: 700; color: var(--gold); white-space: nowrap; }
.vl-page .callout-line { border-left: 3px solid var(--gold-bright); padding: 8px 0 8px 18px; font-size: 16px; line-height: 1.55; color: var(--ink); margin: 18px 0 10px; }
.vl-page .zoneacc { border: 1px solid var(--rule); background: var(--surface); margin-bottom: 10px; }
.vl-page .zoneacc summary { display: grid; grid-template-columns: 74px 1fr; column-gap: 16px; row-gap: 2px; align-items: baseline; padding: 16px 20px; cursor: pointer; list-style: none; }
.vl-page .zoneacc summary::-webkit-details-marker { display: none; }
.vl-page .zoneacc summary::after { content: "+"; grid-column: 2; justify-self: end; grid-row: 1; font-family: var(--serif); font-size: 22px; color: var(--gold); line-height: 1; }
.vl-page .zoneacc[open] summary::after { content: "–"; }
.vl-page .zoneacc__n { font-size: 10.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold); grid-row: 1 / span 2; }
.vl-page .zoneacc__t { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--ink); padding-right: 30px; }
.vl-page .zoneacc__s { font-size: 13px; color: var(--muted); grid-column: 2; }
.vl-page .zoneacc .mtable { margin: 0; border-top: 1px solid var(--rule); }
.vl-page .zoneacc .mtable td { padding: 10px 20px; }
.vl-page .twopanel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 16px 0 8px; }
.vl-page .panel { border: 1px solid var(--rule); background: var(--surface); padding: 18px 20px 14px; }
.vl-page .panel--do { border-top: 4px solid var(--gold-bright); }
.vl-page .panel--dont { border-top: 4px solid var(--ink); }
.vl-page .panel__h { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #6B7686; margin-bottom: 10px; }
.vl-page .panel ul { list-style: none; margin: 0; padding: 0; }
.vl-page .panel li { font-size: 14.5px; line-height: 1.5; padding: 8px 0; border-bottom: 1px solid var(--rule-soft); }
.vl-page .panel li:last-child { border-bottom: 0; }
.vl-page .faq { margin: 12px 0 0; }
.vl-page .faq dt { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--ink); margin: 20px 0 6px; }
.vl-page .faq dt:first-child { margin-top: 6px; }
.vl-page .faq dd { margin: 0; font-size: 15.5px; line-height: 1.6; }
.vl-page .faq dd a { border-bottom: 1px solid var(--gold); }
@media (max-width: 1000px) {
  .vl-page .mdoc { grid-template-columns: 1fr; gap: 24px; }
  .vl-page .mtoc { position: static; flex-direction: row; flex-wrap: wrap; gap: 2px 18px; }
  .vl-page .mtoc .railhead { width: 100%; }
  .vl-page .mtoc a { border-bottom: 0; padding: 6px 0; }
  .vl-page .twopanel { grid-template-columns: 1fr; }
  .vl-page .bignum { grid-template-columns: 1fr; gap: 8px; }
  .vl-page .mtable td:first-child { white-space: normal; }
}

/* ------------------------------------------------------------------------
   RESEARCH FRONT MATTER  —  class: vl-research

   This block sits at the top of the paper's own page rather than on a
   page of its own, so it lives inside the theme's reading column (about
   700px) instead of the 1440px our other pages get. Everything below
   re-fits the same components to that narrower space.

   The grids use auto-fit rather than a fixed column count, so they
   reflow to whatever width the column happens to be. Nothing here
   depends on guessing the theme's measure.
   ------------------------------------------------------------------------ */

/* One measure for the whole summary, so it never sprawls even if the
   theme's column turns out to be wide. .wrap already centres to it. */
.vl-research { --wrap-max: 780px; }

.vl-research .rhero__inner { grid-template-columns: 1fr; gap: 24px; padding-top: 36px; padding-bottom: 36px; }
.vl-research .rhero h1 { font-size: 29px; }
.vl-research .rhero__logo { max-width: 260px; margin: 0 auto; }
.vl-research .rmain { padding-top: 36px; padding-bottom: 20px; }
.vl-research .stats { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin-bottom: 44px; }
.vl-research .stat { padding: 22px 22px 18px; }
.vl-research .stat__n { font-size: 40px; }
.vl-research .stat__n small { font-size: 21px; }
.vl-research .zones { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ---- Contents list for the paper below ---------------------------------
   Numbered by CSS, so adding a section to the paper never means editing
   a number here. vl-pages.js rebuilds the list itself on load. */
.vl-research .ptoc { counter-reset: ptoc; margin-bottom: 30px; }
.vl-research .ptoc ol { list-style: none; margin: 0; padding: 0; }
.vl-research .ptoc li { counter-increment: ptoc; border-bottom: 1px solid var(--rule-soft); }
.vl-research .ptoc li:first-child { border-top: 1px solid var(--rule); }
.vl-research .ptoc a { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: baseline; padding: 13px 4px; font-family: var(--serif); font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.vl-research .ptoc a::before { content: counter(ptoc, decimal-leading-zero); font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--gold); }
.vl-research .ptoc a:hover { color: var(--gold); background: var(--cream); }

/* Link colour. vl-base paints every link inside .entry-content gold with
   a selector three classes deep, which would bleed into the text of a
   whole stat card. Same shape, one class deeper, to take it back. */
.vl-page a.stat:not(.wp-block-button__link):not(.vl-btn),
.vl-page a.stat:hover:not(.wp-block-button__link):not(.vl-btn) { color: var(--body); }
.vl-research .ptoc a:not(.wp-block-button__link):not(.vl-btn) { color: var(--ink); }
.vl-research .ptoc a:hover:not(.wp-block-button__link):not(.vl-btn) { color: var(--gold); }

.vl-research .paperstart { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #8A93A3; text-align: center; margin: 8px 0 0; padding: 20px 0 4px; border-top: 2px solid var(--ink); }

@media (max-width: 620px) {
  .vl-research .rhero h1 { font-size: 24px; }
  .vl-research .stats { grid-template-columns: 1fr; }
  .vl-research .zones { grid-template-columns: 1fr; }
}

/* ========================================================================
   5. FEATURED-LATEST CARD
   Drawn by [vl_featured]. Not scoped, so it works on archives too.
   ======================================================================== */

.vl-feature {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 32px;
  padding: 30px 0 34px;
  border-bottom: 2px solid var(--vl-blue, #1E293B);
  margin-bottom: 8px;
  font-family: var(--vl-sans);
}

.vl-feature__media {
  display: block;
  height: 260px;
  border-radius: 3px;
  overflow: hidden;
  background: #EDE8DE;
}
.vl-feature__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vl-feature__text { display: flex; flex-direction: column; gap: 11px; }
.vl-feature__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.vl-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  background: var(--vl-blue, #1E293B);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.vl-badge b { width: 6px; height: 6px; border-radius: 50%; background: var(--vl-gold, #DDB849); }

.vl-tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--vl-gold-ink, #7A5F1A);
}

.vl-feature h2 {
  font-family: var(--vl-serif);
  font-size: 31px;
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: pretty;
}
.vl-feature h2 a { color: var(--vl-blue, #1E293B); text-decoration: none; }
.vl-feature h2 a:hover { color: var(--vl-gold-ink, #7A5F1A); }

.vl-feature__dek { font-size: 16.5px; line-height: 1.55; color: var(--vl-graphite, #333333); margin: 0; }
.vl-meta { font-size: 13px; color: var(--vl-muted, #5C6472); }

.vl-feature__more {
  align-self: flex-start;
  margin-top: 3px;
  font-size: 15px;
  font-weight: 600;
  color: var(--vl-gold-ink, #7A5F1A);
  border-bottom: 2px solid var(--vl-gold-ink, #7A5F1A);
  padding-bottom: 3px;
  text-decoration: none;
}

@media (max-width: 900px) {
  .vl-feature { grid-template-columns: 320px 1fr; gap: 24px; }
  .vl-feature__media { height: 210px; }
  .vl-feature h2 { font-size: 26px; }
}

@media (max-width: 620px) {
  .vl-feature { grid-template-columns: 1fr; gap: 16px; }
  .vl-feature__media { height: 200px; }
  .vl-feature h2 { font-size: 23px; }
}

/* ========================================================================
   6. SOFTWARE FINDER
   Drawn by vl-pages.js. Not scoped, so it works on any page.
   ======================================================================== */

.vl-finder { padding-top: 8px; padding-bottom: 56px; }

.vl-finder__card {
  max-width: 940px;
  margin: 0 auto;
  background: #FFFFFF;
  border: 1px solid var(--vl-rule, #D8D3C8);
  border-top: 4px solid var(--vl-gold, #DDB849);
  padding: 34px 40px;
  font-family: var(--vl-sans);
}

.vl-finder__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
}

.vl-finder__step {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--vl-gold-ink, #7A5F1A);
}

.vl-finder__bars { display: flex; gap: 7px; }
.vl-finder__bars i {
  display: block;
  width: 46px;
  height: 4px;
  border-radius: 2px;
  background: #EAE5DA;
}
.vl-finder__bars i.is-done { background: var(--vl-gold, #DDB849); }
.vl-finder__bars i.is-now  { background: #DCCFA8; }

.vl-finder__body { min-height: 400px; }
.vl-finder__body h3 {
  font-family: var(--vl-serif);
  font-size: 27px;
  line-height: 1.22;
  font-weight: 600;
  color: var(--vl-blue, #1E293B);
  margin: 0;
}
.vl-finder__help {
  font-size: 15px;
  line-height: 1.55;
  color: #6B7686;
  margin: 8px 0 18px;
}

.vl-finder__opts { display: flex; flex-direction: column; gap: 11px; }

.vl-finder__opt {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  text-align: left;
  padding: 16px 20px;
  min-height: 56px;
  border: 1px solid var(--vl-rule, #D8D3C8);
  background: #FFFFFF;
  border-radius: 3px;
  cursor: pointer;
  font: inherit;
  transition: border-color .14s ease, background .14s ease;
}
.vl-finder__opt:hover { border-color: #C4B896; background: #FFFDF8; }
.vl-finder__opt:focus-visible { outline: 2px solid var(--vl-gold-ink, #7A5F1A); outline-offset: 2px; }
.vl-finder__opt.is-on { border: 2px solid var(--vl-gold-ink, #7A5F1A); background: #FFFCF4; }

.vl-finder__dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #FFFFFF;
  border: 2px solid #D8D1C2;
}
.vl-finder__opt.is-on .vl-finder__dot {
  background: var(--vl-gold, #DDB849);
  border-color: var(--vl-gold-ink, #7A5F1A);
}

.vl-finder__l { font-size: 16px; font-weight: 600; color: var(--vl-blue, #1E293B); }
.vl-finder__s { display: block; font-size: 13px; color: var(--vl-muted, #5C6472); margin-top: 2px; }

.vl-finder__nav {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.vl-finder__link {
  background: none;
  border: 0;
  padding: 11px 0;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--vl-muted, #5C6472);
  cursor: pointer;
}
.vl-finder__link:hover { color: var(--vl-blue, #1E293B); }

.vl-finder__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.vl-finder__chip {
  padding: 6px 13px;
  background: var(--vl-gold-wash, #FBF3DC);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--vl-graphite, #333333);
}

.vl-finder__match {
  border: 1px solid var(--vl-rule, #D8D3C8);
  background: #FFFCF4;
  padding: 26px 28px;
  display: flex;
  gap: 26px;
  align-items: flex-start;
}
.vl-finder__name {
  font-family: var(--vl-serif);
  font-size: 30px;
  font-weight: 700;
  color: var(--vl-blue, #1E293B);
  line-height: 1.15;
  margin: 9px 0;
}
.vl-finder__why { font-size: 15px; line-height: 1.6; max-width: 560px; margin: 0; }
.vl-finder__more {
  display: inline-block;
  margin-top: 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--vl-gold-ink, #7A5F1A);
  border-bottom: 2px solid var(--vl-gold-ink, #7A5F1A);
  padding-bottom: 3px;
}

.vl-finder__score { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.vl-finder__score-n {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--vl-blue, #1E293B);
  color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700;
}
.vl-finder__score-c { font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--vl-muted, #5C6472); }

.vl-finder__sub {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #8A93A3;
  margin-top: 22px;
}
.vl-finder__runners {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 12px;
}
.vl-finder__runner { border: 1px solid var(--vl-rule, #D8D3C8); padding: 16px 18px; }
.vl-finder__runner-n { font-size: 16px; font-weight: 600; color: var(--vl-blue, #1E293B); }
.vl-finder__runner-d { font-size: 13px; line-height: 1.5; color: #6B7686; margin-top: 5px; }

@media (max-width: 860px) {
  .vl-finder__card { padding: 26px 22px; }
  .vl-finder__body { min-height: 0; }
  .vl-finder__body h3 { font-size: 23px; }
  .vl-finder__match { flex-direction: column; gap: 18px; }
  .vl-finder__runners { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .vl-finder__bars i { width: 32px; }
}

/* ========================================================================
   7. FOOTER
   vl-base.css styles the footer, but only when a parent carries the
   class "site-footer". If your footer template part does not have it,
   none of that applies. These rules do the same job from .vl-footer
   itself, so it works either way.
   ======================================================================== */

.site-footer { --vl-f-bg: #1E293B; --vl-f-ink: #E6E2DA; --vl-f-muted: #97A1B0; --vl-f-gold: #DDB849; --vl-f-rule: rgba(230,226,218,.14); --vl-f-max: 1100px;
    background: var(--vl-f-bg); color: var(--vl-f-ink); font-family: "Manrope", var(--sans); font-size: 15px; line-height: 1.5;
    display: grid; grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr)) 1.35fr; gap: 30px 36px; align-items: start;
    padding: 44px max(24px, calc((100% - var(--vl-f-max)) / 2)) 20px; }
.site-footer .vl-footer__head { margin: 0 0 12px; font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--vl-f-gold); }
.site-footer .newsnote { font-size: 12.5px; color: var(--vl-f-muted); margin-top: 8px; min-height: 16px; }

/* ========================================================================
   8. QUERY LOOP BLOCKS  —  the automatic version

   Parts 2 and 3 style hand-written HTML. This part styles what WordPress
   itself outputs from a Query Loop block, so the featured image, title,
   excerpt and date all come from the post. Set a featured image on a
   review and it appears here. No HTML editing, ever.

   Give the Query Loop block one of these classes, in
   Advanced > Additional CSS class(es):

     vl-lead vl-section      the big lead story      Items 1
     vl-cards vl-section     the two review cards    Items 2, Offset 1
     vl-guides vl-section    head to head            Items 3

   Both systems can sit on the same page. Use whichever suits the section.
   ======================================================================== */

/* Tokens come from vl-base.css (LAYER 1). Nothing is redefined here —
   this file only consumes --vl-blue, --vl-gold, --vl-gold-ink, --vl-rule,
   --vl-muted, --vl-linen, --vl-gold-wash, --vl-porcelain, --vl-graphite,
   --vl-serif, --vl-sans. Load base first. */

/* --------------------------------------------------------------------------
   1. Shell
   -------------------------------------------------------------------------- */

.vl-home {
  background: var(--vl-porcelain);
  color: var(--vl-graphite);
  font-family: var(--vl-sans);
}

.vl-home :is(h1, h2, h3) {
  font-family: var(--vl-serif);
  color: var(--vl-blue);
  letter-spacing: -0.012em;
  text-wrap: pretty;
  margin: 0;
}

.vl-home a { color: var(--vl-gold-ink); text-decoration: none; }
.vl-home a:hover { color: #8C6A1F; }

/* Section padding. Apply .vl-section to each top-level Group block. */
.vl-home .vl-section {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Section header rule — a Group with .vl-sechead holding an H2 and a note. */
.vl-home .vl-sechead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--vl-blue);
  margin-bottom: 30px;
}
.vl-home .vl-sechead h2 { font-size: 25px; font-weight: 600; }
.vl-home .vl-sechead .vl-aside { font-size: 14px; color: var(--vl-muted); }

/* Category eyebrow — the Post Terms block inside a loop, or a plain label. */
.vl-home :is(.wp-block-post-terms, .vl-kicker) {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--vl-gold-ink);
}
.vl-home .wp-block-post-terms a { color: inherit; }

/* Dates and bylines. */
.vl-home :is(.wp-block-post-date, .vl-meta) {
  font-size: 13px;
  color: var(--vl-muted);
}

/* Featured images keep a consistent shape across every loop. */
.vl-home .wp-block-post-featured-image {
  margin: 0 0 13px;
  border-radius: 3px;
  overflow: hidden;
  background: #EDE8DE;
}
.vl-home .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Post templates are <ul>; strip the list chrome once, globally. */
.vl-home .wp-block-post-template {
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 0;
}
.vl-home .wp-block-post-template > li { margin: 0; }

/* --------------------------------------------------------------------------
   2. Lead feature  —  Query Loop, class: vl-lead, Items: 1
   -------------------------------------------------------------------------- */

.vl-home .vl-lead { padding-top: 52px; padding-bottom: 52px; }

.vl-home .vl-lead .wp-block-post-template > li {
  display: grid;
  grid-template-columns: 1.32fr 1fr;
  gap: 44px;
  align-items: start;
}

.vl-home .vl-lead .wp-block-post-featured-image {
  grid-row: 1 / span 6;
  height: 392px;
  margin: 0;
}

.vl-home .vl-lead .wp-block-post-title {
  font-size: 35px;
  line-height: 1.15;
  font-weight: 700;
  margin: 4px 0 0;
}
.vl-home .vl-lead .wp-block-post-title a { color: var(--vl-blue); }
.vl-home .vl-lead .wp-block-post-title a:hover { color: var(--vl-gold-ink); }

.vl-home .vl-lead .wp-block-post-excerpt {
  font-size: 16px;
  line-height: 1.6;
  margin: 14px 0 0;
}
.vl-home .vl-lead .wp-block-post-excerpt__more-text { margin-top: 10px; }

.vl-home .vl-lead .wp-block-post-date { margin-top: 14px; }

/* --------------------------------------------------------------------------
   3. Review cards  —  Query Loop, class: vl-cards, Items: 2
   -------------------------------------------------------------------------- */

.vl-home .vl-cards { padding-bottom: 56px; }

.vl-home .vl-cards .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px;
}
.vl-home .vl-cards .wp-block-post-template > li {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.vl-home .vl-cards .wp-block-post-featured-image { height: 184px; margin: 0; }
.vl-home .vl-cards .wp-block-post-title {
  font-size: 23px;
  line-height: 1.25;
  font-weight: 600;
}
.vl-home .vl-cards .wp-block-post-title a { color: var(--vl-blue); }
.vl-home .vl-cards .wp-block-post-title a:hover { color: var(--vl-gold-ink); }
.vl-home .vl-cards .wp-block-post-excerpt { font-size: 15px; line-height: 1.55; margin: 0; }

/* --------------------------------------------------------------------------
   4. Trust band  —  static Group, class: vl-trust
   -------------------------------------------------------------------------- */

.vl-home .vl-trust {
  padding-top: 54px;
  padding-bottom: 54px;
  background: var(--vl-blue);
}
.vl-home .vl-trust h2 { color: #FFFFFF; font-size: 29px; font-weight: 600; }
.vl-home .vl-trust .vl-sub { color: #A9B4C6; font-size: 15px; margin: 8px 0 34px; }
.vl-home .vl-trust .wp-block-columns { gap: 40px; }
.vl-home .vl-trust .vl-t-h { font-size: 16px; font-weight: 600; color: #FFFFFF; margin-bottom: 8px; }
.vl-home .vl-trust .vl-t-p { font-size: 14px; line-height: 1.6; color: #A9B4C6; margin: 0; }
.vl-home .vl-trust svg { display: block; margin-bottom: 10px; }

/* Primary button — a Button block with .vl-btn */
.vl-home .vl-btn .wp-block-button__link,
.vl-home a.vl-btn {
  display: inline-block;
  margin-top: 34px;
  padding: 14px 26px;
  min-height: 44px;
  background: var(--vl-gold, #DDB849);
  color: var(--vl-blue);
  font-size: 14px;
  font-weight: 600;
  border-radius: 2px;
}
.vl-home .vl-btn .wp-block-button__link:hover,
.vl-home a.vl-btn:hover { background: #C9A63A; color: var(--vl-blue); }

/* --------------------------------------------------------------------------
   5. Start here  —  Query Loop, class: vl-guides, Items: 3
   Numerals come from a CSS counter, so they stay correct as posts change.
   -------------------------------------------------------------------------- */

.vl-home .vl-guides { padding-top: 54px; padding-bottom: 54px; }

.vl-home .vl-guides .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
  counter-reset: vl-guide;
}
.vl-home .vl-guides .wp-block-post-template > li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  counter-increment: vl-guide;
}
.vl-home .vl-guides .wp-block-post-template > li::before {
  content: "0" counter(vl-guide);
  font-family: var(--vl-serif);
  font-size: 30px;
  font-weight: 700;
  color: var(--vl-gold-ink);
  line-height: 1;
}
.vl-home .vl-guides .wp-block-post-title { font-size: 19px; line-height: 1.3; font-weight: 600; }
.vl-home .vl-guides .wp-block-post-title a { color: var(--vl-blue); }
.vl-home .vl-guides .wp-block-post-title a:hover { color: var(--vl-gold-ink); }
.vl-home .vl-guides .wp-block-post-excerpt { font-size: 14px; line-height: 1.55; margin: 0; }

/* --------------------------------------------------------------------------
   6. Newsletter  —  static Group, class: vl-news
   Wraps whatever Hostinger Reach outputs.
   -------------------------------------------------------------------------- */

.vl-home .vl-news {
  padding-top: 46px;
  padding-bottom: 46px;
  background: var(--vl-gold-wash);
  border-top: 1px solid var(--vl-rule);
  border-bottom: 1px solid var(--vl-rule);
}
.vl-home .vl-news h2 { font-size: 25px; font-weight: 600; }
.vl-home .vl-news p { font-size: 15px; line-height: 1.55; margin-top: 8px; }
.vl-home .vl-news :is(input[type="email"], input[type="text"]) {
  padding: 14px 16px;
  min-height: 48px;
  background: #FFFFFF;
  border: 1px solid #D8D1C2;
  border-radius: 2px;
  font-family: inherit;
  font-size: 15px;
  color: var(--vl-blue);
}
.vl-home .vl-news button[type="submit"] {
  padding: 14px 26px;
  min-height: 48px;
  background: var(--vl-gold, #DDB849);
  color: var(--vl-blue);
  border: 0;
  border-radius: 2px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.vl-home .vl-news button[type="submit"]:hover { background: #C9A63A; }

/* --------------------------------------------------------------------------
   7. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
    .vl-home .vl-lead .wp-block-post-template > li { grid-template-columns: 1fr; gap: 28px; }
  .vl-home .vl-lead .wp-block-post-featured-image { grid-row: auto; height: 320px; }
  .vl-home .vl-lead .wp-block-post-title { font-size: 32px; }
}

@media (max-width: 860px) {
    .vl-home .vl-cards .wp-block-post-template { grid-template-columns: 1fr; gap: 32px; }
  .vl-home .vl-guides .wp-block-post-template { grid-template-columns: 1fr; gap: 28px; }
  .vl-home .vl-lead .wp-block-post-title { font-size: 28px; }
  .vl-home :is(.vl-sechead h2, .vl-trust h2, .vl-news h2) { font-size: 22px; }
  .vl-home .vl-sechead .vl-aside { display: none; }
}

@media (max-width: 520px) {
  .vl-home .vl-lead .wp-block-post-featured-image { height: 210px; }
  .vl-home .vl-cards .wp-block-post-featured-image { height: 170px; }
}