.stage-hero {
  --hero-surface:#fff;
  --hero-ink:#2f1201;
  --badge:rgba(176,82,82,.2);
  --badge-ink:var(--hero-ink);
  --badge-border:white;
  --menu:#b05252;
  --logo-ink:#fef4eb;
  --watermark:var(--menu);
  --fade-color:#fff;
  --fade-start:0%;
  --copy-ink:white;
  --lead-ink:var(--copy-ink);
  position:relative;
  width:100%;
  overflow:hidden;
  background:var(--hero-surface);
}
.stage-hero-1 { --hero-surface:linear-gradient(to left,#ffc6c7,white 76.325%); --fade-start:15.865%; }
.stage-hero-2, .stage-hero-7 {
  --hero-surface:#fff5ec; --hero-ink:#4c2e14; --badge:#ffebd9; --menu:#4c2e14; --fade-color:#fff5ec;
}
/* In the artboard the first question starts at 619, on top of the final 9px of the fade. */
.stage-hero-2 { --copy-ink:black; --lead-ink:#4c2e14; --fade-start:15.865%; margin-bottom:-9px; }
.stage-hero-2 + #answers { position:relative; }
.stage-hero-3 { --hero-ink:#b05252; --badge:rgba(255,198,199,.3); --badge-border:transparent; --badge-ink:#2f1201; --menu:#ffc6c7; --watermark:#b05252; --logo-ink:#403933; }
.stage-hero-4 { --hero-surface:#996f5a; --hero-ink:#fff5ec; --badge:rgba(255,245,236,.5); --badge-border:transparent; --menu:#fff5ec; --logo-ink:#403933; --fade-color:#996f5a; }
.stage-hero-5, .stage-hero-8 { --hero-surface:#f8edec; --hero-ink:#b05252; --badge-ink:#403933; --fade-color:#f8edec; --copy-ink:black; }
.stage-hero-6 { --hero-surface:#f7eae1; --hero-ink:#4f4a4b; --badge:rgba(204,178,163,.5); --badge-border:transparent; --menu:#4f4a4b; --fade-color:#4f4a4b; --copy-ink:#fef4eb; }
.stage-hero-7 { --fade-color:#4c2e14; --fade-start:31.933%; }

.hero-nauryz { font:700 1em/1 'NauryzRedKeds',sans-serif; }
.hero-callysto { font:400 1em/1 'Callysto',sans-serif; }
.hero-poster { font:400 1em/1 'Postertoaster',sans-serif; }
.hero-logo, .hero-wordmark { position:absolute; font:700 20px/20px 'TT Runs',sans-serif; white-space:nowrap; letter-spacing:0; }
.hero-logo {
  top:0; left:10px; width:137px; height:39px; z-index:2; padding:10px 0 0 7px;
  color:var(--logo-ink); isolation:isolate;
}
.hero-logo::before { content:''; position:absolute; inset:0; z-index:-1; background:var(--menu); mask:url('./assets/hero/logo-plate.svg') center/100% 100% no-repeat; -webkit-mask:url('./assets/hero/logo-plate.svg') center/100% 100% no-repeat; }
.hero-menu { position:absolute; top:0; right:0; width:44px; height:40px; display:grid; place-items:center; border:0; background:transparent; padding:0; cursor:pointer; z-index:3; }
.hero-menu span { display:grid; place-items:center; width:24px; height:24px; border-radius:6px; background:var(--menu); }
.hero-menu img { width:14px; height:auto; }
.hero-badge {
  position:absolute; left:10px; top:70px; width:83px; height:36px; margin:0; padding:11px 0 0 9px;
  border:1px solid var(--badge-border); border-radius:100px; background:var(--badge); color:var(--badge-ink);
  font:700 16px/16px 'NauryzRedKeds',sans-serif; letter-spacing:-.32px; text-transform:uppercase;
}
.hero-heading, .hero-intro { position:absolute; left:10px; margin:0; }
.hero-heading {
  top:118px; width:317px; color:var(--hero-ink); font:600 20px/24px 'TT Runs',sans-serif;
  font-feature-settings:'ss04' 1; letter-spacing:-.4px; text-transform:uppercase;
}
.hero-heading strong { font-weight:700; }
.hero-heading i { font-style:italic; font-weight:600; }
.stage-hero-6 .hero-heading, .stage-hero-8 .hero-heading { font-weight:700; }
.stage-hero-8 .hero-heading { width:340px; }
.hero-intro { top:148px; width:340px; color:#403933; font:400 10px/1.14 'Montserrat',sans-serif; }
.stage-hero-8 .hero-intro { width:281px; }
.hero-wordmark {
  left:-36.65px; top:171.6px; transform-origin:left top; transform:scale(3.485,7.913);
  color:var(--watermark); opacity:.05;
}
.hero-portrait, .hero-fade { position:absolute; left:0; width:100%; }
.hero-portrait { display:block; }
.hero-fade { background:linear-gradient(to bottom,transparent var(--fade-start),var(--fade-color) 100%); pointer-events:none; }
.stage-hero-7 .hero-wordmark { z-index:1; }
.stage-hero-7 .hero-fade::after { content:''; position:absolute; top:100%; inset-inline:0; height:42px; background:var(--fade-color); }
.hero-card { position:absolute; z-index:2; }
.hero-card::before { content:''; position:absolute; inset:0; border-radius:12px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.stage-hero-6 .hero-card::before, .stage-hero-7 .hero-card::before { -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.hero-card-shape { position:relative; display:block; }
.hero-line { position:absolute; margin:0; letter-spacing:-.02em; }
.hero-lead { font:600 16px/1.2 'TT Runs',sans-serif; color:var(--lead-ink); font-feature-settings:'ss04' 1; }
.hero-heading :is(.hero-nauryz,.hero-callysto), .hero-lead :is(.hero-nauryz,.hero-callysto,.hero-poster) { line-height:1.2; }
.hero-lead .hero-callysto { font-size:13px; }
.stage-hero-1 .hero-lead { white-space:nowrap; }
.stage-hero-7 .hero-lead { font-size:14px; }
.hero-copy { font:500 12px/1.2 'Montserrat',sans-serif; color:var(--copy-ink); }
.stage-hero-2 .hero-copy, .stage-hero-5 .hero-copy, .stage-hero-6 .hero-copy { font-weight:400; }
.stage-hero-6 .hero-copy { text-align:right; }