/* Nuit et or: the identity of the hero-maille study carried onto the live page.
   The live tokens keep their names (--abyss, --deep, --ink...); only their values change, and the hero gets its own set (--bg, --fg, --teal, --gold). */
.identity-abyss {
  --abyss: #05070c; --deep: #0a0e16; --tide: #111723; --rim: #1e2632; --line: #1e2632;
  --ink: #eef5f7; --ink-2: #c3ccd2; --mute: #8f9aa4;
  --glow: #2ee6c8; --glow-2: #8ff3e2; --glow-soft: rgba(46,230,200,.12);
  --bg-rgb: 5,7,12; --bg: rgb(var(--bg-rgb)); --bg-hi: #080b13;
  --ink-rgb: 238,245,247; --fg: rgb(var(--ink-rgb)); --fg-2: rgba(var(--ink-rgb),.78); --fg-3: rgba(var(--ink-rgb),.68);
  --line-2: rgba(var(--ink-rgb),.18);
  --teal-rgb: 46,230,200; --teal: rgb(var(--teal-rgb)); --teal-text: #8ff3e2;
  --gold-rgb: 232,194,122; --gold: rgb(var(--gold-rgb)); --gold-text: #ffe2a8;
  --cta-bg: #45dcc4; --cta-fg: #03201b;
  --chip-bg: rgba(10,13,21,.78); --card-bg: linear-gradient(180deg, rgba(30,26,20,.94), rgba(16,15,14,.94)); --lift: rgba(0,0,0,.5);
  --grain-o: 1; --body: "Geist", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, Menlo, monospace; --ease: cubic-bezier(.16,1,.3,1);
}
html[data-theme="light"] .identity-abyss {
  --abyss: #e6ebe8; --deep: #f2f5f3; --tide: #dbe3df; --rim: #c3cec9; --line: #c3cec9;
  --ink: #0b1218; --ink-2: #2c3d47; --mute: #53636c;
  --glow: #00796b; --glow-2: #00695c;
  --bg-rgb: 230,235,232; --bg-hi: #e2e8e5;
  --ink-rgb: 11,18,24; --fg-2: rgba(var(--ink-rgb),.8); --fg-3: rgba(var(--ink-rgb),.7); --line-2: rgba(var(--ink-rgb),.18);
  --teal-rgb: 0,166,140; --teal-text: #007563;
  --gold-rgb: 184,134,40; --gold-text: #a8740a;
  --chip-bg: rgba(242,245,243,.92); --card-bg: #f6f8f7; --lift: rgba(11,18,24,.16);
  --grain-o: .6;
}
/* paper: one grain over the whole page, never cut at a section edge */
.identity-abyss::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90; background-image: url(img/grain.webp); background-size: 180px 180px; opacity: var(--grain-o) }
/* flat night instead of the teal haze of the live page */
.identity-abyss .lifecycle-section, .identity-abyss .checkpoints-section, .identity-abyss .ambience-band { background: var(--deep) }
.identity-abyss .checkpoints-section { background: var(--abyss) }
.identity-abyss .nav .nav-inner { background: rgba(9,12,19,.9) }
html[data-theme="light"] .identity-abyss .nav .nav-inner { background: rgba(255,255,255,.94) }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%) }
.how { margin-top: 18px; display: inline-flex; gap: 8px; color: var(--teal-text); font-weight: 600; font-size: 15px }
.trades { margin: 10px 0 0; font-size: 15px; color: var(--fg-3) }
.trades a { color: var(--fg-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px }
.trades a:hover { color: var(--fg); text-decoration-color: var(--teal) }
.fit .h-pause { position: absolute; right: max(20px, calc(50vw - 648px)); top: 120px; z-index: 3; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 99px; background: none; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--fg-2); cursor: pointer }
.fit .h-pause svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.fit .h-pause:hover { color: var(--fg) }
html.paused *, html.paused *::before, html.paused *::after { animation-play-state: paused !important }
.fit .copy h1 { margin: 0; color: var(--fg) } .fit .copy p { margin: 0 }
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 14px; height: 52px; padding: 0 26px; border: 0; border-radius: 99px; cursor: pointer; white-space: nowrap;
  font: 500 17px/1 var(--body); color: var(--cta-fg); background: var(--cta-bg); transition: transform .25s var(--ease), filter .25s }
.cta:hover { transform: translateY(-1px); filter: brightness(1.06) }
.cta:active { transform: translateY(1px) }
/* Hero: one 1440 x 900 plate. The ground, its cold light and top shade live on the full-width wrapper, so a wide screen shows no edge. */
.fit { position: relative; width: 100%; overflow: clip; background: var(--bg) }
.art { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; transform-origin: 0 0; overflow: hidden }
.viz, .stage { position: absolute; left: 0; top: 0; width: 1440px; height: 900px }
.stage { transform-origin: 0 0 }
.stage > canvas { position: absolute; inset: 0; display: block }
.copy { position: absolute; left: 72px; top: 268px; width: 700px; display: grid; gap: 22px }
.copy h1 { font: 580 80px/.97 var(--display); font-stretch: 96%; letter-spacing: -.042em; white-space: nowrap }
.copy h1 span { color: var(--gold-text) }
.sub { font-size: 17px; color: var(--fg-2); max-width: 54ch }
.acts { margin-top: 8px }
.mail { display: flex; align-items: center; gap: 6px; height: 58px; width: 520px; padding: 0 5px 0 22px; border-radius: 99px; background: rgba(var(--ink-rgb),.05); box-shadow: inset 0 0 0 1px var(--line-2) }
.mail:focus-within { box-shadow: inset 0 0 0 1px rgba(var(--teal-rgb),.7) }
.mail input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; color: var(--fg); font: 400 17px/1 var(--body) }
.mail input::placeholder { color: var(--fg-2) }
.mail .cta { height: 48px }
.lbl { position: absolute; transform: translate(-50%, -100%); display: flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: 99px; white-space: nowrap;
  background: var(--chip-bg); box-shadow: inset 0 0 0 1px var(--line); font: 400 13px/1 var(--body); color: var(--fg-2) }
.lbl b { font-weight: 600; color: var(--fg) }
.lbl em { font-style: normal }
.lbl.l1 b { color: var(--teal-text) }
.lbl.l2 { box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb),.45) }
.lbl.l2 b { color: var(--gold-text) }
/* What comes out of the last sieve: one finding, filled in as it crosses each sieve, gold once confirmed */
.proof { position: absolute; width: 340px; transform: translateX(-50%); padding: 14px 18px 4px; border-radius: 16px; background: var(--card-bg);
  box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb),.5), 0 24px 50px -24px var(--lift), 0 0 44px -14px rgba(var(--gold-rgb),.6) }
.proof header { display: flex; align-items: center; gap: 10px; padding-bottom: 11px; border-bottom: 1px solid var(--line) }
.proof strong { font: 600 17px/1.2 var(--display); letter-spacing: -.01em }
.proof header code { font: 400 13px/1 var(--mono); color: var(--fg-3) }
.proof .chip { margin-left: auto; padding: 6px 10px; border-radius: 99px; font: 600 13px/1 var(--body); color: #1b1408; background: #e8c27a }
.proof ol { list-style: none; margin: 0; padding: 0 }
.proof li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: center; padding: 13px 0; font-size: 15px; color: var(--fg-2) }
.proof li + li { border-top: 1px solid var(--line) }
.proof li code { font: 400 13px/1.3 var(--mono); color: var(--fg) }
.proof li.g { color: var(--gold-text) }
.proof li.g .tr { filter: drop-shadow(0 0 6px rgba(var(--gold-rgb),.7)) }
/* Below 1280 px the plate would shrink the copy, so the copy reflows: side by side on laptops, stacked on phones; the sieve shows as a crop. */
.fit.m { height: auto }
.fit.m .art { position: relative; width: auto; height: auto; padding: 96px 20px 0; display: flex; flex-direction: column; gap: 36px }
.fit.m .copy { position: static; width: auto; gap: 18px; order: 1 }
.fit.m .copy h1 { font-size: clamp(36px, 9.2vw, 60px); white-space: normal }
.fit.m .mail { width: 100%; max-width: 470px; height: auto; flex-direction: column; align-items: stretch; padding: 6px; border-radius: 26px }
.fit.m .mail input { padding: 16px 16px 14px }
.fit.m .viz { position: relative; width: auto; margin-inline: -20px; overflow: hidden; order: 2 }
.fit.m .lbl { font-size: calc(12.5px / var(--k)); padding: calc(7px / var(--k)) calc(12px / var(--k)) }
.fit.m .lbl em { display: none }
.fit.m .proof { transform: translateX(-50%) scale(calc(.8 / var(--k))); transform-origin: top center }
.fit.m.wide .art { flex-direction: row; align-items: center; gap: 24px; padding: 108px 40px 24px }
.fit.m.wide .copy { flex: 0 0 50% }
.fit.m.wide .copy h1 { font-size: clamp(40px, 4.4vw, 56px); white-space: nowrap }
.fit.m.wide .viz { flex: 1; margin-inline: 0 }
/* the same tray as the hero, small: grey for detected, teal once a trace or a test exists, gold when confirmed */
.tr { width: 22px; height: 13px; overflow: visible; color: var(--fg-3) }
.tr.t { color: var(--teal) }
.tr.g { color: var(--gold) }
.tr.g { color: var(--gold) }

/* the hero arrives once */
@media (prefers-reduced-motion: no-preference) {
  .art .copy > * { animation: arrive .9s var(--ease) both }
  .art .copy > :nth-child(2) { animation-delay: .09s } .art .copy > :nth-child(3) { animation-delay: .18s } .art .copy > :nth-child(4) { animation-delay: .27s }
  .art .lbl { animation: appear .8s var(--ease) both }
  .art .proof { animation: lift .8s var(--ease) .75s both, prove 1.2s var(--ease) 2.05s both }
  .art .proof li, .art .proof .chip { animation: arrive .7s var(--ease) both }
  .art .proof li:nth-child(1) { animation-delay: 1s } .art .proof li:nth-child(2) { animation-delay: 1.4s } .art .proof li:nth-child(3), .art .proof .chip { animation-delay: 1.85s }
  @keyframes lift { from { opacity: 0; transform: translate(-50%, 18px); filter: blur(4px) } }
  @keyframes prove { from { box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 50px -24px var(--lift), 0 0 44px -14px rgba(var(--gold-rgb),0) } }
  .art .lbl[data-level="0"] { animation-delay: .45s } .art .lbl[data-level="1"] { animation-delay: .65s } .art .lbl[data-level="2"] { animation-delay: .85s }
  @keyframes arrive { from { opacity: 0; transform: translateY(18px); filter: blur(4px) } }
  @keyframes appear { from { opacity: 0; filter: blur(4px) } }
}
.fit.again .art * { animation: none !important }
.identity-abyss main > .fit { border-top: 0 }

