/* ============================================================
   CROCKY.HOST, Acrylic Glass system
   Dark futuristic primary · light theme toggleable
   ============================================================ */

body.ch-remaster{
  /* Dark (default) palette, cool, near-black, slight green undertone */
  --bg: oklch(0.115 0.018 200);
  --bg-2: oklch(0.155 0.020 200);
  --bg-3: oklch(0.195 0.022 200);
  --surface: oklch(0.22 0.022 200);
  --surface-2: oklch(0.27 0.022 200);

  --fg: oklch(0.97 0.012 200);
  --fg-muted: oklch(0.78 0.012 200);
  --fg-subtle: oklch(0.55 0.012 200);

  --border: oklch(0.32 0.018 200 / 0.55);
  --border-strong: oklch(0.45 0.020 200 / 0.65);

  /* Crocky green family, restrained, deployed sparingly */
  --acid: oklch(0.80 0.20 148);
  --acid-soft: oklch(0.74 0.16 148);
  --acid-deep: oklch(0.52 0.14 150);
  --acid-glow: oklch(0.82 0.20 148 / 0.40);
  --acid-shadow: oklch(0.50 0.18 150 / 0.30);

  /* Glass tints, neutral first, hint of green */
  --glass-fill: linear-gradient(
    150deg,
    oklch(0.40 0.04 200 / 0.14) 0%,
    oklch(0.30 0.03 200 / 0.08) 60%,
    oklch(0.20 0.02 200 / 0.04) 100%
  );
  --glass-fill-strong: linear-gradient(
    150deg,
    oklch(0.45 0.08 148 / 0.18) 0%,
    oklch(0.30 0.03 200 / 0.10) 60%,
    oklch(0.20 0.02 200 / 0.06) 100%
  );
  --glass-edge: linear-gradient(
    135deg,
    oklch(0.95 0.04 148 / 0.28) 0%,
    oklch(0.85 0.02 200 / 0.06) 25%,
    oklch(0.40 0.02 200 / 0.03) 55%,
    oklch(0.40 0.02 200 / 0.06) 80%,
    oklch(0.85 0.06 148 / 0.18) 100%
  );
  --glass-top-shine: linear-gradient(
    180deg,
    oklch(0.96 0.03 200 / 0.10) 0%,
    oklch(0.96 0.02 200 / 0.02) 25%,
    transparent 55%
  );
  --glass-shadow:
    0 1px 0 oklch(0.96 0.04 200 / 0.07) inset,
    0 -1px 0 oklch(0.10 0.02 200 / 0.4) inset,
    0 22px 50px -28px oklch(0.05 0.02 200 / 0.5),
    0 6px 18px -8px oklch(0.05 0.02 200 / 0.3),
    0 0 0 1px oklch(0.95 0.03 200 / 0.03);

  /* Type */
  --sans: "Geist", "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Rhythm */
  --max: 1280px;
  --max-narrow: 920px;
  --gutter: clamp(20px, 4vw, 56px);
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
}

html:not(.dark) body.ch-remaster{
  --bg: oklch(0.97 0.006 200);
  --bg-2: oklch(0.94 0.008 200);
  --bg-3: oklch(0.91 0.010 200);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.97 0.006 200);

  --fg: oklch(0.16 0.012 200);
  --fg-muted: oklch(0.40 0.012 200);
  --fg-subtle: oklch(0.58 0.012 200);

  --border: oklch(0.55 0.020 200 / 0.30);
  --border-strong: oklch(0.40 0.025 200 / 0.40);

  --acid: oklch(0.62 0.20 148);
  --acid-soft: oklch(0.72 0.18 148);
  --acid-deep: oklch(0.48 0.18 150);
  --acid-glow: oklch(0.72 0.22 148 / 0.45);
  --acid-shadow: oklch(0.55 0.20 150 / 0.30);

  --glass-fill: linear-gradient(
    150deg,
    oklch(0.85 0.15 148 / 0.22) 0%,
    oklch(0.97 0.04 200 / 0.55) 55%,
    oklch(1 0 0 / 0.60) 100%
  );
  --glass-fill-strong: linear-gradient(
    150deg,
    oklch(0.80 0.18 148 / 0.32) 0%,
    oklch(0.97 0.04 200 / 0.55) 55%,
    oklch(1 0 0 / 0.60) 100%
  );
  --glass-edge: linear-gradient(
    135deg,
    oklch(0.50 0.20 148 / 0.55) 0%,
    oklch(0.95 0.05 148 / 0.20) 25%,
    oklch(0.85 0.05 200 / 0.10) 55%,
    oklch(0.65 0.10 148 / 0.15) 80%,
    oklch(0.50 0.20 148 / 0.40) 100%
  );
  --glass-top-shine: linear-gradient(
    180deg,
    oklch(1 0 0 / 0.55) 0%,
    oklch(1 0 0 / 0.10) 25%,
    transparent 55%
  );
  --glass-shadow:
    0 1px 0 oklch(1 0 0 / 0.60) inset,
    0 -1px 0 oklch(0.50 0.10 148 / 0.10) inset,
    0 30px 60px -30px oklch(0.40 0.15 148 / 0.30),
    0 8px 24px -10px oklch(0.40 0.15 148 / 0.18),
    0 0 0 1px oklch(0.50 0.18 148 / 0.10);
}

.ch-remaster /* ============================================================ Reset */
*, .ch-remaster *::before, .ch-remaster *::after{ box-sizing: border-box; }
html, body{ margin: 0; padding: 0; }
html{ -webkit-text-size-adjust: 100%; }
.ch-remaster{
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "ss03", "cv11";
  overflow-x: hidden;
}
.ch-remaster img, .ch-remaster svg{ display: block; max-width: 100%; }
.ch-remaster button{ font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.ch-remaster input, .ch-remaster textarea, .ch-remaster select{ font: inherit; color: inherit; }
.ch-remaster a{ color: inherit; text-decoration: none; }
.ch-remaster hr{ border: 0; border-top: 1px solid var(--border); margin: 0; }
.ch-remaster ::selection{ background: var(--acid); color: oklch(0.10 0.02 200); }

.ch-remaster /* ============================================================ Ambient bg orb, one only, .ch-remaster very subtle */
.ambient{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.ch-remaster .ambient .orb{
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
}
.ch-remaster .ambient .orb.a{
  width: 720px; height: 720px;
  top: -240px; left: -180px;
  background: radial-gradient(circle, oklch(0.55 0.16 148 / 0.28), transparent 65%);
  opacity: 1;
}
.ch-remaster .ambient .orb.b, .ch-remaster .ambient .orb.c{ display: none; }
html:not(.dark) body.ch-remaster .ambient .orb.a{
  background: radial-gradient(circle, oklch(0.78 0.14 148 / 0.32), transparent 65%);
}

.ch-remaster main, .ch-remaster .nav, .ch-remaster .footer{ position: relative; z-index: 2; }

.ch-remaster /* ============================================================ Layout */
.wrap{
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.ch-remaster .wrap-narrow{ max-width: var(--max-narrow); }

.ch-remaster section{ position: relative; }
.ch-remaster .section-pad{ padding: clamp(72px, 9vw, 132px) 0; }
.ch-remaster .section-pad-sm{ padding: clamp(48px, 6vw, 88px) 0; }

.ch-remaster /* ============================================================ Type */
h1, .ch-remaster h2, .ch-remaster h3, .ch-remaster h4, .ch-remaster .display{
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: var(--fg);
  margin: 0;
}
.ch-remaster h1{
  font-size: clamp(46px, 7.4vw, 108px);
  font-weight: 500;
  letter-spacing: -0.038em;
  line-height: 0.96;
}
.ch-remaster h2{
  font-size: clamp(34px, 4.6vw, 64px);
  letter-spacing: -0.028em;
  font-weight: 500;
}
.ch-remaster h3{
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.018em;
  font-weight: 500;
}
.ch-remaster h4{
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.2;
}
.ch-remaster .h-light{ font-weight: 300; }
.ch-remaster .h-tight{ letter-spacing: -0.04em; }
.ch-remaster .lead{
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: 56ch;
  text-wrap: pretty;
  font-weight: 400;
}
.ch-remaster .kicker{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  font-weight: 400;
}
.ch-remaster .kicker::before{
  content: "";
  width: 14px; height: 1px;
  background: var(--fg-subtle);
  opacity: 0.7;
}
.ch-remaster .kicker.no-dot::before{ display: none; }
.ch-remaster .mono{ font-family: var(--mono); }
.ch-remaster .muted{ color: var(--fg-muted); }
.ch-remaster .subtle{ color: var(--fg-subtle); }
.ch-remaster .accent{ color: var(--acid); }
.ch-remaster .tnum{ font-variant-numeric: tabular-nums; }

.ch-remaster /* Big gradient headline accent, restrained, .ch-remaster not a saturated bath */
.grad-text{
  background: linear-gradient(120deg, var(--acid-soft) 0%, var(--fg) 50%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
html:not(.dark) body.ch-remaster .grad-text{
  background: linear-gradient(120deg, var(--acid-deep) 0%, var(--fg) 55%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.ch-remaster /* ============================================================ Glass primitive */
.glass{
  position: relative;
  background: var(--glass-fill);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow);
  isolation: isolate;
}
.ch-remaster .glass.glass-strong{ background: var(--glass-fill-strong); }
.ch-remaster .glass::before{
  /* gradient mask "edge", light catches the bezel */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--glass-edge);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}
.ch-remaster .glass::after{
  /* top inner shine */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-top-shine);
  pointer-events: none;
  z-index: 1;
}
.ch-remaster .glass > *{ position: relative; z-index: 3; }

.ch-remaster /* Hover lift on glass cards */
.glass-hover{ transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease; }
.ch-remaster .glass-hover:hover{
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 oklch(0.96 0.10 148 / 0.18) inset,
    0 -1px 0 oklch(0.10 0.02 200 / 0.5) inset,
    0 40px 70px -28px oklch(0.05 0.10 148 / 0.85),
    0 10px 30px -10px oklch(0.05 0.10 148 / 0.5),
    0 0 0 1px oklch(0.85 0.20 148 / 0.15);
}

.ch-remaster /* ============================================================ Buttons */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  border-radius: 999px;
  position: relative;
  isolation: isolate;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .2s ease, color .2s ease;
  text-decoration: none;
}
.ch-remaster .btn:hover{ transform: translateY(-1px); }
.ch-remaster .btn:active{ transform: translateY(0); }
.ch-remaster .btn .arr{ transition: transform .25s ease; display: inline-block; }
.ch-remaster .btn:hover .arr{ transform: translateX(3px); }

.ch-remaster /* Primary, acid glass pill */
.btn-primary{
  color: oklch(0.10 0.02 200);
  background:
    radial-gradient(120% 200% at 50% 0%, oklch(1 0 0 / 0.35), transparent 50%),
    linear-gradient(180deg, var(--acid) 0%, var(--acid-soft) 100%);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.4),
    inset 0 -1px 0 oklch(0.30 0.15 148 / 0.5),
    0 10px 30px -10px var(--acid-shadow),
    0 0 0 1px oklch(0.40 0.20 148 / 0.4);
}
.ch-remaster .btn-primary::before{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: var(--acid);
  filter: blur(14px);
  opacity: 0.35;
  z-index: -1;
  transition: opacity .25s ease;
}
.ch-remaster .btn-primary:hover::before{ opacity: 0.6; }

.ch-remaster /* Glass ghost */
.btn-ghost{
  color: var(--fg);
  background: var(--glass-fill);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow:
    inset 0 1px 0 oklch(0.96 0.10 148 / 0.10),
    inset 0 -1px 0 oklch(0.10 0.02 200 / 0.4),
    0 10px 24px -10px oklch(0.05 0.10 148 / 0.5),
    0 0 0 1px oklch(0.95 0.05 148 / 0.08);
}
.ch-remaster .btn-sm{ padding: 9px 16px; font-size: 13px; }

.ch-remaster /* ============================================================ Nav */
.nav{
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 14px 0 0;
}
.ch-remaster .nav-inner{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 10px 12px 10px 18px;
  border-radius: 999px;
  background: var(--glass-fill);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: var(--glass-shadow);
  position: relative;
}
.ch-remaster .nav-inner::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--glass-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.ch-remaster .brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.025em;
  color: var(--fg);
}
.ch-remaster .brand-mark{
  width: 24px; height: 24px;
  border-radius: 7px;
  position: relative;
  background:
    radial-gradient(120% 130% at 30% 25%, oklch(1 0 0 / 0.45), transparent 45%),
    linear-gradient(160deg, var(--acid) 0%, var(--acid-deep) 100%);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.5),
    inset 0 -1px 0 oklch(0.20 0.10 148 / 0.5),
    0 4px 12px -4px var(--acid-shadow),
    0 0 0 1px oklch(0.40 0.20 148 / 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ch-remaster .brand-mark::after{
  /* the C glyph */
  content: "";
  width: 10px; height: 10px;
  border: 1.6px solid oklch(0.12 0.10 148);
  border-right-color: transparent;
  border-radius: 50%;
  transform: rotate(-32deg);
}
.ch-remaster .brand .tld{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-subtle);
  font-weight: 400;
  letter-spacing: 0;
}
.ch-remaster .nav-links{
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
}
.ch-remaster .nav-links a{
  font-size: 13.5px;
  color: var(--fg-muted);
  padding: 8px 14px;
  border-radius: 999px;
  transition: color .15s ease, background .15s ease;
}
.ch-remaster .nav-links a:hover{ color: var(--fg); background: oklch(0.50 0.10 148 / 0.10); }
.ch-remaster .nav-right{ display: flex; gap: 8px; align-items: center; }
.ch-remaster .nav-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  padding: 7px 12px;
  border-radius: 999px;
  background: oklch(0.50 0.10 148 / 0.06);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.ch-remaster .nav-pill:hover{ color: var(--fg); border-color: var(--border-strong); }
.ch-remaster .nav-pill .dot{
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--acid);
}
.ch-remaster .menu-btn{ display: none; }
@media (max-width: 920px){
  .nav-links { display: none; }
  .nav-pill.hide-mobile { display: none; }
  .menu-btn {
    display: inline-flex;
    width: 36px; height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--fg);
  }
}

