/* ============================================================
   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 */
  /* 1440 matches the modern reference desktop (was 1280, which left
     hero copy gasping on >1366px viewports — h1 wrapped 3-4 times
     instead of 2). Sections that were tuned to 1280 still look right
     at 1440 because they use fluid `1fr` columns.

     IMPORTANT: increasing --max alone isn't enough. The .wrap lives
     inside WHMCS's Bootstrap .container which is capped at 1140px on
     xl viewports. The override at the bottom of this file
     (`body.ch-remaster .container`) lifts that cap for the homepage. */
  --max: 1440px;
  --max-narrow: 920px;
  --gutter: clamp(20px, 4vw, 56px);
  /* Border-radius scale — tightened from the original (10/16/24/32)
     because the larger sizes were reading as too soft / "sloppy"
     across cards, panels, and the hero. New scale is more restrained
     while keeping a clear hierarchy. --r-md is a new alias used by
     newer code (e.g. the marquee) that wants the 10px middle stop. */
  --r-sm: 6px;
  --r-md: 10px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 22px;
}

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.66 0.21 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 22px 48px -28px oklch(0.62 0.09 148 / 0.15),
    0 5px 16px -10px oklch(0.60 0.07 148 / 0.09),
    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.80 0.13 148 / 0.18), 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;
}
/* Spacing between the kicker row and the H1 below — used to be flush.
   Targets only kickers that are the LAST kicker before the H1. */
.ch-remaster .hero .kicker + .kicker{ margin-left: 8px; }
.ch-remaster .hero .kicker:last-of-type{ margin-bottom: 22px; }
@media (max-width: 640px){
  .ch-remaster .hero .kicker:last-of-type{ margin-bottom: 16px; }
}
/* Kicker decoration: a static thin line with a brand-green dot that
   swipes along it left → right → left. Two background layers in one
   pseudo-element:
     - Layer 1 (dot): 7×7 radial gradient circle, position animated
       via `background-position`. 0%/50% = anchored to the left end;
       100%/50% = anchored to the right end. The browser interpolates
       background-position smoothly with the keyframe ease curve.
     - Layer 2 (line): a thin 22×1 horizontal stroke fading in/out at
       the ends so it reads as a soft track rather than a hard rule.
       Static — never moves.

   Timing: 5.4s cycle, 0–42% holds at left, 42–50% slides right,
   50–92% holds at right, 92–100% slides back. ~16% of the cycle is
   in motion; the rest is quiet. Long-still, brief-swipe pattern so
   it never steals focus from the page content. */
.ch-remaster .kicker::before{
  content: "";
  display: inline-block;
  width: 22px;
  height: 8px;
  flex: 0 0 auto;
  /* Compositor hint: animating background-position triggers a paint;
     promoting the layer keeps it isolated from surrounding text. */
  will-change: background-position;
  background-image:
    /* Dot */
    radial-gradient(circle, var(--primary) 2.5px, transparent 3.2px),
    /* Line */
    linear-gradient(
      90deg,
      transparent 0%,
      color-mix(in oklch, var(--primary) 30%, transparent) 18%,
      color-mix(in oklch, var(--primary) 30%, transparent) 82%,
      transparent 100%
    );
  background-size: 7px 7px, 22px 1px;
  background-repeat: no-repeat, no-repeat;
  background-position: 0% 50%, 50% 50%;
  opacity: 0.95;
  animation: chKickerSwipe 5.4s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes chKickerSwipe {
  0%, 42%   { background-position: 0%   50%, 50% 50%; }
  50%, 92%  { background-position: 100% 50%, 50% 50%; }
  100%      { background-position: 0%   50%, 50% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-remaster .kicker::before { animation: none; }
}
.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(28px, 3vw, 48px) 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;
  /* Text-heavy hero: copy needs ~60% of the row so the h1 lands on
     two lines per sentence instead of four, and the lead doesn't
     wrap every 6 words. The 3D widget still has plenty of room
     (~480px at 1440 max-width). */
  grid-template-columns: 1.55fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: stretch;
}
@media (max-width: 1100px){ .hero-stage { grid-template-columns: 1.35fr 1fr; } }
@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;
  /* Lead paragraph gets the lion's share — it's the actual reading
     surface. Promises card stays a fixed minimum so the green border
     box doesn't squish. */
  grid-template-columns: 1.7fr 0.9fr;
  gap: clamp(24px, 3vw, 48px);
  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 position — desktop kept at the original tight
   spacing (top:32, left/right:38) which the user confirmed was fine.
   Mobile gets bumped lower since the panel sits closer to the HUD
   there and the corner brackets render at the same px dimensions
   on a smaller box, so the proportional clearance feels tighter. */
.hero-3d .hud{
  position: absolute;
  top: 32px; left: 38px; right: 38px;
  pointer-events: none;
  z-index: 3;
  font-family: var(--mono);
}
@media (max-width: 640px){
  .ch-remaster .hero-3d .hud{
    top: 50px; left: 44px; right: 44px;
  }
}
.ch-remaster .hero-3d .hud-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 9.5px;        /* a touch smaller so it doesn't crowd the brackets */
  letter-spacing: 0.12em;
  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); }
}

