/**
 * Feature explainer pages — supplements to vwa-references/assets/landing.css.
 * Same .vwa-gr scope and tokens; only the atoms the references page lacks
 * (mock screenshots, bar chart, stat tiles, chat bubbles, icon tints).
 */
.vwa-gr .vwa-gr-caticon--green  { background: #e8f6ee; color: #1d7a46; }
.vwa-gr .vwa-gr-caticon--blue   { background: #e7f0fb; color: #2b5f9e; }
.vwa-gr .vwa-gr-caticon--purple { background: #f2ecfb; color: #6a459e; }
.vwa-gr .vwa-gr-caticon--amber  { background: #fdf3e5; color: #9c6410; }
.vwa-gr .vwa-gr-caticon--slate  { background: #eef2f4; color: #4d626c; }

/* Unlocked rows (inverse of landing.css .vwa-gr-locked) */
.vwa-gr-open { display: grid; gap: 8px; }
.vwa-gr .vwa-gr-open li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; background: var(--soft); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font-size: 14px; color: var(--ink); }
.vwa-gr .vwa-gr-open li .vwa-gr-ic { color: var(--g-dark); }

/* Screenshot thumbnails — mock captures of a support worker's screen (assets/shots/) */
.vwa-gr-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vwa-gr-shot { position: relative; aspect-ratio: 16 / 10; border-radius: 8px; border: 1px solid var(--line); background: #e3e8ec center / cover no-repeat; overflow: hidden; }
.vwa-gr-shot:nth-child(1) { background-image: url("shots/inbox.svg"); }
.vwa-gr-shot:nth-child(2) { background-image: url("shots/reply.svg"); }
.vwa-gr-shot:nth-child(3) { background-image: url("shots/sheet.svg"); }
/* Timestamp chip, legible over the capture */
.vwa-gr-shot::before { content: ""; position: absolute; inset: auto 0 0 0; height: 32%; background: linear-gradient(180deg, rgba(20,28,34,0) 0%, rgba(20,28,34,.66) 65%, rgba(20,28,34,.78) 100%); }
.vwa-gr-shot::after { content: attr(data-t); position: absolute; left: 7px; bottom: 5px; font-size: 11px; line-height: 1; color: #fff; }

/* Activity meter */
.vwa-gr-meter { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.vwa-gr-meter i { display: block; height: 100%; width: var(--v, 50%); background: var(--g-ui); border-radius: 4px; }
.vwa-gr-meter-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; font-size: 13px; color: var(--muted); }
.vwa-gr-meter-row strong { color: var(--ink); font-size: 14px; }

/* Stat tiles + bar chart */
.vwa-gr-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.vwa-gr-stat { display: grid; gap: 2px; background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.vwa-gr-stat strong { font-size: 24px; line-height: 1.1; font-weight: 500; }
.vwa-gr-stat span { font-size: 12px; color: var(--muted); }
.vwa-gr-bars { display: flex; align-items: flex-end; gap: 5px; width: 100%; height: 84px; padding-top: 6px; border-bottom: 1px solid var(--line); }
.vwa-gr-bars i { flex: 1 1 0; height: var(--v, 30%); background: #bfe0cd; border-radius: 4px 4px 0 0; }
.vwa-gr-bars i.is-hi { background: var(--g-ui); }
.vwa-gr-axis { display: flex; justify-content: space-between; width: 100%; font-size: 11px; color: var(--muted); margin-top: 4px; }

/* Chat bubbles (AI assistant mock) */
.vwa-gr-chat { display: grid; gap: 8px; }
.vwa-gr-msg { font-size: 13px; line-height: 1.45; padding: 9px 12px; border-radius: 12px; max-width: 90%; }
.vwa-gr-msg--q { background: var(--soft); border: 1px solid var(--line); color: var(--muted); }
.vwa-gr-msg--a { background: var(--g-soft); border: 1px solid #bfe0cd; color: var(--ink); justify-self: end; }

/* Steps on these pages may carry a plain list instead of chips */
.vwa-gr .vwa-gr-step-copy .vwa-gr-proof { margin-top: 14px; }

/* ── Competitor comparison pages (2026-08-26): /onlinejobs-ph-alternative/ /upwork-alternative/ /fiverr-alternative/ /freelancer-alternative/ ── */
/* Side-by-side table (scrolls inside its card on narrow screens) */
.vwa-gr-cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.vwa-gr .vwa-gr-cmp { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15px; margin: 0; border: 0; }
.vwa-gr .vwa-gr-cmp th, .vwa-gr .vwa-gr-cmp td { padding: 13px 16px; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--line); background: none; line-height: 1.45; }
.vwa-gr .vwa-gr-cmp thead th { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 500; background: var(--soft); }
.vwa-gr .vwa-gr-cmp thead th.is-us { color: var(--g-dark); background: var(--g-soft); }
.vwa-gr .vwa-gr-cmp th[scope="row"] { font-weight: 500; color: var(--ink); width: 22%; }
.vwa-gr .vwa-gr-cmp td { color: var(--muted); width: 39%; }
.vwa-gr .vwa-gr-cmp td.is-us { background: #f3faf6; color: var(--ink); }
.vwa-gr .vwa-gr-cmp tbody tr:last-child :is(th, td) { border-bottom: 0; }
.vwa-gr .vwa-gr-cmp td .vwa-gr-ic { width: 18px; height: 18px; vertical-align: -4px; margin-right: 6px; }
.vwa-gr .vwa-gr-cmp td.is-yes .vwa-gr-ic { color: var(--g-dark); }
.vwa-gr .vwa-gr-cmp td.is-no .vwa-gr-ic { color: #b45309; }
.vwa-gr .vwa-gr-cmp td.is-part .vwa-gr-ic { color: var(--muted); }

/* Money lanes: employer → platform cut → worker */
.vwa-gr-lanes { display: grid; gap: 14px; }
.vwa-gr-lane { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow); }
.vwa-gr-lane--us { border-color: #bfe0cd; background: #f3faf6; }
.vwa-gr-lane-title { display: block; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 12px; }
.vwa-gr-lane--us .vwa-gr-lane-title { color: var(--g-dark); }
.vwa-gr-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 8px; align-items: stretch; }
.vwa-gr-flow-box { background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; text-align: center; min-width: 0; display: grid; align-content: center; }
.vwa-gr-flow-box strong { display: block; font-size: 17px; line-height: 1.2; font-weight: 500; color: var(--ink); }
.vwa-gr-flow-box span { display: block; font-size: 12px; color: var(--muted); line-height: 1.35; margin-top: 3px; }
.vwa-gr-flow-box--cut { background: #fff4ec; border-color: #f3c9a8; }
.vwa-gr-flow-box--cut strong { color: #9a3f0c; }
.vwa-gr-flow-box--keep { background: var(--g-soft); border-color: #bfe0cd; }
.vwa-gr-flow-box--keep strong { color: var(--g-dark); }
.vwa-gr-flow-arrow { color: var(--muted); font-size: 18px; line-height: 1; align-self: center; }
.vwa-gr .vwa-gr-lane-foot { font-size: 13px; color: var(--muted); margin: 10px 0 0; }
@media (max-width: 519px) { .vwa-gr-flow { grid-template-columns: 1fr; } .vwa-gr-flow-arrow { transform: rotate(90deg); justify-self: center; } }

/* Five-country strip with the flag images */
.vwa-gr-countries { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.vwa-gr-country { display: grid; gap: 6px; justify-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 12px; text-align: center; box-shadow: var(--shadow); }
.vwa-gr .vwa-gr-country img { width: 56px; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; display: block; margin: 0 0 4px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.vwa-gr-country strong { font-size: 15px; font-weight: 500; }
.vwa-gr-country span { font-size: 13px; color: var(--muted); line-height: 1.35; }
@media (min-width: 640px) { .vwa-gr-countries { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .vwa-gr-countries { grid-template-columns: repeat(5, 1fr); } }
/* Each tile links to the resume list filtered to that country. display:contents
   leaves the li's grid and padding exactly as they are (padding is set twice —
   here and again in the .vwa-gr override below), and the stretched ::after makes
   the whole tile, flag included, the click target. The anchor has no box of its
   own, so focus has to be drawn on the li. */
.vwa-gr .vwa-gr-country { position: relative; transition: border-color .15s, box-shadow .15s; }
.vwa-gr .vwa-gr-country > a { display: contents; color: inherit; text-decoration: none; }
.vwa-gr .vwa-gr-country > a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.vwa-gr .vwa-gr-country:has(> a:hover) { border-color: #bfe0cd; box-shadow: 0 4px 14px rgba(20,40,30,.1); }
.vwa-gr .vwa-gr-country:has(> a:hover) strong { color: var(--g-text); }
.vwa-gr .vwa-gr-country:has(> a:focus-visible) { outline: 3px solid var(--g-ui); outline-offset: 3px; }

/* Sources line under the table */
.vwa-gr .vwa-gr-sources { font-size: 13px; color: var(--muted); margin: 16px auto 0; text-align: center; max-width: 760px; }
.vwa-gr .vwa-gr-sources a { color: var(--muted); text-decoration: underline; }

/* ── v2 layout primitives (2026-08-26): each explainer page mixes a different subset ── */
.vwa-gr-updated { font-size: 13px; color: var(--muted); margin-top: 14px; }
.vwa-gr-updated a { color: var(--g-dark); }

/* Hero variants */
.vwa-gr-hero--center { grid-template-columns: 1fr !important; text-align: center; gap: 28px; }
.vwa-gr-hero--center .vwa-gr-hero-copy { max-width: 760px !important; margin-inline: auto !important; justify-self: center !important; }
.vwa-gr-hero--center .vwa-gr-lede { margin-inline: auto; max-width: 640px; }
.vwa-gr-hero--center .vwa-gr-actions { justify-content: center; }
.vwa-gr-hero--center .vwa-gr-proof { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); justify-items: start; max-width: 720px; margin-inline: auto; }
.vwa-gr-hero--center .vwa-gr-hero-visual { max-width: 900px !important; width: 100%; justify-self: center !important; }
.vwa-gr-hero--dark { background: linear-gradient(160deg, #14432a 0%, #1b6a3f 100%); }
.vwa-gr-hero--dark :is(h1, .vwa-gr-lede, .vwa-gr-proof, .vwa-gr-kicker, .vwa-gr-updated) { color: #fff; }
.vwa-gr-hero--dark .vwa-gr-lede { color: #dff3e7; }
.vwa-gr-hero--dark .vwa-gr-kicker, .vwa-gr-hero--dark .vwa-gr-proof .vwa-gr-ic, .vwa-gr-hero--dark .vwa-gr-updated a { color: #9fe0bb; }
.vwa-gr-hero--dark .vwa-gr-actions-note, .vwa-gr-hero--dark .vwa-gr-actions-note a { color: #dff3e7; }
.vwa-gr-hero--dark .vwa-gr-btn { background: #fff; border-color: #fff; color: var(--g-dark); }
.vwa-gr-hero--dark .vwa-gr-btn:hover { background: #f1fbf5; border-color: #f1fbf5; color: var(--g-dark); }
.vwa-gr-hero--dark .vwa-gr-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.vwa-gr-hero--dark .vwa-gr-btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }
.vwa-gr-hero--soft { background: var(--soft); }
@media (min-width: 1024px) {
	.vwa-gr-hero--rev { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
	.vwa-gr-hero--rev .vwa-gr-hero-copy { order: 2; justify-self: start; }
	.vwa-gr-hero--rev .vwa-gr-hero-visual { order: 1; justify-self: end; }
}

/* Key facts capsule (answer-first block) */
.vwa-gr-facts { display: grid; gap: 0; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--g-ui); border-radius: 12px; padding: 6px 22px; margin: 0 auto; max-width: 900px; box-shadow: var(--shadow); }
.vwa-gr-facts > div { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.vwa-gr-facts > div:last-child { border-bottom: 0; }
.vwa-gr-facts dt { font-size: 14px; color: var(--muted); }
.vwa-gr-facts dd { font-size: 16px; }
.vwa-gr-facts dd strong { font-weight: 500; }

/* Stat strip */
.vwa-gr-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; max-width: 1000px; margin: 0 auto; }
.vwa-gr-strip > div { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px 18px; text-align: center; box-shadow: var(--shadow); }
.vwa-gr-strip strong { display: block; font-size: clamp(26px, 3vw, 34px); line-height: 1.1; font-weight: 500; color: var(--g-dark); }
.vwa-gr-strip span { display: block; font-size: 14px; color: var(--muted); margin-top: 6px; line-height: 1.4; }

/* Data / comparison tables */
.vwa-gr-tablewrap { overflow-x: auto; max-width: 1000px; margin: 0 auto; -webkit-overflow-scrolling: touch; }
.vwa-gr .vwa-gr-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 15px; min-width: 560px; }
.vwa-gr .vwa-gr-table th, .vwa-gr .vwa-gr-table td { padding: 13px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.45; }
.vwa-gr .vwa-gr-table thead th { background: var(--soft); font-size: 13px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.vwa-gr .vwa-gr-table tbody tr:last-child td { border-bottom: 0; }
.vwa-gr .vwa-gr-table td:first-child { font-weight: 500; }
.vwa-gr .vwa-gr-table .is-yes { color: var(--g-dark); font-weight: 500; }
.vwa-gr .vwa-gr-table .is-no { color: #9aa0a6; }
.vwa-gr .vwa-gr-table--tight th, .vwa-gr .vwa-gr-table--tight td { padding: 10px 14px; font-size: 14px; }
.vwa-gr-tablenote { text-align: center; font-size: 13px; color: var(--muted); max-width: 760px; margin: 12px auto 0; }

/* Steps: row of cards */
.vwa-gr-steps--row { grid-template-columns: 1fr; gap: 16px; }
.vwa-gr .vwa-gr-steps--row .vwa-gr-step { display: block; padding: 24px; background: #fff; border: 1px solid var(--line) !important; border-radius: 14px; box-shadow: var(--shadow); }
.vwa-gr .vwa-gr-steps--row .vwa-gr-step h3 { font-size: 20px; }
.vwa-gr .vwa-gr-steps--row .vwa-gr-step p { font-size: 16px; }
.vwa-gr .vwa-gr-steps--row .vwa-gr-step-visual { margin-top: 18px; min-height: 0; padding: 18px; }
@media (min-width: 768px) { .vwa-gr-steps--row { grid-template-columns: repeat(3, 1fr); } }

/* Steps: zig-zag lives in vwa-references/assets/landing.css, next to the base .vwa-gr-step rules */

/* Steps: vertical timeline */
.vwa-gr .vwa-gr-timeline { position: relative; max-width: 820px; margin: 0 auto; padding-left: 28px; display: grid; gap: 34px; }
.vwa-gr-timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.vwa-gr .vwa-gr-timeline > li { position: relative; padding: 0; }
.vwa-gr .vwa-gr-timeline > li::before { content: ""; display: block; position: absolute; left: -25px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--g-ui); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--g-ui); }
.vwa-gr-timeline h3 { font-size: 21px; margin-bottom: 8px; }
.vwa-gr-timeline .vwa-gr-when { display: inline-block; font-size: 13px; font-weight: 500; color: var(--g-dark); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.vwa-gr-timeline p { font-size: 16px; }
.vwa-gr-timeline .vwa-gr-step-visual { margin-top: 14px; min-height: 0; padding: 18px; }

/* Two-column prose + dark panel */
/* The amber note ran the full section body width (1180px) while everything it annotates caps
   at 760-1000px, so it jutted out past the block above it on every page that uses one. */
.vwa-gr .vwa-gr-note { max-width: 1000px; margin-inline: auto; }
.vwa-gr .vwa-gr-check + .vwa-gr-note { max-width: 900px; }  /* match the checklist it annotates */
/* A section that opens with body copy instead of an h2 still carried the 96px of top padding an
   h2 would have filled. */
.vwa-gr-section--flush { padding-top: clamp(36px, 4vw, 56px); }
.vwa-gr-cols2 { display: grid; gap: 24px; max-width: 1000px; margin: 0 auto; }
@media (min-width: 768px) { .vwa-gr-cols2 { grid-template-columns: 1fr 1fr; gap: 40px; } }
.vwa-gr-cols2 h3 { font-size: 20px; margin-bottom: 8px; }
.vwa-gr-cols2 p { font-size: 16px; }
.vwa-gr-panel--dark { background: #1f2a26; color: #e6ebe8; border-color: #1f2a26; }
.vwa-gr-panel--dark h3, .vwa-gr-panel--dark p, .vwa-gr-panel--dark li { color: #e6ebe8; }
.vwa-gr-panel--dark h3 .vwa-gr-ic { color: #9fe0bb; }
.vwa-gr .vwa-gr-panel--dark .vwa-gr-proof li, .vwa-gr-panel--dark .vwa-gr-proof .vwa-gr-ic { color: #e6ebe8; }

/* Checklists (two-up) and do/don't */
.vwa-gr-check { display: grid; gap: 10px; max-width: 900px; margin: 0 auto; }
@media (min-width: 640px) { .vwa-gr-check { grid-template-columns: 1fr 1fr; } }
.vwa-gr .vwa-gr-check li { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 15px; }
.vwa-gr .vwa-gr-check li .vwa-gr-ic { color: var(--g-dark); margin-top: 3px; }
.vwa-gr .vwa-gr-check li strong { font-weight: 500; }
.vwa-gr .vwa-gr-check--no li .vwa-gr-ic { color: #b45309; }

/* Before / after */
.vwa-gr-ba { display: grid; gap: 16px; max-width: 1000px; margin: 0 auto; }
@media (min-width: 768px) { .vwa-gr-ba { grid-template-columns: 1fr 1fr; } }
.vwa-gr-ba > div { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; box-shadow: var(--shadow); }
.vwa-gr-ba > div.is-after { border-color: #bfe0cd; background: #fbfefc; }
.vwa-gr-ba .vwa-gr-balabel { display: inline-block; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; border-radius: 20px; padding: 3px 10px; margin-bottom: 12px; background: #f1f3f4; color: #5b6770; }
.vwa-gr-ba .is-after .vwa-gr-balabel { background: #e8f6ee; color: #1d7a46; }
.vwa-gr-ba p { font-size: 15px; }
.vwa-gr-ba p + p { margin-top: 8px; }

/* Glossary / definition rows */
.vwa-gr-glossary { max-width: 900px; margin: 0 auto; display: grid; gap: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.vwa-gr-glossary > div { display: grid; gap: 6px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.vwa-gr-glossary > div:last-child { border-bottom: 0; }
.vwa-gr-glossary dt { font-weight: 500; font-size: 17px; }
.vwa-gr-glossary dd { font-size: 15px; color: var(--ink); }
@media (min-width: 640px) { .vwa-gr-glossary > div { grid-template-columns: 220px 1fr; gap: 20px; } }

/* Message template card */
.vwa-gr-tpl { max-width: 720px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.vwa-gr-tpl-head { display: flex; align-items: center; gap: 8px; padding: 12px 18px; background: var(--soft); border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 500; color: var(--muted); }
.vwa-gr-tpl-head .vwa-gr-ic { color: var(--g-dark); }
.vwa-gr-tpl-body { padding: 18px 20px; font-size: 15px; }
.vwa-gr-tpl-body p { margin-bottom: 10px; }
.vwa-gr-tpl-body mark { background: #fff4d6; color: #5c4500; padding: 0 4px; border-radius: 3px; }

/* Level / scale rows (CEFR, speed) */
.vwa-gr-scale { display: grid; gap: 8px; max-width: 900px; margin: 0 auto; }
.vwa-gr .vwa-gr-scale li { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: start; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.vwa-gr .vwa-gr-scale li b { display: grid; place-items: center; height: 40px; border-radius: 8px; font-weight: 500; font-size: 15px; background: var(--g-soft); color: var(--g-dark); }
.vwa-gr .vwa-gr-scale li.is-hi b { background: var(--g-ui); color: #fff; }
.vwa-gr .vwa-gr-scale li strong { display: block; font-size: 15px; font-weight: 500; }
.vwa-gr .vwa-gr-scale li span { display: block; font-size: 14px; color: var(--muted); line-height: 1.45; }

/* Score bar rows (AI assistant) */
.vwa-gr-score { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; font-size: 14px; }
.vwa-gr-score strong { font-weight: 500; }
.vwa-gr-score .vwa-gr-meter { grid-column: 1 / -1; }

/* Section-level tweaks */
.vwa-gr .vwa-gr-section--soft .vwa-gr-catcard { border-color: #dfe5e2; }
.vwa-gr .vwa-gr-section h2.is-left { text-align: left; margin-inline: 0; max-width: none; }
.vwa-gr-lead { font-size: 18px; max-width: 820px; margin: -20px auto 32px; text-align: center; color: var(--ink); }
.vwa-gr-lead--left { text-align: left; margin-inline: 0; }
.vwa-gr-cats--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .vwa-gr-cats--4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .vwa-gr-cats--4 { grid-template-columns: repeat(4, 1fr); } }
.vwa-gr-cta-inline { text-align: center; margin-top: 28px; }
/* .vwa-gr p{margin:0 0 12px} is more specific and would zero the top margin on a <p> CTA */
.vwa-gr p.vwa-gr-cta-inline { margin-top: 28px; }
.vwa-gr .vwa-gr-related { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 900px; margin: 0 auto; }
.vwa-gr .vwa-gr-related li a { display: inline-block; font-size: 14px; font-weight: 500; color: var(--g-dark); background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 8px 14px; text-decoration: none; }
.vwa-gr .vwa-gr-related li a:hover { border-color: var(--g-ui); color: var(--ink); }
/* WorkScout responsive.css stacks every table on small screens (tr/td → block, th → none). Keep ours a real table and let the wrapper scroll instead. */
.vwa-gr .vwa-gr-cmp { display: table; }
.vwa-gr .vwa-gr-cmp thead { display: table-header-group; }
.vwa-gr .vwa-gr-cmp tbody { display: table-row-group; }
.vwa-gr .vwa-gr-cmp tr { display: table-row; }
.vwa-gr .vwa-gr-cmp th, .vwa-gr .vwa-gr-cmp td { display: table-cell; }
/* Country strip: inset from the section edges, roomier tiles, flags top-aligned (Adam, 2026-08-27) */
.vwa-gr .vwa-gr-countries { max-width: 1040px; margin-inline: auto; padding-inline: 8px; gap: 16px; }
.vwa-gr .vwa-gr-country { align-content: start; padding: 22px 18px; }
@media (min-width: 1024px) { .vwa-gr .vwa-gr-countries { gap: 20px; } }

/* ── /how-it-works/ (2026-08-28) — same components, three things it needs that the feature pages don't ── */
/* Step cards carry an icon in the h3 */
.vwa-gr .vwa-gr-steps--row .vwa-gr-step h3:has(.vwa-gr-ic) { display: flex; align-items: baseline; gap: 9px; }
.vwa-gr .vwa-gr-steps--row .vwa-gr-step h3 .vwa-gr-ic { color: var(--g-dark); align-self: flex-start; margin-top: 3px; }
/* Centred button row (final band + any centred section) */
.vwa-gr .vwa-gr-actions--center { justify-content: center; }
.vwa-gr-final .vwa-gr-actions { margin-bottom: 0; }
.vwa-gr-final .vwa-gr-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); box-shadow: none; }
.vwa-gr-final .vwa-gr-btn--ghost:hover, .vwa-gr-final .vwa-gr-btn--ghost:focus-visible { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
/* [vw_lead_magnet] as a card instead of loose fields */
.vwa-gr .vw-lead-magnet { max-width: 620px; margin: 0 auto !important; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 28px 30px; }
.vwa-gr .vw-lead-magnet h3 { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 8px; }
.vwa-gr .vw-lead-magnet > p { color: var(--muted); font-size: 16px; margin-bottom: 20px; }
.vwa-gr .vw-lead-magnet input[type="text"], .vwa-gr .vw-lead-magnet input[type="email"] { max-width: none !important; border-radius: 8px !important; border-color: var(--line) !important; }
.vwa-gr .vw-lead-magnet label { max-width: none !important; color: var(--muted); }
.vwa-gr .vw-lead-magnet button.button { background: var(--g-ui); border-radius: 8px; text-transform: none; font-weight: 500; padding: 12px 22px; }
/* Centred hero with no visual (how-it-works): the proof row is one wrapping line, not three narrow columns */
.vwa-gr-hero--center:not(:has(.vwa-gr-hero-visual)) { padding-bottom: clamp(32px, 4vw, 56px); }
.vwa-gr-hero--center:not(:has(.vwa-gr-hero-visual)) .vwa-gr-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; max-width: 1040px; }
.vwa-gr-hero--center:not(:has(.vwa-gr-hero-visual)) .vwa-gr-proof li { text-align: left; }
.vwa-gr-hero--center:not(:has(.vwa-gr-hero-visual)) .vwa-gr-hero-copy { max-width: 920px !important; }

/* ── /about-us/ (2026-08-28) — country strip carrying a photo instead of a flag.
   Everything else (card, link, hover, focus, 2/3/5-up grid) is the shared component. */
.vwa-gr .vwa-gr-countries--photo .vwa-gr-country { padding: 0 0 18px; overflow: hidden; justify-items: stretch; }
.vwa-gr .vwa-gr-countries--photo .vwa-gr-country img { width: 100%; height: 132px; aspect-ratio: auto; object-fit: cover; border-radius: 0; margin: 0 0 12px; box-shadow: none; }
.vwa-gr .vwa-gr-countries--photo .vwa-gr-country :is(strong, span) { display: block; padding-inline: 14px; text-align: center; }

/* ── One measure for section blocks (2026-08-29) ───────────────────────────────
   Every block used to set its own cap — checklist 900, note 1000, countries 1040,
   lanes / steps / tables / category grids the full 1180 body width — so the page
   stepped in and out as you scrolled and a 1180 block could sit straight on top of
   a 900 one with no gap between them. One width for all of them; prose keeps its
   narrower reading measures (h2 760, lede/sub 820, FAQ answers 700). */
.vwa-gr { --block: 1000px; }
.vwa-gr .vwa-gr-section > :is(.vwa-gr-check, .vwa-gr-note, .vwa-gr-lanes, .vwa-gr-cols2,
  .vwa-gr-ba, .vwa-gr-tablewrap, .vwa-gr-cmp-wrap, .vwa-gr-twocol, .vwa-gr-cats,
  .vwa-gr-countries, .vwa-gr-steps, .vwa-gr-facts, .vwa-gr-open, .vwa-gr-glossary,
  .vwa-gr-timeline, .vwa-gr-stats, .vwa-gr-shots, .vwa-gr-acc, .vwa-gr-split,
  .vwa-gr-related, .vwa-gr-scale) {
  max-width: var(--block);
  margin-inline: auto;
}
/* Centred body lines (section subtitle, inline CTA) ran the full 1180 while the
   lede they mirror caps at 820. */
.vwa-gr .vwa-gr-section > :is(.vwa-gr-sub, .vwa-gr-cta-inline) { max-width: 820px; }
/* Consistent vertical rhythm between blocks — gaps ran 0px, 12px, 22px, 28px.
   Margins collapse, so a heading's larger bottom margin still wins. */
.vwa-gr .vwa-gr-section > * + * { margin-top: 20px; }
/* A left-aligned h2 ran the full body width, so it started left of the block under it. */
.vwa-gr .vwa-gr-section > h2.is-left { max-width: var(--block); }