/* Shared layout contract. Components respond to their own available width. */
:root{--layout-gap:clamp(20px,3vw,40px)}
:where(main,section,article,aside,form,fieldset,nav,div){min-inline-size:0}
:where(img,video,svg){max-inline-size:100%}
:where(input,select,textarea,button){max-inline-size:100%}
:where(h1,h2,h3,h4,p,li,dd,a,button,summary){overflow-wrap:break-word}
.section h2,.section h3,.page-hero h1,.b2b-hero h1{hyphens:none;word-break:normal;text-wrap:pretty}
.page-hero h1{font-size:clamp(2rem,4.2vw,3.75rem);line-height:1.12}
.section h2{font-size:clamp(1.75rem,3vw,2.75rem);line-height:1.2}
.section h3{line-height:1.4}
.button{white-space:normal;line-height:1.45;text-align:center;gap:8px}
.button .icon{flex-shrink:0}
.section-head,.topic-hero,.split{gap:var(--layout-gap)}
.section-head{align-items:start}
.section-head h2{max-width:28ch}
.section-head>p:empty{display:none}
.section-head:not(:has(>p:not(:empty))){grid-template-columns:minmax(0,1fr)}
.section-head:not(:has(>p:not(:empty))) h2{max-width:32ch}
.topic-hero{grid-template-columns:minmax(0,1.25fr) minmax(300px,.85fr)}
.topic-aside{padding:clamp(22px,2.5vw,32px)}
.topic-aside h2{font-size:clamp(1.4rem,2vw,1.85rem)}

