/* Retail page styles (audit #45 inline-style sweep, 2026-07-26).
 *
 * These rules used to be inline `style="…"` attributes scattered through the
 * Retail-family templates — ~93% of them written by agent page-builds around
 * the very design system they should have been using.
 *
 * What belongs where:
 *   retail/application.css   the design system: retail-* components, the CSS
 *                            variables, anything reused across pages.
 *   retail/product_v2.css    the pv2-* product-page vocabulary.
 *   retail/focus_area_v2.css the focus-area page vocabulary.
 *   retail/pages.css (here)  page-specific rules — one labelled section per
 *                            page/family, prefixed so sections cannot collide.
 *
 * Loaded LAST in layouts/retail.html.erb and layouts/retail_product.html.erb,
 * so a single-class rule here beats a single-class rule in the design system.
 * That ordering is what lets these rules replace inline attributes without
 * needing !important.
 *
 * Rule of the file: NEVER put a `style="…"` attribute or a `<style>` block back
 * into a Retail template — add a section here, or promote a genuinely reusable
 * component into application.css. Enforced by
 * test/lint/inline_style_ratchet_test.rb.
 */


/* ==========================================================================
   P3 — Retail content pages (about, articles, assessments, contact,
   focus areas, services). Extracted from inline `style="…"` attributes
   (audit #45 sweep, 2026-07-26).

   This file is loaded AFTER retail/application.css, focus_area_v2.css and
   product_v2.css, so a single-class rule here beats the design system's own
   single-class rules. Where the design system uses a higher-specificity
   selector (element+class descendant), the rule below is scoped to match —
   those are called out inline.

   Rule of the file: never put a `style=` attribute back in these views.
   ========================================================================== */

/* ============ SHARED — modifiers on existing retail-* components ==========
   Each of these replaces an inline attribute that appeared on 2+ of the pages
   below (or is the family-level variant of one that does). They only ADD the
   declaration the inline attribute carried; everything else still comes from
   the base component in retail/application.css.
   ------------------------------------------------------------------------ */

/* Hero variants — content pages use a shorter, single-column, centred hero.
   `-content-single` must stay unconditional: it overrides the
   `@media (min-width: 1024px)` `1fr 400px` rule, exactly as the inline did. */
.retail-hero-min-360 {
  min-height: 360px;
}

.retail-hero-content-single {
  grid-template-columns: 1fr;
}

.retail-hero-text-centered {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

/* Eyebrow sitting on a dark band (retail-results / retail-cta) instead of the
   default coral. Used on about/index, articles/index, services/project_management
   — and the identical inline string exists on ~20 other views repo-wide, so this
   is a good candidate to promote into application.css after the sweep. */
.retail-eyebrow-light {
  color: rgba(255, 255, 255, 0.7);
}

/* Fixed column counts for the results grid. Unconditional on purpose — the
   inline attributes overrode BOTH of .retail-results-grid's media queries. */
.retail-results-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.retail-results-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Single-column features section (one column of bullets, no second card). */
.retail-features-columns-single {
  grid-template-columns: 1fr;
}

/* Provider band on the gray page background instead of white. */
.retail-provider-gray {
  background-color: var(--retail-gray-50);
}

/* Plain content bands used by pages that predate the section components. */
.retail-section-gray {
  padding: 4rem 1.5rem;
  background-color: var(--retail-gray-50);
}

.retail-section-white {
  padding: 4rem 1.5rem;
  background-color: #fff;
}

.retail-section-centered {
  text-align: center;
}

/* Spacing/icon utilities (the inline declarations really were just spacing). */
.retail-mt-xs {
  margin-top: 0.5rem;
}

.retail-icon-inline {
  margin-right: 0.5rem;
}

.retail-icon-inline-sm {
  margin-right: 0.25rem;
}

/* Directory page header (assessments/index + services/index share all three). */
.retail-fa-page-header-tall {
  padding: 4rem 0 3.5rem;
}

.retail-fa-page-header-centered {
  text-align: center;
}

/* SCOPED on purpose: `.retail-fa-page-header p` (0,1,1) sets font-size 1.125rem
   and margin 0, so a bare class would lose. The inline attribute won because it
   was inline; this selector (0,2,0) is the equivalent. margin-bottom is still
   inherited from the base rule's `margin: 0`, as it was before. */
.retail-fa-page-header .retail-fa-page-header-lead-narrow {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 1rem;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

/* Category heading inside a retail-fa-directory listing. */
.retail-fa-group-title {
  margin-bottom: 1.5rem;
}

/* ===== About Us (app/views/about/index.html.erb) ===== */

.retail-about-intro-note {
  font-size: 1.0625rem;
  color: var(--retail-gray-600);
  line-height: 1.7;
  margin-top: 1rem;
}

.retail-about-story-grid {
  max-width: 72rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.retail-about-story-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--retail-primary);
  margin: 0.5rem 0 1rem;
}

.retail-about-story-body {
  font-size: 0.9375rem;
  color: var(--retail-gray-700);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.retail-about-story-body-muted {
  font-size: 0.9375rem;
  color: var(--retail-gray-600);
  line-height: 1.7;
}

.retail-about-team-teaser {
  max-width: 720px;
  margin: 0 auto;
}

.retail-about-team-body {
  font-size: 1.0625rem;
  color: var(--retail-gray-600);
  line-height: 1.7;
  margin: 1rem 0 1.5rem;
}

.retail-about-locations-inner {
  max-width: 72rem;
  margin: 0 auto;
}

.retail-about-locations-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-top: 2rem;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.retail-about-location-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--retail-primary);
  margin-bottom: 0.5rem;
}

.retail-about-location-body {
  font-size: 0.9375rem;
  color: var(--retail-gray-700);
  line-height: 1.7;
}

.retail-about-phone-icon {
  margin-right: 0.5rem;
  color: var(--retail-primary);
}

.retail-about-location-note {
  font-size: 0.8125rem;
  color: var(--retail-gray-500);
  line-height: 1.6;
  margin-top: 0.5rem;
}

/* ===== Our Team (app/views/about/our_team.html.erb) ===== */

/* Lifted verbatim from the page's embedded <style> block.
   NOTE (orchestrator call): as a page-embedded block this only applied to
   our_team's dialogs; in a shared stylesheet it applies to every <dialog>
   rendered under the retail_product layout. our_team is the only retail view
   with a <dialog> today, so rendering is unchanged — but if you would rather
   not widen it, `.retail-about-bio-dialog::backdrop` is the exact equivalent. */
dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.retail-about-team-wrap {
  max-width: 1120px;
  margin: 0 auto;
}

.retail-about-team-intro {
  text-align: center;
  margin-bottom: 3rem;
}

.retail-about-team-intro-body {
  font-size: 1.125rem;
  color: var(--retail-gray-600);
  max-width: 720px;
  margin: 1rem auto 0;
  line-height: 1.7;
}

.retail-about-department {
  margin-bottom: 3rem;
}

.retail-about-department-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--retail-primary);
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--retail-gray-200);
}

.retail-about-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1.5rem;
}

.retail-about-team-member {
  text-align: center;
}

.retail-about-team-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 0.75rem;
  display: block;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}

.retail-about-team-name {
  font-weight: 600;
  color: var(--retail-primary);
  margin: 0;
  font-size: 0.9375rem;
}

.retail-about-team-role {
  font-size: 0.8125rem;
  color: var(--retail-gray-500);
  margin: 0.25rem 0 0;
}

.retail-about-team-bio-btn {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--retail-primary);
  background: none;
  border: 1px solid var(--retail-primary);
  border-radius: 0.25rem;
  padding: 0.25rem 0.75rem;
  cursor: pointer;
}

.retail-about-team-outro {
  text-align: center;
  margin-top: 2rem;
}

.retail-about-team-outro-body {
  font-size: 1.0625rem;
  color: var(--retail-gray-600);
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Bio modals — native <dialog>, one per team member with a bio. */
.retail-about-bio-dialog {
  max-width: 600px;
  width: 90%;
  border: none;
  border-radius: 0.75rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  padding: 0;
  /* Tailwind's preflight zeroes `margin` on every element, which cancels the
     UA's `dialog { margin: auto }` — without this an open bio modal is pinned
     to the top-left corner of the viewport. Found while porting this pattern
     to the articles pages (audit S5); same one-line fix there. */
  margin: auto;
}

.retail-about-bio-header {
  border-bottom: 1px solid var(--retail-gray-200);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.retail-about-bio-title {
  font-weight: 700;
  color: var(--retail-primary);
  margin: 0;
  font-size: 1.125rem;
}

.retail-about-bio-close {
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--retail-gray-500);
  line-height: 1;
}

.retail-about-bio-body {
  padding: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--retail-gray-700);
  max-height: 60vh;
  overflow-y: auto;
}

.retail-about-bio-footer {
  border-top: 1px solid var(--retail-gray-200);
  padding: 1rem 1.5rem;
  text-align: right;
}

/* ===== Research & Publications (app/views/articles/index.html.erb) ===== */

.retail-articles-books {
  padding: 0 2rem 3rem;
  max-width: 56rem;
  margin: 0 auto;
}

.retail-articles-books-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

.retail-articles-book {
  text-align: center;
  text-decoration: none;
}

.retail-articles-book-cover {
  max-width: 200px;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  margin: 0 auto 1rem;
}

.retail-articles-book-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--retail-gray-900);
}

.retail-articles-book-subtitle {
  font-size: 0.8125rem;
  color: var(--retail-gray-600);
}

/* Publication cards — a `retail-results-card` rendered as a link. */
.retail-articles-card {
  text-decoration: none;
  cursor: pointer;
}

.retail-articles-card-cover {
  width: 100%;
  height: auto;
  border-radius: 0.375rem;
  margin-bottom: 0.75rem;
}

