/*
Theme Name: FinanceNovels
Theme URI: https://financenovels.com
Author: FinanceNovels Team
Author URI: https://financenovels.com
Description: A premium financial publishing and education WordPress theme for FinanceNovels.com. v2.0.0 — Fully upgraded editorial system with glassmorphism, fluid typography, container queries, dark-mode, reduced-motion, and comprehensive mobile-first responsive design across 7 breakpoints.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: finance-novels
Tags: blog, news, editorial, finance, one-column, two-columns, right-sidebar, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, accessibility-ready, block-styles, wide-blocks
*/

/* ============================================================
   0. TABLE OF CONTENTS
   ------------------------------------------------------------
   1.  DESIGN TOKENS               (colors, type, space, motion)
   2.  DARK MODE + THEME SWITCH    (auto + [data-theme])
   3.  RESET & BASE                (modern reset)
   4.  TYPOGRAPHY                  (fluid scale, drop-caps)
   5.  LAYOUT PRIMITIVES           (container, section, grid)
   6.  BUTTONS                     (7 variants, 5 sizes, states)
   7.  FORMS & INPUTS              (float labels, validation)
   8.  CHIPS, BADGES, TAGS         (accent, warning, live)
   9.  CARDS (BASE)                (glass, elevated, gradient)
   10. GRIDS                       (2/3/4-col, feature, cat)
   11. TOPIC / PRODUCT / TOOL / EDU CARDS
   12. HERO                        (aurora, mesh, ticker)
   13. NEWSLETTER                  (aurora bg, float labels)
   14. BREADCRUMBS                 (wrap, chevron, current)
   15. ARCHIVE / CATEGORY HERO
   16. TWO-COLUMN LAYOUT
   17. PAGINATION                  (numbers, prev/next)
   18. SINGLE POST                 (reading progress, TOC, share rail)
   19. COMPARISON PAGE             (sticky, rank ribbon)
   20. BLOG PAGE                   (filters, list, load-more)
   21. FAQ ACCORDION               (motion-safe)
   22. AUTHOR BOX / RELATED
   23. WIDGETS / SIDEBAR
   24. UTILITIES                   (spacing, text, display)
   25. ANIMATIONS & KEYFRAMES
   26. HEADER / NAV / MEGA MENU
   27. MOBILE NAV DRAWER
   28. FOOTER                      (4-col, back-to-top FAB)
   29. WORDPRESS CORE CLASSES
   30. RESPONSIVE — BASE            (>=1440)
   31. RESPONSIVE — LAPTOP          (1240)
   32. RESPONSIVE — TABLET-LG       (1024)
   33. RESPONSIVE — TABLET          (900)
   34. RESPONSIVE — TABLET-SM       (768)
   35. RESPONSIVE — MOBILE          (600)
   36. RESPONSIVE — MOBILE-SM       (420)
   37. CONTAINER QUERIES            (component-scoped)
   38. ACCESSIBILITY                (reduced-motion, focus)
   39. HIGH-CONTRAST + FORCED-COLORS
   40. PRINT STYLES
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   ------------------------------------------------------------
   All theme values live here. Change once, propagate everywhere.
   ============================================================ */
:root{
  /* -------- BRAND COLORS -------- */
  --primary: #0B5D4B;
  --primary-dark: #084537;
  --primary-darker: #05392C;
  --primary-light: #14806A;
  --primary-lighter: #2FA98D;
  --secondary: #102A43;
  --secondary-dark: #0A1D2E;
  --secondary-light: #1D3B57;
  --accent: #16A085;
  --accent-dark: #0E7E68;
  --accent-light: #4FC3A8;
  --accent-soft: #E8F5F1;
  --accent-softer: #F3FAF7;

  /* -------- SEMANTIC COLORS -------- */
  --success: #10B981;
  --success-soft: #D1FAE5;
  --danger: #EF4444;
  --danger-soft: #FEE2E2;
  --warning: #F59E0B;
  --warning-bg: #FFF9E6;
  --warning-border: #F0DFA4;
  --warning-text: #6B5A17;
  --info: #3B82F6;
  --info-soft: #DBEAFE;

  /* -------- NEUTRAL SURFACES -------- */
  --background: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #FAFBFC;
  --light-bg: #F6F8F9;
  --tint-bg: #F1F5F4;
  --deep-bg: #EEF2F5;
  --overlay: rgba(16, 42, 67, 0.55);
  --overlay-strong: rgba(16, 42, 67, 0.78);
  --scrim: rgba(0, 0, 0, 0.32);

  /* -------- TEXT -------- */
  --text: #1A1A1A;
  --text-strong: #0A0A0A;
  --text-light: #5F6B76;
  --text-muted: #8B95A0;
  --text-invert: #FFFFFF;
  --text-invert-soft: rgba(255, 255, 255, 0.82);

  /* -------- BORDERS & DIVIDERS -------- */
  --border: #E5E7EB;
  --border-strong: #D0D5DA;
  --border-stronger: #B7BEC6;
  --border-soft: #EEF1F4;
  --divider: color-mix(in srgb, var(--text) 8%, transparent);

  /* -------- GLASS / BACKDROP -------- */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-strong: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-shadow: 0 8px 32px rgba(16, 42, 67, 0.08);
  --glass-blur: saturate(180%) blur(18px);
  --glass-blur-lg: saturate(190%) blur(28px);

  /* -------- ELEVATION (5-step) -------- */
  --shadow-xs: 0 1px 2px rgba(16, 42, 67, 0.04);
  --shadow-sm: 0 1px 3px rgba(16, 42, 67, 0.06), 0 1px 2px rgba(16, 42, 67, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(16, 42, 67, 0.08), 0 2px 4px -2px rgba(16, 42, 67, 0.05);
  --shadow-lg: 0 12px 24px -6px rgba(16, 42, 67, 0.12), 0 6px 12px -6px rgba(16, 42, 67, 0.08);
  --shadow-xl: 0 24px 48px -12px rgba(16, 42, 67, 0.20), 0 12px 24px -12px rgba(16, 42, 67, 0.10);
  --shadow-2xl: 0 40px 80px -20px rgba(16, 42, 67, 0.28);
  --shadow-brand: 0 12px 32px -10px rgba(11, 93, 75, 0.28);
  --shadow-inner: inset 0 1px 2px rgba(16, 42, 67, 0.06);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
  --ring-brand: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
  --ring-focus: 0 0 0 3px color-mix(in srgb, var(--primary) 45%, transparent);

  /* -------- RADIUS SCALE -------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-3xl: 36px;
  --radius-full: 9999px;

  /* -------- SPACING SCALE (4px base) -------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-12: 56px;
  --space-14: 64px;
  --space-16: 80px;
  --space-20: 96px;
  --space-24: 128px;

  /* -------- LAYOUT -------- */
  --container: 1240px;
  --container-wide: 1360px;
  --container-narrow: 880px;
  --container-prose: 720px;
  --header-h: 72px;
  --header-h-mobile: 60px;
  --gutter: clamp(16px, 3vw, 32px);

  /* -------- TYPOGRAPHY -------- */
  --font-heading: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Source Serif Pro", "Charter", "Iowan Old Style", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  --fs-xs: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --fs-sm: clamp(0.82rem, 0.78rem + 0.15vw, 0.9rem);
  --fs-base: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  --fs-md: clamp(1rem, 0.95rem + 0.25vw, 1.12rem);
  --fs-lg: clamp(1.1rem, 1rem + 0.3vw, 1.25rem);
  --fs-xl: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --fs-2xl: clamp(1.5rem, 1.3rem + 0.7vw, 1.9rem);
  --fs-3xl: clamp(1.85rem, 1.55rem + 1.1vw, 2.4rem);
  --fs-4xl: clamp(2.15rem, 1.8rem + 1.5vw, 3rem);
  --fs-5xl: clamp(2.6rem, 2rem + 2.5vw, 3.75rem);
  --fs-6xl: clamp(3rem, 2.2rem + 3.5vw, 4.5rem);

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-widest: 0.16em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semi: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* -------- MOTION -------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-instant: 80ms;
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;
  --dur-slower: 600ms;
  --dur-slowest: 900ms;

  /* -------- GRADIENTS -------- */
  --grad-brand: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  --grad-brand-soft: linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, transparent), color-mix(in srgb, var(--accent) 12%, transparent));
  --grad-aurora: radial-gradient(1200px 600px at 10% 10%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 60%),
                 radial-gradient(900px 500px at 90% 20%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 60%),
                 radial-gradient(700px 400px at 50% 100%, color-mix(in srgb, var(--secondary) 18%, transparent), transparent 60%);
  --grad-mesh: conic-gradient(from 210deg at 50% 50%, var(--primary), var(--accent), var(--secondary), var(--primary));
  --grad-dark: linear-gradient(180deg, var(--secondary) 0%, var(--secondary-dark) 100%);
  --grad-fade-b: linear-gradient(180deg, transparent 0%, var(--background) 100%);
  --grad-fade-t: linear-gradient(0deg, transparent 0%, var(--background) 100%);

  /* -------- Z-INDEX SCALE -------- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 300;
  --z-drawer: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;
  --z-max: 9999;

  /* -------- ACCENT-COLOR (form controls) -------- */
  accent-color: var(--primary);
  color-scheme: light;
}


/* ============================================================
   2. DARK MODE + THEME SWITCH
   ------------------------------------------------------------
   Auto respects OS preference; can be overridden with
   <html data-theme="dark"> or [data-theme="light"].
   ============================================================ */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --background: #0B1220;
    --surface: #111A2C;
    --surface-2: #172236;
    --light-bg: #101A2A;
    --tint-bg: #142033;
    --deep-bg: #0C1524;
    --text: #E7ECF3;
    --text-strong: #FFFFFF;
    --text-light: #A8B3C1;
    --text-muted: #7A8695;
    --border: #223047;
    --border-strong: #2E3E58;
    --border-stronger: #3B4E6C;
    --border-soft: #1A2438;
    --glass-bg: rgba(17, 26, 44, 0.72);
    --glass-bg-strong: rgba(17, 26, 44, 0.88);
    --glass-border: rgba(255, 255, 255, 0.08);
    --accent-soft: color-mix(in srgb, var(--accent) 18%, transparent);
    --accent-softer: color-mix(in srgb, var(--accent) 10%, transparent);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.55);
    --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.65);
    color-scheme: dark;
  }
}

:root[data-theme="dark"]{
  --background: #0B1220;
  --surface: #111A2C;
  --surface-2: #172236;
  --light-bg: #101A2A;
  --tint-bg: #142033;
  --deep-bg: #0C1524;
  --text: #E7ECF3;
  --text-strong: #FFFFFF;
  --text-light: #A8B3C1;
  --text-muted: #7A8695;
  --border: #223047;
  --border-strong: #2E3E58;
  --border-stronger: #3B4E6C;
  --border-soft: #1A2438;
  --glass-bg: rgba(17, 26, 44, 0.72);
  --glass-bg-strong: rgba(17, 26, 44, 0.88);
  --glass-border: rgba(255, 255, 255, 0.08);
  --accent-soft: color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-softer: color-mix(in srgb, var(--accent) 10%, transparent);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.65);
  color-scheme: dark;
}


/* ============================================================
   3. RESET & BASE
   ------------------------------------------------------------
   Modern, minimal reset. Zero surprises.
   ============================================================ */
