/* Marketing layer for tmp/editorial-site — consumes --cntx-* from assets/ds/cntx-ds.css */
/* No --bg/--brand vocabulary. Missing token = propose to packages/cntx-design-system. */
/* Coral = accent/highlight only — never action CTA. */
/* Synced from editorial-site assets/site.css + WP topbar chrome overrides. */

/* WP H1 product discover links (discreet) */
.cntx-warm-shell .warm-product-link {
  margin: 18px 0 0;
  font-size: 14px;
  font-weight: 500;
}
.cntx-warm-shell .warm-product-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cntx-text-brand);
  text-decoration: none;
}
.cntx-warm-shell .warm-product-link a:hover {
  text-decoration: underline;
}
.cntx-warm-shell .warm-product-link .cntx-icon {
  width: 14px;
  height: 14px;
}

/* Prefer Inter when Inter Tight is not self-hosted on WP */
.cntx-warm-shell .display {
  font-family: 'Inter Tight', Inter, system-ui, sans-serif;
}

/*
 * WP topbar chrome (header.topbar > nav.nav) — restore/reinforce signals that
 * mockup header.nav styles must not wipe: chevron, current underline, mega highlight.
 * Loaded after cntx-home.v14.css when ?ds=warm.
 */
/* Desktop-only: do NOT force display:flex here — base .nav is display:none
   under 860px so the hamburger stays in-viewport. Warm polish applies ≥860px. */
header.topbar .nav {
  position: static;
  align-items: center;
  gap: 18px;
  background: transparent;
  border: 0;
  backdrop-filter: none;
  z-index: auto;
}
@media (min-width: 860px) {
  header.topbar .nav {
    display: flex;
  }
}
header.topbar .nav a.active,
header.topbar .nav-dropdown-wrap.is-active > .nav-dropdown-trigger {
  color: var(--cntx-text-primary);
}
/* Kill legacy violet gradient on hover/active underline (cntx-home.v14 .nav a::after) */
header.topbar .nav a::after,
header.topbar .nav-dropdown-trigger::after {
  background: var(--cntx-action-primary) !important;
}
header.topbar .nav a.active::after,
header.topbar .nav-dropdown-wrap.is-active .nav-dropdown-trigger::after {
  background: var(--cntx-action-primary);
  opacity: 1;
  transform: scaleX(1);
}
header.topbar .nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
header.topbar .nav-dropdown-trigger svg,
header.topbar .nav-dropdown-trigger .cntx-icon {
  width: 14px;
  height: 14px;
  flex: none;
  opacity: 0.85;
}
header.topbar .nav-mega-card.active {
  background: var(--cntx-bg-selected, var(--cntx-bg-hover)) !important;
  border-color: var(--cntx-border-default);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cntx-action-primary) 28%, transparent);
}
header.topbar .nav-mega-card.active .nav-mega-card__title {
  color: var(--cntx-text-brand);
}
header.topbar .nav-mega-card.active .nav-mega-card__cta {
  color: var(--cntx-action-primary);
}
header.topbar .nav-mega-card.active .nav-mega-card__icon {
  background: color-mix(in srgb, var(--cntx-action-primary) 16%, transparent);
  color: var(--cntx-action-primary);
}

/*
 * Mega menu clip regression (desktop widths):
 * 1) Wrap is only as tall as the trigger (centered in the 76px sticky topbar),
 *    so `top: calc(100% + 8px)` lands inside the header — top radius looks cut.
 * 2) Panel is `left: 50%` of the Product/Resources trigger, so on ~1100–1280px
 *    the wide grid overflows left and `body { overflow-x: clip }` slices Strategy.
 * Fix: position the panel against full-width `.topbar-inner` (not the trigger),
 * stretch the chrome chain, and keep a clear gap below the bar.
 */
header.topbar,
header.topbar .container,
header.topbar .topbar-inner,
header.topbar .nav,
header.topbar .nav-dropdown-wrap {
  overflow: visible !important;
}
header.topbar {
  align-items: stretch !important;
}
header.topbar .container {
  display: flex;
  align-items: stretch;
  height: 100%;
}
header.topbar .topbar-inner {
  position: relative;
  align-items: stretch;
  height: 100%;
  width: 100%;
}
header.topbar .brand,
header.topbar .actions {
  display: flex;
  align-items: center;
  align-self: stretch;
}
header.topbar .nav {
  align-self: stretch;
  align-items: center;
}
header.topbar .nav-dropdown-wrap.nav-dropdown-wrap--mega {
  /* Static → absolute panel uses .topbar-inner as containing block (full width). */
  position: static;
  align-self: stretch;
  height: auto;
  min-height: 100%;
  display: inline-flex;
  align-items: center;
}
header.topbar .nav-dropdown-wrap.nav-dropdown-wrap--mega::after {
  /* Bridge only under the trigger, not the whole topbar-inner. */
  left: 0;
  right: 0;
  width: 100%;
  /* With position:static wrap, ::after would span the inner — disable it. */
  content: none;
  display: none;
}
header.topbar {
  --cntx-topbar-h: 76px;
}
header.topbar .nav-dropdown-wrap.nav-dropdown-wrap--mega .nav-dropdown.nav-dropdown--mega {
  /* Fixed to the viewport: immune to header overflow / trigger-relative left clip. */
  position: fixed;
  top: calc(var(--cntx-topbar-h) + 12px);
  left: 50%;
  right: auto;
  margin-top: 0;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(920px, calc(100vw - 40px));
  z-index: 200;
}
header.topbar .nav-dropdown-wrap.nav-dropdown-wrap--mega.is-open .nav-dropdown.nav-dropdown--mega,
header.topbar .nav-dropdown-wrap.nav-dropdown-wrap--mega:focus-within .nav-dropdown.nav-dropdown--mega {
  transform: translateX(-50%);
}

