@import url('./workshop.css');
@import url('./content.css');

:root {
  --paper: #faf7f0;
  --paper-2: #f1ece1;
  --paper-3: #e8e1d2;
  --ink: #0e0e10;
  --ink-2: #3a3a3e;
  --ink-mute: #7a7a82;
  --red: #e63946;
  --red-deep: #c1121f;
  --blue: #2563eb;
  --blue-deep: #1d4ed8;
  --yellow: #f4c430;
  --amber: #c8810f;
  --amber-deep: #8a570a;
  --rule: rgba(14, 14, 16, 0.10);
  /* Match fonts loaded in index.html — keeps inherited body/UI stacks predictable */
  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Instrument Serif", ui-serif, Georgia, serif;
  --font-screen: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
  --font-emblem: "Roboto Slab", Rockwell, ui-serif, serif;
  --serif: var(--font-serif), ui-serif, Georgia, serif;
  --sans: var(--font-sans), ui-sans-serif, system-ui, sans-serif;
  --emblem: var(--font-emblem), "Roboto Slab", Rockwell, "Courier New", serif;
  /* visible “desk” pad around the monitor */
  --crt-batting: 32px;
  /* 1990s beige CRT plastic */
  --crt-beige-top: #ece6d8;
  --crt-beige-mid: #dbd3c4;
  --crt-beige-shadow: #b8afa0;
  --crt-beige-edge: #6e685c;
  --crt-beige-console: #d1c9bb;
  /* Room wall — see room-wall-variants.css for shipped modifier classes */
  --room-wall-light: #c4d2bc;
  --room-wall-mid: #aebfaa;
  --room-wall-deep: #8f9f8c;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html.crt-root {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  background: #98a4a4;
}

html.crt-root body {
  min-height: 100vh;
  min-height: 100dvh;
}

/* —— 1990s desk + CRT casing ——————————————————————————— */
body.crt-desktop {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100dvh;
  max-height: 100dvh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: var(--crt-batting) var(--crt-batting) 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

body.crt-desktop > .crt-desk {
  position: relative;
  z-index: 2;
}

/* Painted room wall behind the CRT monitor — base layer; variant modifiers in room-wall-variants.css */
.crt-room-wall {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.crt-room-wall::before,
.crt-room-wall::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.crt-desk {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  gap: 0;
}

.crt-monitor {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 auto;
  width: 100%;
  /* Cap width so the monitor reads as a 4:3-ish CRT, not a widescreen panel. */
  max-width: min(1400px, 115vh);
  min-height: 0;
  filter:
    drop-shadow(0 min(42px, 5.5vw) min(52px, 7vw) rgba(0, 0, 0, 0.50))
    drop-shadow(0 min(12px, 2vw) min(22px, 3vw) rgba(0, 0, 0, 0.38));
}

.crt-monitor-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  --crt-pad-inline: 28px;
  /* Shared inset for tube stack + top nameplate band */
  --crt-monitor-chrome-inset: 32px;
  --crt-shell-pad-block-end: 18px;
  padding: 0 var(--crt-pad-inline) var(--crt-shell-pad-block-end);
  border-radius: 22px
    22px
    16px
    16px;
  border: 2px solid var(--crt-beige-edge);
  background:
    linear-gradient(
      145deg,
      #f5eedd 0%,
      var(--crt-beige-top) 14%,
      var(--crt-beige-mid) 48%,
      var(--crt-beige-shadow) 100%
    );
  box-shadow:
    inset 4px 4px 3px rgba(255, 255, 255, 0.55),
    inset -4px -5px 12px rgba(62, 56, 48, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.12);
}

/*
 * OEM brand strip: nameplate lives only in beige chassis (above grey tube fascia).
 */
.crt-shell-brand-rail {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60px;
  margin: 0;
  padding: 0 var(--crt-pad-inline);
  margin-inline: calc(-1 * var(--crt-pad-inline));
  box-sizing: content-box;
}

/* CRT tube stack — inset matches lower MULTISYNC strip. */
.crt-monitor-tube-stack {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  width: auto;
  max-width: 100%;
  margin-top: 0px;
  margin-bottom: 30px;
  margin-inline: var(--crt-monitor-chrome-inset);
  overflow: hidden;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(95, 88, 76, 0.35);
}

.crt-monitor-mask {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  min-height: 0;
  border-radius: 9px 9px 0 0;
  background:
    radial-gradient(
      ellipse 98% 93% at 50% 47%,
      #f6f2ea 0%,
      #ece5d6 38%,
      #ddd3c2 72%,
      #c9bfac 100%
    ),
    linear-gradient(
      158deg,
      rgba(154, 144, 128, 0.42) 0%,
      transparent 50%
    ),
    linear-gradient(
      206deg,
      rgba(154, 144, 128, 0.32) 0%,
      transparent 46%
    );
  /* Visible bezel ring around the screen pocket. Aperture-frame sits inside this. */
  padding: 56px;
  /* Bezel chamfer — bezel face slopes inward toward the screen.
     Light from top, so:
      • top of bezel: strong dark shadow (slope faces down/in, away from light)
      • bottom of bezel: bright highlight (slope faces up/in, toward light)
      • left/right: medium side shading
     Plus a soft radial darkening near the screen pocket (basin depth). */
  box-shadow:
    /* TOP slope — recedes downward, in heavy shadow */
    inset 0 min(110px, 18vh) min(140px, 22vh) -20px rgba(56, 44, 32, 0.55),
    inset 0 min(28px, 5vh) min(48px, 9vh) -8px rgba(56, 44, 32, 0.42),
    /* BOTTOM slope — faces light, bright highlight */
    inset 0 min(-90px,-16vh) min(130px, 22vh) -18px rgba(255, 252, 240, 0.62),
    inset 0 min(-22px,-4vh) min(40px, 7vh) -6px rgba(255, 252, 240, 0.50),
    /* LEFT slope — side-lit shadow */
    inset min(80px, 12vw) 0 min(110px, 18vw) -16px rgba(72, 58, 44, 0.32),
    /* RIGHT slope — paired side shadow (slightly weaker) */
    inset min(-80px,-12vw) 0 min(110px, 18vw) -16px rgba(72, 58, 44, 0.28),
    /* Basin pooling near the screen pocket */
    inset 0 min(180px, 36vh) min(280px, 52vh) -40px rgba(74, 60, 46, 0.18),
    /* Hairline rim catching the very top edge (outer lip of the chamfer) */
    inset 0 1px 0 rgba(255, 255, 248, 0.55),
    inset 0 -1px 0 rgba(255, 255, 248, 0.18);
}


@keyframes crtFlicker {
  0%, 100% { opacity: 0.3; }
  52% { opacity: 0.38; }
  54% { opacity: 0.27; }
  74% { opacity: 0.34; }
}

/*
 * Black inner-bezel ring around the phosphor — sits between beige plastic mask
 * and the lit raster. Mirrors the dark glass-rim on real CRTs (see DeluxScan reference).
 */
.crt-aperture-frame {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  padding: 20px;
  border-radius: 4px;
  background:
    radial-gradient(
      ellipse 105% 100% at 50% 50%,
      #131316 0%,
      #050507 60%,
      #020203 100%
    );
  /* Inner chamfer onto the white glass — chamfer faces handle the outer step now. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    inset 1px 0 0 rgba(0, 0, 0, 0.45),
    inset -1px 0 0 rgba(0, 0, 0, 0.45);
}

/* Inner-flat ring of the bezel — a subtly-shadowed plate just outside the dark
   pocket. Sits behind the aperture-frame's outer shadows to tone down the
   beige right at the recess edge, so the step reads as a real depth change. */
.crt-aperture-frame::before {
  content: "";
  position: absolute;
  inset: -28px;
  pointer-events: none;
  z-index: -1;
  border-radius: 26px;
  background: transparent;
}

/* Picture-frame chamfer — 4 trapezoidal faces with hard 45° miter joints.
   Each face is a clipped div with its own linear-gradient slope, sized to match
   the mask padding exactly. Pixel-precise so corners always meet at 45°
   regardless of chassis aspect ratio. */
.crt-bezel-chamfer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
  /* Chamfer thickness — must match .crt-monitor-mask padding so faces
     terminate exactly at the aperture-frame outer edge. */
  --cf-t: 56px;
}

.crt-bezel-chamfer__face {
  position: absolute;
  pointer-events: none;
}

.crt-bezel-chamfer__face--top {
  top: 0;
  left: 0;
  right: 0;
  height: var(--cf-t);
  clip-path: polygon(
    0 0,
    100% 0,
    calc(100% - var(--cf-t)) 100%,
    var(--cf-t) 100%
  );
  background: linear-gradient(
    180deg,
    #ddd3c2 0%,
    #c9bea9 55%,
    #b3a892 100%
  );
}

.crt-bezel-chamfer__face--right {
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--cf-t);
  clip-path: polygon(
    100% 0,
    100% 100%,
    0 calc(100% - var(--cf-t)),
    0 var(--cf-t)
  );
  background: linear-gradient(
    270deg,
    #ddd3c2 0%,
    #cec3ad 55%,
    #beb39c 100%
  );
}

