/* ── css/shared/landing.css ── */
/* =============================================================================
   PRISM LANDING — landing.css
   Dark, simulation-driven, engineering-first design.
   All lp-* classes are scoped to landing only.
============================================================================= */

/* ─── RESET / BASE ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --lp-bg:          #051327;
  --lp-surface:     #132035;
  --lp-surface-2:   #172440;
  --lp-border:      rgba(56,189,248,0.1);
  --lp-border-dim:  rgba(255,255,255,0.06);
  --lp-text:        #e2e8f0;
  --lp-text-muted:  #cfd5de;
  --lp-text-dim:    #92acd2;
  --lp-primary:     #3b82f6;
  --lp-primary-glow:rgba(59,130,246,0.35);
  --lp-cyan:        #38bdf8;
  --lp-cyan-glow:   rgba(56,189,248,0.2);
  --lp-fail-red:    #f87171;
  --lp-fail-red-bg: rgba(248,113,113,0.08);
  --lp-warn-orange: #fb923c;
  --lp-warn-orange-bg: rgba(251,146,60,0.08);
  --lp-warn-yellow: #fbbf24;
  --lp-warn-yellow-bg: rgba(251,191,36,0.08);
  --lp-ok-green:    #34d399;
  --lp-mono:        'JetBrains Mono', 'Fira Code', monospace;
  --lp-container:   clamp(960px, 82vw, 1600px);
  --lp-radius:      12px;
  --lp-radius-lg:   18px;


  --fs-2xxl:    32px;      /* section headlines (marketing display size)  */
  --fs-3xxl:    3.00rem;   /* hero ultra large                           */
}

html { scroll-behavior: smooth; font-size: clamp(14px, 1vw, 18px); }
.lp-body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--lp-bg);
  color: var(--lp-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* base/style.css locks <body> to one viewport (overflow hidden, fixed
     height) for the canvas app. Marketing and legal pages scroll normally. */
  overflow-y: auto;
  height: auto;
}

/* ─── LAYOUT ────────────────────────────────────────────────────────────────── */
.lp-container {
  max-width: var(--lp-container);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ─── SCROLL REVEAL ─────────────────────────────────────────────────────────── */
.lp-anim {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.lp-anim.lp-visible { opacity: 1; transform: none; }
.lp-anim-delay-1 { transition-delay: 0.12s; }
.lp-anim-delay-2 { transition-delay: 0.24s; }

/* ─── SHARED SECTION TYPOGRAPHY ─────────────────────────────────────────────── */
.lp-section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--lp-cyan);
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.lp-section-h2 {
  font-size: var(--fs-2xxl);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  color: #f1f5f9;
  margin-bottom: 1.75rem;
}
.lp-h2-accent {
  background: linear-gradient(90deg, var(--lp-cyan), var(--lp-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.lp-section-sub {
  font-size: var(--fs-md);
  color: var(--lp-text-muted);
  width: clamp(280px, 45vw, 760px);
  line-height: 1.7;
  margin-bottom: 3rem;
  margin-left: auto;
  margin-right: auto;
}

/* ─── SHARED BUTTONS ────────────────────────────────────────────────────────── */
.lp-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.5rem;
  border-radius: 8px;
  font-size: var(--fs-base);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.18s ease;
  cursor: pointer;
  border: none;
  white-space: nowrap;
}
.lp-btn-primary {
  background: var(--lp-primary);
  color: #fff;
  box-shadow: 0 0 20px var(--lp-primary-glow);
}
.lp-btn-primary:hover {
  background: #2563eb;
  box-shadow: 0 0 30px rgba(59,130,246,0.5);
  transform: translateY(-1px);
}
.lp-btn-ghost {
  background: rgba(255,255,255,0.05);
  color: var(--lp-text);
  border: 1px solid var(--lp-border-dim);
}
.lp-btn-ghost:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(56,189,248,0.3);
  color: var(--lp-cyan);
}
.lp-btn-outline {
  background: transparent;
  color: var(--lp-cyan);
  border: 1px solid rgba(56,189,248,0.35);
}
.lp-btn-outline:hover {
  background: var(--lp-cyan-glow);
  border-color: var(--lp-cyan);
}
.lp-btn-xl { padding: 0.9rem 2rem; font-size: var(--fs-md); border-radius: 10px; }

/* ─── GRID BACKGROUND ────────────────────────────────────────────────────────── */
.lp-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(56,189,248,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

/* Decorative SVG layer */
.lp-hero-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.lp-decor-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* =============================================================================
   HERO
============================================================================= */
.lp-hero {
  position: relative;
  min-height: calc(100svh - 100px);
  display: flex;
  align-items: center;
  background: var(--lp-bg);
  overflow: hidden;
  padding: 2.5rem 0;
}
.lp-hero-glow {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1400px, 98vw);
  height: min(900px, 90vh);
  background: radial-gradient(ellipse at center, rgba(59,130,246,0.14) 0%, transparent 65%);
  pointer-events: none;
}

/* SVG decorative background elements */
.lp-hero-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* Sim card 3-D tilt */
.lp-hero-sim {
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow 0.3s ease;
}
.lp-hero-sim.lp-tilt-active {
  transition: none;
}
.lp-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  width: 100%;
}

/* Hero copy */
.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lp-cyan);
  background: rgba(56,189,248,0.08);
  border: 1px solid rgba(56,189,248,0.2);
  padding: 0.3rem 0.75rem;
  border-radius: 100px;
  margin-bottom: 1.5rem;
}
.lp-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lp-ok-green);
  box-shadow: 0 0 6px var(--lp-ok-green);
  animation: lp-pulse-dot 2s ease-in-out infinite;
}
@keyframes lp-pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--lp-ok-green); }
  50%       { opacity: 0.6; box-shadow: 0 0 12px var(--lp-ok-green); }
}

.lp-hero-h1 {
  font-size: var(--fs-3xxl);
  font-weight: 900;
  line-height: 1.1;
  color: #f8fafc;
  margin-bottom: 1.2rem;
  letter-spacing: -0.02em;
}
.lp-h1-accent {
  background: linear-gradient(90deg, #f87171 0%, #fb923c 60%, #fbbf24 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.lp-hero-sub {
  font-size: var(--t-subtitle);
  color: #96bcf2;
  line-height: 1.7;
  font-weight: 500;
  font-style: italic;
  width: clamp(280px, 38vw, 640px);
  margin-bottom: 2rem;
}
.lp-hero-actions {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.lp-hero-note {
  font-size: var(--fs-sm);
  color: var(--lp-text-dim);
}

/* Simulation window */
.lp-hero-sim {
  border-radius: var(--lp-radius-lg);
  overflow: hidden;
  border: 1px solid rgba(56,189,248,0.15);
  box-shadow:
    0 0 80px rgba(59,130,246,0.12),
    0 0 1px rgba(56,189,248,0.3),
    inset 0 1px 0 rgba(255,255,255,0.04);
  background: var(--lp-surface);
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow 0.35s ease, transform 0.1s ease;
}
.lp-sim-chrome {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1rem;
  background: rgba(0,0,0,0.35);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.lp-sim-chrome-dots { display: flex; gap: 0.35rem; }
.lp-sim-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.lp-sim-dot--red    { background: #f87171; }
.lp-sim-dot--yellow { background: #fbbf24; }
.lp-sim-dot--green  { background: #34d399; }
.lp-sim-title {
  flex: 1;
  text-align: center;
  font-size: var(--fs-xss);
  color: var(--lp-text-muted);
  font-family: var(--lp-mono);
}
.lp-sim-live {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--lp-ok-green);
}
.lp-sim-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lp-ok-green);
  animation: lp-pulse-dot 1.5s infinite;
}
.lp-sim-body {
  display: flex;
  flex-direction: column;
}
/* Canvas-like dot-grid background for the architecture area */
.lp-sim-graph-area {
  position: relative;
  background-color: #0b1422;
  background-image:
    radial-gradient(circle, rgba(56,189,248,0.18) 1px, transparent 1px);
  background-size: 22px 22px;
  border-bottom: 1px solid rgba(56,189,248,0.07);
  border-radius: 0;
  overflow: hidden;
}
/* Subtle vignette so edges fade into the card border */
.lp-sim-graph-area::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(11,20,34,0.75) 100%);
  pointer-events: none;
}
.lp-sim-svg {
  width: 100%;
  height: auto;
  display: block;
  padding: 1rem 0.5rem 0.5rem;
  position: relative;
  z-index: 1;
}
.no-smil .lp-sim-svg animate,
.no-smil .lp-sim-svg animateMotion { display: none; }

.lp-low-motion .lp-sim-svg animate,
.lp-low-motion .lp-sim-svg animateMotion { display: none; }

.lp-low-motion .lp-sim-live-dot,
.lp-low-motion .lp-metrics-live-dot,
.lp-low-motion .lp-eyebrow-dot {
  animation: none !important;
}

.lp-low-motion .lp-hero-sim {
  transform: none !important;
  transition: box-shadow 0.2s ease;
}

/* Metrics panel */
.lp-sim-metrics {
  padding: 0.85rem 1rem 1rem;
  border-top: 1px solid rgba(255,255,255,0.04);
  background: rgba(0,0,0,0.2);
}
.lp-metrics-hdr {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-text-muted);
  margin-bottom: 0.65rem;
}
.lp-metrics-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lp-ok-green);
  animation: lp-pulse-dot 1.5s infinite;
}
.lp-metrics-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.28rem 0;
  font-size: var(--fs-xs);
}
.lp-mk { color: var(--lp-text-muted); }
.lp-mv {
  font-family: var(--lp-mono);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.lp-mv em { font-style: normal; font-size: var(--fs-micro); opacity: 0.6; margin-left: 2px; }
.lp-mv-ok     { color: var(--lp-ok-green); }
.lp-mv-warn   { color: var(--lp-warn-yellow); }
.lp-mv-danger { color: var(--lp-fail-red); }
.lp-metrics-sep {
  height: 1px;
  background: rgba(255,255,255,0.05);
  margin: 0.5rem 0;
}
.lp-metrics-alert {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-xss);
  color: var(--lp-fail-red);
  font-family: var(--lp-mono);
  animation: lp-blink-alert 2s ease infinite;
}
@keyframes lp-blink-alert {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}


