/* ============================================================
   CURBCUT — LEGACY PLATFORM NOTICE
   Tokens, fonts and components are lifted from the Curbcut design
   system (curbcut-home/assets/site.css) so this page reads as part
   of the same site: Apparat for display, Acid Grotesk for text, the
   "curb-cut" ramp corner on cards and buttons, accent wipe on hover.
   ============================================================ */

/* ------------------------------ fonts ------------------------------ */
@font-face{
  font-family:"Apparat";
  src:url("fonts/KMR-Apparat-Regular.woff2") format("woff2"),
      url("fonts/KMR-Apparat-Regular.woff") format("woff");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Acid Grotesk";
  src:url("fonts/FFF-AcidGrotesk-Book.woff2") format("woff2"),
      url("fonts/FFF-AcidGrotesk-Book.woff") format("woff");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Acid Grotesk";
  src:url("fonts/FFF-AcidGrotesk-Bold.woff2") format("woff2"),
      url("fonts/FFF-AcidGrotesk-Bold.woff") format("woff");
  font-weight:700;font-style:normal;font-display:swap;
}

/* ------------------------------ tokens ------------------------------ */
:root{
  --black:#000;--grey:#F0F0F0;--white:#fff;--ink-2:#484848;--ink-3:#767676;
  --explorer:#A3B0D1;--climate:#F5D574;
  --accent:var(--explorer);
  --banner-h:60px;
  --ramp:clamp(30px,6vw,68px);
}

*{box-sizing:border-box;margin:0;padding:0}
/* Components below set explicit display values, which would otherwise beat
   the user-agent rule for [hidden]. */
[hidden]{display:none!important}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  font-family:"Acid Grotesk",system-ui,sans-serif;
  background:var(--black);color:var(--black);
  height:100vh;height:100dvh;overflow:hidden;
}
h1{font-family:"Apparat","Acid Grotesk",sans-serif;text-transform:uppercase;
   font-weight:400;line-height:.92;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ------------------------------ buttons ------------------------------ */
.btn{
  font-family:"Apparat";text-transform:uppercase;font-size:13px;letter-spacing:.01em;
  background:var(--black);color:var(--white);
  padding:12px 20px;border-radius:0 16px 0 16px;
  display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  position:relative;overflow:hidden;z-index:0;
  transition:border-radius .3s ease,transform .2s ease,color .2s ease;
}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);
  transform:translateY(101%);transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.btn:hover{border-radius:16px 0 16px 0;transform:translateY(-2px);color:var(--black)}
.btn:hover::before{transform:translateY(0)}
.btn .dot{width:7px;height:7px;background:var(--climate);flex:0 0 auto}
.btn:hover .dot{background:var(--black)}
.btn.outline{background:transparent;color:var(--black);box-shadow:inset 0 0 0 1.5px var(--black)}
.btn.outline .dot,.btn.outline:hover .dot{background:var(--black)}
.btn.invert{background:var(--white);color:var(--black)}
.btn.invert .dot{background:var(--accent)}
.btn.invert:hover .dot{background:var(--black)}

.ghost{
  font-family:"Apparat";text-transform:uppercase;font-size:12px;letter-spacing:.08em;
  padding:6px 2px;border-bottom:1.5px solid transparent;color:rgba(255,255,255,.72);
  transition:color .2s ease,border-color .2s ease;white-space:nowrap;
}
.ghost:hover{color:var(--white);border-color:var(--accent)}

.linkmore{
  display:inline-flex;align-items:center;gap:10px;font-family:"Apparat";
  text-transform:uppercase;font-size:12px;letter-spacing:.08em;
  margin-top:24px;border-bottom:2px solid transparent;padding-bottom:2px;
  transition:border-color .25s,gap .25s;color:var(--ink-2);
}
.linkmore:hover{border-color:currentColor;gap:16px;color:var(--black)}

