/* ===========================================================
   AGAIN — Sydney web studio
   Direction: "the white studio". A bright room where the pieces
   of a venue's website assemble themselves in front of you.
   Ground is paper white on Apple's own neutrals; one teal
   accent carries every emphasis; weight and tracking do the
   talking instead of a display face.
   =========================================================== */

:root{
  /* --- surfaces: more white, Apple's own neutrals --- */
  --paper:    #FFFFFF;
  --paper-2:  #F5F5F7;   /* Apple's secondary background */
  --paper-3:  #EBEBED;
  --ink:      #1D1D1F;   /* Apple's text colour — 16.8:1 */
  --ink-2:    #515154;   /* body — 7.5:1 */
  --ink-3:    #6E6E73;   /* captions — 5.1:1, still AA */
  --line:     #D2D2D7;   /* Apple's separator */
  --line-2:   #C7C7CC;

  /* --- accent: teal, one accent only.
         Named by role, not by hue, so a change of colour is five values. --- */
  --accent:       #0B6F78;  /* 5.9:1 on white — safe for text and as a button ground */
  --accent-hover: #085860;  /* darker on hover: white label stays at 8.2:1 */
  --accent-lit:   #1FA0AC;  /* marks and rules only — 3.1:1, never carries text */
  --accent-soft:  #E4F2F4;  /* tint */
  --accent-deep:  #073F45;  /* dark surfaces */

  /* --- highlight: the warm counterpart, used only inside the pricing
         cards. Teal says who we are; this says "look here". --- */
  --hot:       #BF4529;  /* 5.1:1 on white, 5.1:1 white-on-it */
  --hot-hover: #A73C22;  /* 6.3:1 white-on-it */
  --hot-lit:   #E2673F;  /* marks on dark only */
  --hot-soft:  #FBEAE3;

  /* --- type: SF Pro where it exists, Inter everywhere else --- */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: var(--sans);
  --mono: var(--sans);

  /* --- rhythm (4/8 base) --- */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem;   --s7:3rem;  --s8:4rem;   --s9:6rem;
  --sec: clamp(5rem, 10vw, 9rem);
  --wrap: 1120px;
  --gut: clamp(1.25rem, 5vw, 3rem);

  /* --- motion --- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  color-scheme: light;
}

/* Cross-document transitions. Browsers without the API simply navigate,
   which is the same thing minus the fade — no polyfill, no layout shift. */
@view-transition{ navigation: auto; }
::view-transition-old(root){ animation:vtOut .22s var(--ease) both; }
::view-transition-new(root){ animation:vtIn .3s var(--ease) both; }
@keyframes vtOut{ to{ opacity:0; } }
@keyframes vtIn{ from{ opacity:0; transform:translateY(6px); } }
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){ animation:none; }
}
/* the bar is the same object on every page, so it must not cross-fade */
.nav{ view-transition-name: nav; }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink-2);
  font-family:var(--sans); font-size:1.0625rem; line-height:1.6;
  letter-spacing:-.011em; font-synthesis:none;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
h1,h2,h3,h4{ color:var(--ink); font-weight:600; margin:0; text-wrap:balance; letter-spacing:-.022em; }
p{ margin:0; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:var(--s4); top:var(--s4); z-index:200; background:var(--ink); color:var(--paper); padding:.6rem 1rem; border-radius:4px; }

/* ---------- shared type ---------- */
.eyebrow{
  font-size:.76rem; font-weight:600; letter-spacing:.02em;
  color:var(--accent); display:flex; align-items:center; gap:.55rem; margin:0 0 var(--s4);
}
.eyebrow::before{ content:""; width:18px; height:1.5px; border-radius:1px; background:var(--accent-lit); flex:none; }

.h2{ font-size:clamp(1.9rem, 4vw, 3rem); font-weight:600; line-height:1.07; letter-spacing:-.028em; }
.lede{ max-width:58ch; margin-top:var(--s5); font-size:1.15rem; line-height:1.5; color:var(--ink-3); letter-spacing:-.014em; }
.sec{ padding-block:var(--sec); }
.sec--tint{ background:var(--paper-2); }
.sec--lead{ padding-block:calc(var(--sec) + 2.5rem) 0; }
.sec--lead .h2{ margin-top:var(--s2); }
.page-inner{ animation:pageIn .34s var(--ease-out) both; }
@keyframes pageIn{ from{ opacity:0; transform:translateY(8px); } }
@media (prefers-reduced-motion:reduce){ .page-inner{ animation:none; } }
.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:48px; padding:0 1.4rem; border-radius:980px; border:1px solid var(--accent);
  background:var(--accent); color:var(--paper); text-decoration:none;
  font-size:.98rem; font-weight:500; letter-spacing:-.01em; cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover{ background:var(--accent-hover); border-color:var(--accent-hover); transform:translateY(-1px); }
.btn--ghost{ background:transparent; color:var(--accent); border-color:var(--line-2); }
.btn--ghost:hover{ background:var(--accent-soft); color:var(--accent-deep); border-color:var(--accent-soft); }
.btn--mini{ min-height:44px; padding:0 1.05rem; font-size:.86rem; }
.btn--block{ width:100%; }

/* ===========================================================
   NAV
   =========================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  height:52px; padding:0 var(--gut);
  background:rgba(255,255,255,0); border-bottom:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease),
             backdrop-filter .35s var(--ease), height .35s var(--ease);
}
/* the frosted state: Apple's own recipe — heavy blur, boosted saturation,
   a sheet you read the page through rather than a solid bar */
.nav.is-stuck{
  height:48px;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom-color:rgba(0,0,0,.08);
}
@supports not (backdrop-filter: blur(20px)){
  .nav.is-stuck{ background:rgba(255,255,255,.94); }
}

.brand{ display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--ink); }
.brand__mark{ display:grid; grid-template-columns:repeat(2,4px); gap:1.5px; }
.brand__mark .px{ width:4px; height:4px; background:var(--ink); }
.brand__mark .px:nth-child(2){ background:var(--accent); }
.brand__mark .px:nth-child(3){ background:var(--accent-lit); }
.brand__word{ font-size:1.02rem; font-weight:600; letter-spacing:.01em; }
.brand__word--sm{ font-size:1.05rem; }

.nav__links{ display:flex; align-items:center; gap:1.65rem; }
.nav__links a:not(.btn){
  text-decoration:none; font-size:.8rem; font-weight:400; letter-spacing:-.004em;
  color:rgba(29,29,31,.84); position:relative;
  display:inline-flex; align-items:center; align-self:stretch;
  transition:color .18s var(--ease), opacity .18s var(--ease);
}
.nav__links a:not(.btn):hover{ color:var(--ink); }
.nav__links a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:12px; height:1px; width:0; background:var(--accent);
  transition:width .28s var(--ease);
}
.nav__links a:not(.btn):hover::after{ width:100%; }

