@import url("../../_ds/fonts.css");
@import url("../../_ds/theme.css");
@import url("../../_shared/chrome.css");
@import url("../../_shared/components.css");
@import url("../../_shared/audience-switcher.css");

/* ──────────────────────────────────────────────────────────
   /products/search — Ask the web. Get ranked answers.

   Editorial-minimal primitive page.  The hero's thesis: the
   QUERY is the hero, set in huge display type; on mount a
   hairline draws and the web resolves to a SINGLE clean,
   ranked answer.  No results panel, no two-column widget.
   Warm-dark canvas, border-before-fill, type-led, lots of air.
─────────────────────────────────────────────────────────── */

main {
  position: relative;
  z-index: 1;
}

.back-to-top,
.back-to-top * { cursor: none; }

/* ═══════════════════════════════════════════════════════════
   Act 1 — Hero  (query-as-headline, resolves to one answer)
═══════════════════════════════════════════════════════════ */
.se-hero-section {
  padding: clamp(104px, 17vh, 200px) var(--page-gutter, 7vw) clamp(80px, 12vh, 140px);
}

.se-hero {
  max-width: 1320px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(260px, 30vw, 400px);
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}
.se-hero-main { min-width: 0; max-width: 660px; }

/* The query, set as the hero.  Lowercase, display face, huge. */
.se-ask {
  margin: clamp(18px, 2.4vh, 30px) 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--mkt-hero);
  line-height: 0.95;
  letter-spacing: var(--tracking-denser, -0.03em);
  color: var(--text-primary);
  text-transform: lowercase;
}

/* ── Result, mapped — dotted Brooklyn with pulsing top spots ── */
.se-hero-map {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 400px;
}
.se-map { width: 100%; height: auto; display: block; max-height: 72vh; overflow: visible; }
.se-map-core { fill: #7ADAE6; }
.se-map-ring {
  fill: none;
  stroke: #7ADAE6;
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: se-ping 2.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  animation-delay: var(--d, 0s);
}
@keyframes se-ping {
  0%   { transform: scale(0.5); opacity: 0.75; }
  70%  { opacity: 0; }
  100% { transform: scale(3); opacity: 0; }
}
.se-map-rank {
  font-family: var(--font-code);
  font-size: 9px;
  fill: rgba(255, 255, 255, 0.65);
  dominant-baseline: middle;
}
.se-map-label {
  position: absolute;
  bottom: 4px;
  left: 0;
  font-family: var(--font-code);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-quaternary);
}
@media (prefers-reduced-motion: reduce) {
  .se-map-ring { animation: none; opacity: 0.4; }
}
.se-ask-line { display: block; }

/* Blinking text caret at the end of the query. */
.se-ask-caret {
  display: inline-block;
  width: clamp(4px, 0.52vw, 7px);
  height: 0.74em;
  margin-left: 0.1em;
  transform: translateY(0.06em);
  background: var(--zen-purple-5, #7C4FE8);
  animation: se-blink 1.05s step-end infinite;
}
@keyframes se-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* The resolve — a hairline draws, one ranked answer fades up. */
.se-resolve {
  margin-top: clamp(30px, 5vh, 54px);
  max-width: 660px;
}
.se-resolve-rule {
  display: block;
  height: 1px;
  width: 0;
  background: var(--border-subtle);
  transition: width 720ms cubic-bezier(0.22, 1, 0.36, 1) 160ms;
}
.se-hero.is-resolved .se-resolve-rule { width: 100%; }

.se-answer {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 16px 0 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 560ms cubic-bezier(0.22, 1, 0.36, 1) 460ms,
              transform 560ms cubic-bezier(0.22, 1, 0.36, 1) 460ms;
}
.se-hero.is-resolved .se-answer { opacity: 1; transform: none; }
.se-answer-rank {
  flex-shrink: 0;
  font-family: var(--font-code);
  font-size: 13px;
  color: var(--zen-purple-5, #7C4FE8);
}
.se-answer-title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-base);
  font-weight: 600;
  font-size: var(--mkt-body);
  line-height: 1.3;
  color: var(--text-primary);
}
.se-answer-src {
  flex-shrink: 0;
  font-family: var(--font-code);
  font-size: 12px;
  color: var(--text-tertiary);
}

