/* Figma eRtvwdrIaaublxQxCg87xO / 3:8365, 2026-10-21.
 * Appearance only; preserve the established green/sky brand color roles.
 * The original subscription-first position, card order,
 * responsive columns, radio controls and server-supplied prices stay intact.
 * Keep selected, disabled, error and coupon states distinct. Checkout below
 * changes surfaces and colors without changing its dimensions or scrolling.
 */
body.figma-site-style .home-plans-title {
  color: var(--figma-ink);
  border-color: var(--figma-line);
  font-weight: 750;
  letter-spacing: -.03em;
}

body.figma-site-style #pricing-cards > article {
  padding: 30px;
  border-color: var(--figma-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}
body.figma-site-style #pricing-cards > article[data-tier-slug="standard"] {
  padding: 30px;
  border-width: 1px;
  border-color: var(--figma-accent);
  box-shadow: none;
}
/* A quiet 1px recommendation frame follows the reference's basic card shape.
 * Padding compensates for the former 2px frame, keeping all three baselines.
 * The green recommendation label and the actual selected radio stay distinct.
 */
body.figma-site-style #pricing-cards > article > .absolute,
body.figma-site-style #hero-plans > article > .absolute {
  border-radius: 6px;
  background: var(--figma-accent);
  color: #fff;
}
body.figma-site-style #pricing-cards h3 {
  color: var(--figma-ink);
  font-size: 28px;
  font-weight: 750;
  letter-spacing: -.035em;
}
body.figma-site-style #pricing-cards :is(.text-stone-500, .text-stone-600),
body.figma-site-style #hero-plans :is(.text-stone-500, .text-stone-600),
body.figma-site-style #layout-band :is(.text-stone-500, .text-stone-600) {
  color: var(--figma-muted);
}
body.figma-site-style #pricing-cards :is(.text-stone-800, .text-stone-900),
body.figma-site-style #pricing-common :is(.text-stone-700, .text-stone-800, .text-stone-900),
body.figma-site-style #hero-plans :is(.text-stone-800, .text-stone-900),
body.figma-site-style #layout-band .text-stone-900 {
  color: var(--figma-ink);
}
body.figma-site-style #pricing-cards .plan-price > span:first-child {
  color: var(--figma-sky);
  font-size: clamp(30px, 2.8vw, 40px);
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -.035em;
}
body.figma-site-style #pricing-cards .plan-price-subtotal > span:first-child {
  font-size: 18px;
  letter-spacing: -.015em;
}
body.figma-site-style #pricing-cards .plan-charge-row {
  border-color: var(--figma-line);
}
body.figma-site-style #pricing-cards .plan-charge-total {
  color: var(--figma-sky);
}
/* Compare amounts on steady numeral widths. The source and order of all
 * server prices, terms, totals and coupon rows remain in index-app.js.
 */
