/* ======================================================
   1.0 RESET & ROOT VARIABLES
====================================================== */
:root {
  --fm-font-base: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  --fm-color-primary: #2e7d32;
  --fm-color-primary-dark: #1b5e20;
  --fm-color-secondary: #0f172a;
  --fm-color-muted: #64748b;
  --fm-color-border: #e5e7eb;
  --fm-color-bg: #ffffff;
  --fm-color-bg-soft: #f9fafb;

  --fm-radius-sm: 6px;
  --fm-radius-md: 10px;
  --fm-radius-lg: 16px;

  --fm-shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --fm-shadow-md: 0 4px 12px rgba(0,0,0,.08);

  --fm-max-width: 1200px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--fm-font-base);
  color: var(--fm-color-secondary);
  background: var(--fm-color-bg);
}

/* ======================================================
   2.0 TYPOGRAPHY
====================================================== */
h1, h2, h3, h4 {
  margin: 0 0 12px;
  line-height: 1.2;
}

h1 { font-size: 40px; }
h2 { font-size: 32px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }

p {
  margin: 0 0 16px;
  color: var(--fm-color-muted);
  line-height: 1.6;
}

a {
  color: var(--fm-color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ======================================================
   3.0 LAYOUT CONTAINERS
====================================================== */
.web-container {
  max-width: var(--fm-max-width);
  margin: 0 auto;
  padding: 0 20px;
}

.web-section {
  padding: 0px 0;
  margin-bottom: 0px;
}

.web-section[data-layout="stack"] {
  padding: 64px 0;
}

#web-main {
  width: 100%;
  overflow-x: hidden;
}


/* ======================================================
   4.0 BUTTON SYSTEM — UNIVERSAL & SCALABLE
====================================================== */

/* ---------- BASE ---------- */
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: var(--fm-radius-md);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
  text-decoration: none;
}

/* ---------- PRIMARY (INVERTIBLE) ---------- */
/* Default: solid brand */
.btn-primary {
  background: var(--fm-color-primary);
  color: #fff;
  border-color: var(--fm-color-primary);
}

/* Hover: darker brand */
.btn-primary:hover {
  background: var(--fm-color-primary-dark);
  border-color: var(--fm-color-primary-dark);
  text-decoration: none;

}

/* ---------- PRIMARY INVERT (AUTO WHEN NEEDED) ---------- */
/* Used naturally on light headers / hero overlays */
.btn-primary.is-invert {
  background: #fff;
  color: var(--fm-color-primary);
  border-color: var(--fm-color-primary);
}

.btn-primary.is-invert:hover {
  background: var(--fm-color-primary);
  color: #fff;
  text-decoration: none;

}

/* ---------- SECONDARY ---------- */
.btn-secondary {
  background: transparent;
  color: var(--fm-color-primary);
  border-color: var(--fm-color-border);
}

.btn-secondary:hover {
  background: var(--fm-color-bg-soft);
  text-decoration: none;

}

/* ---------- STATES ---------- */
.btn-primary:disabled,
.btn-secondary:disabled {
  opacity: .6;
  cursor: not-allowed;
  box-shadow: none;

}

/* ---------- SIZE VARIANTS (OPTIONAL, FUTURE SAFE) ---------- */
.btn-sm {
  padding: 8px 14px;
  font-size: 13px;
}

.btn-lg {
  padding: 14px 26px;
  font-size: 16px;
}

/* ======================================================
   5.0 HERO SECTION
====================================================== */

.web-hero {
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* Slider wrapper */
.web-hero-slider {
  display: flex;
  width: 100%;
  transition: transform 0.8s ease-in-out;  
}

/* Individual slide */
.web-hero-slide {
  width: 100%;
  min-height: 560px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  position: relative;
  flex: 0 0 100%;

}

/* Dark overlay for text readability */
.web-hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.35) 40%,
    rgba(0,0,0,0.15) 70%,
    rgba(0,0,0,0) 100%
  );
  z-index: 1;
}

/* Inner content */
.web-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding: 0 24px;
  color: #fff;
}

/* Headline */
.web-hero-inner h1 {
  font-size: 52px;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 16px;
}

/* Subtext */
.web-hero-inner p {
  font-size: 18px;
  line-height: 1.6;
  max-width: 560px;
  opacity: 0.95;
}

