/* ==========================================================
   (re)Route — Website design system
   Matches the app: monospace throughout, hard shadows,
   zero border-radius, pixel art brutalism
   Palette: charcoal / coral / sage / mustard / cream
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  --charcoal: #1a1a1a;
  --coral: #d85a30;
  --sage: #7d8c6c;
  --mustard: #fbbf24;
  --cream: #f5f3ee;
  --pink: #c94070;
  --purple: #7b5ea7;
  --muted: #888;
  --soft: #e8e4dd;

  --border: 2px solid var(--charcoal);
  --shadow: 4px 4px 0 var(--charcoal);
  --shadow-sm: 2px 2px 0 var(--charcoal);

  --font-display: 'Silkscreen', monospace;
  --font-mono: 'Space Mono', 'SF Mono', 'Courier New', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

body {
  font-family: var(--font-mono);
  background: var(--cream);
  color: var(--charcoal);
  line-height: 1.6;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 32px;
}

/* ---------- Layout ---------- */

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 32px 80px;
}

/* ---------- Header / Nav ---------- */

header.site-header {
  background: var(--charcoal);
  color: var(--cream);
  border-bottom: var(--border);
  padding: 10px 32px;
  position: sticky;
  top: 0;
  z-index: 100;
  scroll-snap-align: start;
}

.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.logo {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--cream);
  text-decoration: none;
}

.logo .paren { color: var(--coral); }

nav.site-nav {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
}

nav.site-nav a {
  font-family: var(--font-mono);
  color: var(--cream);
  text-decoration: none;
  padding: 5px 10px;
  border: 2px solid transparent;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
}

nav.site-nav a:hover {
  border-color: var(--coral);
  color: var(--coral);
  background: transparent;
}

nav.site-nav a.active {
  background: var(--coral);
  color: var(--cream);
  border-color: var(--coral);
}

/* ---------- Typography ---------- */

h1 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.2;
  margin-bottom: 12px;
}

h2 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-top: 48px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: var(--border);
}

h2:first-child { margin-top: 0; }

h3 {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  margin-top: 28px;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--coral);
}

h4 {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 8px;
}

p {
  margin-bottom: 14px;
  max-width: 75ch;
  font-size: 13px;
  line-height: 1.7;
}

.tagline {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 70ch;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--coral);
  font-weight: 700;
  margin-bottom: 8px;
  text-transform: uppercase;
}

/* ---------- Links ---------- */

a {
  color: var(--coral);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover {
  background: var(--mustard);
  color: var(--charcoal);
}

/* ---------- Code ---------- */

code {
  font-family: var(--font-mono);
  background: var(--charcoal);
  color: var(--cream);
  padding: 1px 6px;
  font-size: 11px;
}

pre {
  font-family: var(--font-mono);
  background: var(--charcoal);
  color: var(--cream);
  padding: 16px 20px;
  border: var(--border);
  box-shadow: var(--shadow);
  overflow-x: auto;
  margin: 16px 0 24px;
  font-size: 11px;
  line-height: 1.6;
}

pre code {
  background: transparent;
  padding: 0;
  font-size: 11px;
}

/* ---------- Tables ---------- */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 28px;
  background: var(--cream);
  border: var(--border);
  box-shadow: var(--shadow);
  font-size: 12px;
}

th {
  font-family: var(--font-mono);
  background: var(--charcoal);
  color: var(--cream);
  text-align: left;
  padding: 10px 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  font-size: 9px;
  border-right: 1px solid rgba(245,243,238,0.2);
}

th:last-child { border-right: none; }

td {
  padding: 10px 12px;
  border-top: 1px solid rgba(26, 26, 26, 0.12);
  vertical-align: top;
}

tr:hover td {
  background: rgba(216, 90, 48, 0.08);
}

td code {
  font-size: 10px;
  white-space: nowrap;
}

/* ---------- Lists ---------- */

ul, ol {
  margin-bottom: 16px;
  padding-left: 24px;
  max-width: 75ch;
  font-size: 13px;
  line-height: 1.7;
}

li { margin-bottom: 6px; }

ul li::marker { color: var(--coral); }

/* ---------- Cards ---------- */

.card {
  background: var(--cream);
  border: var(--border);
  box-shadow: var(--shadow);
  padding: 20px 24px;
  margin-bottom: 20px;
}

.card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 20px 0;
}

.card-sm {
  background: var(--cream);
  border: var(--border);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
}

.card-sm h4 {
  font-family: var(--font-mono);
  margin-top: 0;
  color: var(--coral);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 6px;
  font-weight: 700;
}

.card-sm .big {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 2px;
}

/* ---------- Colored tags ---------- */

.tag {
  display: inline-block;
  font-family: var(--font-mono);
  padding: 2px 8px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 2px solid var(--charcoal);
  background: var(--cream);
}

