:root {
  color-scheme: dark;
  --page-bg: #020b11;
  --page-bg-deep: #01070c;
  --ink: #f7ead7;
  --ink-soft: #e7d7c0;
  --muted: #c9bba7;
  --gold: #e0a645;
  --gold-bright: #ffd57a;
  --gold-deep: #9a5d17;
  /* The one colour a run of body text turns to say "this is the point". The
     Storyworld band carries its own copy of this value: it is a standalone
     component with its own palette and cannot read the shell's tokens when it
     is opened in its own harness. Change both together. */
  --gold-text: #f2bd5f;
  --line: rgba(224, 166, 69, 0.48);
  --hero-max-width: 1448px;
  /* Sized off the viewport, not a fixed height: the mark, the book, the
     headline, the paragraph and the buttons all have to clear the fold on a
     laptop. */
  --hero-height: max(100svh, 1120px);
  --hero-gutter: 7.7%;
  --brand-big: clamp(70px, 7vw, 112px);
  --mark-size: clamp(25px, 2.1vw, 33px);
  --hero-stage-height: clamp(360px, 37vw, 500px);
  --serif: Georgia, "Times New Roman", Times, serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--page-bg);
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 80% 7%, rgba(169, 86, 21, 0.08), transparent 28rem),
    linear-gradient(180deg, var(--page-bg) 0%, var(--page-bg-deep) 100%);
  font-family: var(--sans);
  overflow-x: hidden;
}

button,
a {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

.landing-page {
  min-height: 100vh;
  background: var(--page-bg);
}

.hero-shell {
  position: relative;
  width: 100%;
  min-height: var(--hero-height);
  overflow: clip;
  isolation: isolate;
  background: #020b11;
}

.hero-shell__background {
  position: absolute;
  inset: 0;
  z-index: -5;
  background-image: url("../assets/hero-city.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  transform: scale(1.012);
}

.hero-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(1, 9, 14, 0.98) 0%,
      rgba(1, 9, 14, 0.96) 24%,
      rgba(1, 9, 14, 0.84) 39%,
      rgba(1, 9, 14, 0.35) 61%,
      rgba(1, 9, 14, 0.10) 84%,
      rgba(1, 9, 14, 0.26) 100%),
    linear-gradient(180deg,
      rgba(0, 4, 8, 0.08) 0%,
      rgba(0, 4, 8, 0.04) 58%,
      rgba(0, 6, 10, 0.38) 82%,
      rgba(0, 7, 11, 0.88) 100%);
}

/* The hero reads top to bottom: wordmark, wide copy, then the phone-to-book
   story in its own row. The art no longer competes with the copy for width. */
.hero-shell__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--mark-size) auto auto minmax(360px, 1fr);
  row-gap: clamp(18px, 2.1vw, 30px);
  width: min(100%, var(--hero-max-width));
  min-height: var(--hero-height);
  margin: 0 auto;
  padding: clamp(18px, 2.2vw, 34px) var(--hero-gutter) clamp(28px, 3vw, 48px);
}

.hero-shell__lantern {
  position: absolute;
  left: max(0px, calc((100vw - var(--hero-max-width)) / 2));
  bottom: 0;
  z-index: 1;
  width: clamp(66px, 7.2vw, 105px);
  height: auto;
  opacity: 0.94;
  pointer-events: none;
  filter: drop-shadow(0 0 18px rgba(229, 151, 42, 0.15));
}

.hero-copy {
  grid-column: 1;
  grid-row: 3;
  align-self: start;
  z-index: 5;
  width: min(100%, 1100px);
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  display: flex;
  align-items: baseline;
  height: calc(clamp(56px, 4.7vw, 68px) + env(safe-area-inset-top));
  padding: max(10px, env(safe-area-inset-top)) max(var(--hero-gutter), calc((100vw - var(--hero-max-width)) / 2 + var(--hero-gutter)));
  z-index: 99;
  pointer-events: none;
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(2, 13, 21, 0.97), rgba(2, 13, 21, 0.91));
  border-bottom: 1px solid rgba(255, 196, 88, 0.14);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.site-header__mark {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  font-family: var(--serif);
  font-size: var(--mark-size);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.055em;
  will-change: transform;
  filter:
    drop-shadow(0 0 7px rgba(255, 191, 73, 0.26))
    drop-shadow(0 1px 0 rgba(61, 27, 4, 0.8));
}

