/* =========================================================
   FROM IDEA TO BUSINESS — COMPLETE PHONE LAYOUT RESET
   File: idea-to-business-phone.css
   Goal: match planned mobile layout:
   topbar -> idea input -> wide screen -> 3 cards OR tabs -> slogan -> 4 bottom cards
   Load AFTER all desktop CSS files.
   ========================================================= */

@media (max-width: 767px) {
  :root {
    --m-blue: #2457f5;
    --m-ink: #101828;
    --m-muted: #667085;
    --m-line: rgba(203, 216, 242, .72);

    --m-x: 3.4vw;
    --m-gap: 1.45vh;

    --m-topbar-h: 8.2vh;
    --m-input-h: 8.9vh;
    --m-screen-h: 32.5vh;
    --m-feature-h: 11.2vh;
    --m-footer-h: 3.8vh;
    --m-bottom-h: 12.3vh;

    --m-radius-xl: 3.8vh;
    --m-radius-lg: 2.8vh;
    --m-shadow: 0 1.4vh 3.4vh rgba(16, 24, 40, .065);
    --m-shadow-soft: 0 .8vh 2vh rgba(16, 24, 40, .045);
  }

  html,
  body {
    width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    -webkit-text-size-adjust: 100%;
    background:
      radial-gradient(circle at 50% -8%, rgba(36,87,245,.12), transparent 32%),
      linear-gradient(180deg, #fbfdff 0%, #f3f7ff 48%, #ffffff 100%) !important;
  }

  *, *::before, *::after { box-sizing: border-box !important; }
  img, svg, canvas, video { max-width: 100% !important; }

  .powered-by,
  .landing-title,
  .landing-title--billboard,
  .landing-subtitle,
  .landing-subtitle--ticker,
  .landing-subtitle__viewport,
  .landing-subtitle__track,
  .landing-divider,
  .save-vault-floating {
    display: none !important;
  }
  
  
/* ========================================
   MOBILE: REMOVE LANDING CLUTTER
   ======================================== */

/* Remove big marketing title */
.landing-title,
.landing-title--billboard {
  display: none !important;
}

/* Remove subtitle ticker */
.landing-subtitle,
.landing-subtitle--ticker,
.landing-subtitle__viewport,
.landing-subtitle__track {
  display: none !important;
}

/* Remove "Powered by Arcanis" */
.powered-by {
  display: none !important;
}

  .app-shell {
    width: 100% !important;
    min-height: 100svh !important;
    height: 100svh !important;
    padding: max(1vh, env(safe-area-inset-top)) var(--m-x) max(1vh, env(safe-area-inset-bottom)) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .app-layout {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    transform: none !important;
  }

  .main-content {
    order: 1 !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--m-gap) !important;
    overflow: visible !important;
    border-radius: 0 !important;
  }

  .topbar-wrap {
    position: relative !important;
    z-index: 20 !important;
    width: 100% !important;
    height: var(--m-topbar-h) !important;
    flex: 0 0 var(--m-topbar-h) !important;
    padding: 0 !important;
    margin: 0 0 var(--m-gap) !important;
    display: flex !important;
    pointer-events: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .topbar {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    align-items: center !important;
    gap: 2.7vw !important;
    padding: .85vh 2.4vw !important;
    border-radius: var(--m-radius-lg) !important;
    border: 1px solid var(--m-line) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,251,255,.88)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.98), var(--m-shadow-soft) !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  .topbar-left,
  .topbar-center,
  .topbar-right {
    min-width: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
  }
  .topbar-left { justify-content: flex-start !important; }
  .topbar-center { justify-content: center !important; }
  .topbar-right { justify-content: flex-end !important; }

  .brand-link,
  .vault-btn,
  .user-menu-btn {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 2.2vh !important;
    background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(249,252,255,.90)) !important;
    border: 1px solid rgba(203,216,242,.55) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 .7vh 1.6vh rgba(16,24,40,.035) !important;
  }

  .topbar-logo { width: 86% !important; height: 76% !important; object-fit: contain !important; }
  .vault-icon, .user-icon { width: 100% !important; height: 100% !important; display: grid !important; place-items: center !important; }
  .vault-icon img, .user-icon img { width: 88% !important; height: 78% !important; object-fit: contain !important; }

  .screen,
  .screen.screen--landing.is-active,
  .screen--landing,
  #landingScreen {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--m-gap) !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  .screen::before, .screen::after { display: none !important; }
  .landing-hero, .landing-hero__content { width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }

  .idea-form {
    width: 100% !important;
    height: var(--m-input-h) !important;
    flex: 0 0 var(--m-input-h) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .idea-form__field {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 24% !important;
    grid-template-rows: 1fr !important;
    overflow: hidden !important;
    border-radius: var(--m-radius-lg) !important;
    border: 1px solid var(--m-line) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,251,255,.90)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.98), var(--m-shadow-soft) !important;
    transform: none !important;
  }

  #ideaInput,
  .idea-form textarea,
  .idea-form input {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    resize: none !important;
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    padding: 0 4.2vw !important;
    color: var(--m-ink) !important;
    font-size: clamp(15px, 3.8vw, 22px) !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: -.04em !important;
  }
  #ideaInput::placeholder,
  .idea-form textarea::placeholder,
  .idea-form input::placeholder {
    color: #202938 !important;
    opacity: 1 !important;
    font-size: clamp(15px, 3.8vw, 22px) !important;
    font-weight: 800 !important;
  }

  #submitIdeaButton,
  .idea-form__field .button--primary {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-left: 1px solid var(--m-line) !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--m-blue) !important;
    transform: none !important;
  }
  #submitIdeaButton .button__label,
  #submitIdeaButton .button__char-wrap,
  #submitIdeaButton > span:first-child {
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    place-items: center !important;
    color: var(--m-blue) !important;
    font-size: clamp(13px, 3.5vw, 20px) !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: .055em !important;
  }

  .idea-form__field.is-processing #submitIdeaButton {
    position: absolute !important;
    inset: 0 !important;
    border-radius: var(--m-radius-lg) !important;
    width: 100% !important;
    height: 100% !important;
    background: radial-gradient(circle at 22% 18%, rgba(255,255,255,.22), transparent 30%), linear-gradient(180deg, #4c79ff 0%, #2457f5 62%, #1f49d9 100%) !important;
    color: #fff !important;
  }

  .morph-showcase {
    width: 100% !important;
    height: var(--m-screen-h) !important;
    flex: 0 0 var(--m-screen-h) !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    isolation: isolate !important;
  }

  .morph-showcase__stage {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    padding: 1.6vh !important;
    border-radius: var(--m-radius-xl) !important;
    overflow: hidden !important;
    border: 1px solid var(--m-line) !important;
    background: radial-gradient(circle at 52% 34%, rgba(255,255,255,.96), rgba(244,248,255,.95) 57%, rgba(235,242,255,.96) 100%), linear-gradient(180deg, #ffffff, #f5f9ff) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.98), inset 0 -2.4vh 5.2vh rgba(36,87,245,.035), var(--m-shadow) !important;
  }
  .morph-showcase__stage::before {
    content: "" !important;
    position: absolute !important;
    inset: 1vh !important;
    border-radius: calc(var(--m-radius-xl) - 1vh) !important;
    pointer-events: none !important;
    z-index: 1 !important;
    background: radial-gradient(circle at 72% 20%, rgba(36,87,245,.07) 0 1px, transparent 1.4px), radial-gradient(circle at center, rgba(255,255,255,.20), rgba(255,255,255,.02) 70%) !important;
    background-size: 1.8vw 1.8vw, auto !important;
    border: 1px solid rgba(255,255,255,.62) !important;
  }

  .hero-visual,
  .hero-visual.hero-visual--active {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: none !important;
  }
  .hero-visual:not(.hero-visual--active) { opacity: 0 !important; visibility: hidden !important; }
  .hero-visual img { width: 86% !important; height: 86% !important; max-width: none !important; max-height: none !important; object-fit: contain !important; object-position: center !important; }

  .hero-report-layer { position: absolute !important; inset: 1vh !important; width: auto !important; height: auto !important; z-index: 12 !important; }
  .hero-report-card { width: 100% !important; height: 100% !important; min-height: 0 !important; padding: 1.3vh 2.2vw !important; border-radius: calc(var(--m-radius-xl) - 1.2vh) !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 1vh !important; transform: none !important; }
  .hero-report-card__top { display: grid !important; grid-template-columns: 24% 1fr !important; gap: 2.3vw !important; align-items: center !important; }
  .hero-report-score { width: 100% !important; aspect-ratio: 1 / 1 !important; height: auto !important; }
  .hero-report-kicker { font-size: clamp(7px, 1.55vw, 10px) !important; }
  .hero-report-score__inner strong, #heroReportScoreValue { font-size: clamp(25px, 6.2vw, 42px) !important; }
  .hero-report-score__inner span { font-size: clamp(8px, 1.9vw, 12px) !important; }
  .hero-report-main { min-width: 0 !important; text-align: left !important; }
  .hero-report-advice { font-size: clamp(13px, 3.3vw, 21px) !important; line-height: 1.08 !important; letter-spacing: -.04em !important; }
  .hero-report-summary-big, #heroReportSummary { font-size: clamp(10px, 2.45vw, 14px) !important; line-height: 1.38 !important; max-height: 4.2em !important; overflow: hidden !important; padding: 0 !important; }
  #heroReportVerdict { margin: .5vh 0 0 !important; font-size: clamp(10px, 2.5vw, 14px) !important; }
  .hero-report-metrics { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 1vw !important; margin: 0 !important; }
  .hero-report-metric { min-height: 4.6vh !important; padding: .6vh .7vw !important; border-radius: 1.4vh !important; }
  .hero-report-metric span { font-size: clamp(5px, 1.25vw, 8px) !important; letter-spacing: .04em !important; white-space: nowrap !important; }
  .hero-report-metric strong { font-size: clamp(8px, 2vw, 12px) !important; }

  #landingReportPreview { width: 100% !important; display: contents !important; }

  #landingJourneySection {
    width: 100% !important;
    height: var(--m-feature-h) !important;
    flex: 0 0 var(--m-feature-h) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }
  #landingJourneySection .idea-flow-top { width: 100% !important; height: 100% !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 2.6vw !important; }
  #landingJourneySection .idea-flow-card { width: 100% !important; height: 100% !important; min-height: 0 !important; padding: 1.1vh 2vw !important; display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: 52% 48% !important; align-items: center !important; justify-items: center !important; border-radius: var(--m-radius-lg) !important; border: 1px solid var(--m-line) !important; background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,251,255,.88)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.98), var(--m-shadow-soft) !important; transform: none !important; overflow: hidden !important; }
  #landingJourneySection .idea-flow-icon { width: auto !important; height: auto !important; min-width: 0 !important; display: grid !important; place-items: center !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--m-blue) !important; font-size: clamp(28px, 8.5vw, 48px) !important; line-height: 1 !important; }
  #landingJourneySection .idea-flow-copy { width: 100% !important; text-align: center !important; display: block !important; }
  #landingJourneySection .idea-flow-copy h3 { margin: 0 !important; color: var(--m-blue) !important; font-size: clamp(9px, 2.45vw, 14px) !important; line-height: 1.03 !important; letter-spacing: -.035em !important; font-weight: 900 !important; text-align: center !important; }
  #landingJourneySection .idea-flow-copy p { display: none !important; }

  .idea-tabs-rail { display: none !important; }
  .app-shell.has-idea-tabs #landingJourneySection { display: none !important; }
  .app-shell.has-idea-tabs .idea-tabs-rail { order: 8 !important; display: block !important; position: relative !important; top: auto !important; left: auto !important; width: 100% !important; height: var(--m-feature-h) !important; flex: 0 0 var(--m-feature-h) !important; margin: 0 !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; z-index: 5 !important; }
  .app-shell.has-idea-tabs .idea-tabs-rail[hidden] { display: none !important; }
  .idea-tabs-rail__stack { width: 100% !important; height: 100% !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 2.6vw !important; align-items: center !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; padding: 1.15vh 11vw !important; border-radius: var(--m-radius-lg) !important; border: 1px solid var(--m-line) !important; background: linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,255,255,.65) 14%, rgba(255,255,255,.65) 86%, rgba(255,255,255,.98)), linear-gradient(180deg, rgba(255,255,255,.93), rgba(248,251,255,.84)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.98), var(--m-shadow-soft) !important; scrollbar-width: none !important; }
  .idea-tabs-rail__stack::-webkit-scrollbar { display: none !important; }
  .idea-mini-tab { scroll-snap-align: center !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; display: grid !important; place-items: center !important; align-content: center !important; gap: .55vh !important; padding: 1vh 1.6vw !important; border-radius: 2.2vh !important; border: 1px solid rgba(203,216,242,.72) !important; background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.90)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 .8vh 2vh rgba(16,24,40,.055) !important; text-align: center !important; z-index: 3 !important; transform: none !important; }
  .idea-mini-tab::before { display: none !important; }
  .idea-mini-tab.is-active, .idea-mini-tab[aria-selected="true"], .idea-mini-tab:first-child { border-color: rgba(36,87,245,.75) !important; background: radial-gradient(circle at 28% 0%, rgba(36,87,245,.08), transparent 42%), linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,247,255,.94)) !important; box-shadow: 0 0 0 3px rgba(36,87,245,.06), 0 1vh 2.5vh rgba(36,87,245,.12), inset 0 1px 0 rgba(255,255,255,.98) !important; }
  .idea-mini-tab__title { max-width: 100% !important; display: block !important; color: var(--m-ink) !important; font-size: clamp(10px, 2.8vw, 16px) !important; line-height: 1.05 !important; font-weight: 900 !important; letter-spacing: -.04em !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .idea-mini-tab__eyebrow { display: block !important; color: var(--m-muted) !important; font-size: clamp(8px, 2.05vw, 11px) !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: .06em !important; text-transform: uppercase !important; margin: 0 !important; }

  #landingFooterStrip,
  .partner-strip,
  .partner-strip.partner-strip--bottom {
    width: 100% !important;
    height: var(--m-footer-h) !important;
    flex: 0 0 var(--m-footer-h) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
  }
  .partner-strip__eyebrow,
  .partner-strip > p,
  #landingFooterStrip p {
    margin: 0 !important;
    width: 100% !important;
    text-align: center !important;
    color: #111827 !important;
    font-size: clamp(9px, 2.45vw, 13px) !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  .sidebar {
    order: 20 !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    z-index: 10 !important;
    width: 100% !important;
    height: var(--m-bottom-h) !important;
    flex: 0 0 var(--m-bottom-h) !important;
    min-height: 0 !important;
    margin: auto 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .sidebar__nav { width: 100% !important; height: 100% !important; min-height: 0 !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 2.6vw !important; padding: 0 !important; }
  .sidebar-step { width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none !important; flex: none !important; border-radius: var(--m-radius-lg) !important; border: 1px solid rgba(203,216,242,.68) !important; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,251,255,.90)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 .9vh 2.2vh rgba(16,24,40,.052) !important; overflow: hidden !important; transform: none !important; }
  .sidebar-step.is-active { border: 1.5px solid rgba(36,87,245,.82) !important; box-shadow: 0 0 0 3px rgba(36,87,245,.07), 0 1.2vh 2.7vh rgba(36,87,245,.13), inset 0 1px 0 rgba(255,255,255,.98) !important; }
  .sidebar-step__media { position: absolute !important; inset: 9% !important; background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important; filter: none !important; opacity: 1 !important; transform: none !important; }
  .sidebar-step__overlay { position: absolute !important; inset: 0 !important; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.18)) !important; }

  .report-panel:hover,
  .mission-action-card:hover,
  .insight-chart-card:hover,
  .landing-category-card:hover,
  .idea-flow-card:hover,
  .value-card:hover,
  .chart-card:hover,
  .sidebar-step:hover,
  .button:hover {
    transform: none !important;
  }
}

@media (max-width: 767px) and (max-height: 740px) {
  :root {
    --m-topbar-h: 7.5vh;
    --m-input-h: 8.2vh;
    --m-screen-h: 30.5vh;
    --m-feature-h: 10.6vh;
    --m-footer-h: 3.4vh;
    --m-bottom-h: 11.6vh;
    --m-gap: 1.25vh;
  }
}

@media (max-width: 767px) and (min-height: 860px) {
  :root {
    --m-screen-h: 34.5vh;
    --m-feature-h: 11.5vh;
    --m-bottom-h: 12.5vh;
    --m-gap: 1.7vh;
  }
}

@media (max-width: 390px) {
  :root {
    --m-x: 2.7vw;
    --m-gap: 1.25vh;
    --m-input-h: 8.4vh;
    --m-screen-h: 31.5vh;
    --m-feature-h: 10.8vh;
    --m-bottom-h: 11.8vh;
  }
}


/* =========================================================
   MOBILE FINAL POSITION FIX
   ========================================================= */

@media (max-width: 767px) {

  /* 1) Make top icons smaller inside their boxes */
  .topbar {
    height: 7.2vh !important;
    flex: 0 0 7.2vh !important;
    padding: .55vh 2vw !important;
    gap: 2vw !important;
  }

  .brand-link,
  .vault-btn,
  .user-menu-btn {
    height: 100% !important;
    border-radius: 1.8vh !important;
  }

  .topbar-logo {
    width: 74% !important;
    height: 62% !important;
    object-fit: contain !important;
  }

  .vault-icon img,
  .user-icon img {
    width: 62% !important;
    height: 62% !important;
    object-fit: contain !important;
  }

  /* 2) Force the screen/morph area to 95vw and centered */
  .morph-showcase {
    width: 95vw !important;
    max-width: 95vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
  }

  .morph-showcase__stage {
    width: 100% !important;
    max-width: 95vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 3) Move the 3 cards lower into the blue-marked area */
  #landingJourneySection {
    width: 95vw !important;
    max-width: 95vw !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;

    /* this is the vertical move */
    transform: translateY(5.2vh) !important;
    z-index: 5 !important;
  }

  #landingJourneySection .idea-flow-top {
    width: 100% !important;
    height: 100% !important;
    gap: 3vw !important;
  }

  #landingJourneySection .idea-flow-card {
    height: 9.2vh !important;
    min-height: 9.2vh !important;
    border-radius: 2.4vh !important;
    padding: .9vh 1.5vw !important;
  }

  #landingJourneySection .idea-flow-icon {
    font-size: clamp(24px, 7vw, 38px) !important;
  }

  #landingJourneySection .idea-flow-copy h3 {
    font-size: clamp(7px, 2vw, 11px) !important;
    line-height: 1.05 !important;
  }

  /* Give footer room since cards moved down */
  #landingFooterStrip,
  .partner-strip.partner-strip--bottom {
    transform: translateY(4.8vh) !important;
    z-index: 4 !important;
  }

  /* Prevent bottom cards from being pushed weirdly */
  .sidebar {
    margin-top: auto !important;
  }
}


/* =========================================================
   MOBILE TOP ICONS + 95VW INPUT FIX
   ========================================================= */

@media (max-width: 767px) {

  /* Show top icons again */
  .topbar-logo,
  .vault-icon img,
  .user-icon img {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .topbar {
    width: 95vw !important;
    max-width: 95vw !important;
    height: 7.4vh !important;
    margin-left: auto !important;
    margin-right: auto !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2.2vw !important;
    padding: .6vh 2vw !important;
  }

  .brand-link,
  .vault-btn,
  .user-menu-btn {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .topbar-logo {
    width: 70% !important;
    height: 70% !important;
    object-fit: contain !important;
  }

  .vault-icon,
  .user-icon {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .vault-icon img,
  .user-icon img {
    width: 52% !important;
    height: 52% !important;
    object-fit: contain !important;
  }

  /* Make input + audit exactly 95vw like screen */
  .landing-hero,
  .landing-hero__content,
  .idea-form {
    width: 95vw !important;
    max-width: 95vw !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .idea-form__field {
    width: 95vw !important;
    max-width: 95vw !important;
    grid-template-columns: 1fr 24% !important;
  }

  #ideaInput {
    width: 100% !important;
  }

  #submitIdeaButton {
    width: 100% !important;
  }

  .morph-showcase,
  .morph-showcase__stage {
    width: 95vw !important;
    max-width: 95vw !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


@media (max-width: 767px) {

  #ideaInput {
    padding-top: 2.2vh !important;   /* this creates the "margin-top" feel */
    display: block !important;
    line-height: 1.2 !important;
  }

}



@media (max-width: 767px) {

  #submitIdeaButton {
    background: linear-gradient(180deg, #4c79ff, #2457f5) !important;
    color: #fff !important;
    border-left: 1px solid rgba(255,255,255,0.25) !important;
  }

  #submitIdeaButton .button__label,
  #submitIdeaButton span {
    color: #fff !important;
  }

}

@media (max-width: 767px) {

  #landingJourneySection .idea-flow-copy {
    display: none !important;
  }

  #landingJourneySection .idea-flow-card {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #landingJourneySection .idea-flow-icon {
    font-size: clamp(28px, 8vw, 42px) !important;
  }

}


