/* ============================================================
   ARMAKUNI CANONICAL COMPONENTS LAYER
   Nav · Footer · Hero BG canvas scaffold · Char-glow.
   Requires tokens.css + base.css loaded first.
   ============================================================ */

/* ================================
   NAV — glass pill, grid 3-col

   Scoped to the canonical site nav (aria-label="Main navigation") so the
   fixed-position glass-pill treatment doesn't leak into other <nav>
   elements on the page (notably <nav class="footer-legal-nav"
   aria-label="Legal"> inside the footer, which was being yanked to the
   top of the viewport on mobile because the bare `nav` selector matched
   it too — discovered 2026-05-22).
   ================================ */
nav[aria-label="Main navigation"], .nav {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  width: min(1060px, calc(100vw - 18px)); z-index: 1000; border-radius: 14px;
  /* 2026-05-08: slimmer nav. Border via the lighter --border token (0.04),
     padding tightens 12px -> 9px, radius 18px -> 14px, drop shadow softens.
     ~14% visual-height reduction; still reads glass-pill. */
  border: 1px solid var(--border); background: rgba(8,12,20,0.68);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 12px 28px rgba(0,0,0,0.22);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 20px; padding: 9px 14px;
}
.nav-logo, .nav-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-h); font-weight: 400; letter-spacing: 0.02em; font-size: 16px;
}
.nav-logo svg, .nav-brand svg { width: 22px; height: 22px; }
.brand-name { font-family: var(--f-h); font-weight: 200; font-size: 18px; letter-spacing: 0.02em; }

.nav-links { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; }
.nav-links a, .nav-link {
  font-family: var(--f-m); font-size: 11px; font-weight: 350;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-m);
  padding: 6px 12px; border-radius: 8px; position: relative;
  transition: color 0.25s var(--ease-default);
}
.nav-links a::after, .nav-link::after {
  content: ''; position: absolute; bottom: 2px; left: 12px; right: 12px; height: 1px;
  background: linear-gradient(90deg, var(--accent), var(--accent-cyan));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease-default);
}
.nav-links a:hover, .nav-link:hover { color: var(--text); }
.nav-links a:hover::after, .nav-link:hover::after { transform: scaleX(1); }

.nav-cta {
  font-family: var(--f-m); font-size: 11px; font-weight: 350;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 8px 16px; border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--accent-a26);
  background: linear-gradient(180deg, var(--accent-a18), var(--accent-a06));
  box-shadow: inset 0 0 12px 4px var(--accent-a06), 0 0 16px var(--accent-a04);
  color: var(--text); white-space: nowrap;
  transition: transform 350ms var(--ease-default), box-shadow 350ms var(--ease-default), border-color 350ms var(--ease-default);
}
.nav-cta:hover {
  border-color: var(--accent-a45);
  background: linear-gradient(180deg, var(--accent-a26), var(--accent-a12));
  box-shadow: inset 0 0 20px 6px var(--accent-a12), 0 0 32px var(--accent-a12);
  transform: translateY(-1px);
}

/* ================================
   FOOTER — 4-col grid + brand + bottom
   ================================ */
footer {
  border-top: 1px solid var(--border); padding: 60px 0 40px;
  position: relative; z-index: 2;
}
.footer-grid {
  display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px;
  max-width: 1120px; margin: 0 auto 48px; padding: 0 24px;
}
.footer-brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 4px 0; }
.footer-desc { font-size: 14px; color: var(--text-m); line-height: 1.6; }
.footer-col-heading {
  font-family: var(--f-m); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-m); margin-bottom: 16px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; margin: 0; }
.footer-col ul li a { font-size: 14px; color: var(--text-s); transition: color 0.25s var(--ease-default); }
.footer-col ul li a:hover { color: var(--text); }
.footer-bottom {
  border-top: 1px solid var(--border); padding: 24px 24px 0;
  max-width: 1120px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
}

.footer-bottom a { display: inline-block; padding: 6px 0; color: inherit; }
@media (max-width: 960px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 580px) {
  .footer-grid { grid-template-columns: 1fr; }
  .nav-links { display: none; }
}

/* ================================
   HERO BG CANVAS scaffold
   ================================ */
.hero { position: relative; overflow: hidden; }
.hero-bg-canvas {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none; display: block;
}
.hero-fade-left {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(5,5,12,0.8) 0%, rgba(5,5,12,0.4) 38%, transparent 72%);
}

/* ================================
   CHAR-GLOW letter-by-letter reveal (works with data-char-glow attribute)
   ================================ */
.char { display: inline; }
[data-char-glow] .char {
  display: inline; opacity: 0.2; color: var(--accent-bright); text-shadow: none;
  transition:
    opacity 0.5s var(--ease-glow, cubic-bezier(0.22, 1, 0.36, 1)),
    color 0.5s var(--ease-glow, cubic-bezier(0.22, 1, 0.36, 1)),
    text-shadow 0.5s var(--ease-glow, cubic-bezier(0.22, 1, 0.36, 1));
}
[data-char-glow] .char.lit {
  opacity: 1; color: var(--text);
  text-shadow: 0 0 12px color-mix(in srgb, var(--accent-bright) 60%, transparent),
               0 0 24px var(--accent-a18);
}
[data-char-glow] .char.settled {
  opacity: 1; color: var(--text); text-shadow: none;
  transition: text-shadow 0.6s var(--ease-glow, cubic-bezier(0.22, 1, 0.36, 1));
}

/* ================================
   CTA particle canvas scaffold
   ================================ */
.cta-section, .cta-sec { position: relative; overflow: hidden; }
.cta-section > *, .cta-sec > * { position: relative; z-index: 1; }
.cta-particle-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* ============================================================
   SECTION COMPONENTS (expanded 2026-04-24 for offering pages)
   ============================================================ */

.itr-section { padding: 96px 0; position: relative; }

.tm-sec { position: relative; overflow: hidden; padding: 88px 0 72px; }

/* Per-theme accent token + hero-canvas hue-rotate. Mirror of the
   rules in variant-shared.css and components-full.css. Lets each
   offering / solution / workshop tint its --accent and its inline
   plasma shader to match its data-theme. Keep the copies in sync. */
[data-theme="blue"]       { --accent: #2d62ff; --accent-bright: #7bc6ff; }
[data-theme="royal-blue"] { --accent: #1e40af; --accent-bright: #60a5fa; }
[data-theme="pink"]       { --accent: #dd23bb; --accent-bright: #f472b6; }
[data-theme="orange"]     { --accent: #C45D14; --accent-bright: #d4961e; }
[data-theme="green"]      { --accent: #95C11F; --accent-bright: #a3e635; }
[data-theme="cyan"]       { --accent: #009be5; --accent-bright: #67e8f9; }
/* deep-blue: true dark blue, distinct from cyan (data-engineering vs
   amazon-connect). Was indigo (#4338ca, hue 245°) which read purple;
   now Tailwind blue-900/500 (hue 224°/217°). */
[data-theme="deep-blue"]  { --accent: #1e3a8a; --accent-bright: #3b82f6; }
/* coral moved from #C2004B (dark crimson with hot-pink bright) to red
   so managed-services reads distinct from gen-ai pink. */
[data-theme="coral"]      { --accent: #6b0d0d; --accent-bright: #8a1717; }

/* Per-theme body background. Mirror of the rules in components-full.css.
   Each theme paints a 3-radial accent wash over a near-black gradient so
   the whole page reads in the offering's colour, not just the hero.
   Selector covers both shapes in the wild: data-theme on <html> and on
   <body>. The descendant form `[data-theme] body` paints the body when
   the attr lives on <html>; the bare `[data-theme]` form paints the
   element directly when the attr is on the same element. */
[data-theme="blue"], [data-theme="blue"] body             { background: radial-gradient(circle at 14% 12%,rgba(45,98,255,0.10),transparent 24%),radial-gradient(circle at 84% 18%,rgba(123,198,255,0.07),transparent 24%),radial-gradient(circle at 50% 80%,rgba(45,98,255,0.06),transparent 22%),linear-gradient(180deg,#04040a,#05050c 38%,#070c15 100%); }
[data-theme="royal-blue"], [data-theme="royal-blue"] body { background: radial-gradient(circle at 14% 12%,rgba(30,64,175,0.16),transparent 26%),radial-gradient(circle at 84% 18%,rgba(96,165,250,0.10),transparent 26%),radial-gradient(circle at 50% 80%,rgba(30,64,175,0.08),transparent 24%),linear-gradient(180deg,#03050f,#05060f 38%,#080a18 100%); }
[data-theme="pink"], [data-theme="pink"] body             { background: radial-gradient(circle at 14% 12%,rgba(221,35,187,0.12),transparent 24%),radial-gradient(circle at 84% 18%,rgba(0,155,229,0.07),transparent 24%),radial-gradient(circle at 50% 80%,rgba(221,35,187,0.07),transparent 22%),linear-gradient(180deg,#04040a,#05050c 38%,#070c15 100%); }
[data-theme="orange"], [data-theme="orange"] body         { background: radial-gradient(circle at 14% 12%,rgba(196,93,20,0.12),transparent 24%),radial-gradient(circle at 84% 18%,rgba(196,93,20,0.07),transparent 24%),radial-gradient(circle at 50% 80%,rgba(212,150,30,0.06),transparent 22%),linear-gradient(180deg,#04040a,#05050c 38%,#070c15 100%); }
[data-theme="green"], [data-theme="green"] body           { background: radial-gradient(circle at 14% 12%,rgba(149,193,31,0.10),transparent 24%),radial-gradient(circle at 84% 18%,rgba(149,193,31,0.06),transparent 24%),radial-gradient(circle at 50% 80%,rgba(149,193,31,0.05),transparent 22%),linear-gradient(180deg,#04040a,#05050c 38%,#070c15 100%); }
[data-theme="cyan"], [data-theme="cyan"] body             { background: radial-gradient(circle at 14% 12%,rgba(0,155,229,0.12),transparent 24%),radial-gradient(circle at 84% 18%,rgba(0,155,229,0.08),transparent 24%),radial-gradient(circle at 50% 80%,rgba(0,155,229,0.06),transparent 22%),linear-gradient(180deg,#04040a,#05050c 38%,#070c15 100%); }
[data-theme="deep-blue"], [data-theme="deep-blue"] body   { background: radial-gradient(circle at 14% 12%,rgba(30,58,138,0.16),transparent 26%),radial-gradient(circle at 84% 18%,rgba(59,130,246,0.10),transparent 26%),radial-gradient(circle at 50% 80%,rgba(30,58,138,0.08),transparent 24%),linear-gradient(180deg,#04040a,#05050c 38%,#070c15 100%); }
[data-theme="coral"], [data-theme="coral"] body           { background: radial-gradient(circle at 14% 12%,rgba(107,13,13,0.14),transparent 24%),radial-gradient(circle at 84% 18%,rgba(138,23,23,0.10),transparent 24%),radial-gradient(circle at 50% 80%,rgba(107,13,13,0.08),transparent 22%),linear-gradient(180deg,#04040a,#05050c 38%,#070c15 100%); }

/* Per-theme hue-rotate calibrated against the keeper shader baseline
   (~218 deg blue). Each rotation = target_theme_hue - 218.
   blue           226 -> 0 (filter:none)
   royal-blue     224 -> 0 + brightness(0.85) (deeper)
   deep-blue      196 -> -22
   cyan           199 -> -19
   pink           314 -> +96
   orange          24 -> +166
   green           78 -> -140 (or +220)
   coral          337 -> +119
*/
[data-theme="blue"]       :where(.hero-bg-canvas, .hero-fluid-canvas) { filter: none; }
[data-theme="royal-blue"] :where(.hero-bg-canvas, .hero-fluid-canvas) { filter: brightness(0.78) saturate(1.15); }
[data-theme="deep-blue"]  :where(.hero-bg-canvas, .hero-fluid-canvas) { filter: hue-rotate(-22deg) saturate(1.05); }
[data-theme="cyan"]       :where(.hero-bg-canvas, .hero-fluid-canvas) { filter: hue-rotate(-19deg) saturate(1.0); }
[data-theme="pink"]       :where(.hero-bg-canvas, .hero-fluid-canvas) { filter: hue-rotate(96deg) saturate(1.1); }
[data-theme="orange"]     :where(.hero-bg-canvas, .hero-fluid-canvas) { filter: hue-rotate(166deg) saturate(1.1); }
[data-theme="green"]      :where(.hero-bg-canvas, .hero-fluid-canvas) { filter: hue-rotate(-140deg) saturate(0.9); }
[data-theme="coral"]      :where(.hero-bg-canvas, .hero-fluid-canvas) { filter: hue-rotate(142deg) saturate(1.1); }

/* ============================================================
   TESTIMONIAL SPLIT-CARD CAROUSEL (canonical, 2026-05)
   data-design-system-component="testimonial-split-carousel"
   One wide card visible at a time, with prev / next slides
   peeking from each side. Two zones inside the active card:
     - Left panel: customer logo on a light tile + service
       eyebrow + Case study CTA, painted over a per-card radial
       gradient applied via the --card-gradient custom property.
     - Right panel: author name + role (uppercase Mono in cyan)
       + body quote (Inter 380 / 16 / 1.6, opacity 0.92).
   Below the stage: a centered row of dot indicators (active
   dot expands to a 24px pill).
   Behaviour (driven by a small per-section IIFE):
     - Auto-advance on a 6s timer, hover / focus pauses.
     - Side arrows (.tm-quote-arrow-side data-tmq-prev /
       data-tmq-next) and dot clicks restart the timer.
     - prefers-reduced-motion strips the slide transform and
       leaves a short opacity fade.
   Soft radial dim painted by .tm-quote-section::before so
   page-level bg animation reads quieter inside the section
   without feeling boxed-in.
   ============================================================ */
.tm-quote-section { padding: var(--space-section) 0; position: relative; z-index: 3; }
.tm-quote-section::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 65% 75% at center, rgba(8,12,20,0.72) 0%, rgba(8,12,20,0.35) 45%, rgba(8,12,20,0) 78%);
  pointer-events: none;
  z-index: 0;
}
.tm-quote-section > .wrap { position: relative; z-index: 1; }
.tm-quote-head { text-align: center; margin-bottom: 36px; }
.tm-quote-stage {
  position: relative;
  width: 100%; max-width: 1000px; margin: 0 auto;
  height: 440px;
  overflow: hidden;
  /* Specifyapp-style edge fade. The peeking prev/next slides taper to
     transparent toward the viewport edges so the carousel reads as
     continuous rather than hard clipped. 8%→3%: prior fade was wide
     enough that arrows parked inside the edge sat in the alpha-faded
     zone and ghosted out. */
  mask-image: linear-gradient(90deg, transparent 0%, black 3%, black 97%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 3%, black 97%, transparent 100%);
}
.tm-quote-arrow-side {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid rgba(123,198,255,0.55);
  background: rgba(13,17,28,0.96); color: var(--accent-bright);
  font-size: 22px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 5;
  transition: border-color 0.25s, background 0.25s, color 0.25s, transform 0.2s, box-shadow 0.25s;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.08);
}
.tm-quote-arrow-side:hover { border-color: var(--accent-bright); background: var(--accent-a18); color: var(--accent-bright); box-shadow: 0 8px 26px rgba(123,198,255,0.32); }
.tm-quote-arrow-side:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
.tm-quote-arrow-side:active { transform: translateY(-50%) scale(0.94); }
/* Push arrows inward into the gutter between the peek card and the active
   card. clamp() floors at 16px on tiny stages, ceilings at 56px on 1000px
   stages — always past the 3% mask alpha zone. */
.tm-quote-arrow-side[data-tmq-prev] { left: clamp(16px, 5.5%, 56px); }
.tm-quote-arrow-side[data-tmq-next] { right: clamp(16px, 5.5%, 56px); }
.tm-quote-card {
  position: absolute; top: 10px; left: 50%;
  width: clamp(560px, 70vw, 720px); height: 420px;
  display: grid; grid-template-columns: 280px 1fr;
  border-radius: 22px; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.045) 100%),
    rgba(13,17,28,0.55);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    0 28px 70px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.04),
    inset 0 1px 0 rgba(255,255,255,0.08);
  opacity: 0;
  transform: translateX(-50%);
  transition: transform 0.7s cubic-bezier(0.32, 0.72, 0.24, 1.06),
              opacity 0.5s var(--ease-default);
  pointer-events: none;
  will-change: transform, opacity;
}
.tm-quote-card.is-active { opacity: 1; transform: translateX(-50%); z-index: 3; pointer-events: auto; }
.tm-quote-card.is-prev { opacity: 0.42; transform: translateX(calc(-50% - 100% - 24px)); z-index: 2; }
.tm-quote-card.is-next { opacity: 0.42; transform: translateX(calc(-50% + 100% + 24px)); z-index: 2; }
.tm-quote-card-left {
  position: relative;
  padding: 36px 28px 28px;
  display: flex; flex-direction: column; align-items: center;
  background-image: var(--card-gradient, radial-gradient(60% 80% at 0% 0%, rgba(45,98,255,0.32) 0%, rgba(255,255,255,0) 70%));
  border-right: 1px solid var(--border);
}
.tm-quote-card-logo-wrap {
  flex: 1; width: 100%; display: flex; align-items: center; justify-content: center;
  min-height: 96px;
  padding: 14px 18px;
  /* No background. Customer logos are now white-on-dark variants and read
     directly on the card surface. The earlier white panel was needed back
     when full-color logos were inlined. */
}
.tm-quote-card-logo { max-height: 56px; max-width: 180px; object-fit: contain; }
.tm-quote-card-label {
  font-family: var(--f-m); font-weight: 500;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--text-s);
  margin: 24px 0 18px;
  text-align: center;
}
.tm-quote-card-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.94); color: rgb(13,17,28);
  padding: 8px 8px 8px 18px;
  border-radius: 999px;
  font-family: var(--f-b); font-weight: 500; font-size: 13px;
  text-decoration: none;
  transition: transform 0.2s var(--ease-default), background 0.2s var(--ease-default), box-shadow 0.2s var(--ease-default);
}
.tm-quote-card-cta:hover {
  background: var(--accent-bright); color: rgb(13,17,28);
  transform: translateX(2px);
  box-shadow: 0 0 24px rgba(123,198,255,0.32);
}
.tm-quote-card-cta-arrow {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgb(13,17,28); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; flex-shrink: 0;
}
.tm-quote-card-right { padding: 36px 36px 32px; display: flex; flex-direction: column; color: var(--text); min-width: 0; }

/* Optional headshot of the quote's attribution person. Sits inline-left
   of .tm-quote-card-name. Source: knowledge/assets/customer-photos/{slug}/...
   When present the head + name + role group reads as a single block.
   Hidden if the photo asset 404s (use loading="lazy" + onerror="this.remove()"). */
.tm-quote-attrib {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 4px;
}
.tm-quote-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--accent-bright, #7bc6ff) 30%, transparent);
  background: var(--surface-2, rgba(255,255,255,0.04));
}
.tm-quote-attrib-text { min-width: 0; }

.tm-quote-card-name {
  font-family: var(--f-b); font-weight: 500;
  font-size: 17px; line-height: 1.3;
  color: var(--text); margin: 0;
}
.tm-quote-card-role {
  font-family: var(--f-m); font-weight: 400;
  font-size: 11px; line-height: 1.4;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--accent-cyan);
  margin: 6px 0 28px;
}
/* When the avatar group is used, the role's bottom-margin already comes
   from the surrounding flow, so collapse the legacy 6/28 spacing. */
.tm-quote-attrib + .tm-quote-card-body { margin-top: 28px; }
.tm-quote-attrib .tm-quote-card-name { margin: 0; }
.tm-quote-attrib .tm-quote-card-role { margin: 4px 0 0; }
.tm-quote-card-body {
  font-family: var(--f-b); font-weight: 380;
  font-size: 16px; line-height: 1.6; letter-spacing: 0;
  color: var(--text); opacity: 0.92;
  margin: 0;
}
.tm-quote-dots { display: flex; justify-content: center; gap: 4px; margin-top: 24px; }
.tm-quote-dot {
  width: 8px; height: 8px;
  border-radius: 50%; border: 0;
  /* Padding adds a transparent hit zone around each 8px dot so the
     tap target is ~24px without inflating the visible dot.
     Use `background-color` (longhand) on every state — the `background`
     shorthand resets background-clip back to border-box and inflates the
     paint to the full 24px hit-target. */
  padding: 8px;
  background-clip: content-box;
  box-sizing: content-box;
  background-color: rgba(255,255,255,0.42);
  cursor: pointer;
  transition: background-color 0.25s var(--ease-default), width 0.3s var(--ease-default), border-radius 0.3s var(--ease-default);
}
.tm-quote-dot:hover:not(.is-active) { background-color: rgba(255,255,255,0.65); }
.tm-quote-dot:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
/* border-radius must exceed `padding` (8px) so the inset content-box corners
   stay rounded. 4px clamps the inset to 0 and paints a sharp rectangle. */
.tm-quote-dot.is-active { background-color: var(--accent-bright); width: 20px; border-radius: 999px; }
@media (max-width: 760px) {
  .tm-quote-stage { height: auto; min-height: 580px; touch-action: pan-y pinch-zoom; }
  .tm-quote-card {
    /* Override clamp(560px,70vw,720px) — that floor is wider than mobile
       viewports and was getting clipped by the stage's overflow-hidden,
       chopping the card visibly in half. 86vw leaves room for the stage's
       wrap-padding so the card never overflows + gets clipped on the edge. */
    width: min(86vw, 560px); height: auto; min-height: 560px;
    grid-template-columns: 1fr; grid-template-rows: auto 1fr;
  }
  .tm-quote-card.is-prev { transform: translateX(calc(-50% - 100% - 12px)); }
  .tm-quote-card.is-next { transform: translateX(calc(-50% + 100% + 12px)); }
  .tm-quote-card-left { padding: 28px 24px; border-right: 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
  .tm-quote-card-right { padding: 28px 24px; }
  .tm-quote-card-logo { max-height: 44px; max-width: 140px; }
  .tm-quote-arrow-side { width: 38px; height: 38px; font-size: 14px; }
  .tm-quote-arrow-side[data-tmq-prev] { left: clamp(8px, 4%, 28px); }
  .tm-quote-arrow-side[data-tmq-next] { right: clamp(8px, 4%, 28px); }
}
@media (prefers-reduced-motion: reduce) {
  .tm-quote-card { transition: opacity 0.2s linear; transform: none; }
  .tm-quote-card.is-active { transform: none; }
}

/* ============================================================
   CASE-STUDY HORIZONTAL SCROLLER (canonical, 2026-05)
   data-design-system-component="case-study-scroller"
   Heading row + prev/next arrows on top, horizontal scroll-snap
   rail of compact case-study cards, More-customer-stories CTA
   below. Mirror of the rules in variant-shared.css; keep in sync.
   ============================================================ */
.cs-scroller-section { padding: 96px 0; position: relative; z-index: 3; }
.cs-scroller-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; margin-bottom: 32px;
}
.cs-scroller-nav { display: inline-flex; gap: 10px; align-items: center; flex-shrink: 0; }
.cs-scroller-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border-h); background: rgba(13,17,28,0.85); color: var(--text);
  font-size: 17px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color 0.25s, background 0.25s, color 0.25s, opacity 0.25s, transform 0.2s;
}
.cs-scroller-arrow:hover { border-color: var(--accent-bright); background: var(--accent-a18); color: var(--accent-bright); }
.cs-scroller-arrow:active { transform: scale(0.95); }
.cs-scroller-arrow:disabled { opacity: 0.32; cursor: not-allowed; }
.cs-scroller-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(240px, 22vw, 300px);
  gap: 16px; overflow-x: auto;
  scroll-snap-type: x mandatory; padding: 4px 0 16px;
  -ms-overflow-style: none; scrollbar-width: none;
  scroll-behavior: smooth;
}
.cs-scroller-rail::-webkit-scrollbar { display: none; }
.cs-scroller-card {
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 18px;
  padding: 32px 28px;
  background: linear-gradient(180deg, rgba(13,17,28,0.94), rgba(8,11,20,0.94));
  border: 1px solid var(--border-h); border-radius: var(--r-md);
  text-decoration: none; color: inherit;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  min-height: 240px; justify-content: space-between;
  isolation: isolate;
  position: relative; z-index: 1;
}
.cs-scroller-card:hover {
  border-color: var(--accent-a45); transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.32), 0 0 0 1px var(--accent-a18);
}
.cs-scroller-logo { display: flex; align-items: center; min-height: 32px; }
.cs-scroller-logo img {
  height: 24px; width: auto; max-width: 132px; object-fit: contain;
  opacity: 0.9; filter: brightness(1) contrast(0.95);
}
.cs-scroller-logo-text {
  font-family: var(--f-h, sans-serif); font-weight: 300; font-size: 11px;
  line-height: 1.3; color: var(--text-s, rgba(235,241,251,0.72));
}
.cs-scroller-headline {
  font-family: var(--f-h); font-weight: 300;
  font-size: 17px; line-height: 1.4; color: var(--text);
  margin: 0;
}
.cs-scroller-headline strong { color: var(--text); font-weight: 400; } /* brand rule: headline text never themed */
.cs-scroller-link {
  font-family: var(--f-m); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-bright);
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto;
}
.cs-scroller-card:hover .cs-scroller-link { color: var(--text); }
.cs-scroller-more {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-m); font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--accent-cyan);
  padding: 14px 22px; border-radius: 999px;
  border: 1px solid var(--accent-a26);
  background: var(--accent-a06);
  text-decoration: none;
  transition: border-color 0.25s, background 0.25s, color 0.25s, transform 0.25s;
}
.cs-scroller-more:hover { border-color: var(--accent-bright); background: var(--accent-a18); color: var(--accent-bright); transform: translateY(-1px); }

/* ============================================================
   TESTIMONIAL RAIL — workshop / solution proof (modal pattern)
   data-design-system-component="testimonial-rail"
   Continuously auto-scrolling rail of compact testimonial cards.
   Two duplicate sets inside .tm-rail-track loop cleanly via the
   tmRailScroll keyframe. Hover pauses; reduced-motion stops.
   Mirror of variant-shared.css; keep in sync.
   ============================================================ */
.tm-rail-section { padding: 96px 0; position: relative; z-index: 3; }
.tm-rail-viewport {
  width: 100%; overflow: hidden;
  margin-left: calc(-50vw + 50%); width: 100vw;
  mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
}
.tm-rail-track {
  display: flex; gap: 18px; padding: 12px 0;
  width: max-content;
  animation: tmRailScroll 60s linear infinite;
  will-change: transform;
}
.tm-rail-section:hover .tm-rail-track { animation-play-state: paused; }
@keyframes tmRailScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .tm-rail-track { animation: none; }
  /* Customer-logo marquee — pause infinite scroll for users who request
     reduced motion. Strip stops mid-flight; logos remain fully readable. */
  .logo-marquee-track { animation: none; }
}
.tm-rail-card {
  flex: 0 0 clamp(300px, 26vw, 380px);
  display: flex; flex-direction: column; gap: 16px;
  padding: 26px 24px;
  background: linear-gradient(180deg, rgba(13,17,28,0.96), rgba(8,11,20,0.96));
  border: 1px solid var(--border-h); border-radius: var(--r-md);
  transition: border-color 0.3s, transform 0.3s;
  min-height: 240px;
  isolation: isolate;
  position: relative; z-index: 1;
}
.tm-rail-card:hover { border-color: var(--accent-a45); transform: translateY(-2px); }
.tm-rail-head { display: flex; align-items: center; gap: 12px; }
.tm-rail-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent-a26), var(--accent-cyan));
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-h); font-weight: 200; font-size: 15px; color: var(--text);
}
.tm-rail-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tm-rail-name { font-family: var(--f-h); font-weight: 300; font-size: 14px; color: var(--text); letter-spacing: 0.01em; }
.tm-rail-role { font-family: var(--f-m); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-cyan); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-rail-quote { font-family: var(--f-b); font-weight: 350; font-size: 14px; line-height: 1.65; color: var(--text-s); margin: 0; }
.tm-rail-quote::before { content: '"'; color: var(--accent-bright); margin-right: 2px; }
.tm-rail-quote::after { content: '"'; color: var(--accent-bright); margin-left: 2px; }
.tm-rail-source {
  font-family: var(--f-m); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-m); margin-top: auto;
}

