/* =========================================================
   ASNERIS UI GLOBAL CSS
   Version: 3.3
   Updated: 2026-06 — icon system merge + component additions
   Source of truth: /Brand Assets/asneris-color-palette.md
   WordPress: Paste into WPCode → CSS Snippet (runs site-wide)
   Local preview: Link from asneris-components.html

   FILE SPLIT RECOMMENDATION (source only — deploy combined)
   ┌──────────────────────────────────────────┐
   │  asneris-ui-global.css   ← this file     │
   │  asneris-layout.css      (§ 3–4)         │
   │  asneris-components.css  (§ 5–18)        │
   │  asneris-guide-pages.css (§ 23–27)       │
   │  asneris-tool-pages.css  (§ 22)          │
   └──────────────────────────────────────────┘

   !IMPORTANT POLICY
   All !important rules are intentional WordPress cascade
   management. Two categories only:
   (a) § 2 WP/TT24 overrides — must beat WP specificity
   (b) § 7 Button base — mobile overrides must match the
       base !important to cascade correctly.
   (c) § 16 Utility colour modifiers — correct CSS pattern.
   Do NOT add !important outside these three groups.
   =========================================================

   TABLE OF CONTENTS
   0. Font Import
   1. CSS Variables (from color palette)
   2. WordPress / TT24 Safety  ← body:has() + .asneris-custom-page fallback
   3. Page Wrapper
   4. Layout — Container, Section, Grid
   5. Typography
   6. Labels & Badges
   7. Buttons
   8. Cards (base + pricing + all variants)
   9. Hero
   10. CTA
   11. Lists
   12. FAQ Accordion
   13. Capability Cards
   14. Hero Compact
   15. Key Metrics Grid
   16. Feature Grid
   17. Trust Block
   18. Flow Diagram
   19. Images
   20. Tip / Callout Box
   21. Screenshot Placeholder
   22. Score Color Modifiers
   23. Step Connector (vertical timeline)
   24. Utilities
   25. Responsive
   ── OPTIONAL PAGE-SPECIFIC COMPONENTS ──────────────────
   21. SEO Engine Components (pillar cards, action queue, CTR, register, chips)
   22. Page Components — Homepage (feature chips, mini dashboard, spotlight)
   23. Tool Page Components (result cards, readiness tool)
   23. Article / Guide Page Components (guide intro, TOC, article layout)
   24. Navigation Components (prev/next page-nav, sidebar right widgets)
   25. Sticky Article Nav Bar (asneris-nav-bar)
   26. Scroll-to-top FAB
   27. Sidebar Layout & Navigation (asneris-page-with-sidebar, sidenav toggle)
   28. Icon System
   ========================================================= */


/* =========================================================
   0. FONT IMPORT — Inter via Google Fonts
   Loaded once here so HTML blocks never need a <link> tag.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');


/* =========================================================
   1. CSS VARIABLES — Generated from asneris-color-palette.md
   ========================================================= */

