@import url('./workshop.css');
@import url('./content.css');
@import url('./product.css');
@import url('./plat.css');
@import url('./tool.css');
@import url('./ideas.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);
  /* —— Interaction system (see docs/superpowers/specs/2026-06-03-ui-interaction-consistency-design.md) ——
     Buttons press IN toward their shadow; cards lift OUT. One transition, one focus ring. */
  --wg-shadow-rest: 4px 4px 0 var(--ink);
  --wg-shadow-press: 2px 2px 0 var(--ink);
  --wg-card-rest: 5px 5px 0 var(--ink);
  --wg-card-lift: 7px 7px 0 var(--ink);
  --wg-press: translate(2px, 2px);
  --wg-lift: translate(-2px, -2px);
  --wg-transition: transform 100ms ease, box-shadow 100ms ease, background 100ms ease;
  --wg-focus: 2px solid var(--yellow);
  /* 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 is set per-product by product.css (.product--red / .product--blue ->
     --product-accent -> --accent). Do NOT hardcode it here; doing so overrode
     every product page to red regardless of its modifier. */
}

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

.product section { margin: 0; }

/* Hero — NOTE: the old `.product-hero` flex rule was removed here. It collided
   with the migrated grid hero in product.css (later cascade = it won, forcing the
   hero into a single column). The rest of this legacy `.product-*` block (lines
   ~818-918: product-title/feature/pairs/trust/page-buy/products-card etc.) is
   dead code (0 usages in src) and should be deleted wholesale in a cleanup pass. */
.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 */
/* Static brand lockup — no hover/focus filter or outline (per design). */
.crt-brand-lockup-link {
  display: flex;
  align-items: center;
  margin: 0;
  line-height: 0;
  border-radius: 6px;
  transform: translateY(5px);
}

.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 — the desktop folder windows and loose shortcuts don't carry to a
     phone. The terminal (plus Mallan) IS the mobile home page; nav lives in
     the terminal links and the Start menu. */
  .xp-desktop:not(.xp-desktop--app) .xp-desktop-windows,
  .xp-desktop:not(.xp-desktop--app) .xp-desktop-shortcuts,
  .xp-desktop:not(.xp-desktop--app) .xp-assistant {
    display: none !important;
  }

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

  /* Terminal goes in-flow: full width, filling the desktop down to the
     taskbar. Mallan keeps the bottom-right corner. */
  .xp-desktop:not(.xp-desktop--app) .xp-terminal-aside {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    width: auto;
    flex: 1;
    min-height: 0;
    align-self: stretch;
    align-items: stretch;
    margin: 12px;
  }

  .xp-desktop:not(.xp-desktop--app) .xp-console-screen {
    overflow-y: auto;
    font-size: clamp(11.5px, 3.2vw, 13px);
  }

  .xp-desktop:not(.xp-desktop--app) .xp-terminal-aside {
    --xp-terminal-bot-width: clamp(84px, 24vw, 110px);
  }

  .xp-desktop:not(.xp-desktop--app) .xp-terminal-bot {
    align-self: flex-end;
  }
}

/*
 * 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; }
}

/*
 * Large short/wide desktops (>1440px on a landscape window, e.g. 1920x1080,
 * 2560x1440, ultrawides). On these the binding constraint is HEIGHT: a 4:3-ish
 * tube plus the full lush bezel left only a short, cramped content viewport
 * (~31% of the height was chrome). Slim the vertical AND side bezels evenly so
 * the screen reclaims the height (and a little width). Unlike the 1001-1440
 * block we keep the mug/stickies and the base width cap — there's room for them
 * here. Gated at aspect-ratio >= 1/1 so only genuinely tall/portrait windows
 * keep the chunky CRT; wide-but-not-quite-3:2 windows (e.g. 1607x1283 ≈ 1.25)
 * used to fall through BOTH slim blocks and revert to the 56px base bezel,
 * which read as "thicker sides on a narrower window". 1/1 closes that dead zone.
 */