/* CTA buttons */
.web-hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 1024px) {
  .web-hero-slide {
    min-height: 480px;
  }

  .web-hero-inner h1 {
    font-size: 40px;
  }
}

@media (max-width: 768px) {
  .web-hero-slide {
    min-height: 420px;
  }

  .web-hero-inner h1 {
    font-size: 32px;
  }

  .web-hero-inner p {
    font-size: 16px;
  }
}

/* ======================================================
   HERO TEXT ANIMATION
====================================================== */

.web-hero-slide .web-hero-inner {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.web-hero-slide.is-active .web-hero-inner {
  opacity: 1;
  transform: translateY(0);
}


/* ======================================================
   6.0 INFORMATION SECTION — FIXED & FINAL
====================================================== */

/* ---------- SECTION WRAPPER (FULL WIDTH BACKGROUND) ---------- */
.web-info-section {
  width: 100%;
  padding: 34px 0;
}

/* ---------- OUTER WRAP (OVERFLOW SAFETY) ---------- */
.web-info-wrap {
  width: 100%;
  overflow: hidden;
}

/* ---------- INNER CONTAINER ---------- */
.web-info-inner {
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;

  display: flex;
  align-items: center;
  gap: 48px;
}

/* CONTAINED CONTENT (CENTERED) */
.web-info-inner:not(.is-full) {
  max-width: var(--fm-max-width);
}

/* ======================================================
   LAYOUT VARIANTS (DESKTOP)
   NOTE: layout-* CLASS IS ON .web-info-inner
====================================================== */

/* DEFAULT — IMAGE LEFT */
.web-info-inner.layout-left {
  flex-direction: row;
}

/* FIX — IMAGE RIGHT */
.web-info-inner.layout-right {
  flex-direction: row-reverse;
}

/* CENTER — STACKED */
.web-info-inner.layout-center {
  flex-direction: column;
  text-align: center;
}

/* ---------- MEDIA ---------- */
.web-info-media {
  flex-shrink: 0;
}

.web-info-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--fm-radius-md);
}

/* Image sizes */
.web-info-media.size-sm { max-width: 340px; }
.web-info-media.size-md { max-width: 460px; }
.web-info-media.size-lg { max-width: 580px; }

/* ---------- CONTENT ---------- */
.web-info-content {
  flex: 1;
  min-width: 0; /* CRITICAL: prevents text disappearance */
}

.web-info-content h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--fm-color-secondary);
}

.web-info-content p,
.web-info-description {
  font-size: 16px;
  line-height: 1.4;
  color: var(--fm-color-secondary);
}

/* Text alignment helpers */
.web-info-inner.text-left { text-align: left; }
.web-info-inner.text-center { text-align: center; }

/* ---------- CTA ---------- */
.web-info-content .btn-primary {
  margin-top: 24px;
}

/* ======================================================
   MOBILE — ALWAYS STACK (NON-NEGOTIABLE)
====================================================== */
@media (max-width: 900px) {

  .web-info-inner {
    flex-direction: column !important;
    align-items: stretch;
    gap: 16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Force order: image first, text second */
  .web-info-media { order: 0; }
  .web-info-content { order: 1; }

  /* Image full width */
  .web-info-media,
  .web-info-media.size-sm,
  .web-info-media.size-md,
  .web-info-media.size-lg {
    width: 100%;
    max-width: 100%;
  }

  .web-info-media img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* Text full width */
  .web-info-content {
    width: 100%;
    max-width: 100%;
  }

  /* Respect text alignment setting */
  .web-info-inner.text-left { text-align: left; }
  .web-info-inner.text-center { text-align: center; }
}

/* ======================================================
   7.0 STATIC BANNER
====================================================== */
.web-banner-inner {
  background: var(--fm-color-bg-soft);
  border-radius: var(--fm-radius-lg);
  padding: 48px;
  text-align: center;
}

.web-banner-inner h2 {
  margin-bottom: 12px;
}

/* ======================================================
   8.0 SUBSCRIPTION PLANS
====================================================== */
.web-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 32px;
  align-items: stretch;
}

.web-plan-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--fm-color-border);
  border-radius: var(--fm-radius-md);
  padding: 32px;
  text-align: center;
  background: #fff;
}

.web-plan-card .plan-features,
.web-plan-card ul {
  flex: 1;
}

.web-plan-card .plan-action,
.web-plan-card button {
  margin-top: auto;
}

