/* ============================================================
         TOKENS
         ============================================================ */
      :root {
        --nav-shadow: rgba(0, 0, 0, 0.6);
        --nav-bg: rgba(18, 17, 26, 0.82);
        --canvas: #f2f1f7;
        --bg: #14131c;
        --bg-soft: #1a1824;
        --panel: #16151f;
        --panel-soft: #191822;
        --raised: #221f2d;
        --line: rgba(255, 255, 255, 0.11);
        --line-strong: rgba(255, 255, 255, 0.2);
        --fg: #f4f3f8;
        --muted: #b9b5c4;
        --faint: #a09cae;
        --accent: #4f46e5;
        --accent-hover: #5f56ea;
        --accent-lift: #a5a0f7;
        --accent-dim: rgba(123, 115, 240, 0.2);
        --green: #34d399;
        --amber: #e0b341;
        --blue: #7aa2f7;
        --teal: #2dd4bf;
        --rose: #f0913f;
        --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        --display: 'Inter Tight', 'Inter', -apple-system, sans-serif;
        --serif: 'IBM Plex Serif', Georgia, Cambria, 'Times New Roman', serif;
        --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
        --maxw: 1240px;
        --r-sm: 8px;
        --r: 12px;
        --r-lg: 18px;
        --r-xl: 26px;
      }

      /* ============================================================
         BASE
         ============================================================ */
      *,
      *::before,
      *::after { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      body {
        margin: 0;
        background:
          /* a fine 45-degree hatch: at a 6px repeat it reads as texture rather
             than as a motif, which is all a 12px gutter can carry */
          repeating-linear-gradient(45deg, rgba(22, 20, 34, 0.035) 0 1px, transparent 1px 6px),
          /* and the frame shifts tone down the page, so it is not a flat slab */
          linear-gradient(180deg, #f6f5fa 0%, #eceaf2 55%, #e6e4ee 100%);
        color: var(--fg);
        font-family: var(--sans);
        font-size: 15px;
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
      }
      a { color: inherit; text-decoration: none; }
      button, input, textarea { font: inherit; color: inherit; }
      svg { display: block; }
      ::selection { background: rgba(123, 115, 240, 0.42); }

      .wrap {
        width: 100%;
        max-width: var(--maxw);
        margin: 0 auto;
        padding: 0 32px;
      }

      /* ---- the page is a stack of inset panels floating on a darker canvas ---- */
      /* anchor targets must clear the floating nav */
      html { scroll-padding-top: 80px; }
      @media (max-width: 720px) { html { scroll-padding-top: 76px; } }
      .shell {
        max-width: 1560px;
        margin: 0 auto;
        padding: 8px 16px 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .panel {
        position: relative;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--panel-soft);
        padding: 108px 0;
        overflow: hidden;
        isolation: isolate;
      }
      .panel.tight { padding: 54px 0; }

      /* ------------------------------------------------------------------
         section artwork — sits at z-index 0, under .panel > * which is z-index 1.
         The two panels with real empty space (cta, footer) carry a composition;
         the rest are ambient washes held well back so the cards stay dominant. */
      /* Section texture is drawn, not photographed — one violet family, a
         different gesture per section, so they read as a set without competing
         with the content sitting on top. Only the hero carries real artwork. */
      .panel.art::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background-repeat: no-repeat;
        /* the default: a quiet lattice, for panels with nothing more specific */
        background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
        background-size: 24px 24px;
        -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 62%);
        mask-image: linear-gradient(180deg, #000 0%, transparent 62%);
      }

      /* Drawn geometry rather than washes: rules, lattices and hairlines, all
         in ink except where the brand earns a line. Each is masked so it fades
         instead of tiling flatly to the panel edge. */

      /* the library: a fine dot lattice under the cards */
      .panel.art#library::after {
        background-image: radial-gradient(circle, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
        background-size: 22px 22px;
        -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.45) 40%, transparent 78%);
        mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.45) 40%, transparent 78%);
      }

      /* the workspace: graph paper, squared off, settling out of the top edge */
      .panel.art#workspace::after {
        background-image:
          linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
          linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
        background-size: 34px 34px, 34px 34px;
        -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.5) 30%, transparent 58%);
        mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.5) 30%, transparent 58%);
      }

      /* how it works: ruled columns, one line standing behind each step */
      .panel.art#how::after {
        background-image: repeating-linear-gradient(
          to right,
          rgba(255, 255, 255, 0.06) 0 1px,
          transparent 1px 25%
        );
        background-size: 100% 100%;
        -webkit-mask-image: linear-gradient(180deg, transparent 6%, #000 34%, #000 72%, transparent 96%);
        mask-image: linear-gradient(180deg, transparent 6%, #000 34%, #000 72%, transparent 96%);
      }

      /* five readable files: diagonal hairlines, like a drawing board */
      .panel.art#build::after {
        background-image: repeating-linear-gradient(
          45deg,
          rgba(255, 255, 255, 0.045) 0 1px,
          transparent 1px 16px
        );
        background-size: 100% 100%;
        -webkit-mask-image: linear-gradient(58deg, #000 0%, transparent 58%);
        mask-image: linear-gradient(58deg, #000 0%, transparent 58%);
      }

      /* the wall: a wider lattice, held back so the cards keep the foreground */
      .panel.art#voices::after {
        background-image: radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
        background-size: 30px 30px;
        -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 10%, transparent 76%);
        mask-image: radial-gradient(70% 60% at 50% 40%, #000 10%, transparent 76%);
      }

      /* pricing: graph paper rising from the floor, one violet rule */
      .panel.art#pricing::after {
        background-image:
          linear-gradient(to top, rgba(150, 144, 245, 0.2) 1px, transparent 1px),
          linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
          linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
        background-size: 100% 100%, 34px 34px, 34px 34px;
        -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.4) 42%, transparent 76%);
        mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.4) 42%, transparent 76%);
      }

      /* the closing call: concentric rules over squared paper */
      .panel.art.cta-panel::after {
        background-image:
          repeating-radial-gradient(circle at 50% 50%, rgba(150, 144, 245, 0.16) 0 1px, transparent 1px 78px),
          linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
          linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
        background-size: 100% 100%, 44px 44px, 44px 44px;
        background-position: center center;
        -webkit-mask-image: radial-gradient(74% 96% at 50% 50%, #000 18%, transparent 84%);
        mask-image: radial-gradient(74% 96% at 50% 50%, #000 18%, transparent 84%);
      }

      /* the footer: one ruled band along the top edge */
      .panel.art.tight::after {
        background-image: repeating-linear-gradient(
          to right,
          rgba(255, 255, 255, 0.06) 0 1px,
          transparent 1px 34px
        );
        background-size: 100% 100%;
        -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 42%);
        mask-image: linear-gradient(180deg, #000 0%, transparent 42%);
      }

      /* trim the pages on smaller screens — the compositions rely on width */
      @media (max-width: 760px) {
        .panel.art#workspace::after { background-size: 24px 24px, 24px 24px; }
      }

      /* texture layers — decorative, always behind the content */
      .panel.gridlines::before,
      .panel.starfield::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
      }
      .panel.gridlines::before {
        background-image:
          linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
        background-size: 88px 88px;
        -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.28) 26%, transparent 46%);
        mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.28) 26%, transparent 46%);
      }
      .panel.starfield::before {
        background-image:
          radial-gradient(1.4px 1.4px at 40px 52px, rgba(22, 20, 34, 0.2), transparent),
          radial-gradient(1px 1px at 168px 118px, rgba(22, 20, 34, 0.13), transparent),
          radial-gradient(1.2px 1.2px at 268px 40px, rgba(22, 20, 34, 0.17), transparent),
          radial-gradient(1px 1px at 92px 178px, rgba(22, 20, 34, 0.11), transparent),
          radial-gradient(1.5px 1.5px at 214px 206px, rgba(22, 20, 34, 0.19), transparent),
          radial-gradient(1px 1px at 330px 140px, rgba(255, 255, 255, 0.11), transparent);
        background-size: 380px 240px;
        -webkit-mask-image: radial-gradient(85% 78% at 50% 34%, #000, transparent 76%);
        mask-image: radial-gradient(85% 78% at 50% 34%, #000, transparent 76%);
      }
      .panel > * { position: relative; z-index: 1; }
      .panel.flush { padding-bottom: 0; }
      @media (max-width: 720px) {
        .shell { padding: 8px 8px 8px; gap: 8px; }
        .panel { border-radius: 10px; padding: 68px 0; }
        .wrap { padding: 0 20px; }
      }

      h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 450; letter-spacing: -0.03em; }
      /* headline voice: the same serif as the hero */
      h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; }
      h1 { font-size: clamp(46px, 7vw, 88px); line-height: 1.02; }
      h2 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.06; }
      h3 { font-size: 22px; line-height: 1.25; }
      p { margin: 0; }

      .eyebrow {
        font-size: 11.5px;
        font-weight: 500;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--faint);
      }
      .lede { color: var(--muted); font-size: 17px; line-height: 1.55; }

      /* One row: title on the left, the supporting line on the right. */
      /* Left aligned and stacked: eyebrow, the headline on a row of its own,
         then the supporting line beneath it. */
      .head {
        margin: 0 0 44px;
        text-align: left;
      }
      .head .eyebrow { display: block; margin-bottom: 12px; }
      .head p { margin-top: 14px; max-width: 640px; }
      .head.center { text-align: center; }
      .head.center p { margin-left: auto; margin-right: auto; }

      /* ============================================================
         BUTTONS
         ============================================================ */
      .btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border-radius: 9px;
        padding: 9px 16px;
        font-size: 13.5px;
        font-weight: 500;
        cursor: pointer;
        border: 1px solid transparent;
        transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
      }
      .btn:active { transform: translateY(1px); }
      .btn-primary {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
      }
      .btn-primary:hover { background: var(--accent-hover); }
      .btn-ghost { background: rgba(255, 255, 255, 0.06); border-color: var(--line-strong); }
      .btn-ghost:hover { background: rgba(255, 255, 255, 0.1); }
      .btn-sm { padding: 7px 13px; font-size: 12.5px; }

      /* ============================================================
         NAV
         ============================================================ */
      .nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 60;
        padding: 8px 16px;
        pointer-events: none;   /* the gutter either side stays clickable-through */
        transition: background 0.24s ease;
      }
      /* scrolled: one frosted surface from the very top edge, so nothing shows
         through above the bar */
      .nav.stuck {
        background: var(--nav-bg);
        backdrop-filter: blur(16px) saturate(1.3);
        border-bottom: 1px solid var(--line);
      }
      /* the nav is a panel like every other section: same inset, radius and border */
      .nav-in {
        pointer-events: auto;
        max-width: 1528px;      /* 1560 shell - 2x16 padding, so edges line up */
        margin: 0 auto;
        border-bottom: 1px solid var(--line);
        background: transparent;
        transition: background 0.24s ease, border-color 0.24s ease;
      }
      .nav.stuck .nav-in { border-bottom-color: transparent; }
      /* the row inside carries .wrap, so the logo and the actions land on the
         same column as every section headline */
      .nav-row {
        height: 56px;
        display: flex;
        align-items: center;
        gap: 28px;
      }
      /* once the page scrolls under it, it earns a surface */

      @media (max-width: 720px) {
        .nav { top: 0; padding: 8px; }
        .nav-row { height: 52px; gap: 16px; }
      }
      .logo { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 16.5px; letter-spacing: -0.02em; }
      .logo svg { color: var(--accent-lift); }
      .nav-links { display: flex; gap: 26px; margin: 0 auto; font-size: 14px; }
      .nav-links a { color: var(--fg); transition: opacity 0.16s ease; }
      .nav-links a:hover { opacity: 0.7; }
      .nav-act { display: flex; align-items: center; gap: 10px; }
      .nav-act .plain {
        font-size: 13.5px;
        font-weight: 500;
        color: var(--fg);
        background: rgba(22, 20, 34, 0.055);
        border: 1px solid var(--line-strong);
        border-radius: 10px;
        padding: 8px 15px;
        transition: background 0.16s ease;
      }
      .nav-act .plain:hover { background: rgba(255, 255, 255, 0.11); }
      /* the current section reads as selected, the way the app's sidebar does */
      .nav-links a.on { color: var(--accent-lift); }

      .nav-toggle {
        display: none;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        border: 1px solid var(--line);
        background: transparent;
        color: var(--fg);
        cursor: pointer;
      }
      .nav-toggle:hover { background: rgba(255, 255, 255, 0.07); }
      .nav-menu {
        display: none;
        pointer-events: auto;
        max-width: 1528px;
        margin: 8px auto 0;
        flex-direction: column;
        padding: 8px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--nav-bg);
        backdrop-filter: blur(16px) saturate(1.3);
      }
      .nav-menu a { padding: 11px 12px; border-radius: 8px; font-size: 15px; color: var(--fg); }
      .nav-menu a:hover { background: rgba(255, 255, 255, 0.07); }
      @media (max-width: 900px) {
        .nav-links, .nav-act .plain { display: none; }
        .nav-toggle { display: inline-flex; }
        .nav-menu.open { display: flex; }
        /* .nav-links carried the auto margin; without it the actions bunch up
           against the logo instead of sitting at the edge */
        .nav-act { margin-left: auto; }
      }

      /* ============================================================
         HERO — plain, quiet surface; the prompt is the only call to action
         ============================================================ */
      .panel.hero {
        background: #000d2a;
        padding: 56px 0 0;
        text-align: center;
        /* fills the viewport on landing, minus the shell's 8px insets.
           svh is the viewport with the phone's URL bar showing — plain vh is
           taller than the visible area there, which pushes the prompt and the
           trusted-by strip under the fold. */
        min-height: calc(100vh - 16px);
        min-height: calc(100svh - 16px);
        display: grid;
        /* minmax(0,1fr) or the implicit column sizes to the wrap max-width and
           the panel clips it on narrow screens */
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 1fr auto;
      }
      /* the artwork is composed for this panel — dark down the centre where the
         type sits, luminous in the outer thirds — so it needs almost no scrim:
         just a soft settle into the panel colour at the very bottom edge */
      .panel.hero::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background:
          linear-gradient(180deg, transparent 88%, rgba(0, 13, 42, 0.75) 96%, #000d2a 100%),
          url("assets/hero-bg-dark.webp") center top / cover no-repeat;
      }
      .hero-inner { max-width: 940px; margin: 0 auto; align-self: center; }
      .hero h1 {
        color: #fff;
        font-family: var(--serif);
        font-weight: 400;
        font-size: clamp(38px, 5.4vw, 68px);
        line-height: 1.1;
        letter-spacing: -0.02em;
      }
      @media (max-width: 760px) { .hero h1 { font-size: clamp(32px, 8.4vw, 44px); } }
      .hero-sub {
        margin: 18px auto 0;
        max-width: 760px;
        white-space: nowrap;
        font-size: 17px;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.78);
      }
      .hero-sub u { text-decoration-color: rgba(255, 255, 255, 0.34); text-underline-offset: 4px; }
      /* the one-line promise wraps rather than clipping once it cannot fit */
      @media (max-width: 900px) {
        .hero-sub { white-space: normal; font-size: 16px; max-width: 520px; }
      }
      .hero-cta { margin-top: 28px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

      /* use-case chips sit under the prompt and fill it in */
      .uses { margin: 22px auto 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 760px; }
      @media (max-width: 620px) {
        /* wrapping six chips eats most of a phone screen — swipe them instead */
        .uses {
          flex-wrap: nowrap;
          justify-content: flex-start;
          overflow-x: auto;
          scrollbar-width: none;
          -webkit-overflow-scrolling: touch;
          scroll-snap-type: x proximity;
          /* bleed to the panel edges so it reads as scrollable */
          margin-inline: -20px;
          padding-inline: 20px;
        }
        .uses::-webkit-scrollbar { display: none; }
        .use { flex: 0 0 auto; scroll-snap-align: start; }
      }
      .use {
        border: 1px solid rgba(255, 255, 255, 0.22);
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(6px);
        color: rgba(255, 255, 255, 0.86);
        border-radius: 999px;
        padding: 7px 14px;
        font-size: 13px;
        cursor: pointer;
        transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
      }
      .use:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.18); }

      /* prebuilt agents live in the hero, under the prompt */
      .picks { text-align: left; }
      .picks-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
      .picks-head b { font-size: 14px; font-weight: 600; }
      .picks-head span { font-size: 13px; color: var(--faint); }
      .picks-head a {
        margin-left: auto;
        font-size: 13px;
        color: var(--accent-lift);
        border-radius: 999px;
        padding: 5px 11px;
        background: rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(6px);
        transition: background 0.16s ease;
      }
      .picks-head a:hover { background: rgba(255, 255, 255, 0.12); }
      .pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
      .pick {
        position: relative;
        display: flex;
        flex-direction: column;
        text-align: left;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(6px);
        padding: 17px 18px 15px;
        cursor: pointer;
        font: inherit;
        transition: border-color 0.16s ease, background 0.16s ease;
      }
      .pick:hover { border-color: rgba(150, 144, 245, 0.6); background: rgba(255, 255, 255, 0.1); }
      .pick b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; padding-right: 28px; }
      .pick .desc { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); line-height: 1.45; flex: 1; }
      .pick .foot > * { margin: 0; }
      .pick .foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; min-height: 26px; }
      .pick em {
        display: inline-flex;
        align-items: center;
        height: 26px;
        font-style: normal;
        font-size: 10.5px;
        line-height: 1;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--faint);
      }
      .pick .act {
        margin-left: auto;
        width: 26px;
        height: 26px;
        border-radius: 8px;
        display: grid;
        place-items: center;
        color: var(--muted);
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid var(--line);
        transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
      }
      .pick:hover .act { background: var(--accent); border-color: var(--accent); color: #fff; }
      @media (max-width: 1180px) { .pick-grid { grid-template-columns: 1fr 1fr; } }
      @media (max-width: 900px) { .pick-grid { grid-template-columns: 1fr 1fr; } }
      @media (max-width: 620px) { .pick-grid { grid-template-columns: 1fr; } }

      .more-wrap { display: flex; justify-content: center; margin-top: 16px; }
      .more {
        border: 1px solid var(--line-strong);
        background: rgba(255, 255, 255, 0.06);
        color: var(--fg);
        border-radius: 10px;
        padding: 9px 18px;
        font-size: 13.5px;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.16s ease;
      }
      .more:hover { background: rgba(255, 255, 255, 0.1); }

      /* trusted-by closes the hero panel */
      .hero-trust {
        flex-shrink: 0; margin-top: 0; padding-top: 30px; padding-bottom: 46px; border-top: 1px solid rgba(255, 255, 255, 0.14); }

      /* ============================================================
         PROMPT CONSOLE
         ============================================================ */
      .console {
        max-width: 780px;
        margin: 52px auto 0;
        text-align: left;
        border: 2px solid rgba(255, 255, 255, 0.9);
        border-radius: 10px;
        background: #fff;
        overflow: hidden;
      }
      .console textarea {
        display: block;
        width: 100%;
        border: 0;
        outline: 0;
        resize: none;
        background: transparent;
        padding: 18px 22px 6px;
        font-size: 15.5px;
        line-height: 1.5;
        min-height: 68px;
      }
      /* the prompt card is deliberately white in a dark page, so what sits
         inside it has to be ink rather than the theme foreground */
      .console textarea { color: #14131c; }
      .console textarea::placeholder { color: #14131c; opacity: 1; }
      .console-hint { color: rgba(20, 19, 28, 0.62); }
      .console-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 8px 14px 14px 22px; }
      /* the hint must never squeeze the button until its label wraps */
      .console-bar .btn { padding: 8px 15px; font-size: 13.5px; flex-shrink: 0; white-space: nowrap; }
      .console-hint { font-size: 13px; color: var(--faint); margin-right: auto; min-width: 0; }
      @media (max-width: 620px) {
        .console-bar { padding: 10px 14px 14px 16px; }
        .console-hint { display: none; }
        .console-bar .btn { width: 100%; justify-content: center; }
      }
      /* ============================================================
         PRODUCT PANEL
         ============================================================ */
      .shot {
        margin: 0 auto;
        max-width: 1020px;
        border: 1px solid var(--line-strong);
        border-radius: var(--r-xl);
        background: var(--panel);
        box-shadow: 0 40px 90px -50px rgba(22, 20, 34, 0.35);
        overflow: hidden;
        text-align: left;
      }
      .shot-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
      .dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(22, 20, 34, 0.18); }
      .shot-title { margin-left: 8px; font-size: 12.5px; color: var(--faint); }
      .shot-body { display: grid; grid-template-columns: 190px 1fr; min-height: 380px; }
      .shot-side { border-right: 1px solid var(--line); padding: 14px 10px; background: var(--bg-soft); }
      .side-label { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); padding: 0 8px 8px; }
      .side-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--r-sm); font-size: 13px; color: var(--muted); }
      .side-item.sel { background: rgba(255, 255, 255, 0.07); color: var(--fg); }
      .side-item i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
      .shot-main { padding: 18px; }
      .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
      .tile { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 13px; background: var(--raised); }
      .tile span { font-size: 11px; color: var(--faint); }
      .tile b { display: block; margin-top: 5px; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
      .tile em { font-style: normal; font-size: 11px; color: var(--green); }
      .chart { border: 1px solid var(--line); border-radius: var(--r); background: var(--raised); padding: 13px; margin-bottom: 14px; }
      .chart-h { display: flex; justify-content: space-between; font-size: 12px; color: var(--faint); margin-bottom: 8px; }
      .grid-tbl { border: 1px solid var(--line); border-radius: var(--r); background: var(--raised); overflow: hidden; }
      .grid-tbl .r { display: grid; grid-template-columns: 1.6fr 1fr 0.8fr; gap: 10px; padding: 9px 13px; font-size: 12.5px; }
      .grid-tbl .r + .r { border-top: 1px solid var(--line); }
      .grid-tbl .r.h { color: var(--faint); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
      .pill { font-size: 10.5px; padding: 2px 8px; border-radius: 999px; justify-self: start; }
      .pill.g { background: rgba(52, 211, 153, 0.14); color: var(--green); }
      .pill.a { background: rgba(224, 179, 65, 0.14); color: var(--amber); }
      @media (max-width: 780px) {
        .shot-body { grid-template-columns: 1fr; }
        .shot-side { display: none; }
        .tiles { grid-template-columns: 1fr 1fr; }
      }

      /* ============================================================
         MARQUEE
         ============================================================ */
      .strip-label { margin-bottom: 18px; }
      .strip-label { text-align: center; font-size: 11.5px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); margin-bottom: 22px; }
      .marquee {
        overflow: hidden;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
      }
      .track { display: flex; align-items: center; gap: 54px; width: max-content; animation: slide 44s linear infinite; }
      .marquee:hover .track { animation-play-state: paused; }
      @keyframes slide { to { transform: translateX(-50%); } }
      .mark {
        display: flex;
        align-items: center;
        gap: 9px;
        white-space: nowrap;
        font-size: 15.5px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.85);
        opacity: 0.7;
        transition: opacity 0.2s ease, color 0.2s ease;
      }
      .mark:hover { opacity: 1; color: var(--fg); }
      .mark svg { color: var(--faint); flex-shrink: 0; }

      /* ============================================================
         STEPS
         ============================================================ */
      .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
      .step { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); padding: 26px 24px; }
      .step .n {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: var(--accent-dim);
        color: var(--accent-lift);
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 16px;
      }
      .step h3 { font-size: 20px; margin-bottom: 8px; }
      .step p { color: var(--muted); font-size: 14.5px; }
      @media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

      /* ============================================================
         FEATURE ROWS
         ============================================================ */
      .row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
      .row + .row { margin-top: 96px; }
      .row.flip .row-copy { order: 2; }
      .row h2 { font-size: clamp(28px, 3.4vw, 40px); }
      .row p { margin-top: 16px; color: var(--muted); font-size: 16px; }
      .row ul { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
      .row li { display: flex; gap: 10px; font-size: 14.5px; color: var(--muted); }
      .row li svg { color: var(--accent-lift); flex-shrink: 0; margin-top: 3px; }
      .row-art {
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        background: var(--panel);
        padding: 18px;
        box-shadow: 0 24px 60px -44px rgba(22, 20, 34, 0.28);
      }
      @media (max-width: 900px) {
        .row { grid-template-columns: 1fr; gap: 30px; }
        .row.flip .row-copy { order: 0; }
      }

      .flowline { display: grid; gap: 10px; }
      .node { display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: var(--r); background: var(--raised); padding: 11px 13px; font-size: 13.5px; }
      .node .k { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; background: rgba(255, 255, 255, 0.07); color: var(--faint); }
      .node.llm .k { background: var(--accent-dim); color: var(--accent-lift); }
      .node .arrow { margin-left: auto; color: var(--faint); }
      .filerow { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); padding: 9px 10px; border-radius: var(--r-sm); }
      .filerow:nth-child(odd) { background: rgba(255, 255, 255, 0.04); }

      /* ============================================================
         AGENT LIBRARY
         ============================================================ */
      .filters { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
      .chip {
        border: 1px solid var(--line);
        background: transparent;
        color: var(--muted);
        border-radius: 999px;
        padding: 5px 12px;
        font-size: 12.5px;
        cursor: pointer;
        transition: all 0.16s ease;
      }
      .chip:hover { color: var(--fg); border-color: var(--line-strong); }
      .chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
      .agents { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
      .agent {
        display: block;
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        background: var(--panel);
        padding: 20px;
        transition: border-color 0.18s ease, transform 0.18s ease;
      }
      .agent:hover { border-color: rgba(150, 144, 245, 0.55); transform: translateY(-2px); }
      .agent .cat { font-size: 11px; color: var(--faint); display: flex; align-items: center; gap: 6px; }
      .agent .cat i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
      .agent h3 { font-family: var(--sans); font-size: 15px; font-weight: 600; margin: 10px 0 7px; letter-spacing: -0.01em; }
      .agent p { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
      .agent .go { margin-top: 14px; font-size: 12.5px; color: var(--accent-lift); display: flex; align-items: center; gap: 5px; }
      @media (max-width: 940px) { .agents { grid-template-columns: 1fr 1fr; } }
      @media (max-width: 640px) { .agents { grid-template-columns: 1fr; } }

      /* ============================================================
         TESTIMONIAL WALL
         ============================================================ */
      .wall {
        position: relative;
        height: 660px;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(180deg, transparent, #000 9%, #000 84%, transparent);
        mask-image: linear-gradient(180deg, transparent, #000 9%, #000 84%, transparent);
      }
      .wall-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
      .col { display: flex; flex-direction: column; gap: 14px; animation: up 62s linear infinite; will-change: transform; }
      .col.rev { animation-name: down; }
      .col.slow { animation-duration: 80s; }
      .wall:hover .col { animation-play-state: paused; }
      @keyframes up { to { transform: translateY(-50%); } }
      @keyframes down { from { transform: translateY(-50%); } to { transform: none; } }
      .quote { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); padding: 17px; margin: 0; }
      .quote .stars { display: flex; gap: 2px; color: var(--amber); margin-bottom: 9px; }
      .quote p { font-size: 13.8px; line-height: 1.55; color: rgba(244, 243, 248, 0.82); }
      .quote .by { display: flex; align-items: center; gap: 10px; margin-top: 13px; }
      .av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; color: #0d0c13; flex-shrink: 0; }
      .by b { display: block; font-size: 12.8px; font-weight: 600; }
      .by span:not(.av) { display: block; font-size: 11.5px; color: var(--faint); }
      @media (max-width: 900px) { .wall-cols { grid-template-columns: 1fr 1fr; } .col:nth-child(3) { display: none; } }
      @media (max-width: 620px) { .wall { height: 540px; } .wall-cols { grid-template-columns: 1fr; } .col:nth-child(2) { display: none; } }

      /* ============================================================
         PRICING
         ============================================================ */
      .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
      .plan { border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--panel); padding: 28px 26px; display: flex; flex-direction: column; }
      .plan.hot { border-color: var(--accent); }
      .plan-top { display: flex; align-items: center; justify-content: space-between; }
      .plan-name { font-size: 15px; font-weight: 600; }
      .tag { display: inline-flex; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
        text-transform: uppercase; color: #fff; background: var(--accent);
        border-radius: 999px; padding: 3px 10px; }
      .price { margin: 14px 0 4px; font-family: var(--display); font-weight: 600; font-size: 46px; line-height: 1; letter-spacing: -0.02em; }
      .price s { text-decoration: none; font-family: var(--sans); font-size: 14px; color: var(--faint); }
      .plan-blurb { font-size: 13.5px; color: var(--muted); min-height: 40px; margin-bottom: 20px; }
      .plan ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; flex: 1; }
      .plan li { display: flex; gap: 9px; font-size: 13.8px; color: rgba(244, 243, 248, 0.82); }
      .plan li svg { color: var(--accent-lift); flex-shrink: 0; margin-top: 3px; }
      /* the pricing block runs a size down: a one-word headline does not need
         the full 52px, and the plan CTAs sit inside cards */
      .plan .btn { width: 100%; justify-content: center; padding: 9px 15px; font-size: 13.5px; }
      #pricing .head h2 { font-size: clamp(28px, 3.2vw, 38px); }
      #pricing .head p { font-size: 15.5px; }
      .fineprint { margin: 26px auto 0; max-width: 620px; text-align: center; font-size: 13px; color: var(--faint); line-height: 1.6; }
      @media (max-width: 900px) { .plans { grid-template-columns: 1fr; max-width: 430px; margin: 0 auto; } }

      /* ============================================================
         CTA + FOOTER
         ============================================================ */
      .cta { text-align: center; }
      .panel.cta-panel { background: var(--panel); }
      .cta p { margin: 16px auto 26px; max-width: 440px; color: var(--muted); }
      footer { padding: 0; }
      .foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; }
      .foot-grid h4 { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
      .foot-grid a { display: block; font-size: 14px; color: var(--muted); padding: 5px 0; }
      .foot-grid a:hover { color: var(--fg); }
      .foot-note { font-size: 13.5px; color: var(--muted); margin-top: 14px; max-width: 280px; }
      .foot-base { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 13px; color: var(--faint); flex-wrap: wrap; gap: 10px; }
      @media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr 1fr; } }

      /* ============================================================
         MOTION
         ============================================================ */
      .rv { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
      .rv.in { opacity: 1; transform: none; }
      @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        .rv { opacity: 1; transform: none; transition: none; }
        .track, .col, .stars, .cloud { animation: none !important; }
        .wall { height: auto; -webkit-mask-image: none; mask-image: none; }
        .dupe { display: none; }
      }
      /* ============ LIVE APP PREVIEW — the workspace, as the app now looks ============ */
      .industry-tabs {
        display: flex;
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 26px;
      }
      .itab {
        font-size: 14px;
        font-weight: 600;
        color: var(--muted);
        padding: 9px 18px;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: var(--panel);
        cursor: pointer;
        transition: all 0.14s ease;
      }
      .itab:hover {
        color: var(--fg);
        border-color: var(--line-strong);
      }
      .itab.active {
        color: #fff;
        background: var(--accent);
        border-color: var(--accent);
      }

      .app {
        max-width: none;
        margin: 0;
        border: 1px solid var(--line);
        border-radius: 12px;
        overflow: hidden;
        background: var(--bg-soft);
      }
      .app-topbar {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 36px;
        padding: 0 14px;
        background: transparent;
      }
      .app-topbar .b {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 12.5px;
        font-weight: 700;
      }
      .app-topbar .b svg {
        color: var(--accent-lift);
      }
      .app-signout {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        font-weight: 500;
        color: var(--muted);
      }
      .app-body {
        display: grid;
        grid-template-columns: 232px 1fr;
        min-height: 540px;
        gap: 8px;
        padding: 0 8px 8px;
        background: var(--bg-soft);
      }
      @media (max-width: 780px) {
        .app-body {
          grid-template-columns: 1fr;
        }
      }
      .app-side {
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 12px 10px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      @media (max-width: 780px) {
        .app-side {
          border-bottom: 1px solid var(--line);
        }
      }
      .app-nav {
        display: flex;
        flex-direction: column;
        gap: 1px;
      }
      @media (max-width: 780px) {
        .app-nav {
          display: none;
        }
      }
      .app-nav a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        border-radius: 9px;
        font-size: 13.5px;
        font-weight: 500;
        color: var(--muted);
      }
      .app-nav a.on {
        color: var(--muted);
      }
      .app-nav .sep {
        height: 1px;
        background: var(--line);
        margin: 8px 6px;
      }
      .app-agents-label {
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--faint);
        padding: 6px 10px 8px;
      }
      @media (max-width: 780px) {
        .app-agents-label {
          display: none;
        }
      }
      .app-agents {
        display: flex;
        flex-direction: column;
        gap: 1px;
        overflow-y: auto;
      }
      @media (max-width: 780px) {
        .app-agents {
          flex-direction: row;
          gap: 6px;
          overflow-x: auto;
          padding-bottom: 4px;
        }
      }
      .app-agent {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 8px 10px;
        border-radius: 9px;
        cursor: pointer;
        border: none;
        background: none;
        text-align: left;
        font-family: inherit;
        color: var(--fg);
        transition: background 0.13s ease;
        white-space: nowrap;
        position: relative;
      }
      .app-agent:hover {
        background: var(--panel);
      }
      .app-agent.on {
        background: var(--panel);
      }
      .app-agent.on::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 16px;
        border-radius: 3px;
        background: var(--accent);
      }
      .app-agent .ai {
        width: 22px;
        height: 22px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .app-agent .an {
        font-size: 13px;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 130px;
      }
      .app-agent .adot {
        margin-left: auto;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--green);
        flex-shrink: 0;
      }
      @media (max-width: 780px) {
        .app-agent .adot {
          display: none;
        }
      }

      /* main / dashboard */
      .app-main {
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        min-width: 0;
        overflow: hidden;
      }
      .dash-head {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 16px 18px;
        border-bottom: 1px solid var(--line);
      }
      .dash-head .dh-ico {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .dash-head .dh-name {
        font-size: 15px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
      }
      .dh-badge {
        font-size: 10.5px;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 999px;
        background: var(--raised);
        color: var(--muted);
      }
      .dash-head .dh-desc {
        font-size: 12.5px;
        color: var(--muted);
        margin-top: 2px;
      }
      .dash-head .dh-actions {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
      }
      @media (max-width: 620px) {
        .dash-head .dh-actions .dh-refine,
        .dash-head .dh-desc {
          display: none;
        }
        /* the header must wrap rather than push its own row wider than the panel */
        .dash-head { flex-wrap: wrap; padding: 12px 14px; }
        .dash-head > div { min-width: 0; }
        .dash-head .dh-name { font-size: 13px; }
        .dtable-head { flex-wrap: wrap; padding: 10px 12px; }
        .dtable-head .dt-search { display: none; }
        .dtable-head .dt-actions span:not(.add) { display: none; }
      }
      .dh-refine {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--fg);
        border: 1px solid var(--line-strong);
        border-radius: 999px;
        padding: 7px 13px;
        display: inline-flex;
        gap: 6px;
        align-items: center;
      }
      .dh-toggle {
        width: 38px;
        height: 21px;
        border-radius: 999px;
        background: var(--green);
        position: relative;
        flex-shrink: 0;
      }
      .dh-toggle::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 19px;
        width: 17px;
        height: 17px;
        border-radius: 50%;
        background: #fff;
      }
      .dh-run {
        font-size: 12.5px;
        font-weight: 700;
        color: #fff;
        background: var(--accent);
        border-radius: 999px;
        padding: 8px 14px;
        display: inline-flex;
        gap: 6px;
        align-items: center;
      }
      .dash-tabs {
        display: flex;
        gap: 4px;
        padding: 0 12px;
        border-bottom: 1px solid var(--line);
        overflow-x: auto;
      }
      .dash-tabs span {
        font-size: 12.5px;
        font-weight: 500;
        color: var(--muted);
        padding: 11px 10px;
        white-space: nowrap;
        border-bottom: 2px solid transparent;
      }
      .dash-tabs span.on {
        color: var(--fg);
        border-bottom-color: var(--accent);
        font-weight: 600;
      }
      .dash-scroll {
        padding: 18px;
        overflow-y: auto;
        flex: 1;
      }
      .tiles {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        margin-bottom: 16px;
      }
      @media (max-width: 620px) {
        .tiles {
          grid-template-columns: 1fr;
        }
      }
      .tile {
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--panel);
        padding: 14px 16px;
      }
      .tile .tl-l {
        font-size: 12px;
        color: var(--muted);
        margin-bottom: 6px;
      }
      .tile .tl-v {
        font-size: 26px;
        font-weight: 800;
        letter-spacing: -0.02em;
      }
      .tile .tl-v.green {
        color: var(--green);
      }
      .tile .tl-s {
        font-size: 11.5px;
        color: var(--faint);
        margin-top: 4px;
      }
      .tile-recent .rr {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 11.5px;
        color: var(--muted);
        padding: 2px 0;
      }
      .tile-recent .rr .rd {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--green);
      }
      .tile-recent .rr .rt {
        margin-left: auto;
        font-family: var(--mono);
        color: var(--faint);
      }
      .dash-row {
        display: grid;
        gap: 12px;
        margin-bottom: 16px;
      }
      .dash-row.two {
        grid-template-columns: 1fr 1fr;
      }
      .dash-row.side {
        grid-template-columns: 1fr 1.15fr;
      }
      @media (max-width: 780px) {
        .dash-row.two,
        .dash-row.side {
          grid-template-columns: 1fr;
        }
      }
      .chart-card {
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--panel);
        padding: 14px 16px 8px;
        min-width: 0;
      }
      .cc-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12.5px;
        color: var(--muted);
        margin-bottom: 8px;
      }
      .cc-range {
        color: var(--faint);
        font-family: var(--mono);
        font-size: 11px;
      }
      .dtable {
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--panel);
        overflow: hidden;
      }
      .dtable-head {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--line);
      }
      .dtable-head .dt-title {
        font-size: 13px;
        font-weight: 700;
      }
      .dtable-head .dt-search {
        font-size: 12px;
        color: var(--faint);
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 5px 12px;
        background: var(--panel);
      }
      .dtable-head .dt-actions {
        margin-left: auto;
        display: flex;
        gap: 6px;
      }
      .dtable-head .dt-actions span {
        font-size: 11.5px;
        font-weight: 600;
        color: var(--muted);
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 5px 11px;
      }
      .dtable-head .dt-actions .add {
        color: #fff;
        background: var(--accent);
        border-color: var(--accent);
      }
      table.dt {
        width: 100%;
        border-collapse: collapse;
        font-size: 12.5px;
      }
      table.dt th {
        text-align: left;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--faint);
        padding: 9px 14px;
        background: var(--raised);
      }
      table.dt td {
        padding: 10px 14px;
        border-top: 1px solid var(--line);
        color: var(--fg);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
      }
      table.dt tr.sev-critical td {
        background: rgba(189, 43, 61, 0.06);
      }
      table.dt tr.sev-warning td {
        background: rgba(131, 94, 11, 0.07);
      }
      .pill {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 11px;
        font-weight: 600;
        padding: 2px 9px;
        border-radius: 999px;
      }
      .pill::before {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: currentColor;
      }
      .pill.g {
        background: var(--green-soft);
        color: var(--green);
      }
      .pill.r {
        background: var(--danger-soft);
        color: var(--danger);
      }
      .pill.a {
        background: var(--amber-soft);
        color: var(--amber);
      }
      .pill.n {
        background: var(--raised);
        color: var(--muted);
      }

