/* GlorySmile — home page (index.html).
   Sections: hero (halo ignition) · marquee · the five (sticky stack) · ritual steps · #GlorySmile lookbook · Glory Kit · facts.
   Shared components are only overridden under body[data-page='home']. */

body[data-page='home'] {
  --stack-r: clamp(28px, 4vw, 56px);                 /* rounded top of every stacking surface */
  --panel-h: calc(100svh - var(--header-h));
}
/* =========================================================
   1. Hero
   ========================================================= */
/* The hero is a size container. --s is the photo's object-fit: cover scale, so the CSS halo, the reveal
   circle and the wordmark mask can all be placed in the photo's own pixel space (source px below).
   The units resolve where the vars are used: inside the stage against the stage, in the title against the hero. */
.hero {
  --iw: 1536; --ih: 1024;            /* hero.webp */
  --rx: 760; --ry: 440; --rr: 388;   /* the photo's own halo ring: centre + radius */
  --ox: 0.5; --oy: 0.2;              /* object-position: keep the ring, give up a little floor */
  --s: max(100cqw / var(--iw), 100cqh / var(--ih));
  --ix: calc((100cqw - var(--iw) * var(--s)) * var(--ox));   /* photo offset inside its box */
  --iy: calc((100cqh - var(--ih) * var(--s)) * var(--oy));
  --cx: calc(var(--ix) + var(--rx) * var(--s));
  --cy: calc(var(--iy) + var(--ry) * var(--s));
  --r: calc(var(--rr) * var(--s));
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  height: max(100svh, 640px);        /* explicit height, not min-height: Chromium resolves cqh to 0 on a size container sized only by min-height */
  background: var(--enamel);
  overflow: clip;
  isolation: isolate;
  container-type: size;
}
.hero__stage {
  grid-area: 1 / 1 / 4 / 2;
  position: relative;
  z-index: -1;
  container-type: size;
}
.hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: calc(var(--ox) * 100%) calc(var(--oy) * 100%);
  /* the floor of the photo dissolves into the page, so the line + actions always sit on clean enamel */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 13rem), transparent calc(100% - 1.5rem));
          mask-image: linear-gradient(to bottom, #000 calc(100% - 13rem), transparent calc(100% - 1.5rem));
}
.hero__halo {
  --size: calc(2 * var(--r));
  --ring: 4px;
  position: absolute;
  left: calc(var(--cx) - var(--r));
  top: calc(var(--cy) - var(--r));
  opacity: 0;                        /* only lives inside the ignition; the photo carries its own ring */
  filter: drop-shadow(0 0 4px rgba(230, 214, 255, 1)) drop-shadow(0 0 18px rgba(207, 226, 255, 1)) drop-shadow(0 0 16px rgba(90, 43, 255, 0.3));
}

/* Wordmark: "Glory", edge to edge */
.hero__title {
  grid-area: 1 / 1;
  padding-top: calc(var(--header-h) + clamp(0.25rem, 1.2vh, 1rem));
  font-size: var(--t-m);
}
/* Landscape screens: hero.webp has little sky, so the wordmark passes BEHIND the products, magazine-masthead
   style. The mask is the product silhouette traced from hero.webp (evenodd path, source px), laid over the
   title in exactly the photo's cover geometry. */
