fix: scope trade-pro element baselines to body class (review I-1/I-2/I-3)

- body/h1-h4/p/a/:focus-visible/label/input/details/summary now under
  .sf-theme-trade-pro so they win the cascade over platform pro-base.css
  (cms typography actually applies now)
- same scoping inside the 620px mobile block to keep overrides effective
- data-reveal gated behind html.js + comment states Task 10 JS dependency

Co-Authored-By: Claude Code <noreply@anthropic.com>

themes/trade-pro/theme.css

@@ -270,7 +270,9 @@ html {
   scroll-behavior: smooth;
 }
 
-body {
+/* Element baselines are scoped to the theme body class so they win the cascade
+   over platform pro-base.css (same specificity would lose to later loads). */
+body.sf-theme-trade-pro {
   margin: 0;
   background: var(--sf-tp-color-surface-page);
   color: var(--sf-tp-color-text-primary);
@@ -281,10 +283,10 @@ body {
   overflow-x: hidden;
 }
 
-h1,
-h2,
-h3,
-h4 {
+.sf-theme-trade-pro h1,
+.sf-theme-trade-pro h2,
+.sf-theme-trade-pro h3,
+.sf-theme-trade-pro h4 {
   font-family: var(--sf-tp-font-family-heading);
   font-weight: var(--sf-tp-font-weight-bold);
   line-height: var(--sf-tp-line-height-tight);
@@ -293,21 +295,21 @@ h4 {
   text-wrap: balance;
 }
 
-h1 { font-size: var(--sf-tp-font-size-display); }
-h2 { font-size: var(--sf-tp-font-size-3xl); }
-h3 { font-size: var(--sf-tp-font-size-xl); }
-h4 { font-size: var(--sf-tp-font-size-lg); }
+.sf-theme-trade-pro h1 { font-size: var(--sf-tp-font-size-display); }
+.sf-theme-trade-pro h2 { font-size: var(--sf-tp-font-size-3xl); }
+.sf-theme-trade-pro h3 { font-size: var(--sf-tp-font-size-xl); }
+.sf-theme-trade-pro h4 { font-size: var(--sf-tp-font-size-lg); }
 
-p {
+.sf-theme-trade-pro p {
   margin: 0 0 var(--sf-tp-space-4);
 }
 
-a {
+.sf-theme-trade-pro a {
   color: inherit;
   text-decoration: none;
 }
 
-:focus-visible {
+.sf-theme-trade-pro :focus-visible {
   outline: var(--sf-tp-focus-outline-width) var(--sf-tp-focus-outline-style) var(--sf-tp-focus-outline-color);
   outline-offset: var(--sf-tp-focus-outline-offset);
 }
@@ -528,16 +530,16 @@ a {
 
 /* ── 表单（label 永远可见）── */
 
-label {
+.sf-theme-trade-pro label {
   display: block;
   font-weight: var(--sf-tp-font-weight-semibold);
   font-size: var(--sf-tp-font-size-sm);
   margin-block-end: var(--sf-tp-space-2);
 }
 
-input,
-select,
-textarea {
+.sf-theme-trade-pro input,
+.sf-theme-trade-pro select,
+.sf-theme-trade-pro textarea {
   width: 100%;
   border: var(--sf-tp-input-border-width) solid var(--sf-tp-color-border-default);
   border-radius: var(--sf-tp-input-border-radius);
@@ -547,37 +549,37 @@ textarea {
   color: inherit;
 }
 
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible {
+.sf-theme-trade-pro input:focus-visible,
+.sf-theme-trade-pro select:focus-visible,
+.sf-theme-trade-pro textarea:focus-visible {
   border-color: var(--sf-tp-color-border-brand);
 }
 
-textarea {
+.sf-theme-trade-pro textarea {
   min-height: 120px;
   resize: vertical;
 }
 
 /* ── FAQ 折叠（原生 details，静态可抓取）── */
 
-details {
+.sf-theme-trade-pro details {
   border: var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-subtle);
   border-radius: var(--sf-tp-radius-sm);
   margin-block-end: calc(var(--sf-tp-space-3) - var(--sf-tp-space-1));
   background: var(--sf-tp-color-surface-default);
 }
 
-summary {
+.sf-theme-trade-pro summary {
   cursor: pointer;
   padding: var(--sf-tp-space-4) calc(var(--sf-tp-space-4) + var(--sf-tp-space-1));
   font-weight: var(--sf-tp-font-weight-semibold);
 }
 
-details[open] summary {
+.sf-theme-trade-pro details[open] summary {
   border-block-end: var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-subtle);
 }
 
-details p {
+.sf-theme-trade-pro details p {
   padding: var(--sf-tp-space-4) calc(var(--sf-tp-space-4) + var(--sf-tp-space-1));
   color: var(--sf-tp-color-text-muted);
   margin: 0;
@@ -594,10 +596,11 @@ details p {
   color: var(--sf-tp-color-text-brand);
 }
 
-/* ── 滚动浮现动效（reduced-motion 与无 JS 时默认可见，渐进增强）── */
+/* ── 滚动浮现动效（渐进增强：仅在 JS 打开 html.js 且注册 IntersectionObserver
+     后生效——Task 10 随布局引入配套 JS；无 JS/reduced-motion 时默认可见）── */
 
 @media (prefers-reduced-motion: no-preference) {
-  [data-reveal] {
+  html.js [data-reveal] {
     opacity: 0;
     transform: translateY(calc(var(--sf-tp-space-3)));
     transition:
@@ -606,7 +609,7 @@ details p {
     transition-delay: calc(var(--sf-tp-duration-fast) * var(--reveal-i, 0));
   }
 
-  [data-reveal].is-visible {
+  html.js [data-reveal].is-visible {
     opacity: 1;
     transform: none;
   }
@@ -743,13 +746,13 @@ details p {
   .tabs { gap: 8px; margin-block-end: 16px; }
   .tab { min-width: auto; padding: 9px 14px; font-size: 11px; }
 
-  /* FAQ */
-  details { margin-block-end: 6px; }
-  summary { padding: 10px 12px; font-size: 12px; }
-  details p { padding: 0 12px 10px; font-size: 11px; }
+  /* FAQ（作用域同桌面基线，保持移动端覆写有效） */
+  .sf-theme-trade-pro details { margin-block-end: 6px; }
+  .sf-theme-trade-pro summary { padding: 10px 12px; font-size: 12px; }
+  .sf-theme-trade-pro details p { padding: 0 12px 10px; font-size: 11px; }
 
   /* 表单 */
-  input, select, textarea { padding: 8px 10px; font-size: 13px; }
-  label { font-size: 11px; }
-  textarea { min-height: 80px; }
+  .sf-theme-trade-pro input, .sf-theme-trade-pro select, .sf-theme-trade-pro textarea { padding: 8px 10px; font-size: 13px; }
+  .sf-theme-trade-pro label { font-size: 11px; }
+  .sf-theme-trade-pro textarea { min-height: 80px; }
 }