.industries-section { padding: 96px 0; }

.timeline-section-h {
  padding: 80px 0 88px; position: relative;
  background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}

.timeline-section-h .eyebrow-wrap { text-align: center; margin-bottom: 12px; }

.timeline-section-h h2 { text-align: center; max-width: 720px; margin: 0 auto 48px; font-size: clamp(28px, 3vw, 38px); }

.process-section {
  padding: 96px 0; position: relative;
  /* No background tint — flat with the rest of the page */
}

.process-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: process; position: relative; }

.process-flow::before {
  content: ''; position: absolute; top: 54px; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-a26), var(--accent-a26), transparent);
  z-index: 0;
}

.logo-wall {
  padding: 48px 0 56px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.015) 40%, transparent);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.logo-wall-lbl {
  font-family: var(--f-m); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--text-m); text-align: center; margin-bottom: 32px;
}

.logo-wall-lbl strong { color: var(--text-s); font-weight: 400; }

/* ============================================================
   collateral-table · canonical comparison/data table
   ------------------------------------------------------------
   Added 2026-05-19 from the variety-fix wave: every two-pager
   and several decks now use real HTML <table> for comparative
   data (capability × outcome, workshop × duration × funding-path,
   etc). This rule canonicalizes the pattern so consumers don't
   inline-style their own .tp-table block per file.
   ============================================================ */
/* .tp-table is the legacy name from the 2026-05-19 variety-fix
 * inline CSS; both classes share every rule so consumers can switch
 * over on next regeneration. */
.collateral-table,
.tp-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-b, 'Inter', sans-serif);
  font-size: 9.5pt;
  line-height: 1.4;
}
.collateral-table thead th,
.tp-table thead th {
  font-family: var(--f-m, 'Roboto Mono', monospace);
  font-weight: 500;
  font-size: 7.5pt;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-bright, #7bc6ff);
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.18));
  white-space: nowrap;
}
.collateral-table tbody td,
.tp-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  vertical-align: top;
  color: var(--text-s, rgba(235,241,251,0.72));
}
.collateral-table tbody tr:last-child td,
.tp-table tbody tr:last-child td { border-bottom: 0; }
.collateral-table tbody td:first-child,
.tp-table tbody td:first-child {
  color: var(--text, #ebf1fb);
  font-family: var(--f-h, 'Saira Semi Condensed', sans-serif);
  font-weight: 300;
  font-size: 12pt;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.collateral-table tbody td strong,
.tp-table tbody td strong { color: var(--text, #ebf1fb); font-weight: 500; }
.collateral-table tbody td .meta,
.tp-table tbody td .meta {
  display: block;
  font-family: var(--f-m, monospace);
  font-size: 7pt;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-bright, #7bc6ff);
  margin-top: 4px;
}

.trust-strip {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1001;
  height: var(--trust-strip-h);
  background: linear-gradient(180deg, rgba(3,4,10,0.95), rgba(5,6,14,0.88));
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
}

.trust-strip-track {
  display: flex; align-items: center; gap: 36px;
  height: 100%; padding: 0 24px;
  white-space: nowrap;
  font-family: var(--f-m); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  animation: trustMarquee 48s linear infinite;
  will-change: transform;
}

.horizontal-scroll {
  display: flex; gap: 16px; overflow-x: auto;
  scroll-snap-type: x mandatory; padding: 8px 0 24px;
  -ms-overflow-style: none; scrollbar-width: none;
  margin-left: calc(-50vw + 50%); width: 100vw;
  /* Gutter so the first card doesn't touch the viewport edge.
     scroll-padding keeps the snap respecting the gutter. */
  padding-left: max(24px, calc((100vw - 1120px) / 2));
  padding-right: max(24px, calc((100vw - 1120px) / 2));
  scroll-padding-left: max(24px, calc((100vw - 1120px) / 2));
}

.horizontal-scroll::-webkit-scrollbar { display: none; }

.ind-card {
  flex: 0 0 clamp(240px, 22vw, 300px);
  aspect-ratio: 3 / 4;
  scroll-snap-align: start;
  border-radius: var(--r-lg); overflow: hidden;
  position: relative;
  background: var(--surface-card); border: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform 0.4s var(--ease), border-color 0.3s, box-shadow 0.3s;
  text-decoration: none;
  color: var(--text);
}

.ind-card[data-offering-theme="blue"]      { --offering-accent: #2d62ff; --offering-bright: #7bc6ff; }

.ind-card[data-offering-theme="pink"]      { --offering-accent: #dd23bb; --offering-bright: #f472b6; }

.ind-card[data-offering-theme="cyan"]      { --offering-accent: #009be5; --offering-bright: #67e8f9; }

.ind-card[data-offering-theme="orange"]    { --offering-accent: #C45D14; --offering-bright: #d4961e; }

.ind-card[data-offering-theme="green"]     { --offering-accent: #95C11F; --offering-bright: #a3e635; }

.ind-card[data-offering-theme="deep-blue"] { --offering-accent: #009FE3; --offering-bright: #7bc6ff; }

.ind-card[data-offering-theme="coral"]     { --offering-accent: #C2004B; --offering-bright: #E6007E; }

.ind-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--offering-accent, var(--accent)) 50%, transparent);
  box-shadow:
    0 18px 50px rgba(0,0,0,0.4),
    0 0 0 1px color-mix(in srgb, var(--offering-accent, var(--accent)) 18%, transparent),
    0 0 48px color-mix(in srgb, var(--offering-accent, var(--accent)) 15%, transparent);
}

.ind-card:hover .ind-card-meta { color: var(--offering-bright, var(--accent-bright)); transition: color 0.35s var(--ease); }

.ind-card-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  transition: transform 0.6s var(--ease);
}

.ind-card:hover .ind-card-img { transform: scale(1.04); }

.ind-card-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,5,12,0.15) 0%, transparent 40%, rgba(5,5,12,0.82) 78%, rgba(5,5,12,0.95) 100%);
}

.ind-card-content {
  position: relative; z-index: 2; padding: 28px 26px 26px;
  display: flex; flex-direction: column; gap: 8px;
}

.ind-card-name {
  font-family: var(--f-h); font-weight: 200;
  font-size: clamp(22px, 2.1vw, 28px); line-height: 1.08;
  color: var(--text); letter-spacing: -0.01em;
  text-shadow: 0 2px 18px rgba(0,0,0,0.4);
}

.ind-card-hook {
  font-family: var(--f-b); font-weight: 350; font-size: 14px;
  line-height: 1.45; color: var(--text-s); margin: 0;
}

.ind-card-meta {
  font-family: var(--f-m); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--accent-bright);
  margin-top: 6px;
}

.ind-card-arrow {
  position: absolute; top: 22px; right: 22px; z-index: 3;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(5,5,12,0.55); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  color: var(--text); font-family: var(--f-m); font-size: 14px;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.ind-card:hover .ind-card-arrow {
  background: var(--accent-a26); border-color: var(--accent-a45);
  transform: translate(2px, -2px);
}

.itr-container {
  background: linear-gradient(180deg, var(--accent-a04), var(--accent-a08));
  border: 1px solid var(--accent-a12);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 40px);
  position: relative;
  overflow: hidden;
}

.itr-container::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 20% 10%, var(--accent-a08), transparent 60%),
    radial-gradient(ellipse 50% 35% at 85% 85%, color-mix(in srgb, var(--accent-cyan) 8%, transparent), transparent 60%);
}

.itr-tile {
  /* --offering-accent / --offering-bright are scoped per tile via data-offering-theme below.
     Default falls back to current accent so uncolored tiles still look right. */
  --offering-accent: var(--accent);
  --offering-bright: var(--accent-bright);
  background: linear-gradient(180deg, #05070e, #080b18);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 20px 18px 22px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease);
  position: relative; overflow: hidden;
  color: var(--text);
  text-decoration: none;
}

.itr-tile[data-offering-theme="blue"]      { --offering-accent: #2d62ff; --offering-bright: #7bc6ff; }

.itr-tile[data-offering-theme="pink"]      { --offering-accent: #dd23bb; --offering-bright: #f472b6; }

.itr-tile[data-offering-theme="cyan"]      { --offering-accent: #009be5; --offering-bright: #67e8f9; }

.itr-tile[data-offering-theme="orange"]    { --offering-accent: #C45D14; --offering-bright: #d4961e; }

.itr-tile[data-offering-theme="green"]     { --offering-accent: #95C11F; --offering-bright: #a3e635; }

.itr-tile[data-offering-theme="deep-blue"] { --offering-accent: #009FE3; --offering-bright: #7bc6ff; }

.itr-tile[data-offering-theme="coral"]     { --offering-accent: #C2004B; --offering-bright: #E6007E; }

.itr-tile:hover {
  border-color: color-mix(in srgb, var(--offering-accent) 45%, transparent);
  transform: translateY(-4px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--offering-accent) 8%, #05070e), color-mix(in srgb, var(--offering-accent) 4%, #080b18));
  box-shadow:
    0 12px 40px rgba(0,0,0,0.4),
    0 0 0 1px color-mix(in srgb, var(--offering-accent) 20%, transparent),
    0 0 48px color-mix(in srgb, var(--offering-accent) 15%, transparent);
}

.itr-tile:hover .itr-name { color: var(--offering-bright); transition: color 0.35s var(--ease); }

.itr-tile:hover .itr-meta { color: var(--offering-bright); transition: color 0.35s var(--ease); }

.itr-tile:hover .itr-img img { transform: scale(1.06); }

.itr-img {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, var(--accent-a12), transparent 70%);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}

.itr-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease); }

.itr-grid {
  position: relative; z-index: 1;
  display: grid; gap: 14px;
}

.itr-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }

.itr-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }

.itr-name, .itr-meta { transition: color 0.35s var(--ease); }

.itr-name {
  font-family: var(--f-h); font-weight: 200; font-size: 20px;
  line-height: 1.2; color: var(--text);
}

.itr-desc {
  font-family: var(--f-b); font-weight: 350; font-size: 13.5px;
  line-height: 1.55; color: var(--text-s); flex: 1;
}

.itr-meta {
  font-family: var(--f-m); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--aws);
  margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--border);
}

.itr-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }

.itr-head h2 { margin-bottom: 0; }

.itr-head .lead { max-width: 360px; margin: 0; font-size: 15px; }

.tm-glow {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: min(1100px, 85vw); height: 240px; bottom: 0;
  background: radial-gradient(ellipse at center, var(--accent-a08), transparent 70%);
  pointer-events: none; z-index: 0; filter: blur(40px);
}

.tm-scroll {
  display: flex; gap: 24px; overflow-x: auto;
  scroll-snap-type: x mandatory; padding: 20px 0;
  scrollbar-width: none; position: relative; z-index: 1;
  scroll-behavior: smooth;
  margin-left: calc(-50vw + 50%); width: 100vw;
  padding-left: max(24px, calc((100vw - 1200px) / 2));
  padding-right: max(24px, calc((100vw - 1200px) / 2));
}

.tm-scroll::-webkit-scrollbar { display: none; }

.tm-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin-top: 24px; position: relative; z-index: 1;
}

