/* =========================================================================
   OsemFlow Landing Page — Design System & Site Stylesheet
   Extends the KodeyWebs Digital Studio design system (base palette,
   typography, spacing, card/button patterns) per UI/UX Spec Section 2:
   "Extension, not imitation." The OsemFlow green becomes the accent
   used for CTAs, feature icons, and active/hover states, distinguishing
   this product site from its parent while remaining an obvious sibling.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design Tokens
   ------------------------------------------------------------------------- */
:root {
  /* Color — base inherited from KodeyWebs; accent swapped to OsemFlow green */
  --color-primary: #0F1B3C;
  --color-primary-dark: #0A0E27;
  --color-osem-navy: #14265A;
  --color-accent: #2FAE4E;
  --color-accent-dark: #23883D;
  --color-cta: #2FAE4E;
  --color-cta-hover: #279943;
  --color-text: #F5F7FA;
  --color-text-inverse: #FFFFFF;
  --color-text-muted: #8A92A6;
  --color-bg: #1A1B26;
  --color-surface: #232836;
  --color-surface-alt: #1D2230;
  --color-border: #2E3447;
  --color-error: #FF6B6B;
  --color-success: #2FAE4E;
  --color-whatsapp: #25D366;

  /* Typography */
  --font-heading: 'Poppins', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;

  --text-h1: 48px;
  --text-h2: 36px;
  --text-h3: 24px;
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-small: 14px;
  --text-button: 16px;

  /* Spacing (8px base unit) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* Layout */
  --container-max: 1280px;
  --radius-button: 8px;
  --radius-card: 12px;
}

@media (max-width: 767px) {
  :root {
    --text-h1: 32px;
    --text-h2: 28px;
    --text-h3: 20px;
    --text-body-lg: 16px;
    --text-body: 15px;
    --text-small: 13px;
    --text-button: 15px;
  }
}

/* -------------------------------------------------------------------------
   2. Reset & Base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 var(--space-md);
  color: var(--color-text);
}
h3 { font-weight: 600; }
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
p { margin: 0 0 var(--space-md); max-width: 75ch; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--color-primary);
  color: var(--color-text-inverse); padding: var(--space-sm) var(--space-md);
  z-index: 1000; border-radius: 0 0 var(--radius-button) 0;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

section { padding: var(--space-2xl) 0; }
@media (max-width: 767px) { section { padding: var(--space-xl) 0; } }

.section-heading { text-align: center; max-width: 680px; margin: 0 auto var(--space-2xl); }
.section-heading p { color: var(--color-text-muted); margin: 0 auto; }
.section-heading--left { text-align: left; margin-left: 0; }
.eyebrow {
  display: inline-block; font-family: var(--font-heading); font-weight: 600;
  font-size: var(--text-small); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: var(--space-sm);
}

/* -------------------------------------------------------------------------
   3. Buttons
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  font-family: var(--font-heading); font-size: var(--text-button); font-weight: 600;
  padding: 14px 28px; border-radius: var(--radius-button); border: 2px solid transparent;
  min-height: 44px; min-width: 44px; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn--cta { background: var(--color-cta); color: #fff; }
.btn--cta:hover { background: var(--color-cta-hover); color: #fff; }
.btn--primary { background: var(--color-primary); color: var(--color-text-inverse); }
.btn--primary:hover { background: var(--color-primary-dark); }
.btn--outline { background: transparent; border-color: var(--color-border); color: var(--color-text); }
.btn--outline:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn--outline-invert { background: transparent; border-color: rgba(255,255,255,0.4); color: #fff; }
.btn--outline-invert:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.btn--whatsapp { background: var(--color-whatsapp); color: #fff; }
.btn--whatsapp:hover { background: #1EBE5A; }
.btn--sm { padding: 10px 18px; font-size: var(--text-small); min-height: 40px; }
.btn--lg { padding: 16px 32px; font-size: 17px; }
.btn--block { width: 100%; }
.btn svg { flex-shrink: 0; }
.btn--disabled, .btn[disabled] { opacity: 0.6; pointer-events: none; }

/* -------------------------------------------------------------------------
   4. Header & Navigation (sticky per UI/UX Spec 3.1)
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 500; background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px;
}
.site-logo { display: inline-flex; align-items: center; gap: 8px; }
.site-logo__img { display: block; height: 80px; width: auto; object-fit: contain; }
.site-logo__img--footer { height: 80px; }
.site-logo__fallback-text { display: none; font-family: var(--font-heading); font-weight: 700; font-size: 22px; }
.text-osem { color: var(--color-osem-navy); }
.text-flow { color: var(--color-accent); }
/* Fallback text only shows if the <img> fails to load */
.site-logo__img[src=""], .no-logo-img .site-logo__fallback-text { display: inline-flex; }