/* Process: never compress a multi-column component into half a section. */
.split:has(>.process-explorer){grid-template-columns:minmax(0,1fr);gap:30px}
.split:has(>.process-explorer)>div:first-child{max-width:850px}
.split:has(>.process-explorer)>div:first-child h2{max-width:30ch}
.split:has(>.process-explorer)>div:first-child p{max-width:75ch}
.process-explorer{container-name:process;container-type:inline-size;display:block;width:100%;padding:clamp(18px,3vw,32px);border-radius:18px}
.process-explorer .process-status{margin-bottom:24px;font-size:11px;gap:12px}
.process-explorer .process-status-track{height:3px}
.process-body{display:grid;grid-template-columns:minmax(190px,.6fr) minmax(0,1.4fr);gap:clamp(22px,3vw,38px);align-items:start}
.process-explorer .process-rail{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-content:start}
.process-explorer .process-rail::before{display:none}
.process-explorer .process-rail>button{display:flex;flex-direction:row;align-items:center;text-align:left;gap:14px;padding:8px 0;min-height:60px;font-size:14px;line-height:1.45}
.process-explorer .process-rail b{width:44px;height:44px;flex:0 0 44px;font-size:12px}
.process-explorer .process-rail>button>span{hyphens:none;word-break:normal;overflow-wrap:break-word;min-width:0}
.process-explorer .process-panels{padding:clamp(20px,3vw,30px);min-height:0;align-self:start}
.process-explorer .process-panels h3{font-size:clamp(1.35rem,2.6cqi,1.8rem);line-height:1.35;margin:12px 0 0;max-width:36ch;hyphens:none}
.process-explorer .process-panels ul{gap:16px;margin-top:22px}
.process-explorer .process-panels li{font-size:15px;line-height:1.7;align-items:flex-start}
.process-explorer .process-panels li>span:not(.icon){min-width:0}
.process-explorer .process-panels .icon{flex:0 0 22px;margin-top:2px}
.process-explorer .process-cta{margin-top:24px;padding:24px;border:0;border-radius:12px;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:20px}
.process-explorer .process-cta>p{flex:1 1 350px;max-width:70ch}
.process-explorer .process-cta>.button{flex:0 1 auto;width:auto;max-width:100%;align-self:center}
@container process (max-width:640px){
 .process-body{grid-template-columns:minmax(0,1fr);gap:24px}
 .process-explorer .process-rail{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
 .process-explorer .process-rail>button{flex-direction:column;align-items:flex-start;text-align:left;font-size:12px;gap:12px;padding:4px}
 .process-explorer .process-cta{flex-direction:column;align-items:stretch;padding:20px}
 .process-explorer .process-cta>p{flex:auto}
 .process-explorer .process-cta>.button{align-self:flex-start}
}
@container process (max-width:400px){
 .process-explorer .process-rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
 .process-explorer .process-rail>button{flex-direction:row;align-items:center;font-size:12px;gap:10px}
 .process-explorer .process-rail b{width:34px;height:34px;flex-basis:34px}
 .process-explorer .process-panels{padding:20px 16px}
 .process-explorer .process-cta>.button{width:100%}
}

/* Cards use a readable minimum width, including inside another grid. */
.cards,.checks,.related-grid,.profile-situations,.profile-alternatives,.b2b-focus-grid,.compass-results,.field-path-grid,.explained-tools,.tool-workflow,.complement-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:24px}
.purchase-paths,.model-options{grid-template-columns:repeat(auto-fit,minmax(min(100%,245px),1fr));gap:20px}
.profile-tools,.knowledge-index-grid,.knowledge-role-grid,.service-buyer-grid,.package-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px}
.tool-building-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,245px),1fr));gap:20px}
.card,.purchase-path,.profile-situations article,.profile-alternatives article,.app-card{min-width:0}
.card h3,.purchase-path h3,.app-card h3,.profile-alternatives h3{font-size:clamp(1.125rem,1.7vw,1.4rem);line-height:1.45;hyphens:none}
.profile-tools strong{line-height:1.5}
.profile-tools strong>span{flex-shrink:0}
.profile-intro{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px}
.profile-situations:has(>article:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.app-results-grid:not(.list-view){grid-template-columns:repeat(auto-fit,minmax(min(100%,255px),1fr))}
.app-results,.app-results-grid,.app-layout,.assignment-builder>*{min-width:0}
.results-toolbar,.result-controls,.app-toolbar,.profile-app-actions{flex-wrap:wrap;gap:14px}
.assignment-builder{gap:28px}
.assignment-selects{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.assignment-summary{padding:clamp(22px,3vw,32px)}
.assignment-options label>span{min-width:0}
.form .pair{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.form fieldset{min-width:0}
.form label,.form legend{line-height:1.55;overflow-wrap:break-word}
.form legend{max-width:100%}
.crumb{gap:8px;align-items:center}
.crumb .icon{flex-shrink:0}
.footer-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:32px}
.footer-contact>a{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.footer-focus>.wrap>div{min-width:0}
.footer-focus h2{font-size:clamp(1.75rem,3vw,2.6rem);line-height:1.2;max-width:27ch}
.table-scroll,.compare-scroll,.role-matrix-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
body.has-comparison .conversion-sidebar{display:none}
@media(max-width:1100px){
 .topic-hero,.split,.section-head,.questions-layout,.tool-readiness,.booking-layout{grid-template-columns:minmax(0,1fr);gap:28px}
 .topic-aside{max-width:none}
 .topic-aside dl{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:20px}
 .page-hero h1{max-width:26ch}
 .contact-split>div:first-child{position:static}
 .field-families.compact{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:960px){
 .assignment-builder,.profile-intro,.buying-guide,.task-story,.decision-guide{grid-template-columns:minmax(0,1fr);gap:24px}
 .assignment-summary{position:static}
 .app-layout{grid-template-columns:minmax(0,1fr)}
 .app-filters{position:static;max-height:none;overflow:visible}
}
@media(max-width:680px){
 .wrap{width:calc(100% - 32px)}
 .section{padding-block:44px}
 .profile-actions-section{padding-block:16px}
 .page-hero{padding-top:24px;padding-bottom:40px}
 .page-hero h1,.b2b-hero h1{font-size:clamp(1.9rem,7.6vw,2.7rem);line-height:1.15}
 .section-head h2,.b2b-heading h2,.section h2{font-size:clamp(1.6rem,6.4vw,2rem)}
 .section-head,.b2b-heading{margin-bottom:26px}
 .profile-situations:has(>article:nth-child(2):last-child),.profile-tools,.field-families.compact,.career-grid,.career-context{grid-template-columns:minmax(0,1fr)}
 .app-filters{grid-template-columns:minmax(0,1fr);padding:20px}
 .app-type-tabs{flex-wrap:wrap;gap:8px}
 .app-type-tabs button{flex:1 1 auto}
 .app-results-grid.list-view .app-card{grid-template-columns:minmax(0,1fr)}
 .expert-search,.form,.booking-brief,.buying-questions,.buying-recommendation{padding:22px 18px}
 .expert-search form,.page-hero .expert-search form,.search-submit{grid-template-columns:minmax(0,1fr)}
 .search-submit .button,.form .actions>.button{width:100%}
 .form input:not([type=checkbox]):not([type=radio]),.form select,.form textarea,.expert-search input,.expert-search select,.app-filters input,.app-filters select,.assignment-selects select{font-size:16px}
 .assignment-options label{padding:16px;gap:12px}
 .buying-detail>summary{padding:18px;font-size:15px}
 .buying-detail-body{padding:0 18px 20px}
 .profile-activity-links{flex-direction:column;align-items:flex-start}
 .footer-focus{padding-block:36px}
 .footer-focus .actions,.footer-focus .actions>.button{width:100%}
 .compare-dialog{padding:20px 14px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}
 .comparison-dock{flex-wrap:wrap;padding:14px;gap:12px;bottom:12px}
 .comparison-dock>div{flex-basis:100%}
 .comparison-dock .button{flex:1 1 auto}
 .page-nav .wrap{gap:22px;max-width:calc(100% - 32px)}
 .page-nav a{font-size:12px;min-height:44px}
 .conversion-sidebar{bottom:14px;right:14px}
}
@media(max-width:400px){
 .premium-header .logo strong{font-size:17px}
 .premium-header .logo img{width:32px}
 .premium-header .nav-tools{gap:0}
 .premium-header .language{min-width:34px}
 .process-explorer{padding:16px 12px}
 .button{padding-inline:16px}
}
@media(prefers-reduced-motion:reduce){.process-explorer *{animation:none!important;transition:none!important}}