.tm-arrow {
  width: 40px; height: 40px; border-radius: 50%;
  background: transparent; border: 1px solid var(--border); color: var(--text-m);
  font-size: 16px; display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s, color 0.2s;
}

.tm-arrow:hover { border-color: var(--border-h); color: var(--text); }

.tm-dots { display: flex; align-items: center; gap: 8px; }

.tm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-a15); cursor: pointer; transition: background 0.3s; }

.tm-dot.active { background: var(--text); }

.tm-slide {
  flex: 0 0 460px; scroll-snap-align: center;
  padding: 32px 30px; border-radius: 20px;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: linear-gradient(170deg, var(--accent-a12) 0%, color-mix(in srgb, var(--accent-cyan) 6%, transparent) 40%, rgba(5,5,12,0.85) 100%);
  border: 1px solid var(--accent-a18);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}

.tm-slide:hover { transform: translateY(-2px); }

.tm-slide blockquote {
  font-weight: 350; font-size: 15.5px; line-height: 1.65;
  color: rgba(235,241,251,0.85); margin-bottom: 22px; flex: 1;
  font-style: normal;
}

/* Decorative blue double-quote glyph removed (2026-05-10) — was reading
   as a stray UI element rather than a quotation indicator. Typography
   stands on its own. */

.tm-logo {
  font-family: var(--f-h); font-weight: 300; font-size: 20px;
  color: var(--text); margin-bottom: 18px;
  display: flex; align-items: center; gap: 10px;
}

.tm-logo-icon {
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--text);
}

.tm-metric {
  font-family: var(--f-m); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--aws);
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px dashed var(--accent-a26);
}

.tm-footer { display: flex; align-items: center; gap: 14px; margin-top: auto; }

.tm-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-a26), color-mix(in srgb, var(--accent-cyan) 30%, transparent));
  border: 2px solid rgba(255,255,255,0.1); flex-shrink: 0;
}

.tm-name { font-weight: 450; font-size: 14px; color: var(--text); }

.tm-role { font-size: 12px; color: var(--text-m); margin-top: 2px; }

.tm-head { text-align: center; margin-bottom: 32px; }

.tm-head .eyebrow { margin-left: auto; margin-right: auto; }

.tm-head h2 { max-width: 780px; margin: 8px auto 0; }

.process-head { max-width: 820px; margin-bottom: 40px; }

.process-step {
  position: relative; padding: 32px 22px; background: var(--surface-card);
  border: 1px solid var(--border); border-radius: var(--r-md);
  opacity: 0.55; transition: opacity 0.5s var(--ease), border-color 0.3s, transform 0.3s;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 1;
}

.process-step::before {
  counter-increment: process; content: '0' counter(process);
  font-family: var(--f-m); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--accent-bright); display: block;
}

.process-step-dot {
  position: absolute; top: 48px; left: 50%; transform: translateX(-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border); z-index: 2;
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.3s;
}

.process-step.active { opacity: 1; border-color: var(--accent-a26); }

.process-step.active .process-step-dot { border-color: var(--accent-bright); background: var(--accent-bright); box-shadow: 0 0 10px var(--accent-bright), 0 0 20px var(--accent-a45); }

.process-step:hover { transform: translateY(-3px); }

.process-step h4 { font-family: var(--f-h); font-weight: 200; font-size: 20px; line-height: 1.25; margin-top: 16px; }

.process-step p { font-family: var(--f-b); font-weight: 350; font-size: 14px; line-height: 1.6; color: var(--text-s); }

.process-step-metric {
  font-family: var(--f-m); font-size: 10.5px; color: var(--aws);
  text-transform: uppercase; letter-spacing: 0.12em;
  margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--border);
}

.industries-head {
  display: grid; grid-template-columns: 1fr auto; align-items: end;
  gap: 24px; margin-bottom: 28px;
}

.industries-head h2 {
  font-size: clamp(28px, 3vw, 38px); line-height: 1.05; margin-bottom: 0;
  max-width: 820px;
}

.industries-head .lead { margin: 0; font-size: 15px; max-width: 360px; }

.industries-nav { display: flex; gap: 10px; align-items: center; }

.ind-arrow-btn {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--surface-card); border: 1px solid var(--border);
  color: var(--text-s); font-family: var(--f-m); font-size: 16px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease);
}

.ind-arrow-btn:hover { border-color: var(--accent-a26); color: var(--text); background: var(--accent-a08); transform: translateY(-1px); }

.ind-arrow-btn:disabled { opacity: 0.3; cursor: default; }

.ind-arrow-btn:disabled:hover { border-color: var(--border); color: var(--text-s); background: var(--surface-card); transform: none; }

.timeline-track {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
  max-width: 1000px; margin: 0 auto; padding: 28px 0 0;
}

.timeline-line {
  position: absolute; top: 36.5px; left: calc(12.5% + 7px); right: calc(12.5% + 7px); height: 1px;
  background: rgba(255,255,255,0.08); z-index: 0;
}

.timeline-line-fill {
  position: absolute; top: 0; left: 0; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent-bright), var(--accent-cyan));
  box-shadow: 0 0 6px var(--accent-a26);
}

.t-era {
  position: relative; text-align: center; z-index: 1;
}

.t-era-dot {
  width: 14px; height: 14px; border-radius: 50%;
  margin: 0 auto 24px; background: var(--bg);
  border: 2px solid rgba(255,255,255,0.15);
  box-sizing: border-box;
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.4s var(--ease);
  position: relative; z-index: 2;
}

.t-era.active .t-era-dot {
  border-color: var(--accent-bright);
  background: var(--accent-bright);
  box-shadow: 0 0 14px var(--accent-bright), 0 0 28px var(--accent-a45);
}

.t-era-year {
  font-family: var(--f-m); font-weight: 400; font-size: 22px; color: var(--aws);
  margin-bottom: 6px; letter-spacing: 0.03em;
}

.t-era-headline {
  font-family: var(--f-h); font-weight: 200; font-size: 15px; line-height: 1.35;
  color: var(--text); margin-bottom: 4px; max-width: 200px; margin-left: auto; margin-right: auto;
}

.t-era-note {
  font-family: var(--f-m); font-size: 10.5px; color: var(--text-m);
  text-transform: uppercase; letter-spacing: 0.1em;
}

/* Customer-logo marquee — canonical scrolling logo strip used on the
   homepage and on every offering page. Track must be 2x the unique items
   so the keyframe `translateX(-50%)` lands the second copy where the
   first started (seamless infinite scroll). Hover pauses; reduced-motion
   neutralises animation in the @media block above. */
.logo-marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 32px 0;
  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}

.logo-marquee-track {
  display: flex; align-items: center; gap: 56px;
  width: max-content;
  animation: logoScroll 60s linear infinite;
}

.logo-marquee:hover .logo-marquee-track { animation-play-state: paused; }

.logo-name {
  font-family: var(--f-h); font-weight: 300; font-size: 22px;
  color: var(--text-m); letter-spacing: 0.02em;
  opacity: 0.6; white-space: nowrap;
  transition: opacity 0.3s var(--ease), color 0.3s var(--ease);
  flex-shrink: 0;
}

.logo-name:hover { opacity: 1; color: var(--text); }

.trust-item {
  display: inline-flex; align-items: center; gap: 10px; color: var(--text-s); flex-shrink: 0;
}

.trust-item::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--aws);
  box-shadow: 0 0 8px color-mix(in srgb, var(--aws) 40%, transparent);
}

.trust-item.t-aws::before { background: var(--aws); box-shadow: 0 0 8px rgba(212,150,30,0.5); }

.trust-item.t-tt::before  { background: var(--logo-green); box-shadow: 0 0 8px rgba(149,193,31,0.5); }

.trust-item.t-sca::before { background: var(--accent-bright); box-shadow: 0 0 8px rgba(123,198,255,0.5); }

.hero-content { pointer-events: none; }

.hero-content .btn, .hero-content .nav-cta, .hero-content a { pointer-events: auto; }

.hero-content { position: relative; z-index: 2; max-width: 900px; }

.hero-sub { font-size: 16px; color: var(--text-m); line-height: 1.7; max-width: 620px; margin-bottom: 36px; }

.hero-what {
  font-family: var(--f-h); font-weight: 200;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.45; color: var(--text-s);
  max-width: 680px; margin-bottom: 20px;
}

.hero-what strong { color: var(--text); font-weight: 500; } /* brand rule: text never themed */

.hero-bg-grid, .hero-grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 30%, black 0%, transparent 100%);
}
/* LEGACY NOTE: .hero-grid was the original name but collides with any
   page that uses it as a layout wrapper. Use .hero-bg-grid in new builds.
   The .hero-grid selector stays for back-compat on existing pages. */

.hero-trust-note {
  font-family: var(--f-m); font-size: 11px; color: var(--text-m);
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-left: 16px; display: inline-flex; align-items: center; gap: 8px;
}

.hero-trust-note::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: var(--aws); box-shadow: 0 0 6px rgba(212,150,30,0.6);
  animation: pulseDot 2s ease-in-out infinite;
}

.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.credentials-section {
  padding: 56px 0; text-align: center;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.015);
}

.credentials-line {
  font-family: var(--f-h); font-weight: 200; font-size: clamp(22px, 2.4vw, 28px);
  color: var(--text); margin-bottom: 20px;
}

.credentials-line strong { color: var(--text); font-weight: 500; } /* brand rule: text never themed */

.credential-badges {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}

.credential-badge {
  font-family: var(--f-m); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-s); padding: 7px 14px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.credential-badge:hover { border-color: var(--accent-a26); color: var(--text); background: var(--accent-a04); }

.insights-section { padding: 96px 0; }

.insights-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }

.insights-head h2 { margin-bottom: 0; }

.blog-filters { display: flex; gap: 8px; flex-wrap: wrap; }

.blog-filter {
  font-family: var(--f-m); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 6px 14px; border-radius: 9999px;
  border: 1px solid var(--border); background: transparent; color: var(--text-m); cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.blog-filter.active, .blog-filter:hover {
  background: var(--accent-a12); border-color: var(--accent-a26); color: var(--accent-bright);
}

.blog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.card-blog {
  background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.3s;
  display: flex; flex-direction: column;
}

.card-blog:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.25); border-color: var(--border-h); }

.card-blog:hover .blog-thumb-inner { transform: scale(1.05); }

.card-blog:hover .blog-arrow { opacity: 1; transform: translateX(0); }

.blog-thumb {
  aspect-ratio: 16/9; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--accent-a12), color-mix(in srgb, var(--accent-cyan) 8%, transparent));
}

.blog-thumb-inner {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, rgba(1,29,56,0.8), rgba(5,5,12,0.9));
  transition: transform 0.5s var(--ease);
  display: flex; align-items: center; justify-content: center;
}

.blog-thumb svg { width: 64%; height: 64%; opacity: 0.75; }

.blog-content { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }

.blog-category {
  font-family: var(--f-m); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent-cyan);
  background: color-mix(in srgb, var(--accent-cyan) 8%, transparent);
  padding: 3px 10px; border-radius: 9999px; display: inline-block; width: fit-content;
}

.blog-title {
  font-family: var(--f-h); font-weight: 200; font-size: 19px; line-height: 1.28;
  color: var(--text);
}

.blog-excerpt {
  font-family: var(--f-b); font-weight: 350; font-size: 14px; line-height: 1.6;
  color: var(--text-s);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.blog-meta {
  font-family: var(--f-m); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-m); margin-top: auto; padding-top: 10px;
  display: flex; justify-content: space-between; align-items: center;
}

.blog-arrow {
  font-family: var(--f-m); font-size: 11px; color: var(--accent-bright);
  opacity: 0; transform: translateX(-4px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}

.cta-section { padding: clamp(64px, 7vw, 96px) 0; text-align: center; position: relative; overflow: hidden; }

.cta-section h2 { font-size: clamp(28px, 3vw, 38px); max-width: 640px; margin: 0 auto 18px; }

.cta-section .lead { max-width: 520px; margin: 0 auto 36px; text-align: center; }

.cta-particle-canvas { position: absolute; inset: 0; z-index: 0; }

.cta-inner { position: relative; z-index: 1; }

.cta-actions { display: flex; flex-direction: column; align-items: center; gap: 18px; }

.hero-bg-fallback {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1200px 800px at 78% 40%, rgba(28,62,160,0.6), transparent 65%),
    radial-gradient(900px 600px at 85% 55%, rgba(18,30,85,0.55), transparent 70%),
    radial-gradient(1400px 900px at 95% 30%, rgba(10,16,40,0.7), transparent 75%);
}

.hero-bg-canvas {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  /* pointer-events auto so the canvas receives mouse movement; buttons still click. */
}

.hero-bg-tint {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* A soft bottom vignette so the shader reads darker at the bottom of the fold */
  background: linear-gradient(180deg, transparent 0%, transparent 55%, rgba(5,5,12,0.55) 100%);
}

.hero-fade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(5,5,12,0.85) 0%, rgba(5,5,12,0.55) 38%, rgba(5,5,12,0.18) 60%, transparent 78%);
}

@keyframes trustMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: inset 0 0 16px 6px var(--accent-a06), 0 0 24px var(--accent-a04); }
  50% { box-shadow: inset 0 0 24px 8px var(--accent-a12), 0 0 60px var(--accent-a15), 0 0 30px var(--accent-a08); }
}

@keyframes pulseDot { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

@keyframes logoScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ============================================================
   MOTION TABLE — N-stage horizontal product motion
   Added 2026-05-06 from the Ak Intro - Connect deck (slide 5).
   N-column table where each column is a stage in a product motion
   (e.g. Pre-sales / POC / Production / Expansion / Maintenance) with
   eyebrow + product name + description + outcome per stage.
   Use for go-to-market motion slides, product roadmap stages,
   process slides where each step has a named owner/output.
   ============================================================ */
.motion-table {
  display: grid;
  grid-template-columns: repeat(var(--motion-table-cols, 5), 1fr);
  gap: var(--space-4);
  width: 100%;
  margin: var(--space-8) 0;
}

.motion-table-stage {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  position: relative;
  isolation: isolate;
}

.motion-table-stage::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-cyan), var(--accent-bright));
  opacity: 0.6;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.motion-table-eyebrow {
  font-family: var(--f-m, "Roboto Mono", monospace);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
}

.motion-table-product {
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  color: var(--text);
}

.motion-table-product-meta {
  font-family: var(--f-b, "Inter", sans-serif);
  font-size: 11px;
  font-style: italic;
  color: var(--text-muted);
}