.crt-bezel-chamfer__face--bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--cf-t);
  clip-path: polygon(
    var(--cf-t) 0,
    calc(100% - var(--cf-t)) 0,
    100% 100%,
    0 100%
  );
  background: linear-gradient(
    0deg,
    #ddd3c2 0%,
    #e2d9c9 55%,
    #e9e1d2 100%
  );
}

.crt-bezel-chamfer__face--left {
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--cf-t);
  clip-path: polygon(
    0 0,
    100% var(--cf-t),
    100% calc(100% - var(--cf-t)),
    0 100%
  );
  background: linear-gradient(
    90deg,
    #ddd3c2 0%,
    #d0c5af 55%,
    #c1b69e 100%
  );
}

/* Flow layout inside .crt-shell-brand-rail — no overlap onto grey tube fascia */
.crt-shell-emblem-slot {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  width: fit-content;
  max-width: min(92%, 560px);
  display: flex;
  justify-content: center;
  pointer-events: auto;
}

.crt-viewport {
  position: relative;
  z-index: 6;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  overflow: hidden;
  min-height: 0;
  width: 100%;
  /* Default state: CRT off — deep black tube. The lit phosphor is painted on
     .crt-page-layer only when it has content, so route-transition gaps read as
     a powered-off monitor instead of a blank cream screen. */
  background:
    radial-gradient(
      ellipse 110% 95% at 50% 48%,
      #0a0c10 0%,
      #050608 60%,
      #020203 100%
    );
  border-radius: 10px;
  border: none;
  /* Inner chamfer: glass sits at floor of the dark recess. Light from top —
     so the upper inner wall of the recess casts shadow onto the screen,
     and the lower inner wall (facing up) catches a highlight before the screen. */
  box-shadow:
    inset 0 3px 5px -1px rgba(0, 0, 0, 0.55),
    inset 2px 0 4px -1px rgba(0, 0, 0, 0.32),
    inset -2px 0 4px -1px rgba(0, 0, 0, 0.32),
    inset 0 -2px 0 rgba(255, 255, 255, 0.6),
    inset 0 -3px 5px -1px rgba(255, 255, 255, 0.35),
    inset 0 0 0 1px rgba(0, 0, 0, 0.45),
    inset 0 min(48px, 10vh) min(160px, 32vh) rgba(160, 150, 130, 0.18),
    inset 0 min(-30px, -5vh) min(120px, 24vh) rgba(0, 0, 0, 0.04),
    inset 0 0 min(120px, 22vh) min(80px, 14vw) rgba(0, 0, 0, 0.14),
    0 -1px 0 rgba(255, 255, 255, 0.18),
    0 1px 0 rgba(0, 0, 0, 0.55);
}

/* Curved-glass corner falloff over the phosphor */
.crt-viewport-vignette {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    ellipse 92% 88% at 50% 50%,
    transparent 52%,
    rgba(12, 14, 20, 0.12) 78%,
    rgba(8, 10, 16, 0.22) 100%
  );
}

/* Front-of-glass glitch — subtle; phosphor only (not taskbar). */
.crt-screen-glitch {
  position: absolute;
  inset: 0 0 30px;
  z-index: 9;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  opacity: 0;
  mix-blend-mode: overlay;
  animation: crtGlitchBurst 12s linear infinite;
}

.crt-screen-glitch::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(255, 60, 60, 0.12) 0%,
      transparent 30%,
      transparent 70%,
      rgba(60, 180, 255, 0.1) 100%
    );
  transform: translateX(-3px);
}

.crt-screen-glitch::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  top: -8%;
  opacity: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.05) 50%,
    transparent
  );
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.12);
  animation: crtGlitchRoll 12s linear infinite;
}

/* Brief tear ~0.25s every 12s. */
@keyframes crtGlitchBurst {
  0%, 90%, 100% {
    opacity: 0;
    transform: none;
    filter: none;
  }
  91% {
    opacity: 0.45;
    transform: translateX(-2px);
    filter: contrast(1.04) brightness(1.02);
  }
  91.6% {
    opacity: 0.55;
    transform: translateX(3px) skewX(-0.3deg);
  }
  92.2% {
    opacity: 0.3;
    transform: translateX(-1px);
  }
  92.8% {
    opacity: 0;
    transform: none;
    filter: none;
  }
}

@keyframes crtGlitchRoll {
  0%, 89%, 100% {
    opacity: 0;
    top: -8%;
  }
  90% {
    opacity: 0.5;
    top: 15%;
  }
  91% {
    opacity: 0.4;
    top: 45%;
  }
  92% {
    opacity: 0.25;
    top: 75%;
  }
  93% {
    opacity: 0;
    top: 105%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crt-screen-glitch,
  .crt-screen-glitch::after,
  .crt-viewport::before {
    animation: none !important;
  }
  .crt-screen-glitch {
    opacity: 0 !important;
  }
}

.crt-viewport::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  opacity: 0.4;
  background: repeating-linear-gradient(
    180deg,
    transparent 0 2px,
    rgba(20, 22, 30, 0.05) 2px 3px
  );
  animation: crtFlicker 7.5s ease-in-out infinite;
}

.crt-page-layer {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  /* Workshop/content routes — sans body + serif headings from first paint
     (scoped Vue CSS loads after mount; without this, text flashes wrong stack). */
  font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  /* CRT-style scrollbar: dark track, light thumb (inverted from default) */
  scrollbar-width: auto;
  scrollbar-color: rgba(220, 215, 200, 0.55) rgba(14, 14, 16, 0.85);
}

/* Lit phosphor. Default (no `:has` support): always painted, so older browsers
   see the cream screen at all times (text stays readable; no off-state effect).
   With `:has` support: only paints when .crt-page-layer has content — during a
   lazy-route chunk fetch the slot is empty, the rule doesn't match, and the
   .crt-viewport's dark "off" tube shows through. */
.crt-page-layer {
  background:
    radial-gradient(
      ellipse 110% 95% at 50% 48%,
      #ffffff 0%,
      #f4f1e8 62%,
      #e6e1d2 100%
    );
}

@supports selector(:has(*)) {
  .crt-page-layer {
    background: none;
  }
  .crt-page-layer:has(*) {
    background:
      radial-gradient(
        ellipse 110% 95% at 50% 48%,
        #ffffff 0%,
        #f4f1e8 62%,
        #e6e1d2 100%
      );
  }
}

.crt-page-layer :is(h1, h2, h3, h4) {
  font-family: var(--font-serif), ui-serif, Georgia, serif;
  font-weight: 400;
}

