/* ============================================================================
   UNIKABIZ — components.css
   Component Library (Prompt 01 scope: buttons, cards, badges, forms, layout,
   typography helpers, gold accents, skeletons, scroll-reveal, pull-quote,
   accordion). Navigation & footer components are built separately in
   Prompt 02.
   ----------------------------------------------------------------------------
   Load order on every page: style.css -> base.css -> components.css
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. BUTTONS
--------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  border: none;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: none;
}
.btn-primary:hover {
  background: var(--color-primary-hover);
  box-shadow: var(--shadow-glow);
}
.btn-primary:active {
  background: var(--color-primary-active);
}

.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}
.btn-secondary:hover {
  background: var(--color-primary-highlight);
}

.btn-ghost {
  background: transparent;
  border: none;
  color: var(--color-primary);
  padding-inline: var(--space-2);
}
.btn-ghost:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  min-height: 36px;
}

.btn-lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
  min-height: 52px;
}

.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   2. CARDS
--------------------------------------------------------------------------- */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  padding: var(--space-6);
}

.card-hover {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Featured card — the only card variant carrying the gold accent treatment.
   Reserve for the single card you want to draw attention to (recommended
   plan, highlighted service) so the accent stays meaningful. */
.card-featured {
  background: var(--color-primary-highlight);
  border: 1px solid var(--color-primary);
}

/* ---------------------------------------------------------------------------
   3. BADGES
--------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
}

.badge-primary {
  color: var(--color-primary);
  background: var(--color-primary-highlight);
}

.badge-muted {
  color: var(--color-text-muted);
  background: var(--color-surface-offset);
}

.badge-sm {
  padding: 0.125rem var(--space-2);
  font-size: 0.6875rem;
}

/* ---------------------------------------------------------------------------
   4. FORM ELEMENTS
--------------------------------------------------------------------------- */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-family: var(--font-body);
  color: var(--color-text);
}
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-faint);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}

.form-textarea {
  min-height: 140px;
  resize: vertical;
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239a9895' stroke-width='1.5' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
}

/* ---------------------------------------------------------------------------
   5. LAYOUT
--------------------------------------------------------------------------- */
.section {
  padding-block: clamp(var(--space-8), 6vw, var(--space-24));
}

.container {
  max-width: var(--content-default);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.container-wide {
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.container-narrow {
  max-width: var(--content-narrow);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* ---------------------------------------------------------------------------
   6. TYPOGRAPHY HELPERS
--------------------------------------------------------------------------- */
.display-text {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 900;
  line-height: 1.05;
  color: var(--color-text);
}

.heading-xl {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-text);
}

.heading-lg {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
}

.heading-md {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
}

.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* ---------------------------------------------------------------------------
   7. GOLD ACCENTS
--------------------------------------------------------------------------- */
.gold-line {
  width: 48px;
  height: 2px;
  background: var(--color-primary);
  display: block;
  margin-block: var(--space-4);
}

.gold-gradient-text {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gold-dot {
  width: 8px;
  height: 8px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  display: inline-block;
}

/* ---------------------------------------------------------------------------
   8. SKELETON LOADERS
--------------------------------------------------------------------------- */
.skeleton {
  background: linear-gradient(90deg, var(--color-surface-offset) 25%, var(--color-surface-dynamic) 50%, var(--color-surface-offset) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ---------------------------------------------------------------------------
   9. SCROLL REVEAL
   Triggered by IntersectionObserver in nav.js (Prompt 02): adds/removes
   the .visible class as elements enter the viewport.
--------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------------------------------------------------
   10. PULL QUOTE
--------------------------------------------------------------------------- */
.pull-quote {
  border-left: 3px solid var(--color-primary);
  padding: var(--space-4) var(--space-6);
  background: var(--color-surface-offset);
  font-size: var(--text-lg);
  font-style: italic;
  margin-inline: -10%;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
/* QA fix (Prompt 16 mobile audit): the -10% bleed margin above pushed the
   quote past the viewport edge on narrow screens, causing horizontal
   scroll. Remove the bleed below the point where a 65ch reading column
   has already shrunk to near-viewport-width. */
@media (max-width: 640px) {
  .pull-quote { margin-inline: 0; }
}

/* ---------------------------------------------------------------------------
   11. ACCORDION
--------------------------------------------------------------------------- */
.accordion-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  padding: var(--space-4) 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-text);
  background: none;
  border: none;
}

.accordion-trigger .accordion-chevron {
  flex-shrink: 0;
  transition: transform var(--transition-smooth);
}
.accordion-trigger.open .accordion-chevron {
  transform: rotate(180deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-smooth);
}
.accordion-content.open {
  max-height: fit-content;
}

/* Wrapper for a list of accordion items (e.g. FAQ) — each item separated by
   a hairline divider, last item's divider omitted. */
.faq-list {
  display: flex;
  flex-direction: column;
}
.accordion-item {
  border-bottom: 1px solid var(--color-divider);
}
.accordion-item:last-child {
  border-bottom: none;
}

/* ---------------------------------------------------------------------------
   12. SITE HEADER / NAVIGATION (Prompt 02)
--------------------------------------------------------------------------- */

/* --header-height keeps page content (e.g. #main-content padding-top) in
   sync with the fixed header's actual rendered height. Referenced by page
   templates built in later prompts; defined once here as the single source
   of truth. */
:root {
  --header-height: 76px;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--transition-smooth), border-bottom-color var(--transition-smooth);
}
.site-header.nav-scrolled {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-divider);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
}

.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--color-text);
}

