.system-page { --system-ink:#173b38; --system-teal:#087d75; --system-line:#dce8e4; }
.system-main { color:var(--system-ink); overflow:clip; }
.system-main * { box-sizing:border-box; }
.system-main .wrap { width:min(1160px,calc(100% - 48px)); margin-inline:auto; }
.system-main section[id] { scroll-margin-top:125px; }
.system-main h1,.system-main h2,.system-main h3,.system-main p { margin:0; }
.system-main h1 { font-size:clamp(42px,4.8vw,68px); line-height:1.08; letter-spacing:-.045em; font-weight:600; }
.system-main h1 em,.system-main h2 em { font-family:'Playfair Display',Georgia,serif; font-style:normal; color:var(--system-teal); }
.system-main h2 { font-size:clamp(30px,3.2vw,44px); line-height:1.18; letter-spacing:-.035em; font-weight:600; }
.system-main h3 { font-size:21px; font-weight:600; line-height:1.3; letter-spacing:-.02em; }
.system-main p { line-height:1.85; color:#526b66; font-size:15px; }
.system-main .eyebrow { display:block; font-size:11px; letter-spacing:.15em; text-transform:uppercase; font-weight:700; color:var(--system-teal); margin-bottom:19px; }
.system-main .button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 17px; background:linear-gradient(100deg,#079b96 0%,#08aaa4 55%,#6da078 100%); color:white; border:1px solid transparent; border-radius:11px; box-shadow:0 8px 20px rgba(7,145,140,.17); font-size:14px; font-weight:700; line-height:1.3; text-decoration:none; transition:transform .2s,box-shadow .2s,background .2s; }
.system-main .button:hover { transform:translateY(-1px); background:linear-gradient(100deg,#078f89 0%,#079d98 55%,#608e6b 100%); box-shadow:0 12px 24px rgba(7,145,140,.23); }
.system-main .button.secondary { background:#fff; color:var(--system-ink); border-color:#c7d9d1; box-shadow:none; }
.system-main .button.secondary:hover { background:#eaf5f1; box-shadow:none; }
.system-main a:focus-visible,.system-main summary:focus-visible { outline:3px solid #e78833; outline-offset:5px; }
.system-main .hero { padding:155px 0 75px; background:#f4f9f6; border-bottom:1px solid var(--system-line); }
.system-main .hero-grid { display:grid; grid-template-columns:1.12fr 1fr; align-items:center; gap:70px; }
.system-main .hero-copy { margin:25px 0; max-width:530px; font-size:17px; }
.system-main .actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.system-main .hero-note { font-size:11px; margin-top:17px; }
.system-main .map { padding:32px; border-radius:18px; background:white; border:1px solid #d8e7df; box-shadow:0 18px 50px #194c3510; }
.system-main .map-label { display:flex; justify-content:space-between; font-size:10px; letter-spacing:.1em; color:#70857a; margin-bottom:28px; }
.system-main .map-center { text-align:center; padding:27px 18px; background:var(--system-ink); border-radius:12px; color:white; }
.system-main .map-center strong { font-size:36px; font-weight:600; letter-spacing:-.04em; }
.system-main .map-center span { display:block; font-size:12px; color:#c1dbd1; margin-top:4px; }
.system-main .map-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.system-main .map-item { padding:20px 16px; border:1px solid var(--system-line); border-radius:9px; background:#f9fbf8; }
.system-main .map-item b { display:block; font-size:14px; font-weight:600; margin-bottom:5px; }
.system-main .map-item span { font-size:11px; color:#587269; }
.system-main .map-bottom { text-align:center; padding-top:20px; font-size:11px; color:#698274; }
.system-main .jump-links { display:flex; flex-wrap:wrap; gap:10px 25px; padding-top:40px; margin-top:45px; border-top:1px solid var(--system-line); font-size:12px; color:#41695b; }
.system-main .jump-links a:hover { text-decoration:underline; }
.system-main .section { padding:85px 0; }
.system-main .intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; }
.system-main .intro-grid p + p { margin-top:18px; }
.system-main .soft { background:#f6f9f7; }
.system-main .section-heading { max-width:650px; margin-bottom:38px; }
.system-main .section-heading p { margin-top:20px; }
.system-main .phase { display:grid; grid-template-columns:80px 1fr .8fr; gap:30px; padding:34px 0; border-top:1px solid var(--system-line); align-items:start; }
.system-main .phase-number { font-size:34px; line-height:1.2; font-weight:500; color:#9db9ad; letter-spacing:-.04em; }
.system-main .phase h3 { margin-bottom:12px; }
.system-main .phase p { font-size:14px; }
.system-main .deliverable { border-radius:9px; padding:19px 23px; background:#e8f2ed; }
.system-main .deliverable small { display:block; color:#426b5c; font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; margin-bottom:9px; }
.system-main .deliverable p { font-size:13px; }
.system-main .cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.system-main .card { border:1px solid var(--system-line); border-radius:12px; padding:28px; background:white; }
.system-main .card h3 { margin:15px 0; }
.system-main .card p { font-size:13px; }
.system-main .card a { display:inline-block; font-size:12px; font-weight:600; color:var(--system-teal); margin-top:22px; text-decoration:underline; text-underline-offset:4px; }
.system-main .card-number { color:#688c7c; font-size:11px; }
.system-main .dark { background:var(--system-ink); color:white; }
.system-main .dark p { color:#c1d5cd; }
.system-main .dark .eyebrow { color:#addfca; }
.system-main .metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:40px; }
.system-main .metric { border-top:1px solid #506d63; padding-top:23px; }
.system-main .metric h3 { font-size:17px; margin-bottom:14px; }
.system-main .metric p { font-size:13px; }
.system-main .checklist { list-style:none; padding:0; margin:26px 0 0; }
.system-main .checklist li { padding:13px 0; border-bottom:1px solid var(--system-line); font-size:14px; line-height:1.7; color:#4f6b61; }
.system-main .checklist li::before { content:'✓'; margin-right:12px; color:var(--system-teal); }
.system-main .growth-bridge { background:#edf5e8; border:1px solid #d8e7cf; border-radius:13px; padding:35px; }
.system-main .growth-bridge h3 { font-size:25px; margin-bottom:18px; }
.system-main .growth-bridge p { font-size:14px; }
.system-main .growth-bridge .button { margin-top:25px; }
.system-main .faq-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:65px; }
.system-main details { border-bottom:1px solid var(--system-line); padding:20px 0; }
.system-main details:first-child { padding-top:0; }
.system-main summary { display:flex; align-items:baseline; justify-content:space-between; gap:20px; cursor:pointer; list-style:none; font-weight:500; font-size:15px; }
.system-main summary::-webkit-details-marker { display:none; }
.system-main summary::after { content:'+'; font-size:22px; color:var(--system-teal); }
.system-main details[open] summary::after { content:'−'; }
.system-main details p { font-size:13px; margin-top:13px; }
.system-main .closing { text-align:center; padding:65px 25px; border-top:1px solid var(--system-line); background:#f4f9f6; }
.system-main .closing p { max-width:640px; margin:20px auto 27px; }
.system-main .related { margin-top:25px; font-size:12px; }
.system-main .related a { text-decoration:underline; text-underline-offset:4px; }
@media(max-width:900px) {
 .system-main .hero-grid,.system-main .intro-grid,.system-main .faq-grid { grid-template-columns:1fr; gap:35px; }
 .system-main .hero-grid { max-width:660px; }
 .system-main .map { max-width:550px; width:100%; }
 .system-main .hero { padding-top:130px; }
 .system-main .cards { grid-template-columns:1fr; }
 .system-main .phase { grid-template-columns:45px 1fr; gap:15px; }
 .system-main .deliverable { grid-column:2; }
 .system-main .metric-grid { grid-template-columns:1fr 1fr; }
 .system-main .section { padding:60px 0; }
}
@media(max-width:480px) {
 .system-main .wrap { width:calc(100% - 32px); }
 .system-main h1 { font-size:43px; }
 .system-main .hero-copy { font-size:15px; }
 .system-main .actions { flex-direction:column; }
 .system-main .map { padding:22px; }
 .system-main .map-item { padding:16px 12px; }
 .system-main .phase-number { font-size:26px; }
 .system-main .growth-bridge { padding:26px; }
}
@media(prefers-reduced-motion:reduce) { .system-page *, .system-page *::before { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }