@import url('/fonts/fonts.css');
/* ============================================================
   SCALE MOTION — Design System stylesheet
   Implemented from the Claude Design project "Scale Motion Design
   System" (1aa62e11-d433-444a-b54a-5eb005289a46): tokens/*.css +
   components.css, concatenated in source order, plus the
   site-specific article-sidebar/findings-advice layout at the end
   (not part of the generic design system — built for scalemotion.co).
   ============================================================ */

/* ===== tokens/colors.css ===== */
:root {
  /* Base brand colors */
  --sm-ink:        #12161C;   /* primary text, dark sections, masthead */
  --sm-ink-soft:   #0D1014;   /* footer / deepest band */
  --sm-green:      #11553F;   /* signal accent — the leading bar, primary actions */
  --sm-green-2:    #17714F;   /* hover / brighter accent */
  --sm-green-3:    #2E8C63;   /* secondary accent used on dark article theme */
  --sm-sage:       #7E857F;   /* secondary text, the "Motion" half of the wordmark */
  --sm-paper:      #E7E5E1;   /* page background (light theme default) */
  --sm-paper-2:    #DEDCD6;   /* alternate light band (e.g. pricing section) */
  --sm-white:      #FFFFFF;   /* cards on paper */

  /* Text on light */
  --sm-text:       #33312C;   /* body text on light */
  --sm-text-soft:  #56544E;   /* muted body on light */
  --sm-text-faint: #7C7A73;   /* captions, fine print on light cards */

  /* Text on dark */
  --sm-text-ghost: #9A978F;   /* muted text on ink */
  --sm-text-dim:   #6F7570;   /* faintest text on ink (footer labels) */

  /* Lines / hairlines */
  --sm-line:       rgba(18,22,28,0.08);    /* hairline on light */
  --sm-line-2:     rgba(18,22,28,0.18);    /* stronger hairline on light */
  --sm-line-dark:  rgba(255,255,255,0.08); /* hairline on ink */
  --sm-line-dark-2: rgba(255,255,255,0.14);/* stronger hairline on ink (article theme) */
  --sm-green-tint: rgba(17,85,63,0.10);    /* green wash for chips / badges */

  /* Status (used sparingly — data deltas only, never decorative) */
  --sm-negative: #B3433A;

  /* ---- Semantic aliases (prefer these in new component work) ---- */
  --surface-page:     var(--sm-paper);
  --surface-page-alt: var(--sm-paper-2);
  --surface-card:     var(--sm-white);
  --surface-ink:      var(--sm-ink);
  --surface-ink-soft: var(--sm-ink-soft);

  --text-primary:     var(--sm-ink);
  --text-body:        var(--sm-text);
  --text-muted:       var(--sm-text-soft);
  --text-faint:       var(--sm-text-faint);
  --text-on-ink:      #ffffff;
  --text-on-ink-muted: var(--sm-text-ghost);
  --text-dim:         var(--sm-text-dim);

  --accent:           var(--sm-green);
  --accent-hover:     var(--sm-green-2);
  --accent-on-ink:    var(--sm-green-3);

  --border-default:   var(--sm-line);
  --border-strong:    var(--sm-line-2);
  --border-on-ink:     var(--sm-line-dark);
}

/* ===== tokens/typography.css ===== */
/* Webfonts are self-hosted: see /fonts/fonts.css (imported at the top of this file). */

:root {
  /* Font families */
  --font-display: 'Archivo', sans-serif;      /* headings — 700/800 only */
  --font-body:    'Space Grotesk', sans-serif; /* body copy, UI, wordmark */

  /* Display scale (Archivo 800, tight tracking) */
  --text-display:  clamp(46px, 6.4vw, 82px); /* hero / page H1 */
  --text-h2:       clamp(32px, 4.4vw, 54px);
  --text-h3:       30px;
  --text-h4:       21px;

  /* Body scale (Space Grotesk) */
  --text-lead:     18px;
  --text-body-size: 16px;
  --text-small:    13.5px;
  --text-eyebrow:  11px;

  /* Tracking */
  --tracking-display: -0.035em;
  --tracking-h2:       -0.025em;
  --tracking-h3:       -0.02em;
  --tracking-eyebrow:  0.16em;

  /* Line-heights */
  --leading-display: 1.0;
  --leading-h2:       1.08;
  --leading-body:     1.7;
  --leading-lead:      1.7;
}