.primary-nav__list { display: flex; align-items: center; gap: var(--space-lg); }
.primary-nav__list > li > a {
  font-family: var(--font-heading); font-weight: 600; font-size: 15px;
  color: var(--color-text); padding: var(--space-sm) 0; background: none; border: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.primary-nav__list > li > a:hover,
.primary-nav__list > li > a.is-active { color: var(--color-accent); }
.nav-cta {
  background: var(--color-cta); color: #fff !important;
  padding: 10px 20px !important; border-radius: var(--radius-button);
}
.nav-cta:hover, .nav-cta.is-active { background: var(--color-cta-hover); color: #fff !important; }

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; background: none; border: none; padding: 0;
}
.nav-toggle__bar { width: 24px; height: 2px; background: var(--color-text); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1023px) {
  .nav-toggle { display: flex; }
  .primary-nav {
    position: fixed; inset: 76px 0 0 0; background: var(--color-surface);
    transform: translateX(100%); transition: transform .25s ease; overflow-y: auto;
    padding: var(--space-lg);
  }
  .primary-nav.is-open { transform: translateX(0); }
  .primary-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav__list > li { border-bottom: 1px solid var(--color-border); }
  .primary-nav__list > li > a { display: flex; width: 100%; padding: var(--space-md) 0; justify-content: space-between; }
  .nav-cta { margin: var(--space-md) 0; text-align: center; justify-content: center; }
}

/* -------------------------------------------------------------------------
   5. Footer
   ------------------------------------------------------------------------- */
.site-footer { background: var(--color-primary); color: var(--color-text-inverse); padding-top: var(--space-2xl); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: var(--space-2xl); padding-bottom: var(--space-2xl); }
.footer-tagline { color: rgba(255,255,255,0.72); margin-top: var(--space-md); font-size: var(--text-small); }
.footer-heading { font-size: 16px; margin-bottom: var(--space-md); color: var(--color-text-inverse); }
.footer-links li, .footer-contact li { margin-bottom: var(--space-sm); }
.footer-links a, .footer-contact a { color: rgba(255,255,255,0.78); font-size: var(--text-small); }
.footer-links a:hover, .footer-contact a:hover { color: var(--color-accent); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15); padding: var(--space-lg) 0; font-size: var(--text-small);
  color: rgba(255,255,255,0.6); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap;
}
.kodeywebs-badge { color: rgba(255,255,255,0.75); font-size: var(--text-small); border: 1px solid rgba(255,255,255,0.2); padding: 6px 14px; border-radius: 999px; }
.kodeywebs-badge:hover { border-color: var(--color-accent); color: #fff; }
.kodeywebs-badge__mark { font-weight: 700; color: var(--color-accent); }

@media (max-width: 1023px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; align-items: flex-start; } }

/* -------------------------------------------------------------------------
   6. WhatsApp Floating Action Button
   ------------------------------------------------------------------------- */