/* Foot — the claim (h1) + sub + CTA.  Quiet, supporting. */
.se-hero-foot {
  margin-top: clamp(44px, 7vh, 84px);
  max-width: 540px;
}
.se-claim {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 600;
  font-size: clamp(19px, 1.7vw, 25px);
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.se-claim-sub {
  margin: 10px 0 0;
  font-family: var(--font-base);
  font-size: clamp(14.5px, 1.05vw, 16.5px);
  line-height: 1.55;
  color: var(--text-secondary);
}
.se-hero-cta { margin-top: 30px; }
/* .link-cta ships align-self:flex-start, which overrides the inline
   stack's centering and pins "Read the docs" to the top. Re-center it
   against the button. */
.se-hero-cta .link-cta { align-self: center; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .se-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(36px, 6vh, 56px);
  }
  .se-hero-main { max-width: none; }
  .se-hero-map { max-width: 300px; justify-self: start; }
  .se-map { max-height: none; }
}
@media (max-width: 720px) {
  
  .se-answer { flex-wrap: wrap; gap: 6px 14px; }
  .se-answer-src { width: 100%; }
}

/* Wide tiers — grow the MAP so the hero fills the canvas (query keeps its
   base size; it didn't need enlarging). */
@media (min-width: 1600px) {
  .se-hero {
    max-width: 1500px;
    grid-template-columns: minmax(0, 1fr) clamp(400px, 32vw, 500px);
  }
  .se-hero-map { max-width: 500px; }
}
@media (min-width: 1920px) {
  .se-hero {
    max-width: 1700px;
    grid-template-columns: minmax(0, 1fr) clamp(500px, 33vw, 620px);
  }
  .se-hero-map { max-width: 620px; }
  .se-map { max-height: 82vh; }
}
@media (min-width: 2400px) {
  .se-hero {
    max-width: 2040px;
    grid-template-columns: minmax(0, 1fr) clamp(620px, 31vw, 760px);
  }
  .se-hero-map { max-width: 760px; }
}

@media (prefers-reduced-motion: reduce) {
  .se-ask-caret { animation: none; }
  .se-resolve-rule, .se-answer { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   Act 2 — One call. None of the cleanup.  (scroll strike-out)
   Sticky stage; --p (0→1) is written by JS from scroll. The
   manual-pipeline lines strike out in sequence, the stack
   recedes, and the single `zenrows search` call resolves.
═══════════════════════════════════════════════════════════ */
.se-act2 {
  position: relative;
  min-height: 280vh;
}
.se-act2-stage {
  --p: 0;
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 0 var(--page-gutter, 7vw);
  text-align: center;
  overflow: hidden;
}

/* The pile you'd maintain — recedes as the call resolves. */
.se-cleanup {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 0.9vh, 12px);
  opacity: clamp(0, calc(1 - (var(--p) - 0.74) / 0.2), 1);
  transform: scale(calc(1 - 0.05 * clamp(0, (var(--p) - 0.74) / 0.2, 1)));
}
.se-act2-kicker { margin: 0 0 clamp(14px, 2.4vh, 28px); }

.se-step {
  --lp: clamp(0, (var(--p) - var(--i) * 0.115) / 0.12, 1);
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 4vw, 52px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--text-secondary);
  opacity: calc(1 - 0.5 * var(--lp));
}
.se-strike {
  position: absolute;
  left: -3%;
  top: 56%;
  width: 106%;
  height: 2px;
  background: var(--zen-purple-5, #7C4FE8);
  transform-origin: left center;
  transform: scaleX(var(--lp, 0));
}

/* The one call — fades + scales in as the pile clears. */
.se-call {
  grid-area: 1 / 1;
  opacity: clamp(0, (var(--p) - 0.8) / 0.17, 1);
  transform: scale(calc(0.965 + 0.035 * clamp(0, (var(--p) - 0.8) / 0.17, 1)));
  pointer-events: none;
}
.se-call-line {
  margin: 0;
  font-family: var(--font-code);
  font-size: var(--mkt-lead);
  letter-spacing: -0.01em;
  line-height: 1.5;
}
/* Brand teal constant (#7ADAE6) — NOT var(--zen-teal-5): the dark ramp
   remaps that token to a dark teal in dark mode.  The brand teal stays
   fixed in both audiences, same as the .btn-marketing fill. */
.se-call-cmd { color: #7ADAE6; }
.se-call-arg { color: var(--text-tertiary); }
.se-call-cap {
  margin: clamp(18px, 3vh, 34px) 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--mkt-h2);
  line-height: 1.04;
  letter-spacing: var(--tracking-dense, -0.024em);
  color: var(--text-primary);
  text-wrap: balance;
}

@media (max-width: 720px) {
  .se-act2 { min-height: 240vh; }
  .se-step { font-size: var(--mkt-h4); }
}

/* ═══════════════════════════════════════════════════════════
   Act 3 — Every result, structured.  (Readable / JSON morph)
═══════════════════════════════════════════════════════════ */
.se-act3 {
  padding: clamp(96px, 15vh, 168px) var(--page-gutter, 7vw);
}
.se-act3-inner { max-width: 1000px; margin: 0 auto; }

.se-act3-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: clamp(34px, 5vh, 60px);
}
.se-act3-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--mkt-h2);
  line-height: 1.03;
  letter-spacing: var(--tracking-dense, -0.024em);
  color: var(--text-primary);
}
.se-act3-cap {
  margin: 14px 0 0;
  font-family: var(--font-base);
  font-size: clamp(14.5px, 1.05vw, 16.5px);
  color: var(--text-secondary);
}

