/* Layout: the six campaign scenes are the bands; each band's text sits on the scene's dark left side and the
   real product screen sits over the art on the right. Kit logo in the header and footer. Single dark look. */
:root{
  color-scheme:dark;
  --bg:#080c10; --bg2:#0b1016; --panel:#0e141b; --panel2:#131b24;
  --line:#3b4d64; --line-soft:#1f2a37;
  --text:#f5f8fa; --body:#c9d3de; --dim:#9aabbe;
  --blue:#58a9ff; --blue-deep:#2476be; --blue-light:#9dd3ff;
  --teal:#2dd4bf; --amber:#f5b041; --rose:#fb7185; --violet:#a78bfa; --green:#34d399;
  --on-accent:#06121f;
  --display:Inter,"Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --wrap:1216px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--body);font:400 19px/1.55 var(--display);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
h1,h2,h3{color:var(--text);margin:0;text-wrap:balance}
h1{font:900 clamp(46px,6.1vw,88px)/1 var(--display);letter-spacing:-.03em}
h2{font:900 clamp(34px,3.6vw,52px)/1.05 var(--display);letter-spacing:-.025em}
h3{font:800 21px/1.25 var(--display)}
h1 em,h2 em{font-style:normal;color:var(--blue)}
.eyebrow{display:flex;align-items:center;gap:14px;font:700 14px/1.2 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--c,var(--blue));margin:0 0 20px}
.eyebrow::before{content:"";width:34px;height:3px;border-radius:2px;background:currentColor}
.lede{font-size:21px;line-height:1.55;max-width:32em;margin:22px 0 0}
.lede b{color:var(--text);font-weight:700}
section[id]{scroll-margin-top:96px}

