/* Shared Apple-inspired presentation for HHJ Pro content pages */
:root {
  --ink: #1d1d1f;
  --paper: #f5f5f7;
  --paper-deep: #e8e8ed;
  --muted: #6e6e73;
  --line: rgba(29,29,31,.12);
  --accent: #0071e3;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Noto Sans SC Variable", sans-serif;
  --page: min(1120px, calc(100vw - 64px));
}

html { background: var(--paper); }
body { color: var(--ink); background: var(--paper); font-family: var(--sans); font-optical-sizing: auto; }
button, a { -webkit-tap-highlight-color: transparent; }
button:active, a:active { transform: scale(.97); transition: transform 90ms ease-out; }

.site-head, .topbar {
  min-height: 56px;
  padding: 0 max(24px, calc((100vw - 1120px) / 2));
  color: white;
  background: rgba(17,17,19,.72);
  border-bottom: 0;
  box-shadow: 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
}
.brand { gap: 9px; font-size: 16px; letter-spacing: -.025em; }
.brand b { color: var(--accent); }
.brand-mark, .mark { width: 23px; height: 23px; }
.brand-mark::before, .mark::before { width: 29px; }
.brand-mark::after, .mark::after { height: 29px; }
.site-nav, .top-links { gap: 24px; font-size: 12px; font-weight: 560; }
.site-nav .language-link { color: rgba(255,255,255,.82); }
.site-nav .contact-link, .top-links .wechat { padding: 7px 13px; color: white; background: var(--accent); border: 0; border-radius: 999px; }

.page-hero, body > .hero {
  min-height: 560px;
  background: linear-gradient(90deg, rgba(5,5,7,.9), rgba(5,5,7,.5) 52%, rgba(5,5,7,.08)), url('/assets/hhj-pro-hero.webp') 58% center / cover no-repeat;
}
.page-hero-inner, body > .hero .hero-inner { width: var(--page); padding: 112px 0 76px; }
.eyebrow { margin-bottom: 18px; font-size: 11px; letter-spacing: .08em; }
.page-hero h1, body > .hero h1 { max-width: 820px; font-size: clamp(54px, 7vw, 88px); line-height: 1.02; letter-spacing: -.06em; font-weight: 750; }
.hero-lead, body > .hero p:last-child { max-width: 640px; margin-top: 24px; color: rgba(255,255,255,.72); font-size: 17px; line-height: 1.7; letter-spacing: -.01em; }

main, body > main { width: var(--page); }
.content-section, body > main > section {
  margin: 24px 0;
  padding: 76px 64px;
  border: 0;
  border-radius: 32px;
  background: white;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}
