/* KDNCE site. Tokens and layout from Claude Design "KDNCE Promo Mac.dc.html" (project c19a60ca). Flat: no shadows, no bevels. */
@font-face{font-family:"Archivo Black";src:url(/fonts/ArchivoBlack-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url(/fonts/Manrope-Variable.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/IBMPlexMono-SemiBold.woff2) format("woff2");font-weight:500 600;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/IBMPlexMono-Bold.woff2) format("woff2");font-weight:700 800;font-display:swap}

:root{
  --bg:#020A0A;--tile:#05070A;--off:#0C1015;--edge:#1D2C35;--card:#040E0F;
  --c1:#40E4F6;--c2:#24A0F0;--c3:#2E68FF;--lime:#A6F04A;--violet:#7C5CE0;--violetL:#B6A2FF;
  --ink:#F2F7FC;--ink2:#BCD4E4;--ink3:#D2E4F0;--body2:#9CB6C4;--mute:#6C8AA2;--faint:#3C5266;
  --line:rgba(64,228,246,.08);--line2:rgba(64,228,246,.18);--ring:rgba(64,228,246,.12);
  --cta:linear-gradient(135deg,var(--c1),var(--c2) 55%,var(--c3));
  --disp:"Archivo Black",sans-serif;--ui:Manrope,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;
  --pad:clamp(16px,5vw,56px);--sec:clamp(64px,9vw,128px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:500 16px/1.6 var(--ui);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,canvas{display:block;max-width:100%}
a{color:var(--c1)}a:hover{color:#BFF6FC}
::selection{background:var(--c2);color:var(--bg)}
:focus-visible{outline:2px solid var(--c1);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--pad)}
section,footer{border-top:1px solid var(--line)}
.sec{padding-block:var(--sec);display:flex;flex-direction:column;gap:clamp(40px,5vw,72px)}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(40px,5vw,80px);align-items:center}
.split.end{align-items:end}
.copy{display:flex;flex-direction:column;gap:22px;min-width:0}
.center{align-items:center;text-align:center}

/* Type */
.eyebrow{font:700 12px/1.3 var(--mono);letter-spacing:.2em;color:var(--c1)}
h1{margin:0;font:400 clamp(40px,6.4vw,90px)/.98 var(--disp);letter-spacing:-.015em;max-width:13ch;text-wrap:balance}
h2{margin:0;font:400 clamp(32px,4.4vw,58px)/1.02 var(--disp);letter-spacing:-.01em;text-wrap:balance}
.lede{margin:0;font:500 clamp(16px,1.35vw,18.5px)/1.6 var(--ui);color:var(--ink2);max-width:40ch;text-wrap:pretty}
.center .lede{max-width:46ch}
.label{font:700 11px/1.3 var(--mono);letter-spacing:.16em;color:var(--mute)}

/* Nav */
.nav{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.nav .wrap{height:64px;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.brand svg{width:30px;height:30px;flex:none}
.brand span{font:400 20px/1 var(--disp);letter-spacing:.04em}
.nav .grow{flex:1}
.navlink{font:700 11px/1 var(--mono);letter-spacing:.14em;color:var(--ink2);text-decoration:none;white-space:nowrap}
.navlink:hover{color:var(--c1)}
@media (max-width:420px){.navlink{display:none}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 26px;border-radius:12px;font:800 13px/1 var(--mono);letter-spacing:.16em;text-decoration:none;white-space:nowrap;border:0;cursor:pointer}
.btn-cta{background:var(--cta);color:#02131A}
.btn-cta:hover{filter:brightness(1.12);color:#02131A}
.btn-line{border:1px solid rgba(64,228,246,.3);color:var(--ink3);font-weight:700;font-size:12px;letter-spacing:.12em;padding:0 22px;background:none}
.btn-line:hover{border-color:var(--c1);color:var(--ink)}
.btn-sm{height:38px;padding:0 16px;border-radius:10px;font-size:11px;letter-spacing:.14em}
.row{display:flex;flex-wrap:wrap;gap:12px}
.center .row{justify-content:center}

/* Hero */
.hero .wrap{padding-top:clamp(20px,4vw,56px);padding-bottom:clamp(64px,8vw,112px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(16px,2.2vw,26px)}
/* R1 draws its mark in the middle of a 1600 x 900 canvas; show only that part so the form stays on the first screen. */
.hero .r1{width:min(280px,58vw);aspect-ratio:800/634;overflow:hidden;flex:none}
.hero .r1 kd-render{width:200%;margin-left:-50%;margin-top:-16.25%}
.hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(40px,5vw,80px);align-items:center;width:100%}
.hero-grid > .copy{align-items:center;text-align:center;gap:clamp(16px,2.2vw,24px)}
.hero-grid h1{max-width:12ch;font-size:clamp(40px,5.6vw,80px)}
.hero .shotwide{width:100%;margin-top:clamp(24px,4vw,56px)}

/* Beta application */
.apply{width:100%;max-width:560px;text-align:left;border:1px solid var(--ring);border-radius:18px;background:var(--card);padding:clamp(18px,2.4vw,26px);display:flex;flex-direction:column;gap:14px}
.apply-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.apply-head b{font:400 18px/1.2 var(--disp);color:var(--ink)}
.spots{font:700 11px/1 var(--mono);letter-spacing:.14em;color:var(--lime);white-space:nowrap}
.spots::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--lime);margin-right:8px;vertical-align:0}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:520px){.fields{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
.field span{font:700 10px/1 var(--mono);letter-spacing:.16em;color:var(--mute)}
.field input,.field select{width:100%;height:46px;border-radius:10px;border:1px solid var(--edge);background:var(--tile);color:var(--ink);font:600 16px/1 var(--ui);padding:0 14px;appearance:none;-webkit-appearance:none}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);background-position:calc(100% - 20px) 20px,calc(100% - 15px) 20px;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.field input::placeholder{color:var(--faint)}
.field input:focus,.field select:focus{outline:none;border-color:var(--c1)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.apply .btn{width:100%}
.apply .fine{margin:0;font:500 13px/1.5 var(--ui);color:var(--mute)}
.apply .msg{margin:0;font:600 14px/1.5 var(--ui);color:var(--ink3);min-height:0}
.apply .msg:empty{display:none}
.apply .msg.err{color:#FF97AC}
.apply.done .fields,.apply.done .btn,.apply.done .fine{display:none}
.apply.done .msg{font:400 20px/1.3 var(--disp);color:var(--ink)}

/* Stats and lists */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:20px 24px}
.stat{display:flex;flex-direction:column;gap:9px;padding-top:14px;border-top:1px solid var(--line2)}
.stat b{font:400 clamp(32px,3.4vw,46px)/1 var(--disp);color:var(--ink)}
.stat span{font:700 11px/1.35 var(--mono);letter-spacing:.14em;color:var(--mute)}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.ticks li{display:flex;gap:13px;align-items:baseline;font:600 16px/1.45 var(--ui);color:var(--ink3)}
.ticks li::before{content:"";width:9px;height:9px;flex:none;border-radius:2.5px;background:var(--lime);transform:translateY(-1px)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{height:34px;display:inline-flex;align-items:center;padding:0 13px;border-radius:9px;border:1px solid rgba(64,228,246,.24);font:700 11px/1 var(--mono);letter-spacing:.12em;color:var(--ink3)}
.chip.v{border-color:rgba(182,162,255,.42);color:#D9CEFF}
.stack{display:flex;flex-direction:column;gap:12px}

/* Renders */
.frame{border-radius:22px;overflow:hidden;border:1px solid var(--ring);background:var(--bg)}
kd-render{display:block;width:100%}
.media{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:center;min-width:0}
.media .grow{flex:1 1 280px;max-width:480px}
.media .phone-col{flex:0 1 240px;width:100%;max-width:260px}
.plates{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px}

/* Device frames holding real captures */
.dev{position:relative;margin:0;background:var(--off);box-shadow:inset 0 0 0 1.5px var(--edge)}
.dev img,.dev video{width:100%;height:auto;background:var(--tile)}
.dev-mac{border-radius:14px;overflow:hidden}
.dev-mac .bar{height:30px;display:flex;align-items:center;gap:7px;padding:0 12px;border-bottom:1px solid var(--edge)}
.dev-mac .bar i{width:10px;height:10px;border-radius:5px;background:var(--edge)}
.dev-mac .bar b{flex:1;text-align:center;font:700 10px/1 var(--mono);letter-spacing:.2em;color:var(--mute);margin-right:48px}
.dev-mac img,.dev-mac video{aspect-ratio:16/10}
.dev-phone{border-radius:17%/7.8%;padding:3.2%}
.dev-phone img,.dev-phone video{aspect-ratio:1206/2622;border-radius:14%/6.4%;object-fit:cover}
.dev-phone.land{border-radius:7.8%/17%;padding:1.6%}
.dev-phone.land img{aspect-ratio:2622/1206;border-radius:6.4%/14%}
.dev-ipad{border-radius:24px;padding:1.6%}
.dev-ipad img,.dev-ipad video{aspect-ratio:2752/2064;border-radius:14px;object-fit:cover}
.zoom{all:unset;display:block;width:100%;cursor:zoom-in;border-radius:inherit}
.zoom:focus-visible{outline:2px solid var(--c1);outline-offset:4px}

/* A row of real screenshots under a render */
.shots{display:flex;flex-direction:column;gap:14px}
.shots-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.shots-grid.phones{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));max-width:900px}
.shot{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.shot .dev-mac .bar{height:22px}
.shot .dev-mac .bar i{width:8px;height:8px}
.shot figcaption{font:700 10.5px/1.4 var(--mono);letter-spacing:.14em;color:var(--mute)}
.shot figcaption b{color:var(--ink3);font-weight:700}
.real{display:inline-flex;align-items:center;gap:8px}
.real::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--lime)}

/* Chord pads (design graphic) */
.chordpads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%}
.cp{aspect-ratio:1/1;border-radius:18px;padding:16px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:8px;min-width:0;overflow:hidden;background:rgba(124,92,224,.16);border:1px solid rgba(182,162,255,.35)}
.cp.on{background:linear-gradient(160deg,#9A80F0,#5236B8);border-color:transparent}
.cp b{font:400 clamp(15px,1.5vw,20px)/1 var(--disp);white-space:nowrap}
.cp span{font:700 10px/1.3 var(--mono);letter-spacing:.06em;color:#C9B8F5}
.cp.on span{color:#F2EEFF}

/* Gear cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px}
.card{display:flex;flex-direction:column;gap:12px;padding:26px 24px;border-radius:18px;background:var(--card);border:1px solid rgba(64,228,246,.1)}
.card::before{content:"";width:9px;height:9px;border-radius:2.5px;background:var(--lime)}
.card b{font:400 21px/1.1 var(--disp)}
.card p{margin:0;font:500 15px/1.55 var(--ui);color:var(--body2);text-wrap:pretty}

/* Footer */
.foot{padding-top:clamp(64px,8vw,112px);padding-bottom:48px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.foot > svg{width:64px;height:64px}
.foot .word{font:400 clamp(34px,4vw,48px)/1 var(--disp);letter-spacing:.04em}
.madeby{display:flex;flex-direction:column;align-items:center;gap:12px}
.madeby span{font:700 10px/1 var(--mono);letter-spacing:.2em;color:var(--mute)}
.madeby img{height:34px;width:auto;opacity:.88}
.foot p{margin:0;font:500 14px/1.5 var(--ui);color:var(--mute)}
.legal{margin-top:40px;display:flex;align-items:center;gap:10px;font:600 11px/1 var(--mono);letter-spacing:.14em;color:var(--faint)}
.legal img{height:18px;width:auto;opacity:.4}

/* Enlarged screenshot */
dialog.lb{border:0;padding:0;background:transparent;max-width:min(96vw,1600px);max-height:94vh;overflow:visible}
dialog.lb::backdrop{background:rgba(2,10,10,.92)}
dialog.lb img{max-height:88vh;width:auto;max-width:100%;border-radius:12px;border:1px solid var(--edge)}
dialog.lb p{margin:10px 0 0;text-align:center;font:700 11px/1.4 var(--mono);letter-spacing:.14em;color:var(--ink2)}
dialog.lb button{position:absolute;top:-14px;right:-14px;width:40px;height:40px;border-radius:20px;border:1px solid var(--edge);background:var(--tile);color:var(--ink);font:700 18px/1 var(--mono);cursor:pointer}
@media (max-width:700px){dialog.lb button{top:auto;bottom:-52px;right:50%;transform:translateX(50%)}}

/* Real PRO plug-in racks (cropped from the app, no device frame) */
.racks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px;align-items:start}
.rack{border-radius:14px;overflow:hidden;border:1px solid var(--edge);background:var(--tile)}
.rack img{width:100%;height:auto}
.shots.mastering{max-width:560px;margin:0 auto;width:100%}

/* Rail: a horizontal, snap-scrolling row of real captures at one height (swipe, or the arrows) */
.rail{display:flex;flex-direction:column;gap:14px;--rh:clamp(210px,30vw,380px)}
.rail.tall{--rh:clamp(300px,42vw,520px)}
.rail-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rail-nav{display:flex;gap:8px}
.rail-nav button{width:40px;height:40px;border-radius:12px;border:1px solid rgba(64,228,246,.3);background:none;color:var(--ink3);font:700 16px/1 var(--mono);cursor:pointer}
.rail-nav button:hover:not(:disabled){border-color:var(--c1);color:var(--ink)}
.rail-nav button:disabled{opacity:.3;cursor:default}
@media (hover:none){.rail-nav{display:none}}
.rail-track{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:0;scrollbar-width:none;padding-bottom:2px;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
.rail-track::-webkit-scrollbar{display:none}
.rail-track.at-end{-webkit-mask-image:none;mask-image:none}
.rail-card{flex:none;scroll-snap-align:start;margin:0;display:flex;flex-direction:column;gap:10px;width:min(calc(var(--rh) * var(--ar)),84vw)}
.rail-card figcaption{font:700 10.5px/1.4 var(--mono);letter-spacing:.14em;color:var(--ink3)}
.rail-card .dev-mac .bar{height:22px}
.rail-card .dev-mac .bar i{width:8px;height:8px}