:root{
  --bg:#f4f6fb;
  --bg-2:#eef2f8;
  --surface:#ffffff;
  --surface-2:#fbfcff;
  --surface-3:#f7f9fd;
  --text:#101828;
  --text-soft:#344054;
  --muted:#667085;
  --line:#e7ecf3;
  --line-strong:#d8e0eb;
  --blue:#2457f5;
  --blue-2:#2f63ff;
  --blue-3:#6f97ff;
  --blue-soft:#edf3ff;
  --green:#17b26a;
  --orange:#f79009;
  --danger:#ef4444;
  --shadow-xs:0 2px 8px rgba(16,24,40,.04);
  --shadow-sm:0 8px 24px rgba(16,24,40,.06);
  --shadow-md:0 16px 40px rgba(16,24,40,.08);
  --shadow-lg:0 24px 80px rgba(16,24,40,.12);
  --shadow-blue:0 18px 48px rgba(36,87,245,.22);
  --radius-xs:12px;
  --radius-sm:16px;
  --radius-md:22px;
  --radius-lg:28px;
  --radius-xl:34px;
  --max-width:1440px;
  --sidebar-width:230px;
  --topbar-height:82px;
  --ease:cubic-bezier(.22,.61,.36,1);
--idea-tabs-gap: 24px;


  --audit-blue-1: #4c79ff;
  --audit-blue-2: #2457f5;
  --audit-blue-3: #1f49d9;

  --audit-black-1: #171a20;
  --audit-black-2: #0f1116;
  --audit-black-3: #07090d;



--layout-total-width: calc(var(--max-width) + var(--idea-tabs-width) + var(--idea-tabs-gap));

  --idea-tabs-overhang: calc(var(--idea-tabs-width) + 24px);
  --idea-tabs-center-shift: calc(var(--idea-tabs-overhang) / -2);

  --idea-tabs-width: 230px;
  --idea-tabs-gap: 24px;
  --idea-tabs-overhang: calc(var(--idea-tabs-width) + var(--idea-tabs-gap));
  --idea-tabs-center-shift: calc(var(--idea-tabs-overhang) / -2);
  --idea-tabs-anim-time: 2s;
  --report-scale: 1.25; /* 35% bigger */
  
  
}



*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

html,
body{
  min-height:100%;
  overflow: hidden;
}

body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(47,99,255,.08), transparent 22%),
    radial-gradient(circle at 100% 25%, rgba(47,99,255,.06), transparent 16%),
    linear-gradient(180deg, #f8faff 0%, #f3f6fb 48%, #eff3f8 100%);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,
svg,
canvas{
  display:block;
  max-width:100%;
}

button,
input,
textarea{
  font:inherit;
}

button{
  cursor:pointer;
}

a{
  color:inherit;
  text-decoration:none;
}

::selection{
  background:rgba(36,87,245,.14);
  color:#0f172a;
}


/* OUTER WRAPPER */

/* INNER BAR = SMALLER AND CENTERED */

/* LEFT / CENTER / RIGHT */
.topbar-left{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
    margin-left: 20px; /* adjust: 8–16px depending on taste */
}

.topbar-center{
  display: flex;
  align-items: center;
  justify-content: center;
}

.topbar-right{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}


.topbar-logo{
  display: block;
  height: 65px;
  width: auto;
  object-fit: contain;
}

/* IDEA VAULT */
.vault-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 54px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(92,125,255,0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(240,246,255,0.94));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 4px 14px rgba(88,120,255,0.08);
  color: #2940a8;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.vault-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(76,111,255,0.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 8px 18px rgba(88,120,255,0.11);
}

.vault-icon{
  width: 70px;
  height: 70px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}




/* USER */
.user-menu-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 54px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(92,125,255,0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(243,248,255,0.92));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 4px 14px rgba(88,120,255,0.07);
  color: #263a97;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.user-menu-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(76,111,255,0.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 8px 18px rgba(88,120,255,0.11);
}

.user-icon{
  width: 62px;
  height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}






.vault-icon img,
.user-icon img{
  height: 65px;       /* match visual weight of logo */
  width: auto;        /* keeps natural proportions */
  object-fit: contain;
}

.vault-btn,
.user-menu-btn{
  background: transparent;   /* removes bubble */
  border: none;              /* removes outline */
  box-shadow: none;          /* removes glow if any */
  padding: 0;
}



/* responsive */
@media (max-width: 900px){

  .topbar-logo{
    height: 38px;
  }



  .vault-btn,
  .user-menu-btn{
    padding-left: 12px;
    padding-right: 12px;
  }
}

.app-layout{
  position: relative;
  width: min(var(--layout-total-width), calc(100% - 48px));
  max-width: var(--layout-total-width);
  margin: 0 auto;
  padding: 26px 26px 34px;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0,1fr);
  gap: 24px;

  height: calc(100vh - var(--topbar-height) - 16px) !important;
  min-height: 0 !important;
  align-items: stretch !important;
 /*   transform: translateX(var(--idea-tabs-center-shift)) !important; */
}



.screen{
  display:none;
  min-height:calc(100vh - 134px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(251,252,255,.88));
  border:1px solid rgba(231,236,243,.95);
  border-radius:34px;
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0 rgba(255,255,255,.85);
  overflow:hidden;
  position:relative;
    padding-bottom: 24px; /* or 32px */
}

.screen::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 0% 0%, rgba(36,87,245,.05), transparent 22%),
    radial-gradient(circle at 100% 18%, rgba(36,87,245,.035), transparent 18%);
  pointer-events:none;
}

.screen.is-active{
  display:block;
  animation:screenFade .5s var(--ease);
}








.idea-form__field::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top left, rgba(36,87,245,.05), transparent 22%),
    linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  pointer-events:none;
}

.idea-form__field:focus-within{
  transform:translateY(-2px);
  border-color:rgba(36,87,245,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 30px 60px rgba(36,87,245,.10),
    0 0 0 6px rgba(36,87,245,.05);
}

.idea-form input{
  min-width:0;
  min-height:124px;
  padding:0 30px;
  border:0;
  outline:none;
  background:transparent;
  color:var(--text);
  font-size:24px;
  font-weight:500;
  letter-spacing:-.03em;
}

.idea-form input::placeholder{
  color:#98a2b3;
  font-size:24px;
  font-weight:500;
}





.form-error{
  margin:10px 4px 0;
  font-size:13px;
  font-weight:700;
  color:var(--danger);
}

.button{
  min-height:54px;
  border-radius:16px;
  border:0;
  padding:0 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:15px;
  font-weight:800;
  letter-spacing:-.02em;
  transition:
    transform .24s var(--ease),
    box-shadow .24s var(--ease),
    background .24s var(--ease),
    border-color .24s var(--ease),
    color .24s var(--ease),
    opacity .24s var(--ease);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.button::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform:translateX(-120%);
  transition:transform .7s var(--ease);
  z-index:0;
}

.button span{
  position:relative;
  z-index:1;
}

.button:hover::before{
  transform:translateX(120%);
}

.button:hover{
  transform:translateY(-2px);
}

.button:active{
  transform:translateY(0);
}

.button--primary{
  color:#fff;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(180deg, var(--blue-2) 0%, #2457f5 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 18px 34px rgba(36,87,245,.24);
}

.button--primary:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 24px 44px rgba(36,87,245,.28);
}

.button--secondary{
  min-height:42px;
  padding:0 14px;
  border-radius:10px;
  color:#fff;
  background:linear-gradient(180deg, #16a34a, #13803a);
  box-shadow:0 14px 28px rgba(22,163,74,.2);
  font-size:13px;
}

.button--secondary:hover{
  box-shadow:0 18px 34px rgba(22,163,74,.24);
}

.button--ghost{
  color:var(--text-soft);
  background:rgba(255,255,255,.88);
  border:1px solid rgba(216,224,235,.95);
  box-shadow:var(--shadow-xs);
}

.button--ghost:hover{
  background:#fff;
  border-color:rgba(36,87,245,.12);
  box-shadow:0 16px 30px rgba(16,24,40,.06);
}

.button-link{
  border:0;
  background:transparent;
  color:var(--blue);
  font-size:14px;
  font-weight:800;
  letter-spacing:-.01em;
  transition:opacity .22s ease, transform .22s ease;
  padding:4px 2px;
}

.button-link:hover{
  opacity:.78;
  transform:translateY(-1px);
}



.landing-divider{
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(216,224,235,.95), transparent);
  margin:20px 0 30px;
}












.workflow-step{
  display:none;
}

.workflow-step.workflow-step--active{
  display:block;
  animation:screenFade .42s var(--ease);
}

.build-screen,
.launch-screen{
  padding:0;
}

.build-options{
  display:grid;
  gap:18px;
}

.build-option{
  border:1px solid rgba(216,224,235,.92);
  border-radius:8px;
  background:rgba(255,255,255,.9);
  box-shadow:0 18px 45px rgba(16,24,40,.08);
  overflow:hidden;
  transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease, background .22s ease;
}

.build-option.is-active{
  border-color:rgba(36,87,245,.58);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,249,255,.96));
  box-shadow:0 24px 65px rgba(36,87,245,.16);
}

.build-option__trigger{
  width:100%;
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 20px;
  border:0;
  background:transparent;
  color:var(--text);
  font:inherit;
  font-weight:900;
  letter-spacing:.08em;
  text-align:left;
  cursor:pointer;
}

.build-option__title{
  line-height:1.2;
}

.build-option__radio{
  width:18px;
  height:18px;
  border:2px solid rgba(36,87,245,.45);
  border-radius:999px;
  position:relative;
  flex:0 0 auto;
}

.build-option.is-active .build-option__radio{
  border-color:var(--blue);
}

.build-option.is-active .build-option__radio::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:inherit;
  background:var(--blue);
}

.build-option__panel{
  max-height:0;
  opacity:0;
  overflow:hidden;
  color:var(--text-soft);
  font-size:15px;
  line-height:1.6;
  transition:max-height .32s var(--ease), opacity .22s ease;
}

.build-option.is-active .build-option__panel{
  max-height:220px;
  opacity:1;
}

.build-option__panel-inner{
  padding:0 20px 22px 52px;
}

.build-option__panel p{
  max-width:680px;
  margin:0 0 18px;
}

.build-option__action{
  border:0;
  border-radius:8px;
  background:var(--blue);
  color:#fff;
  padding:12px 16px;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 12px 26px rgba(36,87,245,.2);
}

.build-summary-panel{
  min-height:260px;
  padding:28px;
  border:1px solid rgba(216,224,235,.92);
  border-radius:8px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,249,255,.94));
  box-shadow:0 18px 45px rgba(16,24,40,.08);
}

.build-summary-panel span{
  display:block;
  margin-bottom:16px;
  color:var(--blue);
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
}

.build-summary-panel h3{
  margin:0 0 12px;
  color:var(--text);
  font-size:28px;
  line-height:1.12;
}

.build-summary-panel p{
  margin:0;
  color:var(--text-soft);
  line-height:1.6;
}

.launch-card-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  max-width:1000px;
  margin:0 auto;
}

.launch-card{
  min-height:240px;
  padding:24px;
  border:1px solid rgba(216,224,235,.92);
  border-radius:8px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,249,255,.94));
  box-shadow:0 18px 45px rgba(16,24,40,.08);
}

.launch-card span{
  display:block;
  margin-bottom:18px;
  color:var(--blue);
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
}

.launch-card h3{
  margin:0 0 12px;
  color:var(--text);
  font-size:24px;
  line-height:1.15;
}

.launch-card p{
  margin:0;
  color:var(--text-soft);
  line-height:1.6;
}

.step-header{
  margin-bottom:24px;
}

.step-header__meta{
  margin-bottom:10px;
  color:var(--blue);
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.step-header h1{
  margin:0 0 10px;
  font-size:48px;
  line-height:1.02;
  letter-spacing:-.055em;
  max-width:760px;
}

.step-header p{
  margin:0;
  font-size:17px;
  color:var(--muted);
  line-height:1.55;
}

.mission-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}

.mission-primary,
.mission-evidence,
.mission-actions,
.expandable-detail{
  position:relative;
}

.mission-primary{
  padding:2px 0 0;
}

.mission-primary__metric-label{
  margin-bottom:12px;
  font-size:14px;
  font-weight:800;
  color:var(--muted);
  letter-spacing:-.01em;
}

.score-ring-block{
  display:flex;
  align-items:center;
  gap:34px;
  flex-wrap:wrap;
  margin-bottom:26px;
}

.score-ring{
  width:190px;
  height:190px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:
    radial-gradient(farthest-side, #fff calc(100% - 12px), transparent calc(100% - 11px)),
    conic-gradient(var(--blue) 0 78%, rgba(36,87,245,.12) 78% 100%);
  box-shadow:
    0 0 0 16px rgba(36,87,245,.05),
    0 18px 44px rgba(36,87,245,.16);
  position:relative;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}

.score-ring:hover{
  transform:translateY(-4px) scale(1.01);
  box-shadow:
    0 0 0 16px rgba(36,87,245,.06),
    0 24px 54px rgba(36,87,245,.18);
}

.score-ring::after{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:50%;
  border:1px solid rgba(36,87,245,.08);
}

.score-ring__value{
  text-align:center;
  position:relative;
  z-index:1;
}

.score-ring__value strong{
  display:block;
  font-size:62px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.06em;
}

.score-ring__value span{
  display:block;
  margin-top:6px;
  font-size:18px;
  color:var(--muted);
  font-weight:700;
}

.score-ring__caption{
  max-width:420px;
}

.score-ring__caption h2{
  margin:0 0 10px;
  font-size:28px;
  line-height:1.08;
  letter-spacing:-.04em;
  color:var(--blue);
}

.score-ring__caption p{
  margin:0;
  font-size:17px;
  color:var(--muted);
  line-height:1.6;
}

.primary-action-block{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

.primary-action-block .button--primary{
  min-width:230px;
}

.mission-evidence{
  padding-top:4px;
}

.evidence-strip{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0;
  border-top:1px solid rgba(216,224,235,.9);
  border-bottom:1px solid rgba(216,224,235,.9);
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.16));
}

.evidence-metric{
  padding:18px 12px 18px 0;
  display:flex;
  flex-direction:column;
  gap:8px;
  position:relative;
}

.evidence-metric:not(:last-child)::after{
  content:"";
  position:absolute;
  top:18px;
  right:0;
  width:1px;
  height:36px;
  background:linear-gradient(180deg, transparent, rgba(216,224,235,.95), transparent);
}

.evidence-metric span{
  font-size:13px;
  font-weight:700;
  color:var(--muted);
}

.evidence-metric strong{
  font-size:20px;
  line-height:1;
  letter-spacing:-.03em;
  font-weight:800;
  color:var(--text);
}

.evidence-metric--warning strong{
  color:var(--orange);
}

.mission-actions{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.mission-action-card{
  padding:20px 20px 18px;
  border-radius:22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.8), rgba(250,252,255,.78));
  border:1px solid rgba(231,236,243,.92);
  box-shadow:var(--shadow-xs);
  transition:
    transform .32s var(--ease),
    box-shadow .32s var(--ease),
    border-color .32s var(--ease),
    background .32s var(--ease);
  position:relative;
  overflow:hidden;
}

.mission-action-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent, rgba(36,87,245,.06), transparent);
  transform:translateX(-120%);
  transition:transform .7s var(--ease);
}

.mission-action-card:hover{
  transform:translateY(-4px);
  border-color:rgba(36,87,245,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(250,252,255,.9));
  box-shadow:0 20px 34px rgba(16,24,40,.07);
}

.mission-action-card:hover::before{
  transform:translateX(120%);
}

.mission-action-card__label{
  display:block;
  margin-bottom:10px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--blue);
}

.mission-action-card h3{
  margin:0 0 8px;
  font-size:20px;
  line-height:1.08;
  letter-spacing:-.03em;
}

.mission-action-card p{
  margin:0;
  font-size:15px;
  line-height:1.6;
  color:var(--muted);
}

.expandable-detail{
  margin-top:4px;
  padding-top:20px;
  border-top:1px solid rgba(216,224,235,.92);
  animation:detailFade .34s var(--ease);
}

.expandable-detail__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.expandable-detail article{
  padding:20px 20px 18px;
  border-radius:22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.74), rgba(251,252,255,.74));
  border:1px solid rgba(231,236,243,.92);
  box-shadow:var(--shadow-xs);
  transition:
    transform .28s var(--ease),
    box-shadow .28s var(--ease);
}

.expandable-detail article:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 28px rgba(16,24,40,.06);
}

.expandable-detail h3{
  margin:0 0 14px;
  font-size:18px;
  line-height:1.08;
  letter-spacing:-.03em;
}

.expandable-detail p,
.expandable-detail li{
  font-size:15px;
  line-height:1.65;
  color:var(--muted);
}

.expandable-detail ul{
  margin:0;
  padding-left:18px;
}

.expandable-detail li + li{
  margin-top:8px;
}

.mission-layout--build{
  gap:22px;
}

.website-direction-preview__frame{
  border-radius:26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(251,252,255,.92));
  border:1px solid rgba(231,236,243,.95);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 20px 40px rgba(16,24,40,.06);
  overflow:hidden;
  transition:
    transform .36s var(--ease),
    box-shadow .36s var(--ease);
}

.website-direction-preview__frame:hover{
  transform:translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 28px 54px rgba(16,24,40,.08);
}

.website-direction-preview__nav{
  min-height:54px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(231,236,243,.9);
  font-size:11px;
  font-weight:800;
  color:#475467;
}

.website-direction-preview__body{
  display:grid;
  grid-template-columns:minmax(0,1fr) 240px;
  gap:18px;
  padding:26px;
  align-items:center;
  min-height:300px;
}

.website-direction-preview__copy h2{
  margin:0 0 14px;
  font-size:46px;
  line-height:1.02;
  letter-spacing:-.055em;
  max-width:340px;
}

.website-direction-preview__copy p{
  margin:0 0 22px;
  max-width:320px;
  color:var(--muted);
  line-height:1.6;
  font-size:15px;
}

.website-direction-preview__visual{
  position:relative;
  min-height:240px;
}

.product-bottle{
  position:absolute;
  right:74px;
  top:28px;
  width:84px;
  height:182px;
  border-radius:999px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.7), transparent 30%),
    linear-gradient(180deg, #fefefe 0%, #d5d8d6 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.03),
    0 24px 34px rgba(16,24,40,.12);
}

.product-bottle::before{
  content:"";
  position:absolute;
  top:-12px;
  left:28px;
  width:28px;
  height:24px;
  border-radius:10px 10px 6px 6px;
  background:linear-gradient(180deg, #111827, #020617);
  box-shadow:0 8px 12px rgba(2,6,23,.16);
}

.product-bottle::after{
  content:"";
  position:absolute;
  top:18px;
  left:21px;
  width:20px;
  height:132px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,.06));
}

.leaf{
  position:absolute;
  border-radius:999px;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.22), transparent 24%),
    linear-gradient(180deg, #4f7e42 0%, #2d5730 100%);
  box-shadow:0 18px 26px rgba(16,24,40,.08);
  animation:leafFloat 6.6s ease-in-out infinite;
}

.leaf--1{
  width:34px;
  height:78px;
  top:20px;
  right:16px;
  transform:rotate(16deg);
}
.leaf--2{
  width:22px;
  height:58px;
  top:82px;
  right:28px;
  transform:rotate(-25deg);
  animation-delay:.6s;
}
.leaf--3{
  width:30px;
  height:72px;
  top:58px;
  right:146px;
  transform:rotate(32deg);
  animation-delay:1.3s;
}
.leaf--4{
  width:20px;
  height:48px;
  top:116px;
  right:136px;
  transform:rotate(-40deg);
  animation-delay:1.8s;
}
.leaf--5{
  width:34px;
  height:76px;
  top:142px;
  right:104px;
  transform:rotate(28deg);
  animation-delay:2.2s;
}

.mission-evidence--stacked{
  display:grid;
}

.recommendation-panel{
  border-radius:26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(251,252,255,.82));
  border:1px solid rgba(231,236,243,.95);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 20px 40px rgba(16,24,40,.06);
  padding:24px;
  transition:
    transform .34s var(--ease),
    box-shadow .34s var(--ease);
}

.recommendation-panel:hover{
  transform:translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 28px 50px rgba(16,24,40,.08);
}

.recommendation-panel__label{
  margin-bottom:10px;
  font-size:12px;
  font-weight:800;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
}

.recommendation-panel h2{
  margin:0 0 16px;
  font-size:30px;
  line-height:1.04;
  letter-spacing:-.04em;
}

.recommendation-list{
  list-style:none;
  margin:0 0 20px;
  padding:0;
  display:grid;
  gap:12px;
}

.recommendation-list li{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--text-soft);
  font-size:15px;
  font-weight:600;
}

.recommendation-list li::before{
  content:"✓";
  width:18px;
  height:18px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:0 0 18px;
  color:var(--green);
  font-size:13px;
  font-weight:800;
  background:rgba(23,178,106,.08);
}

.recommendation-panel__actions{
  display:grid;
  gap:12px;
}

.lead-metric-block{
  margin-bottom:24px;
}

.lead-metric-block__number{
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
}

.lead-metric-block__number strong{
  font-size:88px;
  line-height:.9;
  font-weight:800;
  letter-spacing:-.07em;
}

.lead-metric-block__number span{
  font-size:22px;
  color:var(--muted);
  font-weight:700;
  padding-bottom:10px;
}

.lead-metric-block__lift{
  margin-top:12px;
  color:var(--green);
  font-size:15px;
  font-weight:800;
}

.chart-card{
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(251,252,255,.82));
  border:1px solid rgba(231,236,243,.95);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 18px 38px rgba(16,24,40,.06);
  padding:20px 20px 14px;
  transition:
    transform .34s var(--ease),
    box-shadow .34s var(--ease);
}

.chart-card:hover{
  transform:translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 26px 48px rgba(16,24,40,.08);
}

.chart-card__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.chart-card__header span{
  font-size:14px;
  color:var(--muted);
  font-weight:800;
  letter-spacing:-.01em;
}

.growth-primary-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-bottom:24px;
}

.growth-stat{
  padding:18px 18px 16px;
  border-radius:22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(250,252,255,.78));
  border:1px solid rgba(231,236,243,.92);
  box-shadow:var(--shadow-xs);
  transition:
    transform .3s var(--ease),
    box-shadow .3s var(--ease),
    border-color .3s var(--ease);
}

.growth-stat:hover{
  transform:translateY(-4px);
  border-color:rgba(36,87,245,.12);
  box-shadow:0 20px 34px rgba(16,24,40,.07);
}

.growth-stat span{
  display:block;
  margin-bottom:8px;
  font-size:13px;
  color:var(--muted);
  font-weight:700;
}

.growth-stat strong{
  display:block;
  font-size:40px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.05em;
}

.growth-stat small{
  display:block;
  margin-top:10px;
  font-size:14px;
  color:var(--green);
  font-weight:800;
}


.processing-overlay__backdrop{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top left, rgba(36,87,245,.18), transparent 30%),
    radial-gradient(circle at 100% 20%, rgba(36,87,245,.14), transparent 24%),
    rgba(10,15,30,.48);
}

.processing-overlay__card{
  position:relative;
  width:min(720px, 100%);
  border-radius:34px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.96));
  box-shadow:
    0 40px 100px rgba(0,0,0,.22),
    0 20px 40px rgba(36,87,245,.12);
  animation:overlayIn .42s var(--ease);
}

.processing-overlay__top{
  padding:30px 32px 10px;
  background:
    radial-gradient(circle at 20% 0%, rgba(36,87,245,.12), transparent 28%),
    radial-gradient(circle at 86% 30%, rgba(36,87,245,.10), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(251,252,255,.86));
}