/* Probe stage container — compact bottom panel only. Idle stage
   auto-sizes to fit the URL form + readout exactly (no scroll). The
   scanning and done stages are scrollable when there's more to show
   than fits — that's where the long step queue lives. The globe
   stays visible above the panel in every state. */
.ch-remaster .hero-3d .probe-stage[data-stage="idle"]{
  /* No max-height, no overflow — auto-fits the form + stats grid. */
  overflow: visible;
}
.ch-remaster .hero-3d .probe-stage[data-stage="scanning"]{
  max-height: 230px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Done stage gets a slightly taller cap since the result-metrics
   grid plus the action buttons need ~250px to fit without a scrollbar
   appearing for what would otherwise be perfectly-fitted content. */
.ch-remaster .hero-3d .probe-stage[data-stage="done"]{
  max-height: 260px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ch-remaster .hero-3d[data-probe-state="scanning"] .probe-stage[data-stage="scanning"][data-log-open="true"]{
  max-height: 340px;
}
@media (max-width: 640px){
  /* Mobile: combined with the JS-side group.position.y offset that
     lifts the sphere ~15% up in the canvas, these panel max-heights
     leave Romania clearly visible above the panel's top edge. */
  .ch-remaster .hero-3d .probe-stage[data-stage="scanning"]{
    max-height: 160px;
  }
  .ch-remaster .hero-3d .probe-stage[data-stage="done"]{
    max-height: 230px;
  }
  .ch-remaster .hero-3d[data-probe-state="scanning"] .probe-stage[data-stage="scanning"][data-log-open="true"]{
    max-height: 260px;
  }
  .ch-remaster .hero-3d[data-probe-state="scanning"] .probe-tip{
    display: none;
  }
}
.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: var(--r);
  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;
}
/* Same swipe animation as .kicker — keeps the visual language
   consistent across hero kicker, probe HUD, and marquee label. */
.ch-remaster .hero-3d .probe-label::before{
  content: "";
  display: inline-block;
  width: 22px;
  height: 8px;
  flex: 0 0 auto;
  will-change: background-position;
  background-image:
    radial-gradient(circle, var(--primary) 2.5px, transparent 3.2px),
    linear-gradient(90deg, transparent 0%,
      color-mix(in oklch, var(--primary) 30%, transparent) 18%,
      color-mix(in oklch, var(--primary) 30%, transparent) 82%,
      transparent 100%);
  background-size: 7px 7px, 22px 1px;
  background-repeat: no-repeat, no-repeat;
  background-position: 0% 50%, 50% 50%;
  opacity: 0.95;
  animation: chKickerSwipe 5.4s cubic-bezier(.65, 0, .35, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ch-remaster .hero-3d .probe-label::before { animation: none; }
}

.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;
  /* Fade smoothly when the user types their own protocol — the JS
     toggles [data-self-protocol] on the form to drive this. Avoids
     the prefix label disagreeing with what the user actually typed. */
  transition: opacity .18s ease, max-width .25s ease, padding .25s ease;
  white-space: nowrap;
}
.ch-remaster .hero-3d .probe-form[data-self-protocol="1"] .probe-prefix{
  opacity: 0;
  max-width: 0;
  padding-right: 0;
  margin-right: 0;
  overflow: hidden;
}
.ch-remaster .hero-3d .probe-input{
  border: 0;
  background: transparent;
  font-family: var(--mono);
  font-size: 13.5px;
  letter-spacing: 0;
  /* Generous right padding + a hairline divider give the URL room
     to breathe so the cursor never reads as touching the button.
     Padding includes the divider thickness so text never crosses it. */
  padding: 8px 14px 8px 6px;
  outline: none;
  width: 100%;
  min-width: 0; /* lets grid 1fr actually shrink on narrow viewports */
  color: var(--fg);
  /* Hairline divider — sits between input and button as a visual
     comma. Subtle in dark, slightly more visible in light. */
  border-right: 1px solid oklch(0.95 0.04 200 / 0.10);
}
html:not(.dark) body.ch-remaster .hero-3d .probe-input{
  border-right-color: oklch(0.40 0.05 200 / 0.16);
}
.ch-remaster .hero-3d .probe-input::placeholder{ color: var(--fg-subtle); }
.ch-remaster .hero-3d .probe-btn{
  padding: 8px 14px;
  margin-left: 4px; /* separates the button from the divider */
  border-radius: 999px;
  border: 0;
  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;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
}
.ch-remaster .hero-3d .probe-btn:hover{ transform: translateY(-1px); }
.ch-remaster .hero-3d .probe-btn:disabled{
  opacity: 0.65;
  cursor: progress; /* signals "working" not "blocked" */
  transform: none;
}
/* Spinner that replaces the ↗ glyph while a scan is in flight. The
   JS adds `is-loading` to the button as soon as submit returns a
   token. The arrow inside the button is hidden via the modifier so
   the spinner takes its slot — no layout shift. */
.ch-remaster .hero-3d .probe-btn.is-loading .probe-btn-arrow{ display: none; }
.ch-remaster .hero-3d .probe-btn .probe-btn-spin{
  display: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid oklch(0.10 0.10 148 / 0.30);
  border-top-color: oklch(0.10 0.10 148);
  animation: chProbeSpin .9s linear infinite;
}
.ch-remaster .hero-3d .probe-btn.is-loading .probe-btn-spin{ display: inline-block; }
@keyframes chProbeSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .ch-remaster .hero-3d .probe-btn .probe-btn-spin{ animation: none; }
}