.site-header__mark span {
  background: linear-gradient(180deg, #fff0bd 0%, #f7bf52 34%, #c97517 71%, #8a3f08 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* The flight itself. The mark lives in the header in the DOM and starts life
   transformed down onto .brand-anchor, so releasing the transform IS the
   animation and both ends stay correct at any width. */
/* The mark is drawn at its LARGE size and scaled DOWN into the header. Scaling
   type up with a transform rasterises it at the small size and the opening
   wordmark comes out soft, which is the one thing it must not be. Out of flow
   so the header keeps its height underneath it. */
.site-header__mark.is-opening,
.site-header__mark.is-scroll-linked {
  position: fixed;
  inset: 0 auto auto 0;
  font-size: var(--brand-big);
  transform-origin: left top;
}

.site-header__mark.is-flying {
  transition: transform 980ms cubic-bezier(0.26, 0.82, 0.2, 1);
}

/* Once the opening flight lands, keep the wordmark in the page's title rail.
   Its measured left edge preserves the grid alignment while the tighter top
   inset lets it read as chrome instead of another piece of hero copy. */
.site-header__mark.is-docked {
  position: fixed;
  left: var(--mark-dock-left);
  top: max(10px, env(safe-area-inset-top));
  z-index: 100;
}

.site-header__mark.is-scroll-linked {
  z-index: 100;
  pointer-events: auto;
}

/* Holds the room the big wordmark occupies, then hands it to the caption and
   gives most of it back so the book grows into the space. font-size carries
   --brand-big so the script can read it as a resolved pixel value. */
.brand-anchor {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: center;
  min-height: 1.15em;
  width: min(100%, 920px);
  padding-right: 0;
  font-size: var(--brand-big);
  transition: min-height 760ms cubic-bezier(0.2, 0.84, 0.18, 1);
}

.brand-anchor.is-settled {
  min-height: 0.52em;
}

@media (min-width: 861px) and (max-height: 850px) {
  .hero-shell__inner {
    row-gap: 14px;
    padding-top: 16px;
  }

  .hero-divider {
    margin-top: 24px;
  }

  .hero-kicker {
    margin-top: 20px;
  }

  .hero-body {
    margin-top: 14px;
    line-height: 1.48;
  }

  .hero-actions {
    margin-top: 20px;
  }
}

.hero-copy h1 {
  display: grid;
  gap: 0.05em;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(42px, 4.25vw, 66px);
  font-weight: 400;
  line-height: 0.99;
  letter-spacing: -0.045em;
  color: #f6e9d5;
  text-wrap: balance;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.44);
}

.hero-copy h1 span {
  display: block;
}

.hero-copy h1 em {
  font-style: normal;
  color: transparent;
  background: linear-gradient(180deg, #ffcd68, #cf741d);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 12px rgba(218, 132, 34, 0.13));
}

.hero-divider {
  display: flex;
  align-items: center;
  width: min(100%, 530px);
  margin: clamp(31px, 3vw, 43px) 0 0;
}

.hero-divider__star {
  position: relative;
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  margin-right: 2px;
  background:
    linear-gradient(90deg, transparent 46%, #ffe4a1 48%, #ffe4a1 52%, transparent 54%),
    linear-gradient(0deg, transparent 46%, #ffe4a1 48%, #ffe4a1 52%, transparent 54%);
  filter: drop-shadow(0 0 7px #ffb43c);
  transform: rotate(45deg);
}

.hero-divider__star::before,
.hero-divider__star::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #fff4c9;
  box-shadow: 0 0 12px #efa83d;
}

.hero-divider__star::after {
  inset: -6px;
  background: radial-gradient(circle, rgba(255, 190, 73, 0.42), transparent 66%);
  box-shadow: none;
}

.hero-divider__line {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, rgba(245, 177, 65, 0.78), rgba(245, 177, 65, 0.13), transparent);
}

.hero-kicker {
  margin: clamp(26px, 2.3vw, 34px) 0 0;
  font-family: var(--serif);
  font-size: clamp(21px, 1.95vw, 29px);
  line-height: 1.2;
  color: var(--gold-text);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.38);
}

.hero-kicker span {
  color: var(--ink);
}

.hero-body {
  max-width: 940px;
  margin: clamp(18px, 1.8vw, 25px) 0 0;
  font-family: var(--sans);
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.57;
  color: var(--ink-soft);
  letter-spacing: -0.012em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.36);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(24px, 2.4vw, 32px);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  min-width: 192px;
  height: 57px;
  padding: 0 27px 1px 31px;
  border: 1px solid rgba(232, 167, 65, 0.65);
  border-radius: 15px;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
}

.button:focus-visible {
  outline: 2px solid #ffd275;
  outline-offset: 4px;
}

.button--primary {
  position: relative;
  isolation: isolate;
  color: #2c1808;
  background:
    linear-gradient(180deg, #ffe2a0 0%, #eeb65e 37%, #bd711d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.66),
    0 10px 28px rgba(0, 0, 0, 0.25),
    0 0 18px rgba(227, 147, 35, 0.11);
}

.button--primary::after {
  content: "";
  position: absolute;
  left: -7%;
  right: -7%;
  top: calc(100% + 8px);
  height: 30px;
  z-index: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(255, 207, 112, .34) 0 18%, rgba(220, 139, 32, .2) 40%, transparent 72%),
    linear-gradient(90deg, transparent 8%, rgba(255, 190, 74, .24) 28%, rgba(255, 222, 151, .38) 50%, rgba(255, 190, 74, .24) 72%, transparent 92%);
  border-top: 1px solid rgba(255, 216, 136, .28);
  transform: perspective(110px) rotateX(67deg) scaleX(.92);
  transform-origin: center top;
  opacity: .8;
  filter: blur(1.1px) drop-shadow(0 0 8px rgba(222, 141, 34, .38));
  pointer-events: none;
}

.button--primary > * {
  position: relative;
  z-index: 1;
}

.method-flow-map {
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 7;
  width: 100%;
  overflow: visible;
  pointer-events: none;
}

.method-flow-map__guide {
  fill: none;
  stroke: transparent;
}

.method-flow-map__drop {
  fill: #ffd77a;
  filter: drop-shadow(0 0 5px rgba(255, 184, 61, .9));
}

.button--primary:hover,
.button--primary:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    0 13px 32px rgba(0, 0, 0, 0.29),
    0 0 23px rgba(227, 147, 35, 0.2);
}