.tag-live { background: var(--pink); color: var(--cream); }
.tag-daily { background: var(--purple); color: var(--cream); }
.tag-foryou { background: var(--sage); color: var(--cream); }
.tag-library { background: var(--coral); color: var(--cream); }
.tag-method-get { background: var(--sage); color: var(--cream); }
.tag-method-post { background: var(--coral); color: var(--cream); }
.tag-method-put { background: var(--mustard); color: var(--charcoal); }

/* ---------- Callout ---------- */

.callout {
  background: var(--mustard);
  border: var(--border);
  box-shadow: var(--shadow);
  padding: 16px 20px;
  margin: 20px 0;
  font-size: 13px;
  line-height: 1.6;
}

.callout strong {
  font-family: var(--font-mono);
  display: block;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 9px;
  font-weight: 700;
}

.callout-dark {
  background: var(--charcoal);
  color: var(--cream);
}

.callout-dark strong {
  color: var(--coral);
  font-family: var(--font-display);
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0.5px;
  line-height: 1.4;
  margin-bottom: 12px;
}

/* ---------- Footer ---------- */

footer {
  margin-top: 80px;
  padding-top: 24px;
  border-top: var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--charcoal);
  opacity: 0.55;
  text-align: center;
  letter-spacing: 1px;
  line-height: 1.8;
}


/* ==========================================================
   ANIMATIONS
   ========================================================== */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-80px) rotate(-2deg); }
  to { opacity: 1; transform: translateX(0) rotate(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(80px) rotate(2deg); }
  to { opacity: 1; transform: translateX(0) rotate(0); }
}

.reveal {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
  transform: translateY(48px) scale(0.97);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.reveal-left {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
  transform: translateX(-60px) rotate(-1deg);
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0) rotate(0);
}

.reveal-right {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
  transform: translateX(60px) rotate(1deg);
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0) rotate(0);
}

/* Stagger children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(32px) scale(0.95);
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1);
}

.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0) scale(1); }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.1s; opacity: 1; transform: translateY(0) scale(1); }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.2s; opacity: 1; transform: translateY(0) scale(1); }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.3s; opacity: 1; transform: translateY(0) scale(1); }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.4s; opacity: 1; transform: translateY(0) scale(1); }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.5s; opacity: 1; transform: translateY(0) scale(1); }
.reveal-stagger.visible > *:nth-child(7) { transition-delay: 0.6s; opacity: 1; transform: translateY(0) scale(1); }

/* ==========================================================
   EDITORIAL PRODUCT PAGE
   ========================================================== */

/* ---------- Sections ---------- */

.ed-section {
  padding: 40px 32px;
  overflow: hidden;
  scroll-snap-align: start;
}

.ed-section-dark {
  background: var(--charcoal);
  color: var(--cream);
}

.ed-section-cream {
  background: var(--soft);
}

.ed-section-statement {
  padding: 48px 32px;
}

.ed-wrap {
  max-width: 1000px;
  margin: 0 auto;
}

/* ---------- Typography ---------- */

.ed-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
  font-weight: 700;
}

.ed-title {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

.ed-statement {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
  max-width: 50ch;
}

.ed-mega {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.5px;
  max-width: 22ch;
  margin: 0 auto;
  text-align: center;
}

.ed-sub {
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.7;
  max-width: 42ch;
  color: var(--muted);
}

.ed-body {
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.7;
  max-width: 48ch;
  margin-bottom: 12px;
}

.ed-section-dark .ed-body {
  color: rgba(245,243,238,0.7);
}

.ed-highlight {
  color: var(--purple);
}

.ed-highlight-coral {
  color: var(--coral);
}

/* ---------- Pixel hero (mimics app landscape) ---------- */

.pixel-hero {
  position: relative;
  z-index: 6;
  min-height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 48px;
  background: var(--soft);
  scroll-snap-align: start;
}

.pixel-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    #6bb8e0 0%,
    #87CEEB 15%,
    #a2d6f0 35%,
    #b8dff5 50%,
    #c9e4e8 65%,
    #d4e6d8 75%,
    #c0d4a8 85%,
    #8a9e72 100%
  );
  z-index: 0;
}

.pixel-ground {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 25vh;
  min-height: 160px;
  background: linear-gradient(
    180deg,
    #8a9e72 0%,
    #7d8c6c 10%,
    #6b7d5a 25%,
    #5a7a4a 45%,
    #4e6e3e 70%,
    #3d5a30 100%
  );
  border-top: 3px solid var(--charcoal);
  z-index: 1;
}

.pixel-re-walk {
  position: absolute;
  bottom: 28vh;
  left: 10%;
  width: 160px;
  height: 160px;
  z-index: 3;
  image-rendering: pixelated;
  transform: translateY(50%);
  animation: reWalk 60s ease-in-out infinite;
}

@keyframes reWalk {
  0%   { left: 5%; }
  8%   { left: 18%; }
  14%  { left: 18%; } /* pause */
  22%  { left: 30%; }
  30%  { left: 42%; }
  36%  { left: 42%; } /* pause */
  44%  { left: 35%; } /* wander back */
  50%  { left: 35%; } /* pause */
  60%  { left: 50%; }
  68%  { left: 62%; }
  74%  { left: 62%; } /* pause */
  82%  { left: 55%; } /* wander back */
  88%  { left: 55%; } /* pause */
  100% { left: 5%; }
}

