:root {
  --ink:#11100e;
  --paper-soft:#faf7f0;
  --blue:#0a3f7d;
  --blue-deep:#082d5a;
  --brass:#c79b52;
  --serif:Georgia,"Times New Roman",Times,serif;
  --sans:Arial,Helvetica,sans-serif;
}

/* Was: body { min-width:1181px; overflow-x:auto; } — a review-canvas hack that
   forced the body wider than any phone (the root cause of the mobile scaling /
   clipping). Removed so the body is naturally responsive. */

.hero {
  background:
    linear-gradient(90deg,rgba(15,12,9,.52) 0%,rgba(17,14,11,.45) 29%,rgba(20,17,13,.25) 50%,rgba(24,20,16,.05) 72%,rgba(24,20,16,.01) 100%),
    url("../images/v21/erin-v2-1-amendment-1-hero-corrected.png") center center/cover no-repeat;
}

.hero::before {
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  content:"";
  background:
    radial-gradient(ellipse 48% 48% at 20% 29%,rgba(10,8,6,.34) 0%,rgba(10,8,6,.25) 38%,rgba(10,8,6,.08) 68%,transparent 100%),
    linear-gradient(180deg,rgba(10,8,6,.08) 0%,transparent 57%);
}

.hero-content { width:min(600px,46vw); }
.meta-teaser { max-width:max-content; margin-top:28px; padding-block:4px; }
.hero-since { margin-top:42px; }

.hero-mack-card {
  position:absolute;
  z-index:3;
  right:clamp(10px,1.25vw,22px);
  bottom:clamp(28px,3.5vw,50px);
  /* Desktop-only hero decoration. Hidden by default; shown at >=1181px by
     erin-v21-repeat-nav.css. Must NOT display on mobile (it overflowed the
     viewport). The approved mobile hero does not include this card. */
  display:none;
  grid-template-columns:minmax(0,1fr) 142px;
  width:min(390px,29vw);
  min-height:252px;
  overflow:hidden;
  color:#171614;
  background:#fffaf0;
  border:1px solid rgba(255,255,255,.88);
  border-top:5px solid var(--brass);
  box-shadow:0 22px 56px rgba(14,11,8,.38);
  text-shadow:none;
}

.hero-mack-card-copy {
  position:relative;
  z-index:2;
  align-self:center;
  padding:25px 8px 24px 25px;
}

.hero-mack-eyebrow {
  display:block;
  max-width:190px;
  color:#674815;
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.105em;
  line-height:1.45;
  text-transform:uppercase;
}

.hero-mack-title {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:11px;
}

.hero-mack-title strong {
  font:700 2.3rem/1 var(--serif);
  letter-spacing:-.025em;
  white-space:nowrap;
}

.hero-mack-title span {
  padding:7px 10px;
  color:#fff;
  background:var(--blue);
  border-radius:999px;
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.08em;
  line-height:1;
  text-transform:uppercase;
}

.hero-mack-subtitle {
  max-width:190px;
  margin:14px 0 0;
  color:#80591e;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.075em;
  line-height:1.45;
  text-transform:uppercase;
}

.hero-mack-chat {
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:17px 0 0;
  padding:8px 10px;
  color:#fff;
  background:var(--blue);
  font-size:.7rem;
  font-weight:800;
  line-height:1.25;
  text-transform:uppercase;
  text-decoration:none;
  transition:background-color 150ms ease,transform 150ms ease;
}

.hero-mack-chat:hover,.hero-mack-chat:focus-visible {
  background:var(--blue-deep);
  outline:3px solid #d8b36f;
  outline-offset:3px;
  transform:translateY(-1px);
}

.hero-mack-chat span {
  display:inline-grid;
  place-items:center;
  width:22px;
  height:17px;
  color:var(--blue);
  background:#fff;
  border-radius:7px;
  font-size:.62rem;
  letter-spacing:-.08em;
}

.hero-mack-figure {
  position:relative;
  align-self:stretch;
  min-width:0;
}

.hero-mack-figure img {
  position:absolute;
  right:-12px;
  bottom:0;
  width:225px;
  max-width:none;
  height:auto;
}

.hero-mack-voice {
  position:absolute;
  z-index:4;
  top:14px;
  right:8px;
  width:112px;
  padding:10px;
  color:#30271c;
  background:#fffdf7;
  border:1.5px solid rgba(48,39,28,.54);
  border-radius:46% 50% 44% 52%;
  box-shadow:0 5px 14px rgba(33,26,19,.12);
  font:700 .72rem/1.28 "Segoe Print","Bradley Hand",cursive;
  text-align:center;
  transform:rotate(1.5deg);
}

.hero-mack-voice::after {
  position:absolute;
  right:22px;
  bottom:-10px;
  width:16px;
  height:15px;
  background:#fffdf7;
  border-right:1.5px solid rgba(48,39,28,.54);
  border-bottom:1.5px solid rgba(48,39,28,.54);
  content:"";
  transform:skewY(-38deg) rotate(16deg);
}

@media (min-width:1500px) {
  .hero-mack-card { width:405px; }
}

/* REMOVED: a review-only override that forced body { min-width:1181px; zoom:.72 }
   on screens below 1180px. That was a Codex preview-canvas hack and was the real
   cause of the mobile "whole page scaled down / clipped" problem — it forced the
   body wider than any phone. Responsive behaviour is handled by
   erin-v21-amendment-1.css (@media 780px/430px) and erin-v21-repeat-nav.css. */