/* ================================================================
   Glitter Jar product page.

   The design is the one from the app's own site, which is a better page
   than the one Fiddlemint had (Anna, 17 Sep 2026). The CHROME is not: the
   header, the footer, the marquee, the floating hero charms, the fonts and
   the whole palette come from main.css, which this file loads on top of.

   So what is left here is only what is particular to this page: the hero
   device, the charm trays, the color swatches, the two mood cards, the
   settings knobs, the price cards, the tier band and the final CTA.

   It is loaded SECOND, after main.css, and a handful of its class names are
   deliberately prefixed gj- (gj-stats, gj-steps, gj-faq, gj-shot, gj-tray)
   because main.css already owns those names for different markup.
   ================================================================ */


/* Every one of these is an alias for a token main.css already defines under
   :root[data-app="glitterjar"] -- that palette was drawn FROM this page, so
   the two agree exactly. Aliasing rather than redeclaring means the page now
   follows the site's palette if it is ever retuned. --panel-2 is the one
   shade the site has no name for. */
:root {
  --bg: var(--ground);
  --bg-2: var(--mint-soft);
  --panel: var(--paper);
  --panel-2: #1c2350;
  --violet: var(--mint-deep);
  --violet-2: var(--ink-soft);
  --violet-deep: var(--mint-ink);
  --pink: var(--grad-c);
  --gold: var(--apricot);
  --text: var(--ink);
  --r: 20px;
}





/* ------------------------------------------------- the missing reset
   main.css zeroes margins class by class. This page's markup came from a
   stylesheet that opened with a blanket `* { margin: 0; padding: 0 }`, so
   every element it never names still carries its user-agent default -- and
   two of them show badly:

   - a <figure> keeps 40px of side margin, which blew the 13-across charm
     trays apart into rows of six;
   - a <ul> keeps 40px of left padding, which indented the "No score / No
     timer" chips and the hero's trust row past the text above them, and
     main.css's `ul, ol { max-width: 66ch }` clamped them as well.
   ------------------------------------------------------------------ */
main figure { margin: 0; }
/* .wrap.narrow on the rest of the site keeps a 1120px wrap and clamps its
   children to 760, which left the FAQ hugging the left margin here. This
   page's narrow sections are centred columns, the way the design had them. */
main .wrap.narrow { max-width: 820px; }
main .wrap.narrow > * { max-width: none; }
main ul { margin: 0; padding: 0; max-width: none; }

/* ---------------- typography helpers ---------------- */

h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: .2px; }
h2 { font-size: clamp(1.85rem, 4.2vw, 2.8rem); line-height: 1.14; margin-bottom: 14px; }


/* the alternating bands swap the kicker from violet to gold */
.section-alt .kicker { color: var(--gold); text-shadow: 0 0 22px rgba(255, 216, 138, .3); }

.head { margin-bottom: 44px; }
.fine { color: var(--muted); font-size: .85rem; opacity: .88; }
.center { text-align: center; }



/* ---------------- hero ---------------- */

/* The site header is sticky, not fixed, so the hero no longer has to
   reserve 122px of room for it to float over. */
.hero { position: relative; padding: 40px 0 30px; overflow: hidden; }
@media (max-width: 860px) { .hero { padding-top: 24px; } }


/* main.css positions .hero-float img by nth-child, for the layout the other
   app pages use -- which drops one charm straight onto this hero's stats band
   and pushes another off the left edge. These are this hero's own positions:
   strictly in the page gutters, never over the copy. The selectors carry
   `.hero-float img` so they outrank main.css's nth-child rules; the float
   animation itself is still main.css's, and so is hiding the whole strip
   below 1280px, where there are no real gutters to live in. */
.hero-float img.fl-1 { top: 15%;  left: 1%;    width: 58px; animation-delay: -1s; }
.hero-float img.fl-2 { top: 72%;  left: 2.5%;  width: 46px; animation-delay: -4s; }
.hero-float img.fl-3 { top: 24%;  right: 1%;   left: auto; width: 50px; animation-delay: -2s; }
.hero-float img.fl-4 { top: 64%;  right: 2.5%; left: auto; width: 44px; animation-delay: -6s; }
.hero-float img.fl-5 { top: 45%;  left: 4%;    width: 34px; opacity: .4; animation-delay: -3s; }
.hero-float img.fl-6 { top: 88%;  right: 5.5%; left: auto; width: 40px; opacity: .45; animation-delay: -7s; animation-duration: 11s; }

