/* ─────────────────────────────────────────────────────────────────
   Moltsets × RB2B — split-screen landing page
   ───────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "SF Mono";
  src: url("./fonts/SF-Mono-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: "SF Mono";
  src: url("./fonts/SF-Mono-Medium.otf") format("opentype");
  font-weight: 500;
  font-display: block;
}
@font-face {
  font-family: "SF Mono";
  src: url("./fonts/SF-Mono-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: block;
}
@font-face {
  font-family: "SF Mono";
  src: url("./fonts/SF-Mono-Heavy.otf") format("opentype");
  font-weight: 800;
  font-display: block;
}
@font-face {
  font-family: "Acumin Variable Concept";
  src: url("./fonts/AcuminVariableConcept.otf") format("opentype-variations"),
       url("./fonts/AcuminVariableConcept.otf") format("opentype");
  font-weight: 100 900;
  font-stretch: 50% 200%;
  font-display: block;
}

:root {
  /* Palette — RB2B side */
  --rb2b-green: rgb(82, 255, 0);
  --rb2b-green-dim: rgb(58, 180, 0);
  --rb2b-panel: rgb(13, 19, 23);

  /* Palette — moltsets side */
  --mol-orange: rgb(244, 128, 93);
  --mol-orange-dim: rgb(206, 95, 60);
  --mol-panel: rgb(10, 11, 14);
  --mol-panel-elev: rgb(30, 30, 30);
  --mol-green: rgb(52, 211, 153);

  /* Shared */
  --ink: rgb(10, 11, 14);
  --paper: #ffffff;

  /* Split ratio (controlled by hover + tweaks) */
  --split: 50%;
  --split-other: 50%;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
  --split-transition: 900ms var(--ease-out-expo);

  /* Pattern intensity */
  --pattern: 0.06;

  /* Diagonal split angle (0 = vertical) */
  --diag: 0deg;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: var(--ink);
  font-family: "SF Mono", ui-monospace, "JetBrains Mono", "Menlo", monospace;
  -webkit-font-smoothing: antialiased;
}

img { display: block; }

/* ───────────────────────────────────────── STAGE ───────── */

.stage {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: var(--split) 1fr;
  transition:
    grid-template-columns var(--split-transition);
  overflow: hidden;
}

.stage.diagonal {
  grid-template-columns: 1fr;
}

.side {
  position: relative;
  overflow: hidden;
  cursor: default;
  isolation: isolate;
  transition: filter 700ms var(--ease-out-expo);
}

.side.dim { filter: brightness(0.72) saturate(0.8); }

/* Pre-load: hidden behind glitch */
.stage.booting .side { pointer-events: none; }

/* ──────── Side backgrounds ─────────── */
.side.rb2b { background: var(--rb2b-green); }
.side.mol  { background: var(--mol-orange); }

/* Subtle pixel/dot pattern in BG */
.side::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(0,0,0,calc(var(--pattern) * 1)) 1px, transparent 1px);
  background-size: 6px 6px;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
}

.side.mol::before {
  background-image:
    radial-gradient(rgba(0,0,0,calc(var(--pattern) * 1.4)) 1px, transparent 1px);
}

/* Diagonal split: rb2b is full-bleed below, mol is clipped on top */
.stage.diagonal .side.rb2b {
  grid-column: 1;
  grid-row: 1;
}
.stage.diagonal .side.mol {
  grid-column: 1;
  grid-row: 1;
  clip-path: polygon(var(--diag-x1, 100%) 0, 100% 0, 100% 100%, var(--diag-x2, 25%) 100%);
}

/* ──────── Inner layout — each side ─────────── */

.frame {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%;
  padding: clamp(20px, 3.2vw, 56px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(16px, 2vw, 28px);
  min-height: 0;
}

/* Top header strip (small label) */
.frame .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.78;
  color: var(--ink);
}
.frame .meta .dot {
  display: inline-block; width: 8px; height: 8px; background: currentColor; margin-right: 8px;
  animation: blink 1s steps(1) infinite;
}

/* Black panel (pixel-art canvas) — interactive hover target */
.panel {
  position: relative;
  width: 100%;
  align-self: stretch;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  cursor: pointer;
}

.panel-bg {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* RB2B panel */
.side.rb2b .panel-bg { background: var(--rb2b-panel); }
/* moltsets panel */
.side.mol  .panel-bg { background: var(--mol-panel); }

/* Body copy + CTA row at bottom of each side */
.copy {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 22px);
  max-width: 36ch;
}
.copy p {
  margin: 0;
  font-family: "SF Mono", monospace;
  font-weight: 500;
  font-size: clamp(15px, 1.15vw, 19px);
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty;
}