.processing-overlay__eyebrow{
  margin-bottom:12px;
  font-size:11px;
  color:var(--blue);
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.processing-overlay__top h2{
  margin:0 0 10px;
  font-size:42px;
  line-height:1.02;
  letter-spacing:-.05em;
}

.processing-overlay__top p{
  margin:0;
  max-width:520px;
  color:var(--muted);
  font-size:17px;
  line-height:1.6;
}

.processing-visual{
  padding:8px 32px 0;
  display:flex;
  justify-content:center;
}

.processing-rings{
  position:relative;
  width:180px;
  height:180px;
  display:grid;
  place-items:center;
}

.processing-ring{
  position:absolute;
  border-radius:50%;
}

.processing-ring--outer{
  inset:0;
  border:1px solid rgba(36,87,245,.16);
  animation:spin 8.4s linear infinite;
}

.processing-ring--middle{
  inset:18px;
  border:1px solid rgba(36,87,245,.22);
  animation:spinReverse 5.6s linear infinite;
}

.processing-ring--inner{
  inset:38px;
  border:1px solid rgba(36,87,245,.28);
  animation:softPulse 2.2s ease-in-out infinite;
}

.processing-core{
  width:82px;
  height:82px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:24px;
  font-weight:800;
  letter-spacing:-.03em;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(180deg, var(--blue-2), #2457f5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 20px 40px rgba(36,87,245,.3);
  z-index:1;
}

.processing-progress{
  padding:14px 32px 0;
}

.processing-progress__bar{
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(221,228,239,.75);
  box-shadow:inset 0 1px 2px rgba(16,24,40,.06);
}

.processing-progress__fill{
  width:0;
  height:100%;
  border-radius:999px;
  background:
    linear-gradient(90deg, #2f63ff 0%, #5a86ff 55%, #89aaff 100%);
  box-shadow:0 6px 18px rgba(36,87,245,.2);
  transition:width .45s var(--ease);
}

.processing-steps{
  padding:18px 32px 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 16px;
}

.processing-step{
  min-height:72px;
  padding:14px 16px;
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(250,252,255,.88));
  border:1px solid rgba(231,236,243,.94);
  box-shadow:var(--shadow-xs);
  display:flex;
  align-items:flex-start;
  gap:12px;
  transition:
    transform .28s var(--ease),
    box-shadow .28s var(--ease),
    border-color .28s var(--ease),
    background .28s var(--ease);
}

.processing-step.is-active{
  transform:translateY(-2px);
  border-color:rgba(36,87,245,.18);
  box-shadow:0 18px 28px rgba(36,87,245,.1);
  background:linear-gradient(180deg, #f7faff, #eef4ff);
}

.processing-step.is-done{
  border-color:rgba(23,178,106,.18);
  background:linear-gradient(180deg, #f8fffb, #f1fff7);
}

.processing-step__dot{
  width:12px;
  height:12px;
  border-radius:50%;
  flex:0 0 12px;
  margin-top:3px;
  background:#d0d5dd;
  box-shadow:0 0 0 8px rgba(208,213,221,.18);
  transition:background .28s var(--ease), box-shadow .28s var(--ease);
}

.processing-step.is-active .processing-step__dot{
  background:var(--blue);
  box-shadow:0 0 0 8px rgba(36,87,245,.12);
}

.processing-step.is-done .processing-step__dot{
  background:var(--green);
  box-shadow:0 0 0 8px rgba(23,178,106,.12);
}

.processing-step strong{
  display:block;
  font-size:14px;
  line-height:1.2;
  letter-spacing:-.01em;
}

.processing-step p{
  margin:4px 0 0;
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
}

.processing-log{
  margin:18px 32px 32px;
  min-height:78px;
  padding:18px 18px;
  border-radius:20px;
  background:
    linear-gradient(180deg, #111827, #0b1220);
  color:#d1d5db;
  font-size:14px;
  line-height:1.65;
  letter-spacing:.01em;
  position:relative;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.processing-log::after{
  content:"";
  position:absolute;
  inset:auto -30% 0 -30%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(47,99,255,.95), transparent);
  animation:scanLine 2.2s linear infinite;
}

[hidden]{
  display:none !important;
}

/* RESPONSIVE */
@media (max-width: 1320px){
  .landing-hero{
    grid-template-columns:1fr;
  }

  .landing-hero__visual{
    min-height:480px;
  }

  .hero-orbit{
    width:430px;
    height:430px;
  }


  .journey-steps{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width: 1180px){
  .app-layout{
    grid-template-columns:1fr;
  }




  .mission-actions,
  .growth-primary-metrics,
  .expandable-detail__grid{
    grid-template-columns:1fr;
  }

  .evidence-strip{
    grid-template-columns:repeat(2,1fr);
    gap:0;
  }

  .evidence-metric:nth-child(2)::after,
  .evidence-metric:nth-child(4)::after{
    display:none;
  }

  .website-direction-preview__body{
    grid-template-columns:1fr;
  }
}

@media (max-width: 900px){




  .app-layout{
    padding:16px;
    gap:16px;
  }



  .step-header h1{
    font-size:38px;
  }


  .idea-form__field .button{
    border-radius:0 0 20px 20px;
  }
  
  .idea-form__field .button--primary{
  min-width:240px;
  min-height:92px;
  margin:16px;
  padding:0 30px;
  border-radius:24px;
  font-size:18px;
  font-weight:900;
  letter-spacing:-.02em;
  color:#fff;
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.24), transparent 30%),
    linear-gradient(135deg, #4a7cff 0%, #2f63ff 35%, #2457f5 70%, #1f49d9 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 20px 40px rgba(36,87,245,.26),
    0 8px 18px rgba(36,87,245,.16);
}

.idea-form__field .button--primary:hover{
  transform:translateY(-3px) scale(1.01);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 28px 54px rgba(36,87,245,.30),
    0 10px 20px rgba(36,87,245,.20);
}

.idea-form__field .button--primary::after{
  content:"";
  position:absolute;
  inset:-40% auto -40% -20%;
  width:42%;
  transform:rotate(18deg) translateX(-140%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.30), transparent);
  pointer-events:none;
}

.idea-form__field .button--primary:hover::after{
  animation:luxuryButtonSweep 1.15s cubic-bezier(.22,.61,.36,1);
}

@keyframes luxuryButtonSweep{
  0%{ transform:rotate(18deg) translateX(-140%); }
  100%{ transform:rotate(18deg) translateX(420%); }
}


}

@media (max-width: 640px){



  .landing-subtitle{
    font-size:16px;
  }

  .hero-metric-card{
    width:100%;
    max-width:290px;
  }

  .hero-orbit{
    width:330px;
    height:330px;
  }

  .hero-floating{
    width:58px;
    height:58px;
    font-size:20px;
  }

  .step-header h1{
    font-size:32px;
  }

  .lead-metric-block__number strong{
    font-size:66px;
  }

  .growth-stat strong{
    font-size:32px;
  }


  .processing-overlay__top,
  .processing-visual,
  .processing-progress,
  .processing-steps{
    padding-left:18px;
    padding-right:18px;
  }

  .processing-log{
    margin:18px 18px 18px;
  }
}

/* ANIMATIONS */
@keyframes screenFade{
  from{
    opacity:0;
    transform:translateY(8px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

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

@keyframes overlayIn{
  from{
    opacity:0;
    transform:translateY(14px) scale(.985);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes floatY{
  0%,100%{
    transform:translateY(0);
  }
  50%{
    transform:translateY(-10px);
  }
}

@keyframes leafFloat{
  0%,100%{
    transform:translateY(0) rotate(var(--leaf-rot, 20deg));
  }
  50%{
    transform:translateY(-6px) rotate(calc(var(--leaf-rot, 20deg) + 2deg));
  }
}

@keyframes softPulse{
  0%,100%{
    transform:scale(1);
    opacity:1;
  }
  50%{
    transform:scale(1.025);
    opacity:.94;
  }
}

@keyframes graphGlow{
  0%,100%{
    opacity:.96;
    filter:drop-shadow(0 0 0 rgba(36,87,245,0));
  }
  50%{
    opacity:1;
    filter:drop-shadow(0 8px 18px rgba(36,87,245,.12));
  }
}

@keyframes spin{
  to{
    transform:rotate(360deg);
  }
}

@keyframes spinReverse{
  to{
    transform:rotate(-360deg);
  }
}

@keyframes scanLine{
  0%{
    transform:translateX(-40%);
  }
  100%{
    transform:translateX(40%);
  }
}

@keyframes barSweep{
  0%{
    transform:translateX(-100%);
  }
  100%{
    transform:translateX(120%);
  }
}


/* =========================================================
   INVESTOR REPORT PATCH
   Add this at the END of idea-to-business.css
   ========================================================= */

/* ---------- shared tone system ---------- */
:root{
  --tone-good:#17b26a;
  --tone-good-soft:#ecfdf3;
  --tone-good-line:rgba(23,178,106,.22);
  --tone-good-glow:rgba(23,178,106,.18);

  --tone-warn:#f79009;
  --tone-warn-soft:#fff7ed;
  --tone-warn-line:rgba(247,144,9,.24);
  --tone-warn-glow:rgba(247,144,9,.18);

  --tone-bad:#ef4444;
  --tone-bad-soft:#fff1f2;
  --tone-bad-line:rgba(239,68,68,.24);
  --tone-bad-glow:rgba(239,68,68,.18);

  --tone-info:#2457f5;
  --tone-info-soft:#eef3ff;
  --tone-info-line:rgba(36,87,245,.18);
  --tone-info-glow:rgba(36,87,245,.16);
}

/* Reusable classes that JS can toggle */
.tone-good{
  --card-accent:var(--tone-good);
  --card-accent-soft:var(--tone-good-soft);
  --card-accent-line:var(--tone-good-line);
  --card-accent-glow:var(--tone-good-glow);
}

.tone-warn{
  --card-accent:var(--tone-warn);
  --card-accent-soft:var(--tone-warn-soft);
  --card-accent-line:var(--tone-warn-line);
  --card-accent-glow:var(--tone-warn-glow);
}

.tone-bad{
  --card-accent:var(--tone-bad);
  --card-accent-soft:var(--tone-bad-soft);
  --card-accent-line:var(--tone-bad-line);
  --card-accent-glow:var(--tone-bad-glow);
}

.tone-info{
  --card-accent:var(--tone-info);
  --card-accent-soft:var(--tone-info-soft);
  --card-accent-line:var(--tone-info-line);
  --card-accent-glow:var(--tone-info-glow);
}

/* ---------- stronger validate / investor layout feel ---------- */
.mission-actions{
  gap:18px;
  align-items:stretch;
}

.mission-action-card{
  min-height:266px;
  padding:18px 18px 16px;
  border-radius:22px;
  border:1px solid rgba(216,224,235,.95);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(250,252,255,.88) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 14px 28px rgba(16,24,40,.05);
  position:relative;
  overflow:hidden;
  transition:
    transform .28s var(--ease),
    box-shadow .28s var(--ease),
    border-color .28s var(--ease),
    background .28s var(--ease);
}

.mission-action-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  border-radius:4px;
  background:var(--card-accent, var(--tone-info));
  box-shadow:0 0 24px var(--card-accent-glow, var(--tone-info-glow));
}

.mission-action-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top right, var(--card-accent-glow, rgba(36,87,245,.12)), transparent 34%);
  pointer-events:none;
}

.mission-action-card:hover{
  transform:translateY(-5px);
  border-color:var(--card-accent-line, rgba(36,87,245,.16));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 22px 36px rgba(16,24,40,.08);
}

.mission-action-card__label{
  color:var(--card-accent, var(--tone-info));
  font-size:11px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
  margin-bottom:8px;
}

.mission-action-card h3{
  font-size:18px;
  margin-bottom:10px;
}

.mission-action-card p{
  font-size:14px;
  line-height:1.7;
  color:#667085;
}

/* ---------- better top metric strip ---------- */
.evidence-strip{
  border-top:1px solid rgba(216,224,235,.94);
  border-bottom:1px solid rgba(216,224,235,.94);
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(250,252,255,.32));
  margin-top:4px;
}

.evidence-metric{
  padding:16px 14px 14px 0;
  transition:transform .24s var(--ease), opacity .24s var(--ease);
}

.evidence-metric:hover{
  transform:translateY(-2px);
}

.evidence-metric span{
  font-size:12px;
  font-weight:800;
  color:#667085;
  letter-spacing:-.01em;
}

.evidence-metric strong{
  font-size:17px;
  line-height:1.1;
  font-weight:900;
  letter-spacing:-.03em;
}

/* score-based metric tones */
.evidence-metric.metric-good strong{
  color:var(--tone-good);
}

.evidence-metric.metric-warn strong{
  color:var(--tone-warn);
}

.evidence-metric.metric-bad strong{
  color:var(--tone-bad);
}

.evidence-metric.metric-info strong{
  color:var(--tone-info);
}

/* ---------- score ring color helpers ---------- */
.score-ring.score-good{
  background:
    radial-gradient(farthest-side, #fff calc(100% - 12px), transparent calc(100% - 11px)),
    conic-gradient(var(--tone-good) 0 var(--score-fill, 78%), rgba(23,178,106,.12) var(--score-fill, 78%) 100%);
  box-shadow:
    0 0 0 16px rgba(23,178,106,.06),
    0 18px 44px rgba(23,178,106,.18);
}

.score-ring.score-warn{
  background:
    radial-gradient(farthest-side, #fff calc(100% - 12px), transparent calc(100% - 11px)),
    conic-gradient(var(--tone-warn) 0 var(--score-fill, 60%), rgba(247,144,9,.12) var(--score-fill, 60%) 100%);
  box-shadow:
    0 0 0 16px rgba(247,144,9,.06),
    0 18px 44px rgba(247,144,9,.16);
}

.score-ring.score-bad{
  background:
    radial-gradient(farthest-side, #fff calc(100% - 12px), transparent calc(100% - 11px)),
    conic-gradient(var(--tone-bad) 0 var(--score-fill, 25%), rgba(239,68,68,.12) var(--score-fill, 25%) 100%);
  box-shadow:
    0 0 0 16px rgba(239,68,68,.06),
    0 18px 44px rgba(239,68,68,.16);
}

.score-ring.score-info{
  background:
    radial-gradient(farthest-side, #fff calc(100% - 12px), transparent calc(100% - 11px)),
    conic-gradient(var(--tone-info) 0 var(--score-fill, 78%), rgba(36,87,245,.12) var(--score-fill, 78%) 100%);
}

/* ---------- verdict emphasis ---------- */
.score-ring__caption h2{
  position:relative;
  display:inline-block;
  padding-bottom:2px;
}

.score-ring__caption h2::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-4px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, currentColor, transparent);
  opacity:.32;
}

.score-ring__caption.verdict-good h2{ color:var(--tone-good); }
.score-ring__caption.verdict-warn h2{ color:var(--tone-warn); }
.score-ring__caption.verdict-bad h2{ color:var(--tone-bad); }
.score-ring__caption.verdict-info h2{ color:var(--tone-info); }

/* ---------- better decision cards ---------- */
.expandable-detail{
  margin-top:18px;
}

.expandable-detail__grid{
  gap:16px;
}

.expandable-detail article{
  position:relative;
  min-height:164px;
  padding:18px 18px 16px;
  border-radius:22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(250,252,255,.84) 100%);
  border:1px solid rgba(216,224,235,.95);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 12px 24px rgba(16,24,40,.05);
  transition:
    transform .26s var(--ease),
    box-shadow .26s var(--ease),
    border-color .26s var(--ease);
}

.expandable-detail article:hover{
  transform:translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 20px 34px rgba(16,24,40,.08);
}

.expandable-detail article h3{
  margin-bottom:12px;
  font-size:17px;
  font-weight:900;
}

.expandable-detail article p,
.expandable-detail article li{
  font-size:14px;
  line-height:1.75;
}

.expandable-detail article ul{
  padding-left:18px;
}

/* ---------- optional tones for detailed cards ---------- */
.expandable-detail article.tone-good,
.expandable-detail article.tone-warn,
.expandable-detail article.tone-bad,
.expandable-detail article.tone-info{
  border-color:var(--card-accent-line);
  background:
    linear-gradient(180deg, #ffffff 0%, var(--card-accent-soft) 100%);
}

.expandable-detail article.tone-good h3,
.expandable-detail article.tone-warn h3,
.expandable-detail article.tone-bad h3,
.expandable-detail article.tone-info h3{
  color:var(--card-accent);
}

/* ---------- stronger investor advice badges ---------- */
.advice-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid transparent;
}

.advice-badge::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 0 6px rgba(0,0,0,.04);
}

.advice-badge--go{
  color:var(--tone-good);
  background:var(--tone-good-soft);
  border-color:var(--tone-good-line);
}

.advice-badge--caution{
  color:var(--tone-warn);
  background:var(--tone-warn-soft);
  border-color:var(--tone-warn-line);
}

.advice-badge--stop{
  color:var(--tone-bad);
  background:var(--tone-bad-soft);
  border-color:var(--tone-bad-line);
}

/* ---------- make top investor summary feel more premium ---------- */
.score-ring-block{
  align-items:center;
  gap:30px;
  margin-bottom:22px;
}

.score-ring__caption{
  max-width:520px;
}

.score-ring__caption p{
  font-size:15px;
  line-height:1.85;
  color:#667085;
}

.primary-action-block{
  padding-top:2px;
  margin-bottom:8px;
}

/* ---------- specific visual upgrade for the 3-box row from screenshot ---------- */
.mission-actions .mission-action-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(249,251,255,.92) 100%);
}

.mission-actions .mission-action-card h3{
  min-height:44px;
}

.mission-actions .mission-action-card p{
  color:#667085;
}

/* ---------- utility classes your JS can add later ---------- */
.section-score-good{
  color:var(--tone-good) !important;
}

.section-score-warn{
  color:var(--tone-warn) !important;
}

.section-score-bad{
  color:var(--tone-bad) !important;
}

.bg-score-good{
  background:linear-gradient(180deg, #ffffff 0%, var(--tone-good-soft) 100%) !important;
  border-color:var(--tone-good-line) !important;
}

.bg-score-warn{
  background:linear-gradient(180deg, #ffffff 0%, var(--tone-warn-soft) 100%) !important;
  border-color:var(--tone-warn-line) !important;
}

.bg-score-bad{
  background:linear-gradient(180deg, #ffffff 0%, var(--tone-bad-soft) 100%) !important;
  border-color:var(--tone-bad-line) !important;
}

/* ---------- nicer hover and open detail transitions ---------- */
.expandable-detail[hidden]{
  display:none !important;
}

.expandable-detail:not([hidden]){
  animation:investorDetailFade .34s cubic-bezier(.22,.61,.36,1);
}

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

/* ---------- mobile cleanup ---------- */
@media (max-width: 1180px){
  .mission-action-card{
    min-height:auto;
  }

  .expandable-detail article{
    min-height:auto;
  }
}

@media (max-width: 900px){
  .score-ring-block{
    gap:20px;
  }

  .score-ring__caption{
    max-width:none;
  }

  .mission-actions{
    grid-template-columns:1fr;
  }

  .expandable-detail__grid{
    grid-template-columns:1fr;
  }
}






/* =========================================================
   BILLBOARD HERO TEXT UPGRADE
   Add at the END of idea-to-business.css
   ========================================================= */



/* small top label becomes more intentional */
.eyebrow{
  min-height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(238,243,255,.92) 0%, rgba(233,240,255,.86) 100%);
  border: 1px solid rgba(36,87,245,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 12px 24px rgba(36,87,245,.06);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 26px;
}

/* billboard headline */


/* subtle luminous band behind the blue line */

/* supporting line becomes more premium and readable */
.landing-subtitle{
  max-width: 860px;
  margin: 0;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.62;
  letter-spacing: -.02em;
  color: #667085;
  font-weight: 500;
}

/* stronger visual separation before the form */

/* if you want the headline to feel more centered in the hero zone */
.landing-hero{
  padding-bottom: 12px;
}

/* ultra-premium large screen tuning */
@media (min-width: 1440px){

  .landing-subtitle{
    max-width: 900px;
  }
}

/* mobile: still billboard, just tighter */
@media (max-width: 900px){

  .eyebrow{
    margin-bottom: 18px;
    font-size: 10px;
    letter-spacing: .12em;
  }




  .landing-subtitle{
    font-size: 17px;
    line-height: 1.58;
  }

}



.landing-title{
  margin: 0 0 18px;
  max-width: 900px;
  font-size: clamp(44px, 5.4vw, 72px);
  line-height: .94;
  font-weight: 900;
  letter-spacing: -.06em;
  color: #0f172a;
  text-wrap: balance;
}




/* ===== DIGITAL BILLBOARD TEXT ===== */

.landing-title--billboard{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.landing-title__static{
  display:block;
  color:#0f172a;
}

.landing-title__rotator-wrap{
  display:block;
  position:relative;
  min-height:1.08em;
  overflow:hidden;
  width:100%;
}

.landing-title__rotator{
  display:block;

  color:#0f172a !important;

  /* kill ALL gradient behavior */
  background:none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;

  text-shadow:
    0 4px 12px rgba(0,0,0,.05);

  transition:
    opacity .5s cubic-bezier(.22,.61,.36,1),
    transform .5s cubic-bezier(.22,.61,.36,1),
    filter .5s cubic-bezier(.22,.61,.36,1);
}

.landing-title__static{
  display:block;

  background: linear-gradient(180deg, #4c79ff 0%, #2457f5 60%, #1f49d9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  text-shadow:
    0 8px 18px rgba(36,87,245,.08),
    0 2px 6px rgba(36,87,245,.06);
}





/* ===== ARCANIS NEWS TICKER SUBTITLE ===== */

.landing-subtitle--ticker{
  max-width: 920px;
  margin: 0;
}

.landing-subtitle__viewport{
  position: relative;
  width: 100%;
  overflow: hidden;
  border-top: 1px solid rgba(216,224,235,.9);
  border-bottom: 1px solid rgba(216,224,235,.9);
  padding: 14px 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(248,250,255,.62));
}

.landing-subtitle__viewport::before,
.landing-subtitle__viewport::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.landing-subtitle__viewport::before{
  left: 0;
  background: linear-gradient(90deg, rgba(248,250,255,1) 0%, rgba(248,250,255,0) 100%);
}

.landing-subtitle__viewport::after{
  right: 0;
  background: linear-gradient(270deg, rgba(248,250,255,1) 0%, rgba(248,250,255,0) 100%);
}

.landing-subtitle__track{
  display: inline-flex;
  align-items: center;
  gap: 18px;
  white-space: nowrap;
  will-change: transform;
  animation: arcanisTickerMove 24s linear infinite;
}

.landing-subtitle__item{
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -.02em;
  font-weight: 700;
  color: #0f172a;
}

.landing-subtitle__separator{
  font-size: 18px;
  font-weight: 900;
  color: #2457f5;
  opacity: .9;
}

.landing-subtitle__viewport:hover .landing-subtitle__track{
  animation-play-state: paused;
}

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

@media (max-width: 900px){
  .landing-subtitle__viewport{
    padding: 12px 0;
  }

  .landing-subtitle__item,
  .landing-subtitle__separator{
    font-size: 15px;
  }

  .landing-subtitle__viewport::before,
  .landing-subtitle__viewport::after{
    width: 36px;
  }
}

/* =========================================================
   FULL-HEIGHT MISSION CONTROL SIDEBAR
   ========================================================= */


/* make nav fill the whole available height */

/* each step becomes a large tile */









@keyframes sidebarSweepReal{
  0%{ transform: translateX(-120%); }
  100%{ transform: translateX(180%); }
}

/* keep mobile sane */
@media (max-width: 1180px){

  .sidebar__nav{
    flex: initial;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }

  .sidebar-step{
    flex: initial;
    min-height: 92px;
  }
}




/* =========================================================
   IMAGE SIDEBAR TILES
   ========================================================= */






/* dark premium layer */

/* step-specific image assignments
   Replace these file names with your real images */
.sidebar-step[data-step="1"] .sidebar-step__media{
  background-image: url("/static/AuditButton.png");
}

/* default = disabled gray */
.sidebar-step[data-step="2"] .sidebar-step__media{
  background-image: url("/static/BuildButtonGray.png");
}

.sidebar-step[data-step="3"] .sidebar-step__media{
  background-image: url("/static/LaunchButtonGray.png");
}

.sidebar-step[data-step="4"] .sidebar-step__media{
  background-image: url("/static/ScaleButtonGray.png");
}

/* when enabled, swap to blue versions */
.sidebar-step.is-enabled[data-step="2"] .sidebar-step__media{
  background-image: url("/static/BuildButton.png");
}

.sidebar-step.is-enabled[data-step="3"] .sidebar-step__media{
  background-image: url("/static/LaunchButton.png");
}

.sidebar-step.is-enabled[data-step="4"] .sidebar-step__media{
  background-image: url("/static/ScaleButton.png");
}


/* disabled steps */
.sidebar-step.is-disabled{
  opacity: 0.82;
  cursor: not-allowed;
  pointer-events: auto;
}

.sidebar-step.is-disabled:hover{
  transform: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 8px 18px rgba(16,24,40,.04) !important;
  border-color: rgba(216,224,235,.9) !important;
}

.sidebar-step.is-disabled .sidebar-step__overlay{
  background: rgba(255,255,255,.16);
}

/* enabled steps */
.sidebar-step.is-enabled{
  cursor: pointer;
  opacity: 1;
  pointer-events: auto;
}



.sidebar-step:hover .sidebar-step__overlay{
  background:
    linear-gradient(180deg, rgba(10,15,30,.08) 0%, rgba(10,15,30,.28) 100%);
}

/* hover feel */
.sidebar-step:hover .sidebar-step__media{
  transform: scale(1.04);
  filter: saturate(1.06) contrast(1.04);
}

.sidebar-step:hover .sidebar-step__overlay{
  background:
    linear-gradient(180deg, rgba(10,15,30,.08) 0%, rgba(10,15,30,.28) 100%);
}



.sidebar-step.is-enabled:hover{
  transform: translateY(-2px) scale(1.01);
  border-color: rgba(36,87,245,.18);
  box-shadow:
    0 22px 34px rgba(36,87,245,.10),
    0 0 0 4px rgba(36,87,245,.04);
}

.sidebar-step.is-disabled{
  opacity: 0.82;
  cursor: not-allowed;
  pointer-events: none;
}



/* =========================================
   ACTIVE SIDEBAR BLUE FRAME
   ========================================= */


/* OPTIONAL: animated glow pulse (subtle, premium) */

@keyframes sidebarActivePulse{
  0%{ opacity: .15; }
  50%{ opacity: .35; }
  100%{ opacity: .15; }
}



/* ================================
   SIDEBAR ACTIVE TILE FIX
   ================================ */

/* make ALL tiles a little cleaner */


/* default non-selected tiles can stay a bit softer */

/* hover tiles become whiter */

/* selected tile should always look bright/white like hover */

/* overlay is what makes it look gray */

/* hover tiles */

/* selected tile = much whiter / less gray */

/* thicker selected border */
/* =========================================
   JOURNEY / PROGRESS SECTION UPGRADE
   ========================================= */



/* container */

/* main progress rail */
.journey-steps::before{
  content: "";
  position: absolute;
  left: var(--progress-line-left);
  right: var(--progress-line-right);
  top: 44px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(36,87,245,.10) 0%,
    rgba(36,87,245,.22) 18%,
    rgba(36,87,245,.14) 50%,
    rgba(36,87,245,.22) 82%,
    rgba(36,87,245,.10) 100%
  );
  z-index: 0;
}

/* soft glow behind rail */
.journey-steps::after{
  content: "";
  position: absolute;
  left: calc(var(--progress-line-left) + 3%);
  right: calc(var(--progress-line-right) + 3%);
  top: 40px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(36,87,245,0),
    rgba(36,87,245,.10),
    rgba(36,87,245,0)
  );
  z-index: 0;
  pointer-events: none;
}

/* each card */

/* subtle top accent */

/* soft card aura */


/* number becomes progress node */

/* tiny outer pulse ring */
.journey-step__number::after{
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 18px;
  border: 1px solid rgba(36,87,245,.10);
  opacity: .9;
}

/* node highlight on hover */
.journey-step:hover .journey-step__number{
  transform: translateY(-2px) scale(1.04);
  color: #ffffff;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 34%),
    linear-gradient(180deg, #2f63ff 0%, #2457f5 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 16px 28px rgba(36,87,245,.22);
}

/* content */
.journey-step__content{
  position: relative;
  z-index: 2;
}



/* optional motivational feel: make first words stronger if wrapped in span */
.journey-step__content h3 span{
  color: #2457f5;
}

/* responsive */
@media (max-width: 1180px){

  .journey-steps::before,
  .journey-steps::after{
    display: none;
  }

  .journey-step{
    padding-top: 28px;
  }


}

@media (max-width: 700px){


  .journey-step{
    padding: 28px 18px 18px;
    border-radius: 22px;
  }



}





/* =========================================
   POWERED BY - PREMIUM VERSION
   ========================================= */

.powered-by{
    position: absolute;
  top: -20px;
  right: 30px;
  align-items: center;
  gap: 10px;

  padding: 8px 18px;
  border-radius: 999px;

  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,255,.88));

  border: 1px solid rgba(36,87,245,.12);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 10px 20px rgba(16,24,40,.05);

  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.powered-label{
  color: #98a2b3;
  font-weight: 600;
}

/* BRAND (this is the important part) */
.powered-brand{
  font-family: "Great Vibes", cursive; /* or your Arcanis font */
  font-size: 18px;
  letter-spacing: 0;

  background: linear-gradient(90deg, #2f63ff, #2457f5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  font-weight: 700;
}

/* subtle hover luxury effect */
.powered-by:hover{
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 12px 24px rgba(36,87,245,.12);
}


.powered-by::after{
  content: "";
  position: absolute;
  left: -40px;
  right: -40px;
  height: 1px;
  bottom: -10px;
  background: linear-gradient(90deg, transparent, rgba(36,87,245,.2), transparent);
}

.powered-brand{
  font-family: 'Posterama Light', sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
}


@font-face {
  font-family: 'Posterama Light';
  src: url('/static/posterama-light.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Posterama';
  src: url('/static/posterama-light.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}


/* =========================================
   MORPH SECTION ONLY
   ========================================= */



#heroMorphCanvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#heroMorphCanvas canvas{
  display: block;
  width: 100% !important;
  height: 100% !important;
}

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

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


.partner-link{
  color: #667085;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.03em;
  opacity: .9;
  transition:
    transform .28s var(--ease),
    color .28s var(--ease),
    opacity .28s var(--ease);
}

.partner-link:hover{
  transform: translateY(-2px);
  color: var(--blue);
  opacity: 1;
}


/* =========================================================
   FINAL LANDING FIX
   put this at the VERY END of idea-to-business.css
   ========================================================= */


.landing-hero{
  display: block !important;
  padding: 0 !important;
}


/* headline back to a clean controlled width */
.landing-title{
  margin: 0 0 18px !important;
  max-width: 980px !important;
  width: 100% !important;
  font-size: clamp(44px, 5.4vw, 72px) !important;
  line-height: .94 !important;
  letter-spacing: -.06em !important;
}

/* keep the blue first line and black second line clean */
.landing-title__static{
  display: block;
}

.landing-title__rotator-wrap{
  display: block;
  width: 100%;
  min-height: 1.05em;
}

/* make the ticker line span full content width */
.landing-subtitle--ticker{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.landing-subtitle__viewport{
  width: 100% !important;
  max-width: 100% !important;
}

/* make the idea box span full content width */
.idea-form{
  margin-top: 34px !important;
  width: 100% !important;
  max-width: 100% !important;
}


.idea-form input{
  min-height: 112px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.idea-form__field .button--primary{
  min-width: 0 !important;
  width: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* powered by stays top-right, but without affecting title width */
.powered-by{
  position: absolute !important;
  top: -10px !important;
  right: 0 !important;
  z-index: 4 !important;
}

/* =========================================
   HERO VISUAL TRANSFORM SYSTEM
   ========================================= */

/* each art layer */
.hero-visual{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(.94);
  transition:
    opacity 1.35s cubic-bezier(.22,.61,.36,1),
    transform 1.35s cubic-bezier(.22,.61,.36,1),
    filter 1.35s cubic-bezier(.22,.61,.36,1);
  z-index: 2;
  pointer-events: none;
}

.hero-visual img{

  object-fit: contain;
  transform: translateZ(0);
  user-select: none;
  -webkit-user-drag: none;
  filter:
    drop-shadow(0 20px 36px rgba(36,87,245,.10))
    drop-shadow(0 6px 16px rgba(36,87,245,.08));
}

.hero-visual--active{
  opacity: 1;
  transform: scale(1);
}

.hero-visual--out{
  opacity: 0;
  transform: scale(1.035);
}

/* soft center glow */
.hero-visual__glow{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero-visual__glow::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 54%;
  width: 42%;
  height: 34%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(67,127,255,.18) 0%, rgba(67,127,255,.08) 38%, transparent 72%);
  animation: heroGlowPulse 6s ease-in-out infinite;
}

/* subtle ambient particles */
.hero-visual__particles{
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .35;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 14% 24%, rgba(61,125,255,.40) 0 1.1px, transparent 1.4px),
    radial-gradient(circle at 22% 62%, rgba(61,125,255,.30) 0 1px, transparent 1.3px),
    radial-gradient(circle at 34% 35%, rgba(61,125,255,.24) 0 1.1px, transparent 1.4px),
    radial-gradient(circle at 48% 55%, rgba(61,125,255,.30) 0 1px, transparent 1.4px),
    radial-gradient(circle at 62% 30%, rgba(61,125,255,.24) 0 1.1px, transparent 1.4px),
    radial-gradient(circle at 74% 60%, rgba(61,125,255,.34) 0 1.1px, transparent 1.4px),
    radial-gradient(circle at 86% 26%, rgba(61,125,255,.28) 0 1.1px, transparent 1.4px),
    radial-gradient(circle at 90% 74%, rgba(61,125,255,.22) 0 1px, transparent 1.2px);
  animation: heroParticleFloat 12s linear infinite;
}

/* moving luxury sweep */
.hero-visual__mask-sweep{
  position: absolute;
  inset: -12%;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 38%,
      rgba(255,255,255,.00) 44%,
      rgba(255,255,255,.16) 50%,
      rgba(255,255,255,.00) 56%,
      transparent 62%,
      transparent 100%
    );
  transform: translateX(-100%) skewX(-10deg);
  animation: heroSweep 6.5s ease-in-out infinite;
  mix-blend-mode: screen;
}

.morph-showcase__stage::before{
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,.12)),
    radial-gradient(circle at center, rgba(255,255,255,.18), rgba(0,0,0,.03) 70%);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 0 0 1px rgba(210,220,238,.55);
  pointer-events: none;
  z-index: 1;
}

/* optional tiny vignette */
.morph-showcase__stage::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, transparent 48%, rgba(15,23,42,.06) 100%);
  pointer-events: none;
  z-index: 7;
}

@keyframes heroGlowPulse{
  0%,100%{
    transform: translate(-50%, -50%) scale(1);
    opacity: .9;
  }
  50%{
    transform: translate(-50%, -50%) scale(1.08);
    opacity: 1;
  }
}

@keyframes heroParticleFloat{
  0%{
    transform: translate3d(0,0,0) scale(1);
  }
  50%{
    transform: translate3d(0,-8px,0) scale(1.01);
  }
  100%{
    transform: translate3d(0,0,0) scale(1);
  }
}

@keyframes heroSweep{
  0%, 15%{
    transform: translateX(-120%) skewX(-10deg);
    opacity: 0;
  }
  25%{
    opacity: 1;
  }
  48%{
    transform: translateX(120%) skewX(-10deg);
    opacity: 1;
  }
  60%, 100%{
    transform: translateX(120%) skewX(-10deg);
    opacity: 0;
  }
}

@media (max-width: 1100px){

  .hero-visual img{
    width: min(94%, 680px);
    max-height: 86%;
  }
}

@media (max-width: 900px){

  .hero-visual img{
    width: min(96%, 560px);
    max-height: 84%;
  }
}



/* =========================================
   FINAL UNIVERSAL SCORE COLORS
   ========================================= */

.metric-good,
#heroMetricRisk.metric-good,
#riskLevelValue.metric-good {
  color: #2457f5 !important; /* dark blue */
}

.metric-fair,
#heroMetricRisk.metric-fair,
#riskLevelValue.metric-fair {
  color: #f79009 !important; /* orange */
}

.metric-bad,
#heroMetricRisk.metric-bad,
#riskLevelValue.metric-bad {
  color: #ef4444 !important; /* red */
}


/* Center the score + verdict block */
.score-ring-block{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:34px;
  flex-wrap:wrap;
  margin:0 auto 26px;
  text-align:left;
}

.mission-primary{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.mission-primary__metric-label{
  width:100%;
  max-width:700px;
  text-align:left;
}

.primary-action-block{
  width:100%;
  max-width:700px;
  justify-content:center;
}


.score-ring__caption h2{
  margin:0 0 10px;
  font-size:24px;
  line-height:1.15;
  letter-spacing:-.03em;
  color:var(--text);
}

.score-ring__caption p{
  margin:0;
  font-size:15px;
  color:var(--muted);
  line-height:1.7;
  max-width:440px;
}


/* =========================================
   METRIC STRIP UPGRADE
   ========================================= */

.evidence-strip{
  display:grid !important;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:14px !important;
  border:0 !important;
  background:transparent !important;
  margin-top:10px;
  padding:0;
}

.evidence-metric{
  position:relative;
  min-height:108px;
  padding:16px 16px 14px !important;
  border-radius:18px;
  border:1px solid rgba(216,224,235,.92);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(249,251,255,.92));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 10px 20px rgba(16,24,40,.04);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:8px;
  transition:
    transform .25s cubic-bezier(.22,.61,.36,1),
    box-shadow .25s cubic-bezier(.22,.61,.36,1),
    border-color .25s cubic-bezier(.22,.61,.36,1);
}

.evidence-metric::after{
  display:none !important;
}

.evidence-metric:hover{
  transform:translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 18px 30px rgba(16,24,40,.08);
}

.evidence-metric span{
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1.2;
  color:#667085 !important;
  letter-spacing:.01em;
  text-transform:none;
}

.evidence-metric strong{
  font-size:30px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:-.05em;
  color:#101828;
}

/* Risk label also looks big like a metric */
#riskLevelValue{
  font-size:24px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:-.04em;
}