.crt-page-layer::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}
.crt-page-layer::-webkit-scrollbar-track {
  background: rgba(14, 14, 16, 0.85);
  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.6);
}
.crt-page-layer::-webkit-scrollbar-thumb {
  background: rgba(220, 215, 200, 0.55);
  border-radius: 0;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.crt-page-layer::-webkit-scrollbar-thumb:hover {
  background: rgba(240, 235, 220, 0.85);
  background-clip: padding-box;
}
.crt-page-layer::-webkit-scrollbar-corner {
  background: rgba(14, 14, 16, 0.85);
}

.crt-page-layer--content-hidden {
  overflow: hidden;
}

/* Home + app windows: fill the CRT viewport; scroll inside the desktop/window only */
.crt-page-layer:has(> .xp-desktop) {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.crt-page-layer:has(> .xp-desktop) > .xp-desktop {
  flex: 1 1 0;
  min-height: 0;
  max-height: 100%;
}

.crt-viewport-phosphor-fill {
  flex: 1 1 auto;
  min-height: min(640px, 72vh);
}

/* Hidden while HIDE_BEZEL_NAV in layout.tsx (body.crt-hide-bezel-nav). */
body.crt-hide-bezel-nav .crt-nav-pad {
  display: none !important;
}

.crt-nav-pad {
  position: relative;
  z-index: 1;
  flex-shrink: 1;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  min-width: 0;
}

.crt-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px 7px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2e2a26;
  text-decoration: none;
  border-radius: 4px;
  border-style: solid;
  border-width: 2px;
  border-color: #fcf9f1 #70685d #554e45 #f5efe4;
  background: linear-gradient(180deg, #f7f4ec 0%, #e8e2d6 32%, #d4cbc0 100%);
  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.75),
    inset -1px -1px 3px rgba(56, 50, 44, 0.14);
}

.crt-nav-btn:hover {
  color: var(--ink);
  background: linear-gradient(180deg, #fefcf6 0%, #ebe4d8 42%, #d8cfc3 100%);
}

.crt-nav-btn:active {
  border-color: #4a433c #fcf9f1 #fcf9f1 #4a433c;
  padding: 7px 16px 6px;
  box-shadow:
    inset 2px 2px 5px rgba(0, 0, 0, 0.32),
    inset -1px -1px 0 rgba(255, 255, 255, 0.22);
}

.crt-nav-btn--accent {
  color: #fffef8;
  border-color: #5c1810 #1a0907 #1a0907 #7a3328;
  background: linear-gradient(180deg, #bc2f28 0%, #8f221e 52%, #6b1815 100%);
  box-shadow:
    inset 1px 2px min(42px, 6vw) rgba(255, 220, 200, 0.22),
    inset -2px -3px min(56px, 8vw) rgba(40, 10, 8, 0.45),
    0 min(28px, 4.5vw) min(76px, 11vw) rgba(48, 44, 38, 0.28);
}

.crt-nav-btn--accent:hover {
  color: #fffef8;
  background: linear-gradient(180deg, #cf3a31 0%, #9e2822 52%, #7a1e18 100%);
}

.crt-nav-btn--accent:active {
  border-color: #1a0907 #8a5448 #8a5448 #1a0907;
}

/* Silver nameplate (SVG) + etched type — reads as a plate stuck to the bezel */
.crt-emblem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  text-decoration: none;
  cursor: default;
  color: inherit;
}

.crt-emblem:focus-visible {
  outline: 2px solid rgba(92, 130, 200, 0.95);
  outline-offset: 4px;
}

.crt-emblem__svg {
  display: block;
  height: 44px;
  width: auto;
  font-family: var(--emblem);
  letter-spacing: 0.4px;
}

.crt-emblem__svg text {
  font-family: inherit;
  letter-spacing: inherit;
}

/* PRODUCT sales pages — terminal-styled inside the CRT.
   Per-product accent set via .product--raider / .product--skyhawk modifiers. */
.product {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 48px clamp(32px, 5vw, 72px) 64px;
  width: 100%;
  color: var(--ink);
  --accent: var(--red);
  --accent-deep: var(--red-deep);
}

.product--raider {
  --accent: var(--red);
  --accent-deep: var(--red-deep);
}

.product--skyhawk {
  --accent: var(--blue);
  --accent-deep: var(--blue-deep);
}

.product--indicators {
  --accent: var(--amber);
  --accent-deep: var(--amber-deep);
}

.product h1, .product h2 {
  font-family: var(--font-screen), monospace;
  margin: 0;
}

.product section { margin: 0; }

/* Hero */
.product-hero {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 2px solid rgba(14, 14, 16, 0.18);
  padding-bottom: 24px;
}
.product-hero-mark {
  margin-bottom: 6px;
  color: var(--accent);
}
.product-logo {
  display: block;
}
.product-eyebrow {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.product-title {
  font-size: clamp(64px, 12vw, 128px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--ink);
}
.product-tagline {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 500;
  color: var(--ink);
}

/* Pitch paragraph */
.product-pitch p {
  margin: 0;
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.55;
  max-width: 64ch;
}

/* Specs grid */
.product-specs dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px 24px;
  margin: 0;
  padding: 18px 22px;
  border: 1px solid rgba(14, 14, 16, 0.14);
  background: rgba(255, 255, 255, 0.55);
}
.product-specs div { display: flex; flex-direction: column; gap: 2px; }
.product-specs dt {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}
.product-specs dd {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

/* Feature callout */
.product-feature {
  border-left: 4px solid var(--accent);
  padding: 4px 0 4px 18px;
}
.product-feature h2 {
  font-size: clamp(22px, 2.4vw, 28px);
  margin-bottom: 10px;
  color: var(--ink);
}
.product-feature p {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.55;
  max-width: 64ch;
}
.product-feature-fine {
  font-size: 14px !important;
  color: var(--ink-mute);
  font-style: italic;
}

/* Pairs */
.product-pairs h2 {
  font-size: 18px;
  margin-bottom: 12px;
  letter-spacing: 0.04em;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.product-pairs-count {
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.1em;
}
.product-pairs ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 6px;
}
.product-pairs li {
  font-size: 14px;
  font-weight: 500;
  padding: 6px 8px;
  border: 1px solid rgba(14, 14, 16, 0.16);
  background: rgba(255, 255, 255, 0.55);
  text-align: center;
}

/* Trust list */
.product-trust h2 {
  font-size: clamp(22px, 2.4vw, 28px);
  margin-bottom: 14px;
}
.product-trust ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.product-trust li {
  font-size: 16px;
  line-height: 1.5;
  padding-left: 22px;
  position: relative;
}
.product-trust li::before {
  content: ">";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 700;
}
.product-trust strong {
  font-weight: 700;
}
.product-trust code {
  font-size: 0.92em;
  padding: 1px 5px;
  background: rgba(14, 14, 16, 0.08);
  border-radius: 2px;
}

/* CTA */
.product-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
}
.product-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fffef8;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
  border: 2px solid var(--accent-deep);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 2px 0 rgba(0, 0, 0, 0.20);
}
.product-cta-btn:hover {
  filter: brightness(1.08);
}
.product-cta-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}
.product-cta-fine {
  margin: 0;
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* MetaTrader index — clean, spaced overview that funnels to the two products */
.mt-index {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 64px;
  padding: 64px clamp(32px, 5vw, 72px) 80px;
  width: 100%;
  color: var(--ink);
}
.mt-index h1, .mt-index h2 {
  font-family: var(--font-screen), monospace;
  margin: 0;
}
.mt-hero {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mt-eyebrow {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.mt-title {
  font-size: clamp(56px, 9vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.mt-tagline {
  margin: 0;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 500;
  max-width: 56ch;
  color: var(--ink-2);
}

/* Quick value-prop marks — icon + short label, generous gaps */
.mt-marks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 28px 32px;
}
.mt-marks li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.mt-marks svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--ink);
  opacity: 0.78;
}

/* Product cards — bigger, more breathable */
.mt-products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 22px;
}
.mt-card {
  display: flex;
  gap: 22px;
  padding: 28px;
  text-decoration: none;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(14, 14, 16, 0.18);
  border-left-width: 5px;
  transition: background 0.12s ease, transform 0.12s ease;
  --accent: var(--red);
  --accent-deep: var(--red-deep);
}
.mt-card:hover {
  background: rgba(255, 255, 255, 0.82);
  transform: translateY(-2px);
}
.mt-card--raider     { --accent: var(--red);   --accent-deep: var(--red-deep);   border-left-color: var(--accent); }
.mt-card--skyhawk    { --accent: var(--blue);  --accent-deep: var(--blue-deep);  border-left-color: var(--accent); }
.mt-card--indicators { --accent: var(--amber); --accent-deep: var(--amber-deep); border-left-color: var(--accent); }
.mt-card-logo {
  flex-shrink: 0;
  color: var(--accent);
}
.mt-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.mt-card-eyebrow {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.mt-card-title {
  font-size: 36px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.mt-card-tagline {
  margin: 0;
  font-size: 14px;
  color: var(--ink-2);
}
.mt-card-cta {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

/* "Coming soon" stub page layout */
.coming-soon {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: 40px 24px;
  min-height: 0;
}

.coming-soon h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 7vw, 88px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}

.coming-soon p {
  font-family: var(--sans);
  font-size: clamp(16px, 1.6vw, 22px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0;
}

/* Product pages (/raider, /skyhawk) ————————————————————————————— */
.product-page {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 40px 48px 24px;
  font-family: var(--font-screen), ui-monospace, "Cascadia Mono", "Courier New", monospace;
  color: var(--ink);
}
.product-page-header h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 56px;
  margin: 0 0 8px;
}
.product-page-tagline {
  color: var(--ink-2);
  font-size: 16px;
  margin: 0 0 32px;
}
.product-page-buy h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  margin: 0 0 14px;
}
.product-page-buy-note {
  margin: 16px 0 0;
  color: var(--ink-mute);
  font-size: 13px;
}
.buy-options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  max-width: 540px;
}
.buy-options-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 18px 20px 18px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  color: var(--ink);
}
.buy-options-buy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 11px 22px;
  background: var(--red);
  color: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 100ms ease, box-shadow 100ms ease, background 100ms ease;
}
.buy-options-buy:hover {
  background: var(--red-deep);
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}
.buy-options-buy--disabled {
  background: var(--paper-3);
  color: var(--ink-mute);
  border-color: var(--rule);
  box-shadow: 3px 3px 0 var(--rule);
  cursor: not-allowed;
  pointer-events: none;
}
.buy-options-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--red);
  border: 1px solid var(--ink);
  border-radius: 3px;
}
.buy-options-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  padding-right: 56px;
}
.buy-options-amounts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.buy-options-list {
  font-size: 15px;
  color: var(--ink-mute);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.buy-options-sale {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  color: var(--ink);
  line-height: 1.1;
}
.buy-options-amount {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  color: var(--ink);
}
.buy-options-note {
  margin: 12px 0 0;
  max-width: 540px;
  font-size: 13px;
  color: var(--ink-mute);
}

/* Welcome / post-purchase landing —————————————————————————————— */
.welcome-page {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 40px 48px 24px;
  font-family: var(--font-screen), ui-monospace, "Cascadia Mono", "Courier New", monospace;
  color: var(--ink);
}
.welcome-page h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 44px;
  margin: 0 0 16px;
  color: var(--ink);
}
.welcome-status {
  font-size: 16px;
  color: var(--ink-2);
  padding: 12px 16px;
  border-left: 3px solid var(--yellow);
  background: rgba(244, 196, 48, 0.08);
}
.welcome-headline {
  font-family: var(--serif);
  font-size: 28px;
  margin: 0 0 12px;
  color: var(--ink);
}
.welcome-email {
  background: rgba(14, 14, 16, 0.06);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: inherit;
}
.welcome-download {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 18px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 13px;
}
.welcome-download:hover { background: var(--blue-deep); }
.welcome-docs { color: var(--ink-mute); font-size: 13px; }
.welcome-timeout, .welcome-error { color: var(--ink-2); }
.welcome-timeout a, .welcome-error a { color: var(--blue-deep); }

