/* chapter: the shape every product chapter shares (.ch, .ch-head, .ch-eyebrow, .ch-title, .ch-lede, .ch-open, .ch-steps,
   .ch-facts), the tag that grades a number (.tag[data-grade]) and the divider between the three engines (.eng).
   Builder A's (CONTRACT.md). A chapter is written as
     <section class="ch" id="ch-<slug>" data-engine="amazing|b2b|b2c">
       <header class="ch-head" [data-size="m|l"]>                     (the title card, below)
         <p class="ch-eyebrow">B2B</p>                                 the engine; chapter.js puts the rule and "04 / 10" on it
         [<div class="ch-name"><img class="ch-icon" src="..." alt="" width="384" height="384"><h2 ...></h2></div>]   an app's icon beside its name
         <h2 class="ch-title" id="...">Milan</h2>                      the product's name, split into masks by chapter.js
         <p class="ch-hook">124,153 tenders read, only the ones you can <em>win</em> shown. <span class="tag" data-grade="ours">...</span></p>
         <p class="ch-lede">one line of what it is</p>
         [<p class="ch-link"><svg>the turning mark</svg><span>Runs on Atlas. <b>Planned:</b> ...</span></p>]   what it shares with the others
       </header>
       <div class="ch-open">the opening clip</div>
       <div class="ch-steps">two or three steps</div>
       <ul class="ch-facts"><li><b>3,820</b> requests in <span class="tag" data-grade="ours">ours, counted 2026-07-27</span></li></ul>
     </section>
   Everything inside a chapter is styled by its own builder under #ch-<slug> or .<slug>-*. Needs ../base/base.css. */

/* ---------- the chapter ---------- */
.ch{position:relative;padding-block:clamp(72px,8vw,128px) 0;color:var(--ink);scroll-margin-top:calc(var(--barra-h) + 8px)}
/* ---------- the title card that opens every chapter (Tommi, 2026-10-02: "it is not at all clear when you pass from one application
   to the next"). About a screen tall, not sticky, lighter than the engine divider: a hairline that draws across with the index and the
   engine on it, the product's NAME huge and rising word by word out of masks (the divider's pattern), the HOOK in display type, then the
   lede. chapter.js numbers the cards from the DOM, splits the name, and hands each piece to the kit's two-line reveal (rule 2). ---------- */
