:root {
  --navy-950:#000a16;
  --navy-900:#071322;
  --navy-850:#0b1928;
  --navy-800:#102235;
  --gold:#b08300;
  --gold-light:#d4a83a;
  --paper:#f5f4ef;
  --white:#fff;
  --ink:#000a16;
  --muted-dark:rgba(255,255,255,.7);
  --muted-light:rgba(0,10,22,.65);
  --line-dark:rgba(255,255,255,.14);
  --line-light:rgba(0,10,22,.14);
  --aiuto:#c66f49;
  --presto:#3e8275;
  --tempo:#3b8797;
  --voce:#89598b;
  --cecilia:#4f7d5f;
  --guida:#477b9e;
  --font:"Montserrat",Arial,sans-serif;
  --shell:1180px;
  --gutter:clamp(22px,5vw,64px);
  --section:clamp(104px,12vw,176px);
  --ease:cubic-bezier(.16,1,.3,1);
  --radius:10px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  overflow-x:hidden;
  background:
    radial-gradient(110% 80% at 72% 0%,#152e46 0%,#071322 46%,#000a16 100%);
  color:var(--white);
  font-family:var(--font);
  font-size:16px;
  line-height:1.65;
  text-rendering:optimizeLegibility;
}
body.modal-open{overflow:hidden}
button,a{font:inherit}
button{color:inherit}
a{color:inherit}
svg{display:block}
button,[href]{touch-action:manipulation}
button{cursor:pointer}

.skip-link{position:fixed;z-index:1000;top:12px;left:16px;padding:10px 16px;background:#fff;color:#000a16;transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}
.section-shell{width:min(100%,calc(var(--shell) + var(--gutter)*2));margin-inline:auto;padding-inline:var(--gutter)}
.production-chrome .hero{padding-top:clamp(72px,8vw,112px)}
.production-chrome .cw-header-fixed,.production-chrome .cw-footer{font-family:var(--font)}

.site-header{position:fixed;z-index:100;inset:0 0 auto;transition:background-color .24s ease,border-color .24s ease}
.site-header.is-scrolled{border-bottom:1px solid var(--line-dark);background:rgba(0,10,22,.9);backdrop-filter:blur(18px)}
.header-inner{width:min(100%,1320px);height:82px;margin:auto;padding-inline:clamp(24px,4vw,56px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:32px}
.brand{display:flex;align-items:baseline;gap:10px;width:max-content;text-decoration:none}
.brand-name{font-size:16px;font-weight:600;letter-spacing:3px;text-transform:uppercase}
.brand-by{color:rgba(255,255,255,.46);font-size:9px;font-weight:500;letter-spacing:1px;text-transform:uppercase}
.desktop-nav{display:flex;align-items:center;gap:clamp(22px,2.6vw,38px)}
.desktop-nav a{position:relative;color:rgba(255,255,255,.68);font-size:12px;font-weight:500;text-decoration:none;transition:color .18s ease}
.desktop-nav a::after{content:"";position:absolute;right:0;bottom:-9px;left:0;height:1px;background:var(--gold-light);transform:scaleX(0);transform-origin:right;transition:transform .22s var(--ease)}
.desktop-nav a:hover,.desktop-nav a:focus-visible,.desktop-nav a.is-current{color:#fff}
.desktop-nav a:hover::after,.desktop-nav a:focus-visible::after,.desktop-nav a.is-current::after{transform:scaleX(1);transform-origin:left}
.header-actions{justify-self:end}
.text-action{min-height:44px;padding:0 18px;border:1px solid rgba(255,255,255,.28);border-radius:var(--radius);background:transparent;font-size:12px;font-weight:600;transition:border-color .2s ease,background-color .2s ease}
.text-action:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.menu-toggle,.mobile-menu{display:none}

.hero{position:relative;min-height:790px;padding-top:clamp(154px,15vw,204px);padding-bottom:clamp(100px,11vw,150px);overflow:hidden;display:grid;grid-template-columns:minmax(0,.96fr) minmax(430px,1.04fr);align-items:center}
.hero-copy{position:relative;z-index:2}
.hero-kicker,.section-label{margin:0;color:var(--gold-light);font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase}
.hero h1{max-width:770px;margin:26px 0 0;font-size:clamp(52px,6.2vw,88px);font-weight:500;letter-spacing:-.04em;line-height:.98;text-wrap:balance}
.hero-lead{max-width:600px;margin:30px 0 0;color:var(--muted-dark);font-size:clamp(17px,1.6vw,21px);line-height:1.65}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}
.action-note{margin:12px 0 0;color:rgba(255,255,255,.46);font-size:11px}
.button{min-height:50px;padding:0 26px;border:1px solid transparent;border-radius:var(--radius);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:650;letter-spacing:.08em;text-decoration:none;text-transform:uppercase;transition:transform .22s var(--ease),background-color .22s ease,border-color .22s ease,color .22s ease}
.button:hover{transform:translateY(-2px)}
.button-primary{background:var(--gold);color:#fff}
.button-primary:hover{background:#c49613}
.button-secondary{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.02);color:#fff}
.button-secondary:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.button-white{border-color:#fff;background:#fff;color:var(--ink);box-shadow:0 12px 32px rgba(0,10,22,.12)}
.button-white:hover{background:var(--paper)}
.hero-visual{position:relative;z-index:1;min-height:520px;display:grid;place-items:center;pointer-events:auto}
.hero-visual::before{content:"";position:absolute;width:72%;aspect-ratio:1;border-radius:50%;background:rgba(212,168,58,.14);filter:blur(84px)}
#hero-orb{width:min(58vw,720px);aspect-ratio:1;transform:translateX(10%)}

.signal-strip{position:relative;z-index:3;margin-top:-54px;padding-bottom:clamp(96px,10vw,144px);display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.signal{position:relative;min-height:310px;padding:30px;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);background:rgba(8,22,35,.72);box-shadow:0 24px 60px rgba(0,5,12,.18);text-align:left;backdrop-filter:blur(14px);transition:transform .32s var(--ease),border-color .24s ease,background-color .24s ease}
.signal:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.36);background:rgba(14,34,51,.9)}
.signal-index{display:block;color:rgba(255,255,255,.48);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.signal strong{display:block;max-width:72%;margin-top:34px;font-size:clamp(30px,3.6vw,48px);font-weight:500;letter-spacing:-.04em;line-height:1.05}
.signal>span:nth-of-type(2){display:block;max-width:60%;margin-top:10px;color:rgba(255,255,255,.64);font-size:12px;line-height:1.5}
.signal-action{position:absolute;right:30px;bottom:26px;left:30px;display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.signal-action b{font-size:17px;font-weight:400;transition:transform .28s var(--ease)}
.signal:hover .signal-action b{transform:translate(3px,-3px)}
.system-preview{position:absolute;top:30px;right:24px;width:128px;height:112px;overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);background:rgba(0,10,22,.5)}
.system-preview::before,.system-preview::after{content:"";position:absolute;top:50%;left:50%;width:88px;aspect-ratio:1;border:1px solid rgba(255,255,255,.12);border-radius:50%;transform:translate(-50%,-50%) rotate(26deg)}
.system-preview::after{width:118px;transform:translate(-50%,-50%) rotate(-18deg)}
.preview-core{position:absolute;z-index:2;top:50%;left:50%;width:26px;height:26px;border-radius:50%;background:var(--gold);display:grid;place-items:center;color:#fff;font-size:7px;font-weight:700;transform:translate(-50%,-50%)}
.system-preview i{position:absolute;z-index:2;top:var(--y);left:var(--x);width:8px;height:8px;border-radius:50%;background:var(--planet);box-shadow:0 0 14px var(--planet)}
.preview-guida i{width:16px;height:16px}
.preview-route{position:absolute;z-index:1;top:27%;left:29%;width:58%;height:46%;border-top:1px solid rgba(71,123,158,.8);border-right:1px solid rgba(71,123,158,.8);border-radius:0 50% 0 0;transform:rotate(-10deg)}
.preview-work{display:block}
.preview-work::before,.preview-work::after{display:none}
.preview-score{position:absolute;top:20px;right:18px;bottom:20px;left:18px;border-radius:5px;background:rgba(255,255,255,.08)}
.preview-score::before,.preview-score::after{content:"";position:absolute;right:12px;left:12px;height:1px;background:rgba(255,255,255,.2)}
.preview-score::before{top:28px;box-shadow:0 12px 0 rgba(255,255,255,.2),0 24px 0 rgba(255,255,255,.2),0 36px 0 rgba(255,255,255,.2)}
.preview-task{position:absolute;z-index:2;width:9px;height:9px;border:2px solid var(--gold-light);border-radius:50%;background:var(--navy-900)}
.task-a{top:25px;left:28px}.task-b{top:50px;right:27px}.task-c{bottom:24px;left:49px}

.specialists{background:var(--paper);color:var(--ink);padding-top:var(--section)}
.specialists-heading{text-align:center}
.specialists .section-label{color:var(--gold)}
.specialists-heading h2{margin:18px 0 0;font-size:clamp(50px,7vw,92px);font-weight:500;letter-spacing:-.04em;line-height:1}
.specialists-heading>p:last-child{max-width:720px;margin:28px auto 0;color:var(--muted-light);font-size:17px}
.agent-selector-wrap{margin-top:clamp(60px,8vw,104px);border-top:1px solid var(--line-light);border-bottom:1px solid var(--line-light)}
.agent-selector{display:grid;grid-template-columns:repeat(6,1fr);padding-inline:var(--gutter)}
.agent-tab{min-height:82px;padding:0 15px;border:0;border-right:1px solid var(--line-light);background:transparent;color:rgba(0,10,22,.54);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px;text-align:center;transition:background-color .22s ease,color .22s ease}
.agent-tab:first-child{border-left:1px solid var(--line-light)}
.agent-tab span{font-size:11px;font-weight:700;letter-spacing:.11em}
.agent-tab small{font-size:9px;font-weight:500;white-space:nowrap}
.agent-tab:hover{background:#fff;color:var(--ink)}
.agent-tab.is-active{background:var(--ink);color:#fff}
.agent-stage{position:relative;min-height:700px;padding-top:clamp(66px,8vw,112px);padding-bottom:var(--section);display:grid;grid-template-columns:minmax(360px,.86fr) minmax(0,1.14fr);gap:clamp(48px,8vw,120px);align-items:center}
.agent-stage::before{content:"";position:absolute;inset:8% 3% 12%;border-radius:50%;background:color-mix(in srgb,var(--agent-color) 10%,transparent);filter:blur(90px);pointer-events:none}
.agent-orb-wrap{position:relative;min-height:460px;display:grid;place-items:center}
#agent-orb{width:min(100%,500px);aspect-ratio:1}
.agent-copy{position:relative}
.agent-role{margin:0;color:var(--agent-color);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.agent-copy h3{margin:14px 0 0;color:var(--agent-color);font-size:clamp(58px,7vw,94px);font-weight:500;letter-spacing:-.04em;line-height:1}
.agent-when{max-width:640px;margin:22px 0 0;font-size:clamp(19px,2vw,25px);font-weight:600;line-height:1.35}
.agent-description{max-width:640px;margin:18px 0 0;color:var(--muted-light);line-height:1.75}
.agent-outcomes{margin:30px 0 0;border-top:1px solid var(--line-light)}
.agent-outcomes>div{padding:16px 0;border-bottom:1px solid var(--line-light);display:grid;grid-template-columns:130px 1fr;gap:20px}
.agent-outcomes dt{color:rgba(0,10,22,.48);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.agent-outcomes dd{margin:0;font-size:13px}
.agent-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:30px}
.agent-stage .button-white{border-color:rgba(0,10,22,.18)}
.watch-link{min-height:48px;padding:0;border:0;background:transparent;display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-size:12px;font-weight:600;transition:color .2s ease}
.watch-link svg{width:22px;fill:none;stroke:currentColor;stroke-width:1.3}
.watch-link:hover{color:var(--agent-color)}
.agent-progress{margin-top:34px;display:flex;align-items:center;gap:18px;color:rgba(0,10,22,.42);font-size:9px;letter-spacing:.12em}
.agent-progress>div{width:150px;height:1px;background:rgba(0,10,22,.14)}
.agent-progress i{display:block;width:100%;height:1px;background:var(--agent-color);transform-origin:left;transition:transform .48s var(--ease),background-color .3s ease}

.focus{position:relative;overflow:hidden;background:var(--gold);color:#fff}
.focus-inner{position:relative;min-height:760px;padding-top:var(--section);padding-bottom:var(--section);display:flex;align-items:center}
.focus-copy{position:relative;z-index:2;max-width:730px}
.focus .section-label{color:#fff}
.focus h2{margin:24px 0 0;font-size:clamp(48px,6.6vw,88px);font-weight:500;letter-spacing:-.04em;line-height:1.02}
.focus h2 span{color:#fff}
.focus-copy>p:not(.section-label){max-width:590px;margin:28px 0 34px;color:#fff;font-size:17px}
.focus .button-primary{border-color:#fff;background:#fff;color:var(--ink)}
.focus .button-primary:hover{background:var(--paper)}
.focus-orb{position:absolute;z-index:1;top:50%;right:-27%;width:min(76vw,900px);aspect-ratio:1;transform:translateY(-50%);opacity:.54;pointer-events:none}
#focus-orb{width:100%;height:100%;filter:brightness(.72)}

.download{background:var(--paper);color:var(--ink)}
.download-grid{min-height:760px;padding-top:var(--section);padding-bottom:var(--section);display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(56px,9vw,130px);align-items:center}
.download .section-label{color:var(--gold)}
.download h2,.positioning h2,.composer-trust h2,.final-cta h2{margin:22px 0 0;font-size:clamp(44px,5.6vw,74px);font-weight:500;letter-spacing:-.04em;line-height:1.05}
.download-copy>p:not(.section-label){max-width:560px;margin:26px 0 0;color:var(--muted-light)}
.download-actions{margin-top:38px;display:grid;gap:10px}
.download-card{min-height:86px;padding:16px 18px;border:1px solid var(--line-light);border-radius:var(--radius);background:#fff;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;color:var(--ink);text-decoration:none;transition:transform .24s var(--ease),border-color .2s ease,box-shadow .24s ease}
.download-card:hover{transform:translateX(5px);border-color:rgba(0,10,22,.36);box-shadow:0 16px 40px rgba(0,10,22,.08)}
.download-icon{width:46px;height:46px;border-radius:var(--radius);background:var(--ink);display:grid;place-items:center;color:#fff}
.download-icon svg{width:22px;fill:none;stroke:currentColor;stroke-width:1.5}
.download-card strong,.download-card small{display:block}
.download-card strong{font-size:13px}.download-card small{margin-top:3px;color:var(--muted-light);font-size:10px}
.download-arrow{width:21px;fill:none;stroke:currentColor;stroke-width:1.4;transition:transform .22s var(--ease)}
.download-card:hover .download-arrow{transform:translateX(4px)}
.download-visual{position:relative}
.download-visual::before{content:"";position:absolute;inset:14% 10%;border-radius:50%;background:rgba(176,131,0,.18);filter:blur(70px)}
.download-window{position:relative;overflow:hidden;border:1px solid rgba(0,10,22,.15);border-radius:var(--radius);background:var(--navy-900);box-shadow:24px 34px 80px rgba(0,10,22,.22)}
.window-bar{height:48px;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:7px;color:rgba(255,255,255,.48);font-size:9px;letter-spacing:.1em;text-transform:uppercase}
.window-bar i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.26)}
.window-bar span{margin-left:10px}
.window-body{min-height:430px;padding:60px 40px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.window-body svg{width:126px;fill:none;stroke:var(--gold-light);stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 16px 24px rgba(212,168,58,.18))}
.window-body strong{margin-top:34px;color:#fff;font-size:20px;font-weight:550}
.window-body span{margin-top:8px;color:rgba(255,255,255,.5);font-size:11px}

.positioning{padding-top:var(--section);padding-bottom:var(--section)}
.positioning-statement{display:grid;grid-template-columns:.8fr 1.4fr;gap:clamp(40px,8vw,120px);align-items:end}
.positioning-statement h2{margin:0}
.positioning-statement>p:last-child{max-width:520px;margin:0;color:var(--muted-dark);font-size:17px}
.position-map{margin-top:clamp(70px,9vw,120px);display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch}
.position-step{min-height:270px;padding:30px;border:1px solid var(--line-dark);border-radius:var(--radius);background:rgba(255,255,255,.035)}
.position-step span{color:rgba(255,255,255,.38);font-size:10px;letter-spacing:.12em}
.position-step strong{display:block;margin-top:58px;font-size:clamp(19px,2vw,25px);font-weight:550}
.position-step p{margin:14px 0 0;color:var(--muted-dark);font-size:13px}
.position-bridge{width:88px;display:flex;align-items:center}
.position-bridge i{height:1px;flex:1;background:rgba(212,168,58,.44)}
.position-bridge b{width:38px;height:38px;border-radius:50%;background:var(--gold);display:grid;place-items:center;color:#fff;font-size:8px}

.composer-trust{padding-top:var(--section);padding-bottom:var(--section);background:#fff;color:var(--ink)}
.composer-trust .section-label{color:var(--gold)}
.trust-intro{text-align:center}
.trust-intro>p:last-child{max-width:760px;margin:28px auto 0;color:var(--muted-light);font-size:17px}
.trust-proof{margin-top:clamp(72px,9vw,124px);display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.trust-proof article{min-height:310px;padding:36px;border-top:1px solid var(--line-light);border-bottom:1px solid var(--line-light);border-left:1px solid var(--line-light)}
.trust-proof article:last-child{border-right:1px solid var(--line-light)}
.proof-mark{width:42px;height:42px;border-radius:50%;background:var(--ink);display:grid;place-items:center;color:#fff;font-size:9px}
.trust-proof h3{margin:72px 0 0;font-size:21px;font-weight:600}
.trust-proof p{margin:14px 0 0;color:var(--muted-light);font-size:13px}

.final-cta{position:relative;overflow:hidden;border-bottom:1px solid var(--line-dark)}
.final-cta::before{content:"";position:absolute;top:50%;left:50%;width:780px;aspect-ratio:1;border-radius:50%;background:rgba(212,168,58,.08);filter:blur(90px);transform:translate(-50%,-50%)}
.final-cta-inner{position:relative;padding-top:clamp(120px,15vw,210px);padding-bottom:clamp(120px,15vw,210px);text-align:center}
.final-cta p{margin:0;color:var(--gold-light);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.final-cta h2{font-size:clamp(50px,7vw,92px)}
.final-cta-inner>div{margin-top:38px;display:flex;justify-content:center;gap:12px}
.final-cta span{display:block;margin-top:13px;color:rgba(255,255,255,.44);font-size:10px}

.site-footer{border-top:1px solid var(--line-dark)}
.footer-top{padding-top:72px;padding-bottom:72px;display:grid;grid-template-columns:1.7fr .65fr .65fr;gap:clamp(48px,8vw,120px)}
.footer-brand{font-size:20px;font-weight:700;text-decoration:none}
.footer-top>div:first-child p{max-width:420px;color:var(--muted-dark);font-size:13px}
.footer-top h2{margin:0 0 18px;color:rgba(255,255,255,.4);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.footer-top>div:not(:first-child){display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.footer-top>div:not(:first-child) a{color:rgba(255,255,255,.7);font-size:12px;text-decoration:none}
.footer-top>div:not(:first-child) a:hover{color:var(--gold-light)}
.footer-bottom{padding-top:36px;padding-bottom:42px;border-top:1px solid var(--line-dark);display:grid;grid-template-columns:.6fr 1.4fr;gap:30px 60px;align-items:start}
.footer-bottom>span{font-size:clamp(18px,2.2vw,28px);font-weight:600}
.footer-bottom p{max-width:720px;margin:0;color:var(--muted-dark);font-size:12px}
.footer-bottom small{grid-column:2;color:rgba(255,255,255,.36);font-size:10px}

.modal[hidden],.agent-presentation[hidden],.agent-directory[hidden]{display:none}
.modal{position:fixed;z-index:300;inset:0;padding:24px;display:grid;place-items:center}
.modal-backdrop{position:absolute;inset:0;border:0;background:rgba(0,5,12,.76);backdrop-filter:blur(18px)}
.pricing-panel,.agents-panel{position:relative;width:min(100%,1120px);max-height:calc(100dvh - 48px);padding:clamp(28px,5vw,62px);overflow:auto;border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);background:rgba(4,17,30,.86);box-shadow:0 38px 100px rgba(0,0,0,.45);backdrop-filter:blur(28px) saturate(1.16);animation:panel-in .55s var(--ease) both}
.modal-close{position:absolute;z-index:20;top:18px;right:18px;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius);background:rgba(0,10,22,.5);display:grid;place-items:center;color:#fff}
.modal-close:hover{background:rgba(255,255,255,.1)}
.modal-close svg{width:18px;fill:none;stroke:currentColor;stroke-width:1.5}
.pricing-panel>h2{margin:16px 0 0;font-size:clamp(30px,4vw,46px);font-weight:500;letter-spacing:-.035em}
.pricing-panel>p:not(.section-label){color:var(--muted-dark)}
.pricing-grid{margin-top:38px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pricing-grid article{position:relative;min-height:390px;padding:28px;border:1px solid var(--line-dark);border-radius:var(--radius);display:flex;flex-direction:column;align-items:flex-start}
.pricing-grid article.is-featured{border-color:var(--gold-light)}
.pricing-grid em{position:absolute;top:16px;right:16px;color:var(--gold-light);font-size:9px;font-style:normal;letter-spacing:.12em;text-transform:uppercase}
.pricing-grid h3{margin:0;font-size:14px}.pricing-grid strong{margin-top:24px;font-size:42px;font-weight:500}.pricing-grid article>span{color:var(--muted-dark);font-size:11px}
.pricing-grid ul{margin:28px 0;padding:0;list-style:none;color:var(--muted-dark);font-size:12px}
.pricing-grid li{position:relative;margin-top:9px;padding-left:16px}.pricing-grid li::before{content:"—";position:absolute;left:0;color:var(--gold-light)}
.pricing-grid .button{width:100%;margin-top:auto}.pricing-more{display:inline-block;margin-top:24px;color:var(--gold-light);font-size:11px}

.agents-panel{width:min(100%,1260px);padding:clamp(26px,4vw,54px);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.agent-directory{min-height:min(790px,calc(100dvh - 150px));display:grid;grid-template-columns:minmax(270px,.62fr) minmax(570px,1.38fr);gap:clamp(28px,5vw,70px);align-items:center}
.directory-copy h2{margin:20px 0 0;font-size:clamp(38px,5vw,66px);font-weight:500;letter-spacing:-.04em;line-height:1}
.directory-copy>p:not(.section-label){max-width:460px;margin:24px 0 0;color:var(--muted-dark)}
.directory-copy>span{display:block;margin-top:34px;color:rgba(255,255,255,.45);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.planetary-stage{position:relative;min-height:680px;opacity:0;transform:scale(2.35);filter:blur(12px);animation:system-zoom-out 1.05s var(--ease) .12s forwards}
.system-rings i{position:absolute;top:50%;left:50%;width:76%;aspect-ratio:1;border:1px solid rgba(255,255,255,.13);border-radius:50%;transform:translate(-50%,-50%) rotate(18deg)}
.system-rings i:nth-child(2){width:54%;transform:translate(-50%,-50%) rotate(72deg)}
.system-rings i:nth-child(3){width:92%;transform:translate(-50%,-50%) rotate(-22deg)}
.planetary-core{position:absolute;z-index:3;top:50%;left:50%;width:108px;height:108px;border-radius:50%;background:var(--gold);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;box-shadow:0 16px 50px rgba(176,131,0,.32);transform:translate(-50%,-50%)}
.planetary-core b{font-size:18px}.planetary-core small{margin-top:1px;font-size:7px;letter-spacing:.08em;text-transform:uppercase}
.planet-node{--node-color:#fff;position:absolute;z-index:4;width:138px;min-height:92px;padding:12px 8px;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;transition:transform .45s var(--ease),filter .3s ease,opacity .3s ease}
.planet-node>i{width:48px;height:48px;margin-bottom:8px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 2%,var(--node-color) 22%,color-mix(in srgb,var(--node-color) 45%,#000) 72%,#02070c 100%);box-shadow:0 0 28px color-mix(in srgb,var(--node-color) 42%,transparent);transition:transform .35s var(--ease),box-shadow .35s ease}
.planet-node span{color:var(--node-color);font-size:11px;font-weight:700;letter-spacing:.12em}
.planet-node small{margin-top:2px;color:rgba(255,255,255,.54);font-size:8px}
.planet-node:hover>i{transform:scale(1.16);box-shadow:0 0 44px color-mix(in srgb,var(--node-color) 64%,transparent)}
.planet-node:hover{transform:translateY(-5px)}
.planet-aiuto{--node-color:var(--aiuto);left:6%;top:12%}
.planet-presto{--node-color:var(--presto);right:5%;top:11%}
.planet-tempo{--node-color:var(--tempo);left:0;top:51%}
.planet-voce{--node-color:var(--voce);right:0;top:51%}
.planet-cecilia{--node-color:var(--cecilia);left:25%;bottom:0}
.planet-guida{--node-color:var(--guida);right:24%;bottom:0}
.planetary-stage.is-selecting .planet-node{opacity:.12;filter:blur(4px);pointer-events:none}
.planetary-stage.is-selecting .planet-node.is-selected{z-index:10;opacity:1;filter:none;transform:translate(var(--zoom-x,0),var(--zoom-y,0)) scale(2.4)}
.planetary-stage.is-selecting .planet-node.is-selected>i{box-shadow:0 0 64px color-mix(in srgb,var(--node-color) 70%,transparent)}

.presentation-back{min-height:44px;padding:0 4px;border:0;background:transparent;display:inline-flex;align-items:center;gap:10px;color:rgba(255,255,255,.66);font-size:11px;font-weight:600}
.presentation-back:hover{color:#fff}.presentation-back svg{width:18px;fill:none;stroke:currentColor;stroke-width:1.4}
.agent-presentation{--presentation-color:var(--gold-light);animation:presentation-in .6s var(--ease) both}
.presentation-intro{min-height:520px;margin-top:26px;display:grid;grid-template-columns:minmax(360px,.82fr) minmax(0,1.18fr);gap:clamp(32px,6vw,80px);align-items:center}
.presentation-orb{min-height:420px;display:grid;place-items:center}
.presentation-orb canvas{width:min(100%,440px);aspect-ratio:1}
.presentation-copy .agent-role{color:var(--presentation-color)}
.presentation-copy h2{margin:12px 0 0;color:var(--presentation-color);font-size:clamp(54px,7vw,90px);font-weight:500;letter-spacing:-.04em;line-height:1}
.presentation-when{margin:22px 0 0;font-size:clamp(18px,2vw,24px);font-weight:600;line-height:1.35}
.presentation-description{max-width:620px;margin:16px 0 0;color:var(--muted-dark)}
.presentation-reasons{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.presentation-reasons article{padding:18px;border:1px solid rgba(255,255,255,.15);border-radius:var(--radius);background:rgba(255,255,255,.04)}
.presentation-reasons span,.chat-columns article>span,.chat-request>span,.comparison-outcome>span{color:var(--presentation-color);font-size:9px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.presentation-reasons p{margin:10px 0 0;color:rgba(255,255,255,.78);font-size:12px}
.chat-comparison{margin-top:clamp(60px,8vw,96px);padding-top:42px;border-top:1px solid var(--line-dark)}
.comparison-heading{display:grid;grid-template-columns:.45fr 1fr;gap:18px 50px;align-items:start}
.comparison-heading h3{margin:0;font-size:clamp(32px,4.4vw,54px);font-weight:500;letter-spacing:-.035em;line-height:1.05}
.comparison-heading>p:last-child{grid-column:2;max-width:580px;margin:0;color:var(--muted-dark)}
.chat-request{max-width:820px;margin:34px auto 0;padding:20px 22px;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);background:rgba(255,255,255,.06)}
.chat-request p{margin:8px 0 0;font-size:16px;font-weight:550}
.chat-columns{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chat-columns article{min-height:250px;padding:26px;border:1px solid rgba(255,255,255,.15);border-radius:var(--radius);background:rgba(0,0,0,.16)}
.chat-columns article>strong{display:block;margin-top:34px;font-size:21px;font-weight:550}
.chat-specialist{border-color:color-mix(in srgb,var(--presentation-color) 62%,transparent)!important;background:color-mix(in srgb,var(--presentation-color) 9%,transparent)!important}
.chat-answer{margin:16px 0 0;color:rgba(255,255,255,.7);font-size:13px;line-height:1.75}
.chat-specialist .chat-answer{color:#fff}
.comparison-outcome{margin-top:12px;padding:22px;border-radius:var(--radius);background:var(--presentation-color);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:30px}
.comparison-outcome span{color:#fff}.comparison-outcome strong{max-width:730px;font-size:13px;font-weight:600;text-align:right}
.presentation-actions{margin-top:28px;display:flex;justify-content:flex-end}

[data-reveal]{transition:opacity .72s var(--ease),transform .72s var(--ease),filter .72s var(--ease)}
.js-motion [data-reveal]:not(.is-visible){opacity:.3;transform:translateY(34px);filter:blur(5px)}
.js-motion [data-reveal="split"]:not(.is-visible){transform:scale(.97)}
.js-motion [data-reveal="focus"]:not(.is-visible){transform:translateX(-34px)}
.js-motion [data-reveal="download"]:not(.is-visible){transform:translateX(34px)}

@keyframes panel-in{from{opacity:0;transform:translateY(24px) scale(.985);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes system-zoom-out{0%{opacity:0;transform:scale(2.35);filter:blur(12px)}55%{opacity:1;filter:blur(2px)}100%{opacity:1;transform:scale(1);filter:none}}
@keyframes presentation-in{from{opacity:0;transform:scale(.96);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}

:focus-visible{outline:2px solid var(--gold-light);outline-offset:4px}

@media(max-width:1020px){
  .desktop-nav{display:none}.header-inner{grid-template-columns:1fr auto}.text-action{display:none}
  .menu-toggle{min-width:74px;min-height:44px;padding:0;border:0;background:transparent;display:flex;align-items:center;justify-content:flex-end;gap:10px;font-size:11px}
  .menu-icon,.menu-icon::before{display:block;width:18px;height:1px;background:currentColor;transition:transform .22s ease}.menu-icon::before{content:"";transform:translateY(6px)}
  .menu-toggle[aria-expanded=true] .menu-icon{transform:translateY(3px) rotate(45deg)}.menu-toggle[aria-expanded=true] .menu-icon::before{transform:rotate(-90deg)}
  .mobile-menu{position:absolute;inset:82px 0 auto;padding:22px var(--gutter) 34px;border-top:1px solid var(--line-dark);background:rgba(0,10,22,.98);display:flex;flex-direction:column;opacity:0;transform:translateY(-130%);pointer-events:none;transition:transform .32s var(--ease),opacity .18s ease}
  .mobile-menu.is-open{opacity:1;transform:none;pointer-events:auto}
  .mobile-menu a,.mobile-menu button{min-height:54px;padding:0;border:0;border-bottom:1px solid var(--line-dark);background:transparent;display:flex;align-items:center;color:#fff;font-size:14px;text-decoration:none}
  .hero{grid-template-columns:minmax(0,1fr) 360px}.hero-visual{min-height:430px}
  .signal{padding:24px}.signal strong{font-size:34px}.signal>span:nth-of-type(2){max-width:72%}.system-preview{width:104px;height:94px}
  .agent-selector{overflow-x:auto;grid-template-columns:repeat(6,minmax(150px,1fr));padding-inline:0;scrollbar-width:none}.agent-selector::-webkit-scrollbar{display:none}
  .agent-stage{grid-template-columns:1fr 1fr;gap:42px}
  .download-grid{grid-template-columns:1fr;gap:64px}.download-copy{max-width:720px}.download-window{max-width:720px;margin:auto}
  .position-map{grid-template-columns:1fr}.position-bridge{width:100%;height:72px;justify-content:center;transform:rotate(90deg)}
  .trust-proof{grid-template-columns:1fr}.trust-proof article{min-height:0;border-right:1px solid var(--line-light);border-bottom:0}.trust-proof article:last-child{border-bottom:1px solid var(--line-light)}
  .agent-directory{grid-template-columns:1fr}.directory-copy{max-width:700px}.planetary-stage{min-height:620px}
}

@media(max-width:760px){
  :root{--gutter:22px;--section:94px}
  .header-inner{height:70px}.brand-by{display:none}.mobile-menu{inset-block-start:70px}
  .hero{min-height:720px;padding-top:112px;padding-bottom:90px;display:block}
  .hero-copy{max-width:620px}.hero h1{font-size:clamp(42px,12vw,58px)}.hero-lead{font-size:16px}
  .hero-visual{position:absolute;z-index:0;right:-55%;bottom:-18%;width:118vw;min-height:0;opacity:.36}
  #hero-orb{width:100%;transform:none;filter:brightness(.56)}
  .signal-strip{margin-top:-20px;grid-template-columns:1fr}.signal{min-height:240px}.signal strong{max-width:70%;margin-top:28px}.signal>span:nth-of-type(2){max-width:64%}
  .specialists-heading{text-align:left}.specialists-heading h2{font-size:52px}.specialists-heading>p:last-child{margin-left:0;font-size:16px}
  .agent-tab{min-height:74px}.agent-stage{min-height:0;grid-template-columns:1fr;gap:14px;padding-top:54px}.agent-orb-wrap{min-height:320px}#agent-orb{width:min(84vw,360px)}
  .agent-copy h3{font-size:58px}.agent-outcomes>div{grid-template-columns:1fr;gap:5px}
  .focus-inner{min-height:720px;align-items:flex-start}.focus-copy{max-width:92%}.focus h2{font-size:46px}.focus-orb{top:auto;right:-58%;bottom:-26%;width:135vw;transform:none;opacity:.3}
  .download h2,.positioning h2,.composer-trust h2,.final-cta h2{font-size:42px}.window-body{min-height:330px}
  .positioning-statement{grid-template-columns:1fr;gap:24px}.positioning-statement h2{margin-top:16px}
  .trust-intro{text-align:left}.trust-intro>p:last-child{margin-left:0;font-size:16px}.trust-proof article{padding:28px}.trust-proof h3{margin-top:42px}
  .final-cta-inner>div{flex-direction:column}.final-cta-inner .button{width:100%}
  .footer-top{grid-template-columns:1fr 1fr}.footer-top>div:first-child{grid-column:1/-1}.footer-bottom{grid-template-columns:1fr}.footer-bottom small{grid-column:1}
  .pricing-grid{grid-template-columns:1fr}.pricing-grid article{min-height:340px}
  .modal{padding:10px}.agents-panel,.pricing-panel{max-height:calc(100dvh - 20px);padding:56px 18px 26px}
  .agent-directory{min-height:760px;display:block}.directory-copy h2{font-size:42px}.directory-copy>span{margin-top:20px}
  .planetary-stage{min-height:560px;margin-top:12px}.planetary-core{width:76px;height:76px}
  .planet-node{width:104px;min-height:78px}.planet-node>i{width:39px;height:39px}
  .planet-aiuto{left:0;top:10%}.planet-presto{right:0;top:10%}.planet-tempo{left:-2%;top:48%}.planet-voce{right:-2%;top:48%}.planet-cecilia{left:16%;bottom:2%}.planet-guida{right:16%;bottom:2%}
  .presentation-intro{grid-template-columns:1fr;gap:0}.presentation-orb{min-height:290px}.presentation-orb canvas{width:min(78vw,300px)}
  .presentation-copy h2{font-size:58px}.presentation-reasons,.chat-columns{grid-template-columns:1fr}.comparison-heading{grid-template-columns:1fr}.comparison-heading>p:last-child{grid-column:1}.comparison-outcome{align-items:flex-start;flex-direction:column}.comparison-outcome strong{text-align:left}.presentation-actions .button{width:100%}
}

@media(max-width:480px){
  .hero{min-height:760px}.hero-actions{flex-direction:column}.hero-actions .button{width:100%}
  .signal strong{max-width:60%;font-size:32px}.system-preview{right:16px}
  .agent-actions{align-items:stretch}.agent-actions .button{flex:1}
  .download-card{grid-template-columns:auto 1fr}.download-arrow{display:none}.window-body{padding-inline:20px}
  .footer-top{grid-template-columns:1fr}.footer-top>div:first-child{grid-column:auto}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
  .js-motion [data-reveal]:not(.is-visible){opacity:1;transform:none;filter:none}
}

/* Rebrand v2.1 — shared surfaces, viewport-safe compositions and spatial ecosystem */
:root{--surface-dark:#000a16;--surface-paper:#f5f4ef;--stroke-dark:rgba(255,255,255,.14);--stroke-light:rgba(0,10,22,.14);--panel-radius:10px;--transition-ui:220ms var(--ease)}
.surface-panel{border:1px solid var(--stroke-dark);border-radius:var(--panel-radius);background:rgba(7,19,34,.74);backdrop-filter:blur(18px)}
.hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);isolation:isolate;clip-path:inset(0);overflow:clip}
.hero-visual{width:100%;max-width:100%;overflow:hidden;clip-path:inset(0);contain:paint}
#hero-orb{width:min(100%,720px);max-width:none;transform:translateX(8%)}
.hero-ribbon{position:relative;z-index:4;margin-top:-28px;padding-bottom:clamp(96px,10vw,144px)}
.hero-ribbon-lines{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
.hero-ribbon-lines p{min-height:94px;margin:0;padding:20px clamp(16px,2vw,30px);border-left:1px solid var(--line-dark);display:flex;flex-direction:column;justify-content:center;gap:7px}
.hero-ribbon-lines p:last-child{border-right:1px solid var(--line-dark)}
.hero-ribbon-lines b{color:#fff;font-size:13px;letter-spacing:.12em}.hero-ribbon-lines span{max-width:26ch;color:rgba(255,255,255,.64);font-size:11px;line-height:1.45}
.explore-line{width:100%;min-height:70px;padding:0;border:0;border-bottom:1px solid var(--line-dark);background:transparent;display:flex;align-items:center;justify-content:center;gap:10px;color:#fff;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;transition:color var(--transition-ui),background-color var(--transition-ui)}
.explore-line i{font-size:18px;font-style:normal;transition:transform var(--transition-ui)}.explore-line:hover{background:rgba(255,255,255,.05);color:var(--gold-light)}.explore-line:hover i{transform:translate(3px,-3px)}

.agent-selector-wrap{margin-inline:var(--gutter);border:0}.agent-selector{width:max-content;max-width:100%;margin:0;padding:4px;overflow:auto;border:1px solid var(--line-light);border-radius:var(--radius);background:#fff;display:flex;gap:4px;scrollbar-width:none}.agent-selector::-webkit-scrollbar{display:none}
.agent-tab,.agent-tab:first-child{min-width:max-content;min-height:58px;padding:0 16px;border:0!important;border-radius:7px;justify-content:flex-start;color:rgba(0,10,22,.58);gap:8px}.agent-tab:hover{background:rgba(0,10,22,.05)}.agent-tab.is-active{background:var(--navy-950);color:#fff;box-shadow:0 0 0 1px var(--agent-color,#d4a83a),0 0 20px color-mix(in srgb,var(--agent-color,#d4a83a) 42%,transparent);animation:selector-on .48s var(--ease)}
.agent-tab span{font-size:10px}.agent-tab small{font-size:9px;color:currentColor;opacity:.68}
.agent-stage{overflow:hidden}.agent-stage::before{opacity:.78}.agent-stage .button-white{min-width:174px;border:0;box-shadow:none}.watch-link svg{border:0}.watch-link:hover svg{transform:translateX(3px)}

.focus{clip-path:inset(0);overflow:clip}.focus-inner{overflow:visible}.focus-orb{top:-12%;right:-21%;bottom:auto;width:min(72vw,880px);height:auto;transform:none;opacity:.48}.focus-copy>p:not(.section-label){max-width:650px;font-size:18px;line-height:1.65}
.download-icon{background:var(--gold);color:#fff}.download-card:hover .download-icon{background:var(--ink)}.download-card:hover small{color:var(--muted-light)}
.positioning{padding-bottom:clamp(84px,10vw,140px)}.positioning-statement{display:block}.positioning-statement .section-label{margin-bottom:18px}.positioning-statement>p:last-child{max-width:none;margin-top:20px;font-size:18px}.productivity-graphic{position:relative;min-height:440px;margin-top:clamp(56px,8vw,98px);padding:clamp(24px,4vw,48px);overflow:hidden;border:1px solid var(--line-dark);border-radius:var(--radius);background:radial-gradient(80% 110% at 100% 100%,rgba(212,168,58,.2),transparent 55%),#071322}.graph-copy{position:relative;z-index:2;display:grid;gap:10px}.graph-copy span{color:rgba(255,255,255,.58);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}.graph-copy strong{font-size:clamp(46px,7vw,90px);font-weight:500;letter-spacing:-.05em;line-height:.9}.graph-copy em{color:var(--gold-light);font-size:clamp(19px,2.4vw,34px);font-style:normal;font-weight:500;letter-spacing:-.03em}.graph-plot{position:absolute;inset:25% 8% 14% 34%;border-left:1px solid rgba(255,255,255,.22);border-bottom:1px solid rgba(255,255,255,.22)}.graph-line{position:absolute;right:3%;bottom:8%;left:2%;height:70%;border-top:3px solid var(--gold-light);border-radius:100% 0 0 0;transform:skewY(-22deg);transform-origin:left bottom;box-shadow:0 0 24px rgba(212,168,58,.4)}.graph-point{position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 7px rgba(212,168,58,.2),0 0 22px rgba(212,168,58,.7)}.point-a{left:3%;bottom:13%}.point-b{left:47%;bottom:43%}.point-c{right:3%;top:2%}.graph-start,.graph-end{position:absolute;color:rgba(255,255,255,.58);font-size:10px;letter-spacing:.08em;text-transform:uppercase}.graph-start{bottom:-31px;left:0}.graph-end{right:0;top:-28px}.composer-trust{margin-top:0;padding-top:var(--section);background:var(--navy-950);color:#fff}.composer-trust .section-label{color:var(--gold-light)}.composer-trust .trust-intro>p:last-child,.composer-trust .trust-proof p{color:var(--muted-dark)}.composer-trust .trust-proof article{border-color:var(--line-dark)}.composer-trust .trust-proof h3{color:#fff}.composer-trust .proof-mark{color:var(--gold-light)}

.agents-panel{overflow:hidden}.agent-directory{position:relative}.planetary-stage{perspective:1000px;transform-style:preserve-3d;overflow:visible}.system-depth i{position:absolute;top:50%;left:50%;width:74%;aspect-ratio:1;border:1px solid rgba(255,255,255,.13);border-radius:50%;transform:translate(-50%,-50%) rotateX(66deg) rotateZ(20deg)}.system-depth i:nth-child(2){width:48%;transform:translate(-50%,-50%) rotateX(66deg) rotateZ(-28deg)}.system-depth i:nth-child(3){width:94%;opacity:.42;transform:translate(-50%,-50%) rotateX(66deg) rotateZ(56deg)}
.planetary-core{width:145px;height:145px;background:transparent;box-shadow:none;overflow:visible}.planetary-core canvas{position:absolute;inset:0;width:100%;height:100%;filter:brightness(.9)}.planetary-core b{position:relative;z-index:2;margin-top:150px;color:var(--gold-light);font-size:10px;letter-spacing:.14em}.planet-node{width:150px;min-height:132px;padding:0;transform-style:preserve-3d;transition:transform .72s var(--ease),filter .42s ease,opacity .42s ease}.planet-node canvas{width:82px;height:82px;margin-bottom:8px;filter:brightness(.92)}.planet-node span{font-size:10px}.planet-node small{font-size:8px}.planet-node:hover{transform:translateY(-6px) scale(1.04)}.planet-node:hover canvas{filter:brightness(1.16);filter:drop-shadow(0 0 18px var(--node-color))}.planet-aiuto{left:6%;top:12%;animation:orbit-drift-a 18s ease-in-out infinite alternate}.planet-presto{right:4%;top:9%;animation:orbit-drift-b 22s ease-in-out infinite alternate}.planet-tempo{left:0;top:52%;animation:orbit-drift-c 20s ease-in-out infinite alternate}.planet-voce{right:0;top:49%;animation:orbit-drift-b 17s ease-in-out infinite alternate-reverse}.planet-cecilia{left:24%;bottom:0;animation:orbit-drift-c 19s ease-in-out infinite alternate-reverse}.planet-guida{right:22%;bottom:0;animation:orbit-drift-a 23s ease-in-out infinite alternate-reverse}
.planetary-stage.is-selecting .planet-node{opacity:.1;filter:blur(5px);animation-play-state:paused}.planetary-stage.is-selecting .planet-node.is-selected{opacity:1;filter:none;transform:translate(var(--zoom-x,0),var(--zoom-y,0)) translateZ(90px) scale(2.2);animation-play-state:paused}.planetary-stage.is-presenting .system-depth,.planetary-stage.is-presenting .planetary-core{opacity:.08;filter:blur(5px)}.planetary-stage.is-presenting .planet-node:not(.is-selected){opacity:0}.planetary-stage.is-presenting .planet-node.is-selected{z-index:14;transform:translate(var(--zoom-x,0),var(--zoom-y,0)) translateZ(130px) scale(2.45)}.planetary-stage.is-presenting .planet-node.is-selected>span,.planetary-stage.is-presenting .planet-node.is-selected>small{opacity:0}
.agent-presentation{position:absolute;z-index:12;top:50%;right:0;left:0;padding-left:50%;transform:translateY(-50%);pointer-events:auto;animation:presentation-in .62s var(--ease) both}.presentation-back{position:absolute;top:-64px;left:50%}.presentation-intro{display:block;min-height:0;margin:0}.presentation-copy{max-width:550px}.presentation-copy h2{font-size:clamp(48px,6vw,82px)}.presentation-reasons article{background:rgba(255,255,255,.055)}.presentation-actions{justify-content:flex-start;gap:12px}.presentation-actions .button{min-width:180px}.modal-close{border-radius:50%;border-color:rgba(212,168,58,.6);background:var(--navy-950);box-shadow:0 0 0 4px rgba(212,168,58,.1)}
.agent-directory.is-presenting .directory-copy{opacity:0;pointer-events:none;transform:translateX(-18px);transition:opacity .24s ease,transform .24s var(--ease)}
@keyframes selector-on{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--agent-color,#d4a83a) 0%,transparent)}55%{box-shadow:0 0 0 5px color-mix(in srgb,var(--agent-color,#d4a83a) 18%,transparent),0 0 28px color-mix(in srgb,var(--agent-color,#d4a83a) 55%,transparent)}100%{box-shadow:0 0 0 1px var(--agent-color,#d4a83a),0 0 20px color-mix(in srgb,var(--agent-color,#d4a83a) 42%,transparent)}}
@keyframes orbit-drift-a{to{translate:16px -12px;rotate:4deg}}@keyframes orbit-drift-b{to{translate:-18px 14px;rotate:-5deg}}@keyframes orbit-drift-c{to{translate:12px 16px;rotate:3deg}}
@media(max-width:1020px){.hero{grid-template-columns:minmax(0,1fr) minmax(280px,.72fr)}.hero-ribbon-lines span{max-width:20ch}.agent-selector-wrap{overflow:hidden}.agent-selector{margin-left:0}.agent-presentation{padding-left:42%}.presentation-back{left:42%}}
@media(max-width:760px){.hero{display:block;min-height:700px;overflow:clip}.hero-visual{right:-30%;bottom:-3%;width:94vw;height:76%;opacity:.28}.hero-ribbon{margin-top:0;padding-bottom:94px}.hero-ribbon-lines{grid-template-columns:1fr}.hero-ribbon-lines p{min-height:72px;border-right:1px solid var(--line-dark)}.hero-ribbon-lines p:not(:first-child){border-top:1px solid var(--line-dark)}.hero-ribbon-lines span{max-width:none}.agent-selector-wrap{margin-inline:var(--gutter)}.agent-selector{max-width:calc(100vw - var(--gutter)*2)}.agent-tab{min-height:56px}.focus{overflow:clip}.focus-inner{min-height:680px}.focus-orb{top:-6%;right:-48%;width:130vw;opacity:.38}.productivity-graphic{min-height:450px}.graph-plot{inset:46% 10% 16% 8%}.graph-copy strong{max-width:9ch}.composer-trust{padding-top:94px}.agent-directory{min-height:640px}.planetary-stage{min-height:520px;transform:scale(.88);transform-origin:center bottom}.planetary-core{width:106px;height:106px}.planetary-core b{margin-top:110px}.planet-node{width:104px;min-height:100px}.planet-node canvas{width:60px;height:60px}.planet-node small{display:none}.planet-aiuto{left:0;top:10%}.planet-presto{right:0;top:8%}.planet-tempo{left:-4%;top:49%}.planet-voce{right:-4%;top:47%}.planet-cecilia{left:17%;bottom:0}.planet-guida{right:15%;bottom:0}.agent-presentation{position:relative;top:auto;right:auto;left:auto;z-index:20;margin-top:-150px;padding:220px 0 0;transform:none}.presentation-back{top:150px;left:0}.presentation-reasons{grid-template-columns:1fr}.presentation-actions{flex-direction:column}.presentation-actions .button{width:100%}.planetary-stage.is-selecting .planet-node.is-selected,.planetary-stage.is-presenting .planet-node.is-selected{transform:translate(var(--zoom-x,0),var(--zoom-y,0)) translateZ(50px) scale(1.75)}}
@media(max-width:900px){.hero{display:block;min-height:700px;overflow:clip}.hero-copy{max-width:620px}.hero-visual{position:absolute;z-index:0;right:-30%;bottom:-3%;width:94vw;height:76%;min-height:0;opacity:.28}.hero-ribbon{margin-top:0}}
@media(max-width:640px){html,body{width:100%;max-width:100%;overflow-x:clip}.hero{min-height:720px}.hero-copy{width:100%;max-width:100%;overflow:hidden}.hero h1{max-width:100%;font-size:clamp(38px,10.8vw,44px);letter-spacing:-.052em;text-wrap:pretty}.hero-lead{max-width:22rem}.hero-actions{width:100%;display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px}.hero-actions .button{width:calc(100vw - 44px)!important;max-width:calc(100vw - 44px)!important;min-width:0;padding-inline:12px}.hero-visual{right:-42%;width:112vw}.hero-ribbon-lines p{padding-inline:16px}.planet-node canvas{filter:brightness(1.22) saturate(1.12)}}

/* Home corrections — browser-safe clipping, shared controls and spatial continuity */
main{display:flex;flex-direction:column}.hero{order:0}.hero-ribbon{order:1}.specialists{order:2}.composer-trust{order:3}.focus{order:4}.download{order:5}.positioning{order:6}.final-cta{display:none!important}
.hero-ribbon-lines{overflow:hidden;border:1px solid var(--line-dark);border-radius:var(--radius)}.hero-ribbon-lines p{min-height:104px;border:0!important;display:grid;grid-template-columns:minmax(68px,.28fr) 1fr;align-items:center;gap:22px}.hero-ribbon-lines p+p{border-left:1px solid var(--line-dark)!important}.hero-ribbon-lines b{font-size:clamp(42px,5.2vw,68px);font-weight:500;letter-spacing:-.06em;line-height:1}.hero-ribbon-lines span{max-width:21ch;font-size:12px}.explore-line{border:0;margin-top:12px;min-height:52px}.explore-line:hover{background:transparent}
.button-secondary{background:transparent!important}.directory-guide,.agent-step{border:1px solid rgba(255,255,255,.28);border-radius:var(--radius);background:transparent;color:#fff;min-height:44px;padding:0 14px;font:600 10px var(--font);letter-spacing:.09em;text-transform:uppercase;transition:background-color var(--transition-ui),border-color var(--transition-ui),color var(--transition-ui),transform var(--transition-ui)}.directory-guide{margin-top:32px;display:inline-flex;align-items:center;gap:10px}.directory-guide i{font-size:16px;font-style:normal}.directory-guide:hover,.agent-step:hover{border-color:var(--gold-light);background:rgba(212,168,58,.12);color:var(--gold-light);transform:translateY(-2px)}
#hero-orb{background:radial-gradient(circle at 48% 48%,rgba(212,168,58,.42) 0 1px,transparent 2px),radial-gradient(circle at 50% 50%,rgba(212,168,58,.12),transparent 66%)}
.agent-selector-wrap{display:flex;justify-content:center;margin-top:clamp(42px,6vw,72px)}.agent-selector{width:min(100%,1020px)}.agent-tab{flex:1;justify-content:center}.agent-tab:hover{color:var(--gold);background:rgba(176,131,0,.06)}.agent-tab.is-active{box-shadow:none}.agent-progress{align-items:center}.agent-step{width:36px;min-width:36px;min-height:36px;padding:0;display:grid;place-items:center;color:var(--ink);border-color:var(--line-light);font-size:16px;letter-spacing:0}.agent-step:hover{color:var(--gold);border-color:var(--gold)}.agent-copy h3{text-transform:uppercase}.agent-stage{transition:background-color .5s var(--ease)}
.focus-orb{top:4%;right:-12%;width:min(64vw,840px);opacity:.68}.focus-orb::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 64%);pointer-events:none}.download-window{transform:perspective(1000px) rotateY(-8deg) rotateX(3deg);transform-origin:center;transition:transform .6s var(--ease)}.download-visual:hover .download-window{transform:perspective(1000px) rotateY(-2deg) rotateX(1deg) translateY(-8px)}
.positioning .productivity-graphic{display:none}.positioning{padding-top:var(--section);padding-bottom:var(--section)}.positioning-statement{text-align:center}.positioning-statement>p:last-child{margin-inline:auto}.composer-trust{padding-bottom:clamp(84px,10vw,140px)}.composer-trust .trust-proof{border:1px solid var(--line-dark);border-radius:var(--radius);overflow:hidden}.composer-trust .trust-proof article{border-top:0;border-bottom:0}.composer-trust .trust-proof article+article{border-left:1px solid var(--line-dark)}
.agents-panel{overflow-y:auto;overflow-x:hidden}.planetary-stage{min-height:620px}.system-depth{display:none}.planetary-core{width:190px;height:190px}.planetary-core b{margin-top:190px;font-size:11px}.planet-node{width:132px;min-height:118px}.planet-node canvas{width:88px;height:88px;filter:brightness(1.14) saturate(1.2)}.planet-aiuto{left:8%;top:10%}.planet-presto{left:29%;top:3%}.planet-tempo{left:50%;top:7%}.planet-voce{right:7%;top:24%}.planet-cecilia{right:15%;bottom:8%}.planet-guida{left:28%;bottom:0}.planetary-stage.is-selecting .planet-node:not(.is-selected){opacity:0;filter:blur(8px)}.planetary-stage.is-selecting .planet-node.is-selected{opacity:1}.planetary-stage.is-presenting .planet-node.is-selected{transition-delay:0ms}.presentation-title-row{display:flex;align-items:center;gap:12px}.presentation-title-row h2{margin:12px 0 0}.presentation-title-row .agent-step{margin-top:12px;color:#fff;border-color:rgba(255,255,255,.26)}.presentation-title-row .agent-step:hover{color:var(--gold-light);border-color:var(--gold-light)}
@media(max-width:760px){.hero-ribbon-lines p{min-height:86px;grid-template-columns:72px 1fr}.hero-ribbon-lines p+p{border-left:0!important;border-top:1px solid var(--line-dark)!important}.hero-ribbon-lines b{font-size:42px}.agent-selector{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}.agent-tab{min-width:0;padding-inline:8px}.agent-tab small{display:none}.planetary-stage{min-height:490px;max-width:100%;overflow:hidden}.planetary-core{width:124px;height:124px}.planetary-core b{margin-top:130px}.planet-node{width:92px;min-height:85px}.planet-node canvas{width:62px;height:62px}.planet-aiuto{left:1%;top:8%}.planet-presto{left:30%;top:1%}.planet-tempo{right:5%;left:auto;top:7%}.planet-voce{right:0;top:39%}.planet-cecilia{right:16%;bottom:0}.planet-guida{left:8%;bottom:2%}.agent-presentation{position:relative;margin-top:-110px;padding:145px 0 0}.presentation-title-row h2{font-size:48px}.presentation-back{top:84px}.composer-trust .trust-proof{grid-template-columns:1fr}.composer-trust .trust-proof article+article{border-top:1px solid var(--line-dark);border-left:0}}

/* Impeccable responsive and interaction pass */
@media(min-width:901px){
  .hero{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .hero-visual{width:calc(100% + 60px);min-height:610px;margin-left:-40px}
  #hero-orb{width:min(78vw,940px);transform:none}
}
.hero-visual::before{width:88%;filter:blur(96px)}
#hero-orb{background:none}
/* .hero keeps overflow:clip from the base rules — the orb is allowed to sit
   flush with the right edge of the hero section, but must never bleed past
   the hero's own box into the data-strip section below it. */
.hero,.hero-visual{overflow:clip}

.hero-actions .button,
.presentation-actions .button,
.final-cta-inner>div .button{width:240px;min-width:240px;flex:0 0 240px}

.hero-ribbon-lines{grid-template-columns:repeat(3,minmax(0,1fr))}
.hero-ribbon-lines p{
  position:relative;
  min-width:0;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(14px,2.2vw,30px);
  padding-inline:clamp(18px,2.2vw,32px)
}
.hero-ribbon-lines p+p{border:0!important}
.hero-ribbon-lines p+p::before{
  content:"";
  position:absolute;
  top:20%;
  bottom:20%;
  left:0;
  width:1px;
  background:var(--line-dark)
}
.hero-ribbon-lines b{min-width:0;font-size:clamp(40px,4.5vw,64px);white-space:nowrap}
.hero-ribbon-lines span{min-width:0;max-width:22ch;justify-self:end;text-align:right}

.agent-selector{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;overflow:hidden}
.agent-tab,.agent-tab:first-child{
  width:100%;
  min-width:0;
  padding:0 clamp(10px,1.2vw,16px);
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-content:center;
  align-items:baseline;
  justify-content:stretch;
  gap:8px;
  text-align:left
}
.agent-tab span,.agent-tab small{min-width:0;overflow:hidden;text-overflow:ellipsis}
.agent-tab:hover:not(.is-active){color:var(--tab-color);background:color-mix(in srgb,var(--tab-color) 9%,#fff)}
.agent-tab.is-active{
  background:var(--navy-950);
  color:#fff;
  box-shadow:inset 0 -3px var(--tab-color),0 9px 24px color-mix(in srgb,var(--tab-color) 20%,transparent)
}
.agent-stage.is-switching .agent-orb-wrap{animation:agent-orb-change .7s var(--ease) both}
.agent-stage.is-switching .agent-copy>*{animation:agent-copy-change .58s var(--ease) both}
.agent-stage.is-switching .agent-copy>*:nth-child(2){animation-delay:.035s}
.agent-stage.is-switching .agent-copy>*:nth-child(3){animation-delay:.07s}
.agent-stage.is-switching .agent-copy>*:nth-child(4){animation-delay:.105s}
.agent-stage.is-switching .agent-copy>*:nth-child(n+5){animation-delay:.14s}
@keyframes agent-orb-change{
  0%{opacity:.2;transform:scale(.9) rotate(-3deg);filter:blur(12px)}
  100%{opacity:1;transform:none;filter:none}
}
@keyframes agent-copy-change{
  0%{opacity:0;transform:translateY(16px);filter:blur(7px)}
  100%{opacity:1;transform:none;filter:none}
}

.trust-proof{position:relative}
.composer-trust .trust-proof article{position:relative;min-height:330px;padding:clamp(30px,3.2vw,44px);border:0!important}
.composer-trust .trust-proof article+article::before{
  content:"";
  position:absolute;
  top:11%;
  bottom:11%;
  left:0;
  width:1px;
  background:var(--line-dark)
}
.proof-mark{
  width:68px;
  height:68px;
  border:1px solid rgba(212,168,58,.42);
  border-radius:var(--radius);
  background:rgba(212,168,58,.07);
  color:var(--gold-light)
}
.proof-mark svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.proof-mark svg circle{fill:currentColor;stroke:none}
.proof-mark .proof-baseline{stroke:currentColor;stroke-opacity:.32;stroke-width:1}
.proof-mark .proof-orbit{fill:none;stroke:currentColor;stroke-opacity:.35;stroke-width:1}
.trust-proof h3{margin-top:58px;font-size:clamp(20px,2vw,25px)}

.ownership-graphic{
  position:relative;
  margin-top:clamp(54px,7vw,92px);
  overflow:hidden;
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  background:radial-gradient(80% 130% at 50% 0,rgba(212,168,58,.13),transparent 62%),var(--navy-900)
}
.ownership-creative{min-height:300px;padding:clamp(30px,5vw,64px);display:flex;flex-direction:column;justify-content:center}
.ownership-creative>span,.ownership-divider span{color:var(--gold-light);font-size:10px;font-weight:650;letter-spacing:.12em;text-transform:uppercase}
.ownership-creative strong{margin-top:14px;font-size:clamp(28px,4vw,54px);font-weight:500;letter-spacing:-.035em}
.score-line{position:relative;height:76px;margin-top:42px;display:flex;align-items:flex-end;gap:clamp(7px,1.4vw,18px)}
.score-line::before,.score-line::after{content:"";position:absolute;top:50%;height:1px;width:14%;background:linear-gradient(90deg,transparent,var(--gold-light))}
.score-line::before{left:0}
.score-line::after{right:0;background:linear-gradient(90deg,var(--gold-light),transparent)}
.score-line i{position:relative;width:4px;height:var(--bar,20px);border-radius:4px;background:var(--gold-light);box-shadow:0 0 18px rgba(212,168,58,.32);animation:score-breathe 2.8s ease-in-out infinite alternate}
.score-line i:nth-child(2){--bar:34px;animation-delay:-.4s}
.score-line i:nth-child(3){--bar:52px;animation-delay:-.9s}
.score-line i:nth-child(4){--bar:64px;animation-delay:-1.3s}
.score-line i:nth-child(5){--bar:46px;animation-delay:-1.7s}
.score-line i:nth-child(6){--bar:58px;animation-delay:-.6s}
.score-line i:nth-child(7){--bar:38px;animation-delay:-1.1s}
.score-line i:nth-child(8){--bar:50px;animation-delay:-1.9s}
.score-line i:nth-child(9){--bar:28px;animation-delay:-.2s}
.ownership-divider{position:relative;height:1px;background:var(--line-dark);display:flex;justify-content:center}
.ownership-divider span{position:absolute;top:50%;padding:0 18px;background:var(--navy-900);transform:translateY(-50%);white-space:nowrap}
.ownership-support{min-height:160px;padding:44px clamp(24px,5vw,64px) 34px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;align-items:center}
.ownership-support span{position:relative;min-width:0;padding-top:26px;color:rgba(255,255,255,.66);font-size:10px;text-align:center}
.ownership-support span::before{
  content:"";
  position:absolute;
  top:2px;
  left:50%;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--support-color);
  box-shadow:
    0 0 14px var(--support-color),
    -8px 5px 0 -2px var(--support-color),
    8px 5px 0 -2px var(--support-color),
    -8px 5px 8px -3px var(--support-color),
    8px 5px 8px -3px var(--support-color);
  transform:translateX(-50%);
  animation:support-pulse 3.4s ease-in-out infinite
}
.ownership-support span::after{
  content:"";
  position:absolute;
  top:-18px;
  left:50%;
  width:1px;
  height:16px;
  background:linear-gradient(var(--support-color),transparent);
  opacity:.55;
  transform:translateX(-50%)
}
@keyframes score-breathe{to{transform:scaleY(.62);opacity:.68}}
@keyframes support-pulse{50%{transform:translateX(-50%) scale(1.35);filter:brightness(1.3)}}

.agents-panel{width:min(100%,1340px);padding:clamp(32px,5vw,70px)}
.agent-directory{grid-template-columns:minmax(280px,.52fr) minmax(650px,1.48fr);gap:clamp(20px,4vw,56px)}
.planetary-stage{min-height:700px}
.planetary-core{top:51%;left:48%;width:204px;height:204px}
.planetary-core b{margin-top:206px}
.planet-node{width:134px;min-height:122px}
.planet-node canvas{width:92px;height:92px}
.planet-node span,.planet-node small{rotate:0deg!important;transform:none!important;writing-mode:horizontal-tb;text-orientation:mixed}
.planet-aiuto{right:auto;left:3%;top:9%}
.planet-presto{right:auto;left:28%;top:1%}
.planet-tempo{right:auto;left:54%;top:6%}
.planet-voce{right:0;left:auto;top:25%}
.planet-cecilia{right:0;bottom:auto;left:auto;top:54%}
.planet-guida{right:15%;bottom:0;left:auto}
.planet-guida canvas{width:106px;height:106px;margin-bottom:1px}
@keyframes orbit-drift-a{to{translate:14px -10px}}
@keyframes orbit-drift-b{to{translate:-14px 12px}}
@keyframes orbit-drift-c{to{translate:11px 14px}}

.agent-directory .directory-copy{transition:opacity .24s ease,transform .34s var(--ease),filter .24s ease}
.agent-directory.is-selecting .directory-copy,
.agent-directory.is-presenting .directory-copy{opacity:0;filter:blur(7px);pointer-events:none;transform:translateX(-24px)}
.agent-presentation{
  position:absolute;
  z-index:12;
  top:0;
  right:0;
  left:0;
  min-height:100%;
  padding:74px 0 110px;
  transform:none;
  animation:presentation-in .62s var(--ease) both
}
.presentation-back{top:4px;left:50%}
.presentation-intro{min-height:540px;margin:0 0 0 50%;display:block}
.presentation-copy{max-width:600px}
.presentation-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.presentation-title-row h2{min-width:0;margin:12px 0 0}
.presentation-arrows{display:flex;align-items:center;gap:4px;padding-bottom:8px}
.presentation-title-row .agent-step{
  width:40px;
  min-width:40px;
  min-height:40px;
  margin:0;
  padding:0;
  border:0!important;
  border-radius:0;
  background:transparent!important;
  color:#fff
}
.presentation-title-row .agent-step:hover{color:var(--presentation-color);transform:translateX(0)}
.presentation-reasons{
  overflow:hidden;
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0
}
.presentation-reasons article{position:relative;border:0;border-radius:0;background:transparent;padding:22px}
.presentation-reasons article+article::before{content:"";position:absolute;top:18%;bottom:18%;left:0;width:1px;background:var(--line-dark)}
.chat-comparison{width:100%;margin-top:88px;padding:0;overflow:hidden;border:1px solid var(--line-dark);border-radius:var(--radius)}
.comparison-heading{padding:clamp(28px,4vw,48px);border-bottom:1px solid var(--line-dark)}
.chat-request{max-width:none;margin:0;padding:26px clamp(28px,4vw,48px);border:0;border-bottom:1px solid var(--line-dark);border-radius:0;background:transparent}
.chat-columns{margin:0;gap:0}
.chat-columns article{min-height:280px;padding:clamp(28px,4vw,48px);border:0;border-radius:0;background:transparent}
.chat-columns article+article{border-left:1px solid var(--line-dark)}
.chat-specialist{border-color:var(--line-dark)!important;background:color-mix(in srgb,var(--presentation-color) 7%,transparent)!important}
.comparison-outcome{margin:0;border-radius:0}
.presentation-actions{margin:38px 0 70px;justify-content:center;gap:12px}

@media(max-width:1120px) and (min-width:901px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(430px,.95fr)}
  .hero-visual{width:calc(100% + 40px);min-height:560px;margin-left:-30px}
  #hero-orb{width:min(72vw,760px)}
  .hero-ribbon-lines p{padding-inline:18px}
  .hero-ribbon-lines b{font-size:44px}
  .hero-ribbon-lines span{font-size:10px}
}

@media(max-width:900px){
  .hero-visual{position:relative;right:auto;width:100%;min-height:480px;margin-left:0;overflow:clip}
  #hero-orb{width:min(84vw,520px);transform:none}
  .hero-ribbon-lines{grid-template-columns:1fr}
  .hero-ribbon-lines p{min-height:88px}
  .hero-ribbon-lines p+p::before{top:0;right:7%;bottom:auto;left:7%;width:auto;height:1px}
  .hero-ribbon-lines span{max-width:none}
  .agent-directory{display:block}
  .agent-presentation{position:relative;margin-top:-180px;padding:210px 0 90px}
  .presentation-back{top:142px;left:0}
  .presentation-intro{min-height:0;margin:0}
  .chat-comparison{margin-top:58px}
}

@media(max-width:760px){
  .hero-actions{width:calc(100vw - (var(--gutter) * 2))!important;max-width:calc(100vw - (var(--gutter) * 2))!important}
  .hero-actions .button,
  .presentation-actions .button,
  .final-cta-inner>div .button{width:100%!important;min-width:0;max-width:none!important;flex:1 1 100%}
  .hero-ribbon-lines{width:calc(100vw - (var(--gutter) * 2));max-width:100%}
  .hero-ribbon-lines p{width:100%;grid-template-columns:76px minmax(0,1fr)}
  .hero-ribbon-lines span{width:100%;max-width:none;white-space:normal;overflow-wrap:anywhere}
  .hero-ribbon-lines p+p{border:0!important}
  .agent-selector{grid-template-columns:repeat(2,minmax(0,1fr))}
  .agent-tab,.agent-tab:first-child{min-height:58px;padding-inline:12px}
  .agent-tab small{display:block}
  .composer-trust .trust-proof article{min-height:0}
  .composer-trust .trust-proof article+article::before{top:0;right:7%;bottom:auto;left:7%;width:auto;height:1px}
  .ownership-creative{min-height:260px}
  .ownership-creative strong{max-width:12ch}
  .ownership-divider span{max-width:78%;overflow:hidden;text-overflow:ellipsis}
  .ownership-support{grid-template-columns:repeat(3,1fr);gap:28px 8px}
  .planetary-stage{min-height:520px;overflow:hidden}
  .planetary-core{width:132px;height:132px}
  .planetary-core b{margin-top:138px}
  .planet-node canvas{width:64px;height:64px}
  .planet-guida canvas{width:76px;height:76px}
  .planet-aiuto{right:auto;left:0;top:9%}
  .planet-presto{right:auto;left:31%;top:1%}
  .planet-tempo{right:4%;left:auto;top:8%}
  .planet-voce{right:-1%;top:37%}
  .planet-cecilia{right:5%;top:auto;bottom:5%}
  .planet-guida{right:36%;bottom:0}
  .presentation-title-row{align-items:center}
  .presentation-title-row h2{font-size:clamp(42px,13vw,58px)}
  .presentation-arrows{padding:0}
  .presentation-reasons,.chat-columns{grid-template-columns:1fr}
  .presentation-reasons article+article::before{top:0;right:8%;bottom:auto;left:8%;width:auto;height:1px}
  .chat-columns article+article{border-top:1px solid var(--line-dark);border-left:0}
  .comparison-heading{display:block}
  .comparison-heading h3{margin-top:14px}
  .comparison-heading>p:last-child{margin-top:18px}
  .presentation-actions{flex-direction:column}
}

.planetary-stage.is-presenting .planet-node.is-selected canvas{
  opacity:1;
  filter:brightness(1.55) saturate(1.3) drop-shadow(0 0 24px var(--node-color))
}

/* Fix pass 2026-07-27 — kills leftover absolute/percentage offsets from earlier
   mobile breakpoints that let the hero orb paint past the viewport edge and
   force horizontal scroll. This block intentionally comes last so it wins the
   cascade for every property it sets. */
@media(max-width:900px){
  html,body{overflow-x:clip;max-width:100%}
  .hero-visual{position:relative;top:auto;right:auto;bottom:auto;left:auto;width:100%;height:auto;min-height:0;margin:clamp(32px,8vw,56px) 0 0}
  #hero-orb{width:min(78vw,480px);margin-inline:auto;display:block}
  .hero-visual::before{width:80%}
}
@media(max-width:640px){
  .hero-visual{margin-top:clamp(24px,7vw,40px)}
  #hero-orb{width:min(72vw,340px)}
}

/* Fix pass 2 — 2026-07-27: no colored underline/glow on the selected specialist
   tab, borderless right-aligned prev/next arrows under the counter, and the
   hero orb reaches its section's edge instead of leaving dead space while the
   glow is free to breathe instead of being boxed in. */
.agent-tab.is-active{box-shadow:none}
.agent-progress{gap:14px}
.agent-progress-arrows{display:flex;gap:6px;margin-left:auto}
.agent-progress .agent-step{border:0;background:transparent;color:rgba(0,10,22,.5)}
.agent-progress .agent-step:hover{border:0;background:transparent;color:var(--agent-color,var(--gold))}

@media(min-width:901px){
  .hero-visual{width:100%;min-height:640px;margin-left:0;overflow:visible;display:grid;place-items:center;justify-items:end}
  #hero-orb{width:min(94%,940px)}
}
@media(max-width:1120px) and (min-width:901px){
  .hero-visual{width:100%;min-height:560px;margin-left:0}
  #hero-orb{width:min(94%,760px)}
}
@media(max-width:900px){
  .hero-visual{overflow:visible;justify-items:center}
}

/* Fix pass 3 — 2026-07-27: the glow was sized to the whole (now very wide,
   flush-right) hero-visual box, so its blur reached the hero section's own
   clip edges and read as a visible rectangle instead of an organic radial
   fade. Re-anchored to hug the orb itself and sized so it fades out well
   before it can reach any clip boundary. Also drops the brightness/saturation
   dulling filters that made the WebGL orbs read flatter than the same orbs
   in the ecosystem popup and the Canvas2D tablet fallback. */
#hero-orb,#agent-orb{filter:none}
@media(min-width:901px){
  .hero-visual::before{top:50%;right:2%;left:auto;width:min(56%,600px);transform:translateY(-50%);filter:blur(70px)}
}
@media(max-width:900px){
  .hero-visual::before{top:50%;left:50%;right:auto;width:min(70%,420px);transform:translate(-50%,-50%);filter:blur(60px)}
}

/* Specialist switch: particles compact to the centre, swap pattern/colour while
   fully collapsed, then explode back out into the new specialist's formation. */
.agent-orb-wrap.is-orb-collapsing{animation:orb-collapse .65s cubic-bezier(.55,0,.85,.35) both}
.agent-orb-wrap.is-orb-exploding{animation:orb-explode .85s cubic-bezier(.16,1,.34,1) both}
@keyframes orb-collapse{
  0%{transform:scale(1) rotate(0deg);opacity:1}
  100%{transform:scale(.06) rotate(70deg);opacity:.15}
}
@keyframes orb-explode{
  0%{transform:scale(.06) rotate(-70deg);opacity:.15}
  55%{opacity:1}
  100%{transform:scale(1) rotate(0deg);opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .agent-orb-wrap.is-orb-collapsing,.agent-orb-wrap.is-orb-exploding{animation:none}
}

/* Fix pass 4 — 2026-07-27: the six ecosystem nodes were scattered at uneven
   hand-placed offsets, so the stage needed scrolling and Tempo/Voce read
   further apart than Voce/Cecilia. Re-anchored on a true hexagon (equal
   spacing by construction) around the Expert core, each node centred on its
   point via translate(-50%,-50%), and the stage shortened so the whole
   overview fits without a vertical scroll. */
.directory-hint{display:block;margin-top:14px;color:rgba(255,255,255,.42);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
@media(min-width:901px){
  /* A true hexagon in PIXELS. Percentage offsets resolved against the stage's
     width for x and its height for y, so on a 838x540 stage the "hexagon" came
     out squashed: neighbour gaps measured 305px horizontally against 194px
     vertically. A fixed radius makes every neighbour distance exactly --orbit-r. */
  .planetary-stage{--orbit-r:clamp(150px,19vw,196px);min-height:500px}
  .planet-node{transform:translate(-50%,-50%);right:auto;bottom:auto}
  .planet-node:hover{transform:translate(-50%,-50%) translateY(-6px) scale(1.04)}
  .planetary-stage.is-selecting .planet-node.is-selected{transform:translate(-50%,-50%) translate(var(--zoom-x,0),var(--zoom-y,0)) translateZ(90px) scale(2.2)}
  .planetary-stage.is-presenting .planet-node.is-selected{transform:translate(-50%,-50%) translate(var(--zoom-x,0),var(--zoom-y,0)) translateZ(130px) scale(2.45)}
  .planet-presto {left:50%;                                    top:calc(50% - var(--orbit-r))}
  .planet-tempo  {left:calc(50% + var(--orbit-r) * .866);      top:calc(50% - var(--orbit-r) * .5)}
  .planet-voce   {left:calc(50% + var(--orbit-r) * .866);      top:calc(50% + var(--orbit-r) * .5)}
  .planet-cecilia{left:50%;                                    top:calc(50% + var(--orbit-r))}
  .planet-guida  {left:calc(50% - var(--orbit-r) * .866);      top:calc(50% + var(--orbit-r) * .5)}
  .planet-aiuto  {left:calc(50% - var(--orbit-r) * .866);      top:calc(50% - var(--orbit-r) * .5)}
  .planet-node canvas{width:96px;height:96px}
  .planet-guida canvas{width:118px;height:118px;margin-bottom:-11px}
  /* Overview must fit the panel without a vertical scrollbar. */
  .agent-directory{min-height:min(650px,calc(100dvh - 220px))}
}
.comparison-outcome{min-height:170px}

/* Popup detail: the boxed "it takes over / you get back" block keeps the brand
   radius because it is a contained card; the comparison block below runs edge
   to edge as a full-width band, so a radius there would read as a mistake. */
.agent-presentation{padding-top:clamp(96px,11vw,132px);padding-bottom:clamp(70px,8vw,110px)}
.presentation-back{top:clamp(30px,4vw,46px)}
.presentation-reasons{border-radius:var(--radius);gap:0;margin-top:clamp(30px,4vw,44px)}
.presentation-reasons article{padding:clamp(24px,3vw,34px)}
.chat-comparison{border-radius:0;border-inline:0;margin-top:clamp(76px,9vw,112px)}
.comparison-heading,.chat-request,.chat-columns article{padding:clamp(30px,4vw,52px)}
.comparison-outcome{
  padding:clamp(30px,4vw,46px) clamp(30px,4vw,52px);
  align-items:center;
  gap:clamp(24px,4vw,48px)
}
.comparison-outcome strong{font-size:15px;line-height:1.55}

/* Use cases — same hairline-divider language as the data strip and trust row. */
.presentation-usecases{margin-top:clamp(76px,9vw,112px)}
.usecases-heading h3{
  margin:14px 0 0;
  font-size:clamp(30px,4vw,48px);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:1.05
}
.usecase-grid{
  margin-top:clamp(34px,4vw,52px);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  overflow:hidden
}
.usecase-grid article{position:relative;padding:clamp(26px,3vw,38px)}
.usecase-grid article+article::before{
  content:"";
  position:absolute;
  top:14%;
  bottom:14%;
  left:0;
  width:1px;
  background:var(--line-dark)
}
.usecase-grid span{
  color:var(--presentation-color);
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em
}
.usecase-grid h4{margin:18px 0 0;font-size:17px;font-weight:600}
.usecase-grid p{margin:10px 0 0;color:var(--muted-dark);font-size:13px;line-height:1.7}

/* Both CTAs centred on the panel, not on the copy column. */
.presentation-actions{
  width:100%;
  margin:clamp(44px,5vw,64px) 0 0;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px
}

@media(max-width:900px){
  .usecase-grid{grid-template-columns:1fr}
  .usecase-grid article+article::before{top:0;right:8%;bottom:auto;left:8%;width:auto;height:1px}
}

/* ============================================================
   HERO — pass 2026-07-28
   The orb must bleed past the RIGHT EDGE OF THE VIEWPORT, not stop at the
   centred container. Previously .hero-visual carried overflow:clip, which cut
   the blurred glow into a hard rectangle ("la sfera è in un quadrato"). The
   visual is now pulled out of the container to the viewport edge, oversized
   and pushed further right so it crops off-screen; body{overflow-x:hidden}
   absorbs it, so no horizontal scrollbar appears.
   ============================================================ */
.hero{position:relative}
.hero-copy{position:relative;z-index:2}

@media(min-width:901px){
  .hero{
    overflow:visible;
    /* clip-path:inset(0) + contain:paint were set far earlier in this file and
       clip the border box no matter what `overflow` says — that rectangle was
       the visible square edge cutting the glow. Both must be cleared here. */
    clip-path:none;
    contain:none;
    grid-template-columns:minmax(0,1fr);
    padding-top:clamp(118px,10vw,152px);
    padding-bottom:clamp(88px,9vw,120px);
    min-height:0
  }
  .hero-visual{clip-path:none;contain:none}
  .hero-copy{max-width:min(58%,680px)}
  .hero-visual{
    position:absolute;
    z-index:0;
    top:52%;
    right:calc(50% - 50vw);
    bottom:auto;
    left:auto;
    width:min(46vw,700px);
    height:auto;
    min-height:0;
    margin:0;
    overflow:visible;
    transform:translateY(-50%) translateX(21%)
  }
  #hero-orb{width:100%;max-width:none;transform:none}
  /* Glow follows the orb off-screen, so it never presents a cut edge. */
  .hero-visual::before{
    top:50%;
    left:50%;
    right:auto;
    width:86%;
    transform:translate(-50%,-50%);
    filter:blur(90px)
  }
}

/* Depth restored: without a slight darkening the depth-based particle alpha
   flattened out and the field read as a uniform ball rather than a volume. */
#hero-orb{filter:brightness(.86) saturate(1.04)}
#agent-orb{filter:brightness(.92) saturate(1.02)}

/* Equal-width CTAs wide enough that the longest label stays on one line. */
.hero-actions .button,
.presentation-actions .button,
.final-cta-inner>div .button{width:266px;min-width:266px;flex:0 0 266px}
.hero-actions .button,.presentation-actions .button{white-space:nowrap}
@media(max-width:760px){
  .hero-actions .button,
  .presentation-actions .button,
  .final-cta-inner>div .button{width:100%!important;min-width:0;flex:1 1 100%}
}

/* ============================================================
   TRUST — marks removed, CTAs added, composer voices marquee
   ============================================================ */
.composer-trust .trust-proof article{min-height:0;padding:clamp(30px,3.4vw,46px)}
.composer-trust .trust-proof h3{margin-top:0;font-size:clamp(20px,2vw,25px)}
.trust-actions{
  margin-top:clamp(38px,4.5vw,58px);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px
}
.trust-actions .button{width:266px;min-width:266px;flex:0 0 266px;white-space:nowrap}

.voices-heading{margin-top:clamp(86px,10vw,132px);text-align:center}
.voices-heading h2{margin:16px 0 0}
.voices-rail{
  position:relative;
  margin-top:clamp(40px,5vw,64px);
  overflow:hidden;
  /* Fade the ends so cards enter and leave instead of popping at a hard edge. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)
}
/* Second rail, opposite direction. Own top margin instead of the shared
   heading margin, and a lower z-index gap between the two so a card
   enlarged on hover in one row never sits above the other's mask fade. */
.voices-rail-reverse{margin-top:14px}
.voices-track{
  display:flex;
  gap:14px;
  width:max-content;
  /* Was 56s for the full 50-card set — closer to a scroll than a read. Each
     rail now carries half the quotes at roughly double the duration, so the
     per-card pace slows by about 4x. */
  animation:voices-scroll 130s linear infinite
}
/* Same keyframe, played backwards: a rail authored at 0%->-50% instead runs
   -50%->0%, i.e. drifting the other way, with no separate keyframe needed —
   both rails stay pixel-identical in every way except direction. */
.voices-rail-reverse .voices-track{animation-direction:reverse}
.voices-rail:hover .voices-track{animation-play-state:paused}
.voice-card{
  width:clamp(280px,26vw,370px);
  padding:clamp(24px,2.6vw,32px);
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  background:rgba(255,255,255,.028);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:22px;
  scale:1;
  transition:scale .3s var(--ease),border-color .3s ease,background-color .3s ease
}
/* Independent `scale`, not `transform`: this stylesheet has many layered
   passes competing for `transform` on other components, and independent
   transform properties sidestep that cascade entirely (see .planet-node). */
.voice-card:hover{
  position:relative;
  z-index:2;
  scale:1.045;
  border-color:rgba(255,255,255,.26);
  background:rgba(255,255,255,.045)
}
.voice-quote{margin:0;color:rgba(255,255,255,.86);font-size:14px;line-height:1.75}
.voice-who{display:flex;flex-direction:column;gap:3px}
.voice-who strong{font-size:13px;font-weight:600}
.voice-who span{color:rgba(255,255,255,.46);font-size:11px}
@keyframes voices-scroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .voices-track{animation:none}
  .voices-rail{overflow-x:auto}
  .voice-card:hover{scale:1}
}
@media(max-width:760px){
  .trust-actions .button{width:100%;min-width:0;flex:1 1 100%}
}

/* ============================================================
   PLANS POPUP — fits without scrolling, Professional flagged
   ============================================================ */
.pricing-panel{max-height:calc(100dvh - 48px);overflow:auto}
.pricing-panel>h2{margin:12px 0 0;font-size:clamp(26px,3.2vw,38px)}
.pricing-panel>p:not(.section-label){margin:10px 0 0;font-size:14px}
.pricing-grid{margin-top:clamp(22px,2.6vw,30px);gap:10px}
.pricing-grid article{min-height:0;padding:clamp(20px,2.2vw,26px)}
.pricing-grid strong{margin-top:14px;font-size:clamp(30px,3.4vw,38px)}
.pricing-grid ul{margin:18px 0 22px}
.pricing-grid li{margin-top:7px;font-size:11.5px}
.pricing-more{margin-top:16px}
/* Professional carries the "most chosen" flag in white; Expert keeps the gold
   halo so the step up reads without a line of copy explaining it. */
.pricing-grid article.is-chosen{border-color:rgba(255,255,255,.5)}
.pricing-grid article.is-chosen em{color:#fff}
.pricing-grid article.is-featured{
  border-color:var(--gold-light);
  box-shadow:0 0 0 1px rgba(212,168,58,.35),0 0 44px rgba(212,168,58,.16)
}

/* ============================================================
   SPECIALIST SWITCH — copy leaves, orb implodes, both return together
   ============================================================ */
.agent-stage.is-switching-out .agent-copy>*{animation:agent-copy-out .34s cubic-bezier(.7,0,.84,0) both}
.agent-stage.is-switching-in .agent-copy>*{animation:agent-copy-in .5s cubic-bezier(.16,1,.3,1) both}
.agent-stage.is-switching-in .agent-copy>*:nth-child(2){animation-delay:.04s}
.agent-stage.is-switching-in .agent-copy>*:nth-child(3){animation-delay:.08s}
.agent-stage.is-switching-in .agent-copy>*:nth-child(4){animation-delay:.12s}
.agent-stage.is-switching-in .agent-copy>*:nth-child(n+5){animation-delay:.16s}
@keyframes agent-copy-out{to{opacity:0;transform:translateY(-12px);filter:blur(5px)}}
@keyframes agent-copy-in{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

/* Selector: label and caption on one baseline, block centred in each tab. */
.agent-tab,.agent-tab:first-child{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  text-align:center;
  padding:0 clamp(8px,1vw,14px)
}
.agent-tab span,.agent-tab small{width:100%;text-align:center}

/* ============================================================
   ECOSYSTEM — true agent colours, quicker selection
   ============================================================ */
/* These filters were shifting every orb away from the palette used elsewhere
   on the page, which is why the ecosystem colours did not match the section. */
.planet-node canvas,.planetary-core canvas{filter:none}
.planet-node:hover canvas{filter:drop-shadow(0 0 18px var(--node-color))}
.planet-node{transition:transform .48s var(--ease),filter .3s ease,opacity .3s ease}
.planetary-stage.is-selecting .planet-node,
.planetary-stage.is-presenting .planet-node{transition:transform .52s var(--ease),filter .28s ease,opacity .28s ease}
.agent-presentation{animation:presentation-in .44s var(--ease) both}
@media(min-width:901px){
  .planetary-stage.is-presenting .planet-node.is-selected{
    transform:translate(-50%,-50%) translate(var(--zoom-x,0),var(--zoom-y,0)) translateZ(130px) scale(3)
  }
}

/* ============================================================
   DETAIL POPUP — contained cards, gold label above, inset dividers
   ============================================================ */
.comparison-heading{display:block;border-bottom:0}
.comparison-heading h3{margin:14px 0 0;font-size:clamp(34px,4.6vw,56px)}
.comparison-heading>p:last-child{max-width:640px;margin:18px 0 0}

.chat-comparison,.usecase-grid{
  width:min(100%,1040px);
  margin-inline:auto;
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  overflow:hidden
}
.chat-request{border-bottom:0;padding-top:0}
.chat-columns article{position:relative;border:0}
.chat-columns article+article{border-left:0}
.chat-columns article+article::before{
  content:"";
  position:absolute;
  top:12%;
  bottom:12%;
  left:0;
  width:1px;
  background:var(--line-dark)
}
/* The agent colour arrives on hover rather than tinting the panel permanently. */
.chat-specialist{background:transparent!important;transition:background-color .3s ease}
.chat-comparison:hover .chat-specialist{
  background:color-mix(in srgb,var(--presentation-color) 9%,transparent)!important
}
.comparison-outcome{border-radius:0}

.presentation-usecases{width:min(100%,1040px);margin-inline:auto}
.usecases-heading{padding:0 0 clamp(24px,3vw,34px)}
.usecases-heading h3{font-size:clamp(30px,4vw,46px)}

@media(max-width:900px){
  .chat-columns article+article::before{top:0;right:8%;bottom:auto;left:8%;width:auto;height:1px}
}

/* translateZ under `perspective` magnifies the node AND pushes it away from the
   perspective origin, so the JS target position no longer matched where it
   actually landed. Scale alone gives the same presence and lands exactly where
   it is told. */
@media(min-width:901px){
  .planetary-stage.is-selecting .planet-node.is-selected{
    transform:translate(-50%,-50%) translate(var(--zoom-x,0),var(--zoom-y,0)) scale(2.6)
  }
  .planetary-stage.is-presenting .planet-node.is-selected{
    transform:translate(-50%,-50%) translate(var(--zoom-x,0),var(--zoom-y,0)) scale(3)
  }
}

/* This file carries many accumulated override layers; the selected-node
   transform is declared explicitly so no earlier layer can reclaim it. */
@media(min-width:901px){
  .planetary-stage.is-selecting .planet-node.is-selected{
    transform:translate(-50%,-50%) translate(var(--zoom-x,0px),var(--zoom-y,0px)) scale(2.6)!important
  }
  .planetary-stage.is-presenting .planet-node.is-selected{
    transform:translate(-50%,-50%) translate(var(--zoom-x,0px),var(--zoom-y,0px)) scale(3)!important
  }
}

/* Ecosystem stage: resting state is ALWAYS visible and unscaled, so a failed
   or never-started entrance animation can never leave it invisible. The
   zoom-out is applied as an additive class on open. */
/* No !important here on purpose: author !important would outrank the keyframes
   and kill the entrance. Plain declarations placed later win the cascade for
   the resting state, and the animation still overrides them while it runs. */
.planetary-stage{opacity:1;transform:none;filter:none;animation:none}
.planetary-stage.is-entering{animation:system-zoom-out 1.15s var(--ease) both}
@media(prefers-reduced-motion:reduce){
  .planetary-stage.is-entering{animation:none}
}

/* Hexagon radius must satisfy: r + half a node's height <= half the stage
   height, or the top and bottom nodes get clipped by the panel. */
@media(min-width:901px){
  .agent-directory{
    grid-template-columns:minmax(300px,.66fr) minmax(560px,1.34fr);
    min-height:min(600px,calc(100dvh - 240px))
  }
  .planetary-stage{--orbit-r:clamp(126px,15vw,166px);min-height:520px}
  .planet-node{width:126px;min-height:112px}
  .planet-node canvas{width:88px;height:88px}
  .planet-guida canvas{width:108px;height:108px;margin-bottom:-10px}
  .directory-copy h2{font-size:clamp(34px,3.4vw,50px)}
}

/* Selected orb is positioned via the independent translate/scale properties
   (see rebrand-home.js), so those are what must transition. */
.planet-node{transition:translate .52s var(--ease),scale .52s var(--ease),transform .48s var(--ease),filter .3s ease,opacity .3s ease}

/* Selection size/position is now driven entirely from JS (the canvas is grown
   and the node moved with the independent `translate` property). Any leftover
   CSS scale on the node would multiply on top of the grown canvas — that is
   what produced a 900px render out of a 600px buffer. */
@media(min-width:901px){
  .planetary-stage.is-selecting .planet-node.is-selected,
  .planetary-stage.is-presenting .planet-node.is-selected{
    transform:translate(-50%,-50%)!important
  }
}
@media(max-width:900px){
  .planetary-stage.is-selecting .planet-node.is-selected,
  .planetary-stage.is-presenting .planet-node.is-selected{
    transform:none!important
  }
}

/* ============================================================
   PASS 2026-07-28b
   ============================================================ */

/* --- HERO: orb optically centred, wider headline, calmer lead --- */
@media(min-width:901px){
  .hero{
    padding-top:clamp(96px,7.6vw,124px);
    padding-bottom:clamp(96px,7.6vw,124px)
  }
  .hero-copy{max-width:min(66%,800px)}
  .hero h1{max-width:none;font-size:clamp(56px,6.6vw,96px)}
  .hero-lead{max-width:34rem;font-size:17px}
  .hero-visual{top:50%}
}

/* --- PRIVACY: replaces the removed ownership/productivity graphics --- */
.privacy-panel{
  margin-top:clamp(56px,7vw,92px);
  overflow:hidden;
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  background:radial-gradient(90% 130% at 50% 0,rgba(212,168,58,.10),transparent 62%),var(--navy-900);
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)
}
.privacy-copy{padding:clamp(32px,4vw,56px);display:flex;flex-direction:column;justify-content:center}
.privacy-copy h3{
  margin:16px 0 0;
  font-size:clamp(28px,3.4vw,44px);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:1.08
}
.privacy-copy>p:last-child{margin:18px 0 0;max-width:44ch;color:var(--muted-dark);font-size:15px;line-height:1.75}
.privacy-points{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.privacy-points li{
  position:relative;
  padding:clamp(24px,2.6vw,34px) clamp(28px,3.4vw,48px);
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:18px;
  align-items:center
}
.privacy-points li+li::before{
  content:"";
  position:absolute;
  top:0;
  right:9%;
  left:9%;
  height:1px;
  background:var(--line-dark)
}
.privacy-mark{
  grid-row:1/3;
  width:46px;
  height:46px;
  border:1px solid rgba(212,168,58,.42);
  border-radius:var(--radius);
  background:rgba(212,168,58,.07);
  display:grid;
  place-items:center;
  color:var(--gold-light)
}
.privacy-mark svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.privacy-points strong{align-self:end;font-size:14px;font-weight:600}
.privacy-points em{align-self:start;margin-top:4px;color:var(--muted-dark);font-size:12.5px;font-style:normal;line-height:1.6}
@media(max-width:900px){
  .privacy-panel{grid-template-columns:1fr}
  .privacy-points{border-top:1px solid var(--line-dark)}
}

/* --- ECOSYSTEM: a real arc that leaves the front (lower-left) open --- */
@media(min-width:901px){
  .planetary-stage{--arc-x:280px;--arc-y:190px}
  .planet-aiuto  {left:calc(50% - var(--arc-x) * .906); top:calc(50% - var(--arc-y) * .423)}
  .planet-presto {left:calc(50% - var(--arc-x) * .326); top:calc(50% - var(--arc-y) * .946)}
  .planet-tempo  {left:calc(50% + var(--arc-x) * .454); top:calc(50% - var(--arc-y) * .891)}
  .planet-voce   {left:calc(50% + var(--arc-x) * .956); top:calc(50% - var(--arc-y) * .292)}
  .planet-cecilia{left:calc(50% + var(--arc-x) * .875); top:calc(50% + var(--arc-y) * .485)}
  .planet-guida  {left:calc(50% + var(--arc-x) * .259); top:calc(50% + var(--arc-y) * .966)}
}

/* --- Selection travel: slower, turning, and the core clears out early --- */
.planet-node{
  transition:
    translate .92s cubic-bezier(.16,1,.3,1),
    scale .92s cubic-bezier(.16,1,.3,1),
    rotate .92s cubic-bezier(.16,1,.3,1),
    filter .3s ease,
    opacity .3s ease
}
/* The Expert core lingered under the travelling orb and produced an overlap. */
.planetary-stage.is-selecting .planetary-core,
.planetary-stage.is-presenting .planetary-core{
  opacity:0;
  transition:opacity .22s ease
}

/* --- Both headings now sit OUTSIDE their containers, matching each other --- */
.comparison-heading,
.usecases-heading{
  width:min(100%,1040px);
  margin-inline:auto;
  padding:0 0 clamp(24px,3vw,34px);
  border:0
}
.comparison-heading h3,
.usecases-heading h3{margin:14px 0 0;font-size:clamp(32px,4.2vw,50px)}
.comparison-heading>p:last-child{max-width:640px;margin:18px 0 0}
.chat-comparison{margin-top:0}
.presentation-usecases{margin-top:clamp(76px,9vw,112px)}

/* One-frame invisible measurement of the detail copy column (see rebrand-home.js). */
.agent-presentation.is-measuring{visibility:hidden;animation:none!important}
/* Core must clear before the travelling orb reaches the centre line. */
.planetary-stage.is-selecting .planetary-core,
.planetary-stage.is-presenting .planetary-core{opacity:0!important;transition:opacity .22s ease}

/* ============================================================
   PASS 2026-07-28c — final home corrections
   Every rule below is deliberately last in the file: this stylesheet has
   many accumulated override layers and, at equal specificity, file order
   is what decides. Nothing here introduces a new component; it corrects
   geometry, timing and colour that earlier passes left inconsistent.
   ============================================================ */

/* --- 1. Ecosystem: a TRUE circular arc ---------------------------------
   The previous version scaled x and y by two different radii (--arc-x 280,
   --arc-y 190), so the layout was an ellipse: the nodes nearest the bottom
   of the sweep — Guida above all — sat visibly higher than the arc implied.
   One radius in pixels makes every node exactly the same distance from the
   centre, which is what a semicircle means. Angles are evenly spaced 46deg
   apart from 155deg down to -75deg, leaving the lower-left front open. */
.planetary-stage{--arc-r:clamp(168px,20.5vw,214px)}
@media(min-width:901px){
  .planetary-stage{min-height:580px}
  .planet-node{transform:translate(-50%,-50%);right:auto;bottom:auto}
  .planet-aiuto  {left:calc(50% - var(--arc-r) * .906); top:calc(50% - var(--arc-r) * .423)}
  .planet-presto {left:calc(50% - var(--arc-r) * .326); top:calc(50% - var(--arc-r) * .946)}
  .planet-tempo  {left:calc(50% + var(--arc-r) * .454); top:calc(50% - var(--arc-r) * .891)}
  .planet-voce   {left:calc(50% + var(--arc-r) * .956); top:calc(50% - var(--arc-r) * .292)}
  .planet-cecilia{left:calc(50% + var(--arc-r) * .875); top:calc(50% + var(--arc-r) * .485)}
  .planet-guida  {left:calc(50% + var(--arc-r) * .259); top:calc(50% + var(--arc-r) * .966)}
}
/* The same arc on tablet and phone — the layout the desktop version has,
   not a different hand-placed one. Only the radius and the node size change. */
@media(max-width:900px){
  .planetary-stage{--arc-r:clamp(112px,29vw,168px);min-height:470px;max-width:100%;transform:none;overflow:visible}
  .planet-node{
    transform:translate(-50%,-50%);
    right:auto;bottom:auto;
    width:112px;min-height:104px
  }
  .planet-aiuto  {left:calc(50% - var(--arc-r) * .906); top:calc(50% - var(--arc-r) * .423)}
  .planet-presto {left:calc(50% - var(--arc-r) * .326); top:calc(50% - var(--arc-r) * .946)}
  .planet-tempo  {left:calc(50% + var(--arc-r) * .454); top:calc(50% - var(--arc-r) * .891)}
  .planet-voce   {left:calc(50% + var(--arc-r) * .956); top:calc(50% - var(--arc-r) * .292)}
  .planet-cecilia{left:calc(50% + var(--arc-r) * .875); top:calc(50% + var(--arc-r) * .485)}
  .planet-guida  {left:calc(50% + var(--arc-r) * .259); top:calc(50% + var(--arc-r) * .966)}
  .planet-node:hover{transform:translate(-50%,-50%)}
}

/* --- 2. One canvas size for all six ------------------------------------
   Guida used to be given a larger canvas to make up for the `orbits` pattern
   only reaching 0.82 of the unit sphere while every other pattern reached
   1.0. The pattern itself now fills the same extent (see orb-engine.js), so
   the compensation has to go or Guida becomes the biggest one instead. */
.planet-node canvas,
.planet-guida canvas{width:92px;height:92px;margin-bottom:8px}
@media(max-width:900px){
  .planet-node canvas,.planet-guida canvas{width:68px;height:68px;margin-bottom:6px}
}

/* --- 3. No colour shift on the chosen specialist -----------------------
   Selecting a node used to brighten and saturate its canvas, so Aiuto (the
   warmest colour) visibly turned lighter the moment it was clicked. The orb
   must look identical before, during and after the move. */
.planet-node canvas,
.planetary-core canvas,
.planet-node:hover canvas,
.planetary-stage.is-selecting .planet-node.is-selected canvas,
.planetary-stage.is-presenting .planet-node.is-selected canvas{filter:none}

/* --- 4. Selection travel: quick, straight, no spin ---------------------
   The 360deg roll on the way in was removed outright. Duration matches
   ECOSYSTEM_TRAVEL_MS in js/rebrand-home.js. */
.planet-node{
  transition:
    translate .56s cubic-bezier(.22,.9,.3,1),
    scale .56s cubic-bezier(.22,.9,.3,1),
    filter .22s ease,
    opacity .22s ease
}
.planetary-stage.is-selecting .planet-node:not(.is-selected){transition:opacity .2s ease,filter .2s ease}
.planetary-stage.is-selecting .planetary-core,
.planetary-stage.is-presenting .planetary-core{opacity:0!important;transition:opacity .18s ease}

/* Copy arrives promptly instead of drifting in behind the orb. */
.agent-presentation{animation-duration:.34s!important}
.presentation-copy{animation-duration:.3s!important}

/* A stable band for the copy, so the orb's fixed landing point is also the
   centred one for every specialist — stepping through with the arrows no
   longer makes the sphere hop between slightly different positions. */
@media(min-width:901px){
  /* Tall enough that no specialist's copy exceeds it, so the block measures
     identically for all six and the orb lands in exactly the same place. */
  .presentation-intro{min-height:470px;display:flex;align-items:center}
}

/* --- 5. One specialist selector: no gold halo on hover ----------------- */
.agent-tab:hover,
.agent-tab:hover:not(.is-active){
  background:rgba(0,10,22,.05);
  color:var(--ink);
  box-shadow:none
}
.agent-tab.is-active{box-shadow:none}

/* --- 6. Trust cards: descriptions on one baseline ----------------------
   "We speak the work" wraps to one line and the other two to two, which
   pushed its paragraph a line higher than its neighbours. Reserving two
   lines for every heading lines the three paragraphs up. */
/* Two full lines of the heading's own line-box (1.65 × 25px here), so the
   one-line heading reserves exactly the space the two-line ones occupy. */
.trust-proof h3{min-height:calc(2 * 1.65em);min-height:2lh}
@media(max-width:900px){.trust-proof h3{min-height:0}}

/* --- 7. Privacy panel in the same quiet container language ------------- */
.privacy-panel{
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  background:transparent;
  overflow:hidden
}
.privacy-points li+li::before{right:0;left:0}
@media(min-width:901px){
  .privacy-points{border-left:1px solid var(--line-dark)}
}

/* --- 8. "Your request" no longer crammed against the heading ----------- */
.chat-comparison{margin-top:clamp(18px,2.4vw,30px)}
.chat-request{padding:clamp(24px,2.8vw,34px) clamp(26px,3vw,38px)}
.chat-request p{margin-top:12px}

/* --- 9. Hero on tablet and phone --------------------------------------
   Earlier passes dropped the orb below the copy as a normal block, which
   lost the composition entirely: the sphere belongs BEHIND the headline,
   oversized, running off the right edge exactly as it does on desktop.
   overflow:clip on .hero (not the page) keeps it from creating horizontal
   scroll — that was the "extends wrongly to the right" report on tablet. */
@media(max-width:900px){
  html,body{overflow-x:clip;max-width:100%}
  .hero{position:relative;display:block;min-height:660px;padding-top:118px;padding-bottom:74px;overflow:clip}
  .hero-copy{position:relative;z-index:2;max-width:min(100%,620px)}
  .hero-visual{
    position:absolute;
    z-index:0;
    top:50%;
    right:-34%;
    bottom:auto;
    left:auto;
    width:104vw;
    /* An earlier layer caps .hero-visual at max-width:100%, which silently
       clamped the bleed back to the column width. */
    max-width:none;
    min-height:0;
    height:auto;
    margin:0;
    translate:0 -50%;
    display:block;
    opacity:.42;
    overflow:visible
  }
  #hero-orb{width:100%;max-width:none;margin:0;transform:none;filter:none}
  .hero-visual::before{
    top:50%;left:50%;right:auto;
    width:min(74%,460px);
    transform:translate(-50%,-50%);
    filter:blur(66px)
  }
}
@media(max-width:640px){
  .hero{min-height:600px;padding-top:104px}
  .hero-visual{right:-46%;width:124vw;opacity:.36}
  .hero-visual::before{width:min(78%,340px);filter:blur(52px)}
}

/* "Focus on composing" section, mobile: no sphere. The gold background
   already carries the section on its own at this width, and the earlier
   attempts to fit the orb in (several conflicting max-width:760/900px rules
   above) kept bleeding off the section or overlapping the copy. Removing it
   is simpler than another round of position tuning with no visual feedback
   loop available to verify it against. display:none also stops orb-engine's
   render loop for it (its IntersectionObserver sees zero intersection),
   so this isn't just a visual no-op. */
@media(max-width:760px){
  .focus-orb{display:none}
}

/* Ecosystem detail view: the enlarged selected orb was invisible behind the
   specialist copy at every viewport width, not just tablet/mobile (where it
   was reported and is most visible on a single stacked column).
   .planet-node.is-selected carries z-index:14, but that only wins against
   its OWN siblings inside .agent-directory/.planetary-stage — z-index only
   compares elements within the SAME stacking context, and .agent-directory
   itself (the ancestor that actually sits beside .agent-presentation) had no
   z-index of its own (auto). .agent-presentation's z-index:12 therefore beat
   the entire .agent-directory subtree outright, orb included, regardless of
   the orb's own z-index. Confirmed by sampling document.elementFromPoint()
   over the orb's on-screen rect: it returned presentation text, never the
   canvas. Giving .agent-directory a z-index just above .agent-presentation's
   during presentation lets its subtree (mostly opacity:0/blurred already,
   except the one selected orb) paint above the text where they overlap.
   pointer-events:none on the five non-selected nodes is what makes this
   safe — without it, their now-topmost (but invisible) buttons would
   intercept clicks meant for the presentation panel underneath them. */
/* First attempt at this only set pointer-events:none on the five
   non-selected nodes, which stopped THEM from intercepting clicks but
   missed that the rest of .agent-directory's now-elevated subtree
   (.planetary-core, .system-depth, the directory background) also sits
   above .agent-presentation and, being present-but-nearly-invisible
   (opacity:.08 + blur, not display:none), still hit-tests — verified by
   elementFromPoint() on the back/prev/next buttons returning a DIV instead
   of the button itself. Blanket pointer-events:none on the whole directory
   during presentation, restored only on the one element that still needs
   it (the selected node, for its hover state), is the version that can't
   have a same class of leak from some other descendant. */
.agent-directory.is-presenting{position:relative;z-index:13;pointer-events:none}
.agent-directory.is-presenting .planet-node.is-selected{pointer-events:auto}

/* ---------------------------------------------------------------------------
   Ecosystem detail view below 900px — space management.

   Desktop flies the selected orb into a left-hand column and the copy sits
   beside it. Below 900px that column does not exist: the copy runs full width,
   so the orb was still being aimed at 25% of the panel and landing on top of
   the text. The layout compensated with `margin-top:-180px; padding-top:210px`
   — a ~210px transparent reserve above the copy, which is the "enormous empty
   gap" you scroll past before reaching the title, with the sphere itself ending
   up underneath the panel anyway.

   Instead the orb now travels into a real slot beside the name, at a zoom the
   JS derives from that slot, so the reserve is gone and the sphere is part of
   the heading rather than something the layout has to dodge.
   --------------------------------------------------------------------------- */

/* The slot only exists for the small-screen layout; on desktop the orb flies
   into the side column and an 86px hole beside the title would be a bug.
   Declared BEFORE the media query: a media query does not raise specificity,
   so the same selector written afterwards would win at every width. */
.presentation-orb-slot{display:none}

@media(max-width:900px){
  .agent-presentation{margin-top:0;padding:8px 0 90px}
  .presentation-back{position:relative;top:auto;left:auto;margin-bottom:10px}
  .presentation-intro{min-height:0;margin:0}

  .presentation-orb-slot{
    display:block;
    flex:0 0 auto;
    width:clamp(62px,17vw,86px);
    height:clamp(62px,17vw,86px)
  }
  .presentation-title-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-start;
    gap:14px;
    margin-top:6px
  }
  .presentation-title-row h2{
    flex:1 1 auto;
    min-width:0;
    margin:0;
    font-size:clamp(38px,11vw,54px);
    overflow-wrap:anywhere
  }
  .presentation-arrows{flex:0 0 auto;margin-left:auto;padding:0}
}

/* The arrows read as three different sizes: the back control's 18px stroked
   SVG, and the prev/next glyphs, which inherit .agent-step's 16px type inside
   a 40px box in the presentation but a 36px box elsewhere. One size for all
   three, and a 44px hit target on every one of them (WCAG 2.5.8). */
.presentation-back svg,
.presentation-title-row .agent-step svg{width:18px;height:18px;flex:none}
.presentation-title-row .agent-step{
  width:44px;
  min-width:44px;
  height:44px;
  min-height:44px;
  display:grid;
  place-items:center;
  font-size:18px;
  line-height:1
}

/* ---------------------------------------------------------------------------
   Specialist detail view — accents and pacing.

   The two eyebrow labels inside the detail view ("Illustrative example",
   "Where it fits") are .section-label, which is gold site-wide. Inside this
   panel everything else already keys off --presentation-color (the selected
   sphere's own colour), so gold was the one element still tying the view back
   to the brand accent instead of to the specialist being read about.

   The comparison block also opened too high: it sat immediately under the
   intro and read as a second headline competing with the specialist's name.
   Pushed down enough that its top edge still shows above the fold — an
   invitation to scroll rather than a section demanding to be read.
   --------------------------------------------------------------------------- */
.agent-presentation .section-label{color:var(--presentation-color)}
.agent-presentation .comparison-heading{margin-top:clamp(40px,6vh,88px)}

/* ---------------------------------------------------------------------------
   body{overflow-x:hidden} made BODY the page's scroll container.

   `hidden` on one axis forces the other axis to `auto`, so the document
   stopped scrolling in the viewport and started scrolling inside <body>. Two
   reported faults come straight from that, and neither is fixable where it
   appears to be:

     * "the form doesn't follow the screen" — position:sticky sticks to its
       nearest scrolling ancestor, which became <body>. <body> never moves
       relative to itself, so no sticky element on the site could ever stick.
     * "the by-Composer-Workflow logo no longer compresses on scroll" — the
       header toggles .is-scrolled from window.scrollY, which stays 0 forever
       when the viewport is not the scroller, and scroll events on <body> do
       not bubble to window.

   `clip` clips exactly the same overflow WITHOUT creating a scroll container,
   which is the whole difference. Kept behind @supports so a browser that does
   not know `clip` (Safari < 16) keeps the old behaviour rather than gaining a
   horizontal scrollbar.
   --------------------------------------------------------------------------- */
body{overflow-x:clip}
@supports not (overflow-x:clip){
  body{overflow-x:hidden}
}

/* ---------------------------------------------------------------------------
   Header — brand compression, right-aligned navigation, reworked actions.
   --------------------------------------------------------------------------- */

/* Brand attribution compresses to "by CW" as the header compacts. Both
   spellings sit in the DOM and trade max-width, so the collapse animates
   instead of snapping the way a textContent swap would. */
.brand-by{display:inline-flex;align-items:baseline;gap:.3em;white-space:nowrap}
.brand-by i{
  display:inline-block;
  overflow:hidden;
  font-style:normal;
  white-space:nowrap;
  vertical-align:bottom;
  transition:max-width .42s var(--ease),opacity .26s ease
}
.brand-by-long{max-width:16em;opacity:1}
.brand-by-short{max-width:0;opacity:0}
.site-header.is-scrolled .brand-by-long{max-width:0;opacity:0}
.site-header.is-scrolled .brand-by-short{max-width:3em;opacity:1}
.site-header{transition:background-color .24s ease,border-color .24s ease,height .3s var(--ease)}
.site-header.is-scrolled .header-inner{height:68px}
.header-inner{transition:height .3s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .brand-by i,.site-header,.header-inner{transition:none}
}

/* Navigation moves out of the centre column and joins the actions on the
   right, so the bar reads brand-left / everything-else-right. */
.header-inner{grid-template-columns:auto 1fr}
.header-right{
  grid-column:2;
  justify-self:end;
  display:flex;
  align-items:center;
  gap:clamp(20px,3vw,40px)
}
.header-actions{display:flex;align-items:center;gap:10px;justify-self:auto}

/* Account and Workspace: Workspace is the destination a returning member
   wants, so it carries the filled treatment; Account is the quieter
   companion beside it rather than a second competing pill. */
.text-action.action-account{
  border-color:transparent;
  background:transparent;
  color:rgba(255,255,255,.72);
  padding-inline:12px
}
.text-action.action-account:hover{
  border-color:transparent;
  background:rgba(255,255,255,.08);
  color:#fff
}
.text-action.action-primary{
  border-color:rgba(212,168,58,.55);
  background:rgba(212,168,58,.12);
  color:var(--gold-light);
  letter-spacing:.02em
}
.text-action.action-primary:hover{
  border-color:var(--gold-light);
  background:var(--gold);
  color:#fff
}

/* ---------------------------------------------------------------------------
   Footer — restored navigation, parent-brand logo, legal row.
   --------------------------------------------------------------------------- */
.footer-top{grid-template-columns:1.5fr .7fr .7fr .9fr}
.footer-intro p{max-width:420px;color:var(--muted-dark);font-size:13px}
.footer-account{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px}
.footer-account button,
.footer-account a{
  min-height:40px;
  padding:0 16px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:var(--radius);
  background:transparent;
  color:#fff;
  font:600 12px var(--font);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  transition:border-color .2s ease,background-color .2s ease,color .2s ease
}
.footer-account button:hover,
.footer-account a:hover{border-color:var(--gold-light);background:rgba(212,168,58,.12);color:var(--gold-light)}
.footer-account [hidden]{display:none}

.footer-bottom{grid-template-columns:1fr;gap:26px}
.footer-parent{display:flex;align-items:center;gap:clamp(18px,3vw,40px);flex-wrap:wrap}
.footer-cw-logo{height:44px;width:auto;max-width:170px;object-fit:contain;flex:none;opacity:.85}
.footer-parent p{flex:1 1 280px;margin:0;color:var(--muted-dark);font-size:13px}
.footer-legal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 26px;
  padding-top:22px;
  border-top:1px solid var(--line-dark)
}
.footer-legal small,
.footer-legal a,
.footer-legal button{
  color:rgba(255,255,255,.45);
  font:400 12px var(--font);
  letter-spacing:.04em;
  text-decoration:none
}
.footer-legal button{padding:0;border:0;background:none;text-decoration:underline;cursor:pointer}
.footer-legal a:hover,.footer-legal button:hover{color:var(--gold-light)}

@media (max-width:900px){
  .footer-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 28px}
  .footer-intro{grid-column:1 / -1}
}
@media (max-width:560px){
  .footer-top{grid-template-columns:1fr}
}

/* Text for assistive technology only. Used where a symbol carries meaning a
   screen reader cannot infer (the comparison table's included/not-included
   marks). clip-path rather than display:none, which would hide it from
   assistive technology as well. */
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0
}

/* ---------------------------------------------------------------------------
   "Our position" privacy panel.

   Three fixes, all in the same block so they cannot drift apart again:

   1. Dividers. An earlier layer inset them to 9% each side; a later one reset
      them to `right:0;left:0`, so the rules ran edge to edge and collided with
      the panel's own border, reading as a table rather than as a grouped list.
      Inset restored, and stated here (at the end of the file) so it is the
      declaration that actually wins.
   2. Equal rows. The three items sized themselves from their own text, so any
      width where one caption wrapped to a second line made that row taller
      than the other two. Explicit thirds keep them identical at every width
      and keep the list flush with the copy column beside it.
   3. Motion. Each item now settles in on its own beat once the panel is
      reached, and lifts slightly under the pointer.
   --------------------------------------------------------------------------- */
@media(min-width:901px){
  .privacy-points{
    display:grid;
    grid-template-rows:repeat(3,minmax(0,1fr))
  }
}
.privacy-points li+li::before{right:clamp(20px,8%,54px);left:clamp(20px,8%,54px)}

.privacy-points li{
  transition:background-color .3s var(--ease);
  /* Each row starts slightly low and transparent, then settles when the
     section reveals. Written as a transition on a class the observer already
     applies, so it needs no extra JavaScript. */
  opacity:1;
  translate:0 0
}
.js-motion [data-reveal="position"]:not(.is-visible) .privacy-points li{
  opacity:0;
  translate:0 16px
}
.privacy-points li{transition:opacity .6s var(--ease),translate .6s var(--ease),background-color .3s var(--ease)}
.privacy-points li:nth-child(1){transition-delay:.05s}
.privacy-points li:nth-child(2){transition-delay:.16s}
.privacy-points li:nth-child(3){transition-delay:.27s}
.privacy-points li:hover{background:rgba(255,255,255,.028)}
.privacy-points li:hover .privacy-mark{
  border-color:rgba(212,168,58,.75);
  background:rgba(212,168,58,.14)
}
.privacy-mark{transition:border-color .3s var(--ease),background-color .3s var(--ease),scale .3s var(--ease)}
.privacy-points li:hover .privacy-mark{scale:1.06}

@media (prefers-reduced-motion:reduce){
  .privacy-points li,
  .privacy-mark{transition:none}
  .js-motion [data-reveal="position"]:not(.is-visible) .privacy-points li{opacity:1;translate:0 0}
}