/* Products overview ——————————————————————————————————————————————— */
.products-page {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 40px 48px 24px;
  font-family: var(--font-screen), ui-monospace, "Cascadia Mono", "Courier New", monospace;
  color: var(--ink);
}
.products-page h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 44px;
  margin: 0 0 16px;
  color: var(--ink);
}
.products-lead {
  margin: 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
}
.products-cards {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
  max-width: 720px;
}
.products-card {
  margin: 0;
  padding: 16px 18px;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: rgba(255, 255, 255, 0.42);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}
.products-card h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  margin: 0 0 8px;
}
.products-card h2 :is(a, a:visited) {
  color: var(--blue-deep);
  text-decoration: none;
}
.products-card h2 a:hover {
  text-decoration: underline;
}
.products-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}
.products-home-link {
  margin: 32px 0 0;
  font-size: 14px;
}
.products-home-link :is(a, a:visited) {
  color: var(--blue-deep);
}
.products-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--amber-deep);
  background: rgba(200, 129, 15, 0.14);
  vertical-align: middle;
}
.products-card--free {
  border-color: rgba(200, 129, 15, 0.28);
}

/* Free / paid product detail pages ————————————————————————————————— */
.product-page {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 40px 48px 32px;
  font-family: var(--font-screen), ui-monospace, "Cascadia Mono", "Courier New", monospace;
  color: var(--ink);
}
.product-page-header h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 44px;
  margin: 0 0 12px;
}
.product-page-eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber-deep);
}
.product-page-tagline {
  margin: 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
}
.product-page-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 24px 40px;
  align-items: center;
}
.product-page-hero .product-page-header {
  margin: 0;
  max-width: 38ch;
}
.product-page-hero .product-page-tagline {
  max-width: none;
}
.product-page-shot {
  margin: 0;
  max-width: none;
}
.product-page-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(14, 14, 16, 0.08);
}
.product-page-buy,
.product-page-note {
  margin-top: 32px;
  max-width: 62ch;
}
.product-page-buy h2,
.product-page-note h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  margin: 0 0 12px;
}
.product-page-download {
  margin: 20px 0 0;
}
.product-page-download-btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 6px;
  background: var(--blue);
  color: #fff !important;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 0 var(--blue-deep);
}
.product-page-download-btn:hover {
  background: var(--blue-deep);
}
.product-page-gate {
  margin-top: 20px;
  max-width: 36rem;
}
.product-page-gate-card {
  padding: 20px 22px 18px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.product-page-gate-kicker {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber-deep);
}
.product-page-gate-lead {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}
.product-page-gate-note {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}
.product-page-gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
}
.product-page-gate-primary {
  margin: 0;
}
.product-page-gate-file {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px dashed rgba(14, 14, 16, 0.18);
  border-radius: 6px;
  background: rgba(14, 14, 16, 0.03);
  color: var(--ink-mute);
  font-size: 13px;
}
.product-page-gate-lock {
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: 3px;
  position: relative;
  opacity: 0.75;
}
.product-page-gate-lock::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 8px;
  height: 6px;
  margin-bottom: 1px;
  border: 2px solid currentColor;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  transform: translateX(-50%);
  box-sizing: border-box;
}
.product-page-gate-file-name {
  flex: 1 1 auto;
  font-family: var(--font-screen), ui-monospace, monospace;
  color: var(--ink-2);
}
.product-page-gate-file-tag {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(14, 14, 16, 0.06);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.product-page-note p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}
.product-page-docs {
  margin: 24px 0 0;
}
.product-page-docs-btn {
  display: inline-block;
  padding: 11px 18px;
  border: 1px solid var(--ink);
  border-radius: 6px;
  background: transparent;
  color: var(--ink) !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 0 rgba(14, 14, 16, 0.12);
  transition: background 120ms ease, border-color 120ms ease;
}
.product-page-docs-btn:hover {
  background: var(--paper-2);
  border-color: var(--ink-2);
}
.product-page-note :is(a, a:visited) {
  color: var(--blue-deep);
}

@media (max-width: 900px) {
  .product-page-hero {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .product-page-hero .product-page-header {
    max-width: none;
  }
}

/* Policies hub + legal docs — see public/css/content.css */

/* Account ————————————————————————————————————————————————————————— */
.account-details {
  margin: 0 0 28px;
  padding: 14px 18px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.account-details-grid {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 6px 16px;
  margin: 0;
  font-size: 14px;
}
.account-details-grid dt {
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  align-self: center;
}
.account-details-grid dd {
  margin: 0;
  color: var(--ink);
  word-break: break-all;
}
.account-manage {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--rule);
  font-size: 13px;
}
.account-manage-link {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.account-manage-link:hover,
.account-manage-link:focus-visible { color: var(--blue-deep); }

.account-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--rule);
  margin: 0 0 18px;
}
.account-tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 10px 16px;
  margin-bottom: -1px;
  font: inherit;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  cursor: pointer;
}
.account-tab:hover { color: var(--ink); }
.account-tab:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}
.account-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--yellow);
}

.account-tab-panel {
  margin: 0;
}

.my-licenses-activation {
  margin: 0 0 16px;
  padding: 10px 14px;
  background: rgba(244, 196, 48, 0.10);
  border-left: 3px solid var(--yellow);
  color: var(--ink-2);
  font-size: 14px;
}
.my-licenses-activation code {
  background: rgba(14, 14, 16, 0.06);
  padding: 1px 6px;
  border-radius: 3px;
}
.my-licenses-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.my-licenses-table th,
.my-licenses-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
}
.my-licenses-table th {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}
.my-licenses-table a {
  color: var(--blue-deep);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.my-licenses-table a:hover { border-bottom-color: var(--yellow); }
.my-licenses-empty {
  color: var(--ink-2);
  padding: 20px 0;
}
.my-licenses-empty a {
  color: var(--blue-deep);
}
.my-licenses-error {
  color: var(--red-deep);
}

/* Van Coller cross-promotion ad widget — floating bottom-left on every page. */
.vc-ad-widget {
  position: fixed;
  left: 16px;
  bottom: 16px;
  border: 0;
  background: transparent;
  max-width: 100%;
  z-index: 50;
  pointer-events: auto;
}

@media (max-width: 640px) {
  .vc-ad-widget { display: none; }
}

/* Logo slot — horizontal lockup in the brand rail above the CRT tube */
.crt-brand-lockup-link {
  display: flex;
  align-items: center;
  margin: 0;
  line-height: 0;
  border-radius: 6px;
  outline-offset: 3px;
  transition: filter 120ms ease;
}
.crt-brand-lockup-link:hover { filter: brightness(1.04); }
.crt-brand-lockup-link:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 4px;
}

.crt-brand-lockup {
  display: block;
  height: 45px;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
}

@media (max-width: 640px) {
  .crt-brand-lockup { height: 22px; }
}

/* Shown only in the mobile flat layout — desktop uses .crt-shell-brand-rail */
.crt-mobile-brand {
  display: none;
}