:root {
  /* Primary */
  --asneris-navy:         #06295F;
  --asneris-dark-blue:    #164E91;
  --asneris-blue:         #1C73BA;
  --asneris-cyan:         #4EB8C5;
  --asneris-light-cyan:   #ECF8FB;

  /* Accent */
  --asneris-orange:       #FF6B1A;
  --asneris-orange-hover: #E9570C;
  --asneris-green:        #16A76A;
  --asneris-warning:      #F59E0B;
  --asneris-error:        #EF4444;

  /* Neutral */
  --asneris-bg:           #F8FBFD;
  --asneris-white:        #FFFFFF;
  --asneris-text:         #10233F;
  --asneris-muted:        #5F718A;
  --asneris-border:       #DBE8F0;

  /* Gradients */
  --asneris-gradient-dark: linear-gradient(135deg, #06295F 0%, #164E91 100%);
  --asneris-gradient-blue: linear-gradient(135deg, #164E91 0%, #4EB8C5 100%);

  /* Shadows — derived from Navy */
  --asneris-shadow-sm: 0 4px 16px rgba(6, 41, 95, 0.07);
  --asneris-shadow-md: 0 12px 36px rgba(6, 41, 95, 0.11);
  --asneris-shadow-lg: 0 24px 64px rgba(6, 41, 95, 0.16);

  /* Spacing */
  --asneris-max-width:    1180px;
  --asneris-section-gap: 80px;
  --asneris-grid-gap:    24px;
  --asneris-card-pad:    28px;

  /* Shape */
  --asneris-radius-sm:   10px;
  --asneris-radius-md:   16px;
  --asneris-radius-lg:   22px;
  --asneris-radius-xl:   32px;
  --asneris-radius-pill: 999px;
}


/* =========================================================
   2. WORDPRESS / TT24 SAFETY
   Scoped to pages that contain .asneris-page only.
   Safe to paste into WPCode as a CSS snippet — no other
   WordPress pages are affected.
   ========================================================= */

/* ── 2a. Hide auto-generated WP page title ── */
body:has(.asneris-page) .entry-title,
body:has(.asneris-page) .page-title,
body:has(.asneris-page) header.entry-header,
body:has(.asneris-page) .wp-block-post-title,
.asneris-custom-page .entry-title,
.asneris-custom-page .page-title,
.asneris-custom-page header.entry-header,
.asneris-custom-page .wp-block-post-title {
  display: none !important;
}

/* ── 2b. Remove TT24 content column width + spacing constraints ── */
body:has(.asneris-page) .entry-content,
body:has(.asneris-page) .wp-block-post-content,
body:has(.asneris-page) .hentry,
body:has(.asneris-page) .type-page,
.asneris-custom-page .entry-content,
.asneris-custom-page .wp-block-post-content,
.asneris-custom-page .hentry,
.asneris-custom-page .type-page {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── 2c. Kill gap on first HTML block ── */
body:has(.asneris-page) .wp-block-html,
body:has(.asneris-page) .wp-block-html:first-child,
.asneris-custom-page .wp-block-html,
.asneris-custom-page .wp-block-html:first-child {
  margin: 0 !important;
  padding: 0 !important;
}

/* ── 2d. Kill gap from TT24 <main>, site wrappers, and WP layout containers.
   These selectors cover every known source of the blank space that appears
   between the nav header and the first page section on TT24 sites. ── */
body:has(.asneris-page) main,
body:has(.asneris-page) #main,
body:has(.asneris-page) #content,
body:has(.asneris-page) #primary,
body:has(.asneris-page) .site-main,
body:has(.asneris-page) .wp-site-blocks,
body:has(.asneris-page) .wp-site-blocks > main,
body:has(.asneris-page) main.wp-block-group,
body:has(.asneris-page) .wp-block-group.is-layout-constrained,
body:has(.asneris-page) .wp-block-post-content,
.asneris-custom-page main,
.asneris-custom-page #main,
.asneris-custom-page #content,
.asneris-custom-page #primary,
.asneris-custom-page .site-main,
.asneris-custom-page .wp-site-blocks,
.asneris-custom-page .wp-site-blocks > main,
.asneris-custom-page main.wp-block-group,
.asneris-custom-page .wp-block-group.is-layout-constrained,
.asneris-custom-page .wp-block-post-content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  row-gap: 0 !important;
}

/* ── 2e. Kill block-gap CSS custom property used by TT24 layout engine.
   TT24 sets --wp--style--block-gap via inline style; overriding it here
   removes the gap applied to flex/grid layout children. ── */
body:has(.asneris-page),
.asneris-custom-page {
  --wp--style--block-gap: 0px !important;
}

/* ── 2f. Remove first-child top margin injected by is-layout-flow rules ── */
body:has(.asneris-page) .is-layout-flow > *,
body:has(.asneris-page) .is-layout-flow > *:first-child,
body:has(.asneris-page) .is-layout-constrained > *,
body:has(.asneris-page) .is-layout-constrained > *:first-child,
.asneris-custom-page .is-layout-flow > *,
.asneris-custom-page .is-layout-flow > *:first-child,
.asneris-custom-page .is-layout-constrained > *,
.asneris-custom-page .is-layout-constrained > *:first-child {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ── 2g. TT24 Site Footer — hidden on Asneris full-page layouts ── */
body:has(.asneris-page) .site-footer,
body:has(.asneris-page) .wp-block-template-part[class*="footer"],
body:has(#asneris-seo-engine) .site-footer,
body:has(#asneris-seo-engine) .wp-block-template-part[class*="footer"],
.asneris-custom-page .site-footer,
.asneris-custom-page .wp-block-template-part[class*="footer"] {
  display: none !important;
}

/* ── 2h. TT24 Site Header — keep above full-width page wrapper ── */
body:has(.asneris-page) .site-header,
body:has(.asneris-page) .wp-block-template-part[class*="header"],
.asneris-custom-page .site-header,
.asneris-custom-page .wp-block-template-part[class*="header"] {
  position: relative;
  z-index: 200;
}


/* =========================================================
   3. PAGE WRAPPER
   ========================================================= */

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

.asneris-page {
  /* Break out of TT24 centered content column */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--asneris-bg);
  color: var(--asneris-text);
  /* Inter first, system fonts as fallback */
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Reset TT24 typography leakage inside the page */
.asneris-page h1,
.asneris-page h2,
.asneris-page h3,
.asneris-page h4 {
  margin-top: 0;
}

.asneris-page p {
  margin-top: 0;
}

.asneris-page ul,
.asneris-page ol {
  margin-top: 0;
}

.asneris-page a,
.asneris-page a:visited,
.asneris-page .asneris-card a,
.asneris-page .asneris-card a:visited {
  color: var(--asneris-blue);
  text-decoration: none;
}

.asneris-page a:hover,
.asneris-page a:focus-visible,
.asneris-page a:active,
.asneris-page .asneris-card a:hover,
.asneris-page .asneris-card a:focus-visible,
.asneris-page .asneris-card a:active {
  color: var(--asneris-dark-blue);
  text-decoration: underline;
}

.asneris-page img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* =========================================================
   4. LAYOUT — Container, Section, Grid
   ========================================================= */

/* Container */
.asneris-container {
  width: min(100% - 32px, var(--asneris-max-width));
  margin: 0 auto;
}

/* Section */
.asneris-section {
  padding: var(--asneris-section-gap) 0;
}

.asneris-section-sm {
  padding: 56px 0;
}

/* Grid */
.asneris-grid {
  display: grid;
  gap: var(--asneris-grid-gap);
  align-items: start;
}

.asneris-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.asneris-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.asneris-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Text alignment */
.asneris-center {
  text-align: center;
}

.asneris-center .asneris-lead {
  margin-left: auto;
  margin-right: auto;
}

.asneris-center .asneris-actions {
  justify-content: center;
}


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

.asneris-page h1,
.asneris-page h2,
.asneris-page h3,
.asneris-page h4 {
  color: var(--asneris-navy);
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 600;
  margin-bottom: 16px;
}

.asneris-page h1 {
  font-size: clamp(42px, 6vw, 64px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.asneris-page h2 { font-size: clamp(28px, 3.2vw, 32px); }
.asneris-page h3 { font-size: clamp(22px, 2.2vw, 24px); }
.asneris-page h4 { font-size: 20px; }

.asneris-page p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--asneris-muted);
  margin-bottom: 16px;
}

.asneris-page p:last-child {
  margin-bottom: 0;
}

/* Lead paragraph */
.asneris-lead {
  font-size: clamp(17px, 2vw, 18px);
  line-height: 1.8;
  color: var(--asneris-muted);
  max-width: 720px;
  margin-bottom: 28px;
}


/* =========================================================
   6. LABELS & BADGES
   ========================================================= */

/* Section label (eyebrow text above headings) */
.asneris-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--asneris-light-cyan);
  color: var(--asneris-dark-blue);
  border: 1px solid var(--asneris-border);
  border-radius: var(--asneris-radius-pill);
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 16px;
}

/* Inline badge (status, category) */
.asneris-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--asneris-light-cyan);
  color: var(--asneris-dark-blue);
  border-radius: var(--asneris-radius-pill);
  padding: 5px 11px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

/* Status badge modifiers */
.asneris-badge-success { background: #dcfce7; color: #166534; }
.asneris-badge-warning { background: #fef3c7; color: #92400e; }
.asneris-badge-error   { background: #fee2e2; color: #991b1b; }
.asneris-badge-info    { background: #dbeafe; color: #1e40af; }


/* =========================================================
   7. BUTTONS
   ========================================================= */

.asneris-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}

/* Base button — works globally; .asneris-page selectors add !important for WP/TT24 overrides */
.asneris-btn,
.asneris-page .asneris-btn,
.asneris-page a.asneris-btn,
.asneris-page button.asneris-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  height: 52px;
  min-width: 160px;
  padding: 0 28px !important;
  border-radius: var(--asneris-radius-pill);
  font-size: 16px;
  font-weight: 700;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}

/* Primary — Orange CTA */
.asneris-btn.asneris-btn-primary,
.asneris-page .asneris-btn-primary {
  background: var(--asneris-orange);
  color: var(--asneris-white) !important;
  border-color: var(--asneris-orange);
}
.asneris-btn.asneris-btn-primary:hover,
.asneris-page .asneris-btn-primary:hover {
  background: var(--asneris-orange-hover);
  border-color: var(--asneris-orange-hover);
  transform: translateY(-2px);
}

/* Secondary — Outline */
.asneris-btn.asneris-btn-secondary,
.asneris-page .asneris-btn-secondary {
  background: var(--asneris-white);
  color: var(--asneris-navy) !important;
  border-color: var(--asneris-border);
}
.asneris-btn.asneris-btn-secondary:hover,
.asneris-page .asneris-btn-secondary:hover {
  border-color: var(--asneris-cyan);
  transform: translateY(-2px);
}

/* Dark background override — secondary becomes ghost */
.asneris-hero-dark .asneris-btn-secondary,
.asneris-cta .asneris-btn-secondary {
  background: transparent;
  color: var(--asneris-white) !important;
  border-color: rgba(255, 255, 255, 0.4);
}
.asneris-hero-dark .asneris-btn-secondary:hover,
.asneris-cta .asneris-btn-secondary:hover {
  border-color: var(--asneris-white);
}


/* =========================================================
   8. CARDS — Base + All Variants
   ========================================================= */

/* Base card */
.asneris-card {
  display: flex;
  flex-direction: column;
  background: var(--asneris-white);
  border: 1px solid var(--asneris-border);
  border-radius: var(--asneris-radius-lg);
  padding: var(--asneris-card-pad);
  box-shadow: var(--asneris-shadow-sm);
  transition: box-shadow 0.2s, transform 0.2s;
}

.asneris-card:hover {
  box-shadow: var(--asneris-shadow-md);
  transform: translateY(-3px);
}

.asneris-card h3 { margin-bottom: 10px; }
.asneris-card p  { font-size: 16px; }

/* Document page card pattern (reusable across SEO/Engine/Toolkit pages) */
.asneris-document-card,
.asneris-card-fixed {
  width: 400px;
  min-width: 400px;
  max-width: 400px;
  height: 600px;
  min-height: 600px;
  max-height: 600px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #f9fcff 100%);
}

.asneris-document-card-media {
  display: block;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 250px;
  min-height: 250px;
  max-height: 250px;
  margin: 0;
  object-fit: cover;
  border-radius: var(--asneris-radius-md);
  border: 1px solid var(--asneris-border);
  flex: 0 0 250px;
  align-self: stretch;
}


.asneris-document-card-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  flex: 0 0 170px;
  min-height: 170px;
  max-height: 170px;
  overflow: hidden;
}

.asneris-document-card-body .asneris-btn {
  align-self: flex-start;
  margin-top: 0;
}

.asneris-document-card > .asneris-btn {
  align-self: stretch;
  margin-top: auto;
  width: 100%;
  justify-content: center;
  text-align: center;
  flex: 0 0 52px;
  min-height: 52px;
  max-height: 52px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 20px !important;
}

.asneris-document-card h3 {
  font-size: 20px;
  line-height: 1.3;
  margin-bottom: 8px;
  line-clamp: 3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.asneris-document-card p {
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 12px;
  flex: 1;
  line-clamp: 4;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.asneris-document-card-grid,
.asneris-grid-fixed-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: stretch;
}

/* Guided flow cues for document journey cards */
.asneris-document-card-grid .asneris-document-card::before {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  border-radius: var(--asneris-radius-pill);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--asneris-white);
  background: var(--asneris-dark-blue);
}

.asneris-document-card-grid .asneris-document-card:nth-child(1)::before { content: "Step 1"; }
.asneris-document-card-grid .asneris-document-card:nth-child(2)::before { content: "Step 2"; }
.asneris-document-card-grid .asneris-document-card:nth-child(3)::before { content: "Step 3"; }

.asneris-document-card-grid .asneris-document-card:first-child {
  border-color: var(--asneris-cyan);
  box-shadow: 0 10px 28px rgba(28, 115, 186, 0.14);
}

.asneris-document-card-grid .asneris-document-card:first-child::after {
  content: "Start Here";
  position: absolute;
  top: 10px;
  right: 10px;
  border-radius: var(--asneris-radius-pill);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0c4a6e;
  background: #dff7ff;
  border: 1px solid #b5e7f8;
}

@media (min-width: 1400px) {
  .asneris-document-card-grid,
  .asneris-grid-fixed-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .asneris-document-card-grid,
  .asneris-grid-fixed-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .asneris-document-card,
  .asneris-card-fixed {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 520px;
    min-height: 520px;
    max-height: 520px;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .asneris-document-card-media {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: 170px;
    min-height: 170px;
    max-height: 170px;
    flex: 0 0 170px;
    align-self: stretch;
  }

  .asneris-document-card-body {
    flex: 0 0 170px;
    min-height: 150px;
    max-height: 170px;
  }

  .asneris-document-card > .asneris-btn {
    flex: 0 0 48px;
    min-height: 48px;
    max-height: 48px;
  }

  .asneris-document-card-grid .asneris-document-card::before,
  .asneris-document-card-grid .asneris-document-card::after {
    top: 8px;
    font-size: 10px;
    padding: 3px 8px;
  }
}

/* Dashboard card — hero visual mockup */
.asneris-dashboard-card {
  background: var(--asneris-white);
  border: 2px solid var(--asneris-dark-blue);
  border-radius: var(--asneris-radius-lg);
  padding: var(--asneris-card-pad);
  box-shadow: 0 20px 60px rgba(6, 41, 95, 0.25);
}

.asneris-dashboard-card h1,
.asneris-dashboard-card h2,
.asneris-dashboard-card h3,
.asneris-dashboard-card h4 { color: var(--asneris-navy); }

/* Score card — metric display */
.asneris-score-card {
  background: linear-gradient(135deg, rgba(6, 41, 95, 0.03), rgba(78, 184, 197, 0.08));
  border: 1px solid var(--asneris-cyan);
  border-radius: var(--asneris-radius-md);
  padding: 24px 18px;
  text-align: center;
}

.asneris-score-card h2 {
  font-size: 44px;
  margin-bottom: 6px;
  color: var(--asneris-dark-blue);
}

.asneris-score-card p {
  font-size: 14px;
  margin-bottom: 0;
  color: var(--asneris-navy);
}

/* Action card — task/issue item */
.asneris-action-card {
  background: linear-gradient(135deg, rgba(236, 248, 251, 0.8), rgba(255, 255, 255, 0.9));
  border: 1px solid var(--asneris-cyan);
  border-radius: var(--asneris-radius-md);
  padding: 22px;
  position: relative;
}

.asneris-action-card h3,
.asneris-action-card h4 { color: var(--asneris-navy); }

/* Tool card — feature or tool listing */
.asneris-tool-card {
  display: flex;
  flex-direction: column;
  background: var(--asneris-white);
  border: 1px solid var(--asneris-border);
  border-radius: var(--asneris-radius-lg);
  padding: var(--asneris-card-pad);
  box-shadow: var(--asneris-shadow-sm);
  transition: box-shadow 0.2s, transform 0.2s;
}
.asneris-tool-card:hover {
  box-shadow: var(--asneris-shadow-md);
  transform: translateY(-3px);
}

/* Step card — how it works / numbered steps */
.asneris-step-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--asneris-white);
  border: 1px solid var(--asneris-border);
  border-radius: var(--asneris-radius-lg);
  padding: var(--asneris-card-pad);
}

.asneris-step-number {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--asneris-navy);
  color: var(--asneris-white);
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Testimonial card */
.asneris-testimonial-card {
  display: flex;
  flex-direction: column;
  background: var(--asneris-white);
  border: 1px solid var(--asneris-border);
  border-radius: var(--asneris-radius-lg);
  padding: var(--asneris-card-pad);
  box-shadow: var(--asneris-shadow-sm);
}

.asneris-testimonial-quote {
  font-size: 17px;
  color: var(--asneris-text);
  line-height: 1.65;
  flex: 1;
  margin-bottom: 20px;
}

.asneris-testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.asneris-testimonial-author strong {
  display: block;
  font-size: 15px;
  color: var(--asneris-navy);
}

.asneris-testimonial-author span {
  font-size: 13px;
  color: var(--asneris-muted);
}

/* Pricing card */
.asneris-pricing-card {
  display: flex;
  flex-direction: column;
  background: var(--asneris-white);
  border: 2px solid var(--asneris-border);
  border-radius: var(--asneris-radius-xl);
  padding: 36px;
  transition: box-shadow 0.2s, transform 0.2s;
}

.asneris-pricing-card:hover {
  box-shadow: var(--asneris-shadow-md);
  transform: translateY(-3px);
}

/* Highlighted / featured pricing tier */
.asneris-pricing-card.asneris-pricing-featured {
  border-color: var(--asneris-cyan);
  box-shadow: var(--asneris-shadow-md);
}

.asneris-price {
  font-size: 44px;
  font-weight: 900;
  color: var(--asneris-navy);
  line-height: 1;
  margin: 16px 0 4px;
}

.asneris-price-period {
  font-size: 15px;
  color: var(--asneris-muted);
  margin-bottom: 20px;
}

/* ============================================
   MOBILE RESPONSIVENESS STANDARD:
   All interactive pricing components MUST include
   mobile-optimized touch targets, disabled hover
   effects, and full-width buttons on screens
   below 600px. See @media rules at bottom.
============================================ */

/* Interactive / Selectable Pricing Cards */
.pricing-card-selectable {
  cursor: pointer;
  transition: all 0.3s ease;
}

.pricing-card-selectable:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.pricing-card-selectable.selected {
  border: 2px solid var(--asneris-cyan) !important;
  box-shadow: 0 4px 12px rgba(78, 184, 197, 0.15) !important;
}

/* Pricing Button */
.pricing-btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.pricing-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Pricing Button Variants */
.pricing-btn-light {
  background: var(--asneris-light-cyan);
  color: var(--asneris-dark-blue);
}

.pricing-btn-primary {
  background: var(--asneris-orange);
  color: var(--asneris-white);
}

.pricing-btn-light:hover {
  background: #D9F1F6;
}

.pricing-btn-primary:hover {
  background: var(--asneris-orange-hover);
}

/* ── NEW COMPONENT CARDS ── */

/* Feature Card — for capability/feature showcase with icons */
.asneris-feature-card {
  background: var(--asneris-white);
  padding: 36px 32px;
  border-radius: 12px;
  border: 2px solid #E0E7EF;
  transition: all 0.3s ease;
  position: relative;
  cursor: default;
}

.asneris-feature-card:hover {
  transform: translateY(-6px);
  border-color: var(--asneris-cyan);
  box-shadow: 0 12px 32px rgba(78, 184, 197, 0.15), 0 4px 16px rgba(0, 0, 0, 0.08);
}

.asneris-feature-card-label {
  display: inline-block;
  padding: 4px 12px;
  background: var(--asneris-light-cyan);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--asneris-blue);
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.asneris-feature-card h3 {
  color: var(--asneris-navy);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.3;
}

.asneris-feature-card p {
  color: var(--asneris-text);
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
  opacity: 0.8;
}

/* Metric Card — for key statistics and numbers */
.asneris-metric-card {
  text-align: center;
  padding: 24px;
}

.asneris-metric-value {
  color: var(--asneris-dark-blue);
  font-size: 48px;
  font-weight: 800;
  margin-bottom: 8px;
  line-height: 1;
}

.asneris-metric-label {
  color: var(--asneris-muted);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

/* Icon Card — card with large icon at top */
.asneris-icon-card {
  background: var(--asneris-white);
  padding: 32px;
  border-radius: var(--asneris-radius-lg);
  border: 2px solid var(--asneris-cyan);
  transition: all 0.3s ease;
}

.asneris-icon-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--asneris-shadow-md);
}

.asneris-icon-card h3 {
  color: var(--asneris-navy);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
}

.asneris-icon-card p {
  color: var(--asneris-text);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* CTA Card — call-to-action card with gradient */
.asneris-cta-card {
  background: var(--asneris-gradient-blue);
  padding: 48px 40px;
  border-radius: var(--asneris-radius-lg);
  text-align: center;
  color: var(--asneris-white);
}

.asneris-cta-card h2 {
  color: var(--asneris-white);
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.2;
}

.asneris-cta-card p {
  color: rgba(255, 255, 255, 0.95);
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 32px;
}


/* =========================================================
   9. HERO
   ========================================================= */

.asneris-hero {
  padding: 96px 0 80px;
  background: var(--asneris-bg);
}

/* Two-column hero layout */
.asneris-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

/* Media / screenshot side */
.asneris-hero-media {
  background: linear-gradient(135deg, rgba(78, 184, 197, 0.15), rgba(255, 255, 255, 0.95));
  border: 2px solid var(--asneris-cyan);
  border-radius: var(--asneris-radius-xl);
  padding: 24px;
  box-shadow: 0 20px 60px rgba(6, 41, 95, 0.3);
}

/* Dark premium hero */
.asneris-hero-dark {
  background:
    radial-gradient(circle at 65% 45%, rgba(78, 184, 197, 0.25) 0%, transparent 36%),
    linear-gradient(135deg, #06295F 0%, #1C73BA 50%, #164E91 100%);
  color: var(--asneris-white);
  padding: 96px 0 80px;
}

.asneris-hero-dark h1,
.asneris-hero-dark h2,
.asneris-hero-dark h3 {
  color: var(--asneris-white);
}

.asneris-hero-dark .asneris-lead {
  color: var(--asneris-cyan);
}

.asneris-hero-dark .asneris-label {
  background: rgba(78, 184, 197, 0.2);
  color: var(--asneris-cyan);
  border-color: var(--asneris-cyan);
}

/* Standard: compact hero for document listing pages */
.asneris-hero-card-focus {
  min-height: 165px;
  padding: 24px 0 18px;
  display: flex;
  align-items: center;
}


/* =========================================================
   10. CTA
   ========================================================= */

.asneris-cta {
  background: var(--asneris-gradient-dark);
  color: var(--asneris-white);
  border-radius: var(--asneris-radius-xl);
  padding: 60px;
  box-shadow: var(--asneris-shadow-md);
}

.asneris-cta h2,
.asneris-cta h3 {
  color: var(--asneris-white);
}

.asneris-cta .asneris-lead {
  color: rgba(255, 255, 255, 0.85);
}

/* Full-width CTA section (no border-radius) */
.asneris-section-cta {
  background: var(--asneris-gradient-dark);
}

.asneris-section-cta h2,
.asneris-section-cta h3,
.asneris-section-cta .asneris-label {
  color: var(--asneris-white);
}

.asneris-section-cta .asneris-lead {
  color: rgba(255, 255, 255, 0.85);
}

.asneris-section-cta .asneris-label {
  background: rgba(78, 184, 197, 0.18);
  border-color: rgba(78, 184, 197, 0.3);
}


/* =========================================================
   11. LISTS
   ========================================================= */

/* Check list */
.asneris-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.asneris-list li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 16px;
  color: var(--asneris-text);
  margin-bottom: 12px;
}

.asneris-list li:last-child { margin-bottom: 0; }

.asneris-list li::before {
  content: "✓";
  color: var(--asneris-green);
  font-weight: 900;
  flex-shrink: 0;
  margin-top: 1px;
}


/* =========================================================
   12. FAQ ACCORDION
   ========================================================= */

/* FAQ Accordion Container */
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* FAQ Item - Individual card */
.faq-item {
  background: var(--asneris-white);
  border-radius: 8px;
  border: 1px solid #E5E7EB;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
}

.faq-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* FAQ Question - Clickable header */
.faq-question {
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-question h3 {
  color: var(--asneris-navy);
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  flex: 1;
}

/* FAQ Icon - Plus/Minus indicator */
.faq-icon {
  color: var(--asneris-cyan);
  font-size: 24px;
  font-weight: 300;
  margin-left: 16px;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

/* FAQ Answer - Collapsible content */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-answer > div {
  padding: 0 24px 24px 24px;
}

.faq-answer p {
  color: var(--asneris-text);
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}

/* Open state (managed by JavaScript) */
.faq-item.is-open .faq-icon {
  transform: rotate(180deg);
}

.faq-item.is-open .faq-answer {
  max-height: 500px;
}


/* =========================================================
   13. CAPABILITY CARDS
   ========================================================= */

/* Capability Grid */
.asneris-capability-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Capability Card */
.asneris-capability-card {
  background: var(--asneris-white);
  padding: 36px 32px;
  border-radius: 12px;
  border: 2px solid #E0E7EF;
  transition: all 0.3s ease;
  position: relative;
  cursor: default;
}

.asneris-capability-card:hover {
  transform: translateY(-6px);
  border-color: var(--asneris-cyan);
  box-shadow: 0 12px 32px rgba(78, 184, 197, 0.15), 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Capability Card Badge */
.asneris-capability-card .asneris-badge {
  display: inline-block;
  padding: 4px 12px;
  background: var(--asneris-light-cyan);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--asneris-blue);
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Capability Card Icon */
.asneris-capability-card .asneris-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
}

/* Capability Card Title */
.asneris-capability-card h3 {
  color: var(--asneris-navy);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.3;
}

/* Capability Card Description */
.asneris-capability-card p {
  color: var(--asneris-text);
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
  opacity: 0.8;
}


/* =========================================================
   14. HERO COMPACT
   ========================================================= */

/* Compact hero with reduced height */
.asneris-hero-compact {
  padding: 80px 0 !important; /* Reduced from 140px */
}

.asneris-hero-compact h1 {
  font-size: 48px;
  margin-bottom: 16px;
}

.asneris-hero-compact .asneris-lead {
  font-size: 18px;
  margin-bottom: 28px;
  max-width: 480px;
}

/* Screenshot Card with depth and rotation */
.asneris-screenshot-card {
  background: var(--asneris-white);
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12), 0 8px 20px rgba(0, 0, 0, 0.08);
  transform: rotate(-1deg);
  transition: all 0.3s ease;
}

.asneris-screenshot-card:hover {
  transform: rotate(0deg) scale(1.02);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15), 0 12px 24px rgba(0, 0, 0, 0.1);
}


/* =========================================================
   15. KEY METRICS GRID
   ========================================================= */

.asneris-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  text-align: center;
  padding: 48px 0;
}

.asneris-metric {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.asneris-metric-value {
  font-size: 56px;
  font-weight: 900;
  color: var(--asneris-blue);
  line-height: 1;
}

.asneris-metric-label {
  font-size: 16px;
  color: var(--asneris-muted);
  font-weight: 500;
}


/* =========================================================
   16. FEATURE GRID
   ========================================================= */

.asneris-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.asneris-feature-card {
  background: var(--asneris-white);
  padding: 36px 32px;
  border-radius: 12px;
  border: 2px solid #E0E7EF;
  transition: all 0.3s ease;
  text-align: center;
}

.asneris-feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--asneris-cyan);
  box-shadow: 0 8px 24px rgba(78, 184, 197, 0.12);
}