.motion-table-desc {
  font-family: var(--f-b, "Inter", sans-serif);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.motion-table-outcome {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px dashed var(--border);
  font-family: var(--f-b, "Inter", sans-serif);
  font-size: 12px;
  color: var(--text);
}

.motion-table-outcome-label {
  display: block;
  font-family: var(--f-m, "Roboto Mono", monospace);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin-bottom: var(--space-1);
}

@media (max-width: 1100px) {
  .motion-table { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .motion-table { grid-template-columns: 1fr; }
}


/* ============================================================
   MARKETING COLLATERAL EXTENSIONS
   Added 2026-05-08, refactored 2026-05-08 (collateral-style-guide-2026 v2).

   THESE ARE NOT A PARALLEL LIBRARY. They extend the canonical
   components.css. Per CATALOG.md:
   "Never create a parallel 'collateral' component library."

   Each block below is one of:
     1. A canonical class that ALSO works on web pages (default)
     2. A canonical class with [data-asset="deck|two-pager|one-pager|
        win-wire|case-study"] modifiers
     3. A small, justified deck-only-class (~9 components, e.g.
        slide-header-strip, framework-letter-mark, hex-callouts)

   Source of truth for which is which:
   projects/collateral-style-guide-2026/design/component-inventory.md
   (104 components, P0/P1/P2 priority).

   Status: WIP — being progressively rebuilt under the ppt-design
   skill from inventory v2 specs. Components below are v1 (built from
   plan, not from observation) and will be replaced one-by-one. Do NOT
   add new collateral-only components here without going through
   ppt-design + landing them in the canonical block above.
   ============================================================ */


/* --- BACKGROUNDS -----------------------------------------
   .bg-dot-grid moved to ambient.css (canonical).
   .bg-fog-layer / .fog-blob-1/2/3 / .mouse-glow live in ambient.css.
   --- */

/* .bg-tint-* — surface tint utilities (collateral-friendly, also web-safe) */
.bg-tint-surface { background: var(--surface-card); }
.bg-tint-accent  { background: var(--accent-a06); }
.bg-tint-aws     { background: var(--aws-orange-soft); }


/* --- LINES & DIVIDERS ----------------------------------- */

/* L-02 · .line-v-accent — vertical column separator */
.line-v-accent {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(180deg, transparent 0%, var(--accent-a08) 18%, var(--text) 50%, var(--accent-a08) 82%, transparent 100%);
}

/* L-03 · .divider-context — eyebrow + 1px gradient line */
.divider-context {
  padding: var(--space-6) 0 var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.divider-context .eyebrow {
  font-family: var(--f-m, "Roboto Mono", monospace);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-bright);
}
.divider-context::after {
  content: ''; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--accent-a08) 18%, var(--text) 50%, var(--accent-a08) 82%, transparent 100%);
}

/* L-06 · .line-underline-accent — heading underline (web only) */
.line-underline-accent {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

/* L-08 · .line-connector-arrow + diagonal — SVG-style connectors */
.line-connector-arrow,
.line-connector-diagonal {
  position: absolute; pointer-events: none;
  background: linear-gradient(90deg, var(--accent), var(--accent-cyan), var(--accent-bright));
  height: 1px;
}
.line-connector-arrow::after {
  content: '▶'; position: absolute; right: -8px; top: -7px;
  color: var(--accent-bright); font-size: 12px;
}
.line-connector-diagonal { transform: rotate(45deg); transform-origin: left center; }


/* --- CARDS ----------------------------------------------- */

/* C-01 · .card-stat — number + claim + context */
.card-stat {
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2);
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); min-height: 160px;
  transition: transform 220ms var(--ease-default), border-color 220ms var(--ease-default), box-shadow 220ms var(--ease-default);
}
.card-stat .num {
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif); font-weight: 500;
  font-size: clamp(38px, 4vw, 56px); line-height: 1; color: var(--accent-bright);
}
.card-stat .claim {
  font-family: var(--f-b, "Inter", sans-serif); font-weight: 380; font-size: 14px;
  line-height: 1.5; color: var(--text-secondary);
}
.card-stat .context {
  margin-top: auto; padding-top: var(--space-3);
  font-family: var(--f-m, "Roboto Mono", monospace); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}

/* C-02 · .card-stat-delta — X → Y arrow card */
.card-stat-delta {
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.card-stat-delta .delta-row {
  display: flex; align-items: baseline; gap: var(--space-3);
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif); font-weight: 500;
}
.card-stat-delta .delta-from { color: var(--text-muted); font-size: 28px; }
.card-stat-delta .delta-arrow { color: var(--accent); font-size: 24px; }
.card-stat-delta .delta-to    { color: var(--accent-bright); font-size: 38px; }
.card-stat-delta .caption {
  font-family: var(--f-m, "Roboto Mono", monospace); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}

/* C-03 · .card-quote — large pull-quote */
.card-quote {
  padding: var(--space-8); background: var(--surface-card);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  position: relative; isolation: isolate;
}
.card-quote::before {
  content: '"'; position: absolute; top: 12px; left: 24px;
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif); font-weight: 500;
  font-size: 64px; color: var(--accent-bright); opacity: 0.6; line-height: 1;
}
.card-quote .body {
  font-family: var(--f-b, "Inter", sans-serif); font-weight: 380; font-style: italic;
  font-size: 22px; line-height: 1.5; color: var(--text); padding-top: 32px;
  margin: 0;
}
.card-quote .attribution {
  margin-top: var(--space-5); display: flex; align-items: center; gap: var(--space-3);
}
.card-quote .name {
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif); font-weight: 500;
  font-size: 16px; color: var(--text);
}
.card-quote .role {
  font-family: var(--f-m, "Roboto Mono", monospace); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-cyan);
}
/* C-04 · .card-quote--mini — modifier */
.card-quote--mini { padding: var(--space-5); }
.card-quote--mini::before { font-size: 32px; }
.card-quote--mini .body { font-size: 16px; padding-top: 16px; font-style: italic; }

/* C-05 · .card-customer — logo + name + role + endorsement */
.card-customer {
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.card-customer .logo {
  width: 80px; height: 40px; object-fit: contain; align-self: flex-start;
}
.card-customer .name {
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif); font-weight: 500; font-size: 18px; color: var(--text);
}
.card-customer .role {
  font-family: var(--f-m, "Roboto Mono", monospace); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}
.card-customer .endorsement {
  font-family: var(--f-b, "Inter", sans-serif); font-style: italic; font-size: 14px;
  line-height: 1.5; color: var(--text-secondary);
}

/* C-06 · .card-pricing — single pricing tile */
.card-pricing {
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md);
  position: relative;
}
.card-pricing .label {
  font-family: var(--f-m, "Roboto Mono", monospace); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-bright);
}
.card-pricing .price {
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif); font-weight: 500;
  font-size: 38px; line-height: 1; color: var(--text);
}
.card-pricing .period {
  font-family: var(--f-m, "Roboto Mono", monospace); font-size: 11px;
  letter-spacing: 0.12em; color: var(--text-muted);
}
.card-pricing ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.card-pricing li {
  font-family: var(--f-b, "Inter", sans-serif); font-size: 13px; line-height: 1.5; color: var(--text-secondary);
  padding-left: 16px; position: relative;
}
.card-pricing li::before { content: '✓'; position: absolute; left: 0; color: var(--accent-bright); }

/* C-07 · .card-pricing-compare — 3-column comparison */
.card-pricing-compare {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4);
  padding: var(--space-6); background: var(--surface-card);
  border: 1px solid var(--border); border-radius: var(--radius-md);
}
.card-pricing-compare > .card-pricing.is-recommended {
  border-color: var(--accent-a26);
  box-shadow: 0 0 24px rgba(45, 98, 255, 0.18);
}

/* C-09 · .card-pod — POD offering tile (extends icon-tile-row pattern) */
.card-pod {
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.card-pod .name {
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif); font-weight: 500;
  font-size: 18px; color: var(--accent-bright);
}
.card-pod .desc {
  font-family: var(--f-b, "Inter", sans-serif); font-size: 13px; line-height: 1.5; color: var(--text-secondary);
}
.card-pod .pricing-pill {
  margin-top: auto; align-self: flex-start;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--aws-orange-soft); border: 1px solid var(--aws-orange);
  font-family: var(--f-m, "Roboto Mono", monospace); font-size: 10px;
  letter-spacing: 0.08em; color: var(--aws-orange);
}

/* C-10 · .card-offering-pillar — icon + bullets + proof callout */
.card-offering-pillar {
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4);
  background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.card-offering-pillar .pillar-name {
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif); font-weight: 500;
  font-size: 24px; color: var(--accent-bright);
}
.card-offering-pillar .pillar-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.card-offering-pillar .pillar-bullets li {
  font-family: var(--f-b, "Inter", sans-serif); font-size: 13px; line-height: 1.5; color: var(--text-secondary);
  padding-left: 18px; position: relative;
}
.card-offering-pillar .pillar-bullets li::before { content: '→'; position: absolute; left: 0; color: var(--accent); }
.card-offering-pillar .pillar-proof {
  margin-top: auto; padding-top: var(--space-4); border-top: 1px dashed var(--border);
}
.card-offering-pillar .pillar-proof .label {
  font-family: var(--f-m, "Roboto Mono", monospace); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-cyan);
  margin-bottom: var(--space-1);
}
.card-offering-pillar .pillar-proof .headline {
  font-family: var(--f-b, "Inter", sans-serif); font-weight: 500; font-size: 13px;
  color: var(--text); margin-bottom: var(--space-1);
}
.card-offering-pillar .pillar-proof .body {
  font-family: var(--f-b, "Inter", sans-serif); font-size: 11px; color: var(--text-muted);
  line-height: 1.4;
}

/* C-12 · .card-tech-tile — single tech logo + label */
.card-tech-tile {
  padding: var(--space-3); display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  width: 80px; height: 80px;
}
.card-tech-tile img { width: 32px; height: 32px; object-fit: contain; }
.card-tech-tile .label {
  font-family: var(--f-m, "Roboto Mono", monospace); font-size: 9px;
  letter-spacing: 0.08em; color: var(--text-secondary); text-align: center;
}
/* C-13 · detailed modifier */
.card-tech-tile--detailed {
  width: auto; height: auto; flex-direction: row; align-items: flex-start;
  padding: var(--space-4); gap: var(--space-3);
}
.card-tech-tile--detailed[data-tech-color="aws-orange"] {
  border-color: var(--aws-orange); background: var(--aws-orange-soft);
}
.card-tech-tile--detailed .name {
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif); font-weight: 500;
  font-size: 18px; color: var(--text); text-align: left;
}
.card-tech-tile--detailed .desc {
  font-family: var(--f-b, "Inter", sans-serif); font-size: 13px; line-height: 1.5; color: var(--text-secondary);
}

/* C-15 · .card-testimonial — photo + quote + name + company */
.card-testimonial {
  padding: var(--space-6); display: flex; gap: var(--space-5);
  background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  position: relative; isolation: isolate;
}
.card-testimonial .photo {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover; border: 2px solid var(--accent-a26);
}
.card-testimonial .body { display: flex; flex-direction: column; gap: var(--space-3); }
.card-testimonial .quote {
  font-family: var(--f-b, "Inter", sans-serif); font-weight: 380; font-style: italic;
  font-size: 18px; line-height: 1.5; color: var(--text); margin: 0;
}
.card-testimonial .attribution {
  font-family: var(--f-m, "Roboto Mono", monospace); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-cyan);
}

/* C-16 · .card-compare — before/after split */
.card-compare {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-6); padding: var(--space-6);
  background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.card-compare::before {
  content: ''; position: absolute; left: 50%; top: 12%; bottom: 12%;
  width: 1px; background: linear-gradient(180deg, transparent, var(--accent-a26), transparent);
  transform: rotate(2deg);
}
.card-compare .side { display: flex; flex-direction: column; gap: var(--space-3); }
.card-compare .side .eyebrow {
  font-family: var(--f-m, "Roboto Mono", monospace); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.card-compare .side[data-kind="before"] .eyebrow { color: var(--accent-warn); }
.card-compare .side[data-kind="after"]  .eyebrow { color: var(--accent-bright); }
.card-compare ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.card-compare li {
  font-family: var(--f-b, "Inter", sans-serif); font-size: 13px; line-height: 1.5; color: var(--text-secondary);
  padding-left: 14px; position: relative;
}
.card-compare li::before { content: '•'; position: absolute; left: 0; color: var(--accent); }

/* C-18 · .card-numbered-step — 01/02/03 with large numerals */
.card-numbered-step {
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md);
  position: relative;
}
.card-numbered-step .number {
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif); font-weight: 200;
  font-size: 64px; line-height: 1; color: var(--accent-bright); opacity: 0.85;
}
.card-numbered-step .title {
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif); font-weight: 500;
  font-size: 20px; color: var(--text);
}
.card-numbered-step .body {
  font-family: var(--f-b, "Inter", sans-serif); font-size: 14px; line-height: 1.5; color: var(--text-secondary);
}


/* --- BUTTONS & CTAs ------------------------------------- */

/* BTN-03 · .btn-print-qr — print CTA with QR slot */
.btn-print-qr {
  display: inline-flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-6); background: var(--surface-card);
  border: 1px solid var(--accent-a26); border-radius: var(--radius-md);
  font-family: var(--f-b, "Inter", sans-serif); color: var(--text); text-decoration: none;
}
.btn-print-qr .qr {
  width: 56px; height: 56px; background: var(--text); border-radius: 4px;
  display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); gap: 1px;
  /* fake QR pattern via background; real QR generated server-side */
}
.btn-print-qr .url-label {
  font-family: var(--f-m, "Roboto Mono", monospace); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}
.btn-print-qr .url {
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif); font-weight: 500; font-size: 18px; color: var(--text);
}
.btn-print-qr .tagline {
  font-family: var(--f-b, "Inter", sans-serif); font-size: 12px; color: var(--text-secondary);
}

/* BTN-05 · .chip-tag — mini chip */
.chip-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--border);
  font-family: var(--f-m, "Roboto Mono", monospace); font-size: 10px;
  letter-spacing: 0.08em; color: var(--text-secondary);
}

/* BTN-06 · .pill-filter — toggle-state filter pill */
.pill-filter {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--radius-pill);
  background: transparent; border: 1px solid var(--border);
  font-family: var(--f-m, "Roboto Mono", monospace); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary);
  cursor: pointer; transition: background 220ms var(--ease-default), border-color 220ms var(--ease-default);
}
.pill-filter[aria-pressed="true"], .pill-filter.is-active {
  background: var(--accent); border-color: var(--accent); color: var(--text);
}


/* --- PILLS & BADGES ------------------------------------- */

/* P-03 · .pill-status — active/upcoming/archived */
.pill-status {
  display: inline-flex; padding: 2px 8px; border-radius: var(--radius-pill);
  font-family: var(--f-m, "Roboto Mono", monospace); font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.pill-status[data-state="active"]   { background: rgba(149, 193, 31, 0.18); color: var(--logo-green); }
.pill-status[data-state="upcoming"] { background: var(--accent-a18); color: var(--accent-bright); }
.pill-status[data-state="archived"] { background: var(--white-07); color: var(--text-muted); }

/* P-04 · .pill-country — country tag */
.pill-country {
  display: inline-flex; padding: 4px 12px; border-radius: var(--radius-pill);
  background: var(--surface-card); border: 1px solid var(--border);
  font-family: var(--f-m, "Roboto Mono", monospace); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary);
}

/* P-05 · .badge-aws-service — AWS service badge */
.badge-aws-service {
  display: inline-flex; padding: 4px 10px; border-radius: 4px;
  background: var(--aws-orange-soft); border: 1px solid var(--aws-orange);
  font-family: var(--f-m, "Roboto Mono", monospace); font-size: 10px;
  letter-spacing: 0.08em; color: var(--aws-orange);
}

/* P-07 · .pill-industry — industry tag */
.pill-industry {
  display: inline-flex; padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--accent-a06); border: 1px solid var(--accent-a26);
  font-family: var(--f-m, "Roboto Mono", monospace); font-size: 10px;
  letter-spacing: 0.10em; color: var(--accent-bright);
}


/* --- ORNAMENTS & SURFACES ------------------------------- */

/* O-04 · .surface-logo-wall-compact — single-row 8-logo strip */
.surface-logo-wall-compact {
  display: flex; gap: var(--space-6); align-items: center; padding: var(--space-4) 0;
  flex-wrap: wrap;
}
.surface-logo-wall-compact .label {
  font-family: var(--f-m, "Roboto Mono", monospace); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted);
}
.surface-logo-wall-compact img { height: 24px; opacity: 0.85; }

/* O-05 · .surface-photo-mosaic — thanks-slide photo grid */
.surface-photo-mosaic {
  display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 120px; gap: 4px;
  width: 100%; opacity: 0.62;
}
.surface-photo-mosaic > * {
  background-size: cover; background-position: center;
  filter: hue-rotate(-12deg) saturate(0.9);
}


/* --- SIGNATURE COMPOSITIONS ----------------------------- */

/* S-01 · .cover-hero — deck/two-pager cover composition */
.cover-hero {
  position: relative; isolation: isolate;
  padding: var(--space-20) var(--space-16);
  display: flex; flex-direction: column; gap: var(--space-6);
  min-height: 600px;
}
.cover-hero .cover-content { position: relative; z-index: 2; max-width: 1100px; }
.cover-hero h1 {
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif); font-weight: 200;
  font-size: clamp(40px, 4.5vw, 56px); line-height: 1.06; color: var(--text);
  margin: 0;
}
/* Brand rule: headline text stays var(--text). Theme accent goes on backgrounds, borders, dots, fills — NOT on text. */
.cover-hero h1 strong { color: var(--text); font-weight: 500; }
.cover-hero .lead {
  font-family: var(--f-b, "Inter", sans-serif); font-weight: 380; font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.5; color: var(--text-secondary); max-width: 720px; margin-top: var(--space-4);
}
.cover-hero canvas, .cover-hero .hero-canvas, .cover-hero .hero-static {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.55;
}
.cover-hero .hero-static { object-fit: cover; }
.cover-hero .hero-fade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(5,5,12,0.7) 0%, rgba(5,5,12,0.3) 50%, transparent 100%);
}

/* S-02 · .thanks-mosaic — closing photo mosaic + contact */
.thanks-mosaic {
  position: relative; padding: var(--space-16) var(--space-12);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-8);
  text-align: center; min-height: 600px;
}
.thanks-mosaic h1 {
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif); font-weight: 200;
  font-size: clamp(48px, 6vw, 72px); line-height: 1.05; color: var(--text); margin: 0;
}
.thanks-mosaic .accent-rule {
  width: 200px; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-cyan));
}

