@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");

/* ──────────────────────────────────────────────────────────
   /for/ai-teams — the LIVE WEB for agents (an AI experience).
   Teal = the live web. A streaming agent console, two expanding
   teal bands, a hover-driven toolbelt, a favicon model wall.
   Warm-dark base, border-before-fill, type-led, delightful.
─────────────────────────────────────────────────────────── */
main { position: relative; z-index: 1; }
.back-to-top, .back-to-top * { cursor: none; }
.at-tool-list, .at-tool-list * { cursor: none; }

.at-h2 { margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: var(--mkt-h2); line-height: 1.0;
  letter-spacing: var(--tracking-dense, -0.024em); color: var(--text-primary); }

/* Blur-in reveal (GPU-promoted; blur >= 16px) */
.at-blur[data-reveal] { opacity: 0; filter: blur(16px); transform: translateZ(0); backface-visibility: hidden;
  will-change: filter, opacity; transition: opacity 0.7s ease, filter 0.7s ease; }
.at-blur[data-reveal].is-in { opacity: 1; filter: blur(0); transform: translateZ(0); }

/* ═══ Act 1 — Hero: copy left, live agent console right ═══ */
.at-hero { min-height: 100vh; display: flex; align-items: center;
  padding: clamp(112px, 15vh, 164px) var(--page-gutter, 7vw) clamp(60px, 9vh, 110px); }
.at-hero-grid { width: 100%; max-width: 1280px; margin: 0 auto; display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(360px, 42vw, 560px); gap: clamp(40px, 5vw, 92px); align-items: center; }
.at-hero-copy { max-width: 600px; }
.at-hero-h1 { margin: clamp(14px, 1.8vh, 22px) 0 0; font-family: var(--font-display); font-weight: 500;
  font-size: var(--mkt-hero-xl); line-height: 0.96; letter-spacing: var(--tracking-denser, -0.03em);
  color: var(--text-primary); }
.at-hero-sub { margin: clamp(18px, 2.4vh, 28px) 0 0; font-family: var(--font-base);
  font-size: var(--mkt-body); line-height: 1.55; color: var(--text-secondary); max-width: 44ch; }

/* The agent console */
.at-console { border: 1px solid var(--border-subtle); border-radius: 18px; overflow: hidden;
  font-family: var(--font-code); }
.at-console-bar { display: flex; align-items: center; justify-content: space-between;
  padding: 13px clamp(16px, 1.6vw, 22px); border-bottom: 1px solid var(--border-subtle); }
.at-console-id { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; color: var(--text-secondary); }
.at-console-ico { width: 15px; height: 15px; flex: none; background: var(--text-secondary);
  -webkit-mask: var(--ic, none) center / contain no-repeat; mask: var(--ic, none) center / contain no-repeat; }
.at-console-grounded { display: inline-flex; align-items: center; gap: 7px; font-size: 11px;
  letter-spacing: 0.04em; text-transform: uppercase; color: #7ADAE6; }
.at-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #7ADAE6; flex: none;
  box-shadow: 0 0 0 0 rgba(122,218,230,0.5); animation: at-pulse 2.2s ease-out infinite; }
@keyframes at-pulse { 0%{box-shadow:0 0 0 0 rgba(122,218,230,0.5);} 70%{box-shadow:0 0 0 9px rgba(122,218,230,0);} 100%{box-shadow:0 0 0 0 rgba(122,218,230,0);} }
.at-console-q { padding: clamp(20px, 2.2vw, 28px) clamp(16px, 1.6vw, 22px) 6px; font-size: var(--mkt-body-sm);
  color: var(--text-primary); min-height: 1.4em; }