.asneris-feature-icon {
  font-size: 48px;
  margin-bottom: 20px;
  display: block;
}

.asneris-feature-card h3 {
  color: var(--asneris-navy);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
}

.asneris-feature-card p {
  color: var(--asneris-text);
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
  opacity: 0.85;
}


/* =========================================================
   17. TRUST BLOCK
   ========================================================= */

.asneris-trust-block {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.asneris-trust-content {
  background: rgba(236, 248, 251, 0.5);
  padding: 40px 48px;
  border-radius: 12px;
  border: 1px solid rgba(78, 184, 197, 0.2);
}

.asneris-trust-content p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--asneris-text);
  margin-bottom: 16px;
}

.asneris-trust-content p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   18. FLOW DIAGRAM
   ========================================================= */

.asneris-flow-diagram {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 600px;
  margin: 0 auto;
}

.asneris-flow-step {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--asneris-white);
  padding: 24px 28px;
  border-radius: 12px;
  border: 2px solid #E0E7EF;
  transition: all 0.3s ease;
}

.asneris-flow-step:hover {
  border-color: var(--asneris-cyan);
  box-shadow: 0 4px 12px rgba(78, 184, 197, 0.1);
}

.asneris-flow-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--asneris-blue), var(--asneris-cyan));
  color: var(--asneris-white);
  font-size: 22px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.asneris-flow-content {
  flex: 1;
}

.asneris-flow-content h3 {
  color: var(--asneris-navy);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
}

.asneris-flow-content p {
  color: var(--asneris-muted);
  font-size: 14px;
  margin: 0;
  line-height: 1.6;
}

.asneris-flow-arrow {
  text-align: center;
  font-size: 28px;
  color: var(--asneris-cyan);
  font-weight: 700;
  padding: 8px 0;
}


/* =========================================================
   19. IMAGES
   ========================================================= */

.asneris-hero-image {
  width: 100%;
  max-width: 580px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--asneris-radius-lg);
}

.asneris-card-image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--asneris-radius-md);
  margin-bottom: 20px;
}

.asneris-blog-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--asneris-radius-md);
  margin-bottom: 20px;
}

.asneris-feature-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.asneris-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.asneris-logo {
  height: 44px;
  width: auto;
}

/* Screenshot frame */
.asneris-image-frame {
  background: var(--asneris-white);
  border: 1px solid var(--asneris-border);
  border-radius: var(--asneris-radius-xl);
  padding: 14px;
  box-shadow: var(--asneris-shadow-md);
}


/* =========================================================
   14. TIP / CALLOUT BOX
   Used for 💡 tip notes inside step-by-step sections.
   Class: asneris-tip
   ========================================================= */

.asneris-tip {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--asneris-light-cyan);
  border-left: 3px solid var(--asneris-cyan);
  border-radius: 0 var(--asneris-radius-sm) var(--asneris-radius-sm) 0;
  padding: 12px 16px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--asneris-dark-blue);
  max-width: 520px;
}

.asneris-tip-icon {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1.4;
}

/* Success / green tip variant */
.asneris-tip-success {
  background: #f0fdf4;
  border-left-color: var(--asneris-green);
  color: #166534;
}

/* Warning tip variant */
.asneris-tip-warning {
  background: #fffbeb;
  border-left-color: var(--asneris-warning);
  color: #92400e;
}


/* =========================================================
   16. SCREENSHOT PLACEHOLDER
   Replaces raw text like [Screenshot: ...] with a styled
   dashed frame. Remove and replace with real <img> when ready.
   Class: asneris-screenshot
   ========================================================= */

.asneris-screenshot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;           /* NOT 100% — allows horizontal margins to inset the box */
  min-height: 200px;
  background: repeating-linear-gradient(
    45deg,
    var(--asneris-bg),
    var(--asneris-bg) 6px,
    rgba(0,0,0,0.03) 6px,
    rgba(0,0,0,0.03) 12px
  );
  border: 2px dashed #94a3b8;
  border-radius: var(--asneris-radius-md);
  margin: 18px 16px 16px; /* inset from card edges so all 4 borders show */
  color: var(--asneris-muted);
  font-size: 13px;
  font-style: italic;
  text-align: center;
  padding: 20px;
  position: relative;
}

.asneris-screenshot::before {
  content: '📷';
  font-size: 36px;
  font-style: normal;
  opacity: 0.65;
  display: block;
  margin-bottom: 4px;
}

/* Small label strip at the top of the placeholder */
.asneris-screenshot::after {
  content: 'IMAGE';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-style: normal;
  color: #94a3b8;
  background: rgba(255,255,255,0.8);
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 2px 8px;
}


/* =========================================================
   17. SCORE COLOR MODIFIERS
   Apply to any element that shows a pillar score number.
   Semantic: green = good, orange = needs work, red = critical.
   ========================================================= */

.asneris-score-green  { color: var(--asneris-green)   !important; }
.asneris-score-orange { color: var(--asneris-warning)  !important; }
.asneris-score-red    { color: var(--asneris-error)    !important; }
.asneris-score-blue   { color: var(--asneris-blue)     !important; }
.asneris-score-navy   { color: var(--asneris-navy)     !important; }

/* Score circle — wrapper for SVG arc score display */
.asneris-score-circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.asneris-score-circle__label {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  color: var(--asneris-navy);
  line-height: 1;
  pointer-events: none;
}

.asneris-score-circle__label span {
  font-size: 11px;
  font-weight: 500;
  color: var(--asneris-muted);
  margin-top: 1px;
}

/* Dot indicators (inline status markers beside list items) */
.asneris-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}

.asneris-dot-green  { background: var(--asneris-green); }
.asneris-dot-orange { background: var(--asneris-warning); }
.asneris-dot-red    { background: var(--asneris-error); }
.asneris-dot-blue   { background: var(--asneris-blue); }


/* =========================================================
   18. STEP CONNECTOR — vertical timeline line
   Used in how-it-works sections between asneris-step-cards.
   ========================================================= */

.asneris-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.asneris-step-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding-bottom: 36px;
}

.asneris-step-row:last-child {
  padding-bottom: 0;
}

.asneris-step-spine {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.asneris-step-spine .asneris-step-number {
  flex-shrink: 0;
}

.asneris-step-connector {
  flex: 1;
  width: 2px;
  background: var(--asneris-border);
  margin-top: 8px;
  min-height: 24px;
}

.asneris-step-row:last-child .asneris-step-connector {
  display: none;
}

.asneris-step-body {
  padding-top: 8px;
}

.asneris-step-body h3 {
  margin-bottom: 6px;
}


/* =========================================================
   19. UTILITIES
   ========================================================= */

.asneris-mt-sm { margin-top: 16px; }
.asneris-mt-md { margin-top: 32px; }
.asneris-mt-lg { margin-top: 56px; }

.asneris-mb-sm { margin-top: 16px; }
.asneris-mb-md { margin-bottom: 32px; }

/* ── Gap Utilities ──────────────────────────── */
.asneris-gap-2  { gap: 8px; }
.asneris-gap-3  { gap: 12px; }
.asneris-gap-4  { gap: 16px; }
.asneris-gap-6  { gap: 24px; }
.asneris-gap-8  { gap: 32px; }
.asneris-gap-10 { gap: 40px; }

/* ── Max Width Utilities ────────────────────── */
.asneris-max-w-sm   { max-width: 700px; }
.asneris-max-w-md   { max-width: 900px; }
.asneris-max-w-lg   { max-width: 1000px; }
.asneris-max-w-xl   { max-width: 1100px; }
.asneris-max-w-2xl  { max-width: 1400px; }

/* ── List Styling ────────────────────────────── */
.asneris-list {
  margin: 0 0 20px 20px;
  padding: 0;
  line-height: 2;
  list-style-position: outside;
}

.asneris-list li {
  color: var(--asneris-text);
  font-size: 16px;
  margin-bottom: 8px;
}

.asneris-list li:last-child {
  margin-bottom: 0;
}

.asneris-list-compact li {
  margin-bottom: 6px;
}

/* ── Border Radius Utilities ──────────────── */
.asneris-rounded-sm { border-radius: var(--asneris-radius-sm); }
.asneris-rounded-md { border-radius: var(--asneris-radius-md); }
.asneris-rounded-lg { border-radius: var(--asneris-radius-lg); }

/* ── Border Utilities ─────────────────────── */
.asneris-border       { border: 1px solid var(--asneris-border); }
.asneris-border-cyan  { border: 2px solid var(--asneris-cyan); }
.asneris-border-bottom { border-bottom: 1px solid var(--asneris-border); }

/* ── Flexbox Utilities ───────────────────── */
.asneris-flex       { display: flex; }
.asneris-flex-col   { flex-direction: column; }
.asneris-items-center { align-items: center; }
.asneris-justify-center { justify-content: center; }
.asneris-flex-1     { flex: 1; }

/* ── Text Alignment ──────────────────────── */
.asneris-text-center { text-align: center; }
.asneris-text-left   { text-align: left; }

/* ── Display Utilities ───────────────────── */
.asneris-block       { display: block; }
.asneris-inline-block { display: inline-block; }

/* ── Height Utilities ────────────────────── */
.asneris-h-52 { height: 52px; }
.asneris-min-w-140 { min-width: 140px; }
.asneris-min-w-160 { min-width: 160px; }

.asneris-bg-white { background: var(--asneris-white); }
.asneris-bg-soft  { background: var(--asneris-light-cyan); }
.asneris-bg-dark  { background: var(--asneris-navy); }

.asneris-text-navy  { color: var(--asneris-navy); }
.asneris-text-muted { color: var(--asneris-muted); }
.asneris-text-white { color: var(--asneris-white); }

/* ── Form Elements ────────────────────────── */
.asneris-input,
.asneris-page input[type="text"].asneris-input,
.asneris-page input[type="url"].asneris-input,
.asneris-page input[type="email"].asneris-input,
.asneris-page textarea.asneris-input {
  width: 100%;
  height: 52px;
  padding: 0 20px;
  font-size: 16px;
  font-family: inherit;
  border: 1px solid var(--asneris-border);
  border-radius: var(--asneris-radius-sm);
  background: var(--asneris-white);
  color: var(--asneris-text);
  transition: border-color 0.2s;
}

.asneris-input:focus,
.asneris-page input.asneris-input:focus,
.asneris-page textarea.asneris-input:focus {
  outline: none;
  border-color: var(--asneris-cyan);
}

.asneris-page textarea.asneris-input {
  height: auto;
  min-height: 120px;
  padding: 14px 20px;
  resize: vertical;
}

.asneris-label-text {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--asneris-text);
  margin-bottom: 12px;
}

.asneris-input-group {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* ── Page Title Section Pattern ────────────── */
.asneris-page-title-section {
  background: var(--asneris-bg);
  padding: 32px 0;
  text-align: center;
  border-bottom: 1px solid var(--asneris-border);
}

.asneris-page-title-section h1 {
  font-size: 32px;
  font-weight: 700;
  margin: 0;
  color: var(--asneris-text);
}

/* ── Typography Utilities ─────────────────── */
/* Font sizes */
.asneris-text-xs   { font-size: 12px; }
.asneris-text-sm   { font-size: 14px; }
.asneris-text-base { font-size: 16px; }
.asneris-text-lg   { font-size: 18px; }
.asneris-text-xl   { font-size: 20px; }
.asneris-text-2xl  { font-size: 24px; }
.asneris-text-3xl  { font-size: 28px; }
.asneris-text-4xl  { font-size: 32px; }
.asneris-text-5xl  { font-size: 40px; }
.asneris-text-6xl  { font-size: 64px; }

/* Font weights */
.asneris-font-normal  { font-weight: 400; }
.asneris-font-medium  { font-weight: 500; }
.asneris-font-semibold { font-weight: 600; }
.asneris-font-bold    { font-weight: 700; }
.asneris-font-extrabold { font-weight: 800; }

/* Line heights */
.asneris-leading-none   { line-height: 1; }
.asneris-leading-tight  { line-height: 1.1; }
.asneris-leading-snug   { line-height: 1.2; }
.asneris-leading-normal { line-height: 1.3; }
.asneris-leading-relaxed { line-height: 1.7; }
.asneris-leading-loose  { line-height: 1.8; }
.asneris-leading-list   { line-height: 2; }

/* Letter spacing */
.asneris-tracking-tight    { letter-spacing: -1.5px; }
.asneris-tracking-snug     { letter-spacing: -0.5px; }
.asneris-tracking-normal   { letter-spacing: 0; }

/* ── Padding Utilities ────────────────────── */
.asneris-p-0  { padding: 0; }
.asneris-p-4  { padding: 16px; }
.asneris-p-5  { padding: 20px; }
.asneris-p-6  { padding: 24px; }
.asneris-p-7  { padding: 28px; }
.asneris-p-8  { padding: 32px; }
.asneris-p-10 { padding: 40px; }
.asneris-p-12 { padding: 48px; }
.asneris-p-15 { padding: 60px; }
.asneris-p-20 { padding: 80px; }

.asneris-py-0  { padding-top: 0; padding-bottom: 0; }
.asneris-py-4  { padding-top: 16px; padding-bottom: 16px; }
.asneris-py-5  { padding-top: 20px; padding-bottom: 20px; }
.asneris-py-6  { padding-top: 24px; padding-bottom: 24px; }
.asneris-py-7  { padding-top: 28px; padding-bottom: 28px; }
.asneris-py-8  { padding-top: 32px; padding-bottom: 32px; }
.asneris-py-10 { padding-top: 40px; padding-bottom: 40px; }
.asneris-py-12 { padding-top: 48px; padding-bottom: 48px; }
.asneris-py-15 { padding-top: 60px; padding-bottom: 60px; }
.asneris-py-20 { padding-top: 80px; padding-bottom: 80px; }

.asneris-px-4  { padding-left: 16px; padding-right: 16px; }
.asneris-px-5  { padding-left: 20px; padding-right: 20px; }
.asneris-px-6  { padding-left: 24px; padding-right: 24px; }
.asneris-px-8  { padding-left: 32px; padding-right: 32px; }
.asneris-px-12 { padding-left: 48px; padding-right: 48px; }

.asneris-pt-8  { padding-top: 32px; }
.asneris-pt-12 { padding-top: 48px; }
.asneris-pt-15 { padding-top: 60px; }
.asneris-pt-20 { padding-top: 80px; }

.asneris-pb-0  { padding-bottom: 0; }
.asneris-pb-5  { padding-bottom: 20px; }
.asneris-pb-6  { padding-bottom: 24px; }
.asneris-pb-8  { padding-bottom: 32px; }
.asneris-pb-12 { padding-bottom: 48px; }

/* ── Margin Utilities ──────────────────────── */
.asneris-m-0  { margin: 0; }
.asneris-mb-0  { margin-bottom: 0; }
.asneris-mb-2  { margin-bottom: 8px; }
.asneris-mb-3  { margin-bottom: 12px; }
.asneris-mb-4  { margin-bottom: 16px; }
.asneris-mb-5  { margin-bottom: 20px; }
.asneris-mb-6  { margin-bottom: 24px; }
.asneris-mb-7  { margin-bottom: 28px; }
.asneris-mb-8  { margin-bottom: 32px; }
.asneris-mb-10 { margin-bottom: 40px; }
.asneris-mb-12 { margin-bottom: 48px; }

.asneris-mt-7  { margin-top: 28px; }
.asneris-mt-12 { margin-top: 48px; }

/* Section background variants */
.asneris-section-white      { background: var(--asneris-white); }
.asneris-section-soft       { background: var(--asneris-bg); }
.asneris-section-light-cyan { background: var(--asneris-light-cyan); }
.asneris-section-gradient   { background: linear-gradient(135deg, #164E91 0%, #4EB8C5 100%); }

.asneris-divider {
  border: 0;
  border-top: 1px solid var(--asneris-border);
  margin: 20px 0;
}


/* =========================================================
   20. RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
  :root {
    --asneris-section-gap: 56px;
  }

  .asneris-hero-grid,
  .asneris-grid-2,
  .asneris-grid-3,
  .asneris-grid-4 {
    grid-template-columns: 1fr;
  }

  .asneris-hero,
  .asneris-hero-dark {
    padding: 64px 0 56px;
  }

  .asneris-hero-card-focus {
    min-height: 143px;
    padding: 18px 0 14px;
  }

  .asneris-cta {
    padding: 40px 28px;
  }

  /* Tablet buttons — slightly smaller */
  .asneris-btn,
  .asneris-page .asneris-btn,
  .asneris-page a.asneris-btn,
  .asneris-page button.asneris-btn {
    height: 46px;
    min-width: 130px;
    padding: 0 22px !important;
    font-size: 15px;
  }
}

@media (max-width: 600px) {
  .asneris-container {
    width: min(100% - 24px, var(--asneris-max-width));
  }

  .asneris-hero-card-focus {
    min-height: 128px;
    padding: 14px 0 11px;
  }

  .asneris-actions {
    flex-direction: column;
    align-items: stretch;
  }

  /* Mobile buttons — compact, no fixed height, allow text to wrap */
  .asneris-btn,
  .asneris-page .asneris-btn,
  .asneris-page a.asneris-btn,
  .asneris-page button.asneris-btn {
    height: auto !important;
    min-height: 42px;
    min-width: unset;
    padding: 10px 16px !important;
    font-size: 14px;
    white-space: normal;
    text-align: center;
  }

  /* Buttons in .asneris-actions stretch full width */
  .asneris-actions .asneris-btn {
    width: 100%;
    justify-content: center;
  }

  .asneris-card,
  .asneris-tool-card,
  .asneris-step-card,
  .asneris-testimonial-card,
  .asneris-pricing-card {
    padding: 22px;
  }

  .asneris-dashboard-card { padding: 20px; }
  .asneris-score-card      { padding: 20px 14px; }

  /* Mobile pricing cards — disable hover effects, optimize for touch */
  .pricing-card-selectable:hover {
    transform: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }

  .pricing-card-selectable.selected:hover {
    box-shadow: 0 4px 12px rgba(78, 184, 197, 0.15) !important;
  }

  /* Pricing buttons — full width on mobile for better touch targets */
  .pricing-btn {
    width: 100%;
    padding: 12px 24px;
    min-height: 44px;
  }

  /* Metrics grid — 2 columns on mobile */
  .asneris-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .asneris-metric-value {
    font-size: 42px;
  }

  /* Feature cards — single column on mobile */
  .asneris-feature-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Hero compact — reduce padding further */
  .asneris-hero-compact {
    padding: 60px 0 !important;
  }

  .asneris-hero-compact h1 {
    font-size: 36px;
  }

  .asneris-hero-compact .asneris-lead {
    font-size: 16px;
  }
}


/* ── Additional responsive rules for tablet (max-width: 992px) ── */
@media (max-width: 992px) {
  /* Metrics grid — 2 columns on tablet */
  .asneris-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  /* Feature grid — 2 columns on tablet */
  .asneris-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Capability grid — 2 columns on tablet */
  .asneris-capability-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Hero compact — adjust for tablet */
  .asneris-hero-compact {
    padding: 70px 0 !important;
  }

  .asneris-hero-compact h1 {
    font-size: 42px;
  }

  /* Flow diagram — reduce padding */
  .asneris-flow-step {
    padding: 20px 24px;
  }

  /* Trust content — reduce padding */
  .asneris-trust-content {
    padding: 32px 36px;
  }
}


/* ── Single column layouts for capability and feature grids on mobile ── */
@media (max-width: 640px) {
  .asneris-capability-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .asneris-feature-grid {
    grid-template-columns: 1fr;
  }

  .asneris-metrics-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .asneris-flow-step {
    flex-direction: column;
    text-align: center;
  }

  .asneris-trust-content {
    padding: 24px 20px;
  }
}


/* =========================================================
   20. SEO ENGINE COMPONENTS
   Reusable components specific to the SEO Engine page.
   All class names follow the asneris-* convention.
   ========================================================= */

/* ── Section backgrounds ── */

/* Light green tint — used for register / CTA sections */
.asneris-section-register {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-top: 1px solid #bbf7d0;
  border-bottom: 1px solid #bbf7d0;
}

/* ── Mini dashboard (hero visual) ── */

.asneris-mini-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.asneris-mini-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.asneris-mini-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--asneris-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* 2×2 grid of mini score pills */
.asneris-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.asneris-mini-pill {
  background: var(--asneris-bg);
  border-radius: var(--asneris-radius-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.asneris-mini-score {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.asneris-mini-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--asneris-muted);
  text-align: center;
}

/* Action queue mini (inside dashboard card) */
.asneris-mini-queue {
  margin-top: 12px;
  background: var(--asneris-bg);
  border-radius: var(--asneris-radius-sm);
  padding: 12px;
}

.asneris-mini-queue-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--asneris-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.asneris-mini-queue-item {
  background: var(--asneris-white);
  border: 1px solid var(--asneris-border);
  border-left: 3px solid var(--asneris-green);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--asneris-text);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.asneris-mini-queue-item:last-child { margin-bottom: 0; }

/* ── Pain list ── */

.asneris-pain-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.asneris-pain-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--asneris-white);
  border: 1px solid var(--asneris-border);
  border-radius: var(--asneris-radius-md);
  padding: 16px 18px;
}

.asneris-pain-icon {
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 2px;
  line-height: 1;
}

.asneris-pain-item strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--asneris-text);
  margin-bottom: 3px;
}

.asneris-pain-item span {
  font-size: 14px;
  color: var(--asneris-muted);
  line-height: 1.5;
}

/* ── Solution box (green gradient) ── */

.asneris-solution-box {
  background: linear-gradient(135deg, #16A76A 0%, #0e8a54 100%);
  color: var(--asneris-white);
  border-radius: var(--asneris-radius-lg);
  padding: 36px;
}

.asneris-solution-box h3 {
  color: var(--asneris-white);
  font-size: 22px;
  margin-bottom: 10px;
}

.asneris-solution-box p {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 20px;
}

.asneris-solution-list {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.asneris-solution-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.92);
}

.asneris-solution-list li::before {
  content: "✓";
  font-weight: 900;
  color: #a8f0c2;
  flex-shrink: 0;
}

/* ── Pillar cards ── */

.asneris-pillar-card {
  background: var(--asneris-white);
  border: 1px solid var(--asneris-border);
  border-radius: var(--asneris-radius-md);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}

.asneris-pillar-card:hover {
  box-shadow: var(--asneris-shadow-md);
  transform: translateY(-3px);
}

