/* ===========================================================================
   MEDYRA — Treatment packages

   Additive only. Loaded after site.css, every selector namespaced .pk-, so it
   cannot collide with a production component and nothing in the site
   stylesheet is overridden.

   Built from the project's own tokens: the navy scale, ivory grounds, the
   gold pair, Fraunces for display, IBM Plex for body, and the --sp / --fs /
   --r / --e / --dur scales. No new font, no new radius vocabulary.
   =========================================================================== */

.pk { overflow: clip; }

/* -- intro: the promise, and the one number every tier shares -------------- */
.pk-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  margin-block-end: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
}
.pk-intro-copy { min-inline-size: 0; }
.pk-intro .lead { max-width: 60ch; }

/* Sixty days is true of all three, so it is stated once, large, rather than
   repeated as a badge on each card. */
.pk-duration {
  flex: none;
  display: flex; align-items: center; gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: 0 6px 18px rgba(6, 13, 28, .06);
}
.pk-duration-n {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.7rem + 1.6vw, 3rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--navy-800);
}
.pk-duration-l {
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--ink-3);
}

/* -- the three tiers ------------------------------------------------------- */
/* Cards size to their own content rather than stretching to the tallest.
   Equal heights would pin each CTA to the bottom and leave Essential with a
   dead band where Premium's extra qualifiers sit — the shorter card is the
   honest signal that the package includes less, not a gap to be filled. */
.pk-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, .7rem + 1.2vw, 1.5rem);
  align-items: start;
}

/* ---------------------------------------------------------------------------
   TIER IDENTITY

   Three packages, one system, three clearly different cards. Each tier owns a
   small set of variables -- its ground, its edge, its top bar, its accent --
   and every rule below consumes them, so the identity and the hover system are
   one mechanism rather than two that have to be kept in step.

   The ladder reads as temperature and depth, not as three arbitrary colours:

     ESSENTIAL  cool.  A navy-tinted ground fading to white, a navy edge and a
                solid navy top bar. Quiet, clear, nothing to prove.
     COMFORT    warm.  A gold-soft cream ground, a gold edge and a gold top
                bar. The only warm card, which is what makes it the middle
                step even before the badge is read.
     PREMIUM    deep.  The page's own dark navy with a gold glow and a gold
                hairline. The flagship, and the only card that is dark.

   On a phone the three stack and the identity does the separating: cool, warm
   and dark cannot read as one continuous white block, and the heavier top bar
   marks where each begins.
   --------------------------------------------------------------------------- */