.crt-bezel-footer {
  flex-shrink: 0;
  align-self: stretch;
  /* Full chassis width + flush to inner bottom of .crt-monitor-shell */
  width: calc(100% + 2 * var(--crt-pad-inline));
  max-width: none;
  margin-top: 7px;
  margin-inline: calc(-1 * var(--crt-pad-inline));
  margin-bottom: calc(-1 * var(--crt-shell-pad-block-end));
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding-block-start: 7px;
  padding-inline: calc(var(--crt-pad-inline) + 11px);
  padding-block-end: 14px;
  border-radius: 0 0 12px 12px;
  border-top: 1px solid rgba(118, 110, 100, 0.22);
  background: linear-gradient(
    180deg,
    #e4ddd2 0%,
    #d3c9bc 48%,
    #c4bab0 100%
  );
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.38),
    0 1px 0 rgba(255, 255, 252, 0.12);
}

.crt-bezel-model {
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(56, 50, 44, 0.62);
  white-space: nowrap;
}

.crt-bezel-led {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.5);
  background: radial-gradient(circle at 32% 32%, #9af2a8, #1e6b24 72%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.55),
    0 0 11px rgba(60, 200, 80, 0.55),
    0 0 2px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  animation: crtLedPulse 2.4s ease-in-out infinite;
}

@keyframes crtLedPulse {
  0%, 100% {
    background: radial-gradient(circle at 32% 32%, #9af2a8, #1e6b24 72%);
    box-shadow:
      inset 1px 1px 0 rgba(255, 255, 255, 0.55),
      0 0 11px rgba(60, 200, 80, 0.55),
      0 0 2px rgba(0, 0, 0, 0.45);
  }
  50% {
    background: radial-gradient(circle at 32% 32%, #d2ffd8, #2e9a3a 72%);
    box-shadow:
      inset 1px 1px 0 rgba(255, 255, 255, 0.85),
      0 0 18px rgba(80, 240, 100, 0.85),
      0 0 6px rgba(60, 200, 80, 0.5),
      0 0 2px rgba(0, 0, 0, 0.45);
  }
}

.crt-monitor-glint {
  position: absolute;
  inset: 0;
  z-index: 16;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    122deg,
    rgba(255, 255, 255, 0.11) 0%,
    rgba(255, 255, 255, 0.02) 28%,
    transparent 40%,
    transparent 74%,
    rgba(240, 250, 255, 0.04) 100%
  );
  mix-blend-mode: soft-light;
}

.crt-monitor-stand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  flex-shrink: 0;
  pointer-events: none;
}

/* Chunky CRT neck — mates shell to broad plinth */
.crt-monitor-stand-neck {
  width: min(620px, 72%);
  height: 36px;
  margin-top: -2px;
  background:
    linear-gradient(
      90deg,
      rgba(132, 124, 110, 0.35) 0%,
      rgba(226, 218, 204, 0.55) 12%,
      var(--crt-beige-mid) 50%,
      rgba(226, 218, 204, 0.55) 88%,
      rgba(132, 124, 110, 0.35) 100%
    );
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
  box-shadow:
    inset 0 2px min(54px, 8vw) rgba(255, 255, 255, 0.16),
    inset 0 min(-28px, -5vw) min(74px, 12vw) rgba(56, 50, 44, 0.22);
}

/* Wide square plinth — the heavy “desk footprint” OEM bases had */
.crt-monitor-stand-plinth {
  width: min(920px, 96%);
  height: 56px;
  margin-top: -1px;
  border-radius: 4px 4px min(18px, 3.2vw) min(18px, 3.2vw);
  border: 1px solid #4a4338;
  background:
    linear-gradient(
      180deg,
      #a89d8e 0%,
      #8c8274 22%,
      #6e6559 78%,
      #5a5248 100%
    );
  box-shadow:
    inset 0 2px min(58px, 9vw) rgba(255, 255, 255, 0.08),
    inset 0 min(-40px, -7vw) min(100px, 16vw) rgba(24, 20, 16, 0.35),
    0 min(22px, 4vw) min(64px, 10vw) rgba(0, 0, 0, 0.48);
}