@media (max-width: 767px) {

  #landingJourneySection .idea-flow-top {
    align-items: center !important;
  }

}
@media (max-width: 767px) {

  /* Fix top logo/icon row */
  .topbar-wrap {
    height: 7.8vh !important;
    flex: 0 0 7.8vh !important;
    margin-bottom: 1.25vh !important;
  }

  .topbar {
    width: 95vw !important;
    max-width: 95vw !important;
    height: 7.8vh !important;
    margin: 0 auto !important;
    padding: .7vh 2vw !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2.4vw !important;
  }

  .brand-link,
  .vault-btn,
  .user-menu-btn {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    border-radius: 2vh !important;
  }

  .topbar-logo {
    display: block !important;
    width: 78% !important;
    height: 78% !important;
    object-fit: contain !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .vault-icon,
  .user-icon {
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    place-items: center !important;
  }

  .vault-icon img,
  .user-icon img {
    display: block !important;
    width: 68% !important;
    height: 68% !important;
    object-fit: contain !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Perfectly center slogan between 3 cards and 4 bottom cards */
  #landingFooterStrip,
  .partner-strip.partner-strip--bottom {
    transform: none !important;
    height: 7.2vh !important;
    flex: 0 0 7.2vh !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #landingFooterStrip p,
  .partner-strip__eyebrow,
  .partner-strip > p {
    width: 100% !important;
    text-align: center !important;
    font-size: clamp(8px, 2.35vw, 12px) !important;
    line-height: 1 !important;
    letter-spacing: .11em !important;
    white-space: nowrap !important;
  }

  /* Remove old forced downward shift from the 3 cards */
  #landingJourneySection {
    transform: none !important;
  }

  /* Keep bottom cards anchored cleanly */
  .sidebar {
    margin-top: 0 !important;
  }
}



/* =========================================================
   FINAL CLEAN TOPBAR (BIGGER ICONS + PROPER SPACING)
   ========================================================= */

/* =========================================================
   ABSOLUTE FINAL MOBILE TOPBAR OVERRIDE
   ========================================================= */

@media (max-width: 767px) {

  .topbar-wrap,
  .topbar,
  .topbar-left,
  .topbar-center,
  .topbar-right,
  .brand-link,
  .vault-btn,
  .user-menu-btn,
  .vault-icon,
  .user-icon,
  .topbar-logo,
  .vault-icon img,
  .user-icon img {
    display: revert !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .topbar-wrap {
    display: block !important;
    position: relative !important;
    z-index: 999 !important;
    width: 95vw !important;
    height: 7.2vh !important;
    flex: 0 0 7.2vh !important;
    margin: 0 auto 2vh !important;
    padding: 0 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    background: transparent !important;
  }

  .topbar {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    width: 100% !important;
    height: 100% !important;
    gap: 4vw !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .topbar-left,
  .topbar-center,
  .topbar-right {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .brand-link,
  .vault-btn,
  .user-menu-btn {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .vault-icon,
  .user-icon {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
  }

  .topbar-logo {
    display: block !important;
    width: 82% !important;
    height: 82% !important;
    object-fit: contain !important;
  }

  .vault-icon img,
  .user-icon img {
    display: block !important;
    width: 76% !important;
    height: 76% !important;
    object-fit: contain !important;
  }

  .idea-form {
    margin-top: 0 !important;
  }
}


/* =========================================================
   PERFECT ICON ALIGNMENT + SAME SIZE
   ========================================================= */

@media (max-width: 767px) {

  /* Force identical container behavior */
  .topbar-left,
  .topbar-center,
  .topbar-right {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .brand-link,
  .vault-btn,
  .user-menu-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* 🔥 THIS IS THE KEY: normalize ALL icons */
  .topbar-logo,
  .vault-icon img,
  .user-icon img {
    width: 64% !important;
    height: 64% !important;
    object-fit: contain !important;
    display: block !important;
  }

}

@media (max-width: 767px) {

  .topbar-wrap {
    margin-bottom: 2.6vh !important;  /* ← more breathing room */
  }

}



@media (max-width: 767px) {

  /* Space BELOW the textbox (input + audit) */
  .idea-form {
    margin-bottom: 1.6vh !important;
    margin-top: 1.6vh !important;
  }

  /* Space BELOW the screen (morph showcase) */
  .morph-showcase {
    margin-bottom: 1.6vh !important;
  }

}



@media (max-width: 767px) {

  /* 3 icon cards: always fit full phone width */
  #landingJourneySection {
    width: 95vw !important;
    max-width: 95vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden !important;
  }

  #landingJourneySection .idea-flow-top {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3vw !important;
  }

  #landingJourneySection .idea-flow-card {
    width: 90% !important;
    min-width: 0 !important;
    height: 8.6vh !important;
    min-height: 8.6vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #landingJourneySection .idea-flow-icon {
    display: block !important;
    font-size: clamp(24px, 7.2vw, 40px) !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  #landingJourneySection .idea-flow-copy {
    display: none !important;
  }

  /* Text underneath: vertically + horizontally centered */
  #landingFooterStrip,
  .partner-strip.partner-strip--bottom {
    width: 90vw !important;
    max-width: 90vw !important;
    height: 5.2vh !important;
    min-height: 5.2vh !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  #landingFooterStrip p,
  .partner-strip__eyebrow,
  .partner-strip > p {
    margin: 0 !important;
    text-align: center !important;
    line-height: 1 !important;
    width: 90% !important;
  }
}


@media (max-width: 767px) {

  /* Prevent ANY horizontal overflow */
  body {
    overflow-x: hidden !important;
  }

  /* Ensure proper width calculation */
  *, *::before, *::after {
    box-sizing: border-box !important;
  }

  /* Keep section centered and safe */
  #landingJourneySection {
    width: 95vw !important;
    max-width: 95vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 4vw !important;   /* 👈 THIS fixes the cutoff cleanly */
  }

  /* Cards fit perfectly inside */
  #landingJourneySection .idea-flow-top {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3vw !important;
  }

}


@media (max-width: 767px) {

  /* Make the screen container control the image */
  .morph-showcase__stage,
  .hero-visual,
  .hero-poster-layer {
    width: 95vw !important;
    height: 100% !important;
    overflow: hidden !important;
    border-radius: 3vh !important;
  }

  /* 🔥 THIS IS THE KEY */
  .hero-visual img,
  .hero-poster-layer img,
  .morph-showcase__stage img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;   /* ← IMPORTANT */
    object-position: center !important;
    display: block !important;
  }

}


@media (max-width: 767px) {

  /* 1. Force ALL 3 containers to behave identically */
  .brand-link,
  .vault-btn,
  .user-menu-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* 2. Normalize ALL icons (THIS is the key) */
  .topbar-logo,
  .vault-icon img,
  .user-icon img {
    width: 70% !important;
    height: 70% !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* 3. Kill wrapper distortion */
  .vault-icon,
  .user-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
  }

}



@media (max-width: 767px) {

  body.report-open .topbar-wrap {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: all 0.35s ease;
  }

  body:not(.report-open) .topbar-wrap {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    transition: all 0.35s ease;
  }

}


/* =========================================================
   MOBILE REPORT — MATCH DESKTOP REPORT LOOK
   ========================================================= */

@media (max-width: 767px) {

  /* Report screen container */
  .hero-report-layer {
    inset: 1.1vh !important;
  }

  .hero-report-card {
    width: 100% !important;
    height: 100% !important;
    padding: 1.2vh 2vw !important;
    border-radius: 2.6vh !important;

    display: grid !important;
    grid-template-columns: 1fr 25% !important;
    grid-template-rows: 1fr 5.8vh !important;
    gap: 1vw !important;

    background: rgba(255,255,255,.88) !important;
    border: 1px solid rgba(203,216,242,.75) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 1.2vh 3vh rgba(16,24,40,.08) !important;
  }

  /* Main top area becomes desktop-style left text + right score */
  .hero-report-card__top {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;

    display: grid !important;
    grid-template-columns: 1fr 25% !important;
    gap: 1vw !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  /* Move score box to the RIGHT */
  .hero-report-score-wrap {
    grid-column: 2 !important;
    grid-row: 1 !important;

    width: 100% !important;
    height: 100% !important;
    border-radius: 2vh !important;
    background: linear-gradient(180deg, #ffffff, #f7faff) !important;
    border: 1px solid rgba(203,216,242,.75) !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .hero-report-kicker {
    order: -1 !important;
    font-size: clamp(7px, 1.7vw, 10px) !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    color: #101828 !important;
    margin-bottom: .8vh !important;
  }

  .hero-report-score {
    width: auto !important;
    height: auto !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .hero-report-score__inner {
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: .25em !important;
  }

  #heroReportScoreValue {
    font-size: clamp(34px, 12vw, 62px) !important;
    line-height: .85 !important;
    font-weight: 950 !important;
    letter-spacing: -.08em !important;
    color: #2457f5 !important;
  }

  .hero-report-score__inner span {
    font-size: clamp(10px, 3vw, 16px) !important;
    font-weight: 900 !important;
    color: #101828 !important;
  }

  /* Left desktop-style summary panel */
  .hero-report-main {
    grid-column: 1 !important;
    grid-row: 1 !important;

    height: 100% !important;
    min-height: 0 !important;
    padding: 1.6vh 2.2vw !important;
    border-radius: 2vh !important;
    background: linear-gradient(180deg, #f8faff, #eef3ff) !important;
    border: 1px solid rgba(203,216,242,.75) !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  .hero-report-advice {
    font-size: clamp(15px, 4.2vw, 24px) !important;
    line-height: 1.05 !important;
    font-weight: 950 !important;
    letter-spacing: -.055em !important;
    color: #2457f5 !important;
    margin-bottom: 1.2vh !important;
  }

  #heroReportSummary,
  .hero-report-summary-big {
    font-size: clamp(10px, 2.8vw, 15px) !important;
    line-height: 1.45 !important;
    color: #1f2937 !important;
    max-height: 5.8em !important;
    overflow: hidden !important;
  }

  #heroReportVerdict {
    display: none !important;
  }

  /* Bottom metric row like desktop */
  .hero-report-metrics {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;

    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 0 !important;

    height: 5.8vh !important;
    margin: 0 !important;
    padding-top: .6vh !important;
    border-top: 1px solid rgba(203,216,242,.75) !important;
  }

  .hero-report-metric {
    min-height: 0 !important;
    height: 100% !important;
    padding: .4vh .5vw !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: .35vh !important;

    border-right: 1px solid rgba(203,216,242,.55) !important;
  }

  .hero-report-metric:last-child {
    border-right: 0 !important;
  }

  .hero-report-metric span {
    font-size: clamp(5px, 1.35vw, 8px) !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    color: #101828 !important;
    letter-spacing: -.02em !important;
    white-space: nowrap !important;
  }

  .hero-report-metric strong {
    font-size: clamp(8px, 2.4vw, 13px) !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    color: #2457f5 !important;
  }
  
  .hero-report-card {
  grid-template-columns: 1fr !important; /* score lives inside top grid */
}


.hero-report-score-wrap {
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 0 .8vw !important;
}

#heroReportScoreValue {
  font-size: clamp(26px, 8vw, 42px) !important;
  letter-spacing: -.07em !important;
}

.hero-report-score__inner span {
  font-size: clamp(8px, 2.3vw, 12px) !important;
}

.hero-report-kicker {
  font-size: clamp(5px, 1.25vw, 8px) !important;
  white-space: nowrap !important;
}



@media (max-width: 767px) {

  .hero-report-card__top {
grid-template-columns: minmax(0, 1fr) clamp(72px, 20vw, 110px) !important;
    gap: 1.4vw !important;
  }

  .hero-report-main {
    min-width: 0 !important;
    overflow: hidden !important;
    padding-right: 1vw !important;
  }

  .hero-report-score-wrap {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: clamp(96px, 24vw, 112px) !important;
    height: 100% !important;

    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    justify-content: center !important;

    overflow: hidden !important;
    padding: 0 !important;
    z-index: 5 !important;
  }

  .hero-report-score {
    width: 100% !important;
    height: auto !important;
    display: grid !important;
    place-items: center !important;
  }

  .hero-report-score__inner {
    width: 100% !important;
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: .18em !important;
    white-space: nowrap !important;
  }

  #heroReportScoreValue {
    font-size: clamp(30px, 9vw, 44px) !important;
    line-height: .9 !important;
    letter-spacing: -.07em !important;
  }

  .hero-report-score__inner span {
    font-size: clamp(8px, 2.1vw, 11px) !important;
    flex: 0 0 auto !important;
  }

  .hero-report-kicker {
    text-align: center !important;
    margin-bottom: .6vh !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 767px) {

  .hero-report-card__top {
    grid-template-columns: minmax(0, calc(100% - clamp(98px, 25vw, 118px))) clamp(98px, 25vw, 118px) !important;
    gap: 1.4vw !important;
  }

  .hero-report-main {
    width: 70% !important;
    max-width: 90% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding-right: 1vw !important;
  }

  .hero-report-advice,
  #heroReportSummary,
  .hero-report-summary-big {
    max-width: 90% !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  .hero-report-score-wrap {
    width: clamp(98px, 25vw, 118px) !important;
    min-width: clamp(98px, 25vw, 118px) !important;
    max-width: clamp(98px, 25vw, 118px) !important;
    justify-self: end !important;
    z-index: 10 !important;
  }
  
  .hero-report-score-wrap {
  width: 100% !important;
  height: 100% !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 1vh 1vw !important;
  box-sizing: border-box !important;
}
  
 
}



@media (max-width: 767px) {

  /* REPORT OPEN = hide mobile top icons + idea tabs */
  body.report-open .topbar-wrap,
  body.report-open .topbar,
  body.report-open .idea-tabs-rail,
  body.report-open .app-shell.has-idea-tabs .idea-tabs-rail {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Also hide the landing 3 cards while report is open */
  body.report-open #landingJourneySection,
  body.report-open #landingFooterStrip {
    display: none !important;
  }



  body.report-open #reportDashboard[hidden] {
    display: block !important;
  }

  body.report-open .report-dashboard__grid {
    display: none !important;
  }

  .mobile-report-simple {
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    grid-template-rows: 5vh 1fr !important;
    gap: .8vh !important;
  }

  .mobile-report-simple__nav {
    display: flex !important;
    gap: 2vw !important;
    overflow-x: auto !important;
    padding: .4vh 1vw !important;
    scrollbar-width: none !important;
  }

  .mobile-report-simple__nav::-webkit-scrollbar {
    display: none !important;
  }

  .mobile-report-simple__nav button {
    flex: 0 0 38vw !important;
    border: 1px solid rgba(203,216,242,.8) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #2457f5 !important;
    font-size: clamp(9px, 2.4vw, 12px) !important;
    font-weight: 900 !important;
  }

  .mobile-report-simple__nav button.is-active {
    background: linear-gradient(180deg, #4c79ff, #2457f5) !important;
    color: #fff !important;
  }

  .mobile-report-simple__stage {
    overflow: hidden !important;
    border-radius: 2.2vh !important;
    border: 1px solid rgba(203,216,242,.75) !important;
    background: rgba(255,255,255,.94) !important;
    padding: 1vh 3vw !important;
  }

  .mobile-report-simple__stage .report-panel {
    display: block !important;
    height: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .mobile-report-simple__stage .report-panel--cta,
  .mobile-report-simple__stage .report-panel--cta-image {
    display: none !important;
  }
}



@media (max-width: 767px) {

  body.report-open .topbar-wrap,
  body.report-open .idea-tabs-rail,
  body.report-open .app-shell.has-idea-tabs .idea-tabs-rail {
    display: none !important;
  }

  body.report-open #landingJourneySection,
  body.report-open #landingFooterStrip {
    display: none !important;
  }

body.report-open #reportDashboard {
  display: block !important;
  width: 95vw !important;

  height: auto !important;          /* 🔥 KEY */
  flex: 1 1 auto !important;        /* 🔥 allows expansion */

  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;     /* 🔥 prevents clipping */
}

  body.report-open .report-dashboard__grid {
    display: none !important;
  }

  .mobile-report-simple {
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    grid-template-rows: 4.5vh 1fr !important;
    gap: 1vh !important;
  }

  .mobile-report-simple__nav {
    display: flex !important;
    gap: 1.4vw !important;
    overflow-x: auto !important;
    padding: .4vh .8vw !important;
    scrollbar-width: none !important;
  }

  .mobile-report-simple__nav::-webkit-scrollbar {
    display: none !important;
  }

  .mobile-report-simple__nav button {
    flex: 0 0 32vw !important;
    height: 3.4vh !important;
    border-radius: 999px !important;
    border: 1px solid rgba(203,216,242,.8) !important;
    background: #fff !important;
    color: #2457f5 !important;
    font-size: clamp(8px, 2.2vw, 11px) !important;
    font-weight: 900 !important;
  }

  .mobile-report-simple__nav button.is-active {
    background: linear-gradient(180deg, #4c79ff, #2457f5) !important;
    color: #fff !important;
  }

  .mobile-report-simple__stage {
    height: 100% !important;
    border-radius: 2.4vh !important;
    border: 1px solid rgba(203,216,242,.75) !important;
    background: rgba(255,255,255,.95) !important;
    padding: 1.4vh 3.2vw !important;
    overflow: hidden !important;
  }

  .mobile-data-card {
    height: 100% !important;
    display: grid !important;
    grid-template-columns: 10vw 1fr !important;
    gap: 3vw !important;
    align-items: center !important;
  }

  .mobile-data-card__icon {
    width: 9vw !important;
    height: 9vw !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    background: #eef3ff !important;
    color: #2457f5 !important;
    font-size: clamp(14px, 4vw, 20px) !important;
    font-weight: 900 !important;
  }

  .mobile-data-card__content {
    min-width: 0 !important;
  }

  .mobile-data-card__label {
    margin: 0 0 .35vh !important;
    color: #2457f5 !important;
    font-size: clamp(8px, 2vw, 10px) !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
  }

  .mobile-data-card__title {
    margin: 0 0 .55vh !important;
    color: #101828 !important;
    font-size: clamp(15px, 4.2vw, 21px) !important;
    line-height: 1.05 !important;
    font-weight: 950 !important;
    letter-spacing: -.05em !important;
  }

  .mobile-data-card__text {
    margin: 0 !important;
    color: #475467 !important;
    font-size: clamp(10px, 2.7vw, 13px) !important;
    line-height: 1.35 !important;
    font-weight: 650 !important;
  }

  .mobile-data-card__hint {
    margin-top: 1vh !important;
    color: #98a2b3 !important;
    font-size: clamp(8px, 2vw, 10px) !important;
    font-weight: 800 !important;
  }
}


/* ========================================
   MOBILE: FLOATING SCORE (BOTTOM RIGHT)
   ======================================== */

.hero-report-card {
  position: relative !important; /* anchor parent */
  
    height: 100% !important;
    width: 100% !important;
}


/* Kill layout influence */
.hero-report-score-wrap {
width: 100% !important;

  position: relative !important;
  bottom: 0vh !important;


  width: 90% !important;
  min-width: 60px !important;
  height: auto !important;

  padding: .6vh 1.2vw !important;

  border-radius: 20vh !important;
  background: rgba(255,255,255,.95) !important;
  border: 1px solid rgba(203,216,242,.75) !important;

  display: flex !important;
  align-items: end !important;
  justify-content: end !important;

  z-index: 20 !important;
}

/* Remove label (saves space) */
.hero-report-kicker {
  display: none !important;
}

/* Make score compact */
#heroReportScoreValue {

  font-size: clamp(70px, 2vw, 28px) !important;
  line-height: 1 !important;
  letter-spacing: -.05em !important;
}

.hero-report-score__inner span {
  font-size: clamp(8px, 2.2vw, 11px) !important;
}

/* IMPORTANT: give text full width again */
.hero-report-card__top {
  grid-template-columns: 1fr !important;
}



@media (max-width: 767px) {

  .morph-showcase__stage {
    padding: 1vh !important;
    overflow: hidden !important;
  }

  .hero-report-layer {
    inset: .8vh !important;
    overflow: hidden !important;
  }

  .hero-report-card {
    width: 100% !important;
    height: 100% !important;
    padding: .9vh 1.5vw !important;
    overflow: hidden !important;

    display: grid !important;
    grid-template-rows: minmax(0, 1fr) 5.2vh !important;
    gap: .65vh !important;
  }

  .hero-report-card__top {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(72px, 20vw, 92px) !important;
    gap: 1.4vw !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  .hero-report-main {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    max-height: 100% !important;

    padding: 1vh 2vw !important;
    overflow: hidden !important;
    border-radius: 2vh !important;
  }

  .hero-report-advice {
    font-size: clamp(12px, 3.6vw, 18px) !important;
    line-height: 1 !important;
    margin: 0 0 .8vh !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }



  /*  Here we can set the height for the text area  */
  #heroReportSummary,
  .hero-report-summary-big {
    font-size: clamp(9px, 2.55vw, 13px) !important;
    line-height: 1.35 !important;
    max-height: 8.1em !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  .hero-report-score-wrap {
    grid-column: 2 !important;
    position: relative !important;
    inset: auto !important;

    width: clamp(72px, 10vw, 92px) !important;
    min-width: clamp(72px, 10vw, 92px) !important;
    max-width: clamp(72px, 10vw, 92px) !important;
    height: clamp(72px, 10vw, 92px) !important;

    align-self: center !important;
    justify-self: center !important;

    padding: 0 !important;

    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(203,216,242,.75) !important;

    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    z-index: 5 !important;
  }

  .hero-report-kicker {
    display: none !important;
  }

  .hero-report-score {
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    place-items: center !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .hero-report-score__inner {
    width: 100% !important;
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: .12em !important;
    white-space: nowrap !important;
  }

  #heroReportScoreValue {
    font-size: clamp(28px, 2.2vw, 42px) !important;
    line-height: .9 !important;
    letter-spacing: -.07em !important;
  }

  .hero-report-score__inner span {
    font-size: clamp(7px, 2vw, 10px) !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
  }

  .hero-report-metrics {
    height: 7.2vh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding-top: .35vh !important;
  }

  .hero-report-metric {
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }
}


@media (max-width: 767px) {

  /* parent anchor */
  .hero-report-card {
    position: relative !important;
  }

  /* text area gets full width */
  .hero-report-card__top {
    display: block !important;
    grid-template-columns: 1fr !important;
  }

  .hero-report-main {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 2vw !important;
  }

  /* score becomes small floating circle */
  .hero-report-score-wrap {
    position: absolute !important;
    right: 2vw !important;
    bottom: 1.1vh !important;

    width: clamp(44px, 12vw, 58px) !important;
    min-width: clamp(44px, 12vw, 58px) !important;
    max-width: clamp(44px, 12vw, 58px) !important;

    height: clamp(44px, 12vw, 58px) !important;
    min-height: clamp(44px, 12vw, 58px) !important;
    max-height: clamp(44px, 12vw, 58px) !important;

    padding: 0 !important;
    border-radius: 999px !important;

    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(203,216,242,.8) !important;
    box-shadow: 0 .8vh 1.8vh rgba(16,24,40,.12) !important;

    display: grid !important;
    place-items: center !important;
    z-index: 50 !important;
    overflow: hidden !important;
  }

  .hero-report-kicker {
    display: none !important;
  }

  .hero-report-score {
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    place-items: center !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .hero-report-score__inner {
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: .08em !important;
    white-space: nowrap !important;
  }

  #heroReportScoreValue {
    font-size: clamp(20px, 6vw, 28px) !important;
    line-height: 1 !important;
    letter-spacing: -.06em !important;
  }

  .hero-report-score__inner span {
    font-size: clamp(6px, 1.8vw, 9px) !important;
    line-height: 1 !important;
  }
}


@media (max-width: 767px) {

  .hero-report-score {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
  }

  .hero-report-score__inner {
    display: flex !important;
    flex-direction: row !important;   /* 🔥 key fix */
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  #heroReportScoreValue {
    font-size: clamp(18px, 5.5vw, 24px) !important; /* smaller */
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: -.05em !important;
  }

  .hero-report-score__inner span {
    font-size: clamp(6px, 1.6vw, 8px) !important;
    line-height: 1 !important;
    margin-top: -0.2vh !important; /* pulls closer */
  }

}





@media (max-width: 767px) {

  .hero-report-card {
    overflow: hidden !important;
  }

  .hero-report-card__top {
    width: 90vw !important;
    max-width: 90vw !important;
    display: block !important;
    overflow: hidden !important;
  }

  .hero-report-main {
    width: auto !important;
    max-width: none !important;

    margin-left: 1.2vw !important;
    margin-right: 1.2vw !important;

    padding: 1vh 2.2vw !important;
    box-sizing: border-box !important;

    overflow: hidden !important;
  }

  .hero-report-advice,
  #heroReportSummary,
  .hero-report-summary-big {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  #heroReportSummary,
  .hero-report-summary-big {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}



@media (max-width: 767px) {

  /* Hide bottom cards when report is open */
  body.report-open .sidebar {
    display: none !important;
  }

  /* Show them again on landing */
  body:not(.report-open) .sidebar {
    display: block !important;
  }

}



@media (max-width: 767px) {

  /* Landing tabs rail */
  body:not(.report-open) .app-shell.has-idea-tabs .idea-tabs-rail {
    display: block !important;
    width: 95vw !important;
    height: 11.5vh !important;
    flex: 0 0 11.5vh !important;
    margin: 0 auto !important;
    padding: 1.1vh 2.2vw !important;
    border-radius: 2.7vh !important;
    border: 1px solid rgba(203,216,242,.75) !important;
    background: rgba(255,255,255,.82) !important;
    box-shadow: 0 .9vh 2.4vh rgba(16,24,40,.06) !important;
    overflow: hidden !important;
  }

  body:not(.report-open) .idea-tabs-rail__stack {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 3vw !important;
    padding: 0 9vw !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
  }

  body:not(.report-open) .idea-tabs-rail__stack::-webkit-scrollbar {
    display: none !important;
  }

  body:not(.report-open) .idea-mini-tab {
    flex: 0 0 32vw !important;
    height: 4.2vh !important;
    scroll-snap-align: center !important;
    border-radius: 2vh !important;
    border: 1px solid rgba(203,216,242,.75) !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 .8vh 1.8vh rgba(16,24,40,.08) !important;
    display: grid !important;
    place-items: center !important;
    padding: .9vh 1.8vw !important;
  }

  body:not(.report-open) .idea-mini-tab.is-active,
  body:not(.report-open) .idea-mini-tab[aria-selected="true"] {
    border: 1.5px solid #2457f5 !important;
    box-shadow: 0 0 0 3px rgba(36,87,245,.10), 0 1vh 2.4vh rgba(36,87,245,.14) !important;
  }

  body:not(.report-open) .idea-mini-tab__title {
    font-size: clamp(12px, 3.2vw, 16px) !important;
    font-weight: 900 !important;
    color: #101828 !important;
    line-height: 1.05 !important;
    text-align: center !important;
  }

  body:not(.report-open) .idea-mini-tab__eyebrow {
    font-size: clamp(9px, 2.3vw, 11px) !important;
    font-weight: 850 !important;
    color: #667085 !important;
    text-align: center !important;
    margin-top: .6vh !important;
  }

  /* fake carousel arrows */
  body:not(.report-open) .app-shell.has-idea-tabs .idea-tabs-rail::before,
  body:not(.report-open) .app-shell.has-idea-tabs .idea-tabs-rail::after {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 7vh !important;
    height: 7vh !important;
    border-radius: 999px !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(255,255,255,.92) !important;
    box-shadow: 0 .7vh 1.8vh rgba(16,24,40,.08) !important;
    color: #667085 !important;
    font-size: 4vh !important;
    z-index: 10 !important;
    pointer-events: none !important;
  }

  body:not(.report-open) .app-shell.has-idea-tabs .idea-tabs-rail::before {
    content: "‹" !important;
    left: 2vw !important;
  }

  body:not(.report-open) .app-shell.has-idea-tabs .idea-tabs-rail::after {
    content: "›" !important;
    right: 2vw !important;
  }
}

@media (max-width: 767px) {

  body:not(.report-open) .app-shell.has-idea-tabs .idea-tabs-rail {
    position: relative !important;
    width: 95vw !important;
    height: 9.6vh !important;
    flex: 0 0 9.6vh !important;
    padding: .8vh 11vw !important;
    overflow: hidden !important;
  }

  body:not(.report-open) .idea-tabs-rail__stack {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    display: flex !important;
    gap: 2vw !important;
    align-items: center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
  }

  body:not(.report-open) .idea-tabs-rail__stack::-webkit-scrollbar {
    display: none !important;
  }

  body:not(.report-open) .idea-mini-tab {
    flex: 0 0 calc((100% - 4vw) / 3) !important;
    width: calc((100% - 4vw) / 3) !important;
    min-width: calc((100% - 4vw) / 3) !important;
    max-width: calc((100% - 4vw) / 3) !important;

    height: 6.8vh !important;
    min-height: 6.8vh !important;

    padding: .5vh .8vw !important;
    border-radius: 1.7vh !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;
    scroll-snap-align: center !important;
  }

  body:not(.report-open) .idea-mini-tab__title {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(9px, 2.3vw, 12px) !important;
    line-height: 1.05 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body:not(.report-open) .idea-mini-tab__eyebrow {
    width: 100% !important;
    font-size: clamp(7px, 1.8vw, 9px) !important;
    line-height: 1 !important;
    margin-top: .35vh !important;
    text-align: center !important;
  }

  body:not(.report-open) .app-shell.has-idea-tabs .idea-tabs-rail::before,
  body:not(.report-open) .app-shell.has-idea-tabs .idea-tabs-rail::after {
    width: 5.4vh !important;
    height: 5.4vh !important;
    font-size: 3vh !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  body:not(.report-open) .app-shell.has-idea-tabs .idea-tabs-rail::before {
    left: 2vw !important;
  }

  body:not(.report-open) .app-shell.has-idea-tabs .idea-tabs-rail::after {
    right: 2vw !important;
  }
}


@media (max-width: 767px) {

  body:not(.report-open) .app-shell.has-idea-tabs .idea-tabs-rail {
    display: block !important;
    width: 95vw !important;
    height: 9.5vh !important;
    flex: 0 0 9.5vh !important;
    padding: .8vh 10vw !important;
    overflow: hidden !important;
  }

  body:not(.report-open) .idea-tabs-rail__stack {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    height: 100% !important;
    gap: 2vw !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body:not(.report-open) .idea-mini-tab {
    flex: 0 0 calc((100% - 4vw) / 3) !important;
    min-width: calc((100% - 4vw) / 3) !important;
    max-width: calc((100% - 4vw) / 3) !important;
    height: 6.4vh !important;
    display: flex !important;
  }
}


@media (max-width: 767px) {

  /* Keep the gray text panel inside the phone screen */
  .hero-report-card__top {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    display: block !important;
  }

  .hero-report-main {
    width: calc(100% - 3vw) !important;
    max-width: calc(100% - 3vw) !important;
    margin: 0 1.5vw !important;
    padding: 1vh 2.2vw !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .hero-report-advice {
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #heroReportSummary,
  .hero-report-summary-big {
    max-width: 85vw !important; /* shorter lines */
    overflow-wrap: break-word !important;
    word-break: normal !important;
    white-space: normal !important;
    line-height: 1.35 !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 5 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}


@media (max-width: 767px) {

  /* LABELS (REAL DEMAND, COMPETITION...) */
  .hero-report-metric span {
    font-size: clamp(8px, 2.6vw, 12px) !important;
    line-height: 1.1 !important;
    letter-spacing: .02em !important;
  }

  /* VALUES (65/100, 80/100...) */
  .hero-report-metric strong {
    font-size: clamp(12px, 3.8vw, 18px) !important;
    line-height: 1 !important;
  }

}

@media (max-width: 767px) {

  #submitIdeaButton.is-processing-label-visible .button__processing {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1.2vw !important;
    width: 100% !important;
    max-width: 92% !important;
    overflow: hidden !important;
  }

  #submitIdeaButton.is-processing-label-visible .button__processing-label,
  #submitIdeaButton.is-processing-label-visible .button__processing-word {
    font-size: clamp(11px, 3.1vw, 15px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #submitIdeaButton.is-processing-label-visible .button__processing-word {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 48vw !important;
  }
}


@media (max-width: 767px) {

  #submitIdeaButton.is-processing-label-visible .button__processing {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;  /* center horizontally */
    text-align: center !important;
    width: 100% !important;
  }

  #submitIdeaButton.is-processing-label-visible .button__processing-label,
  #submitIdeaButton.is-processing-label-visible .button__processing-word {
    display: inline-block !important;
    text-align: center !important;
  }
}

@media (max-width: 767px) {

  .app-shell,
  .app-layout {
    padding-top: 2.5vh !important; /* 👈 clean spacing from top */
  }

}


@media (max-width: 767px) {

 .partner-strip__eyebrow {
    display: none !important;
  }

}



@media (max-width: 767px) {

  body:not(.report-open) .app-shell.has-idea-tabs .idea-tabs-rail {
    display: block !important;
    width: 95vw !important;
    height: 13vh !important;
    flex: 0 0 13vh !important;
    margin: 0 auto !important;
    padding: 1.1vh 10vw !important;
    position: relative !important;
    overflow: hidden !important;

    border-radius: 2.8vh !important;
    border: 1px solid rgba(203,216,242,.8) !important;
    background: rgba(255,255,255,.78) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95),
                0 1vh 2.8vh rgba(16,24,40,.07) !important;
  }

  body:not(.report-open) .idea-tabs-rail__stack {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;

    width: 100% !important;
    height: 100% !important;

    gap: 2.2vw !important;
    padding: 0 !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  body:not(.report-open) .idea-tabs-rail__stack::-webkit-scrollbar {
    display: none !important;
  }

  body:not(.report-open) .idea-mini-tab {
    flex: 0 0 calc((100% - 4.4vw) / 3) !important;
    min-width: calc((100% - 4.4vw) / 3) !important;
    max-width: calc((100% - 4.4vw) / 3) !important;

    height: 9.4vh !important;
    padding: .8vh 1vw !important;

    border-radius: 2vh !important;
    border: 1px solid rgba(203,216,242,.85) !important;
    background: linear-gradient(180deg, #fff, #f8fbff) !important;
    box-shadow: 0 .8vh 1.8vh rgba(16,24,40,.08),
                inset 0 1px 0 rgba(255,255,255,.95) !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;

    overflow: hidden !important;
    scroll-snap-align: center !important;
  }

  body:not(.report-open) .idea-mini-tab__eyebrow {
    font-size: clamp(7px, 1.8vw, 9px) !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    color: #667085 !important;
    text-transform: uppercase !important;
    margin-bottom: .45vh !important;
  }

  body:not(.report-open) .idea-mini-tab__title {
    width: 100% !important;
    font-size: clamp(10px, 2.6vw, 13px) !important;
    line-height: 1.05 !important;
    font-weight: 950 !important;
    color: #101828 !important;
    text-align: center !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body:not(.report-open) .idea-mini-tab.is-active,
  body:not(.report-open) .idea-mini-tab[aria-selected="true"] {
    border-color: #2457f5 !important;
    box-shadow: 0 0 0 3px rgba(36,87,245,.10),
                0 1vh 2.4vh rgba(36,87,245,.16) !important;
  }

  body:not(.report-open) .app-shell.has-idea-tabs .idea-tabs-rail::before,
  body:not(.report-open) .app-shell.has-idea-tabs .idea-tabs-rail::after {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 5.6vh !important;
    height: 5.6vh !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 .7vh 1.8vh rgba(16,24,40,.10) !important;
    display: grid !important;
    place-items: center !important;
    color: #667085 !important;
    font-size: 3.2vh !important;
    z-index: 20 !important;
    pointer-events: none !important;
  }

  body:not(.report-open) .app-shell.has-idea-tabs .idea-tabs-rail::before {
    content: "‹" !important;
    left: 2vw !important;
  }

  body:not(.report-open) .app-shell.has-idea-tabs .idea-tabs-rail::after {
    content: "›" !important;
    right: 2vw !important;
  }
}


@media (max-width: 767px) {

/* Video must fully cover the morph screen */
.hero-processing-layer {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  background: #05070b !important;
  z-index: 50 !important;
}

.hero-processing-layer.is-visible {
  display: block !important;
}

.hero-processing-video {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: center center !important;

  border-radius: inherit !important;
  opacity: 1 !important;
  transform: none !important;
}

.hero-processing-overlay {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
}

  body:not(.report-open) #ideaTabsStack,
  body:not(.report-open) .idea-tabs-rail__stack {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    height: 100% !important;

    gap: 2.2vw !important;
    padding: 0 !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    grid-template-columns: none !important;
    grid-template-rows: none !important;
  }

  body:not(.report-open) #ideaTabsStack > .idea-mini-tab,
  body:not(.report-open) .idea-tabs-rail__stack > .idea-mini-tab {
    flex: 0 0 calc((100% - 4.4vw) / 3) !important;
    width: calc((100% - 4.4vw) / 3) !important;
    min-width: calc((100% - 4.4vw) / 3) !important;
    max-width: calc((100% - 4.4vw) / 3) !important;

    height: 8.4vh !important;
    position: relative !important;
    display: flex !important;
  }
}




@media (max-width: 767px) {

  .main-content {
    display: flex !important;
    flex-direction: column !important;
  }

}



@media (max-width: 767px) {

  .morph-showcase {
    flex: 1 1 auto !important;
  }

  .idea-tabs-rail {
    flex: 0 0 auto !important;
    margin: 2vh 0 !important;
  }

  .sidebar,
  .bottom-cards,
  .sidebar-step,
  .sidebar__nav {
    flex: 1 1 auto !important;
  }

}


@media (max-width: 767px) {

  .idea-tabs-rail {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .idea-tabs-rail {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

.morph-showcase {
  flex: 0 0 auto !important;
}

.sidebar {
  flex: 0 0 auto !important;
}

@media (max-width: 767px) {

  body:not(.report-open) .main-content {
    display: grid !important;
    grid-template-rows: auto 1fr auto 1fr auto !important;
  }

  body:not(.report-open) .morph-showcase {
    grid-row: 1 !important;
  }

  body:not(.report-open) .idea-tabs-rail {
    grid-row: 3 !important;
  }

  body:not(.report-open) .sidebar {
    grid-row: 5 !important;
  }

}



}

@media (max-width: 767px) {

  body.report-open .main-content {
    display: flex !important;
    flex-direction: column !important;
  }

}


@media (max-width: 767px) {

body.report-open .mobile-report-simple {
  grid-template-rows: 1fr !important;
}

body.report-open .mobile-report-simple__nav {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 1.4vw !important;

  height: auto !important;
min-height: 5.8vh !important;
padding-top: .6vh !important;
padding-bottom: .6vh !important;

  padding: .55vh .8vw !important;

  overflow-x: auto !important;
  overflow-y: visible !important;

  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;

  position: relative !important;
  z-index: 80 !important;

  transform: translateY(-1.15vh) !important;
  margin-bottom: -1.15vh !important;
}


body.report-open .mobile-report-simple {
  overflow: visible !important;
}

body.report-open #reportDashboard {
  overflow: visible !important;
}

body.report-open .mobile-report-simple__nav button {
  height: 4.4vh !important;
  min-height: 4.4vh !important;
  align-self: center !important;
}

  body.report-open .mobile-report-simple__nav::-webkit-scrollbar {
    display: none !important;
  }

  body.report-open .mobile-report-simple__nav button {
    flex: 0 0 32vw !important;
    width: 32vw !important;
    min-width: 32vw !important;
    max-width: 32vw !important;

    height: 4.8vh !important;
    min-height: 4.8vh !important;

    padding: .25vh 1.2vw !important;
    margin: 0 !important;

    border-radius: 999px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .15vh !important;

    font-size: clamp(7px, 1.9vw, 10px) !important;
    line-height: 1 !important;
    font-weight: 900 !important;

    scroll-snap-align: center !important;
  }

  body.report-open .mobile-report-simple__nav button::after {
    display: block !important;
    margin-top: .05vh !important;
    font-size: clamp(10px, 3vw, 15px) !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    opacity: .95 !important;
  }

  body.report-open .mobile-report-simple__nav button:nth-child(1)::after {
    content: "◎";
  }

  body.report-open .mobile-report-simple__nav button:nth-child(2)::after {
    content: "↗";
  }

  body.report-open .mobile-report-simple__nav button:nth-child(3)::after {
    content: "$";
  }

  body.report-open .mobile-report-simple__nav button:nth-child(4)::after {
    content: "⏱";
  }

  body.report-open .mobile-report-simple__nav button:nth-child(5)::after {
    content: "⚑";
  }
}


@media (max-width: 767px) {

  .app-shell,
  .app-layout {
    padding-top: 1.2vh !important; /* was ~2.5vh */
  }
  
  
  

}

@media (max-width: 767px) {

  body:not(.report-open) .idea-mini-tab__main {
    width: 100% !important;
    height: 100% !important;

    display: grid !important;
    grid-template-rows: auto 1fr !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;

    gap: .25vh .8vw !important;
  }

  /* Put label top-left */
  body:not(.report-open) .idea-mini-tab__text {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;

    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
  }

  /* Small label */
  body:not(.report-open) .idea-mini-tab__eyebrow {
    font-size: clamp(6px, 1.45vw, 8px) !important;
    line-height: 1 !important;
    letter-spacing: .06em !important;
    margin: 0 0 .35vh 0 !important;
    text-align: left !important;
  }

  /* Big name underneath */
  body:not(.report-open) .idea-mini-tab__title {
    font-size: clamp(12px, 3.3vw, 16px) !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    text-align: left !important;

    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Put score on same top row as label, right side */
  body:not(.report-open) .idea-mini-tab__meta {
    grid-column: 2 !important;
    grid-row: 1 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: .5vw !important;

    align-self: start !important;
    padding-top: .1vh !important;
  }

  body:not(.report-open) .idea-mini-tab__score-wrap {
    display: flex !important;
    align-items: baseline !important;
    gap: .1vw !important;
    white-space: nowrap !important;
  }

  /* Make score tiny */
  body:not(.report-open) .idea-mini-tab__score {
    font-size: clamp(10px, 2.5vw, 13px) !important;
    line-height: 1 !important;
    font-weight: 950 !important;
  }

  body:not(.report-open) .idea-mini-tab__score-max {
    font-size: clamp(5px, 1.3vw, 7px) !important;
    line-height: 1 !important;
    font-weight: 900 !important;
  }

  body:not(.report-open) .idea-mini-tab__chevron {
    font-size: clamp(12px, 3vw, 16px) !important;
    line-height: 1 !important;
  }
}

@media (max-width: 767px) {

  body:not(.report-open) .idea-mini-tab__meta {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important; /* 👈 span full height */

    display: flex !important;
    align-items: center !important; /* 👈 vertical center */
    justify-content: flex-end !important;

    gap: .5vw !important;

    align-self: center !important; /* 👈 override previous */
    padding-top: 0 !important; /* remove offset */
  }

}

@media (max-width: 767px) {

  /* Premium lens container */
  body:not(.report-open) .app-shell.has-idea-tabs .idea-tabs-rail {
    width: 95vw !important;
    height: 9.8vh !important;
    flex: 0 0 9.8vh !important;
    padding: 1vh 9.5vw !important;
    margin: 0 auto !important;

    border-radius: 3vh !important;
    border: 1px solid rgba(184, 204, 245, .75) !important;

    background:
      radial-gradient(circle at 50% 0%, rgba(36,87,245,.10), transparent 45%),
      linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,250,255,.72)) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      inset 0 -1.2vh 2.8vh rgba(36,87,245,.045),
      0 1vh 2.4vh rgba(16,24,40,.07) !important;

    overflow: hidden !important;
    position: relative !important;
  }

  /* Inner swipe track */
  body:not(.report-open) #ideaTabsStack,
  body:not(.report-open) .idea-tabs-rail__stack {
    height: 100% !important;
    width: 100% !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;

    gap: 2.2vw !important;
    padding: 0 !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  body:not(.report-open) #ideaTabsStack::-webkit-scrollbar {
    display: none !important;
  }

  /* Individual tab card */
  body:not(.report-open) .idea-mini-tab {
    flex: 0 0 33vw !important;
    width: 33vw !important;
    min-width: 33vw !important;
    max-width: 33vw !important;

    height: 7.2vh !important;
    min-height: 7.2vh !important;

    padding: .75vh 2vw !important;
    border-radius: 2.15vh !important;

    background:
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,250,255,.92)) !important;

    border: 1px solid rgba(184,204,245,.82) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.98),
      0 .7vh 1.8vh rgba(16,24,40,.075) !important;

    scroll-snap-align: center !important;
    overflow: hidden !important;
    transform: translateZ(0) !important;
  }

  /* Selected tab */
  body:not(.report-open) .idea-mini-tab.is-active {
    border-color: rgba(36,87,245,.9) !important;
    background:
      radial-gradient(circle at 20% 0%, rgba(36,87,245,.14), transparent 42%),
      linear-gradient(180deg, #ffffff, #f4f8ff) !important;

    box-shadow:
      0 0 0 3px rgba(36,87,245,.10),
      0 1vh 2.4vh rgba(36,87,245,.16),
      inset 0 1px 0 rgba(255,255,255,.98) !important;
  }

  /* Tab content layout */
  body:not(.report-open) .idea-mini-tab__main {
    width: 100% !important;
    height: 100% !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto 1fr !important;
    column-gap: 1vw !important;
  }

  body:not(.report-open) .idea-mini-tab__text {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;

    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
  }

  body:not(.report-open) .idea-mini-tab__eyebrow {
    font-size: clamp(6px, 1.5vw, 8px) !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: .08em !important;
    color: #667085 !important;
    margin: 0 0 .45vh 0 !important;
  }

  body:not(.report-open) .idea-mini-tab__title {
    width: 100% !important;
    font-size: clamp(12px, 3.25vw, 16px) !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: -.05em !important;
    color: #101828 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
  }

  body:not(.report-open) .idea-mini-tab__meta {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: .45vw !important;
  }

  body:not(.report-open) .idea-mini-tab__score {
    font-size: clamp(10px, 2.6vw, 13px) !important;
    line-height: 1 !important;
    font-weight: 950 !important;
  }

  body:not(.report-open) .idea-mini-tab__score-max {
    font-size: clamp(5px, 1.35vw, 7px) !important;
    font-weight: 900 !important;
  }

  body:not(.report-open) .idea-mini-tab__chevron {
    font-size: clamp(13px, 3.3vw, 17px) !important;
    color: #667085 !important;
  }

  /* Apple-like floating arrows */
  body:not(.report-open) .app-shell.has-idea-tabs .idea-tabs-rail::before,
  body:not(.report-open) .app-shell.has-idea-tabs .idea-tabs-rail::after {
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 5.4vh !important;
    height: 5.4vh !important;

    border-radius: 999px !important;
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 .8vh 2vh rgba(16,24,40,.10) !important;

    font-size: 3vh !important;
    color: #667085 !important;
    z-index: 30 !important;
  }

  body:not(.report-open) .app-shell.has-idea-tabs .idea-tabs-rail::before {
    left: 2vw !important;
  }

  body:not(.report-open) .app-shell.has-idea-tabs .idea-tabs-rail::after {
    right: 2vw !important;
  }
}



@media (max-width: 767px) {

  /* DEFAULT = no frame */
  body:not(.report-open) .app-shell.has-idea-tabs .idea-tabs-rail {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  /* SHOW frame only when 4+ tabs */
  body:not(.report-open) .app-shell.has-idea-tabs.tabs-scroll-mode .idea-tabs-rail {
    padding: 1vh 9.5vw !important;

    border-radius: 3vh !important;
    border: 1px solid rgba(184, 204, 245, .75) !important;

    background:
      radial-gradient(circle at 50% 0%, rgba(36,87,245,.10), transparent 45%),
      linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,250,255,.72)) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      inset 0 -1.2vh 2.8vh rgba(36,87,245,.045),
      0 1vh 2.4vh rgba(16,24,40,.07) !important;
  }
  
  

}



@media (max-width: 767px) {

  /* Remove the big outer slider frame completely */
  body:not(.report-open) .app-shell.has-idea-tabs .idea-tabs-rail {
    width: 95vw !important;
    height: 8.8vh !important;
    flex: 0 0 8.8vh !important;

    padding: 0 !important;
    margin: 0 auto !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;

    overflow: visible !important;
  }

  /* Let the actual tabs use the available space */
  body:not(.report-open) #ideaTabsStack,
  body:not(.report-open) .idea-tabs-rail__stack {
    width: 100% !important;
    height: 100% !important;

    padding: 0 !important;
    gap: 2.4vw !important;

    overflow-x: auto !important;
    overflow-y: visible !important;

    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;

    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body:not(.report-open) #ideaTabsStack::-webkit-scrollbar {
    display: none !important;
  }

  /* Make each tab bigger/full-size */
  body:not(.report-open) .idea-mini-tab {
    flex: 0 0 34vw !important;
    width: 34vw !important;
    min-width: 34vw !important;
    max-width: 34vw !important;

    height: 7.4vh !important;
    min-height: 7.4vh !important;

    padding: .85vh 2.2vw !important;
    border-radius: 2.2vh !important;
  }

  /* Optional: remove fake side arrows too */
  body:not(.report-open) .app-shell.has-idea-tabs .idea-tabs-rail::before,
  body:not(.report-open) .app-shell.has-idea-tabs .idea-tabs-rail::after {
    display: none !important;
    content: none !important;
  }
}


@media (max-width: 767px) {

  .hero-report-score-wrap {
    position: absolute !important;
    right: 1.6vw !important;
    bottom: .8vh !important;

    width: clamp(64px, 17vw, 76px) !important;
    min-width: clamp(64px, 17vw, 76px) !important;
    max-width: clamp(64px, 17vw, 76px) !important;

    height: clamp(64px, 17vw, 76px) !important;
    min-height: clamp(64px, 17vw, 76px) !important;
    max-height: clamp(64px, 17vw, 76px) !important;

    padding: 0 !important;
    border-radius: 50% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;
  }

  .hero-report-score {
    width: 100% !important;
    height: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;
  }

  .hero-report-score__inner {
    width: auto !important;
    height: auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: .08em !important;
    margin: 0 !important;
    padding: 0 !important;

    transform: translateY(0) !important;
  }

  #heroReportScoreValue {
    display: block !important;
    font-size: clamp(24px, 6vw, 31px) !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .hero-report-score__inner span {
    display: block !important;
    font-size: clamp(7px, 1.65vw, 9px) !important;
    line-height: 1 !important;
    margin: .15em 0 0 0 !important;
    padding: 0 !important;
  }
}

@media (max-width: 767px) {

  /* Base buttons */
  .mobile-report-simple__nav button {
    transition: all 0.25s ease !important;
    position: relative !important;
    transform: scale(0.96) !important;
    opacity: 0.85 !important;
  }

  /* 🔥 SELECTED STATE (THIS IS THE MAGIC) */
  .mobile-report-simple__nav button.is-active {

    /* Bigger */
    transform: scale(1.01) !important;

    /* Taller */
    height: 5.6vh !important;
    min-height: 5.6vh !important;

    /* Strong blue */
    background: linear-gradient(180deg, #4c79ff, #2457f5) !important;
    color: #fff !important;

    /* Lift it */
    z-index: 5 !important;

    /* Glow */
    box-shadow:
      0 0 0 2px rgba(36,87,245,.25),
      0 1.2vh 2.6vh rgba(36,87,245,.35),
      inset 0 1px 0 rgba(255,255,255,.3) !important;

    border: none !important;
  }

  /* Icon gets bigger too */
  .mobile-report-simple__nav button.is-active::after {
    transform: scale(1.2) !important;
  }

  /* Optional: push others slightly down */
  .mobile-report-simple__nav button:not(.is-active) {
    transform: scale(0.92) translateY(0.4vh) !important;
    opacity: 0.75 !important;
  }
  
  
  
  
  .hero-report-metric.is-selected {
    height: 7.5vh !important;        /* ~2.5x */
    min-height: 7.5vh !important;

    padding: .6vh 1vw !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;

    transform: translateY(-0.6vh) !important; /* lift without shrinking */
    z-index: 50 !important;

    background: linear-gradient(180deg, #4c79ff, #2457f5) !important;
    color: #fff !important;

    border-radius: 1.6vh !important;

    box-shadow:
      0 0 0 2px rgba(36,87,245,.2),
      0 1vh 2.2vh rgba(36,87,245,.35),
      inset 0 1px 0 rgba(255,255,255,.3) !important;
  }

  /* Bigger text when selected */
  .hero-report-metric.is-selected strong {
    font-size: clamp(11px, 3.4vw, 15px) !important;
  }

  .hero-report-metric.is-selected span {
    font-size: clamp(6px, 1.8vw, 9px) !important;
  }

}



@media (max-width: 767px) {

  /* TOP EXTENDED BUTTON AREA: shrink the whole form, not just button */
  body.report-open .landing-hero,
  body.report-open .landing-hero__content,
  body.report-open .idea-form,
  body.report-open .idea-form__field {
    width: 95vw !important;
    max-width: 95vw !important;
    height: 6.4vh !important;
    min-height: 6.4vh !important;
    max-height: 6.4vh !important;
    flex: 0 0 6.4vh !important;
    margin: 0 auto 1vh !important;
    padding: 0 !important;
  }

  body.report-open .idea-form__field {
    display: block !important;
    border-radius: 2.2vh !important;
    overflow: hidden !important;
  }

  body.report-open #ideaInput,
  body.report-open .idea-form textarea {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
  }

  body.report-open #submitIdeaButton {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 2.2vh !important;
    align-items: center !important;
    justify-content: center !important;
  }


  /* SAVE TO VAULT: full-width bottom twin of extended button */
  body.report-open #saveVaultFloating {
    display: flex !important;
    position: fixed !important;

    left: 50% !important;
    bottom: max(1.2vh, env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;

    width: 95vw !important;
    max-width: 95vw !important;
    height: 6.4vh !important;
    min-height: 6.4vh !important;
    max-height: 6.4vh !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 2.2vh !important;
    overflow: hidden !important;

    background: transparent !important;
    box-shadow:
      0 1vh 2.4vh rgba(16,24,40,.12),
      0 0 0 3px rgba(36,87,245,.08) !important;

    z-index: 9999 !important;
  }

  body.report-open #saveVaultFloating img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  body.report-open .main-content {
    padding-bottom: 7.8vh !important;
  }

  body:not(.report-open) #saveVaultFloating {
    display: none !important;
  }
}


@media (max-width: 767px) {

  /* Hide image on mobile */
  body.report-open #saveVaultFloating img {
    display: none !important;
  }

  /* Use text instead */
  body.report-open #saveVaultFloating {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-family: "Posterama", system-ui, -apple-system, sans-serif !important;

    font-size: clamp(11px, 2.8vw, 15px) !important;
    font-weight: 700 !important;
    letter-spacing: .14em !important;

    color: #ffffff !important;

    background: linear-gradient(180deg, #4c79ff, #2457f5) !important;

    text-transform: uppercase !important;
  }

  body.report-open .save-vault-text {
    display: block !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

}



@media (max-width: 767px) {



  body.report-open .landing-hero,
  body.report-open .landing-hero__content {
    margin-top: 0 !important;
    padding: 0 !important;
  }

  /* tighten gap between name + report */
  body.report-open .morph-showcase {
    margin-top: -0.8vh !important;
  }
  
  
  
  .report-panel--competition,
.report-panel {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.08) 0%,
    rgba(255,255,255,0.02) 100%
  );

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  border-radius: 22px;

  border: 1px solid rgba(255,255,255,0.08);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.2),
    0 10px 30px rgba(0,0,0,0.25);
}



}

@media (max-width: 767px) {

  /* Parent stays clean */
  body.report-open .mobile-report-simple__stage {
    background: rgba(255,255,255,.55) !important;
    border: 1px solid rgba(180,202,245,.9) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 1vh 2.8vh rgba(16,24,40,.10) !important;
  }

  /* THIS is the visible information panel */
  body.report-open .mobile-data-card {
    position: relative !important;
    z-index: 2 !important;

    width: 100% !important;
    height: 100% !important;

    border-radius: 2.4vh !important;
    overflow: hidden !important;

    background:
      radial-gradient(circle at 18% 20%, rgba(36,87,245,.18), transparent 34%),
      radial-gradient(circle at 82% 78%, rgba(36,87,245,.12), transparent 38%),
      linear-gradient(180deg, rgba(248,251,255,.96), rgba(228,238,255,.88)) !important;

    border: 1px solid rgba(180,202,245,.88) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      inset 0 -2vh 4vh rgba(36,87,245,.08),
      0 .8vh 2.2vh rgba(16,24,40,.08) !important;

    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }

  body.report-open .mobile-data-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    border-radius: inherit !important;

    background:
      linear-gradient(115deg, transparent 0%, rgba(255,255,255,.42) 44%, transparent 62%),
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.7), transparent 55%) !important;

    opacity: .8 !important;
    z-index: 0 !important;
  }

  body.report-open .mobile-data-card__icon,
  body.report-open .mobile-data-card__content {
    position: relative !important;
    z-index: 2 !important;
  }
}


@media (max-width: 767px) {

  body:not(.report-open) .sidebar-step {
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  body:not(.report-open) .sidebar-step__media {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;

    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    
    border-radius: inherit !important;

    opacity: 1 !important;
    filter: none !important;
  }

  body:not(.report-open) .sidebar-step[data-step="1"] .sidebar-step__media {
    background-image: url("/static/AuditButton-phone.png") !important;
  }

  body:not(.report-open) .sidebar-step[data-step="2"] .sidebar-step__media {
    background-image: url("/static/BuildButton-phone.png") !important;
  }

  body:not(.report-open) .sidebar-step[data-step="3"] .sidebar-step__media {
    background-image: url("/static/LaunchButton-phone.png") !important;
  }

  body:not(.report-open) .sidebar-step[data-step="4"] .sidebar-step__media {
    background-image: url("/static/ScaleButton-phone.png") !important;
  }

  body:not(.report-open) .sidebar-step__overlay {
    display: none !important;
  }
}


@media (max-width: 767px) {

  body.report-open #saveVaultFloating {
    display: none !important;
  }

  body.report-open #mobileReportActions {
    position: fixed !important;
    left: 50% !important;
    bottom: max(1.2vh, env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;

    width: 95vw !important;
    height: 6.4vh !important;

    display: grid !important;
    grid-template-columns: .85fr 1.3fr .85fr !important;
    gap: 2vw !important;

    z-index: 10000 !important;
  }

  #mobileReportActions button {
    border: 0 !important;
    border-radius: 2.1vh !important;

    font-family: "Posterama", system-ui, -apple-system, sans-serif !important;
    font-size: clamp(11px, 3vw, 15px) !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    color: #fff !important;

    background: linear-gradient(180deg, #4c79ff, #2457f5) !important;
    box-shadow:
      0 1vh 2.4vh rgba(16,24,40,.12),
      0 0 0 3px rgba(36,87,245,.08) !important;
  }

  #mobileBuildAction {
    transform: scale(1.04) !important;
    box-shadow:
      0 1.2vh 2.8vh rgba(36,87,245,.24),
      0 0 0 3px rgba(36,87,245,.12) !important;
  }

  body:not(.report-open) #mobileReportActions {
    display: none !important;
  }
}

@media (max-width: 767px) {

body.report-open .idea-form__field {
  transform: translateY(1.7vh) !important;
  transition: transform 0.3s ease;
}

}

@media (max-width: 768px) {

  .sidebar-step[aria-disabled="true"],
  .sidebar-step.is-disabled {
    pointer-events: none !important;
    cursor: not-allowed !important;
  }

  .sidebar-step[aria-disabled="false"],
  .sidebar-step.is-enabled {
    pointer-events: auto !important;
    cursor: pointer !important;
  }
}

@media (max-width: 767px) {

  #ideaTabsRail {
    margin-bottom: 0 !important; /* 🔥 increase this */
  }

}


@media (max-width: 767px) {

  .idea-tabs-rail {
    flex: 0 0 auto !important;
    width: 90%;
  }

  body:not(.report-open) .app-shell.has-idea-tabs .idea-tabs-rail {
    height: 13vh !important;
    flex: 0 0 13vh !important;
  }

  body:not(.report-open) .idea-mini-tab {
    height: 100% !important;
  }
 

}

@media (max-width: 767px) {

  body.report-open #mobileReportActions #mobileBuildAction {
    background: #ffffff !important;
    color: #123ccf !important;

    border: 1px solid rgba(36, 87, 245, 0.32) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 1vh 2.4vh rgba(36,87,245,.16),
      0 0 0 3px rgba(36,87,245,.08) !important;

    transform: scale(1.04) !important;
  }

  body.report-open #mobileReportActions #mobileBuildAction:hover,
  body.report-open #mobileReportActions #mobileBuildAction:active {
    background: #f6f9ff !important;
    color: #123ccf !important;
  }

}