.pk-card {
  /* Essential */
  --pk-ring: 26, 49, 96;
  --pk-top-w: 4px;
  --pk-top: var(--navy-700);
  --pk-edge: var(--navy-200);
  --pk-edge-hi: rgba(26, 49, 96, .5);
  --pk-base: #fff;
  /* Cool at the head, white below. Holding the tint all the way down would
     bring this card's body to the section ground's own colour and let it
     dissolve into the page -- the failure this redesign exists to fix -- so
     here the identity lives in the head tint, the navy bar and edge, and the
     navy accents instead. */
  --pk-ground: linear-gradient(180deg, var(--navy-100) 0%, var(--navy-50) 24%, #fff 60%);
  --pk-shadow: 0 12px 30px rgba(26, 49, 96, .14);
  --pk-accent: var(--navy-600);
  --pk-accent-hi: var(--navy-800);
  --pk-strong: var(--navy-700);
  --pk-price-bg: rgba(26, 49, 96, .05);
  --pk-price-hi: rgba(26, 49, 96, .11);
  --pk-rule: var(--navy-100);
  --pk-btn-bd: var(--navy-200);
  --pk-pad: clamp(1.25rem, 1rem + 1.2vw, 1.85rem);

  position: relative;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  padding: var(--pk-pad);
  /* The top bar is a thick border so it follows the card's radius. It is
     taken out of the top padding so the content starts at the same height on
     every card whatever its bar weighs. */
  padding-block-start: calc(var(--pk-pad) - var(--pk-top-w) + 1px);
  background-color: var(--pk-base);
  background-image: var(--pk-ground);
  border: 1px solid var(--pk-edge);
  border-block-start: var(--pk-top-w) solid var(--pk-top);
  border-radius: var(--r-lg);
  box-shadow: var(--pk-shadow);
  transition: transform 260ms var(--ease-out),
              box-shadow 260ms var(--ease-out),
              border-color 260ms var(--ease-out);
}

.pk-card.is-popular {
  --pk-ring: 176, 141, 45;
  --pk-top: var(--gold-lite);
  --pk-edge: rgba(176, 141, 45, .5);
  --pk-edge-hi: rgba(176, 141, 45, .85);
  /* Warm all the way down, not just at the head. Fading to white left the
     lower half -- which on a phone is most of the card -- identical to
     Essential's (colour distance 0.7); holding the cream makes the whole card
     read as the warm one. It is lightest at the very top because the rank
     sits there in gold, and gold on the full-strength cream was 4.29:1, under
     AA for text that small. */
  --pk-ground: linear-gradient(180deg, rgba(243, 230, 196, .70) 0%,
                                       rgba(243, 230, 196, .58) 36%,
                                       rgba(243, 230, 196, .50) 100%);
  --pk-shadow: 0 16px 38px rgba(140, 101, 24, .22);
  --pk-accent: var(--gold);
  --pk-accent-hi: var(--gold);
  --pk-strong: var(--gold);
  --pk-price-bg: rgba(212, 175, 55, .12);
  --pk-price-hi: rgba(176, 141, 45, .22);
  --pk-rule: rgba(176, 141, 45, .32);
  --pk-btn-bd: rgba(176, 141, 45, .7);
}

.pk-card.is-featured {
  --pk-ring: 212, 175, 55;
  --pk-top-w: 1px;
  --pk-top: rgba(212, 175, 55, .5);
  --pk-edge: rgba(212, 175, 55, .5);
  --pk-edge-hi: rgba(212, 175, 55, .85);
  --pk-base: var(--navy-900);
  --pk-ground: radial-gradient(120% 52% at 100% 0%, rgba(212, 175, 55, .22), transparent 62%),
               linear-gradient(168deg, var(--navy-800) 0%, var(--navy-900) 46%, var(--navy-950) 100%);
  --pk-shadow: 0 24px 56px rgba(6, 13, 28, .36), 0 0 0 1px rgba(212, 175, 55, .1);
  --pk-accent: var(--gold-lite);
  --pk-accent-hi: var(--gold-soft);
  --pk-strong: var(--gold-lite);
  --pk-price-bg: rgba(255, 255, 255, .04);
  --pk-price-hi: rgba(212, 175, 55, .14);
  --pk-rule: rgba(255, 255, 255, .16);
  color: var(--on-dark);
}

/* The cursor highlight. Clipped to the card by inset + inherited radius, and
   it never takes the pointer, so it cannot interfere with a click or a
   scroll. Resting position is top-centre, which is where the eye enters. */
.pk-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms var(--ease-out);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%),
              rgba(var(--pk-ring), .10), rgba(var(--pk-ring), .04) 38%, transparent 68%);
}
.pk-card.is-featured::after {
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 0%),
              rgba(var(--pk-ring), .16), rgba(var(--pk-ring), .05) 40%, transparent 70%);
}

/* Premium's own gold rule above its name -- the pair the hero and the
   Concierge callout use. */
.pk-card.is-featured::before {
  content: "";
  display: block;
  inline-size: 46px; block-size: 2px;
  background: var(--gold-lite);
  margin-block-end: var(--sp-4);
}

/* -- "Most popular" ------------------------------------------------------- */
.pk-badge {
  position: absolute;
  /* Measured from the padding edge, so it follows the top bar's weight and
     the badge sits where it always did on the card's outer edge. */
  inset-block-start: calc(-13px - var(--pk-top-w) + 1px);
  inset-inline-end: clamp(1rem, .8rem + 1vw, 1.6rem);
  margin: 0;
  z-index: 2;
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}
.pk-badge span {
  display: inline-flex; align-items: center;
  min-block-size: 26px;
  padding-inline: var(--sp-4);
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--gold-lite), var(--gold));
  color: var(--navy-950);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(176, 141, 45, .32);
  transition: box-shadow 260ms var(--ease-out);
}

/* -- the head -------------------------------------------------------------- */
.pk-head { margin-block-end: var(--sp-5); }
.pk-rank {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--pk-accent);
}

.pk-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.45rem, 1.25rem + .9vw, 1.95rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--ink);
}
.pk-card.is-featured .pk-name { color: #fff; }

.pk-stance {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.45;
  color: var(--navy-700);
}
.pk-card.is-featured .pk-stance { color: var(--gold-lite); }

.pk-blurb {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-2);
}
.pk-card.is-featured .pk-blurb { color: var(--on-dark-mute); }

/* -- the number, given its own weight ------------------------------------- */
/* The tint band and its inset are set here, not on :hover, so lighting the
   price up changes a colour and nothing about the layout. At rest it already
   carries the tier's own tint, so the number is the card's centre of gravity
   before anyone moves a cursor. */
