/* ---------------------------------------------------------------------------
   Additions beyond the design mocks.
   base.css and page-*.css are generated from the mocks — keep edits here so a
   regeneration never overwrites them.
   -------------------------------------------------------------------------- */

/* --- Featured images -------------------------------------------------------
   The mocks only ever show empty placeholders, so these rules cover the case
   where a real image exists. */
.media-placeholder.has-image,
.lh-visual.has-image,
.avatar-placeholder.has-image {
  border-style: solid;
  border-color: transparent;
  padding: 0;
  overflow: hidden;
}
.media-placeholder img,
.lh-visual img,
.avatar-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-placeholder.has-image img { border-radius: 20px; }
.avatar-placeholder.has-image img { border-radius: inherit; }

/* Empty placeholder: the bare dashed box reads as a broken image, so it gets
   the same tinted wash the Learning Hub cards use. */
.media-placeholder:not(.has-image) {
  background:
    radial-gradient(circle at 30% 25%, rgba(122,0,198,0.22), transparent 65%),
    var(--surface);
}
.media-placeholder:not(.has-image) svg { opacity: 0.35; }

/* --- Pagination ------------------------------------------------------------
   Not in the mocks; built from the same tokens as .btn / .filter-pill. */
.agi-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 56px;
}
.agi-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.agi-pagination .page-numbers:hover { border-color: var(--border-strong); color: var(--text); }
.agi-pagination .page-numbers.current {
  background: var(--purple-soft);
  color: #c583f2;
  border-color: rgba(122,0,198,0.55);
}
.agi-pagination .page-numbers.dots {
  border-color: transparent;
  background: none;
  min-width: 24px;
  padding: 0;
}
.agi-pagination .page-numbers.prev,
.agi-pagination .page-numbers.next { font-weight: 600; }

/* --- Empty states ---------------------------------------------------------- */
.agi-empty {
  text-align: center;
  color: var(--text-faint);
  font-size: 0.95rem;
  padding: 48px 0;
}

/* --- Simple pages ----------------------------------------------------------
   Pages with no design of their own (Privacy Policy, Terms, anything the client
   adds later). base.css carries no hero padding, so it is set here. */
.simple-head {
  position: relative;
  padding: 168px 0 56px;
  overflow: hidden;
}
@media (max-width: 860px) { .simple-head { padding: 140px 0 40px; } }

.simple-head h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 820px;
  text-wrap: balance;
}
.simple-head .simple-meta {
  font-size: 0.85rem;
  color: var(--text-faint);
  margin-top: 14px;
}

