/* ==========================================================================
   sm-b2b-theme.css — the ShirtMath B2B design system.
   Single source of truth for every B2B marketing and portal surface.

   ---------------------------------------------------------------------------
   0. THE SCOPE FIREWALL — read before adding a single rule
   ---------------------------------------------------------------------------
   ShirtMath's consumer site and its B2B site share ONE generator, ONE header
   partial, ONE footer partial and ONE content stylesheet (sm-content.css).
   That sheet styles ~60 consumer pages. This file loads on the same document.

   Therefore: EVERY selector in this file begins with `.sm-b2b`.

   There are no bare element selectors (`body`, `h1`, `a`, `table`), no bare
   utility classes, and no unscoped component classes anywhere below. A single
   unscoped rule silently restyles 60 consumer pages and fails the migration.

   A scoped element selector — `.sm-b2b table` — is fine and is used here.
   A BARE element selector — `table` — is the release blocker.

   The B2B theme root is the element carrying `class="sm-b2b"`
   (portal and marketing pages also carry `data-sm-surface="b2b"`).

   Bugs inherited from shirtmath-theme.css v1, FIXED here, do not reintroduce:
     1. `.sm-input`              was unscoped  -> `.sm-b2b .sm-input`
     2. `.sm-select`             was unscoped  -> `.sm-b2b .sm-select`
     3. `.sm-feature-grid`       was unscoped in the 700px media query
                                               -> `.sm-b2b .sm-feature-grid`
     4. `html { scroll-behavior: auto }` in the reduced-motion block was a bare
        element selector reaching outside B2B -> scoped to `.sm-b2b`.

   ---------------------------------------------------------------------------
   0.1 LOAD ORDER AND SPECIFICITY FLOOR
   ---------------------------------------------------------------------------
   Load this file AFTER sm-content.css.

   sm-content.css contains rules as specific as (0,3,0) — for example
   `.sm-navgroup.is-open .sm-navdrop { display:block }`. A B2B rule that must
   beat one of those needs `.sm-b2b` PLUS at least the same number of classes.
   Where that matters the rule below carries a `[floor]` comment.

   ---------------------------------------------------------------------------
   0.2 HONESTY CONSTRAINTS BAKED INTO THIS FILE
   ---------------------------------------------------------------------------
   ShirtMath is pre-launch and has no customers. This file deliberately ships
   NO logo-wall, NO testimonial, NO review-score, NO uptime-badge and NO
   compliance-badge component, because building the component invites filling
   it with fiction. It also ships no `--free`/`--trial` pricing variant: the
   only two real prices are $320/month and $3,400/year.

   `.sm-kpi__value:empty` renders an em dash, never a placeholder number
   (see §11). An unknown metric must look unknown.

   The honest-uncertainty response (`FIT_AUTHORITY_UNAVAILABLE`) is a first
   class, positively styled component (§15), not an error.

   ---------------------------------------------------------------------------
   0.3 FONTS
   ---------------------------------------------------------------------------
   Inter is the B2B typeface. This file does not @import it (render-blocking
   and unscoped); the B2B page template must carry the stylesheet link. The
   token falls back to the system UI stack, so an unlinked page degrades
   cleanly rather than rendering the consumer serif.

   The ShirtMath wordmark keeps Fraunces. §2 deliberately does NOT shadow
   `--sm-serif`: re-typesetting the wordmark would be redesigning the logo.

   ---------------------------------------------------------------------------
   0.4 CONTENTS
   ---------------------------------------------------------------------------
    1 Theme root and tokens          15 Fit result / honest answer
    2 Token shadowing (shared DOM)   16 FAQ accordion (no JS)
    3 Scoped base                    17 Top nav + mobile drawer
    4 Layout                         18 Footer
    5 Typography                     19 Portal app shell
    6 Buttons                        20 Portal sidebar nav
    7 Badges / pills / authority     21 Portal page header + toolbar
    8 Cards and icon wells           22 Portal panels
    9 Hero                           23 Tables
   10 Section headers + feature grid 24 Forms
   11 KPI cards                      25 Alerts
   12 Dark bands                     26 Tabs
   13 Pricing                        27 Dialogs
   14 Connectors                     28 Drawers
                                     29 Tooltips
   30 Code / copy affordance         35 Meters
   31 Toasts                         36 Utilities
   32 Loading skeletons              37 Legacy portal DOM adapter
   33 Empty states                   38 Shared-partial compatibility
   34 Error states                   39 Responsive
                                     40 Accessibility
                                     41 Print
   ========================================================================== */


/* ==========================================================================
   1. THEME ROOT AND TOKENS
   Tokens live on `.sm-b2b`, never on `:root`. Putting them on `:root` would
   leak every B2B value into the consumer cascade — the exact failure this
   file exists to prevent.
   ========================================================================== */

.sm-b2b {
  /* -- navy foundation ---------------------------------------------------- */
  --sm-navy-1000: #020817;
  --sm-navy-950:  #041022;
  --sm-navy-900:  #07182d;
  --sm-navy-850:  #0a203a;
  --sm-navy-800:  #0d2948;

  /* -- electric data accents ---------------------------------------------- */
  --sm-blue-700:  #0b4fc4;
  --sm-blue-600:  #1769ea;
  --sm-blue-500:  #2f80ff;
  --sm-cyan-400:  #42c7ff;

  /* -- warm CTA ----------------------------------------------------------- */
  --sm-coral-600: #ef4a2f;
  --sm-coral-500: #ff5b3f;
  --sm-coral-400: #ff765d;

  /* -- surfaces ----------------------------------------------------------- */
  --sm-white:     #ffffff;
  --sm-surface:   #ffffff;
  --sm-surface-2: #f7faff;
  --sm-surface-3: #eef4fb;

  /* -- ink ---------------------------------------------------------------- */
  --sm-ink:       #07172b;
  --sm-text:      #11253e;

  /* `--sm-muted` measures 4.92:1 on #ffffff and 4.70:1 on --sm-surface-2:
     AA for body text on both. It measures 4.44:1 on --sm-surface-3, which
     FAILS. Use --sm-muted-ink (5.88:1 on surface-3) for secondary text on any
     tinted surface, inside table header cells, and inside alerts. */
  --sm-muted:     #60728a;
  --sm-muted-ink: #4d5f78;

  --sm-border:      #dce5f0;
  --sm-border-firm: #c6d5e8;   /* hover / focus-within borders */
  --sm-border-soft: #edf3fa;   /* interior rules inside a card */

  /* -- state -------------------------------------------------------------- */
  --sm-success:    #1ca76f;
  --sm-success-ink:#116a47;    /* text weight of success on a tint */
  --sm-warning:    #c98916;
  --sm-warning-ink:#8a5c07;
  --sm-danger:     #d94545;
  --sm-danger-ink: #a72c2c;
  --sm-info-ink:   var(--sm-blue-700);

  --sm-success-tint: #e7f6ef;
  --sm-warning-tint: #fdf4e3;
  --sm-danger-tint:  #fdeceb;
  --sm-info-tint:    #eaf3ff;

  /* -- text on the dark navy bands ----------------------------------------
     The design system forbids low-contrast gray text on dark. These three
     are the ONLY permitted on-dark text values. Measured against the
     lightest stop of the hero gradient (#082b56), which is the worst case:
       --sm-on-dark    #ffffff              14.1:1
       --sm-on-dark-2  rgba(255,255,255,.86) 10.7:1
       --sm-on-dark-3  rgba(255,255,255,.72)  8.0:1   <- floor for body text
     Never go below .72 alpha for text. Below that is decoration only:
       --sm-on-dark-line / --sm-on-dark-veil. */
  --sm-on-dark:      #ffffff;
  --sm-on-dark-2:    rgba(255, 255, 255, .86);
  --sm-on-dark-3:    rgba(255, 255, 255, .72);
  --sm-on-dark-line: rgba(255, 255, 255, .16);
  --sm-on-dark-veil: rgba(255, 255, 255, .06);
  --sm-on-dark-accent: #8de2ff;   /* 13.1:1 on --sm-navy-950 */

  /* -- geometry ----------------------------------------------------------- */
  --sm-radius-xs: 8px;
  --sm-radius-sm: 10px;
  --sm-radius-md: 16px;
  --sm-radius-lg: 24px;
  --sm-radius-xl: 32px;
  --sm-radius-pill: 999px;

  --sm-shadow-sm: 0 8px 24px rgba(8, 31, 60, .07);
  --sm-shadow-md: 0 18px 50px rgba(8, 31, 60, .08);
  --sm-shadow-lg: 0 30px 90px rgba(0, 13, 35, .24);
  --sm-shadow-pop: 0 24px 64px rgba(8, 31, 60, .16);
  --sm-shadow-cta: 0 12px 30px rgba(239, 74, 47, .28);

  /* -- space -------------------------------------------------------------- */
  --sm-s1: 4px;
  --sm-s2: 8px;
  --sm-s3: 12px;
  --sm-s4: 16px;
  --sm-s5: 20px;
  --sm-s6: 24px;
  --sm-s7: 32px;
  --sm-s8: 40px;
  --sm-s9: 48px;
  --sm-s10: 64px;
  --sm-s11: 80px;

  --sm-max: 1220px;
  --sm-gutter: 48px;           /* desktop page padding; steps down in §39 */
  --sm-section-y: 92px;        /* section rhythm; steps down in §39 */
  --sm-grid-gap: 20px;

  /* -- type --------------------------------------------------------------- */
  --sm-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sm-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* -- gradients ---------------------------------------------------------- */
  --sm-hero-gradient:   linear-gradient(135deg, #020817 0%, #061a33 48%, #082b56 100%);
  --sm-accent-gradient: linear-gradient(90deg, #2f80ff, #42c7ff);
  --sm-cta-gradient:    linear-gradient(135deg, #ff765d, #ef4a2f);

  /* -- motion ------------------------------------------------------------- */
  --sm-ease: cubic-bezier(.22, .61, .36, 1);
  --sm-fast: .14s;
  --sm-mid:  .18s;
  --sm-slow: .32s;

  /* -- focus (one token, used by every focusable control in this file) ----- */
  --sm-focus-width: 2px;
  --sm-focus-offset: 2px;
  --sm-focus-color: #1769ea;             /* 4.94:1 on white  */
  --sm-focus-color-dark: #8de2ff;        /* 13.1:1 on navy   */
  --sm-focus-ring-soft: 0 0 0 4px rgba(47, 128, 255, .14);

  /* -- z-index scale ------------------------------------------------------- */
  --sm-z-sticky: 60;
  --sm-z-drop:   70;
  --sm-z-scrim:  80;
  --sm-z-drawer: 85;
  --sm-z-toast:  90;
  --sm-z-dialog: 95;

  /* -- portal ------------------------------------------------------------- */
  --sm-side-w: 248px;
  --sm-topbar-h: 72px;
}


/* ==========================================================================
   2. TOKEN SHADOWING FOR THE SHARED CONSUMER PARTIALS
   The header, footer and article partials are generated once and used by both
   sites. Rather than re-declare every one of their selectors, we shadow the
   consumer tokens they read — but only inside `.sm-b2b`. Custom properties
   inherit, so a shared partial rendered on a B2B page picks up B2B values
   with zero risk to consumer pages, where these tokens keep their `:root`
   definitions untouched.

   DELIBERATE EXCLUSION: `--sm-serif` is NOT shadowed. `.sm-mark` (the
   wordmark) reads it, and re-typesetting the wordmark would be redesigning
   the logo. §38 re-asserts Fraunces on the wordmark for belt and braces.
   ========================================================================== */

.sm-b2b {
  --sm-page:      var(--sm-surface);
  --sm-tint:      var(--sm-surface-2);
  --sm-card:      var(--sm-surface);
  --sm-line:      var(--sm-border);
  --sm-line-soft: var(--sm-border-soft);
  --sm-deep:      var(--sm-navy-950);

  --sm-ink-2:     var(--sm-text);
  --sm-ink-3:     var(--sm-muted);

  --sm-coral:     var(--sm-coral-500);
  --sm-coral-ink: var(--sm-coral-600);
  --sm-blue:      var(--sm-blue-500);
  --sm-blue-ink:  var(--sm-blue-700);
  --sm-blue-tint: var(--sm-info-tint);
  --sm-green:     var(--sm-success-ink);
  --sm-amber:     var(--sm-warning-ink);

  --sm-body: var(--sm-font);
  --sm-mono: var(--sm-font-mono);

  --sm-r:    var(--sm-radius-md);
  --sm-r-sm: var(--sm-radius-sm);
  --sm-r-s:  var(--sm-radius-sm);
  --sm-r-m:  var(--sm-radius-md);
  --sm-wrap: var(--sm-max);

  /* Portal-only aliases the SPA's legacy CSS reads. */
  --sm-navy:         var(--sm-navy-950);
  --sm-navy-btn:     var(--sm-navy-850);
  --sm-cobalt:       var(--sm-blue-600);
  --sm-mist:         var(--sm-surface-2);
  --sm-surface-soft: var(--sm-surface-2);
  --sm-muted-ink:    #4d5f78;
  --sm-coral-hover:  var(--sm-coral-600);
  --sm-warn:         var(--sm-warning-ink);
  --sm-disp:         var(--sm-font);
}


/* ==========================================================================
   3. SCOPED BASE
   ========================================================================== */

.sm-b2b,
.sm-b2b *,
.sm-b2b *::before,
.sm-b2b *::after { box-sizing: border-box; }

.sm-b2b {
  margin: 0;
  font-family: var(--sm-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--sm-text);
  background: var(--sm-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* `scroll-behavior` only propagates to the viewport from the root element,
     which this file may not touch. Declared here so B2B scroll containers
     (the portal main column, drawers) animate; page-level smooth scrolling is
     the template's call, not the stylesheet's. */
  scroll-behavior: smooth;

  /* Backstop for the 390px no-sideways-scroll rule. `clip` — not `hidden` —
     because clip does not create a scroll container, so `position: sticky`
     on the header and the portal sidebar keeps working. This is a safety
     net, not permission to overflow; every wide component below carries its
     own overflow container. */
  overflow-x: clip;
}

.sm-b2b a { color: inherit; text-decoration: none; }

.sm-b2b img,
.sm-b2b svg,
.sm-b2b video { display: block; max-width: 100%; }

.sm-b2b p { margin: 0 0 var(--sm-s4); }
.sm-b2b p:last-child { margin-bottom: 0; }

.sm-b2b h1,
.sm-b2b h2,
.sm-b2b h3,
.sm-b2b h4 {
  margin: 0;
  color: var(--sm-ink);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.14;
}

.sm-b2b hr {
  border: 0;
  border-top: 1px solid var(--sm-border);
  margin: var(--sm-s7) 0;
}

.sm-b2b ul,
.sm-b2b ol { margin: 0 0 var(--sm-s4); padding-left: 20px; }
.sm-b2b li { margin: 0 0 var(--sm-s2); }

/* Long unbreakable tokens — endpoint paths, publishable keys, product refs —
   wrap instead of widening the page. This is what holds the 390px line. */
.sm-b2b p,
.sm-b2b li,
.sm-b2b dd,
.sm-b2b td,
.sm-b2b th,
.sm-b2b summary { overflow-wrap: break-word; }

.sm-b2b code,
.sm-b2b kbd,
.sm-b2b samp,
.sm-b2b pre,
.sm-b2b .sm-mono { overflow-wrap: anywhere; }


/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

.sm-b2b .sm-container {
  width: min(var(--sm-max), calc(100% - (var(--sm-gutter) * 2)));
  margin-inline: auto;
}

.sm-b2b .sm-container--narrow { max-width: 820px; }
.sm-b2b .sm-container--prose  { max-width: 720px; }

.sm-b2b .sm-section { padding: var(--sm-section-y) 0; }
.sm-b2b .sm-section--tight { padding: calc(var(--sm-section-y) * .68) 0; }
.sm-b2b .sm-section--soft  { background: var(--sm-surface-2); }
.sm-b2b .sm-section--line  { border-top: 1px solid var(--sm-border); }

.sm-b2b .sm-section--dark {
  color: var(--sm-on-dark);
  background: var(--sm-hero-gradient);
}
.sm-b2b .sm-section--dark .sm-section__title { color: var(--sm-on-dark); }
.sm-b2b .sm-section--dark .sm-section__lead  { color: var(--sm-on-dark-3); }
.sm-b2b .sm-section--dark .sm-section__eyebrow { color: var(--sm-on-dark-accent); }

/* Generic grid. `min-width:0` on children is load-bearing: without it a long
   API path in one cell sets the column's min-content width and pushes the
   page sideways. */
.sm-b2b .sm-grid { display: grid; gap: var(--sm-grid-gap); }
.sm-b2b .sm-grid > * { min-width: 0; }
.sm-b2b .sm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sm-b2b .sm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sm-b2b .sm-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sm-b2b .sm-grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }

.sm-b2b .sm-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sm-s9);
  align-items: center;
}
.sm-b2b .sm-split > * { min-width: 0; }

.sm-b2b .sm-stack { display: grid; gap: var(--sm-s4); }
.sm-b2b .sm-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sm-s3);
}
.sm-b2b .sm-row--end { justify-content: flex-end; }
.sm-b2b .sm-row--between { justify-content: space-between; }
.sm-b2b .sm-spacer { flex: 1 1 auto; }


/* ==========================================================================
   5. TYPOGRAPHY
   Scale from the design system: hero 64-78 / page 44-56 / section 34-44 /
   card 17-21 / body 15-18 / meta 12-14. Airy line heights, bold used sparingly.
   ========================================================================== */

.sm-b2b .sm-display {
  font-size: clamp(46px, 6.2vw, 74px);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 900;
}

.sm-b2b .sm-page-title {
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -.04em;
  font-weight: 900;
}

.sm-b2b .sm-h2,
.sm-b2b .sm-section__title {
  margin: 0;
  color: var(--sm-ink);
  font-size: clamp(30px, 4.6vw, 44px);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 900;
}

.sm-b2b .sm-h3 {
  font-size: clamp(19px, 2.2vw, 21px);
  line-height: 1.3;
  letter-spacing: -.02em;
  font-weight: 800;
}

.sm-b2b .sm-lead {
  color: var(--sm-muted);
  font-size: 18px;
  line-height: 1.7;
  max-width: 62ch;
}

.sm-b2b .sm-body { font-size: 16px; line-height: 1.7; color: var(--sm-text); }
.sm-b2b .sm-small { font-size: 14px; line-height: 1.6; color: var(--sm-muted); }

