/*
Theme Name:   MLS Genie™
Theme URI:    https://mlsgenie.com
Description:  The official WordPress theme for mlsgenie.com — purpose-built for the MLS Genie™ platform. Fast, accessible, and stable.
Author:       RoxxiStudios
Author URI:   https://roxxistudios.com
Version:      1.8.085
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License:      Proprietary
Text Domain:  mls-genie

Changelog:
  1.8.080 — April 2026
    - template-mlsgenie-data-security.php: updated "Your hosting, your data" copy to reflect managed SOC 2 Type II certified hosting included in subscription; removed all WPMU DEV brand references from security items
    - template-mlsgenie-brokerages.php: removed WPMU DEV / WP Engine brand names from hosting row; updated to SOC 2 certified language
    - template-mlsgenie-idx-website.php: removed WP Engine / Kinsta brand names from ownership bullet
  1.8.079 — April 2026
    - template-mlsgenie-data-security.php: updated H1 tagline from "We protect it like it is" to "We protect it like it's ours"
  1.8.078 — April 2026
    - template-mlsgenie-idx-website.php: replaced "Built for SEO" card with "Accessible by Default" card linking to /accessibility — grid stays at 12 cards
    - template-mlsgenie-homepage.php: added "WCAG 2.1 AA accessible by default" row to comparison table in Property Intelligence & SEO group
  1.8.077 — April 2026
    - header-mlsgenie.php: renamed "CINC Migration" to "CINC Alternative" in desktop mega menu and mobile menu
  1.8.076 — April 2026
    - template-mlsgenie-idx-website.php: updated page title, OG title, and meta description to capture IDX Website + Real Estate Website + SEO keyword clusters
  1.8.075 — April 2026
    - style.css: added sticky visual rule for #ownership section on IDX Website page — desktop only (min-width: 1025px)
  1.8.074 — April 2026
    - All templates: updated page builder licence cost from "$50–$100/year" to "around $100/year" across 9 instances in 6 files
  1.8.073 — April 2026
    - template-mlsgenie-genie-portal.php: new GeniePortal™ feature page — buyer/seller/investor dashboards, CRM sync deep-dive, 9-card feature grid, 3 persona app-frame mockups, full schema and FAQ
    - header-mlsgenie.php: GeniePortal™ added to desktop mega menu (Platform column) and mobile menu
    - template-mlsgenie-sitemap.php: GeniePortal™ added to Platform section
  1.8.072 — April 2026
    - template-mlsgenie-idx-website.php: added "Built for SEO" and "Fast by Default" feature cards to complete the 12-card 4x3 feature grid
  1.8.071 — April 2026
    - template-mlsgenie-idx-website.php: replaced single Beaver Builder card with two separate "Agency licence" cards for Beaver Builder and Elementor; updated ownership bullets, comparison table, and FAQ to honestly disclose page builder licence caveat on cancellation
    - template-mlsgenie-pricing.php: updated cancellation note, stack footer, and FAQ to disclose page builder licence caveat
    - template-mlsgenie-solo-agents.php: updated two cancellation FAQs with page builder licence disclosure
    - template-mlsgenie-brokerages.php: updated ownership section and portability copy with disclosure
    - template-mlsgenie-cinc-users.php: updated step 4 copy and comparison table with disclosure
    - template-mlsgenie-boomtown-migrations.php: updated comparison table and FAQ with disclosure
    - template-mlsgenie-about.php: updated "You own your site" values card with disclosure
    - template-mlsgenie-geniecrm.php: updated cancellation FAQ with disclosure
    - template-mlsgenie-homepage.php: updated comparison table row with inline caveat note
  1.8.070 — April 2026
    - template-mlsgenie-homepage.php: replaced unverified ~$499 / ~$1,000 competitor price estimates with "Quote only" labels for BoldTrail and BoomTown (neither publishes pricing); updated FUB to published rates ($69/user, $499/mo team); updated table footnote
    - template-mlsgenie-pricing.php: updated stack comparison disclaimer to note BoldTrail and BoomTown do not publish pricing
  1.8.069 — April 2026
    - template-mlsgenie-homepage.php: added "Page builder compatible" row to comparison table
    - template-mlsgenie-idx-website.php: added page builder compatibility FAQ entry + schema; added page builder bullet to ownership section
  1.8.068 — April 2026
    - template-mlsgenie-pricing.php: added "What does $695 replace?" stack comparison section showing old 10-tool stack vs MLS Genie Agent plan; stack-compare CSS classes added to stylesheet
  1.8.067 — April 2026
    - header-mlsgenie.php: added IDX Website to desktop mega menu (CRM & Listings column) and mobile menu
  1.8.066 — April 2026
    - template-mlsgenie-idx-website.php: new IDX Website feature page — SEO, listing search, and ownership deep-dives with comparison table and full schema
    - template-mlsgenie-sitemap.php: added /idx-website to Platform section
  1.8.065 — April 2026
    - template-mlsgenie-sitemap.php: all inline styles extracted to stylesheet; sm-* CSS classes; mobile/tablet responsive grid; theme folder renamed mls-genie-child → mls-genie
  1.8.061 — April 2026
    - template-mlsgenie-site-analytics.php: new Site Analytics feature page with interactive GA4/GSC dashboard mockup

  1.8.060 — April 2026
    - template-mlsgenie-about.php: rewrite h1, hero sub, story h2, team h2, team copy to reflect dev/design consultancy positioning

  1.8.059 — April 2026
    - template-mlsgenie-genie-pwa.php: fix PHP parse error on line 21 — rewrote $page_schema JSON cleanly

  1.8.058 — April 2026
    - voice-search: h1 updated with visible/contrast-text-only classes

  1.8.061 — April 2026
    - template-mlsgenie-site-analytics.php: new Site Analytics feature page with interactive GA4/GSC dashboard mockup

  1.8.060 — April 2026
    - template-mlsgenie-about.php: rewrite h1, hero sub, story h2, team h2, team copy to reflect dev/design consultancy positioning

  1.8.059 — April 2026
    - template-mlsgenie-genie-pwa.php: fix PHP parse error on line 21 — rewrote $page_schema JSON cleanly

  1.8.058 — April 2026
    - template-mlsgenie-genie-pwa.php: fix critical PHP error caused by unescaped double quotes in $page_schema JSON (FAQ answer)

  1.8.057 — April 2026
    - header-mlsgenie.php: fix broken nav links /geniecrm → /genie-crm, /geniescout → /genie-scout (desktop + mobile menus)

  1.8.056 — April 2026
    - Footer: CINC link → "CINC Alternative", BoomTown link → "BoomTown Alternative"
    - BoomTown h1: "The BoomTown alternative / where you own your data."

  1.8.055 — April 2026
    - CINC and BoomTown pages reframed from "migration/users" to "replacement"
      across all nav, footer, sitemap, SEO, schema, and body copy
    - Nav labels: "CINC Replacement" and "BoomTown Replacement" with competitive
      subtext ("Ditch CINC..." / "Leave BoomTown. Own your platform.")
    - CINC page: SEO title/desc/og/schema updated; hero h1 changed to
      "The CINC alternative your team deserves"; keyword variations mixed
      throughout all sections and FAQs: "leaving CINC", "CINC replacement",
      "CINC alternative", "switching from CINC"
    - BoomTown page: SEO title/desc/og/schema updated; hero h1 changed to
      "The BoomTown alternative that owns your data"; keyword variations mixed
      throughout all sections and FAQs: "leaving BoomTown", "BoomTown
      replacement", "BoomTown alternative", "switching from BoomTown"
    - Sitemap entries updated to match

  1.8.054 — April 2026
    - .nav-inner: removed padding: 0 24px so nav aligns flush with page content

  1.8.053 — April 2026
    - FIXED duplicate OG/Twitter meta tags: root cause confirmed as
      RoxxiStudios™ Managed WP+ head-meta.php firing
      roxxistudios_inject_site_name_meta() at wp_head priority 1 on every
      page, outputting its own og:title/og:description/og:image/twitter:*
      alongside our mlsg_register_seo() output
    - Fix: remove_action( 'wp_head', 'roxxistudios_inject_site_name_meta', 1 )
      added inside the wp_loaded custom-template suppression block so it only
      fires on our marketing pages — RoxxiStudios social meta remains active
      on any standard WordPress pages

  1.8.052 — April 2026
    - FIXED duplicate/incomplete OG block in <head> caused by Jetpack's
      Open Graph module outputting og:title and og:image without og:description
    - Added jetpack_enable_open_graph filter returning false globally so
      Jetpack never outputs OG tags — our theme owns all OG/Twitter meta output
    - Also added remove_action for jetpack_og_tags inside custom template
      suppression block as a belt-and-suspenders fallback

  1.8.051 — April 2026
    - Removed @media(min-width:768px) .et-grid { grid-template-columns:1fr 1fr; gap:64px }

  1.8.050 — April 2026
    - .ft-brand p: removed max-width: 220px

  1.8.049 — April 2026
    - "Most territories are still open" replaced with urgency copy in 3 locations:
      homepage et-note, exclusive territory inline note, exclusive territory CTA

  1.8.048 — April 2026
    - .et-eyebrow: added display:inline-flex, padding:5px 15px,
      border-radius:50px (matched from browser inspector)

  1.8.047 — April 2026
    - GLOBAL 15px minimum font size enforced on all readable content
    - 52 classes raised to 15px across the entire stylesheet including:
      nav tagline, mega menu items, site feature text (.ysf-title, .ysf-desc,
      .ysfl-text, .ys-inc-*), pricing copy (.pt, .pf, .pp span, .cp, .pop,
      .setup-note), comparison table headers, footer text (.ft-brand p,
      .ft-bot-l, .ft-bot-r a), legal page text (.legal-commit-*, .legal-doc-*),
      changelog dates, booking page proof items, doc sidebar/nav links,
      addon notes, CTA notes, card titles, post dates, chip labels, and more
    - Intentionally kept small (UI chrome and mockup elements only):
      hero card mockups (.hcb-*, .lr-*, .pipe-*, .chat-*, .comm-*, .report-*,
      .sl-*, .sas-*, .map-*, .app-bar-*), decorative labels (.eyebrow,
      .mega-col-label, .mm-section-label, .ftag, .mlsg-badge, .ft-col-label,
      .cl-badge, .docs-search__kbd), icon sizes, arrow indicators

  1.8.046 — April 2026
    - Minimum 15px font size enforced on all readable content, navigation,
      and detail text across doc and mega nav components
    - Increased to 15px: .mega-cta-desc (13→15), .mega-item__body strong
      (14→15), .docs-popular__pill (13→15), .docs-popular__label (13→15),
      .docs-filter-btn (14→15), .docs-card__desc (14→15), .docs-card__link
      (13.5→15), .docs-card__all (13→15), .docs-help-card__desc (14→15),
      .docs-help-card__link (13.5→15), .doc-sidebar__back (13→15),
      .doc-sidebar__mod-title (14→15), .doc-sidebar__help p (12→15),
      .doc-sidebar__help a (13→15), .doc-sidebar__link (13.5→15),
      .doc-breadcrumb li (13→15), .doc-nav-link__label (12→15),
      .doc-nav-link__title (14→15), .doc-article-row__num (13→15),
      .doc-article-row__desc (13→15), .doc-mod-footer__back (14→15)
    - Intentionally kept small (UI chrome, not readable copy):
      .mega-col-label, .mm-section-label (11px uppercase tracking labels),
      .nav-tagline (12px decorative), .docs-search__kbd (11px), icon sizes,
      arrow icons, .docs-hero__eyebrow (13px uppercase label),
      .doc-article__body code (14px monospace)

  1.8.045 — April 2026
    - FIXED global nav border-bottom bleeding onto breadcrumbs and all other
      <nav> elements in content areas (doc breadcrumbs, module nav, etc.)
    - Root cause: bare "nav { border-bottom }" selector targeted every nav
      element on the page, not just the header
    - Fix: "nav" and "nav.scrolled" selectors changed to "#nav" and
      "#nav.scrolled" — scoped exclusively to the sticky header element
    - JS scroll handler already used getElementById('nav') — no JS changes

  1.8.044 — April 2026
    - REBUILT docs system architecture — content no longer lives in the database
    - NEW partials/docs-content.php: single PHP file holding all article content
      as a nested array keyed by [module-slug][article-slug]. Deploy theme =
      content updates. No database. No installer. No cache issues. Ever.
    - single-mlsg_doc.php: rewrote to load content from docs-content.php.
      WordPress post_content is ignored. Sidebar order driven by _module.order
      array in the content library. Prev/next computed from same array.
    - taxonomy-mlsg_doc_module.php: rewrote to build article list from
      docs-content.php rather than WP_Query on post_content.
    - partials/docs-installer.php: stripped down to a pure stub creator.
      Creates blank mlsg_doc posts (title + slug only, post_content empty)
      for URL routing. Safe to re-run. Only needs to run once ever.
    - functions.php: installer hook stays on wp_loaded (from v1.8.043)
    - To update any doc article going forward: edit docs-content.php, deploy.

  1.8.043 — April 2026
    - FIXED docs installer not updating live article content despite reporting
      "53 Articles updated"
    - Root cause: installer hook was on admin_init which fires before WordPress
      is fully loaded — wp_update_post() silently failed in that context
    - Fix: hook moved from admin_init to wp_loaded (with is_admin() guard)
      so all WordPress DB functions are fully available when installer runs
    - wp_update_post() result now checked with is_wp_error() and reported
      in the errors list if it fails
    - Cache flush block added after all updates complete (wp_cache_flush plus
      hooks for W3TC, WP Super Cache, LiteSpeed if active)

  1.8.042 — April 2026
    - FIXED docs installer skip-on-exists behaviour: installer now upserts
      rather than skips — existing articles have their title, excerpt, and
      content updated with the latest installer content; missing articles are
      created as before. Re-running the installer now applies all content
      corrections from v1.8.040 to already-installed articles.
    - Results screen: "Already existed (skipped)" renamed to "Articles updated"
    - Footer note updated to reflect upsert behaviour

  1.8.041 — April 2026
    - Front-end content audit against v1.7.294 plugin source — two issues found
    - FIXED template-mlsgenie-genie-layers.php: "School District Overlays"
      removed from all 10 locations (page_description, cta_subtext,
      testimonial, schema description, schema featureList, schema FAQ answer,
      hero subtitle, feature card, boundary packs section copy, pack mockup
      card, buyer experience copy, pricing checklist, pack pricing mid-tier).
      Replaced throughout with Flood Zone Overlays (FEMA data — confirmed
      present in plugin). Layer panel mockup updated: "School districts" →
      "Flood zones", "Twin Peaks SD" → "Flood Zone AE"
    - FIXED template-mlsgenie-genie-pwa.php: "Push Notifications" presented
      as current feature but no VAPID/FCM implementation exists in plugin.
      Feature card, two feature bullets, iOS compatibility note, schema
      featureList, and both FAQ answers updated to "coming soon / roadmap"
      framing. Offline support (service workers confirmed) left as-is.
    - All other 15 marketing page templates verified accurate against plugin

  1.8.040 — April 2026
    - Full docs content audit against v1.7.294 plugin source
    - GenieLayers: all 4 articles rewritten — no custom boundary drawing
      tool exists; articles now accurately describe overlay layer panel,
      layer configuration, boundary auto-loading, and pack installer
    - Pipeline: stages corrected to actual 6 fixed stages (New Lead →
      Contacted → Nurturing → Hot → Under Contract → Closed)
    - CRM nav: Email Log added to nav order in getting-started article
    - Form Bridge routing-rules: round-robin removed (not built); intent
      system (Lead/Inquiry/Skip/Smart) accurately described
    - Form Bridge field-mapping: email-only requirement corrected (not
      email OR phone)
    - Commission Manager: overview and split-rules articles rewritten to
      match actual waterfall engine (ordered steps, percent/flat types,
      templates); anniversary increases removed (not built)
    - GenieAI configuration: rewritten to match actual settings (API key,
      persona name, position, pages, colours, capture mode, notification);
      auto-open delay and after-hours message removed (not built)
    - GenieAI lead routing: round-robin removed (not built)
    - Genie PWA: overview rewritten to describe two separate PWAs (CRM app
      + Your Site App); customising article corrected to actual settings
    - GenieSocial: overview, review-management, and nps-campaigns articles
      rewritten to describe what is actually built; NPS/AI-response/campaign
      fabrications removed; connecting-accounts article added
    - Voice Search: shortcode corrected from [mlsg_voice_search] to
      [mlsg_voice]; parameters corrected (text/width/class)
    - Area Manager: false "boundary editor" reference removed
    - Hub template: GenieLayers, Commission Manager, GenieSocial article
      titles updated to match corrected installer content

  1.8.039 — April 2026
    - FIXED 404s on all doc article URLs
    - Root cause: CPT rewrite slug was flat ("docs") so WordPress generated
      /docs/geniescout-connecting-mls instead of /docs/geniescout/connecting-mls
    - Fix 1 — functions.php: CPT rewrite slug changed to
      "docs/%mlsg_doc_module%" so WordPress generates /docs/[module]/[article]
    - Fix 2 — functions.php: added custom rewrite rule
      ^docs/([^/]+)/([^/]+)/?$ → index.php?mlsg_doc=$matches[2]
    - Fix 3 — functions.php: added post_type_link filter (mlsg_doc_permalink)
      to generate correct /docs/[module]/[article]/ URLs from get_permalink()
    - Fix 4 — docs-installer.php: article post_name changed from
      module-slug+article-slug to article-slug only (e.g. "connecting-mls"
      not "geniescout-connecting-mls")
    - Fix 5 — docs-installer.php: cleanup pass deletes old prefixed-slug
      articles before recreating with correct slugs; results screen shows
      deleted count
    - ACTION REQUIRED: re-run installer at /wp-admin/?mlsg_install_docs=1
      then flush permalinks at Settings → Permalinks → Save Changes

  1.8.038 — April 2026
    - FIXED PHP Fatal error: Cannot redeclare mlsg_footer_link()
    - Root cause: v1.8.037 added a duplicate mlsg_footer_link() declaration
      to functions.php; the original already existed in footer-mlsgenie.php
      without a function_exists guard — PHP fataled on both loads
    - Fix: removed the duplicate from functions.php entirely; added
      if (!function_exists()) guard around the original in footer-mlsgenie.php

  1.8.037 — April 2026
    - Full docs system built — no manual page creation required
    - functions.php: registered mlsg_doc custom post type and mlsg_doc_module
      taxonomy; URLs: /docs/[module-slug]/[article-slug]; installer hook
      at /wp-admin/?mlsg_install_docs=1
    - single-mlsg_doc.php: article template with sticky sidebar (module nav,
      active link, prev/next), breadcrumb, full article body, coming-soon
      state for empty content, prev/next article navigation
    - taxonomy-mlsg_doc_module.php: module index template with dark hero,
      numbered article list, back/support footer
    - partials/docs-installer.php: one-time installer that creates all 12
      modules (taxonomy terms) and ~55 starter articles with full written
      content — safe to re-run, skips existing articles
    - style.css: .doc-page-wrap, .doc-sidebar*, .doc-main, .doc-breadcrumb,
      .doc-article*, .doc-nav-*, .doc-coming-soon, .doc-mod-hero*,
      .doc-mod-articles, .doc-article-list, .doc-article-row*, .doc-mod-footer
      — full responsive (stacks to single column at 768px)

  1.8.036 — April 2026
    - Added template-mlsgenie-docs.php — /docs hub landing page
    - Hero: dark navy section with radial teal glow, live search bar
      (⌘K shortcut), popular article pills
    - Module grid: 12 modules (GenieCRM, GenieScout, GenieLayers, GenieCMA,
      Property Intelligence, Form Bridge, GenieSocial, Commission Manager,
      GenieAI, Genie PWA, Voice Search, Settings & Setup)
    - Each card: icon, title, desc, 3–6 article links, "All articles" footer link
    - Per-card top-border accent colour on hover (module colour)
    - Filter tab row: All / CRM & Leads / Listings & MLS / Marketing / Platform
    - Live instant search filters cards by tags + title as user types
    - No-results state with friendly message
    - Help strip (dark): Talk to a person / See what's new / Book a walkthrough
    - CSS: .docs-hero, .docs-search-*, .docs-popular*, .docs-filter-*,
      .docs-grid, .docs-card*, .docs-help-* — fully responsive
      1-col mobile → 2-col 640px → 3-col 1024px
    - footer-mlsgenie.php: docs search/filter/⌘K JS block added

  1.8.035 — April 2026
    - Vendor sweep: ATTOM, Trestle, Vendasta removed from all visible page
      content and JSON-LD schema across the entire theme
    - header-mlsgenie.php: "ATTOM-powered data & comps" → "Deep property data
      & comparable sales" in Property Intelligence mega menu item
    - geniescout.php: FAQ answer naming Trestle replaced with MLS Genie™
      branded language; schema featureList "Token-based Trestle MLS connection"
      → "Token-based MLS connection"
    - genie-cma.php schema: "ATTOM property data integration" →
      "Property data integration"
    - property-intelligence.php schema: "ATTOM data integration" →
      "Property data integration"
    - exclusive-territory.php schema: Trestle reference removed from FAQ answer
    - Reverted four incorrect changes from v1.8.034 sweep:
      pricing.php team description and featureList restored to CINC wording;
      homepage.php compare table and Team plan feature list restored to CINC
      wording — competitor names are intentional and must not be removed

  1.8.034 — April 2026
    - Who It's For and Resources dropdowns rebuilt as full mega-panel style
      matching the Features panel (full nav width, icon tiles, descriptions)
    - Who It's For: col 1 By Plan (Solo/Team/Broker), col 2 Switching From
      (CINC/BoomTown), col 3 CTA panel linking to /pricing
    - Resources: col 1 Company (About/Changelog), col 2 Trust & Security
      (Exclusive Territory/Data Security), col 3 CTA panel linking to /book-a-demo
    - Added .mega-col--cta, .mega-cta-desc, .mega-cta-btn CSS
    - Removed unused .drop-panel, .drop-item, .drop-divider CSS classes
    - Mobile breakpoint: simplified to .mega-panel display:none !important only
    - nav-item--has-drop class removed from Who It's For and Resources wrappers

  1.8.033 — April 2026
    - Fixed mega menu positioning: .nav-item changed from position:relative to
      position:static so the panel anchors to .nav-inner (full nav width)
      instead of the narrow Features button
    - Mega panel now uses left:0; right:0; width:100% — spans full nav-inner
      width and aligns flush with the nav edges
    - Removed duplicate .nav-inner position:relative rule
    - .mega-inner padding increased to 20px 24px; .mega-col padding to 4px 16px
    - Mega item text sizes bumped: strong 13.5px→14px, span 12px→12.5px

  1.8.032 — April 2026
    - Rebuilt main nav from single-page anchor links to full multi-page structure
    - Desktop: mega menu panel for Features (3 columns: CRM & Listings,
      Marketing & AI, Platform) with icon tiles per feature page
    - Desktop: simple dropdowns for Who It's For and Resources
    - Desktop: direct link for Pricing; Book a demo CTA now points to /book-a-demo
    - Mobile: flat anchor list replaced with accordion groups (tap to expand);
      Features panel contains mm-section-label groupings
    - New CSS: .nav-item, .nav-link, .nav-link--trigger, .nav-chevron,
      .mega-panel, .mega-inner, .mega-col, .mega-col-label, .mega-item,
      .mega-item__icon, .mega-item__body, .drop-panel, .drop-item, .drop-divider,
      .mm-group, .mm-group__trigger, .mm-chevron, .mm-group__panel,
      .mm-section-label, .mm-link, .mm-direct-link
    - Mobile breakpoint: mega-panel and drop-panel forced display:none !important
    - footer-mlsgenie.php: desktop panel toggle JS (click-outside + Escape),
      mobile accordion JS (one panel open at a time)

  1.8.031 — April 2026
    - FIXED data-security.php parse error (line 93): $practice_ids and
      $practices were split across two separate <?php blocks — merged into
      one continuous PHP block so no double opening tag
    - FIXED legal.php: duplicate class= on legal-commit-icon i element
    - Full audit: no other double <?php or duplicate class= issues found

  1.8.030 — April 2026
    - Fixed PHP parse error in privacy-policy and cookie-policy:
      $section_ids array was inserted inside the $sections array closing bracket
      causing a fatal PHP syntax error on line 97

  1.8.029 — April 2026
    - Fixed legal hub link pills — were using $doc['url'] (just /terms-of-service)
      instead of $anchor (the full anchored URL like /terms-of-service#billing)

  1.8.028 — April 2026
    - .ft-col ul li a font-size: 15px → 15px

  1.8.027 — April 2026
    - Fixed broken PHP injection in terms-of-service, privacy-policy,
      cookie-policy — section_ids array was placed outside PHP tags
      causing blank pages and fatal errors
    - All three templates now have correct PHP id lookup blocks
    - Accessibility page was unaffected (confirmed 155 lines intact)

  1.8.027 — April 2026
    - Fixed missing $section_ids array in privacy-policy and cookie-policy
      (was causing $section_id to be undefined, breaking section rendering)
    - All three legal document templates now correctly output id= anchors
    - Accessibility template confirmed intact (155 lines, all content present)

  1.8.026 — April 2026
    - Added section id= anchors to all legal document templates:
      terms-of-service (12 sections), privacy-policy (11), cookie-policy (9),
      data-security (8 practice cards + disclosure section)
    - Updated all legal hub document link pills with proper anchor URLs:
      e.g. /terms-of-service#billing, /privacy-policy#your-rights, etc.
    - Accessibility statement links point to existing heading IDs
    - scroll-padding-top increased to 88px so anchors clear the fixed nav

  1.8.025 — April 2026
    - Legal hub: all inline styles moved to stylesheet
    - New classes: legal-commits-strip, legal-commits-inner, legal-commit-item,
      legal-commit-icon/label/sub, legal-doc-list, legal-doc-card,
      legal-doc-card-inner, legal-doc-body, legal-doc-icon, legal-doc-content,
      legal-doc-title-row, legal-doc-updated, legal-doc-desc, legal-doc-links,
      legal-doc-link, legal-doc-cta, legal-doc-btn, legal-contact-note,
      legal-contact-icon, legal-contact-body, legal-contact-text
    - Mobile: commits strip 1-col, doc cards stacked, contact note column
    - Tablet (640px+): commits strip 2-col, doc card grid layout restored
    - Desktop (1024px+): commits strip flex row
    - legal-doc-desc font increased to 16px (was 14px inline)
    - hero--compact class for min-height:300px hero variant

  1.8.024 — April 2026
    - Book-a-demo: unified icon boxes — .demo-agenda-icon and .demo-proof-icon
      replaced with single .demo-icon-box class (44px, 10px radius, teal-bg)
    - Fixed duplicate class= on proof strip icon element
    - Proof strip icons now identical size/style to agenda icons

  1.8.023 — April 2026
    - Book-a-demo page: all inline styles moved to stylesheet
    - New classes: demo-heading, demo-agenda-item, demo-agenda-icon,
      demo-agenda-title, demo-booking-card, demo-booking-sub,
      demo-proof-strip, demo-proof-item, demo-proof-icon, demo-proof-title,
      demo-proof-sub
    - Agenda items: icons expanded to 44px with 18px icon
    - Booking card: 28px padding mobile → 36px at 640px
    - Proof strip: 2-col on mobile → 4-col at 640px
    - Proof icons expanded to 56px with 22px icon
    - All font sizes increased from 13-14px to 15-16px for readability

  1.8.022 — April 2026
    - Changelog page: all inline styles moved to stylesheet
    - New classes: cl-row, cl-meta, cl-version, cl-date, cl-badge,
      cl-content, cl-items, cl-item, cl-dot, cl-footer
    - Mobile: version/date/badge in a flex row above the items list
    - Desktop (640px+): 120px sidebar on left, items with left border on right
    - cl-item font increased to 15px (was 14px inline)

  1.8.021 — April 2026
    - Fixed duplicate class= on pricing addon cards (fade-up + pricing-addon-card
      were two separate class= attributes — browser ignored the second one,
      stripping all card styling)
    - Full sitewide duplicate class= sweep — 2 more fixed in pricing template

  1.8.020 — April 2026
    - Pricing add-ons grid: all inline styles moved to stylesheet
    - New classes: addons-section, pricing-addons-grid, pricing-addon-card,
      pricing-addon-icon, pricing-addon-footer, pricing-addon-note
    - Grid: 1-col mobile → 2-col at 480px → 3-col at 1024px
    - Cards use flex-direction:column with margin-top:auto on footer
      so price/note always sits at the bottom regardless of content height

  1.8.019 — April 2026
    - Updated hosting copy sitewide (15 replacements across 8 templates)
    - Old: "your hosting" / "your own hosting" (implied client manages hosting)
    - New: "managed hosting included in your subscription" with note that
      the site is fully portable if they ever cancel
    - Updated: about, boomtown, brokerages, cinc, data-security, legal,
      pricing, solo-agents — including schema JSON strings

  1.8.018 — April 2026
    - Fixed root cause of no-gap stacking: duplicate class= attributes
      were causing grid classes (mlsg-cards-2, migration-step etc) to be
      completely ignored by the browser — only the first class= is used
    - Fixed 6 duplicate class= attributes across 4 templates sitewide
      (about, accessibility, cinc-users, exclusive-territory)
    - Added .stat-card and .stat-num CSS classes for About page facts grid
    - Replaced 2 inline styles on stat cards in about.php

  1.8.017 — April 2026
    - Fixed duplicate class= attribute on BoomTown migration step cards
      (was causing migration-step--light styles to not apply)
    - Moved icon inline style to .migration-step-icon class
    - .mlsg-steps-grid: added connector line between steps at 1024px+
    - Step cards: cleaner spacing, consistent 15px body text, centre-aligned
    - Grid gap tightened: 16px mobile, 20px tablet, connected at desktop

  1.8.016 — April 2026
    - ROOT CAUSE FIX: removed overflow-x:hidden from html and body — this was
      preventing ALL child elements from scrolling horizontally
    - Removed broken display:block global table rule (was distorting layouts)
    - Table scroll now handled via wrapper classes: .ct-wrap, .compare-scroll,
      .mlsg-table-scroll — overflow-x:auto on the wrapper, min-width:480px on table
    - Exempted table/thead/tbody/tr/th/td from max-width:100% global rule so
      tables inside scroll wrappers are not constrained by it
    - Both tables (homepage compare, BoomTown comparison) already have correct
      scroll wrappers — no HTML changes needed

  1.8.015 — April 2026
    - All tables on mobile (max-width:767px) now scroll horizontally
    - Uses display:block on table + overflow-x:scroll to enable scrolling
      without needing wrapper divs in every template
    - Inner elements (thead/tbody/tr/th/td) restored to correct display types

  1.8.014 — April 2026
    - Fixed broken comparison table layout from v1.8.013
    - Removed display:flex/flex-direction:column from td cells — table cells
      cannot be flex containers without breaking table layout entirely
    - ct-td--other and ct-td--hl now use standard table-cell display
    - line-height:normal retained on all cells as requested
    - text-align:center on non-label columns retained
    - .ct-td i gets display:block so icons stack above text naturally
    - Table is horizontally scrollable (overflow-x:auto on .ct-wrap) on mobile

  1.8.013 — April 2026
    - BoomTown comparison table: all inline styles moved to stylesheet
    - New classes: ct-wrap, ct-table, ct-thead-row, ct-th (--label/--other/--hl),
      ct-row, ct-td (--label/--other/--hl)
    - Mobile: ct-td--other/hl use flex-direction:column so icon stacks above text
    - All cells: line-height:normal as requested
    - Rows: text-align:center on non-label columns
    - Table font-size increased to 15px (was 14px inline)
    - ct-wrap has border-radius:14px and overflow:hidden for clean card look
    - Desktop (640px+): cells revert to display:table-cell

  1.8.012 — April 2026
    - CINC and BoomTown migration sections fully moved to stylesheet (21 replacements)
    - New classes: compare-col (--danger/--success), compare-col-label, compare-item,
      mlsg-steps-grid (1→2→4 col responsive), migration-step (--light variant),
      migration-step-title, migration-step-desc, migration-callout (stacks on mobile
      → row at 480px), migration-callout-icon/title/body, gain-item/icon/label
    - Added breathing room: mobile padding 24px → 28px 32px at 480px+
    - migration-step-desc font increased to 15px (was 13px inline)
    - migration-callout-body font increased to 15px (was 14px inline)

  1.8.011 — April 2026
    - Addon section fully moved to stylesheet across 4 templates (61 replacements)
    - Fixed duplicate class= attribute on .addons-wrap element
    - New classes: .addons-wrap (proper padding + breathing room), .addon-header
      (flex-direction:column mobile → row at 640px), .addon-icon (+ --grey/--white/--teal
      variants), .addon-body (flex:1;min-width:0), .addon-badge (+ --solid variant)
    - .addons-wrap padding increased: 24px mobile → 28px 32px at 640px+

  1.8.010 — April 2026
    - Addon cards: inline styles moved to stylesheet as .addon-card class
    - .addon-card: flex-direction:column on mobile → row at 480px+
    - .addon-card--teal: teal background variant
    - 22 inline styles replaced across 4 templates (homepage, solo-agents,
      agent-teams, brokerages)

  1.8.009 — April 2026
    - Fixed voice search three-step section stacking on mobile
    - Removed inline style="grid-template-columns:repeat(3,1fr)" override
      on .feat-grid in voice-search template (inline style was defeating
      the responsive class rules — specificity issue)
    - .feat-grid base now mobile-first: 1-col base → 2-col at 640px
      → 3-col at 1024px via min-width queries

  1.8.008 — April 2026
    - Fixed boundary pack tier grid stacking on mobile (GenieLayers page)
    - New .mlsg-pack-grid: 1-col base → 3-col at 400px
      (cards are compact enough to sit 3-wide even on small phones)

  1.8.007 — April 2026
    - .step mobile rule: align-items flex-start → center, added flex-wrap:wrap
      and align-content:center to match designer intent from inspector

  1.8.006 — April 2026
    - Fixed 2-col split sections not collapsing on mobile
    - Added .mlsg-split: 1-col base → 2-col at 768px
    - Added .mlsg-cards-2: 1-col → 2-col at 640px
    - Added .mlsg-cards-3: 1-col → 2-col at 640px → 3-col at 1024px
    - Converted 9 inline grid styles to proper classes across 6 templates
    - h-card mockup internal grids (gap:4-8px) left untouched

  1.8.005 — April 2026
    - Fixed stacking card grids on mobile (exclusive territory, pricing, about)
    - New .mlsg-tier-grid class: 1-col base → 2-col at 640px → 3-col at 1024px
    - .pg pricing grid: now mobile-first (1-col base → 2-col at 640px → 3-col at 1024px)
    - Replaced inline style grid on 3 templates with .mlsg-tier-grid class

  1.8.004 — April 2026
    - 404.php: removed quick-links nav section

  1.8.003 — April 2026
    - Fixed horizontal overflow causing white gap on right side on mobile
    - html and body: added overflow-x:hidden and width:100%
    - .inner container: added width:100% and box-sizing:border-box
    - Global overflow guard: max-width:100% on all elements via universal
      selector — prevents any child element from blowing out the layout
    - img/video/iframe: max-width:100%;height:auto (responsive media)
    - Exception for absolute positioned decorative elements (glows etc)

  1.8.002 — April 2026
    - 404.php: now uses get_header/footer mlsgenie — full branded header and footer
    - 404.php: redesigned — dark hero section, large 404 number, two CTAs,
      quick-link nav pills for key pages, proper SEO registration
    - index.php, page.php, single.php, archive.php, search.php: all updated
      to use get_header/footer mlsgenie instead of bare WordPress defaults
    - Added .mlsg-404-link CSS class for 404 quick-link pills

  1.8.001 — April 2026
    - Restored SEO plugin suppression block dropped during functions.php rewrite
    - Suppresses Yoast, RankMath, AIOSEO, and SEOPress output on all custom
      templates — was causing og:description to be output as blank/missing
      by the SEO plugin overwriting our priority-1 wp_head output
    - All 30 templates confirmed with non-empty page_description values

  1.8.001 — April 2026
    - Homepage Exclusive Territory section: all inline styles removed
    - New CSS classes: et-grid, et-eyebrow, et-heading, et-points,
      et-point, et-point__icon, et-point__text, et-chip-label,
      et-note, et-note__text, et-note__link
    - Mobile-first: stacks to single column on mobile,
      2-col side-by-side at 768px+
    - get_stylesheet_directory() → get_template_directory() in partial include

  1.8.000 — April 2026
    - MAJOR: Converted from Astra child theme to standalone primary theme
    - Removed Template: astra dependency entirely
    - functions.php: full rewrite — add_theme_support (title-tag, post-thumbnails,
      html5, custom-logo, align-wide), register_nav_menus (primary + footer),
      standalone stylesheet enqueue (no parent), cleaned wp_head output
    - Font Awesome Pro and Google Fonts now properly enqueued via wp_enqueue_script
    - Fade-up IntersectionObserver moved from header PHP to wp_add_inline_script
    - Added core WordPress templates: page.php, single.php, archive.php, search.php
    - Updated index.php and 404.php to remove Astra references
    - Text domain: mls-genie → mls-genie
    - get_stylesheet_directory_uri() → get_template_directory_uri() throughout
    - Added core template CSS: page header, post grid, post cards, archive styles
    - Theme is now fully independent — Astra plugin no longer required

  1.7.038 — April 2026
    - Footer nav labels restored to h3 (correct hierarchy: h1→h2→h3)
    - .ft-col-label now applied to h3 elements in footer

  1.7.037 — April 2026
    - Footer nav column labels changed from <h4> to <p class="ft-col-label">
    - Fixes WCAG heading hierarchy violation (H2 → H4 skip was invalid)
    - .ft-col h4 CSS renamed to .ft-col-label (same visual result)
    - Footer heading outline is now clean: no heading elements in nav columns

  1.7.036 — April 2026
    - Footer h4 nav labels: added aria-hidden="true" so they no longer
      appear in the document heading outline (they are nav labels, not
      content headings) — fixes Ahrefs/screen reader heading structure
    - Footer ul: switched from aria-labelledby to aria-label for nav lists
    - Footer h4 CSS: colour forced to rgba(255,255,255,.5) with !important
      to beat Astra overrides — fixes invisible footer column titles
    - Font size reduced to 11px uppercase tracking style (nav label pattern)

  1.7.035 — April 2026
    - FAQ questions changed from <div> to <h3> across all 18 FAQ sections
    - FAQ answers changed from <div> to <p> across all 18 FAQ sections
    - Updated .mlsg-faq-q CSS to properly reset h3 heading defaults
      (font-family, letter-spacing, line-height) so it renders correctly
    - Semantic improvement: screen readers and search engines now correctly
      identify FAQ questions as section headings

  1.7.034 — April 2026
    - 93 readable-copy inline font-size styles replaced with CSS classes
      across 22 templates — add-on names, descriptions, copy, prices,
      section headings, eyebrows
    - New classes: mlsg-card-title, mlsg-card-desc, mlsg-copy,
      mlsg-section-title, mlsg-section-sub, mlsg-price-label,
      mlsg-heading-sm (all sized at 16px+ in stylesheet)
    - Mockup internals (8-12px h-card elements) left untouched

  1.7.033 — April 2026
    - .mlsg-desc font-size: 15px → 18px
    - .mlsg-feat font-size: 15px → 15px

  1.7.032 — April 2026
    - Footer tagline: "Owned by you" → "Your data. Your site. Always."

  1.7.031 — April 2026
    - Removed 46 inline font-size/color/line-height style attributes across
      23 templates that were overriding the stylesheet font size increases
    - Added FAQ component CSS to stylesheet (mlsg-faq-q, mlsg-faq-a)
      with attribute selectors as fallback for any remaining inline styles
    - Affected: all FAQ sections sitewide

  1.7.030 — April 2026
    - Fixed Form Bridge / CINC lead flow description across all pages
    - Corrected: Form Bridge feeds leads into BOTH GenieCRM™ and CINC
      simultaneously during the 30-45 day transition — not CINC into Genie
    - Affected: cinc-users (hero, steps, callout, 3 FAQs, testimonial,
      meta description), agent-teams (feature list, FAQ), geniecrm (feature
      list, FAQ)

  1.7.030 — April 2026
    - Increased content font sizes to accessible levels:
      .step p       13px → 16px  (step descriptions)
      .fc p         13px → 16px  (feature card body)
      .pi-text      13px → 16px  (problem section text)
      .sol-box p    13px → 16px  (solution box text)
      table.ct td   13px → 16px  (comparison table cells)
      .pd           13px → 16px  (pricing descriptions)
      .sec-sub      15px → 16px  (section subtitles)
      .hero-sub     15px → 17px  (hero subtitles)
      .nav-links a  14px → 15px  (nav links)
      .btn-primary/ghost 14px → 15px (buttons)
    - UI chrome, h-card mockup internals, labels left unchanged

  1.7.029 — April 2026
    - Moved CSS verbatim from header-mlsgenie.php inline <style> block
      into style.css — zero rules changed, zero values changed
    - header-mlsgenie.php reduced to 154 lines (PHP + HTML only)
    - style.css now single source of truth for all theme styles

  1.7.028 — April 2026
    - Added FAQ sections (visible HTML) to 18 pages — 5-6 questions each
    - Added FAQPage JSON-LD schema node to @graph on all 18 pages
    - CINC and BoomTown pages: additional FAQ section added (id=faq-more)
    - Migration-related pages: CINC, BoomTown, Solo Agents, Agent Teams,
      Brokerages all include migration and transition questions
    - All FAQ answers use esc_html() and match existing section styling
    - Homepage featureList already included migration features (v1.7.027)

  1.7.027 — April 2026
    - Fixed missing og:description and twitter:description in page source
    - Root cause: get_query_var() returns empty string for unregistered vars
      even when set_query_var() was called — WordPress requires vars to be
      registered via add_query_var() for get_query_var() to read them back
    - Fix: header-mlsgenie.php now reads directly from $wp_query->query_vars
      which set_query_var() writes to without a registration requirement

  1.7.028 — April 2026
    - Added FAQ sections (visible HTML) to 18 pages — 5-6 questions each
    - Added FAQPage JSON-LD schema node to @graph on all 18 pages
    - CINC and BoomTown pages: additional FAQ section added (id=faq-more)
    - Migration-related pages: CINC, BoomTown, Solo Agents, Agent Teams,
      Brokerages all include migration and transition questions
    - All FAQ answers use esc_html() and match existing section styling
    - Homepage featureList already included migration features (v1.7.027)

  1.7.027 — April 2026
    - Renamed "Genie AI™" to "GenieAI™" across all 12 occurrences sitewide
    - Expanded featureList in JSON-LD schema on 12 product/platform pages:
      GenieAI (11), GenieCRM (15), GenieScout (15), GenieCMA (15),
      GenieLayers (14), GeniePWA (12), GenieSocial (12),
      Property Intelligence (14), Review Management (14),
      Commission Manager (14), Voice Search (11), Homepage (16)

  1.7.026 — April 2026
    - Trimmed meta titles and descriptions to within Google spec limits
      on all 21 over-length pages (title ≤60 chars, description ≤160 chars)
    - All 30 templates now within spec — longest title 53 chars,
      longest description 135 chars

  1.7.025 — April 2026
    - Fixed root cause of schema and meta not outputting in page source
    - Problem: get_header() uses load_template() which does not inherit
      the calling template variable scope — $page_schema and all SEO
      variables were silently null inside header-mlsgenie.php
    - Fix: all 30 templates now call set_query_var() for all 6 SEO values
      before get_header(); header reads them via get_query_var()
    - Schema JSON-LD, meta description, canonical, OG, and Twitter tags
      will now correctly appear in page source

  1.7.024 — April 2026
    - Added favicon.ico (7 sizes: 16,24,32,48,64,128,256px) to theme root
    - functions.php: added get_site_icon_url filter and wp_head priority 0
      hook to output link rel=icon tags pointing to theme favicon.ico

  1.7.023 — April 2026
    - Added explicit cancellation consequences across all relevant pages:
      plugin stops working, territory is released, data stays with subscriber
    - Terms of Service: updated section 2 (plugin is licensed not sold);
      added new section 3a (Cancellation) with all three consequences;
      updated section 5 to clarify plugin vs data ownership distinction
    - Exclusive Territory FAQ: expanded cancel answer with all three points
      and 7-day territory notice period
    - Pricing page: added amber cancellation notice below territory note
    - About page: updated values card with accurate plugin licence note
    - CINC page: updated migration step 4 and pros list with plugin caveat
    - BoomTown page: updated cancel table row with plugin subscription note

  1.7.022 — April 2026
    - Replaced all overly broad ownership claims with accurate balanced language
    - "You own everything" / "own outright" / "own it all" → two specific phrases:
      Headlines/badges: "Your data. Your site. Always."
      Inline copy:      "Your data is yours — full export, no lock-in"
    - Added clarification where needed: plugin is subscription-licensed;
      site and data stay with subscriber on cancellation
    - Affected: boomtown-migrations, brokerages, cinc-users, about,
      homepage, terms-of-service, legal

  1.7.021 — April 2026
    - BoomTown page: fixed broken FA icons in comparison table — esc_html()
      was escaping the <i> tags; changed to wp_kses_post() on BT and Genie columns

  1.7.020 — April 2026
    - Contact page: replaced CF7 placeholder shortcode with Forminator form 307

  1.7.019 — April 2026
    - Contact page: replaced self-referencing "Have a question? Contact us" note
      below the form with "Not sure which plan? View pricing →" (/pricing)

  1.7.018 — April 2026
    - Contact page: replaced redundant Email us card with See pricing card
      (visitor is already on contact page — linking back to /contact was useless)

  1.7.017 — April 2026
    - style.css: added a.btn.btn-primary:focus { color: white } to prevent
      Astra overriding button text colour on keyboard focus

  1.7.016 — April 2026
    - header-mlsgenie.php: .step h3 color changed from white to var(--text)

  1.7.015 — April 2026
    - Added template-mlsgenie-legal.php — hub page linking to all 5 legal
      documents with descriptions, section links, key commitments strip,
      and contact note
    - Added /legal to footer legal column (top of list)

  1.7.014 — April 2026
    - header-mlsgenie.php: .pf align-items changed from flex-start to center

  1.7.013 — April 2026
    - Added template-mlsgenie-sitemap.php — dynamic sitemap page showing all
      29 pages across 4 sections (Platform, Audience, Company, Legal) plus
      a dynamic WordPress pages section for any additional published pages
    - Added template-mlsgenie-accessibility.php — WCAG 2.1 AA accessibility
      statement with 9 practice cards, scope/limitations section, and
      feedback CTA linking to /contact
    - Added Accessibility link to footer legal column

  1.7.012 — April 2026
    - All hello@mlsgenie.com email references replaced with /contact page links
    - Affected: footer, contact, terms-of-service, privacy-policy,
      cookie-policy, book-a-demo
    - security@mlsgenie.com retained as mailto (responsible disclosure)
    - Schema JSON-LD contactPoint email field retained (metadata only)

  1.7.011 — April 2026
    - Territory chips: Wrightwood, CA updated from claimed to available

  1.7.010 — April 2026
    - Fixed SEO meta override — tags now output via wp_head priority 1
      so they are the single source of truth in the document
    - functions.php: added mlsg_register_seo() registry function; templates
      pass all SEO values through header-mlsgenie.php which calls it
    - Yoast, RankMath, AIOSEO, SEOPress all suppressed via priority-0
      wp_head hooks (fires before plugins bind their own actions)
    - pre_get_document_title returns our title at priority 99 (wins over WP)
    - header-mlsgenie.php: removed hardcoded meta/OG/Twitter/schema block;
      all output now comes from wp_head hook in functions.php
    - No more duplicate title or description tags in page source

  1.7.009 — April 2026
    - CINC page full rewrite: repositioned as CINC replacement not add-on
      - New headline: Replace CINC. Keep every lead. Own your platform.
      - Side-by-side CINC vs MLS Genie comparison (8 points each)
      - Zero-downtime migration section: 4-step process with Form Bridge callout
      - Form Bridge explained as the safety net during migration
      - What you gain section: 8 features CINC doesn't have
      - 6-question migration FAQ
      - Updated meta title, description, testimonial, CTA, and JSON-LD schema

  1.7.008 — April 2026
    - Added SEO meta overrides to functions.php: suppresses WordPress title
      tag and Yoast/RankMath/AIOSEO output on all custom templates
    - header-mlsgenie.php: full SEO upgrade — canonical link, complete Open
      Graph tags (og:image, og:site_name, og:locale), full Twitter/X card
      meta, and JSON-LD schema output block via $page_schema variable
    - Added $page_schema JSON-LD to all 27 page templates:
      Homepage       → WebSite + Organization + SoftwareApplication
      Product pages  → SoftwareApplication with featureList + offers
      Audience pages → Service + Audience + Offer
      Migration pages→ Service + Audience
      About          → Organization + Person
      Pricing        → SoftwareApplication with 3 Offer nodes
      Exclusive Territory → Service + termsOfService
      Contact        → ContactPage + ContactPoint
      Book a Demo    → Event (free, online)
      Changelog      → SoftwareApplication with softwareVersion
      Legal pages    → WebPage with BreadcrumbList where appropriate
    - Fixed GenieScout description: removed internal tech jargon
    - Added $page_og_image variable defaulting to screenshot.png

  1.7.007 — April 2026
    - Replaced all emoji and Unicode glyphs with Font Awesome icons sitewide
    - fa-solid fa-lock replaces all lock emoji throughout
    - fa-solid fa-check / fa-xmark replace ✓ / ✗ in lr-av and tables
    - Proof strip in book-a-demo rebuilt with fa icon boxes
    - Territory chips: claimed/available labels now use fa-lock / fa-check
    - San Bernardino Mountains: all areas set to claimed
    - Major SoCal cities added as available territories (20 cities)
    - Avatar initials retained — Font Awesome has no suitable replacement

  1.7.006 — April 2026
    - Legal branding: all references updated to lead with MLS Genie™
    - Standalone RoxxiStudios LLC → MLS Genie™
    - Where RoxxiStudios must appear → MLS Genie™ — a RoxxiStudios™ product
    - Affected: terms-of-service, privacy-policy, cookie-policy,
      exclusive-territory, about, changelog, footer-mlsgenie, header-mlsgenie

  1.7.005 — April 2026
    - Fixed hero layout on all 9 new page templates to match existing site
      pattern: left-aligned hero-content + right-side h-card mockup
    - Affected: about, book-a-demo, changelog, contact, pricing,
      terms-of-service, privacy-policy, data-security, cookie-policy
    - Each h-card shows contextually relevant mock data for its page

  1.7.004 — April 2026
    - Broker pricing changed to quoted on demand across all pages
    - Pricing page meta description updated to remove Broker price point
    - Broker card copy updated to reflect custom scoped engagements

  1.7.003 — April 2026
    - Removed all service/data provider names from user-facing templates
      (replaced with generic descriptions: "property data", "MLS data",
      "industry-standard authenticated encryption", etc.)
    - Affected: agent-teams, book-a-demo, boomtown-migrations, changelog,
      cinc-users, data-security, geniescout, pricing, privacy-policy,
      terms-of-service

  1.7.002 — April 2026
    - Exclusive Territory model updated to tiered scope:
      Agent = 1 exclusive ZIP (blocks other Agents only)
      Team  = 1 exclusive region / city-boundary scope (blocks Team + Broker)
      Broker = 1 exclusive region, broader scope (blocks Team + Broker)
    - Additional ZIPs / regions available as paid add-ons (all tiers)
    - Founding member grandfathered arrangements noted anonymously
    - Exclusive Territory page: full rewrite of how-it-works, why-it-matters,
      FAQ, and hero copy to reflect tiered model
    - Homepage pricing cards: territory line item now shows tier-specific scope
    - Pricing page: territory note and add-ons grid updated
    - Terms of Service Section 4: rewritten with full tiered exclusivity language

  1.7.001 — April 2026
    - Added Exclusive Territory page template and shared territory-chips partial
    - Added homepage Exclusive Territory section (dark, between pricing and footer)
    - Added Exclusive Territory line item to all three pricing cards on homepage
    - Added Exclusive Territory note to site-wide footer
    - Added all missing footer link templates: /cinc-users, /boomtown-migrations,
      /about, /pricing, /changelog, /contact, /book-a-demo, /terms-of-service,
      /privacy-policy, /data-security, /cookie-policy
    - Added index.php fallback template (Astra header/footer)
    - Added 404.php branded error page (Astra header/footer)
    - Added screenshot.png (1200x900)

  1.7.000 — April 2026
    - Initial release
    - header-mlsgenie.php / footer-mlsgenie.php custom shell
    - 15 product and audience page templates
    - style.css + functions.php Astra child theme scaffolding
*/