.hero-grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 48px; align-items: center;
}
.hero-grid > * { min-width: 0; }
@media (max-width: 1000px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 800; letter-spacing: 2.2px; text-transform: uppercase; font-size: .76rem;
  color: var(--violet-2);
  border: 1px solid var(--line-strong);
  background: rgba(22, 28, 61, .6);
  padding: 7px 14px; border-radius: 999px;
  margin-bottom: 22px;
}
.eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--mint);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(46, 230, 168, .5); }
  70%  { box-shadow: 0 0 0 9px rgba(46, 230, 168, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 230, 168, 0); }
}

.hero-logo {
  width: min(500px, 92%); height: auto;
  filter: drop-shadow(0 14px 34px rgba(0, 0, 0, .55)) drop-shadow(0 0 60px rgba(179, 136, 255, .35));
  animation: logoIn 1.1s cubic-bezier(.2, .8, .25, 1) both;
}
@keyframes logoIn {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

.tagline { font-size: 1.14rem; color: var(--muted); max-width: 540px; margin: 20px 0 26px; }
.tagline em { color: var(--violet-2); font-style: normal; font-weight: 800; }
.tagline b { color: var(--text); }

.cta-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.badge-link { display: inline-block; border-radius: 12px; transition: transform .2s, filter .2s; }
.badge-link:hover { transform: translateY(-2px); filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .5)); }
.badge-link:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
.cta-note { font-size: .95rem; color: var(--muted); max-width: 230px; line-height: 1.45; }
.cta-note strong { color: var(--text); display: block; }
.cta-note b { color: var(--mint); }

.trust { display: flex; gap: 10px; flex-wrap: wrap; list-style: none; margin-top: 24px; }
.trust li {
  font-size: .82rem; font-weight: 800; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px 6px 10px;
  background: rgba(22, 28, 61, .5);
}
.trust li::before { content: '✓ '; color: var(--mint); }

/* ---------------- hero device (the demo slot) ---------------- */

.hero-device { justify-self: center; width: 100%; max-width: 340px; }

/* A phone body with a soft violet bloom behind it. The screen area is sized by
   the 1:2 portrait aspect the app captures at, so a video and a still both drop
   in without touching anything else. */
.device {
  position: relative;
  padding: 12px;
  border-radius: 40px;
  background: linear-gradient(160deg, #3b3160, #1b1a38 45%, #0f1128);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, .62),
    0 0 70px rgba(124, 77, 219, .25),
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 -1px 0 rgba(255, 255, 255, .06);
}
/* Deliberately still. The video is all the motion this needs, a drifting frame
   resamples every one of its pixels, and the sound button shouldn't be a moving
   target. The breathing bloom below carries the life instead. */
.device::before {           /* the bloom the jar throws on the "table" */
  content: '';
  position: absolute; inset: 12% 4% -8%;
  z-index: -1;
  background: radial-gradient(circle, rgba(179, 136, 255, .45), rgba(255, 143, 199, .16) 55%, transparent 72%);
  filter: blur(42px);
  animation: breathe 7s ease-in-out infinite;
}
.device::after {            /* speaker slot, so it reads as a phone */
  content: '';
  position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 62px; height: 4px; border-radius: 999px;
  background: rgba(255, 255, 255, .16);
}

/* The screen itself. 9:16 is the video's own aspect — never crop it, the
   on-screen copy lives near the top and bottom of the frame. */
.screens {
  display: block;
  aspect-ratio: 9 / 16;
  width: 100%; height: auto;
  border-radius: 30px;
  overflow: hidden;
  background: #0a0d20;
  object-fit: contain;
}

/* Sits BELOW the device, never over the picture — the footage already has the
   app's own controls in its corners, and a labeled pill is easier to find than
   a mystery icon floating on the video. */
.sound-row { display: flex; justify-content: center; margin-top: 16px; }
.sound-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 17px 8px 13px;
  border-radius: 999px; cursor: pointer;
  font-family: var(--body); font-size: .82rem; font-weight: 800; letter-spacing: .2px;
  color: var(--violet-2);
  background: rgba(22, 28, 61, .72);
  border: 1px solid var(--line-strong);
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.sound-btn:hover { transform: translateY(-2px); background: rgba(35, 43, 92, .9); color: var(--text); }
.sound-btn:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
/* the app's own icon art is dark-lined, so lift it off the dark pill */
.sound-btn img {
  width: 22px; height: 22px; object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(221, 201, 255, .9));
}
.sound-btn[aria-pressed="true"] { border-color: var(--violet); color: var(--text); }