/* --text-lg dips below the 24px Cabinet-Grotesk threshold on small
   viewports (its clamp() floor is 18px) confirmed in Prompt 01 QA, so the
   wordmark uses Satoshi Bold rather than Cabinet Grotesk. Visual weight is
   preserved via font-weight 800 + tight letter-spacing.
   Pierre: flag if you'd rather carve out a logo-only exception to the
   24px rule instead \u2014 easy one-line swap back to var(--font-display). */
/* Logo redesign (best practice, wordmark-only): the standalone angular-U
   icon was removed because it sat next to a wordmark that itself starts
   with "U", reading visually as "U UNIKABIZ". Brand gold now lives on the
   leading letter of the wordmark itself \u2014 a single, self-contained mark
   with zero duplication, consistent at any size, and easier to maintain
   (no SVG to keep in sync across 17 pages). */
.nav-wordmark {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
}

.nav-wordmark .u-accent {
  color: var(--color-primary);
}

.nav-links {
  display: flex;
  list-style: none;
  gap: var(--space-6);
  align-items: center;
}

.nav-link {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
  transition: color var(--transition-interactive);
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transition: transform var(--transition-interactive);
}
.nav-link:hover { color: var(--color-text); }
.nav-link:hover::after,
.nav-active::after { transform: scaleX(1); }
.nav-active { color: var(--color-text); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.nav-theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-interactive);
}
.nav-theme-toggle:hover { color: var(--color-text); }

/* ---------------------------------------------------------------------------
   12b. LANGUAGE SWITCHER (EN | FR)
   Manual-only switching — no auto-detect/redirect. Each instance is
   hand-wired per page to the exact translated (or English) counterpart URL.
--------------------------------------------------------------------------- */
.lang-switch {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.lang-switch-link {
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: color var(--transition-interactive), background var(--transition-interactive);
}
.lang-switch-link:hover { color: var(--color-text); background: var(--color-surface-dynamic); }
.lang-switch-link.lang-active {
  color: var(--color-primary);
  cursor: default;
  pointer-events: none;
}
.lang-switch-sep {
  color: var(--color-text-faint);
  font-size: var(--text-xs);
}

/* Mobile menu variant — larger touch targets, sits above the nav link list
   with a divider so it reads as a distinct, persistent control. */
.mobile-menu .lang-switch {
  font-size: var(--text-sm);
  gap: var(--space-2);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.mobile-menu .lang-switch-link {
  padding: var(--space-2) var(--space-3);
}

/* ---------------------------------------------------------------------------
   13. RESOURCES DROPDOWN
--------------------------------------------------------------------------- */
.nav-dropdown {
  position: relative;
}
.nav-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.dropdown-chevron {
  transition: transform var(--transition-interactive);
}
.nav-dropdown.open .dropdown-chevron {
  transform: rotate(180deg);
}
.dropdown-menu {
  position: absolute;
  top: calc(100% + var(--space-3));
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  min-width: 180px;
  list-style: none;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity var(--transition-interactive), transform var(--transition-interactive);
}
.nav-dropdown.open .dropdown-menu {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}
.dropdown-link {
  display: block;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.dropdown-link:hover { background: var(--color-surface-dynamic); color: var(--color-text); }
.dropdown-link.nav-active { color: var(--color-primary); }

/* ---------------------------------------------------------------------------
   14. MOBILE NAVIGATION
--------------------------------------------------------------------------- */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--transition-interactive), opacity var(--transition-interactive);
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  padding: calc(var(--space-16) + var(--space-8)) var(--space-8) var(--space-8);
  flex-direction: column;
  z-index: 99;
  overflow-y: auto;
}
.mobile-menu ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.mobile-menu a {
  font-size: var(--text-lg);
  color: var(--color-text);
  text-decoration: none;
  display: block;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
}
.mobile-menu a.nav-active { color: var(--color-primary); }

/* Locks background scroll while the mobile menu overlay is open. */
body.nav-open {
  overflow: hidden;
}

@media (max-width: 768px) {
  .nav-links,
  .nav-actions .btn,
  .nav-actions .lang-switch {
    display: none;
  }
  .nav-hamburger {
    display: flex;
  }
  .mobile-menu.open {
    display: flex;
  }
}

/* ---------------------------------------------------------------------------
   15. SITE FOOTER (Prompt 02)
--------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-16);
  margin-top: var(--space-24);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--space-12);
  padding-bottom: var(--space-12);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.footer-tagline {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}
.footer-location {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.footer-socials {
  display: flex;
  gap: var(--space-4);
}
.footer-socials a {
  color: var(--color-text-muted);
  transition: color var(--transition-interactive);
}
.footer-socials a:hover { color: var(--color-primary); }

/* text-sm + weight 600 keeps this well under the 24px display-font
   threshold, so it correctly stays on --font-body already \u2014 no override
   needed. Declared explicitly to prevent accidental drift later. */
.footer-heading {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-4);
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer-col a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-interactive);
}
.footer-col a:hover { color: var(--color-text); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-divider);
}
.footer-bottom-links {
  display: flex;
  gap: var(--space-6);
}
.footer-bottom-links a {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-decoration: none;
}
.footer-bottom-links a:hover { color: var(--color-text-muted); }

