/* ============================================================
   WapiGrow — pages.css
   Shared classes used across interior pages (industries pages,
   pricing.php, features.php, use-cases.php, contact.php, blog
   posts, pos.php) that had no matching CSS anywhere. Extends
   layout.css using the same wg- token system.
   ============================================================ */


  /* ── Missing button variants (site uses both wg-* and bare legacy names) ── */
  .wg-btn-ghost { background: transparent; color: var(--wg-text-primary); border-color: var(--wg-border); }
  .wg-btn-ghost:hover { background: var(--wg-gray-100); border-color: var(--wg-gray-400); }
  .wg-btn-white { background: #fff; color: var(--wg-text-primary); border-color: #fff; }
  .wg-btn-white:hover { background: var(--wg-green-light); }
  .wg-btn-outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); }
  .wg-btn-outline-white:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
  .btn-lg, .wg-btn.btn-lg { padding: var(--wg-sp-4) var(--wg-sp-8); font-size: var(--wg-text-lg); min-height: 60px; }
  .btn-block, .wg-btn-block { width: 100%; }

  /* ── Generic interior page header (smaller than homepage hero) ── */
  .page-head { padding-block: var(--wg-sp-10) var(--wg-sp-12); background: var(--wg-off-white); }
  .page-head h1 { margin: var(--wg-sp-3) 0 var(--wg-sp-3); }
  .page-head p { max-width: 640px; color: var(--wg-text-muted); }

  /* ── Breadcrumb ── */
  .crumbs { display: flex; align-items: center; gap: var(--wg-sp-2); font-size: var(--wg-text-sm); color: var(--wg-text-muted); margin-bottom: var(--wg-sp-4); }
  .crumbs a { color: var(--wg-text-muted); }
  .crumbs a:hover { color: var(--wg-green-dark); }
  .crumbs .sep { color: var(--wg-gray-400); }

  /* ── Eyebrow label (works standalone or combined with .wg-badge) ── */
  .eyebrow {
    display: inline-flex; align-items: center; gap: var(--wg-sp-2);
    font-size: var(--wg-text-sm); font-weight: 700; color: var(--wg-green-dark);
    margin-bottom: var(--wg-sp-3);
  }
  .eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wg-green); box-shadow: 0 0 0 4px var(--wg-green-light); flex-shrink: 0; }

  /* ── Section head (industries/pricing/features/use-cases variant) ── */
  .section-head { text-align: center; max-width: 640px; margin: 0 auto var(--wg-sp-10); }
  .section-head .eyebrow { justify-content: center; }
  .section-head h2 { margin-bottom: var(--wg-sp-3); }
  .section-head p { color: var(--wg-text-muted); }
  .section-soft { background: var(--wg-off-white); }

  /* ── Industry hero (industries/*.php) ── */
  .ind-hero { padding-block: var(--wg-sp-12) var(--wg-sp-14); background: var(--wg-off-white); }
  .ind-hero-inner { display: grid; grid-template-columns: 1fr; gap: var(--wg-sp-10); align-items: center; }
  @media (min-width: 900px) { .ind-hero-inner { grid-template-columns: 1.1fr 1fr; } }
  .hero-cta { display: flex; flex-wrap: wrap; gap: var(--wg-sp-3); margin-top: var(--wg-sp-2); }

  /* ── Phone mockup (industries/features variant of .chat-mockup) ── */
  .phone-mock { display: flex; justify-content: center; }
  .phone-frame {
    width: 100%; max-width: 340px; background: #fff; border-radius: var(--wg-r-2xl);
    box-shadow: var(--wg-shadow-xl); padding: var(--wg-sp-4);
    display: flex; flex-direction: column; gap: var(--wg-sp-3);
  }
  .phone-head { display: flex; align-items: center; gap: var(--wg-sp-3); padding-bottom: var(--wg-sp-3); border-bottom: 1px solid var(--wg-border); }
  .phone-avatar {
    width: 36px; height: 36px; border-radius: 50%; background: var(--wg-green-light);
    display: flex; align-items: center; justify-content: center; font-size: var(--wg-text-lg); flex-shrink: 0;
  }
  .phone-name { font-size: var(--wg-text-sm); font-weight: 700; color: var(--wg-text-primary); }
  .phone-status { font-size: var(--wg-text-xs); color: var(--wg-green-dark); font-weight: 600; }
  .phone-body { display: flex; flex-direction: column; gap: var(--wg-sp-3); }

  /* ── Chat bubbles (industries/features variant of .chat-bubble) ── */
  .bubble { max-width: 85%; padding: var(--wg-sp-3) var(--wg-sp-4); border-radius: var(--wg-r-lg); font-size: var(--wg-text-sm); line-height: 1.5; white-space: pre-line; }
  .bubble small { display: block; margin-top: var(--wg-sp-1); font-size: 0.68rem; color: var(--wg-text-muted); text-align: right; }
  .bubble-in { align-self: flex-start; background: var(--wg-gray-100); color: var(--wg-text-primary); border-bottom-left-radius: var(--wg-r-sm); }
  .bubble-out { align-self: flex-end; background: var(--wg-green-light); color: var(--wg-text-primary); border-bottom-right-radius: var(--wg-r-sm); }

  /* ── Steps (industries variant of .steps-grid / .step-card) ── */
  .steps { display: grid; grid-template-columns: 1fr; gap: var(--wg-sp-8); }
  @media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
  .step { text-align: center; padding: var(--wg-sp-4); }
  .step .step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%; background: var(--wg-green);
    color: #fff; font-size: var(--wg-text-lg); font-weight: 700; margin-bottom: var(--wg-sp-4);
  }
  .step h3 { margin-bottom: var(--wg-sp-2); font-size: var(--wg-text-lg); }

  /* ── Template message cards (restaurant.php etc.) ── */
  .tpl-grid { display: grid; grid-template-columns: 1fr; gap: var(--wg-sp-5); }
  @media (min-width: 720px) { .tpl-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .tpl-grid { grid-template-columns: repeat(3, 1fr); } }
  .tpl-card { background: #fff; border: 1px solid var(--wg-border); border-radius: var(--wg-r-lg); padding: var(--wg-sp-5); }
  .tpl-card h4 { margin-bottom: var(--wg-sp-3); font-size: var(--wg-text-base); }
  .msg {
    background: var(--wg-off-white); border-radius: var(--wg-r-md); padding: var(--wg-sp-3);
    font-size: var(--wg-text-sm); line-height: 1.55; color: var(--wg-text-secondary); white-space: pre-line;
  }

  /* ── Two-column layout ── */
  .two-col { display: grid; grid-template-columns: 1fr; gap: var(--wg-sp-10); align-items: center; }
  @media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; } }
  .two-col.reverse > *:first-child { order: 2; }
  .two-col.reverse > *:last-child { order: 1; }

  /* ── Checklist ── */
  .check-list { display: flex; flex-direction: column; gap: var(--wg-sp-4); list-style: none; padding: 0; margin: var(--wg-sp-4) 0; }
  .check-list li { display: flex; align-items: flex-start; gap: var(--wg-sp-3); color: var(--wg-text-secondary); font-size: var(--wg-text-sm); }
  .check-list li svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--wg-green); }

  /* ── CTA band (dark, interior-page variant of .cta-banner) ── */
  .cta-band {
    background: var(--wg-navy); color: #fff; text-align: center;
    border-radius: var(--wg-r-2xl); padding: var(--wg-sp-12) var(--wg-sp-8);
  }
  .cta-band h2 { color: #fff; margin-bottom: var(--wg-sp-3); }
  .cta-band p { color: rgba(255,255,255,0.75); margin-bottom: var(--wg-sp-2); }

  /* ── Feature grid (features.php / use-cases.php) ── */
  .feature-grid { display: grid; grid-template-columns: 1fr; gap: var(--wg-sp-6); }
  @media (min-width: 640px)  { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
  .feature-card {
    background: #fff; border: 1px solid var(--wg-border); border-radius: var(--wg-r-xl);
    padding: var(--wg-sp-6); transition: box-shadow var(--wg-t-base) var(--wg-ease), transform var(--wg-t-base) var(--wg-ease);
  }
  .feature-card:hover { box-shadow: var(--wg-shadow-lg); transform: translateY(-3px); }
  .feature-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: var(--wg-r-lg); margin-bottom: var(--wg-sp-4);
    background: var(--wg-green-light); color: var(--wg-green-dark);
  }
  .pos-feature-card {
    display: flex; flex-direction: column; align-items: flex-start;
    min-height: 100%;
  }
  .pos-feature-card h4 {
    margin-bottom: var(--wg-sp-2);
    color: var(--wg-text-primary);
    font-size: var(--wg-text-lg);
    line-height: 1.35;
  }
  .pos-feature-card .feature-icon { flex-shrink: 0; }
  .pos-feature-card .pos-feature-desc {
    margin: 0;
    color: var(--wg-text-secondary);
    font-size: var(--wg-text-sm);
    line-height: 1.65;
  }
  .feature-card h3 { margin-bottom: var(--wg-sp-2); font-size: var(--wg-text-lg); }
  .icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: var(--wg-r-lg); margin-bottom: var(--wg-sp-4);
    background: var(--wg-green-light); color: var(--wg-green-dark);
  }

  /* ── Industry playbook grid (use-cases.php — link cards, distinct from homepage's industry-cards-grid) ── */
  .industry-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--wg-sp-4); }
  @media (min-width: 640px)  { .industry-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 1024px) { .industry-grid { grid-template-columns: repeat(4, 1fr); } }
  .industry-grid .industry-card {
    display: flex; align-items: center; gap: var(--wg-sp-3);
    background: #fff; border: 1px solid var(--wg-border); border-radius: var(--wg-r-lg);
    padding: var(--wg-sp-4); font-size: var(--wg-text-sm); font-weight: 600; color: var(--wg-text-primary);
    transition: box-shadow var(--wg-t-base) var(--wg-ease), transform var(--wg-t-base) var(--wg-ease), border-color var(--wg-t-base);
  }
  .industry-grid .industry-card:hover { box-shadow: var(--wg-shadow-md); transform: translateY(-2px); border-color: var(--wg-green); }
  .industry-grid .industry-card svg { width: 22px; height: 22px; color: var(--wg-green); flex-shrink: 0; }
  .industry-grid .industry-card .arr { margin-left: auto; opacity: 0; transition: opacity var(--wg-t-fast) var(--wg-ease); color: var(--wg-green); }
  .industry-grid .industry-card:hover .arr { opacity: 1; }

  /* ── Testimonial author row (industries pages, alongside homepage's .t-avatar) ── */
  .t-author { display: flex; align-items: center; gap: var(--wg-sp-3); margin-top: var(--wg-sp-3); }
  .t-author strong { display: block; font-size: var(--wg-text-sm); color: var(--wg-text-primary); }
  .t-author span { font-size: var(--wg-text-xs); color: var(--wg-text-muted); }

  /* ── Pricing cards (pricing.php + pos.php) ── */
  .price-grid { display: grid; grid-template-columns: 1fr; gap: var(--wg-sp-6); }
  @media (min-width: 720px)  { .price-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .price-grid { grid-template-columns: repeat(3, 1fr); } }
  .price-card { background: #fff; border: 1px solid var(--wg-border); border-radius: var(--wg-r-xl); padding: var(--wg-sp-8); display: flex; flex-direction: column; }
  .price-card.featured, .price-card.wg-card-featured { border: 2px solid var(--wg-green); box-shadow: var(--wg-shadow-green); }
  .price-name { display: flex; align-items: center; gap: var(--wg-sp-2); font-size: var(--wg-text-xl); font-weight: 700; margin-bottom: var(--wg-sp-4); }
  .price-display { margin-bottom: var(--wg-sp-3); }
  .price-amt { font-size: var(--wg-text-4xl); font-weight: 800; color: var(--wg-text-primary); }
  .price-amt small { font-size: var(--wg-text-base); font-weight: 500; color: var(--wg-text-muted); }
  .price-desc { color: var(--wg-text-muted); font-size: var(--wg-text-sm); margin-bottom: var(--wg-sp-5); }
  .price-list { list-style: none; padding: 0; margin: 0 0 var(--wg-sp-6); display: flex; flex-direction: column; gap: var(--wg-sp-3); flex: 1; }
  .price-list li { display: flex; align-items: flex-start; gap: var(--wg-sp-2); font-size: var(--wg-text-sm); color: var(--wg-text-secondary); }
  .price-list li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--wg-green); }

  /* ── Alt FAQ naming (pricing.php uses .faq-q/.faq-a/.faq-a-inner alongside .faq-item) ── */
  .faq-list { display: flex; flex-direction: column; }
  .faq-item .faq-q {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding-block: var(--wg-sp-5); font-weight: 600; color: var(--wg-text-primary);
    text-align: left; cursor: pointer;
  }
  .faq-a { max-height: 0; overflow: hidden; transition: max-height var(--wg-t-base) var(--wg-ease); }
  .faq-item.open .faq-a { max-height: 400px; }
  .faq-a-inner { padding-bottom: var(--wg-sp-5); color: var(--wg-text-secondary); font-size: var(--wg-text-sm); line-height: 1.65; }

  /* ── Contact page ── */
  .contact-split { display: grid; grid-template-columns: 1fr; gap: var(--wg-sp-10); }
  @media (min-width: 900px) { .contact-split { grid-template-columns: 1fr 1.1fr; } }
  .contact-card { background: #fff; border: 1px solid var(--wg-border); border-radius: var(--wg-r-xl); padding: var(--wg-sp-8); }
  .contact-card label { display: block; margin-bottom: var(--wg-sp-2); color: var(--wg-text-primary); font-size: var(--wg-text-sm); font-weight: 700; }
  .contact-card input:not([type="hidden"]), .contact-card textarea {
    width: 100%; min-height: 48px; padding: var(--wg-sp-3) var(--wg-sp-4);
    border: 1px solid var(--wg-border); border-radius: var(--wg-r-md);
    background: var(--wg-white); color: var(--wg-text-primary); font: inherit;
    line-height: 1.5; transition: border-color var(--wg-t-fast), box-shadow var(--wg-t-fast);
  }
  .contact-card textarea { min-height: 132px; resize: vertical; }
  .contact-card input:not([type="hidden"]):focus, .contact-card textarea:focus {
    outline: none; border-color: var(--wg-green-dark); box-shadow: 0 0 0 3px var(--wg-green-glow);
  }
  .contact-card input::placeholder, .contact-card textarea::placeholder { color: var(--wg-text-muted); }
  .contact-card .form-error, .contact-card .form-success { margin-top: 0; line-height: 1.55; }
  @media (max-width: 539px) { .contact-card { padding: var(--wg-sp-5); } }
  .contact-info { display: flex; flex-direction: column; gap: var(--wg-sp-4); margin-top: var(--wg-sp-6); }
  .contact-line { display: flex; align-items: center; gap: var(--wg-sp-3); }
  .contact-line strong { display: block; font-size: var(--wg-text-sm); color: var(--wg-text-primary); }
  .contact-line span, .contact-line a { font-size: var(--wg-text-sm); color: var(--wg-text-muted); }
  .ico {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 40px; height: 40px; border-radius: var(--wg-r-md); background: var(--wg-green-light); color: var(--wg-green-dark);
  }
  .ico svg { width: 18px; height: 18px; }
  .row { display: grid; grid-template-columns: 1fr; gap: var(--wg-sp-4); }
  @media (min-width: 540px) { .row { grid-template-columns: 1fr 1fr; } }
  .form-honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

  /* ── Blog post detail ── */
  .post-wrap { max-width: 760px; margin: 0 auto; }
  .post-meta { color: var(--wg-text-muted); font-size: var(--wg-text-sm); margin-bottom: var(--wg-sp-6); }
  .post-body { font-size: var(--wg-text-base); line-height: 1.75; color: var(--wg-text-secondary); }
  .post-body h2 { margin: var(--wg-sp-8) 0 var(--wg-sp-3); }
  .post-body p { margin-bottom: var(--wg-sp-4); }
  .post-body ul, .post-body ol { margin: var(--wg-sp-4) 0; padding-left: var(--wg-sp-6); }
  .post-body li { margin-bottom: var(--wg-sp-2); }
  .post-cta { margin-top: var(--wg-sp-10); padding: var(--wg-sp-6); background: var(--wg-green-light); border-radius: var(--wg-r-lg); text-align: center; }

  /* ── Blog cards (features.php reuses these without its own <style> block; blog/index.php has its own) ── */
  .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--wg-sp-6); }
  .blog-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--wg-border); border-radius: var(--wg-r-lg); padding: var(--wg-sp-6); transition: box-shadow var(--wg-t-base), transform var(--wg-t-base); }
  .blog-card:hover { box-shadow: var(--wg-shadow-md); transform: translateY(-2px); }
  .blog-card h2 { font-size: var(--wg-text-lg); line-height: 1.35; margin: 0 0 var(--wg-sp-2); }
  .blog-card h2 a { color: var(--wg-text-primary); }
  .blog-card h2 a:hover { color: var(--wg-green-dark); }
  .b-date { font-size: var(--wg-text-xs); color: var(--wg-text-muted); margin-bottom: var(--wg-sp-2); }
  .b-excerpt { font-size: var(--wg-text-sm); line-height: 1.6; color: var(--wg-text-secondary); flex: 1; }

  /* ── Before/after comparison (pos.php) + misc grids ── */
  .before-after-grid { display: grid; grid-template-columns: 1fr; gap: var(--wg-sp-6); }
  @media (min-width: 720px) { .before-after-grid { grid-template-columns: 1fr 1fr; } }
  .before-card, .after-card {
    border-radius: var(--wg-r-xl);
    padding: var(--wg-sp-6);
    box-shadow: var(--wg-shadow-sm);
  }
  .before-card {
    background: #fff7f7;
    border: 1px solid #fecaca;
  }
  .after-card {
    background: var(--wg-green-light);
    border: 1px solid var(--wg-green-200, #bbf7d0);
  }
  .before-card h3, .after-card h3 {
    margin-bottom: var(--wg-sp-5);
    font-size: var(--wg-text-xl);
  }
  .before-card h3 { color: #991b1b; }
  .after-card h3 { color: var(--wg-green-800, #166534); }
  .before-after-item {
    display: flex;
    align-items: flex-start;
    gap: var(--wg-sp-3);
    padding: var(--wg-sp-3) 0;
    color: var(--wg-text-secondary);
    font-size: var(--wg-text-sm);
    line-height: 1.55;
  }
  .before-after-item + .before-after-item { border-top: 1px solid rgba(15, 25, 35, .08); }
  .before-after-item .icon {
    flex: 0 0 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: .95rem;
  }
  @keyframes posCompareIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }
  .before-after-grid.visible .before-card,
  .before-after-grid.visible .after-card {
    animation: posCompareIn .5s var(--wg-ease) both;
  }
  .before-after-grid.visible .after-card { animation-delay: .12s; }
  .before-after-grid.visible .before-after-item { animation: posCompareIn .35s var(--wg-ease) both; }
  .before-after-grid.visible .before-after-item:nth-child(2) { animation-delay: .08s; }
  .before-after-grid.visible .before-after-item:nth-child(3) { animation-delay: .16s; }
  .before-after-grid.visible .before-after-item:nth-child(4) { animation-delay: .24s; }
  .before-after-grid.visible .before-after-item:nth-child(5) { animation-delay: .32s; }
  .before-after-grid.visible .before-after-item:nth-child(6) { animation-delay: .4s; }
  .grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--wg-sp-5); }
  @media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
  .muted { color: var(--wg-text-muted); }

  /* ── Legal pages (privacy.php / terms.php / refund.php) ── */
  .legal-hero { padding-block: var(--wg-sp-10) var(--wg-sp-8); background: var(--wg-off-white); }
  .legal-hero h1 { margin: var(--wg-sp-3) 0 var(--wg-sp-2); }
  .legal-hero .updated { color: var(--wg-text-muted); font-size: var(--wg-text-sm); }
  .legal-body { max-width: 760px; margin: 0 auto; padding: var(--wg-sp-12) var(--wg-sp-4); }
  .legal-body h2 { margin: var(--wg-sp-8) 0 var(--wg-sp-3); font-size: var(--wg-text-2xl); }
  .legal-body p { margin-bottom: var(--wg-sp-4); line-height: 1.7; color: var(--wg-text-secondary); }
  .legal-body ul, .legal-body ol { margin: var(--wg-sp-4) 0; padding-left: var(--wg-sp-6); }
  .legal-body li { margin-bottom: var(--wg-sp-2); color: var(--wg-text-secondary); }
  .legal-toc { background: var(--wg-off-white); border: 1px solid var(--wg-border); border-radius: var(--wg-r-lg); padding: var(--wg-sp-5) var(--wg-sp-6); margin-bottom: var(--wg-sp-8); }
  .legal-toc p { font-weight: 700; color: var(--wg-text-primary); margin-bottom: var(--wg-sp-2); }
  .legal-toc ol { margin: 0; padding-left: var(--wg-sp-5); columns: 1; }
  @media (min-width: 640px) { .legal-toc ol { columns: 2; column-gap: var(--wg-sp-6); } }
  .legal-toc li { margin-bottom: var(--wg-sp-1); font-size: var(--wg-text-sm); }
  .legal-highlight { background: var(--wg-green-light); border: 1px solid var(--wg-green); border-radius: var(--wg-r-lg); padding: var(--wg-sp-5) var(--wg-sp-6); margin-bottom: var(--wg-sp-8); font-size: var(--wg-text-sm); line-height: 1.65; color: var(--wg-text-primary); }
  .legal-warn { background: #fef3c7; border: 1px solid #fcd34d; border-radius: var(--wg-r-lg); padding: var(--wg-sp-5) var(--wg-sp-6); margin: var(--wg-sp-4) 0; font-size: var(--wg-text-sm); line-height: 1.65; color: #92400e; }
  .legal-table { width: 100%; border-collapse: collapse; margin: var(--wg-sp-6) 0; font-size: var(--wg-text-sm); }
  .legal-table th, .legal-table td { padding: var(--wg-sp-3) var(--wg-sp-4); text-align: left; border-bottom: 1px solid var(--wg-border); }
  .legal-table th { background: var(--wg-off-white); font-weight: 700; color: var(--wg-text-primary); }

  /* ── Refund page ── */
  .refund-grid { display: grid; grid-template-columns: 1fr; gap: var(--wg-sp-5); margin: var(--wg-sp-6) 0; }
  @media (min-width: 640px) { .refund-grid { grid-template-columns: 1fr 1fr; } }
  .refund-card { border-radius: var(--wg-r-lg); padding: var(--wg-sp-5) var(--wg-sp-6); border: 1px solid var(--wg-border); }
  .refund-card.yes { background: var(--wg-green-light); border-color: var(--wg-green); }
  .refund-card.no { background: #fef2f2; border-color: #fca5a5; }
  .refund-card ul { margin: 0; padding-left: var(--wg-sp-5); }
  .rc-title { font-weight: 700; margin-bottom: var(--wg-sp-3); color: var(--wg-text-primary); }