/* tone cards */
.evidence-metric.metric-good{
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), #ecfdf3);
  border-color:rgba(23,178,106,.24);
}

.evidence-metric.metric-okay{
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), #fff9db);
  border-color:rgba(245,197,66,.30);
}

.evidence-metric.metric-fair{
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), #fff4e8);
  border-color:rgba(247,144,9,.26);
}

.evidence-metric.metric-bad{
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), #fff1f2);
  border-color:rgba(239,68,68,.24);
}

/* left glow accent */
.evidence-metric::before{
  content:"";
  position:absolute;
  top:12px;
  bottom:12px;
  left:0;
  width:4px;
  border-radius:999px;
  opacity:.95;
}

.evidence-metric.metric-good::before{ background:#17b26a; }
.evidence-metric.metric-okay::before{ background:#f5c542; }
.evidence-metric.metric-fair::before{ background:#f79009; }
.evidence-metric.metric-bad::before{ background:#ef4444; }

/* mobile */
@media (max-width: 1180px){
  .evidence-strip{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  }
}

@media (max-width: 700px){
  .evidence-strip{
    grid-template-columns:1fr !important;
  }

  .evidence-metric{
    min-height:92px;
  }

  .evidence-metric strong{
    font-size:26px !important;
  }
}

.mission-evidence{
  padding-top:10px;
  padding-bottom:4px;
}




/* =========================================================
   HERO POSTER INTERACTION SYSTEM
   ========================================================= */




.hero-poster-layer.is-visible{
  opacity: 1;
  visibility: visible;
}

@keyframes posterZoomIn {
  0% {
    transform: scale(1) translateY(0px);
  }
  100% {
    transform: scale(1.5) translateY(-20px);
  }
}

.hero-poster-layer.is-zooming .hero-poster-layer__image{
  animation: posterZoomIn 3s cubic-bezier(.22,.61,.36,1) forwards;
}









/* optional: soften the morph art slightly while poster is visible */
.morph-showcase__stage.has-poster .hero-visual{
  opacity: .16 !important;
  transform: scale(.985) !important;
  filter: blur(2px) saturate(.96);
}

/* journey cards become interactive selectors */



.journey-step:hover::after{
  opacity: 1;
}

.journey-step.is-previewing{
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,249,255,.92));
  border-color: rgba(36,87,245,.18);
  box-shadow:
    0 18px 36px rgba(36,87,245,.10),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.journey-step.is-previewing::after{
  opacity: 1;
}

.journey-step.is-selected{
  transform: translateY(-6px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,247,255,.96));
  border-color: rgba(36,87,245,.24);
  box-shadow:
    0 24px 48px rgba(36,87,245,.14),
    0 10px 24px rgba(16,24,40,.06),
    inset 0 1px 0 rgba(255,255,255,.98);
}

.journey-step.is-selected::after{
  opacity: 1;
  box-shadow:
    inset 0 0 0 2px rgba(36,87,245,.22),
    0 22px 42px rgba(36,87,245,.12);
}

.journey-step.is-selected .journey-step__number{
  color: #ffffff;
  background: linear-gradient(180deg, #2f63ff, #2457f5);
  box-shadow:
    0 14px 28px rgba(36,87,245,.22),
    inset 0 1px 0 rgba(255,255,255,.22);
}

.journey-step.is-selected .journey-step__content h3{
  color: #1236a8;
}

/* subtle stage pulse when locked */
.morph-showcase__stage.is-locked{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 22px 52px rgba(16,24,40,.06),
    0 0 0 1px rgba(36,87,245,.08);
}

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



/* =========================================================
   FORCE LANDING FOOTER TO STICK TO BOTTOM
   ========================================================= */

.screen.screen--landing.is-active{
  display:flex !important;
  flex-direction:column !important;
  min-height:calc(100vh - 134px) !important;
}

.screen.screen--landing.is-active > .partner-strip{
  margin-top:auto !important;
  padding-top:20px !important;
  padding-bottom:6px !important;
}

.screen.screen--landing.is-active > .landing-hero,
.screen.screen--landing.is-active > .landing-divider,
.screen.screen--landing.is-active > .morph-showcase,
.screen.screen--landing.is-active > .journey-section{
  flex:0 0 auto !important;
}






/* =========================================================
   LANDING PAGE FINISHING PASS
   Put this at the VERY END
   ========================================================= */

.screen.screen--landing.is-active{
  display:flex !important;
  flex-direction:column !important;
  min-height:calc(100vh - 134px) !important;
  padding:42px 38px 24px !important;
    padding-bottom: 24px; /* or 32px */
}

/* make footer glue to bottom */

/* top trust line */
.partner-strip__eyebrow{
  margin:0 0 14px !important;
  text-align:center;
  font-size:12px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}



/* NEW useful band above footer */


.landing-value-band__eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 12px;
  margin-bottom:12px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(240,245,255,.9), rgba(235,241,255,.82));
  border:1px solid rgba(36,87,245,.08);
  color:var(--blue);
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.landing-value-band__intro h3{
  margin:0 0 10px;
  font-size:30px;
  line-height:1.02;
  letter-spacing:-.05em;
  color:#0f172a;
}

.landing-value-band__intro p{
  margin:0 auto;
  max-width:680px;
  font-size:16px;
  line-height:1.7;
  color:var(--muted);
}

.landing-value-band__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
}

/* =========================================================
   VALUE CARDS TEXT POLISH
   ========================================================= */

.value-card{
  display: flex;
  flex-direction: column;
  justify-content: center; /* centers vertically */
  text-align: center;      /* centers everything */
    transform: scale(1) translateY(0);
  transform-origin: center;

  transition:
    transform .45s cubic-bezier(.22,.61,.36,1), /* smooth ease-out */
    letter-spacing .35s ease,
    color .25s ease;
}

/* push content down a bit */
.value-card h4{
  margin-bottom: 14px !important;
}

/* DESCRIPTION TEXT (this is what you want to change) */
.value-card p{
  margin-top: 6px !important;

  font-size: 30px !important; /* ~1.5x bigger */
  line-height: 1.45 !important;
  font-weight: 600 !important;

  text-align: center !important;
  color: #667085 !important;

  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.value-card:hover{
  transform: scale(1.3) translateY(-2px); /* slight lift + scale */
  letter-spacing: -0.01em; /* tightens slightly = more refined */
}

.value-card__kicker{
  display:inline-block;
  margin-bottom:10px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--blue);
}



/* tighten journey section so the whole lower half feels intentional */

/* responsive */
@media (max-width: 1180px){
  .landing-value-band__grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 900px){
  .screen.screen--landing.is-active{
    padding:24px 18px 18px !important;
  }


  .landing-value-band__intro h3{
    font-size:24px;
  }
}




/* =========================================================
   TIGHTEN LOWER LANDING LAYOUT
   Move red zones into the blue-marked space
   ========================================================= */

/* 1) Pull the value band much closer to the screen above */

/* tighten its intro block */

/* reduce space inside the intro */
.landing-value-band__eyebrow{
  margin-bottom: 8px !important;
}

.landing-value-band__intro h3{
  margin: 0 0 6px !important;
}

.landing-value-band__intro p{
  margin: 0 auto !important;
  line-height: 1.5 !important;
}

/* tighten the 3 cards row */
.landing-value-band__grid{
  gap: 12px !important;
}

.value-card{
  min-height: 120px !important;
  padding: 14px 16px 14px !important;
}

/* 2) Pull the journey section upward */

/* tighter title spacing */

/* reduce dead space between title and cards */

/* slightly more compact cards */




/* 3) Reduce extra divider spacing if present around these sections */
.landing-divider{
  margin: 14px 0 18px !important;
}

/* 4) If the morph showcase still leaves too much air below, tighten it too */

/* 5) Footer still stays at bottom */




.journey-step{
  min-height: 190px;
  padding: 30px 18px 18px;
}





/* =========================================================
   JOURNEY CARDS - LARGE READABLE VERSION
   fills the area between heading and footer
   ========================================================= */



/* make the whole row taller so it fills that empty zone */

/* BIGGER cards */

/* keep the badge at the top */

/* PUSH CONTENT MUCH LOWER */
.journey-step__content{
  margin-top: 14px !important;
  padding-top: 8px !important;
}

/* 2x-ISH BIGGER TITLE */

/* MUCH BIGGER BODY TEXT */

/* selected state still looks premium */
.journey-step.is-selected .journey-step__content h3{
  color: #1639b3 !important;
}

/* keep footer below and let the cards dominate the space */

/* responsive fallback */
@media (max-width: 1180px){



}

@media (max-width: 700px){


  .journey-step__content{
    margin-top: 30px !important;
  }


}



/* =========================================================
   HERO SCREEN REPORT LAYER
   ========================================================= */

/* =========================================================
   HERO SCREEN REPORT LAYER - FITTED VERSION
   ========================================================= */


/* ================================
   LOCK TOP BAR TO THE TOP
   ================================ */



/* make room for the fixed bar so content does not go underneath it */



.landing-value-band,
.landing-insights-band {
  transition: opacity .35s ease, transform .35s ease;
}

.is-hidden {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ===== LANDING INSIGHTS BAND ===== */



.landing-insights-band__intro h3{
  margin: 0 0 8px;
  font-size: 30px;
  line-height: 1.03;
  letter-spacing: -.05em;
  color: #0f172a;
  font-weight: 900;
}

.landing-insights-band__intro p{
  margin: 0 auto;
  max-width: 680px;
  font-size: 15px;
  line-height: 1.7;
  color: #667085;
}

.landing-insights-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.insight-chart-card{
  min-height: 196px;
  padding: 20px 20px 18px;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,255,.92));
  border: 1px solid rgba(216,224,235,.94);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 14px 28px rgba(16,24,40,.05);
  transition:
    transform .28s var(--ease),
    box-shadow .28s var(--ease),
    border-color .28s var(--ease);
}

.insight-chart-card::before{
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 4px;
  border-radius: 999px;
  background: #2457f5;
  opacity: .95;
}

.insight-chart-card:hover{
  transform: translateY(-4px);
  border-color: rgba(36,87,245,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 22px 36px rgba(16,24,40,.08);
}

.insight-chart-card__top{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.insight-chart-card__label{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #2457f5;
}

.insight-chart-card__top strong{
  font-size: 30px;
  line-height: 1;
  letter-spacing: -.05em;
  font-weight: 900;
  color: #101828;
  white-space: nowrap;
}

.insight-bar{
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(231,236,243,.95), rgba(223,230,240,.88));
  box-shadow: inset 0 1px 2px rgba(16,24,40,.05);
  margin-bottom: 16px;
}

.insight-bar__fill{
  height: 100%;
  border-radius: 999px;
  width: 0;
  transition: width .7s cubic-bezier(.22,.61,.36,1);
  background: linear-gradient(90deg, #84a8ff 0%, #2f63ff 45%, #2457f5 100%);
  box-shadow:
    0 8px 18px rgba(36,87,245,.20),
    inset 0 1px 0 rgba(255,255,255,.24);
}

.insight-bar--risk .insight-bar__fill{
  background: linear-gradient(90deg, #f5c542 0%, #f79009 55%, #ef4444 100%);
  box-shadow:
    0 8px 18px rgba(247,144,9,.16),
    inset 0 1px 0 rgba(255,255,255,.22);
}

.insight-chart-card p{
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: #667085;
}

/* optional tone classes */
.insight-chart-card.metric-good{
  background: linear-gradient(180deg, rgba(255,255,255,.98), #ecfdf3);
  border-color: rgba(23,178,106,.24);
}
.insight-chart-card.metric-good::before{ background: #17b26a; }

.insight-chart-card.metric-okay{
  background: linear-gradient(180deg, rgba(255,255,255,.98), #fff9db);
  border-color: rgba(245,197,66,.26);
}
.insight-chart-card.metric-okay::before{ background: #f5c542; }

.insight-chart-card.metric-fair{
  background: linear-gradient(180deg, rgba(255,255,255,.98), #fff4e8);
  border-color: rgba(247,144,9,.24);
}
.insight-chart-card.metric-fair::before{ background: #f79009; }

.insight-chart-card.metric-bad{
  background: linear-gradient(180deg, rgba(255,255,255,.98), #fff1f2);
  border-color: rgba(239,68,68,.24);
}
.insight-chart-card.metric-bad::before{ background: #ef4444; }

@media (max-width: 1180px){
  .landing-insights-grid{
    grid-template-columns: 1fr;
  }
}



/* =========================================
   LANDING CATEGORY CARDS
   ========================================= */



.landing-category-cards__eyebrow{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(240,245,255,.9), rgba(235,241,255,.82));
  border: 1px solid rgba(36,87,245,.08);
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.landing-category-cards__intro h2{
  margin: 0 0 8px;
  font-size: 32px;
  line-height: 1.03;
  letter-spacing: -.05em;
  font-weight: 900;
  color: #0f172a;
}

.landing-category-cards__intro p{
  margin: 0 auto;
  max-width: 700px;
  font-size: 15px;
  line-height: 1.7;
  color: #667085;
}

.landing-category-cards__grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.landing-category-card{
  position: relative;
  min-height: 220px;
  padding: 18px 18px 16px;
  border-radius: 22px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,255,.92));
  border: 1px solid rgba(216,224,235,.94);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 14px 28px rgba(16,24,40,.05);
  transition:
    transform .28s var(--ease),
    box-shadow .28s var(--ease),
    border-color .28s var(--ease),
    background .28s var(--ease);
}

.landing-category-card::before{
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 4px;
  border-radius: 999px;
  background: rgba(36,87,245,.22);
  transition: background .28s var(--ease), box-shadow .28s var(--ease);
}

.landing-category-card:hover{
  transform: translateY(-5px);
  border-color: rgba(36,87,245,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 22px 36px rgba(16,24,40,.08);
}

.landing-category-card:hover::before{
  background: #2457f5;
  box-shadow: 0 0 18px rgba(36,87,245,.18);
}

.landing-category-card__eyebrow{
  display: inline-block;
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #2457f5;
}

.landing-category-card__score{
  margin-bottom: 12px;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.06em;
  font-weight: 900;
  color: #101828;
  transition: color .28s var(--ease);
}

.landing-category-card p{
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: #667085;
  transition: color .28s var(--ease);
}

.landing-category-card:hover .landing-category-card__score,
.landing-category-card:hover .landing-category-card__eyebrow{
  color: #2457f5;
}


/* tone helpers */
.landing-category-card.metric-good{
  background: linear-gradient(180deg, rgba(255,255,255,.98), #ecfdf3);
  border-color: rgba(23,178,106,.22);
}
.landing-category-card.metric-good::before{ background: #17b26a; }

.landing-category-card.metric-okay{
  background: linear-gradient(180deg, rgba(255,255,255,.98), #fff9db);
  border-color: rgba(245,197,66,.28);
}
.landing-category-card.metric-okay::before{ background: #f5c542; }

.landing-category-card.metric-fair{
  background: linear-gradient(180deg, rgba(255,255,255,.98), #fff4e8);
  border-color: rgba(247,144,9,.24);
}
.landing-category-card.metric-fair::before{ background: #f79009; }

.landing-category-card.metric-bad{
  background: linear-gradient(180deg, rgba(255,255,255,.98), #fff1f2);
  border-color: rgba(239,68,68,.24);
}
.landing-category-card.metric-bad::before{ background: #ef4444; }

@media (max-width: 1180px){
  .landing-category-cards__grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 700px){
  .landing-category-cards__grid{
    grid-template-columns: 1fr;
  }
}



/* =========================================
   MOVE REPORT AREAS UP
   ========================================= */

/* 1) tighten the gap under the big report card */


/* 2) pull the 5 category cards section upward */


/* 3) reduce the spacer between the two report sections */

/* 4) if there is still too much air below the hero/report block */

/* 5) pull the bottom section upward by reducing footer push */

/* 6) optional: tighten inside the big hero report area too */


/* add spacing via parent container */




/* right side becomes a fixed-height container */


/* =========================================
   BUTTON CLICK FIX - NO GROWTH, ONLY COLOR + LETTER FALL
   ========================================= */

/* kill ALL hover / active size changes */
.button,
.button:hover,
.button:active,
.button:focus,
.button--primary,
.button--primary:hover,
.button--primary:active,
.idea-form__field .button--primary,
.idea-form__field .button--primary:hover,
.idea-form__field .button--primary:active{
  transform: none !important;
  scale: 1 !important;
}


/* keep box-shadow change only, no movement */
.button--primary:hover,
.idea-form__field .button--primary:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 20px 38px rgba(36,87,245,.24) !important;
}

/* use the SAME blue family as "Your idea matters." */
.button.is-falling{
  background: linear-gradient(180deg, #4c79ff 0%, #2457f5 60%, #1f49d9 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 18px 34px rgba(36,87,245,.24) !important;
  transform: none !important;
}

/* letters fall, button itself stays still */
.button__char{
  display: inline-block;
  will-change: transform, opacity;
}



@keyframes buttonCharFall{
  0%{
    opacity: 1;
    transform: translateY(0) rotate(0deg);
    filter: blur(0);
  }
  100%{
    opacity: 0;
    transform: translateY(22px) rotate(18deg);
    filter: blur(1px);
  }
}


@keyframes buttonCharRise{
  0%{
    opacity: 1;
    transform: translateY(0) rotate(0deg);
    filter: blur(0);
  }

  100%{
    opacity: 0;
    transform: translateY(-22px) rotate(-18deg);
    filter: blur(1px);
  }
}


.button.is-falling .button__char{
  animation: buttonCharFall .55s cubic-bezier(.22,.61,.36,1) forwards;
}

.button.is-rising .button__char{
  animation: buttonCharRise .55s cubic-bezier(.22,.61,.36,1) forwards;
}

/* =========================================
   SHARE MY IDEA -> PROCESSING EXPAND ANIMATION
   ========================================= */


.idea-form__field input{
  position: relative;
  z-index: 1;
  transition:
    opacity .32s ease,
    color .32s ease,
    transform .42s cubic-bezier(.22,.61,.36,1);
}


/* keep the fallen letters hidden */

/* processing state: button grows left and covers the whole field */
.idea-form__field.is-processing{
  grid-template-columns: minmax(0,1fr) 200px !important;
}



/* the new processing label */

.idea-form__field.is-processing #submitIdeaButton .button__processing{
  opacity: 1;
  transform: translateY(0);
}

/* hide any remaining original visible label while processing */


/* optional subtle pulse while waiting */

@keyframes processingSweep{
  0%{ transform: translateX(-120%); }
  100%{ transform: translateX(120%); }
}



/* =========================================
   SHARE MY IDEA — PREMIUM FLOOD ANIMATION
   ========================================= */


/* keep fallen letters gone */

/* the field itself */

/* input fades away while the blue takes over */

/* slow blue takeover */



/* original button text + arrow stay hidden during processing */

/* centered processing text */




/* show Processing only when you explicitly turn it on */

@keyframes submitFloodFill{
  0%{
    transform: scaleX(.22);
    filter: saturate(1.02);
  }
  45%{
    transform: scaleX(.58);
  }
  72%{
    transform: scaleX(.84);
  }
  100%{
    transform: scaleX(1);
    filter: saturate(1.06);
  }
}

@keyframes submitFloodSheen{
  0%{
    transform: translateX(120%);
  }
  100%{
    transform: translateX(-120%);
  }
}


/* =========================================================
   FINAL SUBMIT BUTTON OVERRIDE
   real slow right-to-left expansion
   ========================================================= */

/* parent must be the animation container */

/* input sits under the future flood */
.idea-form__field input{
  position: relative;
  z-index: 1;
  transition:
    opacity .45s ease,
    color .45s ease,
    transform .55s cubic-bezier(.22,.61,.36,1);
}

/* DEFAULT STATE = only the normal right-side button */

/* kill old pseudo effects completely */
#submitIdeaButton::before,

/* keep fallen letters hidden */

/* PROCESSING STATE = button grows from right to left */

/* fade input away while blue takes over */

/* hide original text during processing */

/* Processing label */






/* FINAL submit button timing override */


/* kill all fake extra motion */
#submitIdeaButton::before,



/* =========================================
   PROCESSING LABEL: blinking dots + rotating business words
   ========================================= */



.button__processing-word{
  font-weight: 800;
  letter-spacing: 2px;

  /* glow effect */
  text-shadow:
    0 0 8px rgba(255,255,255,0.4),
    0 0 18px rgba(95, 234, 235, 0.5);

  min-width: 160px;
  text-align: left;

  transition:
    opacity .25s ease,
    transform .25s ease;
}

.button__processing-label{
  opacity: 0.85;
  letter-spacing: 2px;
}

.button__dots span{
  font-size: 28px;
  opacity: .2;
  animation: processingDotBlink 1.2s infinite;
}


@keyframes processingGlow {
  0% {
    text-shadow:
      0 0 10px rgba(95,234,235,0.3),
      0 0 20px rgba(95,234,235,0.2);
  }
  100% {
    text-shadow:
      0 0 18px rgba(95,234,235,0.6),
      0 0 32px rgba(95,234,235,0.4);
  }
}

.button__processing-label{
  display: inline-block;
}

.button__dots{
  display: inline-flex;
  min-width: 22px;
  justify-content: flex-start;
}

.button__dots span{
  opacity: .15;
  animation: processingDotBlink 1.2s infinite;
}

.button__dots span:nth-child(2){
  animation-delay: .2s;
}

.button__dots span:nth-child(3){
  animation-delay: .4s;
}

@keyframes processingDotBlink{
  0%, 20%{ opacity: .15; }
  40%{ opacity: 1; }
  100%{ opacity: .15; }
}

.button__processing-word{
  display: inline-block;
  min-width: 140px;
  text-align: left;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity .28s ease,
    transform .28s ease;
}

.button__processing-word.is-changing-out{
  opacity: 0;
  transform: translateY(8px);
}

.button__processing-word.is-changing-in{
  opacity: 0;
  transform: translateY(-8px);
}


/* =========================================
   MATRIX PROCESSING OVERLAY
   ========================================= */


.processing-matrix-shell{
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(47,99,255,.10), transparent 22%),
    radial-gradient(circle at 100% 20%, rgba(47,99,255,.08), transparent 18%),
    linear-gradient(180deg, #ffffff 0%, #f7faff 48%, #eef4ff 100%);
}

#processingMatrixCanvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.processing-matrix-vignette{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at center, transparent 42%, rgba(255,255,255,.18) 72%, rgba(255,255,255,.40) 100%);
}

.processing-matrix-copy{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, calc(100% - 80px));
  text-align: center;
  z-index: 2;
  pointer-events: none;
}

.processing-matrix-eyebrow{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  margin-bottom: 18px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(36,87,245,.14);
  color: #2457f5;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 10px 24px rgba(36,87,245,.08);
}

.processing-matrix-copy h2{
  margin: 0 0 14px;
  color: #1236a8;
  font-size: clamp(36px, 5vw, 72px);
  line-height: .96;
  letter-spacing: -.06em;
  font-weight: 900;
  text-shadow:
    0 6px 18px rgba(36,87,245,.08);
}

.processing-matrix-copy p{
  margin: 0 auto;
  max-width: 760px;
  color: #4f5f85;
  font-size: clamp(16px, 1.6vw, 24px);
  line-height: 1.6;
  font-weight: 600;
}

@media (max-width: 900px){
  .processing-matrix-copy{
    width: calc(100% - 36px);
  }

  .processing-matrix-copy h2{
    font-size: 40px;
  }

  .processing-matrix-copy p{
    font-size: 16px;
  }
}


.processing-matrix-shell{
  position: absolute;
  inset: 6px;
  border-radius: 22px;
  overflow: hidden;
  background:
    linear-gradient(180deg, #fcfdff 0%, #f6f9ff 50%, #eef4ff 100%);
  border: 1px solid rgba(210,220,238,.95);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 0 30px rgba(36,87,245,.035),
    0 18px 30px rgba(16,24,40,.06);
}

.processing-matrix-shell::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(36,87,245,.018) 0px,
      rgba(36,87,245,.018) 1px,
      transparent 1px,
      transparent 8px
    );
  opacity: .5;
}

.processing-matrix-shell::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0) 20%),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.28), transparent 30%);
}

#processingMatrixCanvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}







/* =========================================================
   HERO PROCESSING VIDEO - PREMIUM CINEMATIC SCREEN
   ========================================================= */

.hero-processing-layer{
  position: absolute;
  inset: 16px;              /* matches the inner framed feel */
  z-index: 9;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(47,99,255,.10), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(240,246,255,.88));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    0 24px 60px rgba(16,24,40,.10);
}

.hero-processing-layer.is-visible{
  display: flex;
  animation: screenFade .35s var(--ease);
}

.hero-processing-video{
  position: absolute;
  inset: 12px;              /* this gives you the beautiful inner margin */
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  object-fit: cover;        /* change to contain if you want zero crop */
  object-position: center center;
  border-radius: 18px;
  display: block;
  background: #05070b;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 18px 40px rgba(0,0,0,.20);
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
  transform: scale(1.01);
}

.hero-processing-video.is-ready{
  opacity: 1;
  transform: scale(1);
}

.hero-processing-overlay{
  position: absolute;
  inset: 12px;
  border-radius: 18px;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.10)),
    radial-gradient(circle at 50% 120%, rgba(36,87,245,.18), transparent 42%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12);
}

.hero-processing-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), transparent 18%, transparent 78%, rgba(36,87,245,.10));
  mix-blend-mode: screen;
  opacity: .85;
}

.hero-processing-caption{
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 28px;
  z-index: 2;
  pointer-events: none;
  max-width: 560px;
  padding: 16px 18px 14px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(245,249,255,.72));
  border: 1px solid rgba(255,255,255,.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 12px 30px rgba(16,24,40,.10),
    inset 0 1px 0 rgba(255,255,255,.70);
}

.hero-processing-caption__eyebrow{
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(36,87,245,.14);
  color: #2457f5;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hero-processing-caption h3{
  margin: 0 0 6px;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.02;
  letter-spacing: -.05em;
  color: #1236a8;
  font-weight: 900;
}

.hero-processing-caption p{
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: #4f5f85;
  font-weight: 600;
}



@media (max-width: 900px){
  .hero-processing-layer{
    inset: 12px;
    border-radius: 18px;
  }

  .hero-processing-video,
  .hero-processing-overlay{
    inset: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    border-radius: 14px;
  }

  .hero-processing-caption{
    left: 20px;
    right: 20px;
    bottom: 18px;
    padding: 12px 14px 12px;
    border-radius: 14px;
  }

  .hero-processing-caption p{
    font-size: 13px;
  }
}


.hide-visuals .hero-visual {
  display: none !important;
}


/* =========================================
   PARENT EDGE GLOW ONLY (2X INTENSITY)
   ========================================= */


/* keep the screen itself unchanged */

/* glow lives on the parent, behind the screen */
.morph-showcase.is-processing::before{
  content: "";
  position: absolute;

  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;

  border-radius: 42px;
  pointer-events: none;
  z-index: 1;

  /* balanced edge brightness */
  border: 2px solid rgba(74,108,247,.45);
  background: transparent;

  /* ~2x stronger glow */
  box-shadow:
    0 0 18px rgba(74,108,247,.32),
    0 0 40px rgba(74,108,247,.24),
    0 0 72px rgba(74,108,247,.16);

  animation: parentEdgePulse 2.8s ease-in-out infinite;
}

@keyframes parentEdgePulse{
  0%,100%{
    opacity: .85;
    box-shadow:
      0 0 14px rgba(74,108,247,.26),
      0 0 28px rgba(74,108,247,.20),
      0 0 52px rgba(74,108,247,.14);
  }
  50%{
    opacity: 1;
    box-shadow:
      0 0 22px rgba(74,108,247,.40),
      0 0 48px rgba(74,108,247,.30),
      0 0 84px rgba(74,108,247,.20);
  }
}



/* =========================================
   REVERSE COLLAPSE + PROPOSED NAME TAB
   ========================================= */

/* smooth reverse when returning from expanded state */
.idea-form__field.is-collapsing input{
  opacity: 1 !important;
  transform: translateX(0) !important;
  pointer-events: auto !important;
  transition:
    opacity .42s ease,
    transform .55s cubic-bezier(.22,.61,.36,1);
}

.idea-form__field.is-collapsing #submitIdeaButton{
  width: 200px !important;
  border-radius: 0 30px 30px 0 !important;
  right: 0 !important;
  left: auto !important;
  transition:
    width 1.15s cubic-bezier(.22,.61,.36,1) !important,
    border-radius .38s cubic-bezier(.22,.61,.36,1) !important,
    background .22s ease !important,
    box-shadow .22s ease !important;
}

/* restore original visible label */
#submitIdeaButton.is-resetting .button__char{
  opacity: 1 !important;
  transform: translateY(0) rotate(0deg) !important;
  filter: blur(0) !important;
  transition:
    opacity .22s ease,
    transform .32s cubic-bezier(.22,.61,.36,1),
    filter .22s ease;
}

#submitIdeaButton.is-resetting .button__processing{
  opacity: 0 !important;
  transform: translateY(8px) scale(.96) !important;
}

