:root {
  color-scheme: light;
  --red: #e41319;
  --red-deep: #ae0710;
  --yellow: #ffdf00;
  --ink: #111111;
  --paper: #fffefa;
  --muted: #454545;
  --line: 3px solid var(--ink);
  --shell: min(1180px, calc(100% - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 1.58; }
img { max-width: 100%; display: block; }
a { color: inherit; }
.shell { width: var(--shell); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; left: 12px; top: 12px; padding: 12px 18px; color: #fff; background: #111; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 4px solid #005fcc; outline-offset: 4px; }

.site-header { position: relative; z-index: 10; background: var(--paper); border-bottom: var(--line); }
.nav-wrap { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 900; font-size: 15px; letter-spacing: .02em; line-height: 1.1; }
.brand img { width: 52px; height: 52px; border: 2px solid var(--ink); }
.brand b { display: block; font-size: 18px; }
.site-nav { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 34px); }
.site-nav a { font-size: 15px; font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.site-nav a:hover { color: var(--red-deep); }
.site-nav .nav-safety { padding: 10px 16px; border: 2px solid var(--ink); background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); }
.nav-toggle { display: none; min-width: 48px; min-height: 48px; border: var(--line); background: var(--yellow); color: var(--ink); font-size: 23px; font-weight: 900; }

/* The artwork is a full-bleed layer in the scene, beneath live page text. */
.hero { position: relative; overflow: hidden; color: #fff; background: #ed071b; border-bottom: 6px solid var(--ink); isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #ed071b 0%, #ed071b 42%, transparent 59%); }
.hero::after { content: ""; position: absolute; inset: 0 48% 0 0; z-index: -1; pointer-events: none; background: radial-gradient(#760410 1.5px, transparent 1.8px) 0 0 / 11px 11px; mask-image: linear-gradient(90deg,#000,transparent 65%); opacity: .6; }
.hero-grid { min-height: clamp(410px,34vw,550px); width: min(1500px,calc(100% - 80px)); display: flex; align-items: center; padding-block: 48px 54px; }
.hero-copy { position: relative; width: 62%; z-index: 1; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; color: var(--yellow); font-size: 14px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.eyebrow-red { color: var(--red-deep); }
.issue { display: inline-grid; width: 34px; height: 34px; place-items: center; color: var(--ink); background: var(--yellow); border: 2px solid var(--ink); border-radius: 50%; letter-spacing: 0; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: Impact, "Arial Black", Arial, sans-serif; font-weight: 900; letter-spacing: -.025em; line-height: .98; }
.hero h1 { margin-bottom: 22px; font-size: clamp(52px,5.9vw,94px); font-style: italic; letter-spacing: -.035em; line-height: 1.06; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 5px 6px 0 var(--ink), 7px 8px 0 var(--ink); transform: rotate(-3deg); transform-origin: left center; }
.hero h1 span, .hero h1 em { display: block; }
.hero h1 em { color: var(--yellow); font-style: italic; white-space: nowrap; font-size: .93em; }
.hero-lede { max-width: 620px; margin-bottom: 30px; font-size: clamp(20px,2.15vw,32px); font-weight: 800; font-style: italic; line-height: 1.25; text-shadow: 1px 2px 0 #a00412; }
.hero .button { font-size: clamp(17px,1.7vw,25px); padding: 14px 26px; transform: skew(-7deg); box-shadow: 6px 7px 0 var(--ink); }
.hero .button:hover { transform: skew(-7deg) translate(2px,2px); }
.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 14px; padding: 10px 20px; border: 3px solid var(--ink); color: var(--ink); font-size: 16px; font-weight: 900; text-decoration: none; box-shadow: 4px 4px 0 var(--ink); transition: transform .14s ease, box-shadow .14s ease; }
.button:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
.button-yellow { background: var(--yellow); }
.button-light { margin-top: 12px; color: var(--ink); background: #fff; }
.hero-art { position: absolute; inset: 0 0 0 auto; width: 59%; z-index: -2; }
.hero-character { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: left top; }

.section { padding-block: clamp(74px,10vw,128px); }
.story { position: relative; display: grid; grid-template-columns: 120px 1fr 180px; align-items: center; gap: 44px; }
.story-number { align-self: start; color: #f7dcdc; font: 900 clamp(92px,13vw,160px)/.8 Impact, "Arial Black", sans-serif; -webkit-text-stroke: 2px var(--ink); }
.section-copy { max-width: 720px; }
.story .section-copy { padding: clamp(22px,4vw,40px); border: 3px solid var(--ink); background: #fff; box-shadow: 7px 7px 0 var(--yellow); }
.nav-download { padding: 9px 14px; background: #fff1a0; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.section-copy h2, .section-heading h2, .legal-hero h1 { margin-bottom: 22px; font-size: clamp(42px,5vw,64px); }
.section-copy h2 em, .section-heading h2 em, .legal-hero h1 em { color: var(--red); font-style: normal; }
.section-copy p:not(.eyebrow) { color: #333; }
.text-link { display: inline-flex; gap: 10px; margin-top: 8px; color: var(--red-deep); font-weight: 900; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.story-stamp { display: grid; justify-items: center; gap: 8px; padding: 16px 10px; border: 3px solid var(--ink); background: var(--yellow); box-shadow: 6px 6px 0 var(--ink); text-align: center; transform: rotate(5deg); }
.story-stamp img { width: 92px; height: 92px; border: 2px solid var(--ink); }
.story-stamp b { font: 900 20px/.95 Impact, "Arial Black", sans-serif; }
.story-stamp span { font-size: 12px; font-weight: 900; letter-spacing: .04em; }

.features { color: #fff; background: var(--ink); border-block: 5px solid var(--yellow); }
.section-heading { max-width: 780px; margin-bottom: 42px; }
.section-heading .eyebrow { color: var(--yellow); }
.section-heading h2 { margin-bottom: 18px; }
.section-heading h2 em { color: var(--yellow); }
.section-heading > p:last-child { max-width: 720px; margin-bottom: 0; color: #ededed; }
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.feature-card { position: relative; min-height: 320px; padding: 28px 26px 24px; color: var(--ink); border: 4px solid #fff; box-shadow: 7px 7px 0 #555; }
.card-red { background: #f6d8d8; }
.card-yellow { background: var(--yellow); }
.card-white { background: #fff; }
.card-index { position: absolute; top: 12px; right: 15px; display: grid; width: 36px; height: 36px; place-items: center; border: 2px solid var(--ink); border-radius: 50%; font: 900 19px Impact, "Arial Black", sans-serif; }
.feature-icon { display: grid; width: 62px; height: 62px; place-items: center; margin-bottom: 20px; color: var(--yellow); background: var(--red); border: 3px solid var(--ink); border-radius: 50%; font-size: 38px; font-weight: 900; line-height: 1; }
.feature-icon-dark { color: var(--yellow); background: var(--ink); }
.feature-icon-red { color: #fff; }
.feature-card h3 { margin-bottom: 12px; font-size: clamp(26px,2.4vw,32px); }
.feature-card p { margin-bottom: 18px; font-size: 17px; line-height: 1.45; }
.card-tag { display: inline-block; padding: 5px 8px; border: 2px solid var(--ink); font-size: 12px; font-weight: 900; letter-spacing: .04em; }
.feature-note { display: grid; grid-template-columns: 36px 1fr; align-items: start; gap: 14px; max-width: 850px; margin-top: 32px; padding: 18px; color: var(--ink); background: var(--yellow); border: 3px solid #fff; }
.feature-note > span { display: grid; width: 32px; height: 32px; place-items: center; border: 2px solid var(--ink); border-radius: 50%; font-weight: 900; }
.feature-note p { margin: 0; font-size: 16px; }

.ai-features { color: var(--ink); background: var(--yellow); border-bottom: 5px solid var(--ink); }
.ai-features .section-heading .eyebrow { color: var(--red-deep); }
.ai-features .section-heading h2 em { color: var(--red); }
.ai-features .section-heading > p:last-child { color: #222; }
.ai-features .feature-card { border-color: var(--ink); box-shadow: 7px 7px 0 var(--red-deep); }
.ai-features .feature-note { color: #fff; background: var(--ink); border-color: var(--ink); }
.ai-features .feature-note > span { color: var(--yellow); border-color: var(--yellow); }


.download-section { position: relative; overflow: hidden; padding-block: clamp(76px,10vw,120px); color: #fff; background: var(--red); border-block: 5px solid var(--ink); isolation: isolate; }
.download-section::before { position: absolute; z-index: -1; inset: 0; content: ""; background-image: radial-gradient(#111 1.5px, transparent 1.6px); background-size: 12px 12px; opacity: .22; }
.download-panel { position: relative; padding: clamp(32px,7vw,76px); border: 4px solid var(--ink); background: var(--red-deep); box-shadow: 10px 10px 0 var(--ink); }
.download-panel .eyebrow { color: var(--yellow); }
.download-panel h2 { max-width: 900px; margin-bottom: 20px; font-size: clamp(48px,8vw,96px); text-shadow: 4px 5px 0 var(--ink); }
.download-panel h2 em { color: var(--yellow); font-style: normal; }
.download-panel > p:not(.eyebrow):not(.download-footnote) { max-width: 620px; margin-bottom: 24px; font-size: clamp(18px,2vw,23px); font-weight: 700; }
.download-button { min-height: 60px; font-size: 20px; }
.download-footnote { margin: 18px 0 0; font-size: 14px; font-weight: 700; }
.download-burst { position: absolute; top: 18px; right: 32px; padding: 14px 18px; color: var(--ink); background: var(--yellow); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); font: 900 clamp(22px,4vw,38px)/1 Impact, "Arial Black", sans-serif; transform: rotate(9deg); }

.safety-band { color: #fff; background: var(--red-deep); border-block: 5px solid var(--ink); }
.safety-inner { display: grid; grid-template-columns: 92px 1fr; align-items: start; gap: 28px; padding-block: 52px; }
.safety-symbol { display: grid; width: 76px; height: 76px; place-items: center; color: var(--ink); background: var(--yellow); border: 4px solid var(--ink); border-radius: 50%; font: 900 56px/1 Impact, "Arial Black", sans-serif; }
.safety-inner .eyebrow { color: var(--yellow); }
.safety-inner h2 { margin-bottom: 14px; font-size: clamp(32px,4vw,48px); }
.safety-inner p:not(.eyebrow) { max-width: 900px; margin-bottom: 12px; font-size: 19px; }

.site-footer { padding-block: 38px; color: #fff; background: var(--ink); }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; }
.footer-brand { color: #fff; }
.footer-grid > p { margin: 0; text-align: right; }
.footer-grid nav { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.footer-grid nav a { color: #fff; font-size: 15px; font-weight: 800; }
.footer-grid small { justify-self: end; color: #eee; font-size: 13px; text-align: right; }

/* Legal and safety pages */
.legal-hero { padding-block: 68px 58px; color: #fff; background: var(--red); border-bottom: 5px solid var(--ink); }
.legal-hero .eyebrow { color: var(--yellow); }
.legal-hero h1 { max-width: 900px; margin-bottom: 18px; text-shadow: 3px 3px 0 var(--ink); }
.legal-hero h1 em { color: var(--yellow); }
.legal-hero p:last-child { max-width: 850px; margin-bottom: 0; font-size: 19px; font-weight: 700; }
.legal-main { display: grid; grid-template-columns: 230px minmax(0,800px); align-items: start; gap: 70px; padding-block: 60px 100px; }
.legal-index { position: sticky; top: 20px; display: grid; gap: 12px; padding: 20px; border: 3px solid var(--ink); background: var(--yellow); box-shadow: 5px 5px 0 var(--ink); }
.legal-index b { font-family: Impact, "Arial Black", sans-serif; font-size: 20px; }
.legal-index a { font-size: 15px; font-weight: 700; }
.legal-content section { margin-bottom: 48px; scroll-margin-top: 24px; }
.legal-content h2 { margin-bottom: 15px; font-size: clamp(30px,3vw,40px); }
.legal-content h3 { margin: 22px 0 8px; font-size: 24px; }
.legal-content p, .legal-content li { color: #333; }
.legal-content li { margin-block: 8px; }
.legal-content .notice { padding: 20px; border: 3px solid var(--ink); background: #fff3a6; }
.legal-content .notice b { display: block; margin-bottom: 6px; }
.legal-content .outbound { display: inline-block; margin-block: 6px; padding: 12px 16px; border: 3px solid var(--ink); background: var(--yellow); font-weight: 900; box-shadow: 4px 4px 0 var(--ink); }
.legal-content .callout { padding: 24px; color: #fff; background: var(--ink); }
.legal-content .callout p, .legal-content .callout a { color: #fff; }
.legal-content .callout h2 { color: var(--yellow); }
.safety-quick { padding: 24px; border: 4px solid var(--ink); background: var(--yellow); box-shadow: 6px 6px 0 var(--ink); }
.safety-quick p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .hero-grid { width: calc(100% - 48px); }
  .hero h1 { font-size: clamp(42px,6vw,60px); }
  .hero-copy { width: 65%; }
  .story { grid-template-columns: 80px 1fr; gap: 28px; }
  .story-stamp { grid-column: 2; justify-self: start; grid-template-columns: 72px auto; align-items: center; text-align: left; }
  .story-stamp img { width: 68px; height: 68px; grid-row: span 2; }
  .story-stamp b { font-size: 18px; }
  .story-stamp span { grid-column: 2; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 0; }
  .download-burst { top: auto; right: 18px; bottom: 20px; }
  .legal-main { grid-template-columns: 1fr; gap: 38px; }
  .legal-index { position: static; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .legal-index b { grid-column: 1/-1; }
}
@media (max-width: 680px) {
  :root { --shell: min(100% - 30px,1180px); }
  body { font-size: 17px; }
  .nav-wrap { min-height: 72px; }
  .brand { font-size: 12px; }
  .brand b { font-size: 15px; }
  .brand img { width: 44px; height: 44px; }
  .nav-toggle { display: inline-grid; place-items: center; }
  .site-nav { position: absolute; top: 72px; left: 15px; right: 15px; display: none; align-items: stretch; padding: 12px; background: #fff; border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
  .site-nav.open { display: grid; }
  .site-nav a { padding: 10px; }
  .hero-grid { width: calc(100% - 36px); min-height: 0; padding-block: 36px calc(61.4vw + 12px); }
  .hero-copy { width: 100%; }
  .hero h1 { font-size: clamp(36px,7.5vw,51px); margin-bottom: 22px; }
  .hero-lede { max-width: 400px; font-size: 21px; margin-bottom: 24px; }
  .hero .button { padding: 12px 20px; font-size: 18px; }
  .hero-art { inset: auto 0 0; width: 100%; height: 61.4vw; }
  .hero-character { object-fit: cover; object-position: center bottom; }
  .hero::before { background: linear-gradient(to bottom,#ed071b 0%,#ed071b calc(100% - 61.4vw),transparent calc(100% - 61.4vw + 35px)); }
  .hero::after { inset: 0 0 61.4vw; }
  .story { grid-template-columns: 1fr; gap: 8px; }
  .story-number { font-size: 84px; }
  .story-stamp { grid-column: 1; }
  .section { padding-block: 72px; }
  .section-copy h2, .section-heading h2, .legal-hero h1 { font-size: clamp(38px,10vw,52px); }
  .safety-inner { grid-template-columns: 1fr; gap: 20px; padding-block: 38px; }
  .safety-symbol { width: 62px; height: 62px; font-size: 45px; }
  .footer-grid { grid-template-columns: 1fr; gap: 20px; }
  .footer-grid > p, .footer-grid small { justify-self: start; text-align: left; }
  .footer-grid nav { display: grid; gap: 12px; }
  .legal-hero { padding-block: 48px 40px; }
  .legal-main { padding-block: 36px 70px; }
  .legal-index { grid-template-columns: 1fr; }
  .legal-index b { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}