/* =====================================================================
   Home page, design rules v3 (docs/DESIGN.md, section 9). One story down a
   single column of paper; one pink dot travels from the hero to the corner
   patch (the calculator) and back among the hundred dots at the end.
   Shared parts (menu, footer, buttons, patch, forms) are in redesign.css.
   ===================================================================== */

/* the page's own ground: these replace the old type defaults (tokens.css) on this page only */
:where(body.v3) { background: var(--paper); color: var(--text); font: 17px/1.6 var(--body); }
:where(body.v3) :is(h1, h2, h3) { color: var(--ink); text-wrap: balance; margin: 0; }
:where(body.v3) h2 { font: 700 clamp(28px, 4.2vw, 46px)/1.08 var(--display); letter-spacing: -.03em; }
:where(body.v3 main) p { font: inherit; color: inherit; margin: 0; }
:where(body.v3 main) a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:where(body.v3 main) a:hover { text-decoration-thickness: 2px; }
:where(body.v3 main) :focus-visible { outline: 3px solid var(--sky-700); outline-offset: 3px; }
body.v3 main section { position: relative; padding-block: clamp(72px, 11vw, 140px); }

/* hero: sized to its content, the changing product word in pink */
body.v3 main .qhero { padding-block: clamp(40px, 6vw, 80px) 56px; text-align: center; }
/* inner pages: one hero spacing for all (as /associations and /citoyens), only /entreprises is taller for its icons */
body.v3 main .ihero { padding-block: clamp(40px, 6vw, 80px) clamp(56px, 8vw, 96px); }
.qhero h1 { font: 700 clamp(32px, 4.8vw, 60px)/1.06 var(--display); letter-spacing: -.03em; max-width: 19ch; margin: 0 auto; }
.pline { display: block; margin: .06em 0 .04em; }
.pword { display: inline-block; vertical-align: bottom; position: relative; height: 1.08em; overflow: clip; padding: .14em .1em .24em; margin: -.14em -.1em -.24em; box-sizing: content-box; transition: width .45s cubic-bezier(.86,0,.07,1); white-space: nowrap; text-align: left; color: var(--pink); }
.pword > span { display: inline-block; transition: transform .45s cubic-bezier(.86,0,.07,1), opacity .3s; }
.pword.out > span { transform: translateY(-110%); opacity: 0; }
.pword.in > span { transform: translateY(110%); opacity: 0; transition: none; }
.lede3 { max-width: 50ch; margin: 26px auto 0; font-size: clamp(17px, 1.6vw, 19px); color: var(--mute); }
.cta { display: flex; flex-wrap: wrap; gap: 14px 22px; justify-content: center; align-items: center; margin-top: 30px; }
.mk { position: relative; white-space: nowrap; }
.mk svg { position: absolute; left: -3%; width: 106%; bottom: -.26em; height: .42em; overflow: visible; pointer-events: none; }
.mk path { fill: none; stroke-linecap: round; stroke-dasharray: 1 3; animation: draw .9s .5s var(--ease) backwards; }
@keyframes draw { from { stroke-dashoffset: 1.5; } to { stroke-dashoffset: 0; } }

/* the hundred dots */
.hundred { display: grid; grid-template-columns: repeat(50, 1fr); gap: 7px; max-width: 760px; margin: 56px auto 12px; }
.hundred i { display: block; aspect-ratio: 1; border-radius: 50%; background: var(--line); animation: dot .5s var(--ease) backwards; animation-delay: calc(var(--c) * 6ms); }
.hundred i.slot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--pink-100); }
.hundred i.pinked, .hundred i.slot.held { background: var(--pink); box-shadow: none; }
#h2dots i { transition: background-color .25s, transform .3s var(--spring); } #h2dots i.pinked { background: var(--jc, var(--pink)); transform: scale(1.08); } #h2dots i.slot.held { background: var(--pink); }
@keyframes dot { from { transform: scale(.2); opacity: 0; } }
@media (max-width: 640px) { .hundred { grid-template-columns: repeat(20, 1fr); gap: 6px; max-width: 360px; } }

