/* cura-dental.com
 *
 * White, black and Cura's green, and nothing else. Every other colour on the page
 * is a tint of that green or a grey. Mehdi, 2026-11-08, on the version that used
 * every pastel the doodles had: "don't use every color on the palette, just
 * necessary ones, to stay premium".
 *
 * After incroy.com for the principles, not the page: headlines large and light
 * with one word in a serif italic, paragraphs large and black rather than small
 * and grey, a lot of empty space, and one loud moment (the story) so that
 * everything else can stay quiet. Everything reads from the tokens. No screen of
 * the product anywhere; the hero fills the first screen and the invitation with
 * the footer fills the last one.
 */

@font-face {
  font-family: 'Cura Serif';
  src: url(/fonts/serif-italic.woff2) format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url(/fonts/inter.woff2) format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* colour: white, black, one green and its tints */
  --bg: #FFFFFF;
  --alt: #F6F6F5;
  --ink: #0F0F10;
  --ink-2: #2C2C2E;
  --mute: #5F5F63;
  --line: rgba(15, 15, 16, .12);
  --line-2: rgba(15, 15, 16, .07);
  --field: #D4D4D8;
  --accent: #0E7A55;
  --accent-hi: #0B6B4A;
  --tint-1: #F2F8F5;
  --tint-2: #E3F2EC;
  --tint-3: #CFE9DF;
  --alert: #C2410C;

  /* type */
  --sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --serif: 'Cura Serif', Georgia, 'Times New Roman', serif;
  --t-h1: clamp(40px, 4.6vw, 84px);
  --t-h2: clamp(34px, 3.9vw, 68px);
  --t-h3: clamp(20px, 1.5vw, 24px);
  --t-lead: clamp(19px, 1.5vw, 25px);
  --t-body: 17px;
  --t-small: 15px;
  --t-micro: 13px;

  /* shape */
  --r-s: 12px;
  --r-m: 18px;
  --r-l: 28px;

  /* the measure: the bar and every section share these two edges */
  --gut: clamp(20px, 4.4vw, 48px);
  --wrap: max(75vw, 960px);
  --nav: 74px;
  --sec: clamp(84px, 9.4vw, 168px);

  /* motion */
  --ease: cubic-bezier(.23, 1, .32, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--nav); scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 450 var(--t-body)/1.47 var(--sans); letter-spacing: -.013em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, h3, h4, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: rgba(14, 122, 85, .18); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: var(--r-s); background: var(--ink); color: #fff; font-weight: 600; }
.skip:focus { top: 12px; }
.wrap { width: min(100% - 2 * var(--gut), var(--wrap)); margin-inline: auto; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; overflow: visible; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------- type */
.h2, .display, .display-l { font-weight: 460; color: var(--ink); text-wrap: balance; }
.h2 { font-size: var(--t-h2); line-height: 1.07; letter-spacing: -.046em; }
.display, .display-l { font-size: var(--t-h1); line-height: 1.05; letter-spacing: -.05em; }
.lead, .sub { font-size: var(--t-lead); line-height: 1.34; letter-spacing: -.016em; color: var(--ink-2); text-wrap: pretty; }
.sub { max-width: 34em; }
.stop { display: inline-block; width: .13em; height: .13em; margin-left: .04em; border-radius: 50%; background: var(--accent); vertical-align: baseline; }
.eyebrow { font-size: var(--t-small); font-weight: 600; letter-spacing: -.008em; color: var(--accent); }
/* the one word: a serif italic in the green. Set a touch larger, because a serif's
   small letters sit lower than Inter's and read small at the same size. */
.w-i { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.1em; letter-spacing: -.022em; color: var(--accent); }

/* --------------------------------------------------------------- actions */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: var(--r-s);
  background: var(--accent); color: #fff; font-size: var(--t-small); font-weight: 590; letter-spacing: -.01em; white-space: nowrap;
  transition: background .2s ease, transform .16s var(--ease);
}
.btn:hover { background: var(--accent-hi); }
.btn:active { transform: scale(.97); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #2C2C2E; }
.btn-white { background: #fff; color: var(--accent); }
.btn-white:hover { background: var(--tint-2); }
.btn-sm { height: 36px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.btn-lg { height: 50px; padding: 0 26px; font-size: var(--t-body); }
.link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: var(--t-body); font-weight: 500; color: var(--accent); }
.link::after { content: '›'; font-size: 1.3em; line-height: 1; transition: transform .25s var(--ease); }
.link:hover::after { transform: translateX(3px); }
.more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--t-body); font-weight: 500; color: var(--accent); }
.more .ic { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.more:hover .ic { transform: translateX(3px); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 28px; }
.actions.center { justify-content: center; }

/* ------------------------------------------------------------------- nav
   A pane of glass floating over the page, always there, three quarters of the
   width and centred, on the same two edges as everything under it. The places on
   the left, the mark in the true middle, the action on the right; black over the
   green. */
.nav { position: fixed; z-index: 50; inset: 10px 0 auto; display: flex; justify-content: center; padding-inline: 10px; pointer-events: none; }
.nav-in { pointer-events: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; width: 75vw; min-width: 960px; max-width: 100%; height: 54px; padding: 0 9px; position: relative; border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .34)); -webkit-backdrop-filter: blur(12px) saturate(1.9) brightness(1.04); backdrop-filter: blur(12px) saturate(1.9) brightness(1.04); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .95), inset 0 -1px 1px rgba(255, 255, 255, .4), inset 0 0 22px rgba(255, 255, 255, .32), 0 0 0 .5px rgba(15, 15, 16, .12), 0 14px 34px -16px rgba(15, 15, 16, .24); transition: background .35s ease, box-shadow .35s ease; }
/* the rim: light caught on the upper left and the lower right edges and lost
   between them, which is what makes a pane read as a thickness of glass */
