/* Luckycharms — landing page
   Aesthetic Purple & Celestial Gold Palette: deep amethyst, velvet midnight violet,
   soft lavender mist surfaces, and radiant golden touches. */

:root {
  --purple-950: #0c0818;
  --purple-900: #140d28;
  --purple-850: #1c1138;
  --purple-800: #28164d;
  --purple-700: #46227d;
  --purple-600: #6b35b8;
  --purple-500: #884ded;
  --purple-400: #ab79f7;
  --purple-300: #ccaafc;
  --purple-200: #dfc8fd;
  --purple-100: #efe4fe;

  --ink-950: var(--purple-950);
  --ink-900: var(--purple-900);
  --ink-800: var(--purple-800);
  --teal-900: #231242;
  --teal-700: #6b35b8;
  --teal-300: #b592ea;
  --cream: #f6f0fd;
  --cream-100: #fdfaff;
  --cream-200: #ece1f9;
  --sand: #dac8f3;
  --gold: #f5c85b;
  --gold-deep: #c4953e;
  --blue: #9d68f7;
  --muted: #564472;
  --muted-2: #7a6698;
  --on-dark: #fbf9ff;
  --on-dark-dim: #c7b5e8;

  --measure: 62ch;
  --wrap: 1140px;
  --radius: 14px;
  --radius-lg: 22px;

  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;

  --ease: cubic-bezier(0.22, 0.68, 0.31, 1);
}

* { box-sizing: border-box; }

/* The `hidden` attribute has to actually hide things.
   Browsers express it as `[hidden] { display: none }` in the user-agent stylesheet, and any
   author rule that sets `display` outranks the whole user-agent origin — so `.button` declaring
   `display: inline-flex` left `<a class="button" hidden>` on screen. That is how a dead download
   button came to be painted on the thanks page next to a failure message. `!important` because
   the point of the rule is to beat a component's own `display`, whatever it turns out to be. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  color: var(--teal-900);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0 0 0.55em;
}

h1 { font-size: clamp(2.6rem, 6.2vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.85rem); }
h3 { font-size: 1.16rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 1.1em; max-width: var(--measure); }

a { color: inherit; }

code, pre { font-family: var(--mono); font-size: 0.86em; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 44px);
}

/* Moved out of view with a transform rather than a negative offset: a far-left
   position extends the scrollable area and gives the page a horizontal scrollbar. */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  transform: translateY(-260%);
  background: var(--gold);
  color: var(--ink-950);
  padding: 10px 16px;
  border-radius: 6px;
  text-decoration: none;
  z-index: 200;
  transition: transform 0.16s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* ── The charm that hangs over the page ─────────────────────────────────────── */

.dangle {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 340px;
  z-index: 60;
  pointer-events: none;   /* everything except the charm stays clickable */
}

.dangle-hit {
  position: fixed;
  z-index: 61;
  cursor: grab;
  touch-action: none;
  border-radius: 40px;
}
.dangle-hit:active { cursor: grabbing; }
.dangle-hit:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

/* ── Header ─────────────────────────────────────────────────────────────────── */

.site-header {
  position: relative;
  z-index: 20;
  background: var(--ink-950);
  color: var(--on-dark);
  border-bottom: 1px solid rgba(136, 77, 237, 0.18);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 22px clamp(20px, 5vw, 44px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--serif);
  font-size: 1.18rem;
  text-decoration: none;
  letter-spacing: 0.01em;
}

.site-nav { display: flex; gap: 26px; font-size: 0.94rem; }
.site-nav a {
  color: var(--on-dark-dim);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.site-nav a:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* ── Hero ───────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  background: radial-gradient(120% 90% at 72% -10%, #3e1b78 0%, #1c0e38 52%, var(--ink-950) 100%);
  color: var(--on-dark);
  padding: clamp(52px, 9vw, 104px) 0 clamp(80px, 12vw, 140px);
  overflow: hidden;
}

.dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.75;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 44px);
}

.eyebrow {
  font-size: 0.79rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.4em;
}

.hero h1 { max-width: 15ch; }