/* =========================================================
   MOBILE REPORT TABS — SELECTED CATEGORY BLACK
   Competition / Next Steps / Financials buttons
   ========================================================= */

/* =========================================================
   MOBILE REPORT CATEGORY NAV — SELECTED BUTTON BLACK
   Competition / Next Steps / Financials / Time & Effort
   ========================================================= */

@media (max-width: 767px) {

  body.report-open .mobile-report-simple__nav button.is-active {
    background:
      linear-gradient(180deg, #1b1f2a 0%, #05070d 100%) !important;

    color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, .82) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.14),
      0 1.2vh 2.6vh rgba(0,0,0,.28),
      0 0 0 2px rgba(0,0,0,.10) !important;
  }

  body.report-open .mobile-report-simple__nav button.is-active::after {
    color: #ffffff !important;
  }

}



/* =========================================================
   MOBILE HERO METRICS — GIVE EACH CATEGORY MORE WIDTH
   ========================================================= */

@media (max-width: 767px) {

  .hero-report-metrics {
    width: 110% !important;
    max-width: 110% !important;
    margin-left: 0 !important;
    margin-right: -5% !important;

    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    overflow: visible !important;
  }

  .hero-report-metric {
    overflow: visible !important;
    padding-left: .35vw !important;
    padding-right: .35vw !important;
  }

  .hero-report-metric span {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;

    font-size: clamp(6px, 1.75vw, 9px) !important;
    letter-spacing: -0.03em !important;
  }

}



/* =========================================================
   MOBILE REPORT NAV — TEXT ONLY, BIGGER FONT
   Removes icons under Competition / Next Steps / Financials
   ========================================================= */

@media (max-width: 767px) {

  body.report-open .mobile-report-simple__nav button::after,
  body.report-open .mobile-report-simple__nav button.is-active::after,
  body.report-open .mobile-report-simple__nav button:nth-child(1)::after,
  body.report-open .mobile-report-simple__nav button:nth-child(2)::after,
  body.report-open .mobile-report-simple__nav button:nth-child(3)::after,
  body.report-open .mobile-report-simple__nav button:nth-child(4)::after,
  body.report-open .mobile-report-simple__nav button:nth-child(5)::after {
    content: none !important;
    display: none !important;
  }

  body.report-open .mobile-report-simple__nav button {
    font-size: clamp(14px, 4.2vw, 20px) !important;
    line-height: 1 !important;
    font-weight: 950 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 4.8vh !important;
    min-height: 4.8vh !important;
    padding: 0 2vw !important;
  }

  body.report-open .mobile-report-simple__nav button.is-active {
    height: 5.4vh !important;
    min-height: 5.4vh !important;
    font-size: clamp(15px, 4.5vw, 22px) !important;
  }

}



/* =========================================================
   MOBILE REPORT DATA CARDS — APPLE-STYLE CATEGORY SCENES
   Competition / Next Steps / Financials / Time & Effort / Flags
   Add at VERY BOTTOM of idea-to-business-phone.css
   ========================================================= */