/* CTA button — white slab */
.cta {
  align-self: flex-start;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--paper);
  color: var(--ink);
  font: 700 clamp(15px, 1.1vw, 19px)/1 "SF Mono", monospace;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  user-select: none;
  transition:
    transform 240ms var(--ease-out-expo),
    background 200ms,
    font-size 320ms var(--ease-out-expo),
    padding 320ms var(--ease-out-expo);
  white-space: nowrap;
}
.cta::after {
  content: ">>";
  font-weight: 700;
  transition: transform 320ms var(--ease-out-expo);
}
.cta:hover::after { transform: translateX(6px); }
.cta:hover        { background: #f4f4f0; }
.cta:active       { background: #e6e6e0; }

/* The CTA wiggles when the side is focused */
.side.focused .cta { animation: cta-pulse 1.2s ease-in-out infinite; }

/* Bump CTA size when its side is hovered/focused */
.side.focused .panel-cta {
  font-size: clamp(18px, 1.55vw, 26px);
  padding: 18px 22px;
  gap: 18px;
}

/* CTA pinned to the bottom-left of each black panel, sized to content. */
.panel .panel-cta {
  position: absolute;
  z-index: 4;
  left: 6%;
  bottom: 6%;
  align-self: auto;
  transition:
    opacity 320ms var(--ease-out-expo),
    transform 320ms var(--ease-out-expo),
    background 200ms;
}

/* Hide the CTA on the collapsed/dimmed side while the other is hovered. */
.side.dim .panel .panel-cta {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

@keyframes cta-pulse {
  0%, 100% { transform: translateY(0); box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  50%      { transform: translateY(-2px); box-shadow: 4px 4px 0 0 currentColor; }
}

/* ──────────────────────────────────────────────────────────
   RB2B PANEL — pixel sunglasses, projection lines, badges
   ────────────────────────────────────────────────────────── */

.rb2b-wordmark {
  position: absolute;
  top: 8%;
  left: 6%;
  width: 30.4%;
  max-width: 208px;
  height: auto;
  color: #fff;
  transition: width 600ms var(--ease-out-expo);
}
.side.rb2b.focused .rb2b-wordmark {
  width: 38.4%;
  max-width: 288px;
}
.rb2b-wordmark img {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: pixelated;
}
.rb2b-wordmark svg { width: 100%; height: auto; display: block; }

/* Pixel noise on corners of black panel */
.rb2b-noise-tr, .rb2b-noise-bl {
  position: absolute;
  pointer-events: none;
}
.rb2b-noise-tr { top: 0; right: 0; width: 26%; aspect-ratio: 1; }
.rb2b-noise-bl { bottom: 0; left: 0; width: 14%; aspect-ratio: 1; }

/* Projection (light cone) from sunglasses to the badges */
.rb2b-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.rb2b-scene svg { width: 100%; height: 100%; display: block; }

/* Sunglasses block — square container that masks the light cone behind it */
.rb2b-sun {
  position: absolute;
  left: 12%;
  top: 36%;
  width: 22%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  transform-origin: center;
  transition: transform 600ms var(--ease-out-expo);
  background: var(--rb2b-panel);
  border: 2px solid var(--rb2b-green);
  z-index: 2;   /* sit above .rb2b-scene so the cone is hidden behind */
}
.rb2b-sun img {
  width: 100%;
  height: auto;
  max-width: 100%;
  image-rendering: pixelated;
  display: block;
}
.side.rb2b.focused .rb2b-sun { animation: sunglasses-bob 2.4s ease-in-out infinite; }

@keyframes sunglasses-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* Badges stack on RB2B panel */
.rb2b-badges {
  position: absolute;
  right: 6%;
  top: 45%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  max-width: 56%;
}
.rb2b-badges .b {
  background: var(--paper);
  color: var(--ink);
  padding: 6px 8px 5px 8px;
  font-family: "Acumin Variable Concept", "Silkscreen", "SF Mono", monospace;
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 28px);
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  transform-origin: right center;
  transition:
    font-size 600ms var(--ease-out-expo),
    transform 600ms var(--ease-out-expo),
    padding 600ms var(--ease-out-expo);
}
.side.rb2b.focused .rb2b-badges .b {
  font-size: clamp(24px, 2.5vw, 40px);
  padding: 8px 12px 7px 12px;
}

/* Side ticks (decorative pixel bars on left edge of panel) */
.rb2b-ticks {
  position: absolute;
  left: 0;
  top: 56%;
  width: 6%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  pointer-events: none;
}
.rb2b-ticks span {
  display: block;
  height: 10px;
  background: var(--rb2b-green);
}

/* Ticks animate in */
.stage.ready .rb2b-ticks span { opacity: 1; transform: translateY(0); }

/* ──────────────────────────────────────────────────────────
   MOLTSETS PANEL — terminal mockup, mascot, wordmark
   ────────────────────────────────────────────────────────── */

.mol-wordmark {
  position: absolute;
  top: 7%;
  left: 6%;
  width: 38%;
  max-width: 280px;
  height: auto;
  transition: width 600ms var(--ease-out-expo);
}
.side.mol.focused .mol-wordmark {
  width: 48%;
  max-width: 380px;
}
.mol-wordmark img { width: 100%; height: auto; image-rendering: pixelated; }

/* Decorative pixel noise around terminal */
.mol-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Terminal app-box */
.mol-app {
  position: absolute;
  left: 12%;
  right: 4%;
  top: 30%;
  bottom: 26%;
  background: var(--mol-panel-elev);
  border: 1px dashed var(--mol-orange);
  padding: 8px;
  display: flex;
  flex-direction: column;
  z-index: 2;
  /* Container query context — all inner sizing is keyed off the app-box width,
     so content always fits regardless of side hover/collapse state. */
  container-type: inline-size;
  container-name: molapp;
}

/* corner ticks on app-box */
.mol-app .corner {
  position: absolute;
  width: 7px;
  height: 7px;
  background: var(--mol-orange);
}
.mol-app .corner.tl { top: -1px; left: -1px; clip-path: polygon(0 0, 100% 0, 100% 25%, 25% 25%, 25% 100%, 0 100%); }
.mol-app .corner.tr { top: -1px; right: -1px; clip-path: polygon(0 0, 100% 0, 100% 100%, 75% 100%, 75% 25%, 0 25%); }
.mol-app .corner.bl { bottom: -1px; left: -1px; clip-path: polygon(0 0, 25% 0, 25% 75%, 100% 75%, 100% 100%, 0 100%); }
.mol-app .corner.br { bottom: -1px; right: -1px; clip-path: polygon(75% 0, 100% 0, 100% 100%, 0 100%, 0 75%, 75% 75%); }

.mol-app .traffic {
  display: flex;
  gap: 6px;
  padding: 4px 6px 8px;
  border-bottom: 1px solid var(--mol-orange);
  border-color: rgba(244,128,93,0.6);
}
.mol-app .traffic span {
  width: 8px; height: 8px; border-radius: 999px;
}
.mol-app .traffic .r { background: rgb(248, 113, 113); }
.mol-app .traffic .y { background: rgb(253, 224, 71); }
.mol-app .traffic .g { background: rgb(52, 211, 153); }

/* Inline wordmark inside the terminal traffic bar — mobile only */
.mol-wordmark-inline {
  display: none;
  margin-left: auto;
  align-items: center;
}
.mol-wordmark-inline img {
  height: 11px;
  width: auto;
  image-rendering: pixelated;
  display: block;
}

.mol-app .body {
  flex: 1;
  padding: 4cqw 4cqw 2cqw;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3.5cqw;
  min-height: 0;
  overflow: hidden;
}
.mol-app .body .mol-text {
  display: flex;
  flex-direction: column;
  gap: 1.5cqw;
  min-width: 0;
  flex: 1;
}
.mol-app .body .h {
  font: 700 clamp(13px, 5cqw, 32px)/1.2 "SF Mono", monospace;
  color: #f1f5f9;
  text-wrap: balance;
  transition: font-size 600ms var(--ease-out-expo);
}
.mol-app .body .sub {
  font: 400 clamp(10px, 3cqw, 20px)/1.4 "SF Mono", monospace;
  color: rgb(203, 213, 225);
  transition: font-size 600ms var(--ease-out-expo);
}
.mol-app .prompt {
  display: flex;
  align-items: center;
  gap: 2cqw;
  padding: 2.5cqw 3cqw;
  border-top: 1px dashed rgba(244,128,93,0.6);
  font: 700 clamp(11px, 3.6cqw, 22px)/1 "SF Mono", monospace;
  color: var(--mol-orange);
  transition: font-size 600ms var(--ease-out-expo), padding 600ms var(--ease-out-expo);
}
.mol-app .caret {
  display: inline-block;
  width: clamp(7px, 2.4cqw, 14px);
  height: clamp(12px, 4cqw, 22px);
  background: var(--mol-orange);
  animation: blink 1s steps(1) infinite;
}

.side.mol.focused .mol-app .caret { animation-duration: 0.4s; }

/* Bottom dashed border strip on app-box */
.mol-app .strip {
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -10px;
  height: 7px;
  border: 1px dashed var(--mol-orange);
  border-top: 0;
}

/* Pixel mascot — sits to the LEFT of the headline inside the terminal body,
   matching the home-hero layout in the moltsets console UI kit. */
.mol-mascot {
  flex: 0 0 auto;
  width: clamp(44px, 22cqw, 130px);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  pointer-events: none;
}
.mol-mascot img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  object-fit: contain;
}
.side.mol.focused .mol-mascot { animation: mascot-bob 1.6s ease-in-out infinite; }
@keyframes mascot-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* Stack mascot above text when the moltsets side is dimmed/narrow */
.side.mol.dim .mol-app .body {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.side.mol.dim .mol-mascot {
  width: clamp(48px, 18%, 80px);
}

/* ──────────────────────────────────────────────────────────
   GLITCH / RGB-SPLIT LOAD ANIMATION
   ────────────────────────────────────────────────────────── */

/* Boot glitch — overlay-based; doesn't hide content */
.stage.booting::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,0,80,0.25) 30%, transparent 60%),
    linear-gradient(90deg, transparent 40%, rgba(0,200,255,0.25) 70%, transparent 100%);
  mix-blend-mode: screen;
  animation: chroma-sweep 1300ms steps(8, end) forwards;
}