.button--secondary {
  color: #f1c66f;
  background: rgba(2, 13, 20, 0.68);
  box-shadow:
    inset 0 0 0 1px rgba(255, 220, 150, 0.04),
    0 10px 26px rgba(0, 0, 0, 0.17);
}

.button--secondary:hover,
.button--secondary:focus-visible {
  background: rgba(13, 25, 30, 0.88);
}

.button__arrow {
  margin-top: -1px;
  font-family: var(--sans);
  font-size: 34px;
  font-weight: 250;
  line-height: 0.7;
}

.component-slot {
  position: relative;
}

.component-slot--hero {
  grid-column: 1;
  grid-row: 4;
  z-index: 3;
  /* A definite height: the component sizes the phone and book off its stage
     height, so an auto-height slot collapses the animation to nothing. */
  width: 100%;
  height: var(--hero-stage-height);
  min-height: 360px;
  overflow: visible;
  contain: layout style;
  scroll-margin-top: 0;
}

/* This is the entrance to the Method: the divider arrives first, followed
   immediately by the phone-to-book animation that begins the methodology. */
.component-slot--hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 24px;
  z-index: 8;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224, 166, 69, .38) 18%, rgba(224, 166, 69, .38) 82%, transparent);
  opacity: .82;
  pointer-events: none;
}