.pixel-widget {
  position: absolute;
  top: 24px;
  right: 32px;
  z-index: 4;
  text-align: right;
}

.pixel-widget-temp {
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--charcoal);
  display: block;
  line-height: 1;
}

.pixel-widget-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--muted);
  display: block;
  margin-top: 4px;
}

/* Pixel clouds */
.pixel-cloud {
  position: absolute;
  z-index: 1;
  width: 128px;
  height: 40px;
  background: rgba(255,255,255,0.5);
  box-shadow: 20px 0 0 rgba(255,255,255,0.5), -20px 0 0 rgba(255,255,255,0.5), 0 -20px 0 rgba(255,255,255,0.35);
}

.pixel-cloud-1 {
  top: 18%;
  left: 5%;
  animation: cloudDrift 28s linear infinite;
}

.pixel-cloud-2 {
  top: 14%;
  left: 50%;
  width: 96px;
  height: 32px;
  animation: cloudDrift 36s linear infinite reverse;
}

.pixel-cloud-3 {
  top: 25%;
  left: 80%;
  width: 112px;
  height: 36px;
  animation: cloudDrift 32s linear infinite;
  animation-delay: -8s;
}

.pixel-cloud-4 {
  top: 4%;
  left: 25%;
  width: 80px;
  height: 28px;
  opacity: 0.6;
  animation: cloudDrift 40s linear infinite reverse;
  animation-delay: -12s;
}

.pixel-cloud-5 {
  top: 22%;
  left: 85%;
  width: 100px;
  height: 32px;
  opacity: 0.5;
  animation: cloudDrift 30s linear infinite;
  animation-delay: -5s;
}

@keyframes cloudDrift {
  0% { transform: translateX(0); }
  100% { transform: translateX(160px); }
}

/* Pixel buildings */
.pixel-building {
  position: absolute;
  bottom: 100%;
  background: var(--charcoal);
  opacity: 0.15;
}

.pixel-building::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 8px;
  right: 8px;
  height: 8px;
  background: rgba(245,243,238,0.3);
  box-shadow: 0 20px 0 rgba(245,243,238,0.3), 0 40px 0 rgba(245,243,238,0.3), 0 60px 0 rgba(245,243,238,0.3);
}

/* Pixel trees */
.pixel-tree {
  position: absolute;
  bottom: 100%;
  width: 40px;
  height: 72px;
}

.pixel-tree::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 15px;
  width: 10px;
  height: 28px;
  background: #6B4226;
}

.pixel-tree::after {
  content: '';
  position: absolute;
  bottom: 22px;
  left: 0;
  width: 40px;
  height: 46px;
  background: var(--sage);
  box-shadow: 0 -12px 0 #5a7a4a;
}

.pixel-tree-lg {
  width: 52px;
  height: 90px;
}

.pixel-tree-lg::before {
  left: 20px;
  width: 12px;
  height: 34px;
}

.pixel-tree-lg::after {
  bottom: 28px;
  width: 52px;
  height: 58px;
}

.pixel-tree-sm {
  transform: scale(0.7);
}

/* Pixel flowers */
.pixel-flower {
  position: absolute;
  bottom: 100%;
  width: 16px;
  height: 16px;
  background: var(--purple);
  margin-bottom: 6px;
}

.pixel-flower::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 16px;
  background: var(--sage);
}

.pixel-flower-coral {
  background: var(--coral);
}

.pixel-flower-mustard {
  background: var(--mustard);
}

.pixel-hero-text {
  position: relative;
  z-index: 4;
  max-width: 560px;
}

/* ---------- Re float in AI section ---------- */

.ed-re-float {
  position: absolute;
  right: 48px;
  bottom: 24px;
  width: 96px;
  height: 96px;
  image-rendering: pixelated;
  opacity: 0.25;
  animation: floatRight 4s ease-in-out infinite;
  z-index: 0;
}

/* ---------- Phone mockups ---------- */

.ed-phone {
  width: 220px;
  border: 2px solid var(--charcoal);
  box-shadow: var(--shadow);
  overflow: hidden;
  background: var(--charcoal);
}

.ed-phone video,
.ed-phone img {
  width: 100%;
  display: block;
}

.ed-phone-tilt-left {
  transform: rotate(-4deg);
}

.ed-phone-tilt-right {
  transform: rotate(3deg);
}

.ed-phone-behind {
  position: absolute;
  top: 40px;
  right: -20px;
  z-index: -1;
  opacity: 0.85;
  width: 200px;
}

/* Subtle float */
@keyframes float {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50% { transform: rotate(-3deg) translateY(-14px); }
}

@keyframes floatRight {
  0%, 100% { transform: rotate(3deg) translateY(0); }
  50% { transform: rotate(4deg) translateY(-10px); }
}