/* Light theme, "toile de tamis": a stone ground woven like the sieve's mesh, the paper grain pressed into it,
   raised surfaces one tone lighter with an ink rim instead of white cards and drop shadows. */
html[data-theme="light"] .identity-abyss {
  background-color: var(--abyss);
  background-image: repeating-linear-gradient(62deg, rgba(11,26,36,.032) 0 1px, transparent 1px 10px), repeating-linear-gradient(-62deg, rgba(11,26,36,.032) 0 1px, transparent 1px 10px);
}
html[data-theme="light"] .identity-abyss::after { mix-blend-mode: multiply }
html[data-theme="light"] .identity-abyss .fit, html[data-theme="light"] .identity-abyss main > section, html[data-theme="light"] .identity-abyss .checkpoints-section, html[data-theme="light"] .identity-abyss .lifecycle-section { background-color: transparent; background-image: none }
html[data-theme="light"] .identity-abyss .questions-section, html[data-theme="light"] .identity-abyss .deployment-section, html[data-theme="light"] .identity-abyss .lifecycle-section { background-color: rgba(242,245,243,.72) }
html[data-theme="light"] .identity-abyss .nav .nav-inner { background: rgba(236,241,238,.9); box-shadow: inset 0 0 0 1px var(--rim); border-color: transparent }
html[data-theme="light"] .lifecycle-stage, html[data-theme="light"] .identity-abyss .marquee li { background: var(--deep); box-shadow: inset 0 0 0 1px var(--rim) }
html[data-theme="light"] .identity-abyss .contact-layout input, html[data-theme="light"] .identity-abyss .contact-layout textarea, html[data-theme="light"] .identity-abyss .contact-layout select { background: var(--deep) }
html[data-theme="light"] .identity-abyss .foot { background: var(--tide) }
html[data-theme="light"] .identity-abyss .fit .proof { box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb),.55) }

/* Sovereignty band: its own field, never the hero's continuation. On the night page a field of grey a few steps above the night,
   on the light page a strip of night. */
.identity-abyss .sovereign-band {
  --ink: #f2f4f5; --ink-2: #cdd2d6; --mute: #a6adb3; --rim: rgba(255,255,255,.16); --glow: #2ee6c8; --glow-2: #8ff3e2;
  color: var(--ink); border: 0;
  background-color: #2b2f35; background-image: none;
}
html[data-theme="light"] .identity-abyss .sovereign-band {
  --ink: #eef5f7; --ink-2: #c3ccd2; --mute: #8f9aa4; --rim: #2a3442; --glow: #2ee6c8; --glow-2: #8ff3e2;
  background-color: #0a0e16; background-image: none;
}
.identity-abyss .sovereign-band h2, .identity-abyss .sovereign-band strong { color: var(--ink) }
.identity-abyss .sovereign-band p { color: var(--ink-2) }
.identity-abyss .sovereign-band .sovereign-link { color: var(--glow-2) }

/* ---- Step 2: the sections carry the same grains as the hero, with more air and larger type ---- */
.identity-abyss main > section:not(.sovereign-band):not(.integrations-section) { padding-block: clamp(5.5rem, 10vw, 9rem) }
.identity-abyss .lifecycle-head h2, .identity-abyss .checkpoints-head h2, .identity-abyss .deployment-section h2, .identity-abyss .questions-section h2, .identity-abyss .contact-section h2, .identity-abyss .home-resources h2 { font-size: clamp(2.5rem, 4.3vw, 4rem); line-height: 1.02; letter-spacing: -.03em }
.identity-abyss .lifecycle-head p:not(.dot-label), .identity-abyss .checkpoints-head p { font-size: 1.15rem; color: var(--ink-2) }
.identity-abyss .integrations-head h2 { font: 620 clamp(1.5rem, 2vw, 1.9rem)/1.1 var(--display); font-stretch: 112%; letter-spacing: -.02em }
/* Un projet commun: grains run the loop and light each trade as they pass */
.lifecycle-loop::after { display: none !important }
.lifecycle-loop canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block }
.lifecycle-stage { transition: box-shadow .5s var(--ease), transform .5s var(--ease) }
.lifecycle-stage.lit { box-shadow: inset 0 0 0 1px rgba(var(--teal-rgb),.65), 0 0 46px -12px rgba(var(--teal-rgb),.6) }
.lifecycle-stage.lit .lifecycle-name { color: var(--teal-text) }
/* checkpoints: one grain stops at each checkpoint in turn */
.checkpoints-rail::after { display: none !important }
.cp-grain { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--teal-text); box-shadow: 0 0 16px 2px rgba(var(--teal-rgb),.9); transition: left .9s var(--ease), top .9s var(--ease) }
.checkpoint .checkpoint-node, .checkpoint h3 { transition: box-shadow .4s var(--ease), transform .4s var(--ease), color .4s }
.checkpoint.on .checkpoint-node { box-shadow: inset 0 0 0 1.5px var(--glow-2), 0 0 38px -2px rgba(var(--teal-rgb),.85); transform: scale(1.08) }
.checkpoint.on h3 { color: var(--teal-text) }
@media (prefers-reduced-motion: reduce) { .cp-grain { display: none } }
.identity-abyss .questions-section h2 { max-width: 11ch }

/* jury round: demo offer under the form, FAQ and resources at section scale, deployment on one row, gold kept for proof */
.fit .demo-note { margin-top: 12px; font-size: 15px; color: var(--fg-2) }
.identity-abyss .questions-section h2, .identity-abyss .home-resources h2 { font-size: clamp(2rem, 3vw, 2.8rem); max-width: 16ch }
.identity-abyss .deployment-layout { grid-template-columns: 1fr; gap: 3.5rem }
.identity-abyss .deployment-layout > div:first-child { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1rem 4rem; align-items: end }
.identity-abyss .deployment-layout > div:first-child > h2 { grid-row: span 3 }
.identity-abyss .deployment-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem }
.identity-abyss .deployment-options article, .identity-abyss .deployment-options article:first-child { padding: 1.6rem; border: 0; border-radius: 18px; background: var(--tide); box-shadow: inset 0 0 0 1px var(--rim) }
.identity-abyss .status-chip.is-validation { color: var(--ink-2); background: none; box-shadow: inset 0 0 0 1px var(--rim) }
@media (max-width: 900px) { .identity-abyss .deployment-options, .identity-abyss .deployment-layout > div:first-child { grid-template-columns: 1fr } }

