/* ==========================================================================
   Maison Du Trading · Tech version (dark navy + platinum, light/dark)
   Shape rule: buttons 8px · tags 6px · frames 14px · cards 22px (+ bezel ring) · phone 52px
   Icons: the platform's own 16px line set (icons.js), stroke 1.35
   ========================================================================== */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 200 700; font-display: swap;
  src: url(fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 200 700; font-display: swap;
  src: url(fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(fonts/cinzel-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Share Tech Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/share-tech-mono-latin.woff2) format('woff2'); }

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: 'Share Tech Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --maxw: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --nav-h: 96px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --r-btn: 8px; --r-frame: 14px; --r-card: 10px;
}

:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg: #040810;
  --bg-2: #070D19;
  --card-a: #0C1628;
  --card-b: #070D19;
  --glass: rgba(14, 24, 42, .62);
  --text: #F2F5FA;
  --muted: #8E9BB0;
  --dim: #73829A;
  --line: rgba(180, 200, 230, .09);
  --line-2: rgba(180, 200, 230, .17);
  --glow: 176, 196, 228;        /* platinum with a navy cast */
  --plat: 226, 232, 241;
  --sky-a: .16; --card-glow: .11;
  --nav-bg: rgba(4, 8, 16, .66);
  --art: rgba(205, 216, 234, .9);
  --art-dim: rgba(160, 178, 206, .22);
  --art-fill: rgba(176, 196, 228, .14);
  --cell: rgba(150, 170, 205, .10);
  --focus: rgba(226, 232, 241, .8);
  --field: #070D19;
  --shadow: 0 30px 80px -30px rgba(0, 0, 0, .85);
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #F3F1EC;
  --bg-2: #EAE7E1;
  --card-a: #FCFBF8;
  --card-b: #F5F3EE;
  --glass: rgba(252, 251, 248, .8);
  --text: #121418;
  --muted: #565A62;
  --dim: #63676F;
  --line: rgba(18, 20, 24, .09);
  --line-2: rgba(18, 20, 24, .16);
  --glow: 70, 74, 82;
  --plat: 36, 39, 45;
  --sky-a: .07; --card-glow: 0;
  --nav-bg: rgba(243, 241, 236, .8);
  --art: rgba(30, 33, 38, .85);
  --art-dim: rgba(30, 33, 38, .16);
  --art-fill: rgba(30, 33, 38, .06);
  --cell: rgba(30, 33, 38, .06);
  --focus: rgba(36, 39, 45, .6);
  --field: #F3F1EC;
  --shadow: 0 24px 60px -36px rgba(48, 40, 28, .3);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.55 var(--font); letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
h1, h2, h3, .lede { text-wrap: balance; }
p, li { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(var(--glow), .35); color: var(--text); }
html { scrollbar-color: rgba(var(--glow), .28) var(--bg); caret-color: rgb(var(--plat)); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(var(--glow), .24); border-radius: 8px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--glow), .4); }
.mono, .amt, .cmp { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--card-a); border-radius: var(--r-btn); }
.skip:focus { top: 12px; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.center { text-align: center; justify-items: center; }
.mono { font-family: var(--mono); letter-spacing: 0; font-weight: 400; }
.ic { display: inline-flex; width: 1em; height: 1em; flex: none; }
.ic svg { width: 100%; height: 100%; overflow: visible; }

.h1 { font-size: clamp(2.75rem, 6.4vw, 5.25rem); line-height: 1.04; font-weight: 500; letter-spacing: -.045em; }
.h2 { font-size: clamp(2.25rem, 4.6vw, 3.75rem); line-height: 1.06; font-weight: 500; letter-spacing: -.04em; }
.h3 { font-size: clamp(1.5rem, 2.6vw, 2.125rem); line-height: 1.12; font-weight: 500; letter-spacing: -.03em; }
.mute { color: var(--muted); }
.lede { font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); line-height: 1.55; color: var(--muted); max-width: 46ch; }
.fine { font-size: 12px; line-height: 1.55; color: var(--dim); }
.tag { display: inline-block; vertical-align: .2em; margin-left: .25em; white-space: nowrap; font-size: 11px; line-height: 1; font-weight: 600; letter-spacing: .02em;
  padding: 4px 7px; border-radius: 6px; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); }
.tag-on { color: var(--text); background: rgba(var(--glow), .14); }

/* ---------- Buttons: Liquid Glass, from the platform ---------- */
.btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px; border-radius: var(--r-btn); font-size: 15px; font-weight: 500; letter-spacing: -.005em; white-space: nowrap;
  -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .22s, color .22s, filter .2s;
  -webkit-tap-highlight-color: transparent; user-select: none; --sheen: rgba(255,255,255,.2); }