/* S-03 · .cs-deep-dive — case-study P/S/I + sidebar */
.cs-deep-dive {
  display: grid; grid-template-columns: 3fr 1fr; gap: var(--space-8); padding: var(--space-8);
}
.cs-deep-dive .cs-main { display: flex; flex-direction: column; gap: var(--space-6); }
.cs-deep-dive .cs-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.cs-deep-dive .cs-col {
  padding: var(--space-5); background: var(--surface-card);
  border: 1px solid var(--border); border-radius: var(--radius-md);
}
.cs-deep-dive .cs-col-label {
  font-family: var(--f-m, "Roboto Mono", monospace); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: var(--space-3);
}
.cs-deep-dive .cs-col[data-kind="problem"] .cs-col-label { color: var(--accent-warn); }
.cs-deep-dive .cs-col[data-kind="solution"] .cs-col-label { color: var(--accent-bright); }
.cs-deep-dive .cs-col[data-kind="impact"] .cs-col-label { color: var(--logo-green); }
.cs-deep-dive .cs-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.cs-deep-dive .cs-col li {
  font-family: var(--f-b, "Inter", sans-serif); font-size: 12px; line-height: 1.45; color: var(--text-secondary);
  padding-left: 12px; position: relative;
}
.cs-deep-dive .cs-col li::before { content: '•'; position: absolute; left: 0; color: var(--accent); }
.cs-deep-dive .cs-sidebar {
  display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  height: fit-content;
}
.cs-deep-dive .cs-meta-label {
  font-family: var(--f-m, "Roboto Mono", monospace); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted);
}
.cs-deep-dive .cs-meta-value {
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif); font-weight: 500;
  font-size: 16px; color: var(--text); margin-top: 2px;
}
.cs-deep-dive .cs-tech-stack {
  padding-top: var(--space-3); border-top: 1px dashed var(--border);
}
.cs-deep-dive .cs-tech-stack-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* S-04 · .win-wire-frame — locked layout */
.win-wire-frame {
  display: grid; grid-template-columns: 7fr 3fr; gap: var(--space-8); padding: var(--space-8);
  background: var(--bg);
}
.win-wire-frame .ww-main { display: flex; flex-direction: column; gap: var(--space-6); }
.win-wire-frame .ww-section h3 {
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif); font-weight: 500;
  font-size: 18px; color: var(--accent-bright); margin: 0 0 var(--space-2);
}
.win-wire-frame .ww-section p,
.win-wire-frame .ww-section li {
  font-family: var(--f-b, "Inter", sans-serif); font-size: 13px; line-height: 1.5; color: var(--text-secondary);
}
.win-wire-frame .ww-sidebar {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-5); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  height: fit-content;
}

/* S-05 · .fine-print — footnote layer */
.fine-print {
  font-family: var(--f-m, "Roboto Mono", monospace); font-size: 9px;
  letter-spacing: 0.16em; color: var(--text-muted); line-height: 1.5;
  margin-top: var(--space-12);
}

/* S-06 · .multi-col-bullets — print-optimized columns */
.multi-col-bullets {
  column-count: var(--cols, 2); column-gap: var(--space-8);
  list-style: none; padding: 0; margin: 0;
}
.multi-col-bullets li {
  font-family: var(--f-b, "Inter", sans-serif); font-size: 13px; line-height: 1.5; color: var(--text-secondary);
  padding-left: 14px; position: relative; break-inside: avoid; margin-bottom: var(--space-3);
}
.multi-col-bullets li::before { content: '→'; position: absolute; left: 0; color: var(--accent); }


/* --- MOTION UTILITIES ----------------------------------- */

/* M-02 · .hover-lift — translateY + accent border + soft shadow */
.hover-lift {
  transition: transform 220ms var(--ease-default), border-color 220ms var(--ease-default), box-shadow 220ms var(--ease-default);
}
.hover-lift:hover {
  transform: translateY(-4px);
  border-color: var(--accent-a26);
  box-shadow: 0 8px 24px rgba(45, 98, 255, 0.12);
}

/* M-03 · .hover-shine — light sweep across surface */
.hover-shine { position: relative; overflow: hidden; }
.hover-shine::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
  transform: translateX(-100%); transition: transform 700ms var(--ease-default);
}
.hover-shine:hover::after { transform: translateX(100%); }

/* M-04 · .hover-tilt — perspective rotate */
.hover-tilt { transition: transform 320ms var(--ease-default); transform-style: preserve-3d; }
.hover-tilt:hover { transform: perspective(900px) rotateX(2deg) rotateY(-2deg); }

/* M-05 · .hover-slide — content slide-shift */
.hover-slide { transition: transform 220ms var(--ease-default); }
.hover-slide:hover { transform: translateX(4px); }

/* M-13 · .accordion-toggle — click expand/collapse */
.accordion-toggle .accordion-body {
  max-height: 0; overflow: hidden; transition: max-height 320ms var(--ease-default);
}
.accordion-toggle.is-open .accordion-body { max-height: 800px; }


/* --- CHARTS & DATA VIZ ---------------------------------- */

/* CH-01 · .chart-bar-h — horizontal bar */
.chart-bar-h {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5); background: var(--surface-card);
  border: 1px solid var(--border); border-radius: var(--radius-md);
}
.chart-bar-h .row { display: grid; grid-template-columns: 120px 1fr 60px; gap: var(--space-3); align-items: center; }
.chart-bar-h .row .label {
  font-family: var(--f-m, "Roboto Mono", monospace); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary);
}
.chart-bar-h .row .bar-track {
  height: 6px; background: var(--white-07); border-radius: 3px; overflow: hidden;
}
.chart-bar-h .row .bar-fill {
  height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  border-radius: 3px; transform-origin: left; transform: scaleX(0);
  transition: transform 800ms var(--ease-default);
}
.chart-bar-h .row.is-revealed .bar-fill { transform: scaleX(1); }
.chart-bar-h .row .value {
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif); font-weight: 500;
  font-size: 14px; text-align: right; color: var(--text); /* brand rule: text never themed */
}

/* CH-04 · .chart-donut — donut/pie chart */
.chart-donut {
  position: relative; width: 200px; height: 200px;
}
.chart-donut svg { width: 100%; height: 100%; }
.chart-donut .donut-track { fill: none; stroke: var(--white-07); stroke-width: 12; }
.chart-donut .donut-segment { fill: none; stroke-width: 12; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset 1s var(--ease-default);
}
.chart-donut .center-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif); font-weight: 500;
  font-size: 32px; color: var(--text);
}

/* CH-05 · .chart-gauge — half-circle gauge */
.chart-gauge {
  position: relative; width: 240px; height: 140px;
}
.chart-gauge svg { width: 100%; height: 100%; }
.chart-gauge .gauge-track {
  fill: none; stroke: var(--white-07); stroke-width: 12; stroke-linecap: round;
}
.chart-gauge .gauge-fill {
  fill: none; stroke: var(--accent-bright); stroke-width: 12; stroke-linecap: round;
  transition: stroke-dashoffset 1.2s var(--ease-default);
}
.chart-gauge .value-label {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif); font-weight: 500;
  font-size: 28px; color: var(--text);
}


/* --- EMBEDS --------------------------------------------- */

/* E-01 · .embed-video — video wrapper */
.embed-video {
  position: relative; aspect-ratio: 16 / 9; width: 100%; max-width: 800px;
  background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden;
}
.embed-video video, .embed-video iframe {
  width: 100%; height: 100%; display: block;
}

/* E-02 · .embed-iframe — generic iframe wrapper */
.embed-iframe {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden;
}
.embed-iframe iframe { width: 100%; height: 100%; border: 0; }

/* E-04 · .embed-lottie — Lottie wrapper */
.embed-lottie {
  display: inline-block; width: 96px; height: 96px;
}
.embed-lottie lottie-player { width: 100%; height: 100%; }


/* --- INTERACTIVE WIDGETS -------------------------------- */

/* W-01 · .widget-tabs — tabs container */
.widget-tabs { display: flex; flex-direction: column; gap: var(--space-4); }
.widget-tabs .tab-list {
  display: flex; gap: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.widget-tabs .tab-trigger {
  background: transparent; border: 0;
  padding: var(--space-3) var(--space-5);
  font-family: var(--f-m, "Roboto Mono", monospace); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
  cursor: pointer; border-bottom: 2px solid transparent;
  transition: color 220ms, border-color 220ms;
}
.widget-tabs .tab-trigger.is-active {
  color: var(--accent-bright); border-bottom-color: var(--accent-bright);
}
.widget-tabs .tab-panel { display: none; }
.widget-tabs .tab-panel.is-active { display: block; }

/* W-04 · .widget-comparison-slider — drag-to-compare */
.widget-comparison-slider {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--radius-md); overflow: hidden; cursor: ew-resize;
}
.widget-comparison-slider .before, .widget-comparison-slider .after {
  position: absolute; inset: 0; background-size: cover; background-position: center;
}
.widget-comparison-slider .after { clip-path: inset(0 0 0 50%); }
.widget-comparison-slider .divider {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  background: var(--accent-bright); pointer-events: none;
}


/* ============================================================
   END MARKETING COLLATERAL EXTENSIONS
   Refactor target: each block above gets a v2 rebuild via ppt-design
   skill from the inventory v2 spec. Track via inventory v2.
   ============================================================ */


/* === LOGO TREATMENTS ===
   Canonical 4-context logo treatments. Used everywhere a customer logo
   appears. Source of truth — every consumer (homepage, case-studies,
   offering pages, collateral, decks) must use one of these classes.
   Added 2026-05-08 as part of the logo-normalization pass.
   White-silhouette variants for Treatment A live at
   dist/assets/customer-logos/<slug>-white.png (see logos manifest).
   ============================================================ */

/* Treatment A: Trust strip / logo wall on dark BG.
   Renders white silhouettes at uniform brightness (60% rest, 100% hover). */
.logo-trust {
  height: 30px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  opacity: 0.6;
  transition: opacity 220ms var(--ease-default, cubic-bezier(0.22, 0.61, 0.36, 1));
  display: block;
}
.logo-trust:hover { opacity: 1; }

/* Treatment B: Case-study card logo (light/dark card BG).
   Original colour, confined to 60x40 box, centred, padding for visual parity. */
.logo-card {
  width: 60px;
  height: 40px;
  object-fit: contain;
  display: block;
  margin: 0 auto 12px;
}

/* Treatment C: Case-study hero logo (top of case-study page, customer-callout,
   AWS partnership lockup). Original colour, full quality. */
.logo-hero {
  height: 48px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
}

/* Treatment D: Customer logo lockup (deck covers, marketing collateral,
   AWS partnership row). Original colour, stack-aligned with AWS Premier Tier
   badge in .aws-shield-lockup. */
.logo-lockup {
  height: 60px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
}

/* AWS partnership row uses Treatment D for the customer side.
   .aws-shield-lockup itself is defined inline in collateral.html (height: 70px
   for the AWS badge); Treatment D pairs to it at 60px so the customer logo
   reads slightly smaller than the badge it sits next to. */


/* ============================================================
   === DECK LAYOUT GLUE ===
   Promoted 2026-05-09 from project-local <style> blocks in
   ak-connect-deck-2026 and the broader deck pipeline. These are
   layout-glue classes only — composition wrappers, not net-new
   visual primitives. Every rule uses canonical tokens
   (--space-*, --accent-*, --surface-*, --text*, --border, --f-*).
   Source-of-truth for the slide grid + chrome lives in slides.css;
   this block adds the pieces that assemble a deck slide INSIDE
   the canonical grid (cover, headers, stat tiles, pillar tiles,
   stage tables, POD detail, glance table, case-study split,
   workshop/POD cards, CTA + thanks).
   ============================================================ */

/* ----- Slide-level chrome typography (deck H1/H2/sub/eyebrow) ----- */
.slide-eyebrow {
  font-family: var(--f-m, "Roboto Mono", monospace);
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-bright); margin-bottom: var(--space-3, 24px);
}
.slide-h1 {
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif);
  font-weight: 300; font-size: clamp(56px, 6vw, 88px); line-height: 1.04;
  letter-spacing: -0.02em; color: var(--text);
  max-width: 1500px; margin: 0 0 var(--space-4, 32px);
}
.slide-h2 {
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif);
  font-weight: 300; font-size: clamp(40px, 4.5vw, 64px); line-height: 1.06;
  letter-spacing: -0.02em; color: var(--text);
  max-width: 1400px; margin: 0 0 28px;
}
.slide-sub {
  font-family: var(--f-b, "Inter", sans-serif);
  font-weight: 350; font-size: 22px; line-height: 1.45;
  color: var(--text-secondary); max-width: 1100px; margin: 0;
}

/* ----- Cover layout (slide 1) ----- */
.slide-cover { padding: 0; }
.cover-split {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  align-items: center; width: 100%; height: 100%;
}
.cover-left { padding: 80px 80px 80px 120px; }
.cover-right { position: relative; height: 100%; overflow: hidden; }
.cover-right picture, .cover-right img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.cover-right::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--bg) 0%, transparent 25%, transparent 100%);
  pointer-events: none;
}
.cover-badge-strip {
  display: flex; gap: 28px; align-items: center; margin-top: 56px;
}
.cover-badge-strip img { height: 64px; width: auto; opacity: 0.95; }

/* ----- Stat 2x2 grid (slide outcomes) ----- */
.stat-grid-2x2 {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: var(--space-4, 32px); max-width: 1500px;
}
.stat-tile {
  padding: 36px 40px; border: 1px solid var(--border);
  border-radius: var(--radius-lg, 18px); background: var(--surface-1, var(--surface-card));
}
.stat-tile .stat-num {
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif);
  font-weight: 300; font-size: 78px; line-height: 1;
  letter-spacing: -0.02em; color: var(--accent-bright); margin: 0 0 14px;
}
.stat-tile .stat-label {
  font-family: var(--f-b, "Inter", sans-serif);
  font-size: 18px; line-height: 1.4; color: var(--text);
  margin: 0 0 6px; font-weight: 500;
}
.stat-tile .stat-source {
  font-family: var(--f-m, "Roboto Mono", monospace);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-secondary);
}

/* ----- AWS credentials slide ----- */
.aws-cred-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: 80px; align-items: center; max-width: 1600px;
}
.aws-badge-row {
  display: flex; gap: 36px; align-items: center;
  margin-bottom: 40px; flex-wrap: wrap;
}
.aws-badge-row img { height: 110px; width: auto; }
.aws-comp-list { columns: 2; column-gap: 36px; }
.aws-comp-list li {
  font-family: var(--f-b, "Inter", sans-serif);
  font-size: 17px; color: var(--text);
  break-inside: avoid; padding: 6px 0;
}

/* ----- Pillars (4-up solution tiles) ----- */
.pillar-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3, 24px); max-width: 1700px;
}
.pillar-tile {
  padding: 32px 28px; border: 1px solid var(--border);
  border-radius: var(--radius-md, 16px); background: var(--surface-1, var(--surface-card));
  display: flex; flex-direction: column; gap: 14px; min-height: 320px;
}
.pillar-tile .pillar-name {
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif);
  font-weight: 500; font-size: 28px; color: var(--accent-bright); margin: 0;
}
.pillar-tile .pillar-eyebrow {
  font-family: var(--f-m, "Roboto Mono", monospace);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-secondary); margin: 0;
}
.pillar-tile p {
  font-family: var(--f-b, "Inter", sans-serif);
  font-size: 16px; line-height: 1.45; color: var(--text); margin: 0;
}

/* ----- Motion table 4-stage (engagement how-we-ship) ----- */
.motion-table-4 {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px; max-width: 1700px;
}
.motion-table-4 .stage {
  padding: 24px 22px; border: 1px solid var(--border);
  border-radius: 14px; background: var(--surface-1, var(--surface-card));
}
.motion-table-4 .stage-num {
  font-family: var(--f-m, "Roboto Mono", monospace);
  font-size: 12px; letter-spacing: 0.1em;
  color: var(--accent); margin-bottom: 10px;
}
.motion-table-4 .stage-name {
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif);
  font-weight: 500; font-size: 24px; color: var(--text); margin-bottom: 12px;
}
.motion-table-4 .stage-body {
  font-family: var(--f-b, "Inter", sans-serif);
  font-size: 15px; line-height: 1.4; color: var(--text-secondary); margin-bottom: 14px;
}
.motion-table-4 .stage-out {
  font-family: var(--f-m, "Roboto Mono", monospace);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-bright);
}

/* ----- POD detail grid ----- */
.pod-detail-grid {
  display: grid; grid-template-columns: 0.9fr 1.1fr 0.9fr;
  gap: 28px; max-width: 1700px; align-items: stretch;
}
.pod-card-bordered {
  padding: 28px 26px; border: 1px solid var(--border);
  border-radius: var(--radius-md, 16px); background: var(--surface-1, var(--surface-card));
}
.pod-card-bordered h3 {
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif);
  font-weight: 500; font-size: 24px; color: var(--accent-bright); margin: 0 0 14px;
}
.pod-card-bordered p {
  font-family: var(--f-b, "Inter", sans-serif);
  font-size: 16px; line-height: 1.45; color: var(--text); margin: 0;
}

/* ----- Glance table (what-you-get matrix) ----- */
.glance-table {
  width: 100%; max-width: 1700px; border-collapse: collapse;
}
.glance-table th, .glance-table td {
  text-align: left; padding: 18px 20px;
  border-bottom: 1px solid var(--border); vertical-align: top;
}
.glance-table th {
  font-family: var(--f-m, "Roboto Mono", monospace);
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-bright); font-weight: 400;
}
.glance-table td {
  font-family: var(--f-b, "Inter", sans-serif);
  font-size: 16px; color: var(--text); line-height: 1.4;
}
.glance-table td:first-child {
  font-weight: 500; color: var(--accent-bright);
}
.cap-strip {
  display: flex; gap: 18px; margin-top: var(--space-4, 32px);
}
.cap-strip picture, .cap-strip img { width: 96px; height: 96px; }