/* rail below input */
/* =========================================
   IDEA TAB - RIGHT SIDE HERO POSITION
   ========================================= */

/* =========================================
   RIGHT TABS RAIL - OUTSIDE MAIN, NO WIDTH TAKEN
   ========================================= */

/* =========================================
   FINAL FIX - RIGHT IDEA TABS VISIBLE
   ========================================= */

/* default = perfectly centered without tab space */
.app-layout{
  transition: transform var(--idea-tabs-anim-time) cubic-bezier(.22,.61,.36,1) !important;
  transform: translateX(0) !important;
}

.topbar{
  transition: transform var(--idea-tabs-anim-time) cubic-bezier(.22,.61,.36,1) !important;
  transform: translateX(0) !important;
}

/* when first tab exists, move composition left */
.app-shell.has-idea-tabs .app-layout{
  transform: none !important;
}

.app-shell.has-idea-tabs .topbar{
  transform: translateX(var(--idea-tabs-center-shift)) !important;
}

/* rail anchored to main area, starts off-screen */

.idea-tabs-rail{
  position: absolute !important;
  top: 14px !important;
  left: calc(100% + 24px) !important;
  width: 230px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;

  opacity: 0 !important;
  transform: translateX(44px) !important;
  pointer-events: none !important;
  z-index: 999 !important;

  transition:
    opacity var(--idea-tabs-anim-time) cubic-bezier(.22,.61,.36,1),
    transform var(--idea-tabs-anim-time) cubic-bezier(.22,.61,.36,1) !important;
}

/* visible state */
.app-shell.has-idea-tabs .idea-tabs-rail{
  opacity: 1 !important;
  transform: translateX(0) !important;
  pointer-events: auto !important;
}

.idea-tabs-rail__stack{
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
}

.idea-mini-tab{
  position: relative !important;
  width: 100% !important;
  min-height: 74px !important;
  padding: 14px 18px 14px 20px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(216,224,235,.92) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,255,.94)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 10px 24px rgba(16,24,40,.05) !important;
  text-align: left !important;
}

.idea-mini-tab::before{
  content: "" !important;
  position: absolute !important;
  top: 14px !important;
  bottom: 14px !important;
  left: 0 !important;
  width: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #4c79ff 0%, #2457f5 60%, #1f49d9 100%) !important;
  box-shadow: 0 0 18px rgba(36,87,245,.18) !important;
}

.idea-mini-tab__eyebrow{
  display: block !important;
  margin-bottom: 6px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  color: #2457f5 !important;
}

.idea-mini-tab__title{
  display: block !important;
  font-size: 18px !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
  color: #101828 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* =========================================
   TOPBAR: EXPAND FROM CENTER ONLY
   ========================================= */

/* keep wrapper centered */

/* animate width only */

/* default width */
.app-shell .topbar{
  width: min(var(--max-width), calc(100% - 48px)) !important;
  transform: none !important;
}

/* expanded width when tabs exist */
.app-shell.has-idea-tabs .topbar{
  width: min(var(--layout-total-width), calc(100% - 48px)) !important;
  transform: none !important;
}




/* =========================================
   MATCH DEFAULT BUTTON TEXT TO PROCESSING TEXT
   ========================================= */

#submitIdeaButton .button__label,
#submitIdeaButton .button__char-wrap,
#submitIdeaButton > span:first-child{
  position: relative !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;

  font-family: 'Posterama', sans-serif !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  line-height: 1 !important;
  color: #ffffff !important;
}

/* make sure each falling character inherits the same look */
#submitIdeaButton .button__char{
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
}

/* =========================================================
   AUDIT BUTTON: BLUE -> BLACK AFTER LETTER FALL
   ========================================================= */

#submitIdeaButton{
  position: relative;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: 200px !important;
  min-width: 0 !important;
  height: auto !important;
  z-index: 3 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  border-radius: 0 30px 30px 0 !important;
  transform: none !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.20), transparent 30%),
    linear-gradient(180deg, var(--audit-blue-1) 0%, var(--audit-blue-2) 58%, var(--audit-blue-3) 100%);

  color: #ffffff !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 18px 34px rgba(36,87,245,.20) !important;

  transition:
    width 2s linear !important,
    border-radius .45s linear !important,
    box-shadow 4s cubic-bezier(.22,.61,.36,1) !important,
    filter 4s cubic-bezier(.22,.61,.36,1) !important;
}

#submitIdeaButton::after{
  content: none !important;
  display: none !important;
  animation: none !important;
}

#submitIdeaButton .button__color-overlay{
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  display: block !important;
  border-radius: inherit !important;
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.08), transparent 28%),
    linear-gradient(180deg, var(--audit-black-1) 0%, var(--audit-black-2) 56%, var(--audit-black-3) 100%) !important;
  opacity: 0;
}

#submitIdeaButton.is-color-cycling .button__color-overlay{
  animation: auditBlackCycle 20s cubic-bezier(.22,.61,.36,1) infinite !important;
}

@keyframes auditBlackCycle{
  0%   { opacity: 0; }
  25%  { opacity: 1; }
  50%  { opacity: 1; }
  75%  { opacity: 0; }
  100% { opacity: 0; }
}

#submitIdeaButton.is-color-animating {
  background: rgb(36,87,245) !important; /* start blue */
}


#submitIdeaButton > span,
#submitIdeaButton .button__processing{
  position: relative;
  z-index: 2;
}

/* EXPANDED STATE = stay blue first */


.idea-form__field.is-processing #submitIdeaButton > span:first-child{
  opacity: 0;
  transition: opacity .18s ease;
}

#submitIdeaButton.is-processing-label-visible .button__processing{
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  animation: processingGlow 2.5s ease-in-out infinite alternate;
}



/* =========================================================
   CONSOLIDATED DUPLICATE RULES
   Base/default rules only — keep media-query overrides separately
   ========================================================= */

/* 1) .idea-form__field.is-processing #submitIdeaButton */
.idea-form__field.is-processing #submitIdeaButton{
  position: absolute;
  top: 0;
  right: 0 !important;
  bottom: 0;
  left: auto !important;
  width: 100% !important;
  border-radius: 30px !important;
  justify-content: center;

  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.20), transparent 30%),
    linear-gradient(180deg, var(--audit-blue-1) 0%, var(--audit-blue-2) 58%, var(--audit-blue-3) 100%) !important;

  color: #fff !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 18px 34px rgba(36,87,245,.20) !important;

  filter: none !important;
}


.idea-form__field.is-processing.is-dark-phase #submitIdeaButton{
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.20), transparent 30%),
    linear-gradient(180deg, var(--audit-blue-1) 0%, var(--audit-blue-2) 58%, var(--audit-blue-3) 100%) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 24px 48px rgba(0,0,0,.28),
    0 10px 26px rgba(0,0,0,.18) !important;

  filter: saturate(.92) contrast(1.04) brightness(.90) !important;
}

/* 2) .journey-step */
.journey-step{
  position: relative !important;
  z-index: 1;
  cursor: pointer;
  user-select: none;
  transform-origin: center;
  min-height: 190px !important;
  height: 100% !important;
  padding: 18px 18px 18px !important;
  border-radius: 20px !important;
  overflow: visible !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(248,250,255,.92) 100%);
  border: 1px solid rgba(216,224,235,.94);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 14px 30px rgba(16,24,40,.05);
  transition:
    transform .28s cubic-bezier(.22,.61,.36,1),
    box-shadow .28s cubic-bezier(.22,.61,.36,1),
    border-color .28s cubic-bezier(.22,.61,.36,1),
    background .28s cubic-bezier(.22,.61,.36,1);
}



/* 4) .journey-step__number */
.journey-step__number{
  position: absolute !important;
  top: -14px !important;
  left: 14px !important;
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  border-radius: 10px !important;
  display: grid;
  place-items: center;
  font-size: 13px !important;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #2457f5;
  background:
    linear-gradient(180deg, #f7faff 0%, #edf3ff 100%);
  border: 1px solid rgba(36,87,245,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 12px 22px rgba(36,87,245,.12);
  transition:
    transform .28s cubic-bezier(.22,.61,.36,1),
    box-shadow .28s cubic-bezier(.22,.61,.36,1),
    background .28s cubic-bezier(.22,.61,.36,1),
    color .28s cubic-bezier(.22,.61,.36,1);
  z-index: 5 !important;
}

/* 5) #submitIdeaButton .button__processing */
#submitIdeaButton .button__processing{
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  z-index: 3 !important;
  font-family: 'Posterama', sans-serif !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  color: #ffffff !important;
  opacity: 0 !important;
  transform: translateY(8px) scale(0.96) !important;
  transition:
    opacity .5s ease,
    transform .5s cubic-bezier(.22,.61,.36,1);
  pointer-events: none !important;
  white-space: nowrap !important;
}

/* 6) .idea-form__field */
.idea-form__field{
  position: relative !important;
  display: grid;
  grid-template-columns: minmax(0,1fr) 200px !important;
  width: 100% !important;
  min-height: 112px !important;
  border-radius: 30px;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(249,251,255,.94) 100%);
  border: 1px solid rgba(216,224,235,.96);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 24px 48px rgba(16,24,40,.06);
  transition:
    transform .32s var(--ease),
    box-shadow .32s var(--ease),
    border-color .32s var(--ease);
}

/* 7) .journey-step__content h3 */
.journey-step__content h3{
  margin: 0 0 10px !important;
  font-size: 30px !important;
  line-height: .96 !important;
  letter-spacing: -.055em !important;
  font-weight: 900 !important;
  color: #0f172a;
  max-width: 10ch !important;
}

/* 8) .journey-step__content p */
.journey-step__content p{
  margin: 0 !important;
  font-size: 22px !important;
  line-height: 1.28 !important;
  font-weight: 600 !important;
  color: #667085 !important;
  max-width: 12ch !important;
}

/* 9) .landing-title */
.landing-title{
  margin: 0 0 18px !important;
  max-width: 980px !important;
  width: 100% !important;
  font-size: clamp(44px, 5.4vw, 72px) !important;
  line-height: .94 !important;
  letter-spacing: -.06em !important;
  font-weight: 900;
  color: #0f172a;
  text-wrap: balance;
}

/* 10) .morph-showcase */
.morph-showcase{
  position: relative;
  isolation: isolate;
  margin: 18px 0 22px;
  margin-top: 28px;
  margin-bottom: 22px !important;
}

/* 11) .journey-section */
.journey-section{
  position: relative;
  margin-top: 8px !important;
  padding: 10px 8px 8px !important;
}

/* 12) .journey-section h2 */
.journey-section h2{
  margin: 0 0 26px !important;
  text-align: center;
  font-size: 26px !important;
  line-height: 1.05 !important;
  letter-spacing: -.04em !important;
  font-weight: 900;
  color: #0f172a;
}

/* 13) .journey-steps */
.journey-steps{
  --progress-line-left: 9%;
  --progress-line-right: 9%;
  position: relative;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
  isolation: isolate;
  min-height: auto !important;
  padding-top: 18px !important;
}

/* 14) .partner-strip.partner-strip--bottom */
.partner-strip.partner-strip--bottom{
  margin-top: 18px !important;
  padding: 12px 0 2px !important;
  width: 100%;
}

/* 15) .topbar */
.topbar{
  position: relative;
  width: min(var(--max-width), calc(100% - 48px)) !important;
  height: 75px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 14px;
  border-radius: 18px;
  border: 1px solid rgba(90,120,255,0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(246,249,255,0.88));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 8px 24px rgba(70,100,255,0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: auto;
  transition:
    width 2s cubic-bezier(.22,.61,.36,1) !important;
  transform: none !important;
}



/* =========================================================
   CONSOLIDATED DUPLICATE RULES — JOURNEY + SUBMIT EXTRAS
   ========================================================= */

/* 1) .journey-step::before */
.journey-step::before{
  content: "";
  position: absolute;
  top: -1px;
  left: 18px;
  right: 18px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(36,87,245,0),
    rgba(36,87,245,.55),
    rgba(36,87,245,0)
  );
  opacity: .7;
}

/* 2) .journey-step::after */
.journey-step::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at top center, rgba(36,87,245,.08), transparent 34%);
  transition:
    opacity .32s cubic-bezier(.22,.61,.36,1),
    box-shadow .32s cubic-bezier(.22,.61,.36,1),
    border-color .32s cubic-bezier(.22,.61,.36,1);
  box-shadow:
    inset 0 0 0 1px rgba(36,87,245,.14),
    0 18px 36px rgba(36,87,245,.08);
}

/* 3) .journey-step:hover */
.journey-step:hover{
  transform: translateY(-4px);
  background: rgba(255,255,255,.92);
  border-color: rgba(36,87,245,.14);
  box-shadow: 0 18px 34px rgba(16,24,40,.08);
}



/* 5) #submitIdeaButton.is-processing-label-visible .button__processing */
#submitIdeaButton.is-processing-label-visible .button__processing{
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  animation: processingGlow 2.5s ease-in-out infinite alternate;
}



/* =========================================================
   CONSOLIDATED DUPLICATE RULES — SIDEBAR / LAYOUT / BANDS / HERO
   Base/default rules only — keep media-query overrides separately
   ========================================================= */

/* =========================
   SIDEBAR FAMILY
   ========================= */

.sidebar{
  position: sticky;
  top: 104px;
  align-self: start;
  min-height: calc(100vh - 134px);
  height: calc(100vh - 134px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.sidebar__nav{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  min-height: 0;
}

.sidebar-step{
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  display: block;
  padding: 0;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(216,224,235,.9);
  background: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 10px 24px rgba(16,24,40,.04);
  transition:
    transform .28s cubic-bezier(.22,.61,.36,1),
    box-shadow .28s cubic-bezier(.22,.61,.36,1),
    border-color .28s cubic-bezier(.22,.61,.36,1);
}

.sidebar-step:hover{
  transform: translateY(-2px) scale(1.01);
  border-color: rgba(36,87,245,.18);
  box-shadow:
    0 22px 34px rgba(36,87,245,.10),
    0 0 0 4px rgba(36,87,245,.04);
}

.sidebar-step.is-active{
  position: relative;
  border: 4px solid #2457f5 !important;
  box-shadow:
    0 0 0 4px rgba(36,87,245,.14),
    0 20px 42px rgba(36,87,245,.18),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

.sidebar-step__media{
  position: absolute;
  inset: 0;
  background-size: 97% auto;
  background-position: center;
  background-repeat: no-repeat;
  transition:
    transform .35s cubic-bezier(.22,.61,.36,1),
    filter .35s cubic-bezier(.22,.61,.36,1),
    opacity .35s cubic-bezier(.22,.61,.36,1);
}

.sidebar-step__overlay{
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.22);
  transition: background .28s ease, opacity .28s ease;
}

/* =========================
   LANDING / LAYOUT
   ========================= */

.topbar-wrap{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  width: 100%;
  display: flex !important;
  justify-content: center !important;
  padding-top: 8px;
  padding-bottom: 1px;
  pointer-events: none;
}

.app-shell{
  min-height: 100vh;
  position: relative;
  padding-top: 86px;
}

.main-content{
  min-width: 0;
  position: relative !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 24px;
}

.screen--landing{
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 134px);
  padding: 42px 38px 30px !important;
}

.landing-hero__content{
  position: relative;
  z-index: 1;
  max-width: 100% !important;
  width: 100% !important;
}

.idea-form{
  margin-top: 34px !important;
  width: 100% !important;
  max-width: 100% !important;
}

.partner-strip{
  width: 100%;
  margin-top: 28px;
  padding: 22px 10px 0;
}

.partner-strip > p{
  margin: 0 0 14px !important;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* =========================
   LOWER LANDING / REPORT BANDS
   ========================= */

.landing-value-band{
  margin-top: 6px !important;
  padding: 6px 0 2px !important;
}

.landing-value-band__intro{
  text-align: center;
  max-width: 760px;
  margin: 0 auto 10px !important;
}

.landing-insights-band{
  margin-top: 2px !important;
  padding: 2px 0 0 !important;
  animation: screenFade .35s var(--ease);
}

.landing-insights-band__intro{
  text-align: center;
  max-width: 760px;
  margin: 0 auto 12px !important;
}

.landing-category-cards{
  margin-top: 6px !important;
  padding: 0 0 0 !important;
  animation: screenFade .35s var(--ease);
}

.landing-category-cards__intro{
  text-align: center;
  max-width: 820px;
  margin: 0 auto 14px !important;
}

/* =========================
   HERO / MORPH
   ========================= */

.morph-showcase__stage{
  position: relative;
  z-index: 2;
  min-height: 420px;
  border-radius: 34px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.92), rgba(236,241,250,.96) 58%, rgba(224,231,243,.98) 100%);
  border: 1px solid rgba(214,223,238,.95);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -18px 40px rgba(171,184,210,.14),
    0 24px 60px rgba(16,24,40,.08);
  padding: 20px;
}

.hero-poster-layer{
  position: absolute;
  inset: 20px;
  z-index: 9;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  background: #ffffff;
  transition:
    opacity .3s ease,
    visibility .3s ease;
}

.is-processing .journey-card,
.is-processing .sidebar-step,
.is-processing .hero-visual,
.is-processing [data-hoverable] {
  pointer-events: none !important;
}

.hero-poster-layer__image{
  width: 95%;
  height: auto;

  max-height: 95%;
  object-fit: contain;
  object-position: center;

  border-radius: 22px;
  display: block;
}
.processing-overlay{
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 0;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* =========================
   SUBMIT-BUTTON SYSTEM
   ========================= */

.idea-form__field.is-processing input{
  opacity: 0 !important;
  transform: translateX(-10px) !important;
  pointer-events: none !important;
  transition:
    opacity .42s ease,
    transform .42s cubic-bezier(.22,.61,.36,1);
}

#submitIdeaButton.is-text-gone .button__char{
  opacity: 0 !important;
  transform: translateY(22px) rotate(18deg) !important;
  filter: blur(1px) !important;
}




/* ----- INSIGHTS + CATEGORY CARDS ----- */
.landing-insights-band__intro,
.landing-category-cards__intro{
  text-align: center !important;
}

.landing-insights-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.insight-chart-card{
  min-height: 154px !important;
  padding: 16px 16px 14px !important;
  border-radius: 18px !important;
}

.insight-chart-card__top{
  margin-bottom: 12px !important;
}

.insight-chart-card__label{
  font-size: 10px !important;
}

.insight-chart-card__top strong{
  font-size: 18px !important;
}

.insight-bar{
  height: 10px !important;
  margin-bottom: 12px !important;
}

.insight-chart-card p{
  font-size: 12px !important;
  line-height: 1.55 !important;
}


/* =========================================================
   REPORT AREA — CLEAN LANDING-STYLE FINAL PASS
   Put this at the VERY END of idea-to-business.css
   ========================================================= */

/* ---------- softer score palette ---------- */
:root{
  --report-good:#2d6cdf;
  --report-good-soft:#f3f7ff;
  --report-good-line:rgba(45,108,223,.14);

  --report-mid:#6f8ecf;
  --report-mid-soft:#f7f9fe;
  --report-mid-line:rgba(111,142,207,.14);

  --report-warn:#8b95a7;
  --report-warn-soft:#fafbfe;
  --report-warn-line:rgba(139,149,167,.16);

  --report-risk:#6b7280;
  --report-risk-soft:#f8fafc;
  --report-risk-line:rgba(107,114,128,.16);
}

/* ---------- tighten entire lower report area ---------- */
.landing-insights-band{
  margin-top: 8px !important;
  padding: 4px 0 0 !important;
}

.landing-category-cards{
  margin-top: 10px !important;
  padding: 0 !important;
}

.landing-insights-band__intro{
  max-width: 760px !important;
  margin: 0 auto 10px !important;
}

.landing-category-cards__intro{
  max-width: 780px !important;
  margin: 0 auto 12px !important;
}

.landing-insights-band__intro h3,
.landing-category-cards__intro h2{
  font-size: 22px !important;
  line-height: 1.06 !important;
  letter-spacing: -.045em !important;
  margin-bottom: 6px !important;
}

.landing-insights-band__intro p,
.landing-category-cards__intro p{
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: #667085 !important;
  max-width: 640px !important;
}

/* ---------- 3 insight cards ---------- */
.landing-insights-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

.insight-chart-card{
  min-height: 140px !important;
  height: 100% !important;
  padding: 14px 14px 12px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,251,255,.95)) !important;
  border: 1px solid rgba(216,224,235,.88) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 8px 20px rgba(16,24,40,.035) !important;
  overflow: hidden !important;
}

