/* Hit My Algo: design tokens + typographic defaults
   Restyled to the live-site brand (HMA-Design-Tokens.md, 2026-06-15):
   dark violet-tinted palette, Space Grotesk headings, Inter body, violet
   primary accent, neon glow effects. oklch values are authoritative; hex
   approximations are in comments. Same class names + structure as before. */

/* --- Self-hosted fonts (no runtime CDN) --- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/inter-700.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/space-grotesk-500.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/space-grotesk-700.woff2") format("woff2");
}

:root {
  /* Color (oklch exact; hex approximations in comments) */
  --color-bg:         oklch(16% 0.075 285);   /* dark purple base */
  --color-bg-2:       oklch(20% 0.085 285);   /* lifted purple, for glow + banner */
  --color-surface:    oklch(22% 0.08 285);    /* purple card */
  --color-surface-2:  oklch(27% 0.085 285);   /* purple card, raised */
  --color-border:     oklch(34% 0.075 285);   /* purple border */
  --color-border-2:   oklch(42% 0.08 285);    /* hover/emphasis */
  --color-text:       oklch(95% 0.005 285);   /* ~#f1f0f3 */
  --color-muted:      oklch(70% 0.02 285);    /* ~#a9a6b2 */

  /* Brand accents */
  --color-primary:        oklch(65% 0.18 285);   /* ~#8b7bf2 signature violet */
  --color-primary-strong: oklch(72% 0.19 285);   /* hover */
  --color-primary-ink:    oklch(14% 0.02 285);   /* dark text on violet button */
  --color-cyan:           oklch(72% 0.12 195);   /* ~#2fd4c0 circuit/divider */

  /* Glows */
  --glow-logo:
    drop-shadow(0 0 24px oklch(65% 0.18 285 / 0.55))
    drop-shadow(0 0 8px oklch(65% 0.18 285 / 0.7));
  --glow-headline: 0 0 18px oklch(65% 0.18 285 / 0.45);
  --glow-cta: 0 0 20px oklch(65% 0.18 285 / 0.5);
  --divider-glow: linear-gradient(to right, transparent, oklch(0.72 0.12 195 / 0.3), transparent);

  /* Typography */
  --font-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Space Grotesk", var(--font-fallback);
  --font-body: "Inter", var(--font-fallback);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-100: 0.875rem;   /* small */
  --fs-200: 1.0625rem;  /* body */
  --fs-300: 1.3rem;     /* lead */
  --fs-400: 1.55rem;    /* h3 */
  --fs-500: 2.05rem;    /* h2 */
  --fs-600: 2.9rem;     /* h1 */

  --lh-tight: 1.15;
  --lh-body:  1.7;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;

  /* Layout */
  --measure: 72ch;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.25);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  margin: 0;
  overflow-x: clip;  /* contain the full-bleed hero; clip keeps sticky header working */
  background:
    radial-gradient(1100px 560px at 50% -8%, var(--color-bg-2), transparent 70%),
    var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-200);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--space-6) var(--space-4);
}

h1, h2, h3 {
  font-family: var(--font-head);
  line-height: var(--lh-tight);
  font-weight: 700;
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}

h1 {
  font-size: var(--fs-600);
  letter-spacing: -0.03em;
  text-shadow: var(--glow-headline);
}
h2 {
  font-size: var(--fs-500);
  margin-top: var(--space-5);
  letter-spacing: -0.02em;
  color: var(--color-primary);            /* same violet as the hero accent */
  text-shadow: var(--glow-headline);
}
h3 { font-size: var(--fs-400); margin-top: var(--space-4); letter-spacing: -0.012em; }

p { margin: 0 0 var(--space-3); max-width: var(--measure); }

a {
  color: var(--color-primary);
  text-decoration: none;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--color-primary-strong); text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 3px;
}

ul, ol { padding-left: var(--space-4); }
li { margin-bottom: var(--space-2); }
li::marker { color: var(--color-primary); }

code, pre { font-family: var(--font-mono); font-size: 0.95em; }
code {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.1em 0.4em;
}

hr {
  border: 0;
  height: 1px;
  background: var(--divider-glow);
  margin: var(--space-5) 0;
}

.muted { color: var(--color-muted); }
.lead  { font-size: var(--fs-300); color: var(--color-text); line-height: 1.55; }

/* Secondary CTA (e.g. "book a call" under the primary Apply button) */
.secondary-cta { color: var(--color-muted); font-size: var(--fs-100); margin-top: var(--space-3); }
.secondary-cta a { font-weight: 600; }
.hero .secondary-cta { margin-top: var(--space-4); }

/* --- Tables --- */
table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin: var(--space-4) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-size: var(--fs-100);
}
th, td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
th {
  background: var(--color-surface-2);
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--color-text);
}
tbody tr:nth-child(even) td { background: oklch(27% 0.085 285 / 0.4); }
tbody tr:last-child td { border-bottom: 0; }