.retail-articles-card-title {
  font-size: 0.8125rem;
}

.retail-articles-card-year {
  font-size: 0.75rem;
}

.retail-articles-list {
  padding: 3rem 2rem 4rem;
  max-width: 56rem;
  margin: 0 auto;
}

.retail-articles-list-title {
  text-align: center;
  margin-bottom: 2.5rem;
}

.retail-articles-empty {
  text-align: center;
  color: var(--retail-gray-600);
}

.retail-articles-entries {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.retail-articles-entry {
  padding: 1.25rem 1.5rem;
  background: var(--retail-gray-50);
  border-radius: 0.5rem;
  border: 1px solid var(--retail-gray-200);
}

.retail-articles-entry-text {
  font-size: 0.9375rem;
  color: var(--retail-gray-900);
  line-height: 1.6;
  margin: 0;
}

.retail-articles-entry-link {
  color: var(--retail-primary);
  font-weight: 600;
  text-decoration: none;
}

.retail-articles-pagination {
  margin-top: 1.5rem;
  text-align: center;
}

/* ===== Per-product research pages ========================================
   app/views/articles/performanceview.html.erb
   app/views/articles/transformationalleadership.html.erb

   Audit S5: these two were Bootstrap 3 markup (`.modal.fade`, `data-toggle`,
   `.grayBox`, `.iconFile`) rendered under `retail_product`, which loads
   neither Bootstrap's CSS nor its JS — so the pages were unstyled and the
   abstract modals could not open at all. They now reuse the
   `retail-articles-*` vocabulary above (shared with articles/index) plus the
   page-specific pieces below, and the modals are native <dialog>s driven by
   the `native-dialog` Stimulus controller.

   The abstract dialog is a near-copy of `.retail-about-bio-*` (our_team);
   if a third page needs one, promote the pair into a single `retail-dialog-*`
   component in retail/application.css rather than copying a third time.
   ------------------------------------------------------------------------ */

/* Product wordmark in the hero's second column. The logos are dark-on-
   transparent, so they need a light plate to sit on over the navy hero. */
.retail-articles-product-logo {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 0.75rem;
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.retail-articles-product-logo-img {
  max-width: 100%;
  height: auto;
}

/* "Text" trigger next to a publication — reads as `.retail-articles-entry-link`
   but is a <button>, because it opens a dialog rather than navigating. */
.retail-articles-abstract-btn {
  color: var(--retail-primary);
  font-weight: 600;
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
}

.retail-articles-abstract-btn:hover {
  text-decoration: underline;
}

/* Abstract modal — native <dialog>, one per publication with an abstract. */
.retail-articles-abstract-dialog {
  max-width: 600px;
  width: 90%;
  border: none;
  border-radius: 0.75rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  padding: 0;
  /* Tailwind's preflight zeroes `margin` on every element, which cancels the
     UA's `dialog { margin: auto }` and pins an open modal to the top-left of
     the viewport. Restoring it is what centres the dialog. */
  margin: auto;
}

.retail-articles-abstract-header {
  border-bottom: 1px solid var(--retail-gray-200);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.retail-articles-abstract-title {
  font-weight: 700;
  color: var(--retail-primary);
  margin: 0;
  font-size: 1.125rem;
}

.retail-articles-abstract-close {
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--retail-gray-500);
  line-height: 1;
  /* The header is a flex row and publication titles are long, so the close
     control has to opt out of shrinking or the glyph gets squeezed away. */
  flex: 0 0 auto;
  padding: 0 0.25rem;
}

.retail-articles-abstract-body {
  padding: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--retail-gray-700);
  max-height: 60vh;
  overflow-y: auto;
}

.retail-articles-abstract-footer {
  border-top: 1px solid var(--retail-gray-200);
  padding: 1rem 1.5rem;
  text-align: right;
}

/* "Downloads and Resources" panel (the old `.grayBox`). */
.retail-articles-downloads {
  max-width: 56rem;
  margin: 0 auto;
}

.retail-articles-downloads-title {
  text-align: center;
  margin-bottom: 2rem;
}

.retail-articles-downloads-list {
  display: grid;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .retail-articles-downloads-list {
    grid-template-columns: 1fr 1fr;
  }
}

.retail-articles-download {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--retail-gray-200);
  border-radius: 0.5rem;
}

.retail-articles-download-icon {
  color: var(--retail-accent);
  font-size: 1.25rem;
}

.retail-articles-download-link {
  color: var(--retail-primary);
  font-weight: 600;
  text-decoration: none;
}

.retail-articles-download-link:hover {
  text-decoration: underline;
}

/* ===== Assessments (app/views/assessments/_self_assessment_v2.html.erb,
         app/views/assessments/index.html.erb) ===== */

/* Group-level intro paragraph in the pv2 competency grid: same component as
   the per-item description but indented and spaced away from the list.
   `.pv2-competency-desc` (product_v2.css) sets `margin: 0`; this file loads
   after it, so margin-bottom lands and the other margins stay 0. */
.retail-assessments-group-desc {
  margin-bottom: 0.75rem;
  padding: 0 0.625rem;
}

/* ===== Contact (app/views/contact/index.html.erb) ===== */

.retail-contact-hero {
  min-height: 320px;
}

.retail-contact-hero-text {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.retail-contact-layout {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 3rem;
  align-items: start;
}

.retail-contact-form-card {
  background: white;
  border-radius: 0.75rem;
  padding: 2.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.retail-contact-form-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--retail-primary);
  margin-bottom: 2rem;
}

/* SPAM GATE — this hides the `robocheck` honeypot row. It MUST stay
   `display: none`: a visible honeypot gets filled in by real humans, and
   `CaptureForm#capture_verified?` then rejects them as bots. */
.retail-contact-robocheck {
  display: none;
}

.retail-contact-field {
  margin-bottom: 1rem;
}

.retail-contact-field-lg {
  margin-bottom: 1.5rem;
}

.retail-contact-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.retail-contact-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--retail-gray-700);
  margin-bottom: 0.375rem;
}

.retail-contact-required {
  color: var(--retail-accent);
}

.retail-contact-input {
  width: 100%;
  padding: 0.625rem 1rem;
  border: 1px solid var(--retail-gray-300);
  border-radius: 0.375rem;
  font-size: 0.875rem;
}

.retail-contact-textarea {
  width: 100%;
  padding: 0.625rem 1rem;
  border: 1px solid var(--retail-gray-300);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  resize: vertical;
}

.retail-contact-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.8125rem;
  color: var(--retail-gray-600);
  line-height: 1.5;
  cursor: pointer;
}

.retail-contact-consent-check {
  margin-top: 0.25rem;
  flex-shrink: 0;
}

.retail-contact-consent-link {
  color: var(--retail-primary);
  text-decoration: underline;
}

.retail-contact-sidebar-card {
  background: white;
  border-radius: 0.75rem;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.retail-contact-sidebar-card-spaced {
  margin-bottom: 1.5rem;
}

.retail-contact-sidebar-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--retail-primary);
  margin-bottom: 1.25rem;
}

.retail-contact-email-link {
  color: var(--retail-primary);
  font-weight: 500;
  text-decoration: none;
}

.retail-contact-sidebar-text {
  font-size: 0.9375rem;
  color: var(--retail-gray-700);
  margin: 0;
  line-height: 1.7;
}

.retail-contact-office {
  font-size: 0.9375rem;
  color: var(--retail-gray-700);
  line-height: 1.7;
}

.retail-contact-office-stacked {
  margin-top: 1rem;
}

/* ===== Contact thank-you (app/views/contact/thank_you.html.erb) ===== */

.retail-contact-thanks {
  padding: 8rem 1.5rem 6rem;
  text-align: center;
}

.retail-contact-thanks-inner {
  max-width: 560px;
  margin: 0 auto;
}

.retail-contact-thanks-icon {
  width: 80px;
  height: 80px;
  background-color: #e8f5e9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2rem;
}

.retail-contact-thanks-check {
  font-size: 2rem;
  color: #2e7d32;
}

.retail-contact-thanks-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--retail-primary);
  margin-bottom: 1rem;
}

.retail-contact-thanks-body {
  font-size: 1.125rem;
  color: var(--retail-gray-600);
  line-height: 1.7;
  margin-bottom: 2.5rem;
}

/* ===== Momentor demo welcome (app/views/contact/welcome.html.erb) ===== */

.retail-contact-welcome-mail {
  height: 24px;
}

/* ===== Focus areas directory (app/views/focus_areas/index.html.erb) ===== */

.retail-focus-directory-lead {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--retail-gray-600);
  max-width: 40rem;
}

/* ===== Project management (app/views/services/project_management.html.erb) ===== */

.retail-services-hero-image {
  border-radius: 0.75rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* width/height duplicate `.retail-provider-image img` (0,1,1) with the same
   values, so the lower-specificity class is safe; the shadow/radius are new. */
.retail-services-provider-image {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
}

.retail-services-provider-note {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--retail-gray-600);
  margin-bottom: 1.5rem;
}

.retail-services-col-intro {
  font-size: 0.9375rem;
  color: var(--retail-gray-700);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}


/* ==========================================================================
   360 Feedback (feedback360/*) page styles — inline-style sweep, seat P1.
   Source views: app/views/feedback360/**

   Every rule here replaces a static style="…" attribute (or a page-embedded
   <style> block) that used to live in a feedback360 template. Values are
   copied verbatim — including redundant declarations and var() fallbacks —
   so the pages render exactly as they did with the inline attributes.

   This file is linked LAST in layouts/retail.html.erb and
   layouts/retail_product.html.erb, so a single-class selector here beats the
   single-class design-system rules in retail/application.css (and its
   media-query variants) purely on source order. Anything that needed more
   than that is called out in a comment.

   Rule of the file: no new style="…" in a feedback360 template — add here.
   ========================================================================== */