@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom {
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
  }
}

/* ---------------------------------------------------------------------------
   16. TICKER / MARQUEE (Prompt 03 — Home Page)
   Infinite horizontal scroll of proof-point items. The track holds the item
   list TWICE (duplicated in the HTML) so translateX(-50%) loops seamlessly
   without a visible jump/reset.
--------------------------------------------------------------------------- */
.ticker-section {
  background: var(--color-surface);
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  padding-block: var(--space-4);
  overflow: hidden;
}
.ticker-track {
  display: flex;
  gap: var(--space-8);
  animation: ticker 30s linear infinite;
  white-space: nowrap;
  width: max-content;
}
.ticker-item {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding-right: var(--space-8);
  border-right: 1px solid var(--color-divider);
}
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* Respect reduced-motion preference: freeze the ticker instead of forcing
   continuous motion on users who've asked the OS to minimize it. */
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

/* ---------------------------------------------------------------------------
   17. PROCESS STEPS (Prompt 03 — Home Page)
   Connecting gold gradient line drawn behind the 3 numbered step columns.
--------------------------------------------------------------------------- */
.process-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-8);
  position: relative;
}
.process-grid::before {
  content: '';
  position: absolute;
  top: 2.5rem;
  left: 16%;
  right: 16%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
}
.process-step {
  position: relative;
  text-align: center;
}
.process-step-number {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 900;
  color: var(--color-text-faint);
  display: block;
  line-height: 1;
  background: var(--color-bg);
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------------------
   18. SERVICE PILLARS (Prompt 03 — Home Page)
--------------------------------------------------------------------------- */
.pillars-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
.pillars-grid-3 {
  grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 1100px) {
  .pillars-grid-3 { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------------------
   19. AI PLAYBOOK / BOOK GRID (Prompt 03 — Home Page)
--------------------------------------------------------------------------- */
.playbook-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-12);
  align-items: center;
}
.book-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-4);
}
.book-grid img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-smooth);
}
.book-grid img:hover {
  transform: scale(1.04);
}

/* ---------------------------------------------------------------------------
   20. TESTIMONIALS (Prompt 03 — Home Page)
--------------------------------------------------------------------------- */
.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-6);
}
.testimonial-stars {
  color: var(--color-primary);
  margin-bottom: var(--space-3);
  letter-spacing: 2px;
}
.testimonial-cite {
  font-style: normal;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text);
  display: block;
}
.testimonial-cite span {
  display: block;
  font-weight: 400;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}

/* ---------------------------------------------------------------------------
   21. HERO (Prompt 03 — Home Page)
--------------------------------------------------------------------------- */
.hero-section {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding-top: calc(var(--header-height) + var(--space-8));
  padding-bottom: var(--space-16);
  background: radial-gradient(ellipse 80% 60% at 60% 40%, var(--gradient-hero-inner) 0%, var(--gradient-hero-outer) 65%);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-12);
  align-items: stretch;
  width: 100%;
}
.hero-text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Image column stretches to match the text column's height (whatever the
   headline wraps to) rather than shrinking to its own intrinsic 3:2 ratio \u2014
   this keeps the hero balanced regardless of headline length. */
.hero-image-col {
  min-height: 320px;
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.hero-image-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-cta-group {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-8);
}
.trust-bar {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-top: var(--space-6);
}

/* ---------------------------------------------------------------------------
   22. PROMPT 03 — HOME PAGE RESPONSIVE OVERRIDES
--------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-image-col { order: -1; }
  .pillars-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; gap: var(--space-12); }
  .process-grid::before { display: none; }
  .playbook-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .testimonials-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .hero-cta-group .btn,
  .hero-cta-group a.btn { width: 100%; justify-content: center; }
  .book-grid { gap: var(--space-2); }
}

/* ---------------------------------------------------------------------------
   46. HERO PORTRAIT (Jul 2026 conversion audit — Issue #2)
   Swaps the abstract AI-network hero graphic for Pierre's real portrait.
   Overrides .hero-image-col's stretch-to-match-text-column-height crop
   behavior with a fixed 6:7 portrait ratio + max-width caps at each
   breakpoint, so the photo reads as an intentional headshot rather than a
   cropped/distorted fill image.
--------------------------------------------------------------------------- */
.hero-portrait-col {
  min-height: 0;
  align-self: center;
  max-width: 460px;
  margin-inline: auto;
}
.hero-portrait-col img {
  aspect-ratio: 6 / 7;
  height: auto;
  box-shadow: var(--shadow-lg);
}
@media (max-width: 900px) {
  .hero-portrait-col { max-width: 300px; }
}
@media (max-width: 480px) {
  .hero-portrait-col { max-width: 200px; }
}

/* ---------------------------------------------------------------------------
   23. GENERIC PAGE HERO (Prompts 05-15)
   Reusable secondary-page hero: image right, text left. Used for interior
   pages that need a hero image (super-agent, business-planning, about) as
   opposed to the plain centered text hero used on services.html.
--------------------------------------------------------------------------- */
.page-hero {
  padding-top: calc(var(--header-height) + var(--space-12));
  padding-bottom: var(--space-16);
  background: radial-gradient(ellipse 70% 60% at 70% 20%, var(--gradient-page-hero-inner) 0%, var(--gradient-page-hero-outer) 65%);
}