/* The slot here is short and wide, so the book is height-limited rather than
   width-limited. --book-h and --book-mini-scale are a documented pair: their
   product has to stay at --phone-h * .435 or the book stops filling the phone
   screen on the way out. */
.component-slot--hero .stage {
  --phone-h: 76%;
  --book-h: calc(var(--phone-h) * .78);
  --book-mini-scale: .558;
  width: 74%;
}

.component-slot--hero > * {
  position: relative;
  width: 100%;
  height: 100%;
}

/* The animation owns the left field; this copy owns the right. Neither one's
   visual center is allowed to pull the other out of place. */
.hero-outro {
  grid-column: 1;
  grid-row: 4;
  z-index: 6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: start;
  justify-self: end;
  width: min(100%, 340px);
  height: var(--hero-stage-height);
}

.hero-outro__lead {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(21px, 1.65vw, 27px);
  font-weight: 520;
  line-height: 1.22;
  letter-spacing: -.025em;
  color: var(--ink);
  text-wrap: balance;
}

.hero-outro__lead span {
  color: var(--gold-text);
}

.hero-outro__body {
  margin: clamp(10px, 0.9vw, 14px) 0 0;
  font-family: var(--sans);
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.5;
  color: var(--ink-soft);
}

.storyworld-mount {
  position: relative;
  z-index: 6;
  width: 100%;
  background: var(--page-bg);
  scroll-margin-top: 64px;
}

.component-slot--storyworld:not(:empty) {
  width: min(100%, var(--hero-max-width));
  margin: 0 auto;
  padding: 0 7px clamp(48px, 5vw, 84px);
}

/* A plain section on the page's own background, for the bands that are written
   as HTML rather than mounted as components. The heading follows the hero and
   the Storyworld band: the line is the page's ink and the phrase it is really
   making is gold. */
.page-section {
  position: relative;
  z-index: 6;
  width: min(100%, var(--hero-max-width));
  margin: 0 auto;
  padding: clamp(40px, 5vw, 88px) var(--hero-gutter) clamp(48px, 5vw, 84px);
  background: var(--page-bg);
}

.page-section__title {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(26px, 2.6vw, 44px);
  font-weight: 520;
  letter-spacing: -.025em;
  line-height: 1.06;
  color: var(--ink);
}

.page-section__title span {
  color: var(--gold-text);
}

.benefits-section {
  padding-top: clamp(58px, 6vw, 92px);
  padding-bottom: clamp(72px, 7vw, 112px);
}

.benefits-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--hero-gutter);
  right: var(--hero-gutter);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224, 166, 69, .38) 16%, rgba(224, 166, 69, .38) 84%, transparent);
}

.benefits-section__title {
  max-width: 1080px;
  font-size: clamp(42px, 4.4vw, 68px);
  line-height: 1.02;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.benefits-section__intro {
  max-width: 1080px;
  margin: clamp(20px, 2vw, 29px) 0 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(23px, 2.05vw, 31px);
  font-weight: 520;
  line-height: 1.18;
  letter-spacing: -.025em;
  text-wrap: balance;
}

/* One sentence, two beats: the claim, then the concession that carries the
   joke. Each line breaks on its own, while only the technology phrase turns
   gold. */
.benefits-section__intro-line {
  display: block;
}

.benefits-section__intro-line + .benefits-section__intro-line {
  margin-top: .24em;
}

.benefits-section__intro-line span {
  color: var(--gold-text);
}

.benefits-section__content {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(40px, 6vw, 92px);
  max-width: 1120px;
  margin: clamp(32px, 3.2vw, 48px) 0 0;
}

.benefits-section__values,
.benefits-section__features {
  margin: 0;
  padding: 0;
  list-style: none;
}

.benefits-section__values {
  display: grid;
  gap: clamp(14px, 1.25vw, 18px);
}

.benefits-section__values li {
  display: grid;
  grid-template-columns: clamp(42px, 3.7vw, 50px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(13px, 1.3vw, 18px);
  min-height: clamp(46px, 4vw, 54px);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(18px, 1.55vw, 22px);
  font-weight: 540;
  line-height: 1.3;
  letter-spacing: -.018em;
}

.benefits-section__value-icon {
  display: grid;
  place-items: center;
  width: clamp(42px, 3.7vw, 50px);
  aspect-ratio: 1;
  border: 1px solid rgba(235, 178, 82, .34);
  border-radius: 14px;
  color: var(--gold-bright);
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 217, 145, .13), transparent 52%),
    rgba(224, 166, 69, .055);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 201, .08),
    0 0 18px rgba(224, 166, 69, .06);
}

