/* ==========================================================================
   stevland-styles.css
   osAwesome Design System — shared stylesheet for all pages
   Source of truth: vault/Work/osAwesome/html/component-lab-v5.html

   RULES:
   1. No inline styles on any page. Every visual rule lives here.
   2. All classes prefixed with `awesome-` to avoid collisions with legacy.
   3. Gutenberg blocks reference these classes via "Additional CSS class(es)".
   4. This file loads AFTER style.css and overrides it where needed.
   5. When all pages are rebuilt, style.css becomes a stub (theme header only).

   Last updated: 2026-04-05
   ========================================================================== */


/* ==========================================================================
   0. DESIGN TOKENS
   ========================================================================== */

:root {
  --osa-blue:          #419AD2;
  --osa-blue-dark:     #2F7DB8;
  --osa-blue-light:    #F4F8FB;
  --osa-charcoal:      #444C56;
  --osa-charcoal-mid:  #5A6270;
  --osa-steel:         #A6AFBC;
  --osa-slate:         #C7D2DC;
  --osa-green:         #82B541;
  --osa-green-dark:    #6E9A38;
  --osa-green-light:   #EAF3DE;
  --osa-orange:        #F55C44;
  --osa-orange-dark:   #D94E38;
  --osa-orange-whisper:#FFF7F5;
  --osa-cream:         #f7f4ef;
  --osa-white:         #ffffff;
  --osa-border:        #C7D2DC;

  --osa-font-heading:  'Plus Jakarta Sans', sans-serif;
  --osa-font-body:     "Segoe UI", "Dejavu Sans", Optima, Arial, sans-serif;
  --osa-fw-heading:    500;
  --osa-fw-ui:         600;
  --osa-fw-bold:       700;

  --osa-s1:            8px;
  --osa-s2:            16px;
  --osa-s3:            24px;
  --osa-s4:            32px;
  --osa-s5:            48px;
  --osa-s6:            64px;
  --osa-s7:            80px;
  --osa-s8:            96px;

  --osa-max-width:     1200px;
  --osa-content-max:   640px;
  --osa-heading-max:   680px;
  --osa-section-gap:   var(--osa-s6);
  --osa-section-pad:   calc(var(--osa-section-gap) / 2) 48px;
  --osa-section-pad-m: calc(var(--osa-section-gap) / 2) 24px;
  --osa-radius:        10px;
  --osa-radius-sm:     4px;
}


/* ==========================================================================
   REBUILD TEMPLATE — NEUTRALIZERS
   ========================================================================== */

body.page-template-template-rebuild .grid-container {
  max-width: 100%;
}

body.page-template-template-rebuild .inside-article {
  padding: 0 !important;
  overflow: visible;
}

body.page-template-template-rebuild .separate-containers .site-main,
body.page-template-template-rebuild.separate-containers.no-sidebar .site-main {
  margin: 0 !important;
  overflow: visible;
}
body.page-template-template-rebuild .site-main > * {
  margin-bottom: 0 !important;
}

body.page-template-template-rebuild .entry-content:not(:first-child) {
  margin-top: 0;
}

body.page-template-template-rebuild .site-main .wp-block-group__inner-container {
  padding-top: 0;
  padding-bottom: 0;
}


/* ==========================================================================
   ACTIVE RULES
   ========================================================================== */

/* ── Section container ── */
.awesome-section {
  padding: var(--osa-section-pad);
  max-width: var(--osa-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* Breadcrumbs → first section gap */
body.page-template-template-rebuild .awesome-section:first-child {
  margin-top: calc(var(--osa-section-gap) / 2);
}

/* Last section → footer: set exact gap, cancel GP's contribution */
body.page-template-template-rebuild .entry-content {
  margin-bottom: calc(var(--osa-section-gap) / 2);
  overflow: visible;
}

/* Width modifiers — set via page_class custom field on the page body */
body.awesome-wide .awesome-section       { max-width: 1184px; padding: var(--osa-section-pad) 0 var(--osa-section-pad) 0; }
body.awesome-narrow .awesome-section     { max-width: 1040px; }
body.awesome-reading .awesome-section    { max-width: 640px; }
body.awesome-centered .awesome-section   { max-width: 520px; text-align: center; }

@media (max-width: 768px) {
  .awesome-section {
    padding: 48px 24px;
  }
}

/* ── Full-width band ── */
/* NOTE: Never stack two different colored bands back-to-back.
   The 64px gap (32px padding each side) that works between same-background
   sections feels insufficient at a color boundary. Always insert a white
   section between colored bands. */
body.page-template-template-rebuild {
  overflow-x: hidden;
}

.gb-container.awesome-band {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-top: calc(var(--osa-section-gap) / 2);
  margin-bottom: calc(var(--osa-section-gap) / 2);
  box-sizing: border-box;
  max-width: none !important;
}
.page-template-template-rebuild .awesome-section:first-child {
    margin-top: calc(var(--osa-section-gap) / 2);
    margin-bottom: calc(var(--osa-section-gap) / 2);
    padding-bottom: calc(var(--osa-section-gap) / 2);
}

/* ── Background variants ── */
/* RULE: All colored bg bands get 2x vertical padding — color boundaries need breathing room */
.awesome-bg-alice     { background-color: var(--osa-blue-light); padding: calc(var(--osa-section-gap) / 2); }
.awesome-bg-charcoal  { background-color: var(--osa-charcoal); padding: calc(var(--osa-section-gap) / 2); }
.awesome-bg-blue-dark { background-color: var(--osa-blue-dark); padding: calc(var(--osa-section-gap) / 2); }
.awesome-bg-whisper   { background-color: var(--osa-orange-whisper); padding: calc(var(--osa-section-gap) / 2); }
.awesome-bg-cream     { background-color: var(--osa-cream); padding: calc(var(--osa-section-gap) / 2); }

/* Tables and charts on colored backgrounds → white surface */
[class*="awesome-bg-"] table,
[class*="awesome-bg-"] .table-wrap,
.table-wrap {
  background: var(--osa-white);
  border-radius: var(--osa-radius);
}

/* ── Per-bg eyebrow adjustments ── */
.awesome-bg-whisper .awesome-eyebrow  { color: var(--osa-orange); }
.awesome-bg-cream .awesome-eyebrow    { color: #9E8A6C; }

/* ── Dark band text treatment ── */
.awesome-band-dark {
  color: rgba(255, 255, 255, 0.65);
}

.awesome-band-dark .awesome-display,
.awesome-band-dark .awesome-section-heading {
  color: #ffffff;
}

.awesome-band-dark .awesome-eyebrow {
  color: var(--osa-green);
}

.awesome-band-dark .awesome-body {
  color: rgba(255, 255, 255, 0.65);
}

.awesome-band-dark .awesome-category-label {
  color: rgba(255, 255, 255, 0.35);
  border-color: rgba(255, 255, 255, 0.12);
}

.awesome-band-dark .awesome-card {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.awesome-band-dark .awesome-card-title {
  color: #ffffff;
}

.awesome-band-dark .awesome-card-body {
  color: rgba(255, 255, 255, 0.55);
}

.awesome-band-dark .awesome-btn-outline {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.3);
}

.awesome-band-dark .awesome-btn-outline:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.6);
}

.awesome-band-dark .awesome-feature-item {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.awesome-band-dark .awesome-feature-item strong {
  color: #ffffff;
}

.awesome-band-dark .awesome-feature-item {
  color: rgba(255, 255, 255, 0.55);
}


/* ── Page header ── */
.awesome-page-header {
  padding-bottom: 0;
}

.awesome-page-header .awesome-label {
  display: inline-block;
  font-family: var(--osa-font-heading);
  font-size: 10px;
  font-weight: var(--osa-fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #747474;
  background: #e5e5e5;
  padding: 3px 10px;
  border-radius: 3px;
  margin-bottom: var(--osa-s2);
}

.awesome-page-header .awesome-label a {
  color: inherit;
  text-decoration: none;
}

.awesome-page-header .awesome-label a:hover {
  text-decoration: underline;
}

/* ── Breadcrumb (sub-page navigation) ── */
.awesome-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--osa-s4);
}

.awesome-breadcrumb-parent {
  display: inline-block;
  font-family: var(--osa-font-heading);
  font-size: 10px;
  font-weight: var(--osa-fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #747474;
  background: #e5e5e5;
  padding: 3px 10px;
  border-radius: 3px;
  text-decoration: none;
}

.awesome-breadcrumb-parent:hover {
  color: var(--osa-blue-dark);
  background: var(--osa-blue-light);
  text-decoration: none;
}

.awesome-breadcrumb-sep {
  color: var(--osa-steel);
  font-size: 13px;
}

.awesome-breadcrumb-current {
  display: inline-block;
  font-family: var(--osa-font-heading);
  font-size: 10px;
  font-weight: var(--osa-fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: white;
  background: var(--osa-green);
  padding: 3px 10px;
  border-radius: 3px;
}

.awesome-display {
  font-family: var(--osa-font-heading);
  font-size: 48px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: var(--osa-fw-heading);
  color: var(--osa-charcoal);
  margin-bottom: 12px;
}

.awesome-body {
  font-size: 16px;
  color: var(--osa-charcoal-mid);
  line-height: 1.75;
  max-width: var(--osa-content-max);
}


/* ── Category label ── */
.awesome-category-label {
  font-family: var(--osa-font-heading);
  font-size: 11px;
  font-weight: var(--osa-fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--osa-steel);
  margin-bottom: 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--osa-border);
}


/* ── Card grid ── */
.awesome-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--osa-s2);
  margin-bottom: var(--osa-s5);
}