/* ---------------------------------------------------------------------------
   23b. THEME-AWARE UTILITY BACKGROUNDS
   Extracted from repeated inline styles across 17+ pages so the gradients
   respond to [data-theme="light"] instead of being hardcoded per-page.
   Pattern 1 (.bg-page-hero): standard secondary-page hero glow, used on
     services/portfolio/resources/blog/store/newsletter/book-call/about/
     contact/genspark-tools/404 and their FR equivalents.
   Pattern 2 (.bg-quiz-hero): slightly tighter variant, used on assessment.
   Pattern 3 (.bg-cta-glow): soft primary-color glow already using
     var(--color-primary) — theme-safe by construction, extracted only for
     consistency/cleanliness, no color values changed.
--------------------------------------------------------------------------- */
.bg-page-hero {
  background: radial-gradient(ellipse 60% 100% at 50% 0%, var(--gradient-page-hero-inner) 0%, var(--gradient-page-hero-outer) 70%);
}
.bg-quiz-hero {
  background: radial-gradient(ellipse 60% 60% at 50% 0%, var(--gradient-page-hero-inner) 0%, var(--gradient-page-hero-outer) 65%);
}
.bg-cta-glow {
  background: radial-gradient(ellipse 60% 80% at 50% 50%, oklch(from var(--color-primary) l c h / 0.06) 0%, transparent 70%);
}
.page-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-12);
  align-items: center;
}

/* ---------------------------------------------------------------------------
   24. PROCESS FLOW DIAGRAM (Prompt 05 — Super Agent)
   Horizontal chain of steps with gold arrow connectors. Wraps on mobile.
--------------------------------------------------------------------------- */
.flow-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.flow-box {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
  min-width: 110px;
}
.flow-arrow {
  color: var(--color-primary);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
@media (max-width: 700px) {
  .flow-diagram { flex-direction: column; }
  .flow-arrow svg { transform: rotate(90deg); }
}

/* ---------------------------------------------------------------------------
   25. BENTO GRID (Prompt 05 — 8 use cases; reusable elsewhere)
   12-col-like layout via 4-col grid with two featured cells spanning 2 cols.
--------------------------------------------------------------------------- */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
.bento-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}
.bento-item.span-2 {
  grid-column: span 2;
}
.bento-metric {
  display: inline-block;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary);
}
@media (max-width: 900px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-item.span-2 { grid-column: span 2; }
}
@media (max-width: 560px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-item.span-2 { grid-column: span 1; }
}

/* ---------------------------------------------------------------------------
   26. BUILD TIMELINE (Prompt 05/06 — week-by-week / 4-week process)
   Horizontal on desktop (connecting line through gold circle markers),
   vertical on mobile (line moves to the left edge).
--------------------------------------------------------------------------- */
.timeline {
  display: flex;
  justify-content: space-between;
  position: relative;
  gap: var(--space-4);
}
.timeline::before {
  content: '';
  position: absolute;
  top: 22px;
  left: 22px;
  right: 22px;
  height: 2px;
  background: var(--color-divider);
  z-index: 0;
}
.timeline-step {
  position: relative;
  z-index: 1;
  flex: 1;
  text-align: center;
}
.timeline-marker {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  margin-inline: auto;
  box-shadow: var(--shadow-glow);
}
.timeline-label {
  margin-top: var(--space-4);
  font-weight: 600;
  color: var(--color-text);
  font-size: var(--text-sm);
}
.timeline-desc {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
@media (max-width: 700px) {
  .timeline { flex-direction: column; align-items: flex-start; gap: var(--space-8); }
  .timeline::before {
    top: 0;
    bottom: 0;
    left: 22px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .timeline-step { display: flex; align-items: flex-start; gap: var(--space-4); text-align: left; width: 100%; }
  .timeline-marker { margin-inline: 0; flex-shrink: 0; }
}

/* ---------------------------------------------------------------------------
   27. PRICING CARDS (Prompt 05/06 — 3-tier / 2+1)
--------------------------------------------------------------------------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  align-items: stretch;
}
.pricing-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  position: relative;
}
.pricing-card.featured {
  background: var(--color-primary-highlight);
  border: 1.5px solid var(--color-primary);
  transform: scale(1.03);
}
.pricing-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.pricing-tier-name {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  font-weight: 600;
}
.pricing-price {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-text);
  margin-block: var(--space-3);
}
.pricing-price span {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-muted);
}
.pricing-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block: var(--space-6);
  flex-grow: 1;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card.featured { transform: none; }
}

/* ---------------------------------------------------------------------------
   28. GOLD GRADIENT BORDER CALLOUT (Prompt 05 — authorized partner callout)
   Padding-box/border-box double-background trick for a gradient border on
   a dark card without needing an extra wrapper element.
--------------------------------------------------------------------------- */
.gold-border-card {
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  background:
    linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
    linear-gradient(135deg, var(--color-primary), var(--color-primary-hover), var(--color-primary)) border-box;
  border: 1.5px solid transparent;
}

/* ---------------------------------------------------------------------------
   29. STATS STRIP (Prompt 07 — Portfolio)
--------------------------------------------------------------------------- */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  text-align: center;
}
.stat-number {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-primary);
  display: block;
}
.stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}
@media (max-width: 700px) {
  .stats-strip { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
}

/* ---------------------------------------------------------------------------
   30. FILTER PILLS (Prompt 07/09/10 — category filters)
--------------------------------------------------------------------------- */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}
.filter-pill {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  cursor: pointer;
  font-family: var(--font-body);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.filter-pill:hover {
  color: var(--color-text);
}
.filter-pill.active {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

/* ---------------------------------------------------------------------------
   31. MAGAZINE / CASE STUDY GRID (Prompt 07 — Portfolio)
--------------------------------------------------------------------------- */
.magazine-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.magazine-grid .case-card.span-2 {
  grid-column: span 2;
}
.case-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
}
.case-metrics {
  display: flex;
  gap: var(--space-6);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}
.case-metric strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-primary);
}
.case-metric span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
@media (max-width: 900px) {
  .magazine-grid { grid-template-columns: repeat(2, 1fr); }
  .magazine-grid .case-card.span-2 { grid-column: span 2; }
}
@media (max-width: 560px) {
  .magazine-grid { grid-template-columns: 1fr; }
  .magazine-grid .case-card.span-2 { grid-column: span 1; }
}

