/* Theme-level additions and overrides on top of the v8.2 design CSS (site.css / liquid-glass.css stay verbatim). */

/* Accessibility: visually hidden text and a skip link that appears only on keyboard focus. */
.screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 100000; width: auto; height: auto; margin: 0; padding: 10px 16px; clip: auto; clip-path: none; overflow: visible; border-radius: 10px; background: #fff; color: #102747; font-size: 15px; box-shadow: 0 6px 24px rgba(3, 12, 30, .35); }

/* Subscribe / registration modal: compact version of the v8.2 card. */
.reg-card { width: min(440px, 100%); padding: 30px 32px 26px; border-radius: 24px; }
.reg-card h2 { margin-bottom: 20px; font-size: 24px; }
.reg-x { top: 14px; right: 14px; width: 32px; height: 32px; }
.reg-x svg { width: 16px; height: 16px; }
.reg-form { gap: 18px; }
.reg-row { gap: 16px; }
.reg-field input, .reg-field select { padding: 18px 2px 6px; font-size: 15px; }
.reg-field label { top: 18px; font-size: 15px; }
.reg-field input:focus + label, .reg-field input:not(:placeholder-shown) + label, .reg-field select:focus + label, .reg-field select:not([value=""]):valid + label, .reg-field.has-value label { transform: translateY(-15px) scale(.8); }
.reg-select::after { top: 24px; width: 7px; height: 7px; }
.reg-err { margin-top: 4px; font-size: 12px; }
.reg-check { gap: 10px; font-size: 14px; }
.reg-box { width: 20px; height: 20px; }
.reg-submit { margin-top: 2px; padding: 11px 38px; }
.reg-status { min-height: 16px; font-size: 14px; }
.reg-captcha-ph { padding: 10px 12px; font-size: 12.5px; }
@media (max-width: 560px) {
  .reg-card { padding: 26px 20px 22px; margin-top: 12px; }
  .reg-card h2 { font-size: 22px; margin-bottom: 16px; }
  .reg-row { gap: 18px; }
}