@media (max-width: 900px) {
  /* Home — drop folder windows; welcome panel fills the desktop */
  .xp-desktop:not(.xp-desktop--app) .xp-desktop-windows,
  .xp-desktop:not(.xp-desktop--app) .xp-desktop-shortcuts {
    display: none !important;
  }

  .xp-desktop:not(.xp-desktop--app) {
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
  }

  .xp-desktop:not(.xp-desktop--app) .xp-assistant {
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    max-height: none;
    width: auto;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 8px;
    margin: 10px 12px 12px;
    align-self: stretch;
    align-content: end;
  }

  .xp-desktop:not(.xp-desktop--app) .xp-assistant-bubble {
    min-height: 0;
    max-height: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
  }

  .xp-desktop:not(.xp-desktop--app) .xp-assistant-bubble-body {
    flex: 1 1 0;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .xp-desktop:not(.xp-desktop--app) .xp-assistant-bot {
    flex-shrink: 0;
    align-self: end;
    justify-self: end;
    margin-top: 0;
  }
}

/*
 * Compact desktop — small laptops (1366x768 class) and short windows.
 * Keep the CRT metaphor intact but shrink every chrome dimension so the
 * inner viewport stops getting crushed. Sticky notes and the mug are off
 * here because at this width they overhang into the room wall instead of
 * sitting on the desk.
 */
@media (min-width: 1001px) and (max-width: 1440px),
       (min-width: 1001px) and (max-height: 820px) {
  body.crt-desktop { --crt-batting: 12px; }

  .crt-monitor {
    /* The base rule caps width by 115vh, which on a 768px display gives
       only 883px — fine — but we also want to allow a touch more height
       so the chrome reductions below pay off. */
    max-width: min(1280px, 130vh);
  }

  .crt-monitor-shell {
    --crt-pad-inline: 14px;
    --crt-monitor-chrome-inset: 14px;
    --crt-shell-pad-block-end: 10px;
    border-radius: 16px 16px 12px 12px;
  }

  .crt-shell-brand-rail { height: 40px; }

  .crt-monitor-tube-stack { margin-bottom: 14px; }

  .crt-monitor-mask {
    padding: 22px;
    /* Reduce the chamfer shadows so the slimmer bezel doesn't look muddy. */
    box-shadow:
      inset 0 min(48px, 8vh) min(64px, 12vh) -12px rgba(56, 44, 32, 0.50),
      inset 0 min(14px, 3vh) min(22px, 5vh) -6px rgba(56, 44, 32, 0.38),
      inset 0 min(-40px, -7vh) min(60px, 12vh) -12px rgba(255, 252, 240, 0.55),
      inset 0 min(-12px, -2vh) min(18px, 4vh) -4px rgba(255, 252, 240, 0.45),
      inset min(34px, 5vw) 0 min(48px, 8vw) -10px rgba(72, 58, 44, 0.28),
      inset min(-34px, -5vw) 0 min(48px, 8vw) -10px rgba(72, 58, 44, 0.24),
      inset 0 1px 0 rgba(255, 255, 248, 0.55),
      inset 0 -1px 0 rgba(255, 255, 248, 0.18);
  }

  .crt-aperture-frame { padding: 10px; }

  /* Off-chassis decorations — would overhang the slim chassis and clip
     against the room wall at this size. !important matches the mobile
     hides; the same components own these classes via Vue scoped CSS
     and would otherwise win on specificity. */
  .crt-monitor-mug,
  .crt-stickynotes-right,
  .crt-screen-stickynote { display: none !important; }

  /* Thin the wood desk strip so it stops eating viewport height. */
  .desk-surface { height: 24px; }
}

/*
 * Mobile — strip the desk scene (CRT chassis, stand, mug, stickies, wood desk).
 * Content + taskbar only; full viewport height without nested vh flex traps.
 */
@media (max-width: 1000px) {
  html.crt-root {
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    overflow: hidden;
  }

  body.crt-desktop {
    display: flex;
    flex-direction: column;
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    padding: 0;
    overflow: hidden;
    background: var(--paper);
    box-shadow: none;
  }

  .crt-room-wall {
    display: none;
  }

  .desk-surface {
    display: none;
  }

  .crt-desk {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    align-items: stretch;
  }

  .crt-monitor {
    flex: 1 1 auto;
    min-height: 0;
    max-width: none;
    width: 100%;
    filter: none;
  }

  .crt-shell-brand-rail,
  .crt-monitor-stand,
  .crt-monitor-mug,
  .vc-project-badge,
  .crt-screen-stickynote,
  .crt-stickynotes-right,
  .crt-bezel-footer,
  .crt-bezel-chamfer,
  .crt-monitor-glint,
  .crt-viewport-vignette,
  .crt-screen-glitch {
    display: none !important;
  }

  .crt-monitor-shell {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .crt-monitor-tube-stack {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
  }

  .crt-monitor-mask {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .crt-aperture-frame {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .crt-viewport {
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 0;
    background: var(--paper);
    box-shadow: none;
    overflow: hidden;
  }

  .crt-viewport::before {
    display: none;
  }

  .crt-page-layer {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: clip;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: rgba(14, 14, 16, 0.35) rgba(14, 14, 16, 0.08);
  }

  .buy-options {
    grid-template-columns: 1fr;
    max-width: none;
  }

  .product-page {
    padding: 20px 16px 28px;
    overflow-x: clip;
    max-width: 100%;
  }

  .product-page-header h1 {
    font-size: clamp(32px, 9vw, 40px);
  }

  .crt-page-layer::-webkit-scrollbar-track {
    background: rgba(14, 14, 16, 0.08);
  }

  .crt-page-layer::-webkit-scrollbar-thumb {
    background: rgba(14, 14, 16, 0.35);
  }

  .crt-page-layer--content-hidden {
    overflow: hidden;
  }

  /* Home: one scroll surface inside the desktop, not the page layer */
  .crt-page-layer:has(> .xp-desktop) {
    overflow: hidden;
  }

  .xp-desktop {
    flex: 1 1 0;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .xp-taskbar {
    flex-shrink: 0;
    height: auto;
    min-height: 40px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    align-items: center;
    overflow: visible;
  }

  .xp-start,
  .xp-task,
  .xp-tray {
    margin-top: 2px;
    margin-bottom: 2px;
  }

  .xp-tray {
    flex-shrink: 0;
    min-width: 3.5rem;
    min-height: 26px;
    padding: 0 10px;
  }

  .xp-tray-clock {
    white-space: nowrap;
  }

  .xp-task {
    flex-shrink: 1;
    min-width: 0;
  }

  .xp-spacer {
    flex-shrink: 1;
    min-width: 4px;
  }

  /* Match xp-taskbar — grey system chrome, not paper */
  .crt-mobile-brand {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 4px 8px;
    background: #c0c0c0;
    border-bottom: 2px solid #ffffff;
    box-shadow: inset 0 1px 0 #808080;
    font-family: var(--font-sans), "Segoe UI", Tahoma, Verdana, system-ui, sans-serif;
    z-index: 8;
  }

  .crt-mobile-brand-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    max-width: min(300px, 78vw);
    line-height: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    text-decoration: none;
    transition: filter 120ms ease;
  }

  .crt-mobile-brand-link:hover {
    filter: brightness(1.04);
  }

  .crt-mobile-brand-link:focus-visible {
    outline: 1px dotted #000000;
    outline-offset: 4px;
  }

  .crt-mobile-brand-lockup {
    display: block;
    width: auto;
    height: 44px;
    max-height: 44px;
    object-fit: contain;
  }

}


a { color: inherit; }

/* XP desktop — home page wallpaper */
.xp-desktop {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #3a6ea5 0%, #2f62b8 52%, #245edc 100%);
}

.xp-wall-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.xp-wall-layer--hill-back,
.xp-wall-layer--hill-front {
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
}

.xp-wall-layer--hill-back {
  height: 48%;
  background: radial-gradient(ellipse 130% 95% at 28% 100%, #1e4d7a 0%, transparent 72%);
}

.xp-wall-layer--hill-front {
  height: 38%;
  background: radial-gradient(ellipse 95% 85% at 78% 100%, #163d62 0%, transparent 68%);
}

.xp-wall-layer--cloud {
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.13);
  filter: blur(14px);
  width: var(--cloud-w, 42%);
  height: var(--cloud-h, 16%);
  top: var(--cloud-y, 14%);
  left: var(--cloud-x, -22%);
}

.xp-desktop--drift .xp-wall-layer--hill-back {
  animation: xpWallHillDrift 9s ease-in-out infinite;
}

.xp-desktop--drift .xp-wall-layer--hill-front {
  animation: xpWallHillDrift 9s ease-in-out infinite reverse;
}

.xp-desktop--drift .xp-wall-layer--cloud-1 {
  --cloud-w: 44%;
  --cloud-h: 17%;
  --cloud-y: 11%;
  animation: xpWallCloudDrift 74s linear infinite;
}

.xp-desktop--drift .xp-wall-layer--cloud-2 {
  --cloud-w: 34%;
  --cloud-h: 13%;
  --cloud-y: 20%;
  --cloud-x: -28%;
  opacity: 0.72;
  animation: xpWallCloudDrift 96s linear infinite;
  animation-delay: -24s;
}

.xp-desktop--drift .xp-wall-layer--cloud-3 {
  --cloud-w: 26%;
  --cloud-h: 11%;
  --cloud-y: 7%;
  --cloud-x: -18%;
  opacity: 0.48;
  animation: xpWallCloudDrift 58s linear infinite;
  animation-delay: -41s;
}

@keyframes xpWallCloudDrift {
  from { transform: translateX(0); }
  to { transform: translateX(260%); }
}

@keyframes xpWallHillDrift {
  0%, 100% { opacity: 1; transform: translateY(0); }
  50% { opacity: 0.9; transform: translateY(2px); }
}

@media (prefers-reduced-motion: reduce) {
  .xp-desktop--drift .xp-wall-layer {
    animation: none !important;
  }
}

.xp-desktop-windows {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(14px, 2vw, 22px);
}

.xp-desktop-windows .xp-explorer:nth-child(1) {
  margin-left: 0;
}

.xp-desktop-windows .xp-explorer:nth-child(2) {
  margin-left: 22px;
}

.xp-desktop-windows .xp-explorer:nth-child(3) {
  margin-left: 10px;
}

.xp-desktop-shortcuts {
  position: absolute;
  top: clamp(14px, 2vw, 22px);
  right: clamp(14px, 2vw, 22px);
  z-index: 1;
  display: flex;
  /* Lay shortcuts left-to-right across the top-right corner instead of stacking.
     Array order in homeDesktop.ts controls who sits on the left. */
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  pointer-events: auto;
}

/* Win95 desktop icon labels — white on wallpaper, black text stays inside folder windows */
.xp-desktop-shortcut {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 96px;
  padding: 2px 4px 4px;
  text-decoration: none;
  color: #ffffff;
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, "Segoe UI", sans-serif;
  font-size: 12px;
  line-height: 1.2;
  pointer-events: auto;
  -webkit-font-smoothing: auto;
}

.xp-desktop-shortcut-tile {
  position: relative;
  width: 44px;
  height: 44px;
  flex: none;
}

.xp-desktop-shortcut-tile img {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Edge-bleed icons (no internal padding in the source SVG) need to render
   smaller so they look visually balanced against icons that do carry internal
   whitespace (Account, readme.txt). Slight left nudge so the icon's visual
   centre lines up with the centred label below it rather than drifting right. */
.xp-desktop-shortcut-tile--inset img {
  width: 36px;
  height: 36px;
  margin-left:4px;
}

.xp-desktop-shortcut-arrow {
  position: absolute;
  left: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  line-height: 0;
  pointer-events: none;
}

.xp-desktop-shortcut-arrow svg {
  display: block;
  width: 12px;
  height: 12px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.xp-desktop-shortcut-label {
  margin-top: 5px;
  max-width: 96px;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  text-shadow: 1px 1px 0 #000000;
}

.xp-desktop-shortcut:hover .xp-desktop-shortcut-label {
  text-decoration: underline;
}

.xp-desktop-shortcut:focus-visible {
  outline: 1px dotted #ffffff;
  outline-offset: 1px;
  background: rgba(0, 0, 128, 0.45);
}

.xp-desktop-shortcut:focus-visible .xp-desktop-shortcut-label {
  background: rgba(0, 0, 128, 0.45);
  outline: 1px dotted #ffffff;
  outline-offset: 1px;
}

/* —— Explorer windows (home desktop) —— */
.xp-explorer {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(288px, 40vw);
  max-width: 288px;
  flex: none;
  border: 2px solid;
  border-color: #dfdfdf #404040 #404040 #dfdfdf;
  box-shadow:
    inset 1px 1px 0 #ffffff,
    2px 2px 6px rgba(0, 0, 0, 0.35);
  font-family: Tahoma, "Segoe UI", Verdana, system-ui, sans-serif;
  font-size: 11px;
  color: #000000;
  -webkit-font-smoothing: antialiased;
}

.xp-explorer-titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 2px 3px 2px 4px;
  background: linear-gradient(180deg, #0997ff 0%, #0053ee 8%, #0050ee 40%, #06f 88%, #06f 93%, #005dea 95%, #003dda 96%, #005dea 100%);
  color: #ffffff;
  user-select: none;
}

.xp-explorer-titlebar-folder {
  flex: none;
  width: 16px;
  height: 16px;
}

.xp-explorer-titlebar-text {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.45);
}

.xp-explorer-titlebar-buttons {
  display: flex;
  gap: 2px;
  flex: none;
}

.xp-explorer-winbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 14px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: #000000;
  background: #c0c0c0;
  border: 2px outset #c0c0c0;
}

.xp-explorer-winbtn--close {
  font-size: 11px;
  font-weight: 400;
}

.xp-explorer-body {
  flex: 1 1 auto;
  min-height: 88px;
  padding: 10px 8px 8px;
  background: #ffffff;
  border-top: 1px solid #808080;
}

.xp-explorer-icons {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 12px 10px;
}

.xp-explorer-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 76px;
  text-decoration: none;
  color: #000000;
}

.xp-explorer-icon-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}

.xp-explorer-icon-tile img {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.xp-explorer-icon-label {
  margin-top: 4px;
  max-width: 76px;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  word-break: break-word;
}

.xp-explorer-icon:hover .xp-explorer-icon-label {
  text-decoration: underline;
}

.xp-explorer-icon:focus-visible {
  outline: 1px dotted #000000;
  outline-offset: 2px;
}

.xp-explorer-statusbar {
  display: flex;
  align-items: center;
  min-height: 20px;
  padding: 1px 4px;
  background: #c0c0c0;
  border-top: 1px solid #808080;
  box-shadow: inset 0 1px 0 #ffffff;
  font-size: 11px;
  color: #000000;
}

.xp-explorer-statusbar span {
  padding: 0 4px;
  border: 1px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  background: #c0c0c0;
  line-height: 1.35;
}

/* —— Application windows (product pages) —— */
.xp-desktop--app {
  align-items: stretch;
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(8px, 1.4vw, 12px);
  box-sizing: border-box;
  position: relative;
}

.xp-desktop--app .xp-wall-layer {
  z-index: 0;
}

.xp-app-phosphor-wash {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    ellipse 110% 95% at 50% 48%,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(244, 241, 232, 0.11) 62%,
    rgba(230, 225, 210, 0.17) 100%
  );
  mix-blend-mode: soft-light;
}

.xp-app-crt-fx {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}

.xp-app-crt-scanlines {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background: repeating-linear-gradient(
    180deg,
    transparent 0 2px,
    rgba(20, 22, 30, 0.05) 2px 3px
  );
  animation: crtFlicker 7.5s ease-in-out infinite;
}

.xp-app-crt-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 92% 88% at 50% 50%,
    transparent 52%,
    rgba(12, 14, 20, 0.1) 78%,
    rgba(8, 10, 16, 0.18) 100%
  );
}

.xp-app-window {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  width: 100%;
  border: 2px solid;
  border-color: #dfdfdf #404040 #404040 #dfdfdf;
  box-shadow:
    inset 1px 1px 0 #ffffff,
    2px 2px 10px rgba(0, 0, 0, 0.42);
  font-family: Tahoma, "Segoe UI", Verdana, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.xp-app-titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 2px 3px 2px 4px;
  background: linear-gradient(180deg, #0997ff 0%, #0053ee 8%, #0050ee 40%, #06f 88%, #06f 93%, #005dea 95%, #003dda 96%, #005dea 100%);
  color: #ffffff;
  user-select: none;
  flex: none;
}

.xp-app-titlebar-icon {
  flex: none;
  width: 16px;
  height: 16px;
  object-fit: contain;
  background: #ffffff;
  border-radius: 1px;
}

.xp-app-titlebar-text {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.45);
}

.xp-app-titlebar-buttons {
  display: flex;
  gap: 2px;
  flex: none;
}

.xp-app-winbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 14px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: #000000;
  background: #c0c0c0;
  border: 2px outset #c0c0c0;
  text-decoration: none;
}

