/* Syllotips: unfolding supercircles, guided signals and connected chapters. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:chapter-out .22s ease-out both}
::view-transition-new(root){animation:chapter-in .54s var(--ease) both;mix-blend-mode:normal}
.header-shell{view-transition-name:syllotips-navigation}
::view-transition-group(syllotips-navigation){z-index:50;animation-duration:.35s}
@keyframes chapter-out{to{opacity:0;transform:translateY(-7px)}}
@keyframes chapter-in{from{opacity:0;clip-path:inset(2% 3% round 65px);transform:translateY(14px)}to{opacity:1;clip-path:inset(0 round 0);transform:translateY(0)}}
.hero-v4:before,.hero-v4:after{content:'';position:absolute;width:380px;height:380px;border:1px solid #468BEA38;border-radius:38%;pointer-events:none;z-index:0}
.hero-v4:before{left:-326px;top:195px;box-shadow:22px 22px 0 -1px var(--ink),22px 22px 0 0 #468BEA24}
.hero-v4:after{right:-321px;top:125px;width:430px;height:430px;box-shadow:-22px 22px 0 -1px var(--ink),-22px 22px 0 0 #468BEA24}
.hero-v4>.wrap,.page-hero>.wrap{position:relative;z-index:1}
.page-hero{position:relative}
.mega{animation:menu-unfold .38s var(--ease)}
@keyframes menu-unfold{from{opacity:0;clip-path:inset(0 3% 12% round 50px);translate:0 -6px}to{opacity:1;clip-path:inset(0 round 20px);translate:0 0}}
.section{position:relative;isolation:isolate}
.section.has-chapter-edge:before{content:'';position:absolute;z-index:-1;top:-1px;left:0;right:0;height:36px;background:var(--previous-tone);border-radius:0 0 50% 50% / 0 0 90% 90%;pointer-events:none}
.section.has-chapter-edge>.wrap{position:relative}
.brand-motion .section.has-chapter-edge:before{transform-origin:top;transform:scaleY(1.5);transition:transform .95s var(--ease)}
.brand-motion .section.has-chapter-edge.chapter-arrived:before{transform:scaleY(1)}
.js-motion .section-head.reveal{transform:translateX(-18px);transition:opacity .75s var(--ease),transform 1s var(--ease)}
.js-motion .section-head.reveal.visible{transform:none}
.js-motion .info-card.reveal,.js-motion .trust-card.reveal,.js-motion .case-tile.reveal{transform:translateY(20px) scale(.985);border-radius:42px;transition:opacity .75s var(--ease),transform .95s var(--ease),border-radius 1.1s var(--ease),box-shadow .35s var(--ease),background-color .35s var(--ease)}
.js-motion .info-card.reveal.visible,.js-motion .trust-card.reveal.visible,.js-motion .case-tile.reveal.visible{transform:none;border-radius:24px}
.brand-motion [data-aperture]{clip-path:inset(7% 11% round 36%);transition:clip-path 1.2s var(--ease)}
.brand-motion [data-aperture].aperture-open{clip-path:inset(0 round 0)}
.brand-motion [data-aperture]>img{transform:scale(1.045);transition:transform 1.5s var(--ease)}
.brand-motion [data-aperture].aperture-open>img{transform:scale(1)}
.brand-motion .proof-visual[data-aperture].aperture-open,.brand-motion .article-image[data-aperture].aperture-open,.brand-motion .case-art[data-aperture].aperture-open{clip-path:inset(0 round 0)}
.case-stat,.outcomes-band a{position:relative;isolation:isolate}
.case-stat:before{content:'';position:absolute;z-index:-1;left:-18px;top:-12px;width:105px;height:105px;border:1px solid #468BEA35;border-radius:38%;transition:transform .5s var(--ease)}
.case-stat:hover:before{transform:translate(5px,-4px)}

.article-image,.case-art{border-radius:27px}
.closing-art{position:absolute;right:-45px;top:50%;translate:0 -50%;width:min(43vw,660px);aspect-ratio:1.5;opacity:.75;pointer-events:none}
.closing-art>img{width:100%;height:100%;object-fit:cover}
.cta-inner>div{max-width:75%}.cta-inner>.button{position:relative;z-index:1}
.cta-inner h2{font-size:clamp(2.9rem,4.5vw,4.7rem)}
.cta-inner p{max-width:630px}
.chapter-section{padding-top:0;padding-bottom:90px}
.brand-chapter{display:grid;grid-template-columns:1.12fr 1fr;position:relative;overflow:hidden;border-radius:52px;min-height:340px;align-items:center;isolation:isolate}
.chapter-copy{padding:48px 0 48px 48px;z-index:2}
.chapter-copy .eyebrow{font-size:.875rem;margin-bottom:22px}
.chapter-copy h2{font-size:clamp(2.5rem,4vw,3.8rem);line-height:1.1;max-width:620px}
.chapter-copy h2>span{color:var(--yellow)}
.chapter-copy p{font-size:1rem;line-height:1.7;max-width:480px;color:var(--beige);margin-top:25px}
.chapter-art{align-self:stretch;position:relative;min-width:0}
.chapter-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center}
.connected-section-intro{display:grid;grid-template-columns:1.4fr 1fr;gap:70px;align-items:center;margin-bottom:48px}
.connected-section-intro .connected-intro{margin-bottom:0}
.connected-brand-art{height:285px;border-radius:35%;overflow:hidden;max-width:410px;margin-left:auto;width:100%}
.connected-brand-art img{width:100%;height:100%;object-fit:cover;object-position:right center}
.mechanics-section .section-head h2{font-size:clamp(2.6rem,4.3vw,4.25rem);max-width:810px}
.mechanics-section .section-head>p{font-size:1rem;line-height:1.65;max-width:360px}
.mechanics{border:1px solid var(--line);border-radius:30px;background:var(--paper);color:var(--ink);overflow:hidden}
.mechanics-toolbar{display:flex;gap:24px;align-items:center;padding:22px 27px;border-bottom:1px solid var(--line)}
.agent-type{display:flex;gap:3px;padding:3px;background:var(--beige);border-radius:999px;flex-shrink:0}
.agent-type>button{background:none;color:var(--ink);border:0;border-radius:999px;padding:8px 17px;min-height:38px;font-size:.875rem;transition:background .25s,color .25s}
.agent-type>button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.mechanics-hint{font-size:.875rem;color:var(--ink);opacity:.65}
.mechanics-play{display:flex;align-items:center;gap:9px;margin-left:auto;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--deep);padding:10px 15px;font-size:.875rem;min-height:44px;white-space:nowrap;transition:background .25s}
.mechanics-play:hover{background:var(--ice)}.mechanics-play>span{font-size:1rem}
.mechanics-play[aria-pressed=true]{background:var(--deep);color:var(--paper);border-color:var(--deep)}
.mechanics-map{padding:33px 28px 0;position:relative}
.mechanics-nodes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:25px}
.mechanics-node{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;min-height:253px;text-align:left;background:var(--ice);color:var(--ink);border:1px solid #468BEA33;border-radius:28px;padding:21px 20px 26px;transition:background .35s,color .35s,border-color .35s,transform .55s var(--ease)}
.mechanics-node:not(:last-child):after{content:'';position:absolute;top:50%;left:calc(100% + 1px);width:25px;border-top:1px solid var(--blue);pointer-events:none}
.mechanics-node:hover{transform:translateY(-3px);border-color:var(--blue)}
.mechanics-node[aria-expanded=true]{background:var(--deep);border-color:var(--deep);color:var(--paper)}
.mechanics-node-top{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:25px}
.mechanics-number{font:500 .875rem/1 Clash;letter-spacing:.02em;color:var(--deep)}
.mechanics-orb{width:52px;height:52px;display:grid;place-items:center;background:var(--paper);color:var(--deep);border-radius:38%;position:relative}
.mechanics-orb:before{content:'';position:absolute;inset:-5px;border:1px solid #468BEA44;border-radius:38%;transition:inset .5s var(--ease)}
.mechanics-orb svg{height:25px;width:25px}
.mechanics-node:hover .mechanics-orb:before{inset:-8px}
.mechanics-node[aria-expanded=true] .mechanics-number{color:var(--yellow)}
.mechanics-node[aria-expanded=true] .mechanics-orb{background:var(--paper);color:var(--deep)}
.mechanics-node[aria-expanded=true] .mechanics-orb:before{border-color:#F9F6F355}
.mechanics-node>strong{font:500 1.48rem/1.15 Clash;letter-spacing:-.025em;margin-bottom:12px}
.mechanics-node-label{display:block;font-size:1rem;line-height:1.4;margin-bottom:8px}
.mechanics-node>small{font-size:.875rem;line-height:1.45;opacity:.7;padding-right:2px}
.mechanics-node[aria-expanded=true]>small{opacity:1;color:var(--ice)}
.mechanics-open{position:absolute;bottom:12px;right:15px;font-size:1.1rem;color:var(--deep)}
.mechanics-node[aria-expanded=true] .mechanics-open{color:var(--yellow)}
.mechanics-node.is-past{border-color:var(--blue)}
.mechanics.is-playing .mechanics-node[aria-expanded=true] .mechanics-orb{animation:guardian-reveal .55s var(--ease)}
@keyframes guardian-reveal{from{transform:scale(.9);border-radius:46%}to{transform:scale(1);border-radius:38%}}
.runtime-return{position:relative;height:99px;display:flex;align-items:center;justify-content:center;padding-top:20px}
.runtime-return>svg{position:absolute;inset:0;width:100%;height:82px;overflow:visible;pointer-events:none}
.return-track{stroke:var(--blue);stroke-width:1.2;vector-effect:non-scaling-stroke}
.return-arrow{stroke:var(--blue);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.return-signal{stroke:var(--deep);stroke-width:3;stroke-dasharray:80 920;stroke-dashoffset:1000;opacity:0;vector-effect:non-scaling-stroke}
.mechanics[data-current="4"] .return-signal{opacity:1;animation:return-flow 1.45s ease-in-out forwards}
@keyframes return-flow{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
.runtime-return>button{position:relative;z-index:1;display:flex;align-items:center;gap:10px;min-height:44px;background:var(--paper);color:var(--deep);border:1px solid #468BEA44;border-radius:999px;padding:11px 18px;font-size:.875rem;transition:background .3s}
.runtime-return>button svg{height:18px;width:18px}.runtime-return>button:hover{background:var(--ice)}
.runtime-return>button[aria-expanded=true]{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.mechanics-details:has(.mechanics-detail:not([hidden])){border-top:1px solid var(--line)}
.mechanics-detail{display:grid;grid-template-columns:1fr 1.15fr;gap:65px;padding:30px 34px;background:var(--ice);animation:detail-unfold .5s var(--ease)}
.mechanics-detail-index{display:block;font-size:.875rem;color:var(--deep);margin-bottom:15px}
.mechanics-detail h3{font:500 1.9rem/1.15 Clash;letter-spacing:-.025em;max-width:420px}
.mechanics-detail .text-link{font-size:.875rem;margin-top:22px;gap:12px;color:var(--deep)}
.mechanics-detail p{font-size:1rem;line-height:1.7;max-width:620px}
.mechanics-detail-note{display:block;font-size:.875rem;line-height:1.55;margin-top:19px;color:var(--deep)}
@keyframes detail-unfold{from{opacity:0;transform:translateY(-7px);clip-path:inset(0 1% 8% round 25px)}to{opacity:1;transform:none;clip-path:inset(0 round 0)}}
.mechanics-caption{border-top:1px solid var(--line);padding:18px 27px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.mechanics-caption>span{font-size:.875rem;line-height:1.5;display:flex;gap:10px;align-items:center}
.mechanics-caption>span svg{height:18px;width:18px;color:var(--deep)}
.mechanics-caption>button{border:0;background:none;color:var(--deep);font-size:.875rem;display:flex;align-items:center;gap:10px;padding:4px 0;min-height:35px;white-space:nowrap}
.mechanics-caption>button:hover{text-decoration:underline;text-underline-offset:4px}
.mechanics :focus-visible{outline-color:var(--deep)}
.mechanics-node:focus-visible{outline-offset:4px}
.mechanics.is-paused .return-signal{animation-play-state:paused}
/* On tablet, follow 01 → 02 ↓ 03 → 04 in a clockwise reading order. */
@media(min-width:621px) and (max-width:850px){.mechanics-node:nth-child(3){grid-column:2;grid-row:2}.mechanics-node:nth-child(4){grid-column:1;grid-row:2}}
@media(max-width:1100px){.mechanics-map{padding:28px 20px 0}.mechanics-nodes{gap:18px}.mechanics-node{padding:18px 15px 24px;min-height:268px;border-radius:23px}.mechanics-node:not(:last-child):after{width:18px}.mechanics-orb{width:44px;height:44px}.mechanics-orb svg{width:22px;height:22px}.mechanics-node>strong{font-size:1.3rem}.mechanics-node-label{font-size:.93rem}.mechanics-node>small{font-size:.875rem}.mechanics-node-top{margin-bottom:25px}.mechanics-toolbar{padding:20px;gap:15px}.mechanics-hint{font-size:.875rem}.mechanics-detail{gap:35px;padding:28px}.chapter-copy{padding:38px 0 38px 35px}.brand-chapter{border-radius:42px;min-height:350px}.chapter-copy h2{font-size:3rem}.chapter-copy p{max-width:420px}.connected-section-intro{gap:40px;grid-template-columns:1.5fr 1fr}.connected-brand-art{height:260px}.closing-art{width:49vw;right:-60px;opacity:.55}.cta-inner>div{max-width:78%}}
@media(max-width:850px){.mechanics-toolbar{flex-wrap:wrap}.mechanics-hint{display:none}.mechanics-map{padding:23px 22px 0}.mechanics-nodes{grid-template-columns:1fr 1fr;gap:22px}.mechanics-node{min-height:220px;padding:20px 23px 25px}.mechanics-node>strong{font-size:1.5rem}.mechanics-node-label{font-size:1rem}.mechanics-node-top{margin-bottom:20px}.mechanics-node:not(:last-child):after{display:none}.mechanics-number{font-size:1rem}.mechanics-node:nth-child(1):after,.mechanics-node:nth-child(3):after{display:block;width:22px}.mechanics-node:nth-child(2):before{content:'';position:absolute;top:calc(100% + 1px);left:50%;height:22px;border-left:1px solid var(--blue)}.runtime-return>svg{display:none}.runtime-return{height:94px;padding-top:0}.runtime-return:before{content:'';position:absolute;top:0;bottom:24px;left:-11px;width:50%;border-left:1px solid var(--blue);border-bottom:1px solid var(--blue);border-radius:0 0 0 22px;pointer-events:none}.runtime-return>button{max-width:95%;text-align:left}.mechanics-detail{grid-template-columns:1fr;gap:23px}.mechanics-detail h3{max-width:600px;font-size:1.8rem}.mechanics-detail .text-link{margin-top:16px}.mechanics-caption{padding:16px 22px;gap:18px;align-items:flex-start}.mechanics-caption>span{max-width:450px}.chapter-section{padding-bottom:65px}.brand-chapter{grid-template-columns:1.2fr 1fr;border-radius:36px;min-height:330px}.chapter-copy{padding:33px 0 33px 30px}.chapter-copy h2{font-size:2.7rem}.chapter-copy p{font-size:.95rem;max-width:350px}.chapter-art img{object-position:75% center}.connected-section-intro{gap:25px;grid-template-columns:1.55fr 1fr}.connected-brand-art{height:230px}.connected-section-intro .connected-intro h2{font-size:2.8rem}.closing-art{right:-110px;width:65vw;opacity:.4}.cta-inner>div{max-width:95%}.hero-v4:before,.hero-v4:after{display:none}}
@media(max-width:620px){.section.has-chapter-edge:before{height:20px}.mechanics-section .section-head h2{font-size:2.5rem}.mechanics{border-radius:22px}.mechanics-toolbar{padding:16px;gap:10px}.agent-type{gap:2px;padding:3px}.agent-type>button{padding:8px 12px;font-size:.875rem;min-height:38px}.mechanics-play{padding:9px 11px;font-size:.875rem;gap:6px}.mechanics-map{padding:22px 19px 0}.mechanics-nodes{display:flex;flex-direction:column;gap:20px}.mechanics-node{min-height:0;width:100%;padding:20px 20px 22px 93px;display:block;border-radius:25px}.mechanics-node-top{display:contents}.mechanics-number{position:absolute;left:29px;top:84px;font-size:.875rem}.mechanics-orb{position:absolute;left:23px;top:23px;width:43px;height:43px}.mechanics-node>strong{display:block;font-size:1.45rem;margin:0 0 9px}.mechanics-node-label{font-size:1rem;margin-bottom:6px}.mechanics-node>small{display:block;font-size:.875rem;line-height:1.45;padding-right:10px}.mechanics-open{font-size:1rem;bottom:12px;right:14px}.mechanics-node:not(:last-child):after,.mechanics-node:nth-child(1):after,.mechanics-node:nth-child(3):after{display:block;top:calc(100% + 1px);left:43px;width:0;height:20px;border-top:0;border-left:1px solid var(--blue)}.mechanics-node:nth-child(2):before{display:none}.mechanics-node:hover{transform:none}.runtime-return{height:102px;padding:14px 0 0;justify-content:flex-start}.runtime-return:before{left:-9px;top:-3px;bottom:26px;width:50px}.runtime-return>button{width:100%;max-width:none;padding:12px 14px;font-size:.875rem;gap:8px;line-height:1.45;min-height:53px}.runtime-return>button>span{margin-left:auto}.mechanics-detail{padding:25px 21px;gap:21px}.mechanics-detail h3{font-size:1.65rem;line-height:1.2}.mechanics-detail p{font-size:1rem;line-height:1.65}.mechanics-detail-note{font-size:.875rem}.mechanics-caption{display:block;padding:17px 20px}.mechanics-caption>span{font-size:.875rem;align-items:flex-start;gap:8px}.mechanics-caption>span svg{margin-top:2px}.mechanics-caption>button{margin-top:14px;font-size:.875rem}.brand-chapter{display:flex;flex-direction:column;align-items:stretch;border-radius:32px;min-height:0}.chapter-copy{padding:31px 28px 26px}.chapter-copy h2{font-size:2.5rem;max-width:420px}.chapter-copy .eyebrow{font-size:.875rem;margin-bottom:18px}.chapter-copy p{font-size:1rem;line-height:1.65;max-width:460px;margin-top:21px}.chapter-art{height:190px}.chapter-art img{object-position:right 52%}.chapter-section{padding-bottom:55px}.connected-section-intro{display:block;margin-bottom:30px}.connected-section-intro .connected-intro h2{font-size:2.45rem}.connected-brand-art{height:200px;max-width:290px;margin:28px auto 0;border-radius:38%}.closing-art{width:420px;right:-210px;top:auto;bottom:-80px;translate:0;opacity:.2}.cta-inner>div{max-width:100%}.cta-inner h2{font-size:2.9rem}.case-stat:before{width:80px;height:80px;top:5px;left:-10px}.js-motion .section-head.reveal{transform:translateY(15px)}.js-motion .section-head.reveal.visible{transform:none}}
@media(max-width:380px){.mechanics-toolbar{display:block}.mechanics-play{margin:12px 0 0;width:100%;justify-content:center}.agent-type{width:100%}.agent-type>button{flex:1}.mechanics-node{padding-left:83px}.mechanics-orb{left:20px}.mechanics-number{left:25px}.mechanics-map{padding-inline:16px}.mechanics-node>strong{font-size:1.35rem}.mechanics-node-label{font-size:.95rem}.mechanics-node:not(:last-child):after{left:40px}.runtime-return>button{font-size:.875rem}.runtime-return>button>svg{display:none}.chapter-copy{padding:28px 24px}.chapter-copy h2{font-size:2.2rem}}
@media(min-width:621px) and (max-width:850px){.mechanics-node:nth-child(3):after{left:auto;right:calc(100% + 1px)}.mechanics-nodes{position:relative}.mechanics-nodes:before{content:'';position:absolute;left:-13px;top:24%;bottom:24%;width:12px;border:1px solid var(--blue);border-right:0;border-radius:10px 0 0 10px}.runtime-return:before{display:none}}
@media(max-width:620px){.mechanics-nodes{position:relative}.mechanics-nodes:before{content:'';position:absolute;left:-10px;top:12%;bottom:12%;width:9px;border:1px solid var(--blue);border-right:0;border-radius:9px 0 0 9px}.runtime-return:before{display:none}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}::view-transition-old(root),::view-transition-new(root){animation:none!important}.brand-motion [data-aperture]{clip-path:none!important}.brand-motion [data-aperture]>img{transform:none!important}.section.has-chapter-edge:before{transform:none!important}.mechanics-node,.mechanics-detail,.return-signal,.mechanics-orb,.mega{animation:none!important;transition:none!important}.js-motion .section-head.reveal,.js-motion .info-card.reveal,.js-motion .trust-card.reveal,.js-motion .case-tile.reveal{opacity:1;transform:none}.mechanics[data-current="4"] .return-signal{stroke-dashoffset:0}}
/* Home banner: animated liquid-metal ring (script: src/scripts/metal-ring.ts) */
.chapter-art.metal-ring-art{display:flex;align-items:center;justify-content:center;padding:40px 56px 40px 24px}
.metal-ring{position:relative;width:min(100%,340px);aspect-ratio:1;flex:none}
.metal-ring-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.metal-ring-mark{position:absolute;inset:0;pointer-events:none}
.chapter-art .metal-ring-mark img{position:absolute;inset:auto;height:auto;object-fit:contain;translate:-50% -50%;left:50%}
.chapter-art .metal-ring-mark .metal-ring-logo{width:45%;top:45%}
.chapter-art .metal-ring-mark .metal-ring-sparkle{width:7.9%;top:59%}
.metal-ring-art.is-static .metal-ring:before{content:'';position:absolute;inset:0;background:#8E8581;-webkit-mask:url(/assets/metal-ring-shape.png) center/contain no-repeat;mask:url(/assets/metal-ring-shape.png) center/contain no-repeat}
.metal-ring-toggle{position:absolute;right:22px;bottom:22px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(249,246,243,.22);background:transparent;color:var(--beige);cursor:pointer;opacity:.75;transition:opacity .25s,background .25s}
.metal-ring-toggle:hover{opacity:1;background:rgba(249,246,243,.08)}
.metal-ring-toggle svg{width:18px;height:18px}
.metal-ring-toggle .icon-play,.metal-ring-art.is-paused .metal-ring-toggle .icon-pause{display:none}
.metal-ring-art.is-paused .metal-ring-toggle .icon-play{display:block}
@media(max-width:850px){.chapter-art.metal-ring-art{padding:32px 36px 32px 16px}}
@media(max-width:620px){.chapter-art.metal-ring-art{height:auto;padding:4px 28px 36px}.metal-ring{width:min(100%,260px)}.metal-ring-toggle{right:16px;bottom:16px}}
/* Light motion layer (src/scripts/site-motion.ts) and card/button feedback */
.motion-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Cards (owner, October 2026): one light hover everywhere, a soft warm shadow on light cards and a slightly warmer fill on dark ones; no blue border. */
.info-card,.trust-card,.case-tile{transition:box-shadow .35s var(--ease),background-color .35s var(--ease)}
.info-card:hover,.trust-card:hover,.case-tile:has(a):hover,.proof-small>a:hover{box-shadow:0 14px 30px -22px rgba(44,34,32,.16)}
.dark .info-card:hover,.dark .trust-card:hover,.theme-dark [data-dark] .trust-card:hover{box-shadow:none}

.info-card:hover .text-link svg,.case-tile:hover .text-link svg{transform:translateX(4px)}
.button:active{transform:translateY(0) scale(.98)}
@media(prefers-reduced-motion:reduce){.button:active{transform:none}}
/* Home hero: the closing ring (src/scripts/hero-ring.ts). Approved exception to the no-gradient/no-glow
   rule for this hero only: vertical gradient background and soft brand-yellow light. */
.hero-v4[data-hero-ring]{background:linear-gradient(180deg,#1D1817 0%,#2D2220 100%);min-height:max(100svh,760px);display:flex;flex-direction:column;overflow:clip}
.hero-v4[data-hero-ring]:before,.hero-v4[data-hero-ring]:after{display:none}
.hero-ring-stage{flex:1;display:flex;flex-direction:column}
.hero-ring-stage>.wrap{flex:1;display:flex;flex-direction:column;position:relative;z-index:1}
.hero-v4[data-hero-ring] .hero-v4-copy{margin-block:auto}
.value-led[data-hero-ring] .hero-v4-copy>.lead{max-width:620px}
.hero-ring-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:0;transition:opacity .6s var(--ease)}
.hero-v4.is-ready .hero-ring-canvas{opacity:1}
/* Every "Book a demo" on every page matches the navigation bar's button (owner's request, October 2026): the
   page tops, the closing call to action, the menu and inline links. Buttons sitting beside it in a page top
   (such as "See what changes" in the home hero) take the same size, so the pair stays even. */
.header .button,.cta-section .button,.actions .button,a.button[href*="get-demo"]{font-size:15px;line-height:22px;min-height:40px;padding:8px 18px;gap:8px}
.header .button svg,.cta-section .button svg,.actions .button svg,a.button[href*="get-demo"] svg{width:15px;height:15px}
@media(prefers-reduced-motion:reduce){.hero-ring-canvas{transition:none}}

/* Room for the wider closed ring above the benefits row (set by hero-ring.ts). */
@media(min-width:768px){.hero-v4[data-hero-ring]{min-height:calc(max(100svh,760px) + var(--ring-extra,0px))}.hero-v4[data-hero-ring] .value-preview{margin-top:calc(46px + var(--ring-extra,0px))}}
/* The five benefit icons under the hero are brand yellow, like the other accents on the dark home page
   (owner's request, October 2026; they were sky blue). */
.hero-v4[data-hero-ring] .value-preview svg{color:#FFF089}

/* Scroll-driven ring (set by hero-ring.ts when motion is allowed): the hero becomes a tall scroll
   track and its stage stays pinned to the screen while scrolling plays the ring, then the closed
   ring grows past the screen edges and the page moves on. */
.hero-v4[data-hero-ring].is-scroll{display:block;padding:0;min-height:0;height:380svh}
.hero-v4.is-scroll .hero-ring-stage{position:sticky;top:0;height:100svh;padding:112px 0 36px;overflow:hidden}
.hero-v4.is-scroll .hero-v4-copy{transform:scale(var(--hero-scale,1));transform-origin:50% 50%}
/* The canvas paints the hero background and sits behind the page, so the field of light the ring
   bursts into stays visible behind the logo strip; the light section after it covers it. */
.hero-v4[data-hero-ring].is-scroll{background:none}
.hero-v4.is-scroll .hero-ring-canvas{position:fixed;inset:0;z-index:-1;opacity:1;transition:none}
.hero-v4.is-scroll+.trust-strip{background:transparent}
.section.hero-field-through,.section.hero-field-through:before{background:transparent}
@media(max-width:650px){.hero-v4[data-hero-ring].is-scroll{height:300svh}.hero-v4.is-scroll .hero-ring-stage{padding:96px 0 24px}}

/* Section labels as the animated pill from the live syllotips.com (owner's request, October 2026), on every
   page. A pill with a fine edge and two soft lights that drift slowly behind it, showing through the edge and,
   faintly, the fill; a dot and the label in small capitals. Dark variant on dark blocks (brand yellow text,
   warm amber light), light variant on light pages (deep blue text, pale blue and brand blue light, no yellow). The lights
   are background layers moved through registered custom properties, so no extra markup is needed; the text
   itself is unchanged (capitals are only styling). Still with reduced motion. Approved gradient exception. */
@property --pill-x1{syntax:'<percentage>';inherits:false;initial-value:12%}
@property --pill-y1{syntax:'<percentage>';inherits:false;initial-value:50%}
@property --pill-x2{syntax:'<percentage>';inherits:false;initial-value:78%}
@property --pill-y2{syntax:'<percentage>';inherits:false;initial-value:20%}
/* Page content only (main): the navigation menu keeps its plain labels. */
main .eyebrow{
  --pill-fill:rgba(249,246,243,.72);--pill-edge:rgba(41,91,204,.14);--pill-light-a:rgba(195,221,250,.95);--pill-light-b:rgba(70,139,234,.55);
  --pill-text:#295BCC;--pill-dot:#295BCC;
  display:inline-flex;align-items:center;gap:9px;width:fit-content;max-width:100%;padding:7px 15px 7px 12px;
  border:1.5px solid transparent;border-radius:999px;color:var(--pill-text);
  font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;line-height:1.25;
  background:
    linear-gradient(var(--pill-fill),var(--pill-fill)) padding-box,
    radial-gradient(38% 160% at var(--pill-x1) var(--pill-y1),var(--pill-light-a),transparent 70%) border-box,
    radial-gradient(30% 140% at var(--pill-x2) var(--pill-y2),var(--pill-light-b),transparent 70%) border-box,
    linear-gradient(var(--pill-edge),var(--pill-edge)) border-box;
  animation:pill-drift 11s ease-in-out infinite alternate}
main .eyebrow:before{width:7px;height:7px;margin:0;border:0;border-radius:50%;background:var(--pill-dot);vertical-align:0;flex:none}
main .dark .eyebrow,.theme-dark main [data-dark] .eyebrow{
  --pill-fill:rgba(29,24,23,.86);--pill-edge:rgba(249,246,243,.12);--pill-light-a:rgba(133,104,90,.7);--pill-light-b:rgba(255,223,69,.26);
  --pill-text:#FFF089;--pill-dot:#FFF089;color:var(--pill-text)}
/* Labels inside cards and side panels keep their colour role. */
main :is(.hero-aside,.info-card) .eyebrow{--pill-text:var(--deep);--pill-dot:var(--deep)}
/* On pale-blue backgrounds (blue chapters and the blue side panels in dark page heroes) the label is solid
   brand warm white with blue text and dot (owner's request, October 2026). */
main :is(.light,.blue):not([data-dark]) .eyebrow,main .hero-aside .eyebrow{
  --pill-fill:#F9F6F3;--pill-edge:rgba(41,91,204,.14);--pill-light-a:rgba(195,221,250,.95);--pill-light-b:rgba(70,139,234,.55);
  --pill-text:#295BCC;--pill-dot:#295BCC;color:var(--pill-text)}
@keyframes pill-drift{
  0%{--pill-x1:10%;--pill-y1:50%;--pill-x2:80%;--pill-y2:10%}
  35%{--pill-x1:42%;--pill-y1:0%;--pill-x2:58%;--pill-y2:100%}
  70%{--pill-x1:70%;--pill-y1:90%;--pill-x2:24%;--pill-y2:30%}
  100%{--pill-x1:92%;--pill-y1:40%;--pill-x2:8%;--pill-y2:70%}}
@media(prefers-reduced-motion:reduce){main .eyebrow{animation:none}}

/* Animated brand art on the home page (owner's request, October 2026; brand-art.js): the gyroscope beside
   "Your controls" and the forming ring in the closing call to action replace the generated pictures there.
   Both sit straight on the page, with no card or fill behind them, and are drawn on a transparent canvas.
   Since October 2026 every page's closing call to action uses the same ring (owner's request). */
.connected-brand-art.is-live{border-radius:0;overflow:visible;height:320px;max-width:440px}
/* The ring is bright, so the "Book a demo" button moves under the paragraph and leaves the right side to the
   ring, instead of sitting on top of it. */
.cta-section:has(.closing-art.is-live) .cta-inner{flex-direction:column;align-items:flex-start;gap:34px}
.cta-section:has(.closing-art.is-live) .cta-inner>div{max-width:min(640px,55%)}
@media(max-width:850px){.cta-section:has(.closing-art.is-live) .cta-inner>div{max-width:none}}
.is-live>canvas{display:block;width:100%;height:100%}
/* The closing ring: .closing-art only marks where the ring sits; it is drawn on a canvas covering the whole
   section, so its particles scatter freely when it bursts instead of being cut at a frame. The text and the
   button stay above it. */
.closing-field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cta-section:has(.closing-field) .cta-inner{z-index:1}
@media(max-width:1100px){.connected-brand-art.is-live{height:280px}.closing-field{opacity:.7}}
@media(max-width:850px){.connected-brand-art.is-live{height:250px}.closing-field{opacity:.5}}
/* Phones: the ring sits whole above the headline instead of half off screen behind the text. */
@media(max-width:620px){.connected-brand-art.is-live{height:240px;max-width:320px}
  .closing-art.is-live{position:relative;inset:auto;translate:none;width:min(100%,380px);margin:-30px auto -10px}.closing-field{opacity:1}}

/* "Your controls" (owner's request, October 2026): a bigger gyroscope and a wider headline and paragraph.
   The canvas is transparent, so on wide screens it reaches into the page's right margin instead of taking
   room from the text. */
.connected-section-intro{grid-template-columns:1.55fr 1fr;gap:40px}
.connected-section-intro .connected-intro,.connected-section-intro .connected-intro>p{max-width:none}
.connected-brand-art.is-live{height:420px;max-width:none;width:calc(100% + 56px);margin-right:-56px}
@media(max-width:1100px){.connected-brand-art.is-live{height:350px;width:100%;margin-right:0}}
@media(max-width:850px){.connected-brand-art.is-live{height:300px}}
@media(max-width:620px){.connected-brand-art.is-live{height:290px;max-width:360px;margin:20px auto 0}}

/* FAQ: on hover or keyboard focus the closed question's "+" makes one quarter turn clockwise and turns back
   when the pointer leaves (owner's request, October 2026; an approved, calm exception to the no-spinning
   rule). The open question's "−" stays still. Reduced motion: no turn. */
.faq-item summary:after{display:inline-block;transition:transform .45s var(--ease)}
.faq-item:not([open]) summary:is(:hover,:focus-visible):after{transform:rotate(90deg)}
@media(prefers-reduced-motion:reduce){.faq-item summary:after{transition:none}.faq-item:not([open]) summary:is(:hover,:focus-visible):after{transform:none}}
/* The Closed Loop ring beside the About intro (owner's request, October 2026; brand-art.js "loop").
   The canvas reaches beyond its box so the particle bursts are never cut; the section clips sideways only. */
.about-opening-section{overflow-x:clip}
.about-opening{display:grid;grid-template-columns:minmax(0,820px) minmax(0,1fr);gap:40px;align-items:center}
.about-loop-art{position:relative;aspect-ratio:1;width:100%;max-width:420px;justify-self:center}
.about-loop-art canvas{position:absolute;inset:-25%;width:150%;height:150%;pointer-events:none}
@media(max-width:900px){.about-opening{grid-template-columns:1fr;gap:10px}.about-loop-art{max-width:340px;margin-top:20px}}
/* Animated brand art in the tops of the four continuous-improvement pages and About (owner's request, October 2026;
   brand-art.js): Evaluate "tunnel", Diagnose "tree", Teach "link", Retain "spiral", About "lattice". Beside the headline on
   wide screens, kept in the dark part above the fade; under the button on phones. */
.has-hero-art .wrap{position:relative}
.page-hero-art{position:absolute;right:0;top:50%;transform:translateY(-50%);width:min(460px,36vw);aspect-ratio:1;pointer-events:none}
.page-hero-art canvas{width:100%;height:100%;display:block}
@media(min-width:901px){.has-hero-art h1,.has-hero-art .lead{max-width:calc(100% - min(460px,36vw) - 24px)}}
@media(max-width:900px){.page-hero-art{position:relative;top:auto;transform:none;width:min(300px,80vw);margin:0 auto}}
/* "How Syllotips works" on phones (owner's request, October 2026): no "Play the loop" button and no closing line with
   "Reset the view"; the loop plays by itself while the explorer is on screen (mechanics.js). */
@media(max-width:620px){.mechanics-play,.mechanics-caption{display:none}}