.sm-b2b .sm-meta {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sm-muted-ink);
}

.sm-b2b .sm-mono {
  font-family: var(--sm-font-mono);
  font-size: .92em;
}

.sm-b2b .sm-gradient-text {
  background: var(--sm-accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* A gradient-clipped run of text is invisible in forced-colors mode; §40
   restores a solid colour there. */

.sm-b2b .sm-link {
  color: var(--sm-blue-700);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(11, 79, 196, .35);
  transition: text-decoration-color var(--sm-fast) var(--sm-ease);
}
.sm-b2b .sm-link:hover { text-decoration-color: currentColor; }

.sm-b2b .sm-link-on-dark {
  color: var(--sm-on-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, .45);
}
.sm-b2b .sm-link-on-dark:hover { text-decoration-color: currentColor; }


/* ==========================================================================
   6. BUTTONS
   `.sm-btn` also exists in sm-content.css at (0,1,0). `.sm-b2b .sm-btn` is
   (0,2,0) and therefore wins, but only for properties it declares — so the
   base declares a COMPLETE set (display, box, type, colour, motion) and
   leaves nothing to leak in from the consumer sheet.
   Touch target: 48px default, never below the 44px floor.
   ========================================================================== */

.sm-b2b .sm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 11px;
  background: none;
  color: inherit;
  font: 800 14px/1 var(--sm-font);
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
    transform var(--sm-mid) var(--sm-ease),
    box-shadow var(--sm-mid) var(--sm-ease),
    border-color var(--sm-mid) var(--sm-ease),
    background var(--sm-mid) var(--sm-ease),
    color var(--sm-mid) var(--sm-ease);
}

.sm-b2b .sm-btn:hover { transform: translateY(-2px); }
.sm-b2b .sm-btn:active { transform: translateY(0); }

.sm-b2b .sm-btn:disabled,
.sm-b2b .sm-btn[aria-disabled="true"],
.sm-b2b .sm-btn.is-disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.sm-b2b .sm-btn--primary {
  color: #fff;
  background: var(--sm-cta-gradient);
  box-shadow: var(--sm-shadow-cta);
}
.sm-b2b .sm-btn--primary:hover { box-shadow: 0 16px 38px rgba(239, 74, 47, .34); }

.sm-b2b .sm-btn--secondary {
  color: var(--sm-ink);
  background: #fff;
  border-color: var(--sm-border);
  box-shadow: var(--sm-shadow-sm);
}
.sm-b2b .sm-btn--secondary:hover {
  border-color: var(--sm-border-firm);
  box-shadow: var(--sm-shadow-md);
}

.sm-b2b .sm-btn--ghost-dark {
  color: var(--sm-on-dark);
  background: rgba(255, 255, 255, .035);
  border-color: rgba(255, 255, 255, .28);
}
.sm-b2b .sm-btn--ghost-dark:hover {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .48);
}

/* Quiet action for portal toolbars and table rows. */
.sm-b2b .sm-btn--quiet {
  color: var(--sm-muted-ink);
  background: transparent;
  border-color: transparent;
}
.sm-b2b .sm-btn--quiet:hover {
  color: var(--sm-ink);
  background: var(--sm-surface-3);
  transform: none;
}

.sm-b2b .sm-btn--solid {
  color: #fff;
  background: var(--sm-navy-850);
  border-color: var(--sm-navy-850);
}
.sm-b2b .sm-btn--solid:hover { background: var(--sm-navy-800); }

.sm-b2b .sm-btn--danger {
  color: #fff;
  background: var(--sm-danger);
  border-color: var(--sm-danger);
}
.sm-b2b .sm-btn--danger:hover { background: var(--sm-danger-ink); border-color: var(--sm-danger-ink); }

/* Sizes. `--sm` stays at the 44px touch floor rather than shrinking to 36px;
   density comes from padding, never from an untappable target. */
.sm-b2b .sm-btn--sm { min-height: 44px; padding: 0 14px; font-size: 13px; }
.sm-b2b .sm-btn--lg { min-height: 56px; padding: 0 28px; font-size: 15px; border-radius: 12px; }
.sm-b2b .sm-btn--block { width: 100%; }

/* Square icon-only button. An aria-label is mandatory on these. */
.sm-b2b .sm-btn--icon {
  width: 44px;
  min-height: 44px;
  padding: 0;
  gap: 0;
  border-radius: var(--sm-radius-sm);
}

/* Busy state: the spinner is a pseudo-element, so markup does not change
   between idle and loading. */
.sm-b2b .sm-btn[data-state="busy"] { pointer-events: none; opacity: .8; }
.sm-b2b .sm-btn[data-state="busy"]::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: sm-b2b-spin .7s linear infinite;
}

/* @keyframes cannot be scoped by a selector — the at-rule name is global.
   Every keyframe set in this file is therefore prefixed `sm-b2b-` so it
   cannot collide with an animation name used by the consumer sheet. */
@keyframes sm-b2b-spin { to { transform: rotate(360deg); } }

/* A button group that behaves as one control. */
.sm-b2b .sm-btn-group {
  display: inline-flex;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-sm);
  background: #fff;
  overflow: hidden;
}
.sm-b2b .sm-btn-group .sm-btn {
  border-radius: 0;
  border-color: transparent;
  box-shadow: none;
  transform: none;
}
.sm-b2b .sm-btn-group .sm-btn + .sm-btn { border-left: 1px solid var(--sm-border); }
.sm-b2b .sm-btn-group .sm-btn[aria-pressed="true"] {
  color: var(--sm-blue-700);
  background: var(--sm-info-tint);
}


/* ==========================================================================
   7. BADGES, PILLS, STATUS AND AUTHORITY CHIPS
   ========================================================================== */

.sm-b2b .sm-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: var(--sm-radius-pill);
  border: 1px solid #d2e5ff;
  background: var(--sm-info-tint);
  color: var(--sm-blue-700);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.sm-b2b .sm-badge--neutral { color: var(--sm-muted-ink); background: var(--sm-surface-3); border-color: var(--sm-border); }
.sm-b2b .sm-badge--success { color: var(--sm-success-ink); background: var(--sm-success-tint); border-color: #bfe3d4; }
.sm-b2b .sm-badge--warning { color: var(--sm-warning-ink); background: var(--sm-warning-tint); border-color: #f0dcb2; }
.sm-b2b .sm-badge--danger  { color: var(--sm-danger-ink);  background: var(--sm-danger-tint);  border-color: #f3c4be; }

.sm-b2b .sm-badge--on-dark {
  color: var(--sm-on-dark);
  background: var(--sm-on-dark-veil);
  border-color: var(--sm-on-dark-line);
}

/* Uppercase status pill for tables and list rows. */
.sm-b2b .sm-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 11px;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-pill);
  background: var(--sm-surface-3);
  color: var(--sm-muted-ink);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sm-b2b .sm-pill--ok,
.sm-b2b .sm-pill--live { color: var(--sm-success-ink); background: var(--sm-success-tint); border-color: #bfe3d4; }
.sm-b2b .sm-pill--warn { color: var(--sm-warning-ink); background: var(--sm-warning-tint); border-color: #f0dcb2; }
.sm-b2b .sm-pill--bad  { color: var(--sm-danger-ink);  background: var(--sm-danger-tint);  border-color: #f3c4be; }

/* A status dot is never colour-alone: it always sits beside its own label. */
.sm-b2b .sm-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}

/* -- authority chips ------------------------------------------------------
   The fit API reports which authority answered: SANDBOX or PHASE4. Staging
   demonstrations are SANDBOX only, and the chip must say so — an unlabelled
   demo reads as production. */
.sm-b2b .sm-authority {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  padding: 0 11px;
  border-radius: var(--sm-radius-pill);
  border: 1px solid var(--sm-border);
  background: var(--sm-surface-3);
  color: var(--sm-muted-ink);
  font-family: var(--sm-font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sm-b2b .sm-authority--sandbox {
  color: var(--sm-warning-ink);
  background: var(--sm-warning-tint);
  border-color: #f0dcb2;
}
.sm-b2b .sm-authority--phase4 {
  color: var(--sm-blue-700);
  background: var(--sm-info-tint);
  border-color: #d2e5ff;
}
.sm-b2b .sm-authority--unavailable {
  color: var(--sm-muted-ink);
  background: var(--sm-surface-3);
  border-color: var(--sm-border-firm);
}
.sm-b2b .sm-authority--on-dark {
  color: var(--sm-on-dark-2);
  background: var(--sm-on-dark-veil);
  border-color: var(--sm-on-dark-line);
}


/* ==========================================================================
   8. CARDS AND ICON WELLS
   ========================================================================== */

.sm-b2b .sm-card {
  position: relative;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-md);
  background: var(--sm-surface);
  box-shadow: var(--sm-shadow-sm);
}

.sm-b2b .sm-card--pad    { padding: var(--sm-s6); }
.sm-b2b .sm-card--pad-lg { padding: var(--sm-s7); }
.sm-b2b .sm-card--flat   { box-shadow: none; }
.sm-b2b .sm-card--soft   { background: var(--sm-surface-2); }
.sm-b2b .sm-card--accent { border-color: #8ebeff; box-shadow: 0 18px 55px rgba(47, 128, 255, .14); }

/* Interactive card: translate + shadow only. The design system forbids
   excessive scaling. `:focus-within` mirrors hover so keyboard users get the
   same affordance. */
.sm-b2b .sm-card--interactive {
  transition:
    transform var(--sm-mid) var(--sm-ease),
    box-shadow var(--sm-mid) var(--sm-ease),
    border-color var(--sm-mid) var(--sm-ease);
}
.sm-b2b .sm-card--interactive:hover,
.sm-b2b .sm-card--interactive:focus-within {
  transform: translateY(-4px);
  border-color: var(--sm-border-firm);
  box-shadow: var(--sm-shadow-md);
}

/* Whole-card link: the anchor covers the card so the hit area is the card,
   while the accessible name stays on the real link text. */
.sm-b2b .sm-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.sm-b2b .sm-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sm-s4);
  padding: var(--sm-s5) var(--sm-s6);
  border-bottom: 1px solid var(--sm-border-soft);
}
.sm-b2b .sm-card__title { font-size: 17px; font-weight: 800; color: var(--sm-ink); letter-spacing: -.02em; }
.sm-b2b .sm-card__sub { margin: 4px 0 0; color: var(--sm-muted); font-size: 14px; line-height: 1.5; }
.sm-b2b .sm-card__body { padding: var(--sm-s6); }
.sm-b2b .sm-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sm-s3);
  padding: var(--sm-s4) var(--sm-s6);
  border-top: 1px solid var(--sm-border-soft);
  background: var(--sm-surface-2);
  border-radius: 0 0 var(--sm-radius-md) var(--sm-radius-md);
}

.sm-b2b .sm-icon-well {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  color: var(--sm-blue-600);
  background: #edf5ff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}
.sm-b2b .sm-icon-well--sq { border-radius: 14px; }
.sm-b2b .sm-icon-well--sm { width: 36px; height: 36px; font-size: 15px; }
.sm-b2b .sm-icon-well--coral   { color: var(--sm-coral-600); background: #fff0ec; }
.sm-b2b .sm-icon-well--success { color: var(--sm-success-ink); background: var(--sm-success-tint); }
.sm-b2b .sm-icon-well--on-dark {
  color: var(--sm-on-dark);
  background: var(--sm-on-dark-veil);
  border: 1px solid var(--sm-on-dark-line);
}
.sm-b2b .sm-icon-well svg { width: 22px; height: 22px; }


/* ==========================================================================
   9. HERO — deep navy, electric mesh, faint grid
   The hero is also the nav's background on marketing pages, so the nav sits
   inside it above `::before`.
   ========================================================================== */

.sm-b2b .sm-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--sm-on-dark);
  background: var(--sm-hero-gradient);
}

/* Mesh glow + grid, one layered background. `mask-image` fades the grid out
   before the section edge so it never ends in a hard line. */
.sm-b2b .sm-hero::before {
  content: "";
  position: absolute;
  inset: -10% -5% 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 38%, rgba(47, 128, 255, .22), transparent 24%),
    radial-gradient(circle at 88% 18%, rgba(66, 199, 255, .12), transparent 22%),
    radial-gradient(circle at 12% 78%, rgba(11, 79, 196, .18), transparent 30%),
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
  background-size: auto, auto, auto, 44px 44px, 44px 44px;
  mask-image: linear-gradient(to bottom, #000, transparent 92%);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 92%);
  animation: sm-b2b-mesh 26s ease-in-out infinite alternate;
}

/* A slow breathing drift, not a light show: the mesh moves a few pixels over
   26 seconds. §40 removes it entirely under prefers-reduced-motion. */
@keyframes sm-b2b-mesh {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-1.5%, 1.2%, 0); }
}

.sm-b2b .sm-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: 56px;
  align-items: center;
  min-height: 660px;
  padding: var(--sm-section-y) 0 78px;
}
/* minmax(0, …) rather than minmax(520px, …): a hard 520px minimum makes the
   grid wider than its container between 1024 and 1100px and pushes the page
   sideways. `min-width:0` on the children stops a long product_ref doing the
   same thing. */
.sm-b2b .sm-hero__inner > * { min-width: 0; }

.sm-b2b .sm-hero--center .sm-hero__inner {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  min-height: 0;
}

.sm-b2b .sm-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sm-on-dark-accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sm-b2b .sm-hero h1,
.sm-b2b .sm-hero__title {
  max-width: 18ch;
  margin: 18px 0;
  color: var(--sm-on-dark);
  font-size: clamp(38px, 6.2vw, 74px);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 900;
}

.sm-b2b .sm-hero__lead {
  max-width: 56ch;
  margin: 0;
  color: var(--sm-on-dark-3);
  font-size: 18px;
  line-height: 1.65;
}

.sm-b2b .sm-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.sm-b2b .sm-hero__bullets {
  display: grid;
  gap: 10px;
  margin-top: 26px;
  color: var(--sm-on-dark-3);
  font-size: 14px;
}

.sm-b2b .sm-hero__bullet {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  line-height: 1.5;
}

.sm-b2b .sm-hero__bullet::before {
  content: "\2713";
  width: 20px;
  height: 20px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 50%;
  color: var(--sm-on-dark-accent);
  font-size: 11px;
}

/* Glass panel for the API animation / product frame in the hero's right
   column. Backdrop-filter is progressive: the solid rgba background under it
   already meets contrast on its own. */
.sm-b2b .sm-hero__frame {
  position: relative;
  border: 1px solid var(--sm-on-dark-line);
  border-radius: var(--sm-radius-lg);
  background: rgba(9, 26, 48, .58);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--sm-shadow-lg);
  padding: var(--sm-s6);
  color: var(--sm-on-dark-2);
}

.sm-b2b .sm-hero__note {
  margin-top: var(--sm-s5);
  color: var(--sm-on-dark-3);
  font-size: 13px;
  line-height: 1.6;
}


/* ==========================================================================
   10. SECTION HEADERS, FEATURE GRID, NUMBERED STEPS
   ========================================================================== */

.sm-b2b .sm-section__head { max-width: 760px; }
.sm-b2b .sm-section__head--center { max-width: 760px; margin-inline: auto; text-align: center; }

.sm-b2b .sm-section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--sm-blue-600);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sm-b2b .sm-section__lead {
  max-width: 720px;
  margin: 16px 0 0;
  color: var(--sm-muted);
  font-size: 18px;
  line-height: 1.7;
}
.sm-b2b .sm-section__head--center .sm-section__lead { margin-inline: auto; }

/* FIXED BUG 3: this grid was unscoped in the v1 sheet's 700px media query,
   which restyled every `.sm-feature-grid` on the consumer site. */
.sm-b2b .sm-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sm-grid-gap);
  margin-top: 36px;
}
.sm-b2b .sm-feature-grid > * { min-width: 0; }
.sm-b2b .sm-feature-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sm-b2b .sm-feature-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.sm-b2b .sm-feature-card { padding: 26px; }
.sm-b2b .sm-feature-card h3,
.sm-b2b .sm-feature-card .sm-feature-card__title {
  margin: 18px 0 8px;
  color: var(--sm-ink);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.sm-b2b .sm-feature-card p { margin: 0; color: var(--sm-muted); line-height: 1.65; }

/* Numbered steps, one per row, counter-driven so the markup carries no
   hard-coded numerals. */
.sm-b2b .sm-steps {
  list-style: none;
  counter-reset: sm-b2b-step;
  margin: var(--sm-s6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sm-s5);
}
.sm-b2b .sm-steps > li {
  counter-increment: sm-b2b-step;
  position: relative;
  margin: 0;
  padding: 0 0 0 60px;
  min-height: 44px;
}
.sm-b2b .sm-steps > li::before {
  content: counter(sm-b2b-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #d2e5ff;
  background: var(--sm-info-tint);
  color: var(--sm-blue-700);
  font-family: var(--sm-font-mono);
  font-size: 14px;
}
.sm-b2b .sm-steps > li b,
.sm-b2b .sm-steps__title {
  display: block;
  margin-bottom: 4px;
  color: var(--sm-ink);
  font-size: 17px;
  font-weight: 800;
}
.sm-b2b .sm-steps--on-dark > li::before {
  border-color: var(--sm-on-dark-line);
  background: var(--sm-on-dark-veil);
  color: var(--sm-on-dark-accent);
}
.sm-b2b .sm-steps--on-dark > li b { color: var(--sm-on-dark); }
.sm-b2b .sm-steps--on-dark > li { color: var(--sm-on-dark-3); }


/* ==========================================================================
   11. KPI CARDS
   HONESTY: this component has no built-in numbers and no fabricated deltas.
   An empty value renders an em dash — an unknown metric must look unknown,
   never like a plausible figure. `.sm-kpi__note` carries the reason
   ("no data yet", "since connection"), and `--delta` variants exist only to
   colour a value the product actually computed.
   ========================================================================== */

.sm-b2b .sm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.sm-b2b .sm-kpi-grid > * { min-width: 0; }
.sm-b2b .sm-kpi-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sm-b2b .sm-kpi-grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }

.sm-b2b .sm-kpi {
  padding: 18px;
  border: 1px solid var(--sm-border);
  border-radius: 14px;
  background: var(--sm-surface);
}

.sm-b2b .sm-kpi__label {
  display: block;
  color: var(--sm-muted-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}

.sm-b2b .sm-kpi__value {
  display: block;
  margin-top: 7px;
  color: var(--sm-ink);
  font-size: 28px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* The honesty rule, in CSS. */
.sm-b2b .sm-kpi__value:empty::after {
  content: "\2014";
  color: var(--sm-muted);
}

.sm-b2b .sm-kpi__note {
  display: block;
  margin-top: 6px;
  color: var(--sm-muted-ink);
  font-size: 12px;
  line-height: 1.5;
}

.sm-b2b .sm-kpi--on-dark {
  border-color: var(--sm-on-dark-line);
  background: var(--sm-on-dark-veil);
}
.sm-b2b .sm-kpi--on-dark .sm-kpi__label,
.sm-b2b .sm-kpi--on-dark .sm-kpi__note { color: var(--sm-on-dark-3); }
.sm-b2b .sm-kpi--on-dark .sm-kpi__value { color: var(--sm-on-dark); }

.sm-b2b .sm-kpi__delta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 800;
}
.sm-b2b .sm-kpi__delta--up   { color: var(--sm-success-ink); }
.sm-b2b .sm-kpi__delta--down { color: var(--sm-danger-ink); }
.sm-b2b .sm-kpi__delta--flat { color: var(--sm-muted-ink); }


/* ==========================================================================
   12. DARK BANDS
   ========================================================================== */

.sm-b2b .sm-dark-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 52px 54px;
  color: var(--sm-on-dark);
  background: var(--sm-hero-gradient);
  border-radius: 22px;
  box-shadow: var(--sm-shadow-lg);
}

.sm-b2b .sm-dark-band::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 520px;
  height: 260px;
  right: -80px;
  bottom: -130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 128, 255, .45), rgba(47, 128, 255, 0) 68%);
  pointer-events: none;
}