/* ── Button focus fix ────────────────────────────────────────────────────── */
/* Ensures primary button text stays white when focused (Astra override).    */
a.btn.btn-primary:focus {
    color: white;
}



* {
	box-sizing: border-box;
	margin: 0;
	padding: 0
}

:root {
	--teal: #107dbd;
	--teal-dark: #0d6da3;
	--teal-deeper: #0a5a8a;
	--teal-bg: #e8f4fb;
	--teal-bg-light: #f0f7fd;
	--teal-border: #b3d9f0;
	--navy: #1a2633;
	--navy-deep: #0f172a;
	--navy-mid: #1e293b;
	--text: #111827;
	--text-med: #374151;
	--text-sec: #4b5563;
	--text-muted: #6b7280;
	--text-subtle: #9ca3af;
	--white: #ffffff;
	--bg: #f9fafb;
	--bg-subtle: #f3f4f6;
	--border: #e5e7eb;
	--border-light: #d1d5db;
	--success: #059669;
	--success-bg: #ecfdf5;
	--success-border: #86efac;
	--danger: #dc2626;
	--danger-bg: #fef2f2;
	--danger-border: #fecaca;
	--warning: #b45309;
	--warning-bg: #fffbeb;
	--font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 88px
}

body {
	font-family: var(--font);
	color: var(--text);
	background: var(--white);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	width: 100%
}