/* Spec — readable + JSON layers crossfade in the same cell. */
.se-spec {
  display: grid;
  max-width: 760px;
}
.se-spec-readable,
.se-spec-json {
  grid-area: 1 / 1;
  transition: opacity 320ms ease, transform 320ms ease;
}
.se-spec[data-view="readable"] .se-spec-json,
.se-spec[data-view="json"] .se-spec-readable {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}
.se-spec[data-view="json"] .se-spec-json { transform: none; }

/* Readable — editorial field rows, hairline-divided, no box. */
.se-spec-readable { list-style: none; margin: 0; padding: 0; }
.se-field {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 24px;
  padding: 15px 0;
  border-bottom: 1px solid var(--border-subtle);
  align-items: baseline;
  transition: border-color 200ms ease;
}
.se-field:last-child { border-bottom: none; }
.se-field-key {
  font-family: var(--font-code);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  transition: color 200ms ease;
}
.se-field:hover .se-field-key { color: #7ADAE6; }
.se-field-val {
  min-width: 0;
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.45;
  color: var(--text-primary);
}

/* JSON — the object your code receives. */
.se-spec-json {
  margin: 0;
  font-family: var(--font-code);
  font-size: clamp(12.5px, 1vw, 14.5px);
  line-height: 1.75;
  color: var(--text-secondary);
  overflow-x: auto;
  scrollbar-width: none;
}
.se-spec-json::-webkit-scrollbar { display: none; }
.se-j-k { color: #7ADAE6; }
.se-j-s { color: var(--text-secondary); }
.se-j-n { color: var(--text-primary); }
.se-j-p { color: var(--text-quaternary); }

@media (max-width: 600px) {
  .se-field { grid-template-columns: 1fr; gap: 4px; }
  /* stack is a column here (global cta-stack--inline rule): left-align the
     secondary link under the button, not the row's vertical-centering. */
  .se-hero-cta .link-cta { align-self: flex-start; padding-top: 0; }
}

/* ═══════════════════════════════════════════════════════════
   Act 4 — Saturated purple band.  "Context your agent can trust."
   Bloom curtain (clip-path circle, --bloom written by JS) reveals
   the SOLID #7C4FE8 fill from the bottom-left.  Band content is
   always light (the band is purple in both audiences).
═══════════════════════════════════════════════════════════ */
.se-act4 {
  position: relative;
  min-height: 200vh;
}
.se-band-stage {
  --bloom: 0%;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.se-band-fill {
  position: absolute;
  inset: 0;
  background: #7C4FE8;
  clip-path: circle(var(--bloom, 0%) at 14% 100%);
}
.se-band-content {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  padding: 0 var(--page-gutter, 7vw);
  text-align: center;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
.se-band-stage.is-open .se-band-content { opacity: 1; transform: none; }

.se-band-kicker { color: rgba(255, 255, 255, 0.72); }
.se-band-h2 {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--mkt-hero);
  line-height: 0.99;
  letter-spacing: var(--tracking-denser, -0.03em);
  color: #FFFFFF;
}
.se-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(10px, 1.5vw, 22px);
  margin-top: clamp(30px, 4.5vh, 56px);
  font-family: var(--font-base);
  font-size: var(--mkt-body);
}
.se-flow-node { color: rgba(255, 255, 255, 0.78); }
.se-flow-node--mark { color: #FFFFFF; font-weight: 600; }
.se-flow-arrow { color: rgba(255, 255, 255, 0.45); }

@media (max-width: 600px) {
  .se-act4 { min-height: 170vh; }
  .se-flow { flex-direction: column; gap: 8px; }
  .se-flow-arrow { transform: rotate(90deg); }
}

/* ═══════════════════════════════════════════════════════════
   Act 5 — Doorways.  Same query, four call surfaces; the result
   below stays constant.  Code layers crossfade by [data-door].
═══════════════════════════════════════════════════════════ */
.se-act5 {
  position: relative;
  min-height: 300vh;
}
.se-act5-stage {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: clamp(80px, 12vh, 140px) var(--page-gutter, 7vw);
}
.se-act5-inner { max-width: 920px; margin: 0 auto; width: 100%; }
.se-act5-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: clamp(28px, 4vh, 44px);
}
.se-act5-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--mkt-h2);
  line-height: 1.03;
  letter-spacing: var(--tracking-dense, -0.024em);
  color: var(--text-primary);
}