/* Job Role placeholder option reads dimmer than a chosen value. */
.reg-select:not(.has-value) select { color: #a9c4e8; }

/* Page titles: 40% smaller than the v8.2 sizes on every page except the home page (body.home keeps its hero title).
   v8.2: base h1 clamp(40px,6.5vw,86px); .feature-page h1 clamp(36px,5vw,64px). Both x0.6. */
body:not(.home) h1 { font-size: clamp(24px, 3.9vw, 52px); }
body:not(.home) .feature-page h1 { font-size: clamp(22px, 3vw, 38px); }

/* Live CAPTCHA widgets inside the compact navy registration modal. */
.reg-captcha { display: flex; justify-content: center; min-height: 78px; margin: 0; width: 100%; }
.reg-captcha[data-provider="recaptcha_v3"] { min-height: 0; }
.reg-captcha iframe { max-width: 100%; }

/* ---- Recognition (client round of 5 Oct) ---- */
/* Quote cards: the logo sits at the end of the links row, below the quote, at half its previous size. */
.recognition-card .recognition-links { align-items: center; flex-wrap: wrap; row-gap: 12px; }
.recognition-card .recognition-links .rec-logo-inline { min-height: 0; }
.recognition-card .recognition-links .rec-logo-inline img { height: 19px; max-width: 90px; }
.rec-awards .award-title-link { color: inherit; text-decoration: none; }
.rec-awards .award-title-link:hover, .rec-awards .award-title-link:focus-visible { color: var(--blue-d); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.rec-award-b .rec-badges > .rec-logo { margin: 0 12px 0 0; }
.rec-award-b .rec-badges > .rec-logo img { height: 34px; }

/* ---- Pending-item markers (REMOVE BEFORE LAUNCH: delete this block and every [data-dev-note="remove-before-launch"]) ----
   Red background marks something still waiting on content; hovering or focusing it explains what is missing. */
.ewb-pending { position: relative; background: #d92d20 !important; color: #fff !important; border-radius: 6px; padding: 2px 8px; text-decoration: none !important; cursor: help; }
.ewb-pending[data-pending]::after { content: attr(data-pending); position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 60; width: max-content; max-width: 260px; padding: 8px 12px; border-radius: 10px; background: #0a1a33; color: #fff; font: 500 12.5px/1.4 "Archivo", system-ui, sans-serif; letter-spacing: 0; text-align: left; white-space: normal; box-shadow: 0 10px 28px rgba(3, 12, 30, .35); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease, visibility .15s; pointer-events: none; }
.ewb-pending:hover::after, .ewb-pending:focus-visible::after { opacity: 1; visibility: visible; transform: none; }
.rec-award-b .rec-badges { align-items: flex-start; }

/* Award badges open the lightbox on click: show a normal pointer instead of the v8.2 magnifying-glass cursor. */
.award-link, .award-link img { cursor: pointer; }

/* Awards: two equal-width (50/50) cards. Each has the label (a link to its blog post) on top and its logos / badges underneath.
   ID-scoped so it wins over the layered v8.2 award rules. */
#recognition .rec-awards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: stretch; justify-content: stretch; flex-wrap: nowrap; }
#recognition .rec-awards > .rec-award-card { display: flex; flex-direction: column; flex: none; width: auto; min-width: 0; max-width: none; margin: 0; padding: 28px 30px 30px; }
#recognition .rec-awards .recognition-final { display: contents; }
#recognition .rec-awards .award-heading { margin: 0 0 22px; }
#recognition .rec-awards .rec-badges { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; margin-top: auto; }
@media (max-width: 860px) { #recognition .rec-awards { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
#recognition .rec-awards .award-img { height: 130px; width: auto; max-width: 100%; }
#recognition .rec-awards .rec-badges > .rec-logo { margin: 0; align-self: center; }
#recognition .rec-awards .rec-badges > .rec-logo { justify-content: flex-start; }
@media (max-width: 560px) { #recognition .rec-awards .rec-badges > .rec-logo { align-self: flex-start; } }
#recognition .rec-awards > .rec-award-card { align-items: flex-start; justify-content: flex-start; }

/* Subscribe modal on phones: centre the card vertically as well as horizontally.
   v8.2 pinned it to the top (align-items:start). auto margins centre it when it fits and fall back
   to top-aligned (scrollable) when the form is taller than the screen, so nothing is ever cut off. */
@media (max-width: 560px) {
  /* 24px minimum above and below (plus the notch / status-bar safe area), so the card never touches the screen edge,
     even when the screen is shorter than the form (keyboard open) and it has to scroll. */
  .reg { align-items: normal; justify-items: normal; padding: calc(24px + env(safe-area-inset-top, 0px)) 12px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .reg-card { margin: auto; }
}
@supports (height: 100dvh) {
  /* follow the visible area as mobile browser toolbars show and hide */
  @media (max-width: 560px) { .reg { bottom: auto; height: 100dvh; } }
}

/* Subscribe modal opened via the #register address (page reload, or a shared link).
   v8.2 had `.reg:target { display: block }`, which (a) replaced the centring grid so the card stuck to the top and
   (b) beat the [hidden] state, so Close / Esc could not dismiss it while the address still ended in #register
   (history.replaceState does not clear :target). Hidden always wins now; the open form always keeps its centring layout. */
.reg[hidden], .reg[hidden]:target { display: none !important; }
.reg:not([hidden]), .reg:not([hidden]):target { display: grid; }

/* Resources filters are real links (server-side filtering across all posts), styled like the original buttons. */
a.co-filter { display: inline-flex; align-items: center; text-decoration: none; }
.co-filter[aria-current="true"] { color: #fff; background: #1759b0; border-color: #1759b0; }

/* ---- Subscribe form: sending / success / error states ---- */
/* While a submission is in flight the whole card is dimmed and blocked (see the registration script in site.js). */
.reg-busy { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; border-radius: inherit; background: rgba(10, 26, 51, .74); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); color: #fff; font-size: 15px; font-weight: 500; letter-spacing: .01em; cursor: progress; animation: ewb-fade .18s ease-out; }
.reg-busy[hidden] { display: none; }
.reg-spinner { width: 46px; height: 46px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .22); border-top-color: #8fbbfa; animation: ewb-spin .8s linear infinite; }
/* Failure: red-tinted message and a short shake of the card. */
.reg-status.is-error { color: #ffb4a8; font-weight: 500; }
.reg-card.is-shake { animation: ewb-shake .42s cubic-bezier(.36, .07, .19, .97); }
/* Success: an animated green check above the thank-you message. */
.reg-form.is-done .reg-status::before { content: ""; display: block; width: 68px; height: 68px; margin: 0 auto 16px; border-radius: 50%; background: #1f9d6b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 7.8'/%3E%3C/svg%3E") center / 58% no-repeat; box-shadow: 0 10px 28px -8px rgba(31, 157, 107, .7); animation: ewb-pop .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes ewb-spin { to { transform: rotate(360deg); } }
@keyframes ewb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ewb-pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes ewb-shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) {
  .reg-busy, .reg-card.is-shake, .reg-form.is-done .reg-status::before { animation: none; }
  .reg-spinner { animation: none; border-color: #8fbbfa; }
}

/* "Ask AI" pill (disabled, coming soon): on phones and tablets it floated over page text, so it only shows where there is room. */
@media (max-width: 1099px) { .ask-ai { display: none !important; } }

/* ---- Large screens ----
   v8.2 capped the page at 1200px, which looks lost on a 27-32" display. Wider desktops get a wider measure;
   everything below 1700px is unchanged. The Tokenomics panel hard-codes 1136px, so it widens with the page. */
@media (min-width: 1700px) {
  .wrap { max-width: 1440px; }
  #tokenomics > .wrap { width: min(1376px, calc(100% - 64px)); }
}
@media (min-width: 2200px) {
  .wrap { max-width: 1760px; }
  #tokenomics > .wrap { width: min(1696px, calc(100% - 64px)); }
}

/* Dave (6 Oct): award cards carry the partner logo group under the award images; the left card's logo row spans exactly the width of the badges above it (first logo flush left, last logo flush right). Microsoft logo reduced to match. */
#recognition .rec-awards .rec-award-card .rec-badges { margin-top: 0; }
#recognition .rec-awards .rec-award-media { display: flex; flex-direction: column; align-items: stretch; width: fit-content; max-width: 100%; }
#recognition .rec-awards .rec-award-media .rec-badges { margin-top: 0; }
#recognition .rec-awards .rec-award-card .partner-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 14px 28px; margin: 24px 0 0; width: 100%; }
#recognition .rec-awards .rec-award-media .partner-logos { justify-content: space-between; }
#recognition .rec-awards .rec-award-card .partner-logos .rec-logo { min-height: 0; }
#recognition .rec-awards .rec-award-card .partner-logos .rec-logo img { height: 26px; max-width: 130px; }
#recognition .rec-awards .rec-award-card .partner-logos .rec-logo img[src*="dell"] { height: 30px; }
#recognition .rec-awards .rec-award-b .partner-logos .rec-logo img { height: 22px; }

/* Dave (6 Oct), Product tab / Knowledge Plane, Control Plane and Governance summary pages: tighten the gaps ~25% (he asked 20-30%) - opening section to the first numbered section, and between numbered sections. Desktop only; mobile spacing is unchanged. */
@media (min-width: 761px) {
	.kp-summary .chapsec:nth-of-type(1) .wrap, .cp-summary .chapsec:nth-of-type(1) .wrap, .gov-summary .chapsec:nth-of-type(1) .wrap { padding-bottom: 48px; }
	.kp-summary .chapsec:nth-of-type(2) .wrap, .cp-summary .chapsec:nth-of-type(2) .wrap { padding-top: 16px; }
	.gov-summary .chapsec:nth-of-type(2) .wrap { padding-top: 40px; } /* its second section opens with its own heading, so it keeps a little more air under the divider */
	.kp-summary .sub, .cp-summary .sub, .gov-summary .sub { padding: 32px 0 0; }
	.kp-summary .subnum, .cp-summary .subnum, .gov-summary .subnum { top: 24px; }
}

/* Dave (6 Oct), Product tab / Knowledge Plane features and Control Plane features: tighten the gap between the opening section and the first numbered section ~25% (he asked 20-30%). Only this page; the Expand all row sits in that gap. */
.kp-features.feature-page .chapsec .wrap > .acc-toggle, .cp-features.feature-page .chapsec .wrap > .acc-toggle { margin-top: -30px; }

/* Dave (8 Oct), Knowledge Plane and Control Plane features: (1) Expand all button was stretching to its grid row (68px); pin it to its natural height, 32px min (still above the 24px WCAG 2.2 AA target size). (2) the grid row gap between the header copy, the button and the first numbered section is --s4 (34px, was 42px); margins re-tuned so the button keeps its position and sits --s4 above the first section. */
.kp-features.feature-page .chapsec .wrap, .cp-features.feature-page .chapsec .wrap { row-gap: var(--s4); }
.kp-features.feature-page .chapsec .wrap > .acc-toggle, .cp-features.feature-page .chapsec .wrap > .acc-toggle { align-self: start; min-height: 32px; padding-top: 4px; padding-bottom: 4px; line-height: 1.2; margin-bottom: 0; }


/* Dave (6 Oct), Knowledge Plane features / Federated Analytics and Decisions: the two new paragraphs follow the bullet list, so they need the same 20px paragraph spacing. */
.kp-features.feature-page .acc .acc-panel ul + p { margin-top: 20px; }

/* Dave (6 Oct), Control Plane summary / subsection 3: his subtitle breaks after "middleware,"; keep each phrase whole so a narrow column wraps between phrases (no orphan "stack!"). */
.cp-summary .subin h3.keep-phrases span { white-space: nowrap; }

/* Feature-page accordions: the numeral sat flush against the row's left edge. Give the rows left padding and shift the open panel by the same amount so its text still lines up with the heading. */
.feature-page .acc > summary.subin { padding-left: 24px; }
.feature-page .acc .acc-panel { padding-left: 130px; }
@media (max-width: 760px) {
	.feature-page .acc > summary.subin { padding-left: 14px; }
	.feature-page .acc .acc-panel { padding-left: 26px; }
}

/* Header clearance fixes (6 Oct).
   1) The SEO fix put a visually hidden <h1> first inside <main>, so "main > #smarter-faster:first-child" (site.css) no longer matched and the Why EnterpriseWeb heading rode up under the fixed header. Match the section as a direct child of <main> instead of relying on it being the first child. Same values as the original rules. */
main > #smarter-faster { padding-top: 130px; }
@media (max-width: 820px) { main > #smarter-faster { padding-top: 150px; } }
/*  2) Jump links (#architecture, #recognition, #hybrid-reasoning ...): the scroll-margin rule only matched sections that are direct children of <main>; these sections sit inside a <div class="chapter"> wrapper, so the heading landed under the header. Same 118px the other anchors use. */
.chapter > section[id] { scroll-margin-top: 118px; }

/* Dave (6 Oct), How it Works / Rewriting Tokenomics: stats strip added back at the bottom of the section (his edited version: 3 / 12-15 / < 1). Live text, built from the section's own diagram styling: same outer panel and glass cards, site accent blue for the figures. */
.tok2-stats { list-style: none; margin: 40px 0 0; padding: 34px clamp(18px, 3vw, 40px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.6vw, 20px); border-radius: 26px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(143, 187, 250, .28); }
.tok2-stats li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 118px; padding: 16px 14px; text-align: center; border-radius: 20px; background: linear-gradient(168deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)); border: 1px solid rgba(255, 255, 255, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.tok2-stats b { display: block; font-size: clamp(34px, 4vw, 50px); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; color: #8fbbfa; }
.tok2-stats span { display: block; max-width: 22ch; font-size: clamp(14px, 1.3vw, 17px); line-height: 1.4; color: #f4f8ff; }
@media (max-width: 900px) { .tok2-stats { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 24px 18px; } .tok2-stats li { min-height: 0; } }

/* Dave (6 Oct), How it Works / Orchestrating Complex Interactions: reduce the space ~10-20% between the intro and "The Semantic AI Harness:" and between that line and the boxes (both come from this one grid row-gap). */
#dynamically-orchestrating > .wrap.doi2 { row-gap: 22px; }

/* Dave (6 Oct), How it Works / For Systems Engineers and For Knowledge Engineers: tighten the spaces between all sections and sub-sections by about 20% (section padding 64 -> 51, gap inside a section 52 -> 42, numbered rows 54/10 -> 43/8). Desktop only; mobile spacing unchanged. */
@media (min-width: 761px) {
	.deep-dive .chapsec .wrap { padding-top: 51px; padding-bottom: 51px; row-gap: 42px; }
	.deep-dive .sub { padding: 43px 0 8px; }
	.deep-dive .subnum { top: 37px; }
}

/* Dave (6 Oct), For Knowledge Engineers: the Flexible Collections "Superpower" line was losing its impact. Left-justified (it sat centred in a narrow box) with "Superpower!" in white. */
.pqt.pqt-super { text-align: left; max-width: none; margin: var(--s5) 0; color: var(--blue); }
.pqt.pqt-super span { color: #fff; }

/* Home hero (7 Oct): it must not be stretched to 100% of the window height. site.css still forced "min-height: max(560px, 100svh)" on laptop-size windows (up to 1600x900), leaving dead space inside the hero. Use the natural content height at every size, same as large monitors, with the same bottom padding. */
@media (max-width: 1600px) and (max-height: 900px) and (min-width: 761px) {
	.intro-section .stage { min-height: 0; }
}
/* Home hero breathing space (7 Oct): about 85px between the header and the heading (was ~53px) and about 80px between the last pill and the news strip (was 40px). The ID selector + :has() matches the rule in site.css that was setting padding 8px 0 24px. */
#intro-semantic-ai-harness .stage > .inner > .wrap:has(+ #newsbar) > .hero,
#intro-semantic-ai-harness .stage > .inner > .wrap > .hero { padding-top: 40px; padding-bottom: 64px; }

/* About Us: editable company sections and an editable milestone timeline. */
.about-page .co-body { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3.125vw, 35px); }
.about-page .co-body > section { min-width: 0; display: grid; gap: 14px; padding-top: clamp(17.5px, 2.5vw, 27.5px); border-top: 1px solid var(--line); }
.about-page .co-lead { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.6; max-width: 80ch; }
.about-page .co-body .head { max-width: none; margin: 0; }
.about-page .co-body p:not(.co-lead) { max-width: 80ch; }
.about-page .co-body ol { margin: 0; padding-left: 1.5em; max-width: 80ch; color: var(--ink-2); font-size: 17px; line-height: 1.65; list-style: decimal; }
.about-page .co-body li + li { margin-top: 16px; }
.about-page .co-body a { color: #1759b0; text-decoration: underline; text-underline-offset: .18em; }
.about-page .co-body a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* About timeline: one editor-owned list, three temporary client options. */
.about-page .ewb-timeline { min-width: 0; position: relative; --tl-spine: 10px; }
.ewb-tl-separator { display: none; }
.about-page .co-body .ewb-tl-list { position: relative; isolation: isolate; display: grid; gap: 28px; max-width: none; padding: 0 0 0 38px; list-style: none; }
.ewb-tl-list::before, .ewb-tl-list::after { content: ""; position: absolute; z-index: -1; left: var(--tl-spine); top: 12px; bottom: 0; width: 2px; background: var(--line); }
.ewb-tl-list::after { background: var(--blue); transform: scaleY(var(--tl-progress, 0)); transform-origin: top; }
.about-page .co-body .ewb-tl-list > li { position: relative; min-width: 0; margin: 0; }
.ewb-tl-list > li::before { content: ""; position: absolute; left: -33px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--blue-d); border: 3px solid #f3f8ff; box-shadow: 0 0 0 1px var(--blue); }
.ewb-tl-year { display: block; margin-bottom: 12px; color: var(--blue-d); font: 500 14px/24px "IBM Plex Mono", monospace; }
.ewb-tl-card { display: block; padding: clamp(18px, 3vw, 28px); border: 1px solid rgba(255,255,255,.95); border-radius: 20px; background: linear-gradient(168deg,rgba(255,255,255,.92),rgba(255,255,255,.62)); box-shadow: inset 0 1px 0 #fff, 0 16px 34px -22px rgba(14,42,96,.35); backdrop-filter: blur(14px); overflow-wrap: anywhere; transition: transform .2s ease; }
.ewb-tl-card:hover { transform: translateY(-3px); }
.ewb-tl-partner { font-weight: 600; }
.ewb-tl-list > li.is-pending { opacity: 0; transform: translateY(14px); }
.ewb-tl-list > li { transition: opacity .45s ease, transform .45s ease; }
.ewb-tl-list > li:focus-within { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ewb-tl-list > li, .ewb-tl-card { transition: none; }
  .ewb-tl-list > li.is-pending { opacity: 1; transform: none; }
  .ewb-tl-card:hover { transform: none; }
  .ewb-tl-list::after { transform: none; }
}