/* ── SKIP LINK ── */
.skip-link {
	position: absolute;
	top: -100%;
	left: 16px;
	z-index: 9999;
	padding: 10px 18px;
	background: var(--teal);
	color: white;
	font-size: 15px;
	font-weight: 700;
	border-radius: 0 0 8px 8px;
	text-decoration: none;
	transition: top .15s
}
.skip-link:focus {
	top: 0
}

/* ── FOCUS STYLES ── */
:focus-visible {
	outline: 3px solid var(--teal);
	outline-offset: 3px;
	border-radius: 3px
}
button:focus-visible,
a:focus-visible {
	outline: 3px solid var(--teal);
	outline-offset: 3px;
	border-radius: 4px
}
/* ── BUTTONS ── */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-family: var(--font);
	font-weight: 600;
	border-radius: 8px;
	cursor: pointer;
	transition: all .15s;
	text-decoration: none;
	border: none;
	white-space: nowrap
}

.btn-primary {
	background: var(--teal);
	color: white;
	padding: 10px 22px;
	font-size: 15px
}

.btn-primary:hover {
    color: white;
	background: var(--teal-dark);
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(16, 125, 189, .3)
}

.btn-ghost {
	color: var(--text-sec);
	background: transparent;
	border: 1px solid var(--text-subtle);
	padding: 10px 22px;
	font-size: 15px
}

.btn-ghost:hover {
	border-color: var(--teal);
	color: var(--teal);
	background: var(--teal-bg-light)
}

.btn-lg {
	padding: 13px 28px;
	font-size: 15px;
	border-radius: 10px
}

.btn-outline-w {
	color: white;
	border: 1.5px solid rgba(255, 255, 255, .35);
	background: rgba(255, 255, 255, .08);
	padding: 13px 28px;
	font-size: 15px;
	border-radius: 10px
}

.btn-outline-w:hover {
	background: rgba(255, 255, 255, .16);
	border-color: rgba(255, 255, 255, .55)
}

.btn-full {
	width: 100%
}

a.btn.btn-outline-w:hover {
    color: white;
}

a.btn.btn-primary.btn-lg:hover {
    color: white;
}
/* ── NAV ── */

#nav {
	position: sticky;
	top: 0;
	z-index: 200;
	background: rgba(255, 255, 255, .97);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--border);
	transition: box-shadow .2s
}

#nav.scrolled {
	box-shadow: 0 2px 16px rgba(0, 0, 0, .07)
}

.nav-inner {
	max-width: 1160px;
	margin: 0 auto;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative
}

.nav-tagline {
	font-size: 15px;
	font-weight: 600;
	color: var(--text-muted);
	letter-spacing: .04em;
	pointer-events: none;
	white-space: nowrap
}

.mlsg-logo-block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	flex-shrink: 0
}

.mlsg-logo-block p {
	margin-bottom: 0 !important
}

.nav-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none
}

/* ── Nav links row ── */
.nav-links {
	display: flex;
	align-items: center;
	gap: 4px
}

/* Base link / trigger shared styles */
.nav-link,
.nav-links > a.nav-link {
	font-size: 15px;
	font-weight: 500;
	color: var(--text-sec);
	text-decoration: none;
	transition: color .15s;
	white-space: nowrap
}

.nav-link--trigger {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: transparent;
	border: none;
	cursor: pointer;
	font-family: var(--font);
	padding: 8px 12px;
	border-radius: 6px;
	transition: color .15s, background .15s
}

.nav-link--trigger:hover,
.nav-link--trigger[aria-expanded="true"] {
	color: var(--teal);
	background: var(--teal-bg-light)
}

.nav-links > a.nav-link {
	padding: 8px 12px;
	border-radius: 6px
}

.nav-links > a.nav-link:hover {
	color: var(--teal);
	background: var(--teal-bg-light)
}

.nav-chevron {
	transition: transform .2s;
	flex-shrink: 0
}

.nav-link--trigger[aria-expanded="true"] .nav-chevron {
	transform: rotate(180deg)
}

/* ── Nav item wrapper ── */
.nav-item {
	position: static
}

/* ── Simple dropdown panel — REMOVED (all panels now use mega-panel) ── */

/* ── Mega CTA column ── */
.mega-col--cta {
	background: var(--bg-subtle);
	border-radius: 10px;
	padding: 16px 20px !important;
	display: flex;
	flex-direction: column;
	justify-content: flex-start
}

	font-size: 15px;
	color: var(--text-sec);
	line-height: 1.55;
	margin: 6px 0 16px
}

.mega-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 15px;
	font-weight: 600;
	color: var(--teal);
	text-decoration: none;
	transition: gap .15s, color .15s;
	margin-top: auto
}

