/* Pricing plans — KO /pricing/ reference contract (DESIGN.md §5 "Pricing Plans").
   Loaded only by pricing/index.html, after site.css. The :root block below is
   the complete --wt-plan-* inventory; component selectors only consume it. */

:root {
  --wt-plan-page-bg: var(--wt-bg-deep);
  --wt-plan-transition: 150ms ease-out;

  --wt-plan-hero-pad-top: clamp(3rem, 6vw, 5rem);
  --wt-plan-hero-pad-bottom: clamp(3rem, 5vw, 4.5rem);
  --wt-plan-hero-title-size: clamp(2.5rem, 6vw, 4.25rem);
  --wt-plan-hero-title-weight: 600;
  --wt-plan-hero-title-tracking: -0.03em;
  --wt-plan-hero-title-line-height: 1.06;
  --wt-plan-hero-line2-color: rgba(255, 255, 255, 0.38);
  --wt-plan-hero-lead-size: clamp(1rem, 1.6vw, 1.125rem);
  --wt-plan-hero-lead-line-height: 1.56;
  --wt-plan-hero-lead-color: rgba(255, 255, 255, 0.63);
  --wt-plan-hero-lead-width: 34rem;
  --wt-plan-hero-lead-margin: 1.5rem;

  --wt-plan-toggle-margin: 2.5rem;
  --wt-plan-toggle-gap: 0.75rem;
  --wt-plan-toggle-label-gap: 0.5rem;
  --wt-plan-toggle-label-size: 0.9375rem;
  --wt-plan-toggle-label-weight: 500;
  --wt-plan-toggle-label-color: var(--wt-plan-muted);
  --wt-plan-toggle-label-active-color: var(--wt-text);
  --wt-plan-toggle-label-active-weight: 600;
  --wt-plan-toggle-focus-ring: 2px solid var(--wt-text);
  --wt-plan-toggle-focus-offset: 3px;
  --wt-plan-toggle-track-width: 2.75rem;
  --wt-plan-toggle-track-height: 1.5rem;
  --wt-plan-toggle-track-pad: 3px;
  --wt-plan-toggle-track-bg: rgba(255, 255, 255, 0.14);
  --wt-plan-toggle-track-hover-bg: rgba(255, 255, 255, 0.22);
  --wt-plan-toggle-knob-size: calc(var(--wt-plan-toggle-track-height) - 2 * var(--wt-plan-toggle-track-pad));
  --wt-plan-toggle-knob-travel: calc(var(--wt-plan-toggle-track-width) - var(--wt-plan-toggle-track-height));
  --wt-plan-toggle-knob-bg: var(--wt-cta-primary-bg);
  --wt-plan-toggle-badge-size: 0.6875rem;
  --wt-plan-toggle-badge-weight: 600;
  --wt-plan-toggle-badge-tracking: 0.04em;
  --wt-plan-toggle-badge-padding: 0.3rem 0.55rem;
  --wt-plan-toggle-badge-bg: var(--wt-surface-strong);
  --wt-plan-toggle-badge-border: var(--wt-border-strong);
  --wt-plan-toggle-badge-color: rgba(255, 255, 255, 0.82);
  --wt-plan-toggle-badge-active-bg: var(--wt-cta-primary-bg);
  --wt-plan-toggle-badge-active-border: var(--wt-cta-primary-bg);
  --wt-plan-toggle-badge-active-color: var(--wt-cta-primary-text);

  --wt-plan-grid-gap: 1rem;
  --wt-plan-grid-narrow-max: 30rem;
  --wt-plan-card-radius: 12px;
  --wt-plan-card-border: var(--wt-border);
  --wt-plan-card-bg: rgba(255, 255, 255, 0.028);
  --wt-plan-card-pad: 2rem;
  --wt-plan-card-pad-narrow: 1.5rem;
  --wt-plan-featured-border: rgba(255, 255, 255, 0.28);
  --wt-plan-featured-bg: transparent;
  --wt-plan-featured-edge: rgba(255, 255, 255, 0.92);

  --wt-plan-muted: rgba(255, 255, 255, 0.52);

  --wt-plan-name-size: 1.125rem;
  --wt-plan-name-weight: 600;
  --wt-plan-name-line-height: 1.55;
  --wt-plan-head-gap: 1rem;
  --wt-plan-flag-size: 0.6875rem;
  --wt-plan-flag-weight: 600;
  --wt-plan-flag-tracking: 0.06em;
  --wt-plan-flag-padding: 0.35rem 0.6rem;

  --wt-plan-desc-margin: 0.5rem;
  --wt-plan-desc-size: 0.875rem;
  --wt-plan-desc-line-height: 1.43;
  --wt-plan-desc-color: rgba(255, 255, 255, 0.63);

  --wt-plan-price-margin: 1.5rem;
  --wt-plan-price-size: clamp(2rem, 2.8vw, 2.5rem);
  --wt-plan-price-weight: 600;
  --wt-plan-price-tracking: -0.02em;
  --wt-plan-price-line-height: 1;
  --wt-plan-price-unit-size: 0.875rem;
  --wt-plan-price-unit-gap: 0.35rem;
  --wt-plan-price-note-margin: 0.25rem;

  --wt-plan-cta-margin: 2rem;
  --wt-plan-cta-height: 2.5rem;
  --wt-plan-cta-radius: 6px;
  --wt-plan-cta-size: 0.875rem;
  --wt-plan-cta-weight: 600;
  --wt-plan-cta-gap: 0.5rem;
  --wt-plan-cta-icon: 1rem;
  --wt-plan-cta-icon-shift: 4px;
  --wt-plan-cta-ghost-border: var(--wt-border-strong);
  --wt-plan-cta-ghost-hover-border: rgba(255, 255, 255, 0.28);
  --wt-plan-cta-ghost-hover-bg: var(--wt-surface);
  --wt-plan-cta-primary-bg: var(--wt-cta-primary-bg);
  --wt-plan-cta-primary-text: var(--wt-cta-primary-text);
  --wt-plan-cta-primary-hover-bg: rgba(255, 255, 255, 0.9);
  --wt-plan-cta-primary-focus: var(--wt-orange);

  --wt-plan-rule-margin: 2rem;
  --wt-plan-rule-color: var(--wt-border);
  --wt-plan-features-margin: 1.5rem;
  --wt-plan-features-gap: 1rem;
  --wt-plan-feature-size: 0.875rem;
  --wt-plan-feature-line-height: 1.43;
  --wt-plan-feature-color: rgba(255, 255, 255, 0.82);
  --wt-plan-feature-icon: 0.875rem;
  --wt-plan-feature-icon-gap: 0.75rem;

  --wt-plan-footnote-margin: 3rem;
  --wt-plan-footnote-width: 44rem;
  --wt-plan-footnote-size: 0.875rem;
  --wt-plan-footnote-line-height: 1.6;
  --wt-plan-footnote-gap: 0.6rem;
  --wt-plan-footnote-dot: 0.5rem;
  --wt-plan-footnote-dot-color: rgba(255, 255, 255, 0.25);

  --wt-plan-section-pad: clamp(3.5rem, 6vw, 5rem);
  --wt-plan-section-head-margin: 2rem;
  --wt-plan-section-title-size: clamp(1.5rem, 2.4vw, 2rem);
  --wt-plan-section-title-weight: 600;
  --wt-plan-section-title-tracking: -0.02em;
  --wt-plan-section-title-line-height: 1.2;
  --wt-plan-faq-title-size: 1.0625rem;
  --wt-plan-faq-title-weight: 600;
  --wt-plan-faq-title-tracking: -0.01em;
}

