@font-face {
  font-family: "Onest";
  src: url("../fonts/onest/Onest-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ivory: #f3ede6;
  --ivory-soft: rgb(243 237 230 / 0.86);
  --ivory-line: rgb(243 237 230 / 0.7);
  --crimson: #460808;
  --crimson-deep: #260808;
  --crimson-mid: #71130c;
  --ink-red: #4a0a09;
  --seam: #3f0706;
  --card-rim: #ff825a;
  --glow: rgb(175 38 22 / 0.62);

  --container: 1200px;
  --gutter: clamp(20px, 8.333vw, 120px);
  /* vertical scale: 1px on a 900px-tall window, smaller on 13–14" laptops */
  --k: clamp(0.72px, calc(100svh / 900), 1px);

  --font: "Onest", system-ui, sans-serif;
}

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

html {
  color-scheme: dark;
  scrollbar-color: var(--crimson-mid) var(--crimson-deep);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--seam);
  color: var(--ivory);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--ivory);
}

::selection { background: var(--ivory); color: var(--ink-red); }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--ivory);
  outline-offset: 4px;
  border-radius: 4px;
}

img { display: block; max-width: 100%; }

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Buttons & links ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn--solid {
  height: 58px;
  padding-inline: 50px;
  background: var(--ivory);
  color: var(--ink-red);
  font-size: 18px;
  letter-spacing: 0.01em;
}
.btn--solid:hover { background: #fff; }
.btn--solid:active { transform: translateY(1px); background: #e9e0d6; }

.btn--ghost {
  height: 45px;
  padding-inline: 32px;
  border: 1.5px solid var(--ivory);
  font-size: 17px;
  font-weight: 500;
}
.btn--ghost:hover { background: var(--ivory); color: var(--ink-red); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ivory-line);
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.25s ease, gap 0.25s ease;
}
.link-arrow:hover { border-color: var(--ivory); gap: 12px; }
.link-arrow__icon { flex: none; }

/* ---------- Header ---------- */

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
}

.site-header__inner {
  display: flex;
  align-items: center;
  height: 102px;
  padding-top: 5px;
}

.wordmark {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  gap: 40px;
  margin-left: auto;
  margin-right: 34px;
  font-size: 18px;
}
.site-nav a { text-decoration: none; }
.site-nav a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  height: clamp(640px, 100svh, 1080px);
  overflow: hidden;
}

.hero__scene,
.hero__scene img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__scene { z-index: -1; }
.hero__scene img {
  object-fit: cover;
  object-position: 55% 50%;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 200px), transparent);
          mask-image: linear-gradient(180deg, #000 calc(100% - 200px), transparent);
}

.hero__content {
  position: relative;
  padding-top: calc(189 * var(--k));
}

.hero__kicker {
  margin: 0 0 calc(28 * var(--k));
  font-size: 19px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.hero__title {
  margin: 0;
  font-weight: 300;
  font-size: calc(71 * var(--k));
  line-height: 1;
  letter-spacing: -0.012em;
}
.hero__line { display: block; }
.hero__line--accent {
  margin: calc(4 * var(--k)) 0 calc(-14 * var(--k));
  font-size: calc(164 * var(--k));
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.035em;
}

/* Brush swoosh: the left half of a wide ellipse's top border.
   It starts as a fine point at the lower left, arches upward and levels off,
   growing in weight, then fades out to the right. */
.hero__swoosh {
  position: relative;
  display: block;
  width: 420px;
  height: 34px;
  margin-top: calc(22 * var(--k));
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 62%, transparent 100%);
}
.hero__swoosh::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 900px;
  height: 68px;
  border-top: 4px solid var(--ivory);
  border-radius: 50%;
}

.hero__manifesto {
  max-width: 520px;
  margin: calc(28 * var(--k)) 0 0;
  font-size: max(18px, calc(25.5 * var(--k)));
  line-height: 1.3;
  color: var(--ivory-soft);
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: calc(32 * var(--k));
}