.mega-cta-btn:hover {
	color: var(--teal-dark);
	gap: 10px
}

/* ── Mega panel ── */
.mega-panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	width: 100%;
	background: white;
	border: 1px solid var(--border);
	border-radius: 16px;
	box-shadow: 0 12px 48px rgba(0,0,0,.12);
	z-index: 300;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity .18s, transform .18s;
	pointer-events: none
}

.mega-panel:not([hidden]) {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto
}

.mega-inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	padding: 20px 24px
}

.mega-col {
	padding: 4px 16px
}

.mega-col + .mega-col {
	border-left: 1px solid var(--border)
}

.mega-col-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-muted);
	padding: 4px 10px 8px;
	margin: 0
}

.mega-item {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 9px 10px;
	border-radius: 8px;
	text-decoration: none;
	transition: background .12s;
	cursor: pointer
}

.mega-item:hover {
	background: var(--teal-bg-light)
}

.mega-item__icon {
	width: 32px;
	height: 32px;
	border-radius: 7px;
	background: var(--teal-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background .12s
}

.mega-item:hover .mega-item__icon {
	background: var(--teal-bg)
}

.mega-item__icon i {
	font-size: 15px;
	color: var(--teal)
}

.mega-item__body {
	display: flex;
	flex-direction: column;
	gap: 2px
}

.mega-item__body strong {
	font-size: 15px;
	font-weight: 600;
	color: var(--text);
	line-height: 1.3;
	transition: color .12s
}

.mega-item:hover .mega-item__body strong {
	color: var(--teal)
}

.mega-item__body span {
	font-size: 15px;
	color: var(--text-muted);
	line-height: 1.3
}

/* ── Nav CTA ── */
.nav-cta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0
}

/* ── Hamburger ── */
.hamburger {
	display: none;
	flex-direction: column;
	gap: 5px;
	cursor: pointer;
	padding: 8px;
	border: none;
	background: transparent
}

.hamburger span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--text);
	border-radius: 2px;
	transition: all .25s
}

.hamburger.open span:nth-child(1) {
	transform: translateY(7px) rotate(45deg)
}

.hamburger.open span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0)
}

.hamburger.open span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg)
}

/* ── Mobile menu ── */
.mobile-menu {
	display: none;
	position: fixed;
	top: 80px;
	left: 0;
	right: 0;
	bottom: 0;
	background: white;
	z-index: 199;
	padding: 16px 20px 32px;
	overflow-y: auto;
	flex-direction: column;
	gap: 0
}

.mobile-menu.open {
	display: flex
}

/* Accordion group */
.mm-group {
	border-bottom: 1px solid var(--border)
}

.mm-group__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: transparent;
	border: none;
	cursor: pointer;
	font-family: var(--font);
	font-size: 16px;
	font-weight: 600;
	color: var(--text);
	padding: 16px 0;
	text-align: left
}

.mm-chevron {
	flex-shrink: 0;
	transition: transform .22s
}

.mm-group__trigger[aria-expanded="true"] .mm-chevron {
	transform: rotate(180deg)
}

.mm-group__panel {
	padding: 0 0 12px 0
}

.mm-group__panel[hidden] {
	display: none
}

.mm-section-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 10px 0 4px;
	padding-left: 8px
}

.mm-link {
	display: block;
	font-size: 15px;
	font-weight: 500;
	color: var(--text-sec);
	text-decoration: none;
	padding: 9px 8px;
	border-radius: 6px;
	transition: background .12s, color .12s
}

.mm-link:hover {
	background: var(--teal-bg-light);
	color: var(--teal)
}

/* Direct link (Pricing) */
.mm-direct-link {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: var(--text);
	text-decoration: none;
	padding: 16px 0;
	border-bottom: 1px solid var(--border)
}

.mm-direct-link:hover {
	color: var(--teal)
}

.mobile-menu-cta {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px
}
/* ── SHARED SECTION STYLES ── */

section,
.prob,
.feats,
.how,
.pricing,
.testi,
.cta-sec,
.compare,
.your-site {
	padding: 72px 24px
}

.inner {
	max-width: 1160px;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box
}

/* ── GLOBAL OVERFLOW GUARD ──────────────────────────────────────────────────
   Prevents any section or layout element from causing horizontal scroll.
   ─────────────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
	box-sizing: border-box
}
img, video, iframe, embed, object {
	max-width: 100%;
	height: auto
}
/* Exception: fixed/absolute positioned decorative elements may exceed viewport */
[style*="position:absolute"],
[style*="position: absolute"] {
	max-width: none
}

.eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--teal);
	margin-bottom: 12px
}

.sec-title {
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--navy);
	line-height: 1.12;
	margin-bottom: 16px
}

.sec-sub {
	font-size: 17px;
	color: var(--text-sec);
	line-height: 1.65;
	max-width: 580px
}

.center {
	text-align: center
}

.center .sec-sub {
	margin: 0 auto
}

.how .eyebrow,
.how .sec-sub {
	color: #7ec4e8
}

.how .sec-title {
	color: white
}
/* ── HERO ── */

.hero {
	background: var(--navy-deep);
	padding: 88px 24px 72px;
	position: relative;
	overflow: hidden
}

.hero-glow {
	position: absolute;
	top: -120px;
	right: -80px;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(16, 125, 189, .25) 0%, transparent 70%);
	pointer-events: none
}

.hero-glow2 {
	position: absolute;
	bottom: -100px;
	left: -60px;
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(16, 125, 189, .12) 0%, transparent 70%);
	pointer-events: none
}

.hero-inner {
	max-width: 1160px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 440px;
	gap: 64px;
	align-items: center;
	position: relative;
	z-index: 1
}

.hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(16, 125, 189, .18);
	border: 1px solid rgba(16, 125, 189, .3);
	color: #7ec4e8;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	padding: 5px 14px;
	border-radius: 999px;
	margin-bottom: 22px
}

.hero-ey-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #7ec4e8
}

.hero h1 {
	font-size: 54px;
	font-weight: 800;
	color: white;
	line-height: 1.08;
	letter-spacing: -.035em;
	margin-bottom: 20px
}

.hero h1 span {
	color: var(--teal)
}

.hero-sub {
	font-size: 18px;
	color: #94a3b8;
	line-height: 1.65;
	margin-bottom: 32px
}

.hero-actions {
	display: flex;
	gap: 12px;
	margin-bottom: 36px;
	flex-wrap: wrap
}

.hero-proof {
	display: flex;
	align-items: center;
	gap: 10px
}

.proof-avs {
	display: flex
}

.proof-av {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 2px solid var(--navy-deep);
	font-size: 10px;
	font-weight: 700;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: -8px
}

.proof-av:first-child {
	margin-left: 0;
	background: var(--teal)
}

.proof-av:nth-child(2) {
	background: #0d6da3
}

.proof-av:nth-child(3) {
	background: #0a5a8a
}

.proof-txt {
	font-size: 15px;
	color: #64748b
}

.proof-txt strong {
	color: #94a3b8;
	font-weight: 600
}
/* Hero card */

.h-card {
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 16px;
	overflow: hidden
}

.h-card-hd {
	background: rgba(255, 255, 255, .04);
	border-bottom: 1px solid rgba(255, 255, 255, .07);
	padding: 11px 16px;
	display: flex;
	align-items: center;
	gap: 8px
}

.hch-dots {
	display: flex;
	gap: 5px
}

.hch-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%
}

.hch-title {
	font-size: 11px;
	color: #475569;
	font-weight: 500;
	margin-left: 4px
}

.h-card-body {
	padding: 16px
}

.hcb-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-bottom: 12px
}

.hcb-stat {
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .06);
	border-radius: 9px;
	padding: 11px
}

.hcb-sl {
	font-size: 9px;
	color: #475569;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-bottom: 3px
}

.hcb-sv {
	font-size: 19px;
	font-weight: 700;
	color: white;
	letter-spacing: -.02em;
	line-height: 1
}

.hcb-ss {
	font-size: 9px;
	color: #22c55e;
	font-weight: 600;
	margin-top: 2px
}

.lead-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px;
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .05);
	border-radius: 7px;
	margin-bottom: 5px
}

.lead-row:last-child {
	margin-bottom: 0
}

.lr-l {
	display: flex;
	align-items: center;
	gap: 7px
}

.lr-av {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	font-size: 9px;
	font-weight: 700;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0
}

.lr-name {
	font-size: 11px;
	color: #cbd5e1;
	font-weight: 500
}

.lr-sub {
	font-size: 9px;
	color: #475569
}

.badge {
	font-size: 9px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 999px
}

.b-hot {
	background: rgba(5, 150, 105, .2);
	color: #34d399
}

.b-warm {
	background: rgba(245, 158, 11, .15);
	color: #fbbf24
}

.b-new {
	background: rgba(16, 125, 189, .2);
	color: #7ec4e8
}
/* ── PROBLEM ── */

.prob {
	background: var(--bg-subtle);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border)
}

.prob-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: start
}

.prob-list {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px
}

.pi {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 13px 15px;
	background: white;
	border: 1px solid var(--border);
	border-radius: 10px
}

.px {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fef2f2;
	border: 1px solid #fecaca;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 1px
}

.px svg {
	width: 9px;
	height: 9px;
	stroke: #dc2626;
	stroke-width: 2.5;
	fill: none
}

.pi-text {
	font-size: 16px;
	color: var(--text-med);
	line-height: 1.5
}

.pi-text strong {
	color: var(--text);
	font-weight: 600
}

.sol-box {
    position: sticky !important;
    top: 100px;
	background: var(--navy);
	border-radius: 16px;
	padding: 28px;
	position: relative;
	overflow: hidden
}

.sol-box::before {
	content: '';
	position: absolute;
	top: -40px;
	right: -40px;
	width: 200px;
	height: 200px;
	background: radial-gradient(circle, rgba(16, 125, 189, .28) 0%, transparent 70%)
}

.sol-box h3 {
	font-size: 22px;
	font-weight: 800;
	color: white;
	letter-spacing: -.02em;
	margin-bottom: 8px;
	position: relative
}

.sol-box p {
	font-size: 16px;
	color: #94a3b8;
	line-height: 1.65;
	margin-bottom: 20px;
	position: relative
}

.sol-items {
	display: flex;
	flex-direction: column;
	gap: 9px;
	position: relative
}

.si {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13px;
	color: #cbd5e1;
	font-weight: 500
}

.sc {
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: rgba(5, 150, 105, .2);
	border: 1px solid rgba(5, 150, 105, .35);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0
}

.sc svg {
	width: 9px;
	height: 9px;
	stroke: #34d399;
	stroke-width: 2.5;
	fill: none
}
/* ── FEATURES ── */

.feats {
	background: white
}

.feat-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-top: 48px
}

.feat-grid-centered {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-top: 48px
}

.feat-grid-centered .fc {
	flex: 0 1 calc(33.333% - 11px);
	min-width: 280px
}

.fc {
	background: white;
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 24px;
	transition: all .2s
}

.fc:hover {
	border-color: var(--teal-border);
	box-shadow: 0 4px 24px rgba(16, 125, 189, .1);
	transform: translateY(-2px)
}

.fi {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--teal-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px
}

.fi svg {
	width: 22px;
	height: 22px;
	stroke: var(--teal);
	stroke-width: 1.8;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round
}

.fi i {
	font-size: 20px;
	color: var(--teal);
	line-height: 1
}

.fc h3 {
	font-size: 15px;
	font-weight: 700;
	color: var(--navy);
	letter-spacing: -.02em;
	margin-bottom: 7px
}

.fc p {
	font-size: 16px;
	color: var(--text-sec);
	line-height: 1.6
}

.ftag {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--teal);
	background: var(--teal-bg);
	border: 1px solid;
	padding: 3px 8px;
	border-radius: 5px;
	margin-top: 12px
}
/* ── HOW IT WORKS ── */

.how {
	background: var(--navy-deep);
	position: relative;
	overflow: hidden
}

.how::before {
	content: '';
	position: absolute;
	top: -100px;
	left: 50%;
	transform: translateX(-50%);
	width: 700px;
	height: 400px;
	background: radial-gradient(ellipse, rgba(16, 125, 189, .2) 0%, transparent 70%);
	pointer-events: none
}

.how .inner {
	position: relative;
	z-index: 1
}

.steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 48px;
	position: relative
}

.steps::before {
	content: '';
	position: absolute;
	top: 27px;
	left: calc(16.66% + 12px);
	right: calc(16.66% + 12px);
	height: 1px;
	background: linear-gradient(90deg, var(--teal) 0%, rgba(16, 125, 189, .25) 100%)
}

.step {
	text-align: center;
	position: relative
}

.step-n {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--teal);
	color: white;
	font-size: 18px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 18px;
	position: relative;
	z-index: 1;
	box-shadow: 0 0 0 8px rgba(16, 125, 189, .14)
}

.step h3 {
	font-size: 16px;
	font-weight: 700;
	color: var(--text);
	margin-bottom: 8px;
	letter-spacing: -.02em
}

.step p {
	font-size: 16px;
	color: #64748b;
	line-height: 1.65
}
/* ── YOUR WEBSITE ── */

.your-site {
	background: var(--bg-subtle);
	border-top: 1px solid var(--border)
}

.ys-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: start;
	margin-bottom: 56px
}

.ys-features {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 32px
}

.ysf {
	display: flex;
	align-items: flex-start;
	gap: 14px
}

.ysf-icon {
	width: 38px;
	height: 38px;
	border-radius: 9px;
	background: var(--teal-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 1px
}

.ysf-icon svg {
	width: 18px;
	height: 18px;
	stroke: var(--teal)
}

.ysf-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 3px;
	letter-spacing: -.01em
}

.ysf-desc {
	font-size: 15px;
	color: var(--text-sec);
	line-height: 1.6
}
/* Browser mockup */

.ys-right {
	position: relative
}

.browser-frame {
	background: white;
	border: 1px solid var(--border);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 8px 40px rgba(0, 0, 0, .1)
}

.browser-bar {
	background: var(--bg-subtle);
	border-bottom: 1px solid var(--border);
	padding: 10px 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px
}

.browser-dots {
	display: flex;
	gap: 5px
}

.browser-dots span {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--border-light)
}

.browser-dots span:first-child {
	background: #fc5c57
}

.browser-dots span:nth-child(2) {
	background: #fdbc40
}

.browser-dots span:last-child {
	background: #33c748
}

.browser-url {
	flex: 1;
	background: white;
	border: 1px solid var(--border);
	border-radius: 5px;
	padding: 4px 10px;
	font-size: 11px;
	color: var(--text-muted);
	text-align: center;
	max-width: 220px;
	margin: 0 auto
}

.browser-body {
	overflow: hidden
}
/* Site hero mockup */

.site-hero {
	position: relative;
	overflow: hidden;
	height: 130px
}

.site-hero-bg {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #0f172a 0%, #1a2f4a 60%, #0d3a5a 100%)
}

.site-hero-content {
	position: relative;
	z-index: 1;
	padding: 16px
}

.site-hero-badge {
	display: inline-block;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #7ec4e8;
	background: rgba(16, 125, 189, .2);
	border: 1px solid rgba(16, 125, 189, .3);
	padding: 2px 8px;
	border-radius: 999px;
	margin-bottom: 6px
}

.site-hero-h {
	font-size: 18px;
	font-weight: 800;
	color: white;
	letter-spacing: -.02em;
	margin-bottom: 10px
}

.site-search-bar {
	background: white;
	border-radius: 7px;
	padding: 7px 10px;
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px
}

.site-search-icon {
	flex-shrink: 0
}

.site-search-text {
	font-size: 10px;
	color: #9ca3af;
	flex: 1
}

.site-search-btn {
	background: #107dbd;
	color: white;
	font-size: 10px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 5px;
	white-space: nowrap
}

.site-quick-filters {
	display: flex;
	gap: 6px
}

.sqf {
	font-size: 9px;
	font-weight: 600;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
	color: rgba(255, 255, 255, .7);
	cursor: pointer
}

.sqf-a {
	background: rgba(16, 125, 189, .35);
	color: #7ec4e8
}
/* Listings strip */

.site-section {
	padding: 12px 14px
}

.site-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px
}

.site-section-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--navy)
}

.site-section-link {
	font-size: 10px;
	color: var(--teal);
	font-weight: 600
}

.site-listings {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px
}

.site-listing {
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow: hidden
}

.sl-img {
	height: 60px;
	position: relative;
	display: flex;
	align-items: flex-end;
	padding: 5px
}

.sl-badge {
	font-size: 8px;
	font-weight: 700;
	background: #059669;
	color: white;
	padding: 2px 5px;
	border-radius: 3px;
	position: absolute;
	top: 5px;
	left: 5px
}

.sl-badge-o {
	background: #b45309
}

.sl-price {
	font-size: 10px;
	font-weight: 800;
	color: var(--navy);
	background: rgba(255, 255, 255, .92);
	padding: 2px 6px;
	border-radius: 3px
}

.sl-info {
	padding: 7px 8px
}

.sl-addr {
	font-size: 10px;
	font-weight: 600;
	color: var(--navy);
	margin-bottom: 2px
}

.sl-meta {
	font-size: 9px;
	color: var(--text-muted);
	margin-bottom: 4px
}

.sl-tags {
	display: flex;
	gap: 3px
}

.sl-tags span {
	font-size: 8px;
	background: var(--teal-bg);
	color: var(--teal);
	font-weight: 600;
	padding: 1px 5px;
	border-radius: 3px
}
/* Agent strip */

.site-agent-strip {
	background: var(--navy);
	padding: 10px 14px;
	display: flex;
	align-items: center;
	justify-content: space-between
}

.sas-left {
	display: flex;
	align-items: center;
	gap: 8px
}

.sas-av {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--teal);
	font-size: 9px;
	font-weight: 700;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0
}

.sas-name {
	font-size: 10px;
	font-weight: 700;
	color: white
}

.sas-title {
	font-size: 8px;
	color: #64748b
}

.sas-right {
	display: flex;
	gap: 14px
}

.sas-stat {
	text-align: center
}

.sas-val {
	font-size: 11px;
	font-weight: 700;
	color: white
}

.sas-lbl {
	font-size: 8px;
	color: #475569
}
/* Floating badges */

.ys-float {
	position: absolute;
	background: white;
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 8px 12px;
	display: flex;
	align-items: center;
	gap: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
	font-size: 15px
}

.ys-float-1 {
	bottom: -16px;
	left: -16px
}

.ys-float-2 {
	top: -16px;
	right: -16px
}

.ysfl-icon {
	font-size: 15px;
	width: 28px;
	height: 28px;
	background: var(--success-bg);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--success);
	font-weight: 700
}

.ysfl-text {
	display: flex;
	flex-direction: column
}

.ysfl-text strong {
	font-size: 15px;
	font-weight: 700;
	color: var(--navy);
	line-height: 1.2
}

.ysfl-text span {
	font-size: 15px;
	color: var(--text-muted)
}
/* Included grid */

.ys-included {
	background: white;
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 28px 32px
}

.ys-inc-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 18px;
	letter-spacing: -.01em
}

.ys-inc-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px
}

.ys-inc-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	color: var(--text-med)
}

.ysi-check {
	color: var(--success);
	font-weight: 700;
	font-size: 15px;
	flex-shrink: 0
}

@media(max-width:1024px) {
	.ys-inc-grid {
		grid-template-columns: repeat(3, 1fr)
	}
}

@media(max-width:768px) {
	.ys-grid {
		grid-template-columns: 1fr;
		gap: 40px
	}
	.ys-right {
		display: none
	}
	.ys-inc-grid {
		grid-template-columns: 1fr 1fr
	}
	.ys-float {
		display: none
	}
}