/* ---------------------------------------------------------------------------
   32. ROTATING TESTIMONIAL (Prompt 07 — JS-driven single-slide carousel)
--------------------------------------------------------------------------- */
.testimonial-rotator {
  max-width: var(--content-narrow);
  margin-inline: auto;
  text-align: center;
  position: relative;
  min-height: 220px;
}
.testimonial-slide {
  display: none;
}
.testimonial-slide.active {
  display: block;
  animation: fadeIn 500ms ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.testimonial-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
}
.testimonial-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-divider);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background var(--transition-fast);
}
.testimonial-dot.active {
  background: var(--color-primary);
}

/* ---------------------------------------------------------------------------
   33. PROMPT 05-07 RESPONSIVE OVERRIDES
--------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .page-hero-grid { grid-template-columns: 1fr; }
  /* Fix: long translated CTA labels (esp. French) inherit .btn's
     white-space: nowrap, which forces the hero grid item wider than the
     viewport on mobile since CSS Grid items don't shrink below their
     intrinsic content width by default. Allow hero CTA buttons to wrap
     instead of pushing the page into horizontal scroll. */
  .page-hero-grid .btn { white-space: normal; text-align: center; }
}

/* ---------------------------------------------------------------------------
   34. PAINS VS SOLUTION COMPARISON (Prompt 06 — Business Planning)
--------------------------------------------------------------------------- */
.comparison-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
.comparison-col {
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}
.comparison-col.pains {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.comparison-col.solution {
  background: var(--color-primary-highlight);
  border: 1px solid var(--color-primary);
}
.comparison-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.comparison-col li {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.comparison-col.solution li {
  color: var(--color-text);
}
@media (max-width: 800px) {
  .comparison-cols { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   35. 2x2 AUDIENCE / CREDENTIAL GRID (Prompts 06/14)
--------------------------------------------------------------------------- */
.grid-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
@media (max-width: 700px) {
  .grid-2x2 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   36. 2+1 PRICING VARIANT (Prompt 06)
   Reuses .pricing-card but constrained to 2 main + 1 custom column layout.
--------------------------------------------------------------------------- */
.pricing-grid-2plus1 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-6);
  align-items: stretch;
}
@media (max-width: 900px) {
  .pricing-grid-2plus1 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   37. RESOURCE HUB BENTO (Prompt 08)
--------------------------------------------------------------------------- */
.resource-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.resource-bento .resource-card.span-2 {
  grid-column: span 2;
}
.resource-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}
.resource-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.resource-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}
.resource-card-body {
  padding: var(--space-6);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
@media (max-width: 900px) {
  .resource-bento { grid-template-columns: repeat(2, 1fr); }
  .resource-bento .resource-card.span-2 { grid-column: span 2; }
}
@media (max-width: 560px) {
  .resource-bento { grid-template-columns: 1fr; }
  .resource-bento .resource-card.span-2 { grid-column: span 1; }
}

/* ---------------------------------------------------------------------------
   38. LEAD MAGNET / ARTICLE CARDS (Prompt 08/09)
--------------------------------------------------------------------------- */
.thumb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.thumb-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.thumb-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}
.thumb-card-body {
  padding: var(--space-5);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
@media (max-width: 900px) {
  .thumb-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .thumb-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   39. MODAL (Prompt 08 — lead magnet email capture)
   JS toggles [hidden] and .open; backdrop click + Escape close it (see
   inline page script). Kept generic so it can be reused by other pages.
--------------------------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: oklch(0 0 0 / 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: var(--space-4);
}
.modal-backdrop[hidden] {
  display: none;
}
.modal-box {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  max-width: 440px;
  width: 100%;
  position: relative;
  box-shadow: var(--shadow-lg);
}
.modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-2);
}
.modal-close:hover {
  color: var(--color-text);
}
.modal-success {
  display: none;
  text-align: center;
}
.modal-success.visible {
  display: block;
}
.modal-form.hidden-form {
  display: none;
}

/* ---------------------------------------------------------------------------
   40. BLOG INDEX (Prompt 09 — /blog.html)
--------------------------------------------------------------------------- */
.blog-search {
  max-width: 480px;
  margin-inline: auto;
  position: relative;
}
.blog-search input {
  width: 100%;
  padding-left: var(--space-10);
}
.blog-search svg {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-faint);
  pointer-events: none;
}
.blog-featured {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: block;
  text-decoration: none;
  color: inherit;
  min-height: 360px;
  display: flex;
  align-items: flex-end;
}
.blog-featured img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.blog-featured::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, oklch(0 0 0 / 0.85) 0%, oklch(0 0 0 / 0.2) 60%, transparent 100%);
  z-index: 1;
}
.blog-featured-body {
  position: relative;
  z-index: 2;
  padding: var(--space-8);
  max-width: 60ch;
}
.blog-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-12);
  align-items: start;
}
.blog-article-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
.blog-sidebar {
  position: sticky;
  top: calc(var(--header-height) + var(--space-6));
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
@media (max-width: 900px) {
  .blog-layout { grid-template-columns: 1fr; }
  .blog-sidebar { position: static; }
  .blog-article-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   41. BLOG POST / ARTICLE PAGE (Prompt 09 — /blog-post.html)
--------------------------------------------------------------------------- */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--color-primary);
  z-index: 150;
  transition: width 100ms linear;
}
.article-hero-image {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: var(--radius-xl);
}
.article-meta-bar {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}
.article-body {
  max-width: 65ch;
  margin-inline: auto;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-text);
}
.article-body p {
  margin-bottom: var(--space-5);
  max-width: none;
}
.article-body h2 {
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}
.article-body h3 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}
.article-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-12);
  align-items: start;
  max-width: 1100px;
  margin-inline: auto;
}
.article-toc {
  position: sticky;
  top: calc(var(--header-height) + var(--space-6));
  font-size: var(--text-sm);
}
.article-toc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-left: 2px solid var(--color-divider);
  padding-left: var(--space-4);
  margin-top: var(--space-4);
}
.article-toc-list a {
  color: var(--color-text-muted);
  text-decoration: none;
  display: block;
}
.article-toc-list a.active {
  color: var(--color-primary);
  font-weight: 600;
}
.floating-share {
  position: sticky;
  top: calc(var(--header-height) + var(--space-6));
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.share-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.share-btn:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.author-bio {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  max-width: 65ch;
  margin-inline: auto;
}
.author-avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  flex-shrink: 0;
  font-size: var(--text-lg);
}
@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-toc, .floating-share { display: none; }
}