.benefits-section__value-icon svg {
  width: 54%;
  height: 54%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(224, 166, 69, .24));
}

.benefits-section__feature-group {
  padding-left: clamp(28px, 3.6vw, 54px);
  border-left: 1px solid rgba(224, 166, 69, .18);
}

.benefits-section__features {
  display: grid;
  gap: clamp(11px, 1vw, 15px);
}

.benefits-section__features li {
  display: grid;
  grid-template-columns: 1.35em minmax(0, 1fr);
  align-items: start;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.45;
  letter-spacing: -.012em;
}

.benefits-section__features li::before {
  content: "✓";
  padding-top: .04em;
  color: var(--gold-bright);
  font-size: .92em;
  font-weight: 720;
  line-height: 1.45;
  text-shadow: 0 0 12px rgba(224, 166, 69, .36);
}

.anchor-target {
  height: 0;
  overflow: hidden;
}

/* Optional integration visualization: append ?slots=1 to the URL. */
html[data-show-slots="true"] .component-slot {
  outline: 1px dashed rgba(255, 195, 87, 0.72);
  outline-offset: -1px;
  background: rgba(255, 181, 56, 0.025);
}

html[data-show-slots="true"] .component-slot::before {
  content: attr(data-link-slot);
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 9999;
  padding: 6px 9px;
  border: 1px solid rgba(255, 190, 75, 0.42);
  border-radius: 999px;
  color: #ffd88e;
  background: rgba(1, 9, 14, 0.88);
  font: 700 10px/1 var(--sans);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  pointer-events: none;
}

.reference-overlay {
  position: fixed;
  inset: 0 auto auto 50%;
  z-index: 99999;
  width: min(100vw, 1448px);
  height: auto;
  transform: translateX(-50%);
  opacity: var(--reference-opacity, 0.5);
  pointer-events: none;
}

/* The book grows with the viewport but the stage does not, so below this the
   two would meet: the copy takes its own row under the animation instead. */
@media (max-width: 1120px) {
  .component-slot--hero .stage {
    --phone-h: 82%;
    width: 100%;
  }

  .hero-outro {
    grid-row: 5;
    justify-self: start;
    width: min(100%, 620px);
    height: auto;
  }
}

@media (max-width: 1120px) {
  .hero-copy h1 {
    font-size: clamp(40px, 5.3vw, 60px);
  }

  .hero-kicker {
    font-size: clamp(20px, 2.25vw, 25px);
  }

  .hero-body {
    max-width: 760px;
    font-size: clamp(16px, 1.7vw, 19px);
  }
}

/* Below this the two columns stop being worth it: everything stacks, the mark
   stays put rather than flying, and the art gets its own band. */