.asneris-pillar-header {
  padding: 20px 22px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.asneris-pillar-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.asneris-pillar-score-wrap {
  margin-left: auto;
  text-align: right;
}

.asneris-pillar-score {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.asneris-pillar-score-label {
  font-size: 11px;
  color: var(--asneris-muted);
  font-weight: 600;
}

.asneris-pillar-body {
  padding: 0 22px 20px;
}

.asneris-pillar-desc {
  font-size: 14px;
  color: var(--asneris-muted);
  margin-bottom: 14px;
  line-height: 1.55;
}

.asneris-pillar-issues {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.asneris-pillar-issues li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--asneris-muted);
}

/* Pillar color themes */
.asneris-pillar-teal .asneris-pillar-icon   { background: #e0f7f4; color: #0d9488; }
.asneris-pillar-teal .asneris-pillar-score  { color: #0d9488; }
.asneris-pillar-orange .asneris-pillar-icon { background: #fef3c7; color: #b45309; }
.asneris-pillar-orange .asneris-pillar-score{ color: var(--asneris-warning); }
.asneris-pillar-blue .asneris-pillar-icon   { background: #dbeafe; color: var(--asneris-blue); }
.asneris-pillar-blue .asneris-pillar-score  { color: var(--asneris-blue); }
.asneris-pillar-purple .asneris-pillar-icon { background: #ede9fe; color: #7c3aed; }
.asneris-pillar-purple .asneris-pillar-score{ color: #7c3aed; }
.asneris-pillar-green .asneris-pillar-icon  { background: #dcfce7; color: #166534; }
.asneris-pillar-green .asneris-pillar-score { color: var(--asneris-green); }

/* ── Action queue cards ── */

.asneris-queue-card {
  background: var(--asneris-white);
  border-radius: var(--asneris-radius-md);
  padding: 20px;
  box-shadow: var(--asneris-shadow-sm);
}

.asneris-queue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.asneris-queue-header h4 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 0;
}

.asneris-queue-count {
  background: #dcfce7;
  color: #166534;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--asneris-radius-pill);
}

/* Individual action item inside queue */
.asneris-queue-item {
  border: 1px solid var(--asneris-border);
  border-radius: var(--asneris-radius-sm);
  padding: 14px 16px;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
  background: var(--asneris-white);
}

.asneris-queue-item:last-child { margin-bottom: 0; }

/* Left priority border */
.asneris-queue-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
}

.asneris-priority-critical::before { background: var(--asneris-error); }
.asneris-priority-high::before     { background: var(--asneris-warning); }
.asneris-priority-medium::before   { background: var(--asneris-blue); }

.asneris-queue-num {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 22px;
  height: 22px;
  background: var(--asneris-bg);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--asneris-muted);
}

.asneris-queue-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--asneris-text);
  margin-bottom: 4px;
  padding-right: 30px;
}

.asneris-queue-desc {
  font-size: 13px;
  color: var(--asneris-muted);
  margin-bottom: 10px;
  line-height: 1.45;
}

.asneris-queue-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.asneris-queue-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
}

.asneris-tag-critical  { background: #fee2e2; color: #991b1b; }
.asneris-tag-high      { background: #fef3c7; color: #92400e; }
.asneris-tag-medium    { background: #dbeafe; color: #1e40af; }
.asneris-tag-low-effort{ background: #dcfce7; color: #166534; }
.asneris-tag-content   { background: #f3f4f6; color: #374151; }
.asneris-tag-links     { background: #ede9fe; color: #5b21b6; }
.asneris-tag-perf      { background: #fce7f3; color: #9d174d; }

/* ── Insight cards ── */

.asneris-insight-card {
  background: var(--asneris-white);
  border: 1px solid var(--asneris-border);
  border-radius: var(--asneris-radius-md);
  padding: 18px 20px;
}

.asneris-insight-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.asneris-insight-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--asneris-text);
  margin-bottom: 5px;
}

.asneris-insight-desc {
  font-size: 13px;
  color: var(--asneris-muted);
  line-height: 1.5;
}

/* ── CTR / Strike Rate bars ── */

.asneris-ctr-card {
  background: var(--asneris-white);
  border-radius: var(--asneris-radius-md);
  padding: 24px;
  box-shadow: var(--asneris-shadow-sm);
  margin-bottom: 16px;
}

.asneris-ctr-card h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}

.asneris-ctr-subtitle {
  font-size: 13px;
  color: var(--asneris-muted);
  margin-bottom: 18px;
}

.asneris-ctr-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--asneris-border);
}

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

.asneris-ctr-page {
  font-size: 13px;
  font-weight: 600;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--asneris-text);
}

.asneris-ctr-bar-wrap {
  width: 90px;
  background: var(--asneris-bg);
  border-radius: 4px;
  height: 8px;
  flex-shrink: 0;
}

.asneris-ctr-bar {
  height: 8px;
  border-radius: 4px;
}

.asneris-ctr-val {
  font-size: 12px;
  font-weight: 700;
  width: 36px;
  text-align: right;
  flex-shrink: 0;
}

/* CTR color states */
.asneris-ctr-good .asneris-ctr-bar { background: var(--asneris-green); }
.asneris-ctr-good .asneris-ctr-val { color: var(--asneris-green); }
.asneris-ctr-warn .asneris-ctr-bar { background: var(--asneris-warning); }
.asneris-ctr-warn .asneris-ctr-val { color: var(--asneris-warning); }
.asneris-ctr-bad  .asneris-ctr-bar { background: var(--asneris-error); }
.asneris-ctr-bad  .asneris-ctr-val { color: var(--asneris-error); }

.asneris-strike-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--asneris-warning);
  margin-left: auto;
  flex-shrink: 0;
}

/* ── Register flow ── */

.asneris-flow {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 40px;
}

.asneris-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 150px;
  max-width: 200px;
  position: relative;
}

.asneris-flow-step:not(:last-child)::after {
  content: '→';
  position: absolute;
  right: -12px;
  top: 20px;
  font-size: 18px;
  color: var(--asneris-green);
  font-weight: 700;
}

.asneris-flow-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--asneris-white);
  border: 2px solid var(--asneris-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 2px 12px rgba(22, 167, 106, 0.14);
}

.asneris-flow-step strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--asneris-text);
  text-align: center;
}

.asneris-flow-step span {
  font-size: 12px;
  color: var(--asneris-muted);
  text-align: center;
  line-height: 1.4;
}

/* ── Toolkit chips (feature list) ── */

.asneris-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 36px;
}

.asneris-chip {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--asneris-radius-pill);
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
}

/* ── Site footer ── */

.asneris-site-footer {
  background: #0f172a;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  padding: 28px 5%;
  font-size: 14px;
}

.asneris-site-footer p { color: rgba(255, 255, 255, 0.5); margin-bottom: 0; }
.asneris-site-footer a { color: rgba(255, 255, 255, 0.7); }
.asneris-site-footer a:hover { color: var(--asneris-white); }

/* ── Responsive for SEO Engine components ── */

@media (max-width: 768px) {
  .asneris-mini-grid      { grid-template-columns: repeat(2, 1fr); }
  .asneris-flow           { gap: 16px; }
  .asneris-flow-step:not(:last-child)::after { display: none; }
  .asneris-ctr-bar-wrap   { width: 60px; }
}

/* Mobile (≤600px): tighter vertical rhythm so sections fit single-viewport height */
@media (max-width: 600px) {
  :root {
    --asneris-section-gap: 40px; /* down from 56px at ≤900px */
  }

  /* CTA card: less padding at true mobile */
  .asneris-cta {
    padding: 32px 20px;
  }

  /* Register flow steps: compact spacing */
  .asneris-flow {
    gap: 12px;
    margin-bottom: 24px;
  }
  .asneris-flow-step {
    min-width: 120px;
    gap: 6px;
  }
  .asneris-flow-icon {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
  .asneris-flow-step strong { font-size: 13px; }
  .asneris-flow-step span   { font-size: 11px; }

  /* Chips: tighter gap + less bottom margin */
  .asneris-chips {
    gap: 8px;
    margin-bottom: 24px;
  }
  .asneris-chip {
    font-size: 13px;
    padding: 6px 14px;
  }
}


/* =========================================================
   21. PAGE COMPONENTS (from asneris.com homepage)
   Product banner, prose card, feature spotlight, full footer.
   ========================================================= */

/* ── Stacked button group (vertical instead of row) ── */

.asneris-actions-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* Homepage video block (lazy thumbnail + embedded player) */
.asneris-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid #D7EAF2;
  box-shadow: 0 18px 48px rgba(6, 41, 95, 0.14);
  background: #06295F;
}

.asneris-video-launch {
  position: relative;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.asneris-video-launch::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 41, 95, 0.5), rgba(6, 41, 95, 0.2));
}

.asneris-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 24px rgba(6, 41, 95, 0.35);
  display: grid;
  place-items: center;
  pointer-events: none;
}

.asneris-video-play::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 22px solid #164E91;
  margin-left: 6px;
}

.asneris-video-launch:hover .asneris-video-play {
  transform: translate(-50%, -50%) scale(1.05);
}

.asneris-video-meta {
  color: #5F718A;
  font-size: 14px;
  margin: 14px 0 0;
}

.asneris-video-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ── Product banner card ── */
/* Dark navy banner: brand logo + name + tagline on left, illustration on right */

.asneris-product-banner {
  background: linear-gradient(135deg, var(--asneris-navy) 0%, var(--asneris-dark-blue) 100%);
  border-radius: var(--asneris-radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 40px 48px;
  min-height: 220px;
}

.asneris-product-banner-brand {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.asneris-product-banner-logo {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  object-fit: contain;
  background: var(--asneris-white);
  padding: 8px;
  flex-shrink: 0;
}

.asneris-product-banner-name {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  color: var(--asneris-white);
  line-height: 1.15;
  margin-bottom: 6px;
}

.asneris-product-banner-name span {
  color: var(--asneris-cyan);
}

.asneris-product-banner-tagline {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
}

.asneris-product-banner-visual {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.asneris-product-banner-visual img {
  max-height: 160px;
  width: auto;
  object-fit: contain;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .asneris-product-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px;
  }
  .asneris-product-banner-visual { display: none; }
}

@media (max-width: 640px) {
  .asneris-video-wrap {
    border-radius: 10px;
  }

  .asneris-video-play {
    width: 68px;
    height: 68px;
  }
}

/* ── Prose card ── */
/* White rounded card containing only text content — h2 + paragraphs */

.asneris-prose-card {
  background: var(--asneris-white);
  border-radius: var(--asneris-radius-lg);
  padding: 48px 52px;
  box-shadow: 0 2px 16px rgba(6, 41, 95, 0.06);
}

.asneris-prose-card h2 {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 800;
  color: var(--asneris-navy);
  margin-bottom: 20px;
  line-height: 1.2;
}

.asneris-prose-card p {
  font-size: 16px;
  color: var(--asneris-muted);
  line-height: 1.7;
  max-width: 640px;
  margin-bottom: 16px;
}

.asneris-prose-card p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .asneris-prose-card { padding: 28px 22px; }
}

/* ── Feature spotlight card ── */
/* Full-bleed dark card: image centered top, large white title, muted description */
/* Used for scrollable tool feature showcases */

.asneris-spotlight-card {
  background: linear-gradient(180deg, #0d1b2e 0%, #0a1628 100%);
  border-radius: var(--asneris-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 56px 40px;
  min-height: 480px;
}

.asneris-spotlight-img {
  max-width: 220px;
  max-height: 200px;
  object-fit: contain;
  margin-bottom: 36px;
}

/* Placeholder when no image available */
.asneris-spotlight-img-placeholder {
  width: 200px;
  height: 160px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  margin-bottom: 36px;
}

.asneris-spotlight-title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  color: var(--asneris-white);
  line-height: 1.15;
  margin-bottom: 20px;
}

.asneris-spotlight-desc {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
  max-width: 520px;
}

/* Grid of spotlight cards (2-col or 3-col on wide screens) */
.asneris-spotlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
}

@media (max-width: 600px) {
  .asneris-spotlight-card { padding: 40px 24px; min-height: 360px; }
  .asneris-spotlight-img  { max-width: 160px; }
  .asneris-spotlight-grid { grid-template-columns: 1fr; }
}

/* ── Multi-column footer ── */
/* Logo + tagline left, link columns (About / Privacy / Social) right */

.asneris-footer {
  background: var(--asneris-white);
  border-top: 1px solid var(--asneris-border);
  padding: 56px 5% 36px;
}

.asneris-footer-inner {
  max-width: var(--asneris-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: start;
}

.asneris-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.asneris-footer-brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.asneris-footer-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}

.asneris-footer-brand-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--asneris-navy);
}

.asneris-footer-tagline {
  font-size: 13px;
  color: var(--asneris-muted);
  line-height: 1.5;
  max-width: 280px;
}

.asneris-footer-cols {
  display: flex;
  gap: 48px;
}

.asneris-footer-col h3 {
  font-size: 13px;
  font-weight: 800;
  color: var(--asneris-text);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 14px;
}

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

.asneris-footer-col ul li a {
  font-size: 14px;
  color: var(--asneris-muted);
  text-decoration: none;
  transition: color 0.15s;
}

.asneris-footer-col ul li a:hover {
  color: var(--asneris-navy);
}

.asneris-footer-bottom {
  max-width: var(--asneris-max-width);
  margin: 32px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--asneris-border);
  font-size: 13px;
  color: var(--asneris-muted);
  text-align: center;
}

@media (max-width: 768px) {
  .asneris-footer-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .asneris-footer-cols { flex-wrap: wrap; gap: 28px; }
}


/* =========================================================
   22. TOOL PAGE COMPONENTS
   URL input bar, health check results, status rows.
   Used on tool pages like Website Health Check.
   ========================================================= */

/* ── Tool input bar ── */
/* Large URL input with search icon inside + attached action button */

.asneris-tool-bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--asneris-white);
  border: 2px solid var(--asneris-border);
  border-radius: var(--asneris-radius-md);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
  max-width: 800px;
}

.asneris-tool-bar:focus-within {
  border-color: var(--asneris-blue);
  box-shadow: 0 0 0 4px rgba(28, 115, 186, 0.12);
}

.asneris-tool-bar-icon {
  display: flex;
  align-items: center;
  padding: 0 14px 0 18px;
  color: var(--asneris-muted);
  flex-shrink: 0;
  font-size: 18px;
  pointer-events: none;
}

.asneris-tool-bar input[type="text"],
.asneris-tool-bar input[type="url"] {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  font-family: inherit;
  color: var(--asneris-text);
  padding: 16px 12px 16px 0;
  min-width: 0;
}