.at-prompt { color: #7ADAE6; }
.at-caret { display: inline-block; width: 8px; height: 1.05em; vertical-align: -0.18em; margin-left: 1px;
  background: #7ADAE6; animation: at-caret 1.05s steps(1) infinite; }
@keyframes at-caret { 50% { opacity: 0; } }
.at-console-a { padding: 8px clamp(16px, 1.6vw, 22px) clamp(14px, 1.6vw, 20px); font-family: var(--font-base);
  font-size: var(--mkt-body); line-height: 1.5; color: var(--text-secondary); min-height: 3.2em; }
.at-console-a b { color: #7ADAE6; font-weight: 600; }
.at-console-src { display: flex; align-items: center; gap: 8px; padding: 12px clamp(16px, 1.6vw, 22px);
  border-top: 1px solid var(--border-subtle); font-size: 11.5px; color: var(--text-tertiary);
  opacity: 0; transition: opacity 0.4s ease; }
.at-console-src.is-shown { opacity: 1; }
.at-globe { width: 12px; height: 12px; flex: none; border-radius: 50%;
  border: 1px solid var(--text-tertiary); position: relative; }
.at-globe::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  border-left: 1px solid var(--text-tertiary); border-right: 1px solid var(--text-tertiary); transform: scaleX(0.45); }

/* ═══ Teal bands (shared) — expand on entry ═══ */
.at-teal { position: relative; background: transparent; }
.at-teal-fill { position: absolute; inset: 0; background: #7ADAE6; z-index: 0;
  clip-path: circle(0% at 50% 110%); }
.at-teal.is-in .at-teal-fill { clip-path: circle(155% at 50% 110%);
  transition: clip-path 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.at-teal-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto;
  padding: clamp(110px, 18vh, 200px) var(--page-gutter, 7vw); }
.at-teal-inner--left { max-width: 1080px; }
.at-teal-kicker { margin: 0 0 clamp(16px, 2vh, 24px); font-family: var(--font-code); font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(29,22,18,0.62); }
.at-teal-h2 { margin: 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: #1D1612; }
.at-teal-h2--center { text-align: center; }
.at-teal-body { margin: clamp(22px, 3vh, 34px) 0 0; font-family: var(--font-base);
  font-size: var(--mkt-lead); line-height: 1.5; color: rgba(29,22,18,0.82); max-width: 50ch; }
.at-teal-body--center { margin-left: auto; margin-right: auto; text-align: center; }

/* Act 2 — frozen cutoff vs live clock */
.at-clocks { margin: clamp(44px, 6vh, 72px) 0 0; display: flex; flex-wrap: wrap; gap: clamp(16px, 3vw, 48px); }
.at-clock { display: flex; flex-direction: column; gap: 8px; }
.at-clock-label { font-family: var(--font-code); font-size: 11px; letter-spacing: 0.05em;
  text-transform: uppercase; color: rgba(29,22,18,0.6); }
.at-clock-time { font-family: var(--font-code); font-size: var(--mkt-h2); line-height: 1;
  font-variant-numeric: tabular-nums; color: #1D1612; }
.at-clock--frozen .at-clock-time { color: rgba(29,22,18,0.42); text-decoration: line-through; text-decoration-thickness: 2px; }
.at-clock--live .at-clock-time { color: #1D1612; }

/* ═══ Act 3 — The agent's toolbelt (hover-driven) ═══ */
.at-tools-act { padding: clamp(90px, 13vh, 170px) var(--page-gutter, 7vw); }
.at-tools-inner { max-width: 1180px; margin: 0 auto; }
.at-tools-head { max-width: 720px; }
.at-tools-lead { margin: 16px 0 0; font-family: var(--font-base); font-size: var(--mkt-body);
  line-height: 1.55; color: var(--text-secondary); max-width: 52ch; }
.at-tools { margin: clamp(40px, 6vh, 64px) 0 0; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.at-tool-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.at-tool { display: flex; align-items: baseline; gap: clamp(12px, 1.4vw, 22px); flex-wrap: wrap;
  padding: clamp(16px, 1.9vh, 24px) 4px; border-top: 1px solid var(--border-subtle);
  transition: padding-left 0.3s cubic-bezier(0.22,1,0.36,1); }
.at-tool:last-child { border-bottom: 1px solid var(--border-subtle); }
.at-tool-name { font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-h3);
  line-height: 1; letter-spacing: var(--tracking-dense, -0.024em); color: var(--text-quaternary);
  transition: color 0.25s ease; }
.at-tool-what { font-family: var(--font-base); font-size: var(--mkt-body-sm); color: var(--text-tertiary);
  transition: color 0.25s ease; }
.at-tool.is-active { padding-left: clamp(8px, 1.2vw, 18px); }
.at-tool.is-active .at-tool-name { color: var(--text-primary); }
.at-tool.is-active .at-tool-what { color: #7ADAE6; }
.at-tool-preview { position: sticky; top: clamp(90px, 12vh, 120px);
  border: 1px solid var(--border-subtle); border-radius: 16px; padding: clamp(22px, 2.4vw, 32px); }
.at-tool-preview-tag { font-family: var(--font-code); font-size: 11px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-tertiary); }
.at-tool-preview-code { display: block; margin: 16px 0 0; font-family: var(--font-code);
  font-size: var(--mkt-body-sm); line-height: 1.6; color: #7ADAE6; word-break: break-word; min-height: 3.2em; }

/* ═══ Act 4 — favicon model wall (on teal) ═══ */
.at-models { margin: clamp(44px, 6vh, 72px) auto 0; max-width: 880px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 1.6vw, 22px); }
.at-model { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1;
  border: 1px solid rgba(29,22,18,0.16); border-radius: 16px; background: rgba(255,255,255,0.5);
  opacity: 0; transform: translateY(10px) scale(0.96); }
.at-teal.is-in .at-model { animation: at-model-in 0.55s cubic-bezier(0.22,1,0.36,1) forwards;
  animation-delay: calc(0.45s + var(--d, 0) * 0.06s); }
@keyframes at-model-in { to { opacity: 1; transform: none; } }
.at-model-ico { width: clamp(30px, 3.8vw, 48px); height: clamp(30px, 3.8vw, 48px); background: #fff;
  -webkit-mask: var(--ic, none) center / contain no-repeat; mask: var(--ic, none) center / contain no-repeat; }
.at-mcp-line { margin: clamp(34px, 5vh, 52px) 0 0; text-align: center; }
.at-mcp-line code { font-family: var(--font-code); font-size: var(--mkt-body-sm); color: #1D1612;
  border: 1px solid rgba(29,22,18,0.24); border-radius: 999px; padding: 10px 20px; }

/* Purple variant (Act 4): brand purple fill, white type on it. */
.at-band--purple .at-teal-fill { background: #7C4FE8; }
.at-band--purple .at-teal-kicker { color: rgba(255,255,255,0.72); }
.at-band--purple .at-teal-h2 { color: #fff; }
.at-band--purple .at-teal-body { color: rgba(255,255,255,0.86); }
/* no fill: purple shows fully through, white hairline frame, white glyph */
.at-band--purple .at-model { border-color: rgba(255,255,255,0.26); background: transparent; }
.at-band--purple .at-mcp-line code { color: #fff; border-color: rgba(255,255,255,0.34); }

/* Topbar inversion over the purple band (white chrome) */

/* Topbar inversion over the teal bands (dark chrome, purple CTA) */

/* ═══ Act 5 — Closer ═══ */
.at-end { padding: clamp(120px, 18vh, 210px) var(--page-gutter, 7vw); text-align: center;
  display: flex; flex-direction: column; align-items: center; }
.at-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); }
.at-end-cta { margin-top: clamp(30px, 4.5vh, 52px); }
/* Closer rides the Act 4 purple (one continuous expanse into the footer) */
.at-end--purple { background: #7C4FE8; }
.at-end--purple .act-kicker { color: rgba(255,255,255,0.72); }
.at-end--purple .at-end-h2 { color: #fff; }

/* ═══ Breakpoints ═══ */
@media (max-width: 900px) {
  .at-hero-grid { grid-template-columns: 1fr; gap: clamp(34px, 5vh, 52px); }
  .at-tools { grid-template-columns: 1fr; gap: clamp(26px, 4vh, 40px); }
  .at-tool-preview { position: static; }
}
@media (max-width: 620px) {
  .at-hero { min-height: 0; }
  .at-models { grid-template-columns: repeat(3, 1fr); max-width: 360px; }
  .at-clocks { flex-direction: column; gap: 22px; }
}
@media (max-width: 420px) {
  
  
}
@media (min-width: 1600px) {
  .at-hero-grid { max-width: 1400px; }
  .at-tools-inner, .at-teal-inner { max-width: 1320px; }
}
@media (min-width: 1920px) {
  .at-hero-grid { max-width: 1560px; }
}
@media (prefers-reduced-motion: reduce) {
  .at-live-dot { animation: none; }
  .at-caret { animation: none; }
  .at-teal.is-in .at-teal-fill { transition: none; }
  .at-teal.is-in .at-model { animation: none; opacity: 1; transform: none; }
}