:root{--ast:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 3v18M4.2 7.5l15.6 9M4.2 16.5l15.6-9'/%3E%3C/svg%3E")}
.ch-head{--nm:min(15vw,27vh);--nm:min(15vw,27svh);width:min(var(--largo),100% - 2 * var(--gutter));min-height:min(84vh,100vh - 150px);min-height:min(84svh,100svh - 150px);margin-inline:auto;padding-bottom:clamp(8px,2vh,28px);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(clamp(28px,7vh,96px),1fr) auto auto auto auto;row-gap:clamp(16px,2.4vh,30px)}
.ch-head[data-size="m"]{--nm:min(11.6vw,22vh);--nm:min(11.6vw,22svh)}
.ch-head[data-size="l"]{--nm:min(8.6vw,17vh);--nm:min(8.6vw,17svh)}
/* the top line: a hairline across the content width, the index on its left and the engine on its right (small capitals, tabular) */
.ch-eyebrow{grid-row:1;position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-top:calc(16 * var(--px));font-size:calc(14 * var(--px));font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ch-n{font-variant-numeric:tabular-nums;color:var(--ink-2)}
.ch-g{text-align:right}
.ch-rule{position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink-3);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.7s var(--e-esce)}
.ch-rule.vis{transform:none}
/* the product's name: the display, as big as it will go; an app's icon sits beside it */
.ch-name{grid-row:3;display:flex;align-items:center;gap:calc(var(--nm) * .16)}
.ch-title{margin:0;min-width:0;font-family:var(--serif);font-weight:300;font-size:var(--nm);line-height:.9;letter-spacing:-.06em;text-wrap:balance}
.ch-head[data-size="l"] .ch-title{line-height:.94;letter-spacing:-.05em}
.ch-icon{flex:none;width:calc(var(--nm) * .74);height:calc(var(--nm) * .74);border-radius:22.37%;object-fit:cover;outline:1px solid oklch(100% 0 0/.16);outline-offset:-1px;box-shadow:inset 0 0 0 1px oklch(100% 0 0/.14),0 calc(var(--nm) * .08) calc(var(--nm) * .22) calc(var(--nm) * -.08) oklch(0% 0 0/.55)}
/* the same masks as the engine divider's name (.eng-t), which rise when the name's reveal line is crossed (.vis, the kit's) */
.ch-title .w{display:inline-block;overflow:clip;vertical-align:top;padding:.1em .06em .2em;margin:-.1em -.06em -.2em}
.ch-title .w>span{display:inline-block;transform:translateY(112%);transition:transform 1.5s var(--e-esce) calc(.12s + var(--i,0) * .09s)}
.ch-title.vis .w>span{transform:none}
/* the name is not a block that fades: only its words move, so the kit's .rv fade and rise are switched off on it and on the rule */
.ch-head :is(.ch-title,.ch-rule):is(.rv,.vis,.via){opacity:1;animation:none;filter:none}
/* the hook: one sentence in display type, its accent word in the script (as the titles') */
.ch-hook{grid-row:4;margin:0;max-width:22em;font-family:var(--serif);font-weight:300;font-size:calc(46 * var(--px));line-height:1.1;letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.ch-hook em,.ch-lede em{font-style:normal}
.ch-hook em{font-family:var(--accent);font-weight:400;text-transform:uppercase;letter-spacing:.01em;font-size:1.04em;line-height:.9}
.ch-hook .tag{margin:0 .12em 0 .1em;transform:translateY(-.14em);letter-spacing:-.003em}
.ch-lede{grid-row:5;margin:0;font-size:var(--t-lead);line-height:1.32;letter-spacing:-.014em;color:var(--ink-2);max-width:34ch;text-wrap:pretty}
.ch-lede em{color:var(--ink)}
/* the flywheel, repeated in every chapter (Tommi, 2026-10-02: the thesis "dovrebbe capirsi fin dall'inizio, ripetersi e poi
   terminare"): one small line under the card, what this product shares with the others, a turning mark before it. What is not
   done yet says so in its first word (<b>Next:</b>, <b>Planned:</b>, <b>Idea:</b>); no tag, since there is no number */
.ch-link{grid-row:6;display:flex;align-items:flex-start;gap:12px;margin:0;padding-top:16px;border-top:1px solid var(--riga);max-width:72ch;font-size:var(--t-corpo);line-height:1.42;letter-spacing:-.01em;color:var(--ink-2);text-wrap:pretty}
.ch-link svg{flex:none;width:calc(18 * var(--px));height:calc(18 * var(--px));margin-top:.14em;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ch-link b{font-weight:500;color:var(--ink)}
/* the product, one click away: its live site, or its App Store page (Tommi, 2026-10-03: "put something that obv gets the
   site one click away"). A white pill under the hook; the address in small type beside the words */
.ch-site{grid-row:6;justify-self:start;display:inline-flex;align-items:center;gap:10px;margin-top:clamp(14px,2.4vh,28px);min-height:50px;padding:0 20px 0 24px;border-radius:999px;background:oklch(100% 0 0);color:oklch(0% 0 0);font-size:calc(16.5 * var(--px));font-weight:500;letter-spacing:-.01em;white-space:nowrap;text-decoration:none;transition:transform .5s var(--e-molla)}
.ch-site small{font-size:.86em;font-weight:400;color:oklch(0% 0 0/.5)}
.ch-site svg{flex:none;width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ch-site:hover{transform:translateY(-2px)}
.ch-site:active{transform:scale(.97);transition-duration:.12s}
@media (min-width:900px){
  .ch-head{grid-template-columns:minmax(0,7fr) minmax(0,4fr);grid-template-rows:auto minmax(clamp(28px,7vh,96px),1fr) auto auto auto;column-gap:clamp(32px,6vw,96px)}
  .ch-eyebrow,.ch-name,.ch-link{grid-column:1/-1}
  .ch-link{grid-row:5;margin-top:clamp(4px,1vh,14px)}
  .ch-hook{grid-column:1;grid-row:4}
  .ch-lede{grid-column:2;grid-row:4;align-self:end;padding-bottom:.5em}
  .ch-site{grid-column:1;grid-row:5}
}
@media (max-width:899px){
  .ch-head{--nm:19vw}
  .ch-head[data-size="m"]{--nm:15vw}
  .ch-head[data-size="l"]{--nm:11.2vw}
  .ch-hook{font-size:clamp(25px,6.9vw,36px);line-height:1.12}
  .ch-eyebrow{font-size:12.5px}
  .ch-site{font-size:15px;min-height:46px}
  .ch-site small{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ch-rule{transform:none;transition:none}
  .ch-title .w>span{transform:none;transition:none}
}
/* the opening clip: a film or a wide frame, as wide as the page allows */
.ch-open{width:min(1280px,100% - 2 * var(--gutter));margin:clamp(48px,6vw,88px) auto 0}
.ch-open>.cl-frame,.ch-open>.cl-film{width:100%}
/* two or three steps, each a clip beside a list of three (the kit's .cl-sec) or any block of its own */
.ch-steps{display:grid;gap:clamp(72px,9vw,150px);margin-top:clamp(96px,11vw,176px)}
.ch-steps>.cl-sec{padding-top:0}
.ch-step{width:min(var(--largo),100% - 2 * var(--gutter));margin-inline:auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:center}
.ch-step.inv{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.ch-step.inv>:first-child{order:2}
@media (max-width:899px){.ch-step,.ch-step.inv{grid-template-columns:minmax(0,1fr);gap:28px}.ch-step.inv>:first-child{order:0}}
/* the numbers, each with its grade: a hairline over it, the number big, the sentence, the tag */
.ch-facts{list-style:none;padding:0;width:min(var(--largo),100% - 2 * var(--gutter));margin:clamp(88px,10vw,150px) auto 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:36px clamp(20px,3vw,44px)}
.ch-facts li{display:grid;align-content:start;justify-items:start;gap:12px;padding-top:20px;border-top:1px solid var(--riga-2);font-size:var(--t-lista);line-height:1.35;letter-spacing:-.01em;color:var(--ink-2);text-wrap:pretty}
.ch-facts :is(b,strong,.num){font-family:var(--serif);font-weight:300;font-size:clamp(38px,4.2vw,64px);line-height:1;letter-spacing:var(--track);color:var(--ink);display:block}
.ch-facts .tag{margin-top:4px}
/* a chapter ends with room, the next one begins with its own */
.ch+.ch,.ch+.eng{margin-top:0}

/* ---------- the tag that grades a number: a pale pill and a solid dot, the only colour on the site (the guide's) ----------
   data-grade: ours (counted by us, with its date), target (decided, not reached), claim (Tommi's word), observed (read
   from outside), pending (waiting for a yes); no grade is neutral grey. Authors write the grade and its date as the text. */
.tag{--th:260;--tn:0;display:inline-flex;align-items:center;gap:calc(7 * var(--px));height:calc(26 * var(--px));padding:0 calc(11 * var(--px)) 0 calc(9 * var(--px));border-radius:999px;background:oklch(76% calc(.14 * var(--tn)) var(--th)/.17);color:oklch(86% calc(.1 * var(--tn)) var(--th));font-family:var(--font);font-size:calc(12.5 * var(--px));font-weight:500;line-height:1;letter-spacing:-.003em;white-space:nowrap;vertical-align:middle}
.tag::before{content:"";flex:none;width:calc(7 * var(--px));height:calc(7 * var(--px));border-radius:50%;background:oklch(74% calc(.17 * var(--tn)) var(--th))}
.tag:not([data-grade])::before,.tag[data-grade="neutral"]::before{background:oklch(100% 0 0/.55)}
.tag[data-grade="ours"]{--th:155;--tn:1}
.tag[data-grade="target"]{--th:250;--tn:1}
.tag[data-grade="claim"]{--th:305;--tn:1}
.tag[data-grade="observed"]{--th:215;--tn:1}
.tag[data-grade="pending"]{--th:70;--tn:1}
.giorno .tag{background:oklch(60% calc(.14 * var(--tn)) var(--th)/.15);color:oklch(36% calc(.12 * var(--tn)) var(--th))}
.giorno .tag::before{background:oklch(58% calc(.17 * var(--tn)) var(--th))}
.giorno .tag:not([data-grade])::before{background:oklch(0% 0 0/.4)}

/* ---------- the divider between the engines: a whole screen, the name of the engine as big as it will go, its one line.
   Three of them, Amazing Companies, B2B, B2C; the same list of the three on each, the one it opens lit. It plays when it
   comes into the middle of the screen (chapter.js adds .on) and holds for a stretch of scroll. ---------- */
.eng{position:relative;isolation:isolate;height:210vh;height:210svh;margin-top:0;color:var(--ink);overflow:clip}   /* no room above: the gap showed as a black band before the glass (Tommi, 2026-10-05) */   /* clip: the sticky glass (a screen tall, its margin -1 screen) otherwise hangs a screen past the divider, over the section after it */
/* the glass is the whole engine's, not the divider's alone: it stays on the screen behind the row of cards that follows, round its
   container (Tommi, 2026-10-05: "not with a black background but continuing the background of the thing in the title") */
.eng-group{position:relative;isolation:isolate;overflow:clip}   /* clip: the sticky glass (margin -1 screen) could otherwise hang a whole screen past its engine, a second translucent glass over the next divider (Tommi, 2026-10-05) */
.eng-group>.glass-field,.eng>.glass-field{position:sticky;top:0;display:block;width:100%;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;opacity:.36;z-index:-1}
.eng-stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-rows:auto 1fr auto;padding:calc(var(--barra-h) + 28px) var(--gutter) clamp(36px,6vh,72px);overflow:hidden;overflow:clip}
/* the list of the three engines over each divider: off the home since 2026-10-05 ("its repetitive"), kept for a page that wants it */
.eng-list{list-style:none;margin:0 auto;padding:0;width:min(var(--largo),100%);display:flex;gap:clamp(18px,3vw,44px);font-size:calc(14 * var(--px));font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--spento);transition:opacity .8s var(--e-ui)}
.eng-list li{display:flex;align-items:center;gap:10px;transition:color .6s var(--e-ui)}
.eng-list li i{font-style:normal;font-variant-numeric:tabular-nums;opacity:.7}
.eng-list li.on{color:var(--ink)}
.eng-main{grid-row:2;display:grid;align-content:center;justify-items:start;width:min(var(--largo),100%);margin-inline:auto;gap:clamp(18px,3vh,36px)}
.eng-t{font-family:var(--serif);font-weight:300;font-size:var(--eng-size,11vw);line-height:.9;letter-spacing:-.06em;transform:scale(calc(1 + var(--p,0) * .05));transform-origin:0 60%;will-change:transform}
.eng[data-engine="amazing"]{--eng-size:min(10.6vw,17vh*2.3);--ink:.008em}
/* the big name starts where its line starts: pulled left by its first letter's own side bearing, which at this size is
   42px for the B of B2B and B2C (measured with measureText's actualBoundingBoxLeft; Tommi, 2026-10-05: "properly align the title
   with the description") */
.eng-t{margin-left:calc(-1 * var(--ink,0em))}
.eng[data-engine="b2b"],.eng[data-engine="b2c"]{--eng-size:min(30vw,52vh);--ink:.097em}
/* the words rise out of their masks, one after the other, when it plays */
.eng-t .w{display:inline-block;overflow:clip;vertical-align:top;padding:.1em .06em .2em;margin:-.1em -.06em -.2em}
.eng-t .w>span{display:inline-block;transform:translateY(112%);transition:transform 1.5s var(--e-esce) calc(var(--i,0) * .09s)}
.eng.on .eng-t .w>span{transform:none}
.eng-line{max-width:34ch;font-size:calc(26 * var(--px));line-height:1.22;letter-spacing:-.025em;font-family:var(--serif);font-weight:300;color:var(--ink-2);text-wrap:balance;opacity:0;transform:translateY(24px);transition:opacity 1.1s var(--e-esce) .55s,transform 1.4s var(--e-esce) .55s .55s}
.eng.on .eng-line{opacity:1;transform:none}
.eng-foot{grid-row:3;width:min(var(--largo),100%);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:calc(13 * var(--px));letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);opacity:0;transition:opacity 1s var(--e-ui) 1s}
.eng.on .eng-foot{opacity:1}
.eng-foot svg{width:calc(16 * var(--px));height:calc(16 * var(--px));fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;animation:eng-nudge 2.2s var(--e-esce) infinite paused}
.eng.on .eng-foot svg{animation-play-state:running}   /* it only nudges while its divider is the one on screen */
@keyframes eng-nudge{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(5px)}}
@media (max-width:899px){
  .eng-list{font-size:calc(12.5 * var(--px))}
  .eng[data-engine="amazing"]{--eng-size:13.4vw}
  .eng[data-engine="b2b"],.eng[data-engine="b2c"]{--eng-size:42vw}
  .eng-line{font-size:clamp(20px,5.6vw,26px)}
}
@media (prefers-reduced-motion:reduce){
  .eng{height:auto;min-height:100svh}
  .eng-stage{position:relative;height:auto;min-height:100svh}
  .eng>.glass-field,.eng-group>.glass-field{position:absolute;margin:0;height:100%}
  .eng-t .w>span{transform:none;transition:none}
  .eng-line,.eng-foot{opacity:1;transform:none;filter:none;transition:none}
  .eng-t{transform:none}
  .eng-foot svg{animation:none}
}

/* ---------- the chapters' tabs: three groups (Amazing Companies, B2B, B2C), the one you are in open to its chapters (each lit as it
   comes), the other two closed to a name and a count that links to the engine's divider; it docks into the bar (base.js, data-dock)
   as the page reaches it (Tommi, 2026-10-02: the ten equal tabs with the engine as a grey subtitle did not read as sections).
   chapter.js puts .open on the group the scroll is in; opening and closing are springs (width, opacity, the labels sliding in
   one after the other), never a jump of the bar's own size ---------- */
.ch-tabs{--mola-tab:cubic-bezier(.34,1.56,.64,1);position:sticky;top:var(--barra-h);z-index:50;margin-top:0;background:oklch(0% 0 0/.92)}   /* tinted deep, no frosted glass (landing-kit rule 3) */
/* a spring, k 160 and c 16 (the kit's range), as a CSS easing; the bezier above stands in where linear() is not known */
@supports (transition-timing-function:linear(0,1)){.ch-tabs{--mola-tab:linear(0,.071,.233,.43,.621,.783,.908,.994,1.046,1.071,1.077,1.07,1.057,1.042,1.027,1.015,1.006,1,.996,.994,.994,.995,.996,.997,1)}}
.ch-tabs>ol{list-style:none;margin:0 auto;padding:0;width:min(var(--largo),100% - 2 * var(--gutter));display:flex;align-items:stretch;justify-content:space-between;gap:20px;overflow-x:auto;scrollbar-width:none}
.ch-tabs>ol::-webkit-scrollbar{display:none}
.ch-tabs .grp{position:relative;flex:none;display:flex;align-items:stretch}
/* the clear line between groups: a hairline at the start of the second and third */
.ch-tabs .grp+.grp{padding-left:clamp(16px,1.8vw,26px)}
.ch-tabs .grp+.grp::before{content:"";position:absolute;left:0;top:26%;bottom:26%;width:1px;background:var(--riga-2)}
/* the group's name: its label when open, the whole closed group when not (a link to the engine's divider) */
.ch-tabs .gh{display:flex;align-items:center;padding:15px 0 11px;font-size:calc(12 * var(--px));font-weight:500;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;color:var(--ink-3);transition:color .3s var(--e-ui),padding-right .6s var(--mola-tab)}
.ch-tabs .gc{display:inline-block;max-width:3em;overflow:hidden;opacity:1;letter-spacing:.04em;transition:max-width .6s var(--mola-tab),opacity .3s var(--e-ui)}
.ch-tabs .grp.open .gh{color:var(--ink);padding-right:calc(22 * var(--px))}
.ch-tabs .grp.open .gc{max-width:0;opacity:0}
@media (hover:hover){.ch-tabs .grp:not(.open) .gh:hover{color:var(--ink)}}
/* its chapters: the width goes 0 to its own on a spring (a grid column from 0fr to 1fr), the tabs slide in one after the other */
.ch-tabs .gt{display:grid;grid-template-columns:0fr;visibility:hidden;transition:grid-template-columns .65s var(--mola-tab),visibility 0s .65s}
.ch-tabs .gt>ol{list-style:none;margin:0;padding:0;min-width:0;overflow:hidden;display:flex;gap:calc(26 * var(--px))}
.ch-tabs .grp.open .gt{grid-template-columns:1fr;visibility:visible;transition-delay:0s}
.ch-tabs .gt li{display:grid;flex:none;opacity:0;transform:translateX(-14px);transition:opacity .25s var(--e-ui),transform .3s var(--e-ui)}
.ch-tabs .grp.open .gt li{opacity:1;transform:none;transition:opacity .4s var(--e-ui) calc(var(--i, 0) * 55ms + 80ms),transform .7s var(--mola-tab) calc(var(--i, 0) * 55ms + 80ms)}
.ch-tabs .gt li:nth-child(2){--i:1}.ch-tabs .gt li:nth-child(3){--i:2}.ch-tabs .gt li:nth-child(4){--i:3}
.ch-tabs .gt a{position:relative;display:grid;align-content:start;padding:14px 0 12px;font-size:calc(13 * var(--px));line-height:1.25;color:var(--ink-3);transition:color .3s var(--e-ui)}
.ch-tabs .gt a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--riga-2);transition:background-color .3s var(--e-ui)}
.ch-tabs .gt a b{display:flex;align-items:center;gap:7px;font-weight:500;color:var(--ink-2);transition:color .3s var(--e-ui);white-space:nowrap}
.ch-tabs .gt a b span{display:grid;place-items:center;flex:none;width:calc(18 * var(--px));height:calc(18 * var(--px));border-radius:50%;box-shadow:inset 0 0 0 1.3px currentColor;font-size:calc(10.5 * var(--px))}
.ch-tabs .gt a.on b{color:var(--ink)}
.ch-tabs .gt a.on::after{background:var(--ink)}
@media (hover:hover){.ch-tabs .gt a:not(.on):hover b{color:var(--ink)}}
/* the bar's own links say the same: the engine whose group is open is white (chapter.js sets .on) */
.barra nav a[data-voce].on{color:var(--ink)}
@media (max-width:899px){.ch-tabs>ol,.barra .bar-tabs.ch-tabs>ol{gap:16px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent)}.barra .bar-tabs.ch-tabs>ol{padding:0}.ch-tabs .grp:first-child{padding-left:14px}.ch-tabs .grp:last-child{padding-right:14px}.ch-tabs .grp+.grp{padding-left:16px}.ch-tabs .gh{font-size:calc(11 * var(--px));letter-spacing:.07em}.ch-tabs .gt>ol{gap:20px}}
@media (prefers-reduced-motion:reduce){.ch-tabs .gh,.ch-tabs .gc,.ch-tabs .gt,.ch-tabs .gt li,.ch-tabs .grp.open .gt li,.ch-tabs .gt a,.ch-tabs .gt a b,.ch-tabs .gt a::after{transition:none!important}}