.web-plan-card.highlight {
  border-color: var(--fm-color-primary);
  box-shadow: var(--fm-shadow-md);
}

/* ======================================================
   9.0 FINAL CTA
====================================================== */
.web-cta-inner {
  background: var(--fm-color-secondary);
  color: #fff;
  border-radius: var(--fm-radius-lg);
  padding: 64px;
  text-align: center;
}

.web-cta-inner p {
  color: #e5e7eb;
}

.web-cta-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

/* ======================================================
   10.0 RESPONSIVE
====================================================== */
@media (max-width: 768px) {
  h1 { font-size: 34px; }
  h2 { font-size: 26px; }

  .web-section {
   padding: 15px 0;
   margin-bottom: 0px;
   margin-top: -15px;
  }

  .web-cta-inner {
    padding: 40px 24px;
  }
}

/* ======================================================
   11.0 HEADER & FOOTER — PLATFORM (FINAL)
====================================================== */
.web-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1200;
  background: #fff;
}

/* Prevent content from hiding behind fixed header */
body {
  padding-top: 72px; /* match header height */
}

.web-header-inner {
  max-width: var(--fm-max-width);
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.web-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Offset anchor scroll for sticky header */
.web-section {
  scroll-margin-top: 105px; /* must match header height */
}

/* ---------- LOGO ---------- */
.web-logo img {
  height: 34px;
  display: block;
}

/* ======================================================
   HEADER NAV — ENHANCED (DESKTOP + MOBILE)
====================================================== */

/* ---------- BASE NAV ---------- */
.web-nav {
  display: flex;
  gap: 24px;
  align-items: center;
}

/* Links / parents */
.web-nav a,
.web-nav-parent {
  font-weight: 500;
  color: var(--fm-color-secondary);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

/* Primary CTA */
.web-nav a.primary {
  color: var(--fm-color-primary);
  font-weight: 600;
}

.web-nav-actions {
  display: flex;
  gap: 16px;
  align-items: center;
}

/* ---------- GROUP ---------- */
.web-nav-group {
  position: relative;
}

/* Parent label */
.web-nav-parent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 4px; /* desktop hover stability */
}

/* Caret */
.web-nav-parent::after {
  content: "▾";
  font-size: 22px;
  transition: transform 0.25s ease;
}

.web-nav-group.open .web-nav-parent::after {
  transform: rotate(180deg);
}

/* ---------- SUB MENU (BASE) ---------- */
.web-nav-sub {
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
}

/* Sub links */
.web-nav-sub a {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--fm-color-secondary);
}

.web-nav-sub a:hover {
  background: #f4f6f5;
}

/* ======================================================
   DESKTOP
====================================================== */
@media (min-width: 901px) {

  .web-nav-sub {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    margin-top: 0; /* remove hover gap */
    border: 1px solid var(--fm-color-border);
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    display: none;
    z-index: 1400;
  }

  /* Stable hover (parent + submenu) */
  .web-nav-group:hover .web-nav-sub {
    display: block;
  }

  .web-nav-group:hover .web-nav-parent::after {
    transform: rotate(180deg);
  }
}

/* ---------- MENU TOGGLE ---------- */
.web-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
}

.web-menu-toggle span {
  width: 22px;
  height: 2px;
  background: var(--fm-color-secondary);
}

/* ---------- MOBILE DRAWER ---------- */
.web-nav-close,
.web-nav-overlay {
  display: none;
}