.ch-remaster /* ============================================================ HERO */
.hero{ padding: clamp(56px, 8vw, 120px) 0 clamp(48px, 6vw, 80px); }
.ch-remaster .hero-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-bottom: clamp(28px, 4vw, 40px);
}
.ch-remaster .hero-stage{
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: stretch;
}
@media (max-width: 960px){ .hero-stage { grid-template-columns: 1fr; } }
.ch-remaster .hero-left{ display: flex; flex-direction: column; gap: clamp(24px, 3vw, 36px); }
.ch-remaster .hero h1 .row{ display: block; }
.ch-remaster .hero h1 .row .it{
  color: var(--fg-muted);
  font-style: italic;
  font-weight: 400;
}
html:not(.dark) body.ch-remaster .hero h1 .row .it{ color: var(--fg-muted); }
.ch-remaster .hero-sub{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
  margin-top: 4px;
}
@media (max-width: 760px){ .hero-sub { grid-template-columns: 1fr; } }
.ch-remaster .hero-actions{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

.ch-remaster .promises{
  display: grid;
  gap: 0;
  padding: 18px 20px;
  border-radius: var(--r);
  background: oklch(0.50 0.04 200 / 0.04);
  border: 1px solid var(--border);
}
.ch-remaster .promises .row{
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px dashed var(--border);
  font-size: 13.5px;
}
.ch-remaster .promises .row:first-child{ border-top: 0; padding-top: 4px; }
.ch-remaster .promises .row:last-child{ padding-bottom: 4px; }
.ch-remaster .promises .row .n{
  font-family: var(--mono);
  font-size: 10px;
  color: var(--fg-subtle);
  letter-spacing: 0.08em;
}
.ch-remaster .promises .row .t{ color: var(--fg); font-weight: 500; }
.ch-remaster .promises .row .v{ font-family: var(--mono); font-size: 11.5px; color: var(--fg-muted); }

.ch-remaster /* Hero 3D piece */
.hero-3d{
  position: relative;
  border-radius: var(--r-lg);
  min-height: 560px;
  overflow: hidden;
  background:
    radial-gradient(100% 80% at 70% 30%, oklch(0.30 0.08 148 / 0.18), transparent 60%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
  border: 1px solid var(--border);
  box-shadow:
    inset 0 1px 0 oklch(0.96 0.04 200 / 0.05),
    inset 0 -1px 0 oklch(0.10 0.02 200 / 0.4),
    0 22px 50px -28px oklch(0.05 0.02 200 / 0.5);
  isolation: isolate;
}
html:not(.dark) body.ch-remaster .hero-3d{
  background:
    radial-gradient(100% 80% at 70% 30%, oklch(0.85 0.10 148 / 0.20), transparent 60%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}
.ch-remaster .hero-3d canvas{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

.ch-remaster /* HUD top */
.hero-3d .hud{
  position: absolute;
  top: 22px; left: 26px; right: 26px;
  pointer-events: none;
  z-index: 3;
  font-family: var(--mono);
}
.ch-remaster .hero-3d .hud-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.ch-remaster .hero-3d .hud-row > span{ display: inline-flex; align-items: center; gap: 8px; }
.ch-remaster .hero-3d .hud-dot{
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--acid);
  animation: pulse 1.8s ease-in-out infinite;
}
.ch-remaster .hero-3d .hud-state{ color: var(--fg-muted); }
.ch-remaster .hero-3d[data-probe-state="scanning"] .hud-state{ color: var(--acid); }
.ch-remaster .hero-3d[data-probe-state="done"] .hud-state{ color: var(--acid); }

@keyframes pulse{
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.4); }
}

.ch-remaster /* Probe rings, emanate during scan */
.hero-3d .probe-rings{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.ch-remaster .hero-3d[data-probe-state="scanning"] .probe-rings{ opacity: 1; }
.ch-remaster .hero-3d .probe-rings span{
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  border: 1px solid var(--acid);
  opacity: 0;
  transform: scale(0.4);
}
.ch-remaster .hero-3d[data-probe-state="scanning"] .probe-rings span{
  animation: ring-out 1.8s ease-out infinite;
}
.ch-remaster .hero-3d[data-probe-state="scanning"] .probe-rings span:nth-child(2){ animation-delay: 0.6s; }
.ch-remaster .hero-3d[data-probe-state="scanning"] .probe-rings span:nth-child(3){ animation-delay: 1.2s; }
@keyframes ring-out{
  0%   { opacity: 0; transform: scale(0.4); }
  20%  { opacity: 0.6; }
  100% { opacity: 0; transform: scale(2.6); }
}

.ch-remaster /* Probe stage, bottom panel that swaps state */
.hero-3d .probe-stage{
  position: absolute;
  left: 22px; right: 22px; bottom: 22px;
  z-index: 4;
  padding: 14px 16px 14px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, oklch(0.18 0.020 200 / 0.55) 0%, oklch(0.13 0.020 200 / 0.78) 100%);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid oklch(0.95 0.04 200 / 0.06);
  box-shadow:
    inset 0 1px 0 oklch(0.96 0.04 200 / 0.05),
    0 14px 30px -16px oklch(0.05 0.02 200 / 0.7);
  display: none;
}
html:not(.dark) body.ch-remaster .hero-3d .probe-stage{
  background:
    linear-gradient(180deg, oklch(1 0 0 / 0.72) 0%, oklch(0.96 0.02 200 / 0.85) 100%);
  border-color: oklch(0.40 0.05 200 / 0.12);
}
.ch-remaster .hero-3d[data-probe-state="idle"] .probe-stage[data-stage="idle"], .ch-remaster .hero-3d[data-probe-state="scanning"] .probe-stage[data-stage="scanning"], .ch-remaster .hero-3d[data-probe-state="done"] .probe-stage[data-stage="done"]{ display: block; }

.ch-remaster .hero-3d .probe-label{
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ch-remaster .hero-3d .probe-label::before{
  content: "";
  width: 14px; height: 1px;
  background: var(--fg-subtle);
  opacity: 0.7;
}

.ch-remaster /* Probe form */
.hero-3d .probe-form{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 4px;
  padding: 6px 6px 6px 12px;
  background: oklch(0.08 0.020 200 / 0.55);
  border: 1px solid oklch(0.95 0.04 200 / 0.08);
  border-radius: 999px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
html:not(.dark) body.ch-remaster .hero-3d .probe-form{
  background: oklch(1 0 0 / 0.7);
  border-color: oklch(0.40 0.05 200 / 0.18);
}
.ch-remaster .hero-3d .probe-form:focus-within{
  border-color: var(--acid);
  box-shadow: 0 0 0 3px oklch(0.80 0.20 148 / 0.18);
}
.ch-remaster .hero-3d .probe-prefix{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-subtle);
  letter-spacing: 0;
}
.ch-remaster .hero-3d .probe-input{
  border: 0;
  background: transparent;
  font-family: var(--mono);
  font-size: 13.5px;
  letter-spacing: 0;
  padding: 8px 6px;
  outline: none;
  width: 100%;
  color: var(--fg);
}
.ch-remaster .hero-3d .probe-input::placeholder{ color: var(--fg-subtle); }
.ch-remaster .hero-3d .probe-btn{
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12.5px;
  color: oklch(0.10 0.10 148);
  background:
    radial-gradient(120% 200% at 50% 0%, oklch(1 0 0 / 0.35), transparent 50%),
    linear-gradient(180deg, var(--acid) 0%, var(--acid-soft) 100%);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.45),
    0 6px 14px -4px var(--acid-shadow);
  cursor: pointer;
  transition: transform .15s ease;
}
.ch-remaster .hero-3d .probe-btn:hover{ transform: translateY(-1px); }
.ch-remaster .hero-3d .probe-btn:disabled{
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.ch-remaster .hero-3d .readout{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid oklch(0.95 0.04 200 / 0.06);
}
html:not(.dark) body.ch-remaster .hero-3d .readout{ border-top-color: oklch(0.40 0.05 200 / 0.12); }
.ch-remaster .hero-3d .readout .k{
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-subtle);
}
.ch-remaster .hero-3d .readout .v{
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--fg);
  margin-top: 2px;
}

