/* Interior templates: index pages, article, business subsite.
   Loaded after styles.css on research/news/article/business pages only. */

/* ---------- index pages (research list + news grid) ---------- */

.page-head { padding-top: 88px; }
.page-title {
  font-size: var(--type-h1-size);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 500;
  margin-bottom: 44px;
}

.index-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 4px; }
.tab-row { display: flex; flex-wrap: wrap; gap: 24px; }
.tab-row a { font-size: 18px; font-weight: 500; line-height: 1.32; letter-spacing: -0.01em; color: var(--meta); padding: 6px 0; transition: color 0.15s ease; }
.tab-row a:hover { color: var(--ink); }
.tab-row a.active { color: var(--ink); }

.index-controls { display: flex; align-items: center; gap: 22px; }
.index-controls button { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; }
.index-controls button:hover { opacity: 0.55; }
.index-controls svg { width: 14px; height: 14px; }
.view-toggle { display: flex; gap: 14px; margin-left: 6px; }
.view-toggle button { opacity: 0.35; }
.view-toggle button.active { opacity: 1; }

/* Filter/Sort panels — OpenAI-verified: flat light-gray rounded sheets, no border, no shadow */
.ctrl-pop { position: absolute; right: 0; top: calc(100% + 14px); z-index: 60; background: var(--fill-solid); border-radius: 12px; }
:root[data-theme="dark"] .ctrl-pop { background: #2c2c2e; }
.ctrl-pop[hidden] { display: none; }

.sort-pop { min-width: 228px; padding: 18px 22px; display: flex; flex-direction: column; }
.sort-pop label { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 400; line-height: 23px; letter-spacing: 0; cursor: pointer; white-space: nowrap; }
.sort-pop input[type="radio"] { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; margin: 0; border: 1.5px solid rgba(0, 0, 0, 0.4); border-radius: 50%; display: inline-grid; place-content: center; flex: none; background: transparent; }
.sort-pop input[type="radio"]:checked { border-color: var(--ink); }
.sort-pop input[type="radio"]:checked::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #000; }

.fdialog { width: 570px; padding: 22px 24px 12px; }
.fdialog.one-col { width: 320px; }
.fdialog .fcols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.fdialog.one-col .fcols { grid-template-columns: 1fr; }
.fdialog .fgroup-label { font-size: 15px; font-weight: 400; color: inherit; letter-spacing: 0; margin-bottom: 12px; }
.fdialog .fcols label { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 400; line-height: 23px; letter-spacing: 0; cursor: pointer; }
.fdialog input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; margin: 0; border: 1.5px solid rgba(0, 0, 0, 0.35); border-radius: 4px; display: inline-grid; place-content: center; flex: none; background: transparent; }
.fdialog input[type="checkbox"]:checked { background: #000; border-color: var(--ink); }
.fdialog input[type="checkbox"]:checked::after { content: ""; width: 8px; height: 8px; background: #fff; clip-path: polygon(14% 44%, 0 62%, 40% 100%, 100% 18%, 82% 2%, 38% 64%); }
.fdialog .ffoot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(13, 13, 13, 0.08); margin-top: 18px; padding: 12px 2px 6px; }
.fdialog .ffoot button { font-size: 14px; font-weight: 400; letter-spacing: 0; }
.index-controls button[hidden] { display: none; }
.fdialog .ffoot button:hover { opacity: 0.6; }
.fdialog .fcancel { margin-left: auto; }

.ctl-filter { line-height: 1; }
.ctl-filter .fx { display: none; }
.ctl-filter.open .sliders { display: none; }
.ctl-filter.open .fx { display: block; width: 11px; height: 11px; align-self: center; margin: 0; }
.ctl-sort svg { transition: transform 0.15s ease; }
.ctl-sort.open svg { transform: rotate(180deg); }

.row-list { margin-top: 28px; }
.row-list > a {
  display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 24px;
  padding: 40px 0;
  border-top: 1px solid rgba(13, 13, 13, 0.08);
}
.row-list > a:hover h3 { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.row-side { display: flex; flex-direction: column; gap: 6px; }
.row-side b { font-size: 14px; font-weight: 500; }
.row-side span { font-size: 14px; color: var(--meta); }
.row-main h3 { font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 12px; display: inline-flex; align-items: center; }
.row-main h3 .ext { width: 9px; height: 9px; margin-left: 7px; }
.row-main p { font-size: 14px; line-height: 1.55; color: var(--meta); max-width: 560px; letter-spacing: 0; }

.load-more { display: flex; justify-content: center; margin-top: 56px; }
.pill-load { height: 40px; background: var(--ink); color: var(--paper); }
.pill-load:hover { opacity: 0.82; }

.news-grid-page { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 24px; margin-top: 40px; }
.news-grid-page .thumb-lg { display: block; aspect-ratio: 1 / 1; width: 100%; height: auto; border-radius: var(--radius-card); }
.news-grid-page a { display: block; }
.news-grid-page a:hover h3 { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.news-grid-page h3 { font-size: 17px; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; margin: 16px 0 8px; }

/* ---------- article ---------- */

.article-head { max-width: 780px; margin: 0 auto; text-align: center; padding-top: 56px; }
.article-meta { display: flex; justify-content: center; gap: 14px; font-size: 14px; }
.article-meta span { color: var(--meta); }
.article-meta b { font-weight: 500; }
.article-title { font-size: var(--type-h2-size); line-height: var(--type-h2-line); letter-spacing: -0.02em; margin: 18px 0 14px; }
.article-dek { font-size: 17px; line-height: 1.55; color: var(--meta); max-width: 540px; margin: 0 auto; }
.article-utils { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 30px; }
.listen { display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 18px; border-radius: 40px; background: var(--fill); font-size: 14px; font-weight: 500; }
.listen svg { width: 11px; height: 11px; }
.listen span { color: var(--meta); font-weight: 400; }
.share-link { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; }
.share-link svg { width: 14px; height: 14px; }

.article-zone { display: grid; grid-template-columns: minmax(0, 720px); justify-content: center; padding-top: 64px; position: relative; }
.toc { display: none; }
@media (min-width: 1320px) {
  .toc { display: block; position: absolute; left: var(--pad); top: 64px; bottom: 0; width: 210px; }
  .toc-inner { position: sticky; top: calc(var(--header-h) + 40px); max-height: calc(100dvh - var(--header-h) - 72px); overflow-y: auto; scrollbar-width: none; }
  .toc-inner::-webkit-scrollbar { display: none; }
  .toc a.on { color: var(--ink); }
  .toc a { display: block; font-size: 13px; font-weight: 500; color: var(--meta); padding: 5px 0; line-height: 1.35; }
  .toc a:hover { color: var(--ink); }
}

.article-body { font-size: 17px; }
.article-body p { margin-bottom: 24px; }
.article-body h2 { font-size: var(--type-h3-size); letter-spacing: -0.01em; line-height: 1.25; margin: 44px 0 18px; scroll-margin-top: 96px; }
.article-body ul { list-style: disc; padding-left: 22px; margin-bottom: 24px; }
.article-body li { margin-bottom: 8px; font-size: 15px; }

.article-media { border-radius: 12px; margin: 40px 0; aspect-ratio: 16 / 9; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.article-media > img, .article-media > picture > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-chat { background: linear-gradient(150deg, #3c3f66 0%, #5a5f93 55%, #8a7fb8 100%); }
.media-dash { background: linear-gradient(150deg, #f3d9e4 0%, #dce7f5 55%, #cfeee6 100%); }
.fake-ui { background: rgba(255, 255, 255, 0.94); border-radius: 10px; width: 74%; height: 74%; box-shadow: 0 24px 60px rgba(20, 24, 60, 0.28); display: grid; grid-template-columns: 88px 1fr; overflow: hidden; }
.fake-ui .fu-side { background: #f4f4f6; border-right: 1px solid rgba(13, 13, 13, 0.06); }
.fake-ui .fu-main { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.fu-bar { height: 9px; border-radius: 5px; background: rgba(13, 13, 13, 0.1); }
.fu-bar.w60 { width: 60%; }
.fu-bar.w80 { width: 80%; }
.fu-bar.w45 { width: 45%; }
.fu-bar.blue { background: #b9d4f5; }

.quote-card { border: 1px solid var(--border); border-radius: 12px; padding: 30px 32px 20px; margin: 40px 0; }
.quote-brand { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.quote-card blockquote { font-size: 19px; font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; margin: 18px 0 14px; }
.quote-attrib { font-size: 13px; color: var(--meta); margin-bottom: 22px; }
.quote-foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(13, 13, 13, 0.08); padding-top: 14px; }
.quote-tabs { display: flex; gap: 24px; font-size: 13px; font-weight: 500; color: var(--meta); }
.quote-tabs .on { color: var(--ink); }
.quote-page { font-size: 13px; color: var(--meta); }

.author-band { background: var(--fill-solid); border-radius: 16px; padding: 44px 48px; display: flex; align-items: flex-end; justify-content: space-between; margin-top: 72px; }
.author-band.ab-stack { flex-direction: column; align-items: stretch; gap: 36px; }
.author-band.ab-stack .rh-notes li { margin-bottom: 12px; }
.author-band.ab-stack .ab-byline { display: flex; align-items: flex-end; justify-content: space-between; border-top: 1px solid var(--line, rgba(0,0,0,0.1)); padding-top: 28px; }
.author-band .ab-label { font-size: 14px; color: var(--meta); margin-bottom: 8px; }
.author-band .ab-name { font-size: 17px; font-weight: 500; }
.author-band .ab-year { font-size: 14px; color: var(--meta); }

.keep-reading { margin-top: 80px; }

/* ---------- business subsite ---------- */

.biz-top { background: #fff; }
.biz-logo { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.biz-mark { width: 21px; height: 21px; border-radius: 7px; background: var(--ink); position: relative; }
.biz-mark::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 2px solid #fff; }

.biz-hero { text-align: center; padding: 64px var(--pad) 0; overflow: hidden; }
.biz-h1 { font-size: clamp(2.5rem, calc(2.5rem + 1.75 * ((100vw - 23.4375rem) / 66.5625)), 4.25rem); line-height: 1.12; letter-spacing: -0.025em; font-weight: 500; }
.biz-h1 .boxed, .sol-hero h1 .boxed {
  display: inline-block; color: #147cc0; background: transparent;
  border: 0.5px solid rgba(13, 13, 13, 0.11); border-radius: 13px;
  padding: 2px 24px 6px; box-shadow: 0 6px 20px rgba(40, 80, 140, 0.06);
}
.biz-hero-cta { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 30px 0 54px; }
.link-arrow { font-size: 14px; font-weight: 500; }
.link-arrow::after { content: " ›"; }
.link-arrow:hover { opacity: 0.55; }

.collage { position: relative; height: 330px; max-width: 1240px; margin: 0 auto; }
.collage-card { position: absolute; border-radius: 14px; border: 6px solid #fff; box-shadow: 0 24px 60px rgba(30, 45, 80, 0.16); }
.collage-main { width: 470px; height: 300px; left: 50%; transform: translateX(-50%); top: 0; z-index: 3; background: radial-gradient(120% 130% at 50% 0%, #1d4b52 0%, #0c2331 60%); display: flex; align-items: center; justify-content: center; }
.collage-side-l { width: 320px; height: 240px; left: 6%; top: 46px; transform: rotate(-5deg); background: linear-gradient(150deg, #d8d3cc 0%, #b9b2a8 100%); z-index: 2; }
.collage-side-r { width: 320px; height: 240px; right: 6%; top: 46px; transform: rotate(4deg); background: linear-gradient(150deg, #cfd8d4 0%, #a9b8b1 100%); z-index: 2; }
.play-glyph { width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); display: flex; align-items: center; justify-content: center; }
.play-glyph::after { content: ""; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #0a0a0a; margin-left: 4px; }

.logo-band { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 56px 0; flex-wrap: wrap; }
.logo-band span { font-size: 19px; color: var(--meta); opacity: 0.82; white-space: nowrap; }
.lb-1 { font-weight: 700; letter-spacing: -0.02em; }
.lb-2 { font-weight: 400; font-family: Georgia, "Times New Roman", serif; letter-spacing: 0.14em; text-transform: uppercase; font-size: 16px !important; }
.lb-3 { font-weight: 600; }
.lb-4 { font-weight: 500; letter-spacing: 0.02em; }
.lb-5 { font-weight: 700; font-style: italic; letter-spacing: -0.01em; }

.biz-feature { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 56px; align-items: center; padding-bottom: 88px; }
.biz-feature h3 { font-size: 24px; letter-spacing: -0.015em; line-height: 1.2; margin-bottom: 14px; }
.biz-feature > div > p { font-size: 15px; line-height: 1.55; color: var(--ink); margin-bottom: 16px; }
.biz-feature ul { list-style: disc; padding-left: 20px; margin-bottom: 24px; }
.biz-feature li { font-size: 14px; line-height: 1.5; margin-bottom: 7px; }
.media-card { border-radius: 12px; aspect-ratio: 16 / 9; width: min(100%, 620px); justify-self: center; background: linear-gradient(150deg, #dfe7f2 0%, #c6d4e6 100%); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(13, 13, 13, 0.04); }

.biz-section { padding: 88px var(--pad); }
.biz-section-head { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.biz-section-head h2 { font-size: var(--type-h2-size); line-height: var(--type-h2-line); letter-spacing: -0.02em; }
.biz-section-head p { font-size: 14px; color: var(--meta); margin-top: 14px; }

.teams { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 56px; align-items: start; }
.team-tabs { display: flex; flex-direction: column; }
.team-tabs .tt { border-top: 1px solid rgba(13, 13, 13, 0.08); padding: 15px 0; font-size: 15px; font-weight: 500; color: var(--meta); text-align: left; }
.team-tabs .tt:hover { color: var(--ink); }
.team-tabs .tt-active { border-top: 1px solid rgba(13, 13, 13, 0.08); padding: 15px 0 20px; }
.team-tabs .tt-active .tt-name { font-size: 15px; font-weight: 500; margin-bottom: 8px; }
.team-tabs .tt-active p { font-size: 13px; line-height: 1.5; color: var(--meta); margin-bottom: 12px; }
.team-tabs .tt-active a { font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.teams .media-card { aspect-ratio: 16 / 9; width: 100%; max-width: none; justify-self: stretch; }

.segmented { display: inline-flex; background: var(--fill); border-radius: 999px; padding: 4px; gap: 4px; margin-bottom: 22px; }
.segmented button { padding: 8px 18px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--meta); }
.segmented button.active { background: #fff; color: var(--ink); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.10); }
.platform-links { display: flex; justify-content: center; gap: 8px; font-size: 14px; font-weight: 500; margin-top: 16px; }
.platform-links a { text-decoration: underline; text-underline-offset: 3px; }
.platform-links em { font-style: normal; color: var(--meta); }

.app-mock { border: 1px solid var(--border); border-radius: 16px; max-width: 1080px; height: 540px; margin: 48px auto 0; background: #fff; display: grid; grid-template-columns: 240px minmax(0, 1fr); overflow: hidden; box-shadow: 0 30px 70px -30px rgba(20, 30, 60, 0.18); }
.am-side { background: #f7f7f8; border-right: 1px solid rgba(13, 13, 13, 0.06); padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.am-side .fu-bar { height: 10px; }
.am-side .fu-gap { height: 10px; }
.am-main { position: relative; display: flex; align-items: center; justify-content: center; }
.am-main h4 { font-size: 22px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); }
.am-input { position: absolute; left: 32px; right: 32px; bottom: 28px; height: 52px; border-radius: 16px; box-shadow: 0 0 0 1px var(--hairline), 0 8px 22px rgba(0, 0, 0, 0.06); display: flex; align-items: center; padding: 0 18px; font-size: 14px; color: var(--meta); }

.explore-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 32px; }
.explore-head h2 { font-size: var(--type-h4-size); }
.explore-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.explore-cards a { display: block; }
.explore-cards a:hover .ex-label { text-decoration: underline; text-underline-offset: 3px; }
.ex-art { display: block; aspect-ratio: 1 / 1; border-radius: var(--radius-card); position: relative; overflow: hidden; }
.ex-label { display: block; font-size: 14px; font-weight: 500; margin-top: 12px; }
.ex-1 { background: #f6cdb2; }
.ex-1::after { content: ""; position: absolute; inset: 14%; border: 1.5px solid rgba(140, 60, 20, 0.55); border-radius: 50%; background: repeating-linear-gradient(45deg, transparent 0 7px, rgba(140, 60, 20, 0.28) 7px 8.5px); }
.ex-2 { background: #9ed3f0; }
.ex-2::after { content: ""; position: absolute; left: 12%; right: 12%; top: 40%; height: 34%; border: 1.5px solid rgba(20, 70, 120, 0.55); border-radius: 999px 999px 0 0 / 100% 100% 0 0; background: linear-gradient(transparent 0 60%, rgba(20, 70, 120, 0.18) 60%); }
.ex-3 { background: #a8e6cf; }
.ex-3::after { content: ""; position: absolute; inset: 16% 20%; border: 1.5px solid rgba(15, 90, 60, 0.55); border-radius: 8px; box-shadow: 14px 14px 0 -1px rgba(15, 90, 60, 0.25); }
.ex-4 { background: #f4b8dd; }
.ex-4::after { content: ""; position: absolute; inset: 15%; background: repeating-linear-gradient(0deg, rgba(130, 30, 90, 0.4) 0 2px, transparent 2px 16px); border-radius: 6px; }

.biz-cta { text-align: center; padding: 96px 0 104px; }
.biz-cta h2 { font-size: var(--type-h2-size); line-height: var(--type-h2-line); letter-spacing: -0.02em; max-width: 620px; margin: 0 auto 30px; }

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .news-grid-page { grid-template-columns: repeat(2, 1fr); }
  .explore-cards { grid-template-columns: repeat(2, 1fr); }
  .biz-feature { grid-template-columns: 1fr; gap: 32px; }
  .teams { grid-template-columns: 1fr; gap: 32px; }
  .collage-side-l, .collage-side-r { display: none; }
}

@media (max-width: 840px) {
  .page-head { padding-top: 56px; }
  .index-bar { flex-direction: column; align-items: flex-start; gap: 16px; }
  .row-list > a { grid-template-columns: 1fr; gap: 10px; padding: 28px 0; }
  .news-grid-page { grid-template-columns: 1fr; gap: 40px; }
  .explore-cards { grid-template-columns: 1fr; }
  .app-mock { grid-template-columns: 1fr; height: 420px; }
  .am-side { display: none; }
  .author-band { flex-direction: column; align-items: flex-start; gap: 18px; }
  .collage-main { width: 90%; }
  .logo-band { justify-content: center; gap: 24px; }
}

/* ---------- pricing ---------- */

.pricing-head { text-align: center; padding-top: 72px; }
.pricing-head h1 { font-size: var(--type-h1-size); letter-spacing: -0.03em; margin-bottom: 14px; }
.pricing-head p { font-size: 15px; color: var(--meta); }
.price-toggle-row { display: flex; justify-content: center; margin: 48px 0 32px; }
.tier-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1220px; margin: 0 auto; }
.tier-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; }
.tier-head { text-align: center; padding: 26px 28px 30px; }
.tier-head h3 { font-size: 28px; letter-spacing: -0.015em; margin-bottom: 8px; }
.tier-head p { font-size: 13px; line-height: 1.5; color: rgba(0, 0, 0, 0.62); max-width: 380px; margin: 0 auto; }
.tier-head-a { background: linear-gradient(120deg, #fbe3ec 0%, #e8e9fb 60%, #d9ecfa 100%); }
.tier-head-b { background: linear-gradient(120deg, #bfe6fb 0%, #a9d7f7 100%); }
.tier-body { padding: 26px 28px 22px; }
.price-line { display: flex; align-items: baseline; gap: 8px; min-height: 48px; }
.price-line .price { font-size: 40px; font-weight: 500; letter-spacing: -0.02em; }
.price-line .per { font-size: 13px; color: var(--meta); }
.price-custom { font-size: 17px; font-weight: 500; }
.price-custom + p { font-size: 13px; color: var(--meta); margin-top: 4px; }
.tier-cta { display: flex; width: 100%; justify-content: center; margin: 18px 0 26px; }
.tier-cta .pill { width: 100%; justify-content: center; }
.inc-label { font-size: 13px; font-weight: 500; margin-bottom: 14px; }
.checks { display: flex; flex-direction: column; gap: 12px; }
.checks li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; font-size: 13px; line-height: 1.5; letter-spacing: 0; }
.checks svg { width: 13px; height: 13px; margin-top: 3px; }
.fine { font-size: 11px; color: var(--meta); margin-top: 20px; line-height: 1.5; }
.personal { text-align: center; padding-top: 40px; }
.personal h2 { font-size: var(--type-h4-size); margin-bottom: 10px; }
.personal p { font-size: 14px; color: var(--meta); margin-bottom: 22px; }
.compare-bar { display: flex; align-items: center; justify-content: center; gap: 8px; height: 56px; background: #f5f5f5; border-radius: 8px; font-size: 14px; font-weight: 500; margin-top: 56px; width: 100%; }
.trusted { text-align: center; padding-top: 24px; }
.trusted > p { font-size: 15px; margin-bottom: 34px; }
.trusted .logo-band { padding: 0; }
.faq { max-width: 720px; margin: 0 auto; }
.faq h2 { text-align: center; font-size: var(--type-h4-size); margin-bottom: 28px; }
.faq-item { border-top: 1px solid rgba(13, 13, 13, 0.1); }
.faq-item:last-child { border-bottom: 1px solid rgba(13, 13, 13, 0.1); }
.faq-q { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; font-size: 15px; font-weight: 500; padding: 18px 2px; }
.faq-q svg { width: 12px; height: 12px; flex: none; }
.faq-a { font-size: 14px; line-height: 1.55; color: var(--meta); padding: 0 2px 20px; max-width: 620px; }
.cta-bleed { background: var(--fill-solid); text-align: center; padding: 100px 32px 108px; margin-top: 80px; }
.cta-bleed h2 { font-size: var(--type-h2-size); line-height: var(--type-h2-line); letter-spacing: -0.02em; max-width: 640px; margin: 0 auto 30px; }
.cta-bleed .biz-hero-cta { margin: 0; }

/* ---------- careers ---------- */

.eyebrow { display: block; text-align: center; font-size: 13px; font-weight: 500; color: var(--meta); margin-bottom: 18px; }
.careers-hero { text-align: center; padding-top: 72px; }
.careers-hero h1 { font-size: var(--type-h2-size); line-height: var(--type-h2-line); letter-spacing: -0.02em; max-width: 640px; margin: 0 auto 16px; }
.careers-hero > p { font-size: 15px; color: var(--meta); max-width: 420px; margin: 0 auto 26px; }
.statement { text-align: center; font-size: 24px; font-weight: 500; line-height: 1.35; letter-spacing: -0.015em; max-width: 820px; margin: 0 auto; }
.val-block { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 24px; max-width: 1060px; margin: 0 auto; }
.val-block > p { font-size: 14px; font-weight: 500; }
.val-list p { font-size: 15px; line-height: 1.55; margin-bottom: 18px; max-width: 640px; }
.val-list b { font-weight: 500; }
.photo-band { border-radius: 12px; height: 552px; position: relative; overflow: hidden; background: radial-gradient(130% 100% at 20% 0%, #f0d9b8 0%, #c98d5a 45%, #6b4a33 100%); }
.photo-band::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); opacity: 0.16; mix-blend-mode: soft-light; }
.bene-head { text-align: center; margin-bottom: 40px; }
.bene-head h3 { font-size: var(--type-h4-size); margin-bottom: 10px; }
.bene-head p { font-size: 14px; color: var(--meta); max-width: 460px; margin: 0 auto; }
.bene-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.bene-card { border: 1px solid var(--border); border-radius: 12px; padding: 24px; }
.bene-card h4 { font-size: 15px; font-weight: 500; margin-bottom: 16px; }
.roles-head { text-align: center; margin-bottom: 24px; }
.roles-head h2 { font-size: var(--type-h4-size); margin-bottom: 10px; }
.roles-head p { font-size: 14px; color: var(--meta); margin-bottom: 22px; }
.role-rows > a { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 2px; border-top: 1px solid rgba(13, 13, 13, 0.08); }
.role-rows > a:last-child { border-bottom: 1px solid rgba(13, 13, 13, 0.08); }
.role-name { font-size: 16px; font-weight: 500; }
.role-name em { font-style: normal; font-size: 13px; color: var(--meta); margin-left: 12px; }
.role-apply { display: flex; align-items: center; gap: 18px; font-size: 13px; color: var(--meta); white-space: nowrap; }
.role-apply b { font-size: 14px; font-weight: 500; color: var(--ink); display: inline-flex; align-items: center; }
.role-rows > a:hover .role-apply b { text-decoration: underline; text-underline-offset: 3px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; max-width: 1220px; margin: 0 auto; }
.split h3 { font-size: var(--type-h4-size); margin-bottom: 14px; }
.split p { font-size: 15px; line-height: 1.55; color: var(--ink); margin-bottom: 24px; max-width: 420px; }
.split-media { border-radius: 12px; aspect-ratio: 4 / 3; }
.sm-1 { background: radial-gradient(120% 120% at 80% 10%, #f6e3c5 0%, #d9a86e 50%, #8a5c3b 100%); }
.sm-2 { background: radial-gradient(120% 120% at 20% 90%, #dce9dd 0%, #9fb8a6 55%, #52705e 100%); }
.bigquote { text-align: center; max-width: 880px; margin: 0 auto; }
.bigquote blockquote { font-size: 26px; font-weight: 500; line-height: 1.35; letter-spacing: -0.015em; margin-bottom: 20px; }
.bigquote p { font-size: 13px; color: var(--meta); }

/* ---------- product page ---------- */

.prod-hero { background:
  radial-gradient(90% 70% at 15% 0%, rgba(150, 190, 255, 0.55), transparent 60%),
  radial-gradient(80% 60% at 85% 10%, rgba(210, 170, 255, 0.4), transparent 55%),
  linear-gradient(180deg, #dce8fb 0%, #eef3fc 45%, #ffffff 100%);
  text-align: center; padding: 88px 32px 0; }
.prod-glyph { width: 46px; height: 46px; border-radius: 14px; background: var(--ink); position: relative; margin: 0 auto 22px; }
.prod-glyph::after { content: ""; position: absolute; inset: 13px; border-radius: 50%; border: 2.5px solid #fff; }
.prod-hero h1 { font-size: clamp(2.5rem, calc(2.5rem + 1 * ((100vw - 23.4375rem) / 66.5625)), 3.5rem); letter-spacing: -0.025em; margin-bottom: 12px; }
.prod-hero > p { font-size: 15px; color: rgba(0, 0, 0, 0.62); margin-bottom: 24px; }
.prod-hero .trusted { padding-top: 56px; }
.prod-hero .app-mock { margin-top: 56px; margin-bottom: 0; box-shadow: 0 60px 120px -40px rgba(30, 50, 100, 0.35); }
.feat-h2 { text-align: center; font-size: var(--type-h25-size); line-height: var(--type-h25-line); letter-spacing: -0.02em; }
.feat-split { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 64px; align-items: center; max-width: 1280px; margin: 0 auto; }
.feat-split.rev { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
.feat-split.rev > div:first-child { order: 2; }
.feat-split h3 { font-size: var(--type-h4-size); margin-bottom: 12px; }
.feat-split p { font-size: 15px; line-height: 1.55; max-width: 400px; }
.feat-media { border-radius: 14px; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; }
.fm-1 { background: linear-gradient(150deg, #dfe5fa 0%, #c3ccf2 100%); }
.fm-2 { background: linear-gradient(150deg, #e8ddf7 0%, #cebfef 100%); }
.fm-3 { background: linear-gradient(150deg, #d9ecf7 0%, #b7d9ee 100%); }
.fm-4 { background: linear-gradient(150deg, #e3f0e4 0%, #c2ddc6 100%); }
.fm-5 { background: linear-gradient(150deg, #f7e8da 0%, #ecd0b4 100%); }
.feat-media .fake-ui { width: 78%; height: 72%; box-shadow: 0 30px 70px rgba(40, 50, 90, 0.2); }
.three-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1220px; margin: 40px auto 0; }
.three-cards > div { text-align: center; }
.three-cards .media-card { width: 100%; aspect-ratio: 4 / 3; }
.three-cards h3 { font-size: 15px; font-weight: 500; margin: 16px 0 12px; }
.quotes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1220px; margin: 40px auto 0; }
.quote-tile { background: #f6f6f7; border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.quote-tile p { font-size: 14px; line-height: 1.55; letter-spacing: 0; }
.q-who { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.q-ava { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 11px; font-weight: 500; display: flex; align-items: center; justify-content: center; }
.q-who span { font-size: 12px; color: var(--meta); line-height: 1.35; }
.prod-cta { background:
  radial-gradient(80% 90% at 80% 100%, rgba(170, 150, 255, 0.4), transparent 60%),
  radial-gradient(90% 80% at 10% 90%, rgba(140, 190, 255, 0.5), transparent 60%),
  linear-gradient(0deg, #dfe9fb 0%, #ffffff 90%);
  text-align: center; padding: 110px 32px; margin-top: 88px; }
.prod-cta h2 { font-size: var(--type-h25-size); letter-spacing: -0.02em; margin-bottom: 26px; }

/* ---------- help center ---------- */

.help-page { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.help-header { display: flex; align-items: center; justify-content: space-between; padding: 40px 0 56px; }
.help-brand { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.help-header nav { display: flex; align-items: center; gap: 20px; }
.help-login { font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.help-search { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid rgba(13, 13, 13, 0.25); padding-bottom: 16px; }
.help-search svg { width: 18px; height: 18px; opacity: 0.7; }
.help-search input { border: 0; outline: none; font: inherit; font-size: 19px; width: 100%; letter-spacing: -0.01em; }
.help-search input::placeholder { color: rgba(0, 0, 0, 0.45); }
.help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 72px 64px; padding: 72px 0 96px; }
.help-item { display: grid; grid-template-columns: 64px 1fr; gap: 24px; align-items: start; }
.help-icon { width: 64px; height: 64px; border-radius: 14px; background: #111; color: #fff; display: flex; align-items: center; justify-content: center; }
.help-icon svg { width: 26px; height: 26px; }
.help-item h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; margin-bottom: 8px; }
.help-item p { font-size: 14px; line-height: 1.5; color: var(--meta); letter-spacing: 0; }
.help-item a:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.help-foot { text-align: center; padding: 48px 0 56px; }
.help-mark { width: 30px; height: 30px; border-radius: 9px; background: #111; position: relative; margin: 0 auto 20px; }
.help-mark::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 2px solid #fff; }
.help-foot nav { display: flex; justify-content: center; gap: 28px; font-size: 14px; }
.chat-dot { position: fixed; right: 28px; bottom: 28px; width: 48px; height: 48px; border-radius: 50%; background: #111; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25); }
.chat-dot svg { width: 20px; height: 20px; }

@media (max-width: 1080px) {
  .tier-grid, .bene-grid, .three-cards, .quotes-grid { grid-template-columns: 1fr; }
  .help-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 40px; }
  .feat-split, .feat-split.rev { grid-template-columns: 1fr; gap: 28px; }
  .feat-split.rev > div:first-child { order: 0; }
  .split { grid-template-columns: 1fr; gap: 28px; }
  .val-block { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 840px) {
  .help-grid { grid-template-columns: 1fr; }
  .role-rows > a { flex-direction: column; align-items: flex-start; gap: 10px; }
  .photo-band { height: 320px; }
  .statement { font-size: 20px; }
}

/* pricing page rhythm: its main has no .stack wrapper */
main > section.trusted { margin-top: 96px; }
main > section.faq { margin-top: 96px; }
main > .pricing-head + section .tier-grid { margin-top: 8px; }

/* ---------- team solution pages ---------- */

.sol-hero { background:
  radial-gradient(80% 60% at 85% 0%, rgba(160, 200, 255, 0.5), transparent 60%),
  linear-gradient(180deg, #e4eefb 0%, #f2f7fd 60%, #ffffff 100%);
  text-align: center; padding: 72px 32px 0; overflow: hidden; }
.sol-hero h1 { font-size: clamp(2.2rem, calc(2.2rem + 1.2 * ((100vw - 23.4375rem) / 66.5625)), 3.4rem); line-height: 1.18; letter-spacing: -0.02em; max-width: 760px; margin: 0 auto; }
.sol-hero h1 .boxed { border-radius: 16px; padding: 0 18px 4px; }
.sol-hero .sol-sub { font-size: 15px; line-height: 1.6; color: rgba(0, 0, 0, 0.62); max-width: 560px; margin: 18px auto 26px; }
.sol-hero .biz-hero-cta { margin: 0 0 56px; }
.sol-media { max-width: 880px; margin: 0 auto; position: relative; padding-bottom: 150px; }
.sol-prompt { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 999px; height: 58px; padding: 0 10px 0 22px; box-shadow: 0 0 0 1px var(--hairline), 0 18px 44px rgba(30, 50, 100, 0.14); font-size: 15px; color: rgba(0, 0, 0, 0.6); text-align: left; position: relative; z-index: 2; }
.sol-prompt .plus { font-size: 19px; color: var(--faint); }
.sol-prompt span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sol-prompt .go { width: 38px; height: 38px; border-radius: 50%; background: #000; color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.sol-prompt .go svg { width: 14px; height: 14px; }
.sol-chart { position: absolute; left: 4%; right: 4%; top: 30px; height: 240px; z-index: 1; border-radius: 14px 14px 0 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 100%); mask-image: linear-gradient(180deg, #000 40%, transparent 100%); }
.sol-bars { position: absolute; inset: auto 8% 0; height: 150px; display: flex; align-items: flex-end; gap: 3.5%; }
.sol-bars i { flex: 1; border-radius: 6px 6px 0 0; background: var(--sol-tint, #9dc2f2); opacity: 0.75; }
.sol-wave { position: absolute; inset: 0; background:
  radial-gradient(120% 90% at 20% 100%, var(--sol-tint-soft, rgba(157, 194, 242, 0.5)), transparent 60%),
  radial-gradient(110% 80% at 85% 90%, rgba(255, 255, 255, 0.7), transparent 55%); }

.icon-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 1100px; margin: 44px auto 0; text-align: left; }
.icon-col svg { width: 22px; height: 22px; margin-bottom: 14px; }
.icon-col h3 { font-size: 15px; font-weight: 500; margin-bottom: 8px; }
.icon-col p { font-size: 13px; line-height: 1.55; color: var(--meta); letter-spacing: 0; }
.sol-intro { text-align: center; }
.sol-intro h2 { font-size: var(--type-h25-size); line-height: var(--type-h25-line); letter-spacing: -0.02em; max-width: 620px; margin: 0 auto; }

.uc h2 { font-size: var(--type-h3-size); line-height: 1.25; letter-spacing: -0.015em; max-width: 640px; margin-bottom: 28px; }
.uc-tabs { display: flex; flex-wrap: wrap; gap: 24px; border-bottom: 1px solid rgba(13, 13, 13, 0.1); margin-bottom: 32px; }
.uc-tabs button { font-size: 13px; font-weight: 500; color: var(--meta); padding: 0 0 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.uc-tabs button.active { color: var(--ink); border-bottom-color: var(--ink); }
.uc-body { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; }
.uc-note h3 { font-size: 14px; font-weight: 500; line-height: 1.4; margin-bottom: 14px; }
.uc-snippet { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; font-size: 12px; line-height: 1.55; color: var(--meta); position: relative; }
.uc-snippet::after { content: "↑"; position: absolute; right: 10px; bottom: 10px; width: 22px; height: 22px; border-radius: 50%; background: #000; color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.uc-media { border-radius: 12px; aspect-ratio: 16 / 9; background: linear-gradient(150deg, #ececee 0%, #dcdce0 100%); display: flex; align-items: center; justify-content: center; }

.integrations { text-align: center; }
.integrations h2 { font-size: var(--type-h25-size); letter-spacing: -0.02em; margin-bottom: 22px; }
.int-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.int-tile { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(13, 13, 13, 0.05); }
.int-tile svg { width: 20px; height: 20px; }

.why { text-align: center; }
.why h2 { font-size: var(--type-h25-size); letter-spacing: -0.02em; margin-bottom: 10px; }
.why > p { font-size: 14px; color: var(--meta); margin-bottom: 36px; }
.why-video { max-width: 1080px; margin: 0 auto; border-radius: 14px; aspect-ratio: 16 / 9; background: linear-gradient(150deg, #ececee 0%, #dfdfe3 100%); display: flex; align-items: center; justify-content: center; }
.why .quote-card { max-width: 860px; margin: -60px auto 0; background: #fff; position: relative; z-index: 2; text-align: left; box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.18); }

.story-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.story-cards a { display: block; }
.story-cards a:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.story-art { aspect-ratio: 1 / 1.05; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.story-art span { color: #fff; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; text-align: center; line-height: 1.1; }
.sa-1 { background: radial-gradient(120% 120% at 30% 20%, #24406e 0%, #101d38 70%); }
.sa-2 { background: radial-gradient(120% 120% at 70% 20%, #0e3f38 0%, #071f1c 70%); }
.sa-3 { background: radial-gradient(120% 120% at 40% 80%, #3c1f4e 0%, #180a22 70%); }
.sa-4 { background: linear-gradient(160deg, #d98a3f 0%, #8a4ab0 60%, #3f5fd9 100%); }
.story-cards h3 { font-size: 14px; font-weight: 500; line-height: 1.4; margin-top: 12px; }

.resources-sec { text-align: center; }
.resources-sec h2 { font-size: var(--type-h25-size); letter-spacing: -0.02em; margin-bottom: 8px; }
.resources-sec > p { font-size: 14px; color: var(--meta); }
.resources-sec .news-grid-page { text-align: left; }

.sol-cta { background: var(--fill-solid); text-align: center; padding: 92px 32px; }
.sol-cta h2 { font-size: var(--type-h25-size); letter-spacing: -0.02em; margin-bottom: 12px; }
.sol-cta p { font-size: 14px; color: var(--meta); max-width: 460px; margin: 0 auto 28px; }

@media (max-width: 1080px) {
  .icon-cols { grid-template-columns: 1fr; }
  .uc-body { grid-template-columns: 1fr; }
  .story-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 840px) {
  .story-cards { grid-template-columns: 1fr; }
  .why .quote-card { margin-top: 16px; }
}

/* index view modes: paper list <-> card grid (OpenAI grid = art card + title + meta) */
.row-art { display: none; }
.row-list.as-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 24px; border-top: 1px solid rgba(13, 13, 13, 0.08); padding-top: 32px; }
.row-list.as-grid > a { display: flex; flex-direction: column; border-top: 0; padding: 0; margin: 0; }
.row-list.as-grid .row-art { order: 0; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-card); overflow: hidden; }
.row-list.as-grid .row-art i { font-style: normal; color: #fff; font-weight: 600; font-size: 30px; letter-spacing: -0.015em; text-align: center; }
.row-list.as-grid .row-main { order: 1; }
.row-list.as-grid .row-main h3 { font-size: 17px; margin: 16px 0 8px; }
.row-list.as-grid .row-main p { display: none; }
.row-list.as-grid .row-side { order: 2; flex-direction: row; align-items: baseline; gap: 12px; }
.news-grid-page.as-list { grid-template-columns: 1fr; gap: 0; }
.news-grid-page.as-list > a { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 0 24px; align-items: start; padding: 40px 0; border-top: 1px solid rgba(13, 13, 13, 0.08); }
:root[data-theme="dark"] .news-grid-page.as-list > a { border-top-color: rgba(255, 255, 255, 0.14); }
.news-grid-page.as-list .thumb-lg { display: none; }
.news-grid-page.as-list h3 { margin: 0; grid-column: 2; grid-row: 1; font-size: 20px; line-height: 1.3; }
.news-grid-page.as-list .meta { grid-column: 1; grid-row: 1 / span 2; flex-direction: column; align-items: flex-start; gap: 22px; margin: 0; }
.news-grid-page .sub { display: none; }
.news-grid-page.as-list .sub { display: block; grid-column: 2; grid-row: 2; font-size: 14px; line-height: 1.55; color: var(--meta); margin: 12px 0 0; max-width: 560px; }
@media (max-width: 768px) {
  .news-grid-page.as-list > a { grid-template-columns: 1fr; gap: 12px; }
  .news-grid-page.as-list h3 { grid-column: 1; grid-row: 2; }
  .news-grid-page.as-list .meta { flex-direction: row; gap: 12px; }
}
@media (max-width: 1080px) { .row-list.as-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 840px) { .row-list.as-grid { grid-template-columns: 1fr; } }

/* ---------- platform overview ---------- */

.ov-hero { text-align: center; padding-top: 64px; }
.ov-hero h1 { font-size: clamp(2.2rem, calc(2.2rem + 1.05 * ((100vw - 23.4375rem) / 66.5625)), 3.25rem); line-height: 1.16; letter-spacing: -0.02em; max-width: 720px; margin: 0 auto 18px; }
.ov-hero .sol-sub { margin-bottom: 26px; }
.mosaic { display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-rows: 236px; gap: 8px; border-radius: 14px; overflow: hidden; margin-top: 56px; }
.mosaic span { display: block; }

.pillar { text-align: center; }
.pillar h3 { font-size: var(--type-h4-size); letter-spacing: -0.015em; }
.pillar > p { font-size: 14px; line-height: 1.55; color: var(--meta); max-width: 660px; margin: 10px auto 36px; }
.pillar .news-grid-page { text-align: left; margin-top: 0; }
.thumb-lg.center { display: flex; align-items: center; justify-content: center; }
.art-label { background: rgba(255, 255, 255, 0.92); color: #111; padding: 10px 18px; border-radius: 10px; font-size: 20px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.1; }

.ov-rows-head { text-align: center; margin-bottom: 22px; }
.ov-rows-head h3 { font-size: var(--type-h4-size); margin-bottom: 8px; }
.ov-rows-head p { font-size: 14px; color: var(--meta); margin-bottom: 20px; }

/* ---------- trust page (safety-page template) ---------- */

.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

.tr-hero { text-align: center; padding-top: 72px; }
.tr-hero h1 { font-size: var(--type-h2-size); line-height: var(--type-h2-line); letter-spacing: -0.02em; margin-bottom: 14px; }
.tr-hero p { font-size: 15px; line-height: 1.6; color: var(--meta); max-width: 460px; margin: 0 auto; }

/* principle cards: label top, animated illustration center, caption + plus bottom-left */
.tt-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.t-card { position: relative; border: 1px solid var(--border); border-radius: 12px; padding: 22px; min-height: 560px; display: flex; flex-direction: column; text-align: left; background: #fff; cursor: pointer; transition: background 0.2s ease; }
.t-card:hover { background: #fafafa; }
.t-card > h2 { font-size: 15px; font-weight: 500; letter-spacing: 0; }
.t-card .diag { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.t-card .t-cap { font-size: 14px; line-height: 1.5; color: var(--meta); letter-spacing: 0; max-width: 300px; margin-bottom: 18px; }
.t-plus { width: 34px; height: 34px; border-radius: 50%; background: var(--fill); display: inline-flex; align-items: center; justify-content: center; flex: none; transition: background 0.2s ease; }
.t-plus svg { width: 13px; height: 13px; }
.t-card:hover .t-plus { background: var(--fill-hover); }
.t-src { display: none; }

/* animated illustrations — continuous gentle motion, like their looping videos */
.dg-dots { display: flex; gap: 18px; }
.dg-dots i { width: 52px; height: 52px; border-radius: 50%; }
.dg-dots i:first-child { background: #0a0a0a; animation: dot-a 5s ease-in-out infinite; }
.dg-dots i:last-child { background: #cfcfd4; animation: dot-b 5s ease-in-out infinite; }
@keyframes dot-a { 0%,100% { transform: translate(0,0); } 50% { transform: translate(16px,-12px); } }
@keyframes dot-b { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-16px,12px); } }

.dg-test { display: flex; align-items: center; gap: 16px; }
.dg-test .chk { width: 46px; height: 46px; border-radius: 12px; background: #35c24f; display: flex; align-items: center; justify-content: center; animation: chk-pop 4s ease-in-out infinite; }
.dg-test .chk svg { width: 22px; height: 22px; }
@keyframes chk-pop { 0%,70%,100% { transform: scale(1); } 78% { transform: scale(1.16); } 86% { transform: scale(0.96); } }
.dg-test .lines { display: flex; flex-direction: column; gap: 9px; }
.dg-test .lines i { display: block; height: 9px; border-radius: 5px; background: rgba(13,13,13,0.12); transform-origin: left; animation: line-fill 4s ease-in-out infinite; }
.dg-test .lines i:nth-child(1) { width: 96px; animation-delay: 0s; }
.dg-test .lines i:nth-child(2) { width: 72px; animation-delay: 0.25s; }
.dg-test .lines i:nth-child(3) { width: 86px; animation-delay: 0.5s; }
@keyframes line-fill { 0%,55% { transform: scaleX(0.55); opacity: 0.5; } 70%,100% { transform: scaleX(1); opacity: 1; } }

.dg-people { display: grid; grid-template-columns: repeat(2, 46px); gap: 16px 22px; }
.dg-person { position: relative; width: 46px; height: 46px; }
.dg-person::before { content: ""; position: absolute; top: 0; left: 12px; width: 22px; height: 22px; border-radius: 50%; background: #0a0a0a; }
.dg-person::after { content: ""; position: absolute; bottom: 0; left: 2px; width: 42px; height: 19px; border-radius: 20px 20px 5px 5px; background: #0a0a0a; }
.dg-person.lite::before, .dg-person.lite::after { background: #cfcfd4; }
.dg-people .badge { position: absolute; right: -8px; bottom: -6px; width: 20px; height: 20px; border-radius: 50%; background: #35c24f; display: flex; align-items: center; justify-content: center; animation: badge-hop 5s ease-in-out infinite; }
.dg-people .badge svg { width: 10px; height: 10px; }
@keyframes badge-hop { 0%,20% { transform: translate(0,0); opacity: 1; } 45% { transform: translate(-68px,0); } 70%,100% { transform: translate(-68px,-62px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .dg-dots i, .dg-test .chk, .dg-test .lines i, .dg-people .badge { animation: none !important; }
  .dg-test .lines i { transform: scaleX(1); opacity: 1; }
}

/* cycle diagram — STATIC (matches their safety page) */
.tr-cycle-head { text-align: center; margin-bottom: 48px; }
.tr-cycle-head h2 { font-size: var(--type-h25-size); letter-spacing: -0.02em; margin-bottom: 12px; }
.tr-cycle-head p { font-size: 14px; line-height: 1.55; color: var(--meta); max-width: 440px; margin: 0 auto; }
.cycle-wrap { position: relative; max-width: 940px; margin: 0 auto; }
.cycle-wrap svg { width: 100%; height: auto; display: block; }
.cring { fill: none; stroke: #3cc45a; stroke-width: 2; stroke-dasharray: 9 11; stroke-linecap: round; }
.cring-solid { fill: none; stroke: #3cc45a; stroke-width: 2.4; }
.ctip { stroke: #3cc45a; stroke-width: 2; }
.cx { fill: none; stroke: #a2a2a8; stroke-width: 1.3; }
.chub { fill: #f2f2f3; }
.chub-label { font-size: 14px; font-weight: 500; letter-spacing: 0.05em; fill: currentColor; }
.cpill { position: absolute; transform: translate(-50%, -50%); background: #fff; border: 1px solid rgba(13,13,13,0.14); border-radius: 999px; padding: 6px 12px; font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }

.band { background: var(--fill-solid); border-radius: 16px; text-align: center; padding: 84px 32px; }
.band h2 { font-size: var(--type-h25-size); letter-spacing: -0.02em; margin-bottom: 24px; }

/* protection cards: plus INSIDE the card, aligned bottom-left, opens overlay */
.pr-head { text-align: center; margin-bottom: 40px; }
.pr-head h2 { font-size: var(--type-h25-size); letter-spacing: -0.02em; margin-bottom: 10px; }
.pr-head p { font-size: 14px; color: var(--meta); }
.pr-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pr-cards.two { grid-template-columns: repeat(2, 1fr); margin-top: 24px; }
.pr-card { position: relative; border: 1px solid var(--border); border-radius: 12px; padding: 22px; min-height: 210px; display: flex; flex-direction: column; align-items: flex-start; background: #fff; cursor: pointer; transition: background 0.2s ease; }
.pr-card:hover { background: #fafafa; }
.pr-card > svg { width: 22px; height: 22px; margin-bottom: 34px; }
.pr-card h3 { font-size: 15px; font-weight: 500; letter-spacing: 0; margin-bottom: 6px; }
.pr-card p { font-size: 13px; line-height: 1.5; color: var(--meta); letter-spacing: 0; margin-bottom: 18px; }
.pr-card .t-plus { margin-top: auto; }

/* full-screen overlay (their Read-more dialog) */
.tr-modal[hidden] { display: none; }
.tr-modal { position: fixed; inset: 0; z-index: 200; display: flex; }
.tr-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.12); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: fade-in 0.25s ease; }
.tr-modal-panel { position: absolute; inset: 0; background:
  radial-gradient(60% 45% at 12% 46%, rgba(150,190,255,0.14), transparent 60%),
  radial-gradient(55% 40% at 88% 30%, rgba(180,150,255,0.12), transparent 60%),
  rgba(255,255,255,0.96);
  -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
  overflow-y: auto; animation: panel-in 0.3s ease; }
.tr-modal.is-plain .tr-modal-panel { background: rgba(255, 255, 255, 0.96); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* The panel fill and the bullet dot were literals (#fff / #000), so opening a
   Protection card in dark mode produced a white sheet with black-on-black text.
   Both need dark counterparts; the tokens alone don't reach inside a literal. */
:root[data-theme="dark"] .tr-modal-backdrop { background: rgba(0, 0, 0, 0.45); }
:root[data-theme="dark"] .tr-modal-panel { background:
  radial-gradient(60% 45% at 12% 46%, rgba(90, 130, 210, 0.16), transparent 60%),
  radial-gradient(55% 40% at 88% 30%, rgba(120, 95, 200, 0.14), transparent 60%),
  rgba(14, 14, 17, 0.97); }
:root[data-theme="dark"] .tr-modal.is-plain .tr-modal-panel { background: rgba(14, 14, 17, 0.97); }
:root[data-theme="dark"] .tr-modal-body li::before { background: rgba(255, 255, 255, 0.75); }
.tr-modal-close { position: fixed; top: 24px; right: 28px; width: 36px; height: 36px; border-radius: 50%; background: var(--fill); display: flex; align-items: center; justify-content: center; z-index: 2; }
.tr-modal-close:hover { background: var(--fill-hover); }
.tr-modal-close svg { width: 14px; height: 14px; }
.tr-modal-body { max-width: 680px; margin: 0 auto; padding: 200px var(--pad) 120px; }
.tr-modal-body .m-eyebrow { font-size: 14px; color: var(--meta); margin-bottom: 18px; }
.tr-modal-body h2 { font-size: var(--type-h3-size); letter-spacing: -0.015em; line-height: 1.2; margin-bottom: 18px; }
.tr-modal-body .m-intro { font-size: 17px; line-height: 1.55; max-width: 560px; margin-bottom: 26px; }
.tr-modal-body ul { list-style: none; max-width: 660px; display: flex; flex-direction: column; gap: 16px; }
.tr-modal-body li { position: relative; padding-left: 18px; font-size: 17px; line-height: 1.55; }
.tr-modal-body li::before { content: ""; position: absolute; left: 0; top: 11px; width: 4px; height: 4px; border-radius: 50%; background: #000; }
.tr-modal-body li b { font-weight: 400; font-style: italic; }
@media (prefers-reduced-motion: reduce) { .tr-modal-backdrop, .tr-modal-panel { animation: none; } }

@media (max-width: 1080px) { .tt-cards, .pr-cards, .pr-cards.two { grid-template-columns: 1fr; } }

.news-grid-page.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .news-grid-page.grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 840px) {
  .news-grid-page.grid-4 { grid-template-columns: 1fr; }
  .tr-modal-body { padding-top: 140px; }
}

.tr-modal-body svg.m-icon { display: block; width: 28px; height: 28px; margin-bottom: 24px; }

/* ===================== Enterprise Platform (mirrors OpenAI /api/) ===================== */
.ep-hero { text-align: center; padding: 105px 0 0; }
.ep-h1 { font-size: clamp(40px, 4.46vw, 64px); font-weight: 500; line-height: 1.0; letter-spacing: -0.03em; max-width: 831px; margin: 0 auto; }
.ep-cta { display: flex; gap: 12px; justify-content: center; margin-top: 34px; }
.ep-sec { padding-top: 149px; }
.ep-h2 { font-size: clamp(34px, 3.35vw, 48px); font-weight: 500; line-height: 1.16; letter-spacing: -0.03em; text-align: center; max-width: 887px; margin: 0 auto; }
.ep-sub { font-size: 17px; line-height: 1.65; text-align: center; max-width: 660px; margin: 33px auto 0; }
.ep-btnrow { display: flex; gap: 16px; justify-content: center; align-items: center; margin-top: 28px; }

.ep-models { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 60px; }
/* measured on openai.com/api: card 438x547 portrait, the image fills it edge to
   edge and every line of text sits ON the image, bottom-left, 28px in.
   Name 30/500 white; spec lines 15/400 white. No separate panel. */
.ep-model { position: relative; aspect-ratio: 438 / 547; border-radius: 8px; overflow: hidden; display: block; background: #05060c; }
a.ep-model:hover .ep-model-body h3 { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ep-model img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* no scrim, no panel — openai.com/api paints the text straight onto the image */
/* The desert card shows its source uncropped, floor included — that band under
   the last line is the desert, not a panel, and He wants it visible. Measured
   6.7:1 for white text on it, so it reads. */
/* Raise the art so its busy middle rides up clear of the text block: anchor the
   image to the card's bottom edge and let the extra height run off the top. */
.ep-model img.raise { top: auto; bottom: 0; height: 110%; }
.ep-model-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 28px; color: #fff; }
.ep-model-body h3 { font-size: 30px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; margin: 0 0 14px; color: #fff; }
.ep-spec-group { margin-bottom: 14px; }
.ep-spec-group p { font-size: 15px; line-height: 1.5; margin: 0; color: #fff; }
.ep-spec-note { font-size: 15px; line-height: 1.5; margin: 0; color: rgba(255,255,255,.82); }

.ep-mid { text-align: center; margin-top: 84px; }
.ep-mid h3 { font-size: 30px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 26px; }

.ep-guides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 84px; }
.ep-guide { border: 1px solid var(--border); border-radius: 8px; padding: 28px 30px 26px; display: flex; flex-direction: column; }
.ep-guide h3 { font-size: 20px; font-weight: 500; margin: 0 0 12px; }
.ep-guide p { font-size: 15px; line-height: 1.6; margin: 0 0 34px; }
.ep-link { font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; }
.ep-link svg { width: 9px; height: 9px; }

.ep-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 60px; }
.ep-trio-art { aspect-ratio: 1 / 1; border-radius: 8px; position: relative; overflow: hidden; }
.art-ep-connect { background: linear-gradient(135deg, #9fd4f2 0%, #5ba8e8 45%, #7fc4ee 75%, #a8e0f5 100%); }
.art-ep-remember { background: linear-gradient(160deg, #bfe3f4 0%, #6db2e6 50%, #4f8fd8 100%); }
.art-ep-act { background: linear-gradient(205deg, #a5daf3 0%, #5fa9e2 55%, #8ecdf0 100%); }
.ep-tile { position: absolute; width: 88px; height: 88px; border-radius: 22px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 10px 28px rgba(20, 60, 100, 0.18); display: grid; place-items: center; }
.ep-tile svg { width: 40px; height: 40px; }
.ep-sheet { position: absolute; background: rgba(255, 255, 255, 0.94); border-radius: 14px; box-shadow: 0 14px 34px rgba(20, 60, 100, 0.2); }
.ep-trio-cap h3 { font-size: 20px; font-weight: 500; margin: 24px 0 10px; }
.ep-trio-cap p { font-size: 16px; line-height: 1.6; margin: 0; }

.ep-demo { background: rgba(0, 0, 0, 0.04); margin-top: 80px; padding: 80px 0; }
.ep-demo .segmented { margin: 30px 0 0; }
.ep-demo-segwrap { display: flex; justify-content: center; }
.ep-demo-cap { font-size: 17px; line-height: 1.65; text-align: center; max-width: 560px; margin: 30px auto 0; }
.ep-demo-cap a { text-decoration: underline; text-underline-offset: 3px; }
.ep-media { max-width: 1009px; margin: 40px auto 0; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; position: relative; background: linear-gradient(140deg, #eef3f7 0%, #dfe9f2 60%, #eaf1f7 100%); }
.ep-wave { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; }
.ep-wave span { width: 12px; border-radius: 999px; background: #0d0d0d; height: 24px; animation: ep-bounce 1.6s ease-in-out infinite; }
.ep-wave span:nth-child(2) { height: 78px; animation-delay: 0.15s; }
.ep-wave span:nth-child(3) { height: 132px; animation-delay: 0.3s; }
.ep-wave span:nth-child(4) { height: 64px; animation-delay: 0.45s; }
.ep-wave span:nth-child(5) { height: 100px; animation-delay: 0.6s; }
.ep-wave span:nth-child(6) { height: 42px; animation-delay: 0.75s; }
@keyframes ep-bounce { 0%, 100% { transform: scaleY(0.72); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .ep-wave span { animation: none; } }
.ep-doc { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 340px; background: #fff; border-radius: 14px; box-shadow: 0 18px 44px rgba(20, 50, 90, 0.16); padding: 26px 28px; }
.ep-doc i { display: block; height: 10px; border-radius: 999px; background: #e6e9ee; margin-bottom: 12px; }
.ep-doc i:first-child { width: 55%; height: 13px; background: #d6dbe2; }
.ep-doc i:nth-child(3) { width: 88%; }
.ep-doc i:nth-child(4) { width: 72%; }
.ep-doc i:last-child { width: 40%; margin-bottom: 0; }
.ep-credit { max-width: 1009px; margin: 16px auto 0; font-size: 13px; color: var(--meta); }

.ep-uc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.ep-uc-card { background: rgba(0, 0, 0, 0.04); border-radius: 6px; padding: 8px 8px 20px; display: flex; flex-direction: column; }
.ep-uc-art { border-radius: 4px; height: 240px; display: grid; place-items: center; }
.art-uc-1 { background: linear-gradient(130deg, #b9d6f2 0%, #8fb4e8 40%, #d9e6f4 100%); }
.art-uc-2 { background: linear-gradient(160deg, #6f9fe8 0%, #4f7fd8 55%, #7fa8e8 100%); }
.art-uc-3 { background: linear-gradient(120deg, #cfe2f4 0%, #f0d9a8 55%, #a8c8ee 100%); }
.art-uc-4 { background: linear-gradient(150deg, #9fc4ee 0%, #6f9fe0 45%, #c8ddf2 100%); }
.art-uc-5 { background: linear-gradient(115deg, #8fb8ea 0%, #e8b8d0 60%, #f0d0a0 100%); }
.art-uc-6 { background: linear-gradient(140deg, #a8d8ea 0%, #78b8e0 50%, #d0e8f4 100%); }
.ep-uc-glyph { width: 66px; height: 66px; border-radius: 18px; background: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(20, 60, 100, 0.14); }
.ep-uc-glyph svg { width: 30px; height: 30px; }
.ep-uc-body { padding: 16px 12px 0; display: flex; flex-direction: column; flex: 1; }
.ep-uc-body h3 { font-size: 22px; font-weight: 500; margin: 0 0 8px; }
.ep-uc-body > p { font-size: 15px; line-height: 1.55; margin: 0 0 18px; }
.ep-stories-btn { margin-top: auto; width: 100%; height: 40px; border-radius: 40px; background: rgba(13, 13, 13, 0.05); font-size: 14px; font-weight: 500; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ep-stories-btn svg { width: 10px; height: 6px; transition: transform 0.25s ease; }
.ep-stories-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.ep-stories { padding: 14px 4px 0; }
.ep-stories a { display: block; font-size: 14.5px; padding: 5px 0; text-decoration: underline; text-underline-offset: 3px; }

.ep-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 60px; }
.ep-feat { border: 1px solid var(--border); border-radius: 8px; padding: 32px 30px 24px; }
.ep-feat h3 { font-size: 22px; font-weight: 500; margin: 0 0 22px; }
.ep-feat ul { list-style: none; margin: 0; padding: 0; }
.ep-feat li, .ep-go li { display: flex; gap: 12px; font-size: 15px; line-height: 1.5; margin-bottom: 14px; }
.ep-feat li svg, .ep-go li svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 3px; }
.ep-go { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1016px; margin: 56px auto 0; }
.ep-go-card { border: 1px solid var(--border); border-radius: 8px; padding: 32px 30px 30px; display: flex; flex-direction: column; }
.ep-go-card h3 { font-size: 22px; font-weight: 500; margin: 0 0 22px; }
.ep-go-card ul { list-style: none; margin: 0 0 30px; padding: 0; }
.ep-go-card .pill { margin-top: auto; align-self: flex-start; }
.ep-last { padding-top: 123px; padding-bottom: 130px; }

/* Enterprise page shape — measured on chatgpt.com/business/enterprise/ @1440:
   64/500 centred h1, 48/500 centred section heads, 30/500 feature headings in a
   363px text column, 18/500 card headings over 14/400 body, #f3f3f3 tiles,
   #e5e5e5 hairline cards, #f8f8f8 closing band. Colours go through the theme
   tokens so the page still inverts. */
.ep-eyebrow { font-size: 14px; font-weight: 500; margin-bottom: 31px; }
/* minmax(0,1fr) + align-items:start is load-bearing: with plain 1fr the shots'
   aspect-ratio feeds the row height back into each track's automatic minimum,
   so the stagger margins widen the tracks and the row overflows the container */
.ep-showcase { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 61px -24px 0; }
.ep-shot { aspect-ratio: 320 / 318; border-radius: 16px; display: grid; place-items: center; padding: 0 22px; }

.ep-shot .lbl { font-size: 15px; font-weight: 500; color: rgba(0, 0, 0, 0.62); letter-spacing: -0.01em; text-align: center; }


/* their grid, measured: container content 1295 at a 1425 viewport, so the page
   runs 65px gutters rather than the site's 32. The feature row is 541 | 134 | 620,
   where the 541 track carries a 178px inset — that inset is what puts the copy at
   x243 and, mirrored, at x819. Reversing the row has to swap the TRACKS, not just
   the order: ordering alone left the text on the 1fr track at 639px wide. */
.ep-feature { display: grid; grid-template-columns: 541px minmax(0, 1fr); gap: 134px; align-items: center; margin: 120px 0 0; }
.ep-feature-text { padding-left: 176px; }
.ep-feature-text h3, .ep-feature-text p { max-width: 359px; }
.ep-feature.rev { grid-template-columns: minmax(0, 1fr) 541px; }
.ep-feature.rev .ep-feature-text { order: 2; padding-left: 7px; padding-right: 171px; }
.ep-feature-text h3 { font-size: 30px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.32; margin: 0 0 18px; }
.ep-feature-text p { font-size: 14px; line-height: 1.64; color: var(--meta); margin: 0 0 20px; }
.ep-feature-art { aspect-ratio: 16 / 12.6; border-radius: 18px; }

.ep-proof { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 93px; }
.ep-proof > :only-child { grid-column: 1 / -1; }
.ep-quote-card { background: var(--fill-solid); border-radius: 16px; padding: 40px 42px 34px; margin: 0; }
.ep-quote-card .sty-q { border: 0; margin: 0; padding: 0; }
.ep-quote-card .sty-q p { font-size: 30px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.28; margin: 0 0 28px; max-width: 720px; text-align: left; }
.ep-quote-card figcaption { display: flex; flex-direction: column; gap: 4px; }
.ep-quote-who { font-size: 14px; font-weight: 500; }
.ep-quote-note { font-size: 14px; color: var(--meta); }
/* stat tiles sit beside the quote once there are real numbers to put in them */
.ep-stat { background: var(--fill-solid); border-radius: 16px; padding: 34px 32px; }
.ep-stat b { display: block; font-size: 30px; font-weight: 400; letter-spacing: -0.02em; margin-bottom: 10px; }
.ep-stat span { font-size: 14px; line-height: 1.5; color: var(--meta); }

/* pulled out by one card padding so the card TEXT lines up with the container
   edge, which is how theirs sits: h3 at x65 and x978 against a 65..1360 container */
.ep-cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin: 93px -24px 0; }
.ep-card { border: 1px solid var(--border); border-radius: 16px; padding: 30px 24px 28px; }
.ep-card h3 { font-size: 18px; font-weight: 500; line-height: 1.32; margin: 0 0 14px; }
.ep-card p { font-size: 14px; line-height: 1.64; color: var(--meta); margin: 0; }
.ep-cards3-more { text-align: center; margin-top: 56px; }
/* the shared .fx rail runs 14px inactive for government.html; the enterprise
   reference sets 17px, so scope it here and leave government alone. The active
   item keeps 22px from .fx-item.on button, which is later in this file. */
.ep-sec .fx-item button { font-size: 17px; }
.ep-sec .fx { grid-template-columns: 318px minmax(0, 1fr); margin-top: 119px; }
/* out-specifies .fx's own 900px reset, so it has to be undone at the same breakpoint */
@media (max-width: 900px) { .ep-sec .fx { grid-template-columns: 1fr; } }
body.ep-page .container { max-width: 1425px; padding-left: 65px; padding-right: 65px; }
@media (max-width: 980px) {
  body.ep-page .container { padding-left: var(--pad); padding-right: var(--pad); }
  .ep-feature-text, .ep-feature.rev .ep-feature-text { padding-left: 0; padding-right: 0; }
  .ep-cards3 { margin-left: 0; margin-right: 0; }
  .ep-final { padding: 40px 32px; }
}

.ep-final { background: var(--fill); border-radius: 20px; padding: 54px 114px; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.ep-final h2 { font-size: 30px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.24; margin: 0 0 14px; max-width: 600px; }
.ep-final p { font-size: 16px; line-height: 1.55; color: var(--meta); margin: 0; max-width: 600px; }
.ep-final .pill { flex: 0 0 auto; }

@media (max-width: 980px) {
  .ep-models, .ep-guides, .ep-trio, .ep-uc, .ep-feats { grid-template-columns: 1fr; }
  .ep-go { grid-template-columns: 1fr; }
  .ep-sec { padding-top: 84px; }
  .ep-showcase { grid-template-columns: repeat(2, 1fr); }
  .ep-showcase { margin-left: 0; margin-right: 0; }
  .ep-shot { aspect-ratio: 1 / 1; }
  .ep-feature, .ep-feature.rev { grid-template-columns: 1fr; gap: 32px; margin-top: 64px; }
  .ep-feature.rev .ep-feature-text { order: 0; }
  .ep-proof, .ep-cards3 { grid-template-columns: 1fr; }
  .ep-final { flex-direction: column; align-items: flex-start; padding: 40px 32px; }
}

/* ===================== Release notes (mirrors openai.com/products/release-notes) ===================== */
/* Measured live 2026-07-25 @1440: global chrome; container 1376; h1 64/500 -1.92; RSS link 14/500;
   control bar = 18px tabs left + Filter(14/500 r4) + Sort(14/500) + Search(320x33 r6, 1px .12 border);
   rows = 12-col grid gap 32, pad 32 y, 1px .12 bottom rule; left rail cols1-2 (cat 14/500 black,
   date 14/400 .6, green GA pill); middle cols3-8 672 (title 22/500 -0.22 mb16, body 14/400,
   Show more 14/500 .6); right rail cols10-12 behind 1px left border pad-left 32 (links 14/500);
   black Load more pill r40 40h. */
.rn2-title { font-size: clamp(44px, 4.45vw, 64px); font-weight: 500; line-height: 1.0; letter-spacing: -0.03em; margin: 0; }
.rn2-rss { display: inline-flex; align-items: center; font-size: 14px; font-weight: 500; color: var(--meta); margin-top: 8px; text-decoration: none; }
.rn2-rss:hover { color: var(--ink); }
.rn2-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 32px; flex-wrap: wrap; }
.rn2-list { margin-top: 32px; }
.rn2-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; padding: 32px 0; border-bottom: 1px solid var(--border); align-items: start; }
.rn2-side { grid-column: 1 / 3; display: flex; flex-direction: column; align-items: flex-start; }
.rn2-side b { font-size: 14px; font-weight: 500; color: var(--ink); }
.rn2-side span { font-size: 14px; font-weight: 400; color: var(--meta); margin-top: 4px; letter-spacing: -0.01em; }
.rn2-ga { margin-top: 16px !important; display: inline-block; font-size: 12.5px; font-weight: 500; color: #226429 !important; background: #dcf1d7; border-radius: 7px; padding: 5px 11px; letter-spacing: 0 !important; }
.rn2-ga.beta { color: #8a5a1b !important; background: #f6e8cf; }
.rn2-mid { grid-column: 3 / 9; }
.rn2-mid h3 { font-size: 22px; font-weight: 500; line-height: 1.26; letter-spacing: -0.01em; margin: 0 0 16px; }
.rn2-mid p { font-size: 14px; line-height: 1.64; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.rn2-mid p + p { margin-top: 14px; }
.rn2-mid .rn2-sub { font-weight: 500; margin-top: 18px; }
.rn2-mid ul { list-style: disc; padding-left: 20px; margin: 12px 0 0; }
.rn2-mid li { font-size: 14px; line-height: 1.64; margin: 6px 0; }
.rn2-clip { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rn2-more { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--meta); }
.rn2-more:hover { color: var(--ink); }
.rn2-more svg { width: 10px; height: 6px; transition: transform 0.25s ease; }
.rn2-row.open .rn2-more svg { transform: rotate(180deg); }
.rn2-hide { display: none; }
.rn2-right { grid-column: 10 / 13; border-left: 1px solid var(--border); padding-left: 32px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.rn2-right a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--meta); }
.rn2-right a:first-child { color: var(--ink); }
.rn2-right a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rn2-right a svg { width: 9px; height: 9px; }
.rn2-search { display: flex; align-items: center; gap: 8px; width: 320px; max-width: 42vw; height: 34px; border: 1px solid var(--border); border-radius: 6px; padding: 0 11px; color: var(--meta); }
.rn2-search svg { width: 15px; height: 15px; flex: 0 0 15px; }
.rn2-search input { border: 0; outline: 0; background: none; font: inherit; font-size: 14px; color: var(--ink); width: 100%; }
.rn2-load { margin: 48px auto 0; }
.row-list > .search-miss { display: none !important; }
@media (max-width: 900px) {
  .rn2-row { grid-template-columns: 1fr; gap: 14px; }
  .rn2-side { grid-column: auto; flex-direction: row; align-items: center; gap: 12px; }
  .rn2-side span { margin-top: 0; }
  .rn2-ga { margin-top: 0 !important; }
  .rn2-mid { grid-column: auto; }
  .rn2-right { grid-column: auto; border-left: 0; padding-left: 0; flex-direction: row; flex-wrap: wrap; gap: 20px; }
  .rn2-search { width: 100%; max-width: none; }
}

/* ===================== Heyno Academy overview (mirrors openai.com/academy) ===================== */
/* Measured live 2026-07-25: global chrome; hero h1 64/500 centered over a pale wash band;
   card anatomy = gray rgba(0,0,0,0.04) r6, art inset 8 (r4) with 92px white circle icon badges,
   h3 22/500, full-width gray pill r40 buttons; Courses 3-col, Guides 4-col, Explore 2 big cards
   + hairline doc-list rows; full-bleed gray Join band with black pill. */
.acv-hero { text-align: center; padding: 84px 0 128px; background: linear-gradient(180deg, rgba(253, 238, 246, 0) 18%, #fdeaf4 100%); }
.acv-hero h1 { font-size: clamp(40px, 4.45vw, 64px); font-weight: 500; line-height: 1.0; letter-spacing: -0.03em; margin: 0 0 22px; }
.acv-hero p { font-size: 17px; line-height: 1.65; margin: 0 auto; max-width: 640px; }
.acv-sec { padding-top: 118px; }
.acv-h2 { font-size: clamp(34px, 3.34vw, 48px); font-weight: 500; line-height: 1.16; letter-spacing: -0.03em; text-align: center; margin: 0 auto; max-width: 760px; }
.acv-sub { font-size: 17px; line-height: 1.65; text-align: center; max-width: 620px; margin: 20px auto 0; }
.acv-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.acv-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 56px; }
.acv-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px; }
.acv-card { background: rgba(0, 0, 0, 0.04); border-radius: 6px; padding: 8px 8px 20px; display: flex; flex-direction: column; }
.acv-art { border-radius: 4px; height: 240px; display: grid; place-items: center; }
.acv-grid4 .acv-art { height: 300px; }
.acv-grid2 .acv-art { height: 375px; }
.acv-badges { display: flex; gap: 10px; }
.acv-badge { width: 92px; height: 92px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(20, 40, 70, 0.10); }
.acv-badge svg { width: 34px; height: 34px; }
.acv-body { padding: 16px 12px 0; display: flex; flex-direction: column; flex: 1; }
.acv-body h3 { font-size: 22px; font-weight: 500; line-height: 1.26; margin: 0 0 8px; }
.acv-body > p { font-size: 15px; line-height: 1.55; margin: 0 0 18px; }
.acv-btn { margin-top: auto; width: 100%; height: 40px; border-radius: 40px; background: rgba(13, 13, 13, 0.05); font-size: 14px; font-weight: 500; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.acv-btn svg { width: 9px; height: 9px; }
.acv-list { max-width: 900px; margin: 96px auto 0; }
.acv-row { display: flex; justify-content: space-between; align-items: center; gap: 40px; padding: 26px 0; border-top: 1px solid var(--border); }
.acv-row:last-child { border-bottom: 1px solid var(--border); }
.acv-row h3 { font-size: 17px; font-weight: 500; margin: 0 0 6px; }
.acv-row p { font-size: 16px; color: var(--meta); margin: 0; }
.acv-row-link { font-size: 15px; font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.acv-row-link svg { width: 7px; height: 11px; }
.acv-join { background: rgba(0, 0, 0, 0.04); text-align: center; padding: 118px 32px 124px; margin-top: 128px; }
.acv-join h2 { font-size: clamp(40px, 4.45vw, 64px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 22px; }
.acv-join p { font-size: 17px; line-height: 1.65; margin: 0 auto; max-width: 560px; }
.acv-join .pill { margin-top: 30px; }
.acv-a1 { background: radial-gradient(70% 90% at 75% 20%, #ef62d5 0%, rgba(239, 98, 213, 0) 60%), linear-gradient(135deg, #21b2e0 0%, #4ed0ea 55%, #9ae4f2 100%); }
.acv-a2 { background: radial-gradient(80% 90% at 20% 85%, #f062c8 0%, rgba(240, 98, 200, 0) 62%), linear-gradient(120deg, #2a4fd8 0%, #7a5fe8 55%, #e88fd8 100%); }
.acv-a3 { background: radial-gradient(75% 85% at 80% 80%, #f05fb8 0%, rgba(240, 95, 184, 0) 60%), linear-gradient(150deg, #0f5fa8 0%, #2f8fd0 55%, #62c8e8 100%); }
.acv-a4 { background: radial-gradient(70% 80% at 25% 20%, #bfe8dc 0%, rgba(191, 232, 220, 0) 65%), linear-gradient(140deg, #59c2b2 0%, #7fd4c6 55%, #a8e4da 100%); }
.acv-a5 { background: radial-gradient(75% 85% at 75% 25%, #cfe89f 0%, rgba(207, 232, 159, 0) 60%), linear-gradient(130deg, #4f9f5f 0%, #8fc86f 55%, #d8e8a8 100%); }
.acv-a6 { background: radial-gradient(80% 90% at 20% 20%, #f0d878 0%, rgba(240, 216, 120, 0) 60%), linear-gradient(150deg, #d8b83f 0%, #e8d078 55%, #f2e4a8 100%); }
.acv-a7 { background: radial-gradient(75% 85% at 78% 75%, #e89fc8 0%, rgba(232, 159, 200, 0) 60%), linear-gradient(160deg, #8f5fb8 0%, #b88fd0 55%, #e0c8e8 100%); }
.acv-a8 { background: radial-gradient(70% 80% at 20% 80%, #9f8fe8 0%, rgba(159, 143, 232, 0) 60%), linear-gradient(140deg, #5f6fd8 0%, #8f9fe8 55%, #c8d0f2 100%); }
.acv-a9 { background: radial-gradient(80% 90% at 75% 20%, #f0a878 0%, rgba(240, 168, 120, 0) 60%), linear-gradient(150deg, #d86f8f 0%, #e89fa8 55%, #f2ccc0 100%); }
.acv-a10 { background: radial-gradient(75% 90% at 30% 25%, #78d0f0 0%, rgba(120, 208, 240, 0) 62%), linear-gradient(140deg, #1f8fc8 0%, #4fb8e0 55%, #a8e0f2 100%); }
.acv-a11 { background: radial-gradient(80% 95% at 70% 75%, #f078c8 0%, rgba(240, 120, 200, 0) 60%), linear-gradient(120deg, #2fa8d8 0%, #5fc8e8 50%, #e88fd0 100%); }
@media (max-width: 1100px) { .acv-grid4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 980px) {
  .acv-grid3, .acv-grid2 { grid-template-columns: 1fr; }
  .acv-sec { padding-top: 84px; }
  .acv-row { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 640px) { .acv-grid4 { grid-template-columns: 1fr; } }

/* ===================== Use cases (mirrors learn.chatgpt.com) ===================== */
/* Measured live 2026-07-25: own "Learn" chrome (64px white nav, centered pill tabs active #ededed r8,
   Try pill black r9999 36h, search pill, theme toggle furniture); hero h1 88/500 -0.055em lh0.96,
   sub 18/32 #5d5d5d; container 1120; rows = 2-col 64px gap [accordion left | gradient mock right];
   accordion items 18/500 with +/- + hairlines, first open; card band full-bleed #f9f9f9 pad 96,
   3-col 16px-gap cards = illustration + 16/500 title + 14 desc + small tag pills. */
.uc-page { background: #fff; font-size: 16px; }
.uc-wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
.uc-top { position: sticky; top: 0; z-index: 60; height: 64px; background: #fff; border-bottom: 1px solid rgba(13, 13, 13, 0.06); display: flex; align-items: center; padding: 0 24px; }
.uc-brand { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.uc-nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 4px; }
.uc-nav a { font-size: 14px; font-weight: 400; color: var(--ink); padding: 4px 10px; border-radius: 8px; letter-spacing: -0.14px; line-height: 1.45; }
.uc-nav a.on { background: #ededed; color: #282828; }
.uc-nav a:not(.on):hover { background: #f4f4f5; }
.uc-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.uc-search { display: flex; align-items: center; gap: 10px; width: 196px; height: 40px; border: 1px solid rgba(13, 13, 13, 0.14); border-radius: 999px; background: #fff; padding: 0 15px; color: var(--meta); font-size: 14px; }
.uc-search span { flex: 1; }
.uc-search svg { width: 15px; height: 15px; flex: 0 0 15px; }
.uc-try { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 17px; border-radius: 999px; background: #0d0d0d; color: #fff; font-size: 14px; font-weight: 500; white-space: nowrap; }
.uc-try svg { width: 9px; height: 9px; }
.uc-toggle { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; color: var(--meta); }
.uc-toggle svg { width: 18px; height: 18px; }

.uc-hero { text-align: center; padding: 120px 0 96px; }
.uc-h1 { font-size: clamp(52px, 6.1vw, 88px); font-weight: 500; line-height: 0.96; letter-spacing: -0.055em; margin: 0; }
.uc-sub { font-size: 18px; line-height: 1.78; color: var(--meta); max-width: 620px; margin: 26px auto 0; }
.uc-hero-cta { display: flex; gap: 12px; justify-content: center; margin-top: 36px; }
.uc-pill { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px; background: #f0f0f1; font-size: 16px; font-weight: 500; color: var(--ink); }
.uc-pill.dim { color: var(--meta); }
.uc-pill svg { width: 15px; height: 12px; }

.uc-mock { border-radius: 22px; aspect-ratio: 7 / 5; position: relative; overflow: hidden; box-shadow: 0 30px 70px rgba(30, 45, 90, 0.14); }
.uc-mock.sky { background: linear-gradient(150deg, #7fa8e8 0%, #a8c8f0 45%, #cfe0f5 100%); }
.uc-mock.grape { background: linear-gradient(150deg, #6f7fe0 0%, #9f8fe8 50%, #c8b8f0 100%); }
.uc-mock.dawn { background: linear-gradient(150deg, #6f9fe0 0%, #8f9fe8 45%, #e8b0c8 100%); }
.uc-appcard { position: absolute; left: 8%; right: 8%; top: 12%; bottom: 12%; background: #fff; border-radius: 14px; box-shadow: 0 18px 46px rgba(20, 40, 80, 0.18); display: grid; grid-template-columns: 92px 1fr; overflow: hidden; }
.uc-appcard .ac-side { background: #f5f5f7; border-right: 1px solid rgba(13,13,13,0.06); padding: 12px 10px; display: flex; flex-direction: column; gap: 9px; }
.uc-appcard .ac-side i { display: block; height: 8px; border-radius: 4px; background: rgba(13,13,13,0.1); }
.uc-appcard .ac-side i.t { width: 60%; background: rgba(13,13,13,0.18); margin-bottom: 4px; }
.uc-appcard .ac-main { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.uc-appcard .ac-main i { display: block; height: 9px; border-radius: 5px; background: rgba(13,13,13,0.09); }
.uc-appcard .ac-main i.b { background: #b9d4f5; }
.uc-appcard .ac-q { margin-top: auto; height: 40px; border-radius: 10px; background: #f2f2f4; }

.uc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 80px 0; }
.uc-row.rev .uc-col-text { order: 2; }
.uc-h2 { font-size: clamp(34px, 3.34vw, 48px); font-weight: 500; line-height: 1.04; letter-spacing: -0.03em; margin: 0; }
.uc-row .uc-lead { font-size: 18px; line-height: 1.6; color: var(--meta); margin: 22px 0 8px; max-width: 460px; }
.uc-acc { margin-top: 18px; }
.uc-item { border-top: 1px solid var(--border); padding: 4px 0; }
.uc-item:last-child { border-bottom: 1px solid var(--border); }
.uc-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; font-size: 18px; font-weight: 500; color: var(--ink); }
.uc-item summary::-webkit-details-marker { display: none; }
.uc-item .uc-pm { position: relative; width: 16px; height: 16px; flex: 0 0 16px; }
.uc-item .uc-pm::before, .uc-item .uc-pm::after { content: ""; position: absolute; background: #5d5d5d; }
.uc-item .uc-pm::before { left: 0; top: 7px; width: 16px; height: 2px; }
.uc-item .uc-pm::after { left: 7px; top: 0; width: 2px; height: 16px; transition: transform 0.2s ease; }
.uc-item[open] .uc-pm::after { transform: scaleY(0); }
.uc-item p { font-size: 15px; line-height: 1.6; color: var(--meta); margin: 0 0 20px; max-width: 420px; }

.uc-band { background: #f9f9f9; margin-top: 40px; padding: 96px 0; }
.uc-band .uc-h2 { text-align: center; }
.uc-band .uc-lead { font-size: 18px; line-height: 1.6; color: var(--meta); text-align: center; max-width: 560px; margin: 20px auto 0; }
.uc-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
.uc-card { display: flex; flex-direction: column; }
.uc-card-art { border-radius: 12px; height: 200px; }
.uc-card h3 { font-size: 16px; font-weight: 500; margin: 18px 0 6px; }
.uc-card p { font-size: 14px; line-height: 1.55; color: var(--meta); margin: 0 0 14px; }
.uc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.uc-tags span { font-size: 12.5px; color: #454545; background: #efeff0; border-radius: 999px; padding: 5px 12px; }
.art-uc-a { background: linear-gradient(135deg, #cfe0f5 0%, #9fbdec 55%, #7fa8e8 100%); }
.art-uc-b { background: linear-gradient(140deg, #e8c8d8 0%, #c8a8e0 55%, #9f8fe8 100%); }
.art-uc-c { background: linear-gradient(150deg, #bfe4dc 0%, #8fd0c8 55%, #6fb8d8 100%); }
.art-uc-d { background: linear-gradient(130deg, #f0d8b0 0%, #e8b898 55%, #d89f8f 100%); }
.art-uc-e { background: linear-gradient(160deg, #b0d8f0 0%, #8fb8e8 55%, #a8a0e8 100%); }
.art-uc-f { background: linear-gradient(140deg, #d0e8b0 0%, #a8d890 55%, #7fc0a0 100%); }

.uc-new { padding: 96px 0 40px; }
.uc-new .uc-h2 { text-align: center; }
.uc-new-card { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; margin-top: 48px; background: #f9f9f9; border-radius: 18px; padding: 44px; }
.uc-new-card h3 { font-size: 22px; font-weight: 500; margin: 0 0 12px; }
.uc-new-card p { font-size: 16px; line-height: 1.6; color: var(--meta); margin: 0 0 22px; }
.uc-new-art { border-radius: 14px; aspect-ratio: 16 / 10; background: linear-gradient(140deg, #8fb0e8 0%, #b0c8f0 55%, #d8e4f6 100%); }

.uc-foot { border-top: 1px solid var(--border); margin-top: 80px; padding: 56px 0 72px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.uc-foot .fcol p { font-size: 13px; font-weight: 600; color: var(--meta); margin: 0 0 14px; }
.uc-foot .fcol a { display: block; font-size: 14px; color: #282828; padding: 5px 0; }
.uc-foot .fcol a:hover { color: var(--ink); }
.uc-foot .fbrand { display: inline-flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 600; }
.uc-foot .fbrand .uc-mark { width: 24px; height: 24px; border-radius: 50%; background: #0d0d0d; }
@media (max-width: 900px) {
  .uc-nav { display: none; }
  .uc-row { grid-template-columns: 1fr; gap: 32px; padding: 56px 0; }
  .uc-row.rev .uc-col-text { order: 0; }
  .uc-grid3 { grid-template-columns: 1fr; }
  .uc-foot { grid-template-columns: 1fr 1fr; }
  .uc-new-card { grid-template-columns: 1fr; }
  .uc-search { width: 44px; }
  .uc-search span { display: none; }
}

/* ===================== About us (mirrors openai.com/about) ===================== */
.ab-hero { text-align: center; padding: 64px 0 0; }
.ab-eyebrow { font-size: 14px; font-weight: 500; line-height: 19.6px; color: var(--ink); margin: 0 0 30px; }
.ab-h1 { font-size: clamp(40px, 4.45vw, 64px); font-weight: 500; letter-spacing: -0.03em; line-height: 64px; margin: 0; }
.ab-lead { font-size: 17px; line-height: 28px; letter-spacing: -0.01em; color: var(--ink); max-width: 600px; margin: 24px auto 0; text-wrap: balance; }
.ab-split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.ab-split h2, .ab-split p { letter-spacing: -0.01em; }
.ab-split.rev { grid-template-columns: 1fr 1fr; }
.ab-split.rev .ab-text { order: 2; }
.ab-text h2 { font-size: 30px; font-weight: 500; letter-spacing: -0.02em; line-height: 39.6px; margin: 0 0 24px; }
.ab-text { padding: 32px calc((100% - 120px) / 6 + 24px); }


.ab-text p { font-size: 17px; line-height: 28px; color: var(--ink); margin: 0 0 30px; }
.ab-cta { display: flex; align-items: center; gap: 16px; }
.ab-figure { margin: 0; }
.ab-media { border-radius: 8px; aspect-ratio: 1 / 1; }
img.ab-media { display: block; width: 100%; height: auto; object-fit: cover; }
.ab-cap { font-size: 14px; line-height: 22.96px; color: var(--ink); margin-top: 14px; }
.ab-quote { text-align: center; font-size: 30px; font-weight: 500; letter-spacing: -0.01em; line-height: 39.6px; max-width: 899px; margin: 0 auto; padding: 60px 0 100px; text-wrap: balance; }
.ab-band { border-radius: 16px; aspect-ratio: 21 / 8; }
.ab-center { text-align: center; padding: 108px 0 60px; }
.ab-center h2 { font-size: 30px; font-weight: 500; letter-spacing: -0.02em; line-height: 39.6px; margin: 0 0 24px; }
.ab-center p { font-size: 17px; line-height: 28px; color: var(--meta); max-width: 899px; margin: 0 auto 30px; }
.art-ab-1 { background: linear-gradient(150deg, #8fd0e8 0%, #c8e0b0 30%, #f0d890 60%, #e8a0b0 100%); }
.art-ab-2 { background: linear-gradient(135deg, #6fa8e0 0%, #8fd0c8 45%, #e8d090 100%); }
.art-ab-3 { background: linear-gradient(160deg, #cfe4f5 0%, #a8c8e8 50%, #8f9fd8 100%); }
.art-ab-band { background: linear-gradient(115deg, #e8c8a0 0%, #d8b0c0 40%, #a8b8e0 75%, #8fc8d8 100%); }
@media (max-width: 900px) {
  .ab-split { grid-template-columns: 1fr; gap: 32px; padding: 64px 0; }
  .ab-split.rev .ab-text { order: 0; }
}

/* ===================== Public policy (site prose page) ===================== */
/* measured on openai.com/policies + /about: h1 64/500 ls-1.92 centred,
   eyebrow 14/500, lead 17/28 max 592, body measure 669, h2 30/500 lh39.6 ls-0.3 */
.pol-hero { text-align: center; padding: 44px 0 64px; }
.pol-eyebrow { font-size: 14px; font-weight: 500; color: var(--meta); margin: 0 0 24px; }
.pol-h1 { font-size: clamp(34px, 4.45vw, 64px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.0; margin: 0; }
.pol-lead { font-size: 17px; line-height: 28px; letter-spacing: -0.01em; max-width: 592px; margin: 26px auto 0; }
.pol-body { max-width: 669px; margin: 0 auto; padding: 40px 0 120px; font-size: 17px; line-height: 28px; }
.pol-body h2 { font-size: 30px; font-weight: 500; letter-spacing: -0.01em; line-height: 39.6px; margin: 56px 0 20px; }
.pol-body h2:first-child { margin-top: 0; }
.pol-body p { margin: 0 0 18px; color: var(--ink); }
.pol-body ul { list-style: disc; padding-left: 22px; margin: 0 0 18px; }
.pol-body li { margin: 8px 0; }
.pol-body a.link-arrow { margin-top: 8px; }
.pol-contact { border: 1px solid var(--border); border-radius: 12px; padding: 30px 32px; margin-top: 44px; }
.pol-contact h3 { font-size: 20px; font-weight: 500; margin: 0 0 8px; }
.pol-contact p { font-size: 15px; color: var(--meta); margin: 0; }

/* ===================== Docs (mirrors learn.chatgpt.com/docs) ===================== */
.doc-subnav { position: sticky; top: 64px; z-index: 50; height: 48px; background: #f7f7f7; border-bottom: 0; display: flex; justify-content: center; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.doc-subnav::-webkit-scrollbar { display: none; }
.doc-tabs { display: flex; align-items: stretch; gap: 8px; white-space: nowrap; }
.doc-tabs button { font-size: 14px; font-weight: 500; color: var(--meta); padding: 0 8px; border-bottom: 2px solid transparent; }
.doc-tabs button.on { color: #282828; border-bottom-color: var(--ink); }
.doc-tabs button:not(.on):hover { color: var(--ink); }
.doc-tabs a { font-size: 14px; font-weight: 500; color: var(--meta); padding: 0 8px; border-bottom: 2px solid transparent; display: flex; align-items: center; text-decoration: none; }
.doc-tabs a.on { color: #282828; border-bottom-color: var(--ink); }
.doc-tabs a:not(.on):hover { color: var(--ink); }
.doc-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 40px; max-width: none; margin: 0; padding: 0 32px; }
.doc-side { position: sticky; top: 112px; align-self: start; max-height: calc(100vh - 130px); overflow-y: auto; scrollbar-width: none; padding: 30px 0 40px; }
.doc-side::-webkit-scrollbar { display: none; }
.doc-side .doc-home { display: block; background: #f2f2f3; border-radius: 8px; padding: 8px 12px; font-size: 14px; font-weight: 500; color: #282828; margin-bottom: 22px; }
.doc-group { margin-bottom: 26px; }
.doc-group p { font-size: 12px; font-weight: 400; color: var(--meta); margin: 0 0 8px; padding-left: 10px; }
.doc-group a { display: block; font-size: 14px; color: #3c3c44; line-height: 1.35; padding: 7px 10px; border-radius: 8px; }
.doc-group a:hover { background: #f2f2f3; color: #0d0d0d; }
.doc-group a.on { background: #ececed; color: #0d0d0d; font-weight: 500; }
.doc-main { padding: 40px 0 96px; min-width: 0; }
.doc-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 48px; align-items: center; }
.doc-hero-t h1 { font-size: clamp(44px, 4.6vw, 64px); font-weight: 500; letter-spacing: -0.04em; line-height: 0.98; margin: 0 0 24px; }
.doc-hero-t p { font-size: 18px; line-height: 1.62; color: var(--meta); max-width: 420px; margin: 0 0 30px; }
.doc-hero-cta { display: flex; align-items: center; gap: 18px; }
.doc-pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; background: #0d0d0d; color: #fff; font-size: 14px; font-weight: 500; }
.doc-pill svg { width: 13px; height: 10px; }
.doc-mock { border-radius: 18px; aspect-ratio: 1 / 1; }
.doc-h2 { font-size: clamp(34px, 3.5vw, 48px); font-weight: 500; letter-spacing: -0.03em; margin: 96px 0 0; }
.doc-intro { font-size: 18px; line-height: 1.6; color: var(--meta); max-width: 640px; margin: 16px 0 0; }
.doc-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 40px; }
.doc-card { border: 1px solid var(--border); border-radius: 12px; padding: 24px 26px; display: block; }
.doc-card:hover { background: #fafafa; }
.doc-card h3 { font-size: 18px; font-weight: 500; margin: 0 0 8px; display: flex; align-items: center; gap: 7px; }
.doc-card h3 svg { width: 11px; height: 11px; }
.doc-card p { font-size: 15px; line-height: 1.55; color: var(--meta); margin: 0; }
.doc-new { margin-top: 56px; }
.doc-new-row { display: grid; grid-template-columns: 150px 1fr; gap: 32px; padding: 28px 0; border-top: 1px solid var(--border); }
.doc-new-row .date { font-size: 14px; color: var(--meta); }
.doc-new-row h3 { font-size: 18px; font-weight: 500; margin: 0 0 8px; }
.doc-new-row p { font-size: 15px; line-height: 1.55; color: var(--meta); margin: 0; }
@media (max-width: 1000px) {
  .doc-subnav { justify-content: flex-start; }
  .doc-tabs { padding: 0 16px; }
  .doc-shell { grid-template-columns: 1fr; gap: 0; }
  .doc-side { display: none; }
  .doc-hero { grid-template-columns: 1fr; }
  .doc-cards { grid-template-columns: 1fr; }
  .doc-new-row { grid-template-columns: 1fr; gap: 6px; }
}

/* --- Docs content pages (sidebar | content | right TOC) --- */
.doc-shell.d3 { grid-template-columns: 248px minmax(0, 1fr) 216px; gap: 40px; max-width: none; }
.doc-doc { padding: 48px 0 100px; min-width: 0; max-width: 768px; }
.doc-doc h1 { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 10px; }
.doc-doc .lead { font-size: 18px; line-height: 1.55; color: var(--meta); margin: 0 0 32px; }
.doc-doc h2 { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; margin: 44px 0 14px; scroll-margin-top: 130px; }
.doc-doc p { font-size: 16px; line-height: 1.65; color: var(--ink); margin: 0 0 16px; }
.doc-doc ul { margin: 0 0 16px; padding-left: 22px; }
.doc-doc li { font-size: 16px; line-height: 1.6; margin: 7px 0; }
.doc-doc a.inline { text-decoration: underline; text-underline-offset: 3px; }
.doc-note { border: 1px solid var(--border); border-radius: 12px; padding: 22px 24px; margin: 24px 0; }
.doc-note h3 { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
.doc-note p { font-size: 15px; color: var(--meta); margin: 0; }
.doc-figure { border-radius: 12px; aspect-ratio: 16 / 8; margin: 24px 0; }
.doc-toc { position: sticky; top: 130px; align-self: start; padding: 52px 0 40px; font-size: 14px; }
.doc-toc a { display: block; color: var(--meta); line-height: 1.4; padding: 6px 0 6px 12px; border-left: 2px solid transparent; }
.doc-toc a:hover { color: var(--ink); }
.doc-toc a.on { color: var(--ink); border-left-color: var(--ink); }
@media (max-width: 1100px) { .doc-shell.d3 { grid-template-columns: 200px minmax(0,1fr); } .doc-toc { display: none; } }
@media (max-width: 1000px) { .doc-shell.d3 { grid-template-columns: 1fr; } }

/* --- Docs rich components --- */
.doc-steps { list-style: none; margin: 6px 0 22px; padding: 0; }
.doc-steps li { display: grid; grid-template-columns: 28px 1fr; gap: 16px; align-items: start; margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: var(--ink); }
.doc-steps li .n { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; font-size: 13px; color: var(--meta); }
.doc-table { width: 100%; border-collapse: collapse; margin: 10px 0 24px; font-size: 15px; }
.doc-table th { text-align: left; font-weight: 500; color: var(--meta); font-size: 13px; padding: 0 20px 12px 0; border-bottom: 1px solid var(--border); }
.doc-table td { padding: 16px 20px 16px 0; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.5; color: var(--ink); }
.doc-table td:last-child, .doc-table th:last-child { padding-right: 0; }
.doc-table .term { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.doc-filter { display: flex; align-items: center; gap: 10px; width: 100%; height: 46px; border: 1px solid var(--border); border-radius: 10px; padding: 0 14px; color: var(--meta); margin: 6px 0 8px; }
.doc-filter svg { width: 16px; height: 16px; flex: 0 0 16px; }
.doc-filter input { border: 0; outline: 0; background: none; font: inherit; font-size: 15px; width: 100%; color: var(--ink); }
.doc-note-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.doc-note-row div { min-width: 0; }
.doc-note-row .pill { flex: 0 0 auto; }
.doc-seg { display: inline-flex; background: #f0f0f1; border-radius: 999px; padding: 4px; gap: 4px; margin: 6px 0 14px; }
.doc-seg span { padding: 7px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--meta); }
.doc-seg span.on { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.doc-code { background: #f6f6f7; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin: 6px 0 24px; }
.doc-code .h { font-size: 13px; color: var(--meta); padding: 12px 16px; border-bottom: 1px solid var(--border); }
.doc-code pre { margin: 0; padding: 14px 16px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; color: var(--ink); overflow-x: auto; }

/* --- Docs Quickstart: choice cards, illustrations, download pill, switcher mock --- */
.qs-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0 24px; }
.qs-card { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.qs-art { height: 210px; position: relative; overflow: hidden; background: linear-gradient(155deg, #b39df5 0%, #8f74ec 52%, #7c5fe0 100%); display: grid; place-items: center; }
.qs-win { width: 62%; height: 62%; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.32); border-radius: 14px; display: grid; place-items: center; }
.qs-win .mark { width: 56px; height: 56px; border-radius: 16px; background: rgba(255,255,255,0.92); display: grid; place-items: center; color: #7c5fe0; font-weight: 600; font-size: 24px; }
.qs-browser { position: absolute; left: 12%; right: 12%; top: 20%; bottom: -20%; background: rgba(255,255,255,0.92); border-radius: 12px 12px 0 0; box-shadow: 0 14px 34px rgba(40,20,90,0.22); }
.qs-browser .bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid rgba(0,0,0,0.06); }
.qs-browser .bar i { width: 8px; height: 8px; border-radius: 50%; background: #e2e2e6; }
.qs-browser .url { margin-left: 10px; height: 22px; flex: 1; background: #f0f0f3; border-radius: 6px; }
.qs-body { padding: 20px 22px 22px; }
.qs-body h3 { font-size: 18px; font-weight: 500; margin: 0 0 6px; }
.qs-body p { font-size: 15px; color: var(--meta); line-height: 1.5; margin: 0 0 14px; }
.qs-tag { display: inline-block; font-size: 12.5px; color: #454545; background: #efeff0; border-radius: 999px; padding: 5px 12px; }
.qs-dl { display: inline-flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px 0 18px; border-radius: 999px; background: #0d0d0d; color: #fff; font-size: 14px; font-weight: 500; margin: 8px 0 2px; }
.qs-dl svg { width: 12px; height: 8px; }
.doc-steps li b { font-weight: 600; }
.doc-steps li .sbody { margin-top: 6px; color: var(--ink); }
.doc-steps li ul { margin: 8px 0 0; padding-left: 20px; }
.doc-steps li ul li { display: list-item; margin: 6px 0; }
.qs-step4 { display: grid; grid-template-columns: minmax(0,1fr) 288px; gap: 28px; align-items: start; margin-top: 8px; }
.qs-menu { border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 42px rgba(30,30,60,0.14); background: #fff; overflow: hidden; }
.qs-menu .top { display: flex; align-items: center; gap: 7px; padding: 13px 14px 4px; }
.qs-menu .top i { width: 9px; height: 9px; border-radius: 50%; }
.qs-menu .sw { font-size: 14px; font-weight: 600; padding: 8px 14px 12px; }
.qs-menu .opt { padding: 12px 14px; border-top: 1px solid var(--border); }
.qs-menu .opt.sel { background: #f6f6f7; }
.qs-menu .opt b { display: block; font-size: 14px; font-weight: 600; }
.qs-menu .opt span { font-size: 13px; color: var(--meta); }
@media (max-width: 1100px) { .qs-choice { grid-template-columns: 1fr; } .qs-step4 { grid-template-columns: 1fr; } }

/* --- Quickstart: interactive setup panels + prompt composer --- */
.doc-seg span { cursor: pointer; }
.qs-composer { border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px 12px; margin-top: 12px; max-width: 580px; }
.qs-composer .text { font-size: 15px; line-height: 1.55; color: var(--ink); }
.qs-composer .cbar { display: flex; align-items: center; gap: 10px; margin-top: 16px; color: var(--meta); font-size: 13px; }
.qs-composer .cbar .plus { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; font-size: 15px; color: var(--meta); }
.qs-composer .cbar .model { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }
.qs-composer .cbar .model svg { width: 9px; height: 6px; }
.qs-composer .cbar .qs-send { width: 30px; height: 30px; border-radius: 50%; background: #0d0d0d; color: #fff; display: grid; place-items: center; flex: none; }
.qs-composer .cbar .qs-send svg { width: 13px; height: 13px; }
.qs-more { color: var(--meta); font-size: 15px; margin-top: 18px; }
.qs-next { margin-top: 8px; }
.qs-next a { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; text-decoration: none; color: inherit; border-top: 1px solid var(--border); }
.qs-next a:first-child { border-top: 0; }
.qs-next .ic { width: 24px; height: 24px; flex: none; color: var(--ink); margin-top: 1px; }
.qs-next b { display: block; font-weight: 600; font-size: 15px; color: var(--ink); }
.qs-next em { display: block; font-style: normal; color: var(--meta); font-size: 14px; margin-top: 3px; line-height: 1.5; }

/* ============================================================
   Doc detail templates — mirror learn.chatgpt.com /docs/app,
   /docs/get-started-with-work, /docs/permission-modes
   Media boxes are placeholders (real screenshots/videos swap
   in later via the .dm-shot/.dm-video/.dm-gallery ids).
   ============================================================ */
.doc-doc.dm-wide { max-width: 900px; margin: 0 auto; }

/* --- Showcase hero (Available on: Web, iPhone) --- */
.dm-hero { text-align: center; max-width: 720px; margin: 0 auto; padding: 4px 0 0; }
.dm-kicker { color: var(--meta); font-size: 15px; margin: 0 0 14px; }
.dm-hero h1 { font-size: 44px; line-height: 1.08; letter-spacing: -0.021em; font-weight: 600; margin: 0; }
.dm-hero .lead { font-size: 18px; line-height: 1.5; color: var(--meta); margin: 18px auto 0; max-width: 560px; }
.dm-cta { display: flex; gap: 12px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
.dm-btn { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 22px; border-radius: 999px; background: #0d0d0d; color: #fff; font-size: 15px; font-weight: 500; }
.dm-btn svg { width: 13px; height: 13px; }
.dm-btn.ghost { background: #fff; color: #0d0d0d; border: 1px solid var(--border); }

/* media placeholders */
.dm-shot { border-radius: 16px; border: 1px solid var(--border); background: linear-gradient(135deg,#efeafc,#e7edfb 55%,#f3eefb); aspect-ratio: 16/10; overflow: hidden; }
.dm-shot .ph, .dm-video .ph, .dm-gallery .th .ph { width:100%; height:100%; display:grid; place-items:center; }
.dm-shot .ph svg { width: 44px; height: 44px; color:#a99fe0; opacity:.6; }
.dm-gallery .th .ph svg { width: 26px; height: 26px; color:#bcb2e8; opacity:.7; }
.dm-hero-shot { margin: 44px 0 0; aspect-ratio: 16/9; }

/* 3-col feature grid */
.dm-feats { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; margin: 60px 0 8px; }
.dm-feats .f .no { color:var(--meta); font-size:13px; font-variant-numeric: tabular-nums; }
.dm-feats .f h3 { font-size: 17px; font-weight:600; margin: 12px 0 6px; }
.dm-feats .f p { color: var(--meta); font-size:15px; line-height:1.5; margin:0; }

/* numbered showcase (text | media), alternating */
.dm-show { margin-top: 12px; display: grid; gap: 44px; }
.dm-show .row { display: grid; grid-template-columns: minmax(0,0.72fr) minmax(0,1fr); gap: 40px; align-items: center; }
.dm-show .row.rev .txt { order: 2; }
.dm-show .no { color:var(--meta); font-size:13px; font-variant-numeric: tabular-nums; }
.dm-show h3 { font-size: 20px; font-weight:600; margin: 10px 0 8px; letter-spacing:-0.01em; }
.dm-show p { color: var(--meta); font-size:15px; line-height:1.55; margin:0; }
.dm-show .dm-shot { aspect-ratio: 16/10; }

/* use-when list */
.dm-when { margin-top: 8px; }
.dm-when .w { display: grid; grid-template-columns: minmax(0,0.4fr) minmax(0,0.6fr); gap: 24px; padding: 22px 0; border-top: 1px solid var(--border); }
.dm-when .w b { font-weight:600; font-size:16px; }
.dm-when .w p { color: var(--meta); font-size:15px; line-height:1.5; margin:0; }

/* video + gradient banner (Business / Work) */
.dm-video { border-radius: 14px; background:#111; aspect-ratio: 16/9; margin: 6px 0 4px; position:relative; overflow:hidden; }
.dm-video .play { position:absolute; inset:0; margin:auto; width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,0.16); display:grid; place-items:center; }
.dm-video .play svg { width:20px; height:20px; color:#fff; margin-left:2px; }
.dm-video .ctrl { position:absolute; left:0; right:0; bottom:0; height:40px; display:flex; align-items:center; gap:14px; padding:0 16px; color:rgba(255,255,255,0.82); font-size:12px; background:linear-gradient(transparent,rgba(0,0,0,0.4)); }
.dm-video .ctrl .sp { flex:1; }
.dm-video .ctrl svg { width:14px; height:14px; }
.dm-band { border-radius: 14px; aspect-ratio: 100/26; background: linear-gradient(90deg,#2b6df6,#7b57e6 55%,#b06ee0); margin: 6px 0 4px; }

/* image gallery (row of thumbs) */
.dm-gallery { display:grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin: 14px 0 4px; }
.dm-gallery .th { border-radius:10px; border:1px solid var(--border); background:linear-gradient(135deg,#f0ecfb,#eaf0fb); aspect-ratio: 4/3; }

/* --- Permissions mode selector (mirror /docs/permission-modes) --- */
.pm-stage { position: relative; margin: 30px 0 10px; max-width: 640px; padding-top: 132px; }
.pm-menu { position:absolute; top:0; left:22px; z-index:2; width:290px; background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 14px 44px rgba(0,0,0,0.13); padding:8px; }
.pm-menu button { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:11px 12px; border-radius:9px; font-size:15px; color: var(--ink); background:none; cursor:pointer; }
.pm-menu button:hover { background:var(--fill); }
.pm-menu button .ic { width:18px; height:18px; color: var(--meta); flex:none; }
.pm-menu button .ck { margin-left:auto; width:15px; height:15px; opacity:0; }
.pm-menu button.on .ck { opacity:1; }
.pm-composer { border:1px solid var(--border); border-radius:14px; padding:20px 18px 12px; margin-top:0; }
.pm-composer .ph { color:var(--meta); font-size:15px; }
.pm-composer .bar { display:flex; align-items:center; gap:12px; margin-top:20px; color:var(--meta); font-size:13px; }
.pm-composer .bar .plus { width:26px;height:26px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center; }
.pm-composer .bar .mode { display:inline-flex; align-items:center; gap:7px; }
.pm-composer .bar .mode svg { width:13px;height:13px; }
.pm-composer .bar .sp { flex:1; }
.pm-composer .bar > svg { width:18px; height:18px; flex:none; color:var(--meta); }
.pm-composer .bar .send2 { width:30px;height:30px;border-radius:50%;background:var(--fill);display:grid;place-items:center;color:var(--meta); flex:none; }
.pm-composer .bar .send2 svg { width:14px; height:14px; }
.pm-detail { border:1px solid var(--border); border-radius:14px; padding:20px 22px; margin-top:16px; }
.pm-detail h4 { display:flex; align-items:center; gap:10px; font-size:16px; font-weight:600; margin:0 0 8px; }
.pm-detail h4 svg { width:17px; height:17px; color: var(--meta); }
.pm-detail p { color: var(--meta); font-size:15px; line-height:1.55; margin:0; }

/* ============ Models (mirror /docs/models) ============ */
.md-sel { border:1px solid var(--border); border-radius:14px; padding:14px 16px; max-width:340px; margin:18px 0 6px; }
.md-sel .top { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color: var(--ink); }
.md-sel .top .spark { color:#7b57e6; }
.md-sel .top .eff { color:var(--meta); font-weight:400; margin-left:2px; }
.md-sel .top svg { width:10px; height:6px; margin-left:auto; color:var(--meta); }
.md-sel .track { height:22px; border-radius:999px; background:linear-gradient(90deg,#2b6df6,#7b57e6); margin:14px 0 6px; position:relative; }
.md-sel .track:after { content:''; position:absolute; right:3px; top:3px; width:16px; height:16px; border-radius:50%; background:#fff; }
.md-sel .adv { display:flex; align-items:center; gap:6px; font-size:13px; color: var(--meta); }
.md-sel .adv .s { margin-left:auto; color:#7b57e6; }
.md-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:18px 0 8px; }
.md-card { border:1px solid var(--border); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; }
.md-card .art { aspect-ratio:16/6.4; display:flex; align-items:flex-end; padding:14px 16px; color:#fff; font-weight:600; font-size:16px; }
.md-card .art.horizon { background:radial-gradient(120% 140% at 20% 20%,#e0396b,#7d1f52 55%,#2b1140); }
.md-card .art.ruby { background:radial-gradient(120% 140% at 25% 25%,#ff5a6a,#c81e3a 60%,#7a0f22); }
.md-card .art.voice { background:radial-gradient(120% 140% at 25% 20%,#ffb36b,#f0568c 55%,#8a2b6b); }
.md-card .art.one { background:radial-gradient(120% 140% at 25% 25%,#5a6473,#2c333f 60%,#151a22); }
.md-card .body { padding:14px 16px 4px; flex:1; }
.md-card .body p { font-size:14px; color: var(--meta); line-height:1.5; margin:0; }
.md-card .rate { display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--meta); padding:11px 16px; border-top:1px solid var(--border); margin-top:12px; }
.md-card .rate:nth-of-type(2){ margin-top:0; }
.md-card .dots { display:inline-flex; gap:3px; color:#c9a3e6; }
.md-card .dots svg { width:12px; height:12px; }
.md-card .dots .off { color:#e6e6e8; }

/* ============ Pricing (mirror /docs/pricing) ============ */
.pr-note { display:flex; gap:10px; align-items:flex-start; border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin:14px 0 6px; font-size:14px; color: var(--meta); }
.pr-note svg { width:16px; height:16px; flex:none; margin-top:1px; color:var(--meta); }
/* .prc-*, not .pr-*: "pr" was already the pillar/protection namespace (line 623),
   and these pricing rules come later in the file, so they were silently winning
   and collapsing trust.html's 3+2 Protection grid to 2 columns. */
.prc-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin:18px 0 8px; }
.prc-card { border:1px solid var(--border); border-radius:16px; padding:22px 24px; display:flex; flex-direction:column; }
.prc-card h3 { font-size:20px; font-weight:600; margin:0 0 4px; }
.prc-card .desc { color: var(--meta); font-size:14px; line-height:1.5; margin:0 0 16px; }
.pr-price { font-size:30px; font-weight:600; letter-spacing:-0.01em; }
.pr-price .per { font-size:14px; color:var(--meta); font-weight:400; letter-spacing:0; }
.pr-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 18px; border-radius:999px; background:#0d0d0d; color:#fff; font-size:14px; font-weight:500; margin:16px 0 4px; align-self:flex-start; }
.pr-btn svg { width:12px; height:12px; }
.pr-btn.ghost { background:#fff; color:#0d0d0d; border:1px solid var(--border); }
.pr-feats { list-style:none; padding:0; margin:10px 0 0; }
.pr-feats li { padding:9px 0 9px 26px; position:relative; font-size:14px; color: var(--meta); line-height:1.5; border-top:1px solid var(--border); }
.pr-feats li:first-child { border-top:0; }
.pr-feats li:before { content:''; position:absolute; left:0; top:13px; width:14px; height:8px; border-left:1.6px solid #0d0d0d; border-bottom:1.6px solid #0d0d0d; transform:rotate(-45deg); }
.pr-plan[hidden]{ display:none; }

/* ============ Features section (mirror /docs/features) ============ */
.ft-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:48px; align-items:center; margin-top:6px; }
.ft-hero h1 { font-size:52px; line-height:1.05; letter-spacing:-0.022em; font-weight:600; margin:0; }
.ft-hero .lead { font-size:18px; line-height:1.5; color: var(--meta); margin:18px 0 24px; }
.ft-hero .mock { border-radius:16px; aspect-ratio:16/11; background:linear-gradient(150deg,#8a7bf0,#6d5ae0 45%,#4536c4); box-shadow:0 20px 60px rgba(80,60,200,0.18); }
.ft-cta { display:inline-flex; align-items:center; gap:9px; height:46px; padding:0 22px; border-radius:999px; background:#0d0d0d; color:#fff; font-size:15px; font-weight:500; }
.ft-cta svg { width:14px; height:12px; }
.ft-intro { font-size:18px; line-height:1.6; color: var(--meta); margin:56px 0 28px; max-width:760px; }
.ft-cat { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.ft-cat a { border:1px solid var(--border); border-radius:16px; padding:22px; text-decoration:none; color:inherit; display:block; transition:background .15s; }
.ft-cat a:hover { background:var(--fill); }
.ft-cat .ic { width:42px; height:42px; border-radius:11px; background:var(--fill); display:grid; place-items:center; margin-bottom:16px; color: var(--ink); }
.ft-cat .ic svg { width:20px; height:20px; }
.ft-cat h3 { font-size:17px; font-weight:600; margin:0 0 6px; }
.ft-cat p { font-size:14px; color: var(--meta); line-height:1.5; margin:0; }
@media (max-width:900px){ .ft-hero{grid-template-columns:1fr;gap:28px} .ft-hero h1{font-size:40px} .ft-cat{grid-template-columns:1fr} }

/* ============ Feature-page mock (skeleton placeholder — swap in real screenshots) ============ */
.feat-mock { border-radius:16px; aspect-ratio:2.15/1; margin:28px 0 8px; display:grid; place-items:center; overflow:hidden; border:1px solid var(--border); }
.feat-mock.g1 { background:linear-gradient(140deg,#aecbff,#6d8ff0 52%,#4536c4); }
.feat-mock.g2 { background:linear-gradient(140deg,#c9b6f7,#8a6fe8 52%,#5a2ea6); }
.feat-mock.g3 { background:linear-gradient(140deg,#a7e4d8,#4bb9c9 52%,#2b6ea6); }
.feat-mock.g4 { background:linear-gradient(140deg,#ffd0a6,#f2907e 52%,#c14d8a); }
.feat-mock .panel { width:54%; max-width:420px; background:rgba(255,255,255,0.97); border-radius:12px; box-shadow:0 22px 54px rgba(20,16,60,0.22); padding:8px 14px; }
.feat-mock .panel .row { display:flex; align-items:center; gap:11px; padding:11px 2px; border-bottom:1px solid #eef; }
.feat-mock .panel .row:last-child { border-bottom:0; }
.feat-mock .panel .row i { width:15px; height:15px; border-radius:5px; background:#e2e2ec; flex:none; }
.feat-mock .panel .row b { height:8px; border-radius:4px; background:#e2e2ec; flex:1; }
.feat-mock .panel .row s { width:26px; height:7px; border-radius:4px; background:#ececf4; }

/* ============ Feature-page mocks — distinct per page (placeholders to fill) ============ */
.fm { border-radius:16px; aspect-ratio:2.15/1; display:grid; place-items:center; overflow:hidden; margin:26px 0 8px; border:1px solid var(--border); }
.fm.g1 { background:linear-gradient(140deg,#aecbff,#6d8ff0 52%,#4536c4); }
.fm.g2 { background:linear-gradient(140deg,#c9b6f7,#8a6fe8 52%,#5a2ea6); }
.fm.g3 { background:linear-gradient(140deg,#a7e4d8,#4bb9c9 52%,#2b6ea6); }
.fm.g4 { background:linear-gradient(140deg,#ffd6a6,#f2907e 52%,#c14d8a); }
.fm.g5 { background:linear-gradient(140deg,#bff0c8,#5cc98a 52%,#2b8a6a); }
.fm-card { width:60%; max-width:440px; background:#fff; border-radius:12px; box-shadow:0 22px 54px rgba(20,16,60,.24); padding:8px 14px; }
.fm-win { width:82%; max-width:600px; background:#fff; border-radius:12px; box-shadow:0 22px 54px rgba(20,16,60,.24); overflow:hidden; }
.fm-win .bar { display:flex; gap:6px; padding:10px 12px; border-bottom:1px solid #eef; }
.fm-win .bar i { width:9px; height:9px; border-radius:50%; background:#e0e0e6; }
.fm-win .body { display:flex; min-height:118px; }
.fm-win .side { width:32%; border-right:1px solid #eef; padding:12px; }
.fm-win .side i { display:block; height:8px; background:#ececf4; border-radius:4px; margin:11px 0; }
.sk-row { display:flex; align-items:center; gap:11px; padding:10px 2px; border-bottom:1px solid #eef; }
.sk-row:last-child { border-bottom:0; }
.sk-row i { width:15px; height:15px; border-radius:5px; background:#e2e2ec; flex:none; }
.sk-row b { height:8px; border-radius:4px; background:#e2e2ec; flex:1; }
.sk-row s { width:26px; height:7px; border-radius:4px; background:#ececf4; }
.sk-chart { display:flex; align-items:flex-end; gap:8px; height:96px; padding:14px 16px; flex:1; }
.sk-chart i { flex:1; background:linear-gradient(#8aa6f5,#c2d0f8); border-radius:4px 4px 0 0; }
.sk-doc { padding:14px 16px; flex:1; }
.sk-doc .t { height:11px; width:52%; background:#e2e2ec; border-radius:4px; margin-bottom:13px; }
.sk-doc .l { height:7px; background:#ececf4; border-radius:4px; margin:8px 0; }
.fm-bar { height:7px; border-radius:4px; background:#e2e2ec; }
.fm-prog { height:6px; border-radius:3px; background:#eceaf6; margin:12px 2px; overflow:hidden; }
.fm-prog i { display:block; height:6px; width:56%; border-radius:3px; background:#7b57e6; }
.fm-pill { display:inline-block; background:#0d0d0d; color:#fff; font-size:11px; padding:5px 12px; border-radius:999px; margin-top:6px; }
/* composer mock */
.fm-composer { border:1px solid var(--border); border-radius:14px; padding:16px 18px; max-width:560px; margin:22px 0 8px; }
.fm-composer .txt { font-size:15px; color: var(--ink); line-height:1.5; }
.fm-composer .bar { display:flex; align-items:center; gap:10px; margin-top:16px; color:var(--meta); font-size:13px; }
.fm-composer .seg { display:inline-flex; background:var(--fill); border-radius:8px; padding:2px; }
.fm-composer .seg span { padding:4px 12px; border-radius:6px; font-size:13px; }
.fm-composer .seg .on { background:#fff; color:#0d0d0d; box-shadow:0 1px 2px rgba(0,0,0,.08); }
.fm-composer .sp { flex:1; }
.fm-composer .send { width:28px; height:28px; border-radius:50%; background:#0d0d0d; color:#fff; display:grid; place-items:center; font-size:13px; }
/* voice conversation */
.fm-voice { border:1px solid var(--border); border-radius:16px; padding:22px 24px; max-width:560px; margin:22px 0 8px; display:flex; flex-direction:column; gap:12px; }
.fm-voice .b { max-width:80%; padding:11px 15px; border-radius:16px; font-size:14px; line-height:1.5; }
.fm-voice .b.them { background:var(--fill); align-self:flex-start; border-bottom-left-radius:5px; }
.fm-voice .b.me { background:#0d0d0d; color:#fff; align-self:flex-end; border-bottom-right-radius:5px; }
.fm-voice .orb { width:54px; height:54px; border-radius:50%; background:radial-gradient(circle at 35% 32%,#d3c4fa,#6d5ae0); align-self:center; margin-top:8px; box-shadow:0 0 0 8px rgba(109,90,224,.12); }
.fm-voice .listening { text-align:center; color:var(--meta); font-size:13px; }

/* ============ Configuration section ============ */
/* landing settings-panel mock (hero right) */
.cfg-mock { border-radius:14px; border:1px solid var(--border); background:#fff; box-shadow:0 20px 60px rgba(80,60,200,.16); overflow:hidden; display:flex; aspect-ratio:16/11; }
.cfg-mock .nav { width:40%; border-right:1px solid #eef; padding:14px 12px; background:#fafafb; }
.cfg-mock .nav i { display:block; height:9px; border-radius:4px; background:#e4e4ee; margin:13px 0; }
.cfg-mock .nav i.on { background:#c9bdf2; width:70%; }
.cfg-mock .main { flex:1; padding:16px; }
.cfg-mock .main .t { height:10px; width:44%; background:#e4e4ee; border-radius:4px; margin-bottom:14px; }
.cfg-mock .opt { border:1px solid #eef; border-radius:9px; padding:10px 12px; margin-bottom:9px; }
.cfg-mock .opt b { display:block; height:8px; width:40%; background:#e0e0ec; border-radius:4px; margin-bottom:6px; }
.cfg-mock .opt s { display:block; height:6px; width:72%; background:#eeeef6; border-radius:4px; }
.cfg-mock .opt.sel { border-color:#b9a9ef; box-shadow:0 0 0 2px rgba(123,87,230,.15); }
/* With / Without comparison (chronicle) */
.cfg-cmp { border:1px solid var(--border); border-radius:14px; overflow:hidden; margin:16px 0 8px; max-width:560px; }
.cfg-cmp .seg { display:flex; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); }
.cfg-cmp .seg span { padding:6px 14px; border-radius:8px; font-size:13px; font-weight:500; color: var(--meta); cursor:pointer; }
.cfg-cmp .seg span.on { background:var(--fill-solid); color: var(--ink); }
.cfg-cmp .body { padding:16px 18px; display:none; flex-direction:column; gap:10px; }
.cfg-cmp .body.on { display:flex; }
.cfg-cmp .b { max-width:82%; padding:10px 14px; border-radius:14px; font-size:13.5px; line-height:1.5; }
.cfg-cmp .b.them { background:var(--fill); align-self:flex-start; border-bottom-left-radius:5px; }
.cfg-cmp .b.me { background:#0d0d0d; color:#fff; align-self:flex-end; border-bottom-right-radius:5px; }
.cfg-cmp .tag { align-self:flex-start; font-size:11px; color:#6144c4; background:rgba(123,87,230,.1); padding:3px 9px; border-radius:999px; }

/* ============ Why Heyno: For enterprises ============ */
.en-hero { text-align:center; padding:52px var(--pad) 0; background:linear-gradient(180deg,#e9f5ee 0%,#fff 62%); }
.en-hero h1 { font-size:var(--type-h1-size); line-height:1.06; letter-spacing:-0.02em; max-width:840px; margin:0 auto; }
.en-lead { font-size:17px; color:var(--meta); max-width:560px; margin:20px auto 0; line-height:1.5; }
.en-logos { display:flex; gap:44px; justify-content:center; align-items:center; flex-wrap:wrap; margin:40px auto 30px; opacity:.75; font-weight:700; font-size:17px; letter-spacing:-0.01em; }
.en-video { max-width:960px; margin:0 auto; aspect-ratio:16/9; }
.en-feats { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align:left; margin-top:4px; }
.en-fart { border-radius:12px; aspect-ratio:5/4; border:1px solid var(--border); margin-bottom:16px; background:linear-gradient(150deg,#eef2f8,#dbe4f0); }
.en-fart.a2 { background:linear-gradient(150deg,#f2eef8,#e2dbf0); } .en-fart.a3 { background:linear-gradient(150deg,#eef7f2,#dbeee4); }
.en-feats h3 { font-size:16px; font-weight:600; margin-bottom:6px; }
.en-feats p { font-size:14px; color:var(--meta); line-height:1.5; }
.en-media { aspect-ratio:16/8; width:100%; max-width:none; }
.en-stats { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:16px; text-align:left; }
.en-quote { grid-row:span 2; background:var(--fill-solid); border-radius:16px; padding:26px; display:flex; flex-direction:column; }
.en-quote p.q { font-size:19px; line-height:1.4; letter-spacing:-0.01em; }
.en-quote .cite { font-size:12px; color:var(--meta); margin-top:14px; }
.en-quote .big { font-size:34px; font-weight:600; margin-top:auto; padding-top:24px; } .en-quote .big span { display:block; font-size:12px; color:var(--meta); font-weight:400; margin-top:4px; }
.en-stat { background:var(--fill-solid); border-radius:16px; padding:24px; }
.en-stat .lb { font-weight:700; font-size:13px; margin-bottom:14px; }
.en-stat .num { font-size:32px; font-weight:600; letter-spacing:-0.01em; } .en-stat p { font-size:12.5px; color:var(--meta); margin-top:6px; line-height:1.4; }
.en-stories { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; text-align:left; }
.en-stories a { display:block; text-decoration:none; color:inherit; }
.en-stories .st-art { display:block; aspect-ratio:4/3; border-radius:12px; margin-bottom:11px; }
.en-stories .st-cap { font-size:13px; line-height:1.45; }
.en-deploy { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.en-deploy h2 { font-size:var(--type-h4-size); letter-spacing:-0.01em; }
.en-deploy p { font-size:14px; color:var(--meta); line-height:1.55; margin:14px 0 20px; }
.en-deploy .media-card { aspect-ratio:16/11; background:linear-gradient(150deg,#cfe6d7,#9ec9b3); }
.en-ind { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; text-align:left; }
.en-ind .art { display:block; aspect-ratio:1/1; border-radius:12px; margin-bottom:11px; background:linear-gradient(150deg,#e2e6ee,#c7cfdd); }
.en-ind .lb { font-size:14px; }
@media (max-width:900px){ .en-feats,.en-stats,.en-stories,.en-ind,.en-deploy{grid-template-columns:1fr} .en-quote{grid-row:auto} }

/* ============ Why Heyno: For startups ============ */
.su-hero { text-align:center; padding:56px var(--pad) 8px; background:linear-gradient(180deg,#fbeef4 0%,#fff 72%); }
.su-hero h1 { font-size:var(--type-h1-size); line-height:1.06; letter-spacing:-0.02em; }
.su-hero p { font-size:16px; color:var(--meta); max-width:520px; margin:18px auto 24px; line-height:1.5; }
.su-hero .cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.su-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align:left; }
.su-card .art { aspect-ratio:16/10; border-radius:12px; position:relative; margin-bottom:14px; }
.su-card .art .ic { position:absolute; left:16px; bottom:16px; width:42px; height:42px; border-radius:11px; background:#fff; display:grid; place-items:center; box-shadow:0 6px 18px rgba(0,0,0,.1); }
.su-card .art .ic svg { width:18px; height:18px; color: var(--ink); }
.su-card h3 { font-size:16px; font-weight:600; }
.su-card p { font-size:14px; color:var(--meta); margin:6px 0 14px; line-height:1.5; }
.su-quote { max-width:720px; margin:24px auto 0; text-align:center; font-size:22px; line-height:1.4; letter-spacing:-0.01em; }
.su-quote .cite { display:block; font-size:13px; color:var(--meta); margin-top:18px; letter-spacing:0; }
.su-live { background:linear-gradient(180deg,#fbeef4,#faf0f5); }
.su-events { max-width:820px; margin:0 auto; }
.su-ev { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding:22px 0; border-top:1px solid var(--border); }
.su-ev:last-child { border-bottom:1px solid var(--border); }
.su-ev h3 { font-size:15px; font-weight:600; }
.su-ev p { font-size:13px; color:var(--meta); margin-top:6px; max-width:600px; line-height:1.5; }
.su-ev a { font-size:13px; font-weight:500; white-space:nowrap; text-decoration:underline; text-underline-offset:3px; }
.su-faq { max-width:760px; margin:0 auto; }

/* ============ Why Heyno: For small businesses ============ */
.sb-bar { background:#f4e8ee; text-align:center; padding:11px var(--pad); font-size:13px; color:#4a4a4a; }
.sb-bar a { font-weight:500; text-decoration:underline; text-underline-offset:2px; margin-left:6px; }
.sb-hero { text-align:center; padding:44px var(--pad) 40px; background:linear-gradient(180deg,#fbeef4 0%,#fff 80%); }
.sb-hero .kicker { font-size:14px; color:var(--meta); margin-bottom:14px; }
.sb-hero h1 { font-size:var(--type-h1-size); letter-spacing:-0.02em; line-height:1.06; max-width:640px; margin:0 auto; }
.sb-hero p { font-size:16px; color:var(--meta); max-width:520px; margin:18px auto 24px; line-height:1.5; }
.sb-hero .cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.sb-video { max-width:900px; margin:0 auto; aspect-ratio:16/9; }
.sb-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; text-align:left; }
.sb-cols .c { border-top:1px solid var(--ink); padding-top:16px; }
.sb-cols h3 { font-size:16px; font-weight:600; margin-bottom:8px; }
.sb-cols p { font-size:14px; color:var(--meta); line-height:1.55; }
.sb-cols ul { margin:8px 0 0; padding:0; list-style:none; }
.sb-cols li { font-size:13px; color:var(--meta); padding:5px 0 5px 16px; position:relative; }
.sb-cols li:before { content:'\2014'; position:absolute; left:0; }

/* mobile collapse for Why-Heyno audience grids */
@media (max-width: 900px) {
  .su-cards, .sb-cols, .en-stories { grid-template-columns: 1fr !important; }
  .su-ev { flex-direction: column; gap: 10px; }
  .doc-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .su-quote, .en-hero h1, .su-hero h1, .sb-hero h1 { max-width: 100%; }
}

/* ============ Model page (mirror openai.com/index/<model>) ============ */
.mdl-orbs { position: relative; }
.mdl-orbs .article-meta, .mdl-orbs .article-title, .mdl-orbs .article-dek, .mdl-orbs .article-utils { position: relative; z-index: 1; }
.mdl-orb { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, currentColor 1.05px, transparent 1.15px);
  background-size: 7px 7px; color: rgba(198,72,44,.5);
  -webkit-mask-image: radial-gradient(circle at 44% 38%, #000 0 42%, rgba(0,0,0,.5) 66%, transparent 74%);
  mask-image: radial-gradient(circle at 44% 38%, #000 0 42%, rgba(0,0,0,.5) 66%, transparent 74%); }
.mdl-orb.l { width: 306px; height: 306px; left: -150px; top: 6px; }
.mdl-orb.r { width: 236px; height: 236px; right: -118px; top: 62px; color: rgba(58,86,196,.5); }
/* same halftone material, different shape, so no two model pages open alike */
.mdl-horizon { position: relative; }
.mdl-horizon .article-meta, .mdl-horizon .article-title, .mdl-horizon .article-dek, .mdl-horizon .article-utils { position: relative; z-index: 1; }
/* live backdrop behind the article head, the way openai.com/index/gpt-5-6 opens */
.mdl-fx { position: relative; }
.mdl-fx .article-meta, .mdl-fx .article-title, .mdl-fx .article-dek, .mdl-fx .article-utils { position: relative; z-index: 1; }
/* runs the full width and up behind the bar, so nothing in it is ever clipped */
.mdl-fx { padding-bottom: 104px; }
.hero-fx { position: absolute; left: 50%; transform: translateX(-50%);
  top: calc((var(--header-h) + 56px) * -1);
  width: 100vw; max-width: none; height: calc(100% + var(--header-h) + 150px);
  pointer-events: none; z-index: 0; display: block; }
/* the bar sits on the artwork until you scroll, same as the story pages */
.fx-page .site-header { position: absolute; left: 0; right: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* dark mode paints the bar by default, which would sit on top of the date row */
:root[data-theme="dark"] .fx-page .site-header { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.fx-page .site-header.scrolled { position: fixed; top: 0; background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); }
:root[data-theme="dark"] .fx-page .site-header.scrolled { background: rgba(13, 13, 15, 0.82); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); }
/* the bar floats, so the head has to clear it on its own */
.fx-page .page-head { padding-top: calc(var(--header-h) + 26px) !important; }
@media (max-width: 900px) { .hero-fx { display: none; } }
.mdl-lanes { position: relative; }
.mdl-lanes .article-meta, .mdl-lanes .article-title, .mdl-lanes .article-dek, .mdl-lanes .article-utils { position: relative; z-index: 1; }
.mdl-lane, .mdl-hub { position: absolute; pointer-events: none; z-index: 0; border-radius: 999px;
  background-image: radial-gradient(circle, currentColor 1.05px, transparent 1.15px);
  background-size: 7px 7px; }
.mdl-lane { height: 30px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 26%, #000 74%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 26%, #000 74%, transparent); }
.mdl-lane.a { left: -132px; top: 24px; width: 330px; transform: rotate(-7deg); color: rgba(58,86,196,.46); }
.mdl-lane.b { left: -150px; top: 92px; width: 396px; color: rgba(58,86,196,.34); }
.mdl-lane.c { left: -132px; top: 160px; width: 330px; transform: rotate(7deg); color: rgba(198,72,44,.40); }
.mdl-hub { right: -84px; top: 52px; width: 172px; height: 172px; color: rgba(58,86,196,.44);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 40%, rgba(0,0,0,.45) 64%, transparent 76%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 40%, rgba(0,0,0,.45) 64%, transparent 76%); }
@media (max-width: 900px) { .mdl-horizon::before, .mdl-lane, .mdl-hub { display: none; } }
.mdl-video { border-radius: 12px; aspect-ratio: 16/9; margin: 0 0 40px; position: relative; overflow: hidden;
  background: linear-gradient(170deg, #cfd9c9 0%, #7f9a76 42%, #3d5238 100%); display: grid; place-items: center; }
.mdl-video::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.10) 55%, rgba(0, 0, 0, 0) 100%); }
.mdl-video .vt { position: absolute; z-index: 1; color: #fff; font-weight: 600; letter-spacing: -0.02em; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.mdl-video .play { z-index: 1; }
.mdl-video .vt.a { top: 12%; left: 8%; font-size: clamp(22px,4.4vw,44px); }
.mdl-video .vt.b { top: 40%; left: 22%; font-size: clamp(30px,6.4vw,64px); }
.mdl-video .vt.c { bottom: 12%; right: 8%; font-size: clamp(24px,5vw,50px); }
.mdl-video .pl { width: 62px; height: 62px; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; z-index: 2; }
.mdl-video .pl svg { width: 22px; height: 22px; color: #fff; margin-left: 3px; }
.mdl-video .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 38px; display: flex; align-items: center; gap: 12px; padding: 0 14px; color: rgba(255,255,255,.85); font-size: 12px; background: linear-gradient(transparent, rgba(0,0,0,.42)); }
.mdl-video .bar svg { width: 13px; height: 13px; }
.mdl-video .bar .sp { flex: 1; }
.mdl-chart { border: 1px solid var(--border); border-radius: 12px; padding: 22px 24px 16px; margin: 32px 0 40px; }
.mdl-chart .ct { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.mdl-chart .cs { font-size: 12px; color: var(--meta); margin-bottom: 20px; }
.mdl-bars { display: flex; flex-direction: column; gap: 14px; }
.mdl-bar { display: grid; grid-template-columns: 132px minmax(0,1fr) 62px; align-items: center; gap: 12px; font-size: 13px; }
.mdl-bar .track { height: 12px; border-radius: 6px; background: var(--fill); overflow: hidden; }
.mdl-bar .fill { display: block; height: 12px; border-radius: 6px; background: #0d0d0d; }
.mdl-bar.alt .fill { background: rgba(13,13,13,.24); }
.mdl-bar .val { text-align: right; color: var(--meta); font-variant-numeric: tabular-nums; }
.mdl-note { border-left: 2px solid var(--border); padding: 2px 0 2px 16px; font-size: 14px; color: var(--meta); margin: 0 0 24px; line-height: 1.55; }
.article-body .mdl-h3 { font-size: 17px; font-weight: 600; margin: 32px 0 10px; }

/* model page: keep decorative orbs and wide tables from overflowing small screens */
@media (max-width: 900px) {
  .mdl-orb { display: none; }
  .article-body .doc-table { display: block; overflow-x: auto; white-space: nowrap; }
  .mdl-bar { grid-template-columns: 96px minmax(0,1fr) 48px; font-size: 12px; }
}

/* ---- business team tabs: switch in place (mirrors openai.com/business) ---- */
.team-tabs .tt { border-top: 1px solid rgba(13,13,13,0.08); }
.team-tabs .tt:first-child { border-top: 1px solid rgba(13,13,13,0.08); }
.team-tabs .tt-head { display: block; width: 100%; text-align: left; padding: 15px 0; font-size: 15px; font-weight: 500; color: var(--meta); background: none; cursor: pointer; transition: color .15s ease; }
.team-tabs .tt-head:hover { color: var(--ink); }
.team-tabs .tt.on .tt-head { color: var(--ink); padding-bottom: 8px; }
.team-tabs .tt-body { display: none; padding-bottom: 20px; }
.team-tabs .tt.on .tt-body { display: block; }
.team-tabs .tt-body p { font-size: 13px; line-height: 1.5; color: var(--meta); margin-bottom: 12px; }
.team-tabs .tt-body a { font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.team-media { position: relative; transition: background .35s ease; }
.team-media .tm-label { position: absolute; left: 22px; bottom: 18px; font-size: 15px; font-weight: 500; color: rgba(13,13,13,.72); }
.team-media.m-finance  { background: linear-gradient(150deg,#dfe7f2 0%,#c6d4e6 100%); }
.team-media.m-data     { background: linear-gradient(150deg,#e2eee6 0%,#bfd9c8 100%); }
.team-media.m-sales    { background: linear-gradient(150deg,#f6e3d2 0%,#e6c3a5 100%); }
.team-media.m-marketing{ background: linear-gradient(150deg,#f4dde8 0%,#dfbcd0 100%); }
.team-media.m-ops      { background: linear-gradient(150deg,#e6e3f4 0%,#c9c2e6 100%); }
.team-media.m-eng      { background: linear-gradient(150deg,#dfeaf2 0%,#b9cfe0 100%); }
.team-media.m-design   { background: linear-gradient(150deg,#f2e8dc 0%,#dfcbb0 100%); }
.team-media.m-security { background: linear-gradient(150deg,#e0e4e8 0%,#c0c7cf 100%); }
/* business bar: search sits inline in the nav row (theirs is 40x40, muted) */
.primary-nav .nav-search { width: 40px; height: 40px; border-radius: 999px; color: var(--meta); }
.primary-nav .nav-search svg { width: 17px; height: 17px; }

/* ---- release-page extras ---- */
.rv-wave { display:flex; align-items:center; gap:4px; height:64px; margin:6px 0 2px; }
.rv-wave i { flex:1; background:linear-gradient(#c9bdf2,#8a6fe8); border-radius:3px; }
.file-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:28px 0 34px; }
.file-card { border:1px solid var(--border); border-radius:12px; padding:18px; }
.file-card .ic { width:38px; height:38px; border-radius:9px; display:grid; place-items:center; color:#fff; font-size:12px; font-weight:600; margin-bottom:12px; }
.file-card .ic.w { background:#2b579a; } .file-card .ic.x { background:#217346; } .file-card .ic.p { background:#c43e1c; }
.file-card h4 { font-size:15px; font-weight:600; margin-bottom:6px; }
.file-card p { font-size:13px; color:var(--meta); line-height:1.5; }
.route { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px; border:1px solid var(--border); border-radius:12px; padding:22px; margin:26px 0 34px; }
.route .col { display:flex; flex-direction:column; gap:8px; }
.route .chip { border:1px solid var(--border); border-radius:8px; padding:9px 12px; font-size:13px; text-align:center; }
.route .hub { width:96px; height:96px; border-radius:50%; background:#0d0d0d; color:#fff; display:grid; place-items:center; font-size:13px; font-weight:600; text-align:center; line-height:1.25; }
@media (max-width:900px){ .file-cards{grid-template-columns:1fr} .route{grid-template-columns:1fr; text-align:center} .route .hub{margin:0 auto} }

/* ============================================================
   Dark mode — interior surfaces (product mockups stay light on
   purpose: they represent screenshots of the app).
   ============================================================ */
:root[data-theme="dark"] .biz-top { background: var(--paper); }
:root[data-theme="dark"] .uc-page { background: var(--paper); }
:root[data-theme="dark"] .uc-top { background: var(--paper); border-bottom-color: var(--hairline); }
:root[data-theme="dark"] .uc-nav a { color: var(--ink); }
:root[data-theme="dark"] .uc-nav a.on { background: var(--fill-hover); color: var(--ink); }
:root[data-theme="dark"] .uc-search { background: var(--fill); border-color: var(--border); color: var(--faint); }
:root[data-theme="dark"] .uc-foot .fcol a,
:root[data-theme="dark"] .uc-foot .fcol p { color: var(--meta); }
:root[data-theme="dark"] .uc-item summary,
:root[data-theme="dark"] .uc-h1, :root[data-theme="dark"] .uc-h2 { color: var(--ink); }
/* docs chrome */
:root[data-theme="dark"] .doc-subnav { background: var(--fill-solid); }
:root[data-theme="dark"] .doc-tabs a, :root[data-theme="dark"] .doc-tabs button { color: var(--meta); }
:root[data-theme="dark"] .doc-tabs a.on, :root[data-theme="dark"] .doc-tabs button.on { color: var(--ink); border-bottom-color: var(--ink); }
:root[data-theme="dark"] .doc-tabs a:not(.on):hover, :root[data-theme="dark"] .doc-tabs button:not(.on):hover { color: var(--ink); }
:root[data-theme="dark"] .doc-side .doc-home { background: var(--fill); color: var(--ink); }
:root[data-theme="dark"] .doc-group a { color: var(--meta); }
:root[data-theme="dark"] .doc-group a:hover { background: var(--fill); color: var(--ink); }
:root[data-theme="dark"] .doc-group a.on { background: var(--fill-hover); color: var(--ink); }
:root[data-theme="dark"] .doc-doc p, :root[data-theme="dark"] .doc-table td { color: var(--ink); }
:root[data-theme="dark"] .doc-toc a { color: var(--meta); }
:root[data-theme="dark"] .doc-toc a:hover, :root[data-theme="dark"] .doc-toc a.on { color: var(--ink); }
:root[data-theme="dark"] .doc-note, :root[data-theme="dark"] .doc-card,
:root[data-theme="dark"] .doc-code { background: var(--fill); border-color: var(--border); }
:root[data-theme="dark"] .doc-code pre { color: var(--ink); }
:root[data-theme="dark"] .doc-filter input { background: var(--fill); border-color: var(--border); color: var(--ink); }
/* cards & panels */
:root[data-theme="dark"] .tier-card,
:root[data-theme="dark"] .t-card,
:root[data-theme="dark"] .pr-card,
:root[data-theme="dark"] .prc-card,
:root[data-theme="dark"] .file-card,
:root[data-theme="dark"] .quote-card,
:root[data-theme="dark"] .en-stat,
:root[data-theme="dark"] .en-quote,
:root[data-theme="dark"] .su-card,
:root[data-theme="dark"] .mdl-chart,
:root[data-theme="dark"] .cfg-cmp,
:root[data-theme="dark"] .route,
:root[data-theme="dark"] .fm-composer,
:root[data-theme="dark"] .fm-voice,
:root[data-theme="dark"] .pm-composer,
:root[data-theme="dark"] .pm-detail,
:root[data-theme="dark"] .qs-composer { background: var(--fill); border-color: var(--border); }
:root[data-theme="dark"] .segmented button.active,
:root[data-theme="dark"] .doc-seg span.on { background: var(--fill-hover); color: var(--ink); box-shadow: none; }
:root[data-theme="dark"] .cpill { background: var(--fill-solid); border-color: var(--border); color: var(--ink); }
:root[data-theme="dark"] .pm-menu { background: var(--fill-solid); border-color: var(--border); }
:root[data-theme="dark"] .pm-menu button { color: var(--ink); }
:root[data-theme="dark"] .mdl-bar .track { background: var(--fill-hover); }
:root[data-theme="dark"] .mdl-bar .fill { background: var(--ink); }
:root[data-theme="dark"] .fm-voice .b.me, :root[data-theme="dark"] .cfg-cmp .b.me { background: var(--ink); color: var(--paper); }
:root[data-theme="dark"] .fm-voice .b.them, :root[data-theme="dark"] .cfg-cmp .b.them { background: var(--fill-hover); color: var(--ink); }
:root[data-theme="dark"] .uc-toggle { color: var(--meta); }
/* dark: primary pills invert so they stay visible */
:root[data-theme="dark"] .uc-try,
:root[data-theme="dark"] .doc-pill,
:root[data-theme="dark"] .qs-dl,
:root[data-theme="dark"] .dm-btn,
:root[data-theme="dark"] .pr-btn,
:root[data-theme="dark"] .ft-cta,
:root[data-theme="dark"] .fm-composer .send,
:root[data-theme="dark"] .qs-composer .cbar .qs-send,
:root[data-theme="dark"] .fm-pill { background: var(--ink); color: var(--paper); }
:root[data-theme="dark"] .dm-btn.ghost { background: var(--fill); color: var(--ink); border-color: var(--border); }
:root[data-theme="dark"] .uc-pill { background: var(--fill); color: var(--ink); }
:root[data-theme="dark"] .uc-pill.dim { background: transparent; border: 1px solid var(--border); }
:root[data-theme="dark"] .uc-mock, :root[data-theme="dark"] .uc-card { border-color: var(--border); }
:root[data-theme="dark"] .uc-card h3, :root[data-theme="dark"] .uc-new-card h3 { color: var(--ink); }
:root[data-theme="dark"] .sb-bar { background: var(--fill); color: var(--meta); }
:root[data-theme="dark"] .doc-side .doc-home { color: var(--ink); }


/* ============================================================
   Product page template — combined from openai.com/codex,
   /gpt-rosalind, and /business/solutions/data
   ============================================================ */
.pp-hero { position: relative; text-align: center; padding: 108px var(--pad) 96px; overflow: hidden; }
.pp-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; }
.pp-hero.g-finance::before { background: radial-gradient(90% 120% at 20% 10%, #d8f0e2 0%, transparent 55%), radial-gradient(80% 110% at 82% 20%, #dfe6fb 0%, transparent 58%), linear-gradient(180deg, #eef7f2 0%, #f6f8fc 60%, var(--paper) 100%); }
.pp-hero.g-drive::before { background: radial-gradient(90% 120% at 18% 12%, #e3e9fb 0%, transparent 55%), radial-gradient(80% 110% at 85% 18%, #f6e4ef 0%, transparent 58%), linear-gradient(180deg, #eef1fb 0%, #f7f5fb 60%, var(--paper) 100%); }
.pp-hero > * { position: relative; z-index: 1; }
.pp-name { font-size: clamp(2.5rem, calc(2.5rem + 2.9 * ((100vw - 23.4375rem) / 66.5625)), 5.4rem); line-height: 1.05; letter-spacing: -0.035em; font-weight: 600; }
.pp-dek { font-size: 18px; color: var(--meta); margin: 20px auto 0; max-width: 560px; line-height: 1.5; }
.pp-cta { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 32px; flex-wrap: wrap; }
.pp-logos { display: flex; align-items: center; justify-content: center; gap: 52px; flex-wrap: wrap; padding: 34px var(--pad) 8px; opacity: .62; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.pp-logos .lbl { width: 100%; text-align: center; font-weight: 400; font-size: 13px; color: var(--meta); opacity: .9; margin-bottom: 6px; letter-spacing: 0; }
.pp-sec { padding-top: 100px; padding-bottom: 100px; }
.pp-head { text-align: center; max-width: 660px; margin: 0 auto 40px; }
.pp-head.big { max-width: 760px; }
.pp-head.big h2 { font-size: 48px; font-weight: 500; line-height: 55.68px; letter-spacing: -0.03em; }
.pp-head.big p { font-size: 17px; line-height: 28px; margin-top: 16px; }
.pp-head h2 { font-size: var(--type-h3-size); letter-spacing: -0.02em; line-height: 1.2; }
.pp-head p { font-size: 16px; color: var(--meta); margin-top: 14px; line-height: 1.55; max-width: 560px; margin-left: auto; margin-right: auto; }
.pp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pp-card { border: 1px solid var(--border); border-radius: 14px; padding: 24px; }
.pp-card .ic { display: block; width: 30px; height: 30px; color: var(--ink); margin-bottom: 16px; }
.pp-card .ic svg { width: 100%; height: 100%; }
.pp-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
a.pp-card { display: block; transition: border-color 0.2s ease; }
a.pp-card:hover { border-color: var(--ink); }
a.pp-card:hover h3 { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pp-card p { font-size: 14px; color: var(--meta); line-height: 1.55; }
/* stacked feature blocks with a 16:9 product shot */
.pp-feat { display: grid; gap: 128px; }
.pp-feat .row { display: grid; grid-template-columns: minmax(0, 0.482fr) minmax(0, 1fr); gap: 32px; align-items: end; }
.pp-feat .row.rev { grid-template-columns: minmax(0, 1fr) minmax(0, 0.482fr); }
.pp-feat .row.rev > .txt { order: 2; }
.pp-feat h3 { font-size: 30px; font-weight: 500; line-height: 39.6px; letter-spacing: -0.3px; margin-bottom: 18px; }
.pp-feat p { font-size: 17px; color: var(--ink); line-height: 28px; }
.pp-shot { border: 1px solid var(--border); border-radius: 14px; aspect-ratio: 16/9; overflow: hidden; background: var(--fill); display: grid; grid-template-columns: 148px minmax(0,1fr); }
.pp-shot .side { border-right: 1px solid var(--border); padding: 14px 12px; background: var(--paper); }
.pp-shot .side i { display: block; height: 8px; border-radius: 4px; background: var(--fill-hover); margin: 12px 0; }
.pp-shot .side i.on { background: #b9d4f5; width: 74%; }
.pp-shot .pane { background: var(--paper); padding: 16px 18px; }
.pp-shot.pp-shot-img { display: block; aspect-ratio: auto; }
.pp-shot.pp-shot-img img { width: 100%; height: auto; display: block; }
.pp-shot.pp-shot-img img.img-dark { display: none; }
/* the mail tile ships BOTH a wide desktop capture and a real phone capture;
   only one pair is ever in play, chosen by width, so a phone shows the app
   as a phone rather than a shrunken desktop window */
.pp-shot.pp-shot-art .shot-phone { display: none; }
:root[data-theme="dark"] .pp-shot.pp-shot-img img.img-light { display: none; }
:root[data-theme="dark"] .pp-shot.pp-shot-img img.img-dark { display: block; }
.pp-shot.pp-shot-video { display: block; aspect-ratio: 16 / 9; padding: 0; border: 0.5px solid var(--hairline); background: transparent; }
.pp-shot.pp-shot-video video { width: 100%; height: 100%; display: block; object-fit: contain; }


/* Autofill tile (heyno-passwords). Same frame language as the mcp panes and the
   government page: 22px radius, 1px hairline, clipped, and object-fit:cover so
   the 3840x2160 source fills the rectangle with no letterbox. aspect-ratio is
   the file's own 16/9, so cover has nothing to crop.
   Deliberately placed HERE beside the other .pp-shot-video rules and NOT
   appended at EOF -- a top-level rule after the 900px block wins at every
   width, which has cost four passes tonight. */
.pp-shot.pp-shot-video.pp-shot-autofill {
  aspect-ratio: 16 / 9; border: 1px solid var(--hairline);
  border-radius: 22px; overflow: hidden;
}
.pp-shot.pp-shot-video.pp-shot-autofill video { object-fit: cover; border-radius: inherit; }
@media (max-width: 900px) { .pp-shot.pp-shot-video.pp-shot-autofill { border-radius: 16px; } }
/* sound starts off, so autoplay is allowed; this is the way back on */
.pp-shot.pp-shot-video { position: relative; }
.pp-shot.pp-shot-video .snd {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; border: 0; border-radius: 999px;
  color: #fff; background: rgba(20, 20, 22, 0.55); cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background .15s ease;
}
.pp-shot.pp-shot-video .snd:hover { background: rgba(20, 20, 22, 0.8); }
.pp-shot.pp-shot-video .snd svg { width: 19px; height: 19px; display: block; }
.pp-shot.pp-shot-video .snd .i-on { display: none; }
.pp-shot.pp-shot-video .snd[aria-pressed="true"] .i-on { display: block; }
.pp-shot.pp-shot-video .snd[aria-pressed="true"] .i-off { display: none; }
.pp-shot.pp-shot-art { display: block; position: relative; aspect-ratio: 16 / 9; padding: 0; background-size: cover; background-position: center; border: 0; }
.pp-shot.pp-shot-art img { position: absolute; top: 15%; left: 30%; width: 150%; height: auto; border-radius: 10px; }
.pp-feat .row:not(.rev) .pp-shot.pp-shot-art img { left: auto; right: 30%; }
@media (max-width: 900px) {
  .pp-shot.pp-shot-art img, .pp-feat .row:not(.rev) .pp-shot.pp-shot-art img { right: auto; left: 26%; top: 14%; width: 150%; border-radius: 10px; }
}
:root[data-theme="dark"] .pp-shot.pp-shot-art img.img-dark { display: block; }
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-phone img { right: auto; transform: translate(-50%, -50%); width: auto; border-radius: 24px; }
/* one tune per tile — light and dark share it. His alignment, 2026-08-20. */
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-tasks img { left: 50%; top: 82.5%; height: 146%; }
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-mail img { left: 18.5%; right: auto; top: 10.5%; width: 145%; }
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-cal img { right: 27%; left: auto; top: 7.5%; width: 112%; }
/* two loose cards on the art, each placed on its own */
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-meet img.lay-bubble { left: 48%; right: auto; top: 16.3%; width: 44%; }
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-meet img.lay-card { left: 12.6%; right: auto; top: 42.6%; width: 74%; }
/* the recap shots crop differently, so each mode is placed on its own */
/* the desktop meeting shot, wider than the tile so it bleeds a little. no border, and each mode sits on its own */
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-ask img { left: 18.5%; right: auto; top: 10%; width: 97.5%; }
:root[data-theme="dark"] .pp-feat .row .pp-shot.pp-shot-art.pp-shot-ask img { left: 6%; right: auto; top: 12%; width: 88%; }
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-recap img.img-light { right: 20.3%; left: auto; top: 9.5%; width: 90.5%; }
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-recap img.img-dark { right: 20.1%; left: auto; top: 10.9%; width: 95%; }
/* three phones on the one rectangle, each placed on its own */
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-icalls img { border-radius: 44px; border: 8px solid rgba(60, 60, 67, 0.13); }
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-icalls img.lay-list { left: 11.5%; right: auto; top: 18.1%; width: 30%; }
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-icalls img.lay-call { left: 42.4%; right: auto; top: 5%; width: 29.5%; }
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-icalls img.lay-contact { left: 72.9%; right: auto; top: 13.3%; width: 28%; }
/* one phone on the chats tile, same treatment as the calls row */
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-chat img { border-radius: 44px; border: 8px solid rgba(60, 60, 67, 0.13); }
:root[data-theme="dark"] .pp-feat .row .pp-shot.pp-shot-art.pp-shot-chat img { border-color: rgba(255, 255, 255, 0.22); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); }
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-chat img.lay-chat { left: 4.4%; right: auto; top: 3.2%; width: 28.5%; }
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-chat img.lay-link { left: 34.4%; right: auto; top: 10.3%; width: 29%; }
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-chat img.lay-menu { left: 64.8%; right: auto; top: 36.8%; width: 26%; }
/* the ai-call pair: the staged card on the left, the live call on the right */
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-aicalls img { border-radius: 44px; border: 8px solid rgba(60, 60, 67, 0.13); }
:root[data-theme="dark"] .pp-feat .row .pp-shot.pp-shot-art.pp-shot-aicalls img { border-color: rgba(255, 255, 255, 0.22); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); }
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-aicalls img.lay-card { left: 13.1%; right: auto; top: 11.4%; width: 36.5%; }
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-aicalls img.lay-detail { left: 53.3%; right: auto; top: 3.6%; width: 34.5%; }
.pp-shot.pp-shot-art.art-amber { background-image: url(img/art-amber.jpg?v=482); }
.pp-shot.pp-shot-art.art-violet { background-image: url(img/art-violet.jpg?v=540); }
/* the passwords desktop shot, wider than the tile so it bleeds a little */
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-codes img { border-radius: 12px; }
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-keys img { border-radius: 13px; }
:root[data-theme="dark"] .pp-feat .row .pp-shot.pp-shot-art.pp-shot-codes img,
:root[data-theme="dark"] .pp-feat .row .pp-shot.pp-shot-art.pp-shot-keys img { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); }
/* the Face ID approval is a phone shot, so it wears the device chrome the calls
   and frontdesk phones wear, not the 12px window radius the desktop shots use */
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-approve img { border-radius: 44px; border: 8px solid rgba(60, 60, 67, 0.13); }
:root[data-theme="dark"] .pp-feat .row .pp-shot.pp-shot-art.pp-shot-approve img { border-color: rgba(255, 255, 255, 0.22); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); }

/* HIS TUNE, 2026-09-07 -- DESKTOP, not mobile. Set with the built-in tuner and
   copied out verbatim. Fenced above 901px so none of it can reach a phone; the
   900px block further down still owns all three of these tiles there and is
   untouched. Written at full tile specificity so it outranks the top-level
   chrome above instead of tying with it. The anchor resets (left/right: auto)
   are the ones the tuner writes inline; without them the numbers cannot land.
   Do not round these values or "improve" them; they are his. */
@media (min-width: 901px) {
  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-keys img    { right: 19.6%; left: auto; top: 16.2%; width: 95.0%; }
  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-approve img { left: 51.1%; right: auto; top: 57.2%; height: 112.0%; border-radius: 34px; border-width: 5.5px; }
  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-codes img   { right: 20.7%; left: auto; top: 18.9%; width: 80.0%; }
}
.pp-shot.pp-shot-art.art-coral { background-image: url(img/art-coral.jpg?v=482); }
.pp-shot.pp-shot-art.art-green { background-image: url(img/art-green.jpg?v=507); }
/* frontdesk phones, same treatment as the calls tile */
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-setup img,
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-today img { border-radius: 44px; border: 8px solid rgba(60, 60, 67, 0.13); }
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-setup img { right: 27.5%; left: auto; top: 13.8%; width: 45.5%; }
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-today img.lay-today { left: 4.9%; right: auto; top: -18%; width: 52%; }
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-today img.lay-chat { left: 51.2%; right: auto; top: 32.2%; width: 42.5%; }
/* three phones across the one rectangle, each placed on its own */
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-step img { border-radius: 44px; border: 8px solid rgba(60, 60, 67, 0.13); }
/* on a dark page a black screenshot has no edge of its own, so give it one */
:root[data-theme="dark"] .pp-feat .row .pp-shot.pp-shot-art.pp-shot-setup img,
:root[data-theme="dark"] .pp-feat .row .pp-shot.pp-shot-art.pp-shot-today img,
:root[data-theme="dark"] .pp-feat .row .pp-shot.pp-shot-art.pp-shot-step img,
:root[data-theme="dark"] .pp-feat .row .pp-shot.pp-shot-art.pp-shot-icalls img {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-step img.lay-join { left: 14.5%; right: auto; top: 14.1%; width: 33.5%; }
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-step img.lay-ask { left: 52.9%; right: auto; top: -40.2%; width: 32.5%; }
/* the callback pair: the plan on the left, the approved call on the right */
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-cb img { border-radius: 44px; border: 8px solid rgba(60, 60, 67, 0.13); }
:root[data-theme="dark"] .pp-feat .row .pp-shot.pp-shot-art.pp-shot-cb img { border-color: rgba(255, 255, 255, 0.22); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); }
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-cb img.lay-plan { left: 19.2%; right: auto; top: 1.7%; width: 31.5%; }
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-cb img.lay-done { left: 53.6%; right: auto; top: -33.5%; width: 31.5%; }
/* the client kept and what was learned about them */
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-mem img { border-radius: 44px; border: 8px solid rgba(60, 60, 67, 0.13); }
:root[data-theme="dark"] .pp-feat .row .pp-shot.pp-shot-art.pp-shot-mem img { border-color: rgba(255, 255, 255, 0.22); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); }
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-mem img.lay-clients { left: 53.8%; right: auto; top: 49.1%; width: 31.5%; }
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-mem img.lay-recall { left: 18.3%; right: auto; top: 11.1%; width: 33.5%; }
.pp-shot.pp-shot-art.art-teal { background-image: url(img/art-teal.jpg?v=465); }
.pp-shot.pp-shot-art.art-indigo { background-image: url(img/art-indigo-light.jpg?v=442); }
:root[data-theme="dark"] .pp-shot.pp-shot-art.art-indigo { background-image: url(img/art-indigo-dark.jpg?v=442); }
.pp-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--hairline); font-size: 12.5px; }
.pp-line:last-child { border-bottom: 0; }
.pp-line .amt { font-variant-numeric: tabular-nums; color: var(--meta); }
.pp-line .tag { font-size: 10.5px; padding: 3px 9px; border-radius: 999px; background: var(--fill); color: var(--meta); }
.pp-line .tag.ok { background: rgba(47,182,115,.15); color: #14713f; }
.pp-line .tag.warn { background: rgba(240,145,58,.17); color: #8a5115; }
.pp-bars { display: flex; align-items: flex-end; gap: 10px; height: 100%; padding: 6px 2px; }
.pp-bars i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(#a9c6f5, #6f97e8); }
/* stat grid */
.pp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pp-stat { border-top: 1px solid var(--border); padding-top: 18px; }
.pp-stat .n { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; }
.pp-stat .l { font-size: 13px; color: var(--meta); margin-top: 6px; line-height: 1.45; }
/* tabbed showcase */
.pp-tabs { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.pp-tabs button { padding: 9px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--meta); background: var(--fill); cursor: pointer; }
.pp-tabs button.on { background: var(--ink); color: var(--paper); }
.pp-pane { display: none; }
.pp-pane.on { display: block; }
.pp-pane .cap { text-align: center; font-size: 15px; color: var(--meta); margin-top: 16px; }
/* surfaces */
.pp-surf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pp-surf .s .art { aspect-ratio: 4/3; border-radius: 12px; margin-bottom: 14px; border: 1px solid var(--border); background: linear-gradient(150deg, #eef2f8, #dde5f2); }
.pp-surf .s h3 { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.pp-surf .s p { font-size: 14px; color: var(--meta); line-height: 1.5; margin-bottom: 12px; }
.pp-close { text-align: center; padding: 92px var(--pad); }
.pp-close h2 { font-size: var(--type-h3-size); letter-spacing: -0.02em; }
@media (max-width: 900px) {
  .pp-cards, .pp-stats, .pp-surf { grid-template-columns: 1fr; }
  /* .row.rev is 0,2,1 unmediated, so it beat a plain .pp-feat .row here and the
     reversed rows kept their two-column grid on a phone: art squeezed left,
     text stranded in a one-word column. Match its specificity so both stack. */
  .pp-feat .row, .pp-feat .row.rev { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  /* shot first, words under it, the way openai stacks a feature on a phone */
  .pp-feat .row > .txt, .pp-feat .row.rev > .txt { order: 2; }
  .pp-feat .row > .pp-shot, .pp-feat .row.rev > .pp-shot { order: 1; width: 100%; }
  /* Matched to the desktop composition rather than guessed. Measured there:
     the tile is 16/9, each device shot is ~30% of tile width, so the shot
     stands 1.16x the tile's height and is clipped top and bottom; its radius
     is 18.3% of its own width and its border 3.3%. Mobile now reproduces
     those three ratios on a taller tile, so the two read as one design. */
  .pp-shot.pp-shot-art { aspect-ratio: 0.95 / 1; }
  /* radius tracks shot width the way desktop does (18.3% of the shot, 3.3%
     border) -- two-shot tiles run wider so they carry a larger radius. */
  .pp-feat .row .pp-shot.pp-shot-art img { border-radius: 28px; border-width: 5px; }

  /* HIS TUNE, 2026-08-31 -- set on a real phone with the built-in tuner and
     copied out verbatim. Two shots per tile, the third dropped where it made
     the pair too small to read. Do not "improve" these numbers; they are his. */
  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-aicalls img.lay-card    { left: 53.8%; right: auto; top: 38.3%; width: 44.5%; border-radius: 23px; border-width: 3.5px; }
  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-aicalls img.lay-detail  { left: 1.9%;  right: auto; top: 18.2%; width: 50.5%; border-radius: 29px; border-width: 3.5px; }

  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-icalls img.lay-list     { display: none; }
  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-icalls img.lay-call     { left: 1.2%;  right: auto; top: 10.6%; width: 49.5%; border-radius: 29px; border-width: 5px; }
  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-icalls img.lay-contact  { left: 52.4%; right: auto; top: 23.8%; width: 45.5%; border-radius: 27px; border-width: 5px; }

  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-chat img.lay-chat       { display: none; }
  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-chat img.lay-link       { left: 2.0%;  right: auto; top: 6.1%;  width: 52.5%; border-radius: 33px; border-width: 3.5px; }
  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-chat img.lay-menu       { left: 54.9%; right: auto; top: 32.8%; width: 51.5%; border-radius: 24px; border-width: 4px; }
  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-chat img.lay-team,
  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-chat img.lay-items      { display: none; }

  /* Under 901px these two swap to phone captures via <picture media>, so they
     wear the approval tile's frame. This rule now carries only what his tuner
     never emits: the centring transform his offsets were measured against, and
     the border style and colour that give border-width something to draw.
     Every placement and size number is his, further down. Targets `img` and
     never img.img-light, so the light and dark twin cannot diverge. */
  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-codes img,
  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-keys img {
    transform: translate(-50%, -50%);
    border-style: solid; border-color: rgba(60, 60, 67, 0.13);
  }
  /* a black capture has no edge of its own on a dark page, same as the approval */
  :root[data-theme="dark"] .pp-feat .row .pp-shot.pp-shot-art.pp-shot-codes img,
  :root[data-theme="dark"] .pp-feat .row .pp-shot.pp-shot-art.pp-shot-keys img { border-color: rgba(255, 255, 255, 0.22); }

  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-phone img {
    left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56%; height: auto;
  }
  /* the approval keeps the shared phone chrome; his tune below moves it */
  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-approve img { border-radius: 28px; border-width: 5px; }

  /* HIS TUNE, 2026-09-07 -- MOBILE, set on a real phone with the built-in tuner
     and copied out verbatim. Each line also resets the axis his tuner leaves
     implicit: keys and codes anchor on `right` with a negative offset, so `left`
     must be auto or they land nowhere near where he put them; approve anchors on
     `left`, so `right` goes auto. Same for the size axis -- width and height must
     never both be set or the capture stretches instead of scaling.
     Every selector ends in plain `img`, so both twins move together.
     These are his numbers. Do not round them, do not tidy them. */
  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-keys img    { right: -24.9%; left: auto; top: 93.6%; width: 76.5%; height: auto; border-radius: 37px; border-width: 5.5px; }
  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-approve img { left: 51.1%; right: auto; top: 57.2%; height: 112.0%; width: auto; }
  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-codes img   { right: -23.6%; left: auto; top: 84.9%; width: 74.0%; height: auto; border-radius: 39px; border-width: 5px; }

  /* HIS TUNE -- Meet page. His exact values from the built-in tuner, light and
     dark tuned separately because these tiles ship a different crop per theme.
     transform:none undoes the centring the generic single-image rule applies. */
  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-meet img.lay-bubble.img-light { left: 10.9%; right: auto; top: 25.9%; width: 86.5%; transform: none; }
  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-meet img.lay-bubble.img-dark  { left: 48.0%; right: auto; top: 16.3%; width: 44.0%; transform: none; }
  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-meet img.lay-card.img-light   { left: 5.4%;  right: auto; top: 49.7%; width: 90.5%; transform: none; }
  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-meet img.lay-card.img-dark    { left: 12.6%; right: auto; top: 42.6%; width: 74.0%; transform: none; }

  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-ask img                       { left: 3.1%; right: auto; top: 23.2%; width: 147.5%; border-radius: 9px; transform: none; height: auto; }
  :root[data-theme="dark"] .pp-feat .row .pp-shot.pp-shot-art.pp-shot-ask img { left: 6.0%; right: auto; top: 12.0%; width: 88.0%; border-radius: 9px; transform: none; }

  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-recap img.img-light           { right: 3.6%;  left: auto; top: 27.3%; width: 109.0%; transform: none; height: auto; }
  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-recap img.img-dark            { right: 20.1%; left: auto; top: 10.9%; width: 95.0%;  transform: none; height: auto; }

  /* HIS TUNE -- Calendar & Email page. His exact values from the built-in
     tuner. Nothing adjusted, scaled or "improved". */
  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-tasks img { left: 16.0%; right: auto; top: 12.9%; height: 141.5%; width: auto; transform: none; }
  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-mail img  { left: 19.6%; right: auto; top: 13.3%; width: 64.0%; height: auto; transform: none; }
  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-cal img   { right: 9.6%; left: auto; top: 10.9%; width: 130.5%; height: auto; transform: none; }

  /* HIS TUNE -- Frontdesk (product.html), mobile. His exact values from the
     built-in tuner. transform:none undoes the centring the generic rule applies. */
  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-setup img               { right: 13.5%; left: auto; top: 9.6%; width: 74.0%; border-radius: 34px; border-width: 6.5px; transform: none; height: auto; }
  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-today img.lay-today     { left: -2.2%; right: auto; top: 11.0%; width: 54.5%; border-radius: 28px; border-width: 6.5px; transform: none; }
  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-today img.lay-chat      { left: 46.6%; right: auto; top: 38.3%; width: 45.0%; border-radius: 22px; border-width: 6px; transform: none; }
  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-step img.lay-join       { left: 2.1%;  right: auto; top: 19.6%; width: 48.0%; border-radius: 21px; border-width: 3px; transform: none; }
  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-step img.lay-ask        { left: 51.8%; right: auto; top: -19.9%; width: 46.0%; border-radius: 22px; border-width: 4px; transform: none; }
  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-cb img.lay-plan         { left: 3.9%;  right: auto; top: 22.6%; width: 45.0%; border-radius: 22px; border-width: 4.5px; transform: none; }
  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-cb img.lay-done         { left: 50.2%; right: auto; top: -20.9%; width: 46.0%; border-radius: 24px; border-width: 4px; transform: none; }
  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-mem img.lay-clients     { left: 57.2%; right: auto; top: 44.6%; width: 48.5%; border-radius: 18px; border-width: 3.5px; transform: none; }
  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-mem img.lay-recall      { left: 1.4%;  right: auto; top: 22.2%; width: 54.5%; border-radius: 28px; border-width: 5.5px; transform: none; }

  /* Section rhythm on a phone. Desktop breathes at 100px top and bottom with
     128px between feature rows; on a 390px screen that reads as a gap rather
     than a pause. Trimmed about a third -- still airy, no longer a scroll. */
  .pp-sec { padding-top: 68px; padding-bottom: 68px; }
  .pp-feat { gap: 84px; }

  /* The section heads above each video block had NO mobile size -- they held
     their desktop 30px and ran two or three lines on a phone. Brought down a
     step, and the .big variant which was pinned at a flat 48px. */
  .pp-head h2 { font-size: 25px; line-height: 1.22; }
  .pp-head.big h2 { font-size: 30px; line-height: 1.2; }
  .pp-head p { font-size: 15px; line-height: 1.5; }
  .pp-head.big p { font-size: 15px; line-height: 1.5; margin-top: 12px; }
  .pp-head { margin-bottom: 28px; }

  /* On a phone the mail tile shows his real iPhone capture instead of the wide
     desktop one. These rules decide WHICH image is visible; placement comes
     from his tune above and is never touched here. */
  .pp-feat .row .pp-shot.pp-shot-art.pp-shot-mail img.shot-wide { display: none; }
  .pp-shot.pp-shot-art .shot-phone { display: block; }
  .pp-shot.pp-shot-img picture.shot-phone img.img-dark { display: none; }
  :root[data-theme="dark"] .pp-shot.pp-shot-img picture.shot-phone img.img-light { display: none; }
  :root[data-theme="dark"] .pp-shot.pp-shot-img picture.shot-phone img.img-dark { display: block; }
}
:root[data-theme="dark"] .pp-hero.g-finance::before { background: radial-gradient(90% 120% at 20% 10%, rgba(47,182,115,.16) 0%, transparent 55%), radial-gradient(80% 110% at 82% 20%, rgba(79,127,224,.16) 0%, transparent 58%), linear-gradient(180deg, #12161a 0%, #101217 60%, var(--paper) 100%); }
:root[data-theme="dark"] .pp-hero.g-drive::before { background: radial-gradient(90% 120% at 18% 12%, rgba(79,127,224,.18) 0%, transparent 55%), radial-gradient(80% 110% at 85% 18%, rgba(200,90,160,.14) 0%, transparent 58%), linear-gradient(180deg, #12141c 0%, #131218 60%, var(--paper) 100%); }
:root[data-theme="dark"] .pp-shot .side, :root[data-theme="dark"] .pp-shot .pane { background: var(--fill-solid); }
.pp-pane .pp-shot { max-width: 940px; margin: 0 auto; }
/* per-product hero gradients */
.pp-hero.g-pass::before { background: radial-gradient(90% 120% at 18% 12%, #dfe4f7 0%, transparent 55%), radial-gradient(80% 110% at 84% 18%, #d9eef0 0%, transparent 58%), linear-gradient(180deg, #eceffa 0%, #f5f9fa 60%, var(--paper) 100%); }
.pp-hero.g-comm::before { background: radial-gradient(90% 120% at 20% 10%, #fbe6d8 0%, transparent 55%), radial-gradient(80% 110% at 82% 20%, #e6ddf7 0%, transparent 58%), linear-gradient(180deg, #fbf0e8 0%, #f7f4fb 60%, var(--paper) 100%); }
.pp-hero.g-meet::before { background: radial-gradient(90% 120% at 22% 14%, #d9e9f7 0%, transparent 55%), radial-gradient(80% 110% at 80% 16%, #dcf0e4 0%, transparent 58%), linear-gradient(180deg, #e9f1fa 0%, #f2f9f4 60%, var(--paper) 100%); }
.pp-hero.g-conn::before { background: radial-gradient(90% 120% at 16% 10%, #e2ddf7 0%, transparent 55%), radial-gradient(80% 110% at 86% 22%, #dbe9fb 0%, transparent 58%), linear-gradient(180deg, #edeafb 0%, #f3f6fc 60%, var(--paper) 100%); }
.pp-hero.g-cal::before  { background: radial-gradient(90% 120% at 20% 12%, #fae6ec 0%, transparent 55%), radial-gradient(80% 110% at 84% 20%, #e0eafb 0%, transparent 58%), linear-gradient(180deg, #fbeef2 0%, #f2f6fc 60%, var(--paper) 100%); }
.pp-hero.g-crm::before  { background: radial-gradient(90% 120% at 18% 14%, #dff0e6 0%, transparent 55%), radial-gradient(80% 110% at 82% 18%, #f7ecda 0%, transparent 58%), linear-gradient(180deg, #ecf7f0 0%, #fbf6ee 60%, var(--paper) 100%); }
.pp-hero.g-desk::before { background: radial-gradient(90% 120% at 20% 12%, #f7ead9 0%, transparent 55%), radial-gradient(80% 110% at 82% 18%, #dfe8f7 0%, transparent 58%), linear-gradient(180deg, #faf1e6 0%, #f3f6fb 60%, var(--paper) 100%); }
:root[data-theme="dark"] .pp-hero.g-desk::before { background: radial-gradient(90% 120% at 20% 12%, rgba(224,160,80,.14) 0%, transparent 55%), radial-gradient(80% 110% at 82% 18%, rgba(79,127,224,.14) 0%, transparent 58%), linear-gradient(180deg, #161310 0%, #111318 60%, var(--paper) 100%); }
:root[data-theme="dark"] .pp-hero.g-pass::before,
:root[data-theme="dark"] .pp-hero.g-comm::before,
:root[data-theme="dark"] .pp-hero.g-meet::before,
:root[data-theme="dark"] .pp-hero.g-conn::before,
:root[data-theme="dark"] .pp-hero.g-cal::before,
:root[data-theme="dark"] .pp-hero.g-crm::before { background: radial-gradient(90% 120% at 20% 12%, rgba(120,140,220,.16) 0%, transparent 55%), radial-gradient(80% 110% at 82% 18%, rgba(90,180,160,.12) 0%, transparent 58%), linear-gradient(180deg, #13151b 0%, #111318 60%, var(--paper) 100%); }
/* small variation blocks borrowed from other openai pages */
.pp-sec-bullets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.pp-sec-bullets .c { border-top: 1px solid var(--ink); padding-top: 16px; }
.pp-sec-bullets h3 { font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.pp-sec-bullets ul { list-style: none; padding: 0; margin: 0; }
.pp-sec-bullets li { font-size: 13.5px; color: var(--meta); padding: 6px 0 6px 16px; position: relative; line-height: 1.5; }
.pp-sec-bullets li::before { content: "\2014"; position: absolute; left: 0; }
.pp-steps { counter-reset: s; display: grid; gap: 0; max-width: 780px; margin: 0 auto; }
.pp-steps .st { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 16px; padding: 20px 0; border-top: 1px solid var(--border); }
.pp-steps .st:last-child { border-bottom: 1px solid var(--border); }
.pp-steps .n { width: 26px; height: 26px; border-radius: 50%; background: var(--fill); display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.pp-steps h3 { font-size: 15px; font-weight: 600; margin-bottom: 5px; }
.pp-steps p { font-size: 14px; color: var(--meta); line-height: 1.55; }
.pp-quote { border: 1px solid var(--border); border-radius: 16px; padding: 34px 38px; max-width: 860px; margin: 0 auto; }
.pp-quote p { font-size: 20px; line-height: 1.45; letter-spacing: -0.01em; }
.pp-quote .who { font-size: 13px; color: var(--meta); margin-top: 16px; }
.pp-faq { max-width: 780px; margin: 0 auto; }
.pp-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 860px; margin: 0 auto; }
.pp-chips span { border: 1px solid var(--border); border-radius: 999px; padding: 9px 16px; font-size: 13.5px; color: var(--meta); }
@media (max-width: 900px) { .pp-sec-bullets { grid-template-columns: 1fr; } }

/* ============================================================
   Solutions index (mirrors openai.com/solutions)
   ============================================================ */
.sx-hero { text-align: center; padding: 92px var(--pad) 70px; }
.sx-hero h1 { font-size: clamp(2.4rem, calc(2.4rem + 1.9 * ((100vw - 23.4375rem) / 66.5625)), 4.3rem); line-height: 1.06; letter-spacing: -0.03em; font-weight: 600; max-width: 900px; margin: 0 auto; }
.sx-hero p { font-size: 17px; color: var(--meta); max-width: 560px; margin: 20px auto 0; line-height: 1.55; }
.sx-hero .cta { display: flex; justify-content: center; gap: 16px; margin-top: 30px; }
.sx-sec { padding-bottom: 64px; }
.sx-sec h2 { font-size: var(--type-h4-size); letter-spacing: -0.015em; margin-bottom: 22px; }
.sx-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.sx-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.sx-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.sx-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.sx-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.sx-card { display: block; text-decoration: none; color: inherit; }
.sx-card .art { aspect-ratio: 1/1; border-radius: 12px; margin-bottom: 12px; position: relative; overflow: hidden; }
.sx-card .art::after { content: ""; position: absolute; left: 18%; top: 20%; right: 22%; bottom: 26%; border: 3px solid rgba(255,255,255,.72); border-radius: 8px; }
.sx-card .art::before { content: ""; position: absolute; left: 34%; top: 40%; right: 14%; bottom: 12%; background: rgba(255,255,255,.42); border-radius: 8px; }
.sx-card h3 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.sx-card p { font-size: 13.5px; color: var(--meta); line-height: 1.45; }
.sx-card:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.a-blue { background: linear-gradient(150deg,#8ecbf5,#3f9fe0); } .a-rose { background: linear-gradient(150deg,#f4a0b4,#e0536f); }
.a-teal { background: linear-gradient(150deg,#8ee0d2,#33b6a3); } .a-green { background: linear-gradient(150deg,#9fdfa0,#48b45c); }
.a-amber { background: linear-gradient(150deg,#f7c78e,#ec9440); } .a-violet { background: linear-gradient(150deg,#dfa9ec,#b061d6); }
.a-indigo { background: linear-gradient(150deg,#a9b6f0,#5f6fd0); } .a-sun { background: linear-gradient(150deg,#f7dd8e,#e0b53f); }
.sx-blue { background: linear-gradient(160deg,#cfe6fb,#7db6ee 60%,#3f8fd8); }
.sx-big .art { aspect-ratio: 16/10; }
.sx-deploy { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.sx-deploy .d { border: 1px solid var(--border); border-radius: 16px; padding: 28px; }
.sx-deploy h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.sx-deploy p { font-size: 14.5px; color: var(--meta); line-height: 1.55; margin-bottom: 14px; }
.sx-deploy .art { aspect-ratio: 16/9; border-radius: 12px; margin-top: 18px; background: linear-gradient(150deg,#eaf0f8,#d5e2f2); border: 1px solid var(--border); }
.sx-close { text-align: center; padding: 84px var(--pad) 96px; }
.sx-close h2 { font-size: var(--type-h3-size); letter-spacing: -0.02em; max-width: 720px; margin: 0 auto 26px; }
@media (max-width: 1000px) { .sx-grid { grid-template-columns: repeat(3, 1fr); } .sx-grid.cols-5, .sx-grid.cols-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .sx-grid, .sx-grid.cols-5, .sx-grid.cols-4, .sx-grid.cols-2, .sx-deploy { grid-template-columns: 1fr; } }

/* ============================================================
   Heyno Safety Hub — mirrors deploymentsafety.openai.com
   ============================================================ */
.sh-body { background: var(--paper); }
.sh-top { position: sticky; top: 0; z-index: 60; height: 96px; display: flex; align-items: center; gap: 14px; padding: 0 32px; background: rgba(255,255,255,.9); -webkit-backdrop-filter: saturate(1.6) blur(12px); backdrop-filter: saturate(1.6) blur(12px); }
:root[data-theme="dark"] .sh-top { background: rgba(13,13,15,.9); }
.sh-brand { font-size: 21px; font-weight: 600; letter-spacing: -0.015em; }
.sh-sub { font-size: 21px; font-weight: 500; letter-spacing: -0.015em; }
.sh-crumb { display: flex; align-items: center; gap: 10px; padding: 26px 32px 0; font-size: 14px; color: var(--meta); }
.sh-crumb a { color: var(--ink); }
.sh-crumb svg { width: 10px; height: 10px; color: var(--faint); }
.sh-shell { display: grid; grid-template-columns: 305px minmax(0, 1fr); gap: 144px; padding: 24px 32px 96px; align-items: start; position: relative; }
.sh-shell::before { content: ""; position: absolute; left: 385px; top: 24px; bottom: 96px; width: 1px; background: var(--border); }
.sh-side { position: sticky; top: 120px; max-height: calc(100dvh - 150px); overflow-y: auto; scrollbar-width: none; padding-bottom: 24px; }
.sh-side::-webkit-scrollbar { display: none; }
.sh-side .lbl { font-size: 22px; font-weight: 500; letter-spacing: -0.015em; margin-bottom: 18px; }
.sh-side a { display: block; text-decoration: none; border-radius: 8px; }
.sh-side a.l1 { font-size: 17px; font-weight: 400; color: var(--ink); padding: 7px 12px; margin: 2px 0; }
.sh-side a.l2 { font-size: 14px; font-weight: 400; color: var(--meta); padding: 5px 12px 5px 24px; margin: 1px 0; line-height: 1.35; }
.sh-side a.l3 { font-size: 14px; font-weight: 400; color: var(--meta); padding: 5px 12px 5px 40px; margin: 1px 0; line-height: 1.35; }
.sh-side a:hover { background: var(--fill); }
.sh-side a.on { background: var(--fill-solid); color: #2f66e0; }
:root[data-theme="dark"] .sh-side a.on { background: var(--fill-hover); color: #7aa8ff; }
.sh-doc { max-width: 878px; }
.sh-pdf { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 500; }
.sh-pdf svg { width: 11px; height: 11px; }
.sh-pubrow { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.sh-pub { font-size: 14px; color: var(--meta); }
.sh-doc h1 { font-size: 48px; font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 46px; }
.sh-doc h2 { font-size: 30px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; margin: 56px 0 20px; scroll-margin-top: 120px; }
.sh-doc h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.015em; margin: 40px 0 16px; scroll-margin-top: 120px; }
.sh-doc h4 { font-size: 18px; font-weight: 600; margin: 30px 0 12px; scroll-margin-top: 120px; }
.sh-doc p { font-size: 17px; line-height: 28px; margin-bottom: 22px; }
.sh-doc ul, .sh-doc ol { margin: 0 0 22px 22px; }
.sh-doc li { font-size: 17px; line-height: 28px; margin-bottom: 10px; }
.sh-doc .cap { font-size: 14px; color: var(--meta); line-height: 1.55; margin: -6px 0 30px; }
.sh-doc .tnum { font-size: 14px; color: var(--meta); margin-bottom: 8px; }
.sh-table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: 14px; display: block; overflow-x: auto; }
.sh-table th { text-align: left; font-weight: 500; color: var(--meta); padding: 10px 16px 10px 0; border-bottom: 1px solid var(--border); white-space: nowrap; }
.sh-table td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; line-height: 1.5; }
.sh-fig { border: 1px solid var(--border); border-radius: 12px; padding: 22px 24px; margin: 8px 0 12px; }
.sh-bars { display: flex; align-items: stretch; gap: 12px; height: 200px; }
.sh-bars .b { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; }
.sh-bars .b i { width: 100%; border-radius: 4px 4px 0 0; background: linear-gradient(#8fb3f5, #4d7fe0); }
.sh-bars .b span { font-size: 11px; color: var(--meta); text-align: center; line-height: 1.3; }
.sh-note { border-left: 2px solid var(--border); padding-left: 18px; margin: 0 0 22px; font-size: 15px; color: var(--meta); line-height: 1.6; }
@media (max-width: 1100px) {
  .sh-shell { grid-template-columns: 1fr; gap: 28px; }
  .sh-shell::before { display: none; }
  .sh-side { position: static; max-height: none; }
  .sh-doc h1 { font-size: 36px; }
}
@media (max-width: 1100px) {
  .sh-shell { padding-left: 20px; padding-right: 20px; }
  .sh-doc h2 { font-size: 24px; }
  .sh-doc h3 { font-size: 19px; }
  .sh-table { font-size: 13px; }
  .sh-bars { height: 140px; }
  .sh-bars .b span { font-size: 10px; }
  .sh-top { padding: 0 20px; }
  .sh-crumb { padding: 22px 20px 0; }
}
.sh-side, .sh-doc { min-width: 0; }
.sh-side a { overflow-wrap: anywhere; }

/* ---- real charts (inline SVG) ---- */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--border); stroke-width: 1; }
.chart .axis { stroke: var(--border); stroke-width: 1; }
.chart .tick { fill: var(--meta); font-size: 11px; }
.chart .xlab { fill: var(--meta); font-size: 11.5px; }
.chart .vlab { fill: var(--ink); font-size: 11px; font-weight: 500; }
.chart .ttl { fill: var(--ink); font-size: 12.5px; font-weight: 500; }
.chart .s1 { fill: #4d7fe0; } .chart .s2 { fill: #9fb9ea; } .chart .s3 { fill: #2fb673; }
.chart .l1 { stroke: #4d7fe0; } .chart .l2 { stroke: #d98a5a; } .chart .l3 { stroke: #2fb673; }
.chart .band { fill: var(--fill); }
.chart .dot1 { fill: #4d7fe0; } .chart .dot2 { fill: #d98a5a; }
.chart .leg { fill: var(--meta); font-size: 11.5px; }
:root[data-theme="dark"] .chart .s1 { fill: #6f9bf0; } :root[data-theme="dark"] .chart .s2 { fill: #3f5c8a; }

/* ---- scientific figures (notebook style) ---- */
.sci { width: 100%; height: auto; display: block; overflow: visible; font-family: inherit; }
.sci .gd { stroke: #d8dce4; stroke-width: 1; stroke-dasharray: 4 4; }
.sci .gdv { stroke: #e2e6ee; stroke-width: 1; stroke-dasharray: 4 4; }
.sci .ax { stroke: #b9c0cc; stroke-width: 1.2; }
.sci .ref { stroke: #5a6474; stroke-width: 1.4; }
.sci .tk { fill: #5f6b80; font-size: 12px; font-weight: 500; }
.sci .xl { fill: #4a5567; font-size: 12.5px; font-weight: 500; }
.sci .xt { fill: #3d4757; font-size: 13.5px; font-weight: 700; }
.sci .vl { fill: #2b3444; font-size: 11.5px; font-weight: 700; }
.sci .vc { fill: #4a5568; font-size: 10.5px; font-weight: 500; }
.sci .lg { fill: #3d4757; font-size: 12.5px; font-weight: 600; }
.sci .lgk { fill: #4a5568; font-size: 10.5px; }
.sci .eb { stroke: #3d4757; stroke-width: 1.3; }
.sci .bh { fill: url(#hatch); }
.sci .bl { fill: #a9c3f2; }
.sci .bd { fill: #4a72c4; }
.sci .fn { fill: #eaf0fb; }
.sci .fl { fill: none; stroke: #7f9fd8; stroke-width: 1.4; stroke-dasharray: 5 4; }
.sci .pt { fill: #fff; stroke: #4a72c4; stroke-width: 3; }
.sci .pt-out { fill: #fff; stroke: #1f2b44; stroke-width: 3.4; }
.sci .ann { fill: #1f2b44; font-size: 12.5px; font-weight: 700; }
.sci .pill { fill: #fdf1dc; stroke: #f0d5a8; stroke-width: 1; }
.sci .pill.warn { fill: #fbdcb4; stroke: #e8b877; }
.sci .pill.good { fill: #ddf3e6; stroke: #a9dcc0; }
.sci .pill.bad { fill: #fbdde2; stroke: #f0b3bf; }
.sci .pill-t { fill: #75581f; font-size: 11.5px; font-weight: 700; }
.sci .pill-t.good { fill: #236441; } .sci .pill-t.bad { fill: #b03a52; } .sci .pill-t.warn { fill: #9a5f16; }
.sci .pill-lab { fill: #5a6474; font-size: 11.5px; font-weight: 700; }
.sci .ln1 { fill: none; stroke: #4a72c4; stroke-width: 2.4; stroke-linejoin: round; }
.sci .ln2 { fill: none; stroke: #d98a5a; stroke-width: 2.4; stroke-linejoin: round; stroke-dasharray: 6 4; }
.sci .mk1 { fill: #fff; stroke: #4a72c4; stroke-width: 2.6; }
.sci .mk2 { fill: #fff; stroke: #d98a5a; stroke-width: 2.6; }
.sci .cib { fill: #eaf0fb; }
:root[data-theme="dark"] .sci .gd { stroke: rgba(255,255,255,.14); }
:root[data-theme="dark"] .sci .gdv { stroke: rgba(255,255,255,.09); }
:root[data-theme="dark"] .sci .tk, :root[data-theme="dark"] .sci .vc, :root[data-theme="dark"] .sci .lgk { fill: rgba(255,255,255,.55); }
:root[data-theme="dark"] .sci .xl, :root[data-theme="dark"] .sci .lg, :root[data-theme="dark"] .sci .xt,
:root[data-theme="dark"] .sci .vl, :root[data-theme="dark"] .sci .ann { fill: rgba(255,255,255,.88); }
:root[data-theme="dark"] .sci .eb { stroke: rgba(255,255,255,.7); }
:root[data-theme="dark"] .sci .fn, :root[data-theme="dark"] .sci .cib { fill: rgba(90,130,220,.16); }
:root[data-theme="dark"] .sci .pt, :root[data-theme="dark"] .sci .pt-out,
:root[data-theme="dark"] .sci .mk1, :root[data-theme="dark"] .sci .mk2 { fill: #14161c; }
:root[data-theme="dark"] .sci .ref { stroke: rgba(255,255,255,.5); }
.sh-doc p.ref { font-size: 14.5px; line-height: 1.55; margin-bottom: 12px; padding-left: 34px; text-indent: -34px; color: var(--meta); }
.sh-doc p.ref .rn { color: var(--ink); font-weight: 500; margin-right: 8px; }
.sh-doc p.ref a { word-break: break-all; }

/* ---------- platform overview grid: always three across, then scroll ----------
   Measured from openai.com/research: 3 cols + 24px gap down to 768px
   (437→351→299→257→213px cards), then a snap scroller below 768. */
.pillar .news-grid-page { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
.pillar .news-grid-page h3 { font-size: clamp(12.5px, 1.18vw, 17px); line-height: 1.35; margin: 14px 0 6px; }
.pillar .news-grid-page .meta { font-size: clamp(11px, 0.9vw, 13px); }
.pillar .news-grid-page .art-label { font-size: clamp(11px, 1.35vw, 20px); padding: clamp(5px, 0.7vw, 10px) clamp(9px, 1.25vw, 18px); border-radius: 8px; }

@media (max-width: 767px) {
  .pillar .news-grid-page {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(72vw, 283px);
    gap: 24px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: calc(var(--pad) * -1);
    margin-right: calc(var(--pad) * -1);
    padding-left: var(--pad);
    padding-right: var(--pad);
  }
  .pillar .news-grid-page::-webkit-scrollbar { display: none; }
  .pillar .news-grid-page > a { scroll-snap-align: start; }
  .pillar .news-grid-page h3 { font-size: 15px; }
  .pillar .news-grid-page .meta { font-size: 12px; }
  .pillar .news-grid-page .art-label { font-size: 15px; padding: 8px 14px; }
}

/* ---------- .pr-* : index-article shell (openai.com/index/*) ----------
   Rail 191px @12px · content 1130 · prose measure 669 page-centered
   H1 64/500 ls-1.92 · dek 17/28 · H2 30/500 lh39.6 · caption 18/23.4 */
.pr-page { --pr-rail: 191px; --pr-gap: 40px; --pr-shift: calc((var(--pr-rail) + var(--pr-gap)) / 2); }
.pr-wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--pad); }

.pr-hero { padding-top: 88px; text-align: center; }
.pr-metaline { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; font-size: 14px; font-weight: 500; line-height: 19.6px; margin: 0; }
.pr-metaline span { color: var(--ink); }
.pr-metaline b { color: var(--meta); font-weight: 500; }
.pr-hero h1 { font-size: clamp(34px, 4.45vw, 64px); font-weight: 500; line-height: 1.0; letter-spacing: -0.03em; max-width: 1000px; margin: 24px auto 0; }
.pr-dek { font-size: 17px; line-height: 28px; letter-spacing: -0.01em; max-width: 592px; margin: 26px auto 0; }
.pr-hero .pr-cta { margin-top: 34px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

.pr-utils { width: min(669px, 100%); margin: 62px auto 0; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding-top: 26px; }
.pr-utils .listen { display: inline-flex; align-items: center; gap: 16px; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-size: 15px; color: var(--ink); }
.pr-utils .listen i { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; flex: none; }
.pr-utils .listen i svg { width: 10px; height: 12px; fill: var(--paper); display: block; }
.pr-utils .listen em { font-style: normal; color: var(--meta); margin-left: 6px; }
.pr-utils .share { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; color: var(--ink); }
.pr-utils .share svg { width: 16px; height: 16px; display: block; }

.pr-body { display: grid; grid-template-columns: var(--pr-rail) minmax(0, 1fr); gap: var(--pr-gap); margin-top: 96px; padding-bottom: 40px; }
.pr-toc { align-self: start; position: sticky; top: calc(var(--header-h) + 28px); }
.pr-toc a { display: block; font-size: 12px; line-height: 15px; letter-spacing: -0.01em; padding: 8px 0; color: var(--meta); }
.pr-toc a:hover { color: var(--ink); }
.pr-toc a.on { color: var(--ink); font-weight: 500; }
.pr-toc a.sub { padding-left: 15px; }

.pr-doc > p, .pr-doc > h2, .pr-doc > h3, .pr-doc > ul, .pr-doc > ol, .pr-doc > .pr-note, .pr-doc > .pr-tabs, .pr-doc > .pr-stats {
  width: min(669px, 100%);
  /* Centre the measure on the PAGE, not on the content column: the column sits
     (rail + gap)/2 right of the page centre, so pull back by exactly that.
     max(0px, …) is load-bearing — below ~1360px the column is narrower than the
     measure and the raw pull is negative, which slid the prose and the media
     straight under the sticky rail. Clamping at 0 keeps page-centring while
     there is room and falls back to column-aligned once there isn't. */
  margin-left: max(0px, calc(50% - min(669px, 100%) / 2 - var(--pr-shift)));
  margin-right: 0;
}
.pr-doc > p { font-size: 17px; line-height: 28px; letter-spacing: -0.01em; margin-top: 0; margin-bottom: 28px; }
.pr-doc > h2 { font-size: 30px; font-weight: 500; line-height: 39.6px; letter-spacing: -0.01em; margin-top: 64px; margin-bottom: 24px; scroll-margin-top: 96px; }
.pr-doc > h3 { font-size: 21px; font-weight: 500; line-height: 30px; letter-spacing: -0.01em; margin-top: 40px; margin-bottom: 14px; scroll-margin-top: 96px; }
.pr-doc > ul, .pr-doc > ol { padding-left: 22px; margin-bottom: 28px; }
.pr-doc > ul li, .pr-doc > ol li { font-size: 17px; line-height: 28px; letter-spacing: -0.01em; margin-bottom: 12px; }
.pr-doc a.inline { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pr-doc .lead { font-size: 17px; line-height: 28px; }

/* Media is page-centred too, just on a wider measure than the prose.
   Measured on theirs (viewport 1425, centre 712.5): two-up lane x263..1162 (899) mid 712.5;
   carousel x239 w947 mid 712.5; hero image x147 w1130 mid 712. Nothing is column-anchored. */
.pr-doc > figure, .pr-doc > .pr-two, .pr-doc > .pr-band, .pr-doc > .pr-strip {
  margin-right: 0;
}
.pr-doc > figure, .pr-doc > .pr-two, .pr-doc > .pr-strip, .pr-doc > .sf {
  width: min(899px, 100%);
  margin-left: max(0px, calc(50% - min(899px, 100%) / 2 - var(--pr-shift)));
}
.pr-doc > .pr-band {
  width: min(947px, 100%);
  margin-left: max(0px, calc(50% - min(947px, 100%) / 2 - var(--pr-shift)));
}
.pr-figure { margin: 48px 0; }
.pr-figure .art { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-card); }
.pr-figure figcaption { font-size: 18px; line-height: 23.4px; max-width: 380px; margin: 20px auto 0; text-align: center; color: var(--meta); }

.pr-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 48px 0; }
.pr-two figure { margin: 0; }
.pr-two .art { display: block; width: 100%; aspect-ratio: 3 / 4; border-radius: var(--radius-card); position: relative; }
.pr-two figcaption { font-size: 18px; line-height: 23.4px; max-width: 380px; margin-top: 18px; color: var(--meta); }
.pr-two .badge { position: absolute; right: 16px; bottom: 16px; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #111; display: grid; place-items: center; font-size: 15px; font-weight: 500; }

.pr-band { background: var(--fill-solid); border-radius: var(--radius-card); padding: 40px; margin: 48px 0; }
.pr-band .prompt { background: var(--paper); border-radius: 8px; padding: 22px 26px; font-size: 17px; line-height: 28px; max-width: 720px; margin: 0 auto; }
.pr-band .out { display: block; width: min(720px, 100%); aspect-ratio: 16 / 10; border-radius: 8px; margin: 22px auto 0; }

.pr-tabs { display: flex; flex-wrap: wrap; justify-content: center; border: 1px solid var(--border); border-radius: 999px; padding: 5px; width: max-content; max-width: 100%; margin-left: auto !important; margin-right: auto !important; margin-bottom: 26px; }
.pr-tabs button { border: 0; background: none; font: inherit; font-size: 15px; padding: 10px 20px; border-radius: 999px; cursor: pointer; color: var(--ink); white-space: nowrap; }
.pr-tabs button.on { background: var(--fill-solid); }

.pr-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 8px 0 40px; }
.pr-stats .s b { display: block; font-size: 34px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.pr-stats .s span { display: block; font-size: 14px; line-height: 20px; color: var(--meta); margin-top: 8px; }

.pr-note { border-left: 2px solid var(--border); padding: 4px 0 4px 20px; margin: 0 0 28px; }
.pr-note p { font-size: 17px; line-height: 28px; margin: 0; color: var(--meta); }

.pr-next { border-top: 1px solid var(--border); margin-top: 88px; padding: 40px 0 96px; }
.pr-next .lbl { font-size: 13px; font-weight: 500; color: var(--meta); margin: 0 0 22px; }
.pr-next .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pr-next a { display: block; }
.pr-next .art { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-card); }
.pr-next h4 { font-size: 17px; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; margin: 14px 0 6px; }
.pr-next a:hover h4 { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pr-next .m { font-size: 13px; color: var(--meta); margin: 0; display: flex; gap: 10px; }

@media (max-width: 1080px) {
  .pr-page { --pr-rail: 150px; --pr-gap: 28px; }
}
@media (max-width: 900px) {
  .pr-page { --pr-rail: 0px; --pr-gap: 0px; --pr-shift: 0px; }
  .pr-body { grid-template-columns: minmax(0, 1fr); margin-top: 64px; }
  .pr-toc { display: none; }
  .pr-doc > p, .pr-doc > h2, .pr-doc > h3, .pr-doc > ul, .pr-doc > ol, .pr-doc > .pr-note, .pr-doc > .pr-stats,
  .pr-doc > figure, .pr-doc > .pr-two, .pr-doc > .pr-band, .pr-doc > .pr-strip, .pr-doc > .sf { margin-left: auto; margin-right: auto; }
  .pr-hero { padding-top: 56px; }
  .pr-doc > h2 { font-size: 26px; line-height: 34px; }
  .pr-band { padding: 24px; }
}
@media (max-width: 640px) {
  .pr-two { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pr-stats { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pr-next .grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

:root[data-theme="dark"] .pr-band .prompt { background: #101013; }
:root[data-theme="dark"] .pr-tabs { border-color: rgba(255, 255, 255, 0.16); }

/* hero visual spans the content column (theirs: 1130 of 1425, centred), not the full pad */
.pr-wrap > .pr-figure { width: calc(100% - var(--pr-rail) - var(--pr-gap)); margin-left: auto; margin-right: auto; }

/* snap-align must respect the container's own padding, or the browser scrolls
   the first card flush to the viewport edge and it stops lining up with the heading */
@media (max-width: 767px) {
  .pillar .news-grid-page { scroll-padding-left: var(--pad); scroll-padding-right: var(--pad); }
}

/* ---------- .sf-* : pinned/scrolling figure ----------
   Measured on openai.com/index/summarizing-books (viewport 1440):
   figure 899x3420 · two 450 columns (x263, x712) · left cell sticky top:0, 450x900
   with its 450x612 panel centred at y=144 = (900-612)/2 · right stage 820 tall,
   panel 612 at y=104 · label 14/400 right-aligned · arrow 48x48 black square at
   50% of the panel · pager 28px circles, 36px pitch, active rgba(0,0,0,.1), 13px.
   Theirs is lg:-gated — base state is one stacked column with no sticky. */
.sf { background: var(--fill-solid); }
.sf-pin { position: relative; background: rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sf-deck, .sf-panel { position: relative; width: 100%; }
.sf-card, .sf-pane { display: none; }
.sf-card.on, .sf-pane.on { display: block; }

.sf-arrow { position: absolute; top: 50%; right: 0; transform: translate(50%, -50%); width: 48px; height: 48px; border: 0; border-radius: 0; background: #000; color: #fff; cursor: pointer; display: grid; place-items: center; z-index: 2; }
.sf-arrow svg { width: 9px; height: 14px; display: block; }

.sf-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.sf-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.22); cursor: pointer; }
.sf-dots button.on { background: rgba(0, 0, 0, 0.72); }

.sf-pager { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.sf-pager button { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 9999px; background: none; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; }
.sf-pager button.on { background: rgba(0, 0, 0, 0.1); }

.sf-label { font-size: 14px; line-height: 20px; text-align: right; margin: 0 0 14px; }
.sf-label b { display: block; font-weight: 400; }
.sf-label span { display: block; color: var(--meta); }
.sf-cap { font-size: 17px; line-height: 26px; text-align: center; margin: 26px auto 0; max-width: 380px; color: var(--ink); }

/* the white content sheet inside a stage */
.sf-sheet { background: var(--paper); border-radius: 2px; padding: 26px 30px; }
.sf-sheet .k { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--meta); margin: 0 0 14px; }
.sf-sheet .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.07); font-size: 13px; line-height: 19px; }
.sf-sheet .row:last-child { border-bottom: 0; }
.sf-sheet .row b { font-weight: 500; }
.sf-sheet .row i { font-style: normal; color: var(--meta); display: block; }
.sf-sheet .row em { font-style: normal; color: var(--meta); font-size: 12px; white-space: nowrap; }
.sf-sheet .body { font-size: 13px; line-height: 21px; }
.sf-sheet .body p { margin: 0 0 12px; }
.sf-sheet .tag { display: inline-block; font-size: 11px; line-height: 16px; padding: 2px 8px; border-radius: 9999px; background: rgba(0, 0, 0, 0.06); color: var(--meta); }

/* stacked (mobile / tablet): one column, nothing pinned — matches their base state */
.sf { display: block; }
.sf-pin { padding: 28px 24px; }
.sf-stage { padding: 32px 24px 40px; }
.sf-deck .sf-card, .sf-panel .sf-pane { min-height: 320px; }

@media (min-width: 901px) {
  .sf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .sf-pin { position: sticky; top: 0; height: 100vh; padding: 0 44px; }
  .sf-deck { max-width: 380px; }
  .sf-stage { padding: 104px 44px 104px 34px; min-height: 820px; }
  .sf-stage:first-child { padding-top: 104px; }
  .sf-deck .sf-card, .sf-panel .sf-pane { min-height: 0; }
  .sf-panel { min-height: 612px; }
  .sf-panel .sf-pane.on { height: 612px; }
  .sf-panel .sf-sheet { height: 100%; overflow: hidden; }
  .sf-deck { width: 100%; }
  .sf-deck .sf-card.on { height: 612px; }
  .sf-deck .sf-sheet { height: 100%; overflow: hidden; }
}

:root[data-theme="dark"] .sf-pin { background: rgba(255, 255, 255, 0.05); }
:root[data-theme="dark"] .sf-arrow { background: #fff; color: #000; }
:root[data-theme="dark"] .sf-dots button { background: rgba(255, 255, 255, 0.28); }
:root[data-theme="dark"] .sf-dots button.on { background: rgba(255, 255, 255, 0.8); }
:root[data-theme="dark"] .sf-pager button.on { background: rgba(255, 255, 255, 0.14); }
:root[data-theme="dark"] .sf-sheet { background: #101013; }
:root[data-theme="dark"] .sf-sheet .row { border-bottom-color: rgba(255, 255, 255, 0.09); }
:root[data-theme="dark"] .sf-sheet .tag { background: rgba(255, 255, 255, 0.09); }

/* ---------- dark mode: mock UI surfaces ----------
   These panels are simulated product screenshots and were built with literal
   light values (#fff / #f4f4f6 / rgba(255,255,255,.92)), so they stayed white
   in dark mode — and their hardcoded dark text went invisible when they didn't.
   Darken the surface, then restore the text that was pinned to a literal. */
:root[data-theme="dark"] {
  --mock-sheet: #141417;
  --mock-side: #1b1b1e;
  --mock-line: rgba(255, 255, 255, 0.10);
}
:root[data-theme="dark"] .fake-ui,
:root[data-theme="dark"] .app-mock,
:root[data-theme="dark"] .uc-appcard,
:root[data-theme="dark"] .cfg-mock,
:root[data-theme="dark"] .qs-browser,
:root[data-theme="dark"] .qs-menu,
:root[data-theme="dark"] .sol-prompt,
:root[data-theme="dark"] .acv-badge,
:root[data-theme="dark"] .ep-uc-glyph,
:root[data-theme="dark"] .ep-tile,
:root[data-theme="dark"] .ep-sheet { background: var(--mock-sheet); color: var(--ink); }

:root[data-theme="dark"] .fake-ui .fu-side,
:root[data-theme="dark"] .am-side,
:root[data-theme="dark"] .uc-appcard .ac-side,
:root[data-theme="dark"] .uc-appcard .ac-q,
:root[data-theme="dark"] .cfg-mock .nav,
:root[data-theme="dark"] .qs-browser .url,
:root[data-theme="dark"] .qs-menu .opt.sel,
:root[data-theme="dark"] .compare-bar,
:root[data-theme="dark"] .fm-composer .seg .on { background: var(--mock-side); color: var(--ink); }

/* text and rules that were pinned to a literal inside those panels */
:root[data-theme="dark"] .app-mock *,
:root[data-theme="dark"] .uc-appcard *,
:root[data-theme="dark"] .cfg-mock *,
:root[data-theme="dark"] .qs-browser *,
:root[data-theme="dark"] .qs-menu *,
:root[data-theme="dark"] .fm-composer .seg .on { box-shadow: none; }
:root[data-theme="dark"] .sol-prompt { box-shadow: 0 0 0 1px var(--hairline), 0 18px 44px rgba(0, 0, 0, 0.5); color: var(--meta); }
:root[data-theme="dark"] .sol-prompt .go { background: var(--ink); color: var(--paper); }
:root[data-theme="dark"] .pill-cta:hover { background: var(--fill-hover); }
:root[data-theme="dark"] .uc-nav a.on { background: var(--fill-hover); color: var(--ink); }
:root[data-theme="dark"] .uc-nav a:not(.on):hover { background: var(--fill); }
:root[data-theme="dark"] .doc-group a.on { background: var(--fill-hover); color: var(--ink); }
/* .ep-model-body deliberately has NO dark override: it sits ON the image, so any
   background here paints a grey panel over the art. Its text is white in both modes. */

/* remaining light surfaces that had no dark counterpart */
:root[data-theme="dark"] .pill-gray { background: var(--fill); color: var(--ink); }
:root[data-theme="dark"] .pill-gray:hover { background: var(--fill-hover); }
:root[data-theme="dark"] .doc-seg { background: var(--fill-solid); }
:root[data-theme="dark"] .quote-tile { background: var(--fill-solid); color: var(--ink); }
:root[data-theme="dark"] .uc-band { background: var(--fill-solid); }
:root[data-theme="dark"] .uc-new-card { background: var(--fill-solid); color: var(--ink); }

/* ---------- .sy-* : Stories index ----------
   Measured on openai.com/stories (viewport 1440 → 1425 content, pad 32):
   title 48/500 lh55.68 ls-1.44 · filters 18/500 lh23.76 · grid 4 × 322.25 with
   gap-x 24 gap-y 80 · feature spans 3 cols (1015 wide), image 1015×571 = 16/9,
   square corners, title 48/500 · rail is 1 col of 322 square images, title
   18/500, 64px between cards · meta 14/500, tag black then date at 60% */
.sy-head { padding-top: 88px; }
.sy-head h1 { font-size: clamp(32px, 3.35vw, 48px); font-weight: 500; line-height: 1.16; letter-spacing: -0.03em; margin: 0; }
.sy-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; flex-wrap: wrap; }
.sy-filters { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
.sy-filters a { font-size: 18px; font-weight: 500; line-height: 23.76px; letter-spacing: -0.01em; color: var(--meta); }
.sy-filters a.on, .sy-filters a:hover { color: var(--ink); }
.sy-ctl { display: flex; align-items: center; gap: 18px; }
.sy-ctl button { border: 0; background: none; font: inherit; font-size: 14px; font-weight: 500; color: var(--ink); display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.sy-ctl svg { width: 13px; height: 13px; display: block; }

.sy-hero { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 80px 24px; margin-top: 68px; padding-bottom: 96px; align-items: start; }
.sy-feature { grid-column: span 3; }
.sy-rail { grid-column: span 1; display: grid; gap: 64px; align-content: start; }

.sy-hero a { display: block; }
.sy-hero .art { display: block; width: 100%; border-radius: 0; }
.sy-feature .art { aspect-ratio: 16 / 9; }
.sy-rail .art { aspect-ratio: 1 / 1; }
.sy-feature h2 { font-size: clamp(28px, 3.35vw, 48px); font-weight: 500; line-height: 1.16; letter-spacing: -0.03em; margin: 16px 0 0; }
.sy-rail h3 { font-size: 18px; font-weight: 500; line-height: 23.76px; letter-spacing: -0.01em; margin: 16px 0 0; }
.sy-hero a:hover h2, .sy-hero a:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.sy-meta { display: flex; gap: 16px; font-size: 14px; font-weight: 500; line-height: 19.6px; margin: 16px 0 0; }
.sy-meta b { font-weight: 500; color: var(--ink); }
.sy-meta span { color: var(--meta); }

@media (max-width: 1000px) {
  .sy-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 24px; }
  .sy-feature { grid-column: span 2; }
  .sy-rail { grid-column: span 2; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 24px; }
}
@media (max-width: 640px) {
  .sy-hero, .sy-rail { grid-template-columns: minmax(0, 1fr); }
  .sy-feature { grid-column: span 1; }
  .sy-rail { grid-column: span 1; gap: 48px; }
  .sy-head { padding-top: 56px; }
}

/* empty state where a "Load more" button would otherwise sit with nothing to load */
.load-more .none { font-size: 15px; line-height: 24px; color: var(--meta); margin: 0; }

/* .link-arrow draws its own chevron via ::after — any stray inline <svg> has no
   intrinsic size and will expand to fill its container. Cap it. */
.link-arrow svg { width: 8px; height: 8px; display: inline-block; vertical-align: middle; }

/* document list, as on openai.com/policies: underlined name, colon, one-line description */
.pol-docs { list-style: disc; padding-left: 22px; margin: 0 0 18px; }
.pol-docs li { margin: 10px 0; }
.pol-docs a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pol-docs span { color: var(--ink); }

/* ---------- .gp-* : public policy, mirroring openai.com/company/public-policy ----------
   Measured at 1440 (content 1425, pad 32):
   hero split 657 + 657, gap 24, h1 64/500 lh64 left-aligned, lead 17/28, CTA pill 14/500
   pill nav centred, 40px tall, active bg rgba(0,0,0,.04)
   section h2 48/500 lh55.68 centred, intro 17/28 w899 centred
   principles: 5 cols, title 18/500 lh23.76, body 14/500 lh19.6 meta
   cards: 438 wide, 24px gap, 25px padding, hairline border, h4 22/500 lh27.72, body 14/400 lh22.96
   resources rows: 899 wide, title+desc 14/400, "Learn more" right, hairline between
   closing band: bg rgba(0,0,0,.04), 48/500 heading, black pill */
.gp-hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: end; padding: 88px 0 0; }
.gp-hero h1 { font-size: clamp(34px, 4.46vw, 64px); font-weight: 500; line-height: 1.0; letter-spacing: -0.03em; margin: 0; max-width: 560px; }
.gp-hero .lead { font-size: 17px; line-height: 28px; letter-spacing: -0.01em; margin: 25px 0 0; }
.gp-hero .cta { margin-top: 32px; display: inline-flex; }
.gp-art { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-card); }
img.gp-art { height: auto; object-fit: cover; object-position: 50% 80%; }
.ab-terms img.ab-media { object-position: 50% 62%; }
.ab-terms .ab-text { padding-left: 0; }

.gp-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 96px auto 0; width: fit-content; padding: 6px; border: 1px solid var(--border); border-radius: 999px; }
.gp-nav a { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 500; line-height: 14px; letter-spacing: normal; color: var(--ink); }
.gp-nav a:hover, .gp-nav a.on { background: var(--fill); }

.gp-sec { padding-top: 149px; scroll-margin-top: 88px; }
.gp-sec h2 { font-size: clamp(34px, 3.34vw, 48px); font-weight: 500; line-height: 1.16; letter-spacing: -0.03em; text-align: center; max-width: 900px; margin: 0 auto; }
.gp-sec .intro { font-size: 17px; line-height: 1.65; letter-spacing: -0.01em; text-align: center; max-width: 600px; margin: 33px auto 0; }

.gp-principles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
.gp-principles h3 { font-size: 18px; font-weight: 500; line-height: 23.76px; letter-spacing: -0.01em; margin: 0 0 14px; }
.gp-principles p { font-size: 14px; font-weight: 500; line-height: 19.6px; letter-spacing: normal; color: var(--ink); margin: 0; }

.gp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.gp-card { border: 1px solid var(--border); border-radius: var(--radius-card); padding: 25px; display: flex; flex-direction: column; gap: 20px; }
.gp-card .ic { width: 26px; height: 26px; display: block; color: var(--ink); }
.gp-card h4 { font-size: 22px; font-weight: 500; line-height: 27.72px; letter-spacing: -0.01em; margin: 0; }
.gp-card p { font-size: 14px; font-weight: 400; line-height: 22.96px; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.gp-card .more { font-size: 14px; font-weight: 400; line-height: 22.96px; letter-spacing: -0.01em; color: var(--meta); margin-top: auto; }
/* the whole card opens the overlay, same as .t-card on trust.html */
.gp-card.reveal-src { cursor: pointer; transition: background 0.2s ease; }
.gp-card.reveal-src:hover { background: var(--fill); }
.gp-card .t-plus { margin-top: auto; }
.tr-modal-body .m-more { margin-top: 32px; }

.gp-rows { max-width: 899px; margin: 48px auto 0; }
.gp-rows a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 26px 0; border-top: 1px solid var(--border); }
.gp-rows a:last-child { border-bottom: 1px solid var(--border); }
.gp-rows h3 { font-size: 14px; font-weight: 400; line-height: 22.96px; letter-spacing: -0.01em; margin: 0 0 4px; }
.gp-rows p { font-size: 14px; font-weight: 400; line-height: 22.96px; letter-spacing: -0.01em; color: var(--meta); margin: 0; }
.gp-rows .more { font-size: 14px; font-weight: 400; line-height: 22.96px; letter-spacing: -0.01em; white-space: nowrap; color: var(--ink); }
.gp-rows a:hover h3 { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.gp-band { background: var(--fill); border-radius: var(--radius-card); text-align: center; padding: 88px 32px; margin: 96px 0 120px; }
.gp-band h2 { font-size: clamp(30px, 3.35vw, 48px); font-weight: 500; line-height: 1.16; letter-spacing: -0.03em; margin: 0; }
.gp-band p { font-size: 17px; line-height: 28px; max-width: 620px; margin: 20px auto 0; }
.gp-band .pill { margin-top: 32px; }

@media (max-width: 1000px) {
  .gp-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
  .gp-principles > div:nth-child(5) { display: none; }
  .gp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .gp-hero { grid-template-columns: minmax(0, 1fr); }
  .gp-cards { grid-template-columns: minmax(0, 1fr); }
  .gp-band { padding: 56px 24px; }
  .gp-rows a { grid-template-columns: minmax(0, 1fr); gap: 8px; }

  /* The picker wrapped to a second line inside its own pill -- four labels
     will not sit across 342px. It becomes ONE row that swipes sideways, the
     way openai handles a too-wide tab set on a phone. */
  .gp-nav {
    flex-wrap: nowrap; justify-content: flex-start; width: auto;
    margin: 56px -24px 0; padding: 6px 24px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; border: 0; border-radius: 0;
  }
  .gp-nav::-webkit-scrollbar { display: none; }
  .gp-nav a { flex: 0 0 auto; border: 1px solid var(--border); }
  .gp-nav a.on { border-color: transparent; }

  /* the intro paragraph under each section head ran the full column */
  .gp-sec .intro { max-width: 300px; margin-top: 20px; font-size: 15px; line-height: 1.6; }
  .gp-sec h2 { font-size: 26px; line-height: 1.2; }

  /* Principles were a plain stacked list; on a phone they become a swipe
     row of cards, same idiom as the picker above and as openai uses. */
  .gp-principles {
    display: flex; grid-template-columns: none;
    gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 28px -24px 0; padding: 0 24px 6px;
  }
  .gp-principles::-webkit-scrollbar { display: none; }
  .gp-principles > * { flex: 0 0 78vw; scroll-snap-align: start; }

  /* the whole page breathed too hard between sections */
  .gp-sec { padding-top: 64px; }
}

/* dark mode: --faint was 4.28:1 on the page background, just under the 4.5 floor */
:root[data-theme="dark"] { --faint: rgba(255, 255, 255, 0.52); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --faint: rgba(255, 255, 255, 0.52); } }

/* dark chips that stay dark-on-dark: invert them */
:root[data-theme="dark"] .help-icon,
:root[data-theme="dark"] .help-mark,
:root[data-theme="dark"] .chat-dot { background: var(--ink); color: var(--paper); }
:root[data-theme="dark"] .logo-band span { color: var(--meta); }
/* .on-light asserts the band sits on a light surface. .prod-hero is no longer
   light in dark mode, so that exception must not apply inside it. */
:root[data-theme="dark"] .prod-hero .logo-band.on-light span { color: rgba(255, 255, 255, 0.62); }
:root[data-theme="dark"] .logo-band.on-light span { color: rgba(0, 0, 0, 0.6); }

/* ---- dark mode: the last low-contrast holdouts ---- */
/* pastel art tiles keep their light fill in dark mode, so the icon on them must stay dark */
:root[data-theme="dark"] .int-tile,
:root[data-theme="dark"] .int-tile svg { color: #0d0d0f; }
/* status chips: the ink was tuned for a light chip */
:root[data-theme="dark"] .pp-line .tag.ok { background: rgba(47, 182, 115, 0.22); color: #5fd6a0; }
:root[data-theme="dark"] .pp-line .tag.warn { background: rgba(240, 145, 58, 0.22); color: #f0a95e; }
:root[data-theme="dark"] .cfg-cmp .tag { background: rgba(123, 87, 230, 0.24); color: #b39bff; }
:root[data-theme="dark"] .rn2-ga { background: rgba(47, 182, 115, 0.22); color: #5fd6a0; }
/* avatar: light disc, so the initials must be dark */
:root[data-theme="dark"] .q-ava { background: var(--ink); color: var(--paper); }
/* solid black decorative shapes sitting on a dark surface */
:root[data-theme="dark"] .dg-dots i:first-child,
:root[data-theme="dark"] .dg-person::before,
:root[data-theme="dark"] .dg-person::after { background: var(--ink); }

/* icons drawn as solid dark shapes inside light chips — the chip goes dark, so must the shape */
:root[data-theme="dark"] .acv-badge svg,
:root[data-theme="dark"] .ep-tile svg,
:root[data-theme="dark"] .ep-uc-glyph svg { color: var(--ink); }
:root[data-theme="dark"] .acv-badge svg *,
:root[data-theme="dark"] .ep-tile svg *,
:root[data-theme="dark"] .ep-uc-glyph svg * { stroke: var(--ink); }
:root[data-theme="dark"] .acv-badge svg [fill]:not([fill="none"]),
:root[data-theme="dark"] .ep-tile svg [fill]:not([fill="none"]),
:root[data-theme="dark"] .ep-uc-glyph svg [fill]:not([fill="none"]) { fill: var(--ink); }
/* .ic chips on the startups page keep a white face, so their glyph must stay dark */
:root[data-theme="dark"] .su-card .ic, :root[data-theme="dark"] .su-card .ic svg { color: #0d0d0f; }
/* release-notes status badges: !important in the light rule, so match it */
:root[data-theme="dark"] .rn2-ga { color: #5fd6a0 !important; }
:root[data-theme="dark"] .rn2-ga.beta { background: rgba(240, 145, 58, 0.22); color: #f0a95e !important; }
/* inactive segment label inside the dark composer mock sat at 3.97:1 */
:root[data-theme="dark"] .fm-composer .seg span { color: rgba(255, 255, 255, 0.72); }
:root[data-theme="dark"] .fm-composer .seg .on { color: var(--ink); }

/* theirs uses a 0.6 secondary ink on this page; our global --meta is 0.56.
   Token rather than a literal so it still inverts in dark mode. */
:root { --meta-60: rgba(0, 0, 0, 0.6); }
:root[data-theme="dark"] { --meta-60: rgba(255, 255, 255, 0.64); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --meta-60: rgba(255, 255, 255, 0.64); } }
.gp-card .more, .gp-rows p { color: var(--meta-60); }

/* ---------- dark mode: light gradient page surfaces ----------
   These sections kept their light gradients while their text inverted to
   near-white (the for-smb hero bug). Surfaces darken; framed art does not. */
:root[data-theme="dark"] .en-hero { background: linear-gradient(180deg, #14211b 0%, var(--paper) 62%); }
:root[data-theme="dark"] .su-hero { background: linear-gradient(180deg, #251a21 0%, var(--paper) 72%); }
:root[data-theme="dark"] .sb-hero { background: linear-gradient(180deg, #251a21 0%, var(--paper) 80%); }
:root[data-theme="dark"] .su-live { background: linear-gradient(180deg, #241a20, #1c1418); }
:root[data-theme="dark"] .sol-hero { background: radial-gradient(80% 60% at 85% 0%, rgba(90, 130, 200, 0.22), transparent 60%), linear-gradient(180deg, #161b24 0%, #10141b 60%, var(--paper) 100%); }
:root[data-theme="dark"] .sol-hero .boxed { background: rgba(255, 255, 255, 0.12); color: var(--ink); }
:root[data-theme="dark"] .acv-hero { background: linear-gradient(180deg, rgba(37, 26, 33, 0) 18%, #251a21 100%); }
:root[data-theme="dark"] .tier-head-a { background: linear-gradient(120deg, #2a1e26 0%, #1e2030 60%, #182430 100%); }
:root[data-theme="dark"] .tier-head-b { background: linear-gradient(120deg, #14283a 0%, #1a3550 100%); }
:root[data-theme="dark"] .why .quote-card { background: var(--fill-solid); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.6); }
/* annotation pills in the scientific figures keep their cream fill — ink stays dark */
:root[data-theme="dark"] .sci .pill-t { fill: #2b2822; }
:root[data-theme="dark"] .art-label { background: rgba(255, 255, 255, 0.92); color: #111; }

:root[data-theme="dark"] .tier-head p { color: rgba(255, 255, 255, 0.72); }
:root[data-theme="dark"] .sol-hero .sol-sub { color: rgba(255, 255, 255, 0.72); }

:root[data-theme="dark"] .chub-label { fill: #111; }
:root[data-theme="dark"] .sci .tk, :root[data-theme="dark"] .sci .vc, :root[data-theme="dark"] .sci .lgk { fill: rgba(255, 255, 255, 0.7); }


:root[data-theme="dark"] .sh-side a.on { color: #7ba4ff; }
/* sci figure inks that sat just under the line in light, plus the dark label */
:root[data-theme="dark"] .sci .pill-lab { fill: rgba(255, 255, 255, 0.78); }

/* ---------- government: request-pricing form ---------- */
.gov-form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 24px; max-width: 720px; margin: 8px auto 0;
}
.csl-card.gov-form { margin-top: 0; }
.gov-form .csl-card-head { margin-bottom: -8px; }
.gov-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gov-field-wide, .gov-actions, .gov-said { grid-column: 1 / -1; }
.gov-field label { font-size: 14px; font-weight: 500; }
.gov-field small { font-size: 13px; line-height: 1.45; color: var(--meta); }
.gov-field textarea { resize: vertical; }
.gov-field input, .gov-field select, .gov-field textarea {
  font: inherit; font-size: 16px; line-height: 1.4; color: var(--ink);
  background: var(--paper); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; width: 100%; -webkit-appearance: none; appearance: none;
}
.gov-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}
.gov-field input::placeholder { color: var(--meta-60); }
.gov-field input:focus, .gov-field select:focus { outline: none; border-color: var(--ink); }
.gov-field input:user-invalid { border-color: #c8443c; }
.gov-actions { display: flex; }
.gov-form button { border: 0; cursor: pointer; font: inherit; font-size: 15px; height: 44px; padding: 0 24px; }
.gov-said { font-size: 15px; line-height: 1.6; margin: 0; }
.gov-said a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .gov-form { grid-template-columns: 1fr; } .gov-form button { width: 100%; } }

/* the hero chart runs 150px past the prompt bar; without this the next
   section head sits inside it. team-marketing gets the same gap from its
   logo band, which these pages do not have. */
.sol-hero + .stack { padding-top: calc(var(--gap-section) + 56px); }

/* three items in a five-column grid sat in the first three cells, which reads
   as left-aligned against a centred heading. Give a three-item block its own
   centred 3-up track. */
.gp-principles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; text-align: center; }
.gp-principles.three > div { max-width: 340px; margin: 0 auto; }
/* .gp-cards carries margin-top: 48px; .sx-grid does not, so it butted straight
   up against the section intro. */
.gp-sec .sx-grid { margin-top: 48px; }
/* request pricing opens from a button */
.gov-open { display: flex; justify-content: center; margin-top: 36px; }
.gov-form[hidden] { display: none; }
@media (max-width: 860px) { .gp-principles.three { grid-template-columns: 1fr; } }


/* government: the sizing note under the tier stats, and the pricing opener
   inside the closing CTA (which is centred, so the form centres with it) */
.biz-cta .gov-open { margin-top: 0; }
.biz-cta .gov-form { text-align: left; margin-top: 40px; }

/* ---------- story collage (measured on openai.com/business) ----------
   Five cards in a scattered row. Idle: every card in full colour.
   Hover one: that card stays colour, the rest go grayscale(1) saturate(.08)
   over 0.26s cubic-bezier(.22,1,.36,1). Their exact values. */
.collage-story { height: 352px; }
.collage-story .st-c {
  position: absolute; border-radius: 14px; border: 6px solid #fff; overflow: hidden;
  box-shadow: 0 24px 60px rgba(30, 45, 80, 0.16);
  display: block; text-decoration: none;
}
.collage-story .st-c .art { position: absolute; inset: 0; transition: filter 0.26s cubic-bezier(0.22, 1, 0.36, 1); }
.collage-story:hover .st-c .art { filter: grayscale(1) saturate(0.08); }
.collage-story .st-c:hover .art { filter: none; }
.collage-story .st-c .rs {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, 0.94); color: #0a0a0a;
  font-size: 13px; font-weight: 500; line-height: 1;
  padding: 9px 14px; border-radius: 40px;
}
.collage-story .c1 { width: 404px; height: 332px; left: -60px;  top: 12px;  transform: rotate(-4deg); z-index: 2; }
.collage-story .c2 { width: 338px; height: 281px; left: 250px;  top: 62px;  transform: rotate(2deg);  z-index: 3; }
.collage-story .c3 { width: 463px; height: 344px; left: 50%; margin-left: -231px; top: 0; z-index: 4; }
.collage-story .c4 { width: 348px; height: 270px; right: 250px; top: 62px;  transform: rotate(-2deg); z-index: 3; }
.collage-story .c5 { width: 383px; height: 297px; right: -60px; top: 12px;  transform: rotate(4deg);  z-index: 2; }
.collage-note { font-size: 14px; line-height: 1.6; color: var(--meta); text-align: center; max-width: 620px; margin: 30px auto 0; }
@media (max-width: 1080px) {
  .collage-story { height: 260px; }
  .collage-story .st-c { display: none; }
  .collage-story .c2, .collage-story .c3, .collage-story .c4 { display: block; }
  .collage-story .c2 { width: 240px; height: 200px; left: 4%; top: 40px; }
  .collage-story .c3 { width: 320px; height: 244px; }
  .collage-story .c4 { width: 240px; height: 200px; right: 4%; top: 40px; }
}
@media (max-width: 700px) {
  .collage-story { height: 230px; }
  .collage-story .c2, .collage-story .c4 { display: none; }
  .collage-story .c3 { width: min(340px, 86vw); height: 220px; margin-left: 0; left: 50%; transform: translateX(-50%); }
}

/* ---------- illustrative-scenario banner on a story page ---------- */
.ill-note {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 20px; margin: 0 0 34px;
  font-size: 14px; line-height: 1.6; color: var(--meta);
}
.ill-note b { color: var(--ink); font-weight: 500; }

/* ---------- feature accordion (measured on openai.com/solutions/use-case/coding)
   Section 1130 wide. Header row: h2 48px + lead 17px.
   Body row 497 tall: a 265px rail of buttons on the left, an 842x473 media panel
   on the right. Active item: h3 22px with its body expanded. Inactive: h3 14px,
   body collapsed. Media panels stack in place and cross-fade on opacity. */
.fx { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 52px; margin-top: 44px; align-items: start; }
.fx-rail { display: flex; flex-direction: column; }
.fx-item { border-top: 1px solid var(--border); }
/* no rule above the first item — the section heading is the boundary.
   Scoped to #capabilities so the enterprise rail is untouched. */
#capabilities .fx-item:first-child { border-top: 0; }

/* Government capabilities rail — nudged for this section only, so the enterprise
   rail that shares these classes is left alone. Wider text column, larger titles,
   more air above and below them; the media panel gives up the width the rail
   takes and, being 16/9, loses height with it. */
#capabilities .fx { grid-template-columns: 284px minmax(0, 1fr); gap: 80px; }
/* Every title sits in ink at regular weight, evenly between its rules; only the
   one under the cursor drops back to gray. The base rail does the opposite. */
#capabilities .fx-item button {
  padding: 21px 0; font-size: 17px; font-weight: 400;
  color: var(--ink); opacity: 1;
}
#capabilities .fx-item.on button { font-size: 22px; font-weight: 400; padding-bottom: 14px; }
/* pointing at the list dims the others; whatever is under the cursor stays in
   ink. :not(:hover) inside :has() picks the excluded ones directly, so there is
   no specificity race with the hovered element's own rule. */
#capabilities .fx-rail:has(button:hover) .fx-item:not(.on) button:not(:hover) {
  color: var(--meta); opacity: 0.62;
}
/* The panel is sized by the grid, never by max-width: it is a grid item whose
   panes are absolutely positioned, so any width cap collapses it to nothing.
   Width comes off the media column instead, which keeps its right edge on the
   page margin with everything else. */
.fx-item:last-child { border-bottom: 1px solid var(--border); }
.fx-item button {
  width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 17px 0; font: inherit; color: var(--meta);
  font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em;
  transition: color 0.2s ease, font-size 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.fx-item button { opacity: 0.62; }
.fx-item.on button { color: var(--ink); opacity: 1; font-size: 18px; line-height: 1.28; padding-bottom: 10px; }
.fx-item:not(.on) button:hover { color: var(--ink); opacity: 1; }
.fx-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
.fx-item.on .fx-body { grid-template-rows: 1fr; }
.fx-body > div { overflow: hidden; }
.fx-body p { font-size: 12.75px; line-height: 1.62; color: var(--meta); margin: 0 0 18px; }
.fx-media { position: relative; aspect-ratio: 842 / 473; border-radius: 22px; overflow: hidden; border: 1px solid var(--hairline); }
.fx-pane {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  display: grid; place-items: center;
  /* the video carries its own rounding: a video layer is not reliably clipped by the frame */
  border-radius: inherit; overflow: hidden;
}
.fx-pane.on { opacity: 1; pointer-events: auto; }
.fx-pane-video { padding: 0; }
/* contain, not cover: the pane can run taller than 16:9 and cropping would cut the UI */
.fx-vid { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: inherit; }
.fx-pane .lbl { font-size: 15px; font-weight: 500; color: rgba(0,0,0,.62); letter-spacing: -0.01em; }
/* below this the video takes the full width and the rail reads underneath it,
   rather than the video shrinking to share the row */
@media (max-width: 1100px) {
  .fx, #capabilities .fx { grid-template-columns: 1fr; gap: 28px; }
  .fx-media { order: -1; }
}

/* the government capabilities rail runs eleven items; the pane follows its height */
@media (min-width: 1101px) {
  #capabilities .fx { align-items: stretch; }
  #capabilities .fx-media { aspect-ratio: auto; }
}

/* ---------- three-card row, healthcare shape: 438x266, 24px gap, 25px inset ---- */
.hc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.hc-card {
  border: 1px solid var(--border); border-radius: 16px; min-height: 214px;
  padding: 25px; display: flex; flex-direction: column; gap: 12px;
  transition: border-color 0.2s ease;
}
a.hc-card:hover { border-color: var(--ink); }
a.hc-card:hover h3 { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.hc-card .ic { display: block; width: 26px; height: 26px; color: var(--ink); }
.hc-card h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; margin: 4px 0 0; }
.hc-card p { font-size: 14px; line-height: 1.55; color: var(--meta); margin: 0; }
.hc-card .more { font-size: 14px; color: var(--ink); margin-top: auto; }
.hc-link { display: flex; justify-content: center; margin-top: 26px; }
@media (max-width: 900px) { .hc-cards { grid-template-columns: 1fr; } }

/* The story cards carried nothing but a gradient and a pill, so the large centre
   card read as a video player. The headline makes each one legible as a story. */
.collage-story .st-c .st-t {
  position: absolute; left: 16px; right: 16px; top: 16px; z-index: 2;
  color: #fff; font-size: 15px; font-weight: 500; line-height: 1.32;
  letter-spacing: -0.01em; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.32);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.collage-story .c2 .st-t, .collage-story .c4 .st-t { font-size: 14px; }

/* ---------- 3 cards, measured on openai.com/business/why-openai/enterprises
   ("Built for business. Backed by frontier AI."): row of 438x496 cards, gap 24,
   radius 6.08. Text FIRST — h4 22/500, body 14/400, gap 8, inset 32 — then a
   full-bleed 5/4 media block. Every text colour there is pure black. */
.fs-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.fs-card {
  border-radius: 6px; overflow: hidden; display: flex; flex-direction: column;
  text-align: left; background: var(--fill);
}
.fs-head { padding: 32px 32px 26px; display: flex; flex-direction: column; gap: 8px; }
.fs-head h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.28; margin: 0; color: var(--ink); }
.fs-head p { font-size: 14px; line-height: 1.5; margin: 0; color: var(--ink); }
.fs-card .shot { aspect-ratio: 5 / 4; margin-top: auto; display: grid; place-items: center; }
.fs-card .shot span { font-size: 14px; font-weight: 500; color: rgba(0,0,0,.6); letter-spacing: -0.01em; }
@media (max-width: 900px) { .fs-cards { grid-template-columns: 1fr; } }

/* ---------- deployment, measured on openai.com/business/why-openai/enterprises
   ("Deployment: Make AI part of everyday work"): 1120 section, two 548 columns,
   h3 30px left, body 17px, pill link 40 tall. Cards sit under it. ------------- */
.dp { display: grid; grid-template-columns: repeat(2, minmax(0, 548px)); gap: 24px; justify-content: center; align-items: center; margin-top: 12px; }
.dp-txt { display: flex; flex-direction: column; gap: 20px; text-align: left; max-width: 460px; }
.dp-txt h3 { font-size: 30px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.24; margin: 0; }
.dp-txt p { font-size: 17px; line-height: 1.6; color: var(--meta); margin: 0; }
.dp-shot { aspect-ratio: 548 / 411; border-radius: 14px; display: grid; place-items: center; }
.dp-shot { padding: 34px; align-content: center; }
.dp-tiers { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 400px; margin: 0 auto; }
/* columns, not space-between: otherwise the label length shifts "up to" per row */
.dp-tier {
  display: grid; grid-template-columns: 1fr auto 48px; align-items: baseline; gap: 16px;
  background: rgba(255, 255, 255, 0.92); border-radius: 14px; padding: 18px 22px;
  box-shadow: 0 1px 2px rgba(16, 30, 60, 0.06), 0 10px 24px rgba(16, 30, 60, 0.07);
}
.dp-tier b { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: #0a0a0a; }
.dp-tier i { font-style: normal; font-size: 14px; color: rgba(0, 0, 0, 0.62); }
.dp-tier em { font-style: normal; font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: #0a0a0a; text-align: right; }
@media (max-width: 900px) { .dp { grid-template-columns: 1fr; } .dp-shot { order: -1; } }

/* Measured on openai.com/business/why-openai/enterprises: every text node in a
   feature section is rgb(0,0,0) — 48/500 heading, 17/400 lead, 22/500 card title,
   14/400 card body. We were setting --meta (56% black) on the body copy. */
.biz-section-head p { color: var(--ink); }
.fx-body p { color: var(--meta); }   /* the rail's subtext reads gray under a black title */
.hc-card p { color: var(--ink); }
.dp-txt p { color: var(--ink); }
.en-lead { color: var(--ink); }
.gp-rows p { color: var(--ink); }

/* The .fake-ui mock gets a dark override (line ~2147) but its .fm-* frame never
   did, so on product.html a darkened panel sat inside a light pastel card. Same
   hues, dark-surface luminance, so the frame and the panel invert together. */
:root[data-theme="dark"] .fm-1 { background: linear-gradient(150deg, #1a1d2b 0%, #232741 100%); }
:root[data-theme="dark"] .fm-2 { background: linear-gradient(150deg, #221c2e 0%, #2c2340 100%); }
:root[data-theme="dark"] .fm-3 { background: linear-gradient(150deg, #17222b 0%, #1d2f3d 100%); }
:root[data-theme="dark"] .fm-4 { background: linear-gradient(150deg, #182219 0%, #1f2e22 100%); }
:root[data-theme="dark"] .fm-5 { background: linear-gradient(150deg, #251e17 0%, #33281d 100%); }

/* Story-card headlines are white; the amber and grey gradients are light enough
   that a text-shadow alone left them at 1.7:1. A top scrim fixes it without
   darkening the art the way a full overlay would. It has to still be holding
   ~0.45 where the THIRD clamped line sits (~76px down) — the first version
   faded by then and the last line measured 3.34:1. */
.collage-story .st-c::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 64%;
  background: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.56) 34%, rgba(0,0,0,.22) 64%, rgba(0,0,0,0) 100%);
  z-index: 1; pointer-events: none;
}

/* Hovering a story card un-greyed it but left it in its stacking order, so the
   headline stayed behind whichever neighbour overlapped it. Raise it instead. */
.collage-story .st-c { transition: filter 0.26s cubic-bezier(0.22,1,0.36,1), transform 0.26s cubic-bezier(0.22,1,0.36,1); }
.collage-story .st-c:hover { z-index: 9; transform: scale(1.03); }
.collage-story .c1:hover { transform: rotate(-4deg) scale(1.04); }
.collage-story .c2:hover { transform: rotate(2deg) scale(1.04); }
.collage-story .c4:hover { transform: rotate(-2deg) scale(1.04); }
.collage-story .c5:hover { transform: rotate(4deg) scale(1.04); }

/* product.html kept three light surfaces in dark mode. They are gradients, so a
   background-COLOR probe reported them clean — these were caught by sampling the
   rendered pixels: hero rgb(191,215,252), media cards rgb(222,230,242), and the
   closing band at pure rgb(255,255,255). */
:root[data-theme="dark"] .prod-hero {
  background: radial-gradient(90% 120% at 20% 8%, #16213a 0%, transparent 58%),
              radial-gradient(80% 110% at 84% 16%, #1b2036 0%, transparent 60%),
              linear-gradient(180deg, #12172a 0%, #101322 58%, var(--paper) 100%);
}
:root[data-theme="dark"] .prod-cta { background: var(--fill-solid); }
:root[data-theme="dark"] .media-card { background: linear-gradient(150deg, #1a1f2b 0%, #232a3a 100%); }

/* I darkened .prod-hero / .trusted / .media-card without restoring the text
   pinned to black literals inside them — the exact trap the note above warns
   about. Measured after the change: .tm-label 1.21:1, .lb-1..5 1.13-1.16:1. */
:root[data-theme="dark"] .tm-label { color: rgba(255, 255, 255, 0.78); }
:root[data-theme="dark"] .logo-band span,
:root[data-theme="dark"] .lb-1,
:root[data-theme="dark"] .lb-2,
:root[data-theme="dark"] .lb-3,
:root[data-theme="dark"] .lb-4,
:root[data-theme="dark"] .lb-5 { color: rgba(255, 255, 255, 0.62); }

/* Remaining literals inside .prod-hero / .prod-cta, which are dark surfaces now. */
:root[data-theme="dark"] .prod-hero > p { color: rgba(255, 255, 255, 0.66); }
:root[data-theme="dark"] .prod-cta p { color: rgba(255, 255, 255, 0.66); }

/* Replaces the purple orb in the voice mock: a live waveform reads as listening
   without a big saturated blob. Bars are staggered so it never looks periodic. */
.fm-voice .vz { display: flex; align-items: center; justify-content: center; gap: 4px; height: 44px; margin-top: 10px; }
.fm-voice .vz i {
  width: 3px; border-radius: 2px; background: var(--ink); opacity: 0.55;
  animation: vz-bounce 1.1s ease-in-out infinite;
}
.fm-voice .vz i:nth-child(1) { height: 30%; animation-delay: 0s; }
.fm-voice .vz i:nth-child(2) { height: 58%; animation-delay: 0.09s; }
.fm-voice .vz i:nth-child(3) { height: 82%; animation-delay: 0.17s; }
.fm-voice .vz i:nth-child(4) { height: 46%; animation-delay: 0.26s; }
.fm-voice .vz i:nth-child(5) { height: 96%; animation-delay: 0.05s; }
.fm-voice .vz i:nth-child(6) { height: 64%; animation-delay: 0.31s; }
.fm-voice .vz i:nth-child(7) { height: 38%; animation-delay: 0.13s; }
.fm-voice .vz i:nth-child(8) { height: 88%; animation-delay: 0.22s; }
.fm-voice .vz i:nth-child(9) { height: 52%; animation-delay: 0.36s; }
.fm-voice .vz i:nth-child(10) { height: 74%; animation-delay: 0.02s; }
.fm-voice .vz i:nth-child(11) { height: 42%; animation-delay: 0.28s; }
.fm-voice .vz i:nth-child(12) { height: 26%; animation-delay: 0.15s; }
@keyframes vz-bounce { 0%, 100% { transform: scaleY(0.42); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .fm-voice .vz i { animation: none; } }

/* ---------- stories grid, measured on openai.com/stories:
   4 columns of 322.25px, gap 80px 24px, square art, square corners. ---------- */
.sy-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 80px 24px; margin-top: 56px; }
.sy-sq { display: block; }
.sy-sq .art { display: block; aspect-ratio: 1 / 1; border-radius: var(--radius-card); margin-bottom: 20px; }
.sy-sq h3 { font-size: 18px; font-weight: 500; line-height: 1.32; letter-spacing: -0.01em; margin: 0 0 10px; }
.sy-sq .meta { display: flex; gap: 12px; font-size: 14px; }
.sy-sq .meta b { font-weight: 500; color: var(--ink); }
.sy-sq .meta span { color: var(--meta); }
.sy-sq:hover h3 { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (max-width: 1080px) { .sy-grid { grid-template-columns: repeat(3, 1fr); gap: 56px 24px; } }
@media (max-width: 760px) { .sy-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 16px; } }

/* ---------- story pull quote + inline shot, measured on
   openai.com/index/cycling-across-antarctica: short paragraphs, a pull quote
   with attribution near the top, and images between sections. ---------- */
.story-q { margin: 36px 0; padding: 0; border: 0; }
.story-q p {
  font-size: 24px; font-weight: 500; line-height: 1.38; letter-spacing: -0.02em;
  color: var(--ink); margin: 0 0 14px;
}
.story-q cite { font-style: normal; font-size: 14px; color: var(--meta); }
.story-shot {
  display: block; margin: 34px 0; border-radius: 12px; aspect-ratio: 16 / 9;
  position: relative; overflow: hidden;
}
.story-shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px;
  font-size: 13px; color: #fff; letter-spacing: -0.01em;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.46) 100%);
}

/* ---------- story imagery, measured on /index/cycling-across-antarctica:
   text column 596 wide, images 1188 (2x the measure) breaking out either side,
   plus one full-bleed 1425, all square-cornered. Our measure is 720, so the
   breakout is scaled to keep the same 2:1 relationship. ---------- */
.story-shot { width: min(1180px, calc(100vw - 64px)); margin-left: 50%; transform: translateX(-50%); border-radius: 0; }
.story-shot.wide { width: 100vw; margin-left: 50%; transform: translateX(-50%); max-width: none; }
.story-row {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  width: min(1180px, calc(100vw - 64px)); margin: 34px 0 34px 50%; transform: translateX(-50%);
}
.story-row .story-shot { width: auto; margin: 0; transform: none; }
@media (max-width: 820px) {
  .story-shot, .story-row { width: calc(100vw - 40px); }
  .story-row { grid-template-columns: 1fr; }
}

/* ================= STORY PAGE — measured on /index/cycling-across-antarctica
   viewport 1440 · content 1425
   H1        x312 w802  64px  CENTER
   dek       x415 w596  17px  CENTER
   quote     x279 w867  30px  CENTER      cite x390 w645 14px CENTER
   H2        x378 w669  48px  LEFT
   body      x378 w669  17px  LEFT
   carousel  x107 w1425 flex, scrollWidth 4846, slides 1188x668, pitch 1211
   arrows    32x32, pair sitting above the carousel, right of the measure
   closing   x263 w899  48px CENTER + pill
   No table of contents anywhere on the page. ============================== */
.sty { --measure: 669px; }
.sty-page .site-header { position: absolute; left: 0; right: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.sty-page .site-header.scrolled { position: fixed; top: 0; background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); }
:root[data-theme="dark"] .sty-page .site-header.scrolled { background: rgba(13, 13, 15, 0.82); }
.sty-hero { position: relative; width: 100vw; margin: 0 calc(50% - 50vw); height: 78.7vh; min-height: 480px; overflow: hidden; }
.sty-wide { position: relative; width: 100vw; margin: 92px calc(50% - 50vw) 0; aspect-ratio: 1410 / 790; overflow: hidden; }
.sty-wide-art { position: absolute; inset: 0; }
.sty-media { position: relative; width: min(1117px, calc(100vw - 64px)); margin: 110px auto 0; aspect-ratio: 16 / 9; overflow: hidden; }
.sty-media-art { position: absolute; inset: 0; }
.sty-hero .sty-hero-art { position: absolute; inset: 0; }
.sty-hero .sty-hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.04) 30%, rgba(0, 0, 0, 0.42) 100%); }
.sty-hero-inner { position: absolute; left: 50%; transform: translateX(-50%); bottom: 104px; width: min(802px, 92%); text-align: center; color: #fff; }
.sty-hero-inner h1 { font-size: clamp(38px, 4.46vw, 64px); font-weight: 500; line-height: 1.0; letter-spacing: -0.03em; color: #fff; margin: 0; }
.sty-hero-inner .sty-dek { color: #fff; width: min(596px, 100%); margin: 24px auto 0; }
.sty-hero-note { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 16px 32px; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.78); text-align: center; }
.sty-hero-note b { font-weight: 500; color: #fff; }
@media (max-width: 700px) { .sty-hero-inner { bottom: 84px; } .sty-hero-note { padding: 12px 20px; font-size: 12px; } }
.sty-head { text-align: center; padding-top: 56px; }
.sty-meta { display: flex; justify-content: center; gap: 20px; font-size: 14px; font-weight: 500; margin-bottom: 26px; }
.sty-meta span { color: var(--meta); }
.sty-meta b { font-weight: 500; }
.sty h1 { font-size: clamp(38px, 4.45vw, 64px); font-weight: 500; line-height: 1.06; letter-spacing: -0.03em; max-width: 802px; margin: 0 auto; }
.sty-dek { font-size: 17px; line-height: 28px; letter-spacing: -0.01em; width: min(596px, 100%); margin: 26px auto 0; }
.sty-q { width: min(857px, 100%); margin: 122px auto 0; text-align: center; border: 0; padding: 0; }
.sty-q p { font-size: 30px; font-weight: 500; line-height: 1.32; letter-spacing: -0.02em; margin: 0; color: var(--ink); }
.sty-q cite { display: block; font-style: normal; font-size: 14px; font-weight: 500; line-height: 19.6px; color: var(--ink); margin-top: 32px; }
.sty-sec { width: min(var(--measure), 100%); margin: 92px auto 0; text-align: left; }
.sty-sec h2 { font-size: clamp(30px, 3.35vw, 48px); font-weight: 500; line-height: 1.16; letter-spacing: -0.03em; margin: 0 0 26px; }
.sty-sec p { font-size: 17px; line-height: 28px; letter-spacing: -0.01em; margin: 0 0 28px; color: var(--ink); }
.sty-sec p:last-child { margin-bottom: 0; }
.sty-car-wrap { margin: 64px 0 0; }
.sty-car-ctl { width: min(var(--measure), 100%); margin: 0 auto 24px; display: flex; justify-content: flex-end; gap: 16px; }
.sty-car-ctl button {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border);
  background: none; cursor: pointer; display: grid; place-items: center; color: var(--ink);
  transition: background-color 0.18s ease, opacity 0.18s ease;
}
.sty-car-ctl button:hover { background: var(--fill); }
.sty-car-ctl button svg { width: 13px; height: 13px; }
.sty-car {
  display: flex; gap: 23px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding: 0 var(--pad); scrollbar-width: none;
}
.sty-car::-webkit-scrollbar { display: none; }
.sty-car > figure { flex: 0 0 1188px; max-width: calc(100vw - 64px); margin: 0; scroll-snap-align: start; }
.sty-car .shot { display: block; width: 100%; aspect-ratio: 1188 / 668; border-radius: 0; }
.sty-car figcaption { font-size: 14px; line-height: 1.5; color: var(--meta); margin-top: 14px; }
.sty-full { margin: 64px 0 0; }
.sty-full .shot { display: block; width: 100vw; margin-left: calc(50% - 50vw); aspect-ratio: 1425 / 790; border-radius: 0; }
.sty-full figcaption { width: min(var(--measure), 100%); margin: 14px auto 0; font-size: 14px; color: var(--meta); }
.sty-close { background: var(--fill); border-radius: 6px; text-align: center; padding: 120px 32px; margin: 119px 0 120px; }
.sty-close h2 { font-size: clamp(30px, 3.35vw, 48px); font-weight: 500; line-height: 1.16; letter-spacing: -0.03em; margin: 0; }
.sty-close p { font-size: 17px; line-height: 28px; margin: 20px auto 0; max-width: 620px; }
.sty-close .pill { margin-top: 100px; }
.sty-note { width: min(var(--measure), 100%); margin: 44px auto 0; }
@media (max-width: 820px) {
  .sty-car > figure { flex-basis: calc(100vw - 40px); }
  .sty-sec { margin-top: 64px; }
}

/* Carousel breaks out of the container: theirs sits at x107 w1425 on a 1440
   viewport with the first slide at x119, i.e. full-bleed with a 12px inset. */
.sty-car-wrap { width: 100vw; margin-left: calc(50% - 50vw); }
.sty-car-ctl { width: min(669px, calc(100vw - 64px)); }
.sty-car { padding: 0 max(12px, calc((100vw - 1425px) / 2 + 12px)); }
/* cite has its own 645 measure under the 867 quote */
.sty-q cite { width: min(645px, 100%); margin-left: auto; margin-right: auto; }
/* scroll-snap ignored the left padding and parked the first slide flush at 0.
   scroll-padding makes the snap port respect the same inset. */
.sty-car { scroll-padding-left: max(12px, calc((100vw - 1425px) / 2 + 12px)); }

/* Product pages were card-only — a headline and one line under it, then the
   next card. This is the prose column for the pages that need to actually
   explain something, at the 669px measure used by the article template. */
.pp-prose { width: min(669px, 100%); margin: 0 auto; }
.pp-prose h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; margin: 40px 0 12px; }
.pp-prose h3:first-child { margin-top: 0; }
.pp-prose p { font-size: 17px; line-height: 1.6; margin-bottom: 18px; }
.pp-prose p:last-child { margin-bottom: 0; }
.pp-prose ul { list-style: none; padding: 0; margin: 0 0 18px; }
.pp-prose li { position: relative; padding-left: 18px; font-size: 17px; line-height: 1.6; margin-bottom: 10px; }
.pp-prose li::before { content: ""; position: absolute; left: 0; top: 11px; width: 4px; height: 4px; border-radius: 50%; background: var(--ink); }

/* Chrome scroll-anchors on the row list, which fought the filter/sort scroll
   restore and produced a jump of its own. */
.row-list, .news-grid-page { overflow-anchor: none; }

/* ---------- pricing: credits + loyalty + the Recommended badge ------------- */
.tier-badge {
  display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: 0;
  padding: 4px 10px; border-radius: 40px; background: rgba(0, 0, 0, 0.72);
  color: #fff; margin-bottom: 12px;
}
.checks li.no { color: var(--meta); }
.checks li.no svg { opacity: 0.55; }

.credits-block { max-width: 760px; margin: 72px auto 0; text-align: center; }
.credits-block h2 { font-size: var(--type-h3-size); letter-spacing: -0.02em; line-height: 1.2; }
.credits-lead { font-size: 16px; line-height: 1.6; color: var(--meta); margin: 14px auto 0; max-width: 660px; }
.credit-row { display: flex; justify-content: center; gap: 12px; margin: 30px 0 18px; }
.credit-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 104px; height: 52px; border: 1px solid var(--border); border-radius: 12px;
  font-size: 20px; font-weight: 500; letter-spacing: -0.01em; background: var(--paper);
}
.credits-note { font-size: 14px; line-height: 1.6; color: var(--meta); max-width: 620px; margin: 0 auto; }
.loyalty { border: 1px solid var(--border); border-radius: 16px; padding: 26px 28px; margin-top: 34px; text-align: left; }
.loy-badge { font-size: 12px; font-weight: 500; color: var(--meta); margin-bottom: 10px; }
.loy-head { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
.loy-sub { font-size: 14px; line-height: 1.6; color: var(--meta); margin-top: 10px; }
@media (max-width: 640px) {
  .credit-row { flex-wrap: wrap; }
  .credit-chip { min-width: 88px; }
}
:root[data-theme="dark"] .tier-badge { background: rgba(255, 255, 255, 0.9); color: #0d0d0f; }
:root[data-theme="dark"] .credit-chip { background: var(--fill); }

/* The Recommended badge made the Premium header 40px taller, so every row
   inside it — price, CTA, feature list — sat lower than Connect's even though
   both cards were the same height. Connect carries an invisible badge so both
   headers start their content at the same y. */
.tier-badge.is-ghost { visibility: hidden; }
.loyalty { margin-top: 0; }
section[aria-label="Offer"] { padding-bottom: 44px; }
section[aria-label="Offer"] .loyalty { max-width: 980px; margin: 0 auto; }

/* ---------- contact sales, measured on openai.com/contact-sales/ ------------
   two columns: left h1 64/500 left-aligned + lead + feature list; right a
   white card carrying a 1/2 -> 2/2 staged form, form column 621px, and the
   help-center line sitting under the card rather than inside it. */
.csl { padding-bottom: 120px; }
.csl-grid { display: grid; grid-template-columns: minmax(0, 1fr) 621px; gap: 72px; align-items: start; padding-top: 64px; }
.csl-left h1 { font-size: clamp(40px, 4.6vw, 64px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.06; max-width: 9ch; }
.csl-lead { font-size: 17px; line-height: 1.55; margin-top: 26px; }
.csl-lead a { text-decoration: underline; text-underline-offset: 3px; }
.csl-label { font-size: 14px; color: var(--meta); margin-top: 52px; }
.csl-feats { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 16px; }
.csl-feats li { display: grid; grid-template-columns: 20px 1fr; gap: 14px; align-items: start; font-size: 15px; line-height: 1.45; }
.csl-feats svg { width: 18px; height: 18px; margin-top: 2px; }

.csl-card { background: var(--paper); border-radius: 16px; padding: 30px 32px 26px; box-shadow: 0 18px 50px rgba(20, 30, 60, 0.10); }
.csl-card-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; }
.csl-card-head h2 { font-size: 24px; font-weight: 500; letter-spacing: -0.015em; }
.csl-step { font-size: 14px; color: var(--meta); }
.csl-field { display: block; margin-bottom: 18px; }
.csl-field > span { display: block; font-size: 14px; margin-bottom: 8px; }
.csl-field b { font-weight: 400; color: var(--meta); }
.csl-field input, .csl-field select, .csl-field textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--border); border-radius: 8px;
  padding: 11px 13px; outline: none;
}
.csl-field textarea { resize: vertical; min-height: 96px; }
.csl-field input:focus, .csl-field select:focus, .csl-field textarea:focus { border-color: var(--ink); }
.csl-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.csl-err { font-size: 14px; color: #c0362c; margin: -8px 0 14px; }
.csl-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.csl-actions-split { justify-content: space-between; align-items: center; }
.csl-btn {
  height: 40px; padding: 0 22px; border-radius: 999px; font-size: 15px; font-weight: 500;
  background: var(--ink); color: var(--paper); border: 0; cursor: pointer;
}
.csl-btn:disabled { background: var(--fill); color: rgba(0, 0, 0, 0.35); cursor: default; }
.csl-back { background: none; border: 0; font-size: 15px; color: var(--meta); cursor: pointer; padding: 0; }
.csl-back:hover { color: var(--ink); }
.csl-done h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 10px; }
.csl-done p { font-size: 15px; line-height: 1.6; color: var(--meta); }
.csl-help { text-align: center; font-size: 14px; color: var(--meta); margin-top: 26px; }
.csl-help a { text-decoration: underline; text-underline-offset: 3px; }

:root[data-theme="dark"] .csl-card { background: var(--fill-solid, #16161a); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); }
:root[data-theme="dark"] .csl-btn:disabled { background: rgba(255, 255, 255, 0.10); color: rgba(255, 255, 255, 0.38); }

@media (max-width: 1080px) {
  .csl-grid { grid-template-columns: 1fr; gap: 44px; }
  .csl-left h1 { max-width: none; }
}
@media (max-width: 560px) { .csl-two { grid-template-columns: 1fr; } }

/* The wash sits on the page, not on main, because it runs behind the header —
   sampled off the real page it reads rgb(219,208,229) up there, and our header
   is already translucent so it picks the tint up on its own.
   Stops taken from openai.com/contact-sales: periwinkle → lavender → mauve →
   pink → periwinkle across, fading to paper by ~40% down. */
body.csl-page {
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 44%, #fff 78%) top center / 100% 620px no-repeat,
    linear-gradient(100deg, #d4d9f3 0%, #d5d4eb 22%, #e4d3e0 48%, #e9dde7 72%, #dfe0ee 100%) top center / 100% 620px no-repeat,
    var(--paper);
}
:root[data-theme="dark"] body.csl-page {
  background:
    linear-gradient(180deg, rgba(13, 13, 15, 0) 0%, rgba(13, 13, 15, 0.55) 44%, #0d0d0f 78%) top center / 100% 620px no-repeat,
    linear-gradient(100deg, #232a45 0%, #262540 22%, #392f42 48%, #3a3145 72%, #2a2c44 100%) top center / 100% 620px no-repeat,
    var(--paper);
}
body.csl-page .biz-top { background: transparent; }

/* ---- release article in the gpt-5-6 shape: centred hero, charted sections,
        benchmark tables grouped under category headings ---- */
.rh-head { text-align: center; }
.rh-head .article-title { font-size: clamp(38px, 4.45vw, 64px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.06; max-width: 900px; margin-left: auto; margin-right: auto; }
.rh-head .article-dek { max-width: 640px; margin-left: auto; margin-right: auto; }
.rh-head .article-meta, .rh-head .article-utils { justify-content: center; }

.rh-fig { margin: 34px 0 30px; }
.rh-fig figcaption { font-size: 13.5px; line-height: 1.5; color: var(--meta); margin-top: 14px; }
.article-body .bm-sub { font-size: 14px; color: var(--meta); margin: -4px 0 12px; }
.article-body h3 { font-size: 17px; font-weight: 500; margin-top: 34px; }
.rh-notes { margin: 0; padding-left: 20px; }
.rh-notes li { font-size: 14px; line-height: 1.6; color: var(--meta); margin-bottom: 10px; }
.rh-notes a { text-decoration: underline; text-underline-offset: 3px; }

/* bars respond to the pointer, and the legend filters the series */
.chart .bar { transition: opacity 0.15s ease; cursor: default; }
.chart:hover .bar { opacity: 0.55; }
.chart .bar:hover { opacity: 1; }
.chart .bar.off, .chart .vlab.off { opacity: 0.12; }
.chart .legkey { cursor: pointer; }
.chart .legkey.off rect { opacity: 0.25; }
.chart .legkey.off text { opacity: 0.45; }
.chart .s3 { fill: #2b6fd6; }
:root[data-theme="dark"] .chart .s3 { fill: #7aa7f5; }

/* about: the lead runs to two sentences now, so it needs room to break onto
   two lines rather than three or four */
.ab-lead { max-width: 592px; }
.ab-learn { padding: 120px 0 110px; }
.ab-learn .news-grid-page.ab-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 24px; }
.ab-learn .ab-grid h3 { font-size: 14px; line-height: 1.4; margin: 12px 0 6px; }
@media (max-width: 980px) { .ab-learn .news-grid-page.ab-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ab-learn .news-grid-page.ab-grid { grid-template-columns: 1fr; } }
.ab-learn h2 { font-size: 22px; font-weight: 500; line-height: 27.72px; letter-spacing: -0.01em; }
body.ab-page .container { max-width: 1440px; padding-left: 32px; padding-right: 32px; }
/* their narrow sections are cols 2-11 of a full-viewport 12-col grid, capped at
   1440: width = (100vw-264)/12*10 + 216 = 83.333vw - 4px. Fixed pixels only
   matched at 1425 - this tracks every window size. */
body.ab-page .ab-band { width: min(1130px, calc(83.333vw - 68px)); margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 8px; }
body.ab-page img.ab-band { display: block; height: auto; object-fit: cover; }
body.ab-page .ab-hero, body.ab-page .ab-split, body.ab-page .ab-quote {
  width: min(1440px, calc(83.333vw - 4px)); max-width: none;
  padding-left: 0; padding-right: 0; margin-left: auto; margin-right: auto; }
/* the split is the .container element itself, so its inset has to beat the
   container's own 65px gutter: 65 + 186 puts the copy at x251 like theirs */
body.ab-page .ab-split { padding: 100px 32px; }
body.ab-page .ab-split.rev { width: min(1440px, calc(83.333vw - 4px)); max-width: none; margin-left: auto; margin-right: auto; padding: 100px 32px; }
body.ab-page .ab-quote { max-width: 899px; }
@media (max-width: 980px) {
  body.ab-page .container { padding-left: var(--pad); padding-right: var(--pad); }
  /* the 83.333vw desktop grid inset resolves to 321px at 390px wide, leaving
     ~35px dead each side; .ab-text then adds ~51px more of its own fluid
     padding, so body copy came out 180px wide inside a 390px viewport */
  body.ab-page .ab-hero, body.ab-page .ab-quote,
  body.ab-page .ab-split, body.ab-page .ab-split.rev {
    width: auto; max-width: none; margin-left: 0; margin-right: 0;
    padding-left: var(--pad); padding-right: var(--pad);
  }
  body.ab-page .ab-band { width: 100%; margin-left: 0; margin-right: 0; }
  body.ab-page .ab-split, body.ab-page .ab-split.rev { grid-template-columns: 1fr; gap: 32px; padding: 64px var(--pad); justify-content: stretch; }
  .ab-split.rev .ab-text { order: 0; }
  .ab-text { padding: 32px 0; }
  .ab-text p { max-width: none; }
}
.ab-tabs { display: flex; gap: 8px; margin: 22px 0 34px; }
.ab-tabs button {
  height: 34px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: var(--meta); font-size: 14px; font-weight: 500; cursor: pointer;
}
.ab-tabs button.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ab-grid a[hidden] { display: none; }

/* charter — measured on openai.com/charter/: 14px/500 centred eyebrow, 64px
   h1 at ls -1.92px and line-height 1, a centred 592px lead, then a 669px
   left-aligned column whose principles are 30px/500 headings rather than
   bold run-in text */
.chart-doc { padding: 56px 0 130px; }
.ch-eyebrow { font-size: 14px; font-weight: 500; text-align: center; margin-bottom: 32px; }
.chart-doc h1 {
  font-size: clamp(40px, 4.45vw, 64px); font-weight: 500;
  letter-spacing: -0.03em; line-height: 1; text-align: center; margin: 0;
}
.ch-lead { width: min(592px, 100%); margin: 24px auto 0; font-size: 17px; line-height: 28px; text-align: center; }
.ch-hero { width: min(1130px, 100%); margin: 46px auto 0; }
.ch-hero img { display: block; width: 100%; height: auto; aspect-ratio: 1130 / 647; object-fit: cover; border-radius: 16px; }
.ch-hero figcaption { font-size: 14px; color: var(--meta); text-align: center; margin-top: 20px; }
.ch-body { width: min(669px, 100%); margin: 64px auto 0; }
.ch-body p { font-size: 17px; line-height: 28px; margin-bottom: 22px; }
.ch-body p:last-child { margin-bottom: 0; }
/* the 120px above a principle is theirs, measured: it is what makes the page
   read as a document rather than a stack of cards. It collapses against the
   preceding paragraph's 22px, so the two do not add. */
.ch-body h4 { font-size: 30px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; margin: 120px 0 26px; }
@media (max-width: 767px) {
  .ch-body { margin-top: 44px; }
  .ch-body h4 { font-size: 26px; margin: 68px 0 20px; }
}

/* growth report — measured on openai.com/index/planning-for-agi-and-beyond/ @1440:
   14/500 centred meta, 64/500 centred title, a 592 centred dek, a 1130 hero with
   its caption, a 669 body column, list text inset 44px, and 861-wide centred
   pull-quotes that break out of the column. Scoped to this page: .article-* is
   shared with 15 other article pages that keep the 48px title. */
.gr-head { text-align: center; }
.gr-head .article-meta { font-weight: 500; }
.gr-head .article-title { font-size: clamp(40px, 4.45vw, 64px); font-weight: 500; line-height: 1.06; letter-spacing: -0.03em; max-width: 820px; margin: 22px auto 0; }
.gr-head .article-dek { max-width: 592px; margin: 24px auto 0; }
.gr-head .article-utils { justify-content: center; }
.gr-hero { width: min(1130px, 100%); margin: 46px auto 0; }
.gr-hero img { display: block; width: 100%; height: auto; aspect-ratio: 1130 / 647; object-fit: cover; border-radius: 8px; }
.gr-hero figcaption { font-size: 14px; color: var(--meta); text-align: center; margin-top: 20px; }
.gr-doc .article-zone { grid-template-columns: minmax(0, 669px); }
.gr-doc .article-body p { margin-bottom: 26px; }
.gr-doc .gr-list { padding-left: 44px; list-style: none; }
/* the end-matter headings are 14/400 labels on theirs, not section heads */
.gr-doc .article-body h2#sec-notes, .gr-doc .article-body h2#sec-authors { font-size: 14px; font-weight: 400; color: var(--meta); letter-spacing: 0; margin: 56px 0 14px; }
/* left:50% + translateX(-50%) centres the quote on the body column, which shares
   the page centre — so 861px reads correctly without escaping the container */
.gr-pull {
  width: 861px; max-width: calc(100vw - 48px);
  position: relative; left: 50%; transform: translateX(-50%);
  margin: 70px 0; padding: 0; border: 0;
  font-size: 30px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.32; text-align: center;
}

.gr-list { list-style: none; padding: 0; margin: 0 0 22px; }
.gr-list li { position: relative; padding-left: 18px; font-size: 17px; line-height: 1.6; margin-bottom: 10px; }
.gr-list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 4px; height: 4px; border-radius: 50%; background: var(--ink); }

.mc-hero { text-align: center; padding: 88px 0 0; }
.mc-h1 { font-size: clamp(40px, 4.46vw, 64px); font-weight: 500; line-height: 1.0; letter-spacing: -0.03em; max-width: 900px; margin: 0 auto; }
.mc-grad { background: linear-gradient(96deg, #2f6df6 0%, #7a5cf0 45%, #e0653f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mc-cta { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 32px; }
.mc-h2 { font-size: clamp(34px, 3.35vw, 48px); font-weight: 500; line-height: 1.16; letter-spacing: -0.03em; text-align: center; max-width: 887px; margin: 0 auto; }
@media (max-width: 1000px) {
}
@media (max-width: 700px) {
}

.mc-hero { text-align: center; padding: 88px 0 0; }
.mc-h1 { font-size: clamp(40px, 4.46vw, 64px); font-weight: 500; line-height: 1.0; letter-spacing: -0.03em; max-width: 831px; margin: 0 auto; }
.mc-cta { display: flex; gap: 20px; justify-content: center; align-items: center; margin-top: 32px; }

.mc-h2 { font-size: clamp(34px, 3.35vw, 48px); font-weight: 500; line-height: 1.16; letter-spacing: -0.03em; text-align: center; max-width: 887px; margin: 0 auto; }






@media (max-width: 1000px) {
}
@media (max-width: 700px) {
}

/* ============================================================
   Connector page: scroll stage + scattered cutouts
   Modelled on chatgpt.com/overview measured 2026-08-14:
   h1 99.04/700 lh=fs ls -0.047em centered, no subtext under it,
   38px to the CTA row, hero shot 986px wide, stacked screenshots
   cross-fading, decorative cutouts scattered down both margins.
   ============================================================ */
.mc-page .mc-hero { position: relative; padding: 74px 0 0; }
.mc-page .mc-hero-in { position: relative; z-index: 2; text-align: center; }
.mc-page .mc-h1 {
  font-size: clamp(42px, 6.95vw, 99px); font-weight: 700; line-height: 1.0;
  letter-spacing: -0.047em; max-width: 860px; margin: 0 auto;
}
.mc-page .mc-grad {
  background: linear-gradient(96deg, #2f6df6 0%, #7a5cf0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mc-page .mc-grad.b { background-image: linear-gradient(96deg, #e0653f 0%, #d8952f 100%); }
.mc-page .mc-cta { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 38px; }

/* cutouts */
.mc-deco { position: absolute; left: 0; right: 0; top: 0; height: 1000px; z-index: 1; pointer-events: none; }
.mcd {
  position: absolute; display: block; opacity: 0;
  translate: 0 var(--py, 0px); scale: .68; rotate: var(--rot, 0deg);
  transition: opacity .8s cubic-bezier(.2, .7, .3, 1), scale .8s cubic-bezier(.2, .7, .3, 1);
  will-change: translate, opacity;
}
.mcd.in { opacity: 1; scale: 1; }
.mcd-1 { left: 10%; top: 300px; width: 74px;  --rot: -8deg; }
.mcd-2 { left: 1%;  top: 470px; width: 128px; --rot: -8deg; }
.mcd-3 { left: 6%;  top: 700px; width: 104px; --rot: 12deg; }
.mcd-4 { right: 11%; top: 270px; width: 66px;  --rot: 6deg; }
.mcd-5 { right: 3%;  top: 450px; width: 104px; --rot: 8deg; }
.mcd-6 { right: 1%;  top: 640px; width: 300px; --rot: -4deg; }
.mcd-7 { right: 8%;  top: 810px; width: 58px;  --rot: 14deg; }
.mcd-8 { left: 2%;   top: 14%; width: 220px; --rot: 8deg; }
.mcd-9 { right: 3%;  top: 8%;  width: 62px;  --rot: -10deg; }
.mcd-10 { left: 4%;  top: 74%; width: 92px;  --rot: -14deg; }
:root[data-theme="dark"] .mcd-1, :root[data-theme="dark"] .mcd-4, :root[data-theme="dark"] .mcd-7, :root[data-theme="dark"] .mcd-9 { filter: invert(1); }

/* pinned stage, re-dug 2026-08-15: the shot rises centered (w986, pins at
   y222 abs), then docks flush to the RIGHT VIEWPORT EDGE (w 896/1425 = 62.9vw,
   y251) while an accordion rail appears at left x145; scroll swaps the states;
   then the whole thing releases. .docked on .mc-pin drives the morph. */
.mc-pin { position: relative; }
.mc-pin-stage { position: sticky; top: 84px; z-index: 2; height: calc(100vh - 108px); min-height: 620px; }
.mc-pin-inner { position: relative; width: min(100vw, 1425px); margin: 0 auto; height: 100%; }

.mc-pin-art {
  position: absolute; top: 56px; bottom: 0; left: 50%;
  width: min(986px, 92vw); translate: -50% 0;
  transition: width .65s cubic-bezier(.3, .7, .2, 1), translate .65s cubic-bezier(.3, .7, .2, 1), top .65s cubic-bezier(.3, .7, .2, 1), left .65s cubic-bezier(.3, .7, .2, 1);
}
.mc-pin.docked .mc-pin-art {
  top: 167px; width: min(896px, 92vw); left: 100%;
  translate: -100% 0;
}
.mc-fig { position: absolute; inset: 0; margin: 0; display: grid; justify-items: end; align-items: start; opacity: 0; scale: .97; transition: opacity .45s ease, scale .45s ease; }
.mc-fig.on { opacity: 1; scale: 1; }
.mc-ph, .mc-fig img {
  width: min(100%, calc(var(--art-h, 9999px) * 1.5610)); aspect-ratio: 896 / 574;
  background: #dcdce1; border-radius: 16px; box-shadow: 0 30px 70px rgba(16, 24, 60, 0.08);
  transition: border-radius .65s ease;
}
.mc-fig img { height: auto; object-fit: cover; object-position: left center; background: none; }
:root[data-theme="dark"] .mc-ph { background: #333336; }

/* The carousel page control belongs to the phone carousel and to nothing else.
   Declared off HERE, above the mobile block, so desktop never renders it and it
   never occupies a pixel; the mobile block below is the only thing that turns
   it on. Default-off rather than default-on means a breakpoint that never
   matches leaves no dots behind instead of leaking a row onto a wide screen. */
.mc-dots { display: none; }

.mc-rail2 {
  position: absolute; left: 145px; top: 194px; width: 312px;
  text-align: left; opacity: 0; translate: -14px 0; pointer-events: none;
  transition: opacity .5s ease .12s, translate .5s ease .12s;
}
.mc-pin.docked .mc-rail2 { opacity: 1; translate: 0 0; pointer-events: auto; }
.mc-acc { border-top: 1px solid rgba(13, 13, 13, 0.12); }
.mc-acc:last-child { border-bottom: 1px solid rgba(13, 13, 13, 0.12); }
:root[data-theme="dark"] .mc-acc, :root[data-theme="dark"] .mc-acc:last-child { border-color: rgba(255, 255, 255, 0.14); }
.mc-acc button {
  appearance: none; border: 0; background: none; cursor: pointer; display: block; width: 100%;
  text-align: left; padding: 24px 0; font: inherit; font-size: 16px; font-weight: 500; line-height: 1.3;
  color: var(--meta); transition: color .3s ease;
}
.mc-acc.on button { color: var(--ink); }
.mc-acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s ease; }
.mc-acc.on .mc-acc-body { grid-template-rows: 1fr; }
.mc-acc-body p {
  overflow: hidden; margin: 0; max-width: 288px;
  font-size: 15px; line-height: 1.55; color: var(--meta);
}
.mc-acc.on .mc-acc-body p { padding-bottom: 22px; }

.mc-pin-drivers { position: relative; padding-bottom: 34vh; }
.mc-drv { height: 62vh; }

/* card strip: a centered snap-x scroller with the scrollbar hidden;
   tiles are bottom-aligned with mixed heights, so the top edge is uneven */
.mc-cards { padding-top: 149px; }
.mc-cards .mc-h2 { max-width: 700px; margin-left: auto; margin-right: auto; }
.mc-cards-sub { font-size: 16px; line-height: 1.55; max-width: 600px; margin: 16px auto 0; text-align: center; }
.mc-strip {
  display: flex; gap: 16px;
  width: min(1223px, calc(100vw - 374px)); margin: 40px auto 0;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}
.mc-strip::-webkit-scrollbar { display: none; }
.mc-cell { flex: 0 0 370px; width: 370px; margin: 0; scroll-snap-align: start; }
.mc-tilebg { width: 100%; height: 578px; border-radius: 6px; padding: 32px; background: #f3f3f3; }
:root[data-theme="dark"] .mc-tilebg { background: #2a2a2d; }
.mc-tilebg h4 { font-size: 21.97px; font-weight: 500; line-height: 27.67px; margin: 0 0 8px; color: var(--ink); }
.mc-tilebg p { font-size: 14px; font-weight: 400; line-height: 22.96px; color: var(--ink); opacity: .82; margin: 0; }

.mc-arrows { display: flex; justify-content: center; gap: 24px; margin: 28px 0 0; }
.mc-arrow {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  width: 28px; height: 28px; border-radius: 8px; padding: 5px; color: var(--ink);
  transition: background .2s ease, opacity .2s ease;
}
.mc-arrow svg { display: block; width: 100%; height: 100%; stroke-width: 2; }
.mc-arrow:hover:not(:disabled) { background: var(--fill); }
.mc-arrow:disabled { opacity: .3; cursor: default; }
:root[data-theme="dark"] :root[data-theme="dark"] :root[data-theme="dark"] :root[data-theme="dark"] .mc-cell figcaption { font-size: 15px; line-height: 1.5; color: var(--meta); margin-top: 12px; padding-right: 16px; }

/* plans band: one gray rounded banner, text left, pill right, centered */
.mc-plans { padding-top: 149px; }
.mc-plans-band {
  width: min(1223px, calc(100vw - 374px)); margin: 0 auto;
  background: var(--fill); border-radius: 24px; padding: 46px 114px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 212px;
}
.mc-plans-band h2 { font-size: 29.92px; font-weight: 500; line-height: 39.49px; letter-spacing: -0.02em; margin: 0; }
.mc-plans-band p { font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--meta); max-width: 520px; margin: 8px 0 0; }

/* control section: two wide cards under a centered title */
.mc-safe { padding-top: 149px; }
.mc-safe-sub { font-size: 16px; font-weight: 400; line-height: 1.5; max-width: 700px; margin: 20px auto 0; text-align: center; }
.mc-safe-cards { width: min(1001px, 100%); margin: 48px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mc-safe-card { display: flex; flex-direction: column; align-items: flex-start; background: transparent; border: 1px solid rgba(13, 13, 13, 0.1); border-radius: 16px; padding: 28px; }
.mc-safe-card h3 { font-size: 17.97px; font-weight: 500; line-height: 23.71px; margin: 0; }
.mc-safe-card p { font-size: 14px; font-weight: 400; line-height: 22.96px; color: var(--ink); opacity: .82; margin: 20px 0 24px; }
.mc-safe-card .pill { font-size: 14px; font-weight: 500; height: 36px; display: inline-flex; align-items: center; padding: 0 20px; margin-top: auto; }

/* inspired: three story cards on the shared news grid */
.mc-insp { padding-top: 149px; }
.mc-insp-grid { margin-top: 40px; }
.mc-insp .thumb-lg img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }

/* closing band: slim row, title left, action right */
.mc-today {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  border-top: 1px solid rgba(13, 13, 13, 0.1); margin-top: 149px; padding: 56px 0 120px;
}
:root[data-theme="dark"] .mc-today { border-color: rgba(255, 255, 255, 0.14); }
.mc-today h2 { font-size: 29.92px; font-weight: 500; line-height: 39.49px; letter-spacing: -0.02em; margin: 0; }

@media (max-width: 1200px) {
  /* the headline box widens toward the margins here, so the two highest cutouts go */
  .mcd-1, .mcd-4, .mcd-7 { display: none; }
  .mcd-2 { left: 0;   top: 470px; width: 104px; }
  .mcd-5 { right: 1%; top: 430px; width: 86px; }
  .mcd-6 { right: 0;  top: 660px; width: 220px; }
  .mcd-3 { left: 2%;  top: 720px; width: 88px; }
}
@media (max-width: 900px) {
  /* the dock has no room here: rail sits above a centered card, no morph */
  .mc-pin-stage { height: auto; min-height: 0; position: static; display: block; }
  /* Media FIRST on a phone, accordion under it — the shot is what is
     worth seeing, and the three rows read as its caption. Same move the
     government page makes with .fx-media { order: -1 }. `order` only
     means anything in a flex/grid formatting context, and this box is a
     plain block on desktop, so the column is declared here too. Both
     lines are inside the 900px query, so the desktop two-column pin is
     untouched. */
  .mc-pin-inner { height: auto; display: flex; flex-direction: column; }
  .mc-rail2 { position: static; width: min(560px, 100%); margin: 0 auto; opacity: 1; translate: none; pointer-events: auto; padding: 0 24px; }
  .mc-pin-art { position: relative; inset: auto; width: min(560px, calc(100% - 48px)); margin: 0 auto 28px; translate: none; height: auto; min-height: 0; order: -1; }
  .mc-pin.docked .mc-pin-art { top: auto; left: auto; width: min(560px, calc(100% - 48px)); translate: none; }
  /* the stage is static here, so the pin's scroll drivers are pure void:
     3 x 56vh = ~1700px of blank scroll on a phone. The rail is already a
     tap accordion, so the swap does not need them. */
  .mc-pin-drivers { display: none; }
  .mc-pin-drivers, .mc-drv { height: 0; padding: 0; }
  /* HORIZONTAL SNAP CAROUSEL. Values measured off chatgpt.com/overview at
     390x844 on 2026-09-01, not invented: track snap-x mandatory with 32px
     inline padding and 32px gap, cards snap-align:start at 326px — which is
     exactly calc(100vw - 64px) — and no pagination affordance at all (that
     page ships no dots, no arrows, no tablist). All three cards live in the
     track at once, so the old "only .mc-fig.on is displayed" rule is gone
     rather than fought: down here the carousel owns which pane is active. */
  .mc-pin-art {
    display: flex; flex-wrap: nowrap;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 32px; padding: 0 32px;
    width: 100%; max-width: none; margin: 0;
    scrollbar-width: none;
  }
  .mc-pin-art::-webkit-scrollbar { display: none; }
  .mc-fig {
    position: static; display: block; opacity: 1; scale: 1;
    flex: 0 0 calc(100vw - 64px); width: calc(100vw - 64px);
    scroll-snap-align: start; scroll-snap-stop: always;
    overflow: visible;              /* the caption sits outside the framed media */
  }
  .mc-ph, .mc-fig img { width: 100%; }
  .mc-pin.docked .mc-fig img { border-radius: 12px; }
  /* the media keeps the frame; the caption rides underneath it */
  .mc-fig > video, .mc-fig > img {
    display: block; width: 100%; height: auto;
    border-radius: 16px; border: 1px solid var(--hairline);
    aspect-ratio: 16 / 9; object-fit: cover; overflow: hidden;
  }
  /* Each card carries its own heading and body in the carousel, so the
     accordion that drives the panes on desktop has nothing left to do. */
  .mc-rail2 { display: none; }
  .mc-figcap { display: block; padding: 14px 2px 0; }
  .mc-figcap h3 { font-size: 17px; font-weight: 500; line-height: 1.3; margin: 0 0 6px; letter-spacing: -0.01em; }
  .mc-figcap p { font-size: 15px; line-height: 24px; color: var(--meta); margin: 0; }

  .mc-drv { height: 56vh; }
  /* The seven floating graphics were hidden wholesale on a phone, so mobile
     lost the whole decorative layer desktop has around the hero. They are back
     -- smaller, pulled toward the edges, and behind the text -- rather than
     deleted. Their desktop positions are absolute pixel offsets tuned for a
     1440 canvas, so each is re-anchored here in proportions that hold at 390. */
  .mcd { display: block; z-index: 0; pointer-events: none; }
  /* they hang past the edges on purpose, so the section clips them rather
     than letting them widen the document */
  .mc-page, .mc-hero, .mc-pin { overflow-x: clip; }
  .mc-hero-in, .mc-page .mc-h1, .mc-cta, .mc-acc, .mc-pin-art { position: relative; z-index: 2; }
  /* pushed well past both edges so they read as marginalia the page clips,
     never as something sitting on a line of text -- and dimmed, because at
     this size a hard black glyph beside body copy competes with it */
  .mcd { opacity: .5 !important; }
  .mcd-1 { left: -9%;  top: 190px; width: 40px; }
  .mcd-2 { left: -11%; top: 430px; width: 66px; }
  .mcd-3 { left: -8%;  top: 690px; width: 52px; }
  .mcd-4 { right: -8%; top: 165px; width: 36px; }
  .mcd-5 { right: -10%; top: 415px; width: 54px; }
  .mcd-6 { right: -22%; top: 620px; width: 130px; }
  .mcd-7 { right: -7%; top: 790px; width: 30px; }
  .mcd-8 { left: -12%; top: 10%;  width: 96px; }
  .mcd-9 { right: -7%; top: 6%;   width: 34px; }
  .mcd-10 { left: -9%; top: 74%;  width: 46px; }
  .mc-strip { width: calc(100vw - 48px); }
  .mc-cell { flex-basis: 300px; width: 300px; }
  .mc-tilebg { height: 470px; padding: 24px; }
  .mc-plans-band { width: calc(100vw - 48px); }
  .mc-plans-band { flex-direction: column; align-items: flex-start; padding: 32px 28px; }
  .mc-safe-cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .mcd, .mc-fig, .mc-pin-art, .mc-fig img, .mc-rail2, .mc-acc-body { transition: none; }
  .mcd { opacity: 1; scale: 1; translate: none; }
}
:root[data-theme="dark"] .mc-safe-card { border-color: rgba(255, 255, 255, 0.16); }

/* government document pages */
.gd-doc { max-width: 720px; padding-top: 64px; padding-bottom: 120px; }
.gd-eyebrow { font-size: 14px; font-weight: 500; color: var(--meta); margin: 0 0 14px; }
.gd-doc h1 { font-size: clamp(34px, 3.35vw, 48px); font-weight: 500; line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 18px; }
.gd-lead { font-size: 17px; line-height: 28px; color: var(--meta); margin: 0 0 26px; }
.gd-lead a { text-decoration: underline; text-underline-offset: 3px; }
.gd-doc section { border-top: 1px solid rgba(13, 13, 13, 0.1); padding: 26px 0 30px; }
:root[data-theme="dark"] .gd-doc section { border-color: rgba(255, 255, 255, 0.14); }
.gd-doc h2 { font-size: 21.97px; font-weight: 500; line-height: 27.67px; margin: 0 0 10px; }
.gd-doc section p { font-size: 15px; line-height: 1.7; margin: 0; }
.gd-cta { display: flex; align-items: center; gap: 24px; margin-top: 40px; }

/* capability statement, web presentation */
.cs-page { max-width: 820px; padding-top: 64px; padding-bottom: 120px; text-align: center; }
.cs-page h1 { font-size: clamp(34px, 3.35vw, 48px); font-weight: 500; line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 14px; }
.cs-lead { font-size: 21.97px; font-weight: 500; line-height: 27.67px; margin: 0 0 44px; }
.cs-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; text-align: left; }
.cs-card { background: var(--fill); border-radius: 16px; padding: 24px; }
.cs-n { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 600; align-items: center; justify-content: center; margin-bottom: 12px; }
.cs-card h3 { font-size: 17.97px; font-weight: 500; line-height: 23.71px; margin: 0 0 8px; }
.cs-card p { font-size: 14px; line-height: 22.96px; color: var(--ink); opacity: .82; margin: 0; }
.cs-short { font-size: 16px; font-weight: 500; margin: 24px 0 0; }
.cs-page section { border-top: 1px solid rgba(13, 13, 13, 0.1); margin-top: 44px; padding-top: 32px; text-align: left; }
:root[data-theme="dark"] .cs-page section { border-color: rgba(255, 255, 255, 0.14); }
.cs-page section h2 { font-size: 21.97px; font-weight: 500; line-height: 27.67px; margin: 0 0 16px; }
.cs-page section p { font-size: 15px; line-height: 1.7; margin: 0; }
.cs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cs-list li { font-size: 15px; line-height: 1.7; }
.cs-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.cs-chips span { background: var(--fill); border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 500; }
.cs-table { display: flex; flex-direction: column; }
.cs-table > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; padding: 10px 0; border-bottom: 1px solid rgba(13, 13, 13, 0.06); font-size: 15px; }
:root[data-theme="dark"] .cs-table > div { border-color: rgba(255, 255, 255, 0.1); }
.cs-table > div > span:first-child { color: var(--meta); }
.cs-page .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
.cs-page .gd-cta { justify-content: center; margin-top: 48px; }
@media (max-width: 800px) { .cs-three { grid-template-columns: 1fr; } .cs-table > div { grid-template-columns: 130px minmax(0, 1fr); } }

/* government hero: quiet professional wash */
.gov-hero { position: relative; overflow: hidden; padding-bottom: 96px; }
.gov-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(110% 130% at 18% 0%, #e8eaee 0%, transparent 55%),
    radial-gradient(95% 120% at 85% 8%, #f0f1f3 0%, transparent 58%),
    linear-gradient(180deg, #f5f6f8 0%, #fbfbfc 55%, var(--paper) 100%);
}
.gov-hero > * { position: relative; z-index: 1; }
:root[data-theme="dark"] .gov-hero::before {
  background:
    radial-gradient(110% 130% at 18% 0%, rgba(120, 130, 150, 0.14) 0%, transparent 55%),
    radial-gradient(95% 120% at 85% 8%, rgba(150, 155, 165, 0.1) 0%, transparent 58%),
    linear-gradient(180deg, #14161a 0%, #101114 55%, var(--paper) 100%);
}

/* government capabilities: scroll steps through every item, like the connector page */
.fxp-drivers { display: none; }
@media (min-width: 901px) and (min-height: 821px) {
  .fxp { position: relative; }
  /* the section title pins with the stage, so the lock starts on "The work it takes on" */
  .fxp-stage { position: sticky; top: calc(var(--header-h) + 14px); }
  .fxp-stage .biz-section-head { margin-bottom: 24px; }
  .fxp-stage .fx { margin-top: 0; }
  /* pure scroll spacers: they overlay the rail, so they must never take a click */
  .fxp-drivers { display: block; position: relative; margin-top: -60vh; pointer-events: none; }
  .fxp-drv { height: 44vh; pointer-events: none; }
}

/* product pages: a slightly opened section rhythm */
.stack-airy { gap: calc(var(--gap-section) + 20px); }

/* meet: follow-the-conversation tabs, text tabs with a left explanation column */
.mt-follow .pp-head { text-align: left; max-width: none; margin-bottom: 34px; }
.mt-follow .pp-head h2 { font-size: 48px; font-weight: 500; line-height: 55.68px; letter-spacing: -0.03em; }
/* ...and on a phone that 48px runs three lines, so it steps down. This sits
   after the desktop rule deliberately: same specificity, later wins. */
@media (max-width: 900px) {
  .mt-follow .pp-head h2 { font-size: 26px; line-height: 1.2; }
  .mt-follow .pp-head { margin-bottom: 22px; }
}
.mt-follow .pp-tabs { justify-content: flex-start; gap: 34px; margin-bottom: 40px; }
.mt-follow .pp-tabs button {
  position: relative; padding: 0 0 10px; border-radius: 0; background: none; font-size: 18px; font-weight: 500;
  color: var(--meta); border-bottom: 0;
}
.mt-follow .pp-tabs button.on { background: none; color: var(--ink); }
/* the underline doubles as the video's progress: a rounded track that fills as it plays */
.mt-follow .pp-tabs button.on::before,
.mt-follow .pp-tabs button.on::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; border-radius: 999px;
}
.mt-follow .pp-tabs button.on::before { width: 100%; background: var(--fill-hover); }
.mt-follow .pp-tabs button.on::after { width: calc(var(--p, 1) * 100%); background: var(--ink); }
.mt-grid { display: grid; grid-template-columns: 345px minmax(0, 1fr); gap: 26px; align-items: start; }
.mt-left h3 { font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 14px; }
.mt-left p { font-size: 17px; line-height: 28px; color: var(--meta); margin: 0; }
.mt-follow .pp-pane .pp-shot { max-width: none; margin: 0; }
@media (max-width: 1100px) {
  .mt-grid { grid-template-columns: 1fr; gap: 22px; }
  .mt-grid .pp-shot { order: -1; }   /* media keeps the full width, text reads under it */
}
@media (max-width: 900px) {
  /* the three labels need 484px of row and only 350 exists, so the last one
     dropped to a second line. Scroll the strip sideways like .doc-subnav
     rather than let it wrap. */
  .mt-follow .pp-tabs {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; gap: 22px;
  }
  .mt-follow .pp-tabs::-webkit-scrollbar { display: none; }
  .mt-follow .pp-tabs button { flex: 0 0 auto; white-space: nowrap; }
}

/* government overview + solutions, mirrored from the measured references:
   hero left text 664 + right square 664; cards 443x221 tint and 443x368 line;
   closing gray band 1376 r6; blueprint cards with title under the art;
   split rows 377 text and 578 square art */
.gv2-hero { display: grid; grid-template-columns: 664px minmax(0, 1fr); gap: 48px; align-items: end; padding-top: 64px; }
.gv2-hero-text h1 { font-size: clamp(40px, 4.23vw, 64px); font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 22px; }
.gv2-hero-text p { font-size: 17px; line-height: 28px; max-width: 664px; margin: 0 0 28px; }
.gv2-cta { display: flex; align-items: center; gap: 24px; }
.gv2-hero-art { aspect-ratio: 1 / 1; max-width: 664px; justify-self: end; width: 100%; border-radius: 8px;
  background: radial-gradient(90% 120% at 20% 10%, #dfe6f5 0%, transparent 55%), radial-gradient(80% 110% at 82% 20%, #e9e3d8 0%, transparent 58%), linear-gradient(160deg, #e8ebf2 0%, #d5dbe8 100%); }
.gv2-sec { padding-top: 128px; }
.gv2-h2 { font-size: 48px; font-weight: 500; line-height: 1.16; letter-spacing: -0.025em; text-align: center; max-width: 909px; margin: 0 auto 20px; }
.gv2-sub { font-size: 17px; line-height: 28px; text-align: center; max-width: 909px; margin: 0 auto 48px; }
.gv2-h3 { font-size: 30px; font-weight: 500; line-height: 1.32; letter-spacing: -0.02em; margin: 0 0 28px; }
.gv2-cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 23px; }
.gv2-cards3 > * { display: block; background: rgba(13, 13, 13, 0.02); border-radius: 6px; padding: 26px; min-height: 221px; }
.gv2-cards3.tall > * { background: transparent; border: 1px solid rgba(13, 13, 13, 0.1); min-height: 368px; }
.gv2-cards3 .ic { display: block; width: 36px; height: 36px; margin-bottom: 26px; color: var(--ink); }
.gv2-cards3 .ic svg { width: 100%; height: 100%; }
.gv2-cards3 h3 { font-size: 21.97px; font-weight: 500; line-height: 27.67px; margin: 0 0 12px; }
.gv2-cards3 p { font-size: 15px; line-height: 1.6; color: var(--meta); margin: 0; max-width: 340px; }
:root[data-theme="dark"] .gv2-cards3 > * { background: rgba(255, 255, 255, 0.04); }
:root[data-theme="dark"] .gv2-cards3.tall > * { background: transparent; border-color: rgba(255, 255, 255, 0.14); }
.gv2-faq-group { font-size: 21.97px; font-weight: 500; margin: 34px 0 6px; }
.gv2-band { background: rgba(13, 13, 13, 0.04); border-radius: 6px; min-height: 408px; margin-top: 128px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; text-align: center; padding: 48px 32px; }
.gv2-band.tall { min-height: 463px; }
.gv2-band h2 { font-size: 48px; font-weight: 500; line-height: 1.16; letter-spacing: -0.025em; margin: 0; }
.gv2-band-sub { font-size: 17px; line-height: 28px; color: var(--meta); margin: -14px 0 0; }
.gv2-cards3 .more { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 500; color: var(--ink); }
:root[data-theme="dark"] .gv2-band { background: rgba(255, 255, 255, 0.06); }

.gsl-band { padding-top: 64px; }
.gsl-label { font-size: 21.97px; font-weight: 500; margin: 0 0 24px; }
.gsl-bp { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.gsl-card { display: block; }
.gsl-card .gsl-art { display: block; aspect-ratio: 1 / 1; border-radius: 8px; }
.gsl-art-logo {
  background:
    url("img/app-logo-white.png?v=403") center / 34% no-repeat,
    url("img/gov-sol-heyno.jpg?v=403") center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(13, 13, 13, 0.06);
}
:root[data-theme="dark"] .gsl-art-logo {
  background:
    url("img/app-logo.png?v=403") center / 34% no-repeat,
    url("img/gov-sol-heyno.jpg?v=403") center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
.gsl-art-noicon {
  background:
    url("img/blue-icon.png?v=403") center / 34% no-repeat,
    url("img/gov-sol-custom2.jpg?v=403") center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(13, 13, 13, 0.06);
}
:root[data-theme="dark"] .gsl-art-noicon {
  background:
    url("img/blue-icon.png?v=403") center / 34% no-repeat,
    url("img/gov-sol-custom2.jpg?v=403") center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
.gsl-card h3 { font-size: 21.97px; font-weight: 500; line-height: 27.67px; margin: 24px 0 8px; }
.gsl-card p { font-size: 15px; line-height: 1.6; color: var(--meta); margin: 0; }
.gsl-sec { padding-top: 128px; }
.gsl-h2 { font-size: 48px; font-weight: 500; line-height: 1.16; letter-spacing: -0.025em; text-align: center; max-width: 706px; margin: 0 auto 20px; }
.gsl-sec .gv2-sub { margin-bottom: 72px; }
.gsl-split { display: grid; grid-template-columns: 377px minmax(0, 1fr); gap: 64px; align-items: center; margin-top: 96px; }
.gsl-split:first-of-type { margin-top: 0; }
.gsl-split.rev { grid-template-columns: minmax(0, 1fr) 377px; }
.gsl-split.rev .gsl-split-text { order: 2; }
.gsl-split-text h3 { font-size: 30px; font-weight: 500; line-height: 1.32; letter-spacing: -0.02em; margin: 0 0 14px; }
.gsl-split-text p { font-size: 17px; line-height: 28px; color: var(--meta); margin: 0 0 18px; }
.gsl-split-art { aspect-ratio: 1 / 1; width: min(720px, 100%); border-radius: 8px; justify-self: end; }
.gsl-split.rev .gsl-split-art { justify-self: start; }
/* a painted panel with a rounded icon tile sitting on it, same idea as the cards above */
.gsl-split-art.gsl-split-art-photo { display: grid; place-items: center; background-size: cover; background-position: center; background-repeat: no-repeat; }
/* The panel is meant to be square with a small glyph centred in it, but the
   grid row was stretching it to the text column's height (720x900), and the
   image inherited that 900px. Height is pinned to the panel's own width and
   the icon sized in px so it cannot track a stretched box. */
.gsl-split-art { height: min(720px, 100%); align-self: center; }
.gsl-split-art.gsl-split-art-photo img { display: block; width: 172px; height: 172px; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 24%; box-shadow: 0 9px 22px rgba(13, 13, 13, 0.16); }
@media (max-width: 900px) {
  .gsl-split-art { height: auto; }
  .gsl-split-art.gsl-split-art-photo img { width: 108px; height: 108px; }
}
.gsl-split-art.gsl-split-art-photo img.img-dark { display: none; }
:root[data-theme="dark"] .gsl-split-art.gsl-split-art-photo img.img-light { display: none; }
:root[data-theme="dark"] .gsl-split-art.gsl-split-art-photo img.img-dark { display: block; }
.gsl-pills { display: flex; gap: 12px; flex-wrap: wrap; }


@media (max-width: 900px) {
  .gv2-hero { grid-template-columns: 1fr; }
  .gv2-hero-art { justify-self: stretch; }
  .gv2-cards3 { grid-template-columns: 1fr; }
  .gv2-cards3 > *, .gv2-cards3.tall > * { min-height: 0; }
  .gv2-h2, .gv2-band h2, .gsl-h2 { font-size: 34px; }
  .gv2-band { min-height: 0; padding: 56px 24px; }
  .gsl-bp { grid-template-columns: 1fr; }
  .gsl-split, .gsl-split.rev { grid-template-columns: 1fr; }
  .gsl-split.rev .gsl-split-text { order: 0; }
}

/* Standalone hero shot above the pin section. Same frame as the panes so the
   two read as one design, but sized to the PNG's own 1792/1043 rather than
   16/9 — at its own ratio `cover` has nothing left to crop, so the whole
   photo is visible AND the rectangle is completely filled. */
.mc-photo-band { position: relative; z-index: 2; padding: 8px 0 4px; }
.mc-photo {
  margin: 0 auto; width: min(1100px, calc(100% - 48px));
  aspect-ratio: 1792 / 1043;
  border-radius: 22px; overflow: hidden; border: 1px solid var(--hairline);
  display: block;
}
.mc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Captions exist only in the mobile carousel; desktop's accordion carries the
   text there, so they must never paint in the pinned layout. Scoped to a
   min-width query on purpose rather than left top-level: this block sits
   LATER in the file than the 900px carousel rules, and a top-level
   `display:none` here would beat them at every width — the same ordering
   trap that hid the panes two passes ago. Disjoint queries cannot fight. */
@media (min-width: 901px) { .mc-figcap { display: none; } }
@media (max-width: 900px) {
  .mc-photo { width: min(560px, calc(100% - 48px)); border-radius: 16px; }
}

/* MCP pane videos wear the government page's frame: hairline border, 22px
   radius, clipped corners. Copied from .fx-media rather than re-invented so
   the two switching-media sections read as one design. */
/* DESKTOP ONLY. This block is later in the file than the 900px carousel rules,
   so left top-level its overflow:hidden + aspect-ratio clipped the card
   captions right out of the mobile cards — display:block with nothing painted.
   On mobile the frame lives on the media element instead and .mc-fig is a
   plain auto-height card. Third time this ordering has bitten; scoping it
   ends the argument. */
@media (min-width: 901px) {
.mc-fig {
  border-radius: 22px; overflow: hidden; border: 1px solid var(--hairline);
  /* Measured, not copied: all three mcp-*.webm are 3840x2160 and
     mcp-card-1.png is 1792x1043 (1.7181). 16/9 is the dominant ratio —
     three of the four media hit it exactly. The gov page's 842/473
     (1.7801) was borrowed for a set of media that is not that shape,
     which is what opened the gaps. One ratio for all three panes, so the
     box does not resize as they switch. */
  aspect-ratio: 16 / 9;
  /* Deliberately sets NO `display`. This block is top-level and sits later in
     the file than the 900px query, so any display here wins at EVERY width --
     a `display:block` was overriding the mobile `.mc-fig { display:none }`
     and flowing all three figures down the page at once. The two hide/show
     mechanisms this section was built with are left intact instead:
       desktop  -- display:grid, position:absolute, inset:0, opacity toggled
       mobile   -- display:none, with .mc-fig.on { display:block }
     place-items:stretch is what actually fixed the original complaint (the
     grid was align-items:start / justify-items:end, so the media sized to its
     own content rather than the frame); it needs no display change to work. */
  place-items: stretch;
}
/* cover, not contain: the frame is now the media's own 16/9, so the three
   videos fill it with zero crop, and the one off-ratio item (the 1.7181
   photo) is trimmed a few percent top and bottom rather than being floated
   in dead space. contain can only ever letterbox — it guarantees a gap the
   moment a file is off-ratio, which is exactly what happened here. */
.mc-fig video, .mc-fig img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* the older .mc-ph rule pins an 896/574 aspect and a 16px radius on images;
     both fight the frame, so they are cleared here */
  aspect-ratio: auto; border-radius: 0; box-shadow: none; background: none;
  object-position: center;
}
}
@media (max-width: 900px) {
  .mc-fig { border-radius: 16px; }
  .mc-fig video, .mc-fig img { border-radius: 16px; }

  /* The docked rule up at .mc-pin.docked .mc-pin-art is a desktop concern and
     carries 0-3-0, so it was beating the carousel's own width:100% and starving
     the scroll track to calc(100% - 48px) -- 342px inside a 390px phone. The
     cards are wider than that, so every tile was clipped and the snap ate the
     left gutter, which is why the first video sat flush against x:0. Matched
     specificity here so the track is the full width it was always meant to be. */
  .mc-pin-art,
  .mc-pin.docked .mc-pin-art {
    width: 100%; max-width: none; margin: 0;
    /* a 20px gutter instead of 32 buys each tile 24 more pixels of width */
    gap: 20px; padding: 0 20px; scroll-padding-left: 20px;
  }
  .mc-fig { flex: 0 0 calc(100vw - 40px); width: calc(100vw - 40px); }
  /* the caption sat 2px in from the video it belongs to; flush them */
  .mc-figcap { padding: 14px 0 0; }

  /* On a phone the pinned section carried no padding at all, so the video's
     top edge sat exactly on the buttons' bottom edge -- a measured 0px gap --
     and the band below it started the instant the video ended, also 0px.
     Desktop already has its own 57px above and is left alone: this is inside
     the mobile block precisely so it cannot reach it. */
  .mc-pin { padding-top: 40px; padding-bottom: 56px; }

  /* iOS page control under the carousel: 7px dots, 8px apart, centred. Colour
     is var(--ink), which flips #000 -> #f2f2f4 with the theme, so one
     declaration reads correctly in light and dark; the inactive state is the
     same ink dropped to .22 rather than a second hardcoded grey. */
  .mc-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 18px; }
  .mc-dot {
    width: 7px; height: 7px; flex: none; padding: 0; border: 0; border-radius: 50%;
    background: var(--ink); opacity: .22; cursor: pointer; position: relative;
    -webkit-appearance: none; appearance: none;
    transition: opacity .2s ease;
  }
  /* 7px is far under a finger. Grow the hit area with a transparent overlay
     instead of the dot: -4px sideways makes each target exactly 15px, which is
     the dot plus the 8px gap, so neighbours touch without overlapping and
     there is no dead strip between them. */
  .mc-dot::after { content: ""; position: absolute; inset: -10px -4px; }
  .mc-dot[aria-current="true"] { opacity: 1; }
}