html { scroll-padding-top: 120px; background: var(--cntx-bg-canvas); }
  body { margin: 0; background: var(--cntx-bg-canvas); color: var(--cntx-text-primary); font: 16px/1.55 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
  /* Override cntx-home.v14 dark body violet/fuchsia aurora (higher specificity).
     That sheet stays for WP chrome; without this the aurora bleeds through the topbar. */
  html[data-theme="dark"] body,
  [data-theme="dark"] body {
    background: var(--cntx-bg-canvas);
    background-image: none;
  }
  html[data-skin="brand-warm-new"] header.topbar,
  html[data-theme="dark"] header.topbar {
    background: var(--cntx-bg-canvas);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  a { color: inherit; text-decoration: none; }
  .wrap { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
  .display { font-family: 'Inter Tight', Inter, sans-serif; font-weight: 600; letter-spacing: -0.035em; line-height: 1.03; margin: 0; }
  .accent { color: var(--cntx-text-brand); }
  .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cntx-text-brand); }
  .soon { display: inline-block; width: 7px; height: 7px; border-radius: 50%; border: 1.5px dashed var(--cntx-text-muted); margin-left: 6px; vertical-align: 1px; }
  .chip { font-size: 11.5px; font-weight: 500; border-radius: 5px; padding: 1px 7px; background: var(--cntx-bg-canvas); border: 1px solid var(--cntx-border-default); color: var(--cntx-text-muted); white-space: nowrap; }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; }

  /* header.nav = mockup chrome only (not WP topbar .nav) */
  header.nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--cntx-bg-canvas) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--cntx-border-default); }
  header.nav .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
  .logo { display: flex; align-items: center; }
  .logo img { height: 42px; width: auto; display: block; }
  header.nav ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; font-size: 14px; font-weight: 500; color: var(--cntx-text-muted); }
  header.nav .right { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
  .pill { border: 1px solid var(--cntx-border-default); border-radius: 6px; padding: 5px 9px; font-size: 13px; color: var(--cntx-text-muted); background: var(--cntx-bg-surface); }
  .btn { display: inline-flex; align-items: center; gap: 8px; font: 500 14px Inter, sans-serif; border-radius: 7px; padding: 9px 14px; border: 1px solid var(--cntx-border-default); background: var(--cntx-bg-surface); color: var(--cntx-text-primary); white-space: nowrap; }
  .btn-p { background: var(--cntx-action-primary); border-color: var(--cntx-action-primary); color: #fff; }
  .btn-lg { font-size: 15px; padding: 12px 18px; }
  .ghost { color: var(--cntx-text-muted); padding: 9px 6px; }

  /* Hero */
  .hero { padding: 72px 0 64px; }
  .hero h1 { font-size: 64px; max-width: 14em; margin-top: 18px; }
  .hero .row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: end; margin-top: 28px; }
  .hero .lead { font-size: 19px; color: var(--cntx-text-muted); margin: 0; max-width: 36em; }
  .hero .outcome { font-size: 16px; font-weight: 500; margin: 14px 0 0; }
  .hero .ctas { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
  .hero-vis { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; margin-top: 56px; align-items: start; }
  .stack { display: grid; gap: 20px; }

  .frame { position: relative; border: 1px solid var(--cntx-border-strong); border-radius: 12px; overflow: hidden; background: var(--cntx-bg-surface);
    box-shadow: 0 24px 60px -24px rgba(2, 72, 80, .28), 0 2px 6px rgba(17, 23, 24, .05); }
  [data-theme="dark"] .frame { box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .7); }
  .frame.flat { box-shadow: none; border-color: var(--cntx-border-default); }
  .frame .bar { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 12px; border-bottom: 1px solid var(--cntx-border-default); font-size: 12px; color: var(--cntx-text-muted); background: var(--cntx-bg-canvas); white-space: nowrap; overflow: hidden; }
  .frame .bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--cntx-border-strong); flex: none; }
  .frame .bar span { margin-left: 6px; overflow: hidden; text-overflow: ellipsis; }
  /* Product shot caption chip (bands look) */
  .frame .mark {
    position: absolute; z-index: 3; left: 0; bottom: 0;
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px 14px 14px;
    background: color-mix(in srgb, var(--cntx-bg-inverse) 92%, transparent);
    color: #fff; backdrop-filter: blur(6px);
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 100%, 0 100%);
    max-width: min(72%, 280px);
  }
  .frame .mark img { width: 28px; height: auto; flex: none; display: block; filter: brightness(1.15); }
  .frame .mark b { display: block; font: 600 12.5px/1.2 'Inter Tight', sans-serif; letter-spacing: -0.01em; }
  .frame .mark span { display: block; font-size: 11px; color: rgba(255,255,255,.72); margin-top: 2px; }
  .shot { position: relative; overflow: hidden; width: 100%; }
  .shot + .shot { border-top: 1px solid var(--cntx-border-default); }
  .shot img { position: absolute; max-width: none; display: block; }
  .caption { margin-top: 12px; font-size: 13px; color: var(--cntx-text-muted); }
  .caption b { color: var(--cntx-text-primary); font-weight: 600; }

  /* Sections */
  section.s { padding: 112px 0; border-top: 1px solid var(--cntx-border-default); }
  .s-grid { display: block; }
  .s h2 { font-size: 52px; text-wrap: pretty; }
  .s .intro { font-size: 18.5px; color: var(--cntx-text-muted); margin: 22px 0 0; text-wrap: pretty; }
  .s .closing { font: 600 22px/1.3 'Inter Tight', sans-serif; letter-spacing: -0.02em; margin: 56px 0 0; text-wrap: pretty; }
  .s .closing.tight { margin-top: 28px; }
  .note { font-size: 12.5px; color: var(--cntx-text-muted); margin-top: 14px; }

  /* Tensions / attributes */
  .tensions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 64px; }
  .tensions.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 56px; }
  .tensions > div { border-top: 2px solid var(--cntx-text-primary); padding-top: 18px; }
  .tensions span { font: 600 13px 'Inter Tight', sans-serif; color: var(--cntx-text-brand); }
  .tensions b { display: block; font: 600 21px/1.2 'Inter Tight', sans-serif; letter-spacing: -0.02em; margin: 6px 0 8px; }
  .tensions p { margin: 0; color: var(--cntx-text-muted); font-size: 15px; }

  /* Brain */
  .layers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 56px; }
  .layer { display: flex; flex-direction: column; }
  .layer h3 { font: 600 24px/1.1 'Inter Tight', sans-serif; letter-spacing: -0.03em; margin: 8px 0 8px; }
  .layer .n { font: 600 13px 'Inter Tight', sans-serif; color: var(--cntx-text-brand); }
  .layer p { color: var(--cntx-text-muted); font-size: 15px; margin: 0 0 14px; }
  .layer .chips { margin-bottom: 18px; }
  .layer .chips { min-height: 52px; align-content: flex-start; }
  .layer .note { margin-top: 10px; }
  .brain-obj { position: relative; margin-top: 56px; border: 1px solid color-mix(in srgb, var(--cntx-text-brand) 35%, transparent); background: color-mix(in srgb, var(--cntx-bg-tint) 55%, transparent); border-radius: 18px; padding: 36px 32px 32px; }
  .brain-obj .layers { margin-top: 0; }
  .brain-tag { position: absolute; left: 28px; top: -12px; background: var(--cntx-action-primary); color: #fff; font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 3px 12px; }
  .brain-msg { margin-top: 32px; padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--cntx-text-brand) 25%, transparent); }
  .cycle {
    padding: 96px 0 100px;
    border: 0;
    background: var(--cntx-bg-canvas);
  }
  .cycle > .wrap { max-width: 1360px; }
  @media (min-width: 761px) and (max-width: 1180px) {
    .cycle > .wrap { padding-left: 24px; padding-right: 24px; }
    .cycle-cards { gap: 0 10px; }
    .cycle-phases { gap: 10px; }
    .cycle-cards a { padding: 14px 8px 12px; }
    .cycle-cards .ico-wrap { width: 48px; height: 48px; }
    .cycle-cards .ico { width: 20px; height: 20px; }
    .cycle-cards b.verb { font-size: 14.5px; }
    .cycle-cards strong { font-size: 12px; }
    .cycle-cards .keys { font-size: 10.5px; }
    .cycle-phases b { font-size: 11px; }
    .cycle-phases span { font-size: 11.5px; }
  }
  .cycle-head {
    max-width: none;
    margin: 0 0 48px;
    text-align: center;
  }
  .cycle-lbl {
    margin: 0;
    font: 600 40px/1.08 'Inter Tight', Inter, sans-serif;
    letter-spacing: -0.035em;
    color: var(--cntx-text-primary);
    text-wrap: pretty;
  }
  .cycle-lbl .accent { color: var(--cntx-text-brand); }
  .cycle-intro {
    margin: 14px auto 0;
    font-size: 17px;
    line-height: 1.5;
    color: var(--cntx-text-muted);
    text-wrap: pretty;
    max-width: none;
  }
  .cycle-schema {
    position: relative;
    isolation: isolate;
    background: transparent;
    border: 0;
    padding: 0;
  }
  .cycle-phases {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 0 0 20px;
    padding: 0 2px;
  }
  .cycle-phases .phase {
    text-align: center;
    position: relative;
    padding: 0 10px 10px;
  }
  .cycle-phases .phase::before { content: none; }
  .cycle-phases .phase::after {
    content: '';
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 0;
    height: 8px;
    border-top: 1px solid color-mix(in srgb, var(--cntx-text-brand) 28%, var(--cntx-border-default));
    border-left: 1px solid color-mix(in srgb, var(--cntx-text-brand) 28%, var(--cntx-border-default));
    border-right: 1px solid color-mix(in srgb, var(--cntx-text-brand) 28%, var(--cntx-border-default));
    pointer-events: none;
  }
  .cycle-phases b {
    display: block;
    font: 600 12px/1.2 'Inter Tight', Inter, sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cntx-text-brand);
    margin: 0 0 4px;
  }
  .cycle-phases span {
    display: block;
    font: 500 12.5px/1.35 Inter, sans-serif;
    color: var(--cntx-text-muted);
  }
  .cycle-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0 18px;
    counter-reset: cy;
    position: relative;
    z-index: 2;
    align-items: stretch;
  }
  .cycle-cards li {
    position: relative;
    min-width: 0;
    counter-increment: cy;
    z-index: 2;
  }
  .cycle-cards li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 48%;
    right: -12px;
    z-index: 3;
    width: 7px;
    height: 7px;
    border-top: 1.75px solid var(--cntx-text-brand);
    border-right: 1.75px solid var(--cntx-text-brand);
    transform: rotate(45deg);
    opacity: .55;
    pointer-events: none;
  }
  .cycle-cards a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    padding: 18px 12px 16px;
    text-decoration: none;
    color: inherit;
    background: var(--cntx-bg-surface);
    border: 1px solid color-mix(in srgb, var(--cntx-action-primary) 8%, var(--cntx-border-default));
    border-radius: 16px;
    box-shadow:
      0 1px 2px color-mix(in srgb, var(--cntx-action-primary) 6%, transparent),
      0 10px 28px -18px color-mix(in srgb, var(--cntx-action-primary) 28%, transparent);
    position: relative;
    z-index: 1;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  }
  .cycle-cards a:hover {
    border-color: color-mix(in srgb, var(--cntx-action-primary) 22%, var(--cntx-border-default));
    box-shadow:
      0 1px 2px color-mix(in srgb, var(--cntx-action-primary) 8%, transparent),
      0 14px 32px -16px color-mix(in srgb, var(--cntx-action-primary) 36%, transparent);
    transform: translateY(-1px);
  }
  .cycle-cards a:hover b.verb { color: var(--cntx-text-brand); }
  .cycle-cards .n {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--cntx-bg-tint);
    font: 600 11px/1 'Inter Tight', sans-serif;
    letter-spacing: .02em;
    color: var(--cntx-text-brand);
    font-variant-numeric: tabular-nums;
  }
  .cycle-cards .n::before { content: counter(cy, decimal-leading-zero); }
  .cycle-cards .ico-wrap {
    width: 56px;
    height: 56px;
    margin: 6px auto 14px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--cntx-bg-tint);
    color: var(--cntx-text-brand);
    flex: none;
  }
  .cycle-cards .ico { width: 24px; height: 24px; stroke-width: 1.7; }
  .cycle-cards b.verb {
    display: block;
    font: 600 16px/1.15 'Inter Tight', sans-serif;
    letter-spacing: -0.02em;
    color: var(--cntx-text-primary);
    margin: 0 0 8px;
  }
  .cycle-cards strong {
    display: block;
    font: 500 13px/1.4 Inter, sans-serif;
    color: var(--cntx-text-primary);
    margin: 0 0 14px;
    text-wrap: pretty;
    flex: 1;
  }
  .cycle-cards .keys {
    display: block;
    margin-top: auto;
    width: 100%;
    font-style: normal;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--cntx-text-muted);
    letter-spacing: -0.01em;
  }
  .phase-m { display: none; }
  .cycle-loop {
    position: relative;
    z-index: 1; /* below .cycle-cards (2) */
    display: grid;
    place-items: center;
    min-height: 0;
    margin-top: 0;
    padding: 0 0 4px;
    color: color-mix(in srgb, var(--cntx-text-brand) 45%, var(--cntx-border-strong));
  }
  /* HTML wrapper required: Chromium paints SVG roots above HTML siblings regardless of z-index */
  .cycle-loop-track {
    position: absolute;
    left: 0;
    right: 0;
    top: -18px;
    height: 153px;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
  }
  .cycle-loop-line {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .cycle-loop-line path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-dasharray: 4 5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .cycle-loop-tip {
    display: none; /* tips CSS = triangles orphelins ; le trait dashed suffit */
  }
  .cycle-brain {
    position: relative;
    z-index: 1; /* above .cycle-loop-track */
    display: inline-flex;
    align-items: center;
    gap: 12px;
    max-width: min(100%, 640px);
    margin-top: 56px;
    padding: 12px 20px 12px 12px;
    background: var(--cntx-bg-surface);
    border: 1px solid color-mix(in srgb, var(--cntx-action-primary) 18%, var(--cntx-border-default));
    border-radius: 999px;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--cntx-text-primary);
  }
  .cycle-brain .brain-ico {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--cntx-bg-surface);
    border: 1px solid color-mix(in srgb, var(--cntx-action-primary) 16%, var(--cntx-border-default));
    color: var(--cntx-text-brand);
    flex: none;
  }
  .cycle-brain .ico {
    width: 18px;
    height: 18px;
  }
  .attrs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; font-size: 14px; color: var(--cntx-text-muted); }
  .attrs > div { border-top: 2px solid var(--cntx-text-primary); padding-top: 12px; }
  .attrs b { display: block; font: 600 17px 'Inter Tight', sans-serif; letter-spacing: -0.02em; color: var(--cntx-text-primary); margin-bottom: 4px; }
  .brain-msg p { margin: 0; font: 600 26px/1.28 'Inter Tight', sans-serif; letter-spacing: -0.02em; }
  .brain-msg p + p { margin-top: 12px; font: 500 17px/1.5 Inter, sans-serif; letter-spacing: 0; color: var(--cntx-text-muted); }

  /* Planning */
  .plan-vis { margin-top: 56px; display: grid; gap: 28px; }
  .plan-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .plan-row .caption b { display: block; font: 600 16px 'Inter Tight', sans-serif; letter-spacing: -0.01em; margin-bottom: 2px; }
  .camp-line { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; margin-top: 8px; padding: 16px 20px; border: 1px dashed var(--cntx-border-strong); border-radius: 12px; font-size: 14.5px; color: var(--cntx-text-muted); }
  .camp-line b { color: var(--cntx-text-primary); font-weight: 600; }

  /* Dark proof */
  .why-sec { background: var(--cntx-bg-inverse); color: var(--cntx-text-on-inverse); border-top: 0 !important; }
  .why-sec .intro { color: color-mix(in srgb, var(--cntx-text-on-inverse) 74%, transparent); }
  .why-sec .frame { border-color: rgba(255,255,255,.14); box-shadow: 0 30px 70px -30px rgba(0,0,0,.6); }
  .why-stage { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; margin-top: 56px; }
  .whycap { font-size: 13px; font-weight: 600; color: var(--cntx-accent-cyan); margin-bottom: 10px; }
  .fields h3 { margin: 0 0 12px; font: 600 15px 'Inter Tight', sans-serif; }
  .fields h3 + ul { margin-bottom: 32px; }
  .fields ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .fields li { padding: 8px 0; border-top: 1px solid rgba(255,255,255,.12); font-size: 14px; }
  .fields li.soon-f { color: var(--cntx-text-muted); }
  .fields li.soon-f::after { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; border: 1.5px dashed var(--cntx-text-muted); margin-left: 7px; vertical-align: 1px; }
  .fields .takeaway { margin-top: 8px; font: 600 22px/1.3 'Inter Tight', sans-serif; letter-spacing: -0.02em; }
  .why-note { margin-top: 36px; font-size: 13px; color: color-mix(in srgb, var(--cntx-text-on-inverse) 74%, transparent); border-top: 1px solid rgba(255,255,255,.12); padding-top: 14px; }
  .why-note b { color: var(--cntx-text-on-inverse); font-weight: 600; }

  /* Brief / production */
  .keeps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
  .keeps span { font-size: 13.5px; font-weight: 500; padding: 5px 11px; border-radius: 999px; background: var(--cntx-bg-surface); border: 1px solid var(--cntx-border-default); }
  .keeps span.soon-k { color: var(--cntx-text-muted); border-style: dashed; }
  .wide-frame { margin-top: 48px; }
  .split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: center; }
  .split h2 { font-size: 44px; }
  .steps { list-style: none; margin: 28px 0 0; padding: 0; }
  .steps li { display: flex; gap: 14px; padding: 11px 0; border-top: 1px solid var(--cntx-border-default); font-size: 15px; }
  .steps li span { font: 600 13px 'Inter Tight', sans-serif; color: var(--cntx-text-brand); width: 20px; padding-top: 2px; }

  /* Performance */
  .lstrip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 56px; position: relative; }
  .lstrip div { background: var(--cntx-bg-surface); border: 1px solid var(--cntx-border-default); border-radius: 12px; padding: 16px 18px; position: relative; }
  .lstrip div:not(:last-child)::after { content: '→'; position: absolute; right: -21px; top: 50%; transform: translateY(-50%); color: var(--cntx-text-muted); }
  .lstrip b { display: block; font: 600 18px 'Inter Tight', sans-serif; letter-spacing: -0.02em; }
  .lstrip p { margin: 4px 0 0; font-size: 13.5px; color: var(--cntx-text-muted); }
  .perf-vis { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; margin-top: 36px; align-items: start; }

  /* Movements */
  .stages { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 56px; background: var(--cntx-bg-surface); border: 1px solid var(--cntx-border-default); border-radius: 12px; }
  .stage { padding: 20px 18px 22px; position: relative; }
  .stage + .stage { border-left: 1px solid var(--cntx-border-default); }
  .stage .n { font: 600 13px 'Inter Tight', sans-serif; color: var(--cntx-text-muted); font-variant-numeric: tabular-nums; }
  .stage b { display: block; font: 600 21px/1.1 'Inter Tight', sans-serif; letter-spacing: -0.03em; margin: 8px 0 8px; }
  .stage p { font-size: 14px; color: var(--cntx-text-muted); margin: 0; }
  .return { position: relative; height: 30px; margin: 0 calc(100% / 12); border: 1px solid var(--cntx-border-strong); border-top: 0; border-radius: 0 0 12px 12px; }
  .return span { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); background: var(--cntx-bg-canvas); padding: 0 10px; font-size: 13px; color: var(--cntx-text-muted); white-space: nowrap; }

  /* Outcomes */
  .outcomes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 56px; border: 1px solid var(--cntx-border-default); border-radius: 12px; background: var(--cntx-bg-surface); overflow: hidden; }
  .outcomes div { padding: 26px 24px 30px; border-left: 1px solid var(--cntx-border-default); }
  .outcomes div:first-child { border-left: 0; }
  .outcomes b { display: block; font: 600 23px/1.15 'Inter Tight', sans-serif; letter-spacing: -0.025em; margin-bottom: 10px; }
  .outcomes p { margin: 0; color: var(--cntx-text-muted); font-size: 15px; }

  /* Audience */
  .aud { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px; }
  .aud > div { background: var(--cntx-bg-surface); border: 1px solid var(--cntx-border-default); border-radius: 12px; padding: 26px 28px 28px; display: flex; flex-direction: column; }
  .aud h3 { margin: 0 0 8px; font: 600 24px 'Inter Tight', sans-serif; letter-spacing: -0.02em; }
  .aud p { color: var(--cntx-text-muted); font-size: 15.5px; margin: 0 0 22px; }
  .acc { padding: 16px 16px 18px; background: var(--cntx-bg-canvas); font-size: 12px; }
  .acc-head b { display: block; font: 600 16px 'Inter Tight', sans-serif; letter-spacing: -0.01em; }
  .acc-head small { color: var(--cntx-text-muted); }
  .acc-tool { display: flex; gap: 8px; margin: 12px 0; }
  .acc-search { flex: 1; border: 1px solid var(--cntx-border-default); background: var(--cntx-bg-surface); border-radius: 7px; padding: 6px 10px; color: var(--cntx-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .acc-btn { background: var(--cntx-action-primary); color: #fff; border-radius: 7px; padding: 6px 10px; font-weight: 500; white-space: nowrap; }
  .acc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .acc-card { background: var(--cntx-bg-surface); border: 1px solid var(--cntx-border-default); border-radius: 9px; padding: 10px 10px 8px; min-width: 0; }
  .acc-card b { display: block; font-size: 13px; font-weight: 600; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .acc-card small { display: block; color: var(--cntx-text-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .acc-badge { display: inline-block; font-size: 10.5px; font-weight: 600; border-radius: 4px; padding: 1px 6px; }
  .acc-badge.own { background: var(--cntx-bg-tint); color: var(--cntx-text-brand); }
  .acc-badge.del { background: color-mix(in srgb, #12B76A 14%, transparent); color: #067647; }
  [data-theme="dark"] .acc-badge.del { color: #75E0A7; }
  .acc-m { display: grid; gap: 2px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--cntx-border-default); color: var(--cntx-text-muted); font-size: 11px; }
  .acc-m em { font-style: normal; font-weight: 600; color: var(--cntx-text-primary); margin-right: 3px; }
  .aud .note { margin: 10px 0 0; }

  /* Final CTA */
  .start { padding: 72px 0 104px; }
  .start .card { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; background: var(--cntx-bg-inverse); color: var(--cntx-text-on-inverse); border-radius: 16px; padding: 56px; }
  .start h2 { font-size: 42px; }
  .start p {
    color: color-mix(in srgb, var(--cntx-text-on-inverse) 74%, transparent);
    font-size: 17px; margin: 18px 0 26px; max-width: 36em;
  }
  .start .btn { border-color: rgba(255,255,255,.2); background: transparent; color: var(--cntx-text-on-inverse); }
  .start .btn-p { background: #fff; color: #024850; border-color: #fff; }
  .mini-col { position: relative; }
  .mini-loop {
    list-style: none; margin: 0; padding: 0;
    border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
    background: rgba(255,255,255,.04);
    container-type: inline-size; container-name: mini-loop;
  }
  /* Default: number | title / sub stacked — never overlaps on mid widths */
  .mini-loop li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 2px 10px;
    align-items: start;
    padding: 11px 18px;
    border-top: 1px solid rgba(255,255,255,.1);
    font-size: 14.5px;
  }
  .mini-loop li:first-child { border-top: 0; }
  .mini-loop li > span { grid-row: 1 / span 2; padding-top: 3px; }
  .mini-loop li b {
    color: var(--cntx-text-on-inverse);
    min-width: 0;
    overflow-wrap: break-word;
  }
  .mini-loop li span,
  .mini-loop li em {
    font-style: normal;
    color: color-mix(in srgb, var(--cntx-text-on-inverse) 68%, transparent);
  }
  .mini-loop li span { font: 600 12px 'Inter Tight', sans-serif; }
  .mini-loop li em {
    grid-column: 2;
    font-size: 13px;
    min-width: 0;
    line-height: 1.35;
    overflow-wrap: break-word;
  }
  /* Roomy list only: title + sub on one row, both flexible (no auto crush) */
  @container mini-loop (min-width: 360px) {
    .mini-loop li {
      grid-template-columns: 28px minmax(0, 1.15fr) minmax(0, 0.85fr);
      gap: 6px 12px;
      align-items: baseline;
    }
    .mini-loop li > span { grid-row: auto; padding-top: 0; }
    .mini-loop li > em {
      grid-column: auto;
      text-align: right;
      text-wrap: balance;
    }
  }

  footer { border-top: 1px solid var(--cntx-border-default); padding: 56px 0 40px; font-size: 14px; }
  footer .top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 32px; }
  footer h5 { margin: 0 0 12px; font-size: 13px; font-weight: 600; }
  footer ul { list-style: none; margin: 0; padding: 0; color: var(--cntx-text-muted); display: grid; gap: 8px; }
  footer .motto { font: 600 18px 'Inter Tight', sans-serif; letter-spacing: -0.02em; margin: 14px 0 4px; max-width: 20em; }
  footer .sub { color: var(--cntx-text-muted); margin: 0; }
  footer .legal { display: flex; justify-content: space-between; gap: 20px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--cntx-border-default); color: var(--cntx-text-muted); font-size: 13px; }

  /* ===== look=bands — ice teal (précédente, conservée) ===== */
  [data-look="bands"] section.s,
  [data-look="bands-warm"] section.s { border-top-color: transparent; }
  [data-look="bands"] .band-plain,
  [data-look="bands-warm"] .band-plain {
    background: var(--cntx-bg-surface);
    border-top: 0 !important;
  }
  [data-look="bands"] .band-soft {
    background: linear-gradient(180deg, var(--cntx-bg-surface) 0%, color-mix(in srgb, var(--cntx-bg-tint) 55%, var(--cntx-bg-surface)) 100%);
    border-top: 0 !important;
  }
  [data-look="bands"] .band-tint {
    background: var(--cntx-bg-tint);
    border-top: 0 !important;
  }
  [data-theme="dark"][data-look="bands"] .band-tint {
    background: rgba(1, 219, 209, .06);
  }
  [data-look="bands"] .band-wash {
    border-top: 0 !important;
    background:
      radial-gradient(90% 70% at 85% 10%, color-mix(in srgb, var(--cntx-accent-cyan) 14%, transparent), transparent 55%),
      radial-gradient(70% 80% at 8% 90%, color-mix(in srgb, var(--cntx-action-primary) 10%, transparent), transparent 60%),
      var(--cntx-bg-canvas);
  }
  [data-theme="dark"][data-look="bands"] .band-wash {
    background:
      radial-gradient(90% 70% at 85% 10%, rgba(1, 219, 209, .10), transparent 55%),
      radial-gradient(70% 80% at 8% 90%, rgba(58, 168, 178, .12), transparent 60%),
      var(--cntx-bg-canvas);
  }
  [data-look="bands"] .band-hero-glow {
    border-top: 0 !important;
    background:
      radial-gradient(65% 55% at 70% 35%, color-mix(in srgb, var(--cntx-accent-cyan) 12%, transparent), transparent 65%),
      radial-gradient(50% 60% at 15% 80%, color-mix(in srgb, var(--cntx-action-primary) 08%, transparent), transparent 55%),
      var(--cntx-bg-canvas);
  }
  [data-theme="dark"][data-look="bands"] .band-hero-glow {
    background:
      radial-gradient(65% 55% at 70% 35%, rgba(1, 219, 209, .10), transparent 65%),
      radial-gradient(50% 60% at 15% 80%, rgba(58, 168, 178, .10), transparent 55%),
      var(--cntx-bg-canvas);
  }
  [data-look="bands"] .band-hero-glow .hero-vis,
  [data-look="bands-warm"] .band-hero-glow .hero-vis { position: relative; }
  [data-look="bands"] .band-hero-glow .hero-vis > *,
  [data-look="bands-warm"] .band-hero-glow .hero-vis > * { position: relative; z-index: 1; }

  [data-look="bands"] .band-dark,
  [data-look="bands"] .why-sec {
    background: var(--cntx-bg-inverse);
    color: var(--cntx-text-on-inverse);
    border-top: 0 !important;
    background-image:
      radial-gradient(100% 80% at 0% 0%, rgba(1, 219, 209, .14), transparent 55%),
      radial-gradient(80% 60% at 100% 100%, rgba(58, 168, 178, .10), transparent 50%);
  }
  [data-look="bands"] .cycle {
    border: 0;
    background:
      radial-gradient(70% 55% at 50% 0%, color-mix(in srgb, var(--cntx-accent-cyan) 10%, transparent), transparent 60%),
      var(--cntx-bg-canvas);
  }
  [data-theme="dark"][data-look="bands"] .cycle {
    background:
      radial-gradient(70% 55% at 50% 0%, rgba(1, 219, 209, .08), transparent 60%),
      var(--cntx-bg-canvas);
  }
  [data-look="bands"] #brain.band-tint {
    background: var(--cntx-bg-tint);
  }
  [data-look="bands"] .band-tint .brain-obj {
    background: var(--cntx-bg-surface);
    border-color: color-mix(in srgb, var(--cntx-text-brand) 28%, transparent);
  }
  [data-look="bands"] section.band-dark.outcomes-sec,
  [data-look="bands-warm"] section.band-dark.outcomes-sec {
    padding: 96px 0;
  }
  [data-look="bands"] .band-dark .accent,
  [data-look="bands"] .why-sec .accent { color: var(--cntx-accent-cyan); }
  [data-look="bands"] .band-dark .intro,
  [data-look="bands"] .why-sec .intro { color: color-mix(in srgb, var(--cntx-text-on-inverse) 74%, transparent); }
  [data-look="bands"] .band-dark .outcomes {
    background: transparent;
    border-color: rgba(255, 255, 255, .14);
  }
  [data-look="bands"] .band-dark .outcomes div { border-left-color: rgba(255, 255, 255, .14); }
  [data-look="bands"] .band-dark .outcomes b { color: var(--cntx-text-on-inverse); }
  [data-look="bands"] .band-dark .outcomes p { color: color-mix(in srgb, var(--cntx-text-on-inverse) 74%, transparent); }
  [data-theme="dark"][data-look="bands"] .band-dark .outcomes div { border-top-color: rgba(255, 255, 255, .14); }

  [data-look="bands"] .start .card {
    background-image:
      radial-gradient(100% 80% at 0% 0%, rgba(1, 219, 209, .16), transparent 55%),
      radial-gradient(70% 50% at 100% 100%, rgba(58, 168, 178, .12), transparent 50%);
  }
  [data-look="bands"] .return span,
  [data-look="bands-warm"] .return span { background: var(--cntx-bg-surface); }

  /* Brand chips on both band looks */
  .frame .mark { display: none; }
  [data-look="bands"] .frame .mark,
  [data-look="bands-warm"] .frame .mark { display: flex; }
  [data-look="bands"] .why-sec .frame .mark {
    background: color-mix(in srgb, #012f35 88%, transparent);
  }

  /* ===== look=bands-warm — papier + pétrole + CTA warm (nouvelle) ===== */
  /* bands-warm local palette removed — use DS tokens */
  [data-theme="dark"]/* bands-warm local palette removed — use DS tokens */

  /* coral CTA exception removed — use --cntx-action-primary */
  [data-look="bands-warm"] .btn-p:hover { filter: brightness(1.04); }
  [data-look="bands-warm"] .eyebrow { color: var(--cntx-accent-warm); }

  [data-look="bands-warm"] .band-soft {
    background: linear-gradient(180deg, var(--cntx-bg-surface) 0%, color-mix(in srgb, var(--cntx-bg-tint) 70%, var(--cntx-bg-surface)) 100%);
    border-top: 0 !important;
  }
  [data-look="bands-warm"] .band-tint {
    background: var(--cntx-bg-tint);
    border-top: 0 !important;
  }
  [data-theme="dark"][data-look="bands-warm"] .band-tint {
    background: rgba(224, 122, 74, .06);
  }
  [data-look="bands-warm"] .band-wash {
    border-top: 0 !important;
    background:
      radial-gradient(80% 60% at 90% 0%, color-mix(in srgb, var(--cntx-accent-warm) 10%, transparent), transparent 55%),
      radial-gradient(70% 70% at 5% 95%, color-mix(in srgb, var(--cntx-action-primary) 08%, transparent), transparent 55%),
      var(--cntx-bg-canvas);
  }
  [data-theme="dark"][data-look="bands-warm"] .band-wash {
    background:
      radial-gradient(80% 60% at 90% 0%, rgba(224, 122, 74, .10), transparent 55%),
      radial-gradient(70% 70% at 5% 95%, rgba(2, 89, 100, .18), transparent 55%),
      var(--cntx-bg-canvas);
  }
  [data-look="bands-warm"] .band-hero-glow {
    border-top: 0 !important;
    background:
      radial-gradient(55% 50% at 78% 30%, color-mix(in srgb, var(--cntx-accent-warm) 09%, transparent), transparent 60%),
      radial-gradient(45% 55% at 12% 85%, color-mix(in srgb, var(--cntx-action-primary) 07%, transparent), transparent 55%),
      var(--cntx-bg-canvas);
  }
  [data-theme="dark"][data-look="bands-warm"] .band-hero-glow {
    background:
      radial-gradient(55% 50% at 78% 30%, rgba(224, 122, 74, .10), transparent 60%),
      radial-gradient(45% 55% at 12% 85%, rgba(2, 89, 100, .16), transparent 55%),
      var(--cntx-bg-canvas);
  }

  [data-look="bands-warm"] .band-dark,
  [data-look="bands-warm"] .why-sec {
    background: var(--cntx-bg-inverse);
    color: var(--cntx-text-on-inverse);
    border-top: 0 !important;
    background-image:
      radial-gradient(90% 70% at 0% 0%, rgba(1, 219, 209, .10), transparent 50%),
      radial-gradient(70% 55% at 100% 100%, rgba(224, 122, 74, .12), transparent 48%);
  }
  [data-look="bands-warm"] .cycle {
    border: 0;
    background: var(--cntx-bg-canvas);
  }
  [data-theme="dark"][data-look="bands-warm"] .cycle {
    background: var(--cntx-bg-canvas);
  }
  [data-look="bands-warm"] #brain.band-tint {
    background: var(--cntx-bg-tint);
  }
  [data-look="bands-warm"] .band-tint .brain-obj {
    background: var(--cntx-bg-surface);
    border-color: color-mix(in srgb, var(--cntx-text-brand) 22%, transparent);
  }
  [data-look="bands-warm"] .band-dark .accent,
  [data-look="bands-warm"] .why-sec .accent { color: var(--cntx-accent-cyan); }
  [data-look="bands-warm"] .band-dark .intro,
  [data-look="bands-warm"] .why-sec .intro { color: color-mix(in srgb, var(--cntx-text-on-inverse) 74%, transparent); }
  [data-look="bands-warm"] .band-dark .outcomes {
    background: transparent;
    border-color: rgba(255, 255, 255, .14);
  }
  [data-look="bands-warm"] .band-dark .outcomes div { border-left-color: rgba(255, 255, 255, .14); }
  [data-look="bands-warm"] .band-dark .outcomes b { color: var(--cntx-text-on-inverse); }
  [data-look="bands-warm"] .band-dark .outcomes p { color: color-mix(in srgb, var(--cntx-text-on-inverse) 74%, transparent); }
  [data-theme="dark"][data-look="bands-warm"] .band-dark .outcomes div { border-top-color: rgba(255, 255, 255, .14); }

  [data-look="bands-warm"] .whycap { color: var(--cntx-accent-cyan); }
  [data-look="bands-warm"] .start .card {
    background: var(--cntx-bg-inverse);
    background-image:
      radial-gradient(90% 70% at 0% 0%, rgba(1, 219, 209, .12), transparent 50%),
      radial-gradient(70% 50% at 100% 100%, rgba(224, 122, 74, .14), transparent 48%);
  }
  
  [data-look="bands-warm"] .why-sec .frame .mark {
    background: color-mix(in srgb, #012f35 88%, transparent);
  }

  /* ===== type=dynamic — motion (bands or alone) ===== */
  html[data-type="dynamic"] {
    scroll-behavior: smooth;
  }
  @media (prefers-reduced-motion: no-preference) {
    [data-type="dynamic"] .reveal {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity .7s ease, transform .7s ease;
    }
    [data-type="dynamic"] .reveal.is-in {
      opacity: 1;
      transform: none;
    }
    [data-type="dynamic"] .reveal-frame {
      opacity: 0;
      transform: translateY(14px) scale(.985);
      transition: opacity .65s ease, transform .65s ease, box-shadow .25s ease, border-color .25s ease;
    }
    [data-type="dynamic"] .reveal-frame.is-in {
      opacity: 1;
      transform: none;
    }
    [data-type="dynamic"] .lstrip > div {
      opacity: .35;
      transform: translateY(8px);
      transition: opacity .45s ease, transform .45s ease, border-color .3s ease, background .3s ease;
    }
    [data-type="dynamic"] .lstrip.is-lit > div {
      opacity: 1;
      transform: none;
    }
    [data-type="dynamic"] .lstrip.is-lit > div:nth-child(1) { transition-delay: 0ms; }
    [data-type="dynamic"] .lstrip.is-lit > div:nth-child(2) { transition-delay: 120ms; }
    [data-type="dynamic"] .lstrip.is-lit > div:nth-child(3) { transition-delay: 240ms; }
    [data-type="dynamic"] .lstrip.is-lit > div:nth-child(4) { transition-delay: 360ms; }
    @media (prefers-reduced-motion: reduce) {
      [data-type="dynamic"] .reveal,
      [data-type="dynamic"] .reveal-frame,
      [data-type="dynamic"] .lstrip > div {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
    }
    [data-type="dynamic"] .brain-obj {
      transition: border-color .5s ease, box-shadow .5s ease;
    }
    [data-type="dynamic"] .brain-obj.is-in {
      border-color: color-mix(in srgb, var(--cntx-text-brand) 55%, transparent);
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--cntx-text-brand) 12%, transparent);
    }
  }
  [data-type="dynamic"] .frame {
    transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
  }
  [data-type="dynamic"] .frame:not(.flat):hover {
    border-color: color-mix(in srgb, var(--cntx-text-brand) 45%, var(--cntx-border-strong));
    box-shadow: 0 28px 64px -28px rgba(11, 58, 63, .36), 0 4px 10px rgba(17, 23, 24, .06);
    transform: translateY(-2px);
  }
  [data-theme="dark"][data-type="dynamic"] .frame:not(.flat):hover {
    box-shadow: 0 28px 64px -28px rgba(0, 0, 0, .75);
  }
  [data-type="dynamic"] .frame.flat:hover {
    border-color: color-mix(in srgb, var(--cntx-text-brand) 40%, var(--cntx-border-default));
  }
  [data-type="dynamic"] .outcomes > div,
  [data-type="dynamic"] .aud > div {
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
  }
  [data-type="dynamic"] .outcomes > div:hover,
  [data-type="dynamic"] .aud > div:hover {
    border-color: color-mix(in srgb, var(--cntx-text-brand) 35%, var(--cntx-border-default));
    transform: translateY(-1px);
  }
  [data-type="dynamic"] .band-dark .outcomes > div:hover {
    border-color: rgba(143, 214, 216, .45);
    background: rgba(255, 255, 255, .04);
  }
  [data-type="dynamic"] .btn {
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
  }
  [data-type="dynamic"] .btn:active { transform: scale(.98); }
  [data-type="dynamic"] .progress {
    position: fixed; top: 64px; left: 0; right: 0; height: 2px; z-index: 11;
    background: transparent; pointer-events: none;
  }
  [data-type="dynamic"] .progress > i {
    display: block; height: 100%; width: 0%;
    background: var(--cntx-text-brand);
    transition: width .1s linear;
  }

  /* Sticky cycle rail */
  .cycle-sticky {
    position: fixed; top: 64px; left: 0; right: 0; z-index: 15;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
    visibility: hidden;
  }
  .cycle-sticky.is-on {
    opacity: 1; transform: none; pointer-events: auto; visibility: visible;
  }
  .cycle-sticky .rail {
    height: 46px; display: flex; align-items: center;
    background: color-mix(in srgb, var(--cntx-bg-canvas) 92%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--cntx-border-default);
  }
  .cycle-sticky .rail .wrap {
    display: flex; align-items: center; gap: 4px; width: 100%;
    position: relative; height: 100%;
  }
  .cycle-sticky a {
    flex: 1; min-width: 0; text-align: center;
    font: 500 13px Inter, sans-serif; color: var(--cntx-text-muted);
    padding: 0 4px; height: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
    position: relative; text-decoration: none; white-space: nowrap;
    transition: color .2s ease, font-weight .2s ease;
  }
  .cycle-sticky a em {
    font-style: normal; font: 600 11px 'Inter Tight', sans-serif;
    color: inherit; opacity: .7; font-variant-numeric: tabular-nums;
  }
  .cycle-sticky a.done { color: var(--cntx-text-primary); }
  .cycle-sticky a.active {
    color: var(--cntx-text-brand); font-weight: 600;
  }
  .cycle-sticky a.active em { opacity: 1; color: var(--cntx-text-brand); }
  .cycle-sticky .track {
    position: absolute; left: 40px; right: 40px; bottom: 0; height: 2px;
    background: var(--cntx-border-default); pointer-events: none;
  }
  .cycle-sticky .track > i {
    display: block; height: 100%; width: 0%;
    background: var(--cntx-text-brand);
    transition: width .2s ease;
  }
  .cycle-sticky .mob { display: none; width: 100%; align-items: center; justify-content: space-between; gap: 12px; height: 100%; font-size: 13.5px; }
  .cycle-sticky .mob b { color: var(--cntx-text-brand); font: 600 14px 'Inter Tight', sans-serif; }
  .cycle-sticky .mob span { color: var(--cntx-text-muted); font-variant-numeric: tabular-nums; }
  .cycle-sticky .mob button {
    border: 1px solid var(--cntx-border-default); background: var(--cntx-bg-surface); border-radius: 6px;
    width: 32px; height: 32px; cursor: pointer; color: var(--cntx-text-primary); font-size: 16px; line-height: 1;
  }
  body.has-cycle-sticky { }
  .cycle-sticky.is-on .rail {
    box-shadow: 0 6px 18px -12px rgba(17, 23, 24, .28);
  }
  [data-theme="dark"] .cycle-sticky.is-on .rail {
    box-shadow: 0 6px 18px -12px rgba(0, 0, 0, .55);
  }

  @media (max-width: 760px) {
    .wrap { padding: 0 20px; }
    .nav ul, .nav .pill, .nav .ghost, .nav .right .btn:not(.btn-p) { display: none; }
    .nav .menu { display: inline-block !important; }
    .hero { padding: 40px 0 56px; }
    .hero h1 { font-size: 40px; }
    .hero .row, .hero-vis, .start .card, .aud, .layers, .why-stage, .plan-row, .split, .perf-vis { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .hero .ctas { justify-content: flex-start; }
    .s h2, .split h2 { font-size: 34px; }
    section.s { padding: 64px 0; }
    .tensions, .tensions.four, .outcomes, .lstrip { grid-template-columns: minmax(0, 1fr); }
    .cycle-phases { display: none; }
    .cycle .wrap { padding-left: 28px; padding-right: 28px; }
    .cycle-cards {
      grid-template-columns: minmax(0, 1fr);
      gap: 16px;
      padding: 6px 4px 12px;
      align-items: start;
    }
    .cycle-cards li {
      display: flex;
      flex-direction: column;
      height: auto;
      min-height: 0;
    }
    .cycle-cards li:not(:last-child)::after { display: none; }
    .cycle-cards li:has(.phase-m) { margin-top: 48px; }
    .cycle-cards li:first-child { margin-top: 0; }
    .phase-m {
      display: block;
      margin: 0 2px 18px;
      padding: 0 4px 0 14px;
      border: 0;
      border-left: 2px solid color-mix(in srgb, var(--cntx-text-brand) 55%, var(--cntx-action-primary));
      flex: none;
    }
    .phase-m b {
      display: block;
      font: 600 11px/1.3 'Inter Tight', Inter, sans-serif;
      letter-spacing: .07em;
      text-transform: uppercase;
      color: var(--cntx-text-brand);
      margin: 0 0 5px;
    }
    .phase-m span {
      display: block;
      font: 500 13.5px/1.45 Inter, sans-serif;
      color: var(--cntx-text-muted);
      text-wrap: pretty;
    }
    .cycle-cards a {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      grid-template-areas:
        'ico n'
        'ico verb'
        'ico desc'
        'keys keys';
      align-items: start;
      column-gap: 14px;
      row-gap: 3px;
      height: auto;
      padding: 18px 18px 16px;
      text-align: left;
      border-radius: 16px;
      flex: none;
      transform: none;
    }
    .cycle-cards a:hover { transform: none; }
    .cycle-cards .n {
      position: static;
      grid-area: n;
      width: auto;
      min-width: 0;
      height: auto;
      margin: 1px 0 2px;
      padding: 0;
      border-radius: 0;
      background: transparent;
      font-size: 11px;
      line-height: 1.2;
      letter-spacing: .04em;
      color: var(--cntx-text-brand);
      opacity: .7;
      place-items: start;
    }
    .cycle-cards .ico-wrap {
      grid-area: ico;
      grid-row: 1 / 4;
      width: 48px;
      height: 48px;
      margin: 2px 0 0;
      align-self: start;
    }
    .cycle-cards .ico { width: 21px; height: 21px; }
    .cycle-cards b.verb {
      grid-area: verb;
      margin: 0;
      font-size: 16.5px;
      line-height: 1.25;
      letter-spacing: -0.01em;
    }
    .cycle-cards strong {
      grid-area: desc;
      margin: 4px 0 0;
      font-size: 13.5px;
      line-height: 1.45;
      color: var(--cntx-text-muted);
      flex: none;
    }
    .cycle-cards .keys {
      grid-area: keys;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--cntx-border-default);
      font-size: 12px;
      line-height: 1.5;
    }
    .cycle-schema {
      padding: 12px 0 8px;
      overflow: visible;
    }
    .cycle { padding: 72px 0 64px; }
    .cycle-lbl { font-size: 28px; text-align: left; }
    .cycle-head { margin-bottom: 36px; text-align: left; }
    .cycle-intro { font-size: 15.5px; text-align: left; margin-left: 0; margin-top: 14px; }
    .cycle-loop {
      min-height: 0;
      padding: 0;
      margin-top: 12px;
    }
    .cycle-loop-track,
    .cycle-loop-line,
    .cycle-loop-tip { display: none !important; }
    .cycle-brain {
      width: 100%;
      max-width: 100%;
      margin-top: 48px;
      border-radius: 16px;
      align-items: flex-start;
      padding: 18px 18px;
      gap: 14px;
    }
    .cycle-brain .brain-ico { width: 36px; height: 36px; flex: none; }
    .cycle-brain > span:last-child { font-size: 13.5px; line-height: 1.5; text-wrap: pretty; }
    .attrs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .brain-obj { padding: 28px 16px 20px; }
    .lstrip div:not(:last-child)::after { content: '↓'; right: auto; left: 18px; top: auto; bottom: -24px; transform: none; }
    .outcomes div { border-left: 0; border-top: 1px solid var(--cntx-border-default); }
    .outcomes div:first-child { border-top: 0; }
    [data-look="bands"] .band-dark .outcomes div { border-top-color: rgba(255, 255, 255, .14); }
    [data-look="bands-warm"] .band-dark .outcomes div { border-top-color: rgba(255, 255, 255, .14); }
    .stages { grid-template-columns: minmax(0, 1fr); }
    .stage + .stage { border-left: 0; border-top: 1px solid var(--cntx-border-default); }
    .return { display: none; }
    .brain-msg p { font-size: 21px; }
    .fields ul { grid-template-columns: 1fr; }
    .acc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .acc-card:nth-child(3) { display: none; }
    .start .card { padding: 28px 22px; }
    .start h2 { font-size: 30px; }
    footer .top { grid-template-columns: 1fr 1fr; }
    footer .legal { flex-direction: column; }
    .cycle-sticky { top: 64px; }
    .cycle-sticky .rail { height: 48px; }
    .cycle-sticky .desk { display: none !important; }
    .cycle-sticky .mob { display: flex; }
    .cycle-sticky .track { left: 20px; right: 20px; }
  }

  /* ===== skin brand-warm-new · advanced light + dark ===== */
  html[data-skin="brand-warm-new"] {
    --bg: #F6F3EE;
    --surface: #FFFCFA;
    --line: #E3DDD4;
    --line-strong: #CFC7BB;
    --text: #141716;
    --muted: #5C574F;
    --brand: #0C3538;
    --brand-text: #0C3538;
    --x: #2BB8B0;
    --warm: #E14F32;
    --warm-ink: #fff;
    --tint: #EDE8E0;
    --band: #0C3538;
    --band-text: #F3F6F5;
    --band-muted: #9EB0AE;
    --peach: #E8B9A4;
    --peach-soft: #EBC4B0;
    --mint-soft: #B7CEC8;
    --hair: color-mix(in srgb, var(--cntx-action-primary) 10%, transparent);
    --elev: 0 22px 50px -28px rgba(12, 53, 56, .32), 0 1px 0 rgba(255,255,255,.55) inset;
  }
  html[data-skin="brand-warm-new"][data-theme="dark"] {
    --bg: #071516;
    --surface: #0E2224;
    --line: rgba(232, 236, 234, .10);
    --line-strong: rgba(232, 236, 234, .18);
    --text: #E8EEEC;
    --muted: #9AA9A7;
    --brand: #2EC4BC;
    --brand-text: #7FE0D9;
    --x: #2EC4BC;
    --warm: #F06545;
    --warm-ink: #1A100C;
    --tint: rgba(240, 101, 69, .08);
    --band: #0A2A2D;
    --band-text: #F0F5F4;
    --band-muted: #93A8A6;
    --peach: #C56A52;
    --peach-soft: rgba(240, 101, 69, .22);
    --mint-soft: rgba(46, 196, 188, .16);
    --hair: rgba(255,255,255,.08);
    --elev: 0 28px 60px -24px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
  }
  html[data-skin="brand-warm-new"] .hi { color: var(--cntx-accent-warm); }
  html[data-skin="brand-warm-new"] .eyebrow {
    color: var(--cntx-accent-warm);
    display: inline-flex; align-items: flex-start; gap: 10px; max-width: 100%; line-height: 1.35;
  }
  html[data-skin="brand-warm-new"] .eyebrow::before {
    content: ""; width: 18px; height: 2px; margin-top: 0.55em; background: var(--cntx-accent-warm); border-radius: 1px; flex: none;
  }
  html[data-skin="brand-warm-new"] .accent { color: var(--cntx-text-brand); }
  /* WP sticky chrome is header.topbar (mockup uses header.nav) — solid canvas, no frosted
     glass: legacy home.v14 dark topbar is rgba violet-black + blur, which leaked the
     violet body aurora through the header edge. */
  html[data-skin="brand-warm-new"] header.nav,
  html[data-skin="brand-warm-new"] header.topbar {
    background: var(--cntx-bg-canvas);
    border-bottom-color: var(--hair);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  html[data-skin="brand-warm-new"] .btn {
    border-radius: 10px; font-weight: 600; cursor: pointer;
    transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
  }
  html[data-skin="brand-warm-new"] .btn:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--cntx-action-primary) 35%, var(--cntx-border-default));
    box-shadow: 0 8px 20px -12px rgba(12, 53, 56, .35);
  }
  html[data-skin="brand-warm-new"] .btn:active { transform: translateY(0); box-shadow: none; }
  html[data-skin="brand-warm-new"] .btn-p {
    background: var(--cntx-action-primary); border-color: var(--cntx-action-primary); color: #fff;
  }
  html[data-skin="brand-warm-new"] .btn-p:hover {
    background: color-mix(in srgb, var(--cntx-action-primary) 88%, #fff);
    border-color: color-mix(in srgb, var(--cntx-action-primary) 88%, #fff);
    box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--cntx-action-primary) 55%, transparent);
  }
  html[data-skin="brand-warm-new"][data-theme="dark"] .btn:hover {
    box-shadow: 0 8px 22px -14px rgba(0, 0, 0, .65);
    border-color: color-mix(in srgb, var(--cntx-accent-cyan) 40%, var(--cntx-border-default));
  }
  html[data-skin="brand-warm-new"][data-theme="dark"] .btn-p {
    background: var(--cntx-accent-cyan); border-color: var(--cntx-accent-cyan); color: #06201F;
  }
  html[data-skin="brand-warm-new"][data-theme="dark"] .btn-p:hover {
    background: color-mix(in srgb, var(--cntx-accent-cyan) 82%, #fff);
    border-color: color-mix(in srgb, var(--cntx-accent-cyan) 82%, #fff);
    box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--cntx-accent-cyan) 50%, transparent);
  }
  html[data-skin="brand-warm-new"] .start .btn-p {
    background: var(--cntx-accent-warm); border-color: var(--cntx-accent-warm); color: #fff;
  }
  html[data-skin="brand-warm-new"] .start .btn-p:hover {
    background: color-mix(in srgb, var(--cntx-accent-warm) 86%, #fff);
    border-color: color-mix(in srgb, var(--cntx-accent-warm) 86%, #fff);
    box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--cntx-accent-warm) 55%, transparent);
  }
  html[data-skin="brand-warm-new"][data-theme="dark"] .start .btn-p {
    background: var(--cntx-accent-cyan); border-color: var(--cntx-accent-cyan); color: #06201F;
  }
  html[data-skin="brand-warm-new"][data-theme="dark"] .start .btn-p:hover {
    background: color-mix(in srgb, var(--cntx-accent-cyan) 82%, #fff);
    border-color: color-mix(in srgb, var(--cntx-accent-cyan) 82%, #fff);
    box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--cntx-accent-cyan) 50%, transparent);
  }
  html[data-skin="brand-warm-new"] .start .btn:not(.btn-p) {
    border-color: color-mix(in srgb, #fff 32%, transparent); color: #fff; background: transparent;
  }
  html[data-skin="brand-warm-new"] .start .btn:not(.btn-p):hover {
    background: color-mix(in srgb, #fff 10%, transparent);
    border-color: color-mix(in srgb, #fff 55%, transparent);
    box-shadow: none;
  }
  html[data-skin="brand-warm-new"] .pill.theme-toggle,
  html[data-skin="brand-warm-new"] .pill.deco-toggle { cursor: pointer; user-select: none; }
  html[data-skin="brand-warm-new"][data-look="bands"] .band-soft {
    background: var(--cntx-bg-tint);
  }
  html[data-skin="brand-warm-new"][data-look="bands"] .band-tint { background: var(--cntx-bg-tint); }
  html[data-skin="brand-warm-new"][data-look="bands"] .band-plain { background: var(--cntx-bg-surface); }
  html[data-skin="brand-warm-new"][data-look="bands"] .band-hero-glow {
    position: relative; overflow: clip;
    background: var(--cntx-bg-canvas);
  }
  html[data-skin="brand-warm-new"][data-look="bands"][data-deco="arcs"] .band-hero-glow {
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--cntx-bg-tint) 55%, var(--cntx-bg-canvas)) 0%, var(--cntx-bg-canvas) 42%, var(--cntx-bg-canvas) 100%);
  }
  html[data-skin="brand-warm-new"][data-look="bands"] .band-wash {
    background: var(--cntx-bg-canvas);
  }
  html[data-skin="brand-warm-new"][data-look="bands"] .cycle { background: var(--cntx-bg-canvas); }
  html[data-skin="brand-warm-new"][data-look="bands"] .band-dark,
  html[data-skin="brand-warm-new"][data-look="bands"] .why-sec {
    position: relative; overflow: clip; background: var(--cntx-bg-inverse);
  }
  html[data-skin="brand-warm-new"][data-look="bands"] .start .card {
    position: relative; overflow: hidden; background: var(--cntx-bg-inverse);
  }
  html[data-skin="brand-warm-new"][data-look="bands"] .band-dark .accent,
  html[data-skin="brand-warm-new"][data-look="bands"] .why-sec .accent,
  html[data-skin="brand-warm-new"][data-look="bands"] .whycap { color: var(--cntx-accent-warm); }

  /* Geometric edge forms — dots always; discs off; arcs only in ?deco=arcs */
  html[data-skin="brand-warm-new"] .geo-host {
    position: relative; overflow: clip;
  }
  html[data-skin="brand-warm-new"] .geo {
    position: absolute; pointer-events: none; z-index: 0;
  }
  html[data-skin="brand-warm-new"] .geo-host > .wrap,
  html[data-skin="brand-warm-new"] section.geo-host > .wrap { position: relative; z-index: 1; }
  html[data-skin="brand-warm-new"] .geo.disc,
  html[data-skin="brand-warm-new"] .skin-blob { display: none !important; }

  html[data-skin="brand-warm-new"] .geo.dots {
    width: 72px; height: 96px;
    background-image: radial-gradient(circle, var(--cntx-accent-warm) 1.35px, transparent 1.45px);
    background-size: 12px 12px;
    background-repeat: repeat;
    opacity: .5;
  }
  html[data-skin="brand-warm-new"] .band-dark .geo.dots,
  html[data-skin="brand-warm-new"] .why-sec .geo.dots,
  html[data-skin="brand-warm-new"] .start .geo.dots {
    background-image: radial-gradient(circle, color-mix(in srgb, #F0A58A 90%, #fff) 1.35px, transparent 1.45px);
    opacity: .65;
  }
  html[data-skin="brand-warm-new"] .geo.dots-tr { top: 14%; right: 4%; }
  html[data-skin="brand-warm-new"] .geo.dots-br { bottom: 12%; right: 5%; }
  html[data-skin="brand-warm-new"] .geo.dots-tl { top: 18%; left: 3%; }
  html[data-skin="brand-warm-new"] .geo.dots-bl { bottom: 16%; left: 4%; }
  html[data-skin="brand-warm-new"] .geo.dots-mr { top: 42%; right: 3%; }
  html[data-skin="brand-warm-new"] .geo.dots-ml { top: 28%; left: 3%; }
  html[data-skin="brand-warm-new"] .mini-col {
    position: relative; z-index: 1;
    padding-left: 56px;
  }
  html[data-skin="brand-warm-new"] .mini-col .geo.dots {
    left: 0; top: 18px; right: auto; width: 48px; height: 72px;
    opacity: .45; z-index: 0;
  }
  html[data-skin="brand-warm-new"] .mini-col .mini-loop { position: relative; z-index: 1; }

  /* Arcs — stroke only, sparse (dark bands + hero) */
  html[data-skin="brand-warm-new"] .geo.arc {
    display: none;
    width: 440px; height: 440px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid color-mix(in srgb, var(--cntx-accent-warm) 48%, transparent);
    box-sizing: border-box;
  }
  html[data-skin="brand-warm-new"] .geo.arc.mint {
    border-color: color-mix(in srgb, var(--cntx-accent-cyan) 42%, transparent);
  }
  html[data-skin="brand-warm-new"] .geo.arc.thin {
    width: 280px; height: 280px;
    border-width: 1px;
  }
  html[data-skin="brand-warm-new"][data-deco="arcs"] .geo.arc { display: block; }
  html[data-skin="brand-warm-new"] .geo.arc.edge-r { right: -220px; }
  html[data-skin="brand-warm-new"] .geo.arc.edge-l { left: -200px; }
  html[data-skin="brand-warm-new"] .geo.arc.top { top: -160px; }
  html[data-skin="brand-warm-new"] .geo.arc.bot { bottom: -180px; }
  html[data-skin="brand-warm-new"] .geo.arc.mid { top: 22%; }

  html[data-skin="brand-warm-new"] .skin-dots {
    position: absolute; width: 60px; height: 84px; z-index: 0; pointer-events: none;
    top: 16%; right: 6%; opacity: .48;
    background-image: radial-gradient(circle, var(--cntx-accent-warm) 1.35px, transparent 1.45px);
    background-size: 12px 12px;
  }
  html[data-skin="brand-warm-new"][data-theme="dark"] .skin-dots { opacity: .55; }
  html[data-skin="brand-warm-new"] .band-hero-glow > .wrap { position: relative; z-index: 1; }
  html[data-skin="brand-warm-new"] .start .card > *:not(.geo) { position: relative; z-index: 1; }
  html[data-skin="brand-warm-new"] .frame {
    border-radius: 14px; border-color: var(--cntx-border-default);
    box-shadow: var(--elev); background: var(--cntx-bg-surface);
  }
  html[data-skin="brand-warm-new"] .frame.flat { box-shadow: 0 1px 0 var(--hair); }
  html[data-skin="brand-warm-new"] .frame .bar {
    background: color-mix(in srgb, var(--cntx-bg-tint) 65%, var(--cntx-bg-surface));
  }
  html[data-skin="brand-warm-new"][data-theme="dark"] .frame .bar {
    background: color-mix(in srgb, var(--cntx-bg-surface) 80%, #000);
  }
  html[data-skin="brand-warm-new"] .cycle-cards a {
    border-radius: 14px; background: var(--cntx-bg-surface); border: 1px solid var(--cntx-border-default);
    box-shadow: 0 10px 28px -20px rgba(12, 53, 56, .35);
  }
  html[data-skin="brand-warm-new"][data-theme="dark"] .cycle-cards a {
    box-shadow: none; background: color-mix(in srgb, var(--cntx-bg-surface) 92%, #000);
  }
  html[data-skin="brand-warm-new"] .start .card { border-radius: 22px; }
  html[data-skin="brand-warm-new"] .tensions > div { border-top-color: var(--cntx-text-brand); border-top-width: 2px; }
  html[data-skin="brand-warm-new"] .tensions span { color: var(--cntx-accent-warm); }
  html[data-skin="brand-warm-new"] .cycle-lbl .accent,
  html[data-skin="brand-warm-new"] .cycle-cards a:hover b.verb { color: var(--cntx-accent-warm); }
  html[data-skin="brand-warm-new"] .cycle-sticky.is-on .rail {
    background: color-mix(in srgb, var(--cntx-bg-canvas) 86%, transparent);
    border-bottom-color: var(--hair); backdrop-filter: blur(12px);
  }
  html[data-skin="brand-warm-new"] .cycle-sticky a[aria-current="true"],
  html[data-skin="brand-warm-new"] .cycle-sticky a.active { color: var(--cntx-accent-warm); }
  html[data-skin="brand-warm-new"] #cycle-track { background: var(--cntx-accent-warm); }
  html[data-skin="brand-warm-new"][data-theme="dark"][data-look="bands"] .band-plain {
    background: color-mix(in srgb, var(--cntx-bg-surface) 42%, var(--cntx-bg-canvas));
  }
  html[data-skin="brand-warm-new"][data-theme="dark"][data-look="bands"] .band-soft,
  html[data-skin="brand-warm-new"][data-theme="dark"][data-look="bands"] .band-tint {
    /* Petroleum/cyan tint — accent-warm mixes read burgundy on dark surfaces */
    background: color-mix(in srgb, var(--cntx-accent-cyan) 7%, var(--cntx-bg-surface));
  }
  html[data-skin="brand-warm-new"][data-theme="dark"] .brain-obj {
    background: color-mix(in srgb, var(--cntx-bg-surface) 85%, #000);
    border-color: var(--cntx-border-strong);
  }

/* ===== Shared chrome (mega-menu, modals, page shells) — marketing layer ===== */
header.nav .nav-links { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; font-size: 14px; font-weight: 500; color: var(--cntx-text-muted); align-items: center; }
header.nav .right { gap: 8px; font-size: 13px; }
header.nav .nav-links > li { position: relative; }
header.nav .nav-links > li > a,
header.nav .nav-links > li > button.has-mega {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 6px 0;
}
header.nav .nav-links > li > button.has-mega .nav-chevron {
  width: 14px; height: 14px; flex: none;
  transition: transform 0.15s ease;
}
header.nav .nav-links > li.is-open > button.has-mega .nav-chevron {
  transform: rotate(180deg);
}
header.nav .nav-links > li > a:hover,
header.nav .nav-links > li > button.has-mega:hover,
header.nav .nav-links > li.is-open > button.has-mega { color: var(--cntx-text-primary); }
header.nav .nav-links > li.is-current > a,
header.nav .nav-links > li.is-current > button.has-mega { color: var(--cntx-text-primary); }
/* Current-location underline (same idea as WP topbar) */
header.nav .nav-links > li.is-current > a::after,
header.nav .nav-links > li.is-current > button.has-mega::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  border-radius: 999px;
  background: var(--cntx-action-primary);
  pointer-events: none;
}
header.nav .nav-links > li.is-current > button.has-mega::after {
  right: 18px; /* stop before chevron */
}

.mega {
  display: none; position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  background: var(--cntx-bg-surface); border: 1px solid var(--cntx-border-default);
  border-radius: var(--cntx-radius-xl); box-shadow: var(--cntx-elevation-overlay);
  padding: 20px; z-index: 40; min-width: 520px;
  max-width: calc(100vw - 32px); box-sizing: border-box;
}
.nav-links > li.is-open > .mega { display: grid; }
.mega-product,
.mega-resources {
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  min-width: min(720px, calc(100vw - 32px));
  width: min(762px, calc(100vw - 32px));
}
.mega-card {
  display: block; padding: 14px 16px; border-radius: var(--cntx-radius-lg);
  border: 1px solid transparent; text-decoration: none; color: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.mega-card:hover { background: var(--cntx-bg-hover); border-color: var(--cntx-border-default); }
.mega-card.is-current {
  background: var(--cntx-bg-selected, var(--cntx-bg-hover));
  border-color: var(--cntx-border-strong, var(--cntx-border-default));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cntx-action-primary) 28%, transparent);
}
.mega-card.is-current b { color: var(--cntx-text-brand); }
.mega-card.is-current .goto { color: var(--cntx-action-primary); }
.mega-card .ico {
  width: 36px; height: 36px; border-radius: var(--cntx-radius-md);
  display: grid; place-items: center; background: var(--cntx-bg-tint); color: var(--cntx-text-brand); margin-bottom: 10px;
}
.mega-card b { display: block; font: 600 15px var(--cntx-font-display); letter-spacing: -0.02em; color: var(--cntx-text-primary); }
.mega-card p { margin: 6px 0 10px; font-size: 13px; color: var(--cntx-text-muted); line-height: 1.4; }
.mega-card .modules { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.mega-card .modules span {
  font-size: 11px; padding: 2px 7px; border-radius: 4px;
  background: var(--cntx-bg-canvas); border: 1px solid var(--cntx-border-default); color: var(--cntx-text-muted);
}
.mega-card .goto {
  display: inline-block; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--cntx-text-brand);
}
.mega-link {
  display: block; padding: 10px 12px; border-radius: var(--cntx-radius-md); text-decoration: none; color: inherit;
}
.mega-link:hover { background: var(--cntx-bg-hover); }
.mega-link b { display: block; font-size: 14px; color: var(--cntx-text-primary); }
.mega-link span { font-size: 12.5px; color: var(--cntx-text-muted); }

.drawer {
  display: none; position: fixed; inset: 0; z-index: 50;
  background: color-mix(in srgb, var(--cntx-bg-canvas) 92%, transparent); backdrop-filter: blur(8px);
  padding: 24px;
}
.drawer.is-open { display: block; }
.drawer-panel {
  max-width: 420px; margin-left: auto; background: var(--cntx-bg-surface);
  border: 1px solid var(--cntx-border-default); border-radius: var(--cntx-radius-xl);
  padding: 20px; box-shadow: var(--cntx-elevation-overlay); max-height: calc(100vh - 48px); overflow: auto;
}
.drawer h4 { margin: 18px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--cntx-text-muted); }
.drawer a { display: block; padding: 8px 0; color: var(--cntx-text-primary); text-decoration: none; font-weight: 500; }

.modal-backdrop {
  position: fixed; inset: 0; z-index: 60; display: none; place-items: center;
  background: rgba(7, 21, 22, .55); backdrop-filter: blur(6px); padding: 24px;
}
.modal-backdrop.is-open { display: grid; }
.modal {
  width: min(560px, 100%); background: var(--cntx-bg-surface); color: var(--cntx-text-primary);
  border: 1px solid var(--cntx-border-default); border-radius: var(--cntx-radius-xl);
  box-shadow: var(--cntx-elevation-overlay); padding: 28px 28px 22px; position: relative;
}
.modal-newsletter { width: min(480px, 100%); }
.modal .modal-brand { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--cntx-text-brand); margin-bottom: 14px; }
.modal .modal-brand i { width: 8px; height: 8px; border-radius: 50%; background: var(--cntx-accent-cyan); display: block; }
.modal .modal-close {
  position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--cntx-border-default); background: var(--cntx-bg-surface); cursor: pointer;
  color: var(--cntx-text-muted); font-size: 18px;
}
.modal h2 { margin: 0 0 6px; font: 600 28px/1.15 var(--cntx-font-display); letter-spacing: -0.03em; }
.modal .sub { margin: 0 0 18px; color: var(--cntx-text-muted); font-size: 14.5px; }
.modal .step-meta { display: flex; justify-content: space-between; font-size: 13px; color: var(--cntx-text-muted); margin-bottom: 8px; }
.modal .progress-bar { height: 4px; background: var(--cntx-bg-tint); border-radius: 999px; overflow: hidden; margin-bottom: 22px; }
.modal .progress-bar > i { display: block; height: 100%; background: var(--cntx-action-primary); width: 20%; border-radius: 999px; }
.modal .q-title { font: 600 18px var(--cntx-font-display); margin: 0 0 4px; }
.modal .q-help { font-size: 13.5px; color: var(--cntx-text-muted); margin: 0 0 14px; }
.modal .opts { display: grid; gap: 8px; }
.modal .opt {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px;
  border: 1px solid var(--cntx-border-default); border-radius: var(--cntx-radius-lg);
  background: var(--cntx-bg-canvas); cursor: pointer; font-size: 14px;
}
.modal .opt:hover, .modal .opt.is-on { border-color: var(--cntx-border-selected); background: var(--cntx-bg-selected); }
.modal .opt input { margin-top: 3px; }
.modal .foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 22px; }
.modal .legal { font-size: 12px; color: var(--cntx-text-muted); max-width: 28em; }
.modal .news-row { display: flex; gap: 8px; }
.modal .news-row input {
  flex: 1; min-height: var(--cntx-control-height, 40px); padding: 0 12px;
  border: 1px solid var(--cntx-border-default); border-radius: var(--cntx-radius-md);
  background: var(--cntx-bg-canvas); color: var(--cntx-text-primary); font: inherit;
}
.modal .news-hint { margin-top: 10px; font-size: 12.5px; color: var(--cntx-text-muted); }

/* Mini-UI product shots (FR/EN HTML, not PNG crops) */
.mini-ui {
  background: var(--cntx-bg-canvas); border-top: 1px solid var(--cntx-border-default);
  padding: 14px; font-size: 12.5px; color: var(--cntx-text-primary);
}
.mini-ui .mui-row { display: flex; gap: 8px; flex-wrap: wrap; }
.mini-ui .mui-card {
  background: var(--cntx-bg-surface); border: 1px solid var(--cntx-border-default);
  border-radius: var(--cntx-radius-md); padding: 10px 12px; flex: 1; min-width: 140px;
}
.mini-ui .mui-card b { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 4px; }
.mini-ui .mui-card small { color: var(--cntx-text-muted); font-size: 11px; line-height: 1.35; display: block; }
.mini-ui .mui-chip {
  display: inline-block; font-size: 10.5px; padding: 1px 6px; border-radius: 4px;
  background: var(--cntx-bg-tint); color: var(--cntx-text-brand); font-weight: 600; margin-bottom: 6px;
}
.mini-ui .mui-chip.warn { background: var(--cntx-status-warning-bg); color: var(--cntx-status-warning-fg); }
.mini-ui .mui-gauge {
  height: 8px; background: var(--cntx-bg-tint); border-radius: 999px; overflow: hidden; margin: 8px 0 4px;
}
.mini-ui .mui-gauge > i { display: block; height: 100%; width: 15%; background: var(--cntx-accent-cyan); border-radius: 999px; }
.mini-cal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.mini-cal .day { min-height: 88px; background: var(--cntx-bg-surface); border: 1px solid var(--cntx-border-default); border-radius: 6px; padding: 6px; }
.mini-cal .day .d { font-size: 10.5px; font-weight: 600; color: var(--cntx-text-muted); margin-bottom: 6px; }
.mini-cal .block {
  font-size: 10px; line-height: 1.25; padding: 4px 5px; border-radius: 4px; margin-bottom: 4px;
  background: color-mix(in srgb, var(--cntx-accent-cyan) 16%, var(--cntx-bg-surface));
  border-left: 2px solid var(--cntx-accent-cyan); color: var(--cntx-text-primary);
}
.mini-cal .block .st {
  display: inline-block; font-size: 9px; font-weight: 600; margin-top: 2px;
  color: var(--cntx-text-muted);
}

/* App-shell product shots — mirror real FE layout (rail + page head + dense body) */
.ax {
  --ax-rail: 44px;
  display: grid; grid-template-columns: var(--ax-rail) minmax(0, 1fr);
  background: var(--cntx-bg-canvas); color: var(--cntx-text-primary);
  font-size: 11.5px; line-height: 1.35; text-align: left;
}
.ax.no-rail { grid-template-columns: minmax(0, 1fr); }
.ax.no-rail .ax-rail { display: none; }
.ax-rail {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 0; border-right: 1px solid var(--cntx-border-default);
}
.ax-rail .logo { width: 24px; height: 18px; margin-bottom: 8px; display: grid; place-items: center; }
.ax-rail .logo img { width: 100%; height: auto; display: block; }
.ax-rail .ri { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: var(--cntx-text-muted); }
.ax-rail .ri svg { width: 14px; height: 14px; stroke-width: 1.9; }
.ax-rail .ri.on { background: var(--cntx-bg-selected); color: var(--cntx-text-brand); }
.ax-rail .sp { flex: 1; }
.ax-main { min-width: 0; padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.ax-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ax-head b { display: block; font: 600 15px/1.2 'Inter Tight', sans-serif; letter-spacing: -0.02em; }
.ax-head small { display: block; margin-top: 3px; color: var(--cntx-text-muted); font-size: 11px; }
.ax-btn {
  flex: none; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 10.5px; font-weight: 600; padding: 5px 9px; border-radius: 6px;
  background: var(--cntx-bg-inverse); color: var(--cntx-text-on-inverse);
}
.ax-btn.ghost { background: var(--cntx-bg-surface); color: var(--cntx-text-primary); border: 1px solid var(--cntx-border-default); }
.ax-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ax-tabs { display: flex; gap: 14px; border-bottom: 1px solid var(--cntx-border-default); }
.ax-tabs span { padding: 0 0 7px; color: var(--cntx-text-muted); font-weight: 500; white-space: nowrap; }
.ax-tabs span.on { color: var(--cntx-text-brand); font-weight: 600; box-shadow: inset 0 -2px 0 var(--cntx-accent-cyan); }
.ax-field {
  flex: none; align-self: stretch; min-width: 0; height: 32px; box-sizing: border-box;
  display: flex; align-items: center; padding: 0 10px; border-radius: 6px;
  color: var(--cntx-text-muted); font-size: 12px; line-height: 1;
  background: var(--cntx-bg-surface); border: 1px solid var(--cntx-border-default);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ax-stat {
  display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; font-size: 10.5px; font-weight: 600;
  padding: 3px 7px; border-radius: 6px; background: var(--cntx-bg-surface); border: 1px solid var(--cntx-border-default);
}
.ax-card {
  background: var(--cntx-bg-surface); border: 1px solid var(--cntx-border-default);
  border-radius: 10px; padding: 12px;
}
.ax-card > b, .ax-h { display: block; font: 600 12.5px/1.25 'Inter Tight', sans-serif; letter-spacing: -0.01em; margin-bottom: 6px; }
.ax-muted { color: var(--cntx-text-muted); }
.ax-list { background: var(--cntx-bg-surface); border: 1px solid var(--cntx-border-default); border-radius: 10px; overflow: hidden; }
.ax-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; }
.ax-row + .ax-row { border-top: 1px solid var(--cntx-border-default); }
.ax-row .grow { flex: 1; min-width: 0; }
.ax-row .grow > b { display: block; font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-row .grow > small { display: block; color: var(--cntx-text-muted); font-size: 10.5px; margin-top: 2px; }
.ax-row .grow > p { margin: 5px 0 0; color: var(--cntx-text-muted); font-size: 10.5px; line-height: 1.4; }
.ax-row .end { flex: none; display: flex; gap: 5px; align-items: center; }
.ax-ico { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--cntx-border-default); }
.ax-avatar {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 10px; font-weight: 700; color: var(--cntx-text-brand); background: var(--cntx-bg-selected);
}
.ax-pill {
  display: inline-block; white-space: nowrap; font-size: 9.5px; font-weight: 600; padding: 2px 6px; border-radius: 999px;
  background: var(--cntx-bg-selected); color: var(--cntx-text-brand);
}
.ax-pill.muted { background: var(--cntx-bg-muted); color: var(--cntx-text-muted); border: 1px solid var(--cntx-border-default); }
.ax-pill.ok { background: var(--cntx-status-success-bg); color: var(--cntx-status-success-fg); }
.ax-pill.warn { background: var(--cntx-status-warning-bg); color: var(--cntx-status-warning-fg); }
.ax-pill.info { background: var(--cntx-status-info-bg); color: var(--cntx-status-info-fg); text-transform: uppercase; letter-spacing: .03em; }
.ax-pill.bad { background: var(--cntx-status-danger-bg); color: var(--cntx-status-danger-fg); }
.ax-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
/* Channel badges: same glyphs + third-party brand hues as the app (utils/channelIcons.ts, ChannelVisualBadge.tsx) */
.ch {
  --ch-bg: #10B981;
  --ch-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
  flex: none; display: inline-block; width: 16px; height: 16px; border-radius: 4px; background: var(--ch-bg); position: relative;
}
.ch::after {
  content: ''; position: absolute; inset: 22%; background: #fff;
  -webkit-mask: var(--ch-glyph) center / contain no-repeat; mask: var(--ch-glyph) center / contain no-repeat;
}
.ch.li {
  --ch-bg: #0A66C2;
  --ch-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452z'/%3E%3C/svg%3E");
}
.ch.nl {
  --ch-bg: #F59E0B;
  --ch-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
}
.ch.yt {
  --ch-bg: #FF0000;
  --ch-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
}
/* Horizontal meter */
.ax-meter { display: grid; grid-template-columns: 88px minmax(0, 1fr) 32px; gap: 8px; align-items: center; font-size: 10.5px; }
.ax-meter > span:first-child { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ax-meter + .ax-meter { margin-top: 7px; }
.ax-meter > i { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--cntx-text-muted) 18%, transparent); overflow: hidden; }
.ax-meter > i > i { display: block; height: 100%; border-radius: inherit; background: var(--cntx-accent-cyan); }
.ax-meter > i > i.full { background: var(--cntx-accent-warm); }
.ax-meter > em { font-style: normal; font-weight: 600; text-align: right; }
/* Score ring */
.ax-ring {
  --v: 80; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--cntx-accent-warm) calc(var(--v) * 1%), var(--cntx-bg-tint) 0);
  font: 700 11px 'Inter Tight', sans-serif; color: var(--cntx-text-primary);
}
.ax-ring::before { content: ''; grid-area: 1 / 1; width: 32px; height: 32px; border-radius: 50%; background: var(--cntx-bg-surface); }
.ax-ring > span { grid-area: 1 / 1; position: relative; }
.ax-ring.lg { width: 58px; height: 58px; font-size: 15px; }
.ax-ring.lg::before { width: 46px; height: 46px; }
/* Skeleton text lines for editors */
.ax-lines { display: grid; gap: 6px; }
.ax-lines i { display: block; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--cntx-text-muted) 22%, transparent); }
.ax-lines i:nth-child(3n) { width: 82%; }
.ax-lines i:nth-child(4n) { width: 64%; }
/* Week grid with hour rows */
.ax-week {
  --cols: 5; flex: 1; display: flex; flex-direction: column;
  background: var(--cntx-bg-surface); border: 1px solid var(--cntx-border-default); border-radius: 10px; overflow: hidden; position: relative;
}
.ax-week .wr { flex: 1; }
.ax-week.tall .wr { min-height: 62px; }
/* Frames that must fill their column (hero calendar next to the stacked shots) */
.frame.fill { height: 100%; display: flex; flex-direction: column; }
.frame.fill > .ax { flex: 1; }
.hero-vis { align-items: stretch; }
.hero-vis > .stack,
.hero-vis > div:last-child {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Single left shot (product planning) stretches to match calendar column height */
.hero-vis > .stack > .frame:only-child {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--cntx-bg-canvas);
}
.hero-vis > .stack > .frame:only-child > .ax { flex: 1; }
.hero-vis > div:last-child > .frame {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--cntx-bg-canvas);
}
.hero-vis > div:last-child > .frame > .ax { flex: 1; }
html[data-skin="brand-warm-new"] .hero-vis > .stack > .frame:only-child,
html[data-skin="brand-warm-new"] .hero-vis > div:last-child > .frame {
  background: var(--cntx-bg-canvas);
}
.perf-vis { align-items: stretch; }
.perf-vis > .frame { display: flex; flex-direction: column; }
.perf-vis > .frame > .ax { flex: 1; }
.perf-vis .ax-main > .ax-btn:last-child { margin-top: auto; }
.aud > div { display: flex; flex-direction: column; }
.aud > div > .frame {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--cntx-bg-canvas);
}
.aud > div > .frame > .ax,
.aud > div > .frame > .acc { flex: 1; }
html[data-skin="brand-warm-new"] .aud > div > .frame {
  background: var(--cntx-bg-canvas);
}
@media (min-width: 901px) {
  .layers { grid-template-rows: auto auto auto 1fr; row-gap: 0; }
  .layers > .layer { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
}
.layer > .frame { flex: 1; display: flex; flex-direction: column; }
.layer > .frame > .ax { flex: 1; }
/* Keep the caption chip from covering the shot's last rows */
[data-look="bands"] .frame:has(> .mark) .ax-main,
[data-look="bands-warm"] .frame:has(> .mark) .ax-main { padding-bottom: 72px; }
/* Master-detail layout (brief list + selected brief) */
.ax-md { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 12px; align-items: start; }
.ax-md .ax-row.on { background: var(--cntx-bg-selected); box-shadow: inset 2px 0 0 var(--cntx-accent-cyan); }
.ax-stack { display: grid; gap: 10px; }
@media (max-width: 900px) { .ax-md { grid-template-columns: minmax(0, 1fr); } .ax-md > .ax-list { display: none; } }
.ax-week .wh, .ax-week .wr { display: grid; grid-template-columns: 34px repeat(var(--cols), minmax(0, 1fr)); }
.ax-week .wh { border-bottom: 1px solid var(--cntx-border-default); }
.ax-week .wh > span { padding: 6px 4px; text-align: center; font-size: 9.5px; color: var(--cntx-text-muted); line-height: 1.2; }
.ax-week .wh > span b { display: block; font-size: 11px; color: var(--cntx-text-primary); }
.ax-week .wh > span.today b { color: var(--cntx-accent-warm); }
.ax-week .wr { min-height: 42px; }
.ax-week .wr + .wr { border-top: 1px solid var(--cntx-border-default); }
.ax-week .wr > span:first-child { font-size: 9px; color: var(--cntx-text-muted); padding: 4px 0 0 5px; }
.ax-week .wr > span { min-width: 0; padding: 3px; }
.ax-week .wr > span + span, .ax-week .wh > span + span { border-left: 1px solid var(--cntx-border-default); }
.ax-ev {
  display: block; border: 1px solid var(--cntx-border-default); border-radius: 6px; padding: 4px 5px;
  background: var(--cntx-bg-surface); box-shadow: 0 1px 2px color-mix(in srgb, var(--cntx-text-primary) 6%, transparent);
}
.ax-ev + .ax-ev { margin-top: 3px; }
.ax-ev > b { display: flex; gap: 4px; align-items: center; font-size: 9.5px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.ax-ev > b > span { overflow: hidden; text-overflow: ellipsis; }
.ax-ev .ch { width: 13px; height: 13px; border-radius: 3px; }
.ax-ev .ax-pill { margin-top: 3px; font-size: 8.5px; padding: 1px 5px; }
.ax-pop {
  position: absolute; z-index: 2; width: min(62%, 250px); padding: 10px 11px;
  background: var(--cntx-bg-surface); border: 1px solid var(--cntx-border-strong); border-radius: 10px;
  box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--cntx-text-primary) 40%, transparent);
}
.ax-pop .top { display: flex; gap: 8px; align-items: flex-start; }
.ax-pop .top b { display: block; font-size: 11.5px; font-weight: 600; line-height: 1.25; }
.ax-pop .top small { display: block; color: var(--cntx-text-muted); font-size: 10px; margin-top: 2px; }
.ax-pop p { margin: 7px 0 0; font-size: 10.5px; color: var(--cntx-text-muted); line-height: 1.4; }
.ax-pop .mid { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; }
.ax-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ax-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ax-kv { display: grid; gap: 2px; }
.ax-kv > small { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--cntx-text-muted); font-weight: 600; }
.ax-kv > span { font-weight: 500; }
.ax-flow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 10.5px; }
.ax-flow span { padding: 3px 8px; border-radius: 999px; border: 1px solid var(--cntx-border-default); background: var(--cntx-bg-surface); color: var(--cntx-text-muted); }
.ax-flow span.on { background: var(--cntx-bg-inverse); color: var(--cntx-text-on-inverse); border-color: transparent; }
.ax-flow em { font-style: normal; color: var(--cntx-text-muted); }
.ax-spark { display: block; width: 64px; height: 20px; flex: none; }
.ax-spark path { fill: none; stroke-width: 1.5; stroke: var(--cntx-status-danger-fg); }
.ax-spark.up path { stroke: var(--cntx-status-success-fg); }
.ax-check { display: flex; gap: 7px; align-items: flex-start; font-size: 10.5px; }
.ax-check + .ax-check { margin-top: 7px; }
.ax-check::before { content: ''; flex: none; width: 12px; height: 12px; margin-top: 1px; border-radius: 50%; background: var(--cntx-status-success-bg); box-shadow: inset 0 0 0 3px var(--cntx-status-success-fg); }
.ax-check.warn::before { background: var(--cntx-status-warning-bg); box-shadow: inset 0 0 0 3px var(--cntx-status-warning-fg); }
.ax-editor { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 10px; }
.ax-editor .doc .t1 { display: block; margin: 0 0 8px; font: 600 14px/1.25 'Inter Tight', sans-serif; letter-spacing: -0.02em; }
.ax-editor .doc .t2 { display: block; margin: 12px 0 6px; font: 600 11.5px 'Inter Tight', sans-serif; }
.ax-editor .doc p { margin: 0 0 8px; font-size: 10.5px; color: var(--cntx-text-muted); line-height: 1.5; }
@media (max-width: 760px) {
  /* When the rail is hidden, MUST collapse to a single column.
     Leaving `0px 1fr` puts the only child (.ax-main) in the 0px track
     → calendars/briefs collapse to ~35px with empty side gutters. */
  .ax {
    --ax-rail: 0px;
    grid-template-columns: minmax(0, 1fr);
  }
  .ax-rail { display: none; }
  .ax-editor, .ax-grid3 { grid-template-columns: minmax(0, 1fr); }

  .ax-main { padding: 14px 14px 16px; }
  .ax-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .ax-head .ax-tools,
  .ax-head .ax-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-self: flex-start;
  }
  .ax-head .ax-btn { white-space: normal; text-align: center; }
  .ax-tabs {
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ax-tabs::-webkit-scrollbar { display: none; }
  .ax-week {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ax-week .wh,
  .ax-week .wr {
    /* ~88px/day so titles stay readable; week scrolls horizontally */
    min-width: max(100%, calc(34px + var(--cols, 5) * 88px));
  }
  .ax-pop {
    position: static;
    width: auto;
    max-width: none;
    margin-top: 8px;
  }
  .frame.wide-frame { width: 100%; max-width: 100%; }
  [data-look="bands"] .frame:has(> .mark) .ax-main,
  [data-look="bands-warm"] .frame:has(> .mark) .ax-main { padding-bottom: 64px; }
}

/* Page shells for non-home templates */
.page-hero { padding: 72px 0 64px; }
.page-hero.wrap, section.s.wrap { padding-left: 40px; padding-right: 40px; }
@media (max-width: 760px) {
  .page-hero.wrap, section.s.wrap { padding-left: 20px; padding-right: 20px; }
}
.page-hero h1 { font-size: clamp(36px, 5vw, 56px); max-width: 16em; margin: 12px 0 0; }
.page-hero .lead { font-size: 18px; color: var(--cntx-text-muted); max-width: 40em; margin: 0; }
.page-hero .pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.page-hero-row {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px; align-items: end; margin-top: 22px;
}
.page-hero-row .ctas { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.page-hero .hero-vis { margin-top: 48px; }
.hero-vis--agency .acc-grid { margin-top: 4px; flex: 1; align-content: start; }
.hero-vis--agency .ax-tools .ax-field { flex: 1 1 auto; min-width: 180px; max-width: 320px; }
@media (max-width: 980px) {
  .page-hero-row { grid-template-columns: 1fr; gap: 20px; }
  .page-hero-row .ctas { justify-content: flex-start; }
}
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--cntx-text-muted); margin-bottom: 16px; }
.crumbs a { color: var(--cntx-text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--cntx-text-brand); }
.kicker { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cntx-accent-warm); }
.cntx-warm-shell .kicker,
html[data-skin="brand-warm-new"] .kicker,
html[data-theme="dark"] .kicker,
html[data-theme="dark"] .cntx-warm-shell .kicker,
html[data-theme="dark"][data-skin="brand-warm-new"] .kicker {
  color: var(--cntx-accent-warm);
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.feature-card {
  background: var(--cntx-bg-surface); border: 1px solid var(--cntx-border-default);
  border-radius: var(--cntx-radius-lg); padding: 20px;
}
.feature-card .ico {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--cntx-bg-tint); color: var(--cntx-text-brand); margin-bottom: 12px;
}
.feature-card b { display: block; font: 600 17px var(--cntx-font-display); margin-bottom: 6px; }
.feature-card p { margin: 0; font-size: 14.5px; color: var(--cntx-text-muted); }