.ch-remaster /* Scanning panel */
.hero-3d .probe-target{
  font-family: var(--mono);
  font-size: 14px;
  color: var(--fg);
  margin-bottom: 14px;
  letter-spacing: 0;
  word-break: break-all;
}
.ch-remaster .hero-3d .probe-log{
  display: grid;
  gap: 6px;
}
.ch-remaster .hero-3d .probe-log .step{
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 10px;
  align-items: center;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
  padding: 6px 0;
  border-top: 1px dashed oklch(0.95 0.04 200 / 0.06);
}
html:not(.dark) body.ch-remaster .hero-3d .probe-log .step{ border-top-color: oklch(0.40 0.05 200 / 0.12); }
.ch-remaster .hero-3d .probe-log .step:first-child{ border-top: 0; padding-top: 2px; }
.ch-remaster .hero-3d .probe-log .step::before{
  content: "";
  width: 8px; height: 8px;
  border-radius: 999px;
  background: oklch(0.30 0.02 200);
  border: 1px solid oklch(0.45 0.02 200);
}
.ch-remaster .hero-3d .probe-log .step::after{
  content: "-";
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--fg-subtle);
}
.ch-remaster .hero-3d .probe-log .step.active{
  color: var(--fg);
}
.ch-remaster .hero-3d .probe-log .step.active::before{
  background: var(--acid);
  border-color: var(--acid);
  box-shadow: 0 0 10px var(--acid-glow);
  animation: pulse 1.4s ease-in-out infinite;
}
.ch-remaster .hero-3d .probe-log .step.active::after{ content: "running"; color: var(--acid); }
.ch-remaster .hero-3d .probe-log .step.done{
  color: var(--fg-muted);
}
.ch-remaster .hero-3d .probe-log .step.done::before{
  background: var(--acid);
  border-color: var(--acid);
}
.ch-remaster .hero-3d .probe-log .step.done::after{ content: "ok"; color: var(--acid); }
.ch-remaster .hero-3d .probe-log .step.fail::before{
  background: oklch(0.62 0.20 30);
  border-color: oklch(0.62 0.20 30);
}
.ch-remaster .hero-3d .probe-log .step.fail::after{ content: "fail"; color: oklch(0.72 0.20 30); }

.ch-remaster /* Result */
.hero-3d .result-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid oklch(0.95 0.04 200 / 0.06);
  margin-bottom: 10px;
}
html:not(.dark) body.ch-remaster .hero-3d .result-header{ border-bottom-color: oklch(0.40 0.05 200 / 0.12); }
.ch-remaster .hero-3d .result-url{
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--fg);
  word-break: break-all;
  flex: 1;
}
.ch-remaster .hero-3d .result-status{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acid);
  padding: 3px 8px;
  border-radius: 999px;
  background: oklch(0.40 0.10 148 / 0.18);
  border: 1px solid oklch(0.80 0.18 148 / 0.30);
  white-space: nowrap;
}
.ch-remaster .hero-3d .result-status.warn{ color: oklch(0.78 0.18 80); background: oklch(0.40 0.10 80 / 0.18); border-color: oklch(0.78 0.18 80 / 0.30); }
.ch-remaster .hero-3d .result-status.fail{ color: oklch(0.72 0.20 30); background: oklch(0.40 0.15 30 / 0.18); border-color: oklch(0.72 0.20 30 / 0.30); }
.ch-remaster .hero-3d .result-metrics{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}
.ch-remaster .hero-3d .result-metrics .k{
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-subtle);
}
.ch-remaster .hero-3d .result-metrics .v{
  font-family: var(--sans);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.ch-remaster .hero-3d .result-metrics .v[data-result-score]{ color: var(--acid); }
.ch-remaster .hero-3d .result-actions{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ch-remaster .hero-3d .result-reset{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-muted);
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
  border-bottom: 1px solid var(--fg-subtle);
}
.ch-remaster .hero-3d .result-reset:hover{ color: var(--fg); border-bottom-color: var(--fg); }
.ch-remaster .hero-3d .crosshair{
  position: absolute; inset: 18px;
  pointer-events: none; z-index: 2;
  display: grid;
  grid-template-columns: 12px 1fr 12px;
  grid-template-rows: 12px 1fr 12px;
}
.ch-remaster .hero-3d .crosshair span{ border: 1px solid oklch(0.96 0.10 148 / 0.20); }
html:not(.dark) body.ch-remaster .hero-3d .crosshair span{ border-color: oklch(0.40 0.10 148 / 0.30); }
.ch-remaster .hero-3d .crosshair .tl{ border-right: 0; border-bottom: 0; }
.ch-remaster .hero-3d .crosshair .tr{ border-left: 0; border-bottom: 0; }
.ch-remaster .hero-3d .crosshair .bl{ border-right: 0; border-top: 0; }
.ch-remaster .hero-3d .crosshair .br{ border-left: 0; border-top: 0; }
.ch-remaster .hero-3d .crosshair .center, .ch-remaster .hero-3d .crosshair .top, .ch-remaster .hero-3d .crosshair .bottom, .ch-remaster .hero-3d .crosshair .left, .ch-remaster .hero-3d .crosshair .right{ border: 0; }

@keyframes pulse{
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.4); }
}

.ch-remaster /* Hero stats row */
.hero-stats{
  margin-top: clamp(48px, 6vw, 80px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 900px){ .hero-stats { grid-template-columns: repeat(2, 1fr); } }
.ch-remaster .stat-card{
  padding: 22px 22px 20px;
  border-radius: var(--r);
  background: var(--glass-fill);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: var(--glass-shadow);
  position: relative;
  isolation: isolate;
  display: flex; flex-direction: column; gap: 6px;
}
.ch-remaster .stat-card::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--glass-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.ch-remaster .stat-card .k{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.ch-remaster .stat-card .v{
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--fg);
}
.ch-remaster .stat-card .v sup{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--fg-subtle);
  vertical-align: 18px;
  margin-left: 6px;
  font-weight: 400;
}
.ch-remaster .stat-card .a{ font-size: 12.5px; color: var(--fg-muted); }
.ch-remaster .stat-card .a a:hover{ color: var(--acid); }