/* ============ 1. SHARED (used by 2+ feedback360 pages) ============ */

/* --- Section / band chrome --- */

/* Tints a section that the design system paints white
   (.retail-provider { background-color: white }).
   Used by: it_infrastructure_and_security, coaching_sessions,
   facilitator_training, report_debriefs, competency_model_design,
   feedback360/index. */
.retail-f360-section-gray {
  background-color: var(--retail-gray-50);
}

/* Plain <section> bands that aren't a design-system section.
   Used by: feedback360/index (2x), resources/faq. */
.retail-f360-band {
  padding: 4rem 1.5rem;
}

/* --- Hero variants (short, single-column hero) --- */

/* Used by: it_infrastructure_and_security, resources/faq. */
.retail-f360-hero-compact {
  min-height: 360px;
}

/* Collapses .retail-hero-content's >=1024px `1fr 400px` at every width. */
.retail-f360-hero-content-single {
  grid-template-columns: 1fr;
}

/* Widens + centres .retail-hero-text (design system: max-width 640px). */
.retail-f360-hero-text-centered {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

/* Hero photo treatment.
   Used by: facilitator_training, report_debriefs, competency_model_design. */
.retail-f360-hero-image {
  border-radius: 0.75rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* --- Results grid column counts ---
   .retail-results-grid only sets grid-template-columns inside media queries
   (2 cols >=768px, 4 cols >=1024px). The inline styles these replace were
   unconditional, so these are unconditional too. */
.retail-f360-grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.retail-f360-grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.retail-f360-grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* --- Typography / spacing helpers --- */

/* Eyebrow sitting on a dark (.retail-results) background. */
.retail-f360-eyebrow-on-dark {
  color: rgba(255, 255, 255, 0.7);
}

/* Supporting paragraph inside a .retail-features-col.
   Used by: coaching_sessions, facilitator_training, group_feedback_insights,
   report_debriefs, competency_model_design. */
.retail-f360-col-note {
  font-size: 0.9375rem;
  color: var(--retail-gray-700);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

/* Same, as the last paragraph in the column (no trailing space). */
.retail-f360-col-note-tight {
  font-size: 0.9375rem;
  color: var(--retail-gray-700);
  line-height: 1.7;
}

/* Secondary body paragraph following a .retail-provider-body.
   Used by: coaching_sessions, competency_model_design. */
.retail-f360-body-lg {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--retail-gray-600);
  margin-bottom: 2rem;
}

/* Prose note under a .retail-intro-body / .retail-provider-body.
   Used by: it_infrastructure_and_security, group_feedback_insights. */
.retail-f360-note {
  font-size: 1.0625rem;
  color: var(--retail-gray-600);
  line-height: 1.7;
  margin-top: 1rem;
}

/* Same note at the smaller ramp size (it_infrastructure_and_security). */
.retail-f360-note-sm {
  font-size: 0.9375rem;
  color: var(--retail-gray-600);
  line-height: 1.7;
  margin-top: 1rem;
}

/* Measure cap on a .retail-f360-note (group_feedback_insights). */
.retail-f360-note-narrow {
  max-width: 48rem;
}

/* Presentational spacing, kept as plain utilities because that is genuinely
   all the original attributes were. */
.retail-f360-space-above-sm {
  margin-top: 1rem;
}

.retail-f360-space-above {
  margin-top: 2rem;
}

/* Drops the design system's 1.5rem trailing margin on .retail-features-list. */
.retail-f360-features-list-flush {
  margin-bottom: 0;
}

/* Images that the design system does not already size.
   (.retail-provider-image img already computes to the same width/height —
   this class simply carries the declaration the attribute used to.) */
.retail-f360-img-fluid {
  width: 100%;
  height: auto;
}

/* Inline links inside body copy.
   Used by: resources/faq, competency_model_design. */
.retail-f360-inline-link {
  color: var(--retail-primary);
  text-decoration: underline;
}

/* --- ConvertKit whitepaper form (identical block on four pages) ---
   coaching_sessions, facilitator_training, report_debriefs,
   competency_model_design. ck.5.js injects no CSS of its own, so plain
   single-class rules are sufficient here. */
.retail-f360-ck-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}

.retail-f360-ck-form-inner {
  width: 100%;
}

/* Also used by feedback360/custom (same declaration). */
.retail-f360-ck-alert {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem 0;
}

.retail-f360-ck-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.retail-f360-ck-field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.retail-f360-ck-field-email {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
}

.retail-f360-ck-input {
  width: 100%;
  padding: 0.625rem 1rem;
  border: 1px solid var(--retail-gray-300);
  border-radius: 0.375rem;
  font-size: 0.875rem;
}

/* Whitepaper capture response (app/views/feedback360/_whitepaper_response.html.erb).
   The partial has emitted .retail-f360-ck-response plus is-success/is-error since
   D12 and none of the three was ever defined, so the one message a converting
   visitor sees rendered as bare body text. */
.retail-f360-ck-response {
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  border: 1px solid var(--retail-gray-300);
  background: var(--retail-gray-50);
}

.retail-f360-ck-response.is-success {
  border-color: var(--retail-primary);
  background: var(--retail-gray-50);
}

.retail-f360-ck-response.is-error {
  border-color: var(--retail-accent);
  background: #fff5f5;
}

.retail-f360-ck-response p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* The document link IS the delivery — give it the weight of a primary action
   rather than an inline link lost in the sentence above it. */
.retail-f360-ck-response-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.875rem;
  padding: 0.625rem 1.25rem;
  background-color: var(--retail-accent);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0.375rem;
  text-decoration: none;
}

.retail-f360-ck-response-link:hover {
  background-color: var(--retail-accent-dark);
  color: #fff;
}

/* --- FAQ accordion (resources/faq + the short FAQ on feedback360/index) --- */
.retail-f360-faq-inner {
  max-width: 52rem;
  margin: 0 auto;
}

.retail-f360-faq-item {
  margin-bottom: 0.75rem;
  border: 1px solid var(--retail-gray-200, #e5e4e0);
  border-radius: 0.5rem;
}

/* `list-style: none` was inline on the faq.html.erb summaries and came from
   the page's <style> block on index.html.erb — same computed result either
   way, so the two pages share one class. */
.retail-f360-faq-question {
  padding: 1rem 1.25rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--retail-gray-900);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.retail-f360-faq-answer {
  padding: 0 1.25rem 1rem;
  font-size: 0.9375rem;
  color: var(--retail-gray-600);
  line-height: 1.7;
}

/* ============ 2. PER-PAGE ============ */

/* ===== 360 Feedback overview (app/views/feedback360/feedback360/index.html.erb) ===== */

/* Lifted verbatim, in order, from the page's <style> block. */
.faq-360 summary { list-style: none; }
.faq-360 summary::-webkit-details-marker { display: none; }
.faq-360 summary::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.75rem; color: var(--retail-gray-400, #999); transition: transform 0.2s ease; flex-shrink: 0; }
.faq-360[open] summary::after { transform: rotate(180deg); }

.retail-f360-deliver-inner {
  max-width: 72rem;
  margin: 0 auto;
  text-align: center;
}

.retail-f360-deliver-title {
  margin-top: 0.5rem;
  margin-bottom: 2.5rem;
}

.retail-f360-deliver-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.retail-f360-deliver-card {
  background: white;
  padding: 2rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.retail-f360-deliver-card-icon {
  margin-bottom: 1rem;
}

.retail-f360-deliver-icon {
  font-size: 2.5rem;
  color: var(--retail-primary);
}

.retail-f360-deliver-card-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--retail-primary);
  margin-bottom: 0.75rem;
}

.retail-f360-deliver-card-desc {
  font-size: 0.9375rem;
  color: var(--retail-gray-600);
  line-height: 1.6;
}

/* Numbered step marker; replaces the design system's 1.5rem check icon box. */
.retail-f360-step-number {
  background: var(--retail-primary);
  color: white;
  border-radius: 50%;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8125rem;
}

/* .retail-provider-image holding an icon instead of a photo. */
.retail-f360-provider-icon-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--retail-gray-50);
  padding: 3rem;
}

.retail-f360-provider-icon {
  font-size: 8rem;
  color: var(--retail-primary);
  opacity: 0.2;
}

.retail-f360-faq-header {
  text-align: center;
  margin-bottom: 2rem;
}

.retail-f360-faq-title {
  margin-top: 0.5rem;
}

.retail-f360-faq-footer {
  text-align: center;
  margin-top: 1.5rem;
}

/* ===== FAQ (app/views/feedback360/resources/faq.html.erb) ===== */

/* Lifted verbatim, in order, from the page's <style> block. */
.faq-details summary { list-style: none; }
.faq-details summary::-webkit-details-marker { display: none; }
.faq-details summary::after {
  content: '\f078';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.75rem;
  color: var(--retail-gray-400, #999);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.faq-details[open] summary::after {
  transform: rotate(180deg);
}

.retail-f360-faq-group {
  margin-bottom: 3rem;
}

.retail-f360-faq-group-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--retail-primary);
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--retail-primary);
}

/* ===== Coaching sessions (app/views/feedback360/debriefs_and_coaching/coaching_sessions.html.erb) ===== */

.retail-f360-results-lead {
  text-align: center;
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.8);
  max-width: 640px;
  margin: -1.5rem auto 0;
  line-height: 1.7;
}

.retail-f360-grid-offset {
  margin-top: 2.5rem;
}

/* Digit glyph inside a .retail-features-list-icon. */
.retail-f360-step-digit {
  font-size: 0.75rem;
}

