/* ============================================================
   DeepSales Pricing — Figma-aligned styles (1:1 with Figma file
   76gjPjrYG9JAdKoQlSRA81). Mobile-first. Tokens declared on
   `.pricing-page` scope so /styles.css and other pages stay
   untouched. Header/footer/modal are NOT styled here.
   Spec: docs/superpowers/specs/2026-05-20-pricing-page-figma-redesign-design.md
   ============================================================ */

   .pricing-page {
    font-family: "Pretendard", system-ui, -apple-system, BlinkMacSystemFont,
      "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--ds-text);
    line-height: 1.5;
  
    /* Color tokens — from Figma get_variable_defs */
    --ds-text: #000000;
    --ds-text-2: #333333;
    --ds-text-3: #666666;
    --ds-text-4: #999999;
    --ds-text-inv: #ffffff;
    --ds-surface: #ffffff;
    --ds-surface-elev-1: #f5f5f5;
    --ds-surface-elev-2: #e8e8e8;
    --ds-border-light: #f0f0f0;
    --ds-border-default: #e0e0e0;
    --ds-border-strong: #bbbbbb;
    --ds-border-very-strong: #000000;
    --ds-accent-lime: #d1ff99;
  
    --muted: #f9fafb;
    --card: #ffffff;
    --border: #e5e7eb;
    --border-2: #d1d5db;
    --hover: #f3f4f6;
    --emerald: #10b981;
    --accent: #000000;
    
    /* Spacing scale */
    --ds-sp-1: 4px;
    --ds-sp-2: 8px;
    --ds-sp-3: 12px;
    --ds-sp-4: 16px;
    --ds-sp-5: 20px;
    --ds-sp-6: 24px;
    --ds-sp-8: 32px;
    --ds-sp-10: 40px;
    --ds-sp-15: 60px;
    --ds-sp-20: 80px;
    --ds-sp-32: 128px;
  
    /* Radius */
    --ds-radius-xs: 4px;
    --ds-radius-md: 8px;
    --ds-radius-xl: 16px;
    --ds-radius-2xl: 24px;
    --ds-radius-full: 9999px;
  
    /* Container width */
    --ds-content-w: 100%;       /* phone default */
  
    /* Section vertical rhythm */
    --ds-section-gap: 60px;      /* phone default */
  }
  
  .pricing-page * { box-sizing: border-box; }
  .pricing-page ul,
  .pricing-page ol { list-style: none; padding: 0; margin: 0; }
  .pricing-page li { margin: 0; padding: 0; }
  .pricing-page img { display: block; max-width: 100%; }
  
  /* Billing-cycle visibility (pricing.js toggles body.is-annual) */
  body:not(.is-annual) .pricing-page .only-annual { display: none; }
  body.is-annual .pricing-page .only-monthly { display: none; }
  body:not(.is-annual) .pricing-page .billing-badge { visibility: hidden; }
  
  /* ============================================================
     HERO
     ============================================================ */
  .pricing-page .hero {
    padding: 40px 16px;
  }
  .pricing-page .hero-inner {
    max-width: var(--ds-content-w);
    margin: 0 auto;
  }
  .pricing-page .hero-head {
    text-align: center;
    margin: 0 0 60px;
  }
  .pricing-page .hero-title {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: var(--ds-text);
    margin: 0 0 20px;
  }
  .pricing-page .hero-subtitle {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--ds-text-2);
    margin: 0 auto;
  }
  
  /* ============================================================
     BILLING TOGGLE — two separate pill buttons (per Figma 2:1576)
     ============================================================ */
  .pricing-page .billing-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0 0 60px;
  }
  .pricing-page .billing-badge-slot,
  .pricing-page .billing-badge { display: none; }     /* legacy slot hidden — copy lives in pill */
  .pricing-page .billing-toggle {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: transparent;
    border-radius: 0;
    padding: 0;
  }
  .pricing-page .billing-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 140px;
    min-width: 60px;
    padding: 8px 20px;
    background: var(--ds-surface);
    border: 1px solid var(--ds-text);
    padding: 8px 20px;
    height: 40px;
    min-width: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--ds-text);
    border-radius: var(--ds-radius-full);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    white-space: nowrap;
  }
  .pricing-page .billing-label[aria-pressed="true"] {
    background: var(--ds-text);
    color: var(--ds-text-inv);
    border-color: var(--ds-text);
  }
  .pricing-page .billing-label:hover { opacity: 0.92; }
  .pricing-page .toggle-switch { display: none !important; }
  
  /* ============================================================
     PLAN CARD GRID
     ============================================================ */
  .pricing-page .cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 0 0 40px;
  }
  
  .pricing-page .plan-card {
    position: relative;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border-default);
    border-radius: var(--ds-radius-2xl);
    display: flex;
    flex-direction: column;
  }
  .pricing-page .plan-card.popular {
    border: 2px solid var(--ds-text);
  }
  
  .pricing-page .popular-badge {
    position: absolute;
    top: 24px;
    right: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    padding: 8px 16px;
    background: var(--ds-text);
    color: var(--ds-text-inv);
    font-family: "Pretendard", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.15;
    border-radius: var(--ds-radius-full);
    white-space: nowrap;
    z-index: 1;
  }
  .pricing-page .popular-badge svg { width: 12px; height: 12px; }
  
  .pricing-page .plan-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 32px 20px;
  }
  
  /* Per Figma 26:1372 / 30:3833:
     header → price → CTA → (includes-banner) → specs → features
     The DOM order is header → price → specs → CTA → (includes-banner) → features. */
  .pricing-page .plan-card-body > .plan-header { order: 0; }
  .pricing-page .plan-card-body > .plan-price-block { order: 1; }
  .pricing-page .plan-card-body > .cta-btn { order: 2; }
  .pricing-page .plan-card-body > .includes-banner { order: 3; }
  .pricing-page .plan-card-body > .specs { order: 4; }
  .pricing-page .plan-card-body > .features-block { order: 5; }
  
  /* "+ X 전체 기능 포함" banner row — plain text + plus icon, NO background.
     Sits directly below CTA with the SINGLE check-list divider above. */
  .pricing-page .includes-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--ds-border-light);
    padding-top: 24px;
    margin: 0 0 12px;
  }
  .pricing-page .includes-banner .feature-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--ds-text);
    line-height: 1.4;
  }
  
  .pricing-page .plan-header { margin: 0 0 24px; }
  /* Heading/28-Semibold — identical across mobile/tablet/desktop per spec */
  .pricing-page .plan-name {
    font-family: "Pretendard", inherit;
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.15;       /* 32.2px */
    letter-spacing: -0.42px;
    color: var(--ds-text);   /* Text/Primary #000 */
    margin: 0 0 8px;
  }
  /* Body/14-Regular — identical across mobile/tablet/desktop per spec */
  .pricing-page .plan-tag {
    display: block;
    font-family: "Pretendard", inherit;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;        /* 21px */
    color: var(--ds-text-2); /* Text/Secondary #333 */
    margin: 0;
  }
  /* Figma cards show only the tag — hide the secondary plan-desc line for visual parity */
  .pricing-page .plan-desc { display: none; }
  
  /* Divider line below header */
  .pricing-page .plan-header {
    border-bottom: 1px solid var(--ds-border-light);
    padding-bottom: 24px;
    margin-bottom: 24px;
  }
  /* Reserve enough height for the tallest price-block variant
     (strike row + amount + promo note) so the CTA button below sits at the
     SAME y-position across Starter / Growth / Enterprise cards (per Figma 37:1067). */
  .pricing-page .plan-price-block {
    margin: 0 0 24px;
    padding: 0;
    border: 0;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  /* Enterprise card — center "맞춤 견적" vertically within the reserved height
     so it sits between the header divider and the CTA button. */
  .pricing-page .plan-price-block:has(.price-custom) {
    justify-content: center;
  }
  /* EN pricing page (pricing.html) — let price block size to content,
     no reserved height across breakpoints. */
  html[lang="en"] .pricing-page .plan-price-block {
    min-height: 0;
    height: auto;
  }
  
  /* Price block — KR has strike row + promo row + note; EN has just amount + vat */
  .pricing-page .price-strike-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
  }
  .pricing-page .price-promo-row,
  .pricing-page .price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
  }
  /* Heading/40-Semibold — identical across mobile/tablet/desktop per spec */
  .pricing-page .price-amount-promo,
  .pricing-page .price-amount,
  .pricing-page .price-custom {
    font-family: "Pretendard", inherit;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.15;        /* 46px */
    letter-spacing: -0.6px;
    color: var(--ds-text);    /* Text/Primary #000 */
  }
  .pricing-page .price-suffix {
    font-size: 18px;
    font-weight: 400;
    color: var(--ds-text-3);
  }
  .pricing-page .price-vat-inline {
    font-size: 14px;
    font-weight: 400;
    color: var(--ds-text-3);
    margin-left: 2px;
  }
  .pricing-page .price-discount-tag {
    display: inline-flex;
    align-items: center;
    background: var(--ds-accent-lime);
    color: var(--ds-text);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: var(--ds-radius-xs);
    letter-spacing: 0;
  }
  .pricing-page .price-strike {
    font-size: 16px;
    font-weight: 400;
    text-decoration: line-through;
    color: var(--ds-text-4);
  }
  .pricing-page .price-vat {
    font-size: 14px;
    font-weight: 400;
    color: var(--ds-text-3);
    margin: 8px 0 0;
  }
  .pricing-page .price-promo-note {
    font-size: 14px;
    font-weight: 400;
    color: var(--ds-text);
    margin: 8px 0 0;
  }
  
  /* Specs list — sits in the middle of the unified check list, between
     includes-banner (if any) and features-block. */
  .pricing-page .specs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding-top: 0;
    border-top: 0;
  }
  /* Starter (no .includes-banner) — divider sits on .specs as the single
     divider between CTA and the check list. */
  .pricing-page .plan-card-body:not(:has(.includes-banner)) > .specs {
    border-top: 1px solid var(--ds-border-light);
    padding-top: 24px;
  }
  .pricing-page .spec {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
    color: var(--ds-text-2);
  }
  /* Hide legacy emoji icon, replace with consistent check mark */
  .pricing-page .spec-icon { display: none; }
  .pricing-page .spec::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
    background: no-repeat center/20px 20px
      url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M14.9667 6.23321C15.2062 5.98477 15.602 5.97744 15.8505 6.21694C16.0989 6.4565 16.1062 6.85225 15.8667 7.10073L8.63448 14.6007C8.39764 14.8463 8.00746 14.8563 7.75802 14.6235L3.74028 10.8735C3.4881 10.638 3.4747 10.2428 3.71017 9.99054C3.94571 9.73836 4.34086 9.72496 4.59314 9.96043L8.16085 13.2905L14.9667 6.23321Z' fill='black'/%3E%3C/svg%3E");
  }
  .pricing-page .spec-text { color: var(--ds-text-2); flex: 1; }
  /* Per Figma 30:3833 — all check rows share the same weight; no bold highlights */
  .pricing-page .spec-text.h-blue,
  .pricing-page .spec-text.h-green {
    font-weight: 400;
    color: var(--ds-text-2);
  }
  
  /* CTA inside card */
  .pricing-page .cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    margin: 0 0 24px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    text-align: center;
    border: 0;
    border-radius: var(--ds-radius-md);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, opacity 0.2s;
  }
  .pricing-page .cta-solid {
    background: var(--ds-text);
    color: var(--ds-text-inv);
  }
  .pricing-page .cta-solid:hover { opacity: 0.9; }
  .pricing-page .cta-secondary {
    background: var(--ds-text);
    color: var(--ds-text-inv);
  }
  .pricing-page .cta-secondary:hover { opacity: 0.9; }
  
  /* Features list — sits at the bottom of the unified check list (no border) */
  .pricing-page .features-block {
    border-top: 0;
    padding-top: 12px;     /* uniform 12px gap from specs */
    margin-top: 0;
    flex: 1;
  }
  .pricing-page .features {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .pricing-page .feature-row {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    text-align: left;
    grid-template-columns: none;
    font-size: 14px;
    font-weight: 400;
    color: var(--ds-text-2);
    line-height: 1.5;
  }
  /* "+ Starter 전체 기능 포함" row — plain plus icon, bold text, NO background (per Figma 26:1372) */
  .pricing-page .feature-row.is-includes {
    align-items: center;
    padding: 0;
    margin: 0 0 4px;
    background: transparent;
    border-radius: 0;
  }
  .pricing-page .feature-row.is-includes .feature-text {
    font-weight: 600;
    font-size: 15px;
    color: var(--ds-text);
  }
  .pricing-page .feature-icon-check,
  .pricing-page .feature-icon-plus {
    flex-shrink: 0;
    margin-top: 2px;
  }
  .pricing-page .feature-icon-check {
    width: 20px;
    height: 20px;
    color: var(--ds-text);
  }
  /* Plus icon — Figma 95:28662 spec. The inline SVG is a 24×24 composite
     (gray #E8E8E8 circle + 16px black "+" centered). Container and SVG
     both render at 24px so the icon matches the design size. */
  .pricing-page .feature-icon-plus {
    width: 24px;
    height: 24px;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    flex-shrink: 0;
  }
  .pricing-page .feature-icon-plus svg {
    width: 24px;
    height: 24px;
    display: block;
  }
  /* Body/14-Regular — identical across mobile/tablet/desktop per spec */
  .pricing-page .feature-text {
    font-family: "Pretendard", inherit;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;        /* 21px */
    color: var(--ds-text-2); /* Text/Secondary #333 */
  }
  
  /* ============================================================
     COMPARISON TABLE — 100% Figma spec (nodes 58:2858 / 95:23024 / 95:27999)

     Figma row structure (PC):
       flex · gap-40 · items-center · justify-center
       [KF cell w-300 py-16]  [Starter w-240 py-16]
       [Growth w-240 py-16 + rgba(0,0,0,0.05)]  [Enterprise w-240 py-16]

     Tokens:
       Surface/Elevated1 #f5f5f5  · Surface/White #ffffff
       Border/Default   #e0e0e0   · Text/Primary  #000
       Heading/16-Semibold: Pretendard 600 16px / 1.15 / -0.24px
       Body/14-Regular:     Pretendard 400 14px / 1.5
       Growth highlight: rgba(0,0,0,0.05) overlay applied to one cell only.
     ============================================================ */
  .pricing-page .compare-wrap { margin-bottom: 4rem; }
  .pricing-page .compare-toggle-row { display: flex; justify-content: center; margin-top: 1.5rem; }
  /* Compare-all-features toggle button — Figma spec (identical across viewports) */
  .pricing-page .compare-toggle-btn {
    display: flex;
    height: 48px;
    min-width: 60px;
    padding: 8px 20px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 9999px;
    border: 1px solid #000;
    background: transparent;
    color: #000;
    text-align: center;
    font-family: "Pretendard", inherit;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    transition: background 0.2s;
  }
  .pricing-page .compare-toggle-btn:hover { background: rgba(0, 0, 0, 0.04); }
  /* Chevron icon rendered via ::after so pricing.js textContent swap doesn't
     remove it. Rotates 180deg when expanded. */
  .pricing-page .compare-toggle-btn::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background: no-repeat center/16px 16px
      url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12.6464 5.4797C12.8417 5.28444 13.1582 5.28444 13.3535 5.4797C13.5487 5.67496 13.5487 5.99147 13.3535 6.18673L8.35348 11.1867C8.15822 11.382 7.84171 11.382 7.64645 11.1867L2.64645 6.18673C2.45118 5.99147 2.45118 5.67496 2.64645 5.4797C2.84171 5.28444 3.15822 5.28444 3.35348 5.4797L7.99996 10.1262L12.6464 5.4797Z' fill='%23666666'/%3E%3C/svg%3E");
    transition: transform 0.2s;
  }
  .pricing-page .compare-toggle-btn[aria-expanded="true"]::after { transform: rotate(180deg); }

  /* compare-table is the inner container; pricing.js toggles [hidden] on `.pricing-table-wrapper` */
  .pricing-page .compare-table[hidden] { display: none !important; }
  .pricing-page .compare-table { overflow: hidden; margin-top: 2rem; }

  .pricing-page .compare-inner {
    background: #ffffff;
    width: 100%;
  }

  /* --- Shared row layout: flex + gap 40px (matches Figma gap-10) --- */
  .pricing-page .compare-header,
  .pricing-page .compare-row,
  .pricing-page .compare-footer {
    display: flex;
    gap: 40px;
    align-items: stretch;
    justify-content: center;
    padding: 0;
  }

  /* --- Header row (Key Features | Starter | Growth | Enterprise) --- */
  .pricing-page .compare-header {
    background: #f5f5f5;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
  }
  .pricing-page .compare-header-feature,
  .pricing-page .compare-header-plan {
    flex: 0 0 auto;
    padding: 16px 0;
    display: flex;
    align-items: center;
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.24px;
    color: #000;
  }
  .pricing-page .compare-header-feature {
    width: 300px;
    justify-content: flex-start;
  }
  .pricing-page .compare-header-plan {
    width: 240px;
    justify-content: center;
    text-align: center;
  }
  /* Growth highlight on header cell — rgba overlay on top of #f5f5f5 */
  .pricing-page .compare-header-plan.growth-col {
    background-color: rgba(0, 0, 0, 0.05);
  }

  /* --- Data rows --- */
  .pricing-page .compare-row { background: #ffffff; border-bottom: 1px solid #e0e0e0; }

  .pricing-page .compare-feature-cell {
    flex: 0 0 auto;
    width: 300px;
    padding: 8px 0;
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.24px;
    color: #000;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .pricing-page .compare-val-cell {
    flex: 0 0 auto;
    width: 240px;
    padding: 8px 0;
    display: flex; align-items: center; justify-content: center;
    min-height: 38px;
  }
  .pricing-page .compare-val-cell.growth-col {
    background-color: rgba(0, 0, 0, 0.05);
  }

  .pricing-page .compare-val {
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.24px;
    color: #000;
    text-align: center;
  }
  .pricing-page .compare-check { width: 20px; height: 20px; display: block; }
  .pricing-page .compare-dash {
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.24px;
    color: #000;
    text-align: center;
  }

  /* --- Footer row (Get Started + CTA buttons) --- */
  .pricing-page .compare-footer {
    background: #f5f5f5;
    border-top: 1px solid #e0e0e0;
  }
  .pricing-page .compare-footer-label {
    flex: 0 0 auto;
    width: 300px;
    padding: 16px 0;
    display: flex; align-items: center; justify-content: flex-start;
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.24px;
    color: #000;
  }
  .pricing-page .compare-footer-cta {
    flex: 0 0 auto;
    width: 240px;
    padding: 16px 0;
    display: flex; align-items: center; justify-content: center;
  }
  .pricing-page .compare-footer-cta.growth-col {
    background-color: rgba(0, 0, 0, 0.05);
  }
  /* CTA button inside compare-footer-cta — Figma spec, identical across
     PC / tablet / mobile (mobile actually hides .compare-footer, so this
     primarily applies to PC + tablet). */
  .pricing-page .cta-mini {
    display: flex;
    min-width: 60px;
    padding: 8px 20px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex: 1 0 0;
    border-radius: 8px;
    background: #000;
    color: #fff;
    text-align: center;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
  }
  .pricing-page .cta-mini:hover { background: #1f2937; }
  /* Backward-compat: legacy `.solid` / `.outline` modifiers render the same
     filled black button the Figma design specifies. */
  .pricing-page .cta-mini.solid,
  .pricing-page .cta-mini.outline {
    background: #000; color: #fff; border: 0;
  }
  
  /* ============================================================
     STATS / TESTIMONIALS — hidden via comment in HTML but keep
     styles in case they return.
     ============================================================ */
  .pricing-page .section { margin-top: var(--ds-section-gap); }
  .pricing-page .section-title {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    margin: 0 0 32px;
    color: var(--ds-text);
    letter-spacing: -0.5px;
  }
  .pricing-page .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 0 0 24px;
  }
  .pricing-page .stat-card {
    border-radius: var(--ds-radius-xl);
    padding: 24px;
    text-align: center;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border-default);
  }
  .pricing-page .stat-num {
    font-size: 32px;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--ds-text);
  }
  .pricing-page .stat-label {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--ds-text-2);
  }
  .pricing-page .stat-sub { font-size: 12px; color: var(--ds-text-4); margin: 0; }
  
  .pricing-page .testi-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
  .pricing-page .testi-card {
    border-radius: var(--ds-radius-xl);
    padding: 24px;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border-default);
  }
  .pricing-page .testi-quote {
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 20px;
    color: var(--ds-text-2);
  }
  .pricing-page .testi-author { display: flex; align-items: center; gap: 12px; }
  .pricing-page .testi-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--ds-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
    background: var(--ds-surface-elev-1);
    color: var(--ds-text-2);
  }
  .pricing-page .testi-name { font-size: 14px; font-weight: 600; margin: 0; color: var(--ds-text); }
  .pricing-page .testi-co { font-size: 12px; margin: 0; color: var(--ds-text-4); }
  
  /* ============================================================
     BEGINNER / HIGHLIGHT BLOCK
     ============================================================ */
  .pricing-page .beginner {
    border-radius: var(--ds-radius-2xl);
    background: var(--ds-surface-elev-1);
    padding: 40px 16px;
    margin: 0 0 var(--ds-section-gap);
  }
  .pricing-page .beginner-head { text-align: center; margin: 0 0 32px; }
  /* Heading/24-Semibold on mobile, Heading/32-Semibold on tablet+ */
  .pricing-page .beginner-head h3 {
    font-family: "Pretendard", inherit;
    font-size: 24px;             /* mobile */
    font-style: normal;
    font-weight: 600;
    line-height: 1.15;           /* 27.6px on mobile, 36.8px on tablet+ */
    letter-spacing: -0.36px;     /* mobile */
    color: #0D0D0D;              /* color/grey/5 */
    text-align: center;
    margin: 0 0 20px;
  }
  /* Body/16-Regular on mobile, Body/20-Regular on tablet+ */
  .pricing-page .beginner-head p {
    font-family: "Pretendard", inherit;
    font-size: 16px;             /* mobile */
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;            /* 24px on mobile, 30px on tablet+ */
    color: var(--ds-text-3);     /* Text/Teriary #666 */
    text-align: center;
    margin: 0;
  }
  .pricing-page .beginner-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 0 0 32px;
  }
  .pricing-page .beginner-card {
    display: grid;
    grid-template-columns: 24px 1fr;
    grid-template-rows: auto auto;
    gap: 16px 8px;
    align-items: center;
    padding: 20px;
    border-radius: var(--ds-radius-xl);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border-default);
    text-align: left;
  }
  .pricing-page .beginner-card > div {
    display: contents;        /* h4 + p become grid children */
  }
  .pricing-page .beginner-emoji {
    display: inline-block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    font-size: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    grid-row: 1;
    grid-column: 1;
  }
  .pricing-page .beginner-card h4 {
    grid-row: 1;
    grid-column: 2;
  }
  .pricing-page .beginner-card p {
    grid-row: 2;
    grid-column: 1 / -1;
  }
  /* Card 1: 전담 온보딩 매니저 → user-check */
  .pricing-page .beginner-card:nth-child(1) .beginner-emoji {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M2.65039 21.6001V17.9995C2.65066 15.5973 4.59873 13.6499 7.00098 13.6499H16.4004C16.8146 13.6499 17.1504 13.9857 17.1504 14.3999C17.1504 14.8141 16.8146 15.1499 16.4004 15.1499H7.00098C5.42711 15.1499 4.1506 16.4257 4.15039 17.9995V21.6001C4.15028 22.0142 3.81453 22.3501 3.40039 22.3501C2.98627 22.3501 2.6505 22.0142 2.65039 21.6001ZM20.0703 16.8696C20.3632 16.5768 20.838 16.5768 21.1309 16.8696C21.4236 17.1625 21.4236 17.6373 21.1309 17.9302L16.9307 22.1304C16.6378 22.4231 16.163 22.4231 15.8701 22.1304L12.6699 18.9302C12.3772 18.6373 12.3772 18.1625 12.6699 17.8696C12.9628 17.5768 13.4376 17.5768 13.7305 17.8696L16.4004 20.5396L20.0703 16.8696ZM13.6504 5.99951C13.6502 4.42581 12.3745 3.15011 10.8008 3.1499C9.2269 3.1499 7.95041 4.42568 7.9502 5.99951C7.9502 7.57352 9.22677 8.8501 10.8008 8.8501C12.3746 8.84989 13.6504 7.57339 13.6504 5.99951ZM15.1504 5.99951C15.1504 8.40182 13.203 10.3499 10.8008 10.3501C8.39834 10.3501 6.4502 8.40195 6.4502 5.99951C6.45041 3.59725 8.39847 1.6499 10.8008 1.6499C13.2029 1.65011 15.1502 3.59738 15.1504 5.99951Z' fill='black'/%3E%3C/svg%3E");
  }
  /* Card 2: 실시간 캠페인 성과 확인 → bar-chart / clipboard-list */
  .pricing-page .beginner-card:nth-child(2) .beginner-emoji {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20.3701 15.0703C20.663 14.7774 21.1378 14.7774 21.4307 15.0703C21.7232 15.3632 21.7234 15.8381 21.4307 16.1309L16.6299 20.9307C16.4893 21.0712 16.2984 21.1504 16.0996 21.1504C15.9008 21.1503 15.7099 21.0712 15.5693 20.9307L13.3701 18.7305C13.0772 18.4376 13.0772 17.9628 13.3701 17.6699C13.663 17.3773 14.1379 17.3771 14.4307 17.6699L16.0996 19.3389L20.3701 15.0703ZM10.9004 13.6504C11.3144 13.6506 11.6504 13.9863 11.6504 14.4004C11.6504 14.8145 11.3144 15.1502 10.9004 15.1504H7.2998C6.88567 15.1503 6.54981 14.8145 6.5498 14.4004C6.5498 13.9862 6.88567 13.6505 7.2998 13.6504H10.9004ZM17.9502 11.4004V4.80078C17.9502 3.88951 17.2111 3.15039 16.2998 3.15039H5.5C4.58874 3.15039 3.84962 3.88951 3.84961 4.80078V19.2002C3.8496 20.1115 4.58873 20.8506 5.5 20.8506H10.2998C10.7139 20.8507 11.0498 21.1864 11.0498 21.6006C11.0497 22.0146 10.7138 22.3505 10.2998 22.3506H5.5C3.7603 22.3506 2.3496 20.9399 2.34961 19.2002V4.80078C2.34962 3.06109 3.76031 1.65039 5.5 1.65039H16.2998C18.0395 1.65039 19.4502 3.06108 19.4502 4.80078V11.4004C19.4502 11.8145 19.1143 12.1503 18.7002 12.1504C18.286 12.1504 17.9502 11.8146 17.9502 11.4004ZM14.5 10.0508C14.9142 10.0508 15.25 10.3866 15.25 10.8008C15.2498 11.2148 14.9141 11.5508 14.5 11.5508H7.2998C6.8858 11.5507 6.55002 11.2148 6.5498 10.8008C6.5498 10.3866 6.88567 10.0509 7.2998 10.0508H14.5ZM14.5 6.4502C14.9141 6.4502 15.2499 6.78608 15.25 7.2002C15.25 7.6144 14.9142 7.95019 14.5 7.9502H7.2998C6.88567 7.9501 6.5498 7.61435 6.5498 7.2002C6.54991 6.78613 6.88574 6.45029 7.2998 6.4502H14.5Z' fill='black'/%3E%3C/svg%3E");
  }
  /* Card 3: 완벽한 언어 장벽 해소 → badge-check */
  .pricing-page .beginner-card:nth-child(3) .beginner-emoji {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M2.25 12C2.25 6.61522 6.61522 2.25 12 2.25C13.5282 2.25 14.9763 2.60223 16.2656 3.23047C16.638 3.41192 16.7928 3.86104 16.6113 4.2334C16.4299 4.60546 15.9816 4.76022 15.6094 4.5791C14.5201 4.04831 13.2957 3.75 12 3.75C7.44365 3.75 3.75 7.44365 3.75 12C3.75 16.5563 7.44365 20.25 12 20.25C16.5563 20.25 20.25 16.5563 20.25 12C20.25 11.5858 20.5858 11.25 21 11.25C21.4142 11.25 21.75 11.5858 21.75 12C21.75 17.3848 17.3848 21.75 12 21.75C6.61522 21.75 2.25 17.3848 2.25 12ZM18.7822 5.84473C19.0751 5.55183 19.5499 5.55183 19.8428 5.84473C20.1357 6.13762 20.1357 6.61238 19.8428 6.90527L11.9678 14.7803C11.6749 15.0732 11.2001 15.0732 10.9072 14.7803L8.65723 12.5303C8.36433 12.2374 8.36433 11.7626 8.65723 11.4697C8.95012 11.1768 9.42488 11.1768 9.71777 11.4697L11.4375 13.1895L18.7822 5.84473Z' fill='black'/%3E%3C/svg%3E");
  }
  /* Card 4: 다국어 세일즈 웹사이트 제공 → globe */
  .pricing-page .beginner-card:nth-child(4) .beginner-emoji {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 2.375C16.1757 2.375 19.7289 5.03466 21.0615 8.75195C21.0666 8.76365 21.0699 8.77603 21.0742 8.78809C21.4298 9.79276 21.625 10.8735 21.625 12C21.625 13.1229 21.4306 14.2002 21.0771 15.2021C21.072 15.2172 21.0678 15.2325 21.0615 15.2471C19.7292 18.9648 16.1761 21.625 12 21.625C7.82383 21.625 4.26978 18.965 2.9375 15.2471C2.93129 15.2326 2.92799 15.2171 2.92285 15.2021C2.56939 14.2002 2.375 13.1229 2.375 12C2.375 10.8736 2.56925 9.79267 2.9248 8.78809C2.92915 8.77605 2.93245 8.76364 2.9375 8.75195C4.27002 5.0345 7.82415 2.375 12 2.375ZM4.44824 15.625C5.57778 17.9738 7.7711 19.7125 10.4033 20.2207C10.1479 19.9012 9.87036 19.5221 9.59473 19.0811C9.03261 18.1816 8.47407 17.0288 8.0957 15.625H4.44824ZM15.9043 15.625C15.5259 17.0288 14.9674 18.1816 14.4053 19.0811C14.1295 19.5223 13.8512 19.9011 13.5957 20.2207C16.2283 19.7127 18.4221 17.9741 19.5518 15.625H15.9043ZM9.39551 15.625C9.73361 16.7507 10.1947 17.682 10.6553 18.4189C11.0993 19.1293 11.542 19.6598 11.8701 20.0098C11.9152 20.0579 11.9596 20.1013 12 20.1426C12.0404 20.1013 12.0848 20.0579 12.1299 20.0098C12.458 19.6598 12.9007 19.1293 13.3447 18.4189C13.8053 17.682 14.2664 16.7507 14.6045 15.625H9.39551ZM3.96875 9.625C3.74639 10.3781 3.625 11.1748 3.625 12C3.625 12.8252 3.74639 13.6219 3.96875 14.375H7.82324C7.69891 13.6399 7.625 12.8484 7.625 12C7.625 11.1516 7.69891 10.3601 7.82324 9.625H3.96875ZM9.09277 9.625C8.95689 10.3519 8.875 11.1433 8.875 12C8.875 12.8567 8.95689 13.6481 9.09277 14.375H14.9072C15.0431 13.6481 15.125 12.8567 15.125 12C15.125 11.1433 15.0431 10.3519 14.9072 9.625H9.09277ZM16.1768 9.625C16.3011 10.3601 16.375 11.1516 16.375 12C16.375 12.8484 16.3011 13.6399 16.1768 14.375H20.0312C20.2536 13.6219 20.375 12.8252 20.375 12C20.375 11.1748 20.2536 10.3781 20.0312 9.625H16.1768ZM10.4033 3.77832C7.77102 4.28652 5.57781 6.02611 4.44824 8.375H8.0957C8.47407 6.97118 9.03261 5.81838 9.59473 4.91895C9.87053 4.47766 10.1478 4.09794 10.4033 3.77832ZM11.8701 3.99023C11.542 4.34024 11.0993 4.87066 10.6553 5.58105C10.1947 6.31803 9.73361 7.24926 9.39551 8.375H14.6045C14.2664 7.24926 13.8053 6.31803 13.3447 5.58105C12.9007 4.87066 12.458 4.34024 12.1299 3.99023C12.0846 3.94192 12.0406 3.89781 12 3.85645C11.9594 3.89781 11.9154 3.94192 11.8701 3.99023ZM13.5957 3.77832C13.8514 4.09804 14.1293 4.47744 14.4053 4.91895C14.9674 5.81838 15.5259 6.97118 15.9043 8.375H19.5518C18.4221 6.02583 16.2284 4.28628 13.5957 3.77832Z' fill='black'/%3E%3C/svg%3E");
  }
  .pricing-page .beginner-card h4 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: var(--ds-text);
    line-height: 1.3;
    letter-spacing: -0.3px;
  }
  .pricing-page .beginner-card p {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    color: var(--ds-text-3);
  }
  /* CTA sits between head and grid (per Figma 17:827 / 58:7137 / 58:8232) */
  .pricing-page .beginner-cta {
    text-align: center;
    margin: 0 0 32px;
  }
  .pricing-page .beginner-cta .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    border-radius: var(--ds-radius-md);
    border: 0;
    background: var(--ds-text);
    color: var(--ds-text-inv);
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
    white-space: nowrap;
  }
  .pricing-page .beginner-cta .btn:hover { opacity: 0.9; }
  
  /* ============================================================
     FAQ
     ============================================================ */
  .pricing-page .faq {
    display: block;
    grid-template-columns: none;
    gap: 0;
    margin: 0 0 var(--ds-section-gap);
  }
  .pricing-page .faq-title {
    font-size: 24px;
    font-weight: 600;
    text-align: left;
    margin: 0 0 40px;
    color: var(--ds-text);
    letter-spacing: -0.5px;
    line-height: 1.2;
  }
  
  /* FAQ items — each row has a bottom border per Figma 14:457 */
  /* .pricing-page .faq-list { border-top: 1px solid var(--ds-border-default); } */
  .pricing-page .faq-list {
    display: flex;
    flex-direction: column;
    gap: 0px;
    
    .pricing-faq__panel{
      margin-top: 0;
    }
  }
  .pricing-page .pricing-faq__item {
    border-bottom: 1px solid var(--ds-border-default);
    
  }
  /* FAQ trigger button — Heading/18-Medium on mobile, Heading/24-Medium on tablet+ */
  .pricing-page .pricing-faq__trigger {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 20px 0;
    background: transparent;
    border: 0;
    font-family: "Pretendard", inherit;
    font-size: 18px;            /* mobile: Heading/18 */
    font-style: normal;
    font-weight: 500;
    line-height: 1.15;          /* 20.7px on mobile, 27.6px on tablet+ */
    letter-spacing: -0.27px;    /* mobile */
    color: var(--ds-text);      /* Text/Primary #000 */
    text-align: left;
    cursor: pointer;
  }
  .pricing-page .pricing-faq__item:first-child .pricing-faq__trigger {
    padding-top: 0;
  }
  .pricing-page .pricing-faq__trigger::after {
    content: "";
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-left: auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.2504 4.45384C11.2505 4.03973 11.5861 3.70392 12.0003 3.70392C12.4143 3.70407 12.7501 4.03982 12.7502 4.45384L12.7502 11.2501L19.5464 11.2501C19.9604 11.2503 20.2964 11.5859 20.2964 12C20.2964 12.4141 19.9604 12.7497 19.5464 12.7499L12.7502 12.7499L12.7502 19.5462C12.7501 19.9602 12.4143 20.2959 12.0003 20.2961C11.5861 20.2961 11.2505 19.9603 11.2504 19.5462L11.2504 12.7499L4.45413 12.7499C4.03992 12.7499 3.70421 12.4142 3.70421 12C3.70422 11.5858 4.03992 11.2501 4.45413 11.2501H11.2504L11.2504 4.45384Z' fill='black'/%3E%3C/svg%3E");
    transition: transform 200ms;
  }
  .pricing-page .pricing-faq__item[data-open="true"] .pricing-faq__trigger::after {
    transform: rotate(45deg);   /* + rotated 45° looks like ×, matches Figma */
  }
  /* FAQ answer paragraph — Body/14-Regular on mobile, Body/16-Regular on tablet+ */
  .pricing-page .pricing-faq__panel p,
  .pricing-page .faq-item__panel p {
    padding: 0 0 20px;
    font-family: "Pretendard", inherit;
    font-size: 14px;             /* mobile */
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;            /* 21px on mobile, 24px on tablet+ */
    color: var(--ds-text-2);     /* Text/Secondary #333 */
    margin: 0;
  }
  
  /* ============================================================
     BOTTOM CTA BANNER — uses the home-page shared rules from
     /styles.css (.cta-banner, .cta-banner__bg, .cta-banner__inner,
     .cta-banner__copy, .cta-banner__eyebrow, .cta-banner__headline,
     .cta-banner__visual, .cta-banner__details, .cta-banner__actions).
     Mobile-only override: bleed to viewport edges within pricing layout.
     ============================================================ */
  .pricing-page .cta-banner__inner {
    gap: 40px;
  }
  @media (max-width: 767px) {
    .pricing-page .cta-banner {
      margin: 0 -20px;
    }
    .pricing-page .cta-banner__headline {
      color: var(--Text-Primary, #000);
      text-align: center;
      font-family: Pretendard;
      font-size: 24px;
      font-style: normal;
      font-weight: 600;
      line-height: 115%;
      letter-spacing: -0.36px;
    }
    .pricing-page .cta-banner__actions .btn.btn--dark.btn--medium,
    .pricing-page .cta-banner__actions .btn.btn--medium.btn--outline {
      height: 48px;
      min-width: 60px;
      width: 280px;
    }
    /* Compare table — mobile (Figma 95:27999): 4-column fluid layout,
       feature column widest so labels can wrap. Bleed to viewport edges
       but guarantee the table itself never overflows the viewport.
       NOTE: Figma mobile design has NO footer row (Get Started + CTAs are
       hidden on mobile; user reaches them via the plan cards above). */
    .pricing-page .compare-wrap {
      margin-left: -20px;
      margin-right: -20px;
      max-width: 100vw;
      overflow-x: hidden;
      box-sizing: border-box;
    }
    .pricing-page .compare-table,
    .pricing-page .compare-inner {
      max-width: 100%;
      overflow-x: hidden;
      box-sizing: border-box;
    }
    .pricing-page .compare-table { margin-top: 1.5rem; }
    .pricing-page .compare-footer { display: none; }
    .pricing-page .compare-header,
    .pricing-page .compare-row {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1fr;
      gap: 0;
      padding: 0;
      width: 100%;
      box-sizing: border-box;
    }
    .pricing-page .compare-header-feature,
    .pricing-page .compare-header-plan,
    .pricing-page .compare-footer-label,
    .pricing-page .compare-feature-cell,
    .pricing-page .compare-val-cell,
    .pricing-page .compare-footer-cta {
      width: auto;
      flex: initial;
      min-width: 0;
      box-sizing: border-box;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    /* Body/14-Semibold per Figma mobile spec; padding 16px all sides */
    .pricing-page .compare-header-feature {
      padding: 16px;
      font-family: "Pretendard", sans-serif;
      font-size: 14px;
      font-style: normal;
      font-weight: 600;
      line-height: 1.5;
      letter-spacing: 0;
      color: #000;
    }
    .pricing-page .compare-header-plan {
      padding: 16px 8px;
      font-size: 13px;
      letter-spacing: -0.18px;
    }
    /* Body/14-Regular per Figma mobile spec (weight 400, line 1.5) */
    .pricing-page .compare-feature-cell {
      padding: 8px 16px;
      font-family: "Pretendard", sans-serif;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0;
    }
    .pricing-page .compare-val-cell {
      padding: 8px 16px;
      min-height: 44px;
    }
    /* Mobile: Body/14-Regular per Figma spec (text-align inherited) */
    .pricing-page .compare-val,
    .pricing-page .compare-dash {
      font-family: "Pretendard", sans-serif;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0;
    }
    .pricing-page .compare-check { width: 18px; height: 18px; }
    .pricing-page .compare-footer-label {
      padding: 14px 12px;
      font-size: 13px;
      letter-spacing: -0.18px;
    }
    .pricing-page .compare-footer-cta { padding: 16px 6px; }
    /* .cta-mini override removed — compare-footer is hidden on mobile */
  }
  
  /* Tablet only (768–1399): stack cta-banner action buttons vertically on
     the pricing page. Desktop (≥1400) keeps the base row layout. Mobile
     (≤767) keeps the /styles.css column with center alignment. */
  @media (min-width: 768px) and (max-width: 1399px) {
    .pricing-page .cta-banner__actions {
      order: initial;
      flex-direction: column;
      align-items: flex-end;
      justify-content: flex-end;
    }
    html[lang="ko"] .pricing-page .cta-banner__actions .btn.btn--dark.btn--medium,
    html[lang="ko"] .pricing-page .cta-banner__actions .btn.btn--medium.btn--outline {
      width: 151px;
    }
    html[lang="en"] .pricing-page .cta-banner__actions .btn.btn--dark.btn--medium,
    html[lang="en"] .pricing-page .cta-banner__actions .btn.btn--medium.btn--outline {
      width: 136px;
    }
  }
  
  /* Tablet (768–1023): /styles.css collapses .cta-banner__inner to a single
     column in this range for the home page. Restore the horizontal grid here. */
  @media (min-width: 768px) and (max-width: 1023px) {
    .pricing-page .cta-banner__inner {
      grid-template-columns: max-content auto max-content;
      align-items: center;
      text-align: left;
      padding: 30px 30px 0;
      gap: 0;
    }
    .pricing-page .cta-banner__copy {
      text-align: left;
      align-items: flex-start;
    }
    .pricing-page .cta-banner__visual {
      order: initial;
    }
  }
  
  /* ============================================================
     TABLET (≥ 768px)
     ============================================================ */
  @media (min-width: 768px) {
    .pricing-page {
      --ds-section-gap: 80px;
    }
    .pricing-page .hero { padding: 80px 48px; }
    .pricing-page .hero-title { font-size: 40px; letter-spacing: -1px; }
    .pricing-page .hero-subtitle { font-size: 18px; max-width: 760px; }
    .pricing-page .hero-head { margin-bottom: 80px; }
  
    .pricing-page .billing-wrap { margin-bottom: 40px; }
    .pricing-page .billing-label { width: 160px; height: 48px; }
  
    .pricing-page .cards-grid {
      grid-template-columns: 1fr;
      gap: 24px;
      margin-bottom: 80px;
    }
    .pricing-page .plan-card-body { padding: 32px; }
  
    /* .plan-name and price-amount keep unified specs from base */
    .pricing-page .plan-price-block { min-height: 116px; }
  
    .pricing-page .beginner {
      padding: 40px;
    }
    .pricing-page .beginner-head { margin-bottom: 20px; }
    /* Hide explicit mobile-only line breaks on tablet+ */
    .pricing-page .beginner-head__break { display: none; }
    /* Heading/32-Semibold on tablet+ */
    .pricing-page .beginner-head h3 {
      font-size: 32px;
      line-height: 1.15;          /* 36.8px */
      letter-spacing: -0.48px;
    }
    /* Body/20-Regular on tablet+ */
    .pricing-page .beginner-head p { font-size: 20px; line-height: 1.5; }
    /* Tablet keeps single-column stack per Figma 58:7137 */
    .pricing-page .beginner-grid {
      grid-template-columns: 1fr;
      gap: 20px;
      margin-bottom: 0;
    }
    .pricing-page .beginner-card { padding: 40px; gap: 20px 12px; grid-template-columns: 24px 1fr; }
    .pricing-page .beginner-card h4 { font-size: 22px; line-height: 1.2; letter-spacing: -0.5px; }
    .pricing-page .beginner-card p { font-size: 15px; line-height: 1.55; }
  
    .pricing-page .faq { display: grid; grid-template-columns: 244px 1fr; gap: 80px; }
    .pricing-page .faq-title { font-size: 28px; }
    .pricing-page .pricing-faq__trigger { padding: 20px 0; }
    /* Heading/24-Medium on tablet+ */
    .pricing-page .pricing-faq__trigger h3 {
      font-size: 24px;
      line-height: 1.15;        /* 27.6px */
      letter-spacing: -0.36px;
    }
    /* Body/16-Regular on tablet+ */
    .pricing-page .pricing-faq__panel p,
    .pricing-page .faq-item__panel p { font-size: 16px; line-height: 1.5; }
  
    /* Banner styles come from /styles.css home-page shared rules — no overrides here */

    /* Compare table — tablet (Figma 95:23024): full-width grid filling the
       content area. KF column wider so labels can wrap (e.g.
       "Go-to-Market Consulting & Export Strategy"); plan columns equal.
       Guarantees table never overflows viewport: width:100%, box-sizing
       border-box, min-width:0 + overflow-wrap on every cell so long labels
       wrap instead of pushing the row past the viewport. */
    .pricing-page .compare-wrap,
    .pricing-page .compare-table,
    .pricing-page .compare-inner {
      max-width: 100%;
      overflow-x: hidden;
      box-sizing: border-box;
    }
    .pricing-page .compare-header,
    .pricing-page .compare-row,
    .pricing-page .compare-footer {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: 0;
      padding: 0;
      width: 100%;
      box-sizing: border-box;
    }
    .pricing-page .compare-header-feature,
    .pricing-page .compare-header-plan,
    .pricing-page .compare-footer-label,
    .pricing-page .compare-feature-cell,
    .pricing-page .compare-val-cell,
    .pricing-page .compare-footer-cta {
      width: auto;
      flex: initial;
      min-width: 0;
      box-sizing: border-box;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    /* Heading/16-Semibold per Figma — same as PC base */
    .pricing-page .compare-header-feature {
      padding: 14px 16px;
      font-family: "Pretendard", sans-serif;
      font-size: 16px;
      font-style: normal;
      font-weight: 600;
      line-height: 1.15;
      letter-spacing: -0.24px;
      color: #000;
    }
    .pricing-page .compare-header-plan {
      padding: 14px 8px;
      font-size: 15px;
    }
    /* Heading/16-Semibold size + -0.24px tracking; weight 400 per spec */
    .pricing-page .compare-feature-cell {
      padding: 8px 16px;
      font-family: "Pretendard", sans-serif;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 1.15;
      letter-spacing: -0.24px;
    }
    /* Tablet: same Heading/16-Semibold size + tracking as feature cell;
       weight stays 400. text-align: center is inherited from base. */
    .pricing-page .compare-val,
    .pricing-page .compare-dash {
      font-family: "Pretendard", sans-serif;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 1.15;
      letter-spacing: -0.24px;
    }
    .pricing-page .compare-val-cell { padding: 8px 16px; }
    .pricing-page .compare-footer-label { padding: 16px 16px; font-size: 15px; }
    .pricing-page .compare-footer-cta { padding: 16px 8px; }
    /* .cta-mini uses the base Figma spec across all viewports — no override */
  }

  /* ============================================================
     DESKTOP (> 1024px) — Tablet covers up to 1024 inclusive
     ============================================================ */
  @media (min-width: 1025px) {
    .pricing-page {
      --ds-content-w: 1400px;
      --ds-section-gap: 80px;
    }
    .pricing-page .hero {
      padding: 128px 32px 80px;
    }
    .pricing-page .hero-inner { max-width: 1400px; }
    .pricing-page .hero-title { font-size: 52px; letter-spacing: -1.5px; }
    .pricing-page .hero-subtitle { font-size: 20px; max-width: 760px; }
    .pricing-page .hero-head { margin-bottom: 88px; }
  
    .pricing-page .billing-label { min-width: 160px; }
  
    /* 3-column card layout on desktop */
    .pricing-page .cards-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-bottom: 80px;
    }
    .pricing-page .plan-card-body { padding: 32px; }
    /* .plan-name, .plan-tag, price-amount keep unified specs from base */
    .pricing-page .plan-price-block { height: 107px;}
    .pricing-page .price-suffix { font-size: 18px; }
  
    .pricing-page .beginner { padding: 48px 40px; }
    /* .beginner-head h3 / p keep specs inherited from tablet rule */
    /* Desktop only — 2x2 grid per Figma 17:827 */
    .pricing-page .beginner-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }
    .pricing-page .beginner-card { padding: 40px; gap: 24px 12px; grid-template-columns: 24px 1fr; }
    .pricing-page .beginner-card h4 { font-size: 24px; }
    .pricing-page .beginner-card p { font-size: 16px; line-height: 1.5; }
  
    .pricing-page .faq { grid-template-columns: 474px 1fr; gap: 0; }
    .pricing-page .faq-title { font-size: 32px; }
    /* Heading/24-Medium on desktop (same as tablet, only padding differs) */
    .pricing-page .pricing-faq__trigger { padding: 24px 0; }
    /* Desktop: same Body/16-Regular as tablet, only padding adjusts */
    .pricing-page .pricing-faq__panel p,
    .pricing-page .faq-item__panel p { padding-bottom: 24px; }
  
  }