/* --- Site header + nav --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--color-border);
  background: oklch(16% 0.075 285 / 0.8);
  backdrop-filter: saturate(140%) blur(10px);
}
.site-header > .wrap {
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Brand wordmark -> neon logo (text kept in DOM for a11y + SEO) */
.brand {
  display: inline-block;
  width: 88px;
  height: 36px;
  background: url("/images/hma-neon-logo.png") left center / contain no-repeat;
  filter: var(--glow-logo);
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }

.site-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
}
.site-nav li { margin: 0; }
.site-nav li::marker { content: none; }
.site-nav a {
  font-family: var(--font-body);
  color: var(--color-muted);
  font-size: var(--fs-100);
  font-weight: 600;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--color-text); text-decoration: none; }
.site-nav a[aria-current="page"] {
  color: var(--color-text);
  border-bottom-color: var(--color-primary);
}

/* --- Sections --- */
main section { margin-top: var(--space-6); }
main section > h2 { margin-top: 0; }

/* --- Homepage hero (full-bleed, centered) --- */
.hero {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-top: calc(-1 * var(--space-6));  /* sit flush beneath the header */
  margin-bottom: var(--space-6);
  overflow: hidden;
  padding: clamp(3rem, 8vw, 6rem) var(--space-4) clamp(3.5rem, 9vw, 7rem);
  text-align: center;
  background:
    radial-gradient(62% 70% at 50% 34%, oklch(65% 0.18 285 / 0.22), transparent 70%),
    linear-gradient(180deg, oklch(16% 0.05 285) 0%, var(--color-bg) 78%);
}
/* Faint cyan circuit-line accents bleeding from the left + right edges */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 140px;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='420'%20fill='none'%20stroke='%232fd4c0'%20stroke-width='1.4'%3E%3Cpath%20d='M24%200V420M24%2070H88M24%20180H66M24%20300H96M24%20380H58'/%3E%3Ccircle%20cx='88'%20cy='70'%20r='4'/%3E%3Ccircle%20cx='66'%20cy='180'%20r='4'/%3E%3Ccircle%20cx='96'%20cy='300'%20r='4'/%3E%3Ccircle%20cx='58'%20cy='380'%20r='4'/%3E%3C/svg%3E");
  background-repeat: repeat-y;
  background-size: 140px auto;
}
.hero::before { left: 0; }
.hero::after { right: 0; transform: scaleX(-1); }

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--measure);
  margin-inline: auto;
}
.hero-logo {
  display: block;
  margin: 0 auto var(--space-5);
  width: min(440px, 78vw);
  height: auto;
  filter:
    drop-shadow(0 0 60px oklch(65% 0.18 285 / 0.6))
    drop-shadow(0 0 18px oklch(65% 0.18 285 / 0.75));
}
.hero h1 {
  font-size: clamp(2.2rem, 5.5vw, 3.4rem);
  margin: 0 0 var(--space-4);
}
.hero-accent {
  display: block;
  color: var(--color-primary);
  text-shadow: var(--glow-headline);
}
.hero .lead {
  max-width: 60ch;
  margin-inline: auto;
  color: var(--color-text);
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.2s ease, border-color 0.15s ease, transform 0.05s ease;
}
.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-ink);
  box-shadow: var(--glow-cta);
}
.btn-primary:hover {
  background: var(--color-primary-strong);
  color: var(--color-primary-ink);
  box-shadow: 0 0 30px oklch(65% 0.18 285 / 0.65);
  text-decoration: none;
}
.btn-primary:active { transform: translateY(1px); }
.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-2);
}
.btn-ghost:hover {
  border-color: var(--color-primary);
  color: var(--color-text);
  text-decoration: none;
}

/* --- Callouts --- */
.note {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow);
}

/* --- FAQ --- */
.faq h3 { margin-top: var(--space-4); font-size: var(--fs-400); }

/* --- Form --- */
form.apply-form {
  display: grid;
  gap: var(--space-3);
  max-width: var(--measure);
  margin-top: var(--space-4);
}
form.apply-form label {
  display: grid;
  gap: var(--space-1);
  font-weight: 600;
}
form.apply-form input,
form.apply-form textarea {
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-2);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}
form.apply-form input:focus,
form.apply-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px oklch(65% 0.18 285 / 0.25);
}
form.apply-form textarea { min-height: 7rem; resize: vertical; }

/* CTA button: filled violet, dark text, glow on hover */
form.apply-form button {
  justify-self: start;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-primary-ink);
  background: var(--color-primary);
  border: 0;
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-5);
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.2s ease, transform 0.05s ease;
}
form.apply-form button:hover {
  background: var(--color-primary-strong);
  box-shadow: var(--glow-cta);
}
form.apply-form button:active { transform: translateY(1px); }
.hp { position: absolute; left: -9999px; }  /* honeypot, off-screen */

