/* ==========================================================================
   ScoreMyAds (SMA) sales-page VARIANT — pass 1 tokens.
   Source: /Users/alainabulafya/dev/scoremyads/design.md §2 (tokens), §3
   (patterns), §4.1/§4.2 (header/hero anatomy), transposed from Tailwind +
   Framer Motion to vanilla CSS/JS for lp/app.js.

   Everything here is namespaced `.sma-` and scoped under the `.sma-root`
   wrapper renderSalesPageSMA() mounts — nothing in this file should ever
   affect the default renderSalesPage() (Tona/V3) markup. Only the
   @font-face blocks are unavoidably global (font resources, not styles);
   they cost nothing until a `.sma-*` class actually references the family,
   so the default variant's LCP is unaffected (no preload — see index.html).
   ========================================================================== */

/* ---- Fonts (self-hosted, /assets/fonts) — design.md §2.3 ---- */
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/dm-sans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/dm-sans-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/dm-sans-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/dm-sans-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ==========================================================================
   Tokens — scoped under .sma-root (design.md §2.1/§2.2)
   ========================================================================== */
.sma-root {
  --sma-bg: #ffffff;
  --sma-fg: #0f172a;
  --sma-muted: #64748b;
  --sma-border: #e2e8f0;
  --sma-radius: 10px;

  /* Google palette — the core of the visual identity */
  --sma-blue: #1a73e8;
  --sma-blue-dark-1: #1557b0;
  --sma-blue-dark-2: #0d47a1;
  --sma-red: #ea4335;
  --sma-yellow: #fbbc04;
  --sma-yellow-ink: #d39900; /* yellow text on white — #fbbc04 fails contrast */
  --sma-green: #34a853;

  --sma-purple: #8b5cf6;
  --sma-violet: #7c3aed;
  --sma-rose: #fb7185;
  --sma-amber: #fbbf24;
  --sma-sky: #0ea5e9;
  --sma-indigo: #6366f1;
  --sma-emerald: #059669;

  --sma-font-display: 'DM Sans', Inter, -apple-system, sans-serif;
  --sma-font-body: 'DM Sans', Inter, -apple-system, sans-serif;
  --sma-font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --sma-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --sma-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
  --sma-shadow-lg: 0 20px 45px -15px rgba(15, 23, 42, 0.18);
  --sma-shadow-primary-25: 0 10px 25px -6px rgba(26, 115, 232, 0.25);
  --sma-shadow-primary-30: 0 14px 32px -6px rgba(26, 115, 232, 0.3);

  --sma-ease: cubic-bezier(0.22, 1, 0.36, 1);

  background: var(--sma-bg);
  color: var(--sma-fg);
  font-family: var(--sma-font-body);
  position: relative;
}
.sma-root * { box-sizing: border-box; }
.sma-mono { font-family: var(--sma-font-mono); }

/* ---- Tinted-background helpers — design.md §2.2 "Règle des fonds teintés" ---- */
.sma-tint-red    { background: rgba(234, 67, 53, 0.08); }
.sma-tint-blue   { background: rgba(26, 115, 232, 0.08); }
.sma-tint-green  { background: rgba(52, 168, 83, 0.08); }
.sma-tint-yellow { background: rgba(251, 188, 4, 0.10); }
.sma-tint-red-border    { border: 1px solid rgba(234, 67, 53, 0.16); }
.sma-tint-blue-border   { border: 1px solid rgba(26, 115, 232, 0.16); }
.sma-tint-green-border  { border: 1px solid rgba(52, 168, 83, 0.16); }
.sma-tint-yellow-border { border: 1px solid rgba(251, 188, 4, 0.2); }

/* ==========================================================================
   Section rhythm — design.md §3.2
   ========================================================================== */
.sma-section { padding: 64px 20px; }
.sma-container { max-width: 1120px; margin: 0 auto; }
.sma-container-narrow { max-width: 760px; margin: 0 auto; }

/* ==========================================================================
   Section header pattern — design.md §3.3
   ========================================================================== */
.sma-eyebrow {
  display: block; font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; margin-bottom: 10px; text-align: center;
}
.sma-eyebrow-red { color: var(--sma-red); }
.sma-eyebrow-blue { color: var(--sma-blue); }
.sma-eyebrow-green { color: var(--sma-green); }
.sma-h2 { font-size: 28px; font-weight: 700; text-align: center; margin: 0; color: var(--sma-fg); }
.sma-h2-sub { margin-top: 12px; color: var(--sma-muted); font-size: 16px; text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; }

/* ==========================================================================
   Placeholder shells — pass 1 stand-ins for sections passes 2-3 build out.
   ========================================================================== */
.sma-placeholder {
  border: 1px dashed var(--sma-border); border-radius: 16px;
  padding: 40px 24px; text-align: center; color: var(--sma-muted);
  font-size: 14px; background: #f8fafc;
}

/* ==========================================================================
   Feature card — liseré coloré en haut — design.md §3.4
   ========================================================================== */
.sma-card {
  background: #fff; border-radius: 16px; border: 1px solid var(--sma-border);
  box-shadow: var(--sma-shadow-sm); overflow: hidden; transition: box-shadow 0.25s var(--sma-ease);
}
.sma-card:hover { box-shadow: var(--sma-shadow-md); }
.sma-card-body { padding: 24px; }
.sma-liseret { height: 4px; width: 100%; }
.sma-liseret-red    { background: linear-gradient(90deg, var(--sma-red), var(--sma-rose)); }
.sma-liseret-yellow { background: linear-gradient(90deg, var(--sma-yellow), var(--sma-amber)); }
.sma-liseret-blue   { background: linear-gradient(90deg, var(--sma-blue), var(--sma-indigo)); }
.sma-liseret-purple { background: linear-gradient(90deg, var(--sma-purple), var(--sma-violet)); }
.sma-liseret-sky    { background: linear-gradient(90deg, var(--sma-blue), var(--sma-sky)); }
.sma-liseret-solid-red    { background: var(--sma-red); }
.sma-liseret-tricolore    { background: linear-gradient(90deg, var(--sma-red), var(--sma-yellow), var(--sma-green)); }
.sma-liseret-green    { background: linear-gradient(90deg, var(--sma-green), var(--sma-emerald)); }

/* Generic scroll-reveal fade, reused by sections without a bespoke
   per-element animation (e.g. the difference panel). */
.sma-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--sma-ease), transform .6s var(--sma-ease); }
.sma-reveal.sma-in { opacity: 1; transform: none; }

/* ==========================================================================
   CTA button — design.md §3.5
   ========================================================================== */
