/* Piano Legend: overview page */

.eyebrow-blue { color: #2997ff; }
.eyebrow-ink { color: var(--ink-2); }
.light .eyebrow-ink { color: #6e6e73; }

/* ============================================================ HERO */
.hero { position: relative; min-height: 100svh; padding-top: calc(var(--nav-h) + clamp(28px, 6vh, 72px)); text-align: center; overflow: hidden; }
.hero-copy { position: relative; z-index: 2; padding: 0 22px; }
.hero-eyebrow { color: var(--on-dark-2); margin-bottom: 10px; }
.hero h1 { max-width: 13em; margin: 0 auto; }
@media (max-width: 734px) { .hero h1 { font-size: clamp(40px, 11.5vw, 56px); } }
.hero-media { position: relative; z-index: 1; width: 100%; max-width: 1920px; margin: clamp(-48px, -3vw, -12px) auto 0; aspect-ratio: 16 / 9; max-height: 74svh;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 78%, transparent 100%); }
@media (min-width: 735px) {
  /* the still is shifted right on wide screens: fade its sides too, so its edge never shows */
  .hero-media {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 78%, transparent 100%), linear-gradient(90deg, transparent 2%, #000 9%, #000 93%, transparent 99%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 78%, transparent 100%), linear-gradient(90deg, transparent 2%, #000 9%, #000 93%, transparent 99%);
    mask-composite: intersect; }
}
.hero-video, .hero-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; transform: translateX(3.5%); }
@media (max-width: 734px) {
  .hero-media { aspect-ratio: 4 / 5; max-height: 64svh; margin-top: 0; }
  .hero-video, .hero-still { object-position: 47% 56%; transform: none; }
}
.hero-still { opacity: 1; transition: opacity 1.2s var(--ease); }
.hero.video-on .hero-still { opacity: 0; }
.hero-foot { position: relative; z-index: 2; margin-top: clamp(-90px, -5vw, -24px); display: grid; justify-items: center; gap: 26px; padding-bottom: clamp(56px, 8vh, 96px); }
.hero-meta { font-size: 14px; line-height: 1.43; letter-spacing: -.016em; color: var(--on-dark-2); text-align: center; }
@media (max-width: 734px) { .hero-meta .sep { display: none; } .hero-meta .line2 { display: block; } }
.nav-3d { flex: none; display: inline-flex; align-items: center; font-size: 12px; color: var(--link-dark); white-space: nowrap; }
.nav-3d:hover { text-decoration: underline; text-underline-offset: .18em; }
@media (max-width: 734px) { .nav-3d { margin-left: auto; font-size: 13px; } .nav .nav-3d + .nav-cta { margin-left: 0; } }
/* the Paris trial is dated: after the last slot, [data-paris] steps aside for [data-after-paris] */
.paris-over [data-paris], html:not(.paris-over) [data-after-paris] { display: none !important; }

