/* PickScore polish, layer 1: the home pages (English and Arabic).
   Loaded LAST. It refines what already exists and never renames or removes a class.
   Deliberately untouched: the hero globe (.celestial-media, #celestial-video), the footer motion box
   (.footer-left, #footer-video, .celestial-motion), the feature cards and the pricing cards' glass
   design, and every animation celestial.js already runs. Spec: docs/design/POLISH_SPEC.md.
   The security policy allows nothing inline and nothing from outside this site, so this file is plain CSS. */
@media screen {
  .celestial-home {
    --pk-cyan: #7bdef7;
    --pk-cyan-hover: #9ae8fa;
    --pk-cyan-press: #6fd0e8;
    --pk-cyan-ink: #05232d;
    --pk-cyan-line: rgba(123, 222, 247, .6);
    --pk-ring: rgba(123, 222, 247, .55);
    --pk-glass: rgba(25, 44, 68, .5);
    --pk-edge: rgba(181, 217, 245, .28);
  }

  /* ---- Typography: numbers line up, Arabic never gets letter spacing, paragraphs breathe ---- */
  .celestial-home :is(.pricing-tier strong, .visibility-number, .footer-cta strong) { font-variant-numeric: tabular-nums; }
  html[lang="ar"] .celestial-home :is(h1, h2, h3, p, a, button, label, li, small, span) { letter-spacing: 0; }
  html[lang="ar"] .celestial-home :is(p, li):not(:is(footer, .celestial-footer) *) { line-height: 1.75; }

  /* ---- Header: a floating glass bar. The bar is drawn behind the header, so the header keeps its
     exact height and nothing below it (or the globe behind it) moves. ---- */
  .celestial-home .site-header {
    width: min(1120px, calc(100% - 24px));
    max-width: 1120px;
    padding-inline: 24px;
    border: 0;
    isolation: isolate;
  }
  .celestial-home .site-header::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-block: 14px;
    inset-inline: 0;
    border: 1px solid var(--pk-edge);
    border-radius: 999px;
    background: var(--pk-glass);
    -webkit-backdrop-filter: blur(14px) saturate(115%);
    backdrop-filter: blur(14px) saturate(115%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 12px 30px rgba(0, 0, 0, .18);
    pointer-events: none;
  }
  .celestial-home .site-nav a { color: #f0f8ff; transition: color .2s ease; }
  .celestial-home .site-nav a:hover { color: var(--pk-cyan-hover); }
  .celestial-home .site-actions .lang-switch {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 12px;
    border: 0;
    border-radius: 999px;
    color: #eaf6ff;
    text-decoration: none;
    transition: background .2s ease, box-shadow .2s ease, color .2s ease;
  }
  .celestial-home .site-actions .lang-switch:hover { background: rgba(123, 222, 247, .12); box-shadow: inset 0 0 0 1px rgba(123, 222, 247, .35); color: #fff; }
  .celestial-home .nav-toggle { min-width: 44px; min-height: 44px; border-radius: 50%; }
  .celestial-home .nav-toggle:hover { background: rgba(123, 222, 247, .12); }
  @media (max-width: 1000px) {
    .celestial-home .site-nav.open {
      top: calc(100% - 6px);
      inset-inline: 0;
      border: 1px solid var(--pk-edge);
      border-radius: 20px;
      background: rgba(16, 30, 39, .97);
      box-shadow: 0 18px 40px rgba(0, 0, 0, .4);
    }
  }
  @media (max-width: 700px) {
    .celestial-home .site-header { padding-inline: 14px; }
    .celestial-home .site-header::before { inset-block: 10px; }
    .celestial-home .site-actions .lang-switch { padding-inline: 6px; }
  }
  @media (max-width: 380px) {
    .celestial-home .site-actions .lang-switch { padding-inline: 3px; }
  }

  /* ---- Buttons: solid cyan primary, cyan-outline secondary, quiet ghost ---- */
  .celestial-home #scan-form .hero-go,
  .celestial-home #scan-form #submit,
  .celestial-home .site-actions .nav-start,
  .celestial-home .footer-start,
  .celestial-pricing .is-featured .pricing-cta {
    border-color: var(--pk-cyan);
    border-radius: 12px;
    background: var(--pk-cyan);
    color: var(--pk-cyan-ink);
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(123, 222, 247, .25);
  }
  .celestial-home #scan-form .hero-go .pricing-cta-label,
  .celestial-pricing .is-featured .pricing-cta .pricing-cta-label { color: var(--pk-cyan-ink); }
  .celestial-home #scan-form .hero-go:hover:not(:disabled),
  .celestial-home #scan-form #submit:hover:not(:disabled),
  .celestial-home .site-actions .nav-start:hover,
  .celestial-home .footer-start:hover,
  .celestial-pricing .is-featured .pricing-cta:hover {
    border-color: var(--pk-cyan-hover);
    background: var(--pk-cyan-hover);
    color: var(--pk-cyan-ink);
    box-shadow: 0 10px 26px rgba(123, 222, 247, .38);
  }
  .celestial-home #scan-form .hero-go:active:not(:disabled),
  .celestial-home #scan-form #submit:active:not(:disabled),
  .celestial-home .site-actions .nav-start:active,
  .celestial-home .footer-start:active,
  .celestial-pricing .is-featured .pricing-cta:active {
    border-color: var(--pk-cyan-press);
    background: var(--pk-cyan-press);
  }
  /* Once the details are open, the reveal button steps back so the real submit button leads. */
  .celestial-home #scan-form.expanded .hero-go {
    background: transparent;
    color: #a6ebfc;
    box-shadow: inset 0 0 0 1px var(--pk-cyan-line);
  }
  .celestial-home #scan-form.expanded .hero-go:hover:not(:disabled) { background: rgba(123, 222, 247, .14); color: #e6fbff; box-shadow: inset 0 0 0 1px var(--pk-cyan); }
  .celestial-home #scan-form.expanded .hero-go .ui-icon { filter: brightness(0) invert(1) sepia(1) saturate(4) hue-rotate(155deg); }
  /* The other two pricing buttons are secondary, so the featured tier is the clear next step. */
  .celestial-pricing .pricing-cta {
    border-color: var(--pk-cyan-line);
    border-radius: 12px;
    background: transparent;
    color: #bdf1ff;
    font-weight: 600;
  }
  .celestial-pricing .pricing-cta:hover { border-color: var(--pk-cyan); background: rgba(123, 222, 247, .14); color: #e6fbff; }
  .celestial-home :is(#scan-form .hero-go, #scan-form #submit, .nav-start, .footer-start, .lang-switch, .nav-toggle):focus-visible,
  .celestial-pricing .pricing-cta:focus-visible { outline: 3px solid var(--pk-ring); outline-offset: 2px; }
  .celestial-home #scan-form :is(.hero-go, #submit):disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }
  .celestial-home #scan-form :is(.hero-go, #submit).is-loading { cursor: progress; }
  .celestial-home #scan-form :is(.hero-go, #submit).is-loading::after {
    content: "";
    display: inline-block;
    inline-size: 14px;
    block-size: 14px;
    margin-inline-start: 8px;
    border: 2px solid rgba(5, 35, 45, .28);
    border-block-start-color: var(--pk-cyan-ink);
    border-radius: 50%;
  }
}

/* ---- Motion: only where nothing already animates it. Every rule here is opt-in. ---- */
@media screen and (prefers-reduced-motion: no-preference) {
  .celestial-home .site-actions .nav-start,
  .celestial-home .footer-start,
  .celestial-home #scan-form :is(.hero-go, #submit),
  .celestial-pricing .pricing-cta {
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  }
  .celestial-home #scan-form :is(.hero-go, #submit):hover:not(:disabled),
  .celestial-home .site-actions .nav-start:hover,
  .celestial-pricing .is-featured .pricing-cta:hover { transform: translateY(-1px); }
  .celestial-home #scan-form :is(.hero-go, #submit):active:not(:disabled),
  .celestial-home .site-actions .nav-start:active,
  .celestial-pricing .is-featured .pricing-cta:active { transform: translateY(1px); }
  /* One soft glow on the hero button, three slow pulses to draw the eye, then it rests. */
  .celestial-home #scan-form:not(.expanded) .hero-go { animation: pk-glow 2.4s ease-in-out 1.2s 3; }
  .celestial-home #scan-form :is(.hero-go, #submit).is-loading::after { animation: pk-spin .7s linear infinite; }
  @keyframes pk-glow {
    0%, 100% { box-shadow: 0 6px 18px rgba(123, 222, 247, .25); }
    50% { box-shadow: 0 6px 26px rgba(123, 222, 247, .45); }
  }
  @keyframes pk-spin { to { transform: rotate(360deg); } }
}

/* ======== Layer 2: the owner's board 2 and motion-lab picks on the home pages (English and Arabic).
   Form fields A (filled glass), status chips A (soft pills), notices B (tinted), vectors V09/V15/V16 as
   feature art, and motions M01, M03, M04, M05, M11, M12. polish.js adds the pointer-driven parts. ======== */
@property --pk-beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

@media screen {
  /* ---- Form fields A: filled glass boxes in both stages of the hero form ---- */
  .celestial-home #scan-form :is(.hero-field input, .form-details input:not([type="checkbox"]), .form-details select) {
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid rgba(181, 217, 245, .22);
    border-radius: 12px;
    background: rgba(10, 22, 34, .55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
  }
  .celestial-home #scan-form :is(.hero-field input, .form-details input:not([type="checkbox"]), .form-details select):hover { border-color: rgba(181, 217, 245, .4); }
  .celestial-home #scan-form :is(.hero-field input, .form-details input:not([type="checkbox"]), .form-details select):focus {
    border-color: var(--pk-cyan);
    background: rgba(16, 34, 52, .72);
    outline: 3px solid rgba(123, 222, 247, .35);
    outline-offset: 1px;
    box-shadow: 0 0 18px rgba(123, 222, 247, .14);
  }
  /* A field the visitor has left wrong gets the red ring (only after they touched it). */
  .celestial-home #scan-form :is(input, select):user-invalid { border-color: #ff958e; outline-color: rgba(255, 149, 142, .35); }
  .celestial-home #scan-form .name-help { inset-block-start: 1px; }
  .celestial-home #scan-form .agree input[type="checkbox"],
  .celestial-home #scan-form .same-as-name input[type="checkbox"] { accent-color: var(--pk-cyan); }

  /* ---- Status chips A: the three promises as soft pills ---- */
  .celestial-home #step-form .promise { gap: 8px; }
  .celestial-home #step-form .promise span {
    padding: 3px 12px;
    border: 1px solid rgba(123, 222, 247, .24);
    border-radius: 999px;
    background: rgba(123, 222, 247, .08);
    color: #d9f1fb;
  }
  .celestial-home #step-form .promise span + span::before { content: none; }

  /* ---- Notices B: a soft tint, a fine border and a status mark ---- */
  .celestial-home #scan-form :is(#form-notice, #form-error) {
    position: relative;
    padding: 12px 16px;
    padding-inline-start: 46px;
    border-radius: 12px;
  }
  .celestial-home #scan-form #form-notice { border: 1px solid rgba(243, 207, 112, .38); background: rgba(243, 207, 112, .08); color: #fbeecb; }
  .celestial-home #scan-form #form-error { border: 1px solid rgba(255, 149, 142, .42); background: rgba(255, 149, 142, .09); color: #ffd9d6; }
  .celestial-home #scan-form :is(#form-notice, #form-error)::before {
    position: absolute;
    inset-block-start: 13px;
    inset-inline-start: 15px;
    display: grid;
    place-items: center;
    inline-size: 20px;
    block-size: 20px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
  }
  .celestial-home #scan-form #form-notice::before { content: "i"; color: #f3cf70; }
  .celestial-home #scan-form #form-error::before { content: "!"; color: #ff958e; }

  /* ---- Feature art: the chosen vectors fill the empty top corner of the three feature cards ---- */
  .celestial-home #benefits .glow-feature-art {
    position: absolute;
    z-index: 0;
    inset-block-start: 14px;
    inset-inline-end: 14px;
    inline-size: clamp(84px, 40%, 124px);
    block-size: auto;
    aspect-ratio: 1;
    opacity: .92;
    pointer-events: none;
  }
  .celestial-home #benefits .glow-feature-panel > :not(.glow-feature-art, .sr-only) { position: relative; z-index: 1; }
}