@media(max-width:480px) {
	.ys-inc-grid {
		grid-template-columns: 1fr
	}
}
/* ── PLATFORM IN ACTION ── */

.mlsg-header {
	background: var(--white);
	border-top: 1px solid var(--border);
	padding: 56px 24px 24px
}

.mlsg-section {
	padding: 64px 24px
}

.mlsg-dark {
	background: var(--navy-deep)
}

.mlsg-light {
	background: var(--white);
	border-top: 1px solid var(--border)
}

.mlsg-tinted {
	background: var(--bg-subtle);
	border-top: 1px solid var(--border)
}

.mlsg-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center
}

.mlsg-grid-reverse {
	direction: rtl
}

.mlsg-grid-reverse>* {
	direction: ltr
}

.mlsg-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 999px;
	margin-bottom: 14px
}

.mlsg-title {
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--navy);
	line-height: 1.15;
	margin-bottom: 14px
}

.mlsg-desc {
	font-size: 18px;
	color: var(--text-sec);
	line-height: 1.65;
	margin-bottom: 24px
}

.mlsg-features {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 20px
}

.mlsg-feat {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	color: #94a3b8;
	font-weight: 500
}

.mlsg-feat-light {
	color: var(--text-med)
}

.mlsg-feat-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex-shrink: 0
}

.mlsg-tier-badge {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	background: rgba(16, 125, 189, .15);
	color: #7ec4e8;
	border: 1px solid rgba(16, 125, 189, .3);
	padding: 4px 12px;
	border-radius: 6px
}
/* App frame */

.app-frame {
	background: white;
	border: 1px solid var(--border);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 8px 40px rgba(0, 0, 0, .1)
}

.app-frame-dark {
	background: #111827;
	border-color: rgba(255, 255, 255, .08)
}

.app-bar {
	background: var(--bg-subtle);
	border-bottom: 1px solid var(--border);
	padding: 9px 14px;
	display: flex;
	align-items: center;
	justify-content: space-between
}

.app-bar-dark {
	background: #1e293b;
	border-bottom-color: rgba(255, 255, 255, .07)
}

.app-bar-left,
.app-bar-right {
	width: auto;
}

.app-bar-right {
	display: flex;
	justify-content: flex-end
}

.app-dots {
	display: flex;
	gap: 5px
}

.app-dots span {
	width: 9px;
	height: 9px;
	border-radius: 50%
}

.app-bar-title {
	font-size: 11px;
	font-weight: 600;
	color: #64748b;
	text-align: center
}

.app-pill-sm {
	font-size: 10px;
	font-weight: 700;
	background: rgba(16, 125, 189, .2);
	color: #7ec4e8;
	padding: 2px 8px;
	border-radius: 999px
}

.app-pill-sm-light {
	font-size: 10px;
	font-weight: 700;
	background: var(--teal-bg);
	color: var(--teal);
	padding: 2px 8px;
	border-radius: 999px
}
/* Map mockup */

.map-wrap {
	position: relative;
	display: flex;
	height: 240px
}

.map-bg {
	flex: 1;
	background: #1e2d3d;
	position: relative;
	overflow: hidden
}

.map-grid {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
	background-size: 24px 24px
}

.map-road {
	position: absolute;
	background: rgba(255, 255, 255, .1)
}

.map-road-h {
	left: 0;
	right: 0;
	height: 6px
}

.map-road-v {
	top: 0;
	bottom: 0;
	width: 6px
}

.map-overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%
}

.map-dot {
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 2px solid white;
	transform: translate(-50%, -50%)
}

.map-dot-active {
	background: #107dbd;
	box-shadow: 0 0 0 4px rgba(16, 125, 189, .3);
	z-index: 2
}

.map-popup {
	position: absolute;
	background: white;
	border-radius: 7px;
	padding: 6px 10px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .4);
	z-index: 3;
	white-space: nowrap;
	transform: translateX(-50%)
}

.map-popup-price {
	font-size: 11px;
	font-weight: 800;
	color: var(--navy)
}

.map-popup-addr {
	font-size: 9px;
	color: var(--text-muted)
}

.map-panel {
	width: 140px;
	background: #0f172a;
	border-left: 1px solid rgba(255, 255, 255, .08);
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex-shrink: 0
}

.map-panel-title {
	font-size: 10px;
	font-weight: 700;
	color: #475569;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin-bottom: 2px
}

.map-layer {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 10px;
	color: #64748b
}

.map-layer-swatch {
	width: 14px;
	height: 10px;
	border-radius: 2px;
	flex-shrink: 0
}

.map-layer span {
	flex: 1
}

.map-layer-tog {
	width: 22px;
	height: 12px;
	border-radius: 6px;
	background: #1e293b;
	border: 1px solid #334155;
	flex-shrink: 0
}

.map-layer-tog.on {
	background: #107dbd;
	border-color: #107dbd
}

.map-panel-divider {
	height: 1px;
	background: rgba(255, 255, 255, .07)
}

.map-draw-btn {
	font-size: 10px;
	font-weight: 600;
	color: var(--teal);
	background: rgba(16, 125, 189, .15);
	border: 1px solid rgba(16, 125, 189, .3);
	border-radius: 5px;
	padding: 5px 8px;
	text-align: center;
	cursor: pointer
}

.map-bottom-bar {
	background: #1e293b;
	border-top: 1px solid rgba(255, 255, 255, .07);
	padding: 7px 12px;
	display: flex;
	align-items: center;
	gap: 8px
}

.map-bb-item {
	font-size: 10px;
	color: #475569;
	font-weight: 500;
	padding: 3px 8px;
	border-radius: 4px;
	cursor: pointer
}

.map-bb-item.active-item {
	background: rgba(16, 125, 189, .2);
	color: #7ec4e8;
	font-weight: 600
}

.map-bb-count {
	font-size: 10px;
	color: #334155
}
/* Chat mockup */

.chat-wrap {
	display: flex;
	height: 290px
}

.chat-sidebar {
	width: 170px;
	border-right: 1px solid var(--border);
	background: var(--bg-subtle);
	padding: 0;
	flex-shrink: 0;
	overflow: hidden
}

.chat-sidebar-head {
	font-size: 11px;
	font-weight: 700;
	color: var(--text-muted);
	padding: 10px 12px 6px;
	letter-spacing: .04em;
	text-transform: uppercase
}

.chat-room {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	cursor: pointer;
	border-left: 2px solid transparent
}

.chat-room:hover {
	background: var(--bg)
}

.active-room {
	background: var(--teal-bg-light);
	border-left-color: var(--teal)
}

.chat-room-av {
	width: 24px;
	height: 24px;
	border-radius: 6px;
	font-size: 9px;
	font-weight: 700;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0
}

.chat-room-info {
	flex: 1;
	min-width: 0
}

.chat-room-name {
	font-size: 11px;
	font-weight: 600;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.chat-room-preview {
	font-size: 9px;
	color: var(--text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.chat-room-badge {
	background: var(--teal);
	color: white;
	font-size: 9px;
	font-weight: 700;
	padding: 1px 5px;
	border-radius: 999px;
	flex-shrink: 0
}

.chat-sidebar-divider {
	height: 1px;
	background: var(--border);
	margin: 4px 0
}

.chat-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0
}

.chat-main-head {
	font-size: 11px;
	font-weight: 700;
	color: var(--text);
	padding: 9px 12px;
	border-bottom: 1px solid var(--border);
	background: var(--white)
}

.chat-hash {
	color: var(--text-muted);
	margin-right: 2px
}

.chat-online {
	font-size: 10px;
	color: var(--success);
	font-weight: 500;
	margin-left: 6px
}

.chat-messages {
	flex: 1;
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	overflow: hidden
}

.chat-msg {
	display: flex;
	gap: 8px;
	align-items: flex-start
}

.chat-msg-self {
	justify-content: flex-end
}

.chat-msg-av {
	width: 26px;
	height: 26px;
	border-radius: 6px;
	font-size: 9px;
	font-weight: 700;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0
}

.chat-msg-body {
	flex: 1;
	min-width: 0
}

.chat-msg-body-self {
	max-width: 75%
}

.chat-msg-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 2px
}

.chat-msg-name {
	font-size: 11px;
	font-weight: 700;
	color: var(--text)
}

.chat-msg-time {
	font-size: 9px;
	color: var(--text-subtle)
}

.chat-am-badge {
	font-size: 8px;
	font-weight: 700;
	background: var(--teal-bg);
	color: var(--teal);
	padding: 1px 5px;
	border-radius: 3px
}

.chat-msg-text {
	font-size: 11px;
	color: var(--text-med);
	line-height: 1.5
}

.chat-bubble {
	font-size: 11px;
	color: white;
	background: var(--teal);
	padding: 6px 10px;
	border-radius: 10px 10px 2px 10px;
	line-height: 1.5;
	display: inline-block
}

.chat-mention {
	color: var(--teal);
	font-weight: 600
}

.chat-input-bar {
	border-top: 1px solid var(--border);
	padding: 8px 10px;
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--white)
}

.chat-input {
	flex: 1;
	font-size: 11px;
	color: var(--text-muted);
	background: var(--bg-subtle);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 5px 9px
}

.chat-input-actions {
	display: flex;
	gap: 4px;
	align-items: center
}

.chat-input-btn {
	font-size: 13px;
	cursor: pointer;
	opacity: .5
}

.chat-send-btn {
	width: 24px;
	height: 24px;
	border-radius: 6px;
	background: var(--teal);
	color: white;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer
}
/* Pipeline mockup */

.pipe-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background: var(--bg-subtle);
	border-bottom: 1px solid var(--border)
}

.pipe-stat {
	padding: 10px 14px;
	text-align: center;
	border-right: 1px solid var(--border)
}

.pipe-stat:last-child {
	border-right: none
}

.pipe-stat-val {
	font-size: 16px;
	font-weight: 700;
	color: var(--navy)
}

.pipe-stat-lbl {
	font-size: 9px;
	color: var(--text-muted);
	font-weight: 500;
	margin-top: 1px
}

.pipe-board {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	height: 230px;
	overflow: hidden
}

.pipe-col {
	border-right: 1px solid var(--border);
	padding: 10px;
	overflow: hidden
}

.pipe-col:last-child {
	border-right: none
}

.pipe-col-head {
	font-size: 11px;
	font-weight: 700;
	color: var(--text-sec);
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 8px
}

.pipe-col-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex-shrink: 0
}

.pipe-col-count {
	font-size: 10px;
	color: var(--text-subtle);
	font-weight: 500;
	margin-left: 2px
}

.pipe-card {
	background: white;
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 8px 10px;
	margin-bottom: 6px;
	transition: box-shadow .15s
}

.pipe-card:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, .08)
}

.pipe-card-highlight {
	border-color: var(--teal-border);
	background: var(--teal-bg-light)
}

.pipe-card-name {
	font-size: 11px;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 2px
}

.pipe-card-detail {
	font-size: 10px;
	color: var(--text-muted);
	margin-bottom: 5px
}

.pipe-card-tag {
	display: inline-block;
	font-size: 8px;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 3px;
	margin-bottom: 5px
}

.pipe-card-tag.hot {
	background: rgba(5, 150, 105, .12);
	color: #059669
}

.pipe-card-tag.warm {
	background: var(--teal-bg);
	color: var(--teal)
}

.pipe-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between
}

.pipe-card-av {
	width: 18px;
	height: 18px;
	border-radius: 4px;
	font-size: 7px;
	font-weight: 700;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center
}

.pipe-card-days {
	font-size: 9px;
	color: var(--text-subtle)
}

.pipe-add {
	font-size: 10px;
	color: var(--text-subtle);
	padding: 4px;
	cursor: pointer;
	text-align: center
}

.pipe-add:hover {
	color: var(--teal)
}
/* Commission mockup */

.comm-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background: #1e293b;
	border-bottom: 1px solid rgba(255, 255, 255, .07)
}

.comm-stat {
	padding: 12px 14px;
	text-align: center;
	border-right: 1px solid rgba(255, 255, 255, .07)
}

.comm-stat:last-child {
	border-right: none
}

.comm-stat-val {
	font-size: 15px;
	font-weight: 700;
	color: white
}

.comm-stat-lbl {
	font-size: 9px;
	color: #475569;
	font-weight: 500;
	margin-top: 1px
}

.comm-table-wrap {
	overflow: hidden
}

.comm-table-head {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
	padding: 8px 14px;
	font-size: 9px;
	font-weight: 700;
	color: #475569;
	letter-spacing: .05em;
	text-transform: uppercase;
	background: #1a2633;
	border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.comm-row {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
	padding: 10px 14px;
	font-size: 11px;
	color: #94a3b8;
	align-items: center;
	border-bottom: 1px solid rgba(255, 255, 255, .04)
}

.comm-row-alt {
	background: rgba(255, 255, 255, .02)
}

.comm-addr {
	font-size: 11px;
	font-weight: 600;
	color: #cbd5e1;
	margin-bottom: 2px
}

.comm-agent {
	font-size: 9px;
	color: #475569
}

.comm-val {
	text-align: center
}

.comm-fee {
	color: #fbbf24
}

.comm-net {
	color: #34d399;
	font-weight: 600
}

.comm-total-row {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
	padding: 10px 14px;
	font-size: 11px;
	font-weight: 700;
	color: #94a3b8;
	background: #1a2633;
	border-top: 1px solid rgba(255, 255, 255, .1);
	text-align: center
}

.comm-total-row>:first-child {
	text-align: left
}
/* Market reports mockup */

.report-header {
	background: linear-gradient(135deg, var(--navy-deep) 0%, #1a2f4a 100%);
	padding: 14px 16px
}

.report-title {
	font-size: 15px;
	font-weight: 800;
	color: white;
	letter-spacing: -.02em
}

.report-sub {
	font-size: 10px;
	color: #64748b;
	margin-top: 2px
}

.report-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-bottom: 1px solid var(--border)
}

.report-stat {
	padding: 10px 12px;
	border-right: 1px solid var(--border);
	text-align: center
}

.report-stat:last-child {
	border-right: none
}

.report-stat-val {
	font-size: 16px;
	font-weight: 800;
	color: var(--navy)
}

.report-stat-lbl {
	font-size: 9px;
	color: var(--text-muted);
	margin: 1px 0
}

.report-stat-delta {
	font-size: 9px;
	font-weight: 700
}

.report-stat-delta.up {
	color: #059669
}

.report-stat-delta.down {
	color: #059669
}

.report-stat-delta.neutral {
	color: var(--text-muted)
}

.report-chart-wrap {
	padding: 12px 14px 6px;
	border-bottom: 1px solid var(--border)
}

.report-chart-title {
	font-size: 10px;
	font-weight: 700;
	color: var(--text-sec);
	margin-bottom: 8px
}

.report-chart {
	display: flex;
	gap: 8px;
	align-items: flex-end;
	height: 80px
}

.chart-bars {
	display: flex;
	gap: 6px;
	align-items: flex-end;
	flex: 1;
	height: 100%
}

.chart-bar-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	flex: 1
}

.chart-bar {
	width: 100%;
	background: var(--teal-bg);
	border-radius: 3px 3px 0 0;
	transition: height .3s
}

.chart-bar-active {
	background: var(--teal)
}

.chart-bar-lbl {
	font-size: 8px;
	color: var(--text-subtle)
}

.chart-y-labels {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	font-size: 8px;
	color: var(--text-subtle);
	text-align: right;
	padding-bottom: 16px;
	width: 36px
}

.report-hoods {
	padding: 10px 14px
}

.report-hood-title {
	font-size: 10px;
	font-weight: 700;
	color: var(--text-sec);
	margin-bottom: 8px
}

.report-hood-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px
}

.report-hood-name {
	font-size: 10px;
	color: var(--text-med);
	width: 72px;
	flex-shrink: 0
}

.report-hood-bar-wrap {
	flex: 1;
	background: var(--bg-subtle);
	border-radius: 3px;
	height: 7px;
	overflow: hidden
}

.report-hood-bar {
	height: 100%;
	background: var(--teal);
	border-radius: 3px
}

.report-hood-val {
	font-size: 10px;
	font-weight: 700;
	color: var(--navy);
	width: 44px;
	text-align: right;
	flex-shrink: 0
}

@media(max-width:1024px) {
	.mlsg-grid {
		grid-template-columns: 1fr;
		gap: 32px
	}
	.mlsg-grid-reverse {
		direction: ltr
	}
}

@media(max-width:768px) {
	.mlsg-section {
		padding: 48px 16px
	}
	.mlsg-title {
		font-size: 26px
	}
}
/* ── COMPARE ── */

.compare {
	background: white;
	border-top: 1px solid var(--border)
}

.compare-wrap {
	margin-top: 48px;
	border: 1px solid var(--border);
	border-radius: 16px;
	overflow: hidden
}

.compare-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch
}

table.ct {
	width: 100%;
	border-collapse: collapse;
	min-width: 680px
}

table.ct thead tr {
	background: var(--navy-deep)
}

table.ct thead th {
	padding: 16px 20px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: center;
	color: var(--text-subtle);
	border-right: 1px solid rgba(255, 255, 255, .05)
}

table.ct thead th:first-child {
	text-align: left;
	width: 32%
}

table.ct thead th.hl {
	background: rgba(16, 125, 189, .2);
	color: #7ec4e8
}

table.ct thead th.hl .th-name {
	color: white;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -.01em;
	text-transform: none;
	display: block;
	margin-bottom: 2px
}

table.ct thead th.hl .th-sub {
	font-size: 15px;
	color: #7ec4e8;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase
}

table.ct .group-row td {
	background: var(--bg-subtle);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-muted);
	padding: 10px 20px;
	border-top: 1px solid var(--border)
}

table.ct tbody tr {
	border-bottom: 1px solid var(--border);
	transition: background .12s
}

table.ct tbody tr:hover {
	background: var(--teal-bg-light)
}

table.ct tbody tr:last-child {
	border-bottom: none
}

table.ct td {
	padding: 13px 20px;
	font-size: 16px;
	color: var(--text-med);
	vertical-align: middle;
	border-right: 1px solid var(--border)
}

table.ct td:last-child {
	border-right: none
}

table.ct td:first-child {
	font-size: 16px;
	color: var(--text);
	font-weight: 500
}

table.ct td:nth-child(2) {
	background: rgba(16, 125, 189, .03);
	border-right: 1px solid var(--teal-border)
}

table.ct td.center {
	text-align: center
}

.ck {
	color: #059669;
	font-size: 16px;
	line-height: 1
}

.cx {
	color: var(--text-subtle);
	font-size: 18px;
	opacity: .35;
	line-height: 1
}

.cp {
	font-size: 15px;
	font-weight: 600;
	color: var(--warning);
	background: var(--warning-bg);
	padding: 2px 8px;
	border-radius: 5px
}

.compare-note {
	font-size: 15px;
	color: var(--text-muted);
	margin-top: 14px;
	text-align: center
}
/* ── PRICING ── */

.pricing {
	background: var(--bg-subtle);
	border-top: 1px solid var(--border)
}

.pg {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-top: 48px
}

.pc {
	background: white;
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 28px;
	position: relative;
	transition: all .2s
}

.pc.feat {
	border: 2px solid var(--teal);
	box-shadow: 0 8px 32px rgba(16, 125, 189, .15)
}

.pc:not(.feat):hover {
	box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
	transform: translateY(-2px)
}

.pop {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--teal);
	color: white;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 4px 14px;
	border-radius: 999px;
	white-space: nowrap
}

.pt {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--teal);
	margin-bottom: 8px
}

.pp {
	font-size: 42px;
	font-weight: 800;
	color: var(--navy);
	letter-spacing: -.04em;
	line-height: 1
}

.pp sup {
	font-size: 20px;
	font-weight: 700;
	vertical-align: top;
	margin-top: 6px;
	display: inline-block
}