@media (max-width: 767px) {

  /* Main stage: cleaner, more premium screen container */
  body.report-open .mobile-report-simple__stage {
    position: relative !important;
    overflow: hidden !important;

    border-radius: 2.8vh !important;
    border: 1px solid rgba(179, 201, 245, .9) !important;

    background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.92), transparent 46%),
      linear-gradient(180deg, rgba(255,255,255,.84), rgba(238,244,255,.72)) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.98),
      inset 0 -2vh 5vh rgba(36,87,245,.07),
      0 1.2vh 3.2vh rgba(16,24,40,.10) !important;

    backdrop-filter: blur(18px) saturate(1.25) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.25) !important;
  }

  /* The actual information card */
  body.report-open .mobile-data-card {
    position: relative !important;
    isolation: isolate !important;

    width: 100% !important;
    height: 100% !important;

    padding: 2.4vh 4.8vw !important;

    display: grid !important;
    grid-template-columns: 11vw minmax(0, 1fr) !important;
    gap: 3.4vw !important;
    align-items: center !important;

    border-radius: 2.7vh !important;
    overflow: hidden !important;

    border: 1px solid rgba(255,255,255,.78) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.92),
      inset 0 -2.6vh 5.8vh rgba(0,0,0,.045),
      0 1.2vh 3vh rgba(16,24,40,.12) !important;
  }

  /* Gloss / Apple glass reflection */
  body.report-open .mobile-data-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;

    background:
      linear-gradient(118deg, transparent 0%, rgba(255,255,255,.52) 43%, transparent 62%),
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.88), transparent 54%) !important;

    opacity: .82 !important;
  }

  /* Subtle abstract glow layer */
  body.report-open .mobile-data-card::after {
    content: "" !important;
    position: absolute !important;
    inset: auto -18% -36% -18% !important;
    height: 55% !important;
    z-index: 0 !important;
    pointer-events: none !important;

    border-radius: 50% !important;
    filter: blur(18px) !important;
    opacity: .72 !important;
  }

  body.report-open .mobile-data-card__icon,
  body.report-open .mobile-data-card__content {
    position: relative !important;
    z-index: 2 !important;
  }

  /* Bigger circular icon */
  body.report-open .mobile-data-card__icon {
    width: 11vw !important;
    height: 11vw !important;
    border-radius: 999px !important;

    display: grid !important;
    place-items: center !important;

    font-size: clamp(18px, 5.2vw, 26px) !important;
    font-weight: 950 !important;

    background: rgba(255,255,255,.56) !important;
    border: 1px solid rgba(255,255,255,.76) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 .8vh 1.8vh rgba(16,24,40,.10) !important;

    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  /* 2x bigger text */
  body.report-open .mobile-data-card__label {
    margin: 0 0 .7vh !important;

    font-size: clamp(13px, 3.7vw, 18px) !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
  }

  body.report-open .mobile-data-card__title {
    margin: 0 0 .9vh !important;

    font-size: clamp(24px, 7.2vw, 36px) !important;
    line-height: .92 !important;
    font-weight: 950 !important;
    letter-spacing: -.075em !important;
  }

  body.report-open .mobile-data-card__text {
    margin: 0 !important;

    font-size: clamp(16px, 4.45vw, 22px) !important;
    line-height: 1.16 !important;
    font-weight: 800 !important;
    letter-spacing: -.035em !important;
  }

  body.report-open .mobile-data-card__hint {
    margin-top: 1.2vh !important;

    font-size: clamp(11px, 3vw, 15px) !important;
    line-height: 1.1 !important;
    font-weight: 850 !important;
    letter-spacing: -.02em !important;
    opacity: .72 !important;
  }


  /* =========================================================
     1) COMPETITION — dark titanium / strategy board
     ========================================================= */

  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(1).is-active)
  .mobile-data-card {
    background:
      radial-gradient(circle at 16% 18%, rgba(255,255,255,.20), transparent 24%),
      radial-gradient(circle at 88% 12%, rgba(36,87,245,.34), transparent 34%),
      radial-gradient(circle at 82% 86%, rgba(0,0,0,.34), transparent 36%),
      linear-gradient(145deg, #111827 0%, #05070d 58%, #121826 100%) !important;

    color: #ffffff !important;
    border-color: rgba(255,255,255,.16) !important;
  }

  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(1).is-active)
  .mobile-data-card::after {
    background: radial-gradient(circle, rgba(36,87,245,.55), transparent 62%) !important;
  }

  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(1).is-active)
  .mobile-data-card__label {
    color: #8fb0ff !important;
  }

  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(1).is-active)
  .mobile-data-card__title,
  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(1).is-active)
  .mobile-data-card__text {
    color: #ffffff !important;
  }

  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(1).is-active)
  .mobile-data-card__hint {
    color: rgba(255,255,255,.68) !important;
  }

  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(1).is-active)
  .mobile-data-card__icon {
    color: #ffffff !important;
    background: rgba(36,87,245,.22) !important;
    border-color: rgba(143,176,255,.35) !important;
  }


  /* =========================================================
     2) NEXT STEPS — bright blueprint / action path
     ========================================================= */

  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(2).is-active)
  .mobile-data-card {
    background:
      linear-gradient(90deg, rgba(36,87,245,.075) 1px, transparent 1px),
      linear-gradient(0deg, rgba(36,87,245,.06) 1px, transparent 1px),
      radial-gradient(circle at 18% 18%, rgba(36,87,245,.24), transparent 34%),
      radial-gradient(circle at 84% 80%, rgba(99,142,255,.18), transparent 38%),
      linear-gradient(180deg, #ffffff 0%, #edf4ff 100%) !important;

    background-size:
      9vw 9vw,
      9vw 9vw,
      auto,
      auto,
      auto !important;

    color: #102041 !important;
  }

  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(2).is-active)
  .mobile-data-card::after {
    background: radial-gradient(circle, rgba(36,87,245,.28), transparent 62%) !important;
  }

  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(2).is-active)
  .mobile-data-card__label {
    color: #2457f5 !important;
  }

  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(2).is-active)
  .mobile-data-card__title {
    color: #102041 !important;
  }

  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(2).is-active)
  .mobile-data-card__text {
    color: #233452 !important;
  }

  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(2).is-active)
  .mobile-data-card__icon {
    color: #ffffff !important;
    background: linear-gradient(180deg, #4c79ff, #2457f5) !important;
    border-color: rgba(36,87,245,.35) !important;
  }


  /* =========================================================
     3) FINANCIALS — premium money / gold glass
     ========================================================= */

  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(3).is-active)
  .mobile-data-card {
    background:
      radial-gradient(circle at 18% 20%, rgba(255,184,77,.34), transparent 34%),
      radial-gradient(circle at 88% 78%, rgba(36,87,245,.16), transparent 38%),
      linear-gradient(145deg, #fffaf0 0%, #fff3d7 42%, #eef4ff 100%) !important;

    color: #1f2937 !important;
    border-color: rgba(255,199,94,.62) !important;
  }

  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(3).is-active)
  .mobile-data-card::after {
    background: radial-gradient(circle, rgba(255,153,0,.35), transparent 64%) !important;
  }

  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(3).is-active)
  .mobile-data-card__label {
    color: #b96b00 !important;
  }

  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(3).is-active)
  .mobile-data-card__title {
    color: #141923 !important;
  }

  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(3).is-active)
  .mobile-data-card__text {
    color: #354052 !important;
  }

  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(3).is-active)
  .mobile-data-card__icon {
    color: #ffffff !important;
    background: linear-gradient(180deg, #ffb347, #ff8a00) !important;
    border-color: rgba(255,153,0,.40) !important;
  }


  /* =========================================================
     4) TIME & EFFORT — calm clock / focus mode
     ========================================================= */

  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(4).is-active)
  .mobile-data-card {
    background:
      radial-gradient(circle at 50% 50%, rgba(36,87,245,.10) 0 1px, transparent 1.6px),
      conic-gradient(from 210deg at 78% 34%, rgba(36,87,245,.22), transparent 24%, rgba(99,142,255,.18), transparent 55%),
      radial-gradient(circle at 22% 80%, rgba(89,112,255,.20), transparent 34%),
      linear-gradient(180deg, #f8fbff 0%, #eaf1ff 100%) !important;

    background-size:
      3.8vw 3.8vw,
      auto,
      auto,
      auto !important;

    color: #102041 !important;
  }

  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(4).is-active)
  .mobile-data-card::after {
    background: radial-gradient(circle, rgba(36,87,245,.30), transparent 64%) !important;
  }

  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(4).is-active)
  .mobile-data-card__label {
    color: #2457f5 !important;
  }

  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(4).is-active)
  .mobile-data-card__title {
    color: #101828 !important;
  }

  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(4).is-active)
  .mobile-data-card__text {
    color: #2f3d56 !important;
  }

  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(4).is-active)
  .mobile-data-card__icon {
    color: #2457f5 !important;
    background: rgba(255,255,255,.72) !important;
    border-color: rgba(36,87,245,.28) !important;
  }


  /* =========================================================
     5) FLAGS — split signal / green + red warning system
     ========================================================= */

  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(5).is-active)
  .mobile-data-card {
    background:
      radial-gradient(circle at 18% 24%, rgba(18,183,106,.24), transparent 34%),
      radial-gradient(circle at 84% 78%, rgba(240,68,56,.20), transparent 34%),
      linear-gradient(135deg, rgba(236,253,243,.98) 0%, rgba(255,255,255,.96) 48%, rgba(fff,245,245,.96) 100%) !important;

    color: #152033 !important;
    border-color: rgba(18,183,106,.28) !important;
  }

  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(5).is-active)
  .mobile-data-card::after {
    background:
      radial-gradient(circle at 35% 50%, rgba(18,183,106,.30), transparent 50%),
      radial-gradient(circle at 70% 50%, rgba(240,68,56,.22), transparent 55%) !important;
  }

  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(5).is-active)
  .mobile-data-card__label {
    color: #067647 !important;
  }

  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(5).is-active)
  .mobile-data-card__title {
    color: #101828 !important;
  }

  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(5).is-active)
  .mobile-data-card__text {
    color: #2f3d56 !important;
  }

  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(5).is-active)
  .mobile-data-card__icon {
    color: #ffffff !important;
    background: linear-gradient(135deg, #12b76a 0%, #2457f5 52%, #f04438 100%) !important;
    border-color: rgba(255,255,255,.75) !important;
  }

}


/* =========================================================
   SMALL FIXES — FLAGS LABEL COLORS + NO COMPETITION GLARE
   ========================================================= */

@media (max-width: 767px) {

  /* 1) Competition: remove the white glare/reflection layer */
  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(1).is-active)
  .mobile-data-card::before {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
  }


  /* 2) Flags: make Red Flag label red */
  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(5).is-active)
  .mobile-data-card__label {
    color: #067647 !important; /* default green */
  }

  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(5).is-active)
  .mobile-data-card__label:has(+ .mobile-data-card__title),
  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(5).is-active)
  .mobile-data-card__label {
    color: #067647 !important;
  }

}


@media (max-width: 767px) {

  body.report-open .mobile-data-card.is-green-flag .mobile-data-card__label {
    color: #067647 !important;
  }

  body.report-open .mobile-data-card.is-red-flag .mobile-data-card__label {
    color: #d92d20 !important;
  }

}


/* =========================================================
   FINAL FIX — MOBILE FLAG LABEL COLORS
   Must be at VERY BOTTOM of idea-to-business-phone.css
   ========================================================= */

@media (max-width: 767px) {

  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(5).is-active)
  .mobile-data-card.is-green-flag
  .mobile-data-card__label {
    color: #067647 !important;
  }

  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(5).is-active)
  .mobile-data-card.is-red-flag
  .mobile-data-card__label {
    color: #d92d20 !important;
  }

}




/* =========================================================
   MOBILE REPORT — UPGRADED FINANCIALS + TIME & EFFORT
   Keeps Competition, Next Steps, and Flags unchanged
   ========================================================= */

@media (max-width: 767px) {

  /* =========================================================
     FINANCIALS — premium blue-money glass
     ========================================================= */

  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(3).is-active)
  .mobile-data-card {
    background:
      radial-gradient(circle at 18% 18%, rgba(36,87,245,.28), transparent 34%),
      radial-gradient(circle at 82% 18%, rgba(255,255,255,.70), transparent 30%),
      radial-gradient(circle at 74% 84%, rgba(255,138,0,.22), transparent 38%),
      linear-gradient(135deg, #f8fbff 0%, #eaf1ff 42%, #dfeaff 100%) !important;

    border-color: rgba(36,87,245,.34) !important;
    color: #101828 !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.96),
      inset 0 -3vh 6vh rgba(36,87,245,.12),
      0 1.2vh 3vh rgba(36,87,245,.16) !important;
  }

  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(3).is-active)
  .mobile-data-card::before {
    background:
      linear-gradient(120deg, transparent 0%, rgba(255,255,255,.55) 42%, transparent 62%),
      radial-gradient(circle at 55% 0%, rgba(255,255,255,.90), transparent 56%) !important;

    opacity: .68 !important;
  }

  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(3).is-active)
  .mobile-data-card::after {
    background:
      radial-gradient(circle at 35% 50%, rgba(36,87,245,.34), transparent 55%),
      radial-gradient(circle at 72% 50%, rgba(255,138,0,.22), transparent 58%) !important;

    opacity: .75 !important;
  }

  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(3).is-active)
  .mobile-data-card__label {
    color: #2457f5 !important;
  }

  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(3).is-active)
  .mobile-data-card__title {
    color: #101828 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.55) !important;
  }

  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(3).is-active)
  .mobile-data-card__text {
    color: #26364f !important;
  }

  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(3).is-active)
  .mobile-data-card__hint {
    color: rgba(36,87,245,.62) !important;
  }

  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(3).is-active)
  .mobile-data-card__icon {
    color: #ffffff !important;

    background:
      radial-gradient(circle at 30% 20%, rgba(255,255,255,.45), transparent 32%),
      linear-gradient(135deg, #2457f5 0%, #4c79ff 48%, #ff8a00 100%) !important;

    border-color: rgba(255,255,255,.72) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.45),
      0 .9vh 2vh rgba(36,87,245,.28) !important;
  }


  /* =========================================================
     TIME & EFFORT — deep blue focus / time portal
     ========================================================= */

  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(4).is-active)
  .mobile-data-card {
    background:
      radial-gradient(circle at 50% 50%, rgba(255,255,255,.12) 0 1px, transparent 1.8px),
      radial-gradient(circle at 78% 28%, rgba(76,121,255,.45), transparent 34%),
      radial-gradient(circle at 20% 82%, rgba(36,87,245,.32), transparent 42%),
      linear-gradient(145deg, #071126 0%, #102a68 48%, #2457f5 100%) !important;

    background-size:
      4vw 4vw,
      auto,
      auto,
      auto !important;

    border-color: rgba(143,176,255,.45) !important;
    color: #ffffff !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      inset 0 -3vh 6vh rgba(0,0,0,.18),
      0 1.3vh 3.2vh rgba(36,87,245,.28) !important;
  }

  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(4).is-active)
  .mobile-data-card::before {
    background:
      conic-gradient(from 210deg at 78% 34%,
        rgba(255,255,255,.00),
        rgba(255,255,255,.18),
        rgba(255,255,255,.00) 34%,
        rgba(143,176,255,.20),
        rgba(255,255,255,.00) 70%),
      linear-gradient(118deg, transparent 0%, rgba(255,255,255,.18) 44%, transparent 64%) !important;

    opacity: .72 !important;
  }

  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(4).is-active)
  .mobile-data-card::after {
    background:
      radial-gradient(circle at 50% 50%, rgba(143,176,255,.46), transparent 58%),
      radial-gradient(circle at 70% 70%, rgba(255,255,255,.14), transparent 52%) !important;

    opacity: .80 !important;
  }

  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(4).is-active)
  .mobile-data-card__label {
    color: #bcd0ff !important;
  }

  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(4).is-active)
  .mobile-data-card__title,
  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(4).is-active)
  .mobile-data-card__text {
    color: #ffffff !important;
  }

  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(4).is-active)
  .mobile-data-card__hint {
    color: rgba(255,255,255,.66) !important;
  }

  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(4).is-active)
  .mobile-data-card__icon {
    color: #2457f5 !important;

    background:
      radial-gradient(circle at 32% 22%, rgba(255,255,255,.95), transparent 30%),
      linear-gradient(180deg, #ffffff 0%, #dce7ff 100%) !important;

    border-color: rgba(255,255,255,.68) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 .9vh 2vh rgba(0,0,0,.18) !important;
  }

}



/* =========================================================
   MOBILE IDEA TABS — CENTER WHEN 1 OR 2, FULL ROW WHEN 3+
   Add at VERY BOTTOM of idea-to-business-phone.css
   ========================================================= */

@media (max-width: 767px) {

  /* Base mobile tab track */
  body:not(.report-open) #ideaTabsStack,
  body:not(.report-open) .idea-tabs-rail__stack {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;

    width: 100% !important;
    height: 100% !important;

    gap: 2.4vw !important;
    overflow-x: auto !important;
    overflow-y: visible !important;

    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body:not(.report-open) #ideaTabsStack::-webkit-scrollbar,
  body:not(.report-open) .idea-tabs-rail__stack::-webkit-scrollbar {
    display: none !important;
  }


  /* EXACTLY 1 TAB — center it */
  body:not(.report-open) #ideaTabsStack:not(:has(> .idea-mini-tab:nth-child(2))),
  body:not(.report-open) .idea-tabs-rail__stack:not(:has(> .idea-mini-tab:nth-child(2))) {
    justify-content: center !important;
  }

  body:not(.report-open) #ideaTabsStack:not(:has(> .idea-mini-tab:nth-child(2))) > .idea-mini-tab,
  body:not(.report-open) .idea-tabs-rail__stack:not(:has(> .idea-mini-tab:nth-child(2))) > .idea-mini-tab {
    flex: 0 0 34vw !important;
    width: 34vw !important;
    min-width: 34vw !important;
    max-width: 34vw !important;
  }


  /* EXACTLY 2 TABS — center them together */
  body:not(.report-open) #ideaTabsStack:has(> .idea-mini-tab:nth-child(2)):not(:has(> .idea-mini-tab:nth-child(3))),
  body:not(.report-open) .idea-tabs-rail__stack:has(> .idea-mini-tab:nth-child(2)):not(:has(> .idea-mini-tab:nth-child(3))) {
    justify-content: center !important;
  }

  body:not(.report-open) #ideaTabsStack:has(> .idea-mini-tab:nth-child(2)):not(:has(> .idea-mini-tab:nth-child(3))) > .idea-mini-tab,
  body:not(.report-open) .idea-tabs-rail__stack:has(> .idea-mini-tab:nth-child(2)):not(:has(> .idea-mini-tab:nth-child(3))) > .idea-mini-tab {
    flex: 0 0 34vw !important;
    width: 34vw !important;
    min-width: 34vw !important;
    max-width: 34vw !important;
  }


  /* EXACTLY 3 TABS — use the full row cleanly */
  body:not(.report-open) #ideaTabsStack:has(> .idea-mini-tab:nth-child(3)):not(:has(> .idea-mini-tab:nth-child(4))),
  body:not(.report-open) .idea-tabs-rail__stack:has(> .idea-mini-tab:nth-child(3)):not(:has(> .idea-mini-tab:nth-child(4))) {
    justify-content: space-between !important;
  }

  body:not(.report-open) #ideaTabsStack:has(> .idea-mini-tab:nth-child(3)):not(:has(> .idea-mini-tab:nth-child(4))) > .idea-mini-tab,
  body:not(.report-open) .idea-tabs-rail__stack:has(> .idea-mini-tab:nth-child(3)):not(:has(> .idea-mini-tab:nth-child(4))) > .idea-mini-tab {
    flex: 0 0 calc((100% - 4.8vw) / 3) !important;
    width: calc((100% - 4.8vw) / 3) !important;
    min-width: calc((100% - 4.8vw) / 3) !important;
    max-width: calc((100% - 4.8vw) / 3) !important;
  }


  /* 4+ TABS — normal swipe carousel */
  body:not(.report-open) #ideaTabsStack:has(> .idea-mini-tab:nth-child(4)),
  body:not(.report-open) .idea-tabs-rail__stack:has(> .idea-mini-tab:nth-child(4)) {
    justify-content: flex-start !important;
  }

  body:not(.report-open) #ideaTabsStack:has(> .idea-mini-tab:nth-child(4)) > .idea-mini-tab,
  body:not(.report-open) .idea-tabs-rail__stack:has(> .idea-mini-tab:nth-child(4)) > .idea-mini-tab {
    flex: 0 0 34vw !important;
    width: 34vw !important;
    min-width: 34vw !important;
    max-width: 34vw !important;
  }

}



/* =========================================================
   MOBILE IDEA TABS — FRAMELESS SWIPE + SIDE LIGHT INDICATORS
   Add at VERY BOTTOM of idea-to-business-phone.css
   ========================================================= */

@media (max-width: 767px) {

  /* Rail = invisible holder only */
  body:not(.report-open) .app-shell.has-idea-tabs .idea-tabs-rail,
  body:not(.report-open) .app-shell.has-idea-tabs.tabs-scroll-mode .idea-tabs-rail {
    position: relative !important;

    width: 95vw !important;
    height: 8.8vh !important;
    flex: 0 0 8.8vh !important;

    margin: 0 auto !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;

    overflow: visible !important;
  }

  /* Swipe track */
  body:not(.report-open) #ideaTabsStack,
  body:not(.report-open) .idea-tabs-rail__stack {
    width: 100% !important;
    height: 100% !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;

    gap: 2.4vw !important;
    padding: 0 !important;

    overflow-x: auto !important;
    overflow-y: visible !important;

    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body:not(.report-open) #ideaTabsStack::-webkit-scrollbar,
  body:not(.report-open) .idea-tabs-rail__stack::-webkit-scrollbar {
    display: none !important;
  }

  /* Default tab size for swipe */
  body:not(.report-open) .idea-mini-tab {
    flex: 0 0 34vw !important;
    width: 34vw !important;
    min-width: 34vw !important;
    max-width: 34vw !important;

    height: 7.4vh !important;
    min-height: 7.4vh !important;

    scroll-snap-align: center !important;
  }

  /* 1 tab centered */
  body:not(.report-open) #ideaTabsStack:not(:has(> .idea-mini-tab:nth-child(2))) {
    justify-content: center !important;
  }

  /* 2 tabs centered together */
  body:not(.report-open) #ideaTabsStack:has(> .idea-mini-tab:nth-child(2)):not(:has(> .idea-mini-tab:nth-child(3))) {
    justify-content: center !important;
  }

  /* 3 tabs fill the row */
  body:not(.report-open) #ideaTabsStack:has(> .idea-mini-tab:nth-child(3)):not(:has(> .idea-mini-tab:nth-child(4))) {
    justify-content: space-between !important;
  }

  body:not(.report-open) #ideaTabsStack:has(> .idea-mini-tab:nth-child(3)):not(:has(> .idea-mini-tab:nth-child(4))) > .idea-mini-tab {
    flex: 0 0 calc((100% - 4.8vw) / 3) !important;
    width: calc((100% - 4.8vw) / 3) !important;
    min-width: calc((100% - 4.8vw) / 3) !important;
    max-width: calc((100% - 4.8vw) / 3) !important;
  }

  /* 4+ tabs become swipe carousel */
  body:not(.report-open) #ideaTabsStack:has(> .idea-mini-tab:nth-child(4)) {
    justify-content: flex-start !important;
  }

  body:not(.report-open) #ideaTabsStack:has(> .idea-mini-tab:nth-child(4)) > .idea-mini-tab {
    flex: 0 0 34vw !important;
    width: 34vw !important;
    min-width: 34vw !important;
    max-width: 34vw !important;
  }

  /* Side light base — off state */
  body:not(.report-open) .app-shell.has-idea-tabs .idea-tabs-rail::before,
  body:not(.report-open) .app-shell.has-idea-tabs .idea-tabs-rail::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 1.8vw !important;
    height: 6.8vh !important;
    border-radius: 999px !important;

    z-index: 30 !important;
    pointer-events: none !important;

    background: rgba(180, 194, 220, .22) !important;
    box-shadow:
      0 0 1.2vh rgba(180, 194, 220, .16),
      inset 0 1px 0 rgba(255,255,255,.55) !important;

    opacity: .45 !important;
  }

  body:not(.report-open) .app-shell.has-idea-tabs .idea-tabs-rail::before {
    left: -1.1vw !important;
  }

  body:not(.report-open) .app-shell.has-idea-tabs .idea-tabs-rail::after {
    right: -1.1vw !important;
  }

  /* Left light ON */
  body:not(.report-open) .app-shell.has-idea-tabs .idea-tabs-rail.can-scroll-left::before {
    background: linear-gradient(180deg, #6f95ff, #2457f5) !important;
    box-shadow:
      0 0 1.5vh rgba(36,87,245,.55),
      0 0 3.2vh rgba(36,87,245,.25) !important;
    opacity: 1 !important;
  }

  /* Right light ON */
  body:not(.report-open) .app-shell.has-idea-tabs .idea-tabs-rail.can-scroll-right::after {
    background: linear-gradient(180deg, #6f95ff, #2457f5) !important;
    box-shadow:
      0 0 1.5vh rgba(36,87,245,.55),
      0 0 3.2vh rgba(36,87,245,.25) !important;
    opacity: 1 !important;
  }
}


/* =========================================================
   MOBILE REPORT — ALLOW HORIZONTAL SWIPE ON DATA CARD
   ========================================================= */

@media (max-width: 767px) {
  body.report-open .mobile-report-simple__stage,
  body.report-open .mobile-data-card {
    touch-action: pan-y !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }
}



/* =========================================================
   MOBILE PROCESSING BUTTON — FIX TEXT GAP + CENTERING
   ========================================================= */

@media (max-width: 767px) {

  #submitIdeaButton.is-processing-label-visible {
    overflow: hidden !important;
  }

  #submitIdeaButton.is-processing-label-visible .button__processing {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 100% !important;

    gap: 1.4vw !important;
    padding: 0 4vw !important;

    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;

    transform: none !important;
  }

  #submitIdeaButton.is-processing-label-visible .button__processing-label {
    flex: 0 0 auto !important;

    font-size: clamp(12px, 3.5vw, 16px) !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: .16em !important;

    color: #ffffff !important;
    opacity: .95 !important;
  }

  #submitIdeaButton.is-processing-label-visible .button__dots {
    flex: 0 0 auto !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 0 !important;
    width: auto !important;

    margin: 0 .6vw !important;
    gap: .25vw !important;
  }

  #submitIdeaButton.is-processing-label-visible .button__dots span {
    font-size: clamp(14px, 3.8vw, 18px) !important;
    line-height: 1 !important;
  }

  #submitIdeaButton.is-processing-label-visible .button__processing-word {
    flex: 0 1 auto !important;

    /* 🔥 this removes the huge gap */
    min-width: 0 !important;
    width: auto !important;
    max-width: 34vw !important;

    display: inline-block !important;

    text-align: left !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;

    font-size: clamp(12px, 3.5vw, 16px) !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: .16em !important;

    color: #ffffff !important;
  }

}



/* =========================================================
   MOBILE BOTTOM CARDS — STRONG SELECTED DARK BLUE GLOW
   ========================================================= */

@media (max-width: 767px) {

  body:not(.report-open) .sidebar-step.is-active {
    position: relative !important;
    overflow: visible !important;

    border: 2px solid rgba(14, 47, 145, 1) !important;

    box-shadow:
      0 0 0 3px rgba(14, 47, 145, .30),
      0 0 16px rgba(14, 47, 145, .70),
      0 0 34px rgba(14, 47, 145, .52),
      0 0 58px rgba(5, 20, 80, .38),
      0 1.2vh 3vh rgba(5, 20, 80, .28),
      inset 0 1px 0 rgba(255,255,255,.95) !important;

    z-index: 20 !important;
  }

  body:not(.report-open) .sidebar-step.is-active::after {
    content: "" !important;
    position: absolute !important;
    inset: -12px !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    z-index: -1 !important;

    background:
      radial-gradient(circle at 50% 50%,
        rgba(14, 47, 145, .55) 0%,
        rgba(14, 47, 145, .34) 38%,
        rgba(14, 47, 145, .16) 58%,
        rgba(14, 47, 145, 0) 78%
      ) !important;

    filter: blur(12px) !important;
    opacity: 1 !important;
  }

  body:not(.report-open) .sidebar-step.is-active .sidebar-step__media {
    border-radius: inherit !important;
    overflow: hidden !important;
    filter: saturate(1.14) contrast(1.05) brightness(1.03) !important;
  }
}


/* =========================================================
   MOBILE — GAP BETWEEN IDEA TABS AND BOTTOM CARDS
   ========================================================= */

@media (max-width: 767px) {
  body:not(.report-open) .sidebar {
    margin-top: 2vw !important;
  }
}


/* =========================================================
   MOBILE REPORT METRIC LABELS — 1.75X BIGGER
   ========================================================= */

@media (max-width: 767px) {

  body.report-open .hero-report-metric span {
    font-size: clamp(7.4px, 2.5vw, 13px) !important;
    line-height: 0.5 !important;
    font-weight: 750 !important;
    letter-spacing: -0.1em !important;
    transform: scaleX(.85) !important;
    transform-origin: center !important;
  }
  
    body.report-open .hero-report-metric {

    margin-top: 1vh;

  }

}


/* MOBILE ONLY — game replaces processing video */
@media (max-width: 767px) {
  .mobile-game-loader {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    overflow: hidden;
    border-radius: inherit;
    background: #02040c;
  }

  .mobile-game-loader iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #02040c;
  }

  body.report-processing .morph-video,
  body.report-processing .processing-video,
  body.report-processing video {
    display: none !important;
  }
  
  
  .mobile-game-loader {
  position: absolute !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: none; /* 🔥 default hidden */
}

.mobile-game-loader:not([hidden]) {
  display: block !important;
}

.mobile-game-loader iframe {
  width: 100% !important;
  height: 100% !important;

  border: 0 !important;
  display: block !important;

  transform: scale(1) translateZ(0) !important;

  transform-origin: center center !important;

  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;

  will-change: transform !important;
}
}


@media (max-width: 767px) {


  body.report-open .mobile-report-simple__nav button {
    flex: 0 0 30vw !important;
    height: 4.8vh !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #ffffff, #edf3ff) !important;
    border: 1px solid rgba(170,194,242,.82) !important;
    color: #2457f5 !important;
    font-size: clamp(12px, 3.4vw, 17px) !important;
    font-weight: 950 !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 .7vh 1.6vh rgba(16,24,40,.10) !important;
  }

  body.report-open .mobile-report-simple__nav button.is-active {
    background: linear-gradient(180deg, #252b36, #05070d) !important;
    color: #ffffff !important;
    border-color: rgba(0,0,0,.85) !important;
    transform: translateY(-.25vh) scale(1.04) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.15),
      0 1.2vh 2.6vh rgba(0,0,0,.28),
      0 0 0 2px rgba(36,87,245,.12) !important;
  }

  body.report-open .mobile-report-simple__nav button::after {
    display: none !important;
    content: none !important;
  }

  body.report-open .mobile-report-simple__stage {
    position: relative !important;
    padding: 1.1vh !important;
    border-radius: 4vh !important;
    border: 1.2vh solid #080d18 !important;
    background: linear-gradient(145deg, #293142, #05070d) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      inset 0 -2vh 4vh rgba(0,0,0,.34),
      0 1.4vh 3.4vh rgba(3,10,24,.24),
      0 0 0 1px rgba(143,176,255,.18) !important;
    overflow: hidden !important;
  }

  body.report-open .mobile-report-simple__stage::before {
    content: "" !important;
    position: absolute !important;
    inset: .7vh !important;
    border-radius: 2.8vh !important;
    border: 1px solid rgba(158,186,245,.72) !important;
    pointer-events: none !important;
    z-index: 3 !important;
  }


  body.report-open .mobile-data-card {
    height: 100% !important;
    border-radius: 2.4vh !important;
    padding: 2.2vh 4.5vw !important;
    background:
      radial-gradient(circle at 18% 20%, rgba(36,87,245,.22), transparent 34%),
      linear-gradient(145deg, #111827, #05070d) !important;
    border: 1px solid rgba(98,131,200,.55) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.13),
      inset 0 -2vh 4vh rgba(0,0,0,.24) !important;
    overflow: hidden !important;
  }
}

/* =========================================================
   MOBILE REPORT — APPLE NEUTRAL CARD + ROLE-BASED COLORS
   Label black/white, main value/title blue.
   ========================================================= */

@media (max-width: 767px) {

  /* One Apple-like background for ALL category cards */
  body.report-open .mobile-data-card,
  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button.is-active) .mobile-data-card {
    grid-template-columns: 1fr !important;
    padding: 2.4vh 5vw !important;

    background:
      radial-gradient(circle at 18% 12%, rgba(36,87,245,.10), transparent 34%),
      radial-gradient(circle at 86% 82%, rgba(36,87,245,.07), transparent 40%),
      linear-gradient(180deg, #ffffff 0%, #f4f7ff 100%) !important;

    border: 1px solid rgba(180,202,245,.82) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.96),
      inset 0 -2vh 4vh rgba(36,87,245,.045),
      0 .9vh 2.4vh rgba(16,24,40,.085) !important;

    color: #101828 !important;
  }

  /* Remove icon + noisy overlays/grid */
  body.report-open .mobile-data-card__icon,
  body.report-open .mobile-data-card::before,
  body.report-open .mobile-data-card::after {
    display: none !important;
    content: none !important;
  }

  /* LABELS: Competitor 1 / Step 3 / Startup Cost = black */
  body.report-open .mobile-data-card__label,
  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button.is-active) .mobile-data-card__label {
    color: #101828 !important;
    font-size: clamp(11px, 3vw, 14px) !important;
    font-weight: 950 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
  }

  /* MAIN VALUE/TITLE: Zazzle / Test Paid Conversion / $4,500-$18,000 = blue */
  body.report-open .mobile-data-card__title,
  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button.is-active) .mobile-data-card__title {
    color: #2457f5 !important;
    font-size: clamp(22px, 6vw, 32px) !important;
    line-height: .96 !important;
    font-weight: 950 !important;
    letter-spacing: -.07em !important;
    text-shadow: none !important;
  }

  /* Regular explanation text = black */
  body.report-open .mobile-data-card__text,
  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button.is-active) .mobile-data-card__text {
    color: #101828 !important;
    font-size: clamp(13px, 3.45vw, 17px) !important;
    line-height: 1.22 !important;
    font-weight: 760 !important;
    letter-spacing: -.035em !important;
  }

  /* Hint = soft gray-blue */
  body.report-open .mobile-data-card__hint,
  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button.is-active) .mobile-data-card__hint {
    color: #7d8aa3 !important;
    font-size: clamp(9px, 2.35vw, 12px) !important;
    font-weight: 850 !important;
  }

  /* Keep the TV frame, but make the inside feel Apple-clean */
  body.report-open .mobile-report-simple__stage {
    background:
      linear-gradient(180deg, #f8fbff, #edf3ff) !important;
  }
}


