/* ─────────────────────────────────────────────────────────────────────────
   ui.css: the one shared stylesheet for epa608practicetest.net.

   Load order in every page <head>:
     1. preload /fonts/barlow-700-latin.woff2 (headings only; body and mono
      use the system stack, so no other font file loads)
     2. /ui.css            tokens, base type, chrome, prose, components
     3. /css/ui-<type>.css  one small module per page type (home, quiz,
                            guide, article, corp)

   Colors are the site's existing palette (navy surfaces, orange action,
   gold, green). Only type and layout changed in v4.
   Header, drawer and footer markup stay baked into each page; this file is
   their only skin. Footers keep their per-page link sets.
   ───────────────────────────────────────────────────────────────────────── */

/* Barlow 700, Latin subset, self-hosted (SIL OFL 1.1). optional = no swap,
   so no layout shift: a slow first visit keeps the system face. */
@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: optional;
  src: url(/fonts/barlow-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* light surfaces */
  --bg: #ffffff; --bg2: #f8fafc; --bg3: #f1f5f9;
  --line: #e2eaf5; --line2: #c8d8ee;
  --ink: #0f1f3d; --ink2: #4a6690; --ink3: #8aa0c0;
  /* navy surfaces */
  --nv: #080c16; --nv2: #0e1420; --nv3: #131b2e; --nv4: #192236;
  --nline: #1c2a42; --nline2: #243350;
  --ntext: #edf1f9; --nt2: #7f96be; --nt3: #3f5278;
  /* accents */
  --or: #F97316; --or2: #e86209; --ordim: #fff5ee; --orline: rgba(249,115,22,.30);
  --orglow: rgba(249,115,22,.22); --ordim-d: rgba(249,115,22,.09);
  --gold: #f5b840; --green: #16a34a; --green-d: #34d399; --gdim: #ecfdf3;
  --red: #dc2626; --rdim: #fef2f2;
  /* type */
  --f-head: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* shape + rhythm */
  --r: 8px; --r2: 12px; --r3: 16px;
  --wrap: 1180px; --prose: 760px;
  --gut: 24px;
  /* legacy aliases: per-page CSS still reads these names */
  --dk: var(--nv); --dk2: var(--nv2); --dk3: var(--nv3); --dk4: var(--nv4);
  --db1: var(--nline); --db2: var(--nline2); --db3: #2e4068;
  --dtext: var(--ntext); --dt2: var(--nt2); --dt3: var(--nt3);
  --lk: var(--bg); --lk2: var(--bg2); --lk3: var(--bg3);
  --lb1: var(--line); --lb2: var(--line2);
  --ltext: var(--ink); --lt2: var(--ink2); --lt3: var(--ink3); --lt4: var(--line2);
  --ordim-l: var(--ordim); --orbd-l: var(--orline); --orbd-d: rgba(249,115,22,.26);
  --rdim-l: var(--rdim); --gdim-d: rgba(52,211,153,.09);
}
@media (max-width: 640px) { :root { --gut: 16px; } }

/* ── Base ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
  font-family: var(--f-body);
  font-size: 16px; line-height: 1.65;
  color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--f-head); color: var(--ink); letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem); font-weight: 700; line-height: 1.06; }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.25rem); font-weight: 700; line-height: 1.14; }
h3 { font-size: clamp(1.2rem, 1.1rem + .4vw, 1.4rem); font-weight: 700; line-height: 1.25; }
h3, h4 { font-family: var(--f-body); letter-spacing: -.005em; }
h4 { font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
strong, b { font-weight: 700; }
code, kbd, samp { font-family: var(--f-mono); font-size: .9em; }
:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--orglow); }

/* ── Layout ── */
.u-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.u-narrow { max-width: var(--prose); margin: 0 auto; padding: 0 var(--gut); }
.u-sec { padding: clamp(56px, 7vw, 96px) 0; }
.u-sec--tint { background: var(--bg2); border-block: 1px solid var(--line); }
.u-sec--navy { background: var(--nv); color: var(--ntext); }
.u-sec--navy h2, .u-sec--navy h3 { color: var(--ntext); }
.u-grid { display: grid; gap: 16px; }
.u-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.u-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.u-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .u-grid--3, .u-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .u-grid--2, .u-grid--3, .u-grid--4 { grid-template-columns: minmax(0, 1fr); } }