.ed-hero-media .ed-phone-tilt-left {
  animation: float 3.5s ease-in-out infinite;
}

.ed-hero-media .ed-phone-tilt-right {
  animation: floatRight 4.5s ease-in-out infinite;
}

/* Hero text entrance */
.ed-hero-text {
  animation: slideInLeft 1s cubic-bezier(0.16,1,0.3,1) both;
}

.ed-hero-media {
  animation: slideInRight 1s cubic-bezier(0.16,1,0.3,1) 0.15s both;
}

/* ---------- Split layout ---------- */

.ed-split {
  display: flex;
  align-items: center;
  gap: 36px;
  max-width: 1000px;
  margin: 0 auto;
}

.ed-split-reverse {
  flex-direction: row-reverse;
}

.ed-split-text {
  flex: 1;
}

.ed-split-media {
  flex: 0 0 auto;
}

.ed-split-media .ed-phone {
  width: 200px;
}

/* ---------- Flow (how it works) ---------- */

.ed-flow {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 24px;
}

.ed-flow-step {
  flex: 1;
  background: var(--cream);
  border: var(--border);
  box-shadow: var(--shadow-sm);
  padding: 14px;
}

.ed-flow-num {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--coral);
  letter-spacing: 2px;
  display: block;
  margin-bottom: 4px;
}

.ed-flow-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}

.ed-flow-desc {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  display: block;
}

.ed-flow-arrow {
  font-size: 24px;
  color: var(--coral);
  align-self: center;
  flex: 0 0 auto;
  margin-top: 8px;
}

/* ---------- Equal height flow steps ---------- */

.ed-flow-step-equal {
  display: flex;
  flex-direction: column;
  min-height: 180px;
}

/* ---------- Auto-scrolling gallery ---------- */

.scroll-gallery-wrap {
  margin-top: 16px;
  overflow: hidden;
  padding: 4px 0 8px;
}

.scroll-gallery {
  overflow: visible;
}

.scroll-gallery-inner {
  display: flex;
  gap: 12px;
  animation: scrollLeft 40s linear infinite;
  width: max-content;
}

.scroll-gallery-inner:hover {
  animation-play-state: paused;
}

@keyframes scrollLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.sg-item {
  flex: 0 0 auto;
  width: 220px;
  height: 440px;
  border: var(--border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  background: var(--charcoal);
  position: relative;
}

.sg-item video,
.sg-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top;
  display: block;
  background: var(--charcoal);
}

.sg-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cream);
  padding: 6px 10px;
  background: var(--charcoal);
  border-top: 1px solid rgba(245,243,238,0.1);
}

/* ---------- Business model cards ---------- */

.biz-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-top: 20px;
}

.biz-card {
  background: var(--cream);
  border: var(--border);
  box-shadow: var(--shadow);
  padding: 20px;
  color: var(--charcoal);
}

.biz-card p {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 8px;
}

.biz-card-accent {
  background: var(--coral);
  color: var(--cream);
}

.biz-card-accent p { color: var(--cream); opacity: 0.85; }

.biz-card-dark {
  background: rgba(245,243,238,0.08);
  border-color: rgba(245,243,238,0.2);
  color: var(--cream);
  box-shadow: none;
}

.biz-card-dark p { color: rgba(245,243,238,0.65); }

.biz-tier {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.biz-card-accent .biz-tier { color: rgba(245,243,238,0.5); }
.biz-card-dark .biz-tier { color: var(--coral); }

.biz-label {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}

.biz-card-accent .biz-label { color: var(--cream); }
.biz-card-dark .biz-label { color: var(--cream); }

.biz-price {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--cream);
  margin-top: 4px;
}

/* ---------- Masonry gallery ---------- */

.ed-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 160px;
  gap: 10px;
  margin-top: 16px;
}

.ed-gallery-item {
  position: relative;
  border: var(--border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  background: var(--charcoal);
}

.ed-gallery-item video,
.ed-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ed-gallery-tall {
  grid-row: span 2;
}

.ed-gallery-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cream);
  padding: 6px 8px;
  background: linear-gradient(transparent, rgba(26,26,26,0.85));
}

/* ---------- Phone gallery (badges) ---------- */

.phone-gallery {
  display: flex;
  gap: 12px;
  justify-content: center;
  overflow-x: auto;
  padding-bottom: 4px;
}

.phone-frame {
  flex: 0 0 auto;
  width: 150px;
  border: 2px solid var(--charcoal);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  background: var(--charcoal);
}

.phone-frame img {
  width: 100%;
  display: block;
}

/* ---------- Pricing ---------- */

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.pricing-card {
  background: var(--cream);
  border: var(--border);
  box-shadow: var(--shadow);
  padding: 24px;
  text-align: left;
  min-height: 180px;
}

.pricing-card-accent {
  background: var(--coral);
  color: var(--cream);
}

.pricing-card-accent p {
  color: var(--cream);
  opacity: 0.85;
}

.pricing-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: var(--muted);
}