.lede {
  font-size: clamp(1.06rem, 1.6vw, 1.2rem);
  color: var(--on-dark-dim);
  max-width: 52ch;
  margin-bottom: 2em;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.hint {
  margin-top: 2.4em;
  font-size: 0.9rem;
  color: var(--on-dark-dim);
}
.hint span { color: var(--gold); }

/* ── Buttons ────────────────────────────────────────────────────────────────── */

.button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--ease), background-color 0.2s var(--ease),
              border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }

.primary {
  background: var(--gold);
  color: #2a1d05;
  box-shadow: 0 10px 26px -12px rgba(238, 187, 62, 0.85);
}
.primary:hover { background: #f4c95d; box-shadow: 0 16px 34px -14px rgba(238, 187, 62, 0.95); }

.ghost {
  background: transparent;
  border-color: rgba(238, 187, 62, 0.45);
  color: var(--gold);
}
.ghost:hover { border-color: var(--gold); background: rgba(238, 187, 62, 0.09); }

.button-note {
  font-weight: 400;
  font-size: 0.74rem;
  opacity: 0.72;
  letter-spacing: 0.02em;
}

.large { padding: 18px 38px; font-size: 1.08rem; }
.small { padding: 9px 18px; font-size: 0.86rem; }

.link-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--teal-700);
  text-decoration: underline;
  cursor: pointer;
}

/* ── Section shells ─────────────────────────────────────────────────────────── */

section { padding: clamp(64px, 9vw, 112px) 0; }

.section-head { margin-bottom: clamp(34px, 5vw, 56px); max-width: 60ch; }
.section-head p { color: var(--muted); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 68px);
  align-items: center;
}
.split-copy { min-width: 0; }

.aside { color: var(--muted); font-size: 0.95rem; }

/* The "what this policy covers" line on the legal pages. It answers a different question from
   the prose under it — which product, not which practice — so it is set apart rather than read
   as the first paragraph of the body. */
.legal-scope {
  margin: 0 0 1.6em;
  padding: 14px 18px;
  border-left: 3px solid var(--purple-300);
  border-radius: 0 8px 8px 0;
  background: #fdfaff;
  color: var(--teal-900);
  font-size: 0.95rem;
}

.ticks { list-style: none; padding: 0; margin: 1.5em 0 0; }
.ticks li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.6em;
  color: var(--muted);
  font-size: 0.95rem;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
}

/* ── Click-through proof ────────────────────────────────────────────────────── */

.proof {
  background: var(--ink-950);
  color: var(--on-dark);
  border-top: 1px solid rgba(136, 77, 237, 0.16);
  border-bottom: 1px solid rgba(136, 77, 237, 0.16);
}
.proof h2 { color: var(--cream); }
.proof p { color: var(--on-dark-dim); }
.proof .ticks li { color: var(--on-dark-dim); }

.desktop-mock {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 70% at 30% 0%, #361763 0%, #1d0f36 55%, #0f0720 100%);
  border: 1px solid rgba(197, 160, 252, 0.22);
  overflow: hidden;
  box-shadow: 0 32px 70px -40px rgba(0, 0, 0, 0.9);
}

.mock-window {
  position: absolute;
  left: 9%;
  top: 20%;
  width: 62%;
  border-radius: 10px;
  background: var(--cream-100);
  color: var(--teal-900);
  box-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}
.mock-bar {
  display: flex;
  gap: 6px;
  padding: 9px 12px;
  background: var(--cream-200);
  border-bottom: 1px solid var(--sand);
}
.mock-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--sand); }
.mock-body { padding: 16px 16px 20px; }
.mock-line {
  height: 8px;
  border-radius: 4px;
  background: var(--cream-200);
  margin: 0 0 10px;
  max-width: none;
}
.w40 { width: 40%; } .w50 { width: 50%; } .w70 { width: 70%; }
.w80 { width: 80%; } .w90 { width: 90%; }

.mock-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mock-hit { position: absolute; cursor: grab; touch-action: none; border-radius: 34px; }
.mock-hit:active { cursor: grabbing; }
.mock-hit:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.mock-status {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  margin: 0;
  max-width: none;
  text-align: center;
  font-size: 0.8rem;
  color: var(--on-dark-dim);
  transition: color 0.25s var(--ease);
}
.mock-status.hit-through { color: var(--blue); }
.mock-status.hit-charm { color: var(--gold); }

