> ## Documentation Index
> Fetch the complete documentation index at: https://docs.context.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Context.dev

> Turn any domain into structured, AI-ready data with a single API: logos, colors, company metadata, web scraping, product extraction, and industry classification.

export const CtxV3Wordmark = () => <section className="ctxd-v3-section ctxd-v3-word ctxd-v3-reveal">
    <style>{`
      .ctxd-v3-word {
        overflow: hidden;
        padding: var(--v3-section-y) 0 0;
      }
      .ctxd-v3-word__mark {
        display: block;
        font-family: var(--v3-sans);
        font-weight: 500;
        font-size: clamp(110px, 22vw, 320px);
        line-height: 0.9;
        letter-spacing: -0.04em;
        text-align: center;
        white-space: nowrap;
        user-select: none;
        margin: 0;
        transform: translateY(0.08em);
        background-image: linear-gradient(
          180deg,
          #9cc3f5 0%,
          #c7ddfb 45%,
          transparent 92%
        );
        background-size: 220% 100%;
        background-position: 0% 0%;
        background-repeat: no-repeat;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
      }
      .dark .ctxd-v3-word__mark {
        background-image: linear-gradient(
          180deg,
          rgba(96, 150, 255, 0.85) 0%,
          rgba(96, 150, 255, 0.45) 45%,
          transparent 92%
        );
      }
      @media (prefers-reduced-motion: no-preference) {
        .ctxd-v3-word__mark {
          animation: ctxd-v3-word-shimmer 6s linear infinite;
        }
        @keyframes ctxd-v3-word-shimmer {
          0% { background-position: 0% 0%; }
          50% { background-position: 100% 0%; }
          100% { background-position: 0% 0%; }
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .ctxd-v3-word__mark {
          animation: none;
        }
      }
      @media (max-width: 768px) {
        .ctxd-v3-word__mark {
          /* lower the clamp floor so the full word fits the phone width
             and bleeds off the bottom (not clipped at the right edge) */
          font-size: clamp(72px, 20vw, 150px);
          letter-spacing: -0.045em;
        }
      }
      @media (max-width: 480px) {
        .ctxd-v3-word__mark {
          font-size: clamp(64px, 19vw, 110px);
          letter-spacing: -0.05em;
        }
      }
    `}</style>
    <span className="ctxd-v3-word__mark" aria-hidden="true">Context</span>
  </section>;

export const CtxV3Cta = () => {
  const TILES = [{
    id: "make",
    label: "Make",
    href: "/nocode/make",
    x: 90,
    y: 35,
    edge: "M416 196 C 322 196 252 95 210 95"
  }, {
    id: "zapier",
    label: "Zapier",
    href: "/nocode/zapier",
    x: 778,
    y: 25,
    edge: "M572 196 C 690 196 752 85 778 85"
  }, {
    id: "googlesheets",
    label: "Google Sheets",
    href: "/nocode/google-sheets",
    x: 70,
    y: 290,
    edge: "M416 244 C 320 244 232 350 190 350"
  }, {
    id: "excel",
    label: "Microsoft Excel",
    href: "/nocode/microsoft-excel",
    x: 798,
    y: 280,
    edge: "M572 244 C 700 244 742 340 798 340"
  }];
  const Logo = ({id}) => <img className="cta-logo" src={`/images/ctxv3/logo-${id}.svg`} alt="" />;
  return <section className="ctxd-v3-section ctxd-v3-cta ctxd-v3-reveal">
      <div className="ctxd-v3-cta-top">
        <div className="ctxd-v3-cta-left">
          <div className="ctxd-v3-kicker ctxd-v3-cta-kicker">
            GET STARTED FOR FREE
          </div>
          <h2 className="ctxd-v3-cta-head">
            Ship an agent that actually{" "}
            <span className="ctxd-v3-cta-accent">knows things.</span>
          </h2>
        </div>

        <div className="ctxd-v3-cta-right">
          <p className="ctxd-v3-cta-copy">
            Free tier, 10-minute integration, and the same API powering agents
            at Mintlify, daily.dev, and Propane. No credit card to start.
          </p>
          <div className="ctxd-v3-cta-actions mt-5">
            <a className="ctxd-v3-btn ctxd-v3-btn--primary" href="/quickstart">
              <span>Quickstart</span>
              <span className="arrow" aria-hidden="true">
                →
              </span>
            </a>
          </div>
        </div>
      </div>

      {}
      <div className="ctxd-v3-cta-figure">
        <div className="cta-wrap">
          <div className="cta-stage">
            <div className="cta-glow" aria-hidden="true" />

            <svg className="cta-edges" viewBox="0 0 988 440" fill="none" aria-hidden="true">
              {TILES.map(t => <path key={t.id} className="cta-edge" d={t.edge} />)}
            </svg>

            {}
            <div className="cta-api">
              <span className="cta-api-label">API</span>
              <span className="cta-handle cta-handle-tl" />
              <span className="cta-handle cta-handle-tr" />
              <span className="cta-handle cta-handle-bl" />
              <span className="cta-handle cta-handle-br" />
            </div>

            {}
            <div className="cta-tile-grid">
              {TILES.map(t => <a key={t.id} className="cta-tile" href={t.href} aria-label={`${t.label} integration`} style={{
    left: t.x,
    top: t.y
  }}>
                  <Logo id={t.id} />
                </a>)}
            </div>
          </div>
        </div>
      </div>

      <style>{`
      /* No horizontal override → inherits the global 56px section inset
         (Figma: CTA content sits 56px inside the inner rail, at x=226). */
      .ctxd-v3-cta { padding-top: var(--v3-section-y); padding-bottom: var(--v3-section-y); }
      .ctxd-v3-cta-top { display: flex; gap: 48px; align-items: flex-start; justify-content: space-between; }
      .ctxd-v3-cta-left { flex: 0 1 390px; max-width: 390px; }
      .ctxd-v3-cta-kicker { margin-bottom: 28px; }
      .ctxd-v3-cta-head {
        font-family: var(--v3-sans); font-weight: 500;
        font-size: clamp(34px, 5.2vw, 58px); line-height: 1.0; letter-spacing: -0.03em;
        text-transform: capitalize; color: var(--v3-ink); margin: 0;
      }
      .ctxd-v3-cta-head .ctxd-v3-cta-accent { color: var(--v3-blue-border); }
      .ctxd-v3-cta-right { flex: 0 1 340px; max-width: 340px; }
      .ctxd-v3-cta-copy {
        font-family: var(--v3-sans); font-weight: 400; font-size: 18px; line-height: 1.45;
        color: var(--v3-ink-2); margin: 0 0 28px;
      }
      .ctxd-v3-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

      /* ---- integration web stage ---- */
      .ctxd-v3-cta-figure { position: relative; padding: 56px 0 0; }
      .ctxd-v3-cta .cta-wrap {
        container-type: inline-size;
        width: 100%; max-width: 988px; margin: 0 auto;
        aspect-ratio: 988 / 440; position: relative;
      }
      .ctxd-v3-cta .cta-stage {
        position: absolute; top: 0; left: 0; width: 988px; height: 440px;
        transform: scale(calc(100cqw / 988)); transform-origin: top left;
      }
      .ctxd-v3-cta .cta-glow {
        position: absolute; left: 494px; top: 220px; width: 560px; height: 560px;
        transform: translate(-50%, -50%); border-radius: 50%; z-index: 0; pointer-events: none;
        background: radial-gradient(circle, color-mix(in srgb, var(--v3-blue) 22%, transparent) 0%, transparent 66%);
      }
      .dark .ctxd-v3-cta .cta-glow {
        background: radial-gradient(circle, color-mix(in srgb, var(--v3-blue) 34%, transparent) 0%, transparent 66%);
      }
      .ctxd-v3-cta .cta-edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
      .ctxd-v3-cta .cta-edge {
        stroke: color-mix(in srgb, var(--v3-blue) 55%, transparent);
        stroke-width: 1.6; stroke-dasharray: 5 5; fill: none; stroke-linecap: round;
      }

      /* wrapper is transparent on desktop so .cta-tile absolute positioning holds;
         it becomes a real grid container in the <=600px reflow. */
      .ctxd-v3-cta .cta-tile-grid { display: contents; }
      .ctxd-v3-cta .cta-tile {
        position: absolute; width: 120px; height: 120px; z-index: 2;
        display: flex; align-items: center; justify-content: center;
        background: #fff; border: 1px solid rgba(10,10,10,0.08); border-radius: 22px;
        box-shadow: 0 1px 2px rgba(3,4,28,0.04), 0 18px 40px -22px rgba(3,4,28,0.45);
        text-decoration: none;
        transition: transform 0.3s var(--v3-ease), box-shadow 0.3s var(--v3-ease), border-color 0.2s ease;
      }
      @media (prefers-reduced-motion: no-preference) {
        .ctxd-v3-cta a.cta-tile:hover {
          transform: translateY(-3px);
          border-color: color-mix(in srgb, var(--v3-blue) 45%, rgba(10,10,10,0.08));
          box-shadow: 0 1px 2px rgba(3,4,28,0.04), 0 22px 48px -20px rgba(19,115,232,0.4);
        }
      }
      .ctxd-v3-cta a.cta-tile:focus-visible {
        outline: 2px solid var(--v3-blue);
        outline-offset: 3px;
      }
      .dark .ctxd-v3-cta .cta-tile { border-color: rgba(255,255,255,0.10); box-shadow: 0 18px 44px -20px rgba(0,0,0,0.7); }
      .ctxd-v3-cta .cta-logo { width: 58px; height: 58px; display: block; }

      .ctxd-v3-cta .cta-api {
        position: absolute; left: 416px; top: 164px; width: 156px; height: 112px; z-index: 3;
        display: flex; align-items: center; justify-content: center;
        border: 1.5px dashed color-mix(in srgb, var(--v3-blue) 70%, transparent);
        border-radius: 14px;
        background: color-mix(in srgb, var(--v3-blue) 7%, var(--v3-bg));
      }
      .ctxd-v3-cta .cta-api-label { font-family: var(--v3-sans); font-weight: 500; font-size: 30px; color: var(--v3-blue); letter-spacing: 0.01em; }
      .ctxd-v3-cta .cta-handle {
        position: absolute; width: 11px; height: 11px; background: var(--v3-bg);
        border: 1.5px solid var(--v3-blue); border-radius: 2px;
      }
      .ctxd-v3-cta .cta-handle-tl { left: -6px; top: -6px; }
      .ctxd-v3-cta .cta-handle-tr { right: -6px; top: -6px; }
      .ctxd-v3-cta .cta-handle-bl { left: -6px; bottom: -6px; }
      .ctxd-v3-cta .cta-handle-br { right: -6px; bottom: -6px; }

      /* ---- motion ---- */
      @media (prefers-reduced-motion: no-preference) {
        .ctxd-v3-cta .cta-edge { animation: cta-flow 1.1s linear infinite; }
        .ctxd-v3-cta .cta-api { animation: cta-pulse 2.4s var(--v3-ease) infinite; }
        .ctxd-v3-cta .cta-glow { animation: cta-glow-pulse 2.4s var(--v3-ease) infinite; }
      }
      @keyframes cta-flow { to { stroke-dashoffset: -20; } }
      @keyframes cta-pulse {
        0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--v3-blue) 22%, transparent); }
        50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--v3-blue) 0%, transparent); }
      }
      @keyframes cta-glow-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
      @media (prefers-reduced-motion: reduce) {
        .ctxd-v3-cta .cta-edge, .ctxd-v3-cta .cta-api, .ctxd-v3-cta .cta-glow { animation: none; }
      }

      @media (max-width: 900px) {
        .ctxd-v3-cta { padding-top: 56px; padding-bottom: 32px; }
        .ctxd-v3-cta-top { flex-direction: column; align-items: flex-start; gap: 32px; }
        .ctxd-v3-cta-left, .ctxd-v3-cta-right { flex: 1 1 100%; max-width: 540px; }
      }

      /* ---- mobile (<=768) ---- */
      @media (max-width: 768px) {
        .ctxd-v3-cta-top { gap: 24px; }
        .ctxd-v3-cta-kicker { margin-bottom: 18px; }
        .ctxd-v3-cta-head { font-size: clamp(30px, 8vw, 42px); }
        .ctxd-v3-cta-copy { font-size: 16px; margin-bottom: 22px; }
        .ctxd-v3-cta-actions .ctxd-v3-btn { min-height: 44px; }
        .ctxd-v3-cta-figure { padding-top: 40px; }
      }

      /* ---- reflow integration web to a static layout (<=600) ---- */
      @media (max-width: 600px) {
        .ctxd-v3-cta .cta-wrap {
          aspect-ratio: auto; max-width: 360px; container-type: normal;
        }
        .ctxd-v3-cta .cta-stage {
          position: static; width: 100%; height: auto; transform: none;
          display: flex; flex-direction: column; align-items: center; gap: 28px;
        }
        .ctxd-v3-cta .cta-edges { display: none; }
        .ctxd-v3-cta .cta-glow {
          left: 50%; top: 90px; width: 320px; height: 320px;
        }
        .ctxd-v3-cta .cta-api {
          position: relative; left: auto; top: auto;
          width: 140px; height: 92px; z-index: 3;
        }
        .ctxd-v3-cta .cta-api-label { font-size: 26px; }
        .ctxd-v3-cta .cta-tile-grid {
          display: grid; grid-template-columns: repeat(2, 1fr);
          gap: 18px; width: 100%; max-width: 280px; z-index: 2;
        }
        .ctxd-v3-cta .cta-tile {
          position: static; left: auto; top: auto;
          width: 100%; aspect-ratio: 1 / 1; height: auto;
          border-radius: 18px;
        }
        .ctxd-v3-cta .cta-logo { width: 46px; height: 46px; }
      }

      @media (max-width: 480px) {
        .ctxd-v3-cta-head { font-size: clamp(27px, 9vw, 36px); }
        .ctxd-v3-cta-copy { font-size: 15px; }
        .ctxd-v3-cta .cta-wrap { max-width: 320px; }
        .ctxd-v3-cta .cta-tile-grid { max-width: 240px; gap: 14px; }
      }
    `}</style>
    </section>;
};

