/* Integration details; the original composition lives in sections.css. */
/* Compensate for padding inside the canonical OpenAI file without editing it. */
.mark img[src$="openai-platform.svg"], .tile__cover img[src$="openai-platform.svg"],
.tool-detail__art img[src$="openai-platform.svg"], .chip__mark img[src$="openai-platform.svg"] { transform:scale(1.9); }
.footer__brand .small { margin-top:20px; }
.card__maker { opacity:1; color:#fff; }
.estate__foot .text-btn { color:var(--cobalt); }
.value__ticks .tick:first-child { transform:none; }
.value__ticks .tick:last-child { transform:translateX(-100%); }
.footer p a, .methods-page p a, .methods-page small a { text-decoration:underline; text-underline-offset:3px; }
.footer__contact a, .footer__method a { overflow-wrap:anywhere; }
.methods-page { padding:120px 0 80px; }
.methods-page h1 { font-size:clamp(40px,7vw,76px); line-height:1.05; letter-spacing:-.045em; max-width:900px; }
.methods-page h2 { font-size:clamp(28px,4vw,42px); line-height:1.12; margin-bottom:20px; }
.methods-page h3 { font-size:22px; margin-bottom:10px; }
.methods-page section { padding:48px 0; border-bottom:1px solid var(--line); }
.methods-page p { max-width:800px; margin:14px 0; }
.methods-page .method-intro { font-size:20px; }
.reference-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:28px; }
.reference-card { padding:24px; background:var(--mist); border-radius:24px; }
.reference-card .price { display:block; font-size:34px; font-weight:750; }
.reference-card .mono { font-family:var(--font-mono); font-size:12px; }
.method-table { overflow:auto; margin:28px 0; }
.method-table table { width:100%; border-collapse:collapse; min-width:620px; }
.method-table th,.method-table td { text-align:left; padding:14px 12px; border-bottom:1px solid var(--line); }
.scenario-result { display:block; font-size:44px; font-weight:750; margin:18px 0; }
.methods-page input[type=range] { display:block; max-width:440px; width:100%; }
.methods-page select { display:block; max-width:100%; padding:12px; margin:16px 0; }
.methods-page .notice { background:var(--mist); border-left:3px solid var(--cobalt); padding:12px 24px; }
.methods-footer { padding:32px 0; background:var(--mist); }
@media(max-width:719px) { .reference-grid {grid-template-columns:1fr;} .methods-page {padding-top:76px;} }

/* A full-page editorial canvas: the data supplies the visual detail. */
.compare {
  --cobalt: #535481; --cobalt-halo: #53548114;
  --line: #cbc7c2; --line-2: #d9d5cf; --muted-3: #5e6370;
  background: #f2efe9; color: #232936;
  min-height: calc(100svh - 76px); padding: 28px 0 24px;
}
.compare > .container { max-width: 1680px; }
.compare .section-head__text { gap: 10px; }
.compare .section-title { font-size: clamp(30px,3.2vw,48px); font-weight: 650; letter-spacing: -.045em; }
.compare .section-lede { font-size: 15px; max-width: 680px; }
.compare .eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; }
.compare__meta { font-size: 12px; }
.compare__meta .link-strong { font-size: 12px; }
.compare__bar { margin-top: 18px; gap: 20px; }
.compare__view { margin-top: 14px; }
.compare__grid { grid-template-columns: minmax(0,1fr); gap: 20px; }
.compare .refine { border-radius: 0; background: transparent; padding: 0; gap: 20px; }
#view-value .refine { order: -1; display: grid; grid-template-columns: 240px minmax(230px,1fr) auto; align-items: start; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
#view-value .refine .field { gap: 8px; }
#view-value .refine .th { font-size: 10px; }
#view-value .refine .select { background: transparent; border-radius: 5px; height: 40px; }
#view-value .legend { border: 0; padding-top: 24px; gap: 8px; }
#view-value .legend__item { font-size: 12px; }
#view-value .refine__method { display: none; }
#util-note { font-size: 11px; line-height: 1.4; }
.compare .value__axis, .compare .vrow { grid-template-columns: 30px 250px minmax(0,1fr) 150px; column-gap: 22px; }
.compare .value__rows { min-height: 336px; margin-top: 4px; }
.compare .vrow { height: 56px; }
.compare .vrow__title, .compare .ctx__name, .compare .trank__name { font-weight: 650; }
.compare .vrow__eff, .compare .ctx__val { font-family: var(--font-mono); font-size: 16px; font-weight: 500; }
.compare .vrow__rank, .compare .trank__rank { font-family: var(--font-mono); font-weight: 400; }
.compare .vrow__plan { font-size: 12px; }
.compare .track__grid { top: -11px; bottom: -11px; background: #dedad4; }
.compare .track__conn { background: #aaa4b7; height: 1px; }
.compare .track__plan { box-shadow: none; width: 12px; height: 12px; margin: -6px 0 0 -6px; }
.compare .track__api { background: #f2efe9; width: 12px; height: 12px; margin: -6px 0 0 -6px; }
.compare .legend__dot { box-shadow: none; }
.compare .value__foot { padding-top: 10px; }
.compare .round-btn { width: 34px; height: 34px; background: transparent; color: #232936; }
.compare .chip, .compare .tab { font-size: 13px; }
.compare .task__head { margin-top: 24px; }
.compare .task__list { grid-template-columns: 1fr; }
.compare .trank { height: 64px; grid-template-columns: 30px 36px minmax(0,1fr) 150px; }
.compare .ctx { height: 66px; }
#view-tasks .refine, #view-context .refine { border-top: 1px solid var(--line); padding-top: 18px; display: flex; flex-direction: row; align-items: baseline; }
#view-tasks .refine > *, #view-context .refine > * { flex: 1; margin: 0; padding: 0; border: 0; font-size: 13px; }
@media(max-width:1099px) {
  .compare__bar { gap: 10px; }
  #view-value .refine { grid-template-columns: 220px minmax(0,1fr); }
  #view-value .legend { grid-column: 1 / -1; flex-direction: row; padding-top: 0; }
  .compare .value__axis, .compare .vrow { grid-template-columns: 24px 190px minmax(0,1fr) 120px; column-gap: 12px; }
}
@media(max-width:719px) {
  .compare { padding: 28px 0; }
  .compare .section-title { font-size: 34px; }
  .compare .section-lede { font-size: 14px; }
  #view-value .refine { grid-template-columns: 1fr; gap: 14px; }
  .compare .value__axis { grid-template-columns: 1fr; }
  .compare .vrow { grid-template-columns: 18px minmax(0,1fr) auto; height: 98px; }
  .compare .value__rows { min-height: 588px; }
  .compare .track__grid { top: -4px; bottom: -4px; }
  .compare .trank { grid-template-columns: 22px 30px minmax(0,1fr) 52px; gap: 10px; height: 84px; }
  .compare .ctx { height: auto; }
  #view-tasks .refine, #view-context .refine { flex-direction: column; gap: 12px; }
}