/* The Spearhead Color System overlay, copied verbatim from the live creators-store page
   (the raw-HTML block's own <style>). Only the wrapper rules are dropped: this site supplies
   the headline column, so the variables that lived on .scs-presale now sit on .scs-stage. */
.scs-stage{--scs-gold:#B8965A;--scs-white:#FFFFFF;--scs-gray:#8b8f96;--scs-border:#232327;color:var(--scs-white);font-family:'Poppins',Helvetica,Arial,Verdana,sans-serif}
.scs-stage *,.scs-stage *::before,.scs-stage *::after{box-sizing:border-box}
.scs-stage{position:relative;min-width:0;height:640px;perspective:2000px}
.scs-lens{position:absolute;z-index:0;top:50%;right:-14%;width:600px;height:600px;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle at 38% 34%,rgba(110,160,230,0.16),transparent 40%),radial-gradient(circle at 64% 70%,rgba(184,150,90,0.13),transparent 44%),repeating-radial-gradient(circle at 50% 50%,#11151e 0 21px,#090b10 21px 42px),radial-gradient(circle at 50% 50%,#131822 0%,#070809 62%,#050507 100%);box-shadow:inset 0 0 140px 40px #000,inset 0 0 0 16px #0a0c11,inset 0 0 0 18px rgba(120,150,200,0.05);filter:blur(2.5px) saturate(1.08);opacity:0.96}
.scs-lens::before{content:"";position:absolute;inset:24%;border-radius:50%;background:radial-gradient(circle at 46% 42%,#0a0d12 0%,#050608 70%);box-shadow:inset 0 0 50px 10px #000,0 0 60px 6px rgba(74,158,255,0.10)}
.scs-lens::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 206deg,transparent 0deg,rgba(130,175,255,0.26) 22deg,transparent 56deg),conic-gradient(from 38deg,transparent 0deg,rgba(200,165,110,0.14) 16deg,transparent 44deg);mix-blend-mode:screen}
.scs-card{--acc:#4a9eff;position:absolute;border-radius:15px;padding:15px 17px 17px;background:linear-gradient(180deg,rgba(26,28,35,0.94) 0%,rgba(11,12,16,0.96) 100%);border:1px solid #2b2f3a;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 30px 64px rgba(0,0,0,0.55),0 8px 20px rgba(0,0,0,0.4),0 0 0 1px rgba(255,255,255,0.05) inset}
.scs-card--blue{--acc:#4a9eff}.scs-card--red{--acc:#ff6b6b}.scs-card--green{--acc:#50c878}.scs-card--orange{--acc:#f0a500}
.scs-card__head{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.scs-card__bar{width:4px;height:23px;border-radius:2px;background:var(--acc);box-shadow:0 0 16px 1px color-mix(in srgb,var(--acc) 80%,transparent),0 0 4px var(--acc)}
.scs-card__num{color:var(--acc);font-size:12px;font-weight:600;letter-spacing:0.05em;text-shadow:0 0 12px color-mix(in srgb,var(--acc) 55%,transparent)}
.scs-card__title{color:#e8eaee;font-size:11.5px;font-weight:600;letter-spacing:0.13em}
.scs-card__field{font-size:11px;color:#6b7079;letter-spacing:0.05em;margin-bottom:9px}
.scs-card--look{z-index:2;top:16px;right:5%;width:248px;max-width:66%;transform:rotateY(-15deg) rotateX(5deg) rotateZ(1deg) translateZ(-30px);transform-origin:center right}
.scs-card--pretech{z-index:3;top:156px;right:11%;width:246px;max-width:66%;transform:rotateY(-12deg) rotateX(4deg) rotateZ(0.5deg) translateZ(0);transform-origin:center right}
.scs-card--post{z-index:4;top:300px;right:5%;width:248px;max-width:66%;transform:rotateY(-10deg) rotateX(3deg) rotateZ(-0.5deg) translateZ(30px);transform-origin:center right}
.scs-card--input{z-index:5;top:50%;left:-4%;width:316px;max-width:80%;transform:translateY(-50%) rotateY(-7deg) rotateX(2.5deg) rotateZ(-1.5deg) translateZ(82px);transform-origin:center left}
.scs-menu{border-radius:11px;overflow:hidden;background:linear-gradient(180deg,#15171e,#0e1015);border:1px solid #2a2f3a;box-shadow:0 18px 44px rgba(0,0,0,0.6),0 0 0 1px rgba(74,158,255,0.16)}
.scs-menu__item{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;font-size:13px;font-weight:500;color:#aeb3bb}
.scs-menu__item+.scs-menu__item{border-top:1px solid #1b1e25}
.scs-menu__item i{font-style:normal;color:#6b7079;font-size:10px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;margin-right:8px}
.scs-menu__item--sel{background:linear-gradient(90deg,rgba(74,158,255,0.16),rgba(74,158,255,0.04));color:#fff;box-shadow:inset 3px 0 0 #4a9eff}
.scs-menu__item--sel i{color:#9cc6ff}
.scs-check{color:#4a9eff;font-size:13px;font-weight:600}
.scs-looks{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.scs-look__sw{height:46px;border-radius:7px;border:1px solid rgba(255,255,255,0.08)}
.scs-look__name{margin-top:6px;font-size:10px;color:#9197a0;text-align:center;letter-spacing:0.02em}
.scs-look--sel .scs-look__sw{box-shadow:0 0 0 2px #50c878,0 0 14px rgba(80,200,120,0.45)}
.scs-look--sel .scs-look__name{color:#cdeedd}
.scs-sl+.scs-sl{margin-top:12px}
.scs-sl__row{display:flex;justify-content:space-between;align-items:baseline}
.scs-sl__label{color:#c5c9cf;font-size:12px;font-weight:500;letter-spacing:0.02em}
.scs-sl__val{color:#787d86;font-size:11px;font-variant-numeric:tabular-nums}
.scs-sl__track{position:relative;margin-top:8px;height:4px;border-radius:3px;background:#262a33}
.scs-sl__fill{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:linear-gradient(90deg,#f0a500,var(--acc))}
.scs-sl__knob{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;transform:translate(-50%,-50%);background:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.5),0 0 9px color-mix(in srgb,var(--acc) 55%,transparent)}
.scs-card--post .scs-sl__fill{background:linear-gradient(90deg,#f0a500,#ff6b6b)}
@media (min-width:851px) and (max-width:1140px){.scs-presale__inner{gap:28px}.scs-lens{width:420px;height:420px;right:-10%}.scs-stage{height:640px}.scs-card--input{left:0;top:50%;width:300px;z-index:2;transform:translateY(-50%) rotateY(-7deg) rotateX(2.5deg) rotateZ(-1.5deg)}.scs-card--look{right:5%;left:auto;top:170px;width:248px;z-index:3;transform:rotateY(-15deg) rotateX(5deg) rotateZ(1deg)}.scs-card--pretech{right:11%;left:auto;top:295px;width:246px;z-index:4;transform:rotateY(-12deg) rotateX(4deg)}.scs-card--post{right:5%;left:auto;top:420px;bottom:auto;width:248px;z-index:5;transform:rotateY(-10deg) rotateX(3deg)}}
@media (min-width:601px) and (max-width:850px){.scs-presale{padding:64px 32px}.scs-presale__inner{grid-template-columns:1fr;gap:40px}.scs-presale__content{order:1;max-width:none}.scs-stage{order:2;height:640px;perspective:1600px}.scs-lens{left:50%;right:auto;transform:translate(-50%,-50%);width:460px;height:460px}.scs-card--input{left:11%;top:50%;bottom:auto;width:300px;z-index:2;transform:translateY(-50%) rotateY(-7deg) rotateX(2.5deg) rotateZ(-1.5deg)}.scs-card--look{right:12%;left:auto;top:170px;width:248px;z-index:3;transform:rotateY(-15deg) rotateX(5deg) rotateZ(1deg)}.scs-card--pretech{right:18%;left:auto;top:295px;width:246px;z-index:4;transform:rotateY(-12deg) rotateX(4deg)}.scs-card--post{right:12%;left:auto;top:420px;bottom:auto;width:248px;z-index:5;transform:rotateY(-10deg) rotateX(3deg)}.scs-presale::before{right:-30%}}
@media (max-width:600px){.scs-presale{padding:64px 24px}.scs-presale__inner{grid-template-columns:1fr;gap:40px}.scs-presale__content{order:1;max-width:none}.scs-stage{order:2}.scs-actions{flex-direction:column;align-items:stretch;gap:14px}.scs-meta{justify-content:center;width:100%}.scs-cta{display:block;text-align:center;width:100%}.scs-menu__item:nth-child(n+5){display:none}.scs-stage{height:400px;perspective:1400px}.scs-lens{right:-28%;width:360px;height:360px;opacity:0.8}.scs-card--post{display:block;z-index:1;top:0;left:50%;right:auto;bottom:auto;width:282px;max-width:92%;transform:translateX(-50%) rotateY(-5deg) rotateX(2deg)}.scs-card--look{z-index:2;top:48px;left:50%;right:auto;bottom:auto;width:282px;max-width:92%;transform:translateX(-50%) rotateY(-5deg) rotateX(2deg)}.scs-card--pretech{display:block;z-index:3;top:96px;left:50%;right:auto;bottom:auto;width:282px;max-width:92%;transform:translateX(-50%) rotateY(-5deg) rotateX(2deg)}.scs-card--input{z-index:4;top:144px;bottom:auto;left:50%;right:auto;width:282px;max-width:92%;transform:translateX(-50%) rotateY(-5deg) rotateX(2deg);-webkit-mask-image:linear-gradient(180deg,#000 58%,rgba(0,0,0,0) 96%);mask-image:linear-gradient(180deg,#000 58%,rgba(0,0,0,0) 96%)}}

/* Our page's own adjustments to the copied block, kept separate from it.
   The lens is dialled back to a hint, and the four panels are laid out in pixels inside a fixed
   620px stage that scales as one, so the input list always overlaps the three tiles by the same
   amount at every width instead of drifting away from them. */
.scs-stage .scs-lens { opacity: .38; filter: blur(4px) saturate(.7) brightness(.5); }
@media (min-width: 601px) {
  .scs-stage { --fit: 1; width: 620px; max-width: 100%; margin-inline: auto; height: calc(640px * var(--fit)); transform-style: preserve-3d; transition: transform .3s cubic-bezier(.2,.8,.2,1);
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--fit)); transform-origin: top center; }
  .scs-lens { left: 50%; right: auto; top: 46%; width: 460px; height: 460px; transform: translate(-50%, -50%); }
  .scs-card--input { left: 0; right: auto; top: 50%; bottom: auto; width: 316px; max-width: none; z-index: 5; transform: translateY(-50%) rotateY(-7deg) rotateX(2.5deg) rotateZ(-1.5deg) translateZ(82px); transform-origin: center left; }
  .scs-card--look { right: 0; left: auto; top: 8px; width: 248px; max-width: none; z-index: 2; transform: rotateY(-15deg) rotateX(5deg) rotateZ(1deg) translateZ(-30px); transform-origin: center right; }
  .scs-card--pretech { right: 62px; left: auto; top: 152px; width: 246px; max-width: none; z-index: 3; transform: rotateY(-12deg) rotateX(4deg) rotateZ(.5deg) translateZ(0); transform-origin: center right; }
  .scs-card--post { right: 0; left: auto; top: 300px; bottom: auto; width: 248px; max-width: none; z-index: 4; transform: rotateY(-10deg) rotateX(3deg) rotateZ(-.5deg) translateZ(30px); transform-origin: center right; }
}
/* the stage is 620px of fixed composition; --fit shrinks the whole thing to the column it lands in */
@media (min-width: 601px) and (max-width: 700px) { .scs-stage { --fit: .85; } }
@media (min-width: 1000px) and (max-width: 1120px) { .scs-stage { --fit: .70; } }
@media (min-width: 1121px) and (max-width: 1320px) { .scs-stage { --fit: .84; } }

/* the lens reaches past the column on phones; clip it sideways so the page never scrolls left-right */
#color-system { overflow-x: clip; }

/* the store's Color System buttons: Pre-order, Full details, Teaser on one line (Brady, 21 Oct 2026) */
.scs-trio { flex-wrap: nowrap; gap: .6rem; }
.scs-trio form { display: contents; }
.scs-trio .btn { padding: .9rem 1.15rem; font-size: .9rem; gap: .45rem; }
.scs-trio__short { display: none; }
@media (min-width: 900px) and (max-width: 1320px) {
  .scs-trio__long { display: none; } .scs-trio__short { display: inline; }
  .scs-trio .btn { padding: .85rem 1rem; }
}

/* the store's Color System section keeps the stage beside the text down to 900px, instead of
   dropping it below and leaving a gap (Brady, 21 Oct 2026); the left side tightens to make room */
@media (min-width: 900px) and (max-width: 999px) {
  #color-system .flag { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 2rem; }
  .scs-stage { --fit: .76; }
  .scs-trio { gap: .45rem; }
  .scs-trio .btn { padding: .8rem .85rem; font-size: .85rem; }
}
@media (min-width: 900px) and (max-width: 1320px) {
  #color-system .flag h2 { font-size: clamp(2.6rem, 4.6vw, 4.4rem); }
  #color-system .offer { margin: 1.25rem 0 1.1rem; }
  #color-system .offer__price b { font-size: clamp(2rem, 3.2vw, 2.8rem); }
  #color-system .offer__lines { font-size: .9rem; }
  #color-system .flag__desc, #color-system .flag__note { font-size: .95rem; }
  #color-system .flag__specs { gap: .75rem 1.5rem; margin-top: 1.4rem; }
  #color-system .flag__specs dd { font-size: 1.05rem; }
}
@media (max-width: 600px) {
  .scs-trio { display: grid; grid-template-columns: 1fr 1fr; }
  .scs-trio .btn { justify-content: center; }
  .scs-trio > form > .btn, .scs-trio > .btn:first-child { grid-column: 1 / -1; }
  .scs-trio__long { display: none; } .scs-trio__short { display: inline; }
}

/* live ink behind the Color System (public/js/ink.js; Brady, 21 Oct 2026). Without WebGL2 the section
   keeps a still glow in the same colors; with it, the canvas sits under the content. */
[data-skin] .section--black[data-ink], .section--black[data-ink] { isolation: isolate; touch-action: pan-y;
  background: radial-gradient(34% 44% at 18% 70%, rgba(60,203,177,.32), transparent 70%),
              radial-gradient(30% 40% at 78% 28%, rgba(247,148,29,.24), transparent 70%),
              radial-gradient(26% 34% at 55% 92%, rgba(232,70,120,.18), transparent 70%), #000; }
[data-ink] > .ink-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; }
[data-ink] > .wrap { position: relative; z-index: 1; }
/* a soft shade behind the copy column keeps the words readable over bright ink; the right half stays vivid */
[data-ink].ink-on::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.45) 34%, rgba(0,0,0,0) 58%); }
[data-ink].ink-on .flag__desc, [data-ink].ink-on .flag__tag, [data-ink].ink-on .flag__quote { text-shadow: 0 1px 12px rgba(0,0,0,.6); }
/* on a phone the copy covers the whole section, so the shade is stronger and the body copy brighter */
@media (max-width: 899px) {
  [data-ink].ink-on::after { background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.66) 30%, rgba(0,0,0,.66) 75%, rgba(0,0,0,.5)); }
  [data-skin] .section--black[data-ink].ink-on, .section--black[data-ink].ink-on { --ink-2: rgba(255,255,255,.86); --muted: rgba(255,255,255,.72); }
  [data-ink].ink-on .flag p, [data-ink].ink-on .offer, [data-ink].ink-on .scsp-crumb { text-shadow: 0 1px 10px rgba(0,0,0,.75); }
}

/* the paint bucket: a small round button in the section's top right that turns the ink off (the section then
   shows the site's drifting color field, like its neighbors) and back on (Brady, 21 Oct 2026) */
.ink-toggle { position: absolute; z-index: 3; top: 1.25rem; right: max(var(--gutter, 1rem), calc((100% - var(--max, 1400px)) / 2)); width: 40px; height: 40px;
  display: grid; place-items: center; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.45);
  color: #F2F3F5; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s, border-color .2s, color .2s; }
.ink-toggle:hover { background: rgba(0,0,0,.7); border-color: #3CCBB1; color: #3CCBB1; }
.ink-toggle:focus-visible { outline: 2px solid #3CCBB1; outline-offset: 3px; }
.ink-toggle__slash { position: absolute; width: 24px; height: 2px; background: currentColor; border-radius: 2px; transform: rotate(-45deg); opacity: 0; transition: opacity .2s; }
.ink-off .ink-toggle__slash { opacity: 1; }
.ink-off .ink-toggle { color: rgba(255,255,255,.6); }
.scsp-hero > .ink-toggle { top: calc(var(--header-h, 72px) + .75rem); }
[data-ink].ink-off > .ink-canvas, [data-ink].ink-off::after { opacity: 0; }
[data-ink] > .ink-canvas, [data-ink].ink-on::after { transition: opacity .35s; }
@media (max-width: 640px) { .ink-toggle { top: .75rem; right: .75rem; width: 36px; height: 36px; } .scsp-hero > .ink-toggle { top: calc(var(--header-h, 64px) + .5rem); } }