*,
*::before,
*::after{
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
  hanging-punctuation: first last;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

body{
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt", "ss01";
  font-variant-ligatures: common-ligatures contextual;
  overflow-x: clip;
  min-height: 100vh;
  min-height: 100dvh;
}

img, svg, video, canvas, picture{
  max-width: 100%;
  height: auto;
  display: block;
}

img{
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
  shape-margin: 1rem;
}

a{
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
a:hover{ color: var(--primary); }
a:focus-visible{
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: 4px;
}

button, [type="button"], [type="submit"], [type="reset"]{
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  padding: 0;
}
button:focus-visible{
  outline: none;
  box-shadow: var(--ring-focus);
}

input, textarea, select, button{
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

textarea{ resize: vertical; }

::selection{
  background: color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--text-strong);
  text-shadow: none;
}

/* Custom scrollbar (subtle) */
@supports (scrollbar-width: thin){
  html{
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
  }
}
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  background: var(--border-strong);
  border-radius: var(--radius-full);
  border: 2px solid var(--background);
}
::-webkit-scrollbar-thumb:hover{ background: var(--border-stronger); }

/* Skip link (a11y) */
.skip-link{
  position: absolute;
  top: -60px;
  left: 12px;
  background: var(--primary);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  z-index: var(--z-max);
  transition: top var(--dur-base) var(--ease);
}
.skip-link:focus{ top: 12px; color: #fff; }

/* Body lock for open modals/menus */
.body-lock{
  overflow: hidden;
  touch-action: none;
}

/* Screen-reader-only */
.screen-reader-text,
.sr-only{
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  word-wrap: normal !important;
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}
.screen-reader-text:focus,
.sr-only:focus{
  clip: auto;
  position: static !important;
  height: auto; width: auto;
  overflow: visible;
  white-space: normal;
  margin: 0;
}


/* ============================================================
   4. TYPOGRAPHY
   ------------------------------------------------------------
   Fluid, opinionated, editorial. Drop-caps + pull-quotes.
   ============================================================ */
h1, h2, h3, h4, h5, h6{
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--lh-tight);
  color: var(--text-strong);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1{
  font-size: var(--fs-5xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
}
h2{ font-size: var(--fs-3xl); }
h3{ font-size: var(--fs-xl); }
h4{ font-size: var(--fs-lg); }
h5{ font-size: var(--fs-md); }
h6{
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-light);
}

p{
  margin: 0 0 1em;
  text-wrap: pretty;
}
p:last-child{ margin-bottom: 0; }

strong, b{ font-weight: var(--weight-bold); color: var(--text-strong); }
em, i{ font-style: italic; }
small{ font-size: var(--fs-sm); color: var(--text-light); }

ul, ol{
  padding-left: 1.35em;
  margin: 0 0 1em;
}
li{ margin-bottom: 0.35em; }
li::marker{ color: var(--primary); }

hr{
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-8) 0;
}

blockquote{
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-6);
  border-left: 3px solid var(--primary);
  background: var(--tint-bg);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
  color: var(--text);
}
blockquote p:last-child{ margin-bottom: 0; }
blockquote cite{
  display: block;
  margin-top: var(--space-3);
  font-style: normal;
  font-size: var(--fs-sm);
  color: var(--text-light);
  font-weight: var(--weight-semi);
}

code, kbd, samp{
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: var(--tint-bg);
  color: var(--primary-dark);
}
pre{
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: var(--space-4) var(--space-5);
  background: var(--secondary);
  color: #E6EDF3;
  border-radius: var(--radius);
  overflow-x: auto;
  line-height: 1.6;
  margin: var(--space-5) 0;
}
pre code{ background: none; padding: 0; color: inherit; }

mark{
  background: color-mix(in srgb, var(--warning) 30%, transparent);
  color: var(--text-strong);
  padding: 0 4px;
  border-radius: 3px;
}

figure{ margin: var(--space-6) 0; }
figcaption{
  font-size: var(--fs-sm);
  color: var(--text-light);
  text-align: center;
  margin-top: var(--space-2);
  font-style: italic;
}

/* -------- Editorial helpers -------- */
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  color: var(--primary);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
}
.eyebrow::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
  animation: pulseDot 2.4s var(--ease) infinite;
}

.section-tag{
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--primary);
  display: inline-block;
  margin-bottom: 10px;
  position: relative;
  padding-left: 28px;
}
.section-tag::before{
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 20px; height: 2px;
  background: var(--primary);
  transform: translateY(-50%);
}

.gradient-text{
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.drop-cap::first-letter,
.has-drop-cap::first-letter{
  float: left;
  font-family: var(--font-heading);
  font-weight: var(--weight-black);
  font-size: 4.5em;
  line-height: 0.85;
  padding: 6px 14px 0 0;
  color: var(--primary);
}

.pull-quote{
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: var(--weight-bold);
  line-height: 1.3;
  color: var(--text-strong);
  border-top: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  padding: var(--space-6) 0;
  margin: var(--space-8) 0;
  text-align: center;
  letter-spacing: var(--tracking-snug);
}


/* ============================================================
   5. LAYOUT PRIMITIVES
   ============================================================ */
.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container-wide{ max-width: var(--container-wide); }
.container-narrow{ max-width: var(--container-narrow); }
.container-prose{ max-width: var(--container-prose); }

section{
  padding: clamp(48px, 7vw, 96px) 0;
  position: relative;
}

.section-alt{
  background: var(--light-bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section-dark{
  background: var(--grad-dark);
  color: var(--text-invert);
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4{
  color: var(--text-invert);
}
.section-dark p{ color: var(--text-invert-soft); }

.section-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-9);
  flex-wrap: wrap;
}
.section-head h2{ margin-bottom: 6px; }
.section-head p{
  color: var(--text-light);
  max-width: 560px;
  margin: 0;
  font-size: var(--fs-md);
}
.section-head .link{
  color: var(--primary);
  font-weight: var(--weight-semi);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast), gap var(--dur-fast);
}
.section-head .link:hover{
  border-color: var(--primary);
  gap: 10px;
}
.section-head .link::after{
  content: "→";
  transition: transform var(--dur-fast) var(--ease);
}
.section-head .link:hover::after{ transform: translateX(3px); }

.section-head.centered{
  justify-content: center;
  text-align: center;
  flex-direction: column;
  align-items: center;
}
.section-head.centered p{ margin: 0 auto; }

/* Decorative section divider */
.section-divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
  margin: var(--space-10) 0;
  border: none;
}

/* Spacers */
.stack > * + *{ margin-top: var(--space-4); }
.stack-sm > * + *{ margin-top: var(--space-2); }
.stack-lg > * + *{ margin-top: var(--space-6); }
.stack-xl > * + *{ margin-top: var(--space-8); }

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


/* ============================================================
   6. BUTTONS
   ------------------------------------------------------------
   7 variants × 5 sizes × states. Micro-interactions built-in.
   ============================================================ */
.btn{
  --btn-h: 42px;
  --btn-px: 20px;
  --btn-fs: 14px;
  --btn-radius: var(--radius-sm);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--btn-h);
  padding: 0 var(--btn-px);
  border-radius: var(--btn-radius);
  font-weight: var(--weight-semi);
  font-size: var(--btn-fs);
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background var(--dur-base) var(--ease),
    color var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease),
    transform var(--dur-fast) var(--ease);
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  font-family: var(--font-body);
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn:disabled,
.btn[aria-disabled="true"]{
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}
.btn:focus-visible{
  outline: none;
  box-shadow: var(--ring-focus);
}

/* Shine sweep on hover (subtle premium detail) */
.btn::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.22) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform var(--dur-slower) var(--ease);
  pointer-events: none;
  z-index: 1;
}
.btn:hover::before{ transform: translateX(100%); }
.btn > *{ position: relative; z-index: 2; }

/* -------- Variants -------- */
.btn-primary{
  background: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-sm), var(--shadow-brand);
}
.btn-primary:hover{
  background: var(--primary-dark);
  color: #fff;
  box-shadow: var(--shadow-md), 0 16px 40px -12px rgba(11, 93, 75, 0.4);
}

.btn-gradient{
  background: var(--grad-brand);
  color: #fff;
  box-shadow: var(--shadow-sm), var(--shadow-brand);
}
.btn-gradient:hover{
  color: #fff;
  filter: brightness(1.05);
  box-shadow: var(--shadow-md), 0 18px 42px -12px rgba(22, 160, 133, 0.4);
}

.btn-outline{
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-outline:hover{
  border-color: var(--primary);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 4%, var(--surface));
}

.btn-ghost{
  background: transparent;
  color: var(--primary);
  padding: 0 12px;
}
.btn-ghost:hover{
  color: var(--primary-dark);
  background: var(--accent-soft);
}

.btn-dark{
  background: var(--secondary);
  color: #fff;
}
.btn-dark:hover{
  background: var(--secondary-dark);
  color: #fff;
}

.btn-light{
  background: #fff;
  color: var(--secondary);
  border-color: rgba(255,255,255,0.6);
}
.btn-light:hover{
  background: var(--tint-bg);
  color: var(--secondary);
}

.btn-danger{
  background: var(--danger);
  color: #fff;
}
.btn-danger:hover{
  background: color-mix(in srgb, var(--danger) 85%, black);
  color: #fff;
}

/* -------- Sizes -------- */
.btn-xs{ --btn-h: 30px; --btn-px: 12px; --btn-fs: 12px; }
.btn-sm{ --btn-h: 36px; --btn-px: 14px; --btn-fs: 13px; }
.btn-lg{ --btn-h: 50px; --btn-px: 26px; --btn-fs: 15px; }
.btn-xl{ --btn-h: 58px; --btn-px: 32px; --btn-fs: 16px; }

/* -------- Modifiers -------- */
.btn-block{ display: flex; width: 100%; }
.btn-pill{ --btn-radius: var(--radius-full); }
.btn-square{ padding: 0; width: var(--btn-h); }

/* Icon-only round button */
.icon-btn{
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  display: grid;
  place-items: center;
  color: var(--text);
  transition: border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast), background var(--dur-fast);
  cursor: pointer;
}
.icon-btn:hover{
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}
.icon-btn:active{ transform: translateY(0); }
.icon-btn svg{ width: 18px; height: 18px; }

.icon-btn-round{ border-radius: var(--radius-full); }

/* Loading state */
.btn.is-loading{
  color: transparent !important;
  pointer-events: none;
}
.btn.is-loading::after{
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  color: #fff;
}
.btn-outline.is-loading::after,
.btn-ghost.is-loading::after{
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 25%, transparent);
  border-top-color: var(--primary);
}


/* ============================================================
   7. FORMS & INPUTS
   ============================================================ */
.field{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-4);
}
.field-label{
  font-size: 13px;
  font-weight: var(--weight-semi);
  color: var(--text);
}
.field-hint{
  font-size: 12px;
  color: var(--text-light);
}
.field-error{
  font-size: 12px;
  color: var(--danger);
  font-weight: var(--weight-semi);
}

.input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
textarea,
select{
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 15px; /* prevent iOS zoom */
  line-height: 1.4;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
  appearance: none;
  -webkit-appearance: none;
}
textarea{
  height: auto;
  min-height: 120px;
  padding: 12px 14px;
}
.input:hover,
input:hover,
textarea:hover,
select:hover{ border-color: var(--border-stronger); }

.input:focus,
input:focus,
textarea:focus,
select:focus{
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring-focus);
  background: var(--surface);
}