/* ===== tokens/spacing.css ===== */
:root {
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 16px;
  --space-5: 22px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 56px;
  --space-9: 72px;
  --space-10: 110px; /* default section vertical padding */

  --sm-maxw: 1240px;         /* container max-width */
  --sm-maxw-narrow: 1080px;  /* narrow container (headers, pricing) */
  --sm-section-y: 110px;    /* section vertical padding */
  --sm-gutter: 40px;        /* section horizontal padding */
  --sm-nav-h: 70px;
}

/* ===== tokens/effects.css ===== */
/* The brand has no glass/blur cards, no inner shadows, no gradients on
   surfaces. The one blur usage is the fixed nav (backdrop-filter). */
:root {
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   22px;
  --radius-pill: 100px;

  --shadow-card:  0 18px 50px rgba(18,22,28,0.10);
  --shadow-hover: 0 18px 40px rgba(18,22,28,0.08);
  --shadow-modal: 0 24px 60px rgba(18,22,28,0.25);

  --nav-blur: 18px;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.2s;
  --duration-base: 0.25s;
  --duration-slow: 0.3s;
}

/* ===== components.css ===== */
/* Ports the brand kit's .sm-* vocabulary onto the token layer above.
   Components in src/components/ds/ use these classes rather than
   inline CSS-in-JS. */

/* ---------- BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--surface-page);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}
a { text-decoration: none; color: var(--accent); }
a:hover { color: var(--accent-hover); }
::selection { background: var(--accent); color: #fff; }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--surface-page); }
::-webkit-scrollbar-thumb { background: #c2c0b8; border-radius: 6px; }

/* ---------- LAYOUT ---------- */
.sm-section { padding: var(--sm-section-y) var(--sm-gutter); border-top: 1px solid var(--border-default); }
.sm-section--flush { border-top: none; }
.sm-section--ink { background: var(--surface-ink); color: var(--text-on-ink-muted); border-top: none; }
.sm-section--paper-2 { background: var(--surface-page-alt); border-top: 1px solid var(--border-default); }
.sm-container { max-width: var(--sm-maxw); margin: 0 auto; }
.sm-container--narrow { max-width: var(--sm-maxw-narrow); margin: 0 auto; }

/* ---------- TYPOGRAPHY ---------- */
.sm-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--accent);
}
.sm-eyebrow::after { content: ""; width: 30px; height: 1px; background: rgba(17,85,63,0.3); }
.sm-eyebrow--center { justify-content: center; }
.sm-eyebrow--center::after { display: none; }
.sm-eyebrow--ink { color: var(--accent-on-ink); }

.sm-display {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display);
  color: var(--text-primary);
}
.sm-h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-h2); line-height: var(--leading-h2); letter-spacing: var(--tracking-h2);
  color: var(--text-primary);
}
.sm-h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-h3); letter-spacing: var(--tracking-h3); color: var(--text-primary); }
.sm-h4 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-h4); line-height: 1.3; color: var(--text-primary); }
.sm-lead { font-size: var(--text-lead); color: var(--text-muted); line-height: var(--leading-lead); }
.sm-body { font-size: var(--text-body-size); color: var(--text-muted); line-height: 1.8; }
.sm-small { font-size: var(--text-small); color: var(--text-muted); line-height: 1.7; }
.on-ink, .sm-section--ink .sm-h2, .sm-section--ink .sm-h3, .sm-section--ink .sm-h4 { color: var(--text-on-ink); }
.sm-section--ink .sm-body, .sm-section--ink .sm-lead { color: var(--text-on-ink-muted); }
.sm-em { color: var(--text-primary); font-weight: 600; }