/* ===== Group feedback insights (app/views/feedback360/debriefs_and_coaching/group_feedback_insights.html.erb) ===== */

/* `flex-direction` is inert on .retail-provider-inner (display: grid); kept
   because the attribute it replaces declared it. */
.retail-f360-process-inner {
  flex-direction: column;
  max-width: 56rem;
}

.retail-f360-process-title {
  text-align: center;
  margin-bottom: 2rem;
}

.retail-f360-process-lead {
  font-size: 0.9375rem;
  color: var(--retail-gray-700);
  line-height: 1.7;
  text-align: center;
  margin-bottom: 2.5rem;
}

.retail-f360-process-list {
  max-width: 44rem;
  margin: 0 auto;
}

/* ===== Competency model design (app/views/feedback360/feedback360/competency_model_design.html.erb) ===== */

.retail-f360-col-centered {
  text-align: center;
}

.retail-f360-screenshot-frame {
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
  border: 1px solid var(--retail-gray-200);
}

.retail-f360-screenshot-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===== IT infrastructure & security (app/views/feedback360/about/it_infrastructure_and_security.html.erb) ===== */

/* .retail-provider-image holding the certificate mark on a white plate. */
.retail-f360-cert-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  padding: 2rem;
}

.retail-f360-cert-image {
  max-width: 240px;
  height: auto;
}

/* ===== Custom 360 (app/views/feedback360/feedback360/custom.html.erb) ===== */

.retail-f360-inline-link-accent {
  color: var(--retail-accent);
  text-decoration: underline;
}

/* ===== Free trial thank you (app/views/feedback360/assessments/free_trial_thank_you.html.erb) ===== */

.retail-f360-thankyou-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding: 4rem 1rem;
}

/* ===== NeuroView certification (app/views/feedback360/assessments/neuro_view_certifcation.html.erb) ===== */

.retail-f360-container-narrow {
  max-width: 820px;
}

/* Honeypot wrapper. MUST stay hidden — this field previously rendered visible
   (its display:none lived in a stylesheet that was never loaded) and humans
   who filled it in were silently rejected as bots. Do not remove or scope. */
.retail-f360-honeypot {
  display: none;
}

/* ===== Whitepaper modal form (app/views/feedback360/_whitepaper_modal_form.html.erb) =====
   Rendered inside shared/_offer_modal, whose <style> block styles
   `.offer-modal-form input` only — no overlap with these two rules. */

.retail-f360-ck-modal-alert {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem;
  color: #dc2626;
  font-size: 0.8125rem;
}