/* =============================================================================
   FAILURE MODES SECTION
============================================================================= */
.lp-failures {
  padding: 6rem 0;
  background: var(--lp-surface);
  border-top: 1px solid var(--lp-border-dim);
  border-bottom: 1px solid var(--lp-border-dim);
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Soft ambient wash behind the heading band */
.lp-failures::before {
  content: "";
  position: absolute;
  top: -18%;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, 90%);
  height: 60%;
  background: radial-gradient(ellipse at 50% 30%, rgba(56,189,248,0.06), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.lp-failures .lp-section-label,
.lp-failures .lp-section-h2,
.lp-failures .lp-section-sub,
.lp-failures-grid {
  position: relative;
  z-index: 1;
}
.lp-failures .lp-section-sub {
  margin: 0 auto 3rem;
}
.lp-failures-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  text-align: left;
}
.lp-fail-card {
  display: flex;
  gap: 1rem;
  padding: 1.4rem 1.3rem;
  border-radius: var(--lp-radius);
  border: 1px solid var(--lp-border-dim);
  background: rgba(255,255,255,0.02);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.lp-fail-card:hover {
  transform: translateY(-3px);
}
.lp-fail-card--red:hover   { border-color: rgba(248,113,113,0.3); box-shadow: 0 4px 30px rgba(248,113,113,0.08); }
.lp-fail-card--orange:hover{ border-color: rgba(251,146,60,0.3); box-shadow: 0 4px 30px rgba(251,146,60,0.08); }
.lp-fail-card--yellow:hover{ border-color: rgba(251,191,36,0.3); box-shadow: 0 4px 30px rgba(251,191,36,0.08); }

.lp-fail-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-fail-card--red    .lp-fail-icon { background: var(--lp-fail-red-bg);    color: var(--lp-fail-red); }
.lp-fail-card--orange .lp-fail-icon { background: var(--lp-warn-orange-bg); color: var(--lp-warn-orange); }
.lp-fail-card--yellow .lp-fail-icon { background: var(--lp-warn-yellow-bg); color: var(--lp-warn-yellow); }

.lp-fail-body { flex: 1; }
.lp-fail-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: #f1f5f9;
  margin-bottom: 0.35rem;
}
.lp-fail-desc {
  font-size: var(--fs-base);
  color: var(--lp-text-muted);
  line-height: 1.55;
  margin-bottom: 0.6rem;
}
.lp-fail-tag {
  font-size: var(--fs-micro);
  font-weight: 600;
  font-family: var(--lp-mono);
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  letter-spacing: 0.03em;
}
.lp-fail-tag--red    { background: var(--lp-fail-red-bg);    color: var(--lp-fail-red);    border: 1px solid rgba(248,113,113,0.25); }
.lp-fail-tag--orange { background: var(--lp-warn-orange-bg); color: var(--lp-warn-orange); border: 1px solid rgba(251,146,60,0.25); }
.lp-fail-tag--yellow { background: var(--lp-warn-yellow-bg); color: var(--lp-warn-yellow); border: 1px solid rgba(251,191,36,0.25); }


/* =============================================================================
   HOW IT WORKS
============================================================================= */
.lp-how {
  padding: 6rem 0;
  background: var(--lp-bg);
}
.lp-how-subheading {
  font-size: var(--fs-md);
  color: var(--lp-text-muted);
  margin-bottom: 3rem;
  margin-top: -1.5rem;
}
.lp-how-steps {
  display: grid;
  /* step · connector · step · connector · step — the connector lines are
     grid items too, so they need their own narrow columns. */
  grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) 48px minmax(0, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
  width: 100%;
  align-items: start;
}
.lp-how-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0;
  justify-content: flex-start;
}
.lp-how-num {
  display: none;
}
.lp-how-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(56,189,248,0.08);
  border: 1px solid rgba(56,189,248,0.18);
  color: var(--lp-cyan);
  margin-bottom: 1.5rem;
  font-size: 24px;
}
.lp-how-title {
  font-size: var(--fs-md);
  font-weight: 800;
  color: #f1f5f9;
  margin-bottom: 1rem;
}
.lp-how-desc {
  font-size: var(--fs-base);
  color: var(--lp-text-muted);
  line-height: 1.65;
}
.lp-how-conn {
  display: flex;
  align-items: center;
  padding-top: 3rem;
  flex-shrink: 0;
  width: 48px;
}
.lp-how-conn-line {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56,189,248,0.3), transparent);
}
.lp-how-cta {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}


/* =============================================================================
   COMPARISON SECTION
============================================================================= */
.lp-compare {
  padding: 5rem 0;
  background: var(--lp-surface);
  border-top: 1px solid var(--lp-border-dim);
  border-bottom: 1px solid var(--lp-border-dim);
  position: relative;
  overflow: hidden;
}
/* Soft ambient wash behind the heading band */
.lp-compare::before {
  content: "";
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: min(1000px, 90%);
  height: 55%;
  background: radial-gradient(ellipse at 50% 35%, rgba(56,189,248,0.055), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.lp-compare .lp-section-label,
.lp-compare .lp-section-h2,
.lp-compare-sub, .lp-compare-table {
  position: relative;
  z-index: 1;
}
.lp-compare-sub {
  font-size: var(--fs-md);
  color: var(--lp-text-muted);
  margin-top: 0.5rem;
  margin-bottom: 1.6rem;
}
.lp-compare-table table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}
.lp-compare-table th, .lp-compare-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  color: #e6eef8;
}
.lp-compare-table th {
  color: #93c5fd;
  font-weight: 700;
}
.lp-compare-table td:nth-child(2) { color: #94a3b8; }
.lp-compare-table td:nth-child(3) { color: #a7f3d0; font-weight: 700; }
.lp-compare-punch {
  margin: 1.6rem 0rem 1rem 0rem;
  font-weight: 500;
  color: #e6eef8;
}
..lp-compare-cta { margin-top: 1rem; }

/* Interaction & microcopy */
.lp-compare-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,0.03);
  transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms, background 180ms;
  transform: translateY(0);
}
.lp-compare-table tbody tr:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,0.012);
  box-shadow: 0 14px 40px rgba(2,6,23,0.35);
}

/* PRISM column shimmer (very subtle) */
.cmp-prism {
  position: relative;
  overflow: visible;
}
.cmp-prism::before {
  content: "";
  position: absolute;
  left: -10%; right: -10%; top: 0; bottom: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(59,130,246,0.00) 0%, rgba(59,130,246,0.04) 50%, rgba(59,130,246,0.00) 100%);
  transform: translateX(-120%);
  border-radius: 8px;
  opacity: 0.9;
  animation: cmp-shimmer 8s linear infinite;
}
@keyframes cmp-shimmer {
  0% { transform: translateX(-120%); }
  50% { transform: translateX(20%); }
  100% { transform: translateX(120%); }
}

/* gentle pulse for CTA to draw attention (slow and soft) */
.lp-compare-cta .lp-btn-primary {
  animation: pulse-slow 4.5s ease-in-out infinite;
}
@keyframes pulse-slow {
  0% { box-shadow: 0 8px 20px rgba(37,99,235,0.06); }
  50% { box-shadow: 0 18px 40px rgba(37,99,235,0.10); }
  100% { box-shadow: 0 8px 20px rgba(37,99,235,0.06); }
}

/* Comparison visuals */
.lp-compare-table {
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(2,6,23,0.45);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
}
.lp-compare-table table { width: 100%; border-collapse: separate; border-spacing: 0; }

/* Headers */
.lp-compare-table thead th {
  padding: 16px 20px;
  background: rgba(3,10,20,0.55);
  color: rgba(255,255,255,0.88);
  font-weight: 600;
  text-align: left;
}

/* Cells */
.lp-compare-table th, .lp-compare-table td {
  padding: 14px 20px;
  text-align: left;
  color: rgba(255,255,255,0.86);
  font-weight: 500; /* reduced weight for calm reading */
  font-size: var(--fs-md);
}

/* Row separators and subtle background */
.lp-compare-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.03); }
.lp-compare-table tbody tr:last-child { border-bottom: none; }

/* Dimmed Others column */
.lp-compare-table td.cmp-others, .lp-compare-table td.col-others {
  color: rgba(255,255,255,0.48);
  font-weight: 500;
}

/* PRISM column highlight — soft background and left accent */
.lp-compare-table td.cmp-prism, .lp-compare-table td.col-prism {
  color: var(--lp-primary);
  background: linear-gradient(90deg, rgba(59,130,246,0.04), rgba(59,130,246,0.01));
  font-weight: 600;
  border-left: 1px solid rgba(59,130,246,0.09);
  padding-left: 18px;
}

/* Icons sizing */
.lp-compare-table .cmp-icon, .lp-compare-table .cmp-icon-prism {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: 10px;
}

/* Hover: gentle elevation, but keep low contrast */
.lp-compare-table tbody tr { transition: transform 200ms ease, background 160ms ease; }
.lp-compare-table tbody tr:hover { transform: translateY(-6px); background: rgba(255,255,255,0.012); }

/* Reduce heavy weights on table-specific headings */
.lp-compare .lp-section-h2 { font-weight: 700; }
.lp-compare-punch { font-weight: 600; color: rgba(255,255,255,0.92); }

/* Make PRISM shimmer more subtle */
.cmp-prism::before { opacity: 0.6; }

/* =============================================================================
   TRADEOFFS SECTION
============================================================================= */
.lp-tradeoffs {
  padding: 6rem 0;
  background: var(--lp-surface);
  border-top: 1px solid var(--lp-border-dim);
  border-bottom: 1px solid var(--lp-border-dim);
  position: relative;
  overflow: hidden;
}
/* Decorative tree/branches pattern for decision flows - positioned at bottom right */
.lp-tradeoffs::before {
  content: "";
  position: absolute;
  bottom: -150px;
  right: -150px;
  width: 600px;
  height: 600px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 400"><defs><pattern id="branches" x="0" y="0" width="300" height="400" patternUnits="userSpaceOnUse"><line x1="150" y1="0" x2="150" y2="60" stroke="%2338bdf8" stroke-width="1" opacity="0.08"/><circle cx="150" cy="60" r="4" fill="%2338bdf8" opacity="0.1"/><line x1="150" y1="60" x2="75" y2="130" stroke="%2338bdf8" stroke-width="0.8" opacity="0.06"/><line x1="150" y1="60" x2="225" y2="130" stroke="%2338bdf8" stroke-width="0.8" opacity="0.06"/><circle cx="75" cy="130" r="3" fill="%2338bdf8" opacity="0.08"/><circle cx="225" cy="130" r="3" fill="%2338bdf8" opacity="0.08"/></pattern></defs><rect width="300" height="400" fill="url(%23branches)"/></svg>');
  background-size: 300px 400px;
  background-position: bottom right;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0.6;
  z-index: 0;
}
.lp-tradeoffs-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 1;
}
.lp-tradeoffs-h2 {
  font-size: var(--fs-2xxl);
  font-weight: 800;
  line-height: 1.2;
  color: #f1f5f9;
  margin-bottom: 1rem;
}
.lp-tradeoffs-sub {
  font-size: var(--fs-md);
  color: var(--lp-text-muted);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.lp-tradeoffs-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.lp-tradeoffs-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-md);
  color: #94a3b8;
}
.lp-tradeoffs-list li svg { color: var(--lp-cyan); flex-shrink: 0; }