.awesome-card-grid:last-of-type {
  margin-bottom: 0;
}

.gb-container.awesome-card {
  background: var(--osa-white);
  border: 1px solid var(--osa-border);
  border-radius: var(--osa-radius);
  padding: var(--osa-s4) !important;
  transition: box-shadow 0.2s, border-color 0.2s;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  max-width: none;
}

.gb-container.awesome-card:hover {
  border-color: var(--osa-blue);
  box-shadow: 0 4px 16px rgba(65, 154, 210, 0.15);
}

.gb-container.awesome-card p:last-child {
  margin-bottom: 0;
}

.awesome-card .awesome-card-title,
.awesome-card h4.wp-block-heading {
  font-family: var(--osa-font-heading);
  font-size: 16px;
  font-weight: var(--osa-fw-ui);
  color: var(--osa-charcoal);
  margin: 0 0 6px 0;
  padding: 0;
  text-align: left;
}

.awesome-card .awesome-card-body,
.awesome-card p.awesome-card-body {
  font-size: 13px;
  color: var(--osa-charcoal-mid);
  line-height: 1.5;
  flex: 1;
  margin: 0 0 6px 0;
  text-align: left;
}

.awesome-card a.awesome-card-link {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--osa-font-heading);
  font-size: 12px;
  font-weight: var(--osa-fw-ui);
  color: var(--osa-blue);
  text-decoration: none;
  letter-spacing: 0.04em;
}

.awesome-card a.awesome-card-link:hover {
  text-decoration: underline;
}

/* Stretch link to cover entire card */
.gb-container.awesome-card {
  position: relative;
  cursor: pointer;
}

.awesome-card a.awesome-card-link::after {
  content: '';
  position: absolute;
  inset: 0;
}


/* ── Eyebrow ── */
.awesome-eyebrow {
  font-family: var(--osa-font-heading);
  font-size: 12px;
  font-weight: var(--osa-fw-bold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--osa-blue);
  margin-bottom: 12px;
}

/* Eyebrow on tinted light backgrounds → green */
.awesome-bg-whisper .awesome-eyebrow,
.awesome-bg-cream .awesome-eyebrow {
  color: var(--osa-green);
}


/* ── Buttons ── */
.awesome-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--osa-font-heading);
  font-size: 15px;
  font-weight: var(--osa-fw-ui);
  letter-spacing: 0.08em;
  padding: 13px 28px;
  border-radius: var(--osa-radius-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  border: none;
  line-height: 1;
}

.awesome-btn-orange {
  background: var(--osa-orange);
  color: white;
  box-shadow: 0 3px 0 rgba(160, 60, 40, 0.9);
}

.awesome-btn-orange:hover {
  background: var(--osa-orange-dark);
  color: white;
}

.awesome-btn-ghost {
  background: white;
  color: var(--osa-charcoal);
  border: 1px solid var(--osa-border);
}

.awesome-btn-ghost:hover {
  background: var(--osa-blue-light);
}

.awesome-band-dark .awesome-btn-ghost {
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.25);
}

.awesome-band-dark .awesome-btn-ghost:hover {
  border-color: white;
  color: white;
}

.awesome-btn-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: var(--osa-s3);
}


/* ── Mini cards ── */
.awesome-mini-cards {
  display: flex;
  gap: var(--osa-s2);
  flex-wrap: wrap;
  margin-top: var(--osa-s3);
}

.awesome-mini-card {
  flex: 1;
  min-width: 200px;
  padding: var(--osa-s3);
  background: rgba(0, 0, 0, 0.03);
  border-radius: var(--osa-radius);
  font-size: 13px;
  line-height: 1.5;
  color: var(--osa-charcoal-mid);
}

.awesome-mini-card strong {
  display: block;
  font-family: var(--osa-font-heading);
  font-weight: var(--osa-fw-ui);
  color: var(--osa-charcoal);
  margin-bottom: 4px;
}

.awesome-band-dark .awesome-mini-card {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
}

.awesome-band-dark .awesome-mini-card strong {
  color: white;
}


/* ── Section heading ── */
.awesome-section-heading {
  font-family: var(--osa-font-heading);
  font-size: 38px;
  line-height: 1.18;
  font-weight: var(--osa-fw-ui);
  color: var(--osa-charcoal);
  margin-bottom: var(--osa-s2);
  max-width: var(--osa-heading-max);
}


/* ── Icon grid ── */
.awesome-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: var(--osa-s1);
  margin-bottom: var(--osa-s4);
}

.awesome-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--osa-s2) var(--osa-s1);
  border: 1px solid var(--osa-border);
  border-radius: var(--osa-radius-sm);
  text-align: center;
}

.awesome-icon-item svg {
  width: 24px;
  height: 24px;
  color: var(--osa-charcoal);
}

.awesome-icon-name {
  font-family: var(--osa-font-heading);
  font-size: 10px;
  color: var(--osa-steel);
  word-break: break-all;
}

/* ── Icon size reference ── */
.awesome-size-row {
  display: flex;
  align-items: flex-end;
  gap: var(--osa-s4);
  flex-wrap: wrap;
  margin-bottom: var(--osa-s4);
}

.awesome-size-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--osa-s1);
}

.awesome-size-item svg {
  color: var(--osa-charcoal);
}

.awesome-size-label {
  font-family: var(--osa-font-heading);
  font-size: 10px;
  color: var(--osa-steel);
  text-align: center;
  line-height: 1.3;
}

/* ── Icon color reference ── */
.awesome-color-row {
  display: flex;
  gap: var(--osa-s2);
  flex-wrap: wrap;
  margin-bottom: var(--osa-s4);
}

.awesome-color-item {
  display: flex;
  align-items: center;
  gap: var(--osa-s1);
  font-family: var(--osa-font-heading);
  font-size: 13px;
  color: var(--osa-charcoal-mid);
}

.awesome-color-item svg {
  width: 20px;
  height: 20px;
}

/* ── Callout boxes ── */
.awesome-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: var(--osa-s4);
  border-radius: 0 10px 10px 0;
  padding: 20px 24px;
  margin-bottom: 12px;
}

.awesome-callout:last-child {
  margin-bottom: 0;
}

/* GB container callouts stack vertically (no icon) */
.gb-container.awesome-callout {
  flex-direction: column;
}

/* Big callout format (h3 + p directly in callout) */
.awesome-callout h3 {
  font-family: var(--osa-font-heading);
  font-size: 18px;
  font-weight: var(--osa-fw-ui);
  color: var(--osa-charcoal);
  margin: 0 0 10px 0;
}

.awesome-callout p {
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
  color: var(--osa-charcoal-mid);
}

.awesome-callout p + p { margin-top: 10px; }

.awesome-callout svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Small callout format (icon + .awesome-callout-content with h4/p) */
.awesome-callout-content h4 {
  font-family: var(--osa-font-heading);
  font-size: 14px;
  font-weight: var(--osa-fw-ui);
  margin: 0 0 4px 0;
}

.awesome-callout-content p {
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}