.insight-chart-card::before{
  width: 3px !important;
  top: 12px !important;
  bottom: 12px !important;
  left: 0 !important;
  border-radius: 999px !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

.insight-chart-card:hover{
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 14px 24px rgba(16,24,40,.05) !important;
}

.insight-chart-card__top{
  margin-bottom: 10px !important;
  align-items: center !important;
}

.insight-chart-card__label{
  font-size: 9px !important;
  letter-spacing: .12em !important;
  font-weight: 900 !important;
}

.insight-chart-card__top strong{
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
}

.insight-bar{
  height: 8px !important;
  margin-bottom: 10px !important;
  background: linear-gradient(180deg, rgba(231,236,243,.9), rgba(223,230,240,.84)) !important;
}

.insight-bar__fill{
  box-shadow: none !important;
  background: linear-gradient(90deg, #9db8ff 0%, #5d86ff 45%, #2457f5 100%) !important;
}

.insight-bar--risk .insight-bar__fill{
  background: linear-gradient(90deg, #cfd6e4 0%, #9ca7bb 55%, #667085 100%) !important;
}

.insight-chart-card p{
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  color: #667085 !important;

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

/* subtle tone states */
.insight-chart-card.metric-good{
  background: linear-gradient(180deg, #ffffff, var(--report-good-soft)) !important;
  border-color: var(--report-good-line) !important;
}
.insight-chart-card.metric-good::before{ background: var(--report-good) !important; }

.insight-chart-card.metric-okay{
  background: linear-gradient(180deg, #ffffff, var(--report-mid-soft)) !important;
  border-color: var(--report-mid-line) !important;
}
.insight-chart-card.metric-okay::before{ background: var(--report-mid) !important; }

.insight-chart-card.metric-fair{
  background: linear-gradient(180deg, #ffffff, var(--report-warn-soft)) !important;
  border-color: var(--report-warn-line) !important;
}
.insight-chart-card.metric-fair::before{ background: var(--report-warn) !important; }

.insight-chart-card.metric-bad{
  background: linear-gradient(180deg, #ffffff, #fbfcff) !important;
  border-color: rgba(203,213,225,.75) !important;
}
.insight-chart-card.metric-bad::before{ background: #94a3b8 !important; }

/* ---------- 5 category cards ---------- */
.landing-category-cards__grid{
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

.landing-category-card{
  min-height: 158px !important;
  height: 100% !important;
  padding: 13px 13px 11px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,251,255,.94)) !important;
  border: 1px solid rgba(216,224,235,.86) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 8px 18px rgba(16,24,40,.032) !important;
  overflow: hidden !important;
}

.landing-category-card::before{
  width: 3px !important;
  top: 12px !important;
  bottom: 12px !important;
  left: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  background: #c7d2e5 !important;
}

.landing-category-card:hover{
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 14px 22px rgba(16,24,40,.045) !important;
  border-color: rgba(200,210,226,.95) !important;
}

.landing-category-card__eyebrow{
  margin-bottom: 8px !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: .11em !important;
  color: #2457f5 !important;
}

.landing-category-card__score{
  margin-bottom: 8px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
  color: #101828 !important;
}

.landing-category-card p{
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  color: #667085 !important;

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

/* subtle card tones */
.landing-category-card.metric-good{
  background: linear-gradient(180deg, #ffffff, var(--report-good-soft)) !important;
  border-color: var(--report-good-line) !important;
}
.landing-category-card.metric-good::before{ background: var(--report-good) !important; }

.landing-category-card.metric-okay{
  background: linear-gradient(180deg, #ffffff, var(--report-mid-soft)) !important;
  border-color: var(--report-mid-line) !important;
}
.landing-category-card.metric-okay::before{ background: var(--report-mid) !important; }

.landing-category-card.metric-fair{
  background: linear-gradient(180deg, #ffffff, var(--report-warn-soft)) !important;
  border-color: var(--report-warn-line) !important;
}
.landing-category-card.metric-fair::before{ background: var(--report-warn) !important; }

.landing-category-card.metric-bad{
  background: linear-gradient(180deg, #ffffff, #fbfcff) !important;
  border-color: rgba(203,213,225,.72) !important;
}
.landing-category-card.metric-bad::before{ background: #94a3b8 !important; }

/* ---------- remove loud hover recolor ---------- */
.landing-category-card:hover .landing-category-card__score,
.landing-category-card:hover .landing-category-card__eyebrow{
  color: inherit !important;
}

/* ---------- responsive ---------- */
@media (max-width: 1180px){
  .landing-insights-grid{
    grid-template-columns: 1fr !important;
  }

  .landing-category-cards__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 700px){
  .landing-category-cards__grid{
    grid-template-columns: 1fr !important;
  }
}

.landing-category-cards__grid{
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.landing-category-card{
  min-height: 170px !important;
  padding: 14px 14px 12px !important;
  border-radius: 18px !important;
}

.landing-category-card__eyebrow{
  margin-bottom: 10px !important;
  font-size: 10px !important;
}

.landing-category-card__score{
  margin-bottom: 10px !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

.landing-category-card p{
  font-size: 12px !important;
  line-height: 1.55 !important;
}

/* ----- RESPONSIVE ----- */


@media (max-width: 700px){
  .landing-category-cards__grid{
    grid-template-columns: 1fr !important;
  }

  .hero-report-metrics{
    grid-template-columns: 1fr !important;
  }
}






/* =========================================================
   FINAL REPORT POLISH OVERRIDE
   PUT THIS AT THE VERY END OF idea-to-business.css
   ========================================================= */

/* ---------- 1) more top breathing room for both report areas ---------- */
.landing-insights-band{
  margin-top: 24px !important;
  padding-top: 10px !important;
}

.landing-category-cards{
  margin-top: 24px !important;
  padding-top: 10px !important;
}

/* ---------- 2) make the 3 insight cards taller + easier to read ---------- */
.landing-insights-grid{
  gap: 16px !important;
}

.insight-chart-card{
  min-height: 220px !important;
  padding: 22px 22px 20px !important;
  border-radius: 24px !important;
}

.insight-chart-card__top{
  margin-bottom: 18px !important;
}

.insight-chart-card__label{
  font-size: 13px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: .10em !important;
}

.insight-chart-card__top strong{
  font-size: 30px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

.insight-bar{
  height: 12px !important;
  margin-bottom: 16px !important;
  border-radius: 999px !important;
}

.insight-chart-card p{
  font-size: 15px !important;
  line-height: 1.65 !important;
  -webkit-line-clamp: 6 !important;
}

/* ---------- 3) make the 5 category cards taller + easier to read ---------- */
.landing-category-cards__grid{
  gap: 16px !important;
}

.landing-category-card{
  min-height: 240px !important;
  padding: 20px 20px 18px !important;
  border-radius: 24px !important;
}

.landing-category-card__eyebrow{
  font-size: 13px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: .10em !important;
  margin-bottom: 14px !important;
}

.landing-category-card__score{
  font-size: 32px !important;
  line-height: 1 !important;
  margin-bottom: 14px !important;
  font-weight: 900 !important;
}

.landing-category-card p{
  font-size: 15px !important;
  line-height: 1.65 !important;
  -webkit-line-clamp: 7 !important;
}

/* ---------- 4) softer, landing-style tones (remove ugly orange feeling) ---------- */
.insight-chart-card,
.landing-category-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,255,.94)) !important;
  border-color: rgba(216,224,235,.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 10px 24px rgba(16,24,40,.04) !important;
}

.insight-chart-card::before,
.landing-category-card::before{
  width: 3px !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* good */
.insight-chart-card.metric-good,
.landing-category-card.metric-good{
  background: linear-gradient(180deg, #ffffff, #f5f9ff) !important;
  border-color: rgba(59,130,246,.16) !important;
}
.insight-chart-card.metric-good::before,
.landing-category-card.metric-good::before{
  background: #4f7cff !important;
}

/* okay */
.insight-chart-card.metric-okay,
.landing-category-card.metric-okay{
  background: linear-gradient(180deg, #ffffff, #f8faff) !important;
  border-color: rgba(120,144,186,.16) !important;
}
.insight-chart-card.metric-okay::before,
.landing-category-card.metric-okay::before{
  background: #7f95bd !important;
}

/* fair */
.insight-chart-card.metric-fair,
.landing-category-card.metric-fair{
  background: linear-gradient(180deg, #ffffff, #fbfcff) !important;
  border-color: rgba(148,163,184,.18) !important;
}
.insight-chart-card.metric-fair::before,
.landing-category-card.metric-fair::before{
  background: #94a3b8 !important;
}

/* bad */
.insight-chart-card.metric-bad,
.landing-category-card.metric-bad{
  background: linear-gradient(180deg, #ffffff, #fcfcfd) !important;
  border-color: rgba(203,213,225,.9) !important;
}
.insight-chart-card.metric-bad::before,
.landing-category-card.metric-bad::before{
  background: #cbd5e1 !important;
}

/* bars stay subtle blue/gray */
.insight-bar__fill{
  background: linear-gradient(90deg, #9eb8ff 0%, #5b84ff 55%, #2457f5 100%) !important;
  box-shadow: none !important;
}

.insight-bar--risk .insight-bar__fill{
  background: linear-gradient(90deg, #cfd8e6 0%, #97a6bc 55%, #667085 100%) !important;
  box-shadow: none !important;
}








/* =========================================================
   REPORT HOVER PANEL
   ========================================================= */

.report-hover-panel{
  position: fixed; /* ← key change */
  inset: 0;
  z-index: 9999;

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

  padding: clamp(24px, 5vw, 80px);

  /* glass white overlay */
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(245,248,255,.92));

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

  opacity: 0;
  pointer-events: none;

  transition:
    opacity .35s cubic-bezier(.22,.61,.36,1);
}

/* visible state */
.report-hover-panel.is-visible{
  opacity: 1;
  pointer-events: auto;
}

.report-hover-panel.is-visible{
  display: flex;
}

.report-hover-panel__inner{
  max-width: min(1100px, 90vw);
  width: 100%;

  display: flex;
  flex-direction: column;
  gap: 18px;

  padding: clamp(28px, 4vw, 56px);

  border-radius: 32px;

  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(240,245,255,.96));

  border: 1px solid rgba(36,87,245,.12);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 40px 100px rgba(16,24,40,.12),
    0 0 60px rgba(36,87,245,.10);

  transform: scale(.96) translateY(10px);
  transition:
    transform .35s cubic-bezier(.22,.61,.36,1);
}

/* subtle entrance animation */
.report-hover-panel.is-visible .report-hover-panel__inner{
  transform: scale(1) translateY(0);
}

.report-hover-panel__eyebrow{
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(36,87,245,.65);
  font-weight: 700;
}

.report-hover-panel__text{
  font-size: clamp(28px, 3vw, 44px); /* BIG readable */
  line-height: 1.35;

  font-weight: 800;
  letter-spacing: -0.04em;

  color: #1a2a5a;

  max-width: 26ch; /* Apple-style readable width */
  text-wrap: balance;
}

.report-hover-panel__inner::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  background:
    radial-gradient(circle at top left, rgba(36,87,245,.08), transparent 35%),
    radial-gradient(circle at bottom right, rgba(120,160,255,.06), transparent 40%);
}

.report-hover-panel__inner{
  position: relative;
  overflow: hidden;
}

body.message-focus *:not(.report-hover-panel):not(.report-hover-panel *){
  filter: blur(6px) brightness(.9);
  transition: filter .3s ease;
}

.report-hover-panel__text{
  font-size: 22px;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #2457f5;
  text-wrap: balance;
}

@media (max-width: 900px){
  .report-hover-panel{
    inset: 14px 14px 100px 14px;
  }

  .report-hover-panel__inner{
    padding: 20px 20px 18px;
    border-radius: 22px;
  }

  .report-hover-panel__text{
    font-size: 18px;
  }
}

/* =========================================
   DATA CARD — FULL TEXT TAKEOVER
   ========================================= */

.report-hover-panel__inner,
.landing-category-card,
.insight-chart-card,
.mission-action-card{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.report-hover-panel__text,
.landing-category-card p,
.insight-chart-card p,
.mission-action-card p{
  max-width: none !important;
  width: 100% !important;
}

.mission-action-card__label,
.landing-category-card__eyebrow,
.insight-chart-card__label{
  font-size: 13px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
}

/* SMALL CARDS ON SCREEN */
.mission-action-card p,
.landing-category-card p,
.insight-chart-card p{
   font-family: 'Posterama Light', sans-serif;

  font-size: clamp(14px, 1vw, 17px) !important;
  line-height: 1.55 !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: #5f6b85 !important;
  text-wrap: pretty !important;
}


.mission-action-card,
.landing-category-card,
.insight-chart-card{
  padding: 28px 30px 26px !important;
  border-radius: 28px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,247,255,.94)) !important;
  border: 1px solid rgba(36,87,245,.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 18px 40px rgba(36,87,245,.08),
    0 24px 60px rgba(16,24,40,.06) !important;
  overflow: hidden !important;
  position: relative !important;
}


.mission-action-card::after,
.landing-category-card::after,
.insight-chart-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(circle at top right, rgba(78,124,255,.12), transparent 30%),
    radial-gradient(circle at bottom left, rgba(255,255,255,.35), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.24), transparent 45%);
}

.mission-actions{
  grid-template-columns: 1fr !important;
  gap: 18px !important;
}

/* =========================================
   INSIGHT CARDS — PREMIUM POP VERSION
   ========================================= */

.landing-insights-grid{
  gap: 20px !important;
}

.insight-chart-card{
  position: relative !important;
  min-height: 235px !important;
  padding: 22px 22px 20px !important;
  border-radius: 26px !important;
  overflow: hidden !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(244,248,255,.95)) !important;

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

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 18px 40px rgba(36,87,245,.08),
    0 24px 50px rgba(16,24,40,.06) !important;

  transition:
    transform .28s cubic-bezier(.22,.61,.36,1),
    box-shadow .28s cubic-bezier(.22,.61,.36,1),
    border-color .28s cubic-bezier(.22,.61,.36,1) !important;
}

/* glossy light */
.insight-chart-card::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at top right, rgba(78,124,255,.14), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.28), transparent 42%);
}

/* stronger left accent */
.insight-chart-card::before{
  content: "" !important;
  position: absolute !important;
  top: 18px !important;
  bottom: 18px !important;
  left: 0 !important;
  width: 5px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #8db0ff 0%, #2457f5 100%) !important;
  box-shadow: 0 0 20px rgba(36,87,245,.16) !important;
  opacity: 1 !important;
}

/* hover */
.insight-chart-card:hover{
  transform: translateY(-6px) !important;
  border-color: rgba(36,87,245,.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 26px 50px rgba(36,87,245,.12),
    0 20px 40px rgba(16,24,40,.08) !important;
}

/* top row */
.insight-chart-card__top{
  position: relative;
  z-index: 2;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-bottom: 18px !important;
}

/* label */
.insight-chart-card__label{
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: #2457f5 !important;
}

/* big result */
.insight-chart-card__top strong{
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: 38px !important;
  line-height: .95 !important;
  font-weight: 900 !important;
  letter-spacing: -.06em !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 10px rgba(36,87,245,.05);
}

/* bar shell */
.insight-bar{
  position: relative;
  z-index: 2;
  height: 12px !important;
  margin-bottom: 18px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(223,230,240,.9), rgba(214,222,235,.84)) !important;
  box-shadow:
    inset 0 1px 2px rgba(16,24,40,.06),
    0 1px 0 rgba(255,255,255,.7) !important;
}

/* bar fill */
.insight-bar__fill{
  border-radius: 999px !important;
  background:
    linear-gradient(90deg, #9eb8ff 0%, #5c85ff 45%, #2457f5 100%) !important;
  box-shadow:
    0 6px 18px rgba(36,87,245,.20),
    inset 0 1px 0 rgba(255,255,255,.30) !important;
}

/* body text */
.insight-chart-card p{
  position: relative;
  z-index: 2;
  margin: 0 !important;

  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.58 !important;
  font-weight: 500 !important;
  letter-spacing: -.02em !important;
  color: #5f6b85 !important;

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

/* stronger color states */
.insight-chart-card.metric-good{
  background: linear-gradient(180deg, #ffffff, #f3f7ff) !important;
  border-color: rgba(79,124,255,.18) !important;
}
.insight-chart-card.metric-good::before{
  background: linear-gradient(180deg, #8eb0ff 0%, #3568f5 100%) !important;
}

.insight-chart-card.metric-okay{
  background: linear-gradient(180deg, #ffffff, #f7f9fe) !important;
  border-color: rgba(111,142,207,.18) !important;
}
.insight-chart-card.metric-okay::before{
  background: linear-gradient(180deg, #9dafd6 0%, #6f8ecf 100%) !important;
}

.insight-chart-card.metric-fair{
  background: linear-gradient(180deg, #ffffff, #fbfcff) !important;
  border-color: rgba(148,163,184,.20) !important;
}
.insight-chart-card.metric-fair::before{
  background: linear-gradient(180deg, #b4c0d3 0%, #94a3b8 100%) !important;
}

.insight-chart-card.metric-bad{
  background: linear-gradient(180deg, #ffffff, #fcfcfd) !important;
  border-color: rgba(203,213,225,.95) !important;
}
.insight-chart-card.metric-bad::before{
  background: linear-gradient(180deg, #d6deea 0%, #b8c4d6 100%) !important;
}


.landing-category-card p{
  opacity: 0;
  pointer-events: none;
  height: 0;
  overflow: hidden;
  margin: 0 !important;
}


.score--low {
  color: #FF4D4F !important;   /* red */
}

.score--mid {
  color: #FF9F1C !important;   /* orange */
}

.score--high {
  color: #2F6BFF !important;   /* your blue */
}


.hero-main-line.score-low{
  color:#ef4444 !important;
}

.hero-main-line.score-mid{
  color:#f79009 !important;
}

.hero-main-line.score-high{
  color:#2457f5 !important;
}









/* =========================================================
   SEGMENT 2 — REPORT DASHBOARD
   Paste at the VERY END of idea-to-business.css
   ========================================================= */

/* =========================================================
   FINAL REPORT DASHBOARD — SCREENSHOT MATCH
   Paste at the VERY END
   ========================================================= */

.report-dashboard{

  padding: 0;
  animation: screenFade .35s var(--ease);
}

.report-dashboard__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}



.report-panel{
  position: relative;
  min-height: 250px;
  padding: 22px 24px 20px;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,255,.95));
  border: 1px solid rgba(223,229,240,.98);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 6px 18px rgba(16,24,40,.035);
}

.report-panel::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

.report-panel__header{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-bottom:18px;
}

.report-panel__heading h3{
  margin:0 0 4px;
  font-size:18px;
  line-height:1.08;
  letter-spacing:-.03em;
  font-weight:900;
  color:#101828;
}

.report-panel__heading p{
  margin:0;
  font-size:14px;
  line-height:1.45;
  color:#42526b;
  font-weight:600;
}

.report-panel__icon{
  width:58px;
  height:58px;
  border-radius:50%;
  flex:0 0 58px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg, #f7faff, #eef3ff);
  border:1px solid rgba(36,87,245,.12);
  color:#2457f5;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98);
}

.report-panel__icon span{
  font-size:28px;
  line-height:1;
  font-weight:900;
}

.report-panel--competition,
.report-panel--steps,
.report-panel--financials{
  min-height:382px;
}

.report-panel--flags,
.report-panel--cta,
.report-panel--effort{
  min-height:210px;
}

/* Competition */
.report-list{
  display:flex;
  flex-direction:column;
}

.report-list__item{
  display:flex;
  gap:14px;
  padding:22px 0;
  border-top:1px solid rgba(231,236,243,.95);
}

.report-list__item:first-child{
  border-top:0;
  padding-top:0;
}

.report-list__num{
  width:48px;
  height:48px;
  border-radius:50%;
  flex:0 0 48px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg, #f4f6fb, #edf1f7);
  border:1px solid rgba(223,229,240,.95);
  color:#2457f5;
  font-size:18px;
  font-weight:900;
}

.report-list__copy strong{
  display:block;
  margin-bottom:5px;
  font-size:16px;
  line-height:1.2;
  letter-spacing:-.02em;
  font-weight:800;
  color:#101828;
}

.report-list__copy p{
  margin:0;
  font-size:14px;
  line-height:1.55;
  color:#42526b;
  font-weight:600;
}

/* Next Steps */
.report-step-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.report-step{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:12px 0;
}

.report-step + .report-step{
  border-top:1px solid rgba(231,236,243,.95);
}

.report-step__num{
  width:54px;
  height:54px;
  border-radius:14px;
  flex:0 0 54px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg, #2f63ff 0%, #2457f5 100%);
  color:#fff;
  font-size:28px;
  font-weight:900;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.18),
    0 10px 20px rgba(36,87,245,.16);
}

.report-step__copy strong{
  display:block;
  margin-bottom:4px;
  font-size:16px;
  line-height:1.2;
  letter-spacing:-.02em;
  font-weight:800;
  color:#101828;
}

.report-step__copy p{
  margin:0;
  font-size:14px;
  line-height:1.55;
  color:#42526b;
  font-weight:600;
}

.report-link{
  margin-top:16px;
  margin-left:68px;
  border:0;
  padding:0;
  background:transparent;
  color:#2457f5;
  font-size:15px;
  font-weight:800;
  letter-spacing:-.01em;
}

/* Financial + effort rows */
.report-metric-row{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:18px 0;
  border-top:1px solid rgba(231,236,243,.95);
}

.report-metric-row:first-of-type{
  border-top:0;
  padding-top:0;
}

.report-metric-row__icon{
  width:42px;
  height:42px;
  border-radius:50%;
  flex:0 0 42px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg, #f7faff, #eef3ff);
  border:1px solid rgba(36,87,245,.10);
  color:#2457f5;
  font-size:20px;
  font-weight:900;
}

.report-metric-row__copy{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.report-metric-row__copy span,
.report-metric-row--split span{
  font-size:14px;
  line-height:1.35;
  color:#42526b;
  font-weight:700;
}

.report-metric-row__copy strong,
.report-metric-row--split strong{
  font-size:18px;
  line-height:1.2;
  letter-spacing:-.03em;
  color:#101828;
  font-weight:900;
}

.report-metric-row--split{
  align-items:center;
  justify-content:space-between;
}

.report-metric-row__left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

/* Flags */
.report-panel--flags{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.flag-row{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:16px 0;
}

.flag-row + .flag-row{
  border-top:1px solid rgba(231,236,243,.95);
}

.flag-row__icon{
  width:42px;
  height:42px;
  border-radius:50%;
  flex:0 0 42px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg, #f7f9f7, #eef4ef);
  border:1px solid rgba(205,219,208,.9);
  font-size:20px;
}

.flag-row--green .flag-row__icon{
  color:#2f8f5b;
}

.flag-row--red .flag-row__icon{
  color:#ef4444;
}

.flag-row__copy strong{
  display:block;
  margin-bottom:4px;
  font-size:18px;
  line-height:1.12;
  font-weight:900;
  letter-spacing:-.02em;
}

.flag-row--green .flag-row__copy strong{
  color:#2f8f5b;
}

.flag-row--red .flag-row__copy strong{
  color:#ef4444;
}

.flag-row__copy p{
  margin:0;
  font-size:15px;
  line-height:1.55;
  color:#42526b;
  font-weight:600;
}

/* CTA */
.report-panel--cta{
  background:
    radial-gradient(circle at 90% 72%, rgba(36,87,245,.10), transparent 25%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,255,.95));
}

.report-cta{
  display:grid;
  grid-template-columns:minmax(0,1fr) 148px;
  align-items:end;
  gap:10px;
  min-height:100%;
}

.report-cta__copy h3{
  margin:0 0 10px;
  max-width:9ch;
  font-size:26px;
  line-height:.98;
  letter-spacing:-.05em;
  font-weight:900;
  color:#101828;
}

.report-cta__copy p{
  margin:0 0 18px;
  max-width:22ch;
  font-size:15px;
  line-height:1.55;
  color:#42526b;
  font-weight:600;
}

.report-cta__button{
  min-height:46px !important;
  border-radius:12px !important;
  padding:0 18px !important;
  font-size:15px !important;
  font-weight:800 !important;
  box-shadow:0 10px 24px rgba(36,87,245,.18) !important;
}

.report-cta__art{
  position:relative;
  height:140px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

.report-rocket{
  position:relative;
  z-index:3;
  font-size:72px;
  line-height:1;
  filter: drop-shadow(0 12px 22px rgba(36,87,245,.14));
}

.report-cloud{
  position:absolute;
  bottom:0;
  border-radius:999px;
  background:linear-gradient(180deg, #ffffff, #eef3fb);
  box-shadow:0 12px 18px rgba(16,24,40,.04);
}

.report-cloud--1{
  width:110px;
  height:26px;
  left:20px;
  bottom:8px;
}

.report-cloud--2{
  width:78px;
  height:20px;
  right:16px;
  bottom:16px;
}

.report-cloud--3{
  width:92px;
  height:22px;
  left:52px;
  bottom:0;
}

/* Time & Effort */
.report-panel--effort .report-metric-row{
  align-items:center;
}

.report-panel--effort strong{
  text-align:right;
  min-width:110px;
}

/* responsive */
@media (max-width: 1180px){
  .report-dashboard__grid{
    grid-template-columns:1fr;
  }

  .report-panel--competition,
  .report-panel--steps,
  .report-panel--financials,
  .report-panel--flags,
  .report-panel--cta,
  .report-panel--effort{
    min-height:auto;
  }

  .report-cta{
    grid-template-columns:1fr;
  }

  .report-cta__art{
    height:110px;
    justify-content:flex-end;
  }
}

@media (max-width: 700px){
  .report-panel{
    padding:18px 18px 16px;
    border-radius:18px;
  }

  .report-link{
    margin-left:0;
  }

  .report-metric-row--split{
    flex-direction:column;
    align-items:flex-start;
  }

  .report-panel--effort strong{
    text-align:left;
    min-width:0;
  }
}



/* =========================================================
   FINAL HERO ACTIONS SYSTEM
   Keep this one. Remove old .hero-report-actions rules.
   ========================================================= */





/* =========================================================
   FINAL HERO REPORT LAYOUT
   ========================================================= */




/* =========================================================
   FINAL APPLE-CORPORATE DASHBOARD OVERRIDE
   PASTE THIS AT THE VERY END
   ========================================================= */

.report-dashboard{
  margin-top: 16px !important;
  padding: 0 !important;
}

.report-dashboard__grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

.report-panel{
  position: relative !important;
  min-height: 210px !important;
  padding: 18px 20px 18px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,250,252,.96)) !important;
  border: 1px solid #e6eaf0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 1px 2px rgba(16,24,40,.03),
    0 8px 22px rgba(16,24,40,.035) !important;
}

.report-panel::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92) !important;
}

.report-panel:hover{
  transform: none !important;
  border-color: #e6eaf0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 1px 2px rgba(16,24,40,.03),
    0 8px 22px rgba(16,24,40,.035) !important;
}

.report-panel--competition,
.report-panel--steps,
.report-panel--financials{
  min-height: 352px !important;
}

.report-panel--flags,
.report-panel--cta,
.report-panel--effort{
  min-height: 174px !important;
}

.report-panel__header{
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

.report-panel__heading h3{
  margin: 0 0 3px !important;
  font-size: 17px !important;
  line-height: 1.08 !important;
  letter-spacing: -.03em !important;
  font-weight: 800 !important;
  color: #111827 !important;
}

.report-panel__heading p{
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  color: #667085 !important;
  font-weight: 600 !important;
}

.report-panel__icon{
  width: 50px !important;
  height: 50px !important;
  flex: 0 0 50px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  background:
    linear-gradient(180deg, #f9fbff, #f2f5fb) !important;
  border: 1px solid #d8e1f0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 1px 2px rgba(16,24,40,.02) !important;
  color: #2457f5 !important;
}

.report-svg-icon{
  width: 23px;
  height: 23px;
  display: block;
  stroke: #2457f5;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.report-svg-icon--sm{
  width: 18px;
  height: 18px;
  stroke-width: 1.9;
}

/* competition */
.report-list{
  display: flex !important;
  flex-direction: column !important;
}

.report-list__item{
  display: flex !important;
  gap: 14px !important;
  padding: 19px 0 !important;
  border-top: 1px solid #e9edf3 !important;
}

.report-list__item:first-child{
  border-top: 0 !important;
  padding-top: 2px !important;
}

.report-list__num{
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  background:
    linear-gradient(180deg, #f5f7fb, #edf1f7) !important;
  border: 1px solid #dde4ef !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98) !important;
  color: #2457f5 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

.report-list__copy strong{
  display: block !important;
  margin-bottom: 5px !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  color: #111827 !important;
}

.report-list__copy p{
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.52 !important;
  color: #5f6b7a !important;
  font-weight: 600 !important;
}

/* steps */
.report-step-list{
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.report-step{
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
  padding: 16px 0 !important;
  border-top: 1px solid transparent !important;
}

.report-step + .report-step{
  border-top: 1px solid #e9edf3 !important;
}

.report-step__num{
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px !important;
  border-radius: 12px !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(180deg, #2f63ff, #2457f5) !important;
  color: #fff !important;
  font-size: 25px !important;
  font-weight: 800 !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.14),
    0 8px 16px rgba(36,87,245,.14) !important;
}

.report-step__copy strong{
  display: block !important;
  margin-bottom: 4px !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  color: #111827 !important;
}

.report-step__copy p{
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.52 !important;
  color: #5f6b7a !important;
  font-weight: 600 !important;
}

.report-link{
  margin-top: 12px !important;
  margin-left: 62px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #2457f5 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}

/* financial + effort rows */
.report-metric-row{
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
  padding: 18px 0 !important;
  border-top: 1px solid #e9edf3 !important;
}

.report-metric-row:first-of-type{
  border-top: 0 !important;
  padding-top: 2px !important;
}

.report-metric-row__icon,
.flag-row__icon{
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  background:
    linear-gradient(180deg, #fafcff, #f1f5fb) !important;
  border: 1px solid #dde4ef !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98) !important;
}

.report-metric-row__copy{
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.report-metric-row__copy span,
.report-metric-row--split span{
  font-size: 13px !important;
  line-height: 1.35 !important;
  color: #667085 !important;
  font-weight: 600 !important;
}

.report-metric-row__copy strong,
.report-metric-row--split strong{
  font-size: 16px !important;
  line-height: 1.18 !important;
  letter-spacing: -.03em !important;
  color: #111827 !important;
  font-weight: 800 !important;
}

.report-metric-row--split{
  align-items: center !important;
  justify-content: space-between !important;
}

.report-metric-row__left{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

/* flags */
.report-panel--flags{
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.flag-row{
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
  padding: 14px 0 !important;
}

.flag-row + .flag-row{
  border-top: 1px solid #e9edf3 !important;
}

.flag-row__copy strong{
  display: block !important;
  margin-bottom: 4px !important;
  font-size: 16px !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}

.flag-row--green .flag-row__copy strong{
  color: #2f8f5b !important;
}

.flag-row--red .flag-row__copy strong{
  color: #ef4444 !important;
}

.flag-row__copy p{
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: #5f6b7a !important;
  font-weight: 600 !important;
}

.flag-row--green .flag-row__icon{
  color: #2f8f5b !important;
  border-color: rgba(47,143,91,.16) !important;
  background: linear-gradient(180deg, #f8fcf9, #eef7f1) !important;
}

.flag-row--red .flag-row__icon{
  color: #ef4444 !important;
  border-color: rgba(239,68,68,.14) !important;
  background: linear-gradient(180deg, #fffafa, #fff1f2) !important;
}

/* cta */
.report-panel--cta{
  background:
    radial-gradient(circle at 88% 82%, rgba(36,87,245,.08), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,250,252,.96)) !important;
}

.report-cta{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 138px !important;
  align-items: end !important;
  gap: 8px !important;
  min-height: 100% !important;
}

.report-cta__copy h3{
  margin: 0 0 10px !important;
  max-width: 7.8ch !important;
  font-size: 22px !important;
  line-height: .98 !important;
  letter-spacing: -.05em !important;
  font-weight: 800 !important;
  color: #111827 !important;
}

.report-cta__copy p{
  margin: 0 0 16px !important;
  max-width: 20ch !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: #5f6b7a !important;
  font-weight: 600 !important;
}

.report-cta__button{
  min-height: 42px !important;
  border-radius: 10px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 18px rgba(36,87,245,.14) !important;
}

.report-cta__art{
  position: relative !important;
  height: 126px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
}

.report-rocket-illustration{
  position: relative;
  width: 60px;
  height: 110px;
  z-index: 3;
}

.report-rocket-body{
  position: absolute;
  left: 50%;
  top: 6px;
  width: 38px;
  height: 72px;
  transform: translateX(-50%);
  border-radius: 20px 20px 14px 14px;
  background: linear-gradient(180deg, #ffffff, #dce7ff 72%, #bdd0ff 100%);
  border: 1px solid rgba(36,87,245,.14);
  box-shadow: 0 8px 18px rgba(36,87,245,.10);
}

.report-rocket-body::before{
  content: "";
  position: absolute;
  left: 50%;
  top: -11px;
  transform: translateX(-50%);
  width: 22px;
  height: 20px;
  border-radius: 18px 18px 8px 8px;
  background: linear-gradient(180deg, #ffffff, #dce7ff);
  border: 1px solid rgba(36,87,245,.14);
}

.report-rocket-window{
  position: absolute;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(180deg, #2457f5, #78a6ff);
  box-shadow: 0 0 0 3px rgba(36,87,245,.08);
}

.report-rocket-fin{
  position: absolute;
  bottom: 26px;
  width: 15px;
  height: 20px;
  background: linear-gradient(180deg, #4d7eff, #2457f5);
  border-radius: 4px 4px 10px 10px;
}

.report-rocket-fin--left{
  left: 5px;
  transform: skewY(14deg) rotate(-18deg);
}

.report-rocket-fin--right{
  right: 5px;
  transform: skewY(-14deg) rotate(18deg);
}

.report-rocket-flame{
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 14px;
  height: 22px;
  border-radius: 50% 50% 70% 70%;
  background: linear-gradient(180deg, #ffd88f, #ff8c3c);
}

.report-rocket-glow{
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(36,87,245,.14), transparent 66%);
  filter: blur(4px);
}

.report-cloud{
  position: absolute !important;
  bottom: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #ffffff, #eef3fb) !important;
  box-shadow: 0 8px 14px rgba(16,24,40,.03) !important;
}

.report-cloud--1{
  width: 88px !important;
  height: 18px !important;
  left: 18px !important;
  bottom: 8px !important;
}

.report-cloud--2{
  width: 64px !important;
  height: 16px !important;
  right: 14px !important;
  bottom: 14px !important;
}

.report-cloud--3{
  width: 74px !important;
  height: 18px !important;
  left: 44px !important;
  bottom: 0 !important;
}

.report-panel--effort .report-metric-row{
  align-items: center !important;
}

.report-panel--effort strong{
  text-align: right !important;
  min-width: 94px !important;
}

.report-panel--effort .report-panel__heading p{
  display: none !important;
}

.report-panel--effort .report-panel__heading{
margin-top: 12px; 

}


@media (max-width: 1180px){
  .report-dashboard__grid{
    grid-template-columns: 1fr !important;
  }

  .report-panel--competition,
  .report-panel--steps,
  .report-panel--financials,
  .report-panel--flags,
  .report-panel--cta,
  .report-panel--effort{
    min-height: auto !important;
  }

  .report-cta{
    grid-template-columns: 1fr !important;
  }

  .report-cta__art{
    height: 110px !important;
    justify-content: flex-end !important;
  }
}

@media (max-width: 700px){
  .report-panel{
    padding: 16px 16px 15px !important;
    border-radius: 14px !important;
  }

  .report-link{
    margin-left: 0 !important;
  }

  .report-metric-row--split{
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .report-panel--effort strong{
    text-align: left !important;
    min-width: 0 !important;
  }
}



/* =========================================================
   DASHBOARD FONT SCALE (20% bigger)
   ========================================================= */

.report-panel__heading h3{
  font-size: calc(17px * var(--report-scale)) !important;
  line-height: 1.08 !important;
}

.report-panel__heading p{
  font-size: calc(13px * var(--report-scale)) !important;
  line-height: 1.35 !important;
}

.report-list__num{
  font-size: calc(16px * var(--report-scale)) !important;
}

.report-list__copy strong{
  font-size: calc(15px * var(--report-scale)) !important;
}

.report-list__copy p{
  font-size: calc(13px * var(--report-scale)) !important;
}

.report-step__num{
  font-size: calc(25px * var(--report-scale)) !important;
}

.report-step__copy strong{
  font-size: calc(15px * var(--report-scale)) !important;
}

.report-step__copy p{
  font-size: calc(13px * var(--report-scale)) !important;
}

.report-link{
  font-size: calc(14px * var(--report-scale)) !important;
}

.report-metric-row__copy span,
.report-metric-row--split span{
  font-size: calc(13px * var(--report-scale)) !important;
}

.report-metric-row__copy strong,
.report-metric-row--split strong{
  font-size: calc(16px * var(--report-scale)) !important;
}

.flag-row__copy strong{
  font-size: calc(16px * var(--report-scale)) !important;
}

.flag-row__copy p{
  font-size: calc(14px * var(--report-scale)) !important;
}

.report-cta__copy h3{
  font-size: calc(22px * var(--report-scale)) !important;
}

.report-cta__copy p{
  font-size: calc(13px * var(--report-scale)) !important;
}

.report-cta__button{
  font-size: calc(14px * var(--report-scale)) !important;
}





/* =========================================================
   HERO REPORT RESULT — MATCH SCREENSHOT 1
   paste at VERY END of idea-to-business.css
   ========================================================= */



.hero-report-card{
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  display: grid !important;
  grid-template-rows: minmax(13vh, 1fr) 4.8vh !important;
  border-radius: 18px !important;
  padding: 18px 18px 14px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,255,.96)) !important;
  border: 1px solid rgba(226,231,238,.95) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 8px 24px rgba(16,24,40,.05) !important;
  overflow: hidden !important;
  
}

/* 2) top row becomes: wide left content + narrow right score panel */
.hero-report-card__top{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 180px !important;
  grid-template-areas:
    "main score"
    "actions score" !important;
  gap: 14px 18px !important;
  align-items: stretch !important;
  min-height: 0 !important;
}

/* 3) hide the old circular left score column entirely */
.hero-report-score-wrap{
  grid-area: score !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  padding: 20px 18px 18px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,247,252,.96)) !important;
  border: 1px solid rgba(226,231,238,.98) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 6px 18px rgba(16,24,40,.035) !important;
}

/* turn the "Idea Score" label into a header on the right card */
.hero-report-kicker{
  order: 0 !important;
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
  color: #111827 !important;
  text-align: left !important;
}

/* remove the blue ring look */
.hero-report-score{
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  display: block !important;
  box-shadow: none !important;
  background: transparent !important;
}

.hero-report-score__inner{
  display: flex !important;
  align-items: flex-end !important;
  gap: 6px !important;
  text-align: left !important;
}

.hero-report-score__inner strong{
  font-size: 76px !important;
  line-height: .9 !important;
  letter-spacing: -.07em !important;
  font-weight: 900 !important;
  color: #2457f5 !important;
}

.hero-report-score__inner span{
  margin: 0 0 10px 0 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  color: #344054 !important;
}

/* add verdict bullet look inside right score card */
.hero-report-score-wrap::after{
  content: "";
  display: none;
}

/* 4) left main story area becomes the dominant block */
.hero-report-main{
  grid-area: main !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 6px 8px 0 8px !important;
}

/* blue advice line like screenshot 1 */
.hero-report-advice{
  margin: 0 0 18px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  text-transform: uppercase !important;
  color: #2457f5 !important;
}

/* hide previous special line system if present */
.hero-verdict-line{
  display: none !important;
}

/* make the main sentence large and black */
.hero-report-main h3,
#heroReportVerdict{
  margin: 0 !important;
  width: 100% !important;
  max-width: 760px !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* use the summary as the large statement */
.hero-report-main p,
#heroReportSummary{
  display: block !important;
  margin: 0 !important;
  max-width: 760px !important;
  font-size: 21px !important;
  line-height: 1.62 !important;
  letter-spacing: -.03em !important;
  font-weight: 500 !important;
  color: #22304d !important;
}

/* 5) right-side actions sit above metric strip */
.hero-actions{
  grid-area: actions !important;
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 4px 0 0 !important;
}

.hero-btn{
  min-width: 112px !important;
  min-height: 44px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}

.hero-btn.primary{
  background: linear-gradient(180deg, #3b6cf6, #2457f5) !important;
  box-shadow: 0 10px 22px rgba(36,87,245,.16) !important;
}

.hero-btn.secondary{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,248,252,.95)) !important;
  color: #2457f5 !important;
  border: 1px solid rgba(214,223,238,.96) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98) !important;
}

/* 6) inject verdict + mini summary styling into the right score panel */
.hero-report-score-wrap .hero-report-kicker + .hero-report-score{
  margin-top: -4px !important;
}

/* add bullet verdict below score using existing content block colors */
.hero-report-score-wrap{
  position: relative !important;
}

.hero-report-score-wrap .hero-report-kicker{
  margin-bottom: 2px !important;
}

/* use the hidden h3 content space for the right-panel verdict by styling generated area */
.hero-report-score-wrap .hero-score-verdict{
  display: none;
}

/* visual box at bottom of score panel */
.hero-report-score-wrap::before{
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  height: 76px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(243,246,251,.98), rgba(236,241,248,.95));
  border: 1px solid rgba(226,231,238,.98);
}

/* place risk/verdict text feel inside that box using existing DOM children order */
.hero-report-score-wrap > *{
  position: relative;
  z-index: 1;
}



/* 7) metric strip at the bottom */
.hero-report-metrics{
  margin-top: 18px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(229,233,240,.96) !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0 !important;
  align-items: stretch !important;
}

.hero-report-metric{
  min-height: 112px !important;
  padding: 0 18px !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: flex-start !important;
  text-align: left !important;
  position: relative !important;
}





/* 8) responsive */
@media (max-width: 1180px){
  .hero-report-card__top{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "score"
      "main"
      "actions" !important;
  }

  .hero-actions{
    align-items: flex-start !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }

  .hero-report-metrics{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .hero-report-metric{
    min-height: 92px !important;
    padding: 14px 14px 22px !important;
    border: 1px solid rgba(229,233,240,.96) !important;
    border-radius: 14px !important;
  }

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

@media (max-width: 700px){
  .hero-report-metrics{
    grid-template-columns: 1fr !important;
  }

  .hero-report-main p,
  #heroReportSummary{
    font-size: 17px !important;
    line-height: 1.55 !important;
  }

  .hero-report-score__inner strong{
    font-size: 60px !important;
  }
}




/* =========================================================
   HERO REPORT — SCREENSHOT 2 MATCH
   paste at the VERY END of idea-to-business.css
   ========================================================= */

/* outer layer */
.hero-report-layer{
  position:absolute !important;
  inset:8px !important;
  padding:0 !important;
  z-index:20 !important;
}

.hero-report-layer.is-visible{
  display:flex !important;
  align-items:stretch !important;
  justify-content:stretch !important;
}



/* top split: wide copy left, score card right */
.hero-report-card__top{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 190px !important;
  grid-template-areas:
    "main score" !important;
  align-items:stretch !important;
  gap:18px !important;
  min-height:0 !important;
}

/* LEFT MAIN CONTENT */
.hero-report-main{
  grid-area:main !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-items:flex-start !important;
  text-align:left !important;
  min-width:0 !important;
  max-width:none !important;
  padding:6px 6px 0 !important;
}

.hero-report-advice{
  display:block !important;
  margin:0 0 34px !important;
  font-size:12px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  letter-spacing:-.01em !important;
  text-transform:uppercase !important;
  color:#2457f5 !important;
}

#heroReportVerdict,
.hero-report-main h3{
  display:none !important;
}

#heroReportSummary{
  display:block !important;
  margin:36px 0 0 !important;
  max-width:760px !important;
  font-size:23px !important;
  line-height:1.62 !important;
  letter-spacing:-.03em !important;
  font-weight:500 !important;
  color:#23324d !important;
}

/* RIGHT SCORE PANEL */
.hero-report-score-wrap{
  grid-area:score !important;
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  padding:24px 20px 18px !important;
  border-radius:16px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,247,252,.97)) !important;
  border:1px solid rgba(229,233,240,.98) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 6px 16px rgba(16,24,40,.03) !important;
}

.hero-report-kicker{
  display:block !important;
  margin:0 0 18px !important;
  font-size:14px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  letter-spacing:-.02em !important;
  text-transform:none !important;
  color:#111827 !important;
  text-align:left !important;
}

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

.hero-report-score__inner{
  display:flex !important;
  align-items:flex-end !important;
  gap:8px !important;
  text-align:left !important;
}

.hero-report-score__inner strong{
  font-size:86px !important;
  line-height:.88 !important;
  font-weight:900 !important;
  letter-spacing:-.08em !important;
  color:#2457f5 !important;
}

.hero-report-score__inner span{
  display:block !important;
  margin:0 0 12px !important;
  font-size:15px !important;
  line-height:1 !important;
  font-weight:700 !important;
  color:#344054 !important;
}

/* fake verdict bullet + helper box to visually match screenshot */
.hero-report-score-wrap::before{
  content:"●  Good Potential";
  position:absolute;
  left:20px;
  right:20px;
  top:176px;
  font-size:14px;
  line-height:1.3;
  font-weight:700;
  color:#2457f5;
}

.hero-report-score-wrap::after{
  content:"Strong foundation with clear opportunities.";
  position:absolute;
  left:20px;
  right:20px;
  bottom:18px;
  min-height:72px;
  padding:16px 14px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(240,244,250,.98), rgba(233,238,246,.96));
  border:1px solid rgba(225,230,238,.95);
  color:#344054;
  font-size:13px;
  line-height:1.55;
  font-weight:600;
  box-sizing:border-box;
}

/* HIDE BUTTONS IN REPORT VIEW */
.hero-actions{
  display:none !important;
}

/* BOTTOM METRIC STRIP */
.hero-report-metrics{
  margin-top:18px !important;
  padding-top:16px !important;
  border-top:1px solid rgba(228,232,239,.96) !important;
  display:grid !important;
  grid-template-columns:repeat(5, minmax(0,1fr)) !important;
  gap:0 !important;
  align-items:stretch !important;
}

.hero-report-metric{
  position:relative !important;
  min-height:120px !important;
  padding:0 18px 18px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:flex-start !important;
  text-align:left !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}





/* ensure no old hover card look remains */
.hero-report-metric.metric-is-linked{
  background:transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* RESPONSIVE */
@media (max-width: 1180px){
  .hero-report-card__top{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "score"
      "main" !important;
  }

  .hero-report-score-wrap{
    min-height:220px !important;
  }

  .hero-report-score-wrap::before{
    top:auto;
    bottom:118px;
  }

  .hero-report-metrics{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:12px !important;
  }

  .hero-report-metric{
    min-height:100px !important;
    padding:14px 14px 22px !important;
    border:1px solid rgba(228,232,239,.96) !important;
    border-radius:14px !important;
    background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,255,.95)) !important;
  }

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

@media (max-width: 700px){
  #heroReportSummary,
  .hero-report-main p{
    font-size:18px !important;
  }

  .hero-report-score__inner strong{
    font-size:68px !important;
  }

  .hero-report-metrics{
    grid-template-columns:1fr !important;
  }
}



/* main report sentence */
#heroReportSummary{
  font-size: calc(21px * var(--report-scale)) !important;
  line-height: 1.62 !important;
}

/* top blue advice line */
.hero-report-advice{
  font-size: calc(12px * var(--report-scale)) !important;
  line-height: 1.2 !important;
}

/* right score panel label */
.hero-report-kicker{
  font-size: calc(14px * var(--report-scale)) !important;
  line-height: 1.15 !important;
}

/* score number + /100 */
.hero-report-score__inner strong{
  font-size: calc(86px * var(--report-scale)) !important;
  line-height: .88 !important;
}

.hero-report-score__inner span{
  font-size: calc(15px * var(--report-scale)) !important;
  line-height: 1 !important;
  margin-bottom: calc(12px * var(--report-scale)) !important;
}

/* bottom metric strip */
.hero-report-metric span{
  font-size: calc(12px * var(--report-scale)) !important;
  line-height: 1.2 !important;
}

.hero-report-metric strong{
  font-size: calc(18px * var(--report-scale)) !important;
  line-height: 1 !important;
}

.hero-report-metric strong::after{
  font-size: calc(14px * var(--report-scale)) !important;
  line-height: 1 !important;
}

/* give the card more breathing room when text is larger */
.hero-report-card{
  padding: 26px 28px 20px !important;
}

.hero-report-card__top{
  grid-template-columns: minmax(0,1fr) 230px !important;
  gap: 24px !important;
}

.hero-report-score-wrap{
  min-height: 180px !important;
  padding: 20px 18px 18px !important;
}

/* -----------------------------------------
   FIX "Good Potential" INSIDE SCORE CARD
   ----------------------------------------- */

/* remove old floating position */
.hero-report-score-wrap::before{
  content: "● Good Potential" !important;
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  top: auto !important;
  bottom: 96px !important;   /* puts it INSIDE the score card */
  text-align: center !important;
  font-size: calc(14px * var(--report-scale)) !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: #2457f5 !important;
}

/* helper box stays inside and centered */
.hero-report-score-wrap::after{
  left: 18px !important;
  right: 18px !important;
  bottom: 18px !important;
  min-height: 48px !important;
  padding: 14px 14px !important;
  text-align: center !important;
  font-size: calc(13px * var(--report-scale)) !important;
  line-height: 1.45 !important;
}

/* keep score panel content centered */
.hero-report-score-wrap{
  align-items: center !important;
  text-align: center !important;
}

.hero-report-score{
  align-self: center !important;
}

.hero-report-kicker{
  text-align: center !important;
  width: 100% !important;
}


/* =========================================================
   HERO REPORT ALIGNMENT CLEANUP
   center score + metric labels
   remove Good Potential completely
   ========================================================= */

/* ---- SCORE PANEL ---- */
.hero-report-score-wrap{
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
}

.hero-report-kicker{
  width: 100% !important;
  margin: 0 0 14px !important;
  text-align: center !important;
}

.hero-report-score{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  align-self: center !important;
}

.hero-report-score__inner{
  width: 100% !important;
  justify-content: center !important;
  align-items: flex-end !important;
  text-align: center !important;
}

/* remove Good Potential completely */
.hero-report-score-wrap::before{
  content: none !important;
  display: none !important;
}

/* if you also want the gray helper box gone, keep this */
.hero-report-score-wrap::after{
  content: none !important;
  display: none !important;
}

/* ---- BOTTOM METRIC STRIP ---- */
.hero-report-metric{
  align-items: center !important;
  text-align: center !important;
  padding: 0 18px 18px !important;
}

.hero-report-metric span{
  width: 100% !important;
  text-align: center !important;
  margin: 0 0 22px !important;
}

.hero-report-metric strong{
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
}

/* keep /100 centered with the value */
.hero-report-metric strong::after{
  margin-left: 4px !important;
}

/* risk text centered too */
.hero-report-metric:last-child strong{
  justify-content: center !important;
  text-align: center !important;
}

.hero-report-metric:last-child::after {
  display: none;
}

/* =========================================
   BIG SUMMARY TEXT (RED AREA)
   ========================================= */

/* =========================================
   FINAL HERO SUMMARY TEXT FIX
   put this at the ABSOLUTE end
   ========================================= */

.hero-report-main{
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
  padding: 8px 8px 0 8px !important;
}

.hero-report-advice{
  display: block !important;
  margin: 0 0 18px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  text-transform: uppercase !important;
  color: #2457f5 !important;
}

/* THIS is your real big summary now */
.hero-report-summary-big,
#heroReportSummary{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  font-family: 'Inter', sans-serif;
  font-size: 14px !important;   /* about 1.5x bigger than the advice line feel */
  line-height: 1.45 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;

  color: #1f2a44 !important;
  text-align: left !important;

  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  position: relative !important;
  z-index: 5 !important;
}

/* hide verdict if you don't want it competing */
.hero-report-main h3,
#heroReportVerdict{
  display: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  margin: 0 !important;
}




/* =========================================
   BIG SUMMARY TEXT SCALE (+40%)
   ========================================= */

.hero-report-summary-big,
#heroReportSummary{
  font-size: calc(1em * 1.6) !important;
  line-height: 1.45 !important;
}


.hero-report-advice{
  font-size: calc(1em * 1.5) !important;
}


/* =========================================
   PERFECTLY ALIGNED PROGRESS BARS
   ========================================= */

/* base container */
.hero-report-metric{
  position: relative !important;
  padding-bottom: 26px !important; /* space for bar */
}

/* gray track */
.hero-report-metric:not(:last-child)::before{
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 8px !important; /* 🔥 anchor */
  height: 6px !important;
  border-radius: 999px !important;
  background: rgba(221,228,239,.96) !important;
  z-index: 0 !important;
}

/* ===============================
   Kindle-like Reading Background
   =============================== */

/* FORCE KINDLE BACKGROUND ON HERO SUMMARY */
.hero-report-card .hero-report-main {
  display: block !important;

  width: min(57.5vh, 48rem) !important;
  max-width: 48rem !important;

  padding: 0.5rem 0.5rem !important;
  margin: 0 0 0 !important;

  /* SUBTLE BLUE SYSTEM BACKGROUND */
  background: linear-gradient(
    180deg,
    rgba(74,108,247,0.06) 0%,
    rgba(74,108,247,0.03) 100%
  ) !important;

  /* CLEAN TEXT */
  color: #1f2a44 !important;

  /* VERY LIGHT BORDER */
  border: 1px solid rgba(74,108,247,0.12) !important;
  border-radius: 16px !important;

  /* APPLE-LIKE SOFT DEPTH */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 8px 24px rgba(36,87,245,0.08) !important;

  line-height: 1.6 !important;

  /* OPTIONAL: makes text easier to read */
  backdrop-filter: blur(6px);
}

/* widths */




/* =========================================================
   HERO REPORT METRICS — FINAL CLEAN FIX
   ========================================================= */

.hero-report-metrics{
  margin-top: 18px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(229,233,240,.96) !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0 !important;
  align-items: stretch !important;
}

.hero-report-metric{
  position: relative !important;
  min-height: 112px !important;
  padding: 0 18px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* vertical divider */
.hero-report-metric:not(:last-child)::after{
  content: "" !important;
  position: absolute !important;
  top: 14px !important;
  right: 0 !important;
  width: 1px !important;
  height: calc(100% - 28px) !important;
  background: rgba(229,233,240,.96) !important;
}



/* labels */
.hero-report-metric span{
  margin: 0 0 18px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  color: #111827 !important;
  text-transform: none !important;
}

/* values */
.hero-report-metric strong{
  position: relative !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 4px !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
  color: inherit !important;
}

/* gray tracks */
.hero-report-metric:not(:last-child)::before{
  content: "" !important;
  position: absolute !important;
  left: 24px !important;
  right: 24px !important;
  bottom: 12px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: rgba(221,228,239,.96) !important;
  z-index: 0 !important;
}


/* risk = plain text only */
.hero-report-metric:last-child{
  background-image: none !important;
}

.hero-report-metric:last-child::before{
  content: none !important;
}

.hero-report-metric:last-child strong{
  color: #101828 !important;
}


/* =========================================================
   HERO REPORT METRIC BARS — FINAL REAL FIX
   ========================================================= */

/* metric row shell */
.hero-report-metrics{
  margin-top: 18px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(229,233,240,.96) !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0 !important;
}

.hero-report-metric{
  position: relative !important;
  min-height: 112px !important;
  padding: 0 18px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* vertical divider only */
.hero-report-metric:not(:last-child)::after{
  content: "" !important;
  position: absolute !important;
  top: 14px !important;
  right: 0 !important;
  width: 1px !important;
  height: calc(100% - 28px) !important;
  background: rgba(229,233,240,.96) !important;
}

/* gray track */
.hero-report-metric:not(:last-child)::before{
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 12px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: rgba(221,228,239,.96) !important;
  z-index: 0 !important;
}

/* text */
.hero-report-metric span{
  margin: 0 0 18px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  color: #111827 !important;
}

.hero-report-metric strong{
  position: relative !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 4px !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;

}

/* kill old pseudo text addons */
.hero-report-metric strong::after{
  content: none !important;
  display: none !important;
}




/* risk = plain text only */
.hero-report-metric:last-child::before{
  content: none !important;
}

.hero-report-metric:last-child strong::before{
  content: none !important;
  display: none !important;
}

.hero-report-metric:last-child strong{
  color: #101828 !important;
}




/* =========================================================
   HERO REPORT METRICS — ACTUAL FINAL FIX
   ========================================================= */

/* layout */
.hero-report-metrics{
  margin-top: 18px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(229,233,240,.96) !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0 !important;
  align-items: stretch !important;
}

.hero-report-metric{
  position: relative !important;
  min-height: 112px !important;
  padding: 0 18px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* use border-right for divider, not ::after */
.hero-report-metric:not(:last-child){
  border-right: 1px solid rgba(229,233,240,.96) !important;
}

/* kill divider pseudo-element completely */
.hero-report-metric::after{
  content: none !important;
  display: none !important;
}

/* labels */
.hero-report-metric span{
  margin: 0 0 18px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  color: #111827 !important;
  text-transform: none !important;
  position: relative !important;
  z-index: 2 !important;
}

/* values */
.hero-report-metric strong{
  position: relative !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 4px !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
}

/* kill old text addons like /100 injection */
.hero-report-metric strong::after{
  content: none !important;
  display: none !important;
}

/* gray tracks */
.hero-report-metric:not(:last-child)::before{
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 12px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: rgba(221,228,239,.96) !important;
  z-index: 0 !important;
}

/* blue bars */
.hero-report-metric:not(:last-child) strong::before{
  content: "";
  position: absolute;

  left: 5px;          /* start from left edge (aligned with padding) */
  bottom: -28px;

  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2f63ff, #2457f5);

  transform: none;     /* 🔴 THIS IS THE KEY */
}

/* exact widths */
.hero-report-metric:not(:last-child) strong::before{
  width: calc((100% - 36px) * var(--metric-fill, 0)) !important;
}

/* risk = plain text only */
.hero-report-metric:last-child{
  border-right: 0 !important;
}

.hero-report-metric:last-child::before{
  content: none !important;
  display: none !important;
}

.hero-report-metric:last-child strong::before{
  content: none !important;
  display: none !important;
}

.hero-report-metric:last-child strong{
  color: #101828 !important;
}



/* =========================================================
   FINANCIAL SNAPSHOT — EXACT CLEAN OVERRIDE
   ========================================================= */

.report-panel--financials{
  min-height: 382px !important;
  padding: 20px 20px 18px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,250,252,.96)) !important;
  border: 1px solid #e6eaf0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 6px 18px rgba(16,24,40,.035) !important;
}

.report-panel--financials .report-panel__header{
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}

.report-panel--financials .report-panel__icon{
  width: 58px !important;
  height: 58px !important;
  flex: 0 0 58px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(180deg, #f9fbff, #f2f5fb) !important;
  border: 1px solid #d8e1f0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98) !important;
}

.report-panel--financials .report-panel__heading h3{
  margin: 0 0 4px !important;
  font-size: 22px !important;
  line-height: 1.08 !important;
  letter-spacing: -.03em !important;
  font-weight: 800 !important;
  color: #111827 !important;
}

.report-panel--financials .report-panel__heading p{
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  color: #42526b !important;
  font-weight: 600 !important;
}

.report-panel--financials .report-metric-row{
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 20px 0 !important;
  border-top: 1px solid #e9edf3 !important;
}

.report-panel--financials .report-metric-row:first-of-type{
  border-top: 0 !important;
  padding-top: 8px !important;
}

.report-panel--financials .report-metric-row__icon{
  width: 40px;
  height: 40px;

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

  border-radius: 50%;
  flex-shrink: 0; /* prevents squishing */
}



.report-panel--financials .report-metric-row__copy{
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
   justify-content: center;
}

.report-panel--financials .report-metric-row__copy span{
  font-size: 24px !important;
  line-height: 1.3 !important;
  color: #42526b !important;
  font-weight: 700 !important;
}

.report-panel--financials .report-metric-row__copy strong{
  font-size: 24px !important;
  line-height: 1.2 !important;
  letter-spacing: -.03em !important;
  color: #111827 !important;
  font-weight: 900 !important;
}

.report-panel--financials .report-svg-icon{
  width: 26px !important;
  height: 26px !important;
  stroke: #2457f5 !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  fill: none !important;
}

.report-panel--financials .report-svg-icon--sm{
  width: 20px !important;
  height: 20px !important;
  stroke-width: 2 !important;
}

/* =========================================
   CLICK-TO-BUILD IMAGE PANEL
   ========================================= */

.report-panel--cta-image{
  padding: 0 !important;
  overflow: hidden !important;
  min-height: 210px !important;
  display: flex;
}

.report-cta-image-button{
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
  border-radius: inherit;
  overflow: hidden;
  position: relative;
}

.report-cta-image{
  width: 100%;
  height: 100%;
  object-fit: cover; /* use contain if you want the full image always visible */
  display: block;
  transition:
    transform .35s cubic-bezier(.22,.61,.36,1),
    filter .35s cubic-bezier(.22,.61,.36,1);
}

.report-cta-image-button:hover .report-cta-image{
  transform: scale(1.03);
  filter: saturate(1.04) contrast(1.03);
}

.report-cta-image-button:focus-visible{
  outline: 3px solid rgba(36,87,245,.28);
  outline-offset: -3px;
}

.report-cta-image-button::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.10), transparent 38%, transparent 62%, rgba(36,87,245,.08));
  opacity: 0;
  transition: opacity .3s ease;
}

.report-cta-image-button:hover::after{
  opacity: 1;
}




/* =========================================
   IDEA MINI TAB WITH SCORE
   ========================================= */

.idea-mini-tab{
  position: relative !important;
  width: 100% !important;
  min-height: 74px !important;
  padding: 14px 18px 14px 20px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(216,224,235,.92) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,255,.94)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 10px 24px rgba(16,24,40,.05) !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
}

.idea-mini-tab::before{
  content: "" !important;
  position: absolute !important;
  top: 14px !important;
  bottom: 14px !important;
  left: 0 !important;
  width: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #4c79ff 0%, #2457f5 60%, #1f49d9 100%) !important;
  box-shadow: 0 0 18px rgba(36,87,245,.18) !important;
}

.idea-mini-tab__main{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.idea-mini-tab__text{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.idea-mini-tab__title{
  display: block !important;
  font-size: 18px !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
  color: #101828 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.idea-mini-tab__eyebrow{
  display: block !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  color: #2457f5 !important;
  margin: 0 !important;
}

.idea-mini-tab__meta{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.idea-mini-tab__score-wrap{
  display: flex;
  align-items: flex-end;
  gap: 2px;
  white-space: nowrap;
}

.idea-mini-tab__score{
  font-size: 35px;
  line-height: .9;
  font-weight: 900;
  letter-spacing: -.05em;
}

.idea-mini-tab__score-max{
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  color: #344054;
  margin-bottom: 2px;
}

.idea-mini-tab__chevron{
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
  color: #667085;
  margin-bottom: -1px;
}

/* score colors */
.idea-mini-tab__score.score-low{
  color: #ef4444;
}

.idea-mini-tab__score.score-mid{
  color: #f79009;
}

.idea-mini-tab__score.score-high{
  color: #2457f5;
}

/* active tab polish */
.idea-mini-tab.is-active{
  border-color: rgba(36,87,245,.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 16px 28px rgba(36,87,245,.08) !important;
}

.idea-mini-tab.is-active .idea-mini-tab__chevron{
  color: #2457f5;
}


/* =========================================
   IDEA TAB HOVER — PREMIUM EFFECT
   ========================================= */

.idea-mini-tab{
  transition:
    transform .28s cubic-bezier(.22,.61,.36,1),
    box-shadow .28s cubic-bezier(.22,.61,.36,1),
    border-color .28s ease;
  will-change: transform;
}

/* HOVER EFFECT */
.idea-mini-tab:hover{
  transform: translateY(-6px) scale(1.03);

  border-color: rgba(36,87,245,.25) !important;

box-shadow:
  inset 0 1px 0 rgba(255,255,255,.98),
  0 10px 22px rgba(16,24,40,.08),
  0 0 0 1px rgba(36,87,245,.08),
  0 0 14px rgba(36,87,245,.10);
}

/* SOFT BLUE GLOW LAYER */
.idea-mini-tab::after{
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 26px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .28s ease;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(36,87,245,.25),
      rgba(36,87,245,.10) 40%,
      transparent 70%
    );
}

.idea-mini-tab:hover::after{
  opacity: 1;
}


/* =========================================
   IDEA MINI TAB — INTERACTIVE ACTIVE STATE
   ========================================= */

.idea-tabs-rail{
  overflow: visible !important;
}

.idea-mini-tab{
  position: relative !important;
  width: 100% !important;
  min-height: 74px !important;
  padding: 14px 18px 14px 20px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(216,224,235,.92) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,255,.94)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 10px 24px rgba(16,24,40,.05) !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  transition:
    transform .28s cubic-bezier(.22,.61,.36,1),
    box-shadow .28s cubic-bezier(.22,.61,.36,1),
    border-color .28s cubic-bezier(.22,.61,.36,1),
    background .28s cubic-bezier(.22,.61,.36,1) !important;
  transform-origin: center;
}

.idea-mini-tab::before{
  content: "" !important;
  position: absolute !important;
  top: 14px !important;
  bottom: 14px !important;
  left: 0 !important;
  width: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #4c79ff 0%, #2457f5 60%, #1f49d9 100%) !important;
  box-shadow: 0 0 12px rgba(36,87,245,.10) !important;
}

.idea-mini-tab:hover{
  transform: translateY(-3px) scale(1.015);
  border-color: rgba(36,87,245,.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 12px 26px rgba(16,24,40,.07),
    0 0 0 1px rgba(36,87,245,.06) !important;
}

.idea-mini-tab.is-active{
  transform: translateY(-4px) scale(1.025);
  border: 4px solid #2457f5 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(244,248,255,.96)) !important;
  box-shadow:
    0 0 0 4px rgba(36,87,245,.14),
    0 20px 42px rgba(36,87,245,.16),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}

.idea-mini-tab.is-active::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.35);
}

.idea-mini-tab.is-active .idea-mini-tab__chevron{
  color: #2457f5;
}

.idea-mini-tab.is-active .idea-mini-tab__title{
  color: #0f172a !important;
}


/* =========================================================
   REPORT DASHBOARD — MATCH SCREENSHOT EXACTLY
   put this at the VERY END of idea-to-business.css
   ========================================================= */

.report-dashboard{
  margin-top: 18px;
  padding: 0;
}

.report-dashboard__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.report-panel{
  min-height: 0 !important;
  border-radius: 18px !important;
  padding: 16px 18px 16px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,255,.95)) !important;
  border: 1px solid #e3e9f2 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 4px 14px rgba(16,24,40,.03) !important;
}

.report-panel--competition,
.report-panel--steps,
.report-panel--financials{
  min-height: 320px !important;
}

.report-panel--flags,
.report-panel--cta,
.report-panel--effort{
  min-height: 210px !important;
}

.report-panel__header{
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 16px !important;
    justify-content: center; 
}

.report-panel__icon{
  width: 56px !important;
  height: 56px !important;
  flex: 0 0 56px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(180deg, #f8fbff, #eef3fb) !important;
  border: 1px solid #dbe4f1 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98) !important;
  
    align-items: center;
  justify-content: center;
}

.report-panel__heading{
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 56px;
}

.report-panel__heading h3{
  margin: 0 0 4px !important;
  font-size: 22px !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
  color: #111827 !important;
    align-items: center;
}

.report-panel__heading p{
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  color: #667085 !important;
    align-items: center;
}

/* =========================
   COMPETITION
   ========================= */

.report-list{
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;

}

.report-list__item{
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 20px 0 !important;
  border-top: 1px solid #e8edf4 !important;
}

.report-list__item:first-child{
  border-top: 1px solid #e8edf4 !important; /* force same visual rhythm */
      padding-top: 18px; 
}

.report-list__num{
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(180deg, #f5f7fb, #edf1f7) !important;
  border: 1px solid #dde4ef !important;
  color: #2457f5 !important;
  font-size: 26px !important;
  font-weight: 800 !important;
}

.report-list__copy{
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 42px !important;
}

.report-list__copy strong{
  display: block;
  margin: 0 0 4px !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  color: #111827 !important;
}

.report-list__copy p{
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
  color: #5b6780 !important;
}

/* =========================
   NEXT STEPS
   ========================= */

.report-step-list{
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.report-step{
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 0 !important;
  border-top: 1px solid #e8edf4 !important;
}

.report-step:first-child{
  border-top: 1px solid #e8edf4 !important;
}

.report-step__num{
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px !important;
  border-radius: 12px !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(180deg, #2f63ff 0%, #2457f5 100%) !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.18),
    0 8px 18px rgba(36,87,245,.14) !important;
}

.report-step__copy{
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 46px !important;
}

.report-step__copy strong{
  display: block;
  margin: 0 0 4px !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  color: #111827 !important;
}

.report-step__copy p{
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
  color: #5b6780 !important;
}

.report-link{
  margin-top: 12px !important;
  margin-left: 60px !important;
  font-size: 24px !important;
  font-weight: 800 !important;
}

/* =========================
   FINANCIAL + EFFORT
   ========================= */

.report-metric-row{
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 18px 0 !important;
  border-top: 1px solid #e8edf4 !important;
}

.report-metric-row:first-of-type{
  border-top: 1px solid #e8edf4 !important;
}

.report-metric-row__icon{
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(180deg, #f7faff, #eef3ff) !important;
  border: 1px solid rgba(36,87,245,.10) !important;
    align-items: center;
  justify-content: center;
}

.report-metric-row__copy{
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 42px !important;
}

.report-metric-row__copy span,
.report-metric-row--split span{
  font-size: 22px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: #5b6780 !important;
}

.report-metric-row__copy strong,
.report-metric-row--split strong{
  font-size: 22px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  color: #111827 !important;
}

.report-metric-row--split{
  justify-content: space-between !important;
}

.report-metric-row__left{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* =========================
   FLAGS
   ========================= */

/* =========================================
   FLAGS PANEL — EQUAL 50/50 SPLIT
   ========================================= */

.report-panel--flags{
  display: grid !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 0 !important;
  min-height: 100% !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
}

.report-panel--flags .flag-row{
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 18px 22px !important;
  margin: 0 !important;
}

.report-panel--flags .flag-row + .flag-row{
  border-top: 1px solid rgba(216,224,235,.9) !important;
}

/* FORCE first competitor row lower */
.report-panel--competition > .report-list > .report-list__item:first-child{
  padding-top: 18px !important;
}


.report-dashboard{
  margin-top: 0 !important;
}


/* =========================================
   FLAGS ICONS — BIGGER / PREMIUM
   ========================================= */

.report-panel--flags .flag-row__icon{
  width: 52px !important;
  height: 52px !important;
  flex: 0 0 52px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(180deg, #f8fbff, #eef3fb) !important;
  border: 1px solid #dbe4f1 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 6px 16px rgba(16,24,40,.05) !important;
}

.report-panel--flags .flag-row--green .flag-row__icon{
  background: linear-gradient(180deg, #f7fcfa, #edf9f4) !important;
  border-color: rgba(23,178,106,.16) !important;
}

.report-panel--flags .flag-row--red .flag-row__icon{
  background: linear-gradient(180deg, #fff8f8, #fff1f1) !important;
  border-color: rgba(239,68,68,.16) !important;
}

.report-panel--flags .report-svg-icon--sm{
  width: 24px !important;
  height: 24px !important;
  stroke-width: 1.9 !important;
}

.report-panel--flags .flag-row--green .report-svg-icon{
  stroke: #17b26a !important;
}

.report-panel--flags .flag-row--red .report-svg-icon{
  stroke: #ef4444 !important;
}


/* tighten gap between expanded AUDIT area and the screen below */
.landing-divider{
  margin: 6px 0 8px !important;
}

.morph-showcase{
  margin-top: 8px !important;
}


/* =========================================
   FORCE financial icons to true vertical center
   ========================================= */

.report-panel--financials .report-metric-row{
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  column-gap: 12px !important;
  align-items: center !important;   /* center whole row content */
}

.report-panel--financials .report-metric-row__icon{
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;    /* center inside its own grid cell */
  justify-self: center !important;  /* center inside icon column */
  margin: 0 !important;
  padding: 0 !important;
}

.report-panel--financials .report-metric-row__icon svg{
  display: block !important;
  margin: 0 !important;
  transform: none !important;
}

.report-panel--financials .report-metric-row__copy{
  align-self: center !important;
}



/* Make header icon match step numbers */
.report-panel--next-steps .report-panel__icon{
  width: 44px;
  height: 44px;
  border-radius: 12px; /* same as number box */

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

  background: linear-gradient(180deg, #2f63ff 0%, #2457f5 100%);
  border: none;

  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.18),
    0 8px 18px rgba(36,87,245,.18);
}


/* Next Steps header flag — match the 1/2/3 boxes */
.report-panel--steps .report-panel__icon{
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px !important;
  border-radius: 12px !important;

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

  background: linear-gradient(180deg, #2f63ff 0%, #2457f5 100%) !important;
  border: none !important;

  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.18),
    0 8px 16px rgba(36,87,245,.14) !important;
}

/* Make the flag white */
.report-panel--steps .report-panel__icon .report-svg-icon,
.report-panel--steps .report-panel__icon .report-svg-icon *{
  stroke: #ffffff !important;
  fill: none !important;
}

/* Optional: make flag size match better */
.report-panel--steps .report-panel__icon .report-svg-icon{
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2.1 !important;
}


.report-panel--cta-image{
  padding: 0 !important;
  overflow: hidden !important;
}

.report-cta-image-button{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.report-cta-image{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}



/* =========================================
   HERO REPORT METRIC HOVER FOCUS
   ========================================= */



@keyframes metricShine{
  0% { transform: translateX(-40%) rotate(25deg); opacity: 0; }
  30% { opacity: .6; }
  60% { transform: translateX(140%) rotate(25deg); opacity: .2; }
  100% { opacity: 0; }
}

.hero-report-metric.is-selected span{
  color: rgba(255,255,255,.85) !important;
}

.hero-report-metric.is-selected strong{
  color: #ffffff !important;
  letter-spacing: .5px;
}


.hero-report-card #heroReportSummary{
  font-size: clamp(0.8rem, 0.85vw, 0.95rem) !important;
  line-height: 1.55 !important;
  letter-spacing: 0.2px;
}







/* =========================================
   HERO METRIC TONES — FINAL OVERRIDE
   ========================================= */

.hero-report-metric.is-selected{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  isolation: isolate;

  /* CLEAN BASE */
  background: linear-gradient(180deg, #3f6cff 0%, #2d5bff 100%);

  /* DEPTH (very controlled) */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 8px 18px rgba(36,87,245,.18);

  transform: translateY(-2px);
}

.hero-report-metric.is-selected::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.35), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 45%);

  pointer-events: none;
}

.hero-report-metric.is-selected{
  animation: appleFloat 4.5s ease-in-out infinite;
}

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

.hero-report-metric.is-selected span{
  color: rgba(255,255,255,.85) !important;
}

.hero-report-metric.is-selected strong{
  color: #ffffff !important;
}

.hero-report-metric.is-selected::after{
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 8px;
  height: 3px;
  border-radius: 999px;

  background: rgba(255,255,255,.9);
}


#advice,
.hero-report-advice{
  font-weight: 900 !important;
}

.hero-report-advice.advice-discouraging{
  color: #ef4444 !important;
}

.hero-report-advice.advice-poor{
  color: #f79009 !important;
}

.hero-report-advice.advice-decent{
  color: #101828 !important;
}

.hero-report-advice.advice-encouraging{
  color: #2457f5 !important;
}


.advice-blue{
  color: #2457f5 !important;
}

.advice-orange{
  color: #f79009 !important;
}

.advice-red{
  color: #ef4444 !important;
}

.advice-red-dark{
  color: #b42318 !important;
}


/* PREMIUM LIGHT BLUE SELECTED METRIC */
.hero-report-metric.is-selected{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  isolation: isolate !important;

  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.95), transparent 28%),
    linear-gradient(180deg, #f8fbff 0%, #edf4ff 44%, #dceaff 100%) !important;

  border: 1px solid rgba(120,160,255,.34) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(36,87,245,.08),
    0 10px 24px rgba(36,87,245,.12),
    0 0 0 1px rgba(36,87,245,.06) !important;

  transform: translateY(-3px) !important;
}

/* soft glass reflection */
.hero-report-metric.is-selected::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  z-index: 1 !important;

  background:
    radial-gradient(90% 70% at 50% 0%, rgba(255,255,255,.72), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.38), transparent 48%) !important;
}

/* bottom bar becomes elegant blue */
.hero-report-metric.is-selected::after{
  content: "" !important;
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 8px !important;
  height: 3px !important;
  border-radius: 999px !important;
  z-index: 2 !important;

  background:
    linear-gradient(90deg, rgba(95,139,255,.25), #2457f5, rgba(95,139,255,.25)) !important;

  box-shadow:
    0 0 10px rgba(36,87,245,.22) !important;

  animation: none !important;
}

/* selected text */
.hero-report-metric.is-selected span{
  position: relative !important;
  z-index: 3 !important;
  color: #2457f5 !important;
}

.hero-report-metric.is-selected strong{
  position: relative !important;
  z-index: 3 !important;
  color: #1746d6 !important;
}

/* optional subtle hover lift */
.hero-report-metric.is-selected:hover{
  transform: translateY(-4px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(36,87,245,.08),
    0 14px 30px rgba(36,87,245,.15),
    0 0 0 1px rgba(36,87,245,.08) !important;
}

/* FINAL SCORE COLORS BY CATEGORY TONE */
.hero-report-metric.metric-good strong{
  color: #2457f5 !important; /* blue */
}





/* ONLY affect the SCORE number */
.hero-report-metric.metric-bad > strong{
  color:#ef4444 !important; /* 0-44 red */
}

.hero-report-metric.metric-fair > strong{
  color:#f5c542 !important; /* 45-59 yellow */
}

.hero-report-metric.metric-okay > strong{
  color:#101828 !important; /* 60-74 black */
}

.hero-report-metric.metric-good > strong{
  color:#2457f5 !important; /* 75-100 blue */
}


#heroReportAdvice.metric-good,
#heroReportScoreValue.metric-good{
  color: #2457f5 !important;
}

#heroReportAdvice.metric-okay,
#heroReportScoreValue.metric-okay{
  color: #f79009 !important;
}

#heroReportAdvice.metric-fair,
#heroReportScoreValue.metric-fair{
  color: black !important;
}

#heroReportAdvice.metric-bad,
#heroReportScoreValue.metric-bad{
  color: #ef4444 !important;
}


/* Make metrics clearly clickable */
.hero-report-metric{
  cursor: pointer !important;
}

/* Optional: stronger UX on hover */
.hero-report-metric:hover{
  cursor: pointer;
}

/* Even better: show "active" feel when pressed */
.hero-report-metric:active{
  cursor: grabbing;
}


/* =========================================================
   FINAL SIDEBAR ENABLE OVERRIDE
   ========================================================= */

.sidebar-step.is-enabled{
  opacity: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  filter: none !important;
}

.sidebar-step.is-enabled .sidebar-step__media{
  opacity: 1 !important;
  filter: none !important;
  transform: scale(1) !important;
}

.sidebar-step.is-enabled .sidebar-step__overlay{
  background: rgba(255,255,255,.02) !important;
  opacity: 1 !important;
}



.sidebar-step.is-enabled:hover{
  transform: translateY(-2px) scale(1.01) !important;
  border-color: rgba(36,87,245,.18) !important;
  box-shadow:
    0 22px 34px rgba(36,87,245,.10),
    0 0 0 4px rgba(36,87,245,.04) !important;
}

/* =========================================================
   IDEA FLOW SECTION — NEW LANDING BLOCK
   ========================================================= */

.idea-flow-section{
  margin-top: 18px !important;
  padding: 0 !important;
}

.idea-flow-top{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 24px;
  margin-bottom: 30px;
}

.idea-flow-card{
  min-height: 178px;
  display: grid;
  grid-template-columns: 104px minmax(0,1fr);
  gap: 24px;
  align-items: center;
  padding: 28px 32px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,255,.94));
  border: 1px solid rgba(216,224,235,.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 16px 34px rgba(16,24,40,.06);
}




.idea-flow-icon{
  width: 92px;
  height: 92px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  color: #2457f5;
  font-size: 52px;
  font-weight: 900;
  background: linear-gradient(180deg,#fff,#f3f7ff);
  border: 1px solid rgba(36,87,245,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 10px 24px rgba(36,87,245,.10);
}

.idea-flow-card h3{
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: .10em;
  color: #111827;
}

.idea-flow-card p{
  margin: 0;
  font-size: 21px;
  line-height: 1.42;
  font-weight: 500;
  letter-spacing: -.03em;
  color: #1f2937;
}

.idea-flow-card p strong{
  color: #0f172a;
  font-weight: 900;
}

.idea-flow-arrow{
  display: inline-block;
  margin-top: 18px;
  color: #2457f5;
  font-size: 26px;
  font-weight: 900;
}

.idea-flow-visual{
  width: 100%;
  overflow: hidden;
}

.idea-flow-visual img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

@media (max-width:1180px){
  .idea-flow-top{
    grid-template-columns:1fr;
  }

  .idea-flow-card{
    grid-template-columns:92px 1fr;
  }
}

/* stronger base state (still clean) */
.screen.screen--landing.is-active .idea-form__field{
  border-color: rgba(36,87,245,.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 20px 44px rgba(16,24,40,.05),
    0 0 0 1px rgba(36,87,245,.06),
    0 0 40px rgba(36,87,245,.09) !important;
}

/* focused = clear intent */
.screen.screen--landing.is-active .idea-form__field:focus-within{
  border-color: rgba(36,87,245,.45) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 24px 54px rgba(36,87,245,.14),
    0 0 0 4px rgba(36,87,245,.10),
    0 0 60px rgba(36,87,245,.18) !important;
}

/* stronger but elegant pulse */
.screen.screen--landing.is-active .idea-form__field:has(#ideaInput:placeholder-shown){
  animation: ideaInputNeededGlow 2.8s ease-in-out infinite;
}

@keyframes ideaInputNeededGlow{
  0%, 100%{
    border-color: rgba(36,87,245,.20);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.98),
      0 20px 44px rgba(16,24,40,.05),
      0 0 0 1px rgba(36,87,245,.05),
      0 0 32px rgba(36,87,245,.08);
  }

  50%{
    border-color: rgba(36,87,245,.42);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.98),
      0 22px 50px rgba(16,24,40,.06),
      0 0 0 5px rgba(36,87,245,.10),
      0 0 65px rgba(36,87,245,.20);
  }
}


body.report-active .hero-visual {
  opacity: 0;
  pointer-events: none;
}

/* DEFAULT: report closed */
.morph-showcase__stage{
  margin-top: 46px !important;
  margin-bottom: 36px !important;
}

/* REPORT OPEN: heroReportLayer is no longer hidden */
.morph-showcase:has(#heroReportLayer:not([hidden])) .morph-showcase__stage{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Target all 3 icons */
.topbar-logo,
.vault-icon img,
.user-icon img {

  width: auto;

  transition: 
    transform 0.1s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center;
}

/* Hover effect (1.2x scale) */
.topbar-logo:hover,
.vault-btn:hover .vault-icon img,
.user-menu-btn:hover .user-icon img {
  transform: scale(1.2);
}


/* FLOATING SAVE BUTTON - OUTSIDE REPORT, MATCHES IDEA TAB RAIL */
.save-vault-floating{
  position: absolute !important;

  /* same right-side zone as the proposed-name tab */
  left: calc(99%) !important;
  right: auto !important;
  bottom: -65px !important;

width: 100%;
max-width: 300px; /* same as tab */
  height: auto !important;

  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  z-index: 1200 !important;

  opacity: 0 !important;
  transform: translateX(54px) scale(.96) !important;
  pointer-events: none !important;

  transition:
    opacity var(--idea-tabs-anim-time) cubic-bezier(.22,.61,.36,1),
    transform var(--idea-tabs-anim-time) cubic-bezier(.22,.61,.36,1) !important;
}

.save-vault-floating img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
  max-width: none !important;
}

.app-shell.has-idea-tabs .save-vault-floating{
  opacity: 1 !important;
  transform: translateX(0) scale(1) !important;
  pointer-events: auto !important;
}


.icon-hover:hover img{
  transform: translateY(-4px) scale(1.04);
}


/* =========================================================
   SAVE TO VAULT FLOW
   Alert + selected tab exit + vault icon celebration
   ========================================================= */

.vault-btn.is-vault-saving .vault-icon img{
  animation: vaultSavePulse 2s cubic-bezier(.22,.61,.36,1) forwards !important;
  transform-origin: center !important;
}

@keyframes vaultSavePulse{
  0%{
    transform: scale(1);
    filter: brightness(1);
  }
  45%{
    transform: scale(1.3);
    filter: brightness(1.18) drop-shadow(0 0 18px rgba(36,87,245,.28));
  }
  100%{
    transform: scale(1);
    filter: brightness(1);
  }
}

/* selected tab disappears right, reverse of creation */
.idea-mini-tab.is-saving-out{
  pointer-events: none !important;
  animation: ideaTabSaveOut 2s cubic-bezier(.22,.61,.36,1) forwards !important;
}

@keyframes ideaTabSaveOut{
  0%{
    opacity: 1;
    transform: translateX(0) scale(1);
    max-height: 120px;
  }
  100%{
    opacity: 0;
    transform: translateX(44px) scale(.96);
    max-height: 0;
    margin-bottom: -12px;
  }
}

/* elegant center alert */
.vault-alert{
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(246,249,255,.42);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s cubic-bezier(.22,.61,.36,1);
}

.vault-alert.is-visible{
  opacity: 1;
  pointer-events: auto;
}

.vault-alert__card{
  width: min(560px, calc(100vw - 44px));
  padding: 34px 38px 32px;
  border-radius: 34px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(76,121,255,.12), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,248,255,.96));
  border: 1px solid rgba(36,87,245,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 38px 90px rgba(16,24,40,.14),
    0 0 50px rgba(36,87,245,.10);
  transform: translateY(12px) scale(.96);
  transition: transform .42s cubic-bezier(.22,.61,.36,1);
}

.vault-alert.is-visible .vault-alert__card{
  transform: translateY(0) scale(1);
}

.vault-alert__icon{
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  color: #2457f5;
  font-size: 30px;
  font-weight: 900;
  background: linear-gradient(180deg, #f7faff, #eef3ff);
  border: 1px solid rgba(36,87,245,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 14px 28px rgba(36,87,245,.10);
}

.vault-alert__title{
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1.02;
  letter-spacing: -.055em;
  font-weight: 900;
  color: #101828;
}

.vault-alert__text{
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 600;
  color: #667085;
}


/* Hover message image takeover */
.hero-poster-layer.is-hover-message{
  inset: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: transparent !important;
  z-index: 20 !important;
}

.hero-poster-layer.is-hover-message .hero-poster-layer__image{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;

  object-fit: cover !important;        /* key fix */
  object-position: center center !important;

  border-radius: 34px !important;
  animation: none !important;
}

.morph-showcase__stage.has-hover-message .hero-visual{
  opacity: 0 !important;
  transform: scale(.98) !important;
}

.report-step__copy p{
  max-width: 28ch !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.report-panel--effort strong{
  max-width: 120px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


/* ===== FORCE NEXT STEPS CLEAN DESIGN ===== */

.report-panel--steps .report-step__copy strong {
  display: none !important;
}

.report-panel--steps .report-step__copy {
  width: 100% !important;
}

.report-panel--steps .report-step__copy p {
  font-size: 18px !important;   /* 1.3x */
  line-height: 1.6 !important;
  font-weight: 500 !important;
  color: #344054 !important;
  margin: 0 !important;
}

/* Improve spacing */
.report-panel--steps .report-step {
  align-items: flex-start !important;
  gap: 12px !important;
}

/* Slight adjustment so number aligns nicely */
.report-panel--steps .report-step__num {
  margin-top: 4px !important;
}

.report-panel--steps .report-panel__link {
  display: none !important;
}


.report-panel--steps {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.report-panel--steps .report-step {
  flex: 1;                 /* 🔥 THIS makes them equal height */
  display: flex;
  align-items: flex-start;
}

.report-panel--steps .report-step__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* centers text vertically inside each step */
  height: 100%;
}






















/* ===== NEXT STEPS: FULL SPACE, NO BUTTON, EQUAL HEIGHT ===== */

.report-panel--steps #viewRoadmapButton,
.report-panel--steps .report-link {
  display: none !important;
}

.report-panel--steps {
  display: flex !important;
  flex-direction: column !important;
}

.report-panel--steps .report-step-list {
  flex: 1 !important;
  display: grid !important;
  grid-template-rows: repeat(3, 1fr) !important;
  gap: 0 !important;
}

.report-panel--steps .report-step {
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.report-panel--steps .report-step__copy {
  width: 100% !important;
}

.report-panel--steps .report-step__copy strong {
  display: none !important;
}

.report-panel--steps .report-step__copy p {
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
  color: #344054 !important;
}




/* =====================================
   FORCE SMALL VERTICAL SPACING (3vh)
   ===================================== */

/* space between input and hero */
.idea-form {
  margin-bottom: 0.5vh !important;
}

/* hero container spacing */
.morph-showcase {
  margin-top: 0 !important;
  margin-bottom: 0.5vh !important;
}

/* stage inside hero */
.morph-showcase__stage {
  margin: 0 !important;
}

/* container that wraps cards */
#landingReportPreview {
  margin-top: 0 !important;
}

/* cards section spacing */
.idea-flow-section {
  margin-top: 0 !important;
}

/* grid gap between sections */
.screen.screen--landing,
.screen.screen--landing.is-active {
  row-gap: 0.5vh !important;
}


/* Scale that bottom illustration to 70% */
.idea-flow-visual img {
  transform: scale(0.7);
  transform-origin: center;
}

/* Crop empty space around bottom diamond image */
.idea-flow-visual {
  height: clamp(120px, 18vh, 190px) !important;
  overflow: hidden !important;

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

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

.idea-flow-visual img {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;

  transform: scale(0.55) translateY(-4%);
  transform-origin: center center;

  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
}

/* =========================================================
   REAL MULTILINE IDEA TEXTAREA FIX
   ========================================================= */

.idea-form {
  width: 90vh !important;
  height: auto !important;
  min-height: 6.5rem !important;
}

.idea-form__field {
  min-height: 6.5rem !important;
  height: 6.5rem !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 12.5rem !important;
  align-items: stretch !important;
}

#ideaInput {
  display: block !important;
  width: 100% !important;
  height: 100% !important;

  padding: 0.85rem 1.25rem !important;

  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  resize: none !important;

  background: transparent !important;

  font-size: 0.85rem !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;

  text-align: left !important;
  vertical-align: top !important;

  overflow-y: auto !important;
}

#ideaInput::placeholder {
  font-size: 0.85rem !important;
  line-height: 1.35 !important;
}



.idea-flow-top {
  transform: scale(0.7);
  transform-origin: top center;
}


/* =========================================
   SHRINK HERO SCREEN — PRESERVE RATIO
   ========================================= */
   
.morph-showcase,
.morph-showcase__stage,
#heroMorphStage {
  width: 83vh !important;

  /* This preserves the screen ratio */
  aspect-ratio: 16 / 5 !important;

  /* This makes it smaller */
  height: auto !important;
  min-height: 0 !important;
  max-height: 32vh !important;

  padding: 0 !important;
  border-radius: 2rem !important;
}

/* Poster/image layer fills the resized screen */
.hero-poster-layer {
  inset: 0 !important;
  border-radius: inherit !important;
}

.hero-poster-layer__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: inherit !important;
}


.main-content
{
  width: 80% !important;
  max-width: 80% !important;

}

.idea-form input {
  font-size: 8px !important;
}


/* =========================================================
   FORCE IDEA INPUT TO BE A REAL MULTILINE TEXTAREA
   ========================================================= */

.idea-form__field {
  height: 7rem !important;
  min-height: 7rem !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 12.5rem !important;
  align-items: stretch !important;
}

#ideaInput {
  display: block !important;
  width: 100% !important;
  height: 100% !important;

  padding: 0.85rem 1.25rem !important;

  border: 0 !important;
  outline: 0 !important;
  resize: none !important;
  background: transparent !important;

  font-size: 0.85rem !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;

  text-align: left !important;

  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;

  overflow-y: auto !important;
}

#ideaInput::placeholder {
  white-space: normal !important;
}


.landing-title,
.landing-title--billboard{
  font-size: 4.85rem !important;
}


body.report-open .landing-subtitle,
body.report-open .landing-title,
body.report-open .powered-by{
  display: none !important;
}

body.report-open #ideaForm{
  margin-top: -2vh!important;
}

/* =========================================================
   LANDING 3 CARDS — FULL WIDTH, CENTERED, ICON ON TOP
   ========================================================= */

#landingJourneySection {
  width: 100% !important;
  margin: 1.2rem 0 0 !important;
  padding: 0 !important;
}

#landingJourneySection .idea-flow-top {
  width: 100% !important;
  max-width: 100% !important;

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

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

/* each card */
#landingJourneySection .idea-flow-card {
  width: 100% !important;
  min-width: 0 !important;

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

  text-align: center !important;

  padding: 1rem 1.2rem !important;
  min-height: 8.5rem !important;
  border-radius: 1.25rem !important;
}

/* icon centered on top */
#landingJourneySection .idea-flow-icon {
  width: 3rem !important;
  height: 3rem !important;

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

  margin: 0 0 0.7rem 0 !important;
  flex: 0 0 auto !important;
}

/* text area gets almost full width */
#landingJourneySection .idea-flow-copy {
  width: 100% !important;
  max-width: 95% !important;

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

  text-align: center !important;
}

/* title */
#landingJourneySection .idea-flow-copy h3 {
  width: 100% !important;
  margin: 0 0 0.45rem 0 !important;

  text-align: center !important;
  font-size: 0.7rem !important;
  line-height: 1.05 !important;
  letter-spacing: 0.05em !important;
}

/* paragraph */
#landingJourneySection .idea-flow-copy p {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;

  text-align: center !important;
  font-size: 0.82rem !important;
  line-height: 1.25 !important;
}

#landingJourneySection .idea-flow-visual {
  transform: translateY(-2rem);
}



/* =========================================
   FIX SIDEBAR BACKGROUND IMAGES
   ========================================= */
   
.sidebar__nav,
.sidebar-step{
 width:15vh;
}

.sidebar-step__media {
  inset: 0 !important;

  background-size: 95% 95% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  transform: none !important;
}

.sidebar-step:hover .sidebar-step__media {
  transform: none !important;
}





.idea-flow-top {
  transform: scale(1.05);
  transform-origin: center top;
}



#landingFooterStrip {
  margin-top: 3rem !important;
}




/* Wrapper for BOTH metrics + score */
.hero-report-metrics {
  margin-top: 5vh;
  transform: scale(0.7);
  transform-origin: bottom left;
}


.hero-report-card {
  min-height: 100%;
}

/* =========================================================
   HERO REPORT — ANCHOR METRICS TO BOTTOM
   ========================================================= */

.hero-report-card {
  display: grid !important;
  grid-template-rows: minmax(15vh, 1fr) 5.8vh !important;
  align-items: stretch !important;
}

.hero-report-card__top {
  min-height: 0 !important;
  align-self: stretch !important;
}

/* this is the category row */
.hero-report-metrics {
  align-self: end !important;
  padding-top: 0.6rem !important;
  min-height: 0 !important;
}

/* stop each category from floating in the middle */
.hero-report-metric {
  min-height: 0 !important;
  justify-content: flex-end !important;

}

.morph-showcase__stage,
#heroMorphStage {
  min-height: 0 !important;
  height: 20rem !important;
}


/* =========================================================
   FIX HERO METRIC BAR ALIGNMENT
   Gray track + blue fill same baseline
   ========================================================= */

.hero-report-metric:not(:last-child)::before {
  bottom: 0.1rem !important;
  left: 1.1rem !important;
  right: 1.1rem !important;
  height: 0.32rem !important;
  z-index: 0 !important;
}

.hero-report-metric:not(:last-child) strong::before {
  bottom: -1.25rem !important;
  left: 0 !important;
  height: 0.32rem !important;
  z-index: 1 !important;
}

.hero-report-score__inner
{
  height: 11vh;

}

.hero-report-score-wrap {
  height: 20vh !important;
  width: 95% !important;

  transform: scale(1.1);
  transform-origin: center;

  margin: auto !important;
}


/* TARGET ONLY THESE REPORT CARDS */
.report-panel {
  font-size: 0.78rem !important; /* GLOBAL shrink */
  padding: 14px !important;
}

/* HEADERS */
.report-panel__heading h3 {
  font-size: 20px !important;
}

.report-panel__heading p {
  font-size: 11px !important;
  opacity: 0.7;
}

/* LIST ITEMS (competition + steps) */
.report-list__copy strong,
.report-step__copy strong {
  font-size: 13px !important;
}

.report-list__copy p,
.report-step__copy p {
  font-size: 11px !important;
}

/* NUMBERS (1,2,3 bubbles) */
.report-list__num,
.report-step__num {
  width: 26px !important;
  height: 26px !important;
  font-size: 12px !important;
}

/* FINANCIAL SECTION */
.report-metric-row__copy span {
  font-size: 11px !important;
}

.report-metric-row__copy strong {
  font-size: 13px !important;
}

/* ICONS */
.report-svg-icon {
  width: 18px !important;
  height: 18px !important;
}

.report-svg-icon--sm {
  width: 14px !important;
  height: 14px !important;
}

/* FINANCIAL SNAPSHOT — force smaller text */
.report-panel--financials .report-panel__heading h3 {
  font-size: 20px !important;
  line-height: 1.05 !important;
}

.report-panel--financials .report-panel__heading p {
  font-size: 12px !important;
  line-height: 1.1 !important;
}

.report-panel--financials .report-metric-row {
  padding: 10px 0 !important;
  gap: 10px !important;
}

.report-panel--financials .report-metric-row__copy span {
  font-size: 20px !important;
  line-height: 1.15 !important;
}

.report-panel--financials .report-metric-row__copy strong {
  font-size: 14px !important;
  line-height: 1.1 !important;
}

.report-panel--financials .report-metric-row__icon {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
}

.report-panel--financials .report-svg-icon {
  width: 15px !important;
  height: 15px !important;
}


/* FORCE ALL 3 TOP CARDS TO BE COMPACT */
.report-panel--competition,
.report-panel--steps,
.report-panel--financials {
  height: 340px !important;
  min-height: 340px !important;
  max-height: 240px !important;
  overflow: hidden !important;
}

/* REMOVE ANY HOVER EXPANSION OR SHIFT */
.report-panel:hover,
.report-panel--competition:hover,
.report-panel--steps:hover,
.report-panel--financials:hover {
  transform: none !important;
  scale: 1 !important;
  height: 340px !important;
  min-height: 340px !important;
  max-height: 340px !important;
}

/* bottom row should NOT inherit 340px */
.report-panel--flags:hover,
.report-panel--cta:hover,
.report-panel--cta-image:hover,
.report-panel--effort:hover {
  transform: none !important;
  scale: 1 !important;
  height: 250px !important;
  min-height: 250px !important;
  max-height: 250px !important;
}

/* TIGHTEN INTERNAL SPACING */
.report-panel {
  padding: 16px !important;
}

/* BRING ROWS CLOSER */
.report-dashboard__grid {
  row-gap: 12px !important;
}

#report-panel__heading,
#ttl,
#de,
#dailyEffort,
#timeToLaunch{
  font-size: 16px !important;
}



/* KILL CLICK-TO-BUILD IMAGE HOVER ZOOM */
.report-cta-image-button:hover .report-cta-image,
#clickToBuildButton:hover .report-cta-image {
  transform: none !important;
  filter: none !important;
}

/* remove hover overlay too */
.report-cta-image-button:hover::after,
#clickToBuildButton:hover::after {
  opacity: 0 !important;
}

/* stop animation smoothing */
.report-cta-image {
  transition: none !important;
}



.no-hover * {
  transform: none !important;
  transition: none !important;
}

.report-cta-image-button:hover .report-cta-image {
  transform: none !important;
  filter: none !important;
}

.report-cta-image-button:hover::after {
  opacity: 0 !important;
}

.report-panel--flags{
  font-size: 12px !important;
}


/* ========================================
   STOP SLIDESHOW WHEN PROCESSING OR REPORT
   ======================================== */

/* Hide slideshow when processing */
body.is-processing .hero-visual {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Hide slideshow when report is open */
body.report-open .hero-visual {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Optional: also pause pointer/animations */
body.is-processing .hero-visual,
body.report-open .hero-visual {
  pointer-events: none !important;
}


/* =========================================================
   STANDARDIZED SCORE TONE SYSTEM
   One source of truth for all score colors
   ========================================================= */

:root {
  --score-excellent: #2457f5; /* blue */
  --score-good: #111827;      /* black */
  --score-warning: #f79009;   /* orange */
  --score-bad: #ef4444;       /* red */
}

.score-tone-excellent {
  --score-color: var(--score-excellent);
}

.score-tone-good {
  --score-color: var(--score-good);
}

.score-tone-warning {
  --score-color: var(--score-warning);
}

.score-tone-bad {
  --score-color: var(--score-bad);
}

/* Any element with a tone class can color its important text */
.score-tone-excellent,
.score-tone-good,
.score-tone-warning,
.score-tone-bad {
  color: var(--score-color) !important;
}

/* Hero metric cards */
.hero-report-metric.score-tone-excellent span,
.hero-report-metric.score-tone-excellent strong,
.hero-report-metric.score-tone-good span,
.hero-report-metric.score-tone-good strong,
.hero-report-metric.score-tone-warning span,
.hero-report-metric.score-tone-warning strong,
.hero-report-metric.score-tone-bad span,
.hero-report-metric.score-tone-bad strong {
  color: var(--score-color) !important;
}

/* Main score */
.hero-report-score-wrap.score-tone-excellent,
.hero-report-score-wrap.score-tone-good,
.hero-report-score-wrap.score-tone-warning,
.hero-report-score-wrap.score-tone-bad {
  border-color: color-mix(in srgb, var(--score-color) 22%, transparent) !important;
}

.hero-report-score-wrap.score-tone-excellent #heroReportScoreValue,
.hero-report-score-wrap.score-tone-good #heroReportScoreValue,
.hero-report-score-wrap.score-tone-warning #heroReportScoreValue,
.hero-report-score-wrap.score-tone-bad #heroReportScoreValue,
.hero-report-score-wrap.score-tone-excellent .hero-report-kicker,
.hero-report-score-wrap.score-tone-good .hero-report-kicker,
.hero-report-score-wrap.score-tone-warning .hero-report-kicker,
.hero-report-score-wrap.score-tone-bad .hero-report-kicker {
  color: var(--score-color) !important;
}

/* Advice / verdict */
#heroReportAdvice.score-tone-excellent,
#heroReportAdvice.score-tone-good,
#heroReportAdvice.score-tone-warning,
#heroReportAdvice.score-tone-bad,
#heroReportVerdict.score-tone-excellent,
#heroReportVerdict.score-tone-good,
#heroReportVerdict.score-tone-warning,
#heroReportVerdict.score-tone-bad {
  color: var(--score-color) !important;
}

/* Dashboard metric values */
.report-score-value.score-tone-excellent,
.report-score-value.score-tone-good,
.report-score-value.score-tone-warning,
.report-score-value.score-tone-bad {
  color: var(--score-color) !important;
}

#redFlagText,
#greenFlagText,
#stepText1,
#stepText2,
#stepText3
{
  font-size: 12px !important;
}



/* APPLE-LIKE COMPETITION SLIDESHOW */
.report-panel--competition .report-list {
  position: relative !important;
  height: 190px !important;
  overflow: hidden !important;
  display: block !important;
  margin-top: 10px !important;
}

.report-panel--competition .report-list__item {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;

  padding: 24px 6px !important;
  border-top: 1px solid #e8edf4 !important;

  opacity: 0 !important;
  transform: translateX(18px) scale(.98) !important;
  pointer-events: none !important;

  transition:
    opacity .7s cubic-bezier(.22,.61,.36,1),
    transform .7s cubic-bezier(.22,.61,.36,1);
}

.report-panel--competition .report-list__item.is-active {
  opacity: 1 !important;
  transform: translateX(0) scale(1) !important;
  pointer-events: auto !important;
}

.report-panel--competition .report-list__copy strong {
  font-size: 22px !important;
  line-height: 1.1 !important;
}

.report-panel--competition .report-list__copy p {
  font-size: 15px !important;
  line-height: 1.5 !important;
}

.competition-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 8px;
}

.competition-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #cbd5e1;
  transition: all .35s ease;
}

.competition-dot.is-active {
  width: 18px;
  background: #2457f5;
}





/* APPLE-LIKE NEXT STEPS HOVER BUTTON EFFECT */
.report-panel--steps {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform .28s cubic-bezier(.22,.61,.36,1),
    box-shadow .28s cubic-bezier(.22,.61,.36,1),
    border-color .28s cubic-bezier(.22,.61,.36,1);
}

.report-panel--steps::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.35), transparent 26%),
    linear-gradient(135deg, #4c79ff 0%, #2457f5 48%, #122fb8 100%);
  transition: opacity .35s cubic-bezier(.22,.61,.36,1);
}