.simple-body { max-width: 720px; padding-bottom: 96px; }
.simple-body h2 {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  margin: 44px 0 14px;
}
.simple-body h2:first-child { margin-top: 0; }
.simple-body h3 { font-size: 1.1rem; font-weight: 600; margin: 32px 0 10px; }
.simple-body p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-muted);
  margin: 0 0 20px;
}
.simple-body ul, .simple-body ol { margin: 0 0 20px; padding-left: 22px; color: var(--text-muted); }
.simple-body li { margin-bottom: 8px; line-height: 1.7; }
.simple-body a { color: var(--purple-light, #c583f2); text-decoration: underline; }
.simple-body strong { color: var(--text); }

/* Visual slots that can carry a real image instead of the design's mark. */
.tech-showcase-visual.has-image,
.hero-visual.has-image,
.page-hero-visual.has-image,
.wide-visual.has-image,
.labs-visual.has-image {
  padding: 0;
  overflow: hidden;
}
.tech-showcase-visual.has-image img,
.hero-visual.has-image img,
.page-hero-visual.has-image img,
.wide-visual.has-image img,
.labs-visual.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

/* Contact details behave the same on both pages: the link picks up the accent
   on hover, the surrounding text does not. */
.info-value a {
  color: inherit;
  transition: color 0.15s ease;
}
.info-value a:hover { color: var(--cyan); }

/* Every box that can hold an uploaded photo crops it to fill, instead of
   stretching it to the box. The earlier rules only matched some containers,
   and some only with .has-image, which the templates don't always add. */
.team-avatar img,
.visual-box img,
.page-hero-visual img,
.hero-visual img,
.tech-showcase-visual img,
.wide-visual img,
.labs-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%; /* keeps faces in frame on portrait photos */
  display: block;
  border-radius: inherit;
}
.team-avatar { overflow: hidden; }
.team-avatar img { max-width: none; }
.avatar-placeholder img { object-position: center 30%; }

/* Leadership: larger portraits than the mock, at the client's request.
   Both sizes grow by about a third so the two teams keep their proportion. */
.lead-card .avatar-placeholder { width: 128px; height: 128px; margin-bottom: 22px; }
.lead-card.sm .avatar-placeholder { width: 104px; height: 104px; margin-bottom: 20px; }

/* AGI Labs team portraits match the Leadership executive size. */
.team-avatar { width: 128px; height: 128px; }

/* Simple pages (Privacy, Terms): one centred reading column, with the title
   centred over it the way the other page heroes are. Body copy stays
   left-aligned for reading. */
.simple-head .container { text-align: center; }
.simple-head h1 { margin-left: auto; margin-right: auto; }
.simple-body { max-width: 760px; margin-left: auto; margin-right: auto; }

/* Consistent team portraits: preserve the originals, align headroom and scale. */
.avatar-placeholder.has-image,
.team-avatar:has(img) {
  position: relative;
  overflow: hidden;
  background: #fff;
}
.avatar-placeholder.has-image img,
.team-avatar img {
  position: absolute;
  top: var(--portrait-top, 0%);
  left: var(--portrait-left, 50%);
  width: var(--portrait-width, 100%);
  height: auto;
  max-width: none;
  object-fit: initial;
  object-position: initial;
  border-radius: 0;
  transform: translateX(-50%);
}
img[src*="/Jerry_Zhang"] { --portrait-width: 107%; --portrait-top: -3.1%; --portrait-left: 54%; }
img[src*="/Kurt_Bonatz"] { --portrait-width: 90%; --portrait-top: 2.8%; --portrait-left: 47.8%; }
img[src*="/Daniel-Coleman"] { --portrait-width: 126%; --portrait-top: -20%; --portrait-left: 54.2%; }
img[src*="/Lars_Herrmann"] { --portrait-width: 97%; --portrait-top: -8.2%; --portrait-left: 48%; }
img[src*="/Salem_Elrahal"] { --portrait-width: 116%; --portrait-top: -13.8%; --portrait-left: 50%; }
img[src*="/Aaron_Poynton"] { --portrait-width: 132%; --portrait-top: -10.7%; --portrait-left: 46.1%; }
img[src*="/Eric_Wesley"] { --portrait-width: 150%; --portrait-top: -10.1%; --portrait-left: 46.8%; }
img[src*="/Chris_Esworthy"] { --portrait-width: 104%; --portrait-top: -7.6%; --portrait-left: 52.2%; }
img[src*="/Yamini_Bhat"] { --portrait-width: 95%; --portrait-top: -9.4%; --portrait-left: 48%; }

img[src*="/Nick_Ogurtsov"] { --portrait-width: 148%; --portrait-top: -21%; --portrait-left: 48.8%; }
img[src*="/Deb_Gordon_Gill"] { --portrait-width: 132%; --portrait-top: -8.8%; --portrait-left: 50.3%; }

/* Pre-launch inquiry readability and keyboard access. */
.agi-inquiry-help, .agi-inquiry-note {
  color: #d2ccd9;
  line-height: 1.65;
  font-size: .95rem;
  margin: 12px 0 24px;
}
.agi-inquiry-note { font-size: .85rem; margin: 20px 0 0; }
.agi-inquiry-note a { color: #dcaff6; text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid #d6a6f2 !important;
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .hero *, .next-era *, .product-visual, .product-visual *,
  .cta-band::before, .cta-band::after {
    animation: none !important;
    transition: none !important;
  }
  .product-visual { opacity: 1 !important; transform: none !important; }
}

/* Show required-field markers visually as well as to assistive technology. */
.gform_wrapper .gfield_required {
  display: inline !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  color: #cfc6d7;
  font-size: .75rem;
}
.gform_wrapper .gfield_label > .gfield_required { margin-left: .4em; }


/* Make each dropdown landing page easy to find. */
.navbar .nav-dropdown > a:first-child {
  font-weight: 600;
  color: #f5f2f9;
  margin-bottom: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(190, 140, 220, 0.24);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}


/* Subtle supporting icons for the AMP exchange steps. */
.amp-pipeline .pipeline-step { position: relative; }
.amp-pipeline .amp-step-icon {
  position: absolute;
  top: 28px;
  right: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #b38ad6;
  opacity: 0.8;
  pointer-events: none;
}
.amp-pipeline .amp-step-icon svg { width: 34px; height: 34px; }

/* Final-pass accessibility and readable supporting content. */
.agi-skip-link { position:fixed; top:8px; left:16px; z-index:10000; padding:12px 18px; background:#fff; color:#190825; font-weight:600; transform:translateY(-160%); border-radius:8px; }
.agi-skip-link:focus { transform:translateY(0); }
.admin-bar .agi-skip-link:focus { top:52px; }
#main-content { outline:none; }
/* Hidden menus stay out of the tab order, and still fade out: visibility flips
   only after the opacity transition has finished. */
.nav-dropdown { visibility:hidden; transition:opacity .15s ease, transform .15s ease, visibility 0s linear .15s; }
.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown { visibility:visible; transition-delay:0s; }
.agi-practical { padding:56px 0; }
.agi-practical .section-sub { max-width:800px; }
.agi-practical-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:28px; }
.agi-practical-grid a { display:block; border-top:1px solid var(--border-strong); padding-top:20px; }
.agi-practical-grid h3 { margin:12px 0 8px; font-size:1.1rem; color:var(--text); }
.agi-practical-grid p { font-size:1rem; color:#bcb5c4; line-height:1.65; }
.agi-practical-icon { width:28px; height:28px; color:#bb8fda; }
.agi-example { padding:26px; border:1px solid rgba(190,140,220,.28); border-left:3px solid #a56ed0; border-radius:14px; background:linear-gradient(130deg,rgba(122,0,198,.09),rgba(249,115,22,.035)); min-width:0; }
.agi-example h3 { margin:0 0 18px; font-size:1.3rem; line-height:1.35; }
.agi-example p { font-size:1rem; line-height:1.65; color:#d0c9d7; margin:0 0 16px; }
.agi-example dl { margin:0 0 20px; }
.agi-example dt { font-weight:600; margin-top:12px; color:#f2f2f4; }
.agi-example dd { margin:4px 0 0; line-height:1.6; color:#c9c1d0; }
.agi-example .agi-example-caption { font-size:.85rem; color:#aaa3b3; margin:16px 0 0; }
.agi-example-result { border-top:1px solid rgba(249,115,22,.25); padding-top:16px; }
.agi-table-wrap { overflow-x:auto; }
.agi-example table { width:100%; border-collapse:collapse; font-size:.95rem; }
.agi-example th, .agi-example td { padding:12px 10px; text-align:left; border-bottom:1px solid var(--border-strong); vertical-align:top; }
.agi-example th { color:#f2f2f4; font-weight:600; }
.agi-example td { color:#c9c1d0; }
.agi-example caption { text-align:left; color:#bcb5c4; font-size:.85rem; caption-side:bottom; padding-top:14px; line-height:1.6; }
.agi-industry-example { margin-top:20px; padding-left:18px; border-left:2px solid #9764bd; color:#c9c1d0; font-size:1rem; line-height:1.65; }
.agi-industry-example strong { display:block; color:#d5b7eb; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px; }
.switcher-entry[id], #support-form { scroll-margin-top:120px; }
.agi-research-summary { margin-top:32px; max-width:900px; }
.agi-research-summary p { margin:0 0 18px; color:#c9c1d0; font-size:1rem; line-height:1.7; }
.agi-research-summary a { color:#d5b7eb; text-decoration:underline; text-underline-offset:3px; }
.simple-body ul { list-style:disc; }
@media(max-width:700px) { .agi-practical-grid { grid-template-columns:1fr; gap:24px; } .agi-example { padding:20px; } .agi-example th,.agi-example td { padding:10px 6px; font-size:.85rem; overflow-wrap:anywhere; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

.agi-lcm-example-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:start; }
.agi-practical-icon { display:block; }
.agi-sector-card[id], .agi-anchor-alias { scroll-margin-top:120px; }
.agi-sector-card { position:relative; }
.agi-anchor-alias { position:absolute; top:0; }
.agi-sector-copy .agi-industry-example { margin-top:20px; font-size:1rem; }
@media(max-width:800px) { .agi-lcm-example-grid { grid-template-columns:1fr; gap:28px; } }

/* One responsive navigation, retaining every destination on small screens. */
.agi-nav-toggle { display:none; }
@media(max-width:900px) {
 .navbar .container { gap:12px; padding-left:20px; padding-right:20px; }
 .agi-nav-toggle { display:inline-flex; align-items:center; gap:8px; margin-left:auto; border:1px solid var(--border-strong); background:#141018; color:#f2f2f4; border-radius:999px; padding:10px 14px; font:600 .85rem var(--font-sans); cursor:pointer; }
 .navbar.agi-nav-open .nav-links { display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:4px; max-height:calc(100dvh - 100px); overflow-y:auto; padding:20px; background:#0b090e; border-bottom:1px solid var(--border-strong); }
 .navbar.agi-nav-open .nav-links > a, .navbar.agi-nav-open .nav-item > a { padding:10px 12px; }
 .navbar.agi-nav-open .nav-dropdown { position:static; transform:none; visibility:visible; opacity:1; transition:none; pointer-events:auto; min-width:0; border:0; box-shadow:none; background:none; padding:0 0 12px 16px; backdrop-filter:none; }
 .navbar.agi-nav-open .nav-dropdown a { white-space:normal; }
 .navbar .nav-right { gap:8px; }
 .navbar .nav-right .btn { padding:10px 12px; font-size:.8rem; }
}
@media(max-width:520px) { .navbar .container { gap:8px; padding-left:14px; padding-right:14px; } .navbar .logo img { height:29px; } .navbar .nav-right .btn { padding:9px 10px; font-size:.72rem; } .agi-nav-toggle { padding:9px 10px; font-size:.78rem; gap:5px; } }

/* Keep the wordmark visible alongside actions on narrow phones. */
@media(max-width:520px) {
 .navbar .container { height:auto; min-height:76px; flex-wrap:wrap; padding-top:10px; padding-bottom:10px; }
 .navbar .logo { flex:0 0 auto; }
 .navbar .logo img { width:auto; max-width:none; height:32px !important; }
 .navbar .agi-nav-toggle { flex:0 0 auto; }
 .navbar .nav-right { flex-basis:100%; justify-content:flex-end; }
 .navbar.agi-nav-open .nav-links { max-height:calc(100dvh - 128px); }
}

@media(max-width:520px) { .hero-grid > * { min-width:0; } .hero-copy h1 { overflow-wrap:anywhere; } }

/* LCM context and more informative worked examples. */
.agi-lcm-context-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:center; }
.agi-lcm-context-grid .tech-showcase-heading { margin-bottom:0; }
.agi-reasoning-checks dt { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; padding-top:14px; border-top:1px solid rgba(190,140,220,.15); }
.agi-reasoning-checks dd { margin-bottom:16px; }
.agi-check-state { font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:#ffc395; border:1px solid rgba(249,115,22,.25); background:rgba(249,115,22,.07); padding:4px 8px; border-radius:999px; }
.agi-check-state.is-unknown { color:#dbb8f5; background:rgba(122,0,198,.10); border-color:rgba(190,140,220,.25); }
.agi-example .agi-match-state { color:#c9ebcf; }
.agi-amp-comparison table { table-layout:fixed; min-width:640px; }
.agi-example .agi-table-hint { display:none; font-size:.8rem; color:#c9b4d7; }
.agi-table-wrap:focus-visible { outline:3px solid #d6a6f2; outline-offset:5px; }
@media(max-width:800px) { .agi-lcm-context-grid { grid-template-columns:1fr; gap:28px; } .agi-example .agi-table-hint { display:block; } }