/* Home, the offer sections (2026-10-07): hero panel, instruments side by side, what you buy, experiment paths,
   evidence, open access, three doors. Loaded after styles.css on the front page (inc/editorial-home.php). */

/* ---------- Shared ---------- */
.oi-num{display:block;color:#5f7784;margin-bottom:18px}
.btn-fill,.btn-line{display:inline-flex;align-items:center;gap:14px;padding:13px 18px;font-size:.8125rem;font-weight:600;line-height:1;border:1px solid currentColor;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.btn-fill{background:#132830;color:#edf1ec;border-color:#132830}
.btn-fill:hover{background:#00688D;border-color:#00688D;color:#fff}
.btn-line{background:transparent;color:#132830}
.btn-line:hover{background:#13283012}
.btn-fill span,.btn-line span{font-family:Manrope,Arial,sans-serif;font-size:1rem}
.oi,.ok,.op,.oe,.ot{position:relative;z-index:3;padding:96px 4.6% 100px}
.oi-head,.ok-head,.op-head,.oe-head,.ot-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:30px 8%;align-items:end;margin-bottom:56px}
.oi-head .oi-num,.ok-head .oi-num,.op-head .oi-num,.oe-head .oi-num,.ot-head .oi-num{grid-column:1/-1;margin-bottom:0}
.oi-head h2,.ok-head h2,.op-head h2,.oe-head h2,.ot-head h2{margin:0;font-weight:400;font-size:clamp(2.2rem,4.4vw,4.4rem);letter-spacing:-.055em;line-height:1.02;text-wrap:balance}
.oi-head h2 em,.ok-head h2 em,.op-head h2 em,.oe-head h2 em,.ot-head h2 em{font:italic 400 1.18em/.92 'Cormorant Garamond',Georgia,serif;letter-spacing:-.04em}
.oi-head p,.ok-head p,.op-head p,.oe-head p,.ot-head p{margin:0;max-width:46ch;font-size:1rem;line-height:1.7;color:#4b606f}

/* ---------- Hero: the offer in the first screen ---------- */
.hero-offer-layout{min-height:0}
.hero-offer-layout .hero-composition{min-height:0;padding-bottom:84px;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,30%);column-gap:4%;align-items:start}
.hero-offer-layout .hero-composition>h1{grid-column:1;grid-row:1;min-width:0}
.hero-offer-layout .invisible{font-size:clamp(7rem,15.6vw,16rem)}
.hero-offer-layout .measurable{margin-top:-.12em;font-size:clamp(6.5rem,14.6vw,15rem)} /* tight under "invisible" (Raffaele, 2026-10-08): was clamp(70px,7vw,120px) */
/* The smoked panel (2026-10-07, Raffaele): a semi-transparent box from the title line to the bottom edge, bleeding to the right edge of the screen; the render sits at its foot and covers the tail of the trace. */
.hero-offer{position:relative;grid-column:2;grid-row:1;justify-self:stretch;align-self:stretch;width:auto;max-width:none;min-width:0;display:flex;flex-direction:column;margin:-6px calc(-4.6vw - 1px) -84px 0;padding:30px calc(4.6vw + 1px) 0 30px;background:rgba(6,11,14,.56);-webkit-backdrop-filter:blur(16px) saturate(130%);backdrop-filter:blur(16px) saturate(130%);border-left:1px solid #d5eaf32a;box-shadow:-30px 0 60px #0004;z-index:4;color:#eef6fa}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.hero-offer{background:rgba(6,11,14,.82)}}
.hero-offer-kicker{display:block;color:#b9e9fb;margin-bottom:14px}
.hero-offer h2{margin:0 0 14px;font-weight:600;font-size:clamp(1.25rem,1.75vw,1.75rem);letter-spacing:-.035em;line-height:1.12;text-wrap:balance}
.hero-offer>p{margin:0 0 20px;font-size:.95rem;line-height:1.55;color:#cfe0e8;max-width:40ch}
.hero-offer-product{margin:auto calc(-4.6vw - 1px) 0 -30px;padding:18px 0 56px;border:0;background:none;overflow:hidden}
.hero-offer-product img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:contain;object-position:50% 50%;filter:drop-shadow(0 24px 30px #000a)} /* SpaceBug cut-out (2026-10-07): shown whole, never cropped */
.hero-offer-product figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;padding:10px 0 0 30px;margin-right:calc(4.6vw + 1px);border-top:1px solid #d5eaf32e;color:#b4c9d3;font-size:.625rem}
.hero-offer-product figcaption a{color:#e9f4f9;white-space:nowrap}
.hero-offer-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.hero-offer .btn-fill{background:#edf1ec;color:#10191e;border-color:#edf1ec}
.hero-offer .btn-fill:hover{background:#b9e9fb;border-color:#b9e9fb;color:#10191e}
.hero-offer .btn-line{color:#eef6fa;border-color:#d5eaf380}
.hero-offer .btn-line:hover{background:#d5eaf315;border-color:#d5eaf3}
.hero-offer-store{display:inline-block;color:#9fbac0;font-size:.625rem;border-bottom:1px solid #9fbac066;padding-bottom:4px;width:max-content}
.hero-offer-news{margin-top:20px;padding-top:14px;border-top:1px solid #d5eaf32e}
.hero-offer-news>.mono{display:block;color:#e0b46a;font-size:.625rem;margin-bottom:8px}
.hero-offer-news ul{list-style:none;margin:0;padding:0}
.hero-offer-news li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:6px 0;border-top:1px solid #d5eaf316;font-size:.8125rem;line-height:1.35}
.hero-offer-news li:first-child{border-top:0}
.hero-offer-news a{color:#eef6fa;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero-offer-news a:hover{color:#b9e9fb}
.hero-offer-news li .mono{color:#9fbac0;font-size:.625rem;white-space:nowrap}
.hero-offer-store:hover{color:#e9f4f9}
@media(min-width:1600px){.hero-offer{padding-left:40px}.hero-offer-layout .measurable{margin-top:-.12em}}
@media(max-width:1100px){.hero-offer-layout .hero-composition{grid-template-columns:minmax(0,1fr) minmax(260px,34%)}.hero-offer{padding-top:22px;padding-left:22px}.hero-offer-product{margin-left:-22px}.hero-offer-product figcaption{padding-left:22px}.hero-offer h2{font-size:1.15rem}.hero-offer>p{font-size:.85rem}.hero-offer-product img{aspect-ratio:16/9}.hero-offer .btn-fill,.hero-offer .btn-line{padding:11px 14px;font-size:.75rem;gap:10px}}
@media(max-width:760px){
  .hero-offer-layout .header{padding:16px 6% 10px;row-gap:10px}
  .hero-offer-layout .hero-composition{display:flex;flex-direction:column;padding:12px 6% 96px}
  .hero-offer-layout .header{padding:14px 6% 8px}
  .hero-offer-layout .header .wordmark img{height:34px}
  .hero-offer-layout .header-store,.hero-offer-layout .header-contact{padding:8px 10px;font-size:.72rem}
  .hero-offer-layout .header-contact span{display:none}
  .hero-offer-layout .menu-toggle{font-size:0;gap:0;min-width:30px;justify-content:flex-end}.hero-offer-layout .menu-toggle span{font-size:1.4rem}
  .hero-offer-layout h1{order:1}
  .hero-offer-layout .make-the{font-size:2rem}
  .hero-offer-layout .invisible{font-size:17vw}
  .hero-offer-layout .measurable{font-size:16vw;margin-top:6px}
  .hero-offer{order:2;margin:28px -6% -96px;padding:24px 6% 0;border-left:0;border-top:1px solid #d5eaf33a}
  .hero-offer-product{margin:18px -6% 0}
  .hero-offer-product figcaption{padding-left:6%;margin-right:6%}
  .hero-offer h2{font-size:1.35rem}
  .hero-offer>p{font-size:.9rem;max-width:none}
  .hero-offer-product img{aspect-ratio:16/7}
  .hero-offer-actions .btn-fill,.hero-offer-actions .btn-line{flex:1 1 100%;justify-content:space-between}
  .hero-offer-layout .transition-caption{width:46%}
}

/* ---------- 01 / Instruments ---------- */
.oi{background:radial-gradient(ellipse at 75% 20%,#f9fcff,#e9eef2 60%,#d8e0e6 100%);color:#11212d;margin-top:-38px;clip-path:polygon(0 0,100% 55px,100% 100%,0 100%);padding-top:130px}
.oi-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:120px}
.oi-card{display:flex;flex-direction:column;background:#f6f8f6;border:1px solid #13283026}
/* Card head (2026-10-07): title on the left, the instrument on the right, standing out of the card: it rises above the top edge and past the right edge, no stage box. */
.oi-top{position:relative;display:flex;align-items:flex-end;min-height:176px;padding:0 24px 22px}
.oi-title{max-width:64%}
.oi-title h3{white-space:nowrap}
/* The product emerges from the stage: a 3D reveal on scroll, then the stage tilts with the pointer and a sheen follows it (home-offer.js). */
/* Transparent renders (2026-10-07, Raffaele): the product floats on the paper of the card, no dark box. */
.oi-body{display:flex;flex-direction:column;flex:1;padding:4px 24px 26px}
.oi-title h3{margin:0;font-size:1.5rem;font-weight:400;letter-spacing:-.04em;line-height:1}
.oi-title h3 b{font-weight:800;letter-spacing:-.05em;color:#0885b2}
.oi-kind{margin:8px 0 0;color:#5f7784;font-size:.6875rem;text-wrap:balance}
.oi-diff{margin:0 0 12px;font-size:.95rem;line-height:1.5;color:#2a4150}
.oi-question{margin:0 0 20px;font:italic 400 1.35rem/1.15 'Cormorant Garamond',Georgia,serif;letter-spacing:-.02em;color:#132830}
.oi-facts,.oi-offer{margin:0;border-top:1px solid #13283022}
.oi-facts div,.oi-offer div{display:grid;grid-template-columns:88px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid #13283014;font-size:.8125rem;line-height:1.45}
.oi-facts dt,.oi-offer dt{font-family:'IBM Plex Mono',monospace;font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:#5f7784;padding-top:3px}
.oi-facts dd,.oi-offer dd{margin:0;color:#1d3140}
.oi-offer{margin-top:16px}
.oi-offer dd{color:#4b606f}
.oi-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:22px}
.oi-actions .btn-line,.oi-actions .btn-fill{padding:11px 13px;font-size:.75rem;gap:10px}
.oi-actions .btn-fill{flex:1 1 calc(50% - 4px);justify-content:space-between} /* store first, then quote (2026-10-07) */
.oi-actions .btn-line{flex:1 1 100%;justify-content:space-between}
#card-next{border-color:#132830}
.oi-kind .nw{white-space:nowrap}
.oi-note{margin:34px 0 0;max-width:92ch;font-size:.8125rem;line-height:1.7;color:#4b606f}
.oi-note a{border-bottom:1px solid #4b606f80}
@media(max-width:1100px){.oi-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.oi-body{padding:18px 16px 20px}.oi-facts div,.oi-offer div{grid-template-columns:74px 1fr;font-size:.75rem}.oi-question{font-size:1.2rem}}
@media(max-width:900px){.oi-cards{grid-template-columns:1fr;gap:18px;margin-top:80px}.oi-top{min-height:160px;padding:0 18px 18px}.oi-title{max-width:56%}.oi-stage{right:-5%;top:-80px;width:52%;max-width:440px}}
@media(max-width:760px){.oi,.ok,.op,.oe,.ot{padding:64px 6% 72px}.oi{padding-top:90px;margin-top:-25px;clip-path:polygon(0 0,100% 25px,100% 100%,0 100%)}.oi-head,.ok-head,.op-head,.oe-head,.ot-head{grid-template-columns:1fr;gap:16px;margin-bottom:36px}.oi-cards{margin-top:64px}.oi-top{min-height:168px;padding:0 16px 16px}.oi-title{max-width:52%}.oi-stage{right:-6%;top:-64px;width:58%;max-width:none}.oi-body{padding:4px 16px 20px}.oi-actions .btn-fill{flex:1 1 100%}}

/* ---------- 02 / What you buy ---------- */
.ok{background:#edf0ed;color:#132830}
.ok-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid #13283040;border-bottom:1px solid #13283040}
.ok-part{padding:28px 26px 30px 0;border-right:1px solid #13283022}
.ok-part+.ok-part{padding-left:26px}
.ok-part:last-child{border-right:0;padding-right:0}
.ok-part h3{margin:0 0 12px;font-size:1.25rem;font-weight:600;letter-spacing:-.035em}
.ok-part>p{margin:0 0 18px;font-size:.9rem;line-height:1.6;color:#2a4150}
.ok-part dl{margin:0 0 20px}
.ok-part dl div{display:grid;grid-template-columns:84px 1fr;gap:10px;padding:8px 0;border-top:1px solid #13283018;font-size:.8125rem;line-height:1.45}
.ok-part dt{font-family:'IBM Plex Mono',monospace;font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:#5f7784;padding-top:3px}
.ok-part dd{margin:0;color:#1d3140}
.ok-part .line-link{font-size:.6875rem}
.ok-university{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px;align-items:center;margin-top:44px;padding:34px 36px;background:#132830;color:#edf1ec}
.ok-university .oi-num{color:#9fbac0}
.ok-university h3{margin:0 0 12px;font:400 clamp(1.5rem,2.4vw,2.2rem)/1.1 'Cormorant Garamond',Georgia,serif;letter-spacing:-.02em}
.ok-university p{margin:0;font-size:.9rem;line-height:1.6;color:#c4d6dd;max-width:58ch}
.ok-university-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.ok-university .btn-fill{background:#edf1ec;color:#10191e;border-color:#edf1ec}
.ok-university .btn-fill:hover{background:#b9e9fb;border-color:#b9e9fb}
.ok-university .btn-line{color:#edf1ec;border-color:#d5eaf380}
.ok-university .btn-line:hover{background:#d5eaf315}
@media(max-width:1100px){.ok-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ok-part{border-right:0;border-bottom:1px solid #13283022;padding-right:0}.ok-part:nth-child(odd){border-right:1px solid #13283022;padding-right:26px}.ok-part+.ok-part{padding-left:0}.ok-part:nth-child(even){padding-left:26px}.ok-part:nth-last-child(-n+2){border-bottom:0}}
@media(max-width:760px){.ok-grid{grid-template-columns:1fr}.ok-part,.ok-part:nth-child(odd),.ok-part:nth-child(even){border-right:0;padding:22px 0;border-bottom:1px solid #13283022}.ok-part:last-child{border-bottom:0}.ok-university{grid-template-columns:1fr;gap:22px;padding:26px 22px}.ok-university-actions{justify-content:flex-start}}

/* ---------- 03 / Applications ---------- */
.op{background:#e3e8e5;color:#132830}
.op-paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.op-path{background:#f6f8f6;border:1px solid #13283026;padding:26px 28px 24px}
.op-path h3{margin:0 0 18px;font-size:1.35rem;font-weight:600;letter-spacing:-.035em}
.op-chain{list-style:none;margin:0;padding:0;counter-reset:step}
.op-chain li{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:11px 0;border-top:1px solid #13283018;font-size:.875rem;line-height:1.5}
.op-chain li>.mono{font-size:.6875rem;color:#5f7784;padding-top:4px}
.op-chain li>.mono:before{counter-increment:step;content:counter(step) ' · ';color:#8fa5af}
.op-chain p{margin:0;color:#1d3140}
.op-chain a{border-bottom:1px solid #13283060}
.op-paper-meta{display:block;font-size:.75rem;color:#5f7784;margin-top:3px}
.op-doi{font-size:.6875rem;color:#00688D;border-bottom:0!important}
.op-limits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;margin:40px 0 0;padding-top:24px;border-top:1px solid #13283040}
.op-limits div{font-size:.8125rem;line-height:1.6;color:#2a4150}
.op-limits dt{color:#5f7784;margin-bottom:8px}
.op-limits dd{margin:0}
@media(max-width:1100px){.op-chain li{grid-template-columns:120px 1fr}.op-limits{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.op-paths{grid-template-columns:1fr}.op-path{padding:20px 18px}.op-chain li{grid-template-columns:1fr;gap:4px}.op-limits{grid-template-columns:1fr;gap:18px}}

/* ---------- 04 / Evidence ---------- */
.oe{background:#f6f8f6;color:#132830}
.oe-studies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.oe-study{display:flex;flex-direction:column;border-top:2px solid #132830;padding-top:18px}
.oe-study-meta{display:flex;justify-content:space-between;gap:12px;color:#5f7784;font-size:.625rem;margin-bottom:12px}
.oe-study h3{margin:0 0 18px;font:400 1.45rem/1.2 'Cormorant Garamond',Georgia,serif;letter-spacing:-.015em}
.oe-study h3 a:hover{color:#00688D}
.oe-study dl{margin:0}
.oe-study dl div{padding:10px 0;border-top:1px solid #13283018;font-size:.8125rem;line-height:1.55}
.oe-study dt{font-size:.625rem;color:#5f7784;margin-bottom:5px}
.oe-study dd{margin:0;color:#1d3140}
.oe-quote{margin:16px 0 0;padding:14px 0 0 18px;border-left:1px solid #132830}
.oe-quote p{margin:0 0 6px;font:italic 400 1.15rem/1.3 'Cormorant Garamond',Georgia,serif}
.oe-quote footer{font-size:.75rem;color:#5f7784}
.oe-ref{display:flex;flex-direction:column;gap:8px;margin:auto 0 0;padding-top:16px;font-size:.75rem;line-height:1.5;color:#4b606f}
.oe-ref a{color:#00688D;font-size:.625rem}
.oe-count{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:40px;margin-top:56px;padding:34px 0;border-top:1px solid #13283040;border-bottom:1px solid #13283040}
.oe-count-figure strong{display:block;font-size:clamp(4rem,8vw,7.5rem);font-weight:300;letter-spacing:-.07em;line-height:.9;margin-bottom:12px}
.oe-count-figure .mono{color:#5f7784}
.oe-count-def p{margin:0 0 16px;font-size:.95rem;line-height:1.6;color:#2a4150;max-width:60ch}
.oe-count-def ul{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:8px 28px;color:#5f7784;font-size:.6875rem}
.oe-count-def ul b{font-weight:600;color:#132830;margin-right:6px}
.oe-count-def .line-link{font-size:.6875rem}
.oe-institutions{display:grid;grid-template-columns:220px 1fr auto;gap:30px;align-items:center;padding-top:28px}
.oe-institutions>.mono{color:#5f7784;font-size:.625rem;line-height:1.7}
.oe-institutions ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 26px;font-size:.9rem;color:#2a4150}
.oe-institutions .line-link{font-size:.6875rem;white-space:nowrap}
@media(max-width:1100px){.oe-studies{grid-template-columns:1fr;gap:34px}.oe-institutions{grid-template-columns:1fr;gap:18px}}
@media(max-width:760px){.oe-count{grid-template-columns:1fr;gap:22px}}

/* ---------- 05 / Open ---------- */
.open-offer{min-height:0;padding-bottom:80px}
.open-offer .open-content>.oi-num{color:#9fbac0}
.open-offer .open-content h2{margin-bottom:40px}
.oo-benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-bottom:48px;padding-top:26px;border-top:1px solid #d5eaf32e}
.oo-benefits>div>.mono{display:block;color:#b9e9fb;font-size:.6875rem;margin-bottom:10px}
.oo-benefits p{margin:0;font-size:.875rem;line-height:1.6;color:#c4d6dd}
.oo-access{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;margin-bottom:48px}
.oo-links>.mono,.oo-maturity>div>.mono{display:block;color:#9fbac0;font-size:.6875rem;margin-bottom:12px}
.oo-links ul{list-style:none;margin:0;padding:0}
.oo-links li{padding:12px 0;border-top:1px solid #d5eaf32e;font-size:.9rem;line-height:1.5}
.oo-links li>a{font-weight:600;color:#eef6fa}
.oo-links li>a:hover{color:#b9e9fb}
.oo-links small{display:block;margin-top:3px;font-size:.8125rem;color:#a9c1c6}
.oo-links small a{border-bottom:1px solid #a9c1c680}
.oo-maturity{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.oo-maturity ul{list-style:none;margin:0;padding:0}
.oo-maturity li{padding:9px 0;border-top:1px solid #d5eaf32e;font-size:.8125rem;line-height:1.45;color:#c4d6dd}
.oo-maturity>div:last-child li{color:#e0b46a}
@media(max-width:1100px){.oo-benefits{grid-template-columns:repeat(2,minmax(0,1fr))}.oo-access{grid-template-columns:1fr}}
@media(max-width:760px){.oo-benefits{grid-template-columns:1fr;gap:18px}.oo-maturity{grid-template-columns:1fr}.open-offer .open-links{max-width:none}}

/* ---------- 07 / Talk ---------- */
.ot{background:#edf0ed;color:#132830}
.ot-doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.ot-door{display:flex;flex-direction:column;background:#f6f8f6;border:1px solid #13283026;padding:26px 26px 26px}
.ot-door>.mono{color:#5f7784;font-size:.625rem;margin-bottom:12px}
.ot-door h3{margin:0 0 12px;font-size:1.5rem;font-weight:600;letter-spacing:-.04em;line-height:1.05}
.ot-door>p{margin:0 0 18px;font-size:.9rem;line-height:1.6;color:#2a4150}
.ot-door dl{margin:0 0 22px;padding-top:12px;border-top:1px solid #13283018;font-size:.8125rem;line-height:1.5}
.ot-door dt{font-size:.625rem;color:#5f7784;margin-bottom:6px}
.ot-door dd{margin:0;color:#1d3140}
.ot-door .btn-fill{margin-top:auto;justify-content:space-between}
.ot-reply{margin:26px 0 0;color:#5f7784;font-size:.6875rem}
.ot-developed{margin-top:56px;padding-top:30px;border-top:1px solid #13283040}
.ot-developed ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.ot-developed li a{font-weight:600;font-size:.95rem;border-bottom:1px solid #13283060}
.ot-developed li a:hover{color:#00688D}
.ot-developed li p{margin:10px 0 0;font-size:.8125rem;line-height:1.55;color:#4b606f}
@media(max-width:1100px){.ot-doors{grid-template-columns:1fr}.ot-developed ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.ot-door{padding:20px 18px}.ot-developed ul{grid-template-columns:1fr;gap:18px}}

/* Hero panel refinements (2026-10-07, after the first screenshots): closer crop of the render, the transition caption moves beside the Motion button. */

.hero-offer-layout .transition-caption{right:auto;left:calc(4.6% + 118px);bottom:26px;width:auto;max-width:220px}
@media(max-width:760px){.hero-offer-layout .transition-caption{left:auto;right:6%;max-width:46%}}

/* The trace follows the film (app.js) instead of a timed animation. It runs under the offer panel (z-index 4), seen
   blurred through its glass, not across the news (Raffaele, 2026-10-08: the animation overlapped the side panel). */
.hero-offer-layout .hero-thread{z-index:3}
.qcm-trace.is-synced .thread-core,.qcm-trace.is-synced .thread-glow,.qcm-trace.is-synced .trace-overtone{animation:none}
.qcm-trace.is-synced .trace-end{animation:none;opacity:0;transition:opacity .5s}

   loaded only when the section comes near; the cut-out render stays as poster and as the fallback. */


/* Experiment paths on phones (2026-10-07): each path shows its question, the rest opens with the button. Without JS everything stays open. */
.op-more{display:none}
@media(max-width:760px){
  .op-paths.js-op .op-path:not(.is-open) .op-chain li:nth-child(n+2){display:none}
  .op-paths.js-op .op-more{display:flex;justify-content:space-between;align-items:center;width:100%;margin:6px 0 0;padding:14px 0 2px;border:0;border-top:1px solid #13283018;background:none;color:#00688D;font-size:.75rem;letter-spacing:.06em;text-align:left;cursor:pointer}
  .op-paths.js-op .op-path.is-open .op-more span:last-child{transform:rotate(180deg)}
}

/* Hero panel, the slot for new products and ideas (2026-10-08): kicker, badge, name, one line, link; then the cut-out */
.hero-spot figcaption{display:block;font-size:inherit;color:#c9dbe3;padding-top:14px}
.hero-spot-kicker{display:block;color:#e0b46a;font-size:.6875rem;letter-spacing:.08em;margin-bottom:8px}
.hero-spot-title{display:inline-flex;align-items:center;gap:10px;color:#f4fafc}
.hero-spot-title strong{font-weight:600;font-size:1.0625rem;letter-spacing:-.02em}
.hero-spot-badge{display:inline-block;padding:3px 8px 2px;border-radius:999px;background:#e0b46a;color:#14212a;font-size:.6875rem;font-weight:700;letter-spacing:.08em;line-height:1.3}
.hero-spot figcaption p{margin:6px 0 0;font-size:.8125rem;line-height:1.45;color:#c9dbe3}
.hero-spot figcaption p a{color:#e9f4f9;font-size:.6875rem;white-space:nowrap;border-bottom:1px solid #e9f4f966}
.hero-spot figcaption p a:hover{color:#b9e9fb}
.hero-spot-title:hover strong{color:#b9e9fb}

/* Instrument cards with real photos (2026-10-08): a 4:3 box at the top of each card, the title below; no 3D, no tilt */
.oi-cards{margin-top:56px}
.oi-photo{margin:0;aspect-ratio:4/3;overflow:hidden;background:#dfe5e8;border-bottom:1px solid #13283026}
.oi-photo picture{display:block;height:100%}
.oi-photo img{display:block;width:100%;height:100%;object-fit:cover}
.oi-top{min-height:0;padding:20px 24px 18px;align-items:flex-start}
.oi-title{max-width:none}
@media(max-width:1100px){.oi-top{padding:18px 16px 14px}}
@media(max-width:900px){.oi-cards{margin-top:40px}.oi-top{min-height:0;padding:16px 18px 14px}.oi-title{max-width:none}.oi-photo{aspect-ratio:16/9}}
@media(max-width:760px){.oi-cards{margin-top:32px}.oi-top{min-height:0;padding:14px 16px 12px}}

/* H1 lead-in with the primary keyword (2026-10-08, Raffaele: variant A). Absolute, so the hero composition does not move. */
.hero-composition h1{position:relative}
.h1-kicker{position:absolute;left:0;bottom:calc(100% + 6px);display:block;font-size:.8125rem;letter-spacing:.16em;color:#d3e6ee;white-space:nowrap;text-shadow:0 1px 10px rgba(9,16,19,.55)}
@media(max-width:760px){.h1-kicker{position:static;margin:16px 0 10px;font-size:.6875rem;letter-spacing:.12em;white-space:normal}}

/* Sections 05 and 06 overlap the previous one by 30px but their slanted top cut drops 42px on the right: the dark page
   background showed through as a black wedge (Raffaele, 2026-10-08). Overlap as much as the cut. Phones: cut 28px < 30px, fine. */
@media(min-width:761px){.open-offer,.hg{margin-top:-44px}}