/* Specialized-page family (PESV, FURAG, MIPG, ISO 9001): composition from ISO 37001 v1.6 standard.
   Global type, palette, links and buttons remain shared. Page stylesheets add only
   what is unique to their topic (for example, --sp-situation-image or a tool). */
.sp-page{color:var(--udc-text);background:var(--udc-canvas);--sp-text-width:none}
.sp-page .container{max-width:1180px}
.sp-page [hidden],.sp-sticky[hidden]{display:none!important}
.sp-page p,.sp-page li{color:var(--udc-muted);line-height:var(--udc-line-body)}
.sp-page h1,.sp-page h2,.sp-page h3,.sp-page h4{color:var(--udc-text);text-wrap:balance}
.sp-page .eyebrow{color:var(--udc-orange);font-size:.76rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.sp-page a:not(.button):not(.udc-pill){color:var(--udc-orange-hover);text-underline-offset:.2em}
.sp-page :focus-visible{outline:3px solid var(--udc-orange-hover);outline-offset:4px}
.sp-page .udc-icon{width:38px;height:38px;flex:none;vertical-align:middle;color:var(--udc-orange);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sp-page .udc-icon--small{width:24px;height:24px;margin-right:.4rem}
.sp-section{padding:clamp(2rem,2.7vw,2.5rem) 0;scroll-margin-top:110px}
.sp-section-alt{--udc-section-bg:var(--udc-surface)}
.sp-section h2{margin:.25rem 0 .85rem;font-size:clamp(1.7rem,2.2vw,2.15rem);line-height:1.15}
.sp-hero-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:1.5rem;align-items:center}
.sp-hero h1{margin:.5rem 0 1rem;line-height:1.08;letter-spacing:-.035em}
.sp-hero h1>span{display:block;font-size:clamp(2.7rem,3.4vw,3.35rem)}
.sp-hero h1>span+span{font-size:clamp(1.25rem,1.65vw,1.55rem);font-weight:600;line-height:1.25;letter-spacing:normal;margin-top:.35rem}
.sp-hero-grid img{display:block;width:100%;height:310px;object-fit:cover;object-position:center;border-radius:8px}
.sp-grid{display:grid;gap:.9rem}
/* Family text measure (#222, Gabe 3 oct): text that introduces cards, calendars or tables
   spans the same width as them (#245 rule), so it no longer ends halfway across the band. */
.sp-prose>p{max-width:var(--sp-text-width)}
.sp-grid-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.sp-grid-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.sp-values{padding-top:.65rem;margin-top:1rem}
.sp-card{min-width:0;padding:1rem 1.1rem;background:var(--udc-card);border:1px solid var(--udc-line);border-radius:9px}
.sp-card h3,.sp-card-title{display:flex;align-items:center;gap:.8rem;font-size:1.15rem;line-height:1.3;margin:.1rem 0 .7rem}
.sp-card p{font-size:.9rem}
.sp-values .sp-card p{margin:0}
/* Informational cards and cards with an internal action do not change on hover or focus (standard 6.8);
   the response belongs to the button or link inside (#295). */
.sp-page summary{cursor:pointer;font-weight:700;color:var(--udc-text);line-height:1.4}
/* Accordion padding moves to the summary so its tap target reaches 44 px without changing the look (#295). */
.sp-details>summary{padding:.9rem 0}
.sp-faq>summary{padding:.7rem 0}
.sp-details{background:var(--udc-card);border:1px solid var(--udc-line);border-radius:8px;padding:0 1.15rem;margin:1rem 0}
.sp-details:not(.sp-situation)[open]{padding-bottom:.9rem}
.sp-details[open]>summary{color:var(--udc-orange-hover)}
.sp-details p{margin:.85rem 0}
.sp-applicability{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:2rem;align-items:start}
.sp-applicability-cards{gap:.75rem;margin-top:.25rem}
.sp-applicability-cards h3{font-size:1.05rem}
.sp-applicability-cards .udc-icon{width:29px;height:29px}
.sp-page .sp-note{font-size:.85rem;max-width:none}
.sp-callout{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin:1.5rem 0;padding:1rem 1.2rem;background:var(--udc-card);border:1px solid var(--udc-line);border-radius:8px}
.sp-callout p{flex:1 1 300px;margin:0;font-size:1.125rem;font-weight:600}
.sp-callout .button{min-height:54px;padding:.85rem 1.5rem}
.sp-callout .button,.sp-page .sp-cta{white-space:normal}
/* Callouts that carry a full sentence read as body text, not as a bold question. */
.sp-callout--long p{font-size:1rem;font-weight:400;line-height:var(--udc-line-body)}
.sp-callout--long strong{font-weight:700}
.sp-notice{padding:1rem;border:1px solid var(--udc-line);border-left:4px solid var(--udc-orange);border-radius:8px;background:var(--udc-card)}
.sp-situations{display:grid;gap:1.1rem;align-items:start}
.sp-situations>div{min-width:0}
.sp-enhanced .sp-situations{grid-template-columns:minmax(240px,.38fr) minmax(0,.62fr)}
.sp-situation-buttons{display:grid;gap:.5rem}
.sp-situation-buttons button{width:100%;min-height:49px;text-align:left;font:inherit;font-weight:650;line-height:1.4;color:var(--udc-text);background:var(--udc-card);border:1px solid var(--udc-line);border-radius:7px;padding:.7rem 1rem;cursor:pointer}
.sp-situation-buttons button{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.sp-situation-arrow{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sp-situation-buttons button[aria-expanded=true]{box-shadow:inset 4px 0 0 var(--udc-on-accent);font-weight:800}
.sp-situation-buttons button[aria-expanded=true]{color:var(--udc-on-accent);background:var(--udc-orange);border-color:var(--udc-orange)}
@media(hover:hover){
 .sp-situation-buttons button:hover{border-color:var(--udc-orange)}
 .sp-situation-buttons button:not([aria-expanded=true]):hover{background:var(--udc-elevated)}
}
.sp-situation{margin:0 0 .8rem;padding:0;overflow:hidden}
.sp-enhanced .sp-situation{border-color:var(--udc-line)}
.sp-situation>summary{padding:1.4rem;background:linear-gradient(90deg,rgba(27,27,27,.96),rgba(27,27,27,.72)),var(--sp-situation-image,none) center/cover}
.sp-situation-heading{display:inline-block;width:calc(100% - 1.5rem);vertical-align:top}
.sp-enhanced .sp-situation summary{list-style:none}
.sp-enhanced .sp-situation summary::-webkit-details-marker{display:none}
.sp-enhanced .sp-situation-heading{width:100%}
.sp-situation-kicker{display:flex;align-items:center;gap:.75rem;font-size:.9rem;color:var(--udc-text);margin-bottom:.9rem}
.sp-situation-title{display:block;font-size:clamp(1.15rem,1.6vw,1.5rem);font-weight:750;line-height:1.3;color:var(--udc-text)}
.sp-situation-body{padding:1rem 1.4rem 1.4rem}
.sp-situation-fact{display:flex;align-items:flex-start;gap:1rem;padding:1rem;margin:0 0 .8rem;background:var(--udc-surface);border:1px solid var(--udc-line);border-radius:8px}
.sp-situation-fact>.udc-icon{width:32px;height:32px;color:var(--udc-muted)}
.sp-situation-fact>div{min-width:0}
.sp-situation-fact .sp-fact-label{display:block;font-size:.95rem;line-height:1.4;margin:0 0 .4rem;color:var(--udc-text)}
.sp-situation-fact p{margin:0;font-size:.9rem}
/* Situation and service CTAs share one full-width shape: equal widths, no ragged centred buttons. */
.sp-situation-body>.button,.sp-service>.button{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;text-align:center;text-wrap:balance}
.sp-situation-body>.button{margin-top:1rem;padding:.85rem 1.5rem}
.sp-page .sp-mobile-select{display:none}
.sp-services{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.8rem;margin:1.2rem 0}
.sp-service{grid-column:span 2;display:flex;flex-direction:column;padding:1.1rem}
.sp-service:nth-child(-n+2){grid-column:span 3}
.sp-services-pairs .sp-service{grid-column:span 3}
.sp-service h3{align-items:flex-start;font-size:1.13rem}
.sp-service h3 .udc-icon{width:29px;height:29px}
.sp-service p{margin:.45rem 0 .8rem}
.sp-service>.button{margin-top:auto;padding:.85rem 1.25rem}
.sp-service>p:last-child{margin:.75rem 0 0;font-size:.85rem}
.sp-faq-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:2rem;align-items:start}
.sp-faq{margin:.25rem 0;padding:0 1rem}
.sp-faq[open]{padding-bottom:.7rem}
.sp-final{position:sticky;top:110px;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:1rem;padding:1.7rem;background:var(--udc-card);border:1px solid var(--udc-line);border-radius:9px;scroll-margin-top:110px}
.sp-final::before{content:'';height:3px;width:64px;background:var(--udc-orange)}
.sp-final h2{font-size:1.65rem;margin:0}
.sp-final p{border-top:1px solid var(--udc-line);padding-top:1.1rem;margin:1rem 0 0;font-size:.9rem}
.sp-tabs{display:flex;flex-wrap:wrap;gap:.65rem;margin:1.25rem 0}
/* The active tab is also marked by weight and an underline, not by colour alone (standard FX, 6.8; #295). */
.sp-tabs [role=tab]{font-weight:600}
.sp-tabs [role=tab][aria-selected=true]{font-weight:800;box-shadow:inset 0 -3px 0 var(--udc-on-accent)}
.sp-panel{padding:1.25rem;margin-top:1rem;border:1px solid var(--udc-line);border-radius:var(--udc-radius-md);scroll-margin-top:110px;background:var(--udc-surface);min-width:0}
.sp-page select,.sp-page input{width:100%;min-width:0;max-width:100%;min-height:44px;background:var(--udc-card);color:var(--udc-text);border:1px solid var(--udc-line);border-radius:var(--udc-radius-sm);font:inherit;padding:.6rem;margin:.4rem 0}
.sp-page label{display:block;font-weight:700}
.sp-page label small{display:block;font-weight:400;line-height:1.5;color:var(--udc-muted);font-size:.8rem}
.sp-table-wrap{max-width:100%;margin:1rem 0}
.sp-page table{width:100%;border-collapse:collapse;text-align:left}
.sp-page th,.sp-page td{border:1px solid var(--udc-line);padding:.75rem;vertical-align:top;line-height:1.5;font-size:.85rem}
.sp-page th{background:var(--udc-card)}
.sp-phase-flow,.sp-calendar{display:grid;gap:1rem;padding:0;list-style:none;margin:1.5rem 0}
.sp-phase-flow{grid-template-columns:repeat(4,minmax(0,1fr))}
.sp-phase-flow>li{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:.65rem;align-content:start}
.sp-phase-flow>li>.sp-step-number{grid-column:1;grid-row:1;margin:0}
.sp-phase-flow>li>h3{grid-column:2;grid-row:1;margin:0;font-size:1.05rem;line-height:1.3}
.sp-phase-flow>li>p{grid-column:1/-1}
.sp-phase-flow>li>.sp-step-range{border-top:1px solid var(--udc-line);padding-top:.85rem;margin-top:.85rem}
.sp-phase-flow>li,.sp-calendar>li{position:relative;min-width:0;border:1px solid var(--udc-line);border-radius:var(--udc-radius-md);padding:1rem;background:var(--udc-card)}
.sp-phase-flow>li:not(:last-child)::after,.sp-calendar>li:not(:last-child)::after{content:'';position:absolute;top:2rem;left:100%;width:1rem;border-top:2px solid var(--udc-orange)}
.sp-step-number{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;color:var(--udc-on-accent);background:var(--udc-orange);font-weight:700;margin-bottom:.85rem}
.sp-page .sp-step-range{color:var(--udc-orange);font-weight:700}
.sp-page .sp-phase-flow p{font-size:.88rem}
.sp-external-tail{white-space:nowrap}
.sp-external-icon{display:inline-block;width:.8em;height:.8em;margin-left:.2em;vertical-align:-.05em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sp-calendar{grid-template-columns:repeat(5,minmax(0,1fr))}
.sp-calendar-six{grid-template-columns:repeat(6,minmax(0,1fr))}
.sp-calendar-six strong{font-variant-numeric:tabular-nums}
@media(min-width:1024px) and (max-width:1199px){
 .sp-calendar-six{grid-template-columns:repeat(3,minmax(0,1fr))}
 .sp-calendar-six>li:nth-child(3n)::after{display:none}
}
.sp-calendar .udc-icon{display:block;margin-bottom:.65rem}
.sp-calendar strong{display:block}
.sp-page .sp-calendar p{font-size:.85rem}
.sp-calendar>li.sp-calendar-deadline{border-color:var(--udc-orange)}
.sp-calendar-deadline strong{color:var(--udc-orange)}
.sp-calendar-audit{border-left:3px solid var(--udc-orange);padding:.8rem 1rem;background:var(--udc-card);margin:1rem 0}
.sp-articulation{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);gap:1.5rem;align-items:center;margin:1.5rem 0}
.sp-system,.sp-shared p,.sp-comparison article{border:1px solid var(--udc-line);border-radius:var(--udc-radius-md);padding:1rem;background:var(--udc-card)}
.sp-system{text-align:center}
.sp-system h3{margin-top:.8rem}
.sp-shared{position:relative}
/* The connectors start at the box edge: the paragraphs carry no outer margin. */
.sp-shared>p{margin:0}
.sp-shared>p+p{margin-top:1rem}
.sp-shared::before,.sp-shared::after{content:'';position:absolute;top:50%;width:1.5rem;border-top:2px solid var(--udc-orange)}
.sp-shared::before{right:100%}
.sp-shared::after{left:100%}
.sp-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.5rem 0}
.sp-comparison h3{display:flex;align-items:center;gap:.75rem}
.sp-bridge{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin:1.5rem 0}
.sp-bridge>div{position:relative;display:flex;align-items:center;justify-content:center;gap:.8rem;padding:1rem;border:1px solid var(--udc-line);border-radius:var(--udc-radius-md);background:var(--udc-surface)}
.sp-bridge>div:not(:last-child)::after{content:'';position:absolute;top:50%;left:100%;width:1.5rem;border-top:2px solid var(--udc-orange)}
.sp-bridge>span{display:none}
/* Centred without left:50% + translate, which capped its width at half the viewport and wrapped the label (#295). */
.sp-sticky{position:fixed;bottom:calc(.5rem + env(safe-area-inset-bottom));left:1rem;right:1rem;width:max-content;margin-inline:auto;z-index:50;display:flex;align-items:center;gap:.25rem;max-width:calc(100% - 2rem);padding:.25rem;background:var(--udc-surface);border:1px solid var(--udc-line);border-radius:var(--udc-radius-sm);max-height:56px}
.sp-sticky .button{padding:.6rem .75rem;font-size:.9rem;white-space:nowrap}
.sp-sticky button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;color:var(--udc-text);background:transparent;border:0;border-radius:var(--udc-radius-sm);cursor:pointer;padding:0}
.sp-sticky button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media(min-width:761px){
 .sp-topic-select,.sp-sticky{display:none!important}
}
/* Four-column phase flow: subgrid rows align titles, ranges and text across cards without reserving empty title space.
   Contract: a card has number+title, an optional .sp-step-range and one text paragraph. If any card in the list has more
   children (e.g. the PESV explorer level tags), the whole list keeps the plain stacked grid: a subgrid cannot add implicit rows. */