.sma-cta {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--sma-blue); color: #fff; font-family: var(--sma-font-body);
  font-weight: 600; font-size: 15px; line-height: 1;
  padding: 15px 30px; border: 0; border-radius: 12px; cursor: pointer;
  box-shadow: var(--sma-shadow-primary-25);
  transition: box-shadow 0.25s var(--sma-ease), background 0.25s var(--sma-ease), transform 0.25s var(--sma-ease);
}
.sma-cta:hover { background: var(--sma-blue-dark-1); box-shadow: var(--sma-shadow-primary-30); }
.sma-cta .sma-cta-arrow { display: inline-block; transition: transform 0.2s var(--sma-ease); }
.sma-cta:hover .sma-cta-arrow { transform: translateX(3px); }
.sma-cta-xl { font-size: 16px; padding: 16px 34px; }
.sma-cta-pill { border-radius: 999px; padding: 10px 20px; font-size: 13px; }
.sma-cta-ping .sma-cta-halo {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: rgba(26, 115, 232, 0.35); animation: sma-ping 3s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes sma-ping {
  0% { transform: scale(1); opacity: 0.6; }
  75%, 100% { transform: scale(1.7); opacity: 0; }
}

/* ==========================================================================
   Pills / badges — design.md §3.6
   ========================================================================== */
.sma-pill {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500;
  padding: 7px 14px; border-radius: 999px; background: rgba(26, 115, 232, 0.08);
  color: var(--sma-blue); border: 1px solid rgba(26, 115, 232, 0.16);
}
.sma-pill-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--sma-blue); animation: sma-pulse 2s ease-in-out infinite; }
@keyframes sma-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.sma-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 6px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.03em; }
.sma-badge-red    { background: rgba(234, 67, 53, 0.1); color: var(--sma-red); }
.sma-badge-yellow { background: rgba(251, 188, 4, 0.14); color: var(--sma-yellow-ink); }
.sma-badge-blue   { background: rgba(26, 115, 232, 0.1); color: var(--sma-blue); }
.sma-badge-green  { background: rgba(52, 168, 83, 0.1); color: var(--sma-green); }
.sma-tag { font-size: 9px; font-weight: 700; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; letter-spacing: 0.04em; }
.sma-tag-critical { background: rgba(234, 67, 53, 0.14); color: var(--sma-red); }
.sma-tag-warning  { background: rgba(251, 188, 4, 0.18); color: var(--sma-yellow-ink); }
.sma-tag-info     { background: rgba(26, 115, 232, 0.12); color: var(--sma-blue); }

/* ==========================================================================
   Score color helper — mirrored 1:1 in JS as smaScoreColor(score):
   score < 40 → red, < 65 → yellow-ink, else → green.
   ========================================================================== */
.sma-score-red    { color: var(--sma-red) !important; }
.sma-score-yellow { color: var(--sma-yellow-ink) !important; }
.sma-score-green  { color: var(--sma-green) !important; }

/* ==========================================================================
   4.2 Hero — design.md §4.2
   ========================================================================== */