body.figma-site-style #pricing-cards :is(.plan-price, .plan-charge-total, .plan-selected-mode, [role="radio"], dd) {
  font-variant-numeric: tabular-nums;
}
body.figma-site-style #pricing-cards .plan-charge-row {
  min-height: 6.5rem;
}
body.figma-site-style #pricing-cards [data-billing-group="monthly"] > .plan-payment-title {
  margin-bottom: 8px;
}
body.figma-site-style #pricing-cards .plan-description,
body.figma-site-style #pricing-cards .plan-selected-mode,
body.figma-site-style #pricing-cards .plan-payment-help,
body.figma-site-style #pricing-cards .plan-period-hint {
  color: var(--figma-muted);
}
body.figma-site-style #pricing-cards :is(.bg-orange-100, .bg-amber-100),
body.figma-site-style #hero-plans .bg-stone-100 {
  border-radius: 4px;
  background: var(--figma-pale);
  color: var(--figma-ink);
}
body.figma-site-style #pricing-cards .bg-orange-700,
body.figma-site-style #pricing-common .bg-orange-700 {
  background: var(--figma-accent);
  color: #fff;
}
body.figma-site-style #pricing-cards .bg-amber-700 {
  background: var(--figma-sky);
  color: #fff;
}
body.figma-site-style #pricing-cards .text-amber-800,
body.figma-site-style #pricing-common .text-amber-800 {
  color: var(--figma-sky);
}
body.figma-site-style #pricing-cards .text-orange-700,
body.figma-site-style #hero-plans .text-orange-700 {
  color: var(--figma-accent);
}
body.figma-site-style #pricing-cards .plan-payment-group + .plan-payment-group {
  border-color: var(--figma-line);
}
body.figma-site-style #pricing-cards .plan-payment-title {
  color: var(--figma-ink);
}
body.figma-site-style #pricing-cards .plan-payment-discount {
  color: var(--figma-accent);
}
body.figma-site-style #pricing-cards [role="radio"] {
  border-color: #83978c;
  border-radius: 6px;
  background: #fff;
  box-shadow: none;
}
body.figma-site-style #pricing-cards [role="radio"]:not(:disabled):hover {
  border-color: var(--figma-accent);
  background: var(--figma-surface);
}
body.figma-site-style #pricing-cards [role="radio"][aria-checked="true"] {
  border-color: var(--figma-accent);
  background: var(--figma-pale);
  box-shadow: inset 0 0 0 1px var(--figma-accent);
}
body.figma-site-style #pricing-cards [role="radio"][aria-checked="true"] > span {
  color: var(--figma-accent);
}
body.figma-site-style #pricing-cards [role="radio"]:disabled,
body.figma-site-style #pricing-cards [role="radio"][aria-disabled="true"] {
  border-color: var(--figma-line);
  background: #f0f0ec;
  box-shadow: none;
}
body.figma-site-style #pricing-cards [role="radio"]:disabled > span,
body.figma-site-style #pricing-cards [role="radio"][aria-disabled="true"] > span {
  color: #81847c;
}
body.figma-site-style #pricing-cards :is([data-pricing-quote], [data-pricing-start]),
body.figma-site-style #hero-plans [data-onetime] {
  min-height: 54px;
  border-radius: 6px;
  box-shadow: none;
}
body.figma-site-style #pricing-cards [data-pricing-quote] {
  border-color: #83978c;
  background: #fff;
  color: var(--figma-ink);
}
body.figma-site-style #pricing-cards [data-pricing-quote]:not(:disabled):hover {
  border-color: var(--figma-accent);
  background: var(--figma-surface);
  color: var(--figma-accent);
}
body.figma-site-style #pricing-cards [data-pricing-start]:not(:disabled),
body.figma-site-style #hero-plans [data-onetime]:not(:disabled) {
  background: var(--figma-accent);
  color: #fff;
}
body.figma-site-style #pricing-cards [data-pricing-start]:not(:disabled):hover,
body.figma-site-style #hero-plans [data-onetime]:not(:disabled):hover {
  background: var(--figma-accent-hover);
}
body.figma-site-style #pricing-cards :is(button, summary):focus-visible,
body.figma-site-style #hero-plans button:focus-visible,
body.figma-site-style #layout-band :is(a, [data-slider]):focus-visible {
  --tw-ring-color: var(--figma-accent);
  outline: 2px solid var(--figma-accent);
  outline-offset: 3px;
}
body.figma-site-style #pricing-common > div {
  padding: 30px;
  border-color: #d7e5c8;
  border-radius: 12px;
  background: var(--figma-pale);
}
body.figma-site-style #pricing-common .plan-terms-note {
  border-color: #d7e5c8;
  color: var(--figma-muted);
}
body.figma-site-style #layout-band > div {
  border-color: var(--figma-line);
}
body.figma-site-style #layout-band a,
body.figma-site-style #layout-band img {
  border-radius: 12px;
}
body.figma-site-style #layout-band img {
  border-color: var(--figma-line);
}
body.figma-site-style #onetime {
  border-color: var(--figma-line);
  background: var(--figma-surface);
}
body.figma-site-style #onetime h2 {
  color: var(--figma-ink);
  font-weight: 750;
  letter-spacing: -.035em;
}
body.figma-site-style #hero-plans > article {
  padding: 30px;
  border-color: var(--figma-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}
body.figma-site-style #hero-plans > article.border-amber-400 {
  border-color: var(--figma-accent);
}
body.figma-site-style #hero-plans .one-price {
  border-color: var(--figma-line);
}
body.figma-site-style #hero-plans .one-price > p:first-child {
  color: var(--figma-sky);
  letter-spacing: -.035em;
}

/* Retain checkout geometry, close routes, hidden steps and error/consent UI.
 * Shared checkout variables also cover amounts created after a plan is chosen.
 */
