/* /addy: Addy the orchestrator, a pinned scroll scene (Addy/Trace 2026-11-05).
   One request in, a team of agents out, results back in, one answer. GSAP + ScrollTrigger in addy-hero.js.
   Every selector is ad- namespaced so nothing here touches the rest of the site. */
.ad-runway{ position:relative; background:var(--ink-900,#1c1e1f); color:var(--text-on-dark,#fff); }
/* The scene runs up under the menu bar (Trace 11/5: "the header isn't transparent. It's dark gray at the top and then a
   gradient right under it"). On rail pages the header is in the flow, a 74px band of page grey above the scene; here it
   lifts out of the flow and floats over the scene's own background, still scrolling away with the page. */
body.has-rail .nav.nav2{ position:absolute!important; top:0!important; left:0; right:0; }   /* a static class, never :has() (nav2.css: root :has() flickered under GSAP 9/23) */
.ad-runway *, .ad-rail *, .ad-orch *{ box-sizing:border-box; }
.ad-stage{ position:relative; height:100vh; min-height:560px; overflow:hidden;
  background:
    radial-gradient(60vmax 44vmax at 50% 54%, rgba(58,67,173,.34), transparent 70%),
    radial-gradient(40vmax 30vmax at 22% 18%, rgba(154,63,193,.18), transparent 70%),
    radial-gradient(40vmax 30vmax at 80% 84%, rgba(76,209,244,.12), transparent 70%),
    var(--ink-900,#1c1e1f); }
.ad-stage::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:16vh; z-index:1; pointer-events:none;
  background:linear-gradient(transparent, var(--ink-900,#1c1e1f)); }
.ad-stage::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px); background-size:28px 28px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 55%, #000 30%, transparent 80%); mask-image:radial-gradient(70% 60% at 50% 55%, #000 30%, transparent 80%); }

/* the core */
.ad-core{ position:absolute; left:50%; top:54%; width:150px; height:150px; margin:-75px 0 0 -75px; z-index:5;
  border-radius:50%; display:grid; place-items:center; will-change:transform; }
.ad-core__ring{ position:absolute; inset:0; border-radius:50%; background:var(--grad-conic);
  animation:adSpin 9s linear infinite; filter:saturate(1.2); }
.ad-core__ring::after{ content:""; position:absolute; inset:5px; border-radius:50%; background:#17191a; }
.ad-core__glow{ position:absolute; inset:-60px; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(76,209,244,.42), rgba(58,67,173,.18) 55%, transparent 75%); opacity:.55; }
.ad-core__name{ position:relative; font-family:var(--font-head); font-weight:800; font-size:30px; letter-spacing:-.01em;
  background:var(--grad-bright); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ad-core__sub{ position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%); white-space:nowrap;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55); }
@keyframes adSpin{ to{ transform:rotate(360deg); } }

/* the request */
.ad-ask{ position:absolute; left:50%; top:calc(54% - 75px - 34px); z-index:6; transform:translate(-50%, -100%);
  max-width:min(560px, 86vw); padding:14px 20px; border-radius:18px 18px 18px 6px; background:#fff; color:#1c1e1f;
  font-size:clamp(15px,1.25vw,18px); line-height:1.45; box-shadow:0 18px 50px rgba(0,0,0,.35); }
.ad-ask b{ display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#5b6168; margin-bottom:4px; font-weight:600; }
.ad-ask__t{ display:block; }

/* links between the core and each agent */
.ad-links{ position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; overflow:visible; }
.ad-links line{ stroke:url(#adLinkGrad); stroke-width:1.6; stroke-dasharray:1; stroke-dashoffset:1; stroke-linecap:round; opacity:.9; }

/* the agents */
.ad-agent{ position:absolute; left:50%; top:54%; z-index:4; width:min(250px, 21vw); padding:14px 16px 16px;
  margin:0; border-radius:16px; background:rgba(35,37,38,.92); border:1px solid rgba(255,255,255,.10);
  box-shadow:0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  transform:translate(-50%,-50%) scale(.2); opacity:0; will-change:transform,opacity; }
.ad-agent__k{ display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#8fdcf3; font-weight:600; }
.ad-agent__k::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--accent,#4cd1f4); box-shadow:0 0 0 4px rgba(76,209,244,.16); }
.ad-agent__t{ margin:8px 0 12px; font-size:clamp(13px,1.05vw,15px); line-height:1.4; color:rgba(255,255,255,.9); }
.ad-agent__bar{ height:5px; border-radius:99px; background:rgba(255,255,255,.09); overflow:hidden; }
.ad-agent__bar i{ display:block; height:100%; width:100%; background:var(--grad); transform-origin:left; transform:scaleX(0); will-change:transform; }
.ad-agent__s{ position:relative; height:16px; margin-top:8px; font-size:12px; color:rgba(255,255,255,.55); }
.ad-agent__s span{ position:absolute; left:0; top:0; }
.ad-agent__s .ad-done{ opacity:0; color:#9df0c4; }

/* results travelling back */
.ad-dot{ position:absolute; left:50%; top:54%; width:12px; height:12px; margin:-6px 0 0 -6px; z-index:3; border-radius:50%;
  background:#fff; box-shadow:0 0 0 5px rgba(76,209,244,.25), 0 0 22px rgba(76,209,244,.9); opacity:0; will-change:transform,opacity; }

/* the answer */
.ad-answer{ position:absolute; left:50%; top:54%; z-index:7; width:min(620px, 88vw); transform:translate(-50%,-50%) translateY(40vh);
  opacity:0; padding:22px 24px; border-radius:20px; background:#fff; color:#1c1e1f; box-shadow:0 30px 80px rgba(0,0,0,.45); will-change:transform,opacity; }
.ad-answer__h{ display:flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#5b6168; font-weight:600; }
.ad-answer__h em{ font-style:normal; margin-left:auto; padding:3px 9px; border-radius:99px; background:#eef1f6; letter-spacing:.08em; }
.ad-answer__h strong{ font-family:var(--font-head); font-size:15px; letter-spacing:0; text-transform:none; color:#1c1e1f;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ad-answer p{ margin:10px 0 14px; font-size:clamp(15px,1.2vw,17px); line-height:1.6; color:#2a2d30; }
.ad-answer__ok{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding-top:14px; border-top:1px solid #e4e8f0; font-size:14px; color:#5b6168; }
.ad-answer__ok span{ flex:1 1 220px; }
.ad-answer__ok i{ font-style:normal; padding:8px 16px; border-radius:99px; font-weight:600; font-size:14px; }
.ad-answer__ok i:first-of-type{ background:var(--grad); color:#fff; }
.ad-answer__ok i:last-of-type{ border:1px solid #d5dae3; color:#2a2d30; }

/* the words */
.ad-beats{ position:absolute; left:0; right:0; top:calc(74px + max(7vh, 48px)); z-index:8; text-align:center; pointer-events:none; }
.ad-beat{ position:absolute; left:50%; top:0; width:min(900px, 90vw); transform:translateX(-50%); margin:0;
  font-family:var(--font-head); font-weight:800; font-size:clamp(28px,3.6vw,52px); line-height:1.08; letter-spacing:-.02em;
  color:#fff; opacity:0; will-change:opacity,transform; }
.ad-beat span{ background:var(--grad-bright); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ad-beat[data-b="1"]{ opacity:1; }
.ad-cue{ position:absolute; left:50%; bottom:4vh; z-index:8; transform:translateX(-50%); font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(255,255,255,.55); }
.ad-cue::after{ content:""; display:block; width:1px; height:34px; margin:10px auto 0; background:linear-gradient(rgba(255,255,255,.6), transparent);
  animation:adCue 1.8s ease-in-out infinite; }
@keyframes adCue{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* the finale: what scrolls away is a finished hero, not a stunt */
.ad-finale{ position:absolute; left:50%; top:auto; bottom:7vh; z-index:9; width:min(760px, 90vw); transform:translate(-50%, 6vh); opacity:0; text-align:center; }
.ad-finale h2{ margin:0 0 .4em; font-family:var(--font-head); font-weight:800; font-size:clamp(30px,3.4vw,50px); line-height:1.08; letter-spacing:-.02em; color:#fff; }
.ad-finale h2 span{ background:var(--grad-bright); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ad-finale p{ margin:0 auto 1.3em; max-width:600px; color:rgba(255,255,255,.74); font-size:clamp(15px,1.2vw,18px); line-height:1.6; }
.ad-finale a{ display:inline-block; padding:14px 28px; border-radius:99px; background:var(--grad); color:#fff; font-weight:600; text-decoration:none;
  box-shadow:0 14px 40px rgba(58,67,173,.45); pointer-events:auto; }
.ad-finale a + a{ margin-left:10px; background:transparent; border:1px solid rgba(255,255,255,.3); box-shadow:none; }

/* rail: the steps stay on screen while the copy explains them */
.ad-rail{ background:var(--ink-900,#1c1e1f); color:var(--text-on-dark,#fff); padding:6vh var(--gutter,24px) 12vh; }
.ad-rail__in{ max-width:var(--maxw,1200px); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:6vw; align-items:start; }
.ad-rail__media{ position:sticky; top:14vh; }
.ad-chat{ border-radius:22px; background:#232526; border:1px solid rgba(255,255,255,.08); padding:22px; box-shadow:0 30px 80px rgba(0,0,0,.35); }
.ad-chat__top{ display:flex; align-items:center; gap:10px; padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid rgba(255,255,255,.08);
  font-family:var(--font-head); font-weight:800; font-size:16px; }
.ad-chat__top::before{ content:""; width:26px; height:26px; border-radius:50%; background:var(--grad-conic); }
.ad-chat__me{ margin:0 0 16px auto; max-width:85%; padding:11px 15px; border-radius:16px 16px 4px 16px; background:var(--primary,#3a43ad); color:#fff; font-size:15px; line-height:1.45; width:fit-content; }
.ad-steps{ list-style:none; margin:0; padding:0; }
.ad-steps li{ display:flex; align-items:center; gap:10px; padding:9px 0; font-size:15px; color:rgba(255,255,255,.35); transition:color .35s ease; }
.ad-steps li::before{ content:""; flex:none; width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.2); transition:all .35s ease; }
.ad-steps li.on{ color:rgba(255,255,255,.92); }
.ad-steps li.on::before{ border-color:transparent; background:var(--grad); box-shadow:0 0 0 4px rgba(76,209,244,.14); }
.ad-chat__ok{ margin-top:14px; padding:14px; border-radius:14px; background:#fff; color:#2a2d30; font-size:14px; opacity:.25; transition:opacity .35s ease; }
.ad-chat__ok.on{ opacity:1; }
.ad-chat__ok b{ display:block; margin-bottom:8px; }
.ad-chat__ok i{ font-style:normal; display:inline-block; padding:6px 13px; margin-right:6px; border-radius:99px; font-weight:600; font-size:13px; }
.ad-chat__ok i:first-of-type{ background:var(--grad); color:#fff; }
.ad-chat__ok i:last-of-type{ border:1px solid #d5dae3; }
.ad-rail__copy section{ min-height:48vh; padding-top:6vh; }
.ad-rail__cta{ display:flex; flex-wrap:wrap; gap:12px 14px; padding:4vh 0 2vh; }
.ad-rail__copy h2{ margin:0 0 .5em; font-family:var(--font-head); font-weight:800; font-size:clamp(26px,2.6vw,40px); line-height:1.1; letter-spacing:-.02em; color:#fff; }
.ad-rail__copy p{ margin:0; color:#b7bfc6; font-size:clamp(15px,1.15vw,18px); line-height:1.7; max-width:34em; }

/* the orchestrator grid */
.ad-orch{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin-top:2.2rem; }
.ad-orch__c{ padding:22px; border-radius:var(--radius,18px); background:#fff; border:1px solid var(--line,#e4e8f0); box-shadow:0 10px 30px rgba(40,42,43,.06); }
.ad-orch__n{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--grad); color:#fff; font-weight:700; font-size:14px; }
.ad-orch__c h3{ margin:14px 0 8px; font-family:var(--font-head); font-size:18px; line-height:1.25; color:var(--ink,#282a2b); }
.ad-orch__c p{ margin:0; font-size:15px; line-height:1.6; color:var(--text-on-light-dim,#5b6168); }

@media (max-width: 999px){
  .ad-orch{ grid-template-columns:1fr 1fr; }
  .ad-rail__in{ grid-template-columns:1fr; gap:0; }
  .ad-rail__media{ top:0; z-index:2; padding:8vh 0 3vh; background:var(--ink-900,#1c1e1f); }
  .ad-rail__media::after{ content:""; position:absolute; left:0; right:0; top:100%; height:6vh; pointer-events:none;
    background:linear-gradient(var(--ink-900,#1c1e1f), transparent); }
  .ad-rail__copy section{ min-height:0; padding:5vh 0 2vh; }
}
@media (max-width: 799px){
  .ad-ask{ display:none; }
  .ad-core{ top:50%; width:112px; height:112px; margin:-56px 0 0 -56px; }
  .ad-core__name{ font-size:23px; }
  .ad-core__sub{ display:none; }
  .ad-agent, .ad-dot, .ad-answer{ top:50%; }
  .ad-agent{ width:42vw; padding:11px 12px 12px; }
  .ad-agent.ad-wide{ display:none; }
  .ad-agent__t{ margin:6px 0 9px; }
  .ad-agent__s{ display:none; }
  .ad-beats{ top:calc(73px + 8vh); }
  .ad-beat{ font-size:clamp(24px,7vw,34px); }
  .ad-rail__media{ position:relative; padding:4vh 0 2vh; }
  .ad-rail__media::after{ display:none; }
  .ad-finale a{ display:block; margin:0 auto 10px; max-width:280px; }
  .ad-finale a + a{ margin-left:auto; }
  .ad-orch{ grid-template-columns:1fr; }
  .ad-chat__me, .ad-steps li{ font-size:14px; }
  .ad-steps li{ padding:6px 0; }
}
/* Short screens: phones held sideways and short laptop windows. Four compact cards, no question bubble. */
@media (max-height: 620px){
  .ad-stage{ min-height:0; }
  .ad-ask{ display:none; }
  .ad-core{ top:56%; width:96px; height:96px; margin:-48px 0 0 -48px; }
  .ad-core__name{ font-size:20px; }
  .ad-core__sub{ display:none; }
  .ad-agent, .ad-dot, .ad-answer{ top:56%; }
  .ad-agent{ width:min(200px, 24vw); padding:9px 11px 11px; }
  .ad-agent.ad-wide{ display:none; }
  .ad-agent__t, .ad-agent__s{ display:none; }
  .ad-agent__k{ margin-bottom:8px; }
  .ad-beats{ top:calc(70px + 6vh); }
  .ad-beat{ font-size:clamp(20px, 3.2vw, 30px); }
  .ad-answer{ width:min(560px, 80vw); padding:16px 18px; }
  .ad-answer p{ font-size:14px; margin:6px 0 10px; }
  .ad-finale h2{ font-size:clamp(22px, 3vw, 34px); }
  .ad-finale p{ display:none; }
  .ad-finale a{ display:inline-block; margin:0 4px; max-width:none; padding:11px 22px; }
  .ad-finale a + a{ margin-left:4px; }
  .ad-cue{ display:none; }
}
/* No motion: the finished frame, nothing pinned. */
.ad-static .ad-stage{ height:auto; min-height:0; padding:calc(74px + 16vh) 0 10vh; }
.ad-static .ad-core, .ad-static .ad-ask, .ad-static .ad-links, .ad-static .ad-agent, .ad-static .ad-dot, .ad-static .ad-beats, .ad-static .ad-cue{ display:none; }
.ad-static .ad-answer{ position:relative; left:auto; top:auto; transform:none; opacity:1; margin:0 auto 6vh; }
.ad-static .ad-finale{ position:relative; left:auto; top:auto; bottom:auto; transform:none; opacity:1; margin:0 auto; }

/* "Answers, and the work behind them": the answer and the steps under it */
.ad-work{ border-radius:22px; padding:22px; background:linear-gradient(180deg,#2a2c2e,#232526); border:1px solid rgba(255,255,255,.09);
  box-shadow:0 30px 80px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06); color:#fff; max-width:560px; margin-left:auto; }
.ad-work__q{ margin:0 0 12px auto; width:fit-content; max-width:88%; padding:11px 15px; border-radius:16px 16px 4px 16px;
  background:var(--primary,#3a43ad); font-size:15px; line-height:1.45; }
.ad-work__a{ padding:14px 16px; border-radius:16px 16px 16px 4px; background:#fff; color:#2a2d30; font-size:15px; line-height:1.55; max-width:94%; }
.ad-work__a b{ display:block; margin-bottom:4px; font-family:var(--font-head); font-size:13px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ad-work__h{ display:flex; align-items:center; gap:10px; margin:20px 0 10px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); font-weight:600; }
.ad-work__h::after{ content:""; flex:1; height:1px; background:rgba(255,255,255,.1); }
.ad-work__h em{ order:2; font-style:normal; padding:3px 8px; border-radius:99px; background:rgba(255,255,255,.08); letter-spacing:.08em; }
.ad-work__l{ list-style:none; margin:0; padding:0 0 0 4px; position:relative; }
.ad-work__l::before{ content:""; position:absolute; left:11px; top:14px; bottom:14px; width:2px; background:linear-gradient(#4cd1f4,#3a43ad 60%,#9a3fc1); opacity:.5; }
.ad-work__l li{ position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:8px 0 8px 32px; font-size:14.5px; line-height:1.4; color:rgba(255,255,255,.88); }
.ad-work__l li::before{ content:""; position:absolute; left:4px; top:50%; width:16px; height:16px; margin-top:-8px; border-radius:50%;
  background:#232526; border:2px solid var(--accent,#4cd1f4); }
.ad-work__l li.d::before{ border:0; background:var(--grad); box-shadow:0 0 0 4px rgba(154,63,193,.18); }
.ad-work__l li.w::before{ border-color:var(--warm,#ffc861); box-shadow:0 0 0 4px rgba(255,200,97,.16); }
.ad-work__l li span{ flex:none; min-width:58px; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:#8fdcf3; }
.ad-work__l li.d span{ color:#c9a6f0; }
.ad-work__l li.w span{ color:var(--warm,#ffc861); }
.ad-work__l li i{ font-style:normal; padding:5px 12px; border-radius:99px; font-size:12.5px; font-weight:600; }
.ad-work__l li i:first-of-type{ margin-left:auto; background:var(--grad); color:#fff; }
.ad-work__l li i:last-of-type{ border:1px solid rgba(255,255,255,.25); color:#fff; }
.ad-work__f{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.08); }
.ad-work__f span{ padding:6px 11px; border-radius:99px; background:rgba(76,209,244,.08); border:1px solid rgba(76,209,244,.22); font-size:12px; color:rgba(255,255,255,.8); }
@media (max-width: 999px){ .ad-work{ margin:0 auto; } }
@media (max-width: 600px){
  .ad-work__l li{ display:block; padding:6px 0 8px 30px; }
  .ad-work__l li span{ display:block; margin-bottom:3px; }
  .ad-work__l li::before{ top:8px; margin-top:0; }
  .ad-work__l li i{ display:inline-block; margin:8px 6px 0 0; }
  .ad-work__l li i:first-of-type{ margin-left:10px; }
}
@media (max-width: 420px){
  .ad-work{ padding:16px; border-radius:18px; }
  .ad-work__q, .ad-work__a{ font-size:14px; max-width:100%; }
  .ad-work__l li{ font-size:13.5px; padding-left:28px; }
}

/* real dashboard screenshots (Ask TruLata tab, demo account) */
.ad-shotfig{ margin:0; max-width:620px; margin-left:auto; }
.ad-shot{ border-radius:20px; padding:10px; background:#fff; border:1px solid rgba(255,255,255,.12); box-shadow:0 30px 80px rgba(0,0,0,.4); }
.ad-shot img{ display:block; width:100%; height:auto; border-radius:12px; transition:opacity .18s ease; }
.ad-shotfig figcaption{ margin-top:10px; font-size:13px; color:rgba(255,255,255,.6); text-align:center; }
@media (max-width: 999px){ .ad-shotfig{ margin:0 auto; } }

/* Scroll cue inside the screen you can see (Trace 11/6, phone: "the scroll thing isn't visible at the bottom ... looks like
   the page is just loading incomplete"). The stage is 100vh, which on iPhone Safari is the height with the toolbars hidden,
   so a cue 4vh from its bottom sat behind the bottom toolbar. Lift it by the toolbar's height (100vh - 100svh). */
@supports (height:100svh){ .ad-stage .ad-cue{ bottom:calc(4svh + (100vh - 100svh) + env(safe-area-inset-bottom,0px)); } }