/* ───────────────────────────────────────────────────────────
   Pricing page — clean rank cards + live session
   Scoped under .pricing-scene to beat global card overrides
   ─────────────────────────────────────────────────────────── */

.pricing-scene {
  position: relative;
  padding-bottom: 56px;
}

.pricing-scene .hub-hero-shell {
  margin-bottom: 0;
}

.pricing-scene .hub-hero-actions a {
  text-decoration: none;
}

.pricing-scene .page-body {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  padding: 8px 20px 0;
}

/* ── Grid ────────────────────────────────────────────────── */
.pricing-scene .pricing-grid {
  display: grid;
  gap: 20px;
  align-items: stretch;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

/* Four ranks in one row: Office Worker · Mid-Level Manager · Self-Employed ·
   Top Corporate. Top Corporate is the fourth rank rather than a separate
   section underneath, so it shares this grid. */
.pricing-scene .pricing-grid--ranks {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: 1280px;
}

/* Tablet: 2×2 rather than four squeezed columns. */
@media (max-width: 1080px) {
  .pricing-scene .pricing-grid--ranks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 720px;
  }
}.pricing-scene .pricing-note--link {
  display: block;
  color: var(--text2);
  text-decoration: none;
}
.pricing-scene .pricing-note--link:hover { text-decoration: underline; }

/* ── Card shell ──────────────────────────────────────────── */
.pricing-scene .pricing-card {
  --tier-color: #c9a66b;
  --tier-glow: rgba(201, 166, 107, 0.2);
  --tier-soft: rgba(201, 166, 107, 0.1);
  --tier-border: rgba(201, 166, 107, 0.28);

  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  text-align: left !important;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--tier-border);
  background:
    radial-gradient(ellipse 90% 50% at 50% -20%, var(--tier-soft), transparent 60%),
    linear-gradient(180deg, var(--bg3), var(--bg2)) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.32) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition:
    transform 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease;
}

.pricing-scene .pricing-card:hover {
  transform: translateY(-6px) !important;
  border-color: color-mix(in srgb, var(--tier-color) 55%, transparent);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.42),
    0 0 0 1px color-mix(in srgb, var(--tier-color) 20%, transparent),
    0 0 36px var(--tier-glow) !important;
}/* Featured — Mid-Level Manager */
.pricing-scene .pricing-card--featured {
  border-width: 1.5px;
  border-color: color-mix(in srgb, var(--tier-color) 70%, transparent);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.36),
    0 0 40px var(--tier-glow) !important;
  z-index: 1;
}

.pricing-scene .pricing-card--featured::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #1e4a7a, #4a90d9, #6eb3e8);
  pointer-events: none;
}

.pricing-scene .pricing-card--current {
  outline: 2px solid rgba(0, 245, 212, 0.45);
  outline-offset: 2px;
}

.pricing-scene .pricing-card-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px 18px 22px;
  border-radius: 20px;
}

.pricing-scene .pricing-card-top {
  margin-bottom: 14px;
}

/* ── Badge ───────────────────────────────────────────────── */
.pricing-scene .pricing-badge {
  /* new_pages.css still carries the old design's rule — position:absolute at
     top:-12px, overhanging the card. This card clips its own overflow for the
     corner glow, so that rule left every badge sliced in half along its top
     edge. Here the badge is an in-flow chip, so the stale offsets are reset
     rather than fought with overflow or z-index. */
  position: static;
  top: auto;
  left: auto;
  transform: none;
  display: inline-flex;
  align-items: center;
  margin-bottom: 14px;
  padding: 5px 11px;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid transparent;
}

.pricing-scene .pricing-badge--free {
  color: var(--text2);
  background: rgba(180, 120, 60, 0.18);
  border-color: rgba(201, 166, 107, 0.35);
}

