/* ===========================================================================
   THE BODY — Packages page components (Figma 285:2 "Packages fin",
   1440 x 9842). Also loads treat-ui.css for the shared rings/buttons.
   Per-element geometry generated into packages.css by build_packages.py.
   =========================================================================== */

.hero--pack { --hero-h: 898; }
.hero-banner--pack {
  position: absolute;
  left: calc(23 * var(--u)); right: calc(17 * var(--u));
  top: calc(26 * var(--u)); bottom: 0;
  border-radius: calc(30 * var(--u)); overflow: hidden; background: #d8d4c4;
}
.hero-banner--pack > img { width: 100%; height: 100%; object-fit: cover; }
.btn-paper { background: var(--paper); }
/* Figma: outline only. Over the pale blanket in the hero photo the cream label all but
   vanished (Arina 2026-10-21), so it gets a soft dark frosted fill behind the outline. */
.btn-line-paper {
  border: 1px solid rgba(246, 241, 231, .85);
  background: rgba(28, 23, 19, .38);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  text-shadow: 0 1px 2px rgba(20, 16, 12, .35);
}
.mono  { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 400; }
.monom { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 500; }

.ring44--fill  { background: var(--paper); }
.ring44--stone { border-color: #c7c0ae; }
.line-stone { background: #c7c0ae; height: 1px; }
.line-sage  { background: #a9b5a6; height: 1px; }
.line-mint  { background: #c7d3c4; height: 1px; }
.line-oat   { background: #c7c2b2; height: 1px; }

.tier { border: 1px solid #c7d3c4; border-radius: calc(24 * var(--u)); background: var(--paper); }
.tier--on { border: 1.5px solid var(--clay); }
/* 5 / 10 session cards: hover swaps the quiet look for the clay one (js/tiers.js) */
.tier[data-tier] { transition: border-color .35s ease, box-shadow .45s ease; }
.tier[data-tier].tier--on { box-shadow: 0 22px 48px -30px rgba(40, 33, 27, .45); }
p[data-tier-lab] { transition: color .3s ease; }
.btn[data-tier] { transition: background-color .3s ease, color .3s ease, border-color .3s ease; }

/* ---------------- membership card (component 464:232) ----------------
   Selecting an option crossfades the card background (520ms,
   cubic-bezier(.32,.72,0,1), outgoing 1 -> 1.025, incoming 1.025 -> 1);
   blurb and direction label swap at the 260ms midpoint (js/membership.js).
   $109 / month is identical in every variant and never moves. */
.mcard {
  position: absolute; width: calc(560 * var(--u)); height: calc(400 * var(--u));
  border-radius: calc(24 * var(--u)); overflow: hidden; background: var(--ink);
}
.mcard-bg {
  position: absolute; inset: 0; overflow: hidden;
  opacity: 0; transform: scale(1.025);
  transition: opacity 520ms cubic-bezier(.32,.72,0,1), transform 520ms cubic-bezier(.32,.72,0,1);
}
.mcard-bg.is-on { opacity: 1; transform: scale(1); }
.mcard-bg.is-out { opacity: 0; transform: scale(1.025); }
.mcard-bg > img { position: absolute; left: var(--il, 0); top: var(--it, 0); width: var(--iw, 100%); height: var(--ih, 100%); max-width: none; }
.mcard-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(28,23,19,.35) 0%, rgba(28,23,19,0) 60%),
              linear-gradient(180deg, rgba(28,23,19,.55) 0%, rgba(28,23,19,.12) 38%, rgba(28,23,19,.25) 62%, rgba(28,23,19,.82) 100%);
}
.mcard .a { z-index: 1; }
.swap > [data-opt] { display: none; }
.swap > [data-opt].is-on { display: block; }
.blurb-box { overflow-x: visible; overflow-y: clip; }   /* Figma's blurb frame is 60px tall: two lines, a third line is clipped (flagged) */
.opt {
  position: absolute; display: flex; align-items: center; justify-content: center;
  height: calc(48 * var(--u)); border-radius: 999px; white-space: nowrap; cursor: pointer;
  background: #f6f5ec; border: 1px solid var(--hair); color: var(--ink);
  font-family: var(--hk); font-weight: 400; padding: 0;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.opt[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.opt:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .mcard-bg, .opt { transition: none !important; }
}