/* ------------------------------ banner ------------------------------ */
.banner{
  position:fixed;top:0;left:0;right:0;height:var(--banner-h);z-index:40;
  display:flex;align-items:center;gap:clamp(10px,1.8vw,22px);
  padding:0 clamp(12px,2.2vw,26px);
  background:var(--black);color:var(--white);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.brand{display:flex;align-items:center;flex:0 0 auto;opacity:.95;transition:opacity .2s}
.brand:hover{opacity:1}
.banner-msg{
  display:flex;align-items:center;gap:11px;min-width:0;flex:1 1 auto;
  font-size:14.5px;line-height:1.3;color:rgba(255,255,255,.92);
  text-align:left;padding:6px 0;
}
.banner-msg .long,.banner-msg .short{border-bottom:1.5px solid transparent;transition:border-color .2s}
.banner-msg:hover .long,.banner-msg:hover .short{border-color:rgba(255,255,255,.55)}
.banner-msg .sq{width:9px;height:9px;background:var(--accent);flex:0 0 auto}
.banner-msg .long,.banner-msg .short{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.banner-msg .short{display:none}
.banner-actions{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);flex:0 0 auto}
.banner .btn{padding:9px 15px;font-size:12px}

/* ------------------------------ stage ------------------------------ */
.stage{
  position:absolute;top:var(--banner-h);left:0;right:0;bottom:0;
  background:var(--grey);
}
#demo{width:100%;height:100%;border:0;display:block;background:var(--grey)}
#demo[hidden]{display:none}

.stage-msg{position:absolute;inset:0;display:grid;place-items:center;padding:24px;
  background:var(--grey)}
.stage-msg[hidden]{display:none}
.stage-msg-card{
  background:var(--white);padding:clamp(26px,4vw,44px);max-width:520px;text-align:left;
  border-radius:0 var(--ramp) 0 var(--ramp);
}
.stage-msg-card .lead{font-size:17px;line-height:1.5;margin-bottom:22px;color:var(--ink-2)}

/* ------------------------------ modal ------------------------------ */
.backdrop{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;
  background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  animation:fade .28s ease both;overflow-y:auto;
}
.backdrop[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}

.modal{
  position:relative;outline:none;width:min(880px,100%);background:var(--grey);color:var(--black);
  padding:clamp(30px,4.4vw,52px);
  /* Curb-cut ramp, mirrored so the top-right corner stays square and the
     close button sits squarely in it. */
  border-radius:var(--ramp) 0 var(--ramp) 0;
  animation:rise .42s cubic-bezier(.2,.7,.2,1) both;
  box-shadow:0 30px 70px rgba(0,0,0,.34);
}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.modal-close{
  position:absolute;top:12px;right:12px;width:38px;height:38px;
  display:grid;place-items:center;color:var(--ink-2);
  border-radius:0 12px 0 12px;transition:background .2s,color .2s;
}
.modal-close:hover{background:rgba(0,0,0,.08);color:var(--black)}

.kicker{
  font-family:"Apparat";text-transform:uppercase;font-size:12.5px;letter-spacing:.18em;
  display:flex;align-items:center;gap:11px;margin-bottom:clamp(16px,2.4vw,24px);
  color:var(--ink-2);
}
.kicker .sq{width:11px;height:11px;background:var(--accent);flex:0 0 auto}
.kicker .ln{height:1px;width:42px;background:currentColor;opacity:.5;flex:0 0 auto}
.modal h1{font-size:clamp(30px,4.6vw,48px);max-width:16ch;margin-bottom:clamp(18px,2.6vw,28px)}

.prose{max-width:74ch}
.prose p{font-size:clamp(15px,1.02vw,16.5px);line-height:1.58;color:rgba(0,0,0,.76);
  margin-bottom:15px}
.prose p:last-child{margin-bottom:0}

.modal-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  margin-top:clamp(24px,3.2vw,34px)}

/* ------------------------------ responsive ------------------------------ */
/* The notice runs to four paragraphs, which overflows a short laptop screen.
   Tighten the vertical rhythm rather than let it scroll by default. */
@media (max-height:880px){
  .backdrop{padding:10px}
  .modal{padding-top:clamp(24px,3vw,34px);padding-bottom:clamp(24px,3vw,34px)}
  .modal h1{font-size:clamp(26px,3.4vw,38px);margin-bottom:14px}
  .kicker{margin-bottom:14px}
  .prose p{font-size:15px;line-height:1.45;margin-bottom:11px}
  .modal-cta{margin-top:18px}
  .linkmore{margin-top:14px}
}

@media (max-width:900px){
  .banner-msg .long{display:none}
  .banner-msg .short{display:block}
}
@media (max-width:640px){
  :root{--banner-h:54px}
  .banner{gap:10px;padding:0 12px}
  /* The message itself reopens the explanation, so the separate button and
     the spelled-out language name can go. */
  #whyBtn{display:none}
  #langBtn{font-size:0;letter-spacing:0}
  #langBtn::after{content:attr(data-short);font-size:12px;letter-spacing:.08em}
  .banner-msg{font-size:12.5px;gap:8px}
  .banner-msg .sq{width:8px;height:8px}
  .banner .btn span:not(.dot){display:none}
  .banner .btn{padding:8px 10px;font-size:11.5px}
  .banner .btn::after{content:"Studio \2197";font-family:"Apparat";font-size:12px}
  .modal-cta .btn{width:100%;justify-content:center}
}
@media (max-width:380px){
  .ghost.lang{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .btn:hover{transform:none}
}

/* ------------------------------ loading ------------------------------ */
.stage-loading{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;
  font-family:"Apparat";text-transform:uppercase;font-size:12.5px;letter-spacing:.16em;
  color:var(--ink-3);background:var(--grey);pointer-events:none;
  transition:opacity .4s ease;
}
.stage-loading[hidden]{display:none}
.stage-loading .pulse{width:10px;height:10px;background:var(--accent);
  animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}