.pricing-scene .pricing-badge--popular {
  color: #fff;
  background: linear-gradient(90deg, #c41e3a, #e63946);
  border-color: color-mix(in srgb, var(--text) 20%, transparent);
  box-shadow: 0 4px 14px rgba(230, 57, 70, 0.35);
}

.pricing-scene .pricing-badge--elite {
  color: #1a1204;
  background: linear-gradient(90deg, #c9a66b, #e8c547);
  border-color: rgba(232, 197, 71, 0.4);
}

.pricing-scene .pricing-badge--current {
  color: #032d28;
  background: linear-gradient(90deg, #00a884, #00f5d4);
  border-color: rgba(0, 245, 212, 0.5);
  box-shadow: 0 4px 14px rgba(0, 245, 212, 0.3);
}

.pricing-scene .pricing-badge--live {
  color: #f3e8ff;
  background: linear-gradient(90deg, #5b21b6, #a855f7);
  border-color: rgba(216, 180, 254, 0.35);
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.28);
}

/* ── Identity ────────────────────────────────────────────── */
.pricing-scene .pricing-identity {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pricing-scene .pricing-kanji {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1;
  color: var(--text);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--tier-color) 75%, var(--bg)),
    var(--tier-color)
  );
  box-shadow: 0 6px 16px var(--tier-glow);
}

.pricing-scene .pricing-name {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.pricing-scene .pricing-role {
  margin: 3px 0 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text3);
}

/* ── Avatars ─────────────────────────────────────────────── */
.pricing-scene .pricing-avatars {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 14px;
  padding: 10px 12px 8px;
  border-radius: 14px;
  background: var(--bg3);
  border: 1px solid color-mix(in srgb, var(--text) 5%, transparent);
  min-height: 0;
}

.pricing-scene .flk-avatar-slot--pricing {
  --flk-avatar-w: 88px;
  --flk-avatar-h: 108px;
  width: 88px;
  height: 108px;
  flex: 0 0 88px;
  border-radius: 12px;
  border: 1.5px solid color-mix(in srgb, var(--tier-color) 40%, transparent);
  box-shadow: 0 6px 16px var(--tier-glow);
  background: color-mix(in srgb, var(--text) 3%, transparent);
  overflow: hidden;
  transition: transform 0.25s ease;
}

.pricing-scene .pricing-card:hover .flk-avatar-slot--pricing {
  transform: translateY(-3px);
}

.pricing-scene .pricing-card:hover .flk-avatar-slot--pricing:nth-child(2) {
  transition-delay: 0.04s;
}

.pricing-scene .pricing-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
}

/* ── Price ───────────────────────────────────────────────── */
.pricing-scene .pricing-price-block {
  text-align: center;
  margin-bottom: 14px;
  padding: 14px 12px 12px;
  border-radius: 14px;
  background: var(--bg3);
  border: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
}

.pricing-scene .pricing-price-display {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  line-height: 1;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 900;
  color: var(--tier-color);
  -webkit-text-fill-color: var(--tier-color) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  text-shadow: 0 0 24px var(--tier-glow);
}

.pricing-scene .pricing-price-currency {
  font-size: 1.15rem;
  margin-top: 0.38em;
  opacity: 0.88;
}

.pricing-scene .pricing-price-value {
  font-size: clamp(2rem, 4vw, 2.55rem);
  letter-spacing: -0.03em;
}

.pricing-scene .pricing-price-cents {
  font-size: 1.15rem;
  margin-top: 0.38em;
  opacity: 0.9;
}

.pricing-scene .pricing-period {
  margin: 8px 0 0;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text3);
  letter-spacing: 0.02em;
}

/* ── Features ────────────────────────────────────────────── */
.pricing-scene .pricing-features {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  text-align: left;
  flex: 1;
}

.pricing-scene .pricing-features li {
  position: relative;
  display: block;
  padding: 7px 0 7px 22px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text2);
  border-bottom: 1px solid color-mix(in srgb, var(--text) 5%, transparent);
}

.pricing-scene .pricing-features li:last-child {
  border-bottom: none;
}

.pricing-scene .pricing-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 7px;
  width: auto;
  height: auto;
  display: inline;
  border-radius: 0;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--tier-color);
  background: none;
  transform: none;
}