/* ============================================================ STATEMENT */
.statement { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); }
/* order: promise first (jeu, lumière, pédagogie), then the instrument (design, intérieur, toucher, son) */
.game { padding-bottom: clamp(72px, 9vw, 120px); }
.lightguide { padding-top: clamp(72px, 9vw, 120px); }
/* Conçu par des musiciens: a calm, reassuring block after the light */
.pedagogy { padding-top: clamp(72px, 9vw, 120px); }
.pedagogy h2 { margin-top: 10px; }
.pedagogy-lead { max-width: 30em; margin: 26px auto 0; }
.pedagogy-lead + .pedagogy-lead { margin-top: 18px; }
.statement-text { max-width: 15.5em; }
/* computer: a little smaller than the other big titles (mobile keeps the t-xl size) */
@media (min-width: 735px) { .statement-text { font-size: clamp(40px, 4.6vw, 62px); max-width: 17em; } }
.statement-text .w { color: #3a3a3c; transition: color .5s var(--ease); }
.statement-text .w.on { color: var(--on-dark); }
.statement-text .st-gap { display: block; height: .5em; }
/* a translated page (Google Translate, Safari, Edge): the translator rewrites the words and moves them around, so lighting
   them in the original order made the light jump across the sentence. The light then sweeps down the lines instead,
   whatever words are there. Same two colours as the words. */
.statement-text { --st-off: #3a3a3c; }
.statement-text.st-sweep { --sweep: 0; --edge: 2.4em;
  background: linear-gradient(180deg, var(--on-dark) calc(var(--sweep) * (100% + var(--edge)) - var(--edge)), var(--st-off) calc(var(--sweep) * (100% + var(--edge))));
  -webkit-background-clip: text; background-clip: text; }
/* the glow comes from the block's drop shadow (typo-glow.css): a text-shadow would paint over the clipped light */
.statement-text.st-sweep, .statement-text.st-sweep * { color: transparent !important; text-shadow: none !important; transition: none !important; }

/* ============================================================ DESIGN (light) */
.design h2 { margin-top: 10px; }
.design-hero { width: min(1440px, 100vw); margin: clamp(24px, 4vw, 56px) auto 0;
  -webkit-mask-image: radial-gradient(ellipse 72% 68% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 68% at 50% 50%, #000 62%, transparent 100%); }
.design-hero img { width: 100%; }
.design-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 6vw, 96px); align-items: center; margin-top: clamp(24px, 4vw, 64px); }
.design-detail { border-radius: 28px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -30px rgba(0,0,0,.18); }
.design-detail img { width: 100%; }
.design-detail figcaption { padding: 18px 26px 22px; }
@media (max-width: 734px) { .design-grid { grid-template-columns: 1fr; } }

/* ============================================================ TOUCH */
.touch-media { width: 100%; margin-top: clamp(32px, 5vw, 72px); position: relative;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 85%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 85%, transparent 100%); }
.touch-media img { width: 100%; max-height: 82svh; object-fit: cover; }
.touch-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 6vw, 96px); margin-top: clamp(32px, 5vw, 64px); align-items: end; }
.stats { display: grid; grid-template-columns: repeat(2, auto); gap: 32px; justify-content: start; }
.stats dt { margin-bottom: 6px; }
.stat-num { font-family: var(--font); font-size: clamp(40px, 4.4vw, 64px); line-height: 1; font-weight: 600; letter-spacing: -.015em; }
.stat-num .frac { font-size: .6em; vertical-align: .55em; margin-left: 1px; }
.stat-unit { display: block; font-size: 17px; font-weight: 600; color: var(--on-dark-2); margin-top: 8px; letter-spacing: -.022em; }
.sound-chip { margin-top: 30px; padding-left: 16px; border-left: 2px solid; border-image: linear-gradient(180deg, #31a1f8, #8f66ff) 1; }
.sound-chip-title { font-family: var(--font); font-size: clamp(21px, 2vw, 26px); line-height: 1.2; font-weight: 600; letter-spacing: .007em; margin-bottom: 4px; }
@media (max-width: 734px) { .touch-grid { grid-template-columns: 1fr; } .stats { gap: 22px; } }

/* ============================================================ LIGHT GUIDE */
.light-lead { max-width: 34em; margin: 26px auto 0; }
.led-demo { margin-top: clamp(40px, 6vw, 88px); }
.led-stage { position: relative; border-radius: 24px; overflow: hidden; background: #000; }
.led-stage img { width: 100%; }
.led-layer { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; }
.led-glow { position: absolute; width: 5.2%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(.6); opacity: 0;
  background: radial-gradient(closest-side, #fff 0, #fff 7%, var(--c) 17%, color-mix(in srgb, var(--c) 55%, transparent) 34%, color-mix(in srgb, var(--c) 18%, transparent) 58%, transparent 80%);
  transition: opacity .35s var(--ease), transform .45s var(--ease-out); }
.led-glow.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.led-glow.dim { opacity: .38; transform: translate(-50%, -50%) scale(.8); }
.key-press { position: absolute; background: rgba(0,0,0,.28); opacity: 0; transition: opacity .12s; border-radius: 1px; }
.key-press.on { opacity: 1; }
.key-press.tint { background: color-mix(in srgb, var(--c) 32%, transparent); mix-blend-mode: normal; }
.finger-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin-top: 26px; align-items: center; }
.finger { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px 0 12px; border-radius: 999px; background: #1d1d1f; color: var(--on-dark);
  font-size: 15px; letter-spacing: -.01em; transition: background .25s, box-shadow .25s; }
.finger .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); }
.finger:hover, .finger.active { background: #2c2c2e; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 70%, transparent); }
.play-demo { margin-left: 8px; height: 40px; min-height: 40px; padding: 0 18px; font-size: 15px; }
.demo-note { text-align: center; margin-top: 14px; }
.light-macro { margin-top: clamp(56px, 8vw, 120px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 15%, #000 85%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 15%, #000 85%, transparent 100%); }
.light-macro img { width: 100%; max-height: 86svh; object-fit: cover; }
@media (max-width: 734px) {
  .led-stage { border-radius: 14px; overflow-x: auto; }
  .play-demo { margin-left: 0; }
}

/* ============================================================ INSIDE (sequence) */
.inside { position: relative; padding-top: clamp(96px, 14vw, 180px); }
.inside-intro .t-lead { margin-top: 22px; }
.seq { position: relative; height: 430vh; margin-top: clamp(24px, 4vw, 48px); }
.seq-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.seq-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.seq-labels { position: absolute; inset: 0; pointer-events: none; }
.seq-label { position: absolute; display: flex; align-items: center; gap: 10px; transform: translate(0, -50%); opacity: 0;
  transition: opacity .6s var(--ease), transform .8s var(--ease-out); white-space: nowrap; }
.seq-label .line { width: clamp(28px, 4vw, 70px); height: 1px; background: rgba(245,245,247,.45); }
.seq-label .dot { width: 7px; height: 7px; border-radius: 50%; background: #f5f5f7; box-shadow: 0 0 0 4px rgba(245,245,247,.12); flex: none; }
.seq-label .txt { font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: #f5f5f7; }
.seq-label .txt small { display: block; font-weight: 400; color: var(--on-dark-2); font-size: 12px; }
.seq-label.left { flex-direction: row-reverse; transform: translate(-100%, -50%); text-align: right; }
.seq-label.on { opacity: 1; }
.seq-progress { position: absolute; left: 50%; bottom: 28px; width: 120px; height: 2px; background: rgba(255,255,255,.14); transform: translateX(-50%); border-radius: 2px; overflow: hidden; }
.seq-progress span { display: block; height: 100%; width: 100%; background: #f5f5f7; transform-origin: left; transform: scaleX(0); }
.inside-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: clamp(24px, 4vw, 40px); }
.card { background: var(--tile-dark); border-radius: 28px; overflow: hidden; }
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card-copy { padding: 26px 28px 30px; display: grid; gap: 8px; }
.inside-note { margin-top: 28px; padding-bottom: clamp(40px, 6vw, 80px); }
@media (max-width: 900px) { .inside-cards { grid-template-columns: 1fr; } .seq-label .txt small { display: none; } }

/* ============================================================ SOUND */
.sound { background: radial-gradient(ellipse 70% 60% at 75% 55%, #0d1622 0%, #000 70%); }
.sound-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.sound .t-lead { margin-top: 26px; max-width: 26em; }
.sound .cta-row { margin-top: 32px; }
.listen { gap: 10px; }
.listen-icon { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.listen.playing .listen-icon { width: 10px; height: 12px; border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.sound-note { margin-top: 18px; }
.sound-media { position: relative; border-radius: 32px; overflow: hidden; }
.sound-media img { width: 100%; }
.eq { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; gap: 5px; height: 26px; align-items: flex-end; opacity: 0; transition: opacity .4s; }
.eq span { width: 4px; height: 6px; border-radius: 2px; background: #f5f5f7; }
.eq.on { opacity: 1; }
.eq.on span { animation: eq 0.9s ease-in-out infinite alternate; }
.eq.on span:nth-child(2) { animation-delay: -.3s; } .eq.on span:nth-child(3) { animation-delay: -.6s; } .eq.on span:nth-child(4) { animation-delay: -.15s; } .eq.on span:nth-child(5) { animation-delay: -.45s; }
@keyframes eq { from { height: 4px; } to { height: 26px; } }
@media (max-width: 734px) { .sound-grid { grid-template-columns: 1fr; } }

/* ============================================================ GAME */
.game { overflow: hidden; }
.game-glow { position: absolute; inset: 10% -20% auto -20%; height: 70%; background: radial-gradient(ellipse 45% 50% at 50% 50%, rgba(143,102,255,.28), rgba(49,161,248,.12) 45%, transparent 70%); filter: blur(20px); pointer-events: none; }
.game h2 { margin-top: 12px; }
.game-lead { max-width: 30em; margin: 28px auto 0; }
.modules { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: clamp(48px, 7vw, 96px); }
.module { background: linear-gradient(180deg, #1a1a1c, #111112); border-radius: 24px; padding: 28px 24px 30px; position: relative; overflow: hidden; min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.module::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(160deg, rgba(49,161,248,.6), rgba(143,102,255,.2) 40%, rgba(238,164,177,.5)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .55; }
.module-ico { position: absolute; top: 22px; left: 24px; font-size: 26px; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.module h3 { font-family: var(--font); font-size: 21px; font-weight: 600; letter-spacing: .01em; text-transform: uppercase; }
.ranks { margin-top: clamp(48px, 6vw, 80px); }
/* the game on a phone or a tablet */
.play-anywhere { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); align-items: center; margin-top: clamp(72px, 10vw, 140px); }
.device-pair { position: relative; padding-bottom: 11%; }
.devices figcaption { margin-top: 26px; max-width: 34em; }
.tablet { border-radius: clamp(18px, 2.2vw, 30px); padding: clamp(7px, .9vw, 12px); background: #0b0b0d;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 0 0 1px #000, 0 50px 120px -30px rgba(49,161,248,.38), 0 30px 60px rgba(0,0,0,.6); }
.tablet img { width: 100%; border-radius: clamp(11px, 1.4vw, 19px); }
/* the phone held sideways, like a game */
.phone { position: absolute; right: -4%; bottom: 0; width: 47%; border-radius: clamp(14px, 2vw, 26px); padding: clamp(4px, .5vw, 7px); background: #0b0b0d;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 0 0 1px #000, 0 30px 60px rgba(0,0,0,.75); }
.phone img { width: 100%; aspect-ratio: 19.5 / 9; object-fit: cover; border-radius: clamp(10px, 1.5vw, 20px); }
.play-copy { display: grid; gap: 18px; }
.play-copy .t-lead { font-size: clamp(19px, 1.6vw, 21px); }
@media (max-width: 900px) { .play-anywhere { grid-template-columns: minmax(0, 1fr); } .devices { width: min(560px, 94%); margin-inline: auto; } .phone { right: -2%; } }
.ranks-track { position: relative; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 0; padding-top: 26px; }
.ranks-track::before { content: ""; position: absolute; left: 5%; right: 5%; top: 6px; height: 2px; background: #2c2c2e; }
.ranks-track::after { content: ""; position: absolute; left: 5%; right: 5%; top: 6px; height: 2px; background: var(--brand-gradient); transform-origin: left; transform: scaleX(var(--rank, 0)); transition: transform 2.2s var(--ease-out); }
.ranks-track span { position: relative; text-align: center; font-size: 12px; letter-spacing: .02em; color: var(--on-dark-2); }
.ranks-track span::before { content: ""; position: absolute; left: 50%; top: -24px; width: 10px; height: 10px; border-radius: 50%; background: #2c2c2e; transform: translateX(-50%); transition: background .4s, box-shadow .4s; }
.ranks-track span.lit { color: var(--on-dark); }
.ranks-track span.lit::before { background: #f5f5f7; }
.ranks-track span.legend { font-weight: 700; }
.ranks-track span.legend.lit { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ranks-track span.legend.lit::before { background: #eea4b1; box-shadow: 0 0 14px #eea4b1; width: 14px; height: 14px; top: -26px; }
@media (max-width: 1068px) { .modules { grid-template-columns: repeat(5, 230px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; } .module { scroll-snap-align: start; } }
@media (max-width: 734px) { .ranks-track { grid-template-columns: repeat(5, 1fr); row-gap: 44px; } .ranks-track::before, .ranks-track::after { display: none; } }

/* ============================================================ SPECS (white) */
.spec-table { margin-top: 40px; border-top: 1px solid #d2d2d7; }
.spec-table > div { display: grid; grid-template-columns: minmax(160px, 1fr) 2fr; gap: 24px; padding: 26px 0; border-bottom: 1px solid #d2d2d7; }
.spec-table dt { font-family: var(--font); font-size: 21px; font-weight: 600; letter-spacing: .01em; }
.spec-table dd { font-size: 17px; line-height: 1.6; color: #1d1d1f; }
@media (max-width: 734px) { .spec-table > div { grid-template-columns: 1fr; gap: 6px; } }

/* ============================================================ TRY (3D now, Paris in November) */
.try-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: clamp(40px, 5vw, 64px); }
.paris-over .try-grid { grid-template-columns: minmax(0, 1fr); }
.try-tile { position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; background: var(--tile-dark); min-height: clamp(480px, 46vw, 580px);
  display: flex; flex-direction: column; justify-content: flex-end; }
.try-copy { position: relative; z-index: 2; padding: clamp(28px, 3vw, 44px); display: grid; gap: 10px; justify-items: start; }
.try-copy .btn, .try-copy .link { margin-top: 8px; }
.tile-kicker { font-size: 17px; font-weight: 600; color: var(--on-dark-2); letter-spacing: -.022em; }
.try-3d > img { position: absolute; inset: 0 0 auto; width: 100%; height: 70%; object-fit: cover; object-position: 50% 45%; mix-blend-mode: lighten; }
.try-3d::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 28%, var(--tile-dark) 66%); }
.try-paris { background: radial-gradient(110% 70% at 50% 0%, #15284a 0%, #0d1220 52%, var(--tile-dark) 100%); }
.try-mark { position: absolute; top: clamp(36px, 5vw, 60px); left: 0; right: 0; text-align: center; font-family: var(--font); font-weight: 600; }
.try-dates { font-size: clamp(88px, 11vw, 150px); line-height: 1; letter-spacing: -.03em; }
.try-dates i { font-style: normal; color: #3a3a3c; margin: 0 .06em; }
.try-month { margin-top: 10px; font-size: clamp(21px, 2vw, 28px); color: #d2d2d7; }
.countdown { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(41, 151, 255, .16);
  color: #2997ff; font-family: var(--font-text); font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.countdown::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2997ff; box-shadow: 0 0 10px #2997ff; }
.countdown[hidden] { display: none; }
.countdown.small { margin: 0 0 0 8px; padding: 3px 10px; font-size: 13px; gap: 6px; vertical-align: 1px; }
.countdown.small::before { width: 6px; height: 6px; }
@media (max-width: 734px) {
  .try-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .try-tile { min-height: 460px; border-radius: 22px; }
}

/* ============================================================ FOUNDER (light) */
.founder-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 6vw, 88px); align-items: center; }
/* square: Adam and the Piano Legend he plays, logo included */
.founder-photo { border-radius: 28px; overflow: hidden; aspect-ratio: 1; background: #1d1d1f; }
.founder-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 54% 50%; }
.founder-copy { display: grid; gap: 20px; }
.founder-copy .t-lead { font-size: clamp(19px, 1.6vw, 21px); }
@media (max-width: 734px) { .founder-grid { grid-template-columns: minmax(0, 1fr); } .founder-photo { aspect-ratio: 4 / 3; border-radius: 22px; } }

/* ============================================================ PRE-ORDER */
.offer h2 { margin-top: 10px; }
.offer-media { width: min(1200px, calc(100vw - 32px)); margin: clamp(28px, 4vw, 56px) auto 0; }
.offer-media img { width: 100%; mix-blend-mode: lighten;
  /* fade only the empty studio margin around the piano, never the piano itself */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2.4%, #000 97.6%, transparent 100%), linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 2.4%, #000 97.6%, transparent 100%), linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-composite: intersect; }
.offer-buy { display: grid; justify-items: center; gap: 4px; margin-top: clamp(12px, 2vw, 24px); }
.offer-name { font-family: var(--font); font-size: clamp(24px, 2.2vw, 28px); font-weight: 600; letter-spacing: .007em; }
.offer-price { font-family: var(--font); font-size: clamp(48px, 5vw, 64px); line-height: 1.1; font-weight: 600; letter-spacing: -.015em; }
.offer-buy .cta-row { margin-top: 24px; }
.offer-note { margin-top: 18px; }
.offer-terms { margin-top: 4px; line-height: 1.5; }

/* ============================================================ SHEETS (trial booking, pre-order) */
html.has-sheet { overflow: hidden; }
.sheet [hidden] { display: none !important; }
.sheet { width: min(460px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 40px); padding: 0; border: 0; border-radius: 26px; overflow: auto; overscroll-behavior: contain;
  background: #1c1c1e; color: var(--on-dark); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 120px rgba(0, 0, 0, .7); }
.sheet::backdrop { background: rgba(0, 0, 0, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sheet[open] { animation: sheet-in .45s var(--ease-out); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(18px) scale(.985); } }
.sheet-body { padding: 34px 28px 26px; }
.sheet-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .1); color: #d2d2d7; font-size: 20px; line-height: 1; transition: background .2s; }
.sheet-close:hover { background: rgba(255, 255, 255, .18); }
.sheet-kicker { font-size: 14px; font-weight: 600; color: var(--link-dark); }
.sheet-title { font-family: var(--font); font-size: 34px; line-height: 1.1; font-weight: 600; margin: 4px 40px 6px 0; }
.sheet-sub { font-size: 14px; line-height: 1.43; color: var(--on-dark-2); }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; margin-top: 20px; border-radius: 12px; background: rgba(255, 255, 255, .08); }
.seg button { padding: 9px 10px; border-radius: 9px; font-size: 14px; color: #d2d2d7; transition: background .2s, color .2s; }
.seg button[aria-checked="true"] { background: #f5f5f7; color: #000; font-weight: 600; }
.slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.slots button { padding: 10px 0; border-radius: 10px; font-size: 14px; font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); transition: background .15s; }
.slots button:hover:not(:disabled) { background: rgba(255, 255, 255, .12); }
.slots button:disabled { cursor: default; background: none; color: #48484a; text-decoration: line-through; }
.slots button[aria-checked="true"] { background: #0071e3; box-shadow: none; color: #fff; font-weight: 600; }
.sheet-notice { margin-top: 12px; font-size: 14px; line-height: 1.43; color: var(--on-dark-2); }
.sheet-notice:empty { display: none; }
.sheet-notice.err { color: #ff6961; }
.fields { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.fields input { min-width: 0; height: 46px; padding: 0 14px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  color: var(--on-dark); font: inherit; font-size: 16px; letter-spacing: -.01em; }
.fields input::placeholder { color: #86868b; }
.fields input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--link-dark); }
.fields .full { grid-column: span 2; }
.fields .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.check { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 13px; line-height: 1.4; color: #a1a1a6; cursor: pointer; }
.check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0071e3; }
.btn.full { display: flex; width: 100%; margin-top: 18px; }
.btn:disabled { opacity: .4; cursor: default; }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sheet-fine { margin-top: 10px; font-size: 12px; line-height: 1.4; color: var(--on-dark-2); text-align: center; }
.sheet-state { margin-top: 22px; display: grid; gap: 8px; }
.sheet-state h3 { font-family: var(--font); font-size: 24px; line-height: 1.2; font-weight: 600; }
#bookDone { justify-items: center; text-align: center; padding-top: 6px; }
.sheet-body.paid { text-align: center; padding-top: 40px; }
.sheet-body.paid .done-icon { margin: 0 auto 14px; }
.sheet-body.paid .sheet-title { margin-right: 0; }
.sheet-body.paid .btn.ghost { margin-top: 10px; }
#bookDone .btn { margin-top: 14px; }
.done-icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #0071e3; color: #fff; font-size: 24px; margin-bottom: 6px; }
.prod { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-top: 18px; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, .05); }
.prod img { width: 84px; height: 56px; object-fit: cover; border-radius: 9px; }
.prod-name, .prod-price { font-weight: 600; }
.gift-note { margin-top: 12px; font-size: 14px; line-height: 1.43; color: #a1a1a6; }
#orderSheet:not(.gift) .for-gift, #orderSheet.gift .for-self { display: none; }
.select { position: relative; display: block; margin-top: 16px; padding: 8px 16px 6px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.select:focus-within { box-shadow: inset 0 0 0 2px var(--link-dark); }
.select span { display: block; font-size: 12px; color: var(--on-dark-2); }
.select select { appearance: none; -webkit-appearance: none; width: 100%; padding: 2px 24px 4px 0; border: 0; background: none; color: var(--on-dark); font: inherit; font-size: 16px; outline: none; cursor: pointer; }
.select::after { content: ""; position: absolute; right: 18px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid #86868b; border-bottom: 1.5px solid #86868b; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.lines { margin-top: 16px; border-top: 1px solid rgba(255, 255, 255, .1); }
.lines div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 2px; font-size: 15px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.lines .total { font-weight: 600; border-bottom: 0; }
@media (max-width: 734px) {
  .sheet { width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: 26px 26px 0 0; }
  .sheet[open] { animation: sheet-up .5s var(--ease-out); }
  .sheet-body { padding: 30px 20px calc(24px + env(safe-area-inset-bottom)); }
  @keyframes sheet-up { from { opacity: 0; transform: translateY(48px); } }
}

/* ------------------------------------------------------------ 3D entry points and box contents (2026-10-12) */
.play-copy .more-3d { justify-self: start; }
.offer-incl { margin-top: 16px; font-size: 19px; line-height: 1.4; color: var(--on-dark); }
@media (max-width: 734px) { .nav-inner { gap: 14px; } }
@media (max-width: 400px) { .nav-inner { gap: 10px; } .nav .nav-3d { font-size: 12px; } .nav .nav-cta { padding-inline: 10px; } }

/* "Jouer en 3D": its own identity, a dark pill ringed with the LED gradient. The solid blue stays for buying. */
.btn-3d { color: #f5f5f7; background: linear-gradient(#111113, #111113) padding-box, var(--brand-gradient) border-box; border: 1.5px solid transparent;
  transition: box-shadow .3s var(--ease), transform .2s var(--ease); }
.btn-3d:hover { background: linear-gradient(#1a1a1d, #1a1a1d) padding-box, var(--brand-gradient) border-box; box-shadow: 0 0 22px rgba(143, 102, 255, .35); text-decoration: none; }
.nav-3d.btn-3d { min-height: 28px; padding: 3px 14px; border-radius: 980px; color: #f5f5f7; font-size: 12px; }
.nav-3d.btn-3d:hover { text-decoration: none; }
@media (max-width: 400px) { .nav .nav-3d.btn-3d { padding: 3px 11px; } }

/* every way into the 3D experience is this same pill (2026-10-14): the menu, the hero, right after the statement, and one per section */
.more-3d { margin-top: 30px; }
.play-copy .more-3d { margin-top: 8px; }
/* under the game's opening lines, centred: the first, larger invitation to play */
.game-cta { margin-top: clamp(32px, 4vw, 48px); }
.btn-3d-lg { min-height: 54px; padding: 14px 34px; font-size: 19px; box-shadow: 0 0 34px rgba(143, 102, 255, .22); }
.btn-3d-lg:hover { box-shadow: 0 0 40px rgba(143, 102, 255, .4); }
/* the page's 3D buttons (not the menu's): a soft light in the ring's own colours passes across them now and then.
   Transform only, so it costs nothing to the scroll. */
main .btn-3d { position: relative; isolation: isolate; overflow: hidden; }
main .btn-3d > span { position: relative; z-index: 1; }
main .btn-3d::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(49, 161, 248, .3) 26%, rgba(143, 102, 255, .5) 50%, rgba(238, 164, 177, .32) 74%, transparent);
  mix-blend-mode: plus-lighter;
  transform: translateX(-120%) skewX(-18deg); animation: btn3d-light 6.5s cubic-bezier(.45, 0, .3, 1) 1.2s infinite; }
@keyframes btn3d-light { 0% { transform: translateX(-120%) skewX(-18deg); } 42%, 100% { transform: translateX(200%) skewX(-18deg); } }
/* the menu's button: the very same light as the page's buttons, every 10 s (same 2.7 s crossing) */
.nav-3d.btn-3d { position: relative; isolation: isolate; overflow: hidden; }
.nav-3d.btn-3d > span { position: relative; z-index: 1; }
.nav-3d.btn-3d::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(49, 161, 248, .3) 26%, rgba(143, 102, 255, .5) 50%, rgba(238, 164, 177, .32) 74%, transparent);
  mix-blend-mode: plus-lighter; transform: translateX(-120%) skewX(-18deg); animation: nav3d-light 10s cubic-bezier(.45, 0, .3, 1) 1.2s infinite; }
@keyframes nav3d-light { 0% { transform: translateX(-120%) skewX(-18deg); } 27.3%, 100% { transform: translateX(200%) skewX(-18deg); } }
@media (prefers-reduced-motion: reduce) { main .btn-3d::before, .nav-3d.btn-3d::before { animation: none; opacity: 0; } }

/* ------------------------------------------------------------ the app keeps improving; one year offered with the first series (2026-10-14) */
/* the astronaut grows rank after rank (left), the app keeps improving (right) */
.game-updates { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center; margin-top: clamp(80px, 11vw, 150px); }
.game-updates .t-lead { max-width: 26em; margin-top: 22px; }
.grow { --h: clamp(300px, 34vw, 460px); --p: 0; display: grid; justify-items: center; gap: 24px; }
.grow-stage { position: relative; width: 100%; height: var(--h); }
.grow-stage::before { content: ""; position: absolute; left: 50%; top: 52%; width: min(100%, calc(var(--h) * 1.05)); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(49,161,248,.36), rgba(143,102,255,.16) 45%, transparent 70%); opacity: calc(.4 + var(--p) * .6); transition: opacity 1.4s var(--ease); }
.grow-stage img { position: absolute; left: 50%; bottom: 0; height: calc(var(--h) * var(--fig)); width: auto; max-width: none;
  opacity: 0; transform: translateX(-50%); z-index: 0; transition: opacity 1.1s var(--ease) .35s; }
/* a dissolve: the next astronaut fades in on top while the previous one stays, then the previous one fades away (never a dip to black) */
.grow-stage img.on { opacity: 1; z-index: 1; transition: opacity 1.1s var(--ease); }
.grow.restart .grow-stage img { transition: opacity .8s var(--ease); }
.grow-cap { display: grid; justify-items: center; gap: 12px; }
.grow-name { font-family: var(--font); font-size: 15px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark); transition: opacity .4s var(--ease); }
.grow-name.out { opacity: 0; }
.grow-bar { width: 160px; height: 2px; border-radius: 2px; background: #2c2c2e; overflow: hidden; }
.grow-bar i { display: block; height: 100%; background: var(--brand-gradient); transform-origin: left; transform: scaleX(calc(.1 + var(--p) * .9)); transition: transform 1.2s var(--ease-out); }
@media (max-width: 734px) {
  .game-updates { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .game-updates .t-lead { margin-inline: auto; }
  .grow { --h: min(72vw, 340px); }
}
.offer-gift { margin-top: 2px; font-size: 19px; line-height: 1.4; color: var(--on-dark); }
.offer-gift sup, .spec-table sup { font-size: .6em; line-height: 0; }
.lines .line-gift dd { font-weight: 600; }

/* the ranks track follows the growing astronaut below (2026-10-14): no progress gauge, only the current rank's light is on,
   breathing gently until the next one takes over, in the pink light and gradient name Legend always had */
.ranks-track::after { display: none; }
.ranks-track span { transition: color .8s var(--ease); }
.ranks-track span::before { transition: background .8s var(--ease), box-shadow .8s var(--ease), width .5s var(--ease), height .5s var(--ease), top .5s var(--ease); }
.ranks-track span.now::before { background: #eea4b1; width: 14px; height: 14px; top: -26px; box-shadow: 0 0 14px #eea4b1; animation: voyant 2.1s ease-in-out infinite; }
@keyframes voyant { 50% { box-shadow: 0 0 22px #eea4b1, 0 0 6px #eea4b1; } }
.ranks-track.idle span.now::before { animation-play-state: paused; }
.ranks-track span.now { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-reduced-motion: reduce) { .ranks-track span.now::before { animation: none; } }