.asneris-tool-bar input::placeholder {
  color: var(--asneris-muted);
  opacity: 0.7;
}

.asneris-tool-bar .asneris-btn {
  border-radius: 0;
  min-width: 130px;
  margin: 0;
  border: none;
  border-left: 2px solid var(--asneris-border);
  flex-shrink: 0;
}

/* Label above the input bar */
.asneris-tool-bar-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--asneris-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

/* Wrapper that contains label + bar + hint */
.asneris-tool-input {
  max-width: 800px;
}

.asneris-tool-hint {
  font-size: 13px;
  color: var(--asneris-muted);
  margin-top: 8px;
}

@media (max-width: 600px) {
  .asneris-tool-bar {
    flex-direction: column;
    border-radius: var(--asneris-radius-md);
    padding: 10px;
    gap: 10px;
  }
  .asneris-tool-bar .asneris-btn {
    border-left: none;
    border-top: none; /* gap replaces the separator line */
    border-radius: var(--asneris-radius-pill);
    width: 100%;
  }

  /* Result card header: stack title above summary dots */
  .asneris-result-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
  }

  .asneris-result-card-url {
    max-width: 100%;
    width: 100%;
  }

  .asneris-result-card-meta {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* Result rows: tighter padding, smaller icon */
  .asneris-result-row {
    padding: 12px 16px;
    gap: 10px;
  }

  .asneris-result-icon {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }

  .asneris-result-name  { font-size: 14px; }
  .asneris-result-desc  { font-size: 12px; }
  .asneris-result-status { font-size: 10px; padding: 3px 8px; }
}

/* ── Health check result card ── */
/* Wraps the list of result rows after the tool runs */

.asneris-result-card {
  background: var(--asneris-white);
  border: 1px solid var(--asneris-border);
  border-radius: var(--asneris-radius-lg);
  overflow: hidden;
  margin-top: 32px;
}

.asneris-result-card-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--asneris-border);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  background: var(--asneris-bg);
}

.asneris-result-card-header h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--asneris-navy);
  margin-bottom: 0;
}

/* URL display — styled like a read-only input so it's clearly a data field */
.asneris-result-card-url {
  display: inline-flex;
  align-items: center;
  background: var(--asneris-white);
  border: 1px solid var(--asneris-border);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 13px;
  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace;
  color: var(--asneris-navy);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
  min-width: 0;
  cursor: default;
  user-select: all;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}

/* Meta row in result card header: URL + summary dots */
.asneris-result-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex-wrap: wrap;
}

.asneris-result-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ── Individual result row ── */

.asneris-result-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--asneris-border);
}

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

.asneris-result-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  flex-shrink: 0;
  margin-top: 1px;
}

.asneris-result-body { flex: 1; min-width: 0; }

.asneris-result-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--asneris-text);
  margin-bottom: 3px;
}

.asneris-result-desc {
  font-size: 13px;
  color: var(--asneris-muted);
  line-height: 1.5;
}

.asneris-result-status {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: var(--asneris-radius-pill);
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
}

/* Status colour variants */
.asneris-result-pass .asneris-result-icon   { background: #dcfce7; color: #166534; }
.asneris-result-pass .asneris-result-status { background: #dcfce7; color: #166534; }

.asneris-result-warn .asneris-result-icon   { background: #fef3c7; color: #92400e; }
.asneris-result-warn .asneris-result-status { background: #fef3c7; color: #92400e; }

.asneris-result-fail .asneris-result-icon   { background: #fee2e2; color: #991b1b; }
.asneris-result-fail .asneris-result-status { background: #fee2e2; color: #991b1b; }

.asneris-result-info .asneris-result-icon   { background: #dbeafe; color: #1e40af; }
.asneris-result-info .asneris-result-status { background: #dbeafe; color: #1e40af; }

/* ── Result summary bar ── */
/* Shows pass/warn/fail counts at the top of results */

.asneris-result-summary {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}

.asneris-result-summary-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
}

.asneris-result-summary-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.asneris-result-summary-dot.pass { background: var(--asneris-green); }
.asneris-result-summary-dot.warn { background: var(--asneris-warning); }
.asneris-result-summary-dot.fail { background: var(--asneris-error); }

/* ── Tool page hero (centred, narrower than standard hero) ── */

.asneris-tool-hero {
  text-align: center;
  padding: 64px 5% 48px;
}

.asneris-tool-hero h1 {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;
  color: var(--asneris-navy);
  margin-bottom: 14px;
  line-height: 1.15;
}

.asneris-tool-hero p.asneris-lead {
  max-width: 560px;
  margin: 0 auto 32px;
}

@media (max-width: 600px) {
  .asneris-tool-hero { padding: 40px 5% 32px; }
}


/* =========================================================
   23. ARTICLE / GUIDE PAGE COMPONENTS
   Long-form content pages: guide intro, TOC, article prose,
   inline code. Seen on geo-fundamentals, discoverability-signals,
   seo-fundamentals pages.
   ========================================================= */

/* ── Article prose wrapper ── */
/* Max-width readable column for long-form content pages.  */

.asneris-article {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 5%;
}

.asneris-article h2 {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  color: var(--asneris-navy);
  margin-top: 56px;
  margin-bottom: 14px;
  padding-top: 24px;
  border-top: 1px solid var(--asneris-border);
  line-height: 1.2;
}

.asneris-article h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--asneris-text);
  margin-top: 32px;
  margin-bottom: 10px;
}

.asneris-article p {
  font-size: 16px;
  color: var(--asneris-text);
  line-height: 1.75;
  margin-bottom: 16px;
}

.asneris-article ul,
.asneris-article ol {
  padding-left: 22px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.asneris-article li {
  font-size: 16px;
  color: var(--asneris-text);
  line-height: 1.65;
}

/* Inline code */
.asneris-article code,
code.asneris-code {
  background: #f1f5f9;
  color: #0f4c7d;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.875em;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
}

/* Code block */
.asneris-article pre,
pre.asneris-pre {
  background: #0f172a;
  color: #e2e8f0;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 14px;
  line-height: 1.65;
  padding: 20px 24px;
  border-radius: var(--asneris-radius-md);
  overflow-x: auto;
  margin: 20px 0;
}

.asneris-article pre code {
  background: none;
  border: none;
  color: inherit;
  padding: 0;
  font-size: inherit;
  white-space: pre;
}

/* ── Guide intro block ── */
/* Full-width intro card with colored left accent border.    */
/* Used at the top of guide/fundamentals pages.             */
/* Color variants: -orange (GEO), -blue (Discoverability),  */
/*                 -teal (SEO Fundamentals)                  */

.asneris-guide-intro {
  border-left: 5px solid var(--asneris-navy);
  background: var(--asneris-bg);
  border-radius: 0 var(--asneris-radius-md) var(--asneris-radius-md) 0;
  padding: 28px 36px;
  margin-bottom: 32px;
}

.asneris-guide-intro-orange {
  border-left-color: var(--asneris-orange);
  background: #fff8f4;
}

.asneris-guide-intro-blue {
  border-left-color: var(--asneris-blue);
  background: #f0f7ff;
}

.asneris-guide-intro-teal {
  border-left-color: var(--asneris-cyan);
  background: #f0fbfc;
}

.asneris-guide-intro-green {
  border-left-color: var(--asneris-green);
  background: #f0fdf4;
}

.asneris-guide-intro-eyebrow {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--asneris-muted);
  margin-bottom: 10px;
}

.asneris-guide-intro-orange .asneris-guide-intro-eyebrow { color: var(--asneris-orange); }
.asneris-guide-intro-blue   .asneris-guide-intro-eyebrow { color: var(--asneris-blue); }
.asneris-guide-intro-teal   .asneris-guide-intro-eyebrow { color: var(--asneris-cyan); }
.asneris-guide-intro-green  .asneris-guide-intro-eyebrow { color: var(--asneris-green); }

.asneris-guide-intro h1 {
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 800;
  color: var(--asneris-navy);
  margin-bottom: 12px;
  line-height: 1.15;
}

.asneris-guide-intro p {
  font-size: 17px;
  color: var(--asneris-muted);
  line-height: 1.65;
  margin-bottom: 0;
  max-width: 760px;
}

/* ── Table of Contents ── */
/* "ON THIS PAGE" label + 2-column grid of anchor links.    */

.asneris-toc {
  background: var(--asneris-white);
  border: 1px solid var(--asneris-border);
  border-radius: var(--asneris-radius-md);
  padding: 22px 28px 26px;
  margin-bottom: 40px;
}

.asneris-toc-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--asneris-muted);
  margin-bottom: 14px;
}

.asneris-toc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 32px;
}

.asneris-toc-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--asneris-blue);
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.15s;
}

.asneris-toc-link::before {
  content: '→';
  flex-shrink: 0;
  font-size: 13px;
}

.asneris-toc-link:hover {
  color: var(--asneris-navy);
}

@media (max-width: 600px) {
  .asneris-toc-grid { grid-template-columns: 1fr; }
  .asneris-guide-intro { padding: 20px 22px; }
}


/* =========================================================
/* =========================================================
   24. NAVIGATION COMPONENTS
   Prev/next article nav, sidebar right widget cards.
   ========================================================= */

/* ── Prev / Next navigation ── */
/* Card shown at the end of guide/article pages.            */
/* Title + description centred, prev button left, next right. */

.asneris-page-nav {
  background: var(--asneris-white);
  border: 1px solid var(--asneris-border);
  border-radius: var(--asneris-radius-md);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "prev centre next";
  align-items: center;
  gap: 20px;
  margin-top: 48px;
  overflow: hidden; /* prevent buttons from bleeding outside card */
}

.asneris-page-nav-prev {
  grid-area: prev;
  justify-self: start;
}

.asneris-page-nav-centre {
  grid-area: centre;
  text-align: center;
}

.asneris-page-nav-centre strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: var(--asneris-navy);
  margin-bottom: 4px;
}

.asneris-page-nav-centre p {
  font-size: 14px;
  color: var(--asneris-muted);
  margin: 0;
  line-height: 1.45;
}

.asneris-page-nav-next {
  grid-area: next;
  justify-self: end;
}

/* Colour variants for nav buttons — inherit from btn-primary/secondary */
/* Optional: custom colours per section topic */
.asneris-btn-green {
  background: var(--asneris-green);
  color: var(--asneris-white);
  border: 2px solid var(--asneris-green);
}
.asneris-btn-green:hover {
  background: #0e8a54;
  border-color: #0e8a54;
}

.asneris-btn-purple {
  background: #5b21b6;
  color: var(--asneris-white);
  border: 2px solid #5b21b6;
}
.asneris-btn-purple:hover {
  background: #4c1d95;
  border-color: #4c1d95;
}

/* Tablet: centre spans full top row, buttons sit side-by-side below */
@media (max-width: 900px) {
  .asneris-page-nav {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "centre centre"
      "prev   next";
    gap: 16px;
    padding: 24px 28px;
  }
  .asneris-page-nav-centre { grid-area: centre; text-align: center; }
  .asneris-page-nav-prev   { grid-area: prev;   justify-self: start; }
  .asneris-page-nav-next   { grid-area: next;   justify-self: end; }
}

/* Mobile: fully stacked — centre text, then prev, then next, all full-width.
   Side-by-side was too narrow for longer button labels like "Discoverability Signals →" */
@media (max-width: 480px) {
  .asneris-page-nav {
    grid-template-columns: 1fr;
    grid-template-areas:
      "centre"
      "prev"
      "next";
    gap: 12px;
    padding: 20px;
  }
  .asneris-page-nav-centre { text-align: center; }
  .asneris-page-nav-prev   { justify-self: stretch; }
  .asneris-page-nav-next   { justify-self: stretch; }
  .asneris-page-nav-prev .asneris-btn,
  .asneris-page-nav-next .asneris-btn {
    width: 100%;
    justify-content: center;
    font-size: 13px;
    padding: 11px 16px;
  }
}

/* Single-button states: when only prev OR only next is present, collapse to
   a centred 1-col layout so the lone button doesn't float to one edge.      */
.asneris-page-nav:has(.asneris-page-nav-prev:empty) {
  grid-template-columns: 1fr;
  grid-template-areas: "centre" "next";
}
.asneris-page-nav:has(.asneris-page-nav-prev:empty) .asneris-page-nav-prev { display: none; }
.asneris-page-nav:has(.asneris-page-nav-prev:empty) .asneris-page-nav-next { justify-self: center; }

.asneris-page-nav:has(.asneris-page-nav-next:empty) {
  grid-template-columns: 1fr;
  grid-template-areas: "centre" "prev";
}
.asneris-page-nav:has(.asneris-page-nav-next:empty) .asneris-page-nav-next { display: none; }
.asneris-page-nav:has(.asneris-page-nav-next:empty) .asneris-page-nav-prev { justify-self: center; }

/* =========================================================
   25. STICKY ARTICLE NAV BAR  —  .asneris-nav-bar
   Slides up from the bottom when the reader is mid-article
   and the inline page-nav block is below the viewport.
   Activated by adding .is-visible via JS.
   ========================================================= */

.asneris-nav-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  background: var(--asneris-navy, #0f172a);
  border-top: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 -6px 24px rgba(0,0,0,0.2);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 14px 32px;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}
.asneris-nav-bar.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.asneris-nav-bar-prev { justify-self: start; }
.asneris-nav-bar-next { justify-self: end; }
.asneris-nav-bar-centre {
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
}

.asneris-nav-bar-btn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  line-height: 1;
}
.asneris-nav-bar-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.3);
}
.asneris-nav-bar-btn-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.asneris-nav-bar-btn-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.asneris-nav-bar-next .asneris-nav-bar-btn {
  align-items: flex-end;
}

