/* Notpla Series B investor site. Phone-first: base rules are for a 360px screen,
   min-width queries add the larger layouts. Tokens follow notpla-gslide-direct brand.md. */
:root{
  --cream:#F2EFE0; --sand:#DDD5B9; --stone:#8E826A; --ink:#212323; --ink-2:#2a2d2c; --ink-3:#343837;
  --lime:#E7F3AC; --olive:#A4A968; --olive-d:#6F7540; --orange:#FF714A;
  --green:#9EA850; --amber:#F0D64A; --red:#E8583A; --kraft:#B88A5C; --graphite:#555956;
  --rule:rgba(33,35,35,.14); --rule-d:rgba(242,239,224,.14);
  --f-sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-mono:"DM Mono",ui-monospace,Menlo,Consolas,monospace;
  --gutter:clamp(16px,4.4vw,64px);
  --r:12px;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:only light;
}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
/* no trackpad swipe back to the previous site while scrolling (Pierre, 27 Oct): coming forward again reloads everything */
html,body{overscroll-behavior-x:none}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--f-sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
.dark :focus-visible{outline-color:var(--lime)}
.wrap{max-width:1320px;margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Type */
h1,h2,h3,h4{margin:0;font-weight:500;text-wrap:balance}
h1{font-size:clamp(2.4rem,min(9.6vw,10vh),6.2rem);line-height:1.02;letter-spacing:-.045em}
h2{font-size:clamp(1.95rem,6.6vw,4rem);line-height:1.05;letter-spacing:-.04em}
h3{font-size:clamp(1.25rem,3.6vw,1.65rem);line-height:1.18;letter-spacing:-.025em}
h4{font-size:1.05rem;line-height:1.3;letter-spacing:-.01em}
p{margin:0;max-width:62ch}
.lede{font-size:clamp(1.04rem,2.6vw,1.24rem);line-height:1.5;color:var(--graphite)}
.dark .lede{color:rgba(242,239,224,.74)}
.mono,.label{font-family:var(--f-mono);font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:.7rem;line-height:1.3}
.muted{color:var(--stone)}
.dark .muted{color:rgba(242,239,224,.56)}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-weight:400;letter-spacing:-.04em}
.pill{display:inline-flex;align-items:center;gap:.55em;border:1px solid currentColor;border-radius:999px;padding:.52em 1em;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;line-height:1;white-space:nowrap}
.pill i{font-style:normal;opacity:.55}
.ln{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em;padding-right:.1em;margin-right:-.1em}
.ln>span{display:inline-block;will-change:transform}

/* Footnote markers */
.fn{display:inline-flex;align-items:center;justify-content:center;min-width:1.35em;height:1.35em;padding:0 .3em;margin-left:.2em;border-radius:999px;
  font-family:var(--f-mono);font-size:.58rem;font-weight:500;letter-spacing:0;line-height:1;vertical-align:super;text-decoration:none;
  background:rgba(33,35,35,.08);color:var(--graphite);transition:background .25s,color .25s}
.fn:hover{background:var(--ink);color:var(--cream)}
.dark .fn{background:rgba(242,239,224,.12);color:rgba(242,239,224,.8)}
.dark .fn:hover{background:var(--lime);color:var(--ink)}
.fnpop{position:fixed;z-index:90;left:12px;right:12px;bottom:12px;max-width:420px;padding:1rem 1.1rem 1.05rem;border-radius:var(--r);background:var(--ink);color:var(--cream);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.55);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .25s,transform .25s var(--ease)}
.fnpop.on{opacity:1;transform:none;pointer-events:auto}
.fnpop .label{color:var(--lime);margin-bottom:.4rem;display:block}
.fnpop p{font-size:.88rem;line-height:1.45}
.fnpop a{color:var(--lime);word-break:break-word;font-size:.82rem}
.fnpop button{position:absolute;right:.6rem;top:.5rem;width:32px;height:32px;border-radius:50%;color:rgba(242,239,224,.7)}
@media (min-width:760px){.fnpop{left:auto;right:auto}}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.7em;border:1px solid currentColor;border-radius:999px;padding:.95em 1.35em;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;line-height:1;
  position:relative;overflow:hidden;isolation:isolate;transition:color .45s var(--ease),border-color .45s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .55s var(--ease);z-index:-1}
.btn:hover{color:var(--cream)}
.btn:hover::before{transform:scaleX(1);transform-origin:left}
.btn .arr{transition:transform .45s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.dark .btn::before,.hero .btn::before{background:var(--cream)}
.dark .btn:hover,.hero .btn:hover{color:var(--ink)}
.btn--lime{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.btn--ink{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn--ink::before{background:var(--lime)}
.btn--ink:hover{color:var(--ink);border-color:var(--lime)}
.btn--lime::before{background:var(--cream)!important}
.btn--lime:hover{color:var(--ink)!important;border-color:var(--cream)}

/* Nav */
.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:70;pointer-events:none}
.progress span{display:block;height:100%;background:var(--lime);transform:scaleX(0);transform-origin:left}
.nav{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:calc(env(safe-area-inset-top,0px) + 14px) var(--gutter) 14px;color:var(--cream);transition:color .45s var(--ease),background .45s var(--ease),border-color .45s}
.nav.solid{background:rgba(242,239,224,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--rule);color:var(--ink)}
.nav.solid.on-dark{background:rgba(33,35,35,.86);border-bottom-color:var(--rule-d);color:var(--cream)}
.logo{display:block;width:96px;aspect-ratio:1280/382;background:currentColor;flex:0 0 auto;
  -webkit-mask:url(../img/notpla-horizontal-dark.svg) center/contain no-repeat;mask:url(../img/notpla-horizontal-dark.svg) center/contain no-repeat}
.nav__links{display:none}
.nav__right{display:flex;align-items:center;gap:.6rem}
.nav .btn{padding:.72em 1em}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:1px solid currentColor}
.menu-btn span{display:block;width:16px;height:1px;background:currentColor;box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor}
.sheet{position:fixed;inset:0;z-index:80;background:var(--ink);color:var(--cream);padding:calc(env(safe-area-inset-top,0px) + 84px) var(--gutter) 32px;
  display:flex;flex-direction:column;gap:.2rem;opacity:0;pointer-events:none;transition:opacity .35s var(--ease);overflow-y:auto}
.sheet.on{opacity:1;pointer-events:auto}
.sheet a{display:flex;justify-content:space-between;align-items:baseline;padding:.85rem 0;border-bottom:1px solid var(--rule-d);text-decoration:none;font-size:1.6rem;letter-spacing:-.03em}
.sheet a i{font-style:normal;font-family:var(--f-mono);font-size:.7rem;opacity:.5;letter-spacing:.06em}
.sheet__close{position:absolute;right:var(--gutter);top:calc(env(safe-area-inset-top,0px) + 14px);width:42px;height:42px;border-radius:50%;border:1px solid var(--rule-d);font-size:1.2rem}
@media (min-width:1100px){
  .nav__links{display:flex;gap:1.3rem}
  .nav__links a{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;opacity:.62;transition:opacity .3s;white-space:nowrap}
  .nav__links a:hover,.nav__links a.on{opacity:1}
  .menu-btn{display:none}
  .logo{width:112px}
}

/* Section scaffolding */
.sec{position:relative;padding-block:clamp(84px,12vw,160px)}
.sec.tight{padding-block:clamp(64px,8vw,112px)}
.dark{background:var(--ink);color:var(--cream)}
.sandbg{background:var(--sand)}
.head{display:grid;gap:1.1rem;margin-bottom:clamp(40px,6vw,80px)}
.head .pill{justify-self:start;margin-bottom:.4rem}
.head .fold__btn,.fold__more .fold__btn{grid-column:1/-1;justify-self:start;color:var(--cream);margin-top:.4rem}
.fold__more{margin-top:clamp(28px,4vw,48px)}
@media (min-width:900px){.head{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:end;column-gap:clamp(32px,5vw,96px)}
  .head .pill{grid-column:1/-1}}
.lockup{display:flex;align-items:center;gap:.7rem;margin-top:clamp(56px,7vw,96px);color:var(--stone)}
.dark .lockup{color:rgba(242,239,224,.4)}
.lockup .n{width:22px;aspect-ratio:252681/180000;background:currentColor;-webkit-mask:url(../img/notpla-monogram-dark.svg) center/contain no-repeat;mask:url(../img/notpla-monogram-dark.svg) center/contain no-repeat}
.lockup .mono{font-size:.66rem}
.lockup .pg{margin-left:auto;font-family:var(--f-mono);font-size:.72rem}
.card{background:var(--sand);border-radius:var(--r);padding:clamp(18px,2.4vw,28px)}
.dark .card{background:var(--ink-2)}
.card--lime{background:var(--lime);color:var(--ink)}
.photo{position:relative;overflow:hidden;border-radius:var(--r);background:var(--sand)}
.photo img,.photo video{width:100%;height:100%;object-fit:cover;display:block}
.photo figcaption{position:absolute;left:12px;bottom:12px;right:12px}
.cap{font-size:.78rem;color:var(--stone);margin-top:.7rem;max-width:70ch}
.dark .cap{color:rgba(242,239,224,.5)}
[data-reveal]{will-change:transform,opacity}

/* Hero */
.hero{position:relative;height:340vh;background:var(--ink);color:var(--cream)}
.hero__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:radial-gradient(110% 80% at 50% 70%,#2d3130 0%,#212323 55%,#191b1b 100%)}
.hero__stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(130% 100% at 55% 55%,transparent 55%,rgba(0,0,0,.35) 100%)}
#heroGl{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero__poster{position:absolute;inset:0;display:grid;place-items:end center;padding-bottom:22svh;transition:opacity .9s var(--ease)}
.hero__poster svg{width:min(62vw,420px);height:auto;opacity:.9}
.three-on .hero__poster{opacity:0}
.hero__copy{position:absolute;left:var(--gutter);right:var(--gutter);top:calc(var(--navB,86px) + 6px);z-index:2;max-width:640px}
.hero__tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.1rem}
.hero__copy .pill{color:var(--lime)}
.hero__copy .pill--for{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.hero__copy h1{margin-bottom:1rem}
.hero__copy .lede{max-width:44ch;font-size:clamp(1rem,2.5vw,1.2rem)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.hero__stage .scrim{position:absolute;left:0;right:0;bottom:0;height:42%;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(25,27,27,.92) 0%,rgba(25,27,27,.7) 45%,rgba(25,27,27,0) 100%)}
.hero__steps{position:absolute;left:var(--gutter);right:var(--gutter);bottom:calc(env(safe-area-inset-bottom,0px) + 18px);z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
.hstep{border-top:1px solid var(--rule-d);padding-top:.6rem;position:relative;opacity:.42;transition:opacity .45s var(--ease)}
.hstep::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:var(--fill,0%);background:var(--lime)}
.hstep.on{opacity:1}
.hstep b{display:block;font-weight:500;font-size:.8rem;line-height:1.2}
.hstep span{display:none}
.hstep .mono{color:rgba(242,239,224,.55);font-size:.6rem;display:block;margin-bottom:.2rem}
.hero__caption{position:absolute;left:var(--gutter);right:var(--gutter);bottom:calc(env(safe-area-inset-bottom,0px) + 86px);z-index:2;max-width:420px;opacity:0}
.hero__caption h3{font-size:1.35rem;margin-bottom:.35rem}
.hero__caption p{font-size:.9rem;color:rgba(242,239,224,.72)}
.hero__caption .mono{color:var(--lime);display:block;margin-bottom:.45rem}
.hero__scroll{position:absolute;right:var(--gutter);top:calc(var(--navB,86px) + 64px);z-index:2;display:none;writing-mode:vertical-rl;color:rgba(242,239,224,.5)}
.webgl-note{position:absolute;left:var(--gutter);bottom:120px;color:rgba(242,239,224,.5);z-index:3}
@media (min-width:900px),(min-width:700px) and (orientation:landscape){
  .hero__copy{top:50%;transform:translateY(-58%);right:auto;width:min(560px,44vw)}
  .hero__steps{gap:1.4rem}
  .hstep span{display:block;font-size:.8rem;color:rgba(242,239,224,.58);line-height:1.35;margin-top:.2rem}
  .hstep b{font-size:.95rem}
  .hero__caption{left:var(--gutter);right:auto;bottom:140px;text-align:left;max-width:min(420px,34vw)}
  .hero__scroll{display:block}
  .hero__stage .scrim{height:26%;background:linear-gradient(0deg,rgba(25,27,27,.85),rgba(25,27,27,0))}
  .hero__poster{place-items:center end;padding:0 10vw 0 0}
}

/* At a glance */
.glance{background:var(--sand)}
.glance__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.gl{padding:1.4rem .9rem 1.5rem 0;border-bottom:1px solid rgba(33,35,35,.14);display:grid;gap:.3rem;align-content:start}
.gl:nth-child(2n){padding-left:.9rem;border-left:1px solid rgba(33,35,35,.14)}
.gl b{font-size:clamp(1.6rem,6vw,2.4rem);font-weight:400;letter-spacing:-.05em;line-height:1}
.gl span{font-size:.84rem;color:var(--graphite);line-height:1.35}
@media (min-width:900px){
  .glance__grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .gl,.gl:nth-child(2n){padding:1.8rem 1.1rem 1.9rem;border-left:1px solid rgba(33,35,35,.14);border-bottom:0}
  .gl:first-child{border-left:0;padding-left:0}
}

/* Problem */
.trio{display:grid;gap:14px}
.stat{display:grid;gap:1rem;align-content:start;border-top:1px solid var(--rule-d);padding-top:1.2rem}
.stat__top{display:flex;justify-content:space-between;align-items:center}
.stat__top .label{color:var(--orange)}
.stat__n{font-size:clamp(3.2rem,13vw,5.4rem);line-height:.92;letter-spacing:-.06em;font-weight:400}
.stat__n small{font-size:.42em;letter-spacing:-.03em;margin:0 .14em}
.stat p{font-size:.98rem;color:rgba(242,239,224,.78)}
.waffle{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:3px;max-width:340px}
.waffle i{aspect-ratio:1;border-radius:2px;background:rgba(242,239,224,.12);transition:background .4s}
.waffle i.on{background:var(--cream)}
.waffle i.hot{background:var(--orange)}
.stat{position:relative}
.gauge{position:absolute;right:0;top:1.2rem;width:88px;height:88px}
.gauge circle{fill:none;stroke-width:10}
.gauge .bg{stroke:rgba(242,239,224,.12)}
.gauge .fg{stroke:var(--orange);stroke-linecap:round;transform:rotate(-90deg);transform-origin:60px 60px}
.gauge .fg2{stroke:rgba(255,113,74,.45);stroke-linecap:round;transform:rotate(-90deg);transform-origin:60px 60px}
@media (min-width:900px){.trio{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}}
.micro{margin-top:clamp(56px,7vw,96px);display:grid;gap:clamp(24px,4vw,56px)}
.micro__organs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.organ{border:1px solid var(--rule-d);border-radius:var(--r);padding:14px;display:grid;gap:.6rem;align-content:start}
.organ svg{width:38px;height:38px;color:var(--orange)}
.organ b{font-weight:500;font-size:1rem}
.organ span{font-size:.76rem;color:rgba(242,239,224,.6);line-height:1.35}
.trend{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:end}
.trend__bars{display:flex;align-items:flex-end;gap:10px;height:120px}
.trend__bars div{width:40px;background:rgba(242,239,224,.18);border-radius:4px 4px 0 0;position:relative;transform-origin:bottom}
.trend__bars div.hot{background:var(--orange)}
.trend__bars div span{position:absolute;bottom:-1.5rem;left:50%;transform:translateX(-50%);font-family:var(--f-mono);font-size:.62rem;color:rgba(242,239,224,.55)}
.trend b{font-size:clamp(2.4rem,9vw,3.6rem);font-weight:400;letter-spacing:-.05em;line-height:1}
@media (min-width:900px){.micro{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:end}}

/* Policy timeline + flag wall */
.polwrap{display:grid;gap:28px;margin-bottom:clamp(72px,9vw,128px)}
.polsum{display:grid;gap:1.1rem;align-content:start}
.polsum__t{display:none}
@media (min-width:1000px){.polsum__t{display:block;margin:0 0 -.4rem;font-size:clamp(1.5rem,2.2vw,2rem);font-weight:500;letter-spacing:-.03em;line-height:1.08;color:var(--cream);max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .4s}
  .polsum__t.on{max-height:3.2em;opacity:1}}
.polsum__n{display:flex;align-items:baseline;gap:.8rem}
.polsum__n b{font-family:var(--f-mono);font-weight:400;font-size:clamp(4rem,16vw,7rem);line-height:.85;letter-spacing:-.06em;color:var(--lime)}
.polsum__n span{font-size:1rem;color:rgba(242,239,224,.75);max-width:20ch;line-height:1.3}
.flagwall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.fw{display:grid;gap:.45rem;justify-items:start;opacity:.28;transition:opacity .5s var(--ease),transform .5s var(--ease);transform:translateY(6px)}
.fw.on{opacity:1;transform:none}
.fw .flag{width:100%;max-width:76px;height:auto;aspect-ratio:3/2;border-radius:5px}
.fw.on .flag{box-shadow:0 0 0 2px var(--lime)}
.fw.next.on .flag{box-shadow:0 0 0 2px rgba(242,239,224,.5)}
.fw span{font-family:var(--f-mono);font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(242,239,224,.65)}
.flag{display:inline-block;width:26px;height:17px;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px rgba(242,239,224,.2);flex:0 0 auto}
.flag svg{width:100%;height:100%;display:block}
.pol{position:relative;display:grid;gap:12px;padding-left:28px}
.pol::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:1px;background:rgba(242,239,224,.16)}
.pol__fill{position:absolute;left:9px;top:8px;width:1px;height:0;background:var(--lime)}
.pe{position:relative;display:grid;gap:.45rem;padding:15px 16px 16px;border-radius:var(--r);background:var(--ink-2);border:1px solid var(--rule-d)}
.pe::before{content:"";position:absolute;left:-24px;top:21px;width:11px;height:11px;border-radius:50%;background:var(--ink);border:1.5px solid rgba(242,239,224,.55)}
.pe.in::before{background:var(--lime);border-color:var(--lime)}
.pe__top{display:flex;align-items:center;gap:.6rem}
.pe__yr{font-family:var(--f-mono);font-size:.82rem}
.pe__who{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.07em;text-transform:uppercase;color:rgba(242,239,224,.6)}
.pe__st{margin-left:auto;font-family:var(--f-mono);font-size:.56rem;letter-spacing:.07em;text-transform:uppercase;padding:.38em .7em;border-radius:999px;border:1px solid rgba(242,239,224,.3);color:rgba(242,239,224,.7);white-space:nowrap}
.pe.in .pe__st{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.pe.win{border-color:rgba(231,243,172,.55);background:linear-gradient(180deg,rgba(231,243,172,.09),rgba(231,243,172,.02)) var(--ink-2)}
.pe.win::before{background:var(--ink);border-color:var(--lime);box-shadow:0 0 0 3px rgba(231,243,172,.18)}
.pe.win .pe__st{border-color:var(--lime);color:var(--lime)}
.pe.win p b{color:var(--lime)}
.pe h4{font-size:1.02rem;font-weight:500}
.pe p{font-size:.86rem;color:rgba(242,239,224,.72)}
.pe p b{color:var(--orange);font-weight:500}
.pol__today{position:relative;display:flex;align-items:center;gap:.7rem;padding:2px 0;color:var(--lime);font-family:var(--f-mono);font-size:.62rem;letter-spacing:.07em;text-transform:uppercase}
.pol__today::before{content:"";position:absolute;left:-23px;width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 5px rgba(231,243,172,.18)}
.pol__today::after{content:"";flex:1;border-top:1px dashed rgba(231,243,172,.6)}
@media (min-width:900px){
  .polwrap{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(40px,6vw,96px)}
  /* the left column holds still while the measures scroll past (Pierre, 28 Oct). A stretched grid item has no room to stick */
  .polsum{position:sticky;top:110px;align-self:start}
  html.has-rail .polsum{top:48px}
  html.has-edbar.has-rail .polsum{top:82px}
  .flagwall{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
}

/* UK price escalator */
.esc{display:grid;gap:1.2rem;max-width:860px}
.esc__head h3{font-size:clamp(1.5rem,4.4vw,2.2rem);letter-spacing:-.035em}
.esc__years{display:grid;gap:18px}
.yr{display:grid;grid-template-columns:62px minmax(0,1fr);gap:6px 12px;align-items:center}
.yr>span{grid-row:span 2;font-family:var(--f-mono);font-size:.78rem;color:rgba(242,239,224,.75)}
.yr__bar{display:grid;grid-template-columns:minmax(0,1fr) 84px;gap:10px;align-items:center}
.yr__track{height:22px;border-radius:6px;background:rgba(242,239,224,.06);overflow:hidden}
.yr__track i{display:block;height:100%;width:0;border-radius:6px;transition:width .9s var(--ease)}
.yr__bar b{font-family:var(--f-mono);font-weight:400;font-size:.92rem;text-align:right;white-space:nowrap}
.esc__key{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;font-size:.8rem;color:rgba(242,239,224,.7)}
.esc__key span{display:inline-flex;align-items:center;gap:.5rem}
.esc__key i{width:12px;height:12px;border-radius:3px;display:inline-block}
.esc__range{max-width:520px}
.epr__delta{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:baseline}
.epr__delta b{font-family:var(--f-mono);font-weight:400;font-size:clamp(2rem,7vw,3rem);letter-spacing:-.05em;color:var(--orange)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--lime) var(--v,10%),rgba(242,239,224,.22) var(--v,10%))}
input[type=range]::-moz-range-track{height:2px;background:rgba(242,239,224,.22)}
input[type=range]::-moz-range-progress{height:2px;background:var(--lime)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--lime);margin-top:-10px;border:0;box-shadow:0 0 0 6px rgba(231,243,172,.16)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--lime);border:0}
.range{display:grid;gap:.5rem}
.range__row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.range__row b{font-family:var(--f-mono);font-weight:400;font-size:1.3rem;letter-spacing:-.03em}

/* Vision */
.vision{display:grid;gap:clamp(24px,4vw,48px)}
.vision__big{font-size:clamp(2.1rem,7.4vw,5rem);line-height:1.04;letter-spacing:-.045em;font-weight:500;max-width:18ch}
.vision__big em{font-style:normal;color:var(--olive)}
.vision__photos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vision__photos .photo{aspect-ratio:4/5}
.vision__photos .photo:first-child{aspect-ratio:auto;grid-column:1/-1;height:min(56vw,420px)}
@media (min-width:900px){.vision{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center}
  .vision__photos{grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;height:min(64vh,620px)}
  .vision__photos .photo,.vision__photos .photo:first-child{aspect-ratio:auto;height:100%}
  .vision__photos .photo:first-child{grid-row:span 2;grid-column:auto}}

/* Seaweed: kelp forest canvas from the coating site */
.sea{position:relative;background:var(--ink);color:var(--cream);overflow:hidden}
#kelp{position:absolute;inset:0;width:100%;height:100%;display:block}
.sea__content{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,5vw,96px);padding-block:clamp(84px,11vw,160px)}
.sea__panel{background:rgba(33,35,35,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(242,239,224,.12);border-radius:var(--r);padding:clamp(22px,3vw,44px);margin-top:34vh}
.sea__panel .lede{color:rgba(242,239,224,.75);margin-top:1.2rem}
.nots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin-top:1.8rem}
.nots div{border-top:1px solid rgba(242,239,224,.2);padding-top:.8rem;display:grid;gap:.3rem}
.nots b{font-family:var(--f-mono);font-size:clamp(1.3rem,4.4vw,1.6rem);font-weight:400;letter-spacing:-.03em;color:var(--lime)}
/* ---------- Land or sea (Pierre, 1 Nov): a pinned split, land crop left, seaweed right. js/site.js scrubs --line (the divide draws),
   --t on each row (its need slides in, then its zero lands and the unit follows), --e (the closing line) and --p (the land dims as the
   sea brightens). Everything defaults to 1, so without the script or with reduced motion the finished comparison shows ---------- */
