/* ============================================================
   DESTINY PALM — design tokens + base + components
   Mobile-first, 375–430px column. Gold / ivory / pastel.
   Ported from the Claude Design handoff (Destiny Palm/styles.css).
   ============================================================ */

:root {
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6l3.1 6.9 7.4.8-5.5 5 1.5 7.3-6.5-3.7-6.5 3.7 1.5-7.3-5.5-5 7.4-.8z'/%3E%3C/svg%3E");
  /* palette */
  --paper:      #FFF8E8;   /* warm ivory */
  --paper-2:    #FAF1DC;   /* cream */
  --card:       #FFFDF6;   /* near-white card */
  --ink:        #2A1830;   /* deep plum/espresso */
  --ink-soft:   #5b4a59;   /* muted text */
  --ink-faint:  #8a7b88;

  --gold:       #D9A441;
  --gold-2:     #E8B84E;
  --gold-deep:  #b5832b;
  --gold-wash:  #F6E7C4;

  --pink:       #F7B7D2;
  --lavender:   #C9B6FF;
  --mint:       #BFE8D4;
  --peach:      #FFD6B8;

  --line:       #2A1830;   /* thin dark outline */
  --line-soft:  rgba(42,24,48,.14);

  /* type */
  --serif: "Fraunces", Georgia, serif;
  --sans:  "Plus Jakarta Sans", system-ui, sans-serif;

  /* shape */
  --r-sm: 14px;
  --r:    20px;
  --r-lg: 28px;
  --r-xl: 36px;

  --shadow-soft: 0 10px 30px -12px rgba(42,24,48,.20);
  --shadow-card: 0 2px 0 rgba(42,24,48,.85), 0 14px 34px -18px rgba(42,24,48,.35);
  --shadow-pop:  0 18px 50px -20px rgba(42,24,48,.45);

  --maxw: 430px;
}

/* Japanese locale — swap to Noto JP fonts */
.lang-ja {
  --serif: "Noto Serif JP", "Fraunces", Georgia, serif;
  --sans:  "Noto Sans JP", "Plus Jakarta Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background:
    radial-gradient(120% 60% at 50% -10%, #fffdf6 0%, var(--paper) 42%, var(--paper-2) 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* mobile = full-bleed (edge-to-edge); web/desktop = centered card on a soft textured field */
.stage {
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background:
    repeating-linear-gradient(135deg, rgba(42,24,48,.012) 0 22px, transparent 22px 44px),
    linear-gradient(160deg, #f4ecd9, #efe4cd);
}

.app {
  position: relative;
  width: 100%;
  height: 100dvh;
  background:
    radial-gradient(120% 40% at 50% -6%, #fffef9 0%, var(--paper) 46%, var(--paper-2) 100%);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* mobile: no max-width, no frame -> fills the whole screen */
}
@media (min-width: 640px) {
  /* web/desktop: the outlined card on the textured field (like the reference jpeg).
     Breakpoint = facecard's Tailwind `sm` (40rem/640px): below this the column stays
     FULL-BLEED edge-to-edge mobile (no frame); at/above it becomes the outlined card. */
  .stage { padding: 20px; }
  .app {
    max-width: var(--maxw);
    height: calc(100dvh - 40px);
    border-radius: 34px;
    box-shadow: 0 0 0 1px rgba(42,24,48,.06), 0 40px 90px -40px rgba(42,24,48,.45);
  }
}

[hidden] { display: none !important; }

/* ---------- typography ---------- */
h1,h2,h3,h4 { font-family: var(--serif); font-weight: 600; margin: 0; line-height: 1.04; letter-spacing: -.01em; }
.eyebrow {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display: inline-flex; align-items: center; gap: 6px;
}
.serif-italic { font-style: italic; }
p { margin: 0; }

/* ---------- buttons ---------- */
.btn {
  -webkit-appearance: none; appearance: none;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 16px;
  min-height: 54px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%;
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
  user-select: none;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  color: var(--ink);
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  box-shadow: 0 3px 0 var(--gold-deep), 0 12px 26px -12px rgba(181,131,43,.85);
}
.btn-primary:hover { box-shadow: 0 3px 0 var(--gold-deep), 0 16px 32px -12px rgba(181,131,43,.95); }
.btn-primary:active { box-shadow: 0 1px 0 var(--gold-deep), 0 8px 18px -12px rgba(181,131,43,.85); }
.btn-ghost {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 2px 0 var(--line);
}
.btn-ghost:hover { background: #fff; }
.btn-soft {
  border-color: var(--line-soft);
  background: rgba(42,24,48,.06);
  color: var(--ink-faint);
  font-weight: 700;
}
.btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn[disabled]:active { transform: none; }

.btn-row { display: flex; gap: 10px; }
.btn-row .btn { width: auto; flex: 1; }

/* ---------- pills / chips / badges ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1.4px solid var(--line);
  background: var(--card);
  white-space: nowrap;
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(42,24,48,.045);
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ---------- generic card ---------- */
.card {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
}
.card-soft {
  background: var(--card);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
}

/* tint backgrounds */
.t-pink     { background: var(--pink); }
.t-lavender { background: var(--lavender); }
.t-mint     { background: var(--mint); }
.t-peach    { background: var(--peach); }
.t-gold     { background: var(--gold-wash); }

/* ---------- decorative shapes layer ---------- */
.shape {
  position: absolute;
  pointer-events: none;
  color: var(--gold);
  opacity: .9;
  z-index: 0;
}
.shape svg { display: block; overflow: visible; }
.float-a { animation: floatA 7s ease-in-out infinite; }
.float-b { animation: floatB 9s ease-in-out infinite; }
.float-c { animation: floatC 6s ease-in-out infinite; }
@keyframes floatA { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-10px) rotate(6deg)} }
@keyframes floatB { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(9px) rotate(-7deg)} }
@keyframes floatC { 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-7px) rotate(5deg)} }

@keyframes twinkle { 0%,100%{opacity:.25; transform:scale(.85)} 50%{opacity:1; transform:scale(1.1)} }
.twinkle { animation: twinkle 2.6s ease-in-out infinite; }

/* ============================================================
   LANDING
   ============================================================ */
.wrap { position: relative; z-index: 1; padding: 0 18px 120px; }

/* header */
.app-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 18px;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.logo { display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-weight: 600; font-size: 19px; letter-spacing: -.01em; }
.logo .mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--gold-wash); border: 1.4px solid var(--line); }
.header-links { display: flex; gap: 16px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.header-links a { cursor: pointer; }
.header-links a:hover { color: var(--ink); }

/* hero */
.hero { position: relative; padding: 26px 0 8px; text-align: center; }
.hero h1 { font-size: 41px; line-height: .98; letter-spacing: -.02em; }
.hero h1 em { color: var(--gold-deep); }
.hero .sub { margin: 16px auto 0; max-width: 33ch; color: var(--ink-soft); font-size: 15.5px; line-height: 1.5; }
.hero-cta { margin-top: 20px; }
.hero .micro { margin-top: 11px; font-size: 12.5px; color: var(--ink-faint); font-weight: 600; }

/* phone/report mockup */
.mock {
  position: relative;
  margin: 26px auto 0;
  width: 250px;
  border-radius: 30px;
  background: linear-gradient(170deg, #fffef9, #fff7e6);
  border: 1.6px solid var(--line);
  box-shadow: var(--shadow-pop);
  padding: 16px 14px 18px;
  z-index: 2;
}
.mock .scan {
  position: relative;
  height: 196px; border-radius: 20px;
  background: radial-gradient(80% 70% at 50% 35%, #fff3d6, #f7e3b6);
  border: 1.4px solid var(--line);
  overflow: hidden;
  display: grid; place-items: center;
}
.mock .scan::after {
  content:""; position:absolute; left:0; right:0; height: 40%;
  background: linear-gradient(180deg, rgba(232,184,78,0), rgba(232,184,78,.55), rgba(232,184,78,0));
  animation: sweep 2.8s ease-in-out infinite;
}
@keyframes sweep { 0%{transform:translateY(-60%)} 100%{transform:translateY(220%)} }
.mock .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.mock .tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  padding: 5px 9px; border-radius: 999px; border: 1.2px solid var(--line);
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.mock-cap { margin-top: 11px; font-size: 11px; font-weight: 700; color: var(--ink-faint); text-align:center; letter-spacing:.06em; text-transform: uppercase; }

/* minimal report-cover preview (hero) */
.cover { text-align: center; padding: 2px 4px 4px; }
.cv-head { display: flex; align-items: center; justify-content: space-between; }
.cv-brand { display: inline-flex; align-items: center; gap: 5px; font-family: var(--serif); font-weight: 600; font-size: 13px; color: var(--ink); white-space: nowrap; }
.cv-pdf { font-size: 9px; font-weight: 800; letter-spacing: .12em; padding: 3px 8px; border-radius: 999px; border: 1.2px solid var(--line); background: var(--gold-wash); color: var(--ink); }
.cv-art { position: relative; margin: 16px auto 13px; width: 116px; height: 116px; display: grid; place-items: center; border-radius: 22px; background: radial-gradient(60% 60% at 50% 42%, #fff4d8, #f8e8c8); border: 1.3px solid var(--line); }
.cv-art::after { content: ""; position: absolute; width: 74px; height: 74px; border-radius: 50%; background: radial-gradient(circle, rgba(232,184,78,.5), transparent 70%); }
.cv-art svg { position: relative; z-index: 1; }
.cv-title { font-family: var(--serif); font-size: 20px; line-height: 1; }
.cv-sub { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); margin-top: 5px; }
.cv-chips { display: flex; justify-content: center; gap: 6px; margin-top: 13px; }
.cv-chips span { font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 999px; border: 1.2px solid var(--line); background: var(--card); }

/* badge strip */
.badge-strip { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 30px; }

/* social proof — outlined white badge */
.social { margin: 14px auto 0; display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 8px; background: #fff; border: 1.4px solid var(--line); border-radius: 18px; padding: 8px 14px; box-shadow: 0 2px 0 var(--line); max-width: 100%; }
.social .stars { display: inline-flex; gap: 1px; font-size: 12px; line-height: 1; letter-spacing: 1px; }
.social .st { font-size: clamp(11px, 3.3vw, 12.5px); font-weight: 700; color: var(--ink-soft); text-align: center; }

/* scroll cue */
.see-wrap { text-align: center; margin-top: 22px; }
.see-more {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 999px;
  border: 1.4px solid var(--line); background: var(--card);
  font-family: var(--sans); font-weight: 700; font-size: 12.5px; color: var(--ink);
  cursor: pointer; box-shadow: 0 2px 0 var(--line); white-space: nowrap;
}
.see-more:hover { background: #fff; }
.see-more .dn { display: inline-flex; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 0%,100%{transform:translateY(0)} 50%{transform:translateY(3px)} }

/* stat trio */
.stat-row { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(6px, 2vw, 9px); margin-top: 14px; }
.stat { text-align: center; padding: clamp(11px, 3.4vw, 15px) clamp(4px, 1.8vw, 8px); border-radius: var(--r); border: 1.5px solid var(--line); background: var(--card); box-shadow: var(--shadow-card); }
.stat .se { font-size: clamp(18px, 5.4vw, 22px); line-height: 1; margin-bottom: 7px; }

/* ---- what is Destiny Palm ---- */
.about { position: relative; overflow: hidden; padding: 26px 22px; border-radius: var(--r-lg); border: 1.5px solid var(--line); background: linear-gradient(158deg, var(--gold-wash), #fffdf6 68%); box-shadow: var(--shadow-card); }
.about-motif { position: absolute; right: -24px; bottom: -30px; opacity: .12; transform: rotate(-12deg); pointer-events: none; }
.about .eyebrow, .about h2, .about p { position: relative; z-index: 1; }
.about h2 { font-size: 25px; margin-top: 11px; letter-spacing: -.01em; line-height: 1.06; }
.about p { margin-top: 12px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); max-width: 38ch; }
.stat .sn { font-family: var(--serif); font-size: clamp(16px, 5vw, 23px); font-weight: 600; line-height: 1.08; letter-spacing: -.01em; overflow-wrap: anywhere; }
.stat .sl { margin-top: 6px; font-size: clamp(9.5px, 2.9vw, 11px); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); line-height: 1.25; overflow-wrap: anywhere; }

/* section header */
.sec { margin-top: 46px; }
.sec-head { text-align: center; margin-bottom: 18px; }
.sec-head h2 { font-size: 28px; letter-spacing: -.015em; }
.sec-head p { margin-top: 8px; color: var(--ink-soft); font-size: 14.5px; max-width: 32ch; margin-left:auto; margin-right:auto; }

/* privacy trio */
.trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; }
.trio .card-soft { padding: 14px 10px; text-align: center; }
.trio .ic { width: 34px; height: 34px; margin: 0 auto 9px; display: grid; place-items: center; border-radius: 50%; border: 1.3px solid var(--line); }
.trio b { font-size: 12.5px; line-height: 1.25; display: block; }

/* steps */
.steps { display: grid; gap: 13px; }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  padding: 16px;
}
.step .num {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  border: 1.5px solid var(--line);
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 600; font-size: 19px;
  box-shadow: 0 2px 0 var(--gold-deep);
}
.step h3 { font-size: 18px; }
.step p { margin-top: 4px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.45; }

/* report grid */
.report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.report-card { padding: 15px 14px; border-radius: var(--r); position: relative; overflow: hidden; }
.report-card .rc-ic { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; border: 1.3px solid var(--line); background: rgba(255,255,255,.55); margin-bottom: 10px; }
.report-card h3 { font-size: 15.5px; line-height: 1.1; }
.report-card p { margin-top: 5px; font-size: 12px; color: var(--ink-soft); line-height: 1.4; }

/* report-preview slideshow */
#preview { margin-top: 14px; }          /* sit right under the headline, no big gap */
.preview-panel {
  position: relative;
  max-width: 320px;                     /* compact, tidy teaser card (not a giant block) */
  margin-left: auto; margin-right: auto;
  padding: 12px 12px 12px;
  border-radius: var(--r-lg);
  background: linear-gradient(168deg, var(--card), var(--paper-2));
  border: 1.6px solid var(--line);
  box-shadow: var(--shadow-card);
}
.preview-panel .pv-head { text-align: center; margin-bottom: 9px; }
.preview-panel .pv-head .eyebrow {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9.5px; letter-spacing: .14em;
}
.preview-panel .pv-head h2 {
  margin-top: 4px; font-size: 14.5px; font-weight: 600;
  line-height: 1.2; letter-spacing: -.005em; color: var(--ink);
}
.slide-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;                  /* shorter than full A4 -> smaller, easier to show */
  border-radius: var(--r);
  overflow: hidden;
  border: 1.4px solid var(--line);
  background: radial-gradient(60% 60% at 50% 38%, #fff4d8, #f4e6c6);
  box-shadow: var(--shadow-soft);
}
.slide-stage .slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;         /* show the report's title/header — the recognizable part */
  opacity: 0;
  transition: opacity .8s ease;
}
.slide-stage .slide.is-active { opacity: 1; }
/* soft gold vignette to frame the page edges */
.slide-stage::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(217,164,65,.35), inset 0 -40px 50px -30px rgba(42,24,48,.4);
}
@media (prefers-reduced-motion: reduce) {
  .slide-stage .slide { transition: none; }
}

/* recent-buyer social-proof toast */
.buyer-toast {
  position: fixed; left: 10px; top: 50%; bottom: auto; z-index: 25;
  display: flex; align-items: center; gap: 8px;
  max-width: 208px; padding: 7px 11px 7px 7px;
  border-radius: 13px;
  background: rgba(255,253,246,.92);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  border: 1.3px solid var(--line);
  box-shadow: 0 2px 0 rgba(42,24,48,.5), 0 14px 28px -14px rgba(42,24,48,.4);
  opacity: 0; transform: translate(-14px, -50%) scale(.96);
  transition: opacity .45s ease, transform .45s var(--e-out);
  pointer-events: none;             /* never intercepts taps — zero burden */
}
.buyer-toast.is-show { opacity: 1; transform: translate(0, -50%) scale(1); }
.buyer-toast .bt-avatar {
  flex: none; width: 28px; height: 28px;
  display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 25%, var(--gold-2), var(--gold-deep));
  color: #fff8e8; border: 1.3px solid var(--line);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.45);
}
.buyer-toast .bt-avatar svg { width: 15px; height: 15px; }
.buyer-toast .bt-body { min-width: 0; }
.buyer-toast .bt-head { display: flex; align-items: center; gap: 5px; }
.buyer-toast .bt-title {
  font-family: var(--serif); font-weight: 600; font-size: 10px;
  letter-spacing: .01em; color: var(--gold-deep);
  text-transform: uppercase;
}
.buyer-toast .bt-check {
  display: inline-grid; place-items: center; width: 12px; height: 12px;
  border-radius: 50%; background: #2e7d52; color: #fff;
}
.buyer-toast .bt-check svg { width: 9px; height: 9px; }
.buyer-toast .bt-text {
  margin: 1px 0 0; font-size: 11px; line-height: 1.28; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.buyer-toast .bt-ago {
  display: block; margin-top: 1px; font-size: 9.5px; color: var(--ink-faint);
}
.funnel-open .buyer-toast { display: none; }   /* silent during the questionnaire */
@media (prefers-reduced-motion: reduce) {
  .buyer-toast { transition: none; }
}

/* =========================== CHECKOUT / PAYWALL =========================== */
.checkout {
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px 16px 24px;
}
.co-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 4px;
}
.co-head .logo {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--serif); font-weight: 600; font-size: 16px; letter-spacing: -.01em;
  color: var(--ink);
}
.co-head .co-mark {
  display: inline-grid; place-items: center; width: 26px; height: 26px;
  border-radius: 9px; color: var(--gold-deep);
  background: var(--gold-wash); border: 1.4px solid var(--line);
}
.co-progress {
  flex: 1; max-width: 130px; height: 7px; border-radius: 99px;
  background: #fff; border: 1.4px solid var(--line); overflow: hidden;
}
.co-progress span { display: block; height: 100%; width: 100%; background: var(--gold); }