.pp span {
	font-size: 15px;
	font-weight: 500;
	color: var(--text-muted)
}

.pd {
	font-size: 16px;
	color: var(--text-sec);
	margin: 10px 0 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--border);
	line-height: 1.6
}

.pfs {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-bottom: 22px
}

.pf {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	color: var(--text-med);
	line-height: 1.4
}

.pfc {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--success-bg);
	border: 1px solid rgba(5, 150, 105, .25);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 1px
}

.pfc svg {
	width: 8px;
	height: 8px;
	stroke: var(--success);
	stroke-width: 2.5;
	fill: none
}

.setup-note {
	font-size: 15px;
	color: var(--text-subtle);
	text-align: center;
	margin-top: 10px
}
/* ── TESTIMONIAL ── */

.testi {
	background: white;
	border-top: 1px solid var(--border)
}

.testi-inner {
	max-width: 760px;
	margin: 0 auto;
	text-align: center
}

.stars {
	color: #f59e0b;
	font-size: 18px;
	letter-spacing: 3px;
	margin-bottom: 8px
}
.stars i {
	color: #f59e0b
}

.qm {
	font-size: 80px;
	font-weight: 800;
	color: var(--teal-bg);
	line-height: .75;
	margin-bottom: 6px
}

.qt {
	font-size: 22px;
	font-weight: 500;
	color: var(--navy);
	line-height: 1.55;
	letter-spacing: -.02em;
	margin-bottom: 28px
}

.qa {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px
}

.qa-av {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--teal);
	font-size: 16px;
	font-weight: 700;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0
}

.qa-name strong {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--navy)
}

.qa-name span {
	font-size: 15px;
	color: var(--text-muted)
}
/* ── TESTIMONIAL BLOCK (testi-wrap pattern) ─────────────────────────────────
   Used on feature and solution pages. Centered pull-quote with avatar initial,
   large blockquote, name, and role line.
   ─────────────────────────────────────────────────────────────────────────── */

.testi-wrap {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px
}

.testi-av {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--teal);
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	letter-spacing: .02em
}

.testi-q {
	font-size: 20px;
	font-weight: 500;
	color: var(--navy);
	line-height: 1.6;
	letter-spacing: -.02em;
	margin: 0;
	position: relative
}

.testi-q::before {
	content: '\201C';
	font-size: 64px;
	font-weight: 800;
	color: var(--teal-bg);
	line-height: .6;
	display: block;
	margin-bottom: 8px
}

.testi-name {
	font-size: 15px;
	font-weight: 700;
	color: var(--navy)
}

.testi-role {
	font-size: 14px;
	color: var(--text-muted);
	margin-top: -12px
}

@media (max-width: 640px) {
	.testi-q { font-size: 17px }
	.testi-q::before { font-size: 48px }
}

/* ── CTA BANNER ── */

.cta-sec {
	background: var(--navy);
	position: relative;
	overflow: hidden
}

.cta-sec::before {
	content: '';
	position: absolute;
	top: -100px;
	left: 50%;
	transform: translateX(-50%);
	width: 800px;
	height: 400px;
	background: radial-gradient(ellipse, rgba(16, 125, 189, .25) 0%, transparent 70%);
	pointer-events: none
}

.cta-inner {
	max-width: 680px;
	margin: 0 auto;
	text-align: center;
	position: relative;
	z-index: 1
}

.cta-inner h2 {
	font-size: 44px;
	font-weight: 800;
	color: white;
	letter-spacing: -.035em;
	line-height: 1.12;
	margin-bottom: 16px
}

.cta-inner h2 span {
	color: var(--teal)
}

.cta-inner p {
	font-size: 17px;
	color: #94a3b8;
	margin-bottom: 36px;
	line-height: 1.6
}

.cta-acts {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap
}

.cta-note {
	font-size: 15px;
	color: #334155;
	margin-top: 16px
}
/* ── FOOTER ── */

footer {
	background: var(--navy-deep);
	padding: 56px 24px 0;
	border-top: 1px solid rgba(255, 255, 255, .06)
}

.ft-inner {
	max-width: 1160px;
	margin: 0 auto
}

.ft-top {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
	gap: 44px;
	padding-bottom: 48px;
	border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.ft-brand p {
	font-size: 15px;
	color: var(--text-subtle);
	margin-top: 12px;
	line-height: 1.65
}

.ft-badges {
	display: flex;
	gap: 7px;
	margin-top: 14px;
	flex-wrap: wrap
}

.ft-badge {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 5px;
	border: 1px solid rgba(255, 255, 255, .25);
	color: var(--text-subtle)
}

.ft-social {
	display: flex;
	gap: 9px;
	margin-top: 18px
}

.ft-soc {
	width: 32px;
	height: 32px;
	border-radius: 7px;
	border: 1px solid rgba(255, 255, 255, .25);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .15s;
	text-decoration: none
}

.ft-soc:hover {
	border-color: var(--teal);
	background: rgba(16, 125, 189, .15)
}

.ft-soc svg {
	width: 14px;
	height: 14px;
	fill: var(--text-subtle);
	stroke: none;
	transition: fill .15s
}

.ft-soc:hover svg {
	fill: var(--teal)
}

.ft-social a.ft-soc i.fa-brands {
    color: var(--text-subtle);
}

.ft-social a.ft-soc:focus i.fa-brands,
.ft-social a.ft-soc:hover i.fa-brands {
    color: var(--teal);
}

.ft-col-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255,255,255,.5);
	margin-bottom: 16px;
	font-family: var(--font);
	line-height: 1.4
}

.ft-col ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin: 0;
}

.ft-col ul li a {
	font-size: 15px;
	color: var(--text-subtle);
	text-decoration: none;
	transition: color .15s
}

.ft-col ul li a:hover,
.ft-col ul li a.active {
	color: var(--teal)
}

.ft-bot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 0;
	flex-wrap: wrap;
	gap: 12px
}

.ft-bot-l {
	font-size: 15px;
	color: var(--text-subtle)
}

.ft-bot-r {
	display: flex;
	gap: 20px
}

.ft-bot-r a {
	font-size: 15px;
	color: var(--text-subtle);
	text-decoration: none;
	transition: color .15s
}

.ft-bot-r a:hover {
	color: var(--teal)
}
/* ── ANIMATIONS ── */

.fade-up {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .5s ease, transform .5s ease
}

.fade-up.visible {
	opacity: 1;
	transform: translateY(0)
}

.d1 {
	transition-delay: .08s
}

.d2 {
	transition-delay: .16s
}

.d3 {
	transition-delay: .24s
}

.d4 {
	transition-delay: .32s
}

.d5 {
	transition-delay: .4s
}

.ys-right.fade-up.d2.visible {
    position: sticky;
    top: 100px;
}


/* ═══════════════════════════
RESPONSIVE — TABLET
═══════════════════════════ */

@media(max-width:1024px) {
	.hero-inner {
		grid-template-columns: 1fr;
		gap: 40px
	}
	.hero h1 {
		font-size: 44px
	}
	.h-card {
		max-width: 480px
	}
	.feat-grid {
		grid-template-columns: 1fr 1fr
	}
	.ft-top {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 28px
	}
	.ft-top .ft-brand {
		grid-column: 1/-1
	}
}
/* ═══════════════════════════
RESPONSIVE — MOBILE
═══════════════════════════ */

@media(max-width:768px) {
	/* Nav */
	.nav-links,
	.nav-cta {
		display: none
	}
	.nav-tagline {
		display: none
	}
	.hamburger {
		display: flex
	}
	.nav-inner {
		padding: 0 16px
	}
	/* Ensure mega panels can't show on mobile */
	.mega-panel {
		display: none !important
	}
	/* Hero */
	.hero {
		padding: 56px 16px 48px
	}
	.hero h1 {
		font-size: 34px
	}
	.hero-sub {
		font-size: 15px
	}
	.hero-actions {
		flex-direction: column
	}
	.hero-actions .btn {
		width: 100%;
		justify-content: center
	}
	.h-card {
		display: none
	}
	/* Sections */
	section,
	.prob,
	.feats,
	.how,
	.pricing,
	.testi,
	.cta-sec,
	.compare {
		padding: 52px 16px
	}
	.sec-title {
		font-size: 28px
	}
	.sec-sub {
		font-size: 15px
	}
	/* Problem */
	.prob-grid {
		grid-template-columns: 1fr;
		gap: 32px
	}
	/* Features */
	.feat-grid {
		grid-template-columns: 1fr
	}
	/* How */
	.steps {
		grid-template-columns: 1fr;
		gap: 32px
	}
	.steps::before {
		display: none
	}
	.step {
		text-align: left;
		display: flex;
		gap: 16px;
		align-items: center;
		flex-wrap: wrap;
		align-content: center
	}
	.step-n {
		margin: 0;
		flex-shrink: 0;
		width: 44px;
		height: 44px;
		font-size: 16px
	}
	.step-content {
		flex: 1
	}
	.step h3 {
		margin-bottom: 6px
	}
	/* Compare */
	.compare-wrap {
		border-radius: 12px
	}
	/* Pricing */
	.pg {
		grid-template-columns: 1fr
	}
	.pc.feat {
		order: -1
	}
	/* CTA */
	.cta-inner h2 {
		font-size: 30px
	}
	.cta-inner p {
		font-size: 15px
	}
	.cta-acts {
		flex-direction: column;
		align-items: stretch
	}
	.cta-acts .btn {
		justify-content: center
	}
	/* Footer */
	.ft-top {
		grid-template-columns: 1fr 1fr;
		gap: 28px
	}
	.ft-top .ft-brand {
		grid-column: 1/-1
	}
	.ft-bot {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px
	}
	.ft-bot-r {
		flex-wrap: wrap;
		gap: 12px
	}
}

@media(max-width:480px) {
	.hero h1 {
		font-size: 28px
	}
	.sec-title {
		font-size: 24px
	}
	.cta-inner h2 {
		font-size: 26px
	}
	.ft-top {
		grid-template-columns: 1fr
	}
	.qt {
		font-size: 17px
	}
	.pp {
		font-size: 36px
	}
}


/* ── ADD-ONS GRID ── */
.addons-grid{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:12px !important}
@media(max-width:900px){.addons-grid{grid-template-columns:1fr 1fr !important}}
@media(max-width:560px){.addons-grid{grid-template-columns:1fr !important}}


/* ── FAQ COMPONENT ──────────────────────────────────────────────────────── */
.mlsg-faq-list  { max-width:760px; margin:48px auto 0; display:flex; flex-direction:column; gap:16px; }

