/* 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 { 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; }
: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; }
/* 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); }
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-codes img { right: 20.7%; left: auto; top: 18.9%; width: 80%; }
.pp-feat .row .pp-shot.pp-shot-art.pp-shot-keys img { right: 19.6%; left: auto; top: 16.2%; width: 95%; }
.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; }
  .pp-feat .row { grid-template-columns: 1fr; gap: 20px; }
  /* 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; }
}
: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-principles, .gp-cards { grid-template-columns: minmax(0, 1fr); }
  .gp-sec { padding-top: 84px; }
  .gp-band { padding: 56px 24px; }
  .gp-rows a { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* 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); }
  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 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; }

.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; }
  .mc-pin-inner { height: auto; }
  .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: 28px auto 0; translate: none; height: 44vh; min-height: 300px; }
  .mc-pin.docked .mc-pin-art { top: auto; left: auto; width: min(560px, calc(100% - 48px)); translate: none; }
  .mc-fig { justify-items: center; align-items: center; }
  .mc-pin.docked .mc-fig img { border-radius: 12px; }
  .mc-drv { height: 56vh; }
  .mcd { display: none; }
  .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; }
.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 */
}

/* 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; }
.gsl-split-art.gsl-split-art-photo img { display: block; width: 24%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 24%; box-shadow: 0 9px 22px rgba(13, 13, 13, 0.16); }
.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; }
}

/* ══ mobile alignment pass ═══════════════════════════════════════════════════
   Measured on openai.com/about and openai.com/news at 390x844 (2026-08-31):
   every block sits on ONE 24px gutter for a 342px column - nav items, section
   heads and body copy all share left 24 / right 24. Their section heads run
   24px/31.8px w500 full width, body 17px/28px, and the About CTA pair stays
   side by side rather than stacking.

   Ours used desktop 12-col maths that resolves to junk on a phone: the
   83.333vw-4px section width left 27px of dead gutter outside the container's
   own padding, and .ab-text's calc((100% - 120px)/6 + 24px) added another
   50.8px on each side. About ended up with four different left edges in one
   column - 20, 27, 47 and 97.8 - with the copy crushed into 179px. This pass
   collapses all of it onto the single 24px gutter. */
@media (max-width: 640px) {
  body.ab-page .ab-hero,
  body.ab-page .ab-split,
  body.ab-page .ab-split.rev {
    width: 100%; max-width: none;
    margin-left: 0; margin-right: 0;
    padding-left: var(--pad); padding-right: var(--pad);
  }
  body.ab-page .ab-quote {
    width: 100%; max-width: none; margin-left: 0; margin-right: 0;
    padding: 48px var(--pad) 64px;
    font-size: 24px; line-height: 31.8px;
  }
  body.ab-page .ab-band { width: 100%; }

  /* the percentage inset that pushed the copy to x97.8 in a 179px column */
  .ab-text { padding-left: 0; padding-right: 0; }
  .ab-text h2 { font-size: 24px; line-height: 31.8px; margin-bottom: 20px; }

  /* 40px type on a fixed 64px line-height; theirs is 32.45/36.87 */
  .ab-h1 { font-size: 32px; line-height: 36.8px; }

  /* theirs keeps both CTAs on one line at 342px - wrap is only the safety net
     so they can never overlap the way they did in the 179px column */
  .ab-cta { flex-wrap: wrap; row-gap: 12px; }

  /* the docs shell carried its own hardcoded 32px inset and the tab rail 16px,
     so 52 doc pages sat outside the gutter every other page uses */
  .doc-shell { padding-left: var(--pad); padding-right: var(--pad); }
  .doc-tabs { padding-left: var(--pad); padding-right: var(--pad); }
}

/* .uc-try sets display:inline-flex here, and interior.css loads after
   styles.css, so the generic .cta-web hide there loses the cascade and the doc
   header showed both CTAs at once. Scoped higher and declared later. */
@media (max-width: 840px) {
  .uc-actions .cta-web { display: none; }
}