.pk-price {
  margin: 0 calc(var(--sp-3) * -1) var(--sp-5);
  padding: var(--sp-4) var(--sp-3);
  border-block: 1px solid var(--pk-rule);
  border-radius: var(--r-sm);
  display: grid;
  gap: 4px;
  background-color: var(--pk-price-bg);
  transition: background-color 260ms var(--ease-out), border-color 260ms var(--ease-out);
}
.pk-price-v, .pk-name { transition: color 260ms var(--ease-out); }
.pk-price-v {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem);
  line-height: 1.2;
  color: var(--ink);
}
.pk-card.is-featured .pk-price-v { color: #fff; }
.pk-plus { color: var(--gold); font-style: normal; padding-inline: 2px; }
.pk-card.is-featured .pk-plus { color: var(--gold-lite); }
.pk-price-s {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-3);
}
.pk-card.is-featured .pk-price-s { color: var(--on-dark-mute); }

/* -- what is and is not in it --------------------------------------------- */
.pk-body { flex: 1 1 auto; }

.pk-group {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pk-group + .pk-list { margin-block-end: var(--sp-5); }
.pk-card.is-featured .pk-group { color: rgba(231, 237, 247, .55); }

.pk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }

/* Each line is its own small target: the inset and radius are always there,
   only the background changes, so a row lights up without nudging its
   neighbours. Excluded lines deliberately do not respond — there is nothing
   to inspect in something a package does not cover. */
.pk-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  padding: 3px var(--sp-2);
  margin-inline: calc(var(--sp-2) * -1);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  line-height: 1.45;
  background-color: transparent;
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.pk-row-t { min-inline-size: 0; }

/* Included reads in the page's ink; excluded steps back rather than shouting
   in red — this is a list of what a package covers, not a list of failures. */
.pk-row.is-in { color: var(--ink); }
.pk-row.is-out { color: var(--ink-3); }
.pk-card.is-featured .pk-row.is-in { color: var(--on-dark); }
.pk-card.is-featured .pk-row.is-out { color: rgba(231, 237, 247, .38); }

.pk-mark {
  flex: none;
  margin-block-start: 3px;
  transform-origin: center;
  transition: transform 260ms var(--ease-out), color 260ms var(--ease-out);
}
/* The ticks carry the tier's accent, so counting what is included is also
   reading which package you are in. */
.pk-mark--in { color: var(--pk-accent); }
.pk-mark--out { color: var(--ink-3); opacity: .55; }
.pk-card.is-featured .pk-mark--out { color: rgba(231, 237, 247, .32); }

/* The qualifier that turns "hotel" into a decision: how much, how often. */
.pk-note {
  display: block;
  margin-block-start: 2px;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--ink-3);
}
.pk-card.is-featured .pk-note { color: var(--on-dark-mute); }
.pk-note--strong {
  font-weight: 600;
  color: var(--pk-strong);
}

/* The button carries its tier at rest too: a navy edge on Essential, a gold
   one on Comfort, the gold fill on Premium. */
.pk-go {
  margin-block-start: var(--sp-5);
  justify-content: center;
  transition: background-color 260ms var(--ease-out), border-color 260ms var(--ease-out),
              color 260ms var(--ease-out), box-shadow 260ms var(--ease-out),
              transform 260ms var(--ease-out);
}
.pk-go.btn--ghost { --btn-bd: var(--pk-btn-bd); }

/* -- the clarification, said once ----------------------------------------- */
.pk-foot {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  margin: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem) 0 0;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 78ch;
}
.pk-foot svg { color: var(--navy-500); margin-block-start: 2px; }