.ch-remaster /* ============================================================ Section labels */
.section-label{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  margin-bottom: clamp(36px, 5vw, 56px);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.ch-remaster .section-label .line{ height: 1px; background: linear-gradient(90deg, var(--border), transparent 80%); }
.ch-remaster .section-label .index{ color: var(--fg-muted); }

.ch-remaster /* ============================================================ Marquee */
.marquee{
  position: relative;
  overflow: hidden;
  padding: 18px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: oklch(0.50 0.10 148 / 0.04);
  display: flex;
  align-items: center;
  gap: 24px;
}
.ch-remaster .marquee::before, .ch-remaster .marquee::after{
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.ch-remaster .marquee::before{ left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.ch-remaster .marquee::after{ right: 0; background: linear-gradient(-90deg, var(--bg), transparent); }
.ch-remaster .marquee .label{
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  white-space: nowrap;
  padding-left: var(--gutter);
  z-index: 3;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ch-remaster .marquee .label::before{
  content: "";
  width: 14px; height: 1px;
  background: var(--fg-subtle);
  opacity: 0.7;
}
.ch-remaster .marquee .track{
  display: flex;
  width: max-content;
  animation: scroll-x 40s linear infinite;
  will-change: transform;
}
.ch-remaster .marquee:hover .track{ animation-play-state: paused; }
.ch-remaster .marquee .item{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 28px;
  font-size: 14px;
  color: var(--fg);
  white-space: nowrap;
}
.ch-remaster .marquee .item .pill{
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  padding: 3px 8px;
  border-radius: 999px;
  background: oklch(0.50 0.04 200 / 0.08);
  border: 1px solid var(--border);
}
.ch-remaster .marquee .item .sep{ color: var(--fg-subtle); font-family: var(--mono); font-size: 10px; }
.ch-remaster .marquee .item b{ font-weight: 500; }
@keyframes scroll-x{
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.ch-remaster /* ============================================================ Trio */
.trio-header{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 56px);
}
@media (max-width: 760px){ .trio-header { grid-template-columns: 1fr; gap: 24px; } }
.ch-remaster .trio{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px){ .trio { grid-template-columns: 1fr; } }
.ch-remaster .trio .card{
  padding: 28px 26px 28px;
  border-radius: var(--r-lg);
  background: var(--glass-fill);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: var(--glass-shadow);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
}
.ch-remaster .trio .card::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--glass-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
.ch-remaster .trio .card::after{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--glass-top-shine);
  pointer-events: none;
  z-index: 0;
}
.ch-remaster .trio .card > *{ position: relative; z-index: 2; }
.ch-remaster .trio .card:hover{
  transform: translateY(-4px);
  box-shadow:
    0 1px 0 oklch(0.96 0.10 148 / 0.20) inset,
    0 -1px 0 oklch(0.10 0.02 200 / 0.5) inset,
    0 40px 70px -28px oklch(0.05 0.10 148 / 0.85),
    0 0 0 1px oklch(0.85 0.20 148 / 0.18);
}
.ch-remaster .trio .card .head{ display: flex; align-items: center; justify-content: space-between; }
.ch-remaster .trio .card .head .n{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-muted);
  letter-spacing: 0.08em;
}
.ch-remaster .trio .card .head .tag{
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.ch-remaster .trio .card h3{ font-size: 22px; letter-spacing: -0.02em; line-height: 1.18; font-weight: 500; }
.ch-remaster .trio .card h3 .it{ color: var(--fg-muted); font-weight: 400; font-style: italic; }
.ch-remaster .trio .card p{ color: var(--fg-muted); font-size: 14.5px; line-height: 1.55; margin: 0; }
.ch-remaster .trio .card .detail{
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ch-remaster .trio .card .detail span{
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--fg-muted);
  padding: 4px 10px;
  border-radius: 999px;
  background: oklch(0.50 0.04 200 / 0.06);
  border: 1px solid var(--border);
}
.ch-remaster .trio .card .detail span b{ color: var(--fg); font-weight: 500; }

.ch-remaster /* ============================================================ Plans */
.plans-head{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 56px);
}
@media (max-width: 760px){ .plans-head { grid-template-columns: 1fr; gap: 24px; } }
.ch-remaster .plans{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1040px){ .plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px){ .plans { grid-template-columns: 1fr; } }
.ch-remaster .plan{
  padding: 24px 24px 22px;
  border-radius: var(--r-lg);
  background: var(--glass-fill);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: var(--glass-shadow);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
}
.ch-remaster .plan::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--glass-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.ch-remaster .plan::after{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--glass-top-shine);
  pointer-events: none;
}
.ch-remaster .plan > *{ position: relative; z-index: 2; }
.ch-remaster .plan:hover{ transform: translateY(-4px); }
.ch-remaster .plan.popular{ background: var(--glass-fill-strong); }
.ch-remaster .plan.popular::before{
  background: linear-gradient(135deg,
    oklch(0.85 0.22 148 / 0.65) 0%,
    oklch(0.95 0.05 148 / 0.10) 25%,
    oklch(0.40 0.10 200 / 0.04) 55%,
    oklch(0.40 0.10 148 / 0.10) 80%,
    oklch(0.85 0.22 148 / 0.55) 100%);
}
.ch-remaster .plan .badge{
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: oklch(0.12 0.10 148);
  background: linear-gradient(180deg, var(--acid), var(--acid-soft));
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 4px 10px -2px var(--acid-shadow), inset 0 1px 0 oklch(1 0 0 / 0.4);
}
.ch-remaster .plan .cat{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.ch-remaster .plan h3{ font-size: 20px; font-weight: 500; letter-spacing: -0.018em; }
.ch-remaster .plan .price{
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
}
.ch-remaster .plan .price .from{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-right: 2px;
}
.ch-remaster .plan .price .amt{
  font-family: var(--sans);
  font-weight: 500;
  font-size: 44px;
  letter-spacing: -0.04em;
  line-height: 1;
}
.ch-remaster .plan .price .per{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
}
.ch-remaster .plan ul{
  list-style: none;
  margin: 6px 0 0;
  padding: 14px 0 0;
  border-top: 1px dashed oklch(0.50 0.10 148 / 0.18);
  display: grid;
  gap: 8px;
}
.ch-remaster .plan ul li{
  font-size: 13.5px;
  color: var(--fg-muted);
  padding-left: 18px;
  position: relative;
  line-height: 1.4;
}
.ch-remaster .plan ul li::before{
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--fg-subtle);
}
.ch-remaster .plan .act{
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ch-remaster .plan .act a{
  font-size: 14px;
  color: var(--fg);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ch-remaster .plan .act a:hover{ color: var(--acid); }
.ch-remaster .plan .act .arr{ transition: transform .2s ease; }
.ch-remaster .plan .act:hover .arr{ transform: translateX(3px); }

.ch-remaster /* ============================================================ Domain search */
.domain-search{
  padding: clamp(28px, 4vw, 40px);
  border-radius: var(--r-xl);
  background: var(--glass-fill-strong);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: var(--glass-shadow);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.ch-remaster .domain-search::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--glass-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.ch-remaster .domain-search::after{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--glass-top-shine);
  pointer-events: none;
}
.ch-remaster .domain-search > *{ position: relative; z-index: 2; }
@media (max-width: 820px){ .domain-search { grid-template-columns: 1fr; } }
.ch-remaster .domain-search .field{
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  background: oklch(0.10 0.02 200 / 0.40);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 10px 8px 24px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
html:not(.dark) body.ch-remaster .domain-search .field{
  background: oklch(1 0 0 / 0.55);
}
.ch-remaster .domain-search .field:focus-within{
  border-color: var(--acid);
  box-shadow: 0 0 0 4px oklch(0.85 0.22 148 / 0.18);
}
.ch-remaster .domain-search .field input{
  border: 0;
  background: transparent;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 30px);
  letter-spacing: -0.025em;
  padding: 14px 0;
  outline: none;
  width: 100%;
}
.ch-remaster .domain-search .field input::placeholder{ color: var(--fg-subtle); font-weight: 400; }
.ch-remaster .domain-search .field .tld-pick{
  font-family: var(--mono);
  font-size: 14px;
  color: var(--fg);
  padding: 0 16px 0 12px;
  border-left: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ch-remaster .domain-search .field .go{
  width: 46px; height: 46px;
  border-radius: 999px;
  background:
    radial-gradient(120% 200% at 50% 0%, oklch(1 0 0 / 0.35), transparent 50%),
    linear-gradient(180deg, var(--acid) 0%, var(--acid-soft) 100%);
  color: oklch(0.12 0.10 148);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.5),
    0 6px 18px -4px var(--acid-shadow),
    0 0 0 1px oklch(0.40 0.20 148 / 0.4);
  transition: transform .2s ease;
}
.ch-remaster .domain-search .field .go:hover{ transform: translateX(2px); }
.ch-remaster .domain-search .meta{ display: flex; flex-direction: column; gap: 12px; min-width: 240px; }
.ch-remaster .domain-search .pop{ display: flex; flex-wrap: wrap; gap: 6px; }
.ch-remaster .domain-search .pop a{
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--fg-muted);
  background: oklch(0.50 0.10 148 / 0.06);
  transition: all .15s ease;
}
.ch-remaster .domain-search .pop a:hover{ border-color: var(--acid); color: var(--acid); }
.ch-remaster .domain-search .note{
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.ch-remaster /* ============================================================ Audit */
.audit-head{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 56px);
}
@media (max-width: 760px){ .audit-head { grid-template-columns: 1fr; gap: 24px; } }
.ch-remaster .audit-cta-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: clamp(36px, 5vw, 48px);
}
.ch-remaster .audit-cta-row .meta{
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.ch-remaster .audit-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 880px){ .audit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .audit-grid { grid-template-columns: 1fr; } }
.ch-remaster .audit-grid .item{
  padding: 20px 22px 22px;
  border-radius: var(--r);
  background: var(--glass-fill);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: var(--glass-shadow);
  position: relative;
  isolation: isolate;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.ch-remaster .audit-grid .item::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--glass-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.ch-remaster .audit-grid .item > *{ position: relative; z-index: 2; }
.ch-remaster .audit-grid .item:hover{
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 oklch(0.96 0.10 148 / 0.18) inset,
    0 -1px 0 oklch(0.10 0.02 200 / 0.5) inset,
    0 30px 60px -24px oklch(0.05 0.10 148 / 0.7),
    0 0 0 1px oklch(0.85 0.20 148 / 0.20);
}
.ch-remaster .audit-grid .item:hover h4{ color: var(--acid); }
.ch-remaster .audit-grid .item .n{
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--fg-muted);
  letter-spacing: 0.08em;
}
.ch-remaster .audit-grid .item h4{
  margin: 10px 0 8px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.018em;
  transition: color .2s ease;
}
.ch-remaster .audit-grid .item p{
  margin: 0;
  font-size: 13.5px;
  color: var(--fg-muted);
  line-height: 1.55;
}

.ch-remaster /* Tiers */
.tiers-head{ margin: clamp(72px, 9vw, 110px) 0 28px; }
.ch-remaster .tiers{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 960px){ .tiers { grid-template-columns: 1fr; } }
.ch-remaster .tier{
  padding: 26px 26px 28px;
  border-radius: var(--r-lg);
  background: var(--glass-fill);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: var(--glass-shadow);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ch-remaster .tier::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--glass-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.ch-remaster .tier::after{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--glass-top-shine);
  pointer-events: none;
}
.ch-remaster .tier > *{ position: relative; z-index: 2; }
.ch-remaster .tier.featured{
  background:
    radial-gradient(120% 130% at 20% 0%, oklch(0.55 0.22 148 / 0.40), transparent 60%),
    linear-gradient(180deg, oklch(0.30 0.18 148 / 0.30), oklch(0.18 0.10 200 / 0.40));
}
.ch-remaster .tier.featured::before{
  background: linear-gradient(135deg,
    oklch(0.85 0.22 148 / 0.75) 0%,
    oklch(0.95 0.05 148 / 0.15) 25%,
    oklch(0.40 0.10 200 / 0.04) 55%,
    oklch(0.40 0.10 148 / 0.10) 80%,
    oklch(0.85 0.22 148 / 0.65) 100%);
}
.ch-remaster .tier .pre{
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ch-remaster .tier.featured .pre{ color: var(--acid); }
.ch-remaster .tier .pre .stamp{
  background: linear-gradient(180deg, var(--acid), var(--acid-soft));
  color: oklch(0.12 0.10 148);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.10em;
  font-size: 9.5px;
  box-shadow: 0 4px 10px -2px var(--acid-shadow), inset 0 1px 0 oklch(1 0 0 / 0.4);
}
.ch-remaster .tier h3{ font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.ch-remaster .tier .price-row{ display: flex; align-items: baseline; gap: 8px; }
.ch-remaster .tier .price-amt{
  font-family: var(--sans);
  font-weight: 500;
  font-size: 52px;
  letter-spacing: -0.04em;
  line-height: 1;
}
.ch-remaster .tier .price-amt.free{ color: var(--acid); }
.ch-remaster .tier .price-cur{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
}
.ch-remaster .tier .sub{ font-size: 14px; color: var(--fg-muted); }
.ch-remaster .tier ul{
  list-style: none;
  margin: 12px 0 0;
  padding: 14px 0 0;
  border-top: 1px dashed oklch(0.50 0.10 148 / 0.20);
  display: grid;
  gap: 10px;
}
.ch-remaster .tier ul li{
  font-size: 13.5px;
  color: var(--fg-muted);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}
.ch-remaster .tier ul li::before{
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--fg-subtle);
}
.ch-remaster .tier .act{ margin-top: auto; padding-top: 18px; }
.ch-remaster .btn-tier{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  background: oklch(0.50 0.10 148 / 0.08);
  border: 1px solid var(--border-strong);
  color: var(--fg);
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.ch-remaster .btn-tier:hover{ background: oklch(0.50 0.10 148 / 0.16); border-color: var(--acid); color: var(--acid); transform: translateY(-1px); }
.ch-remaster .tier.featured .btn-tier{
  background: linear-gradient(180deg, var(--acid), var(--acid-soft));
  color: oklch(0.12 0.10 148);
  border-color: transparent;
  box-shadow: 0 8px 20px -4px var(--acid-shadow), inset 0 1px 0 oklch(1 0 0 / 0.4);
}
.ch-remaster .tier.featured .btn-tier:hover{ color: oklch(0.10 0.10 148); }

.ch-remaster /* Services list */
.services{ margin-top: clamp(72px, 9vw, 110px); }
.ch-remaster .services h4{
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.025em;
  max-width: 32ch;
  margin-bottom: 24px;
  font-weight: 500;
}
.ch-remaster .services h4 .it{ color: var(--acid); }
.ch-remaster .services .list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (max-width: 720px){ .services .list { grid-template-columns: 1fr; } }
.ch-remaster .services .list a{
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--glass-fill);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 0 1px 0 oklch(0.96 0.10 148 / 0.08),
    0 6px 18px -8px oklch(0.05 0.10 148 / 0.5),
    0 0 0 1px oklch(0.95 0.05 148 / 0.04);
  font-size: 15px;
  color: var(--fg);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.ch-remaster .services .list a:hover{
  color: var(--acid);
  transform: translateX(4px);
  background: oklch(0.50 0.15 148 / 0.10);
}
.ch-remaster .services .list a .n{
  font-family: var(--mono); font-size: 10.5px; color: var(--fg-muted); letter-spacing: 0.08em;
}
.ch-remaster .services .list a .arr{ color: var(--fg-subtle); transition: transform .2s ease; font-family: var(--mono); }
.ch-remaster .services .list a:hover .arr{ transform: translateX(4px); color: var(--acid); }

.ch-remaster /* ============================================================ WEBDEV / Build */
.webdev{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: stretch;
}
@media (max-width: 960px){ .webdev { grid-template-columns: 1fr; } }
.ch-remaster .webdev .copy{ display: flex; flex-direction: column; gap: 20px; }
.ch-remaster .webdev h2 .it{
  color: var(--fg-muted);
  font-weight: 400;
  font-style: italic;
}
.ch-remaster .checklist{
  display: grid;
  gap: 0;
  margin: 6px 0;
  padding: 0;
  border-radius: var(--r);
  background: oklch(0.50 0.10 148 / 0.04);
  border: 1px solid var(--border);
  list-style: none;
  overflow: hidden;
}
.ch-remaster .checklist li{
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: baseline;
  font-size: 14.5px;
  padding: 14px 18px;
  border-top: 1px dashed var(--border);
  color: var(--fg);
}
.ch-remaster .checklist li:first-child{ border-top: 0; }
.ch-remaster .checklist li .n{
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--fg-subtle);
}

.ch-remaster /* Terminal */
.terminal{
  border-radius: var(--r-lg);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  overflow: hidden;
  background:
    linear-gradient(180deg, oklch(0.16 0.018 200) 0%, oklch(0.13 0.018 200) 100%);
  box-shadow:
    inset 0 1px 0 oklch(0.96 0.10 148 / 0.08),
    inset 0 -1px 0 oklch(0.05 0.02 200 / 0.5),
    0 30px 60px -28px oklch(0.05 0.10 148 / 0.7),
    0 0 0 1px oklch(0.95 0.05 148 / 0.06);
  position: relative;
  isolation: isolate;
}
.ch-remaster .terminal::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg,
    oklch(0.85 0.18 148 / 0.40) 0%,
    oklch(0.40 0.10 148 / 0.05) 30%,
    oklch(0.30 0.05 200 / 0.05) 70%,
    oklch(0.85 0.18 148 / 0.25) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
html:not(.dark) body.ch-remaster .terminal{
  background: linear-gradient(180deg, oklch(0.18 0.018 200) 0%, oklch(0.14 0.018 200) 100%);
  /* keep dark even in light mode, terminal is meant to be dark */
}
.ch-remaster .terminal .topbar{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid oklch(0.95 0.05 148 / 0.10);
  color: oklch(0.92 0.012 200);
}
.ch-remaster .terminal .topbar .tlights{ display: inline-flex; gap: 6px; }
.ch-remaster .terminal .topbar .tlights span{ width: 9px; height: 9px; border-radius: 999px; background: oklch(0.35 0.012 200); }
.ch-remaster .terminal .topbar .tlights span:nth-child(1){ background: oklch(0.65 0.18 30); }
.ch-remaster .terminal .topbar .tlights span:nth-child(2){ background: oklch(0.78 0.15 95); }
.ch-remaster .terminal .topbar .tlights span:nth-child(3){ background: oklch(0.74 0.18 148); }
.ch-remaster .terminal .topbar .file{ font-size: 11px; letter-spacing: 0.04em; color: oklch(0.62 0.012 200); margin-left: 6px; }
.ch-remaster .terminal .topbar .live{
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: oklch(0.84 0.22 148);
}
.ch-remaster .terminal .topbar .live::before{
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: oklch(0.78 0.22 148);
  box-shadow: 0 0 10px oklch(0.78 0.22 148 / 0.7);
}
.ch-remaster .terminal .body{ padding: 20px 22px 24px; color: oklch(0.95 0.012 200); }
.ch-remaster .terminal .ln{ display: grid; grid-template-columns: 26px 1fr; gap: 14px; }
.ch-remaster .terminal .ln .num{ color: oklch(0.40 0.012 200); user-select: none; text-align: right; }
.ch-remaster .tok-key{ color: oklch(0.78 0.22 148); }
.ch-remaster .tok-prop{ color: oklch(0.86 0.012 200); }
.ch-remaster .tok-str{ color: oklch(0.82 0.10 80); }
.ch-remaster .tok-bool{ color: oklch(0.78 0.15 30); }
.ch-remaster .tok-com{ color: oklch(0.45 0.012 200); font-style: italic; }
.ch-remaster .tok-punct{ color: oklch(0.55 0.012 200); }
.ch-remaster .terminal .body .footer-ln{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed oklch(0.95 0.05 148 / 0.12);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  color: oklch(0.55 0.012 200);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.ch-remaster .cursor{
  display: inline-block;
  width: 8px; height: 1em;
  vertical-align: -2px;
  background: oklch(0.78 0.22 148);
  margin-left: 2px;
  animation: blink 1s steps(2) infinite;
}
@keyframes blink{ 50% { opacity: 0; } }

.ch-remaster /* CSS 3D site stack */
.stack3d{
  perspective: 1600px;
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.ch-remaster .stack3d .scene{
  position: relative;
  width: min(100%, 340px);
  aspect-ratio: 3 / 4;
  transform-style: preserve-3d;
  transform: rotateX(8deg) rotateY(-22deg) rotateZ(2deg);
  transition: transform .6s cubic-bezier(.18,.85,.25,1);
}
.ch-remaster .stack3d .plate{
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: var(--glass-fill-strong);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    inset 0 1px 0 oklch(0.96 0.10 148 / 0.16),
    inset 0 -1px 0 oklch(0.05 0.02 200 / 0.4),
    0 30px 60px -24px oklch(0.05 0.10 148 / 0.65),
    0 0 0 1px oklch(0.85 0.22 148 / 0.18);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  isolation: isolate;
}
.ch-remaster .stack3d .plate::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, oklch(0.96 0.10 148 / 0.10) 0%, transparent 30%);
  pointer-events: none;
}
.ch-remaster .stack3d .plate.p1{ transform: translateZ(0px); }
.ch-remaster .stack3d .plate.p2{ transform: translateZ(56px) translateX(28px) translateY(-22px); }
.ch-remaster .stack3d .plate.p3{ transform: translateZ(112px) translateX(-32px) translateY(20px); }
.ch-remaster .stack3d .plate.p4{ transform: translateZ(168px) translateX(14px) translateY(-42px); }
.ch-remaster .stack3d .plate .bar{
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--fg-subtle);
  padding-bottom: 8px;
  border-bottom: 1px solid oklch(0.95 0.05 148 / 0.08);
}
.ch-remaster .stack3d .plate .bar .dotrow{ display: inline-flex; gap: 4px; }
.ch-remaster .stack3d .plate .bar .dotrow span{ width: 6px; height: 6px; border-radius: 999px; background: oklch(0.40 0.05 200); }
.ch-remaster .stack3d .plate .bar .url{ margin-left: auto; color: var(--fg-muted); }
.ch-remaster .stack3d .plate .hero-band{
  flex: 1;
  border-radius: 8px;
  background:
    radial-gradient(60% 80% at 30% 30%, oklch(0.85 0.22 148 / 0.30), transparent 70%),
    linear-gradient(135deg, oklch(0.30 0.10 148 / 0.30), oklch(0.18 0.05 200 / 0.50));
  position: relative;
  overflow: hidden;
  border: 1px solid oklch(0.95 0.05 148 / 0.08);
}
.ch-remaster .stack3d .plate .hero-band .tag{
  position: absolute; top: 10px; left: 12px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-subtle);
}
.ch-remaster .stack3d .plate .hero-band .ttl{
  position: absolute; bottom: 12px; left: 12px;
  font-size: 18px; font-weight: 500; letter-spacing: -0.02em;
  color: var(--fg);
}
.ch-remaster .stack3d .plate .hero-band .ttl .it{
  color: var(--fg-muted);
  font-style: italic;
}
.ch-remaster .stack3d .plate .rows{ display: grid; gap: 5px; }
.ch-remaster .stack3d .plate .rows .r{ height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, oklch(0.50 0.10 148 / 0.4), oklch(0.50 0.10 148 / 0.10) 80%, transparent);
}
.ch-remaster .stack3d .plate .rows .r.w70{ width: 70%; }
.ch-remaster .stack3d .plate .rows .r.w50{ width: 50%; }