.whatsapp-fab {
  position: fixed; right: var(--space-lg); bottom: var(--space-lg); z-index: 600;
  width: 60px; height: 60px; border-radius: 50%; background: var(--color-whatsapp); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(37,211,102,0.45); transition: transform .16s ease, background-color .16s ease;
}
.whatsapp-fab:hover { background: #1EBE5A; transform: scale(1.07); }
@media (max-width: 599px) { .whatsapp-fab { width: 54px; height: 54px; right: var(--space-md); bottom: var(--space-md); } }

/* -------------------------------------------------------------------------
   7. Cards
   ------------------------------------------------------------------------- */
.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); padding: var(--space-lg);
}

/* -------------------------------------------------------------------------
   8. Hero
   ------------------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(circle at 85% 15%, rgba(47,174,78,0.28), transparent 55%),
    linear-gradient(135deg, var(--color-osem-navy) 0%, var(--color-primary-dark) 100%);
  color: var(--color-text-inverse);
  padding: var(--space-3xl) 0 var(--space-2xl);
  position: relative; overflow: hidden;
}
.hero__inner { max-width: 760px; position: relative; z-index: 2; }
.hero .eyebrow { color: var(--color-accent); }
.hero h1 { color: var(--color-text-inverse); font-size: var(--text-h1); }
.hero__tagline { font-family: var(--font-heading); font-weight: 600; font-size: 20px; color: var(--color-accent); margin-bottom: var(--space-sm); }
.hero p.hero__lead { color: rgba(255,255,255,0.88); font-size: var(--text-body-lg); }
.hero__actions { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-lg); }
.hero__mark { position: absolute; right: -60px; bottom: -60px; width: 340px; opacity: 0.10; z-index: 1; }

@media (max-width: 767px) {
  .hero { padding: var(--space-xl) 0 var(--space-lg); }
  .hero h1 { font-size: var(--text-h2); }
  .hero p.hero__lead { font-size: var(--text-body); }
  .hero__mark { display: none; }
}

/* -------------------------------------------------------------------------
   9. Home page sections
   ------------------------------------------------------------------------- */
.problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; }
.problem-col h3 { color: var(--color-text-muted); font-size: var(--text-small); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-md); }
.problem-list { display: flex; flex-direction: column; gap: var(--space-md); }
.problem-list li { display: flex; gap: var(--space-sm); align-items: flex-start; }
.problem-list--pain li svg { color: var(--color-error); flex-shrink: 0; margin-top: 3px; }
.problem-list--solve li svg { color: var(--color-accent); flex-shrink: 0; margin-top: 3px; }
@media (max-width: 767px) { .problem-grid { grid-template-columns: 1fr; gap: var(--space-xl); } }

.services-teaser-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.service-teaser-card { text-align: left; transition: border-color .16s ease, transform .16s ease; }
.service-teaser-card:hover { border-color: var(--color-accent); transform: translateY(-3px); }
.service-teaser-card__icon {
  width: 48px; height: 48px; border-radius: 12px; background: rgba(47,174,78,0.14);
  color: var(--color-accent); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-md);
}
.service-teaser-card h3 { font-size: 18px; }
.service-teaser-card p { color: var(--color-text-muted); font-size: var(--text-small); margin: 0; }