export const CtxV3UseCases = () => {
  const LOGOLINK_ID = "brandLL_QObZ4OkTQJ0q1toWsQO9tXq8AzKlNdz4";
  const logo = domain => `https://logos.context.dev/?publicClientId=${LOGOLINK_ID}&domain=${domain}`;
  const hideOnError = e => {
    e.currentTarget.style.display = "none";
  };
  return <section className="ctxd-v3-section ctxd-v3-uc ctxd-v3-reveal">
      <style>{`
      /* Cards span nearly the full inner column (Figma inset 14.5px); the
         header sits a further 41.5px in, so its text aligns to the 56px
         inset used by the hero/CTA. */
      .ctxd-v3-uc {
        padding: var(--v3-section-y) 14.5px var(--v3-section-y);
      }

      /* ---------- header ---------- */
      .ctxd-v3-uc-head {
        display: flex;
        gap: 48px;
        align-items: center;
        justify-content: space-between;
        margin: 0 0 44px;
        padding: 0 41.5px;
      }
      .ctxd-v3-uc-head-left {
        flex: 1 1 auto;
        min-width: 0;
      }
      .ctxd-v3-uc-kicker {
        margin: 0 0 22px;
      }
      .ctxd-v3-uc-title {
        font-family: var(--v3-sans);
        font-weight: 500;
        font-size: clamp(38px, 5.4vw, 56px);
        line-height: 1.02;
        letter-spacing: -0.03em;
        color: var(--v3-ink);
        margin: 0;
      }
      .ctxd-v3-uc-title .ctxd-v3-uc-accent {
        color: var(--v3-blue);
      }
      .ctxd-v3-uc-head-right {
        flex: 0 0 360px;
        max-width: 360px;
      }
      .ctxd-v3-uc-lede {
        /* Mintlify renders a snippet <p> as an inline <span data-as="p">, so
           force block here — otherwise the inline-flex "view all" button flows
           up beside the lede instead of dropping below it. */
        display: block;
        font-family: var(--v3-sans);
        font-weight: 400;
        font-size: 17px;
        line-height: 1.5;
        color: var(--v3-ink-2);
        margin: 0 0 24px;
      }
      /* Uses the shared ghost CTA button (.ctxd-v3-btn--ghost) so it matches
         the hero / "Ship an agent" buttons — just nudge it down a touch. */
      .ctxd-v3-uc-viewall { margin-top: 18px; }

      /* ---------- grid ---------- */
      .ctxd-v3-uc-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 16px;
      }
      .ctxd-v3-uc-col-right {
        display: grid;
        grid-template-rows: auto auto;
        gap: 16px;
        min-width: 0;
      }
      .ctxd-v3-uc-card4 {
        grid-column: 1 / -1;
      }

      /* ---------- card shell ---------- */
      .ctxd-v3-uc-card {
        position: relative;
        background: var(--v3-card);
        border: 1px solid var(--v3-card-bd);
        border-radius: 14px;
        padding: 26px;
        display: flex;
        flex-direction: column;
        min-width: 0;
        overflow: hidden;
      }
      .ctxd-v3-uc-card1 { justify-content: flex-start; }
      /* whole-card link (stretched-link pattern). The mocks are decorative
         (aria-hidden) so an overlay anchor is safe — no nested interactives. */
      .ctxd-v3-uc-cardlink {
        position: absolute;
        inset: 0;
        z-index: 5;
        border-radius: inherit;
        text-decoration: none;
        font-size: 0;
        color: transparent;
      }
      .ctxd-v3-uc-cardlink:focus-visible {
        outline: 2px solid var(--v3-blue);
        outline-offset: -2px;
      }
      .ctxd-v3-uc-cardhead {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 0 0 18px;
      }
      .ctxd-v3-uc-tag {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: var(--v3-mono);
        font-size: 13px;
        font-weight: 500;
        color: var(--v3-blue);
      }
      .ctxd-v3-uc-tag::before {
        content: "";
        width: 7px;
        height: 7px;
        background: var(--v3-blue);
        flex: 0 0 auto;
      }
      .ctxd-v3-uc-tag--purple { color: #7c3aed; }
      .ctxd-v3-uc-tag-sep {
        font-family: var(--v3-mono);
        font-size: 13px;
        color: var(--v3-muted);
        margin: 0 2px;
      }
      .ctxd-v3-uc-tag-purple-dot::before {
        content: "";
        display: inline-block;
        width: 7px;
        height: 7px;
        background: #7c3aed;
        margin-right: 8px;
        vertical-align: middle;
      }
      .ctxd-v3-uc-open {
        flex: 0 0 auto;
        color: var(--v3-blue);
        opacity: 0.85;
        transition: transform 0.3s var(--v3-ease);
      }
      .ctxd-v3-uc-card:hover .ctxd-v3-uc-open {
        transform: translate(2px, -2px);
      }
      .ctxd-v3-uc-cardtitle {
        font-family: var(--v3-sans);
        font-weight: 500;
        font-size: 22px;
        line-height: 1.12;
        letter-spacing: -0.02em;
        color: var(--v3-ink);
        margin: 0 0 10px;
      }
      .ctxd-v3-uc-carddesc {
        font-family: var(--v3-sans);
        font-weight: 400;
        font-size: 14px;
        line-height: 1.5;
        color: var(--v3-ink-2);
        margin: 0;
        white-space: pre-line;
      }

      /* ---------- card 1 : brand mock ---------- */
      .ctxd-v3-uc-c1mock {
        margin-top: 22px;
        display: flex;
        flex-direction: column;
        gap: 14px;
      }
      .ctxd-v3-uc-search {
        display: flex;
        align-items: center;
        gap: 10px;
        border: 1px solid var(--v3-card-bd);
        border-radius: 10px;
        padding: 13px 14px;
        background: var(--v3-bg);
      }
      .ctxd-v3-uc-search-url {
        font-family: var(--v3-mono);
        font-size: 14px;
        color: var(--v3-ink);
        flex: 1 1 auto;
      }
      .ctxd-v3-uc-search-ico { color: var(--v3-muted); flex: 0 0 auto; }
      .ctxd-v3-uc-search-mag { color: var(--v3-blue); flex: 0 0 auto; }

      .ctxd-v3-uc-table {
        display: flex;
        flex-direction: column;
      }
      .ctxd-v3-uc-row {
        display: grid;
        grid-template-columns: 96px 1fr auto;
        align-items: center;
        gap: 12px;
        padding: 11px 0;
        border-top: 1px solid var(--v3-card-bd);
      }
      .ctxd-v3-uc-row:first-child { border-top: none; }
      .ctxd-v3-uc-rowlabel {
        font-family: var(--v3-sans);
        font-size: 12px;
        color: var(--v3-muted);
      }
      .ctxd-v3-uc-rowval {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: 1px solid var(--v3-card-bd);
        border-radius: 7px;
        padding: 6px 10px;
        background: var(--v3-bg);
        font-family: var(--v3-sans);
        font-size: 13px;
        color: var(--v3-ink);
        min-height: 30px;
        min-width: 0;
      }
      .ctxd-v3-uc-rowval-mono { font-family: var(--v3-mono); font-size: 12px; }
      .ctxd-v3-uc-swatch {
        width: 14px;
        height: 14px;
        border-radius: 4px;
        flex: 0 0 auto;
        border: 1px solid rgba(0,0,0,0.08);
      }
      .ctxd-v3-uc-kmark {
        width: 16px;
        height: 16px;
        border-radius: 4px;
        object-fit: cover;
        display: block;
        flex: 0 0 auto;
        background: var(--v3-card-bd);
      }
      .ctxd-v3-uc-check {
        color: #16a34a;
        flex: 0 0 auto;
      }
      .dark .ctxd-v3-uc-check { color: #34d27b; }

      /* ---------- card 2 : RAG mock ---------- */
      .ctxd-v3-uc-c2mock {
        margin-top: auto;
        padding-top: 22px;
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .ctxd-v3-uc-urlbar {
        display: flex;
        align-items: center;
        gap: 10px;
        border: 1px dashed var(--v3-blue);
        border-radius: 8px;
        padding: 10px 14px;
        background: rgba(19,115,232,0.03);
      }
      .ctxd-v3-uc-urlbar-text {
        font-family: var(--v3-mono);
        font-size: 13px;
        color: var(--v3-blue);
        flex: 1 1 auto;
      }
      .ctxd-v3-uc-urlbar-ico { color: var(--v3-blue); flex: 0 0 auto; }
      .ctxd-v3-uc-doccard {
        border: 1px dashed var(--v3-card-bd);
        border-radius: 8px;
        padding: 14px 16px;
        background: var(--v3-bg);
      }
      .ctxd-v3-uc-doctitle {
        font-family: var(--v3-sans);
        font-weight: 500;
        font-size: 14px;
        color: var(--v3-blue);
        margin: 0 0 9px;
      }
      .ctxd-v3-uc-docline {
        height: 8px;
        border-radius: 3px;
        background: var(--v3-card-bd);
        margin: 0 0 7px;
      }
      .ctxd-v3-uc-docline.l1 { width: 88%; }
      .ctxd-v3-uc-docline.l2 { width: 66%; }
      .ctxd-v3-uc-mdtag {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 6px;
        font-family: var(--v3-mono);
        font-size: 11px;
        color: #16a34a;
        border: 1px solid rgba(22,163,74,0.4);
        border-radius: 5px;
        padding: 3px 8px;
        background: rgba(22,163,74,0.07);
      }
      .dark .ctxd-v3-uc-mdtag { color: #34d27b; border-color: rgba(52,210,123,0.4); }
      .ctxd-v3-uc-mdtag::before {
        content: "";
        width: 5px; height: 5px; border-radius: 50%;
        background: currentColor;
      }

      /* ---------- card 3 : CRM enrich mock ---------- */
      .ctxd-v3-uc-c3mock {
        margin-top: auto;
        padding-top: 26px;
        display: flex;
        align-items: center;
        gap: 0;
        flex-wrap: wrap;
      }
      .ctxd-v3-uc-c3-left {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        flex: 0 0 auto;
      }
      .ctxd-v3-uc-shopify-tile {
        width: 64px;
        height: 64px;
        border-radius: 14px;
        overflow: hidden;
        flex: 0 0 auto;
        background: var(--v3-bg);
        border: 1px solid var(--v3-card-bd);
        box-shadow: 0 4px 14px rgba(3,4,28,0.12);
      }
      .ctxd-v3-uc-shopify-tile img {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 10px;
        object-fit: contain;
        display: block;
      }
      .ctxd-v3-uc-shopify-card {
        border: 1px solid var(--v3-card-bd);
        border-radius: 10px;
        padding: 11px 14px;
        background: var(--v3-bg);
        min-width: 150px;
      }
      .ctxd-v3-uc-shopify-name {
        font-family: var(--v3-sans);
        font-weight: 500;
        font-size: 14px;
        color: var(--v3-ink);
      }
      .ctxd-v3-uc-shopify-url {
        font-family: var(--v3-sans);
        font-size: 12px;
        color: var(--v3-muted);
        margin: 2px 0 4px;
      }
      .ctxd-v3-uc-shopify-loc {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-family: var(--v3-sans);
        font-size: 12px;
        color: var(--v3-ink-2);
      }
      .ctxd-v3-uc-c3-connector {
        flex: 1 1 28px;
        min-width: 28px;
        height: 1px;
        border-top: 1px dashed var(--v3-rail);
        margin: 0 4px;
        align-self: center;
      }
      .ctxd-v3-uc-enrich {
        border: 1px solid var(--v3-card-bd);
        border-radius: 10px;
        padding: 14px;
        background: var(--v3-bg);
        flex: 0 0 auto;
      }
      .ctxd-v3-uc-enrich-label {
        font-family: var(--v3-mono);
        font-size: 11px;
        letter-spacing: 0.04em;
        color: var(--v3-blue);
        margin: 0 0 10px;
      }
      .ctxd-v3-uc-chip {
        display: block;
        font-family: var(--v3-mono);
        font-size: 11px;
        color: var(--v3-blue);
        border: 1px solid rgba(19,115,232,0.35);
        border-radius: 6px;
        padding: 6px 10px;
        background: rgba(19,115,232,0.06);
        margin: 0 0 8px;
      }
      .ctxd-v3-uc-chip:last-child { margin-bottom: 0; }

      /* ---------- card 4 : transaction mock ---------- */
      .ctxd-v3-uc-card4 .ctxd-v3-uc-card4-grid {
        display: grid;
        grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
        gap: 36px;
        align-items: center;
      }
      .ctxd-v3-uc-card4-left { min-width: 0; }
      .ctxd-v3-uc-card4-mock {
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: 16px;
        min-width: 0;
      }
      .ctxd-v3-uc-raw-tag {
        display: inline-block;
        font-family: var(--v3-mono);
        font-size: 11px;
        letter-spacing: 0.08em;
        color: var(--v3-ink-2);
        border: 1px solid var(--v3-card-bd);
        border-radius: 6px;
        padding: 4px 9px;
        margin-bottom: 12px;
        background: var(--v3-bg);
      }
      .ctxd-v3-uc-raw {
        flex: 0 0 auto;
        max-width: 246px;
      }
      .ctxd-v3-uc-raw-box {
        border: 1px dashed var(--v3-blue);
        border-radius: 8px;
        padding: 12px 14px;
        background: rgba(19,115,232,0.03);
        font-family: var(--v3-mono);
        font-size: 13px;
        line-height: 1.5;
        color: var(--v3-blue);
      }
      .ctxd-v3-uc-curve {
        flex: 0 0 36px;
        align-self: flex-start;
        margin-top: 14px;
        min-height: 70px;
      }
      .ctxd-v3-uc-curve svg { width: 100%; height: 100%; display: block; }
      .ctxd-v3-uc-merchant {
        flex: 1 1 auto;
        min-width: 0;
        margin-top: 36px;
        border: 1px solid color-mix(in srgb, var(--v3-blue) 22%, var(--v3-card-bd));
        border-radius: 14px;
        padding: 0;
        background: var(--v3-card);
        overflow: hidden;
        box-shadow: 0 10px 30px -10px rgba(19,115,232,0.16);
      }
      .dark .ctxd-v3-uc-merchant { box-shadow: 0 12px 32px -10px rgba(19,115,232,0.30); }
      .ctxd-v3-uc-merchant-top {
        font-family: var(--v3-mono);
        font-size: 11px;
        color: var(--v3-muted);
        padding: 12px 14px;
        border: 1px dashed var(--v3-card-bd);
        margin: 14px 14px 4px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
      }
      .ctxd-v3-uc-merchant-top::before {
        content: "";
        width: 5px; height: 5px; border-radius: 50%;
        background: var(--v3-muted);
        flex: 0 0 auto;
      }
      .ctxd-v3-uc-merchant-row {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px 18px;
      }
      /* one faint divider, only between the merchant rows (cleaner) */
      .ctxd-v3-uc-merchant-row + .ctxd-v3-uc-merchant-row {
        border-top: 1px solid var(--v3-card-bd);
      }
      .ctxd-v3-uc-apple-tile {
        width: 38px;
        height: 38px;
        border-radius: 9px;
        overflow: hidden;
        flex: 0 0 auto;
        background: var(--v3-bg);
        border: 1px solid var(--v3-card-bd);
      }
      .ctxd-v3-uc-apple-tile img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .ctxd-v3-uc-merchant-name {
        flex: 1 1 auto;
        min-width: 0;
      }
      .ctxd-v3-uc-merchant-name b {
        display: block;
        font-family: var(--v3-sans);
        font-weight: 600;
        font-size: 15px;
        color: var(--v3-ink);
      }
      .ctxd-v3-uc-merchant-name b { margin-bottom: 1px; }
      .ctxd-v3-uc-merchant-name span {
        font-family: var(--v3-sans);
        font-size: 12.5px;
        color: var(--v3-muted);
        white-space: nowrap;
      }
      .ctxd-v3-uc-palette {
        display: flex;
        gap: 10px;
      }
      .ctxd-v3-uc-pal {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        flex: 0 0 auto;
        border: 1px solid rgba(0,0,0,0.06);
      }

      /* ---------- motion ---------- */
      @media (prefers-reduced-motion: no-preference) {
        .ctxd-v3-uc-card {
          transition: transform 0.4s var(--v3-ease), box-shadow 0.4s var(--v3-ease);
        }
        .ctxd-v3-uc-card:hover {
          transform: translateY(-3px);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .ctxd-v3-uc-card,
        .ctxd-v3-uc-open,
        .ctxd-v3-uc-viewall,
        .ctxd-v3-uc-viewall .ctxd-v3-uc-arrow {
          transition: none;
        }
      }

      /* ---------- responsive ---------- */
      @media (max-width: 900px) {
        .ctxd-v3-uc { padding: 56px 14.5px 32px; }
        .ctxd-v3-uc-head {
          flex-direction: column;
          align-items: flex-start;
          gap: 28px;
          margin-bottom: 32px;
        }
        .ctxd-v3-uc-head-right {
          flex: 1 1 100%;
          max-width: 520px;
        }
        .ctxd-v3-uc-grid {
          grid-template-columns: minmax(0, 1fr);
        }
        .ctxd-v3-uc-card4 .ctxd-v3-uc-card4-grid {
          grid-template-columns: minmax(0, 1fr);
          gap: 24px;
        }
        .ctxd-v3-uc-card4-mock {
          flex-direction: column;
          align-items: stretch;
        }
        .ctxd-v3-uc-raw { max-width: 100%; }
        .ctxd-v3-uc-curve { display: none; }
        .ctxd-v3-uc-c3mock { justify-content: flex-start; }
        .ctxd-v3-uc-c3-connector { display: none; }
      }

      /* ---------- phones (<=768) ---------- */
      @media (max-width: 768px) {
        .ctxd-v3-uc {
          padding: 48px 12px 28px;
        }
        /* header: drop the desktop 41.5px inset so it aligns with the cards;
           cards already sit at the 12px section inset on mobile */
        .ctxd-v3-uc-head {
          padding: 0;
          gap: 22px;
          margin-bottom: 26px;
        }
        .ctxd-v3-uc-kicker { margin-bottom: 16px; }
        .ctxd-v3-uc-title {
          font-size: clamp(30px, 8.4vw, 40px);
        }
        .ctxd-v3-uc-lede {
          font-size: 16px;
          margin-bottom: 18px;
        }

        /* tighten grid gaps when single-column */
        .ctxd-v3-uc-grid { gap: 14px; }
        .ctxd-v3-uc-col-right { gap: 14px; }

        /* card shell: reduce padding */
        .ctxd-v3-uc-card { padding: 20px; }
        .ctxd-v3-uc-cardtitle { font-size: 20px; }
        .ctxd-v3-uc-cardhead { margin-bottom: 14px; }

        /* card 3: left-align the stacked Shopify block so it reads cleanly
           above the enrich box instead of floating centered */
        .ctxd-v3-uc-c3-left {
          align-items: flex-start;
          flex-direction: row;
          flex-wrap: wrap;
          gap: 14px;
        }
        .ctxd-v3-uc-enrich { width: 100%; }

        /* card 4 internal grid already single-column at <=900; tighten gap */
        .ctxd-v3-uc-card4 .ctxd-v3-uc-card4-grid { gap: 18px; }
        .ctxd-v3-uc-card4-mock { gap: 14px; }
        .ctxd-v3-uc-merchant { margin-top: 0; }
        /* let the long descriptor wrap rather than overflow */
        .ctxd-v3-uc-merchant-top { white-space: normal; }
        .ctxd-v3-uc-merchant-name span { white-space: normal; }
      }

      /* ---------- small phones (<=480) ---------- */
      @media (max-width: 480px) {
        .ctxd-v3-uc {
          padding: 40px 10px 24px;
        }
        .ctxd-v3-uc-title {
          font-size: clamp(27px, 8.6vw, 34px);
        }
        .ctxd-v3-uc-card { padding: 16px; }
        .ctxd-v3-uc-cardtitle { font-size: 19px; }
        .ctxd-v3-uc-carddesc { font-size: 13.5px; }

        /* card 1 table: narrow the fixed label column so values keep room */
        .ctxd-v3-uc-row {
          grid-template-columns: 80px 1fr auto;
          gap: 10px;
        }

        /* card 3: stack tile + card vertically again on the smallest screens */
        .ctxd-v3-uc-c3-left { flex-direction: column; }
        .ctxd-v3-uc-shopify-card { min-width: 0; width: 100%; }

        /* card 4 raw box: slightly smaller mono so it never crowds the edge */
        .ctxd-v3-uc-raw-box { font-size: 12px; padding: 11px 12px; }
        .ctxd-v3-uc-merchant-row { padding: 14px 14px; gap: 12px; }
      }
    `}</style>

      {}
      <div className="ctxd-v3-uc-head">
        <div className="ctxd-v3-uc-head-left">
          <div className="ctxd-v3-kicker ctxd-v3-uc-kicker">USE CASES</div>
          <h2 className="ctxd-v3-uc-title">
            Built For <span className="ctxd-v3-uc-accent">Every Workflow</span>
          </h2>
        </div>
        <div className="ctxd-v3-uc-head-right">
          <p className="ctxd-v3-uc-lede">
            Get structured data, ready to embed in your application or workflow
          </p>
          <a className="ctxd-v3-btn ctxd-v3-btn--ghost ctxd-v3-uc-viewall mt-5" href="/introduction">
            <span>VIEW ALL USE CASES</span>
            <span className="arrow" aria-hidden="true">
              →
            </span>
          </a>
        </div>
      </div>

      {}
      <div className="ctxd-v3-uc-grid">
        {}
        <article className="ctxd-v3-uc-card ctxd-v3-uc-card1">
          <a className="ctxd-v3-uc-cardlink" href="/guides/get-brand-data" aria-label="Retrieve Brand">
            Retrieve Brand
          </a>
          <div className="ctxd-v3-uc-cardhead">
            <span className="ctxd-v3-uc-tag">/brand</span>
            <svg className="ctxd-v3-uc-open" width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
              <path d="M5 13L13 5M13 5H6.5M13 5V11.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </div>
          <h3 className="ctxd-v3-uc-cardtitle">Retrieve Brand</h3>
          <p className="ctxd-v3-uc-carddesc">
            Turn any domain into logos, colors, fonts, and company data with
            one API call.
          </p>

          <div className="ctxd-v3-uc-c1mock" aria-hidden="true">
            <div className="ctxd-v3-uc-search">
              <svg className="ctxd-v3-uc-search-ico" width="16" height="16" viewBox="0 0 16 16" fill="none">
                <circle cx="8" cy="8" r="6.25" stroke="currentColor" strokeWidth="1.2" />
                <path d="M1.75 8H14.25M8 1.75C9.7 3.6 9.7 12.4 8 14.25M8 1.75C6.3 3.6 6.3 12.4 8 14.25" stroke="currentColor" strokeWidth="1.2" />
              </svg>
              <span className="ctxd-v3-uc-search-url">klarna.com</span>
              <svg className="ctxd-v3-uc-search-mag" width="16" height="16" viewBox="0 0 16 16" fill="none">
                <circle cx="7" cy="7" r="4.75" stroke="currentColor" strokeWidth="1.4" />
                <path d="M10.5 10.5L14 14" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
              </svg>
            </div>

            <div className="ctxd-v3-uc-table">
              <div className="ctxd-v3-uc-row">
                <span className="ctxd-v3-uc-rowlabel">Company Name</span>
                <span className="ctxd-v3-uc-rowval">Klarna</span>
                <svg className="ctxd-v3-uc-check" width="15" height="15" viewBox="0 0 16 16" fill="none">
                  <path d="M3 8.5L6.5 12L13 4.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </div>
              <div className="ctxd-v3-uc-row">
                <span className="ctxd-v3-uc-rowlabel">Industry</span>
                <span className="ctxd-v3-uc-rowval">FinTech</span>
                <svg className="ctxd-v3-uc-check" width="15" height="15" viewBox="0 0 16 16" fill="none">
                  <path d="M3 8.5L6.5 12L13 4.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </div>
              <div className="ctxd-v3-uc-row">
                <span className="ctxd-v3-uc-rowlabel">Brand Color</span>
                <span className="ctxd-v3-uc-rowval ctxd-v3-uc-rowval-mono">
                  <span className="ctxd-v3-uc-swatch" style={{
    background: "#FFA8CD"
  }} />
                  #FFA8CD
                </span>
                <svg className="ctxd-v3-uc-check" width="15" height="15" viewBox="0 0 16 16" fill="none">
                  <path d="M3 8.5L6.5 12L13 4.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </div>
              <div className="ctxd-v3-uc-row">
                <span className="ctxd-v3-uc-rowlabel">Description</span>
                <span className="ctxd-v3-uc-rowval">
                  Klarna is a global payments company
                </span>
                <svg className="ctxd-v3-uc-check" width="15" height="15" viewBox="0 0 16 16" fill="none">
                  <path d="M3 8.5L6.5 12L13 4.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </div>
              <div className="ctxd-v3-uc-row">
                <span className="ctxd-v3-uc-rowlabel">Logo</span>
                <span className="ctxd-v3-uc-rowval">
                  <img className="ctxd-v3-uc-kmark" src={logo("klarna.com")} alt="" loading="lazy" onError={hideOnError} />
                  Klarna-logo.svg
                </span>
                <svg className="ctxd-v3-uc-check" width="15" height="15" viewBox="0 0 16 16" fill="none">
                  <path d="M3 8.5L6.5 12L13 4.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </div>
            </div>
          </div>
        </article>

        {}
        <div className="ctxd-v3-uc-col-right">
          {}
          <article className="ctxd-v3-uc-card">
            <a className="ctxd-v3-uc-cardlink" href="/use-cases/build-rag-from-websites" aria-label="Build a RAG knowledge base">
              Build a RAG knowledge base
            </a>
            <div className="ctxd-v3-uc-cardhead">
              <span className="ctxd-v3-uc-tag">/web/crawl</span>
              <svg className="ctxd-v3-uc-open" width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
                <path d="M5 13L13 5M13 5H6.5M13 5V11.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </div>
            <h3 className="ctxd-v3-uc-cardtitle">Build a RAG Knowledge Base</h3>
            <p className="ctxd-v3-uc-carddesc">
              Crawl any marketing or docs site and turn every page into clean
              Markdown ready for embeddings.
            </p>

            <div className="ctxd-v3-uc-c2mock" aria-hidden="true">
              <div className="ctxd-v3-uc-urlbar">
                <span className="ctxd-v3-uc-urlbar-text">docs.stripe.com</span>
                <svg className="ctxd-v3-uc-urlbar-ico" width="15" height="15" viewBox="0 0 16 16" fill="none">
                  <path d="M8 13V3M8 3L4 7M8 3L12 7" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </div>
              <div className="ctxd-v3-uc-doccard">
                <p className="ctxd-v3-uc-doctitle">Getting started</p>
                <div className="ctxd-v3-uc-docline l1" />
                <div className="ctxd-v3-uc-docline l2" />
                <span className="ctxd-v3-uc-mdtag">markdown ready</span>
              </div>
            </div>
          </article>

          {}
          <article className="ctxd-v3-uc-card">
            <a className="ctxd-v3-uc-cardlink" href="/use-cases/lead-enrichment" aria-label="Auto-enrich CRM leads">
              Auto-enrich CRM leads
            </a>
            <div className="ctxd-v3-uc-cardhead">
              <span className="ctxd-v3-uc-tag">/web/naics</span>
              <span className="ctxd-v3-uc-tag-sep">|</span>
              <span className="ctxd-v3-uc-tag">/web/sic</span>
              <span className="ctxd-v3-uc-tag-sep">|</span>
              <span className="ctxd-v3-uc-tag">/brand</span>
              <span className="ctxd-v3-uc-tag-sep">|</span>
              <span className="ctxd-v3-uc-tag" style={{
    marginRight: "auto"
  }}>
                /extract
              </span>
              <svg className="ctxd-v3-uc-open" width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
                <path d="M5 13L13 5M13 5H6.5M13 5V11.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </div>
            <h3 className="ctxd-v3-uc-cardtitle">Auto-Enrich CRM Leads</h3>
            <p className="ctxd-v3-uc-carddesc">
              Auto-enrich new CRM leads with firmographic and brand data from
              just a domain. Useful for routing, scoring, and personalization
              workflows.
            </p>

            <div className="ctxd-v3-uc-c3mock" aria-hidden="true">
              <div className="ctxd-v3-uc-c3-left">
                <div className="ctxd-v3-uc-shopify-tile">
                  <img src="https://media.brand.dev/bd6243c6-96c7-4781-aab9-e2cefcb74971.png" alt="Shopify logo" loading="lazy" />
                </div>
                <div className="ctxd-v3-uc-shopify-card">
                  <div className="ctxd-v3-uc-shopify-name">Shopify</div>
                  <div className="ctxd-v3-uc-shopify-url">www.shopify.com</div>
                  <span className="ctxd-v3-uc-shopify-loc">
                    <svg width="11" height="13" viewBox="0 0 11 13" fill="none">
                      <path d="M5.5 12C5.5 12 10 8 10 4.7 10 2.1 8 .5 5.5.5 3 .5 1 2.1 1 4.7 1 8 5.5 12 5.5 12Z" stroke="currentColor" strokeWidth="1" />
                      <circle cx="5.5" cy="4.7" r="1.4" stroke="currentColor" strokeWidth="1" />
                    </svg>
                    Ontario, Canada
                  </span>
                </div>
              </div>
              <span className="ctxd-v3-uc-c3-connector" />
              <div className="ctxd-v3-uc-enrich">
                <p className="ctxd-v3-uc-enrich-label">ENRICHED INFO:</p>
                <span className="ctxd-v3-uc-chip">E-Commerce Software</span>
                <span className="ctxd-v3-uc-chip">3,000 employees</span>
                <span className="ctxd-v3-uc-chip">SIC 5961</span>
              </div>
            </div>
          </article>
        </div>

        {}
        <article className="ctxd-v3-uc-card ctxd-v3-uc-card4">
          <a className="ctxd-v3-uc-cardlink" href="/guides/enrich-transaction-codes" aria-label="Enrich any transaction">
            Enrich any transaction
          </a>
          <div className="ctxd-v3-uc-card4-grid">
            <div className="ctxd-v3-uc-card4-left">
              <div className="ctxd-v3-uc-cardhead">
                <span className="ctxd-v3-uc-tag">/brand/transaction_identifier</span>
                <svg className="ctxd-v3-uc-open" width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
                  <path d="M5 13L13 5M13 5H6.5M13 5V11.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </div>
              <h3 className="ctxd-v3-uc-cardtitle">Enrich any transaction</h3>
              <p className="ctxd-v3-uc-carddesc">
                Drop a raw bank descriptor in and get back a clean merchant
                name, logo, and brand profile, instantly. Built for expense
                tools, fintech dashboards, and reconciliation pipelines.
              </p>
            </div>

            <div className="ctxd-v3-uc-card4-right" aria-hidden="true">
              <span className="ctxd-v3-uc-raw-tag">RAW</span>
              <div className="ctxd-v3-uc-card4-mock">
                <div className="ctxd-v3-uc-raw">
                  <div className="ctxd-v3-uc-raw-box">
                    APPLE.COM/BILL 800-275-2273 CA 28 MAY 26
                  </div>
                </div>
                <div className="ctxd-v3-uc-curve">
                  <svg viewBox="0 0 36 80" fill="none" preserveAspectRatio="none">
                    <path d="M0 6 C 22 6, 14 64, 36 64" stroke="var(--v3-blue)" strokeWidth="1.4" strokeDasharray="3 4" />
                  </svg>
                </div>
                <div className="ctxd-v3-uc-merchant">
                  <div className="ctxd-v3-uc-merchant-top">
                    APPLE.COM/BILL 800-275-2273 CA 28 MAY 26
                  </div>
                  <div className="ctxd-v3-uc-merchant-row">
                    <span className="ctxd-v3-uc-apple-tile">
                      <img src="https://media.brand.dev/af943774-993c-476e-998c-c1db9de5b7f6.jpg" alt="Apple logo" loading="lazy" />
                    </span>
                    <span className="ctxd-v3-uc-merchant-name">
                      <b>Apple</b>
                      <span>Consumer Electronics</span>
                    </span>
                    <svg className="ctxd-v3-uc-check" width="16" height="16" viewBox="0 0 16 16" fill="none">
                      <path d="M3 8.5L6.5 12L13 4.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  </div>
                  <div className="ctxd-v3-uc-merchant-row">
                    <span className="ctxd-v3-uc-palette">
                      <span className="ctxd-v3-uc-pal" style={{
    background: "#000000"
  }} />
                      <span className="ctxd-v3-uc-pal" style={{
    background: "#555555"
  }} />
                      <span className="ctxd-v3-uc-pal" style={{
    background: "#e9e9e9"
  }} />
                      <span className="ctxd-v3-uc-pal" style={{
    background: "#1373e8"
  }} />
                    </span>
                    <span style={{
    flex: "1 1 auto"
  }} />
                    <svg className="ctxd-v3-uc-check" width="16" height="16" viewBox="0 0 16 16" fill="none">
                      <path d="M3 8.5L6.5 12L13 4.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </article>
      </div>
    </section>;
};