.ch-remaster .stack3d .floater{
  position: absolute;
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  border-radius: 8px;
  transform: translateZ(220px) rotate(4deg);
  white-space: nowrap;
  animation: float 5s ease-in-out infinite;
}
.ch-remaster .stack3d .floater.a{
  top: 8%; right: 6%;
  background: oklch(0.18 0.02 200 / 0.85);
  color: var(--fg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(0.95 0.05 148 / 0.18);
  box-shadow: 0 14px 26px -14px oklch(0.05 0.10 148 / 0.6);
}
.ch-remaster .stack3d .floater.b{
  bottom: 6%; left: 4%;
  background: linear-gradient(180deg, var(--acid), var(--acid-soft));
  color: oklch(0.12 0.10 148);
  transform: translateZ(200px) rotate(-3deg);
  animation-name: float-b;
  box-shadow: 0 14px 26px -14px var(--acid-shadow);
}
@keyframes float{
  0%, 100% { transform: translateZ(220px) translateY(0) rotate(4deg); }
  50% { transform: translateZ(220px) translateY(-10px) rotate(4deg); }
}
@keyframes float-b{
  0%, 100% { transform: translateZ(200px) translateY(0) rotate(-3deg); }
  50% { transform: translateZ(200px) translateY(8px) rotate(-3deg); }
}

.ch-remaster /* ============================================================ Steps */
.steps{
  display: grid;
  grid-template-columns: 1fr 2.2fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 880px){ .steps { grid-template-columns: 1fr; gap: 24px; } }
.ch-remaster .steps-list{
  display: grid;
  gap: 12px;
}
.ch-remaster .step{
  padding: 22px 24px;
  border-radius: var(--r);
  background: var(--glass-fill);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: var(--glass-shadow);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 64px 1fr 1.4fr;
  gap: 20px;
  align-items: baseline;
}
.ch-remaster .step::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--glass-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.ch-remaster .step > *{ position: relative; z-index: 2; }
@media (max-width: 720px){ .step { grid-template-columns: 44px 1fr; }
  .step p { grid-column: 1 / -1; padding-left: 0; }
}
.ch-remaster .step .n{
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--fg-subtle);
  font-variant-numeric: tabular-nums;
}
.ch-remaster .step h3{ font-size: clamp(20px, 2vw, 26px); font-weight: 500; letter-spacing: -0.02em; }
.ch-remaster .step p{ font-size: 14.5px; color: var(--fg-muted); line-height: 1.55; margin: 0; }