@media(min-width:1024px){
 .sp-phase-flow:not(:has(>li>:nth-child(5)))>li{grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
 .sp-phase-flow:not(:has(>li>:nth-child(5)))>li:has(>.sp-step-range){grid-row:span 3}
 .sp-phase-flow:has(>li>:nth-child(5))>li>h3{min-height:2.6em}
}
@media(max-width:1023px){
 .sp-applicability{grid-template-columns:1fr}
 .sp-services{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sp-service,.sp-service:nth-child(-n+2){grid-column:auto}
 .sp-service:last-child:nth-child(odd){grid-column:1/-1}
 .sp-services-pairs .sp-service,.sp-services-pairs .sp-service:last-child{grid-column:auto}
 .sp-applicability-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sp-phase-flow,.sp-calendar{grid-template-columns:1fr}
 .sp-phase-flow>li:not(:last-child)::after,.sp-calendar>li:not(:last-child)::after{top:100%;left:2rem;width:0;height:1rem;border-top:0;border-left:2px solid var(--udc-orange)}
}
@media(max-width:800px){
 .sp-hero-grid{grid-template-columns:1fr}
 .sp-hero-grid img{height:280px}
}
@media(max-width:760px){
 .sp-calendar-six>li{display:grid;grid-template-columns:7.5rem minmax(0,1fr);column-gap:.75rem;align-items:baseline;padding:.75rem 1rem}
 .sp-calendar-six .udc-icon{display:none}
 .sp-page .sp-calendar-six p{margin:0}
 .sp-grid-two,.sp-grid-three,.sp-applicability-cards,.sp-faq-layout{grid-template-columns:1fr}
 .sp-final{position:static}
 .sp-enhanced .sp-situations{grid-template-columns:1fr}
 .sp-tabs,.sp-situation-buttons{display:none!important}
 .sp-page .sp-mobile-select{display:block}
 .sp-panel{padding:1rem}
 .sp-page table,.sp-page tbody,.sp-page tr,.sp-page td{display:block}
 .sp-page thead{display:none}
 .sp-page tr{border:1px solid var(--udc-line);border-radius:7px;margin-bottom:1rem;overflow:hidden}
 .sp-page td{border:0;border-bottom:1px solid var(--udc-line)}
 .sp-page td:last-child{border-bottom:0}
 .sp-page td::before{content:attr(data-label);display:block;font-weight:700;color:var(--udc-text);margin-bottom:.3rem}
 /* Row headers (th scope=row) become the card title of each stacked row. */
 .sp-page tbody th{display:block;border:0;border-bottom:1px solid var(--udc-line);color:var(--udc-text);font-size:.95rem}
 .sp-articulation,.sp-comparison,.sp-bridge{grid-template-columns:1fr}
 .sp-shared::before,.sp-shared::after{top:auto;left:50%;width:0;height:1.5rem;border-top:0;border-left:2px solid var(--udc-orange)}
 .sp-shared::before{bottom:100%}
 .sp-shared::after{top:100%}
 .sp-bridge>div:not(:last-child)::after{top:100%;left:50%;width:0;height:1.5rem;border-top:0;border-left:2px solid var(--udc-orange)}
 .sp-body:has(.sp-sticky:not([hidden])){padding-bottom:100px}
}
@media(max-width:580px){
 .sp-hero h1>span{font-size:clamp(2.15rem,10vw,3.4rem)}
 .sp-hero-grid img{height:230px}
 .sp-services{grid-template-columns:1fr}
}