export const CtxV3Pipeline = () => {
  const APIS = [{
    id: "web",
    name: "Web API",
    inputs: [{
      id: "url",
      label: "url",
      example: '"apple.com/iphone"'
    }],
    outputs: [{
      id: "markdown",
      label: "markdown",
      example: '"# iPhone…"'
    }, {
      id: "html",
      label: "html",
      example: '"<!doctype…>"'
    }, {
      id: "image",
      label: "screenshot",
      example: "1920×1080 png"
    }, {
      id: "fonts",
      label: "fonts",
      example: '"SF Pro" …'
    }, {
      id: "spacing",
      label: "spacing",
      example: "4/8/16/24 …"
    }, {
      id: "product",
      label: "product",
      example: '"iPhone 15"'
    }, {
      id: "answer",
      label: "ai_answer",
      example: '"$229.50"'
    }]
  }, {
    id: "brand",
    name: "Brand API",
    inputs: [{
      id: "domain",
      label: "domain",
      example: '"apple.com"'
    }, {
      id: "name",
      label: "company name",
      example: '"Apple Inc."'
    }, {
      id: "email",
      label: "work email",
      example: '"tim@apple.com"'
    }, {
      id: "ticker",
      label: "stock ticker",
      example: '"AAPL"'
    }, {
      id: "transaction",
      label: "txn descriptor",
      example: '"APL*APPLE TV CA"'
    }],
    outputs: [{
      id: "logos",
      label: "logos",
      example: '"apple.svg" …'
    }, {
      id: "colors",
      label: "colors",
      swatches: ["#000000", "#a3aaae"]
    }, {
      id: "company",
      label: "company",
      example: '"Apple Inc."'
    }, {
      id: "socials",
      label: "socials",
      example: '"@apple" …'
    }, {
      id: "address",
      label: "address",
      example: '"Cupertino"'
    }, {
      id: "stock",
      label: "stock",
      example: "$AAPL NASDAQ"
    }, {
      id: "industry",
      label: "industry",
      example: '"Electronics"'
    }]
  }, {
    id: "classification",
    name: "Classification API",
    inputs: [{
      id: "domain",
      label: "domain",
      example: '"apple.com"'
    }, {
      id: "name",
      label: "company name",
      example: '"Apple Inc."'
    }],
    outputs: [{
      id: "naics_code",
      label: "naics_code",
      example: "334220 …"
    }, {
      id: "sic_code",
      label: "sic_code",
      example: "3663 …"
    }]
  }];
  const [active, setActive] = useState(1);
  const [hasInteracted, setHasInteracted] = useState(false);
  const api = APIS[active];
  const DY = -70;
  const SLOT = {
    top: {
      top: 150 + DY,
      left: 436,
      w: 240,
      h: 70
    },
    center: {
      top: 270 + DY,
      left: 410,
      w: 293,
      h: 200
    },
    bottom: {
      top: 520 + DY,
      left: 436,
      w: 240,
      h: 70
    }
  };
  const BCX = SLOT.top.left + SLOT.top.w / 2;
  const others = APIS.map((_, i) => i).filter(i => i !== active);
  const slotName = i => i === active ? "center" : others[0] === i ? "top" : "bottom";
  const FAN = {
    x: SLOT.center.left + SLOT.center.w,
    y: 370 + DY
  };
  const CONV = {
    x: SLOT.center.left,
    y: 370 + DY
  };
  const CARD_X = 822, CARD_W = 248, CARD_H = 44, OUT_GAP = 18;
  const N = api.outputs.length;
  const outStackH = N * CARD_H + (N - 1) * OUT_GAP;
  const outTop = i => FAN.y - outStackH / 2 + i * (CARD_H + OUT_GAP);
  const cy = i => outTop(i) + CARD_H / 2;
  const inputs = api.inputs;
  const PILL_R = 290;
  const IN_GAP = 62;
  const inY = i => FAN.y - (inputs.length - 1) * IN_GAP / 2 + i * IN_GAP;
  return <section className="ctxd-v3-section ctxd-v3-pipe ctxd-v3-reveal">
      <div className="pipe-wrap">
        <div className="pipe-stage">
          {}
          <svg className="pipe-edges" viewBox="0 0 1100 740" fill="none" aria-hidden="true">
            {}
            {inputs.map((_, i) => <path key={`in-${i}`} className="pipe-edge pipe-edge-fan" style={{
    animationDelay: `${i * 0.12}s`
  }} d={`M${PILL_R} ${inY(i)} C ${PILL_R + 36} ${inY(i)} ${CONV.x - 36} ${CONV.y} ${CONV.x} ${CONV.y}`} />)}
            <circle className="pipe-origin" cx={CONV.x} cy={CONV.y} r="4" />

            {}
            <path className="pipe-edge" d={`M${BCX} ${SLOT.top.top + SLOT.top.h} L${BCX} ${SLOT.center.top}`} />
            <path className="pipe-edge" d={`M${BCX} ${SLOT.center.top + SLOT.center.h} L${BCX} ${SLOT.bottom.top}`} />

            {}
            {api.outputs.map((_, i) => <path key={`out-${i}`} className="pipe-edge pipe-edge-fan" style={{
    animationDelay: `${i * 0.12}s`
  }} d={`M${FAN.x} ${FAN.y} C ${FAN.x + 36} ${FAN.y} ${CARD_X - 36} ${cy(i)} ${CARD_X} ${cy(i)}`} />)}
            <circle className="pipe-origin" cx={FAN.x} cy={FAN.y} r="4" />
          </svg>

          {}
          {inputs.map((inp, i) => <div key={`${api.id}-in-${i}`} className="pipe-node pipe-pill" style={{
    right: 1100 - PILL_R,
    top: inY(i) - 22,
    height: 44
  }}>
              <div className={`pipe-pill-inner${hasInteracted ? " pipe-swap" : ""}`} style={{
    animationDelay: `${0.05 * i}s`
  }}>
                <span className="pipe-chip">{inp.label}</span>
                <span className="pipe-pill-val">{inp.example}</span>
              </div>
            </div>)}

          {}
          {APIS.map((a, i) => {
    const isActive = i === active;
    const s = SLOT[slotName(i)];
    return <button key={a.id} type="button" className={`pipe-node pipe-api ${isActive ? "pipe-api-live" : "pipe-api-ghost"}`} style={{
      left: s.left,
      top: s.top,
      width: s.w,
      height: s.h
    }} onClick={() => {
      setActive(i);
      setHasInteracted(true);
    }} aria-pressed={isActive} aria-label={`Show ${a.name} inputs and outputs`}>
                {isActive && <span className="pipe-api-glow" aria-hidden="true" />}
                <span className="pipe-api-label">{a.name}</span>
              </button>;
  })}

          {}
          {}
          <div className="pipe-hint" key={active} style={{
    left: BCX,
    top: SLOT.top.top
  }} aria-hidden="true">
            <span className="pipe-hint-dot" />
            <span className="pipe-hint-text">Click to switch</span>
          </div>

          {}
          <div className="pipe-out" key={api.id}>
            {api.outputs.map((o, i) => {
    const style = {
      left: CARD_X,
      top: outTop(i),
      width: CARD_W,
      height: CARD_H,
      animationDelay: `${0.04 * i}s`
    };
    return <div key={i} className={`pipe-node pipe-card${hasInteracted ? " pipe-swap" : ""}`} style={style}>
                  {o.swatches ? <div className="pipe-card-colors">
                      <span className="pipe-chip">{o.label}</span>
                      {o.swatches.map((c, j) => <span key={j} className="pipe-swatch" style={{
      background: c
    }} />)}
                      <span className="pipe-colors-more">…</span>
                    </div> : <div className="pipe-card-logo">
                      <span className="pipe-chip">{o.label}</span>
                      <span className="pipe-card-val">{o.example}</span>
                    </div>}
                </div>;
  })}
          </div>

          {}
          <div className="pipe-horizon" aria-hidden="true">
            <img className="pipe-horizon-tex" src="/images/ctxv3/pipeline-horizon-2.png" alt="" />
          </div>
        </div>
      </div>

      <style>{`
        .ctxd-v3-pipe { padding-top: 0; padding-bottom: 0; }

        .ctxd-v3-pipe .pipe-wrap {
          container-type: inline-size;
          width: 100%; max-width: 1100px; margin: 0 auto;
          aspect-ratio: 1100 / 740; position: relative;
        }
        .ctxd-v3-pipe .pipe-stage {
          position: absolute; top: 0; left: 0; width: 1100px; height: 740px;
          transform: scale(calc(100cqw / 1100)); transform-origin: top left;
        }
        .ctxd-v3-pipe .pipe-node { position: absolute; box-sizing: border-box; }

        /* ---- connectors ---- */
        .ctxd-v3-pipe .pipe-edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
        .ctxd-v3-pipe .pipe-edge {
          stroke: color-mix(in srgb, var(--v3-blue) 60%, transparent);
          stroke-width: 1.5; stroke-dasharray: 5 5; fill: none; stroke-linecap: round;
        }
        .ctxd-v3-pipe .pipe-origin { fill: var(--v3-blue); opacity: 0.7; }

        /* ---- pill + cards ---- */
        .ctxd-v3-pipe .pipe-pill,
        .ctxd-v3-pipe .pipe-card {
          z-index: 2;
          border: 1.5px dashed var(--v3-pill-bd);
          border-radius: 9px;
          background: color-mix(in srgb, var(--v3-bg) 86%, transparent);
          display: flex; align-items: center; gap: 10px; padding: 0 13px;
        }
        .ctxd-v3-pipe .pipe-pill { width: 248px; }
        .ctxd-v3-pipe .pipe-pill-inner { display: flex; align-items: center; gap: 10px; width: 100%; }
        .ctxd-v3-pipe .pipe-chip {
          flex: none; font-family: var(--v3-mono); white-space: nowrap;
          font-size: 8px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase;
          color: var(--v3-blue); background: color-mix(in srgb, var(--v3-blue) 12%, transparent);
          padding: 3px 6px; border-radius: 4px; line-height: 1;
        }
        .ctxd-v3-pipe .pipe-pill-val,
        .ctxd-v3-pipe .pipe-card-val {
          font-family: var(--v3-mono); font-size: 12px; color: var(--v3-ink-2); white-space: nowrap;
        }
        /* input pill never truncates; output cards keep ellipsis as a safety net */
        .ctxd-v3-pipe .pipe-card-val { overflow: hidden; text-overflow: ellipsis; }
        .ctxd-v3-pipe .pipe-card { padding: 0 14px; }
        .ctxd-v3-pipe .pipe-card-logo { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; }

        /* colors → inline swatches + "…" */
        .ctxd-v3-pipe .pipe-card-colors { display: flex; align-items: center; gap: 8px; width: 100%; }
        .ctxd-v3-pipe .pipe-swatch { width: 16px; height: 16px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.08); flex: none; }
        .ctxd-v3-pipe .pipe-colors-more { font-family: var(--v3-mono); font-size: 13px; color: var(--v3-muted); }

        /* ---- API selector boxes (animated promote/demote) ---- */
        .ctxd-v3-pipe .pipe-api {
          z-index: 2; display: flex; align-items: center; justify-content: center;
          border-radius: 11px; font-family: var(--v3-sans);
          margin: 0; padding: 0; appearance: none; -webkit-appearance: none; cursor: pointer;
          transition: top .5s var(--v3-ease), left .5s var(--v3-ease), width .5s var(--v3-ease),
            height .5s var(--v3-ease), background-color .4s ease, border-color .4s ease,
            box-shadow .5s var(--v3-ease), color .4s ease, transform .3s var(--v3-ease);
        }
        .ctxd-v3-pipe .pipe-api-ghost {
          border: 1px solid var(--v3-card-bd);
          background: color-mix(in srgb, var(--v3-card) 70%, transparent);
          color: var(--v3-muted);
        }
        @media (hover: hover) {
          .ctxd-v3-pipe .pipe-api-ghost:hover {
            border-color: color-mix(in srgb, var(--v3-blue) 50%, var(--v3-card-bd));
            color: var(--v3-ink-2); transform: translateY(-2px);
            box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--v3-blue) 55%, transparent);
          }
        }
        .ctxd-v3-pipe .pipe-api-live {
          cursor: default;
          border: 1.5px solid color-mix(in srgb, var(--v3-blue) 55%, var(--v3-card));
          background: var(--v3-card); color: var(--v3-blue); overflow: hidden;
          box-shadow: 0 1px 2px rgba(3,4,28,0.06), 0 24px 60px -28px color-mix(in srgb, var(--v3-blue) 60%, transparent);
        }
        .ctxd-v3-pipe .pipe-api-glow {
          position: absolute; inset: 0;
          background: radial-gradient(60% 70% at 50% 50%, color-mix(in srgb, var(--v3-blue) 22%, transparent) 0%, transparent 70%);
        }
        .dark .ctxd-v3-pipe .pipe-api-glow {
          background: radial-gradient(60% 70% at 50% 50%, color-mix(in srgb, var(--v3-blue) 30%, transparent) 0%, transparent 72%);
        }
        .ctxd-v3-pipe .pipe-api-label {
          position: relative; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap;
          transition: font-size .5s var(--v3-ease);
        }
        .ctxd-v3-pipe .pipe-api-ghost .pipe-api-label { font-size: 16px; }
        .ctxd-v3-pipe .pipe-api-live .pipe-api-label { font-size: 26px; }

        /* ---- clickability hint badge (straddles the top box's top edge) ---- */
        .ctxd-v3-pipe .pipe-hint {
          position: absolute; z-index: 3; transform: translate(-50%, -50%);
          display: inline-flex; align-items: center; gap: 6px;
          font-family: var(--v3-mono); font-size: 9px; font-weight: 600;
          letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
          color: #fff; background: var(--v3-blue);
          padding: 5px 10px; border-radius: 999px;
          box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--v3-blue) 80%, transparent);
          pointer-events: none;
        }
        .ctxd-v3-pipe .pipe-hint-dot {
          position: relative; flex: none; width: 5px; height: 5px;
          border-radius: 50%; background: #fff;
        }
        .ctxd-v3-pipe .pipe-hint-dot::after {
          content: ""; position: absolute; inset: -3px; border-radius: 50%;
          border: 1px solid rgba(255, 255, 255, 0.85);
        }

        /* ---- dotted horizon: actual Figma dot-matrix texture + glow overlay ---- */
        .ctxd-v3-pipe .pipe-horizon {
          position: absolute; left: 50%; transform: translateX(-50%);
          bottom: -24px; width: 1100px; height: 210px; z-index: 0; pointer-events: none;
        }
        .ctxd-v3-pipe .pipe-horizon::before {
          content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
          width: 760px; height: 100%;
          background: radial-gradient(62% 80% at 50% 100%, color-mix(in srgb, var(--v3-blue) 18%, transparent) 0%, transparent 72%);
        }
        .ctxd-v3-pipe .pipe-horizon-tex {
          position: absolute; left: 0; bottom: 0; width: 100%; height: auto; display: block;
          mix-blend-mode: multiply;
          -webkit-mask-image: linear-gradient(to top, #000 32%, transparent 100%);
                  mask-image: linear-gradient(to top, #000 32%, transparent 100%);
        }
        /* Dark mode: the texture is blue dots baked on a WHITE field (built for
           multiply on white). Invert turns the white field black — which drops
           out under the screen blend on the dark page — and lifts the dots;
           hue-rotate swings them from the inverted amber back to blue. Same
           dotted horizon as light mode, now glowing on the dark background. */
        .dark .ctxd-v3-pipe .pipe-horizon-tex {
          display: block;
          mix-blend-mode: screen;
          filter: invert(1) hue-rotate(180deg) saturate(1.15) brightness(0.9);
        }
        .dark .ctxd-v3-pipe .pipe-horizon::before {
          background: radial-gradient(62% 80% at 50% 100%, color-mix(in srgb, var(--v3-blue) 26%, transparent) 0%, transparent 72%);
        }

        /* ---- motion ---- */
        @media (prefers-reduced-motion: no-preference) {
          .ctxd-v3-pipe .pipe-edge-fan { animation: pipe-flow 1.1s linear infinite; }
          .ctxd-v3-pipe .pipe-api-live .pipe-api-glow { animation: pipe-glow 2.6s var(--v3-ease) infinite; }
          .ctxd-v3-pipe .pipe-swap { animation: pipe-swap-in .5s var(--v3-ease) both; }
          /* hidden while the boxes swap slots (.5s), then fade in and start bobbing */
          .ctxd-v3-pipe .pipe-hint {
            animation:
              pipe-hint-in .45s var(--v3-ease) .55s both,
              pipe-hint-bob 2.4s ease-in-out 1s infinite;
          }
          .ctxd-v3-pipe .pipe-hint-dot::after { animation: pipe-hint-ping 1.6s ease-out infinite; }
        }
        @keyframes pipe-flow { to { stroke-dashoffset: -20; } }
        @keyframes pipe-glow { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
        @keyframes pipe-swap-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
        @keyframes pipe-hint-in {
          from { opacity: 0; transform: translate(-50%, calc(-50% + 5px)); }
          to { opacity: 1; transform: translate(-50%, -50%); }
        }
        @keyframes pipe-hint-bob {
          0%, 100% { transform: translate(-50%, -50%); }
          50% { transform: translate(-50%, calc(-50% - 4px)); }
        }
        @keyframes pipe-hint-ping {
          0% { transform: scale(.5); opacity: 1; }
          100% { transform: scale(1.9); opacity: 0; }
        }

        @media (prefers-reduced-motion: reduce) {
          .ctxd-v3-pipe .pipe-edge-fan,
          .ctxd-v3-pipe .pipe-api-live .pipe-api-glow,
          .ctxd-v3-pipe .pipe-swap,
          .ctxd-v3-pipe .pipe-hint,
          .ctxd-v3-pipe .pipe-hint-dot::after { animation: none; }
          .ctxd-v3-pipe .pipe-api { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
        }

        /* =====================================================================
           MOBILE: abandon the scaled 1100×740 coordinate stage and reflow into
           a clean vertical flow that keeps the tap-to-switch interaction.
           Order: [API tabs row] → [input pills] → ↓ → [output cards] → horizon.
           ===================================================================== */
        @media (max-width: 768px) {
          .ctxd-v3-pipe { padding-bottom: 0; }

          /* drop the fixed aspect ratio — let content size the height */
          .ctxd-v3-pipe .pipe-wrap { aspect-ratio: auto; max-width: 520px; }

          /* un-scale & un-absolute the stage; flow children in a wrapping column */
          .ctxd-v3-pipe .pipe-stage {
            position: static; transform: none; width: auto; height: auto;
            display: flex; flex-wrap: wrap; align-items: stretch;
            gap: 10px; padding-bottom: 120px;
          }
          /* inline left/top/width/height are ignored once static */
          .ctxd-v3-pipe .pipe-node { position: static; }

          /* hide the SVG connectors on phones */
          .ctxd-v3-pipe .pipe-edges { display: none; }

          /* the hint badge is pinned to desktop slot coordinates — hide it once
             the boxes reflow into the tab row */
          .ctxd-v3-pipe .pipe-hint { display: none; }

          /* ---- API selector → equal tappable tabs in a top row ---- */
          /* !important overrides the inline left/top/width/height (slot geometry) */
          .ctxd-v3-pipe .pipe-api {
            order: 1; flex: 1 1 0; min-width: 0;
            width: auto !important; height: auto !important;
            min-height: 56px; padding: 8px 6px; border-radius: 10px; overflow: visible;
            transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
          }
          .ctxd-v3-pipe .pipe-api-label { white-space: normal; text-align: center; line-height: 1.2; }
          .ctxd-v3-pipe .pipe-api-ghost .pipe-api-label { font-size: 12px; }
          .ctxd-v3-pipe .pipe-api-live .pipe-api-label { font-size: 13px; font-weight: 600; }
          /* keep the active glow subtle on mobile */
          .ctxd-v3-pipe .pipe-api-live {
            box-shadow: 0 1px 2px rgba(3,4,28,0.06),
              0 14px 30px -22px color-mix(in srgb, var(--v3-blue) 60%, transparent);
          }

          /* "INPUTS" / "OUTPUTS" section affordance via the first pill/card */
          .ctxd-v3-pipe .pipe-pill {
            order: 2; flex: 1 1 100%; width: 100%;
            height: auto; min-height: 44px; padding: 9px 12px;
          }
          .ctxd-v3-pipe .pipe-pill-inner { gap: 8px; }
          .ctxd-v3-pipe .pipe-chip { font-size: 9px; padding: 3px 6px; }
          .ctxd-v3-pipe .pipe-pill-val { font-size: 13px; white-space: normal; word-break: break-word; }

          /* the output wrapper becomes a full-width stacked list */
          .ctxd-v3-pipe .pipe-out {
            order: 3; flex: 1 1 100%; width: 100%;
            display: flex; flex-direction: column; gap: 10px;
          }
          /* arrow separator between inputs and outputs */
          .ctxd-v3-pipe .pipe-out::before {
            content: "↓"; display: block; text-align: center;
            font-family: var(--v3-mono); font-size: 18px; line-height: 1;
            color: color-mix(in srgb, var(--v3-blue) 70%, var(--v3-muted));
            margin: 2px 0 4px;
          }
          .ctxd-v3-pipe .pipe-card {
            width: 100% !important; height: auto !important;
            min-height: 48px; padding: 10px 14px;
          }
          .ctxd-v3-pipe .pipe-card-val { font-size: 13px; white-space: normal; word-break: break-word; }

          /* horizon glow stays anchored to the bottom of the (now taller) wrap */
          .ctxd-v3-pipe .pipe-horizon {
            order: 4; flex: 1 1 100%;
            position: absolute; bottom: -24px; width: 100%; height: 150px;
          }
          .ctxd-v3-pipe .pipe-horizon-tex,
          .ctxd-v3-pipe .pipe-horizon::before { width: 100%; }
        }

        @media (max-width: 480px) {
          .ctxd-v3-pipe .pipe-stage { gap: 9px; }
          .ctxd-v3-pipe .pipe-api { min-height: 46px; padding: 8px 4px; }
          .ctxd-v3-pipe .pipe-api-ghost .pipe-api-label { font-size: 11px; }
          .ctxd-v3-pipe .pipe-api-live .pipe-api-label { font-size: 12px; }
          .ctxd-v3-pipe .pipe-pill,
          .ctxd-v3-pipe .pipe-card { padding-left: 11px; padding-right: 11px; }
          .ctxd-v3-pipe .pipe-pill-val,
          .ctxd-v3-pipe .pipe-card-val { font-size: 12px; }
        }
      `}</style>
    </section>;
};