.retail-f360-ck-modal-fields {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

/* The form partial's intermediate wrappers (fields / name group / email
   group). Without this the outer gap only separates wrapper from honeypot
   and Turnstile — the INPUTS inside each unstyled group rendered flush
   against each other (staging QA, 2026-08-18). */
.retail-f360-ck-modal-group {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

/* ===== Cookie banner (app/views/feedback360/partials/_cookie_policy.html.erb) =====
   NOTE: this partial has no render site in the app today (the live banner is
   layouts/partials/_cookie_policy.html.erb). Rule kept so the markup is not
   left styleless if it is ever wired up. */

.retail-f360-cookie-banner-text {
  margin-bottom: 5px;
}


/* ==========================================================================
   P2 — Product pages (Leader TrustView, NeuroTeamView, Talent Accelerator)
   Extracted from inline `style` attributes. Loaded LAST in
   app/views/layouts/retail_product.html.erb, so single-class rules here win
   ties against retail/application.css, focus_area_v2.css and product_v2.css.

   Prefixes
     .pv2-…      shared across two or more of the products below
     .pv2-ltv-…  leader_trust_view/
     .pv2-ntv-…  neuro_team_view/
     .pv2-ta-…   talent_accelerator/ (all five TA templates)
   ========================================================================== */


/* ==========================================================================
   SHARED — lead-capture forms and their turbo-frame responses
   (leader_trust_view/_case_study_response, talent_accelerator/_case_study_response,
    leader_trust_view/index, neuro_team_view/index, talent_accelerator/index)
   ========================================================================== */

/* Flash panel echoed back into the case-study turbo frame. */
.pv2-form-response {
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
}

.pv2-form-response-success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}

.pv2-form-response-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

/* Two-up name/email grid used by the LTV + NTV lead-magnet forms. */
.pv2-lead-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

/* A row inside .pv2-lead-form-grid that spans both columns. */
.pv2-lead-form-full {
  grid-column: span 2;
}

/* Off-screen honeypot ("robocheck") wrapper — must stay display:none. */
.pv2-form-honeypot {
  display: none;
}

/* Text/email inputs on the lead-magnet forms. */
.pv2-form-input {
  width: 100%;
  padding: 0.625rem 1rem;
  border: 1px solid var(--pv2-border, #e2e0db);
  border-radius: 0.375rem;
  font-size: 0.875rem;
}

/* Talent Accelerator variant: retail grey border instead of the warm pv2 border. */
.pv2-form-input-gray {
  border-color: var(--retail-gray-300);
}

/* Inline validation notes under the NTV article form. */
.pv2-form-note {
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

.pv2-form-note-success {
  color: #16a34a;
}

.pv2-form-note-error {
  color: #dc2626;
}


/* ==========================================================================
   SHARED — pv2 "specs" section variants used as editorial content blocks
   (leader_trust_view/index, neuro_team_view/index)
   ========================================================================== */

/* Section background overrides for repeated .pv2-specs / .pv2-why-choose bands. */
.pv2-section-white {
  background: white;
}

.pv2-section-warm {
  background: var(--pv2-warm-bg, #f8f6f3);
}

/* Text column of a .pv2-specs-content pair. */
.pv2-specs-content-main {
  flex: 1;
}

.pv2-specs-lead {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--pv2-text, #2d3748);
  margin: 0 0 1.25rem;
}

.pv2-specs-body {
  font-size: 0.9375rem;
  color: var(--pv2-text-light, #64748b);
  line-height: 1.7;
  margin: 0 0 1.5rem;
}

/* Same as .pv2-specs-body but tighter when another paragraph follows directly. */
.pv2-specs-body-tight {
  font-size: 0.9375rem;
  color: var(--pv2-text-light, #64748b);
  line-height: 1.7;
  margin: 0 0 0.75rem;
}

/* Headline of a lead-magnet block (case study / article download). */
.pv2-lead-magnet-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--pv2-navy, #003366);
  margin: 0 0 1rem;
  line-height: 1.35;
}

/* Press-mention logo strip. */
.pv2-press-row {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.pv2-press-logo {
  height: 40px;
  opacity: 0.6;
}

/* Wordmarks that need a shorter cap height (Fortune). */
.pv2-press-logo-sm {
  height: 24px;
}

/* Navy "PDF download" placeholder panel beside the lead-magnet form. */
.pv2-download-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--pv2-navy, #003366), #004080);
  border-radius: 0.75rem;
  padding: 3rem;
  min-height: 240px;
}

.pv2-download-panel-inner {
  text-align: center;
  color: white;
}

.pv2-download-panel-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.9;
}

.pv2-download-panel-title {
  font-size: 1.25rem;
  font-weight: 600;
}

.pv2-download-panel-note {
  font-size: 0.875rem;
  opacity: 0.8;
  margin-top: 0.5rem;
}


/* ==========================================================================
   SHARED — competency framework (leader_trust_view/index, neuro_team_view/index)
   ========================================================================== */

/* Icon sitting in the .pv2-competency-group-number slot. */
.pv2-competency-group-icon {
  font-size: 0.875rem;
}

/* Leading acronym letter of a competency name (OXYTOCIN / the 4 C's).
   NOTE: --pv2-coral is not defined anywhere in the app, and this declaration
   carried no fallback inline either — so `color` resolves to `unset` and the
   letter inherits .pv2-competency-name's colour. Reproduced verbatim so the
   rendering is unchanged; see the report for the flag. */
.pv2-competency-initial {
  color: var(--pv2-coral);
  font-weight: 800;
}


/* ==========================================================================
   Leader TrustView (app/views/leader_trust_view/index.html.erb)
   ========================================================================== */

/* (No page-only rules — every extracted declaration on this page is shared
   with NeuroTeamView and lives in the SHARED sections above.) */


/* ==========================================================================
   NeuroTeamView (app/views/neuro_team_view/index.html.erb)
   ========================================================================== */

/* --- Certification: "what's covered" checklist --- */
.pv2-ntv-cert-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.pv2-ntv-cert-item {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: var(--pv2-text, #2d3748);
}

.pv2-ntv-cert-check {
  color: var(--pv2-coral, #FF3333);
  font-size: 0.75rem;
  flex-shrink: 0;
  margin-top: 0.25rem;
}

/* --- Certification: numbered "Part 1..6" agenda --- */
.pv2-ntv-parts {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pv2-ntv-part {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.pv2-ntv-part-badge {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: var(--pv2-coral, #FF3333);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pv2-ntv-part-badge-icon {
  font-size: 0.625rem;
  color: white;
}

.pv2-ntv-part-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--pv2-coral, #FF3333);
  text-transform: uppercase;
  margin-bottom: 0.125rem;
}

.pv2-ntv-part-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--pv2-navy, #003366);
  margin-bottom: 0.125rem;
}

.pv2-ntv-part-desc {
  font-size: 0.8125rem;
  color: var(--pv2-text-light, #64748b);
  line-height: 1.5;
}

/* --- Authors --- */
.pv2-ntv-inline-link {
  color: var(--pv2-coral, #FF3333);
  text-decoration: underline;
}

.pv2-ntv-authors {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
}

.pv2-ntv-author-link {
  text-align: center;
  text-decoration: none;
  color: inherit;
}

.pv2-ntv-author-portrait {
  width: 140px;
  height: 140px;
  border-radius: 9999px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.pv2-ntv-author-name {
  margin-top: 0.75rem;
  font-weight: 600;
  color: var(--pv2-navy, #003366);
  font-size: 0.875rem;
}

.pv2-ntv-author-role {
  font-size: 0.75rem;
  color: var(--pv2-text-light, #64748b);
}


/* ==========================================================================
   SHARED — Talent Accelerator retail-layout pages
   (index, how_it_works, full_service, platform, behavior_change_model)
   ========================================================================== */

/* Framed hero screenshot inside .retail-hero-visual. */
.pv2-ta-hero-image {
  border-radius: 0.75rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Screenshot inside a .retail-provider-image well. */
.pv2-ta-provider-image {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
}

/* .retail-eyebrow sitting on a dark (.retail-results) band. */
.pv2-ta-eyebrow-on-dark {
  color: rgba(255, 255, 255, 0.7);
}

/* Three-up override of .retail-results-grid (which is 2-up / 4-up by default).
   Unconditional, exactly as the inline attribute was. */
.pv2-ta-results-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* A .retail-provider / .retail-results band tinted grey instead of white. */
.pv2-ta-band-gray {
  background-color: var(--retail-gray-50);
}

/* Intro paragraph at the top of a .retail-features-col. */
.pv2-ta-col-intro {
  font-size: 0.9375rem;
  color: var(--retail-gray-700);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

/* Button row closing out a .retail-features-col. */
.pv2-ta-col-action {
  margin-top: 1.5rem;
}

/* Bold lead-in line introducing a .retail-features-list. */
.pv2-ta-list-lead-in {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--retail-gray-900);
  margin-bottom: 0.75rem;
}


/* ==========================================================================
   Talent Accelerator — landing page (app/views/talent_accelerator/index.html.erb)
   ========================================================================== */

/* Second hero paragraph, set a notch smaller than .retail-hero-lead. */
.pv2-ta-hero-subnote {
  font-size: 1.0625rem;
  margin-top: 0.5rem;
}

/* --- Research statistics band --- */
.pv2-ta-stats-section {
  background-color: var(--retail-gray-50, #f9f8f6);
  padding: 3rem 1.5rem;
}

.pv2-ta-stats-grid {
  max-width: 60rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  text-align: center;
}

.pv2-ta-stat {
  padding: 1.5rem;
}

.pv2-ta-stat-value {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
}

.pv2-ta-stat-value-accent {
  color: var(--retail-accent, #FF3333);
}

.pv2-ta-stat-value-primary {
  color: var(--retail-primary, #003366);
}

.pv2-ta-stat-label {
  font-size: 0.875rem;
  color: var(--retail-gray-600);
  margin-top: 0.75rem;
  line-height: 1.5;
}

/* --- "Most approaches" vs "Talent Accelerator" comparison table --- */
.pv2-ta-compare-section {
  background-color: var(--retail-gray-50, #f9f8f6);
  padding: 4rem 1.5rem;
}

.pv2-ta-compare-inner {
  max-width: 56rem;
  margin: 0 auto;
}

.pv2-ta-compare-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.pv2-ta-compare-head {
  padding: 1.25rem 1.5rem;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pv2-ta-compare-head-muted {
  background: var(--retail-gray-200, #e5e4e0);
  color: var(--retail-gray-600);
}

.pv2-ta-compare-head-primary {
  background: var(--retail-primary, #003366);
  color: white;
}

.pv2-ta-compare-cell {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--retail-gray-200, #e5e4e0);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.pv2-ta-compare-cell-plain {
  background: white;
  color: var(--retail-gray-600);
}

.pv2-ta-compare-cell-method {
  background: #f8f6f3;
  color: var(--retail-gray-700);
}

/* Bottom row of the table carries no divider. */
.pv2-ta-compare-cell-last {
  border-bottom: none;
}

/* --- "Why we use human coaches" --- */
.pv2-ta-intro-narrow {
  max-width: 48rem;
}

.pv2-ta-intro-body-spaced {
  margin-top: 1rem;
}

/* --- Wistia responsive video embed (vendor snippet) --- */
.pv2-ta-wistia-padding {
  padding: 56.25% 0 0 0;
  position: relative;
}

.pv2-ta-wistia-wrapper {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.pv2-ta-wistia-embed {
  height: 100%;
  position: relative;
  width: 100%;
}

/* Blurred poster placeholder. Hidden until its <img> decodes, at which point
   the poster-reveal Stimulus controller adds `.is-loaded` — the vendor snippet
   set `style="opacity:1"` from an inline `onload` handler (audit #46). Two
   classes (0,2,0) beat the base rule above, so no !important is needed. */
.pv2-ta-wistia-swatch {
  height: 100%;
  left: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  transition: opacity 200ms;
  width: 100%;
}

.pv2-ta-wistia-swatch.is-loaded {
  opacity: 1;
}

/* Scoped to .retail-provider-image on purpose: that block already carries
   `.retail-provider-image img { height: auto }` (0,1,1), which the old inline
   style beat. A bare `.pv2-ta-wistia-swatch-img` (0,1,0) would lose and the
   poster would collapse — two classes (0,2,0) win. */
.retail-provider-image .pv2-ta-wistia-swatch-img {
  filter: blur(5px);
  height: 100%;
  object-fit: contain;
  width: 100%;
}

/* Script / Q&A modal trigger row. */
.pv2-ta-modal-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Closing paragraph of a .retail-features-col. */
.pv2-ta-col-outro {
  font-size: 0.9375rem;
  color: var(--retail-gray-700);
  line-height: 1.7;
  margin-top: 1rem;
}

/* --- Playbook download band --- */
.pv2-ta-playbook-section {
  background-color: var(--retail-gray-50);
  padding: 4rem 1.5rem;
}

.pv2-ta-playbook-inner {
  max-width: 48rem;
  margin: 0 auto;
}

.pv2-ta-playbook-form {
  max-width: 400px;
}


/* ==========================================================================
   Talent Accelerator — how it works
   (app/views/talent_accelerator/how_it_works.html.erb)
   ========================================================================== */

/* Sub-heading paragraph under a .retail-results-header title. */
.pv2-ta-hiw-section-lead {
  color: rgba(255, 255, 255, 0.7);
  max-width: 700px;
  margin: 0 auto;
  font-size: 0.9375rem;
}

/* "Duration: 2–4 weeks" footnote at the bottom of a phase card. */
.pv2-ta-hiw-duration {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 0.75rem;
}


/* ==========================================================================
   Talent Accelerator — 3E model
   (app/views/talent_accelerator/behavior_change_model.html.erb)
   ========================================================================== */

/* --- Problem + comparison band --- */
.pv2-ta-bcm-problem {
  padding: 4rem 0 5rem;
  background: linear-gradient(180deg, white 0%, var(--retail-gray-50) 100%);
}

.pv2-ta-bcm-inner {
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 2rem;
}

.pv2-ta-bcm-intro {
  text-align: center;
  margin-bottom: 3rem;
}

.pv2-ta-bcm-intro-title {
  margin-bottom: 1rem;
}

.pv2-ta-bcm-intro-lead {
  font-size: 1.0625rem;
  color: var(--retail-gray-700);
  line-height: 1.7;
  max-width: 44rem;
  margin: 0 auto;
}

.pv2-ta-bcm-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.pv2-ta-bcm-card {
  padding: 2rem;
  border-radius: 0.75rem;
  position: relative;
  overflow: hidden;
}

.pv2-ta-bcm-card-muted {
  background: white;
  border: 1px solid var(--retail-gray-200);
}

.pv2-ta-bcm-card-primary {
  background: var(--retail-primary);
  color: white;
}

/* Hairline accent along the top edge of a comparison card. */
.pv2-ta-bcm-card-rule {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.pv2-ta-bcm-card-rule-accent {
  background: var(--retail-accent);
  opacity: 0.6;
}

.pv2-ta-bcm-card-rule-light {
  background: white;
  opacity: 0.3;
}

.pv2-ta-bcm-card-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1.25rem;
}

.pv2-ta-bcm-card-label-accent {
  color: var(--retail-accent);
}

.pv2-ta-bcm-card-label-light {
  color: rgba(255, 255, 255, 0.7);
}

.pv2-ta-bcm-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pv2-ta-bcm-card-item {
  display: flex;
  gap: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.pv2-ta-bcm-card-item-muted {
  color: var(--retail-gray-600);
}

.pv2-ta-bcm-card-item-light {
  color: rgba(255, 255, 255, 0.95);
}

.pv2-ta-bcm-card-item-icon {
  color: var(--retail-accent);
  margin-top: 0.2rem;
  flex-shrink: 0;
}

/* --- Three sequential phases --- */
.pv2-ta-bcm-phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 80rem;
  margin: 0 auto;
  position: relative;
}

/* Connector arrows between the three phase cards. The markup says "desktop
   only" and the elements were fully positioned and coloured, but the media
   query that shows them was never written — an unconditional inline
   `display: none` meant they had never rendered at any width. Restored at the
   breakpoint the comment intended; below it the three cards are too narrow for
   an arrow to sit between them without overlapping. */
.pv2-ta-bcm-phase-arrow {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: rgba(255, 255, 255, 0.3);
  font-size: 1.5rem;
  display: none;
}

@media (min-width: 768px) {
  .pv2-ta-bcm-phase-arrow {
    display: block;
  }
}

.pv2-ta-bcm-phase-arrow-1 {
  left: 33.33%;
}

.pv2-ta-bcm-phase-arrow-2 {
  left: 66.66%;
}

.pv2-ta-bcm-phase-card {
  position: relative;
}

.pv2-ta-bcm-phase-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 1rem;
}

.pv2-ta-bcm-phase-note {
  margin-top: 0.5rem;
}

.pv2-ta-bcm-phase-quote {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pv2-ta-bcm-phase-quote-text {
  font-style: italic;
  opacity: 0.8;
}

/* --- Backed by science --- */
/* Smaller glyph for the 3E icons standing in for the usual check mark. */
.pv2-ta-bcm-list-icon-sm {
  font-size: 0.75rem;
}

.pv2-ta-bcm-col-summary {
  font-size: 0.9375rem;
  color: var(--retail-gray-700);
  line-height: 1.7;
  margin-top: 1.5rem;
  font-weight: 600;
}


/* ==========================================================================
   P5 — Retail site chrome (header / mega menu / mobile menu) + home page
   Destination: app/assets/stylesheets/retail/pages.css
   (shared file — every rule below is namespaced to P5's partition)

   These partials render on EVERY retail and retail_product page, so the rules
   are deliberately narrow: one class per icon/element that carried an inline
   style, nothing speculative.
   ========================================================================== */

/* ===== Navigation header (app/views/retail/partials/_header.html.erb) ===== */

/* Chevron in each desktop mega-menu trigger (5 occurrences) */
.retail-nav-link-chevron { font-size: 0.65rem; }

/* Hamburger glyph in the mobile menu button */
.retail-nav-mobile-btn-icon { font-size: 1.25rem; }

/* ===== Assessments mega menu (app/views/retail/partials/_mega_menu.html.erb) ===== */
.retail-mega-featured-title-icon {
  margin-right: 0.5rem;
  color: var(--retail-accent);
}
.retail-mega-featured-cta-icon { font-size: 0.75rem; }

/* ===== Mobile menu (app/views/retail/partials/_mobile_menu.html.erb) ===== */

/* The mobile panel reuses .retail-nav-logo, whose `img` rule (0,1,1) sets
   2.5rem / 3rem. A plain single-class rule would lose to it, so this one is
   raised to (0,2,1) by qualifying the element. */
.retail-nav-logo img.retail-mobile-logo { height: 2rem; }

.retail-mobile-close-icon { font-size: 1.25rem; }
.retail-mobile-accordion-btn-icon { font-size: 0.75rem; }

/* Chevron rotation while an accordion section is open (audit S14).
   retail_mobile_menu_controller used to write
   `.style.setProperty('transform', 'rotate(180deg)')` straight onto the icon;
   it now only puts `.is-open` on the button, and the rotation lives here.
   Two classes (0,2,0) so it beats the single-class icon rules above. */
.retail-mobile-accordion-btn.is-open .retail-mobile-accordion-btn-icon {
  transform: rotate(180deg);
}

/* Small uppercase group heading inside an accordion panel */
.retail-mobile-accordion-heading {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--retail-gray-400);
  padding: 0.5rem 0.75rem;
}
.retail-mobile-accordion-heading--spaced { margin-top: 0.5rem; }

/* Full-width CTA button pinned to the bottom of the mobile panel */
.retail-mobile-cta-btn { width: 100%; }

/* ===== Home page (app/views/retail/home/index.html.erb) ===== */

/* Eyebrow sitting on the dark "results" band */
.retail-home-eyebrow-inverse { color: rgba(255, 255, 255, 0.7); }


/* ==========================================================================
   P6 — retail/pages.css
   Link LAST in app/views/layouts/retail.html.erb and
   app/views/layouts/retail_product.html.erb (after retail/product_v2).
   ========================================================================== */

/* ===== SHARED: Coaching services page family =============================
   Covers all seven near-identical pages rendered by CoachingController
   (layout "retail_product"):
     app/views/coaching/career_coaching.html.erb
     app/views/coaching/executive_coaching.html.erb
     app/views/coaching/group_peer_coaching.html.erb
     app/views/coaching/leadership_coaching.html.erb
     app/views/coaching/team_coaching.html.erb
     app/views/coaching/transition_coaching.html.erb
     app/views/coaching/wellbeing_resilience.html.erb
   ========================================================================= */

/* Hero photo (sits inside .retail-hero-visual, which already caps its size). */
.retail-coaching-hero-image {
  border-radius: 0.75rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Eyebrow on the dark (navy) results band. Compound selector: plain
   `.retail-eyebrow` already sets `color: var(--retail-accent)` at the same
   specificity, so this is scoped to win regardless of stylesheet order. */
.retail-eyebrow.retail-coaching-eyebrow-invert {
  color: rgba(255, 255, 255, 0.7);
}

/* Three-across results cards. Compound selector: `.retail-results-grid` sets
   2-up at >=768px and 4-up at >=1024px; the inline style it replaces was
   unconditional, so this must beat both media-query rules at every width. */
.retail-results-grid.retail-coaching-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Grey band for the methodology/assessment section. Compound selector:
   `.retail-provider` sets `background-color: white` at the same specificity. */
.retail-provider.retail-coaching-section-alt {
  background-color: var(--retail-gray-50);
}

/* Methodology photo (inside .retail-provider-image, which clips + shadows). */
.retail-coaching-figure {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
}

/* Secondary paragraph under .retail-provider-body. */
.retail-coaching-provider-note {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--retail-gray-600);
  margin-bottom: 1.5rem;
}

/* Button wrapper after the assessment list (wellbeing_resilience only). */
.retail-coaching-provider-cta {
  margin-top: 1.5rem;
}

/* Lead paragraph at the top of each .retail-features-col. */
.retail-coaching-col-intro {
  font-size: 0.9375rem;
  color: var(--retail-gray-700);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

/* Closing "Certified Coaches Worldwide" / "Tailored to Your Team" band. */
.retail-coaching-closing {
  padding: 4rem 1.5rem;
  background-color: var(--retail-gray-50);
}

.retail-coaching-closing-inner {
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}

.retail-coaching-closing-title {
  margin-top: 0.5rem;
}

.retail-coaching-closing-body {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--retail-gray-600);
  margin-top: 1.25rem;
}

/* Variant used when the band ends with a button (team_coaching). */
.retail-coaching-closing-body--cta {
  margin-bottom: 2rem;
}

/* ===== Lead-magnet offer modal (app/views/shared/_offer_modal.html.erb) =====
   Lifted verbatim from the partial's <style> block. The partial is rendered
   only from layouts/retail.html.erb and layouts/retail_product.html.erb, so
   this file is the exact right home for it. Nothing else in the retail CSS
   defines an `.offer-modal*` selector.
   ========================================================================= */
.offer-modal { position: fixed; inset: 0; z-index: 1100; display: none; align-items: center; justify-content: center; padding: 1.25rem; }
.offer-modal.is-open { display: flex; }
.offer-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 20, 45, 0.55); backdrop-filter: blur(2px); }
.offer-modal-box {
  position: relative; z-index: 1; display: grid; grid-template-columns: 220px 1fr;
  max-width: 720px; width: 100%; background: #fff; border-radius: 0.875rem; overflow: hidden;
  box-shadow: 0 24px 60px -12px rgba(0, 20, 45, 0.45); animation: offer-modal-in 0.3s ease-out;
}
@keyframes offer-modal-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.offer-modal-cover { background: #003366; display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
.offer-modal-cover img { width: 100%; height: auto; border-radius: 0.375rem; box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.offer-modal-content { padding: 2rem 2rem 1.75rem; }
.offer-modal-eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #FF3333; margin-bottom: 0.5rem; }
.offer-modal-title { font-size: 1.5rem; font-weight: 700; color: #003366; line-height: 1.2; margin: 0 0 0.75rem; }
.offer-modal-body { font-size: 0.9375rem; line-height: 1.6; color: #4b5563; margin: 0 0 1.25rem; }
.offer-modal-form { display: flex; flex-direction: column; gap: 0.625rem; }
.offer-modal-form input { width: 100%; padding: 0.625rem 0.875rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-size: 0.9375rem; }
.offer-modal-fineprint { font-size: 0.75rem; color: #9ca3af; margin: 0.75rem 0 0; }
.offer-modal-close { position: absolute; top: 0.5rem; right: 0.75rem; z-index: 2; background: none; border: none; font-size: 1.75rem; line-height: 1; color: #6b7280; cursor: pointer; }
.offer-modal-close:hover { color: #111827; }
@media (max-width: 560px) {
  .offer-modal-box { grid-template-columns: 1fr; max-width: 420px; }
  .offer-modal-cover { display: none; }
  .offer-modal-content { padding: 2.25rem 1.5rem 1.5rem; }
}


/* ==========================================================================
   Publications list (app/views/articles/emotionalintelligenceview.html.erb)
   Eight book/article covers each carried `style: 'margin: 0 auto'`.
   ========================================================================== */
.retail-pub-cover { margin: 0 auto; }

/* Directory pages (assessments/index, services/index): every group after the
   first is separated from the one above it. Was `style="<%= '…' if idx > 0 %>"`
   — a conditional class wearing a dynamic style's clothes. */
.retail-fa-group-spaced { margin-top: 3.5rem; }


/* ==========================================================================
   Free Coaching Exercises (D15)
   app/views/coaching_exercises/index.html.erb
   app/views/coaching_exercises/show.html.erb

   These two were the last content pages on the legacy `application` layout —
   raw Tailwind utilities (`bg-white rounded-lg shadow-md`, `text-blue-600`)
   that predate the Retail design system, so they carried Bootstrap-era blue
   links on a site whose accent is coral. Rebuilt on the `retail-*` vocabulary;
   only the page-specific pieces live here.
   ========================================================================== */

/* ----- Index: the exercise grid ----- */

.retail-exercises {
  padding: var(--retail-section-padding) var(--retail-container-padding);
  max-width: 80rem;
  margin: 0 auto;
}

.retail-exercises-empty {
  text-align: center;
  color: var(--retail-gray-600);
}

.retail-exercises-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 640px) {
  .retail-exercises-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .retail-exercises-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* The whole card is the link — the legacy markup had three separate links to
   the same URL (title, image, "Get It" button) stacked in one card, which is
   three tab stops and three screen-reader announcements for one destination. */
.retail-exercise-card {
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid var(--retail-gray-200);
  border-radius: 0.75rem;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.retail-exercise-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 51, 102, 0.12);
  border-color: var(--retail-primary);
}

.retail-exercise-card-media {
  background: var(--retail-gray-50);
  border-bottom: 1px solid var(--retail-gray-200);
  padding: 1.25rem 1.25rem 0;
}

.retail-exercise-card-cover {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.375rem 0.375rem 0 0;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
}

.retail-exercise-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.75rem;
  justify-content: space-between;
  padding: 1.25rem 1.5rem 1.5rem;
}

.retail-exercise-card-title {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--retail-gray-900);
  margin: 0;
}

.retail-exercise-card-action {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--retail-accent);
}

.retail-exercise-card:hover .retail-exercise-card-title {
  color: var(--retail-primary);
}

.retail-exercises-pagination {
  margin-top: 3rem;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.retail-exercises-pagination a {
  font-weight: 600;
  color: var(--retail-primary);
  text-decoration: none;
}

.retail-exercises-pagination a:hover {
  color: var(--retail-accent);
}

.retail-exercises-pagination-arrow {
  color: var(--retail-gray-400);
}

/* ----- Show: one exercise ----- */

/* The detail hero carries a back link above the eyebrow and no visual, so it
   wants less vertical room than a product hero. */
.retail-exercise-hero .retail-hero-content {
  grid-template-columns: 1fr;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.retail-exercise-hero .retail-hero-text {
  max-width: 48rem;
}

/* `display: block` with a fitted width, NOT inline-block: `retail-hero-eyebrow`
   is itself inline-block, so an inline-block back link sits on the same line as
   the eyebrow ("← All Free Coaching Exercises FREE COACHING EXERCISE"). The
   fitted width keeps the click target on the text rather than the full row. */
.retail-exercise-back {
  display: block;
  width: fit-content;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  margin-bottom: 1.5rem;
}

.retail-exercise-back:hover {
  color: white;
}

.retail-exercise-byline {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.retail-exercise-byline-link {
  color: var(--retail-accent-light);
  text-decoration: none;
}

.retail-exercise-byline-link:hover {
  text-decoration: underline;
}

.retail-exercise-body {
  padding: var(--retail-section-padding) var(--retail-container-padding);
}

.retail-exercise-body-inner {
  max-width: 72rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}

@media (min-width: 900px) {
  .retail-exercise-body-inner {
    grid-template-columns: minmax(0, 1fr) 20rem;
  }
}

/* Operator-authored HTML from the admin editor lands here, so the prose styles
   are element selectors scoped to this container rather than classes the
   editor would have to emit. */
.retail-exercise-prose {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--retail-gray-700);
}

.retail-exercise-prose h2,
.retail-exercise-prose h3,
.retail-exercise-prose h4 {
  color: var(--retail-primary);
  font-weight: 700;
  line-height: 1.3;
  margin: 2rem 0 0.75rem;
}

.retail-exercise-prose h2 { font-size: 1.5rem; }
.retail-exercise-prose h3 { font-size: 1.25rem; }
.retail-exercise-prose h4 { font-size: 1.0625rem; }

.retail-exercise-prose > *:first-child {
  margin-top: 0;
}

.retail-exercise-prose p {
  margin: 0 0 1.25rem;
}

.retail-exercise-prose ul,
.retail-exercise-prose ol {
  margin: 0 0 1.25rem;
  padding-left: 1.5rem;
}

.retail-exercise-prose ul { list-style: disc; }
.retail-exercise-prose ol { list-style: decimal; }

.retail-exercise-prose li {
  margin-bottom: 0.5rem;
}

.retail-exercise-prose a {
  color: var(--retail-primary);
  font-weight: 600;
}

.retail-exercise-prose img {
  max-width: 100%;
  height: auto;
}

.retail-exercise-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.25rem;
}

.retail-exercise-prose th,
.retail-exercise-prose td {
  border: 1px solid var(--retail-gray-200);
  padding: 0.5rem 0.75rem;
  text-align: left;
}

.retail-exercise-aside {
  position: sticky;
  top: 2rem;
}

.retail-exercise-download {
  background: var(--retail-gray-50);
  border: 1px solid var(--retail-gray-200);
  border-radius: 0.75rem;
  padding: 1.5rem;
  text-align: center;
}

.retail-exercise-download-preview {
  display: block;
  margin-bottom: 1.25rem;
}

.retail-exercise-download-cover {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--retail-gray-200);
  border-radius: 0.375rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.retail-exercise-download-btn {
  width: 100%;
  justify-content: center;
}

.retail-exercise-download-note {
  font-size: 0.8125rem;
  color: var(--retail-gray-500);
  margin: 0.75rem 0 0;
}

/* ----- Show: previous / next ----- */

.retail-exercise-nav {
  border-top: 1px solid var(--retail-gray-200);
  padding: 2.5rem var(--retail-container-padding);
}

.retail-exercise-nav-inner {
  max-width: 72rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .retail-exercise-nav-inner {
    grid-template-columns: 1fr 1fr;
  }

  /* A lone "Next" keeps the right-hand column instead of sliding left. */
  .retail-exercise-nav-link-next {
    grid-column: 2;
    text-align: right;
  }
}

.retail-exercise-nav-link {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  text-decoration: none;
}

.retail-exercise-nav-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--retail-accent);
}

.retail-exercise-nav-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--retail-gray-900);
}

.retail-exercise-nav-link:hover .retail-exercise-nav-title {
  color: var(--retail-primary);
}


/* ==========================================================================
   Innate Index — the free personality test (D15)
   app/views/innate_index/assessment/index.html.erb
   app/views/innate_index/participants/*

   Last of the four D15 pages. It had its own layout, its own two stylesheets
   and its own indigo palette; `rating_complete` was still Bootstrap 3 markup
   under a layout that loads no Bootstrap, so that page rendered unstyled.
   ========================================================================== */

/* The assessment is a long form with no hero visual — it wants less vertical
   room up top than a product hero. */
.retail-ii-hero .retail-hero-content {
  grid-template-columns: 1fr;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.retail-ii-hero .retail-hero-text {
  max-width: 48rem;
}

/* ----- The assessment form ----- */

.retail-ii-form {
  padding: var(--retail-section-padding) var(--retail-container-padding);
}

.retail-ii-form-inner {
  max-width: 60rem;
  margin: 0 auto;
}

.retail-ii-errors {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 4px solid var(--retail-accent);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  color: #991b1b;
  font-size: 0.9375rem;
}

.retail-ii-instructions {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--retail-gray-700);
  margin-bottom: 2rem;
}

/* A sticky column key, so the answer meanings stay visible through 45 rows
   instead of scrolling away after the first. */
.retail-ii-scale-key {
  display: none;
}

@media (min-width: 768px) {
  .retail-ii-scale-key {
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(5, 6.5rem);
    gap: 0.25rem;
    align-items: end;
    padding: 0.75rem 1rem;
    background: white;
    border-bottom: 2px solid var(--retail-primary);
  }

  .retail-ii-scale-key-option {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--retail-primary);
    text-align: center;
    line-height: 1.3;
  }
}

/* These three carry no visual styling and are STRUCTURAL — each occupies a grid
   column, and the layout depends on it being there (audit item 29: all three
   were emitted by views and defined in no stylesheet). They rendered acceptably
   by auto-placement, which is exactly the problem: nothing recorded that the
   empty <span> is load-bearing, so tidying it away would silently misalign the
   scale headers. Declared explicitly so the next reader knows. */
.retail-ii-scale-key-label {
  /* Spacer over the question-text column, so the five scale headers sit above
     the five radio columns. .retail-ii-scale-key is
     `minmax(0, 1fr) repeat(5, 6.5rem)` and this is its first child. */
  min-width: 0;
}

.retail-ii-report-factors {
  /* The 1fr column of .retail-ii-report-grid. min-width:0 stops a long factor
     description forcing the track wider than its share. */
  min-width: 0;
}

.retail-ii-factor-body {
  /* The text column beside the percentage badge in a factor row. */
  min-width: 0;
}

.retail-ii-questions {
  list-style: none;
  margin: 0;
  padding: 0;
}

.retail-ii-question {
  border-bottom: 1px solid var(--retail-gray-200);
}

.retail-ii-question:nth-child(even) {
  background: var(--retail-gray-50);
}

.retail-ii-question > div[role="group"] {
  padding: 0.75rem 1rem;
}

@media (min-width: 768px) {
  .retail-ii-question > div[role="group"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(5, 6.5rem);
    gap: 0.25rem;
    align-items: center;
  }
}

.retail-ii-question-invalid {
  background: #fef2f2;
  box-shadow: inset 3px 0 0 var(--retail-accent);
}

.retail-ii-question-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--retail-gray-900);
  padding: 0;
}

.retail-ii-question-number {
  display: inline-block;
  min-width: 1.75rem;
  color: var(--retail-gray-400);
  font-weight: 500;
}

.retail-ii-options {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.25rem;
  margin-top: 0.5rem;
}

@media (min-width: 768px) {
  .retail-ii-options {
    display: contents;
  }
}

/* The whole cell is the target — a 45-question form is a lot of small clicks. */
.retail-ii-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.5rem 0.25rem;
  border: 1px solid var(--retail-gray-200);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.retail-ii-option:hover {
  background: white;
  border-color: var(--retail-primary);
}

/* `:has(input:checked)` gives the highlight IMMEDIATELY on click. The
   `-chosen` class is server-rendered, so on its own the cell only lit up after
   a reload — on a 45-question form that is how a respondent loses their place.
   Both selectors are kept: the class covers a re-rendered form after a
   validation failure, `:has()` covers live interaction. No JavaScript. */
.retail-ii-option-chosen,
.retail-ii-option:has(.retail-ii-option-input:checked) {
  background: var(--retail-primary);
  border-color: var(--retail-primary);
}

.retail-ii-option-chosen .retail-ii-option-label,
.retail-ii-option:has(.retail-ii-option-input:checked) .retail-ii-option-label {
  color: white;
}

.retail-ii-option-input {
  accent-color: var(--retail-primary);
}

.retail-ii-option-chosen .retail-ii-option-input {
  accent-color: white;
}

.retail-ii-option-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  color: var(--retail-gray-600);
}

/* On desktop the labels live in the sticky key at the top of the column. */
@media (min-width: 768px) {
  .retail-ii-option-label {
    display: none;
  }

  .retail-ii-option {
    padding: 0.625rem 0.25rem;
  }
}

.retail-ii-question-error {
  grid-column: 1 / -1;
  font-size: 0.8125rem;
  color: var(--retail-accent);
  margin: 0.375rem 0 0;
}

/* ----- Demographics + submit ----- */

.retail-ii-demographics {
  max-width: 32rem;
  margin: 3rem 0 0;
}

.retail-ii-demographics-title {
  margin-bottom: 0.5rem;
}

.retail-ii-demographics-note {
  font-size: 0.9375rem;
  color: var(--retail-gray-600);
  margin-bottom: 2rem;
}

.retail-ii-field {
  margin-bottom: 1.5rem;
}

.retail-ii-label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--retail-gray-900);
  margin-bottom: 0.5rem;
}

.retail-ii-select,
.retail-ii-input {
  display: block;
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  color: var(--retail-gray-900);
  background: white;
  border: 1px solid var(--retail-gray-300);
  border-radius: 0.375rem;
}

.retail-ii-select:focus,
.retail-ii-input:focus {
  outline: 2px solid var(--retail-primary);
  outline-offset: 1px;
  border-color: var(--retail-primary);
}

.retail-ii-select-invalid,
.retail-ii-input-invalid {
  border-color: var(--retail-accent);
}

.retail-ii-field-error {
  font-size: 0.8125rem;
  color: var(--retail-accent);
  margin: 0.375rem 0 0;
}

.retail-ii-submit {
  margin: 2.5rem 0 1rem;
  text-align: center;
}

/* ----- The report ----- */

.retail-ii-report {
  padding: var(--retail-section-padding) var(--retail-container-padding);
}

.retail-ii-report-inner {
  max-width: 72rem;
  margin: 0 auto;
}

.retail-ii-report-intro {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--retail-gray-700);
  max-width: 46rem;
  margin-bottom: 2.5rem;
}

.retail-ii-report-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}

@media (min-width: 900px) {
  .retail-ii-report-grid {
    grid-template-columns: minmax(0, 1fr) 22rem;
  }

  .retail-ii-report-aside {
    position: sticky;
    top: 2rem;
  }
}

.retail-ii-factors {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.retail-ii-factor {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.25rem;
  background: var(--retail-gray-50);
  border: 1px solid var(--retail-gray-200);
  border-radius: 0.75rem;
}

.retail-ii-factor-score {
  flex: 0 0 4.5rem;
  font-family: var(--retail-font-serif);
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--retail-primary);
  text-align: center;
}

.retail-ii-factor-name {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--retail-gray-900);
  margin: 0 0 0.375rem;
}

.retail-ii-factor-desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--retail-gray-600);
  margin: 0;
}

.retail-ii-chart {
  background: white;
  border: 1px solid var(--retail-gray-200);
  border-radius: 0.75rem;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.retail-ii-chart-img {
  display: block;
  width: 100%;
  height: auto;
}

.retail-ii-email {
  background: var(--retail-gray-50);
  border: 1px solid var(--retail-gray-200);
  border-radius: 0.75rem;
  padding: 1.25rem;
}

.retail-ii-email-lead {
  font-size: 0.9375rem;
  color: var(--retail-gray-900);
  margin: 0 0 0.5rem;
}

.retail-ii-email-note {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--retail-gray-600);
  margin: 0 0 0.875rem;
}

.retail-ii-email-row {
  display: flex;
  gap: 0.5rem;
}

.retail-ii-email-row .retail-ii-input {
  flex: 1;
}

.retail-ii-jobfill {
  margin-top: 3rem;
  padding: 1.5rem;
  background: var(--retail-gray-50);
  border: 1px solid var(--retail-gray-200);
  border-radius: 0.75rem;
  max-width: 32rem;
}

.retail-ii-jobfill-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.retail-ii-jobfill-row .retail-ii-select {
  flex: 1;
}


/* ==========================================================================
   Leadership Development Glossary (D15)
   app/views/glossary/*

   The last page on the legacy `application` layout. Its term cards were
   Bootstrap 3 markup (`panel panel-default`) under a layout that loads no
   Bootstrap, so every card on the index rendered unstyled.
   ========================================================================== */

.retail-glossary-hero .retail-hero-content {
  grid-template-columns: 1fr;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.retail-glossary-hero .retail-hero-text {
  max-width: 48rem;
}

.retail-glossary-back {
  display: block;
  width: fit-content;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  margin-bottom: 1.5rem;
}

.retail-glossary-back:hover {
  color: white;
}

/* ----- A–Z jump nav ----- */

/* Sticky so the alphabet stays reachable through a long list. */
.retail-glossary-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: white;
  border-bottom: 1px solid var(--retail-gray-200);
  padding: 0.75rem var(--retail-container-padding);
}

.retail-glossary-nav-inner {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  justify-content: center;
}

.retail-glossary-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--retail-primary);
  background: var(--retail-gray-50);
  border: 1px solid var(--retail-gray-200);
  border-radius: 0.375rem;
  text-decoration: none;
}

.retail-glossary-nav-link:hover {
  color: white;
  background: var(--retail-primary);
  border-color: var(--retail-primary);
}

/* ----- Term list ----- */

.retail-glossary {
  padding: var(--retail-section-padding) var(--retail-container-padding);
  max-width: 72rem;
  margin: 0 auto;
}

.retail-glossary-empty {
  text-align: center;
  color: var(--retail-gray-600);
}

.retail-glossary-group {
  margin-bottom: 3.5rem;
}

.retail-glossary-letter {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--retail-primary);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--retail-gray-200);
  /* Clears the sticky A–Z bar when jumped to. */
  scroll-margin-top: 4.5rem;
}

.retail-glossary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .retail-glossary-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .retail-glossary-grid { grid-template-columns: repeat(3, 1fr); }
}

/* The whole card is the link — the old markup had a plain-text title and a
   separate "Read more", i.e. two tab stops for one destination. */
.retail-glossary-card {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1.25rem 1.5rem;
  background: white;
  border: 1px solid var(--retail-gray-200);
  border-radius: 0.75rem;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.retail-glossary-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 51, 102, 0.1);
  border-color: var(--retail-primary);
}

.retail-glossary-card-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--retail-gray-900);
  margin: 0;
}

