/* ── Tokens — Glassy Theme ────────────────────────────────────── */
    :root {
      /* Surfaces — cool blue-tinted */
      --cream:     #F3F6FA;   /* page bg */
      --cream-2:   #EEF3F8;   /* subtle bg */
      --cream-3:   #D6DFEB;   /* border primary */
      --white:     #F8FBFF;   /* card surface */
      --header:    #EAF0F7;   /* header / nav surface */
      --border-soft: #E7EDF5;

      /* Text — cool blue-tinted */
      --ink:       #161B23;   /* text primary */
      --ink-2:     #596273;   /* text secondary */
      --ink-3:     #7C8798;   /* text tertiary */
      --ink-4:     #A4ADBE;   /* text quaternary / placeholder */

      /* Brand — Blue scale (anchored at #007bff) */
      --primary-50:  #E6F1FF;
      --primary-100: #CCE3FF;
      --primary-200: #99C7FF;
      --primary-300: #66ABFF;
      --primary-400: #338FFF;
      --primary-500: #007BFF;
      --primary-600: #0066D6;
      --primary-700: #0052AD;
      --primary-800: #003D85;
      --primary-900: #002A5C;
      --primary-950: #00193B;
      /* Brand semantic aliases (preserve existing var names) */
      --cyan:      var(--primary-500);
      --cyan-2:    var(--primary-600);
      --cyan-dark: var(--primary-700);
      --cyan-pale: var(--primary-100);
      --cyan-tint: var(--primary-50);

      /* Accent — Pink scale */
      --accent-50:  #FFF0FA;
      --accent-100: #FFE3F6;
      --accent-200: #FFC6EC;
      --accent-300: #FF98DA;
      --accent-400: #FF58C0;
      --accent-500: #FF27A7;
      --accent-600: #FF008B;
      --accent-700: #DF0073;
      --accent-800: #B8005D;
      --accent-900: #98034E;
      --accent-950: #5F002F;
      /* Accent aliases (re-using purple slots so existing components inherit) */
      --purple:    var(--accent-500);
      --purple-bg: var(--accent-100);

      /* Status colors */
      --green:     #34C76A;
      --green-bg:  #E8F5ED;
      --amber:     #F5A623;
      --amber-bg:  #FFF3DC;
      --blue:      #5B7EF5;
      --blue-bg:   #EBF0FD;
      --red:       #D94D4D;
      --red-bg:    #FDECEA;

      /* Radii */
      --r-sm: 8px; --r-md: 16px; --r-lg: 16px; --r-xl: 16px;
      --r-2xl: 16px; --r-3xl: 16px; --r-full: 9999px;

      /* Shadows — Glassy stack */
      --sh-card: 0 10px 30px rgba(23,22,20,.06), 0 2px 8px rgba(255,255,255,.35);
      --sh-lift: 0 16px 36px rgba(23,22,20,.08), 0 4px 12px rgba(0,203,229,.12), inset 0 1px 0 rgba(255,255,255,.6);
      --sh-hard: 0 6px 18px rgba(23,22,20,.05), inset 0 1px 0 rgba(255,255,255,.55);

      /* Glass blur */
      --blur-panel: 24px;
      --blur-control: 18px;
      --blur-hover: 28px;

      /* Fonts */
      --font: 'Plus Jakarta Sans', system-ui, sans-serif;
      --serif: 'Libre Baskerville', Georgia, serif;
      --ease-out:    cubic-bezier(.22,1,.36,1);
      --ease-spring: cubic-bezier(.34,1.56,.64,1);
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: auto; overflow-x: clip; }
    /* Hero card grows on scroll */
    .hero-card { will-change: transform; transform-origin: center center; }

    /* Hero card grow — GPU-only via native CSS scroll-driven animations.
       Runs entirely on the compositor thread; no main-thread cost.
       Browsers without animation-timeline support fall back to the JS
       handler in main.js, which itself bails on modern browsers. */
    @supports (animation-timeline: view()) {
      .hero-card {
        animation: heroCardGrow linear both;
        animation-timeline: view();
        animation-range: cover 0% cover 35%;
      }
      @keyframes heroCardGrow {
        from { transform: scale(0.88); }
        to   { transform: scale(1.05); }
      }
      @media (prefers-reduced-motion: reduce) {
        .hero-card { animation: none; transform: none; }
      }
      @media (max-width: 720px) {
        .hero-card { animation: none; transform: none; }
      }
    }
    body {
      font-family: var(--font); background: var(--cream);
      color: var(--ink); -webkit-font-smoothing: antialiased;
      overflow-x: clip;
    }
    /* Block-theme wrapper resets — WP's main/group wrappers shouldn't add padding/margin
       on top of section spacing baked into our patterns. */
    body.wp-theme-nousable > main.wp-block-group { margin: 0; padding: 0; max-width: none; }
    body.wp-theme-nousable > main.wp-block-group > * { max-width: none; }

    /* ── Secondary CTAs (About story) ─────────────────────────────
       About story closes with a single ghost-style "Learn More" link. */
    .about-story-cta { margin-top: 40px; }

    /* ── Product hero actions ─────────────────────────────────────
       Product page hero gets a single primary CTA below the lede. */
    .product-hero-actions { margin-top: 32px; }

    /* ── Product Layer 3 closing CTA ──────────────────────────────
       The orchestration layer (final layer on /product) closes with
       a primary Contact Us, signaling the natural decision point. */
    .layer3-cta { margin-top: 56px; display: flex; justify-content: center; }

    /* ── Skip link ─────────────────────────────────────────────────
       Visually hidden until a keyboard user tabs to it. Then it
       appears as a focus pill anchored to the top-left so the user
       can jump past the nav directly to <main id="main">. */
    .skip-link {
      position: fixed;
      top: 12px; left: 12px;
      z-index: 1000;
      padding: 10px 16px;
      background: var(--ink); color: var(--white);
      border-radius: var(--r-sm);
      font-family: var(--font); font-size: 14px; font-weight: 600;
      text-decoration: none;
      box-shadow: var(--sh-lift);
      transform: translateY(-200%);
      transition: transform 0.2s var(--ease-out);
    }
    .skip-link:focus { transform: translateY(0); outline: none; }

    /* ── Cross-page transitions ──────────────────────────────────────
       Two layers:
       1. View Transitions API — modern browsers (Chrome 126+, Edge,
          Safari 18+) capture the old DOM, the new page loads, then the
          browser cross-fades between them. Native, smooth, no JS.
       2. pageEnter fallback — for browsers without view-transition
          support (Firefox today), <main> still fades in on load. */
    @view-transition { navigation: auto; }

    /* Old page (outgoing): fades to transparent. New page (incoming):
       fades from transparent and slides up slightly. Slightly longer
       duration than the default 250ms for a less rushed feel. */
    ::view-transition-old(root) {
      animation: 280ms cubic-bezier(0.4, 0, 1, 1) both pageLeave;
    }
    ::view-transition-new(root) {
      animation: 420ms cubic-bezier(0.22, 1, 0.36, 1) both pageEnterVT;
    }
    @keyframes pageLeave   { to   { opacity: 0; } }
    @keyframes pageEnterVT { from { opacity: 0; transform: translateY(10px); } }

    /* Fallback: <main> fades in on first paint. Suppressed in browsers
       that support view-transition (it would double up with the API's
       own crossfade). */
    @keyframes pageEnter {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    body.wp-theme-nousable > main.wp-block-group {
      animation: pageEnter 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    @supports (view-transition-name: none) {
      body.wp-theme-nousable > main.wp-block-group { animation: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      body.wp-theme-nousable > main.wp-block-group { animation: none; }
      ::view-transition-old(root),
      ::view-transition-new(root) { animation: none; }
    }

    /* ── Scroll progress ─────────────────────────────────────────── */
    #bar {
      position: fixed; top: 0; left: 0; height: 2px; z-index: 300;
      background: linear-gradient(90deg, var(--cyan), var(--purple));
      width: 0%; transition: width .1s linear;
    }

    /* ── Nav — full-width, stuck to top; hides on scroll down, shows on scroll up ── */
    nav#nav {
      position: fixed; top: 0; left: 0; right: 0;
      z-index: 200; width: 100%;
      background: var(--white);
      border-bottom: 1px solid var(--cream-3);
      transform: translateY(0);
      transition: transform .32s var(--ease-out),
                  background .25s var(--ease-out),
                  box-shadow .25s var(--ease-out),
                  padding .3s var(--ease-out);
    }
    nav#nav.solid {
      background: var(--white);
      box-shadow: 0 2px 12px rgba(20, 15, 10, .06);
    }
    nav#nav.is-hidden { transform: translateY(-100%); }

    .nav-inner {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 32px; gap: 32px;
      max-width: 1440px;
      margin: 0 auto;
      transition: padding .3s var(--ease-out);
    }
    nav.solid .nav-inner { padding: 10px 32px; }
    @media (max-width: 720px) {
      .nav-inner { padding: 12px 20px; }
      nav.solid .nav-inner { padding: 10px 20px; }
    }

    /* Logo — SVG icon + text wordmark (no rasterization) */
    .nav-logo {
      text-decoration: none;
      display: flex; align-items: center;
      flex-shrink: 0;
      height: 32px;
      color: var(--ink);
    }
    .nav-logo-img {
      display: block;
      height: 26px;
      width: auto;
      transition: height .35s var(--ease-out);
    }
    nav.solid .nav-logo-img { height: 22px; }

    /* Nav links pill */
    .nav-links {
      display: flex; align-items: center; gap: 4px;
      padding: 4px;
      background: rgba(238, 243, 248, .7);
      border-radius: 10px;
      list-style: none;
      margin: 0;
    }
    .nav-links a {
      display: flex; align-items: center; justify-content: center;
      min-width: 96px;
      height: 32px;
      padding: 0 14px;
      border-radius: 7px;
      font-family: var(--font);
      font-size: 13px; font-weight: 500;
      color: var(--ink-3);
      text-decoration: none;
      white-space: nowrap;
      transition: background .2s var(--ease-out), color .2s var(--ease-out), box-shadow .2s var(--ease-out);
    }
    .nav-links a:hover {
      color: var(--ink);
      background: rgba(248, 251, 255, .5);
    }
    .nav-links a.active {
      background: var(--white);
      color: var(--ink);
      font-weight: 600;
      box-shadow: 0 1px 3px rgba(20, 15, 10, .08);
    }
    nav.solid .nav-links a { height: 30px; }

    .nav-cta {
      display: flex; align-items: center; gap: 8px;
    }
    .nav-cta .btn { height: 40px; padding: 0 16px; font-family: var(--font); font-weight: 600; font-size: 14px; }
    nav.solid .nav-cta .btn { height: 36px; }
    .btn {
      display: inline-flex; align-items: center; gap: 6px;
      font-family: var(--font); font-weight: 600; font-size: 14px;
      border: none; cursor: pointer; text-decoration: none;
      border-radius: 99px; white-space: nowrap;
      transition: transform .15s var(--ease-spring), box-shadow .15s, background .12s;
      position: relative; overflow: hidden;
    }
    .btn:active { transform: scale(.95) !important; }
    .btn-sm  { height: 44px; padding: 0 16px; font-size: 13px; }
    .btn-md  { height: 44px; padding: 0 22px; }
    .btn-lg  { height: 52px; padding: 0 28px; font-size: 16px; }
    .btn-ghost {
      background: rgba(248, 251, 255, .55);
      color: var(--ink-2);
      border: 1.5px solid rgba(255, 255, 255, .95);
      box-shadow: var(--sh-hard);
      backdrop-filter: blur(var(--blur-control)) saturate(140%);
      -webkit-backdrop-filter: blur(var(--blur-control)) saturate(140%);
    }
    .btn-ghost:hover {
      background: rgba(248, 251, 255, .85);
      color: var(--ink);
      transform: translateY(-1px);
      box-shadow: var(--sh-lift);
    }
    .btn-dark { background: var(--ink); color: var(--white); box-shadow: 0 6px 18px rgba(23,22,20,.18); }
    .btn-dark:hover { background: #2a3140; transform: translateY(-1px); box-shadow: 0 16px 36px rgba(23,22,20,.22), 0 4px 12px rgba(0,203,229,.18); }
    .btn-cyan {
      background: var(--ink); color: var(--white);
      box-shadow: 0 6px 18px rgba(23,22,20,.18);
    }
    .btn-cyan:hover { background: #2a3140; transform: translateY(-1px); box-shadow: 0 16px 36px rgba(23,22,20,.22), 0 4px 12px rgba(0,203,229,.18); }
    .btn svg { width: 13px; height: 13px; flex-shrink: 0; }
    /* ripple */
    .btn-ripple {
      position:absolute; border-radius:50%;
      background:rgba(255,255,255,.3);
      transform:scale(0); pointer-events:none;
      animation: rip .5s var(--ease-out) forwards;
    }
    @keyframes rip { to { transform:scale(1); opacity:0; } }

    /* ── Hero — Outer frame + framed panel + content ────────── */
    :root { --nav-h: 60px; }

    .hero {
      padding: 0;
      text-align: center;
      position: relative;
      overflow: hidden;
      background: var(--white);
    }
    .hero-panel {
      position: relative;
      width: 100%;
      border-radius: 0;
      overflow: hidden;
      /* Bottom padding gives the live-session card room to breathe
         beneath itself before the next section. */
      padding: calc(48px + var(--nav-h)) 48px 96px;
    }
    .hero-bg-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      height: 100dvh;
      object-fit: cover;
      object-position: center bottom;
      pointer-events: none;
      z-index: 0;
    }
    /* Top fade — overlays the hero panel so the top of the bg image
       blends smoothly into the white page background. */
    .hero-panel::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 28%;
      background: linear-gradient(
        to bottom,
        var(--white) 0%,
        rgba(255, 255, 255, 0.85) 35%,
        rgba(255, 255, 255, 0.45) 65%,
        rgba(255, 255, 255, 0) 100%
      );
      pointer-events: none;
      z-index: 1;
    }
    .hero-panel-content {
      position: relative;
      z-index: 2;
      max-width: 1440px;
      margin: 0 auto;
    }
    .hero::before {
      background: radial-gradient(ellipse at 50% 0%, rgba(0,229,255,.18) 0%, transparent 65%);
    }
    .hero::after {
      background-image: radial-gradient(circle, rgba(23,22,20,.06) 1px, transparent 1px);
    }
    /* Subtle radial glow */
    .hero::before {
      content: '';
      position: absolute; top: -200px; left: 50%;
      transform: translateX(-50%);
      width: 900px; height: 600px;
      background: radial-gradient(ellipse at 50% 0%, rgba(34,199,248,.12) 0%, transparent 65%);
      pointer-events: none;
    }
    /* Dot grid */
    .hero::after {
      content: '';
      position: absolute; inset: 0;
      background-image: radial-gradient(circle, rgba(20,19,16,.07) 1px, transparent 1px);
      background-size: 28px 28px;
      mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 0%, transparent 70%);
      pointer-events: none;
    }
    .hero-inner { position: relative; z-index: 1; }
    .hero-eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 6px 14px; border-radius: var(--r-full);
      background: var(--cyan-tint); border: 1px solid rgba(34,199,248,.25);
      font-size: 13px; font-weight: 600; color: var(--cyan-dark);
      margin-bottom: 32px;
      animation: fade-up .6s var(--ease-out) .1s both;
    }
    .hero-eyebrow-dot {
      width: 6px; height: 6px; border-radius: 50%; background: var(--cyan);
      animation: pulse-dot 2s ease-in-out infinite;
    }
    @keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.55;transform:scale(.75)} }
    .live-dot, .hcb-live-dot, .hsig-pulse, .hsig-radar-status-dot, .profile-status-dot,
    .video-tile-status .status-dot.is-active, .gen-dot, .hero-eyebrow-dot {
      animation-duration: 2s !important;
      animation-timing-function: cubic-bezier(.4,0,.2,1) !important;
    }
    .hero-h1 {
      font-family: var(--serif);
      font-size: clamp(40px, 5.4vw, 64px);
      font-weight: 400; line-height: 1.1; letter-spacing: -.02em;
      color: var(--ink); max-width: none; margin: 0 auto 20px;
      animation: fade-up .7s var(--ease-out) .2s both;
    }
    .hero-h1 .c,
    .hero-h1 em { font-style: italic; color: var(--primary-500); }
    .hero-sub {
      font-size: clamp(16px,1.5vw,20px); line-height: 1.6;
      color: var(--ink-3);
      max-width: 640px;
      margin: 24px auto 40px;
      animation: fade-up .7s var(--ease-out) .3s both;
    }
    .hero-actions {
      display: flex; align-items: center; justify-content: center; gap: 12px;
      flex-wrap: wrap; margin-bottom: 48px;
      animation: fade-up .7s var(--ease-out) .4s both;
    }
    /* Hero product preview card */
    .hero > .container { max-width: none; padding: 0; }
    .hero-card {
      max-width: none; width: 100%; margin: 0 auto;
      background: rgba(248, 251, 255, .82);
      border: 1px solid rgba(255, 255, 255, .65);
      border-radius: var(--r-3xl);
      box-shadow: var(--sh-card);
      backdrop-filter: blur(var(--blur-panel)) saturate(140%);
      -webkit-backdrop-filter: blur(var(--blur-panel)) saturate(140%);
      overflow: hidden;
      transition: opacity .6s var(--ease-out) .3s;
    }
    .hero-card-bar {
      display: flex; align-items: center; gap: 7px;
      padding: 14px 20px;
      background: var(--cream); border-bottom: 1px solid var(--cream-3);
    }
    .hcb-dot { width: 10px; height: 10px; border-radius: 50%; }
    .hero-card-body { padding: 0; display: flex; flex-direction: column; }

    /* ── Hero "Trusted by" block ─────────────────────────────────── */
    .hero-trusted {
      margin-bottom: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 32px;
      flex-wrap: wrap;
      animation: fade-up .7s var(--ease-out) .5s both;
      /* When the user scrolls past the carousel, browser skips the
         infinite translate animation entirely. Big scroll-time CPU win. */
      content-visibility: auto;
      contain-intrinsic-size: 1px 80px;
    }
    .hero-trusted-label { font-family: var(--font); font-size: 16px; font-weight: 600; color: var(--ink-3); letter-spacing: -0.1px; line-height: 1.4; margin: 0; flex-shrink: 0; }

    /* Logo carousel — adapted from a CSS-only repeating-strip pattern.
       The .logos track is duplicated (2 sets of 5) and translates -50% to
       loop seamlessly. The .mask layer applies a blurred wash at the
       edges, leaving a sharp window in the middle. */
    .hero-trusted .carousel {
      --carousel-speed: 16.25s; /* 25% slower than the codepen reference (13s) */
      position: relative;
      width: 100%;
      max-width: 640px;
      height: 80px;
      overflow: hidden;
      flex: 1;
    }
    .hero-trusted .carousel .logos {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      gap: 64px;
      width: max-content;
      padding-inline: 56px;
      animation: heroTrustedLoop var(--carousel-speed) linear infinite;
      -webkit-mask: linear-gradient(90deg, transparent 0, #000 40px calc(100% - 40px), transparent 100%);
              mask: linear-gradient(90deg, transparent 0, #000 40px calc(100% - 40px), transparent 100%);
    }
    .hero-trusted .carousel .logos .customer-logo {
      flex-shrink: 0;
      height: 44px;
      width: auto;
      display: block;
      object-fit: contain;
      opacity: 0.85;
      transition: opacity 0.2s ease;
    }
    .hero-trusted .carousel .logos .customer-logo:hover { opacity: 1; }
    /* Per-logo tweak — Brighteye's wordmark sits visually larger than
       the others at the shared 44px height, so trim it down. */
    .hero-trusted .carousel .logos .customer-logo[src*="logo-brighteye"] {
      height: 32px;
    }
    /* .mask layer disabled — no blurred edge shadow */
    .hero-trusted .carousel .mask {
      display: none;
      position: absolute;
      inset: 0;
      background: transparent;
      -webkit-mask: linear-gradient(90deg, #000 40px, transparent 140px calc(100% - 140px), #000 calc(100% - 40px));
              mask: linear-gradient(90deg, #000 40px, transparent 140px calc(100% - 140px), #000 calc(100% - 40px));
      pointer-events: none;
    }
    @keyframes heroTrustedLoop {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-trusted .carousel .logos { animation: none; }
    }

    /* ── Preview: TOP — Video call (top ⅓) ──────────────────────── */
    .preview-call {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
      padding: 12px;
      background: var(--cream);
      border-bottom: 1px solid var(--cream-3);
      min-height: 240px;
    }
    .video-tile {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 10px;
      background: var(--cyan-pale);
      border: 1px solid var(--cream-3);
    }
    .video-tile-avatar {
      width: 64px; height: 64px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: var(--white);
      font-family: var(--serif);
      font-weight: 700;
      font-size: 24px;
      letter-spacing: -.5px;
    }
    .video-tile-name {
      position: absolute;
      bottom: 10px; left: 10px;
      background: rgba(20,19,16,.7);
      color: var(--white);
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 500;
      backdrop-filter: blur(4px);
    }
    .video-tile-status {
      position: absolute;
      top: 10px; right: 10px;
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 10px; font-weight: 600;
      background: rgba(253,250,246,.95);
      color: var(--ink-2);
      padding: 4px 8px;
      border-radius: 999px;
      backdrop-filter: blur(4px);
    }
    .video-tile-status .status-dot {
      width: 5px; height: 5px; border-radius: 50%;
    }
    .video-tile-wave {
      position: absolute;
      bottom: 10px; right: 10px;
      display: flex; align-items: end; gap: 2.5px;
      height: 18px;
      padding: 4px 7px;
      background: rgba(20,19,16,.55);
      backdrop-filter: blur(6px);
      border-radius: 999px;
    }
    .video-tile-wave span {
      display: block;
      width: 2.5px;
      border-radius: 1.5px;
      background: rgba(255,255,255,.95);
      transform-origin: 50% 100%;
      animation: vtWave cubic-bezier(.4,0,.2,1) infinite;
    }
    .video-tile-wave span:nth-child(1) { height: 6px;  animation-delay: 0s;   animation-duration: 1.4s; }
    .video-tile-wave span:nth-child(2) { height: 11px; animation-delay: .25s; animation-duration: 1.1s; }
    .video-tile-wave span:nth-child(3) { height: 14px; animation-delay: .45s; animation-duration: 1.6s; }
    .video-tile-wave span:nth-child(4) { height: 9px;  animation-delay: .15s; animation-duration: 1.25s; }
    .video-tile-wave span:nth-child(5) { height: 12px; animation-delay: .35s; animation-duration: 1.5s; }
    @keyframes vtWave {
      0%, 100% { transform: scaleY(.3);  opacity: .55; }
      50%      { transform: scaleY(1);   opacity: 1; }
    }
    .video-tile-nousable .video-tile-wave { background: rgba(34,199,248,.18); border: 1px solid rgba(34,199,248,.35); }
    .video-tile-nousable .video-tile-wave span { background: var(--cyan); }
    .video-tile-nousable .video-tile-wave span { animation-duration: 1.6s; }

    /* Hide waveform on tiles that aren't currently speaking (Nousable stays visible always) */
    .video-tile { transition: box-shadow .35s var(--ease-out); }
    .video-tile .video-tile-wave { transition: opacity .3s var(--ease-out); }
    .video-tile:not(.is-speaking):not(.video-tile-nousable) .video-tile-wave { opacity: 0; }

    /* Active speaker glow */
    .video-tile.is-speaking {
      box-shadow: 0 0 0 2px rgba(52,199,106,.45), 0 0 32px rgba(52,199,106,.18);
    }
    .video-tile-status .status-dot.is-active {
      animation: pulse-dot 1.4s ease-in-out infinite;
    }

    /* Signal pulse animation (fired by scheduler) */
    .hsig-item.is-pulsed {
      animation: sigPulse 1.05s ease-out;
    }
    @keyframes sigPulse {
      0%   { box-shadow: 0 0 0 0 var(--c, var(--cyan)); transform: scale(1); }
      30%  { box-shadow: 0 0 0 5px color-mix(in srgb, var(--c, var(--cyan)) 40%, transparent); transform: scale(1.025); }
      100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
    }
    .hsig-item.is-pulsed .hsig-dot {
      animation: sigPulseDot .8s ease-out;
    }
    @keyframes sigPulseDot {
      0% { transform: scale(1); box-shadow: 0 0 0 0 var(--c, var(--cyan)); }
      40% { transform: scale(1.4); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c, var(--cyan)) 35%, transparent); }
      100% { transform: scale(1); }
    }
    /* New transcript items animate in */
    .transcript-bubble, .transcript-ai-note {
      animation: tcAppear .65s cubic-bezier(.16,1,.3,1) both;
    }
    @keyframes tcAppear {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* Browser chrome — live indicator */
    .hcb-live {
      display: inline-flex; align-items: center; gap: 6px;
      margin-left: auto;
      font-size: 11px; font-weight: 600;
      color: var(--ink-3);
      padding: 3px 10px;
      background: var(--cream);
      border: 1px solid var(--cream-3);
      border-radius: 999px;
    }
    .hcb-live-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--red);
      animation: pulse-dot 1.4s ease-in-out infinite;
    }

    /* Live-session pause / repeat controls */
    .hcb-controls {
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .hcb-ctrl {
      width: 30px;
      height: 30px;
      padding: 0;
      border-radius: 50%;
      background: transparent;
      border: 1px solid transparent;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--ink-3);
      transition: background .15s var(--ease-out), color .15s var(--ease-out), border-color .15s var(--ease-out);
    }
    .hcb-ctrl:hover,
    .hcb-ctrl:focus-visible {
      background: var(--cream);
      border-color: var(--cream-3);
      color: var(--ink);
      outline: none;
    }
    .hcb-ctrl .material-icons { font-size: 18px; line-height: 1; }
    .hcb-ctrl-play { display: none; }
    .hero-card.is-paused .hcb-ctrl-pause { display: none; }
    .hero-card.is-paused .hcb-ctrl-play  { display: inline-block; }
    .video-tile-nousable {
      background: linear-gradient(135deg, var(--primary-700) 0%, var(--ink) 100%);
      border-color: rgba(255,255,255,.45);
    }
    .video-tile-nousable .video-tile-avatar {
      background: rgba(255,255,255,.85);
      box-shadow: 0 6px 20px rgba(0,0,0,.18);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .video-tile-nousable .video-tile-avatar img {
      width: 50px; height: auto; display: block; object-fit: contain;
    }
    .video-tile-nousable .video-tile-status {
      background: rgba(34,199,248,.15);
      color: var(--cyan);
      border: 1px solid rgba(34,199,248,.3);
    }

    /* ── Preview: BOTTOM — Transcript (25%) + Animation (75%) ─── */
    .preview-bottom {
      display: grid;
      grid-template-columns: 25% 75%;
      height: 460px;
    }

    /* Transcript */
    .transcript-col {
      background: var(--cream);
      padding: 20px;
      display: flex; flex-direction: column;
      gap: 14px;
      overflow: hidden;
      border-right: 1px solid var(--cream-3);
    }
    .transcript-header {
      display: flex; justify-content: space-between; align-items: center;
      font-size: 11px; font-weight: 600;
      color: var(--ink-4);
      text-transform: uppercase;
      letter-spacing: .08em;
    }
    .transcript-header-time {
      font-weight: 500; text-transform: none; letter-spacing: 0;
      color: var(--ink-3);
      display: inline-flex; align-items: center; gap: 5px;
    }
    .transcript-header-time .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); animation: pulse-dot 1.4s ease-in-out infinite; }
    .transcript-list {
      display: flex; flex-direction: column;
      gap: 10px;
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-width: thin;
      scrollbar-color: var(--cream-3) transparent;
      padding-right: 4px;
    }
    .transcript-list::-webkit-scrollbar { width: 4px; }
    .transcript-list::-webkit-scrollbar-track { background: transparent; }
    .transcript-list::-webkit-scrollbar-thumb { background: var(--cream-3); border-radius: 4px; }
    .transcript-list::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }
    .transcript-bubble {
      display: flex; flex-direction: column;
      gap: 4px;
      max-width: 90%;
      align-items: flex-start;
      align-self: flex-start;
    }
    .transcript-bubble.is-student {
      align-self: flex-end;
      align-items: flex-end;
      text-align: right;
    }
    .transcript-bubble.is-student .transcript-text { text-align: left; }
    .transcript-speaker {
      font-size: 10px; font-weight: 600;
      color: var(--ink-4);
      text-transform: uppercase;
      letter-spacing: .04em;
    }
    .transcript-text {
      background: var(--white);
      border: 1px solid var(--cream-3);
      border-radius: 12px;
      padding: 9px 12px;
      color: var(--ink-2);
      font-size: 13px;
      line-height: 1.5;
    }
    .transcript-bubble.is-student .transcript-text {
      background: var(--blue-bg);
      border-color: rgba(91,126,245,.3);
      color: var(--ink);
    }
    .transcript-text .err {
      text-decoration: underline wavy var(--red);
      text-underline-offset: 2px;
    }
    .transcript-ai-note {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 11px;
      color: var(--ink-2);
      background: var(--amber-bg);
      border: 1px solid rgba(245,166,35,.4);
      border-radius: 8px;
      padding: 6px 10px;
      font-style: italic;
      align-self: flex-start;
      line-height: 1.4;
    }
    .transcript-ai-note .material-icons { color: #A06400; flex-shrink: 0; }
    .transcript-ai-note.is-positive {
      background: var(--green-bg);
      border-color: rgba(52,199,106,.4);
    }
    .transcript-ai-note.is-positive .material-icons { color: #237341; }

    /* Animation column — bg SVG draws lines from signals to hexagon */
    .animation-col {
      position: relative;
      display: grid;
      grid-template-columns: 70% 30%;
      gap: 0;
      background: var(--white);
      overflow: hidden;
    }
    .anim-flow-bg {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      pointer-events: none;
      z-index: 0;
    }
    .signals-flow {
      position: relative;
      z-index: 1;
      padding: 20px;
      min-width: 0;
    }
    .signals-flow .hsig-col { height: 100%; gap: 8px; width: 180px; }
    .signals-flow .hsig-list { flex: 1; gap: 6px; }
    .signals-flow .hsig-item { flex: 1; min-height: 0; padding: 0 12px; align-items: center; }
    .profile-col {
      position: relative;
      z-index: 1;
      display: flex; flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 20px 16px;
      background: linear-gradient(180deg, rgba(240,251,254,.5) 0%, transparent 70%);
    }
    .profile-avatar {
      width: 64px; height: 64px;
      border-radius: 50%;
      background: var(--blue);
      display: flex; align-items: center; justify-content: center;
      color: var(--white);
      font-family: var(--serif);
      font-weight: 700;
      font-size: 24px;
      letter-spacing: -.5px;
      box-shadow: var(--sh-card);
    }
    .profile-name {
      font-family: var(--serif);
      font-size: 16px;
      font-weight: 600;
      color: var(--ink);
      text-align: center;
      letter-spacing: -.2px;
      margin-top: 4px;
    }
    .profile-level {
      font-size: 11px;
      font-weight: 600;
      color: var(--cyan-dark);
      background: var(--cyan-pale);
      padding: 3px 10px;
      border-radius: 999px;
    }
    .profile-radar { width: 100%; max-width: 220px; margin-top: 16px; }
    .profile-status {
      display: flex; align-items: center; gap: 6px;
      font-size: 10px; font-weight: 500;
      color: var(--ink-3);
      margin-top: auto;
    }
    .profile-status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); animation: pulse-dot 2s ease-in-out infinite; }

    /* Hero signal collection viz */
    .hsig-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
    .hsig-col-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-4); }
    .hsig-list { display: flex; flex-direction: column; gap: 6px; }
    .hsig-item {
      display: flex; align-items: center; gap: 8px;
      padding: 9px 10px;
      background: var(--cream);
      border: 1px solid var(--cream-3);
      border-radius: 10px;
      font-size: 12px;
      font-weight: 600;
      color: var(--ink-2);
      position: relative;
      overflow: hidden;
      transition: background .2s, transform .2s var(--ease-spring);
    }
    .hsig-item:hover { background: var(--white); transform: translateX(2px); }
    .hsig-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .hsig-pulse {
      position: absolute; right: 10px; top: 50%;
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--c, var(--cyan));
      animation: hsigPulseDot 1.8s ease-in-out infinite;
    }
    @keyframes hsigPulseDot {
      0%, 100% { opacity: .35; transform: translateY(-50%) scale(.7); }
      50% { opacity: 1; transform: translateY(-50%) scale(1.2); }
    }
    .hsig-flow {
      position: relative; display: flex;
      align-items: center; justify-content: center;
      background: linear-gradient(135deg, rgba(34,199,248,.05) 0%, transparent 50%, rgba(52,199,106,.05) 100%);
      border-radius: 12px;
      border: 1px solid var(--cream-3);
    }
    .hsig-flow svg { width: 100%; height: 100%; min-height: 220px; display: block; }
    .hsig-radar {
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      flex: 1;
    }
    .hsig-radar svg { width: 100%; max-width: 200px; display: block; }
    .hsig-radar-status {
      display: flex; align-items: center; gap: 6px;
      font-size: 10px; font-weight: 500;
      color: var(--ink-3);
      margin-top: 8px;
    }
    .hsig-radar-status-dot {
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--green);
      animation: pulse-dot 2s ease-in-out infinite;
    }

    /* ── Mini UI cards inside hero ───────────────────────────────── */
    .mu {
      background: var(--cream); border: 1px solid var(--cream-3);
      border-radius: var(--r-lg); padding: 16px; text-align: left;
      box-shadow: var(--sh-card);
    }
    .mu-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-4); margin-bottom: 8px; }
    .mu-val { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--ink); line-height: 1; }
    .mu-sub { font-size: 12px; color: var(--ink-4); margin-top: 4px; }
    .mu-bar-track { height: 5px; background: var(--cream-3); border-radius: var(--r-full); margin-top: 10px; overflow: hidden; }
    .mu-bar-fill { height: 100%; border-radius: var(--r-full); }
    .mu-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
    .mu-badge {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 3px 8px; border-radius: var(--r-full);
      font-size: 11px; font-weight: 600;
    }

    /* ── Customers bar ───────────────────────────────────────────── */
    .customers {
      padding: 48px 0;
      border-top: 1px solid var(--cream-3);
      border-bottom: 1px solid var(--cream-3);
      background: var(--cream);
    }
    .customers-label { text-align: center; font-size: 13px; font-weight: 600; color: var(--ink-4); letter-spacing: .5px; text-transform: uppercase; margin-bottom: 28px; }
    .customers-logos {
      display: flex; align-items: center; justify-content: center; gap: 48px;
      flex-wrap: wrap;
    }
    .customer-logo {
      font-family: var(--serif); font-size: 18px; font-weight: 700;
      color: var(--ink-4); opacity: .55; transition: opacity .2s;
    }
    .customer-logo:hover { opacity: .85; }

    /* ── Section shared ──────────────────────────────────────────── */
    .section { padding: 72px 0; }

    /* ── Reusable scroll-snap carousel ──────────────────────────────
       `.scroll-carousel`        → horizontal scroll row at every width.
       `.scroll-carousel-mobile` → carousel only at ≤900px (wider
                                   viewports keep their original grid).
       No edge fade, no inset padding — cards sit flush to the
       container edges. CSS-only, no JS. */
    /* ── Mobile-only carousel ────────────────────────────────────────
       On desktop the JS-injected `.scroll-carousel-track` has
       `display: contents`, so it's invisible to layout — children pop
       up as direct children of the outer container and the section's
       original grid/flex CSS takes over. Below 900px the track turns
       into a horizontal scroll-snap carousel. */
    .scroll-carousel-track {
      display: contents;
    }
    @media (max-width: 900px) {
      .scroll-carousel,
      .scroll-carousel-mobile {
        display: block !important;
        grid-template-columns: none !important;
        overflow: visible;
        position: relative;
      }
      .scroll-carousel > .scroll-carousel-track,
      .scroll-carousel-mobile > .scroll-carousel-track {
        display: flex;
        flex-direction: row;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding: 16px 0;
      }
      .scroll-carousel > .scroll-carousel-track::-webkit-scrollbar,
      .scroll-carousel-mobile > .scroll-carousel-track::-webkit-scrollbar { display: none; height: 0; }
      .scroll-carousel > .scroll-carousel-track > *,
      .scroll-carousel-mobile > .scroll-carousel-track > * {
        scroll-snap-align: start;
        flex: 0 0 calc(100% / 1.15);
        min-width: 280px;
      }
    }

    /* Carousel controls — dots + prev/next arrows, injected by JS.
       Mobile-only: above 900px the carousels revert to grids and
       controls are hidden. */
    .carousel-wrap { position: relative; }
    .carousel-controls { display: none; }
    @media (max-width: 900px) {
      .carousel-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        margin-top: 16px;
      }
    }
    /* Arrow buttons: 44x44 tap target, no border/background — just the
       arrow icon. Color shifts on hover, opacity drops when disabled. */
    .carousel-btn {
      appearance: none;
      border: 0;
      background: transparent;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--ink);
      padding: 0;
      transition: color 0.2s var(--ease-out), opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
    }
    .carousel-btn:hover { color: var(--primary-700); }
    .carousel-btn:active { transform: scale(0.92); }
    .carousel-btn[disabled] { opacity: 0.25; cursor: default; pointer-events: none; }
    .carousel-btn .material-icons { font-size: 22px; }

    /* Dots: 32x32 transparent tap target with a 10x10 visual dot painted
       via ::before. Gap on the row is 0 — the tap-area extension does
       the spacing for us. */
    .carousel-dots {
      display: inline-flex;
      gap: 0;
      align-items: center;
    }
    .carousel-dot {
      appearance: none;
      border: 0;
      background: transparent;
      width: 32px;
      height: 32px;
      padding: 0;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .carousel-dot::before {
      content: "";
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--cream-3);
      transition: background 0.2s var(--ease-out), transform 0.2s var(--ease-out);
    }
    .carousel-dot:hover::before { background: var(--ink-3); }
    .carousel-dot.is-active::before {
      background: var(--ink);
      transform: scale(1.35);
    }

    /* Per-section carousel sizing — mobile only. Each section gets a
       card-width that fits its column structure when collapsed. */
    @media (max-width: 900px) {
      /* Learner experience: flatten the two row wrappers so all four
         cards become direct flex children of the scroll track. */
      .learner-experience .le-grid.scroll-carousel .le-grid-row { display: contents; }
      .learner-experience .le-grid.scroll-carousel .scroll-carousel-track .le-card {
        flex: 0 0 calc(100% / 1.15);
        min-width: 280px;
        scroll-snap-align: start;
      }
      .learner-experience .le-grid.scroll-carousel .scroll-carousel-track > .le-grid-row {
        flex: unset;
        min-width: 0;
      }
      /* Drop the column flex gap on mobile — the header sits directly
         against the carousel below, no breathing-room strip. Also kill
         the header's padding-bottom and the carousel track's padding-top
         so the three sources of vertical space collapse to zero. */
      .outputs-col { gap: 0; }
      .outputs-col-header { padding-bottom: 0; }
      .outputs-col-cards.scroll-carousel > .scroll-carousel-track {
        padding-top: 0;
      }

      /* Outputs cards on mobile: 80% width with peek + restyled to
         match the integrate-card layout (icon on top, title + desc
         stacked below). No bullets. Description clamped to 3 lines
         for consistent card heights. */
      .outputs-col-cards.scroll-carousel > .scroll-carousel-track > * {
        flex: 0 0 80%;
        min-width: 0;
      }
      .outputs-col-cards.scroll-carousel .output-mini {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 24px;
        border-radius: var(--r-lg);
      }
      .outputs-col-cards.scroll-carousel .output-mini-icon {
        width: 52px;
        height: 52px;
        color: var(--primary-700);
        font-size: 26px;
      }
      .outputs-col-cards.scroll-carousel .output-mini-title {
        font-family: var(--serif);
        font-weight: 700;
        font-size: 22px;
        letter-spacing: -0.3px;
        line-height: 1.25;
      }
      .outputs-col-cards.scroll-carousel .output-mini-desc {
        font-size: 14.5px;
        line-height: 1.6;
        display: -webkit-box;
        -webkit-line-clamp: 3;
                line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }
    .container { max-width: 1440px; margin: 0 auto; padding: 0 32px; }
    .section-eyebrow {
      display: inline-flex; align-items: center;
      font-size: 15px; font-weight: 600; color: var(--cyan-dark); letter-spacing: .3px;
      margin-bottom: 16px;
      padding: 8px 16px;
      background: var(--white);
      border: 1px solid var(--border-soft);
      border-radius: var(--r-full);
      box-shadow: var(--sh-card);
    }
    .section-eyebrow-line { display: none; }
    .section-h2 {
      font-family: var(--serif); font-size: clamp(32px, 3.5vw, 52px);
      font-weight: 400; line-height: 1.1; letter-spacing: -.02em;
      color: var(--ink); margin-bottom: 18px;
    }
    .section-h2 em,
    .section-h2 .c { font-style: italic; color: var(--primary-500); }
    .section-sub { font-size: 17px; line-height: 1.65; color: var(--ink-3); max-width: 540px; }

    /* ── Bento grid ──────────────────────────────────────────────── */
    .bento { display: grid; gap: 14px; }
    .bento-2 { grid-template-columns: 1fr 1fr; }
    .bento-3 { grid-template-columns: 1fr 1fr 1fr; }
    .bento-532 { grid-template-columns: 5fr 3fr 2fr; }

    .bcard {
      background: var(--white); border: 1px solid var(--cream-3);
      border-radius: var(--r-2xl); overflow: hidden;
      box-shadow: var(--sh-card);
      transition: box-shadow .2s var(--ease-out), transform .2s var(--ease-spring);
    }
    .bcard:hover { box-shadow: var(--sh-lift); transform: translateY(-3px) rotate(-1.5deg); }
    .bcard-inner { padding: 28px; }
    .bcard-tag {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 4px 10px; border-radius: var(--r-full);
      font-size: 12px; font-weight: 600; margin-bottom: 14px;
    }
    .bcard-h { font-family: var(--serif); font-size: 22px; font-weight: 400; line-height: 1.2; color: var(--ink); margin-bottom: 10px; }
    .bcard-p { font-size: 15px; line-height: 1.6; color: var(--ink-3); }
    /* dark bcard */
    .bcard-dark { background: var(--ink); border-color: transparent; }
    .bcard-dark .bcard-h { color: var(--white); }
    .bcard-dark .bcard-p { color: rgba(255,255,255,.45); }
    /* accent bcard */
    .bcard-cyan { background: linear-gradient(135deg, #D6F5FF 0%, #EAF9FD 100%); border-color: rgba(34,199,248,.2); }

    /* Spans */
    .col-span-2 { grid-column: span 2; }
    .col-span-3 { grid-column: span 3; }
    .row-span-2 { grid-row: span 2; }

    /* ── Mini UI inside bento ────────────────────────────────────── */
    .mini-profile {
      background: var(--white); border: 1px solid var(--cream-3);
      border-radius: var(--r-lg); padding: 16px; margin-top: 16px;
      box-shadow: var(--sh-card);
    }
    .mini-profile-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--cream-3); }
    .mini-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--cyan-pale); display: flex; align-items: center; justify-content: center; font-size: 16px; border: 2px solid rgba(34,199,248,.3); }
    .mini-name { font-size: 13px; font-weight: 600; color: var(--ink); }
    .mini-level { font-size: 11px; font-weight: 600; color: var(--cyan-dark); background: var(--cyan-pale); padding: 2px 7px; border-radius: var(--r-full); display: inline-block; margin-top: 1px; }
    .mini-live { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--green); }
    .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pulse-dot 2s ease-in-out infinite; }
    .mini-bars { display: flex; flex-direction: column; gap: 9px; }
    .mini-bar-row { display: flex; flex-direction: column; gap: 4px; }
    .mini-bar-labels { display: flex; justify-content: space-between; }
    .mini-bar-name { font-size: 12px; color: var(--ink-3); font-weight: 500; }
    .mini-bar-pct { font-size: 12px; color: var(--ink); font-weight: 600; }
    .mini-bar-track { height: 5px; background: var(--cream-2); border-radius: var(--r-full); overflow: hidden; }
    .mini-bar-fill { height: 100%; border-radius: var(--r-full); }

    /* Signal dots bcard visual */
    .signal-dots { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 16px; }
    .signal-dot-item {
      display: flex; flex-direction: column; align-items: center; gap: 6px;
      padding: 12px 8px; border-radius: var(--r-md);
      border: 1px solid var(--cream-3); background: var(--white);
      font-size: 11px; font-weight: 600; color: var(--ink-3); text-align: center;
      box-shadow: var(--sh-card);
      transition: all .2s var(--ease-spring);
    }
    .signal-dot-item:hover { transform: scale(1.06) rotate(-2deg); box-shadow: var(--sh-lift); }
    .signal-dot-item span:first-child { font-size: 22px; }

    /* Probe mini */
    .mini-probe { margin-top: 16px; }
    .mini-probe-q {
      font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.8);
      background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
      border-radius: var(--r-md); padding: 12px; margin-bottom: 10px;
    }
    .mini-probe-opts { display: flex; flex-direction: column; gap: 6px; }
    .mini-probe-opt {
      padding: 9px 13px; border-radius: 16px;
      font-size: 13px; font-weight: 500; cursor: pointer;
      border: 1px solid rgba(255,255,255,.1);
      color: rgba(255,255,255,.65);
      background: rgba(255,255,255,.04);
      transition: all .15s var(--ease-spring);
      display: flex; justify-content: space-between; align-items: center;
    }
    .mini-probe-opt:hover { background: rgba(255,255,255,.1); color: #fff; transform: translateX(3px); }
    .mini-probe-opt.sel { background: rgba(34,199,248,.12); border-color: rgba(34,199,248,.4); color: var(--cyan); }
    .mini-probe-opt.ok  { background: rgba(52,199,106,.12); border-color: rgba(52,199,106,.3); color: #34C76A; }

    /* Content gen mini */
    .gen-card {
      margin-top: 16px; background: var(--cream); border: 1px solid var(--cream-3);
      border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-card);
    }
    .gen-top { padding: 12px 14px; border-bottom: 1px solid var(--cream-3); display: flex; gap: 8px; }
    .gen-chip { padding: 3px 9px; border-radius: var(--r-full); font-size: 11px; font-weight: 600; }
    .gen-body { padding: 14px; }
    .gen-generating {
      display: flex; align-items: center; gap: 8px;
      font-size: 12px; font-weight: 600; color: var(--ink-4); margin-bottom: 10px;
    }
    .gen-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); animation: pulse-dot 1.2s ease-in-out infinite; }
    .gen-lines { display: flex; flex-direction: column; gap: 6px; }
    .gen-line { height: 10px; border-radius: var(--r-full); background: var(--cream-3); }
    .gen-line.short { width: 65%; }
    .gen-line.medium { width: 85%; }
    .gen-line.full { width: 100%; }
    .gen-line.reveal-line { background: linear-gradient(90deg, var(--cyan-pale), var(--cream-3)); animation: line-reveal 2.5s ease-in-out infinite alternate; }
    @keyframes line-reveal { from{opacity:.4} to{opacity:1} }

    /* Output grid card */
    .output-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
    .o-chip {
      display: flex; align-items: center; gap: 6px;
      padding: 7px 12px; border-radius: var(--r-full);
      background: var(--white); border: 1px solid var(--cream-3);
      font-size: 13px; font-weight: 600; color: var(--ink-2);
      box-shadow: var(--sh-card);
      transition: all .18s var(--ease-spring);
    }
    .o-chip:hover { transform: translateY(-2px) rotate(-2deg); box-shadow: var(--sh-hard); }
    .o-chip-icon { font-size: 15px; }

    /* ── How it works ────────────────────────────────────────────── */
    .steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--cream-3); border: 1px solid var(--cream-3); border-radius: var(--r-2xl); overflow: hidden; margin-top: 56px; }
    .step { background: var(--white); padding: 32px 24px; position: relative; transition: background .2s; }
    .step:hover { background: var(--cream); }
    .step-num {
      width: 36px; height: 36px; border-radius: 50%;
      background: var(--ink); color: var(--white);
      font-family: var(--serif); font-size: 16px; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 16px;
    }
    .step.active .step-num { background: var(--cyan); color: var(--ink); box-shadow: 0 2px 10px rgba(34,199,248,.4); }
    .step-h { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
    .step-p { font-size: 14px; line-height: 1.55; color: var(--ink-3); }

    /* ── Testimonial ─────────────────────────────────────────────── */
    .testimonial-section { background: var(--cream); border-top: 1px solid var(--cream-3); border-bottom: 1px solid var(--cream-3); }
    .testimonial-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 48px; }
    .t-card {
      background: var(--white); border: 1px solid var(--cream-3);
      border-radius: var(--r-xl); padding: 28px;
      box-shadow: var(--sh-card);
      transition: box-shadow .2s var(--ease-out), transform .2s var(--ease-spring);
    }
    .t-card:hover { box-shadow: var(--sh-lift); transform: translateY(-2px) rotate(-1deg); }
    .t-stars { display: flex; gap: 3px; margin-bottom: 16px; }
    .t-star { color: var(--amber); font-size: 14px; }
    .t-quote { font-family: var(--serif); font-size: 17px; line-height: 1.55; color: var(--ink); margin-bottom: 20px; font-style: italic; }
    .t-author { display: flex; align-items: center; gap: 10px; }
    .t-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; }
    .t-name { font-size: 14px; font-weight: 600; color: var(--ink); }
    .t-role { font-size: 13px; color: var(--ink-4); }

    /* ── Stats band ──────────────────────────────────────────────── */
    .stats-band { background: var(--ink); padding: 72px 0; }
    .stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-2xl); overflow: hidden; }
    .stat-cell { padding: 36px 28px; text-align: center; }
    .stat-num { font-family: var(--serif); font-size: 48px; font-weight: 700; color: var(--white); line-height: 1; margin-bottom: 8px; }
    .stat-num span { color: var(--cyan); }
    .stat-label { font-size: 14px; color: rgba(255,255,255,.4); font-weight: 500; }


    /* ── Footer ──────────────────────────────────────────────────── */
    footer { background: var(--ink); padding: 64px 0 40px; }
    .footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 36px; }
    .footer-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--white); }
    .footer-logo-icon { display: block; width: 42px; height: 36px; background: url('nousable-logo-full.svg') no-repeat center / contain; flex-shrink: 0; }
    .footer-logo-wordmark { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 24px; letter-spacing: -0.4px; line-height: 1; }
    .footer-desc { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.35); margin-bottom: 24px; }
    .footer-col-title { font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: rgba(255,255,255,.25); margin-bottom: 16px; }
    .footer-links { display: flex; flex-direction: column; gap: 2px; }
    .footer-links a {
      font-size: 14px; color: rgba(255,255,255,.45); text-decoration: none;
      transition: color .13s, transform .13s;
      display: inline-flex; align-items: center;
      min-height: 44px; padding: 6px 0;
    }
    .footer-links a:hover { color: rgba(255,255,255,.85); transform: translateX(3px); }
    .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
    .footer-copy { font-size: 13px; color: rgba(255,255,255,.2); }

    /* ── Toast ───────────────────────────────────────────────────── */
    .toast {
      position: fixed; bottom: 24px; left: 50%;
      transform: translateX(-50%) translateY(16px);
      opacity: 0; z-index: 9000; pointer-events: none;
      display: flex; align-items: center; gap: 10px;
      padding: 13px 20px; border-radius: var(--r-full);
      font-size: 14px; font-weight: 600;
      box-shadow: var(--sh-hard);
      transition: opacity .28s var(--ease-out), transform .32s var(--ease-spring);
      white-space: nowrap;
    }
    .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
    .toast-success { background: var(--green); color: #fff; }
    .toast-info    { background: var(--ink); color: var(--white); }

    /* ── Reveal animations ───────────────────────────────────────── */
    @keyframes fade-up { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
    @keyframes fade-in { from{opacity:0} to{opacity:1} }
    .reveal { opacity:0; transform:translateY(28px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
    .reveal.from-left  { transform:translateX(-24px); }
    .reveal.from-right { transform:translateX(24px); }
    .reveal.scale-in   { transform:scale(.95); }
    .reveal.up         { opacity:1; transform:none; }
    .rd1 { transition-delay:.06s; } .rd2 { transition-delay:.12s; }
    .rd3 { transition-delay:.18s; } .rd4 { transition-delay:.24s; }
    .rd5 { transition-delay:.30s; }

    /* ── Responsive ──────────────────────────────────────────────── */
    @media (max-width: 960px) {
      .bento-2, .bento-3, .bento-532 { grid-template-columns: 1fr; }
      .col-span-2, .col-span-3, .row-span-2 { grid-column: auto; grid-row: auto; }
      .steps { grid-template-columns: 1fr 1fr; }
      .testimonial-grid, .stats-grid { grid-template-columns: 1fr 1fr; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .hero-card-body { grid-template-columns: 1fr; }
      .nav-links { display: none; }
    }
    /* ── Material Icons ─────────────────────────────────────────── */
    .material-icons { line-height: 1; vertical-align: middle; user-select: none; }
    .signal-dot-item .material-icons { font-size: 22px; }
    .o-chip-icon.material-icons { font-size: 16px; }
    .t-avatar .material-icons, .mini-avatar .material-icons { font-size: 20px; color: inherit; }

    /* ── Pinned Card Stack ─────────────────────────────────────── */
    .stack-section { position: relative; padding: 0; }
    .stack-wrapper {
      position: sticky; top: 0; height: 100vh;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 56px 32px 32px;
      gap: 80px;
      overflow: hidden;
    }
    .stack-header { max-width: 920px; text-align: center; flex-shrink: 0; }
    .stack-header .section-eyebrow { justify-content: center; }
    .stack-container {
      position: relative;
      width: 100%; max-width: 1440px;
      height: 560px;
      flex-shrink: 0;
    }
    .stack-card {
      position: absolute; inset: 0;
      background: rgba(248, 251, 255, .72);
      border: 1px solid rgba(255, 255, 255, .55);
      border-radius: var(--r-2xl);
      box-shadow: var(--sh-card);
      backdrop-filter: blur(var(--blur-panel)) saturate(140%);
      -webkit-backdrop-filter: blur(var(--blur-panel)) saturate(140%);
      transform-origin: center top;
      padding: 24px;
      display: flex;
      align-items: center;
      gap: 24px;
      overflow: hidden;
      will-change: transform, opacity;
    }
    .stack-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 24px; padding: 0 16px; }
    .stack-card-text .bcard-h {
      font-family: var(--serif);
      font-size: 36px; font-weight: 600;
      line-height: 1.15; letter-spacing: -0.5px;
      color: var(--ink);
    }
    .stack-card-text .bcard-h .hl {
      font-family: var(--serif);
      font-style: italic;
      font-weight: 700;
      color: var(--cyan);
    }
    .stack-card-text .bcard-h .hl-pink { color: var(--accent-500); }
    .stack-card-text .bcard-p { font-size: 16px; line-height: 1.6; color: var(--ink-2); }

    /* Layer number tag pill */
    .layer-tag {
      display: inline-flex; gap: 10px; align-items: center;
      background: var(--cream-2);
      border: 1px solid var(--cream-3);
      border-radius: 8px;
      padding: 6px 14px;
      font-family: var(--serif);
      font-style: italic;
      font-weight: 500;
      font-size: 22px;
      letter-spacing: -0.2px;
      line-height: 1.3;
      align-self: flex-start;
    }
    .layer-tag .layer-num { color: var(--ink-3); }
    .layer-tag .layer-name { color: var(--ink-2); }

    /* Bulleted list with icon containers */
    .layer-bullets {
      list-style: none;
      padding: 0 16px; margin: 0;
      display: flex; flex-direction: column;
      gap: 14px;
    }
    .layer-bullets li {
      display: flex; align-items: center; gap: 12px;
      font-size: 15px;
      font-weight: 600;
      line-height: 1.4;
      letter-spacing: -0.1px;
      color: var(--ink);
    }
    .bullet-icon {
      flex-shrink: 0;
      width: 40px; height: 40px;
      border: 1px solid rgba(255,255,255,.55);
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, var(--primary-100), var(--accent-200));
      box-shadow: 0 6px 9px rgba(23,22,20,.05), inset 0 1px 0 rgba(255,255,255,.55);
    }
    .bullet-icon .material-icons {
      font-size: 20px;
      color: var(--ink);
      position: relative;
      z-index: 1;
    }
    .stack-card-visual {
      flex-shrink: 0;
      width: 100%;
      max-width: 512px;
      aspect-ratio: 1;
      border-radius: var(--r-lg);
      border: 1px solid var(--cream-3);
      overflow: hidden;
      position: relative;
    }

    /* ── Stack-card backgrounds — soft tinted gradients ─── */
    .stack-card-visual.viz-capture {
      background: linear-gradient(135deg, #EEF3FF 0%, #F8FBFF 100%);
    }
    .stack-card-visual.viz-graph {
      background: linear-gradient(135deg, #F5EDFB 0%, #F8FBFF 100%);
    }
    .stack-card-visual.viz-orchestrate {
      background: linear-gradient(135deg, #EAF6F0 0%, #F8FBFF 100%);
    }

    /* Ambient glow blurs for atmospheric depth */
    .viz-glow {
      position: absolute;
      width: 200px; height: 200px;
      border-radius: 50%;
      filter: blur(70px);
      pointer-events: none;
      z-index: 0;
    }
    .viz-glow.glow-cyan { background: var(--primary-400); opacity: .35; }
    .viz-glow.glow-pink { background: var(--accent-400);  opacity: .28; }
    .stack-card-visual > * { position: relative; z-index: 1; }
    .stack-card-visual > .viz-glow { z-index: 0; }

    /* ── Reusable responsive viz scaler ────────────────────────
       The three system mockups (.glass-stack, .le-graph, .viz-orch)
       are designed at a natural 480×480 layout. .system-viz wraps
       them in a fluid container that scales-to-fit so the same
       markup works inside the home page's stack cards AND inside
       the product page's 480px isometric tiles AND on mobile.
       Uses cqi units so the scale tracks container width directly. */
    .system-viz {
      position: relative;
      aspect-ratio: 1 / 1;
      width: 100%;
      max-height: 100%;
      margin: 0 auto;
      overflow: hidden;
      container-type: inline-size;
      display: grid;
      /* Force a single grid cell that exactly matches the container —
         minmax(0, 1fr) lets the cell shrink below content size, which
         prevents the implicit `auto` track from expanding to fit the
         480×480 child. Without this, the track grows to 480, place-items
         centers in the 480 track (a no-op), and the child ends up
         offset (56, 56) from the actual container center → after the
         tile's 3D rotation that turns into ~100px of visible offset. */
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr);
      place-items: center;
    }
    .system-viz-inner {
      position: relative;
      width: 480px;
      height: 480px;
      transform-origin: center center;
      transform: scale(min(1, calc(100cqi / 480px)));
    }

    /* ── Glassy visual: shared across all stack-card visuals ─── */
    .glass-stack {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 75%;
      display: flex; flex-direction: column;
      gap: 14px;
      z-index: 2;
    }
    .glass-window {
      background: rgba(255, 255, 255, .55);
      border: 1px solid rgba(255, 255, 255, .65);
      border-radius: 16px;
      box-shadow: var(--sh-card);
      backdrop-filter: blur(20px) saturate(140%);
      -webkit-backdrop-filter: blur(20px) saturate(140%);
      padding: 14px;
    }
    .glass-window-bar { display: flex; align-items: center; gap: 5px; padding: 0 4px 12px; }
    .glass-window-bar .cwb-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(20,19,16,.18); }
    .glass-window-bar .cwb-rail { flex: 1; height: 6px; margin-left: 16px; background: rgba(20,19,16,.08); border-radius: 3px; }
    .glass-list { display: flex; flex-direction: column; gap: 8px; }
    .glass-item {
      display: flex; align-items: center; gap: 12px;
      padding: 14px 16px;
      background: var(--white);
      border-radius: 10px;
      box-shadow: 0 1px 2px rgba(20,19,16,.04);
      font-size: 14px; font-weight: 500;
      color: var(--ink-3);
    }
    .glass-item .gi-bullet { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
    .glass-item .gi-meta { margin-left: auto; font-size: 12px; color: var(--ink-3); font-weight: 600; }
    .glass-bar {
      display: flex; align-items: center; gap: 10px;
      padding: 6px 6px 6px 18px;
      background: var(--white);
      border-radius: 999px;
      box-shadow: var(--sh-card);
    }
    .glass-bar-spinner {
      width: 16px; height: 16px; border-radius: 50%;
      border: 2px solid var(--cream-3);
      border-top-color: var(--accent-500);
      animation: spin 1s linear infinite;
      flex-shrink: 0;
    }
    .glass-bar-text { flex: 1; font-size: 14px; color: var(--ink-3); font-weight: 500; }
    .glass-bar-icon {
      width: 36px; height: 36px;
      border-radius: 50%;
      background: var(--ink);
      display: flex; align-items: center; justify-content: center;
      box-shadow: var(--sh-card);
      flex-shrink: 0;
    }
    .glass-bar-icon .material-icons { color: var(--white); font-size: 18px; }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── Profile visual (Card 02): photo + floating chat + CTA bar ─── */
    .viz-profile {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 70%;
      z-index: 2;
    }
    .profile-chat {
      position: absolute;
      top: -28px; left: -36px;
      padding: 12px 14px;
      background: rgba(255, 255, 255, .65);
      border: 1px solid rgba(255, 255, 255, .7);
      border-radius: 14px;
      backdrop-filter: blur(20px) saturate(140%);
      -webkit-backdrop-filter: blur(20px) saturate(140%);
      box-shadow: var(--sh-card);
      display: flex; flex-direction: column;
      gap: 8px;
      z-index: 3;
    }
    .profile-chat .chat-bar { height: 8px; border-radius: 4px; background: rgba(20,19,16,.08); }
    .profile-chat .chat-bar.w1 { width: 60px; }
    .profile-chat .chat-bar.w2 { width: 100px; }
    .profile-chat .chat-bar.w3 { width: 80px; }

    .profile-photo {
      aspect-ratio: 1;
      background: var(--blue-bg);
      border: 1px solid var(--border-soft);
      border-radius: var(--r-md);
      box-shadow: var(--sh-card);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 14px;
      overflow: hidden;
      position: relative;
    }
    .profile-avatar-lg {
      width: 110px; height: 110px;
      border-radius: 50%;
      background: var(--blue);
      display: flex; align-items: center; justify-content: center;
      color: var(--white);
      font-family: var(--serif);
      font-weight: 700;
      font-size: 40px;
      letter-spacing: -1px;
      box-shadow: var(--sh-card);
      position: relative;
      z-index: 1;
    }
    .profile-name {
      font-family: var(--font);
      font-weight: 600;
      font-size: 18px;
      color: var(--ink-3);
      letter-spacing: -.2px;
      position: relative; z-index: 1;
    }
    .profile-level {
      font-size: 12px;
      font-weight: 500;
      color: var(--ink-3);
      background: rgba(248,251,255,.7);
      padding: 4px 10px;
      border-radius: 999px;
      backdrop-filter: blur(8px);
      position: relative; z-index: 1;
    }

    .profile-cta {
      position: absolute;
      bottom: -22px; left: 50%; transform: translateX(-50%);
      width: calc(100% - 40px);
      display: flex; align-items: center; justify-content: space-between;
      gap: 10px;
      padding: 6px 6px 6px 18px;
      background: var(--white);
      border-radius: 999px;
      box-shadow: var(--sh-card);
      z-index: 4;
    }
    .profile-cta-text { font-size: 14px; color: var(--ink-3); font-weight: 500; }
    .profile-cta-btn {
      width: 36px; height: 36px;
      border-radius: 50%;
      background: var(--ink);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .profile-cta-btn .material-icons { color: var(--white); font-size: 18px; }

    /* ── Orchestration visual (Card 03): tool row + task generator ─── */
    .viz-orch {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 86%;
      z-index: 2;
      display: flex; flex-direction: column;
      gap: 24px;
      align-items: center;
    }
    .orch-icons {
      display: flex;
      gap: 14px;
      align-items: center;
      justify-content: center;
    }
    .orch-icon {
      width: 44px; height: 44px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .55);
      backdrop-filter: blur(14px) saturate(140%);
      -webkit-backdrop-filter: blur(14px) saturate(140%);
      border: 1px solid rgba(255, 255, 255, .65);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 12px rgba(23,22,20,.06);
      transition: all .2s var(--ease-out);
    }
    .orch-icon .material-icons { font-size: 20px; color: var(--ink-2); }
    .orch-icon.active {
      width: 56px; height: 56px;
      background: var(--white);
      box-shadow: var(--sh-card), 0 0 0 4px rgba(0,203,229,.25);
      transform: translateY(-4px);
    }
    .orch-icon.active .material-icons {
      font-size: 24px;
      background: linear-gradient(135deg, var(--cyan), var(--accent-500));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .orch-panel {
      width: 100%;
      display: flex;
      background: rgba(255, 255, 255, .55);
      border: 1px solid rgba(255, 255, 255, .65);
      border-radius: 16px;
      backdrop-filter: blur(20px) saturate(140%);
      -webkit-backdrop-filter: blur(20px) saturate(140%);
      box-shadow: var(--sh-card);
      padding: 12px;
      gap: 10px;
    }
    .orch-panel-bar { display: flex; gap: 4px; padding: 0 4px 8px; align-items: center; }
    .orch-panel-bar .o-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(20,19,16,.18); }

    .orch-sidebar {
      display: flex; flex-direction: column; gap: 8px;
      flex-shrink: 0; width: 96px;
      padding-top: 24px;
    }
    .orch-side-item {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 10px;
      background: var(--white);
      border-radius: 8px;
      box-shadow: 0 1px 2px rgba(20,19,16,.04);
    }
    .orch-side-item .o-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .orch-side-item .o-rail { flex: 1; height: 5px; background: rgba(20,19,16,.08); border-radius: 3px; }

    .orch-main {
      flex: 1;
      background: var(--cream);
      border-radius: 12px;
      padding: 18px;
      display: flex; flex-direction: column;
      gap: 10px;
      position: relative;
    }
    .orch-main-bar { position: absolute; top: 12px; left: 12px; display: flex; gap: 4px; }
    .orch-main-bar .o-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(20,19,16,.18); }
    .orch-title {
      font-family: var(--font);
      font-weight: 600;
      font-size: 16px;
      color: var(--ink-3);
      margin-top: 14px;
      letter-spacing: -.1px;
    }
    .orch-skeleton { display: flex; flex-direction: column; gap: 5px; }
    .orch-skeleton .sk { height: 6px; background: rgba(20,19,16,.08); border-radius: 3px; }
    .orch-skeleton .sk.w1 { width: 70%; }
    .orch-skeleton .sk.w2 { width: 92%; }
    .orch-skeleton .sk.w3 { width: 60%; }
    .orch-skeleton .sk.w4 { width: 80%; }
    .orch-generate {
      margin-top: auto;
      height: 38px;
      background: var(--ink);
      color: var(--white);
      border: none;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      letter-spacing: .2px;
      align-self: stretch;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    /* ── Orchestration visual: action flow cards ─── */
    .orch-card {
      position: absolute;
      background: rgba(248,251,255,.92);
      border: 1px solid rgba(255,255,255,.7);
      border-radius: 14px;
      padding: 14px 16px;
      box-shadow: var(--sh-card);
      backdrop-filter: blur(10px);
      z-index: 2;
    }
    .orch-card .o-label { font-size: 10px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
    .orch-card .o-title { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -.2px; line-height: 1.2; }
    .orch-card .o-meta  { font-size: 12px; color: var(--ink-3); margin-top: 4px; line-height: 1.4; }
    .orch-card .o-tags  { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
    .orch-card .o-tag   {
      padding: 3px 8px; border-radius: 999px;
      font-size: 10px; font-weight: 600;
      background: var(--primary-100); color: var(--primary-700);
    }
    .orch-card .o-tag.is-pink { background: var(--accent-100); color: var(--accent-700); }
    .orch-urgency {
      top: 32px; left: 28px;
      width: 200px;
      transform: rotate(-3deg);
    }
    .orch-urgency .o-bar { margin-top: 8px; height: 6px; border-radius: 3px; background: var(--cream-2); overflow: hidden; }
    .orch-urgency .o-bar-fill { height: 100%; background: linear-gradient(90deg, var(--cyan), var(--accent-500)); width: 87%; border-radius: 3px; }
    .orch-urgency .o-score { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 22px; color: var(--cyan-dark); margin-top: 6px; }
    .orch-scenario {
      top: 165px; right: 28px;
      width: 220px;
      transform: rotate(3deg);
    }
    .orch-content {
      bottom: 36px; left: 60px;
      width: 220px;
      transform: rotate(-2deg);
    }
    .orch-arrow {
      position: absolute;
      width: 30px; height: 30px;
      display: flex; align-items: center; justify-content: center;
      color: var(--ink-3);
      z-index: 3;
    }
    .orch-arrow .material-icons { font-size: 22px; }
    .orch-arrow.a1 { top: 130px; left: 220px; transform: rotate(20deg); }
    .orch-arrow.a2 { top: 305px; right: 245px; transform: rotate(-110deg); }

    /* ── Capture visualization (mesh gradient + textbook stack) ── */
    .viz-capture {}
    .cap-doc {
      position: absolute;
      background: var(--cream);
      border: 0.5px solid var(--cream-3);
      border-radius: 7px;
      padding: 12px 9px;
      box-shadow: 0 1px 0 rgba(216,209,198,0.95), 0 2px 0 rgba(20,15,10,0.06);
      overflow: hidden;
    }
    .cap-doc-title { font-family: var(--serif); font-weight: 500; color: var(--ink); letter-spacing: -0.1px; line-height: 1.3; }
    .cap-doc-body { line-height: 1.55; color: var(--ink-3); margin-top: 5px; }
    .cap-doc-body p { margin: 0; }
    .cap-doc-1 { width: 117px; height: 151px; top: 17px; left: 24px; transform: rotate(-17deg); }
    .cap-doc-1 .cap-doc-title { font-size: 10px; }
    .cap-doc-1 .cap-doc-body { font-size: 6px; }
    .cap-doc-2 { width: 152px; height: 196px; top: 26px; right: 14px; transform: rotate(17deg); padding: 15px 11px; }
    .cap-doc-2 .cap-doc-title { font-size: 13px; }
    .cap-doc-2 .cap-doc-body { font-size: 7.5px; }
    .cap-doc-3 { width: 196px; height: 252px; top: 8px; left: 50%; margin-left: -98px; padding: 19px 14px; }
    .cap-doc-3 .cap-doc-title { font-size: 16px; }
    .cap-doc-3 .cap-doc-body { font-size: 9.6px; }
    .cap-featured {
      position: absolute;
      background: var(--white);
      border: 1px solid var(--cream-3);
      border-radius: 16px;
      width: 498px; height: 338px;
      left: 33px; top: 126px;
      padding: 25px 18px;
      box-shadow: -6px 6px 0 var(--ink);
    }
    .cap-featured-title { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; color: var(--ink); line-height: 1.3; margin-bottom: 12px; }
    .cap-featured-body { font-size: 13px; line-height: 1.55; color: var(--ink-3); }
    .cap-featured-body p { margin: 0; }

    /* ── Graph visualization (mesh gradient + sentence game + profile) ─── */
    .viz-graph {}
    .gr-card-back {
      position: absolute;
      background: var(--white);
      border: 1px solid var(--cream-3);
      border-radius: 16px;
      width: 498px; height: 295px;
      top: 0; left: -4px;
      padding: 26px 24px;
      overflow: hidden;
    }
    .gr-question-title { font-family: var(--serif); font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: -0.2px; color: var(--ink); margin-bottom: 12px; }
    .gr-tiles-frame {
      border: 0.75px solid var(--cream-3);
      background: var(--cream);
      border-radius: 16px;
      padding: 16px;
      box-shadow: 0 1.5px 0 rgba(216,209,198,0.95), 0 3px 0 rgba(20,15,10,0.06);
    }
    .gr-tiles-row { display: flex; gap: 8px; align-items: center; }
    .gr-tiles-row + .gr-tiles-row { margin-top: 8px; }
    .gr-tile {
      background: var(--cream-2);
      border: 1px solid var(--cream-3);
      border-radius: 6px;
      padding: 8px;
      font-size: 10px;
      color: var(--ink-3);
      white-space: nowrap;
      box-shadow: 0 1px 0 rgba(216,209,198,0.95), 0 2px 0 rgba(20,15,10,0.06);
    }
    .gr-tile-empty { width: 38px; height: 31px; padding: 0; box-shadow: none; }
    .gr-tile-ok { background: var(--primary-100); color: var(--primary-700); border-color: rgba(0,203,229,.35); }
    .gr-tile-err { background: var(--accent-100); color: var(--accent-700); border-color: rgba(255,39,167,.35); }
    .gr-profile {
      position: absolute;
      background: var(--white);
      border: 1px solid var(--cream-3);
      border-radius: 16px;
      display: flex; gap: 16px;
      padding: 16px;
      left: 151px; top: 223px;
      box-shadow: -6px 6px 0 var(--ink);
    }
    .gr-avatar { width: 66px; height: 66px; border-radius: 50%; background: #525252; flex-shrink: 0; }
    .gr-info { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
    .gr-info-row { display: flex; justify-content: space-between; gap: 16px; width: 280px; color: var(--ink-2); }
    .gr-name { font-size: 18px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.4; }
    .gr-level { font-size: 13px; line-height: 1.55; }
    .gr-prog-row { display: flex; justify-content: space-between; align-items: center; width: 280px; }
    .gr-prog-label { font-size: 13px; color: var(--ink-3); font-weight: 500; }
    .gr-prog-value { font-size: 13px; color: var(--ink); font-weight: 600; }
    .gr-progress { width: 280px; height: 8px; background: var(--cream-2); border-radius: 4px; overflow: hidden; }
    .gr-progress-fill { height: 100%; background: var(--cyan); border-radius: 4px; width: 60%; }

    /* ── Orchestration visualization (mesh gradient + glassy probe) ─── */
    .viz-orchestrate { padding: 24px; display: flex; flex-direction: column; }
    .viz-orchestrate .mini-probe { margin-top: 0; flex: 1; display: flex; flex-direction: column; }
    .viz-orchestrate .mini-probe-q {
      flex-shrink: 0;
      background: rgba(248,251,255,.55);
      border: 1px solid rgba(255,255,255,.6);
      color: var(--ink-2);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .viz-orchestrate .mini-probe-q strong { color: var(--ink) !important; }
    .viz-orchestrate .mini-probe-opt {
      background: rgba(248,251,255,.55);
      border: 1px solid rgba(255,255,255,.6);
      color: var(--ink-2);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .viz-orchestrate .mini-probe-opt:hover {
      background: rgba(248,251,255,.85);
      color: var(--ink);
      transform: translateX(3px);
    }
    .viz-orchestrate .mini-probe-opt.sel,
    .viz-orchestrate .mini-probe-opt.ok { color: var(--ink); }

    /* ── Inner item entry animations ───────────────────────────── */
    .stack-card .cap-doc,
    .stack-card .cap-featured,
    .stack-card .gr-card-back,
    .stack-card .gr-profile,
    .stack-card .gr-tile,
    .stack-card .viz-orchestrate .mini-probe-q,
    .stack-card .viz-orchestrate .mini-probe-opt {
      opacity: 0;
      transition: opacity .6s var(--ease-out), transform .7s var(--ease-spring);
    }

    /* hidden states (preserve final rotation by including it in the start transform) */
    .stack-card .cap-doc-1 { transform: translateY(24px) rotate(-17deg) scale(.92); }
    .stack-card .cap-doc-2 { transform: translateY(24px) rotate(17deg) scale(.92); }
    .stack-card .cap-doc-3 { transform: translate(-50%, 24px) scale(.92); top: 8px; left: 50%; margin-left: 0; }
    .stack-card .cap-featured { transform: translateY(40px); }
    .stack-card .gr-card-back { transform: translateY(20px); }
    .stack-card .gr-profile { transform: translateY(40px); }
    .stack-card .gr-tile { transform: translateY(8px) scale(.9); }
    .stack-card .viz-orchestrate .mini-probe-q { transform: translateY(8px); }
    .stack-card .viz-orchestrate .mini-probe-opt { transform: translateX(-16px); }

    /* override .cap-doc-3 positioning — keep the centered placement via translate */
    .cap-doc-3 { left: 50%; margin-left: 0; transform: translateX(-50%) rotate(0deg); }

    /* revealed states */
    .stack-card.items-revealed .cap-doc,
    .stack-card.items-revealed .cap-featured,
    .stack-card.items-revealed .gr-card-back,
    .stack-card.items-revealed .gr-profile,
    .stack-card.items-revealed .gr-tile,
    .stack-card.items-revealed .viz-orchestrate .mini-probe-q,
    .stack-card.items-revealed .viz-orchestrate .mini-probe-opt { opacity: 1; }

    .stack-card.items-revealed .cap-doc-1 { transform: rotate(-17deg) scale(1); transition-delay: 100ms; }
    .stack-card.items-revealed .cap-doc-2 { transform: rotate(17deg) scale(1); transition-delay: 200ms; }
    .stack-card.items-revealed .cap-doc-3 { transform: translateX(-50%) scale(1); transition-delay: 300ms; }
    .stack-card.items-revealed .cap-featured { transform: translateY(0); transition-delay: 450ms; }

    .stack-card.items-revealed .gr-card-back { transform: translateY(0); transition-delay: 100ms; }
    .stack-card.items-revealed .gr-tile { transform: translateY(0) scale(1); transition-delay: calc(200ms + var(--i, 0) * 45ms); }
    .stack-card.items-revealed .gr-profile { transform: translateY(0); transition-delay: 700ms; }

    .stack-card.items-revealed .viz-orchestrate .mini-probe-q { transform: translateY(0); transition-delay: 100ms; }
    .stack-card.items-revealed .viz-orchestrate .mini-probe-opt { transform: translateX(0); transition-delay: calc(250ms + var(--i, 0) * 90ms); }

    @media (max-width: 1100px) {
      .stack-card-visual { max-width: 420px; }
      .stack-card-text .bcard-h { font-size: 32px; }
      .stack-container { height: 400px; }
    }
    @media (max-width: 900px) {
      .stack-card-visual { max-width: 360px; }
      .stack-card-text .bcard-h { font-size: 28px; }
    }
    @media (max-width: 960px) {
      :root { --nav-h: 56px; }
    }
    @media (max-width: 900px) {
      .hero { padding: 16px; }
      .hero-panel { padding: calc(48px + var(--nav-h)) 32px 0; border-radius: var(--r-sm); }
    }
    @media (max-width: 640px) {
      .hero { padding: 12px; }
      .hero-panel { padding: calc(48px + var(--nav-h)) 20px 0; border-radius: var(--r-sm); }
    }
    @media (max-width: 768px) {
      .stack-section { height: auto !important; padding: 60px 0; }
      .stack-wrapper { position: static; height: auto; padding: 0 20px; gap: 32px; }
      .stack-container { height: auto; display: flex; flex-direction: column; gap: 14px; max-width: 100%; }
      .stack-card { position: relative; inset: auto; transform: none !important; opacity: 1 !important; flex-direction: column; padding: 24px; gap: 20px; align-items: stretch; }
      .stack-card-text { padding: 0; }
      .stack-card-visual { width: 100%; max-width: 100%; align-self: center; }
    }

    @media (max-width: 640px) {
      .container { padding: 0 20px; }
      .section { padding: 56px 0; }
      .steps, .testimonial-grid, .stats-grid { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr; }
    }

    /* ── Understanding the Learner — Bento ─────────────────────── */
    .learner-section {
      padding: 120px 0;
      background: var(--cream);
      border-top: 1px solid var(--border-soft);
      border-bottom: 1px solid var(--border-soft);
      position: relative;
      overflow: hidden;
    }
    .learner-section .container { max-width: 1440px; }
    .learner-header {
      text-align: center;
      max-width: 720px;
      margin: 0 auto 64px;
    }
    .learner-header .section-eyebrow { justify-content: center; }
    .learner-header .section-h2 { margin: 14px 0 18px; }
    .learner-header .section-h2 .c { font-style: italic; color: var(--primary-500); }
    .learner-header .section-sub { margin: 0 auto; }

    .bento-learner {
      display: grid;
      grid-template-columns: 1fr 1.15fr 1fr;
      grid-template-rows: 264px 264px 240px;
      gap: 16px;
    }
    .bento-tile {
      position: relative;
      border-radius: var(--r-md);
      padding: 22px;
      background: var(--white);
      border: 1px solid var(--border-soft);
      box-shadow: var(--sh-card);
      overflow: hidden;
      isolation: isolate;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out);
      opacity: 0;
      transform: translateY(20px);
    }
    .bento-learner.is-in .bento-tile {
      opacity: 1;
      transform: translateY(0);
      transition: opacity .65s var(--ease-out) calc(var(--i,0) * 80ms),
                  transform .65s var(--ease-out) calc(var(--i,0) * 80ms),
                  box-shadow .35s var(--ease-out),
                  border-color .35s var(--ease-out);
    }
    .bento-tile:hover {
      transform: translateY(-3px);
      box-shadow: var(--sh-lift);
    }
    .bento-tile > * { position: relative; z-index: 1; }

    .bento-tile .tile-graphic {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }
    .bento-tile .tile-meta {
      position: relative;
      z-index: 2;
    }
    .bento-tile .tile-title {
      font-family: var(--font);
      font-size: 22px;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -.3px;
      line-height: 1.25;
    }
    .bento-tile .tile-sub {
      font-size: 13px;
      color: var(--ink-3);
      margin-top: 4px;
      line-height: 1.5;
    }

    /* Tile placement */
    .tile-skill        { grid-column: 1; grid-row: 1; }
    .tile-profile      { grid-column: 2; grid-row: 1 / span 2; }
    .tile-living       { grid-column: 3; grid-row: 1; }
    .tile-avatar       { grid-column: 1; grid-row: 2; }
    .tile-generated    { grid-column: 3; grid-row: 2; }
    .tile-adaptive     { grid-column: 1 / -1; grid-row: 3; }

    /* ── Bento graphic frame — soft brand gradient bg ─────────── */
    .tile-skill::before,
    .tile-living::before,
    .tile-avatar::before,
    .tile-generated::before {
      content: '';
      position: absolute;
      top: 14px; left: 14px; right: 14px; bottom: 88px;
      border-radius: 14px;
      background: var(--cream-2);
      z-index: 0;
      pointer-events: none;
    }
    .tile-adaptive::before {
      content: '';
      position: absolute;
      top: 18px; right: 18px; bottom: 18px;
      left: 326px;
      border-radius: 14px;
      background: var(--cream-2);
      z-index: 0;
      pointer-events: none;
    }

    /* ── Tile 1 — Skill Map (labeled radar) ──────────────────── */
    .skill-radar {
      position: absolute;
      top: 14px; right: 14px;
      left: 14px; bottom: 88px;
    }
    .skill-radar svg { width: 100%; height: 100%; display: block; }
    .skill-radar .sr-ring { fill: none; stroke: var(--cream-3); stroke-width: 1; }
    .skill-radar .sr-axis { stroke: var(--cream-3); stroke-width: 1; }
    .skill-radar .sr-area {
      fill: var(--primary-100);
      stroke: var(--primary-500);
      stroke-width: 1.5;
      fill-opacity: .55;
    }
    .skill-radar .sr-pt {
      fill: var(--white);
      stroke: var(--primary-300);
      stroke-width: 1.4;
    }
    .skill-radar .sr-pt-strong { fill: var(--primary-500); stroke: var(--primary-500); }
    .skill-radar .sr-pt-gap    { fill: var(--accent-500);  stroke: var(--accent-500); }
    .skill-radar .sr-label {
      font-family: var(--font);
      font-size: 7px;
      font-weight: 600;
      fill: var(--ink-3);
      letter-spacing: .04em;
    }
    .skill-radar .sr-label.is-strong { fill: var(--primary-700); }
    .skill-radar .sr-label.is-gap    { fill: var(--accent-700); }
    .sr-badge {
      position: absolute;
      top: 14px; left: 14px;
      display: inline-flex; align-items: center; gap: 5px;
      padding: 3px 9px;
      background: var(--primary-50);
      color: var(--primary-700);
      border: 1px solid var(--primary-100);
      border-radius: var(--r-full);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .02em;
      z-index: 2;
    }

    /* ── Tile 2 — Profile (Maria, focal) ──────────────────────── */
    .tile-profile {
      padding: 26px;
      justify-content: flex-start;
      background: var(--white);
      border: 1px solid var(--border-soft);
    }
    .profile-avatar-wrap {
      position: relative;
      width: 76px; height: 76px;
      border-radius: 50%;
      background: var(--blue);
      box-shadow: var(--sh-card);
      margin-bottom: 14px;
    }
    .bento-avatar {
      width: 100%; height: 100%;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--serif);
      font-weight: 700;
      font-size: 26px;
      color: var(--white);
      letter-spacing: -.5px;
    }
    .profile-live-dot {
      position: absolute;
      bottom: 2px; right: 2px;
      width: 18px; height: 18px;
      border-radius: 50%;
      background: var(--green);
      border: 3px solid var(--white);
      animation: profilePulse 2s ease-out infinite;
    }
    @keyframes profilePulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(.85); opacity: .7; }
    }
    .profile-head {
      display: flex; flex-direction: column;
      align-items: center;
      gap: 14px;
      margin-bottom: 16px;
    }
    .profile-avatar-lg-wrap {
      width: 88px; height: 88px;
      margin-bottom: 0;
    }
    .profile-avatar-lg-wrap .bento-avatar {
      font-size: 30px;
    }
    .profile-name-row {
      display: flex; flex-direction: column; gap: 2px;
      align-items: center;
      width: 100%;
      text-align: center;
    }
    .profile-name-row .pn-name {
      font-family: var(--serif);
      font-weight: 700;
      font-size: 22px;
      color: var(--ink);
      letter-spacing: -.3px;
    }
    .profile-name-row .pn-sub {
      font-size: 12px;
      color: var(--ink-3);
      font-weight: 500;
    }

    /* Tab toggle — text-only with underline indicator */
    .profile-tabs {
      display: flex;
      gap: 24px;
      border-bottom: 1px solid var(--border-soft);
      margin-bottom: 14px;
    }
    .profile-tab {
      display: inline-flex;
      align-items: baseline;
      gap: 6px;
      padding: 10px 0;
      background: none;
      border: none;
      border-bottom: 2px solid transparent;
      cursor: pointer;
      font-family: var(--font);
      font-size: 13px;
      font-weight: 500;
      color: var(--ink-3);
      margin-bottom: -1px;
      transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
    }
    .profile-tab:hover { color: var(--ink); }
    .profile-tab.is-active {
      color: var(--ink);
      border-bottom-color: var(--ink);
    }
    .profile-tab-num {
      font-family: var(--font);
      font-weight: 600;
      font-size: 11px;
      color: var(--ink-4);
      font-feature-settings: 'tnum' 1;
    }
    .profile-tab.is-active .profile-tab-num { color: var(--ink-3); }

    /* Tab panes */
    .profile-pane { display: none; }
    .profile-pane.is-active { display: block; }

    /* Interests grid */
    .profile-interests-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
    }
    .profile-interest-tile {
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 4px;
      padding: 12px 6px;
      background: var(--white);
      border: 1px solid var(--border-soft);
      border-radius: var(--r-sm);
    }
    .profile-interest-tile .material-icons {
      font-size: 20px;
      color: var(--primary-700);
    }
    .profile-interest-tile-label {
      font-size: 10.5px;
      font-weight: 500;
      color: var(--ink-2);
      text-align: center;
      line-height: 1.2;
    }

    /* Stats row — unified card: line chart + donut */
    .profile-stats-row {
      display: flex;
      align-items: stretch;
      gap: 16px;
      background: var(--cream);
      border: 1px solid var(--border-soft);
      border-radius: var(--r-sm);
      padding: 14px 16px;
      margin-bottom: 12px;
    }
    .profile-stat-card {
      background: transparent;
      border: none;
      padding: 0;
    }
    .profile-spark-card {
      flex: 1.6;
      min-width: 0;
      display: flex; flex-direction: column;
      gap: 8px;
      justify-content: space-between;
    }
    .profile-stat-head {
      display: flex; align-items: baseline; justify-content: space-between;
      gap: 8px;
    }
    .profile-stat-title {
      font-size: 10px;
      font-weight: 600;
      color: var(--ink-3);
      text-transform: uppercase;
      letter-spacing: .04em;
    }
    .profile-stat-trend {
      font-family: var(--font);
      font-weight: 600;
      font-size: 11px;
      color: var(--primary-700);
      text-transform: uppercase;
      letter-spacing: .04em;
      font-feature-settings: 'tnum' 1;
    }
    .profile-spark-svg {
      width: 100%;
      height: 36px;
      display: block;
    }
    .profile-spark-svg .spark-area { fill: var(--primary-100); }
    .profile-spark-svg .spark-line {
      fill: none;
      stroke: var(--primary-500);
      stroke-width: 1.4;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }
    .profile-spark-svg .spark-end {
      fill: var(--primary-500);
      stroke: var(--cream);
      stroke-width: 1;
      vector-effect: non-scaling-stroke;
    }
    .profile-donut-card {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 10px;
      padding-left: 16px;
      border-left: 1px solid var(--border-soft);
    }
    .profile-donut {
      position: relative;
      width: 50px; height: 50px;
      flex-shrink: 0;
    }
    .profile-donut svg {
      width: 100%; height: 100%;
      transform: rotate(-90deg);
    }
    .profile-donut .d-track {
      fill: none;
      stroke: var(--cream-3);
      stroke-width: 5;
    }
    .profile-donut .d-fill {
      fill: none;
      stroke: var(--primary-500);
      stroke-width: 5;
      stroke-linecap: round;
      stroke-dasharray: 138.23;
      stroke-dashoffset: 80.63;
    }
    .profile-donut-num {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--serif);
      font-style: italic;
      font-weight: 700;
      font-size: 15px;
      color: var(--ink);
      letter-spacing: -.4px;
      font-feature-settings: 'tnum' 1;
    }
    .profile-donut-label {
      font-size: 10.5px;
      color: var(--ink-3);
      font-weight: 500;
      line-height: 1.3;
    }

    /* Focus list */
    .profile-focus-list {
      display: flex; flex-direction: column;
      gap: 6px;
    }
    .profile-focus-row {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 12px;
      background: var(--white);
      border: 1px solid var(--border-soft);
      border-radius: var(--r-sm);
    }
    .profile-focus-icon {
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .profile-focus-icon .material-icons {
      font-size: 18px;
      color: var(--primary-700);
    }
    .profile-focus-body { flex: 1; min-width: 0; }
    .profile-focus-label {
      font-size: 10px;
      font-weight: 600;
      color: var(--ink-3);
      text-transform: uppercase;
      letter-spacing: .04em;
      margin-bottom: 1px;
    }
    .profile-focus-title {
      font-size: 12.5px;
      font-weight: 600;
      color: var(--ink);
      line-height: 1.3;
    }
    .profile-focus-chev {
      font-size: 18px;
      color: var(--ink-3);
      flex-shrink: 0;
    }

    /* ── Tile 3 — A Living Profile (writing indicator) ────────── */
    .living-card {
      position: absolute;
      top: 22px; right: 22px;
      width: calc(100% - 44px);
      background: var(--cream);
      border-radius: var(--r-sm);
      padding: 12px 14px;
      box-shadow: var(--sh-card);
      border: 1px solid var(--border-soft);
    }
    .living-card .lc-row {
      display: flex; align-items: center; justify-content: space-between;
      font-size: 11px; font-weight: 500;
      padding: 4px 0;
    }
    .living-card .lc-row + .lc-row { border-top: 1px dashed var(--border-soft); }
    .living-card .lc-key { color: var(--ink-3); }
    .living-card .lc-val { color: var(--ink); font-weight: 600; }
    .living-card .lc-val .lc-arrow {
      display: inline-block;
      color: var(--cyan);
      margin: 0 4px;
      font-size: 10px;
    }
    .living-card .lc-val .lc-new {
      color: var(--primary-700);
      animation: livingPulse 2.4s ease-in-out infinite;
    }
    @keyframes livingPulse {
      0%, 100% { opacity: .55; }
      50% { opacity: 1; }
    }
    .living-status {
      position: absolute;
      bottom: 18px; left: 22px;
      display: flex; align-items: center; gap: 6px;
      font-size: 10.5px;
      color: var(--primary-700);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .06em;
    }
    .living-status::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--primary-500);
      animation: profilePulse 1.8s ease-out infinite;
    }

    /* ── Tile 4 — AI Avatar & Role Play (chat) ───────────────── */
    .roleplay-stage {
      position: absolute;
      inset: 18px 18px auto 18px;
      display: flex; flex-direction: column; gap: 8px;
    }
    .rp-bubble {
      max-width: 78%;
      padding: 9px 12px;
      border-radius: var(--r-sm);
      font-size: 12px;
      line-height: 1.4;
      box-shadow: var(--sh-card);
    }
    .rp-bubble.rp-ai {
      align-self: flex-start;
      background: var(--cream);
      color: var(--ink-2);
      border: 1px solid var(--border-soft);
      border-bottom-left-radius: 4px;
    }
    .rp-bubble.rp-user {
      align-self: flex-end;
      background: var(--ink);
      color: var(--white);
      border-bottom-right-radius: 4px;
    }
    .rp-typing {
      align-self: flex-start;
      display: inline-flex;
      gap: 3px;
      padding: 8px 10px;
      background: var(--cream);
      border: 1px solid var(--border-soft);
      border-radius: var(--r-sm);
      border-bottom-left-radius: 4px;
    }
    .rp-typing span {
      width: 5px; height: 5px;
      border-radius: 50%;
      background: var(--ink-4);
      animation: rpType 1.2s ease-in-out infinite;
    }
    .rp-typing span:nth-child(2) { animation-delay: .15s; }
    .rp-typing span:nth-child(3) { animation-delay: .3s; }
    @keyframes rpType {
      0%, 60%, 100% { transform: translateY(0); opacity: .5; }
      30% { transform: translateY(-3px); opacity: 1; }
    }

    /* ── Tile 5 — Generated Content (focal card) ─────────────── */
    .gen-content-card {
      position: absolute;
      top: 22px; right: 22px; left: 22px;
      background: var(--white);
      border: 1px solid var(--border-soft);
      border-radius: var(--r-sm);
      padding: 14px 16px;
      box-shadow: var(--sh-card);
      display: flex; flex-direction: column;
      gap: 8px;
    }
    .gen-content-badge {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 3px 9px;
      background: var(--primary-50);
      color: var(--primary-700);
      border: 1px solid var(--primary-100);
      border-radius: var(--r-full);
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: .02em;
      align-self: flex-start;
    }
    .gen-content-badge .material-icons { font-size: 12px; }
    .gen-content-h {
      font-family: var(--serif);
      font-weight: 700;
      font-size: 14px;
      color: var(--ink);
      letter-spacing: -.2px;
      line-height: 1.25;
    }
    .gen-content-quote {
      font-family: var(--serif);
      font-style: italic;
      font-size: 12.5px;
      color: var(--ink-2);
      line-height: 1.45;
      padding-left: 10px;
      border-left: 2px solid var(--primary-300);
    }
    .gen-content-quote strong {
      font-style: normal;
      font-weight: 600;
      color: var(--primary-700);
      background: var(--primary-50);
      padding: 0 3px;
      border-radius: 3px;
    }
    .gen-content-note {
      font-size: 11.5px;
      color: var(--ink-3);
      line-height: 1.5;
    }
    .gen-content-note em {
      font-style: italic;
      color: var(--ink-2);
      font-weight: 600;
    }

    /* ── Tile 6 — Adaptive Use: Library → Selected ──────────── */
    .tile-adaptive {
      flex-direction: row;
      align-items: center;
      gap: 28px;
      padding: 26px 28px;
    }
    .tile-adaptive .tile-meta { flex: 0 0 280px; }
    .adaptive-illustration {
      flex: 1;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 14px;
      align-items: stretch;
    }
    .adaptive-library {
      background: var(--cream);
      border: 1px solid var(--border-soft);
      border-radius: var(--r-sm);
      padding: 12px 14px;
      display: flex; flex-direction: column;
      min-width: 0;
    }
    .adaptive-library-label {
      font-size: 9.5px;
      font-weight: 600;
      color: var(--ink-4);
      text-transform: uppercase;
      letter-spacing: .04em;
      margin-bottom: 8px;
    }
    .adaptive-library-list {
      display: flex; flex-direction: column;
      gap: 2px;
    }
    .adaptive-row {
      display: flex; align-items: center; gap: 10px;
      padding: 4px 6px;
      border-radius: var(--r-sm);
      opacity: .5;
    }
    .adaptive-row-num {
      flex-shrink: 0;
      font-family: var(--serif);
      font-style: italic;
      font-weight: 700;
      font-size: 11px;
      color: var(--ink-3);
      min-width: 24px;
      font-feature-settings: 'tnum' 1;
    }
    .adaptive-row-body {
      flex: 1; min-width: 0;
      display: flex; align-items: baseline; gap: 8px;
      justify-content: space-between;
    }
    .adaptive-row-title {
      font-family: var(--font);
      font-weight: 500;
      font-size: 11.5px;
      color: var(--ink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .adaptive-row-meta {
      font-size: 10px;
      color: var(--ink-4);
      font-weight: 500;
      flex-shrink: 0;
    }

    .adaptive-arrow {
      display: flex; align-items: center; justify-content: center;
      color: var(--primary-500);
      align-self: center;
    }
    .adaptive-arrow .material-icons { font-size: 22px; }

    .adaptive-selected {
      background: var(--white);
      border: 1px solid var(--primary-200);
      border-radius: var(--r-sm);
      padding: 12px 14px;
      display: flex; flex-direction: column;
      gap: 4px;
      box-shadow: var(--sh-card);
      min-width: 0;
    }
    .adaptive-selected-status {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 9.5px;
      font-weight: 600;
      color: var(--primary-700);
      text-transform: uppercase;
      letter-spacing: .04em;
      margin-bottom: 4px;
    }
    .adaptive-selected-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--primary-500);
      animation: profilePulse 2s ease-out infinite;
    }
    .adaptive-selected-title {
      font-family: var(--serif);
      font-weight: 700;
      font-size: 14px;
      color: var(--ink);
      letter-spacing: -.2px;
      line-height: 1.2;
    }
    .adaptive-selected-source {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 11px;
      color: var(--ink-3);
      font-weight: 500;
      margin-top: 2px;
    }
    .adaptive-selected-source .material-icons {
      font-size: 13px;
      color: var(--accent-600);
    }
    .adaptive-selected-reason {
      font-size: 11px;
      color: var(--ink-3);
      line-height: 1.4;
      padding-top: 8px;
      margin-top: 4px;
      border-top: 1px solid var(--border-soft);
    }

    @media (max-width: 1100px) {
      .bento-learner { grid-template-columns: 1fr 1.1fr 1fr; grid-template-rows: 240px 240px 216px; }
    }
    @media (max-width: 900px) {
      .bento-learner {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto;
      }
      .tile-skill      { grid-column: 1; grid-row: 1; }
      .tile-living     { grid-column: 2; grid-row: 1; }
      .tile-profile    { grid-column: 1 / -1; grid-row: 2; min-height: 360px; }
      .tile-avatar     { grid-column: 1; grid-row: 3; }
      .tile-generated  { grid-column: 2; grid-row: 3; }
      .tile-adaptive   { grid-column: 1 / -1; grid-row: 4; flex-direction: column; align-items: stretch; gap: 16px; }
      .tile-adaptive .tile-meta { flex: 0 0 auto; }
      .tile-adaptive::before { left: 18px; top: auto; height: auto; }
      .bento-tile { min-height: 200px; }
    }
    @media (max-width: 640px) {
      .learner-section { padding: 80px 0; }
      .bento-learner { grid-template-columns: 1fr; }
      .tile-skill, .tile-living, .tile-avatar, .tile-generated, .tile-profile, .tile-adaptive {
        grid-column: 1; grid-row: auto;
      }
      .tile-profile { min-height: auto; }
      .adaptive-illustration { grid-template-columns: 1fr; gap: 10px; }
      .adaptive-arrow { transform: rotate(90deg); }
    }

    /* ── What Teams Gain — Static 3-column grid (fits viewport) ─── */
    .teams-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      align-items: stretch;
    }
    .team-card-v {
      width: 100%;
      background: var(--white);
      border: 1px solid var(--border-soft);
      border-radius: 24px;
      box-shadow: var(--sh-card);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .team-card-v-image {
      width: 100%;
      aspect-ratio: 1 / 1;
      overflow: hidden;
    }
    .team-card-v-image img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }
    .team-card-v-body {
      padding: 28px 32px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .team-card-v-num {
      font-family: var(--font);
      font-weight: 600;
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--primary-700);
      font-feature-settings: 'tnum' 1;
    }
    .team-card-v-h {
      font-family: var(--font);
      font-weight: 700;
      font-size: 22px;
      letter-spacing: -.3px;
      line-height: 1.25;
      color: var(--ink);
    }
    .team-card-v-p {
      font-size: 14.5px;
      line-height: 1.55;
      color: var(--ink-3);
    }
    .team-card-v-body .layer-bullets {
      padding: 0;
      margin-top: 8px;
      gap: 8px;
    }
    .team-card-v-body .layer-bullets li {
      font-size: 13px;
      font-weight: 500;
      color: var(--ink-2);
    }
    .team-card-v-body .bullet-icon {
      width: 28px; height: 28px;
    }

    /* ── Teams section — dark theme ──────────────────────────────
       Section background goes deep ink to match the imagery (which
       was designed against a dark/grid backdrop). Cards drop to a
       subtle translucent-white surface so the card image (whose
       frame is baked into the PNG) bleeds into the body cleanly. */
    #teams.section {
      background: var(--ink);
    }
    /* Glassy chip on dark — matches the Learner Graph stat/legend
       treatment so all "on dark" chips share one visual language. */
    #teams .section-eyebrow {
      color: rgba(255, 255, 255, 0.78);
      background: rgba(255, 255, 255, 0.05);
      border-color: rgba(255, 255, 255, 0.12);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 8px 20px rgba(0, 0, 0, 0.25);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    #teams .section-h2 {
      color: var(--white);
    }
    #teams .section-h2 .c {
      color: var(--primary-500);
    }
    #teams .section-sub {
      color: rgba(255, 255, 255, 0.65);
    }
    #teams .team-card-v {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 18px 40px rgba(0, 123, 255, 0.18);
    }
    #teams .team-card-v-h {
      color: var(--white);
    }
    #teams .team-card-v-p {
      color: rgba(255, 255, 255, 0.65);
    }
    #teams .team-card-v-body .layer-bullets li {
      color: rgba(255, 255, 255, 0.78);
    }
    #teams .team-card-v-body .bullet-icon {
      background: rgba(255, 255, 255, 0.08);
    }
    #teams .team-card-v-body .bullet-icon .material-icons {
      color: var(--primary-500);
    }

    .team-card-v-body .bullet-icon .material-icons {
      font-size: 15px;
    }

    /* ── Integration — Vertical layout (header above, cards in a row) ─ */
    .integrate-grid {
      display: flex;
      flex-direction: column;
      gap: 56px;
    }
    .integrate-grid .integrate-header {
      max-width: 720px;
    }
    .integrate-grid .integrate-header .section-h2 { margin: 14px 0 18px; }
    .integrate-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    /* Integration logos image — full width, never cropped (height auto).
       Soft fade at the bottom blends into the section background. */
    .integrate-logos {
      position: relative;
      width: 100%;
      margin-top: 40px;
    }
    .integrate-logos img {
      display: block;
      width: 100%;
      height: auto;
      max-width: 100%;
      object-fit: contain;
    }
    .integrate-logos::after {
      content: "";
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 56px;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--cream) 100%);
      pointer-events: none;
    }
    @media (max-width: 720px) {
      .integrate-logos { margin-top: 28px; }
      .integrate-logos::after { height: 36px; }
    }
    .integrate-card {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
      padding: 24px;
      background: var(--white);
      border: 1px solid var(--border-soft);
      border-radius: var(--r-lg);
      box-shadow: var(--sh-card);
    }
    .integrate-card-icon {
      flex-shrink: 0;
      width: 52px; height: 52px;
      border-radius: var(--r-sm);
      background: var(--primary-50);
      color: var(--primary-700);
      display: flex; align-items: center; justify-content: center;
    }
    .integrate-card-icon .material-icons { font-size: 26px; }
    .integrate-card-body { flex: 1; }
    .integrate-card-h {
      font-family: var(--serif);
      font-weight: 700;
      font-size: 22px;
      color: var(--ink);
      letter-spacing: -.3px;
      line-height: 1.25;
      margin-bottom: 6px;
    }
    .integrate-card-list {
      list-style: none;
      padding: 0;
      margin: 12px 0 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .integrate-card-list li {
      position: relative;
      padding-left: 16px;
      font-family: var(--font);
      font-size: 14px;
      line-height: 1.4;
      color: var(--ink-2);
    }
    .integrate-card-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.55em;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--primary-500);
    }
    .integrate-card-p {
      font-size: 14.5px;
      line-height: 1.6;
      color: var(--ink-3);
    }

    /* ── Why Nousable — Centered title + 3×2 grid ─────────────── */
    .why-section {
      width: 100%;
      padding: 16px;
      background: var(--cream);
    }
    .why-panel {
      position: relative;
      width: 100%;
      border-radius: var(--r-sm);
      overflow: hidden;
      padding: 72px 48px;
    }
    .why-panel-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center center;
      pointer-events: none;
    }
    .why-panel-content {
      position: relative;
      z-index: 1;
      max-width: 1440px;
      margin: 0 auto;
    }
    .why-header {
      text-align: center;
      max-width: 880px;
      margin: 0 auto 48px;
    }
    .why-header .section-h2 {
      font-size: clamp(40px, 4.5vw, 60px);
      letter-spacing: -1px;
      line-height: 1.1;
      margin: 0;
    }
    .why-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 56px 48px;
      max-width: 1200px;
      margin: 0 auto;
    }
    .why-item {
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 28px;
      background: var(--white);
      border: 1px solid var(--border-soft);
      border-radius: var(--r-md);
      box-shadow: var(--sh-card);
    }
    .why-item-icon {
      width: 52px; height: 52px;
      border-radius: 12px;
      background: var(--white);
      border: 1px solid var(--border-soft);
      box-shadow: var(--sh-card);
      display: flex;
      align-items: center; justify-content: center;
      color: var(--primary-700);
    }
    .why-item-icon .material-icons { font-size: 26px; }
    .why-item-h {
      font-family: var(--font);
      font-weight: 700;
      font-size: 22px;
      letter-spacing: -.3px;
      line-height: 1.25;
      color: var(--ink);
    }
    .why-item-p {
      font-size: 15.5px;
      line-height: 1.6;
      color: var(--ink-3);
    }

    .flow-diagram {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
    }
    .flow-svg {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      pointer-events: none;
      z-index: 1;
    }
    .flow-svg path {
      fill: none;
      stroke: var(--ink);
      stroke-opacity: .18;
      stroke-width: 1.2;
      stroke-linecap: round;
    }
    .flow-source {
      position: absolute;
      top: 50%; left: 0;
      transform: translateY(-50%);
      width: 22%;
      aspect-ratio: 1;
      z-index: 2;
      display: flex; align-items: center; justify-content: center;
    }
    .flow-source-content img { width: 44px; }
    .flow-source-content span { font-size: 22px; }
    .flow-source-ring {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 1.5px dashed var(--cream-3);
    }
    .flow-source-glow {
      position: absolute;
      inset: 14%;
      border-radius: 50%;
      background:
        radial-gradient(circle at 60% 55%, var(--primary-300), transparent 65%),
        radial-gradient(circle at 35% 45%, var(--accent-300), transparent 60%);
      filter: blur(18px);
      opacity: .85;
    }
    .flow-source-content {
      position: relative;
      z-index: 1;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 6px;
    }
    .flow-source-content img {
      width: 56px; height: auto;
      filter: brightness(0);
      opacity: .9;
    }
    .flow-source-content span {
      font-family: var(--serif);
      font-style: italic;
      font-weight: 700;
      font-size: 26px;
      color: var(--ink);
      letter-spacing: -.6px;
      line-height: 1;
    }
    .flow-pill {
      position: absolute;
      width: 36%;
      display: flex; flex-direction: column;
      cursor: pointer;
      background: none;
      border: none;
      padding: 0;
      z-index: 2;
      font-family: inherit;
      text-align: left;
      transition: z-index 0s linear .35s;
    }
    .flow-pill.is-active {
      z-index: 5;
      transition: z-index 0s linear 0s;
    }
    .flow-pill-row {
      display: flex; align-items: center; gap: 10px;
      width: 100%;
    }
    .flow-pill-name {
      flex: 1;
      background: var(--ink);
      color: var(--white);
      padding: 10px 16px;
      border-radius: var(--r-sm);
      font-family: var(--font);
      font-weight: 500;
      font-size: 13px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      box-shadow: var(--sh-card);
      transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
    }
    .flow-pill-num {
      width: 38px; height: 38px;
      border-radius: 50%;
      background: var(--white);
      border: 1px solid var(--cream-3);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--serif);
      font-weight: 700;
      font-size: 13px;
      color: var(--ink);
      box-shadow: var(--sh-card);
      flex-shrink: 0;
    }
    .flow-pill:hover .flow-pill-name {
      transform: translateY(-3px);
      box-shadow: var(--sh-lift);
    }
    .flow-pill-desc {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      background: var(--white);
      border: 1px solid transparent;
      border-radius: var(--r-sm);
      font-size: 12.5px;
      color: var(--ink-2);
      line-height: 1.5;
      margin-top: 0;
      padding: 0 14px;
      transition: max-height .35s var(--ease-out), opacity .25s var(--ease-out),
                  padding .35s var(--ease-out), margin-top .35s var(--ease-out),
                  border-color .25s var(--ease-out);
    }
    .flow-pill.is-active .flow-pill-desc {
      max-height: 140px;
      opacity: 1;
      margin-top: 8px;
      padding: 12px 14px;
      border-color: var(--border-soft);
    }
    .flow-pill.is-active .flow-pill-name {
      box-shadow: var(--sh-lift);
    }
    /* 6 pills fanned vertically, slightly horizontally */
    .flow-pill.p1 { top: 6%;  left: 28%; }
    .flow-pill.p2 { top: 23%; left: 31%; }
    .flow-pill.p3 { top: 40%; left: 33%; }
    .flow-pill.p4 { top: 57%; left: 33%; }
    .flow-pill.p5 { top: 74%; left: 31%; }
    .flow-pill.p6 { top: 91%; left: 28%; }

    .flow-terminus {
      position: absolute;
      top: 50%; right: 0;
      transform: translateY(-50%);
      display: flex; align-items: center; gap: 10px;
      padding: 12px 16px;
      background: var(--ink);
      color: var(--white);
      border-radius: var(--r-sm);
      font-family: var(--font);
      font-weight: 600;
      font-size: 13px;
      box-shadow: var(--sh-card);
      z-index: 2;
      white-space: nowrap;
      max-width: 24%;
    }
    .flow-terminus-check {
      width: 20px; height: 20px;
      border-radius: 50%;
      background: var(--green);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .flow-terminus-check .material-icons {
      font-size: 14px;
      color: var(--white);
    }

    /* ── Proof — Rounded panel with FAQ + Testimonial ────────── */
    .proof-section {
      width: 100%;
      padding: 48px;
    }
    .proof-panel {
      position: relative;
      width: 100%;
      border-radius: 32px;
      overflow: hidden;
      padding: 48px;
    }
    /* Background image for the panel */
    .proof-panel-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center center;
      pointer-events: none;
    }
    .proof-panel-content {
      position: relative;
      z-index: 1;
      max-width: 1440px;
      margin: 0 auto;
      display: flex; flex-direction: column;
      gap: 48px;
    }
    /* FAQ row: 2-col internal */
    .faq-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: start;
      padding: 32px 0;
    }
    .faq-intro {
      display: flex; flex-direction: column;
      gap: 32px;
    }
    .proof-h2 {
      font-family: var(--serif);
      font-weight: 700;
      font-size: 48px;
      line-height: 1.1;
      letter-spacing: -1px;
      color: var(--ink);
    }
    .proof-h2 em {
      font-style: italic;
      font-weight: 700;
      color: var(--ink);
    }
    .faq-still {
      display: flex; flex-direction: column;
      gap: 16px;
      align-items: flex-start;
    }
    .faq-still-label {
      font-family: var(--font);
      font-weight: 700;
      font-size: 20px;
      letter-spacing: -.3px;
      color: var(--ink-2);
    }
    .faq-contact-btn {
      display: inline-flex; align-items: center; gap: 8px;
      height: 40px;
      padding: 10px 16px;
      background: var(--ink);
      color: var(--white);
      border-radius: 99px;
      font-family: var(--font);
      font-weight: 600;
      font-size: 14px;
      text-decoration: none;
      transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
    }
    .faq-contact-btn:hover {
      transform: translateY(-1px);
      box-shadow: var(--sh-lift);
    }
    .proof-quote {
      position: relative;
      padding: 32px;
      background: var(--white);
      border: 1px solid var(--border-soft);
      border-radius: var(--r-md);
      box-shadow: var(--sh-card);
    }
    .proof-quote-mark {
      font-family: var(--serif);
      font-size: 64px;
      font-weight: 700;
      color: var(--primary-300);
      line-height: 1;
      margin-bottom: 12px;
    }
    .proof-quote-text {
      font-family: var(--serif);
      font-size: 22px;
      line-height: 1.45;
      color: var(--ink);
      letter-spacing: -.2px;
      margin-bottom: 24px;
    }
    .proof-quote-author {
      display: flex; align-items: center; gap: 12px;
      padding-top: 20px;
      border-top: 1px solid var(--border-soft);
    }
    .proof-author-avatar {
      width: 44px; height: 44px;
      border-radius: 50%;
      background: var(--blue);
      color: var(--white);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--serif);
      font-weight: 700;
      font-size: 16px;
      letter-spacing: -.3px;
    }
    .proof-author-name {
      font-family: var(--font);
      font-weight: 600;
      font-size: 14px;
      color: var(--ink);
    }
    .proof-author-role {
      font-size: 12px;
      color: var(--ink-3);
      margin-top: 2px;
    }
    .faq-list {
      display: flex; flex-direction: column;
      gap: 8px;
    }
    .faq-item {
      background: var(--white);
      border: 1px solid var(--border-soft);
      border-radius: 8px;
      box-shadow: var(--sh-card);
    }
    .faq-item summary {
      list-style: none;
      cursor: pointer;
      padding: 16px;
      display: flex; align-items: center;
      gap: 8px;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-icon {
      flex-shrink: 0;
      width: 32px; height: 32px;
      display: flex; align-items: center; justify-content: center;
      color: var(--ink);
      transition: transform .25s var(--ease-out);
    }
    .faq-icon::before {
      content: 'add';
      font-family: 'Material Icons';
      font-size: 22px;
    }
    .faq-item[open] .faq-icon::before {
      content: 'close';
    }
    .faq-q {
      flex: 1;
      font-family: var(--font);
      font-weight: 600;
      font-size: 18px;
      letter-spacing: -.2px;
      line-height: 1.3;
      color: var(--ink-2);
    }
    .faq-item[open] .faq-q { color: var(--ink); }
    .faq-item-body {
      padding: 0 16px 16px 56px;
      font-size: 14.5px;
      line-height: 1.6;
      color: var(--ink-3);
    }

    /* Testimonial card — glassy, full-width */
    .testimonial-card {
      background: rgba(248, 251, 255, .6);
      border: 1px solid var(--cream-3);
      border-radius: 24px;
      padding: 48px 80px;
      backdrop-filter: blur(17px) saturate(140%);
      -webkit-backdrop-filter: blur(17px) saturate(140%);
      box-shadow: var(--sh-card);
      display: flex; flex-direction: column;
      gap: 32px;
      align-items: center;
      text-align: center;
    }
    .testimonial-eyebrow {
      font-family: var(--font);
      font-weight: 600;
      font-size: 14px;
      color: var(--ink-3);
      text-transform: uppercase;
      letter-spacing: .08em;
    }
    .testimonial-quote {
      font-family: var(--serif);
      font-weight: 700;
      font-size: 28px;
      line-height: 1.2;
      letter-spacing: -.3px;
      color: var(--ink);
      max-width: 760px;
    }
    .testimonial-author-row {
      display: flex; align-items: center; gap: 16px;
    }
    .testimonial-avatar {
      width: 56px; height: 56px;
      border-radius: 50%;
      background: var(--blue);
      color: var(--white);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--serif);
      font-weight: 700;
      font-size: 20px;
      letter-spacing: -.3px;
      overflow: hidden;
      flex-shrink: 0;
    }
    .testimonial-avatar img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }
    .testimonial-author-name {
      font-family: var(--font);
      font-weight: 600;
      font-size: 18px;
      letter-spacing: -.2px;
      color: var(--ink-2);
    }
    .testimonial-author-role {
      font-size: 16px;
      color: var(--ink-3);
      margin-top: 4px;
    }

    /* ── CTA — split card with orb ───────────────────────────── */
    .cta-section {
      width: 100%;
      padding: 16px;
      background: var(--cream);
    }
    .cta-panel {
      position: relative;
      width: 100%;
      border-radius: var(--r-sm);
      background: var(--white);
      overflow: hidden;
      padding: 72px 48px;
    }
    .cta-panel-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center center;
      pointer-events: none;
    }
    .cta-panel-content {
      position: relative;
      z-index: 1;
      max-width: 1440px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .cta-card-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    .cta-card-h {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(32px, 3.5vw, 52px);
      line-height: 1.1;
      color: var(--ink);
      letter-spacing: -0.02em;
      margin-bottom: 20px;
      text-align: center;
    }
    .cta-card-p {
      font-size: 17px;
      line-height: 1.55;
      color: var(--ink-3);
      max-width: 460px;
      margin-bottom: 36px;
      text-align: center;
    }
    .cta-card-btn {
      display: inline-flex; align-items: center; gap: 10px;
      height: 52px;
      padding: 0 24px;
      background: var(--ink);
      color: var(--white);
      border-radius: 99px;
      font-family: var(--font);
      font-weight: 600;
      font-size: 16px;
      text-decoration: none;
      transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
      box-shadow: 0 6px 18px rgba(23, 22, 20, .18);
    }
    .cta-card-btn:hover {
      transform: translateY(-1px);
      box-shadow: var(--sh-lift);
    }
    .cta-card-btn .material-icons { font-size: 18px; }

    /* ── Footer — standalone, light theme ────────────────────── */
    /* The block-theme template-part wraps parts/footer.html in an outer
       <footer class="wp-block-template-part">. Give that wrapper the
       same cream tone so no body background leaks around the edges. */
    footer.wp-block-template-part { background: var(--cream-2); }
    .site-footer {
      background: var(--cream-2);
      padding: 64px 32px 40px;
    }
    .site-footer-inner {
      max-width: 1440px;
      margin: 0 auto;
    }
    .site-footer-top {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: 32px;
      padding-bottom: 40px;
      border-bottom: 1px solid var(--cream-3);
    }
    .site-footer-brand {
      max-width: 320px;
    }
    .site-footer-logo {
      display: inline-flex; align-items: center;
      color: var(--ink);
    }
    .site-footer-logo-img {
      width: auto;
      height: 32px;
    }
    .site-footer-tag {
      font-size: 14px;
      line-height: 1.6;
      color: var(--ink-3);
      margin-top: 16px;
    }
    .site-footer-col-title {
      font-family: var(--font);
      font-weight: 600;
      font-size: 13px;
      color: var(--ink);
      letter-spacing: .04em;
      text-transform: uppercase;
      margin-bottom: 16px;
    }
    .site-footer-links {
      display: flex; flex-direction: column;
      gap: 6px;
    }
    .site-footer-links-horiz {
      flex-direction: row;
      align-items: center;
      gap: 28px;
      flex-wrap: wrap;
    }
    .site-footer-links a {
      font-size: 14px;
      line-height: 1.6;
      color: var(--ink-3);
      text-decoration: none;
      transition: color .15s var(--ease-out);
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      padding: 4px 0;
    }
    .site-footer-links a:hover { color: var(--ink); }
    .site-footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 24px;
      gap: 16px;
      flex-wrap: wrap;
    }
    .site-footer-copy {
      font-size: 13px;
      color: var(--ink-4);
    }
    .site-footer-legal {
      display: flex;
      gap: 24px;
      flex-wrap: wrap;
    }
    .site-footer-legal a {
      font-size: 13px;
      color: var(--ink-4);
      text-decoration: none;
      transition: color 0.15s ease;
    }
    .site-footer-legal a:hover { color: var(--ink); }

    @media (max-width: 1100px) {
      .why-grid { gap: 48px 32px; }
      .why-item-h { font-size: 20px; }
    }
    @media (max-width: 1100px) {
      .teams-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 900px) {
      .teams-grid { grid-template-columns: 1fr; gap: 20px; }
      .faq-row { grid-template-columns: 1fr; gap: 32px; padding: 0; }
      .proof-h2 { font-size: 36px; }
      .why-section { padding: 16px; }
      .why-panel { padding: 56px 32px; border-radius: 32px; }
      .testimonial-card { padding: 36px 32px; }
      .testimonial-quote { font-size: 22px; }
      .cta-section { padding: 32px 16px; }
      .cta-panel { padding: 56px 32px; border-radius: 32px; width: 100%; }
      .site-footer-top { grid-template-columns: 1fr 1fr; }
      .site-footer-brand { grid-column: 1 / -1; }

      /* Why Nousable: collapse to 1-col */
      .why-grid { grid-template-columns: 1fr; gap: 40px; }
      .why-header { margin-bottom: 48px; }
      .why-item-h { font-size: 20px; }

      /* Integration: stack header above cards */
      .integrate-cards { grid-template-columns: 1fr; }
      .integrate-grid .integrate-header { max-width: 560px; }
    }
    @media (max-width: 640px) {
      .proof-section { padding: 12px; }
      .proof-panel { padding: 28px 20px; border-radius: 24px; }
      .proof-h2 { font-size: 28px; }
      .testimonial-card { padding: 28px 20px; border-radius: 16px; }
      .cta-section { padding: 24px 12px; }
      .cta-panel { padding: 40px 24px; border-radius: 24px; }
      .site-footer-top { grid-template-columns: 1fr; }
      .site-footer-bottom { flex-direction: column; align-items: flex-start; }
      .proof-quote-text { font-size: 18px; }
    }

    /* ── About page ──────────────────────────────────────────────── */
    /* About — Mission: uses the mesh-gradient panel pattern (matching hero/why/cta).
       Hug-to-height: panel is sized to its content + breathing room, not a full
       viewport hero. No system-preview card here, just headline + paragraph. */
    .about-mission {
      padding: 0 16px 16px;
      background: var(--cream);
    }
    .about-mission-panel {
      position: relative;
      width: 100%;
      border-radius: var(--r-sm);
      overflow: hidden;
      padding: calc(48px + var(--nav-h)) 48px 96px;
    }
    .about-mission-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      pointer-events: none;
      z-index: 0;
    }
    .about-mission-content {
      position: relative;
      z-index: 1;
    }
    .about-mission-inner {
      max-width: 980px;
      margin: 0 auto;
      text-align: center;
    }
    .about-mission-h {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(36px, 4.5vw, 60px);
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: var(--ink);
      margin: 16px auto 24px;
      max-width: 880px;
    }
    .about-mission-h em {
      font-style: italic;
      color: var(--primary-500);
    }
    .about-mission-p {
      font-family: var(--font);
      font-size: 17px;
      line-height: 1.6;
      color: var(--ink-3);
      max-width: 720px;
      margin: 0 auto;
    }
    /* ── About — A word from the founders ────────────────────────── */
    .about-founders { padding: 96px 48px; background: var(--cream); }
    .about-founders-inner { max-width: 880px; margin: 0 auto; }
    .about-founders-header { text-align: center; margin: 0 auto 48px; }
    .about-founders-h {
      font-family: var(--serif); font-weight: 400;
      font-size: clamp(32px, 3.4vw, 48px);
      line-height: 1.15; letter-spacing: -0.02em;
      color: var(--ink); margin: 16px 0 0;
    }
    .about-founders-h em {
      font-style: italic; color: var(--primary-500);
    }
    .about-founders-letter {
      background: var(--white);
      border: 1px solid var(--border-soft);
      border-radius: var(--r-lg);
      box-shadow: var(--sh-card);
      padding: 56px 64px 48px;
    }
    .about-founders-body {
      font-family: var(--serif); font-weight: 400;
      font-size: clamp(17px, 1.4vw, 19px);
      line-height: 1.7;
      color: var(--ink-2);
      margin: 0 0 40px;
    }
    .about-founders-body em { font-style: italic; color: var(--primary-700); }
    .about-founders-signatures {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      padding-top: 32px;
      border-top: 1px solid var(--border-soft);
    }
    .about-founders-signature {
      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-rows: auto auto;
      column-gap: 14px;
      align-items: center;
    }
    .about-founders-avatar {
      grid-row: 1 / span 2;
      width: 56px; height: 56px;
      border-radius: 50%;
      overflow: hidden;
      background: var(--primary-50);
      color: var(--primary-700);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      position: relative;
    }
    .about-founders-avatar img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }
    .about-founders-initials {
      font-family: var(--font);
      font-weight: 700;
      font-size: 18px;
      letter-spacing: -0.01em;
      display: none;
    }
    /* If image failed (JS adds .is-placeholder), show initials instead */
    .about-founders-avatar.is-placeholder .about-founders-initials {
      display: block;
    }
    .about-founders-name {
      grid-column: 2;
      grid-row: 1;
      font-family: var(--font);
      font-weight: 600;
      font-size: 16px;
      color: var(--ink);
      line-height: 1.2;
    }
    .about-founders-role {
      grid-column: 2;
      grid-row: 2;
      font-family: var(--font);
      font-weight: 500;
      font-size: 13px;
      color: var(--ink-3);
      line-height: 1.4;
    }
    .about-story { padding: 96px 48px; }
    .about-story-inner { max-width: 880px; margin: 0 auto; }
    .about-story-header { margin-bottom: 40px; }
    .about-story-h {
      font-family: var(--serif); font-weight: 400;
      font-size: clamp(32px, 3.5vw, 52px);
      line-height: 1.1; letter-spacing: -0.02em;
      color: var(--ink); margin-top: 16px;
    }
    .about-story-h em { font-style: italic; color: var(--primary-500); }
    .about-story-body p {
      font-family: var(--font); font-weight: 400;
      font-size: 17px; line-height: 1.65;
      color: var(--ink-3); margin-bottom: 20px;
    }
    .about-story-body em { font-style: italic; color: var(--primary-700); }

    /* ── Legal pages (Terms, Privacy) ─────────────────────────────── */
    .legal-doc .legal-updated {
      color: var(--ink-4);
      font-size: 14px;
      margin-bottom: 32px;
    }
    .legal-doc .legal-h2 {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(22px, 2vw, 28px);
      line-height: 1.25;
      letter-spacing: -0.01em;
      color: var(--ink);
      margin-top: 48px;
      margin-bottom: 12px;
    }
    .legal-doc .about-story-body a {
      color: var(--primary-700);
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .legal-doc .about-story-body a:hover { color: var(--primary-500); }
    .legal-doc .legal-list {
      margin: 0 0 20px 0;
      padding-left: 22px;
      list-style: disc;
    }
    .legal-doc .legal-list li {
      font-family: var(--font); font-weight: 400;
      font-size: 17px; line-height: 1.65;
      color: var(--ink-3);
      margin-bottom: 8px;
    }
    .legal-doc .legal-list li::marker { color: var(--ink-4); }
    .legal-doc .legal-contact-block {
      padding: 20px 24px;
      background: var(--bg-1, #f6f6f4);
      border-radius: 12px;
      border: 1px solid var(--border, rgba(0,0,0,0.06));
      font-size: 16px;
      line-height: 1.7;
    }

    /* ── Privacy modal (contact form) ─────────────────────────────── */
    .legal-modal {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    .legal-modal[aria-hidden="false"] { display: flex; }
    body.legal-modal-open { overflow: hidden; }
    .legal-modal-overlay {
      position: absolute;
      inset: 0;
      background: rgba(20, 20, 24, 0.55);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }
    .legal-modal-dialog {
      position: relative;
      width: min(820px, 100%);
      max-height: calc(100vh - 48px);
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      animation: legal-modal-in 180ms ease-out;
    }
    @keyframes legal-modal-in {
      from { opacity: 0; transform: translateY(12px) scale(0.98); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    .legal-modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 28px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      flex-shrink: 0;
    }
    .legal-modal-title {
      font-family: var(--serif);
      font-weight: 400;
      font-size: 22px;
      letter-spacing: -0.01em;
      color: var(--ink);
      margin: 0;
    }
    .legal-modal-close {
      background: transparent;
      border: 0;
      cursor: pointer;
      width: 36px;
      height: 36px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--ink-3);
      transition: background 0.15s ease, color 0.15s ease;
    }
    .legal-modal-close:hover { background: rgba(0, 0, 0, 0.05); color: var(--ink); }
    .legal-modal-body {
      overflow-y: auto;
      padding: 4px 28px 28px;
    }
    /* The legal-privacy-content pattern wraps in its own .about-story section;
       reset its outer padding inside the modal so it doesn't double up. */
    .legal-modal-body .about-story { padding: 16px 0 0; }
    .legal-modal-body .about-story-inner { max-width: none; }
    .legal-modal-body .legal-h2:first-of-type { margin-top: 24px; }

    @media (max-width: 640px) {
      .legal-modal { padding: 12px; }
      .legal-modal-dialog { border-radius: 16px; max-height: calc(100vh - 24px); }
      .legal-modal-header { padding: 16px 20px; }
      .legal-modal-body { padding: 4px 20px 20px; }
    }
    @media (max-width: 640px) {
      .about-mission { padding: 0 12px 12px; }
      .about-mission-panel { padding: calc(48px + var(--nav-h)) 24px 64px; }
      .about-founders { padding: 72px 16px; }
      .about-story { padding: 72px 24px; }
      .about-founders-letter { padding: 36px 24px 32px; }
      .about-founders-signatures {
        grid-template-columns: 1fr;
        gap: 20px;
      }
    }

    /* ── Contact page ────────────────────────────────────────────── */
    .contact-section { padding: 160px 48px 96px; }
    .contact-inner { max-width: 1200px; margin: 0 auto; }
    .contact-header { text-align: center; max-width: 720px; margin: 0 auto 64px; }
    .contact-h {
      font-family: var(--serif); font-weight: 400;
      font-size: clamp(40px, 4.4vw, 60px);
      line-height: 1.05; letter-spacing: -1.2px;
      color: var(--ink); margin: 16px 0 24px;
    }
    .contact-p { font-size: 18px; line-height: 1.6; color: var(--ink-3); }
    .contact-grid {
      display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
      gap: 64px; align-items: start;
    }
    .contact-form-wrap {
      background: var(--white); border: 1px solid var(--border-soft);
      border-radius: var(--r-md); box-shadow: var(--sh-card);
      padding: 40px;
    }
    /* CF7 wraps every block-level shortcode in its own <p>. Reset that
       so our cf7-field / cf7-row spacing fully controls layout. */
    .contact-form-wrap .wpcf7-form p { margin: 0; }
    .contact-form-wrap .wpcf7-form { display: flex; flex-direction: column; gap: 18px; }

    /* Label sits 8px above its field, regardless of CF7's <p> wrapping. */
    .contact-form-wrap label {
      display: block; font-size: 14px; font-weight: 600;
      color: var(--ink); margin: 0;
    }
    .contact-form-wrap .cf7-field { display: flex; flex-direction: column; gap: 8px; }
    .contact-form-wrap .cf7-req { color: var(--accent-500); font-weight: 700; }

    .contact-form-wrap input[type="text"],
    .contact-form-wrap input[type="email"],
    .contact-form-wrap input[type="tel"],
    .contact-form-wrap select,
    .contact-form-wrap textarea {
      width: 100%; padding: 12px 16px; height: 48px;
      background: var(--cream-2); border: 1px solid var(--border-soft);
      border-radius: var(--r-sm); font-family: var(--font); font-size: 15px;
      color: var(--ink); transition: border-color .2s var(--ease-out);
    }
    .contact-form-wrap select {
      appearance: none; -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2336425c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 16px center;
      padding-right: 44px;
      cursor: pointer;
    }
    .contact-form-wrap input:focus,
    .contact-form-wrap select:focus,
    .contact-form-wrap textarea:focus {
      outline: none; border-color: var(--primary-500);
    }
    .contact-form-wrap textarea { min-height: 140px; height: auto; resize: vertical; }

    /* Side-by-side rows (first/last, job/company, country/students). */
    .contact-form-wrap .cf7-row {
      display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
    }
    .contact-form-wrap .cf7-row > .cf7-field { display: flex; flex-direction: column; gap: 8px; }

    /* GDPR consent checkboxes. CF7 [acceptance] renders <span class="wpcf7-list-item">
       containing an <input type="checkbox"> + <label>. We restyle as a row with the
       box on the left and label text wrapping next to it. */
    .contact-form-wrap .cf7-consents { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
    .contact-form-wrap .cf7-consent .wpcf7-list-item { margin: 0; display: block; }
    .contact-form-wrap .cf7-consent .wpcf7-list-item label {
      display: flex; align-items: flex-start; gap: 16px;
      font-size: 13.5px; line-height: 1.55; font-weight: 400; color: var(--ink-2);
      cursor: pointer;
      min-height: 44px;
      padding: 4px 0;
    }
    .contact-form-wrap .cf7-consent input[type="checkbox"] {
      flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px;
      accent-color: var(--primary-500);
      cursor: pointer;
    }
    .contact-form-wrap .cf7-consent .wpcf7-list-item-label { display: inline; }
    .contact-form-wrap .cf7-consent a { color: var(--primary-700); text-decoration: underline; }

    /* Submit + fineprint stack. */
    .contact-form-wrap .cf7-actions { margin-top: 10px; display: flex; flex-direction: column; gap: 14px; }
    .contact-form-wrap .cf7-fineprint {
      font-size: 12.5px; line-height: 1.55; color: var(--ink-3); margin: 0; max-width: 520px;
    }
    .contact-form-wrap .cf7-fineprint a { color: var(--primary-700); text-decoration: underline; }
    .contact-form-wrap .wpcf7-submit,
    .contact-form-wrap input[type="submit"] {
      align-self: flex-start;
      display: inline-flex; align-items: center; gap: 8px;
      padding: 12px 24px; height: 48px;
      background: var(--ink); color: var(--white);
      border: 0; border-radius: 99px;
      font-family: var(--font); font-weight: 600; font-size: 15px;
      cursor: pointer; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
    }
    .contact-form-wrap .wpcf7-submit:hover { transform: translateY(-1px); box-shadow: var(--sh-lift); }

    @media (max-width: 640px) {
      .contact-form-wrap .cf7-row { grid-template-columns: 1fr; gap: 14px; }
    }
    .contact-fallback { font-size: 14px; color: var(--ink-3); margin-top: 16px; }
    .contact-aside { display: flex; flex-direction: column; gap: 32px; }
    .contact-aside-block {
      padding: 24px; background: var(--white);
      border: 1px solid var(--border-soft); border-radius: var(--r-md);
    }
    .contact-aside-label {
      font-size: 12px; font-weight: 600; text-transform: uppercase;
      letter-spacing: .08em; color: var(--ink-3);
    }
    .contact-aside-link {
      display: block; margin-top: 8px;
      font-family: var(--serif); font-weight: 700; font-size: 22px;
      color: var(--ink); letter-spacing: -.3px; text-decoration: none;
    }
    .contact-aside-link:hover { color: var(--primary-700); }
    .contact-aside-meta { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
    @media (max-width: 1024px) {
      .contact-grid { grid-template-columns: 1fr; gap: 32px; }
    }
    @media (max-width: 640px) {
      .contact-section { padding: 120px 24px 64px; }
      .contact-form-wrap { padding: 32px 24px; }
    }

    /* ── Product page ────────────────────────────────────────────── */
    .product-hero { padding: calc(48px + var(--nav-h)) 48px 80px; text-align: center; }
    .product-hero-inner { max-width: 1100px; margin: 0 auto; }
    .product-hero-h {
      font-family: var(--serif); font-weight: 400;
      font-size: clamp(44px, 5vw, 72px);
      line-height: 1.05; letter-spacing: -1.5px;
      color: var(--ink); margin: 24px auto 32px; max-width: 980px;
    }
    .product-hero-h em { font-style: italic; color: var(--primary-500); }
    .product-hero-p {
      font-size: 18px; line-height: 1.6; color: var(--ink-3);
      max-width: 780px; margin: 0 auto;
    }

    /* Band hero variant — centered headline + image band filling viewport */
    .product-hero-band {
      padding: calc(48px + var(--nav-h)) 48px 0;
      text-align: center;
      overflow: hidden;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    .product-hero-band .product-hero-inner {
      max-width: 980px;
      margin: 0 auto;
    }
    .product-hero-band .section-eyebrow { margin-left: auto; margin-right: auto; }

    .product-hero-band-wrap {
      position: relative;
      margin: 64px -48px 0;
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      isolation: isolate;
    }
    .product-hero-band-bg {
      position: relative;
      width: 100%;
      flex: 1;
      overflow: hidden;
    }
    .product-hero-band-bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 35%;
      display: block;
    }

    .product-hero-cards {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      display: flex;
      align-items: end;
      justify-content: center;
      gap: 16px;
      padding: 0 24px;
      z-index: 2;
      pointer-events: none;
    }
    .hero-band-card {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 18px;
      background: var(--white);
      border: 1px solid var(--border-soft);
      border-radius: var(--r-md);
      box-shadow: 0 12px 32px rgba(20, 30, 60, 0.10), 0 2px 4px rgba(20, 30, 60, 0.04);
      font-family: var(--font);
      flex-shrink: 0;
      transform: translateY(20%);
    }
    .hbc-icon {
      font-size: 18px;
      color: var(--primary-500);
    }
    .hbc-label {
      font-size: 12.5px;
      font-weight: 500;
      color: var(--ink-3);
    }
    .hbc-value {
      font-family: var(--serif);
      font-weight: 700;
      font-size: 18px;
      color: var(--ink);
      margin-left: 4px;
    }
    .hbc-meta {
      display: flex;
      flex-direction: column;
      gap: 1px;
      line-height: 1.25;
    }
    .hbc-meta strong {
      font-size: 13px;
      font-weight: 700;
      color: var(--ink);
    }
    .hbc-meta span {
      font-size: 11.5px;
      color: var(--ink-3);
    }
    .hbc-avatar {
      width: 32px; height: 32px;
      border-radius: var(--r-full);
      background: radial-gradient(circle at 30% 30%, var(--accent-300, #f9c8d4), var(--primary-500));
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--white);
      font-size: 11px; font-weight: 700;
      flex-shrink: 0;
    }
    .hbc-pulse {
      width: 8px; height: 8px;
      border-radius: var(--r-full);
      background: var(--accent-500);
      box-shadow: 0 0 0 4px rgba(229, 62, 95, 0.18);
      flex-shrink: 0;
      animation: hbc-pulse 1.6s ease-in-out infinite;
    }
    @keyframes hbc-pulse {
      0%, 100% { box-shadow: 0 0 0 4px rgba(229, 62, 95, 0.18); }
      50%      { box-shadow: 0 0 0 8px rgba(229, 62, 95, 0.06); }
    }

    /* Featured (center) card sits higher and slightly larger */
    .hero-band-card-feature {
      padding: 16px 22px;
      transform: translateY(-15%);
      box-shadow: 0 24px 48px rgba(20, 30, 60, 0.16), 0 4px 8px rgba(20, 30, 60, 0.05);
      border-color: var(--primary-100, #d6e0ff);
    }
    .hero-band-card-feature .hbc-meta strong { font-size: 14px; }
    .hero-band-card-feature .hbc-meta span { font-size: 12px; }

    /* Slight stagger so the outer cards sit deeper into the band */
    .hero-band-card-1 { transform: translateY(35%); }
    .hero-band-card-2 { transform: translateY(15%); }
    .hero-band-card-4 { transform: translateY(15%); }
    .hero-band-card-5 { transform: translateY(35%); }

    @media (max-width: 1024px) {
      .product-hero-cards { gap: 12px; padding: 0 16px; }
      .hero-band-card-1, .hero-band-card-5 { display: none; }
    }
    @media (max-width: 720px) {
      .product-hero-band { padding: calc(48px + var(--nav-h)) 24px 0; }
      .product-hero-band-wrap { margin: 48px -24px 0; padding-bottom: 56px; }
      .product-hero-band-bg { height: 260px; }
      .product-hero-cards { gap: 10px; padding: 0 12px; }
      .hero-band-card { padding: 10px 12px; }
      .hero-band-card-2, .hero-band-card-4 { display: none; }
    }
    .product-section { padding: 96px 48px; }
    .product-section + .product-section { padding-top: 48px; }
    .product-section-inner {
      max-width: 1200px; margin: 0 auto;
      display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 80px; align-items: center;
    }
    .product-section:nth-of-type(odd) .product-section-visual { order: 2; }
    .product-section-h {
      font-family: var(--serif); font-weight: 700;
      font-size: clamp(28px, 3vw, 40px);
      line-height: 1.1; letter-spacing: -1px;
      color: var(--ink); margin: 16px 0 16px;
    }
    .product-section-p { font-size: 16px; line-height: 1.6; color: var(--ink-3); margin-bottom: 24px; }
    .product-section-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
    .product-section-bullets li {
      font-size: 15px; color: var(--ink-2);
      padding-left: 24px; position: relative;
    }
    .product-section-bullets li::before {
      content: ""; position: absolute; left: 0; top: 8px;
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--primary-500);
    }
    .product-section-visual-frame {
      aspect-ratio: 4 / 3;
      background: var(--cream-2);
      border: 1px solid var(--border-soft);
      border-radius: var(--r-md);
      display: flex; align-items: center; justify-content: center;
    }
    .product-section-visual-placeholder {
      font-size: 13px; color: var(--ink-4);
      padding: 16px; text-align: center;
    }
    @media (max-width: 1024px) {
      .product-section-inner { grid-template-columns: 1fr; gap: 32px; }
      .product-section:nth-of-type(odd) .product-section-visual { order: 0; }
    }
    @media (max-width: 640px) {
      .product-hero { padding: calc(48px + var(--nav-h)) 24px 56px; }
      .product-section { padding: 64px 24px; }
    }

    /* ========================================================================
       Product page — deep section visual mocks
       Each .ps-viz-* sits inside .product-section-visual-frame and renders a
       lightweight, on-brand UI fragment that illustrates the section topic.
       ======================================================================== */
    .product-section-visual-frame.ps-viz {
      padding: 24px;
      background: var(--cream);
      align-items: stretch;
      justify-content: stretch;
    }
    .ps-viz > * { width: 100%; height: 100%; display: flex; flex-direction: column; }

    /* Shared mock-card styling */
    .ps-feed, .ps-graph, .ps-action, .ps-score, .ps-table {
      background: var(--white);
      border: 1px solid var(--border-soft);
      border-radius: var(--r-md);
    }
    .ps-feed, .ps-graph, .ps-score { padding: 18px; gap: 12px; }
    .ps-action { padding: 22px; gap: 10px; justify-content: center; }
    .ps-table { overflow: hidden; gap: 0; }

    /* 01 — Signal feed */
    .ps-feed-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
    .ps-feed-label {
      font-size: 11px; font-weight: 600; letter-spacing: .08em;
      text-transform: uppercase; color: var(--ink-3);
    }
    .ps-pulse {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--accent-500);
      box-shadow: 0 0 0 4px rgba(228, 89, 167, .14);
      animation: ps-pulse 2.4s ease-in-out infinite;
    }
    @keyframes ps-pulse {
      0%, 100% { box-shadow: 0 0 0 4px rgba(228, 89, 167, .14); }
      50%      { box-shadow: 0 0 0 8px rgba(228, 89, 167, .04); }
    }
    .ps-feed-list { display: flex; flex-direction: column; gap: 8px; }
    .ps-feed-item {
      display: flex; align-items: center; gap: 10px;
      font-size: 14px; color: var(--ink-2);
      padding: 10px 12px;
      background: var(--cream-2);
      border-radius: var(--r-sm);
    }
    .ps-tag {
      font-size: 10px; font-weight: 700; letter-spacing: .06em;
      text-transform: uppercase;
      padding: 3px 8px; border-radius: 999px;
      flex-shrink: 0;
    }
    .ps-tag.is-primary { background: var(--primary-50); color: var(--primary-700); }
    .ps-tag.is-accent  { background: var(--accent-50);  color: var(--accent-700); }
    .ps-tag.is-cyan    { background: var(--cyan-tint);  color: var(--cyan-dark); }

    /* 02 — Learner graph card */
    .ps-graph-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
    .ps-graph-name { font-family: var(--serif); font-weight: 700; font-size: 18px; color: var(--ink); }
    .ps-graph-meta { font-size: 12px; color: var(--ink-3); }
    .ps-graph-rows { display: flex; flex-direction: column; gap: 10px; }
    .ps-graph-row {
      display: grid;
      grid-template-columns: minmax(110px, 140px) 1fr 36px;
      gap: 12px; align-items: center;
      font-size: 13px; color: var(--ink-2);
    }
    .ps-bar { height: 6px; background: var(--cream-2); border-radius: 3px; overflow: hidden; }
    .ps-bar-fill { display: block; height: 100%; background: var(--primary-500); border-radius: 3px; }
    .ps-pct {
      font-size: 12px; color: var(--ink-3); text-align: right;
      font-variant-numeric: tabular-nums;
    }

    /* 03 — Orchestration action card */
    .ps-action-tag {
      font-size: 10px; font-weight: 700; letter-spacing: .08em;
      text-transform: uppercase; color: var(--accent-700);
    }
    .ps-action-title {
      font-family: var(--serif); font-weight: 700;
      font-size: 22px; line-height: 1.2; color: var(--ink);
    }
    .ps-action-meta { font-size: 13px; color: var(--ink-3); margin-bottom: 8px; }
    .ps-action-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
    .ps-chip {
      font-size: 12px; padding: 4px 10px; border-radius: 999px;
      background: var(--cream-2); color: var(--ink-2);
      border: 1px solid var(--border-soft);
    }
    .ps-chip.is-accent {
      background: var(--accent-50); color: var(--accent-700);
      border-color: transparent;
    }
    .ps-action-cta {
      align-self: flex-start;
      padding: 10px 18px; border-radius: var(--r-sm);
      background: var(--ink); color: var(--white);
      font-size: 13px; font-weight: 600; letter-spacing: .02em;
      width: fit-content;
    }

    /* 04 — Avatar chat */
    .ps-chat { gap: 12px; justify-content: center; }
    .ps-chat-msg { display: flex; align-items: flex-start; gap: 10px; }
    .ps-chat-msg.is-you { justify-content: flex-end; }
    .ps-chat-avatar {
      width: 32px; height: 32px; border-radius: 50%;
      background: var(--primary-500); color: var(--white);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--serif); font-weight: 700; font-size: 14px;
      flex-shrink: 0;
    }
    .ps-chat-bubble {
      max-width: 78%; padding: 10px 14px;
      background: var(--white); border: 1px solid var(--border-soft);
      border-radius: 16px; border-top-left-radius: 4px;
      font-size: 14px; line-height: 1.45; color: var(--ink-2);
    }
    .ps-chat-bubble.is-you {
      background: var(--ink); color: var(--white);
      border-color: transparent;
      border-radius: 16px; border-top-right-radius: 4px;
    }
    .ps-chat-meta {
      font-size: 10px; font-weight: 600; letter-spacing: .08em;
      text-transform: uppercase; color: var(--ink-4);
      text-align: center; margin-top: auto; padding-top: 8px;
    }

    /* 05 — Assessment scorecard */
    .ps-score-head { display: flex; justify-content: space-between; align-items: baseline; }
    .ps-score-label {
      font-size: 11px; font-weight: 600; letter-spacing: .08em;
      text-transform: uppercase; color: var(--ink-3);
    }
    .ps-score-delta {
      font-size: 14px; font-weight: 600; color: var(--primary-700);
      font-variant-numeric: tabular-nums;
    }
    .ps-score-rows { display: flex; flex-direction: column; gap: 8px; }
    .ps-score-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 10px 12px;
      background: var(--cream-2); border-radius: var(--r-sm);
      font-size: 13px; color: var(--ink-2);
    }
    .ps-trend { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
    .ps-trend.up   { color: var(--primary-700); }
    .ps-trend.down { color: var(--ink-3); }

    /* 06 — Visibility table */
    .ps-table-head, .ps-table-row {
      display: grid; grid-template-columns: 1fr 1fr 100px;
      gap: 12px; padding: 12px 14px;
      font-size: 13px;
    }
    .ps-table-head {
      background: var(--cream-2);
      font-size: 10px; font-weight: 700; letter-spacing: .08em;
      text-transform: uppercase; color: var(--ink-3);
    }
    .ps-table-row {
      color: var(--ink-2);
      border-top: 1px solid var(--border-soft);
      align-items: center;
    }
    .ps-pill {
      font-size: 11px; font-weight: 600;
      padding: 3px 10px; border-radius: 999px;
      text-align: center; align-self: center;
      width: fit-content; justify-self: end;
    }
    .ps-pill.is-ok   { background: var(--primary-50); color: var(--primary-700); }
    .ps-pill.is-warn { background: var(--accent-50);  color: var(--accent-700); }

    /* Compact visuals on narrow screens so the mocks stay legible */
    @media (max-width: 640px) {
      .product-section-visual-frame.ps-viz { padding: 16px; }
      .ps-action-title { font-size: 18px; }
      .ps-graph-row { grid-template-columns: minmax(90px, 110px) 1fr 32px; }
      .ps-table-head, .ps-table-row { grid-template-columns: 1fr 1fr 88px; padding: 10px 12px; }
    }

    /* ========================================================================
       About page — team card polish + placeholder treatment
       Replaces the previous "—" character (style violation) with a quiet
       placeholder card that reads as "to be announced" without awkward type.
       ======================================================================== */
    .about-team-card {
      transition: transform .18s ease, box-shadow .18s ease;
    }
    .about-team-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--sh-lift);
    }
    .about-team-card.is-placeholder-card {
      background: var(--cream);
    }
    .about-team-avatar.is-placeholder {
      background: var(--cream-2);
      border: 1px dashed var(--border-soft);
      color: transparent;
      position: relative;
    }
    .about-team-avatar.is-placeholder::after {
      content: "";
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--ink-4);
      opacity: .35;
    }
    .about-team-name.is-tbd {
      color: var(--ink-3);
      font-weight: 500;
    }


    /* ------- Tile content (foreshortened by the parent rotation) -------- */
    .tile-art {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
      height: 100%;
      font-family: var(--font);
      font-size: 14px;
      line-height: 1.35;
      color: var(--ink);
    }
    .ta-head { display: flex; align-items: center; gap: 10px; }
    .ta-pulse {
      width: 10px; height: 10px; border-radius: 50%;
      background: var(--accent-500);
      box-shadow: 0 0 0 4px rgba(228, 89, 167, 0.18);
      flex-shrink: 0;
    }
    .ta-eyebrow {
      font-size: 11px; font-weight: 700;
      letter-spacing: 0.10em; text-transform: uppercase;
      color: var(--ink-3);
    }
    .ta-eyebrow.is-accent { color: var(--accent-700); }

    /* Signal: chip rows */
    .ta-rows { display: flex; flex-direction: column; gap: 7px; flex: 1; }
    .ta-row {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 12px;
      background: var(--cream);
      border-radius: 10px;
      font-size: 13px;
      color: var(--ink-2);
    }
    .ta-row-text { line-height: 1.25; }
    .ta-tag {
      flex-shrink: 0;
      width: 22px; height: 22px;
      border-radius: 6px;
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 700;
    }
    .ta-tag.is-primary { color: var(--primary-700); background: var(--primary-50); }
    .ta-tag.is-accent  { color: var(--accent-700);  background: var(--accent-50); }
    .ta-tag.is-cyan    { color: var(--cyan-dark);   background: var(--cyan-tint); }

    /* Graph: profile + bars */
    .ta-profile {
      display: flex; align-items: center; gap: 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(20, 19, 16, 0.06);
    }
    .ta-avatar {
      width: 38px; height: 38px;
      border-radius: 50%;
      background: var(--primary-500); color: var(--white);
      font-family: var(--serif); font-weight: 700; font-size: 17px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .ta-pinfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .ta-pname { font-family: var(--serif); font-weight: 700; font-size: 16px; color: var(--ink); }
    .ta-pmeta { font-size: 12px; color: var(--ink-3); }
    .ta-bars { display: flex; flex-direction: column; gap: 9px; flex: 1; }
    .ta-bar {
      display: grid; grid-template-columns: 96px 1fr 28px;
      gap: 10px; align-items: center;
      font-size: 12px; color: var(--ink-3);
    }
    .ta-blabel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ta-btrack { height: 6px; background: var(--cream); border-radius: 3px; overflow: hidden; }
    .ta-btrack i { display: block; height: 100%; background: var(--primary-500); border-radius: 3px; }
    .ta-bval {
      font-size: 11px; color: var(--ink-2); font-weight: 600;
      font-variant-numeric: tabular-nums; text-align: right;
    }

    /* Orchestration: action card */
    .ta-title {
      font-family: var(--serif); font-weight: 700;
      font-size: 22px; line-height: 1.1;
      letter-spacing: -0.3px;
      color: var(--ink);
      margin: 4px 0;
    }
    .ta-meta { font-size: 12px; color: var(--ink-3); }
    .ta-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: auto; }
    .ta-chip {
      font-size: 11px; padding: 5px 10px; border-radius: 999px;
      background: var(--cream); color: var(--ink-2);
      border: 1px solid rgba(20, 19, 16, 0.06);
    }
    .ta-chip.is-accent { background: var(--accent-50); color: var(--accent-700); border-color: transparent; }
    .ta-cta {
      align-self: flex-start;
      padding: 10px 18px; border-radius: 8px;
      background: var(--ink); color: var(--white);
      font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
    }

    /* Avatar: chat */
    .ta-chat { display: flex; flex-direction: column; gap: 10px; flex: 1; }
    .ta-bubble {
      display: flex; align-items: flex-start; gap: 8px;
      max-width: 94%;
    }
    .ta-bavatar {
      width: 28px; height: 28px; border-radius: 50%;
      background: var(--primary-500); color: var(--white);
      font-family: var(--serif); font-weight: 700; font-size: 13px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .ta-btext {
      padding: 9px 13px;
      background: var(--cream);
      border-radius: 14px 14px 14px 4px;
      font-size: 13px; line-height: 1.4;
      color: var(--ink-2);
    }
    .ta-bubble.is-you { align-self: flex-end; max-width: 84%; }
    .ta-bubble.is-you .ta-btext {
      background: var(--ink); color: var(--white);
      border-radius: 14px 14px 4px 14px;
    }
    .ta-foot {
      display: flex; align-items: center; gap: 6px;
      font-size: 10px; font-weight: 700;
      letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--ink-3);
      padding-top: 4px;
      margin-top: auto;
    }


    /* ========================================================================
       SYSTEM LAYERS v2 — scroll-driven dealer animation
       --------------------------------------------------------------------
       Section structure:
         .system-layers (no longer uses padding for the visual area)
           .system-layers-header (visible at the top, in normal flow)
           .layers-track (400vh tall — gives 4 viewport-stops to scroll through)
             .layers-stop × 4 (invisible IO anchors at 0/100/200/300 vh)
             .layers-stage (position: sticky; top: 0; height: 100vh)
               .layer-stack.is-active-N (state class; drives all visual changes)
                 .layers-visual → .arch-scene → .arch-stage → 4× .layer-tile
                 .layers-textpanel → 4× .layer-panel (all stacked, only active visible)

       Each .layer-tile has two render modes:
         .tile-title-strip (compact 56px bar — always rendered, hides when active)
         .tile-art (full mockup — hidden by default, shows when tile is active)

       For each of the 4 active states, every tile takes one of 3 roles:
         - DISCARD (above active, stacked tight, blank face)
         - ACTIVE (single tile, expanded, full content visible)
         - WAITING (below active, stacked tight, blank face)
       ======================================================================== */

    /* System Layers shares the same vertical breathing room as every
       other section (72px top + bottom), so it lines up consistently
       with the sections above and below. The sticky stage inside still
       behaves correctly. */
    .system-layers {
      padding: 72px 0;
      background: var(--cream);
    }
    /* Header pinned inside the sticky stage. Constrained to a reading
       width and LEFT-flush within the stage's container padding —
       matches the For Learning Teams header layout. Left edge of
       header lines up with the left edge of the layer-stack below. */
    .system-layers .system-layers-header {
      max-width: 100%;
      margin: 0 0 24px;
      text-align: left;
      padding: 0;
    }

    /* The tall scroll track — 4 viewport stops:
       stop "0" = all inactive (intro state, all covers visible);
       stops 1/2/3 = each activates the corresponding layer in turn. */
    /* Track is the scroll vehicle for the 4 layer states. Shortened from
       400vh → 280vh so users traverse the section in 30% less scroll
       distance. Each stop sits 70vh apart, still enough for the
       IntersectionObserver to cleanly distinguish between them. */
    .layers-track {
      position: relative;
      height: 200vh;
    }
    .layers-stop {
      position: absolute;
      left: 0;
      width: 100%;
      height: 70vh;
      pointer-events: none;
      visibility: hidden;
    }
    .layers-stop[data-stop="0"] { top: 0; }
    .layers-stop[data-stop="1"] { top: 50vh; }
    .layers-stop[data-stop="2"] { top: 100vh; }
    .layers-stop[data-stop="3"] { top: 140vh; }

    /* The sticky stage that stays pinned while you scroll the track */
    .layers-stage {
      position: sticky;
      top: 0;
      height: 100vh;
      max-width: 1440px;
      margin: 0 auto;
      padding: 48px 32px;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: center;
      gap: 24px;
      /* Vertical clipping only — keeps the section from spilling above/
         below its 100vh sticky frame. Horizontal stays visible so the
         3D-rotated tile silhouette (whose bbox is ~518px wide for a
         384px tile, plus shadow) can extend into the stage's side
         margins without being chopped at narrower viewport widths.
         The body has overflow-x: clip globally, so this never causes
         horizontal page scrolling. */
      overflow-x: visible;
      overflow-y: hidden;
    }
    .layers-stage .layer-stack {
      /* Reset the old codepen-era .layer-stack absolute+rotate rules
         that still live earlier in this file. */
      position: static;
      top: auto;
      left: auto;
      transform: none;
      width: 100%;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 48px;
      align-items: center;
    }

    /* Left: the 3D stack visual */
    .layers-visual {
      position: relative;
    }
    .layers-visual .arch-scene {
      width: 100%;
      aspect-ratio: 1 / 1;
      perspective: 2400px;
      perspective-origin: 50% 45%;
      position: relative;
      overflow: visible;
    }
    .layers-visual .arch-stage {
      position: absolute;
      inset: 0;
      /* No preserve-3d — children are stacked by z-index, not 3D position.
         Stage's rotateX(54deg) is now baked into each tile's transform. */
    }

    /* Tile — fixed 480×480 square, anchored at center. All tiles show
       their full content at all times (active and inactive alike). The
       active tile is differentiated by a counter-rotation + heavier
       shadow + z-index lift so it reads as the front of the stack. */
    .layers-visual .layer-tile {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 384px;
      height: 384px;
      margin-left: -192px;
      margin-top: -192px;
      background: var(--white);
      border: 1px solid var(--cream-3);
      border-radius: 24px;
      /* Chunky 3D extrusion via a single offset box-shadow with spread.
         Naturally tracks the 24px border-radius.
         overflow: hidden ensures the active-bg + cover images clip to
         the rounded corners. Box-shadow renders outside the element
         regardless of overflow, so the extrusion is unaffected. */
      box-shadow: 24px 24px 0 8px var(--cream-3);
      padding: 0;
      cursor: pointer;
      appearance: none;
      font: inherit;
      color: inherit;
      text-align: left;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transition:
        transform 560ms cubic-bezier(.2,.7,.2,1),
        box-shadow 420ms ease;
    }

    .layers-visual .layer-tile:focus-visible {
      outline: 2px solid var(--primary-500);
      outline-offset: 4px;
    }

    /* Full content art — visible on all tiles (active and inactive
       alike). The tile-art fills the entire tile (no in-tile title
       strip — titles live in the left panel only).
       Background image: same soft pastel-grid for every layer.
       The ::after pseudo-element acts as the "cover" image (hexagon
       overlay) that's opaque on inactive tiles and fades to 0 on the
       active tile. */
    .layers-visual .tile-art {
      display: flex;
      flex: 1;
      padding: 32px;
      flex-direction: column;
      gap: 16px;
      background:
        url('/wp-content/themes/nousable/assets/images/layer-active-bg.webp')
        center / cover no-repeat,
        linear-gradient(135deg, rgba(167, 199, 240, 0.32) 0%, rgba(255, 213, 232, 0.32) 100%);
      font-family: var(--font);
      font-size: 14px;
      line-height: 1.4;
      color: var(--ink);
      position: relative;
      isolation: isolate;
    }
    /* Cover overlay — visible by default (inactive state), fades to 0
       on the active tile via the .is-active-N rule below. */
    .layers-visual .tile-art::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        url('/wp-content/themes/nousable/assets/images/layer-inactive-cover.webp')
        center / cover no-repeat;
      pointer-events: none;
      opacity: 1;
      transition: opacity 480ms cubic-bezier(.2,.7,.2,1);
      z-index: 10;
    }
    .layer-stack.is-active-1 .tile-1 .tile-art::after,
    .layer-stack.is-active-2 .tile-2 .tile-art::after,
    .layer-stack.is-active-3 .tile-3 .tile-art::after {
      opacity: 0;
    }
    /* When the tile-art hosts a .system-viz mockup, pin the viz to the
       tile-art content box absolutely. The tile is a fixed square, so
       inset:8px (matching the padding) gives the viz deterministic
       square dimensions on every viewport — no flex/aspect-ratio
       interaction, no max-width caps, no width:auto resolution. The
       100cqi container-query unit then tracks the exact viz width, so
       the inner 480×480 box scales and centers reliably. */
    .layers-visual .tile-art-viz {
      padding: 8px;
      position: relative;
    }
    .layers-visual .tile-art-viz .system-viz {
      position: absolute;
      inset: 8px;
    }

    /* Active tile — same size as inactive tiles; differentiation is via
       art content becoming visible + a heavier drop shadow. No size or
       margin changes here. */
    .layer-stack.is-active-1 .tile-1,
    .layer-stack.is-active-2 .tile-2,
    .layer-stack.is-active-3 .tile-3 {
      /* Active — same chunky extrusion as inactive (size doesn't change),
         keeps consistent block aesthetic. */
      box-shadow: 24px 24px 0 8px var(--cream-3);
    }
    /* Default z-index per tile: tile-1 highest, tile-3 lowest, so they
       overlap naturally as a stack (top tile in front). Active tile
       jumps to z-index 5 to draw above everything. */
    .layers-visual .tile-1 { z-index: 2; }
    .layers-visual .tile-2 { z-index: 1; }
    .layers-visual .tile-3 { z-index: 0; }
    .layer-stack.is-active-1 .tile-1,
    .layer-stack.is-active-2 .tile-2,
    .layer-stack.is-active-3 .tile-3 {
      z-index: 5;
    }

    /* Per-state stack positions — the dealer flow with same-size tiles.
       For each state N: tile-N is ACTIVE (separated from the piles);
       tiles < N form the discard pile (stacked tight above);
       tiles > N form the waiting pile (stacked tight below).
       Pile tiles use ~25px Z separation so only their top edge peeks.
       The ACTIVE tile also gets a partial counter-rotation of the stage
       (rotateX(54deg) rotateZ(-32deg)) so it tilts ~60% back toward the
       viewer, revealing its content without losing the 3D deck feel. */

    /* Per-state positions — single shared rotation, depth-only state diff:
       Every tile (active and inactive alike) has the SAME rotation —
       rotateX(-27deg) rotateY(-15deg) rotateZ(16deg) — so the entire
       stack reads as a set of parallel cards all facing the text panel
       on the left, like the reference.

       The only thing that differs between active and inactive is depth:
       - Active translateZ:  +180 (forward, draws in front)
       - Inactive translateZ: -30 (slightly back)

       Natural translateY slots: -130 / 0 / +130. Active gets +248 added
       to its slot to compensate the screen-Y lift from translateZ(+180),
       so the active stays parked in its slot. Inactive gets -41 added
       to compensate the slight shift from translateZ(-30). */

    /* Per-tile transforms — stage rotateX(54deg) is now BAKED into
       each tile's transform (since preserve-3d is gone). Inactive net
       rotation: rotateX(49) rotateY(-25) rotateZ(28). Active net
       rotation: rotateX(27) rotateY(-15) rotateZ(16). NO translateZ
       — order is controlled entirely by z-index now. */
    .layers-visual .tile-1 { transform: translateY(-150px) rotateX(49deg) rotateY(-25deg) rotateZ(28deg); }
    .layers-visual .tile-2 { transform: translateY(0)      rotateX(49deg) rotateY(-25deg) rotateZ(28deg); }
    .layers-visual .tile-3 { transform: translateY(150px)  rotateX(49deg) rotateY(-25deg) rotateZ(28deg); }

    /* Active state — less-tilted rotation, same slot, no translateZ */
    .layer-stack.is-active-1 .tile-1 { transform: translateY(-150px) rotateX(27deg) rotateY(-15deg) rotateZ(16deg); }
    .layer-stack.is-active-2 .tile-2 { transform: translateY(0)      rotateX(27deg) rotateY(-15deg) rotateZ(16deg); }
    .layer-stack.is-active-3 .tile-3 { transform: translateY(150px)  rotateX(27deg) rotateY(-15deg) rotateZ(16deg); }

    /* Right: text panel — all 4 stacked at same spot, only active visible */
    .layers-textpanel {
      position: relative;
      min-height: 420px;
    }
    .layers-textpanel .layer-panel {
      position: absolute;
      inset: 0;
      min-height: 0;            /* override old .layer-panel min-height: 78vh */
      padding: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transform: translateY(16px);
      transition: opacity 420ms ease, transform 420ms ease, visibility 0s linear 420ms;
    }
    .layer-stack.is-active-1 .layer-panel[data-layer="1"],
    .layer-stack.is-active-2 .layer-panel[data-layer="2"],
    .layer-stack.is-active-3 .layer-panel[data-layer="3"],
    .layer-stack.is-active-4 .layer-panel[data-layer="4"] {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      transition: opacity 420ms ease, transform 420ms ease, visibility 0s;
    }

    .panel-num {
      font-family: var(--font);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--accent-700);
      margin-bottom: 18px;
      display: inline-block;
    }
    .panel-heading {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(32px, 3.5vw, 52px);
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: var(--ink);
      margin: 0 0 20px;
    }
    .panel-heading em,
    .panel-heading .c { font-style: italic; color: var(--primary-500); }
    .panel-body {
      font-size: 17px;
      line-height: 1.65;
      color: var(--ink-3);
      margin: 0 0 28px;
    }
    .panel-bullets {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .panel-bullets li {
      font-size: 15px;
      color: var(--ink-2);
      padding-left: 24px;
      position: relative;
    }
    .panel-bullets li::before {
      content: "";
      position: absolute;
      left: 0; top: 9px;
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--primary-500);
    }

    /* Mobile: flatten to a non-sticky stack, interleaved tile → panel pairs.
       Tiles keep their original 1:1 aspect ratio. */
    @media (max-width: 900px) {
      .layers-track { height: auto; }
      .layers-stop { display: none; }
      .layers-stage {
        position: relative;
        height: auto;
        padding: 0 24px 64px;
      }
      /* On mobile JS moves each .layer-panel right after its matching
         .layer-tile inside .arch-stage. We just need to make all the
         wrappers flow naturally as a single vertical column. */
      .layers-stage .layer-stack {
        display: flex !important;
        flex-direction: column;
        gap: 24px;
        perspective: none;
      }
      .layers-visual {
        display: flex;
        flex-direction: column;
        gap: 32px;
      }
      .layers-visual .arch-scene {
        perspective: none;
        aspect-ratio: auto;
        height: auto;
      }
      .layers-visual .arch-stage {
        position: relative;
        inset: auto;
        transform: none;
        display: flex;
        flex-direction: column;
        gap: 32px;
      }
      /* When mobile-stacked: .layers-textpanel is empty (panels moved out) */
      .layer-stack.is-mobile-stacked .layers-textpanel { display: none; }

      /* Tile reset: each tile carries its OWN perspective via the
         transform function, so every tile is viewed from the same eye
         position — all three render with identical perspective regardless
         of their position in the column. */
      .layers-visual .layer-tile {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 320px;
        height: auto !important;
        margin: 0 auto !important;
        aspect-ratio: 1 / 1;
        transform: perspective(1200px) rotateX(27deg) rotateY(-15deg) rotateZ(16deg) !important;
        transform-style: preserve-3d;
        transform-origin: 50% 50%;
        box-shadow: 18px 18px 0 6px var(--cream-3);
        transition: transform 560ms cubic-bezier(.2,.7,.2,1), box-shadow 420ms ease;
      }
      .layer-stack.is-active-1 .tile-1,
      .layer-stack.is-active-2 .tile-2,
      .layer-stack.is-active-3 .tile-3 {
        transform: perspective(1200px) rotateX(27deg) rotateY(-15deg) rotateZ(16deg) !important;
        height: auto !important;
        margin-top: 0 !important;
        box-shadow: 18px 18px 0 6px var(--cream-3);
      }
      .system-layers .layers-textpanel { min-height: auto; }
      /* Panels inside arch-stage (moved by JS) OR still in layers-textpanel */
      .layer-stack.is-mobile-stacked .layer-panel {
        position: relative !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-width: 480px;
        margin: 0 auto;
        padding: 0 4px;
        transition: none !important;
      }
      .layers-textpanel .layer-panel .panel-num {
        display: inline-block;
        font-family: var(--font);
        font-size: var(--wp--preset--font-size--sm);
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--ink-3);
        margin-bottom: 8px;
      }
      .layers-textpanel .layer-panel .panel-heading {
        font-family: var(--serif);
        font-size: var(--wp--preset--font-size--2xl);
        font-weight: 400;
        line-height: 1.15;
        letter-spacing: -0.4px;
        color: var(--ink);
        margin: 0 0 12px;
      }
      .layers-textpanel .layer-panel .panel-heading em {
        font-style: italic;
        color: var(--primary-500);
      }
      .layers-textpanel .layer-panel .panel-body {
        font-family: var(--font);
        font-size: var(--wp--preset--font-size--md);
        line-height: 1.6;
        color: var(--ink-3);
        margin: 0 0 16px;
      }
      .layers-textpanel .layer-panel .panel-bullets {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .layers-textpanel .layer-panel .panel-bullets li {
        font-family: var(--font);
        font-size: var(--wp--preset--font-size--sm);
        line-height: 1.45;
        color: var(--ink-2);
        padding-left: 16px;
        position: relative;
      }
      .layers-textpanel .layer-panel .panel-bullets li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.55em;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--primary-500);
      }
      /* Always-open: hide the inactive cover entirely */
      .layers-visual .tile-art::after { opacity: 0; }

      /* Interleave order — tile1 → panel1 → tile2 → panel2 → tile3 → panel3 */
      .layer-tile[data-layer="1"]  { order: 1; }
      .layer-panel[data-layer="1"] { order: 2; }
      .layer-tile[data-layer="2"]  { order: 3; }
      .layer-panel[data-layer="2"] { order: 4; }
      .layer-tile[data-layer="3"]  { order: 5; }
      .layer-panel[data-layer="3"] { order: 6; }

      .system-layers-header { order: 0; margin-bottom: 16px; }

      /* ── For Learning Teams: scroll-snap carousel ─────────────────── */
      #teams .teams-grid {
        display: flex !important;
        flex-direction: row;
        grid-template-columns: none !important;
        gap: 16px;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 20px;
        scroll-behavior: smooth;
        /* Bleed past the .container's 20px padding so cards can slide
           edge-to-edge while the rest of the section stays aligned. */
        margin-inline: calc(-1 * 20px);
        padding: 4px 20px 20px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        overscroll-behavior-x: contain;
      }
      #teams .teams-grid::-webkit-scrollbar { display: none; }

      #teams .team-card-v {
        flex: 0 0 calc(100% - 56px);
        max-width: 320px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
      }
      #teams .team-card-v:focus-visible {
        outline: 2px solid var(--primary-500);
        outline-offset: 4px;
      }
      @media (prefers-reduced-motion: reduce) {
        #teams .teams-grid { scroll-behavior: auto; }
      }
    }

    /* ========================================================================
       SYSTEM LAYERS — light theme + always-visible list layout
       Section background is cream. The right-panel "single active visible"
       layout is replaced by a four-row list on the LEFT (all four labels
       visible at once, non-active rows dimmed). The 3D tile stack sits on
       the RIGHT. A small connector line on the active list row points at
       the stack. Uses only design-system tokens — no hardcoded colors.
       ======================================================================== */
    .system-layers {
      background:
        radial-gradient(circle at bottom left,  #F7E8F7 0%, transparent 32%),
        radial-gradient(circle at bottom right, #DDF8FF 0%, transparent 38%),
        linear-gradient(180deg, #F8FBFF 0%, #F3F6FD 40%, #EDF4FF 100%);
    }

    /* Header (already ink/ink-3 by default — explicit for safety) */
    .system-layers .section-eyebrow { color: var(--ink-3); }
    .system-layers .layers-headline {
      color: var(--ink);
      font-family: var(--serif);
      font-size: clamp(32px, 3.5vw, 52px);
      font-weight: 400;
      line-height: 1.1;
      letter-spacing: -0.02em;
      margin: 0;
    }
    .system-layers .layers-headline em { color: var(--primary-500); }
    .system-layers .layers-sub { color: var(--ink-3); }
    .system-layers .layers-learn-more {
      margin-top: 8px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      align-self: flex-start;
      width: fit-content;
    }

    /* Grid order — text list left (order 1), stack right (order 2) */
    .system-layers .layers-visual    { order: 2; }
    .system-layers .layers-textpanel { order: 1; }

    /* The list of 4 panels stacks vertically; ALL panels are visible at
       once. The active panel reads at full ink; inactive panels dim so
       the eye follows the active label. */
    .system-layers .layers-textpanel {
      position: relative;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 36px;
    }
    .system-layers .layers-textpanel .layer-panel {
      position: relative;          /* overrides the absolute inset:0 stacking */
      inset: auto;
      opacity: 0.35;
      transform: none;
      visibility: visible;
      transition: opacity 360ms ease;
    }
    .system-layers .layer-stack.is-active-1 .layer-panel[data-layer="1"],
    .system-layers .layer-stack.is-active-2 .layer-panel[data-layer="2"],
    .system-layers .layer-stack.is-active-3 .layer-panel[data-layer="3"] {
      opacity: 1;
      transform: none;
    }

    /* Each row is more compact — smaller heading, no large clamp() */
    .system-layers .panel-num {
      font-size: 11px;
      margin-bottom: 8px;
      color: var(--accent-700);
    }
    .system-layers .panel-heading {
      font-size: clamp(20px, 1.5vw, 26px);
      margin: 0 0 10px;
      color: var(--ink);
    }
    .system-layers .panel-heading em { color: var(--ink-3); }
    .system-layers .panel-body {
      font-size: 14.5px;
      line-height: 1.55;
      margin: 0 0 12px;
      color: var(--ink-3);
    }
    .system-layers .panel-bullets {
      gap: 6px;
    }
    .system-layers .panel-bullets li {
      font-size: 13px;
      color: var(--ink-2);
    }

    /* Inactive panels show only num + heading. Body + bullets collapse;
       the active panel reveals them. */
    .system-layers .layers-textpanel .layer-panel .panel-body,
    .system-layers .layers-textpanel .layer-panel .panel-bullets {
      display: none;
    }
    .system-layers .layer-stack.is-active-1 .layer-panel[data-layer="1"] .panel-body,
    .system-layers .layer-stack.is-active-2 .layer-panel[data-layer="2"] .panel-body,
    .system-layers .layer-stack.is-active-3 .layer-panel[data-layer="3"] .panel-body {
      display: block;
    }
    .system-layers .layer-stack.is-active-1 .layer-panel[data-layer="1"] .panel-bullets,
    .system-layers .layer-stack.is-active-2 .layer-panel[data-layer="2"] .panel-bullets,
    .system-layers .layer-stack.is-active-3 .layer-panel[data-layer="3"] .panel-bullets {
      display: flex;
    }

    /* Connector line — only the ACTIVE panel draws it. A thin horizontal
       rule that extends from the panel's right edge well into the stack
       column, anchoring the text label to the active tile visually. */
    .system-layers .layers-textpanel .layer-panel::after {
      content: "";
      position: absolute;
      top: 26px;
      right: -48px;
      width: 0;
      height: 1px;
      background: var(--ink-4);
      transition: width 360ms ease 60ms;
      pointer-events: none;
    }
    .system-layers .layer-stack.is-active-1 .layer-panel[data-layer="1"]::after,
    .system-layers .layer-stack.is-active-2 .layer-panel[data-layer="2"]::after,
    .system-layers .layer-stack.is-active-3 .layer-panel[data-layer="3"]::after {
      width: clamp(80px, 14vw, 200px);
    }

    /* Tiles — each gets its own surface via design-system tokens. Tile 1
       reads as the lightest top of the stack; tiles 2 and 3 add depth
       with accent tints. All on the cream section so contrast holds. */
    .system-layers .layers-visual .layer-tile {
      box-shadow: var(--sh-card);
    }
    .system-layers .layers-visual .tile-1 { background: var(--white); }
    .system-layers .layers-visual .tile-2 { background: var(--accent-50); }
    .system-layers .layers-visual .tile-3 { background: var(--accent-100); }

    /* Active tile lift shadow — neutral warm */
    .system-layers .layer-stack.is-active-1 .tile-1,
    .system-layers .layer-stack.is-active-2 .tile-2,
    .system-layers .layer-stack.is-active-3 .tile-3 {
      box-shadow: var(--sh-lift);
    }

    /* ========================================================================
       LEARNER EXPERIENCE — homepage section (replaces old "AI Avatar" tile)
       Light theme. Scoped under .learner-experience to prevent cascade leaks.
       Layout: centered header + 2-row asymmetric zigzag grid (62/38 row 1,
       38/62 row 2). Each card uses the glassy palette (cream surfaces +
       brand -50 tints + status -bg colors). No backdrop-filter blur, no
       hardcoded hex.
       ======================================================================== */
    .learner-experience {
      background: var(--cream);
      padding: 120px 48px 96px;
    }
    .learner-experience .le-inner {
      max-width: 1280px;
      margin: 0 auto;
    }

    /* Header */
    .learner-experience .le-header {
      text-align: center;
      max-width: 760px;
      margin: 0 auto 64px;
    }
    .learner-experience .section-eyebrow { color: var(--ink-3); }
    .learner-experience .le-headline {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(32px, 3.5vw, 52px);
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: var(--ink);
      margin: 16px 0 0;
    }
    .learner-experience .le-headline em,
    .learner-experience .le-headline .c {
      font-style: italic;
      color: var(--primary-500);
    }
    .learner-experience .le-sub {
      font-family: var(--font);
      font-size: 17px;
      line-height: 1.55;
      color: var(--ink-3);
      margin: 16px auto 0;
      max-width: 600px;
    }

    /* Grid — two rows of 2 cards each, with reversed proportions */
    .learner-experience .le-grid {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }
    .learner-experience .le-grid-row {
      display: grid;
      gap: 24px;
    }
    .learner-experience .le-grid-row-top    { grid-template-columns: 62fr 38fr; }
    .learner-experience .le-grid-row-bottom { grid-template-columns: 38fr 62fr; }

    /* Card base */
    .learner-experience .le-card {
      position: relative;
      background: var(--white);
      border: 1px solid var(--border-soft);
      border-radius: var(--r-md);
      box-shadow: var(--sh-card);
      display: flex;
      flex-direction: column;
      min-height: 520px;
      overflow: hidden;
      transition: box-shadow 280ms var(--ease-out), transform 280ms var(--ease-out);
    }
    .learner-experience .le-card:hover {
      box-shadow: var(--sh-lift);
      transform: translateY(-2px);
    }

    /* Graphic area (top ~62%) — relative, holds glow + mockup */
    .learner-experience .le-card-graphic {
      position: relative;
      flex: 1 1 auto;
      padding: 36px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 14px;
      min-height: 0;
      overflow: hidden;
    }

    /* Corner glow — radial gradient using -50 brand tints (the "glassy"
       low-saturation pastels). Sits behind the mockup. */
    .learner-experience .le-card-glow {
      position: absolute;
      width: 320px;
      height: 320px;
      border-radius: 50%;
      pointer-events: none;
      filter: blur(var(--blur-glow));
      opacity: 0.85;
      z-index: 0;
    }
    .learner-experience .le-card-glow-tr { top: -120px; right: -120px; }
    .learner-experience .le-card-glow-tl { top: -120px; left: -120px; }
    .learner-experience .le-card-glow-blue { background: var(--primary-50); }
    .learner-experience .le-card-glow-pink { background: var(--accent-50); }

    /* Make sure mockup content sits above the glow */
    .learner-experience .le-card-graphic > *:not(.le-card-glow) {
      position: relative;
      z-index: 1;
    }

    /* Image-mode graphic: photo fills the area edge-to-edge. */
    .learner-experience .le-card-graphic.has-image {
      padding: 0;
    }
    .learner-experience .le-card-graphic.has-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* Divider + body */
    .learner-experience .le-card-divider {
      height: 1px;
      background: var(--border-soft);
      margin: 0 36px;
      flex-shrink: 0;
    }
    .learner-experience .le-card-body {
      padding: 28px 36px 32px;
      flex-shrink: 0;
    }
    .learner-experience .le-card-title {
      font-family: var(--serif);
      font-weight: 400;
      font-size: 24px;
      line-height: 1.25;
      letter-spacing: -0.3px;
      color: var(--ink);
      margin: 0 0 10px;
    }
    .learner-experience .le-card-title em {
      font-style: italic;
      color: var(--primary-500);
    }
    .learner-experience .le-card-desc {
      font-family: var(--font);
      font-size: 16px;
      line-height: 1.55;
      color: var(--ink-3);
      margin: 0;
    }

    /* ── 3-tile layout (Layer 01 · Capture) ──────────────────────────
       Hero image card + compact graphic card on top row, full-width
       horizontal card below. Placeholders are visible until real
       assets land — see .placeholder styles below. */
    .learner-experience .le-grid-3up { gap: 24px; }
    .learner-experience .le-grid-3up .le-grid-row-top {
      grid-template-columns: 62fr 38fr;
      align-items: stretch;
    }

    /* Tile 1 — Hero: image fills the tile, dark gradient bottom, white text overlay */
    .learner-experience .le-card-hero {
      border-radius: var(--r-3xl, 32px);
      min-height: 600px;
      justify-content: flex-end;
      color: var(--white);
      background: var(--cream-2);
    }
    .learner-experience .le-card-hero .le-card-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
    }
    /* Real image graphic — flush to its card edges (no inner wrapper
       padding, no inner background). The images themselves carry their
       own composition + soft backgrounds, so the wrapper just acts as
       the bounding box. */
    .learner-experience .le-card-graphic-img {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .learner-experience .le-card-graphic-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .learner-experience .le-card-compact .le-card-graphic-img {
      flex: 1 1 auto;
    }
    .learner-experience .le-card-horizontal .le-card-graphic-img {
      width: 478px;
      max-width: 45%;
      align-self: stretch;
      flex-shrink: 0;
    }
    .learner-experience .le-card-hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 65%, rgba(0,0,0,.92) 100%);
      z-index: 1;
      pointer-events: none;
    }
    .learner-experience .le-card-hero .le-card-body {
      position: relative;
      z-index: 2;
      padding: 56px 56px 48px;
    }
    .learner-experience .le-card-body-inverse .le-card-title {
      font-family: var(--serif);
      font-weight: 400;
      color: var(--white);
      font-size: 36px;
      letter-spacing: -0.5px;
    }
    .learner-experience .le-card-body-inverse .le-card-title em {
      font-style: italic;
      color: var(--primary-300);
    }
    .learner-experience .le-card-body-inverse .le-card-desc {
      color: rgba(255,255,255,0.85);
      font-size: 18px;
    }

    /* Tile 2 — Compact: graphic on top half, text on bottom half.
       Image fills edge-to-edge (no card padding around it). */
    .learner-experience .le-card-compact {
      border-radius: var(--r-3xl, 32px);
      min-height: 600px;
      padding: 0;
      justify-content: flex-end;
    }
    .learner-experience .le-card-compact .placeholder {
      flex: 1 1 auto;
    }
    .learner-experience .le-card-compact .le-card-body {
      padding: 32px 40px 40px;
    }

    /* Tile 3 — Horizontal: graphic left, text right, full-width.
       Image fills its half edge-to-edge. */
    .learner-experience .le-card-horizontal {
      border-radius: var(--r-3xl, 32px);
      min-height: 320px;
      flex-direction: row;
      align-items: stretch;
      gap: 0;
      padding: 0;
      background: linear-gradient(90deg, rgba(91,126,245,0.06), rgba(255,39,167,0.06));
    }
    .learner-experience .le-card-horizontal .placeholder {
      width: 478px;
      max-width: 45%;
      flex-shrink: 0;
      align-self: stretch;
    }
    .learner-experience .le-card-horizontal .le-card-body {
      flex: 1 1 auto;
      padding: 32px 40px;
      align-self: center;
    }

    /* Placeholder treatment — visible-but-quiet block with a label,
       so the user can spot where real imagery goes. */
    .learner-experience .placeholder {
      position: relative;
      background:
        linear-gradient(135deg, rgba(20,19,16,0.04), rgba(20,19,16,0.08)),
        var(--cream-2);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .learner-experience .placeholder::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        repeating-linear-gradient(45deg,
          rgba(20,19,16,0.04) 0,
          rgba(20,19,16,0.04) 1px,
          transparent 1px,
          transparent 12px);
      pointer-events: none;
    }
    .learner-experience .placeholder-label {
      position: relative;
      z-index: 1;
      font-family: var(--font);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      color: var(--ink-3);
      padding: 6px 12px;
      background: rgba(255,255,255,0.85);
      border-radius: var(--r-full);
      border: 1px solid var(--border-soft);
    }
    /* Hero image placeholder — slightly darker so the white text overlay reads */
    .learner-experience .placeholder-image {
      background:
        linear-gradient(135deg, rgba(20,19,16,0.18), rgba(20,19,16,0.32)),
        var(--cream-3);
    }
    .learner-experience .placeholder-image .placeholder-label {
      background: rgba(255,255,255,0.92);
    }

    @media (max-width: 900px) {
      .learner-experience .le-grid-3up .le-grid-row-top {
        grid-template-columns: 1fr;
      }
      /* Hero tile on mobile flips to image-on-top, text-below — same
         layout family as the Layer 3 cards (no overlay, dark text on
         light background). */
      .learner-experience .le-card-hero {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        min-height: 0;
        color: inherit;
      }
      .learner-experience .le-card-hero .le-card-bg {
        position: relative;
        inset: auto;
        width: 100%;
        height: 240px;
        object-fit: cover;
      }
      .learner-experience .le-card-hero .le-card-hero-overlay { display: none; }
      .learner-experience .le-card-hero .le-card-body { padding: 24px 24px 32px; }
      .learner-experience .le-card-body-inverse .le-card-title {
        color: var(--ink);
        font-size: 24px;
      }
      .learner-experience .le-card-body-inverse .le-card-title em {
        color: var(--primary-500);
      }
      .learner-experience .le-card-body-inverse .le-card-desc {
        color: var(--ink-3);
        font-size: 15px;
      }
      .learner-experience .le-card-compact { min-height: 0; }
      .learner-experience .le-card-horizontal {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
      }
      .learner-experience .le-card-horizontal .placeholder,
      .learner-experience .le-card-horizontal .le-card-graphic-img {
        width: 100%;
        max-width: 100%;
        height: 240px;
      }
      .learner-experience .le-card-horizontal .le-card-body { padding: 24px 24px 32px; }
    }

    /* Each tile uses a structurally distinct composition. All four reuse
       the brand-tinted glow + skeleton vocabulary, but the visualization
       inside is unique per tile. Inspired by demo screenshots of the
       product UI (context signal / learner interests / urgency scoring /
       skill node graph). */

    /* ------- TILE A: Context Signal classifier ------- */
    .learner-experience .le-context {
      display: flex;
      flex-direction: column;
      gap: 18px;
      width: 100%;
    }
    .learner-experience .le-context-quote {
      font-family: var(--serif);
      font-style: italic;
      font-size: 17px;
      line-height: 1.45;
      color: var(--ink-3);
      margin: 0;
      padding: 0 4px;
    }
    .learner-experience .le-context-quote-hl {
      color: var(--primary-500);
      text-decoration: underline;
      text-decoration-color: var(--primary-500);
      text-underline-offset: 4px;
      text-decoration-thickness: 1.5px;
      font-style: italic;
      font-weight: 500;
    }
    .learner-experience .le-context-card {
      background: var(--surface-glass);
      backdrop-filter: blur(var(--blur-panel)) saturate(140%);
      -webkit-backdrop-filter: blur(var(--blur-panel)) saturate(140%);
      border: 1px solid var(--surface-glass-border);
      border-radius: var(--r-sm);
      padding: 18px 20px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      box-shadow: var(--sh-card);
    }
    .learner-experience .le-context-head {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .learner-experience .le-context-icon {
      width: 18px;
      height: 18px;
      border-radius: var(--r-xs);
      background: var(--primary-500);
      flex-shrink: 0;
      position: relative;
    }
    .learner-experience .le-context-icon::after {
      content: "";
      position: absolute;
      inset: 4px;
      background: var(--primary-50);
      border-radius: var(--r-2xs);
    }
    .learner-experience .le-context-eyebrow {
      font-family: var(--font);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--primary-500);
    }
    .learner-experience .le-context-title {
      font-family: var(--serif);
      font-weight: 700;
      font-size: 22px;
      line-height: 1.1;
      color: var(--ink);
      margin: 4px 0 2px;
    }
    .learner-experience .le-context-pill {
      display: inline-flex;
      align-items: center;
      padding: 5px 14px;
      background: var(--primary-50);
      color: var(--primary-700);
      border-radius: var(--r-full);
      font-family: var(--font);
      font-size: 12.5px;
      font-weight: 700;
      width: fit-content;
    }
    .learner-experience .le-context-sub {
      font-family: var(--font);
      font-size: 13px;
      color: var(--ink-3);
      margin: 0;
      line-height: 1.4;
    }
    .learner-experience .le-context-mono {
      font-family: var(--font);
      font-size: 11px;
      color: var(--ink-4);
      margin: 4px 0 0;
      letter-spacing: 0.02em;
    }

    /* ------- TILE B: Topic extraction list ------- */
    .learner-experience .le-extract {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
    }
    .learner-experience .le-extract-head {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .learner-experience .le-extract-bar {
      width: 3px;
      height: 14px;
      background: var(--accent-500);
      border-radius: var(--r-2xs);
    }
    .learner-experience .le-extract-title {
      font-family: var(--font);
      font-weight: 700;
      font-size: 15px;
      color: var(--accent-500);
    }
    .learner-experience .le-extract-tag {
      font-family: var(--font);
      font-size: 10px;
      font-weight: 600;
      padding: 2px 8px;
      background: var(--cream-3);
      color: var(--ink-3);
      border-radius: var(--r-full);
    }
    .learner-experience .le-extract-sub {
      font-family: var(--font);
      font-size: 11.5px;
      color: var(--ink-4);
      margin: 0 0 4px;
      letter-spacing: 0.01em;
    }
    .learner-experience .le-extract-rows {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .learner-experience .le-extract-row {
      display: grid;
      grid-template-columns: 1fr auto auto;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      background: var(--surface-glass);
      backdrop-filter: blur(var(--blur-panel)) saturate(140%);
      -webkit-backdrop-filter: blur(var(--blur-panel)) saturate(140%);
      border: 1px solid var(--surface-glass-border);
      border-radius: var(--r-sm);
      box-shadow: var(--sh-card);
    }
    .learner-experience .le-extract-quote {
      font-family: var(--serif);
      font-style: italic;
      font-size: 12.5px;
      color: var(--ink-3);
      line-height: 1.35;
    }
    .learner-experience .le-extract-topic {
      font-family: var(--font);
      font-weight: 700;
      font-size: 12.5px;
      color: var(--accent-500);
      white-space: nowrap;
    }
    .learner-experience .le-extract-chip {
      font-family: var(--font);
      font-size: 9.5px;
      font-weight: 600;
      padding: 2px 7px;
      background: var(--accent-50);
      color: var(--accent-700);
      border-radius: var(--r-full);
      letter-spacing: 0.02em;
    }
    .learner-experience .le-extract-row-sk {
      grid-template-columns: 1fr 60px;
      gap: 12px;
    }
    .learner-experience .le-extract-sk-quote { flex: 1; }
    .learner-experience .le-extract-sk-topic { width: 60px; }

    /* ------- TILE C: Urgency Scoring ------- */
    .learner-experience .le-urgency {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
    }
    .learner-experience .le-urgency-head {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .learner-experience .le-urgency-title {
      font-family: var(--font);
      font-weight: 700;
      font-size: 14px;
      color: var(--ink);
    }
    .learner-experience .le-urgency-formula {
      font-family: var(--font);
      font-size: 10px;
      color: var(--ink-4);
      letter-spacing: 0.02em;
    }
    .learner-experience .le-urgency-row {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 14px;
      background: var(--surface-glass);
      backdrop-filter: blur(var(--blur-panel)) saturate(140%);
      -webkit-backdrop-filter: blur(var(--blur-panel)) saturate(140%);
      border: 1px solid var(--surface-glass-border);
      border-radius: var(--r-sm);
      box-shadow: var(--sh-card);
    }
    .learner-experience .le-urgency-row-top {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .learner-experience .le-urgency-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      background: var(--amber-bg);
      color: var(--amber);
      border-radius: var(--r-xs);
      font-family: var(--font);
      font-weight: 700;
      font-size: 11px;
      flex-shrink: 0;
    }
    .learner-experience .le-urgency-skill {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .learner-experience .le-urgency-name {
      font-family: var(--font);
      font-weight: 700;
      font-size: 14px;
      color: var(--ink);
      line-height: 1.2;
    }
    .learner-experience .le-urgency-cat {
      font-family: var(--font);
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-4);
      margin-top: 1px;
    }
    .learner-experience .le-urgency-score {
      font-family: var(--serif);
      font-weight: 700;
      font-size: 24px;
      line-height: 1;
      color: var(--amber);
      font-variant-numeric: tabular-nums;
    }
    .learner-experience .le-urgency-bar {
      width: 100%;
      height: 2px;
      background: var(--cream-3);
      border-radius: var(--r-2xs);
      overflow: hidden;
    }
    .learner-experience .le-urgency-bar-fill {
      display: block;
      height: 100%;
      background: var(--amber);
      border-radius: var(--r-2xs);
    }
    .learner-experience .le-urgency-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 4px;
    }
    .learner-experience .le-urgency-stat {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 7px 4px;
      background: var(--surface-glass-strong);
      backdrop-filter: blur(var(--blur-control));
      -webkit-backdrop-filter: blur(var(--blur-control));
      border: 1px solid var(--surface-glass-border);
      border-radius: var(--r-xs);
    }
    .learner-experience .le-urgency-stat-val {
      font-family: var(--font);
      font-weight: 700;
      font-size: 11.5px;
      color: var(--ink);
      font-variant-numeric: tabular-nums;
    }
    .learner-experience .le-urgency-stat-label {
      font-family: var(--font);
      font-size: 8.5px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-4);
    }
    .learner-experience .le-urgency-row-sk {
      padding: 12px 14px;
    }
    .learner-experience .le-urgency-badge-sk {
      background: var(--cream-3);
      color: var(--ink-4);
    }
    .learner-experience .le-urgency-sk-fill { flex: 1; }
    .learner-experience .le-urgency-score-sk {
      font-family: var(--serif);
      font-size: 18px;
      color: var(--ink-4);
      font-weight: 700;
    }

    /* ------- TILE D: Skill node constellation ------- */
    .le-graph {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: 240px;
    }
    /* When used inside the architecture pattern (fixed-size square parent),
       fill the whole square so the constellation centers in the middle.
       Use absolute+inset because height:100% doesn't resolve reliably
       when the parent's height comes from aspect-ratio alone. */
    .stack-card-visual.viz-graph .le-graph {
      position: absolute;
      inset: 0;
      width: auto;
      height: auto;
      min-height: 0;
    }
    .le-graph-lines {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
    }
    .le-graph-line {
      fill: none;
      stroke-width: 1.5;
      stroke-linecap: round;
    }
    .le-graph-line-primary { stroke: var(--primary-500); opacity: 0.55; }
    .le-graph-line-sk      { stroke: var(--cream-3); stroke-dasharray: 3 4; }
    /* Legacy aliases (kept so other patterns that haven't migrated yet still work) */
    .le-graph-line-green   { stroke: var(--primary-500); opacity: 0.55; }
    .le-graph-line-amber   { stroke: var(--primary-500); opacity: 0.55; }

    .le-graph-center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      z-index: 2;
    }
    .le-graph-avatar {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: var(--primary-500);
      color: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--serif);
      font-weight: 700;
      font-size: 20px;
      box-shadow: var(--sh-ring);
    }
    .le-graph-name {
      font-family: var(--font);
      font-size: 10.5px;
      color: var(--ink-3);
      font-weight: 500;
      letter-spacing: 0.02em;
    }

    .le-graph-node {
      position: absolute;
      padding: 10px 12px;
      background: var(--surface-glass-strong);
      backdrop-filter: blur(var(--blur-control)) saturate(140%);
      -webkit-backdrop-filter: blur(var(--blur-control)) saturate(140%);
      border: 1px solid var(--surface-glass-border);
      border-radius: var(--r-sm);
      display: flex;
      flex-direction: column;
      gap: 7px;
      box-shadow: var(--sh-card);
      z-index: 1;
    }
    /* Named signal nodes — both sized identically so the layout reads as a
       balanced cross. Skeleton nodes use the same surface but slightly
       narrower so the named signals pop more. */
    .le-graph-node-named { width: 140px; }
    .le-graph-node-sk    { width: 110px; padding: 10px 12px; }

    /* Legacy class aliases for backwards-compat — neutralized so the old
       green/amber border colors no longer apply. */
    .le-graph-node-ready,
    .le-graph-node-building { border-color: var(--surface-glass-border); }
    .le-graph-node-tl { top: 8%;    left: 4%; }
    .le-graph-node-tr { top: 8%;    right: 4%; }
    .le-graph-node-bl { bottom: 8%; left: 4%; }
    .le-graph-node-br { bottom: 8%; right: 4%; }

    /* Vertical student ID card for the constellation center — avatar on top,
       name + level + role below, then skeleton "stats being computed" at the
       bottom. Used inside .le-graph-center. */
    .le-graph-student {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 18px 22px 16px;
      background: var(--surface-glass-strong);
      backdrop-filter: blur(var(--blur-control)) saturate(140%);
      -webkit-backdrop-filter: blur(var(--blur-control)) saturate(140%);
      border: 1px solid var(--surface-glass-border);
      border-radius: var(--r-md);
      box-shadow: var(--sh-card);
      width: 190px;
      text-align: center;
    }
    .le-graph-student-avatar {
      width: 56px;
      height: 56px;
      border-radius: var(--r-full);
      background: var(--primary-500);
      color: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font);
      font-weight: 700;
      font-size: 20px;
      flex-shrink: 0;
      box-shadow: var(--sh-ring);
      margin-bottom: 4px;
    }
    .le-graph-student-name {
      font-family: var(--font);
      font-weight: 700;
      font-size: 15px;
      color: var(--ink);
      line-height: 1.2;
    }
    .le-graph-student-meta {
      font-family: var(--font);
      font-size: 12px;
      font-weight: 500;
      color: var(--ink-3);
    }
    .le-graph-student-tag {
      font-family: var(--font);
      font-size: 10.5px;
      color: var(--ink-4);
      letter-spacing: 0.04em;
    }
    .le-graph-student-stats {
      width: 100%;
      margin-top: 8px;
      padding-top: 10px;
      border-top: 1px solid var(--border-soft);
    }
    .le-graph-student-stats .orch-skeleton {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .le-graph-node-head {
      display: flex;
      align-items: center;
      gap: 7px;
    }
    .le-graph-node-mark {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      font-size: 9px;
      font-weight: 700;
      color: var(--white);
      flex-shrink: 0;
    }
    .le-graph-node-ready .le-graph-node-mark    { background: var(--green); }
    .le-graph-node-building .le-graph-node-mark { background: var(--amber); }
    .le-graph-node-title {
      font-family: var(--font);
      font-weight: 700;
      font-size: 11.5px;
      color: var(--ink);
      letter-spacing: 0.01em;
    }
    .le-graph-node-bars {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .le-graph-bar {
      display: grid;
      grid-template-columns: 10px 1fr 18px;
      gap: 6px;
      align-items: center;
      font-family: var(--font);
      font-size: 9.5px;
    }
    .le-graph-bar-label {
      font-weight: 700;
      color: var(--ink-4);
    }
    .le-graph-bar-track {
      height: 4px;
      background: var(--cream-2);
      border-radius: var(--r-2xs);
      overflow: hidden;
    }
    .le-graph-bar-track span {
      display: block;
      height: 100%;
      border-radius: var(--r-2xs);
      background: var(--primary-500);
    }
    .le-graph-bar-val {
      font-weight: 700;
      color: var(--ink);
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    /* Reveal-on-scroll motion — staggered fade-up on viewport entry */
    @media (prefers-reduced-motion: no-preference) {
      .learner-experience .le-card {
        opacity: 0;
        transform: translateY(20px);
        animation: le-card-in 700ms var(--ease-out) forwards;
      }
      .learner-experience .le-tile-a { animation-delay: 80ms; }
      .learner-experience .le-tile-b { animation-delay: 160ms; }
      .learner-experience .le-tile-c { animation-delay: 240ms; }
      .learner-experience .le-tile-d { animation-delay: 320ms; }
      @keyframes le-card-in {
        to { opacity: 1; transform: translateY(0); }
      }
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .learner-experience { padding: 80px 32px 64px; }
      .learner-experience .le-grid-row-top,
      .learner-experience .le-grid-row-bottom {
        grid-template-columns: 1fr;
      }
      .learner-experience .le-card { min-height: 0; }
    }
    @media (max-width: 640px) {
      .learner-experience { padding: 64px 20px 48px; }
      .learner-experience .le-card-graphic { padding: 28px; }
      .learner-experience .le-card-divider { margin: 0 28px; }
      .learner-experience .le-card-body { padding: 24px 28px 28px; }
      .learner-experience .le-card-title { font-size: 22px; }
      .learner-experience .le-state-row { flex-wrap: wrap; gap: 8px 12px; }
      .learner-experience .le-state-value { font-size: 15px; }
    }

    /* ========================================================================
       Videocall mockup — used in Tile D (Readiness). Mini Zoom-style window
       with avatar, caption, and call controls. Same glass+shadow surface
       treatment as every other tile graphic.
       ======================================================================== */
    .le-videocall {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .le-videocall-frame {
      background: var(--surface-glass);
      backdrop-filter: blur(var(--blur-panel)) saturate(140%);
      -webkit-backdrop-filter: blur(var(--blur-panel)) saturate(140%);
      border: 1px solid var(--surface-glass-border);
      border-radius: var(--r-md);
      box-shadow: var(--sh-card);
      padding: 18px;
      width: 100%;
      max-width: 380px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .le-videocall-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .le-videocall-status {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-family: var(--font);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--accent-700);
    }
    .le-videocall-status-dot {
      width: 7px;
      height: 7px;
      border-radius: var(--r-full);
      background: var(--accent-500);
      animation: le-vc-pulse 1.8s ease-in-out infinite;
    }
    @keyframes le-vc-pulse {
      0%, 100% { box-shadow: 0 0 0 0 var(--accent-50); }
      50%      { box-shadow: 0 0 0 5px var(--accent-50); }
    }
    .le-videocall-time {
      font-family: var(--font);
      font-size: 11px;
      font-weight: 600;
      color: var(--ink-3);
      font-variant-numeric: tabular-nums;
    }
    .le-videocall-stage {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 14px;
      padding: 8px 0 4px;
    }
    .le-videocall-avatar {
      width: 120px;
      height: 120px;
      border-radius: var(--r-full);
      background: var(--primary-500);
      color: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      overflow: hidden;
      box-shadow: var(--sh-ring);
    }
    .le-videocall-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    /* Talk blob — chat bubble shape with a small tail pointing toward the avatar.
       The ::before pseudo creates the triangular pointer on the left side. */
    .le-videocall-blob {
      position: relative;
      flex: 1 1 auto;
      background: var(--surface-glass-strong);
      backdrop-filter: blur(var(--blur-control)) saturate(140%);
      -webkit-backdrop-filter: blur(var(--blur-control)) saturate(140%);
      border: 1px solid var(--surface-glass-border);
      border-radius: var(--r-md);
      box-shadow: var(--sh-card);
      padding: 12px 16px;
    }
    .le-videocall-blob::before {
      content: "";
      position: absolute;
      left: -7px;
      top: 50%;
      transform: translateY(-50%) rotate(45deg);
      width: 12px;
      height: 12px;
      background: var(--surface-glass-strong);
      border-left: 1px solid var(--surface-glass-border);
      border-bottom: 1px solid var(--surface-glass-border);
      border-bottom-left-radius: 3px;
    }
    .le-videocall-blob-text {
      font-family: var(--font);
      font-size: 14px;
      line-height: 1.4;
      color: var(--ink-2);
      margin: 0;
    }

    /* Mobile: stack the talk bubble UNDER the avatar instead of beside
       it. The bubble's tail rotates to point up toward the avatar. */
    @media (max-width: 640px) {
      .le-videocall-stage {
        flex-direction: column;
        align-items: center;
        gap: 18px;
      }
      .le-videocall-blob { width: 100%; }
      .le-videocall-blob::before {
        left: 50%;
        top: -7px;
        transform: translateX(-50%) rotate(135deg);
      }
    }
    .le-videocall-controls {
      display: flex;
      justify-content: center;
      gap: 10px;
    }
    .le-videocall-ctl {
      width: 32px;
      height: 32px;
      border-radius: var(--r-full);
      background: var(--surface-glass-strong);
      backdrop-filter: blur(var(--blur-control));
      -webkit-backdrop-filter: blur(var(--blur-control));
      border: 1px solid var(--surface-glass-border);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--ink-3);
    }
    .le-videocall-ctl .material-icons {
      font-size: 16px;
    }
    .le-videocall-ctl-end {
      background: var(--accent-500);
      border-color: var(--accent-500);
      color: var(--white);
    }

    /* ========================================================================
       ABOUT PAGE — pull-quote inside the Story section, plus the new
       "What we believe" principles grid (6 glass cards with alternating
       brand-tinted corner glows). Light theme, scoped under .about-*.
       ======================================================================== */

    /* Story — pull-quote treatment */
    .about-story-quote {
      margin: 28px 0;
      padding: 22px 28px;
      border-left: 3px solid var(--primary-500);
      background: var(--surface-glass);
      backdrop-filter: blur(var(--blur-panel)) saturate(140%);
      -webkit-backdrop-filter: blur(var(--blur-panel)) saturate(140%);
      border-top: 1px solid var(--surface-glass-border);
      border-right: 1px solid var(--surface-glass-border);
      border-bottom: 1px solid var(--surface-glass-border);
      border-radius: var(--r-sm);
    }
    .about-story-quote p {
      font-family: var(--serif);
      font-style: italic;
      font-size: 20px;
      line-height: 1.5;
      color: var(--ink);
      margin: 0;
    }

    /* Principles section */
    .about-principles {
      background: var(--cream);
      padding: 72px 48px;
    }
    .about-principles-inner {
      max-width: 1200px;
      margin: 0 auto;
    }
    .about-principles-header {
      text-align: center;
      max-width: 720px;
      margin: 0 auto 56px;
    }
    .about-principles-h {
      font-family: var(--font);
      font-weight: 700;
      font-size: clamp(28px, 3vw, 40px);
      line-height: 1.1;
      letter-spacing: -0.5px;
      color: var(--ink);
      margin: 16px 0 0;
    }
    .about-principles-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
    }
    .about-principle {
      position: relative;
      background: var(--white);
      border: 1px solid var(--border-soft);
      border-radius: var(--r-md);
      box-shadow: var(--sh-card);
      padding: 28px 26px 26px;
      overflow: hidden;
      transition: box-shadow 250ms var(--ease-out), transform 250ms var(--ease-out);
    }
    .about-principle:hover {
      box-shadow: var(--sh-lift);
      transform: translateY(-2px);
    }
    /* Corner glow — radial gradient, alternating blue/pink per card.
       Uses the brand -50 tints so it reads as a soft refractive glow,
       not a saturated halo. */
    .about-principle::before {
      content: "";
      position: absolute;
      top: -80px;
      right: -80px;
      width: 220px;
      height: 220px;
      border-radius: var(--r-full);
      filter: blur(var(--blur-glow));
      pointer-events: none;
      z-index: 0;
    }
    .about-principle-blue::before { background: var(--primary-50); }
    .about-principle-pink::before { background: var(--accent-50); }
    .about-principle > * { position: relative; z-index: 1; }
    .about-principle-num {
      display: inline-block;
      font-family: var(--font);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-4);
      margin-bottom: 14px;
    }
    .about-principle-blue .about-principle-num { color: var(--primary-700); }
    .about-principle-pink .about-principle-num { color: var(--accent-700); }
    .about-principle-title {
      font-family: var(--font);
      font-weight: 700;
      font-size: 20px;
      line-height: 1.2;
      letter-spacing: -0.3px;
      color: var(--ink);
      margin: 0 0 10px;
    }
    .about-principle-desc {
      font-family: var(--font);
      font-size: 15px;
      line-height: 1.55;
      color: var(--ink-3);
      margin: 0;
    }

    /* About team — distinguish open-role cards from real team cards */
    .about-team-card.is-open-role {
      background: var(--cream-2);
      border-style: dashed;
    }
    .about-team-card.is-open-role:hover {
      background: var(--white);
      border-style: solid;
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .about-principles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .about-principles { padding: 72px 32px; }
    }
    @media (max-width: 640px) {
      .about-principles { padding: 56px 20px; }
      .about-principles-grid { grid-template-columns: 1fr; }
      .about-principle { padding: 24px 22px; }
      .about-story-quote { padding: 18px 22px; }
      .about-story-quote p { font-size: 17px; }
    }

    /* ========================================================================
       HERO LIVE SESSION — v2 layout matching the Figma redesign.
       2-column grid inside .hero-card-body:
         LEFT  → call transcript (chat-bubble style, alternating speakers)
         RIGHT → 2 video tiles (looping mp4 avatars) + Learner Profile
                 (bubble cloud of proficiency + interest signals + 6 progress
                 bars). Bubbles pop when the transcript mentions them.
       ======================================================================== */

    .hero-card-body.ls-body {
      padding: 0;
      display: block;
    }
    .ls-grid {
      display: grid;
      grid-template-columns: minmax(280px, 1fr) minmax(0, 2.4fr);
      gap: 24px;
      padding: 24px;
      align-items: stretch;
    }

    /* ────────── LEFT — Transcript (iMessage-style) ────────── */
    .ls-transcript {
      /* Positioning frame only — visual styling lives here, scrollable
         list is absolutely positioned inside so its content height never
         pushes the grid row. The right column (videos + cloud) drives
         the row height; the transcript stretches to match via the grid's
         align-items: stretch. */
      position: relative;
      background: var(--surface-glass-strong);
      backdrop-filter: blur(var(--blur-panel)) saturate(140%);
      -webkit-backdrop-filter: blur(var(--blur-panel)) saturate(140%);
      border: 1px solid var(--surface-glass-border);
      border-radius: var(--r-lg);
      box-shadow: var(--sh-card);
      padding: 20px;
      overflow: hidden;
    }
    .ls-transcript-list {
      /* Fills the padding-box of .ls-transcript, scrolls internally so
         older bubbles roll off the top as new ones arrive. Extra
         padding-bottom creates a buffer zone inside the scroll context
         so the recap card's shadow has room to render without being
         clipped at the scroll boundary. */
      position: absolute;
      inset: 20px;
      padding-bottom: 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      overflow-y: auto;
      scrollbar-width: thin;
    }
    .ls-transcript-list::-webkit-scrollbar { width: 6px; }
    .ls-transcript-list::-webkit-scrollbar-thumb { background: var(--cream-3); border-radius: var(--r-2xs); }
    /* Keep flex children at their natural size — flex default is
       shrink: 1, which compresses bubbles + callouts when the stack
       exceeds container height. Overflow into the list's scroll
       container instead; the JS auto-scrolls to bottom on append so
       newest stays visible and older items push off the top. */
    .ls-transcript-list > .ls-transcript-bubble,
    .ls-transcript-list > .ls-transcript-typing,
    .ls-transcript-list > .ls-transcript-delivered,
    .ls-transcript-list > .ls-new-word,
    .ls-transcript-list > .ls-recap {
      flex-shrink: 0;
    }

    /* Session recap — simple, solid surface, single font family. */
    .ls-recap {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 14px 16px;
      background: var(--white);
      border-radius: var(--r-md);
      box-shadow: var(--sh-card);
      opacity: 0;
      transform: translateY(6px);
      animation: ls-bubble-in 380ms var(--ease-out) forwards;
    }
    .ls-recap-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
    }
    .ls-recap-title {
      font-family: var(--font);
      font-size: var(--wp--preset--font-size--sm);
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -0.1px;
    }
    .ls-recap-time {
      font-family: var(--font);
      font-size: var(--wp--preset--font-size--xs);
      font-weight: 600;
      color: var(--ink-3);
      letter-spacing: 0.4px;
    }
    .ls-recap-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      padding: 10px 0;
      border-top: 1px solid var(--border-soft);
      border-bottom: 1px solid var(--border-soft);
    }
    .ls-recap-stat {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }
    .ls-recap-stat-num {
      font-family: var(--font);
      font-size: var(--wp--preset--font-size--lg);
      font-weight: 700;
      color: var(--ink);
      line-height: 1;
      letter-spacing: -0.5px;
    }
    .ls-recap-stat-label {
      font-family: var(--font);
      font-size: var(--wp--preset--font-size--xs);
      font-weight: 500;
      color: var(--ink-3);
      letter-spacing: 0.2px;
      line-height: 1.2;
      text-align: center;
    }
    .ls-recap-cefr {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .ls-recap-cefr-label {
      font-family: var(--font);
      font-size: var(--wp--preset--font-size--xs);
      font-weight: 600;
      color: var(--ink-3);
      margin-right: 2px;
    }
    .ls-recap-cefr-pill {
      display: inline-block;
      padding: 1px 7px;
      font-family: var(--font);
      font-size: var(--wp--preset--font-size--xs);
      font-weight: 700;
      line-height: 1.45;
      color: var(--ink-2);
      background: var(--ink-1);
      border-radius: var(--r-full);
      letter-spacing: 0.3px;
    }
    .ls-recap-cefr-arrow {
      font-family: var(--font);
      font-size: var(--wp--preset--font-size--xs);
      color: var(--ink-3);
      font-weight: 600;
    }
    .ls-transcript-bubble {
      max-width: 82%;
      padding: 10px 14px;
      font-family: var(--font);
      font-weight: 500;
      font-size: var(--wp--preset--font-size--xs);
      line-height: 1.45;
      letter-spacing: -0.1px;
      text-align: left;
      opacity: 0;
      transform: translateY(12px) scale(0.96);
      animation: ls-bubble-in 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    @keyframes ls-bubble-in {
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* Typing-spinner bubble (precedes each transcript message) */
    .ls-transcript-typing {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 12px 16px;
      max-width: fit-content;
      opacity: 0;
      transform: translateY(12px) scale(0.96);
      animation: ls-bubble-in 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    .ls-transcript-typing.is-teacher {
      align-self: flex-start;
      background: var(--cream-2);
      border-radius: var(--r-md) var(--r-md) var(--r-md) var(--r-xs);
    }
    .ls-transcript-typing.is-student {
      align-self: flex-end;
      background: var(--primary-50);
      border-radius: var(--r-md) var(--r-md) var(--r-xs) var(--r-md);
    }
    .ls-typing-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--ink-3);
      display: inline-block;
      animation: ls-typing-bounce 1.2s ease-in-out infinite both;
    }
    .ls-transcript-typing.is-student .ls-typing-dot { background: var(--primary-500); }
    .ls-typing-dot:nth-child(1) { animation-delay: 0s; }
    .ls-typing-dot:nth-child(2) { animation-delay: 0.16s; }
    .ls-typing-dot:nth-child(3) { animation-delay: 0.32s; }
    @keyframes ls-typing-bounce {
      0%, 80%, 100% { transform: scale(0.45); opacity: 0.45; }
      40%           { transform: scale(1);    opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      .ls-typing-dot { animation: none; opacity: 0.6; }
    }
    /* Teacher (David) — soft cream bubble, left-aligned */
    .ls-transcript-bubble.is-teacher {
      align-self: flex-start;
      background: var(--cream-2);
      color: var(--ink-2);
      border-radius: var(--r-md) var(--r-md) var(--r-md) var(--r-xs);
    }
    /* Student (Maria) — soft primary-tint bubble, bubble itself sits on
       the RIGHT of the transcript column; text inside the bubble stays
       left-aligned (default flow) so reading is natural. */
    .ls-transcript-bubble.is-student {
      align-self: flex-end;
      background: var(--primary-50);
      color: var(--primary-700);
      border-radius: var(--r-md) var(--r-md) var(--r-xs) var(--r-md);
      text-align: left;
    }
    /* Phenomenon trigger words inside the transcript — bold + a soft
       dotted underline that reads as "this is being detected". The
       underline color inherits, so it tints with the bubble's own ink. */
    .ls-transcript-bubble strong {
      font-weight: 700;
      text-decoration: underline dotted currentColor;
      text-decoration-thickness: 1.5px;
      text-underline-offset: 3px;
    }
    /* "Delivered" indicator under the most recent student bubble */
    .ls-transcript-delivered {
      align-self: flex-end;
      font-family: var(--font);
      font-size: 11px;
      font-weight: 500;
      color: var(--ink-4);
      margin-top: -2px;
      letter-spacing: 0.02em;
    }

    /* "New Word Detected" callout — distinct from regular bubbles */
    /* Detection callout — Nousable-branded chip in the transcript flow.
       Compact: logo floats without a white tile, smaller padding, two-line
       body where the title is always one of the 5 skills (Proficiency /
       Grammar / Fluency / Pronunciation / Vocabulary) + a CEFR pill. */
    .ls-new-word {
      position: relative;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      background: var(--accent-50);
      border: 1px solid var(--accent-200);
      border-radius: var(--r-sm);
      overflow: hidden;
      opacity: 0;
      transform: translateY(6px);
      animation: ls-bubble-in 320ms var(--ease-out) forwards;
    }
    .ls-new-word::before,
    .ls-new-word::after {
      content: "";
      position: absolute;
      width: 110px;
      height: 110px;
      border-radius: var(--r-full);
      filter: blur(var(--blur-glow));
      opacity: 0.35;
      pointer-events: none;
    }
    .ls-new-word::before { background: var(--primary-500); top: 18px; left: -32px; }
    .ls-new-word::after  { background: var(--accent-500); top: -64px; right: -8px; }
    /* Logo floats directly — no white tile, no shadow. */
    .ls-new-word-icon {
      position: relative;
      z-index: 1;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .ls-new-word-icon img { width: 22px; height: auto; }
    .ls-new-word-body {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1px;
      min-width: 0;
      text-align: left;
    }
    .ls-new-word-label {
      font-family: var(--font);
      font-size: var(--wp--preset--font-size--xs);
      font-weight: 600;
      color: var(--ink-2);
      line-height: 1.35;
    }
    .ls-new-word-value {
      font-family: var(--font);
      font-size: var(--wp--preset--font-size--sm);
      font-weight: 700;
      color: var(--ink);
      line-height: 1.3;
      letter-spacing: -0.1px;
    }
    /* For "mistake → correct" values, the wrong form reads regular
       (it's not the thing to remember), the corrected form reads bold
       (it's the actionable target). The arrow is muted. */
    .ls-new-word-mistake { font-weight: 400; color: var(--ink-2); }
    .ls-new-word-arrow   { font-weight: 400; color: var(--ink-3); }
    .ls-new-word-correct { font-weight: 700; color: var(--ink); }
    /* CEFR pill inside the title (e.g. "Grammar B2"). */
    .ls-new-word-cefr {
      display: inline-block;
      margin-left: 4px;
      padding: 0 5px;
      font-size: 9.5px;
      font-weight: 700;
      line-height: 1.5;
      color: var(--ink-2);
      background: var(--ink-1);
      border-radius: var(--r-full);
      letter-spacing: 0.3px;
      vertical-align: 1px;
    }

    /* ────────── RIGHT — Main column ────────── */
    .ls-main {
      display: flex;
      flex-direction: column;
      gap: 16px;
      min-width: 0;
    }

    /* Video tiles — full-width, two-up, sized to give the call presence */
    .ls-videos {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .ls-video-tile {
      position: relative;
      aspect-ratio: 16 / 10;
      border: 1px solid var(--border-soft);
      border-radius: var(--r-md);
      overflow: hidden;
      background: var(--cream-2);
    }
    .ls-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .ls-video-tag {
      position: absolute;
      bottom: 8px;
      left: 8px;
      padding: 4px 10px;
      background: var(--surface-glass-strong);
      backdrop-filter: blur(var(--blur-control));
      -webkit-backdrop-filter: blur(var(--blur-control));
      border: 1px solid var(--surface-glass-border);
      border-radius: var(--r-full);
      font-family: var(--font);
      font-size: 11px;
      font-weight: 600;
      color: var(--ink);
      letter-spacing: 0.02em;
    }

    /* Learner Profile — transparent (sits directly on the card body) */
    .ls-profile {
      background: transparent;
      border: 0;
      box-shadow: none;
      padding: 4px 0 0;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .ls-profile-title {
      font-family: var(--font);
      font-weight: 700;
      font-size: 20px;
      line-height: 1.2;
      letter-spacing: -0.3px;
      color: var(--ink);
      margin: 0;
    }

    /* Bubble cloud — positioning context for the polar ring. Height
       tuned so the outer ring (skills) clears the cloud bounds and the
       inner ring (interests) sits comfortably between the skills and
       the central avatar+name. */
    .ls-profile-cloud {
      position: relative;
      height: 380px;
      width: 100%;
    }

    /* Central avatar + name (always at center) */
    .ls-profile-center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, calc(-50% + 48px));
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      z-index: 3;
      pointer-events: none;
    }
    .ls-profile-avatar {
      width: 130px;
      height: 130px;
      border-radius: var(--r-full);
      background: var(--primary-500);
      color: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font);
      font-weight: 700;
      font-size: 42px;
      box-shadow: var(--sh-ring);
      margin-bottom: 6px;
      overflow: hidden;
    }
    .ls-profile-avatar img,
    .ls-profile-avatar video {
      width: 100%; height: 100%; object-fit: cover;
    }
    .ls-profile-level {
      font-family: var(--font);
      font-size: 12px;
      font-weight: 500;
      color: var(--ink-3);
      letter-spacing: 0.02em;
    }
    .ls-profile-name {
      font-family: var(--font);
      font-weight: 700;
      font-size: 17px;
      color: var(--ink);
    }

    /* Bubble (shared) — circular, positioned absolutely via CSS vars.
       Each bubble has a subtle continuous float animation (different
       duration + delay per bubble for randomness) and a true glassmorphic
       surface: translucent fill + heavier backdrop blur + saturate boost +
       inner highlight to give the curved-glass illusion. */
    .ls-bubble {
      position: absolute;
      /* --x/--y reference the bubble's CENTER. Centering is done with
         translate(-50%, -50%), which works for both fixed-size circles
         and auto-width pills. Float + pop keyframes preserve that
         centering translate by composing with it. */
      top: var(--y);
      left: var(--x);
      width: var(--size);
      height: var(--size);
      border-radius: var(--r-full);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 2px;
      box-sizing: border-box;
      padding: 10px;
      will-change: transform;
      z-index: 1;
      transform: translate(-50%, -50%);
      animation: ls-float var(--float-dur, 7s) ease-in-out var(--float-delay, 0s) infinite;
    }
    @keyframes ls-float {
      0%, 100% { transform: translate(-50%, -50%); }
      50%      { transform: translate(calc(-50% + var(--float-x, 4px)), calc(-50% + var(--float-y, -6px))); }
    }
    /* Proficiency bubbles — bigger, true glass surface */
    .ls-bubble-prof {
      background: linear-gradient(135deg, var(--surface-glass-strong) 0%, var(--surface-glass) 100%);
      backdrop-filter: blur(var(--blur-panel)) saturate(180%);
      -webkit-backdrop-filter: blur(var(--blur-panel)) saturate(180%);
      border: 1px solid var(--surface-glass-border);
      box-shadow:
        inset 0 1px 0 var(--surface-glass-border),
        var(--sh-card);
    }
    /* Interest bubbles — small uniform circles so the whole cluster
       can pack tight around the avatar */
    .ls-bubble-interest {
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, var(--surface-glass) 0%, var(--surface-glass-strong) 100%);
      backdrop-filter: blur(var(--blur-control)) saturate(160%);
      -webkit-backdrop-filter: blur(var(--blur-control)) saturate(160%);
      border: 1px solid var(--surface-glass-border);
      box-shadow:
        inset 0 1px 0 var(--surface-glass-border),
        var(--sh-card);
    }
    .ls-bubble-icon {
      font-size: 22px;
      color: var(--primary-500);
    }
    .ls-bubble-label {
      font-family: var(--font);
      font-size: 11px;
      font-weight: 500;
      color: var(--ink-3);
      letter-spacing: 0.02em;
      line-height: 1.1;
      white-space: nowrap;
    }
    .ls-bubble-value {
      font-family: var(--font);
      font-weight: 700;
      font-size: 17px;
      color: var(--ink-2);
      line-height: 1.1;
    }
    .ls-bubble-emoji {
      font-size: 18px;
      line-height: 1;
    }
    .ls-bubble-label-sm {
      font-family: var(--font);
      font-size: 9.5px;
      font-weight: 500;
      color: var(--ink-3);
      line-height: 1.1;
      white-space: nowrap;
    }

    /* Bubble pop — soap-bubble wobble. Timing is `linear` so the ease
       curve is baked into the keyframe values themselves (samples a
       sine swell + axis-asymmetric wobble at peak). With linear interp,
       there are no per-segment ease pauses — motion stays continuous
       and reads as one smooth swell-wobble-release. */
    .ls-bubble.is-popping {
      animation: ls-pop 1800ms linear;
      z-index: 2;
    }
    @keyframes ls-pop {
      0%   { transform: translate(-50%, -50%) scale(1.000, 1.000); box-shadow: inset 0 1px 0 var(--surface-glass-border), var(--sh-card), 0 0 0 0  transparent; }
      14%  { transform: translate(-50%, -50%) scale(1.020, 1.040); box-shadow: inset 0 1px 0 var(--surface-glass-border), var(--sh-card), 0 0 0 2px var(--primary-50); }
      28%  { transform: translate(-50%, -50%) scale(1.050, 1.080); box-shadow: inset 0 1px 0 var(--surface-glass-border), var(--sh-card), 0 0 0 5px var(--primary-50); }
      42%  { transform: translate(-50%, -50%) scale(1.080, 1.100); box-shadow: inset 0 1px 0 var(--surface-glass-border), var(--sh-lift), 0 0 0 9px var(--primary-50); }
      50%  { transform: translate(-50%, -50%) scale(1.100, 1.100); box-shadow: inset 0 1px 0 var(--surface-glass-border), var(--sh-lift), 0 0 0 12px var(--primary-50); }
      58%  { transform: translate(-50%, -50%) scale(1.110, 1.080); box-shadow: inset 0 1px 0 var(--surface-glass-border), var(--sh-lift), 0 0 0 11px var(--primary-50); }
      72%  { transform: translate(-50%, -50%) scale(1.080, 1.050); box-shadow: inset 0 1px 0 var(--surface-glass-border), var(--sh-card), 0 0 0 7px  var(--primary-50); }
      86%  { transform: translate(-50%, -50%) scale(1.040, 1.020); box-shadow: inset 0 1px 0 var(--surface-glass-border), var(--sh-card), 0 0 0 3px var(--primary-50); }
      100% { transform: translate(-50%, -50%) scale(1.000, 1.000); box-shadow: inset 0 1px 0 var(--surface-glass-border), var(--sh-card), 0 0 0 0  transparent; }
    }
    .ls-bubble-interest.is-popping { animation-name: ls-pop-pink; }
    @keyframes ls-pop-pink {
      0%   { transform: translate(-50%, -50%) scale(1.000, 1.000); box-shadow: inset 0 1px 0 var(--surface-glass-border), var(--sh-card), 0 0 0 0  transparent; }
      14%  { transform: translate(-50%, -50%) scale(1.020, 1.045); box-shadow: inset 0 1px 0 var(--surface-glass-border), var(--sh-card), 0 0 0 2px var(--accent-50); }
      28%  { transform: translate(-50%, -50%) scale(1.055, 1.085); box-shadow: inset 0 1px 0 var(--surface-glass-border), var(--sh-card), 0 0 0 4px var(--accent-50); }
      42%  { transform: translate(-50%, -50%) scale(1.085, 1.105); box-shadow: inset 0 1px 0 var(--surface-glass-border), var(--sh-lift), 0 0 0 8px var(--accent-50); }
      50%  { transform: translate(-50%, -50%) scale(1.105, 1.105); box-shadow: inset 0 1px 0 var(--surface-glass-border), var(--sh-lift), 0 0 0 10px var(--accent-50); }
      58%  { transform: translate(-50%, -50%) scale(1.115, 1.085); box-shadow: inset 0 1px 0 var(--surface-glass-border), var(--sh-lift), 0 0 0 9px var(--accent-50); }
      72%  { transform: translate(-50%, -50%) scale(1.085, 1.055); box-shadow: inset 0 1px 0 var(--surface-glass-border), var(--sh-card), 0 0 0 6px  var(--accent-50); }
      86%  { transform: translate(-50%, -50%) scale(1.045, 1.020); box-shadow: inset 0 1px 0 var(--surface-glass-border), var(--sh-card), 0 0 0 2px var(--accent-50); }
      100% { transform: translate(-50%, -50%) scale(1.000, 1.000); box-shadow: inset 0 1px 0 var(--surface-glass-border), var(--sh-card), 0 0 0 0  transparent; }
    }

    /* Signal progress bars — bottom of profile card.
       Globally hidden per design directive — removed from desktop AND mobile. */
    .ls-signals { display: none !important; }
    .ls-signals.__legacy-shape__ {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px 24px;
      padding-top: 8px;
      border-top: 1px solid var(--border-soft);
    }
    .ls-signal {
      display: flex;
      flex-direction: column;
      gap: 5px;
      transition: opacity 200ms var(--ease-out);
    }
    .ls-signal-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .ls-signal-label {
      font-family: var(--font);
      font-size: 13px;
      font-weight: 500;
      color: var(--ink-2);
    }
    .ls-signal-value {
      font-family: var(--font);
      font-size: 13px;
      font-weight: 700;
      color: var(--ink);
      font-variant-numeric: tabular-nums;
    }
    .ls-signal-track {
      height: 8px;
      background: var(--cream-3);
      border-radius: var(--r-xs);
      overflow: hidden;
    }
    .ls-signal-fill {
      display: block;
      height: 100%;
      background: var(--primary-500);
      border-radius: var(--r-xs);
      transition: width 600ms var(--ease-out);
    }
    .ls-signal.is-popping .ls-signal-fill {
      background: var(--accent-500);
    }

    /* Responsive — collapse to single column on narrow viewports */
    @media (max-width: 1100px) {
      .ls-grid { grid-template-columns: 1fr; }
      .ls-transcript { min-height: 280px; }
      .ls-profile-cloud { height: 280px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .ls-bubble.is-popping,
      .ls-transcript-bubble,
      .ls-new-word { animation: none; opacity: 1; transform: none; }
    }

    /* ────────────────────────────────────────────────────────────
       OUTPUTS — Tangible Value section (product page)
       Bento grid (4 cols × 4 rows). Hero (#01) sits as a wide
       branded banner at the top; six supporting cards fill the
       remaining slots with tall, square, and wide shapes tuned to
       each mockup's natural aspect.
       ──────────────────────────────────────────────────────────── */
    .outputs-section {
      background: var(--cream);
    }
    .outputs-header .section-h2 em { color: var(--primary-500); font-style: italic; }

    /* ================================================================
       OUTPUTS — 3-column audience layout
       (Learning experience / Admin / Tutor)
       Uses design-system tokens throughout: --primary-*, --ink-*,
       --cream-*, --border-soft, --r-*, --sh-card, --font, --serif.
       Single primary accent across all three columns (no off-system
       greens/ambers); columns differentiated by title + icon only.
       ================================================================ */
    .outputs-cols {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 32px;
      align-items: start;
    }
    .outputs-col {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }
    .outputs-col-header {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--border-soft);
    }
    .outputs-col-icon {
      width: 44px;
      height: 44px;
      border-radius: var(--r-md);
      background: var(--primary-50);
      color: var(--primary-700);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      flex-shrink: 0;
    }
    .outputs-col-title {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(22px, 2vw, 28px);
      line-height: 1.15;
      letter-spacing: -0.4px;
      color: var(--ink);
      margin: 0;
    }
    .outputs-col-cards {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Mini card — graphic on top, text below.
       Matches design system card surface: white bg, soft border,
       r-lg radius, sh-card shadow, sh-lift on hover. */
    /* Horizontal output card — icon left, title + description right.
       No hero image / placeholder block; the icon sits as a compact
       leading marker. */
    .output-mini {
      background: var(--white);
      border: 1px solid var(--border-soft);
      border-radius: var(--r-md);
      box-shadow: var(--sh-card);
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 16px 18px;
      transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
    }
    .output-mini:hover {
      transform: translateY(-2px);
      box-shadow: var(--sh-lift);
    }
    .output-mini-icon {
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      border-radius: var(--r-sm);
      background: var(--primary-50);
      color: var(--primary-500);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
    }
    .output-mini-body {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }
    .output-mini-title {
      font-family: var(--font);
      font-weight: 700;
      font-size: 15px;
      line-height: 1.3;
      letter-spacing: -0.1px;
      color: var(--ink);
      margin: 0;
    }
    .output-mini-desc {
      font-family: var(--font);
      font-size: 13.5px;
      line-height: 1.5;
      color: var(--ink-3);
      margin: 0;
    }

    @media (max-width: 1024px) {
      .outputs-cols {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
      }
      .outputs-col-tutor { grid-column: 1 / -1; }
      .outputs-col-tutor .outputs-col-cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
      }
    }
    @media (max-width: 720px) {
      /* minmax(0, 1fr) replaces the implicit minmax(auto, 1fr) of plain
         `1fr`. The `auto` floor lets the track grow to fit its content's
         min-content; the carousel-track's flex children (cards at 80%)
         bubble that up and force the column wider than the viewport.
         min-width: 0 on the column + carousel container breaks that
         min-content propagation so the carousel handles its own
         horizontal overflow via overflow-x: auto. */
      .outputs-cols {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
      }
      .outputs-col,
      .outputs-col-cards {
        min-width: 0;
      }
      .outputs-col-tutor .outputs-col-cards {
        display: flex;
        flex-direction: column;
      }
    }

    .outputs-bento {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-auto-rows: minmax(140px, auto);
      grid-template-areas:
        "practice  hero       hero        writing"
        "practice  avatar     engagement  writing"
        "practice  avatar     engagement  writing";
      gap: 16px;
    }

    .bento-card {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 24px;
      background: var(--white);
      border: 1px solid var(--border-soft);
      border-radius: var(--r-lg);
      box-shadow: var(--sh-card);
      overflow: hidden;
      transition: transform 0.18s ease, box-shadow 0.18s ease;
    }
    .bento-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--sh-lift);
    }

    .bento-num {
      font-family: var(--font);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.14em;
      color: var(--primary-700);
      font-feature-settings: 'tnum' 1;
      text-transform: uppercase;
    }
    .bento-title-sm {
      font-family: var(--font);
      font-weight: 700;
      font-size: 17px;
      line-height: 1.25;
      letter-spacing: -0.2px;
      color: var(--ink);
      margin: 0;
    }
    .bento-desc-sm {
      font-size: 15px;
      line-height: 1.6;
      color: var(--ink-3);
      margin: 0;
    }

    /* Mockup tile — neutral cream surface, grows to fill remaining card height */
    .bento-mockup {
      background: var(--cream-2);
      border: 1px solid var(--border-soft);
      border-radius: var(--r-md);
      padding: 18px;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 4px;
    }

    /* ── Hero card (top wide, branded) ── */
    .bento-hero {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 36px;
      padding: 40px 44px;
      background: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-500) 100%);
      border-color: transparent;
      color: var(--white);
      align-items: center;
    }
    .bento-hero .bento-card-text {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .bento-hero .bento-num {
      color: rgba(255, 255, 255, 0.78);
    }
    .bento-hero-title {
      font-family: var(--serif);
      font-weight: 600;
      font-size: clamp(26px, 2.4vw, 34px);
      line-height: 1.12;
      letter-spacing: -0.4px;
      color: var(--white);
      margin: 0;
    }
    .bento-hero-title em {
      font-style: italic;
      color: var(--accent-300, #f9c8d4);
    }
    .bento-hero-desc {
      font-size: 17px;
      line-height: 1.65;
      color: rgba(255, 255, 255, 0.82);
      margin: 0;
      max-width: 38ch;
    }
    .bento-mockup-hero {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.18);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      padding: 20px;
      align-items: stretch;
    }
    .bento-mockup-hero .mock-row {
      background: rgba(255, 255, 255, 0.92);
      color: var(--ink);
      border-color: transparent;
    }
    .bento-mockup-hero .mock-eyebrow {
      color: rgba(255, 255, 255, 0.72);
    }
    .bento-mockup-hero .mock-status {
      color: rgba(255, 255, 255, 0.88);
    }
    /* Permissions mock on the dark hero — all text white */
    .bento-mockup-hero .mock-perms-title {
      color: var(--white);
    }
    .bento-mockup-hero .mock-perms-sub {
      color: rgba(255, 255, 255, 0.7);
    }
    .bento-mockup-hero .mock-perms-head {
      border-bottom-color: rgba(255, 255, 255, 0.18);
    }
    .bento-mockup-hero .mock-user-row + .mock-user-row {
      border-top-color: rgba(255, 255, 255, 0.14);
    }
    .bento-mockup-hero .mock-user-meta strong {
      color: var(--white);
    }
    .bento-mockup-hero .mock-user-meta span {
      color: rgba(255, 255, 255, 0.7);
    }
    .bento-mockup-hero .mock-shield {
      color: var(--white);
    }
    .bento-mockup-hero .mock-toggle:not(.mock-toggle-on) {
      background: rgba(255, 255, 255, 0.22);
    }
    .bento-mockup-hero .mock-toggle.mock-toggle-on {
      background: rgba(255, 255, 255, 0.92);
    }
    .bento-mockup-hero .mock-toggle > span {
      background: var(--primary-700, #2a3aa6);
    }
    .bento-mockup-hero .mock-toggle.mock-toggle-on > span {
      background: var(--primary-700, #2a3aa6);
    }

    /* ── Photo background card (AI content creation) ── */
    /* Photo-card base — fade overlay + photo as layered backgrounds.
       Per-card image set via .bento-card-photo-content / -avatar below. */
    .bento-card-photo {
      background-image:
        linear-gradient(135deg,
          var(--white) 0%,
          rgba(255, 255, 255, 0.96) 22%,
          rgba(255, 255, 255, 0.70) 42%,
          rgba(255, 255, 255, 0.10) 62%,
          rgba(255, 255, 255, 0) 80%),
        var(--bento-photo, url('../images/ai-content-creation-bg.webp'));
      background-size: cover, cover;
      background-position: top left, center bottom;
      background-repeat: no-repeat, no-repeat;
      color: var(--ink);
    }
    .bento-card-photo .bento-mockup {
      background: transparent;
      border: 0;
      padding: 0;
      margin-top: auto;
      display: block;
    }
    .bento-card-photo .mock-formats {
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .bento-card-photo .mock-format {
      background: rgba(255, 255, 255, 0.55);
      border: 1px solid rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 4px 12px rgba(20, 30, 60, 0.08);
      color: var(--ink);
    }
    .bento-card-photo .mock-format-icon {
      color: var(--primary-500);
    }
    /* Per-card photo: AI avatar (desktop image; mobile override below
       switches to the portrait crop). */
    .bento-card-photo-avatar {
      --bento-photo: url('../images/ai-avatar-bg.webp');
    }

    /* ── Wide bottom card (07 Content creation) ── */
    .bento-wide {
      flex-direction: row;
      align-items: center;
      gap: 32px;
      padding: 28px 32px;
    }
    .bento-wide .bento-card-text {
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 0 0 280px;
    }
    .bento-wide .bento-mockup {
      flex: 1;
      margin-top: 0;
    }
    .bento-wide .mock-formats {
      grid-template-columns: repeat(4, 1fr);
    }
    .mock {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .mock-eyebrow {
      font-family: var(--font);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-3);
      margin-bottom: 6px;
    }
    .mock-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      background: var(--white);
      border: 1px solid var(--border-soft);
      border-radius: var(--r-sm);
      font-size: 13px;
      font-weight: 500;
      color: var(--ink-2);
    }
    .mock-icon {
      font-size: 16px;
      color: var(--primary-500);
    }
    .mock-status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 4px;
      font-family: var(--font);
      font-size: 12px;
      color: var(--ink-3);
    }
    .mock-status-warn {
      color: var(--accent-700);
      font-weight: 600;
    }
    .mock-pulse {
      width: 8px; height: 8px;
      border-radius: var(--r-full);
      background: var(--primary-500);
      animation: mock-pulse 1.6s ease-in-out infinite;
    }
    @keyframes mock-pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%      { opacity: 0.4; transform: scale(0.8); }
    }

    /* 02 — Practice dial */
    .mock-practice { align-items: center; }
    .mock-dial {
      width: 120px; height: 120px;
      border-radius: var(--r-full);
      background: conic-gradient(var(--primary-500) 0% 90%, var(--cream-3) 90% 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .mock-dial::after {
      content: '';
      position: absolute;
      inset: 12px;
      background: var(--white);
      border-radius: var(--r-full);
    }
    .mock-dial-q {
      position: relative;
      z-index: 1;
      font-family: var(--serif);
      font-size: 38px;
      font-weight: 700;
      font-style: italic;
      color: var(--primary-700);
    }
    .mock-dial-meta {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }
    .mock-dial-label { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; }
    .mock-dial-value { font-family: var(--serif); font-weight: 700; font-size: 22px; color: var(--ink); }

    /* 03 — Writing analysis: rounded text boxes with accent underline + fix below */
    .mock-writing {
      gap: 12px;
    }
    .mock-write-line {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .mock-write-text {
      display: block;
      padding: 10px 14px;
      background: var(--white);
      border: 1px solid var(--border-soft);
      border-radius: var(--r-sm);
      box-shadow: inset 0 -2px 0 var(--accent-500);
      font-family: var(--font);
      font-size: 13.5px;
      line-height: 1.4;
      color: var(--ink);
    }
    .mock-write-fix {
      font-family: var(--font);
      font-size: 11.5px;
      font-weight: 600;
      color: var(--accent-700);
      padding-left: 2px;
      letter-spacing: 0.01em;
    }
    /* When writing card is in the wide bottom slot, lay 3 lines horizontally */
    .bento-wide .mock-writing {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      align-items: start;
      gap: 6px 14px;
    }
    .bento-wide .mock-writing > .mock-eyebrow {
      grid-column: 1 / -1;
      margin-bottom: 0;
    }
    .bento-wide .mock-writing > .mock-status {
      grid-column: 1 / -1;
      margin-top: 2px;
    }
    .bento-wide .mock-write-line {
      gap: 6px;
    }

    /* 04 — Conversation */
    .mock-bubble {
      display: inline-flex;
      align-items: flex-start;
      gap: 8px;
      align-self: flex-start;
      max-width: 90%;
    }
    .mock-bubble-text {
      padding: 10px 14px;
      background: var(--white);
      border: 1px solid var(--border-soft);
      border-radius: var(--r-md) var(--r-md) var(--r-md) var(--r-xs);
      font-size: 13.5px;
      color: var(--ink);
      line-height: 1.4;
    }
    .mock-bubble-self { align-self: flex-end; }
    .mock-bubble-self .mock-bubble-text {
      background: var(--primary-50);
      color: var(--primary-700);
      border-color: var(--primary-100);
      border-radius: var(--r-md) var(--r-md) var(--r-xs) var(--r-md);
    }
    .mock-avatar {
      width: 28px; height: 28px;
      border-radius: var(--r-full);
      background: var(--primary-500);
      color: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font);
      font-size: 12px;
      font-weight: 700;
      flex-shrink: 0;
    }

    /* 05 — Engagement */
    .mock-notif {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      background: var(--white);
      border: 1px solid var(--border-soft);
      border-radius: var(--r-sm);
      font-size: 13.5px;
      color: var(--ink-2);
    }
    .mock-notif .mock-icon { color: var(--accent-500); }
    .mock-streak {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      align-self: flex-start;
      padding: 8px 14px;
      background: var(--accent-50);
      border-radius: var(--r-full);
      font-family: var(--font);
      font-size: 13px;
      font-weight: 700;
      color: var(--accent-700);
    }
    .mock-flame { font-size: 16px; color: var(--accent-500); }

    /* 06 — Admin dashboard */
    .mock-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .mock-stat {
      padding: 14px;
      background: var(--white);
      border: 1px solid var(--border-soft);
      border-radius: var(--r-sm);
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .mock-stat-num {
      font-family: var(--serif);
      font-weight: 700;
      font-size: 28px;
      color: var(--ink);
      line-height: 1;
    }
    .mock-stat-label {
      font-size: 11px;
      color: var(--ink-3);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    .mock-stat-alert .mock-stat-num { color: var(--accent-700); }

    /* Permissions list (Admin dashboard variant) */
    .mock-dash {
      gap: 12px;
    }
    .mock-perms-head {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--border-soft);
    }
    .mock-perms-title {
      font-family: var(--font);
      font-weight: 700;
      font-size: 14px;
      color: var(--ink);
    }
    .mock-perms-sub {
      font-size: 12px;
      color: var(--primary-500);
    }
    .mock-user-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 0;
    }
    .mock-user-row + .mock-user-row {
      border-top: 1px solid var(--border-soft);
    }
    .mock-toggle {
      flex-shrink: 0;
      width: 28px;
      height: 16px;
      border-radius: var(--r-full);
      background: var(--ink);
      position: relative;
      display: inline-flex;
      align-items: center;
      padding: 0 2px;
      justify-content: flex-end;
    }
    .mock-toggle > span {
      display: block;
      width: 12px;
      height: 12px;
      border-radius: var(--r-full);
      background: var(--white);
    }
    .mock-toggle:not(.mock-toggle-on) {
      background: var(--cream-3);
      justify-content: flex-start;
    }
    .mock-avatar-sm {
      flex-shrink: 0;
      width: 26px;
      height: 26px;
      border-radius: var(--r-full);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font);
      font-size: 10px;
      font-weight: 700;
      color: var(--white);
    }
    .mock-avatar-1 { background: var(--primary-500); }
    .mock-avatar-2 { background: var(--accent-500); }
    .mock-user-meta {
      display: flex;
      flex-direction: column;
      gap: 1px;
      flex: 1;
      min-width: 0;
    }
    .mock-user-meta strong {
      font-family: var(--font);
      font-weight: 600;
      font-size: 12.5px;
      color: var(--ink);
      line-height: 1.2;
    }
    .mock-user-meta span {
      font-size: 11px;
      color: var(--ink-3);
      line-height: 1.2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mock-shield {
      flex-shrink: 0;
      font-size: 16px;
      color: var(--ink);
    }
    .mock-bars {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: 4px;
    }
    .mock-bar {
      height: 6px;
      background: var(--cream-3);
      border-radius: var(--r-xs);
      position: relative;
      overflow: hidden;
    }
    .mock-bar::after {
      content: '';
      position: absolute;
      inset: 0;
      width: var(--w, 50%);
      background: var(--primary-500);
      border-radius: inherit;
    }

    /* 07 — Content formats */
    .mock-formats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .mock-format {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px;
      background: var(--white);
      border: 1px solid var(--border-soft);
      border-radius: var(--r-sm);
      font-size: 13.5px;
      font-weight: 600;
      color: var(--ink);
    }
    .mock-format-icon {
      font-size: 18px;
      color: var(--primary-500);
    }

    @media (max-width: 1024px) {
      .outputs-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
          "hero       hero"
          "practice   writing"
          "avatar     engagement";
        gap: 14px;
      }
      .bento-hero {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 32px 28px;
      }
    }
    @media (max-width: 640px) {
      .outputs-bento {
        grid-template-columns: 1fr;
        grid-template-areas:
          "hero"
          "practice"
          "avatar"
          "engagement"
          "writing";
        gap: 12px;
      }
      /* Equalize every tile on mobile — uniform shape regardless of
         their desktop role (hero, photo, wide, etc.). */
      .bento-card,
      .bento-hero,
      .bento-wide,
      .bento-card-photo {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        padding: 24px !important;
        gap: 12px !important;
        min-height: 280px;
        grid-template-columns: none !important;
        grid-template-areas: none !important;
      }
      .bento-wide .bento-card-text,
      .bento-hero .bento-card-text {
        flex: 0 0 auto;
        max-width: none;
      }
      .bento-wide .mock-formats {
        grid-template-columns: repeat(2, 1fr);
      }
      /* Photo cards (AI avatar, AI content creation) — portrait 4:5 on
         mobile. Image is "contain" (fit, no cropping) anchored to the
         bottom. Fade runs top→bottom so the title/desc area is opaque. */
      .bento-card-photo {
        aspect-ratio: 4 / 5;
        min-height: 0 !important;
        background-image:
          linear-gradient(to bottom,
            var(--white) 0%,
            rgba(255, 255, 255, 0.88) 14%,
            rgba(255, 255, 255, 0.45) 28%,
            rgba(255, 255, 255, 0) 48%),
          var(--bento-photo, url('../images/ai-content-creation-bg-mobile.webp'));
        background-size: 100% 100%, contain;
        background-position: top center, center bottom;
        background-repeat: no-repeat, no-repeat;
        background-color: var(--white);
        --bento-photo: url('../images/ai-content-creation-bg-mobile.webp');
      }
      .bento-card-photo-avatar {
        --bento-photo: url('../images/ai-avatar-bg-mobile.webp');
        background-image:
          linear-gradient(to bottom,
            var(--white) 0%,
            rgba(255, 255, 255, 0.92) 18%,
            rgba(255, 255, 255, 0.55) 36%,
            rgba(255, 255, 255, 0) 60%),
          url('../images/ai-avatar-bg-mobile.webp');
        background-size: 100% 100%, cover;
        background-position: top center, center bottom;
      }
    }

    /* ─── Product layer detail sections — minimal mockup styles ─── */
    .product-layer-section { background: var(--cream); }

    /* Layer 1 mockups */
    .le-mini-stack { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
    .le-mini-row {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 12px;
      background: var(--white);
      border: 1px solid var(--border-soft);
      border-radius: var(--r-sm);
      font-size: 13px;
      color: var(--ink-2);
    }
    .le-mini-tag {
      width: 22px; height: 22px;
      border-radius: var(--r-xs);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font);
      font-size: 10px;
      font-weight: 700;
      color: var(--white);
      flex-shrink: 0;
    }
    .le-mini-tag-g { background: var(--primary-500); }
    .le-mini-tag-r { background: var(--accent-500); }
    .le-mini-tag-c { background: var(--cyan); }

    .le-mini-mapping {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 24px 16px;
      text-align: center;
    }
    .le-mini-mapping-from {
      font-family: var(--serif);
      font-style: italic;
      font-size: 14px;
      color: var(--ink-2);
      padding: 12px 16px;
      background: var(--white);
      border: 1px solid var(--border-soft);
      border-radius: var(--r-sm);
    }
    .le-mini-mapping-arrow { font-size: 18px; color: var(--ink-3); }
    .le-mini-mapping-to {
      font-family: var(--font);
      font-size: 13px;
      font-weight: 600;
      color: var(--primary-700);
      padding: 8px 14px;
      background: var(--primary-50);
      border-radius: var(--r-full);
    }

    .le-mini-context { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
    .le-mini-context-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-3);
    }
    .le-mini-context-chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .le-mini-chip {
      padding: 6px 12px;
      background: var(--white);
      border: 1px solid var(--border-soft);
      border-radius: var(--r-full);
      font-size: 12px;
      font-weight: 500;
      color: var(--ink-2);
    }

    .le-mini-surfaces {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      padding: 16px;
    }
    .le-mini-surface {
      display: flex; align-items: center; gap: 8px;
      padding: 10px 12px;
      background: var(--white);
      border: 1px solid var(--border-soft);
      border-radius: var(--r-sm);
      font-size: 12.5px;
      color: var(--ink-2);
    }
    .le-mini-surface .material-icons { font-size: 16px; color: var(--primary-500); }

    /* Layer 2 — bento extras */
    .bento-skill-bars { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
    .bento-bar { display: grid; grid-template-columns: 80px 1fr 24px; gap: 8px; align-items: center; font-size: 11px; color: var(--ink-2); }
    .bento-bar-label { font-weight: 600; }
    .bento-bar-track { height: 6px; background: var(--cream-3); border-radius: var(--r-xs); overflow: hidden; }
    .bento-bar-track i { display: block; height: 100%; background: var(--primary-500); border-radius: inherit; }
    .bento-bar-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }

    .bento-profile-card {
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      text-align: center;
    }
    .bento-profile-avatar {
      width: 48px; height: 48px;
      border-radius: var(--r-full);
      background: var(--primary-500);
      color: var(--white);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font);
      font-weight: 700;
      font-size: 16px;
      margin-bottom: 4px;
    }
    .bento-profile-name { font-family: var(--font); font-weight: 700; font-size: 13px; color: var(--ink); }
    .bento-profile-meta { font-size: 11px; color: var(--ink-3); }
    .bento-profile-tag { font-size: 10px; color: var(--ink-4); }
    .bento-profile-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; justify-content: center; }
    .bento-profile-chip { padding: 3px 8px; background: var(--cream-2); border-radius: var(--r-full); font-size: 10px; color: var(--ink-2); }

    .bento-trend { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
    .bento-trend-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
    .bento-trend-line { width: 100%; height: 60px; }

    .bento-recognize-produce { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; }
    .bento-rp-col { display: flex; flex-direction: column; gap: 4px; }
    .bento-rp-label { font-size: 11px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
    .bento-rp-bar { height: 8px; background: var(--cream-3); border-radius: var(--r-xs); overflow: hidden; }
    .bento-rp-bar i { display: block; height: 100%; background: var(--primary-500); border-radius: inherit; }
    .bento-rp-bar-warn i { background: var(--accent-500); }
    .bento-rp-val { font-family: var(--serif); font-weight: 700; font-size: 18px; color: var(--ink); }

    .bento-interests { padding: 16px; display: flex; flex-wrap: wrap; gap: 8px; align-content: center; justify-content: center; }
    .bento-interest-chip { padding: 8px 14px; background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--r-full); font-size: 12px; font-weight: 500; color: var(--ink-2); }

    .bento-evolve { display: flex; align-items: center; justify-content: space-around; padding: 16px 8px; gap: 4px; }
    .bento-evolve-snap { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 12px; background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--r-sm); flex: 1; }
    .bento-evolve-eyebrow { font-size: 9px; color: var(--ink-3); letter-spacing: 0.05em; }
    .bento-evolve-snap-val { font-family: var(--serif); font-weight: 700; font-size: 18px; color: var(--primary-700); }
    .bento-evolve-arrow { font-size: 16px; color: var(--ink-4); flex-shrink: 0; }

    /* Layer 3 — orchestration card image area */
    .product-layer-section .team-card-v-image { aspect-ratio: auto; height: 280px; padding: 20px; background: var(--cream); border-bottom: 1px solid var(--border-soft); }
    /* Orchestration cards — full-bleed 4:3 image */
    .product-layer-section .team-card-v-image.orch-card-image {
      aspect-ratio: 4 / 3;
      height: auto;
      padding: 0;
      background: var(--cream);
      overflow: hidden;
    }
    .product-layer-section .team-card-v-image.orch-card-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }
    .orch-mock { display: flex; flex-direction: column; gap: 8px; height: 100%; }
    .orch-mock-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
    .orch-mock-title { font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.25; }
    .orch-mock-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ink-2); }
    .orch-mock-row .material-icons { color: var(--primary-500); font-size: 16px; }
    .orch-mock-skill { font-weight: 600; color: var(--ink); }
    .orch-mock-score { font-family: var(--serif); font-weight: 700; font-size: 14px; color: var(--primary-700); }
    .orch-mock-bar { height: 6px; background: var(--cream-3); border-radius: var(--r-xs); overflow: hidden; }
    .orch-mock-bar i { display: block; height: 100%; background: var(--primary-500); border-radius: inherit; }
    .orch-mock-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
    .orch-mock-chip { padding: 4px 10px; background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--r-full); font-size: 11px; color: var(--ink-2); font-weight: 500; }
    .orch-mock-chip-warn { background: var(--accent-50); border-color: var(--accent-100); color: var(--accent-700); font-weight: 600; }
    .orch-mock-cta { margin-top: auto; align-self: flex-start; padding: 8px 14px; background: var(--ink); color: var(--white); border-radius: var(--r-full); font-size: 12px; font-weight: 600; }
    .orch-mock-meta { font-size: 11px; color: var(--ink-3); padding-left: 24px; }

    /* ─── Layer 2 bento — content-specific mockup styles ─── */

    /* tile-skill: progress headline */
    .bento-progress {
      display: flex; flex-direction: column; gap: 4px;
      padding: 16px;
      align-items: center;
      text-align: center;
    }
    .bento-progress-eyebrow {
      font-size: 11px; font-weight: 600;
      letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--ink-3);
    }
    .bento-progress-val {
      font-family: var(--serif);
      font-weight: 700;
      font-size: 44px;
      color: var(--primary-700);
      line-height: 1;
      margin: 6px 0 2px;
    }
    .bento-progress-foot {
      font-size: 12px; color: var(--ink-3);
    }

    /* tile-profile: Skill Map */
    .bento-skillmap { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
    .bento-skillmap-head { display: flex; align-items: center; gap: 10px; }
    .bento-skillmap-head .bento-profile-avatar {
      width: 40px; height: 40px;
      font-size: 14px;
      margin: 0;
    }
    .bento-skillmap-ident { display: flex; flex-direction: column; }
    .bento-skillmap-ident .bento-profile-name { font-size: 13px; }
    .bento-skillmap-ident .bento-profile-meta { font-size: 11px; }

    .bento-skillmap-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .bento-skillmap-mini {
      display: flex; flex-direction: column; gap: 2px;
      padding: 8px 10px;
      background: var(--white);
      border: 1px solid var(--border-soft);
      border-radius: var(--r-sm);
    }
    .bento-skillmap-mini-num {
      font-family: var(--serif); font-weight: 700;
      font-size: 20px; color: var(--ink); line-height: 1;
    }
    .bento-skillmap-mini-label {
      font-size: 10px; color: var(--ink-3);
      letter-spacing: 0.05em;
    }

    .bento-skillmap-chips { display: flex; flex-wrap: wrap; gap: 4px; }
    .bento-skillmap-chips .bento-interest-chip {
      padding: 4px 8px;
      font-size: 10px;
    }

    .bento-skillmap-stats {
      display: flex; flex-direction: column;
      gap: 6px;
      padding-top: 4px;
      border-top: 1px solid var(--border-soft);
    }
    .bento-skillmap-stat { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
    .bento-skillmap-stat-label { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
    .bento-skillmap-stat-val { font-family: var(--serif); font-weight: 700; font-size: 12px; color: var(--primary-700); font-variant-numeric: tabular-nums; }

    /* tile-living: A Living Profile (animated pulse + signal log) */
    .bento-living {
      padding: 16px;
      display: flex; flex-direction: column;
      gap: 6px;
      position: relative;
    }
    .bento-living-pulse {
      width: 10px; height: 10px;
      border-radius: var(--r-full);
      background: var(--primary-500);
      margin-bottom: 6px;
      animation: bento-pulse 1.6s ease-in-out infinite;
    }
    @keyframes bento-pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%      { opacity: 0.4; transform: scale(0.7); }
    }
    .bento-living-line {
      font-family: var(--font);
      font-size: 12px; color: var(--ink-3);
      font-variant-numeric: tabular-nums;
    }
    .bento-living-line::before {
      content: ''; display: inline-block;
      width: 5px; height: 5px;
      border-radius: var(--r-full);
      background: var(--primary-300);
      vertical-align: middle;
      margin-right: 8px;
    }

    /* tile-avatar: conversation */
    .bento-convo {
      padding: 14px;
      display: flex; flex-direction: column;
      gap: 8px;
    }
    .bento-convo-line {
      padding: 8px 12px;
      border-radius: var(--r-md) var(--r-md) var(--r-md) var(--r-xs);
      font-size: 11.5px;
      line-height: 1.4;
      max-width: 88%;
    }
    .bento-convo-them {
      background: var(--white);
      border: 1px solid var(--border-soft);
      color: var(--ink);
      align-self: flex-start;
    }
    .bento-convo-me {
      background: var(--primary-50);
      color: var(--primary-700);
      border: 1px solid var(--primary-100);
      align-self: flex-end;
      border-radius: var(--r-md) var(--r-md) var(--r-xs) var(--r-md);
    }

    /* tile-generated */
    .bento-generated {
      padding: 14px;
      display: flex; flex-direction: column;
      gap: 6px;
    }
    .bento-generated-eyebrow {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--accent-700);
    }
    .bento-generated-label {
      font-family: var(--font);
      font-size: 11px;
      color: var(--ink-3);
    }
    .bento-generated-quote {
      font-family: var(--serif);
      font-style: italic;
      font-size: 13px;
      color: var(--ink);
      margin: 4px 0;
      line-height: 1.4;
    }
    .bento-generated-quote em { font-style: italic; color: var(--primary-700); font-weight: 600; }
    .bento-generated-note {
      font-size: 11px;
      color: var(--ink-3);
      line-height: 1.4;
      margin: 0;
    }
    .bento-generated-note em { font-style: italic; color: var(--primary-700); font-weight: 600; }

    /* tile-adaptive (wide bottom): curriculum → serving */
    .bento-adaptive {
      padding: 18px 22px;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 20px;
      align-items: center;
    }
    .bento-adaptive-eyebrow {
      font-size: 10px; font-weight: 600;
      letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--ink-3);
      display: block;
      margin-bottom: 8px;
    }
    .bento-adaptive-curriculum,
    .bento-adaptive-serving {
      display: flex; flex-direction: column;
      gap: 4px;
    }
    .bento-adaptive-list {
      display: flex; flex-direction: column;
      gap: 4px;
    }
    .bento-adaptive-item {
      display: grid;
      grid-template-columns: 28px 1fr auto;
      gap: 8px;
      align-items: center;
      padding: 6px 10px;
      background: var(--white);
      border: 1px solid var(--border-soft);
      border-radius: var(--r-sm);
      font-size: 11px;
    }
    .bento-adaptive-num {
      font-family: var(--font);
      font-weight: 700;
      color: var(--primary-700);
      font-variant-numeric: tabular-nums;
    }
    .bento-adaptive-name { color: var(--ink); font-weight: 600; }
    .bento-adaptive-type { color: var(--ink-3); font-size: 10px; text-align: right; }

    .bento-adaptive-arrow {
      font-size: 24px;
      color: var(--primary-500);
      align-self: center;
    }

    .bento-adaptive-serving .bento-adaptive-title {
      font-family: var(--serif);
      font-weight: 700;
      font-size: 14px;
      color: var(--ink);
      line-height: 1.3;
    }
    .bento-adaptive-source {
      font-size: 11px; color: var(--ink-3);
    }
    .bento-adaptive-note {
      margin-top: 6px;
      padding: 6px 10px;
      background: var(--accent-50);
      border-radius: var(--r-sm);
      font-size: 11px;
      color: var(--accent-700);
      font-weight: 500;
    }

    /* Bento tile size adjustments — give tile-profile (big center) more
       breathing room so the Skill Map content fits comfortably. */
    .bento-learner {
      grid-template-rows: auto auto auto;
    }
    .bento-tile { min-height: 264px; }
    .tile-profile { min-height: 540px; }
    .tile-adaptive { min-height: 220px; }

    @media (max-width: 900px) {
      .bento-adaptive { grid-template-columns: 1fr; }
      .bento-adaptive-arrow { transform: rotate(90deg); justify-self: center; }
    }

    /* ─── Layer 2 bento — flow layout override ─────────────────────
       The original .bento-tile design uses position:absolute
       .tile-graphic with the title at the bottom. For the new
       content-heavy graphics in this section, switch to flow
       layout so the graphic occupies the top and the title sits
       cleanly below it without overlap. */
    #layer-graph .bento-tile {
      justify-content: flex-start;
      padding: 0;
      overflow: hidden;
    }
    #layer-graph .bento-tile::before { display: none; }
    #layer-graph .bento-tile .tile-graphic {
      position: relative;
      inset: auto;
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      padding: 0;
      pointer-events: auto;
    }
    #layer-graph .bento-tile .tile-meta {
      padding: 16px 20px 18px;
      border-top: 1px solid var(--border-soft);
      background: var(--white);
      flex-shrink: 0;
    }
    /* Restored bento layout: 4 corner tiles enforce exact 3:2 via
       aspect-ratio; tile-profile spans 2 rows and matches their
       combined height; tile-adaptive spans the full width on the
       bottom row. */
    #layer-graph .bento-learner {
      grid-template-rows: auto auto auto;
    }
    #layer-graph .bento-tile { min-height: 0; }
    #layer-graph .tile-skill,
    #layer-graph .tile-living,
    #layer-graph .tile-avatar,
    #layer-graph .tile-generated { aspect-ratio: 3 / 2; }
    #layer-graph .tile-profile { min-height: 0; }
    #layer-graph .tile-adaptive { min-height: 220px; }

    /* Responsive — all tiles share the SAME 3:2 aspect ratio at
       smaller viewports for a consistent grid. */
    @media (max-width: 1100px) {
      #layer-graph .bento-learner {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
      }
      #layer-graph .bento-tile,
      #layer-graph .tile-profile,
      #layer-graph .tile-adaptive {
        grid-column: auto;
        grid-row: auto;
        aspect-ratio: 3 / 2;
        min-height: 0;
      }
    }
    @media (max-width: 640px) {
      #layer-graph .bento-learner {
        grid-template-columns: 1fr;
        gap: 12px;
      }
      #layer-graph .bento-tile,
      #layer-graph .tile-profile,
      #layer-graph .tile-adaptive {
        aspect-ratio: 3 / 2;
      }
    }

    /* Bubble cloud inside the bento tile-profile — scale the cloud to
       fit the narrower tile (tile is ~490px wide vs hero card's 700px).
       The bubbles use absolute % positions so they spread naturally as
       the cloud resizes. */
    #layer-graph .tile-profile .tile-graphic {
      padding: 8px;
      position: relative;
      overflow: hidden;
      background: transparent;
    }
    #layer-graph .tile-profile .ls-profile-cloud {
      width: 100%;
      height: 100%;
      min-height: 440px;
    }
    /* The hero avatar is shifted +48px down to clear the bottom skills;
       inside the bento tile we want it centered. */
    #layer-graph .tile-profile .ls-profile-center {
      transform: translate(-50%, -50%);
    }

    /* Slightly shrink the avatar inside the bento context so the
       bubbles have more breathing room to surround it. */
    #layer-graph .tile-profile .ls-profile-avatar {
      width: 110px;
      height: 110px;
      font-size: 36px;
    }

    /* Maria's tile (bubble cloud) — no card surface so the cloud sits
       directly on the section background. Chained classes to beat the
       generic #layer-graph .bento-tile rule below in cascade order. */
    #layer-graph .bento-tile.tile-profile,
    #layer-graph .bento-tile.tile-profile:hover {
      background: transparent;
      border: 0;
      box-shadow: none;
    }
    #layer-graph .bento-tile.tile-profile .tile-graphic {
      background: transparent;
    }

    /* ─── Layer 2 (Graph) — dark theme ───────────────────────────── */
    #layer-graph.learner-section { background: var(--ink); }

    /* Header */
    #layer-graph .section-eyebrow { color: rgba(255, 255, 255, 0.55); }
    #layer-graph .section-h2 { color: var(--white); }
    #layer-graph .section-h2 .c { font-style: italic; color: var(--primary-500); }
    #layer-graph .section-sub { color: rgba(255, 255, 255, 0.65); }

    /* Tiles — translucent-white surface on dark, no white card */
    #layer-graph .bento-tile {
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(255, 255, 255, 0.08);
      box-shadow: none;
    }
    #layer-graph .bento-tile:hover {
      background: rgba(255, 255, 255, 0.06);
    }
    #layer-graph .bento-tile .tile-meta {
      background: transparent;
      border-top-color: rgba(255, 255, 255, 0.08);
    }
    #layer-graph .tile-title { color: var(--white); }
    #layer-graph .tile-sub  { color: rgba(255, 255, 255, 0.6); }

    /* Maria's tile stays transparent — the bubbles' glass surface reads
       fine against the ink section background. */

    /* tile-skill — progress */
    #layer-graph .bento-progress-eyebrow { color: rgba(255, 255, 255, 0.55); }
    #layer-graph .bento-progress-val { color: var(--primary-300); }
    #layer-graph .bento-progress-foot { color: rgba(255, 255, 255, 0.65); }

    /* tile-living — pulse + signal log */
    #layer-graph .bento-living-line { color: rgba(255, 255, 255, 0.6); }
    #layer-graph .bento-living-line::before { background: var(--primary-400); }

    /* tile-avatar — conversation */
    #layer-graph .bento-convo-them {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.1);
      color: var(--white);
    }
    #layer-graph .bento-convo-me {
      background: var(--primary-500);
      border-color: var(--primary-500);
      color: var(--white);
    }

    /* tile-generated */
    #layer-graph .bento-generated-eyebrow { color: var(--accent-400); }
    #layer-graph .bento-generated-label { color: rgba(255, 255, 255, 0.5); }
    #layer-graph .bento-generated-quote { color: var(--white); }
    #layer-graph .bento-generated-quote em { color: var(--primary-300); }
    #layer-graph .bento-generated-note { color: rgba(255, 255, 255, 0.65); }
    #layer-graph .bento-generated-note em { color: var(--primary-300); }

    /* tile-adaptive — curriculum/serving */
    #layer-graph .bento-adaptive-eyebrow { color: rgba(255, 255, 255, 0.55); }
    #layer-graph .bento-adaptive-item {
      background: rgba(255, 255, 255, 0.05);
      border-color: rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.85);
    }
    #layer-graph .bento-adaptive-num { color: var(--primary-300); }
    #layer-graph .bento-adaptive-name { color: var(--white); }
    #layer-graph .bento-adaptive-type { color: rgba(255, 255, 255, 0.5); }
    #layer-graph .bento-adaptive-arrow { color: var(--primary-300); }
    #layer-graph .bento-adaptive-serving .bento-adaptive-title { color: var(--white); }
    #layer-graph .bento-adaptive-source { color: rgba(255, 255, 255, 0.5); }
    #layer-graph .bento-adaptive-note {
      background: rgba(255, 39, 167, 0.14);
      color: var(--accent-300);
    }

    /* Tile graphics that use a custom image — fill the entire graphic area */
    #layer-graph .tile-graphic > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* Maria's tile — dark-mode bubbles: dark translucent surfaces with
       white text instead of the light glass + ink-2 text from the hero. */
    #layer-graph .tile-profile .ls-bubble-prof,
    #layer-graph .tile-profile .ls-bubble-interest {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
      border-color: rgba(255, 255, 255, 0.12);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 12px 28px rgba(0, 0, 0, 0.25);
    }
    #layer-graph .tile-profile .ls-bubble-icon { color: var(--white); }
    #layer-graph .tile-profile .ls-bubble-label { color: rgba(255, 255, 255, 0.7); }
    #layer-graph .tile-profile .ls-bubble-value { color: var(--white); }
    #layer-graph .tile-profile .ls-bubble-label-sm { color: rgba(255, 255, 255, 0.7); }
    #layer-graph .tile-profile .ls-profile-level { color: rgba(255, 255, 255, 0.65); }
    #layer-graph .tile-profile .ls-profile-name { color: var(--white); }

    /* ─── Layer 2 (Graph) — concentric node chart, DARK theme ─────────────
       3 levels: Maria (center, big) → 5 category L2 → L3 phenomena around
       each L2. Straight lines connect L2→Maria and L3→L2. Popover always
       anchored to the right side of the canvas. */

    .graph-section.learner-section {
      background: var(--ink);
      padding-top: 96px;
      padding-bottom: 96px;
    }
    .graph-section .section-eyebrow { color: rgba(255, 255, 255, 0.55); }
    .graph-section .section-h2      { color: var(--white); }
    .graph-section .section-h2 .c   { font-style: italic; color: var(--primary-300); }
    .graph-section .section-sub     { color: rgba(255, 255, 255, 0.65); }

    /* Category colors */
    .graph-canvas {
      --cat-grammar:        #4DA3FF;
      --cat-grammar-strong: #007BFF;
      --cat-grammar-soft:   rgba(77, 163, 255, 0.18);
      --cat-vocab:          #4ADE80;
      --cat-vocab-strong:   #22C55E;
      --cat-vocab-soft:     rgba(74, 222, 128, 0.18);
      --cat-pron:           #FBBF24;
      --cat-pron-strong:    #F59E0B;
      --cat-pron-soft:      rgba(251, 191, 36, 0.18);
      --cat-comm:           #A78BFA;
      --cat-comm-strong:    #8B5CF6;
      --cat-comm-soft:      rgba(167, 139, 250, 0.18);
      --cat-interest:       #F472B6;
      --cat-interest-strong:#EC4899;
      --cat-interest-soft:  rgba(244, 114, 182, 0.18);
      --weak:               #F87171;
      --weak-soft:          rgba(248, 113, 113, 0.18);
    }

    /* Canvas */
    .graph-canvas {
      position: relative;
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      height: 880px;
      border-radius: var(--r-lg);
      overflow: visible;
    }

    /* Subtle dot grid backdrop */
    .graph-grid {
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
      background-size: 28px 28px;
      pointer-events: none;
      mask-image: radial-gradient(ellipse at center, #000 55%, transparent 100%);
      -webkit-mask-image: radial-gradient(ellipse at center, #000 55%, transparent 100%);
    }

    /* SVG line layer (straight lines) */
    .graph-lines {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }
    .graph-lines line {
      stroke-width: 1.2;
      opacity: 0.35;
      stroke-linecap: round;
      transition: opacity 200ms var(--ease-out), stroke-width 200ms var(--ease-out);
    }
    .graph-lines line.is-active { opacity: 1; stroke-width: 2; }
    .graph-lines line.gl-grammar  { stroke: var(--cat-grammar);  }
    .graph-lines line.gl-vocab    { stroke: var(--cat-vocab);    }
    .graph-lines line.gl-pron     { stroke: var(--cat-pron);     }
    .graph-lines line.gl-comm     { stroke: var(--cat-comm);     }
    .graph-lines line.gl-interest { stroke: var(--cat-interest); }

    /* ── LEVEL 1: Maria (center, big, the main thing) ───────────────── */
    .graph-center {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      pointer-events: none;
    }
    .graph-avatar {
      width: 180px;
      height: 180px;
      border-radius: 50%;
      overflow: hidden;
      background: var(--primary-500);
      box-shadow:
        0 0 0 10px var(--ink),
        0 0 0 11px rgba(255, 255, 255, 0.08),
        0 24px 60px rgba(0, 0, 0, 0.5),
        0 0 80px rgba(77, 163, 255, 0.2);
    }
    .graph-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .graph-center-meta {
      text-align: center;
      background: rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      padding: 10px 18px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .graph-center-name {
      font-family: var(--font);
      font-weight: 600;
      font-size: 15px;
      color: var(--white);
      line-height: 1.2;
    }
    .graph-center-level {
      font-family: var(--font);
      font-weight: 500;
      font-size: 11px;
      color: rgba(255, 255, 255, 0.6);
      letter-spacing: 0.04em;
      margin-top: 2px;
    }
    /* Total signals chip — sits under the name/level inside the center
       meta. Replaces the top-left card. */
    .graph-center-signals {
      display: inline-flex;
      align-items: baseline;
      gap: 5px;
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid rgba(255, 255, 255, 0.12);
      width: 100%;
      justify-content: center;
    }
    .gcs-value {
      font-family: var(--font);
      font-weight: 700;
      font-size: 16px;
      color: var(--white);
      line-height: 1;
      letter-spacing: -0.01em;
    }
    .gcs-label {
      font-family: var(--font);
      font-weight: 500;
      font-size: 10px;
      color: rgba(255, 255, 255, 0.55);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    /* Top-left: total signals card */
    .graph-stat {
      position: absolute;
      top: 24px;
      left: 24px;
      z-index: 6;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: var(--r-md);
      padding: 14px 20px;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      min-width: 132px;
    }
    .graph-stat-label {
      display: block;
      font-family: var(--font);
      font-weight: 600;
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.55);
    }
    .graph-stat-value {
      display: block;
      font-family: var(--font);
      font-weight: 700;
      font-size: 32px;
      color: var(--white);
      line-height: 1;
      margin-top: 6px;
      letter-spacing: -0.02em;
    }

    /* Bottom-left: legend */
    .graph-legend {
      position: absolute;
      bottom: 24px;
      left: 24px;
      z-index: 6;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 999px;
      padding: 9px 16px;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      max-width: calc(100% - 48px);
    }
    .gl-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font);
      font-weight: 500;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.78);
      white-space: nowrap;
    }
    .gl-item .gl-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }
    .gl-item.gl-grammar  .gl-dot { background: var(--cat-grammar); }
    .gl-item.gl-vocab    .gl-dot { background: var(--cat-vocab); }
    .gl-item.gl-pron     .gl-dot { background: var(--cat-pron); }
    .gl-item.gl-comm     .gl-dot { background: var(--cat-comm); }
    .gl-item.gl-interest .gl-dot { background: var(--cat-interest); }

    /* Top hint pill */
    .graph-hint {
      position: absolute;
      top: 28px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 6;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.65);
      font-family: var(--font);
      font-weight: 500;
      font-size: 11px;
      padding: 8px 16px;
      border-radius: 999px;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      letter-spacing: 0.02em;
    }

    /* ── Bubble base (shared by L2 and L3) ──────────────────────────── */

    .gb {
      position: absolute;
      left: var(--x);
      top: var(--y);
      width: var(--size);
      height: var(--size);
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: linear-gradient(160deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 100%);
      border: 1px solid var(--cat-color-ring, rgba(255, 255, 255, 0.14));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 16px 36px rgba(0, 0, 0, 0.45),
        0 0 0 4px var(--cat-glow, transparent);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      padding: 10px 12px;
      cursor: pointer;
      font-family: var(--font);
      text-align: center;
      color: var(--white);
      animation: gb-float var(--gb-dur, 8s) ease-in-out infinite;
      animation-delay: var(--gb-delay, 0s);
      transition:
        transform 240ms var(--ease-out),
        box-shadow 240ms var(--ease-out),
        border-color 200ms var(--ease-out);
      will-change: transform;
    }
    .gb:hover,
    .gb:focus-visible {
      outline: none;
      transform: translate(-50%, -50%) scale(1.05);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 20px 44px rgba(0, 0, 0, 0.5),
        0 0 0 6px var(--cat-glow, transparent);
    }
    .gb.is-active {
      transform: translate(-50%, -50%) scale(1.08);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 22px 50px rgba(0, 0, 0, 0.6),
        0 0 0 8px var(--cat-glow, transparent);
    }

    /* L2 (category) bubble — bigger, with icon + name + % */
    .gb-l2 { z-index: 4; }
    .gb-l2 .gb-icon {
      font-size: 22px;
      color: var(--cat-color-fg, var(--white));
      margin-bottom: 2px;
    }
    .gb-l2 .gb-name {
      font-weight: 600;
      font-size: 12px;
      line-height: 1.15;
      color: rgba(255, 255, 255, 0.88);
      letter-spacing: -0.01em;
      max-width: 92%;
    }
    .gb-l2 .gb-value {
      font-weight: 700;
      font-size: 22px;
      color: var(--white);
      line-height: 1;
      letter-spacing: -0.02em;
      margin-top: 2px;
    }

    /* L3 (phenomena) bubble — smaller, no icon */
    .gb-l3 { z-index: 3; }
    .gb-l3 .gb-name {
      font-weight: 600;
      font-size: 10.5px;
      line-height: 1.15;
      color: rgba(255, 255, 255, 0.85);
      letter-spacing: -0.01em;
      max-width: 90%;
    }
    .gb-l3 .gb-value {
      font-weight: 700;
      font-size: 17px;
      color: var(--white);
      line-height: 1;
      letter-spacing: -0.02em;
      margin-top: 2px;
    }
    .gb-l3 .gb-unit {
      font-weight: 500;
      font-size: 9px;
      color: rgba(255, 255, 255, 0.55);
      letter-spacing: 0.04em;
      text-transform: lowercase;
    }

    /* Interest L3 bubbles — emoji style (no progress, just emoji + label).
       Note: this rule still applies to .gb-l3.gb-interest, but the active
       Interest L3 markup now uses .gb-pill which overrides shape/layout. */
    .gb-interest.gb-l3 {
      background: linear-gradient(160deg, rgba(244, 114, 182, 0.18) 0%, rgba(236, 72, 153, 0.08) 100%);
      gap: 0;
    }
    .gb-interest.gb-l3 .gb-emoji {
      font-size: 28px;
      line-height: 1;
      margin-bottom: 4px;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    }
    .gb-interest.gb-l3 .gb-name {
      font-size: 11px;
      font-weight: 600;
      color: var(--white);
    }

    /* ── Interest L3 pill row — horizontal flex, hug-width pills,
       zigzag via alternating translateY on odd/even children. ─────── */
    .interest-pill-row {
      position: absolute;
      top: 4%;
      left: 50%;
      transform: translateX(-50%);
      z-index: 3;
      display: flex;
      align-items: center;
      gap: 18px;
      pointer-events: none;
    }
    .interest-pill-row > .gb-pill { pointer-events: auto; }

    .gb.gb-pill {
      /* Reset absolute positioning from .gb base */
      position: static;
      left: auto;
      top: auto;
      /* Hug width */
      width: auto;
      height: auto;
      min-height: 0;
      /* Pill shape */
      border-radius: 999px;
      padding: 8px 14px 8px 12px;
      /* Glassy surface, same tokens as cards */
      background: linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
      border: 1px solid rgba(244, 114, 182, 0.32);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 10px 22px rgba(0, 0, 0, 0.32);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      /* Inline row layout */
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 8px;
      text-align: left;
      animation: none;
      transition:
        transform 240ms var(--ease-out),
        background 240ms var(--ease-out),
        border-color 240ms var(--ease-out);
    }
    .gb.gb-pill .gb-emoji {
      font-size: 18px;
      line-height: 1;
      margin: 0;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    }
    .gb.gb-pill .gb-name {
      font-family: var(--font);
      font-size: 12.5px;
      font-weight: 600;
      color: var(--white);
      letter-spacing: -0.01em;
      line-height: 1;
      margin: 0;
    }

    /* Zigzag — odd children up, even children down */
    .interest-pill-row > .gb-pill:nth-child(odd)  { transform: translateY(-12px); }
    .interest-pill-row > .gb-pill:nth-child(even) { transform: translateY( 12px); }

    .gb.gb-pill:hover,
    .gb.gb-pill:focus-visible {
      outline: none;
      background: linear-gradient(160deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%);
      border-color: rgba(244, 114, 182, 0.5);
    }
    .interest-pill-row > .gb-pill:nth-child(odd):hover,
    .interest-pill-row > .gb-pill:nth-child(odd):focus-visible,
    .interest-pill-row > .gb-pill:nth-child(odd).is-active  { transform: translateY(-12px) scale(1.05); }
    .interest-pill-row > .gb-pill:nth-child(even):hover,
    .interest-pill-row > .gb-pill:nth-child(even):focus-visible,
    .interest-pill-row > .gb-pill:nth-child(even).is-active { transform: translateY( 12px) scale(1.05); }
    .gb.gb-pill.is-active {
      background: linear-gradient(160deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 100%);
      border-color: rgba(244, 114, 182, 0.6);
    }

    /* ── L3 rectangle cards (Grammar / Vocab / Pron / Comm) ──────────
       Glassy dark-mode treatment. 2-column grid: name + signals stacked
       on the left, arrow icon button on the right. Progress bar removed. */
    .gb.gb-card {
      width: 168px;
      height: auto;
      min-height: 0;
      padding: 12px 12px 12px 14px;
      background: linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 100%);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-left: 4px solid var(--cat-color-fg, var(--cat-grammar));
      border-radius: 8px;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 16px 36px rgba(0, 0, 0, 0.35);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      /* 2-column grid: left = name + meta stacked, right = arrow icon */
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 2px 12px;
      text-align: left;
    }
    .gb.gb-card .gb-name { grid-column: 1; grid-row: 1; }
    .gb.gb-card .gb-meta { grid-column: 1; grid-row: 2; }
    .gb.gb-card:hover,
    .gb.gb-card:focus-visible {
      background: linear-gradient(160deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.04) 100%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 22px 48px rgba(0, 0, 0, 0.45);
      transform: translate(-50%, -50%) scale(1.03);
    }
    .gb.gb-card.is-active {
      background: linear-gradient(160deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 24px 52px rgba(0, 0, 0, 0.5);
      transform: translate(-50%, -50%) scale(1.04);
    }
    .gb.gb-card .gb-name {
      font-family: var(--font);
      font-weight: 600;
      font-size: 12.5px;
      line-height: 1.2;
      color: var(--white);
      letter-spacing: -0.01em;
      max-width: 100%;
    }
    .gb.gb-card .gb-meta {
      display: flex;
      align-items: baseline;
      gap: 5px;
      margin-top: 2px;
    }
    .gb.gb-card .gb-meta .gb-value {
      font-family: var(--font);
      font-weight: 700;
      font-size: 17px;
      color: var(--white);
      line-height: 1;
      letter-spacing: -0.02em;
      margin: 0;
    }
    .gb.gb-card .gb-meta .gb-unit {
      font-family: var(--font);
      font-weight: 500;
      font-size: 10.5px;
      color: rgba(255, 255, 255, 0.55);
      letter-spacing: 0;
      text-transform: none;
    }
    /* Progress bar removed from cards */
    .gb.gb-card .gb-bar { display: none; }

    /* "View more" repurposed as a circular icon button in column 2.
       The "View more" text node is hidden via font-size: 0 on the
       wrapper; the SVG keeps its explicit width/height. */
    .gb.gb-card .gb-view {
      grid-column: 2;
      grid-row: 1 / span 2;
      align-self: center;
      justify-self: end;
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.07);
      border: 1px solid rgba(255, 255, 255, 0.14);
      color: rgba(255, 255, 255, 0.7);
      font-size: 0;
      letter-spacing: 0;
      gap: 0;
      margin: 0;
      flex: none;
      transition:
        background 160ms var(--ease-out),
        border-color 160ms var(--ease-out),
        color 160ms var(--ease-out);
    }
    .gb.gb-card .gb-view svg {
      width: 12px;
      height: 12px;
      transition: transform 160ms var(--ease-out);
    }
    .gb.gb-card:hover .gb-view,
    .gb.gb-card.is-active .gb-view {
      background: rgba(255, 255, 255, 0.16);
      border-color: rgba(255, 255, 255, 0.24);
      color: var(--white);
    }
    .gb.gb-card:hover .gb-view svg,
    .gb.gb-card.is-active .gb-view svg {
      transform: translateX(1px);
    }
    /* "Needs work" cards: red left edge + red flag below */
    .gb.gb-card.is-weak {
      border-left-color: var(--weak);
    }
    .gb.gb-card .gb-flag {
      bottom: -12px;
    }

    /* Override the circular box-shadow halo for rectangle cards */
    .gb.gb-card,
    .gb.gb-card:hover,
    .gb.gb-card.is-active {
      --cat-glow: transparent;
    }

    /* L2 skill bubbles — no colored ring or glow (per design directive) */
    .gb.gb-l2 {
      border-color: rgba(255, 255, 255, 0.14);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 16px 36px rgba(0, 0, 0, 0.45);
    }
    .gb.gb-l2:hover,
    .gb.gb-l2:focus-visible {
      border-color: rgba(255, 255, 255, 0.22);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 20px 44px rgba(0, 0, 0, 0.5);
    }
    .gb.gb-l2.is-active {
      border-color: rgba(255, 255, 255, 0.28);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 22px 50px rgba(0, 0, 0, 0.6);
    }

    /* Per-category edge + bar color, picked from the existing category
       palette already defined on .graph-canvas. */
    .gb.gb-card.gb-grammar { --cat-color-fg: var(--cat-grammar); }
    .gb.gb-card.gb-vocab   { --cat-color-fg: var(--cat-vocab); }
    .gb.gb-card.gb-pron    { --cat-color-fg: var(--cat-pron); }
    .gb.gb-card.gb-comm    { --cat-color-fg: var(--cat-comm); }

    /* ── Interest L2 (topic, no %): value renders as "30 signals" ─── */
    .gb-l2.gb-interest.is-topic .gb-value-count {
      font-family: var(--font);
      font-weight: 700;
      font-size: 18px;
      color: var(--white);
      line-height: 1;
      letter-spacing: -0.01em;
      margin-top: 2px;
      display: inline-flex;
      align-items: baseline;
      gap: 4px;
    }
    .gb-l2.gb-interest.is-topic .gb-value-count .gb-unit {
      font-size: 10.5px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.6);
      letter-spacing: 0;
      text-transform: none;
    }

    /* ── Popover: topic variant (Interest) — swap proficiency for
       activity stats; layout otherwise unchanged. ─────────────────── */
    .gp-activity {
      background: #F3F4F6;
      border-radius: 12px;
      padding: 12px 16px;
      margin-bottom: 18px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .gp-activity-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .gp-activity-label {
      font-family: var(--font);
      font-weight: 600;
      font-size: 13px;
      color: var(--ink-2);
    }
    .gp-activity-value {
      font-family: var(--font);
      font-weight: 700;
      font-size: 14px;
      color: var(--gp-cat-fg, var(--cat-grammar-strong));
      letter-spacing: -0.01em;
    }

    /* ── Line colors: neutral border tint (not category-colored) ───── */
    .graph-lines line,
    .graph-lines line.gl-grammar,
    .graph-lines line.gl-vocab,
    .graph-lines line.gl-pron,
    .graph-lines line.gl-comm,
    .graph-lines line.gl-interest {
      stroke: rgba(255, 255, 255, 0.14);
    }
    .graph-lines line.is-active {
      stroke: rgba(255, 255, 255, 0.45);
    }

    /* "Needs work" flag */
    .gb-flag {
      position: absolute;
      bottom: -12px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--weak-soft);
      color: var(--weak);
      border: 1px solid rgba(248, 113, 113, 0.4);
      border-radius: 999px;
      padding: 3px 9px;
      font-size: 9.5px;
      font-weight: 600;
      letter-spacing: 0.02em;
      white-space: nowrap;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    /* Category color application */
    .gb-grammar  { --cat-color-ring: rgba(77, 163, 255, 0.5);   --cat-glow: var(--cat-grammar-soft);  --cat-color-fg: var(--cat-grammar); }
    .gb-vocab    { --cat-color-ring: rgba(74, 222, 128, 0.5);   --cat-glow: var(--cat-vocab-soft);    --cat-color-fg: var(--cat-vocab); }
    .gb-pron     { --cat-color-ring: rgba(251, 191, 36, 0.5);   --cat-glow: var(--cat-pron-soft);     --cat-color-fg: var(--cat-pron); }
    .gb-comm     { --cat-color-ring: rgba(167, 139, 250, 0.5);  --cat-glow: var(--cat-comm-soft);     --cat-color-fg: var(--cat-comm); }
    .gb-interest { --cat-color-ring: rgba(244, 114, 182, 0.5);  --cat-glow: var(--cat-interest-soft); --cat-color-fg: var(--cat-interest); }

    .gb.is-weak {
      --cat-color-ring: rgba(248, 113, 113, 0.55);
      --cat-glow: var(--weak-soft);
      border-width: 1.5px;
    }

    /* Float animation — light variations only, this is busier than the
       hero so we keep movement minimal. */
    @keyframes gb-float {
      0%, 100% { transform: translate(-50%, -50%) translate(0, 0); }
      50%      { transform: translate(-50%, -50%) translate(var(--gb-fx, 3px), var(--gb-fy, -2px)); }
    }
    .gb:nth-of-type(3n)   { --gb-dur: 8.4s; --gb-delay: 0.3s; --gb-fx:  3px; --gb-fy: -2px; }
    .gb:nth-of-type(3n+1) { --gb-dur: 9.6s; --gb-delay: 1.1s; --gb-fx: -4px; --gb-fy:  3px; }
    .gb:nth-of-type(3n+2) { --gb-dur: 10.2s; --gb-delay: 0.6s; --gb-fx:  2px; --gb-fy: -4px; }

    /* ── Popover — always anchored to the right side of the canvas ──── */

    .graph-popover {
      position: absolute;
      top: 80px;
      right: 24px;
      width: 340px;
      max-width: calc(100% - 48px);
      background: var(--white);
      border-radius: var(--r-md);
      border: 1px solid rgba(255, 255, 255, 0.15);
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
      z-index: 20;
      overflow: hidden;
      animation: gp-in 220ms var(--ease-out) both;
    }
    .graph-popover[hidden] { display: none; }
    @keyframes gp-in {
      from { opacity: 0; transform: translateX(8px); }
      to   { opacity: 1; transform: translateX(0); }
    }

    .gp-head {
      position: relative;
      padding: 18px 20px 16px;
      background: var(--gp-head-bg, rgba(77, 163, 255, 0.14));
      border-bottom: 1px solid var(--border-soft);
    }
    .gp-cat-pill {
      display: inline-block;
      background: var(--gp-cat-bg, var(--cat-grammar-strong));
      color: var(--white);
      font-family: var(--font);
      font-weight: 700;
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 5px 12px;
      border-radius: 999px;
    }
    .gp-close {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 28px;
      height: 28px;
      border: 0;
      background: transparent;
      color: var(--ink-3);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
    }
    .gp-close:hover { background: rgba(15, 23, 42, 0.08); color: var(--ink); }
    .gp-close svg { width: 16px; height: 16px; }

    .gp-title {
      font-family: var(--font);
      font-weight: 700;
      font-size: 22px;
      color: var(--gp-cat-fg, var(--cat-grammar-strong));
      margin: 12px 0 4px;
      letter-spacing: -0.01em;
      line-height: 1.15;
    }
    .gp-taxonomy {
      font-family: var(--font);
      font-weight: 500;
      font-size: 12px;
      color: var(--ink-3);
      margin: 0;
      letter-spacing: 0.02em;
    }

    .gp-body { padding: 18px 20px 20px; }
    .gp-desc {
      font-family: var(--font);
      font-size: 13.5px;
      color: var(--ink-2);
      line-height: 1.5;
      margin: 0 0 16px;
    }

    .gp-prof {
      background: #F3F4F6;
      border-radius: 12px;
      padding: 14px 16px;
      margin-bottom: 18px;
    }
    .gp-prof-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }
    .gp-prof-label {
      font-family: var(--font);
      font-weight: 600;
      font-size: 13px;
      color: var(--ink-2);
    }
    .gp-prof-value {
      font-family: var(--font);
      font-weight: 700;
      font-size: 14px;
      color: var(--gp-status-fg, #16A34A);
      letter-spacing: -0.01em;
    }
    .gp-prof-track {
      height: 8px;
      background: #E5E7EB;
      border-radius: 999px;
      overflow: hidden;
    }
    .gp-prof-fill {
      display: block;
      height: 100%;
      width: var(--gp-fill, 0%);
      background: var(--gp-status-fg, #16A34A);
      border-radius: inherit;
      transition: width 400ms var(--ease-out);
    }

    .gp-ev-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }
    .gp-ev-label {
      font-family: var(--font);
      font-weight: 700;
      font-size: 14px;
      color: var(--ink);
      letter-spacing: -0.01em;
    }
    .gp-ev-count {
      font-family: var(--font);
      font-weight: 500;
      font-size: 12px;
      color: var(--ink-3);
    }
    .gp-ev-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .gp-ev-list li {
      background: #F3F4F6;
      border-left: 3px solid var(--gp-cat-bg, var(--cat-grammar-strong));
      border-radius: 10px;
      padding: 10px 14px;
      font-family: var(--font);
      font-size: 13px;
      color: var(--ink-2);
      line-height: 1.4;
    }

    /* Category theming for popover */
    .graph-popover[data-cat="grammar"]  { --gp-head-bg: rgba(77, 163, 255, 0.14);   --gp-cat-bg: #007BFF;  --gp-cat-fg: #007BFF;  }
    .graph-popover[data-cat="vocab"]    { --gp-head-bg: rgba(74, 222, 128, 0.16);   --gp-cat-bg: #22C55E;  --gp-cat-fg: #16A34A;  }
    .graph-popover[data-cat="pron"]     { --gp-head-bg: rgba(251, 191, 36, 0.18);   --gp-cat-bg: #F59E0B;  --gp-cat-fg: #D97706;  }
    .graph-popover[data-cat="comm"]     { --gp-head-bg: rgba(167, 139, 250, 0.16);  --gp-cat-bg: #8B5CF6;  --gp-cat-fg: #7C3AED;  }
    .graph-popover[data-cat="interest"] { --gp-head-bg: rgba(244, 114, 182, 0.16);  --gp-cat-bg: #EC4899;  --gp-cat-fg: #DB2777;  }

    .graph-popover[data-status="good"]       { --gp-status-fg: #16A34A; }
    .graph-popover[data-status="developing"] { --gp-status-fg: #F59E0B; }
    .graph-popover[data-status="weak"]       { --gp-status-fg: #DC2626; }

    /* ── Mobile fallback ─────────────────────────────────────────────── */

    @media (max-width: 900px) {
      .graph-canvas {
        height: auto;
        padding: 80px 16px 64px;
        border-radius: var(--r-md);
      }
      .graph-grid, .graph-lines { display: none; }
      .graph-stat, .graph-hint { position: static; margin: 0 auto 16px; }
      .graph-stat { display: inline-flex; flex-direction: column; align-items: center; }
      .graph-center { position: static; transform: none; margin: 0 auto 32px; }
      .graph-avatar { width: 140px; height: 140px; }
      .gb {
        position: static;
        transform: none;
        width: 100%;
        max-width: none;
        height: auto;
        min-height: 0;
        border-radius: 14px;
        padding: 14px 16px;
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        gap: 12px;
        margin-bottom: 10px;
        animation: none;
      }
      .gb:hover, .gb:focus-visible, .gb.is-active { transform: none; }
      .gb .gb-icon, .gb .gb-emoji { font-size: 22px; margin: 0; }
      .gb .gb-name { flex: 1; max-width: none; font-size: 14px; }
      .gb .gb-value { font-size: 18px; margin: 0; }
      .gb-flag { position: static; transform: none; margin-left: auto; }
      .graph-legend { position: static; margin: 24px auto 0; justify-content: center; }
      .graph-popover {
        position: fixed;
        top: 50%;
        left: 50%;
        right: auto;
        transform: translate(-50%, -50%);
        width: min(360px, calc(100% - 32px));
        max-height: 80vh;
        overflow-y: auto;
      }
    }

    /* ================================================================
       LEARNER GRAPH v3 (.lg-*) — orbital avatar + accordion skills
       Layout: 2-col grid on desktop (orbit | accordions); stacks on
       tablet/phone. Skill panels are native <details> elements; when
       opened they reveal signal rows. Dark glassy theme.
       ================================================================ */

    #layer-graph.lg-section {
      background: var(--ink);
      padding-top: 96px;
      padding-bottom: 96px;
    }

    /* Desktop vs mobile/tablet visibility toggle.
       Specificity bumped to override .lg-stage { display: grid } and
       .graph-canvas { ... } which come later in the cascade. */
    #layer-graph .lg-desktop-only { display: block; }
    #layer-graph .lg-mobile-only  { display: none !important; }
    @media (max-width: 1023px) {
      #layer-graph .lg-desktop-only { display: none !important; }
      #layer-graph .lg-mobile-only  { display: grid !important; }
    }
    .lg-section .section-eyebrow {
      color: rgba(255, 255, 255, 0.78);
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.12);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      box-shadow: none;
    }
    .lg-section .section-h2      { color: var(--white); }
    .lg-section .section-h2 .c,
    .lg-section .section-h2 em   { font-style: italic; color: var(--primary-300, #93b5ff); }
    .lg-section .section-sub     { color: rgba(255, 255, 255, 0.65); }

    .lg-stage {
      display: grid;
      grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
      gap: 72px;
      align-items: start;
      max-width: 1280px;
      margin: 0 auto;
    }

    /* ── ORBIT cluster (avatar + interest pills + skill bubbles) ── */
    .lg-orbit {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
      max-width: 520px;
      margin: 0 auto;
    }
    .lg-avatar {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 38%;
      aspect-ratio: 1 / 1;
      border-radius: var(--r-full);
      overflow: hidden;
      border: 4px solid rgba(255, 255, 255, 0.12);
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 22px 60px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(147, 181, 255, 0.12);
      z-index: 2;
    }
    .lg-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .lg-orbit-meta {
      position: absolute;
      left: 50%;
      bottom: -64px;
      transform: translateX(-50%);
      text-align: center;
      width: 100%;
      max-width: 280px;
    }
    .lg-orbit-name {
      font-family: var(--font);
      font-weight: 700;
      font-size: 18px;
      color: var(--white);
      line-height: 1.2;
      letter-spacing: -0.2px;
    }
    .lg-orbit-level {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.62);
      margin-top: 2px;
    }
    .lg-orbit-signals {
      margin-top: 8px;
      display: inline-block;
      padding: 6px 14px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.12);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-radius: var(--r-full);
      font-size: 12px;
      color: rgba(255, 255, 255, 0.78);
    }
    .lg-orbit-signals strong { color: var(--white); font-weight: 700; }

    /* Interest pills — glassy, orbital positioning at 4 corners */
    .lg-interest {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 10px 14px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.14);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: var(--r-md);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 8px 24px rgba(0, 0, 0, 0.25);
      min-width: 90px;
      z-index: 1;
    }
    .lg-interest-emoji { font-size: 22px; line-height: 1; }
    .lg-interest-name {
      font-family: var(--font);
      font-weight: 600;
      font-size: 12.5px;
      color: var(--white);
    }
    .lg-interest-meta {
      font-size: 10.5px;
      color: rgba(255, 255, 255, 0.55);
      letter-spacing: 0.02em;
    }
    .lg-interest-tl { top: 4%;    left: 0%; }
    .lg-interest-tr { top: 4%;    right: 0%; }
    .lg-interest-bl { bottom: 4%; left: 0%; }
    .lg-interest-br { bottom: 4%; right: 0%; }

    /* Skill bubbles — bigger, orbital, surrounding avatar at cardinal points */
    .lg-skill-bubble {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 12px 14px 10px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid var(--lg-color-soft, rgba(255, 255, 255, 0.16));
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: var(--r-md);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 12px 28px rgba(0, 0, 0, 0.3),
        0 0 24px var(--lg-color-soft, transparent);
      min-width: 108px;
      z-index: 1;
    }
    .lg-skill-bubble .lg-skill-icon {
      width: 30px; height: 30px;
      font-size: 18px;
      margin-bottom: 4px;
    }
    .lg-skill-bubble-name {
      font-family: var(--font);
      font-weight: 600;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.92);
      letter-spacing: -0.1px;
    }
    .lg-skill-bubble-pct {
      font-family: var(--font);
      font-weight: 700;
      font-size: 16px;
      color: var(--white);
      letter-spacing: -0.3px;
      font-feature-settings: 'tnum' 1;
    }
    .lg-skill-bubble-top {
      top: -6%;
      left: 50%;
      transform: translateX(-50%);
    }
    .lg-skill-bubble-right {
      top: 50%;
      right: -8%;
      transform: translateY(-50%);
    }
    .lg-skill-bubble-bottom {
      bottom: -6%;
      left: 50%;
      transform: translateX(-50%);
    }
    .lg-skill-bubble-left {
      top: 50%;
      left: -8%;
      transform: translateY(-50%);
    }

    /* ── SKILL accordions ── */
    .lg-skills {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .lg-skill {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.10);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-radius: var(--r-md);
      overflow: hidden;
      transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    }
    .lg-skill[open] {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.18);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 16px 40px rgba(0, 0, 0, 0.35);
    }
    .lg-skill summary {
      list-style: none;
      cursor: pointer;
      display: grid;
      grid-template-columns: auto 1fr auto auto auto;
      gap: 14px;
      align-items: center;
      padding: 16px 20px;
      user-select: none;
    }
    .lg-skill summary::-webkit-details-marker { display: none; }
    .lg-skill summary::marker { display: none; }
    .lg-skill summary:hover { background: rgba(255, 255, 255, 0.04); }

    .lg-skill-icon {
      font-size: 20px;
      width: 36px; height: 36px;
      border-radius: var(--r-sm);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--lg-color, var(--white));
      background: var(--lg-color-soft, rgba(255, 255, 255, 0.06));
      border: 1px solid var(--lg-color-soft, rgba(255, 255, 255, 0.12));
    }
    .lg-skill-grammar { --lg-color: #4DA3FF; --lg-color-soft: rgba(77, 163, 255, 0.16); }
    .lg-skill-vocab   { --lg-color: #4ADE80; --lg-color-soft: rgba(74, 222, 128, 0.16); }
    .lg-skill-pron    { --lg-color: #FBBF24; --lg-color-soft: rgba(251, 191, 36, 0.16); }
    .lg-skill-comm    { --lg-color: #A78BFA; --lg-color-soft: rgba(167, 139, 250, 0.16); }

    .lg-skill-name {
      font-family: var(--font);
      font-weight: 700;
      font-size: 16px;
      color: var(--white);
    }
    .lg-skill-pct {
      font-family: var(--font);
      font-weight: 700;
      font-size: 18px;
      color: var(--white);
      font-feature-settings: 'tnum' 1;
      letter-spacing: -0.3px;
    }
    .lg-skill-signals {
      font-size: 11.5px;
      color: rgba(255, 255, 255, 0.55);
      letter-spacing: 0.02em;
    }
    .lg-skill-chev {
      font-size: 22px;
      color: rgba(255, 255, 255, 0.55);
      transition: transform 0.22s ease;
    }
    .lg-skill[open] .lg-skill-chev { transform: rotate(180deg); }

    .lg-signals {
      display: flex;
      flex-direction: column;
      padding: 4px 20px 18px;
      gap: 4px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      margin-top: 0;
    }
    .lg-signal {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        "head pct"
        "count bar";
      gap: 4px 16px;
      align-items: center;
      padding: 12px 0;
      font-family: var(--font);
    }
    .lg-signal + .lg-signal {
      border-top: 1px dashed rgba(255, 255, 255, 0.08);
    }
    .lg-signal-head {
      grid-area: head;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .lg-signal-name {
      font-weight: 600;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.92);
    }
    .lg-signal-count {
      grid-area: count;
      font-size: 11.5px;
      color: rgba(255, 255, 255, 0.5);
    }
    .lg-signal-bar {
      grid-area: bar;
      width: 100%;
      min-width: 80px;
      height: 4px;
      background: rgba(255, 255, 255, 0.08);
      border-radius: var(--r-full);
      overflow: hidden;
      position: relative;
    }
    .lg-signal-bar > span {
      display: block;
      height: 100%;
      width: var(--w, 50%);
      background: var(--lg-color, var(--primary-300, #93b5ff));
      border-radius: inherit;
    }
    .lg-signal.is-weak .lg-signal-bar > span { background: #F87171; }
    .lg-signal-pct {
      grid-area: pct;
      font-family: var(--font);
      font-weight: 700;
      font-size: 15px;
      color: var(--white);
      font-feature-settings: 'tnum' 1;
      min-width: 40px;
      text-align: right;
      letter-spacing: -0.2px;
    }
    .lg-signal-flag {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #FCA5A5;
      background: rgba(248, 113, 113, 0.14);
      border: 1px solid rgba(248, 113, 113, 0.28);
      padding: 3px 8px;
      border-radius: var(--r-full);
      white-space: nowrap;
    }

    /* ── Responsive ── */
    @media (max-width: 1024px) {
      .lg-stage {
        grid-template-columns: 1fr;
        gap: 96px;
      }
      .lg-orbit { max-width: 320px; }
      .lg-skill-bubble { display: none; } /* hide orbit-attached skill bubbles below desktop */
    }
    @media (max-width: 640px) {
      .lg-stage { gap: 80px; }
      .lg-orbit { max-width: 280px; }
      .lg-interest {
        min-width: 78px;
        padding: 8px 10px;
      }
      .lg-interest-name { font-size: 11.5px; }
      .lg-interest-meta { font-size: 10px; }
      .lg-skill summary {
        grid-template-columns: auto 1fr auto auto;
        gap: 10px;
        padding: 14px 16px;
      }
      .lg-skill-signals { display: none; }
      .lg-signals { padding: 4px 16px 14px; }
      .lg-signal { gap: 4px 12px; }
    }

    /* ================================================================
       MOBILE NAV — single morphing component
       Closed state: nav hugs content (just logo + burger), height auto.
       Open state: nav.is-open → fills viewport, burger morphs to X,
       page links + CTA reveal stacked below.
       ================================================================ */

    /* Desktop: nav-bar is transparent so logo + burger flatten into the
       row alongside .nav-links and .nav-cta. Burger is hidden via media
       query at the bottom of this block. */
    .nav-bar {
      display: contents;
    }

    .nav-burger {
      display: none;
      position: relative;
      width: 44px; height: 44px;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: 0;
      cursor: pointer;
      padding: 0;
      flex-shrink: 0;
    }
    .nav-burger span {
      position: absolute;
      left: 50%;
      width: 22px;
      height: 2px;
      background: var(--ink);
      border-radius: 2px;
      transform-origin: center;
      transition: transform 0.28s var(--ease-out), opacity 0.18s var(--ease-out), top 0.28s var(--ease-out);
    }
    .nav-burger span:nth-child(1) { top: calc(50% - 6px); transform: translateX(-50%); }
    .nav-burger span:nth-child(2) { top: 50%;             transform: translate(-50%, -50%); }
    .nav-burger span:nth-child(3) { top: calc(50% + 6px); transform: translateX(-50%); }
    /* Open state — bars morph into X */
    nav.is-open .nav-burger span:nth-child(1) { top: 50%; transform: translate(-50%, -50%) rotate(45deg); }
    nav.is-open .nav-burger span:nth-child(2) { opacity: 0; }
    nav.is-open .nav-burger span:nth-child(3) { top: 50%; transform: translate(-50%, -50%) rotate(-45deg); }

    body.nav-open { overflow: hidden; }

    @media (max-width: 960px) {
      /* Stack the nav vertically: top bar (logo + burger), then page list,
         then CTA at bottom of the expanded panel. */
      nav { padding: 0; }
      nav.solid { box-shadow: none; }
      .nav-inner {
        flex-direction: column;
        align-items: stretch;
        padding: 0;
        gap: 0;
      }
      nav.solid .nav-inner { padding: 0; }

      .nav-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 20px;
      }
      .nav-burger { display: inline-flex; }

      /* Closed: hide links + CTA. Open: reveal them. */
      .nav-links,
      .nav-cta { display: none; }

      nav {
        height: auto;
        transition: height 0.32s var(--ease-out),
                    transform .32s var(--ease-out),
                    background .25s var(--ease-out);
      }
      nav.is-open {
        height: 100vh;
        height: 100dvh;
        background: var(--white);
        border-bottom-color: transparent;
        box-shadow: none;
      }
      nav.is-open .nav-inner {
        flex: 1;
        height: 100%;
        min-height: 0;
      }
      nav.is-open .nav-links {
        display: flex;
        flex-direction: column;
        gap: 0;
        list-style: none;
        margin: 0;
        padding: 16px 20px 0;
        background: transparent;
        border-radius: 0;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
      }
      nav.is-open .nav-links li { display: block; width: 100%; }
      nav.is-open .nav-links a {
        display: flex;
        align-items: center;
        width: 100%;
        height: auto;
        min-width: 0;
        padding: 18px 4px;
        font-family: var(--font);
        font-weight: 600;
        font-size: clamp(24px, 5.5vw, 32px);
        line-height: 1.15;
        letter-spacing: -0.4px;
        color: var(--ink);
        background: transparent;
        border-radius: 0;
        border-bottom: 1px solid var(--border-soft);
      }
      nav.is-open .nav-cta {
        display: block;
        padding: 16px 20px;
        padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
      }
      nav.is-open .nav-cta .btn {
        width: 100%;
        height: 52px;
        font-size: 16px;
        font-family: var(--font);
        font-weight: 600;
        justify-content: center;
      }
    }

    /* ================================================================
       MOBILE GLOBAL — left-align section headings and copy on phones
       ================================================================ */

    @media (max-width: 720px) {
      /* ── Panel-style sections: drop outer breathing-room padding,
            kill panel border-radius, give the inner panel a single 20px
            horizontal padding. Bg images now span full viewport width. */
      .hero,
      .why-section,
      .cta-section,
      .about-mission {
        padding: 0 !important;
      }
      .hero-panel,
      .why-panel,
      .cta-panel,
      .about-mission-panel {
        border-radius: 0;
      }
      .why-panel,
      .cta-panel,
      .about-mission-panel,
      .hero-panel {
        padding-left: 24px !important;
        padding-right: 24px !important;
      }
      /* Reset over-padded sections at <=720px (covers the gap between
         the 640px overrides and the desktop sizes). */
      .about-founders-letter {
        padding-left: 24px !important;
        padding-right: 24px !important;
      }
      .contact-section {
        padding-left: 24px !important;
        padding-right: 24px !important;
      }
      /* Hero copy aligned flush left on mobile + uniform 24px gaps */
      .hero-h1,
      .hero-sub,
      .hero-actions,
      .hero-trusted {
        margin-left: 0 !important;
        margin-right: auto !important;
        text-align: left !important;
        justify-content: flex-start !important;
      }
      .hero-h1       { margin-top: 0 !important; margin-bottom: 24px !important; }
      .hero-sub      { margin-top: 0 !important; margin-bottom: 24px !important; }
      .hero-actions  { margin-top: 0 !important; margin-bottom: 24px !important; }
      .hero-trusted  { margin-top: 0 !important; margin-bottom: 24px !important; }

      /* Live Session card → 100% width inside the hero-panel padding.
         Drop the card's internal ls-grid padding on mobile so only the
         hero-panel's 20px is the "outside" padding around the content. */
      .hero-card {
        width: 100%;
        max-width: none;
      }
      .ls-grid {
        padding: 0 !important;
      }

      /* Utility: hide on mobile (e.g. responsive line breaks) */
      .hide-mobile { display: none !important; }
      .break-desktop { display: none !important; }

      .section-eyebrow,
      .section-h2,
      .section-h3,
      .section-sub,
      .product-hero-h,
      .product-hero-p,
      .product-hero-band,
      .product-hero-band .product-hero-inner,
      .hero-h1,
      .hero-sub,
      .layers-headline,
      .learner-header,
      .outputs-header,
      .why-header,
      .integrate-header,
      .about-mission-inner,
      .about-founders-header,
      .contact-header,
      .stack-header,
      .team-header,
      .faq-header {
        text-align: left !important;
      }
      .section-eyebrow {
        margin-left: 0 !important;
        margin-right: auto !important;
      }
      /* Drop auto-centering on header wrappers so left-align reads naturally */
      .learner-header,
      .outputs-header,
      .why-header,
      .integrate-header,
      .about-mission-inner,
      .about-founders-header,
      .contact-header,
      .stack-header,
      .team-header,
      .faq-header {
        margin-left: 0 !important;
        margin-right: 0 !important;
      }
    }

    /* Desktop-only forced line breaks inside headings */
    @media (min-width: 721px) {
      .break-desktop {
        display: block !important;
        width: 100%;
        height: 0;
        font-size: 0;
        line-height: 0;
      }
    }

    /* ================================================================
       LIVE SESSION (Hero card) — mobile typography
       Content text only. UI chrome (badges, tags, small labels) stays
       at its hand-coded sizes. All sizes map to design-system fluid
       presets defined in theme.json.
       ================================================================ */
    @media (max-width: 720px) {
      .ls-transcript-bubble { font-size: var(--wp--preset--font-size--sm); }
      .ls-new-word-value    { font-size: var(--wp--preset--font-size--base); }
      .ls-profile-title     { font-size: var(--wp--preset--font-size--lg); }
      .ls-profile-name      { font-size: var(--wp--preset--font-size--md); }
      .ls-profile-avatar    { font-size: var(--wp--preset--font-size--3xl); }
      .ls-bubble-value      { font-size: var(--wp--preset--font-size--md); }
      .ls-bubble-icon       { font-size: var(--wp--preset--font-size--xl); }
      .ls-signal-label,
      .ls-signal-value      { font-size: var(--wp--preset--font-size--sm); }

      /* ── Layout reorder: videos top, transcript middle, profile last ── */
      .ls-grid {
        display: flex !important;
        flex-direction: column;
        gap: 16px;
        padding: 0 !important;
      }
      .ls-main {
        display: contents;
      }
      .ls-videos    { order: 1; }
      .ls-transcript { order: 2; }
      .ls-profile   { order: 3; }

      /* Fixed-height transcript — enough room for a few full messages
         plus a callout. JS already auto-scrolls newest bubble into view. */
      .ls-transcript {
        height: 320px !important;
        min-height: 0 !important;
        max-height: 320px !important;
        padding: 16px;
        margin-top: -16px;
        overflow-y: auto;
        background: transparent;
        border: 0;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 22%, black 100%);
                mask-image: linear-gradient(to bottom, transparent 0%, black 22%, black 100%);
      }

      /* Glassy bubbles — frosted instead of solid fills */
      .ls-transcript-bubble.is-teacher,
      .ls-transcript-typing.is-teacher {
        background: rgba(255, 255, 255, 0.55);
        border: 1px solid rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(10px) saturate(160%);
        -webkit-backdrop-filter: blur(10px) saturate(160%);
        box-shadow: 0 4px 14px rgba(20, 30, 60, 0.06);
        color: var(--ink);
      }
      .ls-transcript-bubble.is-student,
      .ls-transcript-typing.is-student {
        background: rgba(99, 122, 240, 0.18);
        border: 1px solid rgba(99, 122, 240, 0.28);
        backdrop-filter: blur(10px) saturate(160%);
        -webkit-backdrop-filter: blur(10px) saturate(160%);
        box-shadow: 0 4px 14px rgba(60, 80, 200, 0.10);
        color: var(--primary-700);
      }

      /* Remove platform-bars (progress signals) section on mobile */
      .ls-signals { display: none !important; }

      /* Profile cloud: smaller avatar, smaller skills, bubbles spread to
         the perimeter so nothing sits behind the avatar image. */
      .ls-bubble { z-index: 5; }
      .ls-profile-center {
        z-index: 2;
        transform: translate(-50%, calc(-50% + 16px)) !important;
      }
      .ls-profile-avatar {
        width: 86px !important;
        height: 86px !important;
      }
      .ls-profile-cloud { height: 320px !important; }

      /* Shrink skill (prof) bubbles uniformly */
      .ls-bubble-prof {
        width: 76px !important;
        height: 76px !important;
        padding: 8px !important;
      }
      .ls-bubble-prof .ls-bubble-icon { font-size: 18px; }
      .ls-bubble-prof .ls-bubble-value { font-size: 14px; }
      .ls-bubble-prof .ls-bubble-label { font-size: 10px; }

      /* Shrink interest bubbles slightly */
      .ls-bubble-interest { width: 52px !important; height: 52px !important; }
      .ls-bubble-interest .ls-bubble-emoji { font-size: 16px; }
      .ls-bubble-interest .ls-bubble-label-sm { font-size: 8.5px; }

      /* Reposition every bubble to orbit the avatar (10% closer to center
         than the previous orbit). CSS vars override inline --x / --y via !important. */
      [data-bubble="grammar"]       { --x: 50% !important; --y: 13% !important; }
      [data-bubble="proficiency"]   { --x: 19% !important; --y: 26% !important; }
      [data-bubble="fluency"]       { --x: 81% !important; --y: 26% !important; }
      [data-bubble="lego"]          { --x: 32% !important; --y: 10% !important; }
      [data-bubble="startups"]      { --x: 68% !important; --y: 10% !important; }

      [data-bubble="family"]        { --x: 23% !important; --y: 49% !important; }
      [data-bubble="philosophy"]    { --x: 77% !important; --y: 49% !important; }

      [data-bubble="pronunciation"] { --x: 19% !important; --y: 70% !important; }
      [data-bubble="vocabulary"]    { --x: 81% !important; --y: 70% !important; }
      [data-bubble="yoga"]          { --x: 37% !important; --y: 90% !important; }
      [data-bubble="classic-music"] { --x: 63% !important; --y: 90% !important; }

      .ls-profile { padding-bottom: 16px !important; }

      /* Videos sit flush against each other — no gap, no inner border, no radius */
      .ls-videos { gap: 0 !important; }
      .ls-video-tile {
        border-radius: 0 !important;
        border: 0 !important;
      }
    }

    /* ================================================================
       GLOBAL: honor prefers-reduced-motion across the whole site
       Disables all animations, transitions, and smooth-scroll for users
       who request reduced motion. Catches pulse-dot, typing-dot, layer
       transforms, hover lifts, scroll-snap smoothing, etc.
       ================================================================ */
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* ================================================================
       PERFORMANCE — paint containment, GPU layer hints, off-screen skip
       Phase 1 scroll optimization. Pure browser hints; no visual change.
       ================================================================ */

    /* content-visibility: auto tells the browser to SKIP painting these
       sections until they're near the viewport. Massive scroll win.
       contain-intrinsic-size gives the browser a placeholder height so
       the scroll bar stays accurate while sections are unrendered.
       Sections above the fold are NOT included (they paint on initial load). */
    .system-layers,
    .learner-section,
    #teams,
    .why-section,
    .cta-section,
    #integrate,
    .outputs-section,
    .about-story,
    .about-principles,
    .about-founders {
      content-visibility: auto;
      contain-intrinsic-size: 1px 800px;
    }

    /* Heavy interactive zones: isolate paint/layout so changes inside
       (hover, animation, transform) don't invalidate the whole page. */
    .hero-card,
    .bento-card,
    .lg-skill,
    .team-card-v,
    .layers-visual .layer-tile {
      contain: layout paint style;
    }

    /* GPU layer pre-allocation for elements that animate via transform.
       Browser keeps these in their own composited layer so transform
       changes never trigger paint or layout. */
    .hero-card,
    .layers-visual .layer-tile,
    .gb {
      will-change: transform;
    }

    /* Images inside small avatars/badges: skip bilinear smoothing
       since the result isn't visible at those sizes. Saves paint cost. */
    .ls-bubble-prof img,
    .ls-bubble-interest img,
    .lg-avatar img,
    .lg-skill-icon img,
    .mock-avatar-sm img {
      image-rendering: optimizeSpeed;
      image-rendering: -webkit-optimize-contrast;
    }

    /* Phase 3 — Layers section: drop backdrop-filter on tile inner
       content. The expensive glass blur is the dominant cost during
       scroll; with rgba backgrounds the visual reads as "flat frosted"
       which is fine. Inactive tiles are covered by .layer-inactive-cover
       anyway so the blur is invisible work. */
    .layers-visual .layer-tile .glass-window,
    .layers-visual .layer-tile .glass-bar,
    .layers-visual .layer-tile .glass-stack,
    .layers-visual .layer-tile .system-viz,
    .layers-visual .layer-tile .le-graph-center,
    .layers-visual .layer-tile .le-graph-node,
    .layers-visual .layer-tile .orch-panel,
    .layers-visual .layer-tile .orch-main,
    .layers-visual .layer-tile .orch-sidebar {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    /* Inactive tile-art content can be skipped from paint entirely while
       behind the cover image. content-visibility: auto means the browser
       only paints when in-viewport AND not behind opacity:1 overlays. */
    .layer-stack:not(.is-active-1) .tile-1 .tile-art-viz,
    .layer-stack:not(.is-active-2) .tile-2 .tile-art-viz,
    .layer-stack:not(.is-active-3) .tile-3 .tile-art-viz {
      content-visibility: auto;
      contain-intrinsic-size: 1px 480px;
    }

    /* Pause EVERY animation inside inactive tile content. Layer 1's
       glass-bar spinner, Layer 2's bubble floats + dashed line draws,
       and Layer 3's skeleton shimmers all keep ticking otherwise — burning
       CPU while completely hidden behind the inactive cover. */
    .layer-stack:not(.is-active-1) .tile-1 *,
    .layer-stack:not(.is-active-2) .tile-2 *,
    .layer-stack:not(.is-active-3) .tile-3 * {
      animation-play-state: paused !important;
    }

    /* The big translucent live-session card has backdrop-filter on
       itself AND on multiple children. Reducing the outer card's blur
       further (it sits on a white hero panel anyway, the blur is mostly
       decorative there). */
    .hero-card {
      backdrop-filter: blur(8px) saturate(140%);
      -webkit-backdrop-filter: blur(8px) saturate(140%);
    }