/* ============================================================
   PRISMA WEBSITE — mobile.css
   Loaded on all pages after inline <style> blocks.
   Breakpoints: 768px (phone), 480px (small phone)
   ============================================================ */

/* Prevent horizontal page scroll on mobile */
html { overflow-x: clip; }

/* Nav right group — keeps CTA + perf-toggle together as one flex item */
.nav-right { display: flex; flex-direction: row; align-items: center; gap: 8px; flex-wrap: nowrap; flex-shrink: 0; }

/* Perf dropdown — right-align so it doesn't overflow the viewport */
#perf-dropdown { left: auto; right: 0; transform: none; }

/* Footer — hover underline + matching row spacing for markets */
.footer-links a:hover { text-decoration: underline; }
.footer-privacy:hover { text-decoration: underline; }
.footer-market { line-height: 1.6 !important; }

@media (max-width: 768px) {

  /* ── GLOBAL ──────────────────────────────────────────────── */
  body { cursor: auto; }
  .scroll-indicator { display: none !important; }
  .back-to-top     { display: none !important; }

  /* ── NAVIGATION ──────────────────────────────────────────── */
  .pill-nav        { display: none !important; }
  .nav-hamburger   { display: flex !important; }
  nav > a.pill-item { display: none !important; }

  /* ── HERO ────────────────────────────────────────────────── */
  #page-hero {
    height: 100svh;
    min-height: 560px;
  }
  .hero-content {
    left: 24px !important;
    right: 24px !important;
    bottom: 72px !important;
    max-width: 100% !important;
  }
  .hero-breadcrumb { left: 24px !important; }
  .hero-title      { white-space: normal !important; overflow-wrap: break-word !important; }
  .hero-title .char { display: inline !important; white-space: normal !important; }
  .hero-page-sub   { font-size: 16px !important; max-width: 100%; }
  .hero-stats      { display: none !important; }
  .page-title      { font-size: clamp(26px, 8vw, 36px) !important; }
  .page-title-p    { font-size: clamp(26px, 8vw, 36px) !important; }

  /* ── FLOW SECTIONS ───────────────────────────────────────── */
  [data-flow-section] { height: auto !important; }

  .flow-art-container {
    height: auto !important;
    min-height: auto !important;
    padding: 0 1.5rem 3.5rem !important;
    justify-content: flex-start !important;
    gap: 1.25rem !important;
    overflow: visible !important;
  }

  .flow-top-row { padding-top: 72px !important; }

  /* Stack two-column layout to single column */
  .illusion-main {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    flex: none !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Hide decorative right columns; show content right columns */
  .illusion-right { display: none !important; }
  #flow-call .illusion-right,
  #flow-illusion .illusion-right,
  #flow-protocol .illusion-right {
    display: block !important;
    width: 100% !important;
  }
  #flow-protocol .illusion-right { display: flex !important; flex-direction: column !important; gap: 1rem !important; }

  .flow-headline  { font-size: clamp(26px, 8vw, 36px) !important; }
  .illusion-subhead { font-size: 15px !important; max-width: 100% !important; }
  .flow-body      { font-size: 15px !important; line-height: 1.65 !important; }

  /* ── TESTIMONIAL WIDGET ──────────────────────────────────── */
  .testi-glass-card,
  .testi-widget {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .testi-bignum { display: none !important; }
  .testi-avatar { width: 64px !important; height: 64px !important; }
  .testi-badge { font-size: 10px !important; letter-spacing: 0.04em !important; }
  .testi-author-name { font-size: 13px !important; }
  .testi-author-role { font-size: 12px !important; }
  .testi-author-row { flex-wrap: wrap !important; gap: 0.5rem !important; }
  .testi-layout { grid-template-columns: 1fr !important; }
  .testi-left-col { display: none !important; }
  .testi-author-info { justify-content: flex-start !important; margin-left: 0 !important; padding-left: 0 !important; }
  .testi-nav { position: static !important; margin-left: auto !important; }
  .testi-company-panel {
    flex-direction: column !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 1rem !important;
  }
  .testi-company-logo-wrap {
    width: 100% !important;
    height: auto !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(7,9,26,0.10) !important;
    padding-right: 0 !important;
    padding-bottom: 1rem !important;
  }
  .testi-company-desc { font-size: 13px !important; }

  /* Reset absolute CTA positioning (team.html board section) */
  .flow-bottom {
    position: static !important;
    margin-top: 1.5rem !important;
    padding-bottom: 0 !important;
  }

  /* ── FLOW ITEMS ──────────────────────────────────────────── */
  .glow-card      { width: 100% !important; box-sizing: border-box; }
  .flow-grid      { flex-direction: column; }
  .flow-grid-item { min-width: 100%; }

  /* ── TEAM PAGE — FOCUS RAIL ──────────────────────────────── */
  .focus-rail-wrap {
    flex: none !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible;
    padding: 0.5rem 0 1.5rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory !important;
  }
  .focus-rail-wrap::-webkit-scrollbar { display: none; }

  .focus-rail-stage {
    position: static !important;
    height: auto !important;
    perspective: none !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 1rem;
    width: max-content;
    cursor: default !important;
    padding: 0.5rem 0.25rem;
  }

  .fri-rc {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    flex-shrink: 0;
    z-index: auto !important;
    cursor: default !important;
    width: 280px !important;
  }

  /* C-level cards full width; advisor rail cards get fixed width + snap */
  .glass-card-wrap,
  .glass-card-wrap.c-glass { width: 100% !important; }
  .focus-rail-stage .glass-card-wrap { width: min(85vw, 300px) !important; scroll-snap-align: start; }
  .focus-rail-stage .glass-card-inner { box-shadow: none !important; }

  /* Fix c-level stage padding eating into card width */
  .c-level-stage { padding-right: 0 !important; gap: 1.5rem !important; }

  /* Reduce oversized name/role text on glass cards */
  .c-glass .glass-card-name { font-size: 16px !important; word-break: break-word !important; }
  .c-glass .glass-card-role { font-size: 13px !important; }
  .glass-card-bullets li { font-size: 13px !important; line-height: 1.5 !important; }
  .glass-card-bullets { gap: 7px !important; }

  /* Shrink c-level card height and badge on mobile */
  .glass-card-wrap.c-glass { height: 420px !important; }
  .c-glass .glass-card-content { top: 16px !important; }
  .c-glass .glass-card-name { padding-right: 88px !important; }
  .c-glass .glass-card-role { padding-right: 88px !important; white-space: normal !important; word-break: break-word !important; line-height: 1.3 !important; }
  .c-glass .glass-card-badge { width: 80px !important; height: 80px !important; top: 16px !important; right: 16px !important; }
  .c-glass .gc-1 { width: 100px !important; height: 100px !important; top: 8px !important; right: 8px !important; }
  .c-glass .gc-2 { width: 125px !important; height: 125px !important; top: -4px !important; right: -4px !important; }

  .fri-nav-wrap { display: none !important; }

  /* ── TESTIMONIALS ────────────────────────────────────────── */
  .testi-bottom { grid-template-columns: 1fr !important; }
  .testi-bottom > * { grid-column: 1 !important; margin: 0 !important; }

  /* ── STORY PAGE ──────────────────────────────────────────── */
  .story-block {
    grid-template-columns: 1fr !important;
    padding: 2rem 1.5rem !important;
  }
  .story-block-label {
    font-size: clamp(26px, 8vw, 36px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 1.25rem;
  }
  .story-block-text  { padding-right: 0 !important; }
  .story-pull        { font-size: 17px; }

  /* ── PRIVACY PAGE ───────────────────────────────────────── */
  .legal-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .legal-highlight,
  .legal-warning { padding: 16px 20px !important; }

  /* ── FOOTER ──────────────────────────────────────────────── */
  .footer-top    { grid-template-columns: 1fr 1fr !important; gap: 2rem !important; }
  .footer-logo-col { grid-column: 1 / -1 !important; }

  /* ── HEADINGS ────────────────────────────────────────────── */
  h1, h2, h3, h4 {
    white-space: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    overflow-wrap: break-word !important;
  }

  /* ── BUTTONS ─────────────────────────────────────────────── */
  .btn-amber      { padding: 10px 20px !important; font-size: 13px !important; }
  .btn-amber-lg   { padding: 10px 22px !important; font-size: 13px !important; }
  .btn-outline    { padding: 9px 18px !important;  font-size: 12px !important; }
  .btn-glow-amber { padding: 12px 28px !important; font-size: 14px !important; }
  .hero-note      { font-size: 14px !important; }
}

@media (max-width: 480px) {
  .footer-top { grid-template-columns: 1fr !important; }
  .flow-art-container { padding: 0 1.25rem 2.5rem !important; }
  .flow-top-row { padding-top: 64px !important; }
  .fri-rc { width: 260px !important; }
  .page-title        { font-size: 26px !important; }
  .page-title-p      { font-size: 26px !important; }
  .flow-headline     { font-size: 26px !important; }
  .story-block-label { font-size: 26px !important; }
}

/* ── 1920×1080 DESKTOP OPTIMISATION ─────────────────────────── */
@media (min-width: 1600px) {
  :root {
    --container-padding: 80px;
    --container-width: 1600px;
  }
  .flow-art-container { padding-left: 80px !important; padding-right: 80px !important; }
  .flow-headline { font-size: clamp(3rem, 4.2vw, 96px) !important; }
}

/* ── SHORT VIEWPORT — laptops with small screens ─────────────── */
/* Threshold raised: was 900px, now 780px so Windows 1080p @ 125% DPI (800px) is NOT affected */
@media (max-height: 780px) and (min-width: 769px) {
  .flow-art-container {
    padding-top: 0.75rem !important;
    padding-bottom: 30px !important;
    gap: 0.5rem !important;
  }
  .flow-top-row       { padding-top: 52px !important; }
  .flow-headline      { font-size: clamp(1.5rem, 4vw, 52px) !important; }
  .illusion-subhead   { font-size: 15px !important; }
  .illusion-item      { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
  .illusion-item-title { font-size: 15px !important; }
  .illusion-item-text { font-size: 13px !important; line-height: 1.6 !important; }
  .flow-body          { font-size: 14px !important; }
  .glow-card          { padding: 1rem !important; gap: 0.4rem !important; }
  #flow-protocol .illusion-right { gap: 0.6rem !important; }
}

/* ── VERY SHORT — only genuinely tiny screens, not scaled 1080p ─ */
/* Threshold raised: was 820px, now 750px so Windows 1080p @ 125% DPI (800px) keeps snap scroll */
@media (max-height: 750px) and (min-width: 769px) {
  [data-flow-section] {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }
  .flow-art-container {
    height: auto !important;
    min-height: calc(100vh - 1.5rem) !important;
    overflow: visible !important;
    padding-top: 0.5rem !important;
    padding-bottom: 30px !important;
  }
  .flow-top-row { padding-top: 52px !important; }
}