/* Extends the current MPS typography, colors and square product surfaces. */
.saas-section { padding: 92px 0; scroll-margin-top: 105px; }
.saas-section h2 { margin: 0 0 24px; font: 600 clamp(2.2rem, 3.8vw, 3.8rem)/1.07 var(--font-display); letter-spacing: -.05em; text-wrap: balance; }
.saas-section p { color: var(--muted); }
.saas-section .saas-label, .saas-label { margin: 0 0 20px; color: var(--accent); font-size: .8rem; font-weight: 700; line-height: 1.5; letter-spacing: .09em; text-transform: uppercase; }
.saas-hero { padding: 174px 0 90px; background: #071b2b; color: #fff; }
.saas-hero-layout { display: grid; grid-template-columns: 1.35fr .75fr; gap: 84px; align-items: center; }
.saas-hero .saas-label { color: var(--accent-2); }
.saas-hero h1 { max-width: 810px; margin: 0 0 28px; font: 600 clamp(2.7rem, 5vw, 4.9rem)/1.04 var(--font-display); letter-spacing: -.058em; text-wrap: balance; }
.saas-intro { max-width: 700px; margin: 0; color: #cedce7; font-size: 1.13rem; line-height: 1.75; }
.saas-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.saas-actions a { gap: 16px; }
.saas-rail { min-width: 0; border-top: 1px solid #526475; }
.saas-rail h2 { color: var(--accent-2); font-size: .8rem; letter-spacing: .06em; font-weight: 500; text-transform: uppercase; margin: 20px 0 6px; }
.saas-rail a { display: flex; gap: 20px; padding: 24px 0; border-bottom: 1px solid #526475; }
.saas-rail a > span { color: var(--accent-2); font-size: .8rem; padding-top: 4px; }
.saas-rail strong { display: block; color: #fff; font-size: 1.3rem; font-weight: 550; line-height: 1.3; }
.saas-rail small { display: block; color: var(--accent-2); margin-top: 10px; font-size: .88rem; }
.saas-rail a:hover strong { text-decoration: underline; text-underline-offset: 5px; }
.saas-platform-layout, .saas-start-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 96px; }
.saas-platform h2 { color: var(--accent); font-size: clamp(3rem, 5vw, 5rem); }
.saas-platform .saas-lead { max-width: 440px; color: #172b3b; font-size: 1.4rem; line-height: 1.5; }
.saas-platform-layout > div > p:first-child, .saas-start-layout > div > p:first-child { margin-top: 0; }
.saas-link { display: inline-flex; gap: 16px; align-items: center; min-height: 44px; color: var(--accent); font-size: .94rem; font-weight: 650; }
.saas-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.saas-heading { display: grid; grid-template-columns: 1.1fr .9fr; gap: 90px; align-items: end; margin-bottom: 40px; }
.saas-heading h2 { margin-bottom: 0; max-width: 660px; }
.saas-heading > p { margin: 0; max-width: 510px; }
.saas-heading > div > p:not(.saas-label) { margin-top: 0; }
.saas-catalogue, .saas-home { background: var(--paper-2); }
.saas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.saas-card { display: flex; flex-direction: column; background: #fff; padding: 36px; border: 1px solid var(--line); scroll-margin-top: 114px; min-width: 0; }
.saas-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; }
.saas-card-top > span:last-child { font-size: .85rem; color: #687988; }
.saas-card h3 { margin: 12px 0 10px; color: #0a2435; font: 600 clamp(1.55rem, 2.4vw, 2.2rem)/1.16 var(--font-display); letter-spacing: -.035em; }
.saas-card .saas-purpose { margin: 0 0 18px; color: var(--accent); font-size: .96rem; font-weight: 600; }
.saas-card > p { margin: 0 0 18px; }
.saas-features { list-style: none; padding: 0; margin: 14px 0 24px; }
.saas-features li { position: relative; padding: 9px 0 9px 19px; color: #344957; font-size: 1rem; line-height: 1.6; }
.saas-features li::before { content: ''; position: absolute; left: 0; top: 21px; width: 7px; height: 2px; background: var(--accent); }
.saas-addon { border-left: 3px solid var(--accent); background: var(--paper-2); padding: 19px 22px; margin: 0 0 22px; }
.saas-addon h3 { font-family: var(--font-body); font-size: .95rem; font-weight: 700; line-height: 1.4; margin: 0 0 8px; letter-spacing: 0; }
.saas-addon p { margin: 0; font-size: .93rem; line-height: 1.65; }
.saas-card-action { margin-top: auto; padding-top: 17px; border-top: 1px solid var(--line); }
.saas-start { background: #071b2b; color: #fff; }
.saas-start p { color: #cedce7; }
.saas-start .saas-label { color: var(--accent-2); }
.saas-start .saas-note { color: var(--accent-2); font-size: .9rem; margin-bottom: 26px; }
.saas-related { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; margin-top: 30px; }
.saas-related article { border-top: 1px solid var(--line); padding-top: 26px; }
.saas-related h2 { font-size: 1.8rem; letter-spacing: -.03em; }
.saas-teasers { display: grid; grid-template-columns: repeat(4, 1fr); border-left: 1px solid var(--line); }
.saas-teaser { display: flex; flex-direction: column; padding: 28px; background: #fff; border: 1px solid var(--line); border-left: 0; transition: background 160ms ease; min-width: 0; }
.saas-teaser:hover { background: #e8f0f7; }
.saas-teaser h3 { margin: 0 0 18px; color: #0a2435; font: 600 1.4rem/1.2 var(--font-display); letter-spacing: -.025em; }
.saas-teaser p { margin: 0 0 25px; }
.saas-teaser .saas-link { margin-top: auto; font-size: .88rem; }
.saas-more { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-top: 26px; font-size: .92rem; }
.saas-more > span { color: var(--muted); }
.saas-more > a { padding: 8px 0; color: var(--accent); text-decoration: underline; text-underline-offset: 5px; }
.saas-section a:focus-visible, .saas-hero a:focus-visible { outline: 3px solid #82b7df; outline-offset: 5px; }
@media(max-width:1080px) { .saas-hero-layout { gap: 42px; } .saas-platform-layout, .saas-start-layout { gap: 50px; } .saas-heading { gap: 40px; } .saas-teasers { grid-template-columns: 1fr 1fr; } }
@media(max-width:800px) { .saas-section { padding: 60px 0; } .saas-hero { padding: 132px 0 58px; } .saas-hero-layout, .saas-platform-layout, .saas-start-layout, .saas-heading, .saas-related { grid-template-columns: 1fr; gap: 30px; } .saas-rail { margin-top: 12px; } .saas-rail a { padding: 20px 0; } .saas-grid { grid-template-columns: 1fr; } .saas-card { padding: 28px; } .saas-heading { margin-bottom: 30px; } .saas-platform .saas-lead { max-width: 100%; } }
@media(max-width:520px) { .saas-teasers { grid-template-columns: 1fr; } .saas-hero h1 { font-size: clamp(2.5rem,10.5vw,3.4rem); } .saas-actions { flex-direction: column; align-items: stretch; } .saas-card { padding: 25px 22px; } .saas-card .saas-label { max-width: 90%; } .saas-more { gap: 4px 20px; } .saas-more > span { width: 100%; } }