/* ----- Slide divider (between major sections) ----- */
.slide-divider {
  display: grid; grid-template-columns: 1fr 0.4fr;
  gap: 80px; align-items: center;
}
.slide-divider .divider-h1 {
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif);
  font-weight: 200; font-size: 120px; line-height: 1.02;
  letter-spacing: -0.02em; color: var(--text); margin: 0;
}
.slide-divider picture, .slide-divider img {
  width: 320px; height: 320px; opacity: 0.85; justify-self: end;
}

/* ----- Case study deep-dive slide ----- */
.slide-case { position: relative; }
.slide-case > * { position: relative; z-index: 1; }
.slide-case > .cs-backdrop { z-index: 0; }
.cs-backdrop {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0.07; pointer-events: none;
}
.cs-backdrop picture, .cs-backdrop img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.cs-grid {
  display: grid; grid-template-columns: 0.18fr 1fr;
  gap: 60px; align-items: start; max-width: 1700px;
}
.cs-side {
  display: flex; flex-direction: column; gap: 18px;
}
.cs-side .cs-logo { max-width: 180px; height: auto; }
.cs-side .cs-logo-text {
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif);
  font-weight: 500; font-size: 30px; letter-spacing: 0.04em;
  color: var(--accent-bright);
}
.cs-side .cs-meta {
  font-family: var(--f-m, "Roboto Mono", monospace);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-secondary); line-height: 1.6;
}
.cs-cols {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 28px; margin-top: var(--space-3, 24px);
}
.cs-col h4 {
  font-family: var(--f-m, "Roboto Mono", monospace);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  margin: 0 0 14px;
}
.cs-col[data-kind="problem"] h4 { color: var(--accent-warm, #f97316); }
.cs-col[data-kind="solution"] h4 { color: var(--accent-bright); }
.cs-col[data-kind="impact"]   h4 { color: var(--accent-good, var(--logo-green, #95C11F)); }
.cs-col ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.cs-col li {
  font-family: var(--f-b, "Inter", sans-serif);
  font-size: 14px; line-height: 1.45; color: var(--text);
  position: relative; padding-left: 14px;
}
.cs-col li::before {
  content: '\2022'; position: absolute; left: 0; color: var(--accent);
}
.cs-quote {
  margin-top: var(--space-4, 32px); padding: 24px 28px;
  border-left: 3px solid var(--accent-bright);
  background: var(--surface-1, var(--surface-card));
  border-radius: 0 12px 12px 0; max-width: 1300px;
}
.cs-quote p {
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif);
  font-weight: 300; font-size: 26px; line-height: 1.3;
  color: var(--text); margin: 0 0 12px; font-style: italic;
}
.cs-quote .cite {
  font-family: var(--f-b, "Inter", sans-serif);
  font-size: 14px; color: var(--text-secondary);
}

/* ----- POD / workshop card grids ----- */
.pod3-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3, 24px); max-width: 1700px;
}
.ws2-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 28px; max-width: 1500px;
}
.ws-card {
  padding: 32px 30px; border: 1px solid var(--border);
  border-radius: var(--radius-md, 16px); background: var(--surface-1, var(--surface-card));
}
.ws-card h3 {
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif);
  font-weight: 500; font-size: 30px; color: var(--accent-bright); margin: 0 0 18px;
}
.ws-card .ws-row {
  display: grid; grid-template-columns: 0.8fr 1fr;
  gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--border);
}
.ws-card .ws-row:last-child { border-bottom: 0; }
.ws-card .ws-row .ws-label {
  font-family: var(--f-m, "Roboto Mono", monospace);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-secondary);
}
.ws-card .ws-row p {
  font-family: var(--f-b, "Inter", sans-serif);
  font-size: 15px; line-height: 1.45; color: var(--text); margin: 0;
}

/* ----- CTA block + thanks slide ----- */
.cta-block {
  display: flex; flex-direction: column;
  align-items: flex-start; gap: var(--space-3, 24px);
}
.cta-block .cta-btn {
  display: inline-block; padding: 18px 40px;
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  color: var(--bg); text-decoration: none; border-radius: 12px;
  font-family: var(--f-b, "Inter", sans-serif); font-weight: 500; font-size: 18px;
}
.thanks-grid {
  display: grid; grid-template-columns: 1fr 0.5fr;
  align-items: center; gap: 80px;
}
.thanks-grid .thanks-h1 {
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif);
  font-weight: 200; font-size: 120px; line-height: 1.02;
  color: var(--text); margin: 0;
}
.thanks-grid .thanks-sub {
  font-family: var(--f-b, "Inter", sans-serif);
  font-size: 22px; color: var(--text-secondary); margin-top: var(--space-3, 24px);
}
.thanks-grid picture, .thanks-grid img {
  width: 320px; height: 320px; opacity: 0.9; justify-self: end;
}


/* ============================================================
   === TWO-PAGER LAYOUT GLUE ===
   Promoted 2026-05-09 from project-local <style> blocks in
   ai-roadmap-2pager-2026 and from collateral.html scoped CSS.
   These compose A4-portrait two-pager assets out of canonical
   tokens. Print sizing uses mm units; web preview cascades the
   same rules. The collateral.html still owns demo-only styles;
   this block makes the validator-canonical.
   ============================================================ */

/* ----- Sheet padding + hero ----- */
.sheet-pad {
  padding: 16mm 14mm; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 7mm;
}
.sheet-hero {
  position: relative; padding: 18mm 14mm 12mm; min-height: 70mm;
  overflow: hidden; isolation: isolate;
}
.sheet-hero .eyebrow {
  font-family: var(--f-m, "Roboto Mono", monospace); font-size: 9pt;
  font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-bright);
}
.sheet-hero h1 {
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif);
  font-weight: 300; font-size: 30pt; line-height: 1.06;
  color: var(--text); margin: 6mm 0 4mm; max-width: 160mm;
}
.sheet-hero h1 strong { color: var(--text); font-weight: 500; } /* brand rule: headline text never themed */

/* Meta strip + meta pills (used in two-pager hero) */
.meta-strip { display: flex; flex-wrap: wrap; gap: 4mm; margin-top: 4mm; }
.meta-pill {
  padding: 1.4mm 4mm; background: var(--surface-card);
  border: 1px solid var(--border); border-radius: 999px;
  font-family: var(--f-m, "Roboto Mono", monospace); font-size: 8pt;
  letter-spacing: 0.10em; color: var(--text-secondary);
}

/* qband / lead-block (P0 #25) — promoted from collateral.html */
.qband {
  padding: 6mm 7mm; background: var(--accent-a04);
  border-left: 3px solid var(--accent-bright); border-radius: 0 6px 6px 0;
}
.qband .lead-text {
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif);
  font-weight: 200; font-size: 13pt; line-height: 1.4;
  color: var(--text); margin: 0;
}
.qband .lead-text strong { color: var(--text); font-weight: 500; } /* brand rule: text never themed */
.lead-text { /* canonical fallback when not inside .qband */
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif);
  font-weight: 200; font-size: 13pt; line-height: 1.4;
  color: var(--text); margin: 0;
}

/* pillar-icon-row (P0 #19) — promoted from collateral.html */
.pillar-icon-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 5mm;
}
.pillar-icon-row .pillar {
  padding: 5mm; background: rgba(255,255,255,0.02);
  border: 1px solid var(--border); border-radius: 4px;
  display: flex; flex-direction: column; gap: 2.5mm;
}
.pillar-icon-row .pillar .icon {
  width: 7mm; height: 7mm; border-radius: 2mm;
  background: var(--accent-a18);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-bright);
  font-family: var(--f-h); font-size: 11pt; font-weight: 500;
}
.pillar-icon-row .pillar .name {
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif);
  font-weight: 500; font-size: 12pt; color: var(--text);
}
.pillar-icon-row .pillar .body {
  font-family: var(--f-b, "Inter", sans-serif); font-weight: 350;
  font-size: 9.5pt; color: var(--text-secondary); line-height: 1.45;
  margin: 0;
}

/* stat-grid-4 (canonical row of 4 .card-stat) */
.stat-grid-4 {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 3.5mm;
}

/* section heading helpers */
.section-eyebrow {
  font-family: var(--f-m, "Roboto Mono", monospace); font-size: 8.5pt;
  font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-bright); display: block; margin-bottom: 3mm;
}
.section-h2 {
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif);
  font-weight: 400; font-size: 16pt; line-height: 1.18;
  color: var(--text); margin: 0 0 4mm;
}
.section-h2 strong { color: var(--text); font-weight: 500; } /* brand rule: headline text never themed */

/* CTA row (compact horizontal CTA) */
.cta-row {
  display: grid; grid-template-columns: 1fr auto;
  gap: 6mm; align-items: center;
  padding: 5mm 6mm; background: var(--accent-a04);
  border: 1px solid var(--accent-a26); border-radius: 6px;
  margin-top: auto;
}
.cta-row .label {
  font-family: var(--f-m, "Roboto Mono", monospace); font-size: 8.5pt;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-bright); margin-bottom: 1mm;
}
.cta-row .h3 {
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif);
  font-weight: 500; font-size: 14pt; color: var(--text); margin: 0 0 1.5mm;
}
.cta-row .body {
  font-family: var(--f-b, "Inter", sans-serif); font-size: 9.5pt;
  color: var(--text-secondary); margin: 0; max-width: 110mm; line-height: 1.45;
}
.cta-row .arrow {
  font-family: var(--f-h); font-size: 22pt; color: var(--accent-bright);
}

/* slide-header-strip (P0 #2) — top breadcrumb + brand mark */
.slide-header-strip {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4mm 14mm; border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}
.slide-header-strip .breadcrumb {
  font-family: var(--f-m, "Roboto Mono", monospace); font-size: 9pt;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-bright);
}
.slide-header-strip .brand-mark {
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif);
  font-weight: 400; font-size: 10pt; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text);
}

/* agenda-3step (P0 #15) — promoted from collateral.html */
.agenda-3step {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 4mm; align-items: stretch;
}
.agenda-3step .step {
  padding: 5mm; background: var(--surface-card);
  border: 1px solid var(--border); border-radius: 4px;
  display: flex; flex-direction: column; gap: 2mm; position: relative;
}
.agenda-3step .step .num {
  font-family: var(--f-m, "Roboto Mono", monospace); font-size: 9pt;
  letter-spacing: 0.16em; color: var(--accent-bright);
}
.agenda-3step .step .verb {
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif);
  font-weight: 400; font-size: 14pt; color: var(--text); line-height: 1.1;
}
.agenda-3step .step .duration {
  font-family: var(--f-m); font-size: 8.5pt; color: var(--text-muted);
  letter-spacing: 0.05em;
}
.agenda-3step .step .outcome {
  font-family: var(--f-b, "Inter", sans-serif); font-weight: 350;
  font-size: 9.5pt; color: var(--text-secondary); line-height: 1.45;
  margin: 0;
}
.agenda-with-accent { position: relative; }
.agenda-with-accent .accent {
  position: absolute; top: -2mm; right: 0; width: 24mm; height: 24mm;
  object-fit: contain; opacity: 0.55; pointer-events: none;
}

/* feature-pair-grid (P0 #26) — 2-column bullet split */
.feature-pair-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8mm;
}
.feature-pair-grid .pair {
  display: flex; flex-direction: column; gap: 2.5mm;
}
.feature-pair-grid .pair h4 {
  margin: 0; font-family: var(--f-h, "Saira Semi Condensed", sans-serif);
  font-weight: 500; font-size: 13pt; color: var(--accent-bright);
}
.feature-pair-grid .pair ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 1.5mm;
}
.feature-pair-grid .pair li {
  font-family: var(--f-b, "Inter", sans-serif); font-weight: 350;
  font-size: 9.5pt; color: var(--text-secondary); line-height: 1.45;
  padding-left: 4mm; position: relative;
}
.feature-pair-grid .pair li::before {
  content: '\00B7'; color: var(--accent-bright);
  position: absolute; left: 0; font-weight: 700; font-size: 14pt;
  line-height: 1; top: 0.5mm;
}

/* card-result mini (P0 #20) — promoted from collateral.html */
.card-result {
  position: relative; padding: 5mm; background: var(--surface-card);
  border: 1px solid var(--border); border-radius: 4px;
}
.card-result[data-variant="mini"] .corner-ribbon {
  position: absolute; top: 4mm; right: 4mm;
  font-family: var(--f-m, "Roboto Mono", monospace); font-size: 8pt;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-bright); padding: 1mm 3mm;
  background: var(--accent-a08); border-radius: 999px;
  border: 1px solid var(--accent-a26);
}
.card-result .logo-row {
  display: flex; align-items: center; gap: 4mm; margin-bottom: 3mm;
}
.card-result .logo-row img {
  height: 8mm; width: auto; max-width: 36mm;
  background: rgba(255,255,255,0.92); padding: 1.5mm 3mm; border-radius: 3px;
}
.card-result .industry {
  font-family: var(--f-m); font-size: 8.5pt; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--text-muted);
}
.card-result .outcome {
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif);
  font-weight: 400; font-size: 12pt; color: var(--text); line-height: 1.35;
  margin: 0 0 2mm;
}
.card-result .outcome strong {
  color: var(--accent-bright); font-weight: 500;
}
.card-result .metric {
  font-family: var(--f-m, "Roboto Mono", monospace); font-size: 9pt;
  color: var(--accent-bright);
}

/* contact-strip (P0 #21) — footer contact pair */
.contact-strip {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6mm; padding: 5mm 6mm;
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: 6px;
}
.contact-strip .person {
  display: flex; flex-direction: column; gap: 1mm;
}
.contact-strip .person .role {
  font-family: var(--f-m, "Roboto Mono", monospace); font-size: 8pt;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-bright);
}
.contact-strip .person .name {
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif);
  font-weight: 500; font-size: 13pt; color: var(--text);
}
.contact-strip .person .email {
  font-family: var(--f-m, "Roboto Mono", monospace); font-size: 9pt;
  color: var(--text-secondary);
}

/* aws-strip + premier-note (two-pager footer) */
.aws-strip {
  display: flex; gap: 4mm; align-items: center; flex-wrap: wrap;
  padding: 3mm 6mm; margin-top: 4mm;
  border-top: 1px solid var(--border);
}
.aws-strip .label {
  font-family: var(--f-m, "Roboto Mono", monospace); font-size: 8pt;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}
.aws-strip img { height: 14mm; width: auto; }
.premier-note {
  font-family: var(--f-m, "Roboto Mono", monospace); font-size: 7.5pt;
  letter-spacing: 0.10em; color: var(--text-muted);
  padding: 3mm 14mm 4mm; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: 4mm;
}
.premier-note strong { color: var(--text); font-weight: 500; } /* brand rule: text never themed */


/* ============================================================
   === TOC / AGENDA VARIANTS (P0 deck-component gap A) ===
   Promoted 2026-05-09 from collateral.html scoped CSS so deck
   builds can author canonical TOC structures. Five variants:
   vertical, timeline, 2col, tabs, sidebar. Plus the audit-named
   "agenda-timeline-4up", "agenda-tab-grouped", and
   "agenda-sidebar-anchor" aliases.
   ============================================================ */

.toc-vertical {
  padding: var(--space-6); background: var(--surface-card);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  display: flex; flex-direction: column; gap: var(--space-1);
}
.toc-vertical .row {
  display: grid; grid-template-columns: 28px 1fr auto;
  align-items: center; gap: 14px; padding: 12px 0;
  border-bottom: 1px dashed var(--border);
}
.toc-vertical .row:last-child { border-bottom: 0; }
.toc-vertical .dot {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--accent-bright); margin: 0 auto;
  transition: background 220ms;
}
.toc-vertical .row[data-state="active"] .dot {
  background: var(--accent-bright); box-shadow: 0 0 12px var(--accent-a45);
}
.toc-vertical .row[data-state="done"] .dot {
  background: var(--accent-bright); opacity: 0.5;
}
.toc-vertical .row .name {
  font-family: var(--f-h); font-weight: 300; font-size: 16px; color: var(--text);
}
.toc-vertical .row .pg {
  font-family: var(--f-m); font-size: 10px; color: var(--text-m); letter-spacing: 0.08em;
}

.toc-timeline {
  padding: var(--space-6); background: var(--surface-card);
  border: 1px solid var(--border); border-radius: var(--radius-md);
}
.toc-timeline .stages {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 0; position: relative;
}
.toc-timeline .stages::before {
  content: ''; position: absolute; top: 18px; left: 6%; right: 6%;
  height: 2px; background: linear-gradient(90deg, var(--accent-a26), var(--accent-bright));
}
.toc-timeline .stage {
  position: relative; display: flex; flex-direction: column;
  align-items: center; gap: 10px;
}
.toc-timeline .marker {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(5,5,12,0.95); border: 2px solid var(--accent-bright);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-m); font-size: 12px; color: var(--accent-bright);
  position: relative; z-index: 1;
}
.toc-timeline .stage[data-state="active"] .marker {
  background: var(--accent-bright); color: #05050c;
  box-shadow: 0 0 18px var(--accent-a45);
}
.toc-timeline .stage h6 {
  font-family: var(--f-h); font-weight: 300; font-size: 13px;
  color: var(--text); margin: 0; text-align: center;
}
.toc-timeline .stage span.tip {
  font-family: var(--f-m); font-size: 9px;
  color: var(--text-m); letter-spacing: 0.06em; text-align: center;
}

/* Audit alias: 4-up horizontal agenda timeline (active state on current step). */
.agenda-timeline-4up {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6); align-items: stretch;
}
.agenda-timeline-4up .step {
  padding: var(--space-4); background: var(--surface-card);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.agenda-timeline-4up .step .num {
  font-family: var(--f-m); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-bright);
}
.agenda-timeline-4up .step h6 {
  margin: 0; font-family: var(--f-h); font-weight: 400;
  font-size: 18px; color: var(--text);
}
.agenda-timeline-4up .step p {
  margin: 0; font-family: var(--f-b); font-size: 13px;
  color: var(--text-s, var(--text-secondary)); line-height: 1.5;
}
.agenda-timeline-4up .step[data-state="active"] {
  background: var(--accent-a18); border-color: var(--accent-a45);
  box-shadow: 0 0 24px var(--accent-a08);
}