/* =========================================================
   FINAL FINAL FIX — FORCE FLAGS TITLE BLUE
   ========================================================= */

@media (max-width: 767px) {

  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(5).is-active)
  .mobile-data-card.is-green-flag .mobile-data-card__title,
  
  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(5).is-active)
  .mobile-data-card.is-red-flag .mobile-data-card__title {

    color: #2457f5 !important;
  }

}



/* =========================================================
   TIME & EFFORT — VALUE (TITLE) BLUE
   ========================================================= */

@media (max-width: 767px) {

  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(4).is-active)
  .mobile-data-card__title {

    color: #2457f5 !important; /* Arcanis blue */
  }

}


/* =========================================================
   FINANCIALS — CORRECT COLOR HIERARCHY
   Label = black
   Value = blue
   ========================================================= */

@media (max-width: 767px) {

  /* Label: STARTUP COST */
  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(3).is-active)
  .mobile-data-card__label {
    color: #101828 !important; /* black */
  }

  /* Value: $4,500-$18,000 */
  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(3).is-active)
  .mobile-data-card__title {
    color: #2457f5 !important; /* Arcanis blue */
  }

}



/* =========================================================
   FINAL — FORCE ALL CATEGORY CARDS TO APPLE WHITE STYLE
   (Competition, Next Steps, Financials, Time, Flags)
   ========================================================= */

@media (max-width: 767px) {

  /* MAIN CARD — applies to ALL categories */
  body.report-open .mobile-data-card,
  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button.is-active) .mobile-data-card {

    background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.92), transparent 55%),
      linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%) !important;

    border: 1px solid rgba(203,216,242,.85) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.98),
      0 .8vh 2.2vh rgba(16,24,40,.06) !important;

    color: #101828 !important;
  }

  /* REMOVE ALL CATEGORY-SPECIFIC BACKGROUNDS */
  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(1).is-active) .mobile-data-card,
  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(2).is-active) .mobile-data-card,
  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(3).is-active) .mobile-data-card,
  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(4).is-active) .mobile-data-card,
  body.report-open .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(5).is-active) .mobile-data-card {

    background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.92), transparent 55%),
      linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%) !important;
  }

  /* CLEAN TEXT SYSTEM */

  /* LABEL (COMPETITOR, STEP, COST, FLAG) */
  body.report-open .mobile-data-card__label {
    color: #101828 !important;
    font-weight: 900 !important;
  }

  /* VALUE (Canva, price, time, etc.) */
  body.report-open .mobile-data-card__title {
    color: #2457f5 !important;
    font-weight: 950 !important;
  }

  /* DESCRIPTION */
  body.report-open .mobile-data-card__text {
    color: #101828 !important;
  }

  /* HINT */
  body.report-open .mobile-data-card__hint {
    color: #98a2b3 !important;
  }

}


/* =========================================================
   COMPETITION — CLEAN TEXT HIERARCHY (APPLE STYLE)
   ========================================================= */

@media (max-width: 767px) {

  /* LABEL → black (COMPETITOR 1) */
  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(1).is-active)
  .mobile-data-card__label {
    color: #101828 !important;
  }

  /* NAME → blue (Canva, Zazzle, etc.) */
  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(1).is-active)
  .mobile-data-card__title {
    color: #2457f5 !important;
  }

  /* DESCRIPTION → black */
  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(1).is-active)
  .mobile-data-card__text {
    color: #101828 !important;
  }

  /* HINT → gray */
  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(1).is-active)
  .mobile-data-card__hint {
    color: #98a2b3 !important;
  }

}


/* =========================================================
   TIME & EFFORT — CLEAN APPLE TEXT HIERARCHY
   ========================================================= */

@media (max-width: 767px) {

  /* LABEL → black (TIME TO LAUNCH / DAILY EFFORT) */
  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(4).is-active)
  .mobile-data-card__label {
    color: #101828 !important;
  }

  /* VALUE → blue (3–6 weeks / 2–4 hrs/day) */
  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(4).is-active)
  .mobile-data-card__title {
    color: #2457f5 !important;
  }

  /* DESCRIPTION → black */
  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(4).is-active)
  .mobile-data-card__text {
    color: #101828 !important;
  }

  /* HINT → gray */
  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(4).is-active)
  .mobile-data-card__hint {
    color: #98a2b3 !important;
  }

}


/* =========================================================
   NEXT STEPS — CLEAN APPLE TEXT HIERARCHY
   ========================================================= */

@media (max-width: 767px) {

  /* LABEL → black (STEP 1, STEP 2, etc.) */
  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(2).is-active)
  .mobile-data-card__label {
    color: #101828 !important;
  }

  /* TITLE → blue (Build Narrow MVP, etc.) */
  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(2).is-active)
  .mobile-data-card__title {
    color: #2457f5 !important;
  }

  /* DESCRIPTION → black */
  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(2).is-active)
  .mobile-data-card__text {
    color: #101828 !important;
  }

  /* HINT → gray */
  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(2).is-active)
  .mobile-data-card__hint {
    color: #98a2b3 !important;
  }

}


/* =========================================================
   FINAL FIX — TRUE WHITE FOR FINANCIALS + TIME & EFFORT
   ========================================================= */

@media (max-width: 767px) {

  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(3).is-active)
  .mobile-data-card,
  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(4).is-active)
  .mobile-data-card {
    background: #ffffff !important;
    background-image: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(3).is-active)
  .mobile-data-card::before,
  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(3).is-active)
  .mobile-data-card::after,
  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(4).is-active)
  .mobile-data-card::before,
  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(4).is-active)
  .mobile-data-card::after {
    display: none !important;
    content: none !important;
    background: none !important;
    opacity: 0 !important;
  }
}


/* =========================================================
   ABSOLUTE FINAL — FORCE TIME & EFFORT TRUE WHITE
   ========================================================= */

@media (max-width: 767px) {

  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(4).is-active)
  .mobile-data-card {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.98),
      0 .8vh 2.2vh rgba(16,24,40,.06) !important;

    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(4).is-active)
  .mobile-data-card::before,
  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(4).is-active)
  .mobile-data-card::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
    background-image: none !important;
    opacity: 0 !important;
    filter: none !important;
  }

  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(4).is-active)
  .mobile-data-card * {
    text-shadow: none !important;
  }
}


/* =========================================================
   ABSOLUTE FINAL — FORCE FINANCIALS TO MATCH WHITE CARDS
   ========================================================= */

@media (max-width: 767px) {

  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(3).is-active)
  .mobile-data-card {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;

    border: 1px solid rgba(203,216,242,.85) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.98),
      0 .8vh 2.2vh rgba(16,24,40,.06) !important;

    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(3).is-active)
  .mobile-data-card::before,
  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(3).is-active)
  .mobile-data-card::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
    background-image: none !important;
    opacity: 0 !important;
    filter: none !important;
  }

  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(3).is-active)
  .mobile-data-card__label {
    color: #101828 !important;
  }

  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(3).is-active)
  .mobile-data-card__title {
    color: #2457f5 !important;
    text-shadow: none !important;
  }

  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(3).is-active)
  .mobile-data-card__text {
    color: #101828 !important;
  }

  body.report-open
  .mobile-report-simple:has(.mobile-report-simple__nav button:nth-child(3).is-active)
  .mobile-data-card__hint {
    color: #98a2b3 !important;
  }
}


/* =========================================================
   HERO SCORE — SAFE GLOW, DOES NOT CHANGE LAYOUT
   ========================================================= */

@media (max-width: 767px) {
  body.report-open .hero-report-score-wrap {
    --score-glow-color: rgba(36,87,245,.45);

    box-shadow:
      0 0 0 1px rgba(203,216,242,.8),
      0 .8vh 1.8vh rgba(16,24,40,.12),
      0 0 18px var(--score-glow-color),
      0 0 36px var(--score-glow-color) !important;
  }
}

/* =========================================================
   MOBILE REPORT — SCROLL LONG TEXT WITHOUT EXPANDING CARDS
   ========================================================= */

@media (max-width: 767px) {

  /* MORPH SCREEN: keep card fixed, allow text area to scroll */
  body.report-open .hero-report-main {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
    padding-bottom: 2.2vh !important;
  }

  /* Remove text clamp in morph summary */
  body.report-open #heroReportSummary,
  body.report-open .hero-report-summary-big {
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;

    max-height: none !important;
    overflow: visible !important;
  }

  /* BOTTOM TV CARDS: card stays same size */
  body.report-open .mobile-data-card {
    overflow: hidden !important;
    min-height: 0 !important;
  }

  /* Only the content inside scrolls */
  body.report-open .mobile-data-card__content {
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;

    padding-right: 1.2vw !important;
    padding-bottom: 1.6vh !important;
  }

  /* Description should not expand the card */
  body.report-open .mobile-data-card__text {
    max-height: none !important;
    overflow: visible !important;
  }

  /* Keep scrollbars invisible but scrolling enabled */
  body.report-open .hero-report-main::-webkit-scrollbar,
  body.report-open .mobile-data-card__content::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  body.report-open .hero-report-main,
  body.report-open .mobile-data-card__content {
    scrollbar-width: none !important;
  }
}



/* =========================================================
   HERO METRIC BUTTONS — STRONG CLICKABLE / OBVIOUS MOVEMENT
   ========================================================= */

@media (max-width: 767px) {

  .hero-report-metric {
    position: relative !important;

    background: linear-gradient(180deg, #ffffff, #eef3fb) !important;
    border-radius: 1.2vh !important;

    /* 🔥 STRONGER SHADOW = CLEAR DEPTH */
    box-shadow:
      0 1.2vh 2.6vh rgba(16,24,40,.18),
      inset 0 1px 0 rgba(255,255,255,.95) !important;

    transform: translateY(0) scale(1) !important;

    transition:
      transform 0.12s ease,
      box-shadow 0.12s ease,
      background 0.2s ease !important;

    cursor: pointer !important;
  }

  /* 🔥 PRESS EFFECT (VERY OBVIOUS) */
  .hero-report-metric:active {
    transform: translateY(.8vh) scale(.92) !important;

    box-shadow:
      inset 0 3px 6px rgba(0,0,0,.25),
      0 .2vh .5vh rgba(16,24,40,.10) !important;
  }

  /* 🔥 SELECTED (ACTIVE CATEGORY) */
  .hero-report-metric.is-selected {
    background: linear-gradient(180deg, #4c79ff, #2457f5) !important;

    transform: translateY(-.5vh) scale(1.05) !important;

    box-shadow:
      0 1.4vh 3vh rgba(36,87,245,.45),
      0 0 0 2px rgba(36,87,245,.25),
      inset 0 1px 0 rgba(255,255,255,.3) !important;
  }

  /* TEXT COLOR WHEN SELECTED */
  .hero-report-metric.is-selected span,
  .hero-report-metric.is-selected strong {
    color: #ffffff !important;
  }

}

/* =========================================================
   HERO METRIC LABELS — PERFECT VERTICAL CENTERING
   ========================================================= */

@media (max-width: 767px) {

  .hero-report-metric {
    display: flex !important;
    flex-direction: column !important;

    /* 🔥 THIS IS THE FIX */
    justify-content: center !important;
    align-items: center !important;

    gap: .35vh !important;
  }

  /* Label (REAL DEMAND) */
  .hero-report-metric span {
    display: block !important;
    margin: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  /* Value (86/100) */
  .hero-report-metric strong {
    display: block !important;
    margin: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
  }

}

/* =========================================================
   HERO METRICS — MAKE LABELS ACTUALLY READABLE
   ========================================================= */

@media (max-width: 767px) {

  /* Give buttons more vertical room */
  .hero-report-metrics {
    height: 8.5vh !important;
  }

  .hero-report-metric {
    height: 100% !important;
    padding: .6vh .4vw !important;
  }

  /* 🔥 LABEL FIX */
  .hero-report-metric span {
    font-size: clamp(11px, 3.2vw, 16px) !important; /* BIG */
    font-weight: 950 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.05 !important;

    text-align: center !important;

    /* 🔥 ALLOW WRAP (THIS IS THE KEY) */
    white-space: normal !important;
    word-break: break-word !important;

    /* Prevent overflow */
    max-width: 100% !important;
  }

  /* VALUE stays slightly smaller */
  .hero-report-metric strong {
    font-size: clamp(10px, 2.8vw, 14px) !important;
  }

}


/* Remove reset lag when returning from report to landing */
@media (max-width: 767px) {
  #submitIdeaButton.is-resetting,
  #submitIdeaButton.is-resetting *,
  .idea-form__field:not(.is-processing) #submitIdeaButton {
    transition: none !important;
    animation: none !important;
  }

  #submitIdeaButton.is-resetting .button__label,
  #submitIdeaButton.is-resetting .button__char-wrap,
  #submitIdeaButton.is-resetting > span:first-child {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  #submitIdeaButton.is-resetting .button__processing {
    opacity: 0 !important;
    display: none !important;
  }
}



@media (max-width: 767px) {


  /* font for the categories on the cards */
  body.report-open .hero-report-card .hero-report-metrics .hero-report-metric span {
    font-size: clamp(0.2rem, 3vw, 0.5rem) !important;
    line-height: 1.2 !important;
    font-weight: 650 !important;
    letter-spacing: -0.01em !important;
    transform: none !important;
    white-space: normal !important;
    text-align: center !important;
  }

  body.report-open .hero-report-card .hero-report-metrics .hero-report-metric {
    padding: .4vh .25vw !important;
  }
  

}


@media (max-width: 767px) {

  body.report-open #reportDashboard {
    width: 95vw !important;
    height: calc(100svh - 54vh) !important; /* adjust this if needed */
    flex: 0 0 calc(100svh - 54vh) !important;
    margin: 0 auto !important;
    overflow: hidden !important;
  }

  body.report-open .mobile-report-simple {
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: 5.8vh minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  body.report-open .mobile-report-simple__stage {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.report-open .mobile-data-card {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  body.report-open .mobile-data-card__content {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;

    padding-right: 1.4vw !important;
    padding-bottom: 2vh !important;
  }

  body.report-open .mobile-data-card__content::-webkit-scrollbar {
    display: none !important;
  }

  body.report-open .mobile-data-card__content {
    scrollbar-width: none !important;
  }
}



/* =========================================================
   FINAL MOBILE REPORT — RESPONSIVE FONT MASTER OVERRIDE
   Put this at the VERY BOTTOM
   ========================================================= */

@media (max-width: 767px) {

  /* 1) TOP EXTENDED PROPOSED NAME BUTTON */
  body.report-open .idea-form__field #submitIdeaButton,
  body.report-open .idea-form__field #submitIdeaButton *,
  body.report-open #submitIdeaButton .button__label,
  body.report-open #submitIdeaButton .button__char-wrap,
  body.report-open #submitIdeaButton > span:first-child {
    font-size: clamp(11px, 3.4vw, 17px) !important;
    line-height: 1 !important;
    letter-spacing: .16em !important;
    white-space: nowrap !important;
  }

  /* 2) MORPH SCREEN CATEGORY LABELS: DEMAND / MARKET / POTENTIAL 
  body.report-open .hero-report-card 
  .hero-report-metrics 
  .hero-report-metric span {
    font-size: clamp(7px, 2.45vw, 11px) !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: -0.04em !important;
    transform: none !important;
    white-space: normal !important;
    text-align: center !important;
  }*/

  /* 3) MORPH SCREEN CATEGORY SCORES */
  body.report-open .hero-report-card 
  .hero-report-metrics 
  .hero-report-metric strong {
    font-size: clamp(7px, 2.25vw, 10px) !important;
    line-height: 1 !important;
    font-weight: 950 !important;
  }

  /* 4) REPORT NAV BUTTONS: Competition / Next Steps / Financials */
  body.report-open .mobile-report-simple 
  .mobile-report-simple__nav button {
    font-size: clamp(11px, 3.35vw, 16px) !important;
    line-height: 1 !important;
    font-weight: 650 !important;
    letter-spacing: -0.04em !important;
    height: clamp(34px, 4.8vh, 48px) !important;
    min-height: clamp(34px, 4.8vh, 48px) !important;
    padding: 0 2vw !important;
    white-space: nowrap !important;
  }

  body.report-open .mobile-report-simple 
  .mobile-report-simple__nav button.is-active {
    font-size: clamp(10px, 3.8vw, 18px) !important;
    height: clamp(28px, 3.4vh, 54px) !important;

  }

  /* 5) MAIN SCROLL CARD LABEL: STEP 3 / COMPETITOR 1 */
  body.report-open .mobile-report-simple__stage 
  .mobile-data-card .mobile-data-card__label {
    font-size: clamp(10px, 3vw, 14px) !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: .06em !important;
  }

  /* 6) MAIN SCROLL CARD TITLE: Test Paid Conversion / Canva */
  body.report-open .mobile-report-simple__stage 
  .mobile-data-card .mobile-data-card__title {
    font-size: clamp(18px, 6.2vw, 30px) !important;
    line-height: .95 !important;
    font-weight: 950 !important;
    letter-spacing: -0.075em !important;
  }

  /* 7) MAIN SCROLL CARD DESCRIPTION */
  body.report-open .mobile-report-simple__stage 
  .mobile-data-card .mobile-data-card__text {
    font-size: clamp(12px, 3.55vw, 16px) !important;
    line-height: 1.18 !important;
    font-weight: 800 !important;
    letter-spacing: -0.035em !important;
  }

  /* 8) MAIN SCROLL CARD HINT */
  body.report-open .mobile-report-simple__stage 
  .mobile-data-card .mobile-data-card__hint {
    font-size: clamp(8px, 2.25vw, 11px) !important;
    line-height: 1.1 !important;
  }

  /* 9) BOTTOM DELETE / BUILD / SAVE BUTTONS */
  body.report-open #mobileReportActions button {
    font-size: clamp(10px, 3vw, 15px) !important;
    line-height: 1 !important;
    letter-spacing: .08em !important;
  }
}



/*  This is for responsivnes of the SCORE circle */
@media (max-width: 767px) {

  body.report-open .hero-report-card {
    container-type: inline-size !important;
  }

  body.report-open .hero-report-score-wrap {
    width: clamp(52px, 18cqw, 76px) !important;
    height: clamp(52px, 18cqw, 76px) !important;
    min-width: clamp(52px, 18cqw, 76px) !important;
    min-height: clamp(52px, 18cqw, 76px) !important;
    max-width: clamp(52px, 18cqw, 76px) !important;
    max-height: clamp(52px, 18cqw, 76px) !important;

    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
  }

  body.report-open .hero-report-score,
  body.report-open .hero-report-score__inner {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  body.report-open #heroReportScoreValue {
    font-size: clamp(20px, 7cqw, 30px) !important;
    line-height: 1 !important;
  }

  body.report-open .hero-report-score__inner span {
    font-size: clamp(6px, 2cqw, 9px) !important;
    line-height: 1 !important;
  }
}






/* =========================================================
   MOBILE MORPH REPORT — FULL RESPONSIVE CARD SYSTEM
   ========================================================= */

@media (max-width: 767px) {

  body.report-open .morph-showcase {
    width: 95vw !important;
    height: clamp(215px, 31svh, 300px) !important;
    flex: 0 0 clamp(215px, 31svh, 300px) !important;
    margin: 0 auto .8vh !important;
    overflow: hidden !important;
  }

  body.report-open .morph-showcase__stage,
  body.report-open .hero-report-layer,
  body.report-open .hero-report-card {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  body.report-open .hero-report-card {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) clamp(42px, 7vh, 62px) !important;
    gap: clamp(4px, .8vh, 9px) !important;
    padding: clamp(7px, 1.2vh, 12px) clamp(8px, 2vw, 16px) !important;
  }

  body.report-open .hero-report-card__top {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: block !important;
    overflow: hidden !important;
  }

  body.report-open .hero-report-main {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: clamp(8px, 1.4vh, 14px) clamp(10px, 2.4vw, 18px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.report-open .hero-report-advice {
    font-size: clamp(12px, 3.2vw, 18px) !important;
    line-height: 1.05 !important;
    margin: 0 0 .7vh !important;
    white-space: normal !important;
  }

  body.report-open #heroReportSummary,
  body.report-open .hero-report-summary-big {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    font-size: clamp(10px, 2.75vw, 14px) !important;
    line-height: 1.35 !important;
  }

  body.report-open .hero-report-score-wrap {
    right: clamp(8px, 2vw, 16px) !important;
    bottom: clamp(42px, 7.4vh, 64px) !important;

    width: clamp(52px, 16vw, 78px) !important;
    height: clamp(52px, 16vw, 78px) !important;
    min-width: clamp(52px, 16vw, 78px) !important;
    min-height: clamp(52px, 16vw, 78px) !important;
    max-width: clamp(52px, 16vw, 78px) !important;
    max-height: clamp(52px, 16vw, 78px) !important;
  }

  body.report-open #heroReportScoreValue {
    font-size: clamp(22px, 6vw, 34px) !important;
  }

  body.report-open .hero-report-score__inner span {
    font-size: clamp(6px, 1.7vw, 9px) !important;
  }

  body.report-open .hero-report-metrics {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: clamp(2px, .6vw, 7px) !important;
    overflow: visible !important;
  }

  body.report-open .hero-report-metric {
    height: 100% !important;
    min-height: 0 !important;
    padding: .35vh .25vw !important;
    border-radius: clamp(8px, 1.4vh, 14px) !important;
    overflow: hidden !important;
  }

  body.report-open .hero-report-metric span {
    font-size: clamp(6px, 1.9vw, 10px) !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
    white-space: normal !important;
  }

  body.report-open .hero-report-metric strong {
    font-size: clamp(7px, 1.9vw, 10px) !important;
    line-height: 1 !important;
  }
}



@media (max-width: 767px) {

  /* Move morph metric/radio row slightly UP + wider tabs */
  body.report-open .hero-report-metrics {
    transform: translateY(-1.1vh) !important;
    width: 80% !important;
    max-width: 104% !important;
    margin-left: -2% !important;

    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: .8vw !important;
  }

  body.report-open .hero-report-metric {
    max-width: none !important;
    width: 100% !important;
    padding-left: .55vw !important;
    padding-right: .55vw !important;
  }

  /* Smaller score circle, bottom-right */
  body.report-open .hero-report-score-wrap {
    position: absolute !important;
    right: 1.9vw !important;
    bottom: auto !important; 
    margin-right: 5.2vh;
    width: clamp(48px, 13vw, 62px) !important;
    height: clamp(48px, 13vw, 62px) !important;
    min-width: clamp(48px, 13vw, 62px) !important;
    min-height: clamp(48px, 13vw, 62px) !important;
    max-width: clamp(48px, 13vw, 62px) !important;
    max-height: clamp(48px, 13vw, 62px) !important;

    border-radius: 50% !important;
    padding: 0 !important;
    z-index: 80 !important;
  }

  body.report-open #heroReportScoreValue {
    font-size: clamp(19px, 5vw, 25px) !important;
    line-height: 1 !important;

  }

  body.report-open .hero-report-score__inner span {
    font-size: clamp(6px, 1.45vw, 8px) !important;
    line-height: 1 !important;

  }
}

@media (max-width: 767px) {

  body.report-open .morph-showcase__stage {
    /* Do NOT redefine --score-glow-color here */

    border: 4px solid var(--score-glow-color, rgba(36,87,245,.45)) !important;

    box-shadow:
      0 0 0 2px var(--score-glow-color, rgba(36,87,245,.45)),
      0 0 24px var(--score-glow-color, rgba(36,87,245,.45)),
      0 0 52px var(--score-glow-color, rgba(36,87,245,.30)),
      inset 0 0 18px var(--score-glow-color, rgba(36,87,245,.22)),
      inset 0 1px 0 rgba(255,255,255,.98) !important;

    transition: border-color .25s ease, box-shadow .25s ease !important;
  }

}















@media (max-width: 767px) {

  body.report-open #reportDashboard,
body.report-open .mobile-report-simple {
  overflow: visible !important;
}

body.report-open .mobile-report-simple__nav {
  overflow-x: auto !important;
  overflow-y: visible !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

body.report-open .mobile-report-simple__nav::-webkit-scrollbar {
  display: none !important;
}

  body.report-open .mobile-report-simple {
    grid-template-rows: 6.6vh minmax(0, 1fr) !important;
  }

  body.report-open .mobile-report-simple__nav {
    height: 6.6vh !important;
    min-height: 6.6vh !important;
    padding: .8vh .8vw !important;
    transform: translateY(-1.15vh) !important;
    margin-bottom: -1.15vh !important;
    align-items: center !important;
  }

  body.report-open .mobile-report-simple__nav button {
    height: 4.6vh !important;
    min-height: 4.6vh !important;
    transform: scale(.96) !important;
  }

  body.report-open .mobile-report-simple__nav button.is-active {
    height: 5.1vh !important;
    min-height: 5.1vh !important;
    transform: translateY(-.15vh) scale(1.02) !important;
  }
}


@media (max-width: 767px) {

  .hero-report-metric.is-selected {
    transform: scale(1.2) !important;   /* 🔥 real 1.2x */
    z-index: 20 !important;

    /* REMOVE fake sizing */
    height: 100% !important;
    min-height: 0 !important;

    /* keep styling */
    background: linear-gradient(180deg, #4c79ff, #2457f5) !important;
    color: #fff !important;

    border-radius: 1.4vh !important;

    box-shadow:
      0 1.2vh 2.6vh rgba(36,87,245,.45),
      0 0 0 2px rgba(36,87,245,.25),
      inset 0 1px 0 rgba(255,255,255,.3) !important;
  }

}


@media (max-width: 767px) {

  body.report-open .hero-report-metrics {
    padding-left: 2.2vw !important;   /* 👈 left margin */
    padding-bottom: 1.2vh !important;   /* 👈 left margin */
    padding-right: 0.8vw !important;  /* optional balance */
  }
  
  body.report-open .hero-report-score-wrap {
  transform: translateY(-1.2vh) !important;
}

}


@media (max-width: 767px) {

  body.report-open .hero-report-card {
    width: calc(100% - 4vw) !important;   /* 👈 shrink whole inner frame */
    margin-right: 2vw !important;

    box-sizing: border-box !important;
  }

}

@media (max-width: 767px) {

  /* Create real bottom margin inside the morph screen */
  body.report-open .hero-report-layer {
    top: 0.8vh !important;
    left: 0.8vh !important;
    right: 0.8vh !important;
    bottom: 1.9vh !important; /* 👈 this exposes the bottom edge */
    overflow: visible !important;
  }

  /* Make the white parent close cleanly */
  body.report-open .hero-report-card {
    height: 100% !important;
    overflow: hidden !important;
    border-radius: 2.4vh !important;
    padding-bottom: 1.1vh !important;
  }

  /* Keep metric buttons inside the white card */
  body.report-open .hero-report-metrics {
    margin-bottom: 0 !important;
    transform: none !important;
  }
}


@media (max-width: 767px) {

  /* Give the whole morph report more internal room */
  body.report-open .morph-showcase {
    height: calc(var(--m-screen-h) + 2.6vh) !important;
    flex-basis: calc(var(--m-screen-h) + 2.6vh) !important;
  }

  /* This is the real inner report area */
  body.report-open .hero-report-layer {
    inset: 1vh 1.2vw 1.6vh 1.2vw !important;
    overflow: hidden !important;
    border-radius: 2.8vh !important;
  }

  /* Make the white card close cleanly under the metric buttons */
  body.report-open .hero-report-card {
    width: 100% !important;
    height: 100% !important;

    display: grid !important;
    grid-template-rows: minmax(0, 1fr) 6.4vh !important;
    gap: .7vh !important;

    padding: 1vh 1.6vw 1.4vh 1.6vw !important;

    overflow: hidden !important;
    border-radius: 2.6vh !important;

    background: rgba(255,255,255,.88) !important;
    box-sizing: border-box !important;
  }

  /* Text panel must stay inside the first row */
  body.report-open .hero-report-card__top {
    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: block !important;
  }

  body.report-open .hero-report-main {
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Metric row becomes the true bottom row, not overflow */
  body.report-open .hero-report-metrics {
    grid-row: 2 !important;
    align-self: end !important;

    width: 100% !important;
    max-width: 100% !important;
    height: 5.6vh !important;

    margin: 0 !important;
    padding: 0 .6vw .2vh .6vw !important;

    overflow: visible !important;
    box-sizing: border-box !important;
  }
}




/* cirle becomes rectangle  */
@media (max-width: 767px) {

  body.report-open .hero-report-score-wrap {
    border-radius: 2.2vh !important;   /* 👈 flatten top/bottom */
    
    height: 4.2vh !important;          /* 👈 reduce vertical height */
    min-height: 4.2vh !important;
    
    padding: 0 2.2vw !important;       /* keep horizontal spacing */

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

}



@media (max-width: 767px) {

  body.report-open .hero-report-score-wrap {
    right: 0.6vw !important;   /* 👈 pushes LEFT (more margin from edge) */
    top: 0.6vh !important;     /* 👈 pushes DOWN slightly */
  }

}


@media (max-width: 767px) {

  .hero-report-score {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .hero-report-score__inner {
    display: flex !important;
    align-items: center !important;   /* 🔥 instead of baseline */
    justify-content: center !important;

    gap: .08em !important;

    transform: translateY(.1vh) !important; /* optical correction */
  }

  #heroReportScoreValue {
    line-height: 1 !important;
    margin: 0 !important;
  }

  .hero-report-score__inner span {
    line-height: 1 !important;
    margin-top: 0 !important;
  }

}


@media (max-width: 767px) {

  body.report-open #heroReportScoreValue {
    transform: translateY(0.28vh) !important;
    display: block !important;
  }

}


@media (max-width: 767px) {

  body.report-open .morph-showcase__stage {
    padding: 1vh !important;
    overflow: hidden !important;
  }

  body.report-open .morph-showcase__stage::before {
    inset: 1.2vh !important;
    border-radius: 2.6vh !important;
  }

  body.report-open .hero-report-layer {
    inset: 1.15vh 2.2vw 1.15vh 2.2vw !important;
    width: auto !important;
    height: auto !important;
    overflow: hidden !important;
    border-radius: 2.5vh !important;
  }

  body.report-open .hero-report-card {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: .9vh 1.3vw 1vh 1.3vw !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body.report-open .hero-report-card__top {
    width: 100% !important;        /* kills old 90vw */
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body.report-open .hero-report-main {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 1vh 2.4vw !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    box-sizing: border-box !important;
  }

  body.report-open .hero-report-metrics {
    width: 100% !important;        /* kills old 110% */
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: .6vw !important;
    padding-right: .6vw !important;
    box-sizing: border-box !important;
  }

}


@media (max-width: 767px) {

  body.report-open .mobile-report-simple__stage {
    position: relative !important;
  }

  body.report-open .mobile-report-stage-title {
    position: absolute !important;

    top: 2.6vh !important;
    right: 5vw !important;

    z-index: 80 !important;

    font-family: "Posterama", system-ui, sans-serif !important;
    font-weight: 300 !important;

    font-size: clamp(15px, 4vw, 22px) !important;
    line-height: 1 !important;
    letter-spacing: .05em !important;

    color: #2457f5 !important;

    text-transform: uppercase !important;

    pointer-events: none !important;
    user-select: none !important;
  }

}



/* Adding blue light indicators for the category cards. */
@media (max-width: 767px) {

  body.report-open .mobile-report-simple {
    position: relative !important;
    overflow: visible !important;
  }

  /* small glowing dots on the CARD area */
  body.report-open .mobile-category-light {
    position: absolute !important;
    transform: translateY(55%) !important;

    width: 1.5vh !important;
    height: 1.5vh !important;
    border-radius: 999px !important;

    opacity: 0 !important;

    box-shadow:
      0 0 .8vh rgba(36,87,245,.25),
      0 0 1.8vh rgba(36,87,245,.12) !important;

    pointer-events: none !important;
    z-index: 9999 !important;
  }

  body.report-open .mobile-category-light--left {
    left: 1.2vw !important;
  }

  body.report-open .mobile-category-light--right {
    right: 1.2vw !important;
  }

  body.report-open .mobile-report-simple.can-category-left .mobile-category-light--left,
  body.report-open .mobile-report-simple.can-category-right .mobile-category-light--right {
    opacity: 1 !important;
    background: #2457f5 !important;

    box-shadow:
      0 0 .9vh rgba(36,87,245,.85),
      0 0 2vh rgba(36,87,245,.55),
      0 0 3.6vh rgba(36,87,245,.25) !important;
  }
}



@media (max-width: 767px) {

  /* glowing pulse light */
  body.report-open .mobile-category-light {
    position: absolute !important;

    top: 55% !important;
    transform: translateY(55%) !important;

    width: 0 !important;
    height: 0 !important;
    border-radius: 999px !important;


    opacity: 0 !important;

    z-index: 9999 !important;
    pointer-events: none !important;

    transition: opacity .25s ease !important;
  }

  /* outer glow */
  body.report-open .mobile-category-light::before {
    content: "" !important;

    position: absolute !important;
    inset: 50% auto auto 50% !important;

    width: 2vh !important;
    height: 20vh !important;

    transform: translate(-50%, -50%) !important;

    border-radius: 999px !important;

    background:
      radial-gradient(
        circle,
        rgba(76,121,255,.65) 0%,
        rgba(36,87,245,.32) 28%,
        rgba(36,87,245,.14) 52%,
        rgba(36,87,245,0) 72%
      ) !important;

    opacity: 0 !important;

    animation: mobileBluePulse 2.2s ease-in-out infinite !important;

    pointer-events: none !important;
  }

  body.report-open .mobile-category-light--left {
    left: 1.1vw !important;
  }

  body.report-open .mobile-category-light--right {
    right: 1.1vw !important;
  }

  /* turn ON */
  body.report-open .mobile-report-simple.can-category-left .mobile-category-light--left,
  body.report-open .mobile-report-simple.can-category-right .mobile-category-light--right {
    opacity: 1 !important;
  }

  body.report-open .mobile-report-simple.can-category-left .mobile-category-light--left::before,
  body.report-open .mobile-report-simple.can-category-right .mobile-category-light--right::before {
    opacity: 1 !important;
  }

  @keyframes mobileBluePulse {

    0% {
      transform: translate(-50%, -50%) scale(.72);
      opacity: .42;
    }

    50% {
      transform: translate(-50%, -50%) scale(1);
      opacity: .9;
    }

    100% {
      transform: translate(-50%, -50%) scale(.72);
      opacity: .42;
    }
  }
}



/* =========================================================
   MOBILE REPORT — REPLACE CATEGORY BUTTONS WITH CONFIDENCE PNG
   ========================================================= */
/* =========================================================
   MOBILE REPORT — CONFIDENCE PNG WITHOUT KILLING CARD INDICATORS
   ========================================================= */
@media (max-width: 767px) {

  body.report-open .mobile-report-simple {
    position: relative !important;
    overflow: visible !important;
  }

  body.report-open .mobile-report-simple__nav {
    display: flex !important;              /* KEEP FLEX */
    flex-wrap: nowrap !important;          /* KEEP HORIZONTAL LOGIC */

    width: 100% !important;
    height: 6.8vh !important;
    min-height: 6.8vh !important;

    margin: 0 auto !important;
    padding: 0 !important;

    overflow-x: auto !important;           /* KEEP SCROLL LOGIC */
    overflow-y: visible !important;
    scrollbar-width: none !important;

    pointer-events: none !important;

    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 90% 95% !important;
  }

  body.report-open .mobile-report-simple__nav::-webkit-scrollbar {
    display: none !important;
  }

  body.report-open .mobile-report-simple__nav button {
    opacity: 0 !important;                 /* NOT display none */
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* KEEP CARD BLUE LIGHTS ALIVE */
  body.report-open .mobile-category-light {
    display: block !important;
    z-index: 99999 !important;
    pointer-events: none !important;
  }

  body.report-open .mobile-report-simple.can-category-left .mobile-category-light--left,
  body.report-open .mobile-report-simple.can-category-right .mobile-category-light--right {
    opacity: 1 !important;
  }

  body.report-open .mobile-report-simple.can-category-left .mobile-category-light--left::before,
  body.report-open .mobile-report-simple.can-category-right .mobile-category-light--right::before {
    opacity: 1 !important;
  }
  
  
  body.report-open {
  touch-action: manipulation;
}
}


/* =========================================================
   FIX: HIDE BROKEN MOBILE CONFIDENCE IMAGE ON LANDING
   ========================================================= */
@media (max-width: 767px) {
  body:not(.report-open) #mobileConfidenceIndicator,
  body:not(.report-open) .mobile-confidence-indicator,
  body:not(.report-open) #mobileConfidenceIndicator img {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
  }
}


/* =========================================================
   MOBILE TABS — PERFECT VERTICAL CENTER
   ========================================================= */

@supports (-webkit-touch-callout: none) {

  
  body:not(.report-open) #ideaTabsRail,
  body:not(.report-open) .app-shell.has-idea-tabs .idea-tabs-rail {

    flex: 0 0 7.6vh !important;

    margin: 0 auto 0 auto !important; /* creates space above bottom cards */
    padding: 0 !important;

    transform: translateY(-2.6vh) !important; /* moves tabs upward */
    overflow: visible !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

}


/* =========================================================
   IPHONE — PREVENT SAFARI AUTO ZOOM
   ========================================================= */

@supports (-webkit-touch-callout: none) {

  html,
  body {
    width: 100% !important;
    height: 100% !important;

    overflow-x: hidden !important;

    touch-action: manipulation !important;

    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;

    zoom: 1 !important;
    transform: scale(1) !important;
  }

  input,
  textarea,
  select,
  button {
    font-size: 16px !important; /* 🔥 critical for iPhone */
  }

  iframe {
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
  }
}


@media (max-width: 767px) {

  body.report-open .mobile-report-simple__stage.is-film-left .mobile-data-card {
    animation: arcanisDeckLeft .58s cubic-bezier(.18,.86,.22,1) both;
  }

  body.report-open .mobile-report-simple__stage.is-film-right .mobile-data-card {
    animation: arcanisDeckRight .58s cubic-bezier(.18,.86,.22,1) both;
  }

  @keyframes arcanisDeckLeft {
    0% {
      transform: translateX(0) rotateY(0deg) rotateZ(0deg) scale(1);
      opacity: 1;
      filter: blur(0);
    }

    36% {
      transform: translateX(-24%) rotateY(42deg) rotateZ(-3deg) scale(.92);
      opacity: .55;
      filter: blur(1.6px);
    }

    37% {
      transform: translateX(42%) rotateY(-46deg) rotateZ(4deg) scale(.88);
      opacity: 0;
      filter: blur(2px);
    }

    62% {
      transform: translateX(18%) rotateY(-24deg) rotateZ(2deg) scale(.94);
      opacity: .72;
      filter: blur(.9px);
    }

    82% {
      transform: translateX(-4%) rotateY(7deg) rotateZ(-.6deg) scale(1.015);
      opacity: 1;
      filter: blur(.2px);
    }

    100% {
      transform: translateX(0) rotateY(0deg) rotateZ(0deg) scale(1);
      opacity: 1;
      filter: blur(0);
    }
  }

  @keyframes arcanisDeckRight {
    0% {
      transform: translateX(0) rotateY(0deg) rotateZ(0deg) scale(1);
      opacity: 1;
      filter: blur(0);
    }

    36% {
      transform: translateX(24%) rotateY(-42deg) rotateZ(3deg) scale(.92);
      opacity: .55;
      filter: blur(1.6px);
    }

    37% {
      transform: translateX(-42%) rotateY(46deg) rotateZ(-4deg) scale(.88);
      opacity: 0;
      filter: blur(2px);
    }

    62% {
      transform: translateX(-18%) rotateY(24deg) rotateZ(-2deg) scale(.94);
      opacity: .72;
      filter: blur(.9px);
    }

    82% {
      transform: translateX(4%) rotateY(-7deg) rotateZ(.6deg) scale(1.015);
      opacity: 1;
      filter: blur(.2px);
    }

    100% {
      transform: translateX(0) rotateY(0deg) rotateZ(0deg) scale(1);
      opacity: 1;
      filter: blur(0);
    }
  }
}




@media (max-width: 767px) {

  body.report-open .mobile-report-simple__stage {
    position: relative !important;
    overflow: hidden !important;
    perspective: 1400px !important;
  }

  body.report-open .mobile-report-simple__stage.is-paper-fly::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: -12% !important;
    width: 38vw !important;
    height: 145% !important;
    transform: translateX(-50%) scaleY(.1) !important;
    transform-origin: bottom center !important;
    z-index: 8 !important;
    pointer-events: none !important;

    background:
      radial-gradient(circle at 50% 100%, rgba(255,255,255,1), rgba(255,230,170,.78) 18%, transparent 42%),
      linear-gradient(180deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.88) 28%,
        rgba(255,226,160,.75) 55%,
        rgba(255,255,255,.95) 100%);

    filter: blur(8px) saturate(1.25);
    opacity: 0;
    animation: arcanisHeavenBeam 0.55s cubic-bezier(.16,.84,.16,1) both !important;
  }

  body.report-open .mobile-report-simple__stage.is-paper-fly::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 18 !important;
    pointer-events: none !important;
    opacity: 0;

    background:
      radial-gradient(circle at 50% 28%, rgba(255,255,255,.95) 0 1px, transparent 2px),
      radial-gradient(circle at 45% 46%, rgba(255,224,160,.9) 0 1px, transparent 2px),
      radial-gradient(circle at 55% 60%, rgba(255,255,255,.8) 0 1px, transparent 2px),
      radial-gradient(circle at 38% 74%, rgba(255,218,140,.75) 0 1px, transparent 2px),
      radial-gradient(circle at 62% 82%, rgba(255,255,255,.75) 0 1px, transparent 2px);

    background-size:
      7vw 10vh,
      9vw 11vh,
      8vw 12vh,
      10vw 14vh,
      6vw 9vh;

    filter: blur(.25px);
    animation: arcanisSoulParticles 0.15s cubic-bezier(.16,.84,.16,1) both !important;
  }

  body.report-open .mobile-report-simple__stage.is-paper-fly .mobile-data-card {
    animation: arcanisCardDissolveToHeaven 0.15s cubic-bezier(.16,.84,.16,1) both !important;
    transform-origin: center center !important;
    will-change: transform, opacity, filter, box-shadow !important;
    z-index: 14 !important;
  }

  @keyframes arcanisCardDissolveToHeaven {
    0% {
      transform: translate3d(0,0,0) scale(1) rotateX(0deg);
      opacity: 1;
      filter: blur(0) brightness(1);
      box-shadow: 0 1.2vh 3vh rgba(16,24,40,.12);
    }

    12% {
      transform: translate3d(0,-1.5%,28px) scale(1.018) rotateX(2deg);
      opacity: 1;
      filter: blur(0) brightness(1.25);
      box-shadow:
        0 0 2vh rgba(255,235,180,.65),
        0 1.4vh 3.4vh rgba(16,24,40,.10);
    }

    28% {
      transform: translate3d(0,-9%,58px) scale(1.035) rotateX(6deg);
      opacity: .94;
      filter: blur(.25px) brightness(1.85) saturate(1.15);
      box-shadow:
        0 0 4vh rgba(255,240,190,.95),
        0 0 7vh rgba(255,210,120,.48);
    }

    46% {
      transform: translate3d(0,-24%,96px) scale(.98) rotateX(14deg) rotateZ(-1.5deg);
      opacity: .68;
      filter: blur(1px) brightness(2.35) saturate(.9);
      box-shadow:
        0 0 7vh rgba(255,255,255,1),
        0 0 11vh rgba(255,205,115,.72);
    }

    62% {
      transform: translate3d(0,-43%,130px) scale(.86) rotateX(27deg) rotateZ(2deg);
      opacity: .38;
      filter: blur(2.2px) brightness(2.8) saturate(.55);
      box-shadow:
        0 0 10vh rgba(255,255,255,.95),
        0 0 14vh rgba(255,220,150,.65);
    }

    78% {
      transform: translate3d(0,-66%,160px) scale(.68) rotateX(45deg) rotateZ(-3deg);
      opacity: .14;
      filter: blur(4px) brightness(3.2) saturate(.25);
      box-shadow:
        0 0 13vh rgba(255,255,255,.82),
        0 0 18vh rgba(255,235,180,.45);
    }

    100% {
      transform: translate3d(0,-92%,190px) scale(.42) rotateX(72deg) rotateZ(6deg);
      opacity: 0;
      filter: blur(8px) brightness(3.8) saturate(0);
      box-shadow:
        0 0 16vh rgba(255,255,255,.65),
        0 0 22vh rgba(255,235,180,.28);
    }
  }

  @keyframes arcanisHeavenBeam {
    0% {
      opacity: 0;
      transform: translateX(-50%) scaleY(.08);
      filter: blur(14px);
    }

    18% {
      opacity: .82;
      transform: translateX(-50%) scaleY(.65);
      filter: blur(10px);
    }

    42% {
      opacity: 1;
      transform: translateX(-50%) scaleY(1);
      filter: blur(7px);
    }

    72% {
      opacity: .9;
      transform: translateX(-50%) scaleY(1.08);
      filter: blur(9px);
    }

    100% {
      opacity: 0;
      transform: translateX(-50%) scaleY(1.18);
      filter: blur(16px);
    }
  }

  @keyframes arcanisSoulParticles {
    0% {
      opacity: 0;
      transform: translateY(18%) scale(.9);
    }

    25% {
      opacity: .35;
    }

    48% {
      opacity: .95;
      transform: translateY(-8%) scale(1);
    }

    76% {
      opacity: .72;
      transform: translateY(-34%) scale(1.08);
    }

    100% {
      opacity: 0;
      transform: translateY(-72%) scale(1.16);
    }
  }
}





@media (max-width: 767px) {
  body.report-open .mobile-report-simple__stage {
    position: relative !important;
    overflow: visible !important;
  }

  .arcanis-frame-flash {
    position: absolute !important;
    inset: -1.1vh !important;
    border-radius: 3.4vh !important;
    pointer-events: none !important;
    z-index: 999 !important;

    opacity: 0;
    border: 2px solid rgba(36,87,245,.95);

    box-shadow:
      0 0 1.2vh rgba(36,87,245,.95),
      0 0 3vh rgba(36,87,245,.75),
      0 0 6vh rgba(36,87,245,.45),
      inset 0 0 2vh rgba(36,87,245,.55);

    animation: arcanisFrameFlash .72s cubic-bezier(.16,.84,.16,1) both;
  }

.arcanis-frame-flash {
  position: absolute !important;
  inset: -0.75vh !important;
  border-radius: 3.6vh !important;
  pointer-events: none !important;
  z-index: 999 !important;

  opacity: 0;

  background:
    linear-gradient(135deg,
      rgba(255,255,255,.0) 0%,
      rgba(120,155,255,.22) 28%,
      rgba(36,87,245,.72) 50%,
      rgba(120,155,255,.22) 72%,
      rgba(255,255,255,.0) 100%);

  padding: 1.5px !important;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  box-shadow:
    0 0 .9vh rgba(36,87,245,.62),
    0 0 2.2vh rgba(36,87,245,.34),
    0 0 5vh rgba(36,87,245,.18),
    inset 0 0 1.8vh rgba(130,160,255,.35);

  filter: blur(.35px) saturate(1.25);
  transform: scale(.985);
  animation: arcanisFrameFlashApple .82s cubic-bezier(.18,.86,.22,1) both;
}

@keyframes arcanisFrameFlashApple {
  0% {
    opacity: 0;
    transform: scale(.985);
    filter: blur(3px) saturate(1.1);
  }

  16% {
    opacity: .95;
    transform: scale(1.006);
    filter: blur(.25px) saturate(1.35);
  }

  38% {
    opacity: .72;
    transform: scale(1.012);
    filter: blur(.8px) saturate(1.25);
  }

  64% {
    opacity: .34;
    transform: scale(1.018);
    filter: blur(2px) saturate(1.12);
  }

  100% {
    opacity: 0;
    transform: scale(1.026);
    filter: blur(5px) saturate(1);
  }
}
}



/* =========================================================
   MOBILE FINAL SCORE COLOR OVERRIDE
   Uses same 4-color system as desktop
   ========================================================= */

@media (max-width: 767px) {
  body.report-open .hero-report-metric.metric-bad > strong,
  body.report-open #heroReportScoreValue.metric-bad,
  body.report-open #heroReportAdvice.metric-bad {
    color: #ef4444 !important;
  }

  body.report-open .hero-report-metric.metric-fair > strong,
  body.report-open #heroReportScoreValue.metric-fair,
  body.report-open #heroReportAdvice.metric-fair {
    color: #f5c542 !important;
  }

  body.report-open .hero-report-metric.metric-okay > strong,
  body.report-open #heroReportScoreValue.metric-okay,
  body.report-open #heroReportAdvice.metric-okay {
    color: #101828 !important;
  }

  body.report-open .hero-report-metric.metric-good > strong,
  body.report-open #heroReportScoreValue.metric-good,
  body.report-open #heroReportAdvice.metric-good {
    color: #2457f5 !important;
  }
}