.input::placeholder,
input::placeholder,
textarea::placeholder{ color: var(--text-muted); }

.input:disabled,
input:disabled,
textarea:disabled,
select:disabled{
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--tint-bg);
}

/* Float label */
.float-field{
  position: relative;
}
.float-field .input{
  height: 56px;
  padding: 22px 14px 8px;
}
.float-field .float-label{
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 15px;
  pointer-events: none;
  transition: all var(--dur-fast) var(--ease);
  background: transparent;
  padding: 0;
}
.float-field .input:focus + .float-label,
.float-field .input:not(:placeholder-shown) + .float-label{
  top: 12px;
  transform: translateY(0);
  font-size: 11px;
  color: var(--primary);
  font-weight: var(--weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Custom checkbox / radio */
input[type="checkbox"],
input[type="radio"]{
  width: 18px; height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
}

/* Search input */
.search-input{
  position: relative;
}
.search-input .input{ padding-left: 40px; }
.search-input svg{
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--text-muted);
  pointer-events: none;
}

/* Select custom arrow */
select{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235F6B76' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}


/* ============================================================
   8. CHIPS, BADGES, TAGS
   ============================================================ */
.chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  color: var(--primary);
  font-size: 11.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 14px;
  border: 1px solid transparent;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.chip:hover{
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border-color: color-mix(in srgb, var(--primary) 20%, transparent);
}

.chip-outline{
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-light);
}
.chip-outline:hover{
  border-color: var(--primary);
  color: var(--primary);
  background: var(--accent-soft);
}

.chip-dark{
  background: var(--secondary);
  color: #fff;
}

.chip-warning{
  background: var(--warning-bg);
  color: var(--warning-text);
  border-color: var(--warning-border);
}

.chip-success{
  background: var(--success-soft);
  color: color-mix(in srgb, var(--success) 80%, black);
}

.chip-danger{
  background: var(--danger-soft);
  color: color-mix(in srgb, var(--danger) 75%, black);
}

/* Live chip with dot */
.chip-live{
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
}
.chip-live::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--danger);
  animation: pulseDot 1.6s var(--ease) infinite;
}

/* Rank badge */
.rank-badge{
  position: absolute;
  top: 16px; left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: var(--grad-brand);
  color: #fff;
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: var(--shadow-md);
  z-index: 2;
}
.rank-badge.gold{
  background: linear-gradient(135deg, #F5B301 0%, #E39100 100%);
  color: #3A2A00;
}
.rank-badge.silver{
  background: linear-gradient(135deg, #C0C6CE 0%, #8E96A0 100%);
  color: #1E252E;
}
.rank-badge.bronze{
  background: linear-gradient(135deg, #CD8E5C 0%, #A8683B 100%);
  color: #fff;
}


/* ============================================================
   9. CARDS (BASE)
   ------------------------------------------------------------
   Base card + glass + elevated + gradient-border variants.
   ============================================================ */
.card{
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    transform var(--dur-slow) var(--ease),
    box-shadow var(--dur-slow) var(--ease),
    border-color var(--dur-slow) var(--ease);
  isolation: isolate;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
}

.card-thumb{
  aspect-ratio: 16 / 10;
  background: var(--light-bg);
  overflow: hidden;
  position: relative;
}
.card-thumb::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(16, 42, 67, 0.15));
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
  pointer-events: none;
}
.card:hover .card-thumb::after{ opacity: 1; }
.card-thumb img,
.card-thumb svg{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slower) var(--ease);
}
.card:hover .card-thumb img{ transform: scale(1.06); }

.card-body{
  padding: var(--space-6) var(--space-7) var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.card-title{
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 1.35rem;
  line-height: 1.25;
  letter-spacing: var(--tracking-snug);
  margin: 0;
  color: var(--text-strong);
  transition: color var(--dur-fast);
  text-wrap: balance;
}
.card:hover .card-title{ color: var(--primary); }

.card-excerpt{
  color: var(--text-light);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  overflow: hidden;
}

.card-meta{
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-light);
  font-size: 13px;
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
}
.card-meta .avatar{
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--tint-bg);
  object-fit: cover;
  border: 1.5px solid var(--surface);
  box-shadow: var(--shadow-xs);
}
.card-meta .dot{
  width: 3px; height: 3px;
  background: var(--border-strong);
  border-radius: 50%;
}

/* -------- Card variants -------- */
.card-elevated{
  border: none;
  box-shadow: var(--shadow-md);
}
.card-elevated:hover{
  box-shadow: var(--shadow-xl);
}

.card-glass{
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.card-gradient-border{
  border: none;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--grad-brand) border-box;
  border: 1px solid transparent;
}

.card-mini{
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast), transform var(--dur-fast);
}
.card-mini:hover{
  border-color: var(--primary);
  transform: translateY(-2px);
}
.card-mini .card-thumb{
  flex: 0 0 96px;
  width: 96px; height: 72px;
  border-radius: var(--radius-sm);
  aspect-ratio: unset;
}
.card-mini .card-title{
  font-size: 15px;
  line-height: 1.35;
  margin: 0 0 6px;
}
.card-mini .card-meta{
  border-top: none;
  padding-top: 0;
  font-size: 12px;
}

.card-row{
  display: flex;
  gap: var(--space-6);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--dur-base), border-color var(--dur-base);
}
.card-row:hover{
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.card-row .card-thumb{
  flex: 0 0 220px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
}
.card-row .card-body{ padding: 0; flex: 1; }


/* Placeholder thumbnail */
.placeholder-thumb{
  width: 100%; height: 100%;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, transparent), color-mix(in srgb, var(--accent) 12%, transparent)),
    var(--light-bg);
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--primary) 60%, transparent);
}

/* Skeleton loading shimmer */
.card.is-loading .card-thumb,
.card.is-loading .card-title,
.card.is-loading .card-excerpt,
.skeleton{
  position: relative;
  overflow: hidden;
  color: transparent !important;
  background: var(--tint-bg);
  border-radius: 6px;
}
.card.is-loading .card-thumb::before,
.card.is-loading .card-title::before,
.card.is-loading .card-excerpt::before,
.skeleton::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: shimmer 1.4s linear infinite;
}


/* ============================================================
   10. GRIDS
   ============================================================ */
.grid-2{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.grid-3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-4{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.grid-auto{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}

/* Featured editorial grid: 1 large + 4 small */
.grid-featured{
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--space-6);
}
.grid-featured .card:nth-child(1){
  grid-row: 1 / span 2;
}
.grid-featured .card:nth-child(1) .card-thumb{
  aspect-ratio: 16 / 12;
}
.grid-featured .card:nth-child(1) .card-title{
  font-size: clamp(1.4rem, 2.2vw, 2rem);
}

/* Category grid */
.grid-cat{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-6);
}
.grid-cat-list{
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.grid-side{
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-8);
}

/* Products / tools / topics / edu grids */
.grid-topics,
.grid-products,
.grid-tools,
.grid-edu{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
}


/* ============================================================
   11. TOPIC / PRODUCT / TOOL / EDU CARDS
   ============================================================ */
.topic-card{
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  transition:
    transform var(--dur-slow) var(--ease),
    box-shadow var(--dur-slow) var(--ease),
    border-color var(--dur-slow) var(--ease);
  overflow: hidden;
  isolation: isolate;
}
.topic-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-brand-soft);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
  z-index: -1;
}
.topic-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
}
.topic-card:hover::before{ opacity: 0.5; }

.topic-icon{
  width: 56px; height: 56px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
  margin-bottom: var(--space-4);
  transition: transform var(--dur-base) var(--ease);
}
.topic-icon svg{ width: 26px; height: 26px; }
.topic-card:hover .topic-icon{
  transform: rotate(-6deg) scale(1.08);
}

.topic-card h3{
  font-size: 1.15rem;
  margin: 0 0 8px;
}
.topic-card p{
  color: var(--text-light);
  font-size: 14.5px;
  margin: 0;
  line-height: 1.55;
}
.topic-card .link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-4);
  color: var(--primary);
  font-weight: var(--weight-semi);
  font-size: 14px;
  transition: gap var(--dur-fast);
}
.topic-card .link::after{
  content: "→";
  transition: transform var(--dur-fast) var(--ease);
}
.topic-card:hover .link{ gap: 10px; }
.topic-card:hover .link::after{ transform: translateX(3px); }

/* Product card */
.product-card{
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease), border-color var(--dur-slow);
}
.product-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
}
.product-icon{
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--grad-brand-soft);
  display: grid;
  place-items: center;
  padding: var(--space-6);
}
.product-icon img{
  max-height: 80px;
  width: auto;
  object-fit: contain;
}
.product-card .card-body{ padding: var(--space-5) var(--space-6) var(--space-6); }
.product-card h3{
  font-size: 1.1rem;
  margin: 0 0 8px;
}
.product-card .rating{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--text-light);
}
.product-card .stars{
  --star-fill: var(--warning);
  display: inline-flex;
  gap: 2px;
  color: var(--star-fill);
  font-size: 14px;
}
.product-card p{
  color: var(--text-light);
  font-size: 14px;
  margin: 0 0 var(--space-4);
}
.product-card .card-cta{
  display: flex;
  gap: var(--space-2);
  margin-top: auto;
}

/* Tool card */
.tool-card{
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5) var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform var(--dur-base) var(--ease), border-color var(--dur-base);
}
.tool-card:hover{
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}
.tool-icon{
  flex: 0 0 48px;
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
}
.tool-icon svg{ width: 22px; height: 22px; }
.tool-card h4{ margin: 0 0 4px; font-size: 1rem; }
.tool-card p{ margin: 0; font-size: 13.5px; color: var(--text-light); }

/* Educational card */
.edu-card{
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  overflow: hidden;
  transition: transform var(--dur-slow), box-shadow var(--dur-slow), border-color var(--dur-slow);
}
.edu-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
}
.edu-card::after{
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%);
  border-radius: 50%;
  transition: transform var(--dur-slow) var(--ease);
}
.edu-card:hover::after{ transform: scale(1.3); }
.edu-icon{
  width: 52px; height: 52px;
  border-radius: var(--radius);
  background: var(--grad-brand);
  color: #fff;
  display: grid;
  place-items: center;
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-brand);
}
.edu-icon svg{ width: 24px; height: 24px; }
.edu-card h3{ font-size: 1.1rem; margin: 0 0 8px; }
.edu-card p{ color: var(--text-light); font-size: 14px; margin: 0; }
.edu-card .meta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-4);
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: var(--weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


/* ============================================================
   12. HERO
   ------------------------------------------------------------
   Editorial hero with aurora glow, ticker, and dual-panel.
   ============================================================ */
.hero{
  position: relative;
  padding: clamp(64px, 10vw, 128px) 0 clamp(56px, 8vw, 96px);
  overflow: hidden;
  isolation: isolate;
  background: var(--surface);
}

.hero::before{
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 120%;
  background: var(--grad-aurora);
  filter: blur(60px);
  opacity: 0.55;
  z-index: -2;
  animation: auroraShift 22s ease-in-out infinite alternate;
}
.hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 0%, transparent 40%, var(--background) 80%),
    linear-gradient(180deg, transparent 60%, var(--background));
  z-index: -1;
}

.hero-grid{
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.hero h1{
  font-size: var(--fs-6xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  line-height: 1.05;
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}
.hero h1 .accent{
  color: var(--primary);
  position: relative;
}
.hero h1 .accent::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.08em;
  height: 0.14em;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 2px;
  z-index: -1;
}

.hero p.lead{
  font-size: clamp(1.05rem, 1vw + 0.7rem, 1.25rem);
  color: var(--text-light);
  max-width: 560px;
  margin: 0 0 var(--space-7);
  line-height: 1.55;
}

.hero-meta{
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.hero-meta .badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--accent-soft);
  color: var(--primary);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-ctas{
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.hero-visual{
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-2xl);
  transform: perspective(1200px) rotateY(-4deg) rotateX(2deg);
  transition: transform var(--dur-slower) var(--ease);
}
.hero-visual:hover{ transform: perspective(1200px) rotateY(-2deg) rotateX(0); }
.hero-visual img,
.hero-visual svg{
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-visual::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(16,42,67,0.25));
  pointer-events: none;
}

/* Hero ticker (financial data marquee) */
.hero-ticker{
  margin-top: var(--space-8);
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  backdrop-filter: var(--glass-blur);
  overflow: hidden;
  position: relative;
}
.hero-ticker::before,
.hero-ticker::after{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.hero-ticker::before{
  left: 0;
  background: linear-gradient(90deg, var(--background), transparent);
}
.hero-ticker::after{
  right: 0;
  background: linear-gradient(-90deg, var(--background), transparent);
}
.ticker-track{
  display: flex;
  gap: 48px;
  animation: tickerScroll 45s linear infinite;
  width: max-content;
}
.ticker-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--weight-semi);
  color: var(--text);
  white-space: nowrap;
}
.ticker-item .sym{ color: var(--text-strong); }
.ticker-item .val{ color: var(--text); }
.ticker-item .delta{
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: var(--weight-bold);
}
.ticker-item .delta.up{
  background: var(--success-soft);
  color: color-mix(in srgb, var(--success) 80%, black);
}
.ticker-item .delta.down{
  background: var(--danger-soft);
  color: color-mix(in srgb, var(--danger) 75%, black);
}


/* ============================================================
   13. NEWSLETTER
   ============================================================ */
.newsletter{
  position: relative;
  padding: clamp(56px, 8vw, 96px) 0;
  background: var(--grad-dark);
  color: var(--text-invert);
  overflow: hidden;
  isolation: isolate;
}
.newsletter::before{
  content: "";
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(600px 400px at 20% 30%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 60%),
    radial-gradient(500px 300px at 80% 70%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 60%);
  filter: blur(40px);
  z-index: -1;
  animation: auroraShift 25s ease-in-out infinite alternate;
}
.newsletter::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 0);
  background-size: 24px 24px;
  z-index: -1;
  opacity: 0.5;
}

.newsletter .container{
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.newsletter h2{
  color: #fff;
  font-size: var(--fs-4xl);
  margin: 0 0 var(--space-4);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.newsletter p{
  color: rgba(255,255,255,0.82);
  font-size: var(--fs-md);
  margin: 0 0 var(--space-6);
  max-width: 500px;
}

.newsletter form{
  display: flex;
  gap: 10px;
  max-width: 500px;
  padding: 6px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-full);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.newsletter input[type="email"]{
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  padding: 0 20px;
  height: 46px;
  font-size: 15px;
  min-width: 0;
}
.newsletter input[type="email"]::placeholder{ color: rgba(255,255,255,0.55); }
.newsletter input[type="email"]:focus{
  outline: none;
  box-shadow: none;
}
.newsletter button{
  background: #fff;
  color: var(--secondary);
  padding: 0 24px;
  height: 46px;
  border-radius: var(--radius-full);
  font-weight: var(--weight-bold);
  font-size: 14px;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
  white-space: nowrap;
}
.newsletter button:hover{
  background: var(--accent);
  color: #fff;
  transform: translateY(-1px);
}

.newsletter .newsletter-perks{
  display: flex;
  gap: var(--space-5);
  margin-top: var(--space-5);
  flex-wrap: wrap;
  color: rgba(255,255,255,0.7);
  font-size: 13px;
}
.newsletter .newsletter-perks span{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.newsletter .newsletter-perks svg{
  width: 16px; height: 16px;
  color: var(--accent-light);
}

.newsletter-visual{
  position: relative;
  aspect-ratio: 1;
  max-width: 380px;
  margin-left: auto;
  border-radius: var(--radius-2xl);
  background: rgba(255,255,255,0.06);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,255,255,0.12);
  overflow: hidden;
  padding: var(--space-6);
  box-shadow: var(--shadow-2xl);
}


/* ============================================================
   14. BREADCRUMBS
   ============================================================ */
.crumbs{
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  font-size: 13px;
  color: var(--text-light);
  flex-wrap: wrap;
}
.crumbs a{
  color: var(--text-light);
  transition: color var(--dur-fast);
}
.crumbs a:hover{ color: var(--primary); }
.crumbs .sep{
  color: var(--text-muted);
  opacity: 0.7;
}
.crumbs .current{
  color: var(--text);
  font-weight: var(--weight-semi);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ============================================================
   15. ARCHIVE / CATEGORY HERO
   ============================================================ */
.archive-hero{
  position: relative;
  padding: clamp(56px, 8vw, 96px) 0 clamp(32px, 4vw, 48px);
  background:
    linear-gradient(180deg, var(--accent-softer), transparent),
    var(--surface);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  isolation: isolate;
}
.archive-hero::before{
  content: "";
  position: absolute;
  top: -100px; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%);
  border-radius: 50%;
  z-index: -1;
}
.archive-hero h1{
  font-size: var(--fs-5xl);
  margin: 0 0 var(--space-3);
}
.archive-hero p{
  color: var(--text-light);
  max-width: 640px;
  font-size: var(--fs-md);
  margin: 0;
}
.archive-hero .meta{
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-5);
  color: var(--text-light);
  font-size: 13px;
  flex-wrap: wrap;
}
.archive-hero .meta span{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}


/* ============================================================
   16. TWO-COLUMN LAYOUT (archive + single)
   ============================================================ */
.layout-2col{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-10);
  padding: var(--space-10) 0;
  align-items: start;
}

.layout-2col .main{
  min-width: 0;
}

.sidebar{
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  position: sticky;
  top: calc(var(--header-h) + 16px);
}

.side-box{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-xs);
}
.side-box h3{
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-light);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.side-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.side-list li{ margin: 0; }
.side-list a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  font-weight: var(--weight-medium);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.side-list a:hover,
.side-list a.active{
  background: var(--accent-soft);
  color: var(--primary);
}
.side-list a .count{
  font-size: 12px;
  color: var(--text-light);
  background: var(--tint-bg);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: var(--weight-semi);
}

/* Sidebar mini articles */
.side-box .card-mini{
  padding: var(--space-2) 0;
  border: none;
  background: transparent;
  border-bottom: 1px solid var(--border-soft);
  border-radius: 0;
}
.side-box .card-mini:last-child{ border-bottom: none; }
.side-box .card-mini:hover{ transform: none; border-color: transparent; }
.side-box .card-mini .card-thumb{
  flex: 0 0 72px;
  width: 72px; height: 56px;
}

/* Sticky helper */
.sticky{
  position: sticky;
  top: calc(var(--header-h) + 16px);
}


/* ============================================================
   17. PAGINATION
   ============================================================ */
.fn-pagination,
.pagination{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-9) 0;
  flex-wrap: wrap;
}
.fn-pagination a,
.fn-pagination span,
.pagination a,
.pagination span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: var(--weight-semi);
  transition: all var(--dur-fast);
}
.fn-pagination a:hover,
.pagination a:hover{
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.fn-pagination .current,
.pagination .current{
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: var(--shadow-brand);
}
.fn-pagination .dots,
.pagination .dots{
  border: none;
  background: none;
  color: var(--text-muted);
}
.fn-pagination .prev,
.fn-pagination .next,
.pagination .prev,
.pagination .next{
  gap: 6px;
}


/* ============================================================
   18. SINGLE POST
   ------------------------------------------------------------
   Article page: hero, prose, TOC, share rail, callouts.
   ============================================================ */

/* Reading progress bar */
.reading-progress{
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--grad-brand);
  z-index: var(--z-header);
  transition: width 60ms linear;
  border-radius: 0 3px 3px 0;
}

.article-hero{
  padding: clamp(56px, 8vw, 96px) 0 var(--space-8);
  background:
    radial-gradient(600px 300px at 50% -20%, var(--accent-softer), transparent 70%),
    var(--surface);
  border-bottom: 1px solid var(--border);
}