@media (min-width: 1441px) and (min-aspect-ratio: 1/1) {
  body.crt-desktop { --crt-batting: 14px; }

  .crt-monitor-shell {
    --crt-monitor-chrome-inset: 18px;
    --crt-shell-pad-block-end: 8px;
  }

  /* Rail kept tall enough for the nameplate, with top padding so the plate
     sits lower and clears the chassis top edge (slimmer lockup to match). */
  .crt-shell-brand-rail {
    height: 54px;
    box-sizing: border-box;
  }
  .crt-brand-lockup { height: 43px; }

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

  .crt-monitor-mask {
    padding: 22px 26px;
    /* Reduced chamfer to match the slimmer bezel (mirrors the 1001-1440 block). */
    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 14px; }

  /* Slim the monitor foot (neck + plinth) so the stand stops eating height. */
  .crt-monitor-stand-neck { height: 22px; }
  .crt-monitor-stand-plinth { height: 42px; }

  .desk-surface { height: 22px; }

  /* Center the folder windows vertically so they sit across from the welcome
     panel as a balanced band, instead of jamming top-left and leaving a dead
     top-right corner. Empty wallpaper becomes an even top/bottom margin. */
  .xp-desktop:not(.xp-desktop--app) .xp-desktop-windows {
    justify-content: center;
  }
}

/*
 * Large PORTRAIT / square windows (>=1441px wide but taller than wide, e.g. a
 * rotated monitor). These match neither slim block above (the 1001-1440 block
 * caps at 1440px; the block just above is gated to landscape), so they used to
 * fall through to the chunky 56px base bezel and read as thick edges. We never
 * want thick edges on any viewport, so apply the same slim bezel here.
 */
@media (min-width: 1441px) and (max-aspect-ratio: 1/1) {
  .crt-monitor-shell {
    --crt-pad-inline: 14px;
    --crt-monitor-chrome-inset: 14px;
    --crt-shell-pad-block-end: 10px;
  }

  .crt-monitor-mask {
    padding: 22px;
    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; }
}

/*
 * 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%); }
}

/* Stratosphere wallpaper variant — high-altitude "above the weather". Toggle by
   adding/removing `xp-desktop--strato` on the desktop section in Home.vue. */