body.figma-site-style :is(#quote-modal, #subscription-modal, #subscription-complete-modal, #onetime-modal, #setupfee-modal, #compare-modal) {
  --checkout-ink: var(--figma-ink);
  --checkout-muted: var(--figma-muted);
  --checkout-line: var(--figma-line);
  --checkout-surface: var(--figma-surface);
  --checkout-leaf: var(--figma-accent);
  --checkout-sky: var(--figma-sky);
  background-color: rgb(32 34 31 / .5);
  accent-color: var(--figma-accent);
  caret-color: var(--figma-accent);
}
body.figma-site-style :is(#quote-modal, #subscription-modal, #subscription-complete-modal, #onetime-modal, #setupfee-modal) > div {
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 20px 60px rgb(32 34 31 / .14);
}
body.figma-site-style #quote-modal > div > .overflow-y-auto > div:first-child,
body.figma-site-style #sub-step-1 > div:first-child,
body.figma-site-style #sub-step-2 > div:first-child,
body.figma-site-style :is(#quote-modal, #subscription-modal, #subscription-complete-modal, #onetime-modal, #setupfee-modal, #compare-modal) :is(.bg-orange-50, .bg-amber-50) {
  background-color: var(--figma-pale);
}
body.figma-site-style :is(#quote-modal, #subscription-modal, #subscription-complete-modal, #onetime-modal, #setupfee-modal) :is(.text-orange-700, .text-orange-800) {
  color: var(--figma-accent);
}
body.figma-site-style :is(#quote-modal, #subscription-modal, #subscription-complete-modal, #onetime-modal, #setupfee-modal) :is(.text-amber-700, .text-amber-800),
body.figma-site-style #quote-charge .quote-charge-total > dd,
body.figma-site-style #selected-plan-charge .checkout-charge-total > dd,
body.figma-site-style #subscription-modal #card-step-amount,
body.figma-site-style #subscription-complete-modal #subscription-complete-total {
  color: var(--figma-sky);
}
body.figma-site-style :is(#quote-modal, #subscription-modal, #subscription-complete-modal, #onetime-modal, #setupfee-modal) :is(.border-orange-200, .border-orange-300, .border-amber-200) {
  border-color: #d7e5c8;
}
body.figma-site-style :is(#quote-modal, #subscription-modal, #onetime-modal, #setupfee-modal) :is(input:not([type="checkbox"]), select):not([aria-invalid="true"]):not(.border-rose-300) {
  border-color: #8b8f83;
  border-radius: 6px;
}
body.figma-site-style :is(#quote-modal, #subscription-modal, #onetime-modal, #setupfee-modal) input::placeholder {
  color: var(--figma-muted);
}
body.figma-site-style #sub-method-list [data-submethod][aria-pressed="true"] {
  border-color: var(--figma-accent);
  background-color: var(--figma-pale);
}
body.figma-site-style #onetime-method-list [data-paymethod][aria-pressed="true"] {
  border-color: var(--figma-accent);
  background-color: var(--figma-pale);
}
body.figma-site-style :is(#quote-start, #subscribe-button, #onetime-button, #setupfee-button):not(:disabled),
body.figma-site-style #subscription-complete-modal button:not([aria-label="닫기"]) {
  border-color: var(--figma-accent);
  border-radius: 6px;
  background: var(--figma-accent);
  color: #fff;
}
body.figma-site-style :is(#quote-start, #subscribe-button, #onetime-button, #setupfee-button):not(:disabled):hover,
body.figma-site-style #subscription-complete-modal button:not([aria-label="닫기"]):hover {
  border-color: var(--figma-accent-hover);
  background: var(--figma-accent-hover);
}
body.figma-site-style :is(#quote-modal, #subscription-modal, #subscription-complete-modal, #onetime-modal, #setupfee-modal) :is(a[href], button, input, select):focus-visible {
  --tw-ring-color: var(--figma-accent);
  outline-color: var(--figma-accent);
}

@media (max-width: 1023px) {
  body.figma-site-style #pricing-cards > article,
  body.figma-site-style #hero-plans > article {
    padding: 24px;
  }
  body.figma-site-style #pricing-cards > article[data-tier-slug="standard"] {
    padding: 24px;
  }
  body.figma-site-style #pricing-cards h3 { font-size: 25px; }
  body.figma-site-style #pricing-cards .plan-charge-row { min-height: 0; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  /* Three columns still compare in place at laptop widths. Give the option
   * labels more room without shrinking their type or 44px touch targets.
   */
  body.figma-site-style #pricing-cards > article { padding: 24px; }
  body.figma-site-style #pricing-cards > article[data-tier-slug="standard"] { padding: 24px; }
}
@media (max-width: 639px) {
  body.figma-site-style #pricing-cards > article,
  body.figma-site-style #hero-plans > article,
  body.figma-site-style #pricing-common > div {
    padding: 22px;
  }
  body.figma-site-style #pricing-cards > article[data-tier-slug="standard"] {
    padding: 22px;
  }
  body.figma-site-style #pricing-cards h3 { font-size: 26px; }
}