.jar-caption { text-align: center; color: var(--muted); font-size: .86rem; margin-top: 20px; }
.jar-caption b { color: var(--violet-2); }

/* ---------------- stats band ---------------- */

.gj-stats {
  display: grid; grid-template-columns: repeat(8, 1fr);
  gap: 8px; margin-top: 58px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 22px 12px;
}
.gj-stat { text-align: center; }
.gj-stat b {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: clamp(1.45rem, 3vw, 2.05rem); color: var(--violet-2);
  text-shadow: 0 0 26px rgba(179, 136, 255, .45);
}
.gj-stat span { font-size: .74rem; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
.gj-stat.zero b { color: var(--mint); text-shadow: 0 0 26px rgba(46, 230, 168, .35); }
@media (max-width: 900px) { .gj-stats { grid-template-columns: repeat(4, 1fr); row-gap: 20px; } }

/* ---------------- sections ---------------- */

.section { padding: 96px 0; position: relative; }
.section-alt {
  background:
    radial-gradient(900px 500px at 14% 0%, rgba(124, 77, 219, .16), transparent 62%),
    rgba(13, 17, 41, .82);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ---------------- split (mechanic) ---------------- */

.split { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 56px; align-items: center; }
.split > * { min-width: 0; }
@media (max-width: 940px) { .split { grid-template-columns: minmax(0, 1fr); } }

.gj-shot { position: relative; text-align: center; }
.gj-shot::before {
  content: '';
  position: absolute; inset: 4% 6%;
  background: radial-gradient(circle, rgba(179, 136, 255, .4), rgba(255, 143, 199, .14) 55%, transparent 72%);
  filter: blur(34px);
  animation: breathe 6s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(.94); opacity: .75; }
  50%      { transform: scale(1.06); opacity: 1; }
}
.gj-shot img {
  position: relative;
  width: min(300px, 78%); margin: 0 auto;
  border-radius: 26px;
  border: 1px solid rgba(196, 214, 232, .18);
  box-shadow: 0 28px 60px rgba(0, 0, 0, .6);
}
.gj-shot figcaption { position: relative; color: var(--muted); font-size: .86rem; margin-top: 16px; }

.split-copy p { margin-bottom: 14px; }
.split-copy p b { color: var(--violet-2); }

.no-list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 6px; }
.no-list li {
  font-size: .86rem; font-weight: 800; color: var(--muted);
  border: 1px solid rgba(255, 143, 199, .28); border-radius: 999px;
  padding: 6px 14px; background: rgba(30, 16, 42, .5);
}
.no-list li::before { content: '✕ '; color: var(--pink); }

/* ---------------- loop steps ---------------- */

.gj-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1020px) { .gj-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gj-steps { grid-template-columns: 1fr; } }