.pricing-toggle {
  display: inline-flex; border: 1px solid var(--cntx-border-default); border-radius: var(--cntx-radius-pill);
  padding: 4px; background: var(--cntx-bg-surface); margin: 28px 0 8px;
}
.pricing-toggle button {
  border: 0; background: transparent; padding: 8px 16px; border-radius: var(--cntx-radius-pill);
  font: 500 14px var(--cntx-font-sans); color: var(--cntx-text-muted); cursor: pointer;
}
.pricing-toggle button.is-on { background: var(--cntx-action-primary); color: var(--cntx-text-on-action); }
.pricing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 0; }
.price-card {
  background: var(--cntx-bg-surface); border: 1px solid var(--cntx-border-default);
  border-radius: var(--cntx-radius-xl); padding: 22px 20px; display: flex; flex-direction: column;
}
.price-card.is-featured { border-color: var(--cntx-border-selected); box-shadow: var(--cntx-elevation-raised); }
.price-card h3 { margin: 0; font: 600 20px var(--cntx-font-display); }
.price-card .price { font: 600 36px/1 var(--cntx-font-display); letter-spacing: -0.03em; margin: 14px 0 4px; }
.price-card .price small { font-size: 14px; font-weight: 500; color: var(--cntx-text-muted); }
.price-card .note { font-size: 13px; color: var(--cntx-text-muted); margin: 0 0 16px; }
.price-card ul { list-style: none; margin: 0 0 20px; padding: 0; flex: 1; display: grid; gap: 8px; }
.price-card li { font-size: 13.5px; padding-left: 18px; position: relative; color: var(--cntx-text-primary); }
.price-card li::before { content: '✓'; position: absolute; left: 0; color: var(--cntx-accent-cyan); font-weight: 700; }