.stage.booting .side {
  animation: side-glitch 1500ms steps(8, end) forwards;
}
.stage.booting .side.rb2b { animation-delay: 0ms; }
.stage.booting .side.mol  { animation-delay: 80ms; }

@keyframes side-glitch {
  0%   { filter: hue-rotate(40deg) contrast(1.4) saturate(2)
           drop-shadow(-10px 0 rgba(255,0,80,0.9))
           drop-shadow(10px 0 rgba(0,200,255,0.9)); }
  15%  { filter: hue-rotate(-30deg) contrast(1.5) saturate(2.4)
           drop-shadow(-14px 0 rgba(255,0,80,0.95))
           drop-shadow(14px 0 rgba(0,200,255,0.95)); }
  30%  { filter: hue-rotate(20deg) contrast(1.3)
           drop-shadow(8px 0 rgba(255,0,80,0.8))
           drop-shadow(-8px 0 rgba(0,200,255,0.8)); }
  45%  { filter: hue-rotate(-15deg) contrast(1.15)
           drop-shadow(-4px 0 rgba(255,0,80,0.6))
           drop-shadow(4px 0 rgba(0,200,255,0.6)); }
  70%  { filter: none; }
  100% { filter: none; }
}

@keyframes chroma-sweep {
  0%   { opacity: 1; transform: translateX(-30%); }
  100% { opacity: 0; transform: translateX(60%); }
}

