/* SaaS examples: static HTML, optional motion from the shared visual system. */
.saas-article .page-head{max-width:960px}
.saas-article .page-head h1{max-width:940px;font-size:clamp(32px,4.6vw,56px);line-height:1.16;letter-spacing:-.025em;overflow-wrap:break-word}
.saas-article .kicker,.saas-article .byline,.saas-article .crumbs{font-size:13px}
.saas-article .draft-label{color:var(--v-warm);font:13px/1.5 var(--mono);border:1px solid var(--v-frame);padding:5px 9px;display:inline-block;margin-bottom:10px}
.saas-article .reading .saas-brief{border-left:2px solid var(--red);padding-left:22px;font-size:clamp(18px,2vw,21px);line-height:1.65}
.saas-article .reading h2{scroll-margin-top:100px}
.saas-article .v-panel figcaption{font-size:clamp(22px,2.5vw,29px);font-weight:500;line-height:1.3}
.saas-article .v-panel p{font-size:16px;line-height:1.65}
.saas-article .v-panel .v-note{font-size:14px;line-height:1.6}
.saas-article .v-panel .v-eyebrow{font:13px/1.5 var(--mono)}
.saas-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.saas-columns>section{min-width:0;border-top:2px solid var(--v-sage);padding-top:20px}
.saas-columns>section:nth-child(2){border-color:var(--v-violet)}
.saas-columns>section:nth-child(3){border-color:var(--v-warm)}
.saas-article .saas-columns h3{font-size:22px;line-height:1.3;margin:0 0 14px}
.saas-columns p:last-child{margin-bottom:0}
.saas-incident .saas-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:28px 0}
.saas-metrics>div{border-top:1px solid var(--v-frame);padding-top:18px;min-width:0;display:flex;flex-direction:column;gap:10px}
.saas-metrics span{font-size:15px;color:var(--muted)}
.saas-metrics strong{font-size:clamp(25px,3.5vw,38px);font-weight:500;line-height:1.2;color:var(--v-sage)}
.saas-metrics>div+div strong{color:var(--v-warm)}
.saas-metrics small{font:13px/1.5 var(--mono);color:var(--muted)}
.saas-downtime{display:grid;gap:16px;padding-bottom:28px;border-bottom:1px solid var(--v-frame)}
.saas-downtime>div{display:grid;grid-template-columns:85px minmax(0,1fr) 100px;align-items:center;gap:16px;font:13px/1.5 var(--mono)}
.saas-downtime b{font-weight:400;text-align:right}
.saas-bar-track{background:#ffffff07;height:20px}
.saas-bar{display:block;height:100%;transform-origin:left}
.saas-threshold{width:18%;background:var(--v-sage)}
.saas-outage{width:100%;background:var(--v-warm)}
.saas-credit{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:30px;margin-top:28px}
.saas-credit strong{font-size:clamp(44px,6vw,64px);line-height:1.1;color:var(--v-violet);font-weight:500}
.saas-credit>div>p:last-child{margin:8px 0 0}
.saas-credit>p{margin:0}
.saas-pair{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin:30px 0;border-block:1px solid var(--line);padding:22px 0}
.saas-pair section{min-width:0}
.saas-article .saas-pair h3{font-size:21px;margin:0 0 16px;line-height:1.35}
.saas-pair ul{margin:0;padding-left:21px;font-size:16px}
.saas-pair li{padding-left:0;margin-bottom:10px}
.saas-law{padding:24px 26px;margin:28px 0;border-left:2px solid var(--v-violet);background:#bdb7ff06;max-width:760px}
.saas-article .saas-law h3{font-size:22px;line-height:1.3;margin:0 0 14px}
.saas-article .saas-law p{font-size:16px;line-height:1.65}
.saas-law p:last-child{margin-bottom:0}
.saas-deadlines{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;padding:0;list-style:none;margin:30px 0}
.saas-deadlines li{min-width:0;position:relative;display:flex;flex-direction:column;gap:14px;border-top:2px solid var(--v-frame);margin:0;padding:16px 0 0;font-size:16px;line-height:1.55}
.saas-deadlines li:nth-child(2){border-color:var(--v-warm)}
.saas-deadlines b{font:500 20px/1.4 var(--sans)}
.saas-article .saas-takeaway{border-left:2px solid var(--v-warm);padding-left:16px;font-weight:500;font-size:18px}
.saas-exit .v-flow{margin-top:30px}
.saas-help{margin:44px 0;padding:30px;border:1px solid var(--v-frame);background:var(--v-panel)}
.saas-article .saas-help h2{margin:0 0 18px;font-size:clamp(24px,3vw,31px);line-height:1.3}
.saas-help .service-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin:24px 0 0;font-size:16px}
.saas-help .service-button{display:inline-flex;padding:12px 18px;border:1px solid var(--v-sage);color:var(--v-sage);text-decoration:none}
.saas-help .service-button:hover{background:#b8dbba0b}
.saas-article .saas-sources{font-size:15px;line-height:1.65}
@media(prefers-reduced-motion:no-preference){.saas-incident.v-enter .saas-bar{animation:saas-grow .85s ease both}.saas-incident.v-enter .saas-outage{animation-delay:.15s}@keyframes saas-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}}
@media(max-width:700px){.saas-columns{grid-template-columns:1fr;gap:24px}.saas-incident .saas-metrics{gap:18px}.saas-credit,.saas-pair{grid-template-columns:1fr;gap:22px}.saas-pair section+section{border-top:1px solid var(--line);padding-top:22px}.saas-deadlines{grid-template-columns:1fr;gap:0}.saas-deadlines li{padding:16px 0 18px}.saas-deadlines b{font-size:19px}.saas-law{padding:22px 18px}.saas-help{padding:24px 18px}.saas-downtime>div{grid-template-columns:80px minmax(0,1fr) 75px;gap:10px;font-size:13px}}
@media(max-width:380px){.saas-incident .saas-metrics{grid-template-columns:1fr}.saas-downtime>div{grid-template-columns:1fr auto;gap:8px}.saas-bar-track{grid-column:1/-1;grid-row:2}.saas-downtime b{grid-column:2;grid-row:1}.saas-help .service-button{width:100%;justify-content:center;text-align:center}}
@media print{.saas-article .draft-label{color:#333;border-color:#888}.saas-law,.saas-help{background:none;border-color:#888;break-inside:avoid}.saas-metrics strong,.saas-credit strong,.saas-metrics>div+div strong,.saas-help .service-button{color:#111}.saas-bar-track{background:#eee;print-color-adjust:exact}.saas-threshold{background:#555}.saas-outage{background:#888}.saas-bar{animation:none!important;transform:none!important}.saas-sources a{overflow-wrap:anywhere}.saas-deadlines,.saas-pair{break-inside:avoid}}