.awesome-callout-green {
  background: var(--osa-green-light);
  border: 1px solid rgba(130, 181, 65, 0.35);
  border-left: 4px solid var(--osa-green);
}
.awesome-callout-green svg { color: var(--osa-green); }
.awesome-callout-green h3, .awesome-callout-green h4 { color: var(--osa-green-dark); }
.awesome-callout-green p { color: #4a6a2a; }

.awesome-callout-blue {
  background: #ffffff;
  border: 1px solid rgba(65, 154, 210, 0.3);
  border-left: 4px solid var(--osa-blue);
}
.awesome-callout-blue svg { color: var(--osa-blue); }
.awesome-callout-blue h3, .awesome-callout-blue h4 { color: var(--osa-blue-dark); }
.awesome-callout-blue p { color: #2a5a80; }

.awesome-callout-orange {
  background: #fff7f5;
  border: 1px solid #f5cfc4;
  border-left: 4px solid var(--osa-orange);
}
.awesome-callout-orange svg { color: var(--osa-orange); }
.awesome-callout-orange h3, .awesome-callout-orange h4 { color: var(--osa-charcoal); }
.awesome-callout-orange p { color: var(--osa-charcoal-mid); }

.awesome-callout-red {
  background: var(--osa-red-light, #fdecea);
  border: 1px solid rgba(192, 57, 43, 0.25);
  border-left: 4px solid #C0392B;
}
.awesome-callout-red svg { color: #C0392B; }
.awesome-callout-red h3, .awesome-callout-red h4 { color: #C0392B; }
.awesome-callout-red p { color: #8a2020; }


/* ── Feature card variants ── */

/* Variant A: green dot + title (native block version) */
.awesome-feature-title {
  font-family: var(--osa-font-heading);
  font-size: 16px;
  font-weight: var(--osa-fw-ui);
  color: var(--osa-charcoal);
  margin: 0 0 6px 0;
  padding: 0 0 0 16px;
  position: relative;
}

.awesome-feature-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: var(--osa-green);
  border-radius: 50%;
}

/* Feature item paragraph reset for native blocks */
.awesome-feature-item p {
  margin: 0;
}

.awesome-feature-item p.awesome-plugin-note {
  margin-top: 6px;
}

/* Dark band treatment for native feature titles */
.awesome-band-dark .awesome-feature-title {
  color: #ffffff;
}

/* Variant A legacy: green dot + title (wp:html version, kept for backward compat) */
.awesome-fc-dot-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.awesome-fc-dot {
  width: 8px;
  height: 8px;
  background: var(--osa-green);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Variant B: icon in tinted box */
.awesome-fc-icon-box {
  width: 44px;
  height: 44px;
  background: var(--osa-blue-light);
  border-radius: var(--osa-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.awesome-fc-icon-box svg {
  width: 22px;
  height: 22px;
  color: var(--osa-blue);
}
.awesome-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1px;
  background: #E8EDF0;
  border-radius: 12px;
  overflow: hidden;
  margin-top: 32px;
}

.awesome-feature-grid-2col {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 600px) {
  .awesome-feature-grid-2col {
    grid-template-columns: 1fr;
  }
}

.awesome-feature-item {
  background: var(--osa-white);
  padding: var(--osa-s4) var(--osa-s4);
  font-size: 14px;
  color: var(--osa-charcoal-mid);
  line-height: 1.65;
}

.awesome-feature-item strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--osa-font-heading);
  font-size: 16px;
  font-weight: var(--osa-fw-ui);
  color: var(--osa-charcoal);
}


/* ── Token reference grid ── */
.awesome-token-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--osa-s2);
}

.awesome-token-card {
  display: flex;
  align-items: center;
  gap: var(--osa-s2);
  padding: var(--osa-s2);
  background: var(--osa-white);
  border: 1px solid var(--osa-border);
  border-radius: var(--osa-radius);
}

.awesome-token-swatch {
  width: 48px;
  height: 48px;
  border-radius: var(--osa-radius-sm);
  flex-shrink: 0;
}

.awesome-token-info {
  flex: 1;
  min-width: 0;
}

.awesome-token-hex {
  font-family: var(--osa-font-heading);
  font-size: 13px;
  font-weight: var(--osa-fw-ui);
  color: var(--osa-charcoal);
}

.awesome-token-name {
  font-size: 12px;
  color: var(--osa-charcoal-mid);
}

.awesome-token-use {
  font-size: 11px;
  color: var(--osa-steel);
  line-height: 1.4;
}

.awesome-token-status {
  font-family: var(--osa-font-heading);
  font-size: 10px;
  font-weight: var(--osa-fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
  flex-shrink: 0;
  align-self: flex-start;
}

.awesome-token-approved {
  color: var(--osa-green-dark);
  background: var(--osa-green-light);
}

.awesome-token-candidate {
  color: var(--osa-charcoal-mid);
  background: #f0f0f0;
}

/* ── Legacy button fix ── */
a.btn.btn-orange.btn-sm {
  padding: 8px 19px;
  box-shadow: initial;
}


/* ── Page backgrounds ── */
body.alice-blue {
  background-color: #E8F5FC;
}

/* ── Background-scoped tweaks ── */
body.alice-blue .awesome-page-header .awesome-label {
  color: #696969;
  background: #cecece;
}

body.alice-blue .awesome-category-label {
  color: #8b929d;
}

body.alice-blue .awesome-breadcrumb-parent {
  color: #696969;
  background: #cecece;
}


/* ── Option tag (section label within component pages) ── */
.awesome-option-tag {
  display: inline-block;
  font-family: var(--osa-font-heading);
  font-size: 10px;
  font-weight: var(--osa-fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #747474;
  background: #e5e5e5;
  padding: 3px 10px;
  border-radius: 3px;
  margin-bottom: 28px;
}


/* ── Demo note (italic annotation for component demos) ── */
.awesome-demo-note {
  font-size: 12px;
  font-style: italic;
  color: var(--osa-steel);
  margin-bottom: 14px;
}

.awesome-demo-note + .awesome-btn-group {
  margin-top: 0;
}

.awesome-demo-group {
  margin-top: 28px;
}


/* ── Two-column grid ── */
.awesome-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--osa-s4);
  align-items: start;
}

.awesome-two-col-wide {
  gap: var(--osa-s6);
}

@media (max-width: 768px) {
  .awesome-two-col {
    grid-template-columns: 1fr;
  }
}


/* ── Product card (detailed feature card) ── */
.awesome-product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--osa-s4);
  margin-bottom: var(--osa-s5);
}

@media (max-width: 768px) {
  .awesome-product-grid {
    grid-template-columns: 1fr;
  }
}

.awesome-product-card {
  background: var(--osa-white);
  border: 1px solid var(--osa-border);
  border-radius: var(--osa-radius);
  padding: 28px;
}

.awesome-product-card-highlight {
  border-color: var(--osa-blue);
  background: var(--osa-blue-light);
}

.awesome-product-card-label {
  font-family: var(--osa-font-heading);
  font-size: 11px;
  font-weight: var(--osa-fw-bold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--osa-steel);
  margin-bottom: 8px;
}

.awesome-product-card-highlight .awesome-product-card-label {
  color: var(--osa-blue-dark);
}

.awesome-product-card-icon {
  width: 40px;
  height: 40px;
  background: var(--osa-blue-light);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.awesome-product-card-highlight .awesome-product-card-icon {
  background: var(--osa-white);
}

.awesome-product-card-icon i,
.awesome-product-card-icon svg {
  width: 20px;
  height: 20px;
  color: var(--osa-blue);
}

.awesome-product-card-highlight .awesome-product-card-icon svg {
  color: var(--osa-blue-dark);
}

.awesome-product-card h3 {
  font-family: var(--osa-font-heading);
  font-size: 17px;
  font-weight: var(--osa-fw-ui);
  color: var(--osa-charcoal);
  margin: 0 0 8px 0;
}

.awesome-product-card p {
  font-size: 14px;
  color: var(--osa-charcoal-mid);
  line-height: 1.65;
  margin: 0 0 10px 0;
}

.awesome-product-card-fine {
  font-size: 12px;
  color: var(--osa-steel);
  font-style: italic;
  margin-top: 4px;
}

.awesome-product-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--osa-border);
  font-size: 12px;
  color: var(--osa-steel);
}

.awesome-product-card-highlight .awesome-product-card-meta {
  border-color: rgba(65, 154, 210, 0.25);
}

.awesome-tag {
  display: inline-block;
  font-family: var(--osa-font-heading);
  font-size: 11px;
  font-weight: var(--osa-fw-ui);
  color: var(--osa-blue-dark);
  background: var(--osa-blue-light);
  border: 1px solid var(--osa-slate);
  padding: 2px 10px;
  border-radius: 20px;
}

.awesome-product-card-highlight .awesome-tag {
  background: var(--osa-white);
  border-color: var(--osa-blue);
}


/* ── Act label (narrative structure pill) ── */
.awesome-act-label {
  display: inline-block;
  font-family: var(--osa-font-heading);
  font-size: 11px;
  font-weight: var(--osa-fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #596576;
  background: #c8d1e1;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: var(--osa-s3);
}


/* ── Section alt (inline alice-blue panel) ── */
.awesome-section-alt {
  background: var(--osa-blue-light);
  padding: 40px;
  border-radius: var(--osa-radius);
}

/* ── Panel (large contained colored panel, e.g. Option B sections) ── */
.awesome-panel {
  background: var(--osa-blue-light);
  padding: var(--osa-s5);
  border-radius: 14px;
  margin-top: var(--osa-s4);
}

.awesome-panel .awesome-eyebrow {
  color: var(--osa-green);
}

.awesome-panel .awesome-feature-item {
  background: var(--osa-white);
}

.awesome-panel-subsection {
  margin-top: 56px;
}

.awesome-panel .awesome-callout {
  margin-top: 32px;
}


/* ── Additional button variants ── */
.awesome-btn-blue {
  background: var(--osa-blue);
  color: white;
  box-shadow: 0 3px 0 rgb(59, 118, 163);
}

.awesome-btn-blue:hover {
  background: var(--osa-blue-dark);
  color: white;
}

.awesome-btn-grey {
  background: #dcdfe2;
  color: #3b4450;
  box-shadow: 0 3px 0 0 #8d8f91;
}

.awesome-btn-grey:hover {
  background: #cdd0d4;
  color: #3b4450;
}

.awesome-btn-ghost-blue {
  background: white;
  color: var(--osa-blue-dark);
  border: 1px solid var(--osa-blue);
}

.awesome-btn-ghost-blue:hover {
  background: var(--osa-blue-light);
}

.awesome-btn-sm {
  padding: 8px 19px;
  font-size: 13px;
  box-shadow: none;
}

/* Flat account/renewal buttons */
.awesome-btn-flat {
  display: inline-block;
  font-family: var(--osa-font-heading);
  font-size: 14px;
  font-weight: var(--osa-fw-ui);
  padding: 10px 22px;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s;
  border: none;
  box-shadow: none;
  line-height: 1.4;
}

.awesome-btn-flat-blue {
  background: var(--osa-blue);
  color: white;
}

.awesome-btn-flat-blue:hover {
  background: var(--osa-blue-dark);
  color: white;
}

.awesome-btn-flat-grey {
  background: var(--osa-steel);
  color: white;
}

.awesome-btn-flat-grey:hover {
  background: #929aA6;
  color: white;
}


/* ── Divider ── */
.awesome-divider {
  border: none;
  border-top: 1px solid var(--osa-border);
  margin: var(--osa-s5) 0;
}


/* ── Comparison table ── */
.awesome-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: var(--osa-s4);
}

.awesome-table th,
.awesome-table td {
  padding: 13px 16px;
  text-align: left;
}

.awesome-table thead th {
  background: var(--osa-charcoal);
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
  white-space: nowrap;
  border: none;
}

.awesome-table thead th.awesome-table-ours {
  background: var(--osa-blue-dark);
  color: white;
}

.awesome-table tbody td {
  padding: 11px 16px;
  border-bottom: 1px solid #eee;
  color: var(--osa-charcoal-mid);
  vertical-align: middle;
}

.awesome-table tbody tr:last-child td {
  border-bottom: none;
}