.sm-b2b .sm-dark-band h2,
.sm-b2b .sm-dark-band .sm-dark-band__title {
  margin: 0;
  color: var(--sm-on-dark);
  font-size: clamp(26px, 3.6vw, 38px);
  line-height: 1.1;
  letter-spacing: -.04em;
}
.sm-b2b .sm-dark-band p { color: var(--sm-on-dark-3); }
.sm-b2b .sm-dark-band__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.sm-b2b .sm-dark-band__copy { max-width: 56ch; }


/* ==========================================================================
   13. PRICING
   Two plans exist: $320/month (brands_monthly) and $3,400/year
   (brands_annual). There is no free tier, no trial and no pilot, so this
   component ships no `--free` or `--trial` variant to fill in.
   `.sm-price--flag` is the best-value treatment; the flag text is real
   markup, not generated content, so it stays translatable and readable to a
   screen reader.
   ========================================================================== */

.sm-b2b .sm-price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 380px));
  justify-content: center;
  gap: var(--sm-s5);
  margin-top: 38px;
  text-align: left;
}
.sm-b2b .sm-price-grid > * { min-width: 0; }

.sm-b2b .sm-price {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-md);
  background: var(--sm-surface);
  box-shadow: var(--sm-shadow-sm);
}

.sm-b2b .sm-price--flag {
  border-color: #8ebeff;
  box-shadow: 0 18px 55px rgba(47, 128, 255, .14);
}

.sm-b2b .sm-price__flag {
  position: absolute;
  top: -13px;
  left: 30px;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 12px;
  border-radius: var(--sm-radius-pill);
  background: var(--sm-accent-gradient);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(47, 128, 255, .28);
}

.sm-b2b .sm-price__name {
  color: var(--sm-ink);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
}

.sm-b2b .sm-price__amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 12px;
  color: var(--sm-ink);
  font-size: clamp(38px, 5vw, 46px);
  font-weight: 900;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.sm-b2b .sm-price__period {
  color: var(--sm-muted);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
}

.sm-b2b .sm-price__note {
  margin: 10px 0 0;
  color: var(--sm-muted-ink);
  font-size: 13px;
  line-height: 1.6;
}

.sm-b2b .sm-price__list {
  list-style: none;
  margin: var(--sm-s5) 0 var(--sm-s6);
  padding: 0;
  display: grid;
  gap: 10px;
  color: var(--sm-text);
  font-size: 15px;
}
.sm-b2b .sm-price__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  line-height: 1.5;
}
.sm-b2b .sm-price__list li::before {
  content: "\2713";
  flex: none;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sm-info-tint);
  color: var(--sm-blue-700);
  font-size: 11px;
}
/* A feature the plan does NOT include is marked, never silently omitted. */
.sm-b2b .sm-price__list li.is-absent { color: var(--sm-muted); }
.sm-b2b .sm-price__list li.is-absent::before {
  content: "\2013";
  background: var(--sm-surface-3);
  color: var(--sm-muted-ink);
}

.sm-b2b .sm-price__cta { margin-top: auto; }


/* ==========================================================================
   14. CONNECTORS
   Implemented: CSV product feed, JSON product feed, custom retailer API.
   Not built yet: Shopify OAuth, WooCommerce, BigCommerce — these MUST carry
   `.sm-connector--soon`, which visibly de-emphasises the tile and labels it.
   A coming-soon connector styled like a shipped one is a false claim.
   ========================================================================== */

.sm-b2b .sm-connector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--sm-s4);
  margin-top: var(--sm-s7);
}
.sm-b2b .sm-connector-grid > * { min-width: 0; }

.sm-b2b .sm-connector {
  display: flex;
  align-items: center;
  gap: var(--sm-s3);
  padding: var(--sm-s4) var(--sm-s5);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-md);
  background: var(--sm-surface);
  min-height: 72px;
}
.sm-b2b .sm-connector__name {
  color: var(--sm-ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
}
.sm-b2b .sm-connector__status {
  display: block;
  margin-top: 3px;
  color: var(--sm-muted-ink);
  font-size: 12px;
  font-weight: 700;
}
/* Fail CLOSED. A connector that is not built must not look shipped
   because someone forgot a modifier — 'live' has to be asserted. */
.sm-b2b .sm-connector--live .sm-connector__status { color: var(--sm-success-ink); }
.sm-b2b .sm-connector--soon {
  background: var(--sm-surface-2);
  border-style: dashed;
}
.sm-b2b .sm-connector--soon .sm-connector__name { color: var(--sm-muted-ink); }
.sm-b2b .sm-connector--soon .sm-connector__status { color: var(--sm-muted-ink); }
.sm-b2b .sm-connector--soon .sm-icon-well { color: var(--sm-muted-ink); background: var(--sm-surface-3); }


/* ==========================================================================
   15. FIT RESULT — INCLUDING THE HONEST "NOT ENOUGH INFORMATION" STATE
   Contract b2b-fit/1.0.0. POST /b2b/widget/match returns {status, authority,
   current_product{recommended_size}, explanation, candidates[]}.

   `status: FIT_AUTHORITY_UNAVAILABLE` is a FEATURE, not a failure: ShirtMath
   returns "not enough information" instead of guessing. It is therefore
   styled as a calm, confident neutral state — never in danger red, never with
   a warning triangle. Nothing here renders a confidence percentage the API
   did not send.
   ========================================================================== */

.sm-b2b .sm-fit {
  display: grid;
  gap: var(--sm-s4);
  padding: var(--sm-s6);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-md);
  background: var(--sm-surface);
  box-shadow: var(--sm-shadow-sm);
}

.sm-b2b .sm-fit__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sm-s3);
}
.sm-b2b .sm-fit__label {
  color: var(--sm-muted-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.sm-b2b .sm-fit__size {
  color: var(--sm-ink);
  font-size: clamp(34px, 5vw, 46px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
}

.sm-b2b .sm-fit__explain {
  margin: 0;
  color: var(--sm-text);
  font-size: 15px;
  line-height: 1.65;
}

.sm-b2b .sm-fit__measure {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sm-s2) var(--sm-s5);
  padding-top: var(--sm-s4);
  border-top: 1px solid var(--sm-border-soft);
  color: var(--sm-muted-ink);
  font-family: var(--sm-font-mono);
  font-size: 12.5px;
}

.sm-b2b .sm-fit__candidates {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sm-s2);
}
.sm-b2b .sm-fit__candidates li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sm-s3);
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--sm-border-soft);
  border-radius: var(--sm-radius-sm);
  background: var(--sm-surface-2);
  font-size: 14px;
}

/* The honest-uncertainty state. */
.sm-b2b .sm-fit--unavailable {
  border-color: var(--sm-border-firm);
  background: var(--sm-surface-2);
  box-shadow: none;
}
.sm-b2b .sm-fit--unavailable .sm-fit__size {
  color: var(--sm-muted-ink);
  font-size: clamp(20px, 3vw, 26px);
  letter-spacing: -.02em;
  line-height: 1.25;
}
.sm-b2b .sm-fit--unavailable .sm-fit__explain { color: var(--sm-muted-ink); }

.sm-b2b .sm-fit--on-dark {
  border-color: var(--sm-on-dark-line);
  background: rgba(9, 26, 48, .58);
  box-shadow: none;
}
.sm-b2b .sm-fit--on-dark .sm-fit__size { color: var(--sm-on-dark); }
.sm-b2b .sm-fit--on-dark .sm-fit__explain { color: var(--sm-on-dark-2); }
.sm-b2b .sm-fit--on-dark .sm-fit__label,
.sm-b2b .sm-fit--on-dark .sm-fit__measure { color: var(--sm-on-dark-3); }
.sm-b2b .sm-fit--on-dark .sm-fit__measure { border-top-color: var(--sm-on-dark-line); }
.sm-b2b .sm-fit--on-dark .sm-fit__candidates li {
  border-color: var(--sm-on-dark-line);
  background: var(--sm-on-dark-veil);
  color: var(--sm-on-dark-2);
}


/* ==========================================================================
   16. FAQ ACCORDION — details/summary, works with JavaScript disabled
   ========================================================================== */

.sm-b2b .sm-faq {
  display: grid;
  gap: 10px;
  margin-top: var(--sm-s7);
  max-width: 860px;
}

.sm-b2b .sm-faq details {
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-md);
  background: var(--sm-surface);
  overflow: hidden;
  transition: border-color var(--sm-fast) var(--sm-ease);
}
.sm-b2b .sm-faq details[open] { border-color: #cfe0ff; }

.sm-b2b .sm-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 56px;            /* comfortably over the 44px touch floor */
  padding: 16px 20px;
  color: var(--sm-ink);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.sm-b2b .sm-faq summary::-webkit-details-marker { display: none; }
.sm-b2b .sm-faq summary::marker { content: ""; }

/* The +/- affordance. It is decorative: the open state is already exposed to
   assistive tech by details[open]. */
.sm-b2b .sm-faq summary::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--sm-blue-600);
  border-bottom: 2px solid var(--sm-blue-600);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--sm-mid) var(--sm-ease);
}
.sm-b2b .sm-faq details[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.sm-b2b .sm-faq summary:hover { background: var(--sm-surface-2); }

.sm-b2b .sm-faq__answer {
  padding: 0 20px 18px;
  color: var(--sm-text);
  font-size: 15.5px;
  line-height: 1.7;
}
.sm-b2b .sm-faq__answer p:last-child { margin-bottom: 0; }

.sm-b2b .sm-faq--on-dark details {
  border-color: var(--sm-on-dark-line);
  background: var(--sm-on-dark-veil);
}
.sm-b2b .sm-faq--on-dark summary { color: var(--sm-on-dark); }
.sm-b2b .sm-faq--on-dark summary:hover { background: rgba(255, 255, 255, .10); }
.sm-b2b .sm-faq--on-dark summary::after {
  border-right-color: var(--sm-on-dark-accent);
  border-bottom-color: var(--sm-on-dark-accent);
}
.sm-b2b .sm-faq--on-dark .sm-faq__answer { color: var(--sm-on-dark-3); }


/* ==========================================================================
   17. STICKY TOP NAVIGATION + MOBILE DRAWER

   The B2B pages render the SHARED header partial (.sm-header / .sm-nav /
   .sm-navgroup / .sm-navdrop / .sm-burger / .sm-mark / .sm-header-act /
   .sm-acct). Rather than fork the partial, this section re-skins those exact
   class names *inside* `.sm-b2b`. Consumer pages never match, because they
   have no `.sm-b2b` ancestor. `.sm-topnav` is accepted as an alias for a
   purpose-built B2B header.

   NAVIGATION CONTRACT (design system §11/§15): ShirtMath Personal, Personal
   Sign In and Business Sign In must all stay visible in desktop AND drawer.
   `.sm-nav__account` below is the group that holds them; it is never
   `display:none` at any width. Book a Demo sits beside them, never instead
   of them.

   SPECIFICITY FLOOR: sm-content.css reaches (0,3,0) on
   `.sm-navgroup.is-open .sm-navdrop`, so the dropdown rules here carry four
   classes. Marked [floor].
   ========================================================================== */

.sm-b2b .sm-header,
.sm-b2b .sm-topnav {
  position: sticky;
  top: 0;
  z-index: var(--sm-z-sticky);
  background: rgba(4, 16, 34, .82);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--sm-on-dark-line);
  color: var(--sm-on-dark);
}

/* Interior/light pages (portal marketing shells, legal) may opt into a light
   bar; the token swap keeps every child rule identical. */
.sm-b2b .sm-header--onlight,
.sm-b2b .sm-topnav--onlight {
  background: rgba(255, 255, 255, .94);
  border-bottom-color: var(--sm-border);
  color: var(--sm-ink);
}

.sm-b2b .sm-header-in,
.sm-b2b .sm-topnav__in {
  width: min(var(--sm-max), calc(100% - (var(--sm-gutter) * 2)));
  max-width: none;
  margin-inline: auto;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 78px;
}

/* The wordmark is NOT redesigned: it keeps its own family (--sm-serif, which
   §2 deliberately leaves alone) and its rule-icon. Only its colour changes,
   so it reads on the navy bar. */
.sm-b2b .sm-mark {
  color: var(--sm-on-dark);
  font-size: 20px;
  white-space: nowrap;
}
.sm-b2b .sm-header--onlight .sm-mark { color: var(--sm-navy-950); }
.sm-b2b .sm-mark-icon { border-color: var(--sm-cyan-400); }
.sm-b2b .sm-mark-icon::before,
.sm-b2b .sm-mark-icon::after { background: var(--sm-cyan-400); }
.sm-b2b .sm-header--onlight .sm-mark-icon { border-color: var(--sm-blue-500); }
.sm-b2b .sm-header--onlight .sm-mark-icon::before,
.sm-b2b .sm-header--onlight .sm-mark-icon::after { background: var(--sm-blue-500); }

.sm-b2b .sm-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  flex-wrap: wrap;
  max-height: none;
  overflow: visible;
}

.sm-b2b .sm-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--sm-radius-sm);
  background: none;
  color: var(--sm-on-dark-2);
  font: 700 14px/1 var(--sm-font);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--sm-fast) var(--sm-ease), color var(--sm-fast) var(--sm-ease);
}
.sm-b2b .sm-nav-item:hover {
  color: var(--sm-on-dark);
  background: var(--sm-on-dark-veil);
}
.sm-b2b .sm-nav-item[aria-current="page"] { color: var(--sm-on-dark); }
.sm-b2b .sm-nav-item[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--sm-accent-gradient);
}
.sm-b2b .sm-navgroup,
.sm-b2b .sm-nav-item { position: relative; }

/* `.is-b2b` is the consumer header's coral "For Brands" link. On the B2B site
   that link is not the odd one out, so it returns to the normal treatment. */
.sm-b2b .sm-nav-item.is-b2b { color: var(--sm-on-dark-2); }

.sm-b2b .sm-header--onlight .sm-nav-item { color: var(--sm-text); }
.sm-b2b .sm-header--onlight .sm-nav-item:hover { color: var(--sm-blue-700); background: var(--sm-surface-2); }

.sm-b2b .sm-caret { font-size: 9px; opacity: .7; }

/* -- dropdowns [floor: 4 classes] ---------------------------------------- */
.sm-b2b .sm-navgroup .sm-navdrop {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 268px;
  padding: 8px;
  border: 1px solid var(--sm-border);
  border-radius: 14px;
  background: var(--sm-surface);
  box-shadow: var(--sm-shadow-pop);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity var(--sm-fast) var(--sm-ease),
    transform var(--sm-fast) var(--sm-ease),
    visibility var(--sm-fast);
  z-index: var(--sm-z-drop);
}
.sm-b2b .sm-navgroup:hover .sm-navdrop,
.sm-b2b .sm-navgroup:focus-within .sm-navdrop,
.sm-b2b .sm-navgroup.is-open .sm-navdrop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  display: block;
}
.sm-b2b .sm-navgroup .sm-navdrop a {
  display: block;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 9px;
  color: var(--sm-ink);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
}
.sm-b2b .sm-navgroup .sm-navdrop a:hover,
.sm-b2b .sm-navgroup .sm-navdrop a:focus {
  background: var(--sm-surface-2);
  color: var(--sm-blue-700);
}
.sm-b2b .sm-dd-note {
  display: block;
  margin-top: 2px;
  color: var(--sm-muted-ink);
  font-family: var(--sm-font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* -- header actions ------------------------------------------------------ */
.sm-b2b .sm-header-act,
.sm-b2b .sm-nav__account {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.sm-b2b .sm-acct {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  color: var(--sm-on-dark-2);
  font: 700 14px/1 var(--sm-font);
  white-space: nowrap;
}
.sm-b2b .sm-acct:hover { color: var(--sm-on-dark); text-decoration: underline; }
.sm-b2b .sm-header--onlight .sm-acct { color: var(--sm-text); }

/* -- burger --------------------------------------------------------------
   LANDMINE (this exact bug shipped once): the base `display:none` MUST be
   declared BEFORE the media query that flips it to inline-flex. Same
   specificity means source order decides — put this rule after §39 and the
   burger is invisible at every width and the drawer cannot be opened. */
.sm-b2b .sm-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: 0;
  border: 1px solid var(--sm-on-dark-line);
  border-radius: var(--sm-radius-sm);
  background: var(--sm-on-dark-veil);
  color: var(--sm-on-dark);
  font-size: 17px;
  cursor: pointer;
}
.sm-b2b .sm-header--onlight .sm-burger {
  border-color: var(--sm-border);
  background: var(--sm-surface);
  color: var(--sm-ink);
}

/* Scrim behind the open drawer. Rendered by the template as a sibling of the
   nav; harmless if absent. */
.sm-b2b .sm-nav-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--sm-z-scrim);
  background: rgba(2, 8, 23, .55);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--sm-mid) var(--sm-ease), visibility var(--sm-mid);
}
.sm-b2b .sm-nav-scrim.is-open { opacity: 1; visibility: visible; }


