overrides.css

/* theme2 overrides — site-wide font scale down. Loaded AFTER style.css/skin-1.css. */

/* ── Body font: Inter (Google Fonts) ── */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

html, body,
input, select, textarea, button,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.dlab-title, .dlab-head, .section-head .title, .section-head .sub-title,
.btn, .site-button, .footer, .footer-title {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  font-feature-settings: "cv11", "ss01", "cv02";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Sharper headings — matches OpenAI's tight tracking */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.dlab-title, .section-head .title {
  letter-spacing: -0.015em;
}

body {
  letter-spacing: -0.003em;
  font-weight: 400;           /* Inter Regular reads cleaner/less bold than 500 */
}
p, li, td, th, small, label, input, textarea, select { font-weight: 400; }


/* --- Brand gradient: override skin-1's pink-orange with the style.css purple-blue --- */
:root {
  --gradient:     linear-gradient(to right, #7355f7 0%, #5f3bff 51%, #7355f7 100%);
  --gradientY:    linear-gradient(to top,   #7355f7 0%, #5f3bff 100%);
  --gradient-sec: linear-gradient(to right, #130065 0%, #2b0ead 51%, #130065 100%);
  /* Override skin-1's pink --primary / --primary-dark → purple family
     (drives scroll-top button, footer-bottom background, and anywhere else
     the theme uses var(--primary)). */
  --primary:      #5f3bff;
  --primary-dark: #2b0ead;
  --primary-hover: #4b24f5;
  /* Text greys, matched to OpenAI's two levels. Reading text 15.9:1 on white,
     labels, dates and captions 5.9:1. The body stays #1a1a1a, which is
     already darker than --olw-text, and no rule was made lighter. */
  --olw-text:   #222222;
  --olw-text-2: #646464;
}
/* Apply to solid primary buttons too (not just gradient class) */
.btn-primary {
  background: var(--gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.btn-primary:hover { filter: brightness(0.92); }

/* Colored text helpers that theme2 uses — bring them into the purple family */
.text-primary { color: #5f3bff !important; }

/* Links inside CKEditor content (FAQ, About, Voice Data, etc.) — use purple
   instead of theme2's pink. Scoped so nav/button links keep their own color. */
.page-content .container a,
.blog-article__body a,
.contact-page a,
.customer-voices a { color: #5f3bff; }
.page-content .container a:hover,
.blog-article__body a:hover,
.contact-page a:hover,
.customer-voices a:hover { color: #4b24f5; text-decoration: underline; }
/* Don't touch the visible nav button */
.page-content .container a.btn,
.page-content .container a.btn:hover { color: inherit; text-decoration: none; }

/* Nav link hover — override pink var(--primary) to the button purple */
.header-nav .nav > li:hover > a,
.header-nav .nav > li.active > a,
.header-nav .nav > li > a:hover,
.header-nav .nav > li > a:focus { color: #5f3bff !important; }

/* Bolder nav link weight */
.header-nav .nav > li > a,
.header-nav .nav > li > a span { font-weight: 700 !important; }

/* Header logo, the ops.olewave.com lockup. The swirl mark sits beside the
   "Olewave" wordmark in the ops proportions (mark 30, wordmark 18, gap 8),
   scaled up for this taller header and back to the ops size on phones. The
   theme sized .logo-header as a fixed box for the old stacked logo and stretched
   its img to full width, so the top bar's box shrinks to fit and centers the
   lockup instead. The in-menu copy (.header-nav .logo-header) only shows in the
   mobile slide-out, where the theme already makes it a padded block. */
.site-header .main-bar .logo-header.logo-dark { display: flex; align-items: center; width: auto; }
/* The bar's logo and buttons are floats, and without this they share the page's
   formatting context. Whenever one hangs below the bar, as the theme's sticky
   script resizes it with a one-second height transition, the text beside it
   wraps around it. The leaderboard's intro, which starts under the logo,
   showed its first line pushed right. flow-root keeps the floats inside the
   bar. */
.site-header .main-bar { display: flow-root; }
/* direction: ltr keeps the swirl left of the wordmark on Arabic pages, where
   flex would otherwise mirror the lockup. */
.site-header .logo-header a.olw-brand { display: inline-flex; align-items: center; gap: 9px; direction: ltr; text-decoration: none; }
.site-header .logo-header a.olw-brand img { display: block; width: auto; max-width: none; }
/* The header's mark for a dark page, from bin/make_header_logo.py, with the
   white lines between the swirl's arms clear. dark.css swaps it in at night. */
.site-header .logo-header a.olw-brand img.olw-brand__mark--night { display: none; }
.site-header .logo-header a.olw-brand .olw-brand__mark { height: 36px; }
.site-header .logo-header a.olw-brand .olw-brand__wordmark { height: 22px; }
@media only screen and (max-width: 575px) {
  .site-header .logo-header a.olw-brand { gap: 8px; }
  .site-header .logo-header a.olw-brand .olw-brand__mark { height: 30px; }
  .site-header .logo-header a.olw-brand .olw-brand__wordmark { height: 18px; }
}
/* 992 to 1199 px. The menu, language picker and button nearly fill the 960 px
   container on their own, about 900 px in Japanese, so the menu wrapped to a
   second row in English, Japanese and Arabic even with the old logo. Here the
   swirl shows alone and the menu links sit closer, which keeps one row in all
   six languages. The link keeps its name through aria-label. */
/* Footer logo, the same lockup in white on the dark footer. The theme caps
   footer logo images at 70% of their box, so the images get explicit sizes. */
.site-footer .footer-logo a.olw-brand { display: inline-flex; align-items: center; gap: 10px; direction: ltr; text-decoration: none; }
.site-footer .footer-logo a.olw-brand img { display: block; width: auto; max-width: none; }
.site-footer .footer-logo a.olw-brand .olw-brand__mark { height: 40px; }
.site-footer .footer-logo a.olw-brand .olw-brand__wordmark { height: 24px; }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .site-header .main-bar .logo-header.logo-dark .olw-brand__wordmark { display: none; }
  .header-nav .nav > li > a,
  .is-fixed .header-nav .nav > li > a { padding-left: 8px; padding-right: 8px; }
}

/* Text selection color — match the purple-blue button */
::selection     { background: #5f3bff; color: #fff; }
::-moz-selection{ background: #5f3bff; color: #fff; }

/* Page-load spinner — swap the pink SVG for the purple one, and auto-fade
   after 500ms so a slow external asset (Google Fonts, tracking pixels) can't
   pin the overlay on screen. */
#loading-area.loading-02 {
  background-color: #f4f2ff !important;
  background-image: url("../images/loading-02-purple.svg") !important;
  animation: olw-loading-fade 0.45s linear 0.5s forwards;
}
@keyframes olw-loading-fade {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}


html { font-size: 90%; }          /* shrinks every rem-based measurement by 10% */

body {
  font-size: 0.95rem;
  line-height: 1.55;
  letter-spacing: -0.002em;
  color: #1a1a1a;               /* darker default text (was theme's ~#666) */
}

/* CKEditor pastes from Google Docs bring inline color:#404040 on almost every
   <span>. Override that to the darker body color so prose reads crisper.
   Scoped to prose containers; nav/footer/buttons keep their own colors. */
.page-content [style*="color:#404040"],
.page-content [style*="color: #404040"],
.blog-article__body [style*="color:#404040"],
.blog-article__body [style*="color: #404040"] {
  color: #1a1a1a !important;
}
/* Same for the light grey used inline on the Voice Data dataset IDs. It is
   3.5:1 on white. Overridden here so the page content, and its translations,
   stay untouched. */
.page-content [style*="color:#8A8A8A" i],
.page-content [style*="color: #8A8A8A" i] {
  color: var(--olw-text-2) !important;
}
/* The "Human-Sourced, Label-Validated, and Scientist-Verified" subtitle on
   Home, Voice Data and In-House Voice AI sets its colors inline, at 3.8, 2.2
   and 3.3:1 on white, where 16px bold text needs 4.5. Each hue is darkened just
   enough to pass, 4.6:1. Orange cannot reach that and stay bright, so it reads
   as ochre. */
.page-content [style*="color:#e74c3c" i], .page-content [style*="color: #e74c3c" i] { color: #df2e1b !important; }
.page-content [style*="color:#f39c12" i], .page-content [style*="color: #f39c12" i] { color: #a46808 !important; }
.page-content [style*="color:#16a085" i], .page-content [style*="color: #16a085" i] { color: #12846e !important; }

/* The footer's bottom bar is dark (#1f343b), and the page purple is 2.2:1 on
   it, so its links stay light. */
.site-footer .footer-bottom .copyright-text a {
  color: #FFFFFF;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .45);
  text-underline-offset: 3px;
}
.site-footer .footer-bottom .copyright-text a:hover { text-decoration-color: #FFFFFF; }

/* Headings — keep hierarchy but dial it back */
h1, .h1 { font-size: 2rem; line-height: 1.15; }
h2, .h2 { font-size: 1.6rem; line-height: 1.2; }
h3, .h3, .dlab-title { font-size: 1.25rem; line-height: 1.25; }
h4, .h4 { font-size: 1.1rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6, .sub-title { font-size: 0.8rem; }

/* Lead paragraphs and intro text */
.lead { font-size: 1rem; }

/* Bullet lists often use inline font-size:18px; nudge those down too */
ul.list-check-2[style*="font-size:18px"],
ul.list-check-3[style*="font-size:18px"] { font-size: 16px !important; line-height: 1.5; }

ul.list-check-2 p, ul.list-check-3 p { margin-bottom: 0.4rem; }

/* Inside the 3 home-page boxes specifically */
.icon-bx-wraper.style-7 ul li p { font-size: 16px; line-height: 1.5; }
.icon-bx-wraper.style-7 ul li { font-size: 16px; line-height: 1.5; }

/* Shrink the purple/gradient checkmark on list-check-2 and align with first line of text */
ul.list-check-2 li {
  padding: 4px 5px 4px 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px;
  position: relative;
}
ul.list-check-2 li:before {
  content: "\f00c";
  font-family: 'Line Awesome Free';
  font-weight: 900;
  font-size: 11px !important;
  width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
  border-radius: 18px !important;
  color: #fff;
  background: #000;
  background-image: var(--gradient);
  background-size: 200%;
  text-align: center;
  flex: 0 0 18px;
  margin-top: 1.18em;          /* pulls the icon down to baseline-align with the first line */
  position: static !important;  /* override theme2's absolute positioning */
  top: auto !important;
  left: auto !important;
}
ul.list-check-2 li > * { margin-bottom: 0; }

/* Buttons stay tappable but trim a bit */
.btn { font-size: 0.9rem; padding: 0.55rem 1.15rem; }

/* Section heads */
.section-head.style-1 .title { font-size: 1.6rem; }
.section-head.style-1 .sub-title { font-size: 0.8rem; letter-spacing: 0.08em; }

/* Icon boxes on card grids */
.icon-bx-wraper .dlab-title { font-size: 1.1rem; }

/* Home 3-box grid: make the box titles larger & tighter */
.icon-bx-wraper.style-7 .dlab-title,
.icon-bx-wraper.style-7 .dlab-title strong {
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}

/* Testimonials: shrink headline */
.customer-voices .title { font-size: 1.4rem; }
.customer-voices .t13-role { font-size: 1.2rem; }
.customer-voices .t13-org { font-size: 0.85rem; }
.customer-voices .testimonial-4 p { font-size: 1rem; }

/* Footer */
footer, .footer { font-size: 0.85rem; }

/* Language picker — custom dropdown with flag icons */
.olw-lang-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: inherit;
}
.olw-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid #E5E5E5;
  border-radius: 999px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #0A0A0A;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.olw-lang-btn:hover,
.olw-lang-btn[aria-expanded="true"] { border-color: #5f3bff; color: #5f3bff; }
.olw-lang-btn .olw-flag { font-size: 16px; line-height: 1; }
.olw-lang-btn svg { margin-left: 2px; }

.olw-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
  padding: 6px;
  margin: 0;
  list-style: none;
  z-index: 1000;
  max-height: 320px;
  overflow-y: auto;
}
.olw-lang-menu li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #0A0A0A;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.olw-lang-menu li:hover { background: #F2F2EE; }
.olw-lang-menu li[aria-selected="true"] {
  background: #5f3bff;
  color: #FFFFFF;
}
.olw-lang-menu li[aria-selected="true"]:hover { background: #4b24f5; }
.olw-lang-menu .olw-flag { font-size: 16px; line-height: 1; }

/* The theme menu, before the language picker: light, dark, or the system's
   setting, which is the default. A round button showing the current choice,
   in the picker's pill style, and a menu in the picker's list style.
   dark.css colours both at night. */
.olw-theme { position: relative; display: inline-flex; }
.olw-theme__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: transparent;
  border: 1px solid #E5E5E5;
  border-radius: 999px;
  color: #0A0A0A;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.olw-theme__btn:hover,
.olw-theme__btn:focus-visible,
.olw-theme__btn[aria-expanded="true"] { border-color: #5f3bff; color: #5f3bff; }
.olw-theme__btn svg { display: none; width: 18px; height: 18px; }
.olw-theme[data-mode="light"] .olw-theme__btn svg[data-for="light"],
.olw-theme[data-mode="dark"] .olw-theme__btn svg[data-for="dark"],
.olw-theme[data-mode="system"] .olw-theme__btn svg[data-for="system"] { display: block; }
.olw-theme__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
  padding: 6px;
  z-index: 1000;
}
.olw-theme__menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #0A0A0A;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.olw-theme__menu button:hover,
.olw-theme__menu button:focus-visible { background: #F2F2EE; outline: none; }
.olw-theme__menu button[aria-pressed="true"] { background: #5f3bff; color: #FFFFFF; }
.olw-theme__menu svg { width: 16px; height: 16px; flex: none; }
/* Japanese menu labels run long, and with the theme button the header was
   13px short of one row. Japanese alone trims each menu link's side padding
   by 3px, which gives back 42px at every desktop width. */
@media only screen and (min-width: 1200px) {
  html[lang="ja"] .header-nav .nav > li > a { padding-left: 12px; padding-right: 12px; }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  html[lang="ja"] .header-nav .nav > li > a { padding-left: 5px; padding-right: 5px; }
}
/* Below 576px the theme hides the right-hand group, and the language picker
   and Contact us with it. The theme button stays, alone, beside the menu toggle. */
@media only screen and (max-width: 575px) {
  .site-header .extra-nav { display: flex; height: 75px; margin-left: 8px; }
  .site-header .extra-nav .olw-lang-picker,
  .site-header .extra-nav .btn { display: none; }
}


/* Homepage announcement card — anthropic-style banner above the 3-panel row.
   Two-line block: headline + subtitle. Whole card is a link. */
.olw-announce-wrap {
  padding: 36px 0 12px;
  display: flex;
  justify-content: center;
}
/* Second and subsequent banners sit tight under the first rather than
   repeating the 36px lead-in. */
.olw-announce-wrap--stacked { padding-top: 0; }
/* Keep stacked banners the same width so their edges line up. */
.olw-announce-wrap .olw-announce { width: min(94vw, 880px); }

/* Two banners side by side (Olign left, FA-Bench right). They share the row's
   width evenly and wrap to a stack below ~900px. align-items:stretch keeps
   them the same height even when one sub-line wraps to two lines. */
.olw-announce-wrap--row {
  gap: 16px;
  flex-wrap: wrap;
  align-items: stretch;
  padding-bottom: 12px;
}
.olw-announce-wrap--row .olw-announce {
  width: auto;
  flex: 1 1 400px;
  max-width: 560px;
}
.olw-announce {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 22px 16px 16px;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 18px;
  color: #0A0A0A !important;
  text-decoration: none !important;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  max-width: min(94vw, 880px);
}
.olw-announce:hover,
.olw-announce:focus-visible {
  border-color: #5f3bff;
  box-shadow: 0 10px 28px -12px rgba(95, 59, 255, .38);
  transform: translateY(-1px);
  text-decoration: none !important;
  color: #0A0A0A !important;
}
.olw-announce__tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  background: var(--gradient);
  color: #FFFFFF;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 3px;
}
.olw-announce__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.olw-announce__text {
  color: #0A0A0A;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.olw-announce__text strong { color: #5f3bff; font-weight: 700; }
.olw-announce__sub {
  color: var(--olw-text);
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.4;
}
.olw-announce__arrow {
  color: #5f3bff;
  font-size: 22px;
  line-height: 1;
  transition: transform .18s ease;
  flex-shrink: 0;
  align-self: center;
}
.olw-announce:hover .olw-announce__arrow,
.olw-announce:focus-visible .olw-announce__arrow { transform: translateX(4px); }
@media (max-width: 640px) {
  .olw-announce { padding: 12px 14px 12px 12px; gap: 12px; border-radius: 14px; }
  .olw-announce__text { font-size: 15px; }
  .olw-announce__sub { font-size: 13px; }
  .olw-announce__tag { font-size: 10px; padding: 4px 9px; }
  .olw-announce__arrow { font-size: 18px; }
}


/* Keep Google Translate's iframe + banner out of the layout */
body { top: 0 !important; }
.goog-te-banner-frame, .skiptranslate { display: none !important; }
.goog-text-highlight { background: transparent !important; box-shadow: none !important; }
.goog-tooltip, .goog-tooltip:hover { background: none !important; border: none !important; box-shadow: none !important; }

/* ────────────────────────────────────────────────────────────────────────
   Olign product page — engineering-report aesthetic.
   Thin rules, tabular numbers, dark endpoint card, featured caveats.
   ──────────────────────────────────────────────────────────────────────── */
.olign-page {
  max-width: 920px;
  margin: 0 auto;
  padding: 48px 24px 72px;
  color: #1a1a1a;
  font-size: 1.02rem;
  line-height: 1.68;
}
.olign-page a { color: #5f3bff; text-decoration: none; border-bottom: 1px solid rgba(95,59,255,.25); transition: border-color .15s; }
.olign-page a:hover { border-color: #5f3bff; }
.olign-page code {
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: #F2F2EE;
  padding: 1px 6px;
  border-radius: 4px;
  color: #1a1a1a;
}
.olign-page em { color: #2b0ead; font-style: normal; border-bottom: 1px dotted rgba(43,14,173,.35); }

.olign-hero { border-bottom: 1px solid #E5E5E5; padding-bottom: 22px; margin-bottom: 26px; }
.olign-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #5f3bff;
  margin-bottom: 20px;
  text-transform: uppercase;
}
/* Product name inside the hero headline, in the Olign purple. */
.olign-title__brand { color: #5f3bff; }

.olign-title {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.022em;
  font-weight: 700;
  color: #0A0A0A;
  margin: 0 0 14px;
  /* Full content width, like the subtitle and the black endpoint bar below.
     Was 20ch, which suited the old short headline but wraps the service name
     into a narrow column. */
  max-width: none;
}
/* Subtitle runs the full content width, matching the black endpoint bar below
   it (.olign-page is 920px less 48px padding = 872px). Was capped at 62ch. */
.olign-lede { font-size: 1.08rem; line-height: 1.5; color: var(--olw-text); max-width: none; margin: 0; }

/* Dark endpoint card */
.olign-endpoints {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 32px;
}
.olign-endpoints--single { grid-template-columns: 1fr; }
.olign-endpoint__note {
  grid-column: 1 / -1;
  margin: 4px 2px 0;
  font-size: 0.92rem;
  color: var(--olw-text);
}
@media (max-width: 640px) { .olign-endpoints { grid-template-columns: 1fr; } }
.olign-endpoint {
  background: #0A0A0A;
  color: #E5E5E5;
  border-radius: 10px;
  padding: 14px 18px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 14px;
  overflow-x: auto;
}
.olign-endpoint__label {
  color: #E5E5E5;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 2px 8px;
  background: #5f3bff;
  border: 1px solid #7355f7;
  border-radius: 3px;
  flex-shrink: 0;
}
.olign-endpoint code { background: transparent; color: #E5E5E5; padding: 0; font-size: inherit; white-space: nowrap; }

/* Links on the two black surfaces, the endpoint card and the CTA box. The page
   purple has too little contrast on #0A0A0A, so these stay light. */
.olign-page .olign-endpoint a,
.olign-page .olign-cta p a { color: #FFFFFF; border-bottom: 1px solid rgba(255,255,255,.4); }
.olign-page .olign-endpoint a:hover,
.olign-page .olign-cta p a:hover { border-bottom-color: #FFFFFF; }

/* Section rhythm */
.olign-section { margin: 0 0 32px; }

/* Beta-open story: problem statement, then feature blocks in a grid that
   folds to one column on narrow screens. */
.olign-story__lead {
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--olw-text);
  margin: 0 0 14px;
}
.olign-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px 30px;
  margin: 26px 0 0;
}
.olign-feature {
  padding-top: 14px;
  border-top: 2px solid #5f3bff;
}
.olign-feature h3 {
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #0A0A0A;
  margin: 0 0 8px;
}
.olign-feature p { margin: 0; font-size: 0.97rem; line-height: 1.6; color: var(--olw-text); }
.olign-availability p { margin: 0 0 12px; color: var(--olw-text); }
.olign-availability .olign-links { font-weight: 600; margin: 0; }
.olign-section > h2 {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: #0A0A0A;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 2px solid #0A0A0A;
  display: inline-block;
  padding-right: 24px;
}
.olign-section__intro { font-size: 1rem; color: var(--olw-text); max-width: 68ch; margin: 0 0 24px; }
.olign-note {
  font-size: 0.96rem;
  color: var(--olw-text);
  max-width: 66ch;
  margin: 20px 0 0;
  padding-left: 18px;
  border-left: 3px solid #E5E5E5;
}

/* Table — scientific-paper feel */
.olign-table-wrap { overflow-x: auto; margin: 8px 0 4px; -webkit-overflow-scrolling: touch; }
.olign-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
  font-variant-numeric: tabular-nums lining-nums;
}
.olign-table caption { text-align: left; font-size: 0.85rem; color: var(--olw-text-2); padding: 0 0 8px; caption-side: top; }
.olign-table th, .olign-table td { padding: 10px 14px; text-align: right; }
.olign-table thead th {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--olw-text-2);
  border-bottom: 1.5px solid #0A0A0A;
  padding-bottom: 8px;
}
.olign-table tbody th {
  text-align: left;
  font-weight: 500;
  color: #0A0A0A;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 0.9rem;
}
.olign-table tbody tr { border-bottom: 1px solid #F0F0EC; }
.olign-table tbody tr:last-child { border-bottom: 1.5px solid #0A0A0A; }
.olign-table td { color: #4a4a4a; }
.olign-table td.best {
  color: #0A0A0A;
  font-weight: 700;
  position: relative;
}
.olign-table td.best::after {
  content: '';
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 6px;
  height: 2px;
  background: #5f3bff;
  opacity: 0.9;
}

/* Bar chart figure — inline SVG, responsive, no JS deps */
.olign-chart {
  margin: 20px 0 8px;
  padding: 24px 24px 20px;
  background: #FBFAF7;
  border: 1px solid #EDEBE4;
  border-radius: 12px;
}
/* Chart heading row: title left, FA-Bench mark top-right. */
.olign-chart__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 4px;
}
.olign-chart__title-link {
  color: #2b0ead;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.olign-chart__title-link:hover { color: #0A0A0A; }
.olign-chart__brand { flex: 0 0 auto; line-height: 0; margin-top: -2px; }
.olign-chart__brand img {
  width: 80px;
  height: auto;
  border-radius: 8px;
  background: #fff;
  opacity: 0.95;
  transition: opacity .15s ease;
}
.olign-chart__brand:hover img { opacity: 1; }
@media (max-width: 600px) {
  .olign-chart__brand img { width: 60px; }
}

.olign-chart__title {
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.008em;
  color: #0A0A0A;
  margin: 0 0 4px;
}
.olign-chart__sub {
  font-size: 0.9rem;
  color: var(--olw-text-2);
  margin: 0 0 20px;
}
.olign-chart__caption {
  margin: 18px 0 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--olw-text-2);
}
.olign-chart__caption em { color: #2b0ead; }

/* FA-Bench attribution under the accuracy chart: logo left, copy right. */
.olign-fabench {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  margin: 28px 0 0;
  padding: 22px 24px;
  background: #F7F7F3;
  border: 1px solid #E5E5E5;
  border-radius: 16px;
}
.olign-fabench__logo { flex: 0 0 auto; line-height: 0; }
.olign-fabench__logo img { width: 96px; height: auto; border-radius: 10px; background: #fff; }
.olign-fabench__body { min-width: 0; }
.olign-fabench__lede {
  margin: 0 0 10px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--olw-text);
}
.olign-fabench__lede strong { color: #2b0ead; font-weight: 700; }
.olign-fabench__links { margin: 0; font-size: 0.9rem; font-weight: 600; }
.olign-fabench__links a { color: #2b0ead; text-decoration: underline; text-underline-offset: 3px; }
.olign-fabench__links a:hover { color: #0A0A0A; }
.olign-fabench__sep { color: var(--olw-text-2); margin: 0 8px; }
@media (max-width: 600px) {
  .olign-fabench { flex-direction: column; gap: 14px; padding: 18px; }
  .olign-fabench__logo img { width: 72px; }
}
.olign-chart__caption code { font-size: 0.85em; background: #F2F2EE; padding: 1px 5px; border-radius: 3px; }
.olign-chart__caption strong { color: #333; font-weight: 600; }
.olign-chart__legend {
  display: flex;
  gap: 20px;
  margin: 16px 0 0;
  font-size: 12.5px;
  color: #333;
  flex-wrap: wrap;
}
.olign-chart__legend-item { display: inline-flex; align-items: center; gap: 8px; }
.olign-chart__swatch { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.olign-chart__svg {
  width: 100%;
  height: auto;
  display: block;
  font-family: inherit;
  font-variant-numeric: tabular-nums lining-nums;
}
.olign-chart__group-label {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  fill: #333;
}
.olign-chart__bar-label {
  font-size: 13px;
  font-weight: 700;
  fill: #0A0A0A;
}
.olign-chart__system-label {
  font-size: 11px;
  fill: var(--olw-text-2);
}
/* The y-axis numbers carry an inline fill="#888" and no class. A CSS rule
   beats an SVG presentation attribute, so this darkens them. */
.olign-chart__svg text[fill="#888"] { fill: var(--olw-text-2); }
.olign-chart__grid { stroke: #E5E5E5; stroke-width: 1; }
.olign-chart__axis { stroke: #0A0A0A; stroke-width: 1.5; }
.olign-chart__axis-title {
  font-size: 11px;
  fill: var(--olw-text-2);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Featured caveats */
.olign-caveats {
  background: linear-gradient(180deg, #F7F5FF 0%, #FFFFFF 100%);
  border: 1px solid #E7E2FF;
  border-radius: 16px;
  padding: 40px 40px 32px;
  margin: 84px 0 68px;
}
@media (max-width: 640px) { .olign-caveats { padding: 28px 22px 22px; } }
.olign-caveats > h2 { border-bottom-color: #5f3bff; }
.olign-caveats__lede { font-size: 1rem; color: var(--olw-text); margin: 0 0 26px; max-width: 60ch; }
.olign-caveats__list { list-style: none; padding: 0; margin: 0; counter-reset: cav; }
.olign-caveats__list li {
  counter-increment: cav;
  padding: 20px 0 20px 60px;
  border-top: 1px solid #E7E2FF;
  position: relative;
}
.olign-caveats__list li:first-child { border-top: none; padding-top: 4px; }
.olign-caveats__list li::before {
  content: counter(cav, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 20px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 13px;
  font-weight: 700;
  color: #5f3bff;
  letter-spacing: 0.05em;
}
.olign-caveats__list li:first-child::before { top: 4px; }
.olign-caveats__list h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0A0A0A;
  margin: 0 0 6px;
  letter-spacing: -0.008em;
}
.olign-caveats__list p { margin: 0; color: var(--olw-text); font-size: 0.98rem; line-height: 1.62; max-width: 62ch; }

/* References + CTA */
.olign-refs { margin: 68px 0 48px; }
.olign-refs h3 {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olw-text-2);
  margin: 0 0 16px;
}
.olign-refs ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.olign-refs li {
  display: flex;
  gap: 14px;
  font-size: 0.95rem;
  color: var(--olw-text);
  align-items: baseline;
}
.olign-refs li::before { content: '›'; color: #5f3bff; font-weight: 700; }

.olign-cta {
  margin: 40px 0 0;
  padding: 40px;
  background: #0A0A0A;
  border-radius: 16px;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.olign-cta h3 { font-size: 1.35rem; margin: 0; color: #FFFFFF; letter-spacing: -0.012em; }
.olign-cta p { margin: 0; color: #C4C4C4; max-width: 54ch; font-size: 0.98rem; }
.olign-cta a.olign-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gradient);
  color: #FFFFFF;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: none;
  transition: transform .15s;
}
.olign-cta a.olign-cta__btn:hover { transform: translateY(-1px); border-bottom: none; }

/* Homepage testimonial — more compact */
.customer-voices { padding: 36px 16px !important; }
.customer-voices .title { font-size: 1.1rem; }
.customer-voices .sub-title { font-size: 0.7rem; }
.customer-voices .testimonials-wraper-2 { max-width: 640px; padding: 0 48px; }
.customer-voices .testimonial-4 { max-width: 560px; }
.customer-voices .testimonial-name {
  display: block;
  font-size: 1.08rem;                /* +20% from 0.9rem */
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: -0.005em;
  color: #9b59b6 !important;
  margin-bottom: 10px;
}
/* Hide the theme's corner-positioned quote mark */
.customer-voices .testimonial-4.quote-left:before { content: none !important; }

/* Put a small quote glyph inline, right before the title — sits on the same
   baseline as the title text, centered with the rest of the card. */
.customer-voices .testimonial-name:before {
  content: "\f121";                 /* same flaticon quote char theme2 used */
  font-family: 'Flaticon';
  font-size: 18px;
  color: #9b59b6;
  margin-right: 8px;
  vertical-align: baseline;
  display: inline-block;
}
.customer-voices .testimonial-4 p {
  font-size: 0.95rem;
  line-height: 1.5;
}
.customer-voices .olw-prev,
.customer-voices .olw-next { width: 32px !important; height: 32px !important; font-size: 14px !important; }

/* Contact page — editorial two-column layout */
.contact-page { padding: 20px 0 64px; }
.contact-page__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  max-width: 960px;
}
@media (min-width: 768px) {
  .contact-page__grid { grid-template-columns: 5fr 7fr; gap: 56px; }
}

.contact-page__title {
  font-size: clamp(2rem, 3vw + 0.8rem, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #0A0A0A;
  margin: 0 0 16px;
  text-wrap: balance;
}
.contact-page__deck { font-size: 1.05rem; line-height: 1.6; color: var(--olw-text); margin: 0 0 24px; }
.contact-page__contacts { list-style: none; padding: 0; margin: 0; font-size: 15px; }
.contact-page__contacts li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 8px 0;
  border-top: 1px solid #E5E5E5;
}
.contact-page__contacts li:last-child { border-bottom: 1px solid #E5E5E5; }
.contact-page__contacts span {
  min-width: 72px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--olw-text-2);
  font-weight: 600;
}
.contact-page__contacts a { color: #0A0A0A; text-decoration: none; }
.contact-page__contacts a:hover { text-decoration: underline; }

.contact-page__process {
  margin-top: 28px;
  padding: 18px 20px;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
  background: #FAFAF7;
}
.contact-page__process-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--olw-text-2);
  margin-bottom: 6px;
}
.contact-page__process p { margin: 0; color: #1a1a1a; line-height: 1.55; font-size: 14.5px; }

.contact-page__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border: 1px solid #E5E5E5;
  border-radius: 16px;
  background: #FFFFFF;
}
.contact-page__row { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 520px) { .contact-page__row { grid-template-columns: 1fr 1fr; } }

.contact-page__form label { display: flex; flex-direction: column; gap: 4px; }
.contact-page__form label > span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--olw-text-2);
}
.contact-page__form label > span small {
  font-size: 11px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--olw-text-2);
}
.contact-page__form input,
.contact-page__form textarea {
  width: 100%;
  padding: 10px 14px;
  font: inherit;
  background: #FAFAF7;
  border: 1px solid #E5E5E5;
  border-radius: 10px;
  color: #0A0A0A;
}
.contact-page__form input:focus,
.contact-page__form textarea:focus { outline: none; border-color: #0A0A0A; background: #FFFFFF; }
.contact-page__form textarea { resize: vertical; min-height: 140px; }
.contact-page__form .btn { align-self: flex-start; margin-top: 6px; }

.contact-page__ok { background: #ECFDF5; color: #065F46; padding: 10px 14px; border-radius: 10px; font-size: 14px; }
.contact-page__err { background: #FEF2F2; color: #991B1B; padding: 10px 14px; border-radius: 10px; font-size: 14px; }

/* Blog list (index.html) — editorial grid */
.blog-index { padding: 20px 0 64px; }

/* Theme wraps content in .content-inner (padding-top:115px). Zero it out on
   editorial pages so they sit flush under the nav like the home page. */
.content-inner:has(.blog-index),
.content-inner:has(.blog-article),
.content-inner:has(.contact-page) { padding-top: 0 !important; padding-bottom: 0 !important; }
.content-inner:has(.blog-index) .col-xl-8,
.content-inner:has(.blog-article) .col-xl-8,
.content-inner:has(.contact-page) .col-xl-8,
.content-inner:has(.blog-index) .col-lg-8,
.content-inner:has(.blog-article) .col-lg-8,
.content-inner:has(.contact-page) .col-lg-8 {
  margin-bottom: 0 !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  width: 100% !important;
}
.blog-index__head { max-width: 780px; margin: 0 0 16px; }
.blog-index__eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  font-weight: 600;
  color: #9b59b6;
  margin-bottom: 10px;
}
.blog-index__title {
  font-size: clamp(1.8rem, 3vw + 0.8rem, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #0A0A0A;
  margin: 0 0 10px;
  text-wrap: balance;
}
.blog-index__deck { color: var(--olw-text); font-size: 1rem; margin: 0; }

.blog-index__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 40px 28px;
}

.blog-card { display: flex; flex-direction: column; text-decoration: none; }
.blog-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 16px;
  background: #F2F2EE;
  display: block;
  margin-bottom: 16px;
}
/* object-fit: contain shows the entire image (letterboxed if aspect ratio differs)
   so text/logos in banners don't get cropped to the center. */
.blog-card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s ease; display:block; }
.blog-card:hover .blog-card__media img { transform: scale(1.02); }

.blog-card__body { display: flex; flex-direction: column; gap: 6px; }
.blog-card__cat {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 600;
  color: var(--olw-text-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.blog-card__badge {
  display: inline-block;
  padding: 2px 8px;
  background: #5f3bff;
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.06em;
}

/* Subnav on /blog/ umbrella (links to sub-type filters like /blog/video/) */
.blog-index__subnav {
  margin-top: 8px;
  display: flex;
  gap: 18px;
  font-size: 14px;
}
.blog-index__subnav a {
  color: #5f3bff;
  text-decoration: none;
  font-weight: 600;
}
.blog-index__subnav a:hover { text-decoration: underline; }
.blog-card__title {
  font-size: 1.2rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 600;
  margin: 0;
}
.blog-card__title a { color: #0A0A0A; text-decoration: none; }
.blog-card__title a:hover { color: #525252; }
.blog-card__excerpt {
  color: var(--olw-text);
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card__meta { color: var(--olw-text-2); font-size: 12.5px; display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.blog-card__sep { color: #d0d0d0; }

.blog-index__pagination {
  display: flex; justify-content: center; align-items: center; gap: 12px;
  margin-top: 56px; font-size: 14px;
}
.blog-index__pag-btn {
  padding: 6px 14px;
  border: 1px solid #E5E5E5;
  border-radius: 999px;
  color: #525252;
  text-decoration: none;
}
.blog-index__pag-btn:hover { color: #FAFAF7; background: #0A0A0A; border-color: #0A0A0A; }
.blog-index__pag-count { color: var(--olw-text-2); }
.blog-index__empty { padding: 80px 0; text-align: center; color: var(--olw-text-2); }

/* Blog article — editorial layout matching the home page's typographic language */
/* Watermark graphic behind every article, lifted out of the one post that
   carried it inline so all posts share it. */
.blog-article {
  padding: 20px 0 32px;
  background-image: url(../images/background/bg15.png);
  background-repeat: no-repeat;
  background-position: center right;
  background-size: contain;
}
.blog-article__inner { max-width: 720px; margin: 0 auto; }

.blog-article__head { margin-bottom: 18px; }
.blog-article__eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  font-weight: 600;
  color: #9b59b6;
  text-decoration: none;
  margin-bottom: 14px;
}
.blog-article__eyebrow:hover { color: #0A0A0A; }

.blog-article__title {
  /* 23px at 375px vp → 46.1px at 1440px+ (halved openai.com curve, then +20%
     twice; divisor set so the slope keeps the same shape). */
  font-size: clamp(23.04px, calc(23.04px + (100vw - 375px) / 46.22), 46.08px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #0A0A0A;
  margin: 0 0 16px;
  text-wrap: balance;
}

/* The header block sits in the same 720px column as the body copy — eyebrow,
   title, deck and byline all share the body's left edge and width. */

.blog-article__eyebrow,
.blog-article__title,
.blog-article__deck,
.blog-article__meta { text-align: left; }
.blog-article__deck { max-width: none; }

.blog-article__deck {
  font-size: 1.18rem;   /* 17px at the 90% root — same as body, as on openai.com */
  line-height: 1.647;
  color: var(--olw-text);
  margin: 0 0 20px;
  text-wrap: pretty;
}

.blog-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #525252;
}
.blog-article__author { color: #0A0A0A; font-weight: 500; text-decoration: none; }
.blog-article__author:hover { text-decoration: underline; }
.blog-article__sep { color: var(--olw-text-2); }

.blog-article__hero {
  width: 80%;
  margin: 18px auto;
  overflow: hidden;
  border-radius: 20px;
  background: #F2F2EE;
}
.blog-article__hero img { display:block; width: 100%; height: auto; }

/* Lite YouTube facade: thumbnail with big play button; iframe loads only when clicked */
.blog-article__body .video-lite {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 1.75em 0;
  padding: 0;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
}
.blog-article__body .video-lite img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .25s ease, transform .35s ease;
}
.blog-article__body .video-lite:hover img,
.blog-article__body .video-lite:focus-visible img {
  opacity: .78;
  transform: scale(1.02);
}
.blog-article__body .video-lite__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.blog-article__body .video-lite__play svg {
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.55));
  transition: transform .18s ease;
}
.blog-article__body .video-lite:hover .video-lite__play svg,
.blog-article__body .video-lite:focus-visible .video-lite__play svg {
  transform: scale(1.12);
}

/* Fullscreen-ish modal player (does not enter native fullscreen — user can close and stay on olewave.com) */
.olw-video-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, .94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 40px 40px;
  animation: olw-modal-in .18s ease-out;
}
.olw-video-modal[hidden] { display: none; }
@keyframes olw-modal-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.olw-video-modal__inner {
  position: relative;
  width: 100%;
  max-width: 1600px;
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - 100px);
}
.olw-video-modal__player,
.olw-video-modal__player iframe {
  width: 100%;
  height: 100%;
}
.olw-video-modal__player iframe {
  border: 0;
  border-radius: 8px;
}
.olw-video-modal__close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, .08);
  border: none;
  color: #fff;
  font-size: 30px;
  line-height: 44px;
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  transition: background .15s, transform .15s;
}
.olw-video-modal__close:hover {
  background: rgba(255, 255, 255, .18);
  transform: scale(1.06);
}
@media (max-width: 640px) {
  .olw-video-modal { padding: 60px 12px 12px; }
  .olw-video-modal__close { top: 10px; right: 10px; }
}

/* Contact CTA appended to tutorial posts */
.blog-article__cta {
  margin: 40px 0 24px;
  padding: 24px 28px;
  background: #F7F7F3;
  border: 1px solid #E5E5E5;
  border-radius: 16px;
  font-size: 1rem;
  line-height: 1.55;
}
.blog-article__cta p { margin: 0 0 10px; }
.blog-article__cta p:last-child { margin-bottom: 0; }
.blog-article__cta a { font-weight: 600; }

.blog-article__body {
  font-size: 1.18rem;   /* 17px / 12.75pt at the 90% root — matches openai.com's --type-p1 */
  line-height: 1.647;   /* 28px, as on openai.com */
  color: inherit;
  font-weight: 400;
}
.blog-article__body p,
.blog-article__body li { font-weight: 400; }
.blog-article__body p { margin: 0 0 1.15em; }

/* Figure + caption — centred image with caption beneath.
   Use <figure><img ...><figcaption>Fig 1. …</figcaption></figure> in a post,
   or a bare markdown image, which is centred by the :only-child rule below. */
.blog-article__body figure { margin: 1.2em 0; }
.blog-article__body figure img { display: block; margin: 0 auto; }
.blog-article__body figcaption {
  margin-top: 0.6em;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--olw-text-2);
  text-align: center;
  text-wrap: pretty;
}
.blog-article__body p > img:only-child { display: block; margin: 0.6em auto; }
.blog-article__body h1,
.blog-article__body h2,
.blog-article__body h3,
.blog-article__body h4 {
  font-weight: 700;
  color: #0A0A0A;
  letter-spacing: -0.015em;
  margin: 1.35em 0 0.5em;
  line-height: 1.25;
}
.blog-article__body h2 { font-size: 1.6rem; }
.blog-article__body h3 { font-size: 1.3rem; }
.blog-article__body h4 { font-size: 1.1rem; }
.blog-article__body img { max-width: 100%; height: auto; border-radius: 12px; margin: 0.6em 0; }
.blog-article__body a { color: #0A0A0A; text-decoration: underline; text-decoration-color: #E5E5E5; text-underline-offset: 3px; }
.blog-article__body a:hover { text-decoration-color: #0A0A0A; }
.blog-article__body blockquote {
  border-left: 3px solid #0A0A0A;
  padding: 4px 0 4px 20px;
  margin: 1.5em 0;
  color: var(--olw-text);
  font-style: italic;
}
/* Inline code — subtle light chip inside prose */
.blog-article__body code {
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Courier New', monospace;
  font-size: 0.9em;
  background: #F2F2EE;
  color: #0A0A0A;
  padding: 1px 6px;
  border-radius: 6px;
}

/* Force transparent background on prose (defeats any theme/CKEditor bg tints on <p>/<span>) */
.blog-article__body p,
.blog-article__body p span,
.blog-article__body li,
.blog-article__body li span {
  background: transparent !important;
  background-color: transparent !important;
}

/* Modern VSCode-dark code block — applied automatically to any <pre> in blog body,
   or explicitly via class="code-block" (or "code-json" for JSON snippets). */
.blog-article__body pre,
.blog-article__body pre.code-block,
.blog-article__body pre.code-json,
.code-block {
  background: #1E1E1E;
  border: 1px solid #2A2A2A;
  border-radius: 8px;
  padding: 18px 20px;
  overflow-x: auto;
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.55;
  color: #D4D4D4;
  white-space: pre;
  margin: 1.5em 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.blog-article__body pre code,
.blog-article__body pre.code-block code,
.blog-article__body pre.code-json code,
.code-block code {
  background: transparent;
  border: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
  white-space: pre;
}

/* Prism.js token colors — VSCode "Modern Dark" (matches Google Antigravity default).
   Applies wherever Prism has tokenized <code class="language-*"> content. */
.blog-article__body pre[class*="language-"],
.blog-article__body code[class*="language-"],
.code-block[class*="language-"],
pre[class*="language-"],
code[class*="language-"] {
  color: #CCCCCC;
  text-shadow: none;
  background: #1F1F1F;
}
.token.property,
.token.tag,
.token.symbol,
.token.deleted,
.token.attr-name { color: #9CDCFE; }        /* keys — light blue */
.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.inserted { color: #CE9178; }         /* string values — orange */
.token.number,
.token.hexcode { color: #B5CEA8; }          /* numbers — soft green */
.token.boolean,
.token.constant,
.token.keyword,
.token.builtin { color: #569CD6; }          /* booleans/keywords — blue */
.token.null { color: #569CD6; font-style: italic; }
.token.operator,
.token.punctuation,
.token.entity { color: #808080; }           /* :, {, }, [, ], , */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata { color: #6A9955; font-style: italic; }  /* comments — green */
.token.function,
.token.class-name { color: #DCDCAA; }       /* function names — yellow */
.token.variable,
.token.parameter { color: #9CDCFE; }        /* variables — light blue */
.token.important { color: #C586C0; font-weight: bold; }
.blog-article__body ul,
.blog-article__body ol { padding-left: 1.25em; margin: 0 0 1.15em; }
.blog-article__body li { margin: 0.35em 0; }
.blog-article__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25em 0;
  font-size: 0.95em;
}
.blog-article__body th,
.blog-article__body td { border: 1px solid #E5E5E5; padding: 8px 10px; text-align: left; }
.blog-article__body th { background: #F7F7F3; font-weight: 600; }

.blog-article__tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 40px 0 24px;
  padding-top: 24px;
  border-top: 1px solid #E5E5E5;
}
.blog-article__tag {
  padding: 4px 12px;
  border: 1px solid #E5E5E5;
  border-radius: 999px;
  font-size: 13px;
  color: #525252;
  text-decoration: none;
}
.blog-article__tag:hover { color: #0A0A0A; border-color: #0A0A0A; }

.blog-article__share {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 16px 0 0 0;
  font-size: 14px;
}
.blog-article__share-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 600;
  color: var(--olw-text-2);
  margin-right: 4px;
}
.blog-article__share a {
  padding: 4px 12px;
  border: 1px solid #E5E5E5;
  border-radius: 999px;
  color: #525252;
  text-decoration: none;
  font-size: 13px;
}
.blog-article__share a:hover { color: #FAFAF7; background: #0A0A0A; border-color: #0A0A0A; }

.blog-article__comments {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid #E5E5E5;
}
.blog-article__comments h2 {
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
}
.blog-article__comments .comment-list { list-style: none; padding: 0; margin: 0 0 40px; }
.blog-article__comments .comment { margin-bottom: 20px; }
.blog-article__comments .comment-body {
  border: 1px solid #E5E5E5;
  border-radius: 12px;
  padding: 16px 18px;
  background: #fff;
}
.blog-article__comments .comment-author { display:flex; align-items:center; gap: 10px; margin-bottom: 6px; }
.blog-article__comments .avatar { width: 32px; height: 32px; border-radius: 32px; }
.blog-article__comments cite { font-style: normal; font-weight: 600; color: #0A0A0A; }
.blog-article__comments .reply { margin-top: 8px; }
.blog-article__comments .reply a { font-size: 13px; color: #525252; }
.blog-article__comments .reply a:hover { color: #0A0A0A; }
.blog-article__comments .comment-respond input[type="text"],
.blog-article__comments .comment-respond input[type="email"],
.blog-article__comments .comment-respond textarea {
  width: 100%;
  border: 1px solid #E5E5E5;
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  background: #fff;
}
.blog-article__comments .comment-respond label {
  display: block;
  font-size: 13px;
  color: #525252;
  margin-bottom: 4px;
}
.blog-article__comments .comment-respond p { margin: 0 0 14px; }

/* Floating tooltip for nav items that have a description (uses data-tooltip attr) */
a[data-tooltip] { position: relative; }
a[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  transform: translate(-50%, 4px);
  background: #0A0A0A;
  color: #FAFAF7;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  max-width: 280px;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .22s cubic-bezier(.2,.9,.3,1.2), visibility 0s linear .2s;
  z-index: 100;
}
a[data-tooltip]::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 2px);
  border: 6px solid transparent;
  border-bottom-color: #0A0A0A;
  margin-top: -2px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .22s cubic-bezier(.2,.9,.3,1.2), visibility 0s linear .2s;
  pointer-events: none;
  z-index: 101;
}
a[data-tooltip]:hover::after,
a[data-tooltip]:focus-visible::after,
a[data-tooltip]:hover::before,
a[data-tooltip]:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

/* Kill the WOW.js entrance animations entirely — show content instantly */
.wow,
[data-wow-delay],
[data-wow-duration] {
  animation: none !important;
  -webkit-animation: none !important;
  animation-delay: 0s !important;
  -webkit-animation-delay: 0s !important;
  animation-duration: 0s !important;
  -webkit-animation-duration: 0s !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Consulting page, "How we start" (bin/patch_consulting_routine.py). Two
   numbered cards side by side, stacked on phones. The numbers come from a CSS
   counter, so no translation has to carry them. The home page links to
   #how-we-start, and scroll-margin keeps the heading clear of the sticky header. */
.olw-steps-head {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #0A0A0A;
  margin: 36px 0 16px;
  scroll-margin-top: 110px;
}
.olw-steps {
  list-style: none;
  counter-reset: olw-step;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 0;
  margin: 0 0 16px;
}
.olw-steps__item {
  counter-increment: olw-step;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px 22px 22px;
  border: 1px solid #E5E5E5;
  border-radius: 14px;
  background: #fff;
}
.olw-steps__item::before {
  content: counter(olw-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: #5f3bff;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.olw-steps__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: #0A0A0A;
  margin: 0 0 8px;
}
.olw-steps__item p { margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: var(--olw-text); }
.olw-steps__item p.olw-steps__action { margin: auto 0 0; }
.olw-steps__note { margin: 0; font-size: 15px; line-height: 1.6; color: var(--olw-text-2); }
@media only screen and (max-width: 767px) {
  .olw-steps { grid-template-columns: 1fr; }
}