.compare { width: 100%; border-collapse: collapse; margin-top: 40px; font-size: 14px; }
.compare th, .compare td { padding: 12px 14px; border-bottom: 1px solid var(--cntx-border-default); text-align: left; }
.compare th { font-weight: 600; background: var(--cntx-bg-tint); }
.compare td { color: var(--cntx-text-muted); }
.compare td:first-child { color: var(--cntx-text-primary); font-weight: 500; }

.help-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.help-topic {
  display: block; padding: 18px; background: var(--cntx-bg-surface); border: 1px solid var(--cntx-border-default);
  border-radius: var(--cntx-radius-lg); text-decoration: none; color: inherit;
}
.help-topic:hover { border-color: var(--cntx-border-selected); }
.help-topic b { display: block; font: 600 16px var(--cntx-font-display); margin: 8px 0 6px; }
.help-topic p { margin: 0; font-size: 13.5px; color: var(--cntx-text-muted); }
.help-topic .count { font-size: 12px; color: var(--cntx-text-brand); font-weight: 600; margin-top: 10px; display: block; }
.search-bar {
  display: flex; gap: 8px; margin-top: 24px; max-width: 560px;
}
.search-bar input {
  flex: 1; min-height: 44px; padding: 0 14px; border: 1px solid var(--cntx-border-default);
  border-radius: var(--cntx-radius-md); background: var(--cntx-bg-surface); color: var(--cntx-text-primary); font: inherit;
}