/* ==========================================================================
   18. FOOTER
   Also an accessibility repair: the shared footer paints its meta text at
   rgba(255,255,255,.55) on navy, which is below the on-dark floor. Inside
   B2B every one of those runs is lifted to --sm-on-dark-3 (7.4:1 worst case).
   ========================================================================== */

.sm-b2b .sm-footer {
  margin-top: 0;
  padding: 64px 0 36px;
  color: var(--sm-on-dark-3);
  background: var(--sm-navy-950);
  font-size: 14.5px;
}

.sm-b2b .sm-footer-top {
  width: min(var(--sm-max), calc(100% - (var(--sm-gutter) * 2)));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 34px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--sm-on-dark-line);
}
.sm-b2b .sm-footer-top > * { min-width: 0; }

.sm-b2b .sm-footer-mark {
  margin-bottom: 10px;
  color: var(--sm-on-dark);
  font-size: 21px;
}
.sm-b2b .sm-footer-blurb { max-width: 40ch; line-height: 1.65; color: var(--sm-on-dark-3); }

.sm-b2b .sm-footer h3 {
  margin: 0 0 12px;
  color: var(--sm-on-dark-3);
  font-family: var(--sm-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.sm-b2b .sm-footer ul { list-style: none; margin: 0; padding: 0; }
.sm-b2b .sm-footer li { margin: 0 0 4px; }
.sm-b2b .sm-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--sm-on-dark-3);
}
.sm-b2b .sm-footer a:hover { color: var(--sm-on-dark); text-decoration: underline; }

.sm-b2b .sm-footer-bottom {
  width: min(var(--sm-max), calc(100% - (var(--sm-gutter) * 2)));
  margin-inline: auto;
  padding-top: 26px;
}
.sm-b2b .sm-footer-note,
.sm-b2b .sm-footer-legal,
.sm-b2b .sm-footer-copy {
  color: var(--sm-on-dark-3);
  font-size: 13px;
  line-height: 1.6;
}
.sm-b2b .sm-footer-copy a { color: var(--sm-on-dark-3); }


/* ==========================================================================
   19. PORTAL APP SHELL (portal.html — the retailer dashboard)
   Sidebar + main. The sidebar is sticky on desktop, a drawer on mobile
   (§39 collapses it; §28 supplies the drawer behaviour).
   ========================================================================== */

.sm-b2b .sm-app {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--sm-surface-2);
}

.sm-b2b .sm-app__bar {
  position: sticky;
  top: 0;
  z-index: var(--sm-z-sticky);
  min-height: var(--sm-topbar-h);
  display: flex;
  align-items: center;
  gap: var(--sm-s4);
  padding: 0 var(--sm-s6);
  border-bottom: 1px solid var(--sm-border);
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
}
.sm-b2b .sm-app__bar .sm-mark { color: var(--sm-navy-950); }
.sm-b2b .sm-app__tag {
  padding: 3px 9px;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-pill);
  background: var(--sm-surface-3);
  color: var(--sm-muted-ink);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sm-b2b .sm-app__who {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--sm-muted-ink);
  font-size: 14px;
  min-width: 0;
}
.sm-b2b .sm-app__who > * { min-width: 0; }

.sm-b2b .sm-app__shell {
  width: min(var(--sm-max), calc(100% - (var(--sm-gutter) * 2)));
  margin-inline: auto;
  padding: var(--sm-s7) 0 var(--sm-s11);
  display: grid;
  grid-template-columns: var(--sm-side-w) minmax(0, 1fr);
  gap: var(--sm-s7);
  align-items: start;
}
.sm-b2b .sm-app__shell > * { min-width: 0; }

.sm-b2b .sm-app__main {
  display: grid;
  gap: var(--sm-s5);
  min-width: 0;
}


/* ==========================================================================
   20. PORTAL SIDEBAR NAVIGATION
   Groups are labelled; the active item is marked with aria-current, and the
   style hangs off that attribute rather than a class, so the visual state
   cannot drift from the accessible state.
   ========================================================================== */

.sm-b2b .sm-side {
  position: sticky;
  top: calc(var(--sm-topbar-h) + var(--sm-s5));
  padding: 10px;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-md);
  background: var(--sm-surface);
  box-shadow: var(--sm-shadow-sm);
}

.sm-b2b .sm-side__group {
  padding: 14px 12px 5px;
  color: var(--sm-muted-ink);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sm-b2b .sm-side__group:first-child { padding-top: 6px; }

.sm-b2b .sm-side__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--sm-radius-sm);
  background: none;
  color: var(--sm-muted-ink);
  font: 600 14px/1.3 var(--sm-font);
  text-align: left;
  cursor: pointer;
  transition: background var(--sm-fast) var(--sm-ease), color var(--sm-fast) var(--sm-ease);
}
.sm-b2b .sm-side__item:hover {
  background: var(--sm-surface-2);
  color: var(--sm-ink);
}
.sm-b2b .sm-side__item[aria-current="page"],
.sm-b2b .sm-side__item[aria-current="true"] {
  color: #fff;
  background: var(--sm-navy-850);
}
.sm-b2b .sm-side__item[aria-current="page"]:hover,
.sm-b2b .sm-side__item[aria-current="true"]:hover {
  background: var(--sm-navy-800);
  color: #fff;
}

.sm-b2b .sm-side__count {
  margin-left: auto;
  padding: 0 8px;
  border-radius: var(--sm-radius-pill);
  background: var(--sm-surface-3);
  color: var(--sm-muted-ink);
  font-size: 11.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.sm-b2b .sm-side__item[aria-current="true"] .sm-side__count,
.sm-b2b .sm-side__item[aria-current="page"] .sm-side__count {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}


/* ==========================================================================
   21. PORTAL PAGE HEADER AND TOOLBAR
   ========================================================================== */

.sm-b2b .sm-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sm-s4);
  padding-bottom: var(--sm-s5);
  border-bottom: 1px solid var(--sm-border);
}
.sm-b2b .sm-page-head__copy { min-width: 0; }
.sm-b2b .sm-page-head__eyebrow {
  color: var(--sm-blue-600);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.sm-b2b .sm-page-head h1,
.sm-b2b .sm-page-head__title {
  margin: 6px 0 0;
  color: var(--sm-ink);
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1.1;
}
.sm-b2b .sm-page-head__sub {
  margin: 8px 0 0;
  max-width: 68ch;
  color: var(--sm-muted);
  font-size: 15px;
  line-height: 1.6;
}
.sm-b2b .sm-page-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sm-s2);
}

.sm-b2b .sm-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sm-s3);
  padding: var(--sm-s3) var(--sm-s4);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-sm);
  background: var(--sm-surface);
}
.sm-b2b .sm-toolbar__spacer { flex: 1 1 auto; }


/* ==========================================================================
   22. PORTAL PANELS
   ========================================================================== */

.sm-b2b .sm-panel {
  padding: var(--sm-s6);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-md);
  background: var(--sm-surface);
  box-shadow: var(--sm-shadow-sm);
}
.sm-b2b .sm-panel--flush { padding: 0; overflow: hidden; }
.sm-b2b .sm-panel__title {
  margin: 0;
  color: var(--sm-ink);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.sm-b2b .sm-panel__sub {
  margin: 6px 0 var(--sm-s5);
  color: var(--sm-muted);
  font-size: 14px;
  line-height: 1.6;
}
.sm-b2b .sm-panel__section { margin-top: var(--sm-s6); }
.sm-b2b .sm-panel__section + .sm-panel__section { padding-top: var(--sm-s6); border-top: 1px solid var(--sm-border-soft); }

/* Definition list for read-only key/value detail. */
.sm-b2b .sm-kv {
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
  gap: 10px var(--sm-s5);
  margin: 0;
  font-size: 14.5px;
}
.sm-b2b .sm-kv dt { color: var(--sm-muted-ink); font-weight: 700; }
.sm-b2b .sm-kv dd { margin: 0; color: var(--sm-text); overflow-wrap: anywhere; }


/* ==========================================================================
   23. TABLES
   A wide table gets its OWN horizontal scroll container. The page itself must
   never scroll sideways at 390px, so `.sm-tablewrap` is mandatory around any
   table with more than three columns.
   ========================================================================== */

/* `.tablewrap` is the pre-existing markup convention across the content pages
   and the authored B2B bodies use it. Without the alias, .sm-b2b's
   `overflow-x: clip` CLIPS a wide table's last columns — and `clip` does not
   create a scroll container, so they become unreachable rather than merely
   off-screen. Aliasing is the fix; renaming every body is not. */
.sm-b2b .sm-tablewrap,
.sm-b2b .tablewrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-md);
  background: var(--sm-surface);
  /* Keyboard users must be able to reach the scroll container. */
  scrollbar-gutter: stable;
}
.sm-b2b .sm-tablewrap:focus-visible,
.sm-b2b .tablewrap:focus-visible {
  outline: var(--sm-focus-width) solid var(--sm-focus-color);
  outline-offset: var(--sm-focus-offset);
}

.sm-b2b .sm-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
}

.sm-b2b .sm-table th {
  padding: 12px 16px;
  border-bottom: 1px solid var(--sm-border);
  background: var(--sm-surface-2);
  color: var(--sm-muted-ink);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  vertical-align: bottom;
}
.sm-b2b .sm-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--sm-border-soft);
  color: var(--sm-text);
  vertical-align: top;
  overflow-wrap: anywhere;
}
.sm-b2b .sm-table tr:last-child td { border-bottom: 0; }
.sm-b2b .sm-table tbody tr:hover td { background: #fbfdff; }

.sm-b2b .sm-table td.sm-num,
.sm-b2b .sm-table th.sm-num {
  text-align: right;
  font-family: var(--sm-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--sm-ink);
  white-space: nowrap;
}
.sm-b2b .sm-table td.sm-mono { font-family: var(--sm-font-mono); font-size: 12.5px; }
.sm-b2b .sm-table td.sm-actions { white-space: nowrap; text-align: right; }

/* Sortable header: the button carries the semantics, aria-sort carries the
   state, the arrow is decoration. */
.sm-b2b .sm-table th[aria-sort] .sm-table__sort::after {
  content: "\2195";
  margin-left: 6px;
  opacity: .5;
}
.sm-b2b .sm-table th[aria-sort="ascending"] .sm-table__sort::after { content: "\2191"; opacity: 1; }
.sm-b2b .sm-table th[aria-sort="descending"] .sm-table__sort::after { content: "\2193"; opacity: 1; }

/* Sticky header inside a tall scroll container. */
.sm-b2b .sm-tablewrap--tall { max-height: 60vh; overflow-y: auto; }
.sm-b2b .sm-tablewrap--tall .sm-table th { position: sticky; top: 0; z-index: 1; }

.sm-b2b .sm-table__caption {
  padding: var(--sm-s3) var(--sm-s4);
  color: var(--sm-muted-ink);
  font-size: 12.5px;
  text-align: left;
  border-bottom: 1px solid var(--sm-border-soft);
}


/* ==========================================================================
   24. FORMS
   FIXED BUGS 1 and 2: `.sm-input` and `.sm-select` were unscoped in v1 and
   restyled every input on the consumer site. Both are scoped here.
   Every control clears 44px. Font-size stays at 16px on text inputs so iOS
   does not zoom the viewport on focus — a zoom is indistinguishable from a
   layout bug to the user.
   ========================================================================== */

.sm-b2b .sm-field { display: grid; gap: 6px; margin-bottom: var(--sm-s5); }
.sm-b2b .sm-field--inline { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }

.sm-b2b .sm-label {
  display: block;
  color: var(--sm-muted-ink);
  font-size: 13.5px;
  font-weight: 700;
}
.sm-b2b .sm-label__req { color: var(--sm-danger-ink); margin-left: 3px; }
.sm-b2b .sm-label__opt { color: var(--sm-muted); font-weight: 600; margin-left: 6px; }

.sm-b2b .sm-hint {
  color: var(--sm-muted-ink);
  font-size: 12.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* The error message is bound to the control with aria-describedby; the icon
   is decorative because the text already states the problem. */
.sm-b2b .sm-error-text {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--sm-danger-ink);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
}
.sm-b2b .sm-error-text::before { content: "\26A0"; flex: none; }

.sm-b2b .sm-input,
.sm-b2b .sm-select,
.sm-b2b .sm-textarea {
  width: 100%;
  max-width: 100%;
  margin: 0;
  border: 1px solid var(--sm-border);
  border-radius: 11px;
  background: #fff;
  color: var(--sm-text);
  font: 500 16px/1.4 var(--sm-font);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--sm-mid) var(--sm-ease), box-shadow var(--sm-mid) var(--sm-ease);
}

.sm-b2b .sm-input,
.sm-b2b .sm-select { min-height: 46px; padding: 0 14px; }
.sm-b2b .sm-textarea { min-height: 120px; padding: 12px 14px; resize: vertical; }
.sm-b2b .sm-textarea--code { font-family: var(--sm-font-mono); font-size: 13px; line-height: 1.6; }

.sm-b2b .sm-input::placeholder,
.sm-b2b .sm-textarea::placeholder { color: var(--sm-muted); opacity: 1; }

/* The caret is drawn, not an image, so it needs no asset and inherits colour. */
.sm-b2b .sm-select {
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--sm-muted-ink) 50%),
    linear-gradient(135deg, var(--sm-muted-ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.sm-b2b .sm-input:hover,
.sm-b2b .sm-select:hover,
.sm-b2b .sm-textarea:hover { border-color: var(--sm-border-firm); }

.sm-b2b .sm-input:focus,
.sm-b2b .sm-select:focus,
.sm-b2b .sm-textarea:focus {
  border-color: var(--sm-blue-500);
  box-shadow: var(--sm-focus-ring-soft);
}

.sm-b2b .sm-input:disabled,
.sm-b2b .sm-select:disabled,
.sm-b2b .sm-textarea:disabled,
.sm-b2b .sm-input[readonly] {
  background: var(--sm-surface-3);
  color: var(--sm-muted-ink);
  cursor: not-allowed;
}

.sm-b2b .sm-input[aria-invalid="true"],
.sm-b2b .sm-select[aria-invalid="true"],
.sm-b2b .sm-textarea[aria-invalid="true"] {
  border-color: var(--sm-danger);
  box-shadow: 0 0 0 4px rgba(217, 69, 69, .12);
}

.sm-b2b .sm-input--mono { font-family: var(--sm-font-mono); font-size: 14px; }
.sm-b2b .sm-input--sm { min-height: 44px; padding: 0 12px; font-size: 15px; }

/* Prefix / suffix group, e.g. an endpoint base or a unit. */
.sm-b2b .sm-input-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--sm-border);
  border-radius: 11px;
  background: #fff;
  overflow: hidden;
}
.sm-b2b .sm-input-group:focus-within {
  border-color: var(--sm-blue-500);
  box-shadow: var(--sm-focus-ring-soft);
}
.sm-b2b .sm-input-group .sm-input {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
}
.sm-b2b .sm-input-group__affix {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--sm-surface-2);
  color: var(--sm-muted-ink);
  font-family: var(--sm-font-mono);
  font-size: 13px;
  white-space: nowrap;
}

/* -- checkbox and radio ---------------------------------------------------
   The control keeps its native 20px box; the whole label row is the 44px
   touch target. */
.sm-b2b .sm-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  padding: 10px 0;
  color: var(--sm-text);
  font-size: 15px;
  line-height: 1.5;
  cursor: pointer;
}
.sm-b2b .sm-check input[type="checkbox"],
.sm-b2b .sm-check input[type="radio"] {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  flex: none;
  accent-color: var(--sm-blue-600);
  cursor: pointer;
}
.sm-b2b .sm-check__note {
  display: block;
  margin-top: 2px;
  color: var(--sm-muted-ink);
  font-size: 13px;
}
.sm-b2b .sm-check input:disabled,
.sm-b2b .sm-check input:disabled + * { cursor: not-allowed; opacity: .6; }

.sm-b2b .sm-checkgroup { display: grid; gap: 2px; }

.sm-b2b .sm-fieldset {
  margin: 0 0 var(--sm-s6);
  padding: var(--sm-s5);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-md);
}
.sm-b2b .sm-fieldset > legend {
  padding: 0 8px;
  color: var(--sm-ink);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .03em;
}

/* Switch, built on a real checkbox. */
.sm-b2b .sm-switch { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.sm-b2b .sm-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.sm-b2b .sm-switch__track {
  width: 44px;
  height: 26px;
  flex: none;
  border-radius: var(--sm-radius-pill);
  background: #c7d4e4;
  transition: background var(--sm-mid) var(--sm-ease);
  position: relative;
}
.sm-b2b .sm-switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(8, 31, 60, .28);
  transition: transform var(--sm-mid) var(--sm-ease);
}
.sm-b2b .sm-switch input:checked + .sm-switch__track { background: var(--sm-blue-600); }
.sm-b2b .sm-switch input:checked + .sm-switch__track::after { transform: translateX(18px); }
.sm-b2b .sm-switch input:focus-visible + .sm-switch__track {
  outline: var(--sm-focus-width) solid var(--sm-focus-color);
  outline-offset: var(--sm-focus-offset);
}

.sm-b2b .sm-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sm-s3);
  align-items: center;
  margin-top: var(--sm-s6);
  padding-top: var(--sm-s5);
  border-top: 1px solid var(--sm-border-soft);
}


/* ==========================================================================
   25. ALERTS
   Never colour-alone: each variant carries its own glyph and its own heading
   text, so the meaning survives greyscale and colour blindness.
   ========================================================================== */

.sm-b2b .sm-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sm-s3);
  padding: 14px 18px;
  border: 1px solid var(--sm-border);
  border-left-width: 3px;
  border-radius: var(--sm-radius-sm);
  background: var(--sm-surface-2);
  color: var(--sm-muted-ink);
  font-size: 14px;
  line-height: 1.6;
}
.sm-b2b .sm-alert::before {
  content: "\2139";
  flex: none;
  font-weight: 900;
  line-height: 1.5;
}
.sm-b2b .sm-alert__title {
  display: block;
  margin-bottom: 3px;
  color: inherit;
  font-size: 14px;
  font-weight: 800;
}
.sm-b2b .sm-alert__body { min-width: 0; overflow-wrap: anywhere; }
.sm-b2b .sm-alert__actions { margin-top: var(--sm-s3); display: flex; flex-wrap: wrap; gap: var(--sm-s2); }