.pricing-card-accent .pricing-label {
  color: rgba(245,243,238,0.5);
}

.pricing-price {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
}

.pricing-card-accent .pricing-price {
  color: var(--cream);
}

/* ---------- Responsive ---------- */

@media (max-width: 768px) {
  .wrap { padding: 24px 16px 60px; }
  header.site-header { padding: 8px 16px; }
  h1 { font-size: 22px; }
  h2 { font-size: 14px; }
  nav.site-nav a { font-size: 9px; padding: 3px 6px; letter-spacing: 1px; }
  table { font-size: 11px; }
  th, td { padding: 8px; }
  pre { font-size: 10px; padding: 12px; }

  /* Editorial */
  .ed-section { padding: 40px 20px; }
  .ed-hero { flex-direction: column; min-height: auto; padding: 40px 20px; gap: 32px; }
  .ed-hero-media { width: 240px; height: 360px; }
  .ed-phone { width: 180px; }
  .ed-phone-behind { width: 160px; }
  .ed-title { font-size: 28px; }
  .ed-statement { font-size: 17px; }
  .ed-mega { font-size: 20px; }
  .ed-sub { font-size: 12px; }
  .ed-split { flex-direction: column; gap: 28px; }
  .ed-split-reverse { flex-direction: column; }
  .ed-split-media .ed-phone { width: 180px; }
  .ed-flow { flex-direction: column; }
  .ed-flow-arrow { transform: rotate(90deg); align-self: center; }
  .pricing-grid { grid-template-columns: 1fr; }
  .phone-gallery { gap: 8px; }
  .phone-frame { width: 120px; }
  .ed-gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; }
  .pixel-hero { min-height: 100dvh; padding: 10vh 20px 32vh; }
  .pixel-hero.hero-split { padding: 10vh 20px 32vh; }
  .pixel-widget { top: 16px; right: 16px; }
  .pixel-widget-temp { font-size: 24px; }
  .sg-item { width: 160px; height: 280px; }
  .biz-grid { grid-template-columns: 1fr; }
  .ed-re-float { width: 64px; height: 64px; right: 20px; }
  .quest-card-mini .qc-title { font-size: 13px; }
}

/* ==========================================================
   INTRO PAGE — Quest cards, split layouts, USP
   ========================================================== */

/* ---------- 01: Hero split ---------- */

.hero-split {
  padding-top: 48px;
  padding-bottom: 48px;
  min-height: 80vh;
  display: flex;
  align-items: center;
}

.hero-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  min-height: 60vh;
}

.hero-statement-divider {
  width: 48px;
  height: 3px;
  background: var(--coral);
  margin: 20px 0;
}

/* ---------- Quest card (web version) ---------- */

.quest-card-web {
  position: relative;
  display: flex;
  background: var(--cream);
  border: 2px solid var(--charcoal);
  box-shadow: 4px 4px 0 var(--charcoal);
  overflow: hidden;
}

.qc-stripe {
  width: 6px;
  flex: 0 0 6px;
}

.qc-stripe-pink { background: var(--pink); }
.qc-stripe-purple { background: var(--purple); }
.qc-stripe-sage { background: var(--sage); }
.qc-stripe-coral { background: var(--coral); }

.qc-body {
  padding: 20px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qc-tag-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.qc-tag {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 2px 6px;
  border: 2px solid var(--charcoal);
}

.qc-tag-pink { background: var(--pink); color: var(--cream); }
.qc-tag-purple { background: var(--purple); color: var(--cream); }
.qc-tag-sage { background: var(--sage); color: var(--cream); }
.qc-tag-coral { background: var(--coral); color: var(--cream); }
.qc-tag-content { background: var(--cream); color: var(--charcoal); }

.qc-countdown {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--pink);
  letter-spacing: 1px;
}

.qc-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

.qc-divider {
  height: 1px;
  background: rgba(26,26,26,0.15);
}

.qc-intention {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.qc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 2px solid var(--charcoal);
  align-self: flex-start;
}

.qc-chip-icon {
  font-size: 10px;
  color: var(--coral);
}

.qc-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}

.qc-verify {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.qc-verify-icon {
  font-size: 10px;
  color: var(--coral);
}

.qc-details-btn {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: var(--pink);
  color: var(--cream);
  padding: 6px 14px;
  border: 2px solid var(--charcoal);
  cursor: pointer;
}

.qc-ai-note {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--muted);
  opacity: 0.6;
  margin-top: -2px;
}

/* ---------- Deck stack ---------- */

.deck-stack {
  position: relative;
  width: 100%;
  max-width: 380px;
  min-height: 340px;
}

.quest-card-front {
  position: relative;
  z-index: 3;
}

.quest-card-stack-1 {
  position: absolute;
  top: -6px;
  left: 8px;
  right: -8px;
  z-index: 2;
  opacity: 0.7;
  transform: rotate(1.5deg);
}

.quest-card-stack-1 .qc-body {
  padding: 10px 14px;
}

