/* agent-hero-strip.css — light comic-strip hero for the Agent page.
   Generated from feature_design/agent-hero-comic-integration-v1/source (site-hero.css + strip-core.css); edit there and rebuild. */
.agent-marketing-home .hero.hero-strip{--ink:#17151c;--muted:#706a79;--purple:#7946ee;--accent:#7443e9;--page:#fff;--line:#e7e1ec;--cta:#18151e;--cta-text:#fff;--frame:#f8f5fa;--frame-border:#251a31;--frame-active:#d6b9f6;--frame-active-border:#9561cc;--frame-ring:transparent;--cap-bg:#fff;--cap-ink:#101010;--cap-border:#251a31;--cap-active-bg:#613a8e;--cap-active-ink:#fff;--cap-active-border:#613a8e;--bd-base:#f6f2fa;--bd-base-cool:#eff4f5;--bd-line:#6b5287;--bd-line-cool:#4f6f79;--bd-field:#b7a0cf;--bd-glow:#d9c8ea;--bd-spark:#8a6fa6;--bd-tint-alpha:.12;--wash:#f6f2fa;--scene-duration:6s;position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;min-height:100svh;padding:calc(var(--header-height) + 56px) 0 104px;border-bottom:0;background:var(--page);color:var(--ink);color-scheme:light;text-align:center;overflow:hidden}
.agent-marketing-home .hero.hero-strip::before{display:none}
.agent-marketing-home .hero-strip .hero-copy{max-width:1100px;margin:0 auto;padding:0 30px}
.agent-marketing-home .hero.hero-strip h1{max-width:none;margin:0 auto;color:var(--ink);font-size:clamp(38px,3.75vw,58px);line-height:1.24;letter-spacing:-.045em;font-weight:540}
.agent-marketing-home .hero.hero-strip h1 span{color:var(--accent)}
.agent-marketing-home .hero.hero-strip h1 .title-tail{color:inherit;white-space:nowrap}
.agent-marketing-home .hero-strip .lead{max-width:760px;margin:30px auto 34px;color:var(--muted);font-size:15px;line-height:1.9}
.agent-marketing-home .hero-strip .cta{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:13px 32px;border-radius:100px;background:var(--cta);color:var(--cta-text);font-size:15px;line-height:1;text-decoration:none;transition:transform .2s}
.agent-marketing-home .hero-strip .cta:hover{transform:translateY(-2px)}
.agent-marketing-home .hero-strip .cta svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.agent-marketing-home .hero-strip .strip-track{width:100%}
.agent-marketing-home .hero-strip .motion-panel{color:#101010}
.agent-marketing-home .hero-strip button:focus-visible,.agent-marketing-home .hero-strip a:focus-visible{outline:3px solid var(--purple);outline-offset:5px}
/* Light hero (not scrolled): match /blog — #34343a idle, #5e4ad6 active/hover. */
.agent-marketing-home .site-header:not(.is-scrolled){color:#34343a;--mobile-nav-ink:#34343a}
.agent-marketing-home .site-header:not(.is-scrolled) .brand-mark{filter:none}
.agent-marketing-home .site-header:not(.is-scrolled) .brand-wordmark{filter:brightness(0);opacity:1}
.agent-marketing-home .site-header:not(.is-scrolled) .official-nav a{color:#34343a;font-weight:650}
.agent-marketing-home .site-header:not(.is-scrolled) .official-nav a:hover,.agent-marketing-home .site-header:not(.is-scrolled) .official-nav a:focus-visible,.agent-marketing-home .site-header:not(.is-scrolled) .official-nav a[aria-current="page"]{color:#5e4ad6}
@media(min-width:1600px){.agent-marketing-home .hero.hero-strip{padding-top:calc(var(--header-height) + 80px)}}
@media(max-width:980px){.agent-marketing-home .hero.hero-strip h1{font-size:43px}}
@media(max-width:600px){html[lang="en"] .agent-marketing-home .hero.hero-strip h1 br{display:none}.agent-marketing-home .hero.hero-strip{min-height:0;padding:calc(var(--header-height) + 34px) 0 64px}.agent-marketing-home .hero.hero-strip h1{font-size:clamp(31px,7.5vw,43px);line-height:1.28}.agent-marketing-home .hero-strip .hero-copy{text-align:left;padding:0 24px}.agent-marketing-home .hero-strip .lead{font-size:14px;line-height:1.85;margin:23px 0 25px}}
@media(prefers-reduced-motion:reduce){.agent-marketing-home .hero-strip *,.agent-marketing-home .hero-strip *::before,.agent-marketing-home .hero-strip *::after{transition:none!important;scroll-behavior:auto!important}}
.strip-track{display:flex;width:100%;box-sizing:border-box;gap:10px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding:12px 28px 18px;margin:56px auto 0;scrollbar-width:none}.strip-track::-webkit-scrollbar{display:none}.strip-frame{flex:0 0 max(252px,calc((100vw - 112px)/6));aspect-ratio:630/390}.strip-frame .panel-caption{font-size:12px;padding:5px 9px;border-width:1.5px}
.motion-panel{position:relative;display:block;min-width:0;min-height:0;padding:0;border:2px solid var(--frame-border);background:var(--frame);color:#101010;text-align:left;overflow:hidden;isolation:isolate;transition:background-color .45s,border-color .3s,box-shadow .3s;appearance:none}.motion-panel.is-active{background:var(--frame-active);border-color:var(--frame-active-border);box-shadow:inset 0 0 0 1px var(--frame-ring)}.motion-panel:hover{border-color:var(--frame-active-border)}/* Focus: every frame except the current one sits under a paper/ink wash, so the playing frame carries the full contrast. */.motion-panel::after{content:"";position:absolute;inset:0;z-index:1;background:var(--wash);opacity:.5;pointer-events:none;transition:opacity .45s}.motion-panel.is-active::after{opacity:0}.motion-panel.is-active .motion-scene{filter:contrast(1.06) saturate(1.08)}.motion-scene{position:relative;z-index:1;display:block;width:100%;height:100%;overflow:hidden;pointer-events:none}.panel-caption{position:absolute;z-index:2;left:-1px;top:-1px;padding:7px 12px;border:2px solid var(--cap-border);background:var(--cap-bg);color:var(--cap-ink);font-size:14px;line-height:1.1;letter-spacing:-.015em;font-weight:750;white-space:nowrap;transition:background-color .3s,color .3s,border-color .3s}.motion-panel.is-active .panel-caption{background:var(--cap-active-bg);border-color:var(--cap-active-border);color:var(--cap-active-ink)}
/* Backdrops: static narrative fields behind each frame (rings / grid / rays / coordinates / hatching / stars). */
.scene-backdrop{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;pointer-events:none}.bd-base{fill:var(--bd-base)}.bd-line{stroke:var(--bd-line)}.bd-field{fill:var(--bd-field)}.bd-glow{fill:var(--bd-glow)}.bd-glow-line{stroke:var(--bd-glow);fill:none}.bd-spark{fill:var(--bd-spark)}.bd-spark-line{stroke:var(--bd-spark);fill:none}.bd-dot{fill:var(--bd-line-cool)}.backdrop-4 .bd-base{fill:var(--bd-base-cool)}.backdrop-4 .bd-line{stroke:var(--bd-line-cool)}.bd-tint{fill:#8651ba;opacity:0;transition:opacity .45s}.motion-panel.is-active .bd-tint{opacity:var(--bd-tint-alpha)}
[data-backdrop="none"] .scene-backdrop{display:none}[data-backdrop="lines"] .bd-field,[data-backdrop="lines"] .bd-glow{display:none}
/* Robot eyes: off-white lens, large lit brand-purple iris with a glint; outer corners lifted a few degrees. */
/* Night print: on the dark theme the near-black shapes get a lighter ink rim so the robot and the sandbox separate from the backdrop. */
.robot-eyes{stroke:none}.eye-lens{fill:#f4f1fa}.robot-cores{fill:#7946ee}.eye-glint{fill:#fff;opacity:.92}
[class^="scene-"]{transform-box:fill-box;transform-origin:center}.scene-1-type-a,.scene-1-type-b{transform-origin:left center}.scene-1-sent,.scene-3-confirm{opacity:0}.scene-3-check{stroke-dasharray:1;stroke-dashoffset:0}
.motion-panel.is-active .scene-3-confirm{animation:comicSignal var(--scene-duration) ease-in-out both}
.motion-panel.is-active .scene-2-card-a{animation:comicSortA var(--scene-duration) ease-in-out both}.motion-panel.is-active .scene-2-card-b{animation:comicSortB var(--scene-duration) ease-in-out both}.motion-panel.is-active .scene-2-card-c{animation:comicSortC var(--scene-duration) ease-in-out both}.motion-panel.is-active .scene-3-alternative{animation:comicAlternative var(--scene-duration) ease-in-out both}.motion-panel.is-active .scene-3-check{animation:comicCheck var(--scene-duration) ease-in-out both}.motion-panel.is-active .scene-3-selected{animation:comicSelect var(--scene-duration) ease-in-out both}
/* Eye beats: scene 2 blinks once and glances at the arriving card; scene 3 scans the options, blinks once, then settles on the chosen one. */
.motion-panel.is-active .scene-2-eyes{animation:comicBlink var(--scene-duration) ease-in-out both}.motion-panel.is-active .scene-2-cores{animation:robotGlance var(--scene-duration) ease-in-out both}.motion-panel.is-active .scene-3-eyes{animation:robotBlinkLate var(--scene-duration) ease-in-out both}.motion-panel.is-active .scene-3-cores{animation:robotScan var(--scene-duration) ease-in-out both,robotInsight var(--scene-duration) ease-in-out both}
@keyframes comicSignal{0%,44%,100%{opacity:0}50%,74%{opacity:1}89%{opacity:0}}@keyframes comicSortA{0%,9%{transform:translate(16px,-14px) rotate(4deg)}34%,100%{transform:translate(0,0) rotate(0)}}@keyframes comicSortB{0%,14%{transform:translate(-10px,6px) rotate(-3deg)}42%,100%{transform:translate(0,0) rotate(0)}}@keyframes comicSortC{0%,19%{transform:translate(6px,10px)}50%,100%{transform:translate(0,0)}}@keyframes comicBlink{0%,47%,53%,100%{transform:scaleY(1)}49%,51%{transform:scaleY(.12)}}@keyframes comicAlternative{0%,25%{opacity:1}45%,100%{opacity:.35}}@keyframes comicCheck{0%,29%{stroke-dashoffset:1;opacity:0}33%{opacity:1}48%,100%{stroke-dashoffset:0;opacity:1}}@keyframes comicSelect{0%,17%{transform:translateY(5px)}40%,100%{transform:translateY(-3px)}}
@keyframes robotGlance{0%,8%{transform:translate(3px,-3px)}36%,100%{transform:translate(0,0)}}@keyframes robotBlinkLate{0%,40%,46%,100%{transform:scaleY(1)}42%,44%{transform:scaleY(.1)}}@keyframes robotScan{0%,10%{transform:translate(7px,1px)}22%,38%{transform:translate(-8px,4px)}50%,100%{transform:translate(0,2px)}}@keyframes robotInsight{0%,27%,37%,100%{fill:#7946ee}31%{fill:#b39cf6}}
.scene-4-thumb,.scene-4-selected,.scene-4-check,.scene-5-card,.scene-5-progress-a,.scene-5-progress-b,.scene-5-progress-c,.scene-6-plot-a,.scene-6-plot-b,.scene-6-points,.scene-6-footnote-a,.scene-6-footnote-b{transform-box:fill-box;transform-origin:center}.scene-4-check,.scene-6-plot-a,.scene-6-plot-b{stroke-dasharray:1;stroke-dashoffset:0}.scene-6-footnote-a,.scene-6-footnote-b{transform-origin:left center}
.motion-panel.is-active .scene-4-thumb{animation:contentFilter var(--scene-duration) ease-in-out both}.motion-panel.is-active .scene-4-selected{animation:contentHighlight var(--scene-duration) ease-in-out both}.motion-panel.is-active .scene-4-check{animation:contentCheck var(--scene-duration) ease-in-out both}.motion-panel.is-active .scene-5-card{animation:contentInsert var(--scene-duration) ease-in-out both}.motion-panel.is-active .scene-5-progress-a{animation:contentProgressA var(--scene-duration) ease-in-out both}.motion-panel.is-active .scene-5-progress-b{animation:contentProgressB var(--scene-duration) ease-in-out both}.motion-panel.is-active .scene-5-progress-c{animation:contentProgressC var(--scene-duration) ease-in-out both}.motion-panel.is-active .scene-6-plot-a{animation:contentPlotA var(--scene-duration) ease-in-out both}.motion-panel.is-active .scene-6-plot-b{animation:contentPlotB var(--scene-duration) ease-in-out both}.motion-panel.is-active .scene-6-points{animation:contentPoints var(--scene-duration) ease-in-out both}.motion-panel.is-active .scene-6-footnote-a{animation:contentFootnoteA var(--scene-duration) ease-in-out both}.motion-panel.is-active .scene-6-footnote-b{animation:contentFootnoteB var(--scene-duration) ease-in-out both}
@keyframes contentFilter{0%,8%{transform:translateX(-74px)}34%,100%{transform:translateX(0)}}@keyframes contentHighlight{0%,22%{opacity:0}39%,100%{opacity:1}}@keyframes contentCheck{0%,29%{stroke-dashoffset:1;opacity:0}32%{opacity:1}48%,100%{stroke-dashoffset:0;opacity:1}}@keyframes contentInsert{0%,9%{transform:translateY(-10px)}41%,100%{transform:translateY(116px)}}@keyframes contentProgressA{0%,34%{fill:#b9b9b7}45%,100%{fill:#7946ee}}@keyframes contentProgressB{0%,49%{fill:#b9b9b7}60%,100%{fill:#7946ee}}@keyframes contentProgressC{0%,64%{fill:#b9b9b7}75%,100%{fill:#7946ee}}@keyframes contentPlotA{0%,6%{stroke-dashoffset:1}41%,100%{stroke-dashoffset:0}}@keyframes contentPlotB{0%,20%{stroke-dashoffset:1}55%,100%{stroke-dashoffset:0}}@keyframes contentPoints{0%,46%{opacity:0}61%,100%{opacity:1}}@keyframes contentFootnoteA{0%,58%{transform:scaleX(.04);opacity:0}73%,100%{transform:scaleX(1);opacity:1}}@keyframes contentFootnoteB{0%,65%{transform:scaleX(.04);opacity:0}79%,100%{transform:scaleX(1);opacity:1}}
.scene-1-type-a,.scene-1-type-b,.scene-1-caret,.scene-1-send-button,.scene-1-send,.scene-1-sent{transform-box:fill-box;transform-origin:center}.scene-1-type-a,.scene-1-type-b{transform-origin:left center}
.motion-panel.is-active .scene-1-type-a{animation:questionTypeA var(--scene-duration) ease-in-out both}.motion-panel.is-active .scene-1-type-b{animation:questionTypeB var(--scene-duration) ease-in-out both}.motion-panel.is-active .scene-1-caret{animation:questionCaret var(--scene-duration) step-end both}.motion-panel.is-active .scene-1-send-button{animation:questionPress var(--scene-duration) ease-in-out both}.motion-panel.is-active .scene-1-send{animation:questionSend var(--scene-duration) ease-in-out both}.motion-panel.is-active .scene-1-sent{animation:questionSent var(--scene-duration) ease-in-out both}
@keyframes questionTypeA{0%,4%{transform:scaleX(.04);opacity:.35}25%,100%{transform:scaleX(1);opacity:1}}@keyframes questionTypeB{0%,11%{transform:scaleX(.04);opacity:.35}32%,100%{transform:scaleX(1);opacity:1}}@keyframes questionCaret{0%,6%,14%,22%,30%{opacity:1}3%,10%,18%,26%{opacity:0}35%,100%{opacity:1}}@keyframes questionPress{0%,35%,53%,100%{transform:scale(1)}42%{transform:scale(.92)}48%{transform:scale(1.035)}}@keyframes questionSend{0%,39%,59%,100%{transform:translateX(0)}47%,51%{transform:translateX(4px)}}@keyframes questionSent{0%,44%{opacity:0}50%,65%{opacity:1}77%,100%{opacity:0}}
/* Paused / hidden: freeze; static panels show the finished drawing. Only animated (scene-*) nodes are reset so the eyes keep their attribute transforms. */
[data-motion="paused"] .motion-scene *,[data-suspended="true"] .motion-scene *{animation-play-state:paused!important}.motion-panel.is-static .motion-scene [class*="scene-"]{animation:none!important;transform:none!important;stroke-dashoffset:0!important;opacity:1!important}.motion-panel.is-static .scene-1-sent,.motion-panel.is-static .scene-3-confirm{opacity:0!important}
@media(min-width:1600px){.strip-track{margin-top:72px}}
@media(max-width:600px){.strip-track{padding-left:24px;padding-right:24px;margin-top:40px}.strip-frame{flex-basis:min(82vw,340px)}.strip-frame .panel-caption{font-size:13px}.motion-panel{border-width:1.5px}.panel-caption{font-size:10px;padding:4px 6px;border-width:1.5px}}