/* Mobile: with the http(s):// prefix the form gets squeezed. Allow
   wrap so the button drops to its own line below the breakpoint.
   640px covers small tablets and phones in portrait — the form sits
   comfortably inline above that. */
@media (max-width: 640px){
  .ch-remaster .hero-3d .probe-form{
    grid-template-columns: auto 1fr;
    row-gap: 6px;
  }
  .ch-remaster .hero-3d .probe-form .probe-input{
    border-right: 0;
    padding-right: 8px;
  }
  .ch-remaster .hero-3d .probe-form .probe-btn{
    grid-column: 1 / -1;
    margin-left: 0;
    justify-content: center;
    width: 100%;
  }
}

.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: 10px;
  letter-spacing: 0;
  word-break: break-all;
}

/* Progress bar. Real progress, fed from job.progress_pct via the
   poll loop. Uses width transitions for smoothness without animating
   anything when the value isn't changing. */
.ch-remaster .hero-3d .probe-progress{
  margin: 0 0 12px;
}
.ch-remaster .hero-3d .probe-progress-track{
  height: 5px;
  border-radius: 999px;
  background: oklch(0.20 0.02 200 / 0.55);
  overflow: hidden;
  position: relative;
}
html:not(.dark) body.ch-remaster .hero-3d .probe-progress-track{
  background: oklch(0.85 0.02 200 / 0.6);
}
/* Phase ticks at the real stage boundaries (mapStages: dns→18, tls→35,
   rtt→78) so the single bar reads as a 4-phase stepper. Thin marks that
   the fill sweeps past, giving a sense of "which phase we're in". */
.ch-remaster .hero-3d .probe-progress-track::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0 calc(18% - 1px), oklch(0.97 0.02 200 / 0.32) 18% calc(18% + 1px),
    transparent calc(18% + 1px) calc(35% - 1px), oklch(0.97 0.02 200 / 0.32) 35% calc(35% + 1px),
    transparent calc(35% + 1px) calc(78% - 1px), oklch(0.97 0.02 200 / 0.32) 78% calc(78% + 1px),
    transparent calc(78% + 1px) 100%);
}
html:not(.dark) body.ch-remaster .hero-3d .probe-progress-track::after{
  background: linear-gradient(90deg,
    transparent 0 calc(18% - 1px), oklch(0.30 0.02 200 / 0.30) 18% calc(18% + 1px),
    transparent calc(18% + 1px) calc(35% - 1px), oklch(0.30 0.02 200 / 0.30) 35% calc(35% + 1px),
    transparent calc(35% + 1px) calc(78% - 1px), oklch(0.30 0.02 200 / 0.30) 78% calc(78% + 1px),
    transparent calc(78% + 1px) 100%);
}
.ch-remaster .hero-3d .probe-progress-fill{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--primary) 80%, transparent) 0%,
    var(--primary) 60%,
    color-mix(in oklch, var(--primary) 60%, transparent) 100%);
  border-radius: inherit;
  transition: width 0.6s cubic-bezier(.5,.1,.2,1);
  box-shadow: 0 0 12px color-mix(in oklch, var(--primary) 60%, transparent);
}
.ch-remaster .hero-3d .probe-progress-meta{
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-top: 6px;
}
.ch-remaster .hero-3d .probe-label [data-probe-stage-label]{
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg-muted);
  font-size: 10px;
}