.awesome-table tbody td:first-child {
  font-weight: 500;
  color: var(--osa-charcoal);
}

.awesome-table tbody td.awesome-table-ours {
  background: var(--osa-blue-light);
  font-weight: 500;
  color: var(--osa-blue-dark);
}

/* Plugin note in feature cards */
.awesome-plugin-note {
  font-size: 11px;
  color: var(--osa-steel);
  font-style: italic;
  margin-top: 6px;
}

/* ── Disclaimer / muted body text ── */
.awesome-body-muted {
  font-size: 14px;
  color: var(--osa-steel);
  line-height: 1.6;
  max-width: var(--osa-content-max);
}
/* ── Plugin Grid ── */
.awesome-plugin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
  margin-top: 0;
  padding: var(--osa-s4) var(--osa-s4);
}
.awesome-plugin-item {
  background: white;
  border: 1px solid var(--osa-border);
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: var(--osa-s4) var(--osa-s4);
}
.awesome-plugin-bullet {
  width: 8px;
  height: 8px;
  background: var(--osa-green);
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}
.awesome-plugin-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--osa-charcoal);
}
.awesome-plugin-desc {
  font-size: 12px;
  color: var(--osa-steel);
  margin-top: 2px;
}
.awesome-plugin-note-inline {
  font-size: 11px;
  color: var(--osa-steel);
  font-style: italic;
  margin-top: 2px;
}
.awesome-plugin-banner {
  margin-top: 16px;
  padding: 14px 20px;
  background: var(--osa-blue-light);
  border: 1px solid rgba(65, 154, 210, .2);
  border-radius: 8px;
  font-size: 14px;
  color: var(--osa-blue-dark);
  font-weight: 500;
  text-align: center;
}

/* ── Language Pills ── */
.awesome-lang-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.awesome-lang-pill {
  background: white;
  border: 1px solid var(--osa-border);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 13px;
  color: var(--osa-charcoal-mid);
}
.awesome-lang-pill-rtl {
  background: var(--osa-green-light);
  border-color: var(--osa-green);
  color: var(--osa-green-dark);
  font-weight: 600;
}

/* ── Stats Bar ── */
.awesome-stats-bar {
  background: var(--osa-charcoal);
  padding: 32px 48px;
  display: flex;
  justify-content: center;
  gap: 72px;
  flex-wrap: wrap;
}
.awesome-stat {
  text-align: center;
}
.awesome-stat-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 32px;
  font-weight: 600;
  color: var(--osa-green);
  line-height: 1;
}
.awesome-stat-label {
  font-size: 11px;
  color: rgba(255, 255, 255, .4);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 6px;
}
@media (max-width: 600px) {
  .awesome-stats-bar { gap: 32px; padding: 24px; }
}

/* ── Flow Diagram (dark bg context) ── */
.awesome-flow-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}
.awesome-flow-step {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 10px;
  padding: 20px 28px;
  text-align: center;
  min-width: 150px;
}
.awesome-flow-step-highlight {
  background: rgba(65, 154, 210, .15);
  border-color: rgba(65, 154, 210, .4);
}
.awesome-flow-step-icon { font-size: 24px; margin-bottom: 8px; }
.awesome-flow-step-meta {
  font-size: 10px;
  color: rgba(255, 255, 255, .4);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}
.awesome-flow-step-name { font-size: 14px; font-weight: 500; color: white; }
.awesome-flow-step-highlight .awesome-flow-step-name { color: var(--osa-blue); }
.awesome-flow-arrow {
  color: var(--osa-blue);
  font-size: 22px;
  padding: 0 10px;
  opacity: .7;
}
@media (max-width: 600px) {
  .awesome-flow-diagram { gap: 12px; }
  .awesome-flow-arrow { transform: rotate(90deg); }
  .awesome-flow-step { min-width: 120px; padding: 14px 20px; }
}

/* ── Avatars ── */
.awesome-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}
.awesome-avatar-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 20px;
}
.awesome-avatar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.awesome-avatar-name {
  font-size: 12px;
  color: var(--osa-steel);
}

/* ── Product card link ── */
.awesome-product-card-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--osa-blue-dark);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}
.awesome-product-card-link:hover {
  text-decoration: underline;
}

/* ── Tradeoffs disclaimer ── */
.awesome-tradeoffs {
  margin-top: 24px;
  font-size: 14px;
  color: var(--osa-charcoal-mid);
  line-height: 1.65;
}
.awesome-tradeoffs p {
  margin-bottom: 8px;
}

/* ── Table check/no/warn marks ── */
.awesome-table .chk { color: var(--osa-green); font-weight: 600; }
.awesome-table .no { color: var(--osa-border); }
.awesome-table .warn { color: var(--osa-orange); font-size: 12px; }

/* ── Table scroll wrapper ── */
.awesome-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Accordion (native details/summary) ── */
/* Variant A: Bordered Card */
.awesome-accordion {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--osa-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--osa-white);
}
.awesome-accordion details {
  border-bottom: 1px solid var(--osa-border);
  margin: 0;
}
.awesome-accordion details:last-child {
  border-bottom: none;
}
.awesome-accordion summary {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 28px;
  background: var(--osa-white);
  cursor: pointer;
  text-align: left;
  font-family: var(--osa-font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--osa-charcoal);
  line-height: 1.4;
  transition: background 0.2s, color 0.2s;
  list-style: none;
}
.awesome-accordion summary::-webkit-details-marker { display: none; }
.awesome-accordion summary::after {
  content: "\2715";
  font-size: 18px;
  font-weight: 400;
  color: var(--osa-blue);
  flex-shrink: 0;
  transition: transform 0.3s ease, opacity 0.2s ease;
  transform: rotate(-45deg);
}
.awesome-accordion details[open] > summary::after {
  transform: rotate(0deg);
}
.awesome-accordion summary:hover,
.awesome-accordion summary:focus {
  background: var(--osa-blue-light);
  color: var(--osa-blue-dark);
}
.awesome-accordion details[open] > summary {
  background: var(--osa-blue-light);
  color: var(--osa-blue-dark);
}
.awesome-accordion details > *:not(summary) {
  padding: 0 28px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--osa-charcoal-mid);
}
.awesome-accordion details > *:not(summary):first-of-type {
  border-top: 1px solid var(--osa-border);
  padding-top: 20px;
}
.awesome-accordion details > *:not(summary):last-child {
  padding-bottom: 24px;
  margin-bottom: 0;
}
.awesome-accordion details p + p {
  margin-top: 12px;
}
.awesome-accordion details ul {
  margin: 8px 0;
  padding-left: 20px;
}
.awesome-accordion details li {
  margin-bottom: 4px;
  font-size: 14px;
}

/* Variant B: Minimal Borderless */
.awesome-accordion-minimal {
  border: none;
  border-radius: 0;
}
.awesome-accordion-minimal details {
  border-bottom: 1px solid var(--osa-border);
}
.awesome-accordion-minimal details:first-child {
  border-top: 1px solid var(--osa-border);
}
.awesome-accordion-minimal summary {
  background: transparent;
  padding: 20px 0;
}
.awesome-accordion-minimal summary:hover,
.awesome-accordion-minimal summary:focus,
.awesome-accordion-minimal details[open] > summary {
  background: transparent;
  color: var(--osa-blue);
}
.awesome-accordion-minimal details > *:not(summary) {
  border-top: none;
  padding: 0;
}
.awesome-accordion-minimal details > *:not(summary):first-of-type {
  border-top: none;
  padding-top: 0;
}
.awesome-accordion-minimal details > *:not(summary):last-child {
  padding-bottom: 20px;
}

/* Accordion slide-down easing — JS handles animation via .awesome-accordion-content wrapper */
.awesome-accordion-content {
  overflow: hidden;
  transition: height 0.3s ease;
}

/* ==========================================================================
   Grid System
   ========================================================================== */

/* Base: 2-column equal */
.awesome-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

/* Column counts */
.awesome-grid-3col { grid-template-columns: repeat(3, 1fr); }
.awesome-grid-4col { grid-template-columns: repeat(4, 1fr); }

/* Asymmetric ratios */
.awesome-grid-60-40 { grid-template-columns: 3fr 2fr; }
.awesome-grid-40-60 { grid-template-columns: 2fr 3fr; }
.awesome-grid-66-33 { grid-template-columns: 2fr 1fr; }
.awesome-grid-33-66 { grid-template-columns: 1fr 2fr; }
.awesome-grid-70-30 { grid-template-columns: 7fr 3fr; }
.awesome-grid-30-70 { grid-template-columns: 3fr 7fr; }
.awesome-grid-75-25 { grid-template-columns: 3fr 1fr; }
.awesome-grid-25-75 { grid-template-columns: 1fr 3fr; }

/* 3-col asymmetric */
.awesome-grid-50-25-25 { grid-template-columns: 2fr 1fr 1fr; }
.awesome-grid-25-50-25 { grid-template-columns: 1fr 2fr 1fr; }
.awesome-grid-25-25-50 { grid-template-columns: 1fr 1fr 2fr; }

/* Reverse: flips column order */
.awesome-grid-reverse { direction: rtl; }
.awesome-grid-reverse > * { direction: ltr; }

/* Vertical alignment */
.awesome-grid-center { align-items: center; }
.awesome-grid-end { align-items: end; }
.awesome-grid-stretch { align-items: stretch; }

/* Gap variants */
.awesome-grid-gap-tight { gap: 24px; }
.awesome-grid-gap-wide { gap: 64px; }
.awesome-grid-gap-none { gap: 0; }

