/* The sign-up pop-up, built by signup.js. At rest everything shows its final state,
   so with reduced motion nothing is missing. */
html.nv-su-lock{ overflow:hidden; }
/* the cookie bar would sit as a dark slab under the card; it comes back when the pop-up closes */
html.nv-su-lock #nv-consent{ visibility:hidden; }

.nv-su{ position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:24px;
        border:0; background:transparent; color:#0a0a0a; color-scheme:light; overflow-y:auto; overscroll-behavior:contain;
        font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-feature-settings:'cv01','cv05','cv09','cv11','ss03';
        -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.nv-su[open]{ display:flex; }
.nv-su::backdrop{ background:rgba(10,10,10,0.5); -webkit-backdrop-filter:blur(6px) saturate(1.2); backdrop-filter:blur(6px) saturate(1.2); }
.nv-su-defs{ position:absolute; width:0; height:0; overflow:hidden; }

.nv-su-card{ position:relative; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); width:min(980px, 100%);
             min-height:min(620px, calc(100vh - 48px)); margin:auto; border-radius:24px; background:#ffffff; overflow:hidden; outline:none;
             box-shadow:0 0 0 1px rgba(10,10,10,0.04), 0 2px 6px rgba(10,10,10,0.06), 0 48px 120px -36px rgba(10,10,10,0.6); }