@media screen and (prefers-reduced-motion: no-preference) {
  /* ---- M12: page-load choreography. CSS only; "backwards" fill, so nothing stays hidden after it. ---- */
  .celestial-home .site-header { animation: pk-drop .6s cubic-bezier(.2, .7, .2, 1) backwards; }
  .celestial-home :is(.home-hero > *, #step-form > :not(h2)) { animation: pk-arrive .75s cubic-bezier(.2, .7, .2, 1) backwards; }
  .celestial-home .home-hero > .celestial-kicker { animation-delay: .08s; }
  .celestial-home .home-hero > h1 { animation-delay: .16s; }
  .celestial-home .home-hero > .hero-subtitle { animation-delay: .28s; }
  .celestial-home #step-form > #scan-form { animation-delay: .4s; }
  .celestial-home #step-form > .form-caption { animation-delay: .52s; }
  .celestial-home #step-form > .promise { animation-delay: .6s; }
  @keyframes pk-drop { from { opacity: 0; transform: translateY(-10px); } }
  @keyframes pk-arrive { from { opacity: 0; transform: translateY(16px); } }

  /* ---- M03: a slow light beam travels round the hero form's edge. Paused off screen (polish.js). ---- */
  .celestial-home #scan-form { position: relative; }
  .celestial-home #scan-form::after {
    content: "";
    position: absolute;
    inset: -1px;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from var(--pk-beam), transparent 0deg, transparent 250deg, rgba(90, 176, 255, .5) 290deg, #ddf8ff 318deg, #7bdef7 332deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
    animation: pk-beam 9s linear infinite;
  }
  .celestial-home #scan-form.pk-idle::after { animation-play-state: paused; }
  @keyframes pk-beam { to { --pk-beam: 360deg; } }

  /* ---- M05: the main buttons lean toward the pointer (polish.js sets --pk-mx/--pk-my, fine pointers only).
     The individual `translate` property adds to the hover lift instead of replacing it. ---- */
  .celestial-home :is(#scan-form .hero-go, #scan-form #submit, .site-actions .nav-start, .footer-start) {
    translate: var(--pk-mx, 0px) var(--pk-my, 0px);
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, translate .3s cubic-bezier(.2, .7, .2, 1);
  }
}