/* ======================================================
   MOBILE
====================================================== */
@media (max-width: 900px) {

  .web-menu-toggle {
    display: flex;
  }

  .web-logo img {
    height: 26px;
  }

  .web-nav-group {
    width: 100%;
    max-width: 300px;
  }

  /* Drawer */
  .web-nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 82%;
    max-width: 320px;
    background: #ffffff;
    border-right: 1px solid var(--fm-color-border);
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    z-index: 1300;

    transform: translateX(-105%);
    transition: transform 0.28s ease;
  }

  .web-header.open .web-nav {
    transform: translateX(0);
  }

  /* Close button must always win taps */
  .web-nav-close {
    display: block;
    position: absolute;
    top: 14px;
    right: 14px;
    background: none;
    border: 0;
    font-size: 24px;
    color: var(--fm-color-secondary);
    cursor: pointer;
    z-index: 1500;
  }

  /* Parent rows */
  .web-nav a,
  .web-nav-parent {
    width: 100%;
    padding: 14px 0;
    font-size: 16px;
    border-bottom: 1px solid var(--fm-color-border);
  }

  /* 🔑 Fix: prevent parent hit-area from covering close button */
  .web-nav-parent {
    width: auto;
    padding-right: 32px; /* space for caret */
  }

  /* Mobile accordion */
  .web-nav-sub {
    position: static;
    width: 100%;
    border-radius: 0;
    box-shadow: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #f9faf9;
  }

  .web-nav-group.open .web-nav-sub {
    max-height: 480px;
  }

  .web-nav-sub a {
    padding: 12px 16px;
    font-size: 15px;
  }

  .web-nav-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
  }

  .web-nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 1250;
  }

  .web-header.open .web-nav-overlay {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ---------- FOOTER ---------- */
.web-footer {
  border-top: 1px solid var(--fm-color-border);
  background: var(--fm-color-bg-soft);
  margin-top: 80px;
}

.web-footer-inner {
  max-width: var(--fm-max-width);
  margin: 0 auto;
  padding: 48px 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
}

.web-footer-left p {
  font-size: 14px;
  color: var(--fm-color-muted);
}

.web-footer-links {
  display: flex;
  gap: 20px;
}

.web-footer-links a {
  font-size: 14px;
  color: var(--fm-color-secondary);
}

/* ---------- MOBILE ---------- */
@media (max-width: 768px) {
  .web-header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .web-nav {
    flex-wrap: wrap;
    gap: 5px;
  }

  .web-footer-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .web-footer-links {
    justify-content: center;
  }
}

/* ======================================================
   12.0 HERO BACKGROUND / IMAGE SUPPORT
====================================================== */

/* Base hero wrapper */
.web-section-hero {
  position: relative;
  overflow: hidden;
}

/* Background image support */
.web-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Dark overlay (optional) */
.web-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}

/* Hero content stays above background */
.web-hero-inner {
  position: relative;
  z-index: 1;
  color: #fff;
}

.web-hero-inner h1,
.web-hero-inner p {
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* Layout modifiers */
.web-section[data-layout="slider"] .web-hero-inner {
  max-width: 640px;
}

.web-section[data-layout="stack"] .web-hero-inner {
  max-width: 720px;
}

/* Optional image (non-background mode) */
.web-hero-image {
  max-width: 520px;
}

.web-hero-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .web-hero-inner h1 {
    font-size: 36px;
  }

  .web-hero-bg::after {
    background: rgba(0,0,0,0.45);
  }
}

/* ======================================================
   13.0 ICON SYSTEM (LUCIDE / SVG)
====================================================== */

.web-icon {
  width: 24px;
  height: 24px;
  stroke-width: 1.75;
  color: var(--fm-color-primary);
}

.web-icon-sm {
  width: 18px;
  height: 18px;
}

.web-icon-lg {
  width: 32px;
  height: 32px;
}

/* Icon inside cards */
.web-info-card .web-icon {
  margin-bottom: 12px;
}

/* Muted icons */
.web-icon-muted {
  color: var(--fm-color-muted);
}

<i data-lucide="store" class="web-icon"></i>
<i data-lucide="truck" class="web-icon web-icon-sm"></i>
<i data-lucide="factory" class="web-icon web-icon-lg"></i>

/* ======================================================
   14.0 ADMIN PREVIEW MODE (SAFE, SCOPED)
====================================================== */

/* Enable preview mode by adding .web-preview to <body> */
body.web-preview .web-section {
  position: relative;
  outline: 1px dashed rgba(15, 23, 42, 0.15);
}

/* Section hover highlight */
body.web-preview .web-section:hover {
  outline-color: rgba(46, 125, 50, 0.5);
}

/* Section badge */
body.web-preview .web-section::before {
  content: attr(data-layout);
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  border-radius: 4px;
  pointer-events: none;
}

/* Drag handle placeholder (for future admin JS) */
body.web-preview .web-section::after {
  content: '⋮⋮';
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 14px;
  color: rgba(15, 23, 42, 0.6);
  pointer-events: none;
}

/* Disable links in preview to avoid navigation */
body.web-preview a {
  pointer-events: none;
}

/* Visual spacing clarity */
body.web-preview .web-section {
  background-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0.02),
    rgba(0,0,0,0.02)
  );
}
/* ======================================================
15. BLOCK SECTION — SCALED, MODERN, ISOLATED (FINAL)
Used by: section_key = block
====================================================== */