/* ── Buttons (beat global flk-controls / flk-premium !important) ── */
.pricing-scene .pricing-btn,
.pricing-scene a.pricing-btn,
.pricing-scene button.pricing-btn,
.pricing-scene .pricing-btn[type="submit"] {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: auto;
  min-height: 48px;
  padding: 13px 18px !important;
  border-radius: 12px !important;
  border: none !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
  transition: transform 0.18s ease, filter 0.2s ease, box-shadow 0.22s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

.pricing-scene .pricing-btn::before {
  display: none !important;
}

.pricing-scene .pricing-btn:hover {
  transform: translateY(-1px) !important;
  filter: none;
  text-decoration: none !important;
}

.pricing-scene .pricing-btn:active {
  transform: translateY(0) scale(0.99) !important;
}

.pricing-scene form {
  margin-top: auto;
  width: 100%;
}

.pricing-scene form .pricing-btn {
  margin-top: 0;
}/* ── Korean rank aliases ─────────────────────────────────── */
/* Templates use Korean rank names; map them to the same styles. */
.pricing-scene .pricing-btn--wolgeupjaengi,
.pricing-scene a.pricing-btn--wolgeupjaengi,
.pricing-scene button.pricing-btn--wolgeupjaengi {
  background: color-mix(in srgb, var(--text) 7%, transparent) !important;
  color: var(--text2) !important;
  border: 1px solid rgba(201, 166, 107, 0.35) !important;
  box-shadow: none !important;
}
.pricing-scene .pricing-btn--wolgeupjaengi:hover {
  background: rgba(201, 166, 107, 0.18) !important;
  border-color: rgba(201, 166, 107, 0.55) !important;
  color: var(--text) !important;
  box-shadow: 0 8px 20px rgba(201, 166, 107, 0.18) !important;
}

.pricing-scene .pricing-btn--chajangnim,
.pricing-scene a.pricing-btn--chajangnim,
.pricing-scene button.pricing-btn--chajangnim {
  background: linear-gradient(135deg, #1e4a7a, #4a90d9) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 8px 22px rgba(74, 144, 217, 0.32) !important;
}
.pricing-scene .pricing-btn--chajangnim:hover {
  filter: brightness(1.08);
  box-shadow: 0 10px 28px rgba(74, 144, 217, 0.42) !important;
  color: #fff !important;
}

.pricing-scene .pricing-btn--jayeongeopja,
.pricing-scene a.pricing-btn--jayeongeopja,
.pricing-scene button.pricing-btn--jayeongeopja {
  background: linear-gradient(135deg, rgba(212, 168, 32, 0.22), rgba(212, 168, 32, 0.08)) !important;
  color: var(--gold) !important;
  border: 1.5px solid rgba(212, 168, 32, 0.45) !important;
  box-shadow: 0 6px 18px rgba(212, 168, 32, 0.12) !important;
}
.pricing-scene .pricing-btn--jayeongeopja:hover {
  background: linear-gradient(135deg, rgba(212, 168, 32, 0.34), rgba(212, 168, 32, 0.14)) !important;
  border-color: rgba(212, 168, 32, 0.65) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(212, 168, 32, 0.2) !important;
}

.pricing-scene .pricing-btn--chaebol,
.pricing-scene a.pricing-btn--chaebol,
.pricing-scene button.pricing-btn--chaebol {
  background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
  color: #fff !important;
  border: 1.5px solid rgba(168, 85, 247, 0.5) !important;
  box-shadow: 0 8px 22px rgba(168, 85, 247, 0.25) !important;
}
.pricing-scene .pricing-btn--chaebol:hover {
  filter: brightness(1.08);
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(168, 85, 247, 0.35) !important;
}

.pricing-scene .pricing-note {
  text-align: center;
  margin: 10px 0 0;
  font-size: 0.7rem;
  color: var(--text3);
  line-height: 1.4;
}

/* ── Hash highlight ──────────────────────────────────────── */
.pricing-scene .pricing-card.is-highlighted {
  animation: pricingHighlight 1.1s ease-out;
  border-color: color-mix(in srgb, var(--tier-color) 80%, #fff) !important;
}

@keyframes pricingHighlight {
  0% { box-shadow: 0 0 0 0 var(--tier-glow); }
  40% { box-shadow: 0 0 0 10px transparent, 0 0 48px var(--tier-glow); }
  100% {
    box-shadow:
      0 18px 40px rgba(0, 0, 0, 0.42),
      0 0 36px var(--tier-glow);
  }
}

/* ── Live session promo ──────────────────────────────────── */
.pricing-scene .session-promo--pricing {
  margin-top: 40px;
}

.pricing-scene .session-promo-card {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 20px;
  border: 1px solid rgba(168, 85, 247, 0.32);
  background:
    radial-gradient(ellipse 70% 60% at 0% 0%, rgba(168, 85, 247, 0.14), transparent 55%),
    linear-gradient(168deg, var(--bg2), var(--bg));
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.36), 0 0 32px rgba(168, 85, 247, 0.1);
  overflow: hidden;
}

.pricing-scene .session-promo-card-inner {
  position: relative;
  z-index: 1;
  padding: 24px;
}

.pricing-scene .session-promo-main {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr;
  gap: 28px;
  align-items: center;
}

.pricing-scene .session-promo-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 14px;
}

.pricing-scene .session-promo-kanji {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  background: linear-gradient(145deg, #5b21b6, #a855f7);
  box-shadow: 0 6px 16px rgba(168, 85, 247, 0.3);
}

.pricing-scene .session-promo-title {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}

.pricing-scene .session-promo-sub {
  margin: 4px 0 0;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text3);
}

.pricing-scene .session-promo-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 16px;
}

