/* ============ Duo AI ============
   The brand for DuoApp's built-in AI. Mark: assets/duo-ai-mark.svg (the ✦ spark the app uses on
   everything AI fills in). Colours extend the site blues with one violet stop so AI reads as its own
   thing without leaving the palette. Used on the home page (hero badge, floating tag, Duo AI band). */

:root{
  --ai-a:#5BA8EE;
  --ai-b:#1E88E5;
  --ai-c:#5B4CF0;
  --ai-grad:linear-gradient(120deg, var(--ai-a) 0%, var(--ai-b) 45%, var(--ai-c) 100%);
}

/* Wordmark: "Duo" in white, "AI" in the gradient. */
.duoai-word{font-weight:700; letter-spacing:-.03em; color:#fff; line-height:1; white-space:nowrap}
.duoai-word b{
  font-weight:700; margin-left:.12em;
  background:var(--ai-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.duoai-grad{background:var(--ai-grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.duoai-mark{flex:none; display:block}

/* ── Hero badge: the logo, at the very top ── */
.duoai-badge{
  position:relative; display:inline-flex; align-items:center; gap:14px; max-width:100%;
  margin:0 0 26px; padding:10px 20px 10px 10px; border-radius:18px;
  background:linear-gradient(135deg, rgba(91,168,238,.16), rgba(91,76,240,.14));
  border:1px solid rgba(123,150,255,.38);
  box-shadow:0 18px 40px -18px rgba(91,76,240,.65), inset 0 1px 0 rgba(255,255,255,.08);
  color:#fff; transition:transform .2s, border-color .2s, box-shadow .2s;
  isolation:isolate; overflow:hidden;
}
.duoai-badge::after{ /* slow sheen across the badge */
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.10) 50%, transparent 65%);
  transform:translateX(-120%); animation:duoai-sheen 6s ease-in-out 1.2s infinite;
}
.duoai-badge:hover{transform:translateY(-2px); border-color:rgba(160,180,255,.6); box-shadow:0 22px 48px -16px rgba(91,76,240,.8)}
.duoai-badge .duoai-mark{width:46px; height:46px; filter:drop-shadow(0 6px 14px rgba(91,76,240,.45))}
.duoai-badge .duoai-word{font-size:24px}
.duoai-badge-sep{flex:none; width:1px; height:30px; background:rgba(255,255,255,.18)}
.duoai-badge-text{display:flex; flex-direction:column; gap:2px; line-height:1.2; min-width:0}
.duoai-badge-text .k{font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#b9c7ff}
.duoai-badge-text .v{font-size:14.5px; font-weight:500; color:#fff}
.duoai-badge .ar{flex:none; color:#b9c7ff; transition:transform .2s}
.duoai-badge:hover .ar{transform:translateX(3px)}
@keyframes duoai-sheen{0%{transform:translateX(-120%)} 45%,100%{transform:translateX(120%)}}

/* ── Floating tag on the hero screenshot ── */
.hs-tag-ai{bottom:15%; right:25%; animation:tag-float-b 8.5s ease-in-out infinite; border-color:rgba(123,150,255,.45)}
.hs-tag-ai .duoai-mark{width:28px; height:28px}
.hs-tag-ai .hs-tag-text .label{color:#b9c7ff}

/* ── The Duo AI band ── */
.duoai{padding:40px 0 120px}
.duoai-card{
  position:relative; overflow:hidden; border-radius:32px; padding:64px;
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(91,76,240,.28), transparent 60%),
    radial-gradient(700px 380px at -5% 110%, rgba(30,136,229,.22), transparent 60%),
    linear-gradient(165deg, var(--navy-2), rgba(15,36,64,.6));
  border:1px solid rgba(123,150,255,.28);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.7);
}
.duoai-card::before{ /* hairline gradient border on top */
  content:""; position:absolute; left:64px; right:64px; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(160,180,255,.8), transparent);
}
.duoai-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:center}
.duoai-lockup{display:flex; align-items:center; gap:18px; margin-bottom:28px}
.duoai-lockup .duoai-mark{width:72px; height:72px; filter:drop-shadow(0 14px 30px rgba(91,76,240,.55))}
.duoai-lockup .duoai-word{font-size:52px}
.duoai-lockup-tag{
  align-self:flex-start; margin-top:6px; padding:3px 9px; border-radius:999px;
  background:var(--green); color:var(--navy);
  font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
}
.duoai-copy h2{margin:16px 0 18px; font-weight:500}
.duoai-copy > p{color:var(--ink-mute); font-size:17px; line-height:1.6; max-width:540px}
.duoai-trust{list-style:none; margin:26px 0 30px; padding:0; display:flex; flex-direction:column; gap:10px}
.duoai-trust li{display:flex; align-items:center; gap:10px; color:var(--ink-soft); font-size:15px}
.duoai-trust .i{flex:none; width:24px; height:24px; border-radius:8px; display:grid; place-items:center; background:rgba(123,150,255,.14); color:#b9c7ff; font-size:12px}
.duoai-actions{display:flex; flex-wrap:wrap; gap:12px}

/* Animated demo: a CSCS card is read and the form fills itself in. Loops every 9s. */
.duoai-demo{position:relative; display:grid; grid-template-columns:1fr 1.15fr; gap:18px; align-items:center}
.duoai-doc{
  position:relative; aspect-ratio:1.586; border-radius:14px; overflow:hidden;
  background:linear-gradient(135deg, #e7f4ea, #cfe8d6); color:#12331f;
  box-shadow:0 24px 50px -16px rgba(0,0,0,.6); transform:rotate(-4deg);
  padding:12px 14px; font-size:9px; line-height:1.3;
}
.duoai-doc .hdr{display:flex; justify-content:space-between; align-items:center; font-weight:800; letter-spacing:.06em}
.duoai-doc .hdr .logo{background:#12331f; color:#e7f4ea; border-radius:4px; padding:2px 5px; font-size:10px}
.duoai-doc .body{display:grid; grid-template-columns:34% 1fr; gap:10px; margin-top:10px}
.duoai-doc .photo{aspect-ratio:.8; border-radius:6px; background:linear-gradient(160deg,#9fbfaa,#6f957d)}
.duoai-doc .lines{display:flex; flex-direction:column; gap:5px; font-weight:600}
.duoai-doc .lines small{display:block; font-weight:500; opacity:.6; font-size:7.5px; text-transform:uppercase; letter-spacing:.08em}
.duoai-beam{
  position:absolute; left:0; right:0; height:36%; top:-40%;
  background:linear-gradient(180deg, transparent, rgba(91,168,238,.55) 70%, rgba(255,255,255,.9) 100%);
  mix-blend-mode:screen; animation:duoai-scan 9s ease-in-out infinite;
}
@keyframes duoai-scan{0%{top:-40%} 18%{top:105%} 19%,100%{top:105%; opacity:0}}

.duoai-form{
  background:rgba(10,26,46,.72); border:1px solid var(--line-2); border-radius:16px; padding:16px;
  box-shadow:0 24px 50px -16px rgba(0,0,0,.55);
}
.duoai-form-note{
  display:flex; align-items:center; gap:8px; margin-bottom:12px; padding:8px 10px; border-radius:10px;
  background:rgba(91,168,238,.12); color:#cfe0ff; font-size:12px; font-weight:500;
  opacity:0; animation:duoai-note 9s ease-in-out infinite;
}
.duoai-form-note .s{color:var(--ai-a)}
.duoai-field{margin-top:10px}
.duoai-field label{display:block; font-size:10.5px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px}
.duoai-field .in{
  position:relative; height:34px; border-radius:9px; border:1px solid var(--line-2); background:rgba(255,255,255,.03);
  display:flex; align-items:center; padding:0 10px; font-size:13.5px; color:#fff; overflow:hidden;
}
.duoai-field .in span{opacity:0; transform:translateY(4px)}
.duoai-field .in::after{ /* the blue "filled by AI" outline */
  content:""; position:absolute; inset:-1px; border-radius:9px; border:2px solid var(--ai-b); opacity:0;
  box-shadow:0 0 0 3px rgba(30,136,229,.18);
}
.duoai-field:nth-child(2) .in span, .duoai-field:nth-child(2) .in::after{animation:duoai-fill-1 9s ease-out infinite}
.duoai-field:nth-child(3) .in span, .duoai-field:nth-child(3) .in::after{animation:duoai-fill-2 9s ease-out infinite}
.duoai-field:nth-child(4) .in span, .duoai-field:nth-child(4) .in::after{animation:duoai-fill-3 9s ease-out infinite}
.duoai-field:nth-child(5) .in span, .duoai-field:nth-child(5) .in::after{animation:duoai-fill-4 9s ease-out infinite}
@keyframes duoai-fill-1{0%,20%{opacity:0; transform:translateY(4px)} 25%,92%{opacity:1; transform:none} 100%{opacity:0}}
@keyframes duoai-fill-2{0%,26%{opacity:0; transform:translateY(4px)} 31%,92%{opacity:1; transform:none} 100%{opacity:0}}
@keyframes duoai-fill-3{0%,32%{opacity:0; transform:translateY(4px)} 37%,92%{opacity:1; transform:none} 100%{opacity:0}}
@keyframes duoai-fill-4{0%,38%{opacity:0; transform:translateY(4px)} 43%,92%{opacity:1; transform:none} 100%{opacity:0}}
@keyframes duoai-note{0%,42%{opacity:0} 48%,92%{opacity:1} 100%{opacity:0}}

/* Four capabilities */
.duoai-features{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-top:56px; padding-top:40px; border-top:1px solid var(--line)}
.duoai-feat{
  background:rgba(255,255,255,.025); border:1px solid var(--line-2); border-radius:18px; padding:22px 20px;
  transition:border-color .2s, transform .2s, background .2s;
}
.duoai-feat:hover{border-color:rgba(123,150,255,.45); background:rgba(123,150,255,.05); transform:translateY(-2px)}
.duoai-feat .ico{width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:rgba(91,76,240,.18); color:#b9c7ff; margin-bottom:16px}
.duoai-feat h3{font-size:17px; margin-bottom:8px}
.duoai-feat p{color:var(--ink-mute); font-size:14.5px; line-height:1.55}
.duoai-feat .where{margin-top:14px; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim)}

@media (max-width:1080px){
  .duoai-card{padding:44px 32px}
  .duoai-grid{grid-template-columns:1fr; gap:44px}
  .duoai-features{grid-template-columns:repeat(2, 1fr)}
  .hs-tag-ai{right:26%; bottom:12%}
}
@media (max-width:600px){
  .duoai{padding:24px 0 80px}
  .duoai-card{padding:32px 20px; border-radius:24px}
  .duoai-card::before{left:20px; right:20px}
  .duoai-lockup .duoai-mark{width:56px; height:56px}
  .duoai-lockup .duoai-word{font-size:40px}
  .duoai-demo{grid-template-columns:1fr}
  .duoai-doc{max-width:280px; margin:0 auto}
  .duoai-features{grid-template-columns:1fr}
  .duoai-badge{padding:8px 14px 8px 8px; gap:10px}
  .duoai-badge .duoai-mark{width:38px; height:38px}
  .duoai-badge .duoai-word{font-size:20px}
  .duoai-badge-text .k{display:none}
  .duoai-badge-text .v{font-size:13px}
  .hs-tag-ai{display:none}
}
@media (prefers-reduced-motion:reduce){
  .duoai-badge::after, .duoai-beam{animation:none; display:none}
  .duoai-field .in span, .duoai-field .in::after, .duoai-form-note{animation:none !important; opacity:1; transform:none}
}

/* ============ Ask Duo AI ============
   Sits inside the Duo AI band, between the intro and the four feature cards. The product mock is
   plain HTML + inline SVG drawn in the app's light theme (AI blue #1B51E5), so it reads like a real
   screen against the dark band. assets/duo-ai.js drives the type → think → answer sequence by
   setting data-state on #ask-demo (idle | typing | thinking | done); with no data-state (no JS) or
   with reduced motion, the finished answer simply shows. */
.ask{
  --ask-blue:#1B51E5; --ask-ink:#0F1B2D; --ask-mute:#5B6B82; --ask-faint:#8592A6;
  --ask-line:#E4E9F2; --ask-soft:#F4F7FB; --ask-red:#C9302C; --ask-amber:#A04A00;
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:60px; align-items:center;
  margin-top:64px; padding-top:56px; border-top:1px solid var(--line);
  scroll-margin-top:96px;
}
.ask-copy{order:2; min-width:0}
.ask-kicker{display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:18px}
.ask-kicker .duoai-lockup-tag{margin-top:0; align-self:center}
.ask-name{display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#b9c7ff}
.ask-name .s{color:var(--ai-a); font-size:14px}
.ask-title{font-size:clamp(30px, 3.4vw, 44px); line-height:1.06; letter-spacing:-.025em; font-weight:500; margin-bottom:18px}
.ask-copy > p{color:var(--ink-mute); font-size:16.5px; line-height:1.6; max-width:540px}
.ask-copy > p + p{margin-top:12px}
.ask-copy .duoai-trust{margin:24px 0 20px}
.ask-copy .duoai-trust li{align-items:flex-start}
.ask-copy .duoai-trust li .i{margin-top:-1px}
.ask-copy > p.ask-avail{display:flex; align-items:center; gap:10px; color:var(--ink-soft); font-size:15px; margin:0 0 24px}
.ask-avail::before{content:""; flex:none; width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(93,211,158,.18)}
.ask-sr{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* The app window */
.ask-stage{min-width:0}
.ask-app{
  position:relative; height:620px; border-radius:18px; overflow:hidden; isolation:isolate;
  background:#EEF2F8; color:var(--ask-ink); font-size:13px; line-height:1.4;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(160,180,255,.25);
}
.ask-topbar{height:46px; display:flex; align-items:center; gap:12px; padding:0 14px; background:#fff; border-bottom:1px solid var(--ask-line)}
.ask-logo{width:22px; height:22px; border-radius:6px; background:linear-gradient(135deg, var(--blue-2), var(--blue))}
.ask-crumb{width:96px; height:8px; border-radius:4px; background:#DCE3EE}
.ask-trigger{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 6px 0 9px; border-radius:8px;
  border:1px solid #C9D6F5; background:#F2F6FF; color:var(--ask-blue); font-size:12px; font-weight:600; white-space:nowrap;
}
.ask-avatar{width:26px; height:26px; border-radius:50%; background:#CBD5E3}
.ask-page{position:absolute; inset:46px 0 0; padding:22px 18px; display:flex; flex-direction:column; gap:10px}
.ask-page i{display:block; height:9px; border-radius:5px; background:#DCE3EE}
.ask-page i.h{width:46%; height:16px; margin-bottom:8px; background:#CFD8E6}
.ask-page i.short{width:60%}
.ask-page .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:10px 0}
.ask-page .cards i{height:70px; border-radius:10px; background:#fff; border:1px solid var(--ask-line)}
.ask-page::after{content:""; position:absolute; inset:0; background:rgba(10,26,46,.22)}

/* The slide-over panel */
.ask-panel{
  position:absolute; top:46px; right:0; bottom:0; width:min(430px, 80%); z-index:1;
  display:flex; flex-direction:column; background:#fff; border-left:1px solid var(--ask-line);
  box-shadow:-30px 0 60px -24px rgba(10,26,46,.45);
  transition:opacity .45s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.ask-head{display:flex; align-items:center; gap:9px; padding:12px 14px; border-bottom:1px solid var(--ask-line)}
.ask-head .duoai-mark{width:24px; height:24px}
.ask-head-t{font-size:14px; font-weight:600; letter-spacing:-.01em}
.ask-ro{font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ask-blue); background:#EEF3FF; border-radius:999px; padding:2px 7px}
.ask-x{margin-left:auto; width:26px; height:26px; border-radius:7px; display:grid; place-items:center; color:var(--ask-faint)}
.ask-thread{flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:12px; padding:16px 16px 6px}
.ask-q{
  align-self:flex-end; max-width:86%; padding:9px 13px; border-radius:14px 14px 4px 14px;
  background:var(--ask-blue); color:#fff; font-size:13.5px; line-height:1.4;
}
.ask-thinking{display:none; align-items:center; gap:8px; color:var(--ask-mute); font-size:12.5px}
.ask-thinking .s{color:var(--ask-blue); font-size:16px; display:inline-block; animation:ask-spark 1.3s ease-in-out infinite}
.ask-thinking .dots{display:inline-flex; gap:3px; margin-left:-4px}
.ask-thinking .dots i{width:3px; height:3px; border-radius:50%; background:currentColor; animation:ask-dot 1.2s ease-in-out infinite}
.ask-thinking .dots i:nth-child(2){animation-delay:.15s}
.ask-thinking .dots i:nth-child(3){animation-delay:.3s}
.ask-a{display:flex; flex-direction:column; gap:10px}
.ask-a-text{display:flex; gap:9px; align-items:flex-start}
.ask-a-text .s{flex:none; width:22px; height:22px; border-radius:7px; display:grid; place-items:center; color:#fff; font-size:12px; background:var(--ai-grad)}
.ask-a-text p{font-size:14px; line-height:1.45; color:var(--ask-ink); padding-top:1px}
.ask-a-text strong{font-weight:650}
.ask-card{border:1px solid var(--ask-line); border-radius:12px; padding:12px 12px 10px; background:#fff; box-shadow:0 1px 2px rgba(15,27,45,.04)}
.ask-card-h{display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:12px; font-weight:600}
.ask-card-h .m{font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:400; letter-spacing:.08em; text-transform:uppercase; color:var(--ask-faint); white-space:nowrap}

/* Line chart */
.ask-chart{display:block; width:100%; height:auto; margin-top:8px; overflow:visible}
.ask-grid line{stroke:#E9EEF5; stroke-width:1}
.ask-grid line.base{stroke:#CDD5E1}
.ask-chart text{font-family:'Inter',sans-serif; font-size:8.5px; fill:var(--ask-faint); font-variant-numeric:tabular-nums}
.ask-ylab text{text-anchor:end}
.ask-xlab text{text-anchor:middle}
.ask-area{fill:url(#ask-area)}
.ask-line{fill:none; stroke:var(--ask-blue); stroke-width:2.25; stroke-linejoin:round; stroke-linecap:round}
.ask-pts circle{fill:var(--ask-blue); stroke:#fff; stroke-width:2}
.ask-chart .ask-pts text{fill:var(--ask-ink); font-weight:600; font-size:9px}
.ask-figs{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:8px 0 0}
.ask-figs div{background:var(--ask-soft); border-radius:8px; padding:6px 9px}
.ask-figs dt{font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--ask-mute)}
.ask-figs dd{margin:1px 0 0; font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.ask-src{margin-top:9px; font-size:11px; color:var(--ask-faint)}
.ask-src span{color:var(--ask-blue); font-weight:500}

/* Tables (overspend, approvals, retention) */
.ask-table{width:100%; border-collapse:collapse; margin-top:6px; font-size:12.5px; font-variant-numeric:tabular-nums}
.ask-table th, .ask-table td{padding:7px 4px; border-bottom:1px solid var(--ask-line); text-align:right; white-space:nowrap}
.ask-table th:first-child{text-align:left; padding-left:0}
.ask-table td:last-child, .ask-table th:last-child{padding-right:0}
.ask-table thead th{font-family:'JetBrains Mono',monospace; font-size:9px; font-weight:400; letter-spacing:.08em; text-transform:uppercase; color:var(--ask-mute); padding-top:2px}
.ask-table tbody th{font-weight:500}
.ask-table tfoot th, .ask-table tfoot td{font-weight:650; border-bottom:0; padding-bottom:2px}
.ask-table .lnk{color:var(--ask-blue); text-decoration:underline; text-decoration-color:rgba(27,81,229,.35); text-underline-offset:3px}
.ask-table .neg{color:var(--ask-red); font-weight:600}
.ask-table .old{color:var(--ask-amber); font-weight:600}
.ask-counts{list-style:none; margin:0 0 4px; padding:0; display:flex; flex-wrap:wrap; gap:5px}
.ask-counts li{background:var(--ask-soft); border-radius:7px; padding:4px 8px; font-size:11.5px; color:var(--ask-mute)}
.ask-counts b{color:var(--ask-ink); font-weight:650; margin-right:4px}
/* approvals: the item column is text, not a figure */
.ask-table.is-list th:nth-child(2), .ask-table.is-list td:nth-child(2){text-align:left}

.ask-next{display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.ask-next .k{font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ask-faint); margin-right:2px}
.ask-next .c{font-size:12px; color:var(--ask-blue); background:#F4F7FF; border:1px solid #D5DFF5; border-radius:999px; padding:3px 10px}

/* Input */
.ask-input{display:flex; align-items:center; gap:2px; margin:8px 12px 12px; height:44px; padding:0 7px 0 13px; border:1px solid #D3DBE8; border-radius:12px; background:#fff; box-shadow:0 2px 6px -2px rgba(15,27,45,.08)}
.ask-input .t{flex:0 1 auto; min-width:0; overflow:hidden; white-space:nowrap; display:flex; font-size:13px; color:var(--ask-ink)}
.ask-app[data-state="typing"] .ask-input .t{justify-content:flex-end}
.ask-input .t:empty{flex:1 1 auto}
.ask-input .t:empty::before{content:attr(data-ph); color:var(--ask-faint); min-width:0; overflow:hidden; text-overflow:ellipsis}
.ask-input .caret{display:none; flex:none; width:1.5px; height:17px; background:var(--ask-blue)}
.ask-input .send{flex:none; margin-left:auto; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--ask-blue); color:#fff}

/* Example question chips under the mock */
.ask-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
.ask-chip{
  display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:7px 14px; border-radius:999px; cursor:pointer;
  font:inherit; font-size:13.5px; line-height:1.25; text-align:left; color:var(--ink-soft);
  background:rgba(255,255,255,.04); border:1px solid var(--line-2); transition:border-color .2s, background .2s, color .2s;
}
.ask-chip span{color:var(--ai-a)}
.ask-chip:hover{border-color:rgba(123,150,255,.55); background:rgba(123,150,255,.08); color:#fff}
.ask-chip[aria-pressed="true"]{border-color:rgba(123,150,255,.7); background:rgba(91,76,240,.24); color:#fff}
.ask-chip:focus-visible{outline:2px solid var(--ai-a); outline-offset:2px}
.ask-more{margin-top:14px; font-size:13px; line-height:1.6; color:var(--ink-dim)}
.ask-more span{color:var(--ink-mute)}

/* Sequence states (set by duo-ai.js) */
@media (min-width:601px){ .ask-app[data-state="idle"] .ask-panel{opacity:0; transform:translateX(40px)} }
.ask-app[data-state="idle"] .ask-q, .ask-app[data-state="typing"] .ask-q,
.ask-app[data-state="idle"] .ask-a, .ask-app[data-state="typing"] .ask-a, .ask-app[data-state="thinking"] .ask-a{display:none}
.ask-app[data-state="typing"] .ask-trigger{animation:ask-ring 1.4s ease-out 1}
.ask-app[data-state="typing"] .ask-input{border-color:var(--ask-blue); box-shadow:0 0 0 3px rgba(27,81,229,.14)}
.ask-app[data-state="typing"] .ask-input .caret{display:block; animation:ask-blink 1s steps(1) infinite}
.ask-app[data-state="thinking"] .ask-q{animation:ask-up .35s cubic-bezier(.2,.8,.2,1) both}
.ask-app[data-state="thinking"] .ask-thinking{display:flex; animation:ask-up .35s .1s ease both}
.ask-app[data-state="done"] .ask-a > *{animation:ask-up .5s cubic-bezier(.2,.8,.2,1) both}
.ask-app[data-state="done"] .ask-a > :nth-child(2){animation-delay:.12s}
.ask-app[data-state="done"] .ask-a > :nth-child(3){animation-delay:1.15s}
.ask-app[data-state="done"] .ask-line{animation:ask-draw 1.1s .4s cubic-bezier(.45,0,.25,1) both}
.ask-app[data-state="done"] .ask-area{animation:ask-fade .7s 1s ease both}
.ask-app[data-state="done"] .ask-pts{animation:ask-fade .4s 1.3s ease both}
.ask-app[data-state="done"] .ask-table tbody tr{animation:ask-up .4s cubic-bezier(.2,.8,.2,1) both}
.ask-app[data-state="done"] .ask-table tbody tr:nth-child(1){animation-delay:.3s}
.ask-app[data-state="done"] .ask-table tbody tr:nth-child(2){animation-delay:.42s}
.ask-app[data-state="done"] .ask-table tbody tr:nth-child(3){animation-delay:.54s}
.ask-app[data-state="done"] .ask-table tbody tr:nth-child(4){animation-delay:.66s}
@keyframes ask-up{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@keyframes ask-fade{from{opacity:0} to{opacity:1}}
@keyframes ask-draw{from{stroke-dasharray:1; stroke-dashoffset:1} to{stroke-dasharray:1; stroke-dashoffset:0}}
@keyframes ask-blink{0%{opacity:1} 50%{opacity:0}}
@keyframes ask-spark{0%,100%{transform:scale(.85) rotate(0); opacity:.7} 50%{transform:scale(1.15) rotate(45deg); opacity:1}}
@keyframes ask-dot{0%,100%{opacity:.25} 50%{opacity:1}}
@keyframes ask-ring{0%{box-shadow:0 0 0 0 rgba(27,81,229,.45)} 100%{box-shadow:0 0 0 10px rgba(27,81,229,0)}}

@media (max-width:1080px){
  .ask{grid-template-columns:minmax(0,1fr); gap:40px}
  .ask-copy{order:0}
}
@media (max-width:600px){
  .ask{margin-top:44px; padding-top:40px}
  .ask-title{font-size:30px}
  .ask-app{height:auto; border-radius:16px}
  .ask-page{display:none}
  .ask-panel{position:relative; top:auto; width:auto; border-left:0; box-shadow:none}
  .ask-thread{min-height:470px; padding:14px 12px 4px}
  .ask-crumb{display:none}
  .ask-figs dd{font-size:13px}
  .ask-chart text{font-size:10px}
  .ask-chart .ask-pts text{font-size:10.5px}
  .ask-figs div{padding:6px 7px}
  .ask-table{font-size:12px}
  .ask-table th, .ask-table td{padding:7px 3px}
  .ask-table thead th{white-space:normal; vertical-align:bottom; line-height:1.3}
  .ask-table tbody th{white-space:normal}
  .ask-input{margin:8px 10px 10px}
  .ask-chip{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .ask-panel{transition:none}
  .ask-thinking .s, .ask-thinking .dots i{animation:none}
}