/* ── Small type: eyebrow labels, mono numbers ── */
.u-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 14px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); margin-bottom: 12px;
}
.u-eyebrow::before { content: ""; width: 18px; height: 3px; border-radius: 2px; background: var(--or); flex: none; }
.u-sec--navy .u-eyebrow, .u-hero .u-eyebrow { color: var(--nt2); }
.u-lede { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.6; color: var(--ink2); max-width: 680px; }
.u-mono { font-family: var(--f-mono); }
.u-tag {
  display: inline-block; font-family: var(--f-mono); font-size: 14px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px;
  background: var(--ordim); color: var(--ink); border: 1px solid var(--orline);
}

/* ── Buttons ── */
.u-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px; border-radius: var(--r);
  font-family: var(--f-body); font-size: 16px; font-weight: 700; line-height: 1.2;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background .15s, box-shadow .15s, border-color .15s, color .15s;
}
.u-btn--pri, .u-btn:not(.u-btn--sec) { background: var(--or); color: var(--nv); }
.u-prose a.u-btn { text-decoration: none; color: var(--nv); }
.u-prose a.u-btn--sec { color: var(--ink); }
.u-btn--pri:hover { background: var(--or2); box-shadow: 0 6px 20px var(--orglow); }
.u-btn--sec { background: var(--bg); color: var(--ink); border-color: var(--line2); }
.u-btn--sec:hover { border-color: var(--ink2); }
.u-sec--navy .u-btn--sec, .u-hero .u-btn--sec { background: transparent; color: var(--ntext); border-color: var(--nline2); }
.u-sec--navy .u-btn--sec:hover, .u-hero .u-btn--sec:hover { border-color: var(--nt2); }

/* ── Cards ── */
.u-card {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r2);
  padding: 22px; transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.u-card { display: block; color: inherit; text-decoration: none; }
a.u-card:hover { border-color: var(--orline); box-shadow: 0 10px 30px rgba(15,31,61,.08); transform: translateY(-2px); }
.u-card--navy { background: var(--nv3); border-color: var(--nline2); color: var(--ntext); }
.u-card--navy h3 { color: var(--ntext); }

/* ── Page hero (navy band that opens every page) ── */
.u-hero {
  background: radial-gradient(1000px 420px at 85% -10%, rgba(249,115,22,.12), transparent 60%), var(--nv);
  color: var(--ntext); padding: clamp(36px, 5vw, 64px) 0 clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--nline);
}
.u-hero h1 { color: #fff; max-width: 900px; }
.u-hero .u-lede, .u-hero p { color: var(--nt2); }
.u-hero p strong { color: var(--ntext); }
.u-hero a:not(.u-btn) { color: var(--ntext); }

/* ── Breadcrumbs (any page) ── */
.breadcrumb {
  font-family: var(--f-mono); font-size: 14px; font-weight: 500; letter-spacing: 0;
  color: var(--ink2); margin: -10px 0 8px; line-height: 1.6;
}
/* 44 px tap area without changing the line's look */
.breadcrumb a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--ink2); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--or); }
.u-hero .breadcrumb { color: var(--nt2); }
.u-hero .breadcrumb a { color: var(--nt2); }
.u-hero .breadcrumb a:hover { color: var(--ntext); text-decoration: underline; text-decoration-color: var(--or); }
.u-hero .breadcrumb [aria-current] { color: var(--nt2); }