.retail-glossary-card-excerpt {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--retail-gray-600);
  margin: 0;
  flex: 1;
}

.retail-glossary-card-action {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--retail-accent);
}

/* ----- A single term ----- */

.retail-glossary-term {
  padding: var(--retail-section-padding) var(--retail-container-padding);
}

.retail-glossary-term-inner {
  max-width: 72rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 900px) {
  .retail-glossary-term-inner {
    grid-template-columns: 16rem minmax(0, 1fr);
  }

  .retail-glossary-toc {
    position: sticky;
    top: 5rem;
  }
}

.retail-glossary-toc {
  background: var(--retail-gray-50);
  border: 1px solid var(--retail-gray-200);
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
}

.retail-glossary-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.retail-glossary-toc li {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--retail-gray-700);
  padding: 0.25rem 0;
}

/* Operator-authored HTML from the admin editor, so these are element selectors
   scoped to the container rather than classes the editor would have to emit. */
.retail-glossary-body {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--retail-gray-700);
}

.retail-glossary-body h2,
.retail-glossary-body h3 {
  color: var(--retail-primary);
  font-weight: 700;
  line-height: 1.3;
  margin: 2rem 0 0.75rem;
}

.retail-glossary-body h2 { font-size: 1.375rem; }
.retail-glossary-body h3 { font-size: 1.125rem; }

.retail-glossary-body > *:first-child { margin-top: 0; }

.retail-glossary-body p { margin: 0 0 1.25rem; }

.retail-glossary-body ul,
.retail-glossary-body ol {
  margin: 0 0 1.25rem;
  padding-left: 1.5rem;
}

.retail-glossary-body ul { list-style: disc; }
.retail-glossary-body ol { list-style: decimal; }
.retail-glossary-body li { margin-bottom: 0.5rem; }

.retail-glossary-body a {
  color: var(--retail-primary);
  font-weight: 600;
}

.retail-glossary-body img {
  max-width: 100%;
  height: auto;
}

/* ----- Back to top ----- */

.retail-glossary-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 30;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: var(--retail-primary);
  border: none;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background-color 0.2s ease;
  /* NO `opacity` here on purpose. back_to_top_controller toggles Tailwind's
     `opacity-0` / `opacity-100` utilities, and pages.css is linked LAST — an
     opacity declaration in this rule has the same specificity and would win,
     pinning the button invisible forever. Visibility belongs to the utilities
     on the element. */
}

.retail-glossary-top:hover {
  background: var(--retail-accent);
}