#vl-root{
  margin-left:calc(-50vw + 50%);
  margin-right:calc(-50vw + 50%);
  width:100vw;
  overflow-x:hidden;
  font-family:'Inter',system-ui,sans-serif;
  color:#10172A;
  -webkit-font-smoothing:antialiased;
}
#vl-root *{box-sizing:border-box;}
#vl-root a{color:#B8862E;text-decoration:none;}
#vl-root a:hover{text-decoration:underline;}
:root{
  --ink:#10172A;--ink-soft:#1A2238;
  --parchment:#F7F4ED;--parchment-dim:#EDE8DB;
  --brass:#B8862E;--brass-bright:#D6A14A;
  --green:#3F7D5C;--amber:#C8932F;--red:#B4543D;
  --slate:#5B6478;--slate-light:#8B91A3;
  --line:rgba(16,23,42,0.10);--line-dark:rgba(247,244,237,0.12);
  --serif:'Fraunces',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono','Courier New',monospace;
}
.vl-rag{display:flex;width:100%;height:5px;}
.vl-rag span{flex:1;}
.vl-rag .g{background:var(--green);}
.vl-rag .a{background:var(--amber);}
.vl-rag .r{background:var(--red);}
.vl-hero{background:var(--ink);color:var(--parchment);padding:56px 0 48px;}
.vl-wrap{max-width:860px;margin:0 auto;padding:0 32px;}
@media(max-width:640px){.vl-wrap{padding:0 20px;}}
.vl-breadcrumb{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--slate-light);margin-bottom:16px;display:block;}
.vl-breadcrumb a{color:var(--brass-bright);}
.vl-hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(28px,4vw,44px);line-height:1.1;margin:0 0 12px;color:var(--parchment);}
.vl-hero .vl-sub{font-size:15px;color:var(--slate-light);margin:0;}
.vl-hero .vl-meta{font-family:var(--mono);font-size:11px;color:var(--slate-light);margin-top:20px;letter-spacing:0.06em;}
.vl-body{background:var(--parchment);padding:64px 0 80px;}
.vl-content{color:var(--ink);}
.vl-content h2{font-family:var(--serif);font-weight:600;font-size:22px;margin:48px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line);}
.vl-content h2:first-child{margin-top:0;}
.vl-content h3{font-family:var(--serif);font-weight:600;font-size:17px;margin:28px 0 10px;color:var(--ink);}
.vl-content p{font-size:15px;line-height:1.75;color:#2A3347;margin:0 0 16px;}
.vl-content ul,.vl-content ol{font-size:15px;line-height:1.75;color:#2A3347;margin:0 0 16px;padding-left:24px;}
.vl-content li{margin-bottom:8px;}
.vl-content strong{color:var(--ink);font-weight:600;}
.vl-content a{color:var(--brass);}
.vl-notice{background:var(--ink-soft);color:var(--parchment);border-left:3px solid var(--brass-bright);padding:20px 24px;margin:0 0 32px;}
.vl-notice p{font-size:14px;color:var(--parchment);margin:0;line-height:1.6;}
.vl-notice strong{color:var(--brass-bright);}
.vl-highlight{background:var(--parchment-dim);border:1px solid var(--line);padding:20px 24px;margin:0 0 24px;}
.vl-highlight p{margin:0;font-size:14px;line-height:1.6;}
.vl-footer-nav{background:var(--ink);padding:32px 0;}
.vl-footer-nav .vl-wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
.vl-footer-nav p{font-family:var(--mono);font-size:11px;color:var(--slate-light);margin:0;}
.vl-footer-nav .vl-links{display:flex;gap:24px;flex-wrap:wrap;}
.vl-footer-nav .vl-links a{font-family:var(--mono);font-size:11px;color:var(--slate-light);letter-spacing:0.04em;}
.vl-footer-nav .vl-links a:hover{color:var(--brass-bright);text-decoration:none;}
::selection{background:var(--brass);color:var(--ink);}

/* -- HEADING COLOUR FIX (Payhip dark-background override) -------
   Payhip's template applies its own color rule directly to real
   h1-h6 tags with higher specificity than a plain class selector,
   so an unscoped rule (e.g. ".vl-hero h1{color:...}") gets silently
   overridden even though it's present in this stylesheet. The
   heading on the dark hero block must be re-forced with a rule
   scoped to the #vl-root wrapper ID and marked !important, or
   Payhip's own heading color wins. */
#vl-root .vl-hero h1{
  color: var(--parchment) !important;
}