/* Your Voice Matters (EI-119): the microsite's own look. Since EI-125 it follows the client's bright "Your Voice
   Matters, Bedfordshire" branding, rebuilt in code (never her artwork): the wordmark is live text, the post-its,
   buttons and bands are CSS, and the brush strokes and watercolour swashes are inline SVG in the page (no images but
   the official Empowered Insights logo). Fonts are self-hosted: Fraunces (headings), Caveat (hand-written) and
   Dancing Script ("Matters") from Google Fonts under the SIL Open Font License (licences in assets/fonts/), Jost
   (the wordmark) and Mulish (text) as the main site uses them. Mobile first. The vhost's CSP allows no inline style
   or script, so everything lives here. Text colours meet WCAG AA on their backgrounds. */

@font-face{font-family:'Fraunces';font-style:normal;font-weight:700;font-display:swap;src:url('/partners/empoweredinsights/fonts/fraunces-700-latin.woff2?v=0a1bb253fa') format('woff2')}
@font-face{font-family:'Caveat';font-style:normal;font-weight:500;font-display:swap;src:url('/partners/empoweredinsights/fonts/caveat-500-latin.woff2?v=ecf719b22f') format('woff2')}
@font-face{font-family:'Dancing Script';font-style:normal;font-weight:400 700;font-display:swap;src:url('/partners/empoweredinsights/fonts/dancing-script-700-latin.woff2?v=9a6eb5dfdc') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:100 900;font-display:swap;src:url('/partners/empoweredinsights/fonts/jost-300-latin.woff2?v=180347d9f2') format('woff2')}
@font-face{font-family:'Mulish';font-style:normal;font-weight:200 1000;font-display:swap;src:url('/partners/empoweredinsights/fonts/mulish-400-latin.woff2?v=c85fd086c8') format('woff2')}

:root{
  --ink:#2f1d4f;          /* deep purple: headings, the wordmark, buttons (14.9:1 on white) */
  --text:#3b3550;
  --muted:#5a536c;
  --teal:#1f7a7a;         /* "Matters" and teal buttons (4.8:1 on white) */
  --teal-btn:#1c6e70;
  --pink-btn:#b5306b;     /* white on it 5.8:1 */
  --gold:#d4a43c;         /* decoration only */
  --cream:#fdf9f4;
  --band:#efe6f7;         /* the light lilac bands */
  --line:#e2d8ec;
  --focus:#1d4ed8;
  --danger-bg:#fff1f2;
  --danger:#9f1239;
  /* the five note colours, brighter pastels */
  --note-yellow:#ffe98a;
  --note-pink:#ffc2d9;
  --note-blue:#a9e3f5;
  --note-green:#bdeec6;
  --note-purple:#dcc9f7;
  --hand:'Caveat','Segoe Print','Bradley Hand',cursive;
  --script:'Dancing Script','Segoe Script','Brush Script MT',cursive;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Mulish',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.vm{margin:0;overflow-x:hidden;overflow-wrap:break-word;background:var(--cream);color:var(--text);font-family:var(--sans);font-size:1.0625rem;line-height:1.6}
.vm img{max-width:100%;height:auto}
.vm a{color:var(--ink)}
.vm a:focus-visible,.vm button:focus-visible,.vm input:focus-visible,.vm textarea:focus-visible,.vm [tabindex="-1"]:focus{outline:3px solid var(--focus);outline-offset:3px}
.vm-wrap{position:relative;z-index:1;width:100%;max-width:1160px;margin:0 auto;padding:0 16px}
.vm-sec{padding:40px 16px}
.vm-narrow{max-width:720px;margin:0 auto}
.vm-defs{position:absolute;width:0;height:0;overflow:hidden}

/* skip link, quick exit and the 999 line (unchanged in prominence: fixed, red, always on top) */
.vm-skip{position:absolute;left:-10000px;top:0;background:#fff;padding:8px 12px;z-index:40}
.vm-skip:focus{left:8px;top:8px}
.vm-exit{position:fixed;right:12px;bottom:12px;z-index:30;background:#9f1239;color:#fff!important;font-weight:800;text-decoration:none;
  padding:12px 18px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.25);font-size:1rem}
.vm-exit:hover{background:#7f0f2e}
.vm-safebar{margin:0;background:var(--ink);color:#fff;font-size:.9rem;text-align:center;padding:8px 16px}
.vm-safebar a{color:#fff}

/* header: the official Empowered Insights mark and wordmark */
.vm-top{position:relative;z-index:2;background:rgba(255,255,255,.92);border-bottom:1px solid var(--line)}
.vm-top-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;padding-top:12px;padding-bottom:12px}
.vm-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.vm-brand img{height:40px;width:auto}
.vm .wm{font-family:'Jost',sans-serif;font-weight:600;font-size:1.15rem;color:var(--ink);letter-spacing:.02em;white-space:nowrap}
.vm-nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:.95rem}
.vm-nav a{text-decoration:none;font-weight:700}
.vm-nav a:hover{text-decoration:underline}

/* buttons: purple, teal and pink pills, as on her posts */
.vm-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--ink);color:#fff!important;font-weight:800;text-decoration:none;border:0;border-radius:999px;
  padding:14px 26px;font-size:1.05rem;font-family:inherit;cursor:pointer;line-height:1.2;box-shadow:0 8px 18px -10px rgba(47,29,79,.7)}