.toc-2col {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
}
.toc-2col .item {
  padding: 16px 18px; background: var(--surface-card);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  display: grid; grid-template-columns: 32px 1fr; gap: var(--space-3);
}
.toc-2col .item .num {
  font-family: var(--f-h); font-weight: 200; font-size: 28px;
  color: var(--accent-bright); line-height: 1;
}
.toc-2col .item .meta h6 {
  margin: 0 0 6px; font-family: var(--f-h); font-weight: 300;
  font-size: 15px; color: var(--text);
}
.toc-2col .item .meta p {
  margin: 0; font-family: var(--f-b); font-size: 11px;
  color: var(--text-s, var(--text-secondary)); line-height: 1.5;
}

.toc-tabs {
  padding: var(--space-6); background: var(--surface-card);
  border: 1px solid var(--border); border-radius: var(--radius-md);
}
.toc-tabs .tab-row {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-1);
  padding: var(--space-1); background: rgba(0,0,0,0.3);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 18px;
}
.toc-tabs .tab {
  padding: 8px 12px; font-family: var(--f-m); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-m);
  text-align: center; border-radius: 7px; cursor: default;
  transition: background 220ms, color 220ms;
}
.toc-tabs .tab[data-state="active"] {
  background: linear-gradient(180deg, var(--accent-a26), var(--accent-a08));
  color: var(--text); border: 1px solid var(--accent-a45);
}
.toc-tabs .tab-content { padding: 14px 0; }
.toc-tabs .tab-content h5 {
  font-family: var(--f-h); font-weight: 300; font-size: 18px;
  margin: 0 0 8px; color: var(--text);
}
.toc-tabs .tab-content p {
  font-family: var(--f-b); font-size: 12px;
  color: var(--text-s, var(--text-secondary)); line-height: 1.6; margin: 0;
}

/* Audit alias: tab-grouped agenda (vertical tab list with active rail). */
.agenda-tab-grouped {
  display: flex; flex-direction: column; gap: var(--space-3);
}
.agenda-tab-grouped .tab {
  padding: var(--space-3) var(--space-6); cursor: pointer;
  font-family: var(--f-m); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-m);
  background: var(--surface-card); border: 1px solid var(--border);
  border-left: 3px solid transparent; border-radius: var(--radius-sm);
  transition: background 220ms, color 220ms, border-color 220ms;
}
.agenda-tab-grouped .tab[data-active="true"] {
  background: var(--accent-a26); color: var(--text);
  border-left: 3px solid var(--accent-bright);
}

.toc-sidebar {
  display: grid; grid-template-columns: 220px 1fr;
  gap: var(--space-6); padding: var(--space-6);
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.toc-sidebar .rail {
  padding: 8px 0; border-right: 1px solid var(--border);
  padding-right: 16px; display: flex; flex-direction: column; gap: var(--space-1);
}
.toc-sidebar .rail a {
  display: flex; gap: 10px; padding: 8px 12px;
  font-family: var(--f-m); font-size: 11px; color: var(--text-m);
  text-decoration: none; border-radius: 6px;
  border-left: 2px solid transparent;
  transition: color 220ms, border-color 220ms;
}
.toc-sidebar .rail a[data-state="active"] {
  color: var(--text); border-left-color: var(--accent-bright);
  background: var(--accent-a08);
}
.toc-sidebar .rail a:hover { color: var(--text); }
.toc-sidebar .preview { padding: 6px 0; }
.toc-sidebar .preview h5 {
  margin: 0 0 8px; font-family: var(--f-h); font-weight: 300;
  font-size: 18px; color: var(--text);
}
.toc-sidebar .preview p {
  margin: 0; font-family: var(--f-b); font-size: 12px;
  color: var(--text-s, var(--text-secondary)); line-height: 1.6;
}

/* Audit alias: sidebar-anchor agenda (left rail with anchor links). */
.agenda-sidebar-anchor {
  display: grid; grid-template-columns: 280px 1fr; gap: var(--space-8);
}
.agenda-sidebar-anchor .anchor-rail {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4) 0;
  border-right: 1px solid var(--border);
}
.agenda-sidebar-anchor .anchor-rail a {
  padding: var(--space-2) 0; padding-right: var(--space-4);
  font-family: var(--f-m); font-size: 12px; letter-spacing: 0.06em;
  color: var(--text-secondary, var(--text-s)); text-decoration: none;
  transition: color 220ms;
}
.agenda-sidebar-anchor .anchor-rail a:hover { color: var(--text); }
.agenda-sidebar-anchor .anchor-rail a[aria-current="step"] {
  color: var(--accent-bright); font-weight: 500;
}


/* ============================================================
   === HEXAGON CALLOUT CLUSTER (P0 deck-component gap B) ===
   5-stage process flow with radiating callouts around a hex.
   Uses SVG hexagon shape via inline <svg> in markup.
   ============================================================ */
.hex-cluster {
  position: relative; width: 100%; aspect-ratio: 1.155;
  max-width: 560px; margin: 0 auto;
}
.hex-cluster .hex-center {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.hex-cluster .hex-center svg {
  width: 60%; height: 60%;
  fill: var(--accent-a08); stroke: var(--accent-bright); stroke-width: 1.5;
}
.hex-cluster .hex-center .hex-label {
  position: absolute;
  font-family: var(--f-h, "Saira Semi Condensed", sans-serif);
  font-weight: 400; font-size: 18px;
  color: var(--text); text-align: center; max-width: 140px;
}
.hex-cluster .hex-callout {
  position: absolute; max-width: 160px;
  padding: var(--space-3); background: var(--surface-card);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.hex-cluster .hex-callout .num {
  font-family: var(--f-m); font-size: 10px; letter-spacing: 0.14em;
  color: var(--accent-bright);
}
.hex-cluster .hex-callout h6 {
  margin: 4px 0 6px; font-family: var(--f-h); font-weight: 400;
  font-size: 14px; color: var(--text);
}
.hex-cluster .hex-callout p {
  margin: 0; font-family: var(--f-b); font-size: 11px;
  color: var(--text-s, var(--text-secondary)); line-height: 1.45;
}
.hex-cluster .hex-callout[data-position="top"]          { top: 0;    left: 50%; transform: translate(-50%, -110%); }
.hex-cluster .hex-callout[data-position="top-right"]    { top: 12%;  right: 0;  transform: translate(110%, -10%); }
.hex-cluster .hex-callout[data-position="bottom-right"] { bottom: 12%; right: 0; transform: translate(110%, 10%); }
.hex-cluster .hex-callout[data-position="bottom"]       { bottom: 0; left: 50%; transform: translate(-50%, 110%); }
.hex-cluster .hex-callout[data-position="bottom-left"]  { bottom: 12%; left: 0; transform: translate(-110%, 10%); }
.hex-cluster .hex-callout[data-position="top-left"]     { top: 12%;  left: 0;   transform: translate(-110%, -10%); }


/* ============================================================
   === PRICING TILE MULTI-TIER (P0 deck-component gap C) ===
   .pricing-3up promoted from collateral.html. Adds canonical
   .roi-calculator alongside.
   ============================================================ */
.pricing-3up {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);
}
.pricing-3up .tier-card {
  padding: var(--space-6); background: var(--surface-card);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  display: flex; flex-direction: column; gap: 10px; position: relative;
}
.pricing-3up .tier-card[data-emphasize="true"],
.pricing-3up .pricing-tile[data-tier="featured"] {
  background: var(--accent-a08); border-color: var(--accent-a45);
  transform: translateY(-4px);
}
.pricing-3up .tier-card[data-emphasize="true"]::before {
  content: 'Most chosen'; position: absolute; top: -10px; right: 16px;
  padding: 4px 10px; background: var(--accent-bright); color: #05050c;
  font-family: var(--f-m); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; border-radius: 4px; font-weight: 500;
}
.pricing-3up .tier-card .tier-lbl {
  font-family: var(--f-m); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent-bright);
}
.pricing-3up .tier-card h5 {
  margin: 0; font-family: var(--f-h); font-weight: 300;
  font-size: 22px; color: var(--text);
}
.pricing-3up .tier-card .anchor {
  font-family: var(--f-h); font-weight: 200; font-size: 32px;
  color: var(--text); line-height: 1; margin: 4px 0 0;
}
.pricing-3up .tier-card .anchor span {
  font-family: var(--f-m); font-size: 11px;
  color: var(--text-m); margin-left: 6px;
}
.pricing-3up .tier-card ul {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: flex; flex-direction: column; gap: 6px;
}
.pricing-3up .tier-card li {
  font-family: var(--f-b); font-size: 12px; color: var(--text-s, var(--text-secondary));
  padding-left: 16px; position: relative; line-height: 1.5;
}
.pricing-3up .tier-card li::before {
  content: '\2713'; position: absolute; left: 0; color: var(--accent-bright);
}
.pricing-3up .tier-card .pick { margin-top: auto; padding-top: 12px; }
.pricing-3up .tier-card .pick a {
  display: block; text-align: center;
  font-family: var(--f-m); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 10px; border-radius: 8px;
  background: var(--accent-a08); border: 1px solid var(--accent-a26);
  color: var(--text); text-decoration: none;
}
.pricing-3up .tier-card[data-emphasize="true"] .pick a {
  background: linear-gradient(180deg, var(--accent-bright), var(--accent-a45));
  color: #05050c; border-color: var(--accent-bright); font-weight: 500;
}

/* ROI calculator (input + output side-by-side with delta payoff). */
.roi-calculator {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-8); padding: var(--space-6);
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.roi-calculator .input,
.roi-calculator .output {
  display: flex; flex-direction: column; gap: var(--space-3);
}
.roi-calculator .input h6,
.roi-calculator .output h6 {
  margin: 0; font-family: var(--f-m); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-m);
}
.roi-calculator .row {
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--space-3); align-items: baseline;
  padding: 8px 0; border-bottom: 1px dashed var(--border);
}
.roi-calculator .row .label {
  font-family: var(--f-b); font-size: 13px; color: var(--text-s, var(--text-secondary));
}
.roi-calculator .row .value {
  font-family: var(--f-h); font-weight: 400; font-size: 16px; color: var(--text);
}
.roi-calculator .delta {
  margin-top: auto; padding-top: var(--space-3);
  font-family: var(--f-h); font-weight: 300;
  font-size: clamp(28px, 3vw, 48px); line-height: 1.05;
  color: var(--accent-good, var(--accent-bright));
}
.roi-calculator .delta-label {
  font-family: var(--f-m); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-m);
}


/* ============================================================
   === ENGAGEMENT MODEL (P0 deck-component gap D) ===
   Gates + outcomes visualization (e.g.,
   "Discovery -> Foundation -> Build -> Hand-over").
   Each .gate is a vertical stack: gate-name + gate-headline +
   gate-outcomes (3-5 bullets).
   ============================================================ */
.engagement-model {
  display: grid;
  grid-template-columns: repeat(var(--gates, 4), 1fr);
  gap: var(--space-4); position: relative;
  padding-top: var(--space-8); /* clearance for the connector */
}
.engagement-model::before {
  content: ''; position: absolute;
  left: 0; right: 0; top: 32px; height: 2px;
  background: linear-gradient(90deg,
    var(--accent-a06, rgba(255,255,255,0.06)),
    var(--accent-bright),
    var(--accent-a06, rgba(255,255,255,0.06)));
}
.engagement-model .gate {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); background: var(--surface-card);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  position: relative;
}
.engagement-model .gate::before {
  content: ''; position: absolute; top: -22px; left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent-bright); box-shadow: 0 0 16px var(--accent-a45);
}
.engagement-model .gate .gate-name {
  font-family: var(--f-m); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-bright);
}
.engagement-model .gate .gate-headline {
  margin: 0; font-family: var(--f-h); font-weight: 400;
  font-size: 20px; line-height: 1.15; color: var(--text);
}
.engagement-model .gate .gate-outcomes {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.engagement-model .gate .gate-outcomes li {
  font-family: var(--f-b); font-size: 13px; line-height: 1.5;
  color: var(--text-s, var(--text-secondary));
  padding-left: 14px; position: relative;
}
.engagement-model .gate .gate-outcomes li::before {
  content: '\203A'; position: absolute; left: 0; color: var(--accent);
}


/* ============================================================
   === WORKSHOP CALENDAR PICKER (P0 deck-component gap E) ===
   Date-aware CTA visual. 280px month-grid + booking-cta panel.
   ============================================================ */
.workshop-calendar {
  display: grid; grid-template-columns: 280px 1fr;
  gap: var(--space-8);
  padding: var(--space-6);
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.workshop-calendar .month-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-3);
}
.workshop-calendar .month-head .month {
  font-family: var(--f-h); font-weight: 400; font-size: 16px; color: var(--text);
}
.workshop-calendar .month-head .nav {
  font-family: var(--f-m); font-size: 11px; color: var(--text-m);
  letter-spacing: 0.1em;
}
.workshop-calendar .weekday-row {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: var(--space-1); margin-bottom: 4px;
}
.workshop-calendar .weekday-row span {
  font-family: var(--f-m); font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-m); text-align: center;
}
.workshop-calendar .month-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: var(--space-1);
}
.workshop-calendar .day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-family: var(--f-m); font-size: 12px; color: var(--text-s, var(--text-secondary));
  border: 1px solid transparent; border-radius: 6px;
  background: transparent;
}
.workshop-calendar .day[data-status="available"] {
  background: var(--surface-card); border-color: var(--border); cursor: pointer;
  color: var(--text);
}
.workshop-calendar .day[data-status="available"]:hover {
  background: var(--accent-a08); border-color: var(--accent-a26);
}
.workshop-calendar .day[data-status="featured"] {
  background: var(--accent-a26); border-color: var(--accent-bright);
  color: var(--text); font-weight: 500;
  box-shadow: 0 0 16px var(--accent-a08);
}
.workshop-calendar .day[data-status="full"] {
  background: rgba(0,0,0,0.3); color: var(--text-muted, var(--text-m));
  cursor: not-allowed;
}
.workshop-calendar .booking-cta {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6); background: var(--accent-a04);
  border: 1px solid var(--accent-a26); border-radius: var(--radius-md);
}
.workshop-calendar .booking-cta .label {
  font-family: var(--f-m); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-bright);
}
.workshop-calendar .booking-cta h5 {
  margin: 0; font-family: var(--f-h); font-weight: 400;
  font-size: 22px; line-height: 1.2; color: var(--text);
}
.workshop-calendar .booking-cta p {
  margin: 0; font-family: var(--f-b); font-size: 13px;
  color: var(--text-s, var(--text-secondary)); line-height: 1.5;
}
.workshop-calendar .booking-cta .pick {
  margin-top: auto; padding: var(--space-3) var(--space-6);
  background: linear-gradient(180deg, var(--accent-bright), var(--accent-a45));
  color: #05050c; border-radius: 8px;
  font-family: var(--f-m); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; text-align: center; text-decoration: none;
  font-weight: 500;
}


/* ============================================================
   COLLATERAL MOTION & COMPONENTS — added 2026-05-09
   Canonical extensions to support marketing collateral (decks,
   two-pagers, win-wires, case-studies). Authored after the v8
   AK Intro Connect deck audit surfaced 4 components that decks
   needed but no canonical existed for, plus 4 motion utilities
   that lived in canonical CSS but were undocumented and unused.

   Inventory:
     M-01  .count-up                  Number count-up via [data-count]
     M-02  .badge-float               Gentle Y bounce on certification badges
     M-03  .pulse-dot                 Status indicator pulse (color via CSS var)
     M-04  .divider-light-dot         (already shipped in components-full.css line 2261;
                                      promoted into the deck pipeline via collateral.html demos)
     C-01  .gptw-badge                Great Place To Work certified pill
     C-02  .pricing-pill              Small orange-gradient pricing chip
     C-03  .section-divider-numeral   Giant outlined numeral + h1 + light-dot section break
     C-04  .logo-fallback-text        Text-only customer logo with optional checkmark

   Every block here is consumable directly via canonical class names.
   No project-local shadows. The behavior layer for .count-up lives in
   slides.js (IIFE that observes [data-count] elements and animates).
   ============================================================ */

/* M-01 · count-up — fires when [data-count] enters viewport.
   Behavior: see slides.js §count-up. */
.count-up { font-variant-numeric: tabular-nums; }

/* M-02 · badge-float — gentle Y bounce, 4s sine. Used on certification
   badges (AWS Premier, GPTW) on cover slides. Pauses on hover. */
.badge-float { animation: badgeFloat 4s ease-in-out infinite; }
.badge-float:hover { animation-play-state: paused; }
@keyframes badgeFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* M-03 · pulse-dot — small status indicator that pulses opacity. Color
   inherited from --pulse-color (defaults to --accent-bright). Use on
   "live" / "active" / current-stage markers. */
