/* ──────────────────────────────────────────────────────────
   MODERN — the Admin Handbook look, applied to the main site.
   Loaded after custom.css (see base.html). Remove that one
   <link> to roll the whole thing back.

   Plain editor-written page content is styled through direct
   children of .vw-page-article (> h2, > ol, > table …) so pages
   with their own hand-built markup (#vw-pricing, #vw-join, the
   pillar pages) keep their own styles.
   ────────────────────────────────────────────────────────── */
:root{
  --vw-page-col: 960px;
  --vw-radius: 10px;
  --vw-radius-sm: 5px;
  --vw-shadow: 0 1px 4px rgba(0,0,0,.05);
  --vw-shadow-lg: 0 2px 10px rgba(0,0,0,.06);
  --vw-rule-soft: #e9e9e6;
}

/* ── Base type + ground ─────────────────────────────────── */
html{ scroll-behavior:smooth; }
body{ font-family:'Inter',system-ui,Arial,sans-serif; color:var(--vw-text); background:var(--vw-paper); }

/* ── Top bar: compact white, pill links ─────────────────── */
#site-header{ background:var(--vw-white) !important; border-bottom:1px solid var(--vw-rule-soft) !important; padding:10px 15px !important; }
#site-header .vw-brand img{ height:34px; }
#site-header .vw-brand .vw-brand-top{ font-family:'Inter',Arial,sans-serif; font-weight:600; font-size:10px; letter-spacing:3px; text-transform:uppercase; color:#6b6b6b; }
#site-header .vw-brand .vw-brand-main{ font-size:19px; letter-spacing:.2px; color:var(--vw-black); }

@media (min-width:901px){
  #site-header nav .navbar-nav > li > a{
    font-family:'Inter',Arial,sans-serif !important; font-size:12.5px !important; letter-spacing:0 !important;
    color:#222 !important; padding:5px 10px !important; border-radius:var(--vw-radius-sm); background:transparent; }
  #site-header nav .navbar-nav > li > a:hover,
  #site-header nav .navbar-nav > li > a:focus,
  #site-header nav .navbar-nav > li.open > a{ background:#efeeeb !important; color:#000 !important; }
  #site-header nav .navbar-nav > li > a.vw-here{ background:var(--vw-red) !important; color:#fff !important; }
  #site-header nav .navbar-nav > li > a.vw-join,
  #site-header nav .navbar-nav > li > a.vw-portal{
    background:var(--vw-red) !important; color:#fff !important; padding:6px 14px !important;
    border-radius:var(--vw-radius-sm) !important; font-weight:600; letter-spacing:.5px !important; margin-left:8px; }
  #site-header nav .navbar-nav > li > a.vw-join:hover,
  #site-header nav .navbar-nav > li > a.vw-portal:hover{ background:var(--vw-red-hover) !important; }
  #site-header nav .dropdown-menu{ border-radius:8px; border:1px solid var(--vw-rule-soft); box-shadow:0 6px 20px rgba(0,0,0,.12); padding:6px 0; }
  #site-header nav .dropdown-menu > li > a{ font-family:'Inter',Arial,sans-serif; font-size:14px; padding:8px 18px; }
  #vw-training > a{ color:#222; font-family:'Inter',Arial,sans-serif; font-size:12.5px; padding:5px 10px; border-radius:var(--vw-radius-sm); }
  #vw-training > a:hover{ background:#efeeeb; color:#000; }
  #vw-training ul{ border-radius:8px; }
}

/* ── Buttons: soft corners ──────────────────────────────── */
.btn-vw-red, .btn-vw-outline, .btn-primary, .btn.btn-primary, .btn-default,
#vw-cta .cta-btn, #vw-gift-cta .gift-cta-btn,
.vw-page-article a.cta, .vw-page-article .cta{ border-radius:var(--vw-radius-sm) !important; }