/* Column content helpers */
.awesome-grid-col {}
.awesome-grid-visual { position: relative; }

/* Image styling */
.awesome-grid-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  object-fit: cover;
}
.awesome-grid-img-shadow {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
.awesome-grid-img-border {
  border: 1px solid var(--osa-border);
}
.awesome-grid-img-rounded {
  border-radius: 16px;
}
.awesome-grid-img-screenshot {
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.awesome-grid-img-fill {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* Split heading (used inside grid columns for text+image patterns) */
.awesome-split-heading {
  font-family: var(--osa-font-heading);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--osa-charcoal);
  letter-spacing: -0.02em;
  margin: 0 0 16px 0;
}

/* Split body text */
.awesome-split-body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--osa-charcoal-mid);
  margin: 0 0 12px 0;
}
.awesome-split-body:last-child { margin-bottom: 0; }

/* Split fine print */
.awesome-split-fine {
  font-size: 13px;
  color: var(--osa-steel);
  font-style: italic;
  margin-top: 8px;
}

/* Feature check list */
.awesome-split-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 0;
}
.awesome-split-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--osa-charcoal-mid);
  line-height: 1.5;
}
.awesome-split-check i {
  color: var(--osa-green);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Dark band overrides */
.awesome-band-dark .awesome-split-heading { color: white; }
.awesome-band-dark .awesome-split-body { color: rgba(255, 255, 255, 0.65); }
.awesome-band-dark .awesome-split-fine { color: rgba(255, 255, 255, 0.4); }
.awesome-band-dark .awesome-split-check { color: rgba(255, 255, 255, 0.65); }
.awesome-band-dark .awesome-grid-img-shadow {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Mobile collapse */
@media (max-width: 768px) {
  .awesome-grid,
  .awesome-grid-3col,
  .awesome-grid-60-40,
  .awesome-grid-40-60,
  .awesome-grid-66-33,
  .awesome-grid-33-66,
  .awesome-grid-70-30,
  .awesome-grid-30-70,
  .awesome-grid-75-25,
  .awesome-grid-25-75,
  .awesome-grid-50-25-25,
  .awesome-grid-25-50-25,
  .awesome-grid-25-25-50 {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .awesome-grid-4col { grid-template-columns: 1fr 1fr; gap: 24px; }
  .awesome-grid-reverse { direction: ltr; }
  .awesome-grid-col { order: -1; }
  .awesome-split-heading { font-size: 26px; }
}
@media (max-width: 480px) {
  .awesome-grid-4col { grid-template-columns: 1fr; }
}


/* Small variants for multi-column grids */
.awesome-split-heading-sm { font-size: 20px; margin-top: 20px; }
.awesome-split-body-sm { font-size: 14px; }

/* Option tag on dark backgrounds */
.awesome-option-tag-dark {
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
}

/* Eyebrow green variant (for dark bands) */
.awesome-eyebrow-green { color: var(--osa-green); }

/* Mobile stacking: image on top */
@media (max-width: 768px) {
  .awesome-grid-visual-first { order: -2; }
}

/* ── Features page components ── */

/* Stats bar on light background */
.awesome-stats-bar-light {
  background: transparent;
  padding: 20px 0 0;
  gap: 56px;
}
.awesome-stat-num-dark {
  color: var(--osa-charcoal);
}
.awesome-stat-label-dark {
  color: var(--osa-steel);
}

/* Feature detail block (long-form feature descriptions) */
.awesome-feature-detail {
  padding: 40px 0;
  border-bottom: 1px solid #eee;
}
.awesome-feature-detail:last-child,
.awesome-feature-detail-last {
  border-bottom: none;
}
.awesome-feature-detail h3 {
  font-family: var(--osa-font-heading);
  font-size: 20px;
  font-weight: 600;
  color: var(--osa-charcoal);
  margin-bottom: 10px;
}
.awesome-feature-detail p {
  font-size: 15px;
  color: var(--osa-charcoal-mid);
  line-height: 1.75;
  max-width: 720px;
  margin-bottom: 12px;
}
.awesome-feature-detail p:last-child {
  margin-bottom: 0;
}

/* Pivot section (centered text on dark bg) */
.awesome-pivot {
  text-align: center;
}
.awesome-pivot .awesome-section-heading {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.awesome-pivot .awesome-split-body {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* Enhancement subsection */
.awesome-enhancement {
  padding: 48px 0;
  border-bottom: initial;
}
.awesome-enhancement:last-child,
.awesome-enhancement-last {
  border-bottom: none;
}
.awesome-enhancement .awesome-eyebrow {
  margin-bottom: 8px;
  color: var(--osa-blue);
}
.awesome-enhancement h4 {
  font-family: var(--osa-font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--osa-charcoal);
  margin-bottom: 16px;
}
.awesome-enhancement p {
  font-size: 13px;
  color: var(--osa-charcoal-mid);
  line-height: 1.75;
  max-width: 720px;
  margin-bottom: 0;
}
.awesome-enhancement-compact {
  padding: 32px 0 24px 0;
}

/* Screenshot placeholder */
.awesome-screenshot-placeholder {
  margin-top: 32px;
  background: var(--osa-blue-light);
  border: 1px solid var(--osa-border);
  border-radius: 12px;
  padding: 60px 40px;
  color: var(--osa-steel);
  font-size: 14px;
  font-style: italic;
  text-align: center;
}
.awesome-band-dark .awesome-screenshot-placeholder {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.3);
}

/* Before/After panels */
.awesome-before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
  max-width: 800px;
}
.awesome-ba-panel {
  border-radius: 10px;
  overflow: hidden;
}
.awesome-ba-label {
  padding: 10px 16px;
  font-family: var(--osa-font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.awesome-ba-vanilla {
  background: #f8f8f8;
  border: 1px solid #ddd;
}
.awesome-ba-vanilla .awesome-ba-label {
  background: #eee;
  color: #888;
}
.awesome-ba-awesome {
  background: var(--osa-charcoal);
}
.awesome-ba-awesome .awesome-ba-label {
  background: rgba(65, 154, 210, 0.2);
  color: var(--osa-blue);
}
.awesome-ba-body {
  padding: 20px;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--osa-steel);
  font-style: italic;
}
@media (max-width: 768px) {
  .awesome-before-after { grid-template-columns: 1fr; }
}

/* ── Spacer ── */
.awesome-spacer { height: var(--osa-s5); }

/* ── "No Surprises" alice blue band ── */
.awesome-no-surprises-band {
  background: var(--osa-blue-light);
  border-radius: 12px;
  padding: 48px;
  text-align: center;
}
.awesome-no-surprises-heading {
  font-family: var(--osa-font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--osa-charcoal);
  margin: 0 0 12px 0;
}
.awesome-no-surprises-body {
  font-size: 16px;
  color: var(--osa-charcoal-mid);
  line-height: 1.7;
  margin: 0;
}


/* ── Icon accent (large Lucide icon as visual placeholder) ── */
.awesome-icon-accent {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.awesome-icon-accent i {
  width: 120px;
  height: 120px;
  color: var(--osa-blue-light);
  stroke-width: 1;
}

/* ── Features page ── */
.awesome-grid-img-half {
  max-width: 50%;
  display: block;
  margin: 0 auto;
}

/* ── Features page: mobile screenshot ── */
img.awesome-grid-img.osticket-mobile {
  max-width: 150px;
}
@media (max-width: 768px) {
  img.awesome-grid-img.osticket-mobile {
    margin: 0 auto;
  }
}

/* ── Features page: pivot section spacing ── */
.awesome-pivot .awesome-split-body {
  margin-bottom: 24px;
}
.awesome-pivot .awesome-section-heading {
  margin-bottom: 32px;
}

/* ── Features page: "everything else" eyebrow ── */
p.awesome-eyebrow.everything-else {
  font-size: 15px;
  margin-bottom: -18px;
  padding-top: 75px;
}

/* ── Image caption ── */
.awesome-caption {
  text-align: center;
  margin-top: 12px;
  font-size: 13px;
  color: var(--osa-steel);
  font-style: italic;
}
.awesome-band-dark .awesome-caption {
  color: rgba(255, 255, 255, 0.4);
}

/* ── Desktop-only utility ── */
@media (max-width: 768px) {
  .awesome-desktop-only { display: none; }
}

/* ── Before/After Slideshow ── */
.awesome-slideshow-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}
.awesome-slideshow-panel {
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.awesome-slideshow-label {
  padding: 0 0 10px 0;
  font-family: var(--osa-font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--osa-charcoal-mid);
}
.awesome-slideshow-panel::before {
  content: "";
  display: block;
  height: 32px;
  background: #e8e8e8;
  border-bottom: initial;
  position: relative;
  background-image:
    radial-gradient(circle at 16px 50%, #ff5f57 5px, transparent 5px),
    radial-gradient(circle at 36px 50%, #febc2e 5px, transparent 5px),
    radial-gradient(circle at 56px 50%, #28c840 5px, transparent 5px);
  background-repeat: no-repeat;
  border-radius: 4px 4px 0 0;
}
.awesome-slideshow-url {
  background: #ffffff;
  border-bottom: 5px solid #e8e8e8;
  padding: 4px 16px;
  font-size: 11px;
  color: #999;
  font-family: -apple-system, system-ui, sans-serif;
  border-left: 4px solid #e8e8e8;
  border-right: 4px solid #e8e8e8;
}
.awesome-slideshow-panel {
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #e8e8e8;
  padding-bottom: 0;
}
.awesome-slideshow-awesome {
  background: white;
}
.awesome-slideshow-awesome .awesome-slideshow-label {
  color: var(--osa-blue);
}
.awesome-slideshow-frames {
  position: relative;
  overflow: hidden;
  padding: 0 4px;
  background: #e8e8e8;
}
.awesome-slideshow-frames img {
  width: 100%;
  height: auto;
  display: none;
}
.awesome-slideshow-frames img.active {
  display: block;
  animation: slideshow-fade-in 0.8s ease;
}
@keyframes slideshow-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.awesome-slideshow-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px;
}
.awesome-slideshow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: background 0.2s;
}
.awesome-slideshow-dot.active {
  background: var(--osa-blue);
}
.awesome-slideshow-awesome .awesome-slideshow-dot {
  background: rgba(0, 0, 0, 0.1);
}
.awesome-slideshow-awesome .awesome-slideshow-dot.active {
  background: var(--osa-blue);
}
.awesome-slideshow-screen-label {
  text-align: center;
  font-size: 22px;
  color: var(--osa-steel);
  margin-top: 16px;
}
@media (max-width: 768px) {
  .awesome-slideshow-compare { grid-template-columns: 1fr; }
}

/* ── Swoosh underline ── */
.awesome-swoosh-word {
  position: relative;
  display: inline-block;
}
.awesome-swoosh-word .awesome-swoosh {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 31px;
  opacity: 0.5;
}

/* ── Slideshow screen label icons ── */
.awesome-slideshow-screen-label i {
  width: 18px;
  height: 18px;
  color: var(--osa-steel);
  vertical-align: middle;
}

/* ── SHIFT+O toggle slideshow ── */
.awesome-shifto-toggle {
  position: relative;
  max-width: 400px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--osa-border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.awesome-shifto-toggle img {
  width: 100%;
  height: auto;
  display: block;
}
.awesome-shifto-toggle img:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  animation: shifto-toggle 8s ease-in-out infinite;
}
@keyframes shifto-toggle {
  0%, 45% { opacity: 1; }
  50%, 95% { opacity: 0; }
  100% { opacity: 1; }
}
.awesome-shifto-label {
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
  color: var(--osa-steel);
  font-style: italic;
}

/* ── SHIFT+O toggle centered variant ── */
.awesome-shifto-toggle-centered {
  margin: 32px auto 0;
  max-width: 500px;
}

/* ── Features page: SHIFT+O kbd style ── */
span.shift\+o {
  border: 1px solid #000000b3;
  padding: 0px 4px;
  font-weight: 600;
  letter-spacing: 1px;
}

/* ── Features page: diagnostics grid alignment ── */
.awesome-grid-center.diagnostics {
  align-items: initial;
}

/* ── Pre-footer: kill white gap before site footer ──
   The entry-content has margin-bottom: 32px (line ~116). Zeroing the band's
   own margin/padding isn't enough — we also need to cancel that 32px so the
   band sits flush with the footer. Per-page overrides (Features -100px,
   Homepage -34px) win via higher specificity for pages that want overlap. */
.awesome-band.pre-footer {
  margin-bottom: -32px;
  padding-bottom: 0;
}
.awesome-band.pre-footer > .awesome-section {
  padding-bottom: 0;
}
body.page-template-template-rebuild .site-content {
  padding-bottom: 0;
}
body.page-template-template-rebuild .site-footer {
  margin-top: 0;
}


/* ── Section divider (major gear shifts between page chapters) ── */
.awesome-divider-major {
  border: none;
  border-top: 1px solid var(--osa-border);
  margin: var(--osa-s7) auto;
  max-width: 200px;
}

/* ── Features page: GDPR screenshot ── */
.awesome-enhancement.gdpr {
  max-width: 800px;
}
.awesome-gdpr-screenshot {
  max-width: calc(100% - 32px);
  margin: 16px 0 0 32px;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* ── Platform feature grid (2-col with icons) ── */
.awesome-platform-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 48px;
  margin-top: var(--osa-s5);
}
.awesome-platform-card {
  display: flex;
  flex-direction: column;
}
.awesome-platform-icon {
  width: 97px;
  height: auto;
  margin-bottom: var(--osa-s2);
  float: right;
}
.awesome-platform-card h3 {
  font-family: var(--osa-font-heading);
  font-size: 20px;
  font-weight: 600;
  color: var(--osa-charcoal);
  margin-bottom: 10px;
}
.awesome-platform-card p {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 10px;
}
.awesome-platform-card p:last-child {
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .awesome-platform-grid { grid-template-columns: 1fr; }
}

/* ── Features page: pre-footer gap fix ── */
.gb-container.gb-container-ft16a1c2.gb-container.awesome-band.awesome-bg-charcoal.awesome-band-dark.pre-footer {
  margin-bottom: -100px;
}

/* ==========================================================================
   Homepage
   ========================================================================== */

/* ── Hero ── */
.awesome-hero {
  padding-top: var(--osa-s4); 
  padding-bottom: 64px;
}
.awesome-hero:first-child {
  margin-top: 0;
}
.awesome-hero-title {
  font-family: var(--osa-font-heading);
  font-size: 52px;
  line-height: 1.08;
  font-weight: 600;
  color: var(--osa-charcoal);
  letter-spacing: -0.02em;
  max-width: 800px;
  margin: 0;
}
.awesome-hero-subtitle {
  font-size: 17px;
  color: var(--osa-charcoal-mid);
  line-height: 1.65;
  margin-top: 48px;
  max-width: 640px;
}
.awesome-hero-subtitle strong { font-weight: 600; }

/* Hero cream panel */
.awesome-hero-panel {
  background: var(--osa-cream);
  border-radius: 12px;
  padding: 48px;
  margin-top: 64px;
  margin-bottom: 48px;
  margin-left: -50px;
  margin-right: -50px;
}
.awesome-hero-split {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}
.awesome-hero-split-text { flex: 1; min-width: 0; }
.awesome-hero-split-text p {
  font-size: 16px;
  color: var(--osa-charcoal-mid);
  line-height: 1.75;
  margin-bottom: 16px;
}
.awesome-hero-split-text p:last-child { margin-bottom: 0; }
.awesome-hero-split-text strong { font-weight: 600; }
.awesome-hero-split-visual { flex: 0 0 360px; }

/* Login slider */
.awesome-login-slider {
  position: relative;
  width: 360px;
  max-width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  aspect-ratio: 4 / 3;
}
.awesome-login-slider img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .25s ease;
}
.awesome-login-slider img.active { opacity: 1; }

/* Rotating word */
.awesome-rotating-word {
  display: inline-block;
  position: relative;
  min-width: 180px;
  text-align: left;
  vertical-align: baseline;
}
.awesome-rotating-word .word {
  display: inline-block;
  position: absolute;
  left: 0; right: 0;
  opacity: 0;
  transform: translateY(12px);
  animation: awesomeWordCycle 12s ease-in-out infinite;
  color: var(--osa-charcoal);
}
.awesome-rotating-word .word:nth-child(1) { animation-delay: 0s; }
.awesome-rotating-word .word:nth-child(2) { animation-delay: 3s; }
.awesome-rotating-word .word:nth-child(3) { animation-delay: 6s; }
.awesome-rotating-word .word:nth-child(4) { animation-delay: 9s; }
.awesome-rotating-word .word:first-child { position: relative; }
@keyframes awesomeWordCycle {
  0%    { opacity: 0; transform: translateY(12px); }
  3%    { opacity: 1; transform: translateY(0); }
  22%   { opacity: 1; transform: translateY(0); }
  25%   { opacity: 0; transform: translateY(-12px); }
  100%  { opacity: 0; transform: translateY(-12px); }
}
.awesome-rotating-word .awesome-swoosh {
  position: absolute;
  bottom: -7px;
  left: 43%;
  transform: translateX(calc(-50% - 10px));
  width: 85%;
  height: 12px;
  opacity: 0.5;
}

/* Stack line */
.awesome-hero-stack-line {
  font-family: var(--osa-font-heading);
  font-weight: 500;
  font-size: 22px;
  color: var(--osa-charcoal);
  text-align: center;
  margin: 48px 0;
  padding: 48px 24px;
  background: var(--osa-blue-light);
  border: 1px solid var(--osa-border);
  border-radius: 10px;
}
.awesome-hero-divider {
  border: none;
  border-top: 1px solid var(--osa-border);
  max-width: 80px;
  margin: 48px auto 24px auto;
}

/* Hero bottom ("Not a sysadmin?") */
.awesome-hero-bottom {
  display: flex;
  gap: 16px;
  align-items: center;
}
.awesome-hero-bottom-visual { flex: 0 0 260px; }
.awesome-hero-bottom-visual img {
  width: 100%;
  height: auto;
  max-width: 212px;
  padding-top: 30px;
}
.awesome-hero-bottom-text { flex: 1; min-width: 0; }
.awesome-hero-bottom-text h2 {
  font-family: var(--osa-font-heading);
  font-size: 32px;
  line-height: 1.18;
  font-weight: 600;
  color: var(--osa-charcoal);
  margin-bottom: 16px;
}
.awesome-hero-bottom p {
  font-size: 16px;
  color: var(--osa-charcoal-mid);
  line-height: 1.75;
  margin-bottom: 16px;
}
.awesome-hero-bottom p:last-child { margin-bottom: 0; }

/* nobr utility */
.awesome-nobr { white-space: nowrap; }

/* ── Stats panel ── */
.awesome-hp-stats {
  padding-top: 48px; padding-bottom: 48px;
  text-align: center;
}
.awesome-hp-stats-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--osa-blue);
  margin-bottom: 16px;
}
.awesome-hp-stats-row {
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  margin-top: 2em;
}
.awesome-hp-stat { text-align: center; }
.awesome-hp-stat-num {
  font-family: var(--osa-font-heading);
  font-size: 44px;
  font-weight: 600;
  color: var(--osa-green);
  line-height: 1;
}
.awesome-hp-stat-label {
  font-size: 12px;
  color: rgba(69, 76, 86, 0.7);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 6px;
  font-weight: 500;
}

/* ── Trust strip ── */
.awesome-hp-trust {
  padding-top: 96px; padding-bottom: 96px;
  text-align: center;
}
.awesome-hp-trust-eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(107, 114, 128, 0.71);
  margin-bottom: 40px;
  text-align: center;
}
.awesome-hp-trust.awesome-section {
  max-width: none !important;
  padding-left: 0;
  padding-right: 0;
}

.awesome-hp-trust .oa-marquee-track img:hover {
  opacity: 1 !important;
}
.oa-marquee-row.oa-marquee-row--left,
.oa-marquee-row.oa-marquee-row--right {
  zoom: 1.5;
}
.oa-marquee-row:hover .oa-marquee-track {
  animation-play-state: running;
}

/* ── Section header (logo + text, for Platform + Enhancements) ── */
.awesome-hp-section-header {
  margin-bottom: 48px;
  display: flex;
  gap: 48px;
  align-items: flex-start;
}
.awesome-hp-section-header-logo {
  flex: 0 0 200px;
  width: 200px;
  height: auto;
  margin-top: 32px;
}
.awesome-hp-section-header-logo-sm {
  flex: 0 0 122px;
  width: 122px;
}
.awesome-hp-section-header > div { flex: 1; min-width: 0; }

/* osTicket swoosh (wider than default) */
span.awesome-osticket-swoosh.awesome-swoosh-word .awesome-swoosh {
  bottom: -7px;
  left: 53%;
  width: 101%;
  height: 15px;
}

/* ── Platform card grid ── */
.awesome-hp-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.awesome-hp-card {
  background: white;
  border: 1px solid var(--osa-border);
  border-radius: 10px;
  padding: 24px;
}
.awesome-hp-card h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--osa-charcoal);
  margin-bottom: 8px;
}
.awesome-hp-card p {
  font-size: 15px;
  color: var(--osa-charcoal-mid);
  line-height: 1.65;
  margin: 0;
}