.pulse-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--pulse-color, var(--accent-bright));
  box-shadow: 0 0 0 0 var(--pulse-color, var(--accent-bright));
  animation: pulseDotRing 2.4s ease-out infinite;
}
@keyframes pulseDotRing {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pulse-color, var(--accent-bright)) 50%, transparent); }
  70%  { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* C-01 · gptw-badge — Great Place To Work certified pill.
   Markup: <div class="gptw-badge"><div class="gptw-top">Great<br>Place<br>To<br>Work.</div><div class="gptw-cert">Certified</div><div class="gptw-date">DEC 2021–DEC 2022</div></div>
   Default position is static; for cover-slide overlays use
   data-position="top-right" for absolute top:0 right:0. */
.gptw-badge {
  width: 168px; height: 168px; padding: 18px 18px 14px;
  box-sizing: border-box;
  background: linear-gradient(180deg, #f06fb1 0%, #f06fb1 60%, #cc4d8c 100%);
  display: flex; flex-direction: column; justify-content: space-between;
  align-items: flex-start; z-index: 5;
}
.gptw-badge[data-position="top-right"] { position: absolute; top: 0; right: 0; }
.gptw-badge .gptw-top {
  font-family: var(--f-h); font-weight: 600; font-size: 22px;
  line-height: 1.02; color: #fff; letter-spacing: -0.01em;
}
.gptw-badge .gptw-cert {
  font-family: var(--f-h); font-weight: 600; font-size: 14px;
  color: #fff; line-height: 1.1; padding: 4px 8px;
  background: linear-gradient(180deg, #00bbe5, #008bbf);
  align-self: stretch; text-align: center;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.gptw-badge .gptw-date {
  font-family: var(--f-b); font-weight: 500; font-size: 9px;
  color: #fff; letter-spacing: 0.04em;
  text-align: center; align-self: stretch;
}

/* C-02 · pricing-pill — small chip showing a price + a unit qualifier.
   Markup: <span class="pricing-pill">$2,500/month<br>60 hours</span>
   Or with a [data-tone] modifier for non-orange themes. */
.pricing-pill {
  padding: 14px 22px;
  background: linear-gradient(135deg, var(--logo-orange, #C45D14) 0%, color-mix(in srgb, var(--logo-orange, #C45D14) 85%, white) 100%);
  color: #001026;
  font-family: var(--f-h); font-weight: 600; font-size: 16px;
  line-height: 1.1; border-radius: 8px;
  text-align: center; min-width: 140px;
  display: inline-block;
}
.pricing-pill[data-tone="cyan"]  { background: linear-gradient(135deg, var(--logo-cyan, #009be5), color-mix(in srgb, var(--logo-cyan, #009be5) 80%, white)); }
.pricing-pill[data-tone="green"] { background: linear-gradient(135deg, var(--logo-green, #95C11F), color-mix(in srgb, var(--logo-green, #95C11F) 80%, white)); }

/* C-03 · section-divider-numeral — full-slide section break with a giant
   outlined numeral on the right + h1 on the left + canonical
   .divider-light-dot underneath. AP-23 web cap intentionally exceeded
   for slide-canvas hero impact (1080-fixed canvas, not responsive web).
   Markup:
   <div class="section-divider-numeral">
     <p class="sdn-numeral">01</p>
     <div class="sdn-content">
       <p class="sdn-eyebrow">Section</p>
       <h1 class="sdn-headline">Recent wins.</h1>
       <div class="divider-light-dot"></div>
     </div>
   </div> */
.section-divider-numeral {
  position: relative; display: grid; place-items: center;
  width: 100%; height: 100%; min-height: 600px;
}
.section-divider-numeral .sdn-numeral {
  position: absolute; right: -20px; top: 50%; transform: translateY(-50%);
  font-family: var(--f-h); font-weight: 200; font-size: 580px;
  line-height: 0.85; color: rgba(123,198,255,0.06);
  margin: 0; pointer-events: none; user-select: none;
}
.section-divider-numeral .sdn-content {
  position: relative; z-index: 2; max-width: 1100px; padding: 0 80px;
}
.section-divider-numeral .sdn-eyebrow {
  font-family: var(--f-m); font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-bright); margin: 0 0 16px;
}
.section-divider-numeral .sdn-headline {
  font-family: var(--f-h); font-weight: 200; font-size: 88px;
  line-height: 1.02; letter-spacing: -0.02em;
  color: var(--text); margin: 0;
}
.section-divider-numeral .divider-light-dot {
  position: relative; margin-top: 32px;
  height: 1px; width: 100%; max-width: 600px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--accent) 30%, var(--accent-bright) 50%, var(--accent) 70%,
    transparent 100%);
  overflow: visible;
}

/* C-04 · logo-fallback-text — used on case-study slides when a
   customer logo image isn't available. Optional [data-glyph] adds a
   prepended visual cue. Color customizable via --logo-fallback-color. */
.logo-fallback-text {
  font-family: var(--f-h); font-weight: 600; font-size: 28px;
  letter-spacing: 0.04em; line-height: 1.05;
  color: var(--logo-fallback-color, var(--text));
  display: inline-flex; align-items: center; gap: 8px;
}
.logo-fallback-text[data-glyph="check"]::before {
  content: '✓'; color: var(--logo-green, #95C11F);
  font-size: 28px; font-weight: 700;
}


/* ============================================================
   ADDED 2026-05-09 (audit Phase A)

   Component duplicate audit at
   projects/collateral-style-guide-2026/reviews/component-duplicate-audit-2026-05-09.md
   identified 17 dupes across 9 clusters (~465 lines could be culled).
   Phase A ships zero-breakage quick wins from that audit; Phase B/C/D
   are dedicated cluster sweeps with consumer-impact testing.

   Phase A items shipped here:

   1. Canonical base .eyebrow rule.  Until now, .eyebrow had no base
      rule — only scoped variants (.divider-context .eyebrow,
      .card-compare .side .eyebrow, .sheet-hero .eyebrow, etc.).
      Authors had to redeclare it inline in collateral.html as
      .demo-eyebrow / .section-eyebrow / etc.  The base rule below
      lets every consumer just use .eyebrow.

      Brand rule applied: color is var(--text-muted) (NOT --accent-bright).
      Theme accent on tiny mono-caps text was bleeding pink/cyan/orange
      under data-theme contexts.  Scoped variants may opt back in to
      accent where semantically right (e.g., .card-compare .side[data-kind="after"]
      .eyebrow legitimately wants accent for the "after" emphasis).
   ============================================================ */
.eyebrow {
  font-family: var(--f-m, "Roboto Mono", monospace);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted, var(--text-secondary, var(--text)));
  margin: 0;
  display: inline-block;
}



/* ============================================================
   ADDED 2026-05-11 (deck patterns Phase 1)

   Promoted from the AK Intro Connect deck's inline <style>. These are
   patterns that proved out at deck scale and are useful across other
   collateral (decks, two-pagers, one-pagers, win-wires, future
   workshop sheets). Deck-specific 1920×1080 canvas-fit adapters stayed
   in deck files; only generic patterns are promoted here.

   Source: dist/decks/ak-intro-connect/index.html commit 68dca3bf
   ============================================================ */


/* ============================================================
   D-01 · .cover-proof · 3-row proof callout for cover heroes
   --------------------------------------------------------
   Sits on the right side of a cover slide / two-page header
   alongside the main headline. Each .proof-row pairs a big stat
   (200|7|300+) with a one-line attribution.

   Markup:
     <div class="cover-proof">
       <p class="cover-proof-label">Connect customers in production</p>
       <div class="proof-row">
         <div class="proof-num">30%</div>
         <div class="proof-text">faster call handling<span class="lbl">Cinemark · Entertainment</span></div>
       </div>
       ... repeat
     </div>
   ============================================================ */
.cover-proof {
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px 32px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.cover-proof-label {
  font-family: var(--f-m); font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent-bright);
  margin: 0;
}
.cover-proof .proof-row {
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.cover-proof .proof-row:last-child { border-bottom: none; }
.cover-proof .proof-num {
  font-family: var(--f-h); font-weight: 200; font-size: 38px;
  line-height: 1; color: var(--text); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; min-width: 110px;
}
.cover-proof .proof-num .plus { color: var(--accent-bright); font-weight: 300; }
.cover-proof .proof-text {
  font-family: var(--f-b); font-weight: 400; font-size: 14px;
  color: var(--text); line-height: 1.4;
}
.cover-proof .proof-text .lbl {
  display: block; font-family: var(--f-m); font-size: 9.5px;
  letter-spacing: 0.14em; color: var(--text-secondary);
  text-transform: uppercase; margin-top: 2px;
}


/* ============================================================
   D-02 · .badge-grid + .badge-tile · AWS credentials visual grid
   --------------------------------------------------------
   White-card tiles holding AWS Competency / SDP badge PNGs. Replaces
   the text-list "+5 more" treatment. Defaults to 8-col grid; use
   inline grid-template-columns override for other counts.

   Markup:
     <div class="badge-grid">
       <div class="badge-tile"><img src="/assets/aws-badges/generative-ai-competency.svg" alt=""></div>
       <div class="badge-tile"><img src="/assets/aws-badges/ai-services-competency.png" alt=""></div>
       ... repeat
     </div>
   ============================================================ */
.badge-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px;
}
.badge-tile {
  padding: 12px;
  background: rgba(255,255,255,0.94);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 220ms var(--ease-default, ease-out), box-shadow 220ms ease;
}
.badge-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 155, 229, 0.18);
}
.badge-tile img { max-width: 100%; max-height: 100%; object-fit: contain; }


/* ============================================================
   D-03 · .hubs-row · global hubs pill strip
   --------------------------------------------------------
   Inline row of country / city pills with a leading label. Useful on
   About pages, partner pages, and any "where we are" surface.

   Markup:
     <div class="hubs-row">
       <span class="hubs-lbl">Major hubs</span>
       <span class="hub">United States</span>
       <span class="hub">United Kingdom</span>
       <span class="hub">UAE</span>
       <span class="hub">India</span>
       <span class="hub">Canada</span>
     </div>
   ============================================================ */
.hubs-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 22px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.hubs-row .hubs-lbl {
  font-family: var(--f-m); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-secondary);
  margin-right: 8px;
}
.hubs-row .hub {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent-a08);
  border: 1px solid var(--accent-a26);
  font-family: var(--f-m); font-size: 11px;
  color: var(--text);
  letter-spacing: 0.04em;
}


/* ============================================================
   D-04 · .pod-timeline · numbered 3-step engagement timeline
   --------------------------------------------------------
   Vertical numbered list with Saira 200 numerals + step title + body.
   Useful for engagement models, week-by-week plans, sprint timelines.

   Markup:
     <div class="pod-timeline">
       <p class="pod-timeline-label">Engagement timeline</p>
       <div class="pod-timeline-step">
         <div class="step-num">01</div>
         <div class="step-body">
           <p class="step-title">Week 1 — Discovery + assessment</p>
           <p class="step-desc">Architecture review, gap analysis, prioritized roadmap.</p>
         </div>
       </div>
       ... repeat
     </div>
   ============================================================ */
.pod-timeline {
  padding: 22px 24px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 16px;
}
.pod-timeline-label {
  font-family: var(--f-m); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-bright); margin: 0;
}
.pod-timeline-step {
  display: grid; grid-template-columns: 30px 1fr; gap: 16px; align-items: start;
}
.pod-timeline-step .step-num {
  font-family: var(--f-h); font-weight: 200; font-size: 24px;
  color: var(--text); line-height: 1;
}
.pod-timeline-step .step-title {
  font-family: var(--f-h); font-weight: 400; font-size: 14px;
  color: var(--text); margin: 0 0 4px;
}
.pod-timeline-step .step-desc {
  font-family: var(--f-b); font-weight: 350; font-size: 12.5px;
  color: var(--text-secondary); margin: 0; line-height: 1.5;
}


/* ============================================================
   D-05 · .glance-card · capability card with footer-strip
   --------------------------------------------------------
   Replaces the flat 3-col "Offering / Included / Outcomes" table.
   Each card: icon → name → outcome line → tech chips → footer-strip
   with concrete metrics (SLA / coverage / latency).

   Markup:
     <div class="glance-card">
       <div class="glance-icon"><img src="..." alt=""></div>
       <h3 class="glance-title">CRM & App Integration</h3>
       <p class="glance-outcome">Fast CRM/ERP integration with full customer context.</p>
       <div class="glance-chips">
         <span class="glance-chip">Connect APIs</span>
         <span class="glance-chip">Lambda</span>
       </div>
       <div class="glance-footer">
         <span><strong>Outcome</strong> Single agent dashboard</span>
         <span><strong>SLA</strong> 99.9% uptime</span>
       </div>
     </div>
   ============================================================ */
.glance-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 24px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  position: relative;
}
.glance-card .glance-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  padding: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.glance-card .glance-icon img { width: 100%; height: 100%; object-fit: contain; }
.glance-card .glance-title {
  font-family: var(--f-h); font-weight: 400; font-size: 19px;
  color: var(--text); margin: 0; line-height: 1.2;
}
.glance-card .glance-outcome {
  font-family: var(--f-b); font-weight: 350; font-size: 13px;
  color: var(--text); line-height: 1.5; margin: 0;
}
.glance-card .glance-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding-top: 6px;
}
.glance-card .glance-chip {
  padding: 3px 10px;
  background: var(--accent-a08);
  border: 1px solid var(--accent-a26);
  border-radius: 999px;
  font-family: var(--f-m); font-size: 10px;
  color: var(--text);
  letter-spacing: 0.04em;
}
.glance-card .glance-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex; gap: 16px; flex-wrap: wrap;
}
.glance-card .glance-footer span {
  font-family: var(--f-m); font-size: 10px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-secondary);
}
.glance-card .glance-footer span strong {
  color: var(--accent-bright); font-weight: 600;
}


/* ============================================================
   D-06 · .workshop-takeaways · "You leave with" bulleted list
   --------------------------------------------------------
   Bottom-anchored list inside a workshop-block (or any card) showing
   concrete artefacts the participant takes away. Use inside any
   workshop / training card to fill the bottom and answer
   "what do I actually get?"

   Markup (drop inside .workshop-block):
     <div class="workshop-takeaways">
       <p class="workshop-takeaways-label">You leave with</p>
       <ul>
         <li>Production-shaped pilot scoped to one call type</li>
         <li>Sonic gap analysis on a sample of your real calls</li>
         <li>Path to production with timeline and pod sizing</li>
       </ul>
     </div>
   ============================================================ */
.workshop-takeaways {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
}
.workshop-takeaways-label {
  font-family: var(--f-m); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-bright); margin: 0;
}
.workshop-takeaways ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.workshop-takeaways li {
  font-family: var(--f-b); font-weight: 350; font-size: 13px;
  color: var(--text);
  padding-left: 14px; position: relative;
}
.workshop-takeaways li::before {
  content: '·'; position: absolute; left: 0;
  color: var(--accent-bright); font-weight: 700;
}


/* ============================================================
   D-07 · .band-proof · service-band proof row
   --------------------------------------------------------
   Mono-caps stat row anchored to the bottom of a .service-band or
   product card. Each span: <strong>value</strong> label. Use to
   surface concrete proof points (latency, coverage, customer names).

   Markup (drop inside .service-band > div):
     <div class="band-proof">
       <span><strong>2-3s</strong> objection response</span>
       <span><strong>Native</strong> Agent Workspace</span>
     </div>
   ============================================================ */
.band-proof {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex; gap: 18px; flex-wrap: wrap;
}
.band-proof span {
  font-family: var(--f-m); font-size: 10px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-secondary);
}
.band-proof span strong {
  color: var(--accent-bright); font-weight: 600;
}


/* ============================================================
   D-08 · .thanks-customers · customer logo grid for closing slides
   --------------------------------------------------------
   Right-side grid of customer logos on a thanks/cover-closing slide.
   Reinforces "running on this today" framing. Logos white-silhouette
   PNGs at consistent 30px height.

   Markup:
     <div class="thanks-customers">
       <p class="thanks-customers-label">Customers running on Connect today</p>
       <div class="thanks-customers-grid">
         <img src="..." alt="Cinemark">
         ... repeat
       </div>
     </div>
   ============================================================ */
.thanks-customers-label {
  font-family: var(--f-m); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 18px;
  text-align: right;
}
.thanks-customers-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 32px;
  align-items: center;
}
.thanks-customers-grid img {
  height: 30px; max-width: 130px; width: auto;
  object-fit: contain; opacity: 0.75;
  filter: brightness(0) invert(1);
}


/* ============================================================
   D-09 · .cs-cols-3 .col .stroke · colored stroke head on case-study cols
   --------------------------------------------------------
   Already shipped inline in collateral.html demo CSS. Promoted to
   components.css proper so any case-study consumer gets it.
   Stroke is a 48x3px bar that opens each Problem / Solution / Impact
   column with the kind-color.
   ============================================================ */
.cs-cols-3 .col .stroke {
  width: 48px; height: 3px; border-radius: 2px;
  display: block;
}
.cs-cols-3 .col[data-kind="problem"] .stroke {
  background: var(--accent-warn, #ff8a4c);
}
.cs-cols-3 .col[data-kind="solution"] .stroke {
  background: var(--accent-bright);
}
.cs-cols-3 .col[data-kind="impact"] .stroke {
  background: var(--accent-good, var(--logo-green, #95C11F));
}


/* ============================================================
   D-10 · char-glow stagger cap · animation token tweak
   --------------------------------------------------------
   When a [data-char-glow] headline has many characters (130+), the
   per-char transition-delay cumulatively exceeds 2s. Cap via
   min(--char-i, 80) so the animation settles within ~1.5s regardless
   of headline length.

   This is a consumer rule applied AFTER the canonical char-glow
   keyframes below — overrides delay calc only, doesn't change the
   base behaviour.
   ============================================================ */
[data-char-glow] .char {
  transition-delay: calc(min(var(--char-i, 0), 80) * 18ms);
}

/* ============================================================
   D-11 · logo-band (legacy proof strip on solution subpages)
   --------------------------------------------------------
   Solution sub-pages (cueai/compliancegen/flowshift/sonic/axiom/
   evolve/compass/datashift workshops) use the legacy `.logo-band`
   markup added by _tmp-add-logo-band.cjs. Without these
   constraints the inner <img> renders at intrinsic resolution (up
   to 1440px wide) and blows out the layout. Canonical clamp:
   30px tall, 140px wide, monochrome silhouette on the dark
   surface.
   ============================================================ */
.logo-band { width: 100%; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%); }
.logo-band-track { display: flex; gap: 56px; align-items: center; justify-content: center;
  flex-wrap: wrap; padding: 8px 24px; }
.logo-band-item { display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; opacity: 0.6; transition: opacity 0.22s cubic-bezier(0.22, 0.61, 0.36, 1); }
.logo-band-item:hover { opacity: 1; }
.logo-band-item img {
  height: 30px; width: auto; max-width: 140px;
  object-fit: contain; display: block;
}

/* ============================================================
   D-12 · divider-spectrum (canonical horizontal rhythm-break)
   Used by collateral two-pagers and decks to break grid density
   between sections. Same gradient as the decks slide-line-fill.
   Definition mirrored from collateral.html line 293.
   ============================================================ */
.divider-spectrum {
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, transparent, #2d62ff 25%, #7bc6ff 50%, var(--accent-good, #95C11F) 75%, transparent);
  border-radius: 1px;
  margin: 24px 0;
}