.report-panel--steps::after {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -1;
  opacity: 0;
  background:
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 38%,
      rgba(255,255,255,.35) 50%,
      transparent 62%,
      transparent 100%
    );
  transform: translateX(-70%) rotate(8deg);
  transition: opacity .25s ease;
}

.report-panel--steps:hover {
  transform: translateY(-6px) scale(1.015);
  border-color: rgba(36,87,245,.35) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 28px 58px rgba(36,87,245,.28),
    0 0 0 4px rgba(36,87,245,.08) !important;
}

.report-panel--steps:hover::before {
  opacity: 1;
}

.report-panel--steps:hover::after {
  opacity: 1;
  animation: nextStepButtonSweep 1.35s cubic-bezier(.22,.61,.36,1);
}

.report-panel--steps:hover .report-panel__heading h3,
.report-panel--steps:hover .report-panel__heading p,
.report-panel--steps:hover .report-step__copy strong,
.report-panel--steps:hover .report-step__copy p {
  color: #ffffff !important;
}

.report-panel--steps:hover .report-panel__icon,
.report-panel--steps:hover .report-step__num {
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.35), transparent 34%),
    linear-gradient(180deg, #ffffff, #dbe7ff) !important;
  color: #2457f5 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 12px 24px rgba(0,0,0,.16) !important;
}