.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 48px; margin-top: 40px; }
.article-body { font-size: 16.5px; line-height: 1.65; color: var(--cntx-text-primary); }
.article-body h2 { font: 600 28px/1.2 var(--cntx-font-display); letter-spacing: -0.02em; margin: 36px 0 12px; }
.article-body h3 { font: 600 20px/1.25 var(--cntx-font-display); margin: 28px 0 10px; }
.article-body p { margin: 0 0 14px; color: var(--cntx-text-muted); }
.article-body ul,
.article-body ol:not(.art-steps),
.help-prose ul,
.help-prose ol:not(.art-steps),
.blog-prose ul,
.blog-prose ol:not(.art-steps),
.cntx-content ul,
.cntx-content ol:not(.art-steps),
.related-block ul {
  margin: 0 0 18px;
  padding-inline-start: 1.25em;
  list-style-position: outside;
  color: var(--cntx-text-muted);
}
.article-body li,
.help-prose li,
.blog-prose li,
.cntx-content li,
.related-block li {
  margin: 0 0 8px;
  padding-inline-start: 0.15em;
}
.article-body li:last-child,
.help-prose li:last-child,
.blog-prose li:last-child,
.cntx-content li:last-child,
.related-block li:last-child {
  margin-bottom: 0;
}
.article-body .callout {
  margin: 20px 0; padding: 14px 16px; border-radius: var(--cntx-radius-md);
  background: var(--cntx-bg-tint); border-left: 3px solid var(--cntx-accent-cyan);
  font-size: 14.5px; color: var(--cntx-text-primary);
}
.toc {
  position: sticky; top: 88px; padding: 16px; border: 1px solid var(--cntx-border-default);
  border-radius: var(--cntx-radius-lg); background: var(--cntx-bg-surface);
}
.toc b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--cntx-text-muted); margin-bottom: 10px; }
.toc a { display: block; font-size: 13.5px; color: var(--cntx-text-muted); text-decoration: none; padding: 4px 0; }
.toc a:hover { color: var(--cntx-text-brand); }
.author-card {
  display: flex; gap: 16px; align-items: flex-start; margin-top: 40px; padding: 20px;
  border: 1px solid var(--cntx-border-default); border-radius: var(--cntx-radius-lg); background: var(--cntx-bg-surface);
}
.author-card .av {
  width: 56px; height: 56px; border-radius: 50%; background: var(--cntx-bg-tint);
  display: grid; place-items: center; font-weight: 700; color: var(--cntx-text-brand); flex: none;
}
.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.related a {
  display: block; padding: 16px; border: 1px solid var(--cntx-border-default); border-radius: var(--cntx-radius-lg);
  background: var(--cntx-bg-surface); text-decoration: none; color: inherit;
}
.related a b { display: block; font-size: 15px; margin-bottom: 6px; }
.related a span { font-size: 13px; color: var(--cntx-text-muted); }

.footer-news {
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
  margin: 32px 0; padding: 24px; border-radius: var(--cntx-radius-xl);
  background: var(--cntx-bg-tint); border: 1px solid var(--cntx-border-default);
}
.footer-news h4 { margin: 0 0 4px; font: 600 18px var(--cntx-font-display); }
.footer-news p { margin: 0; font-size: 14px; color: var(--cntx-text-muted); }
.footer-news .news-row { display: flex; gap: 8px; }
@media (max-width: 720px) {
  .footer-news { grid-template-columns: minmax(0, 1fr); }
  .footer-news .news-row input { min-width: 0; flex: 1; }
}
.footer-news input {
  min-width: 220px; min-height: 40px; padding: 0 12px; border: 1px solid var(--cntx-border-default);
  border-radius: var(--cntx-radius-md); background: var(--cntx-bg-surface); color: var(--cntx-text-primary);
}

.hi { color: var(--cntx-accent-warm); }

@media (max-width: 1100px) {
  .pricing-grid, .help-topics, .feature-grid, .related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mega-product,
  .mega-resources { grid-template-columns: 1fr; min-width: 320px; }
  .article-layout { grid-template-columns: 1fr; }
  .toc { position: static; }
  /* Keep CTA side panel from crushing .mini-loop between tablet and mobile */
  .start .card { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  html[data-skin="brand-warm-new"] .mini-col { padding-left: 0; }
  html[data-skin="brand-warm-new"] .mini-col > .geo.dots { display: none; }
}
@media (max-width: 760px) {
  .nav .nav-links { display: none; }
  .nav .right .btn, .nav .right .ghost { display: none; }
  .nav .menu { display: block !important; }
  .pricing-grid, .help-topics, .feature-grid, .related, .footer-news { grid-template-columns: 1fr; }
  .hero h1, .page-hero h1 { font-size: 36px; }
  .hero .row, .hero-vis, .split, .why-stage, .aud, .start .card { grid-template-columns: 1fr; }
}

/* ===== Blog index + article ===== */
body[data-page^="blog"] ::selection,
.cntx-warm-shell[data-page^="blog"] ::selection { background: color-mix(in srgb, var(--cntx-accent-warm) 26%, transparent); }

.tag, .cover-tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; line-height: 1;
  padding: 6px 10px; border-radius: 999px; white-space: nowrap;
}
.t-warm { background: color-mix(in srgb, var(--cntx-accent-warm) 13%, var(--cntx-bg-surface)); color: color-mix(in srgb, var(--cntx-accent-warm) 72%, var(--cntx-text-primary)); }
.t-cyan { background: color-mix(in srgb, var(--cntx-accent-cyan) 16%, var(--cntx-bg-surface)); color: color-mix(in srgb, var(--cntx-accent-cyan) 45%, var(--cntx-text-primary)); }
.t-brand { background: var(--cntx-bg-tint); color: var(--cntx-text-brand); }

.av {
  width: 30px; height: 30px; border-radius: 50%; flex: none; display: inline-grid; place-items: center;
  font: 700 11px/1 var(--cntx-font-sans); letter-spacing: .02em;
}
.av-warm { background: color-mix(in srgb, var(--cntx-accent-warm) 16%, var(--cntx-bg-surface)); color: color-mix(in srgb, var(--cntx-accent-warm) 72%, var(--cntx-text-primary)); box-shadow: 0 0 0 2px var(--cntx-bg-surface), 0 0 0 3px color-mix(in srgb, var(--cntx-accent-warm) 40%, transparent); }
.av-brand { background: var(--cntx-bg-tint); color: var(--cntx-text-brand); box-shadow: 0 0 0 2px var(--cntx-bg-surface), 0 0 0 3px color-mix(in srgb, var(--cntx-accent-cyan) 45%, transparent); }
.av-lg { width: 44px; height: 44px; font-size: 14px; }
.av-xl { width: 64px; height: 64px; font-size: 19px; }

/* Covers: photo + brand wash + one geometric arc */
.cover {
  position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden;
  background: var(--cntx-bg-tint); isolation: isolate;
}
.cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.78) contrast(1.03); transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}
.cover::before { content: ""; position: absolute; inset: 0; z-index: 1; mix-blend-mode: multiply; opacity: .34; pointer-events: none; }
.cover::after {
  content: ""; position: absolute; z-index: 2; width: 62%; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid; opacity: .85; pointer-events: none;
}
.cover.c-warm::before { background: linear-gradient(160deg, transparent 30%, var(--cntx-accent-warm)); }
.cover.c-warm::after { border-color: color-mix(in srgb, var(--cntx-accent-warm) 80%, #fff); right: -22%; bottom: -34%; }
.cover.c-cyan::before { background: linear-gradient(200deg, transparent 25%, var(--cntx-accent-cyan)); }
.cover.c-cyan::after { border-color: color-mix(in srgb, var(--cntx-accent-cyan) 75%, #fff); right: -26%; top: -38%; }
.cover.c-brand::before { background: linear-gradient(20deg, #0C3538, transparent 70%); opacity: .5; }
.cover.c-brand::after { border-color: color-mix(in srgb, var(--cntx-accent-warm) 70%, #fff); left: -26%; bottom: -40%; }
.cover-tag {
  position: absolute; z-index: 3; top: 12px; left: 12px;
  background: color-mix(in srgb, var(--cntx-bg-surface) 94%, transparent); color: var(--cntx-text-primary);
  box-shadow: 0 4px 14px -6px rgba(10, 30, 32, .35);
}
.cover-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cntx-accent-warm); }
.c-cyan > .cover-tag::before { background: var(--cntx-accent-cyan); }
.c-brand > .cover-tag::before { background: var(--cntx-text-brand); }

/* Hero */
.blog-hero { padding: 72px 0 28px; }
.blog-hero + .blog-sec { padding-top: 40px; }
.blog-hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.blog-hero h1 { font-size: clamp(40px, 5.2vw, 64px); max-width: 12em; margin: 16px 0 0; text-wrap: balance; }
.blog-hero .lead { font-size: 18.5px; color: var(--cntx-text-muted); max-width: 34em; margin: 20px 0 0; text-wrap: pretty; }
.blog-search {
  position: relative; display: flex; align-items: center; gap: 8px; margin-top: 28px; max-width: 560px;
  padding: 6px 6px 6px 44px; border-radius: 14px; background: var(--cntx-bg-surface);
  border: 1px solid var(--cntx-border-default); box-shadow: 0 12px 30px -22px rgba(12, 53, 56, .45);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.blog-search:focus-within { border-color: color-mix(in srgb, var(--cntx-accent-warm) 55%, var(--cntx-border-default)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cntx-accent-warm) 14%, transparent); }
.blog-search > svg { position: absolute; left: 15px; width: 18px; height: 18px; color: var(--cntx-text-muted); }
.blog-search input { flex: 1; min-width: 0; min-height: 40px; border: 0; background: transparent; color: var(--cntx-text-primary); font: inherit; font-size: 15px; outline: none; }
.blog-search input::placeholder { color: var(--cntx-text-muted); }
.blog-popular { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; }
.blog-popular > span { color: var(--cntx-text-muted); margin-right: 2px; }
.blog-popular a, .art-tags .tags a {
  text-decoration: none; color: var(--cntx-text-primary); font-weight: 500; font-size: 13px;
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--cntx-border-default);
  background: color-mix(in srgb, var(--cntx-bg-surface) 70%, transparent); transition: border-color .2s, color .2s, background .2s;
}
.blog-popular a:hover, .art-tags .tags a:hover {
  color: color-mix(in srgb, var(--cntx-accent-warm) 75%, var(--cntx-text-primary));
  border-color: color-mix(in srgb, var(--cntx-accent-warm) 45%, var(--cntx-border-default));
  background: color-mix(in srgb, var(--cntx-accent-warm) 7%, var(--cntx-bg-surface));
}

.starter {
  position: relative; z-index: 1; padding: 22px; border-radius: 20px; background: var(--cntx-bg-surface);
  border: 1px solid var(--cntx-border-default); box-shadow: 0 30px 60px -36px rgba(12, 53, 56, .45);
}
.starter-head { display: flex; gap: 12px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--cntx-border-default); }
.starter-head b { display: block; font: 600 16px/1.25 var(--cntx-font-display); }
.starter-head small { font-size: 13px; color: var(--cntx-text-muted); }
.starter-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--cntx-accent-warm) 14%, var(--cntx-bg-surface)); color: var(--cntx-accent-warm); }
.starter-ico svg { width: 19px; height: 19px; }
.starter ol { list-style: none; margin: 6px 0 0; padding: 0; }
.starter li a { display: flex; gap: 14px; align-items: flex-start; padding: 12px 8px; margin: 0 -8px; border-radius: 12px; text-decoration: none; color: inherit; transition: background .2s; }
.starter li a:hover { background: var(--cntx-bg-hover); }
.starter li a:hover b { color: var(--cntx-text-brand); }
.starter li em {
  font-style: normal; flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font: 700 12.5px/1 var(--cntx-font-display); color: #fff; background: var(--cntx-accent-warm); margin-top: 1px;
}
.starter li b { display: block; font-size: 14.5px; line-height: 1.35; font-weight: 600; transition: color .2s; }
.starter li small { font-size: 12.5px; color: var(--cntx-text-muted); }
.starter-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--cntx-text-brand); text-decoration: none; }
.starter-more svg { width: 15px; height: 15px; transition: transform .2s; }
.starter-more:hover svg { transform: translateX(3px); }

/* Sections */
.blog-sec { padding: 88px 0; }
/* Collapse only between two plain sections — keep space after .band-tint */
.blog-sec:not(.band-tint) + .blog-sec:not(.band-tint) { padding-top: 0; }
.blog-sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.blog-sec-head h2 { font-size: clamp(28px, 3.2vw, 38px); }
.blog-sec-head p { margin: 10px 0 0; color: var(--cntx-text-muted); font-size: 16px; }

/* Post cards */
.post {
  display: flex; flex-direction: column; text-decoration: none; color: inherit; padding: 8px;
  background: var(--cntx-bg-surface); border: 1px solid var(--cntx-border-default); border-radius: 18px;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease, border-color .2s;
}
.post:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--cntx-accent-warm) 30%, var(--cntx-border-default)); box-shadow: 0 24px 44px -28px rgba(12, 53, 56, .5); }
.post:hover .cover img { transform: scale(1.045); }
.post:hover h3 { color: var(--cntx-text-brand); }
.post:focus-visible { outline: 2px solid var(--cntx-accent-warm); outline-offset: 3px; }
.post h3 { margin: 0; font: 600 18px/1.3 var(--cntx-font-display); letter-spacing: -0.012em; text-wrap: balance; transition: color .2s; }
.post-body { display: flex; flex-direction: column; flex: 1; padding: 16px 12px 10px; }
.post-body > p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--cntx-text-muted); }
.post-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; }
.byline { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; }
.byline b { font-weight: 600; }
.byline small { display: block; font-size: 12px; color: var(--cntx-text-muted); }
.post-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 12.5px; color: var(--cntx-text-muted); }
.post-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.post-meta svg { width: 14px; height: 14px; }
.read-more { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--cntx-accent-warm); }
.read-more svg { width: 16px; height: 16px; transition: transform .25s; }
.post:hover .read-more svg { transform: translateX(4px); }

.featured { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; }
.post-lg .cover { aspect-ratio: 16 / 9; border-radius: 13px; }
.post-lg .post-body { padding: 20px 16px 12px; }
.post-lg h3 { font-size: clamp(22px, 2.3vw, 28px); line-height: 1.2; margin-top: 10px; }
.post-lg .post-body > p { font-size: 15.5px; max-width: 42em; }
.featured-side { display: grid; gap: 16px; grid-auto-rows: 1fr; }
.post-row { flex-direction: row; gap: 16px; align-items: center; padding: 8px 16px 8px 8px; }
.post-row .cover { flex: none; width: 38%; aspect-ratio: auto; align-self: stretch; min-height: 104px; border-radius: 11px; }
.post-row .cover::after { width: 80%; }
.post-row h3 { font-size: 16px; margin: 10px 0 8px; }

.themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.theme {
  --h: var(--cntx-accent-cyan);
  display: flex; align-items: center; gap: 14px; padding: 16px 16px 16px 16px; text-decoration: none; color: inherit;
  background: var(--cntx-bg-surface); border: 1px solid var(--cntx-border-default); border-radius: 16px;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), border-color .2s, box-shadow .3s;
}
.theme.h-warm { --h: var(--cntx-accent-warm); }
.theme.h-brand { --h: var(--cntx-text-brand); }
.theme:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--h) 45%, var(--cntx-border-default)); box-shadow: 0 18px 34px -26px rgba(12, 53, 56, .5); }
.theme-ico {
  width: 46px; height: 46px; border-radius: 13px; flex: none; display: grid; place-items: center;
  background: color-mix(in srgb, var(--h) 14%, var(--cntx-bg-surface)); color: var(--h);
  transition: background .25s, color .25s;
}
.theme:hover .theme-ico { background: var(--h); color: #fff; }
.theme-ico svg { width: 21px; height: 21px; }
.theme-txt { min-width: 0; }
.theme-txt b { display: block; font: 600 15.5px/1.3 var(--cntx-font-display); }
.theme-txt small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--cntx-text-muted); }
.theme-count {
  margin-left: auto; flex: none; font: 600 12.5px/1 var(--cntx-font-sans); font-variant-numeric: tabular-nums;
  padding: 6px 9px; border-radius: 999px; background: var(--cntx-bg-canvas); color: var(--cntx-text-muted);
}

.filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border-radius: 999px; background: var(--cntx-bg-tint); }
.filters button {
  border: 0; cursor: pointer; font: 600 13px var(--cntx-font-sans); color: var(--cntx-text-muted);
  padding: 8px 14px; border-radius: 999px; background: transparent; transition: background .2s, color .2s;
}
.filters button:hover { color: var(--cntx-text-primary); }
.filters button[aria-selected="true"] { background: var(--cntx-bg-surface); color: var(--cntx-text-primary); box-shadow: 0 4px 12px -6px rgba(12, 53, 56, .35); }
.filters button:focus-visible { outline: 2px solid var(--cntx-accent-warm); outline-offset: 2px; }
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.posts .post[hidden] { display: none; }
.posts-empty { text-align: center; color: var(--cntx-text-muted); padding: 32px 0; }
.posts-more { display: flex; justify-content: center; margin-top: 40px; }
.posts-more .btn svg, .blog-sec-head .btn svg { width: 16px; height: 16px; }

.blog-start { padding-top: 64px; }
.cta-plan { position: relative; z-index: 1; border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; background: rgba(255, 255, 255, .04); padding: 6px 16px; }
.cta-plan-h { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.cta-plan-h b { font: 600 14px var(--cntx-font-display); }
.cta-plan-h span { font-size: 12px; color: color-mix(in srgb, var(--cntx-text-on-inverse) 64%, transparent); }
.cta-plan-r { display: flex; align-items: center; gap: 12px; padding: 12px 0; font-size: 13.5px; }
.cta-plan-r + .cta-plan-r { border-top: 1px solid rgba(255, 255, 255, .07); }
.cta-plan-r i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cta-plan-r span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cta-plan-r em { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: color-mix(in srgb, var(--cntx-text-on-inverse) 80%, transparent); }
.d-warm { background: var(--cntx-accent-warm); }
.d-cyan { background: var(--cntx-accent-cyan); }
.d-brand { background: #F0A58A; }

/* Article */
.read-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 200; pointer-events: none; }
.read-progress i { display: block; height: 100%; background: var(--cntx-accent-warm); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.art-hero { padding: 36px 0 0; }
.art-hero .crumbs { align-items: center; }
.art-hero .crumbs svg { width: 14px; height: 14px; }
.art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: 13.5px; color: var(--cntx-text-muted); }
.art-meta > span:not(.tag) { display: inline-flex; align-items: center; gap: 6px; }
.art-meta svg { width: 15px; height: 15px; }
.art-hero h1 { font-size: clamp(34px, 4.6vw, 56px); max-width: 17em; margin: 18px 0 0; text-wrap: balance; }
.art-hero .lead { font-size: 19px; line-height: 1.55; color: var(--cntx-text-muted); max-width: 38em; margin: 18px 0 0; text-wrap: pretty; }
.art-author { display: flex; align-items: center; gap: 12px; margin-top: 24px; font-size: 14px; }
.art-author b { display: block; }
.art-author small { color: var(--cntx-text-muted); font-size: 13px; }
.art-cover { margin-top: 36px; aspect-ratio: 21 / 9; border-radius: 22px; box-shadow: 0 40px 70px -48px rgba(12, 53, 56, .6); }
.art-cover::after { width: 34%; border-width: 2.5px; }

/* Help article: breathe under lead, tighten before first H2 */
[data-page="help-article"] .art-hero { padding-bottom: 28px; }
[data-page="help-article"] .help-article-body { padding-top: 0; padding-bottom: 56px; }
[data-page="updates-single"] .updates-article-body { padding-bottom: 56px; }
[data-page="help-article"] .article-layout:has(> .art-aside) { margin-top: 20px; }
[data-page="help-article"] .article-body .help-prose > h2:first-child { margin-top: 0; }

.article-layout:has(> .art-aside) {
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 72px;
  margin-top: 56px;
  padding-bottom: 0;
  align-items: stretch;
}
.article-layout:has(> .art-aside) .article-body { max-width: 720px; font-size: 17.5px; line-height: 1.72; }
.article-layout:has(> .art-aside) .article-body > .inline-cta:last-child { margin-bottom: 0; }
.article-layout:has(> .art-aside) .article-body p { color: color-mix(in srgb, var(--cntx-text-primary) 84%, var(--cntx-bg-canvas)); margin: 0 0 18px; }
.article-layout:has(> .art-aside) .article-body h2 { font-size: 30px; margin: 56px 0 16px; scroll-margin-top: 96px; text-wrap: balance; }
.article-layout:has(> .art-aside) .article-body h2::before {
  content: ""; display: block; width: 28px; height: 3px; border-radius: 2px; background: var(--cntx-accent-warm); margin-bottom: 16px;
}
.article-layout:has(> .art-aside) .article-body h3 { font-size: 21px; margin: 32px 0 10px; scroll-margin-top: 96px; }

.tldr {
  padding: 22px 24px; border-radius: 18px;
  background: color-mix(in srgb, var(--cntx-accent-warm) 6%, var(--cntx-bg-surface));
  border: 1px solid color-mix(in srgb, var(--cntx-accent-warm) 22%, var(--cntx-border-default));
}
.tldr > b { display: inline-flex; align-items: center; gap: 8px; font: 600 13px var(--cntx-font-sans); letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--cntx-accent-warm) 78%, var(--cntx-text-primary)); }
.tldr > b svg { width: 16px; height: 16px; }
.tldr ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.tldr li { display: flex; gap: 10px; font-size: 15.5px; line-height: 1.5; }
.tldr li svg { width: 19px; height: 19px; flex: none; margin-top: 2px; color: var(--cntx-accent-warm); }

.pull { margin: 40px 0; padding: 28px 0; border-top: 1px solid var(--cntx-border-default); border-bottom: 1px solid var(--cntx-border-default); }
.pull svg { width: 30px; height: 30px; color: var(--cntx-accent-warm); fill: color-mix(in srgb, var(--cntx-accent-warm) 18%, transparent); }
.article-layout .article-body .pull p { margin: 10px 0 0; font: 600 clamp(22px, 2.4vw, 27px)/1.3 var(--cntx-font-display); letter-spacing: -0.02em; color: var(--cntx-text-primary); text-wrap: balance; }

.art-fig { margin: 36px 0; }
.art-fig .cover { aspect-ratio: 16 / 9; border-radius: 16px; }
.art-fig figcaption { display: flex; gap: 10px; margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: var(--cntx-text-muted); }
.art-fig figcaption::before { content: ""; flex: none; width: 16px; height: 2px; margin-top: 10px; background: var(--cntx-accent-warm); }

.article-body ol.art-steps { list-style: none; padding: 0; margin: 24px 0; counter-reset: st; display: grid; gap: 12px; }
.article-body ol.art-steps li { counter-increment: st; display: flex; gap: 14px; align-items: flex-start; color: var(--cntx-text-primary); font-size: 16.5px; }
.article-body ol.art-steps li::before {
  content: counter(st); flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font: 700 13px/1 var(--cntx-font-display); background: var(--cntx-bg-tint); color: var(--cntx-text-brand); margin-top: 1px;
}

.note-box { display: flex; gap: 14px; align-items: flex-start; margin: 28px 0; padding: 18px 20px; border-radius: 16px; background: var(--cntx-bg-tint); border: 1px solid var(--cntx-border-default); }
.note-box .note-ico { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--cntx-accent-warm) 16%, var(--cntx-bg-surface)); color: var(--cntx-accent-warm); }
.note-box .note-ico svg { width: 18px; height: 18px; }
.article-layout .article-body .note-box p { margin: 0; font-size: 15.5px; color: var(--cntx-text-primary); }

.inline-cta, .side-try { position: relative; overflow: hidden; isolation: isolate; background: var(--cntx-bg-inverse); color: var(--cntx-text-on-inverse); }
.inline-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; margin: 44px 0 8px; padding: 28px 30px; border-radius: 20px; }
.inline-cta > *:not(.geo) { position: relative; z-index: 1; }
.inline-cta .geo.arc { right: -160px; top: -170px; }
.inline-cta b { display: block; font: 600 21px/1.25 var(--cntx-font-display); letter-spacing: -0.015em; }
.article-layout .article-body .inline-cta p { margin: 6px 0 0; font-size: 14.5px; color: color-mix(in srgb, var(--cntx-text-on-inverse) 74%, transparent); }
.inline-cta-actions { display: flex; gap: 8px; flex-wrap: wrap; }
html[data-skin] .inline-cta .btn-p, html[data-skin] .side-try .btn-p { background: var(--cntx-accent-warm); border-color: var(--cntx-accent-warm); color: #fff; }
html[data-skin] .inline-cta .btn-p:hover, html[data-skin] .side-try .btn-p:hover { background: color-mix(in srgb, var(--cntx-accent-warm) 86%, #fff); border-color: color-mix(in srgb, var(--cntx-accent-warm) 86%, #fff); }
html[data-skin] .inline-cta .btn:not(.btn-p) { background: transparent; color: #fff; border-color: color-mix(in srgb, #fff 32%, transparent); }
html[data-skin] .inline-cta .btn:not(.btn-p):hover { background: color-mix(in srgb, #fff 10%, transparent); }

.art-tags { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--cntx-border-default); }
.art-tags .tags { display: flex; flex-wrap: wrap; gap: 8px; }
.share { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cntx-text-muted); }
.share-btn {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; padding: 0;
  background: var(--cntx-bg-surface); color: var(--cntx-text-primary); border: 1px solid var(--cntx-border-default);
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.share-btn svg { width: 16px; height: 16px; }
.share-btn:hover { background: var(--cntx-action-primary); border-color: var(--cntx-action-primary); color: #fff; transform: translateY(-2px); }
.share-btn.is-copied { background: var(--cntx-accent-warm); border-color: var(--cntx-accent-warm); color: #fff; }

.article-layout:has(> .art-aside) .author-card { gap: 20px; padding: 24px; border-radius: 20px; margin-top: 32px; }
.author-card .av.av-xl { width: 64px; height: 64px; }
.author-card .av.av-warm { background: color-mix(in srgb, var(--cntx-accent-warm) 16%, var(--cntx-bg-surface)); color: color-mix(in srgb, var(--cntx-accent-warm) 72%, var(--cntx-text-primary)); }
.author-card > div > b { font: 600 17px var(--cntx-font-display); }
.article-layout .article-body .author-card .author-role { margin: 2px 0 10px; font-size: 13px; color: var(--cntx-text-muted); }
.article-layout .article-body .author-card p { font-size: 14.5px; line-height: 1.6; margin: 0; color: var(--cntx-text-muted); }
.author-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13.5px; font-weight: 600; color: var(--cntx-text-brand); text-decoration: none; }
.author-link svg { width: 15px; height: 15px; transition: transform .2s; }
.author-link:hover svg { transform: translateX(3px); }

.art-aside {
  align-self: stretch; min-width: 0;
  display: flex; flex-direction: column; gap: 16px;
}
.art-aside-sticky {
  position: sticky;
  top: 88px;
  display: grid; gap: 16px;
  align-self: start;
  width: 100%;
}
/* Blog only: side-try outside sticky — push toward column bottom */
[data-page="blog-article"] .art-aside > .side-try { margin-top: auto; }
.side-box { padding: 18px 20px; border-radius: 18px; background: var(--cntx-bg-surface); border: 1px solid var(--cntx-border-default); }
.art-aside .toc { position: static; }
.side-box > b { display: flex; align-items: center; gap: 8px; font: 600 12px var(--cntx-font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--cntx-text-muted); margin-bottom: 10px; }
.side-box > b svg { width: 15px; height: 15px; }
[data-toc] a { position: relative; display: block; padding: 7px 0 7px 16px; font-size: 14px; line-height: 1.35; color: var(--cntx-text-muted); text-decoration: none; transition: color .2s; }
[data-toc] a::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--cntx-border-strong); transition: background .2s, transform .2s; }
[data-toc] a:hover { color: var(--cntx-text-primary); }
[data-toc] a.is-active { color: var(--cntx-text-primary); font-weight: 600; }
[data-toc] a.is-active::before { background: var(--cntx-accent-warm); transform: scale(1.35); }
.side-box.side-try { background: var(--cntx-bg-inverse); border-color: transparent; }
.side-try > *:not(.geo) { position: relative; z-index: 1; }
.side-try .geo.dots { top: 14px; right: 14px; width: 48px; height: 60px; }
.side-try > b { display: block; font: 600 19px/1.2 var(--cntx-font-display); letter-spacing: -0.015em; text-transform: none; color: var(--cntx-text-on-inverse); margin: 0; }
.side-try p { margin: 8px 0 16px; font-size: 13.5px; line-height: 1.5; color: color-mix(in srgb, var(--cntx-text-on-inverse) 74%, transparent); max-width: 20em; }
.side-try .btn { width: 100%; box-sizing: border-box; justify-content: center; }
.side-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--cntx-text-on-inverse); text-decoration: none; }
.side-link svg { width: 14px; height: 14px; transition: transform .2s; }
.side-link:hover svg { transform: translateX(3px); }
.side-share p { margin: 0 0 12px; font-size: 13.5px; color: var(--cntx-text-muted); }
.side-share > b { text-transform: none; letter-spacing: 0; font: 600 15px var(--cntx-font-display); color: var(--cntx-text-primary); margin-bottom: 4px; }
.side-share > b svg { color: var(--cntx-accent-warm); }

.toc-m { display: none; }

html[data-skin][data-theme="dark"] .inline-cta .btn-p, html[data-skin][data-theme="dark"] .side-try .btn-p { background: var(--cntx-accent-cyan); border-color: var(--cntx-accent-cyan); color: #06201F; }
html[data-theme="dark"] .inline-cta, html[data-theme="dark"] .side-try { border: 1px solid var(--cntx-border-default); }
html[data-theme="dark"] .cover img { filter: saturate(.7) brightness(.86); }

@media (max-width: 1100px) {
  .blog-hero-grid, .featured { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .starter { max-width: 560px; }
  .themes, .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-layout:has(> .art-aside) { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 32px; }
  .art-aside { position: static; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .art-aside-sticky { position: static; display: grid; gap: 16px; }
  .art-aside-sticky > .side-box:not(.side-try) { display: none; }
  /* When aside stacks under the body, keep the stylized inline-cta only */
  .article-layout:has(.inline-cta) .art-aside .side-try { display: none; }
  [data-page="blog-article"] .art-aside > .side-try { margin-top: 0; }
  .toc-m { display: block; margin-top: 28px; border: 1px solid var(--cntx-border-default); border-radius: 14px; background: var(--cntx-bg-surface); }
  .toc-m summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; list-style: none; font-weight: 600; font-size: 14.5px; }
  .toc-m summary::-webkit-details-marker { display: none; }
  .toc-m summary svg { width: 17px; height: 17px; }
  .toc-m summary svg:last-child { margin-left: auto; transition: transform .2s; }
  .toc-m[open] summary svg:last-child { transform: rotate(180deg); }
  .toc-m nav { padding: 0 16px 12px; }
}
@media (max-width: 760px) {
  .blog-hero { padding: 40px 0 20px; }
  .blog-hero + .blog-sec { padding-top: 28px; }
  .blog-hero .skin-dots { display: none; }
  .blog-sec { padding: 56px 0; }
  .themes, .posts { grid-template-columns: minmax(0, 1fr); }
  .post-row .cover { width: 36%; }
  .post-row { padding-right: 12px; }
  .post-row > div { min-width: 0; }
  .post-row .tag,
  .cover-tag {
    max-width: 100%;
    white-space: normal;
    line-height: 1.25;
    height: auto;
    box-sizing: border-box;
    overflow-wrap: anywhere;
  }
  .cover-tag { max-width: calc(100% - 24px); }
  .blog-sec-head {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin-bottom: 22px;
  }
  .filters {
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px;
  }
  .filters::-webkit-scrollbar { display: none; }
  .filters button {
    flex: 0 0 auto;
    max-width: 11.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .blog-search { padding-left: 40px; }
  .blog-search .btn { padding-inline: 14px; }
  .art-cover { aspect-ratio: 16 / 10; border-radius: 16px; margin-top: 28px; }
  .art-hero h1 { font-size: 32px; }
  .art-hero .lead { font-size: 17px; }
  .article-layout:has(> .art-aside) .article-body { font-size: 16.5px; }
  .article-layout:has(> .art-aside) .article-body h2 { font-size: 25px; margin-top: 44px; }
  .inline-cta { grid-template-columns: minmax(0, 1fr); padding: 24px 22px; }
  .blog-start .card { grid-template-columns: minmax(0, 1fr); }
  html[data-skin] .blog-start .mini-col { padding-left: 0; }
  html[data-skin] .blog-start .mini-col > .geo.dots { display: none; }
  .article-layout:has(> .art-aside) .author-card { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .post, .theme, .cover img, .share-btn { transition: none; }
  .post:hover, .theme:hover { transform: none; }
  .post:hover .cover img { transform: none; }
}

/* Header: tablet range */
@media (max-width: 1180px) {
  .nav .right .ghost, .nav .right .btn:not(.btn-p), .nav .right .deco-toggle { display: none; }
}
@media (max-width: 980px) {
  .nav .nav-links { display: none; }
  .nav .menu { display: block !important; }
}

/* Covers Q-Bis (blog-covers.html Q1–Q6): quarter tiles (multiply) + green colour wash + grain */
.cover.q { background: #111; }
.cover.q::before, .cover.q::after { display: none; }
.cover.q img { filter: saturate(1.05) contrast(1.02); }
.cover.q .ov { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: multiply; opacity: .9; }
.cover.q .ov svg { width: 100%; height: 100%; display: block; }
.cover.q .wash { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: #025964; opacity: .38; mix-blend-mode: color; }
.cover.q .noise {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: .22; mix-blend-mode: overlay;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0px, rgba(0,0,0,.035) 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0px, rgba(255,255,255,.02) 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 5px);
}
.cover.q .cover-tag { z-index: 5; }
.cover.q .ov svg { transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.post:hover .cover.q .ov svg { transform: scale(1.045); }
html[data-theme="dark"] .cover.q img { filter: saturate(.95) brightness(.9); }

/* ===== Updates feed + Help guides ===== */
.upd-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 880px; }
.upd-feed > li[hidden] { display: none; }
.upd-card {
  display: grid; grid-template-columns: 120px 18px minmax(0, 1fr); gap: 8px 16px; align-items: start;
  padding: 18px 20px; border-radius: 18px; text-decoration: none; color: inherit;
  background: var(--cntx-bg-surface); border: 1px solid var(--cntx-border-default);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), border-color .2s, box-shadow .3s;
}
.upd-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--cntx-accent-warm) 32%, var(--cntx-border-default));
  box-shadow: 0 20px 40px -28px rgba(12, 53, 56, .45);
}
.upd-card:hover h2 { color: var(--cntx-text-brand); }
.upd-card time { font-size: 13px; font-weight: 600; color: var(--cntx-text-muted); padding-top: 4px; font-variant-numeric: tabular-nums; }
.upd-rail { display: flex; justify-content: center; padding-top: 8px; }
.upd-rail i { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, var(--cntx-accent-warm) 12%, transparent); }
.upd-rail .d-cyan { box-shadow: 0 0 0 4px color-mix(in srgb, var(--cntx-accent-cyan) 14%, transparent); }
.upd-rail .d-brand { box-shadow: 0 0 0 4px color-mix(in srgb, var(--cntx-text-brand) 12%, transparent); }
.upd-body { min-width: 0; }
.upd-body .tag { display: inline-flex; margin: 0 8px 10px 0; }
.upd-body .tag svg { width: 13px; height: 13px; }
.upd-body h2 { margin: 0; font: 600 20px/1.3 var(--cntx-font-display); letter-spacing: -0.015em; transition: color .2s; }
.upd-body p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--cntx-text-muted); }
.upd-card .read-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--cntx-accent-warm); }
.upd-card .read-more svg { width: 15px; height: 15px; transition: transform .2s; }
.upd-card:hover .read-more svg { transform: translateX(3px); }
.upd-month { list-style: none; }
.upd-pager { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 40px; }
.upd-pager .nav-links { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
.upd-page { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 600 13px var(--cntx-font-sans); color: var(--cntx-text-muted); }
.upd-page.is-on { background: var(--cntx-accent-warm); color: #fff; }

.help-latest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.help-guide {
  display: flex; gap: 16px; align-items: flex-start; padding: 18px; text-decoration: none; color: inherit;
  background: var(--cntx-bg-surface); border: 1px solid var(--cntx-border-default); border-radius: 18px;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), border-color .2s, box-shadow .3s;
}
.help-guide:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--cntx-accent-warm) 30%, var(--cntx-border-default));
  box-shadow: 0 18px 34px -26px rgba(12, 53, 56, .5);
}
.help-guide:hover h3 { color: var(--cntx-text-brand); }
.help-guide .theme-ico { width: 46px; height: 46px; border-radius: 13px; flex: none; display: grid; place-items: center; }
.help-guide .theme-ico.h-warm { background: color-mix(in srgb, var(--cntx-accent-warm) 14%, var(--cntx-bg-surface)); color: var(--cntx-accent-warm); }
.help-guide .theme-ico.h-cyan { background: color-mix(in srgb, var(--cntx-accent-cyan) 16%, var(--cntx-bg-surface)); color: var(--cntx-accent-cyan); }
.help-guide .theme-ico.h-brand { background: var(--cntx-bg-tint); color: var(--cntx-text-brand); }
.help-guide .theme-ico svg { width: 21px; height: 21px; }
.help-guide .tag { margin-bottom: 8px; }
.help-guide h3 { margin: 0; font: 600 17px/1.3 var(--cntx-font-display); letter-spacing: -0.012em; transition: color .2s; }
.help-guide p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--cntx-text-muted); }
.help-guide .post-meta { margin-top: 12px; display: flex; }

.help-meta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 40px 0 8px; }
.help-meta-card {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px;
  background: var(--cntx-bg-surface); border: 1px solid var(--cntx-border-default); border-radius: 16px;
}
.help-meta-card .theme-ico { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; }
.help-meta-card .theme-ico.h-warm { background: color-mix(in srgb, var(--cntx-accent-warm) 14%, var(--cntx-bg-surface)); color: var(--cntx-accent-warm); }
.help-meta-card .theme-ico.h-cyan { background: color-mix(in srgb, var(--cntx-accent-cyan) 16%, var(--cntx-bg-surface)); color: var(--cntx-accent-cyan); }
.help-meta-card .theme-ico.h-brand { background: var(--cntx-bg-tint); color: var(--cntx-text-brand); }
.help-meta-card .theme-ico svg { width: 18px; height: 18px; }
.help-meta-card b { display: block; font: 600 14px var(--cntx-font-display); margin-bottom: 4px; }
.help-meta-card p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--cntx-text-muted); }
.help-meta-card a { color: var(--cntx-text-brand); text-decoration: none; font-weight: 600; }
.help-meta-card a:hover { text-decoration: underline; }

@media (max-width: 1100px) {
  .help-latest, .help-meta-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .upd-card { grid-template-columns: 14px minmax(0, 1fr); gap: 10px 12px; padding: 16px; }
  .upd-card time { grid-column: 2; padding-top: 0; font-size: 12.5px; }
  .upd-rail { grid-row: 1 / span 3; padding-top: 6px; }
  .upd-body { grid-column: 2; }
  .upd-body h2 { font-size: 17px; }
}