/* Live row — findings counter + "open report" escape hatch.
   Sits between the step log and the tip line. */
.ch-remaster .hero-3d .probe-live{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed oklch(0.95 0.04 200 / 0.08);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
html:not(.dark) body.ch-remaster .hero-3d .probe-live{
  border-top-color: oklch(0.40 0.05 200 / 0.14);
}
.ch-remaster .hero-3d .probe-findings{
  color: var(--fg-muted);
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
.ch-remaster .hero-3d .probe-findings [data-probe-findings]{
  color: var(--fg);
  font-weight: 600;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  transition: color .25s ease;
}
/* Findings are the live payoff: once the scanner reports >0 issues, the
   count turns amber + pulses once so the eye catches the real signal. */
.ch-remaster .hero-3d .probe-findings.has-findings [data-probe-findings]{
  color: #ffb86b;
}
.ch-remaster .hero-3d .probe-findings.has-findings [data-probe-findings].bump{
  animation: chFindingBump .4s ease;
}
@keyframes chFindingBump{
  0% { transform: scale(1); }
  45% { transform: scale(1.28); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .ch-remaster .hero-3d .probe-findings.has-findings [data-probe-findings].bump{ animation: none; }
}
/* Live-report link as a clear pill affordance (was a faint dashed link). */
.ch-remaster .hero-3d .probe-live-link{
  color: var(--acid);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--acid) 35%, transparent);
  background: color-mix(in oklch, var(--acid) 10%, transparent);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  visibility: hidden;
  transition: background .2s ease, border-color .2s ease, transform .1s ease;
}
.ch-remaster .hero-3d .probe-live-link:hover{
  background: color-mix(in oklch, var(--acid) 20%, transparent);
  border-color: var(--acid);
}
.ch-remaster .hero-3d .probe-live-link:active{ transform: scale(0.97); }

/* Tip line — rotates every ~5.5s. Aria-live polite so screen readers
   get the update without interrupting. Fade transition is class-based
   so users with prefers-reduced-motion still see the text change. */
.ch-remaster .hero-3d .probe-tip{
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: oklch(0.18 0.02 200 / 0.40);
  color: var(--fg-muted);
  font-size: 11.5px;
  line-height: 1.4;
  font-style: italic;
  min-height: 32px;
  display: flex;
  align-items: center;
  transition: opacity .25s ease;
}
html:not(.dark) body.ch-remaster .hero-3d .probe-tip{
  background: oklch(0.94 0.02 200 / 0.55);
}
.ch-remaster .hero-3d .probe-tip::before{
  content: "💡";
  margin-right: 8px;
  font-style: normal;
  opacity: 0.85;
}
.ch-remaster .hero-3d .probe-tip.is-out{ opacity: 0; }
@media (prefers-reduced-motion: reduce){
  .ch-remaster .hero-3d .probe-tip{ transition: none; }
  .ch-remaster .hero-3d .probe-progress-fill{ transition: none; }
}
/* Probe header — the label + toggle button row at the top of the
   scanning panel. */
.ch-remaster .hero-3d .probe-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.ch-remaster .hero-3d .probe-header .probe-label{ margin-bottom: 0; flex: 1 1 auto; min-width: 0; }
.ch-remaster .hero-3d .probe-log-toggle{
  appearance: none;
  border: 1px solid oklch(0.95 0.04 200 / 0.10);
  background: oklch(0.16 0.02 200 / 0.45);
  color: var(--fg-muted);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.ch-remaster .hero-3d .probe-log-toggle:hover{
  color: var(--fg);
  border-color: oklch(0.95 0.04 200 / 0.20);
  background: oklch(0.20 0.02 200 / 0.60);
}
html:not(.dark) body.ch-remaster .hero-3d .probe-log-toggle{
  background: oklch(0.96 0.02 200 / 0.65);
  border-color: oklch(0.40 0.05 200 / 0.15);
}
.ch-remaster .hero-3d .probe-log-toggle-chev{ transition: transform 0.2s ease; display: inline-block; }
.ch-remaster .hero-3d .probe-log-toggle[aria-expanded="true"] .probe-log-toggle-chev{
  transform: rotate(180deg);
}

/* Step queue: compact one-line rows, no wrap, ellipsis. Hidden by
   default — toggle button reveals. The rows use `.probe-step`
   instead of `.step` because a global rule on `.ch-remaster .step::before`
   (used by the "How it works" section) sets position:absolute and
   would otherwise pull the dot out of the flex flow. */
.ch-remaster .hero-3d .probe-log{
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 140px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid oklch(0.95 0.04 200 / 0.07);
  margin-top: 2px;
  padding-top: 4px;
  /* Right padding accounts for the scrollbar gutter so the `ok` /
     `running` badge never bumps against the scrollbar nor the panel
     edge. */
  padding-right: 4px;
}
.ch-remaster .hero-3d .probe-log[hidden]{ display: none; }
.ch-remaster .hero-3d .probe-log .probe-step{
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.1;
  letter-spacing: 0.04em;
  color: var(--fg-subtle);
  padding: 5px 2px;
  min-height: 22px;
  border-top: 1px dashed oklch(0.95 0.04 200 / 0.06);
}
html:not(.dark) body.ch-remaster .hero-3d .probe-log .probe-step{ border-top-color: oklch(0.40 0.05 200 / 0.12); }
.ch-remaster .hero-3d .probe-log .probe-step:first-child{ border-top: 0; padding-top: 3px; }
.ch-remaster .hero-3d .probe-log .probe-step::before{
  content: "";
  flex: 0 0 8px;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: oklch(0.30 0.02 200);
  border: 1px solid oklch(0.45 0.02 200);
  /* Explicit static position in case any future broad rule tries to
     promote this to absolute — keeps the dot in the flex row. */
  position: static;
  align-self: center;
}
.ch-remaster .hero-3d .probe-log .probe-step .probe-step-label{
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ch-remaster .hero-3d .probe-log .probe-step::after{
  flex: 0 0 auto;
  content: "—";
  font-family: var(--mono);
  font-size: 10px;
  color: var(--fg-subtle);
  margin-left: 4px;
  position: static;
  align-self: center;
}
.ch-remaster .hero-3d .probe-log .probe-step.active{
  color: var(--fg);
}
.ch-remaster .hero-3d .probe-log .probe-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 .probe-step.active::after{ content: "running"; color: var(--acid); }
.ch-remaster .hero-3d .probe-log .probe-step.done{
  color: var(--fg-muted);
}
.ch-remaster .hero-3d .probe-log .probe-step.done::before{
  background: var(--acid);
  border-color: var(--acid);
}
.ch-remaster .hero-3d .probe-log .probe-step.done::after{ content: "ok"; color: var(--acid); }
.ch-remaster .hero-3d .probe-log .probe-step.fail::before{
  background: oklch(0.62 0.20 30);
  border-color: oklch(0.62 0.20 30);
}
.ch-remaster .hero-3d .probe-log .probe-step.fail::after{ content: "fail"; color: oklch(0.72 0.20 30); }

/* Watermark moved to a 3D sphere shell in remaster.js — see
   `Watermark sphere shell` block. The old SVG textPath overlay
   was removed because the user wanted the text painted ON the
   globe rather than as a 2D layer over it. */

/* -------- Floating country labels --------
   The .globe-labels container is appended by remaster.js into the
   .hero-3d mount. Each .globe-label is positioned via JS each frame
   using a translate3d() that maps the country centroid's 3D position
   to canvas-space pixels. Pointer-events:none so labels never block
   drag/zoom; will-change:transform so the per-frame transform update
   is composited cheaply. */
.ch-remaster .hero-3d .globe-labels{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}
.ch-remaster .hero-3d .globe-label{
  position: absolute;
  top: 0; left: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 5px 9px 6px;
  border-radius: 8px;
  background: oklch(0.13 0.02 200 / 0.78);
  border: 1px solid oklch(0.95 0.04 200 / 0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  user-select: none;
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 0.2s ease;
  /* Tiny arrow nub pointing down toward the country pulse. */
}
.ch-remaster .hero-3d .globe-label::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: inherit;
  border: 1px solid oklch(0.95 0.04 200 / 0.10);
  border-top: 0;
  border-left: 0;
}
html:not(.dark) body.ch-remaster .hero-3d .globe-label{
  background: oklch(1 0 0 / 0.85);
  border-color: oklch(0.40 0.05 200 / 0.18);
}
.ch-remaster .hero-3d .globe-label-top{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ch-remaster .hero-3d .globe-label-dot{
  width: 6px; height: 6px;
  border-radius: 999px;
  background: #5dffaa;
  box-shadow: 0 0 8px #5dffaa90;
}
.ch-remaster .hero-3d .globe-label[data-role="target"] .globe-label-dot{
  background: #ffb86b;
  box-shadow: 0 0 8px #ffb86b90;
}
.ch-remaster .hero-3d .globe-label-name{
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 11px;
}
.ch-remaster .hero-3d .globe-label-meta{
  font-size: 8.5px;
  color: var(--fg-subtle);
  letter-spacing: 0.02em;
}
.ch-remaster .hero-3d .globe-label-meta:empty{ display: none; }
@media (max-width: 640px){
  .ch-remaster .hero-3d .globe-label{ font-size: 9px; padding: 4px 7px 5px; }
  .ch-remaster .hero-3d .globe-label-name{ font-size: 10px; }
  .ch-remaster .hero-3d .globe-label-meta{ font-size: 8px; }
}
.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); }
/* 4 columns now (added TTFB cached). Slightly tighter gap so all
   four metrics fit on one row without forcing an orphan SCOR onto a
   second line. On the narrow mobile breakpoint we fall back to 2x2. */
.ch-remaster .hero-3d .result-metrics{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
@media (max-width: 640px){
  .ch-remaster .hero-3d .result-metrics{
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}
.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;
  /* Was 22px when this was a 3-column grid. Dropped to 19px so all
     four columns fit comfortably on a 380px-wide panel. */
  font-size: 19px;
  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; }

.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{
  /* Integrated as a contained band inside the wrap, not a full-bleed
     slab. Subtle rounding + softer background so it reads as a card
     belonging to the hero rather than a separator between sections.
     Margin-block pulls it visually toward the surrounding sections. */
  position: relative;
  overflow: hidden;
  margin: 20px var(--gutter, 24px);
  padding: 12px 0 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg,
      oklch(0.50 0.10 148 / 0.025) 0%,
      oklch(0.50 0.10 148 / 0.06)  100%);
  box-shadow: inset 0 1px 0 oklch(0.96 0.04 200 / 0.04);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
html:not(.dark) body.ch-remaster .marquee{
  background:
    linear-gradient(180deg,
      oklch(0.50 0.10 148 / 0.04) 0%,
      oklch(0.50 0.10 148 / 0.08) 100%);
}
@media (min-width: 1100px){
  .ch-remaster .marquee{
    /* Constrain to the same max-width as .wrap on big screens so it
       doesn't span the whole viewport awkwardly. */
    max-width: calc(1440px - 2 * var(--gutter, 32px));
    margin-left: auto;
    margin-right: auto;
  }
}
.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);
  /* Label is now on its own row above the scroller — no background
     mask needed since there's nothing to overlap. */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
}
/* Same swipe animation as .kicker. */
.ch-remaster .marquee .label::before{
  content: "";
  display: inline-block;
  width: 22px;
  height: 8px;
  flex: 0 0 auto;
  will-change: background-position;
  background-image:
    radial-gradient(circle, var(--primary) 2.5px, transparent 3.2px),
    linear-gradient(90deg, transparent 0%,
      color-mix(in oklch, var(--primary) 30%, transparent) 18%,
      color-mix(in oklch, var(--primary) 30%, transparent) 82%,
      transparent 100%);
  background-size: 7px 7px, 22px 1px;
  background-repeat: no-repeat, no-repeat;
  background-position: 0% 50%, 50% 50%;
  opacity: 0.95;
  animation: chKickerSwipe 5.4s cubic-bezier(.65, 0, .35, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ch-remaster .marquee .label::before { animation: none; }
}
.ch-remaster .marquee .track{
  display: flex;
  width: max-content;
  /* CSS animation removed — the track is now driven from JS so we
     can support press-to-pause + drag-to-scrub + smooth-resume. The
     JS controller sets transform: translateX(...) on every frame. */
  will-change: transform;
  touch-action: pan-y;            /* allow vertical scroll, capture horizontal */
  cursor: grab;
}
.ch-remaster .marquee .track.is-dragging{ cursor: grabbing; }
.ch-remaster .marquee .track *{ user-select: none; }
.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; }

.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;
  /* was `end`: the lead paragraph floated above the heading's top line,
     reading as misaligned. Top-align title and description instead. */
  align-items: start;
  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{
  /* Two columns: input + submit button (TLD pick removed; user types full
     domain). Error state pulls the border red via [aria-invalid=true]. */
  display: grid;
  grid-template-columns: 1fr 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;
}
.ch-remaster .domain-search .field[data-domain-form][aria-invalid="true"],
.ch-remaster .domain-search .field:has([data-domain-input][aria-invalid="true"]){
  border-color: oklch(0.65 0.22 25);
  box-shadow: 0 0 0 4px oklch(0.65 0.22 25 / 0.18);
}
.ch-remaster .domain-error{
  margin: 10px 4px 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: oklch(0.72 0.22 25);
}
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: start; /* top-align title with its description (was 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));
}
/* Light theme: the dark green-teal fill above is a dark-mode value and
   left the featured card a dark panel with dark text on a light page
   (muddy, hard to read). Make it a LIGHT mint-green card so the dark
   text reads and it still clearly stands out as the highlighted plan. */
html:not(.dark) .ch-remaster .tier.featured{
  background:
    radial-gradient(120% 130% at 20% 0%, oklch(0.85 0.15 148 / 0.35), transparent 62%),
    linear-gradient(180deg, oklch(0.91 0.10 148 / 0.80) 0%, oklch(0.975 0.03 148 / 0.92) 100%);
}
.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: var(--r);
  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: var(--r);
  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;
  /* was 1fr 2fr: the question list read as too narrow on wide screens */
  grid-template-columns: minmax(220px, 0.7fr) 2.3fr;
  gap: clamp(28px, 4vw, 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;
  /* crockyhost.css (product-pages fix) sets .faq-list{margin-inline:auto},
     which on a grid item means shrink-to-fit + center: the list collapsed
     to the width of its longest question (~470px) instead of filling the
     column. THAT was the chronic "FAQ too narrow" everywhere. */
  width: 100%;
  margin-inline: 0;
}
.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;
  /* taller closed rows: 20px vertical read as cramped strips */
  padding: 27px 24px;
  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; }