/* ---- the stage: a Novo chat on the paper grid ---- */
.nv-su-stage{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:36px;
              overflow:hidden; background-color:#F4F3EE;
              background-image:linear-gradient(rgba(10,10,10,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(10,10,10,0.05) 1px, transparent 1px);
              background-size:28px 28px; background-position:-1px -1px; }
/* a soft blue light on the table, and the grid fading out towards the edges */
.nv-su-stage::before{ content:""; position:absolute; left:50%; top:50%; width:560px; height:560px; margin:-280px 0 0 -280px;
                      border-radius:9999px; pointer-events:none;
                      background:radial-gradient(circle, rgba(46,90,209,0.12), rgba(46,90,209,0) 64%); }
.nv-su-stage::after{ content:""; position:absolute; inset:0; pointer-events:none;
                     background:radial-gradient(farthest-corner at 50% 45%, rgba(244,243,238,0) 40%, rgba(244,243,238,0.92) 100%); }

/* the app window, in the pages' own product-mockup look */
.nv-su-app{ position:relative; z-index:1; display:flex; flex-direction:column; flex:1 1 auto; width:100%; max-width:440px;
            min-height:0; max-height:548px; border-radius:18px; background:#ffffff; text-align:left; overflow:hidden;
            box-shadow:0 1px 2px rgba(10,10,10,0.06), 0 30px 70px -30px rgba(10,10,10,0.45); }
.nv-su-app-bar{ flex:none; display:flex; align-items:center; gap:10px; height:40px; padding:0 16px; border-bottom:1px solid rgba(10,10,10,0.06);
                font-size:13px; font-weight:500; color:rgba(10,10,10,0.55); }
.nv-su-dots{ display:inline-flex; gap:5px; }
.nv-su-dots i{ display:block; width:8px; height:8px; border-radius:9999px; background:rgba(10,10,10,0.12); }
/* the newest message sits at the bottom and pushes the older ones up, fading at the top */
.nv-su-chat{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; justify-content:flex-end; padding:0 16px 14px; overflow:hidden;
             -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 72px); mask-image:linear-gradient(to bottom, transparent 0, #000 72px); }
.nv-su-row{ display:flex; flex:none; margin-top:10px; overflow:hidden; }
.nv-su-row-me{ justify-content:flex-end; }
.nv-su-row-mid{ justify-content:center; }
.nv-su-msg{ max-width:84%; padding:11px 14px; border-radius:18px; font-size:14px; line-height:1.45; letter-spacing:-0.005em; }
.nv-su-me{ background:#0a0a0a; color:#ffffff; border-bottom-right-radius:6px; }
.nv-su-ai{ display:flex; gap:10px; align-items:flex-start; background:#F4F3EE; color:#0a0a0a; border-bottom-left-radius:6px; }
.nv-su-av{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:9999px; background:#0a0a0a; }
.nv-su-av svg{ display:block; width:12px; height:12px; fill:#ffffff; }
.nv-su-typing{ display:flex; align-items:center; gap:9px; padding:10px 14px; border-radius:18px; border-bottom-left-radius:6px; background:#F4F3EE; }
.nv-su-typing i{ display:block; width:6px; height:6px; border-radius:9999px; background:rgba(10,10,10,0.45); animation:nvSuDot 1s ease-in-out infinite; }
.nv-su-typing i:nth-of-type(2){ animation-delay:150ms; }
.nv-su-typing i:nth-of-type(3){ animation-delay:300ms; }
.nv-su-home{ width:78%; margin-left:32px; border:1px solid rgba(10,10,10,0.08); border-radius:14px; overflow:hidden; background:#ffffff; }
.nv-su-home img{ display:block; width:100%; height:auto; aspect-ratio:16 / 8; object-fit:cover; }
.nv-su-home-b{ display:flex; flex-direction:column; gap:3px; padding:10px 12px 12px; }
.nv-su-home-b b{ font-size:13.5px; font-weight:500; color:#0a0a0a; }
.nv-su-home-s{ font-size:12px; color:rgba(10,10,10,0.55); }
.nv-su-fit, .nv-su-booked-ico{ display:inline-flex; align-items:center; justify-content:center; color:#2f5a2a; background:#EEF3EC; }
.nv-su-fit{ align-self:flex-start; gap:5px; margin-top:6px; padding:4px 9px; border-radius:9999px; font-size:11.5px; font-weight:500; }
.nv-su-booked{ display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 8px; border-radius:9999px; background:#ffffff; font-size:13px;
               box-shadow:0 0 0 1px rgba(10,10,10,0.06), 0 12px 26px -14px rgba(10,10,10,0.35); }
.nv-su-booked-ico{ width:24px; height:24px; border-radius:9999px; }
.nv-su-c8{ padding-bottom:12px; }   /* room for the pill's shadow inside its clipped row */
.nv-su-booked b{ font-weight:500; color:#0a0a0a; }
.nv-su-booked-t{ color:rgba(10,10,10,0.55); }

/* ---- the form ---- */
.nv-su-pane{ position:relative; display:flex; flex-direction:column; padding:36px 56px 40px; text-align:left; }
.nv-su-logo{ display:block; align-self:flex-start; width:auto; height:22px; }
.nv-su-x{ position:absolute; top:29px; right:22px; z-index:2; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
          padding:0; border:0; border-radius:9999px; background:transparent; color:rgba(10,10,10,0.5); cursor:pointer;
          transition:background 150ms ease, color 150ms ease; }
.nv-su-step{ margin:0; padding:96px 0 8px; }
.nv-su-title{ margin:0; font-size:32px; font-weight:500; letter-spacing:-0.035em; line-height:1.12; color:#0a0a0a; outline:none; text-wrap:balance; }
.nv-su-sub{ margin:12px 0 0; font-size:16px; line-height:1.5; letter-spacing:-0.01em; color:rgba(10,10,10,0.6); text-wrap:pretty; }
/* the site's hand-drawn blue pencil underline, wiping in under one word */
.nv-su-mark{ position:relative; display:inline-block; white-space:nowrap; isolation:isolate; }
.nv-su-mark svg{ position:absolute; z-index:-1; left:-3%; bottom:-0.2em; width:106%; height:0.42em; overflow:visible; pointer-events:none;
                 animation:nvSuWipe 800ms 520ms cubic-bezier(0.65,0,0.35,1) both; }
.nv-su-mark path{ fill:none; stroke:#2E5AD1; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; stroke-width:2.4px; }
.nv-su-mark path + path{ stroke-width:1.6px; opacity:0.75; }

.nv-su-form{ margin:32px 0 0; }
.nv-su-label{ display:block; margin:0 0 8px; font-size:14px; font-weight:500; letter-spacing:-0.01em; color:#0a0a0a; }
.nv-su-input{ display:block; width:100%; height:52px; margin:0; padding:0 16px; border:1px solid rgba(10,10,10,0.14); border-radius:14px;
              background:#ffffff; color:#0a0a0a; font:inherit; font-size:16px; letter-spacing:-0.01em; outline:none;
              box-shadow:0 1px 2px rgba(10,10,10,0.04); -webkit-appearance:none; appearance:none;
              transition:border-color 150ms ease, box-shadow 150ms ease; }
.nv-su-input::placeholder{ color:rgba(10,10,10,0.45); }
.nv-su-input:focus{ border-color:#2E5AD1; box-shadow:0 0 0 4px rgba(46,90,209,0.16); outline:2px solid transparent; outline-offset:2px; }
.nv-su-input[aria-invalid="true"]{ border-color:#C4320A; box-shadow:0 0 0 4px rgba(196,50,10,0.12); }
/* the browser's autofill tint would fight the card; keep the field white */
.nv-su-input:-webkit-autofill{ -webkit-box-shadow:0 0 0 1000px #ffffff inset; -webkit-text-fill-color:#0a0a0a; }
.nv-su-input:-webkit-autofill:focus{ -webkit-box-shadow:0 0 0 1000px #ffffff inset, 0 0 0 4px rgba(46,90,209,0.16); }
.nv-su-err:empty{ margin:0; }
.nv-su-err{ margin:10px 0 0; font-size:13.5px; line-height:1.45; letter-spacing:-0.01em; color:#C4320A; }
.nv-su-err a{ color:inherit; text-underline-offset:2px; }

.nv-su-btn{ position:relative; display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:52px; margin:16px 0 0;
            padding:0 24px; border:0; border-radius:9999px; background:#0a0a0a; color:#ffffff; font:inherit; font-size:16px; font-weight:500;
            letter-spacing:-0.01em; line-height:1; cursor:pointer; transition:background 150ms ease, transform 120ms ease, opacity 150ms ease; }
.nv-su-btn:active{ transform:scale(0.985); }
.nv-su-btn[aria-disabled="true"]{ cursor:default; opacity:0.85; }
.nv-su-arrow{ display:block; transition:transform 200ms cubic-bezier(0.16,1,0.3,1); }
.nv-su-spin{ display:none; width:16px; height:16px; border:2px solid rgba(255,255,255,0.3); border-top-color:#ffffff; border-radius:9999px;
             animation:nvSuSpin 700ms linear infinite; }
.nv-su-btn[aria-disabled="true"] .nv-su-spin{ display:block; }
.nv-su-btn[aria-disabled="true"] .nv-su-arrow{ display:none; }
.nv-su-x:focus-visible, .nv-su-btn:focus-visible{ outline:2px solid #2E5AD1; outline-offset:3px; }
@media (hover: hover){
  .nv-su-x:hover{ background:#F4F3EE; color:#0a0a0a; }
  .nv-su-input:hover{ border-color:rgba(10,10,10,0.28); }
  .nv-su-btn:hover{ background:#2b2b2b; }
  .nv-su-btn[aria-disabled="true"]:hover{ background:#0a0a0a; }
  .nv-su-btn:hover .nv-su-arrow{ transform:translateX(3px); }
}

/* ---- the confirmation ---- */
.nv-su-ok{ display:flex; align-items:center; justify-content:center; width:60px; height:60px; margin:0 0 26px; border-radius:9999px;
           background:#0a0a0a; color:#ffffff; animation:nvSuPop 480ms cubic-bezier(0.2,0.8,0.2,1) both; }
.nv-su-ok path{ fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:24;
                animation:nvSuTick 380ms 200ms cubic-bezier(0.65,0,0.35,1) both; }
.nv-su-done .nv-su-btn{ margin-top:32px; }

/* ---- motion: the card rises, the form's lines follow one by one ---- */
.nv-su[open] .nv-su-card{ animation:nvSuIn 380ms cubic-bezier(0.16,1,0.3,1) both; }
.nv-su[open]::backdrop{ animation:nvSuFade 240ms ease both; }
.nv-su.is-closing .nv-su-card{ animation:nvSuOut 160ms ease both; }
.nv-su.is-closing::backdrop{ animation:nvSuFadeOut 160ms ease both; }
.nv-su-rise{ animation:nvSuRise 520ms cubic-bezier(0.16,1,0.3,1) both; }
.nv-su-r1{ animation-delay:80ms; } .nv-su-r2{ animation-delay:140ms; } .nv-su-r3{ animation-delay:200ms; }
.nv-su-r4{ animation-delay:260ms; } .nv-su-r5{ animation-delay:320ms; }

/* the conversation: one 20-second loop, each row arriving at its moment; the typing
   dots come and go, the rest stay until the loop fades out and starts over */
.nv-su-c1, .nv-su-c3, .nv-su-c4, .nv-su-c5, .nv-su-c7, .nv-su-c8{ animation:20s cubic-bezier(0.16,1,0.3,1) infinite both; }
.nv-su-c2, .nv-su-c6{ max-height:0; margin-top:0; opacity:0; animation:20s ease infinite both; }
.nv-su-c1, .nv-su-c2, .nv-su-c3, .nv-su-c4, .nv-su-c5, .nv-su-c6, .nv-su-c7, .nv-su-c8{ animation-delay:-4.6s; }
.nv-su-c1{ animation-name:nvSuC1; } .nv-su-c2{ animation-name:nvSuC2; } .nv-su-c3{ animation-name:nvSuC3; } .nv-su-c4{ animation-name:nvSuC4; }
.nv-su-c5{ animation-name:nvSuC5; } .nv-su-c6{ animation-name:nvSuC6; } .nv-su-c7{ animation-name:nvSuC7; } .nv-su-c8{ animation-name:nvSuC8; }
@keyframes nvSuC1{ 0%, 3%{ max-height:0; margin-top:0; opacity:0; transform:translateY(10px); } 5%, 92%{ max-height:200px; margin-top:10px; opacity:1; transform:none; } 97%, 100%{ max-height:200px; margin-top:10px; opacity:0; } }
@keyframes nvSuC2{ 0%, 8%{ max-height:0; margin-top:0; opacity:0; } 9.5%, 14%{ max-height:60px; margin-top:10px; opacity:1; } 15.5%, 100%{ max-height:0; margin-top:0; opacity:0; } }
@keyframes nvSuC3{ 0%, 15%{ max-height:0; margin-top:0; opacity:0; transform:translateY(10px); } 17%, 92%{ max-height:200px; margin-top:10px; opacity:1; transform:none; } 97%, 100%{ max-height:200px; margin-top:10px; opacity:0; } }
@keyframes nvSuC4{ 0%, 21%{ max-height:0; margin-top:0; opacity:0; transform:translateY(10px); } 24%, 92%{ max-height:320px; margin-top:10px; opacity:1; transform:none; } 97%, 100%{ max-height:320px; margin-top:10px; opacity:0; } }
@keyframes nvSuC5{ 0%, 33%{ max-height:0; margin-top:0; opacity:0; transform:translateY(10px); } 35%, 92%{ max-height:200px; margin-top:10px; opacity:1; transform:none; } 97%, 100%{ max-height:200px; margin-top:10px; opacity:0; } }
@keyframes nvSuC6{ 0%, 39%{ max-height:0; margin-top:0; opacity:0; } 40.5%, 46%{ max-height:60px; margin-top:10px; opacity:1; } 47.5%, 100%{ max-height:0; margin-top:0; opacity:0; } }
@keyframes nvSuC7{ 0%, 47%{ max-height:0; margin-top:0; opacity:0; transform:translateY(10px); } 49%, 92%{ max-height:200px; margin-top:10px; opacity:1; transform:none; } 97%, 100%{ max-height:200px; margin-top:10px; opacity:0; } }
@keyframes nvSuC8{ 0%, 53%{ max-height:0; margin-top:0; opacity:0; transform:translateY(10px) scale(0.96); } 55.5%, 92%{ max-height:80px; margin-top:14px; opacity:1; transform:none; } 97%, 100%{ max-height:80px; margin-top:14px; opacity:0; } }

/* signed up: the chat stops looping and shows the whole exchange, down to the booked viewing */
.nv-su.is-done .nv-su-row{ animation:none; }
.nv-su.is-done .nv-su-c2, .nv-su.is-done .nv-su-c6{ display:none; }

@keyframes nvSuIn{ from{ opacity:0; transform:translateY(18px) scale(0.985); } to{ opacity:1; transform:none; } }
@keyframes nvSuOut{ to{ opacity:0; transform:translateY(8px) scale(0.985); } }
@keyframes nvSuFade{ from{ opacity:0; } }
@keyframes nvSuFadeOut{ to{ opacity:0; } }
@keyframes nvSuRise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes nvSuWipe{ from{ clip-path:inset(-40% 100% -40% -6%); } to{ clip-path:inset(-40% -6% -40% -6%); } }
@keyframes nvSuDot{ 0%, 60%, 100%{ transform:translateY(0); opacity:0.45; } 30%{ transform:translateY(-3px); opacity:1; } }
@keyframes nvSuSpin{ to{ transform:rotate(360deg); } }
@keyframes nvSuPop{ from{ opacity:0; transform:scale(0.6); } to{ opacity:1; transform:none; } }
@keyframes nvSuTick{ from{ stroke-dashoffset:24; } to{ stroke-dashoffset:0; } }

/* ---- a phone or a narrow window: a full-screen sheet, the form first, the chat under it ---- */
@media (max-width:879px){
  .nv-su{ padding:0; }
  .nv-su-card{ grid-template-columns:minmax(0, 1fr); grid-template-rows:auto 1fr; width:100%; min-height:calc(100% - 10px);
               margin:10px 0 0; border-radius:22px 22px 0 0; }
  .nv-su[open] .nv-su-card{ animation-name:nvSuUp; }
  .nv-su.is-closing .nv-su-card{ animation-name:nvSuDown; }
  .nv-su-pane{ order:1; padding:26px 22px 28px; }
  .nv-su-x{ top:15px; right:12px; width:44px; height:44px; }
  .nv-su-step{ margin:0; padding:34px 0 0; }
  .nv-su-title{ font-size:28px; }
  .nv-su-form{ margin-top:26px; }
  .nv-su-stage{ order:2; justify-content:flex-start; padding:22px 18px calc(24px + env(safe-area-inset-bottom)); }
  .nv-su-app{ flex:1 1 auto; min-height:300px; max-height:none; max-width:420px; }
  .nv-su-msg{ font-size:13.5px; }
  @keyframes nvSuUp{ from{ opacity:0.4; transform:translateY(48px); } to{ opacity:1; transform:none; } }
  @keyframes nvSuDown{ to{ opacity:0; transform:translateY(32px); } }
}

/* a tablet or a mid-size window: the same single column, as a centred card */
@media (min-width:600px) and (max-width:879px){
  .nv-su{ padding:24px; }
  .nv-su-card{ width:min(560px, 100%); min-height:0; margin:max(24px, 6vh) auto auto; border-radius:24px; }   /* from the top: an error pushes only what is below it */
  .nv-su-pane{ padding:32px 40px 32px; }
  .nv-su-stage{ padding:24px 40px 32px; }
  .nv-su-app{ flex:none; height:360px; min-height:0; }
  .nv-su-x{ top:21px; right:18px; }
  .nv-su[open] .nv-su-card{ animation-name:nvSuIn; }
  .nv-su.is-closing .nv-su-card{ animation-name:nvSuOut; }
}

/* reduced motion means LESS MOTION: everything at rest, the chat shown whole */
@media (prefers-reduced-motion: reduce){
  .nv-su *, .nv-su::backdrop, .nv-su-card{ animation:none !important; transition:none !important; }
  .nv-su-c2, .nv-su-c6{ display:none; }
  .nv-su .nv-su-btn .nv-su-spin{ animation:nvSuSpin 900ms linear infinite !important; }
}