.sm-b2b .sm-alert--info {
  border-color: #d2e5ff;
  border-left-color: var(--sm-blue-500);
  background: var(--sm-info-tint);
  color: var(--sm-blue-700);
}
.sm-b2b .sm-alert--success {
  border-color: #bfe3d4;
  border-left-color: var(--sm-success);
  background: var(--sm-success-tint);
  color: var(--sm-success-ink);
}
.sm-b2b .sm-alert--success::before { content: "\2713"; }
.sm-b2b .sm-alert--warning {
  border-color: #f0dcb2;
  border-left-color: var(--sm-warning);
  background: var(--sm-warning-tint);
  color: var(--sm-warning-ink);
}
.sm-b2b .sm-alert--warning::before { content: "\26A0"; }
.sm-b2b .sm-alert--danger {
  border-color: #f3c4be;
  border-left-color: var(--sm-danger);
  background: var(--sm-danger-tint);
  color: var(--sm-danger-ink);
}
.sm-b2b .sm-alert--danger::before { content: "\2715"; }

.sm-b2b .sm-alert--on-dark {
  border-color: var(--sm-on-dark-line);
  border-left-color: var(--sm-cyan-400);
  background: var(--sm-on-dark-veil);
  color: var(--sm-on-dark-2);
}


/* ==========================================================================
   26. TABS
   State hangs off aria-selected, so the visual state and the accessible
   state cannot diverge.
   ========================================================================== */

.sm-b2b .sm-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--sm-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sm-b2b .sm-tabs::-webkit-scrollbar { display: none; }

.sm-b2b .sm-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 16px;
  border: 0;
  background: none;
  color: var(--sm-muted-ink);
  font: 700 14px/1 var(--sm-font);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--sm-fast) var(--sm-ease);
}
.sm-b2b .sm-tab:hover { color: var(--sm-ink); }
.sm-b2b .sm-tab[aria-selected="true"] { color: var(--sm-blue-700); }
.sm-b2b .sm-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--sm-accent-gradient);
}
.sm-b2b .sm-tab[disabled] { opacity: .45; cursor: not-allowed; }

.sm-b2b .sm-tabpanel { padding-top: var(--sm-s5); }
.sm-b2b .sm-tabpanel[hidden] { display: none; }


/* ==========================================================================
   27. DIALOGS
   Built for the native <dialog> element: it brings focus trapping, Escape to
   close and inertness for free, none of which a div can be trusted to
   reproduce. A `.sm-dialog` div fallback is styled too, but it must be given
   role="dialog" aria-modal="true" and its own focus management.
   ========================================================================== */

.sm-b2b .sm-dialog {
  width: min(560px, calc(100% - 32px));
  max-height: min(84vh, 720px);
  padding: 0;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-lg);
  background: var(--sm-surface);
  color: var(--sm-text);
  box-shadow: var(--sm-shadow-pop);
  overflow: hidden;
}
.sm-b2b .sm-dialog--wide { width: min(820px, calc(100% - 32px)); }

.sm-b2b .sm-dialog::backdrop {
  background: rgba(2, 8, 23, .55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.sm-b2b .sm-dialog[open] { animation: sm-b2b-pop var(--sm-mid) var(--sm-ease); }
@keyframes sm-b2b-pop {
  from { opacity: 0; transform: translateY(8px) scale(.99); }
  to   { opacity: 1; transform: none; }
}

.sm-b2b .sm-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sm-s4);
  padding: var(--sm-s5) var(--sm-s6);
  border-bottom: 1px solid var(--sm-border-soft);
}
.sm-b2b .sm-dialog__title {
  margin: 0;
  color: var(--sm-ink);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.sm-b2b .sm-dialog__sub { margin: 5px 0 0; color: var(--sm-muted); font-size: 14px; line-height: 1.55; }
.sm-b2b .sm-dialog__body {
  padding: var(--sm-s6);
  overflow-y: auto;
  max-height: calc(84vh - 190px);
}
.sm-b2b .sm-dialog__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sm-s3);
  padding: var(--sm-s4) var(--sm-s6);
  border-top: 1px solid var(--sm-border-soft);
  background: var(--sm-surface-2);
}

.sm-b2b .sm-dialog__close {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--sm-radius-sm);
  background: none;
  color: var(--sm-muted-ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.sm-b2b .sm-dialog__close:hover { background: var(--sm-surface-3); color: var(--sm-ink); }


/* ==========================================================================
   28. DRAWERS
   Used for the portal's detail panes and, at <=1040px, for the marketing
   navigation and the portal sidebar. The scrim is a sibling, so the drawer
   itself keeps a clean stacking context.
   ========================================================================== */

.sm-b2b .sm-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--sm-z-drawer);
  width: min(420px, 92vw);
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--sm-border);
  background: var(--sm-surface);
  box-shadow: var(--sm-shadow-pop);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--sm-slow) var(--sm-ease), visibility var(--sm-slow);
}
.sm-b2b .sm-drawer.is-open,
.sm-b2b .sm-drawer[aria-hidden="false"] { transform: none; visibility: visible; }
.sm-b2b .sm-drawer--left {
  right: auto;
  left: 0;
  border-left: 0;
  border-right: 1px solid var(--sm-border);
  transform: translateX(-100%);
}
.sm-b2b .sm-drawer--left.is-open { transform: none; }

.sm-b2b .sm-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sm-s4);
  padding: var(--sm-s4) var(--sm-s5);
  border-bottom: 1px solid var(--sm-border-soft);
}
.sm-b2b .sm-drawer__title { margin: 0; font-size: 17px; font-weight: 800; color: var(--sm-ink); }
.sm-b2b .sm-drawer__body { padding: var(--sm-s5); overflow-y: auto; flex: 1 1 auto; }
.sm-b2b .sm-drawer__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sm-s3);
  padding: var(--sm-s4) var(--sm-s5);
  border-top: 1px solid var(--sm-border-soft);
  background: var(--sm-surface-2);
}

.sm-b2b .sm-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--sm-z-scrim);
  background: rgba(2, 8, 23, .55);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--sm-mid) var(--sm-ease), visibility var(--sm-mid);
}
.sm-b2b .sm-scrim.is-open { opacity: 1; visibility: visible; }


/* ==========================================================================
   29. TOOLTIPS
   CSS-only, driven by `data-sm-tip`. It shows on hover AND on keyboard focus.
   A tooltip is decoration for a control that already has an accessible name;
   never put information here that exists nowhere else — it is invisible to
   touch users.
   ========================================================================== */

.sm-b2b [data-sm-tip] { position: relative; }

.sm-b2b [data-sm-tip]::after {
  content: attr(data-sm-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: var(--sm-z-drop);
  width: max-content;
  max-width: 240px;
  padding: 7px 10px;
  border-radius: var(--sm-radius-xs);
  background: var(--sm-navy-900);
  color: var(--sm-on-dark);
  font: 600 12px/1.45 var(--sm-font);
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity var(--sm-fast) var(--sm-ease), transform var(--sm-fast) var(--sm-ease);
}
.sm-b2b [data-sm-tip]:hover::after,
.sm-b2b [data-sm-tip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
.sm-b2b [data-sm-tip][data-sm-tip-pos="bottom"]::after {
  bottom: auto;
  top: calc(100% + 8px);
}


/* ==========================================================================
   30. CODE, PRE, KBD, COPY AFFORDANCE, SECRET REVEAL
   API snippets carry long unbreakable tokens (endpoint paths, publishable
   keys). Every rule here wraps rather than widens: `white-space: pre-wrap` +
   `overflow-wrap: anywhere` is what keeps the portal at 390px.
   ========================================================================== */

.sm-b2b .sm-code {
  padding: 2px 6px;
  border: 1px solid var(--sm-border);
  border-radius: 6px;
  background: var(--sm-surface-2);
  color: var(--sm-ink);
  font-family: var(--sm-font-mono);
  font-size: .88em;
  overflow-wrap: anywhere;
}

.sm-b2b .sm-pre {
  position: relative;
  margin: 0;
  padding: 18px 20px;
  border: 0;
  border-radius: var(--sm-radius-sm);
  background: var(--sm-navy-950);
  color: #dce7f3;
  font-family: var(--sm-font-mono);
  font-size: 12.5px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  tab-size: 2;
}
.sm-b2b .sm-pre code { color: inherit; background: none; border: 0; padding: 0; font: inherit; }

/* A named block: header strip with the verb/path and a copy button. */
.sm-b2b .sm-codeblock {
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-md);
  background: var(--sm-navy-950);
  overflow: hidden;
}
.sm-b2b .sm-codeblock__head {
  display: flex;
  align-items: center;
  gap: var(--sm-s3);
  padding: 10px 14px;
  border-bottom: 1px solid var(--sm-on-dark-line);
  color: var(--sm-on-dark-3);
  font-family: var(--sm-font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  min-width: 0;
}
.sm-b2b .sm-codeblock__path { overflow-wrap: anywhere; text-transform: none; letter-spacing: 0; }
.sm-b2b .sm-codeblock .sm-pre { border-radius: 0; }

.sm-b2b .sm-kbd {
  display: inline-block;
  min-width: 22px;
  padding: 2px 6px;
  border: 1px solid var(--sm-border-firm);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--sm-surface);
  color: var(--sm-ink);
  font-family: var(--sm-font-mono);
  font-size: 12px;
  text-align: center;
}

/* -- copy to clipboard ----------------------------------------------------
   The confirmation lives in `data-state="copied"`, set by the page script.
   The visible label swaps AND the script must also announce it in a live
   region: a colour change alone is not a confirmation. */
.sm-b2b .sm-copy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  margin-left: auto;
  padding: 0 10px;
  border: 1px solid var(--sm-on-dark-line);
  border-radius: var(--sm-radius-xs);
  background: var(--sm-on-dark-veil);
  color: var(--sm-on-dark-2);
  font: 700 12px/1 var(--sm-font);
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  flex: none;
  transition: background var(--sm-fast) var(--sm-ease), color var(--sm-fast) var(--sm-ease);
}
.sm-b2b .sm-copy:hover { background: rgba(255, 255, 255, .12); color: var(--sm-on-dark); }
.sm-b2b .sm-copy[data-state="copied"] {
  color: #b8f0d8;
  border-color: rgba(28, 167, 111, .5);
  background: rgba(28, 167, 111, .18);
}
.sm-b2b .sm-copy--onlight {
  border-color: var(--sm-border);
  background: var(--sm-surface);
  color: var(--sm-muted-ink);
}
.sm-b2b .sm-copy--onlight:hover { background: var(--sm-surface-3); color: var(--sm-ink); }
.sm-b2b .sm-copy--onlight[data-state="copied"] {
  color: var(--sm-success-ink);
  border-color: #bfe3d4;
  background: var(--sm-success-tint);
}

/* A copyable value row: key, path, session id. */
.sm-b2b .sm-copyfield {
  display: flex;
  align-items: center;
  gap: var(--sm-s3);
  padding: 10px 12px;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-sm);
  background: var(--sm-surface-2);
  min-width: 0;
}
.sm-b2b .sm-copyfield__value {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--sm-ink);
  font-family: var(--sm-font-mono);
  font-size: 13px;
  overflow-wrap: anywhere;
}

/* A secret shown once. Dashed coral border marks "this will not be shown
   again"; the value stays selectable so it can be copied by hand. */
.sm-b2b .sm-secret {
  padding: 14px;
  border: 1.5px dashed var(--sm-coral-500);
  border-radius: var(--sm-radius-sm);
  background: var(--sm-surface);
  color: var(--sm-ink);
  font-family: var(--sm-font-mono);
  font-size: 13px;
  word-break: break-all;
  user-select: all;
}
.sm-b2b .sm-secret--masked { color: var(--sm-muted-ink); letter-spacing: .12em; }


/* ==========================================================================
   31. TOASTS
   The container is a live region (aria-live="polite"); the toast itself is
   never the only report of an outcome.
   ========================================================================== */

.sm-b2b .sm-toasts {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: var(--sm-z-toast);
  display: grid;
  gap: 10px;
  width: min(420px, calc(100% - 32px));
  transform: translateX(-50%);
  pointer-events: none;
}

.sm-b2b .sm-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--sm-on-dark-line);
  border-radius: var(--sm-radius-sm);
  background: var(--sm-navy-900);
  color: var(--sm-on-dark);
  font-size: 14px;
  line-height: 1.5;
  box-shadow: var(--sm-shadow-lg);
  pointer-events: auto;
  animation: sm-b2b-toast-in var(--sm-slow) var(--sm-ease);
}
.sm-b2b .sm-toast--success { border-left: 3px solid var(--sm-success); }
.sm-b2b .sm-toast--danger  { border-left: 3px solid var(--sm-danger); }
.sm-b2b .sm-toast--warning { border-left: 3px solid var(--sm-warning); }
.sm-b2b .sm-toast__close {
  margin-left: auto;
  width: 28px;
  height: 28px;
  flex: none;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--sm-on-dark-3);
  cursor: pointer;
}
.sm-b2b .sm-toast__close:hover { color: var(--sm-on-dark); background: var(--sm-on-dark-veil); }

@keyframes sm-b2b-toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}


/* ==========================================================================
   32. LOADING SKELETONS
   Every portal view that fetches has three states, and all three are styled
   in this file: skeleton (§32), empty (§33), error (§34). Shipping only the
   happy path is the usual omission.

   A skeleton block must carry aria-hidden="true" and sit inside a container
   with aria-busy="true", so a screen reader hears "busy", not a wall of
   meaningless boxes.
   ========================================================================== */

.sm-b2b .sm-skel {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: var(--sm-surface-3);
}
.sm-b2b .sm-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .68) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: sm-b2b-shimmer 1.4s ease-in-out infinite;
}

@keyframes sm-b2b-shimmer { to { transform: translateX(100%); } }

.sm-b2b .sm-skel--text   { height: 12px; margin: 8px 0; }
.sm-b2b .sm-skel--title  { height: 22px; width: 42%; margin: 0 0 14px; border-radius: 7px; }
.sm-b2b .sm-skel--line-2 { width: 88%; }
.sm-b2b .sm-skel--line-3 { width: 64%; }
.sm-b2b .sm-skel--pill   { height: 24px; width: 92px; border-radius: var(--sm-radius-pill); }
.sm-b2b .sm-skel--avatar { height: 48px; width: 48px; border-radius: 50%; }
.sm-b2b .sm-skel--thumb  { height: 120px; border-radius: var(--sm-radius-sm); }
.sm-b2b .sm-skel--kpi    { height: 30px; width: 60%; margin-top: 7px; border-radius: 7px; }
.sm-b2b .sm-skel--btn    { height: 44px; width: 130px; border-radius: 11px; }

/* A whole card placeholder that keeps the real card's geometry, so the
   layout does not jump when the data lands. */
.sm-b2b .sm-skel-card {
  padding: var(--sm-s6);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-md);
  background: var(--sm-surface);
}

/* A skeleton table body: rows keep the real row height. */
.sm-b2b .sm-skel-rows { display: grid; gap: 1px; background: var(--sm-border-soft); }
.sm-b2b .sm-skel-rows > * {
  display: flex;
  align-items: center;
  gap: var(--sm-s4);
  min-height: 48px;
  padding: 0 16px;
  background: var(--sm-surface);
}
.sm-b2b .sm-skel-rows .sm-skel { flex: 1 1 auto; height: 12px; margin: 0; }
.sm-b2b .sm-skel-rows .sm-skel--narrow { flex: 0 0 90px; }


/* ==========================================================================
   33. EMPTY STATES
   An empty state names what is missing and offers the one action that fills
   it. It is not an error and is never styled in red.
   ========================================================================== */

.sm-b2b .sm-empty {
  display: grid;
  justify-items: center;
  gap: var(--sm-s3);
  padding: var(--sm-s10) var(--sm-s6);
  border: 1px dashed var(--sm-border-firm);
  border-radius: var(--sm-radius-md);
  background: var(--sm-surface-2);
  text-align: center;
}
.sm-b2b .sm-empty--flush { border: 0; background: none; padding: var(--sm-s9) var(--sm-s5); }

.sm-b2b .sm-empty__icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sm-surface-3);
  color: var(--sm-muted-ink);
  font-size: 22px;
}
.sm-b2b .sm-empty__title {
  margin: 0;
  color: var(--sm-ink);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.sm-b2b .sm-empty__body {
  margin: 0;
  max-width: 52ch;
  color: var(--sm-muted);
  font-size: 14.5px;
  line-height: 1.65;
}
.sm-b2b .sm-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sm-s3);
  margin-top: var(--sm-s2);
}

/* Empty state inside a table's own scroll container. */
.sm-b2b .sm-tablewrap .sm-empty { border: 0; background: none; }


/* ==========================================================================
   34. ERROR STATES
   Distinct from an empty state and from the honest "not enough information"
   fit response (§15). An error means something went wrong on our side and
   the user can retry; it names the failure and, where the API gave one,
   shows the status code in `.sm-errorstate__code`.
   ========================================================================== */

.sm-b2b .sm-errorstate {
  display: grid;
  justify-items: center;
  gap: var(--sm-s3);
  padding: var(--sm-s9) var(--sm-s6);
  border: 1px solid #f3c4be;
  border-radius: var(--sm-radius-md);
  background: var(--sm-danger-tint);
  text-align: center;
}
.sm-b2b .sm-errorstate__icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fadbd8;
  color: var(--sm-danger-ink);
  font-size: 22px;
}
.sm-b2b .sm-errorstate__title {
  margin: 0;
  color: var(--sm-danger-ink);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.sm-b2b .sm-errorstate__body {
  margin: 0;
  max-width: 56ch;
  color: var(--sm-danger-ink);
  font-size: 14.5px;
  line-height: 1.65;
}
.sm-b2b .sm-errorstate__code {
  padding: 4px 10px;
  border: 1px solid #f3c4be;
  border-radius: var(--sm-radius-pill);
  background: #fff;
  color: var(--sm-danger-ink);
  font-family: var(--sm-font-mono);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.sm-b2b .sm-errorstate__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sm-s3); margin-top: var(--sm-s2); }

/* An inline row-level error inside an otherwise healthy view. */
.sm-b2b .sm-errorstate--inline {
  justify-items: start;
  text-align: left;
  padding: var(--sm-s4) var(--sm-s5);
  gap: var(--sm-s2);
}
.sm-b2b .sm-errorstate--inline .sm-errorstate__icon { display: none; }


