/* Content column follows the SLDS2 grid: edge-to-edge within the breakpoint
   margin until the desktop breakpoint (1440px), then capped at the design
   system's max content width. Every content container (blades, hero cap,
   panels, tabs) references --content-max so widths stay consistent and stay
   in lockstep with the root token system. */
:root {
  --content-max: none;
}
@media (min-width: 1440px) {
  :root { --content-max: var(--space-grid-desktop-max-content-width, 1280px); }
}
[data-theme='day'] {
  --color-background-1: var(--color-white);
  --color-surface-1: var(--color-neutral-95);
  --color-surface-container-1: var(--color-neutral-90);
}
[data-theme='night'] {
  --color-background-1: var(--color-neutral-10);
  --color-surface-1: var(--color-neutral-15);
  --color-surface-container-1: var(--color-neutral-30);
}



/* ═══ RESET ═══ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Nav links jump to in-page anchors; offset the scroll stop for the 72px
   sticky nav so section headings aren't tucked underneath it. */
:target, .sf-blade, .cta-blade, .sf-footer { scroll-margin-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-style-body-copy-1-family, "Salesforce Sans", Arial, sans-serif);
  color: var(--color-on-surface-2, #181818);
  background: var(--color-background-1);
}
img { max-width: 100%; }

/* ═══════════════════════════════════════════════════════════
   GLOBAL NAV  (recipe-page-chrome — copied verbatim)
   ═══════════════════════════════════════════════════════════ */
.sf-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-neutral-10);
  transition: background 0.45s ease, box-shadow 0.45s ease;
  /* border-bottom: 1px solid rgba(255,255,255,0.12); */
}
/* Dark nav (default — theater over the masthead): white inks across
   links, utilities, wordmark, hamburger. Transitions carry the fade to
   light once .is-scrolled is set (past the first 100vh). */