/* ===== Pricing (warm) ===== */
.pricing-hero { padding-bottom: 8px; overflow: visible; }
.pricing-hero.geo-host,
.pricing-hero.band-hero-glow { overflow: visible; }
.pricing-hero .lead { max-width: 42em; }
.pricing-sec { padding: 28px 0 72px; }
.pricing-sec#plans { padding-top: 8px; }
.pricing-switch {
  position: sticky;
  top: var(--cntx-topbar-h, 76px);
  z-index: 40;
  margin: 0 0 20px;
  padding: 16px 0 14px;
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; text-align: center;
  scroll-margin-top: calc(var(--cntx-topbar-h, 76px) + 12px);
  background: var(--cntx-bg-canvas);
}
.pricing-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 0;
  align-items: stretch;
  /* Shared row tracks — equal section heights across the 4 cards */
  grid-template-rows: auto auto minmax(12rem, 1fr) auto auto;
}
.pricing-toggle {
  display: inline-flex; border: 1px solid var(--cntx-border-default); border-radius: 999px;
  padding: 4px; background: var(--cntx-bg-surface); margin: 0;
  box-shadow: 0 10px 28px -22px rgba(12, 53, 56, .4);
}
.pricing-toggle button {
  border: 0; background: transparent; padding: 9px 16px; border-radius: 999px;
  font: 600 14px var(--cntx-font-sans); color: var(--cntx-text-muted); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; transition: background .2s, color .2s;
}
.pricing-toggle button em {
  font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--cntx-accent-warm) 16%, var(--cntx-bg-surface));
  color: color-mix(in srgb, var(--cntx-accent-warm) 78%, var(--cntx-text-primary));
}
.pricing-toggle button.is-on {
  background: var(--cntx-action-primary); color: var(--cntx-text-on-action);
}
.pricing-toggle button.is-on em {
  background: color-mix(in srgb, #fff 22%, transparent); color: inherit;
}
html[data-skin="brand-warm-new"][data-theme="dark"] .pricing-toggle button.is-on {
  background: var(--cntx-accent-cyan); color: #06201F;
}
.pricing-commit {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  font-size: 13.5px; color: var(--cntx-text-muted);
}
.pricing-commit svg { width: 15px; height: 15px; color: var(--cntx-accent-warm); flex: none; }

.pricing-compare-sec { padding-top: 8px; padding-bottom: 56px; }
.price-card {
  position: relative; display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  background: var(--cntx-bg-surface); border: 1px solid var(--cntx-border-default);
  border-radius: 20px; padding: 22px 20px 20px;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), border-color .2s, box-shadow .3s;
}
.price-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--cntx-accent-warm) 28%, var(--cntx-border-default));
  box-shadow: 0 22px 40px -28px rgba(12, 53, 56, .45);
}
.price-card.is-featured {
  border-color: color-mix(in srgb, var(--cntx-accent-warm) 45%, var(--cntx-border-default));
  box-shadow: 0 24px 48px -28px color-mix(in srgb, var(--cntx-accent-warm) 35%, transparent);
}
.price-badge {
  position: absolute; top: -11px; right: 18px;
  font: 700 11px/1 var(--cntx-font-sans); letter-spacing: .04em; text-transform: uppercase;
  padding: 7px 10px; border-radius: 999px; background: var(--cntx-accent-warm); color: #fff;
}
.price-card-top {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 0;
  margin-bottom: 0;
  align-content: start;
}
.price-card-top .tag { margin-bottom: 12px; justify-self: start; width: max-content; }
.price-card h3 { margin: 0; font: 600 24px/1.15 var(--cntx-font-display); letter-spacing: -0.02em; }
.price-card .tagline {
  margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--cntx-text-muted);
  /* Fallback when subgrid unsupported — reserve ~4 lines so price rows stay aligned */
  min-height: 5.8em;
  overflow: visible;
}
.price-block {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 0;
  margin: 0; padding: 0 0 16px; border-bottom: 1px solid var(--cntx-border-default);
  min-height: 0;
  align-content: start;
}
.price-card .price {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  font: 600 40px/1 var(--cntx-font-display); letter-spacing: -0.035em; margin: 0;
  min-height: 50px; align-self: end;
}
.price-card .price s {
  font-size: 20px; font-weight: 600; color: var(--cntx-text-muted);
  text-decoration-thickness: 2px; text-decoration-color: color-mix(in srgb, var(--cntx-accent-warm) 70%, transparent);
}
.price-card .price small { font-size: 14px; font-weight: 500; color: var(--cntx-text-muted); }
.price-sub { margin: 8px 0 0; font-size: 13px; color: var(--cntx-text-muted); }
.price-sub s { color: var(--cntx-text-muted); }
.price-sub strong { color: var(--cntx-text-primary); font-weight: 600; }
.price-commit {
  display: inline-flex; margin: 10px 0 0; font-size: 12.5px; font-weight: 600;
  color: color-mix(in srgb, var(--cntx-accent-warm) 72%, var(--cntx-text-primary));
}
/* Reserve 2 lines so Solo/Pro empty seat-line matches Business/Agency add-on wrap */
.seat-line {
  margin: 4px 0 0; font-size: 12px; line-height: 1.35; color: var(--cntx-text-muted);
  min-height: calc(1.35em * 2);
}
.seat-line:empty { visibility: hidden; }
.seat-line strong { color: var(--cntx-text-primary); }
.billing-note {
  margin: 6px 0 0; font-size: 12.5px; line-height: 1.35; color: var(--cntx-text-primary); font-weight: 500;
  /* Reserve 2 lines across cards (taglines already equalized via subgrid/min-height) */
  min-height: calc(1.35em * 2); overflow: visible;
}
.price-subnote {
  margin: 10px 0 0; text-align: center; font-size: 12px; color: var(--cntx-text-muted); min-height: 0;
}
.price-card ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 11px; align-content: start; }
.price-card li {
  /* block+absolute keeps <strong>+text as one inline run (flex would split them) */
  display: block;
  position: relative;
  padding-left: 22px;
  font-size: 13.5px; line-height: 1.45; color: var(--cntx-text-primary);
  font-weight: 450;
}
.price-card li strong { font-weight: 550; color: var(--cntx-text-primary); }
/* Bullet pinned to first line — never vertically centered on wrapped copy */
.price-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.22em; /* optical align with first-line caps */
  width: 14px; height: 14px; border-radius: 50%;
  background:
    linear-gradient(var(--cntx-bg-surface), var(--cntx-bg-surface)) padding-box,
    linear-gradient(135deg, var(--cntx-accent-warm), var(--cntx-accent-cyan)) border-box;
  border: 1.5px solid transparent; box-sizing: border-box;
}
.price-card li.muted { color: var(--cntx-text-muted); }
.price-card li.muted::before {
  background: var(--cntx-bg-tint); border: 1.5px solid var(--cntx-border-default);
}
.price-card .btn { width: 100%; max-width: 100%; box-sizing: border-box; justify-content: center; margin-top: 16px; align-self: end; }

.pricing-addons {
  margin-top: 28px; border: 1px solid var(--cntx-border-default); border-radius: 16px;
  background: var(--cntx-bg-surface);
  /* keep radius without clipping head/title descenders */
  overflow: clip;
  overflow-clip-margin: 4px;
}
.pricing-addons-head {
  padding: 16px 18px; border-bottom: 1px solid var(--cntx-border-default);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--cntx-bg-tint);
  overflow: visible;
}
.pricing-addons-head strong {
  font: 650 14px/1.45 var(--cntx-font-display); color: var(--cntx-text-primary);
}
.pricing-addons-head span {
  font-size: 12px; line-height: 1.45; color: var(--cntx-text-muted); text-align: right;
}
.pricing-addons-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pricing-addon {
  padding: 16px 18px; border-right: 1px solid var(--cntx-border-default); min-height: 118px;
}
.pricing-addon:last-child { border-right: 0; }
.pricing-addon-kicker {
  font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cntx-text-muted); margin-bottom: 6px;
}
.pricing-addon-title {
  font-size: 13.5px; font-weight: 600; color: var(--cntx-text-primary); margin-bottom: 6px;
}
.pricing-addon-price-row {
  display: flex; align-items: baseline; gap: 3px; margin-bottom: 4px;
}
.pricing-addon-price {
  font: 750 20px/1 var(--cntx-font-display); letter-spacing: -.03em; color: var(--cntx-action-primary);
}
.pricing-addon-unit { font-size: 11.5px; color: var(--cntx-text-muted); }
.pricing-addon-note {
  margin: 0; font-size: 12px; line-height: 1.45; color: var(--cntx-text-muted);
}

.pricing-notes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px;
}
.pricing-note {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px;
  background: var(--cntx-bg-surface); border: 1px solid var(--cntx-border-default); border-radius: 16px;
}
.pricing-note .theme-ico {
  width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center;
}
.pricing-note .theme-ico.h-warm { background: color-mix(in srgb, var(--cntx-accent-warm) 14%, var(--cntx-bg-surface)); color: var(--cntx-accent-warm); }
.pricing-note .theme-ico.h-cyan { background: color-mix(in srgb, var(--cntx-accent-cyan) 16%, var(--cntx-bg-surface)); color: var(--cntx-accent-cyan); }
.pricing-note .theme-ico.h-brand { background: var(--cntx-bg-tint); color: var(--cntx-text-brand); }
.pricing-note .theme-ico svg { width: 18px; height: 18px; }
.pricing-note b { display: block; font: 600 14.5px var(--cntx-font-display); margin-bottom: 4px; }
.pricing-note p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--cntx-text-muted); }

.pricing-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.95fr); gap: 28px 40px; align-items: center;
}
/* Workflow steps — real text on the hero glow, no outer frame */
.pricing-wf { width: 100%; max-width: 520px; justify-self: end; }
/* Bento 3 / 3 / 2 like the source visual */
.pricing-wf-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px;
}
.pricing-wf-steps li {
  grid-column: span 2;
  display: flex; flex-direction: column; gap: 2px;
  min-height: 104px;
  padding: 10px 12px 12px; border-radius: 14px;
  border: 1px solid var(--cntx-border-default);
  background: color-mix(in srgb, var(--cntx-bg-surface) 78%, transparent);
}
.pricing-wf-steps li:nth-child(n + 7) { grid-column: span 3; }
.pricing-wf-steps .wf-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  margin-bottom: auto; padding-bottom: 6px;
}
.pricing-wf-steps .wf-n {
  font: 650 12px/1.4 var(--cntx-font-display); letter-spacing: .03em;
  color: var(--cntx-accent-cyan);
}
.pricing-wf-steps .wf-motif {
  width: 48px; height: 30px; flex: none;
  color: var(--cntx-accent-cyan);
}
.pricing-wf-steps b {
  font: 600 14.5px/1.25 var(--cntx-font-display); letter-spacing: -0.01em;
  color: var(--cntx-text-primary);
}
.pricing-wf-steps em {
  font-style: normal; font-size: 12.5px; line-height: 1.35; color: var(--cntx-text-muted);
}
.pricing-wf-steps li.is-key {
  border-color: transparent;
  background: linear-gradient(140deg, color-mix(in srgb, var(--cntx-accent-warm) 72%, #fff), var(--cntx-accent-warm));
  box-shadow: 0 18px 34px -24px color-mix(in srgb, var(--cntx-accent-warm) 70%, transparent);
}
.pricing-wf-steps li.is-key .wf-n,
.pricing-wf-steps li.is-key b { color: #2a1009; }
.pricing-wf-steps li.is-key em { color: color-mix(in srgb, #2a1009 72%, transparent); }
.pricing-wf-steps li.is-key .wf-motif { color: #fff; }
.pricing-wf-foot {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 14px 2px 0; padding-top: 12px;
  border-top: 1px solid var(--cntx-border-default);
  font-size: 13.5px; color: var(--cntx-text-muted);
}
.pricing-wf-foot span:first-child { font-weight: 600; color: var(--cntx-text-primary); }
/* Mobile: one-row slider driven by vertical page scroll (cntx-pricing-warm.js) */
@media (max-width: 760px) {
  .pricing-wf-steps {
    display: flex; gap: 10px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-behavior: auto;
    scrollbar-width: none;
  }
  .pricing-wf-steps::-webkit-scrollbar { display: none; }
  .pricing-wf-steps.is-manual { scroll-snap-type: x mandatory; }
  .pricing-wf-steps li,
  .pricing-wf-steps li:nth-child(n + 7) {
    flex: 0 0 66%; min-height: 0; scroll-snap-align: start;
  }
  .pricing-wf-foot { margin-top: 10px; padding-top: 10px; font-size: 12.5px; }
}

.compare-help {
  display: block; margin-top: 3px; font-size: 11.5px; font-weight: 400; line-height: 1.45; color: var(--cntx-text-muted);
}

.compare-acc {
  border: 1px solid var(--cntx-border-default); border-radius: 20px; background: var(--cntx-bg-surface);
  overflow: clip;
}
.compare-acc > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 24px; user-select: none;
}
.compare-acc > summary::-webkit-details-marker { display: none; }
.compare-acc > summary b { display: block; font: 600 20px/1.25 var(--cntx-font-display); letter-spacing: -0.015em; }
.compare-acc > summary small { display: block; margin-top: 4px; font-size: 14px; color: var(--cntx-text-muted); }
.compare-acc-hint {
  display: inline-flex; margin-top: 10px; font: 650 12.5px/1 var(--cntx-font-sans); font-style: normal;
  color: var(--cntx-action-primary);
  letter-spacing: .01em;
}
.compare-acc[open] .compare-acc-hint { display: none; }
.compare-acc > summary > svg {
  width: 22px; height: 22px; flex: none; color: var(--cntx-accent-warm);
  transition: transform .25s ease;
}
.compare-acc[open] > summary > svg { transform: rotate(180deg); }
.compare-acc > summary:hover { background: color-mix(in srgb, var(--cntx-accent-warm) 4%, transparent); }
.compare-wrap { padding: 0 12px 16px; overflow-x: auto; }
.compare-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0 2px 10px; padding: 12px 14px;
  border: 1px solid var(--cntx-border-default); border-radius: 12px;
  background: color-mix(in srgb, var(--cntx-accent-cyan) 6%, var(--cntx-bg-tint));
}
.compare-top strong { display: block; font: 650 14.5px/1.3 var(--cntx-font-display); color: var(--cntx-text-primary); }
.compare-top span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--cntx-text-muted); line-height: 1.45; }
.compare { width: 100%; border-collapse: collapse; margin: 0; font-size: 13.5px; min-width: 720px; }
.compare th, .compare td { padding: 12px 14px; border-bottom: 1px solid var(--cntx-border-default); text-align: left; vertical-align: top; }
.compare th {
  font-weight: 600; background: color-mix(in srgb, var(--cntx-accent-warm) 6%, var(--cntx-bg-tint));
  position: sticky; top: 0;
}
.compare td { color: var(--cntx-text-muted); }
.compare td:first-child { color: var(--cntx-text-primary); font-weight: 500; width: 28%; }
.compare-group td {
  font: 700 11px/1 var(--cntx-font-sans); letter-spacing: .06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--cntx-accent-warm) 75%, var(--cntx-text-primary));
  background: color-mix(in srgb, var(--cntx-accent-warm) 5%, var(--cntx-bg-canvas));
  padding-top: 16px; padding-bottom: 10px; border-bottom-color: transparent;
}
.compare .yes { color: var(--cntx-action-primary); font-weight: 700; }
.compare .no { color: var(--cntx-text-muted); opacity: .55; }
.compare-pick { display: none; }