.quest-card-stack-2 {
  position: absolute;
  top: -12px;
  left: 16px;
  right: -16px;
  z-index: 1;
  opacity: 0.4;
  transform: rotate(3deg);
}

.quest-card-stack-2 .qc-body {
  padding: 10px 14px;
}

.deck-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.5;
}

.deck-hint-arrow {
  font-size: 14px;
  animation: hintPulse 2s ease-in-out infinite;
}

@keyframes hintPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* ---------- 02: Split grid ---------- */

.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: stretch;
  overflow: hidden;
}


.split-grid > * {
  min-width: 0;
}

/* ---------- 02: Flow 2x2 grid ---------- */

.flow-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

/* ---------- 02: Gallery swipe ---------- */

.split-grid > .reveal:has(.gallery-frame) {
  position: relative;
}

.gallery-frame {
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.gallery-row {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
}

.gallery-nav-side {
  flex-shrink: 0;
  z-index: 10;
  background: rgba(245,243,238,0.85);
  border: var(--border);
  box-shadow: var(--shadow-sm);
  align-self: center;
}


.gallery-swipe {
  flex: 1;
  min-width: 0;
  gap: 8px;
}

.gallery-snap-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  border: none;
  overflow: hidden;
  max-height: 100%;
  background: transparent;
  position: relative;
  cursor: pointer;
  border-radius: 8px;
  line-height: 0;
}

.gallery-snap-card::after {
  content: '⤢';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--charcoal);
  color: var(--cream);
  font-size: 16px;
  border: var(--border);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.gallery-snap-card:hover::after {
  opacity: 1;
}

.gallery-snap-card:hover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0.15);
  border-radius: 8px;
  pointer-events: none;
}

.gallery-snap-card video,
.gallery-snap-card img {
  width: auto;
  height: 100%;
  max-width: 45vw;
  object-fit: contain;
  display: block;
  border-radius: 8px;
}

.gallery-snap-card-sm {
  max-width: 12vw;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
}

.gallery-snap-card-sm video,
.gallery-snap-card-sm img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

.gallery-snap-card .sg-label {
  position: relative;
  display: block;
  border-top: 1px solid rgba(245,243,238,0.1);
}

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(26,26,26,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.lightbox-open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox video {
  max-height: 90vh;
  max-width: 90vw;
  border: var(--border);
  box-shadow: 8px 8px 0 rgba(245,243,238,0.15);
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: none;
  border: 2px solid var(--cream);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 24px;
  width: 48px;
  height: 48px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-close:hover {
  background: var(--cream);
  color: var(--charcoal);
}

.gallery-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
}

.gallery-nav .deck-dots {
  display: flex;
  gap: 6px;
}

/* ---------- Shared nav buttons ---------- */

.deck-nav-btn {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  border: 2px solid var(--charcoal);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  color: var(--charcoal);
}

.deck-nav-btn:hover {
  background: var(--coral);
  color: var(--cream);
}

.deck-nav-btn:active {
  box-shadow: none;
  transform: translate(2px, 2px);
}

/* ---------- 03: AI + quest types ---------- */

/* ---------- 03: AI split layout ---------- */

/* ---------- 03: AI section pixel cityscape ---------- */

.ai-section {
  position: relative;
  overflow: hidden;
  background: #5a6b4a !important;
}


.snap-group {
  scroll-snap-align: start;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.snap-group > .ed-section {
  scroll-snap-align: none;
}

.snap-group > .ed-section:last-child {
  flex: 1;
  display: flex;
  align-items: center;
}

.snap-group > .ed-section:last-child > .ed-wrap {
  width: 100%;
}

.ai-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.ai-quest-carousel {
  position: relative;
}

.quest-carousel-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.quest-carousel {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

.quest-carousel-card {
  display: none;
}

.quest-carousel-card.active {
  display: block;
}

.quest-carousel-prev,
.quest-carousel-next {
  flex-shrink: 0;
  background: transparent;
  border: 2px solid var(--cream);
  color: var(--cream);
}

.quest-carousel-prev:hover,
.quest-carousel-next:hover {
  background: var(--cream);
  color: var(--charcoal);
}

.quest-card-mini {
  box-shadow: 3px 3px 0 rgba(245,243,238,0.15);
  border-color: rgba(245,243,238,0.25);
}

.quest-card-mini .qc-body {
  padding: 12px 14px;
  gap: 6px;
}

.quest-card-mini .qc-title {
  font-size: 14px;
}

.quest-card-mini .qc-intention {
  font-size: 10px;
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}

.quest-card-mini .qc-divider {
  background: rgba(245,243,238,0.15);
}

.quest-card-mini .qc-chip {
  border-color: rgba(245,243,238,0.25);
  color: var(--cream);
  font-size: 8px;
  padding: 3px 8px;
}

.quest-card-mini .qc-verify {
  color: rgba(245,243,238,0.4);
}

/* Dark-bg card overrides — white cards on dark bg */
.ed-section-dark .quest-card-mini {
  background: var(--cream);
  border-color: var(--charcoal);
  box-shadow: 4px 4px 0 rgba(245,243,238,0.15);
}

.ed-section-dark .quest-card-mini .qc-title {
  color: var(--charcoal);
}

.ed-section-dark .quest-card-mini .qc-intention {
  color: var(--muted);
}

.ed-section-dark .quest-card-mini .qc-tag-content {
  background: var(--cream);
  color: var(--charcoal);
  border-color: var(--charcoal);
}

.ed-section-dark .quest-card-mini .qc-divider {
  background: rgba(26,26,26,0.1);
}

.ed-section-dark .quest-card-mini .qc-chip {
  border-color: var(--charcoal);
  color: var(--charcoal);
}

.ed-section-dark .quest-card-mini .qc-verify {
  color: var(--muted);
}

.ed-section-dark .quest-card-mini .qc-meta {
  color: var(--muted);
}

.ed-section-dark .quest-card-mini .qc-location-num {
  background: var(--charcoal);
  color: var(--cream);
}

.ed-section-dark .quest-card-mini .qc-location-name {
  color: var(--charcoal);
}

/* ---------- 04: USP grid ---------- */

.usp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.usp-card {
  background: var(--cream);
  border: var(--border);
  box-shadow: var(--shadow);
  padding: 24px;
}

.usp-badge {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.usp-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.usp-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 0;
  margin-top: 0;
  color: var(--charcoal);
  text-transform: none;
  letter-spacing: 0.5px;
  border: none;
  padding: 0;
}

.usp-body {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 0;
}

/* Pixel art icons for USP cards (badge style) */
.usp-pixel {
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  image-rendering: pixelated;
}

/* Compass — pixel art via box-shadow */
.usp-pixel-compass {
  background: var(--coral);
  width: 36px;
  height: 36px;
  position: relative;
  border: 2px solid var(--charcoal);
}

.usp-pixel-compass::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 14px solid var(--cream);
  transform: translate(-50%, -80%);
}

.usp-pixel-compass::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 14px solid var(--charcoal);
  transform: translate(-50%, -20%);
}

/* Shuffle/dice — two squares */
.usp-pixel-shuffle {
  position: relative;
  width: 36px;
  height: 36px;
}

.usp-pixel-shuffle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: var(--purple);
  border: 2px solid var(--charcoal);
}

