:root{
  /* Color tokens */
  --bg:#0b0f14;
  --surface:#111720;
  --text:#e6ecf2;
  --muted:#a5b1bd;
  --brand:#14b8a6;
  --accent:#7c3aed;
  --warning:#f59e0b;
  --danger:#ef4444;
  --success:#22c55e;
  --border:#233041;
  --focus-color:#14b8a6;

  /* Layout tokens */
  --container:1200px;
  --container-narrow:880px;
  --gutter:24px;

  /* Spacing (8pt scale) */
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.25rem;
  --space-6:1.5rem;
  --space-7:2rem;
  --space-8:2.5rem;
  --space-9:3rem;
  --space-10:4rem;

  /* Radius & shadow */
  --radius:16px;
  --radius-sm:8px;
  --shadow:0 6px 24px rgba(0,0,0,.24);

  /* Typography scale */
  --text-xs: clamp(.78rem, .75rem + .2vw, .85rem);
  --text-sm: clamp(.9rem, .85rem + .3vw, 1rem);
  --text-md: clamp(1rem, .95rem + .4vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + .6vw, 1.25rem);
  --text-xl: clamp(1.35rem, 1.1rem + 1vw, 1.6rem);
  --text-2xl: clamp(1.6rem, 1.2rem + 1.6vw, 2rem);
  --text-3xl: clamp(2rem, 1.6rem + 2vw, 2.6rem);
}

*,
*::before,
*::after{ box-sizing:border-box; }

html, body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  line-height:1.5;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img, svg, video{ max-width:100%; height:auto; }

a{ color: var(--brand); text-decoration: none; }
a:hover{ text-decoration: underline; }

.visually-hidden,
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:-9999px; top:auto;
}
.skip-link:focus{
  left: var(--gutter); top: var(--gutter);
  background: var(--surface);
  color: var(--text);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border:1px solid var(--border);
  outline:2px solid var(--focus-color);
}

.container{
  max-width: var(--container);
  padding-inline: var(--gutter);
  margin-inline:auto;
}

.section{ padding-block: clamp(calc(var(--space-6) * .8), 3.6vw, calc(var(--space-8) * .8)); }

h1{ font-size: var(--text-3xl); line-height:1.1; margin: 0 0 var(--space-4); }
h2{ font-size: var(--text-2xl); line-height:1.2; margin: 0 0 var(--space-4); }
h3{ font-size: var(--text-xl); line-height:1.25; margin: 0 0 var(--space-3); }

.subhead{ color: var(--muted); font-size: var(--text-lg); margin: 0 0 var(--space-6); }
.muted{ color: var(--muted); }

/* Header */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: linear-gradient(to bottom, rgba(11,15,20,.9), rgba(11,15,20,.6));
  backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{
  display:flex; align-items:center; gap: var(--space-6);
  min-height:64px;
}
.brand-link{ font-weight:700; color:var(--text); font-size: var(--text-lg); }
.primary-nav ul{
  list-style:none; display:flex; gap: var(--space-4); padding:0; margin:0;
}
.primary-nav a{ color: var(--muted); }
.primary-nav a:hover{ color: var(--text); }

.header-cta{ margin-left:auto; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: .7rem 1rem;
  border-radius: var(--radius-sm);
  border:1px solid transparent;
  font-weight:600;
  cursor:pointer;
  transition: transform .06s ease, background .2s ease, border-color .2s ease;
  margin-inline: 1px; /* prevent focus/active outline from touching container edge */
}
.btn:focus{ outline:2px solid var(--focus-color); outline-offset:-2px; }
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--brand); color:#031a17; }
.btn-secondary{ 
  background: rgba(16, 185, 129, 0.08); 
  color: var(--text); 
  border-color: rgba(16, 185, 129, 0.3);
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.1) inset;
}
.btn-secondary:hover {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.2) inset;
}

/* Cards */
.card{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-6);
}

/* Callouts */
.callout{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  margin: var(--space-4) 0;
}

.callout-warning{
  border-left: 4px solid var(--warning);
  background: rgba(245,158,11,.05);
}

.callout-info{
  border-left: 4px solid var(--brand);
  background: rgba(20,184,166,.05);
}

.callout-important{
  border-left: 4px solid var(--danger);
  background: rgba(239,68,68,.05);
}

.callout h4{
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  font-weight: 600;
}

.callout p{
  margin: 0;
}

/* Data tables */
.data-table{
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0;
}

