:root {
  --ink: #0a1a20;
  --ink-2: #24343a;
  --muted: #63737a;
  --line: #d9e3e5;
  --wash: #f4f8f8;
  --teal: #13a8aa;
  --teal-deep: #087d86;
  --cyan: #2fbcd1;
  --mint: #8ce7c8;
  --dark: #071319;
  --dark-2: #0c2026;
  --white: #fff;
  --shadow: 0 22px 70px rgba(9, 32, 39, .13);
  --radius: 18px;
  --shell: min(1180px, calc(100% - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.shell { width: var(--shell); margin: 0 auto; }
.skip-link { position:absolute; left:-9999px; top:0; }
.skip-link:focus { left:20px; top:20px; z-index:999; background:#fff; padding:10px 14px; }

/* Visible keyboard focus everywhere. The design relies on colour alone in
   several places, so focus must not be left to the UA default. */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--teal-deep);
  outline-offset: 3px;
  border-radius: 4px;
}
.button-light:focus-visible,
.button-outline-light:focus-visible,
.dark-section a:focus-visible,
.cta-section a:focus-visible,
.questions a:focus-visible { outline-color: #8ce7df; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(10,26,32,.07);
}
.nav-wrap { height: 78px; display:flex; align-items:center; gap:32px; }
.brand { width: 184px; display:block; }
.brand img { display:block; width:100%; height:auto; }
.primary-nav { display:flex; align-items:center; gap:28px; margin-left:auto; }
.primary-nav a, .text-link { font-size:14px; color:var(--ink-2); }
.primary-nav a:hover, .text-link:hover { color:var(--teal-deep); }
.nav-actions { display:flex; align-items:center; gap:18px; }
.menu-button { display:none; border:0; background:transparent; width:40px; height:40px; padding:8px; cursor:pointer; }
.menu-button span { display:block; height:2px; background:var(--ink); margin:7px 0; }

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 24px;
  border-radius:999px;
  background:var(--ink);
  color:#fff;
  font-weight:700;
  font-size:14px;
  letter-spacing:-.01em;
  transition:.2s ease;
  border:1px solid var(--ink);
}
.button:hover { transform:translateY(-1px); box-shadow:0 10px 25px rgba(8,31,38,.14); }
.button-small { min-height:42px; padding:0 18px; }
.button-ghost { background:transparent; color:var(--ink); border-color:#b7c6c9; }
.button-light { background:#fff; color:var(--dark); border-color:#fff; }
.button-outline-light { background:transparent; border-color:rgba(255,255,255,.45); color:#fff; }

.hero {
  overflow:hidden;
  background:
    radial-gradient(circle at 83% 28%, rgba(47,188,209,.16), transparent 30%),
    radial-gradient(circle at 72% 58%, rgba(140,231,200,.13), transparent 32%),
    linear-gradient(180deg, #fbfdfd, #fff);
}
.hero-grid {
  min-height:700px;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:74px;
  align-items:center;
  padding-top:72px;
  padding-bottom:82px;
}
.eyebrow {
  color:var(--teal-deep);
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  margin:0 0 18px;
}
.eyebrow.light { color:#8ce7df; }
.hero h1 {
  margin:0;
  font-size:clamp(58px, 7vw, 95px);
  letter-spacing:-.065em;
  line-height:.91;
  max-width:720px;
  font-weight:720;
}
.hero h1 span {
  background:linear-gradient(100deg, #0d9fa7, #25b9cb 55%, #76d8b7);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-lede {
  max-width:650px;
  font-size:20px;
  color:#42545a;
  margin:30px 0 28px;
}
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.hero-note { margin:25px 0 0; font-size:13px; color:#68797f; }

.truth-panel {
  background:rgba(255,255,255,.92);
  border:1px solid rgba(10,26,32,.09);
  border-radius:22px;
  box-shadow:var(--shadow);
  overflow:hidden;
  transform:rotate(.6deg);
}
.panel-bar {
  display:flex;
  gap:10px;
  align-items:center;
  padding:15px 18px;
  border-bottom:1px solid #e6eeee;
  font-size:12px;
  color:#5d6e73;
  font-weight:650;
}
.status-dot { width:8px; height:8px; border-radius:50%; background:#62d7ad; box-shadow:0 0 0 4px rgba(98,215,173,.15); }
.panel-time { margin-left:auto; font-variant-numeric:tabular-nums; }
.panel-question { padding:24px 22px 14px; font-weight:780; font-size:24px; letter-spacing:-.025em; }
.evidence-row {
  margin:0 16px 10px;
  border:1px solid #e1e9ea;
  padding:14px;
  border-radius:12px;
  display:grid;
  grid-template-columns:74px 1fr 24px;
  align-items:center;
  gap:12px;
  background:#fff;
}
.evidence-row strong { display:block; font-size:14px; }
.evidence-row small { display:block; color:#7a8a90; margin-top:2px; }
.evidence-type {
  font-size:9px;
  letter-spacing:.11em;
  font-weight:850;
  color:#168b8f;
  background:#e8f8f5;
  padding:5px 6px;
  border-radius:6px;
  text-align:center;
}
.evidence-type.derived { color:#54606f; background:#eef1f5; }
.check { color:#159374; font-weight:900; }
.panel-result {
  margin:18px 16px 8px;
  padding:18px;
  border-radius:12px;
  background:#0b1b21;
  color:#fff;
}
.panel-result span { display:block; color:#82d8cf; font-size:10px; letter-spacing:.11em; font-weight:800; margin-bottom:7px; text-transform:uppercase; }
.panel-result strong { display:block; font-size:15px; line-height:1.45; }
.lineage { font-size:12px; color:#0c8790; font-weight:700; padding:12px 20px 18px; }

.questions { background:var(--dark); color:#fff; padding:28px 0; }
.questions .shell { display:grid; grid-template-columns:250px 1fr; gap:30px; align-items:center; }
.questions p { color:#9fb2b7; margin:0; font-size:13px; }
.question-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px 18px; }
.question-grid span { font-size:14px; font-weight:650; }

.section { padding:110px 0; }
.section-heading { max-width:850px; margin-bottom:60px; }
.section-heading.narrow { max-width:720px; }
.section-heading h2, .matter-grid h2, .deployment h2, .cta h2 {
  margin:0 0 22px;
  font-size:clamp(38px, 5vw, 62px);
  line-height:1.02;
  letter-spacing:-.045em;
}
.section-heading > p:last-child { color:#5c6e74; font-size:18px; max-width:760px; }

.flow {
  display:grid;
  grid-template-columns:1fr 42px 1fr 42px 1fr 42px 1fr;
  align-items:stretch;
}
.flow article {
  border-top:1px solid #a7b9bd;
  padding:20px 8px 8px 0;
}
.flow-number { font-size:11px; font-weight:800; letter-spacing:.1em; color:var(--teal-deep); }
.flow h3 { margin:20px 0 8px; font-size:22px; letter-spacing:-.025em; }
.flow p { margin:0; color:#697b80; font-size:14px; }
.flow-arrow { display:flex; align-items:center; justify-content:center; color:#87a0a5; }

.dark-section {
  background:
    radial-gradient(circle at 82% 48%, rgba(24,155,165,.20), transparent 28%),
    var(--dark);
  color:#fff;
}
.matter-grid { display:grid; grid-template-columns:1fr .9fr; gap:90px; align-items:center; }
.matter-copy { font-size:19px; color:#c7d3d6; max-width:650px; }
.matter-copy.muted { color:#81979d; margin-bottom:30px; }
/* The cascade offset must clear a TWO-LINE card, not just a one-line one.
   At the original 88px step, "Authorization and outcomes remain traceable"
   wrapped and the card below covered its second line. */
.matter-stack { position:relative; min-height:474px; }
.matter-card {
  position:absolute;
  width:76%;
  min-height:110px;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(14,38,45,.82);
  backdrop-filter:blur(8px);
  box-shadow:0 28px 60px rgba(0,0,0,.2);
  padding:20px;
}
.matter-card span { display:block; color:#75d6ca; font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:800; }
.matter-card strong { display:block; margin-top:12px; font-size:18px; }
.card-one { top:0; left:3%; }
.card-two { top:118px; left:12%; }
.card-three { top:236px; left:21%; }
.card-four { top:354px; left:30%; }

.industry-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.industry-card {
  min-height:320px;
  padding:28px;
  border:1px solid #dce5e7;
  border-radius:var(--radius);
  background:#fff;
  transition:.2s ease;
}
.industry-card:hover { transform:translateY(-3px); box-shadow:0 18px 44px rgba(14,50,59,.08); border-color:#c2d8d9; }
.industry-card.featured { background:linear-gradient(145deg,#ebfbf8,#f3fbfd); border-color:#bfe6df; }
.industry-icon { color:#168f96; height:42px; display:flex; align-items:center; }
.industry-icon svg { width:30px; height:30px; display:block; }
.industry-card h3 { font-size:21px; margin:14px 0 10px; letter-spacing:-.025em; }
.industry-card p { color:#66787e; font-size:14px; min-height:85px; }
.industry-card ul { margin:18px 0 0; padding:0; list-style:none; border-top:1px solid #e5ecee; padding-top:15px; }
.industry-card li { font-size:12px; color:#4d6268; margin:7px 0; }
.industry-card li::before { content:"\2713"; color:#13a3a8; margin-right:8px; font-weight:700; }

.truth-rules { background:var(--wash); }
.rules-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; }
.rules-list { border-top:1px solid #bdcbce; }
.rules-list > div {
  display:grid;
  grid-template-columns:42px 1fr;
  gap:16px;
  padding:19px 0;
  border-bottom:1px solid #d2dddf;
}
.rules-list span { font-size:11px; color:#118b92; font-weight:800; }
.rules-list p { margin:0; color:#586b71; font-size:14px; }
.rules-list strong { color:var(--ink); }

.deployment { padding:82px 0; }
.deployment-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:end; }
.deployment-grid p:last-child { font-size:18px; color:#61747a; margin:0 0 7px; }

.cta-section {
  background:
    radial-gradient(circle at 15% 10%, rgba(44,193,190,.22), transparent 24%),
    linear-gradient(135deg,#061419,#0b242b);
  color:#fff;
  padding:100px 0;
}
.cta { text-align:center; max-width:900px; margin:0 auto; }
.cta h2 { font-size:clamp(42px,6vw,72px); }
.cta > p:not(.eyebrow) { color:#aec0c4; max-width:720px; margin:0 auto 30px; font-size:18px; }
.cta-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }
.cta-contact { margin-top:26px; font-size:14px; }
.cta-contact a { color:#8ce7df; text-decoration:underline; text-underline-offset:3px; }

.site-footer { padding:48px 0; border-top:1px solid #e2e9ea; }
.footer-grid { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:30px; }
.footer-logo { width:145px; height:auto; }
.footer-grid p { margin:8px 0 0; color:#728287; font-size:12px; }
.footer-links { display:flex; gap:22px; font-size:12px; color:#506268; flex-wrap:wrap; }
.footer-meta { display:flex; flex-direction:column; align-items:flex-end; color:#849398; font-size:11px; gap:4px; }

/* ---------------------------------------------------------------------------
   Industry availability status (11A)
   The badge is deliberately subordinate to the industry name: smaller, quieter,
   and never competing with the h3. "In Development" is muted but NOT disabled
   or apologetic — it is a valid application of the architecture.
   --------------------------------------------------------------------------- */
.visually-hidden {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.industry-status {
  display:inline-flex; align-items:center; gap:7px;
  margin:-4px 0 12px; padding:4px 10px 4px 8px;
  font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  border-radius:999px; border:1px solid transparent; line-height:1.5;
}
.industry-status-dot { width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.industry-status.is-available { color:var(--teal-deep); background:#e2f6f4; border-color:#bfe3df; }
.industry-status.is-in-development { color:#5c6f77; background:#eef2f3; border-color:#dde5e7; }

.industries-status-note {
  margin:18px auto 0; max-width:60ch;
  font-size:14px; color:var(--muted);
}
.industries-status-note strong { color:var(--ink-2); font-weight:700; }

/* ---------------------------------------------------------------------------
   Observation Boundary (11B)
   The visual grammar is doctrine, not decoration: a solid node is an established
   state, a solid arrow a supported transition, and a DOTTED path a discontinuity.
   Never draw a continuous line where evidence continuity does not exist.
   --------------------------------------------------------------------------- */
.observation-boundary { background:var(--wash); }

.ob-layout {
  display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:center;
  margin-top:48px;
}
.ob-copy p { color:var(--ink-2); font-size:15.5px; }
.ob-principle {
  font-size:19px; font-weight:600; line-height:1.5; color:var(--ink);
  border-left:3px solid var(--teal); padding-left:16px; margin:0 0 20px;
}
.ob-list { margin:20px 0; padding:0; list-style:none; }
.ob-list li {
  position:relative; padding-left:20px; margin:9px 0;
  font-size:14.5px; color:var(--ink-2);
}
.ob-list li::before {
  content:""; position:absolute; left:0; top:8px;
  width:7px; height:7px; border-radius:50%;
  border:1.5px dotted var(--teal-deep);
}
.ob-doctrine {
  margin:22px 0 0; font-weight:650; color:var(--ink); font-size:16px;
}

.ob-figure { margin:0; }
.ob-diagram { width:100%; height:auto; color:var(--teal-deep); display:block; }
.ob-bound { fill:#fff; stroke:#b9d3d4; stroke-width:1.4; stroke-dasharray:7 5; }
.ob-bound-label {
  fill:#7b9296; font-size:9.5px; font-weight:700; letter-spacing:.14em;
}
.ob-node circle { fill:var(--teal-deep); stroke:#fff; stroke-width:3; }
.ob-node-label { fill:var(--ink); font-size:12px; font-weight:700; text-anchor:middle; }
.ob-edge-solid { stroke:var(--teal-deep); stroke-width:2.4; }
.ob-edge-gap {
  fill:none; stroke:#8fa6ab; stroke-width:2.2; stroke-dasharray:2 7; stroke-linecap:round;
}
.ob-gap-mark { fill:#8fa6ab; font-size:15px; font-weight:700; text-anchor:middle; }

.ob-legend {
  display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:16px;
  font-size:12px; color:var(--muted);
}
.ob-legend span { display:inline-flex; align-items:center; gap:8px; }
.ob-key { width:20px; height:2px; flex:none; }
.ob-key-node { width:9px; height:9px; border-radius:50%; background:var(--teal-deep); }
.ob-key-solid { background:var(--teal-deep); }
/* The dotted key must READ as dotted, not merely as a lighter solid — the
   distinction is the whole point and must not rest on colour alone. */
.ob-key-dotted {
  height:0; border-top:2px dotted #8fa6ab; background:none;
}

.ob-panels { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:44px; }
.ob-panel {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 26px 24px;
}
.ob-panel h3 { margin:0 0 12px; font-size:17px; letter-spacing:-.02em; }
.ob-panel p { margin:0; font-size:14px; color:#66787e; }

.ob-example { margin:0 0 18px; }
.ob-example > div {
  display:grid; grid-template-columns:78px 1fr; gap:12px;
  padding:7px 0; border-bottom:1px solid #eef3f4;
}
.ob-example dt { font-size:12px; font-weight:700; color:var(--teal-deep); letter-spacing:.04em; }
.ob-example dd { margin:0; font-size:13.5px; color:var(--ink-2); }

.ob-verdict { margin:0 0 10px; font-size:13.5px; line-height:1.6; }
.ob-verdict-tag {
  display:inline-block; margin-right:7px; padding:2px 8px; border-radius:999px;
  font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
}
.ob-verdict-yes .ob-verdict-tag { background:#e2f6f4; color:var(--teal-deep); }
.ob-verdict-no { color:var(--muted); }
.ob-verdict-no .ob-verdict-tag { background:#f2eeee; color:#8a6a6a; }
.ob-verdict-no { text-decoration:none; }

.ob-causality {
  margin:34px auto 0; max-width:70ch; text-align:center;
  font-size:15px; color:var(--ink-2);
}
.ob-causality strong { color:var(--teal-deep); }

@media (max-width: 980px) {
  .ob-layout { grid-template-columns:1fr; gap:34px; }
  .ob-panels { grid-template-columns:1fr; }
  .primary-nav { display:none; }
  .nav-actions .text-link { display:none; }
  .menu-button { display:block; margin-left:auto; }

  /* Mobile navigation is toggled by a CLASS, not by JavaScript writing inline
     styles. Keeps presentation in the stylesheet and keeps the strict
     Content-Security-Policy (no 'unsafe-inline') unambiguous. */
  .primary-nav.is-open {
    display:flex;
    position:absolute;
    top:78px;
    left:0;
    right:0;
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
    padding:22px;
    background:#fff;
    border-bottom:1px solid #dfe7e8;
  }

  .hero-grid { grid-template-columns:1fr; gap:50px; min-height:auto; }
  .truth-panel { max-width:700px; }
  .questions .shell { grid-template-columns:1fr; }
  .question-grid { grid-template-columns:repeat(2,1fr); }
  .flow { grid-template-columns:1fr 1fr; gap:30px; }
  .flow-arrow { display:none; }
  .industry-grid { grid-template-columns:repeat(2,1fr); }
  .matter-grid, .rules-grid, .deployment-grid { grid-template-columns:1fr; gap:50px; }
  .matter-stack { min-height:380px; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-meta { align-items:flex-start; }
}
@media (max-width: 640px) {
  :root { --shell: min(100% - 28px, 1180px); }
  .site-header .button-small { display:none; }
  .brand { width:155px; }
  .hero-grid { padding-top:58px; padding-bottom:60px; }
  .hero h1 { font-size:58px; }
  .hero-lede { font-size:18px; }
  .truth-panel { transform:none; }
  .evidence-row { grid-template-columns:60px 1fr 18px; padding:11px; }
  .section { padding:78px 0; }
  .question-grid, .flow, .industry-grid { grid-template-columns:1fr; }
  .ob-layout, .ob-panels { grid-template-columns:1fr; gap:32px; }
  .ob-principle { font-size:17px; }
  .matter-card { width:88%; }
  .card-one { left:0; }
  .card-two { left:4%; }
  .card-three { left:8%; }
  .card-four { left:12%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .button:hover, .industry-card:hover { transform: none; }
}

/* ---- Live Matters (World Events) ---- */
.live-matters { background:linear-gradient(180deg,#f6fbfb,#fff); border-top:1px solid #e3ecee; }
.live-strip { display:flex; align-items:center; gap:10px; font-size:13px; color:#5c6e74; margin:-30px 0 22px; }
.live-dot { width:9px; height:9px; border-radius:50%; background:#13a3a8; box-shadow:0 0 0 0 rgba(19,163,168,.45); animation:live-pulse 2.4s infinite; }
@keyframes live-pulse { 0%{box-shadow:0 0 0 0 rgba(19,163,168,.45)} 70%{box-shadow:0 0 0 9px rgba(19,163,168,0)} 100%{box-shadow:0 0 0 0 rgba(19,163,168,0)} }
.live-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.live-fallback { grid-column:1 / -1; color:#5c6e74; font-size:15px; margin:0; }
.live-card { display:flex; flex-direction:column; gap:8px; padding:20px 22px; border:1px solid #dce5e7; border-radius:var(--radius); background:#fff; color:inherit; text-decoration:none; min-height:150px; transition:.2s ease; }
.live-card:hover { transform:translateY(-3px); box-shadow:0 18px 44px rgba(14,50,59,.08); border-color:#c2d8d9; }
.live-card.is-new { animation:live-arrive .9s ease-out; border-color:#13a3a8; }
@keyframes live-arrive { from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none} }
.live-card-media { margin:-20px -22px 6px; height:150px; overflow:hidden; border-radius:var(--radius) var(--radius) 0 0; background:#eef2f3; position:relative; }
.live-card-media img { display:block; width:100%; height:100%; object-fit:cover; }
.live-card-credit { position:absolute; right:0; bottom:0; max-width:100%; font-size:11px; color:#fff; background:rgba(0,0,0,.55); padding:2px 7px; border-radius:4px 0 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.live-tile { width:100%; height:100%; display:flex; align-items:center; justify-content:center; gap:14px; color:#fff; }
.live-tile svg { width:42px; height:42px; flex:none; }
.live-tile span { font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; max-width:58%; line-height:1.25; opacity:.92; }
.live-tile.d-geopolitics-and-conflict { background:linear-gradient(135deg,#5a2a2a,#9b3d3d); }
.live-tile.d-disaster-and-public-safety { background:linear-gradient(135deg,#7a3e00,#c9691a); }
.live-tile.d-law-and-public-investigations { background:linear-gradient(135deg,#2f3a5a,#4f6199); }
.live-tile.d-government-and-policy { background:linear-gradient(135deg,#1f4d3a,#2f7a5b); }
.live-tile.d-corporate-and-systemic-failure { background:linear-gradient(135deg,#4b3a6b,#7a5aa6); }
.live-tile.d-science-and-public-health { background:linear-gradient(135deg,#0f5a66,#1f8a99); }
.live-tile.d-culture-and-reputation { background:linear-gradient(135deg,#7a2a5a,#b04a8a); }
.live-tile.d-historical-reconstruction { background:linear-gradient(135deg,#5a4a2a,#8a7245); }
.live-tile.d-unclassified { background:linear-gradient(135deg,#4a4f57,#6d737c); }
.live-card-head { display:flex; justify-content:space-between; gap:10px; font-size:12px; color:#66787e; }
.live-badge { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:2px 8px; border-radius:4px; }
.live-badge.official { color:#0b6b3a; background:#e6f4ec; }
.live-badge.reported { color:#7a4a00; background:#fff4e0; }
.live-card-title { font-weight:650; font-size:15px; line-height:1.35; letter-spacing:-.01em; color:var(--ink); }
.live-card-sub { font-size:13px; color:#66787e; line-height:1.4; }
.live-card-foot { margin-top:auto; font-size:12px; color:#66787e; }
.live-actions { display:flex; align-items:center; gap:22px; margin-top:26px; flex-wrap:wrap; }
.live-note { margin:0; font-size:14px; color:#5c6e74; max-width:620px; }
@media (min-width: 1200px) { .live-grid { grid-template-columns:repeat(4,1fr); } .live-card { padding:16px 18px; } .live-card-media { margin:-16px -18px 6px; height:130px; } }
@media (max-width: 900px) { .live-grid { grid-template-columns:1fr 1fr; } }
@media (max-width: 600px) { .live-grid { grid-template-columns:1fr; } .live-strip { margin-top:-10px; } }