/* ======================================================
   1. BLOCK STRUCTURE (AUTHORITATIVE)
====================================================== */

.web-block-section {
  width: 100%;
  padding: 20px 0;
  min-height: 520px;
}

.web-block-inner {
  width: 100%;
  max-width: var(--fm-max-width, 1200px);
  margin: 0 auto;
  padding: 0 0px;
}

.web-block-inner.is-full {
  max-width: 100%;
  padding: 0;
}

/* Text alignment */
.web-block-section.text-left   { text-align: left; }
.web-block-section.text-center { text-align: center; }
.web-block-section.text-right  { text-align: right; }

.web-block-header {
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.22);
}

.web-block-header .block-description {
  margin: 0;
}

.web-block-header .block-title {
  color:var(--fm-color-muted);
  margin: 0px;
}

@media (max-width: 768px) {
  .web-block-section .web-block-header {
    display: none;
  }
  
  .web-block-section {
    min-height: 320px;
  }
}


/* ======================================================
   SLIDES — PAGE-BASED STRUCTURE (AUTHORITATIVE)
   Header / Body / Footer separation
====================================================== */

.web-content-slides{
  position:relative;
  width:100%;
  padding:0;
  text-align:left;
}

.web-content-slides,
.web-content-slides *{
  box-sizing:border-box;
}

.web-content-slides .slides-stage{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}

/* ======================================================
   SLIDE PAGE SHELL
====================================================== */

.web-content-slides .slides-page{
  width:100%;
  display:flex;
  flex-direction:column;
}

/* ======================================================
   PAGE HEADER (NON-STATEFUL)
====================================================== */

.web-content-slides .slides-page-header{
  margin-bottom:0px;
}

.web-content-slides .slide-title{
  font-size:clamp(28px, 3.5vw, 44px);
  font-weight:800;
  margin:0 0 0px;
}

.web-content-slides .slides-subtitle{
  font-size:16px;
  line-height:1.2;
  color:var(--fm-color-secondary);
  margin:0;
  max-width:920px;
}

.slides-page-header.text-center { text-align: center; }
.slides-page-header.text-left   { text-align: left; }
.slides-page-header.text-right  { text-align: right; }


/* ======================================================
   PAGE BODY (STATEFUL ZONE)
====================================================== */

.web-content-slides .slides-page-body{
  width:100%;
}

/* layout wrapper (media + content) */
.web-content-slides .slides-layout{
  display:grid;
  grid-template-columns:420px 1fr;
  gap:36px;
  align-items:start;
  margin-top: 0px;
}

/* media (single shared image) */
.web-content-slides .slides-media{
  width:100%;
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,.06);
}

.web-content-slides .slides-media img{
  display:block;
  width:100%;
  height:auto;
  max-height:520px;
  object-fit:contain;
}

/* content column */
.web-content-slides .slides-content{
  width:100%;
}

/* SLIDES — STRONG SUBTITLE EMPHASIS */

.slides-page-header .slides-subtitle {
  font-size: 1.25rem;          /* bigger than body, smaller than title */
  font-weight: 600;            /* stronger, business tone */
  line-height: 1.5;
  margin-top: 12px;
  margin-bottom: 20px;
  color: var(--fm-color-primary-dark, #0b3d2e);
  max-width: 720px;
}

/* Optional: add subtle divider to anchor importance */
.slides-page-header .slides-subtitle::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 14px;
  background: var(--fm-color-primary, #2fbf71);
  border-radius: 2px;
}


@media (max-width: 768px) {
  .web-content-slides .slides-media {
    display: none;
  }
}

@media (max-width: 768px) {
  .web-content-slides .slides-layout {
    display: block;
    margin-top: 0;
  }

  .web-content-slides .slides-content {
    width: 100%;
  }

  .web-content-slides .slides-layers {
    min-height: auto;
  }
}


/* ======================================================
   STEP FRAME (HEIGHT-LOCK TARGET)
====================================================== */

.web-content-slides .slides-layers{
  position:relative;
  width:100%;
  min-height:140px; /* JS will override precisely */
}

/* step text */
.web-content-slides .slides-description{
  font-size:16px;
  line-height:1.8;
  color:var(--fm-color-secondary);
  max-width:900px;
}

@media (max-width: 768px) {
  .web-content-slides[data-step-mode="stack"] .slide-layer {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.25);
  }

  .web-content-slides[data-step-mode="stack"] .slide-layer:first-child {
    border-top: none;
    padding-top: 0;
  }
}