/* Static preview variant (used inside the component demo, not fixed) */
.asneris-nav-bar--preview {
  position: static;
  transform: none;
  opacity: 1;
  pointer-events: auto;
  border-radius: var(--asneris-radius-md);
}

@media (max-width: 600px) {
  .asneris-nav-bar {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "prev next";
    padding: 10px 16px;
    gap: 10px;
  }
  .asneris-nav-bar-centre { display: none; }
  .asneris-nav-bar-prev { grid-area: prev; }
  .asneris-nav-bar-next { grid-area: next; }
}

/* =========================================================
   26. SCROLL-TO-TOP FAB  —  .asneris-scroll-fab
   Fixed bottom-right. JS adds .is-visible on scroll > 300px.
   Sits above the sticky nav bar when both are visible.
   ========================================================= */

.asneris-scroll-fab {
  position: fixed;
  bottom: 24px; /* default: corner position when nav bar is hidden */
  right: 24px;
  z-index: 199;
  transition: bottom 0.25s ease;
}

/* Lift FAB above the sticky nav bar when it's visible */
body.asneris-nav-active .asneris-scroll-fab {
  bottom: 89px; /* nav bar is 73px tall + 16px gap */
}
.asneris-scroll-fab-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--asneris-border, #e2e8f0);
  background: var(--asneris-white, #fff);
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  cursor: grab;
  touch-action: none; /* required for custom touch drag */
  color: var(--asneris-navy, #0f172a);
  text-decoration: none;
  transform: scale(0);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.15s, color 0.15s;
  pointer-events: none;
  user-select: none;
}
.asneris-scroll-fab-btn.is-visible {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.asneris-scroll-fab-btn:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,0.15);
  color: var(--asneris-blue, #2563eb);
  border-color: var(--asneris-blue, #2563eb);
}
.asneris-scroll-fab-btn.is-dragging {
  cursor: grabbing;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  transform: scale(1.08);
  opacity: 0.95;
  transition: box-shadow 0.1s, transform 0.1s;
}

/* ── Sidebar internal links ── */
/* Vertical nav list for linking to related pages.          */
/* Supports active state, section labels, and nested items. */

.asneris-sidenav {
  background: var(--asneris-white);
  border: 1px solid var(--asneris-border);
  border-radius: var(--asneris-radius-md);
  overflow: hidden;
}

.asneris-sidenav-label {
  padding: 14px 18px 10px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--asneris-muted);
  border-bottom: 1px solid var(--asneris-border);
  background: var(--asneris-bg);
}

.asneris-sidenav-list {
  list-style: none;
  padding: 8px 0;
  margin: 0;
}

.asneris-sidenav-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--asneris-muted);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  line-height: 1.4;
}

.asneris-sidenav-link:hover {
  background: var(--asneris-bg);
  color: var(--asneris-navy);
}

/* Active / current page */
.asneris-sidenav-link.is-active,
.asneris-sidenav-link[aria-current="page"] {
  color: var(--asneris-navy);
  font-weight: 700;
  background: #f0f7ff;
  border-left-color: var(--asneris-blue);
}

/* Optional icon before link text */
.asneris-sidenav-link-icon {
  font-size: 15px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

/* Section divider within sidenav */
.asneris-sidenav-divider {
  height: 1px;
  background: var(--asneris-border);
  margin: 8px 0;
}

.asneris-sidenav-section-label {
  padding: 10px 18px 4px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--asneris-muted);
}

/* =========================================================
   27. SIDEBAR LAYOUT & NAVIGATION
   Two-column page grid, sticky sidebar, sidenav link list,
   and collapsible mobile toggle (details/summary).
   ========================================================= */

/* ── Page layout with sidebar ── */
/* Wrapper that puts sidenav on the left, content on the right. */

/* Sidebar left (default) */
.asneris-page-with-sidebar {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: start;
  max-width: var(--asneris-max-width);
  margin: 0 auto;
  padding: 0 5%;
}

/* ── Sidebar right: widget cards ── */
.asneris-sidebar-widget {
  background: #fff;
  border: 1px solid var(--asneris-border, #e2e8f0);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 16px;
}

.asneris-sidebar-widget-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--asneris-text-muted, #64748b);
  margin-bottom: 10px;
}

.asneris-sidebar-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.asneris-sidebar-links li + li {
  margin-top: 6px;
}

.asneris-sidebar-links a {
  font-size: 0.88rem;
  color: var(--asneris-blue, #2563eb);
  text-decoration: none;
}

.asneris-sidebar-links a:hover {
  text-decoration: underline;
}

.asneris-sidebar-cta {
  background: var(--asneris-navy, #0f172a);
  border-color: transparent;
  color: #fff;
  text-align: center;
}

.asneris-sidebar-cta p {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.8);
  margin: 0 0 12px;
}

.asneris-btn-sm {
  padding: 7px 14px;
  font-size: 0.8rem;
}

/* Sidebar right variant */
.asneris-page-with-sidebar-right {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 40px;
  align-items: start;
  max-width: var(--asneris-max-width);
  margin: 0 auto;
  padding: 0 5%;
}

/* Prevent grid children from blowing out their cells (CSS grid min-width: auto gotcha) */
.asneris-page-with-sidebar > *,
.asneris-page-with-sidebar-right > * {
  min-width: 0;
}

/* Move sidebar to end for right layout */
.asneris-page-with-sidebar-right .asneris-sidebar-col {
  order: 2;
}
.asneris-page-with-sidebar-right .asneris-content-col {
  order: 1;
}

.asneris-sidebar-col {
  position: sticky;
  top: 100px;
}

@media (max-width: 900px) {
  .asneris-page-with-sidebar,
  .asneris-page-with-sidebar-right {
    grid-template-columns: 1fr;
    padding: 0 5%;
  }

  /* Sidebar stays in flow — no fixed bottom bar */
  .asneris-page-with-sidebar .asneris-sidebar-col,
  .asneris-page-with-sidebar-right .asneris-sidebar-col {
    position: static;
    order: -1; /* always appears above content on mobile */
    width: 100%;
  }

  /* No extra bottom padding needed */
  .asneris-page-with-sidebar .asneris-article,
  .asneris-page-with-sidebar .asneris-content-col,
  .asneris-page-with-sidebar-right .asneris-content-col {
    padding-bottom: 0;
  }
}

/* ── Mobile sidenav: ☰ collapsible toggle (details/summary) ── */

/* Desktop: summary hidden; panel content always visible (details has open attr) */
.asneris-sidenav-panel {
  display: block;
}

.asneris-sidenav-toggle {
  display: none;
}

/* Mobile: activate the toggle */
@media (max-width: 900px) {
  .asneris-sidenav-panel {
    display: block;
    border: 1px solid var(--asneris-border);
    border-radius: var(--asneris-radius-md);
    overflow: hidden;
    margin-bottom: 24px;
  }

  /* The clickable toggle bar */
  .asneris-sidenav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 18px;
    font-size: 14px;
    font-weight: 700;
    color: var(--asneris-navy);
    background: var(--asneris-bg);
    cursor: pointer;
    list-style: none;
    user-select: none;
    border-bottom: 1px solid transparent;
    transition: background 0.15s;
  }
  /* Remove native triangle in all browsers */
  .asneris-sidenav-toggle::-webkit-details-marker { display: none; }
  .asneris-sidenav-toggle::marker { display: none; }

  .asneris-sidenav-toggle:hover {
    background: var(--asneris-light-cyan);
  }

  /* Chevron icon — rotates when open */
  .asneris-sidenav-toggle::after {
    content: '▾';
    font-size: 16px;
    color: var(--asneris-muted);
    transition: transform 0.2s;
    flex-shrink: 0;
  }
  .asneris-sidenav-panel[open] .asneris-sidenav-toggle {
    border-bottom-color: var(--asneris-border);
  }
  .asneris-sidenav-panel[open] .asneris-sidenav-toggle::after {
    transform: rotate(-180deg);
  }

  /* Nav content shown when panel is open */
  .asneris-sidenav-panel .asneris-sidenav {
    border: none;
    border-radius: 0;
    margin: 0;
  }

  /* Right-sidebar widget wrapper inside the details panel */
  .asneris-sidebar-widgets-inner {
    padding: 12px 14px 14px;
  }

  .asneris-sidenav-link-icon { display: none; }
}

/* Shared sidebar page navigation (left + right variants)
  Standard usage:
  1) Always include .asneris-sidebar-nav-layout on wrapper
  2) Choose ONE mode flag on desktop:
    - .asneris-sidebar-nav-sticky-enabled   (recommended)
    - .asneris-sidebar-nav-sticky-disabled  (scrolls with content)
  3) If no mode flag is provided, fallback is sticky for backward compatibility */
.asneris-page-with-sidebar.asneris-sidebar-nav-layout,
.asneris-page-with-sidebar-right.asneris-sidebar-nav-layout {
  grid-template-columns: 280px 1fr;
  gap: 24px;
  padding-bottom: 64px;
}

.asneris-page-with-sidebar-right.asneris-sidebar-nav-layout {
  grid-template-columns: 1fr 280px;
}

.asneris-sidebar-nav-layout .asneris-sidebar-nav {
  position: sticky;
  top: 100px;
}

/* Sidebar sticky mode flags (desktop)
   - asneris-sidebar-nav-sticky-enabled  : sticky follows viewport
   - asneris-sidebar-nav-sticky-disabled : scrolls with page content */
.asneris-sidebar-nav-layout.asneris-sidebar-nav-sticky-enabled .asneris-sidebar-nav {
  position: sticky;
  top: 100px;
}

.asneris-sidebar-nav-layout.asneris-sidebar-nav-sticky-disabled .asneris-sidebar-nav {
  position: static;
  top: auto;
}

/* Backward-compatibility alias (legacy class name, deprecated) */
.asneris-sidebar-nav-layout.asneris-sidebar-nav-scroll .asneris-sidebar-nav {
  position: static;
  top: auto;
}

.asneris-sidebar-nav-layout.is-nav-collapsed {
  grid-template-columns: 1fr;
  max-width: 1120px;
}

.asneris-sidebar-nav-layout.is-nav-collapsed .asneris-sidebar-nav {
  display: none;
}

.asneris-sidebar-nav-title {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--asneris-text-muted, #64748b);
}

.asneris-sidebar-nav-list,
.asneris-sidebar-nav-child-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.asneris-sidebar-nav-item + .asneris-sidebar-nav-item {
  margin-top: 4px;
}

.asneris-sidebar-nav-link {
  display: block;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--asneris-navy);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.asneris-sidebar-nav-link:hover {
  background: rgba(236, 248, 251, 0.8);
}

.asneris-sidebar-nav-link.is-active {
  background: rgba(78, 184, 197, 0.14);
  color: var(--asneris-dark-blue);
  font-weight: 600;
}

.asneris-sidebar-nav-item-toggle {
  margin-top: 6px;
  border-top: 1px solid var(--asneris-border, #e2e8f0);
  padding-top: 6px;
}

.asneris-sidebar-nav-item-toggle summary {
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--asneris-navy);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.asneris-sidebar-nav-item-toggle summary:hover {
  background: rgba(236, 248, 251, 0.8);
}

.asneris-sidebar-nav-item-toggle summary::-webkit-details-marker {
  display: none;
}

.asneris-sidebar-nav-item-toggle summary::after {
  content: '▾';
  font-size: 12px;
  color: var(--asneris-muted);
  transition: transform 0.2s ease;
}

.asneris-sidebar-nav-item-toggle:not([open]) summary::after {
  transform: rotate(-90deg);
}

.asneris-sidebar-nav-child-list {
  margin-top: 4px;
  padding-left: 14px;
}

.asneris-sidebar-nav-child-list li + li {
  margin-top: 4px;
}

.asneris-sidebar-nav-child-list .asneris-sidebar-nav-link {
  font-size: 0.84rem;
  color: var(--asneris-text);
  padding: 6px 10px;
}

.asneris-sidebar-nav-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 120;
  border: 0;
  border-radius: 999px;
  background: var(--asneris-orange);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  padding: 12px 16px;
  box-shadow: 0 12px 28px rgba(6, 41, 95, 0.24);
  cursor: pointer;
}

.asneris-sidebar-nav-fab:hover {
  background: var(--asneris-orange-hover);
}

.asneris-sidebar-nav-fab.is-nav-open {
  background: var(--asneris-dark-blue);
}

.asneris-anchor-section {
  scroll-margin-top: 120px;
}

@media (max-width: 900px) {
  .asneris-page-with-sidebar.asneris-sidebar-nav-layout,
  .asneris-page-with-sidebar-right.asneris-sidebar-nav-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .asneris-sidebar-nav-layout .asneris-sidebar-nav {
    display: none;
  }

  .asneris-sidebar-nav-layout.is-nav-open-mobile .asneris-sidebar-nav {
    display: block;
    position: fixed;
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 140;
    overflow: auto;
    background: #fff;
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 18px 36px rgba(6, 41, 95, 0.25);
  }

  .asneris-sidebar-nav-layout.is-nav-open-mobile::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 130;
    background: rgba(6, 41, 95, 0.45);
  }

  .asneris-sidebar-nav-fab {
    right: 14px;
    bottom: 14px;
    padding: 11px 14px;
  }
}


/* =========================================================
   28. WIDGET CONTAINER
   Scoped wrapper when the widget is embedded inside a
   WordPress content column. Does NOT do full-width breakout.
   ========================================================= */

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

.asneris-widget {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--asneris-text);
  line-height: 1.6;
  width: 100%;
}

.asneris-widget h1,
.asneris-widget h2,
.asneris-widget h3,
.asneris-widget h4 {
  margin: 0 0 0.5em;
  font-weight: 700;
  line-height: 1.25;
  color: var(--asneris-navy);
}

.asneris-widget p {
  margin: 0 0 1em;
}

.asneris-widget ul,
.asneris-widget ol {
  margin: 0 0 1em;
  padding-left: 1.4em;
}