/* ── Prose: long-form text on guides, articles, test pages, legal ── */
.u-prose { max-width: var(--prose); }
.u-prose > * + * { margin-top: 16px; }
.u-prose h2 { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); }
.u-prose h3 { margin-top: 36px; }
.u-prose h4 { margin-top: 28px; }
.u-prose h2 + *, .u-prose h3 + *, .u-prose h4 + * { margin-top: 12px; }
.u-prose p, .u-prose li { color: #24385c; }
.u-prose ul, .u-prose ol { padding-left: 1.4em; }
.u-prose li + li { margin-top: 8px; }
.u-prose ul > li::marker { color: var(--or); }
.u-prose ol > li::marker { color: var(--ink2); font-weight: 700; }
.u-prose a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--or); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.u-prose a:hover { color: var(--ink); text-decoration-color: var(--or); }
.u-prose blockquote, .u-callout {
  border-left: 4px solid var(--or); background: var(--ordim); border-radius: 0 var(--r2) var(--r2) 0;
  padding: 16px 20px; color: var(--ink);
}
.u-prose blockquote > * + *, .u-callout > * + * { margin-top: 8px; }
.u-prose hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }

/* tables: one look everywhere */
.u-prose table, .u-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.u-prose th, .u-table th {
  font-family: var(--f-mono); font-size: 14px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  color: var(--ink2); background: var(--bg2); text-align: left; padding: 12px 14px; border-bottom: 2px solid var(--line2);
}
.u-prose td, .u-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: #24385c; }
/* row headers read like body cells (bold); an empty corner cell reads like the header row */
.u-prose tbody th[scope=row], .u-table tbody th[scope=row] {
  font-family: var(--f-body); font-size: inherit; letter-spacing: 0; text-transform: none; font-weight: 600;
  color: var(--ink); background: none; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top;
}
.u-prose thead td, .u-table thead td { background: var(--bg2); border-bottom: 2px solid var(--line2); }
.u-prose tr:last-child td { border-bottom: 0; }
.table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 24px 0;
  border: 1px solid var(--line); border-radius: var(--r2); background: var(--bg);
}
.table-wrap table { margin: 0; }

/* FAQ: details/summary or .faq-item */
.u-faq details, .u-faq .faq-item { border-bottom: 1px solid var(--line); }
.u-faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px;
  padding: 18px 0; font-family: var(--f-body); font-weight: 700; font-size: 17px; color: var(--ink);
}
.u-faq summary::-webkit-details-marker { display: none; }
.u-faq summary::after { content: "+"; font-family: var(--f-mono); color: var(--or2); font-size: 20px; line-height: 1; }
.u-faq details[open] summary::after { content: "\2212"; }
.u-faq details > :not(summary) { padding-bottom: 18px; color: #24385c; }

/* ─────────────────────────────────────────────────────────────────────────
   CHROME: header, dropdowns, mobile drawer, footer
   ───────────────────────────────────────────────────────────────────────── */
header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(8,12,22,.9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--nline);
}
.header-content {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  height: 68px; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut);
}
.logo { text-decoration: none; display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; flex-shrink: 0; margin-right: 8px; }
.logo img { height: 40px; width: auto; }

header nav { display: flex; align-items: center; flex: 1; }
.nav-menu { display: flex; align-items: center; list-style: none; gap: 2px; }
.nav-menu > li { position: relative; }
.nav-menu > li > a, .dropdown-toggle {
  display: flex; align-items: center; gap: 5px; min-height: 44px; padding: 8px 14px;
  color: var(--nt2); text-decoration: none; font-weight: 600; font-size: 15px;
  border-radius: 8px; white-space: nowrap; background: transparent; border: 0; cursor: pointer;
  transition: background .12s, color .12s;
}
.nav-menu > li > a:hover, .dropdown:hover > .dropdown-toggle, .dropdown.open > .dropdown-toggle {
  background: rgba(255,255,255,.05); color: var(--ntext);
}
.dropdown { position: relative; }
.dropdown-toggle svg {
  width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.2; fill: none;
  stroke-linecap: round; stroke-linejoin: round; opacity: .55; transition: transform .2s; flex-shrink: 0;
}
.dropdown:hover > .dropdown-toggle svg, .dropdown.open > .dropdown-toggle svg { transform: rotate(180deg); opacity: .85; }
.dropdown-menu {
  position: absolute; top: 100%; left: 0; z-index: 300; min-width: 260px; list-style: none;
  padding-top: 10px; visibility: hidden; opacity: 0; transform: translateY(-4px);
  transition: opacity .15s, visibility .15s, transform .15s; pointer-events: none;
}
.dropdown:hover > .dropdown-menu, .dropdown.open > .dropdown-menu { visibility: visible; opacity: 1; transform: none; pointer-events: auto; }
.dropdown-menu-inner {
  background: var(--nv3); border: 1px solid var(--nline2); border-radius: var(--r2);
  box-shadow: 0 18px 50px rgba(0,0,0,.5); padding: 6px;
}
.dropdown-menu li { list-style: none; }
.dropdown-menu li a {
  display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 10px 12px; border-radius: 8px;
  color: var(--ntext); text-decoration: none; font-size: 14.5px; font-weight: 600; line-height: 1.3; white-space: nowrap;
}
.dropdown-menu li a:hover { background: rgba(255,255,255,.05); }
.dropdown-menu .divider { height: 1px; background: var(--nline); margin: 4px 6px; }
.dropdown-menu .menu-label, .mobile-nav-label {
  display: block; padding: 8px 12px 3px; font-family: var(--f-mono); font-size: 14px; font-weight: 600;
  color: var(--nt2); text-transform: uppercase; letter-spacing: .06em;
}