/* Page surface: the reference is flat black, so the plans page paints over the
   global grid and glows. Header, topline, footer and noise stay global. */
.pricing-page {
  background: var(--wt-plan-page-bg);
}

/* ---- Hero ---------------------------------------------------------------- */

.plans-hero {
  padding: calc(var(--wt-banner-offset, 40px) + var(--wt-header-height, 68px) + var(--wt-plan-hero-pad-top)) 0 var(--wt-plan-hero-pad-bottom);
  text-align: center;
}

.plans-title {
  margin: 0;
  color: var(--wt-text);
  font-family: var(--wt-font-sans);
  font-size: var(--wt-plan-hero-title-size);
  font-weight: var(--wt-plan-hero-title-weight);
  letter-spacing: var(--wt-plan-hero-title-tracking);
  line-height: var(--wt-plan-hero-title-line-height);
  text-wrap: balance;
  word-break: keep-all;
}

.plans-title span {
  display: block;
}

.plans-title-muted {
  color: var(--wt-plan-hero-line2-color);
}

.plans-lead {
  max-width: var(--wt-plan-hero-lead-width);
  margin: var(--wt-plan-hero-lead-margin) auto 0;
  color: var(--wt-plan-hero-lead-color);
  font-size: var(--wt-plan-hero-lead-size);
  line-height: var(--wt-plan-hero-lead-line-height);
  text-wrap: balance;
  word-break: keep-all;
}