.ripple {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  border: 2px solid var(--blue);
  pointer-events: none;
  animation: ripple 0.62s var(--ease) forwards;
}
@keyframes ripple {
  from { transform: scale(0.4); opacity: 0.95; }
  to { transform: scale(4.6); opacity: 0; }
}

/* ── Charm gallery ──────────────────────────────────────────────────────────── */

.charms { background: var(--cream); }

.charm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 18px;
}

/* The card carries two separate actions - hang it, or read about it - so it is a
   container with two buttons rather than one button wrapping another, which is invalid. */
.charm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  border: 1px solid var(--sand);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 10px 24px -14px rgba(70, 34, 125, 0.12);
  transition: transform 0.24s var(--ease), box-shadow 0.24s var(--ease),
              border-color 0.24s var(--ease), background-color 0.24s var(--ease);
}
.charm-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 38px -20px rgba(70, 34, 125, 0.35);
  border-color: var(--purple-400);
}
.charm-card.is-hanging {
  background: #f0e6fc;
  border-color: var(--purple-600);
}
.charm-card[hidden] { display: none; }

.charm-select {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: left;
  padding: 20px 20px 12px;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.charm-select:focus-visible { outline: 2px solid var(--teal-700); outline-offset: -3px; }

.charm-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 20px 18px;
}

.charm-details {
  border: 1px solid var(--sand);
  background: none;
  border-radius: 999px;
  padding: 4px 12px;
  font: inherit;
  font-size: 0.75rem;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.charm-details:hover { border-color: var(--teal-700); color: var(--teal-900); }
.charm-details:focus-visible { outline: 2px solid var(--teal-700); outline-offset: 2px; }

.hanging-flag {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--purple-600);
  color: #fff;
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
}

.charm-art {
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.charm-art img {
  max-height: 100%;
  max-width: 76%;
  filter: drop-shadow(0 8px 12px rgba(66, 32, 122, 0.22));
  transition: transform 0.3s var(--ease);
}
.charm-card:hover .charm-art img { transform: translateY(-3px) rotate(-2deg); }
.charm-art { width: 100%; }

.charm-name { font-weight: 600; font-size: 1rem; line-height: 1.3; margin-bottom: 4px; display: block; }
.charm-origin {
  font-size: 0.78rem;
  color: var(--muted-2);
  letter-spacing: 0.02em;
  margin-bottom: 10px;
  display: block;
}
.charm-meaning { font-size: 0.88rem; color: var(--muted); margin: 0 0 14px; flex: 1; display: block; }

/* Performs the charm's ritual, so it is a real button rather than a label that looks like one. */
.ritual-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--cream-200);
  font: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--teal-900);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
              transform 0.15s var(--ease);
}
.ritual-pill:hover {
  background: #ede0fc;
  border-color: var(--purple-400);
}
.ritual-pill:active { transform: scale(0.96); }
.ritual-pill:focus-visible { outline: 2px solid var(--teal-700); outline-offset: 2px; }

/* Held for the length of the ritual. Nothing scrolls when a charm is performed - the charm
   hangs from a fixed canvas and is already on screen - so the press is acknowledged here
   instead, where the reader is looking. */
.is-performing {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #2a1d05 !important;
}
.picker-card.is-performing {
  background: #161b2d !important;
  border-color: #9ba9ff !important;
}
.beads { display: inline-flex; gap: 3px; }
.beads i { width: 7px; height: 7px; border-radius: 50%; display: block; }

.grid-note {
  margin: 28px auto 0;
  text-align: center;
  color: var(--muted-2);
  font-size: 0.88rem;
  max-width: 64ch;
}

/* ── Rituals ────────────────────────────────────────────────────────────────── */

.rituals { background: var(--cream-200); }

