/* Razer concept page. Standalone styles, shared site chrome remains intact. */
.razer-page .site-header .nav-wrap{width:min(950px,calc(100% - 48px))}
.razer-page .site-header nav a[href="/works.html"]{color:#4b2cff;border-bottom-color:#4b2cff}
.razer-page{--razer-purple:#777ac2}
.razer-hero{height:clamp(280px,30vw,570px);overflow:hidden;background:#bdd8ec}
.razer-hero img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 46%}
.razer-intro{padding:76px 0 80px;background:white}
.razer-intro-grid,.razer-section-inner,.razer-dark-inner{width:min(950px,calc(100% - 48px));margin:auto}
.razer-intro-grid{display:grid;grid-template-columns:.92fr 1fr;gap:70px;align-items:start}
.razer-intro h1{font-size:clamp(34px,3.5vw,48px);line-height:1.2;font-weight:600;color:var(--razer-purple);margin:0 0 15px}
.razer-subtitle{font-size:18px;letter-spacing:3px;font-weight:400;margin:0;color:#434343}
.razer-summary p,.razer-copy-block p:not(.razer-eyebrow){font-size:17px;line-height:1.8;color:#454545;margin:0 0 17px}
.razer-dark{background:#151515;color:#fff;padding:85px 0 95px}
.razer-dark .razer-copy-block p:not(.razer-eyebrow){color:#e0e0e0}
.razer-dark-inner{max-width:950px}
.razer-dark figure,.razer-section figure{margin:0}
.razer-dark figure img{display:block;width:100%;height:auto}
.razer-sketches{width:min(790px,100%);margin:0 auto 55px!important}
.razer-logo-sheet{width:min(760px,100%);margin:55px auto 35px!important}
.razer-logo-rules{text-align:center;max-width:700px;margin:35px auto 0}
.razer-logo-rules img{max-width:100%;width:100%;height:auto;max-height:400px;object-fit:contain}
.razer-copy-block{max-width:880px;margin-bottom:54px}
.razer-eyebrow{font-size:14px;letter-spacing:1.9px;font-weight:500;color:var(--razer-purple);margin:0 0 18px}
.razer-dark .razer-eyebrow{color:#eee}
.razer-copy-block h2{font-size:clamp(26px,2.6vw,36px);font-weight:600;color:var(--razer-purple);margin:0 0 26px;line-height:1.2}
.razer-dark .razer-copy-block h2{color:#fff}
.razer-section{padding:85px 0 45px;background:#fff}
.razer-section-inner{max-width:950px}
.razer-compare-labels{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:15px;text-align:center;color:var(--razer-purple);font-size:13px;letter-spacing:1px;font-weight:600}
.razer-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}
.razer-compare figure img{width:100%;height:auto;aspect-ratio:1370/700;object-fit:cover;display:block}
.razer-section figure a,.razer-dark figure a{display:block;cursor:pointer}
.razer-art-stack{width:100%}
.razer-art-stack .razer-wide{max-width:950px;margin:0 auto 30px}
.razer-art-stack .razer-wide img,.razer-art-stack .razer-paired img{width:100%;height:auto;display:block}
.razer-art-stack .razer-paired{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:0 0 24px}
.razer-motion{max-width:950px;margin:35px auto 0}
.razer-motion video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#070707}
.razer-applications{padding-bottom:95px}
.razer-lightbox[hidden]{display:none}
.razer-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(8,8,12,.96);display:grid;place-items:center;padding:40px;box-sizing:border-box;cursor:default}
.razer-lightbox img{display:block;max-height:calc(100dvh - 80px);max-width:calc(100vw - 80px);width:auto;height:auto;object-fit:contain;cursor:default}
.razer-lightbox button{position:absolute;right:20px;top:12px;background:none;border:0;color:white;font-size:42px;cursor:pointer;z-index:1}
@media(max-width:720px){.razer-hero{height:270px}.razer-intro{padding:48px 0 55px}.razer-intro-grid{grid-template-columns:1fr;gap:25px}.razer-summary p,.razer-copy-block p:not(.razer-eyebrow){font-size:15px}.razer-dark{padding:55px 0 60px}.razer-section{padding:55px 0 30px}.razer-applications{padding-bottom:70px}.razer-compare,.razer-art-stack .razer-paired{gap:10px}.razer-compare-labels{gap:10px;font-size:11px}.razer-lightbox{padding:16px}.razer-lightbox img{max-height:calc(100dvh - 32px);max-width:calc(100vw - 32px)}}

/* v10 — Razer logo composition: separate caption line, matched visual axes.
   Does not modify the SVG artwork or the exact transparent PNG sketches. */
.razer-dark .razer-sketches {
  width: min(950px, 100%);
  margin: 0 auto 46px !important;
}
.razer-dark .razer-sketches img {
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}
.razer-logo-applications {
  width:min(620px, 100%);
  margin:38px auto 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:55px;
}
.razer-logo-row-green,
.razer-dark .razer-wordmark-green,
.razer-dark .razer-wordmark-white {
  display:block;
  width:100%;
  margin:0 auto !important;
  text-align:center;
}
.razer-dark .razer-wordmark-green {
  position:static;
}
.razer-wordmark-green > a {
  display:block;
  width:100%;
}
.razer-dark .razer-wordmark-green img {
  display:block;
  width:100%;
  height:auto;
}
.razer-logo-note {
  position:static;
  display:block;
  width:auto;
  margin:-66px 0 0;
  padding:0 0 0 7%;
  transform:none;
  text-align:left;
  white-space:normal;
  font:400 14px/1.5 Metropolis,Arial,sans-serif;
  color:#efefef;
  pointer-events:none;
}
.razer-dark .razer-wordmark-white img {
  display:block;
  width:min(440px, 100%);
  height:auto;
  margin:0 auto;
  transform:translateX(18px);
}
.razer-wordmark-white figcaption {
  margin:12px 0 0;
  text-align:center;
  font:400 14px/1.5 Metropolis,Arial,sans-serif;
  color:#efefef;
}
@media(max-width:720px) {
  .razer-dark .razer-sketches {
    width:100%;
    margin-bottom:32px !important;
  }
  .razer-logo-applications {
    width:100%;
    gap:32px;
    margin-top:25px;
  }
  .razer-logo-note {
    margin-top:clamp(-66px,-10vw,-30px);
    padding-left:4%;
    font-size:12px;
  }
  .razer-dark .razer-wordmark-white img {
    width:min(75%,440px);
    transform:translateX(3%);
  }
  .razer-wordmark-white figcaption {
    font-size:12px;
  }
}

/* v11: optical logo alignment based on SVG visible artwork bounds.
   Green art uses 861-wide viewBox / visible 582; white uses 1050 / visible 1000.
   620px green and 420px white give matching ~419px visible artwork widths. */
.razer-logo-applications {
  width:min(620px,100%);
  gap:46px;
  align-items:center;
}
.razer-logo-row-green,
.razer-dark .razer-wordmark-green,
.razer-dark .razer-wordmark-white {
  width:100%;
  max-width:100%;
  margin-inline:auto !important;
}
.razer-dark .razer-wordmark-green {position:relative;}
.razer-wordmark-green > a {display:block;}
.razer-dark .razer-wordmark-green img {
  display:block;
  width:100%;
  height:auto;
  transform:translateX(-2%);
}
.razer-logo-note {
  position:absolute;
  top:71%;
  bottom:auto;
  left:-3%;
  right:auto;
  padding:0;
  margin:0;
  width:auto;
  transform:none;
  text-align:left;
  white-space:nowrap;
  font:400 14px/1.5 Metropolis,Arial,sans-serif;
  color:#efefef;
  pointer-events:none;
}
.razer-dark .razer-wordmark-white img {
  display:block;
  width:67.74%;
  max-width:420px;
  height:auto;
  margin:0 auto;
  transform:none;
}
.razer-wordmark-white figcaption {
  text-align:center;
  margin:20px 0 0;
}
@media(max-width:720px) {
  .razer-logo-applications { width:100%; gap:34px; }
  .razer-logo-note {
    position:static;
    width:auto;
    display:block;
    margin:-16% 0 0;
    padding-left:0;
    transform:none;
    white-space:normal;
    text-align:left;
    font-size:12px;
  }
  .razer-dark .razer-wordmark-white img {
    width:67.74%;
    transform:none;
  }
}

/* v12: place the annotation below and left of the diagonal pointer-line end.
   Neither the green nor the white logo is resized/repositioned. */
@media (min-width:721px) {
  .razer-dark .razer-wordmark-green .razer-logo-note {
    left:-13%;
    top:67%;
    right:auto;
    bottom:auto;
    padding:0;
    margin:0;
    transform:none;
    text-align:left;
    white-space:nowrap;
  }
}

/* v13 — move ONLY white logo artwork horizontally to align the final R.
   Green logo and its note (v12) remain untouched. */
.razer-dark .razer-wordmark-white img {
  transform: translateX(4%);
}

/* v14 — center the white caption under the shifted visible logotype.
   v13 moves the logo artwork right by 4% of its 420px image width (~17px).
   Keep both SVGs and the green caption exactly as approved. */
.razer-dark .razer-wordmark-white figcaption {
  position: relative;
  left: 17px;
}
@media (max-width: 720px) {
  .razer-dark .razer-wordmark-white figcaption {
    left: min(2.71vw, 17px);
  }
}

/* v15: align caption with the RAZER letters (not the snake+letters group).
   The SVG, its position and scale, and the green section stay unchanged. */
@media (min-width: 721px) {
  .razer-dark .razer-wordmark-white figcaption { left: 80px; }
}
@media (max-width: 720px) {
  .razer-dark .razer-wordmark-white figcaption { left: min(12.9vw, 80px); }
}


/* v16: maintain aligned two-column comparisons without cropping either product.
   The headset images have a taller native aspect ratio than the mouse images. */
.razer-compare {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:24px;
  row-gap:20px;
  align-items:start;
}
.razer-compare figure,
.razer-compare figure a {
  min-width:0;
}
.razer-compare figure img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  object-position:center;
}
@media(max-width:720px) {
  .razer-compare { column-gap:10px; row-gap:12px; }
}

/* v18: enlarge the original transparent sketch artwork on desktop, without altering the PNG. */
@media (min-width: 721px) {
  .razer-dark .razer-sketches {
    width: min(1200px, calc(100vw - 48px));
    max-width: none;
    /* Center within the 950px parent without overriding reveal animations. */
    margin-left: calc((100% - min(1200px, 100vw - 48px)) / 2) !important;
    margin-right: 0 !important;
  }
}

/* v20: Wix-style edge-to-edge paired campaign mockups.
   Keep laptop/social mockups within the original centered content column. */
@media (min-width: 721px) {
  .razer-applications .razer-art-stack > .razer-paired {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    margin-right: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    align-items: start;
  }
}
@media (max-width: 720px) {
  .razer-applications .razer-art-stack > .razer-paired {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* v21 — slightly larger centered laptop/social artwork; matched-height Wix-style pairs. */
@media (min-width: 721px) {
  .razer-applications .razer-art-stack > .razer-wide {
    width: min(760px, 100%);
    max-width: 760px;
  }
  .razer-applications .razer-art-stack > .razer-paired {
    align-items: stretch;
  }
  .razer-applications .razer-art-stack > .razer-paired > figure {
    margin: 0;
    min-width: 0;
    aspect-ratio: 1.37 / 1;
    overflow: hidden;
  }
  .razer-applications .razer-art-stack > .razer-paired > figure > a {
    width: 100%;
    height: 100%;
  }
  .razer-applications .razer-art-stack > .razer-paired > figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

/* v22: enlarge only the centered laptop and Instagram deliverable mockups. */
@media (min-width: 721px) {
  .razer-applications .razer-art-stack > .razer-wide {
    width: min(950px, 100%);
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
  }
}