.xp-app-winbtn--close {
  font-size: 11px;
  font-weight: 400;
}

.xp-app-winbtn--close:hover {
  filter: brightness(1.06);
}

.xp-app-client {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  position: relative;
  background: var(--paper, #faf7f0);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: auto;
  scrollbar-color: #c0c0c0 #ece9d8;
}

/* Win95-dialog pages (Account) override the paper background with the system
   face colour so etched groupboxes sit on the right substrate. :has() scopes
   this to the Account view's wrapper without needing a body class or JS toggle. */
.xp-app-client:has(.acct) {
  background: #c0c0c0;
}

/* When Account is on screen, shrink the AppShell window to a dialog and centre
   it on the desktop instead of filling the viewport --- a Win95 properties
   dialog never went edge-to-edge. */
.xp-desktop--app:has(.acct) {
  align-items: center;
  justify-content: flex-start;
  padding-top: 40px;
}
.xp-desktop--app:has(.acct) .xp-app-window {
  flex: 0 0 auto;
  width: min(680px, 100%);
  max-height: calc(100% - 80px);
}

/* Slightly tighter insets when workshop pages run inside an app window */
.xp-app-client :is(.plat, .contact, .policy-page, .account-page, .product-page, .rdr) {
  padding-top: 28px;
  padding-bottom: 40px;
}

.xp-app-client .plat,
.xp-app-client .contact {
  padding-left: clamp(28px, 4vw, 44px);
  padding-right: clamp(28px, 4vw, 44px);
}

.xp-app-client .rdr {
  padding-left: clamp(28px, 4vw, 40px);
  padding-right: clamp(28px, 4vw, 40px);
}

.xp-app-client::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

.xp-app-client::-webkit-scrollbar-track {
  background: #ece9d8;
  box-shadow: inset 1px 0 0 #ffffff;
}

.xp-app-client::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
}

.xp-app-statusbar {
  display: flex;
  align-items: center;
  min-height: 20px;
  padding: 1px 4px;
  background: #c0c0c0;
  border-top: 1px solid #808080;
  box-shadow: inset 0 1px 0 #ffffff;
  font-size: 11px;
  color: #000000;
  flex: none;
}

.xp-app-statusbar span {
  padding: 0 4px;
  border: 1px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  background: #c0c0c0;
  line-height: 1.35;
}

/* —— Office-style desktop assistant —— */
.xp-assistant {
  position: absolute;
  right: clamp(20px, calc(2.5vw + 10px), 34px);
  bottom: clamp(8px, 2vh, 20px);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: min(460px, 58vw);
  pointer-events: none;
  --xp-assistant-tail-center: 35px;
  --xp-assistant-bot-width: clamp(84px, 13vw, 108px);
}

.xp-assistant-bubble,
.xp-assistant-bot {
  pointer-events: none;
}

.xp-assistant-bubble {
  position: relative;
  overflow: visible;
  background: #ffffe1;
  border: 2px solid #000000;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.28);
  font-family: Tahoma, "Segoe UI", Verdana, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #000000;
}

.xp-assistant-bubble-body {
  max-height: min(72vh, 640px);
  overflow-y: auto;
  padding: 16px 18px 14px;
  pointer-events: auto;
}

.xp-assistant-bubble::after {
  content: "";
  position: absolute;
  right: calc(var(--xp-assistant-tail-center) - 7px);
  bottom: -10px;
  width: 14px;
  height: 14px;
  background: #ffffe1;
  border-right: 2px solid #000000;
  border-bottom: 2px solid #000000;
  transform: rotate(45deg);
  z-index: 1;
}

.xp-assistant-header {
  margin: 0 0 12px;
}

.xp-assistant-kicker {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.xp-assistant-tagline {
  margin: 0;
  font-family: var(--font-serif), "Times New Roman", Georgia, serif;
  font-size: 16px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.25;
  color: #1a1a1a;
}

.xp-assistant-pitch {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.48;
}

.xp-assistant-offers {
  margin: 0 0 14px;
}

.xp-assistant-offers-heading {
  margin: 0 0 10px;
  font-family: var(--font-screen), "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red, #e63946);
}

.xp-assistant-offer-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.xp-assistant-offer-list li {
  margin: 0;
}

.xp-assistant-offer-card {
  display: block;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.2);
  text-decoration: none;
  color: inherit;
  transition: background 120ms ease, border-color 120ms ease;
}

.xp-assistant-offer-card:hover {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(0, 0, 0, 0.35);
}

.xp-assistant-offer-card:focus-visible {
  outline: 1px dotted #000000;
  outline-offset: 2px;
}

.xp-assistant-offer-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  margin-bottom: 4px;
}

.xp-assistant-offer-name {
  font-weight: 700;
  font-size: 14px;
  color: #0000ee;
  text-decoration: underline;
}

.xp-assistant-offer-card:hover .xp-assistant-offer-name {
  color: #551a8b;
}

.xp-assistant-offer-kind {
  font-family: var(--font-screen), ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #333333;
  padding: 1px 5px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  background: rgba(255, 255, 255, 0.65);
}

.xp-assistant-offer-detail {
  display: block;
  font-size: 12px;
  line-height: 1.45;
  color: #222222;
}

.xp-assistant-bot {
  display: block;
  width: var(--xp-assistant-bot-width);
  padding: 0;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.38));
  transform: translateX(calc(var(--xp-assistant-bot-width) / 2 - var(--xp-assistant-tail-center)));
}

.xp-assistant-bot-svg {
  display: block;
  width: 100%;
  height: auto;
}