/* ==========================================================================
   35. METERS AND PROGRESS
   `.sm-meter` renders a value the product actually computed. It has no
   default width: with no inline `--sm-meter-value` it renders at zero rather
   than at a flattering default.
   ========================================================================== */

.sm-b2b .sm-meter {
  height: 8px;
  border-radius: var(--sm-radius-pill);
  background: var(--sm-surface-3);
  overflow: hidden;
}
.sm-b2b .sm-meter__fill {
  height: 100%;
  width: var(--sm-meter-value, 0%);
  border-radius: inherit;
  background: var(--sm-accent-gradient);
  transition: width var(--sm-slow) var(--sm-ease);
}
.sm-b2b .sm-meter--success .sm-meter__fill { background: var(--sm-success); }
.sm-b2b .sm-meter--warning .sm-meter__fill { background: var(--sm-warning); }
.sm-b2b .sm-meter--on-dark { background: var(--sm-on-dark-line); }

.sm-b2b .sm-meter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sm-s3);
  font-size: 13px;
  color: var(--sm-muted-ink);
}


/* ==========================================================================
   36. UTILITIES (scoped — there is no such thing as a bare utility here)
   ========================================================================== */

.sm-b2b .sm-u-center { text-align: center; }
.sm-b2b .sm-u-right  { text-align: right; }
.sm-b2b .sm-u-nowrap { white-space: nowrap; }
.sm-b2b .sm-u-wrap   { overflow-wrap: anywhere; }
.sm-b2b .sm-u-muted  { color: var(--sm-muted); }
.sm-b2b .sm-u-ink    { color: var(--sm-ink); }
.sm-b2b .sm-u-on-dark{ color: var(--sm-on-dark-2); }
.sm-b2b .sm-u-mt-0 { margin-top: 0; }
.sm-b2b .sm-u-mt-4 { margin-top: var(--sm-s4); }
.sm-b2b .sm-u-mt-6 { margin-top: var(--sm-s6); }
.sm-b2b .sm-u-mt-8 { margin-top: var(--sm-s8); }
.sm-b2b .sm-u-mb-0 { margin-bottom: 0; }
.sm-b2b .sm-u-full { width: 100%; }
.sm-b2b .sm-u-hidden { display: none; }
.sm-b2b [hidden] { display: none; }


/* ==========================================================================
   37. LEGACY PORTAL DOM ADAPTER
   The portal SPA builds its DOM in JavaScript and emits unprefixed legacy
   class names: .shell, nav.side, .panel, .btn, .pill, .note, .stat, .row,
   .secretbox, #toast, .view, plus bare <table>/<pre>/<label>/<input>.

   Restyling those names GLOBALLY would be the exact firewall breach this
   file forbids, so every rule below is prefixed `.sm-b2b` and simply maps
   the legacy DOM onto the components above. `.sm-b2b table` is a SCOPED
   element selector and is safe; a bare `table` would not be.

   This layer is transitional. As the SPA is migrated to emit `.sm-panel`,
   `.sm-side__item`, `.sm-table` and friends, delete the matching rule here.
   ========================================================================== */

.sm-b2b .shell {
  width: min(var(--sm-max), calc(100% - (var(--sm-gutter) * 2)));
  max-width: none;
  margin-inline: auto;
  padding: var(--sm-s7) 0 var(--sm-s11);
  display: grid;
  grid-template-columns: var(--sm-side-w) minmax(0, 1fr);
  gap: var(--sm-s7);
  align-items: start;
}
.sm-b2b .shell > * { min-width: 0; }

.sm-b2b nav.side {
  position: sticky;
  top: calc(var(--sm-topbar-h) + var(--sm-s5));
  padding: 10px;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-md);
  background: var(--sm-surface);
  box-shadow: var(--sm-shadow-sm);
}
.sm-b2b nav.side button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--sm-radius-sm);
  background: none;
  color: var(--sm-muted-ink);
  font: 600 14px/1.3 var(--sm-font);
  text-align: left;
  cursor: pointer;
}
.sm-b2b nav.side button:hover { background: var(--sm-surface-2); color: var(--sm-ink); }
.sm-b2b nav.side button[aria-current="true"] { background: var(--sm-navy-850); color: #fff; }
.sm-b2b nav.side .grp {
  padding: 14px 12px 5px;
  color: var(--sm-muted-ink);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sm-b2b .panel {
  padding: var(--sm-s6);
  margin-bottom: var(--sm-s5);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-md);
  background: var(--sm-surface);
  box-shadow: var(--sm-shadow-sm);
}
.sm-b2b .panel h2 { margin: 0 0 6px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.sm-b2b .panel h3 { margin: var(--sm-s6) 0 var(--sm-s2); font-size: 16px; font-weight: 800; }
.sm-b2b .sub { margin: 0 0 var(--sm-s4); color: var(--sm-muted); font-size: 14px; }
.sm-b2b .eyebrow {
  margin: 0 0 var(--sm-s2);
  color: var(--sm-blue-600);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.sm-b2b .stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 12px;
  margin-top: var(--sm-s5);
}
.sm-b2b .stat {
  padding: 14px;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-sm);
  background: var(--sm-surface-2);
}
.sm-b2b .stat b {
  display: block;
  color: var(--sm-ink);
  font-size: 30px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.sm-b2b .stat b:empty::after { content: "\2014"; color: var(--sm-muted); }
.sm-b2b .stat span { color: var(--sm-muted-ink); font-size: 12.5px; }

/* Legacy `.btn` mapped onto the §6 button. Complete property set so nothing
   leaks in from the SPA's own stylesheet. */
.sm-b2b .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--sm-navy-850);
  border-radius: var(--sm-radius-sm);
  background: var(--sm-navy-850);
  color: #fff;
  font: 700 14.5px/1 var(--sm-font);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--sm-fast) var(--sm-ease), background var(--sm-fast) var(--sm-ease);
}
.sm-b2b .btn:hover { transform: translateY(-1px); background: var(--sm-navy-800); }
.sm-b2b .btn.sm { min-height: 44px; padding: 0 13px; font-size: 13.5px; }
.sm-b2b .btn.terra {
  background: var(--sm-cta-gradient);
  border-color: transparent;
  box-shadow: var(--sm-shadow-cta);
}
.sm-b2b .btn.ghost {
  background: #fff;
  color: var(--sm-ink);
  border-color: var(--sm-border);
}
.sm-b2b .btn.ghost:hover { background: #fff; border-color: var(--sm-border-firm); color: var(--sm-blue-700); }
.sm-b2b .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* Bare tables emitted by the SPA. */
.sm-b2b table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 12px; }
.sm-b2b th,
.sm-b2b td { padding: 11px 13px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--sm-border-soft); }
.sm-b2b th {
  background: var(--sm-surface-2);
  border-bottom-color: var(--sm-border);
  color: var(--sm-muted-ink);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.sm-b2b tr:last-child td { border-bottom: 0; }
.sm-b2b td { color: var(--sm-text); overflow-wrap: anywhere; }
.sm-b2b td.mono,
.sm-b2b .mono,
.sm-b2b code { font-family: var(--sm-font-mono); font-size: 12.5px; }
.sm-b2b .mono { color: var(--sm-muted-ink); }

.sm-b2b pre {
  margin: 10px 0 0;
  padding: 16px 18px;
  border: 0;
  border-radius: var(--sm-radius-sm);
  background: var(--sm-navy-950);
  color: #dce7f3;
  font-family: var(--sm-font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

.sm-b2b label { display: block; margin: 14px 0 6px; color: var(--sm-muted-ink); font-size: 13.5px; font-weight: 700; }
.sm-b2b input[type="text"],
.sm-b2b input[type="email"],
.sm-b2b input[type="password"],
.sm-b2b input[type="search"],
.sm-b2b input[type="number"],
.sm-b2b input[type="url"],
.sm-b2b select,
.sm-b2b textarea {
  width: 100%;
  max-width: 480px;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--sm-border);
  border-radius: 11px;
  background: var(--sm-surface);
  color: var(--sm-text);
  font: 500 16px/1.4 var(--sm-font);
}
.sm-b2b input[type="text"]:focus,
.sm-b2b input[type="email"]:focus,
.sm-b2b input[type="password"]:focus,
.sm-b2b input[type="search"]:focus,
.sm-b2b input[type="number"]:focus,
.sm-b2b input[type="url"]:focus,
.sm-b2b select:focus,
.sm-b2b textarea:focus {
  border-color: var(--sm-blue-500);
  /* NO `outline: none` here. This selector is (0,3,1) and would beat the
     design system's own focus ring at (0,2,1), silently removing the visible
     focus indicator from every text-like input including .sm-input. The border
     colour and soft glow are supporting affordances, not the indicator. */
  box-shadow: var(--sm-focus-ring-soft);
}
.sm-b2b textarea { min-height: 120px; font-family: var(--sm-font-mono); font-size: 13px; }
.sm-b2b .who select { width: auto; max-width: 230px; min-height: 44px; padding: 7px 10px; font-size: 14px; }

.sm-b2b .row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: var(--sm-s4); }

.sm-b2b .pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 11px;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-pill);
  background: var(--sm-surface-3);
  color: var(--sm-muted-ink);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sm-b2b .pill.ok,
.sm-b2b .pill.live { background: var(--sm-success-tint); color: var(--sm-success-ink); border-color: #bfe3d4; }
.sm-b2b .pill.warn { background: var(--sm-warning-tint); color: var(--sm-warning-ink); border-color: #f0dcb2; }
.sm-b2b .pill.bad  { background: var(--sm-danger-tint);  color: var(--sm-danger-ink);  border-color: #f3c4be; }

.sm-b2b .note {
  margin: var(--sm-s4) 0;
  padding: 14px 18px;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-sm);
  background: var(--sm-surface-2);
  color: var(--sm-muted-ink);
  font-size: 13.5px;
  line-height: 1.6;
}
.sm-b2b .note.p4 { border-left: 3px solid var(--sm-blue-500); }

.sm-b2b .secretbox {
  margin-top: 12px;
  padding: 14px;
  border: 1.5px dashed var(--sm-coral-500);
  border-radius: var(--sm-radius-sm);
  background: var(--sm-surface);
  color: var(--sm-ink);
  font-family: var(--sm-font-mono);
  font-size: 13px;
  word-break: break-all;
}

.sm-b2b #toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: var(--sm-z-toast);
  max-width: calc(100% - 32px);
  padding: 12px 20px;
  border: 1px solid var(--sm-on-dark-line);
  border-radius: var(--sm-radius-sm);
  background: var(--sm-navy-900);
  color: var(--sm-on-dark);
  font-size: 14px;
  box-shadow: var(--sm-shadow-lg);
  transform: translateX(-50%);
}

.sm-b2b .view { display: none; }
.sm-b2b .view.on { display: block; }

/* The portal's own top bar. */
.sm-b2b .smb-topbar {
  position: sticky;
  top: 0;
  z-index: var(--sm-z-sticky);
  border-bottom: 1px solid var(--sm-border);
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
}
.sm-b2b .smb-topbar-in {
  width: min(var(--sm-max), calc(100% - (var(--sm-gutter) * 2)));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--sm-s4);
  min-height: var(--sm-topbar-h);
}
.sm-b2b .smb-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--sm-navy-950);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.sm-b2b .smb-tag {
  padding: 3px 9px;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-pill);
  background: var(--sm-surface-3);
  color: var(--sm-muted-ink);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.sm-b2b .who {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--sm-muted-ink);
  font-size: 14px;
}
.sm-b2b .rule-icon {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 14px;
  flex: none;
  border: 1.5px solid var(--sm-blue-500);
  border-bottom-width: 3px;
  border-radius: 2px;
}
.sm-b2b .rule-icon::before,
.sm-b2b .rule-icon::after {
  content: "";
  position: absolute;
  top: 2px;
  width: 1.5px;
  height: 5px;
  background: var(--sm-blue-500);
}
.sm-b2b .rule-icon::before { left: 5px; }
.sm-b2b .rule-icon::after { right: 5px; }


/* ==========================================================================
   38. SHARED-PARTIAL COMPATIBILITY
   When a B2B page renders the generator's article partial (`.sm-doc`), its
   consumer typography follows. These rules re-typeset it into the B2B system
   — and are the reason §2 could safely leave `--sm-serif` alone.
   ========================================================================== */

.sm-b2b .sm-doc h1,
.sm-b2b .sm-doc h2,
.sm-b2b .sm-doc h3,
.sm-b2b .sm-doc .prose h2,
.sm-b2b .sm-doc .prose h3 {
  font-family: var(--sm-font);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--sm-ink);
}
.sm-b2b .sm-doc .prose { color: var(--sm-text); }
.sm-b2b .sm-lede { color: var(--sm-muted); }
.sm-b2b .sm-eyebrow {
  font-family: var(--sm-font);
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--sm-blue-600);
}

/* THE WORDMARK IS NOT REDESIGNED. Re-asserted explicitly so that a future
   token edit cannot silently re-typeset it. */
.sm-b2b .sm-mark,
.sm-b2b .sm-footer-mark,
.sm-b2b .smb-wordmark { font-family: var(--sm-serif, "Fraunces", Georgia, serif); }


/* ==========================================================================
   39. RESPONSIVE — 1440 / 1024 / 768 / 390
   Verification targets. Most of the work is done by the tokens: dropping
   --sm-gutter and --sm-section-y re-flows every container and section at
   once, so nothing can be left behind at one breakpoint.

   The 390px contract: no horizontal page scroll. Wide content lives in its
   own scroll container (.sm-tablewrap, .sm-tabs, .sm-pre); long tokens wrap
   via overflow-wrap; grids use minmax(0, …) so a long string cannot set a
   column's width.
   ========================================================================== */

/* -- >= 1440: the layout is already at its max width; only the gutter grows */
@media (min-width: 1440px) {
  .sm-b2b { --sm-gutter: 56px; }
}

/* -- <= 1200 -------------------------------------------------------------- */
@media (max-width: 1200px) {
  .sm-b2b { --sm-gutter: 36px; --sm-section-y: 84px; --sm-side-w: 224px; }
  .sm-b2b .sm-hero__inner { gap: 40px; }
}

/* -- <= 1040: navigation becomes a drawer, sidebar collapses -------------- */
@media (max-width: 1040px) {
  .sm-b2b { --sm-section-y: 76px; }

  .sm-b2b .sm-header-in,
  .sm-b2b .sm-topnav__in { gap: 12px; min-height: 68px; }

  /* Burger appears. This rule sits AFTER the base `display:none` in §17 —
     equal specificity, so source order is what makes the button visible.
     Do not move it above §17. */
  .sm-b2b .sm-burger { display: inline-flex; order: 3; margin-left: 0; }
  .sm-b2b .sm-header-act,
  .sm-b2b .sm-nav__account { order: 2; margin-left: auto; }

  /* Off-canvas drawer. `flex:0 0 auto` and fixed positioning replace the
     shared sheet's max-height accordion; the shared rules are (0,1,0)/(0,2,0)
     and these are (0,2,0)/(0,3,0), so these win. */
  .sm-b2b .sm-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: var(--sm-z-drawer);
    width: min(360px, 88vw);
    max-height: none;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 84px 16px 24px;
    overflow-y: auto;
    background: var(--sm-navy-950);
    border-left: 1px solid var(--sm-on-dark-line);
    box-shadow: var(--sm-shadow-lg);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--sm-slow) var(--sm-ease), visibility var(--sm-slow);
  }
  .sm-b2b .sm-nav.is-open { transform: none; visibility: visible; }

  .sm-b2b .sm-nav-item {
    width: 100%;
    justify-content: space-between;
    min-height: 48px;
    color: var(--sm-on-dark-2);
    font-size: 15px;
  }
  .sm-b2b .sm-nav-item[aria-current="page"]::after { display: none; }

  /* Sub-menus become inline lists inside the drawer.
     [floor] four classes, to beat `.sm-navgroup.is-open .sm-navdrop`. */
  .sm-b2b .sm-navgroup .sm-navdrop {
    position: static;
    min-width: 0;
    margin: 0 0 6px 12px;
    padding: 0 0 6px 12px;
    border: 0;
    border-left: 2px solid var(--sm-on-dark-line);
    border-radius: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }
  .sm-b2b .sm-navgroup.is-open .sm-navdrop { display: block; }
  /* The negation belongs on the GROUP: `.is-open` is set there, never on the
     drop. With it on the drop the test was always true and, being more
     specific than the rule that opens the drawer, it closed the submenu the
     moment a tap left a sticky :hover behind. */
  .sm-b2b .sm-navgroup:not(.is-open):hover .sm-navdrop { display: none; }
  .sm-b2b .sm-navgroup .sm-navdrop a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 46px;
    color: var(--sm-on-dark-2);
  }
  .sm-b2b .sm-navgroup .sm-navdrop a:hover,
  .sm-b2b .sm-navgroup .sm-navdrop a:focus {
    background: var(--sm-on-dark-veil);
    color: var(--sm-on-dark);
  }
  .sm-b2b .sm-dd-note { color: var(--sm-on-dark-3); }

  /* The account entry points stay visible inside the drawer — never hidden,
     never footer-only (design system §11/§15). */
  .sm-b2b .sm-nav .sm-nav__account {
    order: 99;
    margin: 16px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--sm-on-dark-line);
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .sm-b2b .sm-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding-top: 72px;
  }
  .sm-b2b .sm-feature-grid,
  .sm-b2b .sm-feature-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm-b2b .sm-kpi-grid,
  .sm-b2b .sm-kpi-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm-b2b .sm-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm-b2b .sm-split { grid-template-columns: minmax(0, 1fr); gap: var(--sm-s7); }

  /* Portal: one column, sidebar becomes a horizontally scrolling strip.
     The strip scrolls INSIDE itself, so the page still does not move. */
  .sm-b2b .sm-app__shell,
  .sm-b2b .shell { grid-template-columns: minmax(0, 1fr); gap: var(--sm-s5); }
  .sm-b2b .sm-side,
  .sm-b2b nav.side {
    position: static;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px;
  }
  .sm-b2b .sm-side__item,
  .sm-b2b nav.side button { width: auto; white-space: nowrap; padding: 0 14px; }
  .sm-b2b .sm-side__group,
  .sm-b2b nav.side .grp {
    display: flex;
    align-items: center;
    padding: 0 6px;
    white-space: nowrap;
    opacity: .85;
  }
  /* Opt-in true drawer for the sidebar where the portal wires up a toggle. */
  .sm-b2b .sm-side--drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: var(--sm-z-drawer);
    width: min(300px, 86vw);
    display: block;
    overflow-y: auto;
    border-radius: 0;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--sm-slow) var(--sm-ease), visibility var(--sm-slow);
  }
  .sm-b2b .sm-side--drawer.is-open { transform: none; visibility: visible; }
  .sm-b2b .sm-side--drawer .sm-side__item { width: 100%; }
}