.btn .ic { font-size: 15px; transition: transform .35s var(--ease); }
.btn::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: var(--rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: -1; }
.btn::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: linear-gradient(105deg, transparent 38%, var(--sheen) 50%, transparent 62%) no-repeat; background-size: 260% 100%; background-position: 140% 0; }
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); }
  .btn:hover .ic[data-ic="arrow-right"] { transform: translateX(3px); }
  .btn:hover::after { background-position: -40% 0; transition: background-position .8s var(--ease); }
}
.btn:active { transform: scale(.975); filter: brightness(.95); transition-duration: .08s; }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; }
.btn-lg { height: 48px; padding: 0 24px; font-size: 16px; }
.btn-icon { width: 36px; height: 36px; padding: 0; }
[data-theme="dark"] .btn { color: #ECEDEF;
  --rim: linear-gradient(180deg, rgba(255,255,255,.36) 0%, rgba(255,255,255,.16) 45%, rgba(255,255,255,.1) 100%);
  background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.06) 46%, rgba(255,255,255,.03) 54%, rgba(255,255,255,.06) 100%), linear-gradient(#141517, #0E0F11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(0,0,0,.6), 0 4px 10px -2px rgba(0,0,0,.55); }
[data-theme="dark"] .btn:hover { color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,.09) 46%, rgba(255,255,255,.05) 54%, rgba(255,255,255,.09) 100%), linear-gradient(#17181A, #101113); }
[data-theme="dark"] .btn-p { color: #0B0C0E; font-weight: 600; --sheen: rgba(255,255,255,.6);
  --rim: linear-gradient(180deg, #E4E5E7 0%, #B6B8BC 50%, #7E8187 100%);
  background: linear-gradient(180deg, #E2E3E5 0%, #D6D8DB 42%, #C4C6CA 49.5%, #BBBEC2 50.5%, #CACCCF 66%, #DADBDE 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.16), 0 1px 2px rgba(0,0,0,.6), 0 4px 12px -3px rgba(0,0,0,.7); }
[data-theme="dark"] .btn-p:hover { color: #0B0C0E; filter: brightness(1.06);
  background: linear-gradient(180deg, #E2E3E5 0%, #D6D8DB 42%, #C4C6CA 49.5%, #BBBEC2 50.5%, #CACCCF 66%, #DADBDE 100%); }
[data-theme="light"] .btn { color: #111214; font-weight: 600; text-shadow: 0 1px 0 rgba(255,255,255,.6); --sheen: rgba(255,255,255,.9);
  --rim: linear-gradient(180deg, #C9CCD0 0%, #A2A5AA 55%, #7C7F85 100%);
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F6F7 40%, #E1E3E6 49.5%, #D6D8DC 50.5%, #E9EAEC 62%, #FAFAFA 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255,255,255,.85), 0 1px 1px rgba(0,0,0,.16), 0 3px 8px -2px rgba(0,0,0,.14); }
[data-theme="light"] .btn:hover { color: #000;
  --rim: linear-gradient(180deg, #B9BCC1 0%, #8E9197 55%, #6A6D73 100%);
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFB 40%, #E7E9EC 49.5%, #DCDEE1 50.5%, #EFF0F1 62%, #FFFFFF 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #fff, 0 2px 3px rgba(0,0,0,.14), 0 8px 18px -6px rgba(0,0,0,.24); }
[data-theme="light"] .btn-p { color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); --sheen: rgba(255,255,255,.32);
  --rim: linear-gradient(180deg, #D9DBDE 0%, #8E9197 38%, #3E4146 100%);
  background: linear-gradient(180deg, #6B6E75 0%, #56595F 42%, #47494F 49.6%, #3C3F44 50.4%, #4A4D53 74%, #55585E 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(255,255,255,.1), 0 0 0 .5px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.22), 0 4px 10px -2px rgba(0,0,0,.22), 0 12px 24px -10px rgba(0,0,0,.28); }
[data-theme="light"] .btn-p:hover { color: #fff; filter: brightness(1.07);
  background: linear-gradient(180deg, #6B6E75 0%, #56595F 42%, #47494F 49.6%, #3C3F44 50.4%, #4A4D53 74%, #55585E 100%); }

/* ---------- Navigation ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s, box-shadow .3s; }
.nav::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s var(--ease);
  background: var(--nav-bg); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); box-shadow: 0 1px 0 var(--line); }
.nav.scrolled::before { opacity: 1; }
.nav-in { height: var(--nav-h); max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.brand img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); }
.brand-logo img { width: 74px; height: 74px; transition: transform .5s var(--ease-out), filter .4s var(--ease); }
.brand-logo:hover img { transform: scale(1.05); }
[data-theme="light"] .brand-logo img { filter: drop-shadow(0 3px 8px rgba(40, 36, 28, .25)); }
.foot .brand-logo img { width: 68px; height: 68px; }
.nav-links { display: flex; gap: 40px; font-size: 15.5px; color: var(--muted); }
.nav-links a { position: relative; transition: color .25s var(--ease); }
.nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px; background: rgb(var(--plat)); transform: scaleX(0); transition: transform .5s var(--ease-out); }
.nav-links a:hover, .nav-links a.on { color: var(--text); }
.nav-links a.on::after { transform: scaleX(1); }
.lang { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr 1fr; padding: 3px; border-radius: 9px; background: rgba(var(--glow), .06); box-shadow: inset 0 0 0 1px var(--line-2); }
.lang button { position: relative; z-index: 1; height: 28px; min-width: 34px; padding: 0 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--dim); border-radius: 6px; transition: color .3s var(--ease); }
.lang button[aria-pressed="true"] { color: var(--text); }
.lang button:hover { color: var(--text); }
.lang-ind { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 6px; transition: transform .5s var(--ease-out);
  background: linear-gradient(180deg, rgba(var(--glow), .26), rgba(var(--glow), .1)); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255,255,255,.1); }
.lang[data-lang="de"] .lang-ind { transform: translateX(100%); }
.lang[data-lang="fr"] .lang-ind { transform: translateX(200%); }
main [data-i18n], .foot [data-i18n] { transition: opacity .25s var(--ease); }
.nav-end { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.nav-login { font-size: 14px; color: var(--muted); transition: color .2s; }
.nav-login:hover { color: var(--text); }
.nav .btn-icon { width: 42px; height: 42px; }
.nav .lang button { height: 34px; min-width: 40px; font-size: 13px; }
.nav-cta.btn { height: 44px; padding: 0 18px 0 22px; font-size: 15px; gap: 10px; }
.nav-cta .ic { font-size: 16px; }

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: calc(var(--nav-h) + clamp(48px, 8vw, 88px)); overflow: hidden; }
.hero-sky { position: absolute; inset: 0 0 auto; height: 900px; pointer-events: none; z-index: -1;
  background: radial-gradient(56% 52% at 50% -10%, rgba(var(--glow), var(--sky-a)), transparent 74%); }
.stage::before { content: ''; position: absolute; left: 50%; top: 14%; width: min(980px, 92vw); height: 64%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(var(--glow), .10), transparent 70%); }
.links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; pointer-events: none; }
.lk { fill: none; stroke: rgba(var(--plat), .3); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease-out); transition-delay: calc(.45s + var(--i) * 85ms); }
.lk-pulse { fill: none; stroke: rgb(var(--plat)); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: .07 .93; stroke-dashoffset: .07; opacity: 0; filter: drop-shadow(0 0 3px rgba(var(--glow), .9)); }
.stage.linked .lk-pulse { animation: lkrun 4.2s cubic-bezier(.5, 0, .3, 1) infinite; animation-delay: calc(1.6s + var(--i) * .55s); }
@keyframes lkrun { 0% { stroke-dashoffset: .07; opacity: 0; } 8% { opacity: 1; } 42% { stroke-dashoffset: -.93; opacity: 1; } 46%, 100% { stroke-dashoffset: -.93; opacity: 0; } }
.lk-end { fill: rgb(var(--plat)); opacity: 0; transition: opacity .5s var(--ease); transition-delay: calc(1.3s + var(--i) * 85ms); }
.stage.linked .lk { stroke-dashoffset: 0; }
.stage.linked .lk-end { opacity: .8; }
.hero-copy { position: relative; z-index: 2; max-width: 880px; margin: 0 auto; padding: 0 var(--gutter); display: grid; justify-items: center; text-align: center; gap: 22px; }
.hero-copy .lede { max-width: 40ch; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }

html.js .hero-copy > * { opacity: 0; transform: translateY(16px); filter: blur(8px); }
html.js.ready .hero-copy > * { opacity: 1; transform: none; filter: none; transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out), filter 1s var(--ease-out); }
html.js.ready .hero-copy > :nth-child(2) { transition-delay: .08s; }
html.js.ready .hero-copy > :nth-child(3) { transition-delay: .18s; }
html.js.ready .hero-copy > :nth-child(4) { transition-delay: .28s; }

/* Hero house (sketch.js): a measured vector model of the façade draws itself,
   then in dark mode the rendered stone fills in beneath it, storey by storey */
.hero { min-height: 100svh; display: flex; flex-direction: column; padding-top: calc(var(--nav-h) + clamp(22px, 4vh, 48px)); }
.hero-copy { gap: 16px; }
.hero .h1 { font-size: clamp(2.6rem, min(6vw, 8.4vh), 5rem); }
.hero .cta-row { margin-top: 4px; }
.hero-copy .hero-lede { max-width: 50ch; }
.hero-lede span { display: block; }
.hero-lede span:first-child { color: var(--text); font-weight: 500; }
/* The title turns from Maison Du Trading into The House of Trading. Both lines
   get their own layer on the graphics card, so the change never repaints the
   large type: a light blur, opacity and a short lift, all with one timing.
   With a mouse it follows hover; on touch a tap turns it and turns it back. */
.hswap { display: grid; align-items: center; justify-items: center; cursor: default; outline: none; -webkit-tap-highlight-color: transparent; }
.hswap > span { grid-area: 1 / 1; will-change: opacity, transform, filter; backface-visibility: hidden;
  transform: translate3d(0, 0, 0); filter: blur(0);
  transition: opacity .65s var(--ease-out), transform .65s var(--ease-out), filter .65s var(--ease-out); }
.hs-b { opacity: 0; transform: translate3d(0, .2em, 0); filter: blur(4px); }
.hswap:focus-visible .hs-a, .hswap.alt .hs-a { opacity: 0; transform: translate3d(0, -.2em, 0); filter: blur(4px); }
.hswap:focus-visible .hs-b, .hswap.alt .hs-b { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
@media (hover: hover) and (pointer: fine) {
  .hswap:hover .hs-a { opacity: 0; transform: translate3d(0, -.2em, 0); filter: blur(4px); }
  .hswap:hover .hs-b { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hswap > span { transition: opacity .35s linear; transform: none !important; filter: none !important; }
}
/* .house is a window onto the rendering (1846 x 852), cut close around the
   façade (x 143-1700, y 119-769) so the building uses all the room it has.
   The soft edges sit in the empty margin and never touch the stone. */
.house { --x0: 100; --y0: 95; --cw: 1646; --ch: 705; --fade-x: 2.5%; --fade-b: 95.5%;
  position: relative; width: min(1600px, 100%); aspect-ratio: var(--cw) / var(--ch); margin: clamp(10px, 2.4vh, 28px) auto 0; overflow: hidden; color: rgb(var(--plat));
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 3%, #000 var(--fade-b), transparent 100%), linear-gradient(90deg, transparent, #000 var(--fade-x), #000 calc(100% - var(--fade-x)), transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0, #000 3%, #000 var(--fade-b), transparent 100%), linear-gradient(90deg, transparent, #000 var(--fade-x), #000 calc(100% - var(--fade-x)), transparent); mask-composite: intersect; }
.house-in { position: absolute; aspect-ratio: 1846 / 852; width: calc(100% * 1846 / var(--cw)); left: calc(-100% * var(--x0) / var(--cw)); top: calc(-100% * var(--y0) / var(--ch)); }
.house-in > * { position: absolute; inset: 0; width: 100%; height: 100%; }
@property --lit { syntax: '<percentage>'; inherits: false; initial-value: -25%; }
.fl, .lit { display: block; }
.fl { opacity: 0; transform: translateY(10px); filter: blur(3px); }
.fl0 { transform: none; filter: none; }
.fl1 { clip-path: inset(69.2% 0 0 0); --dl: 2.25s; }
.fl2 { clip-path: inset(35.2% 0 30.8% 0); --dl: 2.55s; }
.fl3 { clip-path: inset(29.5% 0 64.8% 0); --dl: 2.8s; }
.fl4 { clip-path: polygon(0 0, 100% 0, 100% 29.6%, 63.1% 29.6%, 49.85% 14.4%, 36.6% 29.6%, 0 29.6%); --dl: 3s; }
.fl5 { clip-path: polygon(36.6% 29.7%, 49.85% 14.4%, 63.1% 29.7%); --dl: 3.2s; }
.house.on .fl { opacity: 1; transform: none; filter: none;
  transition: opacity 1s var(--ease) var(--dl), transform 1.2s var(--ease-out) var(--dl), filter 1s var(--ease) var(--dl); }
.house.on .fl0 { transition: opacity .6s var(--ease) 4s; }
/* floodlight: the lit stone rises from the ground to the roof */
.lit { --lit: -25%;
  -webkit-mask-image: linear-gradient(0deg, #000 var(--lit), transparent calc(var(--lit) + 22%)); mask-image: linear-gradient(0deg, #000 var(--lit), transparent calc(var(--lit) + 22%)); }
.house.on .lit { --lit: 100%; transition: --lit 2.4s cubic-bezier(.45, .05, .25, 1) 4s; }
.house-win, .house-spot { overflow: visible; pointer-events: none; }
.wins { filter: drop-shadow(0 0 5px rgba(255, 176, 96, .45)); }
.wins image { opacity: 0; }
.house.on .wins image { opacity: var(--o, 1); transition: opacity .55s var(--ease) var(--dl); }
.house-spot { opacity: 0; mix-blend-mode: screen; }
.house.on .house-spot { opacity: 1; transition: opacity 1.6s var(--ease) 5.7s; }
/* the day sky behind the house */
[data-theme="light"] .house-in::before { content: ''; position: absolute; inset: -6% -4% 0;
  background: radial-gradient(64% 80% at 50% 60%, rgba(255, 253, 248, .9) 0%, rgba(250, 248, 243, .5) 45%, rgba(243, 241, 236, 0) 80%);
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
/* the night sky behind the house */
[data-theme="dark"] .house-in::before { content: ''; position: absolute; inset: -6% -4% 0;
  background: radial-gradient(46% 38% at 50% 94%, rgba(255, 176, 104, .08), transparent 72%),
    radial-gradient(62% 78% at 50% 62%, rgba(18, 38, 74, .85) 0%, rgba(11, 24, 50, .55) 45%, rgba(4, 8, 16, 0) 78%);
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
.house-sk { overflow: visible; }
.house-sk path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.house-sk .s { stroke-width: 1.3; }
.house-sk .g { stroke-width: .7; opacity: .4; }
.house-sk .d { stroke-width: .9; opacity: .75; }
.house-sk .dl { stroke-width: .7; opacity: .5; }
.house-sk .p { stroke-width: .7; opacity: .25; }
.house-sk .k { stroke-width: .6; opacity: .22; stroke-dasharray: 2 6; }
.house-sk .h { fill: url(#skHatch); stroke: none; opacity: 0; transition: opacity 1.2s var(--ease) var(--dl); }
.house-sk .hl { stroke: currentColor; stroke-width: .7; opacity: .45; }
.house-sk .fillbg { fill: var(--bg); stroke: none; }
.house-sk mask path { fill: #000; stroke: none; }
.house-sk mask rect { fill: #fff; }
.house-sk .note { font: 400 13px/1 var(--mono); letter-spacing: .14em; fill: currentColor; opacity: 0; transition: opacity 1.2s var(--ease) var(--dl); }
.house-sk image { opacity: 0; transition: opacity 1.4s var(--ease) 2.2s; }
html.js .house-sk .s, html.js .house-sk .g, html.js .house-sk .d, html.js .house-sk .dl, html.js .house-sk .p { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.js .house.on .house-sk .s, html.js .house.on .house-sk .g, html.js .house.on .house-sk .d, html.js .house.on .house-sk .dl, html.js .house.on .house-sk .p { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--ease-out) var(--dl); }
html.js .house-sk .k { opacity: 0; }
html.js .house.on .house-sk .k { opacity: .22; transition: opacity 1s var(--ease) var(--dl); }
.house.on .house-sk .h { opacity: .5; }
.house.on .house-sk .note { opacity: .7; }
/* crest and inscription, carved: crisp at any zoom */
.house-ov { overflow: visible; pointer-events: none; }
.ov-crest, .ov-ins { opacity: 0; }
[data-theme="dark"] .ov-crest { filter: drop-shadow(.4px 1.2px 1px rgba(0,0,0,.55)); }
.ov-ins text { font-family: 'Cinzel', serif; font-weight: 700; font-size: 16.2px; letter-spacing: 0; }
/* by day the sun comes from above: lit lower lip, shaded upper lip, the floor in stone shade */
[data-theme="light"] .ins-lo { fill: rgba(255, 251, 242, .95); }
[data-theme="light"] .ins-up { fill: rgba(70, 60, 46, .8); }
[data-theme="light"] .ins-floor { fill: rgb(132, 120, 102); }
/* by night the floodlights stand at the foot of the house: the light comes from below */
[data-theme="dark"] .ins-lo { fill: rgba(20, 16, 12, .85); }
[data-theme="dark"] .ins-up { fill: rgba(255, 238, 210, .9); }
[data-theme="dark"] .ins-floor { fill: rgb(78, 70, 60); }
.house.on .ov-crest, .house.on .ov-ins { opacity: 1; transition: opacity 1.4s var(--ease) 5.5s; }
[data-theme="light"] .house.on .ov-crest, [data-theme="light"] .house.on .ov-ins { transition-delay: 4.3s; }
[data-theme="light"] .cr-n, [data-theme="dark"] .cr-d { display: none; }
[data-theme="light"] .cr-d { filter: drop-shadow(.4px 1px .8px rgba(60, 50, 36, .35)); }
[data-theme="light"] .house.on .cr-d { opacity: 1; }
.house.on .house-sk { opacity: 0; transition: opacity 1.4s var(--ease) 3.6s; }
[data-theme="dark"] .house-sk image { display: none; }
[data-theme="light"] .lit, [data-theme="light"] .house-win, [data-theme="light"] .house-spot { display: none; }
[data-theme="light"] .house.on .house-sk image { opacity: .9; }
[data-theme="light"] .house-sk .sk-crest { filter: grayscale(1) brightness(.62) contrast(1.3); }

/* Everything in one place: the phone and every area of the platform */
.modes { display: grid; justify-items: center; gap: 14px; margin-top: 26px; padding: 0 var(--gutter); text-align: center; }
.modes-h { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 500; letter-spacing: -.025em; }
.seg.modes-seg { grid-template-columns: repeat(3, 1fr); margin: 0; }
.seg.modes-seg button { padding: 0 20px; }
.seg.modes-seg .seg-ind { width: calc((100% - 8px) / 3); transform: translateX(calc(var(--i, 0) * 100%)); }
.modes .fine { max-width: 46ch; }
.areas { position: relative; padding: clamp(40px, 6vw, 90px) 0 clamp(70px, 9vw, 120px); }
.areas-title { text-align: center; padding: 0 var(--gutter); max-width: 900px; margin: 0 auto; }
.areas-title .mute { display: block; }

/* Stage: phone, six areas linked to it by fine lines (--p: 0..1 from site.js) */
.stage { --p: 0; position: relative; height: calc(clamp(250px, 23vw, 310px) * 2.2 + 24px); margin-top: clamp(40px, 6vw, 72px); }
/* The phone, modelled on a current iPhone: a thin titanium band, a black
   glass border, the side keys, the status bar with the Dynamic Island, and
   the screenshot shown whole underneath it (720 x 1473 + status bar = the
   iPhone's own 720 x 1565 screen). Sizes follow the phone's width, --pw. */
.phone { --pw: clamp(250px, 23vw, 310px); position: absolute; left: 50%; top: 0; width: var(--pw); cursor: pointer; z-index: 2;
  border-radius: calc(var(--pw) * .185); padding: calc(var(--pw) * .042);
  transform: translateX(-50%) translateY(calc((1 - var(--p)) * 70px)) scale(calc(.95 + var(--p) * .05));
  background: linear-gradient(90deg, #4A4F57 0%, #A9AEB6 1.6%, #6B7079 3.4%, #2E3238 9%, #2B2F35 50%, #2E3238 91%, #6B7079 96.6%, #A9AEB6 98.4%, #4A4F57 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.6), 0 0 0 .5px rgba(0,0,0,.7),
    0 2px 3px rgba(0,0,0,.35), 0 40px 70px -24px rgba(0,0,0,.7), 0 90px 120px -60px rgba(0,0,0,.55); }
/* black glass border between the band and the display */
.phone::after { content: ''; position: absolute; inset: calc(var(--pw) * .012); border-radius: calc(var(--pw) * .173); background: #030405;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); pointer-events: none; }
.phone-screen { position: relative; z-index: 1; aspect-ratio: 720 / 1565; border-radius: calc(var(--pw) * .143); overflow: hidden; background: #010103; }
.ph-status { position: absolute; inset: 0 0 auto; height: 5.88%; display: flex; align-items: center; justify-content: space-between;
  padding: 0 7.2% 0 9.5%; color: #fff; background: #010103; z-index: 2; transition: background .4s var(--ease), color .4s var(--ease); }
.ph-time { font: 600 calc(var(--pw) * .052)/1 -apple-system, BlinkMacSystemFont, 'SF Pro Text', var(--sans); letter-spacing: -.01em; }
.ph-icons { width: calc(var(--pw) * .2); height: auto; }
.ph-island { position: absolute; left: 50%; top: 32%; width: 31.5%; height: 52%; translate: -50% 0; border-radius: 99px; background: #000; z-index: 4; }
.ph-island::after { content: ''; position: absolute; right: 9%; top: 50%; width: 15%; aspect-ratio: 1; translate: 0 -50%; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #2A3550 0 18%, #0B0F19 42%, #000 70%); }
.phone-screen[data-mode="light"] .ph-status { color: #000; background: linear-gradient(90deg, #FFFFFF 53.9%, #979AA4 53.9%); }
.phone-screen[data-mode="matrix"] .ph-status { background: #060B07; }
.pm { position: absolute; left: 0; top: 5.88%; width: 100%; height: 94.12%; object-fit: cover; opacity: 0; transition: opacity .4s var(--ease); }
.pm.on { opacity: 1; }
/* a faint reflection on the glass */
.ph-glass { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(118deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 22%, rgba(255,255,255,0) 38%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
/* side keys: action button and volume on the left, side button on the right */
.ph-k { position: absolute; width: calc(var(--pw) * .013); border-radius: 2px; z-index: -1;
  background: linear-gradient(90deg, #3A3E45, #A3A8B0 45%, #50555D); box-shadow: 0 0 0 .5px rgba(0,0,0,.6); }
.ph-act, .ph-vu, .ph-vd { left: calc(var(--pw) * -.012); }
.ph-pw { right: calc(var(--pw) * -.012); top: 25%; height: 12.5%; }
.ph-act { top: 15.5%; height: 4.6%; }
.ph-vu { top: 23%; height: 8.4%; }
.ph-vd { top: 33.4%; height: 8.4%; }
[data-theme="light"] .phone { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.5), 0 0 0 .5px rgba(0,0,0,.5),
  0 2px 3px rgba(40,36,30,.25), 0 40px 70px -24px rgba(40,36,30,.35), 0 90px 120px -60px rgba(40,36,30,.3); }

.float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 7px; border-radius: 10px;
  top: calc(26px + var(--row) * 64px);
  background: linear-gradient(180deg, var(--card-a), var(--card-b));
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px -20px rgba(0,0,0,.7);
  --dir: -1; opacity: 0; filter: blur(6px); transform: translateX(calc(var(--dir) * 34px)) scale(.96);
  transition: opacity .8s var(--ease), filter .8s var(--ease), transform 1s var(--ease-out), box-shadow .5s var(--ease);
  transition-delay: calc(var(--row) * 85ms); }
.stage.linked .float { opacity: 1; filter: none; transform: none; }
.stage.linked .float .f-ic { animation: fping 1.2s var(--ease) both; animation-delay: calc(1.25s + var(--row) * 85ms); }
@keyframes fping { 0% { box-shadow: inset 0 0 0 1px var(--line-2); } 35% { box-shadow: inset 0 0 0 1px rgba(var(--plat), .7), 0 0 14px rgba(var(--glow), .45); } 100% { box-shadow: inset 0 0 0 1px var(--line-2); } }
.float b { font-size: 14px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.f-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: rgb(var(--plat));
  background: linear-gradient(160deg, rgba(var(--glow), .2), rgba(var(--glow), .04)); box-shadow: inset 0 0 0 1px var(--line-2); }
.f-ic svg { width: 15px; height: 15px; }
.float[data-side="l"] { right: calc(50% + clamp(190px, 18vw, 240px) + var(--bulge)); }
.float[data-side="r"] { left: calc(50% + clamp(190px, 18vw, 240px) + var(--bulge)); --dir: 1; }

/* Image slot (mockups / screenshots follow) */
.slot { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 20px; }
.slot::before { content: ''; width: 46px; height: 46px; background: url(assets/crest-160.png) center / contain no-repeat; opacity: .35; filter: grayscale(1); }
.slot::after { content: attr(data-label); font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--dim); text-transform: uppercase; max-width: 22ch; line-height: 1.5; }

/* ---------- Rooms ---------- */
.room { padding-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(110px, 13vw, 170px); }
.room-head { display: grid; gap: 18px; justify-items: start; margin-bottom: clamp(40px, 5vw, 60px); }
.room > .room-head { grid-template-columns: minmax(0, 1fr) minmax(0, 38ch); align-items: end; column-gap: clamp(32px, 6vw, 96px);
  padding-bottom: clamp(28px, 3vw, 36px); box-shadow: inset 0 -1px 0 var(--line); }
.room > .room-head .lede { justify-self: end; }
.room-split > .room-head { grid-template-columns: 1fr; padding-bottom: 0; box-shadow: none; }
.room-split > .room-head .lede { justify-self: start; }
.room-head.center { justify-items: center; text-align: center; }
.room-name { font-size: clamp(3rem, 7.4vw, 6rem); letter-spacing: -.045em; }

.grid { display: grid; gap: 64px 40px; }
.g-parquet { grid-template-columns: repeat(2, 1fr); }
.g-atelier { grid-template-columns: repeat(6, 1fr); }
.g-atelier .card { grid-column: span 2; }
.g-atelier .card-lg { grid-column: span 3; }
.g-atelier .card-wide { grid-column: 1 / -1; }
.g-societe { grid-template-columns: repeat(3, 1fr); }

/* Card with platinum glow; --gx/--gy place the glow, --mx/--my follow the pointer */
/* ---------- Exhibits ----------
   No boxes and no frames. Each area is shown like an object in a gallery:
   the drawing stands in a quiet niche, a fine plinth line under it, the
   name and the text on the open page below. The rooms of the house are
   the rooms of an exhibition. */
.card { position: relative; display: flex; flex-direction: column; gap: 26px; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.card > .art { height: 248px; margin: 0; border-radius: 3px; overflow: hidden;
  background: linear-gradient(180deg, rgba(var(--glow), .055), rgba(var(--glow), .02) 78%, rgba(var(--glow), .035));
  transition: background .8s var(--ease); }
.card > .art::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--plat), .32) 22%, rgba(var(--plat), .32) 78%, transparent);
  transform: scaleX(.72); transition: transform 1.1s var(--ease-out), opacity .6s var(--ease); opacity: .7; }
@media (hover: hover) {
  .card:hover > .art { background: linear-gradient(180deg, rgba(var(--glow), .075), rgba(var(--glow), .03) 78%, rgba(var(--glow), .045)); }
  .card:hover > .art::after { transform: none; opacity: 1; }
}
.card .card-copy { padding: 0 4px; }
[data-theme="light"] .card > .art { background: linear-gradient(180deg, rgba(30, 33, 38, .045), rgba(30, 33, 38, .02) 78%, rgba(30, 33, 38, .035)); }
.card-copy { display: grid; gap: 12px; align-content: start; }
.card-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-size: 1.375rem; line-height: 1.2; font-weight: 600; letter-spacing: -.022em; }
.card-title .tag { margin-left: 0; }
.c-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; flex: none; color: rgb(var(--plat)); font-size: 16px;
  background: linear-gradient(160deg, rgba(var(--glow), .24), rgba(var(--glow), .05)); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255,255,255,.1); }
.card-copy { gap: 12px; }
.card-copy p { color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 60ch; }
.card .art { order: -1; }
.card-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(240px, 1fr) 1.9fr; align-items: end; gap: 32px; padding: 32px 32px 0; min-height: 360px; }
.card-wide .card-copy { align-self: start; padding-bottom: 32px; }
.card-wide .card-title { font-size: clamp(1.625rem, 2.6vw, 2.25rem); letter-spacing: -.03em; }
.card-flip { grid-template-columns: 1.9fr minmax(240px, 1fr); }
.card-flip .card-copy { order: 2; }
.card-copy .art-flow { height: 96px; margin: 18px 0 0; order: 0; border-radius: 0; overflow: visible; }
.card-copy .art-flow .flow { justify-content: flex-start; padding: 0; }
.card-copy .art-flow .lbl-in { font-size: 10px; }
.card-copy .art-flow .flow-line { max-width: 56px; margin-bottom: 24px; }

.screen { position: relative; border-radius: var(--r-frame) var(--r-frame) 0 0; overflow: hidden; aspect-ratio: 16 / 9.2;
  background: linear-gradient(180deg, rgba(var(--glow), .10), rgba(var(--glow), .02)), var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 -20px 60px -30px rgba(var(--glow), .45); }
.screen-bar { position: absolute; top: 0; left: 0; right: 0; height: 30px; display: flex; gap: 6px; align-items: center; padding: 0 12px; box-shadow: 0 1px 0 var(--line); z-index: 1; }
.screen-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.screen .slot { top: 30px; }
.shot { margin: 0; }
.shot img { position: absolute; top: 30px; left: 0; width: 100%; height: calc(100% - 30px); object-fit: cover; object-position: left top; }
.shot-tag { position: absolute; left: 14px; bottom: 14px; z-index: 2; height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 7px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: #DDE3EC; background: rgba(6, 10, 18, .72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.card-flip .screen { border-radius: var(--r-frame) var(--r-frame) 0 0; }

/* L'Atelier: a list of the areas, the drawing of the active one beside it */
.atelier { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.at-list { display: grid; gap: 6px; }
.at-item { position: relative; display: grid; gap: 10px; padding: 26px 28px; border-radius: 18px; cursor: default; outline: none;
  transition: background .5s var(--ease), box-shadow .5s var(--ease); }
.at-item p { color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 56ch; }
.at-item { border-radius: var(--r-card); }
.at-item { border-radius: 0; box-shadow: inset 1px 0 0 var(--line); }
.at-item.on, .at-item:focus-visible { background: none; box-shadow: inset 1px 0 0 rgb(var(--plat)); }
.at-item:not(.on) .card-title { color: var(--muted); }
.at-item .at-m { display: none; }
.at-panel { position: sticky; top: calc(var(--nav-h) + 40px); height: min(520px, 70vh); border-radius: var(--r-card);
  background: linear-gradient(180deg, var(--card-a), var(--card-b));
  box-shadow: none; }
.at-panel { border-radius: 3px; background: linear-gradient(180deg, rgba(var(--glow), .055), rgba(var(--glow), .02) 78%, rgba(var(--glow), .035)); }
.at-panel::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--plat), .32) 22%, rgba(var(--plat), .32) 78%, transparent); }
.at-panel .at-p { position: absolute; inset: 40px; height: auto; margin: 0; opacity: 0; transition: opacity .5s var(--ease); }
.at-panel .at-p.on-k { opacity: 1; }

/* La Bibliothèque: heading left, cards right */
.room-split { display: grid; grid-template-columns: .85fr 1.4fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.room-split .room-head { margin-bottom: 0; }
.room-split .room-head .btn { margin-top: 8px; }
.biblio { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.orga { display: grid; }
.card-row { display: grid; grid-template-columns: 1fr minmax(240px, .9fr); align-items: center; gap: 48px; }
.card-row .art { order: 0; margin: 0; }
/* ---------- Illustrations (built in site.js) ---------- */
.art { position: relative; height: 200px; margin: -6px -6px 0; border-radius: 16px; overflow: hidden; color: var(--art); }
.art svg { width: 100%; height: 100%; overflow: visible; }
.art .tile { position: absolute; display: grid; place-items: center; border-radius: 14px; color: rgb(var(--plat));
  background: linear-gradient(160deg, rgba(var(--glow), .30), rgba(var(--glow), .07)); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255,255,255,.12), 0 14px 30px -12px rgba(0,0,0,.6), 0 0 40px -6px rgba(var(--glow), .45); }
.art .tile svg, .art .node svg { width: 1em; height: 1em; }
.art .node { position: absolute; display: grid; place-items: center; border-radius: 50%; color: rgb(var(--plat));
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--line-2), 0 8px 18px -8px rgba(0,0,0,.6); }
.art .lbl { position: absolute; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); }
.art .pill { position: absolute; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 8px; font-size: 12.5px; font-weight: 500; color: var(--text);
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--line-2); white-space: nowrap; }
.art .pill .ic { color: rgb(var(--plat)); }
.chat { position: absolute; inset: 16px 14px; display: grid; align-content: center; gap: 10px; }
.bubble { padding: 12px 14px; border-radius: 14px; display: grid; gap: 7px; max-width: 78%; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); }
.bubble i { display: block; height: 7px; border-radius: 4px; background: var(--art-dim); }
.bubble.me { justify-self: end; border-bottom-right-radius: 4px; }
.bubble.ai { border-bottom-left-radius: 4px; background: linear-gradient(160deg, rgba(var(--glow), .2), rgba(var(--glow), .05)); box-shadow: inset 0 0 0 1px var(--line-2), 0 0 30px -10px rgba(var(--glow), .6); }
.bubble.ai b { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.bubble.ai b .ic { color: rgb(var(--plat)); font-size: 14px; }


.flow { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0; padding: 0 8px; }
.flow-node { position: relative; display: grid; justify-items: center; gap: 12px; }
.flow-node .tile { position: relative; width: 58px; height: 58px; font-size: 26px; }
.lbl-in { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.flow-line { position: relative; flex: 1; max-width: 90px; min-width: 26px; height: 2px; margin: 0 6px 26px; background: var(--art-dim); overflow: hidden; border-radius: 2px; }
.flow-line i { position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, rgb(var(--plat)), transparent); }
.art.on .flow-line i { animation: run 2.4s var(--ease) infinite; }
.art.on .flow-line + .flow-node + .flow-line i { animation-delay: 1.2s; }
@keyframes run { to { left: 100%; } }
.svg-lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; fill: var(--dim); }
.pulse { animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 10px rgba(var(--glow), .08), 0 0 26px rgba(var(--glow), 1); } }
/* skeleton values: the platform starts empty, so no invented figures */
.sk { display: block; height: 7px; border-radius: 4px; background: var(--art-dim); }
/* Journal: figures strip + calendar */
.jr { position: absolute; inset: 10px 8px; display: grid; grid-template-rows: auto 1fr; gap: 12px; }
.jr-kpi { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 10px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); }
.jr-kpi span { display: grid; gap: 8px; padding: 10px 10px 11px; box-shadow: inset -1px 0 0 var(--line); }
.jr-kpi span:last-child { box-shadow: none; }
.jr-kpi small, .lb-prog small, .st-f small { font-family: var(--mono); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jr-cal { display: grid; grid-template-rows: auto 1fr; gap: 6px; }
.jr-wd, .jr-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.jr-wd b { font-family: var(--mono); font-weight: 400; font-size: 9.5px; letter-spacing: .06em; color: var(--dim); text-transform: uppercase; padding-left: 4px; }
.jr-days { grid-auto-rows: 1fr; }
.jr-days i { border-radius: 6px; background: var(--cell); box-shadow: inset 0 0 0 1px var(--line); transition: background .6s var(--ease), box-shadow .6s var(--ease); transition-delay: calc(var(--i) * 30ms); }
.art.on .jr-days i.l1 { background: rgba(var(--glow), .16); }
.art.on .jr-days i.l2 { background: rgba(var(--glow), .3); }
.art.on .jr-days i.l3 { background: rgba(var(--plat), .62); box-shadow: inset 0 0 0 1px rgba(var(--plat), .5); }
/* Charts: tabs + four timeframes */
.mc, .bt { position: absolute; inset: 10px 8px; display: grid; grid-template-rows: auto 1fr; gap: 10px; }
.mc-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 9px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); justify-self: start; max-width: 100%; overflow: hidden; }
.mc-tabs span { padding: 5px 9px; border-radius: 6px; font-size: 11px; font-weight: 500; color: var(--dim); white-space: nowrap; }
.mc-tabs span.on { color: var(--text); background: rgba(var(--glow), .16); box-shadow: inset 0 0 0 1px var(--line-2); }
.mc-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; }
.mc-pane { position: relative; border-radius: 8px; overflow: hidden; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--art); }
.mc-pane em { position: absolute; left: 5px; top: 5px; z-index: 1; font-style: normal; font-family: var(--mono); font-size: 9.5px; padding: 2px 5px; border-radius: 4px; color: var(--muted); background: rgba(var(--glow), .12); }
.mc-pane svg { position: absolute; inset: 14px 4px 4px; width: calc(100% - 8px); height: calc(100% - 18px); }
/* Mission: columns */
.ms { position: absolute; inset: 10px 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: start; }
.ms-col { display: grid; gap: 7px; padding: 8px; border-radius: 11px; background: rgba(var(--glow), .04); box-shadow: inset 0 0 0 1px var(--line); }
.ms-head { display: flex; align-items: center; gap: 6px; color: rgb(var(--plat)); padding: 2px 2px 4px; }
.ms-head svg { width: 12px; height: 12px; flex: none; }
.ms-head .sk { background: rgba(var(--glow), .3); }
.ms-card { display: grid; gap: 9px; padding: 9px 8px; border-radius: 8px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); }
.ms-prog { position: relative; display: block; height: 4px; border-radius: 2px; background: var(--art-dim); overflow: hidden; }
.ms-prog i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: rgb(var(--plat)); border-radius: inherit; transition: transform 1.4s var(--ease-out) calc(.25s + var(--i, 0) * 90ms); }
.art.on .ms-prog i { transform: scaleX(var(--v)); }
.ms-list { gap: 7px; }
.ms-list span { display: flex; align-items: center; gap: 6px; }
.ms-list b { width: 9px; height: 9px; border-radius: 3px; flex: none; box-shadow: inset 0 0 0 1px var(--line-2); }
.ms-list b.ok { background: rgb(var(--plat)); box-shadow: none; }
/* Backtesting: tabs + trade rows with before/after charts */
.bt-rows { display: grid; gap: 6px; align-content: start; }
.bt-row { display: grid; grid-template-columns: 54px 54px 1fr 38px; align-items: center; gap: 8px; padding: 6px; border-radius: 9px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); }
.bt-th { position: relative; height: 30px; border-radius: 5px; overflow: hidden; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--art); }
.bt-th svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bt-r { height: 16px; border-radius: 5px; background: rgba(var(--glow), .2); box-shadow: inset 0 0 0 1px var(--line-2); }
/* Library: shelf + lessons */
.lb { position: absolute; inset: 12px 8px; display: grid; grid-template-columns: auto 1fr; gap: 16px; }
.lb-shelf { position: relative; display: flex; align-items: flex-end; gap: 3px; padding: 0 8px 6px; box-shadow: inset 0 -2px 0 var(--line-2); }
.book { position: relative; border-radius: 3px 3px 1px 1px; background: linear-gradient(90deg, rgba(var(--glow), .34), rgba(var(--glow), .14) 60%, rgba(var(--glow), .24)); box-shadow: inset 0 0 0 1px var(--line-2);
  transform: translateY(8px); opacity: 0; transition: transform .8s var(--ease-out), opacity .6s; transition-delay: calc(var(--i) * 70ms); }
.book i { position: absolute; left: 3px; right: 3px; top: 14%; height: 2px; background: rgba(var(--plat), .5); box-shadow: 0 5px 0 rgba(var(--plat), .25); }
.book.b1 { background: linear-gradient(90deg, rgba(var(--plat), .5), rgba(var(--plat), .22) 60%, rgba(var(--plat), .36)); }
.book.b3 { transform-origin: bottom right; }
.art.on .book { transform: none; opacity: 1; }
.art.on .book.b4 { transform: rotate(-12deg) translateX(4px); }
.lb-list { display: grid; gap: 7px; align-content: center; }
.lb-row { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 9px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); }
.lb-k { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; color: rgb(var(--plat)); background: rgba(var(--glow), .14); }
.lb-k svg { width: 14px; height: 14px; }
.lb-prog { display: grid; gap: 6px; padding: 4px 2px 0; }
/* Settings: tabs + profile */
.st { position: absolute; inset: 10px 4px; display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.st-tabs { display: grid; gap: 4px; align-content: start; padding: 4px; border-radius: 10px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); }
.st-tabs span { padding: 7px 10px; border-radius: 7px; font-size: 11.5px; font-weight: 500; color: var(--dim); white-space: nowrap; }
.st-tabs span.on { color: var(--text); background: rgba(var(--glow), .16); box-shadow: inset 0 0 0 1px var(--line-2); }
.st-form { display: grid; gap: 10px; align-content: start; padding: 6px 2px; }
.st-f { display: grid; gap: 5px; }
.st-in { display: flex; align-items: center; height: 30px; padding: 0 10px; border-radius: 8px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 12px; color: var(--muted); }
.st-seg { display: inline-flex; justify-self: start; padding: 3px; gap: 3px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line-2); }
.st-seg b { font-family: var(--mono); font-weight: 400; font-size: 11px; padding: 4px 9px; border-radius: 5px; color: var(--dim); }
.st-seg b.on { color: var(--text); background: rgba(var(--glow), .18); }
html.js .art .ms-card, html.js .art .bt-row, html.js .art .lb-row { opacity: 0; transform: translateY(8px); }
html.js .art.on .ms-card, html.js .art.on .bt-row, html.js .art.on .lb-row { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); transition-delay: calc(var(--i) * 80ms); }

/* Line illustrations: one language for every area (see site.js) */
.lx::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background-image: linear-gradient(rgba(var(--glow), .07) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--glow), .07) 1px, transparent 1px);
  background-size: 28px 28px; background-position: center;
  -webkit-mask: radial-gradient(58% 66% at 50% 50%, #000, transparent 78%); mask: radial-gradient(58% 66% at 50% 50%, #000, transparent 78%); }
.lx svg { position: relative; overflow: visible; }
.lx .ln { fill: none; stroke: rgb(var(--plat)); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lx .ln.dm { stroke: rgba(var(--plat), .22); }
.lx .ln.dm2 { stroke: rgba(var(--plat), .5); }
html.js .lx .dr { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.js .lx.on .dr { stroke-dashoffset: 0; transition: stroke-dashoffset 1.5s var(--ease-out) var(--dl, 0ms); }
html.js .lx .dr.dash { stroke-dasharray: .012 .016; stroke-dashoffset: 0; opacity: 0; }
html.js .lx.on .dr.dash { opacity: 1; transition: opacity 1s var(--ease) var(--dl, 0ms); }
.lx .gp { fill: rgb(var(--plat)); filter: drop-shadow(0 0 5px rgba(var(--glow), .95)); }
html.js .lx .gp { opacity: 0; }
html.js .lx.on .gp { opacity: 1; transition: opacity .7s var(--ease) var(--dl, 0ms); }
html.js .lx .gp.run { transform: translateX(0); }
html.js .lx.on .gp.run { transform: translateX(156px); transition: opacity .4s var(--ease) .9s, transform 1.6s var(--ease-out) 1.1s; }
.lx .ico { fill: none; stroke: rgb(var(--plat)); stroke-linecap: round; stroke-linejoin: round; }
html.js .lx .ico { opacity: 0; }
html.js .lx.on .ico { opacity: 1; transition: opacity .8s var(--ease) var(--dl, 0ms); }
.lx .cu { fill: rgba(var(--plat), .85); }
.lx .cdn { fill: none; stroke: rgba(var(--plat), .6); stroke-width: 1.2; }
.lx .past .cu { fill: rgba(var(--plat), .32); }
.lx .past .cdn { stroke: rgba(var(--plat), .3); }
html.js .lx .cd, html.js .lx .bar { transform: scaleY(0); transform-origin: 50% 100%; transform-box: fill-box; }
html.js .lx.on .cd, html.js .lx.on .bar { transform: none; transition: transform .8s var(--ease-out) calc(var(--i) * 50ms); }
.lx .bar { fill: rgba(var(--glow), .12); stroke: rgba(var(--plat), .45); stroke-width: 1.2; }
.lx .tk { stroke-width: 1.4; }
html.js .lx .tk { opacity: 0; }
html.js .lx.on .tk { opacity: 1; transition: opacity .5s var(--ease) calc(var(--i) * 16ms); }
.lx .needle { transform: rotate(-90deg); }
html.js .lx.on .needle { transform: rotate(var(--to)); transition: transform 1.9s cubic-bezier(.34, 1.4, .5, 1) .55s; }
.lx .hub { fill: var(--bg-2); stroke: rgb(var(--plat)); stroke-width: 1.6; }
.lx .knob { fill: var(--bg-2); stroke: rgb(var(--plat)); stroke-width: 1.6; }
html.js .lx .knob { opacity: 0; }
html.js .lx.on .knob { opacity: 1; transition: opacity .5s var(--ease) calc(.9s + var(--i) * 150ms); }
.lx .lean { transform: rotate(-11deg); transform-origin: 254px 166px; }
.lx .svg-lbl { font-size: 10px; letter-spacing: .08em; }

/* Overview clock, checklist, countdown */
.lx .hand-f { fill: rgba(var(--plat), .14); stroke: rgb(var(--plat)); stroke-width: 1.3; stroke-linejoin: round; }
.lx .sec { stroke: rgb(var(--plat)); stroke-width: 1; }
.lx .sec-c { fill: none; stroke: rgb(var(--plat)); stroke-width: 1; }
.lx .sec-p { r: 2.6px; }
.lx .skr { fill: var(--art-dim); }
.lx .cd-num { font: 400 15px/1 var(--mono); fill: var(--text); letter-spacing: .06em; }
html.js .lx .hand, html.js .lx .hub, html.js .lx .skr, html.js .lx .svg-lbl, html.js .lx .cd-num { opacity: 0; }
html.js .lx.on .hand, html.js .lx.on .hub, html.js .lx.on .skr, html.js .lx.on .svg-lbl, html.js .lx.on .cd-num { opacity: 1; transition: opacity .9s var(--ease) 1s; }
/* Overview: the mosaic of modules */
.lx .ov-t { fill: rgba(var(--plat), .03); stroke: rgba(var(--plat), .3); stroke-width: 1; }
.lx .ov-bar { fill: rgba(var(--plat), .14); stroke: rgba(var(--plat), .55); stroke-width: .8; }
.lx .ov-nowl { stroke: rgb(var(--plat)); stroke-width: 1.1; }
.lx .ov-hd { stroke: rgb(var(--plat)); stroke-linecap: round; }
.lx .ov-hd.hh { stroke-width: 1.6; } .lx .ov-hd.mh { stroke-width: 1.1; } .lx .ov-hd.sh { stroke-width: .6; stroke: rgba(var(--plat), .7); }
.lx .ov-dot { fill: rgba(var(--plat), .7); }
.lx .ov-dot.blink { animation: ovblink 2.4s var(--ease) infinite; }
@keyframes ovblink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.lx .ov-cal { fill: rgba(var(--plat), .05); stroke: rgba(var(--plat), .3); stroke-width: .8; transition: fill .5s var(--ease), stroke .5s var(--ease); }
.lx .ov-cal.act { fill: rgba(var(--plat), .35); stroke: rgb(var(--plat)); }
.lx .ov-sheen { animation: ovsheen 7s cubic-bezier(.5, 0, .3, 1) 3.2s infinite; }
@keyframes ovsheen { 0% { transform: translateX(0); } 45%, 100% { transform: translateX(650px); } }
html.js .lx .ov-t, html.js .lx .ov-g { opacity: 0; }
html.js .lx .ov-t { transform: translateY(6px); }
html.js .lx.on .ov-t { opacity: 1; transform: none; transition: opacity .7s var(--ease) calc(.15s + var(--i) * 90ms), transform .9s var(--ease-out) calc(.15s + var(--i) * 90ms); }
html.js .lx.on .ov-g { opacity: 1; transition: opacity .8s var(--ease) calc(.6s + var(--i) * 90ms); }
/* Tools: the simulator and four calculators */
.lx .ln.tl-main { stroke-width: 2.2; }
html.js .lx .tl-run { opacity: 0; }
html.js .lx.on .tl-run { opacity: 1; transition: opacity .6s var(--ease) 2.6s; }
.lx .tl-b { fill: rgba(var(--plat), .12); stroke: rgba(var(--plat), .6); stroke-width: .9; transform-box: fill-box; }
.lx .tl-b.up { fill: rgba(var(--plat), .5); stroke: rgb(var(--plat)); transform-origin: 50% 100%; }
.lx .tl-b.dn { transform-origin: 50% 0; }
html.js .lx .tl-b { transform: scaleY(0); }
html.js .lx.on .tl-b { transform: none; transition: transform 1s var(--ease-out) 1.3s; }
html.js .lx.on .tl-b.up { transition-delay: 1.6s; }
/* Library: pages turning */
.lx .lb-pg { fill: var(--card-a); stroke: rgb(var(--plat)); stroke-width: 1.3; stroke-linejoin: round; opacity: 0;
  transform-box: view-box; transform-origin: 280px 110px; }
html.js .lx.on .lb-pg { animation: lbturn 5.6s cubic-bezier(.55, .05, .35, 1) infinite; animation-delay: calc(2.2s + var(--k) * .35s); }
@keyframes lbturn { 0% { opacity: 0; transform: scaleX(1); } 4% { opacity: 1; transform: scaleX(1); } 30% { opacity: 1; transform: scaleX(-1); } 34%, 100% { opacity: 0; transform: scaleX(-1); } }
html.js .lx .lb-t { opacity: 0; }
html.js .lx.on .lb-t { opacity: 1; transition: opacity 1s var(--ease) 1s; }
/* Settings: the movement */
.lx .gr .hub { stroke-width: 1.3; }
/* Backtesting replay */
.lx .scrub { stroke-width: 2; }
html.js .lx .knob.run2 { opacity: 0; transform: translateX(0); }
html.js .lx.on .knob.run2 { opacity: 1; transform: translateX(208px); transition: opacity .4s var(--ease) .9s, transform 1.5s var(--ease-out) .9s; }
/* Lab: turning body of points */
.ico3 line { stroke: rgb(var(--plat)); stroke-width: 1; }
.ico3 circle { fill: rgb(var(--plat)); }
.ico3 circle.lead { filter: drop-shadow(0 0 5px rgba(var(--glow), .95)); }

/* Mission world map */
.lx .grat { fill: none; stroke: rgba(var(--plat), .07); stroke-width: .6; }
.lx .land { fill: rgba(var(--plat), .035); stroke: rgba(var(--plat), .55); stroke-width: .7; }
html.js .lx.on .land { transition: stroke-dashoffset 2.6s var(--ease-out) var(--dl); }
.lx .pin path { fill: var(--bg-2); stroke: rgb(var(--plat)); stroke-width: .9; }
.lx .pin circle { fill: rgb(var(--plat)); stroke: none; }
.lx .pin.done path { fill: rgb(var(--plat)); }
.lx .pin.done circle { fill: var(--bg-2); }
html.js .lx .pin { opacity: 0; }
html.js .lx.on .pin { opacity: 1; animation: pindrop .7s var(--ease-out) both; animation-delay: calc(.6s + var(--i) * 110ms); }
@keyframes pindrop { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }

/* entrance of illustrations when their card is in view */
html.js .art .draw { stroke-dasharray: 1200; stroke-dashoffset: 1200; }
html.js .art.on .draw { stroke-dashoffset: 0; transition: stroke-dashoffset 2s var(--ease-out) .2s; }
html.js .art .cdl { transform: scaleY(0); transform-origin: 50% 100%; transform-box: fill-box; }
html.js .art.on .cdl { transform: none; transition: transform .7s var(--ease-out); transition-delay: calc(var(--i) * 35ms); }
html.js .art .dot { opacity: 0; transition: opacity .6s var(--ease); }
html.js .art.on .dot { opacity: 1; }
html.js .art-orbit .node { transition: transform .9s var(--ease-out); transform: scale(.4); opacity: 0; }
html.js .art-orbit.on .node { transform: none; opacity: 1; transition: transform .9s var(--ease-out), opacity .6s; }

/* ---------- Access ---------- */
.access { position: relative; overflow-x: clip; padding: clamp(80px, 10vw, 120px) 0 clamp(100px, 12vw, 160px); }
.access-glow { position: absolute; left: 50%; top: 120px; width: 1100px; height: 700px; transform: translateX(-50%); pointer-events: none; z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(var(--glow), 0.14) 0%, rgba(var(--glow), 0.1344) 8.4%, rgba(var(--glow), 0.1197) 16.8%, rgba(var(--glow), 0.0986) 25.2%, rgba(var(--glow), 0.0742) 33.6%, rgba(var(--glow), 0.0493) 42%, rgba(var(--glow), 0.0268) 50.4%, rgba(var(--glow), 0.0096) 58.8%, rgba(var(--glow), 0) 70%); }
.seg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; margin-top: 10px; border-radius: 10px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.seg button { position: relative; z-index: 1; height: 34px; padding: 0 18px; font-size: 13px; font-weight: 600; color: var(--dim); border-radius: 7px; transition: color .3s; }
.seg button[aria-pressed="true"] { color: var(--text); }
.seg-ind { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 7px; transition: transform .45s var(--ease);
  background: linear-gradient(180deg, rgba(var(--glow), .26), rgba(var(--glow), .10)); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255,255,255,.1); }
.seg[data-bill="y"] .seg-ind { transform: translateX(100%); }

.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; max-width: 1040px; margin: 0 auto; }
.plan { padding: 34px; gap: 0; border-radius: 3px; background: linear-gradient(180deg, rgba(var(--glow), .05), rgba(var(--glow), .02)); }
.plan-name { font-size: 15px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.plan-price { margin-top: 18px; }
.amt { font-family: var(--font); font-weight: 500; letter-spacing: -.04em; font-size: clamp(2.75rem, 4.4vw, 3.5rem); line-height: 1; color: var(--text); }
.amt .num { display: inline-block; }
.cur-post { display: none; }
html[lang="de"] .cur-pre, html[lang="fr"] .cur-pre { display: none; }
html[lang="de"] .cur-post, html[lang="fr"] .cur-post { display: inline; }
.amt .num.flip { animation: flip .5s var(--ease-out); }
@keyframes flip { from { opacity: 0; transform: translateY(.3em); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.plan-per { margin-top: 10px; font-size: 14px; color: var(--dim); min-height: 2.9em; }
.plan-list { list-style: none; padding: 22px 0 0; margin: 18px 0 28px; display: grid; gap: 12px; box-shadow: inset 0 1px 0 var(--line); flex: 1; align-content: start; }
.plan-list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 15px; color: var(--muted); }
.plan-list .ic { margin-top: 3px; color: rgb(var(--plat)); }
.plan-list .pl-all { font-weight: 600; }
.plan-btn { width: 100%; }
.plan-plus > .plan-name::after { content: none; }
#payNote { margin-top: 18px; }
.plan-free { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; justify-items: center; justify-self: center; width: 100%; max-width: 760px; text-align: center; padding: 38px; }
.plan-free { background: linear-gradient(180deg, rgba(var(--glow), .09), rgba(var(--glow), .03)); box-shadow: inset 0 1px 0 rgba(var(--plat), .55); }
.pf-main { display: grid; align-content: start; }
.pf-text { margin-top: 0; color: var(--muted); font-size: 15.5px; line-height: 1.6; max-width: 54ch; }
.pf-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.steps-wrap { margin-top: clamp(80px, 10vw, 120px); }
.steps-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.qr { display: flex; align-items: center; gap: 12px; }
.qr-code { width: 72px; height: 72px; padding: 6px; background: #fff; border-radius: 10px; box-shadow: 0 0 0 1px var(--line-2); }
.qr-code svg { width: 100%; height: 100%; }
.qr figcaption { font-size: 12px; line-height: 1.4; color: var(--dim); }
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }
.step { gap: 14px; padding: 24px; min-height: 200px; border-radius: 3px; background: linear-gradient(180deg, rgba(var(--glow), .05), rgba(var(--glow), .02)); }
.step-n { font-size: 13px; color: var(--dim); }
.step-ic { font-size: 26px; color: rgb(var(--plat)); }
.step p { color: var(--muted); font-size: 15px; margin-top: auto; }
.step p b { color: var(--text); font-weight: 600; }
.steps-cta { margin-top: 26px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.steps-cta .fine { max-width: 60ch; }


/* ---------- Advisory banner ---------- */
.adv-wrap { padding-bottom: clamp(100px, 12vw, 150px); }
.adv { position: relative; isolation: isolate; overflow: hidden; border-radius: 3px; padding: clamp(40px, 5vw, 64px) var(--gutter); display: grid; justify-items: center; text-align: center; gap: 20px;
  background: linear-gradient(180deg, rgba(var(--glow), .055), rgba(var(--glow), .02)); box-shadow: inset 0 1px 0 rgba(var(--plat), .3); }
.adv-light { display: none; }
.adv .lede { max-width: 52ch; }
.adv .btn { margin-top: 8px; }

/* ---------- Partner guide (partner/) ---------- */
.pg-hero { padding-top: calc(var(--nav-h) + clamp(56px, 8vw, 110px)); display: grid; gap: 22px; justify-items: start; max-width: 980px; }
.pg-hero { justify-items: center; text-align: center; margin: 0 auto; }
.pg-hero .lede { max-width: 72ch; }
.pg-lede span { display: block; }
.pg-lede span + span { margin-top: 20px; }
.pg-intro { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; margin-top: clamp(48px, 6vw, 80px); }
.pg-partner, .pg-start { padding: 32px; gap: 18px; border-radius: 3px; background: linear-gradient(180deg, rgba(var(--glow), .05), rgba(var(--glow), .02)); }
.pg-partner .plan-list { margin: 4px 0 0; padding-top: 18px; }
.pl-more { color: var(--dim); font-style: italic; }
.pg-start { justify-content: space-between; }
.pg-start p { color: var(--muted); font-size: 15px; line-height: 1.6; }
.pg-start .btn { align-self: start; }
.pg-steps { padding: clamp(90px, 11vw, 150px) var(--gutter) clamp(100px, 12vw, 150px); }
.pg-steps > .h2 { margin-bottom: clamp(36px, 5vw, 56px); }
.tl { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; position: relative; max-width: 860px; }
.tl::before { content: ''; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 1px; background: linear-gradient(180deg, rgba(var(--plat), .4), rgba(var(--plat), .08)); }
.tl-step { display: grid; grid-template-columns: 48px 1fr; gap: 20px; align-items: start; }
.tl-n { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; font-size: 13px; color: var(--text);
  background: linear-gradient(180deg, var(--card-a), var(--card-b)); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255,255,255,.08); }
.tl-card { padding: 24px 26px; gap: 14px; border-radius: 3px; background: linear-gradient(180deg, rgba(var(--glow), .05), rgba(var(--glow), .02)); }
.tl-card .card-title { font-size: 1.2rem; }
.tl-list { margin: 0; padding: 0 0 0 4px; list-style: none; display: grid; gap: 8px; }
.tl-list li { position: relative; padding-left: 18px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.tl-list li::before { content: ''; position: absolute; left: 0; top: .7em; width: 6px; height: 1px; background: rgb(var(--plat)); }
.tl-list b { color: var(--text); font-weight: 600; }
.tl-last .btn { align-self: start; margin-top: 6px; }
.pg-risk { margin-top: clamp(56px, 8vw, 96px); max-width: 78ch; font-size: 11px; line-height: 1.6; color: var(--dim); opacity: .75; }
.pg .foot-base { box-shadow: inset 0 1px 0 var(--line); }
.pg-transfer { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px 40px; }
.card.pg-transfer { padding: 28px 32px; }
.pg-transfer .pt-copy { display: grid; gap: 10px; max-width: 62ch; }
.pt-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.pg-start.pg-transfer .btn { align-self: center; }
@media (max-width: 860px) { .pg-intro { grid-template-columns: 1fr; } .pg-transfer { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .tl-step { grid-template-columns: 1fr; gap: 10px; } .tl::before { display: none; } .pg-start .btn { width: 100%; } .pt-cta { flex-direction: column; } }

/* ---------- Footer ---------- */
.foot { position: relative; isolation: isolate; overflow: hidden; box-shadow: inset 0 1px 0 var(--line); }
.foot-glow { position: absolute; left: 50%; bottom: -260px; width: 1300px; height: 420px; transform: translateX(-50%); z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(var(--glow), .30), transparent 70%); }
.foot-in { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; padding-top: 64px; padding-bottom: 56px; }
.foot-brand { display: grid; gap: 14px; align-content: start; }
.foot-brand p { color: var(--muted); font-size: 14px; }
.foot-col { display: grid; gap: 10px; align-content: start; font-size: 14px; }
.foot-col p { font-weight: 600; margin-bottom: 4px; }
.foot-col a { color: var(--muted); transition: color .2s; }
.foot-col a:hover { color: var(--text); }
.foot-base { padding-top: 22px; padding-bottom: calc(26px + env(safe-area-inset-bottom)); box-shadow: inset 0 1px 0 var(--line); font-size: 13px; color: var(--dim); text-align: center; }

/* ---------- Dialog ---------- */
.dlg { width: min(520px, calc(100vw - 32px)); border: 0; padding: 0; border-radius: 22px; color: var(--text);
  background: linear-gradient(180deg, var(--card-a), var(--card-b)); box-shadow: 0 40px 120px -20px rgba(0,0,0,.7), inset 0 0 0 1px var(--line-2); }
.dlg::backdrop { background: rgba(2, 5, 12, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dlg[open] { animation: dlg-in .45s var(--ease-out); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
.dlg-form { padding: 28px; display: grid; gap: 16px; }
.dlg-head { display: flex; align-items: center; justify-content: space-between; }
.dlg-head h2 { font-size: 22px; font-weight: 600; letter-spacing: -.022em; }
.field { display: grid; gap: 7px; }
.field span { font-size: 13px; font-weight: 600; color: var(--muted); }
.field input, .field textarea { font: inherit; font-size: 16px; color: var(--text); background: var(--field); border: 0; border-radius: 10px; padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--line-2); resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--focus); }
.field [aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px #E07A7A; }
.field-err { font-size: 13px; color: #E89A9A; }
/* the application form: wider, two columns, scrolls inside */
.dlg.dlg-wide { width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.dlg-head > div { display: grid; gap: 6px; }
.dlg-head { align-items: flex-start; gap: 16px; }
.dlg-sub { color: var(--muted); font-size: 15px; line-height: 1.5; }
.dlg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: end; }
.dlg-wide .field, .dlg-wide .dlg-head > div { min-width: 0; }
.dlg-wide .field input, .dlg-wide .field select, .dlg-wide .field textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.dlg-wide .dlg-head .btn-icon { flex: none; }
.field select { font: inherit; font-size: 16px; color: var(--text); background: var(--field); border: 0; border-radius: 10px; padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--line-2); }
.field input[type="file"] { padding: 10px 12px; font-size: 14px; color: var(--muted); }
.field input[type="file"]::file-selector-button { font: inherit; font-weight: 600; color: var(--text); background: var(--card-a); border: 0; border-radius: 8px; padding: 8px 12px; margin-right: 12px; box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; }
.check { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 13px; line-height: 1.5; color: var(--muted); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: rgb(var(--plat)); }
@media (max-width: 640px) { .dlg-grid { grid-template-columns: 1fr; } }
[data-theme="light"] .field-err { color: #A33A3A; }

/* ---------- Reveal ---------- */
/* reveal on scroll: opacity and transform only, both run on the compositor */
html.js [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); }
html.js [data-reveal].in { opacity: 1; transform: none; transition: opacity 1s cubic-bezier(.22, 1, .36, 1), transform 1.2s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--d, 0) * 90ms); }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.theming, html.theming * { transition: background-color .4s var(--ease), color .4s var(--ease) !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav-links { gap: 24px; }
  .g-parquet { grid-template-columns: 1fr 1fr; }
  .g-parquet .card:last-child { grid-column: 1 / -1; }
  .g-atelier { grid-template-columns: repeat(2, 1fr); }
  .g-atelier .card, .g-atelier .card-lg { grid-column: span 1; }
  .g-atelier .card-wide { grid-column: 1 / -1; }
  .g-atelier .card:last-child { grid-column: 1 / -1; }
  .room-split { grid-template-columns: 1fr; }
  .atelier { grid-template-columns: 1fr; }
  .at-panel { display: none; }
  .at-item { background: linear-gradient(180deg, var(--card-a), var(--card-b)); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
  .at-item .at-m { display: block; }
  .at-item:not(.on) .card-title { color: var(--text); }
  .plan-free { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .steps { grid-template-columns: 1fr 1fr; }
  /* the labels and their lines only appear where all of them fit; below that the phone stands alone */
  .float, .links { display: none !important; }
}
/* The labels beside the phone are for desktops only: on touch screens without a mouse
   (phones, iPads) the phone stands alone, however wide the screen is. */
@media (hover: none) and (pointer: coarse) { .float, .links { display: none !important; } }
@media (max-width: 860px) {
  .nav-in { grid-template-columns: 1fr auto; }
  .nav-links { display: none; }
  .room > .room-head { grid-template-columns: 1fr; }
  .room > .room-head .lede { justify-self: start; }
  .card-row { grid-template-columns: 1fr; padding: 26px; }
  .card-row .art { order: -1; }
  .card-wide, .card-flip { grid-template-columns: 1fr; padding: 26px 26px 0; min-height: 0; }
  .card-flip .card-copy { order: 0; }
  .card-wide .card-copy { padding-bottom: 0; }
  .foot-in { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  :root { --nav-h: 74px; }
  .nav .brand span { display: none; }
  .nav-cta .ic { display: none; }
  .brand-logo img { width: 52px; height: 52px; }
  .nav .btn-icon { width: 38px; height: 38px; }
  .nav-cta.btn { height: 40px; padding: 0 14px; font-size: 14px; }
  .nav-end { gap: 10px; }
  .step { min-height: 0; }
  .hero-copy .cta-row { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; }
  .stage { height: calc(230px * 2.2 + 16px); }
  .phone { --pw: 230px; }
  .float { display: none !important; }
  /* on a phone the house is seen close up and fills the rest of the first screen */
  .house { flex: 1; display: flex; align-items: center; width: 100%; aspect-ratio: auto; margin: clamp(8px, 2vh, 24px) 0 12px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%), linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%), linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
  .house-in { position: relative; flex: none; width: 200%; left: -50%; top: auto; }
  .g-parquet, .g-atelier, .g-societe, .biblio, .steps { grid-template-columns: 1fr; }
  .g-parquet .card:last-child, .g-atelier .card:last-child { grid-column: auto; }
  .steps-head { flex-direction: column; align-items: start; }
  .qr { display: none; }
  .steps-cta .btn { width: 100%; }

  .plan { padding: 26px; }
  .foot-col { gap: 0; }
  .foot-col a { padding: 10px 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .art * { transition: none !important; animation: none !important; }
  .fl, .wins image, .house-spot { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .lit { --lit: 100% !important; transition: none !important; }
  html.js .house-sk * { stroke-dashoffset: 0 !important; transition: none !important; }
  [data-theme="dark"] .house-sk { opacity: 0 !important; }
  html.js .hero-copy > *, html.js [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .stage { --p: 1 !important; }
  .btn, .btn::after, .seg-ind, .lang-ind, .card::before, .card::after { transition-duration: .01s !important; }
  .amt .num.flip, .dlg[open] { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav::before { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ==========================================================================
   Materials (07.10.2026)
   Rooms: lacquer and platinum, like a watch box. A deep lacquered body,
   a brushed platinum edge across the top, and light falling from that
   edge into the drawing. The cards stand on a fine architectural grid of
   hairlines that runs on beyond them, the blueprint of the house.
   Access and Advisory: liquid glass, the material of the platform buttons.
   ========================================================================== */
:root, [data-theme="dark"] {
  --lq-a: #101a2b; --lq-b: #080d17; --lq-c: #060a12;
  --pt-edge: linear-gradient(90deg, rgba(111,116,124,.5), #d6d9de 20%, #8f959d 48%, #e6e8ec 76%, rgba(111,116,124,.5));
  --cone: rgba(196, 210, 232, .13);
  --bp: rgba(176, 196, 228, .085);
}
[data-theme="light"] {
  --lq-a: #fdfcf9; --lq-b: #f6f3ee; --lq-c: #f1ede6;
  --pt-edge: linear-gradient(90deg, rgba(80,84,92,.35), #8a8f97 20%, #3e4249 48%, #9da2aa 76%, rgba(80,84,92,.35));
  --cone: rgba(255, 255, 255, .9);
  --bp: rgba(30, 33, 38, .075);
}

/* the blueprint behind each room */
.room .grid, .room .biblio, .room .orga { position: relative; isolation: isolate; }
.room .grid::before, .room .biblio::before, .room .orga::before { content: ''; position: absolute; inset: -56px -1px; z-index: -1; pointer-events: none;
  border-left: 1px solid var(--bp); border-right: 1px solid var(--bp);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(180deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
.g-parquet::after, .biblio::after { content: ''; position: absolute; inset: -56px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--bp), var(--bp)) calc(50% - 14px) 0 / 1px 100% no-repeat, linear-gradient(var(--bp), var(--bp)) calc(50% + 14px) 0 / 1px 100% no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(180deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
.g-societe::after { content: ''; position: absolute; inset: -56px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--bp), var(--bp)) calc(33.33% - 9px) 0 / 1px 100% no-repeat, linear-gradient(var(--bp), var(--bp)) calc(33.33% + 19px) 0 / 1px 100% no-repeat,
    linear-gradient(var(--bp), var(--bp)) calc(66.66% - 19px) 0 / 1px 100% no-repeat, linear-gradient(var(--bp), var(--bp)) calc(66.66% + 9px) 0 / 1px 100% no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(180deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
.grid, .biblio { gap: 28px; }
.room .card { margin-block: 0; }

/* the lacquered case */
.card { border-radius: 12px; padding: 0; gap: 0; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, var(--lq-a), var(--lq-b) 58%, var(--lq-c));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .035), 0 50px 80px -50px rgba(0, 0, 0, .95);
  transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out); }
[data-theme="light"] .card { box-shadow: 0 0 0 1px rgba(40, 34, 24, .08), inset 0 0 0 1px rgba(255, 255, 255, .7), 0 40px 70px -48px rgba(60, 48, 30, .35); }
/* brushed platinum edge */
.card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 3; pointer-events: none;
  background: var(--pt-edge); box-shadow: 0 1px 0 rgba(0, 0, 0, .55); }
/* light falling from the edge */
.card::after { content: ''; position: absolute; left: 8%; right: 8%; top: 2px; height: 70%; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 100% at 50% 0%, var(--cone), transparent 72%); opacity: .75; transition: opacity .8s var(--ease); }
.card > * { position: relative; z-index: 1; }
.card > .art { height: 252px; border-radius: 0; background: none; }
.card > .art::after { display: none; }
.card .card-copy { padding: 22px 30px 30px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  background: linear-gradient(180deg, rgba(0, 0, 0, .16), transparent 60%); }
[data-theme="light"] .card .card-copy { box-shadow: inset 0 1px 0 rgba(40, 34, 24, .06); background: linear-gradient(180deg, rgba(40, 34, 24, .03), transparent 60%); }
@media (hover: hover) {
  .card:hover { transform: translateY(-3px); }
  .card:hover::after { opacity: 1; }
}
.card-row { padding: 0; gap: 0; grid-template-columns: 1fr minmax(260px, .95fr); }
.card-row .card-copy { padding: 34px; box-shadow: none; background: none; }
.card-row > .art { height: 260px; }
/* L'Atelier: the drawing panel is the same case */
.at-panel { border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, var(--lq-a), var(--lq-b) 58%, var(--lq-c));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .035), 0 50px 80px -50px rgba(0, 0, 0, .95); }
[data-theme="light"] .at-panel { box-shadow: 0 0 0 1px rgba(40, 34, 24, .08), inset 0 0 0 1px rgba(255, 255, 255, .7), 0 40px 70px -48px rgba(60, 48, 30, .35); }
.at-panel::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 3; background: var(--pt-edge); box-shadow: 0 1px 0 rgba(0, 0, 0, .55); }
.at-panel::after { content: ''; position: absolute; left: 8%; right: 8%; top: 2px; bottom: auto; height: 70%; background: radial-gradient(50% 100% at 50% 0%, var(--cone), transparent 72%); opacity: .75; }
.at-item.on, .at-item:focus-visible { box-shadow: inset 2px 0 0 0 transparent; background: none; }
.at-item.on { box-shadow: inset 1px 0 0 rgba(var(--plat), .18); }
.at-item.on::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 2px; background: var(--pt-edge); background-size: 100% 100%; }

/* ---------- Liquid glass: access and advisory ---------- */
/* On touch screens the glass keeps its look with a denser fill instead of a live
   backdrop blur, which would be recomputed on every frame while scrolling */
.plan, .adv, .step, .tl-card, .pg-partner, .pg-start { isolation: isolate; border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .025) 42%, rgba(255, 255, 255, .012) 100%), rgba(12, 18, 30, .5);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(0, 0, 0, .35), 0 34px 70px -40px rgba(0, 0, 0, .9); }
.plan::before, .adv::before, .step::before, .tl-card::before, .pg-partner::before, .pg-start::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, .07) 36%, rgba(255, 255, 255, .03) 64%, rgba(255, 255, 255, .14));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.plan::after, .adv::after, .step::after, .tl-card::after, .pg-partner::after, .pg-start::after { content: none; }
.plan > *, .step > *, .tl-card > *, .pg-partner > *, .pg-start > * { position: relative; z-index: 1; }
.plan:hover { transform: none; }
.plan-free { background: linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .035) 42%, rgba(255, 255, 255, .02) 100%), rgba(16, 24, 40, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .35), 0 40px 80px -40px rgba(0, 0, 0, .9); }
.plan-free::before { background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .12) 36%, rgba(255, 255, 255, .05) 64%, rgba(255, 255, 255, .22)); }
/* The way in stands apart: a rim of polished chrome. A 3px band carries the
   reflections of chrome (bright sky, dark horizon, light ground) between a dark
   outer edge and a dark inner bevel; one narrow specular highlight and a weaker
   counter-light travel slowly round it, and only that highlight throws a soft
   glow outward. Runs only while the card is on screen. */
@property --cr { syntax: '<angle>'; inherits: true; initial-value: 20deg; }
@property --cr2 { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
.card.plan-free { --rim: 1.5px; overflow: visible; animation: chrome 12s linear infinite; animation-play-state: paused;
  box-shadow: inset 0 0 0 calc(var(--rim) + .5px) rgba(0, 0, 0, .45), 0 40px 80px -40px rgba(0, 0, 0, .9); }
.card.plan-free.vis { animation-play-state: running; }
@keyframes chrome { to { --cr: 380deg; } }
.card.plan-free::before { inset: 0; height: auto; padding: var(--rim); opacity: 1; z-index: 3;
  background:
    conic-gradient(from var(--cr), rgba(255, 255, 255, 0) 0deg, #FFFFFF 12deg, rgba(255, 255, 255, 0) 24deg, rgba(255, 255, 255, 0) 180deg, rgba(255, 255, 255, .55) 191deg, rgba(255, 255, 255, 0) 203deg, rgba(255, 255, 255, 0) 360deg),
    conic-gradient(from 205deg, #E6EAEF, #59606A 7%, #F9FAFC 13%, #2E333A 22%, #B4BBC4 31%, #474D56 40%, #F2F4F7 48%, #282C32 58%, #9CA3AD 67%, #3C424A 77%, #EDF0F3 86%, #636A74 93%, #E6EAEF); }
.card.plan-free > .pf-glint { position: absolute; inset: -3px; z-index: 0; border-radius: 25px; padding: 4.5px; pointer-events: none;
  background: conic-gradient(from var(--cr), rgba(240, 245, 255, 0) 3deg, rgba(240, 245, 255, .95) 12deg, rgba(240, 245, 255, 0) 21deg, rgba(240, 245, 255, 0) 184deg, rgba(240, 245, 255, .4) 191deg, rgba(240, 245, 255, 0) 198deg, rgba(240, 245, 255, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  filter: blur(1.5px); opacity: 1; }
/* the wide, soft halo of the same light */
.card.plan-free > .pf-glint.wide { display: none;
  background: conic-gradient(from var(--cr), rgba(214, 226, 246, 0) 0deg, rgba(214, 226, 246, .8) 12deg, rgba(214, 226, 246, 0) 30deg, rgba(214, 226, 246, 0) 360deg); }
[data-theme="light"] .card.plan-free { box-shadow: 0 0 0 1px rgba(30, 26, 20, .35), inset 0 0 0 var(--rim) transparent, inset 0 0 0 calc(var(--rim) + 1px) rgba(30, 26, 20, .18), 0 30px 60px -36px rgba(60, 48, 30, .35); }
[data-theme="light"] .card.plan-free::before { background:
    conic-gradient(from var(--cr), rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, .95) 12deg, rgba(255, 255, 255, 0) 26deg, rgba(255, 255, 255, 0) 180deg, rgba(255, 255, 255, .45) 191deg, rgba(255, 255, 255, 0) 204deg, rgba(255, 255, 255, 0) 360deg),
    conic-gradient(from 205deg, #D7DCE2, #4A5059 7%, #F4F6F8 13%, #23272D 22%, #9EA5AF 31%, #3A3F47 40%, #E6E9ED 48%, #1E2126 58%, #8A919C 67%, #30353C 77%, #E1E5E9 86%, #555C66 93%, #D7DCE2); }
[data-theme="light"] .card.plan-free > .pf-glint { background: conic-gradient(from var(--cr), rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, .9) 12deg, rgba(255, 255, 255, 0) 30deg, rgba(255, 255, 255, 0) 360deg); opacity: .9; }
@media (prefers-reduced-motion: reduce) { .card.plan-free { animation: none; } }
/* colour behind the glass, so it reads as glass. The light eases out (no hard stop at
   the edge), so it fades without a visible ring. */
.access, .adv-wrap { position: relative; }
.access::before, .adv-wrap::before { content: ''; position: absolute; inset: 10% 0 0; z-index: -1; pointer-events: none;
  background: radial-gradient(34% 40% at 24% 60%, rgba(66, 96, 156, 0.2) 0%, rgba(66, 96, 156, 0.1921) 8.4%, rgba(66, 96, 156, 0.171) 16.8%, rgba(66, 96, 156, 0.1409) 25.2%, rgba(66, 96, 156, 0.106) 33.6%, rgba(66, 96, 156, 0.0704) 42%, rgba(66, 96, 156, 0.0383) 50.4%, rgba(66, 96, 156, 0.0137) 58.8%, rgba(66, 96, 156, 0) 70%),
    radial-gradient(30% 36% at 78% 40%, rgba(120, 140, 182, 0.14) 0%, rgba(120, 140, 182, 0.1344) 8.4%, rgba(120, 140, 182, 0.1197) 16.8%, rgba(120, 140, 182, 0.0986) 25.2%, rgba(120, 140, 182, 0.0742) 33.6%, rgba(120, 140, 182, 0.0493) 42%, rgba(120, 140, 182, 0.0268) 50.4%, rgba(120, 140, 182, 0.0096) 58.8%, rgba(120, 140, 182, 0) 70%); }
[data-theme="light"] .plan, [data-theme="light"] .adv, [data-theme="light"] .step, [data-theme="light"] .tl-card, [data-theme="light"] .pg-partner, [data-theme="light"] .pg-start {
  background: linear-gradient(180deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .6) 42%, rgba(255, 255, 255, .5) 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(40, 34, 24, .06), 0 30px 60px -40px rgba(60, 48, 30, .3); }
[data-theme="light"] .plan::before, [data-theme="light"] .adv::before, [data-theme="light"] .step::before, [data-theme="light"] .tl-card::before, [data-theme="light"] .pg-partner::before, [data-theme="light"] .pg-start::before {
  background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .4) 36%, rgba(40, 34, 24, .06) 64%, rgba(40, 34, 24, .1)); }
/* A fine grain over the glow. Safari draws soft gradients on a dark ground in visible
   steps (rings); the grain breaks the steps up so the light falls off smoothly. It only
   lies where the glow is and is balanced light/dark, so the colour stays the same. */
.access::after, .adv-wrap::after, .access-glow::after { content: ''; position: absolute; pointer-events: none;
  background: url(assets/grain.png) 0 0 / 64px 64px; }
.access::after, .adv-wrap::after { inset: 10% 0 0; z-index: -1;
  -webkit-mask-image: radial-gradient(34% 40% at 24% 60%, #000, transparent 70%), radial-gradient(30% 36% at 78% 40%, #000, transparent 70%);
  mask-image: radial-gradient(34% 40% at 24% 60%, #000, transparent 70%), radial-gradient(30% 36% at 78% 40%, #000, transparent 70%); }
.access-glow::after { inset: 0;
  -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #000, transparent 70%); mask-image: radial-gradient(50% 50% at 50% 50%, #000, transparent 70%); }
[data-theme="light"] .access::after, [data-theme="light"] .adv-wrap::after, [data-theme="light"] .access-glow::after { content: none; }
[data-theme="light"] .access::before, [data-theme="light"] .adv-wrap::before {
  background: radial-gradient(34% 40% at 24% 60%, rgba(150, 170, 200, 0.22) 0%, rgba(150, 170, 200, 0.2113) 8.4%, rgba(150, 170, 200, 0.1881) 16.8%, rgba(150, 170, 200, 0.155) 25.2%, rgba(150, 170, 200, 0.1166) 33.6%, rgba(150, 170, 200, 0.0774) 42%, rgba(150, 170, 200, 0.0421) 50.4%, rgba(150, 170, 200, 0.0151) 58.8%, rgba(150, 170, 200, 0) 70%),
    radial-gradient(30% 36% at 78% 40%, rgba(200, 180, 150, 0.16) 0%, rgba(200, 180, 150, 0.1536) 8.4%, rgba(200, 180, 150, 0.1368) 16.8%, rgba(200, 180, 150, 0.1127) 25.2%, rgba(200, 180, 150, 0.0848) 33.6%, rgba(200, 180, 150, 0.0563) 42%, rgba(200, 180, 150, 0.0306) 50.4%, rgba(200, 180, 150, 0.011) 58.8%, rgba(200, 180, 150, 0) 70%); }

@media (max-width: 860px) {
  .room .grid::before, .room .biblio::before, .room .orga::before, .g-parquet::after, .biblio::after, .g-societe::after { display: none; }
  .card-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .card .card-copy { padding: 20px 22px 24px; }
  .card > .art { height: 220px; }
}
/* glass surfaces keep their own padding (they share the .card class) */
.card.plan { padding: 34px; gap: 0; overflow: visible; }
.card.plan-free { padding: 38px; row-gap: 30px; }
.card.step { padding: 24px; gap: 14px; }
.card.tl-card { padding: 24px 26px; gap: 14px; }
.card.pg-partner, .card.pg-start { padding: 32px; gap: 18px; }
.card.plan:hover, .card.step:hover, .card.tl-card:hover, .card.pg-partner:hover, .card.pg-start:hover { transform: none; }
@media (max-width: 640px) { .card.plan { padding: 26px; } .card.plan-free { padding: 28px; } }

/* ---------- Pricing folded away ---------- */
.more { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 30px; text-align: center; }
.more-btn { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 6px 0 2px; font-size: 15px; font-weight: 500; color: var(--muted);
  border-bottom: 1px solid var(--line-2); transition: color .3s var(--ease), border-color .3s var(--ease); }
.more-btn:hover { color: var(--text); border-color: rgba(var(--plat), .5); }
.more-btn .ic { font-size: 15px; transition: transform .5s var(--ease-out); }
.more-btn[aria-expanded="true"] .ic { transform: rotate(180deg); }
.plans-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .8s var(--ease-out); }
.plans-more.open { grid-template-rows: 1fr; }
.pm-in { overflow: hidden; min-height: 0; }
.plans-more:not(.open) .pm-in { visibility: hidden; transition: visibility 0s .8s; }
.pm-head { display: grid; justify-items: center; gap: 16px; padding: 40px 0 28px; text-align: center; }
.pm-lede { color: var(--muted); font-size: 16px; }
.plans-paid { padding-bottom: 6px; }
.plans-paid .plan { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .9s var(--ease-out); }
.plans-more.open .plans-paid .plan { opacity: 1; transform: none; transition-delay: .25s; }
.plans-more.open .plans-paid .plan:nth-child(2) { transition-delay: .35s; }

/* ---------- The curtain between light and dark ----------
   One drape per side. It waits gathered at the edge, unfolds across the
   page (its folds stretch as it opens out), the hem swings behind the
   rail, and it gathers back into tight folds at the sides. */
.curtain { position: fixed; inset: 0; z-index: 400; pointer-events: all; overflow: hidden; transition: opacity .55s var(--ease); }
.curtain.gone { opacity: 0; }
.c-rail { position: absolute; left: 0; right: 0; top: 0; height: 26px; z-index: 3; opacity: 0; transition: opacity .5s var(--ease);
  background: linear-gradient(180deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); }
.curtain.closed .c-rail { opacity: 1; }
.cs { position: absolute; top: -1%; bottom: 0; width: 51%; }
.cs-l { left: 0; } .cs-r { right: 0; }
.cs-sw { position: absolute; inset: 0; transform-origin: 50% 0; }
.curtain.closed .cs-l .cs-sw { animation: swing-l 1.6s cubic-bezier(.3, .1, .25, 1) both; }
.curtain.closed .cs-r .cs-sw { animation: swing-r 1.6s cubic-bezier(.3, .1, .25, 1) both; }
.curtain.opening .cs-l .cs-sw { animation: swing-r 1.5s cubic-bezier(.3, .1, .25, 1) both; }
.curtain.opening .cs-r .cs-sw { animation: swing-l 1.5s cubic-bezier(.3, .1, .25, 1) both; }
@keyframes swing-l { 0% { transform: skewX(0); } 30% { transform: skewX(4deg); } 58% { transform: skewX(-1.6deg); } 80% { transform: skewX(.6deg); } 100% { transform: skewX(0); } }
@keyframes swing-r { 0% { transform: skewX(0); } 30% { transform: skewX(-4deg); } 58% { transform: skewX(1.6deg); } 80% { transform: skewX(-.6deg); } 100% { transform: skewX(0); } }
.cv { position: absolute; inset: 0; will-change: transform; transition: transform 1.15s cubic-bezier(.62, .02, .22, 1);
  --c0: #0a1424; --sheen: rgba(150, 172, 214, .2); --deep: rgba(0, 0, 0, .58); --soft: rgba(0, 0, 0, .26);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, transparent 12%, rgba(150, 172, 214, .05) 30%, transparent 55%, transparent 78%, rgba(0, 0, 0, .45) 100%),
    repeating-linear-gradient(90deg, transparent 0 31px, var(--soft) 47px, transparent 63px, transparent 79px),
    repeating-linear-gradient(90deg, var(--deep) 0px, var(--soft) 26px, var(--sheen) 52px, var(--soft) 74px, var(--deep) 113px),
    repeating-linear-gradient(90deg, transparent 0 140px, rgba(150, 172, 214, .07) 175px, transparent 210px, transparent 251px),
    var(--c0); }
.to-light .cv { --c0: #ebe2d2; --sheen: rgba(255, 255, 255, .72); --deep: rgba(112, 86, 54, .3); --soft: rgba(112, 86, 54, .13);
  background:
    linear-gradient(180deg, rgba(90, 68, 40, .28) 0%, transparent 12%, rgba(255, 255, 255, .18) 30%, transparent 55%, transparent 80%, rgba(90, 68, 40, .2) 100%),
    repeating-linear-gradient(90deg, transparent 0 31px, var(--soft) 47px, transparent 63px, transparent 79px),
    repeating-linear-gradient(90deg, var(--deep) 0px, var(--soft) 26px, var(--sheen) 52px, var(--soft) 74px, var(--deep) 113px),
    repeating-linear-gradient(90deg, transparent 0 140px, rgba(255, 255, 255, .25) 175px, transparent 210px, transparent 251px),
    var(--c0); }
/* gathered at the outer edge, waiting */
.cs-l .cv { transform-origin: 0 50%; transform: scaleX(.06); box-shadow: 22px 0 40px -14px rgba(0, 0, 0, .6); }
.cs-r .cv { transform-origin: 100% 50%; transform: scaleX(.06); box-shadow: -22px 0 40px -14px rgba(0, 0, 0, .6); }
.to-light .cs-l .cv { box-shadow: 22px 0 40px -14px rgba(70, 52, 30, .3); } .to-light .cs-r .cv { box-shadow: -22px 0 40px -14px rgba(70, 52, 30, .3); }
.curtain.closed .cv { transform: scaleX(1); }
.curtain.opening .cv { transition: transform 1.3s cubic-bezier(.55, .02, .2, 1); transform: scaleX(.06); }
/* the meeting edges carry a fine platinum hem */
.cv::after { content: ''; position: absolute; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, rgba(225, 230, 238, .1), rgba(225, 230, 238, .6) 50%, rgba(225, 230, 238, .1)); }
.cs-l .cv::after { right: 0; } .cs-r .cv::after { left: 0; }

/* rebuilding the house: everything snaps back at once, then draws again */
.house.rebuild, .house.rebuild * { transition: none !important; animation: none !important; }

.acc-note { margin-top: 18px; }

.amt-word { font-family: var(--font); font-weight: 500; letter-spacing: -.03em; font-size: clamp(1.9rem, 3vw, 2.4rem); line-height: 1.1; display: block; max-width: 14ch; }

.pf-text .br { display: block; }
.tl-note { margin-top: 4px; padding: 12px 14px; border-radius: 10px; font-size: 14px; line-height: 1.55; color: var(--text); background: rgba(var(--glow), .07); box-shadow: inset 2px 0 0 rgba(var(--plat), .55); }


/* Capital */
.lx .cap-area { opacity: 0; }
html.js .lx.on .cap-area { opacity: 1; transition: opacity 1.4s var(--ease) .9s; }
.lx .cap-arc { fill: none; stroke: rgb(var(--plat)); stroke-width: 2.2; stroke-linecap: round; transition: stroke-dashoffset 1.8s var(--ease-out); transition-delay: calc(.8s + var(--i) * .25s); }
html.js .lx.on .cap-arc { stroke-dashoffset: var(--to); }
.lx .cap-glint { fill: rgb(var(--plat)); filter: drop-shadow(0 0 4px rgba(var(--glow), .95)); opacity: 0; }
html.js .lx.on .cap-glint { opacity: .9; transition: opacity .6s var(--ease) 2.2s; }
.lx .cap-ring .ico { opacity: 1; }
/* Lab */
.scan { fill: rgba(var(--glow), .05); stroke: rgba(var(--plat), .35); stroke-width: .8; stroke-dasharray: 3 4; }
.ico3.inner line { stroke: rgb(var(--plat)); stroke-width: .7; }
.ico3.inner circle { fill: rgb(var(--plat)); }
.sig circle { fill: rgb(var(--plat)); filter: drop-shadow(0 0 4px rgba(var(--glow), .95)); }

/* Journal */
.lx .jc { fill: rgba(var(--plat), .05); stroke: rgba(var(--plat), .2); stroke-width: .8; transition: fill .6s var(--ease), stroke .6s var(--ease); transition-delay: calc(.5s + var(--i) * 45ms); }
html.js .lx.on .jc.l1 { fill: rgba(var(--plat), .16); }
html.js .lx.on .jc.l2 { fill: rgba(var(--plat), .34); }
html.js .lx.on .jc.l3 { fill: rgba(var(--plat), .7); stroke: rgb(var(--plat)); }
.lx .jd { font-size: 8px; }
.lx .pen { transform: translate(222px, 130px); opacity: 0; }
.lx .pen .ln { fill: rgba(var(--plat), .12); stroke-width: 1.1; }
html.js .lx.on .pen { opacity: 1; animation: penrun 1.6s cubic-bezier(.45, 0, .25, 1) 1.1s both; }
@keyframes penrun { 0% { transform: translate(222px, 130px); } 100% { transform: translate(316px, 100px); opacity: 0; } }
/* Charts */
.lx .xh { stroke: rgba(var(--plat), .55); stroke-width: 1; stroke-dasharray: 3 3; }
.lx .xh-d { fill: rgb(var(--plat)); filter: drop-shadow(0 0 4px rgba(var(--glow), .9)); }
html.js .lx .xhair { opacity: 0; }
html.js .lx.on .xhair { opacity: 1; transition: opacity .8s var(--ease) 1.2s; }
html.js .lx .pane { opacity: 0; transform: translateY(8px); }
html.js .lx.on .pane { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .9s var(--ease-out); transition-delay: calc(var(--i) * 140ms); }
/* Tools */
.lx .tl-out { font: 400 22px/1 var(--mono); fill: var(--text); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
html.js .lx .tl-needle, html.js .lx .tl-out { opacity: 0; }
html.js .lx.on .tl-needle, html.js .lx.on .tl-out { opacity: 1; transition: opacity .8s var(--ease) .9s; }


/* Charts: one live chart, timeframe tabs */
.lx .tf-b rect { fill: none; stroke: rgba(var(--plat), .22); stroke-width: .8; transition: fill .5s var(--ease), stroke .5s var(--ease); }
.lx .tf-b text { font: 400 9.5px/1 var(--mono); letter-spacing: .08em; fill: var(--dim); transition: fill .5s var(--ease); }
.lx .tf-b.act rect { fill: rgba(var(--plat), .14); stroke: rgba(var(--plat), .6); }
.lx .tf-b.act text { fill: var(--text); }
.lx .cset { opacity: 0; transition: opacity .7s var(--ease); }
.lx .cset.act { opacity: 1; }
.lx .cset .cd { transition: transform .8s var(--ease-out); transition-delay: calc(var(--i) * 35ms); }
.lx .cset:not(.act) .cd { transform: scaleY(.2); }
.lx .ma { stroke: rgba(var(--plat), .75); stroke-width: 1.4; fill: none; }
.lx .lastp { stroke: rgba(var(--plat), .45); stroke-width: .8; }
.lx .ptag { fill: rgba(var(--plat), .9); }
.lx .ptag-t { font: 600 7.5px/1 var(--mono); letter-spacing: .1em; fill: var(--bg); }

@media (hover: none), (max-width: 860px) {
  .plan, .adv, .step, .tl-card, .pg-partner, .pg-start { -webkit-backdrop-filter: none; backdrop-filter: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .025) 42%, rgba(255, 255, 255, .012) 100%), rgba(12, 18, 30, .82); }
  [data-theme="light"] .plan, [data-theme="light"] .adv, [data-theme="light"] .step, [data-theme="light"] .tl-card, [data-theme="light"] .pg-partner, [data-theme="light"] .pg-start { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Lenis smooth scrolling (its own stylesheet, inline) */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* tablets and phones: the Atelier list is shown as cards, so no active-item bar */
@media (max-width: 1080px) { .at-item.on::before { display: none; } }
/* access card on one column: air between text and list, both buttons full width on phones */
@media (max-width: 640px) { .pf-cta { flex-direction: column; } .pf-cta .btn { width: 100%; } }

/* Pricing: consent before Stripe, fine print */
.pay-ok { max-width: 560px; margin: 22px auto 0; text-align: left; }
#payNote { margin-top: 10px; }
.pay-fine { margin-top: 12px; }
.pay-fine a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pay-fine a:hover { color: var(--text); }
/* Footer: cancellation button reads like the legal links around it */
.foot-btn { all: unset; cursor: pointer; color: var(--muted); transition: color .2s; }
.foot-btn:hover { color: var(--text); }
.foot-btn:focus-visible { outline: 2px solid rgb(var(--plat)); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 640px) { .foot-btn { padding: 10px 0; } }
/* Cancellation dialog */
#cxlDialog [hidden] { display: none !important; }
.cxl-fields { display: grid; gap: 16px; }
.cxl-done { display: grid; gap: 14px; }
.cxl-ok { font-size: 16px; font-weight: 600; }
.cxl-sum { margin: 0; padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,.05); font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); white-space: pre-wrap; }