/* ── Homepage pivot ── */
.awesome-hp-pivot {
  text-align: center;
}
.awesome-hp-pivot .awesome-section-heading {
  color: white;
  max-width: 700px;
  margin: 0 auto 16px;
}
.awesome-hp-pivot p {
  color: rgba(255,255,255,.65);
  font-size: 16px;
  line-height: 1.75;
  max-width: 640px;
  margin: 0 auto 16px;
}
.awesome-hp-pivot-img {
    max-width: 350px;
    margin: 64px auto 0;
    display: block;
    width: 100%;
}

/* ── Enhancements feature grid items (with decorative bg images) ── */
.awesome-hp-feature-item {
  min-height: 300px;
  padding: 48px;
}
.awesome-hp-fi-responsive {
  background-image: url(/wp-content/uploads/2026/04/hp-responsive.png);
  background-size: 126px;
  background-repeat: no-repeat;
  background-position: bottom right;
}
.awesome-hp-fi-shortcuts {
  background-image: url(/wp-content/uploads/2026/04/hp-keyboard.png);
  background-size: 244px;
  background-repeat: no-repeat;
  background-position: bottom 41px center;
}
.awesome-hp-fi-branding {
  background-image: url(/wp-content/uploads/2026/04/hp-color-theme.png);
  background-size: 126px;
  background-repeat: no-repeat;
  background-position: bottom 24px left 48px;
}
.awesome-hp-fi-priorities {
  background-image: url(/wp-content/uploads/2026/04/hp-priority.png);
  background-size: 187px;
  background-repeat: no-repeat;
  background-position: bottom 24px left 37px;
}
.awesome-hp-fi-plugins {
  background-image: url(/wp-content/uploads/2026/04/hp-download.svg);
  background-size: 80px;
  background-repeat: no-repeat;
  background-position: bottom 13px right 48px;
}
.awesome-hp-fi-languages {
  background-image: url(/wp-content/uploads/2026/04/hp-languages.svg);
  background-size: 93px;
  background-repeat: no-repeat;
  background-position: bottom 24px right 47px;
}
.awesome-hp-fi-css-editor {
  background-image: url(/wp-content/uploads/2026/04/hp-css-editor.svg);
  background-size: auto;
  background-repeat: no-repeat;
  background-position: bottom 10px left 89px;
}
.awesome-hp-fi-avatars {
  background-image: url(/wp-content/uploads/2026/04/hp-avatars.png);
  background-size: 231px;
  background-repeat: no-repeat;
  background-position: bottom 20px left 48px;
}