.xp-desktop--strato {
  background: linear-gradient(180deg, #02040e 0%, #050b22 42%, #0a2048 66%, #143666 84%, #1e4d86 100%);
}
/* the planet's curve rising from the bottom; twilight atmosphere along the limb */
.xp-desktop--strato .xp-wall-layer--earth {
  top: auto;
  left: -40%;
  right: -40%;
  bottom: -56%;
  width: 180%;
  height: 85%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%,
    #04040c 0%, #07060f 50%, #18100b 60%, #3c1c10 67%, #6e3018 72%,
    #a3471c 76%, #cf6624 80%, #ec8c38 84%, #f8b96a 88%, #ffe6b8 92%,
    #f2efe6 95%, #d6e6ff 97.5%, rgba(160,205,255,0.22) 99%, transparent 100%);
  filter: blur(4px);
  box-shadow: 0 0 90px 26px rgba(230,150,70,0.26);
}
/* cloud-1 + XP hills don't belong in the edge-of-space view */
.xp-desktop--strato .xp-wall-layer--cloud-1,
.xp-desktop--strato .xp-wall-layer--hill-back,
.xp-desktop--strato .xp-wall-layer--hill-front { display: none; }

/* stars on two drifting-free layers that gently twinkle out of phase */
.xp-desktop--strato .xp-wall-layer--cloud-2,
.xp-desktop--strato .xp-wall-layer--cloud-3 {
  inset: 0; top: 0; left: 0; width: 100%; height: 100%;
  border-radius: 0; filter: none; opacity: 1;
}
.xp-desktop--strato .xp-wall-layer--cloud-2 {
  background:
    radial-gradient(2.6px 2.6px at 18% 14%, #fff, transparent 50%),
    radial-gradient(2.6px 2.6px at 70% 22%, #fff, transparent 50%),
    radial-gradient(2px 2px at 10% 7%, #fff, transparent 55%),
    radial-gradient(1.8px 1.8px at 38% 11%, rgba(255,255,255,.9), transparent 55%),
    radial-gradient(2px 2px at 60% 9%, #fff, transparent 55%),
    radial-gradient(1.8px 1.8px at 88% 13%, rgba(255,255,255,.9), transparent 55%),
    radial-gradient(1px 1px at 24% 18%, rgba(255,255,255,.8), transparent 55%),
    radial-gradient(1px 1px at 50% 16%, rgba(255,255,255,.8), transparent 55%),
    radial-gradient(1px 1px at 80% 20%, rgba(255,255,255,.75), transparent 55%),
    radial-gradient(1px 1px at 6% 27%, rgba(255,255,255,.75), transparent 55%),
    radial-gradient(1px 1px at 34% 25%, rgba(255,255,255,.7), transparent 55%),
    radial-gradient(1.8px 1.8px at 64% 29%, rgba(255,255,255,.85), transparent 55%),
    radial-gradient(1px 1px at 92% 31%, rgba(255,255,255,.7), transparent 55%),
    radial-gradient(1px 1px at 16% 35%, rgba(255,255,255,.7), transparent 55%),
    radial-gradient(1px 1px at 46% 33%, rgba(255,255,255,.65), transparent 55%),
    radial-gradient(1px 1px at 74% 38%, rgba(255,255,255,.7), transparent 55%),
    radial-gradient(1px 1px at 28% 43%, rgba(255,255,255,.65), transparent 55%),
    radial-gradient(1px 1px at 56% 45%, rgba(255,255,255,.6), transparent 55%),
    radial-gradient(1px 1px at 84% 47%, rgba(255,255,255,.6), transparent 55%),
    radial-gradient(1px 1px at 12% 50%, rgba(255,255,255,.6), transparent 55%),
    radial-gradient(1px 1px at 40% 53%, rgba(255,255,255,.55), transparent 55%),
    radial-gradient(1px 1px at 68% 51%, rgba(255,255,255,.55), transparent 55%),
    radial-gradient(1.8px 1.8px at 50% 58%, rgba(255,255,255,.7), transparent 55%),
    radial-gradient(1px 1px at 22% 56%, rgba(255,255,255,.55), transparent 55%),
    radial-gradient(1px 1px at 78% 56%, rgba(255,255,255,.5), transparent 55%),
    radial-gradient(1px 1px at 8% 61%, rgba(255,255,255,.5), transparent 55%),
    radial-gradient(1px 1px at 36% 63%, rgba(255,255,255,.5), transparent 55%),
    radial-gradient(1px 1px at 64% 60%, rgba(255,255,255,.5), transparent 55%),
    radial-gradient(2px 2px at 90% 62%, #fff, transparent 50%),
    radial-gradient(1px 1px at 16% 19%, rgba(255,255,255,.6), transparent 55%),
    radial-gradient(1px 1px at 58% 23%, rgba(255,255,255,.6), transparent 55%),
    radial-gradient(1px 1px at 86% 41%, rgba(255,255,255,.6), transparent 55%);
  animation: xpStarTwinkleA 4.6s ease-in-out infinite;
}
.xp-desktop--strato .xp-wall-layer--cloud-3 {
  background:
    radial-gradient(2.6px 2.6px at 44% 16%, #fff, transparent 50%),
    radial-gradient(2.6px 2.6px at 90% 36%, #fff, transparent 50%),
    radial-gradient(2px 2px at 30% 8%, #fff, transparent 55%),
    radial-gradient(1.8px 1.8px at 54% 12%, rgba(255,255,255,.9), transparent 55%),
    radial-gradient(2px 2px at 78% 10%, #fff, transparent 55%),
    radial-gradient(1.8px 1.8px at 4% 16%, rgba(255,255,255,.85), transparent 55%),
    radial-gradient(1px 1px at 20% 21%, rgba(255,255,255,.8), transparent 55%),
    radial-gradient(1px 1px at 42% 19%, rgba(255,255,255,.8), transparent 55%),
    radial-gradient(1px 1px at 66% 17%, rgba(255,255,255,.75), transparent 55%),
    radial-gradient(1px 1px at 96% 22%, rgba(255,255,255,.75), transparent 55%),
    radial-gradient(1.8px 1.8px at 14% 28%, rgba(255,255,255,.85), transparent 55%),
    radial-gradient(1px 1px at 40% 27%, rgba(255,255,255,.7), transparent 55%),
    radial-gradient(1px 1px at 72% 26%, rgba(255,255,255,.7), transparent 55%),
    radial-gradient(1px 1px at 8% 33%, rgba(255,255,255,.7), transparent 55%),
    radial-gradient(1px 1px at 52% 36%, rgba(255,255,255,.65), transparent 55%),
    radial-gradient(1px 1px at 82% 32%, rgba(255,255,255,.7), transparent 55%),
    radial-gradient(1px 1px at 24% 40%, rgba(255,255,255,.65), transparent 55%),
    radial-gradient(1px 1px at 60% 42%, rgba(255,255,255,.6), transparent 55%),
    radial-gradient(1px 1px at 94% 46%, rgba(255,255,255,.6), transparent 55%),
    radial-gradient(1px 1px at 36% 49%, rgba(255,255,255,.6), transparent 55%),
    radial-gradient(1px 1px at 6% 47%, rgba(255,255,255,.55), transparent 55%),
    radial-gradient(1px 1px at 76% 52%, rgba(255,255,255,.55), transparent 55%),
    radial-gradient(1.8px 1.8px at 68% 57%, rgba(255,255,255,.65), transparent 55%),
    radial-gradient(1px 1px at 12% 57%, rgba(255,255,255,.55), transparent 55%),
    radial-gradient(1px 1px at 40% 59%, rgba(255,255,255,.5), transparent 55%),
    radial-gradient(1px 1px at 96% 60%, rgba(255,255,255,.5), transparent 55%),
    radial-gradient(1px 1px at 26% 64%, rgba(255,255,255,.48), transparent 55%),
    radial-gradient(1px 1px at 54% 65%, rgba(255,255,255,.48), transparent 55%),
    radial-gradient(1px 1px at 82% 63%, rgba(255,255,255,.5), transparent 55%),
    radial-gradient(2px 2px at 4% 55%, #fff, transparent 50%),
    radial-gradient(1px 1px at 30% 39%, rgba(255,255,255,.6), transparent 55%),
    radial-gradient(1px 1px at 88% 50%, rgba(255,255,255,.55), transparent 55%);
  animation: xpStarTwinkleB 6.2s ease-in-out infinite;
  animation-delay: -2.4s;
}
@keyframes xpStarTwinkleA { 0%, 100% { opacity: 1; } 50% { opacity: 0.62; } }
@keyframes xpStarTwinkleB { 0%, 100% { opacity: 0.92; } 45% { opacity: 0.58; } }

@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;
  /* Tighter on short screens — the loose shortcuts now live at the bottom of
     this column, so the stack is one row taller than it used to be. */
  gap: clamp(22px, 3.8vh, 42px);
  padding: clamp(14px, 2vw, 22px);
}

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

.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 {
  /* In-flow at the foot of the left rail, directly below the folder windows
     (mobile hides them). 3-up grid: a 4th/5th icon wraps to a second row under
     the first, so Ideas + docs.txt sit below Membership. Array order in
     homeDesktop.ts controls placement. */
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 96px);
  justify-content: start;
  align-items: start;
  gap: 18px 16px;
  padding-left: 4px;
  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: 20px 18px 18px;
  background: #ffffff;
  border-top: 1px solid #808080;
}

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

.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;
  /* Robot ~30% larger than the original clamp(84px, 13vw, 108px). */
  --xp-assistant-bot-width: clamp(108px, 16.5vw, 140px);
}

/* Desktop: pin the welcome section to the top of the screen (robot stays inline
   below the bubble). Mobile keeps its own flat layout. */
@media (min-width: 1001px) {
  .xp-assistant {
    top: clamp(14px, 3vh, 28px);
    bottom: auto;
  }
  /* Shift the robot right, toward the screen edge it "emerges" from.
     .xp-desktop raises specificity above the later base .xp-assistant-bot rule. */
  .xp-desktop .xp-assistant-bot {
    transform: translateX(calc(var(--xp-assistant-bot-width) / 2 - var(--xp-assistant-tail-center) + 20px));
  }
}

.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;
  }
}

/* —— Home terminal (welcome.exe) — the right-side hero on the home desktop.
      Replaces the welcome speech bubble; Mallan stays, peeking below it. —— */
.xp-terminal-aside {
  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: 6px;
  width: min(540px, 46vw);
  pointer-events: none;
  --xp-terminal-bot-width: clamp(96px, 14vw, 124px);
}

/* Desktop: anchored top-right, sized to the console's content (not full height).
   Width is dynamic: left edge lands just right of the folder rail and the window
   claims the wallpaper to the right screen edge; Mallan sits just below it. */
@media (min-width: 1001px) {
  .xp-terminal-aside {
    top: clamp(14px, 3vh, 28px);
    bottom: auto;
    left: clamp(372px, calc(30vw + 20px), 450px);
    width: auto;
  }

  .xp-console { flex: 0 0 auto; }

  /* Slightly larger type on big monitors so the wider console keeps its
     proportions. The compact block below pulls this back down to 12px. */
  .xp-console-screen {
    flex: 0 0 auto;
    font-size: clamp(13px, 0.78vw, 15px);
  }
}

.xp-console {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #c0c0c0;
  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);
  pointer-events: auto;
}

.xp-console-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;
  font-family: Tahoma, "Segoe UI", Verdana, system-ui, sans-serif;
}

.xp-console-titlebar-icon {
  flex: none;
  width: 16px;
  height: 16px;
}

.xp-console-titlebar-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 700;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
}

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

.xp-console-screen {
  position: relative;
  flex: 1;
  margin: 2px;
  padding: 12px 14px;
  background: #0a0a0a;
  font-family: var(--font-screen), ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.6;
  color: #3ce36b;
  overflow: hidden;
}

/* Faint CRT scanlines over the console glass. */
.xp-console-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px);
}

.xp-console-line {
  margin: 0;
  min-height: 1.6em;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.xp-console-line--sys {
  color: #9aa0a6;
}

.xp-console-line--cmd {
  color: #ffffff;
}

.xp-console-prompt {
  color: #3ce36b;
}

.xp-console-hot {
  color: #ffb000;
  font-weight: 700;
}

.xp-console-link {
  color: #7ad7ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.xp-console-link:hover {
  background: #7ad7ff;
  color: #0a0a0a;
}

.xp-console-link:focus-visible {
  outline: 1px dotted #ffffff;
  outline-offset: 1px;
}

.xp-console-cursor {
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 1px;
  background: #3ce36b;
  vertical-align: text-bottom;
  animation: xpConsoleBlink 1s steps(1) infinite;
}

@keyframes xpConsoleBlink {
  50% { opacity: 0; }
}

.xp-terminal-bot {
  display: block;
  width: var(--xp-terminal-bot-width);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.38));
  pointer-events: none;
  /* The artwork peeks around the right screen edge (arm gripping the bezel).
     Shift it half its width right so the body hugs the edge and the overhang
     clips at the desktop boundary — same trick the old welcome panel used. */
  transform: translateX(calc(var(--xp-terminal-bot-width) / 2 - 15px));
}

/* Compact desktop (small laptops / short windows): shave the console so the
   full script plus Mallan still fits the shorter inner viewport. */
@media (min-width: 1001px) and (max-width: 1440px),
       (min-width: 1001px) and (max-height: 820px) {
  .xp-console-screen {
    font-size: 12px;
    padding: 10px 12px;
  }

  .xp-terminal-aside {
    --xp-terminal-bot-width: clamp(80px, 11vw, 100px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .xp-console-cursor {
    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;
}

/* Stratotank 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; }
}