.lvs{position:relative;height:300vh;background:var(--ink)}
.lvs__stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;color:var(--cream)}
.lvs__half{position:relative;overflow:hidden;background:var(--ink-2)}
.lvs__half img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lvs__land img{filter:saturate(.35) brightness(calc(.5 - .17 * var(--p,1)))}
.lvs__sea img{filter:brightness(calc(.4 + .14 * var(--p,1)));transform:scale(calc(1.08 - .08 * var(--p,1)))}
.lvs__half > .mono{position:absolute;top:calc(var(--navB,0px) + max(5vh,28px));left:var(--gutter);right:var(--gutter);font-size:.72rem;opacity:.85}
.lvs__sea > .mono{color:var(--lime)}
.lvs__stage::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(242,239,224,.35);transform-origin:top;transform:scaleY(var(--line,1))}
.lvs__rows{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);list-style:none;margin:0;padding:0;display:grid;gap:clamp(10px,2.4vh,26px)}
.lvs__rows li{display:grid;grid-template-columns:1fr 1fr;align-items:center;position:relative}
.lvs__k{position:absolute;left:50%;top:-1.3em;transform:translateX(-50%);z-index:1;font-size:.62rem;white-space:nowrap;background:var(--ink);padding:.2em .7em;border-radius:999px;color:rgba(242,239,224,.75);opacity:calc(.25 + .75 * var(--t,1))}
.lvs__l{justify-self:end;text-align:right;padding-right:clamp(16px,3vw,48px);font-size:clamp(1rem,2.2vw,1.6rem);letter-spacing:-.02em;max-width:20ch;line-height:1.15;
  opacity:calc(.12 + .88 * var(--t,1));transform:translateX(calc((1 - var(--t,1)) * -32px))}
.lvs__r{justify-self:start;padding-left:clamp(16px,3vw,48px);font-family:var(--f-mono);font-weight:400;font-size:clamp(3rem,9vw,7.5rem);line-height:.9;letter-spacing:-.06em;color:var(--lime);white-space:nowrap}
.lvs__r i{font-style:normal;display:inline-block;opacity:var(--t,1);transform:scale(calc(1.4 - .4 * var(--t,1)));transform-origin:50% 60%}
.lvs__r span{display:inline-block;opacity:calc(var(--t,1) * var(--t,1));transform:translateX(calc((1 - var(--t,1)) * 28px))}
.lvs__end{position:absolute;left:50%;bottom:clamp(24px,6vh,64px);width:min(92vw,640px);margin:0;text-align:center;font-size:clamp(1rem,2vw,1.3rem);line-height:1.4;
  opacity:var(--e,1);transform:translate(-50%,calc((1 - var(--e,1)) * 14px))}
@media (max-width:700px){.lvs__l{font-size:.92rem;max-width:13ch}.lvs__r{font-size:clamp(2.6rem,13vw,4rem)}}
/* the rail's thumbnail shows the finished comparison */
html.shot .lvs__stage,html.shot .lvs__rows li{--line:1!important;--p:1!important;--e:1!important;--t:1!important}
.nots span{font-size:.82rem;color:rgba(242,239,224,.65)}
.sea__more{font-size:.9rem;color:rgba(242,239,224,.65);margin-top:1.4rem}
.sea__tag{position:absolute;z-index:1;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;color:rgba(242,239,224,.75);display:none;align-items:center;gap:.5rem;pointer-events:none}
.sea__tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgba(231,243,172,.18)}
@media (min-width:1000px){
  .sea__content{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:min(900px,100svh);align-items:center}
  .sea__panel{grid-column:2;margin-top:0}
  .sea__tag{display:flex}
}

/* Portfolio flat lay */
.flat{position:relative;border-radius:var(--r);overflow:hidden;background:#efe9de}
.flat__img{position:relative;aspect-ratio:4/3}
.flat__img > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:78% 50%}
.hs{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:var(--ink);color:var(--lime);display:grid;place-items:center;
  font-family:var(--f-mono);font-size:.7rem;box-shadow:0 0 0 6px rgba(33,35,35,.14);transition:transform .35s var(--ease),background .3s}
.hs::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(33,35,35,.35);animation:ping 2.6s var(--ease) infinite}
.hs[aria-pressed="true"]{background:var(--lime);color:var(--ink)}
.hs:hover{transform:scale(1.12)}
@keyframes ping{0%{transform:scale(.8);opacity:1}80%,100%{transform:scale(1.6);opacity:0}}
.paused .hs::after,.reduce .hs::after{animation:none}
.flat__info{display:grid;gap:.4rem;padding:16px 18px 20px;background:var(--sand);min-height:118px}
.flat__info .label{color:var(--olive-d)}
.flat__chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.chip{display:inline-flex;align-items:center;gap:.5rem;font-size:.86rem;padding:.5em .9em;border-radius:999px;background:var(--sand)}
.chip svg{width:16px;height:16px;color:var(--olive-d)}
@media (min-width:900px){
  .flat__img{aspect-ratio:16/9}
  .flat__img > img{object-position:50% 50%}
  .flat__info{position:absolute;left:24px;top:24px;width:min(340px,32%);border-radius:var(--r);min-height:0}
}

