/* SomaLens · site vitrine. Charte : fond noir pur, texte blanc, Alte Haas, la couleur réservée au spectre en
   huit. Mise en page relevée sur la référence : en-tête fixe (nom, menu, Join, clé, White paper), accueil
   plein écran avec une constellation, grands titres de page soulignés d'un liseré spectral, blocs numérotés,
   sommaire et pied de page. Tout survol s'illumine aux couleurs du spectre. */
@font-face { font-family: "Alte Haas"; src: url("../assets/fonts/AlteHaasGrotesk-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Alte Haas"; src: url("../assets/fonts/AlteHaasGrotesk-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --bg: #000; --fg: #fff; --dim: rgba(255,255,255,.62); --faint: rgba(255,255,255,.18); --hair: rgba(255,255,255,.28);
  --s1: #FF5A5F; --s2: #FF9F1C; --s3: #FFE14D; --s4: #7CFF6B; --s5: #2EE6D6; --s6: #4DA3FF; --s7: #9B7BFF; --s8: #FF6BD6;
  --spectrum: linear-gradient(90deg, var(--s1), var(--s2), var(--s3), var(--s4), var(--s5), var(--s6), var(--s7), var(--s8), var(--s1));
  --bands: linear-gradient(90deg, var(--s1) 0 12.5%, var(--s2) 0 25%, var(--s3) 0 37.5%, var(--s4) 0 50%, var(--s5) 0 62.5%, var(--s6) 0 75%, var(--s7) 0 87.5%, var(--s8) 0);
  --font: "Alte Haas", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wrap: 1152px; --gut: clamp(20px, 3.6vw, 52px);
  --ease: cubic-bezier(.22,.61,.36,1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.5 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { max-width: 100%; }
::selection { background: var(--s7); color: #000; }
:focus-visible { outline: 2px solid var(--s5); outline-offset: 3px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

/* ------------------------------------------------ rainbow on hover */
@keyframes rb-move { to { background-position: 200% 0; } }
.rb { position: relative; text-decoration: none; transition: color .25s var(--ease); }
.rb:hover, .rb:focus-visible, .rb.lit {
  background-image: var(--spectrum); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; animation: rb-move 2.4s linear infinite;
}
.rb::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px; background: var(--spectrum); background-size: 200% 100%; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); animation: rb-move 2.4s linear infinite; }
.rb:hover::after, .rb[aria-current="page"]::after, .rb:focus-visible::after { transform: scaleX(1); }
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid #fff; background: #000; color: #fff; font-size: 13.5px; text-decoration: none; cursor: pointer; isolation: isolate; transition: color .25s var(--ease), border-color .25s var(--ease); white-space: nowrap; }
.btn.solid { background: #fff; color: #000; }
.btn::before { content: ""; position: absolute; inset: -1px; z-index: -1; background: var(--spectrum); background-size: 200% 100%; opacity: 0; transition: opacity .3s var(--ease); animation: rb-move 2.4s linear infinite; }
.btn::after { content: ""; position: absolute; inset: -1px; z-index: -2; background: var(--spectrum); background-size: 200% 100%; filter: blur(12px); opacity: 0; transition: opacity .3s var(--ease); animation: rb-move 2.4s linear infinite; }
.btn:hover, .btn:focus-visible { color: #000; border-color: transparent; }
.btn:hover::before, .btn:focus-visible::before { opacity: 1; }
.btn:hover::after, .btn:focus-visible::after { opacity: .55; }
.btn.big { height: 48px; padding: 0 20px; font-size: 16px; }
.btn svg { width: 15px; height: 15px; }

/* ------------------------------------------------ header */
.top { position: fixed; inset: 0 0 auto; z-index: 50; height: 84px; display: flex; align-items: center; gap: 28px; padding: 0 50px; transition: background .4s var(--ease), opacity .8s var(--ease); }
.top.solid { background: linear-gradient(#000 60%, rgba(0,0,0,0)); }
html.intro .top { opacity: 0; pointer-events: none; }
.wm { position: relative; display: inline-flex; align-items: center; height: 40px; font-size: 26px; letter-spacing: -.02em; text-decoration: none; color: #fff; }
.wm b { font-weight: 700; }
.wm-text { display: inline-flex; }
.wm-text span { display: inline-block; transform-origin: 50% 60%; transition: transform .35s var(--ease), opacity .35s var(--ease); }
.wm-canvas { position: absolute; left: -22px; top: -22px; width: 200px; height: 84px; pointer-events: none; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 20px; font-size: 14px; }
.nav .links { display: flex; gap: 20px; }
.nav .links a { padding: 4px 0; }
.nav .acts { display: flex; gap: 18px; margin-left: 2px; }
.menu-btn { display: none; }
@media (max-width: 1080px) {
  .top { padding: 0 20px; height: 68px; }
  .menu-btn { display: inline-flex; margin-left: auto; }
  .nav { position: fixed; inset: 68px 0 auto; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 20px 24px; background: #000; border-bottom: 1px solid var(--faint); transform: translateY(-12px); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease); }
  .nav.open { opacity: 1; transform: none; pointer-events: auto; }
  .nav .links { flex-direction: column; gap: 0; }
  .nav .links a { padding: 12px 0; border-bottom: 1px solid var(--faint); font-size: 18px; }
  .nav .acts { margin: 16px 0 0; flex-wrap: wrap; }
}

/* ------------------------------------------------ pages */
.page { display: none; }
.page.on { display: block; animation: page-in .5s var(--ease) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
main { min-height: 100vh; }

/* hero */
.hero { position: relative; height: 100vh; min-height: 620px; overflow: hidden; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero h1 { position: absolute; left: 50px; bottom: 15vh; margin: 0; font-size: clamp(64px, 9.2vw, 136px); line-height: .92; letter-spacing: -.035em; font-weight: 700; text-wrap: balance; pointer-events: auto; }
.hero h1 span { display: block; opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.hero.ready h1 span { opacity: 1; transform: none; }
.hero.ready h1 span:nth-child(2) { transition-delay: .12s; }
.hero.ready h1 span:nth-child(3) { transition-delay: .24s; }
.hero h1:hover span, .hero h1.lit span { background-image: var(--spectrum); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rb-move 3s linear infinite; }
.skip { position: absolute; right: 24px; bottom: 22px; z-index: 5; background: none; border: 0; color: var(--dim); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: opacity .6s var(--ease); }
.skip:hover { color: #fff; }
.hero.ready .skip { opacity: 0; pointer-events: none; }
.scroll-dot { position: absolute; right: 52px; top: 52vh; width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.4); }
@media (max-width: 760px) { .hero h1 { left: 20px; bottom: 12vh; } .scroll-dot { display: none; } }

/* statement and columns */
.statement { padding: 70px 0 30px; }
.statement .wrap > p.big { margin: 0 0 16px; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.22; letter-spacing: -.01em; font-weight: 700; max-width: 22em; text-wrap: balance; }
.statement .wrap > p.sub { margin: 0 0 18px; max-width: 38em; color: var(--dim); }
.more-link { display: inline-block; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.more-link.rb { text-decoration: none; border-bottom: 1px solid #fff; }
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 60px; }
.col { border-top: 1px solid #fff; padding-top: 18px; }
.col .n { font-size: 12px; }
.col h3 { margin: 6px 0 8px; font-size: 20px; font-weight: 700; line-height: 1.2; }
.col p { margin: 0; font-size: 15px; color: var(--dim); }
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; gap: 26px; } }

details.read { margin-top: 28px; border-top: 1px solid var(--faint); }
details.read summary { list-style: none; cursor: pointer; padding: 14px 0; font-size: 14px; display: inline-flex; gap: 10px; align-items: center; }
details.read summary::-webkit-details-marker { display: none; }
details.read summary::before { content: "+"; font-size: 18px; line-height: 1; transition: transform .3s var(--ease); }
details.read[open] summary::before { transform: rotate(45deg); }
details.read .body { max-width: 46em; color: var(--dim); padding-bottom: 12px; }
details.read .body p { margin: 0 0 12px; }

/* demo space */
.demo { padding: 60px 0; }
.window { border: 1px solid var(--hair); background: #050505; }
.window .bar { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-bottom: 1px solid var(--faint); font-size: 12px; color: var(--dim); }
.window .bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.22); }
.window .bar span { margin: 0 auto; }
.window .screen { position: relative; height: clamp(320px, 42vw, 560px); display: grid; place-items: center; overflow: hidden; }
.window .screen canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.window .msg { position: relative; text-align: center; display: grid; gap: 14px; justify-items: center; padding: 20px; }
.window .msg .eyebrow { margin: 0; }
.window .msg h3 { margin: 0; font-size: clamp(22px, 2.4vw, 30px); }
.window .msg p { margin: 0; color: var(--dim); max-width: 30em; }

/* sections */
.sec { padding: 80px 0; border-top: 1px solid var(--faint); }
.eyebrow { margin: 0 0 12px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.sec h2 { margin: 0 0 18px; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.06; letter-spacing: -.02em; font-weight: 700; max-width: 18em; text-wrap: balance; }
.sec .lead { max-width: 40em; margin: 0 0 18px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 34px; }
.two > div { border-top: 1px solid #fff; padding-top: 16px; }
.two h3 { margin: 6px 0 12px; font-size: 24px; line-height: 1.15; }
.two p { margin: 0 0 12px; color: var(--dim); font-size: 15.5px; }
.rowline { display: grid; grid-template-columns: 1fr 1.6fr; gap: 40px; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--faint); }
.rowline b { font-size: 17px; }
.rowline p { margin: 0; color: var(--dim); font-size: 15.5px; }
@media (max-width: 860px) { .two, .rowline { grid-template-columns: 1fr; gap: 24px; } }
.pilot { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.pilot .mark { width: 46px; height: 46px; }
.pilot h3 { margin: 0 0 4px; font-size: 20px; }
.pilot p { margin: 0; color: var(--dim); font-size: 14.5px; }

/* FAQ */
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 56px; margin-top: 30px; }
.faq .q { border-top: 1px solid #fff; padding-top: 14px; }
.faq h3 { margin: 0 0 8px; font-size: 19px; line-height: 1.25; }
.faq p { margin: 0 0 6px; color: var(--dim); font-size: 15px; }
.faq details summary { list-style: none; cursor: pointer; font-size: 13.5px; display: inline-flex; gap: 8px; align-items: center; padding: 6px 0; }
.faq details summary::-webkit-details-marker { display: none; }
.faq details summary::before { content: "+"; font-size: 16px; transition: transform .3s var(--ease); }
.faq details[open] summary::before { transform: rotate(45deg); }
.faq details .body { color: var(--dim); font-size: 15px; padding: 4px 0 8px; }
.faq-group { margin-top: 56px; }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } }

/* closing */
.closing { padding: 120px 0 40px; }
.closing h2 { margin: 0; font-size: clamp(56px, 8.8vw, 132px); line-height: .94; letter-spacing: -.035em; font-weight: 700; }
.closing h2 em { font-style: normal; background-image: var(--spectrum); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rb-move 5s linear infinite; }
.joinrow { display: flex; justify-content: space-between; align-items: center; margin-top: 46px; padding: 22px 0; border-top: 1px solid var(--faint); border-bottom: 1px solid var(--faint); }
.joinrow .eyebrow { margin: 0; }
.joinrow a { font-size: clamp(20px, 2vw, 26px); }

/* contents */
.contents { padding: 50px 0 30px; }
.cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; margin-top: 16px; }
.cgrid a { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 0 12px; border-top: 1px solid var(--faint); text-decoration: none; }
.cgrid a b { font-size: 21px; font-weight: 400; }
.cgrid a span { grid-column: 1; font-size: 12.5px; color: var(--dim); }
.cgrid a i { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; color: var(--dim); transition: transform .3s var(--ease); }
.cgrid a:hover i { transform: translateX(4px); color: #fff; }
.cgrid a:hover b { background-image: var(--spectrum); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rb-move 2.4s linear infinite; }
@media (max-width: 760px) { .cgrid { grid-template-columns: 1fr; } }

/* footer */
footer.foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 26px 50px 30px; border-top: 1px solid var(--faint); font-size: 12px; }
footer.foot .mid { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; letter-spacing: -.01em; text-decoration: none; }
footer.foot .mid b { font-weight: 700; }
footer.foot .right { justify-self: end; display: flex; gap: 16px; color: var(--dim); }
footer.foot .right span { color: var(--dim); }
@media (max-width: 760px) { footer.foot { grid-template-columns: 1fr; justify-items: start; padding: 26px 20px; } footer.foot .right { justify-self: start; flex-wrap: wrap; } }

/* inner page head */
.phead { padding: 150px 0 40px; }
.phead h1 { margin: 0 0 22px; font-size: clamp(64px, 9vw, 128px); line-height: .92; letter-spacing: -.035em; font-weight: 700; }
.phead h1 .light { font-weight: 400; }
.phead p { max-width: 34em; margin: 0 0 12px; font-size: 19px; line-height: 1.45; }
.rule { width: 200px; height: 2px; margin-top: 26px; background: var(--spectrum); background-size: 200% 100%; animation: rb-move 6s linear infinite; }

/* plates */
.plate { padding: 70px 0; border-top: 1px solid var(--faint); }
.plate .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 56px; align-items: start; }
.plate.flip .grid > :first-child { order: 2; }
.plate.wide .grid { grid-template-columns: 1fr; }
.plate h2 { margin: 0 0 16px; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.06; letter-spacing: -.02em; font-weight: 700; text-wrap: balance; }
.plate p { margin: 0 0 14px; color: var(--dim); max-width: 36em; }
.plate p.on { color: #fff; }
.plate ul { margin: 0 0 14px; padding-left: 18px; color: var(--dim); }
.plate li { margin-bottom: 6px; }
.protoline { margin: 0 0 18px !important; font-size: 19px; font-style: italic; color: var(--c) !important; }
.dotname { display: inline-flex; align-items: center; gap: 12px; }
.dotname::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.fig { width: 100%; }
.fig svg { display: block; width: 100%; height: auto; }
.fig figcaption { margin-top: 12px; font-size: 13px; color: var(--dim); }
figure { margin: 0; }
@media (max-width: 900px) { .plate .grid { grid-template-columns: 1fr; gap: 28px; } .plate.flip .grid > :first-child { order: 0; } }
.next { display: flex; justify-content: flex-end; padding: 40px 0 70px; }
.next a { display: inline-flex; align-items: baseline; gap: 14px; text-decoration: none; }
.next a span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.next a b { font-size: 26px; }
.motto { padding: 90px 0; border-top: 1px solid var(--faint); text-align: center; }
.motto p { margin: 0 auto; max-width: 22em; font-size: clamp(26px, 3vw, 40px); line-height: 1.2; letter-spacing: -.015em; }

/* interactive network (licence) */
.flow { margin-top: 26px; }
.flow-stage { display: grid; grid-template-columns: 1fr 44px; gap: 14px; }
.flow svg { width: 100%; height: auto; display: block; }
.flow .node rect { fill: #000; stroke: #fff; stroke-width: 1.2; transition: fill .35s var(--ease); }
.flow .node text { fill: #fff; font-size: 12.5px; letter-spacing: 1.1px; transition: fill .35s var(--ease); }
.flow .node.on rect { fill: #fff; }
.flow .node.on text { fill: #000; }
.flow .node.brand text { font-size: 17px; letter-spacing: -.2px; text-transform: none; }
.flow .edge { fill: none; stroke: rgba(255,255,255,.28); stroke-width: 1.2; transition: stroke .35s var(--ease), stroke-width .35s var(--ease); }
.flow .edge.dash { stroke-dasharray: 5 5; }
.flow .edge.on { stroke: #fff; stroke-width: 2; }
.flow .edge.spec.on { stroke: url(#flow-spec); stroke-width: 2.6; }
.flow .pager { display: flex; flex-direction: column; gap: 8px; border-left: 1px solid var(--faint); padding-left: 12px; }
.flow .pager button { width: 22px; height: 22px; border: 0; background: rgba(255,255,255,.08); color: rgba(255,255,255,.45); font-size: 11px; cursor: pointer; padding: 0; transition: background .25s var(--ease), color .25s var(--ease); }
.flow .pager button[aria-selected="true"] { background: var(--c); color: #000; font-weight: 700; }
.flow .pager button.pause { margin-top: 8px; background: none; color: rgba(255,255,255,.45); }
.flow .cap { margin-top: 18px; min-height: 92px; }
.flow .cap h3 { margin: 0 0 6px; font-size: 22px; }
.flow .cap p { margin: 0; color: var(--dim); max-width: 38em; }
.flow .tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.flow .tabs button { height: 32px; padding: 0 12px; border: 1px solid var(--hair); background: #000; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.flow .tabs button[aria-selected="true"] { background: #fff; color: #000; border-color: #fff; }
.flow .legend { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 16px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.flow .legend span { display: inline-flex; align-items: center; gap: 10px; }
.flow .legend i { display: inline-block; width: 30px; height: 0; border-top: 1.5px solid #fff; }
.flow .legend i.d { border-top-style: dashed; }
.flow .legend i.s { height: 2px; border: 0; background: var(--bands); }

/* tables of forms */
.forms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 30px; border-top: 1px solid #fff; }
.forms div { padding: 16px 18px 16px 0; border-right: 1px solid var(--faint); }
.forms div:last-child { border-right: 0; }
.forms b { display: block; margin-bottom: 6px; }
.forms span { font-size: 14px; color: var(--dim); }
@media (max-width: 860px) { .forms { grid-template-columns: 1fr 1fr; } }

/* join form */
.joinform { display: grid; gap: 22px; max-width: 760px; margin-top: 30px; }
.field { display: grid; gap: 8px; }
.field > label, .field > .lab { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
.field input[type=email], .field input[type=text], .field select, .field textarea { width: 100%; background: #000; border: 0; border-bottom: 1px solid var(--hair); padding: 10px 0; font-size: 17px; border-radius: 0; transition: border-color .25s var(--ease); }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.field textarea { min-height: 90px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: #fff; }
.field .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid var(--hair); font-size: 13px; cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.chip input:checked + span { background: #fff; color: #000; border-color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--s5); outline-offset: 2px; }
.consent { display: grid; grid-template-columns: 20px 1fr; gap: 12px; font-size: 13.5px; color: var(--dim); align-items: start; }
.consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: #fff; }
.formmsg { min-height: 24px; font-size: 15px; }
.formmsg.ok { color: var(--s4); }
.formmsg.err { color: var(--s1); }
@media (max-width: 640px) { .field .row2 { grid-template-columns: 1fr; } }

/* key and white paper */
.panel { max-width: 520px; margin-top: 30px; padding: 26px; border: 1px solid var(--hair); display: grid; gap: 18px; }
.panel input[disabled] { opacity: .5; }
.paper { display: grid; grid-template-columns: 300px 1fr; gap: 46px; align-items: center; margin-top: 30px; }
.paper .cover { aspect-ratio: 210 / 297; border: 1px solid var(--hair); position: relative; overflow: hidden; background: #000; }
.paper .cover canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.paper .cover .t { position: absolute; left: 22px; right: 22px; top: 44%; font-size: 13px; }
.paper .cover .t b { display: block; font-size: 26px; letter-spacing: -.02em; margin: 6px 0 4px; }
@media (max-width: 760px) { .paper { grid-template-columns: 1fr; } .paper .cover { max-width: 280px; } }

/* legal */
.legal { max-width: 46em; }
.legal h2 { font-size: 22px; margin: 34px 0 10px; }
.legal p, .legal li { color: var(--dim); font-size: 15.5px; }
.legal .todo { color: var(--s2); }

/* reveal on scroll */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1; transform: none; }
  .hero h1 span { opacity: 1; transform: none; }
}

/* touch screens: no sticky hover */
@media (hover: none) {
  .btn:hover { color: #fff; border-color: #fff; }
  .btn.solid:hover { color: #000; }
  .btn:hover::before, .btn:hover::after { opacity: 0; }
  .rb:hover { background-image: none; color: inherit; animation: none; }
  .rb:hover::after { transform: scaleX(0); }
  .rb[aria-current="page"]::after { transform: scaleX(1); }
}
/* the stepped network scrolls sideways on small screens */
@media (max-width: 760px) {
  .flow-stage { grid-template-columns: 1fr; }
  .flow-stage svg { min-width: 680px; }
  .flow-stage { overflow-x: auto; }
  .flow .pager { flex-direction: row; border-left: 0; padding-left: 0; }
}