/* -- <= 768 --------------------------------------------------------------- */
@media (max-width: 768px) {
  .sm-b2b { --sm-gutter: 24px; --sm-section-y: 64px; --sm-grid-gap: 16px; }

  .sm-b2b .sm-hero__inner { gap: 32px; padding: 56px 0 56px; }
  .sm-b2b .sm-hero h1,
  .sm-b2b .sm-hero__title { max-width: none; }
  .sm-b2b .sm-hero__frame { padding: var(--sm-s5); }

  .sm-b2b .sm-dark-band { padding: 34px 26px; border-radius: 18px; }
  .sm-b2b .sm-dark-band__inner { gap: 20px; }

  .sm-b2b .sm-price-grid { grid-template-columns: minmax(0, 1fr); }
  .sm-b2b .sm-footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
  .sm-b2b .sm-kv { grid-template-columns: minmax(0, 1fr); gap: 2px var(--sm-s4); }
  .sm-b2b .sm-kv dd { margin-bottom: var(--sm-s3); }

  .sm-b2b .sm-page-head { align-items: flex-start; }
  .sm-b2b .sm-panel,
  .sm-b2b .panel,
  .sm-b2b .sm-card--pad,
  .sm-b2b .sm-feature-card,
  .sm-b2b .sm-price { padding: var(--sm-s5); }

  /* Dialogs become bottom sheets: reachable with a thumb. */
  .sm-b2b .sm-dialog,
  .sm-b2b .sm-dialog--wide {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    margin: auto 0 0;
    border-radius: var(--sm-radius-lg) var(--sm-radius-lg) 0 0;
  }
  .sm-b2b .sm-dialog__body { max-height: calc(92vh - 190px); }
  .sm-b2b .sm-dialog__foot .sm-btn { flex: 1 1 auto; }

  .sm-b2b .sm-drawer { width: min(420px, 100vw); }
}

/* -- <= 560: single column everywhere ------------------------------------- */
@media (max-width: 560px) {
  .sm-b2b .sm-feature-grid,
  .sm-b2b .sm-feature-grid--2,
  .sm-b2b .sm-feature-grid--4,
  .sm-b2b .sm-kpi-grid,
  .sm-b2b .sm-kpi-grid--3,
  .sm-b2b .sm-grid--2,
  .sm-b2b .sm-grid--3,
  .sm-b2b .sm-grid--4 { grid-template-columns: minmax(0, 1fr); }

  .sm-b2b .sm-footer-top { grid-template-columns: minmax(0, 1fr); }
}

/* -- <= 420 (390px reference device) -------------------------------------- */
@media (max-width: 420px) {
  .sm-b2b { --sm-gutter: 18px; --sm-section-y: 56px; }

  .sm-b2b .sm-hero__actions { flex-direction: column; align-items: stretch; }
  .sm-b2b .sm-hero__actions .sm-btn { width: 100%; }
  .sm-b2b .sm-price__cta .sm-btn { width: 100%; }
  .sm-b2b .sm-form-actions .sm-btn { flex: 1 1 100%; }

  .sm-b2b .sm-header-in,
  .sm-b2b .sm-topnav__in { gap: 8px; }
  .sm-b2b .sm-acct { padding: 0 2px; }
  .sm-b2b .sm-header-act .sm-btn--sm { padding: 0 12px; font-size: 12.5px; }

  .sm-b2b .sm-dark-band { padding: 28px 20px; }
  .sm-b2b .sm-empty,
  .sm-b2b .sm-errorstate { padding: var(--sm-s8) var(--sm-s5); }
  .sm-b2b .sm-pre,
  .sm-b2b pre { padding: 14px; font-size: 12px; }
  .sm-b2b .sm-fit__measure { gap: 6px var(--sm-s4); }

  /* Legacy inputs stop trying to be 480px wide inside a 354px column. */
  .sm-b2b input[type="text"],
  .sm-b2b input[type="email"],
  .sm-b2b input[type="password"],
  .sm-b2b input[type="search"],
  .sm-b2b input[type="number"],
  .sm-b2b input[type="url"],
  .sm-b2b select,
  .sm-b2b textarea { max-width: 100%; }
}


/* ==========================================================================
   40. ACCESSIBILITY
   ========================================================================== */

/* -- focus ---------------------------------------------------------------
   One ring, one token, every focusable control. 2px + 2px offset. Declared
   with :focus-visible so a mouse click does not paint a ring, and with a
   :focus fallback for browsers without :focus-visible. */
.sm-b2b a:focus-visible,
.sm-b2b button:focus-visible,
.sm-b2b input:focus-visible,
.sm-b2b select:focus-visible,
.sm-b2b textarea:focus-visible,
.sm-b2b summary:focus-visible,
.sm-b2b [tabindex]:focus-visible,
.sm-b2b .sm-btn:focus-visible,
.sm-b2b .sm-tab:focus-visible,
.sm-b2b .sm-side__item:focus-visible,
.sm-b2b .sm-nav-item:focus-visible,
.sm-b2b .sm-copy:focus-visible,
.sm-b2b .btn:focus-visible,
.sm-b2b nav.side button:focus-visible {
  outline: var(--sm-focus-width) solid var(--sm-focus-color);
  outline-offset: var(--sm-focus-offset);
  border-radius: var(--sm-radius-xs);
}

/* On navy the blue ring loses contrast; the cyan one measures 13.1:1. */
.sm-b2b .sm-hero a:focus-visible,
.sm-b2b .sm-hero button:focus-visible,
.sm-b2b .sm-header a:focus-visible,
.sm-b2b .sm-header button:focus-visible,
.sm-b2b .sm-topnav a:focus-visible,
.sm-b2b .sm-topnav button:focus-visible,
.sm-b2b .sm-nav a:focus-visible,
.sm-b2b .sm-nav button:focus-visible,
.sm-b2b .sm-dark-band a:focus-visible,
.sm-b2b .sm-dark-band button:focus-visible,
.sm-b2b .sm-section--dark a:focus-visible,
.sm-b2b .sm-section--dark button:focus-visible,
.sm-b2b .sm-footer a:focus-visible,
.sm-b2b .sm-codeblock button:focus-visible,
.sm-b2b .sm-toast button:focus-visible {
  outline-color: var(--sm-focus-color-dark);
}

/* Never remove the ring without replacing it. */
.sm-b2b *:focus { outline-color: var(--sm-focus-color); }

/* -- skip link ------------------------------------------------------------ */
.sm-b2b .sm-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 18px;
  background: var(--sm-surface);
  color: var(--sm-ink);
  font-weight: 800;
  border-radius: 0 0 var(--sm-radius-sm) 0;
}
.sm-b2b .sm-skip:focus { left: 0; }

/* -- screen-reader-only text --------------------------------------------- */
.sm-b2b .sm-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.sm-b2b .sm-sr-only--focusable:focus,
.sm-b2b .sm-sr-only--focusable:active {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}

/* -- touch targets --------------------------------------------------------
   On any coarse pointer, every interactive element reaches the 44px floor,
   including the compact variants used for density on desktop. */
@media (hover: none), (pointer: coarse) {
  .sm-b2b .sm-btn,
  .sm-b2b .sm-btn--sm,
  .sm-b2b .btn,
  .sm-b2b .btn.sm,
  .sm-b2b .sm-tab,
  .sm-b2b .sm-nav-item,
  .sm-b2b .sm-side__item,
  .sm-b2b nav.side button,
  .sm-b2b .sm-copy,
  .sm-b2b .sm-toast__close,
  .sm-b2b .sm-dialog__close { min-height: 44px; }

  .sm-b2b .sm-toast__close,
  .sm-b2b .sm-btn--icon { min-width: 44px; }

  /* Tooltips are unreachable by touch, so anything inside one must also
     exist as visible text. This makes the omission obvious in review. */
  .sm-b2b [data-sm-tip]::after { display: none; }
}

/* -- reduced motion -------------------------------------------------------
   Scoped to .sm-b2b. The v1 sheet reached out to `html` here, which is a
   bare element selector and therefore a firewall breach (fixed bug 4).
   Motion that conveys meaning is not removed, only stilled: the mesh stops,
   transitions collapse, nothing disappears. */
@media (prefers-reduced-motion: reduce) {
  .sm-b2b { scroll-behavior: auto; }
  .sm-b2b,
  .sm-b2b *,
  .sm-b2b *::before,
  .sm-b2b *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .sm-b2b .sm-hero::before { animation: none; }
  .sm-b2b .sm-skel::after { animation: none; opacity: .5; }
  .sm-b2b .sm-btn:hover,
  .sm-b2b .sm-card--interactive:hover,
  .sm-b2b .sm-card--interactive:focus-within,
  .sm-b2b .btn:hover { transform: none; }
}

/* -- forced colours -------------------------------------------------------
   In forced-colors mode, backgrounds and gradients are dropped by the UA.
   Two things break without help: gradient-clipped text becomes invisible,
   and borderless surfaces lose their edges. */
@media (forced-colors: active) {
  .sm-b2b .sm-gradient-text {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: LinkText;
  }
  .sm-b2b .sm-card,
  .sm-b2b .sm-panel,
  .sm-b2b .panel,
  .sm-b2b .sm-dialog,
  .sm-b2b .sm-drawer,
  .sm-b2b .sm-toast,
  .sm-b2b .sm-alert,
  .sm-b2b .sm-price,
  .sm-b2b .sm-tablewrap { border: 1px solid CanvasText; }

  .sm-b2b .sm-btn,
  .sm-b2b .btn { border: 1px solid ButtonText; }

  .sm-b2b .sm-tab[aria-selected="true"]::after,
  .sm-b2b .sm-nav-item[aria-current="page"]::after,
  .sm-b2b .sm-meter__fill { background: Highlight; forced-color-adjust: none; }

  .sm-b2b .sm-side__item[aria-current="true"],
  .sm-b2b .sm-side__item[aria-current="page"],
  .sm-b2b nav.side button[aria-current="true"] {
    background: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }

  .sm-b2b a:focus-visible,
  .sm-b2b button:focus-visible { outline-color: Highlight; }
}


/* ==========================================================================
   41. PRINT
   A retailer printing an invoice, a size-guide coverage report or an API
   reference should get the content, not the chrome.
   ========================================================================== */