/* --- Insights articles --- */
article { max-width: var(--measure); }
.breadcrumb { font-size: var(--fs-100); color: var(--color-muted); margin-bottom: var(--space-2); }
.byline { color: var(--color-muted); font-size: var(--fs-100); margin-top: 0; }
.answer {
  font-family: var(--font-body);
  font-size: var(--fs-300);
  line-height: 1.5;
  color: var(--color-text);
  border-left: 3px solid var(--color-primary);
  background: linear-gradient(90deg, oklch(65% 0.18 285 / 0.1), transparent 82%);
  padding: var(--space-3) var(--space-4);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: var(--space-4) 0 var(--space-5);
}

/* Section divider glow above each article section heading */
article h2 {
  padding-top: var(--space-4);
  border-top: 1px solid transparent;
  border-image: var(--divider-glow) 1;
}
article h2#related, article h2#apply { border-image: none; border-top: 0; }

.toc {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0 var(--space-5);
  box-shadow: var(--shadow);
}
.toc-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  margin: 0 0 var(--space-2);
}
.toc ul { margin: 0; padding-left: var(--space-4); }
.toc li { margin-bottom: var(--space-1); }

/* Related + CTA cards */
.related, .cta {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-4) var(--space-3);
  box-shadow: var(--shadow);
}
.related h2, .cta h2 { font-size: var(--fs-400); margin-top: 0; }
.related ul { padding-left: var(--space-4); margin-bottom: 0; }
.cta {
  background:
    radial-gradient(120% 140% at 0% 0%, oklch(65% 0.18 285 / 0.12), transparent 55%),
    var(--color-surface);
  border-color: var(--color-border-2);
}

/* --- Selected work (home) --- */
.work-grid {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}
.work-card {
  margin: 0;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow);
  transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.1s ease;
}
.work-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--glow-cta);
  transform: translateY(-2px);
}
.work-card h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-400);
  color: var(--color-primary);   /* subtle violet accent */
}
.work-card p { margin: 0; color: var(--color-text); max-width: none; }

/* --- Handshake Framework pillars (home) --- */
.framework-intro { max-width: var(--measure); }
.pillars {
  list-style: none;
  counter-reset: pillar;
  padding: 0;
  margin: var(--space-5) 0 var(--space-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}
.pillar {
  counter-increment: pillar;
  margin: 0;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);   /* the connecting "track" */
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow);
  transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.1s ease;
}
.pillar:hover {
  border-color: var(--color-primary);
  box-shadow: var(--glow-cta);
  transform: translateY(-2px);
}
.pillar::before {
  content: counter(pillar);
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 3rem;
  line-height: 1;
  color: var(--color-primary);
  text-shadow: var(--glow-headline);
  margin-bottom: var(--space-2);
}
.pillar h3 { margin: 0 0 var(--space-1); font-size: var(--fs-400); color: var(--color-text); }
.pillar p { margin: 0; color: var(--color-muted); max-width: none; }
.framework-close { margin-top: var(--space-4); }

/* --- Insights hub --- */
.article-list {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0;
  display: grid;
  gap: var(--space-4);
}
.article-card {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin: 0;
  box-shadow: var(--shadow);
  transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.1s ease;
}
.article-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--glow-cta);
  transform: translateY(-2px);
}
.article-card h2 {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-400);
  border-image: none;
  border-top: 0;
  padding-top: 0;
}
.article-card h2 a { color: var(--color-text); }
.article-card h2 a:hover { color: var(--color-primary); }
.article-meta {
  color: var(--color-muted);
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-2);
}

