/* Infinity scroll story: a fixed 3D stage driven by tall scroll scenes, under the shared website navigation.
   Ported from the hemsida-v2-3d draft; type follows the storefront, dark scenes are pure black and the accent is the
   laser green of the Splash Infinity mark (assets/splash-infinity.png). */
@font-face { font-family: 'Andada Pro'; font-style: normal; font-weight: 400 840; font-display: swap; src: url('/assets/fonts/andada-pro-latin.woff2') format('woff2'); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 100 900; font-stretch: 100%; font-display: swap; src: url('/assets/fonts/roboto-latin.woff2') format('woff2'); }

:root {
  --black: #000000;
  --ink: #111814;           /* text on paper */
  --paper: #f1f2ec;
  --white: #fbfcf7;
  --laser: #00d75f;         /* Splash Infinity highlight green, on black */
  --green: #0d6b43;         /* storefront green, for small text on paper */
  --muted: #677169;
  --soft: #9fa8a1;          /* secondary text on ink, as in the storefront topbar */
  --alert: #bf3f35;
  --amber: #e5a52e;
  --silver: #b3b6b8;        /* Pantone 877 C on screen */
  --line: rgba(17, 24, 20, 0.14);
  --font-body: Roboto, Arial, sans-serif;
  --font-heading: 'Andada Pro', Andada, Georgia, serif;
  --accent: var(--laser);   /* laser green on black, storefront green on paper */
  --nav-h: var(--site-nav-height, 82px);
  --gut-l: max(20px, env(safe-area-inset-left, 0px));
  --gut-r: max(20px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
}
* { box-sizing: border-box; }
body.infinity-story { margin: 0; background: var(--black); color: var(--white); font-family: var(--font-body); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
body.infinity-story[data-tone="day"] { color: var(--ink); --accent: var(--green); }
.infinity-story a { color: inherit; }
.infinity-story :focus-visible { outline: 2px solid var(--laser); outline-offset: 3px; }

/* ---------- fixed stage */
#backdrop { position: fixed; inset: 0; background: var(--black); transition: background-color .9s ease; z-index: 0; }
body[data-tone="day"] #backdrop { background: var(--paper); }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; transition: opacity .6s; }
body[data-stage="off"] #gl { opacity: 0; }
#labels { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.lbl { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 10px; white-space: nowrap; font: 500 .9rem var(--font-body); opacity: 0; transition: opacity .35s; will-change: transform; }
.lbl::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--laser); box-shadow: 0 0 0 5px rgba(0,215,95,.18); }
.lbl span { padding: 7px 12px; border-radius: 999px; background: rgba(0,0,0,.72); border: 1px solid rgba(251,252,247,.12); color: var(--white); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.lbl.on { opacity: 1; }

.infinity-main { position: relative; z-index: 3; }
.scene { position: relative; }
.sticky { position: sticky; top: 0; height: 100vh; height: 100svh; padding-left: var(--gut-l); padding-right: var(--gut-r); pointer-events: none; }
.copy { position: absolute; left: var(--gut-l); right: var(--gut-r); top: calc(var(--nav-h) + clamp(36px, 8vh, 100px)); text-align: center; opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.copy.on { opacity: 1; transform: none; }
.infinity-preview{position:absolute;left:50%;bottom:4vh;transform:translateX(-50%);width:auto;height:min(48vh,500px);max-width:65vw;object-fit:contain;pointer-events:none}
body[data-model-ready] .infinity-preview{display:none}
.copy.left { text-align: left; left: max(var(--gut-l), 6vw); right: auto; max-width: min(520px, 42vw); top: calc(50% + var(--nav-h) / 2); transform: translateY(calc(-50% + 14px)); }
.copy.left.on { transform: translateY(-50%); }
@media (max-width: 760px) { .copy.left { left: var(--gut-l); right: var(--gut-r); max-width: none; top: calc(var(--nav-h) + 32px); transform: translateY(14px); } .copy.left.on { transform: none; } }
.eyebrow { font: 500 .82rem/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.infinity-story :is(h1, h2) { font-family: var(--font-heading); font-weight: 500; margin: 0 auto; letter-spacing: -.035em; text-wrap: balance; font-synthesis: none; }
.infinity-story h1 { font-size: clamp(4.6rem, 16vw, 13rem); line-height: .88; letter-spacing: -.06em; font-weight: 600; }
.infinity-story h2 { font-size: clamp(2.2rem, 5.4vw, 4.8rem); line-height: 1.02; max-width: 15ch; }
.copy.left h2 { margin: 0; }
.sub { font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.45; margin: 18px auto 0; max-width: 34ch; color: var(--soft); }
body[data-tone="day"] .sub { color: var(--muted); }
.copy.left .sub { margin-left: 0; }
.big { font: 600 clamp(4rem, 12vw, 10rem)/.9 var(--font-heading); letter-spacing: -.06em; font-variant-numeric: lining-nums proportional-nums; margin: 6px 0 0; }
.big small { font: 400 .3em var(--font-body); letter-spacing: 0; margin-left: .2em; }
.pills { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 20px; }
.copy.left .pills { justify-content: flex-start; }
.pill { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 999px; font: 500 .88rem var(--font-body); background: rgba(251,252,247,.08); border: 1px solid rgba(251,252,247,.14); transition: background .4s, border-color .4s; }
body[data-tone="day"] .pill { background: rgba(17,24,20,.04); border-color: var(--line); }
.pill i { width: 9px; height: 9px; border-radius: 50%; background: var(--laser); }
.pill.alert i { background: var(--alert); }
.list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; font-size: 1.05rem; }
.list li { display: flex; gap: 12px; align-items: baseline; }
.list li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--green); transform: translateY(-1px); }
.swatches { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; margin-top: 24px; }
.copy.left .swatches { justify-content: flex-start; }
.swatch { display: flex; gap: 10px; align-items: center; text-align: left; }
.swatch i { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); }
.swatch b { display: block; font-size: .92rem; font-weight: 500; }
.swatch span { font-size: .8rem; color: var(--muted); }
/* consumer unit: a full DIN rail with one free slot */
.din-fit { display: block; width: 100%; max-width: 520px; margin-top: 22px; overflow: visible; font-family: var(--font-body); }
.din-fit .cu { fill: #e7e9e1; stroke: #cfd3cb; }
.din-fit .rail { fill: #c9cdc6; }
.din-fit .brk { fill: var(--white); stroke: #c3c7bf; }
.din-fit .tog { fill: #2a312d; }
.din-fit .scr { fill: #d6dad2; stroke: #b9bdb5; }
.din-fit .gap { fill: none; stroke: var(--green); stroke-width: 1.5; stroke-dasharray: 4 3; }
.din-fit .meter-wide { fill: rgba(251,252,247,.82); stroke: var(--alert); stroke-width: 2; stroke-dasharray: 6 4; }
.din-fit .mtxt { font-size: 15px; font-weight: 500; fill: var(--alert); text-anchor: middle; }
.din-fit .meter-nano { fill: var(--white); stroke: var(--green); stroke-width: 2.5; }
.din-fit .lcd { fill: #000; }
.din-fit .bad { fill: var(--alert); } .din-fit .good { fill: var(--green); }
.din-fit .badx, .din-fit .goodv { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.din-fit .cap { font-size: 16px; fill: var(--muted); }
.din-fit .cap .b { fill: var(--ink); font-weight: 500; }
.din-fit .no { fill: var(--alert); font-weight: 500; } .din-fit .yes { fill: var(--green); font-weight: 500; }
.mark { display: inline-block; width: 118px; aspect-ratio: 2048 / 223; background: currentColor; -webkit-mask: url('/assets/infinity/logo.png') center / contain no-repeat; mask: url('/assets/infinity/logo.png') center / contain no-repeat; flex: none; }

/* ---------- progress + loader */
#bar { position: fixed; left: 0; top: var(--nav-h); height: 2px; background: var(--laser); width: 0; z-index: 59; }
#loader { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 28px); transform: translateX(-50%); z-index: 12; font: 500 .78rem var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); background: rgba(0,0,0,.72); padding: 8px 14px; border-radius: 999px; }
.scroll-hint { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 26px); transform: translateX(-50%); font: 500 .74rem var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--soft); animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translate(-50%, 6px); } }
@media (prefers-reduced-motion: reduce) { .scroll-hint { animation: none; } .copy, .lbl, #gl, #backdrop { transition: none; } }

/* ---------- smart energy chart */
.panel { position: absolute; left: max(var(--gut-l), 5vw); right: max(var(--gut-r), 5vw); top: calc(var(--nav-h) + 24px); bottom: max(28px, 4vh); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: clamp(20px, 4vw, 64px); align-items: center; pointer-events: none; }
.panel > * { min-width: 0; }
.panel h2 { margin: 0; max-width: 12ch; }
.panel .sub { margin-left: 0; }
@media (max-width: 860px) { .panel { grid-template-columns: 1fr; align-content: start; gap: 18px; } .panel h2 { font-size: clamp(2rem, 8vw, 3rem); } }
.chartbox { position: relative; width: 100%; aspect-ratio: 16 / 10; max-height: 70vh; }
@media (max-width: 860px) { .chartbox { aspect-ratio: 4 / 3.4; } }
#chart { width: 100%; height: 100%; display: block; }
.readout { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 20px; font-variant-numeric: tabular-nums; }
.readout div b { display: block; font: 600 clamp(1.6rem, 3vw, 2.4rem)/1 var(--font-heading); letter-spacing: -.03em; font-variant-numeric: lining-nums proportional-nums; }
.readout div span { font-size: .8rem; color: var(--soft); }
.state { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; padding: 8px 14px; border-radius: 999px; font-weight: 500; font-size: .92rem; background: rgba(251,252,247,.08); }
.state i { width: 9px; height: 9px; border-radius: 50%; background: var(--laser); }
.state[data-s="dis"] i { background: var(--amber); }
.state[data-s="fcr"] i { background: var(--silver); }
.note { font-size: .74rem; color: var(--soft); margin-top: 10px; }
body[data-tone="day"] .note, body[data-tone="day"] .readout div span { color: var(--muted); }

/* ---------- app: the real app phone (app-phone.css) */
#s-app .ghp { --ghp-w: min(270px, 24vw, 33vh); }
.panel .list { color: var(--muted); }

/* ---------- statement that lights up word by word */
.statement { position: absolute; left: max(var(--gut-l), 6vw); right: max(var(--gut-r), 6vw); top: calc(50% + var(--nav-h) / 2); transform: translateY(-50%); pointer-events: none; }
#stmt { margin: 0; font: 500 clamp(1.9rem, 4.6vw, 4.2rem)/1.12 var(--font-heading); letter-spacing: -.035em; max-width: 22ch; text-wrap: pretty; }
#stmt span { color: rgba(17,24,20,.16); transition: color .25s; }
#stmt span.lit { color: var(--ink); }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 36px; max-width: 980px; opacity: 0; transform: translateY(16px); transition: opacity .5s, transform .5s; }
.pillars.on { opacity: 1; transform: none; }
.pillars div { background: var(--white); border-radius: 22px; padding: 22px; box-shadow: 0 1px 0 rgba(17,24,20,.06); }
.pillars b { display: block; font: 500 1.2rem var(--font-heading); margin-bottom: 4px; }
.pillars span { color: var(--muted); font-size: .92rem; }
@media (max-width: 760px) { .pillars { grid-template-columns: 1fr; } .statement { top: calc(var(--nav-h) + 28px); transform: none; } }

/* ---------- tech specs headline figures */
.figures { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; margin-top: 44px; border-top: 1px solid var(--line); }
.figures div { padding: 22px 12px 4px 0; }
.figures b { display: block; font: 600 clamp(2rem, 3.6vw, 3.2rem)/1 var(--font-heading); letter-spacing: -.045em; font-variant-numeric: lining-nums proportional-nums; }
.figures span { font-size: .82rem; color: var(--muted); }
@media (max-width: 980px) { .figures { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .figures { grid-template-columns: repeat(2, 1fr); } }
.final .btns, .final .contact { pointer-events: auto; }

/* ---------- films: the rendered films, sped up, autoplaying in view */
.films { position: relative; z-index: 3; background: var(--black); color: var(--white); }
.films .wrap { max-width: 1240px; margin: 0 auto; padding-left: var(--gut-l); padding-right: var(--gut-r); padding-block: clamp(80px, 10vw, 130px); }
.films h2 { margin: 0; }
.film-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.film-grid figure { margin: 0; }
.film-grid video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; background: #0b0b0b; }
.film-grid figcaption { margin-top: 10px; font-size: .92rem; color: var(--soft); }
.film-grid figcaption::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 9px; border-radius: 50%; background: var(--laser); }
@media (max-width: 900px) { .film-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .film-grid { grid-template-columns: 1fr; } }

/* ---------- flat content after the 3D story */
.flat { position: relative; z-index: 3; background: var(--paper); color: var(--ink); --accent: var(--green); }
.flat .wrap { max-width: 1120px; margin: 0 auto; padding-left: var(--gut-l); padding-right: var(--gut-r); padding-block: clamp(80px, 11vw, 140px); }
.flat h2 { margin: 0; max-width: 18ch; }
.specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; margin-top: 44px; }
.specs section { min-width: 0; }
.specs h3 { font: 500 1.4rem var(--font-heading); letter-spacing: -.02em; margin: 0 0 4px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.specs dl { margin: 0; display: grid; grid-template-columns: 1fr auto; }
.specs dt, .specs dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.specs dt { color: var(--muted); padding-right: 10px; }
.specs dd { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 880px) { .specs { grid-template-columns: 1fr; gap: 30px; } }
.btns { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.btn { font: 500 .95rem var(--font-body); text-decoration: none; padding: 12px 22px; border-radius: 999px; border: 1px solid currentColor; }
.btn.primary { background: var(--laser); border-color: var(--laser); color: var(--ink); }
.contact { display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; margin-top: 30px; font: 400 .92rem var(--font-body); color: var(--soft); user-select: all; }

/* ---------- shared website footer, restyled for this page */
.infinity-story .site-footer { position: relative; z-index: 3; margin: 0; padding: 44px max(var(--gut-l), calc((100vw - 1120px) / 2)); background: var(--black); color: var(--soft); border-top: 1px solid rgba(251,252,247,.08); display: flex; gap: 24px 50px; align-items: start; justify-content: space-between; flex-wrap: wrap; font-size: 13px; }
.infinity-story .site-footer p { margin: 12px 0 0; font-size: 12px; line-height: 1.7; }
.infinity-story .site-footer > div:last-of-type { display: flex; flex-direction: column; gap: 10px; }
.infinity-story .site-footer a { text-decoration: none; }
.infinity-story .footer-brand { display: inline-flex; align-items: center; gap: 10px; }
.infinity-story .footer-brand .hero-splash { display: block; position: relative; overflow: hidden; width: 46px; height: 34px; }
.infinity-story .footer-brand .hero-splash img { position: absolute; width: 60px; height: 60px; max-width: none; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.infinity-story .footer-brand .hero-wordmark { width: 150px; height: auto; }
.draft { font: 500 .66rem var(--font-body); letter-spacing: .12em; text-transform: uppercase; background: var(--silver); color: var(--ink); padding: 2px 7px; border-radius: 4px; margin-right: 6px; }

/* Keep the brand, copy and model in distinct, responsive areas. */
#s-hero .copy{top:calc(var(--nav-h) + clamp(30px,5vh,62px))}
.infinity-story .infinity-wordmark{color:var(--silver);font-size:clamp(3rem,10.6vw,10rem);font-weight:400;letter-spacing:.015em;line-height:1.08;white-space:nowrap}
#s-hero .sub{max-width:42ch;margin-top:18px}
.lbl{white-space:normal;font-size:.82rem;line-height:1.35}
.lbl span{max-width:100%;overflow-wrap:anywhere}
.lbl::before{flex:none}
.infinity-story .copy{overflow-wrap:break-word}
.infinity-story .copy.left{max-width:min(520px,40vw)}
.infinity-story .specs dl{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px}
.infinity-story .specs dt,.infinity-story .specs dd{overflow-wrap:anywhere;min-width:0}
.infinity-story .figures{grid-template-columns:repeat(6,minmax(0,1fr))}
.infinity-story .figures div{min-width:0}
@media(max-width:980px){.infinity-story .figures{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){
 .infinity-story .copy.left{left:var(--gut-l);right:var(--gut-r);max-width:none;top:calc(var(--nav-h) + 26px);transform:translateY(14px);text-align:center}
 .infinity-story .copy.left.on{transform:none}
 .infinity-story .copy.left h2,.infinity-story .copy.left .sub{margin-left:auto;margin-right:auto}
 .infinity-story .copy.left .swatches,.infinity-story .copy.left .pills{justify-content:center}
 .infinity-story .copy.left .din-fit{max-width:420px;margin-inline:auto}
 #s-smart,#s-app,#s-tillsammans{height:auto!important}
 #s-smart .sticky,#s-app .sticky,#s-tillsammans .sticky{position:relative;height:auto;padding:64px var(--gut-l)}
 #s-smart .panel,#s-app .panel,#s-tillsammans .statement{position:relative;inset:auto;transform:none;display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
 #s-smart .panel h2,#s-app .panel h2{max-width:18ch;margin-left:0}
 #s-app .ghp{--ghp-w:min(260px,70vw)}
 #s-tillsammans .pillars{opacity:1;transform:none}
 #s-tillsammans #stmt span{color:var(--ink)}
 .panel .list{font-size:1rem}
}
@media(max-width:520px){
 .infinity-story .copy{top:calc(var(--nav-h) + 24px)}
 .infinity-story h2{font-size:clamp(1.8rem,7.7vw,2.5rem);line-height:1.08}
 .infinity-story .infinity-wordmark{font-size:clamp(2.3rem,10.5vw,4rem)}
 .infinity-story .sub{font-size:1rem;line-height:1.4;margin-top:14px}
 .infinity-story .big{font-size:clamp(3.5rem,16vw,5rem);letter-spacing:-.04em}
 .infinity-story .eyebrow{font-size:.72rem;margin-bottom:10px}
 .infinity-story .copy.left .din-fit{max-width:310px;margin-top:14px}
 .infinity-story .figures{grid-template-columns:repeat(2,minmax(0,1fr))}
 .infinity-story .figures b{font-size:2.2rem}
 .scroll-hint{font-size:.65rem;bottom:18px}
}
.infinity-story .scene,.infinity-story .flat,.infinity-story .films{scroll-margin-top:calc(var(--nav-h) + 18px)}
.infinity-story #stmt{min-width:0;overflow-wrap:anywhere}
@media(max-width:520px){.infinity-story #stmt{font-size:1.8rem;line-height:1.17;letter-spacing:-.025em}.infinity-story .panel,.infinity-story .statement{min-width:0}}
/* Keep the scroll cue clear of the enlarged hero model. */
#s-hero .scroll-hint{left:auto;right:var(--gut-r);transform:none;animation:none}

/* The expansion configurator sits beside the model on wide screens. */
.expand-copy .big{font-size:clamp(4rem,7.3vw,6.8rem);letter-spacing:-.045em;white-space:nowrap}
.expand-copy .sub{max-width:35ch}
.expand-configurator{pointer-events:auto;margin-top:22px;text-align:left}
#expand-summary{font-size:.85rem;color:var(--muted);margin:0 0 12px}
#expand-sizes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
#expand-sizes button{display:grid;gap:5px;min-width:0;padding:12px 5px;border:1px solid #b9c2b8;border-radius:7px;background:transparent;color:var(--ink);font:400 .75rem var(--font-body);cursor:pointer}
#expand-sizes button strong{font-size:.83rem;font-weight:600;white-space:nowrap}
#expand-sizes button strong small{font-size:.65rem;font-weight:400}
#expand-sizes button span{font-size:.72rem;color:var(--muted)}
#expand-sizes button[aria-pressed="true"]{background:#153e2c;color:#fff;border-color:#153e2c}
#expand-sizes button[aria-pressed="true"] span{color:#d6e5d9}
.expand-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-top:17px;font:500 .85rem var(--font-body)}
.expand-actions a{text-underline-offset:5px}
.expand-actions button{border:0;background:none;padding:5px 0;color:var(--muted);text-decoration:underline;text-underline-offset:5px;font:inherit;cursor:pointer}
.expand-actions button[hidden]{display:none}
@media(max-width:900px){.expand-configurator{max-width:480px;margin:18px auto 0;text-align:center}.expand-actions{justify-content:center}.expand-copy .big{font-size:clamp(3.6rem,11vw,6rem)}}
@media(max-width:520px){.expand-copy .big{font-size:3.6rem}.expand-copy .sub{font-size:.9rem}#expand-sizes{gap:5px}#expand-sizes button{padding:9px 2px}#expand-sizes button strong{font-size:.73rem}#expand-sizes button strong small{font-size:.55rem}#expand-sizes button span{font-size:.63rem}#expand-summary{font-size:.73rem;margin-bottom:8px}.expand-configurator{margin-top:12px}.expand-actions{font-size:.76rem;margin-top:10px}}

@media(max-width:900px){#s-bygg{scroll-margin-top:0}.infinity-story #s-bygg .copy{top:calc(var(--nav-h) + 16px)}}

#expand-sizes button span{overflow-wrap:anywhere;line-height:1.25}
#expand-summary{overflow-wrap:anywhere}
/* Compound words in translated cards must not widen the mobile page. */
.pillars{grid-template-columns:repeat(3,minmax(0,1fr))}
.pillars>div{min-width:0;overflow-wrap:anywhere}
@media(max-width:760px){.pillars{grid-template-columns:minmax(0,1fr)}}

body.infinity-story{overflow-anchor:none}

/* ---------- all in one: the parts, presented one at a time */
.parts { list-style: none; counter-reset: part; margin: 26px 0 0; padding: 0; display: grid; gap: 4px; }
.parts li { counter-increment: part; display: grid; grid-template-columns: 2.2em 1fr; column-gap: 12px; padding: 10px 0; border-top: 1px solid rgba(251,252,247,.12); color: var(--soft); transition: color .35s; }
.parts li::before { content: counter(part, decimal-leading-zero); grid-row: span 2; font: 500 .82rem/1.9 var(--font-body); color: rgba(251,252,247,.35); transition: color .35s; }
.parts b { font: 500 clamp(1.15rem, 1.7vw, 1.45rem)/1.25 var(--font-heading); letter-spacing: -.02em; color: rgba(251,252,247,.45); transition: color .35s, font-size .35s; }
.parts span { max-height: 0; overflow: hidden; opacity: 0; font-size: .95rem; transition: max-height .45s ease, opacity .35s; }
.parts li.on b { color: var(--white); font-size: clamp(1.5rem, 2.4vw, 2rem); }
.parts li.on::before { color: var(--laser); }
.parts li.on span { max-height: 5em; opacity: 1; margin-top: 4px; }
.claim { margin: 18px 0 0; font-size: .72rem; line-height: 1.45; color: rgba(251,252,247,.42); max-width: 46ch; }
.lbl.big { font-size: 1.05rem; }
.lbl.big::before { width: 22px; height: 22px; background: transparent; border: 3px solid var(--laser); box-shadow: 0 0 0 8px rgba(0,215,95,.16), 0 0 26px rgba(0,215,95,.55); animation: lbl-pulse 1.6s ease-in-out infinite; }
.lbl.big span { padding: 9px 16px; font-weight: 600; }
@keyframes lbl-pulse { 50% { box-shadow: 0 0 0 14px rgba(0,215,95,.06), 0 0 34px rgba(0,215,95,.7); } }
@media (max-width: 760px) { .parts li:not(.on) { max-height: 0; padding: 0; border: 0; overflow: hidden; opacity: 0; } .claim { display: none; } }

/* ---------- expansion headline, seasons, cells */
.expand-title { font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.02; margin: 0 0 10px !important; max-width: 11ch; }
.season { display: flex; align-items: baseline; gap: 14px; margin: 26px 0 0; }
.season b { font: 500 clamp(2rem, 3.6vw, 3rem)/1 var(--font-heading); letter-spacing: -.03em; }
.season span { font: 600 1.1rem var(--font-body); color: var(--green); font-variant-numeric: tabular-nums; }
.cellstats { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 26px; }
.cellstats b { display: block; font: 600 clamp(2rem, 3.4vw, 3rem)/1 var(--font-heading); letter-spacing: -.04em; color: var(--laser); font-variant-numeric: lining-nums proportional-nums; }
.cellstats span { font-size: .82rem; color: var(--soft); }

/* ---------- wireless meter yard */
.yard { width: 100%; height: auto; max-height: 72vh; align-self: center; font-family: var(--font-body); overflow: visible; }
.yard .y-ground { fill: #d9dcd3; } .yard .y-rock { fill: #a3a79f; stroke: #8b8f87; }
.yard .y-house { fill: var(--white); stroke: #b9bdb5; stroke-width: 2; }
.yard .y-solar { fill: #1d2f45; stroke: #4a6a8c; }
.yard .y-win { fill: #cfe0ea; } .yard .y-door { fill: #e7e9e1; stroke: #c3c7bf; }
.yard .y-inf { fill: #f3f3ef; stroke: #9fa8a1; } .yard .y-dot { fill: var(--green); }
.yard .y-cab { fill: #8b918c; stroke: #5e645f; }
.yard .y-t { fill: var(--muted); font-size: 15px; } .yard .y-t.s { font-size: 12px; } .yard .y-t.r { fill: var(--alert); font-weight: 600; } .yard .y-t.g { fill: var(--green); font-weight: 600; font-size: 16px; }
.yard .y-trench { fill: none; stroke: #6d5a3e; stroke-width: 5; stroke-linecap: round; }
.yard .y-no circle { fill: var(--alert); } .yard .y-no path, .yard .y-ok path { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }
.yard .y-ok circle { fill: var(--green); }
.yard .y-air { fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round; }
.yard .y-wave { fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; }
.yard #y_no, .yard #y_air, .yard #y_waves, .yard #y_wifi, .yard #y_ok, .yard #y_cable { opacity: 0; }

/* ---------- Europe: cloud and data centres */
.europe { width: 100%; height: auto; max-height: 76vh; align-self: center; font-family: var(--font-body); overflow: visible; }
.europe .eu-dots circle { fill: rgba(251,252,247,.2); }
.europe .eu-link { stroke: rgba(0,215,95,.55); stroke-width: 1.4; fill: none; }
.europe .eu-up { stroke: var(--laser); stroke-width: 2.4; fill: none; stroke-linecap: round; }
.europe .eu-dc circle { fill: rgba(0,215,95,.18); stroke: var(--laser); stroke-width: 1.5; } .europe .eu-dc rect { fill: var(--laser); }
.europe .eu-dc { opacity: 0; }
.europe .eu-cloud path { fill: #0d1a12; stroke: var(--laser); stroke-width: 2; filter: drop-shadow(0 0 10px rgba(0,215,95,.5)); }
.europe .eu-t { fill: var(--white); font-size: 14px; font-weight: 500; } .europe .eu-t.s { fill: var(--soft); font-size: 12px; }
.risk { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(251,252,247,.14); opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .5s; }
.risk.on { opacity: 1; transform: none; }
.risk-q { margin: 0; font: 500 clamp(1.4rem, 2.4vw, 2rem)/1.15 var(--font-heading); letter-spacing: -.02em; color: var(--white); }
.risk .sub { font-size: 1rem; max-width: 46ch; }
@media (max-width: 860px) { .europe, .yard { max-height: 34vh; } .risk { margin-top: 14px; padding-top: 12px; } .risk .sub { font-size: .86rem; } }
#s-celler h2 { font-size: clamp(2rem, 3.6vw, 3.4rem); max-width: 14ch; }
.europe .eu-glow { fill: rgba(0,215,95,.25); filter: blur(4px); }
.europe .eu-home image { filter: drop-shadow(0 0 8px rgba(0,215,95,.45)); }

/* A real-looking courtyard, with clearly schematic communication overlays. */
#s-tradlos .wireless-panel{width:min(1240px,92vw);margin:auto;align-self:center;padding:24px 0}
.wireless-intro{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:end;margin-bottom:24px}
.wireless-intro h2{max-width:15ch;font-size:clamp(32px,4.3vw,58px);line-height:1.02;margin:0}
.wireless-intro .sub{font-size:17px;max-width:52ch;margin:0 0 10px}.wireless-intro .note{font-size:11px;margin:0;max-width:66ch}
.yard-study{position:relative;isolation:isolate;width:100%;aspect-ratio:1672/941;max-height:56vh;overflow:hidden;border-radius:18px;background:#d7ddd5;box-shadow:0 14px 35px #152c201a}
.yard-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.yard-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.yard-mode-switch{position:absolute;top:16px;left:16px;z-index:3;display:flex;padding:4px;gap:4px;background:#07170ee8;border:1px solid #ffffff40;border-radius:30px}
.yard-mode-switch button{border:0;border-radius:24px;background:transparent;color:#eef4eb;padding:10px 16px;font:500 13px var(--font-body);cursor:pointer}
.yard-mode-switch button[aria-pressed=true]{color:#143426;background:#d6f2de}.yard-mode-switch button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.yard-label{position:absolute;z-index:2;color:white;background:#0e281ce8;padding:6px 10px;border-radius:7px;font:500 12px var(--font-body);box-shadow:0 3px 15px #0002}
.yard-house{top:50%;left:21%}.yard-meter{top:47%;right:7%}
.yard-ground-work,.yard-radio{transition:opacity .65s}.yard-trench{fill:none;stroke:#645344;stroke-width:22;stroke-linecap:round;opacity:.88}.yard-wire{fill:none;stroke:#f3b943;stroke-width:3;stroke-dasharray:10 5;animation:yard-data 2s linear infinite}
.yard-pavers{transform-box:fill-box;transform-origin:center;animation:yard-lift 6s ease-in-out infinite}.yard-digger{animation:yard-dig 2s ease-in-out infinite}
.yard-link{fill:none;stroke:#9affb9;stroke-width:4;stroke-dasharray:8 8;filter:drop-shadow(0 1px 4px #103a23);animation:yard-data 2s linear infinite}.yard-endpoint{fill:#bbffd0;stroke:#125734;stroke-width:3}.yard-pulse{fill:none;stroke:#d2ffdf;stroke-width:3;transform-box:fill-box;transform-origin:center;animation:yard-radio 2s ease-out infinite}.yard-pulse.second{animation-delay:1s}
.yard-study[data-mode=cable] .yard-radio,.yard-study[data-mode=cable] .yard-connected{opacity:0;pointer-events:none}.yard-study[data-mode=wifi] .yard-ground-work,.yard-study[data-mode=wifi] .yard-steps{opacity:0;pointer-events:none}
.yard-steps{position:absolute;bottom:16px;left:16px;right:16px;display:flex;gap:8px;transition:opacity .5s}
.yard-steps>span{flex:1;display:flex;align-items:center;gap:9px;padding:12px;background:#17251feb;color:#eef5ef;border:1px solid #ffffff30;border-radius:10px;font-size:13px}.yard-steps b{font:600 11px var(--font-body);color:#d2c8a7}
.yard-study[data-step="0"] [data-yard-step="0"],.yard-study[data-step="1"] [data-yard-step="1"],.yard-study[data-step="2"] [data-yard-step="2"]{background:#f5ddb2;color:#352b18}.yard-study[data-step] .yard-steps b{color:inherit}
.yard-connected{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:12px;align-items:center;padding:13px 20px;background:#0b2c1beF;color:#ecfff1;border:1px solid #adf4c4;border-radius:14px;max-width:90%;width:max-content;transition:opacity .5s}
.yard-connected strong,.yard-connected div>span{display:block}.yard-connected strong{font-size:16px}.yard-connected div>span{font-size:12px;margin-top:3px}.yard-signal{display:grid;place-items:center;width:31px;height:31px;flex-shrink:0;border-radius:50%;background:#b9f9cc;color:#153a23}
.yard-caption{display:flex;gap:30px;justify-content:space-between;align-items:start;margin-top:12px;font-size:13px;line-height:1.5;color:#475d51}.yard-caption small{font-size:10px;max-width:32ch;text-align:right}
@keyframes yard-data{to{stroke-dashoffset:-32}}@keyframes yard-lift{50%{translate:0 -9px}}@keyframes yard-dig{50%{translate:4px 2px}}@keyframes yard-radio{to{scale:2.8;opacity:0}}
@media(max-width:760px){#s-tradlos{height:auto!important}#s-tradlos>.sticky{position:relative;height:auto;min-height:0;padding:40px 0}#s-tradlos .wireless-panel{width:92vw;padding:0}.wireless-intro{grid-template-columns:1fr;gap:18px}.wireless-intro h2{font-size:40px;max-width:17ch}.wireless-intro .sub{font-size:16px}.yard-study{aspect-ratio:1/1;max-height:none}.yard-photo{object-fit:cover;object-position:50% 50%}.yard-overlay{height:100%;width:177.7%;max-width:none;left:-38.85%}.yard-mode-switch{top:10px;left:10px;right:10px;width:max-content;max-width:calc(100% - 20px)}.yard-mode-switch button{padding:8px 12px;font-size:11px}.yard-label{font-size:10px;padding:4px 7px}.yard-house{left:4%;top:50%}.yard-meter{right:3%;top:46%}.yard-steps{bottom:10px;left:10px;right:10px;gap:4px}.yard-steps>span{display:block;font-size:10px;padding:8px 6px}.yard-steps b{display:block;margin-bottom:4px}.yard-connected{bottom:12px;padding:10px 12px;gap:8px}.yard-connected strong{font-size:13px}.yard-connected div>span{font-size:10px}.yard-caption{display:block;font-size:12px}.yard-caption small{display:block;margin-top:5px;text-align:left;max-width:none}}
@media(prefers-reduced-motion:reduce){.yard-study *{animation:none!important;transition:none!important}}
#s-tradlos>.sticky{display:flex;align-items:center;padding-top:var(--site-nav-height,78px);box-sizing:border-box}
#s-tradlos .wireless-panel{pointer-events:auto}
@media(max-width:760px){#s-tradlos>.sticky{display:block;padding-top:40px}}

/* Construction sequence: tangible slabs move aside before the trench opens. */
#yard-work .yard-pavers,#yard-work .yard-digger{animation:none}
.yard-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.yard-steps button{min-width:0;border:1px solid #ffffff50;border-radius:10px;padding:10px 8px;display:flex;align-items:center;gap:8px;background:#15251fef;color:#f2f5ef;text-align:left;font:12px/1.3 var(--font-body);cursor:pointer}
.yard-steps button b{font-size:10px;opacity:.7;flex-shrink:0}.yard-steps button[aria-pressed=true]{background:#f5ddb2;color:#352b18;border-color:#f5ddb2}
.yard-steps button:focus-visible,.yard-play:focus-visible{outline:2px solid #c6f7d6;outline-offset:3px}
.yard-play{position:absolute;right:16px;top:16px;width:42px;height:42px;border-radius:50%;border:1px solid #ffffff50;background:#10271ded;color:#f5fff7;font-size:16px;cursor:pointer}
.yard-study[data-mode=wifi] .yard-play{display:none}
.yard-study[data-mode=wifi] .yard-steps{visibility:hidden}
#yard-machine,#yard-arm{transform-box:view-box}#yard-deep,#yard-conduit,#yard-cable,#yard-fill{stroke-linejoin:round}
@media(max-width:760px){.yard-steps{gap:4px;left:7px;right:7px;bottom:8px}.yard-steps button{display:block;padding:7px 4px;font-size:9px;overflow-wrap:anywhere;border-radius:7px;min-height:55px}.yard-steps button b{display:block;margin-bottom:4px;font-size:9px}.yard-play{top:10px;right:10px;width:32px;height:32px;font-size:12px}}

/* The real app phone (app-phone.css) in the app section */
#s-app .ghp-dots button{background:rgba(17,24,20,.18)}
#s-app .ghp-dots button[aria-pressed=true]{background:#0d6b43}
.ap-note{font-size:.75rem;color:var(--muted);margin-top:14px}