/* Unlinked review concepts: Bootstrap owns grids, spacing, cards, tabs and controls.
   Scoped rules restore document scrolling and carry the existing paper palette. */
html.concept-document, .concept-page { height: auto; min-height: 100%; overflow: visible; }
.concept-page { background: var(--desk-bg); background-image: radial-gradient(ellipse 80% 40rem at 10% 5%, #eae3d8aa, transparent 80%); }
.concept-page main { max-width: 1240px; }
.concept-page .preview-bar { background: #eae7df; border-bottom: 1px solid var(--bs-border-color); }
.concept-page .preview-option { padding: .35rem .7rem; border-radius: 2rem; color: var(--desk-muted); font-size: .75rem; text-decoration: none; }
.concept-page .preview-option.is-current { color: var(--desk-ink); background: var(--desk-paper); box-shadow: 0 1px 3px #2a292410; }
.concept-page .concept-header { background: var(--desk-bg); border-bottom: 1px solid #dedbd480; }
.concept-page .concept-section { padding-top: clamp(2.75rem, 6vw, 5rem); padding-bottom: clamp(2.75rem, 6vw, 5rem); scroll-margin-top: 1rem; }
.concept-page .editorial { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.045em; }
.concept-page .hero-title { font-size: clamp(2.9rem, 5.2vw, 5.1rem); line-height: 1.04; }
.concept-page .hero-title em { color: var(--desk-teal); font-weight: 400; }
.concept-page .section-title, .concept-page #usp .section-title { font-size: clamp(2rem, 3vw, 2.9rem); line-height: 1.12; }
.concept-page .eyebrow { font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--desk-muted); font-weight: 600; }
.concept-page .measure { max-width: 31rem; }
.concept-page .measure-wide { max-width: 44rem; }
.concept-page .lead { font-size: 1.1rem; }
.concept-page .editorial-photo { max-width: 31rem; height: 11rem; }
.concept-page .editorial-photo img { object-position: center 42%; filter: saturate(.65); }
.concept-page .task-panel { background: var(--desk-paper); box-shadow: 0 1rem 3rem -.75rem #2a292414; border: 1px solid #dedbd480; }
/* Bootstrap's selected pill is too strong for a task chooser; preserve visible selection without implying urgency. */
.concept-page .task-choice { color: var(--desk-ink); background: #f3f2ee; border: 1px solid transparent; }
.concept-page .task-choice.active { background: var(--desk-teal-soft); color: #205f5c; border-color: #287b7740; }
.concept-page .task-description { color: var(--desk-muted); font-weight: 400; line-height: 1.5; }
.concept-page .task-choice:hover { border-color: #287b7755; }
.concept-page .outcome-icon { color: var(--desk-teal); font-size: 1.6rem; }
.concept-page .privacy-strip { background: #eae9e2; }
.concept-page .workspace-web { background: #ece7dc; }
.concept-page .workspace-local { background: #e3ede8; }
.concept-page .workspace-card { border: 1px solid #ffffff90; }
.concept-page .workspace-local .btn-primary { --bs-btn-bg: #28675c; --bs-btn-border-color: #28675c; --bs-btn-hover-bg: #1d5148; --bs-btn-hover-border-color: #1d5148; }
.concept-page .journey-hero { background: #eae6db; }
.concept-page .journey-image img { object-position: 68% center; filter: saturate(.6); }
.concept-page .step-number { font-size: 3.3rem; line-height: 1; color: var(--desk-teal); }
.concept-page summary { cursor: pointer; }
.concept-page :focus-visible { outline: 2px solid var(--desk-teal); outline-offset: 4px; }
@media (max-width: 991.98px) { .concept-page .journey-image { height: 17rem; } }
@media (max-width: 575.98px) {
 .concept-page .preview-option { padding: .3rem .65rem; }
 .concept-page .hero-title { font-size: 2.9rem; }
 .concept-page .concept-section { padding-left: .5rem; padding-right: .5rem; }
 .concept-page .btn { white-space: normal; }
}
/* The blended researcher image and stable two-line headline need a scoped
   composition beyond Bootstrap's grid. Bootstrap still owns the carousel fade. */
.concept-b .fusion-section { padding-top: 2.5rem; padding-bottom: 2rem; }
.concept-b .fusion-hero { position: relative; isolation: isolate; overflow: hidden; background: #eae6dd; padding: clamp(2rem, 4vw, 3.5rem); min-height: 31rem; }
.concept-b .fusion-photo { position: absolute; inset: 0 auto 0 20%; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; filter: sepia(.48) saturate(.66) contrast(.9); mix-blend-mode: multiply; opacity: .72; mask-image: linear-gradient(to right, transparent 0%, #0008 25%, #000 48%); }
.concept-b .fusion-content { width: 58%; position: relative; }
.concept-b .fusion-title { font-size: clamp(2.7rem, 4.7vw, 4.2rem); }
.concept-b .fusion-title .carousel-inner { min-height: 2.15em; }
.concept-b .headline-dot { border: 0; padding: 0; height: .45rem; width: .45rem; border-radius: 50%; background: #6f604b40; }
.concept-b .headline-dot.is-active { background: var(--desk-teal); }
.concept-b #workspaces { scroll-margin-top: 2rem; }
@media (max-width: 991.98px) {
 .concept-b .fusion-content { width: 68%; }
 .concept-b .fusion-photo { object-position: 60% center; mask-image: linear-gradient(to right, transparent 15%, #0002 50%, #000 100%); }
}
@media (max-width: 575.98px) {
 .concept-b .fusion-hero { padding: 0; }
 .concept-b .fusion-photo { position: relative; inset: auto; height: 14rem; object-position: center 36%; mask-image: none; }
 .concept-b .fusion-content { width: 100%; padding: 1.5rem; }
 .concept-b .fusion-title { font-size: 2.5rem; }
}

/* Audience emphasis follows the headline without adding another moving element. */
.concept-b .fusion-content .eyebrow [data-headline-audience] { font-weight: 500; }
.concept-b .fusion-content .eyebrow .is-emphasized { font-weight: 500; color: var(--desk-teal, #287f7a); }
/* Longer role-specific headlines retain the same two-line mobile footprint. */
@media (max-width: 575.98px) {
 .concept-b .fusion-title .carousel-item:not(:first-child) { font-size: .7em; padding-block: .46em; }
}

/* Reserve equal space for role-specific introductions so the CTA stays still. */
.concept-b .fusion-content > .lead { display: grid; }
.concept-b .fusion-content > .lead [data-headline-copy] { grid-area: 1 / 1; }
.concept-b .fusion-content > .lead [data-headline-copy][hidden] { display: block; visibility: hidden; }

/* One moving backdrop links the role to its headline without shifting the text. */
.concept-b .fusion-content > .eyebrow { position: relative; isolation: isolate; }
.concept-b .audience-slider { position: absolute; top: 0; left: 0; z-index: -1; border-radius: .35rem; background: #287f7a18; box-shadow: inset 0 0 0 1px #287f7a12; transition: transform .55s cubic-bezier(.22,1,.36,1), width .55s cubic-bezier(.22,1,.36,1); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .concept-b .audience-slider { transition: none; } }
/* The three portraits share one editorial frame; Bootstrap owns the responsive grid. */
:is(.concept-b, .download-page) .role-section { padding-top: 2.5rem; padding-bottom: 2rem; }
:is(.concept-b, .download-page) .role-card { background: #ece7dc; }
:is(.concept-b, .download-page) .role-card[data-role-card="editor"] { background: #eae9e2; }
:is(.concept-b, .download-page) .role-card[data-role-card="reviewer"] { background: #e3ede8; }
:is(.concept-b, .download-page) .role-photo-frame { overflow: hidden; height: clamp(12rem, 19vw, 16rem); }
:is(.concept-b, .download-page) .role-photo { width: 100%; height: 100%; object-fit: cover; filter: sepia(.35) saturate(.65) contrast(.94); }
:is(.concept-b, .download-page) .role-photo-author { object-position: 67% 44%; }
:is(.concept-b, .download-page) .role-photo-editor { object-position: 46% 42%; transform: scale(1.5); transform-origin: 35% 48%; }
:is(.concept-b, .download-page) .role-photo-reviewer { object-position: 68% 40%; }
:is(.concept-b, .download-page) .role-slogan { font-size: clamp(1.65rem, 2.2vw, 2.15rem); line-height: 1.12; min-height: 3.36em; }
:is(.concept-b, .download-page) .role-slogan em, :is(.concept-b, .download-page) .role-accent { color: var(--desk-teal); }
@media (max-width: 767.98px) {
 :is(.concept-b, .download-page) .role-photo-frame { height: 15rem; }
 :is(.concept-b, .download-page) .role-slogan { min-height: 0; font-size: 2rem; }
}
/* Role labels remain secondary to the slogans but are easy to scan. */
:is(.concept-b, .download-page) .role-card .eyebrow { font-size: .85rem; font-weight: 700; letter-spacing: .09em; color: var(--desk-ink); }

/* The shared homepage introduces the purpose before the product choice. */
.concept-b .umbrella-section { padding-top: clamp(2.5rem, 5vw, 4.5rem); padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.concept-b .umbrella-hero { background: transparent; }
.concept-b .umbrella-title { font-size: clamp(2.3rem, 4.1vw, 3.8rem); line-height: 1.12; text-wrap: balance; }
.concept-b .umbrella-title em { color: var(--desk-teal); }
.download-page .role-section .editorial { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.045em; }
.download-page .role-section .section-title { font-size: clamp(2rem, 3vw, 2.9rem); }
.download-page .role-section .eyebrow { text-transform: uppercase; }
.download-page .role-section > .d-flex .eyebrow { font-size: .7rem; letter-spacing: .13em; font-weight: 600; color: var(--desk-muted); }
/* Equal screenshot frames make the two real workspaces comparable at a glance. */
.concept-page .workspace-preview { aspect-ratio: 16 / 10; background: var(--desk-paper); }
.concept-page .workspace-preview img { height: 100%; object-fit: cover; object-position: top; }
.concept-page .workspace-preview:focus-visible { outline-offset: 4px; }
/* Small schematic illustrations explain the shared workflow, without fabricated results. */
.concept-page .benefit-visual { background: #ece7dc; color: var(--desk-teal); }
.concept-page #sharedBenefits .col-md-4:nth-child(2) .benefit-visual { background: #e3ede8; }
.concept-page #sharedBenefits .col-md-4:nth-child(3) .benefit-visual { background: #eae9e2; }
/* Compact portraits keep the role section human without dominating its message. */
.download-page .role-card .role-photo-frame { width: 6.5rem; height: 6.5rem; border-radius: 50%; margin: 1.5rem 1.5rem 0; }
.download-page .role-card .role-photo { transform: none; }
.download-page .role-card .role-photo-author { object-position: 35% 35%; transform: scaleX(-1); }
.download-page .role-card .role-photo-editor { object-position: 32% 45%; transform: scale(1.15); transform-origin: 40% 45%; }
.download-page .role-card .role-photo-reviewer { object-position: 70% 30%; }
/* Larger centered portraits bridge the card edge while keeping faces secondary. */
.download-page .role-section > .row { padding-top: 4.5rem; row-gap: 5.5rem !important; }
.download-page .role-card { position: relative; overflow: visible !important; padding-top: 4.5rem; }
.download-page .role-card .role-photo-frame { position: absolute; top: 0; left: 50%; width: 9rem; height: 9rem; margin: 0; transform: translate(-50%, -50%); border: 4px solid var(--desk-bg); }
.download-page .role-card .eyebrow { text-align: center; }
/* Keep the contact form's wider desktop gutters inside the page on tablet Safari. */
.concept-page #contact > .row { margin-inline: 0; }
/* The homepage's broad message now shares the photographic hero composition. */
.concept-b .umbrella-hero.fusion-hero { background: #eae6dd; }
.concept-b .umbrella-hero .umbrella-title { text-wrap: initial; font-size: clamp(2.3rem, 3.8vw, 3.5rem); }
/* The compact resources strip bridges the homepage hero and workspace choices. */
.concept-page .homepage-integrations { padding: 0 0 2.5rem; }
.concept-page .homepage-integrations > .row { margin-inline: 0; }
/* Quiet resource marks support the hero rather than competing with its headline. */
.concept-page #integrationsSection { background: transparent; box-shadow: none; border-radius: 0; padding: .25rem 0 2rem !important; }
.concept-page #integrationsTitle { font-family: inherit; font-size: .68rem; font-weight: 500; line-height: 1.5; letter-spacing: .1em; text-align: center; color: var(--desk-muted); }
.concept-page #integrationsSection > .row { margin-bottom: .5rem !important; }
.concept-page #integrationsSection .home-integrations-scroll { gap: clamp(1.25rem, 3vw, 2.5rem); padding: .75rem .5rem; }
.concept-page #integrationsSection .integration-logo { max-width: 7.25rem; max-height: 1.4rem; width: auto; opacity: .62; }
/* Dense wordmarks need slightly less scale and contrast for equal visual weight. */
.concept-page #integrationsSection .integration-logo-openalex,
.concept-page #integrationsSection .integration-logo[src$="ror-logo-sized.svg"] { max-height: 1.15rem; max-width: 6.25rem; opacity: .48; }
/* The shared comparison follows the homepage's editorial type and quiet teal surface. */
.concept-page #usp { background: transparent; box-shadow: none; }
.concept-page #usp > .row { margin-inline: 0; }
.concept-page #usp .usp-title { color: var(--desk-ink); font-weight: 400; }
.concept-page #usp .usp-comparison { background: #e3ede8 !important; box-shadow: none !important; border-color: transparent !important; }
.concept-page #usp .usp-detail-inner { min-height: 0; }

/* Small tablets use a separate photo band so the headline keeps a readable measure. */
@media (min-width: 576px) and (max-width: 767.98px) {
 .concept-b .fusion-hero { padding: 0; }
 .concept-b .fusion-photo { position: relative; inset: auto; height: 16rem; mask-image: none; object-position: center 36%; }
 .concept-b .fusion-content { width: 100%; padding: 2rem; }
}

@media (max-width: 767.98px) { .concept-page main { padding-inline: 1.25rem; } }

/* Resource marks wrap into a centered group instead of hiding offscreen on touch devices. */
@media (max-width: 991.98px) {
 .concept-page #integrationsSection .home-integrations-scroll { flex-wrap: wrap; justify-content: center; overflow: visible; gap: 1rem 1.5rem; }
}

/* The comparison stays readable within phone gutters, including Safari table sizing. */
@media (max-width: 767.98px) {
 .concept-page #usp .usp-comparison-table-wrap, .concept-page #usp .usp-comparison-detail { width: 100%; min-width: 0; }
 .concept-page #usp .usp-comparison-table { table-layout: fixed; font-size: .8rem; }
 .concept-page #usp .usp-comparison-table .usp-row > td:first-child { white-space: normal; }
 .concept-page #usp .usp-comparison-table thead th { white-space: normal; font-size: .68rem; }
 .concept-page #usp .usp-comparison-table .usp-icon-col { width: 25%; }
}