.steps-teaser { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-lg); counter-reset: step; }
.steps-teaser__step { text-align: center; position: relative; }
.steps-teaser__num {
  width: 44px; height: 44px; border-radius: 50%; background: var(--color-accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700;
  margin: 0 auto var(--space-sm); font-size: 18px;
}
.steps-teaser__step p { font-size: var(--text-small); color: var(--color-text-muted); margin: 0; }
.steps-teaser__step h4 { font-size: var(--text-body); margin-bottom: var(--space-xs); }
@media (max-width: 1023px) { .steps-teaser { grid-template-columns: repeat(3, 1fr); } .services-teaser-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .steps-teaser { grid-template-columns: 1fr 1fr; } .services-teaser-grid { grid-template-columns: 1fr; } }

.compare-teaser-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.compare-teaser-card { text-align: center; }
.compare-teaser-card--featured { border-color: var(--color-accent); }
.compare-teaser-card__label { font-family: var(--font-heading); font-weight: 700; margin-bottom: var(--space-sm); }
.compare-teaser-card__value { color: var(--color-text-muted); font-size: var(--text-small); }
@media (max-width: 767px) { .compare-teaser-grid { grid-template-columns: 1fr; } }

.pricing-teaser-card {
  max-width: 640px; margin: 0 auto; text-align: center; padding: var(--space-2xl);
  border: 2px solid var(--color-accent);
}
.pricing-teaser-card__price { font-family: var(--font-heading); font-size: 44px; font-weight: 700; color: var(--color-accent); margin-bottom: var(--space-sm); }
.pricing-teaser-card__price span { font-size: 16px; color: var(--color-text-muted); font-weight: 500; display: block; margin-top: 4px; }

.cta-banner {
  background: linear-gradient(135deg, var(--color-osem-navy), var(--color-primary-dark));
  color: var(--color-text-inverse); border-radius: var(--radius-card);
  padding: var(--space-2xl); text-align: center;
}
.cta-banner h2 { color: var(--color-text-inverse); }
.cta-banner p { color: rgba(255,255,255,0.8); margin: 0 auto var(--space-lg); }
.cta-banner__actions { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; }

/* -------------------------------------------------------------------------
   10. Features page
   ------------------------------------------------------------------------- */
.feature-nav { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; margin-bottom: var(--space-2xl); }
.feature-nav a {
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--color-border); font-size: var(--text-small); font-weight: 600;
  background: var(--color-surface);
}
.feature-nav a:hover { border-color: var(--color-accent); color: var(--color-accent); }

.feature-section { border-bottom: 1px solid var(--color-border); padding: var(--space-2xl) 0; scroll-margin-top: 96px; }
.feature-section:last-child { border-bottom: none; }
.feature-section__layout { display: grid; grid-template-columns: 60px 1fr; gap: var(--space-lg); align-items: flex-start; }
.feature-section__number { font-family: var(--font-heading); font-weight: 700; font-size: 28px; color: var(--color-border); }
.feature-section h2 { font-size: var(--text-h3); margin-bottom: var(--space-sm); }
.feature-section .feature-summary { color: var(--color-accent); font-weight: 600; margin-bottom: var(--space-md); }
.feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm) var(--space-xl); margin-bottom: var(--space-md); }
.feature-list li { display: flex; gap: var(--space-sm); align-items: flex-start; font-size: var(--text-small); }
.feature-list li svg { flex-shrink: 0; margin-top: 2px; color: var(--color-accent); }
@media (max-width: 767px) { .feature-list { grid-template-columns: 1fr; } }

.customization-callout {
  display: flex; gap: var(--space-md); align-items: flex-start; background: rgba(47,174,78,0.08);
  border: 1px solid rgba(47,174,78,0.3); border-radius: var(--radius-card); padding: var(--space-md) var(--space-lg); margin-top: var(--space-md);
}
.customization-callout__badge {
  flex-shrink: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--color-accent); color: #fff; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.customization-callout p { margin: 0; font-size: var(--text-small); color: var(--color-text-muted); }

