/* ============================================
       CODEBASICS DE COHORT 1 - DARK VARIANT
       Data Analyst -> AI-Enabled Data Engineer LIVE Bootcamp
       Cohort 1. Ads launch 28 May, 2026. Starts 13 June, 2026.

       Visual system mirrored from the AI Engineering
       Cohort 2 LP, recoloured to the AE accent (purple
       per Codebasics palette) and themed for modern
       data engineering audience.

       --blue tokens carry the purple value for
       backward compat with the shared CSS.
       ============================================ */


    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
    body {
      font-family: 'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
      background: var(--bg);
      color: var(--gray-300);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-feature-settings: 'kern' 1, 'liga' 1;
      margin: 0;
      padding-bottom: 76px; /* reserve space for sticky bottom CTA */
    }
    p { margin: 0; }
    ol, ul {
    padding: 0;}
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
    hr.section-rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

    /* ---------- Layout ---------- */
    .wrap { max-width: 1140px; margin: 0 auto; padding: 0 28px; }
    .wrap-narrow { max-width: 820px; margin: 0 auto; padding: 0 28px; }
    .section { padding: var(--section-y) 0; position: relative; overflow: hidden; }
    .section--alt { background: var(--bg-2); }
    .section-center { text-align: center; }

    /* Radial blue glow (used sparingly, Codebasics signature) */
    .glow-right::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 700px 400px at 78% 50%, rgba(59,130,246,0.07), transparent 70%);
      pointer-events: none;
    }
    .glow-center::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 900px 500px at 50% 0%, rgba(59,130,246,0.08), transparent 70%);
      pointer-events: none;
    }
    .section > .wrap, .section > .wrap-narrow { position: relative; z-index: 1; }

    /* ---------- Type ---------- */
    h1, h2, h3, h4, h5 { color: var(--white); font-weight: 900; line-height: 1.08; letter-spacing: -0.025em; }
    h1 { font-size: clamp(36px, 5.6vw, 68px); }
    h2 { font-size: clamp(30px, 4.4vw, 56px); }
    h3 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; letter-spacing: -0.02em; }
    h4 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }

    .eyebrow {
      display: inline-block;
      font-size: 12px; font-weight: 600;
      color: var(--blue);
      letter-spacing: 0.18em; text-transform: uppercase;
      margin-bottom: 20px;
    }
    .eyebrow-pill {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 7px 16px;
      border: 1px solid var(--blue-line);
      background: var(--blue-soft);
      border-radius: var(--radius-pill);
      font-size: 12px; font-weight: 500;
      color: var(--blue);
      letter-spacing: 0.18em; text-transform: uppercase;
      margin-bottom: 28px;
    }
    .eyebrow-pill .dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--blue);
      box-shadow: 0 0 10px var(--blue);
      display: inline-block;
      animation: pulse 2.2s ease-in-out infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; box-shadow: 0 0 10px var(--blue); }
      50% { opacity: 0.5; box-shadow: 0 0 14px var(--blue); }
    }

    .text-gradient-highlight {
      background: linear-gradient(120deg, #3B82F6 0%, #6f53c1 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
      display: inline-block;
      padding-bottom: 0.08em;
      line-height: 1.15;
    }

    .lede {
      font-size: clamp(17px, 1.7vw, 22px);
      color: var(--gray-300);
      line-height: 1.55;
      font-weight: 400;
    }
    .small-meta { font-size: 13px; color: var(--gray-400); }

    /* ---------- Buttons ---------- */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 16px 36px;
      border-radius: var(--radius-btn);
      font-weight: 700; font-size: 15px;
      transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
      white-space: nowrap;
      letter-spacing: -0.005em;
    }
    .btn-primary {
      background: var(--blue);
      color: var(--white);
      box-shadow: 0 8px 28px rgba(111,83,193,0.32);
       border: 1.5px solid var(--line-2);
    }
    .btn-primary:hover {
      background: var(--blue-strong) !important;
      transform: translateY(-1px);
      box-shadow: 0 12px 36px rgba(111,83,193,0.45);
      border-color: var(--blue);
    }
    .btn-outline {
      background: transparent;
      color: var(--white);
      border: 1.5px solid var(--line-2);
    }
    .btn-outline:hover { border-color: var(--blue); color: var(--blue); }
    .btn-arrow::after { content: '→'; transition: transform .15s ease; font-weight: 600; }
    .btn-arrow:hover::after { transform: translateX(4px); }

    /* ============================================
       ANNOUNCEMENT BAR (top of page, above nav)
       Urgency hook for IC scarcity, dismissible.
       ============================================ */
    .announce-bar {
      position: relative; /* in normal flow, scrolls away with content */
      background: linear-gradient(90deg, var(--blue-strong) 0%, var(--blue) 50%, var(--blue-strong) 100%);
      color: var(--white);
      padding: 10px 24px;
      text-align: center;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.01em;
      z-index: 1050;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .announce-bar-inner {
      max-width: 1140px; margin: 0 auto;
      display: flex; align-items: center; justify-content: center;
      gap: 14px; flex-wrap: wrap;
    }
    .announce-bar strong {
      color: var(--white); font-weight: 800;
      letter-spacing: -0.005em;
    }
    .announce-bar a {
      color: var(--white);
      text-decoration: none;
      border-bottom: 1px dashed rgba(255,255,255,0.4);
      transition: border-color .15s ease;
      cursor: pointer;
    }
    .announce-bar a:hover { border-bottom-color: var(--white); }
    .announce-bar-close {
      position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
      background: transparent; border: none;
      color: rgba(255,255,255,0.7);
      font-size: 18px; line-height: 1;
      cursor: pointer; padding: 4px 8px;
      transition: color .15s ease;
    }
    .announce-bar-close:hover { color: var(--white); }
    .announce-bar.is-dismissed { display: none; }
    @media (max-width: 720px) {
      .announce-bar { font-size: 12px; padding: 9px 36px 9px 16px; }
      .announce-bar-inner { gap: 8px; }
      .announce-bar-divider { display: none; }
    }
    /* ============================================
       NAV (sticky, becomes pinned to top when announce-bar scrolls out)
       ============================================ */
    nav.topnav {
      position: sticky;
      top: 0; left: 0; right: 0;
      z-index: 1050;
      background: rgba(11, 16, 32, 0.78);
      backdrop-filter: saturate(180%) blur(14px);
      -webkit-backdrop-filter: saturate(180%) blur(14px);
      border-bottom: 1px solid var(--line);
    }
    .nav-row {
      display: flex; align-items: center; justify-content: space-between;
      height: 72px;
    }
    .brand {
      display: inline-flex; align-items: center;
      color: var(--white);
      transition: opacity .15s ease;
    }
    .brand:hover { opacity: 0.85; }
    .brand svg,
    .brand img.main-logo { height: 36px; width: auto; display: block; }
    /* Reference: this is the official Codebasics lockup, hexagonal C mark
       (the hexagon outline forms the C, with two offset diamond cuts
       creating the C-opening on the right) + stacked CODE / BASICS
       wordmark in brand blue #3B82F6. Matches the master logo asset. */
    .nav-cta {
      height: 40px; padding: 0 18px;
      background: var(--blue);
      color: var(--white);
      font-size: 14px; font-weight: 700;
      border-radius: var(--radius-btn);
      display: inline-flex; align-items: center; gap: 6px;
      transition: background .15s ease;
    }
    .nav-cta:hover { background: var(--blue-strong); }

    /* ============================================
       HERO
       ============================================ */
    .hero {
      padding: 60px 0 60px;
      text-align: center;
      position: relative;
      background: var(--bg);  /* explicit so global theme rules can't override at <990px */
      color: var(--gray-300);
    }
    .hero::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 800px 500px at 50% 0%, rgba(59,130,246,0.10), transparent 60%),
        radial-gradient(ellipse 600px 400px at 80% 80%, rgba(59,130,246,0.05), transparent 70%);
      pointer-events: none;
    }
    .hero > .wrap { position: relative; z-index: 1; }
    .hero h1 { max-width: 900px; margin: 0 auto 20px; }
    .hero h1 br { display: block; }

    /* ---------- Hero H1 three-tier hierarchy ----------
       The big gradient transformation line dominates ("Data Analyst -> AI-
       Enabled Engineer"). The preamble sits small above it as a sentence
       opener. The supporting tagline ("Own the pipeline. Not just the
       dashboard.") sits below as the emotional hook. Each on its own line
       via display:block. */
    .hero h1 .hero-h1-preamble {
      display: block;
      font-size: 0.5em;           /* a little smaller than the gradient transformation below */
      font-weight: 600;
      color: var(--white);
      letter-spacing: -0.01em;
      line-height: 1.25;
      margin-bottom: 12px;
      text-transform: none;
    }
    .hero h1 .hero-h1-transformation {
      display: block;
      font-size: 1em;             /* dominant, inherits full H1 clamp size */
      line-height: 1.15;
      font-weight: 900;
      padding-bottom: 0.08em;
      /* purple gradient, same family as the live LP's "Software Engineers" */
      background: linear-gradient(120deg, #3B82F6 0%, #6f53c1 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }
    .hero-support-tagline {
      font-size: clamp(20px, 2.4vw, 30px);
      color: var(--gray-300);
      font-weight: 600;
      letter-spacing: -0.015em;
      line-height: 1.3;
      max-width: 760px;
      margin: 0 auto 22px;
      text-align: center;
    }
    .hero-support-tagline em {
      color: var(--white);
      font-style: normal;
      font-weight: 700;
    }
    @media (max-width: 720px) {
      /* On mobile, the H1 base clamp drops to ~36px, so bump preamble up
         so it doesn't disappear, and let the transformation line keep its
         dominance. */
      .hero h1 .hero-h1-preamble { font-size: 20px; margin-bottom: 10px; }
      .hero h1 .hero-h1-transformation { font-size: 1em; }
      .hero-support-tagline { font-size: 18px; }
    }
    .hero .lede { max-width: 580px; margin: 0 auto 36px; font-size: clamp(16px, 1.6vw, 19px); }

    /* Hero spec line, single row, factual */
    .hero-spec {
      display: inline-flex;
      flex-wrap: wrap;
      gap: 12px 18px;
      justify-content: center;
      align-items: center;
      padding: 12px 24px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.02);
      border-radius: var(--radius);
      margin-bottom: 36px;
      font-size: 13px;
      color: var(--gray-300);
    }
    .hero-spec strong { color: var(--white); font-weight: 700; }
    .hero-spec .dot { color: var(--gray-500); }

    /* ---------- Inner Circle dual pricing strip (Variant A only) ----------
       Two-column split: IC tier (left, accented blue rail) vs Standard tier
       (right). Pattern mirrors the AI Engineering Cohort 2 LP's ic-hero-strip. */
    .ic-strip {
      max-width: 720px;
      margin: 0 auto 36px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: rgba(255,255,255,0.015);
      text-align: left;
    }
    .ic-tier {
      padding: 22px 26px;
      position: relative;
    }
    .ic-tier--inner {
      border-right: 1px solid var(--line);
    }
    .ic-tier--inner::before {
      content: '';
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 3px;
      background: var(--blue);
    }
    .ic-tier-label {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.20em;
      text-transform: uppercase;
      color: var(--blue);
      margin-bottom: 12px;
      display: flex; align-items: center; gap: 6px;
    }
    .ic-tier--standard .ic-tier-label {
      color: rgba(255,255,255,0.5);
    }
    .ic-tier-price-row {
      display: flex; align-items: baseline; gap: 10px;
      margin-bottom: 8px;
    }
    .ic-tier-price {
      font-size: 30px; font-weight: 800;
      color: var(--white);
      letter-spacing: -0.025em;
      line-height: 1;
    }
    .ic-tier-anchor {
      font-size: 15px;
      color: rgba(255,255,255,0.4);
    }
    .ic-tier-meta {
      font-size: 13px;
      color: rgba(255,255,255,0.72);
      line-height: 1.5;
    }
    .ic-tier-meta strong { color: var(--white); font-weight: 700; }
    .ic-tier--standard .ic-tier-price-row { margin-bottom: 0; }
    .ic-tier--standard .ic-tier-meta {
      margin-top: 10px;
      padding-top: 12px;
      border-top: 1px solid var(--line);
      font-size: 12px;
    }

    .hero-cta {
      display: flex; gap: 14px; flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 16px;
    }

    .hero-save-line {
      text-align: center;
      font-size: 13px;
      color: var(--gray-400);
      letter-spacing: 0.04em;
      margin-bottom: 24px;
    }
    .hero-save-line strong {
      color: var(--blue);
      font-weight: 800;
      letter-spacing: 0.02em;
    }

    .hero-meta-links {
      display: flex; gap: 28px;
      justify-content: center; flex-wrap: wrap;
      margin-top: 20px;
    }
    .hero-meta-links a {
      color: var(--gray-400);
      font-size: 13px; font-weight: 600;
      display: inline-flex; align-items: center; gap: 6px;
      transition: color .15s ease;
    }
    .hero-meta-links a:hover { color: var(--blue); }
    .hero-meta-links svg { width: 14px; height: 14px; }

    /* ---------- Hero course poster ----------
       16:9 frame for the final course poster. The image fills the frame
       via .thumb-placeholder--filled below. */
    .thumb-placeholder {
      max-width: 760px;
      margin: 48px auto 0;
      aspect-ratio: 16 / 9;
      border-radius: 20px;
      border: 1.5px dashed rgba(59,130,246,0.35);
      background:
        linear-gradient(180deg, rgba(59,130,246,0.04) 0%, rgba(59,130,246,0.08) 100%);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 12px;
      position: relative;
      overflow: hidden;
    }
    .thumb-placeholder::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 500px 300px at 50% 50%, rgba(59,130,246,0.10), transparent 70%);
      pointer-events: none;
    }
    .thumb-placeholder-icon {
      width: 56px; height: 56px;
      border-radius: 14px;
      background: rgba(59,130,246,0.12);
      border: 1px solid rgba(59,130,246,0.35);
      display: flex; align-items: center; justify-content: center;
      color: var(--blue);
    }
    .thumb-placeholder-icon svg { width: 28px; height: 28px; }
    .thumb-placeholder-label {
      font-size: 13px;
      color: var(--gray-400);
      letter-spacing: 0.18em;
      text-transform: uppercase;
      font-weight: 700;
    }
    .thumb-placeholder-sub {
      font-size: 12px;
      color: var(--gray-500);
      max-width: 380px;
      text-align: center;
      line-height: 1.5;
    }
    /* Filled state: real poster image fills the 16:9 frame */
    .thumb-placeholder--filled { border: 1px solid var(--line-2); border-style: solid; background: var(--bg-3); }
    .thumb-placeholder--filled img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

    /* ============================================
       SOCIAL RECOGNITION STRIP (proof bar)
       ============================================ */
    /* ============================================
       SOCIAL PROOF / CREDIBILITY STRIP
       Sized to match the AI Engineering live LP treatment.
       Big numbers (22px), confident descriptive text (16px),
       boxed YouTube play icon, generous spacing.
       ============================================ */
    /* ---------- Social proof strip ----------
       Three credibility metrics + authorship attribution. Stacked
       layout: big number on top, label below, soft vertical dividers
       between blocks. Mobile collapses to a centered 1-column stack. */
    .social-strip {
      padding: 28px 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: var(--bg);
    }
    /* Compact single horizontal row, matching the AI Engineering strip:
       small inline stats with thin vertical dividers, attribution folded
       into the same row at the end. */
    .social-strip-row {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0;
      max-width: 1100px;
      margin: 0 auto;
    }
    .social-stat {
      display: flex; align-items: center; gap: 8px;
      padding: 4px 28px;
      position: relative;
      font-size: 15px;
      color: var(--gray-300);
      line-height: 1.3;
      white-space: nowrap;
    }
    .social-stat + .social-stat::before {
      content: "";
      position: absolute;
      left: 0; top: 15%; bottom: 15%;
      width: 1px;
      background: var(--line-2, rgba(255,255,255,0.12));
    }
    .social-stat-num {
      color: var(--white);
      font-size: 16px; font-weight: 800;
      letter-spacing: -0.01em;
    }
    .social-stat .star { color: #FBBF24; font-size: 15px; line-height: 1; }
    .social-stat-yt {
      display: inline-flex; align-items: center; justify-content: center;
      width: 24px; height: 16px;
      background: #FF0000; border-radius: 4px;
      flex-shrink: 0;
    }
    .social-stat-yt svg { width: 10px; height: 10px; fill: #fff; }
    .social-stat-by {
      color: var(--gray-400);
      font-weight: 500;
      font-size: 14px;
    }
    .social-stat-by strong { color: var(--gray-200, #cbd5e1); font-weight: 700; }
    @media (max-width: 860px) {
      .social-strip { padding: 22px 0; }
      .social-stat {
        padding: 6px 14px; font-size: 13px;
        white-space: normal; justify-content: center;
      }
      .social-stat-num { font-size: 14px; }
      .social-stat + .social-stat::before { display: none; }
      .social-stat-by { width: 100%; text-align: center; padding-top: 6px; }
    }

    /* ============================================
       SECTION HEADERS (universal pattern)
       ============================================ */
    .section-head { text-align: center; max-width: 760px; margin: 0 auto 72px; }
    .section-head h2 { margin: 0 auto 20px; }
    .section-head p { color: var(--gray-300); font-size: 18px; line-height: 1.65; max-width: 600px; margin: 0 auto; }

    /* ============================================
       PROMISE, big stats strip
       ============================================ */
    .promise-stats {
      display: flex; justify-content: center; align-items: flex-start;
      gap: 64px;
      margin-top: 48px;
      flex-wrap: wrap;
    }
    .promise-stat { text-align: center; }
    .promise-stat .n {
      font-size: clamp(36px, 4.4vw, 56px);
      font-weight: 900; color: var(--white);
      letter-spacing: -0.035em; line-height: 1;
      margin-bottom: 8px;
    }
    .promise-stat .l {
      font-size: 12px; color: var(--gray-400);
      letter-spacing: 0.16em; text-transform: uppercase;
      font-weight: 600;
    }

    /* ============================================
       FOUR PILLARS
       ============================================ */
    .pillars {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-top: 56px;
    }
    .pillar {
      padding: 28px 24px;
      background: var(--bg-3);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      transition: border-color .2s ease, transform .2s ease;
    }
    .pillar:hover { border-color: var(--blue-line); transform: translateY(-2px); }
    .pillar .pillar-meta { font-size: 11px; color: var(--blue); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; margin-bottom: 14px; }
    .pillar h4 { color: var(--white); font-size: 16px; margin-bottom: 10px; }
    .pillar p { font-size: 14px; color: var(--gray-300); line-height: 1.6; }

    /* ============================================
       WHO IT'S FOR, personas
       ============================================ */
    .personas {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 48px;
    }
    .persona {
      padding: 32px 28px;
      background: var(--bg-3);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      transition: border-color .2s ease;
    }
    .persona:hover { border-color: var(--blue-line); }
    .persona h4 { font-size: 17px; margin-bottom: 14px; color: var(--white); }
    .persona p { font-size: 14px; color: var(--gray-300); line-height: 1.65; }

    .prereq {
      max-width: 720px; margin: 40px auto 0;
      padding: 28px 32px;
      background: rgba(255,255,255,0.02);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
    }
    .prereq h4 { font-size: 13px; color: var(--blue); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 16px; font-weight: 700; }
    .prereq ul { list-style: none; }
    .prereq li {
      font-size: 14px; color: var(--gray-300);
      padding: 7px 0 7px 24px;
      position: relative;
      line-height: 1.55;
    }
    .prereq li::before {
      content: '•';
      position: absolute; left: 0; top: 7px;
      color: var(--green); font-weight: 700;
    }
    .prereq .note { font-size: 13px; color: var(--gray-400); font-style: italic; margin-top: 14px; }

    /* ============================================
       FRAMEWORK, 3 cols, like Build/Orchestrate/Distribute
       ============================================ */
    .framework-cols {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 56px;
    }
    .fwcol {
      padding: 36px 28px;
      background: var(--bg-3);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      text-align: left;
    }
    .fwcol .num {
      display: inline-block;
      font-size: 11px; color: var(--gray-400);
      letter-spacing: 0.22em; margin-bottom: 16px;
      font-weight: 700;
    }
    .fwcol h3 { color: var(--white); margin-bottom: 14px; font-size: 24px; }
    .fwcol p { font-size: 15px; color: var(--gray-300); line-height: 1.65; }

    /* ============================================
       FACULTY
       ============================================ */
    .faculty-grid {
      display: grid; grid-template-columns: repeat(2, 1fr);
      gap: 18px;
      margin-top: 36px;
    }
    /* If the instructor count is odd, place the lone last card in the left column */
    .faculty-grid .fac:last-child:nth-child(odd) { grid-column: 1 / 2; }
    .fac {
      padding: 24px 28px;
      background: var(--bg-3);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      transition: border-color .2s ease;
    }
    .fac:hover { border-color: var(--blue-line); }
    .fac-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 0; }
    .fac-avatar {
      width: 64px; height: 64px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      background: linear-gradient(135deg, #1E293B, #0F172A);
      border: 2px solid var(--line-2);
      display: flex; align-items: center; justify-content: center;
      color: var(--white); font-weight: 900; font-size: 20px;
      letter-spacing: -0.01em;
    }
    .fac-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .fac-name {
      font-size: 19px; font-weight: 800; color: var(--white);
      margin-bottom: 4px; letter-spacing: -0.015em;
      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    }
    .fac-cred { font-size: 13px; color: var(--gray-300); line-height: 1.55; }
    .fac-cred-2 { font-size: 13px; color: var(--gray-400); margin-top: 2px; }
    .fac-teach { font-size: 14px; color: var(--gray-300); line-height: 1.65; }
    .fac-pending {
      display: inline-block;
      font-size: 10px; font-weight: 700;
      color: var(--blue);
      background: var(--blue-soft);
      border: 1px solid var(--blue-line);
      padding: 3px 8px;
      border-radius: 4px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .fac-role-tag {
      font-size: 12px;
      color: var(--blue);
      font-style: italic;
      margin-top: 4px;
    }
    .faculty-footer {
      text-align: center;
      margin-top: 22px;
      font-size: 14px; color: var(--gray-400);
      font-style: italic;
    }

    /* ============================================
       HOW IT WORKS, 4 step cards
       ============================================ */
    .how-steps {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-top: 56px;
    }
    .step {
      padding: 28px 24px;
      border-top: 2px solid var(--blue);
      background: rgba(255,255,255,0.02);
    }
    .step-num { font-size: 11px; color: var(--blue); letter-spacing: 0.2em; font-weight: 700; margin-bottom: 12px; }
    .step-name { font-size: 18px; font-weight: 800; color: var(--white); margin-bottom: 10px; letter-spacing: -0.015em; }
    .step p { font-size: 14px; color: var(--gray-300); line-height: 1.65; }

    /* ============================================
       CURRICULUM ACCORDION
       ============================================ */
    .curriculum-head { text-align: center; margin-bottom: 48px; }
    .curriculum-head h2 span { display: block; }

    .week {
      border-bottom: 1px solid var(--line);
    }
    .week:first-child { border-top: 1px solid var(--line); }
    /* Per-week phase accent. Each .week sets --accent inline. Defaults to purple. */
    .week { --accent: var(--blue); --accent-soft: var(--blue-soft); }
    .week-head {
      width: 100%;
      padding: 24px 4px;
      display: flex; align-items: center; justify-content: space-between;
      gap: 24px; text-align: left;
      transition: padding .15s ease;
    }
    .week-head:hover { padding-left: 10px; }
    .week-label {
      display: flex; align-items: center; gap: 24px;
      flex: 1;
      min-width: 0;
    }
    .week-num {
      font-size: 11px; color: var(--accent);
      letter-spacing: 0.2em; font-weight: 700;
      min-width: 68px;
    }
    .week-title { font-size: 18px; color: var(--white); font-weight: 700; letter-spacing: -0.015em; }
    .week-phase {
      font-size: 10px;
      letter-spacing: 0.16em; text-transform: uppercase;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: var(--radius-pill);
      border: 1px solid transparent;
      white-space: nowrap;
    }
    .week-toggle {
      width: 32px; height: 32px;
      border: 1px solid var(--line-2);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: var(--gray-300); font-size: 16px; font-weight: 300;
      transition: transform .2s ease, background .15s ease, color .15s ease, border-color .15s ease;
      flex-shrink: 0;
    }
    .week.open .week-toggle {
      background: var(--accent); color: var(--bg); border-color: var(--accent);
      transform: rotate(45deg);
    }
    .week-body {
      max-height: 0; overflow: hidden;
      transition: max-height .35s ease;
    }
    .week.open .week-body { max-height: 1400px; }
    .week-body-inner { padding: 8px 0 32px 92px; }
    .session { padding: 18px 0; border-top: 1px solid var(--line); }
    .session:first-child { border-top: 0; padding-top: 4px; }
    .session-title { font-size: 16px; color: var(--white); font-weight: 700; margin-bottom: 8px; letter-spacing: -0.005em; }
    .session-body { font-size: 14px; color: var(--gray-300); line-height: 1.65; margin-bottom: 6px; }
    .session-output { font-size: 13px; color: var(--accent); font-style: italic; }

    /* Phase legend strip above the curriculum, mirrors the live AI Engineering LP roadmap */
    .phase-legend {
      max-width: 920px; margin: 0 auto 44px;
      position: relative; padding: 0 16px;
    }
    .phase-legend-track {
      position: absolute; top: 50%; left: 16px; right: 16px;
      height: 3px;
      background: linear-gradient(90deg, var(--phase-1), var(--phase-2), var(--phase-3), var(--phase-4));
      opacity: 0.22;
      border-radius: 2px;
      transform: translateY(-50%);
      z-index: 0;
    }
    .phase-legend-row {
      position: relative; z-index: 1;
      display: flex; justify-content: space-between; align-items: center;
      gap: 12px; flex-wrap: wrap;
    }
    .phase-pill {
      font-size: 10.5px; font-weight: 700;
      letter-spacing: 0.14em; text-transform: uppercase;
      padding: 7px 14px;
      border-radius: var(--radius-pill);
      border: 1px solid transparent;
      white-space: nowrap;
      background: var(--bg);  /* opaque over the track line */
    }
    @media (max-width: 720px) {
      .phase-legend-track { display: none; }
      .phase-legend-row { flex-direction: column; align-items: flex-start; gap: 8px; }
      .phase-pill { width: 100%; text-align: center; }
    }

    .curriculum-footer {
      margin-top: 32px;
      font-size: 13px; color: var(--gray-400);
      font-style: italic;
      text-align: center;
    }

    /* ============================================
       INVESTMENT (single flat price)
       ============================================ */
    .price-card {
      max-width: 580px; margin: 56px auto 0;
      background: linear-gradient(180deg, var(--bg-3) 0%, rgba(17,24,53,0.6) 100%);
      border: 1px solid var(--blue-line);
      border-radius: 20px;
      padding: 44px 40px 40px;
      position: relative;
      overflow: hidden;
    }
    .price-card::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, transparent 0%, var(--blue) 50%, transparent 100%);
    }
    .price-eyebrow {
      font-size: 11px; font-weight: 700;
      color: var(--blue);
      letter-spacing: 0.22em; text-transform: uppercase;
      margin-bottom: 8px;
    }
    .price-product {
      font-size: 22px; font-weight: 800; color: var(--white);
      margin-bottom: 6px; letter-spacing: -0.02em;
    }
    .price-meta { font-size: 14px; color: var(--gray-400); margin-bottom: 28px; }
    .price-amount {
      font-size: clamp(48px, 6vw, 64px);
      font-weight: 900; color: var(--white);
      letter-spacing: -0.04em; line-height: 1;
      margin-bottom: 6px;
    }
    .price-region {
      font-size: 13px; color: var(--gray-400);
      letter-spacing: 0.02em;
    }
    .price-terms {
      margin-top: 18px;
      font-size: 13px; color: var(--gray-400);
      font-style: italic;
    }

    /* Dual-tier split inside the price card (Variant A) */
    .price-dual {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      margin: 8px 0 0;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      background: rgba(255,255,255,0.015);
    }
    .price-dual-col {
      padding: 22px 22px;
      position: relative;
    }
    .price-dual-col--inner {
      border-right: 1px solid var(--line);
    }
    .price-dual-col--inner::before {
      content: '';
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 3px;
      background: var(--blue);
    }
    .price-dual-label {
      font-size: 10px; font-weight: 800;
      letter-spacing: 0.20em; text-transform: uppercase;
      color: var(--blue);
      margin-bottom: 12px;
    }
    .price-dual-col--standard .price-dual-label {
      color: rgba(255,255,255,0.5);
    }
    .price-dual-amount {
      font-size: 36px; font-weight: 900;
      color: var(--white);
      letter-spacing: -0.035em; line-height: 1;
      margin-bottom: 8px;
    }
    .price-dual-amount--muted {
      color: rgba(255,255,255,0.7);
    }
    .price-dual-meta {
      font-size: 13px;
      color: var(--gray-300);
      line-height: 1.5;
    }

    .price-includes {
      margin-top: 28px;
      padding-top: 28px;
      border-top: 1px solid var(--line);
    }
    .price-includes-label {
      font-size: 11px; color: var(--gray-400);
      letter-spacing: 0.18em; text-transform: uppercase;
      font-weight: 700;
      margin-bottom: 16px;
    }
    .price-includes ul { list-style: none; }
    .price-includes li {
      font-size: 14px; color: var(--gray-100);
      padding: 9px 0 9px 26px;
      position: relative;
      line-height: 1.55;
    }
    .price-includes li::before {
      content: '•';
      position: absolute; left: 0; top: 9px;
      color: var(--green); font-weight: 800; font-size: 16px;
    }

    .price-cta-wrap { margin-top: 32px; }
    .price-cta {
      width: 100%; padding: 18px 28px;
      background: var(--blue);
      color: var(--white);
      font-size: 16px; font-weight: 700;
      border-radius: var(--radius-btn);
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      box-shadow: 0 8px 28px rgba(111,83,193,0.32);
      transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
    }
    .price-cta:hover {
      background: var(--blue-strong);
      transform: translateY(-1px);
      box-shadow: 0 12px 36px rgba(59,130,246,0.45);
    }
    .price-cta-note {
      margin-top: 14px;
      font-size: 12px; color: var(--gray-400);
      text-align: center;
      letter-spacing: 0.02em;
    }

    /* ---------- Inner Circle explainer section (Variant A only) ---------- */
    .ic-section { background: var(--bg-2); position: relative; }
    .ic-section::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 700px 400px at 75% 50%, rgba(59,130,246,0.07), transparent 70%);
      pointer-events: none;
    }
    .ic-section > .wrap { position: relative; z-index: 1; }
    .ic-section-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: start;
    }
    .ic-section-left {
      display: flex; flex-direction: column;
      gap: 18px;
    }
    .ic-section-left .eyebrow {
      display: inline-flex; align-items: center; gap: 12px;
      margin-bottom: 16px;
    }
    .ic-section-left .eyebrow::before {
      content: '';
      width: 24px; height: 1px;
      background: var(--blue);
      display: inline-block;
    }
    .ic-section-left h2 { margin-bottom: 6px; }
    .ic-section-left p { color: var(--gray-300); font-size: 16px; line-height: 1.7; }
    .ic-section-pullquote {
      margin-top: 14px; padding-top: 22px;
      border-top: 1px solid var(--line);
      font-size: 19px; line-height: 1.45;
      color: var(--white); font-weight: 500;
    }
    .ic-feature-stack {
      display: flex; flex-direction: column; gap: 14px;
    }
    .ic-feature {
      padding: 22px 24px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255,255,255,0.015);
    }
    .ic-feature-symbol {
      display: inline-block;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--blue);
      box-shadow: 0 0 12px rgba(59,130,246,0.55), 0 0 24px rgba(59,130,246,0.25);
      margin-bottom: 14px;
      line-height: 1;
      font-size: 0;
    }
    .ic-feature-title {
      font-size: 16px; font-weight: 700;
      color: var(--white);
      margin-bottom: 6px;
      letter-spacing: -0.01em;
    }
    .ic-feature-body {
      font-size: 14px;
      color: var(--gray-300);
      line-height: 1.55;
    }
    .ic-feature--cta {
      background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(59,130,246,0.03));
      border-color: var(--blue-line);
      display: flex; align-items: center;
      justify-content: space-between;
      gap: 16px; flex-wrap: wrap;
      padding: 22px 24px;
    }
    .ic-feature--cta .btn {
      padding: 12px 22px;
      font-size: 14px;
    }
    .ic-feature-deadline {
      font-size: 13px;
      color: var(--blue);
      font-weight: 600;
    }

    .no-discounts {
      max-width: 580px; margin: 28px auto 0;
      padding: 20px 28px;
      font-size: 14px; color: var(--gray-300);
      line-height: 1.7;
      font-style: italic;
      border-left: 2px solid var(--blue);
      background: rgba(59,130,246,0.04);
    }

    /* ============================================
       REFUND
       ============================================ */
    .refund-box {
      max-width: 720px; margin: 0 auto;
      padding: 28px 32px;
      background: var(--bg-3);
      border: 1px solid var(--green);
      border-radius: var(--radius-lg);
      position: relative;
    }
    .refund-box::before {
      content: '';
      position: absolute; left: 0; top: 50%; transform: translateY(-50%);
      width: 3px; height: 60%;
      background: var(--green);
      border-radius: 0 3px 3px 0;
    }
    .refund-box h4 {
      font-size: 16px; color: var(--white);
      margin-bottom: 10px;
      display: flex; align-items: center; gap: 10px;
    }
    .refund-box h4 svg { width: 18px; height: 18px; color: var(--green); }
    .refund-box p {
      font-size: 14px; color: var(--gray-300);
      line-height: 1.7;
    }
    .refund-box strong { color: var(--white); }

    /* ---- Bonus bootcamp stack (Included + Already own it) ---- */
    .bonus-stack {
      max-width: 720px; margin: 16px auto 0;
      display: grid; gap: 16px;
    }
    .bonus-card {
      padding: 22px 32px;
      background: var(--bg-3);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      position: relative;
    }
    .bonus-card::before {
      content: '';
      position: absolute; left: 0; top: 50%; transform: translateY(-50%);
      width: 3px; height: 60%;
      border-radius: 0 3px 3px 0;
    }
    .bonus-card--included { border-color: var(--blue-line); }
    .bonus-card--included::before { background: var(--blue); }
    .bonus-card--included h4 { color: var(--blue); }
    .bonus-card--owned { border-color: rgba(16,185,129,0.45); }
    .bonus-card--owned::before { background: var(--green); }
    .bonus-card--owned h4 { color: var(--green); }
    .bonus-card h4 {
      font-size: 16px; font-weight: 800;
      margin-bottom: 8px; letter-spacing: -0.01em;
    }
    .bonus-card p {
      font-size: 14px; color: var(--gray-300);
      line-height: 1.7; margin: 0;
    }
    .bonus-card p strong { color: var(--white); }
    .bonus-card a {
      color: var(--green); font-weight: 700;
      text-decoration: none; white-space: nowrap;
    }
    .bonus-card--included a { color: var(--blue); }
    .bonus-card a:hover { text-decoration: underline; }

    /* ============================================
       FAQ
       ============================================ */
    .faq-list { max-width: 820px; margin: 56px auto 0; }
    .faq-item {
      border-bottom: 1px solid var(--line);
    }
    .faq-item:first-child { border-top: 1px solid var(--line); }
    .faq-q {
      width: 100%;
      padding: 22px 4px;
      display: flex; align-items: center; justify-content: space-between;
      gap: 24px;
      text-align: left;
    }
    .faq-q-text { font-size: 16px; color: var(--white); font-weight: 700; letter-spacing: -0.01em; }
    .faq-q-toggle {
      width: 26px; height: 26px;
      color: var(--gray-300); font-size: 20px; font-weight: 300;
      flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      transition: transform .2s ease, color .15s ease;
    }
    .faq-item.open .faq-q-toggle { transform: rotate(45deg); color: var(--blue); }
    .faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
    .faq-item.open .faq-a { max-height: 500px; }
    .faq-a-inner {
      padding: 0 4px 24px;
      font-size: 15px; color: var(--gray-300);
      line-height: 1.7;
      max-width: 720px;
    }

    /* ============================================
       CLOSING CTA
       ============================================ */
    .closing {
      background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
      text-align: center;
      padding: 96px 0;
      position: relative;
    }
    .closing::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 700px 400px at 50% 50%, rgba(59,130,246,0.12), transparent 70%);
      pointer-events: none;
    }
    .closing > .wrap-narrow { position: relative; }
    .closing h2 {
      max-width: 760px; margin: 0 auto 32px;
    }
    .closing-meta {
      margin-top: 20px;
      font-size: 13px; color: var(--gray-400);
    }

    /* ============================================
       FOOTER
       ============================================ */
    footer.site-footer {
      background: var(--bg);
      padding: 56px 0 40px;
      border-top: 1px solid var(--line);
    }
    .footer-trust {
      font-size: 13px; color: var(--gray-400);
      text-align: center;
      margin-bottom: 32px;
    }
    .footer-trust strong { color: var(--white); font-weight: 700; }
    .footer-row {
      display: flex; justify-content: space-between; align-items: center;
      gap: 24px; flex-wrap: wrap;
    }
    .footer-logo { font-size: 15px; color: var(--white); font-weight: 800; display: flex; align-items: center; gap: 10px; }
    .footer-links {
      display: flex; gap: 28px; flex-wrap: wrap;
      font-size: 13px; color: var(--gray-400);
    }
    .footer-links a { transition: color .15s ease; }
    .footer-links a:hover { color: var(--blue); }
    .footer-legal {
      margin-top: 32px; padding-top: 24px;
      border-top: 1px solid var(--line);
      font-size: 12px; color: var(--gray-500);
      text-align: center;
    }

    /* ============================================
       STICKY BOTTOM CTA (all viewports)
       Appears after the user scrolls past the hero.
       JS toggles .is-visible based on IntersectionObserver
       watching the hero element.
       ============================================ */
    .sticky-cta {
      position: fixed; left: 0; right: 0; bottom: 0;
      z-index: 60;
      transform: translateY(120%);
      opacity: 0;
      transition: transform .35s cubic-bezier(.16,.84,.44,1), opacity .25s ease;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(11,16,32,0.92), rgba(11,16,32,0.98));
      border-top: 1px solid var(--blue-line);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 -12px 40px rgba(0,0,0,0.5);
    }
    .sticky-cta.is-visible {
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto;
    }
    .sticky-cta-inner {
      max-width: 1180px;
      margin: 0 auto;
      padding: 14px 24px;
      display: flex; align-items: center; justify-content: space-between;
      gap: 16px;
    }
    .sticky-cta-info {
      display: flex; flex-direction: column;
      gap: 2px;
      min-width: 0;
    }
    .sticky-cta-label {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--blue);
    }
    .sticky-cta-price {
      font-size: 17px;
      font-weight: 800;
      color: var(--white);
      letter-spacing: -0.02em;
    }
    .sticky-cta-anchor {
      font-size: 13px;
      color: rgba(255,255,255,0.4);
      font-weight: 600;
      margin-left: 4px;
    }
    .sticky-cta .btn {
      padding: 12px 24px;
      font-size: 14px;
      white-space: nowrap;
      flex-shrink: 0;
    }
    @media (max-width: 540px) {
      .sticky-cta-inner { padding: 12px 16px; gap: 12px; }
      .sticky-cta-label { font-size: 10px; letter-spacing: 0.14em; }
      .sticky-cta-price { font-size: 15px; }
      .sticky-cta-anchor { display: none; }
      .sticky-cta .btn { padding: 10px 16px; font-size: 13px; }
    }

    /* Highlight pulse when scrolling to price card */
    .price-card.is-highlighted {
      animation: priceHighlight 1.4s ease-out;
    }
    @keyframes priceHighlight {
      0%   { box-shadow: 0 0 0 0 rgba(59,130,246,0); }
      30%  { box-shadow: 0 0 0 8px rgba(59,130,246,0.35), 0 30px 60px rgba(59,130,246,0.25); }
      100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); }
    }

    /* ============================================
       RESPONSIVE
       ============================================ */
    @media (max-width: 900px) {
      .pillars { grid-template-columns: repeat(2, 1fr); }
      .personas { grid-template-columns: 1fr; }
      .framework-cols { grid-template-columns: 1fr; }
      .how-steps { grid-template-columns: repeat(2, 1fr); }
      .faculty-grid { grid-template-columns: 1fr; }
      .faculty-grid .fac:last-child:nth-child(odd) { grid-column: auto; max-width: none; margin-left: 0; margin-right: 0; }
      .promise-stats { gap: 40px; }
    }
    @media (max-width: 720px) {
      :root { --section-y: var(--section-y-m); }
      .wrap, .wrap-narrow { padding: 0 20px; }
      .hero { padding: 56px 0 48px; }
      .hero h1 { font-size: 32px; line-height: 1.12; }
      .hero-cta { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
      .hero-cta .btn { width: 100%; }
      .hero-meta-links { gap: 16px; }
      .hero-spec { padding: 10px 16px; font-size: 12px; }
      .thumb-placeholder { margin-top: 36px; border-radius: 14px; }
      .ic-strip { grid-template-columns: 1fr; }
      .ic-tier--inner { border-right: none; border-bottom: 1px solid var(--line); }
      .ic-tier { padding: 18px 22px; }
      .ic-tier-price { font-size: 26px; }
      .nav-cta { display: none; }
      body { padding-bottom: 76px; }
      .pillars { grid-template-columns: 1fr; }
      .how-steps { grid-template-columns: 1fr; }
      .week-body-inner { padding-left: 0; }
      .week-label { gap: 16px; }
      .week-num { min-width: auto; }
      .week-title { font-size: 16px; }
      .week-phase { display: none; }
      .price-card { padding: 32px 24px 28px; }
      .price-amount { font-size: 44px; }
      .price-dual { grid-template-columns: 1fr; }
      .price-dual-col--inner { border-right: none; border-bottom: 1px solid var(--line); }
      .price-dual-col { padding: 18px 20px; }
      .price-dual-amount { font-size: 30px; }
      .no-discounts { margin: 24px 16px 0; padding: 18px 22px; }
      .ic-section-grid { grid-template-columns: 1fr; gap: 32px; }
      .ic-feature--cta { flex-direction: column; align-items: stretch; }
      .ic-feature--cta .btn { width: 100%; }
      .refund-box { margin: 0 4px; padding: 24px; }
      .footer-row { flex-direction: column; align-items: flex-start; }
    }

    /* ============================================
       TOOLS LEARNED
       Grouped tool-stack section. Tiles use vector
       wordmarks (CSS-typed brand letters), never raster
       images, so nothing pixelates at any zoom level.
       Three labeled subgroups: AI Models, Build, Evals.
       ============================================ */
    .tools-learned {
      /* parent section inherits section-padding from .section */
    }
    .tools-group {
      margin-top: 56px;
    }
    .tools-group:first-of-type { margin-top: 48px; }
    .tools-group-head {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--line);
    }
    .tools-group-label {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--blue);
    }
    .tools-group-desc {
      font-size: 14px;
      color: var(--gray-400);
      font-weight: 500;
    }
    .tools-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
    }
    .tool-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      padding: 24px 16px;
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      text-align: center;
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .tool-card:hover {
      transform: translateY(-3px);
      border-color: var(--line-2);
      box-shadow: 0 8px 24px rgba(15,23,42,0.20);
    }
    /* The tile: a perfectly square rounded container holding the wordmark.
       Background is the brand colour, type is white. Pure CSS, no images,
       so it stays crisp at any pixel ratio and any zoom. */
    .tool-mark {
      width: 56px; height: 56px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: #FFFFFF;
      font-weight: 800;
      letter-spacing: -0.02em;
      font-size: 22px;
      line-height: 1;
      /* subtle inner highlight for a premium feel */
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 6px rgba(0,0,0,0.25);
    }
    .tool-mark.size-sm { font-size: 18px; }
    .tool-mark.size-xs { font-size: 15px; }
    /* Real-image logo variant. Logo file sits inside the same 56x56 chip,
       on a white background so dark-on-transparent logos read clearly on
       the dark page. */
    .tool-mark--img {
      background: #FFFFFF;
      padding: 8px;
      overflow: hidden;
    }
    .tool-mark--img img {
      max-width: 100%;
      max-height: 100%;
      width: auto; height: auto;
      object-fit: contain;
    }
    /* Some logos have their own coloured backgrounds and look better on
       dark, skip the white fill for those. */
    .tool-mark--img-dark {
      background: rgba(255,255,255,0.05);
      padding: 6px;
      border: 1px solid var(--line-2);
      overflow: hidden;
    }
    .tool-mark--img-dark img {
      max-width: 100%;
      max-height: 100%;
      width: auto; height: auto;
      object-fit: contain;
    }
    /* Per-brand colour palette. The AE Cohort LP currently uses the
       generic phase-tinted styled letter-marks (defined inline on each
       tool card via the --phase-* CSS variables), plus the --img and
       --img-dark variants above for tools with real logos. Per-brand
       colour classes from the legacy cohort template have been removed
       as they were no longer in use. */
    .tool-name {
      font-size: 14px;
      font-weight: 700;
      color: var(--white);
      letter-spacing: -0.01em;
    }
    .tool-purpose {
      font-size: 12px;
      color: var(--gray-400);
      line-height: 1.4;
      max-width: 160px;
    }
    @media (max-width: 960px) {
      .tools-grid { grid-template-columns: repeat(4, 1fr); }
    }
    @media (max-width: 720px) {
      .tools-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
      .tool-card { padding: 18px 12px; gap: 10px; }
      .tool-mark { width: 48px; height: 48px; font-size: 18px; }
      .tool-mark.size-sm { font-size: 15px; }
      .tool-mark.size-xs { font-size: 13px; }
      .tool-name { font-size: 13px; }
      .tool-purpose { font-size: 11px; }
      .tools-group { margin-top: 40px; }
      .tools-group-head { flex-wrap: wrap; gap: 8px; }
    }
    @media (max-width: 480px) {
      .tools-grid { grid-template-columns: repeat(2, 1fr); }
    }