.xp-assistant-antenna {
  animation: xpAssistantAntenna 1.6s ease-in-out infinite;
}

.xp-assistant-eye {
  animation: xpAssistantBlink 5s ease-in-out infinite;
}

.xp-assistant-eye-r {
  animation-delay: 0.08s;
}

@keyframes xpAssistantAntenna {
  0%, 100% { fill: #e63946; }
  50% { fill: #f4c430; }
}

@keyframes xpAssistantBlink {
  0%, 94%, 100% { transform: scaleY(1); transform-origin: center; transform-box: fill-box; }
  96% { transform: scaleY(0.12); transform-origin: center; transform-box: fill-box; }
}

@media (max-width: 900px) {
  .xp-assistant {
    position: relative;
    right: auto;
    bottom: auto;
    max-width: none;
  }

  .xp-assistant-kicker {
    font-size: 22px;
  }

  .xp-assistant-tagline {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .xp-assistant-antenna,
  .xp-assistant-eye {
    animation: none !important;
  }

  .xp-app-crt-scanlines {
    animation: none !important;
  }
}

@media (max-width: 640px) {
  .crt-nav-pad {
    gap: 6px;
  }

  .crt-nav-btn {
    padding: 5px 9px 6px;
    font-size: 9px;
  }

  .crt-emblem__svg {
    height: 22px;
  }
}

/* —— Taskbar (Windows 95 / 98 classic grey — bottom row of crt-viewport) —— */
.xp-taskbar {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-height: 36px;
  height: auto;
  padding: 2px 0;
  display: flex;
  align-items: center;
  background: #c0c0c0;
  border-top: 2px solid #ffffff;
  box-shadow: inset 0 -1px 0 #808080;
  /* Readable sans — avoids serif/monospace leaking from parent CRT contexts */
  font-family: var(--font-sans), "Segoe UI", Tahoma, Verdana, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #000000;
  position: relative;
  z-index: 7;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

.xp-start {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-sizing: border-box;
  min-height: 28px;
  padding: 2px 16px 2px 10px;
  margin: 3px 2px;
  background: #c0c0c0;
  border: 2px outset #c0c0c0;
  border-radius: 0;
  color: #000000;
  text-decoration: none;
  font-family: inherit;
  font-weight: 600;
  font-style: normal;
  font-size: 13px;
  line-height: 1.2;
  text-shadow: none;
  box-shadow: none;
  cursor: pointer;
  transition: none;
}
.xp-start:hover {
  filter: none;
  background: #cacaca;
}
.xp-start:active {
  filter: none;
  border-style: inset;
}
.xp-start:focus-visible {
  outline: 1px dotted #000000;
  outline-offset: -4px;
}

/* Start menu shell + Win95-style flyout (teleported to body — avoids CRT overflow clip) */
.xp-start-shell {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  position: relative;
}

.xp-taskbar-divider {
  flex: none;
  align-self: stretch;
  width: 3px;
  margin: 4px 6px 4px 2px;
  box-shadow:
    inset 1px 0 0 #808080,
    inset -1px 0 0 #ffffff;
}

button.xp-start {
  font-family: inherit;
  line-height: 1.2;
  appearance: none;
  -webkit-appearance: none;
}

.xp-start--open {
  border-style: inset;
  background: #b8b8b8;
}

.xp-start-menu {
  box-sizing: border-box;
  min-width: 220px;
  padding: 3px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #dfdfdf #404040 #404040 #dfdfdf;
  box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.35);
  font-family: var(--font-sans), "Segoe UI", Tahoma, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

.xp-start-menu-inner {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.xp-start-menu-strip {
  flex: none;
  width: 24px;
  background: linear-gradient(180deg, #808080 0%, #505050 48%, #383838 100%);
  color: #dcdcdc;
  font-family: inherit;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.12em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  user-select: none;
}

.xp-start-menu-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 3px 4px 5px;
  min-width: 160px;
}

.xp-start-menu-item {
  display: block;
  padding: 6px 12px 6px 32px;
  margin: 0;
  background: #c0c0c0;
  border: none;
  color: #000000;
  text-decoration: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
}

.xp-start-menu-item:hover,
.xp-start-menu-item:focus-visible {
  outline: none;
  background: #000080;
  color: #ffffff;
}

.xp-start-menu-item.router-link-active {
  font-weight: 700;
}

.xp-start-menu-footer {
  margin-top: 2px;
}

.xp-start-menu-divider {
  height: 0;
  margin: 5px 8px 6px;
  border: none;
  border-top: 1px solid #808080;
  border-bottom: 1px solid #ffffff;
}

.xp-start-menu-item--auth {
  font-weight: 700;
}

/* Trader Garage square mark (shared with /icon.svg favicon) */
.xp-start-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.xp-task {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-sizing: border-box;
  min-height: 28px;
  padding: 2px 10px 2px 8px;
  margin: 3px 2px;
  background: #c0c0c0;
  border: 2px outset #c0c0c0;
  border-radius: 0;
  box-shadow: none;
  color: #000000;
  text-decoration: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  text-shadow: none;
  transition: none;
}
.xp-task-folder,
.xp-task-icon {
  flex: none;
  width: 14px;
  height: 14px;
}
.xp-task-icon {
  object-fit: contain;
  image-rendering: pixelated;
}
.xp-task:hover {
  filter: none;
  background: #c8c8c8;
}

.xp-task-active {
  border-style: inset;
  background: #b8b8b8;
  box-shadow: none;
}

/* Right-side taskbar shortcuts — after flex spacer, before tray */
.xp-task-contact,
.xp-task-policies {
  flex-shrink: 0;
  align-self: center;
  margin-left: 4px;
  margin-right: 2px;
}

.xp-spacer {
  flex: 1 1 auto;
  margin: 4px 2px;
  box-shadow:
    inset 1px 0 0 #808080,
    inset -1px 0 0 #ffffff;
}

.xp-tray {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 3px 2px;
  background: transparent;
  /* No bevel here --- the tray strip is flush with the taskbar in real Win95.
     Only the inner .xp-tray-group well has a sunken bevel.
     margin: 3px 2px matches .xp-start + .xp-task so the well aligns vertically
     with the surrounding Start button + folder tabs. */
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #000000;
  flex-shrink: 0;
  align-self: center;
  min-height: 28px;
}

/* Inner SUNKEN well — wraps the AuthPill + clock as one cluster. Matches the
   Win95 pattern of nesting an inset region inside the tray, not Win98's grouped
   buttons.
   align-self: stretch + min-height keeps the well flush with the surrounding
   Start/folder buttons (which are 28px) rather than floating 4px shy on each
   side. */
.xp-tray-group {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 2px 10px;
  gap: 8px;
  background: #c0c0c0;
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
  border-bottom: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  box-shadow: inset 1px 1px 0 #404040;
}

/* 1px etched divider — replaces the old text pipe. Two-tone (dark + light) so
   it reads as an engraved separator rather than a literal stroke. */
.xp-tray-sep {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: #808080;
  box-shadow: 1px 0 0 #ffffff;
}

.xp-tray-clock {
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
  color: inherit;
}

/* AuthPill button. Bare — the .xp-tray-group well around it provides the bevel.
   Height auto-sizes to content; line-height: 1 was clipping descenders inside
   the 14px box. The parent well centers us, so we only need to be tall enough
   for our own glyph metrics. */
.xp-tray-account {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  background: transparent;
  border: 0;
  font: inherit;
  font-weight: 700;
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.2;
}
.xp-tray-account:hover .xp-tray-account-label,
.xp-tray-account:focus-visible .xp-tray-account-label {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.xp-tray-account:focus-visible {
  outline: 1px dotted #000000;
  outline-offset: 2px;
}
.xp-tray-account-icon {
  width: 13px;
  height: 13px;
  fill: currentColor;
  flex-shrink: 0;
}
.xp-tray-account-label {
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* —— Policy pages (privacy, refunds) —————————————————————————— */
/* Policy pages — see public/css/content.css */

/* Tablet + below: drop the folder shortcuts (Bots / Indicators / Company) from the
   taskbar. They clip to "Indicat" / "Compan" on iPad-portrait widths, and the
   Start menu carries the same links so it's no functional loss. 1024px covers
   iPad Pro 11" portrait + everything narrower. */
@media (max-width: 1024px) {
  .xp-task,
  .xp-taskbar-divider { display: none; }
}

/* Phone-sized chrome adjustments — taskbar fonts shrink, tray tightens. */
@media (max-width: 640px) {
  .xp-taskbar {
    min-height: 38px;
    font-size: 12px;
  }
  .xp-start { padding: 0 14px 0 9px; font-size: 12px; }
  .xp-tray { padding: 0 3px; font-size: 11px; }
  .xp-tray-group { padding: 0 6px; gap: 6px; }
  .xp-tray-account-label { max-width: 90px; }
}