/* kit.css · The kit: a cobalt wall of working specimens, each in one client's voice · owner: Lizzy East · all rights reserved */

/* Everything sits under .kit and every class starts with "kit", so the section drops
   into The Design Book beside its own styles. Font stacks name the book's embedded
   faces first (Syne, Fraunces, Space Grotesk, Source Serif 4, Archivo, Cormorant
   Garamond, Oswald); the kit's own copies below are the fallback anywhere else.

   Measured pairs (WCAG 2.1, src/contrast.py): white on cobalt 6.5, acid on cobalt 5.6,
   ink on acid 16.4, ink on white 19.1. Every client pair is measured in
   tests/effects/test_effects_kit.py; large-text-only pairs (Volt blue 3.7, Wildstem
   rose 3.2, Northlight brass 4.4) are used only at 24px and over. */

@font-face {
  font-family: "Kit Syne";
  src: url("fonts/syne.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kit Fraunces";
  src: url("fonts/fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kit Fraunces";
  src: url("fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Kit Grotesk";
  src: url("fonts/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ the wall */
.kit {
  --kit-cobalt: #2340ff;
  --kit-ink: #0f0f14;
  --kit-white: #ffffff;
  --kit-acid: #cfff3e;
  --kit-display: "Syne", "Kit Syne", "Arial Black", sans-serif;
  --kit-serif: "Fraunces", "Kit Fraunces", Georgia, serif;
  --kit-sans: "Space Grotesk", "Kit Grotesk", "Helvetica Neue", Arial, sans-serif;
  --kit-legal: "Source Serif 4", "Kit Fraunces", Georgia, serif;
  --kit-gym: "Archivo", "Kit Grotesk", "Arial Black", sans-serif;
  --kit-bloom: "Cormorant Garamond", "Kit Fraunces", Georgia, serif;
  --kit-trade: "Oswald", "Kit Grotesk", "Arial Narrow", sans-serif;
  --kit-gutter: clamp(16px, 4vw, 56px);
  --kit-max: 1440px;
  --kit-edge: max(var(--kit-gutter), calc((100% - var(--kit-max)) / 2 + var(--kit-gutter)));
  --kit-shadow: 6px;              /* the one hard-shadow weight */
  --kit-w: clamp(288px, 24vw, 344px);
  --kit-wide: clamp(340px, 34vw, 480px);
  --kit-h: clamp(456px, 33vw, 484px);
  --kit-focus: var(--kit-acid);
  position: relative;
  overflow-x: clip;
  margin: 0;
  padding: clamp(64px, 8vw, 120px) 0 clamp(56px, 7vw, 104px);
  background: var(--kit-cobalt);
  color: var(--kit-white);
  font: 400 17px/1.5 var(--kit-sans);
  font-variant-numeric: lining-nums;
  text-align: left;
  -webkit-text-size-adjust: 100%;
}

/* Reset what a host page's global rules would otherwise change in here. */
.kit, .kit *, .kit *::before, .kit *::after { box-sizing: border-box; }
.kit :where(h1, h2, h3, h4, h5, h6, p, ol, ul, li, dl, dt, dd, figure, fieldset, legend,
            details, summary, output, label, small, em, b) {
  margin: 0;
  padding: 0;
  max-width: none;
  border: 0;
}
.kit :where(h1, h2, h3, h4, h5, h6) { font: inherit; text-wrap: balance; }
.kit :where(ol, ul) { list-style: none; }
.kit :where(button) {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.kit :where(img, svg) { display: block; max-width: 100%; }
.kit [hidden] { display: none !important; }
.kit ::selection { background: var(--kit-acid); color: var(--kit-ink); }
.kit :focus { outline: none; }
.kit :focus-visible { outline: 3px solid var(--kit-focus); outline-offset: 3px; }

.kit .kit-vh, .kit-page .kit-vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ the heading */
.kit .kit-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
  align-items: end;
  gap: 26px 48px;
  max-width: var(--kit-max);
  margin: 0 auto;
  padding: 0 var(--kit-gutter);
}
.kit .kit-chapter {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 13px 7px;
  border: 2.5px solid var(--kit-ink);
  background: var(--kit-white);
  color: var(--kit-ink);
  font: 800 13px/1.1 var(--kit-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: rotate(-1.5deg);
}
.kit .kit-chapter span { color: var(--kit-cobalt); font: 700 13px/1 var(--kit-sans); letter-spacing: 0.02em; }
.kit .kit-title {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.02em 0.16em;
  font: 800 clamp(64px, 11.4vw, 184px)/0.84 var(--kit-display);
  letter-spacing: -0.05em;
  text-transform: uppercase;
  line-height: 0.84;
}
.kit .kit-title__the {
  color: var(--kit-white);
  text-shadow: var(--kit-shadow) var(--kit-shadow) 0 var(--kit-ink);
  padding-bottom: 0.06em;
}
/* "kit." is itself a sticker: acid, ink edge, the same hard shadow, a small tilt. */
.kit .kit-title__kit {
  position: relative;
  display: inline-block;
  transform: rotate(-1.5deg);
  margin-bottom: 0.04em;
}
.kit .kit-title__kit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--kit-ink);
  translate: var(--kit-shadow) var(--kit-shadow);
}
.kit .kit-title__patch {
  position: relative;
  display: block;
  padding: 0.05em 0.2em 0.13em 0.1em;
  border: 3px solid var(--kit-ink);
  background: var(--kit-acid);
  color: var(--kit-ink);
  font: italic 400 0.94em/0.84 var(--kit-serif);
  letter-spacing: -0.035em;
  text-transform: none;
}
.kit .kit-line {
  padding-bottom: 0.5em;
  max-width: 17em;
  font: 500 clamp(17px, 1.4vw, 21px)/1.4 var(--kit-sans);
  text-wrap: balance;
}

/* ------------------------------------------------------------------ the slider */
.kit .kit-slider { margin-top: clamp(30px, 3.6vw, 52px); --kit-p: 0; }
.kit .kit-rail {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--kit-edge);
  scroll-behavior: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--kit-acid) rgb(255 255 255 / 0.28);
}
.kit.is-live .kit-rail { scrollbar-width: none; }
.kit.is-live .kit-rail::-webkit-scrollbar { display: none; }
.kit .kit-rail:focus-visible { outline: 3px solid var(--kit-acid); outline-offset: -3px; }
.kit .kit-row {
  display: flex;
  gap: clamp(22px, 2.4vw, 36px);
  width: max-content;
  padding: 30px var(--kit-edge) 30px;
}
.kit .kit-slide {
  flex: 0 0 auto;
  width: var(--kit-w);
  height: var(--kit-h);
  scroll-snap-align: start;
}
.kit .kit-slide--wide { width: var(--kit-wide); }

/* A card holds the sticker and its shadow; the sticker lifts off the shadow when
   someone reaches for it. The tilt stays within 1.5 degrees. */
.kit .kit-card { position: relative; height: 100%; transform: rotate(var(--kit-tilt, 0deg)); }
.kit .kit-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--kit-ink);
  translate: var(--kit-shadow) var(--kit-shadow);
}
.kit .kit-slide:nth-child(4n + 1) { --kit-tilt: -1.2deg; }
.kit .kit-slide:nth-child(4n + 2) { --kit-tilt: 0.9deg; }
.kit .kit-slide:nth-child(4n + 3) { --kit-tilt: -0.5deg; }
.kit .kit-slide:nth-child(4n + 4) { --kit-tilt: 1.4deg; }
.kit .kit-card:focus-within { transform: none; }
.kit .kit-card:focus-within .kit-s { translate: -3px -3px; }
@media (hover: hover) {
  .kit .kit-card:hover { transform: none; }
  .kit .kit-card:hover .kit-s { translate: -3px -3px; }
}
@media (prefers-reduced-motion: no-preference) {
  .kit .kit-card { transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  .kit .kit-s { transition: translate 300ms cubic-bezier(0.2, 0.8, 0.2, 1); }
}

/* ------------------------------------------------------------------ a sticker */
.kit .kit-s {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 42px 22px 22px;
  border: 3px solid var(--kit-ink);
  background: var(--s-bg, var(--kit-white));
  color: var(--s-fg, var(--kit-ink));
  --kit-focus: var(--s-focus, var(--kit-ink));
}
/* The label: a strip of label-maker tape across the top edge. */
.kit .kit-tape {
  position: absolute;
  z-index: 5;
  top: -15px;
  left: 14px;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 11px 6px;
  border: 2.5px solid var(--kit-ink);
  background: var(--kit-white);
  color: var(--kit-ink);
  font: 800 13px/1.1 var(--kit-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(-1.5deg);
}
.kit .kit-tape__n { color: var(--kit-cobalt); font: 700 13px/1 var(--kit-sans); letter-spacing: 0.02em; }
.kit .kit-who {
  font: 700 11px/1.35 var(--kit-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--s-mut, currentColor);
}
.kit .kit-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 2px solid currentColor;
  border-radius: 99px;
  font: 700 12px/1 var(--kit-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.kit .kit-pill[aria-pressed="true"] { background: var(--s-acc); border-color: var(--s-acc); color: var(--s-bg); }
.kit .kit-pill:active { translate: 1px 1px; }

/* The six clients' own grounds, inks and accents. */
.kit [data-kit-client="va"] { --s-bg: #131020; --s-fg: #efecff; --s-mut: #a8a2cc; --s-acc: #c8f04b; --s-focus: #c8f04b; }
.kit [data-kit-client="va-acid"] { --s-bg: #c8f04b; --s-fg: #131020; --s-mut: #3d3470; --s-acc: #131020; --s-focus: #131020; }
.kit [data-kit-client="hv"] { --s-bg: #9c3b22; --s-fg: #f7efe2; --s-mut: #f1dcc8; --s-acc: #e2a33b; --s-focus: #f7efe2; }
.kit [data-kit-client="hv-cream"] { --s-bg: #f7efe2; --s-fg: #231a12; --s-mut: #6b4f3a; --s-acc: #9c3b22; --s-focus: #231a12; }
.kit [data-kit-client="hv-night"] { --s-bg: #2e2318; --s-fg: #f7efe2; --s-mut: #d9c9b1; --s-acc: #9c3b22; --s-focus: #f7efe2; }
.kit [data-kit-client="nl"] { --s-bg: #faf7f1; --s-fg: #1c2430; --s-mut: #5d6573; --s-acc: #7a5f33; --s-focus: #1c2430; }
.kit [data-kit-client="volt"] { --s-bg: #0f1013; --s-fg: #f4f5f7; --s-mut: #a3a8b4; --s-acc: #3b5bff; --s-focus: #7d93ff; }
.kit [data-kit-client="ws"] { --s-bg: #fbf7f2; --s-fg: #33302b; --s-mut: #6d4a43; --s-acc: #c4766a; --s-focus: #33302b; }
.kit [data-kit-client="tn"] { --s-bg: #16324f; --s-fg: #f2f6fa; --s-mut: #a9bccf; --s-acc: #ffc53d; --s-focus: #ffc53d; }
.kit [data-kit-client="paper"] { --s-bg: #ffffff; --s-fg: #0f0f14; --s-focus: #0f0f14; }
.kit [data-kit-client="ink"] { --s-bg: #0f0f14; --s-fg: #ffffff; --s-acc: #cfff3e; --s-focus: #cfff3e; }

/* ------------------------------------------------------------------ 01 · the one word */
.kit .kit-word__stage { display: grid; flex: 1 1 auto; min-height: 0; }
.kit .kit-word__v { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 0; }
.kit .kit-word__line { overflow-wrap: normal; hyphens: none; }
.kit .kit-word__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; min-height: 40px; }
.kit .kit-word__n { font: 700 12px/1 var(--kit-sans); letter-spacing: 0.14em; color: var(--s-mut); }
.kit [data-kit-voice="va"] .kit-word__line {
  font: 800 clamp(34px, 2.6vw, 37px)/0.96 var(--kit-display);
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.kit [data-kit-voice="va"] .kit-word__w {
  background: linear-gradient(100deg, #c8f04b 15%, #b9a8ff 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.kit [data-kit-voice="hv"] .kit-word__line { font: 300 clamp(40px, 3.4vw, 47px)/1.02 var(--kit-serif); letter-spacing: -0.025em; }
.kit [data-kit-voice="hv"] .kit-word__w { font-style: italic; font-weight: 600; color: #9c3b22; }
.kit [data-kit-voice="nl"] .kit-word__line { font: 400 clamp(40px, 3.4vw, 47px)/1.06 var(--kit-legal); letter-spacing: -0.015em; }
.kit [data-kit-voice="nl"] .kit-word__w { font-style: italic; color: #8c6f3f; }
.kit [data-kit-voice="volt"] .kit-word__line {
  font: 900 clamp(40px, 3.5vw, 50px)/0.92 var(--kit-gym);
  font-stretch: 110%;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.kit [data-kit-voice="volt"] .kit-word__w { display: block; color: #3b5bff; }
.kit [data-kit-voice="ws"] .kit-word__line { font: 400 clamp(44px, 3.8vw, 54px)/1 var(--kit-bloom); letter-spacing: -0.015em; }
.kit [data-kit-voice="ws"] .kit-word__w { font-style: italic; color: #c4766a; }
.kit [data-kit-voice="tn"] .kit-word__line {
  font: 600 clamp(48px, 4.2vw, 60px)/0.98 var(--kit-trade);
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.kit [data-kit-voice="tn"] .kit-word__w { display: block; color: #ffc53d; }
.kit .kit-word .kit-pill { color: var(--s-fg); }
.kit .kit-word .kit-pill:hover { background: var(--s-fg); color: var(--s-bg); }
@media (prefers-reduced-motion: no-preference) {
  .kit.is-live .kit-word__v:not([hidden]) { animation: kit-rise 360ms cubic-bezier(0.2, 0.8, 0.2, 1) 1 both; }
}
@keyframes kit-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ 02 · live rating */
.kit .kit-rate { justify-content: flex-end; gap: 10px; }
.kit .kit-rate .kit-who { margin-bottom: auto; }
.kit .kit-rate__n {
  margin-left: -0.05em;
  font: 600 clamp(150px, 12.4vw, 184px)/0.8 var(--kit-serif);
  letter-spacing: -0.045em;
}
.kit .kit-rate__stars { color: var(--s-acc); font-size: 28px; line-height: 1; letter-spacing: 3px; }
.kit .kit-rate__count { font: 500 18px/1.3 var(--kit-sans); }
.kit .kit-rate__count b { font-weight: 700; }
.kit .kit-rate__live {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  padding: 9px 13px;
  border-radius: 99px;
  background: #2e2318;
  color: #f7efe2;
  font: 700 11px/1 var(--kit-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.kit .kit-rate__live i { width: 8px; height: 8px; border-radius: 50%; background: #8fd18a; }

/* ------------------------------------------------------------------ photo stickers */
.kit .kit-s--photo { padding: 0; background: var(--kit-ink); }

/* 03 · before / after: a real range input over the photograph. */
.kit .kit-ba { --kit-split: 50%; }
.kit .kit-ba__frame { position: relative; flex: 1 1 auto; overflow: hidden; }
.kit .kit-ba__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 40%;
}
.kit .kit-ba__raw { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--kit-split)) 0 0); }
.kit .kit-ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--kit-split);
  width: 4px;
  margin-left: -2px;
  background: #c8f04b;
  pointer-events: none;
}
/* Without the script the split is a still picture: the line stays, the knob does not. */
.kit:not(.is-live) .kit-ba__handle::after { display: none; }
.kit .kit-ba__handle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  border: 3px solid var(--kit-ink);
  background: #c8f04b;
  color: var(--kit-ink);
  content: "\2194";
  font: 700 22px/1 var(--kit-sans);
}
.kit .kit-ba__tag {
  position: absolute;
  z-index: 2;
  bottom: 14px;
  padding: 7px 10px;
  font: 700 11px/1 var(--kit-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
}
.kit .kit-ba__tag--raw { left: 14px; background: var(--kit-ink); color: var(--kit-white); }
.kit .kit-ba__tag--graded { right: 14px; background: #c8f04b; color: #131020; }
.kit .kit-ba__range {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
  -webkit-appearance: none;
  appearance: none;
}
/* The focus ring sits above the photographs: acid inside an ink line, readable on any frame. */
.kit .kit-ba__frame::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
}
.kit .kit-ba__frame:has(.kit-ba__range:focus-visible)::after {
  box-shadow: inset 0 0 0 4px var(--kit-ink), inset 0 0 0 8px #c8f04b, inset 0 0 0 10px var(--kit-ink);
}

/* ------------------------------------------------------------------ 04 · button voices */
.kit .kit-s--bands { padding: 0; }
.kit .kit-voices { display: flex; flex: 1 1 auto; flex-direction: column; }
.kit .kit-voice {
  display: flex;
  flex: 1 1 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 14px;
  padding: 8px 20px;
  background: var(--v-bg);
  color: var(--v-who);
}
.kit .kit-voice + .kit-voice { border-top: 3px solid var(--kit-ink); }
.kit .kit-voice:first-child { padding-top: 26px; }
.kit .kit-voice__b {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  background: var(--v-btn);
  color: var(--v-ink);
  font: 600 14px/1 var(--kit-sans);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.kit .kit-voice__who { font: 700 10.5px/1.2 var(--kit-sans); letter-spacing: 0.16em; text-transform: uppercase; }
.kit .kit-voice--va { --v-bg: #131020; --v-who: #a8a2cc; --v-btn: #c8f04b; --v-ink: #101010; }
.kit .kit-voice--va .kit-voice__b { border-radius: 8px; }
.kit .kit-voice--hv { --v-bg: #f7efe2; --v-who: #6b4f3a; --v-btn: #9c3b22; --v-ink: #fff6ea; }
.kit .kit-voice--hv .kit-voice__b { border-radius: 99px; }
.kit .kit-voice--volt { --v-bg: #0f1013; --v-who: #a3a8b4; --v-btn: #3b5bff; --v-ink: #ffffff; }
.kit .kit-voice--volt .kit-voice__b { border-radius: 6px; }
.kit .kit-voice--nl { --v-bg: #faf7f1; --v-who: #5d6573; --v-btn: #1c2430; --v-ink: #faf7f1; }
.kit .kit-voice--tn { --v-bg: #16324f; --v-who: #a9bccf; --v-btn: #ffc53d; --v-ink: #1b2530; }
.kit .kit-voice--tn .kit-voice__b {
  padding-right: 26px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.kit .kit-voice--ws { --v-bg: #f3e0da; --v-who: #6d4a43; --v-btn: #5c6e50; --v-ink: #f7f4ec; }
.kit .kit-voice--ws .kit-voice__b { border-radius: 99px; }

/* ------------------------------------------------------------------ 05 · pricing */
.kit .kit-price { gap: 14px; }
.kit .kit-price__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font: 700 11px/1.3 var(--kit-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--s-mut);
}
.kit .kit-price__free {
  padding: 6px 10px;
  border: 1.5px solid #7d93ff;
  border-radius: 99px;
  color: #7d93ff;
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.kit .kit-price__toggle {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  align-self: flex-start;
  min-inline-size: 0;
  margin-top: 6px;
  padding: 4px;
  border-radius: 99px;
  background: #23252d;
}
.kit .kit-price__toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.kit .kit-price__toggle label {
  padding: 11px 18px;
  border-radius: 99px;
  color: #c9ccd4;
  font: 700 12px/1 var(--kit-sans);
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
}
.kit .kit-price__toggle input:checked + label { background: #3b5bff; color: #ffffff; }
.kit .kit-price__toggle input:focus-visible + label { outline: 3px solid #7d93ff; outline-offset: 2px; }
.kit .kit-price__plan {
  margin-top: auto;
  font: 700 12px/1 var(--kit-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #7d93ff;
}
.kit .kit-price__amt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.kit .kit-price__amt b {
  font: 900 clamp(76px, 6.2vw, 90px)/0.84 var(--kit-gym);
  font-stretch: 110%;
  letter-spacing: -0.045em;
  color: var(--s-fg);
  text-decoration: underline 8px #3b5bff;
  text-decoration-skip-ink: none;
  text-underline-offset: 8px;
}
.kit .kit-price__amt span { font: 500 15px/1.25 var(--kit-sans); color: var(--s-mut); }
.kit .kit-price__amt--y { display: none; }
.kit .kit-price:has(input[value="yearly"]:checked) .kit-price__amt--y { display: flex; }
.kit .kit-price:has(input[value="yearly"]:checked) .kit-price__amt--m { display: none; }
.kit .kit-price__list { display: grid; gap: 4px; margin-top: 8px; font: 500 15px/1.45 var(--kit-sans); }
.kit .kit-price__list li { position: relative; padding-left: 24px; }
.kit .kit-price__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.32em;
  width: 11px;
  height: 6px;
  border-left: 3px solid #7d93ff;
  border-bottom: 3px solid #7d93ff;
  transform: rotate(-45deg);
}

/* ------------------------------------------------------------------ 06 · bento */
.kit .kit-bento { padding: 34px 14px 14px; }
.kit .kit-bento__grid {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 0;
}
.kit .kit-bento__photo {
  grid-column: 1 / -1;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: none;
  border-radius: 14px;
  object-fit: cover;
  object-position: 50% 55%;
}
.kit .kit-bento__t {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
  padding: 12px 14px;
  border-radius: 14px;
}
.kit .kit-bento__t b { font: 600 46px/0.9 var(--kit-serif); letter-spacing: -0.03em; }
.kit .kit-bento__t span { margin-top: 7px; font: 700 10.5px/1.2 var(--kit-sans); letter-spacing: 0.16em; text-transform: uppercase; }
.kit .kit-bento__t--year { background: #9c3b22; color: #f7efe2; }
.kit .kit-bento__t--seats { background: #2e2318; color: #f7efe2; }
.kit .kit-bento__t--line {
  grid-column: 1 / -1;
  display: block;
  padding: 13px 16px 14px;
  border: 1.5px solid #e4d8c2;
  background: #fff9ee;
  color: #231a12;
  font: 400 19px/1.25 var(--kit-serif);
}
.kit .kit-bento__t--line em { font-style: italic; color: #9c3b22; }

/* ------------------------------------------------------------------ 07 · open now */
.kit .kit-open { gap: 16px; }
.kit .kit-open.is-open { --s-bg: #4c6b3c; --s-mut: #e3ecd9; }
.kit .kit-open__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 12px;
  border-radius: 99px;
  background: #f7efe2;
  color: #2e2318;
  font: 700 12px/1 var(--kit-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.kit .kit-open__badge i { width: 10px; height: 10px; border-radius: 50%; background: #9c3b22; }
.kit .kit-open.is-open .kit-open__badge { color: #2f4a24; }
.kit .kit-open.is-open .kit-open__badge i { background: #4c6b3c; box-shadow: 0 0 0 3px rgb(76 107 60 / 0.25); }
.kit .kit-open__big {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  font: 600 clamp(54px, 4.4vw, 62px)/0.92 var(--kit-serif);
  letter-spacing: -0.03em;
}
.kit .kit-open__big small { margin-bottom: 6px; font: italic 400 26px/1.1 var(--kit-serif); letter-spacing: 0; }
.kit .kit-open__hours {
  display: grid;
  gap: 6px;
  padding-top: 14px;
  border-top: 2px solid currentColor;
  font: 500 15px/1.3 var(--kit-sans);
}
.kit .kit-open__hours div { display: flex; justify-content: space-between; gap: 12px; color: var(--s-mut); }
.kit .kit-open__hours dt { font-weight: 700; }
.kit .kit-open__hours .is-today { color: var(--s-fg); }
.kit .kit-open__hours .is-today dt { text-decoration: underline 2px; text-underline-offset: 4px; }

/* ------------------------------------------------------------------ 08 · instant estimate */
.kit .kit-est { gap: 12px; }
.kit .kit-est__what { margin-top: 4px; font: 600 34px/1 var(--kit-trade); letter-spacing: 0.01em; text-transform: uppercase; }
.kit .kit-est__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  font: 700 12px/1.2 var(--kit-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--s-mut);
}
.kit .kit-est__row output { color: var(--s-fg); font: 600 22px/1 var(--kit-trade); letter-spacing: 0.02em; text-transform: none; }
.kit .kit-est__range {
  width: 100%;
  height: 34px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  --kit-fill: 31.25%;
}
.kit .kit-est__range::-webkit-slider-runnable-track {
  height: 8px;
  background: linear-gradient(#ffc53d, #ffc53d) 0 0 / var(--kit-fill) 100% no-repeat, #93a7bb;
}
.kit .kit-est__range::-moz-range-track { height: 8px; background: #93a7bb; }
.kit .kit-est__range::-moz-range-progress { height: 8px; background: #ffc53d; }
.kit .kit-est__range::-webkit-slider-thumb {
  width: 30px;
  height: 30px;
  margin-top: -11px;
  border: 0;
  background: #ffc53d;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
  -webkit-appearance: none;
  appearance: none;
}
.kit .kit-est__range::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 0;
  background: #ffc53d;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
}
.kit .kit-est__range:focus-visible { outline-offset: 4px; }
.kit .kit-est__price output {
  display: block;
  color: #ffc53d;
  font: 600 clamp(48px, 4vw, 56px)/0.98 var(--kit-trade);
  letter-spacing: 0;
}
.kit .kit-est__note { font: 500 14px/1.4 var(--kit-sans); color: var(--s-mut); }

/* ------------------------------------------------------------------ 09 · glass card */
.kit .kit-glass { justify-content: flex-end; }
.kit .kit-glass__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 30%;
}
.kit .kit-glass__card {
  position: relative;
  margin: 0 16px 16px;
  padding: 18px 18px 20px;
  border: 1px solid rgb(255 255 255 / 0.7);
  border-radius: 16px;
  background: rgb(251 247 242 / 0.78);
  color: #33302b;
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}
.kit .kit-glass__eyebrow { font: 700 11px/1.2 var(--kit-sans); letter-spacing: 0.18em; text-transform: uppercase; color: #3e4a35; }
.kit .kit-glass__line { margin-top: 8px; font: italic 400 31px/1.04 var(--kit-bloom); letter-spacing: -0.01em; }
.kit .kit-glass__small { margin-top: 10px; font: 500 14px/1.35 var(--kit-sans); }

/* ------------------------------------------------------------------ 10 · countdown */
.kit .kit-count { gap: 10px; }
.kit .kit-count__date {
  margin-top: 22px;
  font: 800 clamp(46px, 3.9vw, 54px)/0.9 var(--kit-display);
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.kit:not(.is-live) .kit-count__date { margin-top: auto; }
.kit .kit-count__when { font: 700 17px/1.3 var(--kit-sans); }
.kit .kit-count__kicker { margin-top: auto; font: 700 12px/1 var(--kit-sans); letter-spacing: 0.2em; text-transform: uppercase; }
.kit .kit-count__cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kit .kit-count__cells p { display: grid; gap: 8px; }
.kit .kit-count__cells b {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: #131020;
  color: #c8f04b;
  font: 800 clamp(30px, 2.5vw, 36px)/1 var(--kit-display);
  letter-spacing: -0.04em;
  font-variant-numeric: lining-nums tabular-nums;
}
.kit .kit-count__cells span { font: 700 11px/1 var(--kit-sans); letter-spacing: 0.18em; text-align: center; text-transform: uppercase; }

/* ------------------------------------------------------------------ 11 · tour dates */
.kit .kit-tour { gap: 16px; }
.kit .kit-tour__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.kit .kit-tour__list { margin-block: auto; }
.kit .kit-gig {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid #3a3360;
}
.kit .kit-gig:last-child { border-bottom: 1px solid #3a3360; }
.kit .kit-gig__date {
  display: grid;
  color: var(--s-mut);
  font: 700 10px/1.2 var(--kit-sans);
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
}
.kit .kit-gig__date b { color: var(--s-fg); font: 800 25px/1 var(--kit-display); letter-spacing: -0.02em; }
.kit .kit-gig__where { display: grid; gap: 2px; color: var(--s-mut); font: 400 13px/1.3 var(--kit-sans); }
.kit .kit-gig__where b { color: var(--s-fg); font: 700 16px/1.15 var(--kit-sans); }
.kit .kit-gig__badge {
  padding: 6px 8px 5px;
  border: 1px solid #c8f04b;
  border-radius: 4px;
  background: #c8f04b;
  color: #131020;
  font: 700 10px/1 var(--kit-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.kit .kit-gig--out .kit-gig__badge { border-color: var(--s-mut); background: none; color: var(--s-mut); }
.kit [data-kit-show="on"] .kit-gig--out { display: none; }

/* ------------------------------------------------------------------ 12 · questions */
.kit .kit-faq { gap: 12px; }
.kit .kit-faq__list { border-top: 1.5px solid #d9d2c3; }
.kit .kit-faq__q { border-bottom: 1.5px solid #d9d2c3; }
.kit .kit-faq__q summary {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 14px;
  align-items: baseline;
  gap: 10px;
  padding: 13px 0;
  list-style: none;
  cursor: pointer;
  font: 600 17px/1.25 var(--kit-legal);
}
.kit .kit-faq__q summary::-webkit-details-marker { display: none; }
.kit .kit-faq__q summary::after { content: "+"; color: var(--s-acc); font: 400 22px/0.8 var(--kit-sans); }
.kit .kit-faq__q[open] summary::after { content: "\2212"; }
.kit .kit-faq__n { color: var(--s-acc); font: 400 22px/1 var(--kit-legal); }
.kit .kit-faq__q p { padding: 0 0 14px 40px; color: #4d5563; font: 400 15px/1.5 var(--kit-sans); }
.kit .kit-faq__creds {
  margin-top: auto;
  text-wrap: balance;
  color: var(--s-mut);
  font: 700 10.5px/1.6 var(--kit-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ 13 · the rest, set big */
.kit .kit-end { justify-content: center; padding: 46px 28px 28px; }
.kit .kit-end__list {
  font: 800 clamp(24px, 2.2vw, 31px)/1.12 var(--kit-display);
  letter-spacing: -0.025em;
  text-wrap: pretty;
}
.kit .kit-end__list li { display: inline; }
.kit .kit-end__list li:nth-child(3n + 2) { font: italic 400 1.08em/1 var(--kit-serif); letter-spacing: -0.01em; }
.kit .kit-end__list li:last-child { color: var(--kit-acid); }
.kit .kit-end__list li:last-child .kit-end__slash { display: none; }
.kit .kit-end__slash { color: var(--kit-acid); font: 800 1em/1 var(--kit-display); }

/* ------------------------------------------------------------------ the controls */
.kit .kit-controls {
  display: flex;
  align-items: center;
  gap: 22px;
  max-width: var(--kit-max);
  margin: 6px auto 0;
  padding: 0 var(--kit-gutter);
}
.kit .kit-progress { position: relative; flex: 1 1 auto; height: 6px; overflow: hidden; background: rgb(255 255 255 / 0.3); }
.kit .kit-progress__bar {
  position: absolute;
  inset: 0;
  background: var(--kit-acid);
  transform-origin: 0 50%;
  transform: scaleX(calc(0.08 + 0.92 * var(--kit-p)));
}
.kit .kit-arrows { display: flex; gap: 16px; padding: 0 var(--kit-shadow) var(--kit-shadow) 0; }
.kit .kit-arrow {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 3px solid var(--kit-ink);
  background: var(--kit-white);
  color: var(--kit-ink);
  box-shadow: var(--kit-shadow) var(--kit-shadow) 0 var(--kit-ink);
  --kit-focus: var(--kit-acid);
}
.kit .kit-arrow:not([aria-disabled="true"]):active { translate: 3px 3px; box-shadow: 3px 3px 0 var(--kit-ink); }
.kit .kit-arrow[aria-disabled="true"] {
  border-color: rgb(255 255 255 / 0.55);
  background: transparent;
  color: rgb(255 255 255 / 0.7);
  box-shadow: none;
  cursor: default;
}
@media (hover: hover) {
  .kit .kit-arrow:not([aria-disabled="true"]):hover { background: var(--kit-acid); }
}

/* ------------------------------------------------------------------ phones */
@media (max-width: 640px) {
  .kit {
    --kit-w: calc(100vw - 2 * var(--kit-gutter) - 42px);
    --kit-wide: var(--kit-w);
    --kit-h: 468px;
  }
  .kit .kit-head { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .kit .kit-line { padding-bottom: 0; }
  .kit .kit-row { gap: 20px; padding-top: 28px; }
  .kit .kit-s { padding: 40px 18px 18px; }
  .kit .kit-s--photo, .kit .kit-s--bands { padding: 0; }
  .kit .kit-bento { padding: 32px 12px 12px; }
  .kit .kit-end { padding: 44px 20px 20px; }
  .kit .kit-voice { padding-inline: 16px; }
  .kit .kit-controls { gap: 16px; }
  .kit .kit-arrows { gap: 12px; }
  .kit .kit-arrow { width: 52px; height: 52px; }
}

/* ------------------------------------------------------------------ print: the whole wall, flat */
@media print {
  .kit .kit-rail { overflow: visible; }
  .kit .kit-row { flex-wrap: wrap; width: auto; }
  .kit .kit-card { transform: none; }
  .kit .kit-controls { display: none; }
}

/* ------------------------------------------------------------------ the preview page only */
.kit-page { margin: 0; background: #0f0f14; }