/* the ISO line of "Un projet commun", said as a statement */
.identity-abyss .lifecycle-claim { max-width: 40ch; margin: 2.6rem auto 0; text-align: center; font: 560 clamp(1.25rem, 1.8vw, 1.6rem)/1.35 var(--display); font-stretch: 104%; letter-spacing: -.01em; color: var(--ink) }
/* checkpoints: the scene of the checkpoint the grain has reached */
.cp-scene { position: relative; max-width: 780px; min-height: 236px; margin: 3.2rem auto 0 }
.cs { position: absolute; inset: 0 0 auto; padding: 18px 24px 22px; border-radius: 16px; background: #070a11; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .45s var(--ease), transform .55s var(--ease), visibility 0s .45s }
.cs.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s }
.cs p { margin: 0 0 9px; font-size: 15px; line-height: 1.5; color: #e9eef1; opacity: 0; transform: translateY(5px); transition: opacity .35s, transform .35s }
.cs.on p { opacity: 1; transform: none }
.cs.on p:nth-child(2) { transition-delay: .15s } .cs.on p:nth-child(3) { transition-delay: .55s } .cs.on p:nth-child(4) { transition-delay: .95s } .cs.on p:nth-child(5) { transition-delay: 1.35s }
.cs .cs-bar { margin-bottom: 14px; font-size: 13px; color: #8f9aa4 }
.cs .u { color: #b8c2c9 }
.cs code { font: 400 14px/1.6 var(--mono); color: #e9eef1 }
.cs .add code { color: #f28b8f } .cs .add.ok code { color: #8ff3e2 } .cs .del code { color: #9aa3aa; text-decoration: line-through }
.cs .warn { color: #ffe2a8 } .cs .done { color: #8ff3e2 }
.cs .ln { color: #5d6670; margin-right: 10px }
.cs u { text-decoration: underline wavy #e5484d; text-underline-offset: 4px }
.cs .pop { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1) }
.cs .pop b { color: #fff; font-weight: 600; margin-right: 6px }
@media (prefers-reduced-motion: reduce) { .cs { position: static; opacity: 1; visibility: visible; transform: none; margin-bottom: 12px } .cs p { opacity: 1; transform: none } .cp-scene { min-height: 0 } }
@media (max-width: 900px) { .cp-scene { min-height: 280px } }

/* "Vous vous reconnaissez ?": six situations on the left, the Tamis screen that answers the chosen one on the right */
.identity-abyss .situ-sec { --surface-2: var(--tide); background: var(--deep) }
.situ-head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: end }
.situ-head p { margin: 0; color: var(--ink-2); max-width: 44ch; justify-self: end }
.situ-grid { margin-top: 40px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 24px; align-items: center }
.situ-list { display: grid; gap: 4px }
.situ-list button { text-align: left; background: none; border: 0; border-radius: 14px; padding: 14px 22px; cursor: pointer; color: var(--fg-2); font: 500 22px/1.35 var(--display); letter-spacing: -.01em; display: grid; gap: 6px; text-wrap: pretty; transition: background .25s, color .25s }
.situ-list button > span { display: flex; align-items: center; gap: 9px; font: 500 13px/1 var(--body); color: var(--fg-3) }
.situ-list button[aria-selected="false"] .ri { stroke: var(--fg-3); background: rgba(var(--ink-rgb),.04); box-shadow: inset 0 0 0 1px var(--line) }
.situ-list button:hover .ri { stroke: var(--teal-text) }
.situ-list button[aria-selected="true"] { background: var(--surface-2); color: var(--fg) }
.situ-list button[aria-selected="true"] span { color: var(--teal-text) }
.situ-list button > span i { font-style: normal; color: var(--fg-3); margin-left: -3px }
.situ-list button > span i::before { content: "·"; margin-right: 8px }
.situ-loop { margin: 14px 22px 0; font-size: 15px; color: var(--fg-3) }
.situ-loop span { color: var(--teal-text); margin-right: 6px }
.avec-a { justify-self: start; margin-top: 4px }
.situ-list button:hover { color: var(--fg); background: rgba(var(--ink-rgb),.04) }
.avec { background: var(--surface-2); border-radius: 18px; padding: 32px 34px; display: grid; gap: 18px; align-content: start; box-shadow: inset 0 0 0 1px rgba(var(--teal-rgb),.28) }
.avec.swap { animation: swap .32s var(--ease) }
@keyframes swap { from { opacity: .35; transform: translateY(8px) } }
.avec-k { justify-self: start; font: 600 13px/1 var(--body); color: var(--teal-text); background: rgba(var(--teal-rgb),.12); box-shadow: inset 0 0 0 1px rgba(var(--teal-rgb),.35); padding: 7px 12px; border-radius: 99px }
.avec-t { font: 500 22px/1.35 var(--display); letter-spacing: -.015em; color: var(--fg) !important }
.avec-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px }
.avec-l li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--fg-2) }
.avec-l li::before { content: ""; width: 14px; height: 8px; margin-top: 7px; border: solid var(--teal); border-width: 0 0 2px 2px; transform: rotate(-45deg) }

.ri { width: 26px; height: 26px; padding: 5px; flex: none; border-radius: 8px; background: rgba(var(--teal-rgb),.1); box-shadow: inset 0 0 0 1px rgba(var(--teal-rgb),.3); fill: none; stroke: var(--teal-text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.situ-grid { margin-top: 3rem; grid-template-columns: .85fr 1.15fr; align-items: start }
.situ-list button { color: var(--ink-2) }
.situ-list button > span { color: var(--mute) }
.avec-v { border-radius: 12px; overflow: hidden; background: #070a11; box-shadow: inset 0 0 0 1px var(--rim) }
.avec-v img { display: block; width: 100%; height: 300px; object-fit: cover; object-position: left top }
.avec-t { margin: 0 }
.avec-l li::before { border-color: var(--glow) }
@media (max-width: 900px) { .situ-head, .situ-grid { grid-template-columns: 1fr } .situ-head p { justify-self: start } .situ-list button { font-size: 17px } .avec { padding: 22px } .avec-v img { height: 200px } }

/* journeys: the trade tabs set the steps below */
.jr-tabs { margin-top: 2.6rem; display: flex; flex-wrap: wrap; gap: 6px }
.jr-tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 7px; border: 0; border-radius: 99px; background: var(--tide); color: var(--ink-2); font: 600 14px/1 var(--body); cursor: pointer; box-shadow: inset 0 0 0 1px var(--rim); transition: background .2s, color .2s, box-shadow .2s }
.jr-tabs button:hover { color: var(--ink) }
.jr-tabs button[aria-selected="true"] { color: var(--ink); background: rgba(var(--teal-rgb),.14); box-shadow: inset 0 0 0 1px rgba(var(--teal-rgb),.55) }
.jr-tabs .ri { width: 26px; height: 26px; padding: 5px; border-radius: 99px; background: rgba(var(--teal-rgb),.12); fill: none; stroke: var(--teal-text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.jr-pain { margin: 2.2rem 0 0; max-width: 46ch; text-wrap: balance; font: 560 clamp(1.5rem, 2.4vw, 2.1rem)/1.25 var(--display); font-stretch: 104%; letter-spacing: -.015em; color: var(--ink) }
.journeys .checkpoints-track { margin-top: 3rem }
.journeys .checkpoint-node { border: 0; cursor: pointer; color: var(--glow-2); font: inherit }
.journeys .checkpoint-node:focus-visible { outline: 2px solid var(--glow-2); outline-offset: 4px }
.journeys .checkpoint { cursor: default }
.cs.shot { padding: 0; overflow: hidden }
.cs.shot img { display: block; width: 100%; height: 300px; object-fit: cover; object-position: left top }
.journeys .cp-scene { min-height: 300px }
.jr-foot { margin-top: 2rem; display: flex; justify-content: center; align-items: center; gap: 24px }
.jr-play { padding: 8px 16px; border: 0; border-radius: 99px; background: none; box-shadow: inset 0 0 0 1px var(--rim); color: var(--ink-2); font: 500 14px/1 var(--body); cursor: pointer }
.jr-play:hover { color: var(--ink) }
@media (max-width: 900px) { .journeys .checkpoints { grid-template-columns: 1fr !important } .cs.shot img { height: 200px } }

/* "Un projet commun" states each stage in one line and leads to the trade's journey below */
.identity-abyss .lifecycle-line { margin: .9rem 0 0; font-size: 1rem; line-height: 1.45; color: var(--ink-2) }
.identity-abyss .lifecycle-stage { min-height: 13rem }
/* journey screens are shown whole, framed like a window */
.cs.shot { background: #070a11; display: grid; place-items: center }
.cs.shot img { width: 100%; height: 320px; object-fit: contain; object-position: center; padding: 14px; box-sizing: border-box }
.journeys .cp-scene { min-height: 320px }

/* jury v75: one scene height per trade with no void, a tight quote, one primary button colour per theme */
.journeys .cs:not(.shot) { inset: 0; margin: auto 0; height: fit-content }
.journeys .jr-pain { line-height: 1.2 }
html[data-theme="light"] .cta { --cta-bg: var(--glow); --cta-fg: #fff }
.jr-foot .jr-more[hidden] { display: none }

/* light mode, measured against dark: logos keep their ink, sections alternate two grounds like the dark page, scenes are paper not night */
html[data-theme="light"] .identity-abyss .marquee li img { filter: grayscale(1) brightness(.3) }
html[data-theme="light"] .identity-abyss .marquee li { color: var(--ink) }
html[data-theme="light"] .identity-abyss .lifecycle-section, html[data-theme="light"] .identity-abyss .integrations-section, html[data-theme="light"] .identity-abyss .contact-section { background-color: #f4f7f5; box-shadow: inset 0 1px 0 var(--rim), inset 0 -1px 0 var(--rim) }
html[data-theme="light"] .journeys .cs:not(.shot) { background: #fbfcfb; box-shadow: none; outline: 1px solid var(--rim); outline-offset: -1px }
html[data-theme="light"] .journeys .cs:not(.shot) p { color: var(--ink) }
html[data-theme="light"] .journeys .cs:not(.shot) .cs-bar { color: var(--mute) }
html[data-theme="light"] .journeys .cs:not(.shot) .warn { color: var(--gold-text) }
html[data-theme="light"] .journeys .cs:not(.shot) .done { color: var(--teal-text) }
html[data-theme="light"] .journeys .cs:not(.shot) code { color: var(--ink) }
html[data-theme="light"] .journeys .cs:not(.shot) .u { color: var(--ink-2) }
html[data-theme="light"] .journeys .cs:not(.shot) .ln { color: #8a979e }
html[data-theme="light"] .journeys .cs .add code { color: #b42318 } html[data-theme="light"] .journeys .cs .add.ok code { color: #007563 } html[data-theme="light"] .journeys .cs .del code { color: #6b7880 }
html[data-theme="light"] .journeys .cs .pop { background: rgba(11,18,24,.04); box-shadow: inset 0 0 0 1px var(--rim) }
html[data-theme="light"] .journeys .cs .pop b { color: var(--ink) }
html[data-theme="light"] .identity-abyss .questions-section { background-color: transparent }

/* Un projet commun: the automatic hand-offs between trades, one row each, walked by a grain */
.relay { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start }
.relay-head { position: sticky; top: 120px }
.relay-head p { margin-top: 1.2rem; max-width: 30ch; font-size: 1.25rem; line-height: 1.45; color: var(--ink-2) }
.relay-list-wrap { position: relative; padding-left: 34px }
.relay-list { margin: 0; padding: 0; list-style: none }
.relay-rail { position: absolute; left: 8px; top: 0; bottom: 0; width: 1px; background: var(--rim) }
.relay-grain { position: absolute; left: -5px; top: 0; width: 11px; height: 11px; border-radius: 50%; background: rgb(var(--teal-rgb)); box-shadow: 0 0 16px 2px rgba(var(--teal-rgb),.55); transition: transform .9s var(--ease) }
.relay-row { display: grid; grid-template-columns: 1fr auto; column-gap: 1.5rem; row-gap: .35rem; padding: 1.35rem 0; border-top: 1px solid var(--rim) }
.relay-row:last-child { border-bottom: 1px solid var(--rim) }
.relay-pass { grid-column: 1; margin: 0; display: flex; align-items: center; gap: .55rem; font: 600 .95rem/1.2 var(--body); color: var(--mute) }
.relay-pass a { color: inherit; text-decoration: none; transition: color .4s } .relay-pass a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px }
.relay-when { grid-column: 2; grid-row: 1; margin: 0; font-size: .85rem; color: var(--mute); white-space: nowrap }
.relay-what { grid-column: 1 / -1; margin: 0; font: 560 clamp(1.15rem, 1.5vw, 1.4rem)/1.35 var(--display); color: var(--ink-2); transition: color .5s var(--ease) }
.relay-row.lit .relay-what { color: var(--ink) }
.relay-row.lit .relay-pass, .relay-row.lit .relay-pass a { color: var(--teal-text) }
@media (max-width: 900px) { .relay { grid-template-columns: 1fr; gap: 2rem } .relay-head { position: static } .relay-when { grid-column: 1; grid-row: auto } }
@media (prefers-reduced-motion: reduce) { .relay-grain { display: none } }

.identity-abyss .relay-what { line-height: 1.3 }
.relay-map { display: block; width: 100%; max-width: 440px; margin-top: 2.4rem; overflow: visible }
.rm-edge { fill: none; stroke: var(--rim); stroke-width: 1.2; transition: stroke .5s, stroke-width .5s }
.rm-edge.ext { stroke-dasharray: 3 5 }
.rm-edge.on { stroke: rgba(var(--teal-rgb),.85); stroke-width: 2 }
.rm-dot { fill: rgb(var(--teal-rgb)); filter: drop-shadow(0 0 6px rgba(var(--teal-rgb),.8)) }
.rm-node circle { fill: var(--deep); stroke: var(--mute); stroke-width: 1.4; transition: stroke .5s, fill .5s }
.rm-node.hub circle { stroke: var(--ink-2); stroke-width: 2 }
.rm-node.ext circle { stroke-dasharray: 2 3 }
.rm-node text { fill: var(--ink-2); font: 500 14px var(--body); transition: fill .5s }
.rm-node.on circle { stroke: rgb(var(--teal-rgb)); fill: rgba(var(--teal-rgb),.18) }
.rm-node.on text { fill: var(--teal-text); font-weight: 600 }
@media (max-width: 900px) { .relay-map { max-width: 340px; margin: 1.6rem auto 0 } }
.identity-abyss .relay-head h2 { margin-top: 0 }
.rm-edge { stroke: rgba(var(--ink-rgb),.22) }
.rm-node circle { stroke-width: 1.6 }

/* design-taste inspector, v79: running text at 16px, no tiny caps, no glow at rest, no rules between relay rows */
.identity-abyss .questions-section details p, .identity-abyss .contact-expect li, .identity-abyss .checkpoint p, .identity-abyss .integrations-head p, .identity-abyss .home-resource-links span { font-size: 1rem; line-height: 1.55 }
.identity-abyss .questions-section details p { color: var(--ink) }
.identity-abyss .checkpoint-when { text-transform: none; letter-spacing: 0; font-size: .875rem; font-weight: 600 }
.identity-abyss .contact-layout label, .identity-abyss .foot-legal, .identity-abyss .foot-legal a, .identity-abyss .marquee-pause { font-size: .8125rem }
.identity-abyss .fit .tag b, .identity-abyss .fit .lbl b { font-size: 13px }
.journeys .checkpoint-node, .journeys .checkpoint.on .checkpoint-node { box-shadow: inset 0 0 0 1.5px var(--glow) }
.identity-abyss .btn-primary, .identity-abyss .btn-glow, .cta, html[data-theme="light"] .identity-abyss .btn-primary, html[data-theme="light"] .public-site .btn-primary { box-shadow: none }
.relay-row, .relay-row:last-child { border: 0; padding: 1.1rem 0 }
html[data-theme="light"] .identity-abyss { --gold-text: #8a5d00 }

/* design-taste inspector, pass 2: outlines are borders, not shadows; the FAQ separates by tone, not rules */
.jr-tabs button { box-shadow: none; border: 1px solid var(--rim); padding: 6px 13px 6px 6px }
.jr-tabs button[aria-selected="true"] { box-shadow: none; border-color: rgba(var(--teal-rgb),.55) }
.journeys .checkpoint-node, .journeys .checkpoint.on .checkpoint-node { box-shadow: none; border: 1.5px solid var(--glow) }
.h-pause { box-shadow: none; border: 1px solid rgba(var(--ink-rgb),.18) }
.jr-play { box-shadow: none; border: 1px solid var(--rim) }
.identity-abyss .marquee-pause { box-shadow: none; border: 1px solid var(--rim) }
.identity-abyss .nav-roles-menu, html[data-theme="light"] .identity-abyss .nav-roles-menu { box-shadow: none; border: 1px solid var(--rim) }
.identity-abyss .questions-section { border-top: 0 }
.identity-abyss .questions-layout details, .identity-abyss .questions-layout details:first-child { border: 0; margin-bottom: 8px; padding: 0 1.2rem; border-radius: 14px; background: rgba(var(--ink-rgb),.04) }
.nav-drawer-backdrop:not(.is-open) { visibility: hidden }
.nav-drawer-backdrop, .nav-drawer { backdrop-filter: none; -webkit-backdrop-filter: none }
.fit .h-pause { box-shadow: none; border: 1px solid rgba(var(--ink-rgb),.18) }
.proof li + li { border-top: 0 }
.proof li { padding: 9px 0 }
.home-resource-links li { border-top: 0 }
.home-resource-links a { padding: 1rem 1.1rem; border-radius: 14px; background: rgba(var(--ink-rgb),.035) }
.mobile-cta { box-shadow: none !important }
html[data-theme="light"] .journeys .cs:not(.shot) { outline: 0; background: #ffffff }
.identity-abyss .foot, .identity-abyss .foot-legal { border-top: 0 }
.identity-abyss .foot-legal { margin-top: 2rem }
/* the relay rail is a column of grains, the sieve's own material */
.relay-rail { left: 7px; width: 3px; background: radial-gradient(circle, rgba(var(--ink-rgb),.28) 1.3px, transparent 1.6px) center top / 3px 9px repeat-y }
.identity-abyss .sovereign-facts li, .identity-abyss .sovereign-facts li + li { border: 0 }

/* sixteen hand-offs: tighter rows, the heading and the map stay in view while the list scrolls */
.relay-row, .relay-row:last-child { padding: .8rem 0 }
.identity-abyss .relay-what { font-size: clamp(1.05rem, 1.25vw, 1.2rem) }
.relay-head { top: 110px }

/* Un projet commun: the trade network on the left, the chosen trade's links on the right */
.tg-wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 4rem; align-items: start }
.tg-left { position: sticky; top: 110px }
.identity-abyss .tg-left h2 { margin: 0 }
.tg-lede { margin: 1.1rem 0 0; max-width: 34ch; font-size: 1.15rem; line-height: 1.45; color: var(--ink-2) }
.tg { position: relative; width: 100%; max-width: 560px; aspect-ratio: 100 / 92; margin-top: 1.6rem }
.tg-edges { position: absolute; inset: 0; width: 100%; height: 100% }
.tg-edge { stroke: rgba(var(--teal-rgb),.5); stroke-width: 1.6; vector-effect: non-scaling-stroke; transition: stroke .3s, stroke-width .3s }
.tg-edge.soon { stroke: rgba(var(--ink-rgb),.35); stroke-dasharray: 4 5 }
.tg-edge.hot { stroke: rgb(var(--teal-rgb)); stroke-width: 3 }
.tg-node { position: absolute; transform: translate(-50%, -50%); padding: 8px 14px; border-radius: 99px; border: 1px solid var(--rim); background: var(--deep); color: var(--ink-2); font: 600 14px/1 var(--body); white-space: nowrap; cursor: pointer; transition: opacity .4s, background .3s, color .3s, border-color .3s }
.tg-node:hover { color: var(--ink); border-color: rgba(var(--teal-rgb),.6) }
.tg-node:focus-visible { outline: 2px solid var(--glow-2); outline-offset: 3px }
.tg-node.near { color: var(--ink) }
.tg-node.far { opacity: .45 }
.tg-node.ext { border-style: dashed }
.tg-node[aria-pressed="true"] { padding: 11px 18px; font-size: 16px; background: var(--glow); border-color: var(--glow); color: #03141a; opacity: 1 }
html[data-theme="light"] .tg-node[aria-pressed="true"] { color: #fff }
.identity-abyss .tg-title { margin: 0 0 .4rem; font: 600 clamp(1.5rem, 2vw, 1.9rem)/1.2 var(--display); color: var(--ink) }
.tg-list { margin: 0; padding: 0; list-style: none }
.tg-row { display: grid; grid-template-columns: 1fr auto; column-gap: 1.2rem; row-gap: .3rem; padding: .85rem 0 }
.tg-pass { margin: 0; font: 600 .95rem/1.2 var(--body); color: var(--teal-text) }
.tg-when { grid-column: 2; grid-row: 1; margin: 0; font-size: .85rem; color: var(--mute); white-space: nowrap }
.identity-abyss .tg-what { grid-column: 1 / -1; margin: 0; font: 560 clamp(1.05rem, 1.25vw, 1.2rem)/1.3 var(--display); color: var(--ink) }
.tg-row.soon .tg-pass { color: var(--mute) } .tg-row.soon .identity-abyss .tg-what, .identity-abyss .tg-row.soon .tg-what { color: var(--ink-2) }
.tg-row.soon .tg-when { padding: 2px 9px; border: 1px dashed var(--rim); border-radius: 99px }
@media (max-width: 900px) { .tg-wrap { grid-template-columns: 1fr; gap: 1.5rem } .tg-left { position: static } .tg-node { padding: 6px 10px; font-size: 12.5px } .tg-node[aria-pressed="true"] { font-size: 14px; padding: 8px 13px } }

/* "Vous vous reconnaissez ?": the current step is lit, the others recede */
.journeys .checkpoint-node { background: var(--deep); transition: background .35s, color .35s }
.journeys .checkpoint.on .checkpoint-node { background: var(--glow); color: #03141a }
html[data-theme="light"] .journeys .checkpoint.on .checkpoint-node { color: #fff }
.journeys .checkpoint h3, .journeys .checkpoint p, .journeys .checkpoint .checkpoint-when { transition: opacity .35s }
.journeys .checkpoint:not(.on) h3, .journeys .checkpoint:not(.on) p, .journeys .checkpoint:not(.on) .checkpoint-when { opacity: .5 }

.tg-group { padding: .4rem 0 .9rem }
.tg-group + .tg-group { margin-top: .4rem }
.tg-group ul { margin: 0; padding: 0; list-style: none }
.identity-abyss .tg-partner { margin: 0 0 .2rem; font: 600 .8125rem/1.2 var(--body); color: var(--mute) }
.tg-row { padding: .55rem 0 }
.tg-pass { font-size: .875rem }
.identity-abyss .tg-partner { font: 600 1rem/1.2 var(--display); color: var(--ink); margin-bottom: .1rem }
.tg-pass { font-size: .8125rem; color: var(--mute) }

.tg-pass { font: 600 .875rem/1.2 var(--body); color: var(--teal-text) }
.tg-row { padding: .8rem 0 }

/* Un projet commun: three hand-offs read at a glance, a grain runs from one trade to the next */
.pc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: center }
.identity-abyss .pc-head h2 { margin: 0 }
.pc-head p { margin: 1.1rem 0 0; max-width: 30ch; font-size: 1.25rem; line-height: 1.45; color: var(--ink-2) }
.pc-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 2.2rem }
.pc-chain { margin: 0 0 .7rem; display: flex; align-items: center; gap: 0; max-width: 520px }
.pc-chain span { flex: none; padding: 6px 13px; border-radius: 99px; border: 1px solid var(--rim); background: var(--deep); font: 600 .875rem/1 var(--body); color: var(--ink) }
.pc-chain i { position: relative; flex: 1; min-width: 28px; height: 1px; margin: 0 6px; background: rgba(var(--teal-rgb),.45) }
.pc-chain i::after { content: ""; position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--teal-rgb)); box-shadow: 0 0 10px rgba(var(--teal-rgb),.8); animation: pc-run 2.6s var(--ease) infinite }
.pc-row:nth-child(2) .pc-chain i::after { animation-delay: .9s } .pc-row:nth-child(3) .pc-chain i::after { animation-delay: 1.8s }
.pc-chain i + span + i::after { animation-delay: 1.3s }
@keyframes pc-run { 0% { left: 0; opacity: 0 } 15% { opacity: 1 } 85% { opacity: 1 } 100% { left: calc(100% - 7px); opacity: 0 } }
.identity-abyss .pc-what { margin: 0; max-width: 34ch; font: 560 clamp(1.25rem, 1.7vw, 1.55rem)/1.3 var(--display); color: var(--ink) }
html.paused .pc-chain i::after { animation-play-state: paused }
@media (prefers-reduced-motion: reduce) { .pc-chain i::after { animation: none; left: calc(50% - 3px) } }
@media (max-width: 900px) { .pc { grid-template-columns: 1fr; gap: 2rem } }

.jr-foot .jr-demo { margin-right: .4rem }
@media (max-width: 900px) { .jr-foot { flex-wrap: wrap } .jr-foot .jr-demo { width: 100%; justify-content: center; margin: 0 0 .4rem } }

/* Un projet commun: a woven picture, the trades on a ring, every pair joined; nothing to read but the trades */
.weave-section { padding: clamp(4rem, 8vw, 7rem) 0 }
.weave { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 3rem; align-items: center }
.identity-abyss .weave-head h2 { margin: 0 }
.weave-head p { margin: 1rem 0 0; max-width: 24ch; font-size: 1.25rem; line-height: 1.45; color: var(--ink-2) }
.weave-art { position: relative; height: clamp(360px, 42vw, 560px) }
.weave-art canvas { position: absolute; inset: 0; width: 100%; height: 100% }
.wv-node { --lit: 0; position: absolute; transform: translate(-50%, -50%); padding: 7px 14px; border-radius: 99px; border: 1px solid rgba(var(--teal-rgb), calc(.25 + var(--lit) * .6)); background: var(--deep); color: var(--ink); font: 600 .9rem/1 var(--body); white-space: nowrap; pointer-events: none }
.wv-node::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; background: radial-gradient(closest-side, rgba(var(--teal-rgb), calc(var(--lit) * .35)), transparent); z-index: -1 }
@media (max-width: 900px) { .weave { grid-template-columns: 1fr; gap: 1.5rem } .weave-art { height: 380px } .wv-node { padding: 5px 10px; font-size: .78rem } }
/* journey screens are read, not glimpsed: a wider frame for real captures, text scenes stay narrow and centred */
.journeys .cp-scene { max-width: 1040px }
.journeys .cs:not(.shot) { width: min(780px, 100%); margin: auto }
.cs.shot img, .journeys .cs.shot img { width: 100%; height: auto; padding: 0; object-fit: initial; aspect-ratio: 1560 / 655 }
.journeys .cs.shot { border-radius: 14px }

/* screenshots keep their own proportions; the stage sits right under the frieze, no empty band */
.cs.shot img, .journeys .cs.shot img { aspect-ratio: auto; max-height: 520px; object-fit: contain; background: #070a11 }
.journeys .cp-scene { margin-top: 1.8rem }
.journeys .checkpoint:not(.on) h3, .journeys .checkpoint:not(.on) p, .journeys .checkpoint:not(.on) .checkpoint-when { opacity: .62 }

/* hero link reads as an action, not as underlined body text */
.fit .how, .fit a.more.how { text-decoration: none }
.fit a.more.how:hover { text-decoration: underline; text-underline-offset: 4px }
/* Un projet commun gets its own band, clearly apart from the journeys below */
.identity-abyss .weave-section { background: var(--deep); box-shadow: inset 0 1px 0 var(--rim), inset 0 -1px 0 var(--rim); padding: clamp(4.5rem, 8vw, 7rem) 0 }
html[data-theme="light"] .identity-abyss .weave-section { background: #f4f7f5 }
.weave-head .weave-lede { margin-top: 1rem; font: 560 clamp(1.3rem, 1.8vw, 1.6rem)/1.3 var(--display); color: var(--ink) }
.weave-head p:not(.weave-lede) { margin: 1rem 0 0; max-width: 40ch; font-size: 1.05rem; line-height: 1.55; color: var(--ink-2) }
.weave-points { margin: 1.4rem 0 0; padding: 0; list-style: none; display: grid; gap: .8rem; max-width: 40ch }
.weave-points li { position: relative; padding-left: 1.2rem; font-size: 1rem; line-height: 1.5; color: var(--ink-2) }
.weave-points li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--teal-rgb)) }
.weave-points b { color: var(--ink); font-weight: 600 }
.weave { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) }
.identity-abyss .checkpoints-section.journeys { padding-top: clamp(4rem, 7vw, 5.5rem) }

/* Tamis at the heart of the mesh: every trade's work passes through it */
.wv-hub { --lit: .35; position: absolute; transform: translate(-50%, -50%); padding: 16px 22px; border-radius: 99px; background: var(--deep); border: 1px solid rgba(var(--teal-rgb), calc(.4 + var(--lit) * .5)); box-shadow: 0 0 calc(20px + var(--lit) * 40px) rgba(var(--teal-rgb), calc(.15 + var(--lit) * .3)); pointer-events: none; z-index: 1 }
.wv-logo { display: block; height: 26px; width: auto }
.wv-logo-light { display: none }
html[data-theme="light"] .wv-logo-dark { display: none } html[data-theme="light"] .wv-logo-light { display: block }
@media (max-width: 900px) { .wv-hub { padding: 11px 15px } .wv-logo { height: 18px } }

/* sovereignty: four facts */
.identity-abyss .sovereign-facts { grid-template-columns: repeat(4, minmax(0, 1fr)) }
@media (max-width: 1100px) { .identity-abyss .sovereign-facts { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 760px) { .identity-abyss .sovereign-facts { grid-template-columns: minmax(0, 1fr) } }

/* product showcase: one real screen, framed, with what to look at */
.show-section { padding: clamp(4.5rem, 8vw, 7rem) 0 }
.show { display: grid; gap: 2.4rem }
.identity-abyss .show h2 { margin: 0; text-align: center }
.show-stage { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 0; align-items: stretch; max-width: 1080px; margin: 0 auto; width: 100% }
.show-frame { position: relative; margin: 0; border-radius: 16px; overflow: hidden; background: #070a11; box-shadow: inset 0 0 0 1px rgba(var(--teal-rgb),.28), 0 40px 90px -40px rgba(var(--teal-rgb),.45) }
.show-frame::after { content: ""; position: absolute; inset: auto 0 0; height: 18%; background: linear-gradient(to bottom, transparent, #070a11); pointer-events: none }
.show-bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-bottom: 1px solid rgba(255,255,255,.08); color: #8f9aa4; font: 500 12.5px/1 var(--body) }
.show-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.14) }
.show-bar span { margin-left: 10px }
.show-frame img { display: block; width: 100%; height: auto }
.show-notes { position: relative; margin: 0; padding: 0; list-style: none }
.show-notes li { position: absolute; left: 0; right: 0; top: calc(34px + (100% - 34px) * var(--y-num, 0)); top: var(--y); transform: translateY(-50%); display: grid; gap: 2px; padding-left: 56px }
.show-notes li::before { content: ""; position: absolute; left: -12px; top: 50%; width: 58px; height: 1px; background: linear-gradient(to right, rgb(var(--gold-rgb)), rgba(var(--gold-rgb),.25)) }
.show-notes li::after { content: ""; position: absolute; left: -16px; top: calc(50% - 4px); width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--gold-rgb)); box-shadow: 0 0 10px rgba(var(--gold-rgb),.8) }
.show-notes b { font: 600 1.05rem/1.2 var(--display); color: var(--ink) }
.show-notes span { font-size: .95rem; line-height: 1.4; color: var(--ink-2) }
@media (max-width: 900px) {
  .show-stage { grid-template-columns: 1fr; gap: 1.4rem }
  .show-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem }
  .show-notes li { position: static; transform: none; padding-left: 16px }
  .show-notes li::before { display: none } .show-notes li::after { left: 0; top: .45em; width: 7px; height: 7px }
}
@media (max-width: 900px) { .weave-art { overflow: hidden; margin: 0 -4px; padding: 0 4px } }
@media (max-width: 900px) { .show-notes li { padding-left: 0 } .show-notes li::after { display: none } .show-notes b { color: var(--gold-text) } }

/* the showcase follows the page theme: the light page shows the light product */
.show-light { display: none !important }
html[data-theme="light"] .show-dark { display: none !important } html[data-theme="light"] .show-light { display: block !important }
html[data-theme="light"] .show-frame { background: #fff; box-shadow: inset 0 0 0 1px rgba(11,18,24,.12), 0 40px 90px -40px rgba(0,121,107,.35) }
html[data-theme="light"] .show-frame::after { background: linear-gradient(to bottom, transparent, #fff) }
html[data-theme="light"] .show-bar { border-bottom-color: rgba(11,18,24,.08); color: #53636c }
html[data-theme="light"] .show-bar i { background: rgba(11,18,24,.14) }
.show-frame::after { height: 10% }

/* Sans Tamis / Avec Tamis */
.identity-abyss { --warm-rgb: 236,128,104 }
html[data-theme="light"] .identity-abyss { --warm-rgb: 196,84,60 }
.weave-viz { display: grid; gap: 1rem; justify-items: center }
.wv-switch { display: inline-flex; padding: 4px; border-radius: 99px; border: 1px solid var(--rim); background: var(--abyss) }
.wv-switch button { padding: 8px 16px; border: 0; border-radius: 99px; background: none; color: var(--ink-2); font: 600 .9rem/1 var(--body); cursor: pointer; transition: background .3s, color .3s }
.wv-switch button[aria-pressed="true"][data-mode="sans"] { background: rgba(var(--warm-rgb),.18); color: rgb(var(--warm-rgb)) }
.wv-switch button[aria-pressed="true"][data-mode="avec"] { background: var(--glow); color: #03141a }
html[data-theme="light"] .wv-switch button[aria-pressed="true"][data-mode="avec"] { color: #fff }
.wv-switch button:focus-visible { outline: 2px solid var(--glow-2); outline-offset: 2px }
.weave-viz .weave-art { width: 100% }
.wv-cap { margin: 0; min-height: 2.8em; max-width: 46ch; text-align: center; font-size: 1.05rem; line-height: 1.4; color: var(--ink) }
.wv-hub { transition: opacity .6s var(--ease), transform .6s var(--ease) }
.wv-sans .wv-hub { opacity: 0; transform: translate(-50%, -50%) scale(.85) }
.wv-sans .wv-node { border-color: rgba(var(--warm-rgb), calc(.25 + var(--lit) * .6)) }
.wv-sans .wv-node::after { background: radial-gradient(closest-side, rgba(var(--warm-rgb), calc(var(--lit) * .35)), transparent) }

/* showcase notes: evenly spaced column, threads drawn by script */
.show-stage { position: relative }
.show-notes { display: flex; flex-direction: column; justify-content: space-around; padding: 34px 0 0 64px }
.show-notes li, .show-notes li::before, .show-notes li::after { all: revert }
.show-notes li { position: static; transform: none; display: grid; gap: 3px; list-style: none }
.show-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2 }
.show-links path { fill: none; stroke: rgba(var(--gold-rgb),.75); stroke-width: 1.3 }
.show-links circle.t { fill: rgb(var(--gold-rgb)); stroke: rgba(var(--gold-rgb),.35); stroke-width: 6; filter: drop-shadow(0 0 6px rgba(var(--gold-rgb),.8)) }
.show-links circle.n { fill: rgb(var(--gold-rgb)) }
@media (max-width: 900px) { .show-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 0 } .show-notes b { color: var(--gold-text) } }

/* showcase v2: the explanations sit on the screen itself */
.show-stage { display: block; max-width: 860px }
.show-links { display: none }
.show-frame { overflow: visible }
.show-frame > img { border-radius: 0 0 16px 16px }
.show-frame::after { border-radius: 0 0 16px 16px }
.show-pins { position: absolute; left: 0; right: 0; top: 34px; bottom: 0; pointer-events: none; z-index: 2 }
.pin { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%) }
.pin > i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgb(var(--gold-rgb)); color: #241a06; font: 700 13px/1 var(--body); font-style: normal; box-shadow: 0 0 0 5px rgba(var(--gold-rgb),.25), 0 6px 18px -4px rgba(0,0,0,.5) }
.pin-chip { position: absolute; top: 50%; transform: translateY(-50%); width: max-content; max-width: 230px; display: grid; gap: 2px; padding: 10px 14px; border-radius: 12px; background: rgba(12,16,24,.94); border: 1px solid rgba(var(--gold-rgb),.55); box-shadow: 0 18px 40px -16px rgba(0,0,0,.6); font-size: .875rem; line-height: 1.35; color: #c3ccd2 }
.pin-chip b { font: 600 .95rem/1.2 var(--display); color: #fff }
.pin-r .pin-chip { left: 40px } .pin-l .pin-chip { right: 40px }
.pin-chip::before { content: ""; position: absolute; top: 50%; width: 14px; height: 1px; background: rgba(var(--gold-rgb),.8) }
.pin-r .pin-chip::before { right: 100% } .pin-l .pin-chip::before { left: 100% }
html[data-theme="light"] .pin-chip { background: rgba(255,255,255,.97); color: #2c3d47; box-shadow: 0 18px 40px -16px rgba(11,18,24,.35) }
html[data-theme="light"] .pin-chip b { color: #0b1218 }
.show-notes { display: none !important }
.show-notes li::before { content: attr(data-n); display: inline-grid; place-items: center; width: 22px; height: 22px; margin-bottom: 4px; border-radius: 50%; background: rgb(var(--gold-rgb)); color: #241a06; font: 700 12px/1 var(--body) }
@media (max-width: 1240px) { .pin-chip { display: none } .show-notes { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.4rem } }
@media (max-width: 900px) { .show-notes { grid-template-columns: 1fr 1fr } .pin > i { width: 20px; height: 20px; font-size: 11px } }

/* showcase v3: numbered marks on the screen, explanations outside the frame, a thin lead between */
.pin-chip { display: none }
.callout { position: absolute; top: var(--y); transform: translateY(-50%); width: 220px; display: grid; gap: 2px; padding: 10px 14px; border-radius: 12px; background: rgba(12,16,24,.94); border: 1px solid rgba(var(--gold-rgb),.55); box-shadow: 0 18px 40px -16px rgba(0,0,0,.6); font-size: .875rem; line-height: 1.35; color: #c3ccd2 }
.callout b { font: 600 .95rem/1.2 var(--display); color: #fff }
.callout-l { right: calc(100% + 26px) } .callout-r { left: calc(100% + 26px) }
html[data-theme="light"] .callout { background: rgba(255,255,255,.97); color: #2c3d47; box-shadow: 0 18px 40px -16px rgba(11,18,24,.35) }
html[data-theme="light"] .callout b { color: #0b1218 }
.lead { position: absolute; top: var(--y); height: 1px; background: rgba(var(--gold-rgb),.8) }
.lead-l { left: -26px; width: calc(var(--x) + 26px - 13px) }
.lead-r { left: calc(var(--x) + 13px); right: -26px }
@media (max-width: 1240px) { .callout, .lead { display: none } }

/* product windows in the journeys: the product's own look, drawn in HTML so it follows theme and language */
.identity-abyss { --pw-bg: #0f1726; --pw-panel: #16213a; --pw-line: rgba(255,255,255,.08); --pw-ink: #e6edf3; --pw-mute: #8b98a8; --pw-crit: #ff6b6b; --pw-high: #f0a35e; --pw-med: #f0c75e; --pw-ok: #2ee6c8 }
html[data-theme="light"] .identity-abyss { --pw-bg: #ffffff; --pw-panel: #f4f7f8; --pw-line: #e2e8eb; --pw-ink: #0b1218; --pw-mute: #5b6b75; --pw-crit: #c9302c; --pw-high: #c26a1e; --pw-med: #a77c0a; --pw-ok: #00796b }
.journeys .cs:has(.pw) { padding: 0; background: none; box-shadow: none; outline: 0 }
.pw { border-radius: 14px; overflow: hidden; background: var(--pw-bg); box-shadow: inset 0 0 0 1px var(--pw-line), 0 30px 70px -36px rgba(0,0,0,.6); text-align: left; color: var(--pw-ink); font: 400 14px/1.45 var(--body) }
html[data-theme="light"] .pw { box-shadow: inset 0 0 0 1px var(--pw-line), 0 30px 70px -36px rgba(11,18,24,.3) }
.pw p { opacity: 1 !important; transform: none !important; margin: 0; color: inherit; font-size: inherit }
.pw-bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: var(--pw-panel); border-bottom: 1px solid var(--pw-line); font-size: 12.5px; color: var(--pw-mute) }
.pw-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--pw-line) }
.pw-app { margin-left: 8px; font-weight: 600; color: var(--pw-ink) }
.pw-title::before { content: "·"; margin: 0 6px }
.pw-body { display: grid; gap: 12px; padding: 16px 18px 18px }
.pw code { font: 400 12.5px/1.5 var(--mono); color: var(--pw-ink) }
.pw-muted, .pw-sub { color: var(--pw-mute) !important; font-size: 13px !important }
.pw-b { display: inline-block; padding: 2px 8px; border-radius: 99px; font: 600 11.5px/1.5 var(--body); margin-right: 6px; vertical-align: 1px }
.pw-b.crit { background: color-mix(in srgb, var(--pw-crit) 18%, transparent); color: var(--pw-crit) }
.pw-b.high { background: color-mix(in srgb, var(--pw-high) 18%, transparent); color: var(--pw-high) }
.pw-b.med { background: color-mix(in srgb, var(--pw-med) 18%, transparent); color: var(--pw-med) }
.pw-b.low { background: color-mix(in srgb, var(--pw-ok) 16%, transparent); color: var(--pw-ok) }
.pw-prompt { color: var(--pw-mute) !important } .pw-tool { font-weight: 600 }
.pw-diff, .pw-code { border-radius: 8px; background: var(--pw-panel); padding: 8px 0; overflow: hidden }
.pw-diff p, .pw-code p { display: flex; gap: 12px; padding: 1px 12px; white-space: pre }
.pw-diff span, .pw-code span { width: 22px; text-align: right; color: var(--pw-mute); font: 400 12px/1.6 var(--mono) }
.pw-diff .add { background: color-mix(in srgb, var(--pw-crit) 10%, transparent) } .pw-diff .add.ok { background: color-mix(in srgb, var(--pw-ok) 12%, transparent) }
.pw-diff .del { background: color-mix(in srgb, var(--pw-crit) 9%, transparent) } .pw-diff .del code { text-decoration: line-through; color: var(--pw-mute) }
.pw-file { color: var(--pw-mute) !important; font: 600 12px var(--mono) !important; padding-bottom: 4px !important }
.pw-code u { text-decoration: underline wavy var(--pw-crit); text-underline-offset: 4px }
.pw-alert { display: grid; gap: 3px; padding: 11px 13px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--pw-crit) 45%, transparent); background: color-mix(in srgb, var(--pw-crit) 8%, transparent) }
.pw-alert b { color: var(--pw-crit) }
.pw-pop { display: grid; gap: 9px; padding: 12px 14px; border-radius: 10px; background: var(--pw-panel); box-shadow: inset 0 0 0 1px var(--pw-line) }
.pw-row-h { display: flex; align-items: center; gap: 4px; flex-wrap: wrap }
.pw-trace { display: flex; flex-wrap: wrap; align-items: center; gap: 6px } .pw-trace i { color: var(--pw-mute); font-style: normal }
.pw-actions { display: flex; gap: 8px }
.pw-btn { padding: 5px 12px; border-radius: 99px; border: 1px solid var(--pw-line); font-size: 12.5px; font-weight: 600 }
.pw-btn.primary { background: var(--pw-ok); border-color: var(--pw-ok); color: #03141a } html[data-theme="light"] .pw-btn.primary { color: #fff }
.pw-check { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; padding: 10px 13px; border-radius: 10px; background: var(--pw-panel) }
.pw-check.bad b { color: var(--pw-crit) } .pw-check.ok b { color: var(--pw-ok) }
.pw-comment { display: grid; gap: 7px; padding: 12px 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--pw-line) }
.pw-cmt-h { display: flex; gap: 8px; align-items: baseline } .pw-cmt-h span { color: var(--pw-mute); font-size: 12.5px }
.pw-merge { padding: 9px 13px; border-radius: 10px; font-weight: 600 }
.pw-merge.bad { color: var(--pw-crit); background: color-mix(in srgb, var(--pw-crit) 9%, transparent) } .pw-merge.ok { color: var(--pw-ok); background: color-mix(in srgb, var(--pw-ok) 10%, transparent) }
.pw-pr-title { font: 600 16px/1.3 var(--display) !important }
.pw-decision { display: grid; gap: 3px; padding: 10px 13px; border-radius: 10px; background: var(--pw-panel) } .pw-decision b { color: var(--pw-ok) }
.pw-timeline { margin: 0; padding: 0 0 0 16px; list-style: none; display: grid; gap: 8px; border-left: 2px solid var(--pw-line) }
.pw-timeline li { display: flex; gap: 10px; align-items: baseline } .pw-timeline span { color: var(--pw-mute); font-size: 13px }
.pw-stages { display: flex; align-items: center; gap: 0 }
.pw-stages span { padding: 5px 11px; border-radius: 99px; font: 600 12.5px var(--body); background: var(--pw-panel) }
.pw-stages i { flex: 1; min-width: 12px; height: 2px; background: var(--pw-line) }
.pw-stages .ok { color: var(--pw-ok) } .pw-stages .bad { color: var(--pw-crit); box-shadow: inset 0 0 0 1px var(--pw-crit) } .pw-stages .off { color: var(--pw-mute) }
.pw-log { display: grid; gap: 5px; padding: 10px 13px; border-radius: 10px; background: var(--pw-panel); font-size: 13.5px }
.pw-log .bad { color: var(--pw-crit) } .pw-log .okt { color: var(--pw-ok) }
.pw-table { display: grid; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--pw-line) }
.pw-th, .pw-tr { display: grid; grid-template-columns: 1.3fr 1.4fr .5fr; gap: 10px; align-items: center; padding: 9px 13px }
.pw-th { background: var(--pw-panel); color: var(--pw-mute) !important; font-size: 12px !important }
.pw-tr + .pw-tr { border-top: 1px solid var(--pw-line) } .pw-tr.hl { background: color-mix(in srgb, var(--pw-ok) 7%, transparent) }
.pw-tr > span:first-child { display: grid } .pw-tr code { color: var(--pw-mute) }
.pw-src { display: flex; flex-wrap: wrap; gap: 4px } .pw-src em { font-style: normal; font-size: 11.5px; padding: 1px 7px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--pw-line); color: var(--pw-mute) }
.pw-foot { color: var(--pw-ok) !important; font-weight: 600; font-size: 13px !important }
.pw-path { display: flex; align-items: stretch; gap: 0 }
.pw-path > div { flex: 1; display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--pw-panel) }
.pw-path > div.sink { box-shadow: inset 0 0 0 1px var(--pw-crit) }
.pw-path span { font-size: 11.5px; color: var(--pw-mute) } .pw-path em { font-style: normal; font: 400 11.5px var(--mono); color: var(--pw-mute) }
.pw-path > i { align-self: center; width: 22px; height: 2px; background: var(--pw-ok); position: relative } .pw-path > i::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left-color: var(--pw-ok); border-right: 0 }
.pw-verdict { display: flex; align-items: center; gap: 4px }
.pw-ai { display: grid; gap: 3px; padding: 10px 13px; border-radius: 10px; background: var(--pw-panel) } .pw-ai b { font-size: 12.5px; color: var(--pw-mute) }
.pw-flow { display: flex; align-items: center } .pw-flow span { padding: 5px 11px; border-radius: 99px; background: var(--pw-panel); font-size: 12.5px; color: var(--pw-mute) }
.pw-flow i { flex: 1; min-width: 12px; height: 2px; background: var(--pw-line) } .pw-flow .done { color: var(--pw-ok); box-shadow: inset 0 0 0 1px var(--pw-ok) }
.pw-bars { position: relative; display: grid; gap: 10px; padding: 4px 0 18px }
.pw-bars p { display: grid; grid-template-columns: 130px 1fr 44px; gap: 10px; align-items: center; font-size: 13px }
.pw-bars i { height: 10px; width: var(--w); border-radius: 99px; background: var(--pw-ok) } .pw-bars .late i { background: var(--pw-crit) } .pw-bars .late b { color: var(--pw-crit) }
.pw-bars em { position: absolute; top: -4px; bottom: 0; left: calc(140px + (100% - 194px) * .7); border-left: 1px dashed var(--pw-mute); padding-left: 5px; font-style: normal; font-size: 11px; color: var(--pw-mute) }
@media (max-width: 900px) { .pw-th, .pw-tr { grid-template-columns: 1fr 1fr } .pw-tr > span:last-child, .pw-th > span:last-child { display: none } .pw-path { flex-direction: column; gap: 6px } .pw-path > i { display: none } .pw-bars p { grid-template-columns: 96px 1fr 38px } }
.journeys .cs .pw p { color: var(--pw-ink) }
.journeys .cs .pw .pw-log .bad, .journeys .cs .pw .pw-alert b, .journeys .cs .pw .pw-merge.bad, .journeys .cs .pw .pw-check.bad b { color: var(--pw-crit) }
.journeys .cs .pw .pw-log .okt, .journeys .cs .pw .pw-foot, .journeys .cs .pw .pw-merge.ok, .journeys .cs .pw .pw-check.ok b, .journeys .cs .pw .pw-decision b { color: var(--pw-ok) }
.journeys .cs .pw .pw-muted, .journeys .cs .pw .pw-prompt, .journeys .cs .pw .pw-th, .journeys .cs .pw .pw-file { color: var(--pw-mute) }
@media (max-width: 600px) { .pw-title { display: none } .pw-cmt-h { flex-wrap: wrap } }

/* product windows, more pieces */
.pw-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; padding: 10px 13px; border-radius: 10px; background: var(--pw-panel); font-size: 13.5px }
.journeys .cs .pw .pw-kv span { color: var(--pw-mute) } .pw-kv b { font-weight: 600 }
.pw-tags { display: flex; flex-wrap: wrap; gap: 8px } .pw-tags > span { display: inline-flex; align-items: center; padding: 5px 10px 5px 6px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--pw-line); font-size: 13px }
.pw-alert.warn { border-color: color-mix(in srgb, var(--pw-med) 50%, transparent); background: color-mix(in srgb, var(--pw-med) 9%, transparent) }
.journeys .cs .pw .pw-alert.warn b { color: var(--pw-med) }
.pw-arch { display: flex; align-items: center; gap: 0 } .pw-arch.sub { padding-left: 34% }
.pw-arch span { padding: 8px 12px; border-radius: 9px; background: var(--pw-panel); box-shadow: inset 0 0 0 1px var(--pw-line); font-size: 13px; white-space: nowrap }
.pw-arch span.hl { box-shadow: inset 0 0 0 1px var(--pw-ok) } .pw-arch span.new { box-shadow: inset 0 0 0 1px var(--pw-med); color: var(--pw-med) }
.pw-arch i { flex: 1; min-width: 14px; height: 2px; background: var(--pw-line) }
.pw-count { display: flex; align-items: baseline; gap: 12px; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--pw-med) 9%, transparent) }
.pw-count b { font: 600 34px/1 var(--display); color: var(--pw-med) } .journeys .cs .pw .pw-count span { color: var(--pw-mute) }
.pw-doc { display: grid; gap: 7px; padding: 14px 16px; border-radius: 8px; background: var(--pw-panel); box-shadow: inset 0 0 0 1px var(--pw-line) }
.journeys .cs .pw .pw-doc-h { font: 600 15px/1.3 var(--display) }
.pw-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
.pw-stats p { display: grid; gap: 4px; padding: 12px 13px; border-radius: 10px; background: var(--pw-panel) }
.pw-stats b { font: 600 26px/1 var(--display); color: var(--pw-ok) } .journeys .cs .pw .pw-stats span { color: var(--pw-mute); font-size: 12.5px }
.pw-slides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
.pw-slides div { display: grid; align-content: start; gap: 7px; aspect-ratio: 16 / 10; padding: 12px; border-radius: 8px; background: var(--pw-panel); box-shadow: inset 0 0 0 1px var(--pw-line) }
.pw-slides b { font-size: 12.5px } .pw-slides i { display: block; height: 7px; width: var(--w); border-radius: 99px; background: color-mix(in srgb, var(--pw-ok) 55%, transparent) }
@media (max-width: 900px) { .pw-stats, .pw-slides { grid-template-columns: 1fr } .pw-slides div { aspect-ratio: auto } .pw-arch { flex-wrap: wrap; gap: 6px } .pw-arch i { display: none } .pw-arch.sub { padding-left: 0 } }
.pw-b { white-space: nowrap }


/* Hallmark audit, group 1 */
html, body { overflow-x: clip }
@media (max-width: 1239px) { body.drawer-open { overflow: clip } }
@media (max-width: 1400px) { .callout, .lead { display: none } .show-notes { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.4rem } }
@media (max-width: 900px) { .show-notes { grid-template-columns: 1fr 1fr } }
html[data-theme="light"] .identity-abyss { --pw-med: #855f00 }
.identity-abyss .contact-layout input, .identity-abyss .contact-layout textarea, .identity-abyss .contact-layout select { border: 1px solid rgba(var(--ink-rgb),.42) }
.identity-abyss .contact-layout input:focus-visible, .identity-abyss .contact-layout textarea:focus-visible, .identity-abyss .contact-layout select:focus-visible { outline: 2px solid var(--glow-2); outline-offset: 2px }
html:not(.js) .cs, html:not(.js) .cs p { position: static; opacity: 1; visibility: visible; transform: none }
html:not(.js) .cs { margin-bottom: 12px } html:not(.js) .cp-scene { min-height: 0 }
.wv-switch button { white-space: nowrap }
@media (max-width: 360px) { .wv-switch button { padding: 8px 12px } }
.identity-abyss h1, .identity-abyss h2, .identity-abyss h3 { overflow-wrap: break-word; min-width: 0 }

/* Hallmark audit, group 2: integrations as a still grid, one rhythm between sections, a 52px hero field */
.integrations-section .integrations-head { display: grid; gap: .6rem }
.int-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem 3rem; margin-top: 2.4rem }
.int-group h3 { margin: 0 0 .9rem; font: 600 1rem/1.2 var(--body); color: var(--ink) }
.int-group ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px }
.int-group li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 9px; border-radius: 99px; border: 1px solid var(--rim); background: var(--deep); color: var(--ink-2); font-size: .9rem; white-space: nowrap }
.int-group img { width: 18px; height: 18px; filter: grayscale(1) invert(1) brightness(.85) }
html[data-theme="light"] .int-group img { filter: grayscale(1) brightness(.3) }
@media (max-width: 1000px) { .int-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 600px) { .int-grid { grid-template-columns: minmax(0, 1fr); gap: 1.8rem } }
.identity-abyss .show-section, .identity-abyss .weave-section, .identity-abyss .checkpoints-section.journeys, .identity-abyss .integrations-section, .identity-abyss .questions-section, .identity-abyss .contact-section, .identity-abyss .home-resources { padding-top: clamp(4.5rem, 8vw, 7rem); padding-bottom: clamp(4.5rem, 8vw, 7rem) }
.mail { height: 52px } .mail .cta { height: 44px }
.identity-abyss .integrations-section .integrations-head { text-align: left; justify-items: start }
/* audit pass 2 */
.weave { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) }
@media (max-width: 900px) { .weave { grid-template-columns: minmax(0, 1fr) } }
.identity-abyss main > .checkpoints-section + .integrations-section { padding-top: clamp(4.5rem, 8vw, 7rem); padding-bottom: clamp(4.5rem, 8vw, 7rem) }
.mail { box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb),.42) }
.wv-switch button { min-height: 40px } .jr-play { min-height: 44px; padding-inline: 18px }
.identity-abyss .contact-layout input, .identity-abyss .contact-layout textarea, .identity-abyss .contact-layout select { border-color: rgba(var(--ink-rgb),.58) } .mail { box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb),.58) }
/* journeys: one-line heading, centred head, tabs and quote */
.journeys .checkpoints-head { max-width: none; text-align: center; margin-inline: auto }
.identity-abyss .journeys .checkpoints-head h2 { white-space: nowrap; font-size: clamp(1.7rem, 4.6vw, 3.4rem) }
.journeys .checkpoints-head p { margin-inline: auto; max-width: 62ch; text-wrap: balance }
.journeys .jr-tabs { justify-content: center }
.journeys .jr-pain { margin-inline: auto; text-align: center }
@media (max-width: 359px) { .identity-abyss .journeys .checkpoints-head h2 { white-space: normal } }
/* Light theme: the woven ground only behind the showcase, where panels sit over it; text elsewhere stands on a plain ground */
html[data-theme="light"] .identity-abyss { background-image: none }
html[data-theme="light"] .identity-abyss main > .show-section { background-image: repeating-linear-gradient(62deg, rgba(11,26,36,.032) 0 1px, transparent 1px 10px), repeating-linear-gradient(-62deg, rgba(11,26,36,.032) 0 1px, transparent 1px 10px) }

/* ---- Bottom of the page: one tools panel, the FAQ with its links, a closing demo panel ---- */
.identity-abyss main > .checkpoints-section + .integrations-section,
.identity-abyss main > .integrations-section { padding-block: clamp(4rem, 7vw, 6rem) }
.identity-abyss .integrations-head h2 { font: 620 clamp(2rem, 3vw, 2.8rem)/1.05 var(--display); font-stretch: 112%; letter-spacing: -.03em }
.int-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin-top: 2rem; border-radius: 22px; background: var(--deep); box-shadow: inset 0 0 0 1px var(--rim) }
.int-group { padding: 1.5rem 1.4rem 1.6rem }
.int-group + .int-group { box-shadow: inset 1px 0 0 var(--rim) }
.int-group h3 { margin-bottom: 1.1rem; font-size: .875rem; font-weight: 500; color: var(--mute) }
.int-group ul { flex-direction: column; flex-wrap: nowrap; gap: .8rem }
.int-group li { padding: 0; border: 0; border-radius: 0; background: none; gap: 10px; font-size: .95rem; color: var(--ink); white-space: normal; line-height: 1.25 }
.int-group img { flex: none }
@media (max-width: 1100px) {
  .int-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .int-group:nth-child(n+4) { box-shadow: inset 0 1px 0 var(--rim) }
  .int-group:nth-child(5), .int-group:nth-child(6) { box-shadow: inset 1px 0 0 var(--rim), inset 0 1px 0 var(--rim) }
}
@media (max-width: 640px) {
  .int-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .int-group, .int-group + .int-group { box-shadow: none }
  .int-group:nth-child(even) { box-shadow: inset 1px 0 0 var(--rim) }
  .int-group:nth-child(n+3) { box-shadow: inset 0 1px 0 var(--rim) }
  .int-group:nth-child(4), .int-group:nth-child(6) { box-shadow: inset 1px 0 0 var(--rim), inset 0 1px 0 var(--rim) }
  .int-group { padding: 1.2rem 1rem }
}

/* FAQ: questions as rows, the resource links under the heading */
.identity-abyss main > .questions-section { padding-block: clamp(4rem, 7vw, 6rem) }
.identity-abyss .questions-layout { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start }
.faq-aside { position: sticky; top: 7rem }
.faq-links { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: .15rem }
.faq-links a { display: inline-flex; padding: .45rem 0; color: var(--ink-2); font-size: 1rem; text-decoration: underline; text-decoration-color: rgba(var(--ink-rgb),.25); text-underline-offset: .3em; transition: color .2s, text-decoration-color .2s }
.faq-links a:hover { color: var(--ink); text-decoration-color: var(--glow-2) }
.faq-links a:focus-visible { outline: 2px solid var(--glow-2); outline-offset: 3px; border-radius: 4px }
.identity-abyss .questions-layout details, .identity-abyss .questions-layout details:first-child { margin: 0; padding: 0; border-radius: 0; background: none; border: 0; box-shadow: inset 0 -1px 0 var(--rim) }
.identity-abyss .questions-layout details:first-child { box-shadow: inset 0 1px 0 var(--rim), inset 0 -1px 0 var(--rim) }
.identity-abyss .questions-layout summary { padding: 1.35rem 2.5rem 1.35rem 0; font-size: 1.125rem; font-weight: 500; color: var(--ink) }
.identity-abyss .questions-layout details[open] { padding-bottom: 1.3rem }
@media (max-width: 860px) { .identity-abyss .questions-layout { grid-template-columns: minmax(0, 1fr) } .faq-aside { position: static } .faq-links { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.2rem } }

/* Closing demo panel */
.identity-abyss main > .contact-section { padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 7vw, 6rem) }
.identity-abyss .contact-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); padding: clamp(2rem, 4vw, 3.5rem); border-radius: 28px; background: var(--deep); box-shadow: inset 0 0 0 1px var(--rim); align-items: start }
.identity-abyss .contact-layout form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.2rem; align-items: end }
.identity-abyss .contact-layout form > label:has(textarea), .identity-abyss .contact-layout form > button, .identity-abyss .contact-layout form > p { grid-column: 1 / -1 }
.identity-abyss .contact-layout form > button { justify-self: start; margin-top: .4rem }
.identity-abyss .contact-layout form > p { margin: 0 }
@media (max-width: 640px) { .identity-abyss .contact-layout form { grid-template-columns: minmax(0, 1fr) } .identity-abyss .contact-layout { padding: 1.5rem 1.2rem; border-radius: 22px } }
html[data-theme="light"] .identity-abyss .contact-section { background-color: transparent; box-shadow: none }
html[data-theme="light"] .identity-abyss .contact-layout { background: #f4f7f5 }
/* the bottom sections: tighter rhythm (beats the generic section padding above) */
.identity-abyss main > section.integrations-section:not(.sovereign-band), .identity-abyss main > section.questions-section:not(.sovereign-band) { padding-block: clamp(3.5rem, 6vw, 5.5rem) }
.identity-abyss main > section.contact-section:not(.sovereign-band) { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(4rem, 7vw, 6rem) }
.identity-abyss main > section.checkpoints-section.journeys:not(.sovereign-band) { padding-bottom: clamp(3.5rem, 6vw, 5.5rem) }
.identity-abyss .integrations-section .integrations-head, .identity-abyss .integrations-head h2 { text-align: left; justify-items: start; margin-inline: 0 }
@media (max-width: 860px) { .identity-abyss .contact-layout { grid-template-columns: minmax(0, 1fr); gap: 2rem } }
@media (max-width: 640px) { .identity-abyss .int-grid.wrap, .identity-abyss .contact-layout.wrap { width: auto; margin-inline: 16px } }

/* inline styles moved out of the markup for the site CSP (style-src 'self') */
.svg-defs { position: absolute }
[data-sv="1"] { --x:98.8%;--y:29% }
[data-sv="2"] { --y:29% }
[data-sv="3"] { --x:2.5%;--y:46% }
[data-sv="4"] { --y:46% }
[data-sv="5"] { --x:-1.6%;--y:73% }
[data-sv="6"] { --y:73% }
[data-sv="7"] { --x:48%;--y:85% }
[data-sv="8"] { --y:85% }
[data-sv="9"] { --w:50% }
[data-sv="10"] { --w:90% }
[data-sv="11"] { --w:40% }
[data-sv="12"] { --x:70% }
[data-sv="13"] { --w:100% }
[data-sv="14"] { --w:60% }
[data-sv="15"] { --w:62% }
[data-sv="16"] { --w:38% }
[data-sv="17"] { --w:70% }
[data-sv="18"] { --w:45% }
[data-sv="19"] { --w:58% }
[data-sv="20"] { --w:66% }
[data-sv="21"] { --w:55% }
[data-sv="22"] { --w:30% }
/* role pages: the journey of the page's own trades, no link back to the page we are on */
.role-journey .jr-more { display: none }
.role-journey .jr-tabs[hidden] { display: none }
.jr-tabs [hidden] { display: none !important }
/* role pages: the hero speaks like the home's, one column, the headline at the home scale; the trade menu replaces the cycle card */
.role-page .role-hero { padding: clamp(8rem, 13vw, 10rem) 0 clamp(2.5rem, 5vw, 4rem) }
.role-page .role-hero-layout { grid-template-columns: minmax(0, 1fr) }
.role-page .role-cycle { display: none }
.role-page .role-hero h1 { max-width: 15ch; font: 580 clamp(3rem, 6vw, 5.4rem)/.98 var(--display); font-stretch: 96%; letter-spacing: -.04em; overflow-wrap: break-word }
.role-page .role-hero-copy > p:not(.cta-note) { max-width: 60ch; font-size: 1.15rem; line-height: 1.55; color: var(--ink-2) }
.role-page .role-journey { padding-top: clamp(2.5rem, 5vw, 4rem) }
/* role hero, editorial split: the headline on the left, what it means and the action on the right */
@media (min-width: 1000px) {
  .role-page .role-hero-copy { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); column-gap: clamp(3rem, 6vw, 6rem); align-items: end }
  .role-page .role-hero-copy > h1 { grid-column: 1; grid-row: 1 / span 6; align-self: end }
  .role-page .role-hero-copy > :not(h1) { grid-column: 2 }
  .role-page .role-hero-copy > p:not(.cta-note) { margin: 0 0 .9rem; font-size: 1.1rem }
  .role-page .role-hero-copy > .btn { justify-self: start; margin-top: .6rem }
}
/* role pages below the journey: the home rhythm and surfaces */
.identity-abyss.role-page main > section:not(.role-hero):not(.sovereign-band) { padding-block: clamp(3.5rem, 6vw, 5.5rem) }
.role-page .role-section-head h2, .role-page .role-tour h2 { font: 580 clamp(2.2rem, 3.6vw, 3.2rem)/1.04 var(--display); letter-spacing: -.03em; color: var(--ink) }
.role-page .role-specs dl { gap: 0; border-radius: 22px; background: var(--deep); box-shadow: inset 0 0 0 1px var(--rim); overflow: hidden }
.role-page .role-specs dl > div { padding: 1.4rem 1.3rem; border: 0 }
.role-page .role-specs dl > div + div { box-shadow: inset 1px 0 0 var(--rim) }
.role-page .role-specs dt { color: var(--teal-text); font-weight: 600 }
.role-page .role-specs dd { color: var(--ink-2); line-height: 1.5 }
.role-page .role-capabilities { gap: 1rem }
.role-page .role-capabilities article { padding: 1.5rem 1.6rem; border: 0; border-radius: 20px; background: var(--deep); box-shadow: inset 0 0 0 1px var(--rim) }
.role-page .role-capabilities h3 { font: 600 1.15rem/1.25 var(--display) }
.role-page .role-capabilities p { color: var(--ink-2); font-size: 1rem }
.role-page .role-section-deep { background: var(--abyss) }
.role-page .role-exchange > div { border-radius: 20px; background: var(--deep); box-shadow: inset 0 0 0 1px var(--rim) }
.role-page .role-exchange h3 { color: var(--teal-text) }
.role-page .role-next { border-top: 0 }
.role-page .role-next-layout { padding: clamp(2rem, 4vw, 3.5rem); border-radius: 28px; background: var(--deep); box-shadow: inset 0 0 0 1px var(--rim) }
.role-page .role-next h2 { font: 580 clamp(2rem, 3.4vw, 3rem)/1.04 var(--display); letter-spacing: -.03em }
html[data-theme="light"] .role-page .role-specs dl, html[data-theme="light"] .role-page .role-capabilities article, html[data-theme="light"] .role-page .role-exchange > div, html[data-theme="light"] .role-page .role-next-layout { background: #f4f7f5 }
@media (max-width: 1000px) { .role-page .role-specs dl > div + div { box-shadow: inset 0 1px 0 var(--rim) } }
.role-page .role-hero h1 { font-size: clamp(3rem, 5vw, 4.6rem) }