/* ── Page header: white, red rule, kicker + subtitle ─────── */
.vw-page-banner{ background:var(--vw-white); border-bottom:3px solid var(--vw-red); padding:34px 0 26px; }
.vw-page-banner h1{ font-family:Georgia,serif; font-size:38px; line-height:1.12; color:var(--vw-black); }
.vw-page-banner .vw-kicker,
.vw-page-banner .vw-sub{ max-width:var(--vw-page-col); margin-left:auto; margin-right:auto; }
.vw-page-banner .vw-kicker{ color:var(--vw-red); font-weight:700; font-size:12px; letter-spacing:2.5px; text-transform:uppercase; margin-bottom:8px; }
.vw-page-banner .vw-sub{ font-size:17px; color:#6b6b6b; margin-top:8px; margin-bottom:0; }

/* ── Page body: paper ground, 960px reading column ──────── */
.vw-page-content{ background:var(--vw-paper); padding:8px 0 60px; }
.vw-page-article{ max-width:var(--vw-page-col); padding-top:30px; font-size:17px; line-height:1.6; }
.vw-page-article p{ font-size:17px; margin:10px 0; }

/* Section headings (plain content only) */
.vw-page-article > h2{ font-family:Georgia,serif; font-size:25px; color:var(--vw-black); margin:30px 0 4px; padding-bottom:7px; border-bottom:2px solid var(--vw-red); }
.vw-page-article > h3{ font-family:'Inter',Arial,sans-serif; font-size:16px; font-weight:700; color:var(--vw-red); margin:22px 0 6px; text-transform:uppercase; letter-spacing:.5px; }

/* Numbered steps: red circles */
.vw-page-article > ol{ counter-reset:vw-step; list-style:none; padding:0; margin:12px 0; }
.vw-page-article > ol > li{ counter-increment:vw-step; position:relative; padding:6px 0 6px 40px; margin:2px 0; }
.vw-page-article > ol > li::before{ content:counter(vw-step); position:absolute; left:0; top:6px; width:26px; height:26px;
  background:var(--vw-red); color:#fff; border-radius:50%; font-size:13px; font-weight:700; line-height:26px; text-align:center; }

/* Callouts: .callout / .callout.warn, and blockquotes */
.vw-page-article .callout,
.vw-page-article > blockquote{ background:var(--vw-white); border-left:5px solid var(--vw-red); padding:14px 18px; margin:16px 0;
  border-radius:0 8px 8px 0; box-shadow:var(--vw-shadow); font-style:normal; color:var(--vw-text); }
.vw-page-article .callout .lab{ color:var(--vw-red); font-weight:700; text-transform:uppercase; font-size:12px; letter-spacing:1px; display:block; margin-bottom:3px; }
.vw-page-article .callout.warn{ border-color:#b00020; }
.vw-page-article .callout.warn .lab{ color:#b00020; }

/* Screenshots and figures */
.vw-page-article figure,
.vw-page-article img.shot{ margin:20px 0; border:1px solid var(--vw-rule-soft); border-radius:var(--vw-radius); overflow:hidden; background:var(--vw-white); box-shadow:var(--vw-shadow-lg); }
.vw-page-article figure img{ display:block; width:100%; height:auto; }
.vw-page-article figcaption{ padding:11px 16px; font-size:13.5px; color:#444; background:var(--vw-white); }

/* Tables: black header, zebra rows */
.vw-page-article > table,
.vw-page-article > .table-responsive > table{ border-collapse:separate; border-spacing:0; width:100%; margin:14px 0; font-size:14.5px;
  background:var(--vw-white); border-radius:8px; overflow:hidden; box-shadow:var(--vw-shadow); }
.vw-page-article > table th,
.vw-page-article > .table-responsive > table th{ background:var(--vw-black); color:#fff; text-align:left; padding:9px 12px; font-size:13px; }
.vw-page-article > table td,
.vw-page-article > .table-responsive > table td{ padding:9px 12px; border-top:1px solid var(--vw-rule-soft); vertical-align:top; }
.vw-page-article > table tr:nth-child(even) td,
.vw-page-article > .table-responsive > table tr:nth-child(even) td{ background:var(--vw-paper); }

/* Code */
.vw-page-article code{ font-family:ui-monospace,Menlo,Consolas,monospace; background:#efeeeb; padding:1px 6px; border-radius:4px; font-size:14px; color:inherit; }
.vw-page-article pre{ background:#1a1a1a; color:#f2f2f2; padding:16px 18px; border-radius:var(--vw-radius); border:0; overflow:auto; font-size:13.5px; line-height:1.5; }

/* ── Cards across hand-built pages: rounded + soft shadow ── */
.vw-page-article .card,
.vw-page-article .tcard,
.vw-event-rich{ border-radius:var(--vw-radius) !important; box-shadow:var(--vw-shadow-lg); overflow:hidden; }
.pillar-face{ border-radius:var(--vw-radius); }

/* Pricing page fit-ups */
#vw-pricing .card.gift{ background:var(--vw-white); }
#vw-pricing .card.feature{ overflow:visible; }
#vw-pricing .tbl{ border-radius:var(--vw-radius); background:var(--vw-white); box-shadow:var(--vw-shadow); }
#vw-pricing tbody tr:nth-child(even) td{ background:#fbfbf9; }
#vw-pricing .strip{ border-color:var(--vw-rule-soft); }
#vw-pricing .vw-close{ border-radius:var(--vw-radius); }

@media (max-width:640px){
  .vw-page-banner h1{ font-size:29px; }
  .vw-page-article, .vw-page-article p{ font-size:16px; }
}