@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.
   ============================================================ */
/* Top padding was clamp(40,5vw,80) → 80px on desktop. Body already
   carries 104px to clear the fixed navbar, so this stacked another
   80px of empty above the kicker. Dropped to 12px (just enough breathing
   between navbar and kicker). Bottom kept generous for visual rhythm
   before the marquee. */
.ch-remaster .hero { padding: 12px 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: 10px 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: 8px 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;
  }
  /* Legacy tld-pick mobile overrides — element is removed; rules are
     no-ops but kept commented in case the picker comes back. */
  .ch-remaster .domain-search .field .tld-pick--legacy {
    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;
  }
}

/* ============================================================
   Romanian-language adjustments (:lang(ro))
   Romanian words run ~15-20% longer than English on average, and
   RON prices (4-char prefix + space) are wider than €-prefixed
   ones. Without these overrides the hero h1 wraps to 3 lines per
   sentence instead of 2, and plan-card prices like "RON 31.44"
   break out of their flex row. Adjustments are layout-only — they
   keep the visual hierarchy identical to the EN baseline. */

html:lang(ro) .ch-remaster .hero h1 {
  font-size: clamp(36px, 5.4vw, 76px);
  letter-spacing: -0.030em;
}
@media (max-width: 960px) {
  html:lang(ro) .ch-remaster .hero h1 {
    font-size: clamp(40px, 7vw, 64px);
  }
}
@media (max-width: 640px) {
  html:lang(ro) .ch-remaster .hero h1 {
    font-size: clamp(34px, 9vw, 52px);
  }
}

