/* Maquette de l'accueil tourné vers les créateurs (13/10). Elle s'appuie sur site/style.css et n'ajoute que
   ce qui manque : l'en-tête avec le bouton visible sur téléphone, le premier écran, les règles, l'argent,
   les étapes sous le ciel. Mêmes jetons que le site : ciel, Manrope, encre, un seul cobalt. */

/* En-tête : « Request your twin » reste visible sur téléphone, « Sign in » devient un lien discret */
.nx-hdr{gap:36px}
.nx-in{margin-left:auto;display:inline-flex;align-items:center;min-height:var(--tap);padding:0 6px;font-size:var(--fs-body);font-weight:600;opacity:.92}
.nx-get{display:inline-flex;align-items:center;height:var(--btn-sm);padding:0 16px;border-radius:12px;background:#fff;color:var(--ink);font-weight:600;font-size:var(--fs-body);white-space:nowrap;margin-left:-16px}
.nx-menu{display:none;min-height:var(--tap);padding:0 2px;border:0;background:none;font-weight:600;color:#fff}
@media (max-width:900px){
  .nx-hdr .nav,.nx-in{display:none}
  .nx-hdr{background:linear-gradient(180deg,var(--haut),rgba(0,0,0,0));gap:12px}
  .nx-get{margin-left:auto}
  .nx-menu{display:inline-flex;align-items:center}
}

/* Le premier écran : le texte à gauche, les messages des followers à droite, qui reçoivent leur réponse */
.nx-hero{max-height:980px}
.nx-copy{position:absolute;z-index:4;left:var(--g);top:22%;max-width:min(46%,660px)}
.nx-copy h1{font-size:var(--fs-display);line-height:1.02;letter-spacing:-.04em;font-weight:500}
.nx-lede{margin-top:clamp(18px,2vw,26px);max-width:36ch;font-size:var(--fs-lead);line-height:1.5;font-weight:500;opacity:.96}
.nx-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:30px}
.nx-hero .nx-go,.nx-end .nx-go{background:#fff;color:var(--ink);box-shadow:0 18px 36px -18px rgba(8,18,40,.5)}
@media (hover:hover){.nx-hero .nx-go:hover,.nx-end .nx-go:hover{background:#F1F4FF}}
.nx-sure{margin-top:16px;font-size:var(--fs-small);font-weight:500;opacity:.9}

.nx-inbox{position:absolute;z-index:4;right:var(--g);top:50%;transform:translateY(-36%);width:min(410px,32vw);display:flex;flex-direction:column;gap:10px}
.nx-inbox li{display:grid;grid-template-columns:36px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;row-gap:4px;align-items:center;padding:12px 16px 12px 12px;border-radius:18px;
  background:rgba(22,30,32,.38);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border:1px solid rgba(255,255,255,.18);color:#fff;
  animation:nx-in .6s var(--ease) both;animation-delay:calc(.5s + var(--i) * .7s)}
.nx-inbox img{grid-row:1/3;width:36px;height:36px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.nx-q{font-size:var(--fs-small);font-weight:600;line-height:1.35}
.nx-done{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-caption);font-weight:600;color:#DDE6FF;animation:nx-fade .4s ease both;animation-delay:calc(1.4s + var(--i) * .7s)}
.nx-done svg{width:14px;height:14px}
@keyframes nx-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes nx-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.nx-inbox li,.nx-done{animation:none}}

@media (max-width:1000px){.nx-copy{max-width:56%}.nx-inbox{width:min(360px,38vw)}}
@media (max-width:760px){
  .nx-hero{height:auto;min-height:100svh;max-height:none;display:flex;flex-direction:column;justify-content:space-between;padding:92px var(--g) 22px}
  .nx-copy,.nx-inbox{position:relative;left:auto;right:auto;top:auto;transform:none;max-width:none;width:auto}
  .nx-copy h1{font-size:clamp(36px,10.4vw,46px)}
  .nx-lede{font-size:var(--fs-body);max-width:34ch;margin-top:14px}
  .nx-acts{margin-top:22px;gap:10px 18px}
  .nx-acts .nx-go{flex:1 1 100%;justify-content:center}
  .nx-acts .ch-more{display:none}
  .nx-sure{margin-top:12px;font-size:var(--fs-caption);text-shadow:0 1px 10px rgba(10,30,70,.45)}
  .nx-inbox{margin-top:40px;gap:8px}
  .nx-inbox li:nth-child(3){display:none}
}

/* La preuve : le chat de Lina, regardé par le créateur */
.nx-see{padding-top:clamp(56px,6vw,96px)}
.nx-topics-k{margin-top:30px;font-size:var(--fs-small);font-weight:600;opacity:.9}
.nx-see .topics{margin-top:12px}
.nx-topics-note{margin-top:12px;font-size:var(--fs-small);opacity:.85}

/* Les sections blanches */
.nx-sec{max-width:calc(1352px + 2*var(--g));margin:0 auto;padding:clamp(72px,8vw,120px) var(--g) 0}
.nx-sec h2{font-size:var(--fs-headline);line-height:1.04;letter-spacing:-.035em;font-weight:500;max-width:20ch}
.mute{color:var(--gray)}

/* Les règles : un exemple vrai à gauche, quatre règles sur des filets à droite */
.nx-rules-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px clamp(48px,7vw,120px);align-items:start}
.nx-rules-head{display:flex;flex-direction:column;gap:40px}
.nx-azul{margin:0;max-width:400px;display:flex;flex-direction:column;gap:12px;padding:14px 16px 20px;border-radius:26px;background:linear-gradient(170deg,#F3F6FF 0%,#FAF8FF 55%,#FFF5F8 100%);box-shadow:0 24px 50px -30px rgba(23,51,214,.35)}
.nx-azul-top{display:flex;align-items:center;gap:8px;padding:2px 4px 10px;border-bottom:1px solid #E1E6FA;font-size:var(--fs-small)}
.nx-azul-top svg{width:18px;height:18px;color:var(--cobalt)}
.nx-azul .bulle{font-family:-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.nx-azul .bulle.fan{background:var(--cobalt)}
.nx-list li{padding:22px 0 24px;border-top:1px solid #ECECEE}
.nx-list li:last-child{border-bottom:1px solid #ECECEE}
.nx-list h3{font-size:var(--fs-title);font-weight:600;letter-spacing:-.01em}
.nx-list p{margin-top:6px;max-width:48ch;color:#55565B;line-height:1.55}
.nx-ink{margin-top:22px;color:var(--cobalt);text-decoration-color:rgba(23,51,214,.3)}
.nx-rules .nx-ink{grid-column:2;justify-self:start}
@media (max-width:900px){.nx-rules-in{grid-template-columns:1fr}.nx-rules .nx-ink{grid-column:1}}

/* Les moments : la scène de Lina, sans le titre en double */
.nx-moments{margin-top:clamp(72px,8vw,120px)}

/* L'argent en trois temps */
.nx-beats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(32px,4vw,64px);margin-top:44px}
.nx-beats li{padding:24px 0 8px;border-top:1px solid #ECECEE}
.nx-n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#EEF1FD;color:var(--cobalt);font-size:var(--fs-small);font-weight:700;font-variant-numeric:tabular-nums}
.nx-beats h3{margin-top:16px;font-size:var(--fs-title);font-weight:600;letter-spacing:-.01em}
.nx-beats p{margin-top:8px;color:#55565B;line-height:1.55;max-width:34ch}
.nx-beats b{font-weight:600;color:var(--ink)}
.nx-fine{margin-top:26px;font-size:var(--fs-small);color:var(--gray)}
@media (max-width:760px){.nx-beats{grid-template-columns:1fr;margin-top:28px}}

/* La fin sous le ciel : quatre étapes et le seul bouton */
.nx-end{margin-top:clamp(88px,9vw,140px);padding:clamp(80px,9vw,128px) var(--g);color:#fff;background:linear-gradient(180deg,#2F69C2 0%,#4D88D6 58%,#79AAE4 100%);position:relative;isolation:isolate;overflow:hidden}
.nx-end::before{content:"";position:absolute;inset:-20% -10% auto auto;width:60%;height:120%;z-index:-1;background:radial-gradient(closest-side,rgba(255,255,255,.22),rgba(255,255,255,0))}
.nx-end-in{max-width:1352px;margin:0 auto}
.nx-end h2{font-size:var(--fs-headline);line-height:1.04;letter-spacing:-.035em;font-weight:500;max-width:18ch}
.nx-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px clamp(24px,3vw,48px);margin-top:44px}
.nx-steps li{padding-top:20px;border-top:1px solid rgba(255,255,255,.35)}
.nx-steps .nx-n{background:#fff}
.nx-steps p{margin-top:14px;line-height:1.5;opacity:.96}
.nx-steps b{font-weight:600}
.nx-end-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:44px}
.nx-link{display:inline-flex;align-items:center;gap:2px;margin-top:40px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.16);font-size:var(--fs-small);font-weight:500}
.nx-link b{font-weight:700}
@media (max-width:900px){.nx-steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.nx-steps{grid-template-columns:1fr}.nx-end-acts .nx-go{flex:1 1 100%;justify-content:center}}

/* Le follower égaré */
.nx-fol{padding-bottom:clamp(72px,8vw,112px)}
.nx-fol h2{font-size:var(--fs-subhead);letter-spacing:-.02em;font-weight:600}
.nx-fol p{margin-top:10px;max-width:52ch;color:#55565B;line-height:1.55}
.nx-fol .nx-ink{margin-top:12px}

/* v2 : la barre du haut prend le compte du créateur, Instagram ou TikTok, et ouvre « Join Azul » déjà rempli */
.v2-ask{padding-left:12px}
.v2-nets{flex:none;display:flex;gap:4px;padding:4px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.v2-nets button{width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:9px;background:none;cursor:pointer;opacity:.55;transition:opacity .2s var(--ease),background .2s var(--ease)}
.v2-nets button[aria-checked="true"]{opacity:1;background:#fff}
.v2-nets img{width:20px;height:20px}
.v2-nets button:focus-visible,.v2-ask .go:focus-visible{outline:2px solid #fff;outline-offset:2px}
.v2-ask .typed{left:118px;right:200px}
.go-short{display:none}
@media (max-width:760px){
  .v2-ask{padding-left:6px}
  .v2-nets{padding:3px;gap:2px}
  .v2-nets button{width:32px;height:32px}
  .v2-nets img{width:18px;height:18px}
  .v2-ask .typed{left:92px;right:104px}
  .v2-ask .go{padding:0 16px}
  .go-long{display:none}.go-short{display:inline}
}

/* v2 : sous le haut de page, le chat de Lina garde le blanc qu'il a sur le site au lieu de coller à la photo */
@media (min-width:761px){.hero+.asking{padding-top:clamp(80px,9vw,140px)}}

/* v2 : sur téléphone, « Request your twin » en haut à la place de « Sign in », qui reste dans le menu */
@media (max-width:900px){
  .hdr .get{display:inline-flex;margin-left:auto}
  .hdr .hdr-in{display:none}
}

/* v2 : trois phrases à côté du chat de Lina, lisibles d'un coup d'oeil */
.v2-trois{margin-top:28px;display:flex;flex-direction:column;gap:16px}
.v2-trois li{display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:start;font-size:var(--fs-lead);line-height:1.4;font-weight:500}
.v2-ico{width:26px;height:26px;color:#fff}
.v2-trois b{font-weight:700}
@media (max-width:760px){.v2-trois li{font-size:var(--fs-body)}.v2-ico{width:22px;height:22px}}

/* v2 : un moment partagé, une seule photo, floutée jusqu'à ce qu'on la touche, l'échange avec Azul posé dessus */
.v2-moment{max-width:calc(1120px + 2*var(--g));margin:0 auto;padding:clamp(24px,3vw,48px) var(--g) clamp(80px,8vw,120px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:clamp(40px,6vw,96px);align-items:center}
.v2-moment h2{font-size:var(--fs-headline);line-height:1.04;letter-spacing:-.035em;font-weight:500;max-width:13ch}
.v2-moment-copy p{margin-top:22px;max-width:38ch;color:#55565B;font-size:var(--fs-lead);line-height:1.5}
.v2-shot{position:relative;margin:0;border-radius:30px;overflow:hidden;aspect-ratio:4/5;background:#C9BBAA;box-shadow:0 44px 90px -44px rgba(20,30,60,.5)}
.v2-shot img{width:100%;height:100%;object-fit:cover;transition:filter .6s var(--ease),transform .6s var(--ease)}
.v2-shot:not(.vu) img{filter:blur(26px) saturate(1.15);transform:scale(1.1)}
.v2-say{position:absolute;left:18px;right:18px;top:18px;display:flex;flex-direction:column;gap:8px;transition:opacity .4s var(--ease)}
.v2-shot.vu .v2-say{opacity:0}
.v2-b{max-width:78%;padding:11px 15px;border-radius:20px;font-family:-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:15px;line-height:1.35}
.v2-azul{display:flex;align-items:center;gap:8px;align-self:flex-start;background:rgba(255,255,255,.92);color:var(--ink);border-bottom-left-radius:6px}
.v2-azul svg{width:16px;height:16px;flex:none;color:var(--cobalt)}
.v2-yes{align-self:flex-end;background:var(--cobalt);color:#fff;border-bottom-right-radius:6px}
.v2-tap{position:absolute;inset:0;display:grid;place-items:center;border:0;background:none;cursor:pointer}
.v2-veil{display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff;font-size:var(--fs-lead);font-weight:600;text-shadow:0 1px 10px rgba(0,0,0,.25);transition:opacity .4s var(--ease)}
.v2-veil svg{width:44px;height:44px;filter:drop-shadow(0 2px 10px rgba(0,0,0,.2));animation:gelee 2.6s cubic-bezier(.44,0,.56,1) 1.5s infinite}
.v2-shot.vu .v2-veil{opacity:0}
.v2-tap:focus-visible{outline:2px solid #fff;outline-offset:-6px;border-radius:30px}
@media (prefers-reduced-motion:reduce){.v2-veil svg{animation:none}}
@media (prefers-reduced-motion:reduce){.v2-shot img,.v2-say{transition:none}}
@media (max-width:860px){.v2-moment{grid-template-columns:1fr}.v2-shot{max-width:440px;width:100%}}

/* v2 : ce qu'on peut partager, et la réponse d'un follower une fois la photo vue */
.v2-kinds{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:30px}
.v2-kinds li{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-body);font-weight:600;color:var(--ink)}
.v2-kinds svg{width:24px;height:24px;color:var(--cobalt)}
.v2-reply{position:absolute;left:18px;bottom:18px;max-width:80%;display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:22px;border-bottom-left-radius:6px;
  background:rgba(255,255,255,.94);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:15px;line-height:1.35;
  box-shadow:0 12px 30px -14px rgba(10,20,40,.45);opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease) .5s,transform .5s var(--ease) .5s;pointer-events:none;z-index:2}
.v2-reply img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none}
.v2-shot.vu .v2-reply{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.v2-reply{transition:none}}



/* v2, page des followers : l'appel, sous le ciel, l'écran d'un appel en cours à droite */
.v2-call{padding:0 var(--g) clamp(72px,8vw,120px)}
.v2-call-in{position:relative;isolation:isolate;overflow:hidden;max-width:1040px;margin:0 auto;border-radius:30px;color:#fff;padding:clamp(36px,4vw,56px) clamp(28px,5vw,72px);display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:clamp(32px,5vw,72px);align-items:center;
  background:linear-gradient(160deg,#2F69C2 0%,#4D88D6 55%,#8DB9EA 100%)}
.v2-call-in::before{content:"";position:absolute;inset:-30% auto auto -20%;width:70%;height:140%;z-index:-1;background:radial-gradient(closest-side,rgba(255,255,255,.22),rgba(255,255,255,0))}
.v2-call-in .v2-big{color:#fff;display:flex;flex-direction:column;gap:clamp(14px,1.6vw,22px);font-size:clamp(32px,3.6vw,52px);line-height:1.05;letter-spacing:-.035em;font-weight:500}
.v2-big span+span{color:rgba(255,255,255,.78)}
.v2-call-foot{margin-top:clamp(20px,2.6vw,32px);max-width:40ch;font-size:var(--fs-lead);line-height:1.45;color:rgba(255,255,255,.9)}
.v2-call-foot b{color:#fff;font-weight:700}
.v2-screen{position:relative;width:100%;aspect-ratio:9/18;border-radius:38px;overflow:hidden;color:#fff;font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;box-shadow:0 50px 90px -40px rgba(10,30,80,.6)}
.v2-screen>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.v2-screen::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,0) 32%,rgba(0,0,0,0) 55%,rgba(0,0,0,.6) 100%)}
.v2-island{position:absolute;z-index:3;top:10px;left:50%;width:84px;height:24px;margin-left:-42px;border-radius:20px;background:#000}
.v2-who-call{position:absolute;z-index:2;top:48px;left:0;right:0;text-align:center}
.v2-who-call b{display:block;font-size:26px;font-weight:500}
.v2-who-call small{display:block;margin-top:4px;font-size:16px;opacity:.85;font-variant-numeric:tabular-nums}
.v2-keys{position:absolute;z-index:2;left:16px;right:16px;bottom:30px;display:flex;justify-content:space-between}
.v2-keys>span{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px}
.v2-k{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.22);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.v2-k svg{width:24px;height:24px}
.v2-end{background:#FF3B30}.v2-end svg{transform:rotate(135deg)}
@media (max-width:900px){.v2-call-in{grid-template-columns:1fr}.v2-screen{max-width:240px;margin:0 auto}}
@media (max-width:760px){.v2-call{padding:0 0 64px}.v2-call-in{border-radius:0}}

/* v2 : le bouton du haut plus petit */
.hdr .get{height:36px;padding:0 14px;border-radius:10px;font-size:var(--fs-small)}

/* v2 : les téléphones dessinés comme un vrai iPhone. Un cadre noir fin, un liseré de titane, les boutons sur la tranche,
   un reflet très léger sur la vitre, et une ombre en deux temps (une ombre de contact courte, puis une ombre douce et
   pâle) au lieu d'un grand halo gris. */
.v2-device,.cr-duo .cr-phone{position:relative;border-radius:46px;background:#0B0C0F;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 0 0 1.5px #C3C6CE,0 0 0 2.5px #9A9EA7,
    0 1px 2px rgba(16,24,48,.10),0 6px 14px -6px rgba(16,24,48,.14),0 26px 48px -24px rgba(16,24,48,.20)}
.v2-device{padding:9px;aspect-ratio:71.6/147.6}
/* les boutons de la tranche : action et volume à gauche, marche à droite */
.v2-device::before,.cr-duo .cr-phone::before{content:"";position:absolute;left:-4.5px;top:19%;width:3px;height:9%;border-radius:2px 0 0 2px;
  background:linear-gradient(90deg,#8C9099,#C9CCD3);box-shadow:0 calc(var(--vol, 52px) * 1) 0 #B4B7BF,0 calc(var(--vol, 52px) * 2) 0 #B4B7BF}
.v2-device::after,.cr-duo .cr-phone::after{content:"";position:absolute;right:-4.5px;top:27%;width:3px;height:14%;border-radius:0 2px 2px 0;background:linear-gradient(270deg,#8C9099,#C9CCD3)}
.v2-device{--vol:44px}
/* l'écran est accroché aux quatre bords du cadre plutôt que mesuré en hauteur : Safari sur iPhone calcule mal une
   hauteur en pourcentage dans une boîte dont la hauteur vient de ses proportions, et l'écran débordait du cadre */
.v2-device .v2-screen{position:absolute;inset:9px;width:auto;height:auto;max-width:none;margin:0;aspect-ratio:auto;border-radius:37px;box-shadow:none}
.v2-device .v2-island{top:9px;width:76px;height:22px;margin-left:-38px}
/* le reflet de la vitre, au-dessus de tout, sans gêner le clic */
.v2-device .v2-screen>.v2-keys{z-index:3}
.v2-device .v2-screen::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;
  background:linear-gradient(118deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.04) 26%,rgba(255,255,255,0) 40%)}
@media (max-width:900px){.v2-device{max-width:250px;width:100%;margin:0 auto}}

/* page créateurs : les deux écrans de l'histoire de Lina deviennent deux iPhones */
.cr-duo .cr-phone{min-height:0;width:100%;aspect-ratio:71.6/147.6;padding:0;border:9px solid #0B0C0F;background-clip:padding-box;--vol:40px}
.cr-duo .cr-phone>*{position:relative;z-index:1}
.cr-duo .cr-phone{background:#0B0C0F}
.cr-duo .cr-phone>.cr-phone-top,.cr-duo .cr-phone>.cr-thread{background:transparent}
.cr-duo .cr-phone{isolation:isolate}
.cr-duo .cr-phone .cr-glass{position:absolute;inset:0;z-index:0;border-radius:37px;overflow:hidden;background:linear-gradient(170deg,#F3F6FF 0%,#FAF8FF 55%,#FFF5F9 100%)}
.cr-duo .cr-phone .cr-glass::after{content:"";position:absolute;inset:0;background:linear-gradient(118deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 30%)}
.cr-duo .cr-isl{position:absolute;left:50%;top:7px;width:72px;height:21px;margin-left:-36px;border-radius:12px;background:#0B0C0F}
.cr-duo .cr-phone .cr-status{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;height:36px;padding:2px 22px 0 24px;font:600 12px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:#15161C}
.cr-duo .cr-phone .cr-status i{width:20px;height:9px;border:1.2px solid currentColor;border-radius:3px;position:relative;opacity:.85}
.cr-duo .cr-phone .cr-status i::after{content:"";position:absolute;inset:1.2px 4px 1.2px 1.2px;border-radius:1.5px;background:currentColor}
.cr-duo .cr-phone>.cr-phone-top{margin:0 10px 10px;padding:4px 4px 10px}
.cr-duo .cr-phone>.cr-thread{padding:0 10px}

.cr-duo .cr-phone::before{left:-13.5px}
.cr-duo .cr-phone::after{right:-13.5px}
.cr-duo .cr-bar{position:absolute;z-index:1;left:10px;right:10px;bottom:12px;display:flex;align-items:center;height:38px;padding:0 4px 0 14px;border-radius:20px;background:#fff;border:1px solid #E6E8EF;font-size:13px;color:#8B8E9C}
.cr-duo .cr-bar span{flex:1}
.cr-duo .cr-bar i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#1733D6}
.cr-duo .cr-bar svg{width:16px;height:16px}
.cr-duo .cr-secret{box-shadow:0 1px 2px rgba(21,22,28,.08)}
/* les vraies proportions d'un iPhone (71,6 sur 147,6 mm) : le téléphone garde sa largeur de téléphone, centré dans sa colonne */
.cr-duo .cr-stick.cr-screen{justify-self:center;width:min(100%,260px)}
@media (max-width:760px){.cr-duo .cr-stick.cr-screen{width:min(100%,250px)}}
@media (min-width:761px){
  .cr-duo .cr-phone .cr-b{font-size:13.5px;line-height:1.35;padding:8px 12px}
  .cr-duo .cr-phone .cr-thumb{padding:3px}
  .cr-duo .cr-phone .cr-phone-top{font-size:14px}
  .cr-duo .cr-secret .cr-veil{font-size:13px}
}

/* v2 : l'interrupteur Creators | Followers, en haut des deux pages d'accueil. Une pilule de verre, une pastille blanche
   qui glisse sous le côté choisi ; un clic la fait glisser puis ouvre l'autre page. */
.v2-who{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;margin-bottom:clamp(18px,2.2vw,28px);padding:4px;border-radius:999px;
  background:rgba(10,22,52,.22);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32),0 8px 24px -14px rgba(8,18,40,.35)}
.v2-who a{position:relative;z-index:1;display:grid;place-items:center;min-width:112px;height:38px;padding:0 18px;border-radius:999px;
  font-size:var(--fs-small);font-weight:600;letter-spacing:-.005em;color:#fff;transition:color .32s var(--ease)}
.v2-who a::before{content:"";position:absolute;inset:-3px 0}
.v2-who-knob{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:#fff;
  box-shadow:0 1px 2px rgba(8,18,40,.12),0 6px 14px -8px rgba(8,18,40,.35);transition:transform .32s var(--ease)}
.v2-who[data-on="followers"] .v2-who-knob{transform:translateX(100%)}
.v2-who[data-on="creators"] a[data-side="creators"],.v2-who[data-on="followers"] a[data-side="followers"]{color:var(--ink)}
@media (hover:hover){.v2-who[data-on="creators"] a[data-side="followers"]:hover,.v2-who[data-on="followers"] a[data-side="creators"]:hover{color:rgba(255,255,255,.78)}}
.v2-who a:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:760px){.v2-who a{min-width:104px;height:36px;padding:0 14px}}
@media (prefers-reduced-motion:reduce){.v2-who-knob,.v2-who a{transition:none}}
/* sur téléphone, l'interrupteur monte dans la barre du haut, plus petit, à la place du bouton blanc (qui reste dans le menu) :
   le haut de la page garde trois choses, le logo, l'interrupteur et « Menu » */
.v2-who-hdr{display:none}
@media (max-width:760px){
  .hero-copy .v2-who{display:none}
  .hdr .get{display:none}
  .v2-who-hdr{display:inline-grid;margin:0 0 0 auto;padding:3px}
  .v2-who-hdr a{min-width:0;height:30px;padding:0 12px;font-size:13px}
  .v2-who-hdr .v2-who-knob{top:3px;bottom:3px;left:3px;width:calc(50% - 3px)}
}

/* fin de la page followers : sans phrase sous le titre, le bouton garde de l air */
.join-in h2+.join-go{margin-top:clamp(24px,2.8vw,34px)}

/* accueil sur téléphone : une bande blanche entre la photo du haut et celle de la plage, pour ne pas passer d'une photo
   à l'autre sans respirer */
@media (max-width:760px){.hero+.asking{padding-top:clamp(36px,10vw,48px)}}
/* sur téléphone aussi, les blocs en photo (la plage de l'accueil, l'appel des followers) gardent une marge et des coins
   arrondis, comme sur ordinateur */
@media (max-width:760px){
  .asking{padding-left:var(--g);padding-right:var(--g)}
  .asking-in{border-radius:24px}
  .v2-call{padding:0 var(--g) 64px}
  .v2-call-in{border-radius:24px}
}

/* accueil : une phrase seule sur le blanc, qui s'écrit au défilement, entre la photo du haut et la plage */
.v2-line{padding:clamp(88px,10vw,150px) var(--g) clamp(72px,8vw,120px);text-align:center}
.v2-line-t{max-width:18ch;margin:0 auto;font-size:var(--fs-headline);line-height:1.08;letter-spacing:-.035em;font-weight:500;color:var(--ink);text-wrap:balance}
.hero+.v2-line+.asking{padding-top:0}
@media (max-width:760px){.v2-line{padding:64px var(--g) 52px}}

/* accueil : le film sous la phrase, posé sur un halo bleu et rose très doux, qui grandit un peu en montant */
.v2-line{padding-bottom:clamp(40px,5vw,72px)}
.v2-film{padding:0 var(--g) clamp(88px,10vw,150px)}
.v2-film-in{position:relative;max-width:1180px;margin:0 auto;transform:scale(var(--grow,1));transform-origin:50% 30%;will-change:transform}
.v2-film-in::before{content:"";position:absolute;inset:8% -4% -6%;z-index:-1;border-radius:50%;filter:blur(60px);opacity:.55;
  background:radial-gradient(closest-side,rgba(77,136,214,.55),rgba(77,136,214,0)) 20% 50%/70% 100% no-repeat,radial-gradient(closest-side,rgba(240,170,200,.5),rgba(240,170,200,0)) 85% 60%/60% 90% no-repeat}
.v2-film-box{box-shadow:0 1px 2px rgba(16,24,48,.08),0 30px 60px -30px rgba(16,24,48,.28)}
@media (max-width:760px){.v2-film{padding-bottom:64px}.v2-film-in::before{inset:4% -10% -4%}}

/* le film : deux petits ronds en bas à droite, plein écran et pause ; en plein écran, la vidéo entière sur du noir */
.film-btns{position:absolute;right:16px;bottom:16px;z-index:2;display:flex;gap:10px}
.film-btns .film-btn{position:relative;right:auto;bottom:auto}
.film-btn .film-close,.film-box.is-full .film-open{display:none}
.film-btn .film-loud,.film-btn.is-on .film-mute{display:none}
.film-btn.is-on .film-loud{display:block}
.film-box.is-full .film-close{display:block}
.film-box:fullscreen{border-radius:0;aspect-ratio:auto;background:#000;box-shadow:none}
.film-box:fullscreen video{object-fit:contain}
.film-box:-webkit-full-screen{border-radius:0;background:#000}
.film-box:-webkit-full-screen video{object-fit:contain}

/* v3, the one-page site */
/* the photo band a little larger, closer to what follows */
.product{padding-bottom:clamp(44px,5vw,80px)}
.product .flow{height:clamp(410px,36vw,540px);margin-bottom:calc(-1 * clamp(24px,4vw,64px))}
@media (max-width:760px){.product .flow{height:min(340px,78vw)}}
/* the sentence, then the film under it, centered and sized like a picture */
.v3-film{padding:clamp(64px,7vw,110px) var(--g) 0}
.v3-film-in{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:920px;margin:0 auto}
.v3-film-copy h2{font-size:var(--fs-headline);line-height:1.08;letter-spacing:-.035em;font-weight:500;color:var(--ink);text-wrap:balance}
.v3-film-copy p{margin:16px auto 0;max-width:40ch;font-size:var(--fs-lead);line-height:1.5;color:#55565B;text-wrap:pretty}
.v3-film-vis{width:100%;margin-top:clamp(28px,3.5vw,48px)}
.v3-film .film-box{border-radius:22px;box-shadow:0 1px 2px rgba(16,24,48,.06),0 24px 48px -28px rgba(16,24,48,.3)}
@media (max-width:760px){.v3-film .film-box{max-width:300px}}
/* step 05: the payments come from Stripe */
.es-notif-ic.es-stripe{background:#635BFF;color:#fff;font:700 16px/1 var(--font);letter-spacing:-.02em;box-shadow:none}

/* sur téléphone, en haut à droite « Sign in » puis le bouton blanc « Get my twin », sans « Menu » ni dégradé bleu
   derrière (Clément, 15/10) */
@media (max-width:900px){
  .hdr{background:none;gap:14px}
  .hdr .hdr-in{display:inline-flex;margin-left:auto;height:auto;min-height:var(--tap);padding:0 4px;border-radius:0;background:none;color:inherit}
  .hdr .hdr-in::before{content:none}
  .hdr .get{display:inline-flex;margin-left:0}
  .hdr .menu-btn{display:none}
}
@media (max-width:350px){.hdr{gap:10px}.hdr .get{padding:0 11px}}