/* FINAL RISK COLOR FIX */
@media (max-width: 767px) {
  body.report-open .hero-report-card.metric-good,
  body.report-open .hero-report-main.metric-good {
    border-color: rgba(36,87,245,.45) !important;
  }

  body.report-open .hero-report-card.metric-fair,
  body.report-open .hero-report-main.metric-fair {
    border-color: rgba(247,144,9,.55) !important;
  }

  body.report-open .hero-report-card.metric-bad,
  body.report-open .hero-report-main.metric-bad {
    border-color: rgba(239,68,68,.55) !important;
  }

  body.report-open #heroReportAdvice.metric-good,
  body.report-open #heroMetricRisk.metric-good {
    color: #2457f5 !important;
  }

  body.report-open #heroReportAdvice.metric-fair,
  body.report-open #heroMetricRisk.metric-fair {
    color: #f79009 !important;
  }

  body.report-open #heroReportAdvice.metric-bad,
  body.report-open #heroMetricRisk.metric-bad {
    color: #ef4444 !important;
  }


/* =========================================================
   FINAL DEDICATED RISK COLORS
   Low risk = blue | Mid risk = orange | High risk = red
   ========================================================= */

:root {
  --risk-low-color: #2457f5;
  --risk-mid-color: #f79009;
  --risk-high-color: #ef4444;
}

/* Risk card value */
.hero-report-metric.risk-low > strong,
#heroMetricRisk.risk-low,
#riskLevelValue.risk-low,
.landing-category-card.risk-low .landing-category-card__score {
  color: var(--risk-low-color) !important;
}

.hero-report-metric.risk-mid > strong,
#heroMetricRisk.risk-mid,
#riskLevelValue.risk-mid,
.landing-category-card.risk-mid .landing-category-card__score {
  color: var(--risk-mid-color) !important;
}

.hero-report-metric.risk-high > strong,
#heroMetricRisk.risk-high,
#riskLevelValue.risk-high,
.landing-category-card.risk-high .landing-category-card__score {
  color: var(--risk-high-color) !important;
}

/* Big focused report text when Risk is selected */
#heroReportAdvice.risk-low,
#heroReportScoreValue.risk-low,
#heroReportVerdict.risk-low {
  color: var(--risk-low-color) !important;
}

#heroReportAdvice.risk-mid,
#heroReportScoreValue.risk-mid,
#heroReportVerdict.risk-mid {
  color: var(--risk-mid-color) !important;
}

#heroReportAdvice.risk-high,
#heroReportScoreValue.risk-high,
#heroReportVerdict.risk-high {
  color: var(--risk-high-color) !important;
}

/* Optional: risk panel/card border feedback */
.hero-report-main.risk-low,
.hero-report-card.risk-low {
  border-color: rgba(36,87,245,.45) !important;
}

.hero-report-main.risk-mid,
.hero-report-card.risk-mid {
  border-color: rgba(247,144,9,.55) !important;
}

.hero-report-main.risk-high,
.hero-report-card.risk-high {
  border-color: rgba(239,68,68,.55) !important;
}


/* =========================================================
   FINAL RISK COLOR SYSTEM
   Low = blue | Mid = orange | High = red
   ========================================================= */

:root {
  --risk-low-color: #2457f5;
  --risk-mid-color: #f79009;
  --risk-high-color: #ef4444;
}

.hero-report-metric.risk-low > strong,
#heroMetricRisk.risk-low {
  color: var(--risk-low-color) !important;
}

.hero-report-metric.risk-mid > strong,
#heroMetricRisk.risk-mid {
  color: var(--risk-mid-color) !important;
}

.hero-report-metric.risk-high > strong,
#heroMetricRisk.risk-high {
  color: var(--risk-high-color) !important;
}
}


@media (max-width: 767px) {
  body:not(.report-open) .idea-mini-tab__score.score-low {
    color: #ef4444 !important;
  }

  body:not(.report-open) .idea-mini-tab__score.score-mid {
    color: #f5c542 !important;
  }

  body:not(.report-open) .idea-mini-tab__score.score-good {
    color: #101828 !important;
  }

  body:not(.report-open) .idea-mini-tab__score.score-high {
    color: #2457f5 !important;
  }
}

/* =========================================================
   MOBILE REPORT EXTENDED BUTTON — FINAL CENTERED NAME
   Name is centered in the button. X is separate on the right.
   ========================================================= */

.button__mobile-close-hint {
  display: none;
}

@media (max-width: 767px) {

  body.report-open #submitIdeaButton {
    position: relative !important;
    overflow: hidden !important;
  }

  /* The actual name text is centered independently */
  body.report-open #submitIdeaButton.is-processing-label-visible .button__processing {
    position: absolute !important;

    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;

    width: max-content !important;
    max-width: 82vw !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 1.1vw !important;
    padding: 0 !important;
    margin: 0 !important;

    overflow: hidden !important;
    white-space: nowrap !important;
    text-align: center !important;

    z-index: 80 !important;
    pointer-events: none !important;
  }

  body.report-open #submitIdeaButton.is-processing-label-visible .button__processing-label {
    flex: 0 0 auto !important;
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;

    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;

    text-align: center !important;
  }

  body.report-open #submitIdeaButton.is-processing-label-visible .button__processing-word {
    flex: 0 1 auto !important;
    display: inline-block !important;

    min-width: 0 !important;
    width: auto !important;
    max-width: 58vw !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    text-align: left !important;
  }

  /* X is separate and cannot push the name */
  body.report-open #submitIdeaButton .button__mobile-close-hint {
    position: absolute !important;

    right: 3.2vw !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 8vw !important;
    height: 5vh !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    color: #ffffff !important;
    opacity: .92 !important;

    z-index: 20 !important;
    pointer-events: none !important;
  }

  body.report-open #submitIdeaButton .button__mobile-close-x {
    display: block !important;
    font-size: clamp(18px, 5.6vw, 27px) !important;
    line-height: .72 !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
  }

  body.report-open #submitIdeaButton .button__mobile-close-text {
    display: block !important;
    margin-top: .35vh !important;

    font-size: clamp(5px, 1.35vw, 7px) !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
  }
}







/* =========================================================
   MOBILE REPORT — POST SWIPE / POST TAP LABEL EMPHASIS
   Swipe finished  -> pulse top-right category name
   Tap finished    -> pulse top-left item label
   0.2s grow | 0.5s hold | 0.2s shrink = 0.9s total
   ========================================================= */

@media (max-width: 767px) {

  /* Top-right category name: FINANCIALS / COMPETITION / etc. */
  body.report-open .mobile-report-stage-title {
    display: inline-block !important;
    transform-origin: center center !important;
    will-change: transform, filter, text-shadow !important;
  }

  /* Top-left item label: STARTUP COST / COMPETITOR 1 / STEP 1 */
  body.report-open .mobile-data-card__label {
    display: inline-block !important;

    /* important: prevents big labels from crashing into the right title */
    max-width: 48vw !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    transform-origin: left center !important;
    will-change: transform, filter, text-shadow !important;
  }

  /* After SWIPE: animate top-right category name */
  body.report-open .mobile-report-simple__stage.is-category-name-pop
  .mobile-report-stage-title {
    animation: arcanisPremiumLabelPulse .9s cubic-bezier(.16, 1, .3, 1) both;
  }

  /* After TAP: animate top-left item label */
  body.report-open .mobile-report-simple__stage.is-item-label-pop
  .mobile-data-card__label {
    animation: arcanisPremiumLabelPulse .9s cubic-bezier(.16, 1, .3, 1) both;
  }

  @keyframes arcanisPremiumLabelPulse {
    0% {
      transform: scale(1);
      filter: brightness(1);
      text-shadow: none;
    }

    /* 0.2s grow */
    22.22% {
      transform: scale(1.2);
      filter: brightness(1.08);
      text-shadow: 0 .25vh .8vh rgba(36,87,245,.16);
    }

    /* 0.5s hold */
    77.78% {
      transform: scale(1.2);
      filter: brightness(1.08);
      text-shadow: 0 .25vh .8vh rgba(36,87,245,.16);
    }

    /* 0.2s shrink */
    100% {
      transform: scale(1);
      filter: brightness(1);
      text-shadow: none;
    }
  }
}






/* MOBILE ONLY — replace 3 middle cards with audit-banner image */
@media (max-width: 767px) {

  #landingJourneySection {
    width: 95vw !important;
    height: 11vh !important;
    flex: 0 0 11vh !important;
    margin: 0 auto !important;
    padding: 0 !important;

    background-image: url("/static/audit-banner.png") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;

    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #landingJourneySection .idea-flow-top,
  #landingJourneySection .idea-flow-card {
    display: none !important;
  }
}



@media (max-width: 767px) {
  .audit-info-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 50000 !important;

    display: grid !important;
    place-items: center !important;

    padding: 6vw !important;
    background: rgba(8, 13, 28, 0.34) !important;

    backdrop-filter: blur(18px) saturate(1.15) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.15) !important;
  }

  .audit-info-overlay[hidden] {
    display: none !important;
  }

  .audit-info-card {
    width: min(88vw, 420px) !important;
    padding: 3.2vh 6vw !important;

    border-radius: 3.2vh !important;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,249,255,.90)) !important;
    border: 1px solid rgba(203,216,242,.88) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.98),
      0 3vh 7vh rgba(16,24,40,.22),
      0 0 0 1px rgba(36,87,245,.06) !important;

    text-align: left !important;
    animation: auditInfoIn .28s cubic-bezier(.22,.61,.36,1);
  }

  .audit-info-eyebrow {
    display: inline-block !important;
    margin-bottom: 1.2vh !important;

    font-family: "Posterama", system-ui, sans-serif !important;
    font-size: clamp(11px, 2.8vw, 14px) !important;
    font-weight: 900 !important;
    letter-spacing: .18em !important;
    color: #2457f5 !important;
  }

  .audit-info-card h2 {
    margin: 0 0 1.4vh !important;
    color: #101828 !important;
    font-size: clamp(28px, 7vw, 42px) !important;
    line-height: .95 !important;
    font-weight: 950 !important;
    letter-spacing: -.06em !important;
  }

  .audit-info-card p {
    margin: 0 0 1.4vh !important;
    color: #475467 !important;
    font-size: clamp(14px, 3.7vw, 17px) !important;
    line-height: 1.55 !important;
    font-weight: 650 !important;
  }

  .audit-info-card p:last-child {
    margin-bottom: 0 !important;
  }

  @keyframes auditInfoIn {
    from {
      opacity: 0;
      transform: scale(.96) translateY(1.2vh);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }
}