.hero__move {
  position: absolute;
  top: calc(250 * var(--k));
  right: 64px;
  display: grid;
  justify-items: center;
  gap: 10px;
  width: 56px;
}
.hero__move-label {
  padding-bottom: 12px;
  border-bottom: 1.5px solid var(--ivory-line);
  font-size: 15px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  width: 100%;
  text-align: center;
}
.hero__move-number {
  font-size: 52px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* ---------- Statuses ---------- */

.statuses { container-type: inline-size; }
.statuses__stage {
  --u: calc(100cqw / 1440);
  position: relative;
  container-type: inline-size;
  isolation: isolate;
}

.statuses__scene,
.statuses__scene img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.statuses__scene {
  z-index: -1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 200px, #000 calc(100% - 140px), transparent);
          mask-image: linear-gradient(180deg, transparent, #000 200px, #000 calc(100% - 140px), transparent);
}
.statuses__scene img {
  object-fit: cover;
}
@media (min-width: 900px) {
  /* Full plate = 1440x900 units. On a shorter window the stage is cut to the window height:
     15% of the cut comes off the top, the rest off the floor. Labels move with the plate. */
  .statuses__stage {
    --stage-h: clamp(50cqw, 100svh, 62.5cqw);
    --shift: calc((62.5cqw - var(--stage-h)) * -0.15);
    height: var(--stage-h);
  }
  .statuses__scene img {
    inset: auto;
    left: calc(-39.375 * var(--u));
    top: var(--shift);
    width: calc(1518.75 * var(--u));
    height: calc(900 * var(--u));
    max-width: none;
    object-fit: fill;
    transform: scale(1.12);
    transform-origin: calc(1479.375 * var(--u)) calc(630 * var(--u));
  }
}

.statuses__intro {
  position: absolute;
  inset: calc(22 * var(--u)) 0 auto;
}

.statuses__kicker {
  margin: 0 0 22px;
  font-size: 18px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.statuses__title {
  max-width: 600px;
  margin: 0;
  font-size: 56px;
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.statuses__title strong { font-weight: 800; }

.statuses__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each status sits on its piece: label above a hairline rule,
   a leader runs from the rule's end down to a dot on the piece. */
.status {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u) + var(--shift, 0px));
  width: max-content;
  min-width: calc(var(--w) * var(--u));
  display: grid;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--ivory);
  transform: translateY(-100%);
}
/* Leader: a solid 2px line from the rule's end to the piece, rotated by the real angle. */
.status::before {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--from);
  width: calc(hypot(var(--dx), var(--dy)) * var(--u));
  height: 2px;
  margin-top: -1px;
  background: var(--ivory);
  transform-origin: 0 50%;
  rotate: atan2(var(--dy), var(--dx));
}
/* Dot on the piece: solid ivory with a dark ring so it reads on ivory pieces. */
.status::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--from);
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: var(--ivory);
  box-shadow: 0 0 0 1.5px var(--crimson-deep), 0 2px 8px rgb(20 0 0 / 0.5);
  translate: calc(var(--dx) * var(--u)) calc(var(--dy) * var(--u));
}