/* Hairline code surface (no fill); layers stack + crossfade. */
.se-doorpanel {
  display: grid;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: clamp(18px, 2.2vw, 28px);
  overflow-x: auto;
  scrollbar-width: none;
}
.se-doorpanel::-webkit-scrollbar { display: none; }
.se-door-code {
  grid-area: 1 / 1;
  margin: 0;
  font-family: var(--font-code);
  font-size: clamp(12.5px, 1.05vw, 15px);
  line-height: 1.75;
  color: var(--text-secondary);
  white-space: pre;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}
.se-doorpanel[data-door="cli"] [data-door-code="cli"],
.se-doorpanel[data-door="api"] [data-door-code="api"],
.se-doorpanel[data-door="mcp"] [data-door-code="mcp"],
.se-doorpanel[data-door="sdk"] [data-door-code="sdk"] {
  opacity: 1;
  pointer-events: auto;
}
.se-c-t { color: #7ADAE6; }
.se-c-k { color: var(--zen-purple-5, #7C4FE8); }
.se-c-c { color: var(--text-quaternary); }

.se-door-result {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: clamp(26px, 4vh, 44px) 0 0;
}
.se-door-result-label {
  font-family: var(--font-code);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
.se-door-result-line {
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  color: var(--text-primary);
}
.se-door-rank { font-family: var(--font-code); font-size: 13px; color: #7ADAE6; margin-right: 6px; }
.se-door-src { font-family: var(--font-code); font-size: 12px; color: var(--text-tertiary); margin-left: 8px; }

@media (max-width: 720px) {
  /* Phones: wrap the call snippets so long lines (the curl URL) don't
     clip off the right edge of the code surface. */
  .se-door-code { white-space: pre-wrap; overflow-wrap: anywhere; }
  .se-act5-head { align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════════
   Act 6 — Closer.  Warm-dark editorial ending.  The hero query
   bar returns empty and inviting.  No band; rhythm comes from the
   centred type + the returning signature element.
═══════════════════════════════════════════════════════════ */
.se-act6 { position: relative; }

.se-end {
  position: relative;
  z-index: 1;
  padding: clamp(120px, 18vh, 210px) var(--page-gutter, 7vw) clamp(100px, 13vh, 180px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.se-end-kicker { color: var(--text-tertiary); }
.se-end-h2 {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--mkt-hero);
  line-height: 0.98;
  letter-spacing: var(--tracking-denser, -0.03em);
  color: var(--text-primary);
}
/* Empty query bar — the hero's signature element, returned blank. */
.se-end-query {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(28px, 4vh, 44px);
  padding: 13px 20px;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  font-family: var(--font-code);
  font-size: 14px;
  color: var(--text-tertiary);
}
.se-end-query-icon { width: 18px; height: 18px; color: var(--text-tertiary); }
.se-end-caret { width: 1.5px; height: 16px; margin-left: -4px; background: var(--zen-purple-5, #7C4FE8); animation: se-blink 1.05s step-end infinite; }
.se-end-cta { margin-top: clamp(30px, 4.5vh, 52px); }
.se-end-note {
  margin: 14px 0 0;
  font-family: var(--font-code);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
}

/* ── Interlude — search-example marquee ─────────────────────
   Ticker of real queries + the favicons of their result sources.
   Seamless loop: track holds the chips twice; -50% minus half a
   gap (7px) lands group 2 exactly where group 1 started. ── */
.se-marquee {
  overflow: hidden;
  padding: clamp(22px, 4vh, 40px) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.se-mq-track {
  display: flex;
  width: max-content;
  gap: 14px;
  animation: se-mq 52s linear infinite;
  will-change: transform;
}
.se-marquee:hover .se-mq-track { animation-play-state: paused; }
@keyframes se-mq { to { transform: translateX(calc(-50% - 7px)); } }
.se-mq-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  white-space: nowrap;
}
.se-mq-icon { width: 16px; height: 16px; color: var(--text-tertiary); flex-shrink: 0; }
.se-mq-q { font-family: var(--font-code); font-size: 14px; color: var(--text-secondary); }
.se-mq-faves { display: inline-flex; align-items: center; gap: 6px; }
.se-mq-faves img { width: 18px; height: 18px; border-radius: 4px; object-fit: contain; }
@media (prefers-reduced-motion: reduce) {
  .se-mq-track { animation: none; }
}