.data-table th,
.data-table td{
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.data-table th{
  background: rgba(20,184,166,.1);
  font-weight: 600;
  color: var(--text);
  font-size: var(--text-sm);
}

.data-table td{
  color: var(--muted);
  font-size: var(--text-sm);
}

.data-table tr:last-child td{
  border-bottom: none;
}

/* Responsive tables */
.table-scroll{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll .data-table{
  min-width: 640px; /* avoid cramped columns on small phones */
}

/* Mobile adjustments */
@media (max-width: 640px){
  .card{ padding: var(--space-5); }
  .callout{ padding: var(--space-4); }
  .badges{ gap: var(--space-2); }
  .badge{ font-size: var(--text-xs); padding:.35rem .55rem; }
}

/* Hero (overlay variant) */
.hero--overlay { padding-block: 0; } /* media box handles vertical rhythm */

/* Hero media aligns to the same inner width as .container content */
.hero-media{
  position: relative;
  min-height: clamp(48vh, 60vh, 72vh);
  border-radius: var(--radius);
  overflow: hidden;

  /* Mobile: full-bleed within page gutter */
  margin: calc(var(--space-8) * .8) var(--gutter) 0;
}

@media (min-width: 768px){
  .hero-media{
    /* Desktop: center and subtract container gutters so edges match the grid */
    margin: calc(var(--space-8) * .8) auto 0;
    max-width: calc(var(--container) - 2 * var(--gutter));
  }
}

/* Video fills the media box */
.hero-media .hero-video{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  background: #0f141c;
}

/* Left-heavy scrim for legible text */
.hero-scrim{
  background:
    linear-gradient(90deg, rgba(11,15,20,.78) 0%, rgba(11,15,20,.48) 42%, rgba(11,15,20,.12) 68%, rgba(11,15,20,0) 100%),
    radial-gradient(120% 80% at 0% 50%, rgba(11,15,20,.5) 0%, rgba(11,15,20,0) 60%);
}

/* Overlay content: card-like inset inside the media frame */
.hero-overlay{
  position: relative; z-index: 1;
  display: grid; gap: var(--space-4);
  width: calc(100% - 2 * var(--space-6)); /* account for horizontal inset so text can wrap */
  max-width: 720px;

  /* inset inside the video card like any other card */
  padding-block: clamp(calc(24px * .8), calc(4vw * .8), calc(48px * .8));
  margin-left: var(--space-6);   /* same as card padding */
  margin-right: var(--space-6);
  padding-left: 0;
  padding-right: 0;
}
.hero-overlay .hero-actions{ display:flex; gap: var(--space-4); flex-wrap: wrap; }
.hero-overlay .credibility{ color: var(--muted); }

/* Spacing to the metric row below the media */
.hero-metrics{ margin-top: clamp(calc(20px * .8), calc(3vw * .8), calc(36px * .8)); }

/* Metric row aligns with standard page container width */
.hero-metrics{
  margin: clamp(calc(20px * .8), calc(3vw * .8), calc(36px * .8)) auto 0;
}

/* (no desktop override; inherits .container width like product tile grids) */

.hero-metrics .tile-grid{
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Breakpoints */
@media (max-width: 1024px){
  .hero-metrics .tile-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px){
  .hero-metrics .tile-grid{
    grid-template-columns: 1fr;
  }
}

/* Helpers */
.tile-label{ color: var(--muted); font-size: var(--text-sm); }
.tile-metric{ font-size: var(--text-2xl); font-weight: 700; }
.delta{ font-size: var(--text-sm); margin-left: .5ch; }
.delta-up{ color: var(--success); }

/* Reduced motion already exists; just make sure the video hides there */
@media (prefers-reduced-motion: reduce){
  .hero-media .hero-video{ display:none; }
}

/* Receipts */
.receipts-list{
  display:grid; gap: var(--space-3);
  padding-left:1.2rem;
}
.proof-link{ font-size: var(--text-sm); margin-left:.5rem; }

/* How it works */
.how-grid{
  display:grid; gap: var(--space-6);
  grid-template-columns: repeat(4, minmax(0,1fr));
  width: 100%;
  overflow: hidden;
}
.how-card{ 
  min-width: 0; /* Allow cards to shrink below their content size */
  word-wrap: break-word; /* Prevent long words from causing overflow */
}
.how-card p{ color: var(--muted); }

/* Responsive breakpoints for how-grid */
@media (max-width: 1024px){
  .how-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .how-grid{ grid-template-columns: 1fr; }
}

/* Pilot */
.timeline{ display:grid; gap: var(--space-4); grid-template-columns: repeat(4, minmax(0,1fr)); padding:0; margin:0; }
.timeline__card{ list-style:none; }
@media (max-width: 900px){ .timeline{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .timeline{ grid-template-columns: 1fr; } }
.badge{
  display:inline-flex; align-items:center; gap:.5ch;
  padding:.4rem .6rem; border:1px solid var(--border);
  border-radius: 999px; background: rgba(255,255,255,.03);
  font-size: var(--text-sm); color: var(--muted);
}
.capacity{ margin-top: var(--space-4); }

/* Pill styles for issue tags */
.issue-stack{ display:grid; gap:.35rem; margin-top: var(--space-3); width:min-content; }
.issue-stack--inline{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top: var(--space-3); }
.pill{ display:inline-flex; align-items:center; padding:.25rem .7rem; border-radius:999px; border:1px solid var(--border); font-size: var(--text-xs); white-space:nowrap; }
.pill.fresh { background: rgba(20,184,166,.16); border-color: var(--brand); }
.pill.gap{ background: rgba(239,68,68,.12); border-color: var(--danger); }
.pill.stale{ background: rgba(245,158,11,.12); border-color: var(--warning); }

/* HFR calculator card - responsive alignment */
.hfr-calculator-card{ max-width: 600px; margin: 1.5rem auto; }
@media (min-width: 768px){ .hfr-calculator-card{ margin-left: 0; margin-right: 0; } }

/* Privacy tabs */
.tabs{ display:flex; gap: var(--space-3); margin-bottom: var(--space-4); padding-inline: var(--space-1); }
.tab{
  background: transparent; color: var(--text);
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:.5rem .75rem; cursor:pointer;
  margin-inline: 1px; /* slight inset so outline doesn't spill beyond margin */
}
.tab.active{ background: rgba(20,184,166,.12); border-color: var(--brand); }
.tab:focus{ outline:2px solid var(--focus-color); outline-offset:-2px; }

/* Modes placement variants */
.modes{ display:flex; gap: var(--space-3); flex-wrap:wrap; }
.modes--mobile{ display:flex; }
.modes--desktop{ display:none; }
@media (min-width: 960px){
  .modes--mobile{ display:none; }
  .modes--desktop{ display:flex; }
}

.tabpanels .tabpanel{ display:none; }
.tabpanels .tabpanel.active{ display:block; }
.tabpanels .tabpanel[hidden]{ display:none !important; }
.tabpanel ul{ padding-left: 1.2rem; }
.trust-link{ margin-top: var(--space-3); }

/* Social proof */
.social-proof{ font-size: var(--text-lg); }
.quote p{ color: var(--muted); }

/* Investor strip */
.investor-inner{ display:flex; }
.badges{ list-style:none; display:flex; gap: var(--space-3); padding:0; margin:0; flex-wrap:wrap; }
.badges .badge{ border-color: rgba(124,58,237,.35); background: rgba(124,58,237,.08); color:#d9c9ff; }

/* Logo strip utility: muted, compact brand marks within cards */
.logo-strip{
  display:flex; align-items:center; gap: var(--space-4);
  margin-top: var(--space-3);
  opacity:.85;
  flex-wrap:wrap;
}
/* Base size tuned to be visually comparable to h3 height */
.logo-strip img{ height:34px; filter: grayscale(100%); opacity:.95; }
@media (min-width: 960px){ .logo-strip img{ height:38px; } }
@media (max-width: 640px){ .logo-strip img{ height:28px; } }
/* Slightly favor faint marks; remove extra brightening for now-white SVGs */
.logo-strip img[alt*="Oxford"],
.logo-strip img[alt*="Cambridge"],
.logo-strip img[alt*="King"],
.logo-strip img[alt*="Uber"],
.logo-strip img[alt*="BHP"],
.logo-strip img[alt*="Rio"],
.logo-strip img[alt*="Goldman"],
.logo-strip img[alt*="Deloitte"],
.logo-strip img[alt*="McKinsey"],
.logo-strip img[alt*="Unilever"]{ opacity:.95; filter: grayscale(100%); }

/* Keep McKinsey at previous visual size; shrink Deloitte by 50% */
.logo-strip img[alt*="McKinsey"]{ height:28px; }
.logo-strip img[alt*="Deloitte"]{ height:17px; }
@media (min-width: 960px){
  .logo-strip img[alt*="McKinsey"]{ height:32px; }
  .logo-strip img[alt*="Deloitte"]{ height:19px; }
}
@media (max-width: 640px){
  .logo-strip img[alt*="McKinsey"]{ height:24px; }
  .logo-strip img[alt*="Deloitte"]{ height:14px; }
}

/* Brand scale overrides */
.logo-strip img[alt*="BHP"],
.logo-strip img[alt*="Rio"],
.logo-strip img[alt*="Uber"]{ height:51px; }
@media (min-width: 960px){
  .logo-strip img[alt*="BHP"],
  .logo-strip img[alt*="Rio"],
  .logo-strip img[alt*="Uber"]{ height:57px; }
}
@media (max-width: 640px){
  .logo-strip img[alt*="BHP"],
  .logo-strip img[alt*="Rio"],
  .logo-strip img[alt*="Uber"]{ height:42px; }
}

.logo-strip img[alt*="Oxford"]{ height:68px; }
@media (min-width: 960px){ .logo-strip img[alt*="Oxford"]{ height:76px; } }
@media (max-width: 640px){ .logo-strip img[alt*="Oxford"]{ height:56px; } }

/* Cambridge white logo was oversized; set to 25% of prior size */
.logo-strip img[alt*="Cambridge"]{ height:17px; }
@media (min-width: 960px){ .logo-strip img[alt*="Cambridge"]{ height:19px; } }
@media (max-width: 640px){ .logo-strip img[alt*="Cambridge"]{ height:14px; } }

/* Optional variants if needed later */
.logo-strip--sm img{ height:22px; }
.logo-strip--lg img{ height:40px; }

/* Footer */
.site-footer{
  border-top:1px solid rgba(255,255,255,.06);
  padding-block: var(--space-8);
}
.footer-inner{ display:grid; gap: var(--space-4); }
.footer-legal{ color: var(--muted); font-size: var(--text-sm); }

/* Placeholders */
.placeholder{ opacity:.75; }
.link-inline{ text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); }

/* ===== Mobile-first header/nav ===== */

/* Burger menu toggle */
.menu-toggle{
  display:inline-flex; align-items:center; gap:.5rem;
  height:44px; padding:0 .85rem;
  border-radius:999px; border:1px solid var(--border);
  background: rgba(255,255,255,.06); color: var(--text);
  -webkit-tap-highlight-color: transparent; backdrop-filter: blur(6px);
  cursor: pointer;
  position: relative;
  z-index: 1002;
}
.menu-toggle .icon{ display:block; }
.menu-toggle .icon-close{ display:none; }
.menu-toggle[aria-expanded="true"]{
  border-color: var(--brand); background: rgba(20,184,166,.14);
}
.menu-toggle[aria-expanded="true"] .icon-menu{ display:none; }
.menu-toggle[aria-expanded="true"] .icon-close{ display:block; }

/* Dropdown menu (hidden by default) */
.primary-nav{
  position: fixed;
  top: 72px;
  left: var(--gutter);
  z-index: 1001;
  width: min(280px, calc(100vw - 2 * var(--gutter)));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  padding: var(--space-4);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.primary-nav.open{ 
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Desktop: align with container/logo position */
@media (min-width: 768px) {
  .primary-nav {
    width: 260px;
    left: max(var(--gutter), calc((100vw - var(--container-width)) / 2));
  }
}

@media (min-width: 1400px) {
  .primary-nav {
    left: calc((100vw - var(--container-width)) / 2);
  }
}
.primary-nav ul{ 
  list-style:none; 
  display:flex; 
  flex-direction:column; 
  gap: var(--space-2); 
  padding:0; 
  margin:0; 
}
.primary-nav a {
  display: block;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease, color 0.15s ease;
}
.primary-nav a:hover {
  background: rgba(16, 185, 129, 0.1);
  color: var(--brand);
}

/* Backdrop overlay when menu is open */
.nav-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 40; /* sit below sticky header so nav items stay clickable */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.nav-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* Header CTA visible on larger screens */
.header-cta{ display:none; }

/* ===== Desktop breakpoint ===== */
@media (min-width: 960px){
  .header-cta{ display:block; }
}



/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hero-video{ display: none; } /* users who prefer less motion see the poster image */
}

/* Engagement section */
.engagement-inner{ display:grid; gap: var(--space-7); }
.engagement-head{ display:grid; gap: var(--space-3); }
.engage-badges{ display:flex; gap: var(--space-3); align-items:center; flex-wrap:wrap; }
.badge-strong{ border-color: var(--success); background: rgba(34,197,94,.10); color:#b8f3c7; }

.engagement-grid{
  display:grid; gap: var(--space-6);
  grid-template-columns: 1.1fr .9fr;
}
@media (max-width: 960px){
  .engagement-grid{ grid-template-columns: 1fr; }
}

/* Phone mock */
.engage-phone{ display:grid; gap: var(--space-4); }
.phone-ui{
  border:1px solid var(--border);
  border-radius: calc(var(--radius) + 6px);
  padding: var(--space-5);
  background: linear-gradient(180deg, #0e141c, #0b1016);
}
.phone-top{ font-size: var(--text-sm); color: var(--muted); display:flex; align-items:center; gap:.5ch; margin-bottom: var(--space-3); }
.dot{ width:8px; height:8px; border-radius:999px; display:inline-block; background: var(--muted); }
.dot-live{ background: var(--brand); box-shadow: 0 0 0 6px rgba(20,184,166,.12); }

.bubbles{ display:grid; gap: .6rem; }
.bubble{
  max-width: 38ch;
  padding: .6rem .8rem;
  border-radius: 14px;
  border:1px solid var(--border);
  background: #0f151d;
  color: var(--text);
  font-size: var(--text-sm);
}
.bubble.agent{ border-color: rgba(20,184,166,.35); background: rgba(20,184,166,.08); }
.bubble.agent.solid{ background: rgba(20,184,166,.16); }
.bubble.worker{ background: rgba(255,255,255,.03); }

/* Reasons */
.engage-reasons{
  display:grid; gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 640px){
  .engage-reasons{ grid-template-columns: 1fr; }
}
.reason h3{ margin-bottom:.25rem; }
.reason p{ color: var(--muted); }

/* Loop */
.engage-loop{ display:grid; gap: var(--space-4); }
.loop-steps{
  list-style:none; padding:0; margin:0;
  display:grid; gap: .65rem;
}
.loop-steps li{ display:flex; align-items:center; gap:.6rem; }
.loop-dot{ width:10px; height:10px; border-radius:999px; background: var(--brand); box-shadow: 0 0 0 6px rgba(20,184,166,.10); }

/* Sectors */
.sectors-head { display:grid; gap: var(--space-3); margin-bottom: var(--space-6); }

.sectors-grid{
  display:grid; gap: var(--space-6);
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 1024px){ .sectors-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){  .sectors-grid{ grid-template-columns: 1fr; } }

.sector-card h3{ margin-bottom:.35rem; }
.sector-lead{ color: var(--text); font-weight:600; margin-bottom:.5rem; }
.points{
  margin:0; padding-left:1.25rem; color: var(--muted);
  display:grid; gap:.45rem;
}
.sectors-link{ margin-top: var(--space-6); }

/* ===== Privacy page additions (small utilities) ===== */
.actions{ display:flex; gap: var(--space-3); flex-wrap:wrap; }

.grid-2{
  display:grid; gap: var(--space-6);
  grid-template-columns: 1.1fr .9fr;
}
@media (max-width: 960px){ .grid-2{ grid-template-columns: 1fr; } }

.grid-3{
  display:grid; gap: var(--space-6);
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 1024px){ .grid-3{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){  .grid-3{ grid-template-columns: 1fr; } }

.code-block{
  background:#0f151d; border:1px solid var(--border);
  border-radius: var(--radius); padding: var(--space-5);
  overflow:auto; font-size: var(--text-sm);
}

.copy-row{ display:flex; justify-content:flex-end; margin-top: var(--space-3); }
.copy-btn{ font-size: var(--text-sm); }

.tabset{ display:block; }
.tabset .tabs{ display:flex; gap: var(--space-3); margin-bottom: var(--space-4); }
.tabset .tabpanels .tabpanel{ display:none; }
.tabset .tabpanels .tabpanel.active{ display:block; }
.tabset .tabpanels .tabpanel[hidden]{ display:none !important; }

/* FAQ spacing nicety */
.faq details + details{ margin-top: .5rem; }

/* Mobile overflow fixes for tabbed sections */
.tabs{ flex-wrap: wrap; }                  /* allow tabs to wrap to a new line on small screens */
.tab{ white-space: nowrap; }               /* keep each label intact; wrapping happens between buttons */

/* Let grid items actually shrink on small screens */
.grid-2 > *, .engagement-grid > *{ min-width: 0; }

/* Prevent code/long tokens from pushing layout sideways */
.code-block{
  white-space: pre-wrap;                   /* wrap long lines */
  overflow-wrap: anywhere;                 /* break long tokens */
  word-break: break-word;                  /* older engines */
  max-width: 100%;
}

/* Optional: safety net against 1px rounding causing horizontal scroll */
.tabpanels{ overflow-x: hidden; }