/* Product split blocks: equal cols on desktop, stack on mobile (no inline styles) */
.cntx-warm-shell .split.split-eq {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.cntx-warm-shell .split.split-spaced { margin-top: 40px; }
.cntx-warm-shell .split-title { font-size: 28px; }
.cntx-warm-shell .split-h3 {
  margin: 0 0 8px;
  font: 600 20px/1.25 var(--cntx-font-display);
  letter-spacing: -0.02em;
}
.cntx-warm-shell .split-note { margin: 0 0 20px; }
.cntx-warm-shell .tensions.tensions-stack {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: 28px;
}
.cntx-warm-shell .split-callout {
  margin-top: 28px;
  font-size: 17px;
  font-style: italic;
}
.cntx-warm-shell .feature-grid.feature-grid-stack {
  margin-top: 0;
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 760px) {
  section.pricing-compare-sec { overflow: visible; overflow-x: clip; }
  .compare-acc { overflow: visible; }
  .compare-acc > summary { padding: 18px 18px; }
  .compare-acc > summary b { font-size: 18px; }
  .cntx-warm-shell .split.split-eq {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  .cntx-warm-shell .split-title { font-size: 26px; }
  .compare-wrap { padding: 0 14px 18px; overflow: visible; }
  .compare-top { display: none; }
  .compare-pick {
    display: grid; gap: 12px; position: sticky; top: 76px; z-index: 2;
    margin: 0 -14px; padding: 12px 14px 14px;
    background: var(--cntx-bg-surface);
    border-bottom: 1px solid var(--cntx-border-default);
  }
  .compare-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .compare-tabs button {
    min-width: 0; padding: 9px 4px; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--cntx-border-strong, var(--cntx-border-default));
    background: transparent; color: var(--cntx-text-primary);
    font: 600 13px/1.1 var(--cntx-font-sans);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
  }
  .compare-tabs button[aria-pressed="true"] {
    border-color: var(--cntx-accent-warm);
    background: color-mix(in srgb, var(--cntx-accent-warm) 16%, var(--cntx-bg-surface));
    color: color-mix(in srgb, var(--cntx-accent-warm) 70%, var(--cntx-text-primary));
  }
  .compare-pick .btn { width: 100%; justify-content: center; }
  .compare-pick .btn[hidden] { display: none; }

  .compare, .compare tbody { display: block; min-width: 0; font-size: 14px; }
  .compare thead { display: none; }
  .compare tr {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    border-bottom: 1px solid var(--cntx-border-default);
  }
  .compare td { display: block; padding: 13px 0; border-bottom: 0; }
  .compare td:first-child { flex: 1 1 auto; width: auto; min-width: 0; }
  .compare td:not(:first-child):not([colspan]) { display: none; }
  .compare[data-show="1"] td:nth-child(2),
  .compare[data-show="2"] td:nth-child(3),
  .compare[data-show="3"] td:nth-child(4),
  .compare[data-show="4"] td:nth-child(5) {
    display: block; flex: 0 1 auto; max-width: 45%; text-align: right; color: var(--cntx-text-primary);
  }
  .compare tr.compare-group { border-bottom: 2px solid var(--cntx-text-primary); }
  .compare-group td {
    flex: 1 1 100%; padding: 24px 0 10px; background: transparent;
    font: 650 15px/1.25 var(--cntx-font-display); letter-spacing: -0.01em; text-transform: none;
    color: var(--cntx-text-primary);
  }
  .compare .yes {
    display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
    background: var(--cntx-text-primary); color: var(--cntx-bg-surface); font-size: 11px;
  }
}

.pricing-faq { display: grid; gap: 10px; max-width: none; }
.pricing-faq details {
  border: 1px solid var(--cntx-border-default); border-radius: 14px; background: var(--cntx-bg-surface);
  padding: 0 18px;
}
.pricing-faq summary {
  list-style: none; cursor: pointer; padding: 16px 0; font: 600 15.5px/1.35 var(--cntx-font-display);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.pricing-faq summary::-webkit-details-marker { display: none; }
.pricing-faq summary::after {
  content: ''; width: 10px; height: 10px; flex: none;
  border-right: 2px solid var(--cntx-accent-warm); border-bottom: 2px solid var(--cntx-accent-warm);
  transform: rotate(45deg); transition: transform .2s; margin-top: -4px;
}
.pricing-faq details[open] summary::after { transform: rotate(225deg); margin-top: 4px; }
.pricing-faq details p {
  margin: 0 0 16px; padding-top: 0; font-size: 14.5px; line-height: 1.55; color: var(--cntx-text-muted);
  border-top: 1px solid var(--cntx-border-default); padding-top: 12px;
}

@media (max-width: 1100px) {
  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Subgrid shared tracks only work for a single row of cards */
    grid-template-rows: none;
  }
  .price-card {
    grid-template-rows:
      auto /* top */
      auto /* price-block */
      1fr /* features */
      auto /* cta */
      auto /* subnote */;
    grid-row: auto;
  }
  .pricing-notes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .pricing-addons-grid { grid-template-columns: minmax(0, 1fr); }
  .pricing-addon { border-right: 0; border-bottom: 1px solid var(--cntx-border-default); }
  .pricing-addon:last-child { border-bottom: 0; }
  .pricing-addons-head { flex-direction: column; align-items: flex-start; }
  .pricing-addons-head span { text-align: left; }
}
@media (max-width: 980px) {
  .pricing-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .pricing-wf { max-width: none; justify-self: stretch; min-width: 0; }
}
@media (max-width: 760px) {
  .pricing-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
  .pricing-sec { padding: 28px 0 48px; }
  .price-card .tagline { min-height: 0; }
  .billing-note, .seat-line { min-height: 0; }
  .price-card-top, .price-block, .price-card { grid-template-rows: auto; }
  .price-card { display: flex; flex-direction: column; grid-row: auto; }
  .price-block { display: block; min-height: 0; }
  .price-card ul { flex: 1; }
  .pricing-switch { flex-direction: column; align-items: center; }
}

/* ==========================================================================
   Warm chrome remaps (LAST) — kill legacy violet leftovers from cntx-home /
   cntx-footer after those sheets. Tokens must win for WP topbar + footer.
   ========================================================================== */

:root,
[data-theme="light"] {
  --cntx-primary: var(--cntx-action-primary);
  --cntx-primary-strong: var(--cntx-action-primary-hover);
  --cntx-primary-soft: color-mix(in srgb, var(--cntx-action-primary) 12%, transparent);
  --cntx-secondary: var(--cntx-accent-warm);
  --cntx-accent: var(--cntx-accent-warm);
}

[data-theme="dark"] {
  --cntx-primary: var(--cntx-action-primary);
  --cntx-primary-strong: var(--cntx-action-primary-hover);
  --cntx-primary-soft: color-mix(in srgb, var(--cntx-action-primary) 20%, transparent);
  --cntx-secondary: var(--cntx-accent-warm);
  --cntx-accent: var(--cntx-accent-warm);
  /* Remap legacy home.v14 dark navy/violet surfaces used by chrome leftovers */
  --cntx-bg: var(--cntx-bg-canvas);
  --cntx-surface: var(--cntx-bg-surface);
  --cntx-border: var(--cntx-border-default);
  --cntx-neutral-900: var(--cntx-text-primary);
  --cntx-neutral-800: var(--cntx-text-primary);
  --cntx-neutral-700: var(--cntx-text-muted);
  --cntx-neutral-600: var(--cntx-text-muted);
  --cntx-neutral-500: var(--cntx-text-muted);
  --cntx-neutral-400: var(--cntx-text-muted);
}

/* Topbar: Sign in = plain text (mockup .ghost), not a pill button */
header.topbar .actions a.topbar-link {
  display: inline-flex;
  align-items: center;
  color: var(--cntx-text-muted);
  font: 500 14px Inter, system-ui, sans-serif;
  padding: 9px 6px;
  border: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  white-space: nowrap;
  text-decoration: none;
}
header.topbar .actions a.topbar-link:hover,
header.topbar .actions a.topbar-link:focus-visible {
  color: var(--cntx-text-primary);
  background: transparent;
  border: 0;
  box-shadow: none;
}
html[data-theme="dark"] header.topbar .actions a.topbar-link {
  color: var(--cntx-text-muted);
}
html[data-theme="dark"] header.topbar .actions a.topbar-link:hover,
html[data-theme="dark"] header.topbar .actions a.topbar-link:focus-visible {
  color: var(--cntx-text-primary);
}

/* Topbar: Get access + mega menu */
header.topbar .actions .btn-primary,
header.topbar a.btn-primary,
body .actions .btn-primary,
body a.btn-primary,
body .btn-primary {
  background: var(--cntx-action-primary);
  color: var(--cntx-text-on-action, #fff);
  box-shadow: none;
}
header.topbar .actions .btn-primary:hover,
header.topbar a.btn-primary:hover,
body .actions .btn-primary:hover,
body a.btn-primary:hover,
body .btn-primary:hover {
  background: var(--cntx-action-primary-hover);
}

/* Mega-menu panel — surface + border-default; dark = petroleum, never purple tint */
header.topbar .nav-dropdown,
header.topbar .nav-dropdown.nav-dropdown--mega {
  background: var(--cntx-bg-surface) !important;
  border: 1px solid var(--cntx-border-default) !important;
  box-shadow: var(--cntx-elevation-overlay, 0 18px 48px -20px color-mix(in srgb, var(--cntx-text-primary) 22%, transparent));
}
html[data-theme="dark"] header.topbar .nav-dropdown,
html[data-theme="dark"] header.topbar .nav-dropdown.nav-dropdown--mega {
  background: var(--cntx-bg-surface) !important;
  border-color: var(--cntx-border-default) !important;
  box-shadow: 0 18px 48px -16px rgba(0, 0, 0, 0.55);
}
header.topbar .nav-mega-card:hover {
  background: var(--cntx-bg-hover);
  border-color: var(--cntx-border-default);
}
header.topbar .nav-mega-card__cta {
  color: var(--cntx-action-primary);
}
header.topbar .nav-mega-card:hover .nav-mega-card__cta {
  color: var(--cntx-action-primary-hover);
}
header.topbar .nav-mega-card__icon {
  background: color-mix(in srgb, var(--cntx-action-primary) 14%, transparent);
  color: var(--cntx-action-primary);
}

/* Lang / theme prefs — kill violet + raise light-mode icon contrast */
.cntx-prefs-trigger,
[data-theme="light"] .cntx-prefs-trigger {
  color: var(--cntx-text-primary);
  border-color: var(--cntx-border-default);
  background: var(--cntx-bg-surface);
}
.cntx-prefs-trigger i[data-lucide],
.cntx-prefs-trigger svg,
.cntx-theme-trigger-icon i[data-lucide],
.cntx-theme-trigger-icon svg,
[data-theme="light"] .cntx-prefs-trigger i[data-lucide],
[data-theme="light"] .cntx-prefs-trigger svg,
[data-theme="light"] .cntx-theme-trigger-icon i[data-lucide],
[data-theme="light"] .cntx-theme-trigger-icon svg {
  opacity: 1;
  color: var(--cntx-text-primary);
  stroke: currentColor;
}
.cntx-prefs-trigger:hover,
.cntx-prefs-dropdown.is-open .cntx-prefs-trigger {
  border-color: color-mix(in srgb, var(--cntx-action-primary) 45%, transparent);
  background: color-mix(in srgb, var(--cntx-action-primary) 8%, transparent);
}
/* Panel itself — home.v14 hardcodes purple navy rgba(18,20,36) in dark */
.cntx-prefs-menu,
[data-theme="dark"] .cntx-prefs-menu,
[data-theme="light"] .cntx-prefs-menu {
  background: var(--cntx-bg-surface) !important;
  border-color: var(--cntx-border-default) !important;
  box-shadow: 0 18px 48px color-mix(in srgb, var(--cntx-text-primary) 16%, transparent);
  backdrop-filter: none;
}
.cntx-prefs-menu__label,
[data-theme="dark"] .cntx-prefs-menu__label {
  color: var(--cntx-text-muted);
}
.cntx-prefs-option,
[data-theme="dark"] .cntx-prefs-option {
  color: var(--cntx-text-primary);
}
.cntx-prefs-option:hover {
  background: color-mix(in srgb, var(--cntx-action-primary) 8%, transparent);
}
.cntx-prefs-option.is-current {
  background: color-mix(in srgb, var(--cntx-action-primary) 10%, transparent);
}
.cntx-prefs-option.is-current .cntx-prefs-code {
  background: color-mix(in srgb, var(--cntx-action-primary) 16%, transparent);
  color: var(--cntx-action-primary);
}
.cntx-prefs-code,
[data-theme="dark"] .cntx-prefs-code {
  background: color-mix(in srgb, var(--cntx-text-primary) 8%, transparent);
  color: var(--cntx-text-muted);
}
.cntx-prefs-check,
[data-theme="dark"] .cntx-prefs-check {
  color: var(--cntx-text-primary);
}
[data-theme="dark"] .cntx-prefs-trigger:hover,
[data-theme="dark"] .cntx-prefs-dropdown.is-open .cntx-prefs-trigger {
  background: color-mix(in srgb, var(--cntx-action-primary) 16%, transparent);
  border-color: color-mix(in srgb, var(--cntx-action-primary) 45%, transparent);
}
[data-theme="dark"] .cntx-prefs-option:hover,
[data-theme="dark"] .cntx-prefs-option.is-current {
  background: color-mix(in srgb, var(--cntx-action-primary) 16%, transparent);
}
[data-theme="dark"] .cntx-prefs-option.is-current .cntx-prefs-code {
  background: color-mix(in srgb, var(--cntx-action-primary) 22%, transparent);
  color: var(--cntx-action-primary);
}

/* Footer — align to mockup footer-news / flat wrap (not cyan card / lavender ink) */
.site-footer {
  border-top: 1px solid var(--cntx-border-default);
  padding: 56px 0 40px;
}
.site-footer > .container {
  max-width: var(--container, 1140px);
}
[data-theme="light"] .site-footer__card,
.site-footer__card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  gap: 0;
}
[data-theme="dark"] .site-footer__card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* Newsletter = mockup .footer-news → light tint; dark = cyan/petroleum (not warm tint = marron) */
.site-footer__newsletter,
[data-theme="light"] .site-footer__newsletter {
  background: var(--cntx-bg-tint);
  border: 1px solid var(--cntx-border-default);
  border-radius: var(--cntx-radius-xl, 16px);
  padding: 24px;
  margin: 0 0 32px;
}
[data-theme="dark"] .site-footer__newsletter {
  background: color-mix(in srgb, var(--cntx-accent-cyan) 8%, var(--cntx-bg-surface));
  border: 1px solid var(--cntx-border-default);
  border-radius: var(--cntx-radius-xl, 16px);
  padding: 24px;
  margin: 0 0 32px;
}
/* Mail icon: petroleum/teal — never violet #7c3aed / lavender from cntx-footer */
.site-footer__newsletter-icon,
[data-theme="light"] .site-footer__newsletter-icon,
[data-theme="dark"] .site-footer__newsletter-icon {
  display: inline-flex !important;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--cntx-accent-cyan) 16%, var(--cntx-bg-surface)) !important;
  color: var(--cntx-text-brand, var(--cntx-accent-cyan)) !important;
}
.site-footer__newsletter-icon i,
.site-footer__newsletter-icon svg {
  width: 16px !important;
  height: 16px !important;
  color: inherit !important;
  stroke: currentColor;
}
.site-footer__newsletter-privacy {
  display: none;
}
.site-footer__newsletter-title {
  margin: 0 0 4px;
  font: 600 18px 'Inter Tight', Inter, system-ui, sans-serif;
  color: var(--cntx-text-primary);
  letter-spacing: -0.02em;
}
.site-footer__newsletter-desc {
  margin: 0;
  font-size: 14px;
  color: var(--cntx-text-muted);
}
.site-footer__newsletter-input {
  background: var(--cntx-bg-surface);
  border-color: var(--cntx-border-default);
  color: var(--cntx-text-primary);
}
.site-footer__newsletter-input::placeholder,
[data-theme="light"] .site-footer__newsletter-input::placeholder,
[data-theme="dark"] .site-footer__newsletter-input::placeholder {
  color: var(--cntx-text-muted);
  opacity: 1;
}
.site-footer__newsletter-input:focus {
  border-color: var(--cntx-action-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cntx-action-primary) 15%, transparent);
}
.site-footer__newsletter-submit {
  background: var(--cntx-action-primary);
  color: var(--cntx-text-on-action, #fff);
}
.site-footer__newsletter-submit:hover {
  background: var(--cntx-action-primary-hover);
  filter: none;
}

/* Brand + columns — warm text tokens, not #15122a / #3d3858 lavender */
.site-footer__grid {
  margin-top: 0;
}
.site-footer__logo,
[data-theme="light"] .site-footer__logo {
  color: var(--cntx-text-primary);
}
.site-footer__slogan,
[data-theme="light"] .site-footer__slogan {
  color: var(--cntx-text-primary);
  font: 600 18px 'Inter Tight', Inter, system-ui, sans-serif;
  letter-spacing: -0.02em;
}
.site-footer__desc,
[data-theme="light"] .site-footer__desc {
  color: var(--cntx-text-muted);
}
.site-footer__heading,
.site-footer__heading span,
[data-theme="light"] .site-footer__heading {
  color: var(--cntx-text-primary);
  font-size: 13px;
  font-weight: 600;
}
.site-footer__chevron {
  display: none;
}
.site-footer__list a,
[data-theme="light"] .site-footer__list a {
  color: var(--cntx-text-muted);
}
.site-footer__list a:hover {
  color: var(--cntx-text-primary);
}

/* LinkedIn = icon + label (lock size — legacy blog/footer cannot blow up font) */
.site-footer__socials,
.site-footer__accordion[open] > .site-footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.site-footer__social-btn,
[data-theme="light"] .site-footer__social-btn,
[data-theme="dark"] .site-footer__social-btn,
.cntx-warm-shell .site-footer__social-btn,
.cntx-warm-shell .author-social {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--cntx-text-muted) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
.site-footer__social-btn:hover,
[data-theme="light"] .site-footer__social-btn:hover,
[data-theme="dark"] .site-footer__social-btn:hover,
.cntx-warm-shell .author-social:hover {
  color: var(--cntx-text-primary) !important;
  background: transparent !important;
  border-color: transparent !important;
}
.site-footer__social-btn svg,
.site-footer__social-btn .cntx-icon,
.site-footer__social-btn i,
.cntx-warm-shell .author-social svg,
.cntx-warm-shell .author-social .cntx-icon,
.cntx-warm-shell .author-social i {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  flex: none !important;
  font-size: 16px !important;
}
.site-footer__social-btn__label {
  display: inline !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

.site-footer__bottom {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--cntx-border-default);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.site-footer__copy,
[data-theme="light"] .site-footer__copy,
[data-theme="dark"] .site-footer__copy {
  color: var(--cntx-text-muted) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}
.site-footer__copy .site-footer__operator,
.site-footer .site-footer__operator,
.site-footer__copy .site-footer__operator a,
.site-footer .site-footer__operator a {
  color: inherit !important;
}
.site-footer__copy .site-footer__operator a:hover,
.site-footer .site-footer__operator a:hover,
[data-theme="light"] .site-footer__copy .site-footer__operator a:hover,
[data-theme="light"] .site-footer .site-footer__operator a:hover {
  color: var(--cntx-text-primary) !important;
}
.site-footer__legal a,
[data-theme="light"] .site-footer__legal a,
[data-theme="dark"] .site-footer__legal a {
  color: var(--cntx-text-muted) !important;
  font-size: 13px;
}
.site-footer__legal a:hover,
[data-theme="light"] .site-footer__legal a:hover {
  color: var(--cntx-text-primary) !important;
}
/* Back to top — visible on light canvas (border + muted icon), not lavender wash */
.site-footer__top,
[data-theme="light"] .site-footer__top,
[data-theme="dark"] .site-footer__top {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-size: 12px !important;
  font-weight: 500;
  color: var(--cntx-text-muted) !important;
  text-decoration: none;
}
.site-footer__top:hover,
[data-theme="light"] .site-footer__top:hover {
  color: var(--cntx-text-primary) !important;
}
.site-footer__top-icon,
[data-theme="light"] .site-footer__top-icon,
[data-theme="dark"] .site-footer__top-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  border: 1px solid var(--cntx-border-default) !important;
  background: var(--cntx-bg-surface) !important;
  color: var(--cntx-text-muted) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
}
.site-footer__top:hover .site-footer__top-icon {
  border-color: color-mix(in srgb, var(--cntx-action-primary) 35%, var(--cntx-border-default)) !important;
  color: var(--cntx-text-primary) !important;
}
.site-footer__top-icon i,
.site-footer__top-icon svg {
  width: 14px !important;
  height: 14px !important;
  color: inherit !important;
}

/* ---- Warm QA: eyebrow / hero outcome / start / topbar (kill legacy lavender) ---- */

/* Product/page callouts — no navy/violet gradient from cntx-home.v14 */
.cntx-warm-shell .callout,
.callout {
  background: var(--cntx-bg-surface);
  border: 1px solid var(--cntx-border-default);
  box-shadow: none;
  color: var(--cntx-text-primary);
}
[data-theme="dark"] .cntx-warm-shell .callout,
[data-theme="dark"] .callout,
[data-theme="dark"] .callout-beta {
  background: var(--cntx-bg-surface) !important;
  border: 1px solid var(--cntx-border-default) !important;
  color: var(--cntx-text-primary);
}
[data-theme="dark"] .callout h3 {
  color: var(--cntx-text-primary);
}

/* Dark mega-menu links — muted petroleum, not lavender rgba(168,176,216) */
html[data-theme="dark"] header.topbar .nav-dropdown a,
html[data-theme="dark"] header.topbar .nav-mega-card,
html[data-theme="dark"] header.topbar .nav-mega-card__title,
html[data-theme="dark"] header.topbar .nav-mega-card__desc {
  color: var(--cntx-text-muted);
}
html[data-theme="dark"] header.topbar .nav-mega-card:hover .nav-mega-card__title,
html[data-theme="dark"] header.topbar .nav-mega-card.active .nav-mega-card__title {
  color: var(--cntx-text-primary);
}

/* Mockup eyebrow: plain uppercase + dash, NO blue/violet pill from cntx-home.v14 */
.cntx-warm-shell .eyebrow,
html[data-skin="brand-warm-new"] .cntx-warm-shell .eyebrow,
html[data-skin="brand-warm-new"] .eyebrow {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0;
  margin: 0;
  width: auto;
  max-width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--cntx-accent-warm);
}
.cntx-warm-shell .eyebrow::before,
html[data-skin="brand-warm-new"] .eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  margin-top: 0.55em; /* optically center on first line when text wraps */
  background: var(--cntx-accent-warm);
  border-radius: 1px;
  flex: none;
}
.cntx-warm-shell .eyebrow .dot {
  display: none;
}
html[data-theme="dark"] .cntx-warm-shell .eyebrow,
html[data-theme="dark"][data-skin="brand-warm-new"] .eyebrow {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--cntx-accent-warm);
}

/* Hero outcome — never legacy lavender */
.cntx-warm-shell .hero .outcome,
html[data-skin="brand-warm-new"] .cntx-warm-shell .hero .outcome {
  color: var(--cntx-text-primary);
}

/* Start CTA body — muted on-inverse, never purple */
.cntx-warm-shell .start p,
.cntx-warm-shell .start .card p,
html[data-skin="brand-warm-new"] .cntx-warm-shell .start p,
html[data-skin="brand-warm-new"] .cntx-warm-shell .start .card p {
  color: color-mix(in srgb, var(--cntx-text-on-inverse) 74%, transparent);
}

/* Dark topbar — DS canvas/muted/primary, no rgba(168,176,216) lavender */
/* Solid canvas (not frosted): legacy home.v14 dark topbar + body violet aurora
   used to bleed through any alpha/blur on the sticky bar. */
header.topbar {
  background: var(--cntx-bg-canvas);
  border-bottom-color: var(--cntx-border-default);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-theme="dark"] header.topbar {
  background: var(--cntx-bg-canvas);
  border-bottom-color: var(--cntx-border-default);
}
html[data-theme="dark"] header.topbar .nav,
html[data-theme="dark"] header.topbar .nav a,
html[data-theme="dark"] header.topbar .nav-dropdown-trigger {
  color: var(--cntx-text-muted);
}
html[data-theme="dark"] header.topbar .nav a:hover,
html[data-theme="dark"] header.topbar .nav a.active,
html[data-theme="dark"] header.topbar .nav-dropdown-wrap.is-active > .nav-dropdown-trigger,
html[data-theme="dark"] header.topbar .nav-dropdown-wrap.is-open .nav-dropdown-trigger,
html[data-theme="dark"] header.topbar .nav-dropdown-trigger:hover {
  color: var(--cntx-text-primary);
}
html[data-theme="dark"] header.topbar .nav a.active::after,
html[data-theme="dark"] header.topbar .nav-dropdown-wrap.is-active .nav-dropdown-trigger::after {
  background: var(--cntx-action-primary);
}

/* Reinforce dark band tint (cyan, not warm) after any later legacy sheets */
html[data-skin="brand-warm-new"][data-theme="dark"][data-look="bands"] .band-soft,
html[data-skin="brand-warm-new"][data-theme="dark"][data-look="bands"] .band-tint {
  background: color-mix(in srgb, var(--cntx-accent-cyan) 7%, var(--cntx-bg-surface));
}

/* Product warm shells — force band tokens (kill burgundy/purple leftovers) */
.cntx-warm-shell section.band-plain,
html[data-skin="brand-warm-new"] .cntx-warm-shell section.band-plain {
  background: var(--cntx-bg-surface) !important;
  border-top: 0 !important;
}
.cntx-warm-shell section.band-tint,
html[data-skin="brand-warm-new"] .cntx-warm-shell section.band-tint {
  background: var(--cntx-bg-tint) !important;
  border-top: 0 !important;
}
html[data-theme="dark"] .cntx-warm-shell section.band-plain,
html[data-skin="brand-warm-new"][data-theme="dark"] .cntx-warm-shell section.band-plain {
  background: color-mix(in srgb, var(--cntx-bg-surface) 42%, var(--cntx-bg-canvas)) !important;
}
html[data-theme="dark"] .cntx-warm-shell section.band-tint,
html[data-skin="brand-warm-new"][data-theme="dark"] .cntx-warm-shell section.band-tint {
  background: color-mix(in srgb, var(--cntx-accent-cyan) 7%, var(--cntx-bg-surface)) !important;
}

/* Product / page-hero chips — muted canvas, never violet primary */
.cntx-warm-shell .chip,
.cntx-warm-shell .pills .chip,
.cntx-warm-shell .page-hero .chip {
  background: var(--cntx-bg-canvas) !important;
  border: 1px solid var(--cntx-border-default) !important;
  color: var(--cntx-text-muted) !important;
  border-radius: 5px;
  box-shadow: none;
}

/* Help / updates / blog tags that still resolve via primary-soft violet */
.cntx-warm-shell .tag:not(.t-warm):not(.t-cyan):not(.t-brand),
.cntx-warm-shell .post-meta .tag,
.cntx-warm-shell .upd-tags .tag,
.cntx-warm-shell .help-guide .tag {
  background: var(--cntx-bg-tint);
  color: var(--cntx-text-brand);
  border: 1px solid var(--cntx-border-default);
}
.help-tag,
.help-chip {
  background: var(--cntx-bg-tint) !important;
  border-color: var(--cntx-border-default) !important;
  color: var(--cntx-text-brand) !important;
}

/* Product page hero mini-UI shots (replaces layer-visual) */
.cntx-warm-shell .product-hero-shot.hero-vis {
  margin-top: 48px;
}
.cntx-warm-shell .product-hero-shot.hero-vis--perf {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 900px) {
  .cntx-warm-shell .product-hero-shot.hero-vis--perf {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .cntx-warm-shell .product-hero-shot.hero-vis { margin-top: 32px; }
}

/* Compact proof mini-UI (Strategy / Intelligence) */
.cntx-warm-shell .product-proof-wrap {
  max-width: 520px;
}
.cntx-warm-shell .product-proof-shot .proof-flow .ax-row {
  align-items: center;
}
.cntx-warm-shell .product-proof-shot .ax-btn {
  margin-top: 12px;
}

/* Muted empty cover slot when no featured image */
.cntx-warm-shell .cover:not(:has(img)) {
  background: var(--cntx-bg-tint);
  min-height: 120px;
}

/* Mobile drawer — kill hard-coded violet glows from cntx-mobile-nav.v2 */
.mobile-drawer--premium {
  background:
    radial-gradient(ellipse 80% 50% at 10% 0%, color-mix(in srgb, var(--cntx-action-primary) 22%, transparent), transparent 55%),
    radial-gradient(ellipse 70% 45% at 90% 15%, color-mix(in srgb, var(--cntx-accent-cyan) 14%, transparent), transparent 50%),
    radial-gradient(ellipse 60% 40% at 50% 100%, color-mix(in srgb, var(--cntx-action-primary) 10%, transparent), transparent 55%),
    var(--cntx-bg-canvas, #070814);
}
[data-theme="light"] .mobile-drawer--premium {
  background:
    radial-gradient(ellipse 80% 50% at 10% 0%, color-mix(in srgb, var(--cntx-action-primary) 10%, transparent), transparent 55%),
    radial-gradient(ellipse 70% 45% at 90% 15%, color-mix(in srgb, var(--cntx-accent-cyan) 8%, transparent), transparent 50%),
    var(--cntx-bg-canvas, #f7f6fb);
}
.mobile-drawer--premium a.mobile-drawer__link.is-active {
  box-shadow: inset 0 -3px 0 0 var(--cntx-action-primary);
}
.mobile-theme-pill__btn.is-current,
.mobile-theme-pill__btn[aria-pressed="true"] {
  color: var(--cntx-text-on-action, #e9ecff);
  background: color-mix(in srgb, var(--cntx-action-primary) 22%, transparent);
}
[data-theme="light"] .mobile-theme-pill__btn.is-current,
[data-theme="light"] .mobile-theme-pill__btn[aria-pressed="true"] {
  color: var(--cntx-action-primary);
  background: color-mix(in srgb, var(--cntx-action-primary) 12%, transparent);
}
.mobile-lang-inline__item.is-current {
  color: var(--cntx-action-primary);
  border-color: var(--cntx-action-primary);
}
[data-theme="light"] .mobile-lang-inline__item.is-current {
  color: var(--cntx-action-primary);
}

/* Author archive warm — profile card + LinkedIn stay mockup-sized */
.cntx-warm-shell[data-page="author"] {
  padding-top: 28px;
}
.cntx-warm-shell[data-page="author"] .author-card {
  margin-top: 8px;
  align-items: flex-start;
}
.cntx-warm-shell[data-page="author"] .author-card .av.av-xl {
  width: 64px;
  height: 64px;
  font-size: 19px;
}
.cntx-warm-shell[data-page="author"] .author-social {
  margin-top: 14px;
}
.cntx-warm-shell[data-page="author"] .s {
  border-top: 0;
}
.cntx-warm-shell[data-page="author"] .posts {
  margin-top: 24px;
}