<div className="ctxd-v3">
  <div className="ctxd-v3-rails">
    <div className="ctxd-v3-rails-inner">
      <section className="ctxd-v3-section ctxd-v3-hero">
        <div className="ctxd-v3-hero-copy">
          <h1 className="ctxd-v3-h1">
            <span className="ln ctxd-v3-anim d1">Build With</span>

            <span className="ln ctxd-v3-grad ctxd-v3-anim d2">
              {"{Context.dev}"}
            </span>
          </h1>

          <p className="ctxd-v3-lede ctxd-v3-anim d3">
            Turn any domain into structured, AI-ready data with a single API.
          </p>

          <div className="ctxd-v3-hero-actions ctxd-v3-anim d4">
            <a className="ctxd-v3-btn ctxd-v3-btn--primary" href="/quickstart">
              <span>Quickstart</span>

              <span className="arrow" aria-hidden="true">
                →
              </span>
            </a>

            <a className="ctxd-v3-btn ctxd-v3-btn--ghost" href="/agent-quickstart">
              <span>Give it to your Agent</span>
            </a>
          </div>
        </div>

        <div className="ctxd-v3-hero-art ctxd-v3-anim d2">
          <img src="https://mintcdn.com/branddev/repamerS-LSYfOs8/images/ctxv3/hero-illustration@3x.png?fit=max&auto=format&n=repamerS-LSYfOs8&q=85&s=cfc779e5d051023b0ddb41df613c3ccf" alt="Context.dev — turn any domain into structured, AI-ready data" width="2169" height="1593" data-path="images/ctxv3/hero-illustration@3x.png" />
        </div>
      </section>

      <hr className="ctxd-v3-divider" />

      <CtxV3Pipeline />

      <hr className="ctxd-v3-divider" />

      <CtxV3UseCases />

      <hr className="ctxd-v3-divider" />

      <CtxV3Cta />

      <hr className="ctxd-v3-divider" />

      <CtxV3Wordmark />

      <hr className="ctxd-v3-divider" />

      <div className="ctxd-v3-section ctxd-v3-footer" role="contentinfo">
        <span className="ctxd-v3-footer-copy">© 2026 Context.dev</span>

        <div className="ctxd-v3-socials">
          <a className="ctxd-v3-social" href="https://github.com/context-dot-dev" aria-label="GitHub" target="_blank" rel="noreferrer">
            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
              <path d="M12 .5C5.73.5.5 5.73.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.56v-2c-3.2.7-3.88-1.54-3.88-1.54-.53-1.34-1.29-1.7-1.29-1.7-1.05-.72.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.29 1.19-3.1-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11 11 0 0 1 5.79 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.11 3.05.74.81 1.19 1.84 1.19 3.1 0 4.42-2.69 5.39-5.25 5.68.41.36.78 1.06.78 2.14v3.17c0 .31.21.68.8.56A11.51 11.51 0 0 0 23.5 12C23.5 5.73 18.27.5 12 .5Z" />
            </svg>
          </a>

          <a className="ctxd-v3-social" href="https://x.com/getcontextdev" aria-label="X (Twitter)" target="_blank" rel="noreferrer">
            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
              <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
            </svg>
          </a>

          <a className="ctxd-v3-social" href="https://www.linkedin.com/company/contextdev/" aria-label="LinkedIn" target="_blank" rel="noreferrer">
            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
              <path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.34V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.61 0 4.27 2.37 4.27 5.46zM5.32 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12m1.78 13.02H3.54V9H7.1zM22.23 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.46c.98 0 1.77-.77 1.77-1.72V1.72C24 .77 23.21 0 22.23 0" />
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