@media print {
  .sm-b2b .sm-header,
  .sm-b2b .sm-topnav,
  .sm-b2b .sm-burger,
  .sm-b2b .sm-nav,
  .sm-b2b .sm-nav-scrim,
  .sm-b2b .sm-scrim,
  .sm-b2b .sm-side,
  .sm-b2b nav.side,
  .sm-b2b .sm-app__bar,
  .sm-b2b .smb-topbar,
  .sm-b2b .sm-toasts,
  .sm-b2b #toast,
  .sm-b2b .sm-drawer,
  .sm-b2b .sm-footer,
  .sm-b2b .sm-skel,
  .sm-b2b .sm-skel-card { display: none !important; }

  .sm-b2b,
  .sm-b2b .sm-section,
  .sm-b2b .sm-hero,
  .sm-b2b .sm-dark-band {
    color: #000;
    background: #fff !important;
    box-shadow: none !important;
  }
  .sm-b2b .sm-hero h1,
  .sm-b2b .sm-hero__lead,
  .sm-b2b .sm-dark-band h2,
  .sm-b2b .sm-dark-band p { color: #000; }

  .sm-b2b .sm-app__shell,
  .sm-b2b .shell { display: block; padding: 0; }

  .sm-b2b .sm-card,
  .sm-b2b .sm-panel,
  .sm-b2b .panel,
  .sm-b2b .sm-price { border: 1px solid #999; box-shadow: none; break-inside: avoid; }

  .sm-b2b .sm-tablewrap { overflow: visible; }
  .sm-b2b .sm-table { min-width: 0; }
  .sm-b2b .sm-pre,
  .sm-b2b pre { background: #f4f4f4; color: #000; border: 1px solid #ccc; }

  /* details/summary content must print whether or not it was opened. */
  .sm-b2b .sm-faq details > * { display: block !important; }
}

/* ==========================================================================
   END. Before shipping any change to this file:
     1. grep for a selector that does not start with `.sm-b2b` — there must
        be none outside comments, @media and @keyframes;
     2. re-render two consumer pages as negative controls and diff them;
     3. check 1440 / 1024 / 768 / 390 for horizontal page scroll;
     4. tab through one marketing page and one portal view for the ring.
   ========================================================================== */


/* ==========================================================================
   42. HERO-IN-BODY SHELL
   A B2B page owns its whole hero, h1 included, so the dark band starts at the
   top of <main> instead of below a template-rendered heading. That means the
   article wrapper must stop constraining width and adding padding — each
   section restores its own gutter with .sm-container.
   Scoped to .sm-b2b, so the consumer article shell is untouched.
   ========================================================================== */

.sm-b2b .sm-article,
.sm-b2b main.sm-article.sm-doc {
  max-width: none;
  padding: 0;
}

.sm-b2b .sm-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.sm-b2b .sm-hero__copy > * { margin: 0; }

.sm-b2b .sm-hero__media {
  position: relative;
  min-width: 0;
}

.sm-b2b .sm-hero .sm-verified {
  margin-top: 4px;
  color: var(--sm-on-dark-3);
  font-family: var(--sm-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sm-b2b .sm-hero-demo__cap {
  margin: 14px 0 0;
  color: var(--sm-on-dark-3);
  font-size: 12.5px;
  line-height: 1.6;
  max-width: 52ch;
}

@media (max-width: 1020px) {
  .sm-b2b .sm-hero__media { order: 2; }
}

/* ==========================================================================
   43. THE AUDIENCE / ACCOUNT CONTRACT
   ShirtMath Personal, Personal Sign In and Business Sign In are permanent
   navigation, not decoration: the brief makes a missing, hidden or footer-only
   entry a release blocker, and explicitly forbids the demo CTA from displacing
   account access.

   They are rendered twice — once in the header action row, once inside the
   drawer — and one set is hidden per breakpoint. A collapsed dropdown was
   rejected: `display:none` inside a closed disclosure is "hidden" by the
   brief's own test, and 390px cannot hold four links beside a burger.
   ========================================================================== */

.sm-b2b .sm-nav__audience { display: none; }

.sm-b2b .sm-acct {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  color: var(--sm-on-dark-2, #cfe0f2);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
}

.sm-b2b .sm-header--onlight .sm-acct { color: var(--sm-muted-ink, #40536b); }
.sm-b2b .sm-acct:hover { color: var(--sm-on-dark, #fff); text-decoration: underline; }
.sm-b2b .sm-header--onlight .sm-acct:hover { color: var(--sm-ink, #07172b); }

/* Business sign in is the retailer's own door; give it a little more weight than
   the consumer links without letting it read as the primary CTA. */
.sm-b2b .sm-acct--biz {
  padding: 0 12px;
  border: 1px solid var(--sm-on-dark-border, rgba(255,255,255,.28));
  border-radius: 10px;
}
.sm-b2b .sm-header--onlight .sm-acct--biz { border-color: var(--sm-border, #dce5f0); }

@media (max-width: 1040px) {
  /* The drawer carries the contract; the action row keeps only the CTA. */
  .sm-b2b .sm-header-act .sm-acct { display: none; }

  .sm-b2b .sm-nav__audience {
    display: grid;
    gap: 2px;
    width: 100%;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--sm-on-dark-border, rgba(255,255,255,.18));
  }

  .sm-b2b .sm-nav__audience-label {
    padding: 2px 0 4px;
    color: var(--sm-on-dark-3, #9fb6cc);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
  }

  .sm-b2b .sm-nav__audience .sm-nav-item { min-height: 46px; width: 100%; }
}

/* ==========================================================================
   44. THE CLOSED DRAWER MUST NOT EXTEND THE PAGE
   The off-canvas drawer was hidden with `transform: translateX(100%)` while
   `position: fixed`. Measured at 390px: the closed drawer sat from x=390 to
   x=733 and added 343px to documentElement.scrollWidth — the page scrolled
   sideways on every B2B content page.

   `html { overflow-x: clip }` would have made the number go away. It was
   rejected deliberately: clipping at the root hides ALL future horizontal
   overflow from the very check that is supposed to catch it, which turns one
   visible bug into a permanently invisible class of bug.

   So the drawer no longer leaves the viewport. It stays pinned at right: 0 and
   hides with opacity and visibility, animating on the vertical axis where a
   translation cannot create horizontal scroll. Same affordance, same motion,
   no masking.
   ========================================================================== */

@media (max-width: 1040px) {
  .sm-b2b .sm-nav {
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
  }

  .sm-b2b .sm-nav.is-open {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

@media (max-width: 1040px) and (prefers-reduced-motion: reduce) {
  .sm-b2b .sm-nav { transform: none; }
}


/* ==========================================================================
   45. HERO HEADLINE WINS ON SPECIFICITY, NOT ON LINE NUMBER
   `.sm-b2b .sm-doc h1` and `.sm-b2b .sm-hero h1` are both (0,2,1). The .sm-doc
   rule sits later in this file, so it won on source order and painted the
   headline #07172b on the #020817 hero — measured at rgb(7,23,43), invisible.
   Winning by being last is fragile: the next reorder silently breaks it again.
   These selectors are (0,3,1) and (0,4,1), so they win on merit.

   The copy column also gets more room. A 74px headline in a .88fr column broke
   "Your shoppers already own a shirt that fits" across five lines.
   ========================================================================== */

.sm-b2b .sm-doc .sm-hero h1,
.sm-b2b .sm-hero .sm-hero__copy h1 {
  color: var(--sm-on-dark);
}

.sm-b2b .sm-hero .sm-hero__copy h1 {
  max-width: 15ch;
  font-size: clamp(38px, 4.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.sm-b2b .sm-hero__inner {
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
}

@media (max-width: 1020px) {
  .sm-b2b .sm-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .sm-b2b .sm-hero .sm-hero__copy h1 { max-width: none; }
}


/* ==========================================================================
   45. THE SIX-ITEM DESKTOP NAV
   Home, Product, How it works, Pricing, FAQ and Developers need 538px at the
   base type scale; the header column leaves the nav 454px once the wordmark
   and the four contract links have taken their share. This trims the items to
   438px so the row holds on one line. It applies only above the drawer
   breakpoint — inside the drawer the items keep their full 12px padding,
   because there the constraint is the touch target, not the width.
   ========================================================================== */

@media (min-width: 1041px) {
  .sm-b2b .sm-nav { gap: 0; }
  .sm-b2b .sm-nav-item { padding: 0 6px; font-size: 13px; }

  /* The six items need ~438px. The header column caps at 1220px and the
     wordmark plus the four contract links take the rest, so the nav is left
     with 454px at best and 418px at 1280. Trimming the account row and the
     header gap buys back the difference, which is what keeps the row on ONE
     line at 1280 without hiding anything. */
  .sm-b2b .sm-header-act { gap: 2px; }
  .sm-b2b .sm-header-act .sm-acct { font-size: 13px; padding: 0 4px; }
  .sm-b2b .sm-header-in { gap: 16px; }
}


/* ==========================================================================
   46. FACT GRID
   .sm-facts / .sm-fact / .sm-fact__label were used by the homepage capability
   list and by three of the six-page B2B pages while having no definition
   anywhere, so they rendered as unstyled stacked blocks. Same visual language
   as .sm-feature-grid + .sm-card: a bordered surface card, with the label in
   the eyebrow idiom above the heading.
   ========================================================================== */

.sm-b2b .sm-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sm-grid-gap);
  margin-top: 36px;
}
.sm-b2b .sm-facts > * { min-width: 0; }

.sm-b2b .sm-fact {
  padding: 26px;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-md);
  background: var(--sm-surface);
  box-shadow: var(--sm-shadow-sm);
}

.sm-b2b .sm-fact__label {
  display: inline-flex;
  align-items: center;
  margin: 0 0 10px;
  color: var(--sm-blue-600);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sm-b2b .sm-fact h3 { margin: 0 0 8px; }
.sm-b2b .sm-fact p:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .sm-b2b .sm-facts { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   47. SHIP-BLOCKER REPAIRS (found by crawling the deployed site)
   ========================================================================== */

/* D5 — section 42 strips width and padding from main.sm-article.sm-doc on the
   assumption that every child restores its own gutter with .sm-container. The
   homepage does, because it owns .sm-hero. The five standalone pages do not:
   their template-rendered title block (eyebrow / h1 / lede / verified) are bare
   children of <main>, so the h1 sat at x=0 while the breadcrumb directly above
   it sat at x=110, and at 390px the heading touched both screen edges. */
.sm-b2b main.sm-article.sm-doc > .sm-eyebrow,
.sm-b2b main.sm-article.sm-doc > h1,
.sm-b2b main.sm-article.sm-doc > .sm-lede,
.sm-b2b main.sm-article.sm-doc > .sm-verified {
  /* Compute the container LEFT EDGE rather than centring the element.
     The h1 and lede carry their own max-width for measure, so auto
     margins centred them instead of aligning them: at 1440 the h1
     landed at x=368 and the lede at x=345 while the header sat at
     x=110 and the inline-block eyebrow stayed at x=0. This puts all
     four on the same edge as .sm-container at every width. */
  margin-left: max(var(--sm-gutter), calc((100% - var(--sm-max)) / 2));
  margin-right: var(--sm-gutter);
}

/* D4 — .sm-b2b .sm-doc h2 (section 39) paints every h2 --sm-ink, including the
   one inside the dark closing band, giving rgb(7,23,43) on rgb(4,16,34): a
   contrast ratio of 1.04:1, i.e. invisible. Driven off the band attribute the
   markup already sets so any future dark band is covered too. */
.sm-b2b .scan-cta h2,
.sm-b2b .sm-doc .scan-cta h2,
.sm-b2b [data-sm-band="dark"] h2,
.sm-b2b .sm-doc [data-sm-band="dark"] h2 {
  color: var(--sm-on-dark);
}

/* D17 — the steps component numbers itself with a counter and styles the step
   title as `> li b`. The markup uses <h3>, which is the correct heading level
   under an h2, so the title rendered at the default 19px instead of 17px/800. */
.sm-b2b .sm-steps > li h3 {
  display: block;
  margin: 0 0 4px;
  color: var(--sm-ink);
  font-size: 17px;
  font-weight: 800;
}
.sm-b2b .sm-steps--on-dark > li h3 { color: var(--sm-on-dark); }

@media (max-width: 1040px) {
  /* D1a — THE MOBILE DRAWER. backdrop-filter makes an element a containing
     block for its position:fixed descendants. .sm-nav lives inside .sm-header,
     so the off-canvas drawer resolved against the 69px header rather than the
     viewport: 343x108 instead of 343x844, with its own items thrown out to
     x=1756. Desktop keeps the glass; at the drawer breakpoint it costs nothing
     and the header background (rgba(4,16,34,.82)) already carries the contrast. */
  .sm-b2b .sm-header,
  .sm-b2b .sm-topnav {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* D1b — the drawer is a column. flex-wrap:wrap belongs to the desktop row and
     was never reset here, which is what let the items column outwards instead
     of stacking. */
  .sm-b2b .sm-nav { flex-wrap: nowrap; }

  /* D1c — the open drawer covered its own burger (both inside .sm-header, drawer
     at z-85), so it could not be closed by the control that opened it. */
  .sm-b2b .sm-burger {
    position: relative;
    z-index: 90;
  }
}


/* ==========================================================================
   48. CARDS ON A DARK BAND
   .sm-section--dark existed and nothing used it, because the card and fact
   components are painted for a light surface: putting them on navy gave white
   blocks on a dark band. These give them the same bordered-veil treatment the
   design package's screenshots show. Scoped INSIDE .sm-section--dark, so every
   light section is untouched.
   ========================================================================== */

.sm-b2b .sm-section--dark .sm-card,
.sm-b2b .sm-section--dark .sm-fact {
  background: var(--sm-on-dark-veil);
  border-color: var(--sm-on-dark-line);
  color: var(--sm-on-dark-3);
  box-shadow: none;
}
.sm-b2b .sm-section--dark .sm-card h3,
.sm-b2b .sm-section--dark .sm-fact h3 { color: var(--sm-on-dark); }
.sm-b2b .sm-section--dark .sm-card p,
.sm-b2b .sm-section--dark .sm-fact p { color: var(--sm-on-dark-3); }
.sm-b2b .sm-section--dark .sm-fact__label { color: var(--sm-on-dark-accent); }
.sm-b2b .sm-section--dark .sm-card__link { color: var(--sm-on-dark); }
.sm-b2b .sm-section--dark .sm-card--interactive:hover {
  border-color: var(--sm-on-dark-accent);
}
.sm-b2b .sm-section--dark code {
  background: var(--sm-on-dark-veil);
  color: var(--sm-on-dark);
}
.sm-b2b .sm-section--dark .sm-prose,
.sm-b2b .sm-section--dark .sm-prose p { color: var(--sm-on-dark-3); }
.sm-b2b .sm-section--dark .sm-prose a { color: var(--sm-on-dark-accent); }
.sm-b2b .sm-section--dark .sm-prose ul li { color: var(--sm-on-dark-3); }
.sm-b2b .sm-section--dark .sm-prose ul li b { color: var(--sm-on-dark); }


/* ==========================================================================
   49. HERO HEADLINE ACCENT
   The design package's heroes split the headline: the first clause in white,
   the second in coral. Nothing in the theme did that, so the mockups' most
   recognisable typographic move was missing from every page.
   ========================================================================== */

.sm-b2b .sm-hl { color: var(--sm-coral-400); }
.sm-b2b .sm-hero__frame ul { list-style: none; margin: 0; padding: 0; }
.sm-b2b .sm-hero__frame .sm-kpi-grid { margin-top: var(--sm-s4); }


/* ==========================================================================
   50. CONTINUOUS DARK PAGE
   The design package's pages are one dark surface from header to footer. These
   three components come from sm-content.css, are painted for a light document,
   and each punched a hole in it. Overridden here rather than there, so the
   consumer pages are untouched.
   ========================================================================== */

/* 1. The breadcrumb was a white strip between the dark header and the dark
      hero. It keeps its position and type; only its colours change. */
.sm-b2b .sm-crumbs {
  max-width: none;
  padding: 14px var(--sm-gutter) 0;
  background: var(--sm-navy-950);
  color: var(--sm-on-dark-3);
}
.sm-b2b .sm-crumbs > * {
  max-width: var(--sm-max);
}
.sm-b2b .sm-crumbs a { color: var(--sm-on-dark-3); }
.sm-b2b .sm-crumbs a:hover { color: var(--sm-on-dark); }
.sm-b2b .sm-crumbs .sm-here { color: var(--sm-on-dark); }

/* 2. The closing CTA is capped at --sm-measure in the consumer sheet, so on a
      wide page it floated as a narrow box on white. The mockups run it the full
      width of the content column. */
.sm-b2b .sm-doc .scan-cta {
  max-width: min(var(--sm-max), calc(100% - (var(--sm-gutter) * 2)));
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 52px;
  padding: 40px;
}
.sm-b2b .sm-doc .scan-cta p { max-width: 62ch; }

/* 3. The provenance banner is painted for a light surface. Inside a dark band
      it needs the on-dark veil, or it glows pale blue in the middle of navy. */
.sm-b2b .sm-section--dark .banner.prov,
.sm-b2b .sm-doc .sm-section--dark .banner.prov {
  background: var(--sm-on-dark-veil);
  border-color: var(--sm-on-dark-line);
  color: var(--sm-on-dark-3);
}
.sm-b2b .sm-section--dark .banner.prov::before { color: var(--sm-on-dark-accent); }
.sm-b2b .sm-section--dark .banner.prov a { color: var(--sm-on-dark-accent); }
.sm-b2b .sm-section--dark .banner b { color: var(--sm-on-dark); }

.sm-b2b .sm-doc .scan-cta .sm-btn--ghost-dark {
  background: rgba(255, 255, 255, .035) !important;
  color: var(--sm-on-dark) !important;
  border: 1px solid rgba(255, 255, 255, .28);
}
.sm-b2b .sm-doc .scan-cta .sm-btn--ghost-dark:hover {
  background: rgba(255, 255, 255, .10) !important;
}


/* ==========================================================================
   51. PRICING PAGE COMPONENTS
   ========================================================================== */

.sm-b2b .sm-feature-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.sm-b2b .sm-price--on-dark {
  background: var(--sm-on-dark-veil);
  border-color: var(--sm-on-dark-line);
  color: var(--sm-on-dark-3);
  box-shadow: none;
}
.sm-b2b .sm-price--on-dark .sm-price__name,
.sm-b2b .sm-price--on-dark .sm-price__amount { color: var(--sm-on-dark); }
.sm-b2b .sm-price--on-dark .sm-price__period,
.sm-b2b .sm-price--on-dark .sm-price-note,
.sm-b2b .sm-price--on-dark .sm-price__period-note,
.sm-b2b .sm-price--on-dark .sm-price__list { color: var(--sm-on-dark-3); }
.sm-b2b .sm-price--on-dark.sm-price--flag {
  border-color: var(--sm-on-dark-accent);
  box-shadow: 0 18px 55px rgba(141, 226, 255, .14);
}

.sm-b2b .sm-price__period-note {
  margin: 2px 0 14px;
  color: var(--sm-ink-3);
  font-size: 13px;
}

.sm-b2b .sm-checklist {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.sm-b2b .sm-checklist li {
  position: relative;
  padding-left: 26px;
  color: var(--sm-ink-2);
  font-size: 14.5px;
}
.sm-b2b .sm-checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--sm-success-ink, #1a8a5f);
  font-weight: 800;
}


/* ==========================================================================
   52. FAQ PAGE COMPONENTS
   ========================================================================== */

.sm-b2b .sm-faq-orb {
  min-height: 260px;
  display: grid;
  place-items: center;
}
.sm-b2b .sm-faq-orb__mark {
  position: relative;
  z-index: 1;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--sm-on-dark-accent);
  color: var(--sm-on-dark-accent);
  font-size: 44px;
  font-weight: 800;
  background: rgba(141, 226, 255, .08);
}

.sm-b2b .sm-faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--sm-s6);
  align-items: start;
  margin-top: 8px;
}
@media (max-width: 900px) {
  .sm-b2b .sm-faq-layout { grid-template-columns: minmax(0, 1fr); }
}

.sm-b2b .sm-faq-main { display: grid; gap: var(--sm-s6); }

.sm-b2b .sm-faq-group__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.sm-b2b .sm-doc .sm-faq-group__title {
  flex: 1;
  margin: 0;
  color: var(--sm-on-dark);
  font-size: 19px;
  font-weight: 800;
}

.sm-b2b .sm-faq-aside {
  display: grid;
  gap: var(--sm-s5);
  position: sticky;
  top: 90px;
}
.sm-b2b .sm-card--on-dark {
  background: var(--sm-on-dark-veil);
  border-color: var(--sm-on-dark-line);
  color: var(--sm-on-dark-3);
  box-shadow: none;
}
.sm-b2b .sm-card--on-dark h3 { color: var(--sm-on-dark); margin: 0 0 6px; }
.sm-b2b .sm-card--on-dark p { color: var(--sm-on-dark-3); }

.sm-b2b .sm-faq-aside__links {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.sm-b2b .sm-faq-aside__link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--sm-on-dark-line);
  border-radius: var(--sm-radius-sm);
  color: var(--sm-on-dark-3);
  text-decoration: none;
  transition: border-color var(--sm-fast) var(--sm-ease);
}
.sm-b2b .sm-faq-aside__link:hover { border-color: var(--sm-on-dark-accent); }
.sm-b2b .sm-faq-aside__link b { color: var(--sm-on-dark); }

.sm-b2b .sm-faq-aside__topics {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.sm-b2b .sm-faq-aside__topics a {
  color: var(--sm-on-dark-accent);
  font-size: 14px;
  text-decoration: none;
}
.sm-b2b .sm-faq-aside__topics a:hover { text-decoration: underline; }


/* ==========================================================================
   53. DEVELOPERS PAGE COMPONENTS
   ========================================================================== */

.sm-b2b pre.sm-code--block {
  display: block;
  margin: 10px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--sm-on-dark-line);
  border-radius: var(--sm-radius-md);
  background: rgba(2, 8, 23, .45);
  color: var(--sm-on-dark-3);
  font-family: var(--sm-font-mono);
  font-size: 12.5px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.sm-b2b .sm-panel pre.sm-code--block {
  background: var(--sm-surface-2);
  border-color: var(--sm-border);
  color: var(--sm-ink-2);
}

.sm-b2b .sm-panel__eyebrow {
  margin: 0 0 4px;
  color: var(--sm-blue-600);
  font-family: var(--sm-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}


/* ==========================================================================
   54. HOME PAGE COMPONENTS
   ========================================================================== */

.sm-b2b .sm-value-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 0;
}
.sm-b2b .sm-value-item b {
  display: block;
  margin-bottom: 2px;
  color: var(--sm-on-dark);
  font-size: 15px;
  font-weight: 800;
}
.sm-b2b .sm-value-item p {
  margin: 0;
  color: var(--sm-on-dark-3);
  font-size: 13.5px;
}
.sm-b2b #values .sm-feature-grid { margin-top: 0; }

.sm-b2b .sm-steps--rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sm-s5);
  position: relative;
}
.sm-b2b .sm-steps--rail::before {
  content: "";
  position: absolute;
  top: 20px;
  left: calc(100% / 6);
  right: calc(100% / 6);
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--sm-border) 0 6px, transparent 6px 12px);
}
.sm-b2b .sm-steps--rail > li {
  padding: 0;
  text-align: center;
}
.sm-b2b .sm-steps--rail > li::before {
  position: static;
  margin: 0 auto 14px;
}
@media (max-width: 760px) {
  .sm-b2b .sm-steps--rail { grid-template-columns: minmax(0, 1fr); }
  .sm-b2b .sm-steps--rail::before { display: none; }
  .sm-b2b .sm-steps--rail > li { text-align: left; padding-left: 60px; position: relative; }
  .sm-b2b .sm-steps--rail > li::before { position: absolute; left: 0; top: 0; margin: 0; }
}

/* D13 — these five were used in markup and defined nowhere. */
.sm-b2b .sm-pane { min-width: 0; }
.sm-b2b .sm-pane__lead {
  margin: 8px 0 20px;
  color: var(--sm-ink-2);
  font-size: 15px;
  line-height: 1.6;
}
.sm-b2b .sm-widget-figure {
  max-width: 220px;
  margin: 16px 0;
  padding: 20px;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-md);
  background: var(--sm-surface-2);
  text-align: center;
}
.sm-b2b .sm-widget-figure svg { width: 100%; height: auto; color: var(--sm-blue-600); }
.sm-b2b .sm-widget-figure figcaption {
  margin-top: 10px;
  color: var(--sm-ink-3);
  font-size: 12px;
}
.sm-b2b .sm-stat-row {
  list-style: none;
  margin: 16px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.sm-b2b .sm-stat {
  padding: 12px 14px;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-sm);
  background: var(--sm-surface-2);
}
.sm-b2b .sm-stat b {
  display: block;
  color: var(--sm-ink-3);
  font-size: 20px;
  font-weight: 800;
}
.sm-b2b .sm-stat span {
  color: var(--sm-ink-3);
  font-size: 12px;
}
.sm-b2b .sm-states {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.sm-b2b .sm-states code {
  display: inline-block;
  margin-bottom: 3px;
}
.sm-b2b .sm-states p { margin: 0; color: var(--sm-ink-3); font-size: 13.5px; }
.sm-b2b .sm-illustrative {
  margin-top: 14px;
  color: var(--sm-ink-3);
  font-size: 12.5px;
}
.sm-b2b .sm-consumer-note {
  max-width: var(--sm-max);
  margin: 0 auto;
  padding: 16px var(--sm-gutter);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--sm-info-tint);
  border-top: 1px solid var(--sm-border);
  border-bottom: 1px solid var(--sm-border);
}
.sm-b2b .sm-consumer-note p { margin: 0; color: var(--sm-ink-2); font-size: 14px; }
.sm-b2b .sm-consumer-note b { color: var(--sm-ink); }
.sm-b2b .sm-consumer-note a {
  color: var(--sm-blue-ink);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.sm-b2b .sm-consumer-note a:hover { text-decoration: underline; }
.sm-b2b .sm-beta {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: var(--sm-radius-pill);
  background: var(--sm-blue-600);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
}