/* Sword + Pixel splash. Breakpoints: ≤1150 compact desktop, ≤900 stacked, ≤540 phone, ≤359 small phone. */
@font-face{font-family:Poppins;src:url('/assets/poppins-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url('/assets/poppins-500.woff2') format('woff2');font-weight:500;font-display:swap}

:root{--paper:#f5f6f7;--ink:#111618;--line:#d8d9da;--green:#1ab691}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 14px/1.6 Poppins,Arial,sans-serif}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid #047a60;outline-offset:5px}
h1,p{margin:0}
.site{max-width:1440px;margin:auto;border:1px solid var(--line)}

/* Navigation. Side rules stop short of the marker below them. */
.nav{height:86px;border-bottom:1px solid var(--line)}
.nav-inner{height:100%;margin:0 39px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;
 background:linear-gradient(var(--line),var(--line)) left top/1px calc(100% - 22px) no-repeat,linear-gradient(var(--line),var(--line)) right top/1px calc(100% - 22px) no-repeat}
.logo{display:block}
.availability{display:flex;align-items:center;gap:10px;font-size:12px;color:#05090b}
.availability i{width:4px;height:4px;background:var(--green)}

/* Hero */
.hero{--marker-gap:22px;position:relative;isolation:isolate;z-index:1;margin:0 39px;height:770px;display:grid;grid-template-columns:1fr 1fr;align-items:center}
/* Side rules, interrupted around the plus markers. */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
 background-image:linear-gradient(to bottom,transparent var(--marker-gap),var(--line) var(--marker-gap),var(--line) calc(50% - var(--marker-gap)),transparent calc(50% - var(--marker-gap)),transparent calc(50% + var(--marker-gap)),var(--line) calc(50% + var(--marker-gap)),var(--line) calc(100% - var(--marker-gap)),transparent calc(100% - var(--marker-gap))),linear-gradient(to bottom,transparent var(--marker-gap),var(--line) var(--marker-gap),var(--line) calc(50% - var(--marker-gap)),transparent calc(50% - var(--marker-gap)),transparent calc(50% + var(--marker-gap)),var(--line) calc(50% + var(--marker-gap)),var(--line) calc(100% - var(--marker-gap)),transparent calc(100% - var(--marker-gap)));
 background-position:left top,right top;background-size:1px 100%;background-repeat:no-repeat}
.eyebrow{position:absolute;top:10px;left:30px;z-index:3;font-size:12px;line-height:20px;color:var(--green)}
.copy{position:relative;z-index:2;min-width:0;padding:20px 0 54px 30px}
.hero h1{font-size:clamp(64px,6.11vw,88px);font-weight:500;line-height:1.091;color:#05090b}
.hero h1 .accent{color:var(--green)}
.description{margin-top:24px;font-size:16px;line-height:24px;color:#686a6b}
.actions{margin-top:48px}

/* CTA. With a mouse, cta.js shatters the fill into orbiting pixels drawn behind the label (.shattered);
   keyboard focus, touch and reduced motion get the plain green state. */
.button{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:54px;padding:0 24px;background:var(--ink);color:#fff;font-size:16px;font-weight:500}
.button:hover,.button:focus-visible{background:var(--green);color:#020c1e}
.button:hover img,.button:focus-visible img{filter:brightness(0) saturate(100%) invert(4%) sepia(40%) saturate(2300%) hue-rotate(185deg)}
.button.shattered{background:transparent;color:var(--ink)}
.button.shattered img{filter:brightness(0)}
.button-pixels{position:absolute;z-index:-1;pointer-events:none}

/* Bust: .hero-art is the bust's box. bust.js sizes the canvas to span the page width around it, so drifting
   pixels can travel far while scrolling stays native. Touch drags start on the bust's box. */
.hero-art{position:absolute;z-index:1;top:-60px;bottom:0;left:42.43%;right:-1.4%;touch-action:none;user-select:none;-webkit-user-select:none}
.pixel-field{position:absolute;display:block;pointer-events:none;touch-action:auto}
.pixel-badge{position:absolute;z-index:2;top:79px;right:7.98%;width:120px;height:120px;pointer-events:none;overflow:visible;animation:badge-spin 40s linear infinite}
.pixel-badge text{font:500 10.5px Poppins,Arial,sans-serif;letter-spacing:.02em;fill:#686a6b}
.pixel-badge .badge-sep{fill:var(--green)}
@keyframes badge-spin{to{transform:rotate(360deg)}}

.hero-stats{position:absolute;right:30px;bottom:20px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:41px;color:#000;pointer-events:none}
.hero-stats p{font-size:44px;font-weight:500;line-height:52px}
.hero-stats span{display:block;font-size:12px;line-height:20px}
.edge-note{position:absolute;left:30px;bottom:20px;z-index:2;font-size:14px;line-height:24px;color:#020c1e}

/* Diagonal color planes behind the hero. */
.hero-backdrop{position:absolute;inset:auto 0 0;height:417px;z-index:0;pointer-events:none}
.diagonal{position:absolute;bottom:0;background-position:center bottom;background-repeat:no-repeat;background-size:100% 100%}
.diagonal-left{left:0;width:52.279%;height:308px;background-image:url('/assets/diagonal-left.svg');transform:scaleX(-1)}
.diagonal-center{left:16.3235%;width:83.6765%;height:417px;background-image:url('/assets/diagonal-center.svg')}
.diagonal-right{right:0;width:28.603%;height:417px;background-image:url('/assets/diagonal-right.svg')}

/* Plus markers at the midpoints and bottom corners of the hero's side rules. */
.grid-marks{position:absolute;inset:0;z-index:3;pointer-events:none}
.grid-plus{position:absolute;width:44px;height:44px;background:url('/assets/grid-plus.svg') center/20px 20px no-repeat;transform:translate(-50%,-50%)}
.grid-plus:nth-child(odd){left:0}
.grid-plus:nth-child(even){left:100%}
.grid-plus:nth-child(-n+2){top:50%}
.grid-plus:nth-child(n+3){top:100%}

@media(max-width:1150px){
 .copy{padding:20px 30px 54px 25px}
 .hero{height:690px}
 .hero h1{font-size:64px}
 .eyebrow{left:25px}
 .hero-stats{right:20px;gap:30px}
 .hero-stats p{font-size:36px;line-height:44px}
 .hero-stats span{font-size:10px}
 .edge-note{left:25px;max-width:44%;font-size:12px}
}
@media(max-width:900px){
 .nav{height:auto;min-height:88px}
 .nav-inner{margin-inline:20px;padding:20px 16px;gap:16px;flex-wrap:wrap}
 .hero{height:auto;margin-inline:20px;padding:24px;display:flex;flex-direction:column;align-items:stretch;gap:28px}
 .eyebrow{position:relative;inset:auto}
 .eyebrow,.availability{font-size:10px}
 .copy{padding:16px 0 0}
 .hero h1{font-size:clamp(44px,9vw,72px);line-height:1.1}
 .description{max-width:38ch}
 .actions{margin-top:28px}
 .hero-art{position:relative;inset:auto;align-self:center;width:100%;max-width:520px;aspect-ratio:939/1024}
 .pixel-badge{top:2%;right:0;width:96px;height:96px}
 .hero-stats{position:relative;inset:auto;flex-direction:row;justify-content:space-around;gap:20px}
 .hero-stats span{font-size:11px}
 .edge-note{position:relative;inset:auto;max-width:none}
 .hero-backdrop{height:52%}
 .diagonal-left{height:74%}
 .diagonal-center,.diagonal-right{height:100%}
 /* 40px (not 44px) so the box can't overhang the 20px page margin and cause sideways scrolling. */
 .grid-plus{width:40px;height:40px}
}
@media(max-width:540px){
 .hero{--marker-gap:14px;margin-inline:16px;padding:20px;gap:22px}
 .nav-inner{margin-inline:16px;padding:18px 16px;flex-wrap:nowrap;background-size:1px calc(100% - 14px)}
 .description{font-size:14px;line-height:23px}
 .button{font-size:14px;padding-inline:20px}
 .hero-stats{gap:12px}
 .hero-stats p{font-size:32px;line-height:40px}
 .hero-stats span{font-size:10px}
 .edge-note{font-size:11px}
 .grid-plus{width:28px;height:28px}
}
@media(max-width:359px){
 .nav-inner{flex-wrap:wrap;padding-inline:10px;gap:8px}
 .nav-inner>a{flex:none}
 .availability{margin-left:auto}
 .hero h1{font-size:40px}
 .button{padding-inline:16px}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
 .hero-art{touch-action:auto}
}