/* ======================================================
   PAGE FOOTER (NON-STATEFUL / ACTION ZONE)
====================================================== */

.web-content-slides .slides-page-footer{
  margin-top:28px;
  display:flex;
  align-items:center;
  gap:16px;
}

/* BLOCK FOOTER — SECOND ROW SLIDE NAV */

.web-block-footer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* SLIDE NAVIGATION — MODERN ICON BUTTONS */

.web-block-footer .footer-nav {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 8px;
}

.web-block-footer .footer-nav button {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.web-block-footer .footer-nav button i {
  font-size: 18px;
  color: #1f2937; /* neutral dark */
}

/* Hover */
.web-block-footer .footer-nav button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

/* Active */
.web-block-footer .footer-nav button:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Optional emphasis for Next */
.web-block-footer .footer-nav .slides-btn-next {
  background: #1f7a3f; /* FreshMarket green */
  border-color: #1f7a3f;
}

.web-block-footer .footer-nav .slides-btn-next i {
  color: #ffffff;
}

@media (max-width: 768px) {
  .web-block-footer .btn-primary {
    margin: 0 12px;
  }
}


/* ======================================================
   STEP MODE: STACK
====================================================== */

.web-content-slides[data-step-mode="stack"] .slide-layer{
  position:relative;
  margin-top:18px;
  opacity:1;
  transform:none;
  transition:opacity .45s ease, transform .45s ease;
}

.web-content-slides[data-step-mode="stack"] .slide-layer.is-hidden{
  display:none;
}

/* ======================================================
   STEP MODE: REPLACE
====================================================== */

.web-content-slides[data-step-mode="replace"] .slide-layer{
  position:absolute;
  inset:0;
  opacity:1;
  transform:translateY(0);
  transition:opacity .45s ease, transform .45s ease;
  pointer-events:auto;
}

.web-content-slides[data-step-mode="replace"] .slide-layer.is-hidden{
  opacity:0;
  pointer-events:none;
}

/* exit animation */
.web-content-slides[data-step-mode="replace"].step-anim-fade
.slide-layer.is-leaving{
  opacity:0;
  transform:translateY(-8px);
}

.web-content-slides[data-step-mode="replace"].step-anim-slide
.slide-layer.is-leaving{
  opacity:0;
  transform:translateX(-24px);
}

/* enter offset */
.web-content-slides[data-step-mode="replace"].step-anim-fade
.slide-layer.is-hidden{
  transform:translateY(8px);
}

.web-content-slides[data-step-mode="replace"].step-anim-slide
.slide-layer.is-hidden{
  transform:translateX(24px);
}

/* ======================================================
   RESPONSIVE
====================================================== */

@media (max-width:980px){
  .web-content-slides .slides-layout{
    grid-template-columns:1fr;
    gap:18px;
  }
  .web-content-slides .slides-media img{
    max-height:420px;
  }
}

/* ======================================================
   SLIDES — CAROUSEL WRAPPER (AUTHORITATIVE LAYOUT)
   - Enforces horizontal flow
   - Prevents vertical stacking on first paint
====================================================== */

.slides-carousel{
  position:relative;
  width:100%;
  overflow:hidden;
}

.slides-carousel .slides-rail{
  display:flex;
  flex-direction:row;
  width:100%;
  will-change:transform;
}

.slides-carousel .slides-rail > .web-content-slides{
  flex:0 0 100%;
  width:100%;
}

/* ======================================================
   LEGACY SEQUENCING — SAFELY NEUTRALIZED
   (carousel owns visibility, not is-seq-hidden)
====================================================== */

/* keep class harmless if still present in DOM */
.web-content-slides.is-seq-hidden{
  visibility:visible;
  pointer-events:auto;
}

/* ======================================================
   SLIDE PAGE — BASE STRUCTURE
====================================================== */

.web-content-slides .slides-page{
  width:100%;
  display:flex;
  flex-direction:column;
}

/* ======================================================
   LAYOUT VARIANTS
====================================================== */

/* --------------------------------------
   CLASSIC (default)
   - Header top
   - Media left, content right
   - Footer bottom
-------------------------------------- */

.web-content-slides.slides-layout-classic .slides-page-header{
  margin-bottom: 10px;
}

.web-content-slides.slides-layout-classic .slides-page-body{
  width:100%;
}

.web-content-slides.slides-layout-classic .slides-page-footer{
  margin-top:28px;
}

/* --------------------------------------
   STACKED
   - Everything vertical
   - Media above content
-------------------------------------- */

.web-content-slides.slides-layout-stacked .slides-layout{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.web-content-slides.slides-layout-stacked .slides-media{
  max-width:100%;
}

.web-content-slides.slides-layout-stacked .slides-page-footer{
  margin-top:24px;
}

/* --------------------------------------
   MEDIA-ACCENT
   - Media visually dominant
   - Header overlays or aligns tightly
-------------------------------------- */

.web-content-slides.slides-layout-media-accent .slides-layout{
  grid-template-columns:520px 1fr;
  gap:20px;
}

.web-content-slides.slides-layout-media-accent .slides-media{
  box-shadow:0 18px 40px rgba(0,0,0,.18);
}

.web-content-slides.slides-layout-media-accent .slides-page-header{
  margin-bottom:12px;
}

.web-content-slides.slides-layout-media-accent .slides-page-footer{
  margin-top:10px;
}

/* ======================================================
   RESPONSIVE — CAROUSEL SAFE
====================================================== */

@media (max-width:980px){

  .slides-carousel .slides-rail{
    will-change:transform;
  }

  .web-content-slides .slides-layout,
  .web-content-slides.slides-layout-media-accent .slides-layout{
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  .web-content-slides .slides-page-footer{
    margin-top:22px;
  }
}


/* ======================================================
   3. SUBSCRIPTION — CAROUSEL (HARD ISOLATED)
====================================================== */

.web-block-carousel {
  width: 100%;
  overflow: hidden;
}

.web-block-carousel .web-block-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;

  gap: 24px;
  padding: 32px 16px;

  overflow-x: auto;
  overflow-y: visible;

  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.web-block-carousel .web-block-track::-webkit-scrollbar {
  display: none;
}

/* Card wrapper — NEVER stretch */
.web-block-carousel .web-block-slide {
  flex: 0 0 auto;
  width: 360px;
  max-width: 360px;
  scroll-snap-align: center;
}

/* Mobile */
@media (max-width: 1023px) {
  .web-block-carousel .web-block-slide {
    width: 300px;
    max-width: 300px;
  }
}


/* ======================================================
   4. PLAN CARD — FIXED WIDTH, SCALABLE
====================================================== */

.web-plan-card {
  width: 100%;
  background: #fff;
  border-radius: 16px;
  padding: 22px 22px 24px;

  border: 2px solid #e6e9ee;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);

  text-align: center;
  transition: border-color .25s ease, box-shadow .25s ease;
}

/* Highlighted */
.web-plan-card.is-highlighted,
.web-block-slide.is-active .web-plan-card {
  border-color: var(--fm-primary);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}


/* ======================================================
   5. PLAN TYPOGRAPHY
====================================================== */

.plan-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.plan-subtitle {
  font-size: .9rem;
  color: #6b7280;
  margin-bottom: 10px;
}

.plan-price {
  font-size: 1.9rem;
  font-weight: 800;
  margin: 10px 0 0px;
  color: #0f172a;
}

.plan-renewal {
  font-size: 13px;
  color: var(--fm-color-muted);
  margin-bottom: 16px;
}


/* ======================================================
   6. FEATURE LISTS — ICON BASED
====================================================== */

.plan-features,
.plan-restrictions,
.plan-addons {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  text-align: left;
}

.plan-features li,
.plan-addons li,
.plan-restrictions li {
  position: relative;
  padding-left: 26px;
  font-size: .9rem;
  line-height: 1.4;
}

/* Included */
.plan-features li::before,
.plan-addons li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 2px;
  font-weight: 700;
  color: #1f7a3f;
}

/* Restricted */
.plan-restrictions li {
  color: #9ca3af;
  text-decoration: line-through;
}

.plan-restrictions li::before {
  content: "✕";
  position: absolute;
  left: 0;
  top: 2px;
  font-weight: 700;
  color: #9ca3af;
}


/* ======================================================
   7. CTA
====================================================== */

.plan-cta {
  margin-top: 14px;
  padding: 10px 22px;
  font-size: .9rem;
  font-weight: 600;
  border-radius: 999px;
  display: inline-block;
}