/* /ai: the chat whose answer is HSTLE's quote card, then no sign-in / connected / never. Loaded by ai.html only. */

/* ---------- opener, held 260vh on desktop: a chat drops the pin. Beat 1 you ask, 2 your AI answers, 3 the quote card,
   4 the price leaves the card and drops on the map as the app's pin. Phone: not held, it rests on beat 4 ---------- */
.ai-open { position: relative; height: 260vh; height: 260svh; background: var(--map); --halo: var(--map); --tk-fs: clamp(44px, min(4.6vw, 7.4vh), 68px); }
.ai-open .frame { background: var(--map); display: flex; align-items: center; padding: var(--nav-h) 0 0; }
.ai-open .wrap { position: relative; z-index: 1; }
.ai-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
/* the chat arrives one message per beat */
.chat [data-b] { transition: opacity .35s var(--out), transform .5s var(--out); }
.ai-open[data-beat="1"] .chat [data-b="2"], .ai-open[data-beat="1"] .chat [data-b="3"], .ai-open[data-beat="2"] .chat [data-b="3"] { opacity: 0; transform: translateY(28px) scale(.97); }
.ai-open[data-beat="1"] .quote-clay, .ai-open[data-beat="2"] .quote-clay { opacity: 0; transform: rotate(8deg) scale(.8); }
.quote-clay { transition: opacity .35s var(--out), transform .6s var(--out); }
/* beat 4: the price has left the card; the card keeps its words */
.quote-p .pill { transition: opacity .3s var(--out), transform .4s var(--out); }
.ai-open[data-beat="4"] .quote-p .pill { opacity: .32; transform: rotate(-3deg) scale(.92); }
/* the pin the chat dropped: the app's price pill on the street under the copy */
.ai-pin { z-index: 2; }
.ai-pin .tk { opacity: 0; transform: translateY(-48px); transition: opacity .15s var(--in), transform .3s var(--in); }
.ai-pin .tk-l { max-width: 3.4em; }
.ai-pin .tk-b { text-transform: none; letter-spacing: .02em; }
.ai-open[data-beat="4"] .ai-pin .tk { opacity: 1; transform: none; transition: none; }
html.motion .ai-open[data-beat="4"] .ai-pin .tk { animation: pin-drop .55s var(--out) both; }
html.motion .ai-open[data-beat="4"] .ai-pin .ring { animation: ring-out .7s var(--out) .3s both; }
.ai-copy .ih1 .ln { padding-right: .2em; }
.chat { position: relative; display: grid; gap: 14px; justify-items: start; padding-bottom: 8px; }
.chat-ex { justify-self: end; }
.say-me, .say-ai { position: relative; max-width: 30ch; padding: 14px 20px 16px; border-radius: 26px; font: 600 clamp(17px, 1.39vw, 20px)/1.35 var(--text); }
.say-me { justify-self: end; background: var(--ink); color: #fff; border-bottom-right-radius: 8px; }
.say-ai { background: #fff; border: 3px solid var(--ink); border-bottom-left-radius: 8px; }
.who { display: block; margin-bottom: 4px; font: 600 12px/1 var(--text); letter-spacing: .12em; text-transform: uppercase; opacity: .64; }
/* the answer is HSTLE's quote card: the app's own object, so it keeps the hard outline */
.quote { position: relative; width: min(100%, 500px); margin-top: 6px; display: grid; gap: 14px; padding: 18px 22px 22px; background: #fff; border: 3px solid var(--ink); border-radius: 28px; }
.quote-clay { position: absolute; right: -5%; bottom: 300px; width: clamp(150px, 15vw, 230px); height: auto; aspect-ratio: 1; transform: rotate(8deg); pointer-events: none; }
.chat > :not(.quote-clay) { position: relative; }
.quote-top { display: flex; align-items: center; gap: 10px; }
.quote-top .wm { height: 22px; }
.quote-top .label { color: var(--mute); }
.quote-top .ex { margin-left: auto; }
.quote-t { font: 800 clamp(22px, 1.9vw, 28px)/1.04 var(--display); letter-spacing: -.015em; max-width: 22ch; }
.quote-p { display: flex; align-items: center; gap: 16px; }
.quote-p .pill { font-size: clamp(40px, 3.9vw, 56px); gap: .22em; padding: .16em .4em .06em; transform: rotate(-3deg); box-shadow: 0 .12em .26em -.06em rgba(18,18,18,.38); }
.quote-p .pill small { font: 600 .22em/1.05 var(--text); letter-spacing: .08em; text-transform: uppercase; max-width: 4.6em; white-space: normal; text-align: left; margin-top: -.1em; }
.quote-m { font: 600 15px/1.35 var(--text); color: var(--mute); }
.quote-n { font-size: 15px; line-height: 1.45; color: #333; max-width: 40ch; }
.quote-go { justify-self: start; box-shadow: inset 0 0 0 2.5px var(--ink); }
/* the conversation arrives like one: each bubble a beat after the last */
html.motion .chat [data-fade] { transition-delay: calc(.25s + var(--i, 0) * .45s); }
@media (max-width: 959px) {
  .ai-open { height: auto; --tk-fs: 36px; }
  .ai-open .frame { position: relative; height: auto; display: block; padding: calc(var(--nav-h) + 24px) 0 calc(var(--tk-fs) * 2.6 + 48px); }
  .ai-grid { grid-template-columns: 1fr; min-height: 0; gap: 34px; }
  .chat { gap: 12px; }
  .say-me, .say-ai { max-width: 88%; font-size: 16px; padding: 12px 16px 14px; border-radius: 22px; }
  .quote { padding: 16px 16px 18px; border-radius: 24px; }
  .quote-clay { width: 120px; right: -8px; bottom: 300px; }
  .quote-go { width: 100%; }
}

/* ---------- what an AI can do: two tools with no sign-in (quiet), the connected four (the black slab, loudest),
   and the four nevers struck through. Three weights, not three equal columns ---------- */
.rows-sec { padding: clamp(80px, 10vw, 160px) 0 clamp(64px, 8vw, 120px); }
.tiers { margin-top: clamp(32px, 4vw, 64px); display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); grid-template-areas: "open conn" "never never"; gap: clamp(40px, 5vw, 80px) clamp(28px, 4vw, 72px); align-items: start; }
.tier-k .pill { font-size: clamp(24px, 2.3vw, 34px); }
.tier-open { grid-area: open; display: grid; gap: 26px; padding-top: 24px; border-top: 2.5px solid var(--ink); margin-top: clamp(24px, 4vw, 64px); }
.tier-open .tier-k .pill { background: #fff; }
.tier-tools { display: grid; gap: 26px; }
.tier-tools li { display: grid; justify-items: start; gap: 8px; }
.tier-tools h4 { font: 800 clamp(24px, 2.2vw, 32px)/1.04 var(--display); letter-spacing: -.015em; }
.tier-tools p { font-size: 17px; line-height: 1.5; color: #333; max-width: 40ch; }
.tier-conn { grid-area: conn; display: grid; gap: clamp(20px, 2.4vw, 32px); padding: clamp(26px, 3.2vw, 48px); background: var(--ink); color: #fff; border-radius: 36px 36px 36px 10px; }
.verbs { display: grid; gap: clamp(14px, 1.6vw, 22px); }
.verbs li { display: grid; gap: 6px; padding-bottom: clamp(14px, 1.6vw, 22px); border-bottom: 1px solid rgba(255,255,255,.18); }
.verbs b { font: 800 clamp(34px, 4vw, 60px)/.98 var(--display); letter-spacing: -.03em; }
.verbs li > span { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 17px; color: rgba(255,255,255,.8); }
.tier-conn .tool { background: rgba(255,255,255,.12); color: #fff; box-shadow: none; }
.tier-how { font-size: 17px; line-height: 1.5; color: rgba(255,255,255,.86); max-width: 46ch; }
.tier-never { grid-area: never; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px clamp(24px, 4vw, 64px); align-items: start; padding-top: clamp(28px, 3.4vw, 48px); border-top: 2.5px solid var(--ink); }
.tier-never .tier-k .pill { background: var(--ink); color: var(--y); font-size: clamp(36px, 3.9vw, 56px); }
.tier-never > p { grid-column: 2; font-size: 17px; line-height: 1.5; color: #333; max-width: 50ch; }
.nevers { display: flex; flex-wrap: wrap; gap: 6px 28px; }
.nevers li { font: 800 var(--fs-ih2)/1 var(--display); letter-spacing: -.03em; text-decoration: line-through; text-decoration-thickness: .08em; text-decoration-color: var(--y); }
.pin-line { margin-top: clamp(56px, 7vw, 112px); font: 800 var(--fs-statement)/.92 var(--display); letter-spacing: -.035em; }
@media (max-width: 959px) {
  .tiers { grid-template-columns: minmax(0, 1fr); grid-template-areas: "open" "conn" "never"; }
  .tier-open { margin-top: 0; }
  .tier-conn { border-radius: 26px 26px 26px 8px; }
  .verbs b { font-size: 32px; }
  .tier-never { grid-template-columns: minmax(0, 1fr); }
  .tier-never > p { grid-column: 1; }
  .nevers { flex-direction: column; }
  .nevers li { font-size: 44px; }
  .pin-line { font-size: min(11.6vw, 46px); }
}

/* ---------- the endpoint ---------- */
.mcp { padding: clamp(64px, 8vw, 120px) 0; background: var(--ink); color: #fff; --focus-ring: var(--y); --focus-gap: var(--ink); }
.mcp .label { color: rgba(255,255,255,.7); }
.mcp .tool { background: #fff; color: var(--ink); }
.mcp .mcp-acts .btn-k { background: var(--y); color: var(--ink); }
.mcp-url .pill { color: var(--ink); }
.mcp-in { display: grid; gap: 22px; justify-items: start; }
.mcp-url .pill { font-size: clamp(30px, 7.4vw, 112px); padding: .14em .36em .04em; border-width: max(3px, .03em); transform: rotate(-2deg); transform-origin: 0 50%; box-shadow: 0 .1em .22em -.06em rgba(18,18,18,.38); }
.mcp-acts { display: flex; align-items: center; gap: 16px; min-height: 48px; }
.mcp-acts .btn:active { transform: scale(.97); }
.mcp-done { font: 600 16px/1 var(--text); }
.mcp-facts { display: grid; gap: 8px; font-size: var(--fs-lead); line-height: 1.45; max-width: 52ch; }
.mcp-facts li { padding-left: 22px; position: relative; }
.mcp-facts li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: var(--y); box-shadow: 0 0 0 1.5px var(--ink); }
@media (max-width: 959px) { .mcp-url .pill { font-size: min(8.6vw, 40px); } }

/* the FAQ statement at the inner H2 size, so "Before you connect it." holds two lines beside the questions */
.faq .statement { font-size: var(--fs-ih2); }

@media (prefers-reduced-motion: reduce) {
  .chat [data-b], .quote-clay, .quote-p .pill, .ai-pin .tk { transition-duration: .2s !important; transform: none !important; }
}