@media (min-width: 701px) and (min-aspect-ratio: 801/1000) {
  .hero__title {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1024'%3E%3Cfilter id='f'%3E%3CfeGaussianBlur stdDeviation='0.8'/%3E%3C/filter%3E%3Cpath fill-rule='evenodd' filter='url(%23f)' d='M0 0H1536V1024H0ZM1020 476 1020 480 1015 483 1015 498 1019 520 1025 538 1025 544 1033 565 1037 568 1047 585 1073 611 1073 615 1051 637 1051 643 1058 651 1058 681 1054 689 1054 699 1266 699 1266 639 1245 618 1245 614 1255 607 1267 595 1279 578 1279 567 1288 549 1293 533 1297 531 1304 508 1306 488 1303 485 1301 476 1297 474 1289 476 1279 476 1259 480 1247 485 1243 500 1236 515 1226 529 1213 542 1210 548 1201 557 1190 564 1168 571 1152 571 1142 569 1134 566 1123 559 1114 557 1096 548 1085 540 1074 529 1064 515 1057 500 1053 486 1053 479 1051 477 1033 476 1030 474 1023 474ZM1354 411 1350 413 1343 413 1340 415 1340 525 1341 526 1340 699 1384 699 1384 415 1377 411 1373 412 1372 414 1368 411ZM963 246 937 251 932 254 927 253 920 258 918 264 918 277 917 278 918 316 924 333 926 344 927 364 928 365 928 385 929 386 928 417 922 466 920 508 919 509 919 531 918 532 918 610 919 611 919 660 921 675 921 699 970 699 969 684 971 682 971 655 972 654 972 562 971 561 970 520 964 463 954 402 950 385 946 354 946 334 949 326 951 324 963 323 970 320 970 315 972 313 971 308 972 306 971 301 972 299 971 293 972 291 971 286 972 284 971 277 972 276 971 269 972 263 970 261 971 255 969 254 969 249ZM859 323 856 321 844 321 824 324 816 328 809 329 800 333 798 335 798 369 789 373 789 440 778 446 778 672 777 673 741 672 723 670 723 624 727 617 728 612 732 530 733 529 733 515 734 514 734 500 735 499 743 379 755 256 761 217 763 214 763 192 761 191 758 192 757 191 753 192 744 191 743 192 737 190 597 190 594 192 591 191 587 192 582 189 574 189 571 191 571 214 573 219 577 242 582 283 587 350 589 362 592 414 594 427 594 445 595 446 596 476 599 507 604 616 607 621 607 684 608 685 606 690 572 689 571 688 530 686 521 684 521 606 522 605 522 592 521 591 522 427 516 423 479 424 478 423 457 423 438 421 406 421 390 419 367 419 364 418 363 415 361 414 355 415 354 418 224 414 220 417 200 417 196 421 196 613 188 615 188 625 189 626 187 638 169 638 168 639 160 638 158 639 157 649 161 665 166 698 167 699 874 699 873 670 872 669 872 444 864 440 864 373 855 368 855 334 857 328 859 327Z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1024'%3E%3Cfilter id='f'%3E%3CfeGaussianBlur stdDeviation='0.8'/%3E%3C/filter%3E%3Cpath fill-rule='evenodd' filter='url(%23f)' d='M0 0H1536V1024H0ZM1020 476 1020 480 1015 483 1015 498 1019 520 1025 538 1025 544 1033 565 1037 568 1047 585 1073 611 1073 615 1051 637 1051 643 1058 651 1058 681 1054 689 1054 699 1266 699 1266 639 1245 618 1245 614 1255 607 1267 595 1279 578 1279 567 1288 549 1293 533 1297 531 1304 508 1306 488 1303 485 1301 476 1297 474 1289 476 1279 476 1259 480 1247 485 1243 500 1236 515 1226 529 1213 542 1210 548 1201 557 1190 564 1168 571 1152 571 1142 569 1134 566 1123 559 1114 557 1096 548 1085 540 1074 529 1064 515 1057 500 1053 486 1053 479 1051 477 1033 476 1030 474 1023 474ZM1354 411 1350 413 1343 413 1340 415 1340 525 1341 526 1340 699 1384 699 1384 415 1377 411 1373 412 1372 414 1368 411ZM963 246 937 251 932 254 927 253 920 258 918 264 918 277 917 278 918 316 924 333 926 344 927 364 928 365 928 385 929 386 928 417 922 466 920 508 919 509 919 531 918 532 918 610 919 611 919 660 921 675 921 699 970 699 969 684 971 682 971 655 972 654 972 562 971 561 970 520 964 463 954 402 950 385 946 354 946 334 949 326 951 324 963 323 970 320 970 315 972 313 971 308 972 306 971 301 972 299 971 293 972 291 971 286 972 284 971 277 972 276 971 269 972 263 970 261 971 255 969 254 969 249ZM859 323 856 321 844 321 824 324 816 328 809 329 800 333 798 335 798 369 789 373 789 440 778 446 778 672 777 673 741 672 723 670 723 624 727 617 728 612 732 530 733 529 733 515 734 514 734 500 735 499 743 379 755 256 761 217 763 214 763 192 761 191 758 192 757 191 753 192 744 191 743 192 737 190 597 190 594 192 591 191 587 192 582 189 574 189 571 191 571 214 573 219 577 242 582 283 587 350 589 362 592 414 594 427 594 445 595 446 596 476 599 507 604 616 607 621 607 684 608 685 606 690 572 689 571 688 530 686 521 684 521 606 522 605 522 592 521 591 522 427 516 423 479 424 478 423 457 423 438 421 406 421 390 419 367 419 364 418 363 415 361 414 355 415 354 418 224 414 220 417 200 417 196 421 196 613 188 615 188 625 189 626 187 638 169 638 168 639 160 638 158 639 157 649 161 665 166 698 167 699 874 699 873 670 872 669 872 444 864 440 864 373 855 368 855 334 857 328 859 327Z'/%3E%3C/svg%3E");
    -webkit-mask-size: calc(var(--iw) * var(--s)) calc(var(--ih) * var(--s));
            mask-size: calc(var(--iw) * var(--s)) calc(var(--ih) * var(--s));
    -webkit-mask-position: var(--ix) var(--iy);
            mask-position: var(--ix) var(--iy);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
  }
}
.hero__word {
  /* ink width of "Glory" in Unbounded 200 at -0.04em ≈ 2.78em → edge to edge between the gutters.
     Capped by height so very wide screens keep the photo readable. */
  --fit: min(calc((100cqw - 2 * var(--gutter)) / 2.78), 53cqh);
  display: flex;
  width: max-content;
  margin: -0.09em auto 0;            /* the font box has ~0.1em of air above the ascenders */
  padding-bottom: 0.1em;             /* room for the descender inside the rise mask */
  overflow: clip;
  font-family: var(--f-display);
  font-weight: 200;
  font-size: var(--fit);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}