/* every clickable lifts and glows in its own colour */
.hv{--c:var(--blue);transition:transform .14s,box-shadow .14s,filter .14s,border-color .14s,color .14s}
.hv:hover,.hv:focus-visible{transform:translateY(-2px);box-shadow:0 0 0 2px var(--c),0 8px 26px -6px var(--c);filter:brightness(1.14);outline:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hv{transition:none}.hv:hover,.hv:focus-visible{transform:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;font:800 18px/1 var(--display);padding:19px 28px;border-radius:10px;border:2px solid var(--c);cursor:pointer;white-space:nowrap}
.btn.solid{background:var(--c);color:var(--on-accent)}
.btn.ghost{background:rgba(8,12,16,.6);color:var(--blue-light)}
.btn.sm{font-size:16.5px;padding:15px 20px}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:rgba(8,12,16,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-soft)}
.top .wrap{display:flex;align-items:center;gap:22px;min-height:84px}
.logo{display:block;border-radius:8px;padding:4px;margin-left:-4px;flex:none}
.logo svg{display:block;width:250px;height:auto}
.byline{font:600 16px/1 var(--display);color:var(--dim);padding-left:18px;border-left:1.5px solid var(--line);white-space:nowrap}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{font:600 16.5px/1 var(--display);color:var(--body);padding:12px 12px;border-radius:8px}
.nav a:hover{color:var(--text)}
.menu{display:none;margin-left:auto;position:relative}
.menu summary{list-style:none;cursor:pointer;font:700 16.5px/1 var(--display);color:var(--text);padding:13px 16px;border:1.5px solid var(--line);border-radius:10px}
.menu summary::-webkit-details-marker{display:none}
.menu .sheet{position:absolute;right:0;top:calc(100% + 10px);width:min(280px,calc(100vw - 32px));background:var(--panel2);border:1.5px solid var(--line);border-radius:12px;padding:10px;display:grid;gap:4px;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.menu .sheet a{font:600 18px/1 var(--display);padding:14px 12px;border-radius:8px;color:var(--text)}
@media (max-width:1180px){.byline{display:none}}
@media (max-width:1040px){.nav{display:none}.menu{display:block}.top .cta{display:none}}
@media (max-width:420px){.logo svg{width:200px}}

/* scene bands: the campaign art, text on its dark left side */
.scene{position:relative;background-color:var(--bg);background-image:linear-gradient(90deg,var(--bg) 0%,rgba(8,12,16,.94) 30%,rgba(8,12,16,.55) 56%,rgba(8,12,16,.18) 100%),var(--art);background-size:cover;background-position:right center;border-top:1px solid var(--line-soft)}
.scene::after{content:"";position:absolute;inset:auto 0 0 0;height:120px;background:linear-gradient(transparent,var(--bg));pointer-events:none}
.scene > .wrap{position:relative;z-index:1}
.hero{min-height:min(760px,92vh);display:flex;align-items:center;border-top:0}
.hero .wrap{width:100%;padding-block:clamp(56px,8vw,110px) clamp(64px,8vw,120px)}
.hero .copy{max-width:600px}
.hero .strip{font:700 16px/1.2 var(--mono);letter-spacing:.24em;color:var(--dim);margin:30px 0 0}
.hero .acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero .fine{font-size:17px;color:var(--dim);margin:20px 0 0}
@media (max-width:980px){
  /* phones and tablets: the scene becomes a picture strip above the words, not a dark gap behind them */
  .scene{background-image:none}
  .scene{--ph:clamp(340px,96vw,520px)}
  .scene::before{content:"";display:block;height:var(--ph);background-image:linear-gradient(180deg,rgba(8,12,16,0) 34%,rgba(8,12,16,.72) 66%,var(--bg) 100%),linear-gradient(180deg,rgba(8,12,16,.7) 0,rgba(8,12,16,0) 70px),linear-gradient(90deg,rgba(8,12,16,.78) 0%,rgba(8,12,16,.35) 48%,rgba(8,12,16,0) 75%),var(--art);background-size:cover;background-position:78% center}
  /* the eyebrow and headline ride up onto the picture's dark lower-left; the rest follows below */
  .scene > .wrap{margin-top:calc(var(--ph) * -0.46 + 37px);position:static}
  /* the label moves to the picture's top-left corner; the headline takes its old place */
  .scene .eyebrow{position:absolute;z-index:2;top:22px;left:clamp(16px,4vw,32px);right:clamp(16px,4vw,32px);margin:0;text-shadow:0 1px 6px rgba(0,0,0,.9)}
  .scene::after{display:none}
  .hero{min-height:0;display:block}
  .hero .wrap{padding-block:4px 44px}
}

.promises{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding-block:8px clamp(48px,6vw,80px)}
.promise{display:flex;align-items:center;gap:16px;background:var(--panel);border:1.5px solid var(--line);border-top:3px solid var(--c);border-radius:12px;padding:20px 22px;font:700 19px/1.35 var(--display);color:var(--text)}
.promise svg{flex:none;color:var(--c)}
@media (max-width:980px){.promises{grid-template-columns:minmax(0,1fr)}}

@media (min-width:981px){
  /* picture sections and the header use the whole browser width; text anchored left over the art's dark side */
  .top .wrap,.scene > .wrap{max-width:1760px;margin-inline:0;padding-inline:clamp(32px,5vw,96px)}
}
.band{padding-block:clamp(64px,8vw,110px)}
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:980px){.split{grid-template-columns:minmax(0,1fr)}.band{padding-block:52px}.scene.band{padding-top:0}.scene.band > .wrap{padding-top:6px}.cards{margin-top:32px}}
.shot{border-radius:14px;border:1.5px solid var(--line);background:var(--panel);overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.9)}
.sub{font:600 15px/1.3 var(--display);color:var(--dim);margin:10px 2px 0}
.ticks{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px;font:600 19px/1.4 var(--display);color:var(--text)}
.ticks li{display:flex;gap:14px;align-items:flex-start}
.ticks li::before{content:"";flex:none;width:12px;height:12px;margin-top:8px;border-radius:3px;background:var(--c,var(--blue))}
.closer{font:700 14px/1.2 var(--mono);letter-spacing:.2em;color:var(--dim);margin:34px 0 0}