.report-panel--steps:hover .report-step {
  border-color: rgba(255,255,255,.22) !important;
}

@keyframes nextStepButtonSweep {
  0% {
    transform: translateX(-80%) rotate(8deg);
  }
  100% {
    transform: translateX(80%) rotate(8deg);
  }
}


/* FINAL FORCE: DARK BLUE SELECTED HERO METRIC */
.hero-report-card .hero-report-metrics .hero-report-metric.is-selected {
  background:
    linear-gradient(135deg, #1f49d9 0%, #2457f5 45%, #122fb8 100%) !important;

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

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 14px 28px rgba(36,87,245,.34),
    0 0 0 2px rgba(36,87,245,.16) !important;
}

/* kill the white wash overlay */
.hero-report-card .hero-report-metrics .hero-report-metric.is-selected::before {
  background: none !important;
  opacity: 0 !important;
}

/* clean bottom line */
.hero-report-card .hero-report-metrics .hero-report-metric.is-selected::after {
  background: rgba(255,255,255,.85) !important;
  box-shadow: none !important;
}

/* force white label + score */
.hero-report-card .hero-report-metrics .hero-report-metric.is-selected span,
.hero-report-card .hero-report-metrics .hero-report-metric.is-selected strong {
  color: #ffffff !important;
}

/* ===== HOVER (not selected yet) ===== */
.hero-report-metric:hover:not(.is-selected) {
  transform: translateY(-1px);
  background: rgba(36,87,245,0.06);
  cursor: pointer;
}

/* ===== OPTIONAL: MAKE IT FEEL BIGGER ===== */
.hero-report-metric span {
  font-size: 13px;
  letter-spacing: 0.6px;
}

.hero-report-metric strong {
  font-size: 20px;
}

.hero-report-metric.is-selected::after {
  content: "";
  position: absolute;
  inset: -40%;
  border-radius: inherit;

  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 38%,
    rgba(255,255,255,.35) 50%,
    transparent 62%,
    transparent 100%
  );

  transform: translateX(-70%) rotate(8deg);
  animation: metricSweep 1.2s cubic-bezier(.22,.61,.36,1);
}