@media (max-width: 599px) { .feature-section__layout { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   11. How It Works page
   ------------------------------------------------------------------------- */
.hiw-timeline { display: flex; flex-direction: column; gap: 0; max-width: 780px; margin: 0 auto; }
.hiw-step { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-lg); padding-bottom: var(--space-xl); position: relative; }
.hiw-step:not(:last-child)::before {
  content: ''; position: absolute; left: 27px; top: 56px; bottom: -8px; width: 2px; background: var(--color-border);
}
.hiw-step__num {
  width: 56px; height: 56px; border-radius: 50%; background: var(--color-accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; font-size: 22px; flex-shrink: 0; z-index: 1;
}
.hiw-step__body h3 { margin-bottom: var(--space-xs); }
.hiw-step__body p { color: var(--color-text-muted); margin-bottom: 0; }
.hiw-timeline-note {
  max-width: 780px; margin: var(--space-lg) auto 0; text-align: center; font-weight: 600;
  color: var(--color-accent); background: rgba(47,174,78,0.08); border: 1px solid rgba(47,174,78,0.3);
  border-radius: var(--radius-card); padding: var(--space-md);
}

.daily-use-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.daily-use-card { text-align: center; }
.daily-use-card__icon {
  width: 52px; height: 52px; border-radius: 12px; background: rgba(47,174,78,0.14); color: var(--color-accent);
  display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-md);
}
@media (max-width: 767px) { .daily-use-grid { grid-template-columns: 1fr; } }
@media (max-width: 599px) { .hiw-step { grid-template-columns: 44px 1fr; gap: var(--space-md); } .hiw-step__num { width: 44px; height: 44px; font-size: 18px; } .hiw-step:not(:last-child)::before { left: 21px; } }

/* -------------------------------------------------------------------------
   12. Pricing page
   ------------------------------------------------------------------------- */
.pricing-card {
  max-width: 640px; margin: 0 auto; text-align: center; padding: var(--space-3xl) var(--space-2xl);
  border: 2px solid var(--color-accent); position: relative;
}
.pricing-card__eyebrow { color: var(--color-accent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--text-small); }
.pricing-card__price { font-family: var(--font-heading); font-size: 56px; font-weight: 700; color: var(--color-accent); margin: var(--space-sm) 0; }
.pricing-card__price span { display: block; font-size: 16px; color: var(--color-text-muted); font-weight: 500; margin-top: 4px; }
.pricing-card__includes { text-align: left; max-width: 420px; margin: var(--space-lg) auto; display: flex; flex-direction: column; gap: var(--space-sm); }
.pricing-card__includes li { display: flex; gap: var(--space-sm); align-items: flex-start; }
.pricing-card__includes li svg { color: var(--color-accent); flex-shrink: 0; margin-top: 3px; }

.package-disclaimer {
  background: rgba(47,174,78,0.08); border: 1px solid rgba(47,174,78,0.3); border-radius: var(--radius-card);
  padding: var(--space-md) var(--space-lg); font-size: var(--text-small); color: var(--color-text); margin-top: var(--space-xl);
  max-width: 640px; margin-left: auto; margin-right: auto;
}
@media (max-width: 599px) { .pricing-card { padding: var(--space-xl) var(--space-lg); } .pricing-card__price { font-size: 40px; } }

/* -------------------------------------------------------------------------
   13. Compare page
   ------------------------------------------------------------------------- */
.compare-table-wrap { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; background: var(--color-surface); border-radius: var(--radius-card); overflow: hidden; }
.compare-table th, .compare-table td { padding: var(--space-md) var(--space-lg); text-align: left; border-bottom: 1px solid var(--color-border); font-size: var(--text-small); }
.compare-table th { font-family: var(--font-heading); font-weight: 700; background: var(--color-surface-alt); }
.compare-table thead th:nth-child(3) { color: var(--color-accent); }
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table td:first-child { font-weight: 600; color: var(--color-text-muted); white-space: nowrap; }
.compare-table td:nth-child(3) { color: var(--color-accent); font-weight: 600; }

.compare-cards { display: none; flex-direction: column; gap: var(--space-md); }
.compare-card { }
.compare-card__criteria { font-family: var(--font-heading); font-weight: 700; margin-bottom: var(--space-md); font-size: var(--text-body); }
.compare-card__row { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border); }
.compare-card__row:last-child { border-bottom: none; }
.compare-card__row-label { color: var(--color-text-muted); font-size: var(--text-small); flex-shrink: 0; }
.compare-card__row-value { font-size: var(--text-small); text-align: right; }
.compare-card__row--osemflow .compare-card__row-value { color: var(--color-accent); font-weight: 600; }

@media (max-width: 767px) {
  .compare-table-wrap { display: none; }
  .compare-cards { display: flex; }
}

