.stem-page { --stem-red: #b20d13; --stem-ink: #1e2228; --stem-muted: #626a73; --stem-line: #e2e4e7; background: #f7f7f8; }
.stem-page .content { box-sizing: border-box; max-width: 1080px; padding: 52px 28px 70px; }
.stem-hero .content { max-width: 1080px; }
.stem-hero .hero-intro { max-width: 820px; margin: 18px auto 0; font-size: 17px; line-height: 1.65; }
.stem-eyebrow { margin: 0 0 8px; color: var(--stem-red); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.stem-hero .stem-eyebrow { color: #fff; opacity: .85; }
.stem-introduction { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 42px; align-items: center; margin-bottom: 28px; padding: 36px 40px; background: #17191d; color: #fff; border-radius: 16px; box-shadow: 0 16px 35px rgba(15,18,22,.15); }
.stem-intro-copy p { margin: 0 0 16px; font-size: 16px; line-height: 1.72; }
.stem-intro-copy p:last-child { margin-bottom: 0; }
.stem-visual { display: grid; gap: 9px; }
.stem-visual i { display: block; height: 38px; border-left: 4px solid var(--stem-red); background: linear-gradient(90deg, rgba(178,13,19,.4), rgba(255,255,255,.04)); border-radius: 3px 9px 9px 3px; }
.stem-visual i:nth-child(2) { margin-left: 10px; }.stem-visual i:nth-child(3) { margin-left: 20px; }.stem-visual i:nth-child(4) { margin-left: 30px; }.stem-visual i:nth-child(5) { margin-left: 40px; }.stem-visual i:nth-child(6) { margin-left: 50px; }
.stem-section { position: relative; margin-top: 22px; padding: 38px 46px; overflow: hidden; background: #fff; border: 1px solid var(--stem-line); border-radius: 14px; box-shadow: 0 6px 20px rgba(25,30,38,.055); }
.stem-section::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--stem-red); }
.stem-section h2, .stem-faq h2, .stem-cta h2 { position: relative; margin: 0 0 22px; color: var(--stem-ink); font-size: 27px; line-height: 1.22; }
.stem-section p { max-width: 900px; margin: 0 0 16px; color: #343a42; font-size: 15.5px; line-height: 1.75; }
.stem-section p:last-child { margin-bottom: 0; }
.section-number { position: absolute; top: 16px; right: 25px; color: rgba(178,13,19,.09); font-size: 58px; font-weight: 800; line-height: 1; }
.stem-page .feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 25px 0 0; padding: 0; font-size: 15px; line-height: 1.55; list-style: none; }
.stem-page .feature-list li { position: relative; padding: 16px 18px 16px 42px; color: #343a42; font-size: 15px; line-height: 1.55; background: #f6f6f7; border-radius: 8px; }
.feature-list li::before { content: "✓"; position: absolute; top: 15px; left: 16px; color: var(--stem-red); font-weight: 900; }
.stem-highlight { color: #fff; background: linear-gradient(135deg, #9e080e, #c71b21); border: 0; }
.stem-highlight::before { display: none; }.stem-highlight h2, .stem-highlight p { color: #fff; }.stem-highlight .section-number { color: rgba(255,255,255,.13); }
.stem-section a { color: var(--stem-red); font-weight: 700; }
.stem-faq { margin-top: 38px; padding: 42px 46px; background: #fff; border-radius: 14px; box-shadow: 0 6px 20px rgba(25,30,38,.055); }
.faq-item { border-top: 1px solid var(--stem-line); }.faq-item:last-child { border-bottom: 1px solid var(--stem-line); }
.faq-item summary { position: relative; padding: 20px 50px 20px 0; color: var(--stem-ink); cursor: pointer; list-style: none; }
.faq-item summary h3 { margin: 0; color: inherit; font-size: 17px; font-weight: 750; line-height: 1.4; }
.faq-item summary::-webkit-details-marker { display: none; }.faq-item summary::after { content: "+"; position: absolute; top: 14px; right: 5px; width: 32px; height: 32px; color: #fff; text-align: center; font-size: 25px; line-height: 30px; background: var(--stem-red); border-radius: 50%; }
.faq-item[open] summary::after { content: "−"; }.faq-item p { margin: 0; padding: 0 54px 22px 0; color: #454c55; font-size: 15px; line-height: 1.7; }
.stem-cta { margin-top: 28px; padding: 42px 46px; color: #fff; background: #191b20; border-radius: 14px; }
.stem-cta h2 { color: #fff; margin-bottom: 14px; }.stem-cta p:not(.stem-eyebrow) { max-width: 760px; margin: 0; line-height: 1.7; }
.cta-actions { display: grid; gap: 10px; min-width: 210px; }.cta-actions a { display: block; padding: 13px 18px; text-align: center; text-decoration: none; font-weight: 800; border-radius: 6px; }
.primary-cta { color: #fff; background: var(--stem-red); }.secondary-cta { color: #fff; border: 1px solid rgba(255,255,255,.45); }
@media (max-width: 760px) { .stem-page .content { padding: 30px 16px 48px; }.stem-introduction { grid-template-columns: 1fr; padding: 28px 24px; }.stem-visual { display: none; }.stem-section, .stem-faq { padding: 30px 24px; }.stem-section h2, .stem-faq h2, .stem-cta h2 { padding-right: 0; font-size: 23px; }.section-number { font-size: 42px; }.feature-list { grid-template-columns: 1fr; }.stem-cta { padding: 32px 24px; }.faq-item summary { font-size: 16px; } }