/* ===================================================================== /ai-model-selection/ — port of redesign/ai-model-selection-v2.css. Class names are the design's, so the markup transcribes one to one. Every rule is scoped under body.page-ai-model-selection: the source is a standalone document and its generic names (.container, .chip, .job, .fade, .read) collide with the theme. COLLISIONS ALREADY PROVEN ON THIS PAGE, handled up front rather than rediscovered one bug report at a time: .container theme's own .container won on specificity -> !important .fade theme ships Bootstrap .fade{opacity:0} -> forced to 1 tables theme strips td borders, injects td padding, forces th{text-align:left}, and sets 16px/700 on spans inside cells (which also scaled the em-based tracking) -> re-asserted Fonts: Newsreader + DM Mono are the design's own, loaded for this slug only. ===================================================================== */ body.page-ai-model-selection { --ink: #0b0d10; --navy: #142533; --strong: #1c1e21; --body: #5f5f70; --body-2: #757589; --paper: #f8f8f8; --white: #fff; --accent: #FA4900; --peach: #FFEEE6; --accent-soft: #FBF2ED; --hair: #e7e7e4; --hair-2: #efefec; --font: 'Cabin', system-ui, sans-serif; --mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --sans: 'DM Sans', 'Cabin', sans-serif; --display: 'Newsreader', Georgia, serif; --max: 1140px; --read: 720px; /* Only the tokens and the page background live on body. Typography does NOT: the site header and footer are children of body, so setting font-family here restyled the top bar, the phone numbers and the whole footer on this page alone, while every other page stayed on DM Sans. The component's own roots carry it instead. */ background: var(--white); } body.page-ai-model-selection .cover, body.page-ai-model-selection .chapter, body.page-ai-model-selection .pillbar, body.page-ai-model-selection .svc-toc, body.page-ai-model-selection .ams-lb, body.page-ai-model-selection .elementor-element-amsfaqw { font-family: var(--font); color: var(--body); font-size: 18px; line-height: 1.5; } /* Every bare element rule below is scoped to the component's own roots, never to the page. The scope uses :where(), not :is(), on purpose: :is() takes the specificity of its most specific argument, which made this reset out-rank the component's own class rules and silently zeroed the margins on .csub and every other classed heading. :where() contributes zero, so these keep exactly the weight the unscoped versions had. Original note: The site header and footer are children of body, so a rule like `a { color: accent }` written against body turned the top bar's "DM Us" and both phone numbers orange on this page and nowhere else. Same for h1-h4, which the footer uses, and for the box-sizing reset. */ body.page-ai-model-selection :where(.cover,.chapter,.pillbar,.svc-toc,.ams-lb,.elementor-element-amsfaqw) * { box-sizing: border-box; } body.page-ai-model-selection :where(.cover,.chapter,.pillbar,.svc-toc,.ams-lb,.elementor-element-amsfaqw) a { color: var(--accent); text-decoration: none; } body.page-ai-model-selection :where(.cover,.chapter,.pillbar,.svc-toc,.ams-lb,.elementor-element-amsfaqw) a:hover { color: var(--ink); } body.page-ai-model-selection :where(.cover,.chapter,.pillbar,.svc-toc,.ams-lb,.elementor-element-amsfaqw) button { font-family: inherit; } body.page-ai-model-selection :where(.cover,.chapter,.pillbar,.svc-toc,.ams-lb,.elementor-element-amsfaqw) h1, body.page-ai-model-selection :where(.cover,.chapter,.pillbar,.svc-toc,.ams-lb,.elementor-element-amsfaqw) h2, body.page-ai-model-selection :where(.cover,.chapter,.pillbar,.svc-toc,.ams-lb,.elementor-element-amsfaqw) h3, body.page-ai-model-selection :where(.cover,.chapter,.pillbar,.svc-toc,.ams-lb,.elementor-element-amsfaqw) h4 { margin: 0; color: var(--ink); text-wrap: balance; } /* Selection colour is genuinely page wide and harmless there. */ body.page-ai-model-selection ::selection { background: var(--peach); } /* Theme's .container wins on specificity, and the site body width is 1140 with 20px gutters (the design's 1180/40 sat wider than the header and footer). */ /* Matches the site's standard content inset exactly. Every inner page renders inside .elementor-container: max-width 1140, centred, with 48px padding, so text starts at 198 on a 1440 viewport and the text column is 1044 wide. The design's own 1180/40 geometry put our text at 170, which read as 28px adrift from every other page on the site. Matching the site wins over matching the mock. */ /* Scoped to this component's OWN sections, never to every .container on the page. The site header uses .container too, so the unscoped version was squeezing the header nav to 1140/48 on this page while every other page ran it at 1336/15. Same class of leak as the font-family on body. */ body.page-ai-model-selection .cover .container, body.page-ai-model-selection .chapter .container, body.page-ai-model-selection .closing .container { max-width: 1140px !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-left: 48px !important; padding-right: 48px !important; } @media (max-width: 1024px) { body.page-ai-model-selection .cover .container, body.page-ai-model-selection .chapter .container, body.page-ai-model-selection .closing .container { padding-left: 24px !important; padding-right: 24px !important; } } @media (max-width: 760px) { body.page-ai-model-selection .cover .container, body.page-ai-model-selection .chapter .container, body.page-ai-model-selection .closing .container { padding-left: 20px !important; padding-right: 20px !important; } } body.page-ai-model-selection .read { max-width: var(--read); } body.page-ai-model-selection .fade { opacity: 1 !important; } /* ---------- progress bar ---------- */ body.page-ai-model-selection .ams-progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; background: transparent; z-index: 9999; pointer-events: none; } body.page-ai-model-selection .ams-progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .1s linear; } /* ---------- pillbar + svc-toc rail ---------- */ body.page-ai-model-selection .pillbar { position: sticky; top: 0; z-index: 45; background: rgba(255,255,255,.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--hair-2); overflow-x: auto; -webkit-overflow-scrolling: touch; } body.page-ai-model-selection .pillbar ol { list-style: none; display: flex; gap: 8px; margin: 0; padding: 11px 20px; white-space: nowrap; } body.page-ai-model-selection .pillbar a { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--body-2); border: 1px solid var(--hair); padding: 7px 12px; display: block; } body.page-ai-model-selection .pillbar a.on { background: var(--accent); border-color: var(--accent); color: #fff; } body.page-ai-model-selection .svc-toc { position: fixed; top: 50%; transform: translateY(-50%); right: 24px; width: 196px; max-height: 82vh; overflow: auto; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border: 1px solid var(--hair); border-radius: 14px; padding: 16px; box-shadow: 0 14px 34px rgba(20,20,40,.1); z-index: 40; display: none; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; } body.page-ai-model-selection .svc-toc.is-visible { opacity: 1; visibility: visible; } body.page-ai-model-selection .svc-toc-h { font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--body-2); margin-bottom: 10px; display: flex; align-items: center; gap: 7px; } body.page-ai-model-selection .svc-toc a { display: flex; gap: 9px; font-size: 13px; color: var(--body-2); padding: 6px 8px; border-radius: 7px; align-items: baseline; transition: .15s; } body.page-ai-model-selection .svc-toc a:hover { background: var(--paper); color: var(--strong); } body.page-ai-model-selection .svc-toc a.on { background: var(--peach); color: #B5390A; font-weight: 600; } body.page-ai-model-selection .svc-toc a .i { font-family: var(--font); font-size: 11px; font-weight: 600; opacity: .7; } @media (min-width: 1548px) { body.page-ai-model-selection .svc-toc { display: block; } body.page-ai-model-selection .pillbar { display: none; } } @media (min-width: 1360px) and (max-width: 1547px) { body.page-ai-model-selection .svc-toc { display: block; right: 12px; width: 172px; padding: 14px; } body.page-ai-model-selection .svc-toc a { font-size: 12.5px; } body.page-ai-model-selection .pillbar { display: none; } } /* ---------- shared ---------- */ body.page-ai-model-selection .mono { font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--body-2); } body.page-ai-model-selection .chapnum { font-family: var(--display); font-weight: 400; font-size: clamp(48px,6vw,84px); line-height: .8; color: rgba(20,37,51,.2); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } body.page-ai-model-selection .chaptitle { font-family: var(--display); font-weight: 400; font-size: clamp(34px,4.4vw,56px); line-height: 1.02; letter-spacing: -.02em; color: var(--navy); } body.page-ai-model-selection .chapter { padding: 104px 0; border-top: 1px solid var(--hair-2); --ams-stick-bg: var(--white); } body.page-ai-model-selection .chapter.alt { background: var(--paper); --ams-stick-bg: var(--paper); } body.page-ai-model-selection .chapter-head { display: flex; align-items: baseline; gap: 26px; margin-bottom: 30px; } body.page-ai-model-selection .claim { font-family: var(--display); font-weight: 400; font-size: clamp(26px,3vw,42px); line-height: 1.22; color: var(--navy); margin: 0 0 48px; max-width: none; text-wrap: pretty; } body.page-ai-model-selection .claim-sub { font-size: 19px; line-height: 1.65; color: var(--strong); margin: 22px 0 0; max-width: none; text-wrap: pretty; } body.page-ai-model-selection p.body { font-size: 18px; line-height: 1.75; color: var(--body); margin: 0 0 22px; text-wrap: pretty; } body.page-ai-model-selection p.body:last-child { margin-bottom: 0; } body.page-ai-model-selection .btn { display: inline-flex; align-items: center; gap: 9px; padding: 15px 26px; font-weight: 600; font-size: 15px; border: 1.5px solid transparent; cursor: pointer; transition: all .18s; } body.page-ai-model-selection .btn-primary { background: var(--accent); color: #fff !important; border-color: var(--accent); } body.page-ai-model-selection .btn-primary:hover { background: var(--ink); border-color: var(--ink); } body.page-ai-model-selection .btn-ghost { background: transparent; color: var(--strong) !important; border-color: var(--hair); } body.page-ai-model-selection .btn-ghost:hover { border-color: var(--ink); color: var(--ink) !important; } body.page-ai-model-selection .chip { border: 1px solid var(--hair); background: #fff; padding: 9px 15px; font-size: 14px; font-weight: 600; color: var(--strong); cursor: pointer; transition: all .15s; } body.page-ai-model-selection .chip:hover { background: var(--peach); border-color: var(--peach); } body.page-ai-model-selection .chip.on { background: var(--accent); border-color: var(--accent); color: #fff; } body.page-ai-model-selection .chapter-head, body.page-ai-model-selection .claim, body.page-ai-model-selection .csub, body.page-ai-model-selection .caselead { opacity: 1 !important; transform: none !important; } body.page-ai-model-selection .rv { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); transition-delay: var(--d, 0ms); } body.page-ai-model-selection .rv.in { opacity: 1; transform: none; } /* 56px here was inherited from the design, where this block sat behind a disclosure and needed the separation. Open by default it just reads as a gap under the four attribute strip, so it drops to the same 28px rhythm the rest of the chapter uses. */ body.page-ai-model-selection .detail-open { margin-top: 28px; } body.page-ai-model-selection .critsub { font-family: var(--display); font-weight: 400; font-size: clamp(24px,2.2vw,30px); line-height: 1.1; color: var(--navy); padding-bottom: 6px; } body.page-ai-model-selection .detail-open .detail-in { padding: 0; max-width: none; animation: none; } body.page-ai-model-selection .detail-in { padding: 6px 0 34px; max-width: 78ch; animation: ams-fadein .4s ease; } @keyframes ams-fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ---------- cover ---------- */ body.page-ai-model-selection .cover { background: linear-gradient(180deg,#fffaf6 0%,#fff 62%); } body.page-ai-model-selection .cover-pin { position: relative; padding: 72px 0 52px; } /* core.css sets a 24px bottom margin on .clx-breadcrumb with !important; the cover wants it tighter to the eyebrow below. */ body.page-ai-model-selection .cover-crumbs .clx-breadcrumb { margin-bottom: 18px !important; } body.page-ai-model-selection .coverwrap { display: block; } body.page-ai-model-selection .cover .eyebrow { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); background: var(--peach); padding: 7px 13px; margin-bottom: 28px; } body.page-ai-model-selection .cover h1 { font-family: var(--display); font-weight: 400; font-size: clamp(42px,6vw,88px); line-height: 1; letter-spacing: -.028em; color: var(--navy); max-width: 24ch; } body.page-ai-model-selection .cover .subhead { margin: 22px 0 0; font-size: clamp(17px,1.4vw,20px); line-height: 1.5; color: var(--strong); max-width: 56ch; text-wrap: pretty; } body.page-ai-model-selection .cover .subhead .accent { color: var(--accent); } body.page-ai-model-selection .readmeta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--hair); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--body-2); } body.page-ai-model-selection .rm-pill { background: var(--navy); color: #fff; padding: 6px 11px; letter-spacing: .14em; } body.page-ai-model-selection .proof { display: grid; grid-template-columns: repeat(3,auto); justify-content: start; gap: 36px; margin-top: 32px; } body.page-ai-model-selection .proof > div { min-width: 0; } body.page-ai-model-selection .proof .n { font-family: var(--display); font-size: clamp(34px,3vw,44px); line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; } body.page-ai-model-selection .proof .l { margin-top: 8px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--body-2); white-space: nowrap; } body.page-ai-model-selection .cover-cta { display: flex; gap: 12px; margin-top: 34px; flex-wrap: nowrap; } body.page-ai-model-selection .cover-cta .btn { white-space: nowrap; padding: 14px 20px; font-size: 14.5px; } /* ---------- 01 the four criteria strip ---------- */ body.page-ai-model-selection .crit-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; margin-top: 52px; border-top: 1px solid var(--navy); } body.page-ai-model-selection .crit-strip > div { padding: 18px 20px 18px 0; font-size: 17px; font-weight: 600; color: var(--strong); display: flex; gap: 12px; align-items: baseline; } body.page-ai-model-selection .crit-strip .cs-n { font-family: var(--mono); font-size: 11.5px; color: var(--accent); font-weight: 400; } /* ---------- 01 thesis diagram: Concept A, sort into bins ---------- Ported from redesign/01 Thesis - Concept A Sort.html. The demo page's own chrome (body background, .wrap, the standalone chaptitle and lede) is not carried over: this sits inside the chapter that already supplies those. Everything inside .dg-sorter is the source's, with dg- prefixed class names. -------------------------------------------------------------------------- */ body.page-ai-model-selection .diagram { border: 1px solid var(--hair); background: #fff; padding: 34px 36px 26px; } body.page-ai-model-selection .dg-tag { border: 1px solid var(--hair); background: #fff; padding: 11px 14px; font-size: 15px; font-weight: 600; color: var(--strong); line-height: 1.2; } body.page-ai-model-selection .dg-pool { border: 1px dashed var(--hair); background: var(--paper); padding: 18px; } body.page-ai-model-selection .dg-pool-hd { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--body-2); margin-bottom: 14px; display: flex; gap: 10px; align-items: center; } body.page-ai-model-selection .dg-pool-hd b { color: var(--navy); font-weight: 600; } /* Tags flow as a row of chips rather than a stacked column. Four stacked rows made the pool ~150px taller than it needed to be, and that height carries into the routed state too, since the panel holds its size when deactivated. Wraps on its own at narrow widths. */ body.page-ai-model-selection .dg-pool-body { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; min-height: 24px; } /* Same label treatment as the pool header, so the two halves are named the same way. The 20px that used to sit above .dg-bins moves onto the header. */ body.page-ai-model-selection .dg-bins-hd { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--body-2); margin: 20px 0 14px; display: flex; gap: 10px; align-items: center; } body.page-ai-model-selection .dg-bins-hd b { color: var(--navy); font-weight: 600; } body.page-ai-model-selection .dg-bins { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; } body.page-ai-model-selection .dg-bin { border: 1px solid var(--hair); background: #fff; padding: 16px; display: flex; flex-direction: column; transition: border-color .35s, background .35s; } body.page-ai-model-selection .dg-bin.hot { border-color: var(--accent); background: var(--accent-soft); } body.page-ai-model-selection .dg-bin-hd { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--hair-2); display: flex; justify-content: space-between; gap: 8px; } body.page-ai-model-selection .dg-bin-hd .ct { color: var(--body-2); } body.page-ai-model-selection .dg-bin-body { display: flex; flex-direction: column; gap: 8px; min-height: 46px; } body.page-ai-model-selection .dg-bin .dg-tag { border-color: var(--accent); background: var(--peach); color: var(--navy); } body.page-ai-model-selection .dg-flags { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } body.page-ai-model-selection .dg-flags li { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); display: flex; gap: 9px; align-items: center; opacity: .3; transition: opacity .3s; } body.page-ai-model-selection .dg-flags li::before { content: ""; width: 7px; height: 7px; background: var(--accent); flex: none; transform: rotate(45deg); } body.page-ai-model-selection .diagram[data-state="one"] .dg-flags li { animation: ams-flagpulse 3s infinite; } body.page-ai-model-selection .diagram[data-state="one"] .dg-flags li:nth-child(2) { animation-delay: .5s; } body.page-ai-model-selection .diagram[data-state="one"] .dg-flags li:nth-child(3) { animation-delay: 1s; } @keyframes ams-flagpulse { 0%,60%,100% { opacity: .3; } 20%,40% { opacity: 1; } } body.page-ai-model-selection .diagram[data-state="routed"] .dg-pool { border-style: solid; border-color: var(--hair-2); background: #fff; opacity: .55; } body.page-ai-model-selection .diagram[data-state="routed"] .dg-flags { display: none; } /* The mirror of the above: whichever half is not the current state reads as deactivated. Pooled, the bins and their label are waiting rather than in play, so they take the same .55 the pool takes once emptied. Transitioned on the same curve as the tags so the two halves hand over rather than blink. */ body.page-ai-model-selection .dg-bins-hd, body.page-ai-model-selection .dg-bins, body.page-ai-model-selection .dg-pool { transition: opacity 720ms cubic-bezier(.33,.9,.28,1), border-color .35s, background .35s; } body.page-ai-model-selection .diagram[data-state="one"] .dg-bins-hd, body.page-ai-model-selection .diagram[data-state="one"] .dg-bins { opacity: .55; } /* Same treatment as the picker's "Try a real job" presets in chapter 02: both are a row of alternatives the reader is meant to try, so they read as one control type rather than two. Tinted band broken out to the panel edges, accent chips on white, filled accent when active. The band's negative margins track .diagram's padding, so they change with it at the mobile breakpoint. */ body.page-ai-model-selection .dg-ctl { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 28px -36px -26px; padding: 22px 36px 24px; background: var(--accent-soft); border-top: 1px solid var(--hair-2); } body.page-ai-model-selection .dg-tab { border: 1px solid var(--accent); background: #fff; padding: 9px 15px; font-size: 14px; font-weight: 600; color: var(--accent); cursor: pointer; transition: all .15s; } body.page-ai-model-selection .dg-tab:hover, body.page-ai-model-selection .dg-tab:focus-visible, body.page-ai-model-selection .diagram[data-state="one"] .dg-tab[data-go="one"], body.page-ai-model-selection .diagram[data-state="routed"] .dg-tab[data-go="routed"] { background: var(--accent); border-color: var(--accent); color: #fff; } /* ---------- 02 picker ---------- */ body.page-ai-model-selection .picker { display: grid; grid-template-columns: 1fr 380px; gap: 0; border: 1px solid var(--hair); background: #fff; } body.page-ai-model-selection .pk-controls { padding: 32px 34px; } body.page-ai-model-selection .pk-ctl { margin-bottom: 24px; } body.page-ai-model-selection .pk-lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--body-2); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } body.page-ai-model-selection .info { width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--hair); background: #fff; color: var(--body-2); font-size: 10px; line-height: 1; cursor: help; padding: 0; position: relative; } body.page-ai-model-selection .info:hover { border-color: var(--accent); color: var(--accent); } body.page-ai-model-selection .info::after { content: attr(data-tip); position: absolute; left: 50%; top: 26px; transform: translateX(-50%); width: min(340px,70vw); background: var(--navy); color: #fff; font-family: var(--font); font-size: 13.5px; line-height: 1.55; letter-spacing: 0; text-transform: none; text-align: left; padding: 13px 15px; opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 20; } body.page-ai-model-selection .info:hover::after, body.page-ai-model-selection .info:focus::after { opacity: 1; } body.page-ai-model-selection .pk-seg { display: flex; gap: 6px; flex-wrap: wrap; } body.page-ai-model-selection .sg { border: 1px solid var(--hair); background: #fff; padding: 10px 15px; font-size: 14.5px; font-weight: 600; color: var(--body-2); cursor: pointer; transition: all .15s; min-width: 44px; } body.page-ai-model-selection .sg:hover { border-color: var(--navy); color: var(--navy); } body.page-ai-model-selection .sg.on { background: var(--navy); border-color: var(--navy); color: #fff; } /* The presets are the one thing on this panel worth clicking first, and as a grey label over white chips they read as another form control. Three changes separate them from the inputs above: a tinted band that breaks out to the panel edges, an accent label carrying an arrow into the row, and chips in accent rather than the neutral hairline the map filters use. Nothing here changes the copy or the markup. */ body.page-ai-model-selection .pk-presets { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 28px -34px -32px; padding: 22px 34px 24px; background: var(--accent-soft); border-top: 1px solid var(--hair-2); } /* Label on its own line. Inline, it took enough of the row that the three presets broke across two lines and stopped reading as one set of options. */ body.page-ai-model-selection .pk-presets > span { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); width: 100%; margin: 0 0 2px; display: flex; align-items: center; gap: 10px; } body.page-ai-model-selection .pk-presets > span::after { content: ''; height: 1px; background: var(--accent); opacity: .3; flex: 1; } body.page-ai-model-selection .pk-presets .chip { border-color: var(--accent); color: var(--accent); background: #fff; } body.page-ai-model-selection .pk-presets .chip:hover, body.page-ai-model-selection .pk-presets .chip:focus-visible { background: var(--accent); border-color: var(--accent); color: #fff; } body.page-ai-model-selection .pk-out { background: var(--ink); color: #fff; padding: 32px 34px; display: flex; flex-direction: column; } body.page-ai-model-selection .pk-out-lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); } body.page-ai-model-selection .pk-fam { font-family: var(--display); font-weight: 400; font-size: clamp(26px,2.4vw,36px); line-height: 1.1; color: #fff; margin-top: 14px; min-height: 1.1em; } body.page-ai-model-selection .pk-fam.flash { animation: ams-famflash .5s ease; } @keyframes ams-famflash { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } body.page-ai-model-selection .pk-why { margin: 18px 0 0; font-size: 16px; line-height: 1.65; color: rgba(255,255,255,.78); text-wrap: pretty; } body.page-ai-model-selection .pk-excl { margin-top: auto; padding-top: 22px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #FFB08C; min-height: 20px; } /* ---------- 03 model map ---------- */ body.page-ai-model-selection .famkey { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px 40px; margin-bottom: 46px; } body.page-ai-model-selection .famkey > div { border-top: 1px solid var(--hair); padding-top: 14px; } body.page-ai-model-selection .famkey .fn { font-size: 16.5px; font-weight: 700; color: var(--strong); } body.page-ai-model-selection .famkey .fd { font-size: 14.5px; line-height: 1.55; color: var(--body-2); margin-top: 6px; } body.page-ai-model-selection .chips { display: flex; gap: 26px 44px; flex-wrap: wrap; align-items: center; margin: 0 0 30px; padding: 22px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); } body.page-ai-model-selection .chipgroup { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } body.page-ai-model-selection .chipgroup .glbl { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--body-2); margin-right: 6px; width: 100%; } /* Pulled 16px left and widened to match, so the job column can carry 16px of inner padding without the labels drifting off the page's left margin. The text still starts where every other element on the page starts; only the cell box, and therefore the row highlight, extends further left. */ body.page-ai-model-selection .maptable { width: calc(100% + 16px); margin-left: -16px; border-collapse: collapse; font-size: 14px; } body.page-ai-model-selection .maptable th { font-family: var(--mono) !important; font-size: 10.5px !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--strong) !important; font-weight: 500 !important; padding: 18px 10px 14px !important; text-align: center !important; vertical-align: bottom !important; line-height: 1.4; border-bottom: 1px solid var(--navy) !important; border-top: 0 !important; border-left: 0 !important; border-right: 0 !important; background: var(--ams-stick-bg, var(--white)) !important; transition: color .2s; } body.page-ai-model-selection .maptable th.lit { color: var(--accent) !important; box-shadow: inset 0 -3px 0 var(--accent); } body.page-ai-model-selection .maptable th.jobcol { text-align: left !important; padding-left: 16px !important; width: 226px !important; } body.page-ai-model-selection .maptable td { padding: 0 !important; border-bottom: 1px solid var(--hair) !important; border-top: 0 !important; border-left: 0 !important; border-right: 0 !important; text-align: center !important; background: transparent; } body.page-ai-model-selection .maptable tr { transition: opacity .2s; } /* Filtered out rows are inert as well as faded. Left interactive they still took hover highlight and still popped their tooltip, which reads as the filter not having applied. */ body.page-ai-model-selection .maptable tr.dim { opacity: .2; pointer-events: none; } body.page-ai-model-selection .maptable tbody tr:hover td { background: #fbfbf9; } body.page-ai-model-selection .maptable tr.lit td, body.page-ai-model-selection .maptable tbody tr.lit:hover td { background: var(--peach); } body.page-ai-model-selection .maptable tr.lit td.job { color: var(--navy); } body.page-ai-model-selection .maptable td.job { text-align: left !important; padding: 14px 18px 14px 16px !important; font-size: 15px; font-weight: 600; color: var(--strong); line-height: 1.35; position: relative; } /* No accent edge on the highlighted row. The peach row fill already marks it, and the bar read as a second, harder selection state on the left rule. */ body.page-ai-model-selection .maptable td.job .sl { display: block; font-family: var(--mono) !important; font-size: 10.5px !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--body-2) !important; font-weight: 400 !important; margin-top: 5px !important; } body.page-ai-model-selection .cell { width: 100%; min-height: 54px; border: 0; background: none; cursor: default; display: flex; flex-direction: column; gap: 5px; align-items: center; justify-content: center; padding: 8px 4px; } body.page-ai-model-selection .cell.hit { cursor: pointer; } body.page-ai-model-selection .cell .mark { width: 9px; height: 9px; border-radius: 50%; background: #e4e4e0; transition: transform .25s, background .2s; } body.page-ai-model-selection .cell.hit .mark { width: 14px; height: 14px; background: var(--navy); box-shadow: 0 0 0 4px rgba(20,37,51,.08); } body.page-ai-model-selection .cell.hit:hover, body.page-ai-model-selection .cell.hit.sel { background: var(--peach); } body.page-ai-model-selection .cell.hit:hover .mark, body.page-ai-model-selection .cell.hit.sel .mark { background: var(--accent); box-shadow: 0 0 0 5px rgba(250,73,0,.16); } body.page-ai-model-selection .cell.hit.sel .mark { transform: scale(1.45); } body.page-ai-model-selection .cell .qual { font-family: var(--mono) !important; font-size: 9.5px !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--accent) !important; font-weight: 400 !important; text-align: center; line-height: 1.2 !important; } /* Map rationale popup — native pattern, matching the homepage / ES technology table (.clx-tp-card-popup): white card, 2px accent border, name + description, shown on hover. Replaces v2's fixed dark .maptip on request. The is the positioning context; popups sit above the cell and flip below for the first two rows so they never render off the top of the table. Touch never fires hover, and the design already swaps to .mapcards below 880px, which carry the same rationale as body text. */ body.page-ai-model-selection .maptable td { position: relative; } body.page-ai-model-selection .maptable .cell.hit { position: static; } body.page-ai-model-selection .ams-pop { position: absolute; bottom: calc(100% - 6px); left: 50%; transform: translate(-50%, 4px); width: 340px; max-width: min(340px, calc(100vw - 32px)); padding: 18px 20px; background: #fff; border: 2px solid var(--accent); border-radius: 10px; box-shadow: 0 18px 40px -18px rgba(20,37,51,.35); opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 40; text-align: left; pointer-events: none; } body.page-ai-model-selection .maptable .cell.hit:hover .ams-pop, body.page-ai-model-selection .maptable .cell.hit:focus .ams-pop, body.page-ai-model-selection .maptable .cell.hit.sel .ams-pop { opacity: 1; visibility: visible; transform: translate(-50%, 0); } body.page-ai-model-selection .maptable tbody tr:nth-child(-n+2) .ams-pop { bottom: auto; top: calc(100% - 6px); transform: translate(-50%, -4px); } body.page-ai-model-selection .maptable tbody tr:nth-child(-n+2) .cell.hit:hover .ams-pop, body.page-ai-model-selection .maptable tbody tr:nth-child(-n+2) .cell.hit:focus .ams-pop, body.page-ai-model-selection .maptable tbody tr:nth-child(-n+2) .cell.hit.sel .ams-pop { transform: translate(-50%, 0); } body.page-ai-model-selection .ams-pop-name { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } body.page-ai-model-selection .ams-pop-desc { display: block; font-family: var(--font); font-size: 14.5px; line-height: 1.55; color: var(--strong); text-transform: none; letter-spacing: 0; } /* No border-top and no measure cap. The table's last row already draws a bottom hairline, so the note's own border read as a second stray rule sitting 30px under the first. Runs the full column width. */ body.page-ai-model-selection .mapnote { margin-top: 30px; font-size: 16px; line-height: 1.7; color: var(--body); max-width: none; text-wrap: pretty; } body.page-ai-model-selection .mapcards { display: none; flex-direction: column; gap: 0; } body.page-ai-model-selection .mapcards .mc { padding: 20px 0; border-top: 1px solid var(--hair-2); } /* A div, not a heading. These mobile cards repeat the desktop table's twelve job families verbatim, so as

they added twelve duplicate headings and jumped the outline from the chapter's h2 straight to h4. */ body.page-ai-model-selection .mapcards .mc .mc-t { font-size: 18px; font-weight: 700; color: var(--strong); } body.page-ai-model-selection .mapcards .mc .fam { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 7px 0 9px; } body.page-ai-model-selection .mapcards .mc p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--body); } /* ---------- 03 current implementations strip ---------- Disclosure half of the framework: the map publishes families, this publishes what is currently in them. Five columns in the map's own column order, so the eye travels straight down from a table header to its models. Provider identity is typeset, not an image. Wordmarks sit grey at rest and go brand orange with the model name on hover, which gives the "grayscale at rest, colour on hover" behaviour of a logo wall without shipping third-party artwork, extra requests, or anything that breaks when a vendor rebrands. -------------------------------------------------------------------------- */ body.page-ai-model-selection .impl { margin-top: 48px; padding-top: 30px; border-top: 1px solid var(--hair); } body.page-ai-model-selection .impl-hd { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--navy); font-weight: 500; margin: 0 0 12px; } body.page-ai-model-selection .impl-sub { margin: 0 0 30px; font-size: 15px; line-height: 1.65; color: var(--body-2); max-width: 88ch; text-wrap: pretty; } body.page-ai-model-selection .impl-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 26px 24px; } /* Small caps, tracked out, over a 2px brand rule. */ body.page-ai-model-selection .impl-name { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); padding-bottom: 10px; margin-bottom: 14px; border-bottom: 2px solid var(--accent); min-height: 2.6em; } body.page-ai-model-selection .impl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } body.page-ai-model-selection .impl-list a { display: block; text-decoration: none; color: inherit; border: 1px solid var(--hair); background: #fff; padding: 10px 12px; transition: border-color .15s, background .15s; } body.page-ai-model-selection .impl-list a:hover, body.page-ai-model-selection .impl-list a:focus-visible { border-color: var(--accent); background: var(--peach); } /* Fixed height so every wordmark sits on one optical baseline, the way a 32px logo row would. */ body.page-ai-model-selection .impl-mark { display: flex; align-items: center; height: 32px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--body-2); transition: color .15s; } body.page-ai-model-selection .impl-list a:hover .impl-mark, body.page-ai-model-selection .impl-list a:focus-visible .impl-mark { color: var(--accent); } body.page-ai-model-selection .impl-model { display: flex; align-items: center; gap: 5px; font-size: 12px; line-height: 1.35; color: var(--strong); text-wrap: pretty; } body.page-ai-model-selection .impl-list a:hover .impl-model { color: var(--navy); } body.page-ai-model-selection .impl-ext { width: 10px; height: 10px; flex: none; opacity: .55; } body.page-ai-model-selection .impl-judge { margin: 30px 0 0; font-size: 15px; line-height: 1.65; font-style: italic; color: var(--body-2); max-width: 88ch; text-wrap: pretty; } body.page-ai-model-selection .impl-foot { margin: 14px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--body-2); max-width: 88ch; text-wrap: pretty; } /* Five columns do not survive a tablet, and the spec calls for two on mobile. The fifth column simply sits alone on the third row. */ @media (max-width: 1100px) { body.page-ai-model-selection .impl-grid { grid-template-columns: repeat(3,1fr); } } @media (max-width: 760px) { body.page-ai-model-selection .impl-grid { grid-template-columns: repeat(2,1fr); gap: 22px 16px; } body.page-ai-model-selection .impl-name { min-height: 3.8em; } } /* ---------- 04 governance ---------- */ body.page-ai-model-selection .govgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--hair); } body.page-ai-model-selection .gv { background: #fff; padding: 28px 26px 24px; display: flex; flex-direction: column; gap: 14px; } body.page-ai-model-selection .gv .gicon { width: 34px; height: 34px; flex: none; } body.page-ai-model-selection .gv .gn { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--body-2); } body.page-ai-model-selection .gv h3 { font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--navy); } body.page-ai-model-selection .gv .gsum { margin: 0; font-size: 16px; line-height: 1.6; color: var(--body); } body.page-ai-model-selection .gv-fig { margin: 16px 0 0; } body.page-ai-model-selection .gv-fig img { width: 100%; height: auto; border: 1px solid var(--hair); cursor: zoom-in; } body.page-ai-model-selection .gv-fig figcaption { margin-top: 9px; font-size: 13.5px; line-height: 1.55; color: var(--body-2); } /* ---------- 05 triggers ---------- */ /* The track hides its native scrollbar, which removes the only built in signal that content continues past the right edge. Three signals replace it: a fade over whichever edge still has content behind it, a rail whose thumb is sized to the visible fraction, and a position counter. The fades are overlays with pointer-events:none rather than a mask, so nothing inside the track is clipped, and they paint in the chapter's own background via --ams-stick-bg so the card edge dissolves rather than sitting under a grey wash. */ body.page-ai-model-selection .trigwrap { position: relative; } body.page-ai-model-selection .trigwrap::before, body.page-ai-model-selection .trigwrap::after { content: ''; position: absolute; top: 0; bottom: 46px; width: 90px; pointer-events: none; opacity: 0; transition: opacity .25s; z-index: 2; } body.page-ai-model-selection .trigwrap::before { left: 0; background: linear-gradient(to right, var(--ams-stick-bg, var(--white)), transparent); } body.page-ai-model-selection .trigwrap::after { right: 0; background: linear-gradient(to left, var(--ams-stick-bg, var(--white)), transparent); } body.page-ai-model-selection .trigwrap.has-prev::before, body.page-ai-model-selection .trigwrap.has-next::after { opacity: 1; } body.page-ai-model-selection .track { display: grid; grid-auto-flow: column; grid-auto-columns: min(520px,80vw); gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; margin-top: 8px; scrollbar-width: none; } body.page-ai-model-selection .track::-webkit-scrollbar { display: none; } body.page-ai-model-selection .trig { scroll-snap-align: start; border-left: 1px solid var(--hair); padding: 30px 40px 10px; } body.page-ai-model-selection .trig:first-child { padding-left: 0; border-left: 0; } body.page-ai-model-selection .trig .tn { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); } body.page-ai-model-selection .trig h3 { font-family: var(--display); font-weight: 400; font-size: 32px; line-height: 1.08; color: var(--navy); margin: 14px 0 16px; } body.page-ai-model-selection .trig .tsum { font-size: 17px; line-height: 1.7; color: var(--body); margin: 0; text-wrap: pretty; } body.page-ai-model-selection .trig-fig { margin: 18px 0 0; } body.page-ai-model-selection .trig-fig img { width: 100%; height: auto; border: 1px solid var(--hair); cursor: zoom-in; } body.page-ai-model-selection .trig-fig figcaption { margin-top: 9px; font-size: 13.5px; line-height: 1.55; color: var(--body-2); } body.page-ai-model-selection .trackbar { display: flex; gap: 10px; align-items: center; margin-top: 24px; } body.page-ai-model-selection .tnav { width: 44px; height: 44px; border: 1px solid var(--hair); background: #fff; color: var(--navy); cursor: pointer; display: grid; place-items: center; padding: 0; transition: all .15s; } body.page-ai-model-selection .tnav svg { width: 20px; height: 20px; } body.page-ai-model-selection .tnav:hover { border-color: var(--accent); color: var(--accent); } body.page-ai-model-selection .tnav[disabled] { opacity: .3; cursor: default; border-color: var(--hair-2); } body.page-ai-model-selection .tnav[disabled]:hover { border-color: var(--hair-2); color: var(--navy); } /* Rail and counter. The thumb width is the visible fraction of the track, so its length says how much is off screen and its position says where you are. */ body.page-ai-model-selection .trackrail { flex: 1; height: 2px; background: var(--hair); position: relative; margin: 0 8px; min-width: 60px; } body.page-ai-model-selection .trackrail i { position: absolute; top: -1px; height: 4px; background: var(--accent); left: 0; width: 30%; transition: left .25s ease, width .25s ease; } body.page-ai-model-selection .trackcount { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--body-2); flex: none; font-variant-numeric: tabular-nums; } /* ---------- 06 case study ---------- */ /* Case study figures, matching the treatment on /project/ case studies exactly: 12px radius, no border and no shadow, capped at 900px and centred, caption centred at .85em in #727272 reading "Fig N - Name. Description". Measured off a live case study rather than eyeballed, so the two read as one house style. */ /* Asymmetric on purpose. The paragraph above contributes its own 22px bottom margin, so 30px there reads as ~52px; below the caption there is nothing else contributing, so it carries the full 48px itself. Equal margins looked tight under the caption and loose above the image. */ /* !important because Elementor's own reset zeroes figure margins at a higher specificity than a single class can reach. Same collision class as the .container and table-cell overrides at the top of this file. Asymmetric on purpose: the paragraph above contributes its own 22px bottom margin, so 30px there reads as ~52px, while below the caption nothing else contributes and the 48px has to carry the gap on its own. */ body.page-ai-model-selection .csfig { margin: 30px 0 48px !important; } body.page-ai-model-selection .csfig-frame { max-width: min(900px, 100%); margin: 0 auto; border-radius: 12px; overflow: hidden; } body.page-ai-model-selection .csfig-frame img { display: block; width: 100%; height: auto; border-radius: 12px; cursor: zoom-in; } body.page-ai-model-selection .csfig figcaption { max-width: min(900px, 100%); margin: 12px auto 0; text-align: center; font-size: 15px; line-height: 1.5; color: #727272; text-wrap: pretty; } body.page-ai-model-selection .csfig figcaption strong { font-weight: 700; color: var(--strong); } body.page-ai-model-selection .csfig figcaption em { font-style: italic; } /* Full layout width. The design's 920px cap left a wide empty gutter to the right of the case study while every other chapter ran the full column. */ body.page-ai-model-selection .caseflow { max-width: none; } body.page-ai-model-selection .caselead { font-family: var(--display); font-size: clamp(20px,1.9vw,25px); line-height: 1.45; color: var(--navy); margin: 0 0 40px; text-wrap: pretty; } body.page-ai-model-selection .csub { display: flex; align-items: baseline; gap: 16px; font-family: var(--display); font-weight: 400; font-size: clamp(26px,2.6vw,34px); line-height: 1.1; color: var(--navy); margin: 64px 0 20px; padding-top: 22px; border-top: 1px solid var(--navy); } body.page-ai-model-selection .csub .cs-i { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--accent); } body.page-ai-model-selection .stall { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--hair); margin-top: 8px; } body.page-ai-model-selection .st { background: #fff; padding: 24px 24px 26px; } body.page-ai-model-selection .st-n { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 10px; } body.page-ai-model-selection .st p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--body); } /* Evidence figures sit inline where the prose describes them, not in a gallery. The design's .ev-frame placeholder hatching is dropped since real images ship. */ body.page-ai-model-selection .ev { margin: 34px 0 0; padding: 0; } /* No rule under the header strip: the design's navy border-bottom sat directly on top of every screenshot (the frame has border-top:0) and read as a black line across the image. */ body.page-ai-model-selection .ev-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 10px; } body.page-ai-model-selection .ev-t { font-size: 16px; font-weight: 700; color: var(--navy); } body.page-ai-model-selection .ev-f { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--body-2); } body.page-ai-model-selection .ev-frame { border: 1px solid var(--hair); background: #fff; width: 100%; } body.page-ai-model-selection .ev-frame img { width: 100%; height: auto; display: block; cursor: zoom-in; } body.page-ai-model-selection .ev figcaption { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: var(--body-2); max-width: 80ch; } body.page-ai-model-selection .routetable { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 8px; } body.page-ai-model-selection .routetable th { text-align: left !important; font-family: var(--mono) !important; font-size: 10.5px !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--strong) !important; font-weight: 500 !important; padding: 0 16px 12px 0 !important; border-bottom: 1px solid var(--navy) !important; border-top: 0 !important; border-left: 0 !important; border-right: 0 !important; vertical-align: bottom !important; background: transparent !important; } body.page-ai-model-selection .routetable td { padding: 15px 16px 15px 0 !important; border-bottom: 1px solid var(--hair) !important; border-top: 0 !important; border-left: 0 !important; border-right: 0 !important; vertical-align: top !important; line-height: 1.5; color: var(--body); background: transparent !important; } body.page-ai-model-selection .routetable td:first-child { color: var(--strong); font-weight: 600; width: 20%; } body.page-ai-model-selection .routetable td:nth-child(2) { width: 17%; color: var(--body-2); } body.page-ai-model-selection .routetable td:nth-child(3) { width: 23%; color: var(--navy); font-weight: 600; } body.page-ai-model-selection .outcards { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--hair); margin-top: 8px; } body.page-ai-model-selection .oc { background: #fff; padding: 24px; } body.page-ai-model-selection .oc-h { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } body.page-ai-model-selection .oc p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--body); } body.page-ai-model-selection .takeaway { margin: 52px 0 0; padding: 32px 0 0; border-top: 1px solid var(--navy); font-family: var(--display); font-size: clamp(21px,2.1vw,28px); line-height: 1.4; color: var(--navy); text-wrap: pretty; } /* ---------- framework detail (expanded) ---------- */ body.page-ai-model-selection .crit { display: grid; grid-template-columns: 280px 1fr; gap: 48px; padding: 44px 0; border-top: 1px solid var(--hair); } /* Q1..Q4, not 01..04. The chapter numerals are the same display face at the same scale, so bare digits here read as a second chapter sequence. The Q also says what these are: the four questions asked of every job. */ body.page-ai-model-selection .crit .cn { font-family: var(--display); font-size: 46px; line-height: .8; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } body.page-ai-model-selection .crit h3 { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1.1; margin-top: 16px; color: var(--navy); } body.page-ai-model-selection .crit .def { font-size: 18px; line-height: 1.65; color: var(--strong); margin: 0 0 18px; text-wrap: pretty; } body.page-ai-model-selection .crit .anchors { font-size: 17px; line-height: 1.7; color: var(--body); margin: 0; padding-top: 18px; border-top: 1px solid var(--hair-2); text-wrap: pretty; } body.page-ai-model-selection .crit .anchors .lbl { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--body-2); margin-bottom: 10px; } body.page-ai-model-selection table.grid { width: 100%; border-collapse: collapse; margin-top: 48px; font-size: 16px; } body.page-ai-model-selection table.grid th { text-align: left !important; font-family: var(--mono) !important; font-size: 11px !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--body-2) !important; font-weight: 400 !important; padding: 0 18px 12px 0 !important; border-bottom: 1px solid var(--navy) !important; border-top: 0 !important; border-left: 0 !important; border-right: 0 !important; background: transparent !important; } body.page-ai-model-selection table.grid td { padding: 16px 18px 16px 0 !important; border-bottom: 1px solid var(--hair-2) !important; border-top: 0 !important; border-left: 0 !important; border-right: 0 !important; vertical-align: top !important; line-height: 1.55; background: transparent !important; } body.page-ai-model-selection table.grid td:first-child { color: var(--strong); font-weight: 600; width: 22%; } /* Scale column is monospace in the brief: it is the technical, machine-readable axis between the criterion name and the prose examples. The theme forces font-family on cells, so this needs !important like every other table rule. */ body.page-ai-model-selection table.grid td:nth-child(2) { font-family: var(--mono) !important; font-size: 13px !important; color: var(--accent) !important; width: 24% !important; line-height: 1.55 !important; } /* ---------- closing ---------- */ body.page-ai-model-selection .closing { background: var(--navy); color: rgba(255,255,255,.75); padding: 96px 0; } body.page-ai-model-selection .closing h2 { color: #fff; font-family: var(--display); font-weight: 400; font-size: clamp(30px,3.4vw,44px); line-height: 1.1; } body.page-ai-model-selection .closing p { font-size: 17px; line-height: 1.75; color: rgba(255,255,255,.7); margin: 0 0 24px; max-width: 70ch; text-wrap: pretty; } body.page-ai-model-selection .closing .mono { color: rgba(255,255,255,.5); } body.page-ai-model-selection .closing .btn-onink { background: #fff; color: var(--navy) !important; border-color: #fff; } body.page-ai-model-selection .closing .btn-onink:hover { background: var(--accent); color: #fff !important; border-color: var(--accent); } body.page-ai-model-selection .closing .related { display: flex; gap: 10px 18px; flex-wrap: wrap; font-size: 15.5px; margin-top: 16px; } body.page-ai-model-selection .closing .related a { color: #fff; } body.page-ai-model-selection .closing .related a:hover { color: var(--accent); } body.page-ai-model-selection .closing .related .sep { color: rgba(255,255,255,.3); } body.page-ai-model-selection .closing hr { border: 0; border-top: 1px solid rgba(255,255,255,.14); margin: 52px 0; } /* ---------- lightbox ---------- */ body.page-ai-model-selection .ams-lb { position: fixed; inset: 0; background: rgba(11,13,16,.92); z-index: 99999; display: none; align-items: center; justify-content: center; padding: 40px; cursor: zoom-out; } body.page-ai-model-selection .ams-lb.is-open { display: flex; } body.page-ai-model-selection .ams-lb img { max-width: 100%; max-height: 100%; width: auto; height: auto; } /* ---------- responsive ---------- */ @media (max-width: 1000px) { body.page-ai-model-selection .stall { grid-template-columns: 1fr; } body.page-ai-model-selection .outcards { grid-template-columns: 1fr; } body.page-ai-model-selection .maptable { font-size: 13px; } body.page-ai-model-selection .maptable th.jobcol { width: 186px !important; } body.page-ai-model-selection .maptable td.job { font-size: 14px; } body.page-ai-model-selection .famkey { grid-template-columns: repeat(2,1fr); } body.page-ai-model-selection .picker { grid-template-columns: 1fr; } body.page-ai-model-selection .govgrid { grid-template-columns: repeat(2,1fr); } body.page-ai-model-selection .crit-strip { grid-template-columns: repeat(2,1fr); } body.page-ai-model-selection .crit { grid-template-columns: 1fr; gap: 20px; } } @media (max-width: 880px) { body.page-ai-model-selection .maptable { display: none; } body.page-ai-model-selection .mapcards { display: flex; } body.page-ai-model-selection .ams-pop { display: none; } body.page-ai-model-selection .chips { display: none; } } @media (max-width: 760px) { body.page-ai-model-selection .routetable { font-size: 14px; } body.page-ai-model-selection .routetable td, body.page-ai-model-selection .routetable th { padding-right: 10px !important; } body.page-ai-model-selection .readmeta { gap: 12px; } body.page-ai-model-selection .chapter { padding: 64px 0; } body.page-ai-model-selection .chapter-head { gap: 16px; } body.page-ai-model-selection .claim { margin-bottom: 32px; } body.page-ai-model-selection .famkey { grid-template-columns: 1fr; } body.page-ai-model-selection .govgrid { grid-template-columns: 1fr; } body.page-ai-model-selection .crit-strip { grid-template-columns: 1fr; } /* Source's own mobile block: the three bins stack, the pool stays as it is. */ body.page-ai-model-selection .diagram { padding: 22px 18px 18px; } body.page-ai-model-selection .dg-bins-hd { margin: 14px 0 10px; } body.page-ai-model-selection .dg-bins { grid-template-columns: 1fr; gap: 10px; } body.page-ai-model-selection .dg-bin { padding: 13px 14px; } body.page-ai-model-selection .dg-bin-body { min-height: 0; } body.page-ai-model-selection .dg-ctl { margin: 22px -18px -18px; padding: 18px; } body.page-ai-model-selection .proof { gap: 32px; } body.page-ai-model-selection .cover-cta { flex-wrap: wrap; } body.page-ai-model-selection .track { grid-auto-columns: 86vw; } body.page-ai-model-selection .trig { padding: 26px 22px 10px; } } /* The theme kills every line break under 767px (style.css, `body main br`), which ran "One model" straight into "for every job" with no space at all. Restored for this page, where the breaks are deliberate typesetting. The markup also carries a space before each
so the words stay apart even if a rule elsewhere hides them again. */ @media (max-width: 767px) { body.page-ai-model-selection main br { display: inline !important; } } @media (prefers-reduced-motion: reduce) { body.page-ai-model-selection .rv { opacity: 1; transform: none; transition: none; } body.page-ai-model-selection .diagram[data-state="one"] .dg-flags li { animation: none; opacity: 1; } } /* ---------- unwrap the Elementor mount ---------- Thin elementor_header_footer page, so our sections render inside section > .elementor-container > .elementor-column > .elementor-widget-wrap. That chain caps width at the Elementor container width, which left every .container pinned at 1140 starting from x=0 instead of centring inside the viewport, so the whole page sat flush left against a centred footer. Scoped by body, not by section id: the id-based version silently failed to match, and every Elementor node on this page belongs to us anyway. The FAQ accordion section is excluded so the PowerPack widget keeps normal Elementor layout. position:static matters - a positioned ancestor would become the containing block for the fixed .svc-toc and .ams-progress. */ body.page-ai-model-selection .elementor-section:not(.ams-keep), body.page-ai-model-selection .elementor-section:not(.ams-keep) > .elementor-container, body.page-ai-model-selection .elementor-section:not(.ams-keep) > .elementor-container > .elementor-column, body.page-ai-model-selection .elementor-section:not(.ams-keep) > .elementor-container > .elementor-column > .elementor-widget-wrap { max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; position: static !important; transform: none !important; } body.page-ai-model-selection .elementor-section:not(.ams-keep) .elementor-widget-container, body.page-ai-model-selection .elementor-section:not(.ams-keep) .elementor-shortcode { margin: 0 !important; padding: 0 !important; width: 100% !important; } /* The FAQ accordion keeps the site's normal centred column. */ body.page-ai-model-selection .elementor-element-amsfaqs > .elementor-container { max-width: 1140px !important; margin-left: auto !important; margin-right: auto !important; } /* The criterion table and the routing table are left aligned in the brief: only .maptable centres (its cells hold dot markers, not text). The theme applies its own alignment to cells, so both are forced explicitly. */ body.page-ai-model-selection table.grid th, body.page-ai-model-selection table.grid td, body.page-ai-model-selection .routetable th, body.page-ai-model-selection .routetable td { text-align: left !important; } /* Governance evidence figure sits below the grid, full width. */ body.page-ai-model-selection .gov-ev { margin-top: 40px; } /* --------------------------------------------------------------------------- Heading left edge. The design sets .chapter-head and .csub as flex rows with the number first, which pushed heading TEXT to 230-327 while every paragraph, table and figure on the page starts at 198. Headings therefore never shared a left edge with the content they introduce. Stacking the number above the title puts the text back on 198. The number keeps its size and colour, so the design reads the same, it just no longer indents everything after it. Absolute positioning into the gutter was the alternative, but the gutter is only 48px and collapses to 20px on mobile, so the number would have overflowed the container. --------------------------------------------------------------------------- */ body.page-ai-model-selection .chapter-head { display: block; } body.page-ai-model-selection .chapter-head .chapnum { display: block; margin-bottom: 2px; } body.page-ai-model-selection .csub { display: block; } body.page-ai-model-selection .csub .cs-i { display: block; margin-bottom: 10px; } /* --------------------------------------------------------------------------- Sticky filters + table header for the model map. The chip bar and the column headers stay put while the twelve rows scroll, so the reader never loses which filter is active or which model family a column belongs to. The thead offset is --ams-chips-h, measured in JS and updated on resize, because the chip bar wraps to different heights by breakpoint and a hardcoded number would drift. border-collapse:collapse drops cell borders once a th is stuck, so the navy underline is redrawn with an inset box-shadow, which survives stickiness. Both stuck bars need an opaque background or the rows scroll through them. That background is --ams-stick-bg, set on .chapter to whatever that chapter paints, so a bar never announces itself as a white strip if the section it belongs to is ever moved to .alt. The gap under the chips hairline comes from padding-top on the th rather than a margin, so it belongs to the stuck header and stays opaque; a margin there would open a transparent slot between the two bars for rows to show through. Neither bar sticks to 0. The theme's header turns position:fixed at z-index 999999 once its JS adds .sticky past 250px of scroll (parent style.css, .haeder-default.sticky), so anything pinned to 0 pins underneath it and reads as not sticky at all. Both offset by --ams-hdr-h, which JS holds at the header's measured height while it is fixed and at 0 the rest of the time. --------------------------------------------------------------------------- */ /* How much of the top of the viewport is already spoken for by the theme's own fixed nav. Both bars clear it, or they pin underneath it and read as broken. --ams-hdr-fb is a floor, not a guess to be overridden: by the time either bar can pin, the page is thousands of pixels down and the nav is always in its fixed state, so a constant is correct here in every case that matters. --ams-hdr-h is the live measurement, and the two are combined with max() so a measurement can only ever push the bars further clear, never tuck them back underneath. An earlier version let the measurement win outright, and when it read nothing the bars pinned to 0 and vanished behind the nav. If this is a few pixels off, it shows as a small gap above the chip bar. That is the failure mode worth having. */ body.page-ai-model-selection { --ams-hdr-fb: 96px; } body.page-ai-model-selection.admin-bar { --ams-hdr-fb: 128px; } @media screen and (max-width: 782px) { body.page-ai-model-selection.admin-bar { --ams-hdr-fb: 142px; } } body.page-ai-model-selection .chips { position: sticky; z-index: 30; top: max(var(--ams-hdr-fb, 0px), var(--ams-hdr-h, 0px)); background: var(--ams-stick-bg, var(--white)); margin-bottom: 0; } body.page-ai-model-selection .maptable thead th { position: sticky; z-index: 20; top: calc(max(var(--ams-hdr-fb, 0px), var(--ams-hdr-h, 0px)) + var(--ams-chips-h, 201px)); box-shadow: inset 0 -1px 0 var(--navy); } body.page-ai-model-selection .maptable thead th.lit { box-shadow: inset 0 -3px 0 var(--accent); } /* The sticky scope. Both bars are bounded by this block, so they release at the end of the map instead of continuing over the implementations strip. It must not create a scroll context of its own, or sticky stops working entirely. */ body.page-ai-model-selection .mapwrap { position: relative; overflow: visible; } /* The map section needs a scroll context that does not clip sticky children. */ body.page-ai-model-selection #map .container { overflow: visible; } /* Mobile: the table is replaced by .mapcards, but the chips still filter them, so they stay visible and sticky rather than being hidden outright. */ @media (max-width: 880px) { body.page-ai-model-selection .chips { display: flex; position: sticky; z-index: 30; top: max(var(--ams-hdr-fb, 0px), var(--ams-hdr-h, 0px)); padding: 14px 0; gap: 12px 18px; } body.page-ai-model-selection .chipgroup .glbl { width: auto; margin-right: 4px; } body.page-ai-model-selection .chip { padding: 7px 11px; font-size: 13px; } } /* The theme sets body{overflow:hidden}, which makes the body a scroll container and silently disables position:sticky for every descendant. `clip` on the x axis keeps the horizontal containment the theme wants, without creating a scroll container, so sticky works and nothing scrolls sideways. */ body.page-ai-model-selection { overflow-x: clip !important; overflow-y: visible !important; } /* ---------- closing ask ---------- Intro copy sits on the page's own measure; the form card below is the shared component and keeps its own width from core.css. */ body.page-ai-model-selection .askwrap { max-width: 78ch; margin-bottom: 38px; } body.page-ai-model-selection .askwrap p.body:last-child { margin-bottom: 0; } body.page-ai-model-selection #ask .clx-form-card { margin-left: 0; margin-right: 0; } /* The FAQ accordion is the last thing on the page and the theme footer carries no top padding, so the two met with a 17px gap. The accordion is an Elementor widget rather than one of this component's own sections, so the space has to come from here; !important because the Elementor unwrap higher up this file zeroes padding on the mount's wrappers. Matches a chapter's own 104px. */ body.page-ai-model-selection .elementor-element-amsfaqw { padding-bottom: 104px !important; } @media (max-width: 760px) { body.page-ai-model-selection .elementor-element-amsfaqw { padding-bottom: 64px !important; } }