:root{color-scheme:light;--ink:#202339;--muted:#797d93;--accent:#746896}
*{box-sizing:border-box}
html{min-height:100%;background:#f6f7fc}
body{margin:0;min-height:100svh;color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;background:radial-gradient(ellipse at 14% 34%,#e9f0fd88,transparent 49%),radial-gradient(ellipse at 89% 69%,#ece7fa88,transparent 47%),#f6f7fc}
button,input{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default}button[aria-busy="true"]{cursor:wait}button:focus-visible,input:focus-visible{outline:2px solid #8276be;outline-offset:5px}svg{display:block}
main{width:min(820px,100%);min-height:100svh;margin:0 auto;padding:56px 22px 36px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.wordmark{font-size:11px;line-height:18px;font-weight:600;letter-spacing:.43em;padding-left:.43em;margin-bottom:33px;color:#38394f}
h1{font-size:clamp(33px,5.2vw,52px);line-height:1.13;font-weight:500;letter-spacing:-.055em;margin:0}h1 span{color:#807496}
.scene{position:relative;flex:none;width:min(690px,100%);aspect-ratio:714/325;margin:20px auto 8px;isolation:isolate}
.scene::before{content:"";position:absolute;inset:12% 15% 5%;z-index:-1;border-radius:50%;background:radial-gradient(ellipse,#fff9,transparent 68%);filter:blur(20px);pointer-events:none}
.glass{position:absolute;inset:0;width:100%;height:100%;user-select:none;pointer-events:none;filter:none}
canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.action{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:285px;max-width:100%;height:54px;margin:0 auto;padding:0 20px;border:1px solid #fff;border-radius:16px;background:linear-gradient(115deg,#fafefff0 0%,#ffffffc9 48%,#eeebf9d9 100%);box-shadow:0 0 0 1px #8586b429,0 5px 14px #5856780c,inset 0 1px 2px #fff;transition:transform .2s ease,box-shadow .2s ease;color:#3d3b52;font-size:12px;font-weight:500;letter-spacing:-.008em;overflow:hidden}
.action:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 0 0 1px #8586b442,0 9px 21px #58567814,inset 0 1px 2px #fff}.action:not(:disabled):active{transform:translateY(1px) scale(.99)}
/* Confirmation microinteraction. The icon and copy occupy fixed slots, so
   "Gravure…" → "Inscription validée" never changes the button's dimensions. */
.action{isolation:isolate}
.action .button-icon{position:relative;display:block;width:20px;height:20px;flex:0 0 20px;z-index:2}
.action .discord,.action .check{position:absolute;inset:0;display:block;width:20px;height:20px;color:#66607d;transition:opacity .2s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.action .check{opacity:0;transform:scale(.78);color:#756394}
.action .check-ring{stroke-dasharray:100;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:12px 12px}
.action .check-tick{stroke-dasharray:100;stroke-dashoffset:0}
.action .arrow{position:relative;z-index:2;width:15px;height:15px;flex:0 0 15px;color:#8e88a5;margin-left:5px;transition:opacity .22s ease,transform .25s ease}
.action .button-copy{position:relative;display:grid;align-items:center;flex:1;min-width:0;height:22px;overflow:hidden;z-index:2}
.action .button-label,.action .button-label-previous{grid-area:1 / 1;text-align:center;white-space:nowrap;line-height:22px}
.action .button-label-previous{opacity:0;pointer-events:none}
.action.is-complete .discord{opacity:0;transform:scale(.72)}
.action.is-complete .check{opacity:1;transform:scale(1)}
.action.is-busy .discord{opacity:.55}
.action.is-busy .arrow{opacity:0}
.action::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;background:linear-gradient(112deg,#cdeaff59,#ddd2f059 57%,#deedfb66);opacity:0;pointer-events:none;transition:opacity .65s ease}
.action.is-complete::before{opacity:.48}
.action .button-sheen{position:absolute;inset:-36% auto -36% -70%;width:48%;z-index:1;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,rgba(245,244,255,.32) 22%,rgba(255,255,255,.92) 49%,rgba(222,239,255,.34) 74%,transparent);transform:translateX(0) skewX(-22deg)}
.button-progress{position:absolute;bottom:0;left:17px;right:17px;height:1.5px;z-index:3;background:linear-gradient(90deg,#a6b7d4,#9282bd,#bbd7e4);transform:scaleX(0);transform-origin:left;opacity:0;transition:opacity .4s ease}
.action.is-celebrating{animation:lab-confirm-pulse .82s cubic-bezier(.22,.7,.2,1) both}
.action.is-celebrating .button-label-previous{animation:lab-copy-out .21s cubic-bezier(.4,0,.6,1) both}
.action.is-celebrating .button-label{animation:lab-copy-in .42s cubic-bezier(.16,1,.3,1) .13s both}
.action.is-celebrating .check{animation:lab-check-in .4s cubic-bezier(.16,1,.3,1) .10s both}
.action.is-celebrating .check-ring{animation:lab-check-draw .36s cubic-bezier(.25,.6,.3,1) .12s both}
.action.is-celebrating .check-tick{animation:lab-check-draw .30s cubic-bezier(.25,.6,.3,1) .33s both}
.action.is-celebrating .button-sheen{animation:lab-confirm-sheen .88s cubic-bezier(.22,.6,.28,1) .32s both}
.action.is-celebrating .arrow{animation:lab-arrow-in .32s ease .5s both}
@keyframes lab-confirm-pulse{
  0%{scale:1}
  18%{scale:.99}
  47%{scale:1.017;box-shadow:0 0 0 1px #a098c054,0 7px 25px #8b78b62a,inset 0 1px 2px #fff}
  78%{scale:.999}
  100%{scale:1}
}
@keyframes lab-copy-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-9px)}}
@keyframes lab-copy-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes lab-check-in{from{opacity:0;transform:scale(.78)}to{opacity:1;transform:scale(1)}}
@keyframes lab-check-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes lab-confirm-sheen{
  0%{opacity:0;transform:translateX(0) skewX(-22deg)}
  18%{opacity:.85}
  72%{opacity:.7}
  100%{opacity:0;transform:translateX(450%) skewX(-22deg)}
}
@keyframes lab-arrow-in{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:translateX(0)}}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.tools{display:flex;justify-content:center;align-items:center;gap:5px;margin-top:14px}
.icon-button{display:grid;place-items:center;width:32px;height:32px;padding:7px;border:0;border-radius:10px;background:transparent;color:#9d9bae;transition:color .2s,background .2s}.icon-button:hover{color:#6b637e;background:#ffffff9e}.icon-button svg{width:16px;height:16px}.icon-button[aria-expanded="true"]{color:#74668f;background:#ffffffa6}
.personalize{width:min(354px,100%);margin:16px auto 0;padding:18px;border:1px solid #fff;border-radius:16px;background:#ffffff9c;box-shadow:0 5px 20px #49578106;text-align:left}.personalize[hidden]{display:none}
.date-field{margin-top:14px}.form-error{color:#895064!important}.fields{display:grid;grid-template-columns:1fr 82px;gap:12px}label{display:block;font-size:11px;color:#6c657e}input{display:block;width:100%;margin-top:8px;border:1px solid #e0deeb;border-radius:9px;background:#ffffffad;height:39px;padding:0 10px;color:#49435e;font-size:13px}.apply{margin-top:14px;border:1px solid #e1dcea;border-radius:8px;background:#f5f1f9;color:#645575;padding:9px 16px;font-size:11px}.personalize p{font-size:12px;line-height:1.5;margin:12px 0 0;color:#6c657e}
.demo{font-size:12px;color:#a4a2b2;line-height:16px;margin:25px 0 0;letter-spacing:.015em}
@media(max-width:540px){main{padding:35px 14px 26px}.wordmark{font-size:11px;letter-spacing:.4em;margin-bottom:31px}h1{font-size:clamp(31px,8.2vw,39px)}.scene{width:calc(100% + 8px);max-width:none;margin:22px -4px 16px}.action{width:267px;height:52px;font-size:11.5px}.tools{margin-top:13px}.demo{margin-top:27px;font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}


/* Real WebGL object, not an image or a CSS transform. */
.scene{width:min(690px,100%);aspect-ratio:714/345;margin-top:18px;margin-bottom:10px;overflow:visible;outline:none}
.scene::before{display:none}
#webgl{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:auto;touch-action:none;cursor:grab;outline:none;mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent);mask-composite:intersect;-webkit-mask-composite:source-in}
#webgl:active{cursor:grabbing}
#webgl:focus-visible{outline:1px solid #9589b6;outline-offset:3px;border-radius:18px}
#engraving{display:none!important}
.gesture{position:absolute;bottom:4px;left:0;right:0;font-size:9px;letter-spacing:.04em;color:#a09aaf;pointer-events:none;transition:opacity .3s}
.gesture.is-hidden{opacity:0}
.load-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#858097;font-size:11px;line-height:1.65;padding:18px;text-align:center;z-index:4}
.load-state[hidden]{display:none}
.load-state p{margin:0;max-width:335px}
.load-state button{font-size:11px;border:1px solid #ded8eb;background:#ffffffa6;color:#645575;border-radius:9px;padding:8px 14px}
@media(max-width:540px){.scene{width:calc(100% + 8px);margin:20px -4px 12px}.gesture{font-size:8px;bottom:1px}}


/* Ambient depth — three independent, non-interactive background planes.
   Only transforms animate: the glass renderer and its engraving are untouched. */
body{position:relative;isolation:isolate}
main{position:relative;z-index:1}
.ambient{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;user-select:none;contain:strict;background:#f6f7fc}
.ambient-plane{position:absolute;inset:-52px;transform:translate3d(0,0,0);pointer-events:none}
.ambient-atmosphere{position:absolute;inset:-4%;background:
  radial-gradient(ellipse at 12% 28%,rgba(137,194,249,.21) 0%,rgba(171,213,251,.10) 24%,transparent 49%),
  radial-gradient(ellipse at 89% 75%,rgba(168,147,228,.17) 0%,rgba(205,183,240,.08) 23%,transparent 49%),
  radial-gradient(ellipse at 72% 12%,rgba(209,189,250,.12) 0%,transparent 41%),
  radial-gradient(ellipse at 28% 94%,rgba(162,221,237,.13) 0%,transparent 42%);
  animation:ambient-atmosphere 34s ease-in-out infinite alternate;will-change:transform}
.ambient-halo{position:absolute;display:block;aspect-ratio:1;border-radius:50%;will-change:transform}
.ambient-halo--blue{width:min(75vw,1060px);left:-29%;top:-28%;background:radial-gradient(ellipse,rgba(198,220,255,.17) 9%,rgba(176,211,245,.11) 42%,rgba(255,255,255,.68) 64%,rgba(196,220,250,.08) 67%,transparent 70%);animation:ambient-blue 27s ease-in-out infinite alternate}
.ambient-halo--violet{width:min(76vw,1000px);right:-34%;bottom:-43%;background:radial-gradient(ellipse,rgba(215,198,243,.12) 12%,rgba(205,192,239,.08) 43%,rgba(255,255,255,.66) 64%,rgba(224,203,245,.09) 67%,transparent 70%);animation:ambient-violet 32s ease-in-out infinite alternate}
.ambient-ribbons{position:absolute;inset:0;width:100%;height:100%;opacity:.50;animation:ambient-ribbons 38s ease-in-out infinite alternate;will-change:transform}
.ambient-grid{position:absolute;left:7%;right:7%;bottom:-24%;height:57%;background-image:linear-gradient(rgba(126,147,187,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(126,147,187,.13) 1px,transparent 1px);background-size:84px 84px;transform:perspective(680px) rotateX(59deg) rotateZ(-6deg);transform-origin:50% 10%;opacity:.14;mask-image:radial-gradient(ellipse at 50% 36%,#000 0%,transparent 65%);-webkit-mask-image:radial-gradient(ellipse at 50% 36%,#000 0%,transparent 65%)}
/* Clear space behind the heading and engraving; no opacity veil over the UI. */
.ambient-clear{position:absolute;inset:0;background:radial-gradient(ellipse 37% 50% at 50% 49%,rgba(246,247,252,.90),rgba(246,247,252,.44) 58%,transparent 100%)}
.ambient-grain{position:absolute;inset:0;opacity:.022;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.81' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.65' d='M0 0h180v180H0z'/%3E%3C/svg%3E");mix-blend-mode:multiply}
.ambient[data-paused="true"] .ambient-atmosphere,.ambient[data-paused="true"] .ambient-halo,.ambient[data-paused="true"] .ambient-ribbons{animation-play-state:paused}
@keyframes ambient-atmosphere{from{transform:translate3d(-1.4%,-.7%,0) scale(1.025)}to{transform:translate3d(1.7%,1.4%,0) scale(1.055)}}
@keyframes ambient-blue{from{transform:translate3d(-10px,-10px,0) scale(1)}to{transform:translate3d(24px,18px,0) scale(1.045)}}
@keyframes ambient-violet{from{transform:translate3d(8px,13px,0) scale(1.02)}to{transform:translate3d(-24px,-18px,0) scale(1.06)}}
@keyframes ambient-ribbons{from{transform:translate3d(-8px,5px,0) scale(1.025)}to{transform:translate3d(12px,-8px,0) scale(1.04)}}
#toggleAmbient .ambient-play-icon{display:none}
#toggleAmbient[aria-pressed="true"] .ambient-pause-icon{display:none}
#toggleAmbient[aria-pressed="true"] .ambient-play-icon{display:block}
#toggleAmbient:disabled{cursor:default;opacity:.4}
@media(max-width:540px){
 .ambient-plane{inset:-28px}
 .ambient-atmosphere{opacity:.80}
 .ambient-halo--blue{width:125vw;left:-86%;top:-17%}
 .ambient-halo--violet{width:130vw;right:-95%;bottom:-16%}
 .ambient-ribbons{opacity:.30}
 .ambient-grid{opacity:.08;background-size:64px 64px}
 .ambient-clear{background:radial-gradient(ellipse 75% 48% at 50% 48%,rgba(246,247,252,.88),rgba(246,247,252,.25) 66%,transparent 100%)}
}
@media(prefers-reduced-motion:reduce){
 .ambient-atmosphere,.ambient-halo,.ambient-ribbons{animation:none!important;will-change:auto}
 .ambient-plane{transform:none!important}
}


/* v3 — separation and discoverability, without adding a frame or pedestal. */
.scene{margin-bottom:22px}
#webgl{cursor:grab}
.scene.is-dragging #webgl{cursor:grabbing}
.gesture{position:absolute;inset:auto auto -3px 50%;z-index:3;display:inline-flex;
  align-items:center;justify-content:center;gap:9px;min-height:32px;padding:6px 13px;
  width:max-content;max-width:calc(100% - 18px);border:1px solid rgba(255,255,255,.92);
  border-radius:999px;background:rgba(255,255,255,.72);color:#575a78;
  box-shadow:0 2px 12px rgba(69,66,112,.055),inset 0 1px 0 #fff;
  font-size:11px;font-weight:500;line-height:18px;letter-spacing:.005em;
  transform:translateX(-50%);opacity:1;pointer-events:none;
  transition:opacity .45s ease,transform .45s ease}
.gesture[hidden]{display:none!important}
.gesture svg{width:21px;height:18px;flex:0 0 21px;color:#79739b}
.gesture.is-hidden{opacity:0;transform:translate(-50%,4px)}
.scene.is-dragging .gesture{opacity:0}
@media(max-width:540px){.scene{margin-bottom:32px}.gesture{bottom:-17px;font-size:12px;gap:7px;min-height:30px;padding:5px 12px}}
@media(prefers-reduced-motion:reduce){.gesture{transition:none!important}}


/* v8 — optional local portrait; the page remains minimal when closed. */
.avatar-field{border:0;padding:0;margin:0 0 18px;min-width:0}
.avatar-field legend{font-size:11px;color:#6c657e;padding:0;margin-bottom:10px}
.avatar-row{display:flex;align-items:center;gap:13px}
.avatar-preview{position:relative;display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#e6ebf5,#eee8f5);border:1px solid #fff;color:#77738a;font-size:15px;font-weight:500;letter-spacing:.04em;box-shadow:0 0 0 1px #d8d7e480}
.avatar-preview img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.avatar-preview img[hidden]{display:none}
.avatar-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.avatar-pick,.avatar-remove{border:1px solid #e0deeb;background:#ffffffb8;border-radius:8px;padding:8px 10px;color:#645b7a;font-size:11px}
.avatar-remove{border-color:transparent;background:transparent;color:#6c657e;font-size:12px;padding-inline:4px}
.avatar-remove:disabled{cursor:default;opacity:.4}
.avatar-note{font-size:12px!important;line-height:1.5;margin-top:8px!important;color:#6c657e!important}
.avatar-note[data-loading="true"]{color:#74629b!important}
.avatar-file[hidden]{display:none!important}


/* v12 — 110% presentation scale. Keep the full viewport height in physical
   pixels, let short screens scroll naturally, and leave the ambient planes
   full-bleed. WebGL already measures its displayed size with getBoundingClientRect,
   so its render buffer and drag coordinates follow this scale automatically. */
:root{--presentation-scale:1.1}
main{
  overflow-x:clip;
  zoom:var(--presentation-scale);
  width:min(820px,100%);
  min-height:calc(100svh / var(--presentation-scale));
}
/* Retain the original scene's viewport-based dimensions before zooming. This
   enlarges the actual glass and its etching by the same 10% on small screens,
   instead of letting the responsive canvas cancel out the scale increase.
   Only the transparent canvas gutters extend beyond the viewport. */
body{overflow-x:clip}
.scene{width:min(690px,calc(100vw - 44px));max-width:none;margin-inline:0}
.action{max-width:calc(100vw / var(--presentation-scale) - 20px)}
@media(max-width:540px){.scene{width:calc(100vw - 20px)}}


/* Live waitlist: identity and registration are issued by the server. */
html[data-mode="live"] #customize,html[data-mode="live"] #personalize{display:none!important}
html[data-mode="live"] #replay[hidden]{display:none}
.session-logout{display:block;margin:12px auto 0;padding:6px 12px;border:0;background:transparent;color:#625c76;font:inherit;font-size:12px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.session-logout[hidden]{display:none}
.session-logout:focus-visible{outline:2px solid #78619e;outline-offset:3px;border-radius:4px}
html[data-mode="live"] #waitlistNote{color:#625c76;max-width:460px;line-height:1.5}
#waitlistNote a{color:inherit;text-underline-offset:3px}
html[data-mode="demo"] #logout{display:none}

.auth-complete{max-width:440px;padding:40px 24px;margin:auto;text-align:center}
.auth-complete h1{font-size:32px;margin-bottom:20px}
.auth-complete p{color:#625c76;line-height:1.6;margin-bottom:28px}
.auth-complete a{text-decoration:none}

/* The primary action becomes sharing after confirmation. */
.tools[hidden],#waitlistNote[hidden]{display:none!important}
.action .x-icon{position:absolute;inset:0;width:20px;height:20px;color:#66607d;opacity:0;transition:opacity .2s ease}
.action.is-share .x-icon{opacity:1}
.action.is-share .discord,.action.is-share .check{opacity:0;transform:scale(.72)}
.card-actions{position:relative;width:285px;max-width:min(100%,calc(100vw / var(--presentation-scale) - 20px));margin:0 auto}
.card-actions > .action{width:100%}
.card-actions.is-split{display:flex;height:54px;border:1px solid #fff;border-radius:16px;background:linear-gradient(115deg,#fafefff0 0%,#ffffffc9 48%,#eeebf9d9 100%);box-shadow:0 0 0 1px #8586b429,0 5px 14px #5856780c,inset 0 1px 2px #fff}
.card-actions.is-split > .action{flex:1;min-width:0;width:auto;height:100%;margin:0;padding-inline:18px;gap:10px;border:0;border-radius:15px 0 0 15px;background:transparent;box-shadow:none;transition:background .2s ease}
.card-actions.is-split > .action::before{display:none}
.card-actions.is-split > .action:not(:disabled):hover,.card-actions.is-split > .action:not(:disabled):active{transform:none;box-shadow:none}
.card-download{display:grid;place-items:center;flex:0 0 52px;width:52px;min-height:44px;margin:0;padding:0;border:0;border-left:1px solid #8586b43d;border-radius:0 15px 15px 0;background:transparent;box-shadow:inset 1px 0 0 #ffffffa6;color:#66607d;transition:background .2s ease,color .2s ease}
.card-download[hidden]{display:none}
.card-download svg{width:20px;height:20px}
.card-download:disabled{color:#aaa5b7}
.card-actions.is-split > .action:not(:disabled):hover,.card-download:not(:disabled):hover{background:#ffffff80}
.card-actions.is-split > .action:not(:disabled):active,.card-download:not(:disabled):active{background:#e8e2f680}
.card-actions.is-split > :focus-visible{z-index:3;outline:2px solid #8276be;outline-offset:3px}
@media(max-width:540px){.card-actions{width:267px}.card-actions.is-split{height:52px}}

.shared-page{width:min(1100px,100%);gap:28px}
.shared-page h1{font-size:clamp(30px,5vw,48px)}
.shared-page img{display:block;width:100%;height:auto;border-radius:20px}
.shared-page a{text-decoration:none;justify-content:center}

.legal-footer{width:100%;margin-top:26px;font-size:11px;line-height:1.6;color:#625c76}
.legal-footer nav{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 20px}
.legal-footer a,.legal-page a{color:#625c76;text-underline-offset:3px}
.legal-footer a:hover,.legal-page a:hover{color:#322943}
.legal-footer a:focus-visible,.legal-page a:focus-visible{outline:2px solid #78619e;outline-offset:4px;border-radius:2px}
html[data-mode="demo"] .legal-footer{display:none}
main.legal-page{zoom:1;display:block;min-height:100svh;width:min(760px,100%);padding:48px 24px 36px;text-align:left;overflow:visible}
.legal-back{display:inline-block;font-size:13px;margin-bottom:36px}
.legal-page h1{font-size:clamp(30px,6vw,44px);line-height:1.12;letter-spacing:-.035em;margin:0 0 14px}
.legal-date{font-size:12px;color:#625c76;margin-bottom:30px}
.legal-page article{font-size:15px;line-height:1.75;color:#464055}
.legal-page h2{font-size:20px;line-height:1.35;margin:32px 0 10px;color:#29243a}
.legal-page article p{margin:0 0 14px}
.legal-draft{padding:16px;background:#eae6f0;border-radius:10px;color:#514562;font-size:13px}
.legal-page .legal-footer{padding-top:20px;margin-top:36px;border-top:1px solid #dcd6e5}
.legal-control{font:inherit;color:#464055;background:transparent;border:1px solid #aaa2b7;border-radius:8px;padding:10px 16px;min-height:44px;max-width:100%;cursor:pointer}
.legal-control:hover:not(:disabled){background:#eae6f0;border-color:#78619e}
.legal-control:focus-visible{outline:2px solid #78619e;outline-offset:4px}
.legal-control:disabled{cursor:default;color:#625c76;border-color:#dcd6e5}
.legal-page .legal-control-status{margin-top:10px;font-size:14px}
@media(max-width:540px){main.legal-page{padding:28px 20px}.legal-back{margin-bottom:28px}}

html[data-mode="demo"] #deleteMembership{display:none}
.delete-dialog{max-width:min(440px,calc(100vw - 32px));margin:auto;padding:28px;border:1px solid #dcd6e5;border-radius:16px;background:#f6f7fc;color:#464055;text-align:left}
.delete-dialog::backdrop{background:#29243a66}
.delete-dialog h2{font-size:22px;margin:0 0 16px;color:#29243a}
.delete-dialog p{font-size:14px;line-height:1.65;margin:0 0 20px}
.delete-actions{display:flex;gap:10px;flex-wrap:wrap}
.delete-actions button{min-height:44px;padding:10px 14px;border:1px solid #cbc4d8;border-radius:8px;background:#fff;color:#514562;font:inherit;font-size:12px}
.delete-actions #confirmDelete{color:#853745}
.delete-actions button:focus-visible{outline:2px solid #78619e;outline-offset:3px}
.delete-dialog #deleteError{margin:16px 0 0;color:#853745}

/* Keep membership controls and legal links together at the page bottom. */
.waitlist-page{display:flex;flex-direction:column;min-height:100svh}
.waitlist-page > main{flex:1;min-height:0}
.waitlist-footer{position:relative;z-index:1;flex:none;margin:0;padding:12px 20px max(20px,env(safe-area-inset-bottom));text-align:center}
.waitlist-footer nav{flex-wrap:nowrap;align-items:center;gap:24px}
.waitlist-footer a,.waitlist-footer .session-logout{display:flex;align-items:center;justify-content:center;min-height:44px;margin:0;padding:0;font:inherit;line-height:1.6}
.waitlist-footer .session-logout[hidden]{display:none}
@media(max-width:540px){.waitlist-footer{padding-inline:12px}.waitlist-footer nav{gap:12px}.waitlist-footer nav > *{flex:1;min-width:0}}

/* A single frame clock owns the entrance. No CSS transition or animation can
   restart or stall independently; the text never changes scale or gets blurred. */
.waitlist-page .title-part{display:inline-block;color:inherit}
.waitlist-page .title-part--accent{color:#807496}
.entry-action{width:100%;flex:none}
@media(prefers-reduced-motion:no-preference){
  html[data-entry] .waitlist-page h1{position:relative;z-index:2;will-change:transform,opacity;opacity:var(--entry-title-opacity,0);transform:translate3d(var(--entry-title-x,0px),var(--entry-title-y,0px),0)}
  html[data-entry] .waitlist-page .wordmark{opacity:var(--entry-brand,0)}
  html[data-entry] .waitlist-page .entry-action{opacity:var(--entry-action,0);transform:translate3d(0,calc((1 - var(--entry-action,0)) * 8px),0)}
  html[data-entry] .waitlist-page :where(#waitlistNote,#logout){opacity:var(--entry-note,0)}
  html[data-entry] .waitlist-page #gesture:not(.is-hidden){opacity:var(--entry-hint,0);transition:none}
  html[data-entry] .waitlist-page .waitlist-footer nav{opacity:var(--entry-footer,0)}
  html[data-entry]:not([data-entry="revealing"]) .waitlist-page :where(.wordmark,.entry-action,#gesture,#waitlistNote,#logout,.waitlist-footer nav,.scene){visibility:hidden}
}