/* ─────────────────────────────────────────────────────────────────────────────
   Try AI — the one public page about the demos.

   Each demo is one self-contained widget: a coloured band carrying the badge, the
   name, the sentence and the capability; the mechanism inside a hairline rather
   than a second card; and the way in at the foot. The page wraps a widget in
   nothing at all — that is the only way the demo's name does not appear twice.

   The mechanism diagrams are absolutely positioned inside a fixed-size stage,
   because an arrow's numbers come from the boxes' pixel positions and a flex child
   has none. The stage scrolls sideways on a narrow screen rather than shrinking:
   these stop being readable long before they stop fitting.
   ───────────────────────────────────────────────────────────────────────────── */

.tryai-hero{padding:72px 0 0;}
.tryai-hero-grid{display:flex;flex-wrap:wrap;gap:56px;align-items:flex-start;}
.tryai-hero-words{flex:999 1 540px;min-width:0;}
.tryai-hero h1{font-size:clamp(34px,5vw,54px);line-height:1.08;letter-spacing:-.02em;margin:18px 0 0;}
.tryai-hero .lead{max-width:620px;}
.tryai-trust{margin-top:26px;display:flex;flex-wrap:wrap;gap:6px 30px;font-size:13.5px;color:var(--muted);}

.tryai-proof{flex:1 1 360px;min-width:300px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--shadow);}
.tryai-proof .pf-ey{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.tryai-proof .pf-q{margin-top:14px;padding:12px 15px;font-size:14px;background:var(--paper);border-radius:10px;}
.tryai-proof .pf-search{margin-top:14px;display:flex;gap:7px;align-items:center;font-size:12.5px;color:var(--muted);}
.tryai-proof .pf-search i{width:8px;height:8px;border-radius:50%;background:#1d4ed8;animation:taBlip 2.2s ease-in-out infinite;}
.tryai-proof .pf-search i:nth-child(2){background:#0e7490;animation-delay:.4s;}
.tryai-proof .pf-search i:nth-child(3){animation-delay:.8s;}
.tryai-proof .pf-a{margin-top:14px;font-size:14.5px;line-height:1.6;color:var(--ink);}
.tryai-proof .pf-cite{display:inline-block;margin-top:14px;padding:4px 11px;font-size:11.5px;font-weight:600;color:#0e7490;background:#e2f3f0;border-radius:999px;}
.tryai-proof .pf-note{margin-top:14px;font-size:12.5px;line-height:1.5;color:var(--muted);}

/* ── the widget ── */
.widget{max-width:1200px;margin:0 auto;padding:40px 24px 0;}
.wg{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);}
.wg-band{padding:28px 40px 24px;color:#fff;}
.wg-badge{display:inline-block;padding:5px 12px;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.34);border-radius:999px;}
.wg-band h2{margin:16px 0 0;font-size:clamp(26px,3.4vw,38px);font-weight:600;letter-spacing:-.015em;color:#fff;}
.wg-band p{margin:14px 0 0;font-size:15.5px;line-height:1.48;color:rgba(255,255,255,.88);}
.wg-cap{display:block;margin-top:18px;text-align:right;font-size:14px;font-weight:800;letter-spacing:.03em;color:#fff;}

.wg-stage{margin:24px 32px;border:1px solid var(--line);border-radius:12px;background:#fcfbf8;overflow-x:auto;}
.wg-diagram{position:relative;margin:0 auto;}

.wg-foot{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;padding:0 40px 32px;}
.wg-foot .btn{border:none;}
.wg-foot .wg-or{font-size:15px;font-weight:600;text-decoration:none;}
.wg-foot .wg-note{flex-basis:100%;font-size:13px;color:var(--muted);}
@media (min-width:900px){.wg-foot .wg-note{flex-basis:auto;margin-left:auto;}}

/* ── pieces every diagram uses ── */
.wg-diagram .lbl{position:absolute;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.wg-diagram .box{position:absolute;box-sizing:border-box;padding:14px;display:flex;flex-direction:column;justify-content:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:10px;}
.wg-diagram .box b{font-size:15px;font-weight:600;color:var(--ink);}
.wg-diagram .box span{font-size:12.5px;line-height:1.35;color:var(--muted);}
.wg-diagram .cap{position:absolute;font-size:12.5px;line-height:17px;color:var(--muted);}
.wg-diagram .claim{position:absolute;box-sizing:border-box;padding:0 18px;display:flex;align-items:center;font-size:14px;color:var(--body);border-radius:0 10px 10px 0;}

/* the travelling dash: one rule, every arrow, nothing in the markup */
.wg-diagram svg path[marker-end]{stroke-dasharray:9 11;animation:taDash 1.5s linear infinite;}
@keyframes taDash{to{stroke-dashoffset:-20}}
@keyframes taBlip{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes taPulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.6);opacity:1}}
@keyframes taScan{0%{transform:translateY(0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateY(92px);opacity:0}}
@keyframes taCut{0%{width:0;opacity:0}18%{opacity:1}100%{opacity:1}}
@keyframes taGlow{0%,100%{box-shadow:0 0 0 0 rgba(14,116,144,0)}50%{box-shadow:0 0 0 5px rgba(14,116,144,.14)}}
@keyframes taFound{0%,100%{box-shadow:0 0 0 0 rgba(138,28,19,0)}45%{box-shadow:0 0 0 4px rgba(138,28,19,.2)}}
@keyframes taToken{0%,100%{box-shadow:0 0 0 0 rgba(15,118,110,0)}45%{box-shadow:0 0 0 4px rgba(15,118,110,.2)}}
@keyframes taBarrier{to{stroke-dashoffset:-28}}
@keyframes taSettle{0%{opacity:.25;transform:translateY(3px)}22%,100%{opacity:1;transform:translateY(0)}}
@keyframes taFlag{0%,100%{box-shadow:0 0 0 0 rgba(180,83,9,.35)}50%{box-shadow:0 0 0 6px rgba(180,83,9,0)}}
@keyframes taCaret{0%,48%{opacity:1}49%,100%{opacity:0}}
@keyframes taRan{0%,68%{opacity:0}80%,100%{opacity:1}}
@keyframes taGrow{0%{transform:scaleY(.08)}55%,100%{transform:scaleY(1)}}
@keyframes taTalk{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@keyframes taOut{0%{opacity:.2}35%{opacity:1}70%,100%{opacity:.2}}
@keyframes taIn{0%,45%{opacity:.2}80%{opacity:1}100%{opacity:.2}}
@keyframes taHop{0%,100%{background:#efece4;color:#8b8598}16%{background:#e2dcd0;color:#6b6577}}
@keyframes taDrift{from{transform:translateX(-10px);opacity:.45}to{transform:translateX(0);opacity:1}}
@keyframes taArrive{0%,100%{opacity:.5}20%{opacity:1}}
@keyframes taFill{0%{transform:scaleX(0)}55%,100%{transform:scaleX(1)}}
@keyframes taLand{0%,60%{opacity:.3}75%,100%{opacity:1}}
@keyframes taCount{0%{opacity:.35}100%{opacity:1}}

/* The class names come straight from the design canvas, scoped to the stage so that
   generic ones (.bar, .strip, .in, .out, .v) cannot reach anything else on the site. */
.wg-diagram .drift{animation:taDrift 2.4s ease-in-out infinite alternate;}
.wg-diagram .hit{animation:taPulse 1.8s ease-in-out infinite;}
.wg-diagram .hit2{animation-delay:.3s}.wg-diagram .hit3{animation-delay:.6s}
.wg-diagram .scan{animation:taScan 2.8s ease-in-out infinite;}
.wg-diagram .strip{animation:taCut 3.2s ease-out infinite;}
.wg-diagram .strip2{animation-delay:.35s}.wg-diagram .strip3{animation-delay:.7s}
.wg-diagram .cite{animation:taGlow 2.6s ease-in-out infinite;}
.wg-diagram .found{animation:taFound 3.2s ease-in-out infinite;}
.wg-diagram .tok{animation:taToken 3.2s ease-in-out infinite;}
.wg-diagram .f2,.wg-diagram .t2{animation-delay:.45s}
.wg-diagram .f3,.wg-diagram .t3{animation-delay:.9s}
.wg-diagram .barrier{animation:taBarrier 2.4s linear infinite;}
.wg-diagram .travel{animation:taOut 3s ease-in-out infinite;}
.wg-diagram .swap{animation:taBlip 4s ease-in-out infinite;}
.wg-diagram .chip{animation:taSettle 3.6s ease-out infinite;}
.wg-diagram .c2{animation-delay:.3s}.wg-diagram .c3{animation-delay:.6s}
.wg-diagram .needsettle{animation:taSettle 3.6s ease-out infinite,taFlag 2.4s ease-in-out infinite;animation-delay:.9s,.9s;}
.wg-diagram .caret{animation:taCaret 1s step-end infinite;}
.wg-diagram .ran{animation:taRan 3.6s ease-out infinite;}
.wg-diagram .bar{transform-origin:bottom;animation:taGrow 3.6s ease-out infinite;}
.wg-diagram .b2{animation-delay:.18s}.wg-diagram .b3{animation-delay:.36s}.wg-diagram .b4{animation-delay:.54s}
.wg-diagram .v{transform-origin:center;animation:taTalk 1.1s ease-in-out infinite;}
.wg-diagram .v2{animation-delay:.15s}.wg-diagram .v3{animation-delay:.3s}.wg-diagram .v4{animation-delay:.45s}
.wg-diagram .v5{animation-delay:.6s}.wg-diagram .v6{animation-delay:.22s}.wg-diagram .v7{animation-delay:.38s}
.wg-diagram .out{animation:taOut 3s ease-in-out infinite;}
.wg-diagram .in{animation:taIn 3s ease-in-out infinite;}
.wg-diagram .hop{animation:taHop 3.4s ease-in-out infinite;}
.wg-diagram .h2{animation-delay:.34s}.wg-diagram .h3{animation-delay:.68s}
.wg-diagram .h4{animation-delay:1.02s}.wg-diagram .h5{animation-delay:1.36s}
.wg-diagram .src{animation:taArrive 3.6s ease-in-out infinite;}
.wg-diagram .s2{animation-delay:.25s}.wg-diagram .s3{animation-delay:.5s}.wg-diagram .s4{animation-delay:.75s}
.wg-diagram .conf{transform-origin:left;animation:taFill 3.6s ease-out infinite;}
.wg-diagram .k2{animation-delay:.3s}.wg-diagram .k3{animation-delay:.6s}
.wg-diagram .landed{animation:taLand 3.6s ease-out infinite;}
.wg-diagram .tick{animation:taCount 2.2s ease-in-out infinite alternate;}

/* The greyed four-hop pipeline must NOT flow: half the point of drawing it is that the
   live path below is the only one carrying anything. */
.wg-diagram svg.still path[marker-end]{stroke-dasharray:none;animation:none;}

@media (prefers-reduced-motion:reduce){
  .wg-diagram svg path[marker-end]{stroke-dasharray:none;animation:none;}
  .wg-diagram [class],.tryai-proof .pf-search i{animation:none;opacity:1;}
}

/* ── why an account ── */
.tryai-why{margin-top:88px;background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:64px 0;}
.tryai-why-grid{margin-top:32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;}
.tryai-why-grid b{display:block;font-size:15px;color:var(--ink);}
.tryai-why-grid p{margin:8px 0 0;font-size:14.5px;line-height:1.6;}

/* ── ask for the next one ── */
.tryai-next{padding:64px 0 0;}
.tryai-next-card{display:flex;flex-wrap:wrap;gap:28px 48px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:32px 36px;}
.tryai-next-words{flex:999 1 420px;min-width:0;}
.tryai-next-words p{margin:12px 0 0;font-size:16px;line-height:1.6;}
.tryai-next-cta{flex:1 1 240px;}

/* On a phone the widget's own padding was eating a sixth of the width. The stage keeps
   its inset so the hairline still reads as a frame, but everything else tightens. */
@media (max-width:620px){
  .widget{padding:28px 14px 0;}
  .wg-band{padding:22px 20px 20px;}
  .wg-band p{font-size:15px;}
  .wg-cap{margin-top:14px;}
  .wg-stage{margin:18px 14px;}
  .wg-foot{padding:0 20px 26px;}
  .tryai-hero{padding:40px 0 0;}
  .tryai-why{margin-top:56px;padding:48px 0;}
  .tryai-next-card{padding:24px 22px;}
}

/* ── asking for access ── */
.tryai-ask{margin-top:36px;max-width:620px;}
.tryai-ask-form{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:26px 28px;}
.tryai-ask-form .ask-row{display:flex;flex-wrap:wrap;gap:16px;}
.tryai-ask-form .ask-row .field{flex:1 1 200px;min-width:0;}
.tryai-ask-form .field{margin-bottom:16px;}
.tryai-ask-form label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:6px;}
.tryai-ask-form input{width:100%;box-sizing:border-box;padding:12px 14px;font-family:inherit;font-size:15px;color:var(--body);background:#fff;border:1px solid var(--line);border-radius:10px;}
.tryai-ask-form input:focus{outline:2px solid var(--purple);outline-offset:1px;border-color:var(--purple);}
/* The honeypot: out of the layout and out of the accessibility tree, but still a real
   field a bot will fill in. Not display:none — some bots skip those. */
.tryai-ask-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}