/* -------------------------------------------------------------------------
   14. About page
   ------------------------------------------------------------------------- */
.editorial { max-width: 720px; margin: 0 auto; }
.editorial h2 { margin-top: var(--space-2xl); }

/* -------------------------------------------------------------------------
   15. Forms (Demo request form)
   ------------------------------------------------------------------------- */
.form-page { max-width: 640px; margin: 0 auto; }
.form-card { padding: var(--space-2xl); }
.form-row { margin-bottom: var(--space-lg); }
.form-row label { display: block; font-weight: 600; font-size: var(--text-small); margin-bottom: var(--space-xs); }
.form-row .required { color: var(--color-error); }
.form-row input, .form-row textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-button);
  font-family: var(--font-body); font-size: var(--text-body); background: var(--color-bg); color: var(--color-text);
}
.form-row input:focus, .form-row textarea:focus { border-color: var(--color-accent); outline: none; }
.form-row textarea { min-height: 120px; resize: vertical; }
.form-row.has-error input, .form-row.has-error textarea { border-color: var(--color-error); }
.form-error-text { color: var(--color-error); font-size: 13px; margin-top: 4px; display: none; }
.form-row.has-error .form-error-text { display: block; }
.form-hint { color: var(--color-text-muted); font-size: 13px; margin-top: 4px; }
.form-status {
  border-radius: var(--radius-button); padding: var(--space-md); margin-bottom: var(--space-lg); font-size: var(--text-small); display: none;
}
.form-status.is-success { display: block; background: rgba(47,174,78,0.12); border: 1px solid rgba(47,174,78,0.4); color: #5FD97D; }
.form-status.is-error { display: block; background: rgba(255,107,107,0.08); border: 1px solid rgba(255,107,107,0.3); color: var(--color-error); }
.recaptcha-disclosure { font-size: 12px; color: var(--color-text-muted); margin: -8px 0 var(--space-lg); }
.recaptcha-disclosure a { text-decoration: underline; }
.form-alt-cta { text-align: center; margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-border); }
.form-alt-cta p { color: var(--color-text-muted); margin-bottom: var(--space-md); }
.honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* -------------------------------------------------------------------------
   16. FAQ accordion
   ------------------------------------------------------------------------- */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item__question {
  width: 100%; text-align: left; background: none; border: none; padding: var(--space-lg) 0;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-md);
  font-family: var(--font-heading); font-weight: 600; font-size: var(--text-body-lg); color: var(--color-text);
}
.faq-item__icon { flex-shrink: 0; transition: transform .2s ease; color: var(--color-accent); }
.faq-item.is-open .faq-item__icon { transform: rotate(45deg); }
.faq-item__answer { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.faq-item__answer-inner { padding-bottom: var(--space-lg); color: var(--color-text-muted); }

/* -------------------------------------------------------------------------
   17. Legal pages / 404
   ------------------------------------------------------------------------- */
.legal-content { max-width: 820px; margin: 0 auto; }
.legal-content h2 { margin-top: var(--space-2xl); }
.legal-content ul { list-style: disc; padding-left: 20px; margin-bottom: var(--space-md); }
.legal-content li { margin-bottom: var(--space-sm); }
.legal-updated { color: var(--color-text-muted); font-size: var(--text-small); margin-bottom: var(--space-2xl); }

.error-page { text-align: center; padding: var(--space-3xl) 0; }
.error-page__mark { width: 120px; margin: 0 auto var(--space-lg); opacity: 0.85; }
.error-page__code { font-family: var(--font-heading); font-size: 120px; font-weight: 700; color: var(--color-accent); line-height: 1; margin-bottom: var(--space-md); }
.error-page__actions { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; margin-top: var(--space-lg); }
@media (max-width: 599px) { .error-page__code { font-size: 72px; } }

/* -------------------------------------------------------------------------
   18. Misc utilities
   ------------------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.bg-surface { background: var(--color-surface); }