.cards{display:grid;gap:18px;margin-top:44px}
.cards.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cards.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1040px){.cards.c4,.cards.c3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cards.c4,.cards.c3,.cards.c2{grid-template-columns:minmax(0,1fr)}}
.card{background:rgba(14,20,27,.92);border:1.5px solid var(--line);border-top:3px solid var(--c);border-radius:12px;padding:24px 24px 26px;min-width:0}
.card .tag{font:700 13px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--c);margin:0 0 14px}
.card p{margin:10px 0 0;font-size:18px;line-height:1.5}
.card.who h3{font-size:26px;line-height:1.2}
.plain{border-top:1px solid var(--line-soft)}

/* launch */
.launch{background:radial-gradient(760px 420px at 50% 0%,rgba(36,118,190,.3),transparent 70%),var(--bg2);border-top:1px solid var(--line-soft)}
.launch .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start;padding-block:clamp(56px,7vw,100px)}
@media (max-width:980px){.launch .wrap{grid-template-columns:minmax(0,1fr)}}
form.ask{background:var(--panel);border:1.5px solid var(--line);border-radius:14px;padding:clamp(20px,3vw,30px);display:grid;gap:16px}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:640px){.row2{grid-template-columns:minmax(0,1fr)}}
label{display:grid;gap:8px;font:700 16px/1.2 var(--display);color:var(--text)}
label small{font:400 15px/1 var(--display);color:var(--dim)}
input,textarea{font:400 18px/1.4 var(--display);color:var(--text);background:#0a0f15;border:1.5px solid var(--line);border-radius:9px;padding:14px;width:100%;min-width:0}
textarea{min-height:110px;resize:vertical}
input:hover,textarea:hover{border-color:var(--blue-light)}
input:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(88,169,255,.35)}
.status{font:600 17px/1.4 var(--display);color:var(--amber);margin:0;min-height:1.4em}
.small{font-size:16px;color:var(--dim);margin:0}
.small a{color:var(--blue-light);text-decoration:underline}

/* footer */
footer{border-top:1px solid var(--line-soft);background:var(--bg)}
footer .wrap{padding-block:48px 28px}
.fgrid{display:grid;grid-template-columns:1.4fr repeat(2,minmax(0,1fr));gap:32px}
@media (max-width:760px){.fgrid{grid-template-columns:minmax(0,1fr)}}
.fgrid h4{font:700 13px/1 var(--mono);letter-spacing:.2em;color:var(--dim);margin:0 0 16px}
.fgrid a:not(.logo){display:block;width:fit-content;font-size:17px;color:var(--body);padding:6px 8px;margin-left:-8px;border-radius:6px}
.fgrid a:not(.logo):hover{color:var(--text)}
.fby{font:600 16px/1 var(--display);color:var(--dim);margin:16px 0 0}
.fstrip{font:700 14px/1.2 var(--mono);letter-spacing:.22em;color:var(--dim);margin:12px 0 0}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line-soft);font-size:15.5px;color:var(--dim)}



/* form extras on the live site */
select{font:400 18px/1.4 var(--display);color:var(--text);background:#0a0f15;border:1.5px solid var(--line);border-radius:9px;padding:14px;width:100%;min-width:0}
select:hover{border-color:var(--blue-light)}
select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(88,169,255,.35)}
[hidden]{display:none!important}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
#launch-check{min-height:65px}
.btn[disabled]{cursor:not-allowed}
.retry{justify-self:start}
/* legal pages */
.legalpage{padding-block:clamp(48px,6vw,88px)}
.legalpage .wrap{max-width:860px}
.legalpage h2{font-size:clamp(26px,2.6vw,34px);margin:44px 0 0}
.legalpage p,.legalpage li{font-size:19px;line-height:1.65;max-width:42em}
.legalpage ul{padding-left:1.2em}
.legalpage .updated{color:var(--dim);font-size:16px;margin-top:14px}
.notfound{min-height:60vh;display:flex;align-items:center}