/* the Amazing Companies cases, under the divider: one company grown, then two sectors opened (src/index.html #cases) */
.cs{padding:clamp(64px,10vh,120px) 0 clamp(40px,6vh,80px)}
.cs-t{margin:0 0 clamp(20px,3vh,32px);font-family:var(--serif);font-weight:300;font-size:calc(36 * var(--px));line-height:1.08;letter-spacing:-.03em;color:var(--ink)}
.cs-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
.cs-card{display:flex;flex-direction:column;align-items:flex-start;gap:calc(12 * var(--px));padding:calc(24 * var(--px));border-top:1px solid var(--ink-3)}
.cs-k{display:flex;gap:10px;margin:0;font-size:calc(13 * var(--px));font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.cs-k span{font-variant-numeric:tabular-nums;color:var(--ink-2)}
.cs-n{margin:0;font-family:var(--serif);font-weight:300;font-size:calc(30 * var(--px));line-height:1.1;letter-spacing:-.03em;color:var(--ink-2)}
.cs-n b{font-weight:300;color:var(--ink)}
.cs-d{margin:0;max-width:30ch;font-size:var(--t-corpo);line-height:1.42;color:var(--ink-2)}
.cs-wide{margin:0 0 clamp(28px,5vh,56px);border-radius:calc(14 * var(--px));overflow:hidden;aspect-ratio:21/9;background:var(--fondo-2,oklch(16% 0 0))}
.cs-wide img,.cs-img{display:block;width:100%;height:100%;object-fit:cover}
.cs-img{height:auto;aspect-ratio:3/2;margin-bottom:calc(6 * var(--px));border-radius:calc(10 * var(--px))}
.cs-card{padding-top:calc(18 * var(--px))}
.cs-note{margin:clamp(20px,3vh,32px) 0 0;font-size:var(--t-nota);color:var(--ink-3)}
@media (max-width:899px){
  .cs-wide{aspect-ratio:3/2}
  .cs-list{grid-template-columns:1fr}
  .cs-t{font-size:26px}
  .cs-n{font-size:26px}
}