/* --- flyout, the way Apple's nav opens a panel under the bar --- */
.nav__item{ position:relative; display:inline-flex; align-self:stretch; }
.nav__trigger{
  border:0; background:transparent; cursor:pointer; padding:0; font:inherit;
  font-size:.8rem; font-weight:400; letter-spacing:-.004em; color:rgba(29,29,31,.84);
  display:inline-flex; align-items:center; gap:.3rem; align-self:stretch;
  transition:color .18s var(--ease);
}
.nav__trigger:hover,.nav__item.open .nav__trigger{ color:var(--ink); }
.nav__trigger svg{ width:8px; height:8px; transition:transform .3s var(--ease); }
.nav__item.open .nav__trigger svg{ transform:rotate(180deg); }

.nav__panel{
  position:fixed; left:0; right:0; top:48px; z-index:99;
  /* The bar can be see-through because nothing sits inside it. A panel
     carries text, so it needs a ground: at .86 the hero headline read
     straight through the links. */
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:saturate(180%) blur(24px);
  backdrop-filter:saturate(180%) blur(24px);
  border-bottom:1px solid rgba(0,0,0,.08);
  box-shadow:0 22px 40px -30px rgba(0,0,0,.35);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .26s var(--ease), transform .26s var(--ease), visibility 0s linear .26s;
}
.nav__item.open .nav__panel{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.nav__panelInner{
  max-width:var(--wrap); margin-inline:auto; padding:1.6rem var(--gut) 2rem;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem;
}
.nav__group h3{
  font-size:.66rem; font-weight:600; letter-spacing:.02em; color:var(--ink-3);
  margin-bottom:.7rem;
}
.nav__group ul{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.nav__group a{
  display:block; font-size:1.02rem; font-weight:500; letter-spacing:-.018em;
  color:var(--ink); text-decoration:none; padding:.18rem 0;
  transition:color .18s var(--ease);
}
.nav__group a:hover{ color:var(--accent); }
.nav__group a::after{ display:none; }
.nav__group p{ font-size:.8rem; color:var(--ink-3); margin-top:.15rem; }

.lang{ display:inline-flex; align-items:center; align-self:stretch; gap:.1rem; }
.lang__btn{
  border:0; background:transparent; padding:0 .3rem; cursor:pointer;
  display:inline-flex; align-items:center; align-self:stretch; min-height:44px;
  font-size:.74rem; font-weight:400; letter-spacing:.01em; color:rgba(29,29,31,.45);
  transition:color .18s var(--ease);
}
.lang__btn.is-active{ background:transparent; color:var(--ink); font-weight:600; }
.lang__btn:not(.is-active):hover{ color:rgba(29,29,31,.8); }
.lang__btn + .lang__btn{ border-left:1px solid rgba(0,0,0,.14); margin-left:.15rem; padding-left:.45rem; }

@media (min-width:861px) and (pointer:fine){
  .nav .btn--mini{ min-height:30px; padding:0 .85rem; font-size:.78rem; border-radius:980px; }
}

.nav__toggle{
  display:none; width:44px; height:44px; border:0; background:transparent; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav__toggle span{ display:block; width:20px; height:1.5px; background:var(--ink); transition:transform .3s var(--ease), opacity .2s; }
.nav__toggle.is-open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2){ opacity:0; }
.nav__toggle.is-open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ===========================================================
   HERO — pinned stage, scroll-scrubbed constellation
   =========================================================== */
.hero{ position:relative; height:340vh; }
.hero__stage{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:grid; place-items:center; background:var(--paper);
}
/* faint studio floor so pure white isn't flat */
.hero__stage::after{
  content:""; position:absolute; inset:auto 0 0 0; height:45%;
  background:linear-gradient(to top, var(--paper-2), transparent);
  pointer-events:none; z-index:0;
}

.hero__field{ position:absolute; inset:0; z-index:1; }
.hero__center{ position:absolute; left:50%; top:50%; width:0; height:0; }

/* --- the cards --- */
.hcard{
  position:absolute; left:0; top:0; width:64px; height:96px;
  margin-left:-32px; margin-top:-48px;
  perspective:900px; will-change:transform; cursor:pointer;
}
.hcard__flip{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d; transition:transform .7s var(--ease-out);
}
.hcard:hover .hcard__flip, .hcard:focus-visible .hcard__flip{ transform:rotateY(180deg); }
.hcard__face{
  position:absolute; inset:0; border-radius:7px; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.hcard__front{
  background:var(--paper); border:0;
  box-shadow:0 1px 2px rgba(11,11,12,.06), 0 8px 20px -8px rgba(11,11,12,.22);
}

/* --- loyalty card face --- */
.lc{
  width:100%; height:100%; border-radius:7px; overflow:hidden;
  background:var(--lc-bg); color:var(--lc-fg);
  display:flex; flex-direction:column; font-family:var(--sans);
}

/* the illustrated band, plus the little chip every real card has */
.lc__band{ position:relative; height:34px; flex:none; }
.lc__art{ display:block; width:100%; height:100%; }
.lc__chip{
  position:absolute; right:4px; bottom:4px; width:9px; height:6.5px; border-radius:1.4px;
  background:linear-gradient(135deg, #F4D793 0%, #D8B25E 55%, #F0DDA8 100%);
  box-shadow:inset 0 0 0 .4px rgba(0,0,0,.22);
}
.lc__chip::after{
  content:""; position:absolute; inset:1.4px 2px; border-left:.4px solid rgba(0,0,0,.28);
  border-right:.4px solid rgba(0,0,0,.28);
}

.lc__body{ flex:1; display:flex; flex-direction:column; padding:4px 5px 5px; min-height:0; }
.lc__type{
  font-size:3.6px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--lc-sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lc__name{
  font-size:8.4px; font-weight:600; line-height:1.04; letter-spacing:-.02em;
  margin-top:1.5px; overflow-wrap:anywhere;
}
.lc__stamps{ display:flex; gap:1.8px; margin-top:4px; }
.lc__stamp{
  width:4.4px; height:4.4px; border-radius:50%;
  border:.6px solid color-mix(in srgb, var(--lc-sub) 75%, transparent);
}
.lc__stamp.is-on{ background:var(--lc-ac); border-color:var(--lc-ac); }

.lc__codeRow{ margin-top:auto; display:flex; align-items:flex-end; gap:3px; }
.lc__code{
  width:19px; height:19px; border-radius:2px; flex:none;
  background:#fff; padding:1px; box-shadow:0 0 0 .5px rgba(0,0,0,.10);
}
.lc__code--bar{ width:34px; height:15px; border-radius:1.5px; }
.lc__no{
  display:flex; flex-direction:column; gap:.5px; line-height:1.1;
  font-size:3.2px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--lc-sub);
}
.lc__no b{ font-weight:700; font-size:4.4px; letter-spacing:.02em; color:var(--lc-ac); }

.hero__cardsnote{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  z-index:4; margin:0; font-size:.72rem;
  letter-spacing:-.006em; color:var(--ink-3);
  opacity:.75; text-align:center; width:min(90vw,540px); pointer-events:none;
}
.hcard__back{
  transform:rotateY(180deg); background:var(--ink); color:var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:6px; text-align:center;
  box-shadow:0 6px 16px -6px rgba(11,11,12,.3);
}
.hcard__kicker{ font-size:4.6px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#7FBFA4; }
.hcard__label{ font-size:6.5px; line-height:1.25; font-weight:500; }

/* --- hero copy: one block that travels, so the H1 is never hidden --- */
.hero__copy{
  position:absolute; left:50%; top:clamp(5.5rem, 15vh, 9rem); z-index:3;
  width:min(92vw, 720px); text-align:center; pointer-events:none;
  transform:translateX(-50%);
  will-change:transform;
}
.hero__copy .btn, .hero__copy a{ pointer-events:auto; }

.hero__title{
  font-size:clamp(2rem, 5vw, 4.1rem); font-weight:600;
  line-height:1.05; letter-spacing:-.035em; color:var(--ink);
}
/* The French headline runs to three lines. On a short viewport that left the
   ring no room and it collided with the copy, so the type yields first. */
@media (max-height:820px){
  .hero__title{ font-size:clamp(1.9rem, 4vw, 3rem); }
  .hero__copy{ top:clamp(4.5rem, 11vh, 7rem); }
  .hero__sub{ font-size:.98rem; }
}
@media (max-height:700px){
  .hero__title{ font-size:clamp(1.7rem, 3.4vw, 2.5rem); }
  .hero__scrollcue{ margin-top:var(--s4); }
}
.hero__title em{ font-style:normal; color:var(--accent); }
.hero__eyebrow{ justify-content:center; }

.hero__scrollcue{
  margin-top:var(--s6); font-size:.8rem; font-weight:500;
  letter-spacing:-.008em; color:var(--ink-3);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
}
.hero__scrollcue::after{
  content:""; width:1px; height:26px; background:linear-gradient(var(--line-2), transparent);
  animation:cue 2.2s var(--ease) infinite;
}
@keyframes cue{ 0%,100%{ transform:scaleY(.4); opacity:.4; transform-origin:top; } 50%{ transform:scaleY(1); opacity:1; transform-origin:top; } }

.hero__reveal{ }
.hero__sub{ margin-top:var(--s5); font-size:1.0625rem; color:var(--ink-2); max-width:52ch; margin-inline:auto; }
.hero__cta{ margin-top:var(--s6); display:flex; gap:var(--s3); justify-content:center; flex-wrap:wrap; }

/* ===========================================================
   STATS
   =========================================================== */
.stats{ border-block:1px solid var(--line); background:var(--paper); position:relative; z-index:4; }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.stats li{ padding:var(--s6) var(--s4); border-left:1px solid var(--line); }
.stats li:first-child{ border-left:0; }
.stats__n{ font-family:var(--display); font-size:clamp(1.7rem,3vw,2.5rem); line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.stats__l{ margin-top:var(--s2); font-size:.84rem; color:var(--ink-3); }

/* ===========================================================
   FEATURES — editorial numbered list
   =========================================================== */
.feats__head{ max-width:62ch; }
.feats__list{ margin-top:var(--s8); list-style:none; padding:0; display:grid; gap:0; }
.feat{
  display:grid; grid-template-columns:auto 1fr 1.15fr; gap:var(--s5);
  padding-block:var(--s6); border-top:1px solid var(--line); align-items:start;
}
.feat:last-child{ border-bottom:1px solid var(--line); }
.feat__n{ font-size:.72rem; color:var(--accent); padding-top:.45rem; font-variant-numeric:tabular-nums; }
.feat__t{ font-family:var(--display); font-size:1.5rem; line-height:1.2; }
.feat__d{ font-size:.98rem; }

/* ===========================================================
   WHAT YOU GET — scene epinglee : deux telephones et un MacBook

   Le defilement choisit laquelle des trois maquettes est montree ;
   les appareils sont du CSS, la scene ne telecharge rien. La liste
   garde la typographie de la V8 (numero, titre, phrase courte).

   Sans JavaScript, avec « animations reduites » ou sous 620 px de
   haut, `.wyg--live` n'est pas pose : la section reprend une hauteur
   normale, la premiere maquette reste affichee et les trois points
   se lisent a la suite.
   =========================================================== */
.wyg{
  padding-block:0;
  /* l'ecran des appareils : une nuit teintee de teal, propre a la scene */
  --scr-1:#0B3138; --scr-2:#061E23; --scr-ink:#EAF4F5; --scr-ink-2:#A9C4C8; --scr-ink-3:#8FADB3;
}
.wyg__spacer{ position:relative; }
.wyg--live .wyg__spacer{ height:320vh; }
.wyg__stage{ padding-block:var(--sec); }
.wyg--live .wyg__stage{
  position:sticky; top:0; height:100vh; box-sizing:border-box;
  padding:calc(52px + var(--s5)) 0 var(--s5);
  display:flex; flex-direction:column; justify-content:center; overflow:hidden;
}
.wyg--live .wyg__stage .h2{ font-size:clamp(1.6rem, 2.8vw, 2.3rem); }

.wyg__grid{
  margin-top:var(--s7); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--s8); align-items:center;
}
.wyg--live .wyg__grid{ margin-top:var(--s6); }

/* --- les appareils, empiles au meme endroit ---
   `--p` va de 0 a 1 sur la duree de l'etape ; la rotation passe de
   +6° a -6° et croise le zero au milieu, la ou l'ecran se lit. La
   perspective est dans la transformation de chaque appareil plutot que
   sur le conteneur : sans `preserve-3d` au-dessus, Chrome ne rogne plus
   l'ombre portee aux bords de l'appareil. */
.wyg__devices{ position:relative; min-height:clamp(300px, 46vh, 460px); display:grid; place-items:center; }
.wyg__dev{
  position:relative; grid-area:1 / 1; width:100%; display:grid; place-items:center;
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.97);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out), visibility .5s;
}
.wyg__dev.is-on{ opacity:1; visibility:visible; transform:none; }
.wyg--live .wyg__dev > .wyg__ph,
.wyg--live .wyg__dev > .laptop{
  transform:perspective(1400px) rotateY(calc((.5 - var(--p, .5)) * 12deg)) rotateX(2deg);
  transition:transform .18s linear;
}
/* l'ombre au sol donne l'assise */
.wyg--live .wyg__dev::after{
  content:""; position:absolute; left:50%; bottom:-4%; z-index:-1;
  width:56%; height:20px; transform:translateX(-50%) rotateX(72deg);
  background:radial-gradient(ellipse at center, rgba(29,29,31,.22), transparent 70%);
  filter:blur(6px); pointer-events:none;
}

/* --- le telephone --- */
.wyg__ph{ width:clamp(170px, 22vh, 230px); }
.phone{
  position:relative; width:100%; aspect-ratio:9/19; border-radius:38px; padding:9px;
  background:linear-gradient(160deg, #2A2A2E, #0B0B0D);
  box-shadow:
    0 2px 0 rgba(255,255,255,.12) inset,
    -5px 0 10px -6px rgba(0,0,0,.5), 5px 0 10px -6px rgba(255,255,255,.06),
    0 30px 60px -28px rgba(29,29,31,.45), 0 0 0 1px rgba(29,29,31,.14);
}
@supports not (aspect-ratio:1){ .phone{ height:480px; } }
.phone::before{
  content:""; position:absolute; left:50%; top:15px; transform:translateX(-50%);
  width:68px; height:18px; border-radius:999px; background:#0B0B0D; z-index:3;
}
.screen{
  position:relative; height:100%; border-radius:30px; overflow:hidden;
  background:linear-gradient(180deg, var(--scr-1), var(--scr-2)); color:var(--scr-ink);
}
.scene{ position:absolute; inset:0; padding:40px 14px 16px; display:flex; flex-direction:column; gap:11px; }

/* le reflet sur la vitre suit la rotation : de face, la vitre est presque propre */
.wyg--live .wyg__dev .screen::after,
.wyg--live .wyg__dev .laptop__scr::after{
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:linear-gradient(104deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.03) 26%, transparent 52%);
  opacity:calc(.3 + (.5 - var(--p, .5)) * .9);
}

/* --- le contenu des ecrans --- */
.sc__top{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:.6rem; color:var(--scr-ink-3); letter-spacing:.08em; text-transform:uppercase; }
.sc__card{
  border-radius:13px; padding:12px; background:linear-gradient(140deg, var(--s-deep-1), var(--s-deep-2));
  box-shadow:0 14px 30px -16px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.18);
}
.sc__brand{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--s-tint); }
.sc__name{ font-size:.88rem; font-weight:600; margin-top:2px; color:#fff; }
.sc__stamps{ display:flex; gap:5px; margin-top:10px; }
.sc__stamps i{ width:14px; height:14px; border-radius:50%; border:1.5px solid rgba(255,255,255,.4); display:block; }
.sc__stamps i.on{ background:var(--s-lit); border-color:var(--s-lit); }
.sc__bar{ height:5px; border-radius:999px; background:rgba(255,255,255,.16); overflow:hidden; margin-top:10px; }
.sc__bar i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--s-lit), var(--s-tint)); }
/* la recompense est le moment fort : elle s'inverse, fond clair et encre sombre */
.sc__reward{ border-radius:13px; padding:12px; text-align:center; background:var(--s-lit); }
.sc__reward b{ display:block; font-size:.9rem; color:#04161A; }
.sc__reward span{ font-size:.68rem; color:#0C3239; }
.sc__rows{ display:grid; gap:7px; }
.sc__row{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 10px; border-radius:9px; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1); font-size:.7rem; color:var(--scr-ink-2);
}
.sc__row b{ color:var(--scr-ink); font-weight:600; }
.sc__tabs{ margin-top:auto; display:flex; justify-content:space-between; padding:9px 6px 2px; border-top:1px solid rgba(255,255,255,.1); }
.sc__tabs i{ width:24px; height:3px; border-radius:2px; background:rgba(255,255,255,.18); }
.sc__tabs i:first-child{ background:var(--s-lit); }

/* la carte du wallet, glissee sur deux autres */
.wyg__wallet{ position:relative; padding-top:16px; }
.wyg__wcard{
  position:absolute; left:8px; right:8px; height:30px; border-radius:11px;
  background:linear-gradient(140deg, var(--s-deep-1), var(--s-deep-2)); border:1px solid rgba(255,255,255,.08);
}
.wyg__wcard--back{ top:0; opacity:.45; }
.wyg__wcard--mid{ top:8px; opacity:.7; }
.wyg__wcard--front{ position:relative; }

/* --- le MacBook : un capot, un ecran, un socle --- */
.laptop{ width:min(440px, 94%, 54vh); margin-inline:auto; }
.laptop__lid{
  border-radius:12px; padding:9px; background:linear-gradient(160deg, #2A2A2E, #0B0B0D);
  box-shadow:
    0 2px 0 rgba(255,255,255,.1) inset,
    -6px 0 12px -7px rgba(0,0,0,.45), 6px 0 12px -7px rgba(255,255,255,.05),
    0 30px 60px -28px rgba(29,29,31,.45), 0 0 0 1px rgba(29,29,31,.14);
}
.laptop__scr{
  position:relative; aspect-ratio:16/10; border-radius:6px; overflow:hidden; padding:11px;
  background:linear-gradient(180deg, var(--scr-1), var(--scr-2)); color:var(--scr-ink);
  display:flex; flex-direction:column; gap:8px;
}
@supports not (aspect-ratio:1){ .laptop__scr{ height:250px; } }
.laptop__base{
  height:11px; width:114%; margin-left:-7%; border-radius:0 0 11px 11px;
  background:linear-gradient(180deg, #C7C7CC, #8E8E93);
  box-shadow:0 14px 26px -14px rgba(29,29,31,.5);
}
.laptop__base::after{ content:""; display:block; width:16%; height:3px; margin:0 auto; border-radius:0 0 4px 4px; background:rgba(0,0,0,.18); }
/* le socle bascule en X pendant que le capot tourne en Y : c'est ce decalage qui fait l'objet */
.wyg--live .laptop{ transform-style:preserve-3d; }
.wyg--live .laptop__base{ transform:rotateX(30deg); transform-origin:50% 0; }
.lap__kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.lap__kpi{ border-radius:9px; padding:6px 8px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); }
.lap__kpi b{ display:block; font-size:.95rem; color:var(--scr-ink); line-height:1.1; }
.lap__kpi span{ display:block; font-size:.56rem; line-height:1.2; color:var(--scr-ink-3); }
.lap__chart{ flex:1 1 0; min-height:30px; display:flex; align-items:flex-end; gap:5px; }
.lap__chart i{ flex:1; height:var(--h); border-radius:3px 3px 0 0; background:linear-gradient(180deg, var(--s-lit), var(--s-fade)); }
.laptop__scr .sc__row{ padding:5px 8px; font-size:.62rem; }

/* --- une couleur par etape ---
   Le teal de la marque reste a 01 : c'est l'application du commercant.
   Le violet de 02 et le rose de 03 ne servent qu'ici, jamais en bouton.
   Tons clairs a au moins 6:1 sur l'ecran, encres a au moins 4,5:1 sur blanc. */
.wyg__dev[data-dev="0"]{ --s-lit:#35D2DC; --s-tint:#B0F0F4; --s-deep-1:#0F7079; --s-deep-2:#0A4A52; --s-fade:rgba(53,210,220,.28); }
.wyg__dev[data-dev="1"]{ --s-lit:#AE9DFF; --s-tint:#D2C9FF; --s-deep-1:#4A3A9E; --s-deep-2:#2E2470; --s-fade:rgba(174,157,255,.28); }
.wyg__dev[data-dev="2"]{ --s-lit:#FF9FB4; --s-tint:#FFC9D4; --s-deep-1:#9C3A5C; --s-deep-2:#6B2440; --s-fade:rgba(255,159,180,.28); }
.wyg__card[data-card="0"]{ --c-ink:var(--accent); }
.wyg__card[data-card="1"]{ --c-ink:#6B3FA0; }
.wyg__card[data-card="2"]{ --c-ink:#A83557; }

/* --- la liste : la typographie de la V8, un filet de couleur sur le point courant --- */
.wyg__cards{ list-style:none; margin:0; padding:0; display:grid; }
.wyg__card{
  position:relative; display:grid; grid-template-columns:auto 1fr; column-gap:var(--s4); row-gap:var(--s2);
  padding:var(--s5) 0 var(--s5) var(--s5); border-top:1px solid var(--line);
  transition:opacity .4s var(--ease-out);
}
.wyg__card:last-child{ border-bottom:1px solid var(--line); }
.wyg__card .feat__n{ grid-row:1 / span 2; color:var(--c-ink); }
.wyg__card .feat__t{ font-size:1.3rem; }
.wyg__card .feat__d{ grid-column:2; }
.wyg__card::before{
  content:""; position:absolute; left:0; top:var(--s5); bottom:var(--s5); width:2px; border-radius:2px;
  background:var(--c-ink); transform:scaleY(0); transform-origin:50% 0; transition:transform .45s var(--ease-out);
}
/* Les points en attente passent en gris de legende plutot qu'en
   transparence : a .42 d'opacite le texte tombait a 2:1, --ink-3 tient 5,1:1. */
.wyg__card .feat__t, .wyg__card .feat__d, .wyg__card .feat__n{ transition:color .4s var(--ease-out); }
.wyg--live .wyg__card:not(.is-on) .feat__t,
.wyg--live .wyg__card:not(.is-on) .feat__d,
.wyg--live .wyg__card:not(.is-on) .feat__n{ color:var(--ink-3); }
.wyg--live .wyg__card.is-on::before{ transform:scaleY(1); }

/* --- la barre d'avancement, seulement quand la scene est epinglee --- */
.wyg__progress{ display:none; }
.wyg--live .wyg__progress{ display:block; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--line); }
.wyg__progress span{ display:block; height:100%; width:0; background:var(--wyg-ink, var(--accent)); transition:width .12s linear; }

@media (max-width:1000px){
  .wyg__grid{ grid-template-columns:1fr; gap:var(--s6); }
  .wyg--live .wyg__card:not(.is-on){ display:none; }
  .wyg--live .wyg__card{ border-bottom:1px solid var(--line); }
}
@media (max-width:760px){
  .wyg--live .wyg__stage{ padding:calc(52px + var(--s3)) 0 var(--s4); }
  .wyg--live .wyg__spacer{ height:300vh; }
  .wyg--live .wyg__stage .h2{ font-size:clamp(1.3rem, 5.4vw, 1.7rem); }
  .wyg--live .wyg__grid{ margin-top:var(--s4); gap:var(--s4); }
  .wyg__devices{ min-height:clamp(230px, 38vh, 340px); }
  .wyg__ph{ width:clamp(160px, 21vh, 200px); }
  .phone{ border-radius:32px; padding:8px; }
  .screen{ border-radius:25px; }
  .phone::before{ top:13px; width:56px; height:15px; }
  .scene{ padding:34px 11px 12px; gap:8px; }
  .sc__card, .sc__reward{ padding:10px; border-radius:11px; }
  .sc__name, .sc__reward b{ font-size:.8rem; }
  .sc__reward span{ font-size:.6rem; }
  .sc__row{ padding:7px 9px; font-size:.64rem; }
  .laptop{ width:min(320px, 96%, 44vh); }
  .wyg__card{ padding:var(--s4) 0 var(--s4) var(--s4); }
  .wyg__card .feat__t{ font-size:1.12rem; }
  /* l'ecran du portable est trop court ici pour la liste : les chiffres et la courbe suffisent */
  .laptop__scr{ padding:9px; gap:7px; }
  .laptop__scr .sc__rows{ display:none; }
  .lap__kpi b{ font-size:.86rem; }
  .lap__kpi span{ font-size:.52rem; }
}

/* ===========================================================
   COMPARISON
   =========================================================== */
.cmp__grid{ margin-top:var(--s8); display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); align-items:start; }
.cmp__col{ padding:var(--s6) var(--s5); border:1px solid var(--line); border-radius:3px; background:var(--paper); }
.cmp__col--us{ background:var(--ink); border-color:var(--ink); color:#C9CBD0; margin-top:calc(var(--s6) * -1); padding-block:calc(var(--s6) + var(--s5)); }
.cmp__name{ font-family:var(--display); font-size:1.35rem; color:var(--ink); }
.cmp__col--us .cmp__name{ color:var(--paper); }
.cmp__list{ list-style:none; padding:0; margin:var(--s5) 0 0; display:grid; gap:var(--s3); }
.cmp__list li{ position:relative; padding-left:1.4rem; font-size:.94rem; }
.cmp__list li::before{
  content:""; position:absolute; left:0; top:.62em; width:9px; height:1px; background:var(--line-2);
}
.cmp__list--us li::before{
  content:""; top:.42em; width:9px; height:5px; background:none;
  border-left:1.5px solid var(--accent-lit); border-bottom:1.5px solid var(--accent-lit);
  transform:rotate(-45deg);
}
.cmp__note{ margin-top:var(--s6); max-width:64ch; font-size:.94rem; color:var(--ink-3); }

/* ===========================================================
   DEMO — the app in eight seconds
   =========================================================== */
.demo{ display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--s8); align-items:center; }
.demo__steps{ list-style:none; margin:var(--s6) 0 0; padding:0; display:grid; gap:var(--s3); counter-reset:dm; }
.demo__steps li{ position:relative; padding-left:2.4rem; font-size:.98rem; color:var(--ink); counter-increment:dm; }
.demo__steps li::before{
  content:counter(dm); position:absolute; left:0; top:-.1rem; width:1.6rem; height:1.6rem; border-radius:50%;
  display:grid; place-items:center; font-size:.74rem; font-weight:600; background:var(--accent-soft); color:var(--accent-deep);
}
.demo__media{
  position:relative; margin:0; aspect-ratio:16/9; border-radius:18px; overflow:hidden;
  background:var(--paper-2) center/cover no-repeat;
  box-shadow:0 1px 2px rgba(11,11,12,.05), 0 30px 60px -34px rgba(11,11,12,.35);
  contain:layout paint;
}
.demo__video{ display:block; width:100%; height:100%; object-fit:cover; }
.demo__toggle{
  position:absolute; right:12px; bottom:12px; width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
  display:grid; place-items:center; background:rgba(29,29,31,.72); color:#fff;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.demo__toggle:hover{ background:rgba(29,29,31,.9); transform:scale(1.05); }
.demo__toggle svg{ width:16px; height:16px; }
.demo__toggle .i-play{ display:none; }
.demo__media.is-paused .demo__toggle .i-play{ display:block; }
.demo__media.is-paused .demo__toggle .i-pause{ display:none; }

/* ===========================================================
   METHOD — real sequence, so real numbers
   =========================================================== */
.steps{ margin-top:var(--s8); list-style:none; padding:0; display:grid; gap:0; counter-reset:step; }
.steps li{
  display:grid; grid-template-columns:auto 1fr 1.1fr; gap:var(--s5);
  padding-block:var(--s6); border-top:1px solid var(--line); position:relative;
}
.steps li:last-child{ border-bottom:1px solid var(--line); }
.steps__dot{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line-2);
  display:grid; place-items:center; font-size:.74rem; color:var(--ink);
  background:var(--paper); counter-increment:step;
}
.steps li:last-child .steps__dot{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.steps__dot::before{ content:counter(step,decimal-leading-zero); }
.steps__t{ font-family:var(--display); font-size:1.5rem; line-height:1.2; }
.steps__time{ display:block; margin-top:var(--s2); font-size:.82rem; font-weight:600; letter-spacing:-.006em; color:var(--accent); }
.steps__d{ font-size:.98rem; }

/* ===========================================================
   PLANS
   =========================================================== */
.plans__head{ display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:var(--s5); }
.toggle{ display:inline-flex; border:1px solid var(--line-2); border-radius:2px; overflow:hidden; }
.toggle button{
  border:0; background:transparent; padding:0 1rem; cursor:pointer; font-size:.85rem; color:var(--ink-3);
  min-height:44px; display:inline-flex; align-items:center;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.toggle button.is-active{ background:var(--ink); color:var(--paper); }
.toggle button:not(.is-active):hover{ color:var(--ink); }

.plans__grid{ margin-top:var(--s8); display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); align-items:start; }
.plan{ border:1px solid var(--line); border-radius:3px; padding:var(--s6) var(--s5); background:var(--paper); display:flex; flex-direction:column; gap:var(--s4); }
.plan--feat{ background:var(--ink); border-color:var(--ink); color:#C9CBD0; margin-top:calc(var(--s6) * -1); padding-block:calc(var(--s6) + var(--s5)); }
.plan__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); }
.plan__name{ font-family:var(--display); font-size:1.45rem; color:var(--ink); }
.plan--feat .plan__name{ color:var(--paper); }
.plan__badge{
  font-size:.62rem; font-weight:600; letter-spacing:.01em; text-transform:none;
  padding:.28rem .55rem; border-radius:980px; background:var(--hot); color:#fff;
}
.plan__prices{ display:grid; gap:.15rem; }
.plan__price{ font-size:clamp(1.9rem,3.3vw,2.6rem); font-weight:600; letter-spacing:-.03em; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.plan__setup{ font-size:.72rem; font-weight:500; letter-spacing:.01em; color:var(--ink-3); }
.plan__mo{
  margin-top:.45rem; padding-top:.45rem; border-top:1px solid var(--line);
  font-size:.9rem; color:var(--ink-2); font-variant-numeric:tabular-nums;
}
.plan__mo b{ font-weight:600; font-size:1.15rem; letter-spacing:-.02em; color:var(--hot); }
.plan--feat .plan__setup{ color:#8E9298; }
.plan--feat .plan__mo{ border-top-color:rgba(255,255,255,.16); color:#C9CBD0; }
.plan--feat .plan__mo b{ color:var(--hot-lit); }
.plan--feat .plan__price{ color:var(--paper); }
.plan__price small{ font-size:.7rem; letter-spacing:.08em; color:var(--ink-3); vertical-align:.5em; margin-left:.25rem; }
.plan--feat .plan__price small{ color:#8E9298; }
.plan__for{ font-size:.9rem; color:var(--ink-3); border-left:2px solid var(--hot-soft); padding-left:var(--s3); }
.plan--feat .plan__for{ color:#9DA1A7; border-left-color:var(--hot); }
.plan__for b{ display:block; font-size:.66rem; font-weight:600; letter-spacing:.01em; color:var(--hot); margin-bottom:.2rem; }
.plan__list{ list-style:none; padding:0; margin:0; display:grid; gap:var(--s3); flex:1; }
.plan__list li{ position:relative; padding-left:1.4rem; font-size:.94rem; }
.plan__list li::before{
  content:""; position:absolute; left:0; top:.42em; width:9px; height:5px;
  border-left:1.5px solid var(--hot); border-bottom:1.5px solid var(--hot); transform:rotate(-45deg);
}
.plan--feat .plan__list li::before{ border-color:var(--hot-lit); }
.plan--feat .btn{ background:var(--hot); color:#fff; border-color:var(--hot); }
.plan--feat .btn:hover{ background:var(--hot-hover); border-color:var(--hot-hover); color:#fff; }
/* the whole pricing block is the warm zone, buttons included — a teal
   ghost CTA next to coral ticks read as two systems in one card */
.plan .btn--ghost{ color:var(--hot); border-color:var(--line-2); }
.plan .btn--ghost:hover{ background:var(--hot-soft); color:var(--hot-hover); border-color:var(--hot-soft); }
/* --- the monthly, explained as facts rather than a paragraph. It is not a
       fourth plan: it is what every plan already includes. --- */
.care{
  margin-top:var(--s6); display:grid; grid-template-columns:1fr 1.15fr; gap:var(--s7);
  align-items:center; padding:var(--s6);
  background:var(--ink); border-radius:3px; color:#C9CBD0;
}
.care__label{ font-size:.78rem; font-weight:600; letter-spacing:.01em; color:var(--hot-lit); }
.care__t{ margin-top:var(--s2); font-size:1.35rem; font-weight:600; letter-spacing:-.022em; color:var(--paper); }
.care__d{ margin-top:var(--s3); max-width:44ch; font-size:.92rem; color:#9DA1A7; }
.care__grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:.9rem 1.4rem;
}
.care__grid li{
  position:relative; padding-left:1.4rem; font-size:.93rem; color:var(--paper); font-weight:500;
}
.care__grid li::before{
  content:""; position:absolute; left:0; top:.42em; width:9px; height:5px;
  border-left:1.5px solid var(--hot-lit); border-bottom:1.5px solid var(--hot-lit); transform:rotate(-45deg);
}
@media (max-width:760px){
  .care{ grid-template-columns:1fr; gap:var(--s5); }
  .care__grid{ grid-template-columns:1fr; gap:.7rem; }
}

.plans__note{ margin-top:var(--s6); max-width:66ch; font-size:.92rem; color:var(--ink-3); }

/* ===========================================================
   FAQ
   =========================================================== */
.faq__list{ margin-top:var(--s8); border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  background:none; border:0; padding:var(--s5) 0; text-align:left; cursor:pointer;
  font-family:var(--display); font-size:1.22rem; color:var(--ink); line-height:1.3;
  transition:color .18s var(--ease);
}
.faq__q:hover{ color:var(--accent); }
.faq__ic{ position:relative; flex:none; width:16px; height:16px; }
.faq__ic::before,.faq__ic::after{ content:""; position:absolute; inset:50% 0 auto 0; height:1.5px; background:var(--accent); transition:transform .3s var(--ease); }
.faq__ic::after{ transform:rotate(90deg); }
.faq__item.open .faq__ic::after{ transform:rotate(0deg); }
.faq__a{ overflow:hidden; max-height:0; transition:max-height .4s var(--ease); }
.faq__a p{ padding:0 0 var(--s5); max-width:70ch; font-size:.98rem; }

/* ===========================================================
   CONTACT
   =========================================================== */
.contact__grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:var(--s8); align-items:start; }
.contact__promise{
  margin-top:var(--s6); padding:var(--s4) var(--s5); border-left:2px solid var(--accent);
  background:var(--paper); font-size:.94rem; color:var(--ink);
}
.contact__alt{ margin-top:var(--s5); display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; font-size:.94rem; color:var(--ink-3); }
.contact__alt a{ color:var(--accent); text-underline-offset:3px; }

.form{ display:grid; gap:var(--s4); }
.form__row{ display:grid; gap:var(--s4); grid-template-columns:1fr 1fr; }
.field{ display:grid; gap:var(--s2); }
.field label{ font-size:.68rem; font-weight:600; letter-spacing:.01em; text-transform:none; color:var(--ink-3); }
.field input,.field textarea{
  font:inherit; font-size:.98rem; color:var(--ink); background:var(--paper);
  border:1px solid var(--line-2); border-radius:2px; padding:.8rem .9rem; min-height:48px;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea{ resize:vertical; min-height:128px; }
.field input::placeholder,.field textarea::placeholder{ color:#A9ABB0; }
.field input:focus,.field textarea:focus{ outline:0; border-color:var(--accent); box-shadow:0 0 0 3px rgba(11,111,120,.40); }
.form__status{ font-size:.9rem; color:var(--ink-2); }
.form__status[hidden]{ display:none; }

/* ===========================================================
   FOOTER
   =========================================================== */
.foot{ background:var(--ink); color:#9DA1A7; padding-block:var(--s7); }
.foot__wrap{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s4); }
.foot .brand__word{ color:var(--paper); }
.foot p{ font-size:.9rem; }
.foot__tiny{ font-size:.8rem; opacity:.8; }
.foot__legal{ width:100%; font-size:.8rem; display:flex; gap:.6rem; flex-wrap:wrap; }
.foot__legal a{ color:#9DA1A7; text-decoration:none; border-bottom:1px solid rgba(157,161,167,.35); }
.foot__legal a:hover{ color:var(--paper); border-bottom-color:var(--accent-lit); }
.foot__legal span{ opacity:.45; }

/* ===========================================================
   REVEALS
   =========================================================== */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }

.toast{
  position:fixed; left:50%; bottom:1.5rem; transform:translate(-50%,calc(100% + 2rem));
  background:var(--ink); color:var(--paper); padding:.7rem 1.1rem; border-radius:2px;
  font-size:.88rem; z-index:150; opacity:0; visibility:hidden;
  transition:transform .4s var(--ease-out), opacity .3s var(--ease), visibility 0s linear .4s;
}
.toast.show{ transform:translate(-50%,0); opacity:1; visibility:visible; transition-delay:0s; }

/* ===========================================================
   LEGAL PAGES
   =========================================================== */
.legal{ padding-block:calc(var(--sec) + 3rem) var(--sec); }
.legal__wrap{ width:100%; max-width:760px; margin-inline:auto; padding-inline:var(--gut); }
.legal__back{ font-size:.72rem; font-weight:600; letter-spacing:.01em; text-transform:none; color:var(--accent); text-decoration:none; }
.legal h1{ font-family:var(--display); font-size:clamp(2rem,4.4vw,3rem); line-height:1.08; margin-top:var(--s5); }
.legal h2{ font-family:var(--display); font-size:1.7rem; margin-top:var(--s8); padding-top:var(--s5); border-top:1px solid var(--line); }
.legal h3{ font-family:var(--sans); font-size:1rem; font-weight:600; margin-top:var(--s6); }
.legal p,.legal li{ font-size:.96rem; margin-top:var(--s3); }
.legal ul,.legal ol{ padding-left:1.2rem; }
.legal__meta{ font-size:.78rem; color:var(--ink-3); }
.legal__toc{ margin-top:var(--s6); padding:var(--s5); background:var(--paper-2); border-radius:3px; }
.legal__toc ol{ margin:0; }
.legal__toc a{ color:var(--ink); text-underline-offset:3px; }
.legal__warn{
  margin-top:var(--s5); padding:var(--s4) var(--s5);
  background:var(--paper-2); border-left:2px solid var(--accent); border-radius:0 3px 3px 0;
}
.legal__warn p{ margin-top:0; }
.legal__table{ margin-top:var(--s4); overflow-x:auto; border:1px solid var(--line); border-radius:3px; }
.legal__table table{ width:100%; border-collapse:collapse; font-size:.88rem; min-width:560px; }
.legal__table th,.legal__table td{ text-align:left; vertical-align:top; padding:.65rem .8rem; border-bottom:1px solid var(--line); }
.legal__table th{ background:var(--paper-2); color:var(--ink); font-weight:600; }
.legal__table tr:last-child td{ border-bottom:0; }
.legal code{ font-size:.85em; background:var(--paper-2); padding:.05rem .3rem; border-radius:2px; }
.todo{
  background:#FBE6C8; border:1px dashed #C08A2E; border-radius:2px;
  padding:.05rem .35rem; font-size:.82em; color:#6B4A08;
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:1024px){
  .contact__grid{ grid-template-columns:1fr; gap:var(--s7); }
  .demo{ grid-template-columns:1fr; gap:var(--s6); }
  .cmp__grid,.plans__grid{ grid-template-columns:1fr; }
  .cmp__col--us,.plan--feat{ margin-top:0; }
  .feat,.steps li{ grid-template-columns:auto 1fr; }
  .feat__d,.steps__d{ grid-column:2; }
}
@media (max-width:860px){
  .nav__toggle{ display:flex; }
  .nav__links{
    position:fixed; inset:0 0 0 auto; width:min(84vw,320px);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--s5);
    background:var(--paper); border-left:1px solid var(--line); padding:var(--s7) var(--s6);
    transform:translateX(100%); transition:transform .38s var(--ease-out);
    box-shadow:-20px 0 50px -20px rgba(11,11,12,.18);
  }
  .nav__links.open{ transform:translateX(0); }
  /* in the drawer the compact bar sizing does not apply: these are touch
     targets again, so they go back to full height and readable size */
  .nav__links a:not(.btn){ font-size:1.2rem; font-weight:500; align-self:flex-start; min-height:44px; }
  .nav__links a:not(.btn)::after{ bottom:8px; }
  .lang{ align-self:flex-start; border:1px solid var(--line-2); border-radius:980px; overflow:hidden; gap:0; }
  .lang__btn{ padding:0 .95rem; font-size:.8rem; }
  .lang__btn.is-active{ background:var(--ink); color:var(--paper); }
  .lang__btn + .lang__btn{ border-left:1px solid var(--line-2); margin-left:0; padding-left:.95rem; }
  .nav__links .btn--mini{ min-height:44px; }
  .nav__item{ flex-direction:column; align-items:flex-start; width:100%; }
  .nav__trigger{ font-size:1.2rem; font-weight:500; min-height:44px; }
  .nav__panel{
    position:static; opacity:1; visibility:visible; transform:none;
    background:none; backdrop-filter:none; -webkit-backdrop-filter:none; border:0;
    max-height:0; overflow:hidden; transition:max-height .3s var(--ease);
  }
  .nav__item.open .nav__panel{ max-height:520px; }
  .nav__panelInner{ grid-template-columns:1fr; gap:1.1rem; padding:.4rem 0 1rem; }
  .nav__group a{ font-size:.98rem; }
  .stats__grid{ grid-template-columns:repeat(2,1fr); }
  .stats li:nth-child(3){ border-left:0; }
  .stats li:nth-child(n+3){ border-top:1px solid var(--line); }
  .form__row{ grid-template-columns:1fr; }
  .hero{ height:300vh; }
  .foot__wrap{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:520px){
  .stats__grid{ grid-template-columns:1fr; }
  .stats li{ border-left:0; border-top:1px solid var(--line); }
  .stats li:first-child{ border-top:0; }
  .feat,.steps li{ grid-template-columns:1fr; gap:var(--s3); }
  .feat__d,.steps__d{ grid-column:1; }
  .feat__n{ padding-top:0; }
}

/* ===========================================================
   REDUCED MOTION — the constellation resolves, it does not perform
   =========================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  .hero{ height:auto; }
  .hero__stage{ position:relative; height:auto; min-height:auto; padding-block:calc(var(--sec) + 3rem) var(--sec); display:block; }
  .hero__field{ display:none; }
  .hero__copy{ position:relative; left:auto; top:auto; transform:none !important; opacity:1 !important; width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); text-align:left; }
  .hero__scrollcue{ display:none; }
  .hero__cardsnote{ display:none; }
  .hero__reveal{ opacity:1 !important; transform:none !important; }
  .hero__eyebrow{ justify-content:flex-start; }
  .hero__cta{ justify-content:flex-start; }
  .hero__sub{ margin-inline:0; }
  .hero__cta{ justify-content:flex-start; }
  .hcard__flip{ transition:none; }
}



/* ===========================================================
   MOTION v2 — short, quiet, staggered
   =========================================================== */
/* reveals: siblings arrive one after another (--i set in JS) */
.reveal{ transition-delay:calc(var(--i, 0) * 70ms); }
.reveal.in{ transition-delay:calc(var(--i, 0) * 70ms); }
.reveal{ transform:translateY(22px) scale(.985); }
.reveal.in{ transform:none; }

/* page change: the incoming page settles in */
.page.is-entering main{ animation:pageSettle .45s var(--ease-out) both; }
@keyframes pageSettle{ from{ opacity:0; transform:translateY(10px); } }

/* two offers, centred as a pair */
.plans__grid{ grid-template-columns:repeat(2, minmax(0, 380px)); justify-content:center; }
.plan{ transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out); }
.plan:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -30px rgba(11,11,12,.35); border-color:var(--line-2); }
.plan--feat:hover{ box-shadow:0 30px 60px -28px rgba(11,11,12,.6); }
.plan .btn{ transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); }

/* points meter under the demo steps */
.pts{
  margin-top:var(--s6); padding:var(--s4) var(--s5); border-radius:14px;
  background:var(--paper); border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(11,11,12,.04), 0 16px 34px -26px rgba(11,11,12,.3);
}
.pts__row{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3); }
.pts__label{ font-size:.78rem; font-weight:600; letter-spacing:.01em; color:var(--ink-3); }
.pts__val{ font-size:1.35rem; font-weight:600; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
.pts__val small{ font-size:.8rem; font-weight:500; color:var(--ink-3); }
.pts__track{ margin-top:var(--s3); height:8px; border-radius:99px; background:var(--paper-3); overflow:hidden; }
.pts__fill{
  height:100%; width:100%; border-radius:inherit; transform-origin:left center; transform:scaleX(0);
  background:linear-gradient(90deg, var(--accent), var(--accent-lit));
  transition:transform 1.6s var(--ease-out) .2s;
}
.pts.is-on .pts__fill{ transform:scaleX(1); }
.pts__reward{
  margin-top:var(--s3); display:inline-flex; align-items:center; gap:.45rem;
  padding:.3rem .7rem; border-radius:99px; background:var(--hot-soft); color:var(--hot-hover);
  font-size:.78rem; font-weight:600;
  opacity:0; transform:translateY(6px) scale(.96);
  transition:opacity .4s var(--ease-out) 1.7s, transform .4s var(--ease-out) 1.7s;
}
.pts__reward::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--hot); }
.pts.is-on .pts__reward{ opacity:1; transform:none; }

@media (max-width:1024px){
  .plans__grid{ grid-template-columns:minmax(0, 480px); }
}
@media (prefers-reduced-motion:reduce){
  .reveal, .reveal.in{ transform:none; transition-delay:0s; }
  .page.is-entering main{ animation:none; }
  .plan:hover{ transform:none; }
  .pts__fill{ transform:scaleX(1); }
  .pts__reward{ opacity:1; transform:none; }
}

/* ===========================================================
   COOKIE CONSENT — refusing is exactly as easy as accepting
   =========================================================== */
.consent{
  position:fixed; left:var(--s4); bottom:var(--s4); z-index:1001;
  width:min(420px, calc(100vw - 2 * var(--s4)));
  padding:var(--s5); border-radius:14px;
  background:rgba(255,255,255,.96); color:var(--ink-2);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 24px 60px -28px rgba(11,11,12,.45);
  opacity:0; transform:translateY(16px); visibility:hidden;
  transition:opacity .35s var(--ease-out), transform .35s var(--ease-out), visibility 0s linear .35s;
}
.consent.is-open{ opacity:1; transform:none; visibility:visible; transition-delay:0s; }
.consent__t{ font-size:1rem; font-weight:600; color:var(--ink); letter-spacing:-.015em; }
.consent__d{ margin-top:var(--s2); font-size:.86rem; line-height:1.5; }
.consent__d a{ color:var(--accent); text-underline-offset:3px; }
.consent__actions{ margin-top:var(--s4); display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); }
.consent__actions .btn{ min-height:44px; padding:0 1rem; font-size:.9rem; }
.consent__actions .btn--ghost{ color:var(--ink); border-color:var(--line-2); }
.foot__legal button{
  border:0; background:none; padding:0; cursor:pointer; font:inherit; font-size:inherit;
  color:#9DA1A7; border-bottom:1px solid rgba(157,161,167,.35);
}
.foot__legal button:hover{ color:var(--paper); border-bottom-color:var(--accent-lit); }
@media (max-width:520px){
  .consent{ left:var(--s3); right:var(--s3); width:auto; bottom:var(--s3); padding:var(--s4); }
}
@media (prefers-reduced-motion:reduce){ .consent{ transform:none; } }

/* ===========================================================
   FORM ERRORS
   A message under the field it belongs to, in the same warm
   signal the offers block uses for attention.
   =========================================================== */
.field__err{ margin:0; font-size:.82rem; line-height:1.4; color:var(--hot); }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"]{ border-color:var(--hot); }
.field input[aria-invalid="true"]:focus,
.field textarea[aria-invalid="true"]:focus{
  border-color:var(--hot); box-shadow:0 0 0 3px rgba(191,69,41,.28);
}

/* --hot is mixed for white. On the dark featured offer it falls to 3.3:1,
   so the label takes the lighter member of the same pair. */
.plan--feat .plan__for b{ color:var(--hot-lit); }