@media (max-width: 860px) {
  :root {
    --hero-height: auto;
    --brand-big: clamp(58px, 15vw, 76px);
  }

  .hero-shell {
    min-height: 100svh;
    overflow: hidden;
  }

  .hero-shell__background {
    background-position: 63% top;
    transform: scale(1.03);
  }

  .hero-shell::before {
    background:
      linear-gradient(180deg,
        rgba(1, 9, 14, 0.91) 0%,
        rgba(1, 9, 14, 0.92) 48%,
        rgba(1, 9, 14, 0.72) 72%,
        rgba(1, 9, 14, 0.92) 100%),
      linear-gradient(90deg, rgba(1, 9, 14, 0.86), rgba(1, 9, 14, 0.25));
  }

  .hero-shell__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    row-gap: 22px;
    min-height: 100svh;
    padding: max(30px, env(safe-area-inset-top)) 22px 42px;
  }

  .site-header,
  .brand-anchor,
  .hero-copy,
  .component-slot--hero,
  .hero-outro {
    grid-column: 1;
    grid-row: auto;
  }

  .hero-shell__lantern {
    display: none;
  }

  .hero-copy {
    align-self: start;
    width: calc(100vw - 44px);
    min-width: 0;
    max-width: calc(100vw - 44px);
  }

  .hero-copy > * {
    max-width: 100%;
  }

  .hero-kicker,
  .hero-body {
    overflow-wrap: break-word;
  }

  :root {
    --mark-size: clamp(34px, 7vw, 46px);
  }

  .site-header__mark.is-flying {
    transition:
      font-size 600ms cubic-bezier(0.26, 0.82, 0.2, 1),
      transform 600ms cubic-bezier(0.26, 0.82, 0.2, 1);
  }

  .hero-copy h1 {
    width: calc(100vw - 44px);
    max-width: calc(100vw - 44px);
    font-size: clamp(40px, 11.8vw, 61px);
    line-height: 1.01;
  }

  .hero-divider {
    width: calc(100vw - 44px);
    max-width: calc(100vw - 44px);
    margin-top: 29px;
  }

  .hero-kicker {
    width: calc(100vw - 44px);
    max-width: calc(100vw - 44px);
    font-size: clamp(20px, 5.8vw, 27px);
  }

  .hero-body {
    width: calc(100vw - 44px);
    max-width: calc(100vw - 44px);
    font-size: clamp(16px, 4.4vw, 20px);
  }

  .hero-actions {
    display: grid;
    grid-template-columns: minmax(0, 220px);
  }

  .button {
    width: 100%;
    min-width: 0;
    height: 54px;
    font-size: 20px;
  }

  .component-slot--hero {
    width: calc(100% + 44px);
    min-height: min(78vw, 590px);
    height: min(78vw, 590px);
    margin: 4px -22px -12px;
  }

  .component-slot--hero {
    grid-row: 4;
  }

  .component-slot--hero:empty {
    min-height: 0;
    height: 0;
    margin-top: 0;
    margin-bottom: 0;
  }

  html[data-show-slots="true"] .component-slot--hero:empty {
    min-height: min(78vw, 590px);
    height: min(78vw, 590px);
    margin-top: 4px;
    margin-bottom: -12px;
  }

  .benefits-section {
    padding-left: 22px;
    padding-right: 22px;
  }

  .benefits-section::before {
    left: 22px;
    right: 22px;
  }

  .benefits-section__content {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  .benefits-section__feature-group {
    padding-top: 30px;
    padding-left: 0;
    border-top: 1px solid rgba(224, 166, 69, .18);
    border-left: 0;
  }
}

@media (max-width: 480px) {
  .hero-shell__inner {
    padding-left: 18px;
    padding-right: 18px;
  }

  .hero-copy {
    width: calc(100vw - 36px);
    max-width: calc(100vw - 36px);
  }

  .hero-copy h1,
  .hero-divider,
  .hero-kicker,
  .hero-body {
    width: calc(100vw - 36px);
    max-width: calc(100vw - 36px);
  }

  .hero-copy h1 {
    font-size: clamp(37px, 11.3vw, 52px);
  }

  .hero-actions {
    display: grid;
    grid-template-columns: minmax(0, 220px);
    gap: 10px;
  }

  .button {
    min-width: 0;
    width: 100%;
    padding: 0 16px;
    gap: 13px;
    font-size: 18px;
  }

  .component-slot--hero {
    width: calc(100% + 36px);
    margin-left: -18px;
    margin-right: -18px;
  }

  .benefits-section {
    padding-left: 18px;
    padding-right: 18px;
  }

  .benefits-section::before {
    left: 18px;
    right: 18px;
  }

}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}