.nav-in::before { content: ''; position: absolute; inset: 0; z-index: 0; padding: 1px; border-radius: inherit; background: linear-gradient(125deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, .2) 22%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, .45) 85%, rgba(255, 255, 255, .9)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; transition: opacity .35s ease; }
.nav-in > * { position: relative; z-index: 1; }
.brand { grid-column: 2; justify-self: center; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-size: 19px; font-weight: 650; letter-spacing: -.03em; color: var(--ink); transition: color .3s ease; }
.brand svg { width: 25px; height: 25px; overflow: visible; color: var(--accent); transition: color .3s ease; }
.brand .b-arc { stroke-dasharray: 1; stroke-dashoffset: 0; }
.brand .b-dot { transform-box: fill-box; transform-origin: center; }
.brand:hover .b-arc { animation: arcRedraw .8s var(--ease-io) both; }
.brand:hover .b-dot { animation: dotPop .6s var(--ease) .45s both; }
@keyframes arcRedraw { 0% { stroke-dashoffset: 0; } 40% { stroke-dashoffset: -1; } 40.01% { stroke-dashoffset: 1; } 100% { stroke-dashoffset: 0; } }
@keyframes dotPop { 0% { transform: scale(1); } 35% { transform: scale(.5); } 100% { transform: scale(1); } }
.nav-links { grid-column: 1; justify-self: start; position: relative; display: flex; gap: 2px; font-size: 14px; font-weight: 500; letter-spacing: -.006em; }
.nav-links a { position: relative; z-index: 1; padding: 8px clamp(9px, .7vw, 13px); border-radius: 10px; color: var(--ink-2); white-space: nowrap; transition: color .2s ease; }
.nav-links a[aria-current] { color: var(--accent); }
.nav-knob { position: absolute; left: 0; top: 0; width: 0; height: 100%; border-radius: 10px; background: rgba(29, 29, 31, .06); opacity: 0; pointer-events: none; transition: transform .2s var(--ease), width .2s var(--ease), opacity .16s ease; }
.nav-end { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 8px; }
.nav.on-dark .nav-in { background: linear-gradient(180deg, rgba(22, 22, 24, .66), rgba(10, 10, 11, .52)); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .26), inset 0 -1px 1px rgba(255, 255, 255, .08), inset 0 0 22px rgba(255, 255, 255, .05), 0 0 0 .5px rgba(0, 0, 0, .45), 0 16px 36px -16px rgba(0, 0, 0, .5); }
.nav.on-dark .nav-in::before { opacity: .4; }
.nav.on-dark .brand, .nav.on-dark .brand svg, .nav.on-dark .nav-links a, .nav.on-dark .lang, .nav.on-dark .burger { color: #fff; }
.nav.on-dark .nav-knob { background: rgba(255, 255, 255, .14); }
.nav.on-dark .nav-cta { background: var(--accent); color: #fff; }
.nav-cta { height: 36px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.lang { display: inline-flex; align-items: center; gap: 2px; min-height: 40px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.lang span { padding: 3px 6px; border-radius: 6px; opacity: .42; transition: opacity .2s ease; }
html[lang="fr"] .lang [data-l="fr"], html[lang="en"] .lang [data-l="en"] { opacity: 1; }
.lang:hover span { opacity: .75; }
.burger { display: none; width: 44px; height: 44px; position: relative; border-radius: 10px; }
.burger i { position: absolute; left: 13px; right: 13px; height: 1.8px; border-radius: 2px; background: currentColor; transition: transform .3s var(--ease), top .3s var(--ease); }
.burger i:first-child { top: 18px; }
.burger i:last-child { top: 25px; }
.burger[aria-expanded="true"] i:first-child { top: 21.5px; transform: rotate(45deg); }
.burger[aria-expanded="true"] i:last-child { top: 21.5px; transform: rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--nav) + 16px) var(--gut) 36px; background: #fff; }
.menu[hidden] { display: none; }
.menu nav { display: flex; flex-direction: column; }
.menu nav a { font-size: 26px; font-weight: 650; letter-spacing: -.03em; padding: 12px 0; animation: rise .5s var(--ease) both; }
.menu nav a[aria-current] { color: var(--accent); }
.menu nav a:nth-child(2) { animation-delay: .04s; } .menu nav a:nth-child(3) { animation-delay: .08s; } .menu nav a:nth-child(4) { animation-delay: .12s; } .menu nav a:nth-child(5) { animation-delay: .16s; }
.menu-end { display: grid; gap: 10px; }
.menu-end .btn { height: 50px; font-size: var(--t-body); }

/* a block rises once, nothing more */
html.js [data-rise] { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
html.js [data-rise].in { opacity: 1; transform: none; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- doodles
   One hand for every drawing: a single line weight, white fills, soft colour,
   and Cura's green for the one thing that is done. */
.doodle { width: 100%; height: auto; overflow: visible; }
.doodle .k, .doodle .kf, .doodle .kd, .doodle .tick { stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.doodle .k { fill: none; }
.doodle .kf { fill: #fff; }
.doodle .kd, .doodle .kb { fill: var(--ink); }
.doodle .kb { stroke: none; }
.doodle .t { stroke-width: 1.6; opacity: .5; }
.doodle .x { stroke: var(--ink); stroke-width: 2.6; }
.doodle .g { fill: var(--tint-3); } .doodle .y, .doodle .p, .doodle .b, .doodle .r { fill: #fff; }
.doodle .tick { fill: none; stroke: var(--accent); stroke-width: 3.2; }
.doodle .dt { font: 600 15px var(--sans); fill: var(--ink); }
.doodle .dt.s { font-weight: 500; fill: var(--mute); }
.doodle .dt.xs { font-size: 11px; }
.doodle .dt.xs-l { font-size: 13px; }
.doodle .dt.big { font-size: 26px; font-weight: 700; }
.doodle .dt.huge { font-size: 40px; font-weight: 700; letter-spacing: -.03em; }
.doodle .g-t { fill: var(--accent); }
.doodle .tv-n { font: 700 22px var(--sans); fill: #fff; letter-spacing: -.01em; }
.doodle .tv-n.sm { font-size: 20px; }
.doodle .tv-s { font: 500 13px var(--sans); fill: var(--tint-3); }
.doodle .h-light { fill: var(--tint-3); opacity: .7; }
.doodle .dash { stroke-dasharray: 4 6; }
.doodle .tick.sm { stroke-width: 2.4; }

/* what the doodles do while they are on screen */
.h-waves path { animation: wave 2.4s ease-in-out infinite; }
.h-waves path + path { animation-delay: .3s; }
@keyframes wave { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
.perk .coin { transform-box: fill-box; transform-origin: center; transition: transform .6s cubic-bezier(.34, 1.4, .64, 1), opacity .3s ease; transition-delay: calc(.3s + var(--i, 0) * .18s); }
html.js .perk:not(.in) .coin { transform: translateY(-26px); opacity: 0; }
.perk .x { stroke-dasharray: 220; transition: stroke-dashoffset .9s var(--ease-io) .4s; }
html.js .perk:not(.in) .x { stroke-dashoffset: 220; }

/* ------------------------------------------------------------------ hero
   One screen, and only words on it: the promise in the middle, the smile under
   it, and the four facts rolling past along the foot. */
.hero { position: relative; display: flex; flex-direction: column; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; }
.hero-in { position: relative; z-index: 1; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding-top: var(--nav); text-align: center; }
.hero-t { width: 100%; }
/* what it is, in one line above the promise, large enough to be read at a
   glance: Cura's mark and Windows' mark, each in its own official colour (the
   C in the green it ships with, Windows in Microsoft's blue), the words in ink.
   Those two marks are the only colours on the site outside the palette. */
.hero-os { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: clamp(16px, 2.8vh, 30px); font-size: clamp(17px, 1.25vw, 22px); font-weight: 500; letter-spacing: -.015em; color: var(--mute); animation: rise .8s var(--ease) both; }
.hero-os > svg { width: 1.4em; height: 1.4em; color: #0A6B62; }
.os-w { display: inline-flex; align-items: center; gap: .42em; font-weight: 600; color: var(--ink); }
.os-w svg { width: 1em; height: 1em; overflow: visible; fill: #0078D4; }
/* under the pointer each mark answers in its own way: the C redraws itself as
   the bar's does, and Windows does what its Start button does when pressed on
   the taskbar, the whole mark squishes down and springs back with a small
   bounce. Only where there is a pointer, and once per visit of the pointer. */
.os-c .b-arc { stroke-dasharray: 1; stroke-dashoffset: 0; }
.os-c .b-dot, .os-w svg { transform-box: fill-box; transform-origin: center; }
@media (hover: hover) and (pointer: fine) {
  .os-c:hover .b-arc { animation: arcRedraw .8s var(--ease-io) both; }
  .os-c:hover .b-dot { animation: dotPop .6s var(--ease) .45s both; }
  .os-w:hover svg { animation: startPress .5s linear both; }
}
@keyframes startPress {
  0% { transform: scale(1); animation-timing-function: cubic-bezier(.2, 0, 0, 1); }
  22% { transform: scale(.76); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  58% { transform: scale(1.07); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  80% { transform: scale(.98); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  100% { transform: scale(1); }
}
.hero-h { font-size: clamp(46px, min(6.5vw, 13.5vh), 132px); font-weight: 460; line-height: 1.06; letter-spacing: -.052em; color: var(--ink); }
.hero-h .ln { display: block; animation: rise .9s var(--ease) .05s both; }
.hero-h .ln + .ln { animation-delay: .14s; }
/* two strokes of the hand: the paper struck out, then a smile under the word.
   Revealed with clip-path, not a dash: the stroke is non-scaling so it keeps its
   weight on any word, and that and a dash offset do not agree. */
.hw { position: relative; display: inline-block; white-space: nowrap; }
.hw > svg { position: absolute; left: -1.5%; width: 103%; overflow: visible; fill: none; pointer-events: none; animation: hwDraw .62s var(--ease-io) both; }
.hw path { vector-effect: non-scaling-stroke; stroke-width: .03em; stroke-linecap: round; stroke-linejoin: round; }
.hw-strike > svg { top: 54%; height: .2em; animation-delay: .75s !important; }
.hw-strike path { stroke: var(--ink); }
.hw-strike .hw-w { animation: hwFade .5s ease .9s both; }
.hw-smile > .smile { top: 86%; left: 10%; width: 80%; height: auto; fill: var(--accent); animation: smileIn .75s var(--ease) 1.1s both; }
.hw-smile path { stroke: none; }
@keyframes smileIn { from { clip-path: inset(-30% 50% -30% 50%); } to { clip-path: inset(-30% -2% -30% -2%); } }
@keyframes hwDraw { from { clip-path: inset(-60% 100% -60% -2%); } to { clip-path: inset(-60% -2% -60% -2%); } }
@keyframes hwFade { to { color: #A6A6AA; } }
.hero-sub { margin: clamp(42px, 7.4vh, 74px) auto 0; max-width: 27em; font-size: var(--t-lead); line-height: 1.34; letter-spacing: -.016em; color: var(--ink-2); text-wrap: pretty; animation: rise .9s var(--ease) .22s both; }
.hero .actions { justify-content: center; margin-top: clamp(20px, 3.2vh, 32px); animation: rise .9s var(--ease) .3s both; }
/* the facts, rolling: four copies of the same four, the track moving by one
   copy so the loop has no seam. The hairline and the words fade at both ends. */
.hero-roll { position: relative; z-index: 1; overflow: hidden; border-top: 1px solid var(--line-2); -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); animation: rise 1s var(--ease) .4s both; }
.roll-track { display: flex; width: max-content; animation: roll 34s linear infinite; }
.hero-roll:hover .roll-track { animation-play-state: paused; }
.roll-set { display: flex; flex: none; }
.roll-set li { display: inline-flex; align-items: center; gap: 12px; padding: clamp(16px, 2.8vh, 26px) clamp(30px, 3.2vw, 60px); font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: var(--ink-2); white-space: nowrap; }
.roll-set .ic { width: 20px; height: 20px; color: var(--accent); }
@keyframes roll { to { transform: translateX(-25%); } }

/* -------------------------------------------------------------- the story
   One tall section holding a screen in place; js/home.js adds .live and drives it
   from the scroll. Without .live it is simply the sentence, the props and the
   green block one after the other. */
.story { position: relative; }
.story.live { height: 430vh; }
.st-pin { position: relative; }
.story.live .st-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.st-one { position: relative; z-index: 1; display: grid; justify-items: center; gap: clamp(28px, 6.4vh, 72px); width: min(100% - 2 * var(--gut), 1240px); margin-inline: auto; padding: var(--sec) 0; text-align: center; }
.story.live .st-one { padding: var(--nav) 0 0; }
.st-q { max-width: 15em; }
.st-q span { transition: opacity .12s linear; }
/* the clutter, as a desk: overlapping, turned, each thing looking like itself */
/* the day before Cura, as four real objects on one fan: a message on a phone,
   a sticky note, a page of the paper diary and a receipt. One scale, one light,
   one shadow, each turned a little, overlapping only where nothing is written */
.st-props { position: relative; width: min(100%, 1060px); height: clamp(250px, 31vh, 330px); --pr-shadow: 0 0 0 1px rgba(15, 15, 16, .06), 0 2px 4px rgba(15, 15, 16, .04), 0 18px 34px -18px rgba(15, 15, 16, .26), 0 42px 70px -42px rgba(15, 15, 16, .24); }
.pr { position: absolute; color: var(--ink); text-align: left; background: #fff; box-shadow: var(--pr-shadow); }
.story.live .pr { opacity: 0; translate: 0 30px; transition: opacity .45s var(--ease), translate .7s var(--ease); }
.story.live .pr.on { opacity: 1; translate: 0 0; }

/* a message as the phone shows it */
.pr-chat { left: 2%; top: 26%; z-index: 2; width: 26.5%; padding: 14px 18px 18px; border-radius: 22px; transform: rotate(-4deg); }
.pc-h { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--mute); }
.pc-app { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--accent); color: #fff; }
.pc-app svg { width: 13px; height: 13px; fill: currentColor; }
.pc-h time { margin-left: auto; }
.pr-chat b { display: block; margin-top: 12px; font-size: clamp(14px, 1.05vw, 17px); font-weight: 600; letter-spacing: -.01em; }
.pr-chat p { margin-top: 2px; font-size: clamp(15px, 1.15vw, 19px); line-height: 1.35; color: var(--ink-2); }

/* the sticky note: square, green paper, a strip of tape, the corner lifting */
.pr-note { left: 30%; top: 0; z-index: 3; width: 20%; aspect-ratio: 1; display: grid; align-content: center; padding: 22px 22px 26px; border-radius: 3px 3px 26px 3px / 3px 3px 12px 3px; background: linear-gradient(160deg, #F1F8F4, #E2F1E9); transform: rotate(3deg); }
.pr-note::before { content: ''; position: absolute; left: 50%; top: -12px; width: 86px; height: 26px; margin-left: -43px; background: rgba(255, 255, 255, .7); box-shadow: 0 1px 2px rgba(15, 15, 16, .08); transform: rotate(-4deg); }
.pr-note::after { content: ''; position: absolute; right: 0; bottom: 0; width: 30px; height: 30px; border-radius: 0 0 26px 0 / 0 0 12px 0; background: linear-gradient(315deg, rgba(15, 15, 16, .07), rgba(255, 255, 255, 0) 60%); }
.pr-note p { font: italic 400 clamp(20px, 1.7vw, 29px)/1.18 var(--serif); color: #1E3A30; }

/* a page of the paper diary, rings down its left edge */
.pr-diary { left: 49.5%; top: 7%; z-index: 1; width: 26%; padding: 16px 22px 12px 48px; border-radius: 12px; transform: rotate(-2deg); }
.pr-diary::before { content: ''; position: absolute; left: 17px; top: 16px; bottom: 16px; width: 12px; background: radial-gradient(circle at 6px 6px, #fff 2.6px, #D9DCDA 3.2px, #EEF0EF 5.4px, transparent 5.9px) 0 0 / 12px 24px repeat-y; }
.pr-diary header { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 8px; border-bottom: 1.5px solid var(--ink); }
.pr-diary header b { font-size: clamp(13px, 1vw, 16px); font-weight: 650; letter-spacing: -.01em; }
.pr-diary header span { font: italic 400 clamp(20px, 1.6vw, 28px)/1 var(--serif); color: var(--accent); }
.pr-diary ul { margin-top: 2px; font: italic 400 clamp(17px, 1.45vw, 25px)/1.5 var(--serif); }
.pr-diary li { padding-top: 4px; border-bottom: 1px solid rgba(15, 15, 16, .09); }
.pr-diary li:last-child { border-bottom: 0; }
.pr-diary s { text-decoration-thickness: 1.5px; text-decoration-color: var(--ink); color: var(--mute); }

/* the receipt, as the till prints it, its foot torn round */
.pr-slip { left: 75%; top: 13%; z-index: 2; display: grid; width: 22.5%; padding: 18px 20px 28px; border-radius: 4px 4px 0 0; font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace; transform: rotate(4deg); }
.pr-slip::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 12px; background: radial-gradient(circle at 7px 12px, #fff 5.6px, transparent 6.2px) 0 0 / 14px 12px repeat-x; }
.ps-h { padding-bottom: 10px; border-bottom: 1.5px dotted rgba(15, 15, 16, .25); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); text-align: center; }
.ps-l { margin-top: 12px; font-size: 12px; color: var(--mute); }
.pr-slip b { margin-top: 2px; font-size: clamp(22px, 1.9vw, 32px); font-weight: 600; letter-spacing: -.03em; }
.pr-slip em { margin-top: 8px; padding-top: 8px; border-top: 1.5px dotted rgba(15, 15, 16, .25); font: italic 400 clamp(18px, 1.5vw, 26px)/1.1 var(--serif); color: var(--accent); }
/* the green carries the app's own ground: the navigation rail's dots, staggered
   so no phantom lines run down them, and the same field lit under the pointer,
   each lit dot drawn as a bead with one light, upper left */
.story, .st-tail { --dot: color-mix(in srgb, var(--accent), #fff 20%); --dot-lit: color-mix(in srgb, var(--accent), #fff 44%); }
.st-sky::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .62) .7px, transparent .78px), radial-gradient(rgba(255, 255, 255, .62) .7px, transparent .78px), radial-gradient(var(--dot-lit) 1.2px, transparent 1.28px), radial-gradient(var(--dot-lit) 1.2px, transparent 1.28px), radial-gradient(rgba(0, 0, 0, .4) .8px, rgba(0, 0, 0, .14) 1.7px, transparent 2.2px), radial-gradient(rgba(0, 0, 0, .4) .8px, rgba(0, 0, 0, .14) 1.7px, transparent 2.2px); background-size: 15px 15px; background-position: -.55px -.55px, 6.95px 6.95px, 0 0, 7.5px 7.5px, 1.1px 1.1px, 8.6px 8.6px; opacity: 0; transition: opacity .25s var(--ease); -webkit-mask-image: radial-gradient(circle 170px at var(--mx, 50%) var(--my, 50%), #000 0%, #000 26%, transparent 74%); mask-image: radial-gradient(circle 170px at var(--mx, 50%) var(--my, 50%), #000 0%, #000 26%, transparent 74%); }
.story.lit .st-sky::after { opacity: 1; }
.st-sky { display: none; }
.story.live .st-sky { position: absolute; z-index: 2; display: block; left: calc(50% - 120vmax); top: 100%; width: 240vmax; height: 240vmax; border-radius: 50%; background: radial-gradient(var(--dot) 1.1px, transparent 1.1px) 0 0 / 15px 15px, radial-gradient(var(--dot) 1.1px, transparent 1.1px) 7.5px 7.5px / 15px 15px, var(--accent); will-change: transform; }
.st-two::before { content: ''; position: absolute; inset: 0; background: radial-gradient(55% 48% at 50% 46%, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 70%); pointer-events: none; }
.st-two > * { position: relative; }
.st-two { position: relative; z-index: 3; display: grid; justify-items: center; gap: clamp(16px, 3vh, 30px); padding: var(--sec) var(--gut); background: radial-gradient(var(--dot) 1.1px, transparent 1.1px) 0 0 / 15px 15px, radial-gradient(var(--dot) 1.1px, transparent 1.1px) 7.5px 7.5px / 15px 15px, var(--accent); color: #fff; text-align: center; }
.story.live .st-two { position: absolute; inset: 0; align-content: center; padding-block: var(--nav) 0; background: none; }
.st-a { font: italic 400 clamp(46px, min(6.4vw, 13vh), 128px)/1.04 var(--serif); letter-spacing: -.024em; color: #fff; text-wrap: balance; }
.story.live .st-a { opacity: 0; }
.st-b { max-width: 25em; font-size: clamp(20px, 1.9vw, 32px); line-height: 1.3; letter-spacing: -.02em; color: #fff; text-wrap: pretty; }
.st-b span { transition: opacity .12s linear; }
.st-tail { height: clamp(50px, 11vh, 120px); border-radius: 0 0 50% 50% / 0 0 100% 100%; background: radial-gradient(var(--dot) 1.1px, transparent 1.1px) 0 0 / 15px 15px, radial-gradient(var(--dot) 1.1px, transparent 1.1px) 7.5px 7.5px / 15px 15px, var(--accent); }

/* --------------------------------------------------------------- sections
   One rhythm: white, with a great deal of room, each title centred. */
.sec { padding: var(--sec) 0 0; }
.sec-h { display: grid; justify-items: center; gap: 14px; text-align: center; }
.sec-h .lead { max-width: 33em; }

/* four equal cards: a picture on its own ground, a title, two lines */
.perks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: clamp(32px, 3.6vw, 56px); }
.perk { padding: 10px 10px 26px; border-radius: var(--r-l); background: var(--alt); }
.perk-art { display: grid; place-items: center; aspect-ratio: 5 / 4; padding: 9%; border-radius: var(--r-m); overflow: hidden; background: #fff; }
.perk-art .doodle { width: 100%; height: 100%; transition: transform .6s var(--ease); }
.perk:hover .perk-art .doodle { transform: scale(1.04); }
.perk h3 { margin: 20px 14px 0; font-size: var(--t-h3); font-weight: 500; letter-spacing: -.022em; line-height: 1.2; color: var(--ink); text-wrap: balance; }
.perk p { margin: 8px 14px 0; font-size: var(--t-small); line-height: 1.45; color: var(--mute); text-wrap: pretty; }

/* the trust section: one sentence and the word that matters in it. The word
   arrives first, filling the screen, with its c drawn as Cura's own C; the C
   turns on its side and becomes the shackle of a padlock, a body forms under it
   with the C's dot as the keyhole, and the shackle shuts. Then the scroll sets
   the word down in its sentence and the rest comes in around it. Nothing else
   on the screen. Without a script it is the sentence. */
.vault { position: relative; padding: var(--sec) var(--gut); text-align: center; }
.v-pin { display: grid; place-items: center; }
.vault.live { height: 330vh; padding: 0; }
.vault.live .v-pin { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 0 var(--gut); overflow: hidden; }
.v-in { display: grid; justify-items: center; }
.v-h em { display: inline-block; transform-origin: 50% 50%; }
/* the lock stands on the letters' own line: an inline-block's baseline is its
   foot, so the shift goes on the box, not on the drawing inside it, and it is
   the measured distance between the lock's foot and the letters' (0.037em),
   the last 0.005em as a transform because layout rounds to whole pixels */
.v-c { display: inline-block; vertical-align: -.032em; }
.v-c svg { width: .5em; height: .75em; margin: 0 -.028em 0 .014em; overflow: visible; transform: translateY(.0054em); }
.v-c .lk-s { fill: none; stroke: currentColor; stroke-width: 9.6; stroke-linecap: round; }
.v-c .lk-b, .v-c .lk-d { fill: currentColor; }
.v-c .lk-k { fill: #fff; }
.v-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 36px; margin-top: clamp(24px, 4vh, 40px); }
.v-list li { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-lead); letter-spacing: -.018em; color: var(--ink-2); }
.v-list .ic { width: 20px; height: 20px; color: var(--accent); stroke-width: 2.2; }
.vault.live .v-rest, .vault.live .v-list li { opacity: 0; }
/* the pinned screen already ends on half a screen of white, so what follows it
   does not add a full section's top space to that */
.vault.live + .sec { padding-top: clamp(16px, 3vh, 48px); }

/* the trial: four steps on one line, centred under their title, the line joining
   the numbers and nothing else, and the last one filled because it is the goal */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 40px); margin-top: clamp(40px, 4.4vw, 68px); text-align: center; }
.steps::before { content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 21px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--tint-3), var(--accent)); }
.steps li { position: relative; display: grid; align-content: start; justify-items: center; }
.steps .num { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 8px #fff; color: var(--accent); font-size: 17px; font-weight: 600; }
.steps li:last-child .num { background: var(--accent); color: #fff; }
.steps h3 { margin-top: 20px; font-size: var(--t-h3); font-weight: 500; letter-spacing: -.024em; line-height: 1.2; color: var(--ink); text-wrap: balance; }
.steps p { max-width: 17em; margin-top: 8px; font-size: var(--t-small); line-height: 1.45; color: var(--mute); text-wrap: pretty; }
#essai-gratuit .actions { margin-top: clamp(32px, 3.6vw, 52px); }

/* the value: six tiles, each a big icon and a name. The sentence is behind the
   i and comes up over the tile, so opening it moves nothing else on the page. */
.feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(32px, 3.6vw, 56px); }
.fe { position: relative; display: grid; justify-items: center; align-content: center; gap: 16px; min-height: clamp(200px, 17vw, 280px); padding: 24px; overflow: hidden; border-radius: var(--r-l); background: var(--alt); text-align: center; }
.fe > .ic { width: clamp(64px, 5.6vw, 92px); height: clamp(64px, 5.6vw, 92px); color: var(--ink); stroke-width: 1.05; }
.fe b { font-size: var(--t-h3); font-weight: 500; letter-spacing: -.024em; line-height: 1.2; color: var(--ink); }
.fe p { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: 28px 40px; border-radius: inherit; background: var(--accent); color: #fff; font-size: var(--t-lead); line-height: 1.38; letter-spacing: -.014em; text-wrap: balance; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .18s ease, transform .22s var(--ease); }
.fe.open p { opacity: 1; transform: none; }
.fe-i { position: absolute; z-index: 2; right: 14px; top: 14px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--ink); font: italic 600 16px/1 Georgia, 'Times New Roman', serif; transition: background .18s ease, color .18s ease, transform .16s var(--ease); }
.fe-i::after { content: ''; position: absolute; inset: -8px; }
.fe-i:active { transform: scale(.94); }
.fe.open .fe-i { background: rgba(255, 255, 255, .16); color: #fff; }

/* questions, as cards in a row. The one under the pointer opens across. Its
   answer is set to the width it will have when open, so the words never reflow
   while the card is moving: they wait, and fade in once there is room. */
.qrow { --grow: 2.7; --rest: 4; container-type: inline-size; display: flex; gap: 10px; height: clamp(270px, 21vw, 340px); margin-top: clamp(24px, 3vw, 44px); }
.qrow.four { --grow: 2.3; --rest: 3; }
.qc { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: var(--r-l); background: var(--alt); color: var(--ink); transition: flex-grow .55s cubic-bezier(.32, .72, 0, 1), background .3s ease, color .3s ease; }
.qc.on { flex-grow: var(--grow); background: var(--accent); color: #fff; }
.qc button { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px; text-align: left; font-size: var(--t-h3); font-weight: 500; letter-spacing: -.024em; line-height: 1.2; color: inherit; }
.qc button span { display: block; text-wrap: pretty; }
.qc.on button span { max-width: 22em; }
.qc button .ic { flex: none; width: 38px; height: 38px; color: var(--ink); stroke-width: 1.3; transition: color .3s ease; }
.qc.on button .ic { color: #fff; }
.qc p { position: absolute; left: 24px; bottom: 24px; width: calc((100cqw - var(--rest) * 10px) * var(--grow) / (var(--grow) + var(--rest)) - 48px); font-size: var(--t-small); line-height: 1.45; color: rgba(255, 255, 255, .92); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.qc.on p { opacity: 1; transform: none; transition: opacity .3s ease .2s, transform .4s var(--ease) .2s; }

/* the questions page */
.acc details { border-bottom: 1px solid var(--line); }
.acc details:first-child { border-top: 1px solid var(--line); }
.acc details[hidden] { display: none; }
.acc details:not([hidden]):first-of-type, .acc details:not([hidden]) ~ details:not([hidden]) { border-top: 0; }
.acc summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 0; list-style: none; cursor: pointer; font-size: var(--t-body); font-weight: 600; letter-spacing: -.014em; color: var(--ink); }
.acc summary::-webkit-details-marker { display: none; }
.pm { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--alt); color: var(--ink); transition: background .3s ease, color .3s ease, transform .5s var(--ease); }
.pm::before, .pm::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.8px; margin: -.9px 0 0 -5.5px; border-radius: 2px; background: currentColor; transition: transform .4s var(--ease); }
.pm::after { transform: rotate(90deg); }
.acc details[open] .pm { background: var(--ink); color: #fff; transform: rotate(180deg); }
.acc details[open] .pm::after { transform: rotate(0); }
.ans { overflow: hidden; }
.ans p { max-width: 40em; padding: 0 48px 20px 0; font-size: var(--t-small); line-height: 1.5; color: var(--mute); }
.ans .link { margin: -8px 0 16px; }
.acc mark { padding: 0 1px; border-radius: 3px; background: var(--tint-3); color: inherit; }
.qpage { padding: calc(var(--nav) + clamp(32px, 5vw, 72px)) 0 var(--sec); }
.faq-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
.faq-side { position: sticky; top: calc(var(--nav) + 32px); display: grid; gap: 14px; }
.faq-search { display: flex; align-items: center; gap: 10px; height: 46px; margin-top: 8px; padding: 0 14px; border-radius: var(--r-s); background: var(--alt); transition: box-shadow .2s ease, background .2s ease; cursor: text; }
.faq-search:focus-within { background: #fff; box-shadow: inset 0 0 0 2px var(--accent); }
.faq-search .ic { width: 19px; height: 19px; color: var(--mute); }
.faq-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 16px; color: var(--ink); }
.faq-search input::placeholder { color: var(--mute); }
.faq-search input:focus-visible { outline: 0; }
.faq-clear { position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--field); }
.faq-clear[hidden] { display: none; }
.faq-clear i::before, .faq-clear i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.6px; margin: -.8px 0 0 -5px; border-radius: 2px; background: #fff; transform: rotate(45deg); }
.faq-clear i::after { transform: rotate(-45deg); }
.faq-bar { position: relative; margin-top: 8px; }
.faq-bar .faq-search { margin-top: 0; }
.faq-filter { position: relative; flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin-right: -8px; border-radius: 9px; color: var(--ink-2); transition: background .15s ease; }
.faq-filter .ic { color: inherit; }
.faq-filter:hover, .faq-filter[aria-expanded="true"] { background: rgba(15, 15, 16, .07); }
.faq-filter i { position: absolute; right: 5px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: 0; transition: opacity .15s ease; }
.faq-filter.on i { opacity: 1; }
.topics { position: absolute; z-index: 5; right: 0; top: calc(100% + 8px); display: grid; gap: 2px; width: min(260px, 100%); padding: 6px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 20px 40px -22px rgba(15, 15, 16, .35); transform-origin: top right; animation: popIn .16s var(--ease) both; }
.topics[hidden] { display: none; }
@keyframes popIn { from { opacity: 0; transform: scale(.97) translateY(-4px); } to { opacity: 1; transform: none; } }
.topics button { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 40px; padding: 0 11px; border-radius: 9px; font-size: 14.5px; font-weight: 500; color: var(--ink-2); transition: background .12s ease; }
.topics button em { font-style: normal; font-size: var(--t-micro); color: var(--mute); }
.topics button:hover { background: var(--alt); }
.topics button[aria-pressed="true"] { background: var(--tint-2); color: var(--accent); }
.topics button[aria-pressed="true"] em { color: var(--accent); }
.faq-none { display: grid; justify-items: start; gap: 18px; padding: 28px; border-radius: var(--r-m); background: var(--alt); }
.faq-none[hidden] { display: none; }
.faq-none p { display: grid; gap: 4px; font-size: var(--t-small); color: var(--mute); }
.faq-none b { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.faq-more[hidden] { display: none; }
.faq-more { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; font-size: var(--t-small); color: var(--mute); }

/* ------------------------------------------------------ the last screen
   The invitation and the footer are one screen together: a soft panel fading to
   white on the bar's edges, then a plain white footer. */
.closing { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; margin-top: var(--sec); }
.end { flex: 1 1 auto; display: flex; padding-top: var(--nav); }
.end-tile { flex: none; display: grid; justify-items: center; align-content: center; gap: 12px; width: calc(100% - 2 * clamp(10px, 1.4vw, 28px)); margin-inline: auto; padding: clamp(32px, 6vh, 80px) var(--gut); border-radius: var(--r-l); background: linear-gradient(180deg, var(--tint-2) 0, var(--tint-1) 60%, #fff 100%); text-align: center; }
.end-h { max-width: 15em; }
.end .actions { margin-top: 12px; }
.site-foot { position: relative; background: #fff; color: var(--ink); font-size: 14px; }
.foot-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); gap: 28px 40px; padding: clamp(22px, 4vh, 44px) 0 clamp(14px, 2.4vh, 26px); }
.foot-id p { margin-top: 8px; max-width: 16em; font-size: 14px; line-height: 1.45; color: var(--mute); }
.foot-brand { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font-size: 27px; font-weight: 500; letter-spacing: -.04em; color: var(--accent); }
.foot-brand svg { width: 33px; height: 33px; overflow: visible; }
.fw-pts circle { fill: var(--accent); }
.fw-arc { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; }
.fw-dot { fill: var(--accent); transform-box: fill-box; transform-origin: center; }
.fw-l { display: inline-flex; overflow: hidden; padding-right: .06em; }
.fw-l b { display: inline-block; font-weight: inherit; }
html.js .site-foot:not(.done) .fw-pts circle { opacity: 0; transform-box: fill-box; transform-origin: center; }
html.js .site-foot:not(.done) .fw-arc, html.js .site-foot:not(.done) .fw-dot { opacity: 0; }
html.js .site-foot:not(.done) .fw-l b { transform: translateX(-108%); }
.site-foot.play .fw-pts circle { animation: fwPoint .4s var(--ease) calc(var(--k) * 16ms) both, fwGone .01s linear .86s forwards; }
.site-foot.play .fw-arc { animation: fwArc .4s var(--ease) .72s both; }
.site-foot.play .fw-dot { animation: fwDot .5s var(--ease) 1s both; }
.site-foot.play .fw-l b { animation: fwSlide .8s var(--ease) 1.05s both; }
@keyframes fwPoint { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes fwGone { to { opacity: 0; } }
@keyframes fwArc { from { opacity: 1; stroke-width: 1.24; } to { opacity: 1; stroke-width: 2.4; } }
@keyframes fwDot { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes fwSlide { from { transform: translateX(-108%); } to { transform: none; } }
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.foot-cols p { margin-bottom: 8px; font-size: var(--t-micro); font-weight: 500; color: var(--mute); }
.foot-cols a { display: block; width: max-content; max-width: 100%; padding: 3px 0; font-size: 14px; color: var(--ink); transition: color .2s ease; }
.foot-cols a:hover { color: var(--accent); }
.foot-base { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding: 6px 0 10px; font-size: var(--t-micro); color: var(--mute); }
.foot-lang { min-height: 40px; font-size: var(--t-micro); font-weight: 500; }
html[lang="fr"] .foot-lang [data-l="en"], html[lang="en"] .foot-lang [data-l="fr"] { display: none; }
.foot-lang span { opacity: 1 !important; padding: 0; color: var(--ink); }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1080px) {
  .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .steps::before { display: none; }
}
@media (max-width: 1000px) {
  /* the places fold into the menu, so the mark takes the left edge they leave */
  .nav-in { grid-template-columns: auto minmax(0, 1fr) auto; width: 100%; min-width: 0; padding-left: 14px; }
  .brand { grid-column: 1; justify-self: start; }
  .nav-links { display: none; }
  .burger { display: block; }
}
/* a tablet held upright is tall and narrow: the type follows the width further
   than it does on a desktop, and the story's papers sit as a grid */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  :root { --t-h1: 7.2vw; --t-h2: 6.2vw; --t-h3: 22px; --t-lead: 21px; }
  .hero-h { font-size: 10.4vw; }
  .st-a { font-size: 9.4vw; }
  .st-b { font-size: 3.1vw; }
  .st-props { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; width: 100%; height: auto; }
  .story .pr { position: relative; left: auto; right: auto; top: auto; width: auto; }
  .pr-note { aspect-ratio: auto; }
  .pr-chat p { font-size: 20px; }
  .pr-note p { font-size: 27px; }
  .pr-diary ul { font-size: 24px; }
  .pr-slip b { font-size: 32px; }
  .pr-slip em { font-size: 24px; }
}
@media (max-width: 960px) {
  .faq-in { grid-template-columns: minmax(0, 1fr); }
  .faq-side { position: static; }
  .foot-top { grid-template-columns: minmax(0, 1fr); }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* there is no hover to open a card, so each one is open and the row scrolls */
  .qrow { height: auto; gap: 12px; margin-inline: calc(-1 * var(--gut)); padding: 2px var(--gut) 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .qrow::-webkit-scrollbar { display: none; }
  .qc, .qc.on { flex: 0 0 min(80%, 340px); min-height: 250px; padding: 22px; scroll-snap-align: center; background: var(--accent); color: #fff; }
  .qc button { position: static; padding: 0; }
  .qc button .ic { color: #fff; }
  .qc p { position: static; width: auto; margin-top: 12px; opacity: 1; transform: none; }
}
@media (max-width: 760px) {
  /* the hero stays one screen on a phone: the promise in the middle, the facts
     rolling along the foot */
  .hero { min-height: 540px; }
  .hero-h { font-size: clamp(44px, 13.4vw, 84px); }
  .hero-sub { margin-top: clamp(32px, 5.6vh, 54px); font-size: 18px; }
  .st-props { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; height: auto; }
  .story .pr { position: relative; left: auto; right: auto; top: auto; width: auto; }
  .v-list { gap: 10px 24px; }
  .st-props { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; width: 100%; }
  .pr-chat, .pr-note, .pr-diary, .pr-slip { width: auto; }
  .pr-note { aspect-ratio: auto; padding: 22px 16px 20px; }
  .pr-note p { font-size: 18px; }
  .pr-chat { padding: 12px 14px 14px; border-radius: 18px; }
  .pr-diary { padding: 12px 14px 10px 36px; }
  .pr-diary::before { left: 12px; }
  .pr-diary ul { font-size: 17px; }
  .pr-slip { padding: 14px 14px 22px; }
  .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fe { min-height: 176px; gap: 12px; padding: 18px 12px; }
  .fe p { padding: 16px 14px; font-size: var(--t-small); }
  .foot-cols a { padding: 9px 0; }
}
/* the closing screen on a phone: the invitation and the whole footer on one
   screen, its top clear of the bar (Mehdi 2026-11-08). Every size here follows
   the screen's height, so a short phone tightens and a tall one breathes. */
@media (max-width: 760px) {
  .end { padding-top: var(--nav); }
  .end-tile { gap: clamp(6px, 1.2vh, 12px); padding: clamp(18px, 3.4vh, 36px) 18px; }
  .end-h { font-size: clamp(26px, 4.3vh, 38px); }
  .end .lead { font-size: clamp(15px, 2.3vh, 19px); }
  .end .actions { gap: 8px; margin-top: clamp(4px, 1vh, 10px); }
  .end .btn-lg { height: clamp(44px, 5.9vh, 52px); }
  .foot-top { gap: clamp(10px, 1.8vh, 18px); padding: clamp(14px, 2.4vh, 24px) 0 clamp(6px, 1.2vh, 12px); }
  .foot-brand { min-height: 34px; font-size: 22px; }
  .foot-brand svg { width: 26px; height: 26px; }
  .foot-id p { margin-top: 0; font-size: 13px; }
  .foot-cols { gap: clamp(8px, 1.6vh, 16px) 16px; }
  .foot-cols p { margin-bottom: 2px; }
  .foot-cols a { padding: clamp(4px, .75vh, 7px) 0; font-size: 14px; }
  .foot-base { padding: 2px 0 calc(6px + env(safe-area-inset-bottom)); }
  .foot-lang { min-height: 34px; }
  /* on a phone the footer sits on the centre line, Mehdi 2026-11-08: the
     brand, its line and the base line centred, the link columns meeting on
     that same axis */
  .foot-id { display: grid; justify-items: center; text-align: center; }
  .foot-id p { margin-inline: auto; }
  /* the two columns meet in the middle, Mehdi 2026-11-09: the left one
     ends against the centre line, the right one starts against it, a small
     gap between them */
  .foot-cols { column-gap: 22px; }
  .foot-cols > div:nth-child(odd) { text-align: right; }
  .foot-cols > div:nth-child(odd) a { margin-left: auto; }
  .foot-cols > div:nth-child(even) { text-align: left; }
  .foot-base { justify-content: center; text-align: center; }
}
/* a short phone (an iPhone SE, most Androids under 780px tall): the same
   closing screen set closer, every element of the footer still there */
@media (max-width: 760px) and (max-height: 780px) {
  .end { padding-top: 70px; }
  .end-tile { gap: 6px; padding: 16px; }
  .end-h { font-size: 26px; }
  .end .lead { font-size: 15px; }
  .end .btn-lg { height: 44px; }
  .foot-top { gap: 8px; padding: 10px 0 4px; }
  .foot-brand { min-height: 30px; font-size: 20px; }
  .foot-brand svg { width: 24px; height: 24px; }
  .foot-id p { font-size: 12.5px; line-height: 1.35; }
  .foot-cols { gap: 8px 16px; }
  .foot-cols p { margin-bottom: 0; }
  .foot-cols a { padding: 4px 0; font-size: 13.5px; }
  .foot-lang { min-height: 30px; }
}
/* a short phone: the icon and the spacing give the height back, so the buttons
   keep clear of the rolling facts */
@media (max-width: 760px) and (max-height: 700px) {
  .hero-os { gap: 8px; margin-bottom: 12px; font-size: 16px; }
  .hero-sub { margin-top: 26px; font-size: 17px; }
  .end-h { font-size: 24px; }
  .foot-cols a { padding: 3px 0; }
}
@media (max-width: 560px) {
  .nav-cta { display: none; }
  .steps, .perks { grid-template-columns: minmax(0, 1fr); }
  .steps { text-align: left; row-gap: 24px; }
  .steps::before { display: block; left: 21px; right: auto; top: 22px; bottom: 40px; width: 2px; height: auto; background: linear-gradient(180deg, var(--tint-3), var(--accent)); }
  .steps li { justify-items: start; padding-left: 64px; }
  .steps .num { position: absolute; left: 0; top: 0; }
  .steps h3 { margin-top: 8px; }
  .actions .btn { flex: 1 1 100%; }
  .ans p { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .roll-track { width: auto; justify-content: center; animation: none !important; }
  .roll-set { flex-wrap: wrap; justify-content: center; }
  .roll-set[aria-hidden] { display: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  html.js [data-rise] { opacity: 1; transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav-in { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav.on-dark .nav-in { background: var(--ink); }
}
@media (prefers-contrast: more) {
  .nav-in { background: #fff; box-shadow: 0 0 0 1px var(--ink); }
  :root { --mute: #48484C; }
}