.public-info-page .desktop-nav a[aria-current="page"] { color: var(--primary); font-weight: 650; }
.info-hero { padding: 92px 0 74px; border-bottom: 1px solid var(--border); background: var(--surface); }
.info-hero .container { max-width: 980px; }
.info-hero h1 { max-width: 840px; margin: 0; font-size: 52px; font-weight: 650; line-height: 1.16; }
.info-hero p { max-width: 760px; margin: 18px 0 0; color: var(--muted); font-size: 17px; line-height: 1.75; }
.document-meta { display: flex; align-items: center; margin-top: 28px; color: var(--muted); font-size: 12px; gap: 8px; }
.document-meta svg { width: 16px; height: 16px; color: var(--secondary); }
.info-section { min-height: 55vh; padding: 72px 0 100px; background: #fff; }
.info-layout { display: grid; align-items: start; grid-template-columns: 280px minmax(0, 1fr); gap: 72px; }
.info-aside, .refund-callout { position: sticky; top: 104px; padding: 22px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.info-aside > svg, .refund-callout > svg { width: 23px; height: 23px; margin-bottom: 24px; color: var(--secondary); }
.info-aside strong, .refund-callout strong { display: block; font-size: 16px; }
.info-aside p, .refund-callout p { margin: 9px 0 18px; color: var(--muted); font-size: 12px; line-height: 1.75; }
.public-faq-list { border-top-color: #cbd5e1; }
.public-faq-list .faq-item button { min-height: 82px; font-size: 15px; }
.public-faq-list .faq-item > div > p { font-size: 13px; }
.public-faq-list .faq-item a, .legal-content a { color: var(--secondary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.legal-layout { display: grid; align-items: start; grid-template-columns: 250px minmax(0, 1fr); gap: 72px; }
.legal-index { position: sticky; top: 104px; display: flex; padding: 20px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); flex-direction: column; }
.legal-index strong { padding: 2px 0 14px; border-bottom: 1px solid var(--border); font-size: 13px; }
.legal-index a { padding: 11px 0; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 11px; line-height: 1.5; }
.legal-index a:last-child { border-bottom: 0; }
.legal-index a:hover { color: var(--secondary); }
.legal-content { border-top: 1px solid var(--border); }
.legal-content > section { display: grid; padding: 30px 0; border-bottom: 1px solid var(--border); scroll-margin-top: 100px; grid-template-columns: 42px minmax(0, 1fr); gap: 22px; }
.legal-content > section > span { color: var(--secondary); font-size: 11px; font-weight: 700; }
.legal-content h2 { margin: 0; font-size: 21px; font-weight: 650; }
.legal-content p { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.9; }
.refund-callout > svg { color: var(--success); }
.contact-layout { display: grid; align-items: start; grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr); gap: 72px; }
.contact-mark { display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center; border-radius: 8px; background: #eff6ff; color: var(--secondary); }
.contact-mark svg { width: 24px; height: 24px; }
.contact-intro h2 { margin: 24px 0 0; font-size: 30px; font-weight: 650; }
.contact-intro > p { margin: 13px 0 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.contact-hours { display: flex; align-items: flex-start; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); gap: 12px; }
.contact-hours > svg { width: 18px; height: 18px; color: var(--secondary); }
.contact-hours span { display: flex; flex-direction: column; }
.contact-hours strong { font-size: 12px; }
.contact-hours small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.contact-grid { display: grid; gap: 14px; }
.business-contact { padding: 28px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.business-contact-head { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 20px; }
.business-contact-head > span { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 8px; background: #eff6ff; color: var(--secondary); }
.business-contact-head > span svg { width: 23px; height: 23px; }
.business-contact-head small, .business-contact-list small { color: var(--muted); font-size: 10px; font-weight: 700; }
.business-contact-head h2 { margin: 7px 0 0; font-size: 22px; font-weight: 650; }
.business-contact-head p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.business-contact-list { display: grid; margin-top: 24px; border-top: 1px solid var(--border); }
.business-contact-list a { display: grid; align-items: center; min-width: 0; padding: 17px 0; border-bottom: 1px solid var(--border); grid-template-columns: 20px minmax(0, 1fr) 18px; gap: 14px; }
.business-contact-list a:last-child { padding-bottom: 0; border-bottom: 0; }
.business-contact-list a > svg { width: 18px; height: 18px; color: var(--secondary); }
.business-contact-list a > svg:last-child { width: 14px; height: 14px; color: var(--muted); }
.business-contact-list span { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.business-contact-list strong { color: var(--primary); font-size: 12px; font-style: normal; font-weight: 600; line-height: 1.65; overflow-wrap: anywhere; }
.business-contact-list a:hover strong { color: var(--secondary); }
.contact-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.contact-card { display: grid; min-height: 190px; padding: 28px; border: 1px solid var(--border); border-radius: 8px; background: #fff; grid-template-columns: 50px minmax(0, 1fr); gap: 20px; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.contact-card:hover { border-color: #94a3b8; box-shadow: 0 16px 36px rgba(15,23,42,.08); transform: translateY(-2px); }
.contact-card > span { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 8px; background: var(--surface); color: var(--secondary); }
.contact-card > span svg { width: 23px; height: 23px; }
.contact-card.whatsapp > span { background: #f0fdf4; color: #15803d; }
.contact-card.shopee > span { background: #fff7ed; color: #ea580c; }
.contact-card small { color: var(--muted); font-size: 10px; font-weight: 700; }
.contact-card h2 { margin: 7px 0 0; font-size: 20px; font-weight: 650; }
.contact-card p { margin: 8px 0 20px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.contact-card strong { display: inline-flex; align-items: center; color: var(--secondary); font-size: 12px; gap: 6px; }
.contact-card strong svg { width: 14px; height: 14px; }

@media (max-width: 900px) {
  .info-layout, .legal-layout, .contact-layout { grid-template-columns: 1fr; gap: 38px; }
  .info-aside, .refund-callout, .legal-index { position: static; }
  .legal-index { display: none; }
}

@media (max-width: 680px) {
  .info-hero { padding: 68px 0 54px; }
  .info-hero h1 { font-size: 38px; }
  .info-hero p { font-size: 15px; }
  .info-section { padding: 52px 0 72px; }
  .public-faq-list .faq-item button { min-height: 74px; font-size: 14px; }
  .legal-content > section { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; }
  .legal-content h2 { font-size: 18px; }
  .business-contact { padding: 22px; }
  .business-contact-head { grid-template-columns: 42px minmax(0, 1fr); gap: 14px; }
  .business-contact-head > span { width: 42px; height: 42px; }
  .contact-actions { grid-template-columns: 1fr; }
  .contact-card { min-height: 0; padding: 22px; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; }
  .contact-card > span { width: 42px; height: 42px; }
}