/* ---------------------------------------------------------------------------
   42. DIGITAL STORE (Prompt 10 — /store.html)
--------------------------------------------------------------------------- */
.featured-bundle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
}
.bundle-fan {
  position: relative;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bundle-fan img {
  position: absolute;
  width: 200px;
  height: 280px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-smooth);
}
.bundle-fan img:nth-child(1) { transform: rotate(-12deg) translateX(-70px); z-index: 1; }
.bundle-fan img:nth-child(2) { transform: rotate(0deg) translateX(0); z-index: 2; }
.bundle-fan img:nth-child(3) { transform: rotate(12deg) translateX(70px); z-index: 1; }
.bundle-fan:hover img:nth-child(1) { transform: rotate(-16deg) translateX(-85px) translateY(-6px); }
.bundle-fan:hover img:nth-child(3) { transform: rotate(16deg) translateX(85px) translateY(-6px); }
.price-strike {
  color: var(--color-text-faint);
  text-decoration: line-through;
  font-size: var(--text-lg);
  margin-right: var(--space-3);
}
.price-now {
  color: var(--color-primary);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-3xl);
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.product-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-smooth), border-color var(--transition-smooth);
}
.product-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-primary);
}
.product-card img {
  width: 100%;
  aspect-ratio: 800 / 1120;
  object-fit: cover;
  display: block;
}
.product-card-body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-2);
}
.product-price {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-primary);
  font-size: var(--text-lg);
  margin-top: auto;
}
.trust-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  justify-content: center;
}
.trust-badge-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
@media (max-width: 900px) {
  .featured-bundle { grid-template-columns: 1fr; text-align: center; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .product-grid { grid-template-columns: 1fr; }
  .bundle-fan { height: 260px; }
  .bundle-fan img { width: 150px; height: 210px; }
}

/* ---------------------------------------------------------------------------
   43. AI ASSESSMENT QUIZ SPA (Prompt 13 — /assessment.html)
--------------------------------------------------------------------------- */
.quiz-shell {
  max-width: 720px;
  margin-inline: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-10);
  min-height: 480px;
  display: flex;
  flex-direction: column;
}
.quiz-screen {
  display: none;
  flex-direction: column;
  flex: 1;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1), transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.quiz-screen.active {
  display: flex;
}
.quiz-screen.in {
  opacity: 1;
  transform: translateX(0);
}
.quiz-progress-track {
  width: 100%;
  height: 6px;
  background: var(--color-surface-2);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--space-8);
}
.quiz-progress-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  width: 0%;
  transition: width 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.quiz-step-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-faint);
  margin-bottom: var(--space-2);
}
.quiz-question {
  font-size: var(--text-xl);
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: var(--space-6);
}
.quiz-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.quiz-option {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.quiz-option:hover {
  border-color: var(--color-primary);
}
.quiz-option input {
  accent-color: var(--color-primary);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.quiz-option.selected {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
}
.quiz-nav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-8);
  gap: var(--space-4);
}
.quiz-welcome,
.quiz-results {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  justify-content: center;
}
.quiz-score-ring-wrap {
  position: relative;
  width: 180px;
  height: 180px;
  margin: var(--space-6) auto;
}
.quiz-score-ring-wrap svg {
  transform: rotate(-90deg);
}
.quiz-score-ring-bg {
  fill: none;
  stroke: var(--color-surface-2);
  stroke-width: 10;
}
.quiz-score-ring-fill {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.quiz-score-number {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-2xl);
  color: var(--color-primary);
}
.quiz-tier-badge {
  display: inline-block;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  font-weight: 700;
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}
.quiz-recommendations {
  text-align: left;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.quiz-rec-card {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
@media (max-width: 700px) {
  .quiz-shell { padding: var(--space-6); }
  .quiz-nav-row { flex-direction: column-reverse; }
  .quiz-nav-row .btn { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   44. ABOUT PAGE (Prompt 14 — /about.html)
--------------------------------------------------------------------------- */
.about-hero-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-12);
  align-items: center;
}
.about-portrait {
  width: 100%;
  aspect-ratio: 6 / 7;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.tech-stack-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-6);
}
.tech-stack-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.tech-stack-item:hover {
  border-color: var(--color-primary);
  transform: translateY(-3px);
}
.tech-stack-item img,
.tech-stack-item svg {
  width: 32px;
  height: 32px;
}
.tech-stack-item span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.philosophy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}
.philosophy-card {
  padding: var(--space-8);
}
.philosophy-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-3xl);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-primary);
  line-height: 1;
}
@media (max-width: 900px) {
  .about-hero-grid { grid-template-columns: 1fr; }
  .about-portrait { max-width: 320px; margin-inline: auto; }
  .tech-stack-grid { grid-template-columns: repeat(3, 1fr); }
  .philosophy-grid { grid-template-columns: 1fr; }
}
@media (max-width: 500px) {
  .tech-stack-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------------
   45. CONTACT PAGE (Prompt 15 — /contact.html)
   Form validation states (inline errors + shake), success checkmark overlay,
   contact-details/socials column, and quick-contact alternative cards.
--------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-12);
  align-items: start;
}
.contact-grid.ratio-narrow-wide {
  grid-template-columns: 1fr 1.1fr;
}
.reassurance-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-12);
}
@media (max-width: 480px) {
  .reassurance-row-3 { grid-template-columns: 1fr; }
}