.hero__word > span { display: block; }

/* Bottom bar: one line + the two actions */
.hero__bar {
  grid-area: 3 / 1;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.25rem 2rem;
  padding-block: 1.5rem clamp(1.5rem, 4.5vh, 3rem);
}
.hero__line {
  font-family: var(--f-display); font-weight: 300; font-size: var(--t-xl);
  letter-spacing: -0.03em; line-height: 1.1;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Halo ignition — home only, ~1.6s. home.js adds .is-lit once the photo is decoded (1.2s safety).
   Hidden start states exist only with JS and only when motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero:not(.is-lit) .hero__img { opacity: 0; }
  .js .hero:not(.is-lit) .hero__word > span { transform: translateY(112%); }
  .js .hero:not(.is-lit) .hero__bar { opacity: 0; }

  .hero.is-lit .hero__halo { animation: gs-halo 1.6s var(--ease) both; }
  .hero.is-lit .hero__img { animation: gs-reveal 1.15s 0.38s both; }
  .hero.is-lit .hero__word > span { animation: gs-rise 0.95s calc(0.82s + var(--i) * 0.065s) var(--ease) both; }
  .hero.is-lit .hero__bar { animation: gs-fade 0.7s 1.2s ease-out both; }
}
/* the ring lights, holds while the photo fills it, then hands over to the photo's own ring as the reveal opens */
@keyframes gs-halo {
  0% { opacity: 0; transform: scale(0.55); }
  28% { opacity: 1; transform: scale(1); }
  42% { opacity: 1; transform: scale(1); }
  60% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes gs-reveal {
  0% { opacity: 0; clip-path: circle(var(--r) at var(--cx) var(--cy)); animation-timing-function: ease-out; }
  24% { opacity: 1; clip-path: circle(var(--r) at var(--cx) var(--cy)); animation-timing-function: cubic-bezier(0.65, 0, 0.2, 1); }
  100% { opacity: 1; clip-path: circle(calc(100cqw + 100cqh) at var(--cx) var(--cy)); }
}
@keyframes gs-rise { from { transform: translateY(112%); } to { transform: none; } }
@keyframes gs-fade { from { opacity: 0; } to { opacity: 1; } }

/* Phones and portrait screens get hero-m.webp (same media as the <source> and the preload):
   its empty upper third holds the wordmark cleanly. */
@media (max-width: 700px), (max-aspect-ratio: 4/5) {
  .hero {
    --iw: 1024; --ih: 1536;          /* hero-m.webp */
    --rx: 535; --ry: 762; --rr: 380;
    --oy: 0.5;
  }
  .hero__stage { grid-area: 1 / 1 / 3 / 2; }   /* the photo ends where the actions begin */
  /* the floor of the photo dissolves into the page, so the actions sit on clean enamel */
  .hero__img {
    -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent);
            mask-image: linear-gradient(to bottom, #000 84%, transparent);
  }
}
@media (max-width: 700px) {
  .hero__bar { flex-direction: column; align-items: stretch; gap: 1rem; padding-top: 0.5rem; }
  .hero__line { font-size: var(--t-l); }
  .hero__cta { display: grid; gap: 0.6rem; }
  .hero__cta .btn { width: 100%; }
}

/* =========================================================
   2. Marquee — exact seamless loop: no track gap, each group carries its own trailing space
   ========================================================= */
body[data-page='home'] .marquee__track { gap: 0; }
body[data-page='home'] .marquee__item { padding-right: 2.5rem; }

/* =========================================================
   3. The five — sticky stacking panels
   ========================================================= */
.five { position: relative; padding-top: clamp(1.5rem, 4vw, 3rem); }
.panel {
  --panel-bg: var(--pearl);
  --pad: clamp(1.5rem, 4.5vh, 3.25rem);
  position: relative;
  background: var(--panel-bg);
  border-radius: var(--stack-r) var(--stack-r) 0 0;
  box-shadow: 0 -1px 0 rgba(26, 20, 56, 0.05), 0 -18px 40px -30px rgba(26, 20, 56, 0.14);
}
.panel + .panel { margin-top: calc(-1 * var(--stack-r)); }
.panel:nth-child(even) { --panel-bg: var(--enamel); }
.panel--dark { --panel-bg: var(--night); color: var(--pearl); }

.panel__in {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(2rem, 7vw, 8rem);
  padding-block: var(--pad) calc(var(--pad) + var(--stack-r) * 0.5);
}
.panel--flip .panel__in { grid-template-columns: minmax(0, 1fr) auto; }
.panel--flip .panel__media { order: 2; }

.panel__media { position: relative; display: block; align-self: start; }
.panel__arch {
  display: block;
  height: min(calc(var(--panel-h) - 2 * var(--pad) - var(--stack-r) * 0.5), 64vw);
  aspect-ratio: 2 / 3;
}
.panel__arch img { transition: transform 0.9s var(--ease); }
.panel__media:hover .panel__arch img { transform: scale(1.04); }
.panel__macro {
  position: absolute;
  width: 36%;
  right: -16%; bottom: 7%;
  box-shadow: 0 0 0 clamp(7px, 0.8vw, 12px) var(--panel-bg);
}
.panel--flip .panel__macro { right: auto; left: -16%; }

.panel__body {
  container-type: inline-size;
  display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem;
  padding-block: clamp(0.5rem, 3vh, 2.5rem) clamp(0.25rem, 1.5vh, 1rem);
}
.panel__name {
  font-size: min(var(--t-3xl), 15.6cqi);
  font-weight: 300;
  letter-spacing: -0.045em;
  line-height: 0.95;
}
.panel__tag {
  margin-top: clamp(1rem, 2.5vh, 1.75rem);
  font-size: var(--t-l); line-height: 1.4; color: var(--ink-2);
}
.panel__price { font-size: var(--t-xl); margin-bottom: 1.25rem; }
.panel__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* LED: the one dark room */
.panel--dark .panel__tag { color: rgba(255, 255, 255, 0.72); }
.panel--dark .panel__price { color: var(--glow); }
.panel--dark .panel__arch { box-shadow: 0 0 0 1px rgba(61, 139, 255, 0.35), 0 40px 120px -30px rgba(61, 139, 255, 0.6); }
.panel--dark .panel__macro { box-shadow: 0 0 0 clamp(7px, 0.8vw, 12px) var(--night), 0 0 0 calc(clamp(7px, 0.8vw, 12px) + 1px) rgba(61, 139, 255, 0.55); }
.panel--dark .btn--ghost { --fg: var(--pearl); }
.panel--dark .btn--ghost:hover { --bg: var(--pearl); --fg: var(--night); border-color: var(--pearl); }

/* Desktop: the stack. Panels pin under the header and each new one slides over the last. */
@media (min-width: 821px) and (min-height: 560px) {
  .panel { position: sticky; top: var(--header-h); }
  .panel__in { min-height: calc(var(--panel-h) + var(--stack-r)); }
}

/* Mobile: plain stacked blocks, arch first */
@media (max-width: 820px) {
  .panel__in { grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem; padding-block: 1.75rem calc(2.5rem + var(--stack-r)); }
  .panel--flip .panel__in { grid-template-columns: minmax(0, 1fr); }
  .panel--flip .panel__media { order: 0; }
  .panel__arch { width: 100%; height: auto; aspect-ratio: 4 / 5; }
  .panel__macro, .panel--flip .panel__macro { width: 30%; top: 2%; right: 0; bottom: auto; left: auto; }
  .panel__body { gap: 1.75rem; padding: 0; }
  .panel__name { font-size: min(var(--t-3xl), 15.6cqi); }
  .panel__tag { margin-top: 0.75rem; }
  .panel__price { margin-bottom: 1rem; }
  .panel__actions .btn { flex: 1 1 auto; }
}

/* =========================================================
   4. Ritual — three circles on one thread
   ========================================================= */
.steps {
  --c: clamp(200px, 24vw, 360px);    /* circle size */
  position: relative;
  margin-top: calc(-1 * var(--stack-r));
  padding-block: calc(var(--section) * 0.85) var(--section);
  background: var(--enamel);
  border-radius: var(--stack-r) var(--stack-r) 0 0;
}
.steps__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-bottom: clamp(3rem, 7vw, 6.5rem);
}
.steps__title { font-size: var(--t-2xl); max-width: 11ch; }
.steps__list {
  position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 5rem);
  list-style: none; padding: 0;
}
.steps__list::before {             /* the thread through the circle centres */
  content: ''; position: absolute;
  left: calc(100% / 6); right: calc(100% / 6); top: calc(var(--c) / 2);
  height: 1px; background: var(--ink); opacity: 0.22;
}
.step { position: relative; display: grid; justify-items: center; align-content: start; gap: clamp(1.25rem, 2.5vw, 2rem); text-align: center; }
.step__img { width: var(--c); box-shadow: 0 0 0 clamp(10px, 1.2vw, 16px) var(--enamel); }
.step__text { display: grid; justify-items: center; gap: 0.6rem; }
.step__word {
  display: inline-flex; align-items: center; gap: 0.85rem;
  font-size: var(--t-xl); letter-spacing: -0.035em;
}
.step__num {
  display: inline-grid; place-items: center; flex: none;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 1.5px solid currentColor;
  font-family: var(--f-text); font-size: var(--t-s); font-weight: 600; letter-spacing: 0; line-height: 1;
}
.step__text p { color: var(--ink-2); max-width: 24ch; }