/* Plan card price: "RON 4.07" is 8 chars vs "€0.78" 5 chars.
   Drop the size enough to let the price stay on one line next to
   from + per spans, and tighten letter-spacing. */
html:lang(ro) .ch-remaster .plan .price {
  flex-wrap: wrap;
  row-gap: 2px;
}
html:lang(ro) .ch-remaster .plan .price .amt {
  font-size: 34px;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
@media (max-width: 1180px) {
  html:lang(ro) .ch-remaster .plan .price .amt { font-size: 30px; }
}
@media (max-width: 640px) {
  html:lang(ro) .ch-remaster .plan .price .amt { font-size: 32px; }
}

/* Plans heading "Alege ce-ți trebuie. / Mărești când ai nevoie."
   needs a hair more vertical breathing room so the grad-text line
   doesn't crowd the first. */
html:lang(ro) .ch-remaster .plans-head h2 {
  line-height: 1.06;
}

/* Trio card eyebrow titles can get long: "Răspundem chiar noi." */
html:lang(ro) .ch-remaster .trio .card h3 {
  font-size: clamp(20px, 1.6vw, 24px);
  letter-spacing: -0.018em;
}

/* Popular TLD chips: RON values are longer than €. The default
   .domain-search uses `grid-template-columns: 1fr auto` so input
   sits next to the chips on a single row. With "RON 288.64"-class
   prices the chips column eats horizontal space and squeezes the
   input to a tiny stub. Stack the two rows vertically for :lang(ro)
   so the input gets full width and the chips wrap naturally below.
   Same breakpoint behavior as the existing 820px media query. */
html:lang(ro) .ch-remaster .domain-search {
  grid-template-columns: 1fr;
  gap: 20px;
}
html:lang(ro) .ch-remaster .domain-search .meta {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  min-width: 0;
}
html:lang(ro) .ch-remaster .domain-search .pop {
  flex-wrap: wrap;
  gap: 8px;
}

/* Plans section heading shrinks for :lang(ro) so the 2 phrases fit
   on 2 lines each (4 lines total) rather than 6+ lines. */
html:lang(ro) .ch-remaster .plans-head h2 {
  font-size: clamp(34px, 4vw, 56px);
  letter-spacing: -0.022em;
}

/* =====================================================================
   BOOTSTRAP .container OVERRIDE — homepage breakout
   WHMCS / Bootstrap 4 caps .container at 1140px on xl viewports. The
   remaster hero needs more room so the h1 lands on two lines instead
   of four. Scoped to body.ch-remaster so it only affects pages where
   the homepage skin is active — every other WHMCS client-area page
   keeps the standard Bootstrap cap so existing layouts are untouched.
   ===================================================================== */
body.ch-remaster .container {
  max-width: 1440px;
}
/* Belt-and-suspenders: also nudge the row & primary-content so they
   honor the wider container (Bootstrap's negative -15px margins on
   .row stay intact, just the cap moves). */
body.ch-remaster .primary-content {
  max-width: 100%;
}

/* ============================================================
   Green CTA buttons — readable white text.
   Pure white on the bright --acid / brand green had low luminance
   contrast (~2.5:1): it vibrates and forces the eye to focus. We
   deepen the fill to a rich emerald so white lands at WCAG-AA
   contrast (~4.3:1 at the lightest stop, ~6.8:1 at the darkest) and
   add a hairline text-shadow to crisp the edges. Applied to every
   solid-green CTA on the homepage for one consistent, legible look.
   Badges/stamps and decorative floaters keep dark-on-acid (legible
   by design) — only true buttons are touched here.
   ============================================================ */
.ch-remaster .btn-primary,
.ch-remaster .hero-3d .probe-btn,
.ch-remaster .domain-search .field .go,
.ch-remaster .tier.featured .btn-tier,
.ch-remaster .tier.featured .btn-tier:hover{
  color: #fff !important;
  background:
    linear-gradient(180deg, #0CA257 0%, #097F45 100%) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 8px 22px -8px rgba(0,80,44,0.55) !important;
  border-color: transparent !important;
}
.ch-remaster .btn-primary::before{ display: none; } /* drop the acid blur halo */
.ch-remaster .btn-primary:hover,
.ch-remaster .hero-3d .probe-btn:hover,
.ch-remaster .domain-search .field .go:hover,
.ch-remaster .tier.featured .btn-tier:hover{
  color: #fff !important;
  filter: brightness(1.08);
}
/* loading spinner inside the scanner button now sits on a darker green,
   so make it white to stay visible */
.ch-remaster .hero-3d .probe-btn .probe-btn-spin{
  border-color: rgba(255,255,255,0.35);
  border-top-color: #fff;
}

/* ============================================================
   Light-theme shadow softening for the big panels.
   The hero scanner box, probe stage, terminal, CTA block and the
   floating 3D plates carry near-black drop shadows (oklch(0.05 …))
   authored for the dark UI. On the light page they read as heavy
   dark halos. Swap them for soft, light shadows in light mode only.
   (Card shadows are handled by the lighter --glass-shadow token.)
   ============================================================ */
html:not(.dark) body.ch-remaster .hero-3d,
html:not(.dark) body.ch-remaster .probe-stage,
html:not(.dark) body.ch-remaster .terminal{
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.7),
    0 20px 44px -26px oklch(0.52 0.05 200 / 0.20),
    0 6px 18px -12px oklch(0.52 0.05 200 / 0.12) !important;
}
html:not(.dark) body.ch-remaster .cta{
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.6),
    0 24px 52px -30px oklch(0.60 0.10 148 / 0.16) !important;
}
html:not(.dark) body.ch-remaster .stack3d .plate,
html:not(.dark) body.ch-remaster .plate,
html:not(.dark) body.ch-remaster .stack3d .floater{
  box-shadow: 0 14px 30px -18px oklch(0.55 0.08 148 / 0.18) !important;
}
/* floater.a keeps its dark chip in light mode (nice contrast) but the
   text must stay white there: color was var(--fg), which flips dark on
   the light theme and vanished against the near-black chip. */
html:not(.dark) body.ch-remaster .stack3d .floater.a{
  color: #fff;
}