/* FAQ card — the outer border box */
.mlsg-faq-card,
div[style*="border:1px solid #e2e8f0;border-radius:12px"] { border:1px solid #e2e8f0; border-radius:12px; padding:24px 28px; background:#fff; }

/* FAQ question — h3 with heading reset so it doesn't inherit large heading styles */
h3.mlsg-faq-q,
.mlsg-faq-q {
	font-size: 16px;
	font-weight: 700;
	color: #1a2633;
	margin-bottom: 10px;
	line-height: 1.4;
	/* Reset heading defaults */
	font-family: inherit;
	letter-spacing: normal;
}

/* FAQ answer — p element */
p.mlsg-faq-a,
.mlsg-faq-a {
	font-size: 16px;
	color: #4b5563;
	line-height: 1.7;
	margin: 0;
}

/* ── READABLE COPY CLASSES ──────────────────────────────────────────────────
   Human-readable content on all pages. Controlled here, not via inline styles.
   ─────────────────────────────────────────────────────────────────────────── */

/* Card / add-on name */
.mlsg-card-title        { font-size: 16px; font-weight: 700; color: #1a2633; margin-bottom: 6px; }
.mlsg-card-title--sm    { font-size: 15px; letter-spacing: -.01em; }

/* Card / add-on description */
.mlsg-card-desc         { font-size: 16px; color: #4b5563; line-height: 1.6; margin-bottom: 12px; }

/* Body copy paragraphs */
.mlsg-copy              { font-size: 16px; color: #4b5563; line-height: 1.8; }
.mlsg-copy--light       { color: rgba(255,255,255,.7); }

/* Section headings (h2 inline) */
.mlsg-section-title     { font-size: 22px; font-weight: 800; color: #1a2633; text-align: center; margin-bottom: 8px; }
.mlsg-section-title--left { text-align: left; }
.mlsg-section-title--sm { font-size: 18px; }

/* Section subtitle */
.mlsg-section-sub       { font-size: 16px; color: #6b7280; text-align: center; margin-bottom: 36px; }

/* Price label */
.mlsg-price-label       { font-size: 15px; font-weight: 700; color: #107dbd; }

/* Small section heading / card h3 */
.mlsg-heading-sm           { font-size: 16px; font-weight: 700; color: #1a2633; margin-bottom: 8px; }
.mlsg-heading-sm--light    { color: #fff; }
.mlsg-heading-sm--ruled    { padding-bottom: 10px; border-bottom: 1px solid #f1f5f9; }

/* ── CORE TEMPLATE STYLES ───────────────────────────────────────────────────
   page.php, single.php, archive.php, search.php
   ─────────────────────────────────────────────────────────────────────────── */

.mlsg-page-header      { background: var(--navy-deep); padding: 64px 24px 56px; }
.mlsg-page-title       { font-size: 36px; font-weight: 800; color: #fff; line-height: 1.2; }
.mlsg-page-content .entry-content,
.mlsg-single-post .entry-content { font-size: 17px; line-height: 1.8; color: var(--text); }
.mlsg-page-content .entry-content p,
.mlsg-single-post .entry-content p { margin-bottom: 1.4em; }
.mlsg-page-content .entry-content h2,
.mlsg-single-post .entry-content h2 { font-size: 24px; font-weight: 700; margin: 1.6em 0 .6em; }
.mlsg-page-content .entry-content h3,
.mlsg-single-post .entry-content h3 { font-size: 20px; font-weight: 700; margin: 1.4em 0 .5em; }

.mlsg-post-meta        { font-size: 15px; color: rgba(255,255,255,.5); margin-bottom: 12px; display: flex; gap: 16px; flex-wrap: wrap; }

.mlsg-post-grid        { display: grid; grid-template-columns: 1fr; gap: 24px; }
.mlsg-post-card        { background: var(--white); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.mlsg-post-card-body   { padding: 24px; }
.mlsg-post-thumb img   { width: 100%; height: 220px; object-fit: cover; display: block; }
.mlsg-post-date        { font-size: 15px; color: var(--text-muted); display: block; margin-bottom: 8px; }
.mlsg-post-type        { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--teal); display: block; margin-bottom: 6px; }
.mlsg-post-card-title  { font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 10px; line-height: 1.3; }
.mlsg-post-card-title a { color: inherit; text-decoration: none; }
.mlsg-post-card-title a:hover { color: var(--teal); }
.mlsg-post-excerpt     { font-size: 15px; color: var(--text-sec); line-height: 1.6; margin-bottom: 16px; }
.mlsg-no-results       { text-align: center; padding: 48px 0; }
.mlsg-archive-desc     { font-size: 16px; color: rgba(255,255,255,.6); margin-top: 10px; }

@media(min-width:768px) {
	.mlsg-page-title  { font-size: 48px; }
	.mlsg-post-grid   { grid-template-columns: repeat(2, 1fr); }
}
@media(min-width:1024px) {
	.mlsg-post-grid   { grid-template-columns: repeat(3, 1fr); }
}

/* ── EXCLUSIVE TERRITORY SECTION ────────────────────────────────────────────
   Homepage section. Mobile: stacked. Desktop: 2-col grid.
   ─────────────────────────────────────────────────────────────────────────── */

/* 2-col grid — stacked on mobile, side-by-side on desktop */
.et-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: center;
}

/* Eyebrow pill on dark background */
.et-eyebrow {
	display: inline-flex;
	color: #5db8e8;
	border-color: rgba(16,125,189,.4);
	background: rgba(16,125,189,.12);
	padding: 5px 15px;
	border-radius: 50px;
}

/* Section heading — white on dark */
.et-heading { color: #fff; }

/* Feature points list */
.et-points {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 32px;
}

.et-point {
	display: flex;
	align-items: center;
	gap: 14px;
}

.et-point__icon {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: rgba(16,125,189,.2);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.et-point__icon i {
	font-size: 15px;
	color: #5db8e8;
}

.et-point__text {
	font-size: 16px;
	color: rgba(255,255,255,.8);
	font-weight: 500;
}

/* Chip cloud label */
.et-chip-label {
	font-size: 15px;
	font-weight: 700;
	color: #5db8e8;
	text-transform: uppercase;
	letter-spacing: .07em;
	margin-bottom: 18px;
}

/* Note callout under chip cloud */
.et-note {
	margin-top: 20px;
	padding: 16px 18px;
	background: rgba(16,125,189,.12);
	border: 1px solid rgba(16,125,189,.3);
	border-radius: 10px;
}

.et-note__text {
	font-size: 15px;
	color: rgba(255,255,255,.65);
	margin: 0;
	line-height: 1.6;
}

.et-note__link {
	color: #5db8e8;
	font-weight: 700;
	text-decoration: none;
}

.et-note__link:hover { text-decoration: underline; }

/* ── 404 PAGE ────────────────────────────────────────────────────────────── */
.mlsg-404-links        { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 56px; }
.mlsg-404-link         { font-size: 15px; color: rgba(255,255,255,.45); text-decoration: none; padding: 6px 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 100px; transition: all .15s; }
.mlsg-404-link:hover,
.mlsg-404-link:focus   { color: #fff; border-color: rgba(255,255,255,.3); }

/* ── TIER COMPARISON GRID ───────────────────────────────────────────────────
   3-col card grid (Agent / Team / Broker) — used on exclusive territory,
   about, accessibility pages. Stacks to 1-col on mobile.
   ─────────────────────────────────────────────────────────────────────────── */
.mlsg-tier-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-top: 48px;
}

@media(min-width:640px) {
	.mlsg-tier-grid { grid-template-columns: repeat(2, 1fr); }
}

@media(min-width:1024px) {
	.mlsg-tier-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

/* ── PRICING GRID RESPONSIVE ────────────────────────────────────────────────
   .pg — Agent/Team/Broker pricing cards
   ─────────────────────────────────────────────────────────────────────────── */
@media(min-width:640px) {
	.pg { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media(min-width:1024px) {
	.pg { grid-template-columns: repeat(3, 1fr); }
	.pc.feat { order: 0; }
}

/* ── SPLIT LAYOUT (2-col text + content) ────────────────────────────────────
   Stacks on mobile, side-by-side at md+
   ─────────────────────────────────────────────────────────────────────────── */
.mlsg-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: start;
}

@media(min-width:768px) {
	.mlsg-split { grid-template-columns: 1fr 1fr; gap: 64px; }
}

/* ── 2-COL CARDS ────────────────────────────────────────────────────────────
   1-col mobile → 2-col at 640px
   ─────────────────────────────────────────────────────────────────────────── */
.mlsg-cards-2 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media(min-width:640px) {
	.mlsg-cards-2 { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

/* ── 3-COL CARDS ────────────────────────────────────────────────────────────
   1-col → 2-col at 640px → 3-col at 1024px
   ─────────────────────────────────────────────────────────────────────────── */
.mlsg-cards-3 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media(min-width:640px) {
	.mlsg-cards-3 { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

@media(min-width:1024px) {
	.mlsg-cards-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ── BOUNDARY PACK TIERS GRID ───────────────────────────────────────────────
   1-col mobile → 3-col at 480px (cards are small enough to sit side by side
   even on a phone in landscape — min content width ~90px each)
   ─────────────────────────────────────────────────────────────────────────── */
.mlsg-pack-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-bottom: 24px;
}

@media(min-width:400px) {
	.mlsg-pack-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── FEAT-GRID RESPONSIVE ───────────────────────────────────────────────────
   1-col → 2-col at 640px → 3-col at 1024px
   ─────────────────────────────────────────────────────────────────────────── */
@media(min-width:640px) {
	.feat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media(min-width:1024px) {
	.feat-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── ADDON CARD ─────────────────────────────────────────────────────────────
   Used inside .addons-grid on homepage, solo agents, agent teams, brokerages.
   Mobile: icon stacks above text (flex-direction: column)
   480px+: icon sits left of text (flex-direction: row)
   ─────────────────────────────────────────────────────────────────────────── */
.addon-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 18px;
	background: #f3f4f6;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	box-sizing: border-box;
}

.addon-card--teal {
	background: #e8f4fb;
	border-color: #b3d9f0;
}

@media(min-width:480px) {
	.addon-card {
		flex-direction: row;
		align-items: flex-start;
		gap: 14px;
	}
}

/* ── ADDONS WRAP ────────────────────────────────────────────────────────────
   White card container used on homepage, solo agents, agent teams, brokerages
   ─────────────────────────────────────────────────────────────────────────── */
.addons-wrap {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 24px 20px;
	margin-top: 28px;
	box-sizing: border-box;
}

@media(min-width:640px) {
	.addons-wrap { padding: 28px 32px; }
}

/* ── ADDON HEADER ───────────────────────────────────────────────────────────
   Title + description on left, button on right. Stacks on mobile.
   ─────────────────────────────────────────────────────────────────────────── */
.addon-header {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 24px;
}

@media(min-width:640px) {
	.addon-header {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		flex-wrap: wrap;
	}
}

/* ── ADDON ICON BOX ─────────────────────────────────────────────────────────*/
.addon-icon {
	width: 48px;
	height: 48px;
	min-width: 48px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: #f0f7fd;
}
.addon-icon--grey  { background: #f3f4f6; }
.addon-icon--white { background: var(--white); }
.addon-icon--teal  { background: var(--teal); }

/* ── ADDON BODY ─────────────────────────────────────────────────────────────*/
.addon-body {
	flex: 1;
	min-width: 0;
}

/* ── ADDON PRICE BADGE ──────────────────────────────────────────────────────*/
.addon-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	color: var(--teal);
	background: var(--teal-bg);
	border: 1px solid var(--teal-border);
	padding: 3px 10px;
	border-radius: 999px;
	margin-top: 8px;
}
.addon-badge--solid {
	color: white;
	background: var(--teal);
	border-color: var(--teal);
	padding: 5px 14px;
	border-radius: 6px;
	text-decoration: none;
}

/* ── COMPARISON COLUMNS (CINC / BoomTown vs MLS Genie™) ─────────────────────
   Two-column comparison card layout with danger/success colour variants.
   ─────────────────────────────────────────────────────────────────────────── */
.compare-col {
	border-radius: 16px;
	padding: 28px 24px;
}
.compare-col--danger  { background: #fef2f2; border: 1px solid #fca5a5; }
.compare-col--success { background: #f0fdf4; border: 1px solid #86efac; }

.compare-col-label {
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	margin-bottom: 20px;
	display: block;
}
.compare-col-label--danger  { color: #991b1b; }
.compare-col-label--success { color: #166534; }

.compare-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 14px;
}

/* ── MIGRATION STEPS GRID ───────────────────────────────────────────────────
   4-step process: 1-col → 2-col at 640px → 4-col at 1024px
   ─────────────────────────────────────────────────────────────────────────── */
.mlsg-steps-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-top: 48px;
}

@media(min-width:640px) {
	.mlsg-steps-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}
@media(min-width:1024px) {
	.mlsg-steps-grid {
		grid-template-columns: repeat(4, 1fr);
		position: relative;
	}
	/* Connector line between steps */
	.mlsg-steps-grid::before {
		content: '';
		position: absolute;
		top: 36px;
		left: 12%;
		right: 12%;
		height: 1px;
		background: var(--border);
		z-index: 0;
	}
	.mlsg-steps-grid > * {
		position: relative;
		z-index: 1;
	}
}

/* ── MIGRATION STEP CARD ────────────────────────────────────────────────────*/
.migration-step {
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 16px;
	padding: 28px 24px;
}
.migration-step--light {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 32px 28px;
	text-align: center;
	position: relative;
}

.migration-step--light .mlsg-step-num {
	margin: 0 auto 20px;
}

.migration-step-icon {
	font-size: 28px;
	color: var(--teal);
	display: block;
	margin-bottom: 16px;
}

.migration-step--light h3 {
	font-size: 17px;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 10px;
}

.migration-step--light p {
	font-size: 15px;
	color: var(--text-sec);
	line-height: 1.65;
	margin: 0;
}

.migration-step-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--white);
	margin-bottom: 8px;
}

.migration-step-desc {
	font-size: 15px;
	color: rgba(255,255,255,.6);
	line-height: 1.65;
}

/* ── FORM BRIDGE / MIGRATION CALLOUT ────────────────────────────────────────
   Teal-tinted callout box used in CINC migration section.
   Stacks icon above text on mobile, row on 480px+.
   ─────────────────────────────────────────────────────────────────────────── */
.migration-callout {
	margin-top: 40px;
	padding: 24px 20px;
	background: rgba(16,125,189,.12);
	border: 1px solid rgba(16,125,189,.35);
	border-radius: 14px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}

@media(min-width:480px) {
	.migration-callout {
		flex-direction: row;
		padding: 28px 32px;
		gap: 20px;
	}
}

.migration-callout-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--teal);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.migration-callout-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--white);
	margin-bottom: 6px;
}

.migration-callout-body {
	font-size: 15px;
	color: rgba(255,255,255,.65);
	line-height: 1.7;
	margin: 0;
}

/* ── "WHAT YOU GAIN" FEATURE LIST ───────────────────────────────────────────
   Icon + label rows in the "what you gain" section on CINC page.
   ─────────────────────────────────────────────────────────────────────────── */
.gain-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 10px;
}

.gain-icon {
	width: 36px;
	height: 36px;
	border-radius: 9px;
	background: var(--teal-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.gain-label {
	font-size: 15px;
	font-weight: 500;
	color: var(--navy);
}

/* ── COMPARISON TABLE (BoomTown / migration pages) ──────────────────────────
   Standalone comparison table — different from table.ct (homepage compare).
   Mobile: scrollable wrapper, normal line-height, flex-direction column so
   icon stacks above text. Desktop: standard table layout.
   ─────────────────────────────────────────────────────────────────────────── */
.ct-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-top: 40px;
	border: 1px solid var(--border);
	border-radius: 14px;
	overflow: hidden;
}

.ct-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	min-width: 480px;
}

/* ── Header ── */
.ct-thead-row {
	background: #f8fafc;
}

.ct-th {
	padding: 14px 20px;
	font-weight: 700;
	border-bottom: 2px solid var(--border);
	white-space: nowrap;
}

.ct-th--label {
	text-align: left;
	color: var(--navy);
	width: 36%;
}

.ct-th--other {
	text-align: center;
	color: var(--text-muted);
}

.ct-th--hl {
	text-align: center;
	color: var(--teal);
	border-bottom-color: var(--teal);
	background: var(--teal-bg-light);
}

/* ── Body rows ── */
.ct-row {
	border-bottom: 1px solid #f1f5f9;
	transition: background .12s;
}

.ct-row:last-child {
	border-bottom: none;
}

.ct-row:hover {
	background: var(--teal-bg-light);
}

/* ── Body cells ──
   Mobile: flex column so icon stacks above text, centre-aligned, normal line-height
   Desktop: standard table-cell centred
   ─────────────────────────────────────────────────────────────────────────── */
.ct-td {
	padding: 14px 20px;
	vertical-align: middle;
	line-height: normal;
}

.ct-td--label {
	font-weight: 600;
	color: var(--navy);
}

.ct-td--other {
	text-align: center;
	color: var(--text-muted);
}

.ct-td--hl {
	text-align: center;
	color: var(--teal);
	font-weight: 600;
	background: rgba(16,125,189,.03);
}

/* Icons and text inside td cells stack naturally via block display */
.ct-td i {
	display: block;
	margin-bottom: 4px;
}



/* ── TABLE SCROLL ON MOBILE ─────────────────────────────────────────────────
   Tables inside .ct-wrap and .compare-scroll are horizontally scrollable.
   .mlsg-table-scroll can be added to any table wrapper for the same effect.
   We cannot put overflow-x on html/body as it blocks all child scrolling.
   ─────────────────────────────────────────────────────────────────────────── */
.ct-wrap,
.compare-scroll,
.mlsg-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	width: 100%;
}

.ct-wrap table,
.compare-scroll table,
.mlsg-table-scroll table {
	min-width: 480px;
}

/* ── STAT CARD ───────────────────────────────────────────────────────────────
   Used on About page facts grid (100%, $0, 1, 24/7)
   ─────────────────────────────────────────────────────────────────────────── */
.stat-card {
	background: #f8fafc;
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 28px 24px;
	text-align: center;
}

.stat-num {
	font-size: 36px;
	font-weight: 800;
	color: var(--teal);
	letter-spacing: -.02em;
	margin-bottom: 8px;
	line-height: 1.1;
}

.stat-num--light { color: var(--white); }

/* ── PRICING PAGE ADD-ONS GRID ──────────────────────────────────────────────
   6-card grid: 1-col mobile → 2-col at 480px → 3-col at 1024px
   ─────────────────────────────────────────────────────────────────────────── */
.addons-section         { margin-top: 56px; }

.pricing-addons-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media(min-width:480px) {
	.pricing-addons-grid { grid-template-columns: repeat(2, 1fr); }
}

@media(min-width:1024px) {
	.pricing-addons-grid { grid-template-columns: repeat(3, 1fr); }
}

.pricing-addon-card {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pricing-addon-icon {
	font-size: 24px;
	color: var(--teal);
	display: block;
	margin-bottom: 4px;
}

.pricing-addon-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: auto;
	padding-top: 8px;
}

.pricing-addon-note {
	font-size: 15px;
	color: var(--text-muted);
	background: #f1f5f9;
	padding: 2px 8px;
	border-radius: 100px;
	white-space: nowrap;
}

/* ── CHANGELOG ──────────────────────────────────────────────────────────────
   Release history rows.
   Mobile: version/badge stacks above changelog items.
   Desktop (640px+): version sidebar left, items right with vertical border.
   ─────────────────────────────────────────────────────────────────────────── */
.cl-row {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 32px;
	padding-bottom: 32px;
	border-bottom: 1px solid #f1f5f9;
}

/* ── Meta (version + date + badge) ── */
.cl-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.cl-version {
	font-size: 15px;
	font-weight: 800;
	color: var(--navy);
	font-family: monospace;
}

.cl-date {
	font-size: 15px;
	color: var(--text-subtle);
}

.cl-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 100px;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* ── Content ── */
.cl-content {
	flex: 1;
}

.cl-items {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cl-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	color: var(--text-med);
	line-height: 1.6;
}

.cl-dot {
	margin-top: 7px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--teal);
	flex-shrink: 0;
	display: inline-block;
}

/* ── Footer card ── */
.cl-footer {
	text-align: center;
	padding: 32px;
	background: #f8fafc;
	border: 1px solid var(--border);
	border-radius: 12px;
}

/* ── Desktop: sidebar layout ── */
@media(min-width:640px) {
	.cl-row {
		flex-direction: row;
		gap: 28px;
		margin-bottom: 40px;
		padding-bottom: 40px;
		align-items: flex-start;
	}

	.cl-meta {
		flex: 0 0 120px;
		flex-direction: column;
		align-items: flex-end;
		gap: 4px;
		padding-top: 4px;
		text-align: right;
	}

	.cl-date { margin-top: 0; }

	.cl-badge { margin-top: 4px; }

	.cl-content {
		border-left: 2px solid var(--border);
		padding-left: 28px;
	}
}

/* ── BOOK A DEMO PAGE ───────────────────────────────────────────────────────
   ─────────────────────────────────────────────────────────────────────────── */

/* Section heading */
.demo-heading {
	font-size: 24px;
	font-weight: 800;
	color: var(--navy);
	margin-bottom: 28px;
	line-height: 1.2;
}

/* ── Unified icon box — used in both agenda and proof strip ── */
.demo-icon-box {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--teal-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 18px;
	color: var(--teal);
}

/* Agenda items */
.demo-agenda-item {
	display: flex;
	gap: 16px;
	margin-bottom: 24px;
	align-items: flex-start;
}

.demo-agenda-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 4px;
}

/* ── Booking card ── */
.demo-booking-card {
	background: #f8fafc;
	border: 1px solid var(--border);
	border-radius: 20px;
	padding: 28px 24px;
}

@media(min-width:640px) {
	.demo-booking-card { padding: 36px; }
}

.demo-booking-sub {
	font-size: 15px;
	color: var(--text-muted);
	margin-bottom: 24px;
}

/* ── Social proof strip ── */
.demo-proof-strip {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-top: 48px;
	padding-top: 40px;
	border-top: 1px solid #f1f5f9;
}

@media(min-width:640px) {
	.demo-proof-strip {
		grid-template-columns: repeat(4, 1fr);
		gap: 32px;
		margin-top: 56px;
		padding-top: 48px;
	}
}

.demo-proof-item {
	text-align: center;
}

.demo-proof-item .demo-icon-box {
	margin: 0 auto 12px;
}

.demo-proof-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 4px;
}

.demo-proof-sub {
	font-size: 15px;
	color: var(--text-subtle);
}

/* ── LEGAL HUB PAGE ─────────────────────────────────────────────────────────
   ─────────────────────────────────────────────────────────────────────────── */

/* Compact hero variant */
.hero--compact { min-height: 300px; }

/* ── Key commitments strip ── */
.legal-commits-strip {
	background: #1a2633;
	border-top: 1px solid rgba(255,255,255,.08);
	border-bottom: 1px solid rgba(255,255,255,.08);
	padding: 24px 20px;
}

.legal-commits-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

.legal-commit-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid rgba(255,255,255,.06);
}

.legal-commit-item:last-child { border-bottom: none; }

.legal-commit-icon {
	font-size: 18px;
	color: #5db8e8;
	flex-shrink: 0;
}

.legal-commit-label {
	font-size: 15px;
	font-weight: 700;
	color: var(--white);
}

.legal-commit-sub {
	font-size: 15px;
	color: rgba(255,255,255,.45);
}

@media(min-width:640px) {
	.legal-commits-inner {
		grid-template-columns: repeat(2, 1fr);
	}
	.legal-commit-item {
		border-bottom: none;
	}
}

@media(min-width:1024px) {
	.legal-commits-strip { padding: 28px 24px; }
	.legal-commits-inner {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}
	.legal-commit-item { padding: 8px 16px; }
}

/* ── Document list ── */
.legal-doc-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* ── Document card ── */
.legal-doc-card {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 18px;
	overflow: hidden;
}

.legal-doc-card-inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 24px 20px;
}

.legal-doc-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}

.legal-doc-icon {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: var(--teal-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 24px;
	color: var(--teal);
}

.legal-doc-content { flex: 1; }

.legal-doc-title-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}

.legal-doc-updated {
	font-size: 15px;
	color: var(--text-subtle);
	font-weight: 600;
	background: #f3f4f6;
	padding: 2px 10px;
	border-radius: 100px;
	white-space: nowrap;
}

.legal-doc-desc {
	font-size: 16px;
	color: var(--text-sec);
	line-height: 1.75;
	margin: 0 0 16px;
}

.legal-doc-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.legal-doc-link {
	font-size: 15px;
	font-weight: 600;
	color: var(--teal);
	background: var(--teal-bg);
	border: 1px solid var(--teal-border);
	padding: 4px 12px;
	border-radius: 100px;
	text-decoration: none;
	transition: background .12s;
}

.legal-doc-link:hover {
	background: var(--teal-bg-light);
	color: var(--teal-dark);
}

.legal-doc-cta { flex-shrink: 0; }

.legal-doc-btn {
	white-space: nowrap;
	width: 100%;
	justify-content: center;
}

@media(min-width:640px) {
	.legal-doc-card-inner {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 24px;
		padding: 32px 36px;
		align-items: start;
	}
	.legal-doc-body {
		flex-direction: row;
		gap: 24px;
	}
	.legal-doc-btn {
		width: auto;
	}
}

/* ── Contact note ── */
.legal-contact-note {
	margin-top: 48px;
	padding: 24px 20px;
	background: #f0f7fd;
	border: 1px solid var(--teal-border);
	border-radius: 14px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.legal-contact-icon {
	font-size: 32px;
	color: var(--teal);
	flex-shrink: 0;
}

.legal-contact-body { flex: 1; min-width: 0; }

.legal-contact-text {
	font-size: 15px;
	color: var(--text-sec);
	margin: 0;
	line-height: 1.6;
}

@media(min-width:640px) {
	.legal-contact-note {
		flex-direction: row;
		align-items: center;
		padding: 28px 32px;
		gap: 20px;
		flex-wrap: wrap;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   DOCS HUB — /docs
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.docs-hero {
	background: var(--navy-deep);
	padding: 72px 24px 80px;
	position: relative;
	overflow: hidden
}

.docs-hero::before {
	content: '';
	position: absolute;
	top: -120px;
	left: 50%;
	transform: translateX(-50%);
	width: 900px;
	height: 500px;
	background: radial-gradient(ellipse at center, rgba(16,125,189,.18) 0%, transparent 70%);
	pointer-events: none
}

.docs-hero::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(16,125,189,.3), transparent)
}

.docs-hero__inner {
	text-align: center;
	position: relative;
	z-index: 1
}

.docs-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--teal);
	margin-bottom: 20px
}

.docs-hero__heading {
	font-size: clamp(36px, 5vw, 56px);
	font-weight: 800;
	color: white;
	line-height: 1.1;
	letter-spacing: -.02em;
	margin-bottom: 16px
}

.docs-hero__sub {
	font-size: 18px;
	color: rgba(255,255,255,.6);
	max-width: 520px;
	margin: 0 auto 40px;
	line-height: 1.6
}

/* ── Search bar ── */
.docs-search-wrap {
	max-width: 620px;
	margin: 0 auto 28px
}

.docs-search-inner {
	display: flex;
	align-items: center;
	gap: 12px;
	background: rgba(255,255,255,.07);
	border: 1.5px solid rgba(255,255,255,.15);
	border-radius: 14px;
	padding: 14px 18px;
	transition: border-color .2s, background .2s, box-shadow .2s
}

.docs-search-inner:focus-within {
	border-color: var(--teal);
	background: rgba(255,255,255,.1);
	box-shadow: 0 0 0 4px rgba(16,125,189,.2)
}

.docs-search__icon {
	color: rgba(255,255,255,.35);
	font-size: 16px;
	flex-shrink: 0;
	transition: color .2s
}

.docs-search-inner:focus-within .docs-search__icon {
	color: var(--teal)
}

.docs-search__input {
	flex: 1;
	background: transparent;
	border: none;
	outline: none;
	font-family: var(--font);
	font-size: 16px;
	color: white;
	min-width: 0
}

.docs-search__input::placeholder {
	color: rgba(255,255,255,.35)
}

.docs-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none
}

.docs-search__kbd {
	font-family: var(--font);
	font-size: 11px;
	font-weight: 600;
	color: rgba(255,255,255,.3);
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 5px;
	padding: 3px 7px;
	flex-shrink: 0
}

/* ── Popular pills ── */
.docs-popular {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px
}

.docs-popular__label {
	font-size: 15px;
	color: rgba(255,255,255,.4);
	font-weight: 500;
	white-space: nowrap
}

.docs-popular__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 500;
	color: rgba(255,255,255,.65);
	background: rgba(255,255,255,.07);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 20px;
	padding: 5px 12px;
	text-decoration: none;
	transition: background .15s, color .15s, border-color .15s
}

.docs-popular__pill i {
	font-size: 11px;
	opacity: .7
}

.docs-popular__pill:hover {
	background: rgba(16,125,189,.25);
	border-color: rgba(16,125,189,.5);
	color: white
}

/* ── Modules section ── */
.docs-modules {
	padding: 64px 24px 80px;
	background: var(--bg)
}

/* ── Filter row ── */
.docs-filter-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 40px;
	flex-wrap: wrap
}

.docs-filter-btn {
	font-family: var(--font);
	font-size: 15px;
	font-weight: 500;
	color: var(--text-sec);
	background: white;
	border: 1px solid var(--border);
	border-radius: 20px;
	padding: 7px 16px;
	cursor: pointer;
	transition: all .15s
}

.docs-filter-btn:hover {
	border-color: var(--teal);
	color: var(--teal)
}

.docs-filter-btn--active {
	background: var(--teal);
	border-color: var(--teal);
	color: white
}

/* ── No results ── */
.docs-no-results {
	text-align: center;
	padding: 64px 24px;
	color: var(--text-muted)
}

.docs-no-results i {
	font-size: 36px;
	margin-bottom: 12px;
	display: block;
	opacity: .4
}

.docs-no-results p {
	font-size: 16px
}

/* ── Card grid ── */
.docs-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px
}

/* ── Individual card ── */
.docs-card {
	background: white;
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 0;
	transition: box-shadow .2s, border-color .2s;
	position: relative;
	overflow: hidden
}

.docs-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--mod-color, var(--teal));
	opacity: 0;
	transition: opacity .2s
}

.docs-card:hover {
	box-shadow: 0 8px 32px rgba(0,0,0,.08);
	border-color: var(--border-light)
}

.docs-card:hover::before {
	opacity: 1
}

.docs-card--hidden {
	display: none
}

/* ── Card head ── */
.docs-card__head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 12px
}

.docs-card__icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: rgba(16,125,189,.1);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0
}