/* ── Dark mode card ── */
.awesome-hp-fi-darkmode {
  transition: background 0.4s ease;
  position: relative;
}
.awesome-hp-fi-darkmode h3,
.awesome-hp-fi-darkmode p {
  transition: color 0.4s ease;
}
.awesome-hp-fi-darkmode:not(.awesome-dm-light) {
  background: #444753;
}
.awesome-hp-fi-darkmode:not(.awesome-dm-light) h3 { color: #fff; }
.awesome-hp-fi-darkmode:not(.awesome-dm-light) p { color: #fff; }
.awesome-hp-fi-darkmode.awesome-dm-light {
  background: white;
}
.awesome-hp-fi-darkmode.awesome-dm-light .awesome-dm-toggle {
  background: var(--osa-border);
}
.awesome-hp-fi-darkmode.awesome-dm-light .awesome-dm-slider {
  left: 2px;
}
.awesome-dm-toggle {
  position: absolute;
  bottom: 20px;
  right: 48px;
  width: 52px;
  height: 28px;
  background: var(--osa-blue);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.3s ease;
  border: none;
  padding: 0;
}
.awesome-dm-slider {
  position: absolute;
  top: 2px;
  left: 26px;
  width: 24px;
  height: 24px;
  background: white;
  border-radius: 50%;
  transition: left 0.3s ease;
}

/* ── Peter quote ── */
.awesome-peter-quote {
  border-left: 3px solid var(--osa-blue);
  padding: 16px 24px;
  margin: 96px 0 0 48px;
}
.awesome-peter-quote p {
  font-size: 17px;
  font-style: italic;
  color: var(--osa-charcoal);
  line-height: 1.65;
  margin: 0;
}
.awesome-peter-quote cite {
  display: block;
  font-size: 14px;
  font-style: normal;
  color: var(--osa-charcoal-mid);
  margin-top: 8px;
}

/* Features link */
.awesome-features-link {
  display: inline-block;
  margin-top: 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--osa-blue-dark);
  text-decoration: none;
  float: right;
}
.awesome-features-link:hover { text-decoration: underline; }

/* ── Stack section ── */
.awesome-hp-stack { overflow: hidden; }
.awesome-hp-stack p {
  font-size: 16px;
  color: var(--osa-charcoal-mid);
  line-height: 1.75;
  margin-bottom: 16px;
}
.awesome-hp-stack p:last-child { margin-bottom: 0; }
.awesome-hp-stack a {
  color: var(--osa-blue-dark);
  font-weight: 600;
  text-decoration: none;
}
.awesome-hp-stack a:hover { text-decoration: underline; }
.awesome-hp-stack-img {
  float: right;
  max-width: 280px;
  width: 40%;
  margin: 0 0 24px 32px;
}

/* ── Pricing section ── */
.awesome-hp-pricing { max-width: 720px; }
.awesome-hp-pricing p {
  font-size: 16px;
  color: var(--osa-charcoal-mid);
  line-height: 1.75;
  margin-bottom: 16px;
}
.awesome-hp-pricing p:last-child { margin-bottom: 0; }

/* ── Footer CTA ── */
.awesome-hp-footer-cta-panel {
  background: var(--osa-cream);
  border-radius: 12px;
  padding: 64px 48px;
  text-align: center;
  box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.12);
}
.awesome-hp-footer-cta-panel p {
  color: var(--osa-charcoal-mid);
  font-size: 16px;
  margin-bottom: 24px;
}
.awesome-hp-footer-cta-panel .awesome-btn-group {
  justify-content: center;
  margin-top: 0;
}
.awesome-hp-pricing-note {
  margin-top: 24px;
  color: #8a929d;
  font-size: 14px;
}

/* ── Boardroom ── */
.awesome-hp-boardroom {
  text-align: center;
}
.awesome-hp-boardroom p.awesome-eyebrow {
	color: var(--osa-green);
    font-family: 'DM Sans', sans-serif;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: initial;
}
.awesome-hp-boardroom h2 {
  font-family: var(--osa-font-heading);
  font-size: 34px;
  line-height: 1.18;
  font-weight: 600;
  color: white;
  margin-bottom: 16px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
h2 .money {
    text-shadow: 2px 2px 2px #2b3037;
}
.awesome-hp-boardroom p {
  color: rgba(255,255,255,.55);
  font-size: 16px;
  margin-bottom: 24px;
}
.awesome-hp-boardroom-fine {
    font-size: 12px;
    color: rgb(255 255 255 / 45%);
    max-width: 500px;
    margin: 24px auto 0 auto;
    font-family: system-ui;
}

/* White outline button */
.awesome-btn-white-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--osa-font-heading);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  border: 2px solid rgba(255,255,255,.5);
  color: white;
  padding: 13px 28px;
  border-radius: 4px;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
  transition: border-color 0.2s;
}
.awesome-btn-white-outline:hover {
  border-color: white;
  color: white;
}