.sma-hero {
  position: relative; overflow: hidden;
  /* Top padding was 128px to clear the old fixed .sma-header (2026-07-11
     item 1 removed the header entirely — same fix already applied to the
     default variant's .tona-hero, see styles.css). 96px gives the hero
     breathing room now that the page opens flush against the browser
     chrome, with no header height to reserve space for. */
  padding: 96px 20px 72px;
  background:
    radial-gradient(1px 1px at center, #e5e7eb 1px, transparent 1px),
    linear-gradient(135deg, rgba(219, 234, 254, 0.8) 0%, #ffffff 55%, rgba(220, 252, 231, 0.4) 100%);
  background-size: 20px 20px, cover;
}
.sma-hero-grid {
  position: relative; z-index: 1;
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center;
}
@media (min-width: 1024px) {
  .sma-hero-grid { grid-template-columns: 1fr 1fr; gap: 64px; }
}
.sma-hero-copy { opacity: 0; transform: translateY(30px); transition: opacity 0.7s var(--sma-ease), transform 0.7s var(--sma-ease); }
.sma-hero-copy.sma-in { opacity: 1; transform: none; }
.sma-hero-h1 {
  margin: 18px 0 0; font-size: 34px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em;
  font-family: var(--sma-font-display);
}
@media (min-width: 640px) { .sma-hero-h1 { font-size: 42px; } }
@media (min-width: 1024px) { .sma-hero-h1 { font-size: 56px; } }
.sma-text-red { color: var(--sma-red); }
.sma-text-blue { color: var(--sma-blue); }
.sma-hero-sub { margin: 20px 0 0; font-size: 17px; color: var(--sma-muted); line-height: 1.6; max-width: 520px; }
.sma-hero-cta-row { margin-top: 30px; }
.sma-hero-reassure {
  margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
  font-size: 13.5px; color: var(--sma-muted);
}
.sma-hero-reassure .sma-stars { color: var(--sma-yellow); letter-spacing: 1px; }
.sma-hero-reassure span.sma-sep { color: var(--sma-border); }

.sma-hero-illustration { opacity: 0; transform: scale(0.92); transition: opacity 0.8s var(--sma-ease) 0.1s, transform 0.8s var(--sma-ease) 0.1s; max-width: 480px; margin: 0 auto; width: 100%; position: relative; }
.sma-hero-illustration.sma-in { opacity: 1; transform: none; }

/* ---- macOS browser mockup — design.md §3.10 ---- */
.sma-browser { background: #fff; border-radius: 16px; box-shadow: var(--sma-shadow-lg); border: 1px solid var(--sma-border); overflow: hidden; }
.sma-browser-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #f8fafc; border-bottom: 1px solid var(--sma-border); }
.sma-browser-dots { display: flex; gap: 6px; }
.sma-browser-dot { width: 10px; height: 10px; border-radius: 999px; }
.sma-browser-dot-red { background: var(--sma-red); }
.sma-browser-dot-yellow { background: var(--sma-yellow); }
.sma-browser-dot-green { background: var(--sma-green); }
.sma-browser-url {
  flex: 1; background: #fff; border: 1px solid var(--sma-border); border-radius: 6px; height: 24px;
  display: flex; align-items: center; gap: 6px; padding: 0 10px; font-size: 11px; color: #64748b;
}
.sma-browser-body { padding: 18px; transition: opacity 0.35s var(--sma-ease); }
.sma-browser-body.sma-heal-resetting { opacity: 0.15; }
/* Kills every transition under the browser body while the healing loop
   snaps elements back to their phase-1 "before" look (always applied
   only while sma-heal-resetting has the body faded down, so the snap is
   never actually seen) — see resetToBefore() in app.js. */
.sma-heal-noanim, .sma-heal-noanim * { transition: none !important; }

.sma-browser-title { font-family: var(--sma-font-display); font-weight: 600; font-size: 13px; color: var(--sma-fg); margin: 0 0 14px; }

/* ---- HeroScoreGauge — design.md §3.8 ---- */
.sma-gauge-wrap { display: flex; align-items: center; gap: 16px; }
.sma-gauge { position: relative; width: 108px; height: 108px; flex-shrink: 0; }
.sma-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sma-gauge-track { fill: none; stroke: #f1f3f4; }
.sma-gauge-value { fill: none; stroke-linecap: round; transition: stroke 0.3s var(--sma-ease); }
.sma-gauge-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sma-gauge-num { font-size: 26px; font-weight: 700; line-height: 1; font-family: var(--sma-font-display); }
.sma-gauge-max { font-size: 10px; color: var(--sma-muted); margin-top: 2px; }
.sma-gauge-verdict {
  font-size: 13px; font-weight: 600; color: var(--sma-red); display: flex; align-items: center; gap: 6px;
  opacity: 0; transition: opacity 0.5s var(--sma-ease), color 0.3s var(--sma-ease);
}
.sma-gauge-verdict.sma-in { opacity: 1; }

/* ---- Dimension bars — design.md §3.9 (EXACTLY 3: Titles/Descriptions/
   Highlights — pass 2 drops pass-1's padding to 6 bars). Label width
   widened from 84->104px so "Descriptions" never truncates. ---- */
.sma-dimbars { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.sma-dimbar { display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateX(-8px); transition: opacity 0.4s var(--sma-ease), transform 0.4s var(--sma-ease); }
.sma-dimbar.sma-in { opacity: 1; transform: none; }
.sma-dimbar-label { font-size: 10px; color: var(--sma-muted); width: 104px; flex-shrink: 0; white-space: nowrap; }
.sma-dimbar-track { flex: 1; height: 6px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.sma-dimbar-fill { height: 100%; width: 0; border-radius: 999px; transition: width 0.8s var(--sma-ease) 0.2s, background 0.4s var(--sma-ease); }
.sma-dimbar.sma-in .sma-dimbar-fill { width: var(--sma-dimbar-pct, 0%); }
.sma-dimbar-score { font-size: 10px; font-weight: 700; width: 26px; text-align: right; flex-shrink: 0; transition: color 0.4s var(--sma-ease); }

/* ---- Issue rows — design.md §4.2 point 4: EXACTLY 3 real rows, no
   separate "Top issues detected" title above them and no second blurred
   "+N more" list underneath — the rows themselves ARE the single list.
   Static severity color/icon (no more REWRITE-phase flip-to-fixed —
   2026-07-11 pass 3 dropped the rewrite/result phase from the hero). ---- */
.sma-issuerow {
  display: flex; align-items: center; gap: 8px; background: #f8fafc; border-radius: 8px;
  padding: 7px 10px; margin-bottom: 6px; opacity: 0; transform: translateX(-10px);
  transition: opacity 0.4s var(--sma-ease), transform 0.4s var(--sma-ease);
}
.sma-issuerow.sma-in { opacity: 1; transform: none; }
.sma-issuerow-icon {
  width: 20px; height: 20px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; flex-shrink: 0;
}
.sma-issuerow-label { font-size: 11px; font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sma-issuerow-value { font-size: 11px; font-weight: 700; flex-shrink: 0; }

/* ---- Floating card — design.md §4.2 last bullet, hidden below lg.
   Only "Content gaps" now (ACT 1 only) — the old "Score after rewrite"
   left card is gone with the rewrite/result phase. ---- */
.sma-float-card {
  display: none; position: absolute; background: #fff; border-radius: 12px; border: 1px solid var(--sma-border);
  box-shadow: var(--sma-shadow-md); padding: 12px 14px; opacity: 0; transition: opacity 0.5s var(--sma-ease), transform 0.5s var(--sma-ease);
}
.sma-float-card.sma-in { opacity: 1; transform: none; }
@media (min-width: 1024px) {
  .sma-float-card { display: block; }
  .sma-float-card-right { right: -18px; top: 44px; width: 178px; transform: translateX(20px); }
  .sma-float-card-right.sma-in { transform: translateX(0); }
}

/* ---- ACT 2 — Google Shopping scene (2026-07-11 pass 3, coordinator
   scope amendment: moved out of the scanner section into the hero loop).
   .sma-act1-body/.sma-shop-body are mutually exclusive; .sma-browser-body
   toggles which one shows via the .sma-act2 modifier class. ---- */
.sma-shop-body { display: none; }
.sma-browser-body.sma-act2 .sma-act1-body { display: none; }
.sma-browser-body.sma-act2 .sma-shop-body { display: block; }
.sma-shop-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--sma-muted); margin-bottom: 10px; }
.sma-shop-searchbar {
  display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--sma-border);
  border-radius: 999px; padding: 8px 14px; box-shadow: var(--sma-shadow-sm); font-size: 12.5px; margin-bottom: 12px;
}
.sma-shop-searchicon { font-size: 12px; flex-shrink: 0; }
.sma-shop-query-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--sma-fg); min-height: 1em; }
.sma-shop-cursor { display: inline-block; width: 2px; height: 13px; background: var(--sma-blue); animation: sma-caret .8s step-end infinite; margin-left: 1px; flex-shrink: 0; vertical-align: middle; }
.sma-shop-results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.sma-shop-card { border-radius: 9px; padding: 6px; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--sma-ease), transform .4s var(--sma-ease); }
.sma-shop-results.sma-in .sma-shop-card { opacity: 1; transform: none; }
.sma-shop-results.sma-in .sma-shop-card:nth-child(1) { transition-delay: .05s; }
.sma-shop-results.sma-in .sma-shop-card:nth-child(2) { transition-delay: .15s; }
.sma-shop-results.sma-in .sma-shop-card:nth-child(3) { transition-delay: .25s; }
.sma-shop-results.sma-in .sma-shop-card:nth-child(4) { transition-delay: .35s; }
.sma-shop-card-ghost { background: #f8fafc; border: 1px solid var(--sma-border); }
.sma-shop-card-img { width: 100%; aspect-ratio: 1 / 1; border-radius: 5px; background: #e2e8f0; margin-bottom: 5px; }
.sma-shop-card-line { height: 4px; border-radius: 999px; background: #e2e8f0; margin-bottom: 4px; width: 82%; }
.sma-shop-card-line-sm { width: 48%; }
.sma-shop-card-empty { border: 1.5px dashed var(--sma-red); background: rgba(234, 67, 53, .04); text-align: center; }
.sma-shop-card-img-real { background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.sma-shop-card-img-real img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: .55; display: block; }
.sma-shop-card-empty-label { font-size: 7.5px; color: var(--sma-red); font-weight: 700; line-height: 1.25; margin-top: 2px; }
.sma-float-label { font-size: 10px; color: var(--sma-muted); margin-bottom: 3px; }
.sma-float-value { font-size: 20px; font-weight: 900; font-family: var(--sma-font-display); }
.sma-float-before { text-decoration: line-through; color: var(--sma-muted); font-size: 13px; margin-right: 6px; }

/* ==========================================================================
   SMA full-page pass (2026-07-11) — sections below the hero, in page order:
   diagnostic, why-matters, difference, deliverable (masterpiece), feature
   cards, advantages, how-it-works, catalog+bump, checkout overrides, faq,
   footer CTA. design.md §4.3-§4.11, transposed to vanilla CSS.
   ========================================================================== */

/* ---- 4.3 THE SCANNER (2026-07-11 pass 3 narrative restructure) — real
   product sheet, one-shot scan-line sweep, red field callouts, verdict
   banner. Nothing green anywhere in this section (the payoff lives in
   the fix section further down the page — smaSectionDifference). ---- */
.sma-scan-livewrap { text-align: center; margin: 4px 0 26px; }
.sma-scan-sheet { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--sma-border); border-radius: 16px; box-shadow: var(--sma-shadow-md); padding: 22px; }
.sma-scan-scanline {
  position: absolute; left: 0; right: 0; top: -4%; height: 18px; z-index: 5; pointer-events: none;
  background: linear-gradient(180deg, rgba(26, 115, 232, 0), rgba(26, 115, 232, .38), rgba(26, 115, 232, 0));
  opacity: 0; transition: top 1.8s var(--sma-ease), opacity .3s var(--sma-ease);
}
.sma-scan-sheet.sma-in .sma-scan-scanline { top: 104%; opacity: 1; }
.sma-scan-grid { display: grid; grid-template-columns: 1fr; gap: 20px; position: relative; z-index: 1; }
@media (min-width: 820px) { .sma-scan-grid { grid-template-columns: 220px 1fr; align-items: start; } }
.sma-scan-img { border-radius: 12px; overflow: hidden; border: 1px solid var(--sma-border); background: #f8fafc; }
.sma-scan-img img { width: 100%; height: 200px; object-fit: cover; display: block; }
@media (min-width: 820px) { .sma-scan-img img { height: 100%; min-height: 280px; } }
.sma-scan-fields { display: flex; flex-direction: column; gap: 24px; }
.sma-scan-field-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sma-muted); margin-bottom: 4px; }
.sma-scan-field-value { font-size: 13.5px; line-height: 1.5; color: var(--sma-fg); }
.sma-scan-clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sma-scan-callout {
  position: relative; margin-top: 10px; margin-left: 16px; background: #fff; border: 1px solid var(--sma-border);
  border-left: 3px solid var(--sma-red); border-radius: 10px; padding: 10px 14px; box-shadow: var(--sma-shadow-sm);
  font-size: 12.5px; color: #7f1d1d; opacity: 0; transform: translateY(8px);
  transition: opacity .45s var(--sma-ease), transform .45s var(--sma-ease);
}
.sma-scan-callout p { margin: 0 0 4px; }
.sma-scan-callout p:last-child { margin-bottom: 0; }
.sma-scan-callout::before { content: ''; position: absolute; left: 8px; top: -10px; width: 2px; height: 10px; background: var(--sma-red); }
.sma-scan-callout::after { content: ''; position: absolute; left: 4px; top: -14px; width: 8px; height: 8px; border-radius: 999px; background: var(--sma-red); }
.sma-scan-callout-sub { color: var(--sma-muted) !important; font-size: 11.5px; }
.sma-scan-sheet.sma-in .sma-scan-callout { opacity: 1; transform: none; }
.sma-scan-sheet.sma-in .sma-scan-callout-title { transition-delay: .3s; }
.sma-scan-sheet.sma-in .sma-scan-callout-desc { transition-delay: .9s; }
.sma-scan-sheet.sma-in .sma-scan-callout-highlights { transition-delay: 1.5s; }
.sma-scan-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sma-scan-pill { font-size: 11px; background: rgba(234, 67, 53, .08); color: var(--sma-red); padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(234, 67, 53, .16); }

.sma-verdict-banner { margin-top: 28px; background: rgba(234, 67, 53, .05); border: 1px solid rgba(234, 67, 53, .14); border-radius: 16px; padding: 20px 22px; text-align: center; }
.sma-verdict-banner.sma-verdict-rare { background: rgba(52, 168, 83, .06); border-color: rgba(52, 168, 83, .18); }
.sma-verdict-headline { margin: 0 0 14px; font-size: 15px; font-weight: 700; color: #7f1d1d; }
.sma-verdict-banner.sma-verdict-rare .sma-verdict-headline { color: #14532d; }
.sma-verdict-pills { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.sma-verdict-pill { font-size: 11.5px; background: #fff; border: 1px solid var(--sma-border); color: var(--sma-fg); padding: 5px 11px; border-radius: 999px; }
.sma-verdict-pill-miss { color: var(--sma-muted); text-decoration: line-through; opacity: .6; background: #f8fafc; }

.sma-scan-closing { text-align: center; margin-top: 22px; font-size: 14.5px; color: var(--sma-muted); font-style: italic; }

/* ---- 4.3 (spirit) "Why it matters" — mirrored flows + VS disc ---- */
.sma-vs-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; margin-top: 12px; }
@media (max-width: 760px) { .sma-vs-row { grid-template-columns: 1fr; justify-items: center; } }
.sma-vs-block { text-align: center; }
.sma-vs-headline { font-size: 14px; font-weight: 700; margin: 0 0 20px; }
.sma-vs-headline.sma-vs-bad { color: var(--sma-red); }
.sma-vs-headline.sma-vs-good { color: var(--sma-green); }
.sma-vs-flow { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sma-vs-col { display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0; transform: translateY(10px); transition: opacity .45s var(--sma-ease), transform .45s var(--sma-ease); }
.sma-vs-row.sma-in .sma-vs-col { opacity: 1; transform: none; }
.sma-vs-row.sma-in .sma-vs-block:first-child .sma-vs-col:nth-child(1) { transition-delay: 0s; }
.sma-vs-row.sma-in .sma-vs-block:first-child .sma-vs-col:nth-child(3) { transition-delay: .12s; }
.sma-vs-row.sma-in .sma-vs-block:first-child .sma-vs-col:nth-child(5) { transition-delay: .24s; }
.sma-vs-row.sma-in .sma-vs-block:last-child .sma-vs-col:nth-child(1) { transition-delay: .36s; }
.sma-vs-row.sma-in .sma-vs-block:last-child .sma-vs-col:nth-child(3) { transition-delay: .48s; }
.sma-vs-row.sma-in .sma-vs-block:last-child .sma-vs-col:nth-child(5) { transition-delay: .6s; }
.sma-vs-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.sma-vs-caption { font-size: 12px; color: var(--sma-muted); max-width: 170px; }
.sma-vs-arrow { color: var(--sma-border); font-size: 20px; line-height: 1; }
.sma-vs-disc {
  justify-self: center; width: 46px; height: 46px; border-radius: 999px; background: var(--sma-fg);
  color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px;
  box-shadow: var(--sma-shadow-md); flex-shrink: 0;
}

/* ---- 4.4/§4.7 "See the difference" (2026-07-11 pass 3: narrative
   payoff for the scanner section above — opener line naming the same
   product, added-word highlights inline, per-factor score deltas,
   generalization closer). ---- */
.sma-diff-opener { text-align: center; font-size: 16px; margin: 4px 0 8px; color: var(--sma-fg); }
.sma-diff-panel { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 12px; position: relative; }
@media (min-width: 900px) { .sma-diff-panel { grid-template-columns: 260px 1fr; align-items: start; } }
.sma-diff-img { border-radius: 16px; overflow: hidden; border: 1px solid var(--sma-border); box-shadow: var(--sma-shadow-md); background: #fff; }
.sma-diff-img img { width: 100%; height: 220px; object-fit: cover; display: block; }
.sma-diff-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; position: relative; }
@media (max-width: 640px) { .sma-diff-cols { grid-template-columns: 1fr; } }
.sma-diff-col { border-radius: 14px; padding: 16px; }
.sma-diff-col.sma-diff-before { background: rgba(234, 67, 53, .05); border: 1px solid rgba(234, 67, 53, .14); }
.sma-diff-col.sma-diff-after { background: rgba(52, 168, 83, .06); border: 1px solid rgba(52, 168, 83, .16); }
.sma-diff-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.sma-diff-head.sma-diff-before-h { color: var(--sma-red); }
.sma-diff-head.sma-diff-after-h { color: var(--sma-green); }
.sma-diff-field { margin-bottom: 10px; }
.sma-diff-field:last-child { margin-bottom: 0; }
.sma-diff-label { font-size: 9px; font-weight: 700; text-transform: uppercase; color: var(--sma-muted); letter-spacing: .04em; margin-bottom: 3px; }
.sma-diff-val { font-size: 12.5px; line-height: 1.45; }
.sma-diff-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.sma-diff-chip { font-size: 11px; background: #fff; border: 1px solid rgba(52, 168, 83, .25); color: #14532d; padding: 3px 9px; border-radius: 999px; }
.sma-diff-disc {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px;
  border-radius: 999px; background: var(--sma-blue); color: #fff; align-items: center; justify-content: center;
  font-size: 16px; box-shadow: var(--sma-shadow-md); display: none;
}
@media (min-width: 640px) { .sma-diff-disc { display: flex; } }
.sma-rewrite-list { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.sma-rewrite-item { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.sma-rewrite-badge {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: rgba(139, 92, 246, .1);
  color: var(--sma-violet); font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
mark.sma-diff-add {
  background: rgba(52, 168, 83, .16); color: #14532d; border-radius: 4px; padding: 0 3px;
  font-style: normal; text-decoration: underline; text-decoration-color: rgba(52, 168, 83, .5);
}
.sma-diff-scores { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 24px; }
.sma-diff-score { background: #fff; border: 1px solid var(--sma-border); border-radius: 12px; padding: 10px 16px; text-align: center; box-shadow: var(--sma-shadow-sm); }
.sma-diff-score-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--sma-muted); margin-bottom: 4px; }
.sma-diff-score-val { font-size: 14px; font-weight: 700; }
.sma-diff-closer { text-align: center; margin-top: 28px; }

/* ==========================================================================
   THE DELIVERABLE — priority-1 masterpiece section.
   ========================================================================== */
.sma-deliv-grid { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; margin-top: 8px; }
@media (min-width: 980px) { .sma-deliv-grid { grid-template-columns: .85fr 1.15fr; } }
.sma-deliv-checklist { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 20px; }
.sma-deliv-checkline { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.sma-deliv-check {
  width: 20px; height: 20px; border-radius: 999px; background: rgba(52, 168, 83, .14); color: var(--sma-green);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800;
}
.sma-format-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.sma-format-chip {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; background: #fff;
  border: 1px solid var(--sma-border); border-radius: 10px; padding: 7px 12px; box-shadow: var(--sma-shadow-sm);
}
.sma-format-icon { width: 18px; height: 18px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 800; color: #fff; flex-shrink: 0; }

.sma-deliv-stage { position: relative; padding: 44px 14px 14px; }
.sma-deliv-glow {
  position: absolute; inset: -10px -10px auto -10px; height: 340px; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(26, 115, 232, .18), transparent 72%);
}
.sma-stack-sheet {
  position: absolute; top: 44px; left: 50%; width: 86%; height: 82%; background: #fff; border-radius: 16px;
  border: 1px solid var(--sma-border); box-shadow: var(--sma-shadow-md);
}
.sma-stack-sheet-1 { transform: translateX(-50%) rotate(-5deg) translateY(14px); z-index: 1; opacity: .7; }
.sma-stack-sheet-2 { transform: translateX(-50%) rotate(3.5deg) translateY(8px); z-index: 2; opacity: .88; }

.sma-tabwin { position: relative; z-index: 3; background: #fff; border-radius: 16px; border: 1px solid var(--sma-border); box-shadow: var(--sma-shadow-lg); overflow: hidden; }
.sma-tabwin-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #f8fafc; border-bottom: 1px solid var(--sma-border); font-size: 12px; color: var(--sma-muted); }
.sma-tabwin-bar b { color: var(--sma-fg); font-weight: 600; }
.sma-tabbar { display: flex; gap: 4px; padding: 8px 10px 0; border-bottom: 1px solid var(--sma-border); background: #fff; }
.sma-tabbtn { border: 0; background: transparent; font-size: 12.5px; font-weight: 600; color: var(--sma-muted); padding: 9px 14px; border-radius: 8px 8px 0 0; cursor: pointer; }
.sma-tabbtn.sma-tabbtn-active { color: var(--sma-blue); background: rgba(26, 115, 232, .06); }
.sma-tabbody { padding: 4px 0 8px; max-height: 270px; overflow: auto; }
.sma-tabrow {
  display: grid; grid-template-columns: 1fr 1.6fr 1.6fr 56px; gap: 8px; padding: 8px 14px; font-size: 11px;
  border-bottom: 1px solid #f1f5f9; align-items: center; opacity: 0; transform: translateX(-8px);
  transition: opacity .35s var(--sma-ease), transform .35s var(--sma-ease);
}
.sma-tabbody.sma-in .sma-tabrow { opacity: 1; transform: none; transition-delay: calc(var(--sma-i, 0) * 90ms); }
.sma-tabrow.sma-tabrow-head { font-weight: 700; color: var(--sma-muted); background: #f8fafc; opacity: 1 !important; transform: none !important; }
.sma-tc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sma-tc-mono { font-family: var(--sma-font-mono); color: var(--sma-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sma-tc-new { color: #14532d; font-weight: 500; }
.sma-tc-score { text-align: right; font-weight: 800; color: var(--sma-green); font-variant-numeric: tabular-nums; }
.sma-tc-chips { display: flex; flex-wrap: wrap; gap: 4px; grid-column: 2 / -1; }
.sma-tc-chip-mini { font-size: 9.5px; background: rgba(52, 168, 83, .08); color: #14532d; padding: 2px 7px; border-radius: 999px; }
.sma-tabrow-more { grid-template-columns: 1fr; }
.sma-lockpill { font-size: 11px; color: var(--sma-muted); font-family: var(--sma-font-mono); }

.sma-annot-wrap { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.sma-annot-pill {
  position: absolute; background: #fff; border: 1px solid var(--sma-border); box-shadow: var(--sma-shadow-md);
  border-radius: 999px; padding: 7px 13px; font-size: 11.5px; font-weight: 600; opacity: 0; transform: scale(.7);
  transition: opacity .4s var(--sma-ease), transform .4s var(--sma-ease); white-space: nowrap;
}
.sma-annot-pill.sma-in { opacity: 1; transform: scale(1); }
.sma-annot-1 { top: -8px; left: -10px; transition-delay: .2s; }
.sma-annot-2 { top: -8px; right: -14px; transition-delay: .4s; }
.sma-annot-3 { bottom: -10px; left: 30px; transition-delay: .6s; }
@media (max-width: 760px) {
  /* position:relative (not static) — a static box always paints behind the
     absolutely-positioned stack-sheet decoys regardless of z-index/DOM
     order; relative keeps it in normal flow (inset:0 is a no-op offset)
     while staying a positioned element so z-index still wins. */
  .sma-annot-wrap { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; pointer-events: auto; z-index: 5; }
  .sma-annot-pill { position: static; transform: none !important; }
}

/* ---- Feature cards — 5 crafted animated illustrations ---- */
.sma-feat-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 10px; }
@media (min-width: 700px) { .sma-feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sma-feat-grid { grid-template-columns: repeat(3, 1fr); } }
.sma-feat-illu {
  height: 132px; border-radius: 12px; background: #f8fafc; border: 1px solid var(--sma-border); margin-bottom: 14px;
  padding: 14px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 8px;
}
.sma-feat-top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.sma-feat-icon { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: #fff; flex-shrink: 0; }
.sma-feat-title { font-size: 15px; font-weight: 700; }
.sma-feat-caps { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.sma-feat-caps li { font-size: 12px; color: var(--sma-muted); }
.sma-feat-caps li b { color: var(--sma-green); }

.sma-illu-chip { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--sma-border); border-radius: 999px; padding: 8px 12px; font-size: 12px; max-width: 100%; }
.sma-illu-chip-text { white-space: nowrap; overflow: hidden; }
.sma-illu-cursor { display: inline-block; width: 2px; background: var(--sma-blue); animation: sma-caret .8s step-end infinite; margin-left: 1px; }
@keyframes sma-caret { 50% { opacity: 0; } }
.sma-illu-scorebadge { font-size: 10px; font-weight: 800; background: rgba(52, 168, 83, .12); color: var(--sma-green); border-radius: 999px; padding: 3px 8px; flex-shrink: 0; }

.sma-illu-docline { height: 6px; border-radius: 999px; background: rgba(26, 115, 232, .18); width: 0; transition: width 1s var(--sma-ease); margin-bottom: 7px; }
.sma-feat-illu.sma-in .sma-illu-docline:nth-child(1) { width: 92%; transition-delay: .05s; }
.sma-feat-illu.sma-in .sma-illu-docline:nth-child(2) { width: 100%; transition-delay: .2s; }
.sma-feat-illu.sma-in .sma-illu-docline:nth-child(3) { width: 68%; transition-delay: .35s; }
.sma-illu-wordcount { font-size: 11px; color: var(--sma-muted); margin-top: 4px; }

.sma-illu-chiprow { display: flex; gap: 6px; flex-wrap: wrap; }
.sma-illu-numchip {
  width: 26px; height: 26px; border-radius: 999px; background: #eef2f7; color: #94a3b8; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; opacity: .5; transform: scale(.8);
  transition: opacity .35s var(--sma-ease), transform .35s var(--sma-ease), background .35s var(--sma-ease), color .35s var(--sma-ease);
}
.sma-feat-illu.sma-in .sma-illu-numchip { opacity: 1; transform: scale(1); background: rgba(251, 188, 4, .18); color: #8a6100; }
.sma-feat-illu.sma-in .sma-illu-numchip:nth-child(1) { transition-delay: .05s; }
.sma-feat-illu.sma-in .sma-illu-numchip:nth-child(2) { transition-delay: .18s; }
.sma-feat-illu.sma-in .sma-illu-numchip:nth-child(3) { transition-delay: .31s; }
.sma-feat-illu.sma-in .sma-illu-numchip:nth-child(4) { transition-delay: .44s; }
.sma-feat-illu.sma-in .sma-illu-numchip:nth-child(5) { transition-delay: .57s; }

.sma-illu-fileswrap { display: flex; gap: 14px; align-items: center; justify-content: center; perspective: 400px; }
.sma-illu-filecard {
  width: 52px; height: 64px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 11px; box-shadow: var(--sma-shadow-sm); transform: rotateY(90deg); opacity: 0;
  transition: transform .5s var(--sma-ease), opacity .5s var(--sma-ease);
}
.sma-feat-illu.sma-in .sma-illu-filecard { transform: rotateY(0); opacity: 1; }
.sma-feat-illu.sma-in .sma-illu-filecard:nth-child(2) { transition-delay: .18s; }

.sma-illu-envelope { font-size: 30px; text-align: center; }
.sma-illu-progress-track { height: 6px; background: #e2e8f0; border-radius: 999px; overflow: hidden; margin-top: 8px; }
.sma-illu-progress-fill { height: 100%; width: 0%; background: var(--sma-green); transition: width 1.4s var(--sma-ease) .2s; }
.sma-feat-illu.sma-in .sma-illu-progress-fill { width: 96%; }
.sma-illu-deliverylabel { font-size: 11px; color: var(--sma-muted); text-align: center; margin-top: 6px; }

/* ---- Advantages — before/after mini-stats ---- */
.sma-adv-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 10px; }
@media (min-width: 860px) { .sma-adv-grid { grid-template-columns: repeat(3, 1fr); } }
.sma-adv-tile { background: #fff; border: 1px solid var(--sma-border); border-radius: 16px; padding: 22px; text-align: center; box-shadow: var(--sma-shadow-sm); }
.sma-adv-label { font-size: 12.5px; color: var(--sma-muted); font-weight: 600; margin-bottom: 14px; }
.sma-adv-row { display: flex; align-items: center; justify-content: center; gap: 10px; }
.sma-adv-box { flex: 1; border-radius: 12px; padding: 12px 6px; opacity: 0; transform: scale(.85); transition: opacity .4s var(--sma-ease), transform .4s var(--sma-ease); }
.sma-adv-tile.sma-in .sma-adv-box { opacity: 1; transform: scale(1); }
.sma-adv-tile.sma-in .sma-adv-box.sma-adv-after { transition-delay: .15s; }
.sma-adv-box.sma-adv-before { background: rgba(234, 67, 53, .07); }
.sma-adv-box.sma-adv-after { background: rgba(52, 168, 83, .08); }
.sma-adv-num { font-size: 26px; font-weight: 900; font-family: var(--sma-font-display); }
.sma-adv-num.sma-adv-red { color: var(--sma-red); }
.sma-adv-num.sma-adv-green { color: var(--sma-green); }
.sma-adv-sub { font-size: 10.5px; color: var(--sma-muted); margin-top: 2px; }
.sma-adv-arrow { color: var(--sma-muted); font-size: 18px; flex-shrink: 0; }
.sma-adv-pill {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; background: rgba(52, 168, 83, .12);
  color: var(--sma-green); font-size: 12px; font-weight: 700; padding: 6px 13px; border-radius: 999px;
  opacity: 0; transform: scale(.7); transition: opacity .3s var(--sma-ease) .5s, transform .3s var(--sma-ease) .5s;
}
.sma-adv-tile.sma-in .sma-adv-pill { opacity: 1; transform: scale(1); }

/* ---- How it works — 4 numbered squares + 4 coded animations ---- */
.sma-hiw-grid { display: grid; grid-template-columns: 1fr; gap: 28px; position: relative; margin-top: 16px; }
@media (min-width: 760px) { .sma-hiw-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .sma-hiw-grid { grid-template-columns: repeat(4, 1fr); } }
.sma-hiw-item { text-align: center; opacity: 0; transform: translateY(20px); transition: opacity .5s var(--sma-ease), transform .5s var(--sma-ease); }
.sma-hiw-grid.sma-in .sma-hiw-item { opacity: 1; transform: none; }
.sma-hiw-grid.sma-in .sma-hiw-item:nth-child(1) { transition-delay: 0s; }
.sma-hiw-grid.sma-in .sma-hiw-item:nth-child(2) { transition-delay: .15s; }
.sma-hiw-grid.sma-in .sma-hiw-item:nth-child(3) { transition-delay: .3s; }
.sma-hiw-grid.sma-in .sma-hiw-item:nth-child(4) { transition-delay: .45s; }
.sma-hiw-square { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 900; font-size: 22px; margin: 0 auto 14px; }
.sma-hiw-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.sma-hiw-desc { font-size: 12.5px; color: var(--sma-muted); margin-bottom: 14px; }
.sma-hiw-illu { background: #fff; border: 1px solid var(--sma-border); border-radius: 12px; padding: 14px; box-shadow: var(--sma-shadow-sm); min-height: 96px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }

.sma-hiw-cards { display: flex; gap: 5px; justify-content: center; }
.sma-hiw-cardchip { font-size: 8.5px; font-weight: 700; background: #f1f5f9; border-radius: 4px; padding: 3px 6px; color: #475569; }
.sma-hiw-progress-track { height: 5px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.sma-hiw-progress-fill { height: 100%; width: 0; background: var(--sma-blue); transition: width 1.2s var(--sma-ease) .3s; }
.sma-hiw-grid.sma-in .sma-hiw-progress-fill { width: 100%; }

.sma-hiw-scanwrap { position: relative; height: 36px; background: rgba(234, 67, 53, .06); border-radius: 8px; overflow: hidden; }
.sma-hiw-scanline { position: absolute; left: 0; right: 0; top: -14px; height: 12px; background: linear-gradient(180deg, rgba(234, 67, 53, 0), rgba(234, 67, 53, .35), rgba(234, 67, 53, 0)); animation: sma-scan 1.8s linear infinite; }
@keyframes sma-scan { 0% { top: -14px; } 100% { top: 36px; } }
.sma-hiw-checks { display: flex; gap: 6px; justify-content: center; }
.sma-hiw-check { width: 18px; height: 18px; border-radius: 999px; background: rgba(52, 168, 83, .14); color: var(--sma-green); font-size: 10px; display: flex; align-items: center; justify-content: center; transform: scale(0); transition: transform .3s var(--sma-ease); }
.sma-hiw-grid.sma-in .sma-hiw-check:nth-child(1) { transition-delay: .4s; transform: scale(1); }
.sma-hiw-grid.sma-in .sma-hiw-check:nth-child(2) { transition-delay: .6s; transform: scale(1); }
.sma-hiw-grid.sma-in .sma-hiw-check:nth-child(3) { transition-delay: .8s; transform: scale(1); }

.sma-hiw-envelope { font-size: 28px; text-align: center; transform: translateY(6px); opacity: .6; transition: transform .5s var(--sma-ease) .3s, opacity .5s var(--sma-ease) .3s; }
.sma-hiw-grid.sma-in .sma-hiw-envelope { transform: translateY(0); opacity: 1; }
.sma-hiw-email-status { font-size: 10.5px; color: var(--sma-muted); text-align: center; }

.sma-hiw-minigauge { width: 44px; height: 44px; margin: 0 auto; border-radius: 999px; background: conic-gradient(var(--sma-green) 0% var(--sma-hiw-pct, 90%), #e2e8f0 var(--sma-hiw-pct, 90%) 100%); }
.sma-hiw-minirows { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.sma-hiw-minirow { height: 5px; border-radius: 999px; background: rgba(52, 168, 83, .18); width: 0; transition: width .6s var(--sma-ease); }
.sma-hiw-grid.sma-in .sma-hiw-minirow:nth-child(1) { width: 90%; transition-delay: .5s; }
.sma-hiw-grid.sma-in .sma-hiw-minirow:nth-child(2) { width: 70%; transition-delay: .65s; }

/* ---- Catalog-at-a-glance + Merchant Center kit bump ---- */
.sma-catalog-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 10px; }
@media (min-width: 900px) { .sma-catalog-grid { grid-template-columns: 1.3fr 1fr; } }
.sma-catalog-preview { background: #fff; border: 1px solid var(--sma-border); border-radius: 14px; overflow: hidden; box-shadow: var(--sma-shadow-sm); }
.sma-catalog-preview-head { display: flex; justify-content: space-between; padding: 10px 14px; font-size: 11px; font-weight: 700; color: var(--sma-muted); text-transform: uppercase; letter-spacing: .04em; background: #f8fafc; border-bottom: 1px solid var(--sma-border); }
.sma-catalog-row { display: grid; grid-template-columns: 1fr 1.6fr 50px; gap: 8px; padding: 7px 14px; font-size: 11px; border-bottom: 1px solid #f1f5f9; align-items: center; }
.sma-catalog-row.sma-catalog-head { font-weight: 700; color: var(--sma-muted); background: #f8fafc; }
.sma-catalog-handle { font-family: var(--sma-font-mono); color: var(--sma-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sma-catalog-score { font-weight: 800; color: var(--sma-green); text-align: right; }
.sma-catalog-more { padding: 8px 14px; font-size: 11px; color: var(--sma-muted); }
.sma-catalog-stats { display: flex; gap: 22px; margin-top: 16px; flex-wrap: wrap; }
.sma-catalog-stat-n { font-size: 24px; font-weight: 800; color: var(--sma-blue); font-variant-numeric: tabular-nums; font-family: var(--sma-font-display); }
.sma-catalog-stat-l { font-size: 11.5px; color: var(--sma-muted); margin-top: 2px; }

/* Reskin of the reused mf-v3 bump card (from styles.css / Tona) to the
   Google palette when nested under .sma-root — same #mf-bump1 markup, no
   contract change, only colors. */
.sma-root .mf-v3-bumpcard { border: 1.5px solid var(--sma-border) !important; border-radius: 16px !important; box-shadow: var(--sma-shadow-md) !important; background: #fff !important; }
.sma-root .mf-v3-bumpcard.checked { border-color: var(--sma-blue) !important; background: rgba(26, 115, 232, .04) !important; }
.sma-root .mf-v3-bumptag { background: rgba(251, 188, 4, .15) !important; color: var(--sma-yellow-ink) !important; }
.sma-root .mf-v3-bumpcheck { border-bottom-color: var(--sma-border) !important; }
.sma-root .mf-v3-bumpcheck input { accent-color: var(--sma-blue) !important; }
.sma-root .mf-v3-bumpcheck-t { font-family: var(--sma-font-body) !important; color: var(--sma-fg) !important; }
.sma-root .mf-v3-bumpcheck-d { color: var(--sma-muted) !important; }
.sma-root .mf-v3-maplabel { font-family: var(--sma-font-mono) !important; color: var(--sma-muted) !important; }
.sma-root .mf-v3-maprow { border-bottom-color: #f1f5f9 !important; }
.sma-root .mf-v3-maprow span:first-child, .sma-root .mf-v3-maprow span:nth-child(2) { font-family: var(--sma-font-mono) !important; color: var(--sma-fg) !important; }

/* ---- Checkout strip reskin (reused salesSectionPricing markup — same
   #mf-pricing/#mf-buy-btn/#mf-total/.mf-paddle-frame contract) ---- */
.sma-root .mf-v3-checkout {
  max-width: 620px !important; border-radius: 20px !important; border: 1px solid var(--sma-border) !important;
  box-shadow: var(--sma-shadow-lg) !important; font-family: var(--sma-font-body) !important; background: #fff !important;
}
.sma-root .mf-v3-totalprice { color: var(--sma-fg) !important; font-family: var(--sma-font-display) !important; }
.sma-root .mf-v3-totallabel { font-family: var(--sma-font-mono) !important; }
.sma-root .mf-v3-buybtn { background: var(--sma-blue) !important; box-shadow: var(--sma-shadow-primary-25) !important; font-family: var(--sma-font-body) !important; border-radius: 12px !important; }
.sma-root .mf-v3-buybtn:hover { background: var(--sma-blue-dark-1) !important; box-shadow: var(--sma-shadow-primary-30) !important; }
.sma-root .mf-v3-paddlewordmark { color: var(--sma-blue) !important; }
.sma-root .mf-v3-cardchip { font-family: var(--sma-font-mono) !important; }
.sma-root .tona-badge-attention { background: rgba(234, 67, 53, .1) !important; color: var(--sma-red) !important; }
.sma-root .tona-badge-positive { background: rgba(52, 168, 83, .1) !important; color: var(--sma-green) !important; }
.sma-root .tona-mono { font-family: var(--sma-font-mono) !important; }
.sma-root .mf-v3-checkexpired p { color: var(--sma-red) !important; background: rgba(234, 67, 53, .06) !important; border: 1px solid rgba(234, 67, 53, .16) !important; }
.sma-root .mf-v3-checkout .tona-btn { background: var(--sma-blue) !important; }

/* ---- FAQ accordion — design.md §4.9 ---- */
.sma-faq-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
@media (min-width: 760px) { .sma-faq-grid { grid-template-columns: repeat(2, 1fr); } }
.sma-faq-item { background: #fff; border: 1px solid var(--sma-border); border-radius: 12px; overflow: hidden; }
.sma-faq-item summary { list-style: none; cursor: pointer; padding: 16px 18px; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sma-faq-item summary::-webkit-details-marker { display: none; }
.sma-faq-item summary::after { content: '⌄'; color: var(--sma-muted); font-size: 16px; transition: transform .2s var(--sma-ease); flex-shrink: 0; }
.sma-faq-item[open] summary::after { transform: rotate(180deg); }
.sma-faq-item p { margin: 0; padding: 0 18px 16px; font-size: 13px; color: var(--sma-muted); line-height: 1.55; }

/* ---- Footer CTA — design.md §4.11 ---- */
.sma-footer-section { position: relative; overflow: hidden; padding: 90px 20px; background: linear-gradient(135deg, var(--sma-blue) 0%, var(--sma-blue-dark-1) 50%, var(--sma-blue-dark-2) 100%); text-align: center; color: #fff; }
.sma-footer-halo1 { position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .1) 0%, transparent 50%); pointer-events: none; }
.sma-footer-halo2 { position: absolute; inset: 0; background: radial-gradient(circle at 70% 80%, rgba(255, 255, 255, .08) 0%, transparent 50%); pointer-events: none; }
.sma-footer-orb { position: absolute; border-radius: 999px; background: rgba(255, 255, 255, .06); pointer-events: none; }
.sma-footer-orb-1 { top: 10%; left: 8%; width: 220px; height: 220px; animation: sma-float1 6s ease-in-out infinite; }
.sma-footer-orb-2 { bottom: 8%; right: 12%; width: 160px; height: 160px; animation: sma-float2 5s ease-in-out infinite 1s; }
@keyframes sma-float1 { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-20px) scale(1.05); } }
@keyframes sma-float2 { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(15px) scale(1.08); } }
.sma-footer-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.sma-footer-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 999px; padding: 8px 16px; font-size: 12.5px; margin-bottom: 22px; opacity: 0; transform: scale(.85); transition: opacity .4s var(--sma-ease), transform .4s var(--sma-ease); }
.sma-footer-section.sma-in .sma-footer-badge { opacity: 1; transform: scale(1); }
.sma-footer-title { font-size: 30px; font-weight: 800; margin: 0 0 14px; line-height: 1.15; opacity: 0; transform: translateY(16px); transition: opacity .5s var(--sma-ease) .08s, transform .5s var(--sma-ease) .08s; }
.sma-footer-section.sma-in .sma-footer-title { opacity: 1; transform: none; }
@media (min-width: 640px) { .sma-footer-title { font-size: 42px; } }
.sma-footer-sub { color: rgba(255, 255, 255, .75); font-size: 15px; max-width: 500px; margin: 0 auto 24px; opacity: 0; transform: translateY(16px); transition: opacity .5s var(--sma-ease) .16s, transform .5s var(--sma-ease) .16s; }
.sma-footer-section.sma-in .sma-footer-sub { opacity: 1; transform: none; }
.sma-footer-benefits { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; color: rgba(255, 255, 255, .85); font-size: 13px; margin-bottom: 30px; opacity: 0; transition: opacity .5s var(--sma-ease) .24s; }
.sma-footer-section.sma-in .sma-footer-benefits { opacity: 1; }
.sma-footer-cta-row { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--sma-ease) .3s, transform .5s var(--sma-ease) .3s; }
.sma-footer-section.sma-in .sma-footer-cta-row { opacity: 1; transform: none; }
.sma-footer-cta { background: #fff !important; color: var(--sma-blue) !important; font-weight: 700 !important; box-shadow: 0 20px 45px rgba(0, 0, 0, .25) !important; }
.sma-footer-cta:hover { background: #f8fafc !important; transform: translateY(-1px); }
.sma-footer-cta .sma-cta-halo { background: rgba(255, 255, 255, .35) !important; }
.sma-footer-trust { margin-top: 18px; font-size: 12px; color: rgba(255, 255, 255, .5); opacity: 0; transition: opacity .5s var(--sma-ease) .5s; }
.sma-footer-section.sma-in .sma-footer-trust { opacity: 1; }

/* ==========================================================================
   Reduced motion — final states immediately, no animation. Mirrors the
   default variant's prefers-reduced-motion contract (mfObserveInView /
   mfCountUp already jump straight to end state via JS; this covers the
   CSS-only transitions so nothing depends on the JS branch alone).
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sma-root * { transition: none !important; animation: none !important; }
  .sma-hero-copy, .sma-hero-illustration,
  .sma-dimbar, .sma-issuerow, .sma-gauge-verdict,
  .sma-vs-col, .sma-tabrow, .sma-annot-pill, .sma-illu-docline, .sma-illu-numchip,
  .sma-illu-filecard, .sma-illu-progress-fill, .sma-adv-box, .sma-adv-pill,
  .sma-hiw-item, .sma-hiw-progress-fill, .sma-hiw-check, .sma-hiw-envelope, .sma-hiw-minirow,
  .sma-footer-badge, .sma-footer-title, .sma-footer-sub, .sma-footer-benefits, .sma-footer-cta-row, .sma-footer-trust,
  .sma-scan-callout, .sma-shop-card,
  .sma-reveal {
    opacity: 1 !important; transform: none !important;
  }
  /* .sma-float-card is deliberately NOT force-visible here — the healing
     loop's healedState() (app.js) decides which of the two floating
     cards is visible in the final healed state (floatLeft, not
     floatRight) via the same .sma-in class every other view uses; a
     blanket override here would show both at once. */
  .sma-dimbar .sma-dimbar-fill { width: var(--sma-dimbar-pct, 0%) !important; }
  .sma-illu-docline:nth-child(1) { width: 92% !important; }
  .sma-illu-docline:nth-child(2) { width: 100% !important; }
  .sma-illu-docline:nth-child(3) { width: 68% !important; }
  .sma-illu-progress-fill { width: 96% !important; }
  .sma-hiw-progress-fill { width: 100% !important; }
  .sma-hiw-minirow:nth-child(1) { width: 90% !important; }
  .sma-hiw-minirow:nth-child(2) { width: 70% !important; }
  .sma-illu-cursor { display: none !important; }
  .sma-hiw-scanline { animation: none !important; display: none !important; }
  .sma-footer-orb { animation: none !important; }
  .sma-scan-scanline { display: none !important; }
  .sma-shop-cursor { display: none !important; }
}