.ritual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.ritual-card {
  background: #fff;
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  padding: 16px 18px 20px;
  text-align: center;
  box-shadow: 0 10px 24px -14px rgba(70, 34, 125, 0.12);
}
.ritual-card canvas {
  width: 100%;
  height: 210px;
  display: block;
  cursor: pointer;
  touch-action: none;
}
.ritual-card h3 { margin: 6px 0 4px; font-size: 1rem; }
.ritual-card p {
  font-size: 0.84rem;
  color: var(--muted);
  margin: 0 0 14px;
  max-width: none;
  min-height: 3.4em;
}

/* ── Bring your own ─────────────────────────────────────────────────────────── */

.byo { background: var(--cream); }

.drop-zone {
  margin-top: 26px;
  padding: 34px 24px;
  border: 2px dashed var(--purple-300);
  border-radius: var(--radius);
  background: #fdfaff;
  text-align: center;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.drop-zone.over { background: #f3e8ff; border-color: var(--purple-500); }

/* Arriving from the "Custom Image Charm" card. The page has just scrolled some distance, so
   the zone says where it landed rather than leaving the reader to find it. Twice, then done —
   a highlight that keeps pulsing stops reading as an answer and starts reading as an error. */
.drop-zone.is-called {
  animation: drop-called 1s var(--ease) 2;
}
@keyframes drop-called {
  0%, 100% { background: #fdfaff; border-color: var(--purple-300); }
  50%      { background: #f3e8ff; border-color: var(--purple-500); }
}
.drop-title { font-weight: 600; margin: 0 0 4px; max-width: none; color: var(--teal-900); }
.drop-sub { margin: 0 0 8px; max-width: none; color: var(--muted); font-size: 0.92rem; }
.drop-hint { margin: 0; max-width: none; font-size: 0.8rem; color: var(--muted-2); }

.byo-result {
  position: relative;
  border: 1px solid var(--sand);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 14px 34px -14px rgba(70, 34, 125, 0.15);
  /* Headroom for the discard button, so it never sits over the preview it would throw away. */
  padding: 52px 22px 22px;
}

.byo-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--cream-200);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.byo-close:hover { background: var(--sand); color: var(--teal-900); }
.byo-close:focus-visible { outline: 2px solid var(--teal-700); outline-offset: 2px; }
.byo-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.byo-panes figure { margin: 0; }
.byo-panes figcaption {
  margin-top: 8px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted-2);
  letter-spacing: 0.03em;
}

.checker {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, var(--cream-200) 25%, transparent 25%),
    linear-gradient(-45deg, var(--cream-200) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--cream-200) 75%),
    linear-gradient(-45deg, transparent 75%, var(--cream-200) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.checker img { max-width: 100%; max-height: 100%; object-fit: contain; }

.byo-stats { display: grid; gap: 10px; margin: 20px 0; }
.byo-stats > div { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.byo-stats dt { color: var(--muted-2); font-size: 0.85rem; }
.byo-stats dd { margin: 0; font-size: 0.9rem; font-weight: 600; text-align: right; }
.swatch-row { display: inline-flex; align-items: center; gap: 8px; }
.swatch {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  display: inline-block;
}

.byo-tune { margin: 0 0 18px; }
.byo-tune label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 6px;
}
.byo-tune output { font-family: var(--mono); color: var(--teal-700); font-size: 0.8rem; }
.byo-tune input[type="range"] { width: 100%; accent-color: var(--teal-700); }
.byo-tune-note { margin: 8px 0 0; font-size: 0.78rem; color: var(--muted-2); max-width: none; }

.byo-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.byo-actions .button { flex: 1 1 auto; }
.byo-actions .button[disabled] { opacity: 0.5; cursor: progress; transform: none; }

.byo-howto {
  margin: 14px 0 0;
  font-size: 0.82rem;
  color: var(--muted-2);
  max-width: none;
}

/* ── Download ───────────────────────────────────────────────────────────────── */

.download {
  background: var(--ink-950);
  color: var(--on-dark);
  border-top: 1px solid rgba(136, 77, 237, 0.18);
}

.download-card {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  background: radial-gradient(90% 80% at 50% 0%, #351761 0%, #170d2d 70%);
  border: 1px solid rgba(245, 200, 91, 0.28);
  border-radius: var(--radius-lg);
  padding: clamp(34px, 5vw, 56px) clamp(24px, 4vw, 52px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.85);
}
.download-card h2 { color: var(--cream); }
.download-mark { margin-bottom: 14px; }
.download-lede { color: var(--on-dark-dim); margin: 0 auto 2em; }
.download-card .button { margin: 0 auto; }

/* The download control is a real submit button inside a real form, so the flow survives
   scripting being off. These reset what the element brings of its own accord; everything
   else it needs is already on .button. */
#download-form { margin: 0; }
#download-form .button { -webkit-appearance: none; appearance: none; width: auto; }
#download-form .button:disabled { opacity: 0.65; cursor: progress; transform: none; }

.steps {
  text-align: left;
  max-width: 46ch;
  margin: 2.6em auto 0;
  padding-left: 1.3em;
  color: var(--on-dark-dim);
  font-size: 0.94rem;
}
.steps li { margin-bottom: 0.7em; }
.steps strong { color: var(--cream); }

.warning {
  text-align: left;
  margin: 2em 0 0;
  border: 1px solid rgba(245, 200, 91, 0.3);
  border-radius: 10px;
  background: rgba(245, 200, 91, 0.08);
  padding: 14px 18px;
}
.warning summary { cursor: pointer; color: var(--gold); font-size: 0.92rem; font-weight: 600; }
.warning p { font-size: 0.88rem; color: var(--on-dark-dim); margin: 1em 0 0; }

.price-note {
  margin: 14px auto 0;
  font-size: 0.82rem;
  color: var(--on-dark-dim);
  max-width: 46ch;
}

.release-meta { display: grid; gap: 8px; text-align: left; margin-top: 2em; }
.release-meta > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.9rem;
}
.release-meta dt { color: var(--on-dark-dim); }
.release-meta dd { margin: 0; font-weight: 600; }
.release-meta code { font-size: 0.7rem; word-break: break-all; color: var(--gold); }

.alt-download {
  margin: 2.2em auto 0;
  font-size: 0.85rem;
  color: var(--on-dark-dim);
  max-width: 54ch;
}
.alt-download code {
  display: inline-block;
  background: rgba(0, 0, 0, 0.34);
  padding: 3px 8px;
  border-radius: 6px;
  color: var(--gold);
  margin-top: 6px;
}

/* ── FAQ Bullets Styling ────────────────────────────────────────────────────── */

.faq-bullets {
  list-style: none;
  padding: 0;
  margin: 14px 0 16px;
  display: grid;
  gap: 10px;
}
.faq-bullets li {
  position: relative;
  padding-left: 24px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}
.faq-bullets li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.58em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--purple-500);
}

