/* ==========================================================================
   مِسك — Brand layer 2026 «Misk Night»
   Loaded last on every public page. Re-skins the existing markup (CMS
   markers untouched) and adds the motion system driven by brand.js.
   Every animation is decorative, pausable and dropped under
   prefers-reduced-motion.
   ========================================================================== */

:root{
  --night:#03140f;
  --night-2:#06241d;
  --night-3:#0a3328;
  --emerald:#10b98a;
  --aqua:#35f0d0;
  --jade:#0a8f6c;
  --gold:#d8b36a;
  --gold-2:#f3dca4;
  --ivory:#f7f5ee;
  --paper:#fbfaf6;
  --ink:#0b1f1a;
  --muted:#4f625c;
  --line:#e3e6dc;
  --green:#0a8f6c;
  --dark:#062a22;
  --mint:#dff5ea;
  --bg:var(--ivory);
  --grad-brand:linear-gradient(120deg,#35f0d0 0%,#10b98a 38%,#0a8f6c 62%,#d8b36a 100%);
  --grad-gold:linear-gradient(100deg,#b8893d,#f3dca4 45%,#d8b36a 70%,#9c7130);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --shadow-1:0 1px 2px rgba(3,20,15,.06),0 8px 24px -12px rgba(3,20,15,.18);
  --shadow-2:0 2px 4px rgba(3,20,15,.06),0 30px 60px -28px rgba(3,20,15,.35);
  --radius:18px;
}

/* Full-bleed stages use 100vw, which includes the scrollbar; clip (not hidden) keeps sticky headers working. */
html{background:var(--ivory);overflow-x:clip}
body{overflow-x:clip}
body{background:var(--ivory);color:var(--ink);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
::selection{background:var(--aqua);color:var(--night)}
h1,h2,h3{letter-spacing:-.02em}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:8px}

/* ---------- Scroll progress ---------- */
.misk-progress{position:fixed;inset-inline:0;top:0;height:2px;z-index:200;pointer-events:none;transform-origin:right;transform:scaleX(var(--p,0));background:var(--grad-brand)}

/* ---------- Header: dark glass across every page ---------- */
.header,.public-header,.tool-header{
  position:sticky;top:0;z-index:60;
  background:rgba(3,20,15,.78)!important;
  -webkit-backdrop-filter:saturate(160%) blur(18px);backdrop-filter:saturate(160%) blur(18px);
  border-bottom:1px solid rgba(216,179,106,.16)!important;
  color:#eaf6f1;
  transition:background .4s var(--ease-out),box-shadow .4s var(--ease-out);
}
.is-scrolled .header,.is-scrolled .public-header,.is-scrolled .tool-header{box-shadow:0 10px 40px -20px rgba(0,0,0,.6)}
.header .brand span,.public-header .brand span,.tool-header .brand span,
.header .brand,.public-header .brand,.tool-header .brand{color:#fff}
.brand img{filter:drop-shadow(0 0 14px rgba(53,240,208,.35));transition:transform .8s var(--ease-out)}
.brand:hover img{transform:rotate(-8deg) scale(1.06)}
.header nav a,.public-nav a,.tool-nav a{color:rgba(234,246,241,.78);position:relative;transition:color .25s}
.header nav a:hover,.public-nav a:hover,.tool-nav a:hover,.public-nav [aria-current=page]{color:#fff!important}
.header nav a::after,.public-nav a::after{content:"";position:absolute;inset-inline:0;bottom:-4px;height:1px;background:var(--grad-gold);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
.header nav a:hover::after,.public-nav a:hover::after,.public-nav [aria-current=page]::after{transform:scaleX(1);transform-origin:right}
.public-nav .nav-account{border-bottom:0!important}
.header-auth-link{color:#eaf6f1!important;border-color:rgba(255,255,255,.16)!important;background:rgba(255,255,255,.04)!important}
.header-auth-link:hover{background:rgba(255,255,255,.1)!important}
.header-signup-icon{background:var(--aqua)!important;color:var(--night)!important}
.menu-button,.public-menu{color:#fff!important;border-color:rgba(255,255,255,.2)!important;background:transparent!important}
.menu-button svg{stroke:#fff}
@media (max-width:900px){
  .header nav,#main-nav,.public-nav{background:var(--night)!important;color:#fff}
}

/* ---------- Buttons: gradient core, sheen sweep, magnetic ---------- */
.button,.btn-primary,.header-cta{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,#12c79a,#0a8f6c 55%,#076a50)!important;
  border:1px solid rgba(53,240,208,.35)!important;color:#fff!important;
  border-radius:999px!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 12px 30px -12px rgba(16,185,138,.75);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)!important;
  will-change:transform;
}
.button::before,.header-cta::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(120%);transition:transform .9s var(--ease-out);
}
.button:hover::before,.header-cta:hover::before{transform:translateX(-120%)}
.button:hover{box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 18px 40px -12px rgba(53,240,208,.6)}
.text-button,.intro-replay{transition:color .3s,gap .3s}

/* ---------- Typography accents ---------- */
.accent,.hero h1 .accent{
  background:var(--grad-brand);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
  animation:misk-flow 8s var(--ease-io) infinite alternate;
}
.eyebrow{color:var(--jade);font-weight:700;letter-spacing:.02em}
@keyframes misk-flow{to{background-position:100% 0}}

/* ---------- Home hero: night stage with aurora + particles ---------- */
.hero{position:relative;isolation:isolate;color:#eaf6f1}
.hero::before{
  content:"";position:absolute;z-index:-3;top:-1px;bottom:0;
  inset-inline:calc(50% - 50vw);
  background:
    radial-gradient(60% 70% at 15% 30%,rgba(16,185,138,.30),transparent 60%),
    radial-gradient(45% 55% at 85% 20%,rgba(53,240,208,.18),transparent 65%),
    radial-gradient(50% 60% at 70% 100%,rgba(216,179,106,.16),transparent 70%),
    linear-gradient(180deg,var(--night) 0%,var(--night-2) 70%,var(--night-3) 100%);
}
.hero::after{ /* fine grid that fades out — a quiet "engineered" texture */
  content:"";position:absolute;z-index:-2;top:0;bottom:0;inset-inline:calc(50% - 50vw);
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(70% 60% at 50% 40%,#000 20%,transparent 75%);
  animation:misk-grid 30s linear infinite;
}
@keyframes misk-grid{to{background-position:0 64px,64px 0}}
.misk-aurora{position:absolute;z-index:-2;top:0;bottom:0;inset-inline:calc(50% - 50vw);overflow:hidden;pointer-events:none}
.misk-aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;mix-blend-mode:screen;animation:misk-drift 22s var(--ease-io) infinite alternate}
.misk-aurora i:nth-child(1){width:46vw;height:46vw;left:-8vw;top:-12vw;background:#10b98a}
.misk-aurora i:nth-child(2){width:34vw;height:34vw;right:-6vw;top:8vw;background:#1fd8c0;animation-duration:28s;animation-delay:-6s;opacity:.35}
.misk-aurora i:nth-child(3){width:28vw;height:28vw;left:35vw;bottom:-14vw;background:#d8b36a;animation-duration:34s;animation-delay:-12s;opacity:.22}
@keyframes misk-drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6vw,4vw,0) scale(1.15)}100%{transform:translate3d(-4vw,7vw,0) scale(.92)}}
.misk-particles{position:absolute;z-index:-1;top:0;bottom:0;inset-inline:calc(50% - 50vw);width:100vw;height:100%;pointer-events:none}
.misk-spotlight{position:absolute;z-index:-1;top:0;bottom:0;inset-inline:calc(50% - 50vw);pointer-events:none;background:radial-gradient(600px circle at var(--mx,50%) var(--my,40%),rgba(53,240,208,.10),transparent 60%)}

.hero h1{color:#fff;font-weight:800;line-height:1.25}
.hero .hero-description,.hero .platform-note{color:rgba(234,246,241,.72)!important}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;color:var(--gold-2);background:rgba(216,179,106,.08);border:1px solid rgba(216,179,106,.28)}
.hero .text-button,.hero .intro-replay{color:#eaf6f1!important}
.hero .text-button:hover,.hero .intro-replay:hover{color:var(--aqua)!important}
.hero .title-stroke path{stroke:var(--gold)!important}
.hero .orbit{border-color:rgba(53,240,208,.18)!important;background:radial-gradient(circle at 50% 40%,rgba(16,185,138,.22),rgba(6,36,29,.0) 70%)!important}
.hero .path-base{stroke:rgba(255,255,255,.08)!important}
.hero .path-moving{stroke:var(--aqua)!important;filter:drop-shadow(0 0 6px rgba(53,240,208,.8))}
.hero .desktop-demo,.hero .phone-demo{box-shadow:0 40px 90px -30px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.06)!important}
.hero .float-tag{background:rgba(255,255,255,.08)!important;color:#fff!important;border:1px solid rgba(255,255,255,.14)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hero .float-tag strong{color:var(--gold-2)}
.hero .art-spark{color:var(--gold-2)!important;text-shadow:0 0 18px rgba(243,220,164,.8)}
.hero .motion-controls,.hero .motion-controls span{color:rgba(234,246,241,.6)!important}
.hero .motion-controls button{background:rgba(255,255,255,.08)!important;color:#fff!important;border-color:rgba(255,255,255,.18)!important}
.hero-art{transform-style:preserve-3d;transition:transform 1.2s var(--ease-out)}

/* Brand mark halo behind the device mockups */
.misk-mark{position:absolute;z-index:-1;inset:8% 12% auto auto;width:62%;aspect-ratio:1;pointer-events:none;opacity:.9}
.misk-mark .halo{position:absolute;inset:-10%;border-radius:50%;background:conic-gradient(from 0deg,rgba(53,240,208,0),rgba(53,240,208,.35),rgba(216,179,106,.35),rgba(53,240,208,0));filter:blur(40px);animation:misk-spin 18s linear infinite}
.misk-mark .ring{position:absolute;inset:4%;border-radius:50%;border:1px solid rgba(216,179,106,.25)}
.misk-mark .ring:nth-child(3){inset:-6%;border-color:rgba(53,240,208,.12);border-style:dashed;animation:misk-spin 60s linear infinite reverse}
@keyframes misk-spin{to{transform:rotate(1turn)}}

/* ---------- Living logo: sheen masked by the mark itself ---------- */
.misk-logo-live{position:relative;display:inline-block;line-height:0}
.misk-logo-live::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  -webkit-mask:url(logo.png) center/contain no-repeat;mask:url(logo.png) center/contain no-repeat;
  background:linear-gradient(115deg,transparent 35%,rgba(255,250,225,.95) 48%,transparent 60%);
  background-size:300% 100%;background-position:150% 0;
  animation:misk-sheen 5.5s var(--ease-io) infinite;
}
@keyframes misk-sheen{0%,55%{background-position:150% 0}100%{background-position:-50% 0}}

/* ---------- Journey strip → infinite marquee ---------- */
.journey-strip{background:var(--night)!important;color:#eaf6f1!important;border-block:1px solid rgba(216,179,106,.18)!important;overflow:hidden}
.journey-strip *{color:inherit}
.journey-strip.is-marquee .strip-inner{width:max-content!important;max-width:none!important;display:flex;flex-wrap:nowrap;gap:48px;animation:misk-marquee 40s linear infinite;padding-inline:24px}
.journey-strip.is-marquee:hover .strip-inner{animation-play-state:paused}
@keyframes misk-marquee{to{transform:translateX(50%)}}

/* ---------- Sections, cards, surfaces ---------- */
.section{position:relative}
.section-heading h2,.page-hero h1,.role-copy h2{font-weight:800}
.page-hero{position:relative;isolation:isolate;color:#eaf6f1;border-bottom:0!important;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-2;
  background:radial-gradient(50% 80% at 85% 0%,rgba(16,185,138,.35),transparent 65%),radial-gradient(40% 70% at 10% 100%,rgba(216,179,106,.16),transparent 70%),linear-gradient(180deg,var(--night),var(--night-2))}
.page-hero::after{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
.page-hero h1{color:#fff}
.page-hero .lede,.page-hero p{color:rgba(234,246,241,.74)!important}
.page-hero .eyebrow,.page-hero .page-index{color:var(--gold-2)!important}
.page-hero a:not(.button){color:var(--aqua)}
.brand-monument{border-color:rgba(216,179,106,.3)!important;background:radial-gradient(circle,rgba(53,240,208,.12),transparent 70%)}

/* Any card-ish surface gets depth + a cursor spotlight (brand.js sets --sx/--sy) */
.misk-card{position:relative;border-radius:var(--radius);transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out),border-color .4s;will-change:transform}
.misk-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--sx,50%) var(--sy,50%),rgba(16,185,138,.10),transparent 45%)}
.misk-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;opacity:0;transition:opacity .4s;
  background:radial-gradient(300px circle at var(--sx,50%) var(--sy,50%),rgba(216,179,106,.9),rgba(53,240,208,.4) 40%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.misk-card:hover{box-shadow:var(--shadow-2);transform:translateY(-4px)}
.misk-card:hover::before,.misk-card:hover::after{opacity:1}

/* ---------- Reveal system (replaces the plain fade) ---------- */
.js-ready .reveal,.misk-reveal{opacity:0;transform:translateY(28px);filter:blur(6px);transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out),filter 1s var(--ease-out);transition-delay:var(--d,0ms)}
.js-ready .reveal.is-visible,.misk-reveal.is-in{opacity:1;transform:none;filter:none}
.misk-title-in{animation:misk-title 1.2s var(--ease-out) both}
@keyframes misk-title{from{opacity:0;transform:translateY(.4em);filter:blur(10px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;filter:none;clip-path:inset(-20% 0 -20% 0)}}

/* ---------- Footer: monumental wordmark ---------- */
.public-footer,.footer,footer{position:relative;background:var(--night)!important;color:rgba(234,246,241,.72)!important;overflow:hidden;isolation:isolate}
.public-footer a,footer a{color:rgba(234,246,241,.8)}
.public-footer a:hover,footer a:hover{color:var(--aqua)}
.public-footer strong,footer strong,.public-footer .brand span,footer .brand span{color:#fff}
.public-footer *{border-color:rgba(255,255,255,.08)!important}
.misk-wordmark{display:block;text-align:center;font-weight:900;font-size:clamp(90px,22vw,320px);line-height:.95;letter-spacing:-.04em;margin:40px 0 -0.18em;pointer-events:none;user-select:none;
  background:linear-gradient(180deg,rgba(53,240,208,.22),rgba(16,185,138,.02) 85%);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:1px rgba(216,179,106,.18)}

/* ---------- Custom cursor dot (fine pointers only) ---------- */
.misk-cursor{position:fixed;top:0;left:0;z-index:300;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;pointer-events:none;
  border:1px solid rgba(16,185,138,.6);mix-blend-mode:difference;transition:width .35s var(--ease-out),height .35s var(--ease-out),margin .35s var(--ease-out),background .35s,opacity .3s;opacity:0}
.misk-cursor.is-on{opacity:1}
.misk-cursor.is-hover{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(53,240,208,.18);border-color:transparent}

/* ---------- Brand guidelines page (/brand/) ---------- */
.bk{--pad:clamp(20px,5vw,72px)}
.bk-hero{position:relative;min-height:88vh;display:grid;place-items:center;text-align:center;color:#fff;isolation:isolate;overflow:hidden;padding:120px 16px 80px}
.bk-hero::before{content:"";position:absolute;inset:0;z-index:-3;background:radial-gradient(60% 60% at 50% 40%,rgba(16,185,138,.35),transparent 70%),linear-gradient(180deg,var(--night),var(--night-2))}
.bk-hero .misk-aurora,.bk-hero .misk-particles{inset:0;width:100%}
.bk-logo{width:min(260px,52vw);aspect-ratio:1;margin:0 auto 28px;position:relative;animation:misk-float 7s var(--ease-io) infinite alternate}
.bk-logo img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 30px 60px rgba(16,185,138,.45))}
@keyframes misk-float{from{transform:translateY(-8px) rotate(-2deg)}to{transform:translateY(10px) rotate(2deg)}}
.bk-hero h1{font-size:clamp(56px,11vw,150px);line-height:1;margin:0 0 18px;font-weight:900;letter-spacing:-.04em}
.bk-hero p{max-width:620px;margin:0 auto;color:rgba(234,246,241,.75);font-size:clamp(15px,1.6vw,19px)}
.bk-sec{padding:clamp(64px,10vw,140px) 0;border-bottom:1px solid var(--line)}
.bk-sec .wrap{width:min(1180px,calc(100% - 32px))}
.bk-k{display:flex;gap:14px;align-items:baseline;color:var(--jade);font-weight:700;font-size:13px;letter-spacing:.08em;margin-bottom:14px}
.bk-k b{font-variant-numeric:tabular-nums;color:var(--gold)}
.bk-sec h2{font-size:clamp(34px,5vw,64px);line-height:1.15;margin:0 0 20px;font-weight:800}
.bk-sec .lead{max-width:680px;color:var(--muted);font-size:17px;line-height:2}
.bk-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:40px}
.bk-swatch{border-radius:22px;min-height:220px;padding:22px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;border:1px solid rgba(0,0,0,.05);cursor:copy}
.bk-swatch strong{font-size:20px}
.bk-swatch code{font-family:ui-monospace,Consolas,monospace;font-size:13px;opacity:.85;direction:ltr;text-align:right}
.bk-swatch.light{color:var(--ink)}
.bk-type{display:grid;gap:10px;margin-top:40px}
.bk-type div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;border-top:1px solid var(--line);padding-top:14px;flex-wrap:wrap}
.bk-type small{color:var(--muted);font-family:ui-monospace,Consolas,monospace;direction:ltr}
.bk-logos{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:40px}
.bk-logos figure{margin:0;border-radius:22px;aspect-ratio:4/3;display:grid;place-items:center;border:1px solid var(--line)}
.bk-logos figure .lock{display:flex;align-items:center;gap:12px;font-weight:900;font-size:44px;letter-spacing:-.03em}
.bk-logos figure img{width:72px;height:72px;object-fit:contain}
.bk-logos figcaption{font-size:13px;color:var(--muted);text-align:center;margin-top:10px}
.bk-motion{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:40px}
.bk-motion article{border-radius:22px;padding:24px;background:var(--paper);border:1px solid var(--line)}
.bk-motion .demo{height:120px;border-radius:14px;background:var(--night);margin-bottom:18px;position:relative;overflow:hidden}
.bk-motion .demo i{position:absolute;width:44px;height:44px;border-radius:12px;background:var(--grad-brand);top:38px;right:20px}
.bk-motion .d1 i{animation:bk-out 2.4s var(--ease-out) infinite}
.bk-motion .d2 i{animation:bk-io 2.4s var(--ease-io) infinite alternate}
.bk-motion .d3 i{animation:bk-breathe 3.2s var(--ease-io) infinite}
@keyframes bk-out{0%{transform:translateX(0);opacity:0}20%{opacity:1}100%{transform:translateX(calc(-1 * (100% + 120px)));opacity:1}}
@keyframes bk-io{to{transform:translateX(-160px) rotate(90deg)}}
@keyframes bk-breathe{50%{transform:scale(1.25);box-shadow:0 0 40px rgba(53,240,208,.7)}}
.bk-voice{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:40px}
.bk-voice div{border-radius:22px;padding:24px;border:1px solid var(--line);background:var(--paper)}
.bk-voice .yes{border-color:rgba(16,185,138,.4)}
.bk-voice .no{border-color:rgba(200,80,60,.3)}
.bk-voice h3{margin:0 0 8px;font-size:15px}
.bk-copied{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);background:var(--night);color:#fff;padding:10px 18px;border-radius:999px;opacity:0;transition:.4s var(--ease-out);z-index:300;pointer-events:none}
.bk-copied.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Motion off: user toggle or OS preference ---------- */
.misk-still *,.misk-still *::before,.misk-still *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js-ready .reveal,.misk-reveal{opacity:1!important;transform:none!important;filter:none!important}
  .misk-particles,.misk-cursor{display:none!important}
}
@media (hover:none),(pointer:coarse){.misk-cursor{display:none}}
@media (max-width:900px){
  /* site.css clips the hero on small screens; let the night stage span edge to edge */
  .hero.wrap{width:100%;padding-inline:20px}
  .hero::before,.hero::after,.hero .misk-aurora,.hero .misk-spotlight,.hero .misk-particles{inset-inline:0;width:100%}
}
@media (max-width:700px){
  .misk-aurora i{filter:blur(50px)}
  .misk-mark{inset:2% 4% auto auto;width:80%}
}

/* ---------- «ثبّت التطبيق» prompt ---------- */
.misk-install{position:fixed;z-index:250;left:24px;bottom:24px;width:min(470px,calc(100vw - 32px));display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:18px 18px 18px 20px;border-radius:24px;color:#eaf6f1;
  background:radial-gradient(120% 140% at 100% 0%,rgba(16,185,138,.35),transparent 60%),linear-gradient(160deg,#06241d,#03140f);border:1px solid rgba(216,179,106,.28);box-shadow:0 40px 80px -30px rgba(0,0,0,.7);
  opacity:0;transform:translateY(30px) scale(.96);transition:opacity .5s var(--ease-out),transform .6s var(--ease-out)}
.misk-install.is-in{opacity:1;transform:none}
.misk-install .mi-art{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);animation:misk-float 4s var(--ease-io) infinite alternate}
.misk-install .mi-art img{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 8px 16px rgba(16,185,138,.6))}
.misk-install strong{display:block;font-size:18px;color:#fff}
.misk-install .mi-copy>span{display:block;font-size:14px;line-height:1.7;color:rgba(234,246,241,.72);margin-top:2px}
.misk-install .mi-actions{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.misk-install .mi-play{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:12px;background:#000;border:1px solid rgba(255,255,255,.25);color:#fff;line-height:1.1;transition:transform .3s var(--ease-out),border-color .3s}
.misk-install .mi-play:hover{transform:translateY(-2px);border-color:var(--aqua)}
.misk-install .mi-play svg{width:22px;height:22px;fill:var(--aqua)}
.misk-install .mi-play span{display:flex;flex-direction:column;font-weight:800;font-size:16px;direction:ltr;text-align:left}
.misk-install .mi-play small{font-size:10px;font-weight:600;opacity:.75;direction:rtl}
.misk-install .mi-later{background:none;border:0;color:rgba(234,246,241,.7);text-decoration:underline;cursor:pointer;padding:6px}
.misk-install .mi-x{position:absolute;top:8px;left:10px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:#fff;font-size:18px;line-height:1;cursor:pointer}
.misk-install .mi-qr{display:grid;justify-items:center;gap:4px}
.misk-install .mi-qr canvas{width:92px;height:92px;border-radius:10px;image-rendering:pixelated}
.misk-install .mi-qr small{font-size:11px;color:rgba(234,246,241,.6)}
.misk-install.is-mobile{left:12px;right:12px;bottom:12px;width:auto;grid-template-columns:auto 1fr}
#misk-install-title{font-size:18px!important}
body .misk-install :is(.mi-x,.mi-later,.mi-play){min-height:0!important}
body .misk-install .mi-x{min-height:30px!important;padding:0!important}
@media (prefers-reduced-motion:reduce){.misk-install{transition:none}.misk-install .mi-art{animation:none}}

/* Compact footers (signup, small tool pages): one calm full-width band, no monument wordmark. */
.signup-footer{width:100%!important;max-width:none!important;margin:48px 0 0!important;padding:22px max(16px,calc((100% - 1140px)/2))!important;
  display:flex!important;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;font-size:13.5px!important;
  background:linear-gradient(180deg,var(--night-2),var(--night))!important;border-top:1px solid rgba(216,179,106,.18)}
.signup-footer a,.signup-footer span{color:rgba(234,246,241,.78)!important;font-size:13.5px!important}
.signup-footer a:hover{color:var(--aqua)!important}
.signup-footer .misk-wordmark{display:none}
@media (max-width:640px){.signup-footer{justify-content:center;text-align:center}}

/* ---------- Contextual upsell card ---------- */
.misk-upsell{position:fixed;z-index:245;left:24px;bottom:24px;width:min(400px,calc(100vw - 32px));padding:20px 20px 16px;border-radius:24px;overflow:hidden;isolation:isolate;color:#eaf6f1;
  background:linear-gradient(160deg,#0a3328,#03140f 70%);border:1px solid rgba(216,179,106,.3);box-shadow:0 40px 90px -30px rgba(0,0,0,.75);
  opacity:0;transform:translateY(24px) scale(.97);transition:opacity .5s var(--ease-out),transform .6s var(--ease-out)}
.misk-upsell.is-in{opacity:1;transform:none}
.misk-upsell .mu-glow{position:absolute;z-index:-1;inset:-40% -30% auto auto;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(53,240,208,.35),transparent 65%);animation:misk-drift 12s var(--ease-io) infinite alternate}
.misk-upsell .mu-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.misk-upsell .mu-head img{filter:drop-shadow(0 6px 14px rgba(16,185,138,.6))}
.misk-upsell .mu-head small{display:block;color:var(--gold-2);font-weight:700;font-size:12px}
.misk-upsell .mu-head strong{display:block;font-size:19px;color:#fff;line-height:1.35}
.misk-upsell .mu-text{margin:0 0 12px;font-size:14.5px!important;line-height:1.85;color:rgba(234,246,241,.8)}
.misk-upsell .mu-list{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.misk-upsell .mu-list li{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  opacity:0;transform:translateX(-14px);transition:opacity .5s var(--ease-out),transform .6s var(--ease-out);transition-delay:calc(.25s + var(--i) * .12s)}
.misk-upsell.is-in .mu-list li{opacity:1;transform:none}
.misk-upsell .mu-list span{font-size:18px}
.misk-upsell .mu-list b{font-size:14px!important;color:#fff}
.misk-upsell .mu-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.misk-upsell .mu-cta{flex:1;display:inline-flex;justify-content:center;align-items:center;padding:12px 18px;border-radius:14px;font-weight:900;font-size:15px!important;color:#03140f;
  background:linear-gradient(135deg,#35f0d0,#10b98a);box-shadow:0 14px 30px -14px rgba(53,240,208,.9);transition:transform .3s var(--ease-out)}
.misk-upsell .mu-cta:hover{transform:translateY(-2px)}
.misk-upsell .mu-later{background:none;border:0;color:rgba(234,246,241,.65);text-decoration:underline;cursor:pointer;font-size:13.5px!important}
.misk-upsell .mu-note{margin:10px 0 0;font-size:12px!important;color:rgba(234,246,241,.5)}
.misk-upsell .mu-x{position:absolute;top:10px;left:12px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;font-size:18px;cursor:pointer}
body .misk-upsell :is(.mu-x,.mu-later,.mu-cta){min-height:0!important}
@media (max-width:560px){.misk-upsell{left:12px;right:12px;bottom:12px;width:auto}}
@media (prefers-reduced-motion:reduce){.misk-upsell,.misk-upsell .mu-list li{transition:none}.misk-upsell .mu-glow{animation:none}}