/* ScaleNet v20 (2026-10-13). The mark is now S and N from one shape: Ligne is the S; Ligne turned over its own
   diagonal is the N. The name is written ScaleNet, in two voices. This sheet sizes the mark beside the name, holds the
   opening's stage, and draws two new parts: the three figures, and the founders with their film on the page paid ads
   lead to. It is loaded after the page's other sheets.
   The house's law holds here: no block with a coloured edge down one side, no rim round a block or a chip, no outlined
   card; a state is a wash, a dot, a word, weight. The only lines are links between two things. */

/* the mark beside the name */
.brand img.bm20,.site-header .brand img.bm20,.site-footer .brand img.bm20{display:block;flex:none;width:auto;height:44px}
.site-header.is-scrolled .brand img.bm20{height:40px}
.site-footer .brand img.bm20{height:42px}
.start15-top .brand img.bm20{height:40px}
@media(max-width:820px){.brand img.bm20,.site-header .brand img.bm20,.site-header.is-scrolled .brand img.bm20,.site-footer .brand img.bm20,.start15-top .brand img.bm20{height:30px}}
/* the name in two voices: Scale, then Net in the colour of the links */
.bn20 b{font-weight:inherit;color:#84aeff}
.brand img.bm20[src$="paper.svg"]+.bn20 b{color:#295cff}
.start15-done>img.done20{width:auto;height:46px}
.initial-mark.im20s{width:auto;height:52px}
.hero>img.hero20{width:auto;height:170px}
@media(max-width:900px){.hero>img.hero20{width:auto;height:112px;order:-1}}
@media(max-width:600px){.hero>img.hero20{width:auto;height:84px}}
.contact-pattern img{width:100%;height:auto}

/* the opening: its stage. The mark is drawn and moved by opening-v20.js */
/* as wide as 560 px on a desktop, never more than 44% of the window's height (640:340 is the drawing's shape), never wider than a phone allows */
.opening .intro-path.sn20p{width:min(560px,86vw,82.8vh)!important;height:auto!important;aspect-ratio:640/340;margin:0 auto 16px!important}
.sn20-open{display:block;width:100%;height:100%;overflow:visible}

/* ---- the three figures ---- */
.ach20{padding-block:104px 112px;border-top:1px solid #4562892e;position:relative;overflow:hidden}
.ach20 .eyebrow{margin:0 0 40px}
.ach20-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4.4vw,72px);align-items:end}
.ach20-one{min-width:0}
.ach20-art{display:block;width:min(100%,290px);height:auto;margin:0 0 26px;overflow:visible}
.ach20-n{margin:0;display:flex;align-items:baseline;direction:ltr;white-space:nowrap;font-size:clamp(60px,7.6vw,116px);line-height:.92;letter-spacing:-.06em;font-weight:500;color:#f2f2ed;font-variant-numeric:tabular-nums}
html[dir=rtl] .ach20-n{justify-content:flex-end}
.ach20-n .plus{color:#84aeff;font-weight:400;margin-right:.03em}
.ach20-n .unit{font-size:.4em;letter-spacing:-.02em;color:#84aeff;margin-left:.14em}
.ach20-n b{font-weight:inherit}
.ach20-l{margin:16px 0 0;max-width:310px;font-size:17.5px;line-height:1.5;color:#a9b6d1}
.ach20.start20{padding-block:84px 92px}
@media(max-width:860px){
  .ach20{padding-block:72px 80px}
  .ach20-grid{grid-template-columns:minmax(0,1fr);gap:46px}
  .ach20-one{display:grid;grid-template-columns:minmax(0,1fr) 128px;column-gap:20px;align-items:center}
  .ach20-art{grid-column:2;grid-row:1/3;width:128px;margin:0}
  .ach20-n{grid-column:1;font-size:clamp(56px,17vw,84px)}
  .ach20-l{grid-column:1;margin-top:10px;font-size:16px}
}

/* ---- the founders, and their film (the page paid ads lead to) ---- */
.sf20{position:relative;padding-block:96px 104px;border-top:1px solid #4562892e;overflow:hidden}
.sf20::before{content:"";position:absolute;inset:0;background:radial-gradient(44% 58% at 80% 56%,#295cff30,transparent 72%);pointer-events:none}
html[dir=rtl] .sf20::before{background:radial-gradient(44% 58% at 20% 56%,#295cff30,transparent 72%)}
.sf20-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);grid-template-areas:"intro film" "people film";gap:46px clamp(30px,5vw,84px);align-items:start}
.sf20-intro{grid-area:intro}
.sf20-people{grid-area:people;display:grid;gap:36px}
.sf20-film{grid-area:film;margin:0;justify-self:center;align-self:center}
.sf20-intro .eyebrow{margin:0 0 20px}
.sf20-intro h2{margin:0 0 22px;max-width:640px;font-size:clamp(34px,4.3vw,60px);line-height:1.06;letter-spacing:-.05em;font-weight:500}
.sf20-intro .lead{margin:0;max-width:580px}
.sf20-person{position:relative;display:grid;grid-template-columns:112px minmax(0,1fr);gap:24px;align-items:center}
.sf20-face{position:relative;z-index:1;display:block;width:112px;height:112px;border-radius:50%;object-fit:cover}
/* the two founders are two nodes of one net: a link joins them */
.sf20-person+.sf20-person::before{content:"";position:absolute;inset-inline-start:55px;top:-36px;width:2px;height:36px;background:#84aeff73}
.sf20-person .eyebrow{margin:0 0 7px;color:#7fa0ff}
.sf20-person h3{margin:0 0 7px;font-size:25px;line-height:1.2;letter-spacing:-.03em;font-weight:500}
.sf20-person div>p:last-child{margin:0;max-width:450px;font-size:15.5px;line-height:1.6;color:#a9b6d1}
.sf20-screen{position:relative;width:min(100%,320px);aspect-ratio:9/16;border-radius:26px;overflow:hidden;background:#0c1630;box-shadow:0 40px 90px #02061acc}
.sf20-screen video{display:block;width:100%;height:100%;object-fit:cover}
.sf20-play{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:0;border:0;background:linear-gradient(180deg,#070c2000 52%,#070c20a6);cursor:pointer}
.sf20-play[hidden]{display:none}
.sf20-play i{display:grid;place-items:center;width:86px;height:86px;border-radius:50%;background:#295cff;box-shadow:0 18px 46px #295cff8c;transition:transform .25s}
.sf20-play i::before{content:"";margin-left:7px;border-style:solid;border-width:15px 0 15px 25px;border-color:transparent transparent transparent #fff}
.sf20-play:hover i{transform:scale(1.07)}
.sf20-play:focus-visible{outline:2px solid #9db8ff;outline-offset:-8px;border-radius:26px}
.sf20-word{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.sf20-time{position:absolute;right:14px;bottom:14px;padding:6px 11px;border-radius:999px;background:#070c20b8;color:#fff;font:600 12.5px/1 Arial,Helvetica,sans-serif;letter-spacing:.04em;pointer-events:none}
.sf20-play[hidden]+.sf20-time{display:none}
.sf20-film figcaption{display:grid;gap:5px;justify-items:center;margin-top:18px;text-align:center}
.sf20-film figcaption .eyebrow{margin:0}
.sf20-cap{color:#7184a4}
@media(max-width:940px){
  .sf20{padding-block:70px 78px}
  .sf20-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "people" "film";gap:36px}
  .sf20-screen{width:min(78vw,300px)}
  .sf20::before{background:radial-gradient(70% 34% at 50% 84%,#295cff30,transparent 72%)}
  html[dir=rtl] .sf20::before{background:radial-gradient(70% 34% at 50% 84%,#295cff30,transparent 72%)}
}
@media(max-width:520px){
  .sf20-person{grid-template-columns:84px minmax(0,1fr);gap:16px}
  .sf20-face{width:84px;height:84px}
  .sf20-person+.sf20-person::before{inset-inline-start:41px}
  .sf20-person h3{font-size:21px}
}
@media(prefers-reduced-motion:reduce){.sf20-play i{transition:none}}