@media (max-width: 820px) {
  .steps { --c: clamp(120px, 35vw, 220px); }
  .steps__list { grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 8vw, 3rem); }
  .steps__list::before { left: calc(var(--c) / 2); right: auto; top: calc(var(--c) / 2); bottom: calc(var(--c) / 2); width: 1px; height: auto; }
  .step { grid-template-columns: var(--c) minmax(0, 1fr); align-items: center; justify-items: start; text-align: left; gap: 1.25rem; }
  .step__img { box-shadow: 0 0 0 10px var(--enamel); }
  .step__text { justify-items: start; min-width: 0; }
  .step__word { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .step__num { width: 2.25rem; height: 2.25rem; }
}

/* =========================================================
   5. #GlorySmile — lookbook collage
   ========================================================= */
.look { padding-block: 0 calc(var(--section) * 0.7); }
.look__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.25rem, 4.5vw, 4.5rem); align-items: start; }
.look__col { position: relative; display: grid; align-content: start; }
.look figure img { transition: transform 0.9s var(--ease); }
.look figure:hover img { transform: scale(1.04); }
.look__smile { aspect-ratio: 2 / 3; }
.look__mirror {
  z-index: 1;
  width: 60%;
  margin: -26% -18% 0 auto;
  box-shadow: 0 0 0 clamp(8px, 1vw, 14px) var(--enamel);
}
.look__head {
  container-type: inline-size;
  display: grid; justify-items: start; gap: 1.5rem;
  padding-top: clamp(1rem, 7vw, 7.5rem);
  margin-bottom: clamp(2.5rem, 6vw, 5.5rem);
}
.look__title { font-size: min(var(--t-3xl), 14.6cqi); font-weight: 300; letter-spacing: -0.045em; line-height: 0.95; }
.look__ig svg { width: 22px; height: 22px; }
.look__duo { aspect-ratio: 3 / 2; }
.look__strips {
  z-index: 1;
  width: 44%;
  aspect-ratio: 1;
  margin: -14% 0 0 22%;
  box-shadow: 0 0 0 clamp(8px, 1vw, 14px) var(--enamel);
}