/* the travelling dot: one fixed element, from its slot to the corner and back */
#traveller { position: fixed; left: 0; top: 0; z-index: 38; width: 12px; height: 12px; border-radius: 50%; background: var(--pink); display: grid; place-items: center; cursor: pointer; border: 0; padding: 0; transition: opacity .2s;
  box-shadow: 0 0 0 calc(var(--k, 0) * 4px) #fff, 0 calc(var(--k, 0) * 8px) calc(var(--k, 0) * 22px) calc(var(--k, 0) * -8px) rgba(20,46,98,.45); will-change: transform; }
#traveller.docked { visibility: hidden; }
#traveller .tm { width: 60%; height: 60%; opacity: var(--k, 0); }
#traveller .ring { position: absolute; inset: 0; width: 100%; height: 100%; opacity: var(--k, 0); }
#traveller .ring circle { fill: none; stroke: var(--pink-100); stroke-width: 2.2; stroke-dasharray: 5 4; }
#traveller:hover .ring circle { animation: stitch 1.4s linear infinite; }
#traveller .tip { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); white-space: nowrap; background: var(--ink); color: #fff; font: 600 13px/1 var(--body); padding: 8px 10px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .15s; }
#traveller:hover .tip, #traveller:focus-visible .tip, #traveller.hint .tip { opacity: var(--k, 0); }
#traveller.away, #traveller.hide { opacity: 0; pointer-events: none; }
body.locked #traveller, body.locked .calcpop { visibility: hidden; }
/* phone: no traveller and no corner calculator (it lagged and flickered there, Matisse 28 Oct.); /entreprises has the calculator */
@media (max-width: 760px) { body.v3 :is(#traveller, .calcpop, .e-corner, .pq-corner) { display: none; } }

/* the calculator is born from the corner patch: a circle clip opens from its centre into the stitched panel */
.calcpop { min-width: 0; position: fixed; z-index: 46; right: max(20px, 2vw); bottom: 24px; width: min(440px, calc(100vw - 40px)); padding: 26px 26px 24px; display: grid; gap: 14px; color: var(--text); font: 17px/1.6 var(--body);
  clip-path: circle(30px at calc(100% - 30px) calc(100% - 30px)); visibility: hidden; transition: clip-path .5s var(--ease), visibility 0s .5s; }
.calcpop.open { clip-path: circle(150% at calc(100% - 30px) calc(100% - 30px)); visibility: visible; transition: clip-path .55s var(--ease), visibility 0s; }
.calcpop > :not(.seam) { opacity: 0; transition: opacity .2s; }
.calcpop.open > :not(.seam) { opacity: 1; transition: opacity .3s .18s; }
.cp-head { display: flex; align-items: center; gap: 10px; }
.cp-head p { font: 700 15px var(--display); color: var(--ink); margin: 0; flex: 1; }
.cp-res { display: flex; align-items: center; gap: 16px; padding: 14px 0 4px; border-top: 1px dashed var(--pink-100); }
.cp-dot { width: var(--d, 28px); height: var(--d, 28px); border-radius: 50%; background: var(--pink); flex: none; transition: width .35s var(--spring), height .35s var(--spring); }
.cp-res p { margin: 0; display: grid; }
.cp-big { font: 700 clamp(30px, 4vw, 40px)/1 var(--display); color: var(--pink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cp-big.bump { animation: bump .35s var(--ease); }
@keyframes bump { 40% { transform: translateY(-3px); } }
.cp-res span { font-size: 14px; color: var(--mute); margin-top: 4px; }
.cp-say { color: var(--text); font-size: 16px; margin: 0; }
.cp-say b { color: var(--ink); }
.calcpop .note { margin: 0; font-size: 13px; color: var(--mute); }
.calcpop .b3 { width: 100%; }
@media (max-width: 640px) { .calcpop { right: 20px; left: 20px; width: auto; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); padding: 22px 20px 20px; } }


/* Pourquoi agir: big figure, one line, its source; each small picture answers the pointer */
.facts { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.fact { display: grid; gap: 8px; align-content: start; transition: opacity .3s; }
.facts:hover .fact { opacity: .45; } .facts .fact:hover { opacity: 1; }
.fv { position: relative; height: 84px; display: flex; align-items: flex-end; }
.fn { font: 700 clamp(32px, 3.4vw, 44px)/1.05 var(--display); white-space: nowrap; letter-spacing: -.035em; color: var(--ink); }
.fact p { margin: 0; color: var(--text); font-size: 17px; max-width: 26ch; }
.fact a.fs { font-size: 13px; color: var(--mute); }
.kidsv { gap: 10px; }
.kidsv i { position: relative; width: 26px; height: 42px; transition: transform .35s var(--spring); }
.kidsv i::before { content: ""; position: absolute; left: 50%; top: 0; width: 15px; height: 15px; margin-left: -7.5px; border-radius: 50%; background: var(--deep-100); transition: background-color .25s; }
.kidsv i::after { content: ""; position: absolute; left: 50%; top: 18px; width: 24px; height: 24px; margin-left: -12px; border-radius: 12px 12px 5px 5px; background: var(--deep-100); transition: background-color .25s; }
.kidsv i.one::before, .kidsv i.one::after { background: var(--pink); }
.kidsv i:hover { transform: translateY(-8px); } .kidsv i:not(.one):hover::before, .kidsv i:not(.one):hover::after { background: var(--sky); }
.fact:hover .kidsv i.one { animation: hop .6s var(--spring); }
@keyframes hop { 40% { transform: translateY(-8px); } }
.asev { gap: 16px; height: 84px; }
.ab { position: relative; width: 46px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; cursor: default; }
.ab i { width: 100%; height: calc(var(--h) - 18px); border-radius: 6px 6px 3px 3px; background: rgba(20,46,98,.14); transition: background-color .25s, transform .3s var(--spring); transform-origin: bottom; }
.ab.now i { background: var(--ink); }
.ab em { font: 600 11px var(--body); color: var(--mute); font-style: normal; }
.ab::before { content: attr(data-v); position: absolute; bottom: calc(100% - 6px); left: 50%; transform: translate(-50%, 4px); white-space: nowrap; font: 700 12px var(--display); color: var(--ink); background: #fff; padding: 4px 7px; border-radius: 6px; box-shadow: 0 6px 14px -8px rgba(20,46,98,.5); opacity: 0; transition: opacity .2s, transform .25s var(--ease); pointer-events: none; }
.ab:hover::before { opacity: 1; transform: translate(-50%, 0); } .ab:hover i { transform: scaleY(1.04); } .ab:not(.now):hover i { background: var(--sky); }
.fact:hover .ab i { animation: barup .8s var(--ease) backwards; } .fact:hover .ab.now i { animation-delay: .15s; }
@keyframes barup { from { transform: scaleY(0); } }
.nightv { width: min(270px, 100%); height: 84px; }
.nightv .paint { position: absolute; inset: -4px -6px; width: calc(100% + 12px); height: calc(100% + 8px); transition: transform .5s var(--spring); }
.fact:hover .nightv .paint { transform: scale(1.03); }
.nightv > span { z-index: 1; }
.moon2 { position: absolute; left: 16px; bottom: 14px; width: 46px; height: 46px; }
.moon2::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(circle, rgba(255,199,60,.35), transparent 65%); opacity: .6; transition: opacity .3s, transform .4s var(--ease); }
.moon2 svg { position: relative; width: 100%; height: 100%; fill: var(--sun); }
.fact:hover .moon2::before { opacity: 1; transform: scale(1.15); }
.sp { position: absolute; left: var(--x); top: var(--y); width: calc(var(--s) + 14px); height: calc(var(--s) + 14px); margin: -7px 0 0 -7px; display: grid; place-items: center; }
.sp svg { width: var(--s); height: var(--s); fill: var(--sky); transition: fill .25s, transform .4s var(--spring); }
.sp:hover svg { fill: var(--sun); transform: scale(1.5) rotate(45deg); }
.fact:hover .sp svg { fill: var(--sun-100); }
/* Pourquoi agir: pinned while you scroll; « en France » gives way to « dans le monde » (home.js). The two lists share one cell, so nothing moves */
body.v3 main .whyx { padding-block: 0; }
.whypin { height: 200vh; position: relative; }
.whystick { position: sticky; top: 72px; min-height: calc(100vh - 72px); display: flex; flex-direction: column; justify-content: center; }
.whystick > h2 { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .whypin { height: auto; } .whystick { position: static; min-height: 0; padding-block: clamp(72px, 11vw, 140px); } }
.whystack { display: grid; }
.whystack > .facts[hidden] { display: none; }
.whystack > .facts { grid-area: 1 / 1; transition: opacity .6s var(--ease), transform .6s var(--ease), visibility 0s; }
.whystack > .facts.off { opacity: 0; transform: translateY(10px); visibility: hidden; pointer-events: none; transition: opacity .6s var(--ease), transform .6s var(--ease), visibility 0s .6s; }
/* the child who is not at school: one in six, the same child drawn as a dashed pink outline */
.kidsv i.gone::before, .kidsv i.gone::after { background: transparent; box-shadow: inset 0 0 0 2px var(--pink); }
.kidsv i.gone:hover::before, .kidsv i.gone:hover::after { background: var(--pink-100); }
.fact:hover .kidsv i.gone { animation: hop .6s var(--spring); }
.kidsv i.short { height: 30px; } .kidsv i.short::after { height: 14px; top: 16px; }
@media (max-width: 520px) { .h2link .h2more { display: block; } }
@media (max-width: 860px) { .facts { grid-template-columns: 1fr; gap: 32px; } .facts:hover .fact { opacity: 1; } }

/* Comment, et quand: pinned while you scroll through five steps; the slides move right to left, the paragraph fills word by word */
body.v3 main .howx { padding-block: 0; }
.howpin { height: 330vh; position: relative; }
.howstick { position: sticky; top: 72px; height: calc(100vh - 72px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.howleft { display: grid; gap: 16px; align-content: center; }
.storyp { margin: 0; font: 600 clamp(18px, 1.6vw, 22px)/1.55 var(--display); letter-spacing: -.015em; color: var(--unread); }
:where(body.v3 main) p.storyp { font: 600 clamp(18px, 1.6vw, 22px)/1.55 var(--display); color: var(--unread); }
.storyp > span { cursor: pointer; }
.storyp .w { transition: color .25s; } .storyp .w.lit { color: var(--ink); } .storyp span.on .w.lit.k { color: var(--pink); }
.star { margin: 0; font-size: 13px; color: var(--mute); max-width: 52ch; }
:where(body.v3 main) p.star { font-size: 13px; color: var(--mute); }
.howcta { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 4px; }
.slides { position: relative; height: min(460px, 64vh); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.slidestrip { display: flex; height: 100%; width: 500%; transform: translateX(calc(var(--p, 0) * -20%)); will-change: transform; }
.slide { width: 20%; height: 100%; display: grid; place-items: center; align-content: center; gap: 16px; padding: 28px 28px 44px; text-align: center; }
.slide .cap { font-size: 15px; color: var(--mute); max-width: 34ch; margin: 0; }
.pointer { position: absolute; left: 0; top: 0; width: 30px; height: 30px; z-index: 3; pointer-events: none; transform: translate(var(--cx, -50px), var(--cy, -50px)); filter: drop-shadow(0 3px 4px rgba(20,46,98,.35)); }
.pointer path { fill: var(--ink); stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.pressring { position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid var(--pink); opacity: 0; pointer-events: none; transform: translate(var(--rx, -50px), var(--ry, -50px)) scale(.4); }
.pressring.go { animation: press .6s var(--ease); }
@keyframes press { 0% { opacity: .9; transform: translate(var(--rx), var(--ry)) scale(.4); } 100% { opacity: 0; transform: translate(var(--rx), var(--ry)) scale(1.5); } }
[data-target].hit { box-shadow: 0 0 0 4px var(--pink-100); border-radius: 6px; transition: box-shadow .25s; }
.ticks { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 8px; }
.ticks i { width: 22px; height: 4px; border-radius: 2px; background: var(--line); transition: background-color .3s; }
.ticks i.on { background: var(--pink); }
/* the five pictures */
.cat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: min(420px, 100%); }
.prod { position: relative; background: #fff; border-radius: 10px; padding: 10px; display: grid; gap: 8px; text-align: left; box-shadow: 0 8px 20px -14px rgba(20,46,98,.35); transition: box-shadow .25s; }
.prod .ppic { display: grid; place-items: center; height: 56px; border-radius: 6px; }
.prod .ppic svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.prod .pn { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.prod .patch, .ap .patch { position: absolute; top: -10px; right: -10px; }
.stamp { transform: scale(0); transition: transform .4s var(--spring); }
.hit .stamp { transform: scale(1); }
.assopick { display: grid; gap: 10px; width: min(400px, 100%); text-align: left; }
.ap { position: relative; display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 10px; padding: 12px 14px; box-shadow: 0 8px 20px -14px rgba(20,46,98,.35); }
.ap .apl { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; color: #fff; font: 700 13px var(--display); flex: none; }
.ap b { display: block; color: var(--ink); font-size: 14.5px; } .ap small { color: var(--mute); font-size: 12.5px; }
.prod.pick.hit, .ap.pick.hit { box-shadow: 0 0 0 3px var(--pink-100), 0 8px 20px -14px rgba(20,46,98,.35); }
.decl { width: min(380px, 100%); background: #fff; border-radius: 12px; padding: 18px 20px; text-align: left; box-shadow: 0 10px 26px -16px rgba(20,46,98,.35); display: grid; gap: 4px; }
.decl h4, .doc h4 { margin: 0 0 6px; font: 700 15px var(--display); color: var(--ink); }
.dl { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14.5px; font-variant-numeric: tabular-nums; }
.dl b { color: var(--ink); } .dl .pinkb { color: var(--pink); }
.paybtn { margin-top: 10px; display: grid; place-items: center; height: 44px; border-radius: 6px; background: var(--pink); color: #fff; font-weight: 600; font-size: 15px; transition: transform .2s; }
.paybtn.hit { transform: scale(.96); box-shadow: none; }
.doc { position: relative; width: min(360px, 100%); background: #fff; border-radius: 8px; padding: 20px 22px; text-align: left; font-size: 15px; box-shadow: 0 10px 26px -16px rgba(20,46,98,.35); }
.doc h4 { font-size: 18px; margin-bottom: 10px; }
.doc .l { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.doc .l b { color: var(--ink); }
.rsub { margin: -4px 0 8px; font-size: 13px; color: var(--mute); }
.dlicon { position: absolute; right: 16px; top: 16px; width: 38px; height: 38px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; }
.dlicon svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 860px) {
  .howpin { height: auto; }
  .howstick { position: static; height: auto; grid-template-columns: 1fr; gap: 24px; padding-block: 24px; }
  .slides { order: -1; height: 360px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
  .slides::-webkit-scrollbar { display: none; }
  .slidestrip { transform: none; }
  .slide { scroll-snap-align: start; }
  .ticks { position: sticky; left: 0; width: 100%; bottom: 14px; margin-top: -26px; }
  .storyp .w { color: var(--ink); }
  .pointer, .pressring { display: none; }
  .stamp { transform: scale(1); }
}

/* Où va l'argent: a sentence filled by the scroll, and the coin of a hundred centimes (90 pink, 10 navy) */
.fill { font: 700 clamp(28px, 4.2vw, 46px)/1.14 var(--display); letter-spacing: -.03em; }
:where(body.v3 main) p.fill { font: 700 clamp(28px, 4.2vw, 46px)/1.14 var(--display); }
.fill .w { color: var(--unread); transition: color .25s; }
.fill .w.lit { color: var(--ink); }
.fill .w.key.lit { color: var(--pink); }
.euro-split { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "coin title" "coin says"; gap: 32px 72px; align-content: center; }
.euro-split .coin { grid-area: coin; align-self: center; } .euro-split .fill { grid-area: title; align-self: end; margin: 0; } .euro-split .esay { grid-area: says; align-self: start; }
.coin { position: relative; width: min(320px, 80vw); aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(20,46,98,.06), 0 18px 40px -22px rgba(20,46,98,.5); display: grid; place-items: center; }
.coin::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 2px dashed var(--pink-100); }
.cents { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; width: 62%; }
.cents i { aspect-ratio: 1; border-radius: 50%; background: var(--line); transition: background-color .2s, transform .25s var(--spring); }
.cents i.a { background: var(--pink); } .cents i.f { background: var(--ink); }
.coin-v { position: absolute; bottom: 9%; font: 700 15px var(--display); color: var(--ink); background: #fff; padding: 0 8px; }
.esay { display: grid; gap: 18px; max-width: 46ch; }
.eline { margin: 0; display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: baseline; }
.eline b { font: 700 clamp(32px, 3.4vw, 44px)/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; text-align: right; }
.eline.a b { color: var(--pink); } .eline.f b { color: var(--ink); }
.eline span { color: var(--text); font-size: 17px; }
@media (max-width: 760px) { .euro-split { grid-template-columns: 1fr; grid-template-areas: "title" "coin" "says"; justify-items: center; } .euro-split .fill { justify-self: stretch; } .eline { grid-template-columns: 70px 1fr; } }

/* Trois rôles: lines of type on the paper, grey until pointed at; the open row shows two sentences, a button and who is already there */
#vous { overflow-x: clip; }
.ways { margin-top: 40px; border-top: 1px solid var(--line); }
.way { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 18px; padding: 20px 0; cursor: default; outline-offset: 4px; border-bottom: 1px solid var(--line); color: var(--text); }
.wt { font: 700 clamp(22px, 2.6vw, 32px)/1.1 var(--display); letter-spacing: -.035em; color: var(--unread); transition: color .3s; }
.wl { font-size: clamp(16px, 1.5vw, 19px); color: var(--grey); transition: color .3s; }
.way.on .wt { color: var(--ink); } .way.on .wl { color: var(--pink); }
.way:not(.on):hover .wt { color: var(--grey); }
.wx { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.way.on .wx { grid-template-rows: 1fr; }
/* every row on every page: the same right column, each visual centred in it, text and visual both from the top,
   so switching rows never moves the text or the visual's centre */
.wxi { overflow: hidden; padding: 0 28px; margin: 0 -28px; display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 24px 48px; align-items: start; }
.wxi > :last-child { width: 100%; justify-self: center; }
.way.on .wxi { padding-bottom: 32px; margin-bottom: -32px; }
.wxt { display: grid; gap: 12px; padding-top: 18px; max-width: 52ch; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .4s var(--ease); }
.wxt > span:first-child { max-width: 44ch; }
.way.on .wxt { opacity: 1; transform: none; transition-delay: .15s; }
.wxt .b3 { justify-self: start; }
.way:not(.on) .wxt a { visibility: hidden; }
.bandbox { min-width: 0; padding-top: 4px; }
.track { overflow: hidden; padding: 14px 4px 6px; }
.track.moving { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.rowin { display: flex; gap: 18px; width: max-content; }
.track.moving .rowin { animation: slide var(--dur, 40s) linear infinite; }
.track.moving.rev .rowin { animation-direction: reverse; }
.track:hover .rowin, .track:focus-within .rowin { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
:where(body.v3 main) a.tile { text-decoration: none; }
.tile { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 14px; min-height: 60px; background: #fff; border: 1px solid var(--line); border-radius: 12px; color: var(--text); white-space: nowrap; transition: border-color .16s; }
.tile:hover { border-color: var(--sky-100); }
.tile img { height: 30px; width: auto; max-width: 80px; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .3s, opacity .3s; }
.tile:hover img { filter: none; opacity: 1; }
.tile .ini { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 700 12px var(--display); flex: none; }
.tile b { display: block; color: var(--ink); font-weight: 600; font-size: 14px; }
.tile small { display: block; color: var(--mute); font-size: 12px; }
.tile .patch { --s: 28px; position: absolute; top: -10px; right: -8px; }
.wvis { display: grid; place-items: center; min-height: 190px; padding: 18px 8px 8px; }
.cardwrap { perspective: 900px; display: grid; justify-items: center; width: 280px; }
.acard { width: 280px; aspect-ratio: 85.6 / 54; border-radius: 14px; background: linear-gradient(140deg, var(--pink), var(--pink-700)); color: #fff; padding: 20px; position: relative; justify-self: center; box-shadow: 0 18px 36px -18px rgba(86,0,48,.6); transform-style: preserve-3d; transition: transform .5s var(--ease); }
.acard.live { transition: none; } /* v3Tilt eases it frame by frame */
.acard > * { transform: translateZ(var(--z, 0)); }
.acard .t { font: 700 12px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.acard .cnm { position: absolute; left: 20px; bottom: 44px; font: 700 24px/1.1 var(--display); }
.acard .r { position: absolute; left: 20px; bottom: 20px; font-size: 14px; opacity: .9; }
.acard .patch { position: absolute; right: 18px; top: 18px; --s: 58px; }
.acard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at var(--x, 70%) var(--y, 0%), rgba(255,255,255,.25), transparent 50%); opacity: 0; transition: opacity .25s; }
.acard:hover::after { opacity: 1; }
/* touch screens: no hover, so the cards stay flat (no depth on their contents, no light glare after a tap) */
@media (hover: none) { .acard > * { transform: none; } .acard::after { display: none; } }
@media (max-width: 760px) {
  .wxi, .way.on .wxi { margin: 0 -14px; padding: 0 14px 20px; } .way { grid-template-columns: 1fr; cursor: pointer; } .wxi, .wxi.band-row2 { grid-template-columns: 1fr; }
  .wt { color: var(--ink); } .wl { color: var(--pink); } .way:not(.on) .wl { color: var(--mute); } .wvis { min-height: 0; }
}

/* the end: the hundred dots with a second pink one, then the free trial written as a sentence */
.end { text-align: center; }
.end h2 { max-width: 16ch; margin: 44px auto 0; }
.end .cta { margin-top: 40px; }
.lb { max-width: 640px; margin: 56px auto 0; padding: 30px 30px 24px; display: grid; gap: 16px; text-align: left; min-width: 0; }
:where(body.v3 main) p.lb-k { margin: 0; color: var(--mute); font-size: 15px; }
.lb .ml { font-size: clamp(18px, 2vw, 21px); }
.lb .inl input { color: var(--ink); }
.lb .inl input::placeholder { color: var(--unread); }
.lb .b3 { justify-self: start; }
.lb-done { font-size: 15px; color: var(--ink); font-weight: 600; }
@media (max-width: 640px) { .lb { padding: 24px 20px 20px; } .lb .b3 { justify-self: stretch; } .cta .b3 { width: 100%; } }

/* ---------- phone: smaller scale, one thing at a time ---------- */
@media (max-width: 760px) {
  body.v3 { font-size: 16px; }
  body.v3 main section { padding-block: 40px; }
  body.v3 h2, body.v3 .euro-split .fill { font-size: 24px; }
  .qhero h1 { font-size: 30px; } .lede3 { font-size: 16px; margin-top: 16px; }
  .fn, .eline b { font-size: 30px; }
  /* buttons (Matisse, 28 Oct.): 44px tall (Apple's touch minimum), 16px, as wide as their words; two of them share a
     row when they fit, otherwise each takes the full row, so a stacked pair is always the same width. A form's own
     button keeps the form's width */
  body.v3 main .b3 { min-height: 44px; width: auto; padding: 10px 20px; font-size: 16px; white-space: normal; text-align: center; line-height: 1.25; }
  body.v3 .cta { gap: 12px; margin-top: 24px; }
  body.v3 main :is(.cta, .howcta, .fq-cta, .dp-acts, .t-acts):has(> .b3 + .b3) { display: flex; flex-wrap: wrap; gap: 12px; }
  body.v3 main :is(.cta, .howcta, .fq-cta, .dp-acts, .t-acts):has(> .b3 + .b3) > .b3 { flex: 1 1 auto; }
  body.v3 footer .b3 { min-height: 44px; padding: 10px 20px; font-size: 16px; }
  body.v3 main .qhero { padding-bottom: 40px; }
  body.v3 main .esay > .b3 { justify-self: start; }
  body.v3 main :is(.fpanel, .ff-acts, .fsubmit, .fx-panel, .fx-gi, .ff-file, .ff-wide, .lb, .calcpop, .fd-form, dialog, .rc-formacts) .b3 { width: 100%; }
  body.v3 :is(.ff-in, .ff-sel, .finput) { min-height: 44px; font-size: 16px; }
  .facts { margin-top: 20px; gap: 22px; }
  .fact { grid-template-columns: 100px minmax(0, 1fr); grid-template-areas: "vis num" "vis txt" "vis src"; column-gap: 16px; align-items: center; }
  .fact .fv { grid-area: vis; zoom: .5; width: 200px; justify-content: center; }
  .fact .fn { grid-area: num; white-space: normal; font-size: 24px; } .fact p { grid-area: txt; font-size: 15px; max-width: none; } .fact .fs { grid-area: src; font-size: 12px; }
  .howleft { display: contents; }
  .howleft h2 { order: -2; }
  .storyp, :where(body.v3 main) p.storyp { font-size: 17px; }
  .slides { height: 300px; } .slide > * { zoom: .86; }
  .storyp { display: grid; text-align: center; } .storyp > span { grid-area: 1 / 1; visibility: hidden; } .storyp > span.cur { visibility: visible; }
  .howleft .star { text-align: center; }
  .slide .cap { min-height: 2.9em; text-align: center; }
  .coin { width: 220px; }
  .ways { margin-top: 20px; }
  .acard { zoom: .86; }
  #traveller .tip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.v3 *, body.v3 *::before, body.v3 *::after { animation: none !important; transition-duration: .01ms !important; }
  html:has(body.v3) { scroll-behavior: auto; }
}
html:has(body.v3) { scroll-behavior: smooth; }

/* rows that open one at a time keep the list as tall as its tallest state (v3Rows sets --ways-h): opening one row
   and closing another never changes the height of the section, so nothing after it moves (Matisse, 24 Oct) */
.ways { min-height: var(--ways-h, auto); }
/* phone: no reserved height (the answers are long there, the reserve showed as empty bands); the tapped row is held
   under the finger by v3Rows and what follows moves down with an eased fold */
@media (max-width: 760px) { .ways { min-height: 0; } }
.v3-measure, .v3-measure * { transition: none !important; }

/* phone: 20px between a title and what it introduces, on every page (the computer keeps 40px) */
@media (max-width: 760px) { main .end .cta, main .thread, main .alist { margin-top: 20px; } }