/* 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 {
  /* Uploaded images carry no width/height attributes — they are Active Storage
     blobs, so ImageHelper's manifest (which covers app/assets/images only)
     cannot size them. With `height: auto` alone the card had ZERO height until
     the image arrived and then jumped to full size, which is the jerk visitors
     saw while scrolling this grid.
     Reserving the box in CSS fixes it without needing per-blob metadata, and
     for user-uploaded content it is the better answer anyway: the grid stays
     uniform whatever someone uploads. 816x1056 is the exact ratio of every
     current cover (US Letter portrait — they are PDF page previews), so
     nothing is cropped today, and object-fit keeps an odd upload tidy. */
  aspect-ratio: 816 / 1056;
  object-fit: 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 {
  /* Uploaded images carry no width/height attributes — they are Active Storage
     blobs, so ImageHelper's manifest (which covers app/assets/images only)
     cannot size them. With `height: auto` alone the card had ZERO height until
     the image arrived and then jumped to full size, which is the jerk visitors
     saw while scrolling this grid.
     Reserving the box in CSS fixes it without needing per-blob metadata, and
     for user-uploaded content it is the better answer anyway: the grid stays
     uniform whatever someone uploads. 816x1056 is the exact ratio of every
     current cover (US Letter portrait — they are PDF page previews), so
     nothing is cropped today, and object-fit keeps an odd upload tidy. */
  aspect-ratio: 816 / 1056;
  object-fit: 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);
}