/* ── Footer ─────────────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--ink-950);
  color: var(--on-dark-dim);
  padding: 46px 0 60px;
  border-top: 1px solid rgba(136, 77, 237, 0.18);
}
.footer-inner { display: grid; gap: 18px; justify-items: center; text-align: center; }
.footer-tag { font-family: var(--serif); font-size: 1.16rem; color: var(--cream); margin: 0; }
.footer-links { display: flex; gap: 24px; font-size: 0.92rem; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--gold); }
.colophon { font-size: 0.78rem; max-width: 60ch; margin: 0; opacity: 0.72; }

/* ── Scroll reveal ──────────────────────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.shown { opacity: 1; transform: none; }

/* ── Gallery filters & Blessings ────────────────────────────────────────────── */

.charm-filters { margin-bottom: 26px; }

.charm-filters-top {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.charm-filters-top .search-field {
  flex: 1 1 280px;
  margin-bottom: 0;
}

.search-field { position: relative; max-width: 420px; }
.search-field input {
  width: 100%;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid var(--sand);
  background: #fff;
  font: inherit;
  font-size: 0.92rem;
  color: var(--teal-900);
  box-shadow: 0 4px 14px -6px rgba(70, 34, 125, 0.08);
}
.search-field input::placeholder { color: var(--muted-2); }
.search-field input:focus-visible {
  outline: 2px solid var(--purple-500);
  outline-offset: 1px;
  border-color: transparent;
}

/* ── Collection Navigation (On-Page Segmented Switcher) ─────────────────────── */

.collection-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 24px;
  padding: 6px;
  background: var(--cream-200);
  border: 1px solid var(--sand);
  border-radius: 999px;
  width: fit-content;
  max-width: 100%;
}