/* ---------------------------------------------------------------------------
   HOVER -- POINTER DEVICES ONLY

   Every rule that reacts to :hover lives inside this one gate. The earlier
   arrangement left the hover rules ungated and tried to undo them in a touch
   block, which lost: the hover rules were written as `#packages .pk-card:hover`
   and an id outranks the touch overrides' classes. On a phone a tap leaves
   :hover stuck, and a stuck :hover then lifted the card, dimmed the other two
   to .62 and tinted the price band -- measured by forcing :hover under touch
   emulation. Gating the rules removes the problem at the source: on a touch
   device they do not exist.
   --------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {

  /* Layered depth rather than one drop shadow: a tight contact shadow, a wide
     soft one, and a hairline ring in the tier's own colour. */
  #packages .pk-card:hover {
    transform: translateY(-6px);
    border-color: var(--pk-edge-hi);
    border-block-start-color: var(--pk-top);
    box-shadow: 0 2px 6px rgba(6, 13, 28, .06),
                0 22px 48px rgba(6, 13, 28, .16),
                0 0 0 4px rgba(var(--pk-ring), .08);
  }
  .pk-card:hover::after { opacity: 1; }
  #packages .pk-card.is-featured:hover {
    box-shadow: 0 2px 8px rgba(6, 13, 28, .18),
                0 28px 60px rgba(6, 13, 28, .38),
                0 0 0 4px rgba(var(--pk-ring), .16);
  }

  /* The other two step back rather than switch off — still readable, plainly
     not the one being considered. */
  @supports selector(:has(*)) {
    #packages .pk-grid:has(.pk-card:hover) .pk-card:not(:hover) {
      opacity: .62;
      transform: translateY(2px);
    }
    .pk-grid .pk-card { transition: transform 260ms var(--ease-out),
                                    box-shadow 260ms var(--ease-out),
                                    border-color 260ms var(--ease-out),
                                    opacity 260ms var(--ease-out); }
  }

  #packages .pk-card.is-popular:hover .pk-badge { transform: translateY(-3px); }
  #packages .pk-card.is-popular:hover .pk-badge span {
    box-shadow: 0 10px 24px rgba(176, 141, 45, .45);
  }

  /* Each tier has its own hover tint because the resting tints are not the
     same strength: a single shared value made Comfort's band fainter on hover
     than at rest. */
  #packages .pk-card:hover .pk-price {
    background-color: var(--pk-price-hi);
    border-color: rgba(var(--pk-ring), .4);
  }
  .pk-card:hover .pk-name,
  .pk-card:hover .pk-price-v { color: var(--navy-900); }
  .pk-card.is-featured:hover .pk-name,
  .pk-card.is-featured:hover .pk-price-v { color: #fff; }

  .pk-card:hover .pk-row.is-in:hover { background-color: rgba(var(--pk-ring), .08); }
  .pk-card.is-featured:hover .pk-row.is-in:hover { background-color: rgba(255, 255, 255, .07); }

  /* The ticks are what the reader is counting, so they are what strengthens. */
  .pk-card:hover .pk-mark--in { transform: scale(1.14); color: var(--pk-accent-hi); }

  /* The CTA answers the card, not just its own hover: move the cursor anywhere
     over a package and its button is already awake by the time you reach it.
     site.css already nudges .btn-arrow 3px and handles RTL, so this only adds
     the fill and the lift. */
  #packages .pk-card:hover .pk-go {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(var(--pk-ring), .22);
  }
  #packages .pk-card:hover .pk-go.btn--ghost {
    background: var(--navy-900);
    border-color: var(--navy-900);
    color: #fff;
  }
  /* Same navy fill as Essential, with the gold edge that is Comfort's
     signature everywhere else in the card. */
  #packages .pk-card.is-popular:hover .pk-go.btn--ghost {
    background: var(--navy-900);
    border-color: var(--gold);
    color: #fff;
  }
  .pk-card:hover .pk-go .btn-arrow { transform: translateX(3px); }
  [dir="rtl"] .pk-card:hover .pk-go .btn-arrow { transform: translateX(-3px); }
}


/* ---------------------------------------------------------------------------
   RESPONSIVE

   Three columns hold to 64rem. Below that the comparison stops working
   sideways, so the cards stack and each one is read whole — which is why
   every tier carries the full eleven lines rather than a matrix that would
   have to be pulled apart here.
   --------------------------------------------------------------------------- */
@media (max-width: 75rem) {
  .pk-grid { gap: var(--sp-4); }
  .pk-card { --pk-pad: clamp(1.1rem, .9rem + 1vw, 1.5rem); }
}

@media (max-width: 64rem) {
  .pk-intro { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .pk-duration { justify-self: start; }
  /* A wider gutter than the desktop's: stacked, the space between two cards is
     what tells you one package has ended, so it is given more room than the
     side-by-side layout needs. */
  .pk-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .pk-card { max-inline-size: 38rem; }
  /* No reordering once stacked. Floating Premium to the top put the ranks in
     the order 03, 01, 02, which reads as a bug; letting them run 01 → 02 → 03
     also lets the offer escalate as you scroll, which is the better story. */
}

@media (max-width: 40rem) {
  .pk-card { --pk-pad: var(--sp-5); max-inline-size: none; }
  .pk-duration { padding: var(--sp-3) var(--sp-4); }
  .pk-price { margin-block-end: var(--sp-4); }
  .pk-row { font-size: var(--fs-xs); }
  .pk-foot { padding: var(--sp-4); }
}

/* ---------------------------------------------------------------------------
   TOUCH

   The hover system is not switched off here; it is simply never switched on
   (see the gate above). All that is left to do is not paint the cursor
   highlight, which a phone has no cursor to feed.
   --------------------------------------------------------------------------- */
@media (hover: none), (pointer: coarse) {
  .pk-card::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #packages .pk-card, #packages .pk-card::after, #packages .pk-row, .pk-mark, .pk-go, .pk-badge,
  .pk-badge span, .pk-price, .pk-name, .pk-price-v { transition: none; }
  #packages .pk-card:hover { transform: none; }
  .pk-card:hover .pk-mark--in { transform: none; }
  #packages .pk-card:hover .pk-go { transform: none; }
  #packages .pk-card.is-popular:hover .pk-badge { transform: none; }
  #packages .pk-grid:has(.pk-card:hover) .pk-card:not(:hover) { transform: none; }
}