@media (max-width: 767px) {
  .idea-mini-tab.is-saving-out-up {
    animation: mobileTabSaveUp 2s cubic-bezier(.22,.61,.36,1) forwards !important;
  }

  .idea-mini-tab.is-saving-out-down,
  .idea-mini-tab.is-saving-out {
    animation: mobileTabSaveDown 2s cubic-bezier(.22,.61,.36,1) forwards !important;
  }

  @keyframes mobileTabSaveUp {
    0% {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }

    100% {
      opacity: 0;
      transform: translateY(-42px) scale(.92);
      filter: blur(2px);
    }
  }

  @keyframes mobileTabSaveDown {
    0% {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }

    100% {
      opacity: 0;
      transform: translateY(42px) scale(.92);
      filter: blur(2px);
    }
  }
}



@media (max-width: 767px) {
  body:not(.report-open) .idea-mini-tab.is-saving-out-up,
  body:not(.report-open) .idea-mini-tab.is-saving-out-down {
    pointer-events: none !important;
    position: relative !important;
    transform: none !important;
  }

  body:not(.report-open) .idea-mini-tab.is-saving-out-up {
    animation: mobileTabSaveUpFixed 2s cubic-bezier(.22,.61,.36,1) forwards !important;
  }

  body:not(.report-open) .idea-mini-tab.is-saving-out-down {
    animation: mobileTabSaveDownFixed 2s cubic-bezier(.22,.61,.36,1) forwards !important;
  }

  @keyframes mobileTabSaveUpFixed {
    0% {
      opacity: 1;
      top: 0;
      filter: blur(0);
    }

    100% {
      opacity: 0;
      top: -42px;
      filter: blur(2px);
    }
  }

  @keyframes mobileTabSaveDownFixed {
    0% {
      opacity: 1;
      top: 0;
      filter: blur(0);
    }

    100% {
      opacity: 0;
      top: 42px;
      filter: blur(2px);
    }
  }
}



@media (max-width: 767px) {
  body:not(.report-open) .idea-mini-tab.is-saving-out-up,
  body:not(.report-open) .idea-mini-tab.is-saving-out-down {
    pointer-events: none !important;
    position: relative !important;
    transform: none !important;
  }

  body:not(.report-open) .idea-mini-tab.is-saving-out-up {
    animation: mobileTabSaveUpFixed 2s cubic-bezier(.22,.61,.36,1) forwards !important;
  }

  body:not(.report-open) .idea-mini-tab.is-saving-out-down {
    animation: mobileTabSaveDownFixed 2s cubic-bezier(.22,.61,.36,1) forwards !important;
  }
}



@media (max-width: 767px) {
  #landingJourneySection {
    position: relative !important;
  }

  #landingJourneySection.is-auditing-banner::before {
    content: "" !important;
    position: absolute !important;
    top: 0.2vh !important;
    width: 38vw !important;
    height: 7.4vh !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  #landingJourneySection.is-auditing-banner::after {
    content: attr(data-audit-word) !important;
    position: absolute !important;
    top: 0.25vh !important;
    z-index: 3 !important;

    font-family: "Posterama", system-ui, sans-serif !important;
    font-size: clamp(27px, 11.2vw, 40px) !important;
    font-weight: 800 !important;
    letter-spacing: .16em !important;
    line-height: 1 !important;
    color: #2457f5 !important;

    pointer-events: none !important;
  }
}


@media (max-width: 767px) {
  body.processing-lock .brand-link.is-processing-disabled,
  body.processing-lock .vault-btn.is-processing-disabled,
  body.processing-lock .user-menu-btn.is-processing-disabled,
  body.processing-lock .sidebar-step.is-processing-disabled,
  body.processing-lock .idea-mini-tab.is-processing-disabled {
    pointer-events: none !important;
    cursor: default !important;
    touch-action: none !important;
  }
}



@media (max-width: 767px) {
  .idea-mini-tab-status {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #2457f5 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    font-family: "Posterama", system-ui, sans-serif !important;
    font-size: clamp(13px, 3.4vw, 18px) !important;
    font-weight: 900 !important;
    letter-spacing: .18em !important;

    animation: tabStatusFlash .22s ease forwards !important;
  }

  @keyframes tabStatusFlash {
    0% {
      opacity: 0;
      transform: scale(.92);
    }
    35% {
      opacity: 1;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(.98);
    }
  }
}


@media (max-width: 767px) {
  #heroMorphStage.is-morph-paused::after {
    content: "PAUSED";
    position: absolute;
    right: 1.4vh;
    top: 1.4vh;
    z-index: 30;
    padding: .45vh .9vh;
    border-radius: 999px;
    background: rgba(5, 7, 12, .55);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    pointer-events: none;
  }
}



/* =========================================================
   PIXAR / LEAGUE-STYLE MOBILE REPORT REVEAL
   Phone CSS only — add at VERY BOTTOM
   ========================================================= */

@media (max-width: 767px) {

  body.report-open.audit-reveal-active::before {
    content: "ARCANIS";
    position: fixed;
    inset: 0;
    z-index: 999999;

    display: grid;
    place-items: center;

      font-family: 'Posterama Light', sans-serif;
    font-size: clamp(34px, 10vw, 64px);
    font-weight: 950;
    letter-spacing: -0.08em;
    color: #ffffff;

    background:
      radial-gradient(circle at 50% 45%, rgba(76,121,255,.95), transparent 18%),
      radial-gradient(circle at 50% 50%, rgba(36,87,245,.75), transparent 38%),
      radial-gradient(circle at 50% 100%, rgba(0,0,0,.9), transparent 46%),
      linear-gradient(180deg, #02040a 0%, #08122d 46%, #000000 100%);

    animation: arcanisReportRevealScreen 2.15s cubic-bezier(.16,1,.3,1) forwards;
    pointer-events: none;
  }

  body.report-open.audit-reveal-active::after {
    content: "";
    position: fixed;
    inset: -25%;
    z-index: 999998;
    pointer-events: none;

    background:
      conic-gradient(
        from 0deg,
        transparent,
        rgba(111,149,255,.0),
        rgba(111,149,255,.8),
        rgba(255,255,255,.95),
        rgba(36,87,245,.9),
        transparent
      );

    filter: blur(18px);
    transform: scale(.2) rotate(0deg);
    opacity: 0;

    animation: arcanisReportRevealEnergy 2.15s cubic-bezier(.16,1,.3,1) forwards;
  }




  body.report-open.audit-reveal-active .morph-showcase,
body.report-open.audit-reveal-active #reportDashboard,
body.report-open.audit-reveal-active .hero-report-layer {
    animation: arcanisReportContentEntrance 2.35s cubic-bezier(.16,1,.3,1) both;
  }

  @keyframes arcanisReportRevealScreen {
    0% {
      opacity: 0;
      transform: scale(1.08);
      filter: blur(18px);
    }

    14% {
      opacity: 1;
      transform: scale(1);
      filter: blur(0);
    }

    34% {
      letter-spacing: .08em;
      text-shadow:
        0 0 22px rgba(255,255,255,.95),
        0 0 52px rgba(36,87,245,.95),
        0 0 90px rgba(36,87,245,.55);
    }

    58% {
      transform: scale(1.03);
      filter: brightness(1.25);
    }

    76% {
      opacity: 1;
      transform: scale(14);
      filter: blur(6px) brightness(2.4);
    }

    100% {
      opacity: 0;
      transform: scale(28);
      filter: blur(22px) brightness(3);
      visibility: hidden;
    }
  }

  @keyframes arcanisReportRevealEnergy {
    0% {
      opacity: 0;
      transform: scale(.15) rotate(0deg);
    }

    20% {
      opacity: .95;
      transform: scale(.55) rotate(90deg);
    }

    52% {
      opacity: 1;
      transform: scale(1.05) rotate(240deg);
    }

    78% {
      opacity: .85;
      transform: scale(2.4) rotate(410deg);
    }

    100% {
      opacity: 0;
      transform: scale(3.6) rotate(540deg);
    }
  }

  @keyframes arcanisReportContentEntrance {
    0%,
    72% {
      opacity: 0;
      transform: scale(.94) translateY(2.2vh);
      filter: blur(26px) brightness(.7);
    }

    88% {
      opacity: 1;
      transform: scale(1.025) translateY(-.5vh);
      filter: blur(0) brightness(1.08);
    }

    100% {
      opacity: 1;
      transform: scale(1) translateY(0);
      filter: blur(0) brightness(1);
    }
  }
}



/* =========================================================
   TAB SAVE / DELETE STATE
   ========================================================= */

/* =========================================================
   FINAL TAB SAVE / DELETE FULL CONTENT STATE
   MUST BE LAST IN PHONE CSS
   ========================================================= */

@media (max-width: 767px) {

  body:not(.report-open) .idea-mini-tab.is-save-state,
  body:not(.report-open) .idea-mini-tab.is-delete-state {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    overflow: visible !important;

    border: 0 !important;
    border-radius: 2.2vh !important;

    background: linear-gradient(180deg, #ffffff, #eef4ff) !important;

    box-shadow:
      inset 0 0 0 4px #0e2f91,
      0 0 0 2px rgba(14,47,145,.18),
      0 0 18px rgba(14,47,145,.32),
      0 .8vh 2vh rgba(16,24,40,.14) !important;
  }

  body:not(.report-open) .idea-mini-tab.is-save-state > *,
  body:not(.report-open) .idea-mini-tab.is-delete-state > * {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  body:not(.report-open) .idea-mini-tab.is-save-state::after,
  body:not(.report-open) .idea-mini-tab.is-delete-state::after {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;

    position: absolute !important;
    inset: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-family: "Posterama", system-ui, sans-serif !important;
    font-size: clamp(10px, 3vw, 14px) !important;
    font-weight: 950 !important;
    letter-spacing: .11em !important;
    line-height: 1 !important;

    color: #0e2f91 !important;
    text-align: center !important;
    white-space: nowrap !important;

    z-index: 20 !important;

    animation: arcanisTabStatePop .45s ease both !important;
  }

  body:not(.report-open) .idea-mini-tab.is-save-state::after {
    content: "SAVE" !important;
  }

  body:not(.report-open) .idea-mini-tab.is-delete-state::after {
    content: "DELETE" !important;
  }

  @keyframes arcanisTabStatePop {
    0% {
      opacity: 0;
      transform: scale(.82);
    }

    55% {
      opacity: 1;
      transform: scale(1.08);
    }

    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
}




/* =========================================================
   BIGGER MOBILE PROCESSING TEXT
   ========================================================= */

@media (max-width: 767px) {

  #submitIdeaButton.is-processing-label-visible .button__processing {
    gap: 1.8vw !important;
  }

  #submitIdeaButton.is-processing-label-visible .button__processing-label,
  #submitIdeaButton.is-processing-label-visible .button__processing-word {

    font-size: clamp(18px, 5vw, 26px) !important;
    line-height: 1 !important;

    font-weight: 950 !important;
    letter-spacing: .12em !important;
  }

  #submitIdeaButton.is-processing-label-visible .button__dots span {
    font-size: clamp(20px, 5.5vw, 28px) !important;
  }

}



/* =========================================================
   VAULT ICON SAVE PULSE
   ========================================================= */
@media (max-width: 767px) {
  .vault-btn .vault-icon img.is-vault-saving-img {
    animation: arcanisVaultPulse .5s cubic-bezier(.22,1,.36,1) both !important;
    transform-origin: center center !important;
    will-change: transform !important;
  }

  @keyframes arcanisVaultPulse {
    0% { transform: scale(1) translateZ(0); }
    35% { transform: scale(1.4) translateZ(0); }
    100% { transform: scale(1) translateZ(0); }
  }
  
   .audit-info-disclaimer{
  margin-top: 1.4vh;
  padding-top: 1.2vh;

  border-top: 1px solid rgba(36,87,245,.12);

  font-size: clamp(10px, 2.6vw, 13px);
  line-height: 1.45;
  letter-spacing: -.01em;

  color: rgba(16,24,40,.68);
}
}




/* =========================================================
   ARCANIS CINEMATIC AUTH EXPERIENCE
   FULLSCREEN / APPLE + PIXAR STYLE
   ========================================================= */

@media (max-width: 767px) {

  .mobile-auth-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    overflow: hidden !important;

    background:
      radial-gradient(circle at 50% 18%,
        rgba(36,87,245,.22),
        transparent 26%),

      radial-gradient(circle at 82% 76%,
        rgba(36,87,245,.18),
        transparent 32%),

      linear-gradient(180deg,
        #05070d 0%,
        #09111f 42%,
        #05070d 100%) !important;

    backdrop-filter: blur(28px) saturate(1.25) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.25) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform-origin: 50% 42% !important;
  }

  .mobile-auth-overlay::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;

    background:
      radial-gradient(circle at 20% 20%,
        rgba(255,255,255,.05) 0 1px,
        transparent 1.8px),

      radial-gradient(circle at 80% 70%,
        rgba(255,255,255,.04) 0 1px,
        transparent 1.8px);

    background-size: 3.5vw 3.5vw !important;
    opacity: .45 !important;

    pointer-events: none !important;
  }

  .mobile-auth-overlay.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    animation:
      arcanisAuthOverlayReveal .85s cubic-bezier(.16,1,.3,1) both !important;
  }

  .mobile-auth-overlay.is-closing {
    animation:
      arcanisAuthOverlayClose .58s cubic-bezier(.7,0,.2,1) both !important;
  }

  .mobile-auth-card {

    position: relative !important;
    z-index: 2 !important;

    width: 92vw !important;
    max-width: 92vw !important;

    min-height: 74vh !important;

    padding:
      5vh 6vw
      max(4vh, env(safe-area-inset-bottom)) !important;

    border-radius: 4vh !important;

    overflow: hidden !important;

    background:
      radial-gradient(circle at 50% 0%,
        rgba(36,87,245,.18),
        transparent 38%),

      linear-gradient(180deg,
        rgba(17,24,39,.82),
        rgba(5,7,13,.92)) !important;

    border: 1px solid rgba(143,176,255,.22) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 -3vh 6vh rgba(0,0,0,.35),
      0 4vh 10vh rgba(0,0,0,.42),
      0 0 0 1px rgba(255,255,255,.04) !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    backdrop-filter: blur(20px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.1) !important;
  }

  .mobile-auth-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;

    background:
      linear-gradient(
        118deg,
        transparent 0%,
        rgba(255,255,255,.06) 42%,
        transparent 64%
      );

    pointer-events: none !important;
  }

  .mobile-auth-card > * {
    position: relative !important;
    z-index: 2 !important;
  }

  .mobile-auth-close {
    position: absolute !important;
    top: 2vh !important;
    right: 4vw !important;

    width: 5vh !important;
    height: 5vh !important;

    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.12) !important;

    background: rgba(255,255,255,.06) !important;
    color: #ffffff !important;

    font-size: 3vh !important;
    font-weight: 700 !important;

    display: grid !important;
    place-items: center !important;

    backdrop-filter: blur(12px) !important;
  }

  .mobile-auth-orb {

    width: 12vh !important;
    height: 12vh !important;

    margin: 0 auto 3vh !important;

    border-radius: 50% !important;

    display: grid !important;
    place-items: center !important;

    background:
      radial-gradient(circle at 30% 20%,
        rgba(255,255,255,.38),
        transparent 34%),

linear-gradient(180deg,
  #5e5e63 0%,
  #2b2b2f 52%,
  #0b0b0d 100%) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.38),
      0 2vh 5vh rgba(36,87,245,.42),
      0 0 6vh rgba(36,87,245,.28) !important;
  }

  .mobile-auth-orb img {
    width: 56% !important;
    height: 56% !important;
    object-fit: contain !important;
    filter: brightness(1.25) !important;
  }

  .mobile-auth-card h2 {

    margin: 0 0 1.4vh !important;

    text-align: center !important;

    color: #ffffff !important;

    font-size: clamp(42px, 11vw, 64px) !important;
    line-height: .88 !important;

    letter-spacing: -.08em !important;
    font-weight: 950 !important;
  }

  .mobile-auth-card p {

    margin: 0 auto 3vh !important;

    width: 86% !important;

    text-align: center !important;

    color: rgba(255,255,255,.72) !important;

    font-size: clamp(15px, 4vw, 20px) !important;
    line-height: 1.35 !important;

    font-weight: 700 !important;
  }

  .mobile-auth-toggle {

    width: 100% !important;
    height: 6vh !important;

    margin-bottom: 3vh !important;
    padding: .5vh !important;

    border-radius: 999px !important;

    background:
      linear-gradient(180deg,
        rgba(255,255,255,.08),
        rgba(255,255,255,.04)) !important;

    border: 1px solid rgba(255,255,255,.08) !important;

    display: grid !important;
    grid-template-columns: 1fr 1fr !important;

    backdrop-filter: blur(14px) !important;
  }

  .mobile-auth-toggle button {

    border: 0 !important;
    border-radius: 999px !important;

    background: transparent !important;

    color: rgba(255,255,255,.72) !important;

    font-size: clamp(13px, 3.6vw, 18px) !important;
    font-weight: 900 !important;

    letter-spacing: .04em !important;
  }

  .mobile-auth-toggle button.is-active {

    background:
      linear-gradient(180deg,
        #4c79ff,
        #2457f5) !important;

    color: #ffffff !important;

    box-shadow:
      0 1vh 2.6vh rgba(36,87,245,.35),
      inset 0 1px 0 rgba(255,255,255,.28) !important;
  }

  .mobile-auth-card input {

    width: 100% !important;
    height: 6.4vh !important;

    margin-bottom: 1.3vh !important;
    padding: 0 5vw !important;

    border-radius: 2vh !important;

    border: 1px solid rgba(255,255,255,.08) !important;

    background:
      linear-gradient(180deg,
        rgba(255,255,255,.08),
        rgba(255,255,255,.04)) !important;

    color: #ffffff !important;

    font-size: clamp(15px, 4vw, 19px) !important;
    font-weight: 800 !important;

    backdrop-filter: blur(16px) !important;
  }

  .mobile-auth-card input::placeholder {
    color: rgba(255,255,255,.42) !important;
  }

  .mobile-auth-submit {

    width: 100% !important;
    height: 6.6vh !important;

    margin-top: 1.6vh !important;

    border: 0 !important;
    border-radius: 2.2vh !important;

    background: black;

    color: #ffffff !important;

    font-size: clamp(15px, 4vw, 20px) !important;
    font-weight: 950 !important;

    letter-spacing: .08em !important;

    box-shadow:
      0 2vh 4vh rgba(36,87,245,.32),
      inset 0 1px 0 rgba(255,255,255,.28) !important;
  }

@keyframes arcanisAuthOverlayReveal {
  0% {
    opacity: 0;
    transform: scale(.08) translateY(18vh);
    filter: blur(24px);
  }

  72% {
    opacity: 1;
    transform: scale(1.025) translateY(0);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes arcanisAuthOverlayClose {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }

  100% {
    opacity: 0;
    transform: scale(.04) translateY(16vh);
    filter: blur(22px);
    visibility: hidden;
  }
}
}





@media (max-width: 767px) {

  .mobile-auth-overlay {
    background: rgba(255,255,255,.18) !important;
    backdrop-filter: blur(18px) saturate(1.45) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.45) !important;
  }

  .mobile-auth-card {
    background:
      linear-gradient(180deg,
        rgba(255,255,255,.82),
        rgba(246,249,255,.58)) !important;

    border: 1px solid rgba(255,255,255,.78) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      inset 0 -1px 0 rgba(255,255,255,.45),
      0 3vh 8vh rgba(16,24,40,.18),
      0 .8vh 2.4vh rgba(36,87,245,.08) !important;

    color: #101828 !important;

    backdrop-filter: blur(34px) saturate(1.55) !important;
    -webkit-backdrop-filter: blur(34px) saturate(1.55) !important;
  }

  .mobile-auth-card::before {
    background:
      radial-gradient(circle at 50% 0%,
        rgba(255,255,255,.95),
        transparent 38%),
      linear-gradient(115deg,
        transparent 0%,
        rgba(255,255,255,.55) 44%,
        transparent 62%) !important;
    opacity: .72 !important;
  }

  .mobile-auth-card h2 {
    color: #0b1220 !important;
    font-weight: 950 !important;
    letter-spacing: -.08em !important;
  }

  .mobile-auth-card p {
    color: rgba(16,24,40,.62) !important;
    font-weight: 750 !important;
  }

  .mobile-auth-toggle {
    background: rgba(255,255,255,.48) !important;
    border: 1px solid rgba(255,255,255,.72) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 .8vh 2vh rgba(16,24,40,.06) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
  }

  .mobile-auth-toggle button {
    color: rgba(16,24,40,.58) !important;
  }

  .mobile-auth-toggle button.is-active {
    background: rgba(255,255,255,.96) !important;
    color: #2457f5 !important;
    box-shadow:
      0 .6vh 1.8vh rgba(16,24,40,.10),
      inset 0 1px 0 rgba(255,255,255,.95) !important;
  }

  .mobile-auth-card input {
    background: rgba(255,255,255,.68) !important;
    color: #101828 !important;
    border: 1px solid rgba(255,255,255,.78) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 .6vh 1.8vh rgba(16,24,40,.055) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }

  .mobile-auth-card input::placeholder {
    color: rgba(102,112,133,.72) !important;
  }

  .mobile-auth-google {
    width: 100% !important;
    height: 5.8vh !important;
    margin: 0 0 1.2vh !important;

    border-radius: 1.8vh !important;
    border: 1px solid rgba(255,255,255,.78) !important;

    background: rgba(255,255,255,.82) !important;
    color: #101828 !important;

    font-weight: 900 !important;
    letter-spacing: -.02em !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2vw !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 .8vh 2vh rgba(16,24,40,.07) !important;

    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }

  .mobile-auth-google span {
    color: #2457f5 !important;
    font-weight: 950 !important;
    font-size: 18px !important;
  }

  .mobile-auth-submit {
    background:
      linear-gradient(180deg, #4c79ff, #2457f5) !important;
    box-shadow:
      0 1.4vh 3vh rgba(36,87,245,.28),
      inset 0 1px 0 rgba(255,255,255,.28) !important;
  }

  .mobile-auth-divider {
    margin: .8vh 0 1.2vh !important;
    color: rgba(102,112,133,.70) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    text-align: center !important;
  }

  .mobile-auth-close {
    background: rgba(255,255,255,.54) !important;
    color: rgba(16,24,40,.68) !important;
    border: 1px solid rgba(255,255,255,.70) !important;
    box-shadow: 0 .6vh 1.6vh rgba(16,24,40,.08) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }
}



@media (max-width: 767px) {

  body.report-open #mobileConfidenceIndicator {
    display: grid !important;
    grid-template-columns: 13vw 1fr 4vw !important;
    align-items: center !important;
    gap: 3.2vw !important;

    width: 95vw !important;
    height: 6.7vh !important;
    margin: .2vh auto 1vh !important;
    padding: .7vh 4vw .7vh 3vw !important;

    border-radius: 999px !important;
    background:
      linear-gradient(115deg, rgba(255,255,255,.98), rgba(245,248,255,.92)) !important;

    border: 1px solid rgba(203,216,242,.9) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,1),
      0 .8vh 2.2vh rgba(16,24,40,.10),
      0 0 0 3px rgba(36,87,245,.045) !important;

    position: relative !important;
    z-index: 80 !important;
    overflow: hidden !important;
  }

  body:not(.report-open) #mobileConfidenceIndicator {
    display: none !important;
  }

  #mobileConfidenceIndicator::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.65) 42%, transparent 62%) !important;
    pointer-events: none !important;
  }

  .confidence-orb {
    width: 11vw !important;
    height: 11vw !important;
    border-radius: 999px !important;
    display: grid !important;
    place-items: center !important;
    position: relative !important;
    background: rgba(255,255,255,.72) !important;
    border: 1px solid rgba(203,216,242,.9) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 .6vh 1.5vh rgba(16,24,40,.08) !important;
  }

  .confidence-orb span {
    position: absolute !important;
    width: 1.55vw !important;
    height: 1.55vw !important;
    border-radius: 999px !important;
    background: currentColor !important;
    box-shadow: 0 0 10px currentColor !important;
  }

  .confidence-orb span:nth-child(1) { transform: translate(0, -3vw); }
  .confidence-orb span:nth-child(2) { transform: translate(2.8vw, 0); }
  .confidence-orb span:nth-child(3) { transform: translate(0, 3vw); }
  .confidence-orb span:nth-child(4) { transform: translate(-2.8vw, 0); }
  .confidence-orb span:nth-child(5) {
    width: 2.4vw !important;
    height: 2.4vw !important;
    transform: translate(0, 0);
  }

  .confidence-copy {
    position: relative !important;
    z-index: 2 !important;
    min-width: 0 !important;
    border-left: 1px solid rgba(203,216,242,.9) !important;
    padding-left: 3.6vw !important;
  }

  .confidence-copy strong {
    display: block !important;
    color: #101828 !important;
    font-size: clamp(18px, 5.2vw, 27px) !important;
    line-height: .95 !important;
    font-weight: 950 !important;
    letter-spacing: -.055em !important;
  }

  .confidence-copy small {
    display: block !important;
    margin-top: .45vh !important;
    color: #475467 !important;
    font-size: clamp(11px, 3.2vw, 16px) !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -.025em !important;
  }

  .confidence-dot {
    width: 3.2vw !important;
    height: 3.2vw !important;
    border-radius: 999px !important;
    background: currentColor !important;
    box-shadow:
      0 0 0 3px rgba(255,255,255,.95),
      0 0 18px currentColor !important;
  }

  #mobileConfidenceIndicator.confidence-low {
    color: #f04438 !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,1),
      0 .8vh 2.2vh rgba(16,24,40,.10),
      0 0 24px rgba(240,68,56,.20) !important;
  }

  #mobileConfidenceIndicator.confidence-moderate {
    color: #f79009 !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,1),
      0 .8vh 2.2vh rgba(16,24,40,.10),
      0 0 24px rgba(247,144,9,.22) !important;
  }

  #mobileConfidenceIndicator.confidence-strong {
    color: #2e7df6 !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,1),
      0 .8vh 2.2vh rgba(16,24,40,.10),
      0 0 28px rgba(46,125,246,.28) !important;
  }

  #mobileConfidenceIndicator.confidence-complete {
    color: #2457f5 !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,1),
      0 .8vh 2.2vh rgba(16,24,40,.10),
      0 0 34px rgba(36,87,245,.35) !important;
  }
}


@media (max-width: 767px) {

  body.report-open #mobileConfidenceIndicator {
    position: absolute !important;
    left: 48vw !important;
    top: 41.4vh !important;
    transform: translateX(-50%) !important;

    width: 86vw !important;
    height: 8vh !important;
    margin: 0 !important;

    z-index: 500 !important;
    pointer-events: none !important;
  }

  body.report-open .main-content {
    position: relative !important;
  }

}


@media (max-width: 767px) {

  #mobileConfidenceIndicator {
    opacity: 0;
    transition: opacity .35s ease;
  }

  #mobileConfidenceIndicator.is-visible {
    opacity: 1;
  }

}


body.report-open #mobileConfidenceIndicator {
  display: none !important;
}

body.report-open.context-ready #mobileConfidenceIndicator {
  display: grid !important;
}