@media (max-width: 820px) {
  .look__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 0.75rem; row-gap: 0; }
  .look__col { display: contents; }
  .look__head { grid-column: 1 / -1; order: 0; padding-top: 0; margin-bottom: 2rem; gap: 1.25rem; }
  .look__smile { grid-column: 1 / 6; order: 1; }
  .look__mirror { grid-column: 3 / 7; order: 2; width: auto; margin: -22% 0 0; }
  .look__duo { grid-column: 1 / -1; order: 3; margin-top: 2.5rem; }
  .look__strips { grid-column: 1 / 5; order: 4; width: auto; margin: -16% 0 0 12%; }
}

/* =========================================================
   6. Glory Kit — the flat lay inside a halo
   ========================================================= */
.kit { overflow: clip; padding-block: calc(var(--section) * 0.6) var(--section); }
.kit:focus { outline: none; }   /* focus target of the hero link, not a control */
.kit__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 7rem); align-items: center; }
.kit__media { position: relative; display: grid; place-items: center; }
.kit__shot { position: relative; z-index: 1; width: 74%; aspect-ratio: 1; }
.kit__halo {
  --size: 110%;                      /* circumscribes the square shot (diagonal ≈ 1.41 × 74%) */
  --ring: 5px;
  filter: drop-shadow(0 0 26px rgba(207, 226, 255, 1)) drop-shadow(0 0 6px rgba(230, 214, 255, 1));
  position: absolute; left: 50%; top: 50%;
  translate: -50% -50%;
}
.kit__body { container-type: inline-size; display: grid; justify-items: start; }
.kit__name { font-size: min(var(--t-3xl), 20cqi); font-weight: 300; letter-spacing: -0.045em; line-height: 0.95; }
.kit__tag { margin-top: 1.25rem; font-size: var(--t-l); color: var(--ink-2); }
.kit__items { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.kit__item { display: block; width: clamp(52px, 5vw, 68px); transition: transform 0.4s var(--ease); }
.kit__item:hover { transform: translateY(-3px); }
.kit__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.1rem; margin-top: clamp(2rem, 4vw, 3rem); }
.kit__now { font-size: var(--t-2xl); line-height: 1; }
.kit__was { font-size: var(--t-l); color: var(--ink-2); text-decoration-thickness: 1.5px; }
.kit__add { margin-top: 1.75rem; }

@media (max-width: 820px) {
  .kit__in { grid-template-columns: minmax(0, 1fr); }
  .kit__media { aspect-ratio: 1; }   /* the box holds the whole ring, so it never crosses the name below */
  .kit__shot { width: 66%; }
  .kit__halo { --size: 97%; }        /* still circumscribes the shot (66% × 1.41 ≈ 93%) */
  .kit__add { width: 100%; }
}

/* =========================================================
   7. Facts
   ========================================================= */
.home-facts .fact { font-size: var(--t-m); }

/* Shared toast: translate(-50%, 140%) leaves ~13px peeking above the bottom edge while hidden.
   Keep it fully off-screen here (reported as a shared fix). */
body[data-page='home'] .toast:not(.is-on) { transform: translate(-50%, calc(100% + 2rem)); }