/* Scanline overlay during boot */
.boot-scan {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0.4) 3px,
      rgba(0,0,0,0.4) 4px
    );
  mix-blend-mode: multiply;
  animation: scan-wipe 1300ms var(--ease-in-out-quint) forwards;
}
.stage:not(.booting) ~ .boot-scan,
.stage:not(.booting) + .boot-scan { display: none; }

@keyframes scan-wipe {
  0%   { clip-path: inset(0 0 0 0); opacity: 1; }
  60%  { clip-path: inset(0 0 0 0); opacity: 0.6; }
  100% { clip-path: inset(100% 0 0 0); opacity: 0; }
}

/* Boot vignette flash */
.boot-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  background: #fff;
  animation: flash 320ms steps(3, end) forwards;
}
@keyframes flash {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* Pre-boot: content fades in via transition controlled by .ready class.
   Content is visible by default (no opacity:0) so it shows even when
   transitions are paused by background tabs; glitch is purely overlay. */

/* Ticks animate in */
.rb2b-ticks span {
  opacity: 1;
  transform: translateY(0);
}

/* Tweaks toggle removes the boot animation when "Replay" hits */
.replay-tag {
  animation-fill-mode: none !important;
}

/* ──────────────────────────────────────────────────────────
   Misc
   ────────────────────────────────────────────────────────── */

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Brand-bar (very small text at corners) — horizontal inset matches the
   .frame padding so it aligns with panels/copy above. Vertical stays small
   so it sits below the copy inside the frame's bottom padding. */
.corner-tag {
  position: absolute;
  bottom: 16px;
  font: 700 11px/1 "SF Mono", monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.7;
  display: flex;
  gap: 6px;
  align-items: center;
  z-index: 3;
}
.side.rb2b .corner-tag.left  { left: clamp(20px, 3.2vw, 56px); }
.side.mol  .corner-tag.right { right: clamp(20px, 3.2vw, 56px); }
.side.mol  .corner-tag.left  { left: clamp(20px, 3.2vw, 56px); }
.corner-tag a { color: inherit; text-decoration: none; }
.corner-tag a:hover { opacity: 1; }
.corner-tag .pix {
  width: 9px; height: 9px; background: currentColor; display: inline-block;
}

/* ──────────────────────────────────────────────────────────
   MOBILE — stack vertically
   ────────────────────────────────────────────────────────── */

@media (max-width: 800px) {
  .stage {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr 1fr;
    transition: none;
  }
  .stage.diagonal .side.mol { clip-path: none; }
  .side.dim { filter: none; }
  .side { cursor: default; }
  .frame { padding: 16px; }
  .rb2b-wordmark { max-width: 144px; }
  .mol-wordmark { max-width: 180px; }
  .copy { max-width: none; }

  /* Stack mascot above text on mobile too */
  .mol-app .body {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  .mol-mascot {
    width: clamp(40px, 14vw, 64px);
  }

  /* Mobile type refinements */
  .frame .meta     { font-size: 10px; }
  .corner-tag      { font-size: 10px; }
  .mol-app .prompt { font-size: clamp(10px, 3.6cqw, 22px); }
  .copy p          { font-size: 12px; }

  /* Mobile spacing refinements */
  .rb2b-badges     { top: 30%; }
  .cta             { padding: 6px 8px; }

  /* Stack the top meta strip on mobile (label + status on separate rows) */
  .frame .meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  /* Both corner tags align to the LEFT on mobile and sit flush to the bottom-left,
     with extra space reserved on .copy so they don't overlap the text. */
  .corner-tag,
  .side.rb2b .corner-tag.left,
  .side.mol  .corner-tag.right {
    left: 16px;
    right: auto;
    bottom: 8px;
  }
  .copy { padding-bottom: 22px; }

  /* Moltsets app-box on mobile: move the wordmark inside the traffic bar,
     hide the original (panel-level) wordmark, and hide the prompt row. */
  .side.mol .mol-wordmark         { display: none; }
  .mol-app .traffic               { align-items: center; padding: 6px 8px; }
  .mol-app .traffic .mol-wordmark-inline { display: flex; }
  .mol-app .prompt                { display: none; }

  /* App-box takes the full panel with 24px margins on top/left/right,
     and stops above the bottom CTA. */
  .mol-app {
    top: 16px;
    left: 16px;
    right: 16px;
    bottom: calc(6% + 23px);
    padding: 0px;
  }
  .mol-app .body { gap: 4px; }
  .mol-wordmark-inline { margin-left: 0; }
}

@media (max-height: 700px) and (min-width: 801px) {
  .frame { padding: 20px; gap: 16px; }
  .rb2b-wordmark { width: 24%; }
  .mol-wordmark { width: 30%; }
}

/* Footer bar across both sides */
.foot {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
  font: 700 10px/1 "SF Mono", monospace;
  color: #fff;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  pointer-events: none;
  mix-blend-mode: difference;
}
.foot span { opacity: 0.95; }

@media (max-width: 800px) {
  .foot { display: none; }
  .side.mol .corner-tag.left { left: auto; right: 16px; bottom: 8px; font-size: 9px; }
  .cookie-banner { padding: 12px 16px; gap: 12px; }
}

/* ──────────────────────────────────────────────────────────
   COOKIE BANNER
   ────────────────────────────────────────────────────────── */

.cookie-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-100%);
  z-index: 200;
  background: var(--mol-panel-elev);
  border-bottom: 1px dashed rgba(244, 128, 93, 0.7);
  padding: 4px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  font: 500 10px/1.5 "SF Mono", monospace;
  letter-spacing: 0.03em;
  color: rgb(203, 213, 225);
  opacity: 0;
  pointer-events: none;
  transition: opacity 380ms ease, transform 380ms var(--ease-out-expo);
}
.cookie-banner.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.cookie-banner p { margin: 0; flex: 1; }
.cookie-banner a { color: var(--mol-orange); text-decoration: none; }
.cookie-banner a:hover { text-decoration: underline; }

.cookie-dismiss {
  flex-shrink: 0;
  background: var(--paper);
  color: var(--ink);
  border: 0;
  font: 700 10px/1 "SF Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 6px;
  cursor: pointer;
  transition: background 180ms;
}
.cookie-dismiss:hover  { background: #f4f4f0; }
.cookie-dismiss:active { background: #e6e6e0; }