.collection-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s var(--ease);
}

.collection-tab:hover {
  color: var(--teal-900);
  background: rgba(255, 255, 255, 0.6);
}

.collection-tab.is-active {
  background: linear-gradient(135deg, #3c1a6e 0%, #20103c 100%);
  color: #fff;
  border-color: rgba(245, 200, 91, 0.4);
  box-shadow: 0 6px 18px -6px rgba(60, 26, 110, 0.55), 0 0 10px rgba(245, 200, 91, 0.25);
}

.collection-tab .tab-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.collection-tab .tab-count {
  font-size: 0.74rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  color: var(--muted);
}

.collection-tab.is-active .tab-count {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.collection-tab .tab-count.gold {
  background: rgba(245, 200, 91, 0.2);
  color: var(--gold-deep);
}

.collection-tab.is-active .tab-count.gold {
  background: rgba(245, 200, 91, 0.25);
  color: var(--gold);
  border: 1px solid rgba(245, 200, 91, 0.4);
}

/* ── Blessings Banner & Inline Grid ─────────────────────────────────────────── */

.blessings-banner {
  background: radial-gradient(90% 80% at 30% 0%, #3a1c6a 0%, #1c0e35 60%, #100720 100%);
  border: 1px solid rgba(245, 200, 91, 0.3);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin-bottom: 24px;
  box-shadow: 0 16px 36px -18px rgba(32, 16, 60, 0.5);
}

.blessings-banner-copy {
  max-width: 60ch;
}

.blessings-sub {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}

.blessings-banner h3 {
  font-size: 1.45rem;
  color: #fff;
  margin: 0 0 6px;
}

.blessings-banner p {
  font-size: 0.92rem;
  color: var(--on-dark-dim);
  margin: 0;
}

.blessings-inline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 18px;
}

.blessing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  border: 1px solid var(--sand);
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 10px 24px -14px rgba(70, 34, 125, 0.14);
  transition: transform 0.24s var(--ease), border-color 0.24s var(--ease),
              box-shadow 0.24s var(--ease), background-color 0.24s var(--ease);
}

.blessing-card:hover {
  transform: translateY(-4px);
  border-color: var(--purple-500);
  box-shadow: 0 20px 38px -20px rgba(70, 34, 125, 0.35);
}

.blessing-card.is-hanging {
  background: #f0e6fc;
  border-color: var(--purple-600);
  border-width: 2px;
  box-shadow: 0 0 22px rgba(136, 77, 237, 0.25);
}

.blessing-select {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: left;
  padding: 20px 20px 12px;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.blessing-art {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  width: 100%;
}

.blessing-art img {
  max-height: 100%;
  max-width: 82%;
  filter: drop-shadow(0 8px 14px rgba(66, 32, 122, 0.24));
  transition: transform 0.3s var(--ease);
}

.blessing-card:hover .blessing-art img {
  transform: translateY(-3px) scale(1.05) rotate(-2deg);
}

.blessing-badge {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple-600);
  font-weight: 700;
  margin-bottom: 4px;
  display: block;
}

.blessing-name {
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--teal-900);
  margin-bottom: 4px;
  display: block;
}

.blessing-meaning {
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.4;
  margin: 0 0 14px;
  flex: 1;
  display: block;
}

.blessing-foot {
  padding: 0 20px 18px;
}

.blessing-action-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--sand);
  background: var(--cream-200);
  color: var(--teal-900);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.blessing-action-btn:hover {
  background: #ede0fc;
  border-color: var(--purple-400);
  color: var(--purple-900);
}

.blessing-hanging-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--purple-600);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
}

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--sand);
  background: #fff;
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  font-size: 0.82rem;
  color: var(--muted);
  cursor: pointer;
  box-shadow: 0 2px 8px -4px rgba(70, 34, 125, 0.08);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.chip:hover { border-color: var(--purple-400); color: var(--teal-900); }