/* ---------- WORDMARK / MARK ---------- */
.sm-wordmark { font-family: var(--font-body); font-weight: 700; font-size: 18px; letter-spacing: -0.03em; color: var(--text-primary); }
.sm-wordmark .motion { color: var(--sm-sage); }
.sm-wordmark--ink { color: #fff; }
.sm-logo { display: inline-flex; align-items: center; gap: 11px; }

/* ---------- BUTTONS ---------- */
.sm-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 32px; border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600; font-size: 15px; cursor: pointer; border: none;
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.sm-btn--primary { background: var(--accent); color: #fff; }
.sm-btn--primary:hover { background: var(--accent-hover); }
.sm-btn--primary:disabled { background: var(--sm-line-2); color: var(--sm-text-faint); cursor: not-allowed; }
.sm-btn--ghost { background: transparent; color: var(--text-primary); border: 1px solid var(--border-strong); font-weight: 500; }
.sm-btn--ghost:hover { background: var(--surface-ink); color: #fff; border-color: var(--surface-ink); }
.sm-btn--ghost:disabled { color: var(--sm-text-faint); border-color: var(--sm-line); cursor: not-allowed; }
.sm-section--ink .sm-btn--ghost { color: #fff; border-color: rgba(255,255,255,0.35); }
.sm-section--ink .sm-btn--ghost:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: #fff; }
.sm-btn--ink { background: #fff; color: var(--surface-ink); }
.sm-btn--ink:hover { background: var(--sm-paper-2); }
.sm-btn--sm { padding: 10px 22px; font-size: 13.5px; }
.sm-btn--icon { padding: 12px; border-radius: 50%; }

/* ---------- NAV ---------- */
.sm-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; justify-content: space-between; align-items: center;
  height: var(--sm-nav-h); padding: 0 var(--sm-gutter);
  background: rgba(231,229,225,0.82); backdrop-filter: blur(var(--nav-blur));
  border-bottom: 1px solid var(--border-default);
  transition: box-shadow .2s;
}
.sm-nav__links { display: flex; align-items: center; gap: 34px; }
.sm-nav__links a:not(.sm-btn) { font-size: 13.5px; font-weight: 500; color: var(--text-muted); transition: color .2s; }
.sm-nav__links a:not(.sm-btn):hover { color: var(--text-primary); }
.sm-nav__toggle { display: none; }

/* ---------- CHIPS / BADGES ---------- */
.sm-chip {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 13px; border-radius: var(--radius-pill);
  background: var(--sm-green-tint); color: var(--accent);
}
.sm-chip--neutral { background: rgba(18,22,28,0.07); color: var(--text-body); }
.sm-badge {
  display: inline-block; font-size: 14px; font-weight: 700;
  padding: 5px 15px; border-radius: var(--radius-pill);
  background: var(--sm-green-tint); color: var(--accent);
}

/* ---------- CARDS ---------- */
.sm-card {
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding: 34px 32px;
  transition: transform var(--duration-slow) var(--ease-standard), box-shadow var(--duration-slow) var(--ease-standard);
}
.sm-card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.sm-card--blueprint { border-top: 3px solid var(--accent); border-radius: 14px; }
.sm-card--ink { background: var(--surface-ink); color: var(--text-on-ink-muted); border-color: var(--border-on-ink); }
.sm-card__num { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--text-on-ink-muted); margin-bottom: 16px; }

/* Two/three/four-up grids */
.sm-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.sm-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; align-items: stretch; }
.sm-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.sm-grid-divided { display: grid; gap: 1px; background: var(--border-default); border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; }
.sm-grid-divided.sm-grid-2 { grid-template-columns: repeat(2,1fr); }
.sm-grid-divided.sm-grid-4 { grid-template-columns: repeat(4,1fr); }
.sm-grid-divided > * { background: var(--surface-card); padding: 52px 46px; }
.sm-section--ink .sm-grid-divided { background: var(--border-on-ink); border-color: var(--border-on-ink); }
.sm-section--ink .sm-grid-divided > * { background: var(--surface-ink); }

/* ---------- LISTS ---------- */
.sm-list { list-style: none; display: flex; flex-direction: column; gap: 13px; margin: 0; padding: 0; }
.sm-list li { font-size: 14px; color: var(--text-body); display: flex; align-items: flex-start; gap: 11px; line-height: 1.5; }
.sm-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: 8px; flex-shrink: 0; }
.sm-list--slash li { padding-left: 15px; position: relative; color: var(--text-muted); font-size: 13.5px; }
.sm-list--slash li::before { content: "/"; position: absolute; left: 0; top: 0; width: auto; height: auto; background: none; color: var(--accent); font-weight: 700; margin: 0; }
.sm-list--check li::before { content: "\2713"; width: auto; height: auto; background: none; color: var(--accent); font-weight: 700; margin: 0; }
.sm-card--ink .sm-list li { color: #d8d6cf; }
.sm-card--ink .sm-list--check li::before { color: var(--accent-hover); }

/* ---------- STAT (dark strip) ---------- */
.sm-stat-strip { display: grid; grid-template-columns: repeat(4,1fr); }
.sm-stat { display: block; padding: 56px 36px; border-right: 1px solid var(--border-on-ink); transition: background .25s; }
.sm-stat:last-child { border-right: none; }
.sm-stat:hover { background: rgba(255,255,255,0.03); }
.sm-stat__num { font-family: var(--font-display); font-size: 52px; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 12px; }
.sm-stat__num .unit { color: var(--accent); }
.sm-stat__num--green { color: var(--accent); }
.sm-stat__label { font-size: 13px; color: var(--text-on-ink-muted); line-height: 1.5; }
.sm-stat__more { font-size: 11.5px; color: var(--accent); margin-top: 12px; font-weight: 600; letter-spacing: 0.04em; }

/* ---------- PRICING ---------- */
.sm-price-card { background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 38px 34px; display: flex; flex-direction: column; height: 100%; position: relative; transition: transform var(--duration-slow), box-shadow var(--duration-slow); }
.sm-grid-3 > .sm-reveal { display: flex; }
.sm-price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.sm-price-card--featured { background: var(--surface-ink); border-color: var(--accent); }
.sm-price-card--featured:hover { transform: translateY(-6px); box-shadow: var(--shadow-modal); }
.sm-price-card__tier { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-on-ink-muted); margin-bottom: 16px; }
.sm-price-card--featured .sm-price-card__tier { color: #7fbf9f; }
.sm-price-card__price { font-family: var(--font-display); font-size: 48px; font-weight: 800; letter-spacing: -0.03em; color: var(--text-primary); line-height: 1; margin-bottom: 6px; }
.sm-price-card--featured .sm-price-card__price { color: #fff; }
.sm-price-card__price .per { font-size: 17px; font-weight: 400; color: var(--text-on-ink-muted); }
.sm-price-card__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 16px; border-radius: var(--radius-pill); white-space: nowrap; }
.sm-price-card--featured .sm-list li { color: #d8d6cf; }
.sm-price-card--featured .sm-list--check li::before { color: var(--accent-hover); }
.sm-price-card--featured .sm-small { color: var(--text-on-ink-muted); }

/* ---------- DIVIDERS / QUOTE ---------- */
.sm-divider { height: 1px; background: var(--border-strong); margin: 26px 0; }
.sm-card--ink .sm-divider, .sm-price-card--featured .sm-divider { background: var(--border-on-ink); }
.sm-quote { background: var(--surface-ink); border-radius: var(--radius-md); padding: 42px 48px; display: flex; align-items: center; gap: 40px; }
.sm-quote blockquote { margin: 0; font-size: 18px; font-style: italic; font-weight: 300; color: #d8d6cf; line-height: 1.7; border-left: 2px solid var(--accent); padding-left: 24px; }

/* ---------- FOOTER ---------- */
.sm-footer { background: var(--surface-ink-soft); padding: 40px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.sm-footer a, .sm-footer span { font-size: 12px; color: var(--text-on-ink-muted); }
.sm-footer__links { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.sm-footer__links a { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- GRID BACKDROP (decorative) ---------- */
.sm-gridbg { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(18,22,28,0.05) 1px,transparent 1px), linear-gradient(90deg,rgba(18,22,28,0.05) 1px,transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 60% 50%, #000, transparent);
          mask-image: radial-gradient(ellipse 75% 75% at 60% 50%, #000, transparent); }
.sm-section--ink .sm-gridbg { background-image: linear-gradient(rgba(255,255,255,0.035) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,0.035) 1px,transparent 1px); }

/* ---------- REVEAL (progressive; JS-driven via one shared IntersectionObserver) ---------- */
.sm-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.sm-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .sm-reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .sm-nav__toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; background: none; border: 0; cursor: pointer; }
  .sm-nav__toggle span { display: block; height: 2px; background: var(--text-primary); border-radius: 2px; transition: transform .2s, opacity .2s; }
  .sm-nav.is-open .sm-nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .sm-nav.is-open .sm-nav__toggle span:nth-child(2) { opacity: 0; }
  .sm-nav.is-open .sm-nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .sm-nav__links { display: none; position: fixed; top: var(--sm-nav-h); left: 0; right: 0; bottom: 0; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 16px var(--sm-gutter) 32px; background: var(--sm-paper); overflow-y: auto; }
  .sm-nav.is-open .sm-nav__links { display: flex; }
  .sm-nav__links a:not(.sm-btn) { font-size: 18px; padding: 16px 0; border-bottom: 1px solid var(--sm-line); }
  .sm-nav__links .sm-btn { margin-top: 24px; justify-content: center; text-align: center; }
  .sm-grid-2, .sm-grid-3, .sm-grid-4,
  .sm-grid-divided.sm-grid-2, .sm-grid-divided.sm-grid-4 { grid-template-columns: 1fr; }
  .sm-stat-strip { grid-template-columns: 1fr 1fr; }
  .sm-stat { border-right: none; border-bottom: 1px solid var(--border-on-ink); }
  .sm-quote { flex-direction: column; gap: 18px; }
  .sm-footer { flex-direction: column; text-align: center; }
}

/* ============================================================
   ARTICLE / ANALYSIS THEME (dark, scoped) — add class="sm-article-body" to <body>.
   ============================================================ */
.sm-article-body {
  background: var(--sm-ink); color: #fff; font-family: var(--font-body); line-height: 1.7;
  /* Back-compat aliases: earlier article pages on this site reference these
     local names directly (e.g. var(--line), var(--sky)) rather than the
     --sm-* tokens above. Keep them pointed at the same values so older
     per-page <style> blocks (icp-framework.astro, etc.) keep resolving. */
  --line: var(--sm-line-dark-2);
  --sky: var(--sm-green-3);
  --white: #fff;
  --ghost: #B8B5AC;
  --muted: var(--sm-text-dim);
  --ink-2: #181D24;
}
.sm-article-body .nav-logo-text { font-family: var(--font-display); font-size: 15px; font-weight: 800; color: #fff; letter-spacing: 0.04em; }
.sm-article-body .nav-logo-text span { color: var(--sm-sage); font-style: normal; }
.sm-article-body .nav-back { font-size: 13px; color: var(--text-dim); text-decoration: none; display: flex; align-items: center; gap: 6px; transition: color .2s; }
.sm-article-body .nav-back:hover { color: #fff; }
.sm-article-body .hero { padding: 160px 48px 80px; max-width: 880px; margin: 0 auto; border-bottom: 1px solid var(--sm-line-dark-2); }
.sm-article-body .hero-stat { font-family: var(--font-display); font-size: 80px; font-weight: 800; line-height: 1; color: var(--sm-green-3); margin-bottom: 8px; }
.sm-article-body .hero-stat-label { font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sm-text-dim); margin-bottom: 40px; }
.sm-article-body .hero-title { font-family: var(--font-display); font-size: 42px; font-weight: 800; line-height: 1.1; color: #fff; margin-bottom: 20px; }
.sm-article-body .hero-subtitle { font-size: 18px; font-weight: 300; color: #B8B5AC; max-width: 640px; line-height: 1.7; margin-bottom: 24px; }
.sm-article-body .hero-source { font-size: 12px; color: var(--sm-text-dim); font-style: italic; padding: 12px 0; border-top: 1px solid var(--sm-line-dark-2); }
.sm-article-body .content { max-width: 880px; margin: 0 auto; padding: 0 48px 120px; }
.sm-article-body .section-block { padding: 64px 0; border-bottom: 1px solid var(--sm-line-dark-2); opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.sm-article-body .section-block.visible { opacity: 1; transform: translateY(0); }
.sm-article-body .section-block:last-child { border-bottom: none; }
.sm-article-body .section-label-sm { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sm-green-3); margin-bottom: 16px; }
.sm-article-body .section-heading { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: #fff; margin-bottom: 24px; line-height: 1.2; }
.sm-article-body .section-body { font-size: 16px; font-weight: 300; color: #B8B5AC; line-height: 1.85; }
.sm-article-body .section-body p { margin-bottom: 20px; }
.sm-article-body .section-body p:last-child { margin-bottom: 0; }
.sm-article-body .cta-block { background: #181D24; border: 1px solid var(--sm-line-dark-2); border-radius: 16px; padding: 48px; text-align: center; max-width: 784px; margin: 0 auto 80px; }
.sm-article-body .cta-block p { font-size: 18px; color: #B8B5AC; margin-bottom: 24px; }
.sm-article-body .cta-btn { display: inline-block; background: var(--sm-green-3); color: var(--sm-ink); font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; padding: 14px 32px; border-radius: var(--radius-pill); text-decoration: none; transition: background .2s; }
.sm-article-body .cta-btn:hover { background: #fff; }
.sm-article-body footer { border-top: 1px solid var(--sm-line-dark-2); padding: 32px 48px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--sm-text-dim); }
.sm-article-body footer a { color: var(--sm-text-dim); text-decoration: none; transition: color .2s; }
.sm-article-body footer a:hover { color: #fff; }

/* ============================================================
   ARTICLE SIDEBAR LAYOUT (site-specific — not part of the generic
   design system; built for scalemotion.co's insight articles).
   Markup vocabulary: .article-layout > .article-sidebar +
   .article-main; .findings-advice > .findings-advice__panel.
   ============================================================ */
.article-layout { max-width: 1180px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 216px minmax(0,1fr); gap: 48px; align-items: start; box-sizing: border-box; }
.article-sidebar { position: sticky; top: 96px; padding: 150px 0 60px; min-width: 0; }
.article-sidebar__label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sm-text-dim); margin-bottom: 18px; padding-left: 14px; }
.article-sidebar__list { list-style: none; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; }
.article-sidebar__list a { display: block; font-size: 13.5px; line-height: 1.4; color: #B8B5AC; padding: 10px 14px; border-radius: 8px; transition: background .2s, color .2s; text-decoration: none; }
.article-sidebar__list a:hover { background: rgba(255,255,255,0.05); color: #fff; }
.article-sidebar__list a.active { background: rgba(46,140,99,0.14); color: var(--sm-green-3); font-weight: 500; }
.article-main { min-width: 0; max-width: 100%; }
.article-main .hero, .article-main .content { max-width: 880px; }

.findings-advice { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 880px; margin: 0 auto 64px; box-sizing: border-box; }
.findings-advice__panel { background: #181D24; border: 1px solid var(--sm-line-dark-2); border-radius: 12px; padding: 28px 26px; min-width: 0; }
.findings-advice__label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sm-green-3); margin-bottom: 16px; }
.findings-advice__list { list-style: none; display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; }
.findings-advice__list li { font-size: 14px; color: #B8B5AC; line-height: 1.65; overflow-wrap: break-word; }

@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; padding: 0 24px; }
  .article-sidebar { position: static; padding: 96px 0 24px; border-bottom: 1px solid var(--sm-line-dark-2); margin-bottom: 8px; }
  .article-sidebar__list { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .article-sidebar__list a { padding: 7px 12px; }
  .findings-advice { grid-template-columns: 1fr; }
}


/* ============================================================
   MOBILE / TABLET PASS (Oct 2026): fluid spacing, stacking, tables
   ============================================================ */
:root {
  --sm-gutter: clamp(20px, 5vw, 40px);
  --sm-section-y: clamp(64px, 10vw, 110px);
}
html { -webkit-text-size-adjust: 100%; }
img, svg, video { max-width: 100%; height: auto; }
.sm-article-body .hero { padding: clamp(110px, 16vw, 160px) clamp(20px, 5vw, 48px) clamp(48px, 8vw, 80px); }
.sm-article-body .content { padding-left: clamp(20px, 5vw, 48px); padding-right: clamp(20px, 5vw, 48px); }
.sm-article-body .hero-stat { font-size: clamp(48px, 12vw, 80px); overflow-wrap: anywhere; }
.sm-article-body .hero-title { font-size: clamp(28px, 6vw, 42px); }
.sm-article-body .cta-block { padding: clamp(28px, 6vw, 48px); margin-left: clamp(20px, 5vw, 48px); margin-right: clamp(20px, 5vw, 48px); }
.sm-article-body nav { padding-left: clamp(20px, 5vw, 48px); padding-right: clamp(20px, 5vw, 48px); }
.sm-article-body footer { padding: 32px clamp(20px, 5vw, 48px); }
.sm-grid-divided > * { padding: clamp(28px, 5vw, 52px) clamp(22px, 4vw, 46px); }
.sm-card { padding: clamp(24px, 4vw, 34px) clamp(22px, 4vw, 32px); }
.sm-btn, .sm-article-body .cta-btn { min-height: 44px; }

@media (max-width: 900px) {
  /* inline-style grids on pages: force stacking */
  [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: 1fr !important; gap: 32px !important; }
  /* article page wrappers with 48px inline padding */
  [style*="padding: 0 48px"] { padding-left: 20px !important; padding-right: 20px !important; }
  .sm-article-body footer { flex-direction: column; gap: 16px; text-align: center; }
  .sm-article-body footer > div { justify-content: center; flex-wrap: wrap; }
  .sm-article-body nav { height: auto; }
  /* sprint / icp / os two-column layouts */
  .fw-two-col, .fw-compare, .fw-canvas, .fw-milestone-changes, .fw-addendum { grid-template-columns: 1fr !important; gap: 20px !important; }
  [style*="grid-template-columns: 160px 1fr"], [style*="grid-template-columns: 5fr 7fr"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .sm-stat-strip { grid-template-columns: 1fr; }
  .sm-display { font-size: clamp(36px, 11vw, 56px) !important; line-height: 1.05; }
  .sm-h2 { font-size: clamp(26px, 7vw, 36px) !important; }
  div[style*="display:flex"][style*="gap:14px"] { flex-wrap: wrap; }
  /* tables: scroll inside wrapper, tighter cells, wrap long text */
  table td, table th { padding: 10px 12px !important; font-size: 13px !important; }
  table td[style*="nowrap"] { white-space: normal !important; }
  .table-scroll, div[style*="overflow-x"] { -webkit-overflow-scrolling: touch; }
  .article-sidebar__list a { font-size: 13px; }
  .sm-article-body .section-block { padding: 40px 0; }
}

/* Wide tables scroll inside themselves on phones */
@media (max-width: 640px) {
  .stack-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}