/* Shared, scoped styles for options flow research on public feature pages. */
.of-page { --of-bg: #fff; --of-soft: #f5f8fc; --of-ink: #101d35; --of-muted: #53627a; --of-line: #dce4ef; --of-accent: #2450db; color: var(--of-ink); background: var(--of-bg); line-height: 1.7; }
.dark .of-page { --of-bg: #111827; --of-soft: #182236; --of-ink: #f1f5fc; --of-muted: #b4c1d5; --of-line: #34425a; --of-accent: #94b4ff; }
.of-page * { box-sizing: border-box; }
.of-container { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }
.of-page h1, .of-page h2, .of-page h3 { color: var(--of-ink); font-weight: 750; line-height: 1.15; letter-spacing: -.035em; }
.of-page h1 { font-size: clamp(2.4rem, 4.7vw, 4.4rem); max-width: 1050px; margin: 24px auto; }
.of-page h1 span { color: var(--of-accent); }
.of-page h2 { font-size: clamp(1.85rem, 3vw, 2.65rem); margin: 0 0 22px; }
.of-page h3 { font-size: 1.2rem; margin: 16px 0 12px; letter-spacing: -.02em; }
.of-page p { color: var(--of-muted); margin: 0 0 20px; }
.of-page strong { color: var(--of-ink); font-weight: 650; }
.of-page a:focus-visible, .of-page summary:focus-visible { outline: 3px solid var(--of-accent); outline-offset: 5px; border-radius: 4px; }
.of-hero { padding: 64px 0 0; background: linear-gradient(180deg, var(--of-soft), var(--of-bg)); text-align: center; }
.of-announcement { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 6px 14px 6px 7px; border: 1px solid var(--of-line); border-radius: 30px; color: var(--of-accent); background: var(--of-bg); font-size: .82rem; font-weight: 600; }
.of-announcement > span:first-child { padding: 2px 10px; border-radius: 20px; background: #2450db; color: white; }
.of-page .of-lead { max-width: 810px; margin: 0 auto 28px; font-size: 1.16rem; line-height: 1.8; }
.of-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 26px 0 16px; }
.of-button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 50px; padding: 12px 24px; border: 1px solid transparent; border-radius: 8px; font-weight: 650; font-size: .94rem; text-decoration: none; transition: background .15s ease; }
.of-page .of-button-primary { color: white; background: #2450db; box-shadow: 0 4px 10px #2450db18; }
.of-page .of-button-primary:hover { background: #183caf; }
.of-page .of-button-secondary { color: var(--of-ink); background: var(--of-bg); border-color: var(--of-line); }
.of-page .of-button-secondary:hover { background: var(--of-soft); }
.of-page .of-availability { font-size: .8rem; margin-bottom: 36px; }
.of-screen { margin: 0; overflow: hidden; border: 1px solid var(--of-line); border-radius: 12px; background: var(--of-bg); box-shadow: 0 8px 28px #0d224508; min-width: 0; }
.of-screen a { display: block; }
.of-screen img { display: block; width: 100%; height: auto; background: white; }
.of-screen figcaption { padding: 14px 20px; font-size: .8rem; color: var(--of-muted); line-height: 1.65; text-align: left; border-top: 1px solid var(--of-line); }
.of-hero-screen { box-shadow: 0 18px 60px #142e6314; }
.of-screen-bar { display: flex; align-items: center; gap: 9px; padding: 12px 18px; background: var(--of-bg); color: var(--of-muted); font-size: .66rem; font-weight: 650; letter-spacing: .1em; border-bottom: 1px solid var(--of-line); }
.of-screen-bar > span:last-child { margin-left: auto; font-weight: 400; letter-spacing: 0; }
.of-dot { width: 7px; height: 7px; border-radius: 100%; background: #2450db; }
.of-proof-row { display: grid; grid-template-columns: repeat(3, 1fr); padding: 32px 0; text-align: left; }
.of-proof-row > div { padding: 0 28px; border-right: 1px solid var(--of-line); }
.of-proof-row > div:first-child { padding-left: 0; }
.of-proof-row > div:last-child { border: 0; }
.of-proof-row strong, .of-proof-row span { display: block; }
.of-proof-row strong { font-size: 1.1rem; }
.of-proof-row span { color: var(--of-muted); font-size: .85rem; margin-top: 4px; }
.of-jump-nav { border-block: 1px solid var(--of-line); background: var(--of-bg); }
.of-jump-nav .of-container { display: flex; gap: 30px; overflow-x: auto; padding-block: 17px; }
.of-jump-nav a { white-space: nowrap; font-size: .82rem; color: var(--of-muted); font-weight: 600; }
.of-jump-nav a:hover { color: var(--of-accent); }
.of-section { padding: 86px 0; scroll-margin-top: 96px; }
.of-section-tinted { background: var(--of-soft); border-block: 1px solid var(--of-line); }
.of-section-heading { max-width: 790px; margin: 0 auto 36px; text-align: center; }
.of-section-heading > p:last-child { font-size: 1.03rem; }
.of-page .of-eyebrow { color: var(--of-accent); font-size: .73rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; }
.of-example { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 26px 30px; margin-bottom: 24px; border: 1px solid var(--of-line); border-radius: 12px; background: var(--of-soft); }
.of-example span { display: block; font-size: .74rem; color: var(--of-muted); }
.of-example strong { display: block; margin-top: 7px; font-size: 1.75rem; letter-spacing: -.035em; }
.of-example small { font-size: .8rem; font-weight: 400; letter-spacing: 0; color: var(--of-muted); }
.of-feature-grid { display: grid; grid-template-columns: 1fr 1.35fr; align-items: center; gap: 48px; }
.of-feature-copy { min-width: 0; }
.of-checks { padding: 0; margin: 24px 0; list-style: none; color: var(--of-muted); font-size: .92rem; }
.of-checks li { position: relative; padding-left: 20px; margin: 15px 0; }
.of-checks li::before { content: ''; position: absolute; top: .7em; left: 0; width: 6px; height: 6px; background: var(--of-accent); border-radius: 2px; }
.of-text-link { display: inline-block; color: var(--of-accent); font-size: .9rem; font-weight: 650; }
.of-text-link:hover { text-decoration: underline; }
.of-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 32px; }
.of-cards article { padding: 26px; border: 1px solid var(--of-line); border-radius: 10px; }
.of-card-number { font-size: .75rem; font-weight: 650; color: var(--of-accent); }
.of-cards p { font-size: .9rem; margin: 0; }
.of-footprint-intro { grid-template-columns: 1fr 1fr; margin-bottom: 28px; }
.of-filter-grid { grid-template-columns: 1fr 310px; max-width: 960px; margin: 0 auto; gap: 80px; }
.of-filter-screen { max-width: 247px; margin-inline: auto; }
.of-filter-screen img { max-height: 490px; object-fit: contain; }
.of-ai-panel { margin-top: 80px; padding: 44px; border: 1px solid var(--of-line); border-radius: 16px; background: var(--of-soft); }
.of-journal { padding: 76px 0; background: #102345; }
.of-journal h2, .of-journal h3 { color: #fff; }
.of-journal p { color: #c2cfe4; }
.of-journal .of-eyebrow { color: #a4c5ff; }
.of-workflow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; list-style: none; margin: 40px 0; padding: 0; }
.of-workflow li { padding-top: 22px; border-top: 1px solid #415273; }
.of-workflow li > span { color: #a4c5ff; font-size: .8rem; }
.of-workflow p { font-size: .9rem; }
.of-workflow code { color: #e2eeff; font-size: .85em; overflow-wrap: anywhere; }
.of-page .of-journal .of-button-secondary { background: transparent; color: #fff; border-color: #65789a; }
.of-page .of-journal .of-button-secondary:hover { background: #1d355d; }
.of-faq-layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: 70px; align-items: start; }
.of-faq-list details { border-bottom: 1px solid var(--of-line); padding: 20px 0; }
.of-faq-list details:first-child { padding-top: 0; }
.of-faq-list summary { cursor: pointer; font-size: 1rem; font-weight: 650; color: var(--of-ink); padding-right: 12px; }
.of-faq-list details p { margin: 16px 0 0; font-size: .92rem; }
.of-resources { padding: 32px 0 48px; background: var(--of-soft); border-top: 1px solid var(--of-line); }
.of-resources h2 { font-size: 1.2rem; letter-spacing: -.01em; }
.of-resource-links { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.of-resource-links a { color: var(--of-accent); text-decoration: underline; text-underline-offset: 4px; font-size: .88rem; }
.of-explain-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin: 30px 0 36px; }
.of-explain-grid > div { border-top: 2px solid var(--of-line); padding-top: 8px; }
.of-explain-grid p { font-size: .92rem; margin-bottom: 0; }
.of-subsection-heading { max-width: 840px; margin: 40px 0 24px; }
.of-subsection-heading h3 { font-size: 1.5rem; }
.of-page .of-takeaway { padding: 22px 26px; margin: 26px 0 0; background: var(--of-soft); border-left: 3px solid var(--of-accent); font-size: .95rem; }
.of-screen + .of-example { margin-top: 26px; }
.of-screenshot-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.of-screenshot-pair > div { min-width: 0; }
.of-screenshot-pair > div > p { font-size: .94rem; }
.of-filter-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.of-filter-gallery article { min-width: 0; padding: 24px; background: var(--of-soft); border: 1px solid var(--of-line); border-radius: 12px; }
.of-filter-gallery h3 { margin-top: 0; }
.of-filter-gallery p { min-height: 105px; font-size: .9rem; }
.of-filter-gallery .of-screen a { background: #fff; }
.of-filter-gallery img { width: auto; max-width: 100%; height: auto; max-height: 560px; margin-inline: auto; }
.of-comparison-scroll { overflow-x: auto; border: 1px solid var(--of-line); border-radius: 12px; }
.of-page .of-comparison-table { border-collapse: collapse; width: 100%; min-width: 720px; text-align: left; font-size: .9rem; line-height: 1.65; color: var(--of-muted); }
.of-comparison-table caption { padding: 18px 22px; color: var(--of-muted); text-align: left; font-size: .84rem; background: var(--of-soft); }
.of-comparison-table th, .of-comparison-table td { padding: 20px 22px; vertical-align: top; border-top: 1px solid var(--of-line); }
.of-comparison-table thead th { color: var(--of-ink); background: var(--of-soft); font-weight: 650; }
.of-comparison-table tbody th { width: 24%; color: var(--of-ink); font-weight: 650; }
.of-comparison-table th:last-child, .of-comparison-table td:last-child { background: var(--of-soft); width: 40%; }
.of-value-note { padding: 24px 28px; margin-top: 24px; border: 1px solid var(--of-line); border-radius: 10px; }
.of-value-note h3 { margin-top: 0; }
.of-value-note p { margin-bottom: 0; font-size: .94rem; }
.of-journal-research .of-section { padding-block: 68px; }
.of-journal-research .of-section-heading { max-width: 850px; }
.of-journal-research .of-jump-nav { margin-top: 30px; }
.of-plan-example { padding: 26px 30px; background: var(--of-soft); border: 1px solid var(--of-line); border-radius: 12px; }
.of-plan-example dl { display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: 18px 24px; margin: 0; }
.of-plan-example dt { font-size: .8rem; font-weight: 650; color: var(--of-accent); text-transform: uppercase; letter-spacing: .04em; }
.of-plan-example dd { margin: 0; color: var(--of-muted); font-size: .93rem; }
.of-plan-example code { color: var(--of-ink); overflow-wrap: anywhere; }
.of-jump-nav a:focus-visible, .of-comparison-scroll:focus-visible { outline: 3px solid var(--of-accent); outline-offset: -3px; }
@media (max-width: 900px) {
    .of-feature-grid, .of-faq-layout { grid-template-columns: 1fr; gap: 30px; }
    .of-filter-grid { grid-template-columns: 1fr 247px; gap: 32px; }
    .of-cards { gap: 14px; }
    .of-cards article { padding: 20px; }
    .of-example strong { font-size: 1.5rem; }
    .of-example small { display: block; }
    .of-filter-gallery { gap: 14px; }
    .of-filter-gallery article { padding: 16px; }
    .of-filter-gallery p { min-height: 155px; }
}
@media (max-width: 600px) {
    .of-container { width: calc(100% - 32px); }
    .of-hero { padding-top: 36px; }
    .of-announcement { font-size: .72rem; gap: 6px; }
    .of-page .of-lead { font-size: 1rem; }
    .of-actions { align-items: stretch; flex-direction: column; }
    .of-page .of-availability { font-size: .74rem; }
    .of-screen-bar > span:last-child { display: none; }
    .of-proof-row { grid-template-columns: 1fr; gap: 16px; padding-block: 24px; }
    .of-proof-row > div { padding: 0; border: 0; }
    .of-proof-row strong { display: inline; margin-right: 8px; font-size: .9rem; }
    .of-proof-row span { display: inline; font-size: .78rem; }
    .of-jump-nav .of-container { gap: 24px; }
    .of-section { padding: 52px 0; }
    .of-example { grid-template-columns: 1fr; gap: 18px; padding: 22px; }
    .of-example small { display: inline; margin-left: 4px; }
    .of-screen figcaption { padding: 12px 14px; font-size: .75rem; }
    .of-cards, .of-workflow, .of-filter-grid { grid-template-columns: 1fr; }
    .of-filter-screen img { max-height: none; }
    .of-ai-panel { padding: 26px 16px; margin-top: 48px; }
    .of-workflow { gap: 10px; }
    .of-journal { padding: 52px 0; }
    .of-explain-grid, .of-screenshot-pair, .of-filter-gallery { grid-template-columns: 1fr; gap: 24px; }
    .of-filter-gallery p { min-height: 0; }
    .of-filter-gallery img { max-height: none; }
    .of-journal-research .of-section { padding-block: 48px; }
    .of-plan-example { padding: 22px; }
    .of-plan-example dl { grid-template-columns: 1fr; gap: 8px; }
    .of-plan-example dd { margin-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) { .of-button { transition: none; } }