.form-input.has-error,
.form-textarea.has-error,
.form-select.has-error {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 20%, transparent);
}

.form-error-msg {
  display: none;
  color: var(--color-error);
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}
.form-error-msg.visible { display: block; }

/* Generic checkbox row — used for the contact form's optional SendFox
   consent checkbox (Day 3). Same visual pattern as the SendFox embed's
   GDPR row (see ".sendfox-form label:has(input[type=checkbox])" above)
   but not scoped to that form, so any future checkbox-based consent row
   on other forms can reuse this class directly. */
.form-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.5;
  cursor: pointer;
}
.form-checkbox-row input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* Contact form-level submission error (Formspree network/API failure) —
   distinct from per-field .form-error-msg validation errors above. */
.form-submit-error {
  display: none;
  color: var(--color-error);
  background: color-mix(in oklch, var(--color-error) 12%, transparent);
  border: 1px solid color-mix(in oklch, var(--color-error) 30%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  margin-top: var(--space-5);
  text-align: center;
}
.form-submit-error.visible { display: block; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.shake { animation: shake 400ms ease; }

#contact-form-success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  padding: var(--space-16) var(--space-6);
}
#contact-form-success.visible { display: flex; }

.success-checkmark {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--color-success);
  display: flex;
  align-items: center;
  justify-content: center;
}
.success-checkmark svg {
  width: 30px;
  height: 30px;
  stroke: var(--color-success);
  stroke-width: 3;
  fill: none;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: checkmark-draw 500ms ease-out 100ms forwards;
}
@keyframes checkmark-draw {
  to { stroke-dashoffset: 0; }
}

.contact-detail-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.contact-detail-row:last-of-type { border-bottom: none; }
.contact-detail-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.quick-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.quick-contact-card {
  text-align: center;
}

@media (max-width: 900px) {
  .contact-grid,
  .contact-grid.ratio-narrow-wide { grid-template-columns: 1fr; }
  .quick-contact-grid { grid-template-columns: 1fr; }
  /* Fix: CSS Grid items default to min-width:auto, so flex children inside
     (e.g. the "What We'll Cover" checklist <li>/<span> and timeline steps
     on /book-call and /fr/book-call) can force their grid column wider
     than the viewport instead of wrapping. Reset to min-width:0 so nested
     flex/text content shrinks and wraps correctly at mobile widths. */
  .contact-grid > div,
  .contact-grid.ratio-narrow-wide > div { min-width: 0; }
}

/* ---------------------------------------------------------------------------
   46. QA FIX — SERVICE PILLAR GRID (services.html)
   Prompt 16 mobile audit: the two service-pillar sections used inline
   `grid-template-columns: 55fr 45fr` / `45fr 55fr` with no mobile stacking
   rule, causing horizontal overflow at 375px. Extracted into a reusable
   class with a proper responsive override.
--------------------------------------------------------------------------- */
.service-pillar-grid {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: var(--space-16);
  align-items: center;
}
.service-pillar-grid.reverse {
  grid-template-columns: 45fr 55fr;
}
@media (max-width: 900px) {
  .service-pillar-grid,
  .service-pillar-grid.reverse {
    grid-template-columns: 1fr;
  }
  .service-pillar-grid.reverse > img {
    order: -1;
  }
}