/* Button pulse animations */
@keyframes awesome-pulse-orange { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }
@keyframes awesome-pulse-ghost { 0%,100%{transform:scale(1)} 50%{transform:scale(1.02)} }
.awesome-btn-orange:hover { animation: awesome-pulse-orange .35s ease; }
.awesome-btn-grey:hover { animation: awesome-pulse-ghost .35s ease; }
.awesome-btn-white-outline:hover { animation: awesome-pulse-ghost .35s ease; }

/* ── Homepage pre-footer gap fix ── */
.hp-boardroom-band.pre-footer {
  margin-bottom: -34px;
}

/* ── Homepage mobile (tablet) ── */
@media (max-width: 768px) {
  /* Hero */
  .awesome-hero { padding-top: 64px; padding-bottom: 48px; }

  .awesome-hero-subtitle { margin-top: 24px; font-size: 16px; }
  .awesome-hero-panel { padding: 24px; margin: 32px 0; margin-left: 0; margin-right: 0; }
  .awesome-hero-split { flex-direction: column; gap: 24px; }
  .awesome-hero-split-visual { flex: none; width: 100%; max-width: 300px; margin: 0 auto; }
  .awesome-login-slider { width: 100%; }
  .awesome-rotating-word { min-width: 100px; }
  .awesome-hero-stack-line { font-size: 16px; padding: 24px 16px; }
  .awesome-hero-stack-line .awesome-nobr { white-space: normal; }
  .awesome-hero-divider { margin: 24px auto 16px auto; }
  .awesome-hero-bottom { flex-direction: column; text-align: center; align-items: stretch; }
  .awesome-hero-bottom-visual { flex: none; width: 160px; margin: 0 auto; }
  .awesome-hero-bottom-visual img { padding-top: 0; }
  .awesome-hero-bottom-text h2 { font-size: 26px; }

  /* Section headings — system-wide mobile size */
  .awesome-section-heading { font-size: 24px; }

  /* Stats */
  .awesome-hp-stats-row { gap: 32px; }
  .awesome-hp-stat-num { font-size: 36px; }

  /* Trust strip: kill the zoom on mobile */
  .oa-marquee-row { zoom: 1; }
  .awesome-hp-trust { padding-top: 64px; padding-bottom: 64px; }

  /* Section headers */
  .awesome-hp-section-header { flex-direction: column; align-items: center; text-align: center; gap: 24px; }
  .awesome-hp-section-header-logo { margin-top: 0; flex: none; width: 120px; }
  .awesome-hp-section-header-logo-sm { flex: none; width: 80px; }
  .awesome-hp-section-header .awesome-body { margin-left: auto; margin-right: auto; }

  /* Platform cards */
  .awesome-hp-card-grid { grid-template-columns: 1fr; }

  /* Enhancement feature items */
  .awesome-hp-feature-item { min-height: auto; padding: 24px 24px 130px; }
  .awesome-hp-fi-responsive { background-size: 100px; background-position: bottom 12px right 16px; }
  .awesome-hp-fi-shortcuts { background-size: 170px; background-position: bottom 20px center; }
  .awesome-hp-fi-branding { background-size: 100px; background-position: bottom 12px left 20px; }
  .awesome-hp-fi-priorities { background-size: 130px; background-position: bottom 12px left 20px; }
  .awesome-hp-fi-darkmode { padding-bottom: 64px; }
  .awesome-dm-toggle { bottom: 16px; right: 20px; }
  .awesome-hp-fi-plugins { background-size: 60px; padding-bottom: 100px; background-position: bottom 12px right 20px; }
  .awesome-hp-fi-languages { background-size: 70px; padding-bottom: 100px; background-position: bottom 12px right 20px; }
  .awesome-hp-fi-css-editor { background-size: 200px; padding-bottom: 100px; background-position: bottom 0 center; }
  .awesome-hp-fi-avatars { background-size: 170px; background-position: bottom 12px left 20px; }

  /* Stack floated image */
  .awesome-hp-stack-img { float: none !important; display: block !important; width: 50% !important; max-width: 180px !important; margin: 0 auto 24px auto !important; }

  /* Peter quote */
  .awesome-peter-quote { margin-left: 0; margin-top: 48px; }

  /* Pricing */
  .awesome-hp-pricing p { font-size: 15px; }

  /* Footer CTA */
  .awesome-hp-footer-cta-panel { padding: 32px 24px; }
  .awesome-hp-footer-cta-panel .awesome-btn-group { flex-direction: column; align-items: center; }
  .awesome-hp-pricing-note { font-size: 13px; }

  /* Boardroom */
  .awesome-hp-boardroom { padding: 64px 0 48px; }
  .awesome-hp-boardroom h2 { font-size: 26px; }

  /* Pivot */
  .awesome-hp-pivot-img { max-width: 245px; }
  .awesome-hp-pivot p { font-size: 15px; }
}

/* ── Homepage mobile (small phones, 480px and below) ── */
@media (max-width: 480px) {
  .awesome-hero { padding-top: 48px; padding-bottom: 32px; }
  .awesome-hero-subtitle { font-size: 15px; margin-top: 20px; }
  .awesome-hero-panel { padding: 20px; }
  .awesome-hero-split-text p { font-size: 15px; }
  .awesome-hero-stack-line { font-size: 14px; padding: 20px 14px; margin: 32px 0; }
  .awesome-hero-divider { margin: 20px auto 12px auto; }
  .awesome-hero-bottom-text h2 { font-size: 22px; }
  .awesome-hero-bottom p { font-size: 15px; }

  .awesome-section-heading { font-size: 22px; }

  .awesome-hp-stat-num { font-size: 32px; }
  .awesome-hp-stats-row { gap: 24px; }

  .awesome-hp-section-header-logo { width: 100px; }

  .awesome-hp-card h3 { font-size: 16px; }
  .awesome-hp-card p { font-size: 14px; }

  .awesome-hp-feature-item { padding: 20px 20px 120px; }
  .awesome-hp-fi-shortcuts { background-size: 140px; }
  .awesome-hp-fi-priorities { background-size: 110px; }
  .awesome-hp-fi-css-editor { background-size: 180px; padding-bottom: 90px; }
  .awesome-hp-fi-avatars { background-size: 140px; }

  .awesome-peter-quote { padding: 12px 16px; }
  .awesome-peter-quote p { font-size: 15px; }

  .awesome-hp-pricing p { font-size: 14px; }

  .awesome-hp-boardroom h2 { font-size: 22px; }
  .awesome-hp-pivot-img { max-width: 200px; }
}



/* ==========================================================================
   Footer
   ========================================================================== */

/* GP widget wrappers — reset */
#footer-widgets .footer-widgets-container {
    padding: 0;
}
.footer-widgets {
  background: var(--osa-charcoal);
}
.site-footer,
.site-info {
  background: var(--osa-charcoal);
  color: rgba(255, 255, 255, 0.65);
}
.site-footer .widget {
  margin: 0;
  padding: 0;
}
.footer-widgets .inside-footer-widgets {
  padding: 0;
}

/* Footer grid */
.oa-footer-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 32px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 56px 20px;
  box-sizing: border-box;
}


/* Column headings */
.footer-col-heading {
  font-family: var(--osa-font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--osa-white);
  margin: 0 0 12px;
  padding: 0;
}

/* Column links */
.footer-col-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col-links li {
  line-height: 22px;
  margin-bottom: 22px;
}
.footer-col-links li:last-child {
  margin-bottom: 0;
}
.widget ul.footer-col-links li {
  margin-bottom: 0;
}
.footer-col-links a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.15s;
}
.footer-col-links a:hover {
  color: var(--osa-white);
}

/* Accent links */
.footer-link-green {
  color: var(--osa-green) !important;
}
.footer-link-green:hover {
  color: var(--osa-green-dark) !important;
}
.footer-link-orange {
  color: var(--osa-orange) !important;
  font-weight: 600;
  display: inline-block;
}
.footer-link-orange:hover {
  color: var(--osa-orange-dark) !important;
}
.footer-link-blue {
  color: var(--osa-blue) !important;
}
.footer-link-blue:hover {
  color: var(--osa-blue-dark) !important;
}

/* Copyright bar */
.footer-bar-align-center .footer-bar {
    margin-bottom: 0;
}
.inside-site-info {
  padding: 0 0 48px 0;
}
.site-info a {
  color: var(--osa-blue);
}
.site-info a:hover,
.site-info a:focus {
  color: var(--osa-blue-dark);
}
.copyright-bar {
    color: rgba(255, 255, 255, 0.65);
    margin-top: -14px;
}

/* Secondary heading spacing (paired categories at 6col) */
.footer-col-secondary {
  margin-top: 34px;
}

/* Below 780px: vertical list — heading then inline links */
@media (max-width: 779px) {
  .oa-footer-grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  .oa-footer-col {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  .footer-col-secondary {
    margin-top: 0;
  }
  .footer-col-heading {
    margin-bottom: 10px;
  }
  .footer-col-links {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
  }
  .footer-col-links li {
    margin: 0;
    line-height: 2.2;
  }
  .footer-col-links li:not(:last-child)::after {
    content: "\00b7";
    color: rgba(255, 255, 255, 0.25);
    margin: 0 10px;
  }
}

/* ── Header gutter override ── */
.inside-header,
body.page-template-template-rebuild .inside-header {
  padding: 20px;
  max-width: 1240px;
  margin: 0 auto;
}

/* ── Breadcrumbs gutter override ── */
.oa-breadcrumbs {
  max-width: 1240px;
}

/* ── #content gutter override ── */
#content {
  max-width: 1240px;
  margin: 0 auto;
}