.status__name {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.status__text {
  font-size: 17px;
  line-height: 1.35;
  color: var(--ivory-soft);
  white-space: nowrap;
}
.status--advanced .status__text { white-space: normal; max-width: 11.5em; }

/* The novice leader starts at the rule's right end, so that label grows leftwards. */
.status--novice { left: auto; right: calc(100cqw - (var(--x) + var(--w)) * var(--u)); }

.status--novice    { --x: 207;  --y: 455; --w: 230; --from: 100%; --dx: 33; --dy: 56; }
.status--advanced  { --x: 633;  --y: 358; --w: 190; --from: 0%;   --dx: 36; --dy: 59; }
.status--expert    { --x: 829;  --y: 240; --w: 230; --from: 0%;   --dx: 49; --dy: 71; }
.status--respected { --x: 1121; --y: 118; --w: 236; --from: 0%;   --dx: 45; --dy: 55; }

/* ---------- Shared section heading ---------- */

.section-kicker {
  margin: 0 0 calc(22 * var(--k));
  font-size: 18px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.section-title {
  max-width: 640px;
  margin: 0;
  font-size: max(34px, calc(56 * var(--k)));
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.012em;
}
.section-title strong { font-weight: 800; }

/* Every scene plate fades into the seam colour at both ends,
   so screens flow into each other without an edge. */
.inside__scene,
.benefits__scene,
.price__scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 180px, #000 calc(100% - 180px), transparent);
          mask-image: linear-gradient(180deg, transparent, #000 180px, #000 calc(100% - 180px), transparent);
}
.inside__scene img,
.benefits__scene img,
.price__scene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Inside ---------- */

.inside {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding: calc(56 * var(--k)) 0 calc(64 * var(--k));
}
.inside .section-title { max-width: 780px; }
.inside__scene img { object-position: 100% 62%; }
/* the lit floor is bright: it needs a longer dissolve into the next screen */
.inside > .inside__scene {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 180px, #000 calc(100% - 420px), transparent);
          mask-image: linear-gradient(180deg, transparent, #000 180px, #000 calc(100% - 420px), transparent);
}
.price > .price__scene {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 320px, #000 calc(100% - 160px), transparent);
          mask-image: linear-gradient(180deg, transparent, #000 320px, #000 calc(100% - 160px), transparent);
}

.inside__list {
  max-width: 760px;
  margin: calc(40 * var(--k)) 0 0;
  padding: 0;
  list-style: none;
}
.inside__row {
  display: grid;
  grid-template-columns: 124px 1fr;
  align-items: center;
  padding: calc(20 * var(--k)) 0;
  border-bottom: 1px solid var(--ivory-line);
}
.inside__row > :last-child {
  padding-left: 32px;
  border-left: 1px solid var(--ivory-line);
}
.inside__tag {
  font-size: 44px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
}
.inside__name {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
}
.inside__text {
  margin: 0;
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ivory-soft);
}
.inside__row--soon { border-bottom: 0; }
.inside__row--soon .inside__name { margin: 0; font-weight: 500; }
.inside__pill {
  justify-self: start;
  padding: 7px 18px;
  border: 1px solid var(--ivory);
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ---------- Benefits: text sits inside the glowing cards of the plate ---------- */

.benefits__stage {
  --u: calc(100cqw / 1440);
  position: relative;
  isolation: isolate;
  container-type: inline-size;
}
.benefits__intro { position: relative; z-index: 1; }
.benefits {
  position: relative;
  isolation: isolate;
  padding-top: calc(40 * var(--k));
}
/* warm light over the heading so the board rises out of a lit room, not a dark band;
   faded at the top so it joins the screen above without an edge */
.benefits::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 900px;
  z-index: -2;
  background: radial-gradient(ellipse 80% 55% at 35% 40%, var(--glow), transparent 75%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%);
          mask-image: linear-gradient(180deg, transparent, #000 45%);
  pointer-events: none;
}
.benefits .section-title { max-width: 760px; }
@media (min-width: 900px) {
  /* The stage ends just under the cards: the plate's calm top band sits under the heading,
     the floor below the cards dissolves at once. Plate = 1440x960 units, its top 60 cut off. */
  .benefits__stage {
    --overlap: calc(120 * var(--k));
    height: calc(790 * var(--u));
    margin-top: calc(-1 * var(--overlap));
  }
  .benefits__stage .benefits__scene {
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 calc(150 * var(--u)), #000 calc(680 * var(--u)), transparent);
            mask-image: linear-gradient(180deg, transparent, #000 calc(150 * var(--u)), #000 calc(680 * var(--u)), transparent);
  }
  .benefits__scene img {
    position: absolute;
    top: calc(-60 * var(--u));
    left: 0;
    height: calc(960 * var(--u));
    object-fit: fill;
  }
}
.benefits__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.benefit {
  position: absolute;
  left: calc((var(--x) + 188) * var(--u));
  top: calc((var(--y) - 60 + 44) * var(--u));
  width: calc((var(--w) - 190) * var(--u));
  display: flex;
  flex-direction: column;
}
.benefit__piece { display: none; }
.benefit__num {
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.1em;
  opacity: 0.85;
}
.benefit__name {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}
.benefit__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ivory-soft);
}
/* Card boxes measured on the plate, in 1440-wide stage units */
.benefit--1 { --x: 85;  --y: 211; --w: 381; --h: 228; }
.benefit--2 { --x: 85;  --y: 498; --w: 381; --h: 232; }
.benefit--3 { --x: 530; --y: 211; --w: 377; --h: 228; }
.benefit--4 { --x: 530; --y: 498; --w: 377; --h: 232; }
.benefit--5 { --x: 971; --y: 211; --w: 383; --h: 228; }
.benefit--6 { --x: 971; --y: 498; --w: 383; --h: 232; }

/* the links stand at the right of the heading's last line */
.benefits__links {
  position: absolute;
  top: calc(var(--overlap) - 36px);
  right: max(var(--gutter), (100% - var(--container)) / 2);
  display: flex;
  gap: 40px;
  margin: 0;
}

/* ---------- Price ---------- */

.price {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding-top: calc(120 * var(--k));
}
.price__scene img { object-position: 60% 70%; }
.price__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: calc(100 * var(--k));
  text-align: center;
}
.price__title { text-align: center; }
.price__amount {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin: calc(36 * var(--k)) 0 0;
}
.price__sum {
  display: flex;
  align-items: center;
  gap: 36px;
  font-size: calc(112 * var(--k));
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.price__sum::before,
.price__sum::after {
  content: "";
  width: 110px;
  border-top: 1px solid var(--ivory-line);
}
.price__period { font-size: 24px; font-weight: 300; }
.price__includes {
  margin: calc(26 * var(--k)) 0 calc(36 * var(--k));
  font-size: 18px;
  color: var(--ivory-soft);
}
.price__includes .inc { display: inline-block; white-space: nowrap; }
.price__includes .inc + .inc::before { content: "·"; margin: 0 12px; }

/* ---------- Motion: statuses appear in order, pawn to king ---------- */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .status {
      animation: status-in linear both;
      animation-timeline: view();
    }
    .status--novice    { animation-range: entry 10% cover 26%; }
    .status--advanced  { animation-range: entry 25% cover 30%; }
    .status--expert    { animation-range: entry 40% cover 34%; }
    .status--respected { animation-range: entry 55% cover 38%; }
  }
}

@keyframes status-in {
  from { opacity: 0; clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; clip-path: inset(-50% -60% -200% -60%); }
}

/* ---------- Narrower desktops ---------- */

@media (max-width: 1180px) {
  .hero__title { font-size: calc(60 * var(--k)); }
  .hero__line--accent { font-size: calc(136 * var(--k)); }
  .hero__manifesto { font-size: max(18px, calc(22 * var(--k))); max-width: 440px; }
  .statuses__title { font-size: 46px; max-width: 520px; }
  .section-title { font-size: max(32px, calc(46 * var(--k))); }
  .benefits__stage { --overlap: calc(90 * var(--k)); }
  .benefits__links { gap: 28px; }
  .benefits__links .link-arrow { font-size: 16px; }
  .benefit__name { font-size: 17px; }
  .benefit__text { font-size: 14px; }
  .benefit__num { font-size: 13px; margin-bottom: 6px; }
  .status__name { font-size: 17px; }
  .status__text { font-size: 15px; }
}

/* ---------- Mobile & tablet portrait ---------- */

@media (max-width: 899px) {
  :root {
    --soft-x: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  }
}

@media (max-width: 420px) {
  /* Too narrow for wordmark + link + pill in one row: keep the wordmark and the action. */
  .site-nav { display: none; }
  .site-header__cta { margin-left: auto; }
}

@media (max-width: 899px) {
  .site-nav { margin-left: auto; margin-right: 18px; gap: 0; font-size: 15px; }
  .site-nav__secondary { display: none; }
  .site-header__inner { height: 76px; padding-top: 0; }
  .wordmark { font-size: 16px; letter-spacing: 0.32em; }
  .site-header__cta { height: 40px; padding-inline: 20px; font-size: 15px; }

  .hero { height: auto; }
  /* phone crop: the king and his shadow, whole, with room on every side */
  .hero__scene { top: 64px; bottom: auto; height: auto; aspect-ratio: 2661 / 1679; }
  .hero__scene img {
    -webkit-mask-image: var(--soft-x), linear-gradient(180deg, transparent, #000 22%, #000 62%, transparent);
            mask-image: var(--soft-x), linear-gradient(180deg, transparent, #000 22%, #000 62%, transparent);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
  }
  .hero__content { padding-top: calc(64px + 100vw * 1679 / 2661 - 12px); padding-bottom: 48px; }
  .hero__kicker { font-size: 13px; margin-bottom: 10px; }
  .hero__title { font-size: clamp(32px, 9.4vw, 52px); }
  .hero__line--accent { font-size: clamp(76px, 22vw, 140px); margin: 2px 0 -8px; }
  .hero__swoosh { width: 68%; height: 22px; margin-top: 12px; }
  .hero__manifesto { font-size: 18px; max-width: 30ch; margin-top: 12px; }
  .hero__actions { flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 20px; }
  .btn--solid { width: 100%; max-width: 360px; height: 56px; padding-inline: 24px; }
  .hero__move { display: none; }

  .statuses__stage { padding-bottom: 40px; }
  .statuses__scene {
    position: relative;
    display: block;
    height: auto;
    aspect-ratio: 3 / 2;
  }
  .statuses__intro { position: static; padding-top: 24px; }
  .statuses__kicker { font-size: 13px; margin-bottom: 14px; }
  .statuses__title { font-size: clamp(30px, 8.6vw, 44px); }
  .statuses__list {
    display: grid;
    gap: 0;
    margin: 20px var(--gutter) 0;
  }
  .status {
    position: static;
    width: auto;
    transform: none;
    padding: 18px 0;
    border-bottom: 1px solid rgb(243 237 230 / 0.25);
    animation: none;
  }
  .status::before, .status::after { display: none; }
  .status__name { font-size: 17px; }
  .status__text { font-size: 16px; }
}

@media (max-width: 899px) {
  /* On phones the image leads, the text follows on the dark ground. */
  .statuses__scene {
    -webkit-mask-image: var(--soft-x), linear-gradient(180deg, transparent, #000 20%, #000 72%, transparent);
            mask-image: var(--soft-x), linear-gradient(180deg, transparent, #000 20%, #000 72%, transparent);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
  }
}

/* ---------- Screens 3–5 on phones ---------- */

@media (max-width: 899px) {
  .section-kicker { font-size: 13px; margin-bottom: 14px; }
  .section-title { font-size: clamp(30px, 8.6vw, 44px); }

  .inside { min-height: 0; padding: 0 0 40px; }
  .inside > .inside__scene {
    position: relative; display: block; aspect-ratio: 1935 / 1720;
    -webkit-mask-image: var(--soft-x), linear-gradient(180deg, transparent, #000 20%, #000 72%, transparent);
            mask-image: var(--soft-x), linear-gradient(180deg, transparent, #000 20%, #000 72%, transparent);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
  }
  .inside__content { margin-top: -24px; }
  .inside__row { grid-template-columns: 72px 1fr; padding: 18px 0; }
  .inside__row > :last-child { padding-left: 18px; }
  .inside__tag { font-size: 28px; }
  .inside__name { font-size: 17px; }
  .inside__text { font-size: 15px; }
  .inside__row--soon { grid-template-columns: 1fr; gap: 12px; }
  .inside__row--soon > :last-child { padding-left: 0; border-left: 0; }

  .benefits { padding-top: 40px; }
  .benefits__stage { aspect-ratio: auto; margin-top: 0; padding: 24px 0 56px; }
  /* on phones the board plate would crop pieces and arrows into the cards: the cards carry their own piece instead */
  .benefits__stage .benefits__scene { display: none; }
  .benefits__list { display: grid; gap: 12px; margin: 28px var(--gutter) 0; }
  .benefit {
    position: static; width: auto; height: auto; padding: 14px 18px 14px 14px;
    display: grid; grid-template-columns: 76px 1fr; column-gap: 16px; align-items: center;
    /* same lit-card language as the board plate, with a real offset shadow for depth */
    border: 2px solid var(--card-rim);
    background: linear-gradient(180deg, rgb(150 30 18 / 0.7), rgb(95 14 9 / 0.7));
    box-shadow: 0 8px 14px rgb(24 3 3 / 0.55);
  }
  .benefit__piece { display: block; grid-row: 1 / span 3; width: 76px; height: 76px; border-radius: 4px; }
  .benefit__num, .benefit__name, .benefit__text { grid-column: 2; }
  .benefit__num { margin-bottom: 2px; }
  .benefit__name { font-size: 17px; margin-bottom: 4px; }
  .benefit__text { font-size: 15px; }
  .benefits__links { position: static; flex-direction: column; align-items: flex-start; gap: 18px; margin: 28px var(--gutter) 0; }

  /* on a phone the king stands above the price, whole, and the price opens on his floor */
  .price { min-height: 0; padding-top: 0; }
  .price > .price__scene {
    position: relative; display: block; aspect-ratio: 1866 / 1761;
    -webkit-mask-image: var(--soft-x), linear-gradient(180deg, transparent, #000 20%, #000 64%, transparent);
            mask-image: var(--soft-x), linear-gradient(180deg, transparent, #000 20%, #000 64%, transparent);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
  }
  .price__content { margin-top: -64px; padding-bottom: 64px; }
  .price__sum { font-size: 64px; gap: 16px; }
  .price__sum::before, .price__sum::after { width: 32px; }
  .price__period { font-size: 18px; }
  .price__includes { font-size: 15px; line-height: 1.7; display: grid; grid-template-columns: auto auto; justify-content: center; column-gap: 20px; }
  .price__includes .inc + .inc::before { content: none; }
}

/* ---------- Footer: the price room sinks into deep oxblood ---------- */

.price__note {
  max-width: 460px;
  margin: 18px 0 0;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgb(40 6 6 / 0.55);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ivory-soft);
}
.price__note a { text-underline-offset: 3px; }

.site-footer {
  position: relative;
  isolation: isolate;
  padding: 96px 0 40px;
  background:
    radial-gradient(ellipse 60% 70% at 50% 0%, rgb(120 22 14 / 0.55), transparent 70%),
    linear-gradient(180deg, var(--seam), var(--crimson-deep) 70%);
}
/* a hairline of light where the board ends */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 var(--gutter) auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ivory-line), transparent);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 48px;
}
.site-footer__tagline {
  max-width: 280px;
  margin: 18px 0 26px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ivory-soft);
}
.site-footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  font-size: 16px;
}
.site-footer__col a {
  text-decoration: none;
  color: var(--ivory-soft);
  transition: color 0.2s ease;
}
.site-footer__col a:hover { color: var(--ivory); text-decoration: underline; text-underline-offset: 5px; }
.site-footer__head {
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory);
}

.site-footer__legal {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 32px;
  margin-top: 72px;
  padding-top: 28px;
  border-top: 1px solid rgb(243 237 230 / 0.2);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ivory-soft);
}
.site-footer__requisites, .site-footer__copy { margin: 0; }
.site-footer__pay { display: flex; gap: 10px; }
.pay-badge {
  padding: 5px 12px;
  border: 1px solid var(--ivory-line);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

@media (max-width: 899px) {
  .site-footer { padding: 64px 0 32px; }
  .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__col:last-child { grid-column: 1 / -1; }
  .site-footer__legal { grid-template-columns: 1fr; gap: 16px; margin-top: 48px; }
  .price__note { font-size: 12px; }
}