/* ---------------------------------------------------------------------------
   47. SENDFOX FORM — NATIVE RESTYLE (Day 2 ESP wiring — /newsletter.html)
   The SendFox embed (.sendfox-form) ships with zero styling opinions, so it
   inherits raw browser defaults unless targeted directly. Restyled here to
   match the site's .form-field / .form-input / .btn system exactly, while
   leaving the embed's own markup, name attributes, and form.js behavior
   untouched (data-async success/error messages are appended as
   <p class="sendfox-message success|error"> inside the form — styled below
   to feel native rather than like a generic embed).
--------------------------------------------------------------------------- */
.sendfox-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.sendfox-form p {
  margin: 0;
}
.sendfox-form label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.sendfox-form input[type="text"],
.sendfox-form input[type="email"] {
  width: 100%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-family: var(--font-body);
  color: var(--color-text);
}
.sendfox-form input[type="text"]::placeholder,
.sendfox-form input[type="email"]::placeholder {
  color: var(--color-text-faint);
}
.sendfox-form input[type="text"]:focus,
.sendfox-form input[type="email"]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}
/* GDPR consent row — kept fully visible and legible, never de-emphasized */
.sendfox-form label:has(input[type="checkbox"]) {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.5;
  cursor: pointer;
}
.sendfox-form input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--color-primary);
  cursor: pointer;
}
/* Honeypot field stays hidden regardless of theme */
.sendfox-form div[aria-hidden="true"] {
  display: none;
}
.sendfox-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  border: none;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: filter var(--transition-fast);
}
.sendfox-form button[type="submit"]:hover {
  filter: brightness(1.08);
}
.sendfox-form button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* Success / error messages related to the SendFox form. Scoped as a plain
   .sendfox-message class (not nested under .sendfox-form) so it also works
   for the post-redirect success state (#newsletter-signup-success), which
   lives as a sibling of the form rather than inside it — see newsletter.html
   for the classic-POST-mode root cause explanation. */
.sendfox-message {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: center;
}
.sendfox-message.success {
  color: var(--color-success);
  background: color-mix(in oklch, var(--color-success) 12%, transparent);
  border: 1px solid color-mix(in oklch, var(--color-success) 30%, transparent);
}
.sendfox-message.error {
  color: var(--color-error);
  background: color-mix(in oklch, var(--color-error) 12%, transparent);
  border: 1px solid color-mix(in oklch, var(--color-error) 30%, transparent);
}

/* ---------------------------------------------------------------------------
   45. CHAT WIDGET SCROLL-GATE (Jul 2026 conversion audit — Issue #1)
   GoHighLevel's chat bubble has no native "delay N seconds" or "show at X%
   scroll" option, so chat-widget-control.js closes it on load and toggles
   this body class until the visitor scrolls 40% down (or 20s elapse). While
   pending, we also visually collapse GHL's own corner-bubble container as a
   CSS-only safety net — belt-and-suspenders against any CTA overlap on
   mobile/tablet, independent of whether the JS API call succeeds.
   Selectors are broad because GHL renders the bubble as an unstyleable
   third-party iframe/container we don't control the markup of.
--------------------------------------------------------------------------- */
body.chat-widget-pending chat-widget,
body.chat-widget-pending #chat-widget,
body.chat-widget-pending [id^="chat-widget"],
body.chat-widget-pending [class*="chat-widget"],
body.chat-widget-pending iframe[src*="leadconnectorhq"],
body.chat-widget-pending iframe[title*="chat" i] {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity var(--transition-smooth);
}

/* ---------------------------------------------------------------------------
   46. COMPARISON TABLE — "WHY UNIKABIZ?" (Jul 2026 conversion audit — Issue #7)
   Rebuilt from the instruction doc's raw-hex mockup using native design
   tokens (--color-primary, --color-surface, --space-*) so it inherits both
   dark/light theme variants automatically instead of being hardcoded to one
   palette. Middle "UNIKABIZ" column gets the gold-highlight treatment;
   ✓ / ~ / ✕ glyphs use semantic success/muted/error tokens rather than
   arbitrary colors.
--------------------------------------------------------------------------- */
.table-responsive-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  background: var(--color-surface);
}
.compare-table th,
.compare-table td {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-divider);
}
.compare-table thead th {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-text);
  background: var(--color-surface-2);
}
.compare-table tbody th {
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
  border-bottom: none;
}
.compare-table td,
.compare-table tbody th {
  color: var(--color-text-muted);
}
.compare-table-highlight {
  background: var(--color-primary-highlight);
  border-left: 2px solid var(--color-primary);
  border-right: 2px solid var(--color-primary);
  color: var(--color-text) !important;
  font-weight: 500;
}
.compare-yes { color: var(--color-success); font-weight: 700; margin-right: var(--space-1); }
.compare-partial { color: var(--color-warning); font-weight: 700; margin-right: var(--space-1); }
.compare-no { color: var(--color-error); font-weight: 700; margin-right: var(--space-1); }
@media (max-width: 768px) {
  .compare-table th,
  .compare-table td { padding: var(--space-3) var(--space-4); font-size: var(--text-xs); }
}