.asneris-widget a {
  color: var(--asneris-blue);
  text-decoration: none;
}

.asneris-widget a:hover {
  text-decoration: underline;
}


/* =========================================================
   29. FORM FIELDS
   .asneris-field / .asneris-input — URL, email, reference
   ========================================================= */


/* =========================================================
   30. TOOLKIT PAGE COMPONENTS
   Shared styles for the SEO Toolkit product page layout.
   ========================================================= */

/* ── Page title bar — replaces WP's auto-generated entry-title ── */
.asneris-page-title-bar {
  background: var(--asneris-white);
  border-bottom: 1px solid var(--asneris-border);
  padding: 28px 0 20px;
}

.asneris-page-title {
  font-family: var(--asneris-font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--asneris-navy);
  margin: 0;
  line-height: 1.2;
}

.asneris-toolkit-hero {
  background: linear-gradient(135deg, #164E91 0%, #4EB8C5 100%);
  color: var(--asneris-white);
  padding: 80px 0;
}

.asneris-toolkit-hero h1,
.asneris-toolkit-hero h2,
.asneris-toolkit-hero h3 {
  color: var(--asneris-white);
  margin-bottom: 14px;
}

.asneris-toolkit-hero h1 {
  font-size: 64px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1.5px;
  margin-bottom: 32px;
}

.asneris-toolkit-hero .asneris-lead {
  color: rgba(255, 255, 255, 0.9);
  max-width: 860px;
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 24px;
}

.asneris-toolkit-hero .asneris-lead:last-child {
  margin-bottom: 0;
}

.asneris-toolkit-hero .asneris-label {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.45);
  color: #ffffff;
}

.asneris-toolkit-stack {
  display: grid;
  gap: 24px;
}

.asneris-toolkit-shot {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: center;
}

.asneris-toolkit-shot:nth-child(even) {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.asneris-toolkit-shot:nth-child(even) .asneris-toolkit-shot-media {
  order: 2;
}

.asneris-toolkit-shot:nth-child(even) .asneris-toolkit-shot-copy {
  order: 1;
}

.asneris-toolkit-shot-copy h3 {
  color: var(--asneris-text);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 16px;
}

.asneris-toolkit-shot-copy p {
  color: var(--asneris-text);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 0;
}

.asneris-toolkit-shot-media img {
  width: 100%;
  height: auto;
  border-radius: var(--asneris-radius-lg);
}

.asneris-toolkit-caption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--asneris-muted);
  text-align: center;
}

.asneris-toolkit-intro-card {
  background: linear-gradient(135deg, rgba(236, 248, 251, 0.8), rgba(255, 255, 255, 0.98));
}

.asneris-toolkit-intro-card h2 {
  color: var(--asneris-navy);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 24px;
}

.asneris-toolkit-intro-card p {
  color: var(--asneris-muted);
  font-size: 16px;
  line-height: 1.7;
}

@media (max-width: 960px) {
  .asneris-toolkit-hero h1 {
    font-size: 42px;
    letter-spacing: -1px;
    margin-bottom: 20px;
  }

  .asneris-toolkit-hero .asneris-lead {
    font-size: 17px;
    line-height: 1.75;
  }

  .asneris-toolkit-shot,
  .asneris-toolkit-shot:nth-child(even) {
    grid-template-columns: 1fr;
  }

  .asneris-toolkit-shot:nth-child(even) .asneris-toolkit-shot-media,
  .asneris-toolkit-shot:nth-child(even) .asneris-toolkit-shot-copy {
    order: initial;
  }
}

.asneris-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.asneris-field-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--asneris-text);
}

.asneris-input-wrap {
  position: relative;
}

.asneris-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--asneris-muted);
  pointer-events: none;
  width: 18px;
  justify-content: center;
  display: flex;
  align-items: center;
}

.asneris-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--asneris-border);
  border-radius: var(--asneris-radius-sm);
  font: inherit;
  font-size: 15px;
  background: var(--asneris-white);
  color: var(--asneris-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.asneris-input:focus {
  outline: none;
  border-color: var(--asneris-cyan);
  box-shadow: 0 0 0 3px rgba(78, 184, 197, 0.15);
}

.asneris-input--with-icon {
  padding-left: 44px;
}

/* Safety rule: if an icon is present but modifier class is missing, keep text from overlapping icon. */
.asneris-input-wrap > .asneris-input-icon + .asneris-input {
  padding-left: 44px;
}

.asneris-input--error {
  border-color: var(--asneris-error);
}

.asneris-input--error:focus {
  border-color: var(--asneris-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.asneris-input[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--asneris-bg);
}

.asneris-field-helper {
  font-size: 12px;
  color: var(--asneris-muted);
}

.asneris-field-helper--error {
  color: var(--asneris-error);
}


/* =========================================================
   30. SKELETON LOADER
   Shimmer placeholder blocks shown during scan loading.
   ========================================================= */

@keyframes asneris-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

.asneris-skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    var(--asneris-border) 25%,
    #e8f0f5 50%,
    var(--asneris-border) 75%
  );
  background-size: 600px 100%;
  animation: asneris-shimmer 1.4s infinite linear;
  border-radius: var(--asneris-radius-sm);
  width: 100%;
}


/* =========================================================
   31. SPINNER / PROGRESS RING
   Small inline button spinner + large scan elapsed-timer.
   ========================================================= */

@keyframes asneris-spin {
  to { transform: rotate(360deg); }
}

.asneris-spinner {
  display: inline-block;
  border-radius: 50%;
  border: 3px solid var(--asneris-border);
  border-top-color: var(--asneris-blue);
  animation: asneris-spin 0.75s linear infinite;
}

.asneris-spinner--sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.asneris-spinner--lg {
  width: 110px;
  height: 110px;
  border-width: 8px;
}

.asneris-spinner--warning {
  border-top-color: var(--asneris-orange);
}

.asneris-spinner-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.asneris-spinner-label {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--asneris-navy);
  line-height: 1;
}

.asneris-spinner-label span {
  font-size: 11px;
  color: var(--asneris-muted);
  margin-top: 2px;
}


/* =========================================================
   32. TABS
   Consolidated Report widget — active state via .is-active.
   ========================================================= */

.asneris-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--asneris-border);
  margin-bottom: 24px;
}

.asneris-tab {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--asneris-muted);
  background: none;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s, border-color 0.15s;
}

.asneris-tab:hover {
  color: var(--asneris-navy);
}

.asneris-tab.is-active {
  color: var(--asneris-dark-blue);
  border-bottom-color: var(--asneris-blue);
}

.asneris-tab-panel[hidden] {
  display: none;
}


/* =========================================================
   33. ALERT BANNERS
   Prominent status messages — processing, delayed, failed,
   ready — and inline form errors.
   ========================================================= */

.asneris-alert {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 16px 20px;
  border-radius: var(--asneris-radius-md);
  border-left: 4px solid transparent;
  font-size: 15px;
}

.asneris-alert-title {
  font-weight: 700;
  font-size: 15px;
}

.asneris-alert-body {
  font-size: 14px;
  color: inherit;
  opacity: 0.85;
}

.asneris-alert--success {
  background: #f0fdf4;
  border-left-color: var(--asneris-green);
  color: #166534;
}

.asneris-alert--error {
  background: #fef2f2;
  border-left-color: var(--asneris-error);
  color: #991b1b;
}

.asneris-alert--warning {
  background: #fffbeb;
  border-left-color: var(--asneris-warning);
  color: #92400e;
}

.asneris-alert--info {
  background: #eff6ff;
  border-left-color: var(--asneris-blue);
  color: #1e40af;
}

/* Purple note block for popup/right-menu context messages */
.asneris-note-purple {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: var(--asneris-radius-sm);
  border: 1px solid #c4b5fd;
  background: #ede9fe;
  color: #4c1d95;
  font-size: 14px;
  line-height: 1.6;
}


/* =========================================================
   34. CHECK RESULT ROW
   One row per SEO check result from the scan API.
   ========================================================= */

.asneris-check-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--asneris-border);
}

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

.asneris-check-icon {
  flex-shrink: 0;
  margin-top: 2px;
  width: 18px;
  height: 18px;
}

.asneris-check-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.asneris-check-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--asneris-text);
}

.asneris-check-message {
  font-size: 13px;
  color: var(--asneris-muted);
  line-height: 1.5;
}

.asneris-check-hint {
  font-size: 12px;
  color: var(--asneris-muted);
  opacity: 0.7;
  margin-top: 2px;
}

.asneris-check-opportunity {
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: var(--asneris-radius-sm);
}

.asneris-check-opportunity--fail {
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.asneris-check-opportunity--warning {
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.asneris-check-opportunity-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.asneris-check-opportunity-label--fail    { color: var(--asneris-error); }
.asneris-check-opportunity-label--warning { color: var(--asneris-orange); }

.asneris-check-opportunity-text {
  font-size: 13px;
  color: var(--asneris-text);
  line-height: 1.5;
}

/* =========================================================
   35. ICON SYSTEM
   Usage: Standardized SVG icon classes
   Requires: asneris-icons.svg sprite
   Example: <svg class="asneris-icon asneris-icon-lg"><use href="#icon-name"></use></svg>
   ========================================================= */

/* ── Base Icon Styles ── */
.asneris-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ── Icon Sizes ── */
.asneris-icon-xs {
  width: 16px;
  height: 16px;
}

.asneris-icon-sm {
  width: 20px;
  height: 20px;
}

.asneris-icon-md {
  width: 32px;
  height: 32px;
}

.asneris-icon-lg {
  width: 48px;
  height: 48px;
}

.asneris-icon-xl {
  width: 64px;
  height: 64px;
}

.asneris-icon-2xl {
  width: 80px;
  height: 80px;
}

/* ── Icon Colors ── */
.asneris-icon-navy {
  color: var(--asneris-navy);
}

.asneris-icon-blue {
  color: var(--asneris-blue);
}

.asneris-icon-cyan {
  color: var(--asneris-cyan);
}

.asneris-icon-orange {
  color: var(--asneris-orange);
}

.asneris-icon-green {
  color: var(--asneris-green);
}

.asneris-icon-muted {
  color: var(--asneris-muted);
}

/* ── Icon in Card Header ── */
.asneris-card-icon {
  margin-bottom: 20px;
}

/* ── Icon with Text Alignment ── */
.asneris-icon-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.asneris-icon-text svg {
  flex-shrink: 0;
}

/* =========================================================
   36. PUBLIC TOOL WIDGET INTEGRATION
   Styles for React-based SEO tool widgets embedded in
   WordPress pages. Works on both light and dark backgrounds.
   ========================================================= */

/* Widget Container - Glass morphism effect for dark backgrounds */
.asneris-public-tool {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* Override MUI styles when widget is embedded */
.asneris-public-tool * {
  box-sizing: border-box;
}

/* MUI Paper/Card - ensure white background */
.asneris-public-tool .MuiBox-root,
.asneris-public-tool .MuiPaper-root,
.asneris-public-tool .MuiCard-root {
  background: var(--asneris-white);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* MUI TextField integration with Asneris colors */
.asneris-public-tool .MuiTextField-root {
  width: 100%;
}

.asneris-public-tool .MuiOutlinedInput-root {
  background: var(--asneris-white);
  border-radius: 8px;
}

.asneris-public-tool .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: var(--asneris-cyan);
}

.asneris-public-tool .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--asneris-blue);
  border-width: 2px;
}

/* Input text visibility */
.asneris-public-tool .MuiInputBase-input {
  color: var(--asneris-navy);
}

.asneris-public-tool .MuiInputLabel-root {
  color: var(--asneris-text);
}

.asneris-public-tool .MuiInputLabel-root.Mui-focused {
  color: var(--asneris-blue);
}

/* MUI Button integration */
.asneris-public-tool .MuiButton-root {
  text-transform: none;
  font-weight: 600;
  border-radius: 50px;
  padding: 12px 32px;
  font-family: 'Inter', sans-serif;
}

.asneris-public-tool .MuiButton-containedPrimary {
  background: var(--asneris-orange);
  color: var(--asneris-white);
}

.asneris-public-tool .MuiButton-containedPrimary:hover {
  background: var(--asneris-orange-hover);
}

/* MUI Typography integration - ensure readable text */
.asneris-public-tool .MuiTypography-root {
  font-family: 'Inter', sans-serif;
  color: var(--asneris-navy);
}

.asneris-public-tool .MuiTypography-body1,
.asneris-public-tool .MuiTypography-body2 {
  color: var(--asneris-text);
}

/* MUI Loading states */
.asneris-public-tool .MuiCircularProgress-root {
  color: var(--asneris-cyan);
}

/* MUI Alert integration */
.asneris-public-tool .MuiAlert-root {
  border-radius: 8px;
}

.asneris-public-tool .MuiAlert-standardError {
  background: #fef2f2;
  color: #991b1b;
}

.asneris-public-tool .MuiAlert-standardSuccess {
  background: #f0fdf4;
  color: #166534;
}

.asneris-public-tool .MuiAlert-standardInfo {
  background: #eff6ff;
  color: #1e40af;
}

/* Ensure all nested content has proper contrast */
.asneris-public-tool h1,
.asneris-public-tool h2,
.asneris-public-tool h3,
.asneris-public-tool h4,
.asneris-public-tool h5,
.asneris-public-tool h6 {
  color: var(--asneris-navy);
}

.asneris-public-tool p {
  color: var(--asneris-text);
}

/* Responsive widget */
@media (max-width: 600px) {
  .asneris-public-tool {
    padding: 24px 20px;
    border-radius: 12px;
  }
  
  .asneris-public-tool .MuiButton-root {
    width: 100%;
    padding: 12px 24px;
  }
  
  .asneris-public-tool .MuiBox-root,
  .asneris-public-tool .MuiPaper-root,
  .asneris-public-tool .MuiCard-root {
    border-radius: 8px;
  }
}