.vm-btn:hover{background:#1f1236}
.vm-btn-teal{background:var(--teal-btn);box-shadow:0 8px 18px -10px rgba(28,110,112,.8)}
.vm-btn-teal:hover{background:#145457}
.vm-btn-pink{background:var(--pink-btn);box-shadow:0 8px 18px -10px rgba(181,48,107,.8)}
.vm-btn-pink:hover{background:#962457}
.vm-btn-small{padding:9px 18px;font-size:.95rem;box-shadow:none}
.vm-btn-icon{padding-left:20px;padding-right:18px}
.vm-i{flex:none;width:22px;height:22px}
.vm-i-chevron{width:18px;height:18px;margin-left:2px;opacity:.9}
.vm-ctas{display:flex;flex-wrap:wrap;gap:12px;margin:0}

/* the watercolour swashes: decorative SVG behind a section's content */
.vm-hero,.vm-band,.vm-board,.vm-how,.vm-thanks{position:relative;overflow:hidden}
.vm-swash{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* hero */
.vm-hero{padding:30px 0 34px;background:radial-gradient(ellipse at 85% 10%,#fff 0%,rgba(255,255,255,0) 60%),linear-gradient(180deg,#fffdfb 0%,var(--cream) 100%)}
.vm-h1-small{font-family:var(--serif);color:var(--ink);font-size:2rem;line-height:1.15;margin:0 0 12px}
.vm-lede{max-width:34em;margin:18px 0 20px;font-size:1.08rem;color:var(--text)}

/* the wordmark: live text, "Your Voice" in the serif, "Matters" in the brush script, the pink stroke, BEDFORDSHIRE,
   the gold heart and the strapline */
.vm-wm{position:relative;display:inline-block;max-width:100%;text-align:center;padding:0 4px}
.vm-title{font-family:var(--serif);font-weight:700;color:var(--ink);margin:0;line-height:.9;letter-spacing:-.02em}
.vm-title span{display:block}
.vm-title-1{font-size:clamp(2.9rem,13vw,5.4rem)}
.vm-title-2{font-family:var(--script);font-weight:700;color:var(--teal);font-size:clamp(3.6rem,17vw,6.9rem);letter-spacing:0;line-height:1;
  margin:-.04em 0 0;transform:rotate(-4deg);position:relative;z-index:1}
.vm-wm-stroke{display:block;width:100%;height:clamp(20px,5.4vw,34px);margin:-.5em auto 0;position:relative;z-index:0}
.vm-wm-county{margin:6px 0 0;font-family:var(--sans);font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.38em;
  font-size:clamp(.95rem,4vw,1.45rem);padding-left:.38em;line-height:1.3}
.vm-wm-heart{display:block;width:min(240px,70%);height:auto;margin:4px auto 0}
.vm-wm-strap{margin:8px 0 0;font-family:var(--sans);font-weight:700;font-size:clamp(.66rem,2.6vw,.82rem);text-transform:uppercase;letter-spacing:.14em;color:var(--ink)}
.vm-wm-strap>span{white-space:nowrap}
.vm-dot{color:#9a6f14;padding:0 .35em}
.vm-hero-sparks path{fill:none;stroke-width:5;stroke-linecap:round}

.vm-h2{font-family:var(--serif);color:var(--ink);font-size:1.7rem;line-height:1.2;margin:0 0 10px}
.vm-hand{font-family:var(--hand);font-weight:500}

/* the five colours, used by the notes, the swatches and the step numbers */
.vm-note-yellow{background-color:var(--note-yellow)}
.vm-note-pink{background-color:var(--note-pink)}
.vm-note-blue{background-color:var(--note-blue)}
.vm-note-green{background-color:var(--note-green)}
.vm-note-purple{background-color:var(--note-purple)}

/* a post-it: square-ish, a soft lifted shadow, a gentle tilt, a hint of paper sheen, hand-written text */
.vm-postit{position:relative;font-family:var(--hand);font-weight:500;color:#2a2238;font-size:1.7rem;line-height:1.15;margin:0;padding:22px 18px;
  width:150px;min-height:140px;border-radius:2px 2px 4px 2px;
  background-image:linear-gradient(170deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,0) 38%,rgba(0,0,0,0) 78%,rgba(47,29,79,.06) 100%);
  box-shadow:0 18px 22px -14px rgba(47,29,79,.42),0 3px 6px rgba(47,29,79,.10),inset 0 -2px 0 rgba(0,0,0,.03)}
.vm-tilt-l{transform:rotate(-5deg)}
.vm-tilt-r{transform:rotate(4deg)}
.vm-tilt-l2{transform:rotate(-2.5deg)}
.vm-heart,.vm-smile{display:block;text-align:right;font-size:1.5rem;line-height:1}

/* hero: the notes sit under the text on a phone, beside it on a wide screen */
.vm-hero-grid{display:grid;gap:26px}
.vm-hero-text{text-align:left}
.vm-hero-notes{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:6px;padding:14px 0 4px}
.vm-hero-grid>*,.vm-share-grid>*{min-width:0}
.vm-hero-notes .vm-postit{width:31%;max-width:150px;min-height:104px;font-size:1.22rem;padding:12px 10px;z-index:1}
.vm-hero-n2{margin-top:22px}
.vm-hero-ring{position:absolute;left:-4%;top:-6%;width:108%;height:112%;z-index:0;overflow:visible}
.vm-hero-sparks{position:absolute;right:2px;top:-6px;width:34px;height:34px;z-index:1;overflow:visible}
.vm-hero-tag{position:relative;z-index:1;flex-basis:100%;text-align:center;color:var(--ink);font-size:1.6rem;line-height:1.15;margin:12px 0 0;transform:rotate(-2deg)}
.vm-hero-tag .vm-heart{display:inline;font-size:1.4rem}

/* the four reassurance points, on a lilac band with brush ends */
.vm-band{background:var(--band);padding:24px 0}
.vm-points{list-style:none;margin:0 auto;display:grid;gap:16px}
.vm-points li{display:flex;align-items:flex-start;gap:14px;color:var(--ink)}
.vm-points svg{flex:none;color:var(--ink)}
.vm-points b{display:block;font-size:1.02rem}
.vm-points span{font-size:.95rem;color:var(--text)}

/* the form and the safety panel */
.vm-share{padding:36px 0;background:linear-gradient(180deg,#fff 0%,var(--cream) 100%)}
.vm-share-grid{display:grid;gap:24px;align-items:start}
.vm-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 18px;box-shadow:0 14px 30px -18px rgba(47,29,79,.4)}
.vm-form-card{border-top:6px solid var(--note-pink)}
.vm-form{margin-top:8px}
.vm-guard{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.vm-field{margin:0 0 20px;padding:0;border:0;min-width:0}
.vm-field-bad{border-left:4px solid var(--danger);padding-left:12px}
.vm-label{display:block;font-weight:800;color:var(--ink);font-size:1.05rem;margin:0 0 4px;padding:0}
.vm-hint{margin:0 0 8px;color:var(--muted);font-size:.95rem}
.vm-field-error{margin:0 0 8px;color:var(--danger);font-weight:800}
.vm textarea{display:block;width:100%;min-height:150px;padding:14px;border:2px solid #9b8fb0;border-radius:12px;background:#fffdf5;
  font-family:var(--sans);font-size:1.05rem;line-height:1.5;color:var(--text);resize:vertical}
.vm textarea[aria-invalid="true"]{border-color:var(--danger)}
.vm-count{margin:6px 0 0;text-align:right;font-size:.9rem;color:var(--muted)}
.vm-count.vm-count-near{color:var(--danger);font-weight:800}
.vm-swatches{display:flex;flex-wrap:wrap;gap:10px}
.vm-swatch{position:relative;display:flex;align-items:center;gap:8px;padding:10px 14px 10px 10px;border-radius:999px;border:2px solid transparent;cursor:pointer;font-weight:700;color:#2a2238;
  box-shadow:0 4px 8px -5px rgba(47,29,79,.45)}
.vm-swatch input{width:22px;height:22px;margin:0;accent-color:var(--ink)}
.vm-swatch:has(input:checked){border-color:var(--ink)}
.vm-swatch:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.vm-btn-wide{display:flex;width:100%;text-align:center}
.vm-small{font-size:.9rem;color:var(--muted);margin:12px 0 0}
/* The browser check (EI-127): the button is off until voice.js has started it; without JavaScript the note says why. */
.vm-btn[disabled]{opacity:.6;cursor:not-allowed;box-shadow:none}
.vm-check:empty{margin:0}
.vm-noscript{border:2px solid var(--ink);background:#fff;border-radius:12px;padding:12px 14px;margin:14px 0}
.vm-errors{border:3px solid var(--danger);background:var(--danger-bg);border-radius:12px;padding:14px 16px;margin:12px 0 18px}
.vm-paused{border:3px solid var(--muted);border-radius:12px;padding:14px 16px;margin:12px 0 18px}
.vm-errors h3{margin:0 0 6px;color:var(--danger);font-size:1.1rem}
.vm-errors ul{margin:0;padding-left:20px}
.vm-errors a{color:var(--danger);font-weight:800}
.vm-errors p{margin:0}

/* the safety panel: as prominent as before (white, a strong purple border), never softened by the decoration */
.vm-safety{position:relative;z-index:1;background:#fff;border:2px solid var(--ink);border-radius:18px;padding:20px 18px}
.vm-safety h2{font-family:var(--serif);color:var(--ink);font-size:1.5rem;margin:0 0 8px}
.vm-safety h3{color:var(--ink);font-size:1.1rem;margin:18px 0 6px}
.vm-safety p{margin:0 0 10px}
.vm-not-watched{background:var(--band);border-radius:10px;padding:10px 12px}
.vm-lines,.vm-guidance{margin:0 0 6px;padding-left:20px}
.vm-lines li,.vm-guidance li{margin:0 0 6px}

/* the board of approved notes (EI-123): post-its in a grid, one column on a small phone, more as the screen widens */
.vm-board{background:#fffaf0;padding:38px 0 44px;border-top:1px solid var(--line)}
.vm-board-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 18px}
.vm-board-count{font-family:var(--hand);font-weight:500;font-size:1.6rem;color:var(--teal);margin:0 0 6px}
.vm-board-empty{margin:0}
.vm-notes{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:26px 22px}
.vm-board-note{width:auto;min-height:160px;font-size:1.65rem;display:flex;flex-direction:column;justify-content:space-between;gap:10px}
.vm-note-text{margin:0;white-space:pre-line;overflow-wrap:anywhere}
.vm-note-date{margin:0;font-family:var(--sans);font-size:.8rem;color:#463f5c;text-align:right}
.vm-board-note.vm-tilt-l{transform:rotate(-2.4deg)}
.vm-board-note.vm-tilt-r{transform:rotate(1.8deg)}
.vm-board-note.vm-tilt-l2{transform:rotate(-.9deg)}
.vm-board-note:nth-child(4n+2){transform:rotate(2.6deg) translateY(4px)}
.vm-board-note:nth-child(5n){transform:rotate(-1.6deg) translateY(-3px)}
.vm-paging{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 18px;margin:30px 0 0}
.vm-paging span{font-weight:700;color:var(--ink)}

/* how it works: a soft teal band, numbered circles in the note colours */
.vm-how{background:#e6f4f2;padding:34px 0 38px}
.vm-steps{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:18px}
.vm-steps li{display:flex;gap:14px;align-items:flex-start}
.vm-steps b{display:block;color:var(--ink);font-size:1.05rem}
.vm-step-n{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;font-family:var(--serif);font-weight:700;font-size:1.3rem;color:var(--ink);
  box-shadow:0 6px 12px -6px rgba(47,29,79,.45),inset 0 0 0 3px rgba(255,255,255,.6)}

/* footer */
.vm-foot{position:relative;z-index:1;background:#fff;border-top:1px solid var(--line);padding:28px 0 96px;font-size:.95rem;color:var(--muted)}
.vm-foot p{margin:0 0 8px}
.vm-foot-brand{display:flex;align-items:center;gap:10px}
.vm-foot-brand img{height:32px;width:auto}

/* the thank-you */
.vm-thanks{padding:36px 0}
.vm-thanks-note{margin:0 0 18px}

@media (min-width:640px){
  .vm-hero-notes .vm-postit{width:150px;min-height:136px;font-size:1.5rem;padding:16px 14px}
  .vm-points{grid-template-columns:1fr 1fr}
  .vm-steps{grid-template-columns:1fr 1fr}
  .vm-card,.vm-safety{padding:28px}
}
@media (min-width:960px){
  .vm-hero{padding:46px 0 54px}
  .vm-hero-grid{grid-template-columns:1.02fr 1fr;align-items:center;gap:36px}

  .vm-wm-strap{white-space:nowrap;font-size:.76rem;letter-spacing:.1em}
  /* the three notes overlap like the logo artwork, the hand-written line beside them */
  .vm-hero-notes{display:block;height:470px;padding:0}
  .vm-hero-notes .vm-postit{position:absolute;width:190px;max-width:none;min-height:180px;font-size:1.95rem;padding:24px 20px}
  .vm-hero-n1{left:2%;top:34px}
  .vm-hero-n2{left:36%;top:96px;margin-top:0}
  .vm-hero-n3{left:14%;top:250px}
  .vm-hero-ring{left:-6%;top:0;width:96%;height:100%}
  .vm-hero-sparks{left:72%;right:auto;top:14px;width:46px;height:46px}
  .vm-hero-tag{position:absolute;right:0;bottom:44px;width:210px;text-align:left;font-size:1.85rem;transform:rotate(-7deg)}
  .vm-points{grid-template-columns:repeat(4,1fr)}
  .vm-points li+li{border-left:1px solid #cdbde0;padding-left:16px}
  .vm-share-grid{grid-template-columns:1.25fr 1fr}
  .vm-steps{grid-template-columns:repeat(4,1fr)}
  .vm-steps li+li{border-left:1px solid #bcdcd7;padding-left:16px}
  .vm-h2{font-size:1.9rem}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Text for screen readers only (the "Error: " before each field error, EI-121); kept by EI-125 review 1236. */
.vm-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* The hand-written line sits on its own (green) post-it, like the other three (Marc, 16 Oct 2026). These come after the
   hero-note sizes so they win; the note keeps the tag's own place and tilt. */
.vm-hero-notes .vm-postit.vm-hero-tag{width:auto;max-width:300px;min-height:0;margin:16px auto 0;padding:14px 16px;font-size:1.35rem;text-align:left;transform:rotate(-2deg)}
@media (min-width:960px){
  .vm-hero-notes .vm-postit.vm-hero-tag{position:absolute;right:0;bottom:30px;left:auto;top:auto;width:230px;max-width:none;margin:0;padding:18px 18px;font-size:1.6rem;transform:rotate(-6deg)}
}

/* the privacy notice (EI-128): a readable card, headings in the serif, lists with room to breathe */
.vm-privacy h2{font-family:var(--serif);color:var(--ink);font-size:1.3rem;line-height:1.25;margin:26px 0 8px}
.vm-privacy ul{padding-left:1.2em;margin:0 0 12px}
.vm-privacy li{margin:0 0 6px}
.vm-privacy p{margin:0 0 12px}

/* YVM-79, the county template on any board: its own header logo or icon (initials when none), never wider than the
   screen; and the banner slot (YVM-83) under the header as a lilac band (the banner itself is YVM-81's). */
.vm .vm-brand .vm-logo{height:2.75rem;width:auto;max-width:min(100%,20rem)}
.vm .vm-brand .vm-icon{height:40px;width:40px;border-radius:8px}
.vm-banner-slot{background:var(--band);border-bottom:1px solid var(--line)}
.vm-banner{padding:10px 0;text-align:center}
.vm-banner-label{margin:0 0 4px;color:var(--muted);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase}
.vm-banner-link{display:inline-block;max-width:100%;line-height:0}
.vm-banner-img{display:block;max-width:100%;height:auto}

/* YVM-79: on another board the county hero shows its real notes, whole: they flow and grow with their words, never
   cut short or stacked over each other (EI's own fixed notes keep their placed layout). */
.vm-hero-notes.vm-hero-notes-flow{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:14px;height:auto;padding:14px 0 4px}
.vm-hero-notes-flow .vm-postit{position:relative;left:auto;top:auto;flex:1 1 9.5rem;width:auto;max-width:15rem;min-height:0;margin:0;font-size:1.35rem;padding:16px 14px}
.vm-hero-notes-flow .vm-hero-n2{margin-top:18px}
.vm-hero-notes-flow .vm-hero-ring{display:none}

/* ==== YVM-206 header strip, on every county board (EI's too): start ====
   The board's brand, a thin divider, the Your Voices Matter logo (boards/yvm-logo.blade.php), always on one line; the
   header line on the right, below the logos on phones. The header is .vm-top's white (config/templates.php county
   top-bg #FFFFFF, which App\Support\YvmLogo picks its variant against; test yvm_206_ keeps the two in step). */
.vm-strip{margin:0;display:flex;flex-wrap:nowrap;align-items:center;gap:12px;min-width:0;max-width:100%}
.vm-strip .vm-brand{flex:0 1 auto;min-width:0}
/* The brand's name (EI's wordmark, or a no-logo board's name) wraps inside its own space rather than run under the
   divider and the YVM logo: .vm .wm is nowrap elsewhere. */
.vm .vm-strip .wm{min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.15}
.vm .vm-brand .vm-logo{object-fit:contain;object-position:left center}
.vm-strip-rule{flex:none;align-self:stretch;width:1px;min-height:36px;background:color-mix(in srgb,var(--ink) 28%,transparent)}
.vm .vm-yvm{flex:none;display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:700;font-size:1.0625rem;line-height:1.1;letter-spacing:-.01em}
.vm-yvm-mark{flex:none;display:block;width:40px;height:40px}
.vm .vm-yvm-dark{color:#0D0B26}
.vm .vm-yvm-light{color:#FFFFFF}
.vm .vm-yvm:hover .vm-yvm-word{text-decoration:underline}
.vm-tagline{margin:0 0 0 auto;max-width:24rem;color:var(--muted);font-size:.9375rem;line-height:1.35;text-align:right}
@media (max-width:639px){
  .vm-strip{gap:8px}
  .vm .vm-brand img,.vm .vm-brand .vm-logo{height:36px}
  .vm .vm-brand .vm-logo{max-width:100%}
  .vm .vm-strip .vm-brand{gap:6px}
  .vm .vm-strip .vm-brand .vm-icon{display:none}
  .vm .vm-strip .vm-brand img:not(.vm-logo){height:28px}
  .vm .vm-strip .wm{font-size:.9375rem}
  .vm .vm-yvm{font-size:.875rem}
  .vm-yvm-mark{width:32px;height:32px}
  .vm-yvm-word{max-width:6.5em}
  .vm-tagline{flex-basis:100%;margin:0;text-align:left;max-width:none}
}
/* ==== YVM-206 header strip: end ==== */
/* ==== YVM-207 one layout for every skin, here for county boards other than Empowered Insights' own (its page keeps
   its own hero and order): a compact hero beside three why-points, the note form as a panel "Share your feedback"
   opens, then the notes at once in 4, 2 or 1 columns. Colours from this sheet's :root (WCAG AA as above). ==== */
.vm-hero.vm-hero-compact{padding:22px 0}
.vm-hero-compact .vm-title{font-size:clamp(1.75rem,3.4vw,2.5rem);line-height:1.1;margin:0 0 8px}
.vm-hero-compact .vm-eyebrow{margin:0 0 4px;color:var(--teal);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:.9375rem}
.vm-hero-compact .vm-lede{margin:0 0 16px;max-width:40rem}
.vm-hero-compact .vm-ctas{margin:0;display:flex;flex-wrap:wrap;gap:12px}
.vm-hero-compact .vm-btn-quiet{background:var(--teal-btn)}
.vm-accent{color:var(--teal)}
.vm-why{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.vm-why-point{display:flex;gap:12px;align-items:flex-start;color:var(--text);line-height:1.4}
.vm-why-icon{flex:none;color:var(--teal)}
.vm-why-title{display:block;color:var(--ink)}
.vm .vm-share-panel:not(:target):not(:has(:target)):not(.vm-share-open){display:none}
.vm .vm-board[data-voice-board]{padding:18px 0 36px}
.vm .vm-notes.vm-notes-grid{grid-template-columns:minmax(0,1fr);margin-top:14px}
.vm-notes-grid + .vm-hint{margin-top:22px}
.vm .vm-board-head .vm-board-count{font-family:inherit;font-weight:400;font-size:1rem;color:inherit}
.vm-footline{margin:0 auto;padding:16px 20px;text-align:center;font-weight:800;color:var(--ink)}
@media (min-width:600px){.vm .vm-notes.vm-notes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.vm .vm-hero-compact .vm-hero-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center}}
@media (min-width:1024px){.vm .vm-notes.vm-notes-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* ==== YVM-207: end. ==== */