.chip[aria-pressed="true"] {
  background: var(--purple-800);
  border-color: var(--purple-800);
  color: #fff;
}
.chip:focus-visible { outline: 2px solid var(--purple-500); outline-offset: 2px; }

.filter-count { margin: 12px 0 0; font-size: 0.8rem; color: var(--muted-2); }
.empty-state { text-align: center; color: var(--muted); margin: 32px auto 0; max-width: none; }

/* ── Charm detail drawer ────────────────────────────────────────────────────── */

.drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(12, 8, 24, 0.65);
  z-index: 90;
  animation: fade-in 0.2s var(--ease);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(430px, 100%);
  z-index: 91;
  background: var(--cream-100);
  border-left: 1px solid var(--sand);
  padding: 28px clamp(20px, 4vw, 34px) 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: -22px 0 60px -40px rgba(12, 8, 24, 0.9);
  animation: slide-in 0.28s var(--ease);
}
@keyframes slide-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

.drawer-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--cream-200);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.drawer-close:hover { background: var(--sand); color: var(--teal-900); }
.drawer-close:focus-visible { outline: 2px solid var(--teal-700); outline-offset: 2px; }

.drawer-art {
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.drawer-art img {
  max-height: 100%;
  max-width: 70%;
  filter: drop-shadow(0 14px 20px rgba(21, 63, 58, 0.28));
}

.drawer-origin {
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 6px;
}
.drawer h3 { font-size: 1.6rem; margin: 0 0 10px; }
.drawer-meaning { color: var(--muted); margin-bottom: 22px; }

.drawer-facts { display: grid; gap: 9px; margin: 0 0 24px; }
.drawer-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--sand);
  font-size: 0.88rem;
}
.drawer-facts dt { color: var(--muted-2); }
.drawer-facts dd { margin: 0; font-weight: 600; text-align: right; }

.drawer-block { margin-bottom: 24px; }
.drawer-block h4 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 9px;
}
.drawer-block p { font-size: 0.92rem; margin: 0; color: var(--teal-900); }
.drawer-note { margin-top: 10px !important; font-size: 0.83rem !important; color: var(--muted) !important; }

.bead-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.bead-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--teal-900);
}
.bead-list .bead-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex: none;
  border: 1px solid rgba(0, 0, 0, 0.14);
}
.bead-list .bead-class { color: var(--muted-2); font-size: 0.8rem; margin-left: auto; }

.drawer-hang { width: 100%; }

/* ── Using it ───────────────────────────────────────────────────────────────── */