/* ---- Billing period toggle ---------------------------------------------- */

/* Native radios (name=billing) own the state; pricing.js mirrors the checked
   value onto [data-billing] for the track, the price views and the Pro links.
   Without JS the prices and links could not follow, so the toggle only renders
   once site.js has marked the document. */
.billing-toggle {
  min-width: 0;
  margin: var(--wt-plan-toggle-margin) 0 0;
  padding: 0;
  border: 0;
}

html:not([data-js="true"]) .billing-toggle {
  display: none;
}

/* Flex lives on an inner row, not on the fieldset itself: fieldset flex layout
   is still inconsistent across engines. */
.billing-toggle-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wt-plan-toggle-gap);
}

.billing-option {
  display: inline-flex;
  align-items: center;
  gap: var(--wt-plan-toggle-label-gap);
  color: var(--wt-plan-toggle-label-color);
  font-family: var(--wt-font-sans);
  font-size: var(--wt-plan-toggle-label-size);
  font-weight: var(--wt-plan-toggle-label-weight);
  line-height: 1;
  cursor: pointer;
  user-select: none;
}

.billing-option-text {
  border-radius: 2px;
  transition: color var(--wt-plan-transition);
}

.billing-option input:checked ~ .billing-option-text {
  color: var(--wt-plan-toggle-label-active-color);
  font-weight: var(--wt-plan-toggle-label-active-weight);
}

/* The radio itself is visually hidden (.sr-only), so its keyboard focus ring is
   drawn on the visible label text with the global white ring geometry. */
.billing-option input:focus-visible ~ .billing-option-text {
  outline: var(--wt-plan-toggle-focus-ring);
  outline-offset: var(--wt-plan-toggle-focus-offset);
}

.billing-track {
  display: block;
  flex: 0 0 auto;
  width: var(--wt-plan-toggle-track-width);
  height: var(--wt-plan-toggle-track-height);
  padding: var(--wt-plan-toggle-track-pad);
  border-radius: var(--wt-radius-pill);
  background: var(--wt-plan-toggle-track-bg);
  cursor: pointer;
  transition: background-color var(--wt-plan-transition);
}

.billing-track:hover {
  background: var(--wt-plan-toggle-track-hover-bg);
}

.billing-knob {
  display: block;
  width: var(--wt-plan-toggle-knob-size);
  height: var(--wt-plan-toggle-knob-size);
  border-radius: var(--wt-radius-pill);
  background: var(--wt-plan-toggle-knob-bg);
  transition: transform var(--wt-plan-transition);
}

.billing-toggle[data-billing="annual"] .billing-knob {
  transform: translateX(var(--wt-plan-toggle-knob-travel));
}

.billing-save {
  display: inline-flex;
  align-items: center;
  padding: var(--wt-plan-toggle-badge-padding);
  border: 1px solid var(--wt-plan-toggle-badge-border);
  border-radius: var(--wt-radius-pill);
  background: var(--wt-plan-toggle-badge-bg);
  color: var(--wt-plan-toggle-badge-color);
  font-size: var(--wt-plan-toggle-badge-size);
  font-weight: var(--wt-plan-toggle-badge-weight);
  letter-spacing: var(--wt-plan-toggle-badge-tracking);
  line-height: 1;
  white-space: nowrap;
  transition:
    background-color var(--wt-plan-transition),
    border-color var(--wt-plan-transition),
    color var(--wt-plan-transition);
}

.billing-option input:checked ~ .billing-save {
  border-color: var(--wt-plan-toggle-badge-active-border);
  background: var(--wt-plan-toggle-badge-active-bg);
  color: var(--wt-plan-toggle-badge-active-color);
}