.docs-card__icon i {
	font-size: 16px;
	color: var(--mod-color, var(--teal))
}

.docs-card__title {
	font-size: 17px;
	font-weight: 700;
	color: var(--text);
	line-height: 1.2;
	margin: 0
}

.docs-card__desc {
	font-size: 15px;
	color: var(--text-sec);
	line-height: 1.6;
	margin: 0 0 20px
}

/* ── Article list ── */
.docs-card__articles {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1
}

.docs-card__link {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	color: var(--text-sec);
	text-decoration: none;
	padding: 6px 8px;
	border-radius: 6px;
	transition: background .12s, color .12s
}

.docs-card__link i {
	font-size: 11px;
	color: var(--text-subtle);
	flex-shrink: 0;
	transition: color .12s
}

.docs-card__link:hover {
	background: var(--teal-bg-light);
	color: var(--teal)
}

.docs-card__link:hover i {
	color: var(--teal)
}

/* ── All articles link ── */
.docs-card__all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 600;
	color: var(--teal);
	text-decoration: none;
	padding: 8px 0 0;
	border-top: 1px solid var(--border);
	transition: gap .15s, color .15s;
	margin-top: auto
}

.docs-card__all:hover {
	gap: 9px;
	color: var(--teal-dark)
}

/* ── Help strip ── */
.docs-help-strip {
	background: var(--navy-deep);
	padding: 64px 24px
}

.docs-help-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px
}

.docs-help-card {
	display: flex;
	gap: 20px;
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 14px;
	padding: 28px
}

.docs-help-card__icon {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: rgba(16,125,189,.2);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0
}

.docs-help-card__icon i {
	font-size: 18px;
	color: var(--teal)
}

.docs-help-card__title {
	font-size: 16px;
	font-weight: 700;
	color: white;
	margin: 0 0 8px
}

.docs-help-card__desc {
	font-size: 15px;
	color: rgba(255,255,255,.55);
	line-height: 1.6;
	margin: 0 0 16px
}

.docs-help-card__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 600;
	color: var(--teal);
	text-decoration: none;
	transition: gap .15s
}

.docs-help-card__link:hover {
	gap: 9px
}

/* ── Responsive ── */
@media (min-width: 640px) {
	.docs-grid         { grid-template-columns: repeat(2, 1fr) }
	.docs-help-grid    { grid-template-columns: repeat(3, 1fr) }
}

@media (min-width: 1024px) {
	.docs-grid         { grid-template-columns: repeat(3, 1fr) }
}

/* ── Keyboard shortcut — ⌘K opens search ── */
@media (max-width: 768px) {
	.docs-search__kbd  { display: none }
	.docs-popular      { justify-content: flex-start }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DOC ARTICLE + MODULE INDEX
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Two-column page wrapper ── */
.doc-page-wrap {
	display: flex;
	align-items: flex-start;
	max-width: 1160px;
	margin: 0 auto;
	padding: 40px 24px 80px;
	gap: 48px
}

/* ── Sidebar ── */
.doc-sidebar {
	width: 240px;
	flex-shrink: 0;
	position: sticky;
	top: 100px
}

.doc-sidebar__inner {
	display: flex;
	flex-direction: column;
	gap: 0
}

.doc-sidebar__back {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 15px;
	font-weight: 500;
	color: var(--text-muted);
	text-decoration: none;
	margin-bottom: 20px;
	transition: color .15s
}

.doc-sidebar__back:hover {
	color: var(--teal)
}

.doc-sidebar__module {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--border)
}

.doc-sidebar__mod-icon {
	width: 32px;
	height: 32px;
	border-radius: 7px;
	background: var(--teal-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0
}

.doc-sidebar__mod-icon i {
	font-size: 13px;
	color: var(--teal)
}

.doc-sidebar__mod-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--text);
	text-decoration: none;
	line-height: 1.3;
	transition: color .15s
}

.doc-sidebar__mod-title:hover {
	color: var(--teal)
}

.doc-sidebar__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px
}

.doc-sidebar__link {
	display: block;
	font-size: 15px;
	color: var(--text-sec);
	text-decoration: none;
	padding: 7px 10px;
	border-radius: 6px;
	transition: background .12s, color .12s;
	line-height: 1.4
}

.doc-sidebar__link:hover {
	background: var(--teal-bg-light);
	color: var(--teal)
}

.doc-sidebar__link--active {
	background: var(--teal-bg);
	color: var(--teal);
	font-weight: 600
}

.doc-sidebar__help {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--border)
}

.doc-sidebar__help p {
	font-size: 15px;
	color: var(--text-muted);
	margin: 0 0 4px
}

.doc-sidebar__help a {
	font-size: 15px;
	font-weight: 600;
	color: var(--teal);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	transition: gap .15s
}

.doc-sidebar__help a:hover {
	gap: 8px
}

/* ── Main content area ── */
.doc-main {
	flex: 1;
	min-width: 0
}

/* ── Breadcrumb ── */
.doc-breadcrumb ol {
	display: flex;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	flex-wrap: wrap
}

.doc-breadcrumb li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	color: var(--text-muted)
}

.doc-breadcrumb li + li::before {
	content: '/';
	opacity: .4
}

.doc-breadcrumb a {
	color: var(--text-muted);
	text-decoration: none;
	transition: color .15s
}

.doc-breadcrumb a:hover {
	color: var(--teal)
}

.doc-breadcrumb li[aria-current="page"] {
	color: var(--text)
}

/* ── Article ── */
.doc-article__header {
	margin-bottom: 36px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--border)
}

.doc-article__title {
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 800;
	color: var(--text);
	line-height: 1.2;
	letter-spacing: -.02em;
	margin: 0 0 12px
}

.doc-article__lead {
	font-size: 17px;
	color: var(--text-sec);
	line-height: 1.7;
	margin: 0
}

/* Article body typography */
.doc-article__body h2 {
	font-size: 20px;
	font-weight: 700;
	color: var(--text);
	margin: 36px 0 12px;
	padding-top: 8px
}

.doc-article__body h3 {
	font-size: 17px;
	font-weight: 700;
	color: var(--text);
	margin: 28px 0 10px
}

.doc-article__body p {
	font-size: 16px;
	color: var(--text-sec);
	line-height: 1.8;
	margin: 0 0 16px
}

.doc-article__body ul,
.doc-article__body ol {
	margin: 0 0 20px;
	padding-left: 24px
}

.doc-article__body li {
	font-size: 16px;
	color: var(--text-sec);
	line-height: 1.7;
	margin-bottom: 6px
}

.doc-article__body strong {
	color: var(--text);
	font-weight: 600
}

.doc-article__body pre {
	background: var(--navy-deep);
	border-radius: 8px;
	padding: 16px 20px;
	overflow-x: auto;
	margin: 0 0 20px
}

.doc-article__body code {
	font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
	font-size: 14px;
	color: #7dd3fc;
	background: transparent
}

.doc-article__body p code,
.doc-article__body li code {
	background: var(--teal-bg);
	color: var(--teal-dark);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 13.5px
}

/* ── Prev/Next nav ── */
.doc-article__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--border)
}

.doc-nav-link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px;
	border: 1px solid var(--border);
	border-radius: 10px;
	text-decoration: none;
	transition: border-color .15s, background .15s
}

.doc-nav-link:hover {
	border-color: var(--teal);
	background: var(--teal-bg-light)
}

.doc-nav-link--next {
	text-align: right
}

.doc-nav-link__label {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--text-muted);
	display: flex;
	align-items: center;
	gap: 5px
}

.doc-nav-link--next .doc-nav-link__label {
	justify-content: flex-end
}

.doc-nav-link__title {
	font-size: 15px;
	font-weight: 600;
	color: var(--text);
	line-height: 1.4
}

/* Coming soon state */
.doc-coming-soon {
	text-align: center;
	padding: 64px 24px;
	background: var(--bg-subtle);
	border-radius: 12px
}

.doc-coming-soon i {
	font-size: 32px;
	color: var(--text-subtle);
	margin-bottom: 16px;
	display: block
}

.doc-coming-soon h2 {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 10px
}

.doc-coming-soon p {
	font-size: 15px;
	color: var(--text-sec);
	max-width: 400px;
	margin: 0 auto 24px
}

/* ── Module index hero ── */
.doc-mod-hero {
	background: var(--navy-deep);
	padding: 56px 24px 48px
}

.doc-breadcrumb--light ol {
	margin-bottom: 20px
}

.doc-breadcrumb--light a,
.doc-breadcrumb--light li {
	color: rgba(255,255,255,.45)
}

.doc-breadcrumb--light a:hover {
	color: rgba(255,255,255,.8)
}

.doc-breadcrumb--light li[aria-current="page"] {
	color: rgba(255,255,255,.8)
}

.doc-mod-hero__content {
	display: flex;
	align-items: center;
	gap: 20px
}

.doc-mod-hero__icon {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: rgba(16,125,189,.25);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0
}

.doc-mod-hero__icon i {
	font-size: 22px;
	color: var(--teal)
}

.doc-mod-hero__title {
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 800;
	color: white;
	margin: 0 0 6px;
	letter-spacing: -.02em
}

.doc-mod-hero__desc {
	font-size: 16px;
	color: rgba(255,255,255,.55);
	margin: 0
}

/* ── Article list (module index) ── */
.doc-mod-articles {
	padding: 48px 24px 80px;
	background: var(--bg)
}

.doc-article-list {
	list-style: none;
	margin: 0 0 48px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px
}

.doc-article-row__link {
	display: flex;
	align-items: center;
	gap: 16px;
	background: white;
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 18px 20px;
	text-decoration: none;
	transition: border-color .15s, box-shadow .15s
}

.doc-article-row__link:hover {
	border-color: var(--teal);
	box-shadow: 0 4px 16px rgba(16,125,189,.08)
}

.doc-article-row__num {
	font-size: 15px;
	font-weight: 700;
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
	width: 24px
}

.doc-article-row__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px
}

.doc-article-row__title {
	font-size: 15px;
	font-weight: 600;
	color: var(--text);
	line-height: 1.3
}

.doc-article-row__link:hover .doc-article-row__title {
	color: var(--teal)
}

.doc-article-row__desc {
	font-size: 15px;
	color: var(--text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.doc-article-row__arrow {
	font-size: 12px;
	color: var(--text-subtle);
	flex-shrink: 0;
	transition: transform .15s, color .15s
}

.doc-article-row__link:hover .doc-article-row__arrow {
	transform: translateX(3px);
	color: var(--teal)
}

/* ── Module footer ── */
.doc-mod-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px
}

.doc-mod-footer__back {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 15px;
	font-weight: 500;
	color: var(--text-muted);
	text-decoration: none;
	transition: color .15s
}

.doc-mod-footer__back:hover {
	color: var(--teal)
}

/* ── Empty state ── */
.doc-empty {
	text-align: center;
	padding: 64px 24px;
	color: var(--text-muted)
}

.doc-empty i {
	font-size: 32px;
	margin-bottom: 12px;
	display: block;
	opacity: .4
}

/* ── Responsive ── */
@media (max-width: 768px) {
	.doc-page-wrap {
		flex-direction: column;
		padding: 24px 16px 60px
	}
	.doc-sidebar {
		width: 100%;
		position: static
	}
	.doc-article__nav {
		grid-template-columns: 1fr
	}
	.doc-nav-next { text-align: left }
	.doc-nav-link--next .doc-nav-link__label { justify-content: flex-start }
	.doc-mod-hero__content { flex-direction: column; align-items: flex-start }
}

@media screen and (max-width: 1200px) {
	#nav {
		padding: 0 20px;
	}
}


/* ═══════════════════════════════════════════════════════════════════════════
   Sitemap page  (template-mlsgenie-sitemap.php)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero override */
.hero--sitemap {
	min-height: 300px;
}

/* Traffic-light dots in h-card header */
.hch-dot--red   { background: #ef4444 }
.hch-dot--amber { background: #f59e0b }
.hch-dot--green { background: #22c55e }

/* lr-av colour variant used in the sitemap hero card */
.lr-av--blue { background: #107dbd }

/* Icon inside lr-av */
.lr-av-icon {
	font-size: 12px;
}

/* ── Section block ── */
.sm-section {
	margin-bottom: 56px;
}

/* ── Section header row ── */
.sm-section-hd {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 28px;
	padding-bottom: 16px;
	border-bottom: 2px solid #e2e8f0;
}

/* ── Icon box ── */
.sm-section-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: #e8f4fb;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.sm-section-icon i {
	font-size: 18px;
	color: #107dbd;
}

/* ── Page-count badge ── */
.sm-page-count {
	font-size: 12px;
	color: #9ca3af;
	font-weight: 600;
	margin-left: 4px;
}

/* ── Page grid — 3 columns, stacks on mobile ── */
.sm-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

/* ── Page card ── */
.sm-card {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 18px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	text-decoration: none;
	transition: border-color .15s, box-shadow .15s;
}

.sm-card:hover {
	border-color: #107dbd;
	box-shadow: 0 2px 8px rgba(16, 125, 189, .12);
}

.sm-card--current {
	border-color: #107dbd;
}

/* ── Arrow icon ── */
.sm-card-arrow {
	font-size: 12px;
	color: #107dbd;
	margin-top: 4px;
	flex-shrink: 0;
}

/* ── Card title ── */
.sm-card-title {
	font-size: 14px;
	font-weight: 700;
	color: #1a2633;
	margin-bottom: 3px;
}

/* ── Card description ── */
.sm-card-desc {
	font-size: 12px;
	color: #6b7280;
	line-height: 1.5;
}

/* ── Mobile: single-column stack ── */
@media (max-width: 640px) {
	.sm-grid {
		grid-template-columns: 1fr;
	}
	.sm-section-hd {
		gap: 10px;
	}
}

/* ── Tablet: two-column ── */
@media (min-width: 641px) and (max-width: 960px) {
	.sm-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}


/* ═══════════════════════════════════════════════════════════════════════════
   Pricing page — Stack comparison section  (#stack-comparison)
   ═══════════════════════════════════════════════════════════════════════════ */

.stack-compare-wrap {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 0;
	margin-top: 56px;
	align-items: start;
}

/* ── Column shell ── */
.stack-col {
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid #e2e8f0;
}

.stack-col--new {
	border-color: var(--teal);
	box-shadow: 0 0 0 2px var(--teal);
}

/* ── Column header ── */
.stack-col-hd {
	padding: 24px 28px 20px;
	border-bottom: 1px solid #e2e8f0;
}

.stack-col--new .stack-col-hd {
	background: var(--teal-bg);
	border-bottom-color: var(--teal);
}

.stack-col-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--text-muted);
	margin-bottom: 8px;
}

.stack-col--new .stack-col-label {
	color: var(--teal);
}

.stack-col-total {
	font-size: 32px;
	font-weight: 800;
	color: #ef4444;
	letter-spacing: -.02em;
	line-height: 1;
	margin-bottom: 6px;
}

.stack-col-total span {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-muted);
	letter-spacing: 0;
}

.stack-col-total--teal {
	color: var(--teal);
}

.stack-col-sub {
	font-size: 12px;
	color: var(--text-muted);
	line-height: 1.5;
}

/* ── Stack items ── */
.stack-items {
	display: flex;
	flex-direction: column;
}

.stack-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 20px;
	border-bottom: 1px solid #f1f5f9;
}

.stack-item:last-child {
	border-bottom: none;
}

.stack-item--old {
	background: #fff;
}

.stack-item--new {
	background: #fff;
}

.stack-item--new:nth-child(odd) {
	background: #fafcff;
}

.stack-item-check {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--teal);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 1px;
}

.stack-item-left {
	flex: 1;
	min-width: 0;
}

.stack-item-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--navy);
	line-height: 1.3;
}

.stack-item-eg {
	font-size: 11px;
	color: var(--text-muted);
	margin-top: 1px;
	line-height: 1.4;
}

.stack-item-cost {
	font-size: 12px;
	font-weight: 700;
	color: #ef4444;
	white-space: nowrap;
	flex-shrink: 0;
}

.stack-item-cost--inc {
	color: var(--teal);
}

/* ── Column footer ── */
.stack-col-ft {
	padding: 16px 24px;
	background: #f8fafc;
	border-top: 1px solid #e2e8f0;
}

.stack-col-ft--teal {
	background: var(--teal-bg);
	border-top-color: var(--teal);
	text-align: center;
}

.stack-ft-label {
	font-size: 12px;
	color: var(--text-muted);
	line-height: 1.5;
}

.stack-col-ft--teal .stack-ft-label {
	color: var(--teal);
	font-weight: 600;
}

/* ── VS divider ── */
.stack-vs {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 0 20px;
	padding-top: 120px;
}

.stack-vs-line {
	width: 1px;
	height: 60px;
	background: #e2e8f0;
}

.stack-vs-badge {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	color: var(--text-muted);
	text-transform: uppercase;
}

/* ── Disclaimer ── */
.stack-disclaimer {
	font-size: 11px;
	color: var(--text-muted);
	text-align: center;
	margin-top: 32px;
	line-height: 1.6;
}

/* ── Responsive ── */
@media (max-width: 900px) {
	.stack-compare-wrap {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.stack-vs {
		flex-direction: row;
		padding: 20px 0;
		padding-top: 20px;
		justify-content: center;
	}
	.stack-vs-line {
		width: 60px;
		height: 1px;
	}
	.stack-col--old {
		order: 2;
	}
	.stack-vs {
		order: 1;
	}
	.stack-col--new {
		order: 0;
	}
}


/* ── IDX Website — sticky visual on ownership section (desktop only) ── */
@media screen and (min-width: 1025px) {
	#ownership .mlsg-visual.fade-up.d2.visible {
		position: sticky;
		top: 100px;
	}
	#ownership .mlsg-grid {
		align-items: flex-start;
	}
}