.usp-pixel-shuffle::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: var(--pink);
  border: 2px solid var(--charcoal);
}

/* Heart — pixel heart */
.usp-pixel-heart {
  position: relative;
  width: 36px;
  height: 36px;
  background: var(--sage);
  border: 2px solid var(--charcoal);
}

.usp-pixel-heart::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: var(--cream);
  box-shadow: -8px 0 0 var(--cream), 8px 0 0 var(--cream), 0 6px 0 var(--cream);
}

/* ---------- Location prompt ---------- */

.location-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 240px;
  max-width: 320px;
  margin: 0 auto;
  background: rgba(245,243,238,0.7);
  border: var(--border);
  box-shadow: var(--shadow);
  padding: 28px 24px;
}

.location-prompt-text {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--charcoal);
  margin-bottom: 20px;
  max-width: 28ch;
}

.location-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 10px 20px;
  border: 2px solid var(--charcoal);
  cursor: pointer;
  margin: 4px 0;
  width: 100%;
  max-width: 240px;
}

.location-btn-allow {
  background: var(--coral);
  color: var(--cream);
  box-shadow: var(--shadow-sm);
}

.location-btn-allow:hover {
  background: var(--charcoal);
}

.location-btn-allow:disabled {
  opacity: 0.6;
  cursor: wait;
}

.location-btn-skip {
  background: transparent;
  color: var(--muted);
  border-color: var(--muted);
}

.location-btn-skip:hover {
  background: var(--charcoal);
  color: var(--cream);
  border-color: var(--charcoal);
}

/* ---------- Swipeable deck ---------- */

.deck-swipe {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

.deck-swipe::-webkit-scrollbar {
  display: none;
}

.deck-card-snap {
  flex: 0 0 100%;
  scroll-snap-align: center;
}

.deck-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}

.deck-dot {
  width: 8px;
  height: 8px;
  background: var(--charcoal);
  opacity: 0.2;
  transition: opacity 0.2s;
}

.deck-dot-active {
  opacity: 1;
  background: var(--coral);
}

/* ---------- Quest card extra details ---------- */

.qc-meta {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--muted);
  text-transform: uppercase;
}

.qc-description {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.65;
  color: var(--charcoal);
  opacity: 0.7;
  display: block;
  margin-top: 2px;
}

.qc-locations {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
}

.qc-location {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
}

.qc-location-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--charcoal);
  color: var(--cream);
  font-size: 9px;
  font-weight: 700;
  flex: 0 0 18px;
}

.qc-location-name {
  font-weight: 700;
  color: var(--charcoal);
}

.qc-location-hood {
  color: var(--muted);
  font-size: 9px;
}

/* Dark-bg location overrides */
.ed-section-dark .qc-location-num {
  background: var(--cream);
  color: var(--charcoal);
}