/* ---- M04 + M11: on the "how it works" cards, the card under the pointer tilts toward it and lifts,
   and its neighbours step back. Fine pointers only; keyboard focus gets the same lift. ---- */
@media screen and (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .celestial-home .celestial-steps .visibility-card {
    transform: perspective(1000px) rotateX(var(--pk-rx, 0deg)) rotateY(var(--pk-ry, 0deg));
    transition: transform .35s ease, translate .35s ease, scale .35s ease, opacity .35s ease, box-shadow .35s ease;
  }
  .celestial-home .celestial-steps .visibility-card:is(:hover, :focus-within) {
    translate: 0 -6px;
    box-shadow: 0 22px 44px rgba(0, 0, 0, .38), 0 0 0 1px rgba(123, 222, 247, .28);
  }
  .celestial-home .celestial-steps:has(.visibility-card:is(:hover, :focus-within)) .visibility-card:not(:is(:hover, :focus-within)) {
    opacity: .55;
    scale: .98;
  }
}

/* ======== Layer 3: the pricing section, from the owner's pricing board (2026-09-24):
   Price C (glowing number, small currency), Depth meter B (three bars), Featured card B (glow and a light
   line on top), Check marks B (soft cyan), Heading C (cyan glowing accent) and motions a to e.
   Loops stop with the section's Pause button (.stars-paused) and pause off screen (.pricing-idle);
   one-shot motions only play when polish.js adds .pk-play as a card arrives. Prices never animate. ======== */