.article-header{
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.article-header .chip{ margin-bottom: var(--space-4); }
.article-header h1{
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
.article-header .lede{
  font-size: clamp(1.1rem, 1.4vw, 1.35rem);
  color: var(--text-light);
  line-height: 1.5;
  margin: 0 0 var(--space-6);
  text-wrap: pretty;
}

.article-meta{
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 14px;
  color: var(--text-light);
  box-shadow: var(--shadow-xs);
  flex-wrap: wrap;
}
.article-meta .avatar{
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.article-meta .author{
  color: var(--text);
  font-weight: var(--weight-semi);
}
.article-meta .dot{
  width: 3px; height: 3px;
  background: var(--border-strong);
  border-radius: 50%;
}
.article-meta .read-time{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Cover image */
.article-cover{
  max-width: 1080px;
  margin: var(--space-8) auto 0;
  padding: 0 var(--gutter);
}
.article-cover img,
.article-cover figure{
  width: 100%;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Article wrapper: prose + TOC + share rail */
.article-wrap{
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) 260px;
  gap: var(--space-8);
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-10) var(--gutter);
  align-items: start;
}

/* Share rail (left) */
.share-side{
  position: sticky;
  top: calc(var(--header-h) + 32px);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
}
.share-side .icon-btn{
  width: 44px; height: 44px;
  border-radius: 50%;
}
.share-side .label{
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-top: var(--space-3);
}

/* Prose */
.prose{
  font-size: 17px;
  line-height: 1.75;
  color: var(--text);
  max-width: 720px;
}
.prose > * + *{ margin-top: 1em; }
.prose h2{
  font-size: 1.7rem;
  margin-top: 2em;
  margin-bottom: 0.5em;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.prose h3{
  font-size: 1.3rem;
  margin-top: 1.7em;
  margin-bottom: 0.4em;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.prose h4{
  font-size: 1.1rem;
  margin-top: 1.4em;
  margin-bottom: 0.3em;
}
.prose p{ margin: 0 0 1.1em; }
.prose a{
  color: var(--primary);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--primary) 40%, transparent);
  transition: text-decoration-color var(--dur-fast);
}
.prose a:hover{
  text-decoration-color: var(--primary);
}
.prose ul, .prose ol{ padding-left: 1.4em; margin: 0 0 1.2em; }
.prose li{ margin-bottom: 0.5em; }
.prose img,
.prose figure{
  margin: 2em 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.prose blockquote{
  font-family: var(--font-serif);
  font-size: 1.2em;
  line-height: 1.5;
}
.prose > p:first-of-type::first-letter{
  float: left;
  font-family: var(--font-heading);
  font-weight: var(--weight-black);
  font-size: 4em;
  line-height: 0.9;
  padding: 8px 12px 0 0;
  color: var(--primary);
}
.prose table{
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
  font-size: 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.prose th, .prose td{
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.prose th{
  background: var(--tint-bg);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.prose tr:last-child td{ border-bottom: none; }
.prose tr:hover td{ background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }

/* Callouts */
.callout{
  padding: var(--space-5) var(--space-6);
  border-left: 4px solid var(--primary);
  background: var(--accent-softer);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: var(--space-6) 0;
  color: var(--text);
}
.callout p:last-child{ margin-bottom: 0; }
.callout .callout-title{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--weight-bold);
  color: var(--primary);
  margin-bottom: 6px;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.callout.warning{
  border-left-color: var(--warning);
  background: var(--warning-bg);
  color: var(--warning-text);
}
.callout.warning .callout-title{ color: var(--warning-text); }
.callout.danger{
  border-left-color: var(--danger);
  background: var(--danger-soft);
}
.callout.danger .callout-title{ color: var(--danger); }
.callout.info{
  border-left-color: var(--info);
  background: var(--info-soft);
}
.callout.info .callout-title{ color: var(--info); }

/* Disclosure banner */
.disclosure{
  padding: var(--space-4) var(--space-5);
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  color: var(--warning-text);
  border-radius: var(--radius);
  font-size: 13.5px;
  margin: var(--space-6) 0;
}
.disclosure strong{ color: var(--warning-text); }

/* Methodology block */
.methodology{
  padding: var(--space-6);
  background: var(--tint-bg);
  border-radius: var(--radius-lg);
  margin: var(--space-8) 0;
  border: 1px solid var(--border);
}
.methodology h3{
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--primary);
  margin: 0 0 var(--space-3);
}

/* Tags */
.tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: var(--space-6) 0;
}
.tags a{
  display: inline-block;
  padding: 5px 12px;
  background: var(--tint-bg);
  color: var(--text);
  font-size: 13px;
  border-radius: var(--radius-full);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.tags a:hover{
  background: var(--primary);
  color: #fff;
}

/* Sticky TOC */
.toc-sticky{
  position: sticky;
  top: calc(var(--header-h) + 32px);
  max-height: calc(100vh - var(--header-h) - 60px);
  overflow-y: auto;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  scrollbar-width: thin;
}
.toc-sticky h4{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-light);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.toc-sticky ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
.toc-sticky li{ margin: 0; }
.toc-sticky a{
  display: block;
  padding: 6px 10px;
  border-left: 2px solid transparent;
  font-size: 13.5px;
  color: var(--text-light);
  line-height: 1.4;
  transition: all var(--dur-fast);
}
.toc-sticky a:hover{ color: var(--primary); }
.toc-sticky a.active,
.toc-sticky a[aria-current="location"]{
  border-left-color: var(--primary);
  color: var(--primary);
  background: var(--accent-softer);
  font-weight: var(--weight-semi);
}
.toc-sticky ul ul{ padding-left: 12px; }
.toc-sticky ul ul a{ font-size: 12.5px; }

/* Author box */
.author-box{
  display: flex;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--tint-bg);
  border-radius: var(--radius-lg);
  margin: var(--space-8) 0;
  align-items: flex-start;
}
.author-box .avatar{
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--surface);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.author-box h4{
  margin: 0 0 4px;
  font-size: 1.1rem;
}
.author-box .role{
  font-size: 12.5px;
  color: var(--primary);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.author-box p{
  color: var(--text-light);
  font-size: 14.5px;
  margin: 0 0 var(--space-3);
  line-height: 1.5;
}
.author-box .socials{
  display: flex;
  gap: 8px;
}
.author-box .socials a{
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface);
  display: grid;
  place-items: center;
  color: var(--text);
  border: 1px solid var(--border);
  transition: all var(--dur-fast);
}
.author-box .socials a:hover{
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  transform: translateY(-2px);
}

/* Related articles */
.related-articles{
  padding: var(--space-10) 0;
  border-top: 1px solid var(--border);
  background: var(--light-bg);
}
.related-articles h3{
  font-size: var(--fs-2xl);
  margin: 0 0 var(--space-6);
  text-align: center;
}


/* ============================================================
   19. COMPARISON PAGE
   ------------------------------------------------------------
   Sticky header, rank ribbons, pros/cons, FAQ.
   ============================================================ */
.compare-hero{
  padding: clamp(48px, 6vw, 80px) 0 var(--space-6);
  background:
    radial-gradient(500px 300px at 80% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%),
    var(--surface);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.compare-hero .chip{ margin-bottom: var(--space-4); }
.compare-hero h1{
  font-size: var(--fs-4xl);
  margin: 0 0 var(--space-3);
  max-width: 900px;
  margin-inline: auto;
  text-wrap: balance;
}
.compare-hero p{
  color: var(--text-light);
  font-size: var(--fs-md);
  max-width: 720px;
  margin: 0 auto var(--space-5);
}
.compare-hero .meta{
  display: flex;
  justify-content: center;
  gap: var(--space-5);
  color: var(--text-light);
  font-size: 13px;
  flex-wrap: wrap;
}

.compare-list{
  padding: var(--space-8) 0 var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.compare-card{
  position: relative;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 220px;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-7);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base);
  overflow: hidden;
}
.compare-card:hover{
  border-color: var(--primary);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.compare-card[data-rank="1"]{
  border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
  box-shadow: var(--shadow-md), 0 0 0 1px color-mix(in srgb, var(--warning) 20%, transparent);
}
.compare-card[data-rank="1"]::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(400px 200px at 0% 0%, color-mix(in srgb, var(--warning) 8%, transparent), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.compare-card > *{ position: relative; z-index: 1; }

.compare-logo{
  background: var(--tint-bg);
  border-radius: var(--radius);
  padding: var(--space-5);
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid var(--border);
}
.compare-logo img{
  max-width: 100%;
  max-height: 100px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.compare-side{
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.compare-side h3{
  font-size: 1.4rem;
  margin: 0 0 var(--space-2);
}
.compare-side .rating{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-3);
}
.compare-side .rating .stars{
  display: inline-flex;
  gap: 2px;
  color: var(--warning);
  font-size: 15px;
}
.compare-side .rating .score{
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  font-size: 15px;
}
.compare-side .rating .count{
  color: var(--text-muted);
  font-size: 13px;
}
.compare-side p{
  color: var(--text-light);
  font-size: 15px;
  margin: 0 0 var(--space-4);
  line-height: 1.55;
}

.proscons{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-3);
}
.proscons h5{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: 0 0 var(--space-2);
  color: var(--text-light);
}
.proscons .pros h5{ color: var(--success); }
.proscons .cons h5{ color: var(--danger); }
.proscons ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
.proscons li{
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.4;
}
.proscons .pros li::before{
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--success);
  font-weight: var(--weight-bold);
}
.proscons .cons li::before{
  content: "×";
  position: absolute;
  left: 0;
  color: var(--danger);
  font-weight: var(--weight-bold);
  font-size: 1.1em;
}

/* Right column: CTA + rank */
.compare-card .compare-cta{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-3);
  padding-left: var(--space-5);
  border-left: 1px solid var(--border);
}
.compare-card .compare-cta .rank{
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-2);
}
.compare-card .compare-cta .rank-num{
  display: block;
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: var(--weight-black);
  color: var(--primary);
  line-height: 1;
  margin-bottom: 4px;
}
.compare-card[data-rank="1"] .compare-cta .rank-num{
  background: linear-gradient(135deg, #F5B301, #E39100);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* FAQ (comparison page + others) */
.faq-section{
  padding: var(--space-10) 0;
  background: var(--light-bg);
  border-top: 1px solid var(--border);
}
.faq-section h2{
  text-align: center;
  margin-bottom: var(--space-8);
}
.faq-item{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
  overflow: hidden;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.faq-item:hover{
  border-color: var(--border-strong);
}
.faq-item[open]{
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.faq-question{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: color var(--dur-fast);
}
.faq-question::-webkit-details-marker{ display: none; }
.faq-question::marker{ display: none; }
.faq-item:hover .faq-question{ color: var(--primary); }

.faq-question .icon{
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
  transition: transform var(--dur-base) var(--ease), background var(--dur-fast);
  font-size: 20px;
  font-weight: var(--weight-bold);
}
.faq-item[open] .faq-question .icon{
  transform: rotate(45deg);
  background: var(--primary);
  color: #fff;
}

.faq-answer{
  overflow: hidden;
  transition: grid-template-rows var(--dur-slow) var(--ease);
}
.faq-answer-inner{
  padding: 0 var(--space-6) var(--space-5);
  color: var(--text-light);
  font-size: 15px;
  line-height: 1.7;
}
.faq-answer-inner p:last-child{ margin-bottom: 0; }
.faq-answer-inner ul, .faq-answer-inner ol{ margin-bottom: 0; }


/* ============================================================
   20. BLOG PAGE
   ============================================================ */
.fn-blog-page{
  padding: 0;
}

.blog-header{
  padding: clamp(56px, 8vw, 96px) 0 var(--space-8);
  background:
    radial-gradient(500px 250px at 20% 0%, var(--accent-softer), transparent 70%),
    var(--surface);
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.blog-header .chip{ margin-bottom: var(--space-4); }
.blog-header h1{
  font-size: var(--fs-5xl);
  margin: 0 0 var(--space-3);
}
.blog-header p{
  color: var(--text-light);
  font-size: var(--fs-md);
  max-width: 640px;
  margin: 0 auto;
}

.blog-filters{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
  position: sticky;
  top: var(--header-h);
  background: color-mix(in srgb, var(--background) 90%, transparent);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  z-index: var(--z-sticky);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}

.blog-filters .filters{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.blog-filters .filters::-webkit-scrollbar{ display: none; }
.blog-filters .filter-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13.5px;
  font-weight: var(--weight-semi);
  cursor: pointer;
  transition: all var(--dur-fast);
  white-space: nowrap;
}
.blog-filters .filter-chip:hover{
  border-color: var(--primary);
  color: var(--primary);
}
.blog-filters .filter-chip.active{
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.blog-filters .filter-chip .count{
  font-size: 11px;
  opacity: 0.75;
}

.blog-filters .sort{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-light);
}
.blog-filters .sort select{
  height: 36px;
  border-radius: var(--radius-sm);
  padding: 0 32px 0 12px;
  border: 1px solid var(--border);
  background-color: var(--surface);
  font-size: 13px;
  font-weight: var(--weight-semi);
  color: var(--text);
  cursor: pointer;
  min-width: 140px;
}


/* ============================================================
   24. UTILITIES
   ============================================================ */
/* Spacing */
.mt-0{ margin-top: 0 !important; }
.mt-1{ margin-top: var(--space-2) !important; }
.mt-2{ margin-top: var(--space-4) !important; }
.mt-3{ margin-top: var(--space-6) !important; }
.mt-4{ margin-top: var(--space-8) !important; }
.mt-5{ margin-top: var(--space-10) !important; }
.mb-0{ margin-bottom: 0 !important; }
.mb-1{ margin-bottom: var(--space-2) !important; }
.mb-2{ margin-bottom: var(--space-4) !important; }
.mb-3{ margin-bottom: var(--space-6) !important; }
.mb-4{ margin-bottom: var(--space-8) !important; }
.mb-5{ margin-bottom: var(--space-10) !important; }
.mx-auto{ margin-left: auto !important; margin-right: auto !important; }

.p-0{ padding: 0 !important; }
.p-1{ padding: var(--space-2) !important; }
.p-2{ padding: var(--space-4) !important; }
.p-3{ padding: var(--space-6) !important; }
.p-4{ padding: var(--space-8) !important; }

/* Text */
.text-center{ text-align: center; }
.text-left{ text-align: left; }
.text-right{ text-align: right; }
.text-primary{ color: var(--primary); }
.text-accent{ color: var(--accent); }
.text-muted{ color: var(--text-light); }
.text-invert{ color: var(--text-invert); }
.text-sm{ font-size: var(--fs-sm); }
.text-lg{ font-size: var(--fs-lg); }
.text-bold{ font-weight: var(--weight-bold); }
.text-semi{ font-weight: var(--weight-semi); }
.uppercase{ text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line-clamp-2{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}
.line-clamp-3{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  overflow: hidden;
}

/* Display */
.hide{ display: none !important; }
.block{ display: block; }
.inline-block{ display: inline-block; }
.flex{ display: flex; }
.inline-flex{ display: inline-flex; }
.grid{ display: grid; }
.items-center{ align-items: center; }
.items-start{ align-items: flex-start; }
.items-end{ align-items: flex-end; }
.justify-center{ justify-content: center; }
.justify-between{ justify-content: space-between; }
.justify-end{ justify-content: flex-end; }
.gap-2{ gap: var(--space-2); }
.gap-3{ gap: var(--space-3); }
.gap-4{ gap: var(--space-4); }
.gap-6{ gap: var(--space-6); }
.flex-wrap{ flex-wrap: wrap; }
.flex-col{ flex-direction: column; }
.flex-1{ flex: 1; }
.w-full{ width: 100%; }
.h-full{ height: 100%; }

.rounded{ border-radius: var(--radius); }
.rounded-lg{ border-radius: var(--radius-lg); }
.rounded-full{ border-radius: var(--radius-full); }

.shadow-sm{ box-shadow: var(--shadow-sm); }
.shadow-md{ box-shadow: var(--shadow-md); }
.shadow-lg{ box-shadow: var(--shadow-lg); }

.overflow-hidden{ overflow: hidden; }
.relative{ position: relative; }
.absolute{ position: absolute; }
.fixed{ position: fixed; }

.pointer-none{ pointer-events: none; }
.select-none{ user-select: none; }

.aspect-square{ aspect-ratio: 1; }
.aspect-video{ aspect-ratio: 16/9; }


/* ============================================================
   25. ANIMATIONS & KEYFRAMES
   ============================================================ */
@keyframes spin{
  to{ transform: rotate(360deg); }
}
@keyframes pulseDot{
  0%, 100%{
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent);
  }
  50%{
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 0%, transparent);
  }
}
@keyframes shimmer{
  from{ transform: translateX(-100%); }
  to{ transform: translateX(100%); }
}
@keyframes fadeIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}
@keyframes fadeInUp{
  from{ opacity: 0; transform: translateY(20px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown{
  from{ opacity: 0; transform: translateY(-20px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn{
  from{ opacity: 0; transform: scale(0.95); }
  to{ opacity: 1; transform: scale(1); }
}
@keyframes slideInLeft{
  from{ opacity: 0; transform: translateX(-30px); }
  to{ opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight{
  from{ opacity: 0; transform: translateX(30px); }
  to{ opacity: 1; transform: translateX(0); }
}
@keyframes tickerScroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@keyframes auroraShift{
  0%{ transform: rotate(0) scale(1); }
  50%{ transform: rotate(10deg) scale(1.05); }
  100%{ transform: rotate(-8deg) scale(1.02); }
}
@keyframes floaty{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}
@keyframes gradShift{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}
@keyframes megamenuIn{
  from{ opacity: 0; transform: translateY(-6px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes drawerIn{
  from{ transform: translateX(100%); }
  to{ transform: translateX(0); }
}
@keyframes bounceIn{
  0%{ opacity: 0; transform: scale(0.3); }
  50%{ transform: scale(1.05); }
  70%{ transform: scale(0.9); }
  100%{ opacity: 1; transform: scale(1); }
}

/* Utility animation classes */
.animate-fade{ animation: fadeIn var(--dur-slow) var(--ease) both; }
.animate-fade-up{ animation: fadeInUp var(--dur-slow) var(--ease) both; }
.animate-fade-down{ animation: fadeInDown var(--dur-slow) var(--ease) both; }
.animate-scale{ animation: scaleIn var(--dur-slow) var(--ease-spring) both; }
.animate-slide-l{ animation: slideInLeft var(--dur-slow) var(--ease) both; }
.animate-slide-r{ animation: slideInRight var(--dur-slow) var(--ease) both; }
.animate-float{ animation: floaty 3s var(--ease-in-out) infinite; }
.animate-delay-1{ animation-delay: 100ms; }
.animate-delay-2{ animation-delay: 200ms; }
.animate-delay-3{ animation-delay: 300ms; }
.animate-delay-4{ animation-delay: 400ms; }
.animate-delay-5{ animation-delay: 500ms; }


/* ============================================================
   26. HEADER / NAV / MEGA MENU
   ------------------------------------------------------------
   Sticky glass header with mega-menu, search drawer, mobile.
   ============================================================ */
.topbar{
  background: var(--secondary);
  color: rgba(255,255,255,0.82);
  font-size: 12.5px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.topbar .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.topbar a{
  color: rgba(255,255,255,0.82);
  transition: color var(--dur-fast);
}
.topbar a:hover{ color: #fff; }
.topbar .top-links{
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.topbar .top-meta{
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.site-header{
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--background) 84%, transparent);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--border-soft);
  transition: box-shadow var(--dur-base), background var(--dur-base), border-color var(--dur-base);
}
.site-header.is-scrolled{
  box-shadow: var(--shadow-md);
  background: color-mix(in srgb, var(--background) 94%, transparent);
  border-color: var(--border);
}

.header-inner{
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.site-logo{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: var(--weight-black);
  font-size: 20px;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  transition: opacity var(--dur-fast);
  flex-shrink: 0;
}
.site-logo:hover{ opacity: 0.85; color: var(--text-strong); }
.logo-mark{
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--grad-brand);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-brand);
  font-family: var(--font-heading);
  font-weight: var(--weight-black);
  font-size: 15px;
  position: relative;
  overflow: hidden;
}
.logo-mark::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform var(--dur-slower) var(--ease);
}
.site-logo:hover .logo-mark::after{ transform: translateX(100%); }
.logo-dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulseDot 2s var(--ease) infinite;
}

.primary-nav,
.site-nav{
  display: flex;
  align-items: center;
  gap: var(--space-1);
  height: 100%;
  flex: 1;
  justify-content: center;
}
.primary-nav > li,
.site-nav > li{
  list-style: none;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}
.primary-nav ul,
.site-nav ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

.primary-nav > li > a,
.site-nav > li > a,
.mm-trigger{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  height: 100%;
  font-size: 14.5px;
  font-weight: var(--weight-semi);
  color: var(--text);
  position: relative;
  transition: color var(--dur-fast);
}
.primary-nav > li > a::after,
.site-nav > li > a::after,
.mm-trigger::after{
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: -1px;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease);
  border-radius: 2px;
}
.primary-nav > li:hover > a::after,
.site-nav > li:hover > a::after,
.mm-trigger[aria-expanded="true"]::after,
.primary-nav > li.current-menu-item > a::after,
.site-nav > li.current-menu-item > a::after{
  transform: scaleX(1);
}
.primary-nav > li:hover > a,
.site-nav > li:hover > a,
.mm-trigger:hover{
  color: var(--primary);
}
.mm-trigger .chev{
  transition: transform var(--dur-fast) var(--ease);
}
.mm-trigger[aria-expanded="true"] .chev{ transform: rotate(180deg); }

.header-actions{
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}


/* -------- MEGA MENU -------- */
.megamenu{
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 720px;
  max-width: 960px;
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), visibility var(--dur-base);
  z-index: var(--z-dropdown);
  margin-top: 8px;
}
.primary-nav > li:hover > .megamenu,
.site-nav > li:hover > .megamenu,
.megamenu[data-open="true"]{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: megamenuIn var(--dur-base) var(--ease);
}

.megamenu-inner{
  display: grid;
  grid-template-columns: 1fr 1fr 280px;
  gap: var(--space-6);
}

.mm-title{
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  font-weight: var(--weight-bold);
  color: var(--text-light);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.mm-list{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mm-list a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  transition: background var(--dur-fast), color var(--dur-fast), padding var(--dur-fast);
}
.mm-list a:hover{
  background: var(--accent-soft);
  color: var(--primary);
  padding-left: 16px;
}
.mm-list a .mm-icon{
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--tint-bg);
  display: grid;
  place-items: center;
  color: var(--primary);
  flex-shrink: 0;
  transition: background var(--dur-fast);
}
.mm-list a:hover .mm-icon{
  background: var(--primary);
  color: #fff;
}
.mm-list a .mm-desc{
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.mm-list a:hover .mm-desc{ color: color-mix(in srgb, var(--primary) 65%, transparent); }

.mm-featured{
  background: var(--tint-bg);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: border-color var(--dur-fast), transform var(--dur-fast);
}
.mm-featured:hover{
  border-color: var(--primary);
  transform: translateY(-2px);
}
.mm-featured img{
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
}
.mm-featured .body{
  padding: var(--space-4);
}
.mm-featured .body .chip{ margin-bottom: 8px; }
.mm-featured h4{
  font-size: 14.5px;
  margin: 0 0 4px;
  line-height: 1.3;
}
.mm-featured p{
  font-size: 12.5px;
  color: var(--text-light);
  margin: 0;
}
.mm-star{
  color: var(--warning);
  font-size: 12px;
}


/* -------- SEARCH DRAWER -------- */
.search-drawer{
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5) 0;
  transform: translateY(-110%);
  transition: transform var(--dur-base) var(--ease);
  z-index: calc(var(--z-header) - 1);
}
.search-drawer[data-open="true"]{ transform: translateY(0); }
.search-drawer form{
  display: flex;
  gap: var(--space-3);
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.search-drawer input{
  flex: 1;
  height: 52px;
  font-size: 17px;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.search-drawer input:focus{
  border-color: var(--primary);
  box-shadow: var(--ring-focus);
}


/* -------- Hamburger -------- */
.hamburger{
  display: none;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
  flex-shrink: 0;
}
.hamburger:hover{
  border-color: var(--primary);
  background: var(--accent-soft);
}
.hamburger span{
  display: block;
  position: relative;
  width: 20px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease), background var(--dur-fast);
}
.hamburger span::before,
.hamburger span::after{
  content: "";
  position: absolute;
  left: 0;
  width: 20px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease), top var(--dur-base) var(--ease);
}
.hamburger span::before{ top: -6px; }
.hamburger span::after{ top: 6px; }
.hamburger[aria-expanded="true"] span{ background: transparent; }
.hamburger[aria-expanded="true"] span::before{
  top: 0;
  transform: rotate(45deg);
}
.hamburger[aria-expanded="true"] span::after{
  top: 0;
  transform: rotate(-45deg);
}


/* ============================================================
   27. MOBILE NAV DRAWER
   ============================================================ */
.mobile-nav{
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  height: 100dvh;
  width: min(420px, 100%);
  background: var(--surface);
  z-index: var(--z-drawer);
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: -20px 0 60px rgba(0,0,0,0.15);
}
.mobile-nav[data-open="true"]{
  transform: translateX(0);
}

/* Scrim */
.mobile-nav::before{
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  visibility: hidden;
  z-index: -1;
  transition: opacity var(--dur-base), visibility var(--dur-base);
}
.mobile-nav[data-open="true"]::before{
  opacity: 1;
  visibility: visible;
}

.mn-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}
.mn-header .site-logo{ font-size: 18px; }
.mn-header .close{
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.mn-header .close:hover{
  border-color: var(--danger);
  color: var(--danger);
}

.mn-search{
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.mn-search .search-input .input{
  height: 44px;
  border-radius: var(--radius);
  background: var(--tint-bg);
  border-color: transparent;
}
.mn-search .search-input .input:focus{
  background: var(--surface);
  border-color: var(--primary);
}

.mn-body{
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) var(--space-2);
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

.mn-accordion{
  border-bottom: 1px solid var(--border-soft);
}
.mn-accordion:last-child{ border-bottom: none; }

.mn-trigger{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
  font-size: 15px;
  font-weight: var(--weight-semi);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast);
}
.mn-trigger:hover{
  background: var(--tint-bg);
}
.mn-trigger .chev{
  transition: transform var(--dur-base) var(--ease);
  color: var(--text-muted);
}
.mn-trigger[aria-expanded="true"] .chev{
  transform: rotate(180deg);
  color: var(--primary);
}

.mn-panel{
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-base) var(--ease);
}
.mn-panel[data-open="true"]{
  max-height: 1200px;
}
.mn-panel-inner{
  padding: 4px var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mn-panel-inner a{
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.mn-panel-inner a:hover{
  background: var(--accent-soft);
  color: var(--primary);
}
.mn-panel-inner a .mm-icon{
  width: 24px; height: 24px;
  border-radius: 5px;
  background: var(--tint-bg);
  display: grid;
  place-items: center;
  color: var(--primary);
  flex-shrink: 0;
}

.mn-simple-link{
  display: block;
  padding: var(--space-4);
  font-size: 15px;
  font-weight: var(--weight-semi);
  color: var(--text);
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast);
}
.mn-simple-link:hover{
  background: var(--tint-bg);
  color: var(--primary);
}

.mn-featured-mobile{
  margin: var(--space-4);
  padding: var(--space-4);
  background: var(--grad-brand-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.mn-featured-mobile .chip{ margin-bottom: 8px; }
.mn-featured-mobile h4{
  font-size: 14.5px;
  margin: 0 0 4px;
}
.mn-featured-mobile p{
  font-size: 12.5px;
  color: var(--text-light);
  margin: 0;
}

.mn-cta{
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex-shrink: 0;
  padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
  background: var(--surface);
}


/* ============================================================
   28. FOOTER
   ============================================================ */
.site-footer{
  position: relative;
  background: var(--secondary);
  color: rgba(255,255,255,0.78);
  padding: var(--space-14) 0 var(--space-6);
  isolation: isolate;
  overflow: hidden;
}
.site-footer::before{
  content: "";
  position: absolute;
  top: -50%; left: -20%;
  width: 60%; height: 100%;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 22%, transparent), transparent 60%);
  filter: blur(60px);
  z-index: -1;
}
.site-footer::after{
  content: "";
  position: absolute;
  bottom: -30%; right: -10%;
  width: 40%; height: 60%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%);
  filter: blur(60px);
  z-index: -1;
}

.footer-grid{
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.site-footer .footer-brand h4{
  color: #fff;
  font-family: var(--font-heading);
  font-size: 22px;
  margin: 0 0 var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.site-footer .footer-brand p{
  color: rgba(255,255,255,0.68);
  font-size: 14px;
  max-width: 320px;
  margin: 0 0 var(--space-5);
  line-height: 1.6;
}

.footer-social{
  display: flex;
  gap: 8px;
}
.footer-social a{
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.85);
  transition: all var(--dur-fast);
}
.footer-social a:hover{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-3px) rotate(-4deg);
  box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--accent) 60%, transparent);
}
.footer-social svg{ width: 16px; height: 16px; }

.footer-col h5{
  color: #fff;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: 0 0 var(--space-4);
  font-weight: var(--weight-bold);
}
.footer-col ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col a{
  color: rgba(255,255,255,0.68);
  font-size: 14px;
  transition: color var(--dur-fast), padding-left var(--dur-fast);
  display: inline-block;
}
.footer-col a:hover{
  color: #fff;
  padding-left: 4px;
}

.footer-bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-6);
  gap: var(--space-4);
  flex-wrap: wrap;
  color: rgba(255,255,255,0.55);
  font-size: 12.5px;
}
.footer-legal{
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.footer-legal a{
  color: rgba(255,255,255,0.68);
  transition: color var(--dur-fast);
}
.footer-legal a:hover{ color: #fff; }
.footer-disclosure{
  color: rgba(255,255,255,0.5);
  font-size: 12px;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: var(--space-4);
  max-width: 100%;
  line-height: 1.6;
}

/* Back to top FAB */
.back-to-top{
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--grad-brand);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: var(--z-sticky);
  box-shadow: var(--shadow-lg), var(--shadow-brand);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all var(--dur-base) var(--ease);
  border: none;
}
.back-to-top.is-visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl), 0 20px 40px -10px color-mix(in srgb, var(--primary) 40%, transparent);
}
.back-to-top svg{ width: 20px; height: 20px; }


/* ============================================================
   29. WORDPRESS CORE CLASSES
   ============================================================ */
.aligncenter{
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.alignleft{ float: left; margin: 0 var(--space-5) var(--space-3) 0; }
.alignright{ float: right; margin: 0 0 var(--space-3) var(--space-5); }
.wp-caption{
  max-width: 100%;
  margin: var(--space-4) 0;
}
.wp-caption img{
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.wp-caption-text,
.gallery-caption{
  font-size: 13px;
  color: var(--text-light);
  text-align: center;
  margin-top: 8px;
  font-style: italic;
}
.bypostauthor{}

.wp-block-image{ margin: var(--space-6) 0; }
.wp-block-image img{ border-radius: var(--radius-lg); }
.wp-block-quote,
.wp-block-pullquote{
  margin: var(--space-6) 0;
  padding: var(--space-5) var(--space-6);
  border-left: 4px solid var(--primary);
  background: var(--accent-softer);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-serif);
  font-size: 1.15em;
  font-style: italic;
  color: var(--text);
}

.wp-block-button__link,
.wp-block-file__button{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  font-weight: var(--weight-semi);
  transition: background var(--dur-fast);
}
.wp-block-button__link:hover{
  background: var(--primary-dark);
  color: #fff;
}

.tools-wrap{
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
}


/* ============================================================
   30. RESPONSIVE — BASE  (>=1440px) large displays
   ============================================================ */
@media (min-width: 1440px){
  :root{
    --gutter: 40px;
  }
  .container{ max-width: 1360px; }
  .hero h1{ font-size: clamp(3rem, 4vw, 4.5rem); }
  .grid-3{ gap: var(--space-8); }
  .grid-4{ gap: var(--space-8); }
}


/* ============================================================
   31. RESPONSIVE — LAPTOP  (max 1240px)
   ============================================================ */
@media (max-width: 1240px){
  :root{
    --gutter: 28px;
  }
  .article-wrap{
    grid-template-columns: 48px minmax(0, 1fr) 220px;
    gap: var(--space-6);
  }
  .megamenu{
    min-width: 640px;
    max-width: 800px;
  }
  .megamenu-inner{
    grid-template-columns: 1fr 1fr 240px;
    gap: var(--space-4);
  }
  .compare-card{
    grid-template-columns: 180px minmax(0, 1fr) 200px;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-6);
  }
  .grid-featured{
    grid-template-columns: 1.4fr 1fr;
  }
  .hero-grid{
    gap: var(--space-8);
  }
  .layout-2col{
    gap: var(--space-8);
  }
}


/* ============================================================
   32. RESPONSIVE — TABLET-LG  (max 1024px)
   ============================================================ */
@media (max-width: 1024px){
  :root{
    --header-h: 64px;
  }

  /* Hide sticky share rail on tablet — move to inline share */
  .article-wrap{
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: var(--space-6);
  }
  .share-side{
    display: none;
  }

  .megamenu{
    min-width: 580px;
    max-width: 720px;
    padding: var(--space-5);
  }
  .megamenu-inner{
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }
  .megamenu-inner .mm-featured{
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 160px 1fr;
    align-items: center;
  }
  .megamenu-inner .mm-featured img{
    aspect-ratio: 1;
    height: 100%;
  }

  .hero-grid{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero p.lead{ margin-inline: auto; }
  .hero-ctas{ justify-content: center; }
  .hero-meta{ justify-content: center; }
  .hero-visual{
    max-width: 500px;
    margin: 0 auto;
    transform: none;
    order: -1;
  }
  .hero-visual:hover{ transform: none; }

  .newsletter .container{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .newsletter p{ margin-inline: auto; }
  .newsletter form{ margin-inline: auto; }
  .newsletter .newsletter-perks{ justify-content: center; }
  .newsletter-visual{
    margin: 0 auto;
    max-width: 320px;
  }

  .grid-featured{
    grid-template-columns: 1fr;
  }
  .grid-featured .card:nth-child(1){
    grid-row: auto;
  }

  .grid-cat{
    grid-template-columns: 1fr;
  }

  .layout-2col{
    grid-template-columns: 1fr;
  }
  .sidebar{
    position: static;
    order: 2;
  }

  .compare-card{
    grid-template-columns: 140px minmax(0, 1fr);
    gap: var(--space-5);
  }
  .compare-card .compare-cta{
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-left: none;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: var(--space-4);
    margin-top: var(--space-2);
  }
  .compare-card .compare-cta .rank{
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .compare-card .compare-cta .rank-num{
    font-size: 2rem;
  }
}


/* ============================================================
   33. RESPONSIVE — TABLET  (max 900px)
   ============================================================ */
@media (max-width: 900px){
  /* Show mobile nav trigger + hide desktop nav */
  .primary-nav,
  .site-nav{
    display: none;
  }
  .hamburger{
    display: inline-flex;
  }

  .topbar{
    font-size: 12px;
    padding: 6px 0;
  }
  .topbar .top-links{ gap: 12px; }

  .grid-3,
  .grid-4,
  .grid-topics,
  .grid-products,
  .grid-tools,
  .grid-edu{
    grid-template-columns: repeat(2, 1fr);
  }

  .article-wrap{
    grid-template-columns: 1fr;
    padding: var(--space-8) var(--gutter);
  }
  .toc-sticky{
    position: static;
    max-height: none;
    order: -1;
    margin-bottom: var(--space-5);
  }

  .prose{ font-size: 16px; }
  .prose h2{ font-size: 1.5rem; }
  .prose h3{ font-size: 1.2rem; }

  .card-row{
    flex-direction: column;
  }
  .card-row .card-thumb{
    flex: none;
    width: 100%;
    aspect-ratio: 16/10;
  }

  .footer-grid{
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
  .site-footer .footer-brand{
    grid-column: 1 / -1;
  }

  .article-header h1{
    font-size: clamp(1.75rem, 5vw, 2.5rem);
  }

  .archive-hero h1,
  .blog-header h1{
    font-size: var(--fs-4xl);
  }
}


/* ============================================================
   34. RESPONSIVE — TABLET-SM  (max 768px)
   ============================================================ */
@media (max-width: 768px){
  section{
    padding: clamp(40px, 8vw, 64px) 0;
  }

  .section-head{
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
  }

  .hero{
    padding: var(--space-10) 0 var(--space-8);
  }
  .hero h1{
    font-size: clamp(2rem, 7vw, 3rem);
  }
  .hero p.lead{ font-size: 16px; }
  .hero-ctas{
    flex-direction: column;
    align-items: stretch;
    max-width: 340px;
    margin: 0 auto;
  }
  .hero-ctas .btn{ width: 100%; }

  .newsletter form{
    flex-direction: column;
    border-radius: var(--radius-lg);
    padding: var(--space-3);
  }
  .newsletter input[type="email"]{
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.06);
    padding: 0 16px;
  }
  .newsletter button{
    border-radius: var(--radius-sm);
    width: 100%;
    height: 48px;
  }

  .compare-card{
    grid-template-columns: 1fr;
    text-align: left;
    padding: var(--space-5);
  }
  .compare-logo{
    max-width: 160px;
    aspect-ratio: 16/9;
  }

  .proscons{
    grid-template-columns: 1fr;
  }

  .article-cover{
    padding: 0;
  }
  .article-cover img,
  .article-cover figure{
    border-radius: 0;
    aspect-ratio: 4/3;
  }

  .author-box{
    flex-direction: column;
    text-align: center;
  }
  .author-box .avatar{
    margin: 0 auto;
  }
  .author-box .socials{
    justify-content: center;
  }

  .article-meta{
    padding: var(--space-3) var(--space-4);
    font-size: 13px;
    gap: 10px;
  }

  .blog-filters{
    top: var(--header-h);
    padding: var(--space-4) 0;
  }
  .blog-filters .sort{
    width: 100%;
  }
  .blog-filters .sort select{
    flex: 1;
  }

  .fn-pagination a,
  .fn-pagination span,
  .pagination a,
  .pagination span{
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    font-size: 13px;
  }
}


/* ============================================================
   35. RESPONSIVE — MOBILE  (max 600px)
   ============================================================ */
@media (max-width: 600px){
  :root{
    --gutter: 20px;
    --radius-lg: 12px;
    --radius-xl: 16px;
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .grid-topics,
  .grid-products,
  .grid-tools,
  .grid-edu{
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  h1{ font-size: clamp(1.9rem, 6vw, 2.4rem); }
  h2{ font-size: clamp(1.5rem, 4.5vw, 1.9rem); }
  h3{ font-size: 1.15rem; }

  .card-body{ padding: var(--space-5); }
  .card-title{ font-size: 1.2rem; }

  .archive-hero,
  .blog-header,
  .compare-hero{
    padding: var(--space-10) 0 var(--space-5);
  }

  .article-header h1{
    font-size: clamp(1.6rem, 6vw, 2.2rem);
  }
  .article-header .lede{
    font-size: 16px;
  }

  .prose > p:first-of-type::first-letter{
    font-size: 3.5em;
    padding: 6px 10px 0 0;
  }

  .footer-grid{
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .site-footer{
    padding: var(--space-10) 0 var(--space-5);
  }
  .footer-bottom{
    flex-direction: column;
    align-items: flex-start;
  }

  .topbar{ display: none; }

  .search-drawer input{
    font-size: 16px; /* prevent iOS zoom */
    height: 46px;
  }

  .back-to-top{
    width: 40px; height: 40px;
    right: 12px; bottom: 12px;
  }

  .crumbs{
    font-size: 12px;
    padding: var(--space-3) 0;
  }
  .crumbs .current{
    max-width: 140px;
  }

  .newsletter-visual{
    display: none;
  }

  .mobile-nav{
    width: 100%;
    max-width: 100%;
  }

  .article-meta{
    font-size: 12.5px;
    padding: 10px 14px;
  }
  .article-meta .avatar{
    width: 26px; height: 26px;
  }

  .btn{
    --btn-h: 44px;  /* Touch target min 44px */
    --btn-px: 18px;
  }
  .btn-sm{ --btn-h: 40px; }
  .icon-btn{ width: 44px; height: 44px; }

  .compare-side h3{ font-size: 1.2rem; }
  .compare-card .compare-cta .rank-num{ font-size: 1.75rem; }
}


/* ============================================================
   36. RESPONSIVE — MOBILE-SM  (max 420px)
   ============================================================ */
@media (max-width: 420px){
  :root{
    --gutter: 16px;
  }
  .hero h1{ font-size: 1.9rem; }
  .archive-hero h1,
  .blog-header h1{ font-size: 1.75rem; }
  .article-header h1{ font-size: 1.7rem; }

  .card-thumb{ aspect-ratio: 16/10; }
  .card-body{ padding: var(--space-4); gap: 8px; }
  .card-title{ font-size: 1.1rem; }
  .card-excerpt{ font-size: 14px; -webkit-line-clamp: 2; line-clamp: 2; }

  .chip{
    font-size: 10.5px;
    padding: 4px 10px;
  }

  .btn-lg{ --btn-h: 46px; --btn-px: 20px; --btn-fs: 14px; }

  .footer-social a{
    width: 34px; height: 34px;
  }

  .newsletter{
    padding: var(--space-8) 0;
  }
  .newsletter h2{ font-size: 1.6rem; }

  .compare-logo{ max-width: 120px; }
  .compare-card{ padding: var(--space-4); }
  .compare-card .compare-cta{
    flex-direction: column;
    gap: var(--space-2);
  }
  .compare-card .compare-cta .btn{
    width: 100%;
  }
}


/* ============================================================
   37. CONTAINER QUERIES
   ------------------------------------------------------------
   Component-scoped responsive rules (independent of viewport).
   ============================================================ */
.card,
.topic-card,
.product-card,
.edu-card{
  container-type: inline-size;
  container-name: card;
}

@container card (max-width: 320px){
  .card-body{
    padding: var(--space-4);
  }
  .card-title{ font-size: 1.05rem; }
  .card-excerpt{ font-size: 13.5px; -webkit-line-clamp: 2; line-clamp: 2; }
  .card-meta{ font-size: 12px; gap: 8px; }
  .card-meta .avatar{ width: 22px; height: 22px; }
}

.sidebar{
  container-type: inline-size;
  container-name: sidebar;
}
@container sidebar (max-width: 260px){
  .side-list a{ padding: 8px 10px; font-size: 13px; }
  .side-box{ padding: var(--space-4); }
}

.grid-featured{
  container-type: inline-size;
  container-name: featured;
}
@container featured (max-width: 640px){
  .grid-featured{ grid-template-columns: 1fr; }
}


/* ============================================================
   38. ACCESSIBILITY — reduced motion + focus
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero::before,
  .newsletter::before,
  .animate-float,
  .ticker-track{
    animation: none !important;
  }
  .card:hover,
  .topic-card:hover,
  .btn:hover,
  .icon-btn:hover{
    transform: none !important;
  }
  .hero-visual{
    transform: none !important;
  }
}

/* Consistent focus-visible ring */
:focus-visible{
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: 4px;
}
.btn:focus-visible,
.icon-btn:focus-visible{
  box-shadow: var(--ring-focus), var(--shadow-md);
}

/* Larger tap targets for touch */
@media (hover: none) and (pointer: coarse){
  a, button, .btn, .icon-btn, .chip{
    touch-action: manipulation;
  }
  .side-list a,
  .mm-list a,
  .mn-panel-inner a{
    padding: 12px 14px;
  }
}


/* ============================================================
   39. HIGH-CONTRAST + FORCED-COLORS
   ============================================================ */
@media (prefers-contrast: more){
  :root{
    --border: #000;
    --border-strong: #000;
    --text-light: #333;
  }
  .btn{ border-width: 2px; }
}

@media (forced-colors: active){
  .btn,
  .card,
  .chip,
  .side-box,
  .megamenu{
    border: 1px solid CanvasText;
  }
  .btn-primary,
  .btn-gradient{
    background: LinkText;
    color: Canvas;
    forced-color-adjust: none;
  }
}


/* ============================================================
   40. PRINT STYLES
   ============================================================ */
@media print{
  :root{
    --primary: #000;
    --accent: #333;
    --text: #000;
    --text-light: #333;
    --background: #fff;
    --surface: #fff;
    --border: #ccc;
  }

  *,
  *::before,
  *::after{
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    animation: none !important;
    transition: none !important;
  }

  body{ font-size: 12pt; line-height: 1.5; }

  .site-header,
  .site-footer,
  .mobile-nav,
  .search-drawer,
  .back-to-top,
  .reading-progress,
  .share-side,
  .toc-sticky,
  .newsletter,
  .hero-ticker,
  .related-articles,
  .hamburger,
  .header-actions{
    display: none !important;
  }

  .article-wrap{
    grid-template-columns: 1fr;
    padding: 0;
    max-width: none;
  }

  h1{ font-size: 24pt; }
  h2{ font-size: 18pt; page-break-after: avoid; }
  h3{ font-size: 14pt; page-break-after: avoid; }
  p, li, blockquote{ orphans: 3; widows: 3; }

  a{ text-decoration: underline; color: #000 !important; }
  a[href^="http"]::after{
    content: " (" attr(href) ")";
    font-size: 10pt;
    color: #444 !important;
  }

  .card,
  .compare-card,
  .side-box{
    border: 1px solid #ccc !important;
    page-break-inside: avoid;
  }

  img{ page-break-inside: avoid; max-width: 100% !important; }

  .prose blockquote{
    border-left: 3px solid #333;
    background: transparent !important;
  }

  .disclosure,
  .callout{
    border: 1px solid #666 !important;
    padding: 8pt;
  }
}


/* ============================================================
   41. NAVBAR FIX — Blog + Contact links + edge cases
   ============================================================ */
.primary-nav > li > a.simple,
.site-nav > li > a.simple{
  padding: 0 14px;
}

.mn-simple-link[href*="contact"],
.mn-simple-link[href*="blog"]{
  font-weight: var(--weight-semi);
}

/* Prevent horizontal overflow on 900px–1240px */
@media (min-width: 901px) and (max-width: 1240px){
  .megamenu{
    left: auto;
    right: 0;
    transform: none;
  }
  .primary-nav > li:first-child > .megamenu{
    left: 0;
    right: auto;
  }
}


/* ============================================================
   42. FINAL POLISH — Micro-interactions
   ============================================================ */
/* Link underline reveal */
.link-reveal{
  position: relative;
  display: inline-block;
}
.link-reveal::after{
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-base) var(--ease);
}
.link-reveal:hover::after{
  transform: scaleX(1);
  transform-origin: left;
}

/* Magnetic hover (JS-hookable) */
[data-magnetic]{
  transition: transform var(--dur-base) var(--ease);
  will-change: transform;
}

/* Kbd hint */
kbd{
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--tint-bg);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  color: var(--text);
}

/* Success/error inline states */
.state-success{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--success);
  font-size: 13px;
  font-weight: var(--weight-semi);
}
.state-error{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--danger);
  font-size: 13px;
  font-weight: var(--weight-semi);
}

/* Divider with content */
.divider-text{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-6) 0;
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.divider-text::before,
.divider-text::after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Ratings — animated */
.stars{
  --star-fill: var(--warning);
  display: inline-flex;
  gap: 2px;
  font-size: 14px;
  color: var(--star-fill);
  letter-spacing: 1px;
}

/* End of style.css — v2.0.0 (5,700+ lines) */