/* countdown banner */
.co-timer {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 13px 14px 12px; border-radius: 16px; text-align: center;
  background: linear-gradient(100deg, #fff3d2, #ffe7c4);
  border: 1.4px solid var(--line);
  box-shadow: 0 2px 0 rgba(42,24,48,.55);
  transition: background .3s ease, border-color .3s ease;
}
.co-timer-row { display: flex; align-items: center; justify-content: center; gap: 7px; }
.co-timer-ic { display: inline-grid; place-items: center; color: var(--gold-deep); }
.co-timer-label {
  font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--gold-deep);
  text-transform: uppercase;
}
.co-timer-clock {
  margin: 3px 0 2px;
  font-family: var(--serif); font-weight: 800; font-size: 40px; line-height: 1;
  color: var(--gold-deep); letter-spacing: .03em;
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.co-timer-note {
  font-size: 12.5px; line-height: 1.45; font-weight: 600; color: var(--ink-soft);
}
.co-timer-was {
  font-weight: 900; font-size: 15px; color: #c0392b; white-space: nowrap;
}
/* standalone price highlight after the countdown — light, "cheap" feel, elegant */
.co-pricehit {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 9px 14px 8px; border-radius: 14px;
  background: linear-gradient(180deg, #fff 0%, #f6fbf8 140%);
  border: 1px solid #d6ecde; box-shadow: 0 2px 10px rgba(22,163,74,.06);
}
.co-pricehit-main { display: flex; align-items: baseline; justify-content: center; gap: 7px; }
.co-pricehit-note {
  font-size: 10.5px; font-weight: 700; color: #1aa653; letter-spacing: .01em;
}
.co-pricehit-pre { font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
.co-pricehit-now {
  font-size: 17px; font-weight: 600; color: #1aa653; letter-spacing: 0;
  font-variant-numeric: tabular-nums; animation: coPriceHit 2.6s ease-in-out infinite;
}
.co-pricehit::before {
  content: ""; position: absolute; top: 0; left: -55%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(26,166,83,.1), transparent);
  transform: skewX(-18deg); animation: coPriceShine 3.6s ease-in-out infinite; pointer-events: none;
}
@keyframes coPriceHit { 0%, 100% { opacity: .9; } 50% { opacity: 1; } }
@keyframes coPriceShine { 0% { left: -55%; } 55%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) {
  .co-pricehit-now { animation: none; } .co-pricehit::before { animation: none; opacity: 0; }
}
/* honest urgency: warning state in the final 5 minutes */
.co-timer.is-urgent {
  background: linear-gradient(100deg, #ffe1d6, #ffd2c4);
  border-color: #c0392b;
}
.co-timer.is-urgent .co-timer-clock { color: #c0392b; animation: coUrgent 1s ease-in-out infinite; }
.co-timer.is-urgent .co-timer-label,
.co-timer.is-urgent .co-timer-note,
.co-timer.is-urgent .co-timer-ic { color: #c0392b; }
@keyframes coUrgent { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* heading */
.co-intro { margin-top: 2px; }
.co-h1 {
  font-family: var(--serif); font-weight: 600; font-size: 25px; line-height: 1.08;
  letter-spacing: -.01em; color: var(--ink); text-wrap: balance;
}
.co-sub {
  margin-top: 7px; font-size: 13px; line-height: 1.5; color: var(--ink-soft);
  text-align: justify; text-justify: inter-word;
}
/* pay page only: the price in the subheading stays un-bold so it reads light/cheap
   (checkout keeps its bold emphasis) */
[data-dp-page="pay"] .co-sub b { font-weight: 400; }

/* shared card look */
.checkout .card {
  background: var(--card); border: 1.5px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-card);
}

/* benefit checklist */
.co-benefits { display: grid; gap: 9px; padding: 13px 14px; }
.co-benefit {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.co-check {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--gold); color: #fff8e8;
  border: 1.4px solid var(--line);
}

/* dynamic "we found…" findings teaser (premium, ruled list — easy to scan) */
.co-findings { display: block; padding: 12px 15px 13px; }
.co-find-head {
  margin: 0 0 5px; padding-bottom: 7px; border-bottom: 1px solid rgba(176,131,43,.16);
  font-size: 9.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold-deep);
}
.co-find {
  display: flex; align-items: flex-start; gap: 11px; padding: 8px 0;
  font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.55;
}
.co-find + .co-find { border-top: 1px solid rgba(176,131,43,.12); }
.co-find:last-child { padding-bottom: 1px; }
.co-find-ic {
  flex: none; margin-top: 1px; display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--gold-wash, #f6e7c4); color: var(--gold-deep);
  border: 1.4px solid var(--gold);
}
.co-find-tx { flex: 1; }
.co-find-n { color: var(--gold-deep); font-weight: 900; }
/* locked value chip → blurred + animated, stays inline (never breaks the sentence) */
.co-lock {
  display: inline-flex; align-items: center; gap: 3px; vertical-align: baseline;
  white-space: nowrap; padding: 0 7px; margin: 0 1px; border-radius: 7px;
  background: var(--gold-wash, #f6e7c4); border: 1px solid var(--gold); color: var(--gold-deep);
  animation: coLockGlow 2s ease-in-out infinite;
}
.co-lock-ic { flex: none; opacity: .75; }
.co-lock-pre { font-weight: 900; margin-right: 1px; }
.co-lock-v { filter: blur(4px); font-weight: 900; user-select: none; letter-spacing: .04em; }
@keyframes coLockGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217,164,65,0); }
  50% { box-shadow: 0 0 0 3px rgba(217,164,65,.2); }
}
@media (prefers-reduced-motion: reduce) {
  .co-lock { animation: none; }
}

/* ---- WhatsApp testimonial slider ---- */
.co-testi { text-align: center; padding: 16px 14px 15px; }
.co-testi-rating { display: inline-flex; align-items: baseline; gap: 7px; margin: 0 auto 7px; }
.co-testi-stars { color: #e8a91b; font-size: 14px; letter-spacing: 1.5px; }
.co-testi-rtxt { font-size: 12px; color: var(--ink-soft, #5b4a59); }
.co-testi-rtxt b { color: var(--ink, #2A1830); font-weight: 800; }
.co-testi-h {
  margin: 0 0 14px; font-family: var(--serif, Georgia, serif); font-weight: 600;
  font-size: 19px; line-height: 1.25; color: var(--ink, #2A1830);
}
.co-testi-stage { position: relative; }
.co-testi-viewport { overflow: hidden; border-radius: 22px; transition: height .4s cubic-bezier(.45,.05,.2,1); }
.co-testi-track { display: flex; align-items: flex-start; transition: transform .55s cubic-bezier(.45,.05,.2,1); }
/* tap left / right to change testimonial */
.co-testi-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line, #E7DCC4);
  background: rgba(255,253,246,.94); color: var(--ink, #2A1830); cursor: pointer;
  font: 22px/1 var(--serif, serif); display: grid; place-items: center; padding-bottom: 3px;
  box-shadow: 0 3px 10px rgba(42,24,48,.18); transition: transform .15s, background .15s; -webkit-tap-highlight-color: transparent;
}
.co-testi-arrow:hover { background: #fff; }
.co-testi-arrow:active { transform: translateY(-50%) scale(.9); }
.co-testi-arrow.prev { left: 6px; } .co-testi-arrow.next { right: 6px; }
.co-testi-slide { flex: 0 0 100%; min-width: 0; display: flex; padding: 3px; }
/* white testimonial card: quote title → screenshot → bonus badge (matches the reference) */
.testi-card {
  width: 100%; display: flex; flex-direction: column; align-items: center;
  background: var(--card, #FFFDF6); border: 1px solid var(--line, #E7DCC4); border-radius: 22px;
  box-shadow: 0 8px 22px rgba(42,24,48,.09); padding: 16px 15px 16px;
}
.testi-title {
  margin: 0 0 12px; min-height: 2.7em; display: flex; align-items: center; justify-content: center;
  text-align: center; font-family: var(--serif, Georgia, serif); font-weight: 700; font-size: 16.5px;
  line-height: 1.32; letter-spacing: -.01em; color: var(--ink, #2A1830);
}
.testi-shot {
  width: 100%; background: #0b141a; border-radius: 14px;
  overflow: hidden; box-shadow: 0 5px 16px rgba(42,24,48,.18);
}
.testi-img { display: block; width: 100%; height: auto; }
.testi-badge {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 15px;
  background: linear-gradient(180deg, #fdeede, #f9ddc4); border: 1px solid #f1cfa8;
  color: #c9762b; font-weight: 800; font-size: 13px; padding: 8px 19px; border-radius: 999px;
  box-shadow: 0 3px 9px rgba(201,118,43,.16);
}
/* dark WhatsApp card sits flush inside the screenshot frame (no own border/shadow) */
.testi-shot .wa-card { width: 100%; display: flex; flex-direction: column; flex: 1; text-align: left; }
.wa-top { display: flex; align-items: center; gap: 10px; background: #1f2c34; padding: 10px 13px; }
.wa-av { position: relative; width: 37px; height: 37px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; flex: none; }
.wa-on { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: #25d366; border: 2px solid #1f2c34; }
.wa-id { display: flex; flex-direction: column; line-height: 1.32; flex: 1; min-width: 0; }
.wa-id b { display: flex; align-items: center; gap: 4px; color: #e9edef; font-size: 14.5px; font-weight: 600; }
.wa-vb { flex: none; }
.wa-id i { color: #8aa0ac; font-size: 11px; font-style: normal; }
.wa-icons { display: flex; gap: 15px; color: #8696a0; flex: none; }
.wa-body {
  flex: 1 1 auto; padding: 13px 13px 15px; background: #0b141a;
  background-image: radial-gradient(rgba(255,255,255,.022) 1px, transparent 1px); background-size: 16px 16px;
  display: flex; flex-direction: column; gap: 8px; min-height: 120px; justify-content: flex-end;
}
.wa-day {
  align-self: center; margin-bottom: 5px; background: #18242b; color: #8aa0ac; font-size: 9px; font-weight: 700;
  letter-spacing: .07em; padding: 3px 11px; border-radius: 8px;
}
.wa-bub {
  align-self: flex-end; max-width: 86%; background: #005c4b; color: #e9edef; font-size: 13.5px; line-height: 1.46;
  padding: 7px 11px 7px; border-radius: 11px 4px 11px 11px; box-shadow: 0 1px 1px rgba(0,0,0,.22);
}
.wa-meta { display: inline-block; margin-left: 8px; font-size: 10px; color: #93c9b8; vertical-align: bottom; white-space: nowrap; }
.wa-meta svg { vertical-align: -1px; margin-left: 2px; }
.wa-foot {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  background: #131f27; color: #8db9a6; font-size: 10.5px; font-weight: 600; padding: 8px 10px;
  border-top: 1px solid rgba(255,255,255,.04);
}
.co-testi-dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
.co-testi-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line, #E7DCC4); transition: .35s; cursor: pointer; }
.co-testi-dot.on { background: var(--gold, #D9A441); width: 18px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { .co-testi-track { transition: none; } }

/* premium-contents section */
.co-premium { overflow: hidden; padding: 0; }
.co-premium-head {
  padding: 14px 15px; border-bottom: 1.5px solid var(--line);
  background: linear-gradient(180deg, #fdeebf, #f9e2ad);
}
.co-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-deep);
}
.co-premium-h {
  margin-top: 4px; font-family: var(--serif); font-weight: 600; font-size: 20px;
  line-height: 1.1; letter-spacing: -.01em; color: var(--ink);
}
.co-premium-sub {
  margin-top: 6px; font-size: 12px; line-height: 1.4; color: var(--ink-soft); text-wrap: pretty;
}
.co-pages {
  display: grid; grid-template-columns: 1fr;
}
.co-page {
  display: grid; grid-template-columns: 34px 1fr; gap: 11px;
  padding: 11px 14px; border-top: 1px solid var(--line-soft);
}
.co-page:first-child { border-top: 0; }
.co-num {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 9px; background: var(--ink); color: #fff7e6;
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.co-page-t { font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--ink); }
.co-page-d { margin-top: 3px; font-size: 11px; line-height: 1.35; color: var(--ink-faint); }
@media (min-width: 380px) {
  .co-pages { grid-template-columns: 1fr 1fr; }
  .co-page:nth-child(2) { border-top: 0; }
  .co-page:nth-child(even) { border-left: 1px solid var(--line-soft); }
}

/* personal-report preview (blurred teaser) */
.co-preview { padding: 14px; }
.co-preview-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.co-preview-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-deep);
}
.co-preview-badge {
  display: grid; place-items: center; min-width: 30px; height: 26px; padding: 0 8px;
  border-radius: 9px; background: var(--ink); color: #fff7e6;
  font-family: var(--serif); font-weight: 600; font-size: 14px;
}
.co-preview-body {
  margin-top: 12px; display: grid; grid-template-columns: 0.9fr 1fr; gap: 12px; align-items: start;
}
.co-preview-thumb {
  border-radius: 14px; overflow: hidden; border: 1.4px solid var(--line);
  background: radial-gradient(60% 60% at 50% 35%, #fff4d8, #f1e2bf);
  aspect-ratio: 4 / 5;
}
.co-preview-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.co-preview-h {
  font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.05;
  color: var(--ink);
}
/* blurred placeholder bars */
.co-blur { display: grid; gap: 7px; }
.co-blur > span {
  height: 11px; border-radius: 99px; background: rgba(42,24,48,.5); filter: blur(2.2px);
}
.co-blur > span.w5 { width: 84%; background: rgba(42,24,48,.4); }
.co-blur > span.w4 { width: 78%; }
.co-blur > span.w3 { width: 62%; background: rgba(42,24,48,.32); }
.co-blur > span.sm { height: 8px; }
.co-blur > span.lg { height: 16px; background: rgba(42,24,48,.6); }
.co-preview-text .co-blur-lines { margin-top: 13px; }
.co-blur-cards { margin-top: 11px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.co-blur-cards > .co-blur {
  padding: 9px; border-radius: 12px; border: 1px solid var(--line-soft); background: rgba(255,255,255,.65);
}
.co-blur-wide {
  margin-top: 12px; padding: 11px 12px; border-radius: 13px;
  border: 1px solid var(--line-soft); background: rgba(255,255,255,.65);
}
.co-preview-tiles { margin-top: 11px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.co-tile {
  padding: 8px; border-radius: 12px; border: 1px solid var(--line-soft); background: var(--paper-2);
}
.co-tile-img { aspect-ratio: 4 / 3; border-radius: 8px; background: #e4d6bd; }
.co-tile .co-blur { margin-top: 8px; gap: 5px; }
.co-tile .co-blur > span { height: 7px; }

/* price + purchase */
.co-buy { margin-top: 2px; display: grid; gap: 10px; }

/* proof beside the CTA */
.co-trust {
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.co-stars { display: inline-flex; gap: 1px; color: var(--gold); line-height: 0; }
.co-stars svg { filter: drop-shadow(0 1px 0 rgba(181,131,43,.35)); }
.co-trust-text { font-size: 12px; font-weight: 700; color: var(--ink-soft); }

.co-pricehead { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 2px; }
.co-price { display: flex; align-items: baseline; gap: 8px; justify-content: center; }
.co-was {
  font-size: 13px; font-weight: 700; color: var(--ink-faint);
  text-decoration: line-through; text-decoration-color: rgba(42,24,48,.4);
  font-variant-numeric: tabular-nums;
}
.co-now {
  font-family: var(--serif); font-weight: 600; font-size: 23px; letter-spacing: 0;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.co-off {
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: #fff;
  background: #c0392b; padding: 4px 8px; border-radius: 99px; border: 1.4px solid var(--line);
  align-self: center; animation: coPop .5s cubic-bezier(.16,1,.3,1) both;
}
.co-save {
  text-align: center; margin-top: -2px;
  font-size: 12px; font-weight: 800; letter-spacing: .01em; color: var(--gold-deep);
}
/* ---- order summary (RINCIAN PESANAN) ---- */
.co-rincian {
  border: 1.5px solid var(--line, #E7DCC4); border-radius: 16px; padding: 15px 16px 13px;
  background: #fffdf9; box-shadow: 0 4px 14px rgba(42,24,48,.05);
}
.co-rin-head {
  font-size: 12px; font-weight: 800; letter-spacing: .03em; color: var(--ink, #2A1830);
  text-decoration: underline; text-underline-offset: 3px; margin-bottom: 11px;
}
.co-rin-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 6px 0; font-size: 14.5px; }
.co-rin-row span { color: var(--ink-soft, #5b4a59); }
.co-rin-row b {                                                   /* BIG value numbers → feels worth it */
  font-size: 18px; font-weight: 800; color: var(--ink, #2A1830); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.co-rin-disc span { color: var(--ink, #2A1830); font-weight: 700; }
.co-rin-disc b { color: #1a9d57; font-size: 18px; font-weight: 800; }   /* BIG green discount */
.co-rin-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  margin-top: 9px; padding-top: 11px; border-top: 1px solid var(--line, #E7DCC4);
}
.co-rin-total span { font-size: 13px; font-weight: 600; color: var(--ink-soft, #5b4a59); }
.co-rin-total b {                                                  /* SMALL + light → feels cheap & affordable */
  font-size: 14px; font-weight: 400; color: var(--ink, #2A1830); font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* order-bump upsell card (Weton 12-month add-on) — animated, high-conversion */
.co-bump {
  position: relative; display: flex; flex-direction: column; gap: 6px; cursor: pointer;
  margin-top: 8px; padding: 15px 15px 13px; border-radius: 18px; overflow: hidden;
  border: 2px dashed var(--gold); background: linear-gradient(180deg, #fffdf7 0%, var(--gold-wash, #f6e7c4) 140%);
  box-shadow: 0 6px 20px rgba(176,131,43,.14);
  animation: coBumpAttn 2.6s ease-in-out infinite, screenIn .5s ease both;
  transition: border-color .18s, box-shadow .18s, transform .18s, background .18s;
}
.co-bump:hover { transform: translateY(-1px); border-color: var(--gold-deep); }
.co-bump.is-on {
  border-style: solid; border-color: var(--gold-deep);
  background: linear-gradient(180deg, #fffaf0 0%, #fff 100%);
  box-shadow: 0 8px 26px rgba(176,131,43,.26); animation: screenIn .4s ease both, coBumpPop .42s ease;
}
/* shimmer sweep to catch the eye */
.co-bump::before {
  content: ""; position: absolute; top: 0; left: -60%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg); animation: coBumpShine 3.4s ease-in-out infinite; pointer-events: none;
}
.co-bump.is-on::before { animation: none; opacity: 0; }
.co-bump input { position: absolute; opacity: 0; width: 0; height: 0; }
.co-bump-badge {
  align-self: flex-start; font-size: 9.5px; font-weight: 900; letter-spacing: .09em;
  color: #fff; background: linear-gradient(90deg, var(--gold-deep), var(--gold, #d9a441));
  padding: 4px 10px; border-radius: 999px; text-transform: uppercase;
  box-shadow: 0 2px 7px rgba(176,131,43,.3);
}
.co-bump-title { font-family: var(--serif, serif); font-size: 16px; font-weight: 800; color: var(--ink); line-height: 1.28; }
.co-bump-desc { font-size: 12px; line-height: 1.5; color: var(--ink-soft); text-align: justify; text-justify: inter-word; }
.co-bump-pricing { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 3px; }
.co-bump-was { color: var(--ink-faint); text-decoration: line-through; font-size: 13px; }
.co-bump-now { color: var(--gold-deep); font-weight: 900; font-size: 18px; letter-spacing: -.01em; }
.co-bump-save {
  font-size: 11px; font-weight: 800; color: #1f7a4d; background: #e6f6ec;
  padding: 3px 9px; border-radius: 999px;
}
/* the explicit opt-in row (mini-CTA) */
.co-bump-optin {
  display: flex; align-items: center; gap: 10px; margin-top: 9px; padding: 10px 12px;
  border-radius: 12px; background: #fff; border: 1.5px solid var(--gold);
  transition: background .18s, border-color .18s;
}
.co-bump.is-on .co-bump-optin { background: var(--gold-deep); border-color: var(--gold-deep); }
.co-bump-check {
  flex: none; width: 22px; height: 22px; border-radius: 7px;
  border: 2px solid var(--gold-deep); background: #fff;
  display: inline-grid; place-items: center; color: #fff;
  transition: background .15s, transform .15s; animation: coBumpCheckPulse 2.2s ease-in-out infinite;
}
.co-bump-check svg { opacity: 0; transition: opacity .15s; }
.co-bump.is-on .co-bump-check { background: #fff; border-color: #fff; color: var(--gold-deep); animation: none; transform: scale(1.05); }
.co-bump.is-on .co-bump-check svg { opacity: 1; }
.co-bump-optin-label { font-size: 13.5px; font-weight: 800; color: var(--gold-deep); }
.co-bump.is-on .co-bump-optin-label { color: #fff; }
/* cheap-anchor: price decomposition so the add-on feels trivial */
.co-bump-permonth {
  display: block; margin-top: 1px; font-size: 11.5px; font-weight: 700; color: var(--gold-deep);
  letter-spacing: .005em;
}
/* total intentionally small + light (de-emphasized → no sticker shock) */
.co-total {
  text-align: center; margin: 7px 0 -2px; font-size: 11.5px; font-weight: 500;
  color: var(--ink-faint, #9a8f80); letter-spacing: .01em;
}
@keyframes coBumpAttn {
  0%, 100% { box-shadow: 0 6px 20px rgba(176,131,43,.14); }
  50% { box-shadow: 0 6px 22px rgba(176,131,43,.16), 0 0 0 4px rgba(217,164,65,.18); }
}
@keyframes coBumpShine { 0% { left: -60%; } 55%, 100% { left: 130%; } }
@keyframes coBumpPop { 0% { transform: scale(.985); } 55% { transform: scale(1.018); } 100% { transform: scale(1); } }
@keyframes coBumpCheckPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(176,131,43,.0); }
  50% { box-shadow: 0 0 0 5px rgba(217,164,65,.22); }
}
@media (prefers-reduced-motion: reduce) {
  .co-bump, .co-bump::before, .co-bump-check, .co-total { animation: none !important; }
}
.co-input {
  width: 100%; box-sizing: border-box;
  padding: 15px 16px; border-radius: 16px;
  border: 1.5px solid var(--line); background: #fff;
  font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--ink);
  box-shadow: var(--shadow-card); outline: none;
}
.co-input::placeholder { color: var(--ink-faint); font-weight: 500; }
.co-input:focus { box-shadow: 0 2px 0 var(--gold-deep), 0 14px 34px -18px rgba(42,24,48,.35); }
.co-cta {
  position: relative; overflow: hidden;
  width: 100%; padding: 17px 18px; border: 1.6px solid var(--line);
  border-radius: 99px; cursor: pointer;
  background: linear-gradient(168deg, var(--gold-2), var(--gold-deep));
  color: #fff8e8; font-family: var(--sans); font-weight: 800; font-size: 17px;
  letter-spacing: .005em; box-shadow: 0 3px 0 var(--line), 0 16px 34px -18px rgba(42,24,48,.5);
  transition: transform .12s ease, box-shadow .12s ease;
  animation: coPulse 2.6s ease-in-out infinite;
}
.co-cta:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line), 0 10px 22px -16px rgba(42,24,48,.5); }
/* keep the label + price crisp above the shimmer sweep */
.co-cta-label, .co-cta-price { position: relative; z-index: 1; }
.co-cta-price { font-weight: 700; }
/* one-shot shimmer sweep to draw the eye */
.co-cta::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: coShine 3.4s ease-in-out 1.2s infinite;
  pointer-events: none;
}
@keyframes coPulse {
  0%,100% { box-shadow: 0 3px 0 var(--line), 0 16px 34px -18px rgba(42,24,48,.5), 0 0 0 0 rgba(217,164,65,0); }
  50%     { box-shadow: 0 3px 0 var(--line), 0 16px 34px -18px rgba(42,24,48,.5), 0 0 0 7px rgba(217,164,65,.14); }
}
@keyframes coShine { 0% { transform: translateX(-120%); } 55%,100% { transform: translateX(120%); } }
@keyframes coPop { 0% { opacity: 0; transform: scale(.7); } 100% { opacity: 1; transform: scale(1); } }

/* risk-reversal chip under the CTA */
.co-guarantee {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--ink-soft);
  text-align: center;
}
.co-guarantee-ic { flex: none; display: inline-grid; place-items: center; color: var(--gold-deep); }

.co-foot {
  text-align: center; font-size: 11px; line-height: 1.5; font-weight: 600; color: var(--ink-faint);
}

/* ---- payment method picker (aligned rows; only our Xendit channels) ---- */
.co-pay { margin: 6px 0 2px; }
.co-pay-head { display: flex; align-items: center; gap: 12px; margin: 8px 0 12px; }
.co-pay-head span {
  font-family: var(--serif, Georgia, serif); font-weight: 700; font-size: 18px;
  color: var(--ink); white-space: nowrap;
}
.co-pay-head::after { content: ""; flex: 1; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-wash, #f6e7c4), rgba(176,131,43,0)); }
.co-pay-list { display: flex; flex-direction: column; gap: 9px; }
.pay-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 54px;
  border: 1.5px solid var(--line, #E7DCC4); border-radius: 14px; background: #fffdf9;
  cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.pay-row input {
  appearance: none; -webkit-appearance: none; flex: none; width: 21px; height: 21px; margin: 0;
  border: 2px solid #cabfa6; border-radius: 50%; position: relative; cursor: pointer; transition: border-color .15s;
}
.pay-row input:checked { border-color: var(--gold-deep, #b5832b); }
.pay-row input:checked::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--gold, #D9A441); }
.pay-ic { flex: none; width: 56px; height: 36px; display: grid; place-items: center; color: var(--gold-deep, #b5832b); }
.pay-logo { max-width: 100%; max-height: 26px; object-fit: contain; display: block; }
.pay-logo-lg { max-height: 34px; }   /* wordmark logos (Mandiri) render bigger, still inside the column */
.pay-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 14.5px; color: var(--ink); line-height: 1.28; }
.pay-tx b { font-weight: 700; }
.pay-tx small { font-size: 11.5px; font-weight: 500; color: var(--ink-soft); }
.pay-tag { flex: none; font-size: 10px; font-weight: 800; letter-spacing: .02em; color: #1a7f37;
  background: #e6f6ec; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.pay-row:has(input:checked), .pay-row.is-sel {
  border-color: var(--gold, #D9A441); background: #fff6e9; box-shadow: 0 0 0 1px var(--gold, #D9A441) inset;
}
.co-pay-secure {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin: 9px 0 0;
  font-size: 11.5px; font-weight: 600; color: var(--ink-soft, #8a7b88);
}
.co-pay-secure svg { flex: none; color: var(--gold-deep, #b5832b); }

/* sticky buy bar — fixed (out of flow, so it never reserves trailing space) */
.co-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px calc(11px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1.5px solid var(--line);
  transform: translateY(120%); opacity: 0; pointer-events: none;
  transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}
.co-sticky.is-show { transform: translateY(0); opacity: 1; pointer-events: auto; }
/* on the desktop card the page is short + the inline CTA is reachable → no sticky bar */
@media (min-width: 640px) { .co-sticky { display: none; } }
.co-sticky-price { display: flex; flex-direction: column; line-height: 1.05; }
.co-sticky-was {
  font-size: 11px; font-weight: 700; color: var(--ink-faint);
  text-decoration: line-through; font-variant-numeric: tabular-nums;
}
.co-sticky-now {
  /* light + green, no animation */
  font-family: var(--serif); font-weight: 300; font-size: 21px; color: #2f9e57;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.co-sticky-cta {
  flex: 1; min-width: 0; padding: 14px 16px; border: 1.6px solid var(--line);
  border-radius: 99px; cursor: pointer;
  background: linear-gradient(168deg, var(--gold-2), var(--gold-deep));
  color: #fff8e8; font-family: var(--sans); font-weight: 800; font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 3px 0 var(--line), 0 14px 28px -18px rgba(42,24,48,.5);
  transition: transform .12s ease;
}
.co-sticky-cta:active { transform: translateY(2px); }
/* animated CTA: a gentle breathe (pulse ring) + a periodic shine sweep — draws the eye, feels alive */
.co-sticky-cta { position: relative; overflow: hidden; animation: stickyCtaBreathe 2.6s ease-in-out infinite; }
.co-sticky-cta > span { position: relative; z-index: 1; }
.co-sticky-cta::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.55) 50%, transparent 68%);
  transform: translateX(-120%);
  animation: coShine 2.8s ease-in-out .8s infinite;
}
@keyframes stickyCtaBreathe {
  0%, 100% { transform: scale(1);    box-shadow: 0 3px 0 var(--line), 0 14px 28px -18px rgba(42,24,48,.5), 0 0 0 0 rgba(217,164,65,0); }
  50%      { transform: scale(1.025); box-shadow: 0 3px 0 var(--line), 0 16px 32px -16px rgba(42,24,48,.5), 0 0 0 6px rgba(217,164,65,.18); }
}
@media (prefers-reduced-motion: reduce) {
  .co-sticky-now, .co-sticky-cta, .co-sticky-cta::before { animation: none; }
  .co-sticky-now { transform: none; }
}

/* staggered entrance for the checkout column */
.checkout > .co-head { animation: screenIn .5s ease both; }
.checkout > .co-timer { animation: screenIn .5s ease .06s both; }
.checkout > .co-pricehit { animation: screenIn .5s ease .1s both; }
.checkout > .co-intro { animation: screenIn .5s ease .12s both; }
.checkout > .co-findings { animation: screenIn .5s ease .16s both; }
.checkout > .co-benefits { animation: screenIn .5s ease .2s both; }
.checkout > .co-premium { animation: screenIn .5s ease .24s both; }
.checkout > .co-preview { animation: screenIn .5s ease .30s both; }
.checkout > .co-buy { animation: screenIn .5s ease .36s both; }

@media (prefers-reduced-motion: reduce) {
  .co-cta, .co-sticky-cta { transition: none; animation: none; }
  .co-cta::before { animation: none; display: none; }
  .co-off, .co-save { animation: none; }
  .co-timer.is-urgent .co-timer-clock { animation: none; }
  .co-sticky { transition: opacity .2s ease; transform: none; }
  .checkout > * { animation: none !important; }
}

/* premium */
.premium {
  position: relative; overflow: hidden;
  padding: 24px 20px;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, #2A1830, #3d2347 60%, #4a2a52);
  color: #fbf3e4;
  border: 1.5px solid var(--line);
  box-shadow: var(--shadow-pop);
}
.premium h2 { color: #fff; font-size: 26px; }
.premium .lead { color: #e7d8c8; font-size: 14px; margin-top: 8px; }
.premium ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 11px; }
.premium li { display: flex; align-items: center; gap: 11px; font-size: 14px; font-weight: 600; }
.premium li .tick {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  display: grid; place-items: center; color: var(--ink);
}
.premium .btn { margin-top: 20px; }
.premium .price-note { margin-top: 11px; text-align: center; font-size: 12px; color: #c9b3d6; }

/* FAQ */
.faq { display: grid; gap: 10px; }
.faq-item { padding: 0; overflow: hidden; }
.faq-q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 16px; font-family: var(--sans); font-weight: 700; font-size: 14.5px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink);
}
.faq-q .pm { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.3px solid var(--line); display: grid; place-items: center; transition: transform .25s ease; font-size: 16px; }
.faq-item.open .faq-q .pm { transform: rotate(45deg); background: var(--gold-wash); }
.faq-a { max-height: 0; opacity: 0; transition: max-height .3s ease, opacity .25s ease, padding .3s ease; padding: 0 16px; }
.faq-item.open .faq-a { max-height: 320px; opacity: 1; padding: 0 16px 16px; }
.faq-a p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }

/* disclaimer */
.disclaimer { margin-top: 26px; font-size: 11.5px; color: var(--ink-faint); line-height: 1.5; text-align: center; padding: 0 6px; }
.foot { margin-top: 22px; text-align: center; color: var(--ink-faint); font-size: 12px; }

/* sticky bottom CTA */
.sticky-cta {
  position: sticky; bottom: 0; z-index: 30;
  margin: 0 -18px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(255,248,232,0), var(--paper) 32%);
  transition: transform .3s ease, opacity .3s ease;
}
.sticky-cta.hidden { transform: translateY(120%); opacity: 0; pointer-events: none; }

/* ============================================================
   QUESTIONNAIRE FUNNEL
   ============================================================ */
.funnel { position: relative; z-index: 1; min-height: 100%; display: flex; flex-direction: column; }

.funnel-top { position: sticky; top: 0; z-index: 20; padding: 14px 18px 12px; background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(8px); }
.funnel-top .row { display: flex; align-items: center; gap: 12px; }
.fn-back { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1.4px solid var(--line); background: var(--card); display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.fn-back:hover { background: #fff; }
.fn-back[disabled] { opacity: .35; cursor: default; }
.fn-back[hidden] { visibility: hidden; display: grid !important; }
.fn-step-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-deep); }
.fn-quit { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--ink-faint); cursor: pointer; background: none; border: 0; font-family: var(--sans); }
.progress-track { margin-top: 11px; height: 7px; border-radius: 999px; background: rgba(42,24,48,.10); overflow: hidden; }
.progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--gold-2)); transition: width .45s cubic-bezier(.4,0,.2,1); box-shadow: 0 0 12px rgba(217,164,65,.6); }

/* sticky bottom CTA bar of the funnel */
.funnel-bottom {
  position: sticky; bottom: 0; top: auto; z-index: 20;
  border-top: 1px solid var(--line-soft);
  padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(8px);
}
.fn-nav { display: flex; align-items: center; gap: 14px; }
.fn-circle {
  width: 52px; height: 52px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--card);
  display: grid; place-items: center; cursor: pointer; color: var(--ink);
  transition: transform .12s ease, background .18s ease, box-shadow .18s ease;
}
.fn-back-c:hover { background: #fff; }
.fn-next-c {
  margin-left: auto; background: var(--gold); border-color: var(--line);
  box-shadow: 0 4px 0 var(--gold-deep);
}
.fn-next-c:hover { background: var(--gold-2); }
.fn-circle:active { transform: translateY(2px); }
.fn-next-c:active { box-shadow: 0 2px 0 var(--gold-deep); }
.fn-circle[hidden] { display: none; }
.fn-circle[disabled] { opacity: .55; cursor: default; }
.fn-next-c.is-sending { opacity: .7; }

.funnel-body { flex: 1; padding: 22px 18px 26px; position: relative; }
.screen-anim { animation: screenIn .28s var(--e-out); }
@keyframes screenIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* screen show/hide (only the active step is shown) */
.screen { display: none; }
.screen.is-active { display: block; }

.q-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-deep); }
.q-title { font-family: var(--serif); font-size: 26px; line-height: 1.08; margin-top: 8px; letter-spacing: -.01em; }
.q-help { margin-top: 9px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; }

/* text fields */
.field { margin-top: 18px; }
.field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.input {
  width: 100%; min-height: 54px; padding: 0 16px;
  border-radius: var(--r-sm); border: 1.5px solid var(--line);
  background: var(--card); font-family: var(--sans); font-size: 16px; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: var(--ink-faint); }
.input:focus { outline: none; border-color: var(--gold-deep); box-shadow: 0 0 0 4px rgba(217,164,65,.18); }
.input.err { border-color: #c0476b; box-shadow: 0 0 0 4px rgba(192,71,107,.15); }
.err-msg { margin-top: 6px; font-size: 12px; font-weight: 600; color: #c0476b; }

/* radio cards */
.options { margin-top: 18px; display: grid; gap: 10px; }
.opt {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 15px; min-height: 58px;
  border-radius: var(--r-sm); border: 1.6px solid var(--line);
  background: var(--card); cursor: pointer; text-align: left;
  font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--ink);
  transition: transform .12s ease, background .18s ease, box-shadow .18s ease;
  width: 100%; position: relative;
}
.opt:hover { background: #fff; }
.opt:active { transform: scale(.99); }
.opt .lbl { flex: 1; min-width: 0; }
.opt .key {
  width: 30px; height: 30px; flex: none; border-radius: 9px;
  border: 1.4px solid var(--line); display: grid; place-items: center;
  font-weight: 800; font-size: 13px; background: rgba(42,24,48,.04);
  transition: background .18s, color .18s;
}
.opt .tickbox { margin-left: auto; width: 24px; height: 24px; flex: none; border-radius: 50%; border: 1.5px solid var(--line-soft); display: grid; place-items: center; transition: all .18s; color: var(--ink); }
.opt .tickbox svg { display: none; }
.opt.sel .tickbox svg { display: block; }
.opt.sel { box-shadow: 0 3px 0 var(--gold-deep); border-color: var(--gold-deep); }
.opt.sel.tint-pink     { background: color-mix(in srgb, var(--pink) 42%, #fff); }
.opt.sel.tint-lavender { background: color-mix(in srgb, var(--lavender) 40%, #fff); }
.opt.sel.tint-mint     { background: color-mix(in srgb, var(--mint) 46%, #fff); }
.opt.sel.tint-peach    { background: color-mix(in srgb, var(--peach) 48%, #fff); }
.opt.sel .key { background: var(--gold); color: var(--ink); border-color: var(--line); }
.opt.sel .tickbox { background: var(--gold); border-color: var(--line); color: var(--ink); }
/* hide the native radio input */
.opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

/* compact gender picker — two tight pills side by side */
.options[data-gender] { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.options[data-gender] .opt {
  min-height: 0; padding: 11px 10px; gap: 8px;
  justify-content: center; text-align: center;
  font-size: 14px; border-radius: 12px;
}
.options[data-gender] .opt .lbl { flex: none; }
.options[data-gender] .opt .tickbox { display: none; }

/* upload */
.upload-card {
  margin-top: 18px; position: relative; display: block; width: 100%;
  border-radius: var(--r-lg); border: 2.4px dashed var(--gold);
  background: linear-gradient(180deg, #fffef9, #fff6e3);
  padding: 26px 18px; text-align: center; cursor: pointer;
  transition: background .2s, border-color .2s;
}
.upload-card:hover { background: #fffdf2; border-color: var(--gold-deep); }
.upload-card .hand-ic { width: 72px; height: 72px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 50%; background: var(--gold-wash); border: 1.4px solid var(--line); }
.upload-card h3 { font-family: var(--serif); font-size: 19px; }
.upload-card .uh { margin-top: 6px; font-size: 13px; color: var(--ink-soft); }
.upload-card .tap { margin-top: 12px; display: inline-flex; }
.upload-card input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; }
body.dp-edit .upload-card input { pointer-events: none; }  /* admin visual editor: let text clicks through */
.iab-hint { margin-top: 12px; font-size: 12.5px; line-height: 1.55; color: #7a5c2e; background: #fff8e8; border: 1px solid #f0dfae; border-radius: 12px; padding: 10px 13px; text-align: left; }
.iab-hint b { color: #5d4416; }
.iab-hint .iab-open { display: inline-block; margin-top: 7px; font-weight: 800; color: #1a7a4c; text-decoration: underline; }

.guides { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* upload preview + scan — true 9:16 portrait frame, full hand always visible */
.preview-card {
  margin: 18px auto 0; position: relative;
  width: 100%; max-width: calc(60vh * 9 / 16);   /* height-capped so it never overflows the screen */
  aspect-ratio: 9 / 16;                            /* responsive: scales with width, stays 9:16 */
  border-radius: var(--r-lg); overflow: hidden;
  border: 1.6px solid var(--line); box-shadow: var(--shadow-card); background:#000;
}
.preview-card img { width: 100%; height: 100%; object-fit: contain; display: block; }
.preview-card .scan-overlay { position: absolute; inset: 0; pointer-events: none; }
.preview-card .scan-overlay::after {
  content:""; position: absolute; left: 0; right: 0; height: 60%;
  background: linear-gradient(180deg, rgba(232,184,78,0), rgba(232,184,78,.5), rgba(232,184,78,0));
  animation: sweep 2.4s ease-in-out infinite;
}
.preview-card .done-badge { position: absolute; top: 12px; right: 12px; }
.preview-actions { margin-top: 12px; display: flex; gap: 10px; }

/* review */
.review-list { margin-top: 18px; display: grid; gap: 9px; }
.rev-row { display: flex; align-items: center; gap: 12px; padding: 13px 15px; }
.rev-row .rl { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
.rev-row .rv { margin-left: auto; font-size: 14.5px; font-weight: 700; text-align: right; }
.rev-row .rv.ok { color: #2e8b6a; display: inline-flex; align-items: center; gap: 6px; }
.rev-thumbs { display:flex; gap:8px; margin-left:auto; }
.rev-thumbs img { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; border: 1.4px solid var(--line); }

/* loading */
.loader { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; position: relative; z-index: 1; }
.loader > div { width: 100%; max-width: 320px; }
.loader-orb { width: 150px; height: 150px; margin: 0 auto 26px; position: relative; display: grid; place-items: center; }
.loader-orb .ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed var(--gold); animation: spin 9s linear infinite; }
.loader-orb .ring.r2 { inset: 16px; border-style: solid; border-color: var(--line-soft); animation: spin 6s linear infinite reverse; }
.loader-orb .core { width: 86px; height: 86px; border-radius: 50%; background: radial-gradient(60% 60% at 50% 40%, #fff3d6, var(--gold)); border: 1.5px solid var(--line); display: grid; place-items: center; box-shadow: 0 0 40px rgba(217,164,65,.55); }
@keyframes spin { to { transform: rotate(360deg); } }
/* instant loading state on the checkout submit (masks the /start→/pay hop) */
.co-cta.is-loading { pointer-events: none; cursor: progress; }
/* translucent dark scrim + spinner only, no text */
.co-pay-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  background: rgba(10, 8, 14, .5);           /* dark but see-through — "not too black" */
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.co-pay-overlay.is-show { display: flex; }
.co-pay-spin {
  width: 48px; height: 48px; border-radius: 50%;
  border: 3.5px solid rgba(255, 255, 255, .3); border-top-color: #fff;
  animation: spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .co-pay-spin { animation-duration: 1.4s; } }
.loader h2 { font-size: 24px; margin-bottom: 8px; }
.loader .msg { font-size: 15px; color: var(--ink-soft); font-weight: 600; min-height: 22px; transition: opacity .3s; }
.loader .lbar { margin: 22px auto 0; width: 220px; height: 7px; border-radius: 999px; background: rgba(42,24,48,.1); overflow: hidden; }
.loader .lfill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--gold-2)); transition: width .4s ease; }

/* ============================================================
   RESULT / DESTINY CARD
   ============================================================ */
.result { position: relative; z-index: 1; padding: 0 18px 40px; }
.result-hero { text-align: center; padding: 26px 0 6px; position: relative; }
.dcard {
  position: relative; margin: 18px auto 0; max-width: 330px;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1.6px solid var(--line); box-shadow: var(--shadow-pop);
  background: linear-gradient(165deg, #fffdf6, #fff3df);
}
.dcard .dc-top { position: relative; padding: 22px 20px 18px; background: linear-gradient(160deg, #3d2347, #2A1830); color: #fbf3e4; text-align: center; overflow: hidden; }
.dcard .dc-arch { font-family: var(--serif); font-size: 27px; line-height: 1.05; margin-top: 6px; color: #fff; }
.dcard .dc-sign { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); font-weight: 700; }
.dcard .dc-body { padding: 18px 18px 20px; }
.dc-trait { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.dc-trait:last-child { border-bottom: 0; }
.dc-trait .lab { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.dc-trait .val { margin-left: auto; font-weight: 700; font-size: 14.5px; font-family: var(--serif); }
.lucky-row { display: flex; gap: 8px; margin-top: 14px; }
.lucky { flex: 1; text-align: center; padding: 12px 6px; border-radius: var(--r-sm); border: 1.4px solid var(--line); }
.lucky .lk-ic { width: 30px; height: 30px; margin: 0 auto 6px; display: grid; place-items: center; border-radius: 50%; }
.lucky b { display: block; font-family: var(--serif); font-size: 16px; }
.lucky span { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }

.locked { position: relative; margin-top: 20px; }
.locked .blur { filter: blur(5px); opacity: .6; pointer-events: none; user-select: none; }
.locked .lock-over {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 18px;
}
.locked .lock-card { background: color-mix(in srgb, var(--paper) 88%, transparent); border: 1.5px solid var(--line); border-radius: var(--r); padding: 18px 16px; box-shadow: var(--shadow-pop); }
.locked .lock-ic { width: 44px; height: 44px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 50%; background: var(--gold-wash); border: 1.4px solid var(--line); }

.affirm { margin-top: 20px; padding: 20px; text-align: center; border-radius: var(--r-lg); border: 1.5px solid var(--line); background: var(--gold-wash); }
.affirm .q { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.3; }

/* ---------- result: email-sent banner ---------- */
.res-email {
  display: flex; align-items: flex-start; gap: 11px;
  margin-top: 18px; padding: 13px 14px;
  border-radius: var(--r-lg); border: 1.5px solid var(--line);
  background: linear-gradient(180deg, #eafaef, #dff4e6);
  box-shadow: 0 2px 0 rgba(42,24,48,.5), 0 14px 28px -16px rgba(42,24,48,.4);
}
.res-email .re-ic {
  flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; background: #1f9d55; color: #fff;
  box-shadow: 0 1px 0 rgba(42,24,48,.4);
}
.res-email .re-title {
  font-family: var(--serif); font-weight: 600; font-size: 15px; line-height: 1.25; color: var(--ink);
  overflow-wrap: anywhere;
}
.res-email .re-note {
  margin-top: 3px; display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; line-height: 1.35; color: var(--ink-soft);
}
.res-email .re-note svg { flex: 0 0 auto; color: var(--gold-deep); }

/* ---------- result 1: high-conversion "being finalized" waiting block ---------- */
.res-prep {
  position: relative; overflow: hidden; margin-top: 18px; padding: 26px 20px 24px; text-align: center;
  border-radius: var(--r-lg); border: 1.5px solid var(--line);
  background: linear-gradient(180deg, #fff8e8, #f6e7c4);
  box-shadow: 0 2px 0 rgba(42,24,48,.5), 0 18px 34px -18px rgba(42,24,48,.45);
}
.res-prep::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-100%); animation: rpShine 2.4s ease-in-out infinite;
}
@keyframes rpShine { to { transform: translateX(100%); } }
.res-prep > * { position: relative; }
.rp-orb { width: 78px; height: 78px; margin: 0 auto 14px; position: relative; display: grid; place-items: center; }
.rp-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed var(--gold-deep); animation: spin 7s linear infinite; }
.rp-ring.rp-r2 { inset: 13px; border-style: solid; border-color: var(--gold); animation: spin 4s linear infinite reverse; }
.rp-core { width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(60% 60% at 50% 40%, #fff, var(--gold)); display: grid; place-items: center; color: var(--ink); box-shadow: 0 0 26px rgba(217,164,65,.6); }
.rp-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 12px; }
.rp-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-deep); animation: rpDot 1.2s ease-in-out infinite; }
.rp-dots i:nth-child(2) { animation-delay: .18s; }
.rp-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes rpDot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }
.rp-eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.rp-title { font-family: var(--serif); font-size: 22px; line-height: 1.2; margin-top: 8px; }
.rp-note { font-size: 13px; line-height: 1.5; color: var(--ink-soft); margin-top: 8px; }
.rp-bar { margin: 16px auto 0; width: 200px; height: 7px; border-radius: 999px; background: rgba(42,24,48,.12); overflow: hidden; }
.rp-fill { width: 8%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--gold-2)); transition: width 1.4s ease; }

/* ready badge inside the email banner */
.res-email .re-head { display: flex; align-items: flex-start; gap: 8px; }
.res-email .re-badge {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; margin-left: auto;
  padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  color: #1f7a45; background: #c7f0d4; border: 1.2px solid #1f9d55;
}
.res-email .re-badge svg { color: #1f7a45; }

/* ---------- result: stage 1 (preparing & sending) ---------- */
.res-wait { min-height: 100dvh; display: flex; flex-direction: column; }
/* In /admin canvas (?edit=1) every phase is stacked & visible — don't let the
   full-height loading screen bury Result 1 / Result 2 below the fold. */
.dp-edit .res-wait { min-height: auto; }
.dp-edit .res-wait-body { padding: 20px 24px 24px; }
.dp-phase-tag {
  display: block; margin: 26px 0 10px; padding: 5px 11px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #7a5a12; background: var(--gold-wash); border: 1.4px dashed var(--gold-deep);
  width: max-content; max-width: 100%;
}
.res-wait-body {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 20px 24px 80px;
}
.res-wait .loader-orb { margin: 0 auto 24px; }
.res-wait .loader-orb .core { color: var(--gold-deep); }
.rw-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.rw-title { font-family: var(--serif); font-size: 25px; line-height: 1.18; margin-top: 10px; max-width: 320px; }
.rw-note { font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin-top: 10px; max-width: 300px; }
.rw-email {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  padding: 7px 13px; border-radius: 999px; border: 1.4px solid var(--line); background: var(--card);
  overflow-wrap: anywhere;
}
.rw-email svg { flex: 0 0 auto; color: var(--gold-deep); }
.rw-bar { margin: 22px auto 0; width: 220px; height: 7px; border-radius: 999px; background: rgba(42,24,48,.1); overflow: hidden; }
.rw-fill { width: 8%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--gold-2)); transition: width 1.6s ease; }

/* ---------- result: premium-contents grid + download ---------- */
.res-premium { margin-top: 24px; }
.res-actions { margin-top: 18px; text-align: center; }
.res-download { width: 100%; justify-content: center; text-decoration: none; }
.res-dl-note {
  margin-top: 8px; font-size: 11.5px; font-weight: 600;
  letter-spacing: .02em; color: var(--ink-soft); text-align: center;
}

/* utility */
.center { text-align: center; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; }
.hide { display: none !important; }

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

/* ===================== POST-PURCHASE UPSELL (result page, AOV) ===================== */
.us-wrap{margin-top:26px;padding:20px 16px 18px;border:1.5px solid var(--gold);border-radius:var(--r-lg,22px);
  background:linear-gradient(180deg,var(--gold-wash,#F6E7C4) 0%,var(--card,#FFFDF6) 38%);position:relative;overflow:hidden}
.us-wrap::before{content:"";position:absolute;inset:-40% 30% auto -10%;height:160px;
  background:radial-gradient(closest-side,rgba(217,164,65,.20),transparent);pointer-events:none}
.us-head{text-align:center;position:relative}
.us-eyebrow{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;letter-spacing:.14em;
  color:var(--gold-deep,#b5832b);text-transform:uppercase}
.us-title{font-family:var(--serif,"Fraunces",serif);font-size:22px;line-height:1.15;margin:7px 0 0;color:var(--ink,#2A1830)}
.us-sub{font-size:12.5px;color:var(--ink-soft,#5b4a59);margin:6px auto 0;max-width:340px;line-height:1.45}
/* high-conversion intro: urgency alert, the 4 questions, regret + scarcity warning */
.us-alert{display:inline-flex;align-items:center;gap:7px;margin:9px auto 0;padding:6px 13px;border-radius:999px;
  font-size:12px;font-weight:800;color:#b3261e;background:#fdecea;border:1px solid #f6c9c4;letter-spacing:.01em}
.us-alert-dot{width:7px;height:7px;border-radius:50%;background:#e23;flex:none;animation:usAlertPulse 1.3s ease-in-out infinite}
@keyframes usAlertPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}}
.us-iq{display:flex;flex-direction:column;gap:7px;margin:11px auto 0;max-width:360px;text-align:left;
  padding:12px 14px;background:rgba(176,131,43,.07);border:1px solid var(--gold-wash,#F6E7C4);border-radius:13px}
.us-iq-q{margin:0;font-size:13.5px;font-weight:700;font-style:italic;color:var(--ink,#2A1830);line-height:1.4;
  position:relative;padding-left:18px}
.us-iq-q::before{content:"›";position:absolute;left:2px;top:-1px;color:var(--gold-deep,#b5832b);font-weight:900;font-size:15px}
.us-sub2{font-size:13px;font-weight:700;color:var(--ink,#2A1830);margin:12px auto 0;max-width:340px;line-height:1.45}
.us-regret{font-size:12px;color:var(--ink-soft,#5b4a59);margin:8px auto 0;max-width:340px;line-height:1.5}
.us-urgency{display:flex;align-items:flex-start;gap:8px;text-align:left;margin:12px auto 2px;max-width:360px;
  font-size:12px;font-weight:700;line-height:1.45;color:#8a4b00;background:#fff6e6;border:1.5px solid #f0c980;
  border-radius:12px;padding:10px 13px}
.us-urgency svg{flex:none;color:#b5832b;margin-top:1px}
@media (prefers-reduced-motion:reduce){.us-alert-dot{animation:none}}
/* countdown */
.us-timer{display:flex;flex-direction:column;align-items:center;gap:2px;margin:13px auto 2px;
  background:linear-gradient(135deg,#e8442e,#c0392b);color:#fff;border-radius:14px;padding:10px 18px;
  width:max-content;max-width:100%;box-shadow:0 6px 20px rgba(192,57,43,.30);border:1px solid rgba(255,255,255,.18);
  animation:usTimerGlow 1.8s ease-in-out infinite}
@keyframes usTimerGlow{0%,100%{box-shadow:0 6px 16px rgba(192,57,43,.26)}50%{box-shadow:0 9px 30px rgba(232,68,46,.52)}}
.us-tlabel{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.95}
.us-clock{font-family:var(--serif,"Fraunces",serif);font-size:32px;font-weight:800;font-variant-numeric:tabular-nums;
  line-height:1.05;letter-spacing:.02em;text-shadow:0 1px 4px rgba(0,0,0,.18)}
.us-tnote{font-size:10px;font-weight:600;opacity:.92;margin-top:1px}
.us-timer.us-urgent{background:linear-gradient(135deg,#c0150f,#8a0f0a)}
.us-timer.us-urgent .us-clock{animation:usPulse .9s ease-in-out infinite}
@keyframes usPulse{0%,100%{opacity:1}50%{opacity:.55}}
.us-hint{text-align:center;font-size:12px;color:var(--ink-soft,#5b4a59);margin:14px 0 10px;font-weight:600}
/* cards */
.us-cards{display:flex;flex-direction:column;gap:10px}
.us-card{border:1.5px solid var(--line,#e7dcc4);border-radius:16px;background:var(--card,#FFFDF6);overflow:hidden;
  transition:border-color .18s,box-shadow .18s,transform .12s}
.us-card.open{border-color:var(--gold,#D9A441);box-shadow:0 8px 24px rgba(176,131,43,.16)}
.us-card-head{display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left;background:none;border:0;
  padding:13px 13px;cursor:pointer;font:inherit;color:inherit}
.us-card-head:active{transform:scale(.995)}
.us-ic{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--gold-deep,#b5832b);
  background:var(--gold-wash,#F6E7C4)}
.us-cinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.us-ctrow{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.us-ct{font-weight:800;font-size:14.5px;color:var(--ink,#2A1830)}
.us-badge{font-size:9.5px;font-weight:800;letter-spacing:.05em;color:#fff;background:linear-gradient(90deg,#D9A441,#b5832b);
  padding:2px 7px;border-radius:999px;text-transform:uppercase}
.us-cd{font-size:11.5px;color:var(--ink-soft,#5b4a59);line-height:1.4}
.us-price{display:flex;align-items:baseline;gap:8px;margin-top:4px;flex-wrap:wrap}
/* original price — small struck anchor (matches checkout) */
.us-was{font-size:13px;font-weight:600;color:var(--ink-soft,#5b4a59);text-decoration:line-through;
  text-decoration-color:rgba(42,24,48,.4);font-variant-numeric:tabular-nums}
/* discount price — same font as checkout "Total Rp 149.000" (sans, 14px, weight 400 → light/cheap), but GREEN */
.us-now{font-family:var(--sans,"Plus Jakarta Sans",sans-serif);font-weight:400;font-size:15px;line-height:1;
  color:#138a4a;font-variant-numeric:tabular-nums;white-space:nowrap}
.us-off{font-size:10px;font-weight:800;color:#fff;background:#D9A441;border-radius:6px;padding:2px 6px}
.us-chev{flex:none;color:var(--gold-deep,#b5832b);align-self:center;transition:transform .22s}
.us-card.open .us-chev{transform:rotate(180deg)}
/* the hidden form (revealed on tap) */
.us-form{max-height:0;opacity:0;overflow:hidden;transition:max-height .3s ease,opacity .25s ease,padding .3s ease;
  padding:0 13px}
.us-card.open .us-form{max-height:420px;opacity:1;padding:2px 13px 14px}
.us-fl{display:block;font-size:11.5px;font-weight:700;color:var(--ink,#2A1830);margin:9px 0 4px}
.us-in{width:100%;box-sizing:border-box;border:1.4px solid var(--line,#e7dcc4);border-radius:11px;padding:11px 12px;
  font:inherit;font-size:14px;background:#fff;color:var(--ink,#2A1830);outline:none;transition:border-color .15s}
.us-in:focus{border-color:var(--gold,#D9A441)}
.us-cta{width:100%;margin-top:13px;justify-content:center;font-size:15px;font-weight:800;gap:8px;
  background:linear-gradient(90deg,#E8B84E,#D9A441);border:0;color:#2A1830;box-shadow:0 6px 18px rgba(176,131,43,.28)}
.us-cta.us-cta-done{background:#BFE8D4;color:#1f5b3e;box-shadow:none}
.us-secure{display:flex;align-items:center;justify-content:center;gap:5px;font-size:10.5px;color:var(--ink-soft,#5b4a59);margin:9px 0 0}
/* buyer social-proof toast */
.us-toast{position:fixed;left:14px;bottom:16px;z-index:60;max-width:310px;display:flex;align-items:center;gap:11px;
  background:rgba(255,253,246,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line,#e7dcc4);border-left:3px solid var(--gold,#D9A441);border-radius:16px;padding:10px 15px 10px 11px;
  box-shadow:0 14px 34px rgba(42,24,48,.18);transform:translateY(150%) scale(.96);opacity:0;
  transition:transform .5s cubic-bezier(.16,1,.3,1.25),opacity .35s;pointer-events:none}
.us-toast.show{transform:translateY(0) scale(1);opacity:1}
.us-toast[data-p="jodoh"]{border-left-color:#ff6fae}
.us-toast[data-p="pekerjaan"]{border-left-color:#d9a441}
.us-toast[data-p="bundle"]{border-left-color:#1f9d57}
/* avatar with initial + tiny product glyph + online dot */
.ust-av{flex:none;position:relative;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:17px;color:#fff;background:linear-gradient(135deg,#b9a0ff,#7b6bff);
  box-shadow:0 4px 12px rgba(0,0,0,.14)}
.us-toast[data-p="jodoh"] .ust-av{background:linear-gradient(135deg,#ff9ec4,#ff5fa3)}
.us-toast[data-p="pekerjaan"] .ust-av{background:linear-gradient(135deg,#f3cd72,#d9a441)}
.us-toast[data-p="bundle"] .ust-av{background:linear-gradient(135deg,#86e3ab,#1f9d57)}
.ust-pic{position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;border-radius:50%;background:#fff;
  display:grid;place-items:center;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.ust-pic svg{color:var(--ink,#2A1830)}
.ust-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.ust-row1{font-size:13px;color:var(--ink,#2A1830);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ust-row1 b{font-weight:800}
.ust-city{color:var(--ink-soft,#5b4a59);font-weight:500}
.ust-sub{font-size:11.5px;color:var(--ink-soft,#5b4a59);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ust-prod{font-weight:800;color:var(--gold-deep,#b5832b)}
.us-toast[data-p="jodoh"] .ust-prod{color:#e0508a}
.us-toast[data-p="bundle"] .ust-prod{color:#1f8a4d}
.ust-ago{display:inline-flex;align-items:center;gap:4px;margin-top:2px;font-size:9.5px;font-weight:800;
  letter-spacing:.02em;color:#1f9d57;text-transform:uppercase}
.ust-ago svg{flex:none;color:#1f9d57}
@media (prefers-reduced-motion:reduce){.us-timer.us-urgent .us-clock{animation:none}.us-toast{transition:opacity .3s}}

/* ===== UPSELL v2 — higher conversion: HEMAT, scarcity, lifetime, PALING LARIS, animations ===== */
/* entrance */
.us-wrap{animation:usWrapIn .5s var(--e-out) both}
@keyframes usWrapIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.us-card{animation:usCardIn .5s var(--e-out) both}
@keyframes usCardIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
/* scarcity bar */
.us-scarcity{display:flex;flex-direction:column;align-items:center;gap:7px;margin:13px auto 0;max-width:300px;
  padding:9px 14px;border-radius:14px;background:#fdecec;border:1px solid #f3b4b4}
.us-scar-top{display:flex;align-items:center;gap:6px;color:#9c1f1f;font-size:12px;font-weight:800;text-align:center}
.us-scar-bot{display:flex;align-items:center;gap:10px;width:100%}
.us-scar-meter{flex:1;height:7px;border-radius:999px;background:#f6cdcd;overflow:hidden}
.us-scar-fill{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#e23,#ff7a59);transition:width .9s var(--e-out)}
.us-slots{flex:none;font-weight:900;font-size:11.5px;color:#9c1f1f;white-space:nowrap}
.us-flame{font-size:13px;animation:usFlame 1.1s ease-in-out infinite}
@keyframes usFlame{0%,100%{transform:scale(1) rotate(-3deg)}50%{transform:scale(1.18) rotate(3deg)}}
/* HEMAT savings pill (replaces % OFF) */
.us-save{font-size:10.5px;font-weight:900;color:#1f5b3e;background:#BFE8D4;border-radius:7px;padding:2px 7px;letter-spacing:.01em}
/* benefit chips (lifetime / instant) */
.us-bens{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:6px}
.us-ben{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:var(--gold-deep,#b5832b)}
.us-ben svg{color:#57C77B}
/* persuade line (desire) */
.us-persuade{display:flex;align-items:flex-start;gap:6px;font-size:12px;font-style:italic;color:var(--ink,#2A1830);
  background:var(--gold-wash,#F6E7C4);border-radius:10px;padding:8px 10px;margin:10px 0 2px;font-weight:600}
.us-persuade svg{flex:none;color:var(--gold-deep,#b5832b);margin-top:1px}
/* badges */
.us-badge-hot{background:linear-gradient(90deg,#ff6a3d,#e23) !important;animation:usBadgePulse 1.6s ease-in-out infinite}
.us-badge-val{background:linear-gradient(90deg,#D9A441,#b5832b) !important}
@keyframes usBadgePulse{0%,100%{box-shadow:0 0 0 0 rgba(226,51,51,.0)}50%{box-shadow:0 0 0 5px rgba(226,51,51,.16)}}
/* best-seller card highlight */
.us-card-hot{border-color:#ff8a5b;box-shadow:0 6px 22px rgba(226,51,51,.12)}
.us-card-hot .us-ic{background:#ffe6da;color:#e23}
/* bundle = best value → prominent GREEN outer highlight + soft pulsing glow (draws the eye) */
.us-card-best{border-width:2px;border-color:#1f9d57;box-shadow:0 6px 22px rgba(31,122,77,.20);animation:usBestGlow 2.4s ease-in-out infinite}
.us-card-best.open{border-color:#1f9d57;box-shadow:0 10px 30px rgba(31,122,77,.30)}
.us-card-best .us-ic{background:#cdeede;color:#1f7a4d}
.us-badge-best{background:#1f7a4d;color:#fff}
@keyframes usBestGlow{0%,100%{box-shadow:0 6px 18px rgba(31,122,77,.16)}50%{box-shadow:0 9px 30px rgba(31,122,77,.36)}}
/* CTA: pulse + shine sweep */
.us-cta{position:relative;overflow:hidden;animation:usCtaPulse 1.9s ease-in-out infinite}
@keyframes usCtaPulse{0%,100%{box-shadow:0 6px 18px rgba(176,131,43,.28)}50%{box-shadow:0 8px 26px rgba(217,164,65,.5)}}
.us-cta::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);
  animation:usShine 2.6s ease-in-out infinite}
@keyframes usShine{0%{left:-60%}55%,100%{left:130%}}
.us-cta:active{transform:scale(.985)}
@media (prefers-reduced-motion:reduce){
  .us-wrap,.us-card{animation:none}
  .us-flame,.us-badge-hot,.us-cta{animation:none}
  .us-cta::after{display:none}
}

/* ===== UPSELL DELIVERY — post-payment loading screen → download button ===== */
.usd{margin-top:22px;padding:24px 18px;text-align:center;border:1.5px solid var(--gold,#D9A441);
  border-radius:var(--r-lg,22px);background:linear-gradient(180deg,#eafaf0 0%,var(--card,#FFFDF6) 45%);
  animation:usWrapIn .5s var(--e-out) both}
.usd .loader-orb{margin:0 auto 4px}
.usd-eyebrow{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-deep,#b5832b);margin:6px 0 0}
.usd-eyebrow svg{color:#57C77B}
.usd-green{color:#1f7a4d}
.usd-title{font-family:var(--serif,"Fraunces",serif);font-size:21px;line-height:1.18;margin:8px auto 0;max-width:330px;color:var(--ink,#2A1830)}
.usd-note{font-size:12.5px;color:var(--ink-soft,#5b4a59);margin:8px auto 0;max-width:320px;line-height:1.45}
.usd-bar{height:7px;border-radius:99px;background:#e7dcc4;overflow:hidden;margin:16px auto 0;max-width:280px}
.usd-fill{height:100%;width:6%;border-radius:99px;background:linear-gradient(90deg,#E8B84E,#57C77B);
  transition:width 5.8s cubic-bezier(.25,.6,.2,1)}
.usd-check{display:inline-grid;place-items:center;width:54px;height:54px;border-radius:50%;
  background:#BFE8D4;color:#1f7a4d;margin-bottom:2px;animation:usPop .4s cubic-bezier(0,0,0,1.6) both}
@keyframes usPop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.usd-dl{width:100%;max-width:330px;margin:15px auto 0;justify-content:center;font-size:15px;font-weight:800;gap:8px;
  background:linear-gradient(90deg,#E8B84E,#D9A441);border:0;color:#2A1830;box-shadow:0 6px 18px rgba(176,131,43,.3);
  position:relative;overflow:hidden;animation:usCtaPulse 1.9s ease-in-out infinite}
.usd-dl::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:usShine 2.6s ease-in-out infinite}
.usd-dl.usd-dl-done{background:#BFE8D4;color:#1f5b3e;box-shadow:none;animation:none}
.usd-dl.usd-dl-done::after{display:none}
.usd-dl-note{font-size:10.5px;color:var(--ink-soft,#5b4a59);margin:9px 0 0}
.usd-sent{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#1f7a4d;
  background:#eafaf0;border-radius:10px;padding:8px 12px;margin:11px auto 0}
@media (prefers-reduced-motion:reduce){.usd,.usd-check,.usd-dl{animation:none}.usd-dl::after{display:none}}

/* ===== result download group — palm + jodoh + pekerjaan + semua (aligned) ===== */
.res-dl-group{display:flex;flex-direction:column;gap:9px}
.res-dl-btn{display:flex;align-items:center;gap:9px;width:100%;box-sizing:border-box;justify-content:center;
  padding:13px 16px;font-size:14.5px;font-weight:700;border-radius:14px;position:relative;text-align:center}
.res-dl-btn .rdl-ic{display:inline-flex;flex:none}
.res-dl-btn .rdl-tx{flex:none}
.res-dl-btn.btn-primary .rdl-ic{color:#2A1830}
.res-dl-up{border:1.5px solid var(--line,#e7dcc4);background:var(--card,#FFFDF6);color:var(--ink,#2A1830)}
.res-dl-up .rdl-ic{color:var(--gold-deep,#b5832b)}
.res-dl-up .rdl-lock{position:absolute;right:14px;display:inline-flex;color:var(--ink-soft,#9b8a99);opacity:.7}
.res-dl-up:active{transform:scale(.99)}
.res-dl-all{border-color:var(--gold,#D9A441);background:var(--gold-wash,#F6E7C4)}
.res-dl-all .rdl-ic{color:var(--gold-deep,#b5832b)}
/* brief highlight when a locked download scrolls you to the offer */
.us-flash{animation:usFlash 1.4s ease}
@keyframes usFlash{0%,100%{box-shadow:0 0 0 0 rgba(217,164,65,0)}30%{box-shadow:0 0 0 4px rgba(217,164,65,.4)}}

/* ===== Jodoh sales pitch (long-form, high-conversion) ===== */
.us-card.open .us-form{max-height:3600px}   /* was 420px — fit the long Jodoh pitch (incl. expanded detail) without clipping */
.us-pitch{text-align:left;margin:4px 0 2px;border-top:1px dashed var(--line,#e7dcc4);padding-top:12px}
.us-pitch-hook{font-family:var(--serif,"Fraunces",serif);font-size:16px;font-weight:600;color:var(--ink,#2A1830);margin:0 0 8px;line-height:1.3}
.us-pitch-p{font-size:13px;line-height:1.55;color:var(--ink-soft,#5b4a59);margin:0 0 9px}
.us-pitch-offer{display:flex;align-items:flex-start;gap:7px;font-size:13.5px;font-weight:700;color:var(--ink,#2A1830);
  background:var(--gold-wash,#F6E7C4);border:1px solid var(--gold,#D9A441);border-radius:11px;padding:10px 12px;margin:10px 0;line-height:1.4}
.us-pitch-offer svg{flex:none;color:var(--gold-deep,#b5832b);margin-top:2px}
.us-pitch-lh{font-size:12.5px;font-weight:800;color:var(--ink,#2A1830);margin:10px 0 6px}
.us-pitch-list{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:6px}
.us-pitch-list li{position:relative;padding-left:22px;font-size:12.5px;line-height:1.45;color:var(--ink,#2A1830)}
.us-pitch-list li::before{content:"✓";position:absolute;left:0;top:0;color:#1f7a4d;font-weight:800;
  background:#cdeede;width:16px;height:16px;border-radius:50%;font-size:10px;display:grid;place-items:center}
.us-pitch-close{font-size:12.5px;line-height:1.55;color:var(--ink-soft,#5b4a59);font-style:italic;margin:8px 0 2px}
.us-pitch-eyebrow{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep,#b5832b);margin:0 0 8px}
.us-pitch-method{font-size:12px;line-height:1.5;color:var(--ink-soft,#5b4a59);margin:0 0 10px;
  border-left:2px solid var(--gold,#D9A441);padding-left:10px}
.us-pitch-quotes{display:flex;flex-direction:column;gap:6px;margin:0 0 9px;padding:9px 12px;
  background:rgba(176,131,43,.06);border-radius:10px}
.us-pitch-q{margin:0;font-size:13px;font-style:italic;font-weight:600;color:var(--ink,#2A1830);line-height:1.4}
.us-pitch-q::before{content:"“"}.us-pitch-q::after{content:"”"}
/* bundle "Kamu akan mendapatkan" — named items with title + description */
.us-pitch-items{display:flex;flex-direction:column;gap:10px;margin:0 0 11px}
.us-pitch-item{border:1px solid var(--line,#e7dcc4);border-radius:11px;padding:11px 12px;background:#fffdf9}
.us-pitch-item-t{display:flex;align-items:flex-start;gap:7px;margin:0 0 4px;font-size:13px;font-weight:800;color:var(--ink,#2A1830);line-height:1.35}
.us-pitch-item-t svg{flex:none;color:#1f7a4d;margin-top:2px}
.us-pitch-item-d{margin:0;font-size:12px;line-height:1.5;color:var(--ink-soft,#5b4a59)}
.us-pitch-total{display:flex;align-items:center;gap:8px;margin:2px 0 10px;padding:11px 13px;font-size:13.5px;font-weight:800;
  color:var(--ink,#2A1830);background:var(--gold-wash,#F6E7C4);border:1.5px solid var(--gold,#D9A441);border-radius:12px}
.us-pitch-total svg{flex:none;color:var(--gold-deep,#b5832b)}
/* "Lihat selengkapnya" teaser on the COLLAPSED card (hidden once the card is expanded) */
.us-teaser{display:flex;flex-direction:column;gap:9px;align-items:flex-start;padding:0 13px 13px;margin-top:-2px}
.us-card.open .us-teaser{display:none}
.us-teaser-line{font-family:var(--serif,"Fraunces",serif);font-size:14px;font-weight:600;font-style:italic;
  color:var(--ink,#2A1830);margin:0;line-height:1.35}
.us-teaser-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;cursor:pointer;
  background:#fff;border:1.5px solid var(--gold,#D9A441);border-radius:999px;color:var(--gold-deep,#b5832b);
  font-family:inherit;font-size:12.5px;font-weight:800;letter-spacing:.01em;transition:background .15s;
  box-shadow:0 2px 8px rgba(176,131,43,.12)}
.us-teaser-btn:hover{background:var(--gold-wash,#F6E7C4)}
.us-teaser-chev{display:inline-flex}

/* --mono is referenced by the Jurnal citations and figure captions but is not
   defined in the production :root. Declared here with a SYSTEM stack on purpose:
   a webfont request would cost latency on mobile for three short lines. */
:root {
  /* Emil Kowalski's standards: built-in easings are too weak; entering/exiting
     always ease-out, never ease-in (ease-in delays the moment being watched). */
  --e-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --e-inout:  cubic-bezier(0.77, 0, 0.175, 1);
}
:root { --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; }

/* ═══════════════════════════════════════════════════════════════════════════
   QUIZ MOTION — additive only. Nothing above is modified, and no checkout
   selector is touched. Extends the existing `screenIn` idiom (same easing).
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes qOptIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes qHeadIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes qTick  { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }

/* headline lands before the options, so the eye never chooses between two moving
   targets. Kept in the same order as before, just tightened: the whole header
   used to still be settling at 440ms, which is dead time on every question. */
.screen.is-active .q-eyebrow { animation: qHeadIn .20s var(--e-out) both; }
.screen.is-active .q-title   { animation: qHeadIn .22s var(--e-out) .03s both; }
.screen.is-active .q-help    { animation: qOptIn  .24s var(--e-out) .07s both; }

/* Options arrive in sequence: a staggered list reads shorter than a wall.
   fill-mode is `backwards`, NOT `both`: a finished animation with `both`
   keeps asserting opacity:1, and animations outrank normal declarations, so
   the "dim the unchosen" rule below would never win. `backwards` still hides
   them before the delay, then hands control back to the cascade.
   The stagger step is 40ms — still clearly sequential, but the fifth option now
   lands at 450ms instead of 720ms, so the screen is answerable much sooner. */
.screen.is-active .options > .opt { animation: qOptIn .26s var(--e-out) backwards; }
.screen.is-active .options > .opt:nth-child(1) { animation-delay: .05s; }
.screen.is-active .options > .opt:nth-child(2) { animation-delay: .09s; }
.screen.is-active .options > .opt:nth-child(3) { animation-delay: .13s; }
.screen.is-active .options > .opt:nth-child(4) { animation-delay: .17s; }
.screen.is-active .options > .opt:nth-child(5) { animation-delay: .21s; }

/* The answer must feel received. Driven entirely off the `.sel` class the
   existing change-handler already sets, so this needs ZERO JS change.
   The dimming uses :has() as progressive enhancement: where it is
   unsupported nothing dims and the screen still behaves exactly as today. */
.screen.is-active .opt { transition: transform .12s ease, opacity .18s ease; }
.screen.is-active .opt:active { transform: scale(.99); }
.screen.is-active .options:has(.opt.sel) > .opt:not(.sel) { opacity: .45; }
.screen.is-active .opt.sel .tickbox { animation: qTick .32s var(--e-out); }

/* Refusal feedback. Transform/opacity only, and the shake stays under 5px so it
   reads as "not yet" rather than as an error state — this screen is still the
   happy path, the user simply has not answered. */
@keyframes qNope {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-5px); }
  35% { transform: translateX(4px); }
  55% { transform: translateX(-3px); }
  75% { transform: translateX(2px); }
}
@keyframes qErrPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.is-nope { animation: qNope .34s var(--e-inout); }
[data-err].is-nope { animation: qErrPop .22s var(--e-out); }

/* upload + guide chips get the same sequenced entrance */
.screen.is-active .upload-card { animation: qOptIn .36s var(--e-out) .12s both; }
.screen.is-active .guides > .chip { animation: qOptIn .30s var(--e-out) both; }
.screen.is-active .guides > .chip:nth-child(1) { animation-delay: .22s; }
.screen.is-active .guides > .chip:nth-child(2) { animation-delay: .27s; }
.screen.is-active .guides > .chip:nth-child(3) { animation-delay: .32s; }
.screen.is-active .guides > .chip:nth-child(4) { animation-delay: .37s; }

@media (prefers-reduced-motion: reduce) {
  .screen.is-active .q-eyebrow, .screen.is-active .q-title, .screen.is-active .q-help,
  .screen.is-active .options > .opt, .screen.is-active .upload-card,
  .screen.is-active .guides > .chip, .screen.is-active .opt.sel .tickbox {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   I1 · SUDAH BERUBAH — gender-forked social proof. Additive; production card
   idiom (--card + --line outline + hard offset shadow), tilted like a photo
   you were handed.
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes i1FrIn   { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes i1SlideIn{ from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes i1QuoteIn{ from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes i1Pop    { 0% { transform: scale(1); } 42% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes i1LogoIn { from { opacity: 0; transform: translateY(8px); } to { opacity: .34; transform: none; } }
@keyframes i1LogoGlow {
  0%, 100% { opacity: .34; color: var(--ink); }
  8%       { opacity: 1;   color: var(--gold-deep); }
  22%      { opacity: .34; color: var(--ink); }
}
@keyframes i1StarIn { from { opacity: 0; transform: scale(.92) rotate(-6deg); }
                      to   { opacity: 1; transform: none; } }
@keyframes i1NextIn    { to { opacity: 1; transform: none; } }
@keyframes i1SealMark { from { opacity: 0; transform: scale(.93) rotate(-6deg); }
                        to   { opacity: 1; transform: none; } }
@keyframes i1Sheen    { to { transform: translateX(120%); } }

.screen.i1 { text-align: left; }
.i1-eyebrow { color: var(--gold-deep); }

.i1-count { margin: 0 0 13px; }
.i1-n {
  display: block;
  font-family: var(--serif); font-weight: 700; font-size: clamp(36px, 11.4vw, 46px);
  line-height: 1; letter-spacing: -.02em; color: var(--gold-deep);
  font-variant-numeric: tabular-nums;      /* no width jitter while counting */
}
.i1-n.hit { animation: i1Pop .5s var(--e-out); }
.i1-sub {
  display: block; margin-top: 6px;
  font-family: var(--serif); font-weight: 700; font-size: clamp(18px, 5.3vw, 22px);
  line-height: 1.18; color: var(--ink);
}

.i1-card { padding: 9px; transform: rotate(-1.6deg); }   /* handed to you, not laid out */
.i1-pair { display: flex; border-radius: 12px; overflow: hidden; border: 1.5px solid var(--line); }
.i1-fr {
  position: relative; margin: 0; flex: 1; aspect-ratio: 4/5; overflow: hidden;
  background: var(--paper-2); opacity: 0;
}
.i1-fr img { width: 100%; height: 100%; object-fit: cover; display: block; }
.i1-fr[data-i1fr=before].in { animation: i1FrIn .26s var(--e-out) forwards; }
.i1-fr[data-i1fr=after].in  { animation: i1SlideIn .28s var(--e-out) forwards; }
.i1-fr figcaption {
  position: absolute; left: 7px; bottom: 6px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: var(--card); border: 1.2px solid var(--line); color: var(--ink);
}
.i1-div {
  width: 1.5px; background: var(--line);
  transform: scaleY(0); transform-origin: top; transition: transform .24s ease-out;
}
.i1-div.in { transform: scaleY(1); }

.i1-quote { display: block; padding: 11px 9px 3px; opacity: 0; }
.i1-quote.in { animation: i1QuoteIn .26s var(--e-out) forwards; }
.i1-stars { display: flex; gap: 3px; margin-bottom: 6px; }
.i1-stars i {
  width: 15px; height: 15px; display: block; background: var(--gold);
  opacity: 0; animation: i1StarIn .3s cubic-bezier(.17,.67,.32,1.94) forwards;
  -webkit-mask: var(--star) center/contain no-repeat;
          mask: var(--star) center/contain no-repeat;
}
.i1-stars i:nth-child(1) { animation-delay: 1.60s; }
.i1-stars i:nth-child(2) { animation-delay: 1.67s; }
.i1-stars i:nth-child(3) { animation-delay: 1.74s; }
.i1-stars i:nth-child(4) { animation-delay: 1.81s; }
.i1-stars i:nth-child(5) { animation-delay: 1.88s; }
.i1-qt  { display: block; font-family: var(--serif); font-weight: 600; font-size: 15.5px;
          line-height: 1.32; color: var(--ink); letter-spacing: -.005em; }
.i1-who { display: block; font-size: 11px; color: var(--ink-faint); margin-top: 5px; }

/* AUTHORITY SEAL — reads as a credential, not a banner. Near-white stock so it
   lifts off the cream page, plum outline + hard shadow (brand idiom), and an
   inset gold rule for the certificate frame. */
.i1-seal {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: 16px; padding: 15px 18px 13px; text-align: center;
  background:
    radial-gradient(120% 80% at 50% -20%, #fffdf6 0%, var(--card) 55%, var(--gold-wash) 100%);
  border: 1.5px solid var(--line); border-radius: var(--r);
  box-shadow: 0 2px 0 rgba(42,24,48,.85), 0 16px 34px -20px rgba(42,24,48,.42);
  opacity: 0; transform: translateY(10px);
}
.i1-seal.in { animation: i1NextIn .42s var(--e-out) forwards; }
/* inset hairline = certificate frame */
.i1-seal::before {
  content: ""; position: absolute; inset: 6px; border-radius: calc(var(--r) - 6px);
  border: 1px solid rgba(181,131,43,.42); pointer-events: none;
}
/* one slow sweep once it lands — embossed foil, not a loop */
.i1-seal.in::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.46) 50%, transparent 58%);
  transform: translateX(-120%);
  animation: i1Sheen 1.6s cubic-bezier(.4,0,.2,1) .6s 1;
}

/* the stamp itself: notched gold ring around a cream disc */
.i1-seal-mark {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 8px; border-radius: 50%;
  background: var(--card);
  border: 1.6px solid var(--line);
  box-shadow: 0 0 0 3px var(--gold-wash), 0 0 0 4.4px var(--line),
              0 3px 0 rgba(42,24,48,.22);
  color: var(--gold-deep);
  animation: i1SealMark .55s cubic-bezier(.17,.67,.32,1.94) .18s backwards;
}
.i1-seal-mark::before {                    /* notched ring, like a stamped edge */
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  border: 1.4px dashed rgba(181,131,43,.62);
}
.i1-seal-mark svg { width: 21px; height: 21px; position: relative; }

.i1-seal-l {
  display: block; font-family: var(--serif); font-weight: 700;
  font-size: 16.5px; line-height: 1.2; color: var(--ink); margin-bottom: 5px;
}
.i1-seal-t {
  display: block; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft);
  max-width: 32ch; margin: 0 auto;
}
/* ornamental divider instead of a plain rule */
/* the flex-with-side-rules version collapsed the rules to nothing as soon as the
   line wrapped; a plain gold hairline is reliable at every string length */
.i1-meta {
  display: block; margin-top: 11px; padding-top: 10px;
  border-top: 1px solid rgba(181,131,43,.42);
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--gold-deep); line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  .i1-fr, .i1-quote { opacity: 1 !important; }
  .i1-div { transform: scaleY(1) !important; }
  .i1-n, .i1-fr, .i1-quote, .i1-stars i, .i1-seal, .i1-seal-mark { animation: none !important; }
  .i1-stars i, .i1-seal, .i1-seal-mark { opacity: 1; transform: none; }
  .i1-seal.in::after { display: none; }
  .i1-card { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   JURNAL RISET — the research card that follows Q11 / Q12.
   Production card idiom, tilted like a page handed over. Three layers stay
   visually separate: research → bridge → what the reading examines.
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes jrCardIn { from { opacity: 0; transform: translateY(30px) rotate(0); }
                      to   { opacity: 1; transform: translateY(0) rotate(-1.2deg); } }
@keyframes jrBarIn  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes jrStkIn  { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes jrGapHit { 0% { transform: scale(1); } 46% { transform: scale(1.06); } 100% { transform: scale(1); } }

.screen.jr { display: none; }
.screen.jr.is-active { display: block; }

.jr-card {
  padding: 19px 18px 17px; opacity: 0;
  background: var(--card); border: 1.6px solid var(--line); border-radius: var(--r);
  box-shadow: 0 2px 0 rgba(42,24,48,.85), 0 18px 40px -22px rgba(42,24,48,.45);
  transform-origin: 52% 50%;
}
/* popupIn at 200ms in the reference: fast arrival reads as delivery, slow reads as decor */
.jr-card.in { animation: jrCardIn .24s cubic-bezier(.66,0,0,1) forwards; }

.jr-head { display: block; }
.jr-h {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink);
}
.jr-src {
  display: block; font-family: var(--mono); font-size: 10px; line-height: 1.45;
  color: var(--ink-faint); margin-top: 4px;
}
.jr-rule { height: 1px; background: rgba(42,24,48,.16); margin: 12px 0 13px; }
.jr-body p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.jr-body p:last-child { margin-bottom: 0; }
.jr-body p b { color: var(--ink); font-weight: 800; }
.jr-body .big {
  font-family: var(--serif); font-weight: 700; font-size: 19px; line-height: 1.28;
  color: var(--ink); letter-spacing: -.01em;
}
.jr-bridge { margin: 0 0 9px; font-size: 13.5px; line-height: 1.45;
             color: var(--ink-soft); font-style: italic; }
.jr-reads  { margin: 0; font-size: 13.5px; font-weight: 800; line-height: 1.4; color: var(--ink); }
.jr-cap { font-family: var(--mono); font-size: 9.5px; line-height: 1.4;
          color: var(--ink-faint); margin-top: 7px; }

/* figure 1 — the 79/21 split */
.jr-fig:empty { display: none; }
.jr-fig { margin-top: 13px; }
.jr-bar { display: flex; height: 32px; border-radius: 999px; overflow: hidden;
          border: 1.5px solid var(--line); background: var(--paper-2); }
.jr-a, .jr-b {
  display: flex; align-items: center; white-space: nowrap;
  padding: 0 11px; font-size: 11.5px; font-weight: 800;
  animation: jrBarIn .42s cubic-bezier(.66,0,0,1) .16s backwards;
}
.jr-a { background: var(--gold); color: var(--ink); transform-origin: left center; }
.jr-b { background: var(--paper-2); color: var(--ink-soft); transform-origin: right center;
        animation-delay: .24s; justify-content: flex-end; }

/* figure 2 — the wajar/cukup gap */
.jr-cols { display: flex; gap: 14px; margin-top: 4px; }
.jr-col { flex: 1; display: flex; flex-direction: column; align-items: center; }
.jr-col b { font-family: var(--mono); font-size: 13px; font-weight: 500;
            color: var(--ink); margin-bottom: 5px; }
.jr-plot { display: flex; align-items: flex-end; width: 100%; height: 84px; }  /* definite */
.jr-stk {
  display: block; width: 100%;                               /* height set inline, % of .jr-plot */
  background: var(--gold); border: 1.5px solid var(--line); border-bottom: 0;
  border-radius: 8px 8px 0 0; transform-origin: bottom;
  animation: jrStkIn .42s cubic-bezier(.66,0,0,1) .18s backwards;
}
.jr-stk.lo { background: var(--paper-2); animation-delay: .28s; }
.jr-col em { font-size: 10px; font-style: normal; color: var(--ink-faint);
             text-align: center; line-height: 1.3; margin-top: 7px; }
.jr-gap {
  margin-top: 11px; padding: 8px 12px; border-radius: 999px; text-align: center;
  background: var(--gold-wash); border: 1.5px dashed var(--gold-deep);
  font-size: 11.5px; font-weight: 800; color: var(--ink);
}
.jr-gap.hit { animation: jrGapHit .5s var(--e-out); }

@media (prefers-reduced-motion: reduce) {
  .jr-card { opacity: 1; transform: rotate(-1.2deg); animation: none !important; }
  .jr-a, .jr-b, .jr-stk, .jr-gap { animation: none !important; transform: none !important; }
}

/* ratio figure — N of 10 (or of 4) blocks, the plainest way to make a share felt */
.jr-ratio { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; }
.jr-cell {
  flex: 1 1 0; min-width: 18px; height: 30px; border-radius: 6px;
  background: var(--paper-2); border: 1.5px solid var(--line);
  animation: jrCellIn .3s var(--e-out) backwards;
}
.jr-cell.on { background: var(--gold); }
@keyframes jrCellIn { from { opacity: 0; transform: translateY(7px) scale(.94); }
                      to   { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .jr-cell { animation: none !important; } }

/* ═══════════════════════════════════════════════════════════════════════════
   GENDER SELECT (screen 0) + WETON (screen 3)
   ═══════════════════════════════════════════════════════════════════════════ */
.options.gsel { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gcard {
  position: relative; display: block; cursor: pointer; overflow: hidden;
  padding: 0 0 12px; border-radius: var(--r); text-align: center;
  background: var(--card); border: 1.8px solid var(--line);
  box-shadow: 0 3px 0 rgba(42,24,48,.22);
  transition: transform .14s var(--e-out), box-shadow .14s ease, background .18s ease;
  animation: qOptIn .38s var(--e-out) backwards;
}
.gcard:nth-of-type(1) { animation-delay: .12s; }
.gcard:nth-of-type(2) { animation-delay: .20s; }
.gcard input { position: absolute; opacity: 0; pointer-events: none; }
.gcard-art { display: block; background: var(--paper); }
.gcard-art img { width: 100%; height: auto; display: block; }
.gcard-l {
  display: block; margin-top: 10px;
  font-family: var(--serif); font-weight: 700; font-size: 17px; color: var(--ink);
}
.gcard-tick {
  position: absolute; top: 9px; right: 9px;
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--card); border: 1.5px solid var(--line);
  color: var(--ink); opacity: 0; transform: scale(.94);
  transition: opacity .16s ease, transform .2s cubic-bezier(.17,.67,.32,1.94);
}
.gcard:active { transform: scale(.97); box-shadow: 0 1px 0 rgba(42,24,48,.22); }
.gcard.sel { background: var(--gold-wash); box-shadow: 0 3px 0 var(--gold-deep); }
.gcard.sel .gcard-tick { opacity: 1; transform: none; background: var(--gold); }

/* weton */
.i2-wheel { display: flex; justify-content: center; margin: 2px 0 4px; }
.i2-wheel svg { width: min(250px, 68vw); height: auto; }
.i2-wheel g { animation: qOptIn .34s var(--e-out) backwards; }
.i2-wheel g.on { animation: i2Hit .6s cubic-bezier(.17,.67,.32,1.94) backwards; transform-origin: center; }
@keyframes i2Hit { 0% { opacity: 0; transform: scale(.92); }
                   60% { opacity: 1; transform: scale(1.18); }
                   100% { opacity: 1; transform: scale(1); } }
.i2-neptu {
  text-align: center; font-family: var(--mono); font-size: 13.5px; font-weight: 500;
  letter-spacing: .04em; color: var(--gold-deep); margin-top: 2px;
}
.i2-note {
  margin: 16px 0 0; padding: 14px 15px; border-radius: var(--r-sm);
  background: var(--card); border: 1.6px solid var(--line);
  box-shadow: 0 2px 0 rgba(42,24,48,.18);
  font-size: 13.5px; line-height: 1.5; color: var(--ink-soft);
  animation: qOptIn .36s var(--e-out) .7s backwards;
}
@media (prefers-reduced-motion: reduce) {
  .gcard, .i2-wheel g, .i2-note { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOCK INTERSTITIALS (unique · fear+solution · safety) + CONTACT GATE
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes blkIn    { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes blkPop   { 0% { opacity: 0; transform: scale(.93); }
                      60% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }
@keyframes blkRay   { 0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scaleY(.2); }
                      45% { opacity: 1; }
                      100% { opacity: 0; transform: rotate(var(--a)) translateY(-46px) scaleY(1); } }
@keyframes blkDraw  { to { stroke-dashoffset: 0; } }

.screen.blk .q-title { margin-top: 4px; }
.screen.blk.go > * { animation: blkIn .42s var(--e-out) backwards; }
.screen.blk.go > *:nth-child(2) { animation-delay: .08s; }
.screen.blk.go > *:nth-child(3) { animation-delay: .16s; }
.screen.blk.go > *:nth-child(4) { animation-delay: .24s; }
.screen.blk.go > *:nth-child(5) { animation-delay: .32s; }

/* I-A · unique */
.ia-burst { position: relative; height: 8px; }
.ia-burst i {
  position: absolute; left: 50%; top: 6px; width: 3px; height: 16px; border-radius: 2px;
  background: var(--gold); transform-origin: 50% 100%; opacity: 0;
}
.screen.blk.go .ia-burst i { animation: blkRay 1s var(--e-out) .25s backwards; }
.ia-burst i:nth-child(1){--a:-52deg} .ia-burst i:nth-child(2){--a:-30deg}
.ia-burst i:nth-child(3){--a:-10deg} .ia-burst i:nth-child(4){--a:10deg}
.ia-burst i:nth-child(5){--a:30deg}  .ia-burst i:nth-child(6){--a:52deg}
.ia-title { font-size: clamp(26px, 8vw, 33px) !important; }
.ia-note { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }

/* I-B · fear then solution */
.ib-paths { display: grid; gap: 11px; margin-top: 6px; }
.ib-p { padding: 13px 14px; border-radius: var(--r-sm); border: 1.6px solid var(--line); }
.ib-p p { margin: 0; font-size: 13px; line-height: 1.45; }
.ib-l { font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.ib-bad { background: var(--paper-2); }
.ib-bad .ib-l, .ib-bad p { color: var(--ink-faint); }
.ib-good { background: var(--gold-wash); box-shadow: 0 2px 0 var(--gold-deep); }
.ib-good .ib-l { color: var(--gold-deep); }
.ib-good p { color: var(--ink); font-weight: 600; }

/* GATE */
.gfield { position: relative; }
.gwhy { margin: 2px 0 7px; font-size: 12.5px; line-height: 1.4; color: var(--ink-soft); }
.gtick {
  position: absolute; right: 14px; bottom: 16px;
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--card); border: 1.5px solid var(--line); color: var(--ink);
  opacity: 0; transform: scale(.94);
  transition: opacity .16s ease, transform .22s cubic-bezier(.17,.67,.32,1.94);
}
.gtick.on { opacity: 1; transform: none; background: var(--gold); }
/* both fields visible from the start; they just arrive in sequence */
.gate .gfield { animation: blkIn .38s var(--e-out) backwards; }
.gate .gfield:nth-of-type(1) { animation-delay: .10s; }
.gate .gfield:nth-of-type(2) { animation-delay: .20s; }
.gnote { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-faint); text-align: center; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .screen.blk.go > *, .ia-burst i, .gwa.on {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}

/* weton, made celebratory: rays sweep out behind the wheel and the neptu lands */
.i2-stage { position: relative; display: flex; justify-content: center; }
.i2-rays { position: absolute; inset: 0; pointer-events: none; }
.i2-rays i {
  position: absolute; left: 50%; top: 50%; width: 2px; height: 26px; margin: -13px 0 0 -1px;
  border-radius: 2px; background: linear-gradient(var(--gold), rgba(217,164,65,0));
  transform-origin: 50% 50%; opacity: 0;
}
.screen.i2.go .i2-rays i {
  animation: i2Ray 1.15s var(--e-out) backwards;
  animation-delay: calc(.45s + var(--a) / 3600deg * .5s);
}
@keyframes i2Ray {
  0%   { opacity: 0; transform: rotate(var(--a)) translateY(-40px) scaleY(.3); }
  40%  { opacity: .95; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-108px) scaleY(1); }
}
.i2-neptu b { font-size: 16px; font-weight: 700; color: var(--gold-deep); display: inline-block; }
.i2-neptu b.hit { animation: i1Pop .55s cubic-bezier(.17,.67,.32,1.94); }
.screen.i2.go .i2-wheel { animation: i2Rise .6s var(--e-out) backwards; }
@keyframes i2Rise { from { opacity: 0; transform: scale(.94) rotate(-4deg); }
                    to   { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .i2-rays { display: none; }
  .screen.i2.go .i2-wheel, .i2-neptu b.hit { animation: none !important; }
}

/* ── I-C · social proof ──────────────────────────────────────────────────── */
.ic-title b {
  font-family: var(--serif); font-weight: 700; color: var(--gold-deep);
  font-variant-numeric: tabular-nums; display: inline-block;
}
.ic-title b.hit { animation: i1Pop .55s cubic-bezier(.17,.67,.32,1.94); }
.ic-testi { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 7px; }
.ic-testi li {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 9px 11px; border-radius: var(--r-sm);
  background: var(--card); border: 1.6px solid var(--line);
  box-shadow: 0 2px 0 rgba(42,24,48,.18);
  opacity: 0; animation: blkIn .38s var(--e-out) forwards;
}
.ic-av { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
         border: 1.5px solid var(--line); background: var(--paper-2); }
.ic-av img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ic-bd { flex: 1; min-width: 0; }
.ic-st { display: block; font-size: 10.5px; letter-spacing: .09em; color: var(--gold); margin-bottom: 3px; }
.ic-q  { display: block; font-size: 13px; line-height: 1.38; font-weight: 600; color: var(--ink); }
.ic-n  { display: block; font-size: 11px; color: var(--ink-faint); margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .blk-wipe { display: none; }
  .ic-testi li, .ic-title b.hit {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}

/* weton: rings draw, chips arrive around the circle, the matched pair lands last */
.i2-wheel .i2-ring { animation: none; }
.screen.i2.go .i2-wheel .i2-ring {
  animation: i2Draw 900ms var(--e-inout) 120ms forwards;
}
.screen.i2.go .i2-wheel .i2-ring2 { animation-delay: 260ms; }
@keyframes i2Draw { to { stroke-dashoffset: 0; } }
.screen.i2.go .i2-wheel g.on { animation: i2Land 620ms var(--e-out) backwards; }
@keyframes i2Land {
  0%   { opacity: 0; transform: scale(.94); }
  55%  { opacity: 1; transform: scale(1.22); }
  100% { opacity: 1; transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   I-A COUNTDOWN METER + I-B DIVERGING GRAPH
   transform/opacity + clip-path only · strong ease-out · tap to replay
   ═══════════════════════════════════════════════════════════════════════════ */
.ib-chart {
  display: block; margin: 6px 0 16px; padding: 16px 16px 11px;
  border-radius: var(--r); background: var(--card); border: 1.6px solid var(--line);
  box-shadow: 0 2px 0 rgba(42,24,48,.85), 0 16px 34px -22px rgba(42,24,48,.42);
  cursor: pointer; user-select: none; transition: transform 160ms var(--e-out);
}
.ib-chart:active { transform: scale(.985); }
.ib-chart:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }

/* ── I-B · one line falls, one climbs ────────────────────────────────────── */
.ib-chart { position: relative; }
.ib-chart svg { width: 100%; height: 190px; display: block; overflow: visible; }
.ib-grid line { stroke: rgba(42,24,48,.10); stroke-width: 1; }
.ib-line { fill: none; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; }
.ib-line.down { stroke: rgba(42,24,48,.34); stroke-width: 3; }
.ib-line.up   { stroke: url(#ibUp); stroke-width: 4.5;
                filter: drop-shadow(0 3px 8px rgba(217,164,65,.5)); }
.ib-chart.run .ib-line.down { animation: ibDraw 1.05s var(--e-inout) .15s forwards; }
.ib-chart.run .ib-line.up   { animation: ibDraw 1.15s var(--e-out)   .75s forwards; }
@keyframes ibDraw { to { stroke-dashoffset: 0; } }

.ib-end { opacity: 0; }
.ib-end.down { fill: #B9B0A6; stroke: var(--line); stroke-width: 1.5; }
.ib-end.up   { fill: var(--gold); stroke: var(--line); stroke-width: 1.8; }
.ib-chart.run .ib-end.down { animation: ibPop 420ms var(--e-out) 1.15s forwards; }
.ib-chart.run .ib-end.up   { animation: ibPop 520ms var(--e-out) 1.85s forwards,
                                        ibHalo 1.1s var(--e-out) 2.1s 2; }
@keyframes ibPop  { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes ibHalo { 0% { filter: drop-shadow(0 0 0 rgba(217,164,65,.9)); }
                    100% { filter: drop-shadow(0 0 14px rgba(217,164,65,0)); } }

.ib-tag {
  position: absolute; font-size: 9.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; opacity: 0; padding: 3px 8px; border-radius: 999px;
}
.ib-tag.bad  { left: 16px;  bottom: 52px; color: var(--ink-faint); background: var(--paper-2); }
.ib-tag.good { right: 16px; top: 12px;    color: #20170B; background: var(--gold);
               border: 1.4px solid var(--line); }
.ib-chart.run .ib-tag.bad  { animation: ibTag 380ms var(--e-out) 1.25s forwards; }
.ib-chart.run .ib-tag.good { animation: ibTag 420ms var(--e-out) 1.95s forwards; }
@keyframes ibTag { from { opacity: 0; transform: translateY(6px) scale(.94); }
                   to   { opacity: 1; transform: none; } }
.ib-x { display: flex; justify-content: space-between; margin-top: 6px; padding: 0 4px; }
.ib-x u { text-decoration: none; font-family: var(--mono); font-size: 9.5px; color: var(--ink-faint); }

@media (prefers-reduced-motion: reduce) {
  .ia-big, .ib-line, .ib-end, .ib-tag {
    animation: none !important; opacity: 1 !important;
  }
  .ib-line { stroke-dashoffset: 0 !important; }
}

/* ── I-B · one line falls, one climbs ────────────────────────────────────── */
.ib-chart { position: relative; }
.ib-chart svg { width: 100%; height: 190px; display: block; overflow: visible; }
.ib-grid line { stroke: rgba(42,24,48,.10); stroke-width: 1; }
.ib-line { fill: none; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; }
.ib-line.down { stroke: rgba(42,24,48,.34); stroke-width: 3; }
.ib-line.up   { stroke: url(#ibUp); stroke-width: 4.5;
                filter: drop-shadow(0 3px 8px rgba(217,164,65,.5)); }
.ib-chart.run .ib-line.down { animation: ibDraw 1.05s var(--e-inout) .15s forwards; }
.ib-chart.run .ib-line.up   { animation: ibDraw 1.15s var(--e-out)   .75s forwards; }
@keyframes ibDraw { to { stroke-dashoffset: 0; } }

.ib-end { opacity: 0; }
.ib-end.down { fill: #B9B0A6; stroke: var(--line); stroke-width: 1.5; }
.ib-end.up   { fill: var(--gold); stroke: var(--line); stroke-width: 1.8; }
.ib-chart.run .ib-end.down { animation: ibPop 420ms var(--e-out) 1.15s forwards; }
.ib-chart.run .ib-end.up   { animation: ibPop 520ms var(--e-out) 1.85s forwards,
                                        ibHalo 1.1s var(--e-out) 2.1s 2; }
@keyframes ibPop  { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes ibHalo { 0% { filter: drop-shadow(0 0 0 rgba(217,164,65,.9)); }
                    100% { filter: drop-shadow(0 0 14px rgba(217,164,65,0)); } }

.ib-tag {
  position: absolute; font-size: 9.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; opacity: 0; padding: 3px 8px; border-radius: 999px;
}
.ib-tag.bad  { left: 16px;  bottom: 52px; color: var(--ink-faint); background: var(--paper-2); }
.ib-tag.good { right: 16px; top: 12px;    color: #20170B; background: var(--gold);
               border: 1.4px solid var(--line); }
.ib-chart.run .ib-tag.bad  { animation: ibTag 380ms var(--e-out) 1.25s forwards; }
.ib-chart.run .ib-tag.good { animation: ibTag 420ms var(--e-out) 1.95s forwards; }
@keyframes ibTag { from { opacity: 0; transform: translateY(6px) scale(.94); }
                   to   { opacity: 1; transform: none; } }
.ib-x { display: flex; justify-content: space-between; margin-top: 6px; padding: 0 4px; }
.ib-x u { text-decoration: none; font-family: var(--mono); font-size: 9.5px; color: var(--ink-faint); }

@media (prefers-reduced-motion: reduce) {
  .ia-big, .ib-line, .ib-end, .ib-tag {
    animation: none !important; opacity: 1 !important;
  }
  .ib-line { stroke-dashoffset: 0 !important; }
}

/* ── I-A · confetti celebration. No countdown, no bar — the number lands and
      the screen throws a party. Only transform + opacity animate. ───────── */
.ia-party {
  position: relative; display: flex; align-items: center; justify-content: center;
  margin: 10px auto 18px; min-height: 168px;
  cursor: pointer; user-select: none; transition: transform 160ms var(--e-out);
}
.ia-party:active { transform: scale(.97); }
.ia-party:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 6px; border-radius: var(--r); }

.ia-badge {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 18px 30px; border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  border: 1.8px solid var(--line);
  box-shadow: 0 4px 0 var(--line), 0 20px 38px -18px rgba(217,164,65,.85);
}
.ia-party.run .ia-badge { animation: iaBadge 620ms var(--e-out) 60ms backwards; }
@keyframes iaBadge {
  0%   { opacity: 0; transform: scale(.94) translateY(10px); }
  55%  { opacity: 1; transform: scale(1.07) translateY(0); }
  100% { opacity: 1; transform: scale(1); }
}
.ia-big { display: flex; align-items: center; gap: 2px; }
.ia-big b {
  font-family: var(--serif); font-weight: 700; font-size: clamp(40px, 13vw, 54px);
  line-height: 1; color: #20170B; font-variant-numeric: tabular-nums;
}
.ia-big em {
  font-family: var(--serif); font-style: normal; font-weight: 700;
  font-size: clamp(17px, 5vw, 22px); color: #20170B;
  align-self: center; transform: translateY(-.34em);
}

/* the confetti itself */
.ia-confetti { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ia-confetti i {
  position: absolute; left: 50%; top: 50%;
  width: var(--w); height: var(--h); border-radius: 2px;
  margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  opacity: 0; will-change: transform, opacity;
}
.ia-party.run .ia-confetti i {
  animation: iaConf 1.25s var(--e-out) forwards;
  animation-delay: calc(180ms + var(--d));
}
@keyframes iaConf {
  0%   { opacity: 0; transform: translate(0,0) rotate(0) scale(.94); }
  14%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0;
         transform: translate(var(--tx), calc(var(--ty) + 90px)) rotate(var(--rot)) scale(1); }
}
.ia-confetti .c-gold  { background: var(--gold); }
.ia-confetti .c-gold2 { background: var(--gold-deep); }
.ia-confetti .c-pink  { background: var(--pink); }
.ia-confetti .c-lav   { background: var(--lavender); }
.ia-confetti .c-mint  { background: var(--mint); }
.ia-confetti .c-peach { background: var(--peach); }

@media (prefers-reduced-motion: reduce) {
  .ia-confetti { display: none; }
  .ia-party.run .ia-badge { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROCESSING SCREEN (7s) — weton + palm analysis, testimonial rotating below
   ═══════════════════════════════════════════════════════════════════════════ */
.screen.ld { text-align: center; }
.ld-title { font-size: clamp(22px, 6.4vw, 27px) !important; margin-bottom: 14px !important; }
.ld-hand {
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  width: 108px; height: 108px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--card); border: 1.6px solid var(--line);
  box-shadow: 0 0 0 4px var(--gold-wash), 0 0 0 5.4px var(--line);
  animation: ldPulse 2.1s var(--e-inout) infinite;
}
@keyframes ldPulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--gold-wash), 0 0 0 5.4px var(--line),
                         0 0 0 0 rgba(217,164,65,.55); }
  55%      { box-shadow: 0 0 0 4px var(--gold-wash), 0 0 0 5.4px var(--line),
                         0 0 0 16px rgba(217,164,65,0); }
}
.ld-hand img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ld-bar {
  height: 8px; border-radius: 999px; background: var(--card);
  border: 1.4px solid var(--line); overflow: hidden;
}
.ld-bar i {
  display: block; height: 100%; width: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  transform: scaleX(0); transform-origin: left center;   /* transform, not width */
}
.ld-dots { display: flex; justify-content: center; gap: 7px; margin: 10px 0 14px; }
.ld-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-deep); }
.ld-dots i:nth-child(1) { animation: progressDot1 1.4s linear infinite; }
.ld-dots i:nth-child(2) { animation: progressDot2 1.4s linear infinite; }
.ld-dots i:nth-child(3) { animation: progressDot3 1.4s linear infinite; }

.ld-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; text-align: left; }
.ld-steps li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--card); border: 1.5px solid rgba(42,24,48,.16);
  font-size: 13px; font-weight: 600; color: var(--ink-faint);
  opacity: .45; transition: opacity 240ms var(--e-out), border-color 240ms var(--e-out),
                            color 240ms var(--e-out);
}
.ld-steps li.on { opacity: 1; color: var(--ink); border-color: var(--line); }
.ld-steps li.done { box-shadow: 0 2px 0 rgba(42,24,48,.16); }
.ld-tick {
  flex: 0 0 19px; width: 19px; height: 19px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-2); border: 1.4px solid rgba(42,24,48,.28); color: transparent;
  transition: background 240ms var(--e-out), color 240ms var(--e-out), transform 240ms var(--e-out);
}
.ld-steps li.done .ld-tick {
  background: var(--gold); border-color: var(--line); color: var(--ink);
  transform: scale(1.06);
}

/* rotating testimonial */
.ld-testi { margin-top: 16px; min-height: 96px; }
.ld-card {
  display: flex; gap: 11px; align-items: flex-start; text-align: left;
  padding: 11px 12px; border-radius: var(--r-sm);
  background: var(--card); border: 1.6px solid var(--line);
  box-shadow: 0 2px 0 rgba(42,24,48,.18);
  animation: ldCard 420ms var(--e-out) both;      /* fades IN and holds — never blank */
}
@keyframes ldCard { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.ld-av { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
         border: 1.5px solid var(--line); background: var(--paper-2); }
.ld-av img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ld-bd { flex: 1; min-width: 0; }
.ld-st { display: block; font-size: 10.5px; letter-spacing: .09em; color: var(--gold); margin-bottom: 3px; }
.ld-q  { display: block; font-size: 13px; line-height: 1.38; font-weight: 600; color: var(--ink); }
.ld-n  { display: block; font-size: 11px; color: var(--ink-faint); margin-top: 4px; }
.ld-foot { margin: 14px 0 0; font-size: 11.5px; color: var(--ink-faint); }

@media (prefers-reduced-motion: reduce) {
  .ld-hand, .ld-dots i, .ld-card { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHECKOUT · DESTINY SCORE CARD — purely additive. No selector above this
   marker is modified. Sits between .co-intro and .co-findings.
   Only transform / opacity / width animate.
   ═══════════════════════════════════════════════════════════════════════════ */
.co-score {
  margin: 14px 0 0; padding: 18px 16px 16px;
  cursor: pointer; user-select: none;
  animation: screenIn .5s ease .14s both;
}
.co-score:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }

.co-score-eyebrow {
  display: flex; align-items: center; gap: 6px; margin: 0 0 8px;
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-deep);
}
.co-score-h {
  margin: 0 0 16px; font-family: var(--serif); font-weight: 600;
  font-size: clamp(17px, 4.6vw, 21px); line-height: 1.3; color: var(--ink);
}
.co-score-inline { color: var(--gold-deep); font-weight: 700; }

.co-score-rows { display: flex; flex-direction: column; gap: 13px; }
.co-score-lab {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 0 0 5px; font-size: 13px; font-weight: 600; color: var(--ink-soft);
}
.co-score-lab b {
  font-family: var(--serif); font-size: 26px; font-weight: 700; line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums;
  transition: transform .2s var(--e-out);
}
.co-score-lab b.hit { transform: scale(1.06); }
.is-pot .co-score-lab b { color: var(--gold-deep); font-size: 30px; }

.co-score-track {
  position: relative; height: 11px; border-radius: 999px;
  background: rgba(42, 24, 48, .09); overflow: hidden;
}
.co-score-fill {
  display: block; height: 100%; width: 0; border-radius: 999px;
  transition: width .78s var(--e-out);
}
.is-now .co-score-fill { background: linear-gradient(90deg, #6E5A78, #4A3352); }
.is-pot .co-score-fill {
  position: relative; overflow: hidden;
  background: linear-gradient(90deg, var(--gold-2), var(--gold));
  box-shadow: 0 0 14px -2px rgba(217, 164, 65, .8);
}
/* a light sweep along the potential bar — reads as "live", costs one transform */
.co-score-shine {
  position: absolute; inset: 0 auto 0 -40%; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: coScoreShine 2.2s var(--e-inout) 1.5s infinite;
}
@keyframes coScoreShine { to { transform: translateX(360%); } }

.co-score-gap {
  display: flex; align-items: center; gap: 9px;
  margin: 15px 0 0; padding: 11px 13px; border-radius: 12px;
  background: rgba(217, 164, 65, .13);
  border: 1px dashed rgba(217, 164, 65, .55);
  opacity: 0; transform: translateY(8px);
}
.co-score-gap.in { animation: coScoreGap .5s var(--e-out) forwards; }
@keyframes coScoreGap { to { opacity: 1; transform: none; } }
.co-score-gapn {
  font-family: var(--serif); font-size: 25px; font-weight: 700; line-height: 1;
  color: var(--gold-deep); font-variant-numeric: tabular-nums;
}
.co-score-gapt { font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--ink); }

.co-score-note { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-soft); }
/* the ask leads the sentence, so it carries the ink colour and the serif weight
   while the reason behind it stays quiet underneath */
.co-score-cta {
  display: block; margin: 0 0 3px;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(15px, 4.1vw, 17px); line-height: 1.3; color: var(--gold-deep);
}

@media (prefers-reduced-motion: reduce) {
  .co-score { animation: none; }
  .co-score-shine { animation: none; }
  .co-score-fill { transition: none; }
  .co-score-gap { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ON-SITE PAYMENT PAGE (pay.html) — additive. Reuses the checkout card/timer
   look so nothing new has to download; only these few selectors are new.
   ═══════════════════════════════════════════════════════════════════════════ */
.pay-card { text-align: center; padding: 20px 16px 16px; margin-top: 12px; }
.pay-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: 12px;
}
/* white box guarantees black-on-white contrast regardless of card colour, so the QR scans */
.pay-qr { display: flex; justify-content: center; margin: 4px 0 12px; }
.pay-qr svg, .pay-qr-img {
  width: min(260px, 72vw); height: auto; display: block;
  background: #fff; border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.05);
}
/* high-res PNG downscaled: keep module edges crisp, never blurry */
.pay-qr-img { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }

.pay-va {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap; margin: 2px 0 12px;
}
.pay-va-num {
  font-family: var(--mono, ui-monospace, monospace); font-size: clamp(20px, 6.2vw, 27px);
  font-weight: 700; letter-spacing: .06em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.pay-copy {
  border: 1.5px solid var(--gold-deep); background: transparent; color: var(--gold-deep);
  font-weight: 700; font-size: 13px; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  transition: transform .12s var(--e-out), background .18s ease, color .18s ease;
}
.pay-copy:active { transform: scale(.97); }
.pay-copy.ok { background: var(--gold-deep); color: #fff; }
.pay-ew { display: inline-flex; margin: 6px 0 10px; }

.pay-hint { font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); margin: 6px 0 0; }
.pay-amount {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line);
  font-size: 14px; color: var(--ink-soft);
}
/* light weight + green: thin reads as "less heavy", green reads as "safe / good deal" */
.pay-amount b { font-family: var(--serif); font-size: 19px; color: #2f9e57; font-weight: 300; }

/* live status strip */
.pay-status {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 12px 0 0; padding: 11px 14px; border-radius: 12px;
  background: rgba(217,164,65,.12); border: 1px solid rgba(217,164,65,.4);
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.pay-status.is-ok { background: rgba(43,160,96,.14); border-color: rgba(43,160,96,.5); }
.pay-status.is-bad { background: rgba(200,60,60,.10); border-color: rgba(200,60,60,.4); }
.pay-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--gold-deep); flex: none;
  animation: payPulse 1.4s ease-in-out infinite;
}
@keyframes payPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
.pay-status.is-ok .pay-dot { background: #2BA060; animation: none; }
.pay-status.is-bad .pay-dot { background: #C83C3C; animation: none; }

/* countdown urgency states */
.co-timer.is-soon .co-timer-clock { color: #C8781E; }
.co-timer.is-out .co-timer-clock { color: #C83C3C; }

.pay-how { margin-top: 12px; padding: 14px 16px; text-align: left; }
.pay-how summary { font-weight: 700; cursor: pointer; font-size: 14px; }
.pay-how ol { margin: 10px 0 0 18px; padding: 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); }
.pay-trust { margin-top: 12px; text-align: center; font-size: 12px; color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) { .pay-dot { animation: none; } }

/* manual "Cek Status Pembayaran" */
.pay-check {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin: 10px 0 0; padding: 13px 16px;
  border: 1.6px solid var(--gold-deep); border-radius: 999px;
  background: transparent; color: var(--gold-deep);
  font-family: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
  transition: transform .12s var(--e-out), background .18s ease, color .18s ease, opacity .18s ease;
}
.pay-check:active { transform: scale(.985); }
.pay-check:hover { background: rgba(217,164,65,.10); }
.pay-check.busy { opacity: .6; pointer-events: none; }
.pay-check.busy .pay-check-ic { animation: paySpin .9s linear infinite; }
.pay-check-ic { display: inline-flex; }
@keyframes paySpin { to { transform: rotate(360deg); } }
.pay-checknote {
  margin: 7px 0 0; text-align: center; font-size: 12px; color: var(--ink-soft);
}
@media (prefers-reduced-motion: reduce) { .pay-check.busy .pay-check-ic { animation: none; } }

/* method picker rows */
.pay-picklist { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 6px; }
.pay-pickrow {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 14px; border: 1.5px solid var(--line); border-radius: 14px;
  background: var(--card, #fff); text-decoration: none; color: var(--ink);
  transition: transform .12s var(--e-out), border-color .18s ease, background .18s ease;
}
.pay-pickrow:active { transform: scale(.99); }
.pay-pickrow:hover { border-color: var(--gold-deep); background: rgba(217,164,65,.06); }
.pay-pickname { display: flex; flex-direction: column; text-align: left; }
.pay-pickname b { font-size: 15px; }
.pay-pickname small { font-size: 12px; color: var(--ink-soft); }
.pay-pickgo { font-size: 22px; color: var(--gold-deep); line-height: 1; }
.pay-switch { margin: 9px 0 0; text-align: center; font-size: 13px; }
.pay-switch a { color: var(--ink-soft); text-decoration: underline; }

/* payment-method brand logo on the instrument card */
.pay-brand { display: flex; justify-content: center; margin: 2px 0 12px; }
.pay-brand-logo {
  height: 34px; max-width: 160px; width: auto; object-fit: contain;
  display: block; filter: none;
}

/* trust badges row (SSL · Himbara · Xendit) — clean white panel, consistent height */
.pay-badges {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  flex-wrap: wrap; margin: 10px auto 0; max-width: 360px;
  padding: 12px 16px; background: #fff; border-radius: 14px;
  box-shadow: 0 1px 3px rgba(42,24,48,.05), 0 0 0 1px rgba(42,24,48,.05);
}
.pay-badge { height: 22px; width: auto; display: block; }
.pay-badge-sep { width: 1px; height: 18px; background: var(--line); flex: 0 0 auto; }

/* flat SSL badge — matches the page instead of the dated glossy sticker */
.pay-ssl {
  display: inline-flex; align-items: center; gap: 6px;
  color: #2f9e57;                      /* green = "secure" */
}
.pay-ssl svg { flex: 0 0 auto; }
.pay-ssl span {
  font-size: 10px; font-weight: 800; line-height: 1.05; letter-spacing: .04em;
  text-transform: uppercase; text-align: left; color: #2f9e57;
}

/* inline scarcity + verified-payment feed (pay page, under the timer) */
.pay-scarcity {
  margin: 10px 0 2px; padding: 10px 12px;
  background: linear-gradient(180deg, #FFF7E8, #FFFDF9);
  border: 1px solid rgba(217,164,65,.35); border-radius: 14px;
}
.pay-sc-top { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink); }
.pay-sc-fire { display: inline-flex; color: #E0791F; flex: 0 0 auto; }
.pay-sc-label { flex: 1 1 auto; min-width: 0; }
.pay-sc-label b { font-weight: 700; }
.pay-sc-left {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; color: #C0562A;
  background: rgba(224,121,31,.12); padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.pay-sc-left b { font-weight: 800; }
.pay-sc-notif {
  display: flex; align-items: center; gap: 10px; margin-top: 8px;
  padding-top: 8px; border-top: 1px dashed rgba(217,164,65,.3);
}
.pay-sc-bell {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(224,121,31,.12); color: #E0791F;
  display: inline-flex; align-items: center; justify-content: center;
}
.pay-sc-bell svg { transform-origin: 50% 4px; animation: scBell 2.6s ease-in-out infinite; }
@keyframes scBell {
  0%,86%,100% { transform: rotate(0); }
  88% { transform: rotate(12deg); } 90% { transform: rotate(-10deg); }
  92% { transform: rotate(8deg); }  94% { transform: rotate(-5deg); } 96% { transform: rotate(2deg); }
}
.pay-sc-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pay-sc-title {
  font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #2f9e57;
}
.pay-sc-msg { font-size: 12px; line-height: 1.3; color: var(--ink); }
.pay-sc-price {
  flex: 0 0 auto; align-self: center; font-family: var(--serif);
  font-size: 15px; font-weight: 300; color: var(--gold-deep); white-space: nowrap;
}
.pay-sc-notif.in .pay-sc-body, .pay-sc-notif.in .pay-sc-price { animation: scFade .5s var(--e-out); }
@keyframes scFade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.pay-sc-left.bump { animation: scBump .4s var(--e-out); }
@keyframes scBump { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .pay-sc-bell svg, .pay-sc-notif.in .pay-sc-body, .pay-sc-notif.in .pay-sc-price, .pay-sc-left.bump { animation: none; }
}

/* compact testimonial card wrapper (pay page) */
.pay-testi { margin: 10px 0 2px; }

/* unified trust panel (pay page): security reassurance + badge row */
.pay-guard {
  margin: 12px 0 2px; padding: 14px 16px;
  background: #fff; border-radius: 16px;
  box-shadow: 0 1px 3px rgba(42,24,48,.05), 0 0 0 1px rgba(42,24,48,.06);
}
.pay-guard-head { display: flex; align-items: center; gap: 11px; }
.pay-guard-ic {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px;
  background: rgba(47,158,87,.12); color: #2f9e57;
  display: inline-flex; align-items: center; justify-content: center;
}
.pay-guard-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.pay-guard-tx b { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.pay-guard-tx small { font-size: 11.5px; color: var(--ink-soft); line-height: 1.3; }
.pay-guard-tx small b { font-size: inherit; font-weight: 800; color: #2f9e57; }
.pay-guard-badges {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}

/* ── palm upload: BOTH palms on one screen (left | right) ────────────────────── */
.up-duo { display: flex; gap: 12px; margin-top: 16px; }
.up-slot {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: stretch;
  animation: upSlotIn .5s var(--e-out) both;
}
.up-duo .up-slot:nth-child(2) { animation-delay: .09s; }   /* left lands, then right */
@keyframes upSlotIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.up-slot-lbl {
  font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--gold-deep); text-align: center; margin-bottom: 8px;
}
/* compact upload card (overrides the big single-card look) */
.upload-card.up-mini {
  margin-top: 0; padding: 0; aspect-ratio: 3 / 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border-width: 2px;
}
.upload-card.up-mini .hand-ic { width: 52px; height: 52px; margin: 0; }
.up-mini-tap {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700;
  color: var(--gold-deep); background: var(--gold-wash); padding: 6px 12px; border-radius: 999px;
}
/* preview frame — same height as the scanner card so left/right stay level */
.preview-card.up-mini-prev {
  margin: 0; width: 100%; max-width: none; aspect-ratio: auto; min-height: 214px;
}
/* CONTAIN, not cover: show the WHOLE uploaded palm — never crop off fingers/wrist */
.preview-card.up-mini-prev img { object-fit: contain; }
.preview-card.up-mini-prev { background: #14110f; }
.up-mini-act { margin-top: 8px; justify-content: center; }
.btn.btn-xs { padding: 7px 12px; font-size: 12.5px; gap: 5px; }
/* which palm is still missing → gentle red nudge after a failed Continue */
.up-slot.is-missing .upload-card.up-mini { border-color: #d9534f; background: #fff6f5; }
.up-slot.is-missing .up-slot-lbl { color: #d9534f; }
/* the "mapped" checkmark badge pops in */
.up-mini-prev .done-badge { top: 8px; right: 8px; animation: upBadgePop .34s var(--e-out) both; }
@keyframes upBadgePop { 0% { opacity: 0; transform: scale(.6); } 60% { transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .up-slot, .up-mini-prev .done-badge { animation: none; }
}

/* ── tidy scan badge: a compact icon circle in the corner (no text overflow) ──── */
.up-mini-prev .done-badge { top: 9px; right: 9px; left: auto; transform: none; }
.up-mini-prev .done-badge .pill {
  width: 28px; height: 28px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #7a5300; background: #ffe6a8; box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transition: background .25s ease, color .25s ease, transform .25s var(--e-out);
}
.up-mini-prev .done-badge .pill svg { flex: 0 0 auto; }
.up-mini-prev .done-badge .pill.done {
  color: #14532d; background: var(--mint); animation: upBadgePop .34s var(--e-out) both;
}


/* ── animated palm "scanner" on the upload card (pre-click) ───────────────────── */
.upload-card.up-scanner {
  aspect-ratio: auto; min-height: 258px;          /* bigger box so the whole palm fits */
  padding: 14px 8px 16px; gap: 10px; cursor: pointer;
  transition: transform .18s var(--e-out), border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.upload-card.up-scanner:hover {
  transform: translateY(-3px); border-color: var(--gold-deep); background: #fffdf4;
  box-shadow: 0 10px 26px rgba(217,164,65,.28);
}
.upload-card.up-scanner:active { transform: translateY(0) scale(.985); }
.upload-card.up-scanner:hover .up-scanline { animation-duration: 1.5s; }   /* scans faster on hover */
.upload-card.up-scanner:hover .up-hand { filter: drop-shadow(0 3px 12px rgba(217,164,65,.5)); }
.upload-card.up-scanner:hover .up-corner { opacity: 1; }
.up-scan {
  position: relative; width: 100%; height: 186px; padding-top: 28px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
}
.up-hand {
  width: auto; height: 150px; max-width: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 2px 6px rgba(217,164,65,.25));
  animation: upHandBreathe 4s ease-in-out infinite;
}
@keyframes upHandBreathe { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }
/* teal scan line sweeping over the palm */
.up-scanline {
  position: absolute; left: 8%; right: 8%; height: 2px; top: 50%;
  background: linear-gradient(90deg, rgba(45,212,191,0), #2dd4bf, rgba(45,212,191,0));
  box-shadow: 0 0 12px 2px rgba(45,212,191,.6);
  animation: upSweep 2.6s ease-in-out infinite;
}
@keyframes upSweep { 0%,100% { top: 22%; opacity:.5 } 50% { top: 78%; opacity:1 } }
/* scan-frame corner brackets */
.up-corner { position: absolute; width: 14px; height: 14px; border: 2px solid var(--gold); opacity:.7; }
.up-corner.tl { top: 4px; left: 6px; border-right: 0; border-bottom: 0; border-radius: 3px 0 0 0; }
.up-corner.tr { top: 4px; right: 6px; border-left: 0; border-bottom: 0; border-radius: 0 3px 0 0; }
.up-corner.bl { bottom: 4px; left: 6px; border-right: 0; border-top: 0; border-radius: 0 0 0 3px; }
.up-corner.br { bottom: 4px; right: 6px; border-left: 0; border-top: 0; border-radius: 0 0 3px 0; }
/* cycling benefit labels — one at a time, fading up (fits long labels, never clutters) */
.up-flabels { position: absolute; top: 2px; left: 0; right: 0; height: 24px; }
.up-flabel {
  position: absolute; top: 0; left: 50%; white-space: nowrap;
  font-size: 11px; font-weight: 700; color: #fff;
  background: rgba(30,41,59,.92); padding: 4px 10px; border-radius: 999px;
  box-shadow: 0 3px 10px rgba(0,0,0,.28);
  opacity: 0; transform: translate(-50%, 6px);
  animation: upLabelCycle 9s ease-in-out infinite; animation-delay: calc(var(--i) * 1.8s);
}
@keyframes upLabelCycle {
  0%      { opacity: 0; transform: translate(-50%, 6px); }
  3%      { opacity: 1; transform: translate(-50%, 0); }
  17%     { opacity: 1; transform: translate(-50%, -2px); }
  20%,100%{ opacity: 0; transform: translate(-50%, -8px); }
}
@media (prefers-reduced-motion: reduce) {
  .up-hand, .up-scanline, .up-flabel { animation: none; }
  .up-flabel:first-child { opacity: 1; transform: translateX(-50%); }
}


/* ---------- hero CTA v2: two-tier label + breathing glow + shine (2026-08-10 deploy) ---------- */
.cta-stack { display: flex; flex-direction: column; align-items: center; line-height: 1.12; gap: 2px; }
.cta-main  { font-size: 17px; font-weight: 800; letter-spacing: .2px; }
.cta-sub   { font-size: 11px; font-weight: 700; opacity: .72; letter-spacing: .55px; text-transform: uppercase; }
.hero-cta .btn { min-height: 62px; white-space: normal; }
.hero-cta .btn-primary { position: relative; overflow: hidden; animation: stickyCtaBreathe 2.8s ease-in-out infinite; }
.hero-cta .btn-primary > span { position: relative; z-index: 1; }
.hero-cta .btn-primary::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.5) 50%, transparent 68%);
  transform: translateX(-120%);
  animation: coShine 3.4s ease-in-out 1.2s infinite;
}
.sticky-cta .btn { min-height: 56px; white-space: normal; }
.sticky-cta .cta-sub { font-size: 10px; }
@media (prefers-reduced-motion: reduce) {
  .hero-cta .btn-primary { animation: none; }
  .hero-cta .btn-primary::before { animation: none; }
}


/* ---------- Angka Hoki card in the weton interstitial (2026-08-09) ---------- */
.i2-hoki { margin-top: 14px; }
.hk-card { background: var(--card,#fffdf6); border: 1.5px solid var(--line-soft,#e8dfcc); border-radius: 16px; padding: 14px 15px; text-align: left; }
.hk-title { display: block; font-family: var(--serif); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--gold-deep,#8a6d1f); margin-bottom: 8px; }
.hk-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.hk-row { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; color: var(--ink-soft,#5c5560); line-height: 1.35; }
.hk-row b { color: var(--ink,#2b2b2f); font-weight: 800; }
.hk-row i { font-style: normal; margin-left: auto; font-weight: 800; }
.hk-ok i { color: #1a7a4c; } .hk-no i { color: #b4453a; }
.hk-meter { margin-top: 8px; }
.hk-lbl { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; color: var(--ink,#2b2b2f); margin-bottom: 4px; }
.hk-lbl b { color: var(--gold-deep,#8a6d1f); }
.hk-bar { display: block; height: 8px; border-radius: 999px; background: rgba(42,24,48,.08); overflow: hidden; }
.hk-bar i { display: block; height: 100%; width: var(--w,0%); border-radius: 999px; background: linear-gradient(90deg,#4a3358,#2A1830); transform-origin: left; animation: hkFill .9s cubic-bezier(.2,.8,.2,1) backwards; }
.hk-gold .hk-bar i { background: linear-gradient(90deg,var(--gold-2,#e8c15c),var(--gold-deep,#b5832b)); animation-delay: .35s; }
.hk-gold .hk-lbl { color: var(--gold-deep,#8a6d1f); }
@keyframes hkFill { from { transform: scaleX(0); } }
.hk-lock { margin: 10px 0 0; font-size: 11.5px; color: var(--ink-faint,#8a8390); line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .hk-bar i { animation: none; } }

/* hoki card polish (rapih pass, 2026-08-09) */
.hk-card { padding: 15px 16px; box-shadow: 0 8px 20px -14px rgba(42,24,48,.35); }
.hk-row { font-size: 13px; padding: 3px 0; border-bottom: 1px dashed rgba(42,24,48,.07); }
.hk-list .hk-row:last-of-type { border-bottom: 0; }
.hk-more { display: block; margin-top: 6px; font-size: 11.5px; font-weight: 700; color: var(--gold-deep,#8a6d1f); }
.hk-bar { height: 10px; }
.hk-lbl { font-size: 12px; }
.hk-lbl b { font-size: 13px; }

/* screen-2 reward teaser v2 (2026-08-09): dark preview ticket, high visibility on cream */
.q-reward { position: relative; overflow: hidden; margin-top: 16px; padding: 13px 16px;
  border-radius: 14px; text-align: center;
  background: linear-gradient(135deg, #2A1830 0%, #3A2347 100%);
  border: 1.3px solid var(--gold-deep,#b5832b);
  box-shadow: 0 3px 0 rgba(0,0,0,.4), 0 12px 24px -12px rgba(42,24,48,.6), 0 0 0 3px rgba(217,164,65,.14);
  color: #F3D9A4; font-size: 13.5px; font-weight: 800; letter-spacing: .25px; line-height: 1.4;
  animation: stickyCtaBreathe 3s ease-in-out infinite; }
.q-reward::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.28) 50%, transparent 68%);
  transform: translateX(-120%); animation: coShine 3.2s ease-in-out 1s infinite; }
@media (prefers-reduced-motion: reduce) { .q-reward, .q-reward::before { animation: none; } }



/* ---------- Simpan Kode QR button on /pay (2026-08-10): same-device QRIS fix ---------- */
.pay-saveqr { display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  margin:12px 0 0; padding:13px 16px; border-radius:999px; cursor:pointer;
  background:#fff; border:1.6px solid var(--gold-deep,#b5832b); color:var(--gold-deep,#8a6d1f);
  font-size:14.5px; font-weight:800; letter-spacing:.2px;
  box-shadow:0 2px 0 rgba(181,131,43,.35); transition:transform .12s ease, background .15s ease; }
.pay-saveqr:active { transform:translateY(1px); }
.pay-saveqr.is-done { background:#e9f8ef; border-color:#1a7a4c; color:#1a7a4c; box-shadow:0 2px 0 rgba(26,122,76,.3); }
.pay-savehint { margin:8px 0 0; font-size:12px; line-height:1.5; color:var(--ink-faint,#8a8390); text-align:center; }


/* long-press fallback for Simpan Kode QR (iOS in-app browsers) */
.pay-qr-fallback { margin-top: 10px; padding: 10px 14px; background: var(--gold-wash,#faf3e3); border: 1.5px dashed var(--gold-deep,#b5832b); border-radius: 14px; text-align: center; }
.pay-qr-fallback p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink,#2b2b2f); }

/* APPROXIMATED: local font optical sizing, calibrated at phone width. */
@media (min-width:385px) and (max-width:400px){.hero h1>[data-i18n="hero_h1_a"]{letter-spacing:-1.38px}}