/* Dirty secret */
.secret{display:grid;gap:clamp(24px,4vw,48px)}
.secret__photo{position:relative}
.secret__photo .photo{aspect-ratio:16/10}
.chem{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.chem span{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--orange);color:var(--orange);border-radius:999px;padding:.5em .9em;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase}
.chem span svg{width:12px;height:12px}
.pf{margin-top:clamp(48px,7vw,96px);display:grid;gap:clamp(20px,4vw,48px);align-items:center}
.pf__mark{font-size:clamp(3rem,13vw,7.4rem);line-height:.9;letter-spacing:-.06em;font-weight:500;display:flex;align-items:center;gap:.15em;flex-wrap:wrap}
.pf__mark svg{width:.8em;height:.8em;color:var(--lime)}
.pf__mark .tick path{stroke-dasharray:40;stroke-dashoffset:40}
#secret .secret{display:block;max-width:880px}
/* Coating: the text beside the oil-drop demo, one screen (Pierre, 1 Nov) */
#secret .secret--demo{display:grid;max-width:none;gap:clamp(24px,3vw,48px)}
@media (min-width:1000px){#secret .secret--demo{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center}
  #secret .secret--demo h2{font-size:clamp(2.2rem,3.4vw,3.4rem)}}
.coatdemo.coatdemo--box{height:auto;margin:0}
#secret > .wrap:first-child{margin-bottom:clamp(36px,6vw,64px)}
.coatdemo--box .coatdemo__stage{position:relative;top:auto;height:auto;aspect-ratio:16/12;max-height:calc(100svh - var(--navB,0px) - 120px);width:100%;border-radius:18px;box-shadow:inset 0 0 0 1px rgba(242,239,224,.08)}
.coatdemo--box .cd__half{top:14px}
.coatdemo--box .cd__u{left:16px}.coatdemo--box .cd__c{right:16px}
.coatdemo--box .cd__cap{left:18px;right:18px;bottom:66px;max-width:420px}
.coatdemo--box .cd__cap h3{font-size:1.1rem}
.coatdemo--box .cd__cap p{font-size:.84rem}
.coatdemo--box .cd__steps{left:18px;right:18px;bottom:14px;gap:.8rem}
.coatdemo--box .hstep{appearance:none;background:none;border:0;border-top:1px solid var(--rule-d);border-radius:0;margin:0;padding:.55rem 0 0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.coatdemo--box .hstep:hover{opacity:.8}.coatdemo--box .hstep.on{opacity:1}
.coatdemo--box .hstep b{font-size:.78rem}
@media (max-width:999px){.coatdemo--box .coatdemo__stage{aspect-ratio:4/5;max-height:none}.coatdemo--box .cd__cap{bottom:78px}}
@media (min-width:900px){.pf{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}

/* Traction */
.stack3d{position:relative;height:min(118vw,620px);margin-inline:calc(-1 * var(--gutter))}
#stackGl{position:absolute;inset:0;width:100%;height:100%;display:block}
.stack3d__labels{position:absolute;inset:0;pointer-events:none}
.tlab{position:absolute;left:0;top:0;transform:translate(-50%,-100%);text-align:center;opacity:0;transition:opacity .4s}
.tlab b{display:block;font-family:var(--f-mono);font-weight:400;font-size:clamp(.82rem,2.8vw,1.2rem);letter-spacing:-.03em;white-space:nowrap}
.tlab span{display:block;font-family:var(--f-mono);font-size:.56rem;color:var(--stone);letter-spacing:.04em;white-space:nowrap}
.tlab.on{opacity:1}
.stack3d__total{position:absolute;left:var(--gutter);top:0;display:grid;gap:.3rem}
.stack3d__total b{font-size:clamp(3rem,13vw,6.4rem);font-weight:400;letter-spacing:-.06em;line-height:.9}
.stack3d__n{display:flex;align-items:baseline;gap:.5rem}
.stack3d__n span{font-family:var(--f-mono);font-size:clamp(1rem,2.6vw,1.6rem);letter-spacing:-.02em}
.stack3d__key{position:absolute;left:var(--gutter);bottom:8px;display:flex;align-items:center;gap:.5rem;color:var(--stone)}
.stack3d__key{flex-wrap:wrap;column-gap:1.1rem;row-gap:.3rem;right:var(--gutter)}
.stack3d__key span{display:inline-flex;align-items:center;gap:.5rem}
.stack3d__key i{width:12px;height:12px;border-radius:2px;background:var(--kraft);display:inline-block;flex:none}
.stack3d__key i.lime{background:#dfeb98}
.brands{display:grid;gap:10px;margin-top:clamp(56px,7vw,96px)}
.brands .photo{aspect-ratio:3/4}
.brands__facts{display:grid;gap:10px}
.fact{display:grid;gap:.4rem;align-content:start}
.fact b{font-size:clamp(2.2rem,8vw,3.4rem);font-weight:400;letter-spacing:-.05em;line-height:1}
.brands__row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (min-width:900px){.brands{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr)}.brands__row{display:contents}}
.logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:clamp(40px,5vw,72px)}
.logos div{background:#F2EFE0;border-radius:8px;height:78px;display:grid;place-items:center;padding:12px}
.logos img{max-height:50px;max-width:100%;width:auto;object-fit:contain;filter:grayscale(1) contrast(1.05);opacity:.78;transition:filter .4s,opacity .4s}
.logos div:hover img{filter:none;opacity:1}
@media (min-width:700px){.logos{grid-template-columns:repeat(6,minmax(0,1fr))}.logos div{height:96px}}
.make{display:grid;gap:clamp(20px,4vw,48px);margin-top:clamp(56px,7vw,96px);align-items:center}
.make .photo{aspect-ratio:16/9}
.make .make__film{aspect-ratio:1;position:relative}   /* the film is square (2 Nov) */
.vctl{position:absolute;left:14px;bottom:14px;z-index:2;display:flex;gap:8px}
.vctl button{width:40px;height:40px;border-radius:50%;border:0;padding:0;background:rgba(26,27,27,.6);color:var(--cream);display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s}
.vctl button:hover{background:rgba(26,27,27,.85)}
.vctl svg{width:18px;height:18px}
.make__n{display:flex;gap:2rem;flex-wrap:wrap;margin-top:1.4rem;align-items:flex-start}
.make__n div{display:grid;gap:.2rem;align-content:start}
.make__n b{font-size:clamp(2rem,7vw,3rem);font-weight:400;letter-spacing:-.05em;line-height:1}
@media (min-width:900px){.make{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}
/* F1: the value chain under the film (Pierre, 14 Nov), drawn like the "Coatings Value Chain" slide: an icon over each pill on one line,
   the slide's phase bars underneath. The step playing turns ink and lime, and the line fills in ink as the film moves along it */
.mchain{grid-column:1/-1;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.mchain::-webkit-scrollbar{display:none}
.mchain__in{min-width:720px;--ic:clamp(36px,3.3vw,48px);--ph:28px}   /* on a phone the chain scrolls sideways inside itself */
.mchain__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));position:relative}
.mchain__steps::before,.mchain__steps::after{content:"";position:absolute;left:calc(100% / 14);right:calc(100% / 14);top:calc(var(--ic) + 10px + var(--ph) / 2 - 1px);height:2px;background:var(--rule);transform-origin:left}
.mchain__steps::after{background:var(--ink);transform:scaleX(var(--f,0));transition:transform 1.3s var(--ease)}   /* fills across each cut, not continuously (Pierre, 14 Nov) */
@media (prefers-reduced-motion:reduce){.mchain__steps::after{transition:none}}
.mchain__steps li{display:grid;min-width:0}
.mchain button{all:unset;box-sizing:border-box;display:grid;justify-items:center;align-content:start;gap:10px;width:100%;padding:0 4px;cursor:pointer;text-align:center;position:relative;z-index:1;-webkit-tap-highlight-color:transparent}
.mchain button:focus-visible{outline:2px solid var(--olive);outline-offset:4px;border-radius:10px}
.mchain__ic{display:block;width:var(--ic);height:var(--ic);object-fit:contain;transition:transform .35s var(--ease)}
.mchain__n{background:var(--ink);-webkit-mask:url(../img/notpla-monogram-dark.svg) center/86% auto no-repeat;mask:url(../img/notpla-monogram-dark.svg) center/86% auto no-repeat}
.mchain__p{position:relative;display:inline-flex;align-items:center;height:var(--ph);padding:0 14px;border-radius:999px;background:var(--olive);color:#fff;font-size:.8rem;font-weight:500;line-height:1;white-space:nowrap;box-shadow:0 0 0 5px var(--cream);transition:background .3s,color .3s,transform .35s var(--ease)}
.mchain__p--teal{background:#44757A}
.mchain__p::after{content:"";position:absolute;left:12px;right:12px;bottom:-8px;height:2px;border-radius:2px;background:var(--ink);transform:scaleX(0);transform-origin:left}
.mchain button > span{font-size:.74rem;line-height:1.3;color:var(--stone);max-width:16ch;transition:color .3s}
.mchain button:hover .mchain__ic{transform:translateY(-3px)}
.mchain li.on .mchain__p{background:var(--ink);color:var(--lime);transform:scale(1.06)}
.mchain li.on .mchain__p::after{transform:scaleX(var(--p,0))}
.mchain li.on .mchain__ic{transform:translateY(-4px)}
.mchain li.on button > span{color:var(--ink)}
.mchain__ph{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:clamp(12px,1.8vh,18px)}
.mchain__ph span{display:grid;place-items:center;min-height:26px;padding:.35em .8em;border-radius:999px;background:var(--c);color:var(--t,#fff);font-size:.68rem;line-height:1.2;text-align:center}
@media (min-width:760px){.mchain{overflow:visible}.mchain__in{min-width:0}}
@media (max-width:899px){.make .mchain,.make > .lock{order:1}.make > div:not(.mchain):not(.lock){order:2}}   /* one column: the chain right under the film it drives */
.make > .lock{grid-column:1/-1}   /* the paywall's blurred stand-in for the chain keeps its full width */

/* Model ladder */
.ladder{display:grid;gap:10px}
.rung{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:stretch;background:var(--sand);border-radius:var(--r);overflow:hidden;text-align:left;width:100%;transition:background .4s var(--ease)}
.rung .photo{border-radius:0;height:100%;min-height:120px}
.rung__body{padding:14px 14px 16px 0;display:grid;gap:.35rem;align-content:start}
.rung__body .label{color:var(--olive-d)}
.rung__body h3{font-size:1.25rem}
.rung__body p{font-size:.86rem;color:var(--graphite)}
.rung__more{display:none;font-size:.86rem;line-height:1.5}
.rung__more li{margin-bottom:.2rem}
.rung__more ul{margin:.4rem 0 0;padding-left:1.1rem}
.rung[aria-expanded="true"]{background:var(--lime)}
.rung[aria-expanded="true"] .rung__more{display:block}
.margin{display:flex;align-items:center;gap:.6rem;margin-top:1rem;color:var(--graphite)}
.margin__bar{flex:1;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--sand),var(--olive),var(--olive-d))}
@media (min-width:900px){.ladder{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .rung{grid-template-columns:1fr;grid-template-rows:200px auto}
  .rung__body{padding:18px 20px 22px}}
.pipe{display:grid;gap:clamp(28px,4vw,56px);margin-top:clamp(64px,8vw,112px)}
.funnel{display:grid;gap:8px}
.tier{position:relative;display:grid;gap:.25rem;padding:16px 18px;border-radius:var(--r);background:var(--sand);overflow:hidden}
.tier::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w,0%);background:var(--tc,var(--olive));opacity:.9;transition:width 1.2s var(--ease);z-index:0}
.tier>*{position:relative;z-index:1}
.tier b{font-size:clamp(1.8rem,6vw,2.6rem);font-weight:400;letter-spacing:-.05em;line-height:1}
.tier .label{color:var(--ink)}
.tier span{font-size:.84rem}
.tier small{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.03em;color:var(--graphite)}
.case{display:grid;gap:14px}
.case .photo{aspect-ratio:3/2}
.case__chart{margin:0;display:grid;gap:.4rem}
.case__chart .label{color:var(--graphite)}
.case__chart svg{width:100%;max-width:420px;height:auto;display:block;overflow:visible}
.case__chart line{stroke:rgba(33,35,35,.25);stroke-width:1}
.cb__b{fill:var(--olive);transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform .9s var(--ease) calc(var(--i) * .14s)}
.cb__v{font-family:var(--f-mono);font-size:11px;fill:var(--ink);opacity:0;transition:opacity .5s calc(.5s + var(--i) * .14s)}
.cb__y{font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;fill:var(--graphite)}
.case__chart.on .cb__b{transform:none}
.case__chart.on .cb__v{opacity:1}
.deals{display:grid;gap:10px;margin-top:clamp(48px,6vw,80px)}
.deal{display:grid;gap:.6rem;align-content:start;border-radius:var(--r);padding:20px;background:var(--sand)}
.deal .who{font-size:1.5rem;letter-spacing:-.03em;font-weight:500}
.deal b{font-size:clamp(2.2rem,8vw,3rem);font-weight:400;letter-spacing:-.05em;line-height:1}
.deal p{font-size:.88rem;color:var(--graphite)}
.deal--lime{background:var(--lime)}
/* Costs come down (21 Oct): bridge and glide path on cream cards in the dark What's next section */
.cdn{margin-top:clamp(56px,8vw,112px)}
.cdn__head{max-width:46rem}
.cdn__head .label{color:var(--lime)}
.cdn__head h3{margin:.5rem 0 .7rem;font-size:clamp(1.5rem,3.2vw,2.3rem);font-weight:500;letter-spacing:-.03em;line-height:1.08}
.cdn__head p{margin:0;color:rgba(242,239,224,.7);line-height:1.5}
.cdn__grid{display:grid;gap:14px;margin-top:clamp(24px,3vw,36px)}
.cdn__grid{max-width:760px}
.cdn__card{margin:0;background:var(--cream);color:var(--ink);border-radius:var(--r);padding:clamp(18px,2.4vw,28px);display:grid;align-content:start;gap:1.1rem}
.cdn__card figcaption{display:grid;gap:.3rem}
.cdn__card figcaption b{font-size:1.05rem;font-weight:500;letter-spacing:-.01em}
.cdn__card figcaption span{font-size:.85rem;color:var(--stone)}
.br{position:relative;display:grid;gap:7px;padding-bottom:6px}
.br__row{display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr) 1.8em;align-items:center;gap:.7rem}
.br__row>span{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.02em;color:var(--graphite);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.br__row em{font-style:normal;font-family:var(--f-mono);font-size:.7rem;color:var(--stone)}
.br__trk{position:relative;height:18px}
.br__trk::after{content:"";position:absolute;left:44%;top:-4px;bottom:-4px;border-left:2px dotted #E8583A;z-index:1}
.br__foot .br__trk{height:auto}.br__foot .br__trk::after{bottom:auto;height:8px}
.br__foot b{position:relative;display:block;padding-top:10px;margin-left:44%;transform:translateX(-50%);width:max-content;font-family:var(--f-mono);font-size:.66rem;font-weight:500;color:#E8583A}
.br__trk i{position:absolute;top:0;bottom:0;border-radius:4px;background:#6F7540;transform:scaleX(0);transform-origin:right;transition:transform .55s cubic-bezier(.3,1.2,.5,1) calc(.25s + var(--i,0)*120ms)}
.br__row:nth-child(odd):not(.br__end) .br__trk i{background:#A4A968}
.br__end>span{color:var(--ink);font-weight:500}
.br__end .br__trk i{background:var(--ink);transform-origin:left;transition-delay:0s}
.br__tgt .br__trk i{background:#A4A968;transition-delay:calc(.35s + var(--i)*120ms)}
.cdn.go .br__trk i{transform:none}
.reduce .br__trk i{transition:none}
@media (max-width:599px){.br__row{grid-template-columns:minmax(0,40%) minmax(0,1fr) 1.6em;gap:.5rem}.br__row>span{white-space:normal;line-height:1.15;font-size:.62rem}}
@media (min-width:900px){.pipe{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start}.deals{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}

/* Cup */
.cup{display:grid;gap:clamp(24px,4vw,48px)}
/* The glow behind the cup eases out to the ink colour well before the nearest edge (closest-side), so the frame never crops it */
.cup__view{position:relative;aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;background:radial-gradient(circle closest-side at 50% 47%,#313534 0%,#2e3231 30%,#2a2d2d 50%,#262928 65%,#232525 78%,#212323 88%)}
#cupGl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab}
/* Segmented control (round size, cup type): a pill of two buttons, the pressed one in lime */
.seg{display:inline-flex;align-items:center;justify-self:start;align-self:start;height:auto;gap:2px;padding:3px;border:1px solid rgba(242,239,224,.28);border-radius:999px;max-width:100%}
.seg button{appearance:none;border:0;background:transparent;color:inherit;font:500 .7rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding:.62rem .95rem;border-radius:999px;cursor:pointer;white-space:nowrap;transition:background .25s,color .25s,opacity .25s;opacity:.7}
.seg button:hover{opacity:1}
.seg button[aria-pressed="true"]{background:var(--lime);color:var(--ink);opacity:1}
.seg button:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
@media (max-width:380px){.seg button{padding:.6rem .7rem;font-size:.64rem}}
.cup__view .seg{position:absolute;left:12px;top:12px;z-index:2;color:var(--cream);background:rgba(20,22,22,.6)}
.cup__tags{position:absolute;inset:0;pointer-events:none}
.ctag{position:absolute;left:0;top:0;display:flex;align-items:center;gap:.4rem;transform:translate(-11px,-11px);opacity:0;transition:opacity .4s}
.ctag i{width:22px;height:22px;border-radius:50%;background:var(--cream);color:var(--ink);display:grid;place-items:center;font-style:normal;font-family:var(--f-mono);font-size:.62rem;box-shadow:0 0 0 4px rgba(242,239,224,.18)}
.ctag span{display:none;position:absolute;left:30px;top:50%;transform:translateY(-50%);font-size:.78rem;background:rgba(20,22,22,.82);padding:.3em .6em;border-radius:6px;white-space:nowrap}
.ctag.l span{left:auto;right:30px}
.ctag.on{opacity:1}
.ctag.bad i{background:var(--orange)}
.ctag.good i{background:var(--lime)}
.cup__list{display:grid;gap:.6rem;margin-top:1rem;padding:0;list-style:none}
.cup__list li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:.7rem;font-size:.88rem;color:rgba(242,239,224,.78)}
.cup__list li i{width:22px;height:22px;border-radius:50%;background:var(--cream);color:var(--ink);display:grid;place-items:center;font-style:normal;font-family:var(--f-mono);font-size:.62rem}
.cup__list li.bad i{background:var(--orange)}
.cup__list li.good i{background:var(--lime)}
.cupcount{display:grid;gap:.3rem;margin-top:clamp(28px,4vw,40px);border-top:1px solid var(--rule-d);padding-top:1.2rem}
.cupcount b{font-family:var(--f-mono);font-weight:400;font-size:clamp(2.2rem,9vw,3.6rem);letter-spacing:-.05em;line-height:1;color:var(--orange)}
.grant{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:center;margin-top:1.4rem}
.grant .flag{width:54px;height:36px;border-radius:4px;background:#1f3f9a;display:grid;place-items:center}
@media (min-width:900px){.cup{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center}
  .ctag span{display:inline-block}.cup__list{display:none}}

/* Parity */
.parity{display:grid;gap:clamp(24px,4vw,48px);margin-top:clamp(64px,8vw,112px)}
.parity svg{width:100%;height:auto;display:block;overflow:visible}
.parity svg text{font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;fill:rgba(242,239,224,.55);text-transform:uppercase}
.bul{list-style:none;padding:0;margin:0;display:grid;gap:.9rem}
.bul li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:.8rem;font-size:.98rem}
.bul li svg{width:18px;height:18px;margin-top:.2rem;color:var(--lime)}
@media (min-width:900px){.parity{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center}}

/* Future portfolio */
.future{display:grid;gap:16px;margin-top:clamp(64px,8vw,112px)}
.fut{display:grid;gap:14px;align-content:start}
.fut__photos{display:grid;grid-template-columns:1.4fr 1fr;gap:8px}
.fut__photos .photo{aspect-ratio:4/5}
.fut__photos .photo:first-child{aspect-ratio:auto}
.fut h3{margin-top:.4rem}
.fut ul{margin:0;padding-left:1.1rem;display:grid;gap:.35rem;font-size:.92rem;color:rgba(242,239,224,.78)}
.fut__deep{justify-self:start;margin-top:.6rem}
@media (min-width:900px){.future{grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px)}}

/* Moat */
.moat{display:grid;gap:clamp(28px,4vw,56px)}
.matrix{position:relative;aspect-ratio:1/1;border-radius:var(--r);background:var(--sand);overflow:hidden}
.matrix__zone{position:absolute;left:4%;right:4%;top:4%;height:52%;border-radius:8px;background:linear-gradient(180deg,rgba(164,169,104,.38),rgba(164,169,104,0))}
.matrix__zone span{position:absolute;left:10px;top:8px;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;color:var(--olive-d)}
.matrix .ax{position:absolute;background:rgba(33,35,35,.35)}
.matrix .ax.x{left:6%;right:6%;top:50%;height:1px}
.matrix .ax.y{top:6%;bottom:6%;left:50%;width:1px}
.matrix .axl{position:absolute;font-family:var(--f-mono);font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite)}
.mdot{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--stone)}
.mdot span{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:.7rem;white-space:nowrap;color:var(--graphite);display:none}
.mdot.l span{left:auto;right:16px}
.mdot.on span,.mdot.np span{display:block}
.mdot.np{width:22px;height:22px;margin:-11px 0 0 -11px;background:var(--ink)}
.mdot.np::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid var(--ink);opacity:.4}
.mdot.np span{font-weight:500;color:var(--ink);font-size:.86rem;left:50%;top:auto;bottom:calc(100% + 10px);transform:translateX(-70%)}
@media (min-width:700px){.mdot span{display:block}}
.ip{display:grid;gap:12px;margin-top:clamp(56px,7vw,96px)}
.ip__cert{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:center}
.ip__cert .photo{aspect-ratio:1/1.41;background:#fff;box-shadow:0 20px 40px -24px rgba(0,0,0,.4);transform:rotate(-2deg)}
/* six patents, six documents: stacked square, they fan out once the slide is in view */
.ip__stack{position:relative;aspect-ratio:1/1.41}
.ip__doc{position:absolute;inset:0;background:#fff;border-radius:3px;box-shadow:0 12px 26px -16px rgba(0,0,0,.45),0 0 0 .5px rgba(33,35,35,.08);display:grid;place-items:center;overflow:hidden;
  transform:rotate(calc(var(--r,0deg) * .2));transition:transform .9s var(--ease)}
.ip__stack.fan .ip__doc{transform:translate(var(--x,0),var(--y,0)) rotate(var(--r,0deg))}
.ip__doc img{width:82%;height:auto;mix-blend-mode:multiply}
.ip__top img{width:100%;height:100%;object-fit:cover;mix-blend-mode:normal}
.ip__doc--txt{background:#fff repeating-linear-gradient(180deg,transparent 0 9px,rgba(33,35,35,.09) 9px 10px) 14% 18% / 72% 64% no-repeat}
.ip__stack{margin:0 30px 0 26px}   /* room for the sheets that fan out either side */
@media (min-width:900px){.ip__cert{column-gap:clamp(40px,4vw,64px)}}
.ip__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ipn{background:var(--sand);border-radius:var(--r);padding:16px;display:grid;gap:.3rem;align-content:start}
.ipn b{font-size:clamp(2rem,7vw,2.8rem);font-weight:400;letter-spacing:-.05em;line-height:1}
.ipn span{font-size:.84rem;color:var(--graphite)}
@media (min-width:900px){.moat{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:'t m' 'c m';grid-template-rows:auto 1fr;align-items:start;row-gap:24px}.moat__txt{grid-area:t}.moat__map{grid-area:m;align-self:center}.moat__card{grid-area:c}.ip{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:center}.ip__cert{grid-template-columns:180px minmax(0,1fr)}}

/* Team */
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
.person{display:grid;gap:.6rem;align-content:start}
.person .photo{aspect-ratio:1/1;border-radius:50%;filter:grayscale(.2)}
.person b{font-weight:500;font-size:1rem;line-height:1.25}
.person span{font-size:.82rem;color:rgba(242,239,224,.6);line-height:1.35}
.people--sm{grid-template-columns:repeat(3,minmax(0,1fr))}
.people--sm .photo{width:72px}
.people--sm b{font-size:.88rem}
.people--sm span{font-size:.74rem}
@media (min-width:700px){.people{grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}.people--sm{grid-template-columns:repeat(5,minmax(0,1fr))}.people--sm .photo{width:88px}}
.teamblock{margin-top:clamp(48px,6vw,80px)}
.teamblock>.label{display:block;color:var(--lime);margin-bottom:1.2rem}
.board{display:grid;gap:clamp(20px,4vw,48px)}
.seats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;align-items:start}
.sq2{display:flex;gap:8px;justify-content:center;width:100%}
.sq2 i{width:calc(50% - 4px)!important}
.seat{display:grid;gap:.5rem;justify-items:center;text-align:center}
.seat i{width:100%;max-width:84px;aspect-ratio:1;border-radius:14px 14px 6px 6px;background:var(--ink-3);display:block;overflow:hidden}
.seat i img{width:100%;height:100%;object-fit:cover;display:block}
.seat.np i{background:var(--lime);box-shadow:0 0 0 2px var(--lime)}
.seat b{font-size:.78rem;font-weight:500;line-height:1.2}
.seat span{font-size:.66rem;color:rgba(242,239,224,.55);line-height:1.3}
.investors{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--rule-d)}
.inv{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:.85rem 0;border-bottom:1px solid var(--rule-d)}
.inv b{font-weight:500;font-size:1.02rem}
.inv span{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;color:rgba(242,239,224,.5);text-align:right}
@media (min-width:900px){.board{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.investors{grid-template-columns:1fr 1fr;column-gap:40px}}

/* Financials */
.fin{display:grid;gap:clamp(28px,4vw,56px)}
.chartbox{background:var(--sand);border-radius:var(--r);padding:16px 14px 12px;position:relative}
.chartbox svg{width:100%;height:auto;display:block;overflow:visible}
.chartbox svg text{font-family:var(--f-mono);font-size:10px;fill:var(--graphite)}
.chartbox svg text.tot{font-size:11px;fill:var(--ink)}
@media (max-width:600px){#revSvg text{font-size:15px}#revSvg text.tot{font-size:16px}#ebSvg text{font-size:12px}#ebSvg text.tot{font-size:13px}}
.chartbox .label{display:block;margin-bottom:.8rem}
.legend{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.8rem}
.legend button{display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;padding:.4em .75em;border-radius:999px;border:1px solid rgba(33,35,35,.2);transition:opacity .3s}
.legend button i{width:10px;height:10px;border-radius:2px;background:var(--c)}
.legend button[aria-pressed="false"]{opacity:.4}
.ctip{position:absolute;pointer-events:none;background:var(--ink);color:var(--cream);padding:.55rem .7rem;border-radius:8px;font-size:.76rem;line-height:1.45;opacity:0;transition:opacity .2s;min-width:150px;z-index:3}
.ctip.on{opacity:1}
.ctip b{font-family:var(--f-mono);font-weight:400}
@media (min-width:900px){.fin{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}.fin--solo{grid-template-columns:minmax(0,1fr);max-width:880px}}
.rounds{margin-top:clamp(64px,8vw,112px)}
.rtl{display:grid;gap:10px}
.rnd{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.2rem 1rem;padding:16px;border-radius:var(--r);background:var(--sand);position:relative;overflow:hidden}
.rnd__bar{position:absolute;left:0;bottom:0;height:4px;background:var(--olive);width:var(--w,0%)}
.rnd h4{font-size:1.15rem}
.rnd .when{font-family:var(--f-mono);font-size:.66rem;color:var(--stone);letter-spacing:.05em}
.rnd .amt{font-size:clamp(1.8rem,6vw,2.4rem);font-weight:400;letter-spacing:-.05em;line-height:1;grid-row:span 2;align-self:center;text-align:right}
.rnd dl{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1rem;margin:.8rem 0 0}
.rnd dt{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;color:var(--stone)}
.rnd dd{margin:0;font-size:.88rem}
.rnd--next{background:var(--ink);color:var(--cream)}
.rnd--next .when{color:var(--lime)}
.rnd--next .rnd__bar{background:var(--lime)}
@media (min-width:900px){.rtl{grid-template-columns:repeat(5,minmax(0,1fr))}.rnd{grid-template-columns:1fr}.rnd .amt{grid-row:auto;text-align:left;margin-top:.6rem}.rnd dl{grid-template-columns:1fr}}

/* The round */
.round{display:grid;gap:clamp(28px,4vw,56px)}
.round__big{display:grid;gap:.4rem}
.round__big b{font-size:clamp(4rem,19vw,10rem);font-weight:400;letter-spacing:-.07em;line-height:.85;color:var(--lime)}
.ms__yr{display:flex;align-items:baseline;flex-wrap:wrap;gap:.3rem .9rem;margin-bottom:1rem}
.ms__yr .label{color:rgba(242,239,224,.55);flex-basis:100%}
.ms__yr .num{font-size:clamp(3rem,7vw,4.6rem);font-weight:400;letter-spacing:-.05em;line-height:.95;color:var(--lime);font-variant-numeric:tabular-nums}
.ms__fast{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;background:var(--lime);color:var(--ink);border-radius:999px;padding:.45em .85em;align-self:center;
  opacity:0;transform:translateX(-8px);transition:opacity .4s ease .5s,transform .5s var(--ease) .5s}
.ms__yr.fast .ms__fast{opacity:1;transform:none}
.ms{display:grid;gap:0;border-top:1px solid var(--rule-d)}
.msr{display:grid;grid-template-columns:minmax(0,1fr);gap:.2rem;padding:.9rem 0;border-bottom:1px solid var(--rule-d)}
.msr .label{color:rgba(242,239,224,.5)}
.msr b{font-size:1.15rem;font-weight:500;letter-spacing:-.01em}
.msr b em{font-style:normal;color:var(--lime)}
.uses{margin-top:clamp(40px,5vw,64px)}
.uses__h{margin:.5rem 0 0;font-size:clamp(1.8rem,3.6vw,3rem);letter-spacing:-.04em}
.uses__bar{display:flex;height:56px;border-radius:10px;overflow:hidden;gap:2px;margin:1rem 0 1.2rem}
.uses__bar div{height:100%;transition:flex-grow 1s var(--ease)}
.uses__list{display:grid;gap:.6rem;list-style:none;margin:0;padding:0}
.uses__list li{display:grid;grid-template-columns:14px 44px minmax(0,1fr);gap:.7rem;align-items:baseline;font-size:.9rem;color:rgba(242,239,224,.82)}
.uses__list li i{width:12px;height:12px;border-radius:3px;background:var(--c);align-self:center}
.uses__list li{grid-template-columns:30px 44px minmax(0,1fr)}
.uses__list li i{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;color:var(--ink)}
.uses__list li i.dk{color:var(--cream)}
.uses__list li i svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.uses__list li b{font-family:var(--f-mono);font-weight:400;color:var(--cream)}
@media (min-width:900px){.round{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.msr{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:baseline}}

/* Close */
.close{position:relative;min-height:92svh;display:grid;align-items:end;color:var(--cream);overflow:hidden;background:#1d2a2a}
.close__bg{position:absolute;inset:-10% 0;background-size:cover;background-position:50% 50%}
.close__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,26,26,.15),rgba(20,26,26,.85))}
.close .wrap{position:relative;padding-block:clamp(84px,12vw,140px)}
.close h2{font-size:clamp(2.5rem,10vw,6.4rem);max-width:14ch;color:var(--cream)}
.close h2 .closeN{display:inline-block;text-align:left;font-variant-numeric:tabular-nums;color:var(--lime)}
.contact{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}

/* Sources + footer */
.sources ol{margin:0;padding:0;list-style:none;columns:3 280px;column-gap:28px}   /* dense, newspaper columns (Pierre, 26 Oct) */
.sources li{display:grid;grid-template-columns:1.5rem minmax(0,1fr);gap:.35rem;padding:.3rem 0;border-bottom:1px solid var(--rule);font-size:.7rem;line-height:1.35;color:var(--graphite);break-inside:avoid;scroll-margin-top:90px}
.sources li>span:first-child{font-family:var(--f-mono);font-size:.62rem;color:var(--stone);padding-top:.05rem}
.sources li a{word-break:break-word;color:var(--olive-d)}
.sources li:target{background:rgba(231,243,172,.6)}
.sources .stamp{margin:1.6rem 0 0;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--stone)}

.foot{padding:28px 0 calc(env(safe-area-inset-bottom,0px) + 28px);border-top:1px solid var(--rule);font-size:.78rem;color:var(--stone)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:space-between;align-items:center}

/* Cup note */
.cupnote{font-size:.9rem;line-height:1.5;color:rgba(242,239,224,.82);margin-top:1rem;max-width:56ch;min-height:2.9em}
.cupnote b{color:var(--orange);font-weight:500}

/* Feedback: a small button on every section, one dialog */
.fbtn{position:absolute;top:14px;right:var(--gutter);z-index:6;display:inline-flex;align-items:center;justify-content:center;gap:.45em;height:34px;min-width:34px;padding:0 .2em;
  border:1px solid currentColor;border-radius:999px;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;line-height:1;
  opacity:.55;transition:opacity .3s,background .3s,color .3s;background:transparent}
.fbtn svg{width:15px;height:15px;flex:0 0 auto}
.fbtn span{display:none}
.fbtn:hover,.fbtn:focus-visible{opacity:1}
.fbtn--hero{top:calc(env(safe-area-inset-top,0px) + 84px);color:var(--cream)}
.fbrow{display:flex;justify-content:flex-end;padding-block:0 14px}
.fbrow .fbtn{position:static}
@media (min-width:700px){.fbtn{padding:0 .95em 0 .8em}.fbtn span{display:inline}}
.fb{position:fixed;inset:0;z-index:95;display:grid;align-items:end;justify-items:center}
.fb[hidden]{display:none}
.fb__back{position:absolute;inset:0;background:rgba(20,22,22,.55);opacity:0;transition:opacity .3s}
.fb__card{position:relative;width:100%;max-width:520px;background:var(--cream);color:var(--ink);border-radius:16px 16px 0 0;padding:22px var(--gutter) calc(env(safe-area-inset-bottom,0px) + 20px);
  display:grid;gap:.9rem;transform:translateY(24px);opacity:0;transition:transform .35s var(--ease),opacity .3s;max-height:92svh;overflow-y:auto}
.fb.on .fb__back{opacity:1}
.fb.on .fb__card{transform:none;opacity:1}
.fb__card h3{font-size:1.45rem;margin-top:-.3rem}
.fb__x{position:absolute;right:12px;top:10px;width:36px;height:36px;border-radius:50%;font-size:1.3rem;color:var(--graphite)}
.fb__f{display:grid;gap:.4rem}
.fb__f .label{color:var(--stone)}
.fb__f input,.fb__f textarea{font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid rgba(33,35,35,.2);border-radius:10px;padding:.75em .85em;width:100%;resize:vertical}
.fb__f input:focus,.fb__f textarea:focus{outline:2px solid var(--olive);outline-offset:1px;border-color:transparent}
.fb__row{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1rem}
.fb__row .btn[disabled]{opacity:.5;pointer-events:none}
.fb__status{font-size:.86rem;color:var(--graphite)}
.fb__status.ok{color:var(--olive-d)}
.fb__status.err{color:var(--red)}
.fb .cap{margin-top:0}
@media (min-width:700px){.fb{align-items:center}.fb__card{border-radius:16px;padding:28px 30px 26px}}

/* Problem: where plastic waste goes */
.coatdemo--4{height:400vh}
#plasGl{position:absolute;inset:0;width:100%;height:100%;display:block}
#plasStory .cd__cap{max-width:480px}
#plasStory .cd__cap .mono{font-variant-numeric:tabular-nums}
@media (min-width:900px){.trio--2{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Coating: scroll-driven oil-drop demo, ported from the coating site */
.coatdemo{position:relative;height:300vh;margin-block:clamp(40px,6vw,72px) clamp(56px,7vw,96px)}
.coatdemo__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:radial-gradient(110% 80% at 50% 45%,#2e3130 0%,#212323 60%,#1a1b1b 100%)}
#coatGl{position:absolute;inset:0;width:100%;height:100%;display:block}
.cd__half{position:absolute;top:calc(var(--navB,86px) + 16px);font-family:var(--f-mono);font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;padding:.45em .8em;border-radius:999px;z-index:2}
.cd__u{left:var(--gutter);border:1px solid var(--orange);color:var(--orange)}
.cd__c{right:var(--gutter);background:var(--lime);color:var(--ink)}
.cd__cap{position:absolute;left:var(--gutter);right:var(--gutter);bottom:calc(env(safe-area-inset-bottom,0px) + 84px);z-index:2;max-width:440px}
.cd__cap .mono{color:var(--lime);display:block;margin-bottom:.4rem}
.cd__cap h3{font-size:1.3rem;margin-bottom:.3rem}
.cd__cap p{font-size:.9rem;color:rgba(242,239,224,.75)}
.cd__steps{position:absolute;left:var(--gutter);right:var(--gutter);bottom:calc(env(safe-area-inset-bottom,0px) + 18px);z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
.coatdemo__stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;pointer-events:none;background:linear-gradient(0deg,rgba(25,27,27,.9),rgba(25,27,27,0));z-index:1}
@media (min-width:900px){.cd__cap{bottom:120px}.cd__steps{gap:1.4rem}}
/* A scroll film that opens its slide: the slide's title sits on the film's first frame and fades as the film starts (Pierre, 1 Nov) */
.sec--film{padding-top:0!important}
.sec--film .coatdemo{margin-top:0}
.cd__intro{position:absolute;left:0;right:0;top:0;z-index:3;padding-top:calc(var(--navB,86px) + max(6vh,32px));pointer-events:none}
.cd__intro .head{margin-bottom:0}
.cd__intro .head > *{pointer-events:auto}
.cd__intro::before{content:"";position:absolute;inset:0 0 -14vh;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(26,27,27,.92) 0%,rgba(26,27,27,.7) 55%,rgba(26,27,27,0) 100%)}
.coatdemo--light .cd__intro::before{background:linear-gradient(180deg,rgba(233,228,207,.95) 0%,rgba(233,228,207,.75) 55%,rgba(233,228,207,0) 100%)}
/* Board: the business model opens on its film (the other editions keep the head above the ladder) */
#model:not(:has(> .model__head)),html[data-ed="board"] #model{padding-top:0!important}
#model:not(:has(> .model__head)) #scaleNet,html[data-ed="board"] #scaleNet{margin-top:0}
.reduce #venn .vn__cap{top:auto!important;bottom:calc(env(safe-area-inset-bottom,0px) + 78px)!important}

/* Motion preferences */
.reduce *{transition-duration:.01ms!important;animation:none!important}

/* Team story: the whole org chart as faces, a scroll-driven camera over one "world" layer */
.coatdemo--team{height:380vh}
#teamStory .coatdemo__stage{background:radial-gradient(110% 80% at 50% 40%,#2e3130 0%,#212323 60%,#1a1b1b 100%)}
.tm{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;will-change:transform;z-index:1}
.tm__f{appearance:none;border:0;padding:0;margin:0;position:absolute;left:0;top:0;width:var(--d);height:var(--d);border-radius:50%;background:var(--c,#3a3d3c);background-size:800% 800%;
  box-shadow:0 0 0 1.5px rgba(242,239,224,.28);display:grid;place-items:center;color:rgba(33,35,35,.75);font:500 calc(var(--d) * .42)/1 var(--f-sans);cursor:pointer;transition:box-shadow .2s,filter .3s}
.tm--img .tm__f{background-image:var(--sprite);color:transparent}
.tm__f.slt{box-shadow:0 0 0 2px var(--lime);background-size:cover;background-position:50% 30%}
.tm--img .tm__f.slt,.tm__f.slt{background-image:var(--photo,var(--sprite))}
.tm__f.ph{color:transparent}
.tm__f:hover,.tm__f.on{box-shadow:0 0 0 2px var(--lime)}
.tm__l,.tm__n{position:absolute;left:0;top:0;transform-origin:50% 0;text-align:center;pointer-events:none;opacity:0;white-space:normal}
.tm__l{width:max-content;max-width:132px;font:500 .58rem/1.25 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:rgba(242,239,224,.72)}
.tm__n{width:124px;display:grid;gap:.15rem}
.tm__n b{font-size:.9rem;font-weight:500;letter-spacing:-.01em;color:var(--cream);line-height:1.15}
.tm__n span{font-size:.72rem;color:rgba(242,239,224,.62);line-height:1.3}
.tm__ring{position:absolute;inset:0;pointer-events:none;z-index:2}
.tm__o{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:.3rem;text-align:center;opacity:0;width:118px}
.tm__o i{width:44px;height:44px;border-radius:50%;background:#3a3d3c center/cover;box-shadow:0 0 0 1.5px rgba(242,239,224,.35);display:block}
.tm__o b{font-size:.74rem;font-weight:500;line-height:1.15;color:var(--cream)}
.tm__o span{font:500 .55rem/1.25 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--lime)}
.tm__o.inv{width:auto;max-width:none;white-space:nowrap;padding:.45em .8em;border:1px solid rgba(242,239,224,.25);border-radius:999px;background:rgba(20,22,22,.6)}
.tm__o.inv b{font-size:.72rem}
.tm__tip{position:absolute;left:0;top:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .2s;background:var(--cream);color:var(--ink);border-radius:8px;padding:.45em .7em;font-size:.78rem;line-height:1.3;max-width:220px;transform:translate(-50%,calc(-100% - 10px))}
.tm__tip b{font-weight:600}
.tm__tip small{display:block;font:500 .55rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:#6F7540;margin-top:.15rem}
.tm__tip.on{opacity:1}
@media (max-width:759px){.tm__l{display:none}.tm__o{width:90px}.tm__o b{font-size:.68rem}.tm__o i{width:40px;height:40px}.tm__l{font-size:.52rem;max-width:104px}.tm__n span{font-size:.66rem}}
@media (min-width:900px){.tm__o i{width:58px;height:58px}.tm__o b{font-size:.82rem}.tm__l{font-size:.64rem;max-width:150px}.tm__n{width:150px}.tm__n b{font-size:1.02rem}.tm__n span{font-size:.78rem}}

/* Problem: three overlapping circles */
.coatdemo--venn{height:400vh}
.vn{background:radial-gradient(110% 80% at 60% 45%,#2c2f2e 0%,#212323 60%,#1a1b1b 100%)}
.vn__cv{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.vn__svg{position:absolute;left:50%;top:calc(env(safe-area-inset-top,0px) + 64px);transform:translateX(-50%);width:min(94vw,50svh);height:auto;overflow:visible;z-index:1}
.vn__blend{isolation:isolate}
.vn__circle{mix-blend-mode:screen;transition:none}
.vn__t{font:500 38px/1 var(--f-sans);letter-spacing:-.02em;fill:var(--cream)}
.vn__n{font:400 76px/1 var(--f-sans);letter-spacing:-.05em;fill:var(--cream)}
.vn__u{font:500 22px/1 var(--f-mono);letter-spacing:.015em;text-transform:uppercase;fill:rgba(242,239,224,.82)}
.vn__lab--ink .vn__t,.vn__lab--ink .vn__n{fill:var(--ink)}
.vn__lab--ink .vn__u{fill:rgba(33,35,35,.8)}
.vn__s{font:500 34px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;fill:var(--ink)}
.vn__l{font:600 32px/1 var(--f-sans);letter-spacing:-.01em;fill:var(--ink)}
.vn__midring{fill:var(--ink);stroke:var(--lime);stroke-width:4}
.vn__m{font:600 27px/1 var(--f-sans);letter-spacing:-.01em;fill:var(--lime)}
.vn__mid{opacity:0;transform-box:fill-box;transform-origin:center}
.vn__cap{position:absolute;left:var(--gutter);right:var(--gutter);bottom:calc(env(safe-area-inset-bottom,0px) + 78px);z-index:2;max-width:520px}
.vn__cap .mono{display:block;color:var(--lime);margin-bottom:.4rem}
.vn__cap h3{font-size:clamp(1.2rem,4.6vw,1.9rem);letter-spacing:-.03em;line-height:1.12;margin-bottom:.4rem}
.vn__cap p{font-size:.9rem;color:rgba(242,239,224,.75);line-height:1.45}
.vn__organs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin-top:.8rem}
.vn__organs .organ{display:grid;gap:.25rem;align-content:start;padding:10px}
.vn__organs svg{width:26px;height:26px;color:#FF714A}
.vn__organs b{font-size:.82rem;font-weight:500}
.vn__organs span{font-size:.72rem;color:rgba(242,239,224,.62);line-height:1.3}
.vn__lens{list-style:none;margin:.7rem 0 0;padding:0;display:grid;gap:.45rem}
.vn__lens li{font-size:.8rem;line-height:1.4;color:rgba(242,239,224,.72);padding-left:1.5rem;position:relative}
.vn__lens li b{color:var(--cream);font-weight:500;margin-right:.25rem}
.vn__lens i{position:absolute;left:0;top:.2em;width:14px;height:14px;border-radius:50%;background:linear-gradient(90deg,var(--a) 50%,var(--b) 50%)}
@media (min-width:900px){
  .vn__svg{left:auto;right:4vw;top:50%;transform:translateY(-50%);width:min(52vw,82vh)}
  .vn__cap{top:calc(var(--navB,86px) + max(7vh,48px));bottom:auto;transform:none;max-width:min(38vw,500px)}   /* pinned under the menu bar, so the statement stays put across steps whatever follows it */
  .vn__cap p{font-size:.98rem}
}

/* ---------- Microplastic count: photo, result, drops, the case, then the experts ---------- */
.mpc{display:grid;gap:clamp(24px,4vw,56px)}
@media (min-width:900px){.mpc{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:start}.mpc__photo{position:sticky;top:96px}}
.mpc__photo{aspect-ratio:3/2;margin:0}
.mpc__tag{position:absolute;left:12px;bottom:12px}
.mpc__res{display:grid;gap:1.4rem;align-content:start}
.mpc__res .label{color:var(--lime)}
.mpc__big{display:grid;gap:.5rem}
.mpc__big b{font-size:clamp(3rem,8vw,5.6rem);line-height:.9;color:var(--lime)}
.mpc__big span{color:rgba(242,239,224,.74);max-width:38ch}
.mpc__case{font-size:clamp(1.02rem,2.2vw,1.2rem);line-height:1.5;max-width:46ch;margin:0}
.mpc__cta{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:center}
.mpc__cta .cap{margin:0;max-width:32ch}
.xp{margin-top:clamp(56px,8vw,110px);border-top:1px solid var(--rule-d);padding-top:clamp(28px,4vw,44px);display:grid;gap:1.6rem}
@media (min-width:900px){.xp{grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);column-gap:clamp(32px,5vw,96px)}}
.xp__head{display:grid;gap:.7rem;align-content:start}
.xp__head .label{color:var(--lime)}
.xp__head p{margin:0;font-size:.9rem;line-height:1.45}
.xp__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,136px),1fr));gap:1.6rem 1.1rem}
.xp__list li{display:grid;gap:.3rem;align-content:start}
.xp__list img,.xp__list .ini{width:64px;height:64px;border-radius:50%;object-fit:cover;margin-bottom:.45rem;display:block}
.xp__list .ini{display:grid;place-items:center;background:var(--ink-3);font-style:normal;font-family:var(--f-mono);font-size:.82rem;color:var(--lime)}
.xp__list b{font-weight:500;font-size:.98rem;line-height:1.25}
.xp__list span{font-size:.8rem;color:rgba(242,239,224,.6);line-height:1.35}
@media (min-width:1100px){.xp__list{grid-template-columns:repeat(5,minmax(0,1fr))}}   /* all five speakers on one row on a laptop screen */
/* a film to watch under the speakers (Pierre, 1 Nov): Netflix's poster art (from its title page) with a play button on the empty navy
   left of the plate, the whole card links to the film on Netflix */
.watch{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;align-items:center;padding:14px;border-radius:14px;background:var(--ink-2);color:inherit;text-decoration:none;
  border:1px solid rgba(242,239,224,.07);transition:border-color .3s}
.watch:hover,.watch:focus-visible{border-color:rgba(231,243,172,.45)}
@media (min-width:640px){.watch{grid-template-columns:clamp(180px,20vw,250px) minmax(0,1fr);gap:1.5rem}}
@media (min-width:900px){.watch{grid-column:2}}
.watch__screen{position:relative;aspect-ratio:16/9;border-radius:9px;background:#1C2B4A;overflow:hidden}
.watch__screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.watch:hover .watch__screen img{transform:scale(1.04)}
.watch__screen svg{position:absolute;left:21%;top:50%;translate:-50% -50%;width:44px;height:44px;filter:drop-shadow(0 4px 14px rgba(0,0,0,.35));transition:transform .4s var(--ease)}
.watch:hover .watch__screen svg{transform:scale(1.1)}
.watch__screen .mono{position:absolute;font-size:.56rem;color:rgba(242,239,224,.72)}
.watch__screen .nfx{position:absolute;left:12px;top:11px;width:clamp(54px,6vw,72px);height:auto}   /* Netflix's wordmark, so the card reads as Netflix at a glance (Pierre, 2 Nov) */
.watch__screen .br{right:10px;bottom:9px}
.watch__txt{display:grid;gap:.4rem;align-content:start}
.watch__txt .label{color:var(--lime)}
.watch__h{font-weight:500;font-size:clamp(1.3rem,1.8vw,1.6rem);letter-spacing:-.02em;line-height:1.15}
.watch__p{font-size:.9rem;line-height:1.45;color:rgba(242,239,224,.75)}
.watch__txt small{font-size:.78rem;color:rgba(242,239,224,.5)}
.watch__go{color:var(--lime);margin-top:.35rem}
.watch__go .arr{display:inline-block;transition:transform .4s var(--ease)}
.watch:hover .watch__go .arr{transform:translate(2px,-2px)}

/* ---------- The evidence: body map + detection chart, study card, hazard ratio, chemicals ---------- */
.ev{margin-top:clamp(64px,9vw,120px);border-top:1px solid var(--rule-d);padding-top:clamp(28px,4vw,44px);display:grid;gap:clamp(22px,3vw,34px)}
.ev__head{display:grid;gap:.7rem;max-width:62ch}
.ev__head .label{color:var(--lime)}
.ev__head h3{margin:0;font-size:clamp(1.6rem,3.6vw,2.6rem);font-weight:500;letter-spacing:-.03em;line-height:1.05}
.ev__head p{margin:0}
.ev__grid{display:grid;gap:clamp(18px,3vw,40px);align-items:center}
@media (min-width:900px){.ev__grid{grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr)}}
.ev__body{width:100%;max-height:440px;height:auto;justify-self:center;overflow:visible}
@media (max-width:899px){.ev__body{max-height:260px}}
.ev__fig{fill:#2d302f}
.evdot{cursor:pointer}
.evdot circle{transition:r .35s cubic-bezier(.22,1,.36,1),opacity .35s,fill .35s}
.evdot .c{fill:var(--orange)}
.evdot .h{fill:transparent}
.evdot .ring{fill:none;stroke:var(--orange);stroke-width:1.2;opacity:.45;transform-box:fill-box;transform-origin:center;animation:evPulse 2.4s ease-out infinite}
.evdot.on .c{fill:var(--lime)}
.evdot.on .ring{stroke:var(--lime);opacity:.8}
@keyframes evPulse{0%{transform:scale(.6);opacity:.6}100%{transform:scale(1.9);opacity:0}}
@media (prefers-reduced-motion:reduce){.evdot .ring{animation:none}}
.ev__chart{display:grid;gap:.4rem;min-width:0}
.ev__axis,.evrow{display:grid;grid-template-columns:2.9rem minmax(0,8.6rem) minmax(0,1fr) 5.4rem;gap:.8rem;align-items:center}
.ev__axis{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(242,239,224,.5);padding:0 .6rem}
.ev__axis span:first-child{grid-column:1/3}
.ev__axis span:nth-child(2),.ev__axis span:nth-child(3),.ev__axis span:nth-child(4){grid-column:3;grid-row:1}
.ev__axis span:nth-child(3){justify-self:center}.ev__axis span:nth-child(4){justify-self:end}
.ev__rows{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.evrow{padding:.62rem .6rem;border-radius:8px;cursor:pointer;transition:background .3s}
.evrow:hover,.evrow.on{background:var(--ink-2)}
.evrow:focus-visible{outline:2px solid var(--lime);outline-offset:1px}
.evrow .y{font-family:var(--f-mono);font-size:.74rem;color:rgba(242,239,224,.5)}
.evrow .t{font-size:.95rem;line-height:1.2}
.evrow.on .t{color:var(--lime)}
.evrow .tr{position:relative;height:8px;border-radius:4px;background:rgba(242,239,224,.09) linear-gradient(90deg,transparent calc(50% - .5px),rgba(242,239,224,.18) calc(50% - .5px),rgba(242,239,224,.18) calc(50% + .5px),transparent calc(50% + .5px))}
.evrow .tr i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--orange);transform-origin:left;transform:scaleX(0);transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.ev.on .evrow .tr i{transform:scaleX(1)}
.evrow .n{font-family:var(--f-mono);font-size:.78rem;text-align:right;color:rgba(242,239,224,.8);font-variant-numeric:tabular-nums}
@media (max-width:560px){.ev__axis,.evrow{grid-template-columns:2.2rem minmax(0,5.9rem) minmax(0,1fr) 5.3rem;gap:.5rem}.evrow{padding:.6rem .4rem}.evrow .t{font-size:.86rem}.evrow .n{font-size:.72rem;white-space:nowrap}.ev__axis{padding:0 .4rem}.ev__axis span:nth-child(3){display:none}}
.ev__card{border:1px solid var(--rule-d);border-radius:var(--r);padding:clamp(16px,2.4vw,24px);display:grid;gap:.55rem;min-height:9.5rem;align-content:start}
.ev__card .k{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--lime)}
.ev__card b{font-size:clamp(1.1rem,2.4vw,1.35rem);font-weight:500;line-height:1.3}
.ev__card p{margin:0;color:rgba(242,239,224,.7);font-size:.9rem;line-height:1.45}
.ev__card .m{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-family:var(--f-mono);font-size:.7rem;color:rgba(242,239,224,.55)}
.ev__card .m a{color:var(--lime)}
.ev__more{display:grid;gap:clamp(18px,3vw,36px)}
@media (min-width:900px){.ev__more{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ev__fig2{margin:0;background:var(--ink-2);border-radius:var(--r);padding:clamp(16px,2.4vw,26px);display:grid;gap:.9rem;align-content:start}
.ev__fig2 .k{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--lime)}
.ev__fig2 h4{margin:0;font-size:1.15rem;font-weight:500;line-height:1.25}
.ev__fig2 svg{width:100%;height:auto;overflow:visible}
.ev__fig2 .cap{margin:0}
.hr text{font-family:var(--f-mono);font-size:11px;fill:rgba(242,239,224,.55)}
.hr .ax{stroke:rgba(242,239,224,.25);stroke-width:1}
.hr .ref{stroke:rgba(242,239,224,.5);stroke-width:1;stroke-dasharray:3 4}
.hr .ci{stroke:var(--orange);stroke-width:2.5;stroke-linecap:round;transform-box:fill-box;transform-origin:var(--o,center);transform:scaleX(0);transition:transform 1.2s cubic-bezier(.22,1,.36,1) .2s}
.hr .pt{fill:var(--orange);transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .6s cubic-bezier(.22,1,.36,1)}
.hr .val{font-size:15px;fill:var(--cream)}
.hr.on .ci{transform:scaleX(1)}.hr.on .pt{transform:scale(1)}
.chem__rows{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.chem__rows li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.45rem 1rem;align-items:baseline;font-size:.88rem;color:rgba(242,239,224,.75)}
.chem__rows b{font-family:var(--f-mono);font-weight:400;color:var(--cream);font-variant-numeric:tabular-nums;font-size:1rem}
.chem__rows b small{color:rgba(242,239,224,.55);font-size:.78em;margin-left:.3em}
.chem__rows .tr{grid-column:1/-1;position:relative;height:8px;border-radius:4px;background:rgba(242,239,224,.09)}
.chem__rows .tr i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;transform-origin:left;transform:scaleX(0);transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.chm.on .chem__rows .tr i{transform:scaleX(1)}
.chem__rows li.alt{border-top:1px solid rgba(242,239,224,.14);padding-top:1rem}

/* ---------- Lab readout: metadata, scan view, size distribution, concentration ---------- */
.lab{margin-top:clamp(40px,6vw,72px);border:1px solid var(--rule-d);border-radius:var(--r);padding:clamp(16px,2.6vw,30px);display:grid;gap:clamp(18px,2.4vw,26px);
  background:linear-gradient(180deg,rgba(231,243,172,.035),transparent 40%),var(--ink)}
.lab__top{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:end}
.lab__top .label{color:var(--lime)}
.lab__top h3{margin:.45rem 0 0;font-size:clamp(1.3rem,2.8vw,1.9rem);font-weight:500;letter-spacing:-.025em;line-height:1.1}
.lab__meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0;background:var(--rule-d);border:1px solid var(--rule-d);border-radius:8px;overflow:hidden}
@media (min-width:640px){.lab__meta{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1180px){.lab__meta{grid-template-columns:repeat(6,minmax(0,1fr))}}
.lab__meta div{background:var(--ink);padding:.7rem .85rem;display:grid;gap:.25rem}
.lab__meta dt{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(242,239,224,.5)}
.lab__meta dd{margin:0;font-size:.86rem;line-height:1.3}
.lab figure{margin:0;display:grid;gap:.7rem;align-content:start}
.lab .k{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(242,239,224,.55)}
.lab__scope canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.lab__chart{background:var(--ink-2);border-radius:10px;padding:clamp(12px,1.8vw,18px)}
.lab__chart svg{width:100%;height:auto;overflow:visible}
.lab__chart text{font-family:var(--f-mono);font-size:10px;fill:rgba(242,239,224,.6)}
.lab__chart .ax{stroke:rgba(242,239,224,.28);stroke-width:1}
.lab__chart .gr{stroke:rgba(242,239,224,.08);stroke-width:1}
.lab__chart .bar{fill:var(--orange);transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform .9s cubic-bezier(.22,1,.36,1)}
.lab__chart .val{font-size:12px;fill:var(--cream)}
.lab__chart .nd{font-size:9px;fill:rgba(242,239,224,.42)}
.lab__chart svg.grow .bar{transform:scaleY(1)}
.lab__chart .mk{transition:transform 1s cubic-bezier(.22,1,.36,1),opacity .4s}
.lab__chart .mk text{font-size:10px}
.lab__chart .mk.sel text{fill:var(--cream);font-size:11px}
.lab > .cap{margin:0}
.lab__duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,3vw,40px)}
.lab__hud{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem .8rem}
.lab__fov .k{color:var(--cream);font-size:clamp(.56rem,1.6vw,.66rem)}
.lvl{font-style:normal;display:inline-flex;align-items:center;gap:.45em;font-family:var(--f-mono);font-size:clamp(.56rem,1.5vw,.64rem);letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--c);color:var(--c);border-radius:999px;padding:.35em .75em}
.lvl::before{content:"";width:.6em;height:.6em;border-radius:50%;background:var(--c)}
.lab__scope{position:relative;aspect-ratio:1;width:100%}
.lab__scope canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.lab__n{position:absolute;left:0;bottom:0;font-family:var(--f-mono);font-weight:400;font-size:clamp(1.5rem,4.4vw,2.6rem);line-height:1;color:var(--lime);font-variant-numeric:tabular-nums}
.lab__fov[data-who="1"] .lab__n{color:#F0D64A}
.lab__calc{margin:0;font-family:var(--f-mono);font-size:clamp(.62rem,1.6vw,.78rem);line-height:1.7;color:rgba(242,239,224,.72);border-top:1px solid var(--rule-d);padding-top:.6rem}
.lab__calc b{font-weight:400;color:var(--cream)}
.lab__dist .cap{margin:0}
/* lab: every test as a distribution curve, bands coloured by the lab's levels */
#labDist{touch-action:pan-y}
#labDist .bnd{opacity:0;transition:opacity .6s}
#labDist.grow .bnd{opacity:.92}
#labDist.done .bnd{transition-delay:0s !important;transition-duration:.25s}
#labDist.hl .bnd{opacity:.22}
#labDist.hl .bnd.on{opacity:1}
#labDist .cut{stroke:var(--ink-2);stroke-width:2}
#labDist .crv{fill:none;stroke:var(--cream);stroke-width:2;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.45,0,.2,1)}
#labDist.grow .crv{stroke-dashoffset:0}
#labDist .mkr{opacity:0;transition:opacity .5s 1.5s}
#labDist.grow .mkr{opacity:1}
#labDist .mkr .cut{stroke-width:1;stroke:rgba(20,22,22,.55)}
#labDist .dot{stroke:var(--ink-2);stroke-width:2}
#labDist .mkr.me .dot{transform-box:fill-box;transform-origin:center;animation:dotPulse 2.4s ease-in-out 2.2s infinite}
@keyframes dotPulse{50%{transform:scale(1.45)}}
#labDist .rd{fill:var(--cream)}
#labDist .rd.hint{fill:rgba(242,239,224,.38)}
.lab__key{display:flex;flex-wrap:wrap;gap:.4rem}
.lab__key .lvl{transition:opacity .25s}
.lab__key.hl .lvl{opacity:.35}
.lab__key.hl .lvl.on{opacity:1}
.lab__pcts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,3vw,32px);border-top:1px solid var(--rule-d);padding-top:.8rem}
.lab__pcts p{margin:0;display:grid;gap:.3rem;align-content:start}
.lab__pcts b{font-family:var(--f-mono);font-weight:400;font-size:clamp(1.4rem,4vw,2.2rem);line-height:1;color:var(--c);font-variant-numeric:tabular-nums}
.lab__pcts span{font-size:.8rem;line-height:1.35;color:rgba(242,239,224,.7)}
@media (prefers-reduced-motion:reduce){#labDist .bnd,#labDist .crv,#labDist .mkr{transition:none}#labDist .mkr.me .dot{animation:none}}
/* Internal draft only: the preview bar that shows the draft as each external edition will publish it */
.edbar{position:fixed;inset:0 0 auto 0;z-index:90;height:34px;display:flex;align-items:center;gap:.7rem;padding:0 var(--gutter);background:#121413;color:var(--cream);
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid rgba(242,239,224,.14)}
.edbar__k{color:rgba(242,239,224,.5);white-space:nowrap}
.edbar__seg{display:flex;gap:2px;padding:2px;border:1px solid rgba(242,239,224,.22);border-radius:999px}
.edbar__seg button{appearance:none;border:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;padding:.5em .85em;border-radius:999px;cursor:pointer;opacity:.72;white-space:nowrap}
.edbar__seg button:hover{opacity:1}
.edbar__seg button[aria-pressed="true"]{background:var(--lime);color:var(--ink);opacity:1}
.edbar__live{margin-left:auto;color:rgba(242,239,224,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
html.has-edbar .nav{top:34px}
html.has-edbar .progress{top:34px}
html.has-edbar main{padding-top:34px}
.edbar__todo{appearance:none;display:inline-flex;align-items:center;gap:.55em;padding:.5em .85em;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;border:1px solid rgba(242,239,224,.22);border-radius:999px;cursor:pointer;white-space:nowrap}
.edbar__todo:hover,.edbar__todo[aria-expanded="true"]{border-color:var(--lime)}
.edbar__todo b{font-weight:500;color:var(--lime)}
.edbar__todo svg:last-child{transition:transform .2s}
.edbar__todo[aria-expanded="true"] svg:last-child{transform:rotate(180deg)}
.edtodo{position:fixed;top:34px;left:8px;z-index:91;width:min(660px,calc(100vw - 16px));max-height:calc(100dvh - 46px);overflow:auto;overscroll-behavior:contain;padding:.4rem 1.1rem 1rem;background:#121413;color:var(--cream);
  font-family:var(--f-sans);border:1px solid rgba(242,239,224,.18);border-top:0;border-radius:0 0 14px 14px;box-shadow:0 18px 48px rgba(0,0,0,.45)}
.edtodo p{max-width:none}
.edtodo__h{display:flex;justify-content:space-between;gap:1rem;margin:1.1rem 0 .15rem;padding-bottom:.45rem;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--lime);border-bottom:1px solid rgba(242,239,224,.18)}
.edtodo__h span{color:rgba(242,239,224,.55)}
.edtodo ul{list-style:none;margin:0;padding:0}
.edtodo__i{display:grid;grid-template-columns:1fr auto;gap:.2rem 1rem;align-items:start;padding:.6rem 0;border-bottom:1px solid rgba(242,239,224,.08)}
.edtodo__i b{font-size:.88rem;font-weight:500;line-height:1.3;color:var(--cream)}
.edtodo__id{font-family:var(--f-mono);font-size:.7rem;font-weight:400;letter-spacing:.02em;color:var(--lime);margin-right:.55em}
.edtodo__d{grid-column:1 / -1;margin:0;font-size:.78rem;line-height:1.4;color:rgba(242,239,224,.68)}
.edtodo__m{grid-column:1 / -1;font-family:var(--f-mono);font-size:.6rem;color:rgba(242,239,224,.5)}
.edtodo__m a{color:var(--lime);text-decoration:none}
.edtodo__m a:hover{text-decoration:underline}
.edtodo__s{font-family:var(--f-mono);font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;padding:.3em .7em;border:1px solid rgba(242,239,224,.28);border-radius:999px;color:rgba(242,239,224,.78);white-space:nowrap}
.edtodo__s[data-s="Decide"]{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.edlinks{width:min(460px,calc(100vw - 16px))}
.edlinks__i{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.3rem 1rem;align-items:center;padding:.7rem 0;border-bottom:1px solid rgba(242,239,224,.08)}
.edlinks__i b{font-size:.88rem;font-weight:500;color:var(--cream)}
.edlinks__v{font-family:var(--f-mono);font-size:.6rem;color:rgba(242,239,224,.5);white-space:nowrap}
.edlinks__i a{font-family:var(--f-mono);font-size:.74rem;color:var(--lime);text-decoration:none;overflow-wrap:anywhere}
.edlinks__i a:hover{text-decoration:underline}
.edlinks__i button{appearance:none;background:transparent;font-family:var(--f-mono);font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;padding:.45em .9em;border:1px solid rgba(242,239,224,.28);border-radius:999px;color:var(--cream);cursor:pointer;white-space:nowrap}
.edlinks__i button:hover{border-color:var(--lime);color:var(--lime)}
@media (max-width:700px){.edbar__k,.edbar__live,.edbar__todoL,.edbar__v{display:none}.edbar{justify-content:center;gap:.4rem}.edbar__seg button{padding:.5em .6em}.edbar__todo{padding:.5em .6em}}
/* in the draft, content that only some editions get is outlined so it is easy to spot */
html[data-ed="internal"] [data-only],html[data-ed="internal"] [data-not]{outline:1px dashed var(--orange);outline-offset:4px}
/* external editions have no feedback buttons, so their previews hide them too */
html[data-ed]:not([data-ed="internal"]) .fbtn{display:none}

/* Coating methods mini line (Traction) */
.coatmini{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "stage" "chips";gap:1rem;margin-top:clamp(36px,5vw,64px)}
.coatmini__head{grid-area:head;display:grid;gap:.45rem;align-content:end}
.coatmini__head .label{color:var(--olive-d)}
.coatmini__head h4{font-size:clamp(1.15rem,2.8vw,1.4rem);line-height:1.2;letter-spacing:-.02em;max-width:26ch}
.coatmini__head p{font-size:.92rem;line-height:1.45}
.coatmini__stage{grid-area:stage;position:relative;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;
  background:radial-gradient(110% 90% at 45% 30%,#F0ECDD 0%,#E4DDC6 100%);box-shadow:inset 0 0 0 1px var(--rule)}
.coatmini__stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.cm-tags{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s}
.cm-on .cm-tags{opacity:1}
.cm-tag{position:absolute;left:0;top:0;will-change:transform}
.cm-tag span{position:absolute;left:0;white-space:nowrap;transform:translateX(-50%);font-family:var(--f-mono);font-weight:500;font-size:.6rem;letter-spacing:.07em;text-transform:uppercase;line-height:1}
.cm-tag--hi::before{content:"";position:absolute;left:0;bottom:0;width:1px;height:16px;background:rgba(33,35,35,.55)}
.cm-tag--hi::after{content:"";position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--ink)}
.cm-tag--hi span{bottom:16px;background:var(--lime);color:var(--ink);box-shadow:0 0 0 1px var(--ink);padding:.5em .8em;border-radius:999px}
.cm-tag--sm span{top:6px;color:var(--graphite)}
.cm-narrow .cm-tag--sm{display:none}
.cm-note{position:absolute;right:12px;bottom:10px;font-size:.56rem;color:var(--stone)}
.coatmini__chips{grid-area:chips;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
.cm-chip{position:relative;display:grid;justify-items:start;gap:.2rem;padding:.55rem .6rem .6rem;border-radius:10px;background:var(--sand);border:1.5px solid transparent;text-align:left;color:var(--ink);transition:background .4s var(--ease),border-color .4s var(--ease)}
.cm-chip:hover{border-color:rgba(33,35,35,.3)}
.cm-chip[aria-pressed="true"]{background:var(--lime);border-color:var(--ink)}
.cm-ic{width:40px;height:30px;display:block}
.cm-chip b{font-weight:500;font-size:.86rem;line-height:1.2}
.cm-tick{position:absolute;right:.45rem;top:.45rem;width:18px;height:18px;border-radius:50%;background:var(--ink);color:var(--lime);display:flex;align-items:center;justify-content:center}
.cm-tick svg{width:10px;height:10px}
.coatmini--static .coatmini__stage{display:none}
.coatmini--static .cm-chip{cursor:default}
.coatmini--static .cm-chip:hover{border-color:transparent}
@media (min-width:560px){.coatmini__stage{aspect-ratio:2/1}.cm-chip{padding:.7rem .75rem .75rem}.cm-ic{width:48px;height:36px}.cm-chip b{font-size:.95rem}}
@media (min-width:900px){
  .coatmini{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-areas:"stage head" "stage chips";column-gap:clamp(20px,4vw,48px);row-gap:1.2rem;align-items:center}
  .coatmini__stage{align-self:center}
  .coatmini__head{align-self:end}
  .coatmini__chips{align-self:start}
}
/* Where people eat from Notpla: one column per category of the sites map, each scrolling on its own */
.venues{margin-top:clamp(56px,7vw,96px);display:grid;gap:clamp(18px,2.4vw,28px)}
.venues__head{display:grid;gap:.5rem;max-width:62ch}
.venues__head .label{color:var(--olive-d)}
.venues__head h3{margin:0;font-size:clamp(1.4rem,3vw,2rem);font-weight:500;letter-spacing:-.025em;line-height:1.1}
.venues__head p{margin:0}
.vt{margin:0;display:grid;gap:.45rem;align-content:start;opacity:0;transform:translateY(14px);transition:opacity .6s,transform .6s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i) * 30ms)}
.vt img{display:block;width:100%;height:auto;aspect-ratio:435/197;object-fit:cover;object-position:center top;border-radius:8px;background:var(--sand)}
.vt figcaption{display:grid;gap:.15rem}
.vt{position:relative}
.vt .vt__logo{position:absolute;left:8px;top:8px;z-index:1;width:32px;height:32px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.22);display:grid;place-items:center;overflow:hidden;font-style:normal}
.vt .vt__logo img{width:70%;height:70%;aspect-ratio:auto;object-fit:contain;border-radius:0;background:none}
.vt .vt__logo--dk{background:var(--ink)}
.vt b{font-weight:500;font-size:.86rem;line-height:1.2}
.vt span{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;color:var(--stone)}
@media (prefers-reduced-motion:reduce){.vt{opacity:1;transform:none;transition:none}}
.logos > .cut,.make__logos > div > .cut{display:none!important}
/* Pipeline preview: header over the deal cards, brand logos in place of the names */
.deals__h{grid-column:1/-1;margin:0;font-size:clamp(1.3rem,2.6vw,1.8rem);font-weight:500;letter-spacing:-.025em;line-height:1.1}
.deal .who{display:flex;align-items:center;height:44px}
.deal .who img{display:block;height:var(--h,40px);width:auto;max-width:78%;object-fit:contain;object-position:left center}
/* IKEA only: seaweed across IKEA (map plus category rows, in the dark What's next section) and the materials portfolio */
.ikx{margin-top:clamp(56px,7vw,96px);display:grid;gap:clamp(22px,3vw,36px)}
.ikx__head{display:grid;gap:.5rem;max-width:62ch}
.ikx__head .label{color:var(--lime)}
.ikx__head h3{margin:0;font-size:clamp(1.6rem,4vw,2.6rem);font-weight:500;letter-spacing:-.035em;line-height:1.05}
.ikx__head p{margin:0}
.ikx__body{display:grid;gap:clamp(18px,3vw,36px);align-items:center}
@media (min-width:980px){.ikx__body{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}}
.ikx__map{position:relative;margin:0;border-radius:var(--r);overflow:hidden;background:#f8f7f6;aspect-ratio:1400/781}
.ikx__map img{position:absolute;inset:0;width:100%;height:100%;display:block}
.ikx__base{opacity:.2;filter:grayscale(.6)}
.ikx__hi{clip-path:inset(0 50% 50% 0);transition:clip-path .7s cubic-bezier(.65,0,.35,1)}
.ikx__core{clip-path:circle(12.3% at 50% 47.7%)}
.ikx__ql{position:absolute;font-family:var(--f-mono);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:var(--stone);padding:.4em .7em;border-radius:999px;background:rgba(248,247,246,.9);transition:background .4s,color .4s}
.ikx__ql[data-q="0"]{left:3%;top:5%}.ikx__ql[data-q="1"]{right:3%;top:5%}.ikx__ql[data-q="2"]{left:3%;bottom:5%}.ikx__ql[data-q="3"]{right:3%;bottom:5%}
.ikx__ql.on{background:var(--ink);color:var(--lime)}
.ikx__rows{display:grid;border-top:1px solid var(--rule-d)}
.ikx__hd{display:none}
.ikx__row{appearance:none;background:none;border:0;border-bottom:1px solid var(--rule-d);color:inherit;font:inherit;text-align:left;cursor:pointer;display:grid;gap:.25rem;padding:.75rem .3rem .75rem 1rem;position:relative;transition:background .3s}
.ikx__row::before{content:"";position:absolute;left:0;top:.7rem;bottom:.7rem;width:3px;border-radius:2px;background:var(--lime);transform:scaleY(0);transition:transform .35s}
.ikx__row.on{background:rgba(242,239,224,.05)}
.ikx__row.on::before{transform:scaleY(1)}
.ikx__row b{font-weight:500;font-size:.98rem}
.ikx__row span{font-size:.86rem;color:rgba(242,239,224,.68);line-height:1.35}
.ikx__st{font-style:normal;display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(242,239,224,.7);line-height:1.3}
.ikx__st::before{content:"";flex:0 0 auto;width:.75em;height:.75em;border-radius:50%;border:1px solid currentColor}
.ikx__st.live{color:var(--lime)}
.ikx__st.live::before{background:var(--lime);border-color:var(--lime)}
@media (min-width:700px){
  .ikx__hd{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr) minmax(0,1fr);gap:1rem;padding:.6rem .3rem .6rem 1rem;font-family:var(--f-mono);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(242,239,224,.45);border-bottom:1px solid var(--rule-d)}
  .ikx__row{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr) minmax(0,1fr);gap:1rem;align-items:center}
}
/* IKEA only: from sea to store, the value chain with pins that light up from sea to store, then the case and the ask */
.vchain{margin:0;display:grid;gap:clamp(16px,2.4vw,28px)}
.vchain__art{position:relative;border-radius:var(--r);overflow:hidden;background:#f7f4ef}
.vchain__art img{display:block;width:100%;height:auto;opacity:0;transform:scale(1.03);transition:opacity 1s,transform 1.6s cubic-bezier(.22,1,.36,1)}
.vchain.on .vchain__art img{opacity:1;transform:none}
.vc-pin{--s:clamp(18px,2.3vw,30px);position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);border-radius:50%;background:var(--ink);color:var(--lime);font-style:normal;font-family:var(--f-mono);font-size:clamp(.5rem,1vw,.72rem);display:grid;place-items:center;transform:scale(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1) calc(.6s + var(--n) * .25s)}
.vchain.on .vc-pin{transform:scale(1)}
.vc-pin::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--lime);opacity:0;animation:vcPulse 5s ease-out infinite;animation-delay:calc(2.2s + var(--n) * .7s)}
@keyframes vcPulse{0%{opacity:.95;transform:scale(.9)}24%{opacity:0;transform:scale(2.3)}100%{opacity:0;transform:scale(2.3)}}
.vchain__steps{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
@media (min-width:860px){.vchain__steps{grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}}
.vchain__steps li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.6rem;row-gap:.25rem;align-content:start;padding:.85rem;border-radius:12px;background:rgba(221,213,185,.55);opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s;transition-delay:calc(.8s + var(--n) * .25s)}
.vchain.on .vchain__steps li{opacity:1;transform:none}
.vchain__steps li i{grid-row:1/3;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-style:normal;font-family:var(--f-mono);font-size:.66rem}
.vchain__steps li b{font-weight:500;font-size:.95rem}
.vchain__steps li span{font-size:.82rem;color:var(--graphite);line-height:1.35}
.vchain__steps li .vc-tag{font-family:var(--f-mono);font-size:.56rem;letter-spacing:.07em;text-transform:uppercase;color:var(--olive-d)}
.vchain__steps li.me{background:var(--lime)}
.ikwhy{display:grid;gap:10px;margin-top:clamp(32px,4vw,56px)}
@media (min-width:700px){.ikwhy{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.ikwhy{grid-template-columns:repeat(5,minmax(0,1fr))}}
.ikwhy article{display:grid;gap:.45rem;align-content:start;padding:18px;border-radius:var(--r);border:1px solid var(--rule)}
.ikwhy .label{color:var(--olive-d)}
.ikwhy h4{margin:0;font-size:1.05rem;font-weight:500;letter-spacing:-.01em;line-height:1.2}
.ikwhy p{margin:0;font-size:.86rem;color:var(--graphite);line-height:1.4}
.ikask{margin-top:clamp(24px,3vw,40px);display:grid;gap:1.2rem;align-items:center;padding:clamp(20px,3vw,32px);border-radius:var(--r);background:var(--ink);color:var(--cream)}
.ikask .label{color:var(--lime)}
.ikask h3{margin:.4rem 0 .5rem;font-size:clamp(1.4rem,3vw,2rem);font-weight:500;letter-spacing:-.025em}
.ikask p{margin:0;color:rgba(242,239,224,.75);max-width:62ch}
@media (prefers-reduced-motion:reduce){.vchain__art img,.vc-pin,.vchain__steps li,.ikx__hi{transition:none!important}.vc-pin::after{animation:none}}


/* Board edition: world view (Traction) */
/* two pipeline cards when the IKEA card is left out (Board edition, and its preview) */
@media (min-width:900px){.deals:not(:has(>div.deal:nth-of-type(3))){grid-template-columns:repeat(2,minmax(0,1fr))}}
/* six board seats when Thomas Philipon is on the board (Board edition and the internal draft), five in the other edition previews */
.seats:has(>.seat:nth-child(5)){grid-template-columns:repeat(6,minmax(0,1fr))}
html[data-ed]:not([data-ed="internal"]):not([data-ed="board"]) .seats{grid-template-columns:repeat(5,minmax(0,1fr))}

/* Board edition: traction view toggle, 2032 goal label, live pace */
.stackmode{border-color:var(--rule);margin:clamp(20px,3vw,32px) 0 0;color:var(--ink)}
.stack3d__key em{font-style:normal}
.tlab--goal b{color:var(--olive-d)}
.pace{display:grid;gap:.8rem;margin-top:clamp(20px,3vw,32px);padding:clamp(18px,2.4vw,26px);border-radius:var(--r);background:var(--ink);color:var(--cream)}
@media (min-width:800px){.pace{grid-template-columns:1fr auto;align-items:center}}
.pace__lead{margin:0;font-size:clamp(1.05rem,2vw,1.35rem);letter-spacing:-.01em;line-height:1.3}
.pace__lead b{font-weight:500;color:var(--lime)}
.pace__live{margin:0;display:flex;align-items:baseline;gap:.9rem;font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;color:rgba(242,239,224,.6)}
.pace__live b{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:400;letter-spacing:-.04em;color:var(--cream);text-transform:none;font-variant-numeric:tabular-nums;min-width:3ch;text-align:right}

/* Board edition: light scroll stories (boxes to tonnes in the Model, sea to land in the Moat) */
.coatdemo--light .coatdemo__stage{background:radial-gradient(110% 80% at 50% 42%,#f7f3e6 0%,#efe9d6 62%,#e6dfc8 100%);color:var(--ink)}
#model .coatdemo--light .coatdemo__stage{background:radial-gradient(110% 80% at 50% 42%,#f1ecda 0%,#e9e4cf 62%,#ded7bd 100%)}
.coatdemo--light .coatdemo__stage::after{background:linear-gradient(0deg,rgba(233,228,207,.92),rgba(233,228,207,0))}
.coatdemo--light .cd__cap .mono{color:var(--olive-d)}
.coatdemo--light .cd__cap p{color:var(--graphite)}
.coatdemo--light .hstep{border-top-color:var(--rule)}
.coatdemo--light .hstep::before{background:var(--olive-d)}
.coatdemo--light .hstep .mono{color:var(--stone)}
.tn__labels{position:absolute;inset:0;pointer-events:none;z-index:1}
.tn__labels .tlab b{font-size:clamp(.82rem,2.2vw,1.05rem)}
.sl__kicker{position:absolute;top:calc(var(--navB,86px) + 18px);left:var(--gutter);z-index:2;color:var(--olive-d)}
.tlab--proj b{color:var(--olive-d)}
.tlab--proj .so{color:var(--ink);opacity:.7;margin-top:.1rem}
/* Made at scale: converters that run Notpla board */
.make__logos{display:grid;gap:.7rem;margin-top:clamp(20px,2.6vw,30px);padding-top:clamp(16px,2vw,22px);border-top:1px solid var(--rule)}
.make__logos>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
/* Notpla x partner: one co-branded card per converter (13 Nov) */
.make__pt{display:flex;align-items:center;justify-content:center;gap:clamp(8px,1vw,12px);min-width:0;height:clamp(48px,4.4vw,58px);padding:0 clamp(10px,1.2vw,16px);border:1px solid var(--rule);border-radius:10px;background:rgba(33,35,35,.035)}
.make__pt .logo{width:auto;height:clamp(17px,1.55vw,21px);color:var(--ink)}   /* as tall as the partner marks, so neither side leads */
.make__pt b{font-family:var(--f-mono);font-weight:400;font-size:.8rem;line-height:1;color:var(--stone)}
.make__pt img{display:block;min-width:0;max-width:48%;height:clamp(16px,1.45vw,20px);width:auto;object-fit:contain}
.make__n div > span{max-width:15rem;line-height:1.35}   /* labels only: the count inside 1,000 keeps the figure's line height */
.make__pt img[alt="Colpac"]{height:clamp(21px,1.9vw,26px)}   /* its mark sits small in the file */

/* Board edition: where we're growing (dot map) */
#worldCv{position:absolute;inset:0;width:100%;height:100%;display:block}
.cd__steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.wm__pins{position:absolute;inset:0;pointer-events:none;z-index:1}
.wm__pin{position:absolute;left:0;top:0;display:flex;gap:.45rem;align-items:center;opacity:0;transition:opacity .5s var(--ease)}
.wm__pin.on{opacity:1}
.wm__pin i{width:9px;height:9px;flex:none;margin-left:-4.5px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 3px rgba(231,243,172,.9)}
.wm__pin b{font-family:var(--f-mono);font-weight:400;font-size:.72rem;letter-spacing:.02em;color:var(--ink);white-space:nowrap;background:rgba(242,239,224,.85);padding:0 .25rem}
.wm__pin span{font-family:var(--f-mono);font-size:.56rem;color:var(--stone);white-space:nowrap;background:rgba(242,239,224,.85);padding:0 .25rem}


.wm__pin--l{flex-direction:row-reverse;transform-origin:right}
.wm__pin--l i{margin-left:0;margin-right:-4.5px}

/* Board edition: how we scale (network story in the Model) */
.sn{position:absolute;inset:0}
.sn svg{display:block}
.sn__e{fill:none;stroke:rgba(33,35,35,.28);stroke-width:1.1}
.sn__p{fill:var(--olive-d)}
.sn__b{fill:#d6b88a;stroke:rgba(33,35,35,.35);stroke-width:.8}
.sn__c{fill:#F2EFE0;stroke:var(--ink);stroke-width:1.3}
.sn__m{fill:var(--lime);stroke:var(--olive-d);stroke-width:1.5}
.sn__n{fill:var(--ink)}
.sn__nt{fill:var(--lime)}
.sn__key{display:flex;flex-wrap:wrap;gap:.45rem .9rem;font-family:var(--f-mono);font-size:.56rem;letter-spacing:.07em;text-transform:uppercase;color:var(--stone)}
.sn__key span{display:inline-flex;align-items:center;gap:.35rem}
.sn__key svg{width:18px;height:18px;flex:none}
.sn__h{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;fill:var(--stone)}
.sn [data-g]{transition:opacity .35s ease}
.sn__panel{position:absolute;z-index:2;right:var(--gutter);top:calc(var(--navB,86px) + 70px);width:min(260px,40vw);display:grid;gap:.9rem}
.sn__stat{display:grid;gap:.15rem}
.sn__stat b{font-size:clamp(2rem,4vw,3rem);font-weight:400;letter-spacing:-.05em;line-height:1}
.sn__stat span{font-size:.85rem;color:var(--graphite)}
.sn__meter{display:grid;gap:.3rem;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite)}
.sn__meter i{display:block;height:6px;border-radius:3px;background:rgba(33,35,35,.08);overflow:hidden}
.sn__meter b{display:block;height:100%;width:0;border-radius:3px;background:var(--olive-d);transition:width .6s var(--ease)}
.sn__meter--rev b{background:var(--orange)}
.sn__ill{color:var(--stone)}
.sn__side{display:contents}
.sn__steps .hstep img{display:none}
/* wider screens (Pierre, 2 Nov): the title stays and the network grows beneath it. The meters and the step's caption share a column on
   the right, and the step bar carries a small photo of each step (the old ladder of photo cards). js/site.js places the network between them */
@media (min-width:900px){
  #scaleNet .cd__intro::before,#scaleNet .sl__kicker{display:none}
  #scaleNet{--side:max(var(--gutter),calc((100% - 1320px) / 2 + var(--gutter)))}
  #scaleNet .sn__side{display:grid;position:absolute;z-index:2;right:var(--side);top:var(--snTop,200px);width:min(300px,28vw);gap:1.1rem;align-content:start}
  #scaleNet .sn__side .sn__panel{gap:.7rem}
  #scaleNet .sn__side .cd__cap h3{font-size:clamp(1.05rem,1.4vw,1.25rem)}
  #scaleNet .sn__side .cd__cap p{font-size:.84rem;line-height:1.4}
  #scaleNet .sn__steps .hstep > span:not(.mono){color:var(--graphite)}
  #scaleNet .sn__side > .sn__panel,#scaleNet .sn__side > .cd__cap{position:static;width:auto;max-width:none}
  #scaleNet .cd__steps{left:var(--side);right:var(--side)}
  /* each step's photo sits under its column of the network: boxes under brands, coated board under converters, coatings under mills.
     js/site.js (scaleNet) places them */
  #scaleNet .sn__steps{display:block;height:128px}
  #scaleNet .sn__steps .hstep{position:absolute;top:0;left:0}
  #scaleNet .sn__steps .hstep{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;row-gap:1px}   /* photo above its words, centred on its column */
  #scaleNet .sn__steps .hstep img{display:block;width:92px;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:8px;margin-bottom:6px}
}
@media (max-width:699px){
  .sn__panel{left:var(--gutter);right:var(--gutter);width:auto;top:calc(var(--navB,86px) + 44px);grid-template-columns:auto 1fr 1fr 1fr;gap:.4rem .8rem;align-items:end}
  .sn__stat b{font-size:1.6rem}.sn__stat span{font-size:.62rem}.sn__ill{display:none}
}
.rnd .amt b{display:block;font-weight:400}
.rnd__scale{display:block;margin-top:.45rem;font-family:var(--f-mono);font-size:.9rem;letter-spacing:0;color:var(--lime)}
/* Problem: each step states its problem big, "Plastic is a health problem" (Pierre, 20 Oct) */
#vnK{font-family:var(--f-sans,inherit);text-transform:none;letter-spacing:-.035em;font-size:clamp(2rem,6.4vw,3.6rem);line-height:1.02;font-weight:500;color:var(--cream);margin-bottom:.9rem}
#vnK em{font-style:normal;color:var(--lime)}
#venn .vn__cap h3{font-size:clamp(1.05rem,3.6vw,1.4rem)}
/* phones: pinned from the top too, under the figure, so the statement does not move between steps */
@media (max-width:899px){#venn .vn__cap{top:54svh;bottom:auto}}

/* Ingredient brand: "Look for the mark", ported from the coating site */
.mark{margin-top:clamp(64px,8vw,120px)}
.mark__grid{display:grid;gap:clamp(32px,5vw,96px);align-items:center;margin-top:clamp(28px,4vw,48px)}
@media (min-width:900px){.mark__grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.tagwrap{position:relative;display:grid;justify-items:center;gap:1rem;padding-top:70px}
.tagwrap .string{position:absolute;top:0;left:50%;width:120px;height:92px;margin-left:-60px;overflow:visible}
.tag{position:relative;width:min(300px,76vw);aspect-ratio:3/4.3;border:0;padding:0;background:none;perspective:1400px;transform-origin:50% -60px;animation:tagsway 6s ease-in-out infinite;cursor:pointer}
@keyframes tagsway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
.tag__inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1.1s var(--ease)}
.tag[aria-pressed="true"] .tag__inner{transform:rotateY(180deg)}
.tag__face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;clip-path:polygon(20% 0,80% 0,100% 11%,100% 100%,0 100%,0 11%);
  display:flex;flex-direction:column;justify-content:space-between;padding:26% 11% 11%;text-align:left;box-shadow:0 30px 60px -30px rgba(29,31,31,.5)}
.tag__front{background-color:#c49a66;background-size:cover;color:var(--ink)}
.tag__back{background:var(--ink);color:var(--cream);transform:rotateY(180deg)}
.tag__hole{position:absolute;top:5.5%;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--cream);box-shadow:inset 0 0 0 3px rgba(0,0,0,.18)}
.tag__lockup{width:100%;height:auto}
.tag__front .label{color:rgba(29,31,31,.7)}
.tag__line{font-size:.95rem;letter-spacing:-.01em;font-weight:500}
/* the tag's type scales with the tag, so the back's copy stays on it at any size (Pierre, 2 Nov: it ran off the bottom) */
.tag{container-type:inline-size}
.tag__line{font-size:clamp(.85rem,7cqw,1.25rem);line-height:1.15}
.tag__front .tag__sub{font-size:clamp(.48rem,3.2cqw,.62rem);color:rgba(29,31,31,.62)}
.tag__h{font-size:clamp(.95rem,7cqw,1.3rem);font-weight:500;line-height:1.15}
.tag__back ul{list-style:none;margin:0;padding:0;display:grid;gap:clamp(.4rem,3cqw,.7rem)}
.tag__back li{display:grid;grid-template-columns:clamp(16px,7.5cqw,22px) minmax(0,1fr);gap:.6rem;font-size:clamp(.68rem,4.8cqw,.9rem);line-height:1.35}
.tag__back li i{width:clamp(16px,7.5cqw,22px);height:clamp(16px,7.5cqw,22px);border-radius:50%;background:var(--lime);color:var(--ink);display:flex;align-items:center;justify-content:center}
.tag__back li i svg{width:12px;height:12px}
.tag__back .label{color:rgba(242,239,224,.5);font-size:clamp(.44rem,3cqw,.6rem);line-height:1.6}
.taghint{color:var(--stone)}
.inwild{position:relative;margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:3/2;max-width:100%;background:var(--sand)}
.inwild img{width:100%;height:100%;object-fit:cover;display:block}
.inwild figcaption{position:absolute;left:16px;top:16px;background:var(--cream);color:var(--ink);padding:.5em .95em;border-radius:999px;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase}
.promise{margin-top:1.8rem;display:grid;gap:1rem}
@media (min-width:700px){.promise{grid-template-columns:repeat(3,minmax(0,1fr))}}
.promise div{border-top:2px solid var(--ink);padding-top:.9rem;display:grid;gap:.35rem;align-content:start}
.promise b{font-weight:500;font-size:1.05rem}
.promise span{font-size:.85rem;color:var(--graphite)}
.reduce .tag{animation:none}

/* Feedstock rings, ported from the coating site (20 Oct) */
.sea__deep{margin-top:1.8rem}
.feed{margin-top:clamp(56px,7vw,96px)}
.feed__head{max-width:46rem}
.feed__head h3{margin:.5rem 0 .6rem;font-size:clamp(1.3rem,2.6vw,1.8rem);font-weight:500;letter-spacing:-.025em;line-height:1.1}
.feed__head p{margin:0;color:var(--graphite);line-height:1.5}
.rings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px;margin-top:clamp(32px,4vw,56px)}
@media (min-width:900px){.rings{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,3vw,48px)}}
.ringcard{display:grid;justify-items:center;gap:1rem;text-align:center}
.ringcard svg{width:100%;max-width:220px;height:auto;overflow:visible}
.ringcard svg path[data-tip]{transition:opacity .3s,transform .4s var(--ease);transform-origin:110px 110px;cursor:help}
.ringcard svg path[data-tip]:hover{transform:scale(1.04)}
.ringcard .rw{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.05em;pointer-events:none}
html.has-rail .ringcard svg{max-width:min(290px,34vh)}
/* patents on a laptop: centred on the screen and larger, the document stack included */
html.has-rail .ip{margin-top:0;min-height:calc(100svh - var(--navB,0px) - 74px - clamp(48px,7vh,88px));align-content:center;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:clamp(40px,5vw,80px)}
html.has-rail .ip__cert{grid-template-columns:clamp(190px,16vw,250px) minmax(0,1fr)}
html.has-rail .ip__cert h3{font-size:clamp(1.6rem,2.4vw,2.3rem)}
html.has-rail .ip__cert p.muted{font-size:1rem!important}
html.has-rail .ipn{padding:22px 24px}
html.has-rail .ipn b{font-size:clamp(2.6rem,4vw,3.8rem)}
html.has-rail .ipn span{font-size:.95rem}   /* larger rings on a laptop, so the words on them read and the slide fills */
.ringcard h3{font-size:1.05rem;font-weight:500;margin:0}
@media (min-width:900px){.ringcard h3{font-size:1.2rem}}
.ringcard.sw h3{color:var(--olive-d)}
.ringcard .score{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--stone);margin:-.4rem 0 0}
.ringcard .score b{font-weight:500;color:var(--ink)}
.ringcard.sw .score b{color:var(--olive-d)}
.ringkey{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.4rem;margin-top:2.4rem;font-size:.82rem;color:var(--stone)}
.ringkey span{display:inline-flex;gap:.45rem;align-items:center}
.ringkey b{font-family:var(--f-mono);font-weight:500;color:var(--ink);font-size:.72rem}
.ringnote{margin:1.4rem auto 0;text-align:center;font-size:.78rem;color:var(--stone)}
.rtip{position:fixed;z-index:80;max-width:260px;padding:.7rem .9rem;background:var(--ink);color:var(--cream);font-size:.82rem;line-height:1.4;border-radius:8px;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s}
.rtip.on{opacity:1;transform:none}
.fi *{transform-box:view-box}
.fi .sw1{transform-origin:28px 57px;animation:fsway 4.6s ease-in-out infinite}
.fi .sw2{transform-origin:42px 57px;animation:fsway 3.8s ease-in-out infinite reverse}
.fi .pod{transform-origin:30px 34px;animation:fsway 3.4s ease-in-out infinite}
.fi .cob{transform-origin:32px 57px;animation:fsway 5.2s ease-in-out infinite}
.fi .bub{animation:fbub 3.2s ease-in infinite}
.fi .bub.d2{animation-delay:1.5s}
.fi .drip{animation:fdrip 2.2s ease-in infinite}
.fi .fall{animation:ffall 2.6s ease-in infinite}
.fi .fall.d2{animation-delay:.9s}.fi .fall.d3{animation-delay:1.7s}
.fi .pick{transform-origin:53px 7px;animation:fstrike 1.9s cubic-bezier(.55,0,.3,1) infinite}
.fi .chip{animation:fchip 1.9s ease-out infinite;opacity:0}
.fi .chip.d2{animation-name:fchip2}
@keyframes fsway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes fbub{0%{transform:translateY(6px);opacity:0}20%{opacity:1}100%{transform:translateY(-20px);opacity:0}}
@keyframes fdrip{0%{transform:translateY(-4px);opacity:0}15%{opacity:1}80%{transform:translateY(20px);opacity:1}100%{transform:translateY(22px);opacity:0}}
@keyframes ffall{0%{transform:translateY(-6px);opacity:0}15%{opacity:1}85%{transform:translateY(42px);opacity:1}100%{transform:translateY(44px);opacity:0}}
@keyframes fstrike{0%,55%,100%{transform:rotate(-32deg)}70%{transform:rotate(3deg)}78%{transform:rotate(-2deg)}}
@keyframes fchip{0%,70%{opacity:0;transform:translate(0,0)}74%{opacity:1}100%{opacity:0;transform:translate(-9px,-10px)}}
@keyframes fchip2{0%,70%{opacity:0;transform:translate(0,0)}74%{opacity:1}100%{opacity:0;transform:translate(8px,-12px)}}
@media (prefers-reduced-motion:reduce){.fi *{animation:none!important}.fi .chip{opacity:0}}

/* Only one passed: compact copy of the deck slide (20 Oct). Crosses tick in column by column, then the Notpla mark */
.supd{margin-top:clamp(48px,7vw,88px);text-align:center}
.supd__h{max-width:40rem;margin:0 auto;font-size:clamp(1.25rem,2.6vw,1.9rem);font-weight:500;letter-spacing:-.03em;line-height:1.12}
/* a hint at the small print behind most "plastic-free" claims (Pierre, 28 Oct) */
.supd__ast{display:block;margin-top:.35em;color:var(--lime)}
.supd__list{list-style:none;margin:clamp(22px,3vw,34px) auto 0;padding:0;max-width:880px;columns:2;column-gap:1.5rem;text-align:left;font-size:clamp(.78rem,1.3vw,.95rem);line-height:1.75;color:rgba(242,239,224,.62)}
@media (min-width:700px){.supd__list{columns:4}}
.supd__list li{break-inside:avoid;display:flex;align-items:center;gap:.45em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.supd__list li::before{content:"✕";font-weight:700;color:var(--red);font-size:.95em;flex:none;transform:scale(0);transition:transform .25s cubic-bezier(.3,1.7,.5,1) calc(var(--i)*28ms)}
.supd.go .supd__list li::before{transform:none}
.supd__win{display:inline-flex;align-items:center;gap:.55rem;margin-top:clamp(22px,3vw,34px);font-size:clamp(1.3rem,2.4vw,1.7rem);letter-spacing:-.02em;opacity:0;transform:translateY(10px) scale(.94);transition:opacity .5s ease 1.5s,transform .6s cubic-bezier(.3,1.5,.5,1) 1.5s}
.supd.go .supd__win{opacity:1;transform:none}
.supd__win svg{width:1.4em;height:1.4em;padding:.18em;border-radius:.3em;background:var(--lime);color:var(--ink)}
.supd__win .n{width:1.7em;aspect-ratio:252681/180000;background:currentColor;-webkit-mask:url(../img/notpla-monogram-dark.svg) center/contain no-repeat;mask:url(../img/notpla-monogram-dark.svg) center/contain no-repeat}
.supd__win b{font-weight:500}
.reduce .supd__list li::before,.reduce .supd__win{transition:none}

/* Portfolio polaroids (20 Oct): two or three in-use photos fan out for the chosen product */
.pols{display:flex;justify-content:center;align-items:flex-end;padding:6px 18px 26px;background:var(--sand);min-height:0}
.snap:not([style*="--k:0"]){margin-left:-10%}
.snap{margin:0;flex:0 0 40%;min-width:0;max-width:190px;background:#fbfaf6;padding:6px 6px 0;border-radius:3px;box-shadow:0 10px 24px -10px rgba(33,35,35,.45),0 1px 2px rgba(33,35,35,.2);
  transform:translateY(24px) rotate(0deg) scale(.9);opacity:0;display:none;transition:opacity .35s ease,transform .6s cubic-bezier(.3,1.4,.5,1)}
.snap img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:#e7e1d3}
.snap figcaption{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.03em;color:var(--graphite);padding:.55em .1em .7em;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.snap.on{display:block;animation:polIn .6s cubic-bezier(.3,1.4,.5,1) calc(var(--k)*110ms) both}
.snap.on[style*="--k:0"]{--rot:-5deg}.snap.on[style*="--k:1"]{--rot:3deg}.snap.on[style*="--k:2"]{--rot:-2deg}
.snap.on{opacity:1;transform:rotate(var(--rot,0deg))}
@keyframes polIn{from{opacity:0;transform:translateY(40px) rotate(0deg) scale(.86)}to{opacity:1;transform:rotate(var(--rot,0deg))}}
.reduce .snap.on{animation:none}
@media (min-width:900px){
  .pols{position:absolute;left:24px;bottom:28px;width:min(500px,40%);padding:0;background:none;justify-content:flex-start;align-items:flex-end;gap:0;pointer-events:none}
  .snap{flex:0 0 auto;width:38%;max-width:190px;pointer-events:auto}
  .snap:not([style*="--k:0"]){margin-left:-6%}
  .snap{flex-basis:auto}
  .snap:hover{z-index:2}
  .snap.on[style*="--k:1"]{margin-top:-18px}
}

/* Board edition: from seaweed to coating (js/science.js). A 660vh scroll story on one 2D canvas, six steps. */
.sci{padding-bottom:0}
.sci__story{position:relative;height:660vh;margin-top:clamp(24px,4vw,48px)}
.sci__cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.sci__cap{transition:opacity .35s var(--ease),transform .35s var(--ease)}
.sci__cap.out{opacity:0;transform:translateY(6px)}
.sci__steps{grid-template-columns:repeat(6,minmax(0,1fr))}
/* steps 1-3 sit on herbarium cream (the canvas paints the paper); captions, step bar and the bottom fade follow */
.sci__stage{transition:color .45s var(--ease)}
.sci__stage::before{content:"";position:absolute;left:0;right:0;bottom:0;height:48%;pointer-events:none;z-index:1;opacity:0;transition:opacity .45s var(--ease);background:linear-gradient(0deg,rgba(236,231,212,.97) 0%,rgba(236,231,212,.9) 45%,rgba(236,231,212,0) 100%)}
.sci__stage::after{transition:opacity .45s var(--ease)}
.sci__story.is-light .sci__stage{color:var(--ink)}
.sci__story.is-light .sci__stage::before{opacity:1}
.sci__story.is-light .sci__stage::after{opacity:0}
.sci__story.is-light .cd__cap .mono{color:var(--olive-d)}
.sci__story.is-light .cd__cap p{color:var(--graphite)}
.sci__story.is-light .hstep{border-top-color:var(--rule)}
.sci__story.is-light .hstep::before{background:var(--olive-d)}
.sci__story.is-light .hstep .mono{color:var(--stone)}
.sci__credit{padding-block:18px 0;font-size:.72rem;color:rgba(242,239,224,.55)}
.sci__credit summary{cursor:pointer;max-width:90ch}
.sci__credit ul{margin:.6rem 0 0;padding-left:1.1rem;columns:2 320px;column-gap:2rem}
.sci__credit a{color:inherit}
@media (max-width:759px){.sci__steps{gap:.35rem}.sci__steps .hstep b{font-size:.6rem}}

/* Technical data sheet, ported from the coating site: a light engineering sheet laid on the dark section */
.tds{position:relative;margin-top:clamp(8px,2vw,24px);background:var(--sand);color:var(--ink);border-radius:var(--r);color-scheme:only light}
.tds .fn{background:rgba(33,35,35,.1);color:var(--ink)}
.tds .fn:hover{background:var(--ink);color:var(--lime)}
.tds__reg{position:absolute;width:19px;height:19px;pointer-events:none}
.tds__reg::before,.tds__reg::after{content:"";position:absolute;background:rgba(242,239,224,.55)}
.tds__reg::before{left:9px;top:0;width:1px;height:19px}
.tds__reg::after{left:0;top:9px;width:19px;height:1px}
.tds__reg--tl{left:-9px;top:-9px}.tds__reg--tr{right:-9px;top:-9px}.tds__reg--bl{left:-9px;bottom:-9px}.tds__reg--br{right:-9px;bottom:-9px}
.tds__scan{position:absolute;left:0;right:0;top:0;height:2px;opacity:0;pointer-events:none;z-index:3;
  background:linear-gradient(90deg,transparent,var(--olive) 20%,var(--olive) 80%,transparent);box-shadow:0 0 22px 3px rgba(164,169,104,.55)}
.tds__head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2.4rem;align-items:end;padding:22px 28px;border-bottom:1px solid var(--ink)}
.tds__head h3{font-size:clamp(1.6rem,2.4vw,2.2rem);font-weight:400;letter-spacing:-.04em;margin-top:.35rem}
.tds__k{color:var(--stone)}
.tds__meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;border-left:1px solid rgba(33,35,35,.22)}
.tds__meta div{padding:.1rem 1rem;border-right:1px solid rgba(33,35,35,.22)}
.tds__meta div:last-child{border-right:0}
.tds__meta dt{color:var(--stone);font-size:.6rem;margin-bottom:.35rem}
.tds__meta dd{margin:0;font-weight:500;font-size:.86rem;line-height:1.3}
.tds__kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid rgba(33,35,35,.22)}
.tds__kpi{padding:18px 28px 20px;border-right:1px solid rgba(33,35,35,.22);display:grid;gap:.3rem;align-content:start}
.tds__kpi:last-child{border-right:0}
.tds__kpi .v{font-family:var(--f-mono);font-size:clamp(2rem,3.2vw,2.9rem);font-weight:500;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.tds__kpi .v small{font-size:.42em;margin-left:.15em;color:var(--graphite);letter-spacing:0}
.tds__kpi .v small.neg{margin:0 .15em 0 0}
.tds__kpi > span{font-size:.88rem;font-weight:500}
.tds__kpi em{font-style:normal;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--stone)}
.tds__body{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.tds__body > div{padding:20px 28px 24px;min-width:0}
.tds__body > div + div{border-left:1px solid rgba(33,35,35,.22)}
.tds__sl{display:block;margin-bottom:.7rem}
.tds__tw{overflow-x:auto}
.tds__props{width:100%;border-collapse:collapse;min-width:420px}
.tds__props th,.tds__props td{padding:.55rem .5rem;border-bottom:1px solid var(--rule);text-align:left;font-size:.88rem}
.tds__props thead th{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;font-weight:500;color:var(--stone);padding-top:0}
.tds__props thead th.r{text-align:right}
.tds__props tbody th{font-weight:400;padding-left:0}
.tds__props td.m{font-family:var(--f-mono);font-size:.76rem;color:var(--graphite)}
.tds__props td.v{font-family:var(--f-mono);font-size:.86rem;text-align:right;white-space:nowrap}
.tds__props tbody tr:last-child th,.tds__props tbody tr:last-child td{border-bottom:0}
.tds__seals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem .6rem}
.tds__seal{display:grid;justify-items:center;gap:.5rem;text-align:center}
.tds__seal svg{width:100%;max-width:112px;height:auto;filter:drop-shadow(0 6px 10px rgba(33,35,35,.12))}
.tds__seal svg .ring,.tds__seal svg .rose{transform-origin:60px 60px;transition:transform 1.4s var(--ease)}
.tds__seal:hover svg .ring{transform:rotate(90deg)}
.tds__seal:hover svg .rose{transform:rotate(-30deg)}
.tds__seal span{font-size:.72rem;color:var(--graphite);line-height:1.3;max-width:16ch}
.tds__foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;padding:14px 28px;background:var(--lime);border-radius:0 0 var(--r) var(--r)}
.tds__uses{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.tds__uses .label{margin-right:.5rem}
.tds__chip{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--ink);border-radius:999px;padding:.32em .8em;font-size:.8rem}
.tds__chip svg{width:15px;height:15px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1000px){
  .tds__head,.tds__body{grid-template-columns:minmax(0,1fr)}
  .tds__head{gap:1.2rem}
  .tds__body > div + div{border-left:0;border-top:1px solid rgba(33,35,35,.22)}
  .tds__meta,.tds__kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tds__meta{border-left:0;gap:.9rem 0}
  .tds__meta div:nth-child(2n+1){padding-left:0}
  .tds__meta div:nth-child(2n){border-right:0}
  .tds__kpi:nth-child(2){border-right:0}
  .tds__kpi:nth-child(-n+2){border-bottom:1px solid rgba(33,35,35,.22)}
}
@media (max-width:640px){
  .tds__body > div,.tds__head,.tds__kpi,.tds__foot{padding-left:18px;padding-right:18px}
  .tds__kpi .v{font-size:1.9rem}
  .tds__seals{gap:.8rem .4rem}
  .tds__props{min-width:0}
  .tds__props,.tds__props tbody{display:block}
  .tds__props thead{display:none}
  .tds__props tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1rem;padding:.65rem 0;border-bottom:1px solid var(--rule)}
  .tds__props tbody tr:last-child{border-bottom:0}
  .tds__props th,.tds__props td{border:0;padding:0}
  .tds__props th{grid-column:1;grid-row:1;font-weight:500}
  .tds__props td.v{grid-column:2;grid-row:1;align-self:start}
  .tds__props td.m{grid-column:1/-1;grid-row:2;font-size:.7rem;margin-top:.2rem}
}

/* Impact for Notpla on each policy card and per country (Pierre, 26 Oct): one bar neutral, two supportive, three game changer */
.pips{display:inline-flex;gap:3px}
.pips i{width:14px;height:5px;border-radius:3px;background:rgba(242,239,224,.16)}
.pips--sm i{width:9px;height:4px}
.pips[data-l="0"] i:first-child,[data-l="0"] > .pips i:first-child{background:rgba(242,239,224,.6)}
.pips[data-l="1"] i:nth-child(-n+2),[data-l="1"] > .pips i:nth-child(-n+2){background:var(--olive)}
.pips[data-l="2"] i,[data-l="2"] > .pips i{background:var(--lime)}
.pe__imp{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;column-gap:.6rem;row-gap:.35rem;margin-top:.3rem;padding-top:.65rem;border-top:1px solid var(--rule-d)}
.pe__il{font-family:var(--f-mono);font-size:.56rem;letter-spacing:.07em;text-transform:uppercase;color:rgba(242,239,224,.5)}
.pe__imp b{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.07em;text-transform:uppercase;font-weight:500;color:rgba(242,239,224,.7)}
.pe__imp[data-l="1"] b{color:#C9CBA0}
.pe__imp[data-l="2"] b{color:var(--lime)}
.pe__w{grid-column:1/-1;font-size:.8rem;line-height:1.4;color:rgba(242,239,224,.62)}
.fw .pips{margin-top:-.1rem}
.polkey{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:center;font-family:var(--f-mono);font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(242,239,224,.6)}
.polkey > span{display:inline-flex;align-items:center;gap:.4rem}
.polkey em{flex-basis:100%;font-style:normal;color:rgba(242,239,224,.45)}

/* Deep-dive buttons into the edibles and pellets ranges (Pierre, 26 Oct). The pellets one waits for its page */
.ddrow{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:clamp(20px,3vw,32px)}
.dd--soon{opacity:.5;cursor:default;pointer-events:none}
.dd--soon em{font-style:normal;font-family:var(--f-mono);font-size:.62em;letter-spacing:.08em;text-transform:uppercase;padding:.2em .6em;border:1px solid currentColor;border-radius:999px}
@media (max-width:699px){.sn__key{grid-column:1/-1}}
/* Patent families, expandable under the IP block (Pierre, 26 Oct) */
.pfam{margin-top:14px}
.pfam__k{display:block;margin:clamp(18px,3vw,28px) 0 .8rem;color:var(--olive-d)}
.pfam__grid{display:grid;gap:10px}
@media (min-width:760px){.pfam__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.pfam__grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}}   /* the four families with drawings, one row */
.pfam__k--2{margin-top:1.4rem}
.pfc--txt{align-content:start}
.pfc{background:var(--sand);border-radius:var(--r);padding:16px;display:grid;gap:.45rem;align-content:start}
.pfc figure{margin:0 0 .3rem;background:#FBF8EE;border-radius:calc(var(--r) - 4px);aspect-ratio:4/3;display:grid;grid-template-rows:100%;place-items:center;overflow:hidden}   /* a definite row, or the drawing sizes the row and gets cut (28 Oct) */
.pfc figure img{width:86%;height:86%;object-fit:contain;mix-blend-mode:multiply}
.pfc .label{color:var(--olive-d)}
.pfc h4{font-size:1.02rem;font-weight:500}
.pfc p{font-size:.86rem;color:var(--graphite)}
.pfc__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;color:var(--stone)}
.pfc__st{font-style:normal;padding:.3em .65em;border-radius:999px;border:1px solid var(--stone);color:var(--ink)}
.pfc__st.ok{background:var(--lime);border-color:var(--lime)}
.pfc a{font-size:.84rem;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* Brand pull under the ingredient brand (Pierre, 26 Oct) */
.pull{margin-top:clamp(40px,6vw,72px);display:grid;gap:12px}
.pull__k{color:var(--olive-d)}
.pull__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:900px){.pull__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pull__s{position:relative;background:var(--sand);border-radius:var(--r);padding:16px 16px 18px;display:grid;gap:.35rem;align-content:start}
.pull__s svg{position:absolute;right:14px;top:14px;width:20px;height:20px;color:var(--olive-d)}
.pull__s b{font-family:var(--f-mono);font-size:clamp(2rem,5.4vw,3.2rem);font-weight:400;letter-spacing:-.05em;line-height:1}
.pull__s span{font-size:.84rem;line-height:1.35;color:var(--graphite);max-width:22ch}
/* each reach card in its platform's colours (Pierre, 2 Nov): LinkedIn blue, Instagram's gradient, then Notpla's own ink and lime for the
   impressions across all platforms and the Ooho views */
.pull__s--li{background:#0A66C2;color:#fff}
.pull__s--ig{background:radial-gradient(circle at 30% 107%,#FDF497 0%,#FDF497 5%,#FD5949 45%,#D6249F 60%,#285AEB 90%);color:#fff}
.pull__s--li svg,.pull__s--ig svg{color:#fff}
.pull__s--li span,.pull__s--ig span{color:rgba(255,255,255,.9)}
.pull__s--ink{background:var(--ink);color:var(--cream)}
.pull__s--ink b{color:var(--lime)}
.pull__s--ink span{color:rgba(242,239,224,.72)}
.pull__s--lime{background:var(--lime)}
.pull__aw{display:flex;flex-wrap:wrap;gap:.45rem 1.4rem;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.07em;text-transform:uppercase;color:var(--stone)}
.pull__aw span{display:inline-flex;align-items:center;gap:.5rem}
.pull__aw span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 1px var(--olive)}
.pull__reels{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(140px,210px);gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;min-width:0}
.reel{margin:0;display:grid;gap:.45rem;scroll-snap-align:start}
.reel video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:var(--r);background:var(--sand);display:block}
/* reels in full (Pierre, 28 Oct): the Graham Norton clip stays landscape so its subtitles show, every reel opens full screen with sound */
.reel{position:relative}
.reel--wide{grid-column:span 3;align-self:start}
.reel--wide video{aspect-ratio:16/9}   /* the whole frame, so the subtitles are never cut, on a phone too (Pierre, 28 Oct) */
@media (max-width:599px){.pull__reels{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;scroll-snap-type:none}.reel--wide{grid-column:1 / -1}}   /* phone: the Graham Norton clip on its own row, full width, then the other four two by two */
.reel video{cursor:pointer}
.reel__fs{position:absolute;top:8px;right:8px;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(26,28,28,.62);color:#F2EFE0;cursor:pointer;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:background .2s,transform .2s}
.reel__fs:hover{background:#1A1C1C;transform:scale(1.06)}
.reel__fs svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vlb{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#0d0e0e;color:#F2EFE0}
.vlb::backdrop{background:#0d0e0e}
.vlb[open]{display:grid;place-items:center}
.vlb video{width:100%;height:100%;object-fit:contain;background:#0d0e0e;outline:none}
.vlb__x{position:absolute;top:16px;right:16px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(242,239,224,.14);color:#F2EFE0;cursor:pointer;z-index:2}
.vlb__x:hover{background:rgba(242,239,224,.26)}
.vlb__x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.reel figcaption{font-family:var(--f-mono);font-size:.56rem;letter-spacing:.07em;text-transform:uppercase;color:var(--stone)}
/* Deep-dive buttons sit on the media and in the text boxes (Pierre, 26 Oct) */
.dd__pw{font-family:var(--f-mono);font-size:.56rem;letter-spacing:.07em;text-transform:uppercase;padding:.45em .8em;border-radius:999px}
.ddov{position:absolute;z-index:2;right:12px;top:12px;left:12px;display:flex;flex-wrap:wrap;gap:.4rem;justify-content:flex-end;align-items:center;pointer-events:none}
.ddov > *{pointer-events:auto}
.ddov .btn{padding:.6em 1em;font-size:.66rem}
.ddov .dd__pw{background:rgba(33,35,35,.62);color:var(--cream)}
.ddov .dd--soon{background:rgba(242,239,224,.88);color:var(--ink);border-color:transparent;opacity:.92}
.ddin{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-top:.55rem}
.ddin [hidden]{display:none!important}
.ddin .btn{padding:.6em 1em;font-size:.66rem}
.ddin .dd__pw{color:var(--stone);padding-left:0}

.ddov .btn,.ddin .btn{white-space:nowrap}
@media (max-width:640px){.ddov{right:8px;top:8px;left:8px}.ddov .btn{padding:.5em .75em;font-size:.56rem;gap:.45em}.ddov .dd__pw{font-size:.5rem}}

/* data sheet v2 (26 Oct): description + layer diagram in the header, unit column, datasheet downloads, stamp documents */
@media (min-width:1001px){.tds__head{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center}}
.tds__desc{margin:.7rem 0 1.1rem;max-width:48ch;font-size:.95rem;line-height:1.45;color:var(--graphite)}
.tds__id .tds__meta{grid-template-columns:repeat(2,minmax(0,1fr));border-left:0}
.tds__id .tds__meta div:first-child{padding-left:0}
.tds__layers{margin:0}
.tds__lsvg{display:block;width:100%;max-width:520px;height:auto;margin-left:auto}
.tds__props td.u{font-family:var(--f-mono);font-size:.76rem;color:var(--stone);white-space:nowrap}
.tds__dl{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-left:auto}
.tds__dl .label{margin:0 .1rem 0 .6rem}
.tds__doc{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--ink);border-radius:999px;padding:.32em .85em;font-family:var(--f-mono);font-size:.72rem;color:var(--ink);text-decoration:none;transition:background .2s,color .2s}
.tds__doc:hover{background:var(--ink);color:var(--lime)}
.tds__seal em{font-style:normal;font-family:var(--f-mono);font-size:.56rem;letter-spacing:.07em;text-transform:uppercase;color:var(--stone)}
a.tds__seal{color:inherit;text-decoration:none}
a.tds__seal em{color:var(--olive-d);border-bottom:1px solid currentColor}
a.tds__seal:hover em{color:var(--ink)}
@media (max-width:1000px){.tds__lsvg{margin:0 auto}.tds__dl{margin-left:0}}
@media (max-width:640px){.tds__dl .label{flex-basis:100%;margin:.3rem 0 0}
  .tds__props tr{grid-template-columns:minmax(0,1fr) auto auto}
  .tds__props td.u{grid-column:3;grid-row:1;align-self:start;padding-left:.3rem}
  .tds__props td.m{grid-column:1/-1}}
.tds__props td.u:empty::before{content:"–"}
@media (max-width:640px){.tds__props td.u:empty{display:none}}

/* EPR v2 (26 Oct): pick the box being replaced, pick the scale, one chart across the three years */
.esc{max-width:1040px}
.eprx__pick{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.eprx__opt{display:grid;align-content:start;gap:.25rem;text-align:left;padding:10px 12px 12px;background:var(--cream);color:var(--ink);border:2px solid transparent;border-radius:12px;font:inherit;cursor:pointer;transition:border-color .25s,transform .25s var(--ease),opacity .25s}
.eprx__opt[data-k]{opacity:.86}
.eprx__opt[data-k]:hover{opacity:1}
.eprx__opt[aria-checked="true"]{opacity:1;border-color:var(--orange);transform:translateY(-3px)}
.eprx__opt--np{background:var(--lime);border-color:var(--olive-d);cursor:default}
.eprx__opt img{width:100%;aspect-ratio:4/3;object-fit:contain;display:block;margin-bottom:.3rem}
.eprx__opt b{font-weight:500;font-size:.95rem;letter-spacing:-.01em}
.eprx__sub{font-family:var(--f-mono);font-size:.6rem;color:var(--graphite)}
.eprx__band{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;margin-top:.3rem}
.eprx__band::before{content:"";width:9px;height:9px;border-radius:50%;background:#E8583A}
.eprx__opt[data-k="dispersion"] .eprx__band::before{background:linear-gradient(90deg,#9EA850 50%,#F0D64A 50%)}
.eprx__opt--np .eprx__band::before{background:#9EA850}
.eprx__ok{display:grid;gap:.15rem;margin-top:.45rem;padding-top:.45rem;border-top:1px solid rgba(232,88,58,.35)}
.eprx__opt--np .eprx__ok{border-top-color:rgba(111,117,64,.4)}
.eprx__ok i{display:flex;justify-content:space-between;align-items:center;font-style:normal;font-family:var(--f-mono);font-size:.62rem}
.eprx__ok svg{order:2;width:12px;height:12px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.eprx__ok .y svg{stroke:#6F7540}
.eprx__ok .n svg{stroke:#E8583A}
.eprx__range{max-width:none}
.eprx__ms{position:relative;height:48px;margin-top:4px}
.eprx__ms button{--a:50%;position:absolute;left:var(--p);transform:translateX(calc(-1 * var(--a)));display:grid;gap:.1rem;padding:12px 0 0;background:none;border:0;color:rgba(242,239,224,.62);font:inherit;text-align:center;white-space:nowrap;cursor:pointer;transition:color .2s}
.eprx__ms button:nth-child(1){--a:22%;text-align:left}
.eprx__ms button:nth-child(3){--a:94%;text-align:right}
.eprx__ms button::before{content:"";position:absolute;top:0;left:var(--a);height:8px;border-left:1px solid currentColor}
.eprx__ms b{font-weight:500;font-size:.8rem}
.eprx__ms span{font-family:var(--f-mono);font-size:.62rem}
.eprx__ms button:hover,.eprx__ms button.on{color:var(--lime)}
.eprc{--ph:260px}
.eprc__plot{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding-left:56px}
.eprc__grid{position:absolute;left:0;right:0;top:0;height:var(--ph);pointer-events:none}
.eprc__grid i{position:absolute;left:56px;right:0;border-top:1px solid rgba(242,239,224,.1)}
.eprc__grid i:first-child{border-top-color:rgba(242,239,224,.35)}
.eprc__grid span{position:absolute;right:calc(100% + 8px);top:0;transform:translateY(-50%);font-family:var(--f-mono);font-size:.6rem;color:rgba(242,239,224,.5);font-variant-numeric:tabular-nums}
.eprc__yr{display:grid;grid-template-rows:var(--ph) auto;justify-items:center;position:relative}
.eprc__bars{display:flex;align-items:flex-end;gap:8px;height:100%}
.eprc__bar{position:relative;width:clamp(30px,6vw,80px);height:var(--h,0%);border-radius:4px 4px 0 0;transition:height .8s var(--ease)}
.eprc__bar--alt{background:#E8583A}
.eprc__bar--alt[data-b="a"]{background:#F0D64A}
.eprc__bar--alt[data-b="g"]{background:#9EA850}
.eprc__bar--np{background:var(--lime)}
.eprc__cut{position:absolute;left:0;right:0;top:0;height:var(--c,0%);border-radius:4px 4px 0 0;background:repeating-linear-gradient(135deg,rgba(33,35,35,.32) 0 2px,transparent 2px 7px);border-bottom:1px dashed var(--ink);transition:height .8s var(--ease)}
.eprc__bar span{position:absolute;left:50%;transform:translateX(-50%);font-family:var(--f-mono);font-size:.62rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.eprc__bar--alt span{bottom:6px;color:var(--ink)}
.eprc__bar--np span{bottom:calc(100% + 5px);color:rgba(242,239,224,.8)}
.eprc__save{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);font-style:normal;font-family:var(--f-mono);font-size:.8rem;color:var(--lime);white-space:nowrap;font-variant-numeric:tabular-nums}
.eprc__x{display:grid;justify-items:center;gap:.15rem;padding-top:.6rem}
.eprc__x b{font-family:var(--f-mono);font-weight:400;font-size:.72rem}
.eprc__x small{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(242,239,224,.55)}
.eprc__key{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1rem;padding-left:56px;font-size:.8rem;color:rgba(242,239,224,.7)}
.eprc__key > span{display:inline-flex;align-items:center;gap:.5rem}
.eprc__key b{font-weight:400}
.eprc__sw{width:12px;height:12px;border-radius:3px;display:inline-block}
.eprc__sw--alt{background:linear-gradient(90deg,#E8583A 33%,#F0D64A 33% 66%,#9EA850 66%)}
.eprc__sw--np{background:var(--lime)}
.eprc__sw--cut{background:repeating-linear-gradient(135deg,rgba(242,239,224,.7) 0 2px,transparent 2px 5px);outline:1px solid rgba(242,239,224,.4)}
@media (max-width:640px){
  .eprc{--ph:210px}
  .eprc__plot,.eprc__key{padding-left:44px}
  .eprc__grid i{left:44px}
  .eprc__bars{gap:5px}
  .eprc__save{font-size:.7rem}
  .eprx__more{display:none}
  .eprx__ms{height:auto;display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem}
  .eprx__ms button{position:static;transform:none;display:inline-flex;gap:.35rem;align-items:baseline;padding:.35em .8em;border:1px solid rgba(242,239,224,.3);border-radius:999px;text-align:left}
  .eprx__ms button::before{display:none}
  .eprx__ms button.on{border-color:var(--lime)}
}
.esc .epr__delta b{color:var(--lime)}
#eprTv{white-space:nowrap}

/* Where people eat from Notpla, columns (26 Oct) */
.vcols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.vcol{display:grid;grid-template-rows:auto 1fr;min-width:0;background:rgba(33,35,35,.04);border-radius:12px;overflow:hidden}
.vcol__h{display:grid;gap:.1rem;padding:14px 14px 12px;border-bottom:1px solid var(--rule)}
.vcol__n{font-family:var(--f-mono);font-weight:400;font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.vcol__h span{font-size:.84rem;font-weight:500}
.vcol__list{display:grid;align-content:start;gap:14px;padding:12px 12px 28px;max-height:560px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(33,35,35,.25) transparent;
  -webkit-mask:linear-gradient(#000 calc(100% - 36px),transparent);mask:linear-gradient(#000 calc(100% - 36px),transparent)}
.vcols.on .vt{opacity:1;transform:none}
.vt--chain summary{display:grid;gap:.45rem;cursor:pointer;list-style:none}
.vt--chain summary::-webkit-details-marker{display:none}
.vt .vt__cap{display:grid;gap:.15rem;font-family:inherit;font-size:inherit;letter-spacing:0;text-transform:none;color:inherit}
.vt .vt__cap > span{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;color:var(--stone)}
.vt .vt__all{font-style:normal;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;color:var(--olive-d);justify-self:start;border-bottom:1px solid currentColor;margin-top:.15rem}
.vt--chain[open] .vt__all{color:var(--ink)}
.vt--chain[open] .vt__all::after{content:" ↑"}
.vt__locs{list-style:none;margin:.2rem 0 0;padding:0;display:grid;gap:.15rem;font-size:.74rem;color:var(--graphite);columns:1}
.vt__locs li{padding:.2rem 0;border-bottom:1px solid var(--rule)}
.vrows{list-style:none;margin:0;padding:0;display:grid}
.vcol__more{margin:0;padding:.6rem 0 .2rem;border-top:1px solid var(--rule);font-family:var(--f-mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--stone)}
.vrows li{display:grid;gap:.05rem;padding:.45rem 0;border-top:1px solid var(--rule)}
.vrows b{font-weight:500;font-size:.8rem;line-height:1.25}
.vrows span{font-family:var(--f-mono);font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;color:var(--stone)}
@media (max-width:1100px){
  .vcols{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(220px,42%);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
  .vcol{scroll-snap-align:start}
}
@media (max-width:640px){.vcols{grid-auto-columns:82%}.vcol__list{max-height:480px}}

/* EPR fits one screen (Pierre, 27 Oct): compact cards with the photo beside the name, chart and saving side by side */
.esc{max-width:none;gap:1rem}
.eprx__opt{grid-template-columns:72px minmax(0,1fr);column-gap:10px;row-gap:.5rem;align-items:center;padding:9px 10px 10px}
.eprx__opt img{width:72px;margin:0}
.eprx__txt{display:grid;gap:.1rem;min-width:0}
.eprx__opt b{font-size:.88rem;line-height:1.15}
.eprx__band{margin-top:.15rem}
.eprx__ok{grid-column:1/-1;grid-template-columns:1fr 1fr;column-gap:12px;margin-top:0;padding-top:.4rem}
.eprx__ok i{font-size:.58rem}
.eprx__ms{height:42px}
.eprc{--ph:200px}
.eprx__out{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px);gap:28px;align-items:end}
.eprx__sum{display:grid;gap:1rem;padding-bottom:2.4rem}
.eprx__sum .epr__delta{display:grid;gap:.3rem}
.eprx__sum .eprc__key{flex-direction:column;align-items:flex-start;gap:.4rem;margin:0;padding:0}
/* Phones and tablets (Pierre, 1 Nov): every box on screen at once in a grid, no sideways scrolling, and the scale buttons
   wrap onto as many rows as they need instead of running into the chart */
@media (max-width:900px){
  .eprx__out{grid-template-columns:minmax(0,1fr);gap:1rem}
  .eprx__sum{padding-bottom:0}
  .eprx__pick{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .eprx__opt{grid-template-columns:44px minmax(0,1fr);column-gap:8px;padding:8px 9px 9px}
  .eprx__opt img{width:44px}
  .eprx__opt[aria-checked="true"]{transform:none}
}
@media (max-width:640px){
  .eprx__pick{grid-template-columns:repeat(2,minmax(0,1fr))}
  .eprx__opt--np{grid-column:1/-1}
  .eprx__sub{display:none}
  .eprx__opt b{font-size:.82rem}
  .eprx__ok{column-gap:8px}
  .eprx__ok i{font-size:.52rem;letter-spacing:-.01em;white-space:nowrap;gap:4px}
  .eprx__ms{height:auto}
}

/* Revenue chart: business units or hero deals (investor and board pages) */
.revhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.8rem}
.revhead .label{margin:0}
.seg--light{border-color:rgba(33,35,35,.25);color:var(--ink)}
.seg--light button{padding:.5rem .8rem}
.seg--light button:focus-visible{outline-color:var(--ink)}
.revkey{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-bottom:.8rem;font-size:.78rem;color:var(--graphite)}
.revkey span{display:inline-flex;align-items:center;gap:.45rem}
.revkey i{width:10px;height:10px;border-radius:2px;display:inline-block}
.legend[hidden],.revkey[hidden]{display:none}

/* ---------- Slide rail (Pierre, 27 Oct): on wide screens the top bar gives way to a strip of slide thumbnails on the left,
   like the filmstrip in Google Slides at about half its width. Built by js/site.js, phones keep the top bar ---------- */
.rail,.rail__tip,.rail__fade,#railSprite{display:none}
html.has-rail{--rail:112px;--railS:var(--rail)}   /* the strip's width, and the room it takes from the page */
html.has-rail body{padding-left:var(--railS)}
html.has-rail .nav{display:none}
/* one slide per screen on a laptop (Pierre, 1 Nov): sections and slide heads breathe less when the rail shows */
/* the browser's scroll anchoring moved a jumped-to slide away when the padding below short slides was worked out again; the rail keeps the slide in place itself */
html.has-rail,html.has-rail body{overflow-anchor:none}
html.has-rail .sec{padding-block:clamp(48px,7vh,88px)}
html.has-rail .head{margin-bottom:clamp(24px,4vh,48px)}
html.has-rail .lockup{display:none}   /* the chapter-end mark only added an empty strip under the slide */
html.has-rail .head h2,html.has-rail .sea__panel h2{font-size:clamp(2.2rem,3.6vw,3.5rem)}
html.has-rail #count{padding-top:clamp(36px,5vh,60px)!important}
/* Seaweed: the panel fits one screen */
html.has-rail .sea__content{padding-block:clamp(36px,5vh,64px);min-height:calc(100svh - var(--navB,0px))}
html.has-rail .sea__panel{padding:clamp(22px,3.4vh,36px) clamp(24px,2.4vw,40px)}
html.has-rail .sea__panel .lede{margin-top:.9rem}
html.has-rail .sea__more{margin-top:1rem}
html.has-rail .sea__deep{margin-top:1.2rem}
/* Coating specs on one screen: the sheet tightens, and its first four rows (the figures the four big numbers already show) are left to the numbers */
html.has-rail .tds__head{padding:12px 24px;gap:1.6rem}
html.has-rail .tds__desc{margin:.4rem 0 .7rem}
html.has-rail .tds__lsvg{max-height:clamp(110px,17vh,160px);width:auto;max-width:100%}
html.has-rail .tds__kpi{padding:10px 24px 12px;gap:.2rem}
html.has-rail .tds__kpi .v{font-size:clamp(1.7rem,2.4vw,2.3rem)}
html.has-rail .tds__body > div{padding:12px 24px 14px}
html.has-rail .tds__sl{margin-bottom:.4rem}
html.has-rail .tds__props tbody tr:nth-child(-n+4){display:none}
html.has-rail .tds__props th,html.has-rail .tds__props td{padding:.36rem .5rem;font-size:.82rem}
html.has-rail .tds__seals{grid-template-columns:repeat(5,minmax(0,1fr));gap:.7rem .3rem}
html.has-rail .tds__seal{gap:.3rem}
html.has-rail .tds__seal svg{max-width:clamp(62px,8.4vh,82px)}
html.has-rail .tds__seal span{font-size:.66rem}
html.has-rail .tds__foot{padding:9px 24px;gap:.6rem 1rem}
html.has-rail .tds__chip{font-size:.74rem;padding:.26em .7em}
html.has-rail .pf{margin-top:0}
/* Plastic-free, two slides that each fill their screen (Pierre, 2 Nov: lots of empty space): the mark and the oil-drop photo larger,
   then the materials that did not pass set larger and centred on the screen */
html.has-rail .pf{min-height:calc(100svh - var(--navB,0px) - 56px);grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-content:center}
html.has-rail .pf .photo{aspect-ratio:4/3!important}
.pf .pf__press{aspect-ratio:471/517;background:#fff;box-shadow:0 24px 50px -28px rgba(0,0,0,.6)}
html.has-rail .pf .pf__press{aspect-ratio:471/517!important;height:min(calc(100svh - var(--navB,0px) - 140px),640px);width:auto;justify-self:center}
/* The press clipping turns over to the EU definition of plastic (deck slide g32690567db2_0_677, Pierre 9 Nov). Sizes in cqw so the
   back reads like the slide at any width */
.pf .pfl{background:none;box-shadow:none;perspective:1600px;cursor:pointer;container-type:inline-size;border-radius:var(--r);outline-offset:6px}
.pfl__in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .9s var(--ease)}
.pfl[aria-pressed="true"] .pfl__in{transform:rotateY(180deg)}
.pfl__f{position:absolute;inset:0;margin:0;border-radius:var(--r);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 24px 50px -28px rgba(0,0,0,.6)}
.pfl__front{background:#fff}
.pfl__front img{display:block;width:100%;height:100%;object-fit:cover}
.pfl__back{transform:rotateY(180deg);background:var(--ink-2);color:var(--cream);padding:5cqw;display:flex;flex-direction:column;gap:2.2cqw}
.pfl__hint{position:absolute;right:3cqw;bottom:3cqw;display:inline-flex;align-items:center;gap:.5em;padding:.55em .95em;border-radius:999px;background:var(--ink);color:var(--lime);font-family:var(--f-mono);font-size:max(10px,2.4cqw);letter-spacing:.04em;text-transform:uppercase;box-shadow:0 8px 18px -8px rgba(0,0,0,.55);transition:transform .3s var(--ease)}
.pfl__hint b{font-weight:400;font-size:1.3em;line-height:1}
.pfl:hover .pfl__hint{transform:translateY(-2px)}
.pfl__key .pfl__hint{position:static;margin-left:auto;background:var(--lime);color:var(--ink);box-shadow:none}
.pfl__k{font-family:var(--f-mono);font-size:2.4cqw;letter-spacing:.06em;text-transform:uppercase;color:rgba(242,239,224,.62)}
.pfl__t{font-size:5.6cqw;font-weight:500;letter-spacing:-.025em;line-height:1.05;margin-top:-1.2cqw}
.pfl__key{display:flex;flex-wrap:wrap;gap:1cqw 4cqw;font-size:2.7cqw}
.pfl__key span{display:inline-flex;align-items:center;gap:1.4cqw}
.pfl__mk{display:inline-block;flex:none;width:5cqw;height:3.6cqw;border-radius:.5cqw;background:linear-gradient(90deg,#E8414B 50%,#56B7E6 50%) top/100% 68% no-repeat,#111}   /* the EU "plastic in product" marking, simplified */
.pfl__tk{display:inline-grid;place-items:center;flex:none;width:3.8cqw;height:3.8cqw;border-radius:50%;background:var(--lime);color:var(--ink);font-size:2.4cqw;font-weight:700;line-height:1}
.pfl__m{flex:1;min-height:0;display:grid;grid-template-columns:4.4cqw 1fr 1fr;grid-template-rows:auto 1fr 1.25fr;gap:1.2cqw;font-size:2.9cqw;line-height:1.25}
.pfl__ch{align-self:end;text-align:center;font-size:2.5cqw;color:rgba(242,239,224,.7)}
.pfl__rh{justify-self:center;writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;font-size:2.5cqw;color:rgba(242,239,224,.7)}
.pfl .g{color:var(--lime)}
.pfl__c{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5cqw;padding:2.4cqw;border-radius:1.8cqw;background:rgba(142,130,106,.4);text-align:center}
.pfl__c em{font-style:italic;font-weight:500}
.pfl__c > .pfl__mk,.pfl__c > .pfl__tk{position:absolute;top:1.5cqw;right:1.5cqw;width:3.9cqw;height:2.8cqw}
.pfl__c > .pfl__tk{width:3.6cqw;height:3.6cqw}
.pfl__c--np{background:var(--cream);color:var(--ink);box-shadow:inset 0 0 0 .5cqw var(--lime)}
.pfl__c--np em{color:var(--olive-d)}
.pfl__np{display:inline-flex;align-items:center;gap:1.2cqw;font-size:3.8cqw;font-weight:500;letter-spacing:-.02em}
.pfl__np .n{width:5.2cqw;aspect-ratio:252681/180000;background:currentColor;-webkit-mask:url(../img/notpla-monogram-dark.svg) center/contain no-repeat;mask:url(../img/notpla-monogram-dark.svg) center/contain no-repeat}
.pfl__c--split{flex-direction:row;align-items:stretch;padding:0;overflow:hidden}
.pfl__c--split > div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5cqw;padding:2cqw 1.4cqw}
.pfl__hatch{flex:2.2;font-size:2.45cqw;background:repeating-linear-gradient(45deg,transparent 0 1.3cqw,rgba(242,239,224,.09) 1.3cqw 1.6cqw),repeating-linear-gradient(-45deg,transparent 0 1.3cqw,rgba(242,239,224,.09) 1.3cqw 1.6cqw)}
.pfl__c--split > div:last-child{flex:1}
.pfl__note{margin:0;font-size:2.3cqw;line-height:1.35;color:rgba(242,239,224,.62)}
@media (prefers-reduced-motion:reduce){.pfl__in{transition:none}}
html.has-rail .pf__mark{font-size:clamp(4rem,7vw,8rem);white-space:nowrap}
html.has-rail .pf .lede{font-size:clamp(1.15rem,1.45vw,1.4rem);max-width:30rem}
html.has-rail .supd{min-height:calc(100svh - var(--navB,0px) - 28px - clamp(48px,7vh,88px));margin-top:0;display:grid;align-content:center;justify-items:center}
html.has-rail .supd__h{max-width:54rem;font-size:clamp(1.7rem,2.6vw,2.5rem)}
html.has-rail .supd__list{width:100%;max-width:1120px;font-size:clamp(.95rem,1.15vw,1.12rem);line-height:1.95;column-gap:2.5rem}
html.has-rail .supd__win{font-size:clamp(1.7rem,2.4vw,2.3rem)}
/* Units replaced on one screen: the towers get the height left under the title, and the hero brands become one strip below them.
   On the Board page the strip moves to the 2026 pace slide, and the extra paragraph and chart switch take its place */
html.has-rail #traction .stack3d{height:clamp(280px,calc(100svh - var(--navB,0px) - 480px),560px)}
/* Traction on a laptop (Pierre, 2 Nov: the chart was too small): the title, the toggle and the running total on the left, the chart as
   tall as the slide allows on the right. Where the board's pace slide holds the brands the chart takes the whole height, elsewhere the
   brands stay under it. site.js sets .with-pace */
html.has-rail #traction .trx{--tg:clamp(32px,4vw,64px);display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);column-gap:var(--tg);align-items:start}
html.has-rail #traction .trx > .head{grid-column:1;grid-row:1;display:block;margin:0}
html.has-rail #traction .trx > .head > * + *{margin-top:1rem}
html.has-rail #traction .trx > .stackmode{grid-column:1;grid-row:2;justify-self:start;margin-top:1.6rem}
html.has-rail #traction .trx > .stack3d{grid-column:2;grid-row:1 / span 3;margin:0 calc(-1 * var(--gutter)) 0 0;height:calc(100svh - var(--navB,0px) - 330px)}
html.has-rail #traction.with-pace .trx > .stack3d{height:calc(100svh - var(--navB,0px) - 130px)}
html.has-rail #traction .stack3d__total{left:auto;right:calc(100% + var(--tg));top:auto;bottom:6%}
html.has-rail #traction.with-pace .pace{padding:clamp(22px,2.6vw,34px) clamp(24px,3vw,40px)}
html.has-rail #traction.with-pace .pace__lead{font-size:clamp(1.4rem,2.1vw,1.9rem)}
html.has-rail #traction.with-pace .pace__live b{font-size:clamp(2.6rem,4.2vw,3.6rem)}
html.has-rail #traction.with-pace .brands{height:calc(100svh - var(--navB,0px) - 258px);grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1.25fr) minmax(0,1fr)}
html.has-rail #traction.with-pace .brands .photo{height:auto}
html.has-rail #traction.with-pace .brands__facts > :nth-child(2){grid-column:span 2}   /* photos and the brands card above, 2x and the premium below */
html.has-rail #traction.with-pace .fact{align-content:end;padding:24px 26px}
html.has-rail #traction.with-pace .fact b{font-size:clamp(3.6rem,6.4vw,6.8rem)}
html.has-rail #traction.with-pace .fact h3{font-size:clamp(1.3rem,1.8vw,1.7rem)}
html.has-rail #traction.with-pace .fact > span:not(.label){font-size:.95rem;line-height:1.4}
html.has-rail #traction .tlab b{font-size:clamp(.68rem,.82vw,.92rem)}
html.has-rail #traction .brands{margin-top:12px;grid-template-columns:minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr)}
html.has-rail #traction .brands__facts{display:contents}
html.has-rail #traction .brands .photo{aspect-ratio:auto;height:clamp(120px,17vh,170px)}
html.has-rail #traction .fact{padding:14px 18px;align-content:center}
html.has-rail #traction .fact b{font-size:clamp(1.9rem,2.6vw,2.5rem)}
html.has-rail #traction .fact h3{font-size:clamp(1rem,1.3vw,1.2rem)}
html.has-rail #traction .fact > span:not(.label){font-size:.84rem;line-height:1.35}
html.has-rail .pace{margin-top:12px}
/* Where people eat: the columns scroll inside the height left on the screen */
html.has-rail .vcol__list{max-height:max(300px,calc(100svh - var(--navB,0px) - 370px))}
/* Ingredient brand, slide one: the tag and the stadium photo share the screen under the title */
html.has-rail .mark__grid{margin-top:0}
html.has-rail .tagwrap{padding-top:44px;gap:.6rem}
html.has-rail .tagwrap .string{height:60px}
html.has-rail .tag{width:clamp(210px,30vh,280px)}
/* the square film as tall as the slide allows, the text beside it */
html.has-rail .make{grid-template-columns:auto minmax(0,1fr)}
html.has-rail .make__film{width:min(44vw,calc(100svh - var(--navB,0px) - 150px - 200px))}   /* room under it for the value chain (F1, 14 Nov) */
html.has-rail .make{row-gap:clamp(16px,2.6vh,30px)}
html.has-rail .make{min-height:calc(100svh - var(--navB,0px) - 56px);align-content:center}
html.has-rail .make h3{font-size:clamp(1.8rem,2.6vw,2.6rem);max-width:18ch}
html.has-rail .make p.muted{font-size:clamp(1rem,1.2vw,1.15rem)}
html.has-rail .make__n b{font-size:clamp(2.6rem,3.6vw,3.6rem)}
html.has-rail .make__n{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:2.4rem}   /* the two figures side by side, tops level, labels under each */
/* the coating methods on their own screen: the line drawn larger beside the text and the four methods */
html.has-rail .coatmini{min-height:calc(100svh - var(--navB,0px) - 30px - clamp(48px,7vh,88px));margin-top:0;align-content:center;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
html.has-rail .coatmini__stage{aspect-ratio:16/10;max-height:calc(100svh - var(--navB,0px) - 160px)}
html.has-rail .coatmini__head h4{font-size:clamp(1.6rem,2.5vw,2.4rem);max-width:20ch}
html.has-rail .coatmini__head p{font-size:clamp(.95rem,1.15vw,1.1rem)}
html.has-rail .inwild{aspect-ratio:auto;height:clamp(240px,calc(100svh - var(--navB,0px) - 470px),430px)}
html.has-rail .promise{margin-top:1.1rem}
/* slide two: a brand with pull, with the customer logos under it */
html.has-rail .pull{margin-top:0}
html.has-rail .logos{margin-top:28px}
/* £300m pipeline on one screen: the funnel and a tighter case study side by side, the deal cards in one row under them */
html.has-rail .pipe{margin-top:0;gap:28px}
html.has-rail .pipe > div > h3{font-size:clamp(1.8rem,2.6vw,2.5rem)!important}
html.has-rail .pipe > div > p.muted{margin-bottom:.9rem!important}
html.has-rail .tier{padding:10px 16px;gap:.15rem}
html.has-rail .tier b{font-size:clamp(1.6rem,2.2vw,2.1rem)}
html.has-rail .case{gap:8px;padding:16px 20px}
html.has-rail .case .photo{aspect-ratio:2.7/1}
html.has-rail .case b.num{font-size:clamp(2rem,2.8vw,2.6rem)!important}
html.has-rail .case__chart svg{max-height:92px;width:auto}
html.has-rail .case > p.muted{font-size:.8rem!important}
html.has-rail .deals{margin-top:18px}
html.has-rail .deals__h{font-size:1.15rem}
html.has-rail .deal{padding:12px 16px;gap:.3rem}
html.has-rail .deal .who{height:30px}
html.has-rail .deal .who img{height:calc(var(--h,40px) * .72)}
html.has-rail .deal b{font-size:clamp(1.7rem,2.3vw,2.2rem)}
html.has-rail .deal p{font-size:.8rem}
/* Cost of goods on one screen: the title beside its paragraph, tighter cards */
html.has-rail .cdn{margin-top:0}
html.has-rail .cdn__head{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);column-gap:clamp(28px,4vw,64px);align-items:end}
html.has-rail .cdn__head .label{grid-column:1/-1}
html.has-rail .cdn__head h3{margin:.4rem 0 0;font-size:clamp(1.6rem,2.6vw,2.3rem)}
html.has-rail .cdn__head p{font-size:.92rem;line-height:1.45}
html.has-rail .cdn__grid{margin-top:20px}
html.has-rail .cdn__card{padding:18px 22px;gap:.8rem}
html.has-rail .ue__row{padding:5px 0}
html.has-rail .ue__bar{height:36px}
html.has-rail .cdn > .cap{margin-top:.6rem!important}
/* Revenue to 2032 on one screen: the title beside the chart */
html.has-rail #financials > .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(32px,4vw,64px);align-items:start}
html.has-rail #financials .head{grid-row:1 / span 2;grid-template-columns:minmax(0,1fr);margin-bottom:0;align-self:center}
html.has-rail #financials .fin,html.has-rail #financials > .wrap > .cap{grid-column:2;max-width:none}
html.has-rail #financials .rounds{grid-column:1/-1}
/* The round on one screen: the title and the amount on the left, the milestones on the right. Use of funds follows as its own slide */
html.has-rail #round > .wrap{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);column-gap:clamp(32px,4vw,72px);align-items:start}
html.has-rail #round .head{grid-column:1;grid-row:1;grid-template-columns:minmax(0,1fr);margin-bottom:1.4rem}
html.has-rail #round .head h2{font-size:clamp(2rem,3vw,2.9rem)}
html.has-rail #round .round{display:contents}
html.has-rail #round .round__big{grid-column:1;grid-row:2;position:static}
html.has-rail #round .round__big #roundAmt{font-size:clamp(4rem,9vh,7rem)}
html.has-rail #round .round > div:last-child{grid-column:2;grid-row:1 / span 2;align-self:center}
html.has-rail #round .uses{grid-column:1/-1;margin-top:0;display:grid;align-content:center;min-height:calc(100svh - var(--navB,0px) - 120px)}
html.has-rail #round .uses__bar{height:clamp(64px,12vh,110px);margin:1.6rem 0 1.8rem;border-radius:14px}
html.has-rail #round .uses__list{row-gap:1rem}
html.has-rail #round .uses__list li{font-size:1.1rem;grid-template-columns:36px 56px minmax(0,1fr);align-items:center}
html.has-rail #round .uses__list li i{width:36px;height:36px;border-radius:9px}
html.has-rail #round .uses__list li i svg{width:21px;height:21px}
html.has-rail #round .uses__list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2rem}
/* IKEA, from sea to store on one screen: the title and the ask on the left, the value chain on the right, the five reasons in a row below */
html.has-rail #ikeacase > .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-areas:"head chain" "ask chain" "why why";column-gap:clamp(28px,3.4vw,56px);row-gap:18px;align-items:start}
html.has-rail #ikeacase .head{grid-area:head;grid-template-columns:minmax(0,1fr);margin-bottom:0;gap:.8rem}
html.has-rail #ikeacase .head h2{font-size:clamp(2rem,3vw,2.8rem)}
html.has-rail #ikeacase .head .lede{font-size:1rem;line-height:1.45}
html.has-rail #ikeacase .ikask{grid-area:ask;margin-top:0;align-self:end;padding:18px 22px}
html.has-rail #ikeacase .ikask h3{font-size:clamp(1.2rem,1.7vw,1.5rem)}
html.has-rail #ikeacase .ikask p{font-size:.86rem;line-height:1.45}
html.has-rail #ikeacase .vchain{grid-area:chain;gap:12px}
html.has-rail #ikeacase .vchain__steps{gap:.5rem}
html.has-rail #ikeacase .vchain__steps li{padding:.6rem;column-gap:.45rem}
html.has-rail #ikeacase .vchain__steps li i{width:20px;height:20px;font-size:.6rem}
html.has-rail #ikeacase .vchain__steps li b{font-size:.84rem}
html.has-rail #ikeacase .vchain__steps li span{font-size:.74rem}
html.has-rail #ikeacase .ikwhy{grid-area:why;margin-top:0;grid-template-columns:repeat(5,minmax(0,1fr))}
html.has-rail #ikeacase .ikwhy article{padding:12px 14px;gap:.3rem}
html.has-rail #ikeacase .ikwhy h4{font-size:.95rem}
html.has-rail #ikeacase .ikwhy p{font-size:.78rem}
/* Portfolio: the photo keeps its shape (the markers sit on it) and gets narrower until it fits under the title */
html.has-rail .flat{max-width:min(100%,calc((100svh - var(--navB,0px) - 290px) * 16 / 9))}
/* EPR fees on one screen */
html.has-rail .esc{gap:.75rem}
html.has-rail .esc__head h3{font-size:clamp(1.5rem,2.3vw,2rem)}
html.has-rail .eprx__opt{grid-template-columns:50px minmax(0,1fr);padding:7px 9px 8px}
html.has-rail .eprx__opt img{width:50px}
html.has-rail .eprx__opt[aria-checked="true"]{transform:none}
html.has-rail .eprc{--ph:min(200px,21vh)}
html.has-rail .eprx__sum{padding-bottom:1.6rem}
html.has-rail .esc > .cap{font-size:.68rem;line-height:1.4;max-width:none;margin:0}
html.has-rail .progress{left:var(--railS)}
html.has-rail .fnpop{left:calc(var(--railS) + 12px)}
html.has-rail .rail{display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:65;background:#1A1C1C;color:var(--cream);border-right:1px solid rgba(242,239,224,.08)}
html.has-edbar.has-rail .rail{top:34px}
.rail .rail__logo{width:62px;margin:18px 0 4px 13px;color:var(--cream);opacity:.9}
.rail__list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:2px 12px 56px}
.rail__list::-webkit-scrollbar{display:none}
.rail__ch{display:block;font-family:var(--f-mono);font-size:.54rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(242,239,224,.48);margin:15px 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail__t{position:relative;display:block;text-decoration:none;color:inherit;margin:0 0 7px;border-radius:4px;outline:1.5px solid transparent;outline-offset:2px;transition:outline-color .25s}
.rail__t.on{outline-color:var(--lime)}
.rail__img{display:block;width:100%;aspect-ratio:1.47;border-radius:4px;background:#2A2D2C var(--sprite,none) no-repeat;box-shadow:inset 0 0 0 1px rgba(242,239,224,.12);opacity:.7;transition:opacity .25s}
.rail__t:hover .rail__img,.rail__t.on .rail__img,.rail__t:focus-visible .rail__img{opacity:1}
.rail__img--txt{display:grid;place-items:center;padding:6px;font-size:.56rem;line-height:1.2;text-align:center;color:rgba(242,239,224,.82);background-image:none}
.rail__n{position:absolute;left:3px;bottom:3px;font-family:var(--f-mono);font-size:.5rem;font-weight:500;line-height:1.3;color:var(--cream);background:rgba(26,28,28,.78);border-radius:3px;padding:1px 3px}
html.has-rail .rail__tip{display:block;position:fixed;left:calc(var(--rail) + 6px);z-index:66;padding:.36rem .62rem;border-radius:6px;background:var(--cream);color:var(--ink);font-size:.76rem;line-height:1.3;white-space:nowrap;pointer-events:none;
  box-shadow:0 4px 18px rgba(0,0,0,.28);opacity:0;transform:translate(-4px,-50%);transition:opacity .15s,transform .15s}
.rail__tip.on{opacity:1;transform:translate(0,-50%)}
html.has-rail .rail__fade{display:block;position:fixed;top:0;right:0;bottom:0;left:var(--railS);z-index:64;background:var(--ink);opacity:0;pointer-events:none;transition:opacity .17s}
.rail__fade.on{opacity:1}
/* phones: the menu lists the same slides, a small thumbnail beside each name */
.sheet{overflow-y:auto;overscroll-behavior:contain}
.sheet__ch{display:block;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;opacity:.5;margin:1.4rem 0 .25rem}
.sheet a.sheet__t{position:relative;justify-content:flex-start;align-items:center;gap:.85rem;padding:.45rem 0;font-size:1.05rem;letter-spacing:-.01em}
.sheet__t .rail__img{width:68px;flex:0 0 68px;opacity:1}
.sheet__t .rail__n{left:3px;bottom:auto;top:calc(.45rem + 3px)}
.sheet a.sheet__src{margin-top:1rem}
/* offline copy status (Pierre and Rodrigo's devices only, see js/site.js) */
.offp{display:none}
.offp.on{display:flex;align-items:center;gap:6px;position:fixed;left:10px;bottom:10px;z-index:67;max-width:calc(100vw - 20px);font-family:var(--f-mono);font-size:.55rem;letter-spacing:.06em;text-transform:uppercase;line-height:1.3;
  color:var(--cream);background:rgba(26,28,28,.92);border-radius:999px;padding:5px 9px 5px 8px;transition:opacity .5s}
.offp::before{content:"";flex:0 0 6px;height:6px;border-radius:50%;background:var(--lime)}
.offp.busy::before{background:#F0D64A}
.offp.err::before{background:#E8583A}
.offp.new{cursor:pointer}
html.has-rail .offp.on{max-width:calc(var(--rail) - 20px);border-radius:7px}
/* With a mouse the strip tucks away and slides back out when the pointer reaches the left edge (Pierre, 1 Nov), so the slide gets
   the whole width. Touch screens keep it out, with no pointer to call it back. Keyboard focus inside it holds it open too */
@media (hover:hover) and (pointer:fine){
  html.has-rail{--railS:0px}
  html.has-rail .rail{transform:translateX(-100%);transition:transform .3s cubic-bezier(.3,.7,.2,1) .35s,box-shadow .3s .35s}
  html.has-rail .rail:hover,html.has-rail .rail:has(:focus-visible){transform:none;box-shadow:10px 0 36px rgba(0,0,0,.32);transition-delay:0s}
  /* the band that catches the pointer: the screen's left edge while tucked away, with a small grip so it can be found,
     then a forgiving margin beside the strip once it is out */
  html.has-rail .rail::after{content:"";position:absolute;top:0;bottom:0;left:100%;width:14px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='44'%3E%3Crect width='4' height='44' rx='2' fill='%23807F78' fill-opacity='.6'/%3E%3C/svg%3E") no-repeat 3px 50%}
  html.has-rail .rail:hover::after,html.has-rail .rail:has(:focus-visible)::after{background:none}
  html.has-rail .offp.on{max-width:calc(100vw - 20px);border-radius:999px}
}
.offp.gone{opacity:0;pointer-events:none}
/* thumbnails being taken (tools/build_thumbs.mjs): no page furniture in the shot */
html.shot .fbtn,html.shot .offp,html.shot .rail__tip,html.shot .fnpop,html.shot .rtip{display:none!important}
html.shot .rail::after{background:none!important}
/* EPR scale markers: a stadium, a snack bar chain, a grocer (Pierre, 28 Oct) */
.eprx__ic{width:1.1em;height:1.1em;vertical-align:-.2em;margin-right:.35em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* made at scale: the deck's production film in place of the factory photo (Pierre, 28 Oct) */
.make__film video{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:#2b2d2d}
/* COGS: the cost of one box beside the bridge, each stream linked to its lever (Pierre, 28 Oct) */
@media (min-width:1000px){.cdn__grid--2{max-width:none;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:stretch}}
.ue__sum{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:10px}
.ue__sum>span{display:grid;gap:.15rem;padding:10px 12px;border-radius:10px;background:rgba(33,35,35,.05);font-size:.8rem;line-height:1.3;color:var(--graphite)}
.ue__sum b{font-family:var(--f-mono);font-weight:400;font-size:1.5rem;letter-spacing:-.04em;color:var(--ink)}
.ue__sum--sw{background:#E7F3AC !important}
.ue__box{display:grid;gap:8px}
.ue__bar{display:flex;gap:2px;height:44px}
.ue__seg{width:var(--w);border-radius:4px;background:var(--c,#D5CCAE);transform:scaleY(0);transform-origin:bottom;transition:transform .5s cubic-bezier(.3,1.1,.5,1) calc(.15s + var(--i) * 90ms),opacity .25s;cursor:pointer}
.cdn.go .ue__seg{transform:none}
.ue__brace{display:flex;gap:2px;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;color:var(--stone)}
.ue__brace span{width:var(--w);padding-top:6px;border-top:1px solid currentColor;white-space:nowrap}
.ue__brace--sw{color:#5C6234;text-align:right}
.ue__list{list-style:none;margin:4px 0 0;padding:0;display:grid}
.ue__row{display:grid;grid-template-columns:30px minmax(0,1fr) auto 10.5rem;align-items:center;gap:10px;padding:7px 0;border-top:1px solid rgba(33,35,35,.1);cursor:pointer;outline:none}
.ue__sw{width:12px;height:12px;border-radius:3px;background:var(--c)}
/* each cost stream with its icon from the cost-base slide (Pierre, 2 Nov: more concrete), on its swatch colour in the list and on its segment of the bar */
.ue [data-k="conv"]{--ic:url(../img/icons/cogs/conversion.png)}.ue [data-k="board"]{--ic:url(../img/icons/cogs/board.png)}.ue [data-k="coat"]{--ic:url(../img/icons/cogs/coating.png)}
.ue [data-k="mix"]{--ic:url(../img/icons/cogs/mixing.png)}.ue [data-k="sw"]{--ic:url(../img/icons/cogs/seaweed.png)}
.ue__row .ue__sw{width:30px;height:30px;border-radius:7px;position:relative}
.ue__sw::after,.ue__seg::after{content:"";position:absolute;background:var(--ink);opacity:.82;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.ue__sw::after{inset:5px}
.ue__seg{position:relative}
.ue__seg::after{left:50%;top:50%;width:min(60%,30px);aspect-ratio:1;transform:translate(-50%,-50%);opacity:.7}
.ue [data-k="conv"]{--c:#E6DFCB}.ue [data-k="board"]{--c:#D5CCAE}.ue [data-k="coat"]{--c:#C2B792}.ue [data-k="mix"]{--c:#B0A67E}.ue [data-k="sw"]{--c:#D2E48C}
.ue__lab{display:flex;align-items:baseline;gap:.5rem;min-width:0;font-size:.86rem;line-height:1.2}
.ue__lab b{font-weight:500;white-space:nowrap}
.ue__lab em{font-style:normal;font-size:.74rem;color:var(--stone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ue__row .num{font-family:var(--f-mono);font-size:.8rem}
.ue__row--sw .ue__lab b,.ue__row--sw .num{color:#5C6234}
.ue__lev{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.05em;text-transform:uppercase;color:var(--stone);white-space:nowrap;text-align:right}
.ue__lev::before{content:"\2192\00a0"}
.cdn.hot [data-k]:not(.on){opacity:.35}
.cdn [data-k]{transition:opacity .25s}
.br__row[data-k]{cursor:pointer}
.ue__row.on .ue__lev{color:var(--ink)}
@media (min-width:1000px){.cdn__grid--2{align-items:start}.cdn .cdn__head{max-width:60rem}}
@media (max-width:599px){.ue__row{grid-template-columns:30px minmax(0,1fr) auto}.ue__lev{display:none}.ue__lab em{display:none}.ue__sum{grid-template-columns:1fr}}
/* Moat: every dot opens its company card (Pierre, 28 Oct) */
.mdot{border:0;padding:0;cursor:pointer;transition:background .2s,box-shadow .2s;-webkit-user-select:none;user-select:none}
.matrix{-webkit-user-select:none;user-select:none}   /* quick clicks on the dots were selecting text in the card (Pierre, 2 Nov) */
.mdot:hover,.mdot.on{background:var(--ink)}
.mdot.on:not(.np){box-shadow:0 0 0 4px rgba(33,35,35,.18)}
.mdot.on span{color:var(--ink);font-weight:500}
.moat__claim{margin:0 0 10px;max-width:none;padding:10px 14px;border-radius:12px;background:#E7F3AC;font-size:.88rem;line-height:1.35;color:var(--graphite)}
.moat__claim b{display:block;color:var(--ink);font-weight:500}
.mcard{display:grid;gap:.5rem;padding:14px 16px;border-radius:var(--r);background:var(--sand);align-content:start;overflow:hidden}
.mcard__top{display:flex;flex-wrap:wrap;align-items:center;column-gap:.6rem;row-gap:.3rem}
.mcard__top b{font-size:1.2rem;font-weight:500;letter-spacing:-.02em}
.mcard__c{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--stone)}
.mcard__tags{margin-left:auto;display:flex;align-items:center;gap:.5rem;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.04em;color:var(--stone)}
.mcard__mat{padding:.3em .6em;border-radius:6px;background:rgba(33,35,35,.1);color:var(--ink);font-family:var(--f-sans);font-size:.72rem;letter-spacing:0}
.mcard__mat.is-np{background:#E7F3AC}
.mcard__n{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem 1.2rem;font-family:var(--f-mono);font-size:.78rem}
.mcard__n span{display:inline-flex;align-items:center;gap:.4rem}
.mcard__mt{font-family:var(--f-sans);font-weight:400;font-size:.84rem;letter-spacing:0}   /* the maturity in words reads as text, not code (Pierre, 2 Nov) */
.mcard__n em{font-style:normal;font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;color:var(--stone)}
.mat{width:12px;height:12px;border-radius:50%;border:1.2px solid #556039;background:conic-gradient(#556039 calc((var(--m) + 1) * 90deg),transparent 0)}
.mcard p{margin:0;max-width:none;font-size:.84rem;line-height:1.42;color:var(--graphite)}
.mcard__edge{color:#556039 !important}
.mcard__edge b{margin-right:.5rem;font-family:var(--f-mono);font-size:.56rem;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--stone)}
.mcard--np{box-shadow:inset 0 0 0 2px #C9D27E}
/* the moat slide on one laptop screen: smaller title, the map no taller than the screen allows, a compact card */
@media (min-width:900px){
  html.has-rail #moat{padding-top:56px;padding-bottom:56px}
  #moat .moat h2{font-size:clamp(2.4rem,3.6vw,3.4rem)}
  #moat .moat .muted{font-size:.9rem}
  .moat__map .matrix{width:min(100%,calc(100vh - 150px));margin-left:auto}
  .moat__map .cap{text-align:right}
}

/* Draft preview of the paywall edition (13 Nov): every part its public copy shows blurred, outlined (webapp/paywall_build.py) */
html[data-ed="paywall"] [data-lock]{outline:3px dashed #FF714A;outline-offset:-3px;box-shadow:inset 0 0 0 9999px rgba(255,113,74,.07)}