/* Local design preview: Cypon framing; Magic light/material; Vertex card layers.
   Geometry and scripts of the existing animated companion remain unchanged. */
:root{--preview-rule:#d8cde7;--preview-soft:#faf8fd}
body{background:#fff}
.header{border:1px solid var(--preview-rule);background:#fff;gap:22px}
.header>.brand{margin-left:24px}
.header nav{height:100%;gap:0}
.header nav a{display:flex;align-items:center;padding:0 22px;border-left:1px solid var(--preview-rule);color:#51435f;font-size:13px}
.header nav a:last-child{border-right:1px solid var(--preview-rule)}
.header-cta{margin:0 22px 0 0;padding:12px 18px;background:var(--purple);color:#fff;gap:18px;min-height:48px;border-radius:0;position:relative}
.hero::before{top:0;background:radial-gradient(ellipse 48% 92% at 91% 48%,#ddc5fa 0%,#eee3faab 39%,#ffffff00 78%),linear-gradient(90deg,#6539c007 1px,transparent 1px),linear-gradient(#6539c007 1px,transparent 1px),#fff;background-size:auto,64px 64px,64px 64px,auto}
.hero::after{content:"";position:absolute;top:0;left:0;right:0;height:24px;border:1px solid var(--preview-rule);border-top:0;background:repeating-linear-gradient(135deg,transparent 0,transparent 11px,#bba3d53d 11px,#bba3d53d 12px);z-index:-1;pointer-events:none}
.hero{border-inline:1px solid var(--preview-rule)}
.hero-copy{padding-left:24px}
.hero .eyebrow{color:#593b78}
.button,.contact-cta{border-radius:0!important;position:relative}
.button::before,.header-cta::before{content:"";position:absolute;inset:-4px;pointer-events:none;background:linear-gradient(var(--purple),var(--purple)) left top/10px 1px no-repeat,linear-gradient(var(--purple),var(--purple)) left top/1px 10px no-repeat,linear-gradient(var(--purple),var(--purple)) right top/10px 1px no-repeat,linear-gradient(var(--purple),var(--purple)) right top/1px 10px no-repeat,linear-gradient(var(--purple),var(--purple)) left bottom/10px 1px no-repeat,linear-gradient(var(--purple),var(--purple)) left bottom/1px 10px no-repeat,linear-gradient(var(--purple),var(--purple)) right bottom/10px 1px no-repeat,linear-gradient(var(--purple),var(--purple)) right bottom/1px 10px no-repeat;opacity:.55}
.button:hover{transform:none}
.hero-actions{gap:22px}
.contact-cta{background:#ece5f5!important;border-color:#ece5f5!important;color:#472a67!important;box-shadow:none!important}
.sector-band{background:#f8f5fc;border-color:var(--preview-rule)}
.section-heading{position:relative}
.section-heading::after{content:"";position:absolute;width:30px;height:3px;background:var(--purple);bottom:-25px;left:0}
.section-heading{margin-bottom:68px}
.agent-workspace{align-items:start;gap:65px;grid-template-columns:.72fr 1.28fr;padding-top:17px}
.agent-card-stack{position:relative;isolation:isolate;min-width:0;margin:0 8px 0 0}
.card-back{position:absolute;border:1px solid #d7c7eb;background:#fdfbff;pointer-events:none;border-radius:9px 9px 5px 5px;height:100%;inset:0;z-index:-1}
.card-back-one{transform:translate(0,-13px) scaleX(.96);background:#f7f1fc}
.card-back-two{transform:translate(0,-26px) scaleX(.92);background:#fcfaff;z-index:-2}
.agent-panel{background:linear-gradient(115deg,#f7f1fc,#fff 78%);border-color:#d6c5e9;border-radius:8px;padding:27px 30px 24px;box-shadow:0 5px 7px #30194b05,0 18px 36px #30194b0c;position:relative}
.agent-panel h3{font-size:29px}
.agent-panel>p{font-size:14px}
.workflow-document{background:#fff;border-color:#ded3eb;box-shadow:none}
.agent-list button{padding-block:24px;min-height:105px}
.agent-list button[aria-selected=true]{background:linear-gradient(90deg,#f1e9f9,transparent);padding-left:17px}
.agent-list button[aria-selected=true]::before{left:0;height:100%;top:0;width:2px}
.agent-list strong{font-size:21px}
.agent-list small{font-size:12px}
.illustrative-note{font-size:12px;margin-top:24px}
.tools-section{border-top:1px solid var(--preview-rule);background:radial-gradient(ellipse 55% 50% at 88% 37%,#e8d8f66e,transparent 80%),#fcfaff}
.tools-heading{align-items:end}
.tools-heading>p{font-size:15px;max-width:420px}
.context-layout{display:grid;grid-template-columns:1.12fr 1fr;gap:64px;align-items:start}
.tool-group-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-bottom:18px;border-bottom:1px solid var(--preview-rule)}
.tool-group-heading h3{font-size:19px;letter-spacing:-.4px}
.tool-status{font:10px/1.6 Mono,monospace;color:#665074;white-space:nowrap}
.tool-row{display:grid;grid-template-columns:170px 1fr;align-items:center;gap:24px;padding:19px 0;border-bottom:1px solid #e6deee;min-height:80px}
.vendor-name{font:500 15px/1.45 Manrope,sans-serif;min-width:0;color:#30233e;display:flex;align-items:center;gap:10px}
.vendor-name img{width:auto;max-width:142px;max-height:28px;object-fit:contain;object-position:left center}
.vendor-name .tool-symbol{height:28px;width:28px}
.tool-row p{font-size:13px;line-height:1.65;color:#62516e;max-width:270px}
.connections-group{margin-top:32px}
.connection-note{font-size:12px;line-height:1.75;color:#65516f;max-width:480px;margin-top:16px}
.context-popout{position:relative;padding:29px 33px 26px;border:1px solid #fff;border-radius:14px;background:radial-gradient(ellipse at 0 100%,#cfa6f48c,transparent 65%),radial-gradient(ellipse at 100% 0,#fff9,transparent 55%),linear-gradient(125deg,#eee4f8,#f7effc 45%,#d9c1ed);box-shadow:0 0 0 1px #d7c3e8,0 6px 8px #3b155608,0 24px 48px #3b15561a}
.context-popout::before{content:"";position:absolute;inset:8px;border:1px solid #ffffffa6;border-radius:8px;pointer-events:none}
.context-popout-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}
.context-popout-top .eyebrow{font-size:10px;color:#56396e;margin:0}
.context-popout-top img{width:48px;height:48px}
.context-popout h3{font-size:33px;line-height:1.2;letter-spacing:-1.1px;margin-bottom:16px;position:relative}
.context-popout>p{font-size:14px;line-height:1.8;color:#60436e;max-width:330px}
.context-ingredients{list-style:none;padding:0;margin:28px 0 24px}
.context-ingredients li{display:flex;gap:20px;border-top:1px solid #bda2d366;padding:18px 0}
.context-ingredients li>span{font:10px/1.8 Mono,monospace;padding-top:2px;color:#6c4289}
.context-ingredients strong{font:500 15px/1.5 Manrope,sans-serif}
.context-ingredients p{font-size:12px;line-height:1.7;color:#60436e;margin-top:4px}
.context-result{font-size:12px;color:#4e3069;border-top:1px solid #bda2d366;padding-top:20px;display:flex;align-items:center;gap:10px}
.model-panel{margin-top:58px;padding-top:39px;border-top:1px solid var(--preview-rule);display:grid;grid-template-columns:1.12fr 1fr;gap:64px;align-items:center}
.model-copy .eyebrow{margin-bottom:14px;font-size:10px}
.model-copy h3{font-size:29px;line-height:1.25;letter-spacing:-.8px;margin-bottom:16px}
.model-copy>p:last-child{font-size:14px;color:#62516e;line-height:1.8;max-width:520px}
.model-vendors{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.model-vendor{background:#fff;border:1px solid #ded4e8;min-height:92px;padding:20px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 10px;color:#20172f}
.model-vendor>span{font:500 25px/1.2 Manrope,sans-serif;letter-spacing:-.7px}
.model-vendor>small{font-size:11px}
.model-vendor img{width:auto;height:auto;max-height:33px;max-width:160px}
.model-options>p{font-size:12px;line-height:1.75;color:#65516f;margin-top:17px}
.approach-section{background:#f6f2fa;border-color:var(--preview-rule)}
.step-illustration{border-color:#cfc0df}
.people-section{border-block:1px solid #392544}
.people-principles article{border-color:#574268}
.questions{border-bottom:1px solid var(--preview-rule)}
.faq-list,details{border-color:var(--preview-rule)}
.closing{border-top:0;padding-top:78px}
footer{background:#fff;border-color:var(--preview-rule)}
@media(max-width:1200px){.header{gap:16px}.header nav a{padding-inline:14px;font-size:12px}.header-cta{font-size:12px;gap:12px;padding-inline:13px;margin-right:16px}.header>.brand{margin-left:18px}.hero-copy{padding-left:18px}.context-layout,.model-panel{gap:38px}.tool-row{grid-template-columns:150px 1fr;gap:18px}.context-popout{padding:25px}.agent-workspace{gap:42px}}
@media(max-width:1000px){.header nav a{padding-inline:12px}.header-cta{font-size:11px}.header>.brand,.header>.brand img{width:112px}.context-layout{gap:30px;grid-template-columns:1fr 1fr}.tool-row{grid-template-columns:1fr;gap:7px;padding-block:17px}.tool-row p{max-width:none}.context-popout h3{font-size:29px}.context-popout-top .eyebrow{font-size:9px}.tool-group-heading{align-items:start;flex-direction:column;gap:6px}.agent-list strong{font-size:20px}}
@media(max-width:800px){.header{gap:16px}.header nav{height:auto;top:calc(100% + 1px);padding:12px;background:#fff;box-shadow:0 12px 24px #27143b0d;border-radius:0}.header nav a{padding:14px;border:0!important;font-size:15px;min-height:48px}.header-cta{margin:0 0 0 auto;font-size:12px}.menu-toggle{margin-right:15px;min-width:40px;height:44px}.agent-workspace{grid-template-columns:1fr;gap:44px}.agent-list button{min-height:98px}.agent-card-stack{margin-right:0}.agent-list button[aria-selected=true]{padding-left:14px}.tools-heading{display:block}.tools-heading>p{max-width:560px;margin-top:24px}.context-layout,.model-panel{gap:28px}.context-popout{padding:24px}.context-popout-top img{width:36px;height:36px}.context-popout h3{font-size:27px}.context-popout>p{font-size:13px}.context-ingredients li{gap:13px}.context-ingredients strong{font-size:14px}.model-panel{grid-template-columns:1fr}.model-vendors{max-width:470px}.model-options>p{max-width:500px}.hero::before{background-size:auto,48px 48px,48px 48px,auto}}
@media(max-width:600px){.header{width:calc(100% - 24px);gap:9px}.header>.brand,.header>.brand img{width:102px}.header>.brand{margin-left:13px}.header-cta{padding:8px 5px;max-width:140px;font-size:11px;gap:9px;min-height:46px;color:var(--purple);background:#fff}.header-cta::before{display:none}.menu-toggle{margin-right:8px;min-width:38px;padding-inline:9px}.hero{border:0}.hero-copy{padding-left:0}.hero::before{top:0;background:radial-gradient(ellipse 110% 53% at 85% 85%,#ddc5fa 0%,#eee3fa8c 43%,transparent 77%),linear-gradient(90deg,#6539c006 1px,transparent 1px),linear-gradient(#6539c006 1px,transparent 1px),#fff;background-size:auto,48px 48px,48px 48px,auto}.hero::after{left:calc(-1*var(--gutter) + 12px);right:calc(-1*var(--gutter) + 12px);height:16px}.hero-actions{gap:20px}.section-heading{margin-bottom:55px}.section-heading::after{bottom:-22px;width:25px;height:2px}.agent-workspace{padding-top:0;gap:35px}.agent-list{gap:0 20px}.agent-list button{min-height:94px;padding-block:18px;gap:8px}.agent-list strong{font-size:17px}.agent-list small{font-size:11px}.agent-panel{padding:24px 21px 20px}.agent-panel h3{font-size:26px}.agent-panel>p{font-size:14px}.card-back-one{transform:translate(0,-10px) scaleX(.96)}.card-back-two{transform:translate(0,-20px) scaleX(.92)}.illustrative-note{font-size:12px;line-height:1.8}.context-layout{grid-template-columns:1fr;gap:34px}.tools-heading h2{font-size:36px;letter-spacing:-1.6px}.tools-heading>p{font-size:14px;line-height:1.85}.tool-group-heading{flex-direction:row;align-items:center}.tool-group-heading h3{font-size:18px}.tool-status{font-size:9px}.tool-row{grid-template-columns:135px 1fr;gap:20px;padding-block:18px}.vendor-name{font-size:14px}.vendor-name img{max-width:130px;max-height:25px}.tool-row p{font-size:12px}.connections-group{margin-top:27px}.connection-note{font-size:12px}.context-popout{padding:25px 26px 24px;border-radius:12px}.context-popout-top{margin-bottom:19px}.context-popout-top .eyebrow{font-size:9px}.context-popout h3{font-size:31px}.context-popout>p{font-size:14px}.context-ingredients strong{font-size:14px}.context-ingredients li{padding-block:17px}.model-panel{margin-top:38px;padding-top:30px;gap:25px}.model-copy h3{font-size:26px}.model-copy>p:last-child{font-size:14px}.model-vendors{gap:12px}.model-vendor{min-height:85px;padding:15px}.model-vendor img{max-width:125px;max-height:28px}.model-vendor>span{font-size:23px}.model-options>p{font-size:12px}.closing{padding-top:62px}.closing .button{margin-inline:5px}.people-principles article{border-color:#574268}}
@media(max-width:360px){.header{gap:6px}.header>.brand,.header>.brand img{width:92px}.header>.brand{margin-left:10px}.header-cta{max-width:123px;font-size:10px;gap:7px}.menu-toggle{margin-right:5px;min-width:32px}.hero-actions{gap:16px}.agent-list strong{font-size:15px}.agent-list small{font-size:10px}.agent-list button{gap:6px}.tool-row{grid-template-columns:115px 1fr;gap:15px}.vendor-name{font-size:13px}.vendor-name img{max-width:110px}.tool-status{font-size:8px}.tool-group-heading h3{font-size:17px}.context-popout{padding-inline:22px}.context-popout h3{font-size:28px}.model-vendor img{max-width:103px}.model-vendor{padding:12px}.model-copy h3{font-size:24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button,.header-cta,.card-back{transition:none;animation:none}}
/* Supplied tools reference: fine rails, framed cells and FAQ-style pluses.
   Qronos references inform the model option rows, not claims of live runs. */
.tools-frame{position:relative;border:1px solid #cfc0df;background:#fff}
.tools-frame-heading{display:flex;justify-content:space-between;gap:24px;padding:16px 22px;border-bottom:1px solid #d8cce4;background:repeating-linear-gradient(135deg,#f7f2fb 0,#f7f2fb 10px,#eee5f5 10px,#eee5f5 11px);font:9px/1.7 Mono,monospace;letter-spacing:.7px;color:#604376}
.tools-frame-heading span{background:#faf7fc;padding:2px 5px}
.tools-frame-heading b{font:400 17px/1 Manrope,sans-serif;margin-left:10px}
.frame-plus{position:absolute;z-index:2;color:#8660a5;background:#fcfaff;font:400 23px/1 Manrope,sans-serif;width:16px;height:20px;display:grid;place-items:center;pointer-events:none}
.top-left{top:-11px;left:-9px}.top-right{top:-11px;right:-9px}.bottom-left{bottom:-10px;left:-9px}.bottom-right{bottom:-10px;right:-9px}
.tools-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:start}
.tool-cell{border:0;border-right:1px solid #e0d5e9;min-height:100%;border-radius:0}
.tool-cell:last-child{border-right:0}
.tool-cell summary{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:22px;padding:26px 20px 19px;font:400 13px/1.6 Manrope,sans-serif;min-height:213px}
.tool-cell summary>span{transform:none!important;font:inherit;color:inherit}
.tool-cell .vendor-name{font:500 16px/1.4 Manrope,sans-serif;min-height:45px;letter-spacing:-.3px;color:#30233e}
.tool-cell .tool-role{font-size:12px;color:#62516e;line-height:1.7}
.tool-cell-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}
.tool-cell .tool-status{font:9px/1.5 Mono,monospace;color:#624574}
.tool-plus{font:400 23px/1 Manrope,sans-serif;color:var(--purple);transition:transform .2s;display:block}
.tool-cell[open] .tool-plus{transform:rotate(45deg)}
.tool-cell[open]{background:#f5effb}
.tool-cell summary:hover{background:#f8f4fc}
.tool-cell>p{padding:0 20px 23px;font-size:12px;line-height:1.8;color:#604773}
.tools-section>.wrap>.connection-note{max-width:none;margin-top:20px}
.context-layout{margin-top:48px;grid-template-columns:1fr 1fr;align-items:center;gap:70px}
.context-popout{padding:27px 32px 24px}
.context-ingredients{margin-block:23px 18px}
.context-ingredients li{padding-block:15px}
.model-panel{display:block;margin:0;padding:0;border:0}
.model-copy h3{font-size:30px}
.provider-console{margin-top:27px;background:linear-gradient(155deg,#30213e,#21172f);border:1px solid #564163;border-radius:10px;box-shadow:0 0 0 4px #f3edf7,0 10px 26px #30134312;padding:0 9px 9px;color:#fff}
.provider-console-top{padding:16px 13px;display:flex;justify-content:space-between;align-items:center;gap:20px;font:8px/1.8 Mono,monospace;letter-spacing:.8px;color:#d2bfdf}
.console-pips{display:flex;gap:5px}.console-pips i{width:3px;height:3px;border-radius:50%;background:#b598cb}
.provider-row{display:flex;align-items:center;gap:15px;padding:13px 15px;border-top:1px solid #ffffff12;min-height:76px}
.provider-row:first-of-type{background:#ffffff05}
.provider-row h4{font:500 15px/1.4 Manrope,sans-serif;margin:0;color:#fff}
.provider-row p{font:12px/1.6 Manrope,sans-serif;color:#c8b6d7;margin:3px 0 0}
.provider-badge{width:39px;height:39px;border-radius:50%;background:#fff;display:none;align-items:center;justify-content:center;flex-shrink:0;border:1px solid #e1d5e8}
.provider-badge:has(img){display:flex}
.provider-badge img{width:27px;height:27px;object-fit:contain}
.provider-option{margin-left:auto;font:9px/1.6 Mono,monospace;color:#d2bfdf}
.provider-note{font-size:12px;line-height:1.75;color:#65516f;margin-top:18px}
@media(max-width:1200px){.tool-cell summary{padding:23px 16px 18px}.tool-cell .vendor-name{font-size:15px}.tool-cell .tool-status{font-size:8px}.context-layout{gap:42px}}
@media(max-width:1000px){.tools-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.tool-cell:nth-child(3){border-right:0}.tool-cell:nth-child(n+4){border-top:1px solid #e0d5e9}.tool-cell:last-child{border-right:1px solid #e0d5e9}.tool-cell summary{min-height:197px}.context-layout{gap:35px;align-items:start}.context-popout{padding:24px}.model-copy h3{font-size:27px}.provider-row{padding-inline:10px;gap:10px}.provider-option{font-size:8px}.provider-console-top{padding-inline:10px;font-size:7px}}
@media(max-width:700px){.context-layout{grid-template-columns:1fr;gap:40px}.context-popout{max-width:none}.model-copy h3{font-size:29px}.provider-console{max-width:none}.provider-row{padding-inline:16px}.provider-option{font-size:9px}.provider-console-top{font-size:8px;padding-inline:16px}.tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-cell:nth-child(3){border-right:1px solid #e0d5e9}.tool-cell:nth-child(2n){border-right:0}.tool-cell:nth-child(n+3){border-top:1px solid #e0d5e9}.tool-cell:last-child{border-right:0;grid-column:1/-1}.tool-cell:last-child summary{min-height:160px;display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}.tool-cell:last-child .tool-cell-foot{grid-column:1/-1}.tool-cell:last-child .vendor-name{min-height:0}.tools-frame-heading{font-size:8px;padding:14px 14px;gap:12px}.tools-frame-heading span:last-child{display:none}.tools-frame{margin-top:4px}.tool-cell .vendor-name{font-size:15px}.tool-cell summary{padding:22px 17px 17px;gap:19px;min-height:212px}.tool-cell .tool-status{font-size:8px}.tool-cell>p{padding-inline:17px}.tool-cell .tool-role{font-size:12px}.tool-cell .tool-role br{display:none}.context-layout{margin-top:36px}.context-popout{padding:25px 26px 24px}.model-copy h3{font-size:27px}.provider-note{font-size:12px}}
@media(max-width:360px){.tool-cell summary{padding-inline:14px}.tool-cell .vendor-name{font-size:14px}.tool-cell .tool-status{font-size:7.5px}.provider-row{padding-inline:11px}.model-copy h3{font-size:25px}.context-popout{padding-inline:22px}}
.tool-cell .vendor-name img{width:24px;height:24px;max-width:none;flex-shrink:0}
.provider-badge{width:110px;height:44px;border-radius:5px;padding:10px}
.provider-badge img{width:auto;height:auto;max-width:87px;max-height:27px}
.provider-row[data-provider=openai] .provider-badge img{width:28px;height:28px}
@media(max-width:1100px) and (min-width:701px){.provider-badge{width:88px;padding:9px}.provider-badge img{max-width:66px}.provider-option{display:none}}
@media(max-width:600px){.provider-badge{width:95px;padding:10px}.provider-badge img{max-width:72px}.provider-option{font-size:8px}.provider-row{gap:14px}.provider-row h4{font-size:14px}.provider-row p{font-size:11px}}
@media(max-width:360px){.provider-option{display:none}.provider-badge{width:105px}.provider-badge img{max-width:82px}}
.tool-cell .tool-status{font-size:10px;white-space:normal;line-height:1.6}
.tool-cell summary .tool-role{letter-spacing:0}
@media(max-width:600px){.tool-cell .tool-status{font-size:9px}.tool-cell-foot{min-height:30px}}
/* The existing long hop passes behind the inserted context section.
   Approach anchors and the original choreography remain untouched. */
.tools-section{position:relative;z-index:5}
