/* about / privacy / terms only (go-live P1 B4). The old site's layout for these pages (C:\jobai-website\assets\css\site.css:
   about-hero, stat-grid, panel, cta-card, page-head, legal, legal-toc, legal-body) in the new site's colours, fonts and
   card look: every colour is a token from shared/site.css or a value it already uses. */

/* one language at a time (the old site's rule); <html data-lang> is set from IS_EN in each page */
html[data-lang="zh"] [data-lang="en"], html[data-lang="en"] [data-lang="zh"] { display: none !important; }

/* the old names the page text still uses in inline styles */
main { --c-green: var(--grn); --f-display: var(--font-h); --f-mono: var(--font); --c-text-mute: var(--gry); --c-text-dim: var(--ink-3); }

.section-sm { padding: clamp(48px, 6vw, 80px) 0; }
.measure { max-width: 65ch; }
.h-display { font-family: var(--font-h); font-weight: 600; font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.15; margin: 0; letter-spacing: .01em; }
.metallic-gold { color: var(--or); }
.metallic-silver { color: var(--ink); }
.panel { position: relative; border-radius: 12px; border: 1px solid rgba(71, 255, 255, 0.55);
  background: linear-gradient(180deg, var(--pnl-a), var(--pnl-b));
  box-shadow: 0 0 0 1px rgba(71, 255, 255, 0.45), 0 0 16px rgba(71, 255, 255, 0.20), inset 0 1px 0 rgba(120, 255, 255, 0.12), 0 4px 16px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }

/* about */
.about-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero-viz { position: relative; display: grid; place-items: center; min-height: 380px; }
.hero-viz .legend-row { grid-template-columns: auto 1fr auto; padding: 14px 18px; border-radius: 12px; background: rgba(255, 255, 255, .025); border: 1px solid var(--bd); }
.hero-viz .legend-row .swatch { width: 10px; height: 40px; border-radius: 5px; }
.hero-viz .legend-row .meta b { display: block; font-family: var(--font-h); font-size: 17px; }
.hero-viz .legend-row .meta span { font-size: 14.5px; color: var(--ink-3); }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.stat { padding: 24px; border-radius: 12px; background: rgba(255, 255, 255, .025); border: 1px solid var(--bd); text-align: center; }
.stat .n { font-family: var(--font-h); font-weight: 600; font-size: 2.2rem; }
.stat .l { color: var(--ink-3); font-size: 0.9rem; margin-top: 4px; }
.cta-band { margin: clamp(40px, 6vw, 80px) 0; }
.cta-card { padding: clamp(36px, 6vw, 72px); border-radius: 12px; text-align: center; position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--pnl-a), var(--pnl-b)); border: 1px solid rgba(71, 255, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(71, 255, 255, 0.45), 0 0 16px rgba(71, 255, 255, 0.20), inset 0 1px 0 rgba(120, 255, 255, 0.12), 0 4px 16px rgba(0, 0, 0, 0.5); }
.cta-card .h-section { max-width: 22ch; margin-inline: auto; }
.cta-card p { margin: 16px auto 0; max-width: 50ch; }
.cta-card .btn-row { justify-content: center; margin-top: 32px; }

/* privacy / terms: contents on the left, the text on the right (one column under 1000 px, contents on top) */
.page-head { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(24px, 3vw, 40px); border-bottom: 1px solid var(--bd); }
.page-head .h-display { font-size: clamp(2rem, 4.5vw, 3.2rem); }
.page-head .updated { margin-top: 16px; font-size: 0.86rem; color: var(--gry); }
.legal { display: grid; grid-template-columns: 240px 1fr; gap: 48px; padding-top: 48px; padding-bottom: 80px; align-items: start; }
.legal-toc { position: sticky; top: calc(var(--nav-h) + 24px); }
.legal-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; border-left: 1px solid var(--bd); }
.legal-toc a { display: block; padding: 7px 16px; color: var(--ink-3); font-size: 0.9rem; text-decoration: none; border-left: 2px solid transparent; margin-left: -1px; transition: color 0.2s, border-color 0.2s; }
.legal-toc a:hover, .legal-toc a.active { color: var(--ink); border-left-color: var(--or); }
.legal-body { max-width: 760px; min-width: 0; }
.legal-body h2 { font-family: var(--font-h); font-weight: 600; font-size: 1.5rem; margin: 44px 0 0; padding-top: 12px; scroll-margin-top: calc(var(--nav-h) + 20px); }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { font-size: 1.12rem; margin-top: 26px; color: var(--ink); }
.legal-body p, .legal-body li { color: var(--ink-3); font-size: 0.98rem; line-height: 1.75; }
.legal-body p { margin: 14px 0 0; }
.legal-body ul, .legal-body ol { margin: 14px 0 0; padding-left: 22px; display: grid; gap: 8px; }
.legal-body strong { color: var(--ink); font-weight: 600; }
.legal-body a { color: var(--or); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }

@media (max-width: 1000px) {
  .hero-viz { min-height: 320px; order: -1; }
  .about-hero { grid-template-columns: 1fr; }
  .legal { grid-template-columns: 1fr; gap: 24px; }
  .legal-toc { position: static; }
}
/* P1 patch (review-3 10-13): phones hide the contents as the old site did, so the text starts on the first screen */
@media (max-width: 767.98px) { .legal-toc { display: none; } }
@media (max-width: 760px) {
  .hero-viz { min-height: 380px; }
  .stat-grid { grid-template-columns: 1fr; }
}