/* ---- Plan grid ----------------------------------------------------------- */

.plans-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--wt-plan-grid-gap);
  max-width: var(--wt-plan-grid-narrow-max);
  margin-inline: auto;
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--wt-plan-card-pad);
  border: 1px solid var(--wt-plan-card-border);
  border-radius: var(--wt-plan-card-radius);
  background: var(--wt-plan-card-bg);
}

.plan-card.is-featured {
  border-color: var(--wt-plan-featured-border);
  background: var(--wt-plan-featured-bg);
  box-shadow: inset 0 1px 0 var(--wt-plan-featured-edge);
}

.plan-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--wt-plan-head-gap);
}

.plan-name {
  margin: 0;
  color: var(--wt-text);
  font-family: var(--wt-font-sans);
  font-size: var(--wt-plan-name-size);
  font-weight: var(--wt-plan-name-weight);
  letter-spacing: 0;
  line-height: var(--wt-plan-name-line-height);
}

.plan-flag {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: var(--wt-plan-flag-padding);
  border-radius: var(--wt-radius-pill);
  background: var(--wt-cta-primary-bg);
  color: var(--wt-cta-primary-text);
  font-family: var(--wt-font-sans);
  font-size: var(--wt-plan-flag-size);
  font-weight: var(--wt-plan-flag-weight);
  letter-spacing: var(--wt-plan-flag-tracking);
  line-height: 1;
  white-space: nowrap;
}

.plan-desc {
  min-height: calc(2 * var(--wt-plan-desc-line-height) * 1em);
  margin: var(--wt-plan-desc-margin) 0 0;
  color: var(--wt-plan-desc-color);
  font-size: var(--wt-plan-desc-size);
  line-height: var(--wt-plan-desc-line-height);
  word-break: keep-all;
}

.plan-amount {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--wt-plan-price-unit-gap);
  margin: var(--wt-plan-price-margin) 0 0;
}

.plan-amount strong {
  color: var(--wt-text);
  font-family: var(--wt-font-sans);
  font-size: var(--wt-plan-price-size);
  font-weight: var(--wt-plan-price-weight);
  letter-spacing: var(--wt-plan-price-tracking);
  line-height: var(--wt-plan-price-line-height);
}

.plan-amount span {
  color: var(--wt-plan-muted);
  font-size: var(--wt-plan-price-unit-size);
}

/* Billing note under the Pro price: one full line so the annual total (billed
   at once) never reads as a second monthly unit. Present in both periods so
   the shared subgrid price row keeps its height when the toggle flips. */
.plan-amount-note {
  flex-basis: 100%;
  margin-top: var(--wt-plan-price-note-margin);
}

/* ---- CTA ----------------------------------------------------------------- */

.plan-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wt-plan-cta-gap);
  width: 100%;
  min-height: var(--wt-plan-cta-height);
  margin-top: var(--wt-plan-cta-margin);
  padding: 0 1rem;
  border: 1px solid transparent;
  border-radius: var(--wt-plan-cta-radius);
  color: var(--wt-text);
  font-family: var(--wt-font-sans);
  font-size: var(--wt-plan-cta-size);
  font-weight: var(--wt-plan-cta-weight);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--wt-plan-transition),
    border-color var(--wt-plan-transition),
    color var(--wt-plan-transition),
    transform var(--wt-plan-transition);
}

.plan-cta:active {
  transform: scale(0.98);
}

.plan-cta.ghost {
  border-color: var(--wt-plan-cta-ghost-border);
  background: transparent;
}

.plan-cta.ghost:hover {
  border-color: var(--wt-plan-cta-ghost-hover-border);
  background: var(--wt-plan-cta-ghost-hover-bg);
}

.plan-cta.primary {
  border-color: var(--wt-plan-cta-primary-bg);
  background: var(--wt-plan-cta-primary-bg);
  color: var(--wt-plan-cta-primary-text);
}

.plan-cta.primary:hover {
  border-color: var(--wt-plan-cta-primary-hover-bg);
  background: var(--wt-plan-cta-primary-hover-bg);
}

/* White button on a dark card: the global white ring would vanish. Same
   convention as .btn.primary:focus-visible in site.css. */
