/* Shared styles for ulTrain mode-led marketing pages. */
.mode-choices {
  max-width: 1120px;
  margin: 48px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.mode-choice {
  position: relative;
  display: flex;
  min-height: 310px;
  flex-direction: column;
  justify-content: space-between;
  padding: 34px;
  overflow: hidden;
  border-radius: 30px;
  text-decoration: none;
  border: 1px solid rgba(230,126,34,.22);
  background: linear-gradient(160deg,#fffaf6 0%,#f7e7d8 100%);
  color: var(--text-dark);
  box-shadow: 0 22px 70px rgba(26,36,51,.08);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mode-choice:hover { transform: translateY(-5px); box-shadow: 0 28px 80px rgba(26,36,51,.13); border-color: rgba(230,126,34,.5); }
.mode-choice.hybrid { background: linear-gradient(155deg,var(--navy) 0%,#24384f 70%,#49301f 100%); color: #fff; border-color: rgba(255,255,255,.12); }
.mode-choice.strength { background: linear-gradient(160deg,#f6f7f9 0%,#e7ebf0 100%); }
.mode-kicker { font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-text); }
.mode-choice.hybrid .mode-kicker { color: var(--orange-lt); }
.mode-choice h3 { margin-top: 12px; font-size: clamp(2rem,4vw,3rem); letter-spacing: -.04em; line-height: 1; }
.mode-choice p { max-width: 28rem; margin-top: 18px; font-size: 1rem; line-height: 1.65; color: var(--text-gray); }
.mode-choice.hybrid p { color: rgba(255,255,255,.72); }
.mode-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-weight: 800; color: var(--orange-text); }
.mode-choice.hybrid .mode-link { color: var(--orange-lt); }
.mode-link::after { content: '→'; transition: transform .2s ease; }
.mode-choice:hover .mode-link::after { transform: translateX(4px); }
.hero-mode-nav { margin-top: 36px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hero-mode-nav a { min-width: 150px; padding: 14px 22px; border-radius: 999px; text-decoration: none; font-weight: 800; border: 1px solid rgba(255,255,255,.22); color: #fff; background: rgba(255,255,255,.08); backdrop-filter: blur(10px); }
.hero-mode-nav a:hover { background: var(--orange); border-color: var(--orange); }
.mode-page-hero { padding: 132px 5% 82px; background: linear-gradient(165deg,var(--navy) 0%,#203248 62%,#382418 100%); color:#fff; }
.mode-page-hero .inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: center; }
.mode-page-hero h1 { font-size: clamp(2.7rem,7vw,5.4rem); line-height: .98; letter-spacing: -.05em; text-wrap: balance; }
.mode-page-hero h1 span { color: var(--orange); }
.mode-page-hero .lead { margin-top: 22px; max-width: 620px; font-size: clamp(1.04rem,2vw,1.25rem); line-height: 1.65; color: rgba(255,255,255,.74); }
.mode-page-hero .mini { margin-top: 18px; font-size: .86rem; color: rgba(255,255,255,.52); }
.mode-page-shot { max-width: 330px; justify-self: center; padding: 12px; border-radius: 34px; background: #0e1722; box-shadow: 0 35px 90px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.12); }
.mode-page-shot img { border-radius: 24px; }
.story-grid { max-width: 1080px; margin: 56px auto 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.story-card { padding: 30px; border: 1px solid var(--line); border-radius: 26px; background: #fff; box-shadow: 0 16px 48px rgba(26,36,51,.05); }
.story-card h3 { font-size: 1.22rem; letter-spacing: -.02em; }
.story-card p { margin-top: 10px; color: var(--text-gray); line-height: 1.65; }
.mode-feature-band { max-width: 1080px; margin: 56px auto 0; padding: 36px; border-radius: 30px; background: var(--navy); color:#fff; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.mode-feature-band h3 { font-size: clamp(1.6rem,3vw,2.2rem); letter-spacing:-.03em; }
.mode-feature-band p { color: rgba(255,255,255,.7); line-height:1.65; }
.mode-bullets { display:grid; gap:12px; list-style:none; }
.mode-bullets li { padding-left: 24px; position:relative; color: rgba(255,255,255,.85); }
.mode-bullets li::before { content:'✓'; position:absolute; left:0; color:var(--orange-lt); font-weight:900; }
.mode-switch { max-width:1080px; margin:0 auto; display:grid; grid-template-columns: repeat(3,1fr); gap:14px; }
.mode-switch a { text-decoration:none; border:1px solid var(--line); border-radius:20px; padding:20px; color:var(--text-dark); background:#fff; font-weight:800; text-align:center; }
.mode-switch a[aria-current='page'] { background:var(--navy); color:#fff; border-color:var(--navy); }
.mode-switch a:hover { border-color:rgba(230,126,34,.55); }
@media (max-width: 820px) {
  .mode-choices, .story-grid, .mode-page-hero .inner, .mode-feature-band { grid-template-columns: 1fr; }
  .mode-choice { min-height: 250px; }
  .mode-page-hero { padding-top: 108px; }
  .mode-page-shot { max-width: 270px; }
  .mode-feature-band { padding: 28px; }
}
@media (max-width: 560px) {
  .mode-choices { gap: 14px; }
  .mode-choice { padding: 26px; border-radius: 24px; }
  .hero-mode-nav { display:grid; grid-template-columns:1fr; }
  .hero-mode-nav a { width:100%; }
  .mode-switch { grid-template-columns:1fr; }
}