.pricing-scene .session-promo-features li {
  position: relative;
  padding: 6px 0 6px 18px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text2);
  border-bottom: none;
}

.pricing-scene .session-promo-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #c49bff;
  font-weight: 800;
  font-size: 0.72rem;
}

.pricing-scene .session-promo-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  background: var(--bg3);
  border: 1px solid rgba(168, 85, 247, 0.18);
}

.pricing-scene .session-promo-avatars {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.pricing-scene .session-promo-avatars .flk-avatar-slot--pricing {
  border-color: rgba(168, 85, 247, 0.4);
  box-shadow: 0 6px 16px rgba(168, 85, 247, 0.2);
}

.pricing-scene .session-promo-price-block {
  text-align: center;
  padding: 0;
  background: none;
  border: none;
}

.pricing-scene .session-promo-price-display {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  line-height: 1;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 900;
  color: #c49bff;
  -webkit-text-fill-color: #c49bff !important;
  background: none !important;
  text-shadow: 0 0 24px rgba(168, 85, 247, 0.3);
}

.pricing-scene .session-promo-currency,
.pricing-scene .session-promo-cents {
  font-size: 1.15rem;
  margin-top: 0.38em;
  opacity: 0.9;
}

.pricing-scene .session-promo-amount {
  font-size: clamp(2rem, 4vw, 2.5rem);
  letter-spacing: -0.03em;
}

.pricing-scene .session-promo-price-note {
  margin: 6px 0 0;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text3);
}

.pricing-scene .session-promo-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.pricing-scene .session-promo-cta {
  width: 100%;
  max-width: none;
}

.pricing-scene .session-promo-secondary {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text3);
  text-decoration: none;
  transition: color 0.2s ease;
}

.pricing-scene .session-promo-secondary:hover {
  color: var(--purple);
}

/* ── FAQ ─────────────────────────────────────────────────── */
.pricing-scene .faq-section {
  max-width: 640px;
  margin: 48px auto 0;
  padding-top: 8px;
}

.pricing-scene .faq-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text);
  text-align: center;
  margin: 0 0 18px;
}

.pricing-scene .faq-item {
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg2) 72%, transparent);
  margin-bottom: 8px;
  overflow: hidden;
}

.pricing-scene .faq-q {
  cursor: pointer;
  list-style: none;
  padding: 14px 16px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
}

.pricing-scene .faq-q::-webkit-details-marker {
  display: none;
}

.pricing-scene .faq-q::after {
  content: '+';
  float: right;
  color: var(--text3);
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1;
}

.pricing-scene .faq-item[open] .faq-q::after {
  content: '−';
}

.pricing-scene .faq-a {
  margin: 0;
  padding: 0 16px 14px;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--text3);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 960px) {
  .pricing-scene .pricing-grid--ranks {
    grid-template-columns: 1fr;
    max-width: 400px;
  }

  .pricing-scene .pricing-card--featured {
    order: -1;
  }

  .pricing-scene .session-promo-main {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .pricing-scene .session-promo-features {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .pricing-scene .page-body {
    padding: 4px 14px 0;
  }

  .pricing-scene .pricing-card-inner {
    padding: 18px 16px 20px;
  }

  .pricing-scene .flk-avatar-slot--pricing {
    --flk-avatar-w: 76px;
    --flk-avatar-h: 94px;
    width: 76px;
    height: 94px;
    flex-basis: 76px;
  }

  .pricing-scene .session-promo-card-inner {
    padding: 18px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-scene .pricing-card,
  .pricing-scene .pricing-btn,
  .pricing-scene .flk-avatar-slot--pricing {
    transition: none;
  }

  .pricing-scene .pricing-card:hover,
  .pricing-scene .pricing-card:hover .flk-avatar-slot--pricing {
    transform: none !important;
  }

  .pricing-scene .pricing-card.is-highlighted {
    animation: none;
  }
}

/* ── Light-theme tier accents ─────────────────────────────────
   The tier colours above were picked to glow on the old dark page; on the
   cream background they wash out. Restate them a few stops darker so the
   price and CTA keep their rank identity while staying legible. */
html:not(.flk-dark) .pricing-scene .pricing-card { --tier-color: #8a6635; }