/* ============================================================
   PAGE-ONLY BLOCKS  (pricing FAQ, agencies grid)
   ============================================================ */
.faq { display: grid; gap: 12px; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  padding: 20px 22px;
}
.faq-item h3 { font-family: var(--serif); font-weight: 500; font-size: 17px; letter-spacing: -0.01em; }
.faq-item p { margin-top: 8px; color: var(--muted); font-size: 14.5px; line-height: 1.6; }

.ag-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ag-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  padding: 24px 22px;
}
.ag-item h3 { font-family: var(--serif); font-weight: 500; font-size: 18px; letter-spacing: -0.01em; }
.ag-item p { margin-top: 10px; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 1000px) { .ag-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .ag-grid { grid-template-columns: 1fr; } }

/* a page header carries an h1 where sections carry an h2 */
.head h1 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.06; }

/* ============================================================
   MOBILE — long vertical stacks become horizontal strips, so a phone
   scrolls through them sideways instead of forever downwards.
   ============================================================ */
@media (max-width: 620px) {
  /* the prebuilt library on the home page (/use-cases keeps its full grid) */
  .picks .pick-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .picks .pick-grid::-webkit-scrollbar { display: none; }
  .picks .pick { scroll-snap-align: start; }
  .picks .more-wrap { display: none; }

  /* filter and industry chips scroll rather than stacking rows deep */
  .filters,
  .industry-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .filters::-webkit-scrollbar,
  .industry-tabs::-webkit-scrollbar { display: none; }
  .filters .chip,
  .industry-tabs .itab { flex-shrink: 0; }

  /* the workspace preview's agent list runs across, not down */
  .app-agents {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .app-agents::-webkit-scrollbar { display: none; }
  .app-agents > * { flex-shrink: 0; }
  .app-agents-label { display: none; }

  /* the testimonial wall is decorative — it does not need to be tall */
  .wall { height: 420px; }
}
@media (max-width: 620px) {
  /* The workspace preview is proof, not content — on a phone it only has to
     read as "a real dashboard", so it shows less of itself. */
  .app-main .tiles { grid-template-columns: 1fr 1fr; }
  .app-main .tile-recent { display: none; }
  .app-main .dash-row.two > .chart-card:nth-child(2),
  .app-main .dash-row.side > .dtable { display: none; }
  .app-main .dtable tbody tr:nth-child(n + 4) { display: none; }
  .app-main .dash-tabs { overflow-x: auto; scrollbar-width: none; }
  .app-main .dash-tabs::-webkit-scrollbar { display: none; }
  .app-main .dash-tabs span { flex-shrink: 0; }

  /* the plan cards carry a lot of air on a narrow screen */
  .plan { padding: 20px 18px; }
  .plan ul { margin-bottom: 18px; gap: 8px; }
  .plan-blurb { min-height: 0; margin-bottom: 14px; }
  .price { font-size: 38px; }

  /* the two feature rows do not need their full desktop rhythm */
  .row ul { gap: 8px; }
  .row p { margin-top: 12px; }
}

/* ============================================================
   BUILD BUTTON — three blocks that stack themselves
   ============================================================ */
.btn .blocks { overflow: visible; }
.btn .blocks rect {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: blockStack 2.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.btn .blocks .b1 { animation-delay: 0s; }
.btn .blocks .b2 { animation-delay: 0.14s; }
.btn .blocks .b3 { animation-delay: 0.28s; }

@keyframes blockStack {
  0% { opacity: 0; transform: translateY(4px) scale(0.7); }
  14% { opacity: 1; transform: translateY(0) scale(1); }
  62% { opacity: 1; transform: translateY(0) scale(1); }
  78% { opacity: 0; transform: translateY(-3px) scale(0.8); }
  100% { opacity: 0; transform: translateY(4px) scale(0.7); }
}

@media (prefers-reduced-motion: reduce) {
  .btn .blocks rect { animation: none; opacity: 1; transform: none; }
}

/* ============================================================
   SECTION COLOUR — every section takes its own tint. All of them sit at
   the same lightness so the page reads as one family rather than a
   swatch book, and cards stay pure white so they lift off whatever
   they land on.
   ============================================================ */
.panel.art#library { background: #251823; }   /* plum */
.panel.art#workspace { background: #16202e; }   /* navy */
.panel.art#how { background: #2a1a24; }   /* wine */
.panel.art#build { background: #16241f; }   /* forest */
.panel.art#voices { background: #241c18; }   /* umber */
.panel.art#pricing { background: #1c1a2e; }   /* indigo */
.panel.art.cta-panel { background: #14131f; }   /* deep */
.panel.art.tight { background: #16161d; }   /* slate */

/* the inner pages: the header takes the lavender, the rest stay quiet */
.panel.art#top { background: #251823; }
.panel.art#plans { background: #1c1a2e; }
@media (max-width: 620px) {
  /* the hero earns its height from wide screens; a phone does not need it */
  .panel.hero { padding-top: 104px; }
  .console { margin-top: 30px; }
  .hero-trust { margin-top: 0; padding: 24px 0 34px; }
}

/* ============================================================
   NAV OVER A DARK HERO
   While the bar is transparent it sits on the navy artwork, so its type has
   to be light. The moment it scrolls onto its own frosted surface (.stuck)
   the normal ink colours take over again — and the inner pages, which open
   on a light header panel, never get this class at all.
   ============================================================ */
.nav-on-dark:not(.stuck) .logo,
.nav-on-dark:not(.stuck) .nav-links a,
.nav-on-dark:not(.stuck) .nav-act .plain {
  color: #fff;
}
.nav-on-dark:not(.stuck) .nav-links a:hover {
  opacity: 0.72;
}
.nav-on-dark:not(.stuck) .nav-act .plain {
  background: rgba(255, 255, 255, 0.12);
}
.nav-on-dark:not(.stuck) .nav-act .plain:hover {
  background: rgba(255, 255, 255, 0.2);
}
.nav-on-dark:not(.stuck) .nav-in {
  border-bottom-color: rgba(255, 255, 255, 0.16);
}
.nav-on-dark:not(.stuck) .nav-toggle {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
}
.nav-on-dark:not(.stuck) .nav-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* "Get started" is a way in, not the page's primary action — it reads as ink so
   the indigo is reserved for the things that actually do something. Over the
   navy hero it inverts to white, since ink on navy would vanish. */
.btn-ink {
  background: #f4f3f8;
  color: #14131c;
  border-color: #f4f3f8;
}
.btn-ink:hover {
  background: #fff;
  border-color: #fff;
}