.step {
  background: linear-gradient(180deg, var(--panel), rgba(22, 28, 61, .35));
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 22px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.step:hover { transform: translateY(-5px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.step img { width: 76px; height: 76px; object-fit: contain; margin-bottom: 16px; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .5)); }
.step h3 { font-size: 1.12rem; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.step h3 span {
  display: inline-grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(180deg, var(--violet-2), var(--violet-deep));
  color: #1a0f2e; font-size: .84rem;
}
.step p { color: var(--muted); font-size: .95rem; }

/* ---------------- tier band ---------------- */

.tier-band {
  position: relative; overflow: hidden;
  background:
    radial-gradient(700px 300px at 50% 50%, rgba(179, 136, 255, .18), transparent 70%),
    #080b1c;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 46px 0;
}
.tier-in { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; justify-content: center; }
.tier-badges { display: flex; gap: 26px; align-items: flex-end; flex-wrap: wrap; justify-content: center; }
.tier-badges figure { text-align: center; }
.tier-badges img {
  width: 60px; margin: 0 auto;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .55));
  transition: transform .25s ease;
}
.tier-badges figure:nth-child(2) img { width: 70px; }
.tier-badges figure:nth-child(3) img { width: 82px; animation: gleam 3s ease-in-out infinite; }
@keyframes gleam {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .55)); }
  50%      { transform: scale(1.07); filter: drop-shadow(0 0 26px rgba(255, 216, 138, .6)); }
}
.tier-badges figure:hover img { transform: scale(1.12) rotate(4deg); }
.tier-badges figcaption {
  font-family: var(--display); font-weight: 600; font-size: .68rem; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--violet-2); margin-top: 10px;
}
.tier-badges .n { display: block; font-size: .64rem; letter-spacing: .6px; color: var(--muted); text-transform: none; }
.tier-secret {
  width: 82px; height: 82px; display: grid; place-items: center;
  border-radius: 22px; border: 1px dashed rgba(255, 216, 138, .5);
  background: rgba(255, 216, 138, .05);
  font-family: var(--display); font-size: 2rem; color: rgba(255, 216, 138, .65);
  animation: breathe 5s ease-in-out infinite;
}
.tier-copy { max-width: 340px; color: var(--muted); font-size: 1.02rem; }
.tier-copy b { color: var(--violet-2); }

/* ---------------- charm tray ---------------- */

.gj-tray-block + .gj-tray-block { margin-top: 30px; }
.gj-tray-head {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line); padding-bottom: 8px;
}
.gj-tray-head h3 { font-size: 1.05rem; color: var(--violet-2); letter-spacing: 1.6px; text-transform: uppercase; }
.gj-tray-head span { font-size: .8rem; color: var(--muted); font-weight: 700; }
/* 13 across: the tiers are 13 / 14 / 9 / 3, so Common is exactly ONE centered
   row and the others break where they will. Narrower screens wrap, and
   centring keeps a short row under the middle of the full one. */