@media (max-width: 767px) {
  .mobile-sheet-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;

    display: none !important;
    align-items: center !important;
    justify-content: center !important;

    padding: max(2vh, env(safe-area-inset-top)) 4vw max(2vh, env(safe-area-inset-bottom)) !important;

    background:
      radial-gradient(circle at 50% 0%, rgba(36,87,245,.20), transparent 42%),
      rgba(8, 13, 24, .42) !important;

    backdrop-filter: blur(18px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
  }

  .mobile-sheet-overlay.is-visible {
    display: flex !important;
  }

  .mobile-sheet-card {
    position: relative !important;

    width: 86vw !important;
    max-width: 430px !important;
    max-height: 76vh !important;

    padding: 3.1vh 4.8vw 3vh !important;
    border-radius: 4.2vh !important;

    background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.95), transparent 42%),
      linear-gradient(180deg, rgba(255,255,255,.92), rgba(241,246,255,.84)) !important;

    border: 1px solid rgba(203,216,242,.78) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.98),
      0 2vh 5vh rgba(16,24,40,.22) !important;

    overflow: hidden !important;
  }

  .mobile-sheet-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;

    background:
      linear-gradient(115deg, transparent 0%, rgba(255,255,255,.42) 44%, transparent 63%) !important;

    opacity: .55 !important;
  }

  .mobile-sheet-close {
    position: absolute !important;
    top: 1.6vh !important;
    right: 3.4vw !important;
    z-index: 3 !important;

    width: 3.5vh !important;
    height: 3.5vh !important;
    border: 0 !important;
    border-radius: 999px !important;

    background: rgba(16,24,40,.08) !important;
    color: #101828 !important;

    font-size: 2.2vh !important;
    font-weight: 900 !important;
  }

  .mobile-sheet-orb {
    position: relative !important;
    z-index: 2 !important;

    width: 7vh !important;
    height: 7vh !important;
    margin: 0 auto 1.4vh !important;

    display: grid !important;
    place-items: center !important;

    border-radius: 999px !important;
    background: linear-gradient(180deg, #ffffff, #eef4ff) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.96),
      0 1vh 2.2vh rgba(36,87,245,.18) !important;
  }

  .mobile-sheet-orb img {
    width: 72% !important;
    height: 72% !important;
    object-fit: contain !important;
  }

  .mobile-sheet-eyebrow,
  .mobile-sheet-card h2,
  .mobile-sheet-copy,
  .mobile-vault-list,
  .mobile-user-stats,
  .mobile-user-action {
    position: relative !important;
    z-index: 2 !important;
  }

  .mobile-sheet-eyebrow {
    display: block !important;
    text-align: center !important;
    color: #2457f5 !important;
    font-size: clamp(9px, 2.4vw, 12px) !important;
    font-weight: 950 !important;
    letter-spacing: .18em !important;
  }

  .mobile-sheet-card h2 {
    margin: .8vh 0 .7vh !important;
    text-align: center !important;
    color: #101828 !important;
    font-size: clamp(28px, 8vw, 42px) !important;
    line-height: .9 !important;
    font-weight: 950 !important;
    letter-spacing: -.08em !important;
  }

  .mobile-sheet-copy {
    margin: 0 auto 2vh !important;
    max-width: 72vw !important;
    text-align: center !important;
    color: #667085 !important;
    font-size: clamp(12px, 3vw, 15px) !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
  }

  .mobile-vault-list {
    display: grid !important;
    gap: 1vh !important;
    max-height: 43vh !important;
    overflow-y: auto !important;
    padding-right: 1vw !important;
    scrollbar-width: none !important;
  }

  .mobile-vault-list::-webkit-scrollbar {
    display: none !important;
  }

  .mobile-vault-empty {
    padding: 3vh 4vw !important;
    border-radius: 2.6vh !important;
    background: rgba(255,255,255,.74) !important;
    color: #667085 !important;
    text-align: center !important;
    font-weight: 800 !important;
  }

  .mobile-vault-item {
    width: 100% !important;
    border: 1px solid rgba(203,216,242,.82) !important;
    border-radius: 2.5vh !important;
    padding: 1.3vh 3.2vw !important;

    background: linear-gradient(180deg, #ffffff, #f6f9ff) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.98),
      0 .8vh 1.8vh rgba(16,24,40,.065) !important;

    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 2vw !important;
    align-items: center !important;
  }

  .mobile-vault-item__title {
    color: #101828 !important;
    font-size: clamp(14px, 3.8vw, 18px) !important;
    font-weight: 950 !important;
    letter-spacing: -.045em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .mobile-vault-item__meta {
    margin-top: .45vh !important;
    color: #667085 !important;
    font-size: clamp(8px, 2.1vw, 11px) !important;
    font-weight: 850 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
  }

  .mobile-vault-item__actions {
    display: flex !important;
    gap: 1.1vw !important;
  }

  .mobile-vault-item__actions button,
  .mobile-user-action {
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #4c79ff, #2457f5) !important;
    color: #fff !important;
    font-size: clamp(10px, 2.6vw, 13px) !important;
    font-weight: 950 !important;
    padding: 1vh 3vw !important;
  }

  .mobile-vault-item__actions button[data-vault-remove] {
    background: #ffffff !important;
    color: #101828 !important;
    border: 1px solid rgba(203,216,242,.85) !important;
  }

  .mobile-user-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2vw !important;
    margin: 2vh 0 !important;
  }

  .mobile-user-stats div {
    border-radius: 2.5vh !important;
    padding: 1.6vh 2vw !important;
    background: rgba(255,255,255,.78) !important;
    border: 1px solid rgba(203,216,242,.72) !important;
    text-align: center !important;
  }

  .mobile-user-stats strong {
    display: block !important;
    color: #2457f5 !important;
    font-size: clamp(26px, 7vw, 38px) !important;
    line-height: .9 !important;
    font-weight: 950 !important;
  }

  .mobile-user-stats span {
    display: block !important;
    margin-top: .7vh !important;
    color: #667085 !important;
    font-size: clamp(9px, 2.4vw, 12px) !important;
    font-weight: 850 !important;
    text-transform: uppercase !important;
  }

  .mobile-user-action {
    width: 100% !important;
    height: 5.8vh !important;
    margin-top: .8vh !important;
    background: linear-gradient(180deg, #111827, #05070d) !important;
  }

  body.mobile-sheet-open {
    overflow: hidden !important;
  }
}



@media (max-width: 767px) {

  body:not(.mobile-build-open) #mobileBuildOptions,
  body:not(.mobile-build-open) #landingFooterStrip {
    display: none !important;
  }

  body.mobile-build-open .idea-form,
  body.mobile-build-open #mobileBuildScreen,
  body.mobile-build-open #buildScreen,
  body.mobile-build-open .workflow-step,
  body.mobile-build-open #landingJourneySection,
  body.mobile-build-open .mobile-confidence-indicator,
  body.mobile-build-open .hero-report-layer,
  body.mobile-build-open .hero-poster-layer,
  body.mobile-build-open .hero-processing-layer {
    display: none !important;
  }

  body.mobile-build-open #landingReportPreview {
    display: contents !important;
  }

  body.mobile-build-open .hero-visual,
  body.mobile-build-open .hero-visual.hero-visual--active {
    display: none !important;
  }

  body.mobile-build-open .main-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.45vh !important;
  }

  body.mobile-build-open #mobileBuildOptions {
    display: grid !important;
    width: 95vw !important;
    height: 7.2vh !important;
    flex: 0 0 7.2vh !important;
    margin: 0 auto .8vh !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3vw !important;
  }

  .mobile-build-pill {
    border: 1px solid rgba(203,216,242,.85) !important;
    border-radius: 2.8vh !important;
    background: linear-gradient(180deg, #ffffff, #f8fbff) !important;
    color: #2457f5 !important;
    font-size: clamp(10px, 2.7vw, 14px) !important;
    font-weight: 950 !important;
    letter-spacing: .02em !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.98),
                0 .8vh 2vh rgba(16,24,40,.05) !important;
  }

  .mobile-build-pill.is-active {
    background: linear-gradient(180deg, #4c79ff, #2457f5) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 1.1vh 2.6vh rgba(36,87,245,.22) !important;
  }

  body.mobile-build-open .morph-showcase {
    width: 95vw !important;
    height: 42vh !important;
    flex: 0 0 42vh !important;
    margin: 0 auto 1.6vh !important;
  }

  body.mobile-build-open .morph-showcase__stage {
    width: 100% !important;
    height: 100% !important;
    border-radius: 3.8vh !important;
    background:
      radial-gradient(circle at 50% 42%, rgba(255,255,255,.98), rgba(244,248,255,.96) 58%, rgba(235,242,255,.96) 100%) !important;
    border: 1px solid rgba(203,216,242,.9) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.98),
                inset 0 -2vh 5vh rgba(36,87,245,.045),
                0 1.4vh 3.6vh rgba(16,24,40,.07) !important;
  }

  body.mobile-build-open #landingFooterStrip {
    display: flex !important;
    width: 95vw !important;
    height: 8.6vh !important;
    flex: 0 0 8.6vh !important;
    margin: 0 auto 1.6vh !important;
    padding: 0 !important;
    transform: none !important;
  }

  .mobile-build-intro {
    width: 100% !important;
    height: 100% !important;
    border: 1.5px solid #2457f5 !important;
    border-radius: 2.6vh !important;
    background: rgba(255,255,255,.94) !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 4vw !important;
    padding: 0 4.2vw !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.98),
                0 1vh 2.4vh rgba(36,87,245,.08) !important;
  }

  .mobile-build-intro__label {
    color: #2457f5 !important;
    font-size: clamp(38px, 12vw, 60px) !important;
    font-weight: 250 !important;
    letter-spacing: .18em !important;
    line-height: 1 !important;
    font-family: "Posterama", system-ui, sans-serif !important;
  }

  .mobile-build-intro__text {
    color: #101828 !important;
    font-size: clamp(10px, 2.6vw, 13px) !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
    text-align: left !important;
  }

  .mobile-build-intro__arrow {
    color: #2457f5 !important;
    font-size: clamp(34px, 9vw, 48px) !important;
    line-height: 1 !important;
  }

  body.mobile-build-open:not(.mobile-build-tabs-open) #ideaTabsRail {
    display: none !important;
  }

  body.mobile-build-open.mobile-build-tabs-open #landingFooterStrip {
    display: none !important;
  }

  body.mobile-build-open.mobile-build-tabs-open #ideaTabsRail {
    display: block !important;
    width: 95vw !important;
    height: 8.6vh !important;
    flex: 0 0 8.6vh !important;
    margin: 0 auto 1.6vh !important;
    animation: buildTabsReveal .34s ease both !important;
  }

  body.mobile-build-open .sidebar {
    display: block !important;
    width: 95vw !important;
    height: 12.5vh !important;
    flex: 0 0 12.5vh !important;
    margin: 0 auto !important;
  }

  @keyframes buildTabsReveal {
    from { opacity: 0; transform: translateY(1vh) scale(.96); filter: blur(4px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  }
}




@media (max-width: 767px) {

  body.mobile-build-open .topbar-wrap {
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: block !important;
  }

  body.mobile-build-open .idea-form,
  body.mobile-build-open #landingReportPreview,
  body.mobile-build-open .hero-report-layer,
  body.mobile-build-open .hero-visual,
  body.mobile-build-open .hero-poster-layer,
  body.mobile-build-open .hero-processing-layer,
  body.mobile-build-open .mobile-confidence-indicator {
    display: none !important;
  }

  body.mobile-build-open .mobile-build-options {
    display: grid !important;
    order: 2 !important;
  }

  body.mobile-build-open .morph-showcase {
    display: block !important;
    order: 3 !important;
  }

  body.mobile-build-open .mobile-build-screen {
    display: grid !important;
  }

  body.mobile-build-open .sidebar {
    order: 20 !important;
    margin-top: auto !important;
    transform: none !important;
  }

  body.mobile-build-open .sidebar-step[data-step="1"] {
    border-color: rgba(203,216,242,.68) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.98),
                0 .9vh 2.2vh rgba(16,24,40,.052) !important;
  }

  body.mobile-build-open .sidebar-step[data-step="2"] {
    border: 1.5px solid rgba(36,87,245,.82) !important;
    box-shadow: 0 0 0 3px rgba(36,87,245,.07),
                0 1.2vh 2.7vh rgba(36,87,245,.13),
                inset 0 1px 0 rgba(255,255,255,.98) !important;
  }
}



@media (max-width: 767px) {

  body.mobile-build-open #buildScreen,
  body.mobile-build-open .workflow-step,
  body.mobile-build-open .step-header,
  body.mobile-build-open .mission-layout,
  body.mobile-build-open .build-options,
  body.mobile-build-open .build-summary-panel,
  body.mobile-build-open #landingJourneySection,
  body.mobile-build-open #landingFooterStrip,
  body.mobile-build-open #landingReportPreview,
  body.mobile-build-open #reportDashboard,
  body.mobile-build-open .mobile-confidence-indicator {
    display: none !important;
  }

  body.mobile-build-open .topbar-wrap {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  body.mobile-build-open .mobile-build-options {
    display: grid !important;
    width: 95vw !important;
    height: 8vh !important;
    margin: 0 auto 1.4vh !important;
    flex: 0 0 8vh !important;
  }

  body.mobile-build-open .morph-showcase {
    display: block !important;
    width: 95vw !important;
    height: 32.5vh !important;
    flex: 0 0 32.5vh !important;
    margin: 0 auto !important;
  }

  body.mobile-build-open .mobile-build-screen {
    display: grid !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 999 !important;
  }

  body.mobile-build-open .mobile-build-card {
    padding: 2vh 5vw !important;
  }

  body.mobile-build-open .mobile-build-card h2 {
    font-size: clamp(22px, 6vw, 32px) !important;
    line-height: 1 !important;
  }

  body.mobile-build-open .mobile-build-card p {
    font-size: clamp(12px, 3.2vw, 16px) !important;
    line-height: 1.35 !important;
  }

  body.mobile-build-open .sidebar {
    display: block !important;
    margin-top: auto !important;
  }
}

@media (max-width: 767px) {

  /* hide BUILD text on AUDIT */
  body:not(.mobile-build-open) #landingFooterStrip {
    display: none !important;
  }

  /* BUILD mode top buttons */
  body.mobile-build-open .idea-form {
    display: none !important;
  }

  body.mobile-build-open #mobileBuildOptions {
    display: grid !important;
    width: 95vw !important;
    height: 7.2vh !important;
    flex: 0 0 7.2vh !important;
    margin: 0 auto 1.2vh !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2.5vw !important;
  }

  /* no build content on morph screen for now */
  body.mobile-build-open #mobileBuildScreen {
    display: none !important;
  }

  /* morph screen stays under top options */
  body.mobile-build-open .morph-showcase {
    width: 95vw !important;
    height: 32.5vh !important;
    flex: 0 0 32.5vh !important;
    margin: 0 auto 1.2vh !important;
  }

  /* hide normal 3 cards in build mode */
  body.mobile-build-open #landingJourneySection {
    display: none !important;
  }

  /* BUILD text card lives where idea tabs normally live */
  body.mobile-build-open #landingFooterStrip {
    display: flex !important;
    width: 95vw !important;
    height: 7.2vh !important;
    flex: 0 0 7.2vh !important;
    margin: 0 auto 1.2vh !important;
    padding: 0 !important;
    transform: none !important;
  }

  /* hide idea tabs until clicking BUILD text */
  body.mobile-build-open:not(.mobile-build-tabs-open) #ideaTabsRail {
    display: none !important;
  }

  body.mobile-build-open.mobile-build-tabs-open #landingFooterStrip {
    display: none !important;
  }

  body.mobile-build-open.mobile-build-tabs-open #ideaTabsRail {
    display: block !important;
    width: 95vw !important;
    height: 8.8vh !important;
    flex: 0 0 8.8vh !important;
    margin: 0 auto 1.2vh !important;
    animation: buildTabsReveal .34s ease both !important;
  }

  .mobile-build-intro {
    width: 100% !important;
    height: 100% !important;
    border: 1px solid rgba(36,87,245,.8) !important;
    border-radius: 2.2vh !important;
    background: rgba(255,255,255,.92) !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 3vw !important;
    padding: 0 4vw !important;
  }

  .mobile-build-intro__label {
    color: #2457f5 !important;
    font-size: clamp(24px, 7vw, 36px) !important;
    font-weight: 300 !important;
    letter-spacing: .18em !important;
  }

  .mobile-build-intro__text {
    color: #101828 !important;
    font-size: clamp(8px, 2.1vw, 11px) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    text-align: left !important;
  }

  .mobile-build-intro__arrow {
    color: #2457f5 !important;
    font-size: clamp(25px, 7vw, 38px) !important;
  }

  @keyframes buildTabsReveal {
    from {
      opacity: 0;
      transform: translateY(1vh) scale(.96);
      filter: blur(4px);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }
  }
}


@media (max-width: 767px) {

  body.mobile-build-open #landingReportPreview {
    display: contents !important;
  }

  body.mobile-build-open #landingFooterStrip {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 95vw !important;
    height: 7.2vh !important;
    flex: 0 0 7.2vh !important;

    margin: 0 auto 1.2vh !important;
    padding: 0 !important;

    transform: none !important;
    z-index: 30 !important;
  }

  body.mobile-build-open:not(.mobile-build-tabs-open) #mobileBuildIntro {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.mobile-build-open.mobile-build-tabs-open #mobileBuildIntro,
  body.mobile-build-open.mobile-build-tabs-open #landingFooterStrip {
    display: none !important;
  }
}



/* =========================================================
   FINAL FIX: BUILD STRIP MUST SIT IN TAB SLOT
   top icons -> build options -> morph screen -> BUILD strip/tabs -> bottom cards
   ========================================================= */

@media (max-width: 767px) {

  body.mobile-build-open .landing-hero {
    order: 1 !important;
  }

  body.mobile-build-open #mobileBuildOptions {
    order: 2 !important;
    display: grid !important;
    width: 95vw !important;
    height: 7.2vh !important;
    flex: 0 0 7.2vh !important;
    margin: 0 auto 1.2vh !important;
  }

  body.mobile-build-open .morph-showcase {
    order: 3 !important;
    display: block !important;
    width: 95vw !important;
    height: 60vh !important;
    flex: 0 0 60vh !important;
    margin: 0 auto 1.4vh !important;
  }

  body.mobile-build-open #landingReportPreview {
    order: 4 !important;
    display: contents !important;
  }

  body.mobile-build-open #landingFooterStrip {
    order: 4 !important;
    display: flex !important;
    width: 95vw !important;
    height: 8.4vh !important;
    flex: 0 0 8.4vh !important;
    margin: 0 auto 1.4vh !important;
    padding: 0 !important;
    transform: none !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    z-index: 30 !important;
  }

  body.mobile-build-open .sidebar {
    order: 20 !important;
    width: 95vw !important;
    height: 12.5vh !important;
    flex: 0 0 12.5vh !important;
    margin: 0 auto !important;
  }

  body.mobile-build-open #landingJourneySection,
  body.mobile-build-open #landingInsightsBand,
  body.mobile-build-open #landingCategoryCardsSection,
  body.mobile-build-open .idea-form,
  body.mobile-build-open #mobileBuildScreen,
  body.mobile-build-open .mobile-build-screen,
  body.mobile-build-open .hero-visual,
  body.mobile-build-open .hero-report-layer,
  body.mobile-build-open .hero-processing-layer,
  body.mobile-build-open .hero-poster-layer,
  body.mobile-build-open .mobile-confidence-indicator {
    display: none !important;
  }

  body.mobile-build-open:not(.mobile-build-tabs-open) #ideaTabsRail {
    display: none !important;
  }

  body.mobile-build-open.mobile-build-tabs-open #landingFooterStrip {
    display: none !important;
  }

  body.mobile-build-open.mobile-build-tabs-open #ideaTabsRail {
    order: 4 !important;
    display: block !important;
    width: 95vw !important;
    height: 8.4vh !important;
    flex: 0 0 8.4vh !important;
    margin: 0 0 4vh !important;
    animation: buildTabsReveal .34s ease both !important;
  }
}

/* =========================================================
   FINAL BUILD LAYOUT FIX — morph screen fills available space
   ========================================================= */

@media (max-width: 767px) {

  body.mobile-build-open .morph-showcase {
    width: 95vw !important;

    height: 56vh !important;
    min-height: 56vh !important;
    max-height: 56vh !important;

    flex: 0 0 56vh !important;

    margin: 0 auto !important;

    display: flex !important;
    flex-direction: column !important;
  }

  body.mobile-build-open .morph-showcase__stage {

    position: relative !important; /* NOT absolute */

    width: 100% !important;
    height: 100% !important;

    min-height: 100% !important;
    max-height: none !important;

    flex: 1 1 auto !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
  }

  body.mobile-build-open #mobileBuildScreen {

    position: relative !important; /* NOT absolute */

    width: 100% !important;
    height: 100% !important;

    flex: 1 1 auto !important;

    display: flex !important;
    flex-direction: column !important;
  }

  body.mobile-build-open .mobile-build-card {

    width: 100% !important;
    height: 100% !important;

    flex: 1 1 auto !important;

    display: flex !important;
    flex-direction: column !important;
  }
}



@media (max-width: 767px) {

  body.mobile-build-open #landingScreen > .morph-showcase {
    height: 50vh !important;
    min-height: 50vh !important;
    max-height: 50vh !important;
    flex: 0 0 50vh !important;
  }

  body.mobile-build-open #landingScreen > .morph-showcase > .morph-showcase__stage {
    height: 46vh !important;
    min-height: 46vh !important;
    max-height: 46vh !important;
  }

  body.mobile-build-open #mobileBuildScreen,
  body.mobile-build-open .mobile-build-card {
    height: 100% !important;
    min-height: 100% !important;
  }
}



/* =========================================================
   FINAL FONT SYSTEM + MORPH SCORE TEXT SIZE
   Put at VERY BOTTOM of idea-to-business-phone.css
   ========================================================= */

@media (max-width: 767px) {

  /* Everything readable by default */
  body,
  p,
  div,
  span,
  small,
  strong,
  h1, h2, h3, h4,
  .hero-report-summary-big,
  #heroReportSummary,
  .mobile-data-card__text,
  .confidence-copy {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  }

  /* Anything clickable / interactive = Posterama */
  button,
  a,
  [role="button"],
  .hero-report-metric,
  .hero-report-metric *,
  .mobile-report-simple__nav button,
  #mobileReportActions button,
  .idea-mini-tab,
  .sidebar-step,
  #submitIdeaButton,
  #submitIdeaButton *,
  .vault-btn,
  .user-menu-btn,
  .brand-link {
    font-family: "Posterama Light", "Posterama", Inter, sans-serif !important;
  }

  /* Bigger text inside morph score explanation box */
  body.report-open #heroReportSummary,
  body.report-open .hero-report-summary-big {
    font-size: clamp(12px, 3.25vw, 16px) !important;
    line-height: 1.42 !important;
    font-weight: 500 !important;
  }

  /* Bigger metric category buttons */
  body.report-open .hero-report-metric span {
    font-size: clamp(7px, 2.25vw, 10px) !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
  }

  body.report-open .hero-report-metric strong {
    font-size: clamp(8px, 2.45vw, 11px) !important;
    line-height: 1 !important;
    font-weight: 800 !important;
  }

  /* Keep selected metric readable */
  body.report-open .hero-report-metric.is-selected span,
  body.report-open .hero-report-metric.is-selected strong {
    color: #ffffff !important;
  }
}



/* =========================================================
   MOBILE REPORT CARD DOT NAV — APPLE GLASS STYLE
   ========================================================= */

@media (max-width: 767px) {

  body.report-open .mobile-data-card {
    grid-template-rows: 1fr auto !important;
    padding-bottom: 1.2vh !important;
  }

  body.report-open .mobile-card-dot-nav {
    position: absolute !important;
    left: 50% !important;
    bottom: 1.05vh !important;
    transform: translateX(-50%) !important;

    z-index: 20 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1.4vw !important;

    padding: .55vh 1.8vw !important;

    border-radius: 999px !important;
    background: rgba(255,255,255,.42) !important;
    border: 1px solid rgba(255,255,255,.62) !important;

    backdrop-filter: blur(18px) saturate(1.35) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.35) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.78),
      0 .8vh 2vh rgba(16,24,40,.14) !important;
  }

  body.report-open .mobile-card-dot {
    width: clamp(24px, 7vw, 34px) !important;
    height: clamp(24px, 7vw, 34px) !important;

    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.72) !important;

    background:
      linear-gradient(180deg, rgba(255,255,255,.92), rgba(241,246,255,.72)) !important;

    color: #2457f5 !important;

    display: grid !important;
    place-items: center !important;

    font-family: "Posterama", system-ui, -apple-system, sans-serif !important;
    font-size: clamp(10px, 2.8vw, 14px) !important;
    font-weight: 950 !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9),
      0 .45vh 1.1vh rgba(16,24,40,.10) !important;

    transition:
      transform .22s ease,
      background .22s ease,
      color .22s ease,
      box-shadow .22s ease,
      opacity .22s ease !important;

    opacity: .78 !important;
  }

  body.report-open .mobile-card-dot.is-active {
    transform: scale(1.16) translateY(-.15vh) !important;

    color: #ffffff !important;
    background:
      radial-gradient(circle at 35% 20%, rgba(255,255,255,.34), transparent 34%),
      linear-gradient(180deg, #4c79ff, #2457f5) !important;

    border-color: rgba(36,87,245,.42) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.32),
      0 .8vh 1.8vh rgba(36,87,245,.34),
      0 0 0 3px rgba(36,87,245,.14) !important;

    opacity: 1 !important;
  }

  body.report-open .mobile-card-dot:active {
    transform: scale(.94) !important;
  }

  body.report-open .mobile-card-dot span {
    line-height: 1 !important;
    transform: translateY(.05vh) !important;
  }

  body.report-open .mobile-data-card__hint {
    display: none !important;
  }
}


/* =========================================================
   MOBILE REPORT CATEGORY ICON DOCK — APPLE STYLE
   ========================================================= */

@media (max-width: 767px) {

  body.report-open .mobile-data-card {
    padding-bottom: 6.4vh !important;
  }

  body.report-open .mobile-category-dock {
    position: absolute !important;
    left: 50% !important;
    bottom: 1vh !important;
    transform: translateX(-50%) !important;

    width: min(84vw, 340px) !important;
    height: 5.2vh !important;

    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 1.4vw !important;

    padding: .55vh 1.5vw !important;

    border-radius: 999px !important;
    background: rgba(255,255,255,.42) !important;
    border: 1px solid rgba(255,255,255,.66) !important;

    backdrop-filter: blur(20px) saturate(1.35) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.35) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.82),
      0 .9vh 2.2vh rgba(16,24,40,.16) !important;

    z-index: 80 !important;
  }

  body.report-open .mobile-category-pill {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;

    padding: 0 !important;
    margin: 0 !important;

    display: grid !important;
    place-items: center !important;

    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.72) !important;

    background:
      linear-gradient(180deg, rgba(255,255,255,.94), rgba(239,245,255,.76)) !important;

    color: #2457f5 !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.92),
      0 .45vh 1.1vh rgba(16,24,40,.10) !important;

    opacity: .82 !important;

    transition:
      transform .22s ease,
      opacity .22s ease,
      background .22s ease,
      color .22s ease,
      box-shadow .22s ease !important;
  }

  body.report-open .mobile-category-icon {
    display: grid !important;
    place-items: center !important;

    width: 100% !important;
    height: 100% !important;

    font-family: "Posterama", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: clamp(15px, 4.4vw, 22px) !important;
    line-height: 1 !important;
    font-weight: 950 !important;
  }

  body.report-open .mobile-category-pill.is-active {
    transform: scale(1.12) translateY(-.18vh) !important;

    color: #ffffff !important;

    background:
      radial-gradient(circle at 35% 20%, rgba(255,255,255,.34), transparent 34%),
      linear-gradient(180deg, #1b1f2a 0%, #05070d 100%) !important;

    border-color: rgba(0,0,0,.78) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      0 .9vh 1.9vh rgba(0,0,0,.28),
      0 0 0 3px rgba(0,0,0,.10) !important;

    opacity: 1 !important;
  }

  body.report-open .mobile-category-pill:active {
    transform: scale(.94) !important;
  }

  body.report-open .mobile-data-card__hint {
    display: none !important;
  }
}


/* =========================================================
   MOBILE REPORT — DISTANCE-BASED FAST CATEGORY SLIDES
   ========================================================= */

@media (max-width: 767px) {

  body.report-open .mobile-report-simple__stage.is-category-step-left::before,
  body.report-open .mobile-report-simple__stage.is-category-step-left::after,
  body.report-open .mobile-report-simple__stage.is-category-step-right::before,
  body.report-open .mobile-report-simple__stage.is-category-step-right::after {
    content: none !important;
    display: none !important;
  }

  body.report-open .mobile-report-simple__stage.is-category-step-left .mobile-data-card {
    animation: arcanisFastStepLeft 95ms cubic-bezier(.22, 1, .36, 1) both !important;
  }

  body.report-open .mobile-report-simple__stage.is-category-step-right .mobile-data-card {
    animation: arcanisFastStepRight 95ms cubic-bezier(.22, 1, .36, 1) both !important;
  }

  @keyframes arcanisFastStepLeft {
    0% {
      transform: translateX(0) scale(1);
      opacity: 1;
      filter: blur(0);
    }

    50% {
      transform: translateX(-22%) scale(.97);
      opacity: .35;
      filter: blur(.7px);
    }

    51% {
      transform: translateX(22%) scale(.97);
      opacity: .35;
      filter: blur(.7px);
    }

    100% {
      transform: translateX(0) scale(1);
      opacity: 1;
      filter: blur(0);
    }
  }

  @keyframes arcanisFastStepRight {
    0% {
      transform: translateX(0) scale(1);
      opacity: 1;
      filter: blur(0);
    }

    50% {
      transform: translateX(22%) scale(.97);
      opacity: .35;
      filter: blur(.7px);
    }

    51% {
      transform: translateX(-22%) scale(.97);
      opacity: .35;
      filter: blur(.7px);
    }

    100% {
      transform: translateX(0) scale(1);
      opacity: 1;
      filter: blur(0);
    }
  }
}


/* =========================================================
   MOBILE REPORT — VERTICAL CARD SWIPE LOOP
   ========================================================= */

@media (max-width: 767px) {

  body.report-open .mobile-report-simple__stage.is-card-swipe-up::before,
  body.report-open .mobile-report-simple__stage.is-card-swipe-up::after,
  body.report-open .mobile-report-simple__stage.is-card-swipe-down::before,
  body.report-open .mobile-report-simple__stage.is-card-swipe-down::after {
    content: none !important;
    display: none !important;
  }

  body.report-open .mobile-report-simple__stage.is-card-swipe-up .mobile-data-card {
    animation: mobileCardSwipeUp .38s cubic-bezier(.22, 1, .36, 1) both !important;
  }

  body.report-open .mobile-report-simple__stage.is-card-swipe-down .mobile-data-card {
    animation: mobileCardSwipeDown .38s cubic-bezier(.22, 1, .36, 1) both !important;
  }

  @keyframes mobileCardSwipeUp {
    0% {
      transform: translateY(0) scale(1);
      opacity: 1;
      filter: blur(0);
    }

    45% {
      transform: translateY(-18%) scale(.97);
      opacity: .42;
      filter: blur(.8px);
    }

    46% {
      transform: translateY(18%) scale(.97);
      opacity: .42;
      filter: blur(.8px);
    }

    100% {
      transform: translateY(0) scale(1);
      opacity: 1;
      filter: blur(0);
    }
  }

  @keyframes mobileCardSwipeDown {
    0% {
      transform: translateY(0) scale(1);
      opacity: 1;
      filter: blur(0);
    }

    45% {
      transform: translateY(18%) scale(.97);
      opacity: .42;
      filter: blur(.8px);
    }

    46% {
      transform: translateY(-18%) scale(.97);
      opacity: .42;
      filter: blur(.8px);
    }

    100% {
      transform: translateY(0) scale(1);
      opacity: 1;
      filter: blur(0);
    }
  }

  body.report-open .mobile-report-simple__stage,
  body.report-open .mobile-data-card {
    touch-action: none !important;
  }
}