.section-head { grid-template-columns: 150px 1fr; gap: 38px; margin-bottom: 44px; }
.section-index, .index { color: #86868b; font-size: 10px; letter-spacing: .08em; }
h2 { font-size: clamp(40px, 5vw, 62px); line-height: 1.08; letter-spacing: -.05em; font-weight: 730; }
.section-note, .section-intro { color: var(--muted); font-size: 15px; line-height: 1.75; }
.answer-block { grid-template-columns: 150px 1fr; gap: 38px; padding: 0; border: 0; }
.answer-block strong { font-size: 11px; letter-spacing: .06em; }
.answer-block p { font-size: clamp(22px, 2.5vw, 32px); line-height: 1.48; letter-spacing: -.03em; }

.table-scroll { overflow: auto; border: 0; border-radius: 20px; background: #f5f5f7; }
.data-table th, .data-table td { padding: 17px 18px; border-bottom-color: rgba(29,29,31,.1); }
.data-table thead th { background: #e8e8ed; }
.data-table tbody th { background: rgba(255,255,255,.55); }
.data-table .emphasis { background: rgba(0,113,227,.08); }
.table-foot { color: #86868b; }

.plain-list { gap: 14px; border: 0; }
.plain-list article, .plain-list article + article { min-height: 230px; padding: 28px; border: 0; border-radius: 22px; background: #f5f5f7; }
.plain-list h3 { margin-top: 52px; font-size: 22px; letter-spacing: -.02em; }
.plain-list p { font-size: 14px; line-height: 1.7; }
.number-list { overflow: hidden; border: 0; border-radius: 22px; background: #f5f5f7; }
.number-list li { padding: 24px; border-bottom-color: rgba(29,29,31,.1); }
.number-list h3 { font-size: 18px; }
.number-list p { font-size: 14px; line-height: 1.7; }
.split { gap: 58px; }

.faq-list, .faults { border-top-color: rgba(29,29,31,.1); }
details { border-bottom-color: rgba(29,29,31,.1); }
summary { padding: 24px 0; font-size: 17px; }
details p { color: var(--muted); font-size: 14px; line-height: 1.75; }
.related a { border: 0; border-radius: 999px; color: #0066cc; background: #f5f5f7; }
.related a:hover { color: #0066cc; border-color: transparent; opacity: .72; }

.copy-button { border: 0; border-radius: 999px; background: var(--ink); transition: transform .12s ease, opacity .2s ease; }
.copy-button:hover { opacity: .86; }
.page-cta, .help { margin: 24px 0 80px; padding: 48px; border-radius: 32px; background: radial-gradient(circle at 20% 0%, #313135, #0d0d0f 70%); }
.page-cta h2, .help h2 { font-size: clamp(34px, 4vw, 48px); }
.page-cta-primary, .help-actions > a:first-child { padding: 12px 19px; border-radius: 999px; background: var(--accent); }
.page-cta-home, .help-actions .help-home { border-bottom: 0; color: rgba(255,255,255,.68); }

body > main > section .step-list { gap: 14px; border: 0; }
body > main > section .step, body > main > section .step + .step { min-height: 260px; padding: 28px; border: 0; border-radius: 22px; background: #f5f5f7; }
body > main > section .step::before { margin-bottom: 46px; }
body > main > section .restore-list { overflow: hidden; border: 0; border-radius: 22px; background: #f5f5f7; }
body > main > section .restore-list li { padding: 24px; border-bottom-color: rgba(29,29,31,.1); }

.site-foot, body > footer { padding: 34px max(24px, calc((100vw - 1120px) / 2)); color: #86868b; background: var(--paper); }
.site-foot-links { color: #515154; }

.wechat-modal-backdrop { background: rgba(0,0,0,.48); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: content-fade .25s ease both; }
.wechat-modal-panel { border: 1px solid rgba(255,255,255,.75); border-radius: 28px; background: rgba(245,245,247,.93); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); animation: content-materialize .35s cubic-bezier(.22,1,.36,1) both; }
.wechat-modal-panel h2 { font-weight: 730; }
.wechat-modal-qr { border-radius: 18px; }
.wechat-modal-actions button { border-radius: 999px; }

@keyframes content-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes content-materialize { from { opacity: 0; transform: translateY(18px) scale(.96); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }

@media (max-width: 820px) {
  :root { --page: calc(100vw - 28px); }
  .site-head, .topbar { padding: 0 18px; }
  .page-hero, body > .hero { min-height: 500px; background-position: 62% center; }
  .page-hero-inner, body > .hero .hero-inner { padding: 92px 0 60px; }
  .content-section, body > main > section { padding: 56px 28px; border-radius: 26px; }
  .section-head, .answer-block, .split { grid-template-columns: 1fr; gap: 22px; }
  .plain-list { grid-template-columns: 1fr; }
  .plain-list article, .plain-list article + article { min-height: 0; padding: 24px; border-radius: 18px; }
  .plain-list h3 { margin-top: 26px; }
  .page-cta, .help { margin-bottom: 68px; padding: 34px 26px; border-radius: 26px; }
}

@media (max-width: 520px) {
  .site-nav a:nth-child(2), .site-nav a:nth-child(3), .top-links a:not(.wechat) { display: none; }
  .page-hero h1, body > .hero h1 { font-size: 48px; }
  .hero-lead, body > .hero p:last-child { font-size: 15px; }
  .content-section, body > main > section { margin: 14px 0; padding: 46px 20px; border-radius: 22px; }
  body > main > section .step-list { grid-template-columns: 1fr; }
  body > main > section .step, body > main > section .step + .step { min-height: 0; padding: 24px; border-radius: 18px; }
  .page-cta-actions, .help-actions { align-items: flex-start; flex-direction: column; }
  .wechat-modal-panel { border-radius: 26px 26px 16px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .wechat-modal-backdrop, .wechat-modal-panel { animation: none !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .site-head, .topbar { background: #171719; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .wechat-modal-panel { color: #1d1d1f; background: #f5f5f7; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  .site-head, .topbar { background: #000; border-bottom: 1px solid white; }
  .content-section, body > main > section, .plain-list article { border: 1px solid #1d1d1f; }
}