.using { background: var(--cream-200); }
.using-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}
.using-card {
  background: #fff;
  border: 1px solid var(--sand);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.using-card h3 { font-family: var(--serif); font-size: 1.45rem; font-weight: 400; margin: 0 0 10px; }
.using-card > p { font-size: 0.93rem; color: var(--muted); }
.step-tag {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 8px;
}
.using-note { font-size: 0.82rem; color: var(--muted-2); margin: 14px 0 0; }
.using-note kbd {
  font-family: var(--mono);
  font-size: 0.78em;
  background: var(--cream-200);
  border: 1px solid var(--sand);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 5px;
}

/* Deliberately the app's palette, not the site's, so it reads as a picture of the program. */
.picker-mock {
  margin-top: 18px;
  background: #0f121f;
  border: 1px solid #313954;
  border-radius: 12px;
  padding: 18px 16px;
  text-align: center;
}
.picker-title { color: #faf8f3; font-weight: 600; font-size: 1rem; margin: 0 0 4px; max-width: none; }
.picker-sub { color: #bfc5da; font-size: 0.74rem; margin: 0 0 14px; max-width: none; }
.picker-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.picker-card {
  background: #161b2d;
  border: 1px solid #313954;
  border-radius: 10px;
  padding: 10px 6px 12px;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.picker-card:hover { border-color: #9ba9ff; transform: translateY(-2px); }
.picker-card:focus-visible { outline: 2px solid #9ba9ff; outline-offset: 2px; }
.picker-card.is-selected { border-color: #9ba9ff; border-width: 2px; }
.picker-card img { width: 46px; height: 46px; object-fit: contain; }
.picker-card .picker-name {
  display: block;
  color: #faf8f3;
  font-size: 0.68rem;
  margin-top: 6px;
  line-height: 1.25;
}
.picker-card .picker-action {
  display: block;
  margin-top: 7px;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: #9ba9ff;
}
.picker-card.is-selected .picker-action { color: #747fb4; }

/* Windows notification-area menu */
.tray-demo { margin-top: 18px; }
.tray-menu {
  background: #f3f3f3;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  padding: 5px;
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.55);
  font-size: 0.84rem;
}
.tray-menu hr { border: 0; border-top: 1px solid #e0e0e0; margin: 4px 8px; }
.tray-hint {
  margin: 0;
  padding: 7px 12px;
  color: #8a8a8a;
  font-size: 0.78rem;
  max-width: none;
}
.tray-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  padding: 8px 12px;
  border-radius: 5px;
  font: inherit;
  font-size: 0.84rem;
  color: #1a1a1a;
  cursor: pointer;
}
.tray-menu button:hover { background: #e4eceb; }
.tray-menu button:focus-visible { outline: 2px solid var(--teal-700); outline-offset: -2px; }
.tray-menu .tick { width: 14px; font-weight: 700; color: var(--teal-700); }
.tray-menu button[aria-pressed="true"] .tick::before { content: "\2713"; }

.tray-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
  padding: 7px 12px;
  background: #1f2430;
  border-radius: 0 0 8px 8px;
}
.tray-time { color: #e8e8e8; font-size: 0.72rem; }

/* ── Assurances ─────────────────────────────────────────────────────────────── */

.assurances { background: var(--cream-200); }

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}
.facts article {
  background: #fff;
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  padding: 20px;
}
.facts h3 { margin-bottom: 8px; }
.facts p { font-size: 0.9rem; color: var(--muted); margin-bottom: 0; }

.code-copy {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  background: var(--cream-200);
  border-radius: 8px;
  padding: 6px 6px 6px 11px;
}
.code-copy code { flex: 1; color: var(--teal-900); font-size: 0.74rem; overflow-x: auto; }
.copy {
  border: 1px solid var(--sand);
  background: #fff;
  color: var(--teal-700);
  border-radius: 6px;
  padding: 4px 10px;
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
  flex: none;
}
.copy:hover { border-color: var(--teal-700); background: var(--cream-100); }
.copy:focus-visible { outline: 2px solid var(--teal-700); outline-offset: 2px; }

/* ── FAQ ────────────────────────────────────────────────────────────────────── */

.faq { background: var(--cream); }
.faq-list { max-width: 78ch; }
.faq-list details {
  border-bottom: 1px solid var(--sand);
  padding: 4px 0;
}
.faq-list summary {
  cursor: pointer;
  padding: 16px 34px 16px 0;
  font-weight: 600;
  font-size: 1rem;
  position: relative;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--gold-deep);
}
.faq-list details[open] summary::after { content: "\2013"; }
.faq-list summary:focus-visible { outline: 2px solid var(--teal-700); outline-offset: 2px; }
.faq-list details p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.94rem;
  max-width: 70ch;
}
.faq-list code {
  background: var(--cream-200);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.82em;
  word-break: break-all;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .site-nav { display: none; }
  .hero h1 { max-width: 100%; }
  /* Keep the hero copy clear of the charm hanging in the corner. */
  .hero { padding-top: 150px; }
  .dangle { height: 290px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .byo-panes { grid-template-columns: 1fr; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .button { width: 100%; }
  /* Full-height side panels are awkward on a phone; come up from the bottom instead. */
  .drawer {
    top: auto;
    left: 0;
    width: 100%;
    max-height: 88vh;
    border-left: 0;
    border-top: 1px solid var(--sand);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  @keyframes slide-in { from { transform: translateY(28px); opacity: 0; } to { transform: none; opacity: 1; } }
  .drawer-art { height: 150px; }
  .picker-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ── Reduced motion ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .button:hover, .charm-card:hover { transform: none; }
  .dust { display: none; }
}