.sf-nav .sf-nav__logo-wordmark,
.sf-nav .sf-nav__logo-icon,
.sf-nav .sf-nav__links a,
.sf-nav .sf-nav__login-label,
.tl-theme-toggle { color: #FFFFFF; transition: color 0.45s ease, background 0.45s ease; }
.sf-nav .sf-nav__links a:hover,
.sf-nav .sf-nav__icon:hover,
.tl-theme-toggle:hover { background: rgba(255,255,255,0.28); }
.sf-nav .sf-nav__icon .icon,
.tl-theme-toggle .icon { background-color: #FFFFFF; transition: background-color 0.45s ease; }
.sf-nav .sf-nav__hamburger span { background: #FFFFFF; transition: background 0.45s ease; }
/* Script wordmark ships as black vector paths → invert to white on the dark nav */
/* .sf-nav__logo-icon { filter: hue-rotate(calc(345deg - 286deg)) brightness(calc(92 / 58)) saturate(calc(47 / 96)); transition: filter 0.45s ease; } */

/* Scrolled state — nav fades to light once the masthead is behind it */
.sf-nav.is-scrolled {
  background: var(--color-white, #FFFFFF);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.sf-nav.is-scrolled .sf-nav__links a,
.sf-nav.is-scrolled .sf-nav__logo-wordmark,
.sf-nav.is-scrolled .sf-nav__login-label,
.sf-nav.is-scrolled .tl-theme-toggle { color: var(--color-on-surface-1, #001E5B); }
.sf-nav.is-scrolled .sf-nav__links a:hover,
.sf-nav.is-scrolled .sf-nav__logo:hover,
.sf-nav.is-scrolled .tl-theme-toggle:hover { background: var(--color-surface-container-2, #E5E5E5); }
.sf-nav.is-scrolled .sf-nav__icon .icon,
.sf-nav.is-scrolled .tl-theme-toggle .icon { background-color: var(--color-on-surface-1, #001E5B); }
.sf-nav.is-scrolled .sf-nav__hamburger span { background: var(--color-on-surface-1, #001E5B); }
.sf-nav.is-scrolled .sf-nav__logo-icon { 
  background-image: url('../images/trailblazer-labs-logo.svg');
 }
.sf-nav__inner {
  display: flex;
  justify-content: space-between;
  height: 72px;
  padding-inline: 40px;
  margin: 0;
}

.sf-nav__logo { 
  display: flex; 
  align-items: center; 
  text-decoration: none; 
}

.sf-nav__logo-icon { 
  display: block; 
  width: 56px;
  height: 56px; 
  background-image: url('../images/trailblazer-labs-logo-contained.svg');
  background-size: 100% 100%;
}
.sf-nav__logo-wordmark { 
  display: block; 
  height: 32px; 
  width: auto; 
  white-space: nowrap;
  text-wrap: nowrap;
  color: var(--color-white);
  margin: 0 0 -0.25rem var(--space-2);
  font-family: var(--font-style-display-6-family);
  font-weight: var(--font-style-display-6-weight);
  font-size: var(--font-style-display-6-size);
}
.sf-nav__hamburger { display: none; }

.sf-nav__links { display: flex; align-items: center; gap: 8px; }
.sf-nav__links a {
  font-family: var(--font-style-body-copy-2-bold-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-on-surface-1, #001E5B);
  text-decoration: none;
  white-space: nowrap;
  text-wrap: nowrap;
  padding: 8px 12px;
  border-radius: 4px;
}

.sf-nav__utilities { display: flex; align-items: center; gap: 0; }
.sf-nav__icon {
  display: flex; align-items: center; justify-content: center;
  padding: 13px; border-radius: 100px;
  background: none; border: none; cursor: pointer;
  color: var(--color-on-surface-1, #001E5B);
  text-decoration: none;
}
.sf-nav__icon .icon { width: 18px; height: 18px; }
.sf-nav__icon:hover { background: var(--color-surface-container-1, #F3F3F3); }
.sf-nav__login { gap: 4px; }
.sf-nav__login-label {
  font-family: var(--font-style-body-copy-2-bold-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 700; font-size: 16px; line-height: 24px;
  color: var(--color-on-surface-1, #001E5B);
}
.sf-nav__cta { margin-left: 16px; }

/* ═══════════════════════════════════════════════════════════
   CTA SYSTEM  (recipe-cta-buttons)
   ═══════════════════════════════════════════════════════════ */
.sf-cta[hidden] { display: none; }
.sf-cta, .tds2-button {
  --tds2-button-bg: transparent;
  --tds2-button-border-color: transparent;
  --tds2-button-text-color: var(--tds2-color-text-default);
  --tds2-button-padding-y: var(--tds2-spacing-2);
  --tds2-button-padding-x: var(--tds2-spacing-5);
  --tds2-button-gap: var(--tds2-spacing-3);
  --tds2-button-font-size: var(--tds2-font-size-md);
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--tds2-button-gap);
  padding: var(--tds2-button-padding-y) var(--tds2-button-padding-x);
  font-family: var(--tds2-font-body);
  font-size: var(--tds2-button-font-size);
  font-weight: var(--tds2-font-weight-bold);
  line-height: var(--tds2-line-height-normal);
  text-decoration: none;
  border-radius: var(--tds2-radius-full, 999px);
  border: 2px solid var(--tds2-button-border-color);
  background-color: var(--tds2-button-bg);
  color: var(--tds2-button-text-color);
  cursor: pointer;
  outline: var(--tds2-a11y-outline);
  outline-offset: var(--tds2-a11y-outline-offset);
  transition: all var(--tds2-transition-fast);
  user-select: none;
  white-space: nowrap;
}
/* Sizes */
.sf-cta--hero, .tds2-button--extra-large { --tds2-button-font-size: var(--tds2-font-size-xl); --tds2-button-padding-y: var(--tds2-spacing-3); --tds2-button-padding-x: var(--tds2-spacing-8); line-height: 32px; }
.sf-cta--medium, .tds2-button--large { --tds2-button-font-size: var(--tds2-font-size-lg); --tds2-button-padding-y: var(--tds2-spacing-2-5); --tds2-button-padding-x: var(--tds2-spacing-6); line-height: 28px; }
.sf-cta--small, .tds2-button--small { --tds2-button-font-size: var(--tds2-font-size-sm); --tds2-button-padding-y: var(--tds2-spacing-1); --tds2-button-padding-x: var(--tds2-spacing-4); line-height: 20px; }
/* Primary — brand blue fill */
.sf-cta--primary, .tds2-button--primary {
  --tds2-button-bg: var(--tds2-color-brand-primary);
  --tds2-button-border-color: var(--tds2-color-brand-primary);
  --tds2-button-text-color: var(--tds2-color-text-inverse);
}
.sf-cta--primary:hover, .sf-cta--primary:focus-visible,
.tds2-button--primary:hover, .tds2-button--primary:focus-visible {
  background-color: var(--tds2-color-brand-primary-dark);
  border-color: var(--tds2-color-brand-primary-dark);
  color: var(--tds2-color-text-inverse);
}
.sf-cta--primary:active, .tds2-button--primary:active {
  background-color: var(--tds2-color-brand-primary-darker);
  border-color: var(--tds2-color-brand-primary-darker);
}
/* TDS2 secondary marketing actions use the Glass treatment. */
.sf-cta--secondary,.tds2-button--secondary {
    --tds2-button-border-color: var(--tds2-color-brand-primary);
    --tds2-button-bg: var(--tds2-color-bg-default);
    --tds2-button-text-color: var(--tds2-color-brand-primary);
    box-shadow: none;
}
.sf-cta--secondary:hover, .sf-cta--secondary:focus-visible,
.tds2-button--secondary:hover, .tds2-button--secondary:focus-visible {
  background: var(--tds2-color-brand-primary);
  border-color: var(--tds2-color-brand-primary);
  color: var(--tds2-color-text-inverse);
}
.sf-cta--secondary:active, .tds2-button--secondary:active {
  background: var(--tds2-color-brand-primary-dark);
  border-color: var(--tds2-color-brand-primary-dark);
  color: var(--tds2-color-text-inverse);
}
/* Special — green "Try for free" pill */
.sf-cta--special {
  background: var(--color-green-50, #2E844A);
  color: #FFFFFF;
}
.sf-cta--special:hover { transform: translateY(-1px); }

.sf-cta--glass, .tds2-button--glass {
  background: rgba(255, 255, 255, 0.2);
  color: var(--tds2-color-brand-primary-darker);
  border: none;
  backdrop-filter: blur(0.5rem);
  box-shadow: var(--tds2-elevation-2), inset 1px 1px 0 rgba(255,255,255,0.5), inset -1px -1px 0 rgba(255,255,255,0.5);
}
.sf-cta--glass:hover, .sf-cta--glass:focus-visible,
.tds2-button--glass:hover, .tds2-button--glass:focus-visible { background: rgba(255, 255, 255, 0.35); }
.sf-cta--glass:active, .tds2-button--glass:active { background: rgba(255, 255, 255, 0.45); }
.tds2-button--glass-dark { color: var(--tds2-color-text-inverse); }
.tds2-button--glass-dark:focus-visible { outline-color: var(--tds2-color-text-inverse); }


/* On-dark — Secondary variant repainted for dark blades */
.hero-blade .sf-cta {
  color: var(--color-white);
}
/* On-dark secondary sits on the hero image: white outline + white text,
   with a translucent-white fill on hover (not the light-blue used on white bg). */
.sf-cta--on-dark.sf-cta--secondary,
.sf-cta--on-dark.tds2-button--secondary {
  --tds2-button-border-color: rgba(255, 255, 255, 0.7);
  --tds2-button-bg: transparent;
  --tds2-button-text-color: var(--color-white);
}
.sf-cta--on-dark.sf-cta--secondary:hover, .sf-cta--on-dark.sf-cta--secondary:focus-visible,
.sf-cta--on-dark.tds2-button--secondary:hover, .sf-cta--on-dark.tds2-button--secondary:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 1);
  color: var(--color-white);
}
.sf-cta--on-dark.sf-cta--secondary:active,
.sf-cta--on-dark.tds2-button--secondary:active {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 1);
  color: var(--color-white);
}
.sf-cta:focus-visible, .tds2-button:focus-visible {
  outline: var(--tds2-a11y-outline-focus);
  outline-offset: var(--tds2-a11y-outline-offset-focus);
}
/* Link-type CTA — underlined accent + chevron */
.sf-cta-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-style-body-copy-2-bold-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 700; font-size: 16px; line-height: 24px;
  color: var(--color-link, #022AC0);
  text-decoration: none;
}
.sf-cta-link span { text-decoration: underline; }
.sf-cta-link::after { content: "\2192"; text-decoration: none; }
.sf-cta-link:hover span { text-decoration: none; }

/* ═══════════════════════════════════════════════════════════
   HERO BLADE  (recipe-hero — .hero-blade--2col, Day Morning)
   ═══════════════════════════════════════════════════════════ */
.hero-blade {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  height: calc(100vh - 72px);
  width: 100%; overflow: hidden;
  padding-inline: var(--space-grid-mobile-margin, 24px);
  padding-block: 48px;
  /* Masthead backdrop: dark "space" base. The blue earthly glow lives on the
     ::before layer below so it can rise into frame in sync with the compass
     camera pan (see compass-shape.js intro). */
  background-color: var(--color-neutral-10);
}
/* Blue earthly glow — anchored bottom-centre, rises up as the hero loads so it
   moves with the downward camera pan instead of sitting static behind it. */
.hero-blade::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background: radial-gradient(67% 81% at 50% 100%, var(--color-electric-blue-30) 20.67%, transparent 100%);
  animation: hero-glow-rise 3.6s cubic-bezier(0.592, 0.162, 0.34, 1) both;
}
@keyframes hero-glow-rise {
  from { transform: translateY(55%); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-blade::before { animation: none; transform: none; opacity: 1; }
}
/* Ground arc — a very large circle anchored to the bottom whose shallow top cap
   bows across the lower frame, blending the dark masthead into the white page
   below (mirrors .scenic-hero__arc in index-scenic-light.html). Width ≫ viewport
   so only the gentle curve shows. Sits above the 3D canvas, below the copy. */
.hero-blade::after {
  content: "";
  position: absolute; z-index: 1;
  left: 50%; top: 82vh;
  width: 320vw; height: 320vw;
  transform: translateX(-50%);
  background: var(--color-background-1);
  border-radius: 50%;
  pointer-events: none;
  /* Rises up from below on load, in sync with the blue-glow ::before. Keyframe
     keeps the translateX(-50%) centring while animating Y. Gentle, near-linear
     ease so nothing races through the middle of the move. */
  animation: hero-arc-rise 3.6s cubic-bezier(0.592, 0.162, 0.34, 1) both;
}
@keyframes hero-arc-rise {
  from { transform: translateX(-50%) translateY(30vh); opacity: 1; }
  to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-blade::after { animation: none; transform: translateX(-50%); opacity: 1; }
}
.hero-blade__cap { position: relative; z-index: 2; margin-inline: auto; margin-bottom: 10vh; max-width: var(--content-max); }
/* Hero copy fades in on load, sequenced heading → paragraph → buttons. Straight
   opacity fade, ~1.2s total. */
.hero-blade__headline,
.hero-blade__body,
.hero-blade__ctas {
  animation: hero-copy-fade 0.7s ease both;
}
.hero-blade__headline { animation-delay: 0.1s; }
.hero-blade__body     { animation-delay: 0.35s; }
.hero-blade__ctas     { animation-delay: 0.6s; }
@keyframes hero-copy-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-blade__headline,
  .hero-blade__body,
  .hero-blade__ctas { animation: none; opacity: 1; }
}
/* 3D compass canvas layer — behind the copy, above the gradient.
   On wide screens it sits in the right half, clear of the headline. */
#compass-mount {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
}
@media (min-width: 1024px) {
  #compass-mount { left: 0%; right: 0; }
}
#compass-mount canvas { width: 100%; height: 100%; display: block; }
/* Masthead copy sits on the deep-blue background → white inks; the actual
   color values are set with theme-independent white tokens in the
   typographic rules below (.hero-blade__eyebrow/__headline/__body). */
.hero-blade__content, .hero-blade__asset { width: 100%; min-width: 0; }
.hero-blade__asset { aspect-ratio: 3 / 2; }
.hero-blade__content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-blade__headline {
  margin: 0;
  font-family: var(--font-style-display-3-family, "Avant Garde For Salesforce", Arial, sans-serif);
  font-weight: var(--font-style-display-3-weight, 600);
  font-size: var(--font-style-display-3-size, 40px);
  line-height: var(--font-style-display-3-line-height, 1.125);
  letter-spacing: var(--font-style-display-3-letter-spacing, -0.0025em);
  color: var(--color-white, #FFFFFF);
  /* Subtle vertical sheen: white at the top fading to 90% gray. Falls back to
     the solid white color above where background-clip: text is unsupported. */
  background-image: linear-gradient(180deg, var(--color-white) 0%, var(--color-neutral-80) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  max-width: 40ch;
  text-wrap: balance;
}
.hero-blade__body {
  margin-top: var(--space-content-lg, 24px);
  font-family: var(--font-style-body-copy-1-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: var(--font-style-body-copy-1-weight, 400);
  font-size: var(--font-style-body-copy-1-size, 20px);
  line-height: var(--font-style-body-copy-1-line-height, 1.5);
  letter-spacing: var(--font-style-body-copy-1-letter-spacing, 0.00125em);
  color: var(--color-alpha-white-85, rgba(255,255,255,0.85));
  text-align: center;
  max-width: 80ch;
  text-wrap: balance;
}
.hero-blade__ctas {
  display: inline-flex; 
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4, 16px);
  margin-top: var(--space-4);
}
/* Hero asset placeholder — fills its container per image-placeholders.md */
.placeholder {
  position: relative; width: 100%; height: 100%;
  border-radius: var(--radius-card, 12px);
  background:
    linear-gradient(135deg, rgba(6,106,254,0.12), rgba(0,179,255,0.12)),
    var(--color-neutral-90, #E5E5E5);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.placeholder .icon {
  width: 64px; height: 64px;
  background-color: var(--color-fill-accent, #066AFE);
  opacity: 0.35;
}

@media (min-width: 768px) {
  .hero-blade {
    padding-inline: var(--space-grid-tablet-portrait-margin, 32px);
    padding-block: 48px;
  }
  .hero-blade__asset { max-width: 66.667%; margin-inline: auto; }
}
@media (min-width: 1024px) {
  .hero-blade {
    padding-inline: var(--space-grid-tablet-landscape-margin, 48px);
    padding-block: 64px;
  }
  .hero-blade__asset { grid-column: 7 / span 6; grid-row: 1; max-width: none; margin-inline: 0; }
  .hero-blade__headline {
    font-size: var(--font-style-display-2-size, 48px);
    letter-spacing: var(--font-style-display-2-letter-spacing, -0.0025em);
  }
}
@media (min-width: 1440px) {
  .hero-blade {
    padding-inline: var(--space-grid-desktop-margin, 48px);
    padding-block: 64px;
  }
  .hero-blade__headline {
    font-size: var(--font-style-display-1-size, 56px);
    letter-spacing: var(--font-style-display-1-letter-spacing, -0.003em);
  }
}

.sf-badge, .tds2-badge,
.sf-asset-card__tag {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--tds2-spacing-1);
  padding: var(--tds2-spacing-1) var(--tds2-spacing-3);
  border-radius: var(--tds2-radius-md);
  background: var(--tds2-color-brand-primary-light);
  color: var(--tds2-color-text-brand-strong);
  font-family: var(--tds2-font-body);
  font-weight: var(--tds2-font-weight-bold); font-size: var(--tds2-font-size-xs); line-height: 18px;
  white-space: nowrap;
}
.tds2-badge--small { padding: 2px var(--tds2-spacing-2); font-size: var(--tds2-font-size-xxs); }
.tds2-badge--medium { padding: var(--tds2-spacing-1) var(--tds2-spacing-3); font-size: var(--tds2-font-size-xs); }


/* ═══════════════════════════════════════════════════════════
   BODY BLADE + CARD GRID  (recipe-page + recipe-card-grid)
   ═══════════════════════════════════════════════════════════ */
.sf-blade {
  width: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding-inline: var(--space-grid-mobile-margin, 24px);
  padding-block: 64px;
  /* background: var(--color-background-1); */
}
.sf-blade__cap { width: 100%; margin-inline: auto; max-width: var(--content-max); }
.sf-blade__header { text-align: center; margin: 0 auto 48px; }
.sf-disclaimer {
  margin: 20px auto 0; 
  max-width: 80ch;
  text-wrap: pretty;
  text-align: left;
  border: 1px solid var(--color-neutral-90, #E5E5E5);
  border-radius: 12px; background: var(--color-neutral-95, #F3F3F3);
  padding: 16px 18px;
  font-family: var(--font-style-body-copy-1-family, "Salesforce Sans", Arial, sans-serif);
  font-size: 14px; line-height: 1.5; color: var(--color-on-surface-3, #444444);
}
.sf-disclaimer__label { font-weight: 700; color: var(--color-on-surface-1, #001E5B); }

/* Development track personas (How it Works) */
.sf-tracks { margin: 0 auto; max-width: 60rem;}
.sf-card-grid--steps { margin-top: 56px; }

/* ── Trailhead-style vertical path (How It Works) ── */
.sf-path {
  list-style: none;
  margin: 56px auto 0;
  padding: 0;
  max-width: 60rem;
  position: relative;
}
/* Continuous connector line running down the markers */
.sf-path::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 84px;
  left: 15px;
  width: 2px;
  background: var(--tds2-color-border-default, #E5E5E5);
}
.sf-path__step {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--space-content-lg, 24px);
  padding-left: 48px;
}
.sf-path__step + .sf-path__step { margin-top: var(--space-content-lg, 24px); }
.sf-path__marker {
  position: absolute;
  left: 4px;
  top: 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--tds2-color-bg-default, #fff);
  border: 2px solid var(--tds2-color-border-default, #E5E5E5);
  z-index: 1;
}
.tds2-card.sf-path__card {
  flex: 1;
  flex-direction: row;
  align-items: center;
  gap: var(--space-content-lg, 24px);
  padding: var(--tds2-spacing-5, 20px) var(--tds2-spacing-6, 24px);
}
.sf-path__icon {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.sf-path__copy {
  display: flex;
  flex-direction: column;
  gap: var(--tds2-spacing-2);
  min-width: 0;
}
.sf-path__eyebrow {
  width: fit-content;
}
.sf-path__label {
  margin: 0;
  font-family: var(--font-style-body-copy-2-bold-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 700; font-size: 18px; line-height: 1.3;
  color: var(--tds2-color-brand-primary, #032D60);
}
.sf-path__desc {
  margin: 0;
  font-family: var(--font-style-body-copy-1-family, "Salesforce Sans", Arial, sans-serif);
  font-size: 15px; line-height: 1.5;
  color: var(--color-on-surface-3, #444);
}
@media (max-width: 560px) {
  .sf-path__card { flex-direction: column; align-items: flex-start; text-align: left; }
}
.sf-tracks__header { text-align: center; max-width: 720px; margin: 0 auto 28px; }
.sf-tracks__title {
  margin: 0 0 8px;
  font-family: var(--font-style-display-4-family, "Avant Garde For Salesforce", Arial, sans-serif);
  font-weight: var(--font-style-display-4-weight, 600);
  font-size: 24px; line-height: 1.2; color: var(--color-on-surface-1, #001E5B);
}
.sf-tracks__lede {
  margin: 0;
  font-family: var(--font-style-body-copy-1-family, "Salesforce Sans", Arial, sans-serif);
  font-size: 16px; line-height: 1.5; color: var(--color-on-surface-3, #444444);
}
.sf-tracks__grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 768px) { .sf-tracks__grid { grid-template-columns: repeat(3, 1fr); } }
.sf-track {
  border: 1px solid var(--color-neutral-90, #E5E5E5);
  border-radius: var(--tds2-radius-4xl); background: var(--tds2-color-bg-default); padding: var(--tds2-spacing-6);
  box-shadow: var(--tds2-elevation-0);
}
.sf-track__name {
  display: block; 
  margin: var(--tds2-spacing-2-5) auto;
  font-family: var(--font-style-body-copy-2-bold-family);
  font-weight: 800; font-size: var(--font-style-body-copy-2-size);
  text-align: center;
}
.sf-track__avatar {
  display: block;
  max-height: 160px;
  width: auto;
  margin: 0 auto;
  order: 3;
}
.sf-track__desc {
  margin: 0;
  font-family: var(--font-style-body-copy-1-family, "Salesforce Sans", Arial, sans-serif);
  font-size: 15px; line-height: 1.5; color: var(--color-on-surface-3, #444444);
  text-align: center;
}
.tds2-card.sf-track {
  border-width: 0;
}
.tds2-card.sf-track--strat {   box-shadow: inset 2px 2px 1px #ffffff88, inset -2px -2px 1px #ffffff88, inset 0 -6px 48px color-mix(in srgb, var(--color-violet-20), transparent 80%), var(--tds2-elevation-0);}
.tds2-card.sf-track--build {   box-shadow: inset 2px 2px 1px #ffffff80, inset -2px -2px 1px #ffffff88, inset 0 -6px 48px color-mix(in srgb, var(--color-green-40), transparent 80%), var(--tds2-elevation-0);}
.tds2-card.sf-track--eng {     box-shadow: inset 2px 2px 0px #ffffff80, inset -2px -2px 0px #ffffff88, inset 0 -6px 48px color-mix(in srgb, var(--color-electric-blue-30), transparent 80%), var(--tds2-elevation-0);}
.sf-track--strat .sf-track__name { color: var(--color-violet-20); }
.sf-track--build .sf-track__name { color: var(--color-green-40); }
.sf-track--eng .sf-track__name { color: var(--color-electric-blue-30); }
.sf-blade__eyebrow {
  margin: 0 0 var(--space-content-sm, 12px) 0;
  font-family: var(--font-style-body-copy-2-bold-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 700; font-size: 18px; line-height: 1.5;
  color: var(--color-on-surface-1, #001E5B);
}
.sf-blade__title {
  margin: 0 auto;
  font-family: var(--font-style-display-4-family, "Avant Garde For Salesforce", Arial, sans-serif);
  font-weight: var(--font-style-display-4-weight, 600);
  font-size: var(--font-style-display-4-size, 40px);
  line-height: var(--font-style-display-4-line-height, 1.125);
  letter-spacing: var(--font-style-display-4-letter-spacing, -0.0025em);
  color: var(--color-on-surface-1, #001E5B);
  max-width: 40ch;
  text-wrap: balance;
}
.sf-blade__subtitle {
  margin: var(--space-content-lg, 24px) auto 0;
  font-family: var(--font-style-body-copy-1-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 400; font-size: 20px; line-height: 1.5;
  color: var(--color-on-surface-2, #181818);
  max-width: 80ch;
  text-wrap: pretty;
}
.sf-blade__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tds2-spacing-4);
  margin: var(--space-4) 0;
  justify-content: center;
}
.sf-blade__actions--start { justify-content: flex-start; margin-inline: 0; }

/* ── Meet the Builders: centered stack (copy, avatar cluster, button) ── */
.sf-builders-stack {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--space-content-lg, 24px);
}
.sf-builders-stack__visual {
  display: inline-flex; justify-content: center;
  text-decoration: none;
}
.sf-builders-cluster {
  display: flex; flex-wrap: wrap; justify-content: center;
  padding-left: 8px;
}
.sf-builders-cluster__item {
  width: 72px; height: 72px; border-radius: 50%;
  margin-left: -8px;
  border: 3px solid var(--color-background-1, #fff);
  background: var(--tds2-color-brand-primary-light, #edf4ff);
  overflow: hidden; flex-shrink: 0;
  box-shadow: var(--tds2-elevation-1);
  transition: transform 0.15s ease;
}
.sf-builders-cluster__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-builders-cluster__more {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-style-body-copy-1-bold-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 700; font-size: 20px;
  color: var(--tds2-color-brand-primary, #066afe);
  background: var(--tds2-color-brand-primary-light, #edf4ff);
}
.sf-builders-stack__visual:hover .sf-builders-cluster__item { transform: translateY(-3px); }
.sf-builders-stack .sf-blade__actions { margin: 0; }

.sf-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-content-xl, 32px);
  align-items: stretch;
}
.sf-card-grid > * { min-width: 0; }
.sf-card-grid :where(p, h1, h2, h3, h4) { overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .sf-blade { padding-inline: var(--space-grid-tablet-portrait-margin, 32px); }
  .sf-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .sf-blade { padding-inline: var(--space-grid-tablet-landscape-margin, 48px); }
  .sf-card-grid--3up { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sf-card-grid--4up { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1440px) {
  .sf-blade { padding-inline: var(--space-grid-desktop-margin, 48px); }
}

/* ── Card (Day-island, recipe-card) ── */
.sf-card, .sf-card *, .sf-card *::before, .sf-card *::after { box-sizing: border-box; }
.tds2-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  border: 1px solid var(--tds2-color-border-default);
  border-radius: var(--tds2-radius-4xl);
  background: var(--tds2-color-bg-default);
  box-shadow: var(--tds2-elevation-0);
  transition: all var(--tds2-transition-fast);
  font-family: var(--tds2-font-body);
}
.sf-card, .sf-asset-card, .sf-builder-card {
  display: flex; flex-direction: column;
  width: 100%; height: 100%; text-align: left;
  padding: var(--tds2-spacing-6);
  gap: var(--space-content-md, 16px);
  background: var(--tds2-color-bg-default);
  border: 1px solid var(--tds2-color-border-default);
  box-shadow: var(--tds2-elevation-0);
  border-radius: var(--tds2-radius-4xl);
  overflow-wrap: anywhere; word-break: normal; hyphens: auto;
  transition: all var(--tds2-transition-fast);
}
.sf-pitch-row.tds2-card { flex-direction: row; }
.sf-card__image {
  aspect-ratio: 271 / 180;
  background: var(--color-neutral-80, #C9C9C9);
  border-radius: var(--radius-card-nested, 8px) var(--radius-card-nested, 8px) 0 0;
}
.sf-card__copy {
  flex: 1 0 auto; display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--space-content-md, 16px);
}
.sf-card__copy img {
  display: block;
  width: auto;
  height: 88px;
  margin: 0 auto;
}

/* .sf-card__eyebrow {
  display: inline-block;
  padding: 4px 10px; border-radius: 100px;
  background: #EAF5FE; color: #032D60;
  font-family: var(--font-style-body-copy-3-bold-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 700; font-size: 12px; line-height: 18px;
} */
.sf-card__label {
  margin: 0;
  font-family: var(--font-style-display-8-family, "Avant Garde For Salesforce", Arial, sans-serif);
  font-weight: var(--font-style-display-8-weight, 600);
  font-size: var(--font-style-display-8-size, 18px);
  line-height: var(--font-style-display-8-line-height, 1.25);
  color: var(--color-on-surface-1, #001E5B);
}
.sf-card__desc {
  margin: 0;
  font-family: var(--font-style-body-copy-2-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 400; font-size: 16px; line-height: 24px;
  color: var(--color-on-surface-3, #444444);
}

/* ── Asset card (imageless, community-published) ── */
.sf-asset-card, .sf-asset-card *, .sf-asset-card *::before, .sf-asset-card *::after { box-sizing: border-box; }
.sf-asset-card {
}
.sf-asset-card:hover {
  transform: translateY(calc(var(--tds2-spacing-1) * -1));
  box-shadow: var(--tds2-elevation-1);
}
.sf-asset-card__author {
  display: flex; align-items: center; gap: 10px;
}
.sf-asset-card__avatar {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 100px; object-fit: cover;
  background: var(--color-neutral-90, #E5E5E5);
  border: 1px solid rgba(24,24,24,0.06);
}
.sf-asset-card__author-name {
  font-family: var(--font-style-body-copy-3-bold-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 700; font-size: 14px; line-height: 20px;
  color: var(--color-on-surface-1, #001E5B);
}
.sf-asset-card__title {
  margin: 0;
  font-family: var(--font-style-display-8-family, "Avant Garde For Salesforce", Arial, sans-serif);
  font-weight: var(--font-style-display-8-weight, 600);
  font-size: var(--font-style-display-8-size, 18px);
  line-height: var(--font-style-display-8-line-height, 1.25);
  color: var(--color-on-surface-1, #001E5B);
}
.sf-asset-card__desc {
  margin: 0;
  font-family: var(--font-style-body-copy-2-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 400; font-size: 14px; line-height: 20px;
  color: var(--color-on-surface-3, #444444);
}
.sf-asset-card__tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  list-style: none; margin: 0; padding: 0;
}
.sf-asset-card__tag {
  padding: 2px var(--tds2-spacing-2);
  font-size: var(--tds2-font-size-xxs);
  font-weight: 400;
  line-height: 16px;
}
.sf-asset-card__footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-top: auto; padding-top: var(--space-content-md, 16px);
  border-top: 1px solid rgba(24,24,24,0.08);
}
.sf-asset-card__license {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-style-body-copy-3-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 400; font-size: 13px; line-height: 18px;
  color: var(--color-on-surface-3, #444444);
}
.sf-asset-card__repo {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-style-body-copy-2-bold-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 700; font-size: 14px; line-height: 20px;
  color: var(--color-link, #022AC0);
  text-decoration: none;
}
.sf-asset-card__repo:hover { text-decoration: underline; }
.sf-asset-card__repo svg { flex-shrink: 0; }

/* ── Community showcase carousel (home #assets) ── */
.sf-carousel { position: relative; }
.sf-carousel__view {
  overflow: hidden;
  margin: calc(var(--tds2-spacing-4) * -1) calc(var(--tds2-spacing-3) * -1) calc(var(--tds2-spacing-6) * -1);
}
.sf-carousel__track {
  display: flex;
  align-items: stretch;
  gap: var(--space-content-xl, 32px);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  /* Keep the scroll viewport while reserving room for TDS card elevation. */
  padding: var(--tds2-spacing-4) var(--tds2-spacing-3) var(--tds2-spacing-6);
  scrollbar-width: none;
}
.sf-carousel__track::-webkit-scrollbar { display: none; }
.sf-carousel__track > * { scroll-snap-align: start; }
/* Fixed height for every card across the whole track (not just per-view).
   height:auto drops the base card's height:100%; min-height fixes the size. */
.sf-carousel .sf-asset-card { height: auto; min-height: 340px; }
.sf-carousel .sf-builder-card { height: auto; min-height: 400px; }
/* one card per view on small screens; a peek of the next as it widens */
.sf-carousel .sf-asset-card,
.sf-carousel .sf-builder-card { flex: 0 0 84%; }
@media (min-width: 768px) {
  .sf-carousel .sf-asset-card,
  .sf-carousel .sf-builder-card { flex: 0 0 calc((100% - 32px) / 2.3); }
}
@media (min-width: 1024px) {
  .sf-carousel .sf-asset-card,
  .sf-carousel .sf-builder-card { flex: 0 0 calc((100% - 96px) / 3.3); }
}

.sf-carousel__btn {
  position: absolute; top: calc(50% - 22px); transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  padding: 0;
  border: 1px solid var(--color-neutral-80, #C9C9C9);
  background: var(--color-container-1, #fff);
  color: var(--color-on-surface-1, #001E5B);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
  box-shadow: 0 2px 10px rgba(24, 24, 24, 0.14);
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.sf-carousel__btn:hover { background: var(--color-surface-container-2, #E5E5E5); border-color: var(--color-on-surface-1, #001E5B); }
.sf-carousel__btn:disabled { opacity: 0; pointer-events: none; }
.sf-carousel__btn svg { display: block; width: 18px; height: 18px; color: inherit; }
.sf-carousel__btn--prev { left: -14px; }
.sf-carousel__btn--next { right: -14px; }
@media (max-width: 1023px) {
  .sf-carousel__btn { display: none; }
}
/* Desktop: reserve side gutters so the paging buttons sit fully outside the
   cards instead of overlapping them. */
@media (min-width: 1024px) {
  .sf-carousel { padding-inline: 56px; }
  .sf-carousel__view { margin-inline: 0; }
  .sf-carousel__btn--prev { left: 2px; }
  .sf-carousel__btn--next { right: 2px; }
}

.sf-carousel__dots {
  display: flex; gap: 7px; justify-content: center;
  margin-top: var(--space-content-lg, 24px);
}
.sf-carousel__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-neutral-80, #C9C9C9);
  border: 0; padding: 0; cursor: pointer;
  transition: background 0.15s ease, width 0.15s ease;
}
.sf-carousel__dot.is-active { background: var(--color-accent-1, #066AFE); width: 20px; border-radius: 99px; }

/* ── Rich asset card (carousel variant: stats footer) ── */
.sf-asset-card--rich { padding: 0; overflow: hidden; }
.sf-asset-card__accent { display: none; }
.sf-asset-card__body {
  flex: 1; display: flex; flex-direction: column;
  gap: var(--space-content-md, 16px);
  padding: var(--tds2-spacing-6);
}
.sf-asset-card__track { align-self: flex-start; }
.sf-asset-card__track-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sf-asset-card__title-link { text-decoration: none; }
.sf-asset-card__title-link:hover .sf-asset-card__title { text-decoration: underline; }
.sf-asset-card--rich .sf-asset-card__title { font-size: 21px; }
.sf-asset-card--rich .sf-asset-card__desc {
  font-size: 15px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.sf-asset-card--rich .sf-asset-card__footer { justify-content: space-between; flex-wrap: nowrap; }
.sf-asset-card__author { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.sf-asset-card__avatar--initials {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--color-on-surface-3, #444);
  width: 26px; height: 26px;
}
.sf-asset-card--rich .sf-asset-card__avatar { width: 26px; height: 26px; }
.sf-asset-card__stats {
  display: inline-flex; gap: 14px; flex: 0 0 auto;
  font-size: 13px; font-weight: 700; color: var(--color-on-surface-1, #001E5B);
}
.sf-asset-card__stat { display: inline-flex; align-items: center; gap: 4px; }
.sf-asset-card__stat svg { width: 13px; height: 13px; color: #9a9a9a; }

/* ── Builder card (Meet the builders — DF26 residency cohort) ── */
.sf-builder-card, .sf-builder-card *, .sf-builder-card *::before, .sf-builder-card *::after { box-sizing: border-box; }
.sf-builder-card {
  align-items: center;
}
.sf-builder-card:hover {
  transform: translateY(calc(var(--tds2-spacing-1) * -1));
  box-shadow: var(--tds2-elevation-1);
}
.sf-builder-card__avatar {
  width: 96px; height: 96px; flex-shrink: 0;
  border-radius: 100px; object-fit: cover;
  background: var(--color-neutral-90, #E5E5E5);
  border: 3px solid var(--color-surface-1, #fff);
  box-shadow: 0 0 0 2px rgba(2,42,192,0.18);
}
.sf-builder-card__name {
  margin: 0;
  font-family: var(--font-style-display-8-family, "Avant Garde For Salesforce", Arial, sans-serif);
  font-weight: var(--font-style-display-8-weight, 600);
  font-size: 22px; line-height: 1.2;
  color: var(--color-on-surface-1, #001E5B);
}
.sf-builder-card__role {
  margin: -8px 0 0;
  font-family: var(--font-style-body-copy-3-bold-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 700; font-size: 12px; line-height: 18px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-link, #022AC0);
}
.sf-builder-card__country {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-style-body-copy-3-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 400; font-size: 13px; line-height: 18px;
  color: var(--color-on-surface-3, #444444);
}
.sf-builder-card__bio {
  margin: 0;
  font-family: var(--font-style-body-copy-2-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 400; font-size: 15px; line-height: 22px;
  color: var(--color-on-surface-3, #444444);
}
.sf-builder-card__project {
  width: 100%; margin-top: auto;
  padding: var(--space-content-md, 16px);
  border-radius: var(--radius-card-nested, 8px);
  background: #EAF5FE; text-align: left;
}
.sf-builder-card__project-label {
  display: block; margin: 0 0 4px;
  font-family: var(--font-style-body-copy-3-bold-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 700; font-size: 11px; line-height: 16px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #032D60;
}
.sf-builder-card__project-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-style-body-copy-2-bold-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 700; font-size: 15px; line-height: 20px;
  color: var(--color-link, #022AC0);
  text-decoration: none;
}
.sf-builder-card__project-link:hover { text-decoration: underline; }
.sf-builder-card__project-link svg { flex-shrink: 0; }

/* Multi-track badges + multi-repo list (repos joined from community-assets). */
.sf-builder-card__tracks {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
}
.sf-builder-card__repos { display: flex; flex-direction: column; gap: 8px; min-height: 76px; justify-content: center; }
.sf-builder-card__repo {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-style-body-copy-2-bold-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 700; font-size: 15px; line-height: 20px;
  color: var(--color-link, #022AC0); text-decoration: none;
}
.sf-builder-card__repo:hover { text-decoration: underline; }
.sf-builder-card__repo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-builder-card__repo svg { flex-shrink: 0; margin-left: auto; }
.sf-builder-card__repo-dot {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-neutral-80, #C9C9C9);
}
.sf-builder-card__repo-dot.is-strat { background: #5B2A86; }
.sf-builder-card__repo-dot.is-build { background: #1D6A3C; }
.sf-builder-card__repo-dot.is-eng   { background: #022AC0; }
.sf-builder-card__repos-all {
  margin-top: 2px;
  font-family: var(--font-style-body-copy-3-bold-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 700; font-size: 13px; line-height: 18px;
  color: #032D60; text-decoration: none;
}
.sf-builder-card__repos-all:hover { text-decoration: underline; }

/* Builder cards in the carousel: size like asset cards, top-align content. */
.sf-carousel #builders-grid .sf-builder-card { align-items: flex-start; text-align: left; padding: var(--space-5, 24px); gap: 12px; }
.sf-carousel #builders-grid .sf-builder-card__avatar { align-self: center; width: 72px; height: 72px; }
.sf-carousel #builders-grid .sf-builder-card__name { align-self: center; text-align: center; font-size: 19px; }
.sf-carousel #builders-grid .sf-builder-card__country { align-self: center; }
.sf-carousel #builders-grid .sf-builder-card__tracks { justify-content: center; align-self: center; }
/* Clamp bio so one long profile doesn't set the height for all cards. */
.sf-carousel #builders-grid .sf-builder-card__bio {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* Get Involved page: builders shown as a static 3-column grid (all loaded, no
   carousel). Mirrors the carousel card's centered header treatment. */
.sf-builder-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-content-xl, 32px);
  padding: var(--tds2-spacing-4) 0 var(--tds2-spacing-6);
}
@media (min-width: 640px) {
  .sf-builder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .sf-builder-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sf-builder-grid .sf-builder-card { height: auto; align-items: flex-start; text-align: left; padding: var(--space-5, 24px); gap: 12px; }
.sf-builder-grid .sf-builder-card__avatar { align-self: center; width: 72px; height: 72px; }
.sf-builder-grid .sf-builder-card__name { align-self: center; text-align: center; font-size: 19px; }
.sf-builder-grid .sf-builder-card__country { align-self: center; }
.sf-builder-grid .sf-builder-card__tracks { justify-content: center; align-self: center; }

/* Residency pill in the section header. */
.sf-blade__badge {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: var(--space-content-sm, 12px);
  padding: 6px 14px; border-radius: var(--tds2-radius-md);
  background: #EAF5FE; color: #032D60;
  font-family: var(--font-style-body-copy-3-bold-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 700; font-size: 13px; line-height: 18px;
}
.sf-blade__badge::before {
  content: ""; width: 8px; height: 8px; border-radius: 100px;
  background: #04844B; box-shadow: 0 0 0 3px rgba(4,132,75,0.2);
}

/* ═══════════════════════════════════════════════════════════
   CTA BLADE  (recipe-page — closing conversion blade, Night)
   ═══════════════════════════════════════════════════════════ */
.cta-blade {
  width: 100%;
  padding-inline: var(--space-grid-mobile-margin, 24px);
  padding-block: 64px;
  background: linear-gradient(0deg, var(--color-electric-blue-95) 0%, var(--color-white) 100%);
  text-align: center;
  border-bottom: 1px solid var(--color-neutral-90);
}
.cta-blade__cap { width: 100%; margin-inline: auto; max-width: 720px; }
.cta-blade__title {
  margin: 0;
  font-family: var(--font-style-display-4-family, "Avant Garde For Salesforce", Arial, sans-serif);
  font-weight: var(--font-style-display-4-weight, 600);
  font-size: var(--font-style-display-4-size, 40px);
  line-height: var(--font-style-display-4-line-height, 1.125);
  letter-spacing: var(--font-style-display-4-letter-spacing, -0.0025em);
  color: var(--color-on-surface-1);
}
.cta-blade__body {
  margin: var(--space-content-lg, 24px) auto 0;
  font-family: var(--font-style-body-copy-1-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 400; font-size: 20px; line-height: 1.5;
  color: var(--color-on-surface-2);
}
.cta-blade__ctas {
  display: inline-flex; gap: var(--space-4, 16px);
  flex-wrap: wrap; align-items: center; justify-content: center;
  margin-top: var(--space-8, 48px);
}
@media (min-width: 1024px) {
  .cta-blade { padding-inline: var(--space-grid-tablet-landscape-margin, 48px); padding-block: 96px; }
}

.sf-footer {
  margin-top: var(--space-8);
}
/* ═══════════════════════════════════════════════════════════
   LEGAL FOOTER  (recipe-page-chrome — copied verbatim)
   ═══════════════════════════════════════════════════════════ */
.sf-footer__bottom { background: #032D60; padding: 40px 64px; }
.sf-footer__bottom-inner {
  display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start;
}
.sf-footer__logo {
  display: block; flex-shrink: 0;
}
.sf-footer__legal { flex: 1; min-width: 320px; display: flex; flex-direction: column; gap: 24px; }
.sf-footer__legal-links { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.sf-footer__legal-links a, .sf-footer__copyright, .sf-footer__copyright a {
  font-family: var(--font-style-body-copy-4-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 400; font-size: 12px; line-height: 18px; letter-spacing: 0.03px;
  color: #fff; text-decoration: underline;
}
.sf-footer__copyright { margin: 0; text-decoration: none; }

@media (max-width: 1023px) {
  .sf-footer__bottom { padding: 32px 40px; }
}
@media (max-width: 767px) {
  .sf-footer__bottom { padding: 32px 24px; }
  .sf-footer__bottom-inner { flex-direction: column; align-items: center; text-align: center; }
  .sf-footer__legal-links { justify-content: center; }
}

@media (max-width: 1279px) {
  .sf-nav__logo-wordmark { 
    font-size: var(--font-style-display-8-size);
  }
}
/* ═══ NAV COMPACT (< 1024px) ═══ */
@media (max-width: 1023px) {
  .sf-nav__inner { height: 56px; padding-inline: 16px; }
  .sf-nav__logo-icon { display: block; }
  .sf-nav__logo-wordmark { display: none; }
  .sf-nav__hamburger {
    display: flex; flex-direction: column; gap: 5px; justify-content: center;
    background: none; border: none; cursor: pointer; padding: 8px; order: -1;
  }
  .sf-nav__hamburger span {
    display: block; width: 20px; height: 2px;
    background: var(--color-on-surface-1, #001E5B); border-radius: 1px;
  }
  .sf-nav .sf-nav__cta {
    padding-inline: 12px; padding-block: 4px; font-size: 14px;
  }
  .sf-nav__links { display: none; }
  .sf-nav__links.is-open {
    display: flex; flex-direction: column;
    position: absolute; top: 56px; left: 0; right: 0;
    background: #001E5B;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    padding: 16px; gap: 4px; z-index: 49;
  }
  .sf-nav__icon--desktop-only { display: none; }
  .sf-nav__login-label { display: none; }
}
@media (max-width: 767px) {
  .sf-nav__icon[aria-label="Call us"] { display: none; }
}

/* Theme toggle button */
.tl-theme-toggle {
  display: flex; align-items: center; justify-content: center;
  padding: 13px; border-radius: 100px;
  background: none; border: none; cursor: pointer;
  color: var(--color-on-surface-1, #001E5B);
}
.tl-theme-toggle .icon { width: 18px; height: 18px; }
.tl-theme-toggle:hover { background: var(--color-surface-container-1, #F3F3F3); }

/* ═══ SECTION TRANSITION — bottom mountains (Solutions → Builders) ═══
   Reproduces Figma "L Bottom Mountains 03" (node 64:4933): two separate
   mountain masses meeting in a gentle central valley over a periwinkle
   gradient arc. The left image is placed in-flow at frame scale (its natural
   1512×528 = the design frame width) so it sets the band height; the right
   mass (986px = 65.2% of the frame) is bottom/right-anchored at the same
   scale, so the two slopes recompose the valley exactly as designed. The
   vertical gradient is the "arc with a gradient" showing through the valley. */
.mountain-transition {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  background: linear-gradient(180deg, transparent 30%, #C6CFF2 100%);
  height: 30vw;
  clip-path: circle(150vw at 50% -120vw);
  margin-top: -15vw;
  z-index: -1;
  pointer-events: none;
}
.mountain-transition__l {
  display: block;
  width: 100%;
  height: auto;
}
.mountain-transition__r {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 65.2%;
  height: auto;
}

/* ═══ SECTION TRANSITION — top forest (Builders → How it Works) ═══
   Reproduces Figma "L Top Forest 02" (node 64:4961), rebuilt in layers so the
   flat colour is CSS, not baked pixels:
     • the pale sky-blue gradient (transparent → #C6E9FF) is the band background;
     • the white ground is a ::before clipped to the Figma contour ellipse
       (node 64:4974, centre (756,3336) r2835 in the 1512-wide frame → vw units),
       giving the gentle arc via clip-path;
     • the forest itself ships as two transparent PNGs — background (teal
       mountains + mid-conifers descending the ridge) and foreground (the two
       large conifers + brush) — both bottom/left-anchored so they recompose the
       scene exactly as designed.
   Aspect matches the 1512×605 frame (605/1512 ≈ 40%), so 40vw tall. */
.forest-transition {
  position: relative;
  width: 100%;
  height: 40vw;
  overflow: hidden;
  line-height: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(198, 233, 255, 0) 30%, #c6e9ff 100%);
  margin-top: -15vw;
  margin-bottom: -5vw;

  clip-path: shape(
      from 0% 0%, 
      line to 100% 0%, 
      line to 100% 100%, 
      curve to 0% 100% with 50% 70%, 
      close
    );
}
/* white ground — the arc is the Figma contour ellipse expressed as a clip-path */
/* .forest-transition::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #ffffff;
  clip-path: circle(187.5vw at 50% 220.6vw);
  z-index: 0;
} */
.forest-transition__bg,
.forest-transition__fg {
  position: absolute;
  left: 0;
  bottom: 0;
  height: auto;
  z-index: 1;
}
.forest-transition__bg { width: 52.1%; } /* 961×0.82 / 1512 */
.forest-transition__fg { width: 33.2%; } /* 502 / 1512 */

/* ═══════════════════════════════════════════════════════════
   PITCH AN IDEA — on-brand form (#pitch) + pitch cards (#pitches)
   ═══════════════════════════════════════════════════════════ */
/* A narrower content cap so the form doesn't stretch full-bleed. */
.sf-blade__cap--narrow { max-width: 720px; }

.sf-form, .sf-form *, .sf-form *::before, .sf-form *::after { box-sizing: border-box; }
.sf-form {
  display: flex; flex-direction: column;
  gap: var(--space-content-xl, 32px);
  padding: var(--space-6, 32px) var(--space-5, 24px);
  background: var(--color-container-1);
  box-shadow: 2px 2px 18px rgba(24, 24, 24, 0.16);
  border-radius: 16px;
}
.sf-form__group { display: flex; flex-direction: column; gap: 8px; }
/* Paired fields sit 2-across on wider screens, stack on narrow. */
.sf-form__row { display: grid; grid-template-columns: 1fr; gap: var(--space-content-xl, 32px); }
@media (min-width: 720px) {
  .sf-form__row { grid-template-columns: 1fr 1fr; }
}
.sf-form__label {
  font-family: var(--font-style-body-copy-2-bold-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 700; font-size: 16px; line-height: 24px;
  color: var(--color-on-surface-1, #001E5B);
}
.sf-form__req { color: #B60554; margin-left: 2px; }
.tds2-input, .sf-form__input, .sf-form__textarea, .sf-form__select {
  width: 100%;
  padding: var(--tds2-spacing-2) var(--tds2-spacing-3);
  border: 1px solid var(--tds2-color-border-strong);
  border-radius: var(--tds2-radius-lg);
  background: var(--tds2-color-bg-default);
  font-family: var(--tds2-font-body);
  font-weight: var(--tds2-font-weight-normal); font-size: var(--tds2-font-size-md); line-height: var(--tds2-line-height-normal);
  color: var(--tds2-color-text-default);
  outline: var(--tds2-a11y-outline);
  outline-offset: var(--tds2-a11y-outline-offset);
  transition: var(--tds2-a11y-outline-transition), all var(--tds2-transition-fast);
}
.sf-form__textarea { min-height: 120px; resize: vertical; }
.tds2-input:hover:not(:disabled):not(:focus-visible),
.sf-form__input:hover:not(:disabled):not(:focus-visible),
.sf-form__textarea:hover:not(:disabled):not(:focus-visible),
.sf-form__select:hover:not(:disabled):not(:focus-visible) {
  border-color: var(--tds2-color-border-hover);
}
.tds2-input:focus-visible, .sf-form__input:focus-visible, .sf-form__textarea:focus-visible, .sf-form__select:focus-visible {
  outline: var(--tds2-a11y-outline-focus);
  outline-offset: var(--tds2-a11y-outline-offset-focus);
  border-color: var(--tds2-color-border-focus);
  background-color: var(--tds2-color-brand-primary-light);
}
.tds2-input::placeholder, .sf-form__input::placeholder, .sf-form__textarea::placeholder {
  color: var(--tds2-color-text-placeholder); opacity: 1;
}

.sf-form__acks { display: flex; flex-direction: column; gap: 12px; border: 0; padding: 0; margin: 0; }
/* Acknowledgments in a 2-column grid to keep the form short. */
.sf-form__acks-grid { display: grid; grid-template-columns: 1fr; gap: 12px 32px; }
@media (min-width: 720px) {
  .sf-form__acks-grid { grid-template-columns: 1fr 1fr; }
}
.sf-form__ack {
  display: flex; align-items: flex-start; gap: 12px;
  font-family: var(--font-style-body-copy-2-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 400; font-size: 15px; line-height: 22px;
  color: var(--color-on-surface-3, #444444);
  cursor: pointer;
}
.sf-form__check {
  flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px;
  accent-color: var(--color-link, #022AC0); cursor: pointer;
}

.sf-form__error {
  margin: 0;
  font-family: var(--font-style-body-copy-2-bold-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 700; font-size: 14px; line-height: 20px;
  color: #B60554;
}
.sf-form__error:empty { display: none; }
.sf-form__hint {
  margin: 0;
  font-family: var(--font-style-body-copy-3-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 400; font-size: 13px; line-height: 18px;
  color: var(--color-on-surface-3, #444444);
}
.sf-cta:disabled, .sf-cta[disabled] {
  opacity: 0.45; cursor: not-allowed; pointer-events: none;
}

/* ── Pitch card (read side, cloned from .sf-asset-card) ── */
.sf-pitch-card__excerpt {
  margin: 0;
  font-family: var(--font-style-body-copy-2-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 400; font-size: 16px; line-height: 24px;
  color: var(--color-on-surface-3, #444444);
}
.sf-pitch-card__votes {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-style-body-copy-2-bold-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 700; font-size: 14px; line-height: 20px;
  color: var(--color-on-surface-1, #001E5B);
}
.sf-pitch-card__votes svg { flex-shrink: 0; }

/* ── Partial-include mounts (reserve header height to avoid layout shift) ── */
[data-include="header"] { display: block; min-height: 64px; }

/* ═══════════════════════════════════════════════════════════════════════════
   GET INVOLVED — full-page redesign (single intro + sticky segmented tab bar +
   per-tab panel head + enhanced "Direction B" list). Body only; shared nav
   partial is untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Single page intro (replaces the per-tab eyebrow/title/subtitle stack) ── */
.sf-intro {
  padding: 72px var(--space-grid-mobile-margin, 24px) 8px;
}
.sf-intro { 
  margin: 0 auto; 
  text-align: center; 
}
.sf-intro__title {
  margin: 0 auto;
  font-family: var(--font-style-display-4-family, "Avant Garde For Salesforce", Arial, sans-serif);
  font-weight: var(--font-style-display-4-weight, 600);
  font-size: var(--font-style-display-4-size, 40px);
  line-height: var(--font-style-display-4-line-height, 1.125);
  letter-spacing: var(--font-style-display-4-letter-spacing, -0.0025em);
  color: var(--color-on-surface-1, #001E5B);
  max-width: 40ch;
  text-wrap: pretty;
}
.sf-intro__lede {
  margin: 16px auto 0;
  max-width: 80ch;
  text-wrap: balance;
  font-family: var(--font-style-body-copy-1-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 400; font-size: 18px; line-height: 1.55;
  color: var(--color-on-surface-3, #444444);
}

/* ── Card tabs (icon tile + label + hint; spread full content width) ── */
/* Tabs Styles - Following TDS Design System */
.sf-tabbar {
  max-width: var(--content-max);
  margin: var(--tds2-spacing-8) auto;
}

.tds2-tabs-list {
  font-family: var(--tds2-font-body);
  display: inline-flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0;
  max-width: 100%;
  position: relative;
}

.tds2-tabs-list[data-orientation='horizontal'] {
  width: auto;
}

.tds2-tabs-list[data-orientation='vertical'] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Full-width: tabs span available space evenly */
.tds2-tabs-list--full-width {
  display: flex;
  width: 100%;
}

.tds2-tabs-list--full-width .tds2-tabs-trigger {
  flex: 1 1 0%;
}

/* Responsive: horizontal scroll on narrow viewports so all tabs stay accessible */
.tds2-tabs-list--scroll[data-orientation='horizontal'] {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
  scrollbar-width: thin;
}

.tds2-tabs-trigger {
  --tds2-tabs-trigger-bg: transparent;
  --tds2-tabs-trigger-text-color: var(--tds2-color-text-muted);
  --tds2-tabs-trigger-padding: var(--tds2-spacing-3) var(--tds2-spacing-4);
  --tds2-tabs-trigger-gap: var(--tds2-spacing-2);
  --tds2-tabs-trigger-font-size: var(--tds2-font-size-md);
  --tds2-tabs-trigger-font-weight: var(--tds2-font-weight-normal);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tds2-tabs-trigger-gap);
  min-height: 0;
  padding: var(--tds2-tabs-trigger-padding);
  border: 0;
  background-color: var(--tds2-tabs-trigger-bg);
  color: var(--tds2-tabs-trigger-text-color);
  cursor: pointer;
  font-family: var(--tds2-font-body);
  font-size: var(--tds2-tabs-trigger-font-size);
  font-weight: var(--tds2-tabs-trigger-font-weight);
  line-height: 1.5rem;
  outline: none;
  position: relative;
  text-decoration: none;
  transition: all var(--tds2-transition-fast);
  white-space: nowrap;
}

.tds2-tabs-trigger:hover:not(:disabled) {
  color: inherit;
}

.tds2-tabs-trigger:focus-visible {
  outline: var(--tds2-a11y-outline-focus);
  outline-offset: var(--tds2-a11y-outline-offset-focus);
  z-index: 1;
}

.tds2-tabs-trigger:disabled {
  color: var(--tds2-color-text-disabled);
  cursor: not-allowed;
  outline: none;
  pointer-events: none;
}

.tds2-tabs-content {
  font-family: var(--tds2-font-body);
  outline: none;
}

.tds2-tabs-content[data-orientation='vertical'] {
  margin-top: 0;
}

.tds2-tabs-content:focus-visible {
  outline: var(--tds2-a11y-outline-focus);
  outline-offset: var(--tds2-a11y-outline-offset-focus);
  border-radius: var(--tds2-radius-sm);
}

/* Base */
.tds2-tabs-list--base[data-orientation='horizontal'] {
  width: 100%;
  border-bottom: 1px solid var(--tds2-color-border-default);
}

.tds2-tabs-list--base .tds2-tabs-trigger {
  --tds2-tabs-trigger-gap: var(--tds2-spacing-2);
  --tds2-tabs-trigger-padding: 0.6875rem var(--tds2-spacing-3);
  --tds2-tabs-trigger-text-color: var(--tds2-color-text-muted);
  --tds2-tabs-trigger-font-size: var(--tds2-font-size-md);
  --tds2-tabs-trigger-font-weight: var(--tds2-font-weight-normal);

  font-family: var(--tds2-font-body);
  line-height: 1.5rem;
}

.tds2-tabs-list--base .tds2-tabs-trigger:hover:not(:disabled) {
  box-shadow: inset 0 -0.125rem 0 0 var(--tds2-color-brand-primary);
}

.tds2-tabs-list--base .tds2-tabs-trigger:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}

.tds2-tabs-list--base .tds2-tabs-trigger[data-state='active'] {
  --tds2-tabs-trigger-text-color: var(--tds2-color-text-default);
  --tds2-tabs-trigger-font-weight: var(--tds2-font-weight-bold);

  box-shadow: inset 0 -0.1875rem 0 0 var(--tds2-color-brand-primary);
}

.tds2-tabs-list--base[data-orientation='vertical'] {
  border-bottom: 0;
  border-inline-end: 1px solid var(--tds2-color-border-default);
}

.tds2-tabs-list--base[data-orientation='vertical'] .tds2-tabs-trigger {
  justify-content: flex-start;
  min-width: 12rem;
  padding-inline: var(--tds2-spacing-3);
  box-shadow: none;
}

.tds2-tabs-list--base[data-orientation='vertical'] .tds2-tabs-trigger[data-state='active'] {
  --tds2-tabs-trigger-bg: var(--tds2-color-bg-default);

  box-shadow: inset 0.1875rem 0 0 0 var(--tds2-color-brand-primary);
}

/* Segmented */
.tds2-tabs-list--segmented {
  --tds2-tabs-list-segmented-gap: var(--tds2-spacing-1);
  --tds2-tabs-list-segmented-bg: transparent;

  gap: var(--tds2-tabs-list-segmented-gap);
  padding: 0;
  border: 0;
  background-color: var(--tds2-tabs-list-segmented-bg);
}

.tds2-tabs-list--segmented[data-orientation='horizontal'] {
  width: auto;
}

.tds2-tabs-list--segmented[data-orientation='vertical'] {
  width: max-content;
  border-inline-end: 0;
}

.tds2-tabs-list--segmented .tds2-tabs-trigger {
  --tds2-tabs-trigger-gap: var(--tds2-spacing-1);
  --tds2-tabs-trigger-padding: 0.75rem var(--tds2-spacing-4) 0.5rem;
  --tds2-tabs-trigger-radius: var(--tds2-radius-lg);
  --tds2-tabs-trigger-text-color: var(--tds2-color-text-muted);
  --tds2-tabs-trigger-font-size: var(--tds2-font-size-md);

  border-radius: var(--tds2-tabs-trigger-radius);
  font-family: var(--tds2-font-heading);
  line-height: 1.5rem;
}

.tds2-tabs-list--segmented .tds2-tabs-trigger:hover:not(:disabled) {
  background-color: var(--tds2-color-bg-subtle);
  color: var(--tds2-color-text-muted);
}

.tds2-tabs-list--segmented .tds2-tabs-trigger:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}

.tds2-tabs-list--segmented .tds2-tabs-trigger[data-state='active'] {
  --tds2-tabs-trigger-bg: var(--tds2-color-brand-primary-light);
  --tds2-tabs-trigger-text-color: var(--tds2-color-brand-primary);
}

.tds2-tabs-list--segmented[data-orientation='vertical'] .tds2-tabs-trigger {
  justify-content: flex-start;
  min-width: 12rem;
}

/* Large */
.tds2-tabs-list--large[data-orientation='horizontal'] {
  --tds2-tabs-list-large-gap: var(--tds2-spacing-2);

  width: 100%;
  gap: var(--tds2-tabs-list-large-gap);
  border-bottom: 1px solid var(--tds2-color-border-default);
}

.tds2-tabs-list--large .tds2-tabs-trigger {
  --tds2-tabs-trigger-gap: var(--tds2-spacing-2);
  --tds2-tabs-trigger-padding: 0.75rem var(--tds2-spacing-6);
  --tds2-tabs-trigger-radius: var(--tds2-radius-xl) var(--tds2-radius-xl) 0 0;
  --tds2-tabs-trigger-text-color: var(--tds2-color-text-muted);
  --tds2-tabs-trigger-font-size: var(--tds2-font-size-xl);

  border-radius: var(--tds2-tabs-trigger-radius);
  font-family: var(--tds2-font-heading);
  line-height: 1.75rem;
}

.tds2-tabs-list--large .tds2-tabs-trigger:hover:not(:disabled) {
  background-color: var(--tds2-color-brand-primary-light);
  color: var(--tds2-color-brand-primary-dark);
  box-shadow: inset 0 -0.125rem 0 0 var(--tds2-color-brand-primary-dark);
}

.tds2-tabs-list--large .tds2-tabs-trigger:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}

.tds2-tabs-list--large .tds2-tabs-trigger[data-state='active'] {
  --tds2-tabs-trigger-text-color: var(--tds2-color-brand-primary);

  box-shadow: inset 0 -0.25rem 0 0 var(--tds2-color-brand-primary);
}

.tds2-tabs-list--large[data-orientation='vertical'] {
  --tds2-tabs-list-large-gap: var(--tds2-spacing-2);

  border-bottom: 0;
  border-inline-end: 1px solid var(--tds2-color-border-default);
  gap: var(--tds2-tabs-list-large-gap);
}

.tds2-tabs-list--large[data-orientation='vertical'] .tds2-tabs-trigger {
  /* Selector specificity is 0,3,0 — high enough to win over any inherited
     box-shadow without !important. The override applies to the inactive
     state; the [data-state='active'] rule below intentionally re-adds an
     inset shadow with the same specificity tier. */
  justify-content: flex-start;
  min-width: 13rem;
  box-shadow: none;
}

.tds2-tabs-list--large[data-orientation='vertical'] .tds2-tabs-trigger[data-state='active'] {
  --tds2-tabs-trigger-bg: var(--tds2-color-bg-default);

  box-shadow: inset 0.25rem 0 0 0 var(--tds2-color-brand-primary);
}



/* ── Panel wrapper + head (h2 + one-liner + right-aligned primary action) ── */
.sf-panel {
  width: 100%; margin-inline: auto;
  max-width: var(--content-max);
}
.sf-panel--narrow { max-width: 720px; }
.sf-panel__head {
  display: flex;
  justify-content: center; 
  align-items: flex-end;
  text-align: center;
  gap: 20px 24px; flex-wrap: wrap; margin-bottom: 22px;
}
.sf-panel__headmain { min-width: 0; }
.sf-panel__title {
  margin: 0 0 var(--tds2-spacing-2);
  font-family: var(--font-style-display-4-family, "Avant Garde For Salesforce", Arial, sans-serif);
  font-weight: var(--font-style-display-4-weight, 600);
  font-size: var(--font-style-display-4-size);
  line-height: 1.15;
  color: var(--color-on-surface-1, #001E5B);
}
.sf-panel__lede {
  margin: 0; 
  max-width: 80ch; 
  text-wrap: balance;
  font-family: var(--font-style-body-copy-1-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 400; font-size: 16px; line-height: 1.5;
  color: var(--color-on-surface-3, #444444);
}
.sf-panel__action { flex: 0 0 auto; white-space: nowrap; }

/* ═══ Direction B — enhanced list treatment (Community + Pitches) ═══ */

/* Category / track badges — subtle WCAG-AA tints from the site palette. */
.sf-disc-title { text-decoration: none; }
.sf-disc-badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px var(--tds2-spacing-2); border-radius: var(--tds2-radius-md);
  border: 0;
  font-family: var(--font-style-body-copy-3-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 700; font-size: 12px; line-height: 18px;
  color: var(--color-on-surface-3, #444444);
}
/* Announcements — blue (loudest, official) */
.sf-disc-badge--ann  { background: #EAEEFB; color: #022AC0; border-color: #B9C6F2; }
/* Ideas / Builder — green */
.sf-disc-badge--idea,
.sf-disc-badge--build { background: #E7F4EC; color: #1D6A3C; border-color: #B7DEC6; }
/* Q&A / Strategist — purple */
.sf-disc-badge--qa,
.sf-disc-badge--strat { background: #F1EAF8; color: #5B2A86; border-color: #D8C3EC; }
/* Show and tell — amber */
.sf-disc-badge--show  { background: #FBF1DC; color: #8A5A00; border-color: #EBD6A6; }
/* General — neutral */
.sf-disc-badge--gen   { background: #F0F0F0; color: #444444; border-color: #D8D8D8; }
/* Engineer — reuse the announcement blue tint */
.sf-disc-badge--eng   { background: #EAEEFB; color: #022AC0; border-color: #B9C6F2; }

/* Leading category dot on discussion rows. */
.sf-disc-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex: 0 0 auto; margin-top: 6px; align-self: flex-start;
  background: #9a9a9a;
}
.sf-disc-dot--ann  { background: #022AC0; }
.sf-disc-dot--idea { background: #1D6A3C; }
.sf-disc-dot--qa   { background: #5B2A86; }
.sf-disc-dot--show { background: #8A5A00; }
.sf-disc-dot--gen  { background: #9a9a9a; }

.sf-disc-excerpt {
  margin-top: 4px;
  font-family: var(--font-style-body-copy-2-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 400; font-size: 15px; line-height: 22px;
  color: var(--color-on-surface-3, #444444);
}

/* ── Pitch filter controls ── */
.sf-pitch-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  margin-bottom: 20px;
}
.sf-pitch-search { flex: 1 1 260px; max-width: 380px; }
.sf-pitch-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-pitch-chip {
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--color-neutral-90, #E5E5E5);
  background: var(--color-container-1, #FFFFFF);
  font-family: var(--font-style-body-copy-2-bold-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 700; font-size: 14px; line-height: 20px;
  color: var(--color-on-surface-1, #001E5B);
  cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.sf-pitch-chip:hover { border-color: var(--color-link, #022AC0); }
.sf-pitch-chip.is-active {
  background: var(--color-link, #022AC0);
  border-color: var(--color-link, #022AC0);
  color: #FFFFFF;
}
.sf-pitch-empty {
  margin: 20px 0 0;
  font-family: var(--font-style-body-copy-2-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 400; font-size: 16px; line-height: 24px;
  color: var(--color-on-surface-3, #444444);
}

/* ── Pitch ranked list (read side) ── */
.sf-pitch-list {
  list-style: none; margin: 0; padding: 0;
}
.sf-pitch-row + .sf-pitch-row {
  border-top: 1px solid var(--color-neutral-90, #E5E5E5);
}
.sf-pitch-row {
  display: flex; align-items: flex-start; gap: 16px;
  margin: 0 0 var(--tds2-spacing-4) 0;
  padding: 16px 20px;
  transition: background-color 0.12s ease;
}
/* Direction B hover highlight on list rows. */
.sf-pitch-row:hover { background: var(--color-neutral-95, #F3F3F3); }
.sf-pitch-row__votes {
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0; min-width: 52px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--color-neutral-90, #E5E5E5);
  font-family: var(--font-style-body-copy-2-bold-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 700; font-size: 14px; line-height: 20px;
  color: var(--color-on-surface-1, #001E5B);
}
.sf-pitch-row__votes svg { flex-shrink: 0; }
.sf-pitch-row__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.sf-pitch-row__title {
  display: inline-flex; align-items: center; justify-content: flex-start;
  align-self: flex-start; gap: 6px;
  padding: 0; border: none; background: none; text-align: left; cursor: pointer;
  font-family: var(--font-style-body-copy-1-bold-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 700; font-size: 18px; line-height: 24px;
  color: var(--color-on-surface-1, #001E5B);
}
.sf-pitch-row__title:hover:not([disabled]),
.sf-pitch-row__title:focus-visible {
  color: var(--color-link, #022AC0); text-decoration: underline;
}
.sf-pitch-row__title[disabled] { cursor: default; }
.sf-pitch-row__chev {
  flex-shrink: 0; transition: transform 0.15s ease;
  color: var(--color-on-surface-3, #444444);
}
.sf-pitch-row__title[aria-expanded="true"] .sf-pitch-row__chev { transform: rotate(180deg); }
.sf-pitch-detail {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--color-neutral-90, #E5E5E5);
  display: flex; flex-direction: column; gap: 10px;
}
.sf-pitch-detail[hidden] { display: none; }
.sf-pitch-detail__row { display: flex; flex-direction: column; gap: 2px; }
.sf-pitch-detail__label {
  font-family: var(--font-style-body-copy-3-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--color-on-surface-3, #444444);
}
.sf-pitch-detail__value {
  font-family: var(--font-style-body-copy-2-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 400; font-size: 15px; line-height: 22px;
  color: var(--color-on-surface-1, #001E5B); white-space: pre-wrap;
}
.sf-pitch-row__meta {
  font-family: var(--font-style-body-copy-3-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 400; font-size: 14px; line-height: 20px;
  color: var(--color-on-surface-3, #444444);
}
.sf-pitch-row__upvote {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--color-link, #022AC0);
  background: var(--color-container-1, #FFFFFF);
  font-family: var(--font-style-body-copy-2-bold-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 700; font-size: 14px; line-height: 20px;
  color: var(--color-link, #022AC0); text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.sf-pitch-row__upvote:hover,
.sf-pitch-row__upvote:focus-visible {
  background: var(--color-link, #022AC0); color: #FFFFFF;
}
.sf-pitch-row__upvote svg { flex-shrink: 0; }
.sf-blade__note {
  margin: 8px 0 0;
  font-family: var(--font-style-body-copy-3-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 400; font-size: 14px; line-height: 20px;
  color: var(--color-on-surface-3, #444444);
}

/* ══ Community Assets page (assets.html) ══ */
.sf-assets-sort {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-style-body-copy-3-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 700; font-size: 13px; color: var(--color-on-surface-3, #444444);
}
.sf-assets-sort select {
  font-family: inherit; font-weight: 700; font-size: 13px;
  padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--color-neutral-90, #E5E5E5);
  background: var(--color-container-1, #FFFFFF);
  color: var(--color-on-surface-1, #001E5B); cursor: pointer;
}
.sf-assets-topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.sf-assets-topic {
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--color-neutral-90, #E5E5E5);
  background: var(--color-neutral-95, #F3F3F3);
  font-family: var(--font-style-body-copy-3-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 600; font-size: 12px; line-height: 18px;
  color: var(--color-on-surface-3, #444444); cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.sf-assets-topic:hover { border-color: var(--color-link, #022AC0); }
.sf-assets-topic.is-active { background: #EAF1FE; color: var(--color-accent, #066AFE); border-color: #B9C6F2; }
.sf-assets-count {
  margin: 0 0 12px;
  font-family: var(--font-style-body-copy-3-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 700; font-size: 13px; letter-spacing: 0.02em;
  color: #9a9a9a;
}
.sf-assets-count b { color: var(--color-on-surface-1, #001E5B); }
.sf-assets-clear {
  margin-left: 8px; padding: 2px 10px; border-radius: 999px;
  border: 1px solid var(--color-neutral-80, #C9C9C9); background: transparent;
  font: inherit; font-size: 12px; color: var(--color-link, #022AC0);
  cursor: pointer;
}
.sf-assets-clear:hover { background: var(--color-surface-container-2, #E5E5E5); }
.sf-assets-row { align-items: center; }
.sf-assets-row__avatar {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-neutral-90, #E5E5E5);
  font-family: var(--font-style-body-copy-3-bold-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 700; font-size: 13px; color: var(--color-on-surface-3, #444444);
}
.sf-assets-row__title {
  font-family: var(--font-style-body-copy-1-bold-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 700; font-size: 18px; line-height: 24px;
  color: var(--color-on-surface-1, #001E5B); text-decoration: none;
}
.sf-assets-row__title:hover, .sf-assets-row__title:focus-visible {
  color: var(--color-link, #022AC0); text-decoration: underline;
}
.sf-assets-row__desc {
  font-family: var(--font-style-body-copy-2-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 400; font-size: 14px; line-height: 20px;
  color: var(--color-on-surface-3, #444444);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sf-assets-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.sf-assets-row__topics { color: #8a8a8a; }
.sf-assets-row__license { color: #8a8a8a; }
.sf-assets-row__stats { display: flex; gap: 18px; align-items: center; flex: 0 0 auto; }
.sf-assets-stat {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-style-body-copy-2-bold-family, "Salesforce Sans", Arial, sans-serif);
  font-weight: 700; font-size: 14px; color: var(--color-on-surface-1, #001E5B);
}
.sf-assets-stat svg { color: var(--color-on-surface-3, #444444); flex-shrink: 0; }
.sf-assets-stat span { font-weight: 600; font-size: 12px; color: #9a9a9a; }
@media (max-width: 640px) {
  .sf-assets-row__stats { display: none; }
  .sf-assets-sort { margin-left: 0; }
}

/* ── Get Involved: responsive grid margins (match .sf-blade breakpoints) ── */


@media (min-width: 768px) {
  #engage-intro,
  .sf-tab-panel,
  .sf-tabs,
  .sf-tabbar { padding-inline: var(--space-grid-tablet-portrait-margin, 32px); }
}
@media (min-width: 1024px) {
  #engage-intro,
  .sf-tab-panel,
  .sf-tabs,
  .sf-tabbar { padding-inline: var(--space-grid-tablet-landscape-margin, 48px); }
}
@media (min-width: 1440px) {
  #engage-intro,
  .sf-tab-panel,
  .sf-tabs,
  .sf-tabbar { padding-inline: var(--space-grid-desktop-margin, 48px); }
}
/* On narrow screens, the panel action drops below the heading and goes full-width. */
@media (max-width: 560px) {
  .sf-panel__action { width: 100%; text-align: center; }
}