@property --pk-s1 { syntax: "<color>"; inherits: false; initial-value: rgba(168, 217, 252, .16); }
@property --pk-s2 { syntax: "<color>"; inherits: false; initial-value: rgba(168, 217, 252, .16); }
@property --pk-s3 { syntax: "<color>"; inherits: false; initial-value: rgba(168, 217, 252, .16); }

@media screen {
  /* ---- Heading C: the accent word in a cyan glow ---- */
  .celestial-pricing h2 span {
    padding-inline-end: .06em;
    font-style: italic;
    background: linear-gradient(90deg, #7bdef7, #e3f7ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 16px rgba(123, 222, 247, .35));
  }
  html[lang="ar"] .celestial-pricing h2 span { padding-inline-end: 0; font-style: normal; }

  /* ---- Price C: a big glowing number; the currency sits small beside it ---- */
  .celestial-pricing .pricing-tier strong {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 52px;
    font-weight: 650;
    letter-spacing: -1.8px;
    color: #edf8ff;
    text-shadow: none;
    filter: drop-shadow(0 0 22px rgba(123, 222, 247, .3));
  }
  /* The glow fill sits on the number alone, so the unseen currency words can never show through it. */
  .celestial-pricing .pricing-amount {
    background: linear-gradient(180deg, #fff 25%, #9fe3ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .celestial-pricing .pricing-currency {
    align-self: flex-start;
    margin-top: 11px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.4px;
    color: #9fc3dc;
    -webkit-text-fill-color: #9fc3dc;
  }
  html[lang="ar"] .celestial-pricing .pricing-currency { margin-top: 8px; font-size: 16px; letter-spacing: 0; }
  /* The same price in dollars, small, under the riyal price (the charge is always in riyals). */
  .celestial-pricing .pricing-usd { display: block; margin: -6px 0 10px; font-size: 12px; letter-spacing: .04em; color: #9fc3dc; opacity: .85; unicode-bidi: isolate; }
  html[lang="ar"] .celestial-pricing .pricing-usd { text-align: end; }
  /* Both pages keep the same element order (currency, then number). SAMA puts the sign to the left of the
     number in Arabic too, so the Arabic price is laid out left to right and kept at the card's right edge. */
  html[lang="ar"] .celestial-pricing .pricing-tier strong { direction: ltr; justify-content: flex-end; }
  /* The official Saudi riyal sign (SAMA, U+20C1) drawn from its artwork, because fonts do not carry it yet.
     SAMA's rule: the sign always sits to the LEFT of the number, in Arabic and English, with a space.
     The markup already does that in both directions. The words "SAR" / "ر.س" stay in the page, unseen,
     for screen readers, copying and search; forced-colours mode shows the words instead. */
  @supports (mask: url("#m")) or (-webkit-mask: url("#m")) {
    .celestial-pricing .pricing-tier strong .pricing-currency {
      flex: none;
      inline-size: .47em;
      block-size: .52em;
      margin-top: .19em;
      overflow: hidden;
      font-size: inherit;
      white-space: nowrap;
      text-indent: 120%;
      color: transparent;
      -webkit-text-fill-color: transparent;
      background: #b5d6ea;
      -webkit-mask: url("/assets/currency/saudi-riyal.svg") center / contain no-repeat;
      mask: url("/assets/currency/saudi-riyal.svg") center / contain no-repeat;
    }
  }
  @media (forced-colors: active) {
    .celestial-pricing .pricing-tier strong .pricing-currency { inline-size: auto; block-size: auto; text-indent: 0; font-size: 14px; color: CanvasText; -webkit-text-fill-color: CanvasText; -webkit-mask: none; mask: none; background: none; }
  }
  @media (min-width: 900px) and (max-width: 1100px) { .celestial-pricing .pricing-tier strong { font-size: 46px; } }
  @media (max-width: 700px) { .celestial-pricing .pricing-tier strong { font-size: 46px; } }

  /* ---- Depth meter B: 1, 2 or 3 lit bars beside each tier's name ---- */
  .celestial-pricing .pricing-tier-name::after {
    content: "";
    flex: none;
    inline-size: 46px;
    block-size: 6px;
    margin-inline-start: auto;
    border-radius: 3px;
    --pk-off: rgba(168, 217, 252, .16);
    --pk-on: #7bdef7;
    --pk-l1: var(--pk-on);
    --pk-l2: var(--pk-off);
    --pk-l3: var(--pk-off);
    --pk-s1: var(--pk-l1);
    --pk-s2: var(--pk-l2);
    --pk-s3: var(--pk-l3);
    background:
      linear-gradient(var(--pk-s1) 0 0) 0 0 / 14px 100% no-repeat,
      linear-gradient(var(--pk-s2) 0 0) 16px 0 / 14px 100% no-repeat,
      linear-gradient(var(--pk-s3) 0 0) 32px 0 / 14px 100% no-repeat;
    filter: drop-shadow(0 0 5px rgba(123, 222, 247, .4));
  }
  .celestial-pricing .pricing-tier:nth-child(n + 2) .pricing-tier-name::after { --pk-l2: var(--pk-on); }
  .celestial-pricing .pricing-tier:nth-child(n + 3) .pricing-tier-name::after { --pk-l3: var(--pk-on); }
  html[lang="ar"] .celestial-pricing .pricing-tier-name::after { transform: scaleX(-1); }

  /* ---- Featured card B: a soft cyan glow under it and a line of light along its top edge ---- */
  .celestial-pricing .pricing-tier.is-featured { box-shadow: 0 28px 70px -22px rgba(123, 222, 247, .4), 0 0 0 1px rgba(155, 214, 255, .38); }
  .celestial-pricing .is-featured .pricing-tier-body { background: radial-gradient(ellipse at 50% -12%, rgba(123, 222, 247, .18), transparent 58%), #102740bf; }
  .celestial-pricing .is-featured .pricing-tier-body::before {
    content: "";
    position: absolute;
    top: -1px;
    inset-inline: 14%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #c8f2ff, transparent);
    box-shadow: 0 0 14px 1px rgba(123, 222, 247, .55);
    pointer-events: none;
  }

  /* ---- Check marks B: soft cyan (duotone); what a tier leaves out stays quiet ---- */
  .celestial-pricing .pricing-feature-icon { width: 22px; height: 22px; border-color: rgba(123, 222, 247, .6); background: rgba(123, 222, 247, .2); color: #7bdef7; }
  .celestial-pricing .pricing-feature-icon::before { width: 8px; height: 4.5px; border-width: 0 0 1.7px 1.7px; }
  html[lang="ar"] .celestial-pricing .pricing-feature-icon::before { border-left-width: 1.7px; }
  .celestial-pricing .is-featured .pricing-feature-icon { background: rgba(123, 222, 247, .3); box-shadow: 0 0 12px rgba(123, 222, 247, .25); }
  .celestial-pricing .is-excluded .pricing-feature-icon { border-color: rgba(168, 217, 252, .18); background: transparent; box-shadow: none; color: #6f879b; }
  .celestial-pricing .pricing-features .is-excluded { color: #8196a9; }
}

@media screen and (prefers-reduced-motion: no-preference) {
  /* a. As a card arrives, its five rows slide in one by one and the marks pop. */
  .celestial-pricing .pk-play .pricing-features li { animation: pk-row .5s cubic-bezier(.2, .7, .2, 1) backwards; }
  .celestial-pricing .pk-play .pricing-feature-icon { animation: pk-pop .5s cubic-bezier(.3, 1.6, .5, 1) backwards; }
  .celestial-pricing .pk-play .pricing-features li:nth-child(1), .celestial-pricing .pk-play li:nth-child(1) .pricing-feature-icon { animation-delay: .45s; }
  .celestial-pricing .pk-play .pricing-features li:nth-child(2), .celestial-pricing .pk-play li:nth-child(2) .pricing-feature-icon { animation-delay: .53s; }
  .celestial-pricing .pk-play .pricing-features li:nth-child(3), .celestial-pricing .pk-play li:nth-child(3) .pricing-feature-icon { animation-delay: .61s; }
  .celestial-pricing .pk-play .pricing-features li:nth-child(4), .celestial-pricing .pk-play li:nth-child(4) .pricing-feature-icon { animation-delay: .69s; }
  .celestial-pricing .pk-play .pricing-features li:nth-child(5), .celestial-pricing .pk-play li:nth-child(5) .pricing-feature-icon { animation-delay: .77s; }
  @keyframes pk-row { from { opacity: 0; transform: translateY(10px); } }
  @keyframes pk-pop { from { opacity: 0; transform: scale(.4); } }

  /* b. The depth meter lights up step by step. */
  .celestial-pricing .pk-play .pricing-tier-name::after { animation: pk-meter 1.1s ease-out .35s backwards; }
  @keyframes pk-meter {
    0% { --pk-s1: var(--pk-off); --pk-s2: var(--pk-off); --pk-s3: var(--pk-off); }
    33% { --pk-s1: var(--pk-l1); --pk-s2: var(--pk-off); --pk-s3: var(--pk-off); }
    66% { --pk-s1: var(--pk-l1); --pk-s2: var(--pk-l2); --pk-s3: var(--pk-off); }
    100% { --pk-s1: var(--pk-l1); --pk-s2: var(--pk-l2); --pk-s3: var(--pk-l3); }
  }

  /* c. A light passes over the "The full picture" badge every few seconds. */
  .celestial-pricing .pricing-badge { overflow: hidden; }
  .celestial-pricing .pricing-badge::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .75) 50%, transparent 65%);
    transform: translateX(-120%);
    pointer-events: none;
    animation: pk-sheen 4.5s ease-in-out 1s infinite;
  }
  @keyframes pk-sheen { 0% { transform: translateX(-120%); } 30%, 100% { transform: translateX(120%); } }

  /* d. A light sweeps across the main button when its card arrives and when it is pointed at. */
  .celestial-pricing .is-featured .pricing-cta { position: relative; }
  .celestial-pricing .is-featured .pricing-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%);
    transform: translateX(-120%);
    pointer-events: none;
  }
  .celestial-pricing .is-featured.pk-play .pricing-cta::after { animation: pk-sweep .9s ease-in-out 1.1s; }
  .celestial-pricing .is-featured .pricing-cta:hover::after { animation: pk-sweep .8s ease-in-out; }
  @keyframes pk-sweep { to { transform: translateX(120%); } }

  /* The section's Pause button stops all of it; off screen the loop waits. */
  .celestial-pricing.stars-paused .pricing-tier :is(.pricing-badge, .pricing-cta)::after,
  .celestial-pricing.stars-paused .pk-play .pricing-tier-name::after,
  .celestial-pricing.stars-paused .pk-play :is(.pricing-features li, .pricing-feature-icon) { animation: none; }
  .celestial-pricing.pricing-idle .pricing-badge::after { animation-play-state: paused; }
}

/* e. The card under the pointer lifts and tilts toward it (polish.js sets --pk-rx/--pk-ry). Mouse and pen only. */
@media screen and (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .celestial-pricing:not(.stars-paused) .pricing-tier {
    transform: perspective(1200px) rotateX(var(--pk-rx, 0deg)) rotateY(var(--pk-ry, 0deg));
    transition: transform .35s ease, translate .35s ease, box-shadow .25s, border-color .25s;
  }
  .celestial-pricing:not(.stars-paused) .pricing-tier:hover { translate: 0 -8px; }
}