/* ============================================================
   Winjit US - Startup Studio
   Page-specific extras only. The hero, card grid, gradient band,
   matrix, black section and closing band come from
   css/industry.css and css/landing.css.
   ============================================================ */

/* ------------------------------------------------------------
   Engagement model cards
   ------------------------------------------------------------ */
.ss-tracks { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2vw, 26px); margin-top: 34px; }
.ss-track {
  display: flex; flex-direction: column; padding: clamp(24px, 2.8vw, 34px);
  background: #fff; border: 1px solid var(--strokes); border-radius: var(--radius-block);
  transition: opacity 500ms var(--ease-out), transform 250ms var(--ease-out), box-shadow 250ms ease, border-color 250ms ease;
}
.ss-track:hover { transform: translateY(-5px); box-shadow: var(--shadow-blue-lift); border-color: var(--blue-hover-border); }
.ss-track__label {
  align-self: flex-start; margin-bottom: 14px; padding: 6px 14px; border-radius: var(--radius-pill);
  background: var(--soft-blue); border: 1px solid var(--blue-wash-border);
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary);
}
.ss-track h3 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; margin: 0 0 14px; color: var(--grey-900); }
.ss-track .textlink { margin-top: auto; }
.ss-track__body { margin: 0 0 28px; font-size: 16px; line-height: 1.65; color: var(--grey-600); }
.ss-track__cta { margin-top: auto; align-self: flex-start; }
@media (max-width: 860px) { .ss-tracks { grid-template-columns: 1fr; } }

/* founder-friendly promise chips above the IP matrix */
.config-chips--center { justify-content: center; margin: 30px 0 0; }

/* ------------------------------------------------------------
   Startup build cards
   ------------------------------------------------------------ */
/* the figures row defines its own grid: the story page rules that
   .cs-results__row relies on are not loaded here */
.ss-figures {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.8vw, 22px); margin-top: 34px;
}
.ss-figures .in-imp { flex: initial; }
@media (max-width: 1000px) { .ss-figures { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .ss-figures { grid-template-columns: 1fr; } }

/* closing note under the matrix and the pillar grid - about.css owns this
   class but is not loaded on this page, so it ships here instead */
.ab-note { margin: 28px 0 0; font-size: 15px; line-height: 1.6; color: var(--grey-600); }
.ab-note a { color: var(--primary); font-weight: 700; }
.ab-note a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ab-note svg { width: 16px; height: 16px; vertical-align: -3px; }

/* figure line on a framework band */
.ss-band__fig {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--grey-200);
  font-size: 14px; color: var(--grey-600);
}
.ss-band__fig b {
  display: block; font-family: var(--ff-display); font-size: 24px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--primary); margin-bottom: 2px;
}

/* ------------------------------------------------------------
   From idea to handover - five stages on the black surface
   ------------------------------------------------------------ */
.ss-stages { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(14px, 1.6vw, 20px); margin-top: 34px; }
.ss-stage {
  position: relative; display: flex; flex-direction: column; padding: 24px 20px;
  background: var(--midnight-card); border: 1px solid var(--midnight-card-border); border-radius: var(--radius-card);
  transition: opacity 500ms var(--ease-out), transform 250ms var(--ease-out), border-color 250ms ease;
}
.ss-stage:hover { transform: translateY(-4px); border-color: rgba(0, 237, 135, .45); }
.ss-stage__num {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; margin-bottom: 16px;
  background: var(--grad-brand); color: #fff; font-size: 14px; font-weight: 700;
}
.ss-stage h3 { font-size: 17px; font-weight: 700; margin: 0 0 4px; color: #fff; }
.ss-stage__time {
  margin: 0 0 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--aurora-mint);
}
.ss-stage p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--grey-400); }
.ss-stage__gets {
  margin-top: auto !important; padding-top: 14px; border-top: 1px solid var(--midnight-card-border);
  font-size: 13.5px; color: var(--grey-400);
}
.ss-stage__gets b {
  display: block; margin-bottom: 3px; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--grey-500);
}
.ss-pricing { margin: 30px 0 0; text-align: center; font-size: 15px; color: var(--grey-400); }
@media (max-width: 1100px) { .ss-stages { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .ss-stages { grid-template-columns: 1fr; } }

/* four-stage variant - The Trajectory */
.ss-stages--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .ss-stages--four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ss-stages--four { grid-template-columns: 1fr; } }

/* three-pillar variant - Built to survive due diligence */
.in-dec-grid--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .in-dec-grid--three { grid-template-columns: 1fr; } }

/* three-metric variant - Engineered for traction */
.ss-figures--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .ss-figures--three { grid-template-columns: 1fr; } }