.plan-cta.primary:focus-visible {
  outline-color: var(--wt-plan-cta-primary-focus);
  outline-offset: 2px;
}

.plan-cta-arrow {
  width: var(--wt-plan-cta-icon);
  height: var(--wt-plan-cta-icon);
  flex: 0 0 auto;
  transition: transform var(--wt-plan-transition);
}

.plan-cta:hover .plan-cta-arrow {
  transform: translateX(var(--wt-plan-cta-icon-shift));
}

/* ---- Feature list -------------------------------------------------------- */

.plan-features {
  display: grid;
  gap: var(--wt-plan-features-gap);
  margin: var(--wt-plan-rule-margin) 0 0;
  padding: var(--wt-plan-features-margin) 0 0;
  border-top: 1px solid var(--wt-plan-rule-color);
  list-style: none;
  align-content: start;
}

.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--wt-plan-feature-icon-gap);
  color: var(--wt-plan-feature-color);
  font-size: var(--wt-plan-feature-size);
  line-height: var(--wt-plan-feature-line-height);
  word-break: keep-all;
}

.plan-features li::before {
  content: "";
  flex: 0 0 auto;
  width: var(--wt-plan-feature-icon);
  height: var(--wt-plan-feature-icon);
  margin-top: calc((var(--wt-plan-feature-line-height) * 1em - var(--wt-plan-feature-icon)) / 2);
  background-color: var(--wt-plan-muted);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.plan-features li.is-excluded {
  color: var(--wt-plan-muted);
}

.plan-features li.is-excluded::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3C%2Fsvg%3E");
}

/* ---- Footnote ------------------------------------------------------------ */

.plans-footnote {
  display: flex;
  align-items: flex-start;
  gap: var(--wt-plan-footnote-gap);
  width: fit-content;
  max-width: var(--wt-plan-footnote-width);
  margin: var(--wt-plan-footnote-margin) auto 0;
  color: var(--wt-plan-muted);
  font-size: var(--wt-plan-footnote-size);
  line-height: var(--wt-plan-footnote-line-height);
  text-align: left;
  word-break: keep-all;
}

.plans-footnote::before {
  content: "";
  flex: 0 0 auto;
  width: var(--wt-plan-footnote-dot);
  height: var(--wt-plan-footnote-dot);
  margin-top: calc((var(--wt-plan-footnote-line-height) * 1em - var(--wt-plan-footnote-dot)) / 2);
  border-radius: var(--wt-radius-pill);
  background: var(--wt-plan-footnote-dot-color);
}

/* ---- Lower sections: comparison table + FAQ, visually simplified --------- */

.pricing-page .section {
  padding-block: var(--wt-plan-section-pad);
}

.pricing-page .section-head {
  margin-bottom: var(--wt-plan-section-head-margin);
}

.pricing-page .section-head h2 {
  font-size: var(--wt-plan-section-title-size);
  font-weight: var(--wt-plan-section-title-weight);
  letter-spacing: var(--wt-plan-section-title-tracking);
  line-height: var(--wt-plan-section-title-line-height);
}

.pricing-page .pricing-table-wrap {
  border-color: var(--wt-plan-card-border);
  border-radius: var(--wt-plan-card-radius);
  background: var(--wt-plan-card-bg);
}

.pricing-page .pricing-faq-list {
  overflow: hidden;
  border-color: var(--wt-plan-card-border);
  border-radius: var(--wt-plan-card-radius);
  background: var(--wt-plan-card-border);
}

.pricing-page .pricing-faq-list article {
  background: var(--wt-plan-card-bg);
}

.pricing-page .pricing-faq-list h3 {
  font-size: var(--wt-plan-faq-title-size);
  font-weight: var(--wt-plan-faq-title-weight);
  letter-spacing: var(--wt-plan-faq-title-tracking);
}

/* ---- Responsive geometry ------------------------------------------------- */

@media (min-width: 1024px) {
  .plans-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 0;
    max-width: none;
  }

  /* Subgrid rows (head / desc / price / CTA / features) put prices, CTAs and
     rules on shared lines even when Korean copy wraps differently per card. */
  .plan-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 5;
  }
}

@media (max-width: 640px) {
  .plan-card {
    padding: var(--wt-plan-card-pad-narrow);
  }
}