/* Real Client Source — shared tokens, primitives and the video mock.
   Loaded by index.html (marketing), app.html (the app) and v.html (the video page). */
:root{
  --bg:#080b09; --bg-2:#0c110e; --panel:#101612; --panel-2:#151c17; --raise:#1b241d;
  --line:rgba(190,232,202,.09); --line-2:rgba(190,232,202,.18);
  --ink:#eef4ee; --ink-2:#c6d1c8; --muted:#8a998e; --faint:#5d6b61;
  --lime:#c9f23f; --lime-hi:#deff73; --lime-ink:#0f1508; --lime-soft:rgba(201,242,63,.12);
  --accent-text:#c9f23f;
  --violet:#8f8cff; --violet-soft:rgba(143,140,255,.15);
  --sky:#5cc8ff; --sky-soft:rgba(92,200,255,.14);
  --amber:#ffb84d; --amber-soft:rgba(255,184,77,.14);
  --rose:#ff6f7d; --rose-soft:rgba(255,111,125,.14);
  --good:#3ddc97; --good-soft:rgba(61,220,151,.14);
  --shadow:0 24px 70px -28px rgba(0,0,0,.75);
  --disp:"Bricolage Grotesque","Geist",system-ui,sans-serif;
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,Consolas,monospace;
  --r:14px; --r-sm:10px;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f3f5ef; --bg-2:#ecefe7; --panel:#ffffff; --panel-2:#fafbf7; --raise:#f0f3ea;
  --line:rgba(18,34,22,.09); --line-2:rgba(18,34,22,.18);
  --ink:#0e160f; --ink-2:#2b382e; --muted:#5c6b60; --faint:#8b998f;
  --lime:#bfe92f; --lime-hi:#cdf54a; --lime-soft:rgba(110,160,0,.13);
  --accent-text:#487600;
  --violet:#5b57e6; --violet-soft:rgba(91,87,230,.11);
  --sky:#0c86c9; --sky-soft:rgba(12,134,201,.11);
  --amber:#b96a00; --amber-soft:rgba(185,106,0,.12);
  --rose:#d43a4b; --rose-soft:rgba(212,58,75,.1);
  --good:#0e9c63; --good-soft:rgba(14,156,99,.12);
  --shadow:0 24px 60px -30px rgba(20,40,25,.35);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:400 14px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
h1,h2,h3,h4,p{margin:0}
.ic{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 15px;border-radius:10px;
  border:1px solid var(--line-2);background:var(--panel-2);color:var(--ink);font-weight:500;white-space:nowrap;transition:.15s}
.btn:hover{border-color:var(--muted);background:var(--raise)}
.btn.primary{background:var(--lime);border-color:var(--lime);color:var(--lime-ink);font-weight:600}
.btn.primary:hover{background:var(--lime-hi);border-color:var(--lime-hi);box-shadow:0 0 0 4px var(--lime-soft)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn.ghost:hover{background:var(--raise)}
.btn.sm{height:30px;padding:0 10px;font-size:12.5px;border-radius:8px}
.btn.lg{height:48px;padding:0 22px;font-size:15.5px;border-radius:12px}
.btn.danger{color:var(--rose)}

/* brand */
.brand{display:inline-flex;align-items:center;gap:10px;font:700 16px/1 var(--disp);letter-spacing:-.01em}
.brand svg{width:30px;height:30px;flex:none}
.brand b{color:var(--accent-text);font-weight:700}

/* ---------- the video mock: one component, every size (sized by its own width) ---------- */
.vm{container-type:inline-size;position:relative;border-radius:12px;overflow:hidden;background:#fff;
  border:1px solid var(--line-2);box-shadow:var(--shadow);width:100%}
.vm-in{font-size:2.5cqw;color:#1c2530;position:relative;line-height:1.3;font-family:var(--sans)}
.vm-chrome{display:flex;align-items:center;gap:.55em;padding:.75em 1em;background:#dde3e8}
.vm-chrome i{width:.85em;height:.85em;border-radius:50%;background:#ff6058;flex:none}
.vm-chrome i:nth-child(2){background:#ffbd2e}.vm-chrome i:nth-child(3){background:#28c940}
.vm-url{flex:1;margin-left:.6em;background:#fff;border-radius:2em;padding:.3em 1.1em;font-size:.82em;color:#5b6672;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vm-stage{position:relative;aspect-ratio:16/9.2;overflow:hidden;background:#e7eee6}
.vm.bare .vm-chrome{display:none}
.vm.bare{border-radius:8px;box-shadow:none}

/* maps background */
.vm-map{position:absolute;inset:0;width:100%;height:100%;transform-origin:60% 50%}
.vm-listing{position:absolute;left:0;top:0;bottom:0;width:33%;background:#fff;box-shadow:.3em 0 1.2em rgba(0,0,0,.14);display:flex;flex-direction:column}
.vm-photo{height:34%;background:linear-gradient(135deg,hsl(var(--h) 46% 46%),hsl(calc(var(--h) + 40) 52% 30%));position:relative;overflow:hidden}
.vm-photo:after{content:"";position:absolute;inset:auto -10% -55% -10%;height:90%;background:rgba(255,255,255,.14);border-radius:50%}
.vm-lbody{padding:.9em 1em;display:flex;flex-direction:column;gap:.35em}
.vm-lname{font-weight:650;font-size:1.12em;color:#111922;line-height:1.2}
.vm-lrate{font-size:.86em;color:#5f6b76}.vm-lrate b{color:#e7a100;font-weight:600;letter-spacing:.05em}
.vm-lbtns{display:flex;gap:.7em;margin-top:.5em}
.vm-lbtns span{width:2em;height:2em;border-radius:50%;border:.1em solid #c9d6f2;background:#eef3ff}
.vm-lbtns span:first-child{background:#1a73e8;border-color:#1a73e8}
.vm-lline{height:.5em;border-radius:1em;background:#e9edf1;margin-top:.5em}
.vm-lline.s{width:62%}

/* website background */
.vm-site{position:absolute;inset:0 0 auto 0;background:#fff}
.vm-snav{display:flex;align-items:center;gap:1.6em;padding:1em 2em;border-bottom:.08em solid #edf0f2;font-size:.8em;color:#586371}
.vm-snav b{font-size:1.25em;color:hsl(var(--h) 55% 30%);margin-right:auto;font-weight:700}
.vm-snav em{font-style:normal;background:hsl(var(--h) 60% 40%);color:#fff;padding:.4em 1em;border-radius:.5em}
.vm-shero{display:grid;grid-template-columns:1.1fr 1fr;gap:2em;padding:2.2em 2em;background:linear-gradient(120deg,hsl(var(--h) 55% 95%),#fff)}
.vm-shero h5{margin:0 0 .5em;font:700 1.9em/1.1 var(--disp);color:#111922}
.vm-shero p{font-size:.85em;color:#5f6b76;margin:0 0 1em}
.vm-shero em{font-style:normal;display:inline-block;background:hsl(var(--h) 60% 40%);color:#fff;padding:.55em 1.2em;border-radius:.5em;font-size:.85em}
.vm-simg{border-radius:.8em;min-height:11em;background:linear-gradient(135deg,hsl(var(--h) 46% 52%),hsl(calc(var(--h) + 45) 55% 32%))}
.vm-scards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2em;padding:1.6em 2em 3em}
.vm-scards div{height:8em;border-radius:.7em;background:#f3f5f7;border:.08em solid #e8ecef}
.vm-sband{height:9em;background:hsl(var(--h) 45% 22%)}

/* bubble + play */
.vm-bubble{position:absolute;width:21%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:.42em solid #fff;
  box-shadow:0 .6em 1.8em rgba(0,0,0,.35);background:#20302a}
.vm-bubble svg{width:100%;height:100%;display:block}
.vm[data-shape="square"] .vm-bubble{border-radius:16%}
.vm[data-pos="bl"] .vm-bubble{left:3.5%;bottom:6%}
.vm[data-pos="br"] .vm-bubble{right:3.5%;bottom:6%}
.vm[data-pos="tl"] .vm-bubble{left:3.5%;top:6%}
.vm[data-pos="tr"] .vm-bubble{right:3.5%;top:6%}
.vm-shade{position:absolute;inset:0;background:rgba(10,16,12,.18);transition:.3s}
.vm-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-58%);width:5.2em;height:5.2em;border-radius:50%;background:#fff;
  color:#111922;display:grid;place-items:center;box-shadow:0 1em 3em rgba(0,0,0,.35);transition:.2s}
.vm-play svg{width:2.2em;height:2.2em;margin-left:.25em;stroke:none}
.vm-play:hover{transform:translate(-50%,-58%) scale(1.07)}
.vm-pill{position:absolute;left:50%;top:50%;transform:translate(-50%,3.1em);background:#fff;color:#111922;font-size:.9em;font-weight:500;
  padding:.4em 1.1em;border-radius:2em;box-shadow:0 .5em 1.4em rgba(0,0,0,.22);white-space:nowrap}
.vm-pill u{text-underline-offset:.15em}
.vm-cap{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);background:rgba(10,14,11,.82);color:#fff;padding:.45em 1.1em;border-radius:.6em;
  font-size:1.05em;font-weight:500;white-space:nowrap;opacity:0;transition:.3s}
.vm-bar{position:absolute;left:0;bottom:0;height:.4em;width:0;background:var(--lime)}
.vm.playing .vm-shade,.vm.playing .vm-play,.vm.playing .vm-pill{opacity:0;pointer-events:none}
.vm.playing .vm-cap{opacity:1}
.vm.playing .vm-bar{animation:vmbar 12s linear forwards}
.vm.playing .vm-site{animation:vmscroll 12s ease-in-out forwards}
.vm.playing .vm-map{animation:vmpan 12s ease-in-out forwards}
.vm.playing .vm-bubble{animation:vmtalk 1.1s ease-in-out infinite}
@keyframes vmbar{to{width:100%}}
@keyframes vmscroll{0%,12%{transform:translateY(0)}100%{transform:translateY(-34%)}}
@keyframes vmpan{0%,12%{transform:scale(1)}100%{transform:scale(1.22) translate(-3%,2%)}}
@keyframes vmtalk{50%{box-shadow:0 .6em 1.8em rgba(0,0,0,.35),0 0 0 .5em rgba(201,242,63,.55)}}
@media (prefers-reduced-motion:reduce){.vm.playing *{animation:none!important}}
/* caption sits on the opposite edge from the bubble so the two never overlap */
.vm[data-pos="bl"] .vm-cap,.vm[data-pos="br"] .vm-cap{bottom:auto;top:7%}