/* Tradeoff panel */
.lp-tp {
  background: var(--lp-surface-2);
  border: 1px solid rgba(56,189,248,0.12);
  border-radius: var(--lp-radius-lg);
  overflow: hidden;
  box-shadow: 0 0 50px rgba(59,130,246,0.07);
}
.lp-tp-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: rgba(0,0,0,0.2);
}
.lp-tp-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #94a3b8;
  font-family: var(--lp-mono);
}
.lp-tp-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lp-cyan);
  background: rgba(56,189,248,0.1);
  border: 1px solid rgba(56,189,248,0.2);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
}
.lp-tp-decision {
  padding: 1rem 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.lp-tp-decision-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lp-text-dim);
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.lp-tp-decision-text {
  font-size: var(--fs-sm);
  color: #cbd5e1;
  font-style: italic;
  line-height: 1.5;
}
.lp-tp-consequence { padding: 1rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,0.04); }
.lp-tp-consequence-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lp-text-dim);
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.lp-tp-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.55rem;
  font-size: var(--fs-xs);
  color: var(--lp-text-muted);
}
.lp-tp-row span:first-child { width: 110px; flex-shrink: 0; }
.lp-tp-bar-wrap {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.lp-tp-bar {
  height: 100%;
  border-radius: 2px;
  transition: width 1s ease;
}
.lp-tp-bar--red    { background: linear-gradient(90deg, #f87171, #ef4444); }
.lp-tp-bar--orange { background: linear-gradient(90deg, #fb923c, #f97316); }
.lp-tp-val { font-family: var(--lp-mono); font-size: var(--fs-xss); width: 52px; text-align: right; flex-shrink: 0; }
.lp-tp-val--red    { color: var(--lp-fail-red); }
.lp-tp-val--orange { color: var(--lp-warn-orange); }
.lp-tp-suggestion {
  padding: 0.85rem 1.1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: var(--fs-xs);
  color: var(--lp-text-muted);
  line-height: 1.55;
  background: rgba(56,189,248,0.03);
}
.lp-tp-suggestion svg { color: var(--lp-cyan); flex-shrink: 0; margin-top: 2px; }


/* =============================================================================
   PRISM FRAMEWORK SECTION
============================================================================= */
.lp-framework {
  padding: 6rem 0;
  background: var(--lp-bg);
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Decorative pipeline/flow pattern - positioned at top left only */
.lp-framework::before {
  content: "";
  position: absolute;
  top: -150px;
  left: -150px;
  width: 600px;
  height: 400px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200"><defs><pattern id="pipeline" x="0" y="0" width="300" height="200" patternUnits="userSpaceOnUse"><line x1="0" y1="100" x2="300" y2="100" stroke="%2338bdf8" stroke-width="0.8" opacity="0.06" stroke-dasharray="8,16"/><circle cx="30" cy="100" r="8" fill="%2338bdf8" opacity="0.08"/><circle cx="90" cy="100" r="8" fill="%2338bdf8" opacity="0.08"/><circle cx="150" cy="100" r="8" fill="%2338bdf8" opacity="0.08"/><circle cx="210" cy="100" r="8" fill="%2338bdf8" opacity="0.08"/><circle cx="270" cy="100" r="8" fill="%2338bdf8" opacity="0.08"/></pattern></defs><rect width="300" height="200" fill="url(%23pipeline)"/></svg>');
  background-size: 300px 200px;
  background-position: top left;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0.6;
  z-index: 0;
}
.lp-framework .lp-section-label,
.lp-framework .lp-section-h2,
.lp-framework .lp-section-sub {
  margin: 0 auto 3rem;
  position: relative;
  z-index: 1;
}
.lp-framework-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  position: relative;
  z-index: 1;
}
.lp-fw-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: clamp(1.4rem, 1.8vw, 2.2rem) clamp(1.2rem, 1.6vw, 2rem);
  border-radius: var(--lp-radius);
  background: var(--lp-surface);
  border: 1px solid var(--lp-border-dim);
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.lp-fw-card:hover {
  border-color: rgba(56,189,248,0.3);
  box-shadow: 0 4px 24px rgba(56,189,248,0.07);
  transform: translateY(-3px);
}
.lp-fw-letter {
  font-size: var(--fs-xxl);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, var(--lp-cyan), var(--lp-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.lp-fw-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.lp-fw-body strong {
  font-size: calc(var(--fs-md) + 2px);
  font-weight: 700;
  color: #e2e8f0;
  display: block;
}
.lp-fw-body span {
  font-size: var(--fs-sm);
  color: #55adff;
  line-height: 1.5;
}


/* =============================================================================
   LOGO MARQUEE
============================================================================= */
.lp-logos {
  padding: 3.5rem 0;
  background: var(--lp-surface);
  border-top: 1px solid var(--lp-border-dim);
  border-bottom: 1px solid var(--lp-border-dim);
  overflow: hidden;
}
.lp-logos-label {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lp-text-dim);
  margin-bottom: 2rem;
}
.logo-marquee-outer {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.logo-marquee-track {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  width: max-content;
  animation: lp-marquee 28s linear infinite;
}
@keyframes lp-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee-track { animation: none; }
}
.logo-item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 0.55;
  transition: opacity 0.2s;
  filter: grayscale(0.3);
}
.logo-item:hover { opacity: 0.85; }
.logo-google svg { width: 68px; height: auto; }
.logo-netflix { font-size: var(--fs-lg); font-weight: 900; letter-spacing: -0.02em; color: #e50914; font-family: 'Inter',sans-serif; }
.logo-amazon { display: flex; flex-direction: column; gap: 0; align-items: flex-start; }
.az-word { font-size: var(--fs-subhead); font-weight: 800; color: #fff; line-height: 1; letter-spacing: -0.01em; }
.az-smile { width: 52px; height: 8px; display: block; margin-top: -1px; }
.logo-microsoft { display: flex; align-items: center; gap: 0.4rem; }
.ms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 18px; height: 18px; }
.ms-grid span { display: block; }
.ms-wordmark { font-size: var(--fs-sm); font-weight: 500; color: #fff; letter-spacing: -0.01em; }
.logo-apple { font-size: var(--fs-xl); color: #fff; font-family: 'Inter', sans-serif; }
.logo-delta { display: flex; align-items: center; gap: 0.4rem; }
.delta-tri { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 13px solid #003366; }
.delta-text { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; color: #fff; }
.logo-paytm { display: flex; align-items: center; }
.pay-box { background: #002970; color: #fff; font-size: var(--fs-sm); font-weight: 700; padding: 1px 4px; border-radius: 2px; }
.tm-text { color: #00b9f5; font-size: var(--fs-sm); font-weight: 700; }
.logo-sabre { font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.1em; color: #e02020; }


/* =============================================================================
   FINAL CTA
============================================================================= */
.lp-final {
  position: relative;
  padding: 7rem 0;
  background: var(--lp-bg);
  text-align: center;
  overflow: hidden;
}
.lp-final-glow {
  position: absolute;
  bottom: -150px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 400px;
  background: radial-gradient(ellipse at center, rgba(59,130,246,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.lp-final-inner {
  position: relative;
  z-index: 1;
}
.lp-final-h2 {
  font-size: var(--fs-2xxl);
  font-weight: 900;
  color: #f8fafc;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.lp-final-sub {
  font-size: var(--fs-subhead);
  color: var(--lp-text-muted);
  margin-bottom: 2.5rem;
}
.lp-final-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.lp-final-note {
  font-size: var(--fs-sm);
  color: var(--lp-text-dim);
}


/* =============================================================================
   FOOTER
============================================================================= */
.l-page {
  max-width: var(--lp-container);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.landing-footer {
  background: #060b14;
  border-top: 1px solid var(--lp-border-dim);
}
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  padding: 4rem 1.5rem 3rem;
}
.footer-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  margin-bottom: 1rem;
}
.footer-logo-img {
  width: 150px;
  height: 150px;
  object-fit: contain;
}

.footer-tagline {
  font-size: var(--fs-sm);
  color: var(--lp-text-muted);
  line-height: 1.6;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.footer-col-heading {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #d1d8e3;
  margin-bottom: 0.3rem;
}
.footer-col a {
  font-size: var(--fs-sm);
  color: #6c7f9a;
  text-decoration: none;
  transition: color 0.15s;
}
.footer-col a:hover { color: #94a3b8; }
.footer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.04);
  font-size: var(--fs-xs);
  color: #7199d0;
}
.footer-bar-right { color: #7199d0;
font-size: var(--fs-xs);    }


/* =============================================================================
   DECORATIVE SVG FLOATERS
   Placed in the heading-band gutters so they never sit under cards or tables.
============================================================================= */
.lp-floater {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
  will-change: transform;
}

/* ── FAILURES ── */
.lp-floater-1 {            /* latency curve */
  width: 250px;
  height: 160px;
  top: 16%;
  left: 3%;
  opacity: 0.6;
  animation: lp-drift 16s ease-in-out infinite;
}
.lp-floater-2 {            /* storage stack */
  width: 128px;
  height: 156px;
  top: 11%;
  right: 4.5%;
  opacity: 0.5;
  animation: lp-drift 19s ease-in-out infinite reverse;
}
.lp-floater-5 {            /* saturation arc */
  width: 190px;
  height: 190px;
  bottom: 9%;
  left: -3.5%;
  opacity: 0.4;
  animation: lp-drift 22s ease-in-out infinite;
}

/* ── COMPARE ── */
.lp-floater-3 {            /* PRISM mark */
  width: 176px;
  height: 176px;
  top: 9%;
  right: 5%;
  opacity: 0.6;
  animation: lp-drift 18s ease-in-out infinite;
}
.lp-floater-6 {            /* signal lattice */
  width: 200px;
  height: 152px;
  top: 15%;
  left: 4%;
  opacity: 0.5;
  animation: lp-drift 21s ease-in-out infinite reverse;
}

@keyframes lp-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -10px, 0); }
}

.lp-failures,
.lp-compare {
  position: relative;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .lp-floater { animation: none; }
}

/* Not enough gutter space to place them cleanly on smaller screens */
@media (max-width: 1400px) {
  .lp-floater-5 { display: none; }
  .lp-floater-1 { width: 200px; height: 128px; left: 1%; opacity: 0.45; }
  .lp-floater-6 { width: 160px; height: 122px; left: 1.5%; opacity: 0.4; }
  .lp-floater-2 { right: 1.5%; opacity: 0.4; }
  .lp-floater-3 { right: 1.5%; width: 148px; height: 148px; opacity: 0.45; }
}
@media (max-width: 1100px) {
  .lp-floater { display: none; }
}


/* =============================================================================
   RESPONSIVE
============================================================================= */
@media (max-width: 1024px) {
  .lp-hero-inner { grid-template-columns: 1fr; gap: 3rem; }
  .lp-hero-h1 { font-size: var(--fs-2xl); }
  .lp-hero-sim { max-width: min(600px, 100%); }
  .lp-how-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .lp-how-conn { display: none; }
  .lp-tradeoffs-inner { grid-template-columns: 1fr; gap: 3rem; }
  .lp-failures-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  :root {
    --lp-container: clamp(280px, 92vw, 480px);
  }

  .lp-container { padding: 0 0.75rem; }

  /* Extremely compact layouts */
  .lp-hero { padding: 2rem 0 1.5rem; }
  .lp-hero-h1 {
    font-size: clamp(1.5rem, 5vw, 1.75rem);
  }
  .lp-btn {
    padding: 0.6rem 1.2rem;
    font-size: var(--fs-sm);
  }
  .lp-btn-xl {
    padding: 0.7rem 1.4rem;
  }

  .lp-section-h2 {
    font-size: clamp(1.25rem, 4vw, 1.5rem);
    margin-bottom: 1rem;
  }
  .lp-section-sub {
    margin-bottom: 1.5rem;
  }

  /* Stack framework items in single column on very small screens */
  .lp-framework-grid {
    grid-template-columns: 1fr;
  }

  /* Hide unnecessary decorations */
  .lp-grid-bg {
    background-size: 24px 24px;
    opacity: 0.5;
  }
}

@media (max-width: 700px) {
  :root {
    --lp-container: clamp(320px, 90vw, 700px);
  }

  .lp-container { padding: 0 1rem; }

  /* ── Hero Section ──────────────────────────────────────────────────────── */
  .lp-hero {
    padding: 3rem 0 2rem;
    min-height: unset;
  }
  .lp-hero-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .lp-hero-h1 {
    font-size: clamp(1.75rem, 6vw, 2.2rem);
    margin-bottom: 1rem;
  }
  .lp-hero-sub {
    width: 100%;
    max-width: 100%;
    font-size: var(--fs-md);
    margin-bottom: 1.5rem;
  }
  .lp-eyebrow { margin-bottom: 1rem; }
  .lp-hero-sim {
    max-width: 100%;
    width: 100%;
  }
  .lp-hero-actions {
    flex-direction: column;
    gap: 0.6rem;
  }
  .lp-btn {
    justify-content: center;
    width: 100%;
  }
  .lp-hero-note { margin-top: 1rem; }

  /* ── Section Typography ────────────────────────────────────────────────── */
  .lp-section-label {
    font-size: var(--fs-micro);
    margin-bottom: 0.75rem;
  }
  .lp-section-h2 {
    font-size: clamp(1.5rem, 5vw, 2rem);
    margin-bottom: 1.25rem;
  }
  .lp-section-sub {
    width: 100%;
    max-width: 100%;
    font-size: var(--fs-base);
    margin-bottom: 2rem;
    text-align: center;
  }

  /* ── Failures Section ──────────────────────────────────────────────────– */
  .lp-failures { padding: 3rem 0; }
  .lp-failures-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .lp-failure-card { padding: 1.25rem; }

  /* ── How It Works ──────────────────────────────────────────────────────── */
  .lp-how { padding: 3rem 0; }
  .lp-how-steps {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .lp-how-conn { display: none; }
  .lp-how-step {
    padding: 0;
  }
  .lp-how-icon-wrap {
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    font-size: 20px;
  }
  .lp-how-title {
    font-size: var(--fs-subhead);
  }
  .lp-how-desc {
    font-size: var(--fs-sm);
  }

  /* ── Comparison Section ────────────────────────────────────────────────── */
  .lp-compare { overflow-x: auto; }
  .lp-compare-table {
    font-size: var(--fs-xs);
    width: 100%;
  }

  /* ── Tradeoffs Section ────────────────────────────────────────────────── */
  .lp-tradeoffs { padding: 3rem 0; }
  .lp-tradeoffs-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .lp-tradeoff-group { margin-bottom: 1.5rem; }

  /* ── Framework Section ─────────────────────────────────────────────────── */
  .lp-framework { padding: 3rem 0; }
  .lp-framework-grid {
    gap: 0.5rem;
    grid-template-columns: repeat(2, 1fr);
  }
  .lp-fw-card {
    padding: 1rem;
    gap: 0.5rem;
    font-size: var(--fs-xs);
  }
  .lp-fw-letter {
    font-size: clamp(1.5rem, 4vw, 1.75rem);
    width: 48px;
    height: 48px;
  }
  .lp-fw-body {
    flex: 1;
    min-width: 0;
  }
  .lp-fw-body strong {
    font-size: var(--fs-xs);
    display: block;
  }
  .lp-fw-body span {
    font-size: 11px;
    line-height: 1.3;
  }

  /* ── Logo Marquee ──────────────────────────────────────────────────────– */
  .lp-marquee {
    padding: 2.5rem 0;
  }
  .lp-marquee-track {
    gap: 1.5rem;
  }
  .lp-marquee-item {
    width: auto;
    max-width: 120px;
  }

  /* ── Final CTA Section ────────────────────────────────────────────────── */
  .lp-final {
    padding: 3rem 0 2.5rem;
  }
  .lp-final-h2 {
    font-size: clamp(1.5rem, 5vw, 1.75rem);
    margin-bottom: 1rem;
  }
  .lp-final-sub {
    font-size: var(--fs-base);
    margin-bottom: 1.5rem;
  }
  .lp-final-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }
  .lp-final-actions .lp-btn {
    width: 100%;
  }

  /* ── Footer ────────────────────────────────────────────────────────────– */
  .footer-section {
    padding: 2.5rem 0 1.5rem;
  }
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 0 1rem;
  }
  .footer-brand-col { grid-column: unset; }
  .footer-col h3 {
    font-size: var(--fs-md);
    margin-bottom: 0.75rem;
  }
  .footer-col a {
    font-size: var(--fs-sm);
    display: block;
    margin-bottom: 0.5rem;
  }
  .footer-bar {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
    font-size: var(--fs-xs);
    padding: 0 1rem;
  }

  /* ── Decorative Elements ───────────────────────────────────────────────– */
  .lp-grid-bg {
    background-size: 32px 32px;
  }
  .lp-hero-glow {
    width: min(100vw, 100%);
    height: 60vh;
    top: -80px;
  }
}

/* ── css/shared/header.css ── */
/* ═══════════════════════════════════════════════════════════════════════════
   header.css — PRISM unified header + navbar styles  (v3 — refined)
   Covers: app_navbar.html — the single navbar used on every page
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────────────────────────────── */
:root {
  --bg-primary:      #0D1117;
  --bg-surface:      #111827;
  --bg-elevated:     #1a2540;
  --border:          rgba(255,255,255,0.08);
  --border-strong:   rgba(255,255,255,0.12);
  --accent-blue:     #4F6EF7;
  --accent-blue-dim: rgba(79,110,247,0.12);
  --accent-purple:   #7C6AF7;
  --text-primary:    #f1f5f9;
  --text-secondary:  #8faac8;
  --text-muted:      #4e6280;
  --radius-btn:      8px;
  --radius-card:     12px;
  --radius-dropdown: 10px;
  --nav-height:      65px;    /* matches --topbar-height in style.css */
  --brand-height:    65px;   /* matches --header-height in style.css (logo is 36px) */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --transition:      140ms var(--ease-in-out);
  --transition-slow: 240ms var(--ease-out);
}

/* app_navbar.html (avatar chip, avatar image, notif badge, admin-only tabs,
   mobile sub-menus, ...) relies on this utility for its default-hidden state.
   Pages that load header.css without also loading base/style.css — which is
   where this class normally lives — need it defined here instead. */
.hidden { display: none !important; }

/* app_navbar.html also carries the interview-session bar (#im-toolbar). It
   stays hidden on every page; interview-mode.css shows it during an
   interview with the more specific `body.eval-interview-active #im-toolbar`. */
#im-toolbar { display: none; }

/* Signed-in / signed-out visibility helpers (set via html[data-logged-in]). */
.logged-in-only  { display: none !important; }
.logged-out-only { display: inline-flex; }
html[data-logged-in] .logged-in-only  { display: inline-flex !important; }
html[data-logged-in] .logged-out-only { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   APP NAVBAR — ROW 1: Brand bar
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Removed: .an-brand-bar / .an-brand-left / .an-brand-link / .an-brand-logo
   / .an-brand-name / .an-brand-right  — superseded by .an-toolbar layout.    */

/* Notification bell */
.an-notif-wrap { position: relative; }

.an-notif-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px;
  border-radius: 7px;
  color: var(--text-secondary);
  transition: color var(--transition), background var(--transition), box-shadow var(--transition);
  position: relative;
}

.an-notif-btn:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.06);
}

.an-notif-btn:focus-visible {
  outline: 2px solid rgba(79,110,247,0.5);
  outline-offset: 2px;
}

.an-notif-icon { width: 18px; height: 18px; }

/* Feedback button */
.an-feedback-btn {
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  background: none;
  /* padding: 5px; */
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: border-color var(--transition), color var(--transition),
              background var(--transition), box-shadow var(--transition),
              transform var(--transition);
}

.an-feedback-btn:hover {
  border-color: rgba(79,110,247,0.5);
  color: var(--text-primary);
  background: rgba(79,110,247,0.06);
  box-shadow: 0 0 0 1px rgba(79,110,247,0.1);
}

.an-feedback-btn:active { transform: scale(0.97); }

/* Streak chip */
.an-streak-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px 0 2px;
  background: none;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-family: inherit;
  transition: background 140ms;
  text-decoration: none;
  color: #94a3b8;
}
.an-streak-chip:hover { background: rgba(249, 115, 22, 0.1); color: #fb923c; }
.an-streak-fire {
  flex-shrink: 0;
  display: block;
}
.an-streak-count {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: inherit;
  min-width: 14px;
  text-align: left;
  transition: color 200ms;
}
.an-streak-chip[data-active="true"] {
  color: #fb923c;
}
.an-streak-chip[data-active="true"]:hover {
  background: rgba(249, 115, 22, 0.12);
}

/* Avatar */
.an-avatar-wrap { position: relative; }

.an-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-blue);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  border: 2px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.an-avatar:hover {
  border-color: rgba(79,110,247,0.6);
  box-shadow: 0 0 0 3px rgba(79,110,247,0.18);
  transform: scale(1.05);
}

/* MVP badge */
.an-mvp-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px 8px;
  text-transform: uppercase;
}

/* ── Profile dropdown ────────────────────────────────────────────────── */
.an-profile-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 230px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-dropdown);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.08),
    0 16px 40px rgba(0,0,0,0.12);
  z-index: 300;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
  transform-origin: top right;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
  pointer-events: none;
}

.an-profile-dropdown.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.an-pd-header {
  padding: 12px 16px 10px;
  border-bottom: 1px solid #f1f5f9;
}

.an-pd-username {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

.an-pd-section { padding: 4px 6px; }

.an-pd-item {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  padding: 9px 12px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #1e293b;
  background: none;
  border: none;
  border-radius: 7px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  text-align: left;
  font-family: inherit;
}

.an-pd-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.an-pd-item--danger { color: #ef4444; }

.an-pd-item--danger:hover {
  background: #fef2f2;
  color: #dc2626;
}

.an-pd-icon {
  width: 28px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: #64748b;
}

.an-pd-item--danger .an-pd-icon { color: #ef4444; }
.an-pd-item--danger:hover .an-pd-icon { color: #dc2626; }

.an-pd-divider {
  height: 1px;
  background: #f1f5f9;
  margin: 3px 0;
}

/* Admin badge inside dropdown */
.an-admin-badge {
  margin-left: auto;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  background: rgba(99,102,241,0.08);
  color: #6366f1;
  padding: 2px 7px;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   APP NAVBAR — ROW 2: Nav bar
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Removed: .an-nav-bar and all .an-nav-left / .an-nav-home / .an-nav-btn /
   .an-nav-file-wrap / .an-file-dropdown / .an-fd-item / .an-fd-divider /
   .an-nav-center / .an-nav-right rules — superseded by .an-toolbar layout.
   Tab + dropdown styles for the new layout live further below.            */

/* CENTER tabs */
.an-tabs {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px;
  overflow: visible;
}

.an-tab {
  font-size: var(--fs-base);
  font-weight: 500;
  font-family: inherit;
  color: #7e9fc4;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  border: none;
  background: none;
  border-radius: 8px;
  padding: 10px 16px;
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.an-tab:hover {
  color: #c8ddf0;
  font-weight: 600;
  background: none;
  transform: none;
}

.an-tab:active { transform: scale(0.97); }

.an-tab.active,
.an-tab.tsw-active {
  font-weight: 700;
  color: #fff;
}

/* Active: thin bottom border only */
.an-tab.active::after,
.an-tab.tsw-active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 1.5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.5);
}

/* ── Removed: .an-nav-right block (margin/dropdown/menu-item) and the
   .an-brand-right .button auth-button styles — both scoped to dead wrappers
   (.an-nav-right / .an-brand-right) that were replaced by .an-toolbar.    */

/* ═══════════════════════════════════════════════════════════════════════════
   FOCUS VISIBLE — keyboard accessibility
   ═══════════════════════════════════════════════════════════════════════════ */

.an-tab:focus-visible,
.an-nav-btn:focus-visible,
.an-fd-item:focus-visible,
.an-pd-item:focus-visible {
  outline: 2px solid rgba(79,110,247,0.6);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   UNIFIED APPLICATION TOOLBAR  (replaces .an-brand-bar + .an-nav-bar)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Override global layout variables when toolbar is present ─────────── */
:root:has(.an-toolbar) {
  --header-height: 0px;
  --topbar-height: 64px;  /* must match --nav-h (ONE NAVBAR SPEC at the end) */
  --wab-height: 0px;       /* Workspace Action Bar — 0 unless overridden per-mode */
}
/* WAB is visible in practice + learn modes — claim its height in layout calc */
body.practice-mode,
body.learn-mode-active,
body.roadmap-mode {
  --wab-height: 48px;
}

/* ── Toolbar shell ────────────────────────────────────────────────────── */
.an-toolbar {
  position: sticky;
  top: 0;
  z-index: 200;
  width: 100%;
  height: 65px;
  min-height: 65px;
  background: #172340;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 0;
}

/* Accent line removed — clean flat header */
.an-toolbar::before {
  display: none;
}

/* ── LEFT region ──────────────────────────────────────────────────────── */
.an-tl-left {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  min-width: 0;
}

/* Logo */
.an-tl-logo-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
  padding: 0 4px;
  border-radius: 6px;
  transition: opacity var(--transition);
}

.an-tl-logo-link:hover { opacity: 0.82; }

.an-tl-logo {
  height: 36px;
  width: auto;
  display: block;
  flex-shrink: 0;
  zoom: 1.3;
}

/* Brand text next to logo */
.an-tl-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.an-tl-brand-name {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #f1f5f9;
  white-space: nowrap;
}

.an-tl-brand-sub {
  font-size: 12px;
  font-weight: 500;
  color: rgba(148, 163, 184, 0.9);
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: -0.02rem;
}

/* Thin vertical separator between logo and workspace */
.an-tl-sep {
  width: 1px;
  height: 20px;
  background: var(--border-strong);
  margin: 0 8px;
  flex-shrink: 0;
}

/* ── CENTER region ────────────────────────────────────────────────────── */
.an-tl-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  pointer-events: none; /* let children handle events */
}

.an-tl-center > * {
  pointer-events: auto;
}

/* The .an-tabs already has styles — just tighten them for toolbar context */
.an-toolbar .an-tabs {
  background: transparent;  
  border-color: transparent;
  padding: 2px;
}

.an-toolbar .an-tab {
  padding: 10px;
  font-size: var(--fs-md);
  font-weight: 500;
}

/* ── RIGHT region ─────────────────────────────────────────────────────── */
.an-tl-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* All direct .menu children in the right region need relative positioning for dropdowns */
.an-tl-right .menu {
  position: relative;
}

/* Generic icon button (Help, Notifications when bare) */
.an-tl-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background var(--transition), color var(--transition);
  position: relative;
  flex-shrink: 0;
}

.an-tl-icon-btn:hover {
  background: rgba(255,255,255,0.07);
  color: var(--text-primary);
}

/* Primary CTA — Simulate */
.an-tl-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-blue);
  border: 1px solid var(--accent-blue);
  border-radius: 7px;
  padding: 5px 13px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(79,110,247,0.28);
  transition: background var(--transition), box-shadow var(--transition),
              transform var(--transition), border-color var(--transition);
}

.an-tl-cta:hover {
  background: #3d5ae0;
  border-color: #3d5ae0;
  box-shadow: 0 0 16px rgba(79,110,247,0.4), 0 2px 8px rgba(0,0,0,0.3);
  transform: translateY(-1px);
}

.an-tl-cta:active {
  transform: scale(0.97) translateY(0);
  box-shadow: none;
}

.an-tl-cta-icon {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  fill: #fff;
}

/* Thin vertical divider between right action groups */
.an-tl-vsep {
  width: 1px;
  height: 18px;
  background: var(--border-strong);
  margin: 0 4px;
  flex-shrink: 0;
}

/* ── Help dropdown ────────────────────────────────────────────────────── */
.an-help-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: #0f1c2e;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-dropdown);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.3),
    0 16px 48px rgba(0,0,0,0.5);
  z-index: 400;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px) scale(0.975);
  transform-origin: top right;
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
  pointer-events: none;
  padding: 6px;
}

.an-help-dropdown.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Override notif-btn on the toolbar to use icon-btn sizing */
.an-toolbar .an-notif-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 7px;
}

/* ── Toolbar focus-visible ────────────────────────────────────────────── */
.an-tl-icon-btn:focus-visible,
.an-tl-cta:focus-visible {
  outline: 2px solid rgba(79,110,247,0.6);
  outline-offset: 2px;
}

/* ── Auth buttons in toolbar context ─────────────────────────────────── */
.an-tl-right .button.ghost {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: #cbd5e1;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition);
}

.an-tl-right .button.ghost:hover {
  background: rgba(255,255,255,0.11);
  border-color: rgba(255,255,255,0.22);
  color: #f1f5f9;
}

.an-tl-right .button.primary {
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 8px;
  background: var(--accent-blue);
  border: 1px solid transparent;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 2px 10px rgba(79,110,247,0.3);
  transition: background var(--transition), box-shadow var(--transition),
              transform var(--transition);
}

.an-tl-right .button.primary:hover {
  background: #3d5ae0;
  box-shadow: 0 0 16px rgba(79,110,247,0.4);
  transform: translateY(-1px);
}

/* ── Profile dropdown — anchor to right from toolbar ─────────────────── */
.an-toolbar .an-profile-dropdown {
  top: calc(100% + 8px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHARED SIMPLE HEADER  (.header from style.css)
   Extra modifier + page-layout helpers used by standalone pages
   that include _header.html (feedback, legacy pages, etc.)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Wide-padding variant used by _header.html on non-canvas pages.
   Overrides style.css's default `padding: 0 1.4rem` with the wider 45px
   gutter that was previously written as an inline style on the <header>. */
.header--wide {
  padding: 0 45px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE-LEVEL LAYOUT HELPERS
   Body-class scoped rules that were previously written as inline <style>
   blocks inside individual templates. Centralising them here means every
   standalone page that loads header.css gets them for free.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Roadmap standalone page — fills viewport below the toolbar */
body.page-roadmap {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.page-roadmap .an-toolbar {
  flex-shrink: 0;
}

body.page-roadmap #roadmap-view {
  flex: 1;
  min-height: 0;
  overflow: hidden;   /* inner panels scroll individually */
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAVBAR — Evaluate dropdown menu
   Lives here (not in live-interview.css) because app_navbar.html is
   included on every page that mounts the top bar. Without these rules
   the dropdown would render unhidden with 100 %-sized SVG icons on any
   page that doesn't ship live-interview.css (profile, roadmap, etc.).
   ═══════════════════════════════════════════════════════════════════════════ */
.li-eval-dropdown-menu {
  position: fixed;
  z-index: 9999;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  min-width: 240px;
  padding: 6px;
  display: none;
}
.li-eval-dropdown-menu.open { display: block; }
.li-eval-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #475569;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  text-decoration: none;
}
.li-eval-dropdown-item:hover { background: #f1f5f9; color: #0f172a; }
a.li-eval-dropdown-item,
a.li-eval-dropdown-item:visited { color: #475569; text-decoration: none; }
a.li-eval-dropdown-item:hover { color: #0f172a; }
.li-eval-dropdown-item svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
}
.li-eval-dropdown-badge {
  margin-left: auto;
  padding: 2px 6px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: 999px;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAVBAR SPEC — app_navbar.html is the only navbar (landing, marketing and
   app pages alike). Phones keep their compact header heights (responsive.css);
   from tablet width up the bar is exactly --nav-h and the app layout's
   --topbar-height follows it.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --nav-h: 64px;
  --nav-bg: #172340;
  --nav-pad-x: 24px;
  --nav-logo-h: 40px;
  --nav-link: #8faac8;
  --nav-link-hover-bg: rgba(255, 255, 255, 0.06);
}
.an-toolbar {
  background: var(--nav-bg) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0 var(--nav-pad-x) !important;
}
@media (min-width: 768px) and (min-height: 501px) {
  :root { --topbar-height: var(--nav-h) !important; }
  .an-toolbar { height: var(--nav-h) !important; min-height: var(--nav-h) !important; }
}
.an-toolbar .an-tl-logo { height: var(--nav-logo-h) !important; width: auto !important; zoom: 1 !important; }
.an-tl-logo-link { padding: 0; }
.an-toolbar .an-tabs { gap: 4px; padding: 0; }
.an-toolbar .an-tab.tsw-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 8px;
  font-size: var(--t-heading); font-weight: 500; line-height: 1; color: var(--nav-link); background: transparent;
}
.an-toolbar .an-tab.tsw-btn:hover { color: #fff; background: var(--nav-link-hover-bg); }
.an-toolbar .an-tab.tsw-btn.active { color: #fff; }
.nav-chevron { flex: none; opacity: 0.8; transition: transform 150ms; }
.an-toolbar .an-tab.tsw-btn[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }

/* ── Level-up card (js/shared/xp.js) ─────────────────────────────────────── */
.xp-levelup {
  position: fixed; right: 24px; bottom: 24px; z-index: 100001; display: flex; align-items: center; gap: 14px;
  width: min(380px, calc(100vw - 32px)); padding: 16px 16px 16px 18px; border-radius: 14px;
  background: #172340; border: 1px solid rgba(129, 140, 248, 0.45); box-shadow: 0 20px 50px rgba(2, 6, 23, 0.45);
  color: #f1f5f9; font-family: 'Inter', system-ui, sans-serif;
  opacity: 0; transform: translateY(12px); transition: opacity 220ms, transform 220ms;
}
.xp-levelup.is-in { opacity: 1; transform: none; }
.xp-levelup-badge {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px;
  background: var(--xp-color, #4f46e5); color: #fff; font-size: var(--t-title); font-weight: 800;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}
.xp-levelup-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.xp-levelup-eyebrow { font-size: var(--t-caption); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #a5b4fc; }
.xp-levelup-title { font-size: var(--t-heading); font-weight: 700; color: #fff; }
.xp-levelup-next { font-size: var(--t-small); color: #94a3b8; }
.xp-levelup-close {
  flex: none; align-self: flex-start; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 6px;
  background: transparent; color: #94a3b8; cursor: pointer;
}
.xp-levelup-close:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

/* ── css/shared/responsive.css ── */
/* ═══════════════════════════════════════════════════════════════════════════
   PRISM — Responsive Layer
   ═══════════════════════════════════════════════════════════════════════════
   Mobile-first responsive overrides. Layered ON TOP of existing desktop CSS.
   Does NOT rewrite existing rules — adds breakpoint-specific adjustments.

   Breakpoints:
     Mobile:        0 – 767px
     Tablet:        768 – 1023px
     Desktop:       1024px+        (existing styles, mostly untouched)
     Large Desktop: 1440px+

   Load order: AFTER all other stylesheets (last in <head>).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Responsive utility variables ──────────────────────────────────────────── */
:root {
  --panel-transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --touch-min: 44px;
  --mobile-header-h: 48px;
  --sheet-radius: 16px;
}

/* Hidden by default; enabled only on mobile */
.an-mobile-mode-btn,
.an-mobile-mode-menu,
.an-mobile-mode-label {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — 0 to 767px
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) {

  /* ── Body / Root ──────────────────────────────────────────────────────── */
  :root {
    --topbar-height: 62px;
    --header-height: 0px;
    --wab-height: 62px;
    --footer-height: 0px;
    --footer-gap: 0px;
  }

  :root:has(.an-toolbar) {
    --topbar-height: 62px;
    --header-height: 0px;
  }
  body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  /* ── Toolbar / Navbar ─────────────────────────────────────────────────── */
  .an-toolbar {
    height: 62px;
    min-height: 62px;
    padding: 0 8px;
    gap: 4px;
  }

  /* Logo centred in the bar */
  .an-tl-left {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .an-tl-brand-text {
    display: none; /* Hide "PRISM / Design Canvas" text on mobile */
  }

  .an-tl-logo {
    width: 55px;
    height: 55px;
  }

  /* Mode switcher tabs hidden, center is empty spacer */
  .an-tl-center {
    display: flex;
    flex: 1;
    min-width: 0;
  }
  .an-tl-center .an-tabs { display: none; }
  .an-tl-center::-webkit-scrollbar { display: none; }

  /* Mode label sits next to logo in the left section */
  .an-mobile-mode-label {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: #f1f5f9;
    text-transform: capitalize;
    letter-spacing: 0.01em;
  }

  .an-mobile-mode-menu {
    position: fixed;
    top: calc(var(--topbar-height) + 6px);
    left: 10px;
    width: min(260px, calc(100vw - 20px));
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    border-radius: 12px;
    background: #0f1d3b;
    border: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow: 0 12px 30px rgba(2, 6, 23, 0.45);
    z-index: 1300;
  }
  .an-mobile-mode-menu[hidden] {
    display: none !important;
  }
  .an-mobile-mode-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 40px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #dbeafe;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 0 10px;
    text-align: left;
  }
  .an-mobile-mode-item.an-mobile-has-sub {
    justify-content: space-between;
  }
  .an-mobile-chevron {
    transition: transform 0.2s ease;
    opacity: 0.6;
  }
  .an-mobile-has-sub.expanded .an-mobile-chevron {
    transform: rotate(90deg);
    opacity: 1;
  }
  .an-mobile-mode-item:active,
  .an-mobile-mode-item:hover {
    background: rgba(79, 110, 247, 0.22);
  }

  /* Sub-menu items (nested under Practice / Evaluate) */
  .an-mobile-sub-menu {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-left: 14px;
    margin-bottom: 2px;
  }
  .an-mobile-sub-menu[hidden] {
    display: none;
  }
  .an-mobile-sub-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 36px;
    border: none;
    border-radius: 6px;
    background: rgba(79, 110, 247, 0.08);
    color: #93c5fd;
    font-size: 13px;
    font-weight: 500;
    padding: 0 12px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }
  .an-mobile-sub-item:active,
  .an-mobile-sub-item:hover {
    background: rgba(79, 110, 247, 0.22);
    color: #fff;
  }

  .an-tabs {
    flex-wrap: nowrap;
    gap: 2px;
    padding: 0 4px;
  }

  .an-tab {
    font-size: 14px;
    font-weight: 500;
    padding: 10px 14px;
    white-space: nowrap;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Right section — even spacing between icons */
  .an-tl-right {
    gap: 8px;
    flex-shrink: 0;
    align-items: center;
  }

  .an-tl-vsep { display: none; }

  /* Hamburger pinned to the left edge (DOM lives in .an-tl-right) */
  .an-mobile-mode-btn {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(148, 163, 184, 0.32);
    background: rgba(148, 163, 184, 0.08);
    border-radius: 8px;
    padding: 0 7px;
    color: #fff;
  }
  .an-mobile-mode-btn span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
  }

  /* Logged out: keep the right side narrow so it clears the centred logo.
     Sign-up is reachable from the "Create Account" tab on /login. */
  .an-tl-right:has(#auth-user-chip.hidden) #an-streak-btn,
  .an-tl-right:has(#auth-user-chip.hidden) #notif-bell-wrap,
  .an-tl-right:has(#auth-user-chip.hidden) #auth-signup-button {
    display: none !important;
  }

  #auth-signin-button {
    height: 34px;
    padding: 0 12px;
    font-size: 13px;
    white-space: nowrap;
  }

  .an-streak-chip {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .an-streak-count { display: none; }

  .an-feedback-btn { display: none; } /* Feedback accessible via profile menu on mobile */

  .notif-bell-btn,
  .an-tl-icon-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Auth buttons compact */
  #auth-signin-button,
  #auth-signup-button {
    font-size: 11px;
    padding: 6px 10px;
    min-height: 36px;
  }

  /* ── Workspace Action Bar ─────────────────────────────────────────────── */
  #workspace-action-bar {
    height: 48px;
    padding: 0 6px;
    gap: 6px;
  }

  body.practice-mode #workspace-action-bar,
  body.learn-mode-active #workspace-action-bar {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    column-gap: 12px;
    align-items: center;
  }

  /* Flatten so Run/Submit become direct grid items */
  body.practice-mode .wab-right,
  body.learn-mode-active .wab-right {
    display: contents;
  }

  body.practice-mode #wab-run-btn,
  body.learn-mode-active #wab-run-btn {
    grid-column: 1;
    grid-row: 1;
  }

  body.practice-mode #wab-submit-btn {
    grid-column: 3;
    grid-row: 1;
  }

  /* Simulate on mobile: the grid only has 3 slots (icon | selector | icon),
     already spoken for by Run + Submit in test-case Practice mode — a 4th
     always-visible icon has nowhere to go and was overflowing into its own
     row, overlapping the canvas below it. Fold it into the existing Run/
     Submit "…" dropdown there instead (see _mobileActions in
     workspace-action-bar.js). In Design Your Own System and Learn, Run is
     hidden entirely and Simulate is the only action, so it just takes over
     Run's old slot directly — no dropdown needed for a single action. */
  body.practice-mode:not(.practice-custom-mode) #wab-simulate-btn {
    display: none !important;
  }
  body.practice-custom-mode #wab-simulate-btn,
  body.learn-mode-active #wab-simulate-btn {
    grid-column: 1;
    grid-row: 1;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 50%;
    display: flex !important;
    justify-content: center;
    align-items: center;
  }
  body.practice-custom-mode #wab-simulate-btn span,
  body.learn-mode-active #wab-simulate-btn span {
    display: none !important;
  }
  body.practice-custom-mode #wab-simulate-btn .wab-btn-icon,
  body.learn-mode-active #wab-simulate-btn .wab-btn-icon {
    margin: 0;
  }

  body.practice-mode .wab-center,
  body.learn-mode-active .wab-center {
    grid-column: 2;
    grid-row: 1;
    justify-content: center;
    min-width: 0;
  }

  /* Hide mode badge on mobile */
  .wab-left {
    display: none !important;
  }

  /* Dropdown centered in column 2 */
  .wab-center {
    position: relative !important;
    left: auto !important;
    transform: none !important;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
  }

  .wab-question-selector {
    max-width: 100%;
    position: static;
    width: 100%;
  }

  .pcs-trigger,
  .custom-select-trigger {
    font-size: 11px;
    padding: 6px 10px;
    max-width: 100%;
    width: 100%;
  }

  /* Preset dropdown — full-width bottom-sheet style on mobile */
  .wab-question-selector .pcs-list,
  .preset-custom-select.open .pcs-list {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-height: 55vh;
    border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
    z-index: 1300;
    overflow-y: auto;
    transform: none !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  /* Custom select dropdown - ensure it's visible on mobile */
  .custom-select.open .custom-select-dropdown {
    display: block !important;
  }

  .wab-right {
    gap: 2px;
    flex: 0 0 auto;
  }

  #wab-run-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 50%;
    display: flex !important;
    justify-content: center;
    align-items: center;
  }
  #wab-run-btn span { display: none !important; }
  #wab-run-btn .wab-btn-icon { margin: 0; }

  /* Hide stopwatch and timer on mobile for space */
  #wab-stopwatch,
  #wab-timer-display {
    display: none !important;
  }

  .wab-stopwatch-btn {
    display: none !important;
  }

  /* Submit button on right of dropdown */
  #wab-submit-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 50%;
    display: flex !important;
    justify-content: center;
    align-items: center;
  }
  #wab-submit-btn span {
    display: none !important;
  }
  #wab-submit-btn .wab-btn-icon {
    margin: 0;
  }

  .wab-stopwatch { display: none; }

  /* ── Layout — Panels as overlays on mobile ───────────────────────────── */
  .layout {
    display: grid;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr;
    gap: 0;
    padding: 0;
    height: calc(var(--vh, 100vh) - var(--topbar-height) - var(--wab-height)) !important;
    max-height: calc(var(--vh, 100vh) - var(--topbar-height) - var(--wab-height)) !important;
    contain: none; /* Remove contain so fixed children work */
    overflow: hidden;
  }

  .layout.left-collapsed,
  .layout.right-collapsed,
  .layout.left-collapsed.right-collapsed {
    grid-template-columns: 1fr;
  }

  /* ── Left Panel — Slide-over from left ───────────────────────────────── */
  #left-panel {
    position: fixed;
    top: calc(var(--topbar-height) + var(--wab-height));
    left: 0;
    bottom: 0;
    height: auto;
    max-height: none;
    width: min(280px, 80vw);
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform var(--panel-transition);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    padding-bottom: 24px; /* Breathing room at bottom */
  }

  #left-panel .panel-header {
    padding: 0 12px;
    height: 48px;
    min-height: 48px;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  }

  #left-panel .components-section,
  #left-panel .inspector-section {
    padding: 10px;
  }

  #left-panel.mobile-open {
    transform: translateX(0);
  }

  /* Left panel toggle — float button when panel is closed */
  .floating-toggle.left {
    display: flex !important;
    position: fixed;
    top: 50%;
    left: 12px;
    z-index: 150; /* below .an-toolbar (200) so its menus open over the toggles */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    font-size: 14px;
    transform: translateY(-50%);
  }

  /* ── Right Panel — Bottom sheet on mobile ─────────────────────────────── */
  #right-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    height: 65vh;
    max-height: 65vh;
    z-index: 1000;
    transform: translateY(100%);
    transition: transform var(--panel-transition);
    border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    background: #fff;
    width: 100%;
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Drag handle indicator for bottom sheet */
  #right-panel::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: #cbd5e1;
    border-radius: 2px;
    margin: 8px auto 4px;
    flex-shrink: 0;
  }

  #right-panel .panel-header {
    padding: 0 12px;
    height: 44px;
    min-height: 44px;
  }

  /* Right panel scrollable body */
  #right-panel .panel-view,
  #right-panel .output,
  #right-panel #practice-content,
  #right-panel #simulation-content {
    padding: 12px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #right-panel.mobile-open {
    transform: translateY(0);
  }

  /* Right panel toggle — float button */
  .floating-toggle.right {
    display: flex !important;
    position: fixed;
    top: 50%;
    right: 12px;
    z-index: 150;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    font-size: 14px;
    transform: translateY(-50%);
  }

  /* ── Panel overlay backdrop ──────────────────────────────────────────── */
  .mobile-panel-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .mobile-panel-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
  }

  /* Hide floating toggles when respective panel is open */
  #left-panel.mobile-open ~ .floating-toggle.left,
  body:has(#left-panel.mobile-open) .floating-toggle.left {
    opacity: 0;
    pointer-events: none;
  }
  #right-panel.mobile-open ~ .floating-toggle.right,
  body:has(#right-panel.mobile-open) .floating-toggle.right {
    opacity: 0;
    pointer-events: none;
  }

  /* ── Canvas — Full width ─────────────────────────────────────────────── */
  .canvas-wrapper {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: none; /* Enable custom touch handling */
    border-radius: 0;
    box-shadow: none;
  }

  .canvas {
    width: 100%;
    height: 100%;
    position: relative;
  }

  /* Canvas nodes — preserve exact sizing, prevent distortion */
  .canvas .node {
    min-height: unset;
    min-width: unset;
  }
  .canvas .node img,
  .canvas .node svg,
  .canvas .node-icon img,
  .canvas .node-icon svg {
    max-width: none;
    width: auto;
    height: auto;
  }
  .canvas .node-close {
    min-height: unset;
    min-width: unset;
  }
  .canvas .node-port {
    min-height: unset;
    min-width: unset;
  }

  /* Canvas toolbar — compact bottom bar */
  .canvas-float-toolbar {
    position: fixed !important;
    top: auto !important;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    padding: 6px 10px;
    gap: 3px;
    border-radius: 14px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(10px);
  }

  .cfb-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
  }

  .cfb-zoom-label {
    font-size: 11px;
    min-width: 32px;
    min-height: unset;
  }

  .cfb-sep { width: 1px; margin: 0 2px; }

  /* Canvas reset button */
  .canvas-reset {
    position: fixed !important;
    top: auto !important;
    bottom: 60px;
    right: 12px;
    width: 40px;
    height: 40px;
    z-index: 200;
    border-radius: 50%;
  }

  /* Canvas action dock (Practice) */
  #canvas-action-dock {
    bottom: 52px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 12px;
    gap: 8px;
  }

  /* ── Dropdowns / Menus — Position for mobile ─────────────────────────── */
  .li-eval-dropdown-menu {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
    min-width: 100%;
    max-height: 50vh;
    overflow-y: auto;
    padding: 12px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 1300;
  }

  .li-eval-dropdown-item {
    padding: 14px 16px;
    min-height: var(--touch-min);
  }

  /* ── Modals — Fullscreen on mobile ───────────────────────────────────── */
  .modal .modal-content,
  .eval-modal-card,
  .feedback-modal-card {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
  }

  /* Or bottom-sheet style for smaller modals */
  .modal .modal-content.open-modal {
    height: auto;
    max-height: 85vh;
    border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
  }

  /* ── Forms — Full width ──────────────────────────────────────────────── */
  input, textarea, select {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }

  .modal-form label {
    font-size: 13px;
  }

  .modal-actions {
    flex-direction: column;
    gap: 8px;
  }
  .modal-actions .button {
    width: 100%;
    min-height: var(--touch-min);
  }

  /* ── Components palette — 3 columns on mobile ────────────────────────── */
  .palette {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 8px;
  }

  .palette-item {
    min-height: var(--touch-min);
    padding: 6px;
  }

  /* ── Inspector — compact ─────────────────────────────────────────────── */
  .inspector-section {
    padding: 8px;
  }

  /* ── Profile dropdown ────────────────────────────────────────────────── */
  .an-profile-dropdown {
    position: fixed;
    top: var(--topbar-height);
    right: 0;
    width: min(300px, 85vw);
    max-height: calc(100vh - var(--topbar-height));
    border-radius: 0 0 0 12px;
  }

  /* ── Notification dropdown ───────────────────────────────────────────── */
  .notif-dropdown {
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    right: 0;
    width: 100%;
    max-height: 60vh;
    border-radius: 0 0 12px 12px;
  }

  /* Hide panel toggles while evaluate selection screen is open */
  body.evaluation-mode .floating-toggle,
  body.roadmap-mode .floating-toggle,
  body:has(#evaluate-selection-screen:not(.hidden)) .floating-toggle {
    display: none !important;
  }

  /* Mobile WAB action dropdown (single trigger button).
     position/right/bottom|top are NOT set here — .wab-right is
     display:contents (needed so Run/Submit/Simulate become direct grid
     items of #workspace-action-bar), and a display:contents element can't
     be a containing block, so an absolute position:absolute here anchored
     to nothing meaningful and rendered off-screen. workspace-action-bar.js
     (_positionMobileActions) sets position:fixed + left/top inline instead,
     computed from the trigger button's own rect. */
  .wab-mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 180px;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: #0f1d3b;
    box-shadow: 0 12px 26px rgba(2, 6, 23, 0.45);
    z-index: 1300;
  }
  .wab-mobile-actions[hidden] {
    display: none !important;
  }
  .wab-mobile-action-item {
    height: 36px;
    border: none;
    border-radius: 8px;
    background: rgba(79, 110, 247, 0.2);
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    padding: 0 10px;
  }

  /* ══════════════════════════════════════════════════════════════════════
     ROADMAP VIEW — Single column, panels stacked
     ══════════════════════════════════════════════════════════════════════ */
  #roadmap-view {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr;
    top: var(--topbar-height);
    bottom: 0;
  }

  #rp-left {
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    bottom: 0;
    width: min(280px, 80vw);
    z-index: 1100;
    transform: translateX(-100%);
    transition: transform var(--panel-transition);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
  }

  #rp-left.mobile-open { transform: translateX(0); }

  /* #roadmap-view is position:fixed + z-index:10, a stacking context that traps
     the drawer under the topbar/action bar. Lift the view while the drawer is
     open and dim everything else from inside it (taps land on #roadmap-view). */
  #roadmap-view:has(#rp-left.mobile-open) { z-index: 1000; }
  #roadmap-view:has(#rp-left.mobile-open)::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1099;
    background: rgba(0, 0, 0, 0.4);
  }

  #rp-right {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    height: 55vh;
    z-index: 1100;
    transform: translateY(100%);
    transition: transform var(--panel-transition);
    border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
    background: #fff;
  }
  #rp-right.mobile-open { transform: translateY(0); }

  /* Roadmap main area — full width */
  #rp-main {
    grid-column: 1;
    grid-row: 1 / -1;
    overflow-y: auto;
    padding: 12px;
  }

  /* Topic items — tighter padding */
  .rm-topic-item {
    padding: 10px 12px;
    min-height: var(--touch-min);
  }

  .rm-filter-option {
    min-height: var(--touch-min);
    padding: 8px 12px;
  }

  /* ══════════════════════════════════════════════════════════════════════
     ROADMAP MAIN PAGE — Vertical layout on mobile
     ══════════════════════════════════════════════════════════════════════ */
  body.roadmap-main-mode {
    height: auto !important;
    max-height: none !important;
    overflow: auto !important;
    overflow-x: hidden !important;
  }

  #rm-main {
    height: auto;
    overflow: visible;
  }

  #rm-hero {
    padding: 12px 16px 8px;
  }

  .rm-hero-title {
    font-size: var(--t-metric);
  }

  .rm-hero-stats {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }

  .rm-hero-stat {
    padding: 0 12px;
  }

  /* Journey canvas — vertical on mobile */
  #rm-journey-canvas {
    flex: none;
    min-height: auto;
    overflow: visible;
    padding: 16px 12px;
  }

  #rm-road-wrap {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
  }

  /* Hide the horizontal SVG road on mobile */
  #rm-road-svg {
    display: none;
  }

  /* Road caps — reposition for vertical layout */
  .rm-road-cap {
    position: static;
    transform: none;
    margin: 0 auto;
  }
  .rm-road-cap-start { margin-bottom: 8px; }
  .rm-road-cap-end   { margin-top: 8px; }

  /* Today's goal — inline, full-width (prevents overlap with hero/cards) */
  #rm-today-goal {
    position: static;
    top: auto;
    right: auto;
    width: 100%;
    margin: 0 0 12px;
    padding: 0 4px;
  }

  /* Milestones container — no absolute overlay on mobile */
  #rm-milestones {
    position: static;
    inset: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    pointer-events: auto;
  }

  /* Phase cards — stack vertically */
  .rm-milestone {
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100%;
    margin-bottom: 0;
    opacity: 1;
  }

  .rm-milestone.rm-ms-top,
  .rm-milestone.rm-ms-bottom,
  .rm-milestone.rm-ms-visible {
    transform: none !important;
  }

  /* No connector lines needed in stacked layout */
  .rm-milestone-connector {
    display: none;
  }

  /* Hide absolute checkpoint rings in vertical mode to prevent overlap */
  .rm-node-ring { display: none !important; }

  /* Today's Goal banner */
  .rmg-inner,
  .rm-goal-card {
    max-width: 100%;
  }

  /* ══════════════════════════════════════════════════════════════════════
     LEARN MODE — Narration, stage picker, theory panel
     ══════════════════════════════════════════════════════════════════════ */
  #lm-narration {
    left: 8px;
    right: 8px;
    transform: translateX(0) translateY(10px);
    max-width: calc(100vw - 16px);
    bottom: 60px;
    font-size: 12px;
    padding: 8px 14px;
  }
  #lm-narration.lm-narration-show {
    transform: translateX(0) translateY(0);
  }

  body.mode-learn .learn-stage-picker {
    padding: 10px 12px;
    gap: 6px;
  }

  body.mode-learn .learn-question-item {
    padding: 10px 12px;
    min-height: var(--touch-min);
  }

  /* Stage theory panel scrollable */
  body.mode-learn .stage-theory {
    max-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* LRP sim footer — full width buttons */
  .lrp-sim-footer {
    padding: 8px 12px;
    flex-direction: column;
    gap: 6px;
  }
  .lrp-sim-footer .button {
    width: 100%;
    min-height: var(--touch-min);
  }

  /* ══════════════════════════════════════════════════════════════════════
     EVALUATE / INTERVIEW MODE
     ══════════════════════════════════════════════════════════════════════ */
  #im-toolbar {
    height: 52px;
    min-height: 52px;
    padding: 0 8px;
    gap: 6px;
  }

  body.eval-interview-active #im-toolbar {
    --im-toolbar-h: 52px;
  }

  body.eval-interview-active #layout {
    height: calc(var(--vh, 100dvh) - 52px);
  }

  .im-tl-left {
    min-width: 0;
    gap: 6px;
  }

  .im-brand-logo {
    height: 36px;
  }

  .im-session-meta { display: none; }

  .im-problem-title {
    font-size: 12px;
    max-width: 140px;
  }

  .im-tl-right {
    min-width: 0;
    gap: 6px;
  }

  /* ── Evaluation Report — mobile fullscreen ───────────────────────────── */
  .eval-report-page {
    top: 0 !important;
  }

  .eval-rp-topbar {
    padding: 0 10px;
    height: 48px;
  }

  .eval-rp-meta { display: none; }

  .eval-rp-inner {
    padding: 16px 12px 48px;
  }

  .eval-rp-btn {
    padding: 6px 10px;
    font-size: 11px;
    min-height: 36px;
  }

  .eval-rp-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 16px 14px;
  }

  /* ══════════════════════════════════════════════════════════════════════
     PRICING PAGE — mobile adjustments
     ══════════════════════════════════════════════════════════════════════ */
  body.page-pricing .an-toolbar {
    height: 48px;
    min-height: 48px;
    padding: 0 8px;
  }

  .pricing-shell {
    height: calc(var(--vh, 100vh) - 48px);
  }

  .pricing-scroll-inner {
    padding: 0 12px 3rem;
  }

  .pr-hero {
    padding: 1.5rem 0.75rem 1rem;
  }

  .pr-hero-title {
    font-size: clamp(1.5rem, 6vw, 2.2rem);
  }

  .pr-duration-toggle {
    flex-wrap: wrap;
    justify-content: center;
  }

  .pr-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  .pr-card {
    padding: 1.25rem 1rem 1rem;
  }

  /* Hide decorative floaters on mobile */
  .pr-floater { display: none; }
  .pricing-bg { display: none; }

  /* ══════════════════════════════════════════════════════════════════════
     PROFILE PAGE — mobile stacking
     ══════════════════════════════════════════════════════════════════════ */
  body.page-profile .an-toolbar {
    height: 48px;
    min-height: 48px;
    padding: 0 8px;
  }

  .profile-shell {
    height: calc(var(--vh, 100vh) - 48px);
  }

  .profile-content {
    padding: 1.5rem 12px 3rem;
  }

  /* Hero stacks vertically */
  .prof-hero {
    padding: 1.5rem 1rem 1.25rem;
    border-radius: 14px;
  }

  .prof-hero-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
  }

  .prof-avatar { width: 64px; height: 64px; font-size: 20px; }

  .prof-name { font-size: 20px; }

  .prof-rank-row {
    justify-content: center;
  }

  /* Hide decorative floaters on mobile */
  .profile-floater { display: none; }
  .profile-bg { display: none; }

  /* ══════════════════════════════════════════════════════════════════════
     SIMULATION OUTPUT — compact on mobile
     ══════════════════════════════════════════════════════════════════════ */
  .sim-output-panel {
    padding: 8px;
  }

  .sim-output-panel .sim-header {
    padding: 8px 10px;
    font-size: 12px;
  }

  /* ══════════════════════════════════════════════════════════════════════
     EVALUATIONS LIST PAGE — compact cards
     ══════════════════════════════════════════════════════════════════════ */
  .evals-content {
    padding: 1.5rem 0.75rem 4rem;
  }

  .evals-floater { display: none; }
  .evals-bg { display: none; }

  /* ══════════════════════════════════════════════════════════════════════
     AUTH / SIGNUP MODALS — fullscreen on mobile
     ══════════════════════════════════════════════════════════════════════ */
  .auth-modal .auth-card {
    width: 100vw;
    max-width: 100vw;
    min-height: 100vh;
    border-radius: 0;
    margin: 0;
  }

  .auth-card-inner {
    padding: 1.5rem 1rem;
  }

}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLET — 768px to 1023px
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) and (min-height: 501px) {

  :root {
    --topbar-height: 44px;
  }

  /* ── Toolbar — Tighter spacing ───────────────────────────────────────── */
  .an-toolbar {
    padding: 0 12px;
    gap: 8px;
  }

  .an-tab {
    font-size: 14px;
    font-weight: 500;
    padding: 10px 14px;
  }

  /* .an-tl-center is normally position:absolute + left:50% so the tabs sit
     dead-centre regardless of how wide the left/right toolbar content is.
     That's fine on desktop, but at tablet width the logo + streak/notif/
     help/feedback/auth buttons on either side are wide enough that the
     absolutely-centred tabs visually collide with them (overlapping text,
     not just tight spacing). Bring it back into normal flex flow here so it
     shares space with its siblings instead of ignoring them, and let it
     scroll horizontally as a last resort rather than overlap anything. */
  .an-tl-center {
    position: static;
    left: auto;
    transform: none;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .an-tl-center::-webkit-scrollbar { display: none; }
  .an-tabs { flex-wrap: nowrap; }

  .an-tl-brand-sub { display: none; }

  .an-tl-right {
    gap: 6px;
  }

  .an-feedback-btn {
    font-size: 11px;
    padding: 5px 10px;
  }

  /* ── Layout — Collapsible panels ─────────────────────────────────────── */
  .layout {
    --left-panel-w: clamp(180px, 22vw, 230px);
    --right-panel-w: clamp(200px, 24vw, 260px);
    gap: 0.5rem;
    padding: 0.4rem;
  }

  /* ── Left Panel — Collapsible, narrower ──────────────────────────────── */
  #left-panel {
    overflow-y: auto;
    transition: width var(--panel-transition), opacity var(--panel-transition);
  }

  .layout.left-collapsed #left-panel {
    width: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0;
  }

  /* ── Right Panel — Collapsible, narrower ─────────────────────────────── */
  #right-panel {
    transition: width var(--panel-transition), opacity var(--panel-transition);
  }

  .layout.right-collapsed #right-panel {
    width: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0;
  }

  /* ── Palette — 4 columns ─────────────────────────────────────────────── */
  .palette {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }

  /* ── Workspace action bar — compact ──────────────────────────────────── */
  #workspace-action-bar {
    padding: 0 10px;
  }

  .wab-btn {
    padding: 6px 12px;
    font-size: 12px;
  }

  /* ── Modals — Constrained but not fullscreen ─────────────────────────── */
  .modal .modal-content {
    max-width: 90vw;
    max-height: 85vh;
  }

  /* ── Canvas toolbar ──────────────────────────────────────────────────── */
  .canvas-float-toolbar {
    gap: 3px;
    padding: 4px 10px;
  }

  /* ── Roadmap View — narrower panels ──────────────────────────────────── */
  #roadmap-view {
    --rp-panel-w: 220px;
    --rp-right-panel-w: 240px;
  }

  /* ── Interview Mode toolbar — compact ────────────────────────────────── */
  #im-toolbar {
    height: 56px;
    min-height: 56px;
    padding: 0 12px;
  }

  .im-brand-logo { height: 52px; }

  .im-problem-title {
    font-size: 13px;
    max-width: 220px;
  }

  /* ── Pricing cards — 2 col stays ─────────────────────────────────────── */
  .pricing-scroll-inner {
    padding: 0 1rem 3rem;
  }

  /* ── Profile — tighter padding ───────────────────────────────────────── */
  .profile-content {
    padding: 2rem 1.5rem 4rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LARGE DESKTOP — 1440px+
   More breathing room, larger panels
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {
  .layout {
    /* Preferred width is a straight percentage of the viewport — the max
       is also a percentage (not a small fixed px cap) so panels keep
       growing on very wide screens instead of plateauing early. */
    --left-panel-w: clamp(204px, 14vw, 18.6vw);
    --right-panel-w: clamp(280px, 21vw, 26vw);
    /* Was 1.5rem/1rem 1.5rem 1.5rem — needlessly wide once the panels
       themselves already scale generously with the viewport; that extra
       chrome was just eating into canvas space for no visual benefit. */
    gap: 0.6rem;
    padding: 0.5rem 0.6rem 0.6rem;
  }

  /* Base typography scale (style.css) plateaus by ~640px viewport width —
     every one of its clamp() maxes is already hit well before "large
     desktop" territory, so body copy stays mobile-sized forever on big
     monitors while all the freed-up width just sits blank. Give the scale
     a second, taller ceiling here; each min starts at the old max so
     there's no visible jump at the 1440px boundary, only continued growth.
     This 1440-1919 slice covers 14-16" laptop panels specifically —
     confirmed too large at that size. Shifted a flat 2.5px smaller than
     the 1920px+ tier below (which was confirmed correct on a 28" monitor)
     at every point of the clamp, not just the ceiling, so the whole curve
     — not only the max — stays a guaranteed 2.5px under the 28" values. */
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXTRA-LARGE DESKTOP — 1920px+ (24-32" external monitors)
   Confirmed-correct sizes on a 28" monitor — kept as-is; only the narrower
   1440-1919px "14-16 inch laptop" slice above was reduced.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1920px) {

  /* Left panel height split — confirmed correct as content-sized (auto)
     on a 14" laptop, but that left a visibly tall dead gap in Components
     on a 28" monitor. Force an explicit 35/65 split here only. */
  #left-panel .components-section {
    flex: 0 0 35%;
    max-height: 25%;
  }

  /* Header (top nav bar + preset/workspace action bar) taller on a 28"
     monitor — was sized for a laptop and looked squashed given how much
     vertical room is available. --topbar-height/--wab-height drive
     .layout's own height calc automatically; .an-toolbar's height must be
     bumped to match since it doesn't read --topbar-height itself (its own
     literal height only needs to stay in sync with that variable). The
     ":root:has(.an-toolbar)" selector is repeated here (not a plain
     ":root") to match header.css's specificity — a plain :root would lose
     to it regardless of load order. */
  :root:has(.an-toolbar) {
    --topbar-height: 76px;
  }
  body.practice-mode,
  body.learn-mode-active,
  body.roadmap-mode {
    --wab-height: 56px;
  }
  .an-toolbar {
    height: 76px;
    min-height: 76px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOUCH DEVICE ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  /* Larger tap targets — only for primary action areas, NOT canvas/toolbar icons */
  .modal-actions button,
  .modal-actions a,
  .auth-card button,
  .auth-card a,
  .pricing-shell button,
  .pricing-shell a,
  .profile-shell button,
  .profile-shell a,
  .li-eval-dropdown-item {
    min-height: 44px;
    min-width: 44px;
  }

  /* Prevent double-tap zoom */
  * {
    touch-action: manipulation;
  }

  /* Canvas allows pinch/pan */
  .canvas, .canvas-content, #canvas-content {
    touch-action: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SAFE AREA INSETS (notched phones)
   ═══════════════════════════════════════════════════════════════════════════ */
@supports (padding: max(0px)) {
  @media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) {
    .an-toolbar {
      padding-left: max(8px, env(safe-area-inset-left));
      padding-right: max(8px, env(safe-area-inset-right));
    }

    #workspace-action-bar {
      padding-left: max(8px, env(safe-area-inset-left));
      padding-right: max(8px, env(safe-area-inset-right));
    }

    .canvas-float-toolbar {
      bottom: max(8px, env(safe-area-inset-bottom));
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE IMAGES & SVGS
   ═══════════════════════════════════════════════════════════════════════════ */
/* Only apply fluid images to content areas, NOT toolbar/UI icons */
.canvas-wrapper img,
.panel-body img,
.modal-content img,
.lp-hero img {
  max-width: 100%;
  height: auto;
}

/* Toolbar logo — keep fixed size from header.css */
.an-tl-logo {
  max-width: none;
  height: 32px !important;
  width: auto !important;
  zoom: 1 !important;
}

@media (min-width: 1024px), (min-width: 768px) and (min-height: 501px) {
  .an-tl-logo {
    height: 36px !important;
    width: auto !important;
    zoom: 1.3 !important;
  }
}

/* Preserve specific icon sizes */
.palette-item .icon, .wab-btn-icon,
.cfb-btn svg, .dock-btn-icon {
  max-width: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXTRA SMALL PHONES — 480px and below
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  #workspace-action-bar {
    padding: 0 4px;
    height: 44px;
    gap: 4px;
  }

  body.practice-mode #workspace-action-bar,
  body.learn-mode-active #workspace-action-bar {
    grid-template-columns: 36px 1fr 36px;
    column-gap: 8px;
  }

  .wab-question-selector {
    width: auto !important;
    min-width: 0;
  }

  .pcs-trigger {
    font-size: 11px;
    padding: 4px 6px;
    max-width: 100%;
  }

  /* Hide the timer display on extra small screens */
  #wab-timer-display {
    display: none;
  }

  /* Workspace items more compact */
  .wab-left,
  .wab-right {
    gap: 2px;
  }

  /* Panel buttons smaller */
  #wab-run-btn,
  #wab-submit-btn,
  .wab-stopwatch-btn,
  .notif-bell-btn,
  .an-tl-icon-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE TABLES
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRINT — Hide non-essential UI
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  .an-toolbar, #workspace-action-bar, #left-panel, #right-panel,
  .canvas-float-toolbar, #canvas-action-dock, .floating-toggle {
    display: none !important;
  }
  .layout {
    grid-template-columns: 1fr !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHONES IN LANDSCAPE — same phone layout, but height is the scarce axis
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) and (max-height: 500px) {
  :root,
  :root:has(.an-toolbar) {
    --topbar-height: 48px;
  }

  body.practice-mode,
  body.learn-mode-active,
  body.roadmap-mode {
    --wab-height: 44px;
  }

  .an-toolbar {
    height: 48px;
    min-height: 48px;
  }

  #workspace-action-bar {
    height: var(--wab-height);
  }

  #wab-run-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }

  body.practice-mode .wab-question-selector,
  body.learn-mode-active .wab-question-selector {
    max-width: 420px;
    margin: 0 auto;
  }

  /* Side sheet instead of a bottom sheet, so the canvas stays in view while reading */
  #right-panel {
    top: calc(var(--topbar-height) + var(--wab-height));
    left: auto;
    right: 0;
    bottom: 0;
    width: min(380px, 55vw);
    height: auto;
    max-height: none;
    transform: translateX(100%);
    border-radius: var(--sheet-radius) 0 0 var(--sheet-radius);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
  }

  #right-panel::before {
    display: none;
  }

  #right-panel.mobile-open {
    transform: translateX(0);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Practice / Learn / Evaluate — fixed 25% / 45% / 30% split
   Requested explicitly for these three modes only (not Builder, not
   Roadmap). .layout's grid is `var(--left-panel-w) 1fr var(--right-panel-w)`,
   so a 25% + 30% pair of fixed tracks naturally leaves exactly 45% for the
   1fr canvas column — no separate center-width rule needed. Scoped to
   desktop widths; narrower breakpoints already replace this layout with a
   collapsed/drawer panel UI.
   Body-class selectors (0,2,0 specificity) intentionally outrank the
   plain ".layout {...}" rules elsewhere so this wins regardless of load
   order. The drag-resize handles (panel-ui.js) still work on top of this
   — they only ever grow a panel wider via an inline style override.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  body.practice-mode .layout,
  body.learn-mode-active .layout,
  body.evaluation-mode .layout {
    --left-panel-w: max(220px, 25%);
    --right-panel-w: max(240px, 30%);
  }
}

/* The +10% right-panel bump for 14-16" laptops (33% vs the 30% baseline)
   was reverted — with real Problem/Requirements content in it, 33% read as
   the panel "covering almost half the page." Back to the plain 30%
   baseline from the 1024px+ rule above for every desktop size.

   14-15.6" laptops (1440-1919px, same slice as the typography tier above):
   three successive relative cuts off the original 25%/30% baseline —
   -10% (22.5%/27%), then -15% (19.125%/22.95%), then -15% again
   (16.256%/19.508%) per follow-up requests. Each cut compounds on the
   previous result, not on the original 25%/30%. */
@media (min-width: 1440px) and (max-width: 1919px) {
  body.practice-mode .layout,
  body.learn-mode-active .layout,
  body.evaluation-mode .layout {
    --left-panel-w: max(180px, 18.4%);
    --right-panel-w: max(213px, 25.508%);
  }
}