.ed-section-dark .qc-location-name {
  color: var(--cream);
}

.ed-section-dark .qc-description {
  color: var(--cream);
  opacity: 0.5;
}

.ed-section-dark .qc-meta {
  color: rgba(245,243,238,0.35);
}

/* ---------- Hero ticker bar ---------- */

.hero-ticker {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--coral);
  border-top: 2px solid var(--charcoal);
  overflow: hidden;
  padding: 6px 0;
  text-decoration: none;
  display: block;
  cursor: pointer;
}

.hero-ticker:hover {
  background: var(--charcoal);
}

.hero-ticker-track {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: tickerScroll 40s linear infinite;
}

.hero-ticker-track span {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cream);
  white-space: nowrap;
}

@keyframes tickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---------- Hero split inside pixel-hero ---------- */

.pixel-hero.hero-split {
  padding: 12vh 48px 28vh;
  align-items: center;
  margin-bottom: 0;
}

.pixel-hero + .ed-section {
  position: relative;
  z-index: 5;
}

.pixel-hero .hero-split-grid {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.pixel-hero .hero-quest-deck {
  position: absolute;
  left: 48px;
  top: 50%;
  transform: translateY(-50%);
  width: calc(50% - 72px);
  max-width: 420px;
  z-index: 4;
}

.hero-quest-deck .qc-description {
  display: none;
}

.hero-quest-deck .deck-card-snap {
  display: flex;
  align-items: center;
}

.hero-deck-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-deck-wrap .deck-swipe {
  flex: 1;
  min-width: 0;
}

.hero-deck-side {
  flex-shrink: 0;
}


.pixel-hero .hero-statement {
  position: absolute;
  right: 48px;
  top: 50%;
  transform: translateY(-50%);
  width: calc(50% - 72px);
  max-width: 580px;
  z-index: 4;
}

/* ==========================================================
   MOBILE OVERRIDES (must be last to win cascade)
   ========================================================== */

@media (max-width: 768px) {
  /* Hero */
  .hero-split-grid { grid-template-columns: 1fr; gap: 24px; min-height: auto; }
  .pixel-hero .hero-quest-deck { position: static; transform: none; width: 100%; max-width: 100%; box-sizing: border-box; order: 2; overflow: visible; }
  .pixel-hero .hero-statement { position: static; transform: none; width: 100%; max-width: 100%; order: 1; }
  .pixel-hero.hero-split { padding: 24px 16px 20vh; min-height: 100dvh; align-items: center; }
  .pixel-ground { height: 10vh; min-height: 80px; }
  .pixel-re-walk { bottom: 10vh; width: 120px; height: 120px; }
  .hero-split-grid { display: flex; flex-direction: column; justify-content: center; align-items: stretch; z-index: 5; width: 100%; box-sizing: border-box; gap: 12px; padding-top: 3vh; }
  .pixel-hero .hero-statement { text-align: left; padding-left: 0; }
  .qc-description { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
  .hero-deck-wrap { flex-direction: row; width: 100%; box-sizing: border-box; }
  .hero-deck-side { flex: 0 0 32px; }
  .deck-swipe { width: 100%; box-sizing: border-box; overflow-y: visible; }
  .qc-intention { -webkit-line-clamp: unset; display: block; overflow: visible; }
  .deck-card-snap { flex: 0 0 100%; max-width: 100%; box-sizing: border-box; }
  .quest-card-mini { max-width: 100%; box-sizing: border-box; overflow: hidden; word-wrap: break-word; }
  .quest-card-mini .qc-content { overflow: hidden; }
  .location-prompt { max-width: 100%; width: 100%; box-sizing: border-box; margin: 0; min-height: 320px; background: rgba(245,243,238,0.7); }

  /* Section 02 — How it works */
  .split-grid { grid-template-columns: 1fr; gap: 24px; }
  .flow-2x2 { grid-template-columns: 1fr; }
  .gallery-frame { position: relative; top: 0; height: auto; }
  .gallery-row { position: relative; }
  .gallery-swipe { flex: 1; min-width: 0; }
  .gallery-snap-card { flex: 0 0 auto; }
  .gallery-snap-card video,
  .gallery-snap-card img { max-width: 80vw; height: auto; max-height: 55vh; }
  .gallery-snap-card-sm { max-width: 35vw; }
  .gallery-snap-card::after { display: none; }
  .gallery-column { max-height: 400px; }

  /* Section 03 — Role of AI */
  .ai-split { grid-template-columns: 1fr; gap: 24px; }
  .quest-carousel-row { gap: 8px; }

  /* Section 04 — USP cards */
  .usp-grid { grid-template-columns: 1fr; }
  .usp-title { font-size: 14px; }

  /* Section 05 — Business model */
  .biz-grid { grid-template-columns: 1fr; }

  /* Ticker — fixed size at all breakpoints */
  .hero-ticker { padding: 6px 0; }
  .hero-ticker-track span { font-size: 10px; }
}