/* --- Brand trust banner + infinite marquee (home, below hero) --- */
.brand-banner {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-bottom: var(--space-6);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-primary);
  border-bottom: 1px solid var(--color-primary);
  background: var(--color-primary);  /* bold bright-violet stripe, same as .btn-primary */
  text-align: center;
}
.brand-banner h2 { font-size: var(--fs-400); margin: 0 0 var(--space-1); color: var(--color-primary-ink); text-shadow: none; }  /* dark ink for contrast on the bright violet band */
.brand-banner > p {
  color: var(--color-muted);
  max-width: var(--measure);
  margin: 0 auto var(--space-4);
  padding: 0 var(--space-4);
}
.marquee {
  overflow: hidden;
  /* edge fade so logos dissolve into the background at both sides */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-inner {
  display: flex;
  width: max-content;
  animation: brand-marquee 40s linear infinite;
}
.marquee:hover .marquee-inner { animation-play-state: paused; }
.marquee-track {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding-right: var(--space-6);  /* keeps the gap consistent across the loop seam */
  margin: 0;
  list-style: none;
}
.marquee-track li { margin: 0; display: flex; align-items: center; }
.marquee-track img {
  height: 44px;           /* fixed-height slot; width follows, vertically centered */
  width: auto;
  object-fit: contain;
  display: block;
  opacity: 1;             /* full white on the violet band */
}
/* Per-logo optical balancing: bump the denser/squarer marks until they read evenly */
.marquee-track img[src*="dry-guyz"]            { height: 90px; }
.marquee-track img[src*="jfc"]                 { height: 84px; }
.marquee-track img[src*="the-collective-flow"] { height: 54px; }
@keyframes brand-marquee { to { transform: translateX(-50%); } }  /* -50% = one full set */

/* --- Footer --- */
.site-footer {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-6);
  color: var(--color-muted);
  background: var(--color-bg-2);
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 1px;
  background: var(--divider-glow);
}
.site-footer > .wrap {
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--space-5) var(--space-4);
  display: grid;
  gap: var(--space-3);
}
.site-footer a { color: var(--color-muted); }
.site-footer a:hover { color: var(--color-text); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.site-footer li { margin: 0; }
.site-footer li::marker { content: none; }
.tagline { color: var(--color-muted); font-size: var(--fs-100); }

/* --- Responsive --- */

/* Tablet */
@media (max-width: 900px) {
  :root { --fs-600: 2.4rem; --fs-500: 1.85rem; }
  main { padding: var(--space-5) var(--space-4); }
  main section { margin-top: var(--space-5); }
  .hero { padding: clamp(2.5rem, 6vw, 4rem) var(--space-4); }
  /* shrink the edge circuit lines so they don't crowd the column */
  .hero::before, .hero::after { width: 84px; opacity: 0.22; }
  .site-nav ul { gap: var(--space-2) var(--space-3); }
}

/* Phone (~390px and up) */
@media (max-width: 640px) {
  :root {
    --fs-600: 2rem;
    --fs-500: 1.6rem;
    --fs-400: 1.3rem;
    --fs-300: 1.15rem;
  }
  main { padding: var(--space-5) var(--space-3); }
  main section { margin-top: var(--space-5); }
  html { scroll-padding-top: 7.5rem; }  /* clears the taller wrapped header */

  /* Header: brand stays on row 1; nav drops to its own full-width row + wraps */
  .site-header > .wrap { padding: var(--space-3); gap: var(--space-2); }
  .site-nav { width: 100%; }
  .site-nav ul { justify-content: flex-start; gap: var(--space-2) var(--space-3); }

  /* Hero: scale logo + headline down, tighten vertical spacing, drop circuit lines */
  .hero {
    padding: var(--space-5) var(--space-3) var(--space-6);
    margin-bottom: var(--space-5);
  }
  .hero::before, .hero::after { display: none; }
  .hero-logo { width: min(280px, 72vw); margin-bottom: var(--space-4); }
  .hero h1 { font-size: clamp(1.8rem, 8vw, 2.3rem); }
  .hero .lead { font-size: 1.05rem; }
  .hero-cta { flex-direction: column; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
  .hero-cta .btn { width: 100%; max-width: 320px; text-align: center; }

  /* Comparison tables: scroll horizontally instead of breaking the layout */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    border-radius: 0;
  }
  th, td { padding: var(--space-2); }

  /* Comfortable padding on cards + callouts */
  .toc, .note, .related, .cta, .article-card, .work-card, .pillar, .answer { padding: var(--space-3); }
  .site-footer > .wrap { padding: var(--space-4) var(--space-3); }
}

/* Small phones (~360px) */
@media (max-width: 400px) {
  :root { --fs-600: 1.8rem; }
  .hero-logo { width: min(240px, 70vw); }
  .hero h1 { font-size: clamp(1.6rem, 8.5vw, 2rem); }
  .site-nav ul { gap: var(--space-1) var(--space-2); }
  .site-nav a { font-size: 0.82rem; }
}

/* Brand marquee on phones */
@media (max-width: 640px) {
  .brand-banner { padding: var(--space-4) 0; }       /* tighter band on mobile */
  .brand-banner h2 { padding: 0 var(--space-3); }
  .marquee-track { gap: var(--space-5); padding-right: var(--space-5); }
  .marquee-track img { height: 34px; }
  .marquee-track img[src*="dry-guyz"]            { height: 70px; }
  .marquee-track img[src*="jfc"]                 { height: 66px; }
  .marquee-track img[src*="the-collective-flow"] { height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  /* Marquee falls back to a static, centered, wrapped row */
  .marquee { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .marquee-inner { animation: none; width: 100%; }
  .marquee-track[aria-hidden="true"] { display: none; }
  .marquee-track {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4) var(--space-5);
    padding-right: 0;
  }
}