.nav-signin {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 8px;
  color: var(--nt2); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; flex-shrink: 0;
}
.nav-signin:hover { background: rgba(255,255,255,.05); color: var(--ntext); }
#nav-btn-signup { background: var(--or) !important; color: var(--nv) !important; font-family: var(--f-body); min-height: 44px; }
#nav-btn-signup:hover { background: var(--or2) !important; box-shadow: 0 4px 16px var(--orglow); }
.nav-dashboard, .nav-cta-pricing {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 8px;
  background: var(--or); color: var(--nv) !important; text-decoration: none; font-weight: 700; font-size: 15px;
  white-space: nowrap; flex-shrink: 0;
}
.nav-dashboard:hover, .nav-cta-pricing:hover { background: var(--or2) !important; box-shadow: 0 4px 16px var(--orglow); }
.nav-pricing { color: var(--gold) !important; }
.nav-pricing:hover { background: rgba(255,255,255,.06) !important; }

.nav-hamburger {
  display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer; border-radius: 8px; flex-shrink: 0;
}
.nav-hamburger:hover { background: rgba(255,255,255,.06); }
.nav-hamburger span { display: block; width: 22px; height: 1.5px; background: var(--ntext); border-radius: 2px; transition: transform .22s, opacity .22s; }
.nav-hamburger.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.active span:nth-child(2) { opacity: 0; }
.nav-hamburger.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 105; }
.mobile-nav-overlay.active { display: block; }
.mobile-nav {
  display: block; visibility: hidden; position: fixed; top: 0; right: 0; bottom: 0; width: 300px; max-width: 88vw;
  background: var(--nv); border-left: 1px solid var(--nline); z-index: 110; overflow-y: auto; padding: 0 0 40px;
  box-shadow: -8px 0 48px rgba(0,0,0,.5); transform: translateX(100%); transition: transform .26s cubic-bezier(.4,0,.2,1);
}
.mobile-nav.active { visibility: visible; transform: none; }
.mobile-nav-header { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 20px; border-bottom: 1px solid var(--nline); }
.mobile-nav-close {
  width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; color: var(--nt2);
}
.mobile-nav-close:hover { background: rgba(255,255,255,.06); }
.mobile-nav-section { padding: 16px 16px 8px; }
.mobile-nav-label { padding: 0 8px; margin-bottom: 4px; }
.mobile-nav-links { list-style: none; display: flex; flex-direction: column; gap: 1px; }
.mobile-nav-links a { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border-radius: 8px; color: var(--ntext); text-decoration: none; font-size: 16px; font-weight: 600; }
.mobile-nav-links a:hover { background: rgba(255,255,255,.05); }
.mobile-nav-links a.active { background: var(--ordim-d); color: var(--or); }
.mobile-nav-links .m-pricing { color: var(--gold) !important; }
.mobile-nav-divider { height: 1px; background: var(--nline); margin: 6px 16px; }
.mobile-nav-auth { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.mobile-btn-signin, .mobile-btn-signup, .mobile-btn-dashboard {
  display: block; text-align: center; padding: 13px 16px; border-radius: 8px; text-decoration: none; font-size: 15px; font-weight: 700;
}
.mobile-btn-signin { color: var(--nt2); border: 1px solid var(--nline2); }
.mobile-btn-signin:hover { background: rgba(255,255,255,.05); }
.mobile-btn-signup, .mobile-btn-dashboard { background: var(--or); color: var(--nv) !important; }
.mobile-btn-signup:hover, .mobile-btn-dashboard:hover { background: var(--or2); }

footer { background: var(--nv2); border-top: 1px solid var(--nline); color: var(--nt2); padding: 64px 0 32px; }
.footer-inner { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.4fr 1fr; gap: 40px; margin-bottom: 48px; }
.footer-brand p { font-size: 15px; line-height: 1.7; color: var(--nt2); margin: 12px 0 20px; max-width: 300px; }
.footer-brand .footer-logo { font-family: var(--f-head); font-size: 20px; font-weight: 700; color: var(--ntext); }
.footer-badge {
  display: inline-block; padding: 5px 12px; border-radius: 20px;
  background: rgba(52,211,153,.08); border: 1px solid rgba(52,211,153,.25); color: var(--green-d);
  font-family: var(--f-mono); font-size: 14px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
}
.footer-col h3, .footer-col .footer-h, .footer-section h4 {
  font-family: var(--f-mono); font-size: 14px; font-weight: 600; color: var(--nt2);
  text-transform: uppercase; letter-spacing: .14em; margin-bottom: 14px;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin: 0; }
.footer-col ul li a, .footer-section a { display: flex; align-items: center; min-height: 44px; color: var(--nt2); text-decoration: none; font-size: 15px; line-height: 1.35; }
.footer-col ul li a:hover, .footer-section a:hover { color: var(--ntext); }
.footer-bottom { border-top: 1px solid var(--nline); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-bottom p, .footer-bottom a { font-size: 14px; color: var(--nt2); text-decoration: none; }
.footer-bottom a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.footer-bottom a:hover { color: var(--ntext); }
.footer-hub { font-weight: 600; color: var(--nt2) !important; }
.footer-hub:hover { color: var(--ntext) !important; text-decoration: underline; text-decoration-color: var(--or); }

@media (max-width: 860px) {
  .header-content { height: 60px; }
  .logo img { height: 34px; }
  .header-content > nav, #nav-auth-area { display: none !important; }
  .nav-hamburger { display: flex; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-brand { grid-column: 1 / -1; }
  footer { padding: 44px 0 28px; }
}
@media (max-width: 480px) { .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* video slot: hidden until data-video-id is set; CSS sizes the box, so filling it never shifts layout (js/vslot.js; the hub and the four test pages) */
.vslot { display: none; }
.vslot[data-video-id] { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 20px 0 28px; border-radius: var(--r2); overflow: hidden; background: var(--nv); }
.vslot[data-ratio="9x16"] { aspect-ratio: 9 / 16; max-width: 315px; }
.vslot > button, .vslot > iframe { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; }
.vslot-btn { cursor: pointer; }
.vslot-btn img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vslot-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: var(--or); box-shadow: 0 6px 20px rgba(0,0,0,.35); transition: transform .15s; }
.vslot-play::after { content: ""; position: absolute; left: 25px; top: 20px; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent var(--nv); }
.vslot-btn:hover .vslot-play, .vslot-btn:focus-visible .vslot-play { transform: scale(1.08); }
.vslot-btn:focus-visible { outline: 3px solid var(--or); outline-offset: -3px; }

/* Q&A answers (test-page tabs, /what-is H3s): the source line under an answer, and its arrow link */
.u-prose .qa-rule { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--ink2); }
.u-prose .qa-more { margin-top: 10px; }
.u-prose .qa-more a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-right: 24px; }
.qa-more a::after { content: ""; flex: none; width: 7px; height: 7px; border-top: 2px solid var(--or2); border-right: 2px solid var(--or2); transform: rotate(45deg); }