.ch-remaster /* ============================================================ FAQ */
.faq{
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 880px){ .faq { grid-template-columns: 1fr; gap: 24px; } }
.ch-remaster .faq h2 .it{
  color: var(--fg-muted);
  font-style: italic;
  font-weight: 400;
}
.ch-remaster .faq-list{
  display: grid;
  gap: 8px;
}
.ch-remaster .faq-item{
  border-radius: var(--r);
  background: var(--glass-fill);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: var(--glass-shadow);
  position: relative;
  isolation: isolate;
  transition: background .25s ease;
}
.ch-remaster .faq-item::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--glass-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.ch-remaster .faq-item > *{ position: relative; z-index: 2; }
.ch-remaster .faq-item[open]{ background: var(--glass-fill-strong); }
.ch-remaster .faq-item summary{
  list-style: none;
  cursor: pointer;
  padding: 20px 22px;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 16px;
  align-items: center;
}
.ch-remaster .faq-item summary::-webkit-details-marker{ display: none; }
.ch-remaster .faq-item summary .ind{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-muted);
  letter-spacing: 0.06em;
}
.ch-remaster .faq-item summary .q{
  font-size: clamp(16px, 1.4vw, 18px);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.3;
  color: var(--fg);
}
.ch-remaster .faq-item summary .stat{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-subtle);
  display: none;
}
@media (min-width: 720px){ .faq-item summary .stat { display: inline; } }
.ch-remaster .faq-item summary .plus{
  position: relative;
  width: 20px; height: 20px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .25s ease, background .25s ease;
}
.ch-remaster .faq-item summary .plus::before, .ch-remaster .faq-item summary .plus::after{
  content: "";
  position: absolute;
  background: var(--fg);
  transition: transform .25s ease;
}
.ch-remaster .faq-item summary .plus::before{ width: 8px; height: 1px; }
.ch-remaster .faq-item summary .plus::after{ width: 1px; height: 8px; }
.ch-remaster .faq-item[open] summary .plus{
  background: var(--acid);
  border-color: var(--acid);
}
.ch-remaster .faq-item[open] summary .plus::before, .ch-remaster .faq-item[open] summary .plus::after{ background: oklch(0.12 0.10 148); }
.ch-remaster .faq-item[open] summary .plus::after{ transform: scaleY(0); }
.ch-remaster .faq-item .a{
  padding: 0 22px 22px;
  font-size: 14.5px;
  color: var(--fg-muted);
  line-height: 1.65;
  max-width: 70ch;
}
.ch-remaster .faq-item .a a{ color: var(--acid); border-bottom: 1px solid oklch(0.84 0.22 148 / 0.4); }
.ch-remaster .faq-item .a strong{ color: var(--fg); font-weight: 500; }

.ch-remaster /* ============================================================ CTA */
.cta{
  padding: clamp(48px, 6vw, 80px);
  border-radius: var(--r-xl);
  background:
    radial-gradient(60% 80% at 100% 0%, oklch(0.55 0.22 148 / 0.35), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, oklch(0.40 0.18 200 / 0.30), transparent 60%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
  border: 1px solid var(--border);
  position: relative;
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 oklch(0.96 0.10 148 / 0.12),
    0 30px 60px -24px oklch(0.05 0.10 148 / 0.6);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: end;
}
@media (max-width: 760px){ .cta { grid-template-columns: 1fr; gap: 24px; } }
.ch-remaster .cta::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--glass-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.ch-remaster .cta h2{
  font-size: clamp(40px, 5.6vw, 84px);
  letter-spacing: -0.038em;
  line-height: 0.98;
}
.ch-remaster .cta h2 .it{
  color: var(--fg-muted);
  font-style: italic;
  font-weight: 400;
}
.ch-remaster .cta .meta{ display: flex; flex-direction: column; gap: 16px; }
.ch-remaster .cta .actions{ display: flex; gap: 10px; flex-wrap: wrap; }
.ch-remaster .cta .note{
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.ch-remaster /* ============================================================ Footer */
.footer{
  margin-top: clamp(56px, 7vw, 100px);
  padding: clamp(48px, 6vw, 80px) 0 24px;
  border-top: 1px solid var(--border);
  background:
    radial-gradient(60% 100% at 50% 0%, oklch(0.30 0.10 148 / 0.20), transparent 60%);
}
.ch-remaster .footer-top{
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr) auto;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border);
}
@media (max-width: 980px){ .footer-top { grid-template-columns: 1fr 1fr; gap: 32px 24px; } }
.ch-remaster .footer .col h5{
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin: 0 0 18px;
  font-weight: 500;
}
.ch-remaster .footer .col ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ch-remaster .footer .col ul a{ font-size: 14px; color: var(--fg-muted); }
.ch-remaster .footer .col ul a:hover{ color: var(--fg); }
.ch-remaster .footer .brand-col{ max-width: 32ch; }
.ch-remaster .footer .brand-col .tag{ font-size: 16px; line-height: 1.45; color: var(--fg-muted); margin: 14px 0 18px; max-width: 28ch; }
.ch-remaster .footer .brand-col .social{ display: flex; gap: 8px; }
.ch-remaster .footer .brand-col .social a{
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-muted);
  background: oklch(0.50 0.10 148 / 0.04);
  transition: all .15s ease;
}
.ch-remaster .footer .brand-col .social a:hover{ border-color: var(--acid); color: var(--acid); }
.ch-remaster .footer .brand-col .social svg{ width: 14px; height: 14px; }
.ch-remaster .footer-bot{
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
}
.ch-remaster .footer-bot .legal-row{ display: flex; flex-wrap: wrap; gap: 14px; }
.ch-remaster .footer-bot .legal-row a:hover{ color: var(--fg); }
.ch-remaster .footer-bot .corp{ letter-spacing: 0.10em; }