@keyframes metricSweep {
  0% { transform: translateX(-80%) rotate(8deg); }
  100% { transform: translateX(80%) rotate(8deg); }
}

.report-panel--cta-image:hover img {
  transform: scale(1.2);
}

.report-panel--flags.no-hover:hover {
  transform: none !important;
  margin-top: 0 !important;
  box-shadow: none !important;
}

.report-panel--flags .flag-row {
  transform: none !important;
  margin-top: 0 !important;
}


/* FIX bottom dashboard row height */
.report-panel--flags,
.report-panel--cta,
.report-panel--cta-image,
.report-panel--effort {
  height: 250px !important;
  min-height: 250px !important;
  max-height: 250px !important;
}


.report-panel--flags:hover,
.report-panel--cta:hover,,
.report-panel--cta-image:hover,,
.report-panel--effort:hover, {
  height: 350px !important;
  min-height: 350px !important;
  max-height: 350px !important;
}

/* keep content centered */
.report-panel--flags,
.report-panel--cta-image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* image should scale inside card, not push card */
.report-cta-image-button,
.report-cta-image-button img {
  max-height: 100% !important;
}

.report-cta-image-button img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  transition: transform .3s ease !important;
}

.report-cta-image-button:hover img {
  transform: scale(1.1) !important;
}



.report-panel--cta-image {
  position: relative;
  overflow: hidden;
  padding: 16px;
  transition: padding 0.3s ease;
}

.report-panel--cta-image:hover {
  padding: 0;
}

.report-cta-image-button,
.report-cta-image-button img {
  width: 100%;
  height: 100%;
}

.report-cta-image-button img {
  object-fit: contain; /* KEY */
  transition: transform 0.4s ease;
}

.report-panel--cta-image:hover img {
  transform: scale(1.15);
}

.report-panel--cta-image:hover {
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

#click-here{
  color: #2457f5; /* deeper Arcanis blue */
}

.report-panel--competition {
  transition: 
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.report-panel--competition:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

/* =========================================================
   PROCESSING VIDEO = SAME FULL SCREEN COVER AS SLIDESHOW
   ========================================================= */

.hero-processing-layer {
  position: absolute !important;
  inset: 20px !important;
  width: auto !important;
  height: auto !important;

  display: none;
  overflow: hidden !important;
  border-radius: 22px !important;
  background: #05070b !important;
  z-index: 20 !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;
  display: block !important;

  opacity: 1 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Overlay must cover same full video area */
.hero-processing-overlay {
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}



/* =========================================================
   DESKTOP ONLY — HERO REPORT LEFT PANEL CONNECTED VERSION
   Text area slightly narrower + taller + touching categories
   ========================================================= */

@media (min-width: 1024px) {

  .hero-report-card {
    position: relative !important;
    display: grid !important;
    grid-template-rows: 1fr auto !important;

    /* no vertical gap between text panel and metric strip */
    row-gap: 0 !important;

    padding: 18px !important;
    overflow: hidden !important;
  }

  .hero-report-card__top {
    display: grid !important;

    /*
      190px = score card width
      24px = gap between gray panel and score card
      Increase 24px if you want text panel even shorter.
    */
    grid-template-columns: minmax(0, 1fr) 190px !important;
    grid-template-areas: "main score" !important;

    gap: 24px !important;
    align-items: stretch !important;

    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .hero-report-card .hero-report-main {
    grid-area: main !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    /*
      This makes the gray text area taller.
      Increase to 210px / 220px if you want more height.
    */
    min-height: 265px !important;
    height: 100% !important;

    margin: 0 !important;

    padding: 22px 26px 0 !important;

    border-radius: 16px 16px 0 0 !important;
    border: 1px solid rgba(214,223,238,.95) !important;
    border-bottom: 0 !important;

    background:
      linear-gradient(180deg, rgba(246,248,253,.96), rgba(240,244,251,.92)) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.96),
      inset 0 -18px 42px rgba(120,145,190,.06) !important;
  }

  #heroReportSummary,
  .hero-report-summary-big {
    width: 100% !important;
    max-width: none !important;
    margin: 18px 0 0 !important;
  }

  .hero-report-metrics {
    /*
      Match the text panel width.
      190px = score card width
      24px = gap from .hero-report-card__top
    */
    width: calc(100% - 190px - 24px) !important;
    max-width: calc(100% - 190px - 24px) !important;

    margin: 0 !important;

    /*
      Pulls categories directly into the gray panel.
      If you still see a hairline gap, change 0 to -1px.
    */
    margin-top: 0 !important;

    padding: 9px 0 0 !important;

    border-top: 1px solid rgba(214,223,238,.95) !important;
    border-left: 1px solid rgba(214,223,238,.95) !important;
    border-right: 1px solid rgba(214,223,238,.95) !important;
    border-bottom: 1px solid rgba(214,223,238,.95) !important;

    border-radius: 16px 16px 16px 16px !important;

    background:
      linear-gradient(180deg, rgba(240,244,251,.92), rgba(236,241,249,.94)) !important;

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

    overflow: hidden !important;
  }

  .hero-report-metric {
    min-height: 64px !important;
    padding: 0 10px 10px !important;

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

  .hero-report-score-wrap {
    grid-area: score !important;
    margin: 0 !important;
    height: 100% !important;
  }
}




/* =========================================================
   DISABLE HERO REPORT GRAY + BLUE METRIC BARS
   ========================================================= */

/* gray background tracks */
.hero-report-metric::before,
.hero-report-metric:not(:last-child)::before {
  content: none !important;
  display: none !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* blue fill bars under scores */
.hero-report-metric strong::before,
.hero-report-metric:not(:last-child) strong::before {
  content: none !important;
  display: none !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* selected blue underline bar */
.hero-report-metric.is-selected::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}






.idea-form__field.is-processing #ideaInput {
  opacity: 0 !important;
  visibility: hidden !important;
}


.sidebar-step.is-active::after {
  background:
    radial-gradient(circle at 50% 50%,
      rgba(14, 47, 145, .22) 0%,
      rgba(14, 47, 145, .10) 38%,
      rgba(14, 47, 145, 0) 72%
    ) !important;
}




/* =========================================================
   FINAL UNIVERSAL SCORE COLOR SYSTEM
   Red = bad | Yellow = fair | Black = good | Blue = excellent
   ========================================================= */

:root{
  --score-bad:#ef4444;
  --score-fair:#f5c542;
  --score-good:#101828;
  --score-excellent:#2457f5;
}

.metric-bad,
.score-tone-bad,
.advice-red,
.advice-red-dark,
.score-low{
  --score-color:var(--score-bad);
  color:var(--score-bad) !important;
}

.metric-fair,
.score-tone-warning,
.advice-orange,
.score-mid{
  --score-color:var(--score-fair);
  color:var(--score-fair) !important;
}

.metric-okay,
.metric-good,
.score-tone-good,
.advice-black{
  --score-color:var(--score-good);
  color:var(--score-good) !important;
}

.score-tone-excellent,
.advice-blue,
.score-high{
  --score-color:var(--score-excellent);
  color:var(--score-excellent) !important;
}

/* Main score + advice */
#heroReportScoreValue,
#heroReportAdvice,
#heroReportVerdict,
.hero-report-score-wrap .hero-report-kicker{
  color:var(--score-color, #2457f5) !important;
}

/* Hero category metric values */
.hero-report-metric.metric-bad > strong{ color:var(--score-bad) !important; }
.hero-report-metric.metric-fair > strong{ color:var(--score-fair) !important; }
.hero-report-metric.metric-okay > strong{ color:var(--score-good) !important; }
.hero-report-metric.metric-good > strong{ color:var(--score-excellent) !important; }

/* Evidence / dashboard metric values */
.evidence-metric.metric-bad strong,
#riskLevelValue.metric-bad{ color:var(--score-bad) !important; }

.evidence-metric.metric-fair strong,
#riskLevelValue.metric-fair{ color:var(--score-fair) !important; }

.evidence-metric.metric-okay strong,
#riskLevelValue.metric-okay{ color:var(--score-good) !important; }

.evidence-metric.metric-good strong,
#riskLevelValue.metric-good{ color:var(--score-excellent) !important; }

/* Mini idea tab score colors */
.idea-mini-tab__score.score-low{ color:var(--score-bad) !important; }
.idea-mini-tab__score.score-mid{ color:var(--score-fair) !important; }
.idea-mini-tab__score.score-good{ color:var(--score-good) !important; }
.idea-mini-tab__score.score-high{ color:var(--score-excellent) !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;
}


/* =========================================================
   FINAL MINI TAB SCORE COLORS
   Same score panel as report:
   0-44 red | 45-59 yellow | 60-74 black | 75-100 blue
   ========================================================= */

.idea-mini-tab__score.score-low {
  color: #ef4444 !important;
}

.idea-mini-tab__score.score-mid {
  color: #f5c542 !important;
}

.idea-mini-tab__score.score-good {
  color: #101828 !important;
}

.idea-mini-tab__score.score-high {
  color: #2457f5 !important;
}



#submitIdeaButton.is-text-gone.is-text-gone-up .button__char {
  opacity: 0 !important;
  transform: translateY(-22px) rotate(-18deg) !important;
  filter: blur(1px) !important;
}

#submitIdeaButton.is-text-gone.is-text-gone-down .button__char {
  opacity: 0 !important;
  transform: translateY(22px) rotate(18deg) !important;
  filter: blur(1px) !important;
}