.gj-tray { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.gj-tray figure { flex: 0 0 calc((100% - 96px) / 13); }
@media (max-width: 1020px) { .gj-tray { gap: 10px; } .gj-tray figure { flex-basis: calc((100% - 70px) / 8); } }
@media (max-width: 700px)  { .gj-tray figure { flex-basis: calc((100% - 50px) / 6); } }
@media (max-width: 460px)  { .gj-tray figure { flex-basis: calc((100% - 30px) / 4); } }
.gj-tray figure {
  background: linear-gradient(180deg, rgba(28, 35, 80, .8), rgba(16, 20, 52, .55));
  border: 1px solid var(--line); border-radius: 16px;
  padding: 10px 4px 8px; text-align: center;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.gj-tray figure:hover { transform: translateY(-5px); border-color: var(--line-strong); box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
.gj-tray img { width: 40px; height: 40px; object-fit: contain; margin: 0 auto 6px; }
.gj-tray figcaption {
  font-size: .6rem; font-weight: 800; color: var(--muted); letter-spacing: .1px;
  line-height: 1.25; overflow-wrap: anywhere;
}
.gj-tray .locked { border-style: dashed; opacity: .55; }
.gj-tray .locked img { filter: grayscale(1) brightness(.5); }

/* ---------------- colors ---------------- */

.pals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .pals { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pals { grid-template-columns: 1fr; } }

.pal {
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(180deg, var(--panel), rgba(22, 28, 61, .45));
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px 18px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.pal:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.pal .sw {
  flex: none; width: 56px; height: 56px; border-radius: 50%;
  background-image: var(--sw);
  border: 2px solid rgba(255, 255, 255, .18);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45), inset 0 2px 6px rgba(255, 255, 255, .25);
}
.pal h3 { font-size: 1.05rem; margin-bottom: 2px; }
.pal p { font-size: .82rem; color: var(--muted); }
.pal .how {
  display: inline-block; margin-top: 6px;
  font-size: .68rem; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px 10px;
  color: var(--violet-2); background: rgba(10, 13, 32, .5);
}
.pal .how.free { color: var(--mint); border-color: rgba(46, 230, 168, .45); }

/* ---------------- moods (themes) ---------------- */

.moods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
@media (max-width: 820px) { .moods { grid-template-columns: 1fr; } }
.mood {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 26px;
  padding: 28px 26px 0; text-align: center;
}
.mood-night { background: linear-gradient(180deg, #131a3f, #0a0d20); }
.mood-day   { background: linear-gradient(180deg, #f0e6f6, #ddd3ee); }
.mood h3 { font-size: 1.4rem; margin-bottom: 6px; }
.mood-night h3 { color: var(--violet-2); }
.mood-day h3 { color: #a63b74; }
.mood p { font-size: .95rem; margin-bottom: 20px; }
.mood-night p { color: var(--muted); }
.mood-day p { color: #6a4d78; }
.mood img.shotimg {
  width: min(250px, 72%); margin: 0 auto;
  border-radius: 22px 22px 0 0;
  border: 1px solid rgba(255, 255, 255, .2); border-bottom: 0;
  box-shadow: 0 -6px 40px rgba(0, 0, 0, .35);
}
/* fixed height, not width: the two wordmarks trim to different aspect ratios,
   and a shared height is what keeps the two cards' content on the same lines */
.mood .logo-tag { height: 46px; width: auto; object-fit: contain; margin: 0 auto 14px; }
.mood p { min-height: 3.1em; }

.zen-strip {
  margin-top: 22px;
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  background: linear-gradient(90deg, rgba(124, 77, 219, .22), rgba(10, 13, 32, .4));
  border: 1px solid var(--line-strong); border-radius: var(--r);
  padding: 22px 26px;
}
.zen-strip img { width: 64px; flex: none; filter: drop-shadow(0 0 16px rgba(179, 136, 255, .5)); }
.zen-strip p { flex: 1; min-width: 260px; color: var(--muted); font-size: .96rem; }
.zen-strip .zen-shot {
  width: 108px; border-radius: 14px;
  border: 1px solid rgba(196, 214, 232, .2);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .55);
  filter: none;
}
@media (max-width: 720px) { .zen-strip .zen-shot { display: none; } }
.zen-strip b { color: var(--violet-2); }

/* ---------------- knobs (settings) ---------------- */

.knob-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 1020px) { .knob-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .knob-grid { grid-template-columns: 1fr; } }
.knob {
  background: linear-gradient(180deg, var(--panel), rgba(22, 28, 61, .4));
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px 20px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.knob:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.knob h3 {
  font-size: .82rem; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--pink); margin-bottom: 10px;
}
.knob p { color: var(--muted); font-size: .93rem; }
/* a little inert slider drawn in CSS, mirroring the app's control */
.knob .rail {
  position: relative; height: 6px; border-radius: 999px;
  background: rgba(179, 136, 255, .18); margin: 14px 0 4px;
}
.knob .rail::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: var(--v, 60%);
  border-radius: 999px; background: linear-gradient(90deg, var(--violet-deep), var(--violet));
}
.knob .rail::after {
  content: ''; position: absolute; top: 50%; left: var(--v, 60%);
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; background: var(--pink);
  border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
.knob .seg { display: flex; gap: 4px; margin: 14px 0 4px; background: rgba(10, 13, 32, .6); border-radius: 999px; padding: 4px; }
.knob .seg i {
  flex: 1; text-align: center; font-style: normal; font-size: .72rem; font-weight: 800;
  color: var(--muted); padding: 5px 0; border-radius: 999px;
}
.knob .seg i.on { background: var(--pink); color: #2a0f22; }

/* ---------------- promise (pricing analog) ---------------- */

.promise { display: grid; grid-template-columns: 1fr 1.1fr; gap: 22px; align-items: stretch; }
@media (max-width: 880px) { .promise { grid-template-columns: 1fr; } }

.promise-card {
  position: relative;
  background: linear-gradient(180deg, var(--panel), rgba(22, 28, 61, .6));
  border: 1px solid var(--line); border-radius: 24px;
  padding: 30px 28px; display: flex; flex-direction: column;
}
.promise-card.headline {
  border: 2px solid var(--line-strong);
  background:
    radial-gradient(500px 320px at 80% -10%, rgba(179, 136, 255, .2), transparent 62%),
    linear-gradient(180deg, var(--panel-2), rgba(22, 28, 61, .78));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5), 0 0 50px rgba(179, 136, 255, .08);
}
.promise-card header { margin-bottom: 18px; }
.promise-card h3 { font-size: 1.35rem; }
.price {
  font-family: var(--display); font-weight: 600; font-size: 3rem; line-height: 1.1;
  color: var(--mint); text-shadow: 0 0 30px rgba(46, 230, 168, .3);
}
.price span {
  display: block; font-size: .78rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted); font-family: var(--body); font-weight: 800;
}
.promise-card ul { list-style: none; margin-bottom: 26px; flex: 1; }
.promise-card li {
  padding: 9px 0 9px 30px; position: relative;
  color: var(--muted); font-size: .97rem;
  border-bottom: 1px dashed rgba(179, 136, 255, .13);
}
.promise-card li:last-child { border-bottom: 0; }
.promise-card li b { color: var(--text); }
.promise-card li::before {
  content: '✓'; position: absolute; left: 4px; top: 8px;
  color: var(--mint); font-weight: 900;
}
.promise-card.nots li::before { content: '✕'; color: var(--pink); }
.ribbon {
  position: absolute; top: -14px; right: 26px;
  font-family: var(--display); font-weight: 600; font-size: .72rem; letter-spacing: 2px; text-transform: uppercase;
  background: linear-gradient(180deg, var(--violet-2), var(--violet-deep));
  color: #1a0f2e; padding: 7px 16px; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(179, 136, 255, .35);
}

.btn-primary {
  display: block; text-align: center; text-decoration: none;
  font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: 1px;
  border-radius: 16px; padding: 15px 18px;
  background: linear-gradient(180deg, var(--violet-2), var(--violet-deep));
  color: #1a0f2e;
  box-shadow: 0 8px 26px rgba(179, 136, 255, .3);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(179, 136, 255, .48); filter: brightness(1.05); }


/* ---------------- FAQ ---------------- */

.gj-faq details {
  border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(180deg, var(--panel), rgba(22, 28, 61, .4));
  margin-bottom: 12px; overflow: hidden;
}
.gj-faq summary {
  cursor: pointer; list-style: none;
  font-weight: 800; font-size: 1.02rem;
  padding: 17px 52px 17px 20px; position: relative;
  transition: color .2s;
}
.gj-faq summary::-webkit-details-marker { display: none; }
.gj-faq summary::after {
  content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-family: var(--display); font-size: 1.35rem; color: var(--violet);
  transition: transform .25s ease;
}
.gj-faq details[open] summary { color: var(--violet-2); }
.gj-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.gj-faq details p { padding: 0 20px 18px; color: var(--muted); font-size: .96rem; }
.gj-faq details p + p { padding-top: 0; }

/* ---------------- final CTA + footer ---------------- */

.final {
  position: relative; padding: 106px 0 116px; text-align: center;
  background: radial-gradient(700px 420px at 50% 20%, rgba(124, 77, 219, .22), transparent 66%);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.final-in { display: flex; flex-direction: column; align-items: center; gap: 20px; }
/* two store badges sit side by side, stacking on narrow screens */
.final-badges { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.contact-line { font-size: 1rem; }
.contact-line a { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }
.final-logo { width: min(400px, 84%); filter: drop-shadow(0 14px 34px rgba(0, 0, 0, .55)); }
.final p { font-size: 1.22rem; color: var(--muted); }
.final .fine { font-size: .88rem; }
.solo-dev { margin-top: 20px; color: var(--muted); font-size: .96rem; font-style: italic; }
.solo-dev .heart {
  display: inline-block; color: var(--pink); font-style: normal;
  text-shadow: 0 0 14px rgba(255, 143, 199, .7);
  animation: heartbeat 1.9s ease-in-out infinite;
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.24); }
  24% { transform: scale(1); }
  36% { transform: scale(1.17); }
  48% { transform: scale(1); }
}



/* ---------------- reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}