.ch-remaster /* ============================================================ Reveals (defensive, default visible, .ch-remaster animate only h1 + on demand) */
[data-reveal], .ch-remaster [data-reveal-stagger] > *{
  opacity: 1;
  transform: none;
}

.ch-remaster /* Headline word reveal, words visible by default, .ch-remaster no overflow clip */
.h1-reveal .word{ display: inline-block; vertical-align: baseline; margin-right: 0.10em; }
.ch-remaster .h1-reveal .word .inner{ display: inline-block; }
@keyframes word-in{
  from { transform: translateY(110%); }
  to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .h1-reveal .word .inner { transform: none !important; }
  .ambient .orb { animation: none !important; }
}

/* ============================================================
   Ratio + breathing-room pass (post-launch tightening).
   The first cut felt cramped against the WHMCS shell; these
   rules loosen the hero stage, give the 3D orb a taller frame,
   and pull the H1 down so the lines breathe.
   ============================================================ */
.ch-remaster .hero { padding: clamp(40px, 5vw, 80px) 0 clamp(56px, 7vw, 100px); }
.ch-remaster .hero-stage { gap: clamp(40px, 5vw, 84px); align-items: stretch; }
.ch-remaster .hero-3d { min-height: clamp(540px, 56vw, 680px); }
.ch-remaster .hero h1 {
  font-size: clamp(42px, 6.6vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.034em;
}
.ch-remaster .hero-left { gap: clamp(28px, 3.4vw, 44px); }
.ch-remaster .hero-meta { margin-bottom: clamp(36px, 4.5vw, 56px); }
.ch-remaster .hero-stats { margin-top: clamp(64px, 7vw, 96px); gap: 14px; }
.ch-remaster .stat-card { padding: 26px 24px 22px; }
.ch-remaster .marquee { padding: 22px 0; }
.ch-remaster .section-pad { padding: clamp(88px, 10vw, 144px) 0; }
.ch-remaster .trio { gap: 20px; }
.ch-remaster .trio .card { padding: 32px 28px; gap: 16px; }
.ch-remaster .plans { gap: 16px; }
.ch-remaster .plan { padding: 26px 26px 24px; gap: 16px; }

/* ============================================================
   Monochromity break: each "tier 1" surface gets a different
   hue stripe so the page isn't a single-green wash. The base
   green stays as the primary brand accent (CTAs, primary
   buttons, featured tier) — these per-card hues live on the
   top-edge highlight and the spec-chip tags only, so the
   overall palette stays restrained.
   ============================================================ */
.ch-remaster {
  --acid-cyan:    oklch(0.82 0.16 220);   /* cool blue-cyan for technical */
  --acid-amber:   oklch(0.84 0.16 78);    /* warm amber for security */
  --acid-violet:  oklch(0.78 0.16 295);   /* soft violet for support / build */
}
html:not(.dark) .ch-remaster {
  --acid-cyan:    oklch(0.58 0.18 220);
  --acid-amber:   oklch(0.66 0.18 78);
  --acid-violet:  oklch(0.55 0.18 295);
}

/* Trio: each card carries a different top-edge tint and chip color */
.ch-remaster .trio .card:nth-child(1)::before {
  background: linear-gradient(135deg,
    oklch(0.95 0.10 220 / 0.32) 0%,
    oklch(0.85 0.02 200 / 0.06) 25%,
    oklch(0.40 0.02 200 / 0.03) 55%,
    oklch(0.40 0.02 200 / 0.06) 80%,
    oklch(0.85 0.10 220 / 0.20) 100%);
}
.ch-remaster .trio .card:nth-child(1) .head .tag,
.ch-remaster .trio .card:nth-child(1) .detail span b { color: var(--acid-cyan); }
.ch-remaster .trio .card:nth-child(2)::before {
  background: linear-gradient(135deg,
    oklch(0.95 0.10 78 / 0.30) 0%,
    oklch(0.85 0.02 200 / 0.06) 25%,
    oklch(0.40 0.02 200 / 0.03) 55%,
    oklch(0.40 0.02 200 / 0.06) 80%,
    oklch(0.85 0.10 78 / 0.18) 100%);
}
.ch-remaster .trio .card:nth-child(2) .head .tag,
.ch-remaster .trio .card:nth-child(2) .detail span b { color: var(--acid-amber); }
/* Card 3 stays green-tinted (default --glass-edge) */
.ch-remaster .trio .card:nth-child(3) .head .tag,
.ch-remaster .trio .card:nth-child(3) .detail span b { color: var(--acid); }

/* Plans: vary the cat label color so the four plans read as distinct
   product lines, not four green rectangles. Popular stays full green. */
.ch-remaster .plan:nth-child(1) .cat { color: var(--acid-cyan); }
.ch-remaster .plan:nth-child(2) .cat { color: var(--acid); }
.ch-remaster .plan:nth-child(3) .cat { color: var(--acid-amber); }
.ch-remaster .plan:nth-child(4) .cat { color: var(--acid-violet); }

/* Audit grid: cycle through three hues for the index numerals so
   the 3x3 grid has rhythm instead of nine identical mono tiles. */
.ch-remaster .audit-grid .item:nth-child(3n+1) .n { color: var(--acid-cyan); }
.ch-remaster .audit-grid .item:nth-child(3n+2) .n { color: var(--acid-amber); }
.ch-remaster .audit-grid .item:nth-child(3n+3) .n { color: var(--acid); }

/* Services list: cycle accent on hover so the list isn't 8 green rows */
.ch-remaster .services .list a:nth-child(4n+1):hover { color: var(--acid-cyan); }
.ch-remaster .services .list a:nth-child(4n+1):hover .arr { color: var(--acid-cyan); }
.ch-remaster .services .list a:nth-child(4n+2):hover { color: var(--acid-amber); }
.ch-remaster .services .list a:nth-child(4n+2):hover .arr { color: var(--acid-amber); }
.ch-remaster .services .list a:nth-child(4n+3):hover { color: var(--acid-violet); }
.ch-remaster .services .list a:nth-child(4n+3):hover .arr { color: var(--acid-violet); }
/* :nth-child(4n+4) stays --acid (current green) */

/* Steps: vary the giant numerals 01/02/03 across three hues */
.ch-remaster .steps-list .step:nth-child(1) .n { color: var(--acid-cyan); }
.ch-remaster .steps-list .step:nth-child(2) .n { color: var(--acid-amber); }
.ch-remaster .steps-list .step:nth-child(3) .n { color: var(--acid); }

/* CTA section: warm the ambient orbs slightly so the closer reads
   differently than the hero. Stays green-dominant but adds depth. */
.ch-remaster .cta {
  background:
    radial-gradient(60% 80% at 100% 0%, oklch(0.55 0.20 78 / 0.20), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, oklch(0.40 0.18 200 / 0.28), transparent 60%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
}

/* =========================================================
   Fix the dual-logo bleed inside .ch-remaster.
   The remaster's universal `.ch-remaster img { display: block }`
   (specificity 0,1,1) silently outranks the site's logo toggle
   `.ch-logo-dark { display: none }` (0,1,0), so in light mode
   the .ch-logo-dark image was rendering under the main nav.
   Re-assert the toggle at .ch-remaster scope so it wins. Same
   fix applies to the mobile-menu logo pair. */
.ch-remaster .ch-logo-light,
.ch-remaster .ch-mobile-logo.ch-logo-light { display: block; }
.ch-remaster .ch-logo-dark,
.ch-remaster .ch-mobile-logo.ch-logo-dark  { display: none;  }
html.dark .ch-remaster .ch-logo-light,
html.dark .ch-remaster .ch-mobile-logo.ch-logo-light { display: none;  }
html.dark .ch-remaster .ch-logo-dark,
html.dark .ch-remaster .ch-mobile-logo.ch-logo-dark  { display: block; }

/* ============================================================
   Mobile + tablet adaptation pass.
   Not pixel-scaling — rethinks layout density, touch ergonomics,
   and information priority for narrow viewports. Touch targets
   are 44–48px minimum, hover-only flourishes are hidden, the
   featured audit tier is promoted to first position on mobile
   so it's seen before the user has to scroll past two competitors.
   ============================================================ */

/* ---- Tablet: 641–1024px ---- */
@media (min-width: 641px) and (max-width: 1024px) {
  /* Hero stacks (3D panel below the headline) and the orb caps
     at a portrait aspect so it doesn't dominate the fold. */
  .ch-remaster .hero { padding: 32px 0 56px; }
  .ch-remaster .hero-stage { grid-template-columns: 1fr; gap: 32px; }
  .ch-remaster .hero h1 { font-size: clamp(48px, 8.2vw, 76px); line-height: 0.98; }
  .ch-remaster .hero-3d {
    min-height: clamp(440px, 60vw, 540px);
    max-width: 620px;
    margin-inline: auto;
    width: 100%;
  }
  .ch-remaster .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ch-remaster .hero-sub { gap: 20px; }

  /* Trio: 2+1 layout (third card spans full width). Breaks the
     "endless identical grid" reflex. */
  .ch-remaster .trio { grid-template-columns: 1fr 1fr; gap: 14px; }
  .ch-remaster .trio .card:nth-child(3) { grid-column: 1 / -1; }

  .ch-remaster .plans { grid-template-columns: 1fr 1fr; gap: 14px; }
  .ch-remaster .audit-grid { grid-template-columns: 1fr 1fr; gap: 12px; }

  /* Tiers: featured promoted to top and spans full width on tablet */
  .ch-remaster .tiers { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ch-remaster .tier.featured { grid-column: 1 / -1; order: -1; }

  /* WebDev / Steps / FAQ / CTA all stack on tablet — two-column
     hero+detail layouts get cramped under 1024px. */
  .ch-remaster .webdev { grid-template-columns: 1fr; gap: 40px; }
  .ch-remaster .stack3d .scene { transform: rotateX(6deg) rotateY(-16deg) rotateZ(1deg); }
  .ch-remaster .steps { grid-template-columns: 1fr; gap: 24px; }
  .ch-remaster .faq { grid-template-columns: 1fr; gap: 28px; }
  .ch-remaster .cta { grid-template-columns: 1fr; padding: clamp(40px, 5vw, 64px); gap: 24px; }

  .ch-remaster .section-pad { padding: 72px 0; }
  .ch-remaster .section-pad-sm { padding: 56px 0; }

  /* 44px touch target floor on all primary actions */
  .ch-remaster .btn,
  .ch-remaster .btn-tier,
  .ch-remaster .services .list a,
  .ch-remaster .plan .act a { min-height: 44px; }
}

/* ---- Mobile: ≤640px ---- */
@media (max-width: 640px) {
  /* Tighter gutter, less vertical air between sections */
  .ch-remaster .wrap { padding-inline: 18px; }
  .ch-remaster .section-pad { padding: 56px 0; }
  .ch-remaster .section-pad-sm { padding: 40px 0; }
  .ch-remaster .section-label { margin-bottom: 28px; }

  /* HERO --------------------------------------------------- */
  .ch-remaster .hero { padding: 24px 0 40px; }
  .ch-remaster .hero-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 24px;
  }
  .ch-remaster .hero-stage { grid-template-columns: 1fr; gap: 28px; }
  .ch-remaster .hero h1 {
    font-size: clamp(38px, 11vw, 56px);
    letter-spacing: -0.03em;
    line-height: 1;
  }
  .ch-remaster .hero-sub { grid-template-columns: 1fr; gap: 18px; }
  .ch-remaster .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .ch-remaster .hero-actions .btn {
    justify-content: center;
    min-height: 48px;
  }

  /* 3D panel: contained, taller-than-wide so the orb has room */
  .ch-remaster .hero-3d {
    min-height: 460px;
    border-radius: var(--r);
  }
  .ch-remaster .hero-3d .hud { top: 16px; left: 18px; right: 18px; }
  .ch-remaster .hero-3d .probe-stage {
    left: 14px; right: 14px; bottom: 14px;
    padding: 12px 14px;
  }
  .ch-remaster .hero-3d .probe-form { padding: 4px 4px 4px 10px; }
  .ch-remaster .hero-3d .probe-input { font-size: 13px; }
  .ch-remaster .hero-3d .probe-btn { min-height: 38px; padding: 8px 12px; }
  .ch-remaster .hero-3d .readout,
  .ch-remaster .hero-3d .result-metrics { gap: 8px; }
  .ch-remaster .hero-3d .readout .v { font-size: 11.5px; }
  .ch-remaster .hero-3d .result-metrics .v { font-size: 18px; }
  .ch-remaster .hero-3d .result-actions { gap: 10px; }

  /* Hero stats: 2×2, tighter cards */
  .ch-remaster .hero-stats {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 36px;
  }
  .ch-remaster .stat-card { padding: 18px 16px 16px; gap: 4px; }
  .ch-remaster .stat-card .v { font-size: clamp(28px, 9vw, 38px); }
  .ch-remaster .stat-card .a { font-size: 11.5px; }

  /* MARQUEE ------------------------------------------------ */
  .ch-remaster .marquee { padding: 16px 0; }
  .ch-remaster .marquee .label { padding-left: 18px; }
  .ch-remaster .marquee .item { padding: 0 18px; font-size: 13px; }

  /* TRIO --------------------------------------------------- */
  .ch-remaster .trio { grid-template-columns: 1fr; gap: 14px; }
  .ch-remaster .trio-header { grid-template-columns: 1fr; gap: 16px; margin-bottom: 28px; }
  .ch-remaster .trio .card { padding: 24px 22px; gap: 14px; }
  .ch-remaster .trio .card h3 { font-size: 20px; }

  /* PLANS -------------------------------------------------- */
  .ch-remaster .plans-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 28px; }
  .ch-remaster .plans { grid-template-columns: 1fr; gap: 14px; }
  .ch-remaster .plan { padding: 22px 22px 20px; }
  .ch-remaster .plan h3 { font-size: 19px; }
  .ch-remaster .plan .price .amt { font-size: 38px; }
  /* Promote "popular" plan to first so the strongest signal lands above the fold */
  .ch-remaster .plans .plan.popular { order: -1; }
  .ch-remaster .plan .act { padding-top: 16px; }
  .ch-remaster .plan .act a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* DOMAIN SEARCH ----------------------------------------- */
  .ch-remaster .domain-search {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 22px;
  }
  .ch-remaster .domain-search .field {
    grid-template-columns: 1fr auto;
    padding: 6px 6px 6px 18px;
    gap: 6px;
  }
  .ch-remaster .domain-search .field input {
    font-size: 18px;
    padding: 12px 0;
  }
  .ch-remaster .domain-search .field .tld-pick {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px dashed var(--border);
    padding: 10px 0 0;
    margin-top: 6px;
    justify-self: start;
  }
  .ch-remaster .domain-search .field .go { width: 44px; height: 44px; }
  .ch-remaster .domain-search .pop a { font-size: 11px; padding: 5px 10px; }

  /* AUDIT -------------------------------------------------- */
  .ch-remaster .audit-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 28px; }
  .ch-remaster .audit-cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-bottom: 32px;
  }
  .ch-remaster .audit-cta-row > div { flex-direction: column; }
  .ch-remaster .audit-cta-row .btn { justify-content: center; min-height: 48px; }
  .ch-remaster .audit-grid { grid-template-columns: 1fr; gap: 12px; }
  .ch-remaster .audit-grid .item { padding: 18px 20px 20px; }

  /* TIERS — featured first on mobile (it's the conversion target) */
  .ch-remaster .tiers-head { margin-top: 56px; }
  .ch-remaster .tiers { grid-template-columns: 1fr; gap: 14px; }
  .ch-remaster .tier { padding: 24px 22px 26px; }
  .ch-remaster .tier .price-amt { font-size: 44px; }
  .ch-remaster .tier.featured { order: -1; }
  .ch-remaster .btn-tier {
    min-height: 48px;
    justify-content: center;
    width: 100%;
  }

  /* SERVICES ---------------------------------------------- */
  .ch-remaster .services { margin-top: 56px; }
  .ch-remaster .services h4 { font-size: 22px; margin-bottom: 20px; }
  .ch-remaster .services .list { grid-template-columns: 1fr; gap: 8px; }
  .ch-remaster .services .list a {
    grid-template-columns: 28px 1fr auto;
    padding: 16px 18px;
    min-height: 56px;
    align-items: center;
  }

  /* WEBDEV ------------------------------------------------ */
  .ch-remaster .webdev { grid-template-columns: 1fr; gap: 32px; }
  .ch-remaster .webdev h2 { font-size: clamp(32px, 7.6vw, 44px); }
  .ch-remaster .checklist li { padding: 12px 14px; font-size: 13.5px; }
  .ch-remaster .terminal .body { padding: 16px 18px 20px; font-size: 12px; }
  .ch-remaster .terminal .ln { grid-template-columns: 22px 1fr; gap: 10px; }
  .ch-remaster .terminal .topbar .file { font-size: 10px; }
  /* Stack3D is mouse-parallax decoration. On touch it's inert and adds
     ~340px of dead height. Hide it on mobile. */
  .ch-remaster .stack3d { display: none; }

  /* STEPS ------------------------------------------------- */
  .ch-remaster .steps { grid-template-columns: 1fr; gap: 24px; }
  .ch-remaster .step {
    grid-template-columns: 44px 1fr;
    gap: 14px;
    padding: 20px 22px;
  }
  .ch-remaster .step .n { font-size: 32px; }
  .ch-remaster .step h3 { font-size: 18px; }
  .ch-remaster .step p {
    grid-column: 1 / -1;
    padding-left: 58px;
    margin-top: 4px;
  }

  /* FAQ --------------------------------------------------- */
  .ch-remaster .faq { grid-template-columns: 1fr; gap: 24px; }
  .ch-remaster .faq h2 { font-size: clamp(32px, 8vw, 44px); }
  .ch-remaster .faq-item summary {
    padding: 18px 18px;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    min-height: 56px;
  }
  .ch-remaster .faq-item summary .stat { display: none; }
  .ch-remaster .faq-item summary .q { font-size: 15px; }
  .ch-remaster .faq-item .a { padding: 0 18px 20px; font-size: 14px; line-height: 1.6; }

  /* CTA --------------------------------------------------- */
  .ch-remaster .cta {
    grid-template-columns: 1fr;
    padding: 36px 24px;
    gap: 22px;
  }
  .ch-remaster .cta h2 { font-size: clamp(36px, 10vw, 56px); }
  .ch-remaster .cta .actions { flex-direction: column; align-items: stretch; }
  .ch-remaster .cta .actions .btn {
    justify-content: center;
    min-height: 48px;
  }
}