/* ═══════════════════════════════════════════════════════════════════════
   PDFLama — Design System v4.2
   Icon/Logo : Audiowide (400) — self-hosted
   Display   : Poppins   (400–800) — self-hosted
   Body      : Figtree   (400–700) — Google Fonts
   Light   : #FFFFFF canvas · #16B364 green · #0F1929 text
   Dark    : #0D1117 navy  · #22C55E green · #F0FDF4 text
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Self-hosted Fonts ────────────────────────────────────────────────── */
@font-face {
  font-family: 'Audiowide';
  src: url('../fonts/audiowide-latin-400-normal.woff2') format('woff2'),
       url('../fonts/audiowide-latin-400-normal.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-latin-400-normal.woff2') format('woff2'),
       url('../fonts/poppins-latin-400-normal.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-latin-700-normal.woff2') format('woff2'),
       url('../fonts/poppins-latin-700-normal.woff')  format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-latin-800-normal.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ── Self-hosted Figtree (body font) ─────────────────────────────────── */
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: optional;
}
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: optional;
}
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: optional;
}
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}


/* ── Self-hosted Figtree (body font) — replaces Google Fonts CDN ──────── */
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ── System font fallback metrics — reduces CLS from font swap ── */
@font-face {
  font-family: 'Poppins Fallback';
  src: local('Arial');
  size-adjust: 96%;
  ascent-override: 95%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Figtree Fallback';
  src: local('Arial');
  size-adjust: 100%;
  ascent-override: 94%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* ── Light Mode ──────────────────────────────────────────────────────── */
:root {
  /* Brand neon green */
  --green:        #10B981;
  --green-dark:   #059669;
  --green-light:  #D1FAE5;
  --green-mid:    #A7F3D0;
  --green-glow:   rgba(16,185,129,0.12);
  --green-glow2:  rgba(16,185,129,0.20);
  --green-shadow: 0 4px 24px rgba(16,185,129,0.32);

  /* Canvas */
  --canvas:       #FFFFFF;
  --surface:      #F0FDF9;
  --surface-1:    #ECFDF5;
  --surface-2:    #D1FAE5;
  --border:       #C6F6D5;
  --border-soft:  #E0FFF4;

  /* Text */
  --text:         #0F1929;
  --text-2:       #344054;
  --text-muted:   #667085;
  --text-faint:   #98A2B3;

  /* Semantic */
  --success:      #16B364;
  --success-bg:   #ECFDF5;
  --success-bd:   rgba(22,179,100,0.22);
  --error:        #DC2626;
  --error-bg:     #FEF2F2;
  --error-bd:     rgba(220,38,38,0.20);
  --info:         #0EA5E9;
  --info-bg:      #F0F9FF;
  --info-bd:      rgba(14,165,233,0.20);

  /* Nav */
  --nav-bg:       rgba(255,255,255,0.90);
  --nav-border:   rgba(167,243,208,0.90);

  /* Shadows */
  --shadow-xs:    0 1px 2px rgba(5,30,20,0.05);
  --shadow-sm:    0 1px 3px rgba(5,30,20,0.10),0 1px 2px rgba(5,30,20,0.06);
  --shadow-md:    0 4px 8px rgba(5,30,20,0.08),0 2px 4px rgba(5,30,20,0.04);
  --shadow-lg:    0 12px 24px rgba(5,30,20,0.10),0 4px 8px rgba(5,30,20,0.05);
  --shadow-xl:    0 24px 48px rgba(5,30,20,0.12),0 8px 16px rgba(5,30,20,0.06);

  /* Typography */
  --font-icon:    'Audiowide', sans-serif;
  --font-display: 'Poppins', 'Poppins Fallback', 'Trebuchet MS', sans-serif;
  --font-body:    'Figtree', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing */
  --sp-1:0.25rem;  --sp-2:0.5rem;   --sp-3:0.75rem;
  --sp-4:1rem;     --sp-5:1.25rem;  --sp-6:1.5rem;
  --sp-8:2rem;     --sp-10:2.5rem;  --sp-12:3rem;
  --sp-16:4rem;    --sp-20:5rem;    --sp-24:6rem;

  /* Radius */
  --r-sm:6px;  --r-md:10px;   --r-lg:14px;
  --r-xl:20px; --r-2xl:28px;  --r-full:9999px;

  /* Motion */
  --ease:     cubic-bezier(0.22,1,0.36,1);
  --ease-out: cubic-bezier(0,0,0.2,1);
  --t-fast:   120ms;  --t-mid:220ms;  --t-slow:380ms;

  /* Layout */
  --max-w:  1160px;
  --nav-h:  64px;

  /* Category colors */
  --cc-convert:  #EEF2FF;  --cf-convert:  #4F46E5;
  --cc-optimize: #FFF7ED;  --cf-optimize: #EA580C;
  --cc-organize: #ECFDF5;  --cf-organize: #10B981;
  --cc-extract:  #FDF2F8;  --cf-extract:  #C026D3;
  --cc-secure:   #FFF1F2;  --cf-secure:   #E11D48;
  --cc-view:     #F0F9FF;  --cf-view:     #0284C7;
}

/* ── Dark Mode ───────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --green:        #34D399;
  --green-dark:   #10B981;
  --green-light:  rgba(52,211,153,0.14);
  --green-mid:    rgba(52,211,153,0.24);
  --green-glow:   rgba(52,211,153,0.10);
  --green-glow2:  rgba(52,211,153,0.18);
  --green-shadow: 0 4px 24px rgba(52,211,153,0.28);

  --canvas:      #050F0A;
  --surface:     #0A1A10;
  --surface-1:   #0D2318;
  --surface-2:   #102B1E;
  --border:      rgba(52,211,153,0.12);
  --border-soft: rgba(52,211,153,0.07);

  --text:        #F0FDF4;
  --text-2:      #A7D9BC;
  --text-muted:  #618A78;
  --text-faint:  #2A4A38;

  --nav-bg:      rgba(5,15,10,0.92);
  --nav-border:  rgba(52,211,153,0.10);

  --shadow-xs:   0 1px 2px rgba(0,0,0,0.45);
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.55),0 1px 2px rgba(0,0,0,0.35);
  --shadow-md:   0 4px 8px rgba(0,0,0,0.60),0 2px 4px rgba(0,0,0,0.35);
  --shadow-lg:   0 12px 24px rgba(0,0,0,0.70),0 4px 8px rgba(0,0,0,0.45);
  --shadow-xl:   0 24px 48px rgba(0,0,0,0.75),0 8px 16px rgba(0,0,0,0.50);

  --success-bg:  rgba(22,179,100,0.10);
  --success-bd:  rgba(34,197,94,0.22);
  --error-bg:    rgba(220,38,38,0.10);
  --error-bd:    rgba(220,38,38,0.22);
  --info-bg:     rgba(14,165,233,0.10);
  --info-bd:     rgba(14,165,233,0.22);

  --cc-convert:  rgba(79,70,229,0.18);    --cf-convert:  #818CF8;
  --cc-optimize: rgba(234,88,12,0.18);   --cf-optimize: #FB923C;
  --cc-organize: rgba(52,211,153,0.18);  --cf-organize: #34D399;
  --cc-extract:  rgba(192,38,211,0.18);  --cf-extract:  #E879F9;
  --cc-secure:   rgba(225,29,72,0.18);   --cf-secure:   #FB7185;
  --cc-view:     rgba(2,132,199,0.18);   --cf-view:     #38BDF8;
}

/* ── Reset & Base ────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html { color-scheme: light dark; }
body {
  font-family:var(--font-body);
  font-size:1rem; line-height:1.65;
  color:var(--text); background:var(--canvas);
  min-height:100vh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* No transition on load — added by JS after first paint to prevent theme flash */
}

/* Disable transitions until JS marks body ready — prevents theme/color flash on first paint */
body:not(.transitions-ready) *,
body:not(.transitions-ready) *::before,
body:not(.transitions-ready) *::after {
  transition: none !important;
}

/* prefers-reduced-motion: consolidated at bottom of file */

/* ── Content visibility (performance) ───────────────────────────────────── */
@media (min-width: 768px) {
  .section,
  .section-sm {
        contain-intrinsic-size: 0 500px;
  }
}
/* Theme transitions — added to body ONLY after page is loaded (see global.js) */
body.transitions-ready .nav,
body.transitions-ready .btn,
body.transitions-ready .card,
body.transitions-ready .tool-card,
body.transitions-ready .badge,
body.transitions-ready .upload-zone,
body.transitions-ready .footer,
body.transitions-ready .faq-item {
  transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}
img,svg,video { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; border:none; background:none; font:inherit; color:inherit; }
ul,ol { list-style:none; }
input,select,textarea { font:inherit; color:inherit; }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-display); color:var(--text); line-height:1.15; }


/* ── Focus Visible — Keyboard Accessibility ────────────────────────────── */
:focus-visible {
  outline: 2.5px solid var(--green);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2.5px solid var(--green);
  outline-offset: 3px;
}

/* ── Typography Scale ─────────────────────────────────────────────────── */
.t-display {
  font-family:var(--font-display); font-size:clamp(2.4rem,5.5vw,4rem);
  font-weight:800; letter-spacing:-0.04em; line-height:1.06;
}
.t-h1 {
  font-family:var(--font-display); font-size:clamp(1.85rem,4vw,3rem);
  font-weight:800; letter-spacing:-0.03em; line-height:1.10;
}
.t-h2 {
  font-family:var(--font-display); font-size:clamp(1.4rem,2.8vw,2.2rem);
  font-weight:700; letter-spacing:-0.025em; line-height:1.18;
}
.t-h3 {
  font-family:var(--font-display); font-size:clamp(1.1rem,1.8vw,1.5rem);
  font-weight:700; letter-spacing:-0.015em; line-height:1.28;
}
.t-h4      { font-family:var(--font-display); font-size:1.0625rem; font-weight:700; line-height:1.35; }
.t-lg      { font-size:1.0625rem; line-height:1.75; }
.t-sm      { font-size:0.875rem; }
.t-xs      { font-size:0.775rem; }
.t-muted   { color:var(--text-muted); }
.t-green   { color:var(--green); }
.t-center  { text-align:center; }
.t-bold    { font-weight:700; }
.t-semi    { font-weight:600; }
.prose     { font-size:1rem; line-height:1.80; color:var(--text-2); }
.prose p   { margin-bottom:var(--sp-4); }
.prose h3  { font-family:var(--font-display); font-weight:700; font-size:1.1rem; margin:var(--sp-6) 0 var(--sp-2); }
.prose a   { color:var(--green); text-decoration:underline; }
.prose strong { color:var(--text); font-weight:700; }

/* ── Layout ───────────────────────────────────────────────────────────── */
.container    { width:100%; max-width:var(--max-w); margin:0 auto; padding:0 var(--sp-6); }
.container-sm { width:100%; max-width:740px;  margin:0 auto; padding:0 var(--sp-6); }
.container-md { width:100%; max-width:920px;  margin:0 auto; padding:0 var(--sp-6); }
.section      { padding:var(--sp-20) 0; }
.section-sm   { padding:var(--sp-12) 0; }
.hero-section {
  position: relative;
  padding: var(--sp-20) 0 var(--sp-16);
  overflow: hidden;
  min-height: 540px;
}
.w-full       { width:100%; }

/* ── Navigation ───────────────────────────────────────────────────────── */
.nav {
  position:sticky; top:0; z-index:200;
  height:var(--nav-h);
  background:var(--nav-bg);
  border-bottom:1px solid var(--nav-border);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  backdrop-filter:blur(24px) saturate(160%);
  transition:background var(--t-mid) var(--ease),border-color var(--t-mid),box-shadow var(--t-mid);
  will-change: transform;
}
.nav.scrolled { box-shadow:var(--shadow-md); }
.nav__inner { display:flex; align-items:center; height:var(--nav-h); gap:var(--sp-6); }
.nav__logo {
  display:flex; align-items:center; gap:9px;
  font-family:var(--font-icon); font-weight:400; font-size:1.15rem;
  letter-spacing:0; color:var(--text); flex-shrink:0;
  transition:opacity var(--t-fast);
}
.nav__logo:hover { opacity:0.8; }
.nav__logo-mark {
  width:30px; height:30px;
  background:var(--green); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; box-shadow:var(--green-shadow);
}
.nav__logo em { color:var(--green); font-style:normal; }
.nav__links { display:flex; align-items:center; gap:var(--sp-1); margin-left:var(--sp-2); flex:1; }
.nav__link {
  padding:var(--sp-2) var(--sp-3);
  font-size:0.875rem; font-weight:500; color:var(--text-muted);
  border-radius:var(--r-md);
  transition:color var(--t-fast),background var(--t-fast);
}
.nav__link:hover { color:var(--text); background:var(--surface-1); }
.nav__link.active { color:var(--text); font-weight:600; }
.nav__actions { display:flex; align-items:center; gap:var(--sp-3); margin-left:auto; flex-shrink:0; }

/* Theme toggle */
/* ── Theme Toggle — catchy pill/glow button ──────────────────────────── */
.theme-toggle {
  position: relative;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1.5px solid #fde68a;
  color: #b45309;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.25s ease,
              background 0.35s ease,
              border-color 0.35s ease,
              color 0.35s ease;
  box-shadow: 0 1px 6px rgba(251,191,36,0.2);
  flex-shrink: 0;
}
.theme-toggle:hover {
  transform: scale(1.15) rotate(15deg);
  box-shadow: 0 3px 12px rgba(251,191,36,0.38), 0 0 0 3px rgba(251,191,36,0.12);
}
.theme-toggle:active { transform: scale(0.92); }
.theme-toggle svg { width: 16px; height: 16px; display: block; }
[data-theme="dark"] .theme-toggle {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
  border-color: #4f46e5;
  color: #c7d2fe;
  box-shadow: 0 1px 6px rgba(99,102,241,0.25);
}
[data-theme="dark"] .theme-toggle:hover {
  transform: scale(1.15) rotate(-15deg);
  box-shadow: 0 3px 12px rgba(99,102,241,0.4), 0 0 0 3px rgba(99,102,241,0.15);
}

/* Touch targets — ensure tap area is at least 44px without changing visual size */
@media (hover:none) and (pointer:coarse) {
  .theme-toggle { padding: 5px; }
}

/* Burger ─────────────────────────────────────────────────────────────── */
.nav__burger {
  display: none; width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border-radius: var(--r-md); color: var(--text-muted);
  transition: background var(--t-fast), color var(--t-fast), transform 0.2s;
  flex-shrink: 0;
}
.nav__burger:hover { background: var(--surface-1); color: var(--text); }
.nav__burger.is-open { color: var(--text); }

/* Drawer overlay ────────────────────────────────────────────────────── */
.nav__overlay {
  display: none;
  position: fixed; inset: 0; z-index: 9997;
  background: rgba(15,25,41,0.5);
  -webkit-backdrop-filter: blur(2px);

  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 9997; /* Updated: drawer moved to body */
}
.nav__overlay.open { opacity: 1; }
[data-theme="dark"] .nav__overlay { background: rgba(0,0,0,0.65); }

/* Drawer ────────────────────────────────────────────────────────────── */
.nav__drawer {
  display: flex; flex-direction: column;
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(320px, 88vw);
  background: var(--canvas);
  box-shadow: -8px 0 48px rgba(15,25,41,0.15), -1px 0 0 var(--border-soft);
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto; z-index: 9998; /* Updated: moved to body, needs root-level z-index */
  will-change: transform;
}
[data-theme="dark"] .nav__drawer { box-shadow: -8px 0 48px rgba(0,0,0,0.4), -1px 0 0 rgba(255,255,255,0.06); }
.nav__drawer.open { transform: translateX(0); }

/* Drawer inner layout */
.nav__drawer-inner {
  display: flex; flex-direction: column;
  padding: var(--sp-3) 0 var(--sp-6);
  min-height: 100%;
}
.nav__drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: var(--sp-3);
}
.nav__drawer-logo {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-icon); font-size: 1.05rem;
  color: var(--text); text-decoration: none;
}
.nav__drawer-close {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-md); color: var(--text-muted);
  transition: background var(--t-fast), color var(--t-fast), transform 0.2s;
}
.nav__drawer-close:hover { background: var(--surface-1); color: var(--text); transform: rotate(90deg); }
.nav__drawer-section-title {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-faint);
  padding: var(--sp-3) var(--sp-5) var(--sp-1);
}
.nav__drawer-links {
  display: flex; flex-direction: column; gap: 2px;
  padding: 0 var(--sp-3);
}
.nav__drawer .nav__link {
  font-size: 0.9375rem; padding: 10px var(--sp-3);
  border-radius: var(--r-md);
  display: flex; align-items: center; gap: 10px;
  font-weight: 500; color: var(--text-2);
  transition: background var(--t-fast), color var(--t-fast);
}
.nav__drawer .nav__link:hover,
.nav__drawer .nav__link.active { background: var(--surface-1); color: var(--text); }
.nav__drawer .nav__link svg { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.nav__drawer .nav__link:hover svg,
.nav__drawer .nav__link.active svg { color: var(--green); }
.nav__drawer-divider {
  height: 1px; background: var(--border-soft);
  margin: var(--sp-3) var(--sp-5);
}
.nav__drawer-footer {
  margin-top: auto; padding: var(--sp-5);
  border-top: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.nav__drawer-theme-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-2) var(--sp-1);
}
.nav__drawer-theme-label { font-size: 0.875rem; font-weight: 500; color: var(--text-2); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  font-family:var(--font-body); font-weight:600; font-size:0.9375rem;
  padding:0.65em 1.4em;
  border-radius:var(--r-md); border:1.5px solid transparent;
  cursor:pointer; line-height:1.4; white-space:nowrap; text-decoration:none;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast),
             box-shadow var(--t-fast),transform var(--t-fast);
}
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--green); color:#fff; border-color:var(--green-dark); }
.btn-primary:hover { background:var(--green-dark); box-shadow:var(--green-shadow); }
.btn-secondary { background:var(--surface-1); color:var(--text-2); border-color:var(--border); }
.btn-secondary:hover { background:var(--border-soft); border-color:var(--text-faint); }
.btn-outline { background:transparent; color:var(--green); border-color:var(--green); }
.btn-outline:hover { background:var(--green-glow); }
.btn-ghost { background:transparent; color:var(--text-muted); border-color:transparent; }
.btn-ghost:hover { color:var(--text); background:var(--surface-1); }
.btn-xs  { font-size:0.78rem;  padding:0.35em 0.9em; }
.btn-sm  { font-size:0.84rem;  padding:0.5em 1.1em; }
.btn-lg  { font-size:1rem;     padding:0.72em 1.65em; }
.btn-xl  { font-size:1.0625rem; padding:0.82em 2.1em; border-radius:var(--r-lg); }

/* ── Badges ───────────────────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  font-size:0.75rem; font-weight:600; letter-spacing:0.01em;
  padding:3px 10px; border-radius:var(--r-full);
  background:var(--surface-1); color:var(--text-muted); border:1px solid var(--border);
}
.badge-green { background:var(--green-light); color:#065F46; border-color:var(--green-mid); }
[data-theme="dark"] .badge-green { color:#34D399; }

/* ── Cards ────────────────────────────────────────────────────────────── */
.card {
  background:var(--canvas); border:1px solid var(--border);
  border-radius:var(--r-xl); box-shadow:var(--shadow-xs);
  transition:box-shadow var(--t-mid) var(--ease),transform var(--t-mid) var(--ease),border-color var(--t-mid);
}
.card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.card.interactive:hover { border-color:var(--green); }

/* ── Tool Cards ───────────────────────────────────────────────────────── */
.tool-card {
  display:flex; align-items:flex-start; gap:var(--sp-4);
  padding:var(--sp-5);
  background:var(--canvas); border:1.5px solid var(--border);
  border-radius:var(--r-xl); cursor:pointer;
  text-decoration:none; color:var(--text);
  transition:box-shadow var(--t-mid) var(--ease),transform var(--t-mid) var(--ease),border-color var(--t-mid);
  position:relative; overflow:hidden;
}
.tool-card::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,var(--tool-bg,var(--surface)) 0%,transparent 55%);
  opacity:0; transition:opacity var(--t-mid); pointer-events:none;
}
.tool-card:hover {
  box-shadow:var(--shadow-lg); transform:translateY(-3px);
  border-color:var(--tool-color,var(--green));
}
.tool-card:hover::after { opacity:1; }
.tool-card__icon {
  width:44px; height:44px; flex-shrink:0;
  border-radius:var(--r-lg);
  background:var(--tool-bg,var(--surface-1));
  display:flex; align-items:center; justify-content:center;
  color:var(--tool-color,var(--green));
  transition:transform var(--t-mid) var(--ease);
}
.tool-card:hover .tool-card__icon { transform:scale(1.08); }
.tool-card__icon svg { width:22px; height:22px; }
.tool-card__body { flex:1; min-width:0; }
.tool-card__title {
  font-family:var(--font-display); font-size:0.9375rem; font-weight:700;
  margin-bottom:3px; color:var(--text);
}
.tool-card__desc { font-size:0.8rem; color:var(--text-muted); line-height:1.5; }
.tool-card__arrow {
  position:absolute; right:var(--sp-4); top:50%;
  transform:translateY(-50%) translateX(5px);
  color:var(--tool-color,var(--green)); opacity:0;
  transition:opacity var(--t-mid),transform var(--t-mid) var(--ease);
}
.tool-card:hover .tool-card__arrow { opacity:1; transform:translateY(-50%) translateX(0); }

/* .compare-table consolidated below */

/* ── Upload Zone — Complete & Consistent Spacing System ───────────────── */
.upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--r-2xl);
  padding: var(--sp-10) var(--sp-8) var(--sp-8);
  text-align: center;
  cursor: pointer;
  background: var(--surface);
  transition: border-color var(--t-mid), background var(--t-mid), transform var(--t-mid);
  position: relative;
  overflow: hidden;
  /* Establish a consistent inner flex column */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0; /* spacing controlled per-element */
}
.upload-zone::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, var(--green-glow) 0%, transparent 65%);
  opacity: 0; transition: opacity var(--t-mid); pointer-events: none;
}
.upload-zone:hover,
.upload-zone.dragover {
  border-color: var(--green);
  background: var(--surface-2);
  transform: scale(1.005);
}
.upload-zone:hover::before,
.upload-zone.dragover::before { opacity: 1; }

/* Upload zone icon */
.upload-zone__icon {
  width: 60px;
  height: 60px;
  margin: 0 0 var(--sp-4) 0;
  background: var(--surface-1);
  border-radius: var(--r-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  flex-shrink: 0;
  transition: background var(--t-mid), box-shadow var(--t-mid), transform var(--t-mid);
}
.upload-zone:hover .upload-zone__icon {
  background: var(--green-light);
  box-shadow: 0 4px 16px rgba(22,179,100,0.25);
  transform: translateY(-2px);
}

/* Upload zone text */
.upload-zone__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--text);
  margin: 0 0 var(--sp-2) 0;
}
.upload-zone__sub {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 var(--sp-4) 0;
}

/* Privacy note inside upload zone */
.upload-zone__privacy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--green-light);
  color: #065F46;
  border-radius: var(--r-full);
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  margin: 0 0 var(--sp-3) 0;
  border: 1px solid var(--green-mid);
}
[data-theme="dark"] .upload-zone__privacy {
  color: #34D399;
  background: var(--green-glow2);
  border-color: rgba(52,211,153,0.3);
}
.upload-zone__privacy svg { flex-shrink: 0; }

/* Time badge */
.upload-zone__time svg { color: var(--green); flex-shrink: 0; }

/* Max size badge inside upload zone */
.upload-zone .badge {
  margin: 0 0 var(--sp-5) 0;
}

/* Keyboard focus */
.upload-zone:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 4px;
  border-color: var(--green);
}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq-item { border-bottom:1px solid var(--border-soft); }
.faq-btn {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:var(--sp-5) 0;
  font-family:var(--font-display); font-weight:700; font-size:0.9375rem;
  color:var(--text); text-align:left; gap:var(--sp-4);
  transition:color var(--t-fast);
}
.faq-btn:hover { color:var(--green); }
.faq-icon {
  width:24px; height:24px; flex-shrink:0;
  border-radius:50%; background:var(--surface-1);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--t-fast),transform var(--t-mid) var(--ease);
}
.faq-item.open .faq-icon { background:var(--green-light); transform:rotate(45deg); }
[data-theme="dark"] .faq-item.open .faq-icon { background:var(--green-glow2); }
.faq-icon svg { color:var(--text-muted); transition:color var(--t-fast); }
.faq-item.open .faq-icon svg { color:var(--green); }
.faq-answer { display:grid; grid-template-rows:0fr; transition:grid-template-rows 0.3s var(--ease); }
.faq-item.open .faq-answer { grid-template-rows:1fr; }
.faq-answer__inner { overflow:hidden; }
.faq-answer__inner p { padding-bottom:var(--sp-5); font-size:0.9375rem; color:var(--text-muted); line-height:1.75; }

/* ── Step List ────────────────────────────────────────────────────────── */
.step-list { display:flex; flex-direction:column; gap:var(--sp-6); }
.step-item { display:flex; gap:var(--sp-5); align-items:flex-start; }
.step-num {
  width:36px; height:36px; flex-shrink:0; border-radius:50%;
  background:var(--green); color:#fff;
  font-family:var(--font-display); font-weight:800; font-size:0.875rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--green-shadow);
}
.step-body h3 { font-size:0.9375rem; font-weight:700; margin-bottom:3px; color:var(--text); }
.step-body p  { font-size:0.875rem; color:var(--text-muted); line-height:1.65; }

/* ── Feature Checklist ────────────────────────────────────────────────── */
.check-list { display:flex; flex-direction:column; gap:var(--sp-3); }
.check-item { display:flex; align-items:flex-start; gap:var(--sp-3); font-size:0.875rem; color:var(--text-2); }
.check-icon {
  width:20px; height:20px; flex-shrink:0; margin-top:1px;
  border-radius:50%; background:var(--green-light);
  display:flex; align-items:center; justify-content:center; color:var(--green);
}
[data-theme="dark"] .check-icon { background:var(--green-glow2); }

/* ── Privacy Note ─────────────────────────────────────────────────────── */
.privacy-note {
  display:flex; align-items:center; gap:var(--sp-3);
  background:var(--green-glow); border:1px solid var(--green-mid);
  border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4);
  font-size:0.82rem; font-weight:500; color:#047857;
}
[data-theme="dark"] .privacy-note { color:#34D399; }
.privacy-note-blue { border-color:var(--info-bd) !important; background:var(--info-bg) !important; color:var(--info) !important; }

/* .usecase-grid consolidated below */

/* ── Tips Box ─────────────────────────────────────────────────────────── */
.tips-list { display:flex; flex-direction:column; gap:var(--sp-3); }
.tip-item {
  display:flex; gap:var(--sp-3); align-items:flex-start;
  padding:var(--sp-4); border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--border-soft);
}
.tip-num {
  width:26px; height:26px; flex-shrink:0;
  border-radius:50%; background:var(--green-light);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:0.72rem; color:var(--green);
}
[data-theme="dark"] .tip-num { background:var(--green-glow2); }
.tip-item p { font-size:0.875rem; color:var(--text-2); line-height:1.65; }

/* ── Section Label ────────────────────────────────────────────────────── */
.sec-label {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-size:0.70rem; font-weight:700; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--green); margin-bottom:var(--sp-3);
}

/* ── Trust Row ────────────────────────────────────────────────────────── */
.trust-row { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:var(--sp-5); }
.trust-item { display:flex; align-items:center; gap:var(--sp-2); font-size:0.82rem; font-weight:500; color:var(--text-muted); }
.trust-item svg { color:var(--green); width:15px; height:15px; flex-shrink:0; }

/* ── Stats ────────────────────────────────────────────────────────────── */
.stat-val {
  font-family:var(--font-display);
  font-size:clamp(2rem,4vw,3rem); font-weight:800;
  color:var(--text); letter-spacing:-0.04em; line-height:1;
}
.stat-label { font-size:0.84rem; color:var(--text-muted); margin-top:var(--sp-1); }

/* ── Processing ───────────────────────────────────────────────────────── */
@keyframes spin { to { transform:rotate(360deg); } }
.spinner {
  width:44px; height:44px;
  border:3px solid var(--border); border-top-color:var(--green);
  border-radius:50%; animation:spin 0.75s linear infinite;
}
.progress-bar { height:5px; background:var(--surface-1); border-radius:var(--r-full); overflow:hidden; }
.progress-fill {
  height:100%; background:linear-gradient(90deg,var(--green-dark),var(--green));
  border-radius:var(--r-full); transition:width 0.4s var(--ease);
}

/* ── Toast ────────────────────────────────────────────────────────────── */
.toast {
  position:fixed; bottom:var(--sp-6); right:var(--sp-6); z-index:9999;
  background:var(--canvas); border:1px solid var(--border); color:var(--text);
  padding:var(--sp-3) var(--sp-4); border-radius:var(--r-lg);
  font-size:0.875rem; font-weight:500; box-shadow:var(--shadow-xl);
  display:flex; align-items:center; gap:var(--sp-3);
  animation:toast-in 0.28s var(--ease) both; max-width:330px;
}
.toast.success { border-color:var(--success-bd); }
.toast.error   { border-color:var(--error-bd); }
@keyframes toast-in { from{opacity:0;transform:translateY(10px) scale(0.96)} to{opacity:1;transform:none} }

/* ── Job status tip (while you wait) ─────────────────────────────────── */
.tech-quote {
  position: fixed;
  bottom: var(--sp-6);
  right: var(--sp-6);
  z-index: 9999;
  width: min(320px, calc(100vw - var(--sp-6) * 2));
  padding: var(--sp-4);
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
  pointer-events: none;
}
.tech-quote.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  animation: toast-in 0.28s var(--ease) both;
}
.tech-quote.is-swapping .tech-quote-text { opacity: 0.35; }
.tech-quote-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.tech-quote-kicker {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--green);
}
.tech-quote-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-fast), color var(--t-fast);
}
.tech-quote-close:hover { background: var(--surface-1); color: var(--text); }
.tech-quote-text {
  font-size: 0.875rem;
  color: var(--text-2);
  line-height: 1.55;
  transition: opacity 0.15s var(--ease);
}

/* ── Form Inputs ──────────────────────────────────────────────────────── */
.input {
  width:100%; padding:0.7em 1em;
  border:1.5px solid var(--border); border-radius:var(--r-md);
  background:var(--canvas); color:var(--text); outline:none;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.input:focus { border-color:var(--green); box-shadow:0 0 0 3px var(--green-glow2); }
.input::placeholder { color:var(--text-faint); }
.lbl { display:block; font-size:0.84rem; font-weight:600; margin-bottom:var(--sp-2); color:var(--text-2); }

/* ── Related / Breadcrumb ─────────────────────────────────────────────── */
.related-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); }
.breadcrumb { display:flex; align-items:center; gap:var(--sp-2); font-size:.8rem; color:var(--text-muted); }
.breadcrumb a { color:var(--text-muted); transition:color var(--t-fast); }
.breadcrumb a:hover { color:var(--green); }
.bc-sep { color:var(--text-faint); }

/* ── Footer ───────────────────────────────────────────────────────────── */
.footer {
  background:var(--surface); border-top:1px solid var(--border-soft);
  padding:var(--sp-16) 0 var(--sp-8);
}
.footer__grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  gap:var(--sp-10); padding-bottom:var(--sp-10);
  border-bottom:1px solid var(--border-soft);
}
.footer__brand-name {
  font-family:var(--font-icon); font-weight:400; font-size:1.1rem;
  color:var(--text); letter-spacing:0;
  display:flex; align-items:center; gap:9px; margin-bottom:var(--sp-3);
}
.footer__brand-name em { color:var(--green); font-style:normal; }
.footer__brand-desc { font-size:0.875rem; color:var(--text-muted); max-width:220px; line-height:1.7; }
.footer__col-title {
  font-family:var(--font-display); font-size:0.78rem; font-weight:700;
  color:var(--text-2); letter-spacing:0.04em; text-transform:uppercase; margin-bottom:var(--sp-4);
}
.footer__links { display:flex; flex-direction:column; gap:var(--sp-2); }
.footer__link { font-size:0.875rem; color:var(--text-muted); transition:color var(--t-fast); }
.footer__link:hover { color:var(--green); }
.footer__bottom {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:var(--sp-6); font-size:.8rem; color:var(--text-faint);
  flex-wrap:wrap; gap:var(--sp-3);
}
.footer__bottom-links { display:flex; align-items:center; gap:var(--sp-5); }
.footer__bottom-links a { color:var(--text-faint); transition:color var(--t-fast); }
.footer__bottom-links a:hover { color:var(--text-muted); }

/* ── Animations ───────────────────────────────────────────────────────── */
@keyframes fadeUp   { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
@keyframes fadeIn   { from{opacity:0} to{opacity:1} }
@keyframes scaleIn  { from{opacity:0;transform:scale(0.95)} to{opacity:1;transform:scale(1)} }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }

.anim-fade-up  { animation:fadeUp  0.55s var(--ease) both; }
.anim-fade-in  { animation:fadeIn  0.4s  var(--ease) both; }
.anim-scale-in { animation:scaleIn 0.4s  var(--ease) both; }
.d1{animation-delay:.08s} .d2{animation-delay:.16s}
.d3{animation-delay:.24s} .d4{animation-delay:.32s}

/* Scroll reveal */
.reveal { opacity:0; transform:translateY(18px); transition:opacity 0.5s var(--ease),transform 0.5s var(--ease); }
.reveal.visible { opacity:1; transform:none; }
.reveal.d1{transition-delay:.07s} .reveal.d2{transition-delay:.14s}
.reveal.d3{transition-delay:.21s} .reveal.d4{transition-delay:.28s}

/* ── Utilities ────────────────────────────────────────────────────────── */
.hidden{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.flex{display:flex} .flex-center{display:flex;align-items:center;justify-content:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-5)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}
.mt-2{margin-top:var(--sp-2)} .mt-4{margin-top:var(--sp-4)}
.mt-6{margin-top:var(--sp-6)} .mt-8{margin-top:var(--sp-8)}
.mb-3{margin-bottom:var(--sp-3)} .mb-4{margin-bottom:var(--sp-4)}
.mb-6{margin-bottom:var(--sp-6)} .mb-8{margin-bottom:var(--sp-8)}
.p-5{padding:var(--sp-5)} .p-6{padding:var(--sp-6)} .p-8{padding:var(--sp-8)}
.text-center{text-align:center}
.overflow-hidden{overflow:hidden}
.relative{position:relative}

/* ── Comparison Table (SEO section) ──────────────────────────────────── */
.compare-table th:first-child { border-radius:var(--r-md) 0 0 0; }
.compare-table th:last-child  { border-radius:0 var(--r-md) 0 0; }
.compare-table .yes { color:var(--green); font-weight:700; }
.compare-table .no  { color:var(--text-faint); }
.compare-table .hl { background:var(--surface-2) !important; }
[data-theme="dark"] .compare-table .hl { background:rgba(34,197,94,0.06) !important; }

/* ── Use-Case Grid ────────────────────────────────────────────────────── */

/* ── Pro-Tips List ────────────────────────────────────────────────────── */
.protip-list { display:flex; flex-direction:column; gap:var(--sp-4); }
.protip-item {
  display:flex; gap:var(--sp-4); align-items:flex-start;
  padding:var(--sp-4) var(--sp-5);
  background:var(--surface); border:1px solid var(--border-soft);
  border-left:3px solid var(--green);
  border-radius:0 var(--r-md) var(--r-md) 0;
}
.protip-num {
  font-family:var(--font-display); font-weight:800; font-size:1.25rem;
  color:var(--green); line-height:1; flex-shrink:0; min-width:1.5rem;
}
.protip-body h4 { font-size:0.9rem; font-weight:700; margin-bottom:2px; }
.protip-body p  { font-size:0.84rem; color:var(--text-muted); line-height:1.6; }

/* ── Long-form content prose ─────────────────────────────────────────── */
.prose p { color:var(--text-muted); line-height:1.75; margin-bottom:var(--sp-4); }
.prose p:last-child { margin-bottom:0; }
.prose strong { color:var(--text); font-weight:700; }

/* (backdrop now handled by .nav__overlay — see above) */

/* ── Cloud Upload Buttons ─────────────────────────────────────────────── */
.upload-sources {
  display:flex; align-items:center; justify-content:center;
  gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-4);
  padding-top:var(--sp-4); border-top:1px solid var(--border-soft);
}
.upload-source-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:var(--r-md);
  font-size:0.78rem; font-weight:600;
  border:1.5px solid var(--border); background:var(--canvas);
  color:var(--text-muted); cursor:pointer;
  transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
}
.upload-source-btn:hover { border-color:var(--text-faint); color:var(--text); box-shadow:var(--shadow-sm); }
.upload-source-btn:disabled { opacity:0.55; cursor:not-allowed; }
.cloud-btn__icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; flex-shrink:0; line-height:0;
}
.cloud-btn__icon svg { width:16px; height:16px; display:block; }
.cloud-btn__icon--dropbox svg { width:15px; height:15px; }
.upload-source-btn img,.upload-source-btn svg { width:16px; height:16px; display:block; }
.upload-divider {
  font-size:0.72rem; font-weight:600; color:var(--text-faint);
  letter-spacing:0.05em; text-transform:uppercase;
}

/* ── Enhanced Progress Bar ───────────────────────────────────────────────── */
.progress-wrap { position:relative; }
.progress-bar-v2 {
  height:6px; background:var(--surface-1);
  border-radius:var(--r-full); overflow:hidden; margin:var(--sp-4) 0 var(--sp-2);
}
.progress-fill-v2 {
  height:100%;
  background:linear-gradient(90deg,var(--green-dark),var(--green),#6EE7B7);
  background-size:200% 100%;
  border-radius:var(--r-full);
  width:0%;
  transition:width 0.3s var(--ease);
  animation:progress-shine 1.5s linear infinite;
}
@keyframes progress-shine {
  0%   { background-position:200% 0; }
  100% { background-position:-200% 0; }
}
.progress-label {
  display:flex; align-items:center; justify-content:space-between;
  font-size:0.8rem; font-weight:600; color:var(--text-muted);
}
.progress-pct {
  font-family:var(--font-display); font-size:1rem; font-weight:700;
  color:var(--green); min-width:3ch; text-align:right;
}

/* ── Post-Process Actions Bar ────────────────────────────────────────────── */
.postprocess-bar h4 {
  font-size:0.8rem; font-weight:700; color:var(--text-muted);
  letter-spacing:0.06em; text-transform:uppercase; margin-bottom:var(--sp-3);
}
.postprocess-btn:hover { border-color:var(--green); color:var(--green); box-shadow:var(--shadow-sm); }
.postprocess-btn svg { width:14px; height:14px; }

/* ── Download Save Options ───────────────────────────────────────────────── */
.save-options__label {
  font-size:0.72rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--text-faint); flex-basis:100%; margin-bottom:2px;
}
/* Device button — same style as other source buttons */
.upload-source-btn.btn-device { /* inherits .upload-source-btn */ }
.save-option-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:6px 14px; border-radius:var(--r-md);
  font-size:0.78rem; font-weight:600;
  border:1.5px solid var(--border); background:var(--canvas);
  color:var(--text-muted); cursor:pointer;
  transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
}
.save-option-btn:disabled { opacity:0.55; cursor:not-allowed; }
.save-option-btn:hover { border-color:var(--text-faint); box-shadow:var(--shadow-sm); }
.save-option-btn.gdrive:hover  { border-color:#4285F4; color:#4285F4; }
.save-option-btn.dropbox:hover { border-color:#0061FF; color:#0061FF; }
.save-option-btn img,
.save-option-btn svg { width:16px; height:16px; display:block; flex-shrink:0; }

/* ── Upload Drop Highlight ───────────────────────────────────────────────── */
.upload-zone.dragover { 
  border-color:var(--green);
  box-shadow:0 0 0 4px var(--green-glow2), inset 0 0 60px var(--green-glow);
}
@keyframes bounce-icon {
  0%,100%{transform:translateY(0)} 40%{transform:translateY(-10px)} 70%{transform:translateY(-4px)}
}
.upload-zone.dragover .upload-zone__icon { animation:bounce-icon 0.6s ease both; }

/* ── Inline Keyword Content (programmatic pages) ─────────────────────────── */
.kw-hero-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--green-light); color:#065F46; border:1px solid var(--green-mid);
  border-radius:var(--r-full); padding:4px 14px; font-size:0.75rem; font-weight:700;
  margin-bottom:var(--sp-5);
}
[data-theme="dark"] .kw-hero-badge { color:#34D399; }

.content-grid-2 {
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6);
  margin:var(--sp-8) 0;
}
.content-card {
  background:var(--surface); border:1px solid var(--border-soft);
  border-radius:var(--r-xl); padding:var(--sp-6);
}
.content-card h3 { font-family:var(--font-display); font-size:1rem; font-weight:700; margin-bottom:var(--sp-2); }
.content-card p  { font-size:0.875rem; color:var(--text-muted); line-height:1.7; }

.stat-pill {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  background:var(--surface); border:1px solid var(--border-soft);
  border-radius:var(--r-full); padding:var(--sp-2) var(--sp-4);
  font-size:0.8rem; font-weight:600; color:var(--text-2);
}

/* ── Blog Link Cards ─────────────────────────────────────────────────────── */
.blog-link-card {
  display:flex; align-items:flex-start; gap:var(--sp-4);
  padding:var(--sp-5); background:var(--canvas);
  border:1px solid var(--border); border-radius:var(--r-xl);
  transition:box-shadow var(--t-mid),transform var(--t-mid),border-color var(--t-mid);
  text-decoration:none; color:inherit;
}
.blog-link-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); border-color:var(--green); }
.blog-link-icon {
  width:40px; height:40px; flex-shrink:0;
  background:var(--green-light); border-radius:var(--r-lg);
  display:flex; align-items:center; justify-content:center; font-size:1.15rem;
}
.blog-link-card h4 { font-size:0.9rem; font-weight:700; margin-bottom:3px; }
.blog-link-card p  { font-size:0.8rem; color:var(--text-muted); line-height:1.5; }

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE SYSTEM — PDFLama v5
   Breakpoints: 1280 · 1024 · 768 · 540 · 380
   ════════════════════════════════════════════════════════════════════════ */

/* ── Named layout classes (replaces inline styles in generated pages) ──── */
.pg-hero        { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-12); align-items:start; }
.pg-split       { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-16); }
.pg-split-md    { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-10); }
.pg-aside       { display:grid; grid-template-columns:2fr 1fr; gap:var(--sp-12); align-items:start; }
.pg-faq         { display:grid; grid-template-columns:2fr 3fr; gap:var(--sp-14); align-items:start; }
.pg-blog-2      { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-4); }
.pg-section-hd  { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-4); margin-bottom:var(--sp-10); }

/* ── 1280px — small laptops / 13-inch screens ─────────────────────────── */
@media (max-width:1280px) {
  .pg-hero   { gap:var(--sp-10); }
  .pg-split  { gap:var(--sp-12); }
  .pg-aside  { gap:var(--sp-10); }
  .pg-faq    { gap:var(--sp-10); }
  .footer__grid { grid-template-columns:1.5fr 1fr 1fr 1fr; gap:var(--sp-8); }
}

/* ── 1024px — iPad landscape / small laptops ─────────────────────────── */
@media (max-width:1024px) {
  :root { --sp-20:4rem; }

  /* Layout grids — compress but stay 2-col */
  .pg-hero   { gap:var(--sp-8); }
  .pg-split  { gap:var(--sp-8); }
  .pg-aside  { grid-template-columns:3fr 2fr; gap:var(--sp-8); }
  .pg-faq    { gap:var(--sp-8); }

  /* Utility grids */
  .grid-4       { grid-template-columns:repeat(2,1fr); }
  .grid-3       { grid-template-columns:repeat(2,1fr); }
  .related-grid { grid-template-columns:repeat(2,1fr); }
  .usecase-grid { grid-template-columns:repeat(2,1fr); }
  .content-grid-2 { grid-template-columns:repeat(2,1fr); }

  /* Footer */
  .footer__grid { grid-template-columns:1fr 1fr; gap:var(--sp-8); }
  .footer__brand-desc { max-width:100%; }

  /* Inline grid overrides via attribute selector */
  [style*="grid-template-columns:2fr 3fr"],
  [style*="grid-template-columns:1fr 2fr"] {
    gap:var(--sp-8) !important;
  }
}

/* ── 768px — tablets portrait / large phones landscape ───────────────── */
@media (max-width:820px) {
  :root {
    --nav-h:   58px;
    --sp-20:   3rem;
    --sp-16:   2.25rem;
    --sp-12:   2rem;
    --max-w:   100%;
  }

  /* Nav */
  .nav__links              { display:none; }
  .nav__actions .btn       { display:none; }
  .nav__burger             { display:flex; }
  .nav__logo               { font-size:1.05rem; }

  /* Container padding */
  .container,
  .container-sm,
  .container-md            { padding:0 var(--sp-4); }

  /* ── CORE LAYOUT GRIDS → single column ── */
  .pg-hero,
  .pg-split,
  .pg-split-md,
  .pg-aside,
  .pg-faq                  { grid-template-columns:1fr !important; gap:var(--sp-8) !important; }

  /* Hero: upload zone goes first on mobile for immediacy */
  .pg-hero > .anim-scale-in { order:-1; }

  /* Sticky aside → static */
  .pg-aside > *[style*="sticky"],
  .pg-faq   > *[style*="sticky"]  { position:static !important; top:auto !important; }

  /* Inline grid overrides — catches ALL remaining inline-style grids */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns:2fr 3fr"],
  [style*="grid-template-columns:1fr 2fr"],
  [style*="grid-template-columns:3fr 2fr"],
  [style*="grid-template-columns:1.5fr"],
  [style*="grid-template-columns:3fr 1fr"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: 1fr !important;
    gap: var(--sp-6) !important;
  }
  /* Keep 2-col stat grids (4-col → 2-col already handled above) */
  [style*="grid-template-columns:repeat(2,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Remove sticky on all aside/sidebar elements */
  [style*="position:sticky"],
  [style*="position: sticky"] { position:static !important; top:auto !important; }

  /* Utility grids */
  .grid-2,.grid-3           { grid-template-columns:1fr; }
  .pg-blog-2                { grid-template-columns:1fr; }
  .content-grid-2           { grid-template-columns:1fr !important; }

  /* Footer */
  .footer__grid             { grid-template-columns:1fr 1fr; }

  /* Related tools — stay 2-col on tablet */
  .related-grid             { grid-template-columns:repeat(2,1fr); }

  /* Use cases */
  .usecase-grid             { grid-template-columns:1fr; }

  /* Typography — slightly tighter on tablet */
  .t-display { font-size:clamp(2rem,7vw,3rem); }
  .t-h1      { font-size:clamp(1.65rem,5vw,2.4rem); }
  .t-h2      { font-size:clamp(1.3rem,4vw,1.9rem); }
  .t-h3      { font-size:clamp(1.05rem,3vw,1.4rem); }

  /* Upload zone — more compact */
  .upload-zone              { padding:var(--sp-8) var(--sp-6); }
  .upload-zone__icon        { width:52px; height:52px; }
  .upload-sources           { gap:var(--sp-2); }
  .upload-source-btn        { padding:5px 10px; font-size:0.74rem; }

  /* Post-process bar */
  .postprocess-bar          { padding:var(--sp-4); }
  .postprocess-actions      { gap:var(--sp-1); }
  .postprocess-btn          { padding:6px 10px; font-size:0.75rem; }

  /* Save options */
  .save-options             { flex-direction:column; }
  .save-option-btn          { width:100%; }

  /* Comparison table — scroll horizontally */
  .compare-table            { font-size:0.75rem; }
  .compare-table th,
  .compare-table td         { padding:var(--sp-2) var(--sp-3); }

  /* FAQ — more compact */
  .faq-btn                  { font-size:0.875rem; padding:var(--sp-4) 0; }
  .faq-answer__inner p      { font-size:0.875rem; }

  /* Trust row */
  .trust-row                { gap:var(--sp-3); justify-content:flex-start; }
  .trust-item               { font-size:0.78rem; }

  /* Stat pills wrap */
  .stat-pill                { font-size:0.76rem; }

  /* Stats */
  .stat-val                 { font-size:clamp(1.75rem,5vw,2.5rem); }

  /* Section header flex */
  .pg-section-hd            { flex-direction:column; align-items:flex-start; }

  /* Breadcrumb */
  .breadcrumb               { font-size:0.74rem; flex-wrap:wrap; }

  /* Cards */
  .card.p-8                 { padding:var(--sp-6); }

  /* Hero badges / stat pills row */
  [style*="display:flex"][style*="gap:var(--sp-5)"][style*="flex-wrap:wrap"] {
    gap:var(--sp-2) !important;
  }

  /* Inline flex section headers */
  [style*="display:flex"][style*="align-items:flex-end"][style*="justify-content:space-between"] {
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:var(--sp-4) !important;
  }

  /* Toast */
  .toast { right:var(--sp-3); left:var(--sp-3); max-width:none; bottom:var(--sp-4); }
  .tech-quote { right:var(--sp-3); left:var(--sp-3); width:auto; bottom:var(--sp-4); }
}

/* ── 540px — smartphones landscape / mid phones ──────────────────────── */
@media (max-width:540px) {
  :root {
    --sp-20: 2.5rem;
    --sp-16: 2rem;
  }

  /* Footer — single column */
  .footer__grid             { grid-template-columns:1fr; gap:var(--sp-6); }
  .footer                   { padding:var(--sp-10) 0 var(--sp-6); }
  .footer__brand-desc       { max-width:100%; }

  /* Related tools — single column */
  .related-grid             { grid-template-columns:1fr; }

  /* Upload zone */
  .upload-zone              { padding:var(--sp-6) var(--sp-4); border-radius:var(--r-xl); }
  .upload-zone__icon        { width:44px; height:44px; margin-bottom:var(--sp-3); }
  .upload-zone__icon svg    { width:22px; height:22px; }
  .upload-zone__title       { font-size:1rem; }
  .upload-zone__sub         { font-size:0.8rem; }
  .upload-sources           { flex-direction:row; flex-wrap:wrap; justify-content:center; }
  .upload-divider           { width:100%; text-align:center; }

  /* Grid 4 → 2 col */
  .grid-4                   { grid-template-columns:repeat(2,1fr); }

  /* Section padding tighter */
  .section                  { padding:var(--sp-12) 0; }
  .section-sm               { padding:var(--sp-8) 0; }

  /* Tool card — compact on small phones */
  .tool-card                { padding:var(--sp-4); }

  /* Stats row */
  [style*="display:flex"][style*="margin-top:var(--sp-8)"] {
    gap:var(--sp-2) !important;
    margin-top:var(--sp-5) !important;
  }

  /* Use case grid */
  .usecase-grid             { gap:var(--sp-3); }
  .usecase-card             { padding:var(--sp-4); }

  /* Pro tips */
  .protip-item              { padding:var(--sp-3) var(--sp-4); }

  /* Content cards */
  .content-card             { padding:var(--sp-4); }

  /* Blog link cards — compact */
  .blog-link-card           { padding:var(--sp-4); gap:var(--sp-3); }

  /* Comparison table wrapper — ensure horizontal scroll */
  .card[style*="overflow:hidden"]  { overflow:hidden; overflow-x:auto !important; }
}

/* ── 380px — small smartphones (iPhone SE, Galaxy A series) ──────────── */
@media (max-width:380px) {
  :root {
    --sp-16: 1.75rem;
    --sp-12: 1.5rem;
  }

  .container,
  .container-sm,
  .container-md  { padding:0 var(--sp-3); }

  /* Nav */
  .nav__logo     { font-size:0.95rem; }
  .nav__logo-mark { width:26px; height:26px; }

  /* Typography */
  .t-h1          { font-size:1.5rem; letter-spacing:-0.025em; }
  .t-h2          { font-size:1.2rem; }
  .t-h3          { font-size:1.05rem; }

  /* Buttons — full width on small phone where stacked */
  .btn-xl        { width:100%; justify-content:center; }

  /* Upload zone */
  .upload-zone   { padding:var(--sp-5) var(--sp-3); }

  /* Related grid */
  .related-grid  { grid-template-columns:1fr; }

  /* FAQ */
  .faq-btn       { font-size:0.83rem; }

  /* Footer bottom */
  .footer__bottom     { flex-direction:column; gap:var(--sp-2); }
  .footer__bottom-links { flex-wrap:wrap; gap:var(--sp-3); }

  /* Post-process buttons — full width */
  .postprocess-actions  { flex-direction:column; }
  .postprocess-btn      { width:100%; justify-content:center; }

  /* Tool card - keep compact */
  .tool-card__icon { width:36px; height:36px; }
  .tool-card__icon svg { width:18px; height:18px; }
  .tool-card__title { font-size:0.875rem; }

  /* Toast */
  .toast { font-size:0.8rem; }

  /* Stat pills */
  .stat-pill  { font-size:0.72rem; padding:var(--sp-1) var(--sp-3); }
}

/* ── Homepage-specific responsive ────────────────────────────────────── */
@media (max-width:768px) {
  /* Hero CTA buttons → stack */
  .btn-xl { font-size:0.9375rem; padding:0.68em 1.4em; }

  /* Hero trust row → 2 col on tablet */
  .trust-row { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-3); }

  /* Stats counter → 2 col */
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns:repeat(2,1fr) !important;
    gap:var(--sp-5) !important;
  }

  /* Comparison table: ensure wrapper has x-scroll */
  .card[style*="overflow"] { overflow-x:auto !important; }

  /* Blog post grid on homepage → single column */
  .grid-3[style*="gap:var(--sp-5)"] { grid-template-columns:1fr !important; }
}

@media (max-width:540px) {
  /* Hero: stack CTA buttons vertically */
  [style*="display:flex"][style*="justify-content:center"][style*="gap:var(--sp-3)"][style*="flex-wrap:wrap"] {
    flex-direction:column !important;
    align-items:stretch !important;
    gap:var(--sp-3) !important;
  }
  [style*="display:flex"][style*="justify-content:center"][style*="gap:var(--sp-3)"] .btn {
    text-align:center;
    justify-content:center;
  }

  /* Trust row → single column on small phones */
  .trust-row { grid-template-columns:1fr; }

  /* Hero tag/badge */
  .kw-hero-badge { font-size:0.7rem; padding:3px 10px; }
}

@media (max-width:380px) {
  /* Trust row compact */
  .trust-item { font-size:0.75rem; }
}

/* ── General overflow safety ─────────────────────────────────────────── */
/* Prevent any element from causing horizontal scroll */
section, .section, .section-sm { overflow-x:hidden; }

/* Comparison table always scrollable */
.card:has(.compare-table) { overflow-x:auto !important; }
/* Fallback for browsers without :has() support */
/* compare-table min-width removed — tables scroll within wrapper instead */

/* Image overflow safety */
img, video, iframe, svg { max-width:100%; }
@media (hover:none) and (pointer:coarse) {
  /* Larger tap targets */
  .btn               { min-height:44px; }
  .nav__link         { min-height:44px; display:flex; align-items:center; }
  .faq-btn           { min-height:48px; }
  .upload-source-btn { min-height:40px; }
  .postprocess-btn   { min-height:40px; }
  .theme-toggle      { padding: 5px; /* ensures 34+10=44px tap area */ }
  .tool-card         { min-height:64px; }

  /* Remove hover animations that feel wrong on touch */
  .tool-card:hover   { transform:none; }
  .card:hover        { transform:none; }
  .blog-link-card:hover { transform:none; }
  .usecase-card:hover { box-shadow:none; }

  /* Upload zone — no scale animation on touch */
  .upload-zone:hover { transform:none; }
}

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:0.01ms !important;
    transition-duration:0.01ms !important;
  }
  .progress-fill-v2 { animation:none; }
  .reveal { opacity:1 !important; transform:none !important; transition:none !important; }
  .anim-fade-up,.anim-fade-in,.anim-scale-in { animation:none; opacity:1; transform:none; }
}

/* ── Skip Navigation Link ───────────────────────────────────────────────── */
.skip-link {
  position:absolute; left:-9999px; top:0; z-index:9999;
  background:var(--green); color:#fff; padding:8px 18px;
  border-radius:0 0 8px 0; font-size:.875rem; font-weight:600;
  text-decoration:none; transition:left 0s;
}
.skip-link:focus-visible { left:0; outline:none; }

/* ── Related LP Links ───────────────────────────────────────────────────── */
.related-lp-grid {
  display:flex; flex-wrap:wrap; gap:var(--sp-2);
}
.related-lp-link {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-full); font-size:.8rem; font-weight:500; color:var(--text-2);
  transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast);
}
.related-lp-link:hover { border-color:var(--green); color:var(--green); background:var(--green-glow); }
.related-lp-link svg { color:var(--green); flex-shrink:0; }

/* ── Footer 5-column layout ─────────────────────────────────────────────────── */
.footer__grid[style*="grid-template-columns:1.5fr"] {
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;
  gap:var(--sp-8);
}
@media (max-width:1024px) {
  .footer__grid[style*="grid-template-columns:1.5fr"] {
    grid-template-columns:1fr 1fr 1fr;
    gap:var(--sp-6);
  }
}
@media (max-width:768px) {
  .footer__grid[style*="grid-template-columns:1.5fr"] {
    grid-template-columns:1fr 1fr;
    gap:var(--sp-5);
  }
}
@media (max-width:540px) {
  .footer__grid[style*="grid-template-columns:1.5fr"] {
    grid-template-columns:1fr;
    gap:var(--sp-5);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   BLOG POST PAGE STYLES — PDFLama v6.3
   ══════════════════════════════════════════════════════════════════════ */

/* Hero */
.blog-hero {
  padding: var(--sp-16) 0 var(--sp-10);
  border-bottom: 1px solid var(--border-soft);
}
.blog-hero__meta {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap; margin-bottom: var(--sp-5);
}
.blog-hero__tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 14px; border-radius: var(--r-full);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--green-light); color: #065F46; border: 1px solid var(--green-mid);
}
[data-theme="dark"] .blog-hero__tag { color: #34D399; }
.blog-hero__date { font-size: 0.8rem; color: var(--text-muted); }
.blog-hero__read { font-size: 0.8rem; color: var(--text-muted); }
.blog-hero__dot { color: var(--text-faint); }
.blog-hero__title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.15;
  margin-bottom: var(--sp-5);
  color: var(--text);
}
.blog-hero__lead {
  font-size: clamp(1rem, 2vw, 1.175rem);
  color: var(--text-2); line-height: 1.75; max-width: 68ch;
  margin-bottom: var(--sp-6);
}
.blog-hero__author {
  display: flex; align-items: center; gap: var(--sp-3);
  padding-top: var(--sp-5); border-top: 1px solid var(--border-soft);
}
.blog-hero__avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green), #059669);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 0.95rem;
  color: #fff; flex-shrink: 0;
}
.blog-hero__author-name { font-size: 0.875rem; font-weight: 600; color: var(--text); }
.blog-hero__author-role { font-size: 0.78rem; color: var(--text-muted); }

/* Article layout */
.blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--sp-12);
  align-items: start;
  padding: var(--sp-12) 0 var(--sp-16);
}
.blog-body {
  min-width: 0;
}

/* Article prose */
.blog-body .prose { max-width: 68ch; }
.blog-body .prose h2 {
  font-size: 1.45rem; font-weight: 800;
  margin: var(--sp-10) 0 var(--sp-4);
  padding-top: var(--sp-6); border-top: 1px solid var(--border-soft);
  color: var(--text); letter-spacing: -0.02em;
}
.blog-body .prose h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.blog-body .prose h3 {
  font-size: 1.1rem; font-weight: 700;
  margin: var(--sp-7) 0 var(--sp-3);
  color: var(--text);
}
.blog-body .prose p {
  margin-bottom: var(--sp-5);
  font-size: 1rem; line-height: 1.8; color: var(--text-2);
}
.blog-body .prose ul, .blog-body .prose ol {
  margin: var(--sp-4) 0 var(--sp-6) var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.blog-body .prose ul li { list-style: disc; }
.blog-body .prose ol li { list-style: decimal; }
.blog-body .prose li { font-size: 0.9375rem; color: var(--text-2); line-height: 1.7; }
.blog-body .prose a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.blog-body .prose a:hover { opacity: 0.8; }
.blog-body .prose blockquote {
  border-left: 3px solid var(--green);
  padding: var(--sp-4) var(--sp-6);
  background: var(--surface);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  margin: var(--sp-6) 0;
}
.blog-body .prose blockquote p {
  font-size: 1.05rem; font-style: italic; color: var(--text-2); margin: 0;
}
.blog-body .prose strong { color: var(--text); font-weight: 700; }

/* Callout box in posts */
.blog-callout {
  display: flex; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  background: var(--green-light);
  border: 1px solid var(--green-mid);
  border-radius: var(--r-xl);
  margin: var(--sp-8) 0;
}
[data-theme="dark"] .blog-callout { background: var(--green-glow); }
.blog-callout__icon { font-size: 1.3rem; flex-shrink: 0; line-height: 1.5; }
.blog-callout p { font-size: 0.9375rem; color: var(--text-2); line-height: 1.7; margin: 0; }
.blog-callout strong { color: var(--text); }

/* Step list */
.blog-steps { display: flex; flex-direction: column; gap: var(--sp-4); margin: var(--sp-6) 0; }
.blog-step {
  display: flex; gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--canvas); border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.blog-step:hover { border-color: var(--green); box-shadow: 0 2px 12px var(--green-glow); }
.blog-step__num {
  width: 32px; height: 32px; flex-shrink: 0;
  background: var(--green); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 0.8rem; font-weight: 800;
  color: #fff;
}
.blog-step__title { font-size: 0.9375rem; font-weight: 700; margin-bottom: 4px; color: var(--text); }
.blog-step__desc { font-size: 0.875rem; color: var(--text-muted); line-height: 1.65; }

/* Table of contents (sidebar) */
.blog-sidebar { position: sticky; top: calc(var(--nav-h) + 24px); }
.blog-toc {
  background: var(--canvas); border: 1px solid var(--border-soft);
  border-radius: var(--r-xl); padding: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.blog-toc__title {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-faint);
  margin-bottom: var(--sp-3);
}
.blog-toc__list { display: flex; flex-direction: column; gap: 2px; }
.blog-toc__link {
  display: block; font-size: 0.84rem; color: var(--text-muted);
  padding: 5px 8px; border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
  line-height: 1.5;
}
.blog-toc__link:hover { color: var(--green); background: var(--surface); }
.blog-toc__link.active { color: var(--green); background: var(--green-glow); font-weight: 600; }

/* CTA box inside post */
.blog-cta-box {
  background: linear-gradient(135deg, #0F1929 0%, #0d2d1a 100%);
  border-radius: var(--r-2xl); padding: var(--sp-8) var(--sp-8);
  margin: var(--sp-10) 0;
  position: relative; overflow: hidden;
}
[data-theme="dark"] .blog-cta-box {
  background: linear-gradient(135deg, #050F0A 0%, #0A1F12 100%);
  border: 1px solid rgba(52,211,153,0.20);
}
.blog-cta-box::before {
  content: '';
  position: absolute; top: -40px; right: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(16,185,129,0.25) 0%, transparent 70%);
  pointer-events: none;
}
.blog-cta-box__badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--r-full);
  background: rgba(16,185,129,0.2); border: 1px solid rgba(16,185,129,0.35);
  font-size: 0.72rem; font-weight: 700; color: #6EE7B7;
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.blog-cta-box h3 {
  font-size: clamp(1.2rem, 3vw, 1.6rem); font-weight: 800;
  color: #fff; margin-bottom: var(--sp-3); letter-spacing: -0.025em;
}
.blog-cta-box p { font-size: 0.9375rem; color: rgba(255,255,255,0.7); line-height: 1.7; margin-bottom: var(--sp-6); }
.blog-cta-box .btn-primary {
  background: var(--green); color: #fff; border-color: var(--green);
  font-size: 0.9375rem; padding: 0.7em 1.6em;
}
.blog-cta-box .btn-primary:hover { background: var(--green-dark); border-color: var(--green-dark); }
.blog-cta-box .btn-ghost {
  color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.2);
}
.blog-cta-box .btn-ghost:hover { color: #fff; border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.08); }

/* Related posts */
.blog-related { padding: var(--sp-12) 0 var(--sp-16); border-top: 1px solid var(--border-soft); }
.blog-post-card {
  display: flex; flex-direction: column;
  background: var(--canvas); border: 1px solid var(--border-soft);
  border-radius: var(--r-2xl); overflow: hidden;
  transition: box-shadow var(--t-mid), transform var(--t-mid), border-color var(--t-mid);
  text-decoration: none; color: inherit;
}
.blog-post-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--green); }
.blog-post-card__img {
  height: 180px; background: linear-gradient(135deg, var(--surface-2) 0%, var(--green-light) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; position: relative; overflow: hidden;
}
.blog-post-card__img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(15,25,41,0.06));
}
.blog-post-card__body { padding: var(--sp-5); flex: 1; display: flex; flex-direction: column; }
.blog-post-card__tag {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--green); margin-bottom: var(--sp-2);
}
.blog-post-card__title {
  font-size: 0.9375rem; font-weight: 700; line-height: 1.4;
  color: var(--text); margin-bottom: var(--sp-2);
}
.blog-post-card__excerpt {
  font-size: 0.82rem; color: var(--text-muted); line-height: 1.6;
  margin-bottom: var(--sp-4); flex: 1;
}
.blog-post-card__footer {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.78rem; color: var(--text-faint);
  padding-top: var(--sp-3); border-top: 1px solid var(--border-soft);
}
.blog-post-card__arrow { color: var(--green); font-size: 1rem; }

/* Blog index cards */
.blog-index-card {
  display: flex; gap: var(--sp-5);
  background: var(--canvas); border: 1px solid var(--border-soft);
  border-radius: var(--r-2xl); padding: var(--sp-5);
  transition: box-shadow var(--t-mid), transform var(--t-mid), border-color var(--t-mid);
  text-decoration: none; color: inherit;
}
.blog-index-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--green); }
.blog-index-card__thumb {
  width: 100px; min-width: 100px; height: 90px; border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--surface-2), var(--green-light));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; flex-shrink: 0;
}
.blog-index-card__tag {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--green); margin-bottom: 5px;
}
.blog-index-card__title { font-size: 0.9375rem; font-weight: 700; line-height: 1.4; margin-bottom: 5px; color: var(--text); }
.blog-index-card__meta { font-size: 0.78rem; color: var(--text-faint); }

/* Blog responsive */
@media (max-width:900px) {
  .blog-layout { grid-template-columns: 1fr; }
  .blog-sidebar { position: static; }
  .blog-toc { display: none; }
}
@media (max-width:540px) {
  .blog-hero { padding: var(--sp-10) 0 var(--sp-8); }
  .blog-hero__title { font-size: 1.6rem; }
  .blog-body .prose h2 { font-size: 1.2rem; }
  .blog-cta-box { padding: var(--sp-6) var(--sp-5); }
  .blog-index-card__thumb { width: 72px; min-width: 72px; height: 72px; font-size: 1.4rem; }
  .blog-index-card__title { font-size: 0.875rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   LP PAGE ENHANCED STYLES — PDFLama v6.3
   ══════════════════════════════════════════════════════════════════════ */

/* LP hero variant */
.lp-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(22,179,100,0.08) 0%, transparent 70%);
  pointer-events: none;
}
[data-theme="dark"] .lp-hero::before {
  background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(34,197,94,0.07) 0%, transparent 70%);
}
.lp-hero__content { position: relative; z-index: 1; }
/* ── LP Hero text column ─────────────────────────────────────────────── */
.lp-hero__text .kw-hero-badge {
  margin-bottom: var(--sp-4);
}
.lp-hero__text h1 {
  margin-bottom: var(--sp-4);
  max-width: 640px;
}
.lp-hero__text > p {
  margin-bottom: 0;
  max-width: 520px;
}
.lp-hero__text .lp-hero-badges {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-5);
}


/* LP social proof strip */
.lp-social-strip {
  display: flex; align-items: center; gap: var(--sp-6);
  flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-6);
  background: var(--surface);
  border-radius: var(--r-2xl);
  border: 1px solid var(--border-soft);
  margin: var(--sp-6) 0;
}
.lp-social-strip__stat {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 0.84rem; color: var(--text-2);
}
.lp-social-strip__stat strong { font-weight: 700; color: var(--text); }
.lp-social-strip__stars { color: #F59E0B; letter-spacing: -1px; font-size: 0.9rem; }
.lp-divider-v { width: 1px; height: 24px; background: var(--border); flex-shrink: 0; }

/* LP features grid */
.lp-features-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-5);
  margin: var(--sp-8) 0;
}
.lp-feature-card {
  padding: var(--sp-5);
  background: var(--canvas); border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.lp-feature-card:hover { border-color: var(--green); box-shadow: 0 4px 20px var(--green-glow); }
.lp-feature-icon {
  width: 40px; height: 40px; border-radius: var(--r-lg);
  background: var(--green-light); display: flex; align-items: center;
  justify-content: center; margin-bottom: var(--sp-3); font-size: 1.1rem;
}
.lp-feature-card h3 { font-size: 0.9375rem; font-weight: 700; margin-bottom: 6px; color: var(--text); }
.lp-feature-card p { font-size: 0.84rem; color: var(--text-muted); line-height: 1.65; }

/* LP checklist */
.lp-check-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.lp-check-item {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  font-size: 0.9375rem; color: var(--text-2); line-height: 1.6;
}
.lp-check-icon {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px;
  background: var(--green-light); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.lp-check-icon svg { width: 11px; height: 11px; color: var(--green); }

/* LP comparison highlight */
.lp-vs-table {
  width: 100%; border-collapse: collapse;
  background: var(--canvas); border-radius: var(--r-xl);
  overflow: hidden; border: 1px solid var(--border-soft);
}
.lp-vs-table thead th {
  padding: var(--sp-4) var(--sp-5); text-align: center;
  font-size: 0.84rem; font-weight: 700; background: var(--surface);
  border-bottom: 1px solid var(--border-soft);
}
.lp-vs-table thead th:first-child { text-align: left; }
.lp-vs-table thead th.highlight {
  background: var(--green-light); color: #065F46;
}
[data-theme="dark"] .lp-vs-table thead th.highlight { color: #34D399; }
.lp-vs-table tbody td {
  padding: var(--sp-3) var(--sp-5); font-size: 0.875rem;
  border-bottom: 1px solid var(--border-soft); color: var(--text-2);
}
.lp-vs-table tbody td:first-child { color: var(--text); font-weight: 500; }
.lp-vs-table tbody td.yes { color: var(--green); font-weight: 700; text-align: center; }
.lp-vs-table tbody td.no { color: var(--error); text-align: center; }
.lp-vs-table tbody td.center { text-align: center; }
.lp-vs-table tbody tr:last-child td { border-bottom: none; }
.lp-vs-table tbody tr:hover td { background: var(--surface); }

/* LP final CTA section */
.lp-cta-section {
  background: linear-gradient(135deg, #0F1929, #0d2318);
  border-radius: var(--r-2xl); padding: var(--sp-12) var(--sp-10);
  text-align: center; position: relative; overflow: hidden;
  margin: var(--sp-12) 0;
}
[data-theme="dark"] .lp-cta-section { border: 1px solid rgba(34,197,94,0.15); }
.lp-cta-section::before {
  content: ''; position: absolute; top: -80px; left: 50%; transform: translateX(-50%);
  width: 400px; height: 300px;
  background: radial-gradient(ellipse, rgba(22,179,100,0.2), transparent 70%);
  pointer-events: none;
}
.lp-cta-section h2 {
  font-size: clamp(1.4rem, 3.5vw, 2.2rem); font-weight: 800;
  color: #fff; letter-spacing: -0.03em; margin-bottom: var(--sp-4);
  position: relative;
}
.lp-cta-section p {
  font-size: 1rem; color: rgba(255,255,255,0.7);
  max-width: 48ch; margin: 0 auto var(--sp-7);
  position: relative;
}
.lp-cta-section .cta-actions {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  flex-wrap: wrap; position: relative;
}
.lp-trust-badges {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-5);
  flex-wrap: wrap; margin-top: var(--sp-5); position: relative;
}
.lp-trust-badge {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.78rem; color: rgba(255,255,255,0.55);
}
.lp-trust-badge svg { color: rgba(22,179,100,0.8); }

/* LP responsive */
@media (max-width:768px) {
  .lp-features-grid { grid-template-columns: repeat(2,1fr); }
  .lp-social-strip { gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); }
  .lp-cta-section { padding: var(--sp-8) var(--sp-5); }
}
@media (max-width:540px) {
  .lp-features-grid { grid-template-columns: 1fr; }
  .lp-hero { padding: var(--sp-10) 0 var(--sp-8); }
  .lp-divider-v { display: none; }
  .lp-cta-section h2 { font-size: 1.35rem; }
}

/* ── Responsive: nav burger show at 768px ───────────────────────────── */
@media (max-width:768px) {
  .nav__burger { display: flex !important; }
  .nav__overlay.open { display: block; }
}

/* ── Drawer link SVG — constrain size regardless of attributes ───────── */
.nav__drawer .nav__link > svg,
.nav__drawer-links .nav__link > svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
}
/* nav__drawer .nav__link consolidated above */

/* ── LP index grid on homepage responsive ────────────────────────────── */
.lp-index-section [style*="grid-template-columns:repeat(4"] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width:900px) {
  .lp-index-section [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--sp-6) !important;
  }
}
@media (max-width:540px) {
  .lp-index-section [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: 1fr !important;
  }
  .related-lp-grid[style*="flex-direction:column"] {
    flex-direction: row !important;
    flex-wrap: wrap;
  }
}

/* ── LP hero pg-hero responsive ─────────────────────────────────────── */
@media (max-width:768px) {
  .lp-hero .pg-hero {
    grid-template-columns: 1fr !important;
    gap: var(--sp-8) !important;
  }
  .lp-hero .anim-scale-in { order: -1; }
}

/* ══════════════════════════════════════════════════════════════════════
   LP INDEX SECTION — "Popular PDF tool searches" with See More
   ══════════════════════════════════════════════════════════════════════ */

.lp-index-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-7);
}

.lp-col__title {
  font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border-soft);
}

.lp-col__more {
  margin-top: 4px;
  overflow: hidden;
}
.lp-col__more.is-open { display: flex !important; }

/* See More button */
.lp-see-more-btn {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: var(--sp-2);
  font-size: 0.78rem; font-weight: 600;
  color: var(--green);
  padding: 4px 0;
  background: none; border: none; cursor: pointer;
  transition: opacity var(--t-fast), gap var(--t-fast);
}
.lp-see-more-btn:hover { opacity: 0.75; }
.lp-see-more-icon {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}
.lp-see-more-btn[aria-expanded="true"] .lp-see-more-icon {
  transform: rotate(180deg);
}

/* Responsive */
@media (max-width: 1024px) {
  .lp-index-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-7) var(--sp-8); }
}
@media (max-width: 540px) {
  .lp-index-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .lp-col__more.is-open { flex-direction: row !important; flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════════════════
   GDPR COOKIE CONSENT BANNER
   ══════════════════════════════════════════════════════════════════════ */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9000;
  background: var(--canvas);
  border-top: 1px solid var(--border-soft);
  box-shadow: 0 -4px 32px rgba(15,25,41,0.12);
  padding: var(--sp-4) var(--sp-5);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
[data-theme="dark"] .cookie-banner { box-shadow: 0 -4px 32px rgba(0,0,0,0.4); }
.cookie-banner.visible { transform: translateY(0); }
.cookie-banner__inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: var(--sp-6);
  flex-wrap: wrap;
}
.cookie-banner__text {
  flex: 1; min-width: 260px;
  font-size: 0.84rem; color: var(--text-2); line-height: 1.65;
}
.cookie-banner__text a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner__actions {
  display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; flex-wrap: wrap;
}
.cookie-banner__accept {
  padding: 9px 22px; border-radius: var(--r-full);
  background: var(--green); color: #fff;
  font-size: 0.875rem; font-weight: 700;
  cursor: pointer; border: none;
  transition: background var(--t-fast), transform 0.15s;
}
.cookie-banner__accept:hover { background: var(--green-dark); transform: scale(1.03); }
.cookie-banner__decline {
  padding: 9px 18px; border-radius: var(--r-full);
  background: transparent; color: var(--text-muted);
  font-size: 0.875rem; font-weight: 600;
  cursor: pointer; border: 1.5px solid var(--border);
  transition: all var(--t-fast);
}
.cookie-banner__decline:hover { border-color: var(--text-faint); color: var(--text); }
@media (max-width: 540px) {
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__accept, .cookie-banner__decline { flex: 1; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PERFORMANCE & UX IMPROVEMENTS — v6.35
   ═══════════════════════════════════════════════════════════════════════ */

/* content-visibility removed — caused layout jump on async CSS load */
.cv-auto-tall {
    contain-intrinsic-size: auto 600px;
}

/* ── Utility classes replacing inline styles ─────────────────────────── */
.category-label {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.category-label__dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.category-label__text {
  font-family: var(--font-display); font-size: 0.73rem;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
}
.category-label__line {
  flex: 1; height: 1px; background: var(--border-soft);
}
.section-label-sm {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-faint);
  margin-bottom: var(--sp-3);
}
.grid-2col {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5);
}
.grid-3col {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5);
}
.grid-4col {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4);
}
@media (max-width: 1024px) {
  .grid-4col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .grid-2col, .grid-3col { grid-template-columns: 1fr; }
  .grid-4col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .grid-4col { grid-template-columns: 1fr; }
}

/* ── Upload zone accessible states ──────────────────────────────────── */
.upload-zone:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 4px;
  border-color: var(--green);
}
.upload-zone[aria-busy="true"] { pointer-events: none; opacity: 0.85; }

/* ── Hero animated file flow ─────────────────────────────────────────── */
@keyframes floatFile {
  0%, 100% { transform: translateY(0px) rotate(-3deg); }
  50%       { transform: translateY(-10px) rotate(-3deg); }
}
  to   { stroke-dashoffset: 0; }
}
@keyframes checkFade {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}
.hero-anim { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.hero-anim__file {
  animation: floatFile 3s ease-in-out infinite;
  filter: drop-shadow(0 8px 20px rgba(22,179,100,0.2));
}
.hero-anim__arrow { color: var(--green); opacity: 0.6; flex-shrink: 0; }
.hero-anim__check {
  animation: checkFade 0.6s 0.3s ease both;
  filter: drop-shadow(0 8px 20px rgba(22,179,100,0.3));
}

/* ── Video embed wrapper ─────────────────────────────────────────────── */
.video-embed {
  position: relative; padding-bottom: 56.25%; height: 0;
  overflow: hidden; border-radius: var(--r-2xl);
  background: var(--surface-1);
  box-shadow: var(--shadow-xl);
}
.video-embed iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: none;
}
.video-embed__placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: var(--sp-3);
  background: linear-gradient(135deg, var(--surface-2), var(--green-glow));
}

/* ── Social icons in footer ──────────────────────────────────────────── */
.footer__social {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.footer__social-link {
  width: 34px; height: 34px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-1); color: var(--text-muted);
  border: 1px solid var(--border-soft);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.footer__social-link:hover {
  background: var(--green-glow); color: var(--green);
  border-color: var(--green-mid); transform: translateY(-2px);
}
.footer__social-link svg { width: 16px; height: 16px; }

/* ── Use Cases section (consistent across all tool pages) ─────────────── */
.usecase-icon-wrap {
  width: 44px; height: 44px; border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-4); font-size: 1.35rem;
}

/* theme-toggle:hover consolidated in nav section above */

/* ── Scroll reveal — disable stagger on small screens ───────────────── */
@media (max-width: 540px) {
  .reveal.d1, .reveal.d2, .reveal.d3, .reveal.d4 {
    transition-delay: 0ms !important;
  }
}

/* ── PWA install banner ──────────────────────────────────────────────── */
.pwa-install-banner {
  position: fixed; bottom: var(--sp-5); left: 50%;
  transform: translateX(-50%) translateY(120%);
  z-index: 8500; width: min(460px, calc(100vw - var(--sp-8)));
  background: var(--canvas); border: 1px solid var(--border-soft);
  border-radius: var(--r-2xl); padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--shadow-xl);
  display: flex; align-items: center; gap: var(--sp-4);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pwa-install-banner.show { transform: translateX(-50%) translateY(0); }
.pwa-install-banner__icon {
  width: 44px; height: 44px; border-radius: var(--r-lg); flex-shrink: 0;
  background: var(--green); display: flex; align-items: center; justify-content: center;
}
.pwa-install-banner__text { flex: 1; min-width: 0; }
.pwa-install-banner__title { font-weight: 700; font-size: 0.875rem; margin-bottom: 2px; }
.pwa-install-banner__sub { font-size: 0.78rem; color: var(--text-muted); }
.pwa-install-banner__actions { display: flex; gap: var(--sp-2); flex-shrink: 0; }
.pwa-install-dismiss {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); transition: background var(--t-fast);
}
.pwa-install-dismiss:hover { background: var(--surface-1); color: var(--text); }

/* ── Lazy load fade-in ───────────────────────────────────────────────── */
img[loading="lazy"], iframe[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease;
}
img[loading="lazy"].loaded, iframe[loading="lazy"].loaded {
  opacity: 1;
}

/* ── Time-to-complete badge on upload zone ───────────────────────────── */
.upload-zone__time svg { color: var(--green); flex-shrink: 0; }

/* ── Compare Table — final consolidated version ──────────────────────── */
.compare-table th {
  background: var(--surface-1); color: var(--text-2);
  font-family: var(--font-display); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.03em; text-transform: uppercase;
  padding: var(--sp-3) var(--sp-5); text-align: left;
  border-bottom: 2px solid var(--border);
}
.compare-table th:first-child { border-radius: var(--r-md) 0 0 0; }
.compare-table th:last-child  { border-radius: 0 var(--r-md) 0 0; }
.compare-table th.hl  { color: var(--green); }
.compare-table td {
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-muted); vertical-align: middle;
}
.compare-table tr:last-child td { border-bottom: none; }
.compare-table tr:hover td { background: var(--surface); }
.compare-table td:first-child { color: var(--text); font-weight: 600; }
.compare-table .yes     { color: var(--green); font-weight: 700; }
.compare-table .no      { color: var(--text-faint); }
.compare-table .partial { color: var(--text-muted); }
.compare-table .hl      { background: var(--surface-2) !important; }
.compare-table td.center { text-align: center; }
[data-theme="dark"] .compare-table .hl { background: rgba(34,197,94,0.06) !important; }

/* ── Usecase grid — final consolidated version ───────────────────────── */
.usecase-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5);
}
.usecase-card {
  background: var(--canvas); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: var(--sp-6);
  transition: box-shadow var(--t-mid), transform var(--t-mid), border-color var(--t-mid);
}
.usecase-card:hover {
  box-shadow: var(--shadow-md); transform: translateY(-2px);
  border-color: var(--green);
}
.usecase-icon {
  width: 44px; height: 44px; border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-4); font-size: 1.35rem;
}
@media (max-width: 768px) {
  .usecase-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .usecase-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
}

/* ═══════════════════════════════════════════════════════════════════════
   COMPREHENSIVE RESPONSIVE & OVERFLOW FIXES — v6.36
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Global overflow containment ─────────────────────────────────────── */
html { overflow-x: hidden; }
body { overflow-x: hidden; } /* max-width:100vw removed — causes scrollbar-width layout bug */

/* Every section is overflow-safe */
section, header, footer, main, article, aside { overflow-x: hidden; }

/* ── Tables — always scroll inside wrapper, never overflow page ──────── */
.table-wrap {
  width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: var(--r-xl);
}
.table-wrap::-webkit-scrollbar { height: 4px; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* compare-table: fluid, never fixed-width */
.compare-table {
  min-width: 0; /* override any lingering min-width */
  width: 100%;
}
@media (max-width: 600px) {
  .compare-table { font-size: 0.72rem; }
  .compare-table th, .compare-table td { padding: var(--sp-2) var(--sp-3); }
}

/* lp-vs-table mobile */
.lp-vs-table { width: 100%; overflow: hidden; }
@media (max-width: 600px) {
  .lp-vs-table { font-size: 0.75rem; }
  .lp-vs-table thead th, .lp-vs-table tbody td { padding: var(--sp-2) var(--sp-3); }
}

/* ── Hero radial backgrounds — contain them ─────────────────────────── */
.hero-bg-contain {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
}
.hero-bg-contain > * { max-width: 100%; }

/* ── Nav overlay z-index — drawer is now on body, so higher z-index OK── */
/* nav__overlay z-index consolidated above */
.nav__drawer  { z-index: 9998; }

/* ── LP hero pg-hero responsive ──────────────────────────────────────── */
.lp-hero .pg-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  align-items: start;
}
@media (max-width: 900px) {
  .lp-hero .pg-hero { grid-template-columns: 1fr; gap: var(--sp-8); }
  .lp-hero .anim-scale-in { order: -1; }
}
@media (max-width: 540px) {
  .lp-hero .pg-hero { gap: var(--sp-6); }
}

/* ── pg-hero inline style override ──────────────────────────────────── */
/* Catches hardcoded grid in HTML: style="grid-template-columns:1fr 1fr" */
.pg-hero[style*="grid-template-columns:1fr 1fr"] {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 768px) {
  .pg-hero[style*="grid-template-columns:1fr 1fr"],
  .pg-hero[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: var(--sp-8) !important;
  }
  .pg-hero[style*="grid-template-columns:1fr 1fr"] > .anim-scale-in,
  .pg-hero[style*="grid-template-columns: 1fr 1fr"] > .anim-scale-in {
    order: -1;
  }
}

/* ── Postprocess bar — full-width on mobile ──────────────────────────── */
@media (max-width: 540px) {
  .postprocess-bar { padding: var(--sp-3) var(--sp-3); }
  .postprocess-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
  .postprocess-btn { width: 100%; justify-content: center; font-size: 0.72rem; padding: 7px 8px; }
}
@media (max-width: 380px) {
  .postprocess-actions { grid-template-columns: 1fr; }
}

/* ── Upload sources — wraps cleanly on narrow screens ───────────────── */
@media (max-width: 480px) {
  .upload-sources { gap: var(--sp-1); padding-top: var(--sp-3); }
  .upload-divider { width: 100%; text-align: center; margin-bottom: var(--sp-1); }
  .upload-source-btn { font-size: 0.72rem; padding: 5px 8px; }
}

/* ── Stat pills — wrap gracefully ────────────────────────────────────── */
.stat-pills-row {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-8);
}
@media (max-width: 540px) {
  .stat-pills-row { gap: var(--sp-2); margin-top: var(--sp-5); }
  .stat-pill { font-size: 0.76rem; padding: var(--sp-1) var(--sp-3); }
}

/* ── Hero animation — scale down on mobile ───────────────────────────── */
.hero-anim { flex-wrap: wrap; gap: 12px; }
@media (max-width: 540px) {
  .hero-anim { gap: 8px; }
  .hero-anim__file svg { width: 52px; height: 64px; }
  .hero-anim__check > div { width: 52px; height: 52px; }
  .hero-anim__arrow svg { width: 20px; height: 20px; }
}

/* ── LP social strip — stack on mobile ───────────────────────────────── */
@media (max-width: 600px) {
  .lp-social-strip {
    flex-direction: column; align-items: flex-start;
    gap: var(--sp-3); padding: var(--sp-4);
  }
  .lp-divider-v { display: none; }
}

/* ── LP features grid ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .lp-features-grid { grid-template-columns: 1fr; }
}

/* ── LP CTA section ──────────────────────────────────────────────────── */
@media (max-width: 540px) {
  .lp-cta-section { padding: var(--sp-8) var(--sp-4); }
  .lp-cta-section h2 { font-size: 1.3rem; }
  .lp-trust-badges { gap: var(--sp-3); }
}

/* ── Blog layout ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .blog-layout { gap: var(--sp-8); }
  .blog-cta-box { padding: var(--sp-5) var(--sp-4); }
  .blog-cta-box h3 { font-size: 1.1rem; }
  .blog-cta-box .btn-primary, .blog-cta-box .btn-ghost { width: 100%; justify-content: center; }
}

/* ── Cookie banner ────────────────────────────────────────────────────── */
@media (max-width: 540px) {
  .cookie-banner { padding: var(--sp-4) var(--sp-3); }
  .cookie-banner__inner { gap: var(--sp-3); }
}

/* ── Breadcrumb — prevent overflow ──────────────────────────────────── */
.breadcrumb { flex-wrap: wrap; row-gap: 4px; max-width: 100%; }
.breadcrumb span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }

/* ── Footer grid — prevent overflow ─────────────────────────────────── */
@media (max-width: 400px) {
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .footer__bottom-links { flex-wrap: wrap; }
}

/* ── Section padding tighter on very small screens ───────────────────── */
@media (max-width: 380px) {
  .section { padding: var(--sp-10) 0; }
  .section-sm { padding: var(--sp-6) 0; }
  .container, .container-sm, .container-md { padding: 0 var(--sp-3); }
}

/* ── All images and media responsive ────────────────────────────────── */
img, video, svg, canvas, iframe { max-width: 100%; }
.video-embed { max-width: 100%; }

/* ── PWA banner mobile ───────────────────────────────────────────────── */
@media (max-width: 480px) {
  .pwa-install-banner { flex-wrap: wrap; padding: var(--sp-3); }
  .pwa-install-banner__actions { width: 100%; }
  #pwa-install-btn { flex: 1; }
}

/* ── Drawer always above everything when moved to body ───────────────── */
body > .nav__drawer {
  z-index: 9998;
}
body > .nav__overlay {
  z-index: 9997;
}

/* ── LP hero grid — replaces inline style for reliable responsive behavior ── */
.lp-pg-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  align-items: start;
}
@media (max-width: 900px) {
  .lp-pg-hero { grid-template-columns: 1fr; gap: var(--sp-8); }
  .lp-pg-hero > .anim-scale-in { order: -1; }
}
@media (max-width: 540px) {
  .lp-pg-hero { gap: var(--sp-5); }
}

/* ══════════════════════════════════════════════════════════════════════
   LP HERO — COMPLETE SPACING & LAYOUT SYSTEM v6.37
   ══════════════════════════════════════════════════════════════════════ */

/* LP hero section — corrected padding for all screens */
.lp-hero {
  padding: var(--sp-12) 0 var(--sp-10);
}
@media (max-width: 768px) {
  .lp-hero { padding: var(--sp-10) 0 var(--sp-8); }
}
@media (max-width: 540px) {
  .lp-hero { padding: var(--sp-8) 0 var(--sp-6); }
}

/* Breadcrumb spacing inside LP hero */
.lp-hero .breadcrumb {
  margin-bottom: var(--sp-5);
}

/* LP hero text column — complete layout */
.lp-hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-top: var(--sp-2);
}
.lp-hero__text .kw-hero-badge {
  margin-bottom: var(--sp-4);
}
.lp-hero__text h1.t-h1,
.lp-hero__text .t-h1 {
  margin-bottom: var(--sp-4);
  max-width: 640px;
  width: 100%;
}
.lp-hero__text p.t-lg,
.lp-hero__text .t-lg {
  margin-bottom: 0;
  max-width: 520px;
  width: 100%;
}
/* Badge row */
.lp-hero-badges {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-5);
}
@media (max-width: 540px) {
  .lp-hero__text h1.t-h1 { font-size: clamp(1.4rem, 5.5vw, 1.9rem); }
  .lp-hero-badges { margin-top: var(--sp-3); gap: var(--sp-1); }
}

/* Upload zone column in LP hero */
.lp-pg-hero > .anim-scale-in {
  /* Right column — upload zone wrapper */
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   UPLOAD ZONE — COMPLETE SPACING SYSTEM v6.37
   (overrides any leftover inline styles on upload zone elements)
   ══════════════════════════════════════════════════════════════════════ */

/* Full reset of upload zone inner spacing — everything controlled here */
.upload-zone > * {
  /* No extra margins from outside — each element manages its own below-margin */
  margin-left: 0;
  margin-right: 0;
}

.upload-zone__icon {
  margin-bottom: var(--sp-4) !important;
  margin-top: 0 !important;
  /* Explicitly sized for all contexts */
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}
.upload-zone__title {
  margin-bottom: var(--sp-2) !important;
  margin-top: 0 !important;
  font-size: 1.05rem;
}
.upload-zone__sub {
  margin-bottom: var(--sp-4) !important;
  margin-top: 0 !important;
}
.upload-zone__privacy {
  margin-bottom: var(--sp-3) !important;
  margin-top: 0 !important;
}
.upload-zone__time {
  margin-bottom: var(--sp-3) !important;
  margin-top: 0 !important;
}
.upload-zone .badge {
  margin-bottom: var(--sp-4) !important;
  margin-top: 0 !important;
}
.upload-sources {
  margin-top: 0 !important; /* top margin removed — badge provides spacing above */
  width: 100%;
}

/* Upload zone responsive */
@media (max-width: 768px) {
  .upload-zone {
    padding: var(--sp-8) var(--sp-6) var(--sp-6);
    border-radius: var(--r-xl);
  }
  .upload-zone__icon { width: 50px; height: 50px; margin-bottom: var(--sp-3) !important; }
  .upload-zone__title { font-size: 1rem; }
}
@media (max-width: 540px) {
  .upload-zone {
    padding: var(--sp-6) var(--sp-4) var(--sp-5);
    border-radius: var(--r-lg);
  }
  .upload-zone__icon { width: 44px; height: 44px; }
  .upload-zone__icon svg { width: 22px !important; height: 22px !important; }
  .upload-zone__title { font-size: 0.9375rem; margin-bottom: var(--sp-1) !important; }
  .upload-zone__sub { font-size: 0.8rem; margin-bottom: var(--sp-3) !important; }
  .upload-zone__privacy { font-size: 0.7rem; padding: 3px 10px; margin-bottom: var(--sp-2) !important; }
  .upload-zone__time { font-size: 0.7rem; margin-bottom: var(--sp-2) !important; }
  .upload-zone .badge { font-size: 0.7rem; margin-bottom: var(--sp-3) !important; }
  .upload-sources { gap: var(--sp-1); padding-top: var(--sp-3); }
  .upload-source-btn { font-size: 0.7rem; padding: 5px 8px; }
  .upload-divider { font-size: 0.65rem; }
}
@media (max-width: 380px) {
  .upload-zone {
    padding: var(--sp-5) var(--sp-3) var(--sp-4);
  }
  .upload-source-btn { padding: 4px 6px; font-size: 0.65rem; }
}

/* Save options in result state */
.save-options {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  margin-top: var(--sp-4);
}
.save-option-btn {
  flex: 1;
  min-width: 130px;
  max-width: 200px;
}

/* Job status — single card with animated pane swap */
.status-card__viewport {
  display: grid;
  min-height: 220px;
}
.status-card__pane {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition:
    opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.38s;
}
.status-card__pane.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
.status-card__pane--error .card {
  margin: 0;
}
.status-error-panel {
  text-align: center;
  padding: var(--sp-2) 0;
}
.status-error-panel__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--sp-3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.status-error-panel__title {
  display: block;
  color: #991b1b;
  margin-bottom: var(--sp-2);
}
.status-error-panel__text {
  margin: 0 0 var(--sp-4);
  font-size: 0.9rem;
  line-height: 1.45;
  color: #7f1d1d;
}
.status-error-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
}
@media (max-width: 400px) {
  .save-option-btn { min-width: 100%; max-width: 100%; flex: none; }
}

/* Postprocess bar improvements */
.postprocess-bar {
  padding: var(--sp-4) var(--sp-5);
}
.postprocess-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.postprocess-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: var(--r-md);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-2);
  border: 1.5px solid var(--border);
  background: var(--canvas);
  cursor: pointer;
  transition: all var(--t-fast);
  white-space: nowrap;
}
.postprocess-btn:hover {
  border-color: var(--green);
  color: var(--green);
  background: var(--green-glow);
}
@media (max-width: 540px) {
  .postprocess-btn { font-size: 0.72rem; padding: 6px 9px; }
}
@media (max-width: 380px) {
  .postprocess-actions { display: grid; grid-template-columns: repeat(2, 1fr); }
  .postprocess-btn { justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MEGA-MENU NAV — ALL PDF TOOLS  (ilovepdf-style)   v6.38
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Dropdown trigger wrapper ─────────────────────────────────────────── */
.nav__dropdown {
  position: relative;
}
/* All-tools wrapper — trigger already spans full nav height via height:var(--nav-h) on .nav__dropdown-trigger */
.nav__dropdown--all {
  display: flex;
  align-items: stretch;
}

/* Trigger button / link */
.nav__dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: var(--sp-2) var(--sp-3);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: var(--r-md);
  cursor: pointer;
  background: none;
  border: none;
  white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast);
  height: var(--nav-h);
}
.nav__dropdown-trigger:hover,
.nav__dropdown.open .nav__dropdown-trigger {
  color: var(--text);
  background: var(--surface-1);
}
.nav__dropdown-trigger svg.chevron {
  width: 12px; height: 12px;
  transition: transform 0.22s ease;
  flex-shrink: 0;
}
.nav__dropdown.open .nav__dropdown-trigger svg.chevron {
  transform: rotate(180deg);
}

/* ── All-tools trigger — highlighted ──────────────────────────────────── */
.nav__dropdown--all .nav__dropdown-trigger {
  color: var(--green);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.nav__dropdown--all .nav__dropdown-trigger:hover,
.nav__dropdown--all.open .nav__dropdown-trigger {
  color: var(--green);
  background: var(--green-glow);
}

/* ── Small dropdown (Convert PDF) ─────────────────────────────────────── */
.nav__dropdown-menu {
  display: none;
  position: absolute;
  top: calc(var(--nav-h) - 4px);
  left: 0;
  min-width: 220px;
  background: var(--canvas);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  padding: var(--sp-2);
  box-shadow: 0 8px 40px rgba(15,25,41,0.12), 0 2px 8px rgba(15,25,41,0.06);
  z-index: 9000;
  animation: menuSlideIn 0.18s ease both;
}
[data-theme="dark"] .nav__dropdown-menu {
  box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}
.nav__dropdown.open .nav__dropdown-menu { display: block; }

@keyframes menuSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Small dropdown item */
.nav__dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 8px 10px;
  border-radius: var(--r-md);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-2);
  transition: background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.nav__dropdown-item:hover {
  background: var(--surface-1);
  color: var(--text);
}
.nav__dropdown-item__icon {
  width: 26px; height: 26px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nav__dropdown-item__icon svg { width: 14px; height: 14px; }

/* ── MEGA MENU ─────────────────────────────────────────────────────────── */
.nav__mega {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  background: var(--canvas);
  border-bottom: 1px solid var(--border-soft);
  box-shadow: 0 12px 48px rgba(15,25,41,0.10), 0 2px 8px rgba(15,25,41,0.04);
  z-index: 8999;
  animation: menuSlideIn 0.2s ease both;
  overflow-x: hidden;
}
[data-theme="dark"] .nav__mega {
  box-shadow: 0 12px 48px rgba(0,0,0,0.35);
}
.nav__dropdown--all.open .nav__mega { display: block; }

.nav__mega__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-7);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-6) var(--sp-5);
}

/* ── Mega category column ─────────────────────────────────────────────── */
.nav__mega__col {}

.nav__mega__cat {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border-soft);
}

/* ── Mega tool item ───────────────────────────────────────────────────── */
.nav__mega__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: var(--r-md);
  color: var(--text-2);
  font-size: 0.84rem;
  font-weight: 500;
  transition: background var(--t-fast), color var(--t-fast);
  margin-bottom: 1px;
}
.nav__mega__item:hover {
  background: var(--surface-1);
  color: var(--text);
}
.nav__mega__item:hover .nav__mega__icon {
  transform: scale(1.08);
}

/* Colored square icons — matching ilovepdf style */
.nav__mega__icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.nav__mega__icon svg { width: 15px; height: 15px; stroke: #fff; fill: none; }

/* Icon colour palette — one per category */
.icon-red    { background: #E74C3C; }
.icon-orange { background: #E67E22; }
.icon-yellow { background: #F39C12; }
.icon-green  { background: #10B981; }
.icon-teal   { background: #1ABC9C; }
.icon-blue   { background: #3498DB; }
.icon-indigo { background: #5C6BC0; }
.icon-purple { background: #9B59B6; }
.icon-pink   { background: #E91E63; }
.icon-dark   { background: #34495E; }

/* ── Mega menu overlay (closes on click-outside) ──────────────────────── */
.nav__mega-overlay {
  display: none;
  position: fixed;
  inset: 0;
  top: var(--nav-h);
  z-index: 8998;
  background: rgba(15,25,41,0.18);
  -webkit-backdrop-filter: blur(1px);

  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}
.nav__dropdown--all.open ~ .nav__mega-overlay,
.nav__mega-overlay.visible { display: block; }

/* ── Responsive — hide mega triggers at ≤1024px ───────────────────────── */
@media (max-width: 1024px) {
  .nav__dropdown--all { display: none; }
  .nav__dropdown-convert { display: none; }
}
/* ── Responsive — ensure nav links don't wrap ────────────────────────── */
@media (max-width: 1180px) {
  .nav__mega__inner { grid-template-columns: repeat(4, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════
   MEGA MENU — DETACHED BODY-LEVEL PANEL  v6.39
   (Fixes nav backdrop-filter stacking context — panel is a body child)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Overlay behind mega panel ───────────────────────────────────────── */
.mega-overlay-detached {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9990;
  background: rgba(15, 25, 41, 0.22);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: fadeIn 0.18s ease both;
}
.mega-overlay-detached.open { display: block; }

/* ── Detached mega panel ─────────────────────────────────────────────── */
.mega-panel-detached {
  display: none;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 32px);
  /* top is set by JS based on nav position */
  z-index: 9991;
  background: var(--canvas);
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  border-top: 3px solid var(--green);
  box-shadow:
    0 4px 6px rgba(15,25,41,0.04),
    0 20px 60px rgba(15,25,41,0.13),
    0 4px 16px rgba(15,25,41,0.07);
}
[data-theme="dark"] .mega-panel-detached {
  box-shadow:
    0 4px 6px rgba(0,0,0,0.25),
    0 20px 60px rgba(0,0,0,0.50),
    0 4px 16px rgba(0,0,0,0.30);
}
.mega-panel-detached.open {
  display: block;
  animation: megaSlideDown 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes megaSlideDown {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(0.99); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0)     scale(1);    }
}

/* Inner grid */
.mega-panel-detached .nav__mega__inner {
  line-height: normal;
  padding: 28px 32px 32px;
  display: grid;
  grid-template-columns: repeat(6, max-content);
  gap: 8px 24px;
}

/* ── Category heading ─────────────────────────────────────────────────── */
.mega-panel-detached .nav__mega__cat {
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 12px;
  padding: 0 4px 10px;
  border-bottom: 1.5px solid var(--border-soft);
  display: flex;
  align-items: center;
  gap: 6px;
}
.mega-panel-detached .nav__mega__cat::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}

/* ── Tool row ─────────────────────────────────────────────────────────── */
.mega-panel-detached .nav__mega__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-2);
  transition: background 0.14s, color 0.14s, box-shadow 0.14s;
  margin-bottom: 3px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.mega-panel-detached .nav__mega__item:hover {
  background: var(--surface-1);
  color: var(--text);
  border-color: var(--border-soft);
  box-shadow: 0 2px 8px rgba(15,25,41,0.06);
}
.mega-panel-detached .nav__mega__item:hover .nav__mega__icon {
  transform: scale(1.12);
  box-shadow: 0 4px 14px rgba(0,0,0,0.20);
}

/* ── Coloured square icon ─────────────────────────────────────────────── */
.mega-panel-detached .nav__mega__icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.14);
}
.mega-panel-detached .nav__mega__icon svg {
  width: 16px;
  height: 16px;
}

/* ── Nav dropdown trigger chevron ──────────────────────────────────────── */
.nav__dropdown--all.open .nav__dropdown-trigger .chevron {
  transform: rotate(180deg);
}
.nav__dropdown-convert.open .nav__dropdown-trigger .chevron {
  transform: rotate(180deg);
}

/* ── Small dropdown stays attached (no stacking context issue) ─────────── */
/* Trigger height fills nav */
.nav__dropdown-convert .nav__dropdown-trigger {
  height: var(--nav-h);
}
/* Menu absolutely positions below trigger */
.nav__dropdown-convert .nav__dropdown-menu {
  top: calc(var(--nav-h) - 2px);
}

/* ── Responsive breakpoints for mega ──────────────────────────────────── */
@media (max-width: 1280px) {
  .mega-panel-detached .nav__mega__inner {
    grid-template-columns: repeat(4, 1fr);
    padding: 24px 24px 28px;
    gap: 8px 20px;
  }
}
@media (max-width: 900px) {
  .mega-panel-detached .nav__mega__inner {
    grid-template-columns: repeat(3, 1fr);
    padding: 20px 18px 24px;
    gap: 8px 16px;
  }
}
@media (max-width: 680px) {
  .mega-panel-detached .nav__mega__inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 14px;
    padding: 18px 16px 22px;
  }
}
@media (max-width: 440px) {
  .mega-panel-detached .nav__mega__inner {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 16px 14px 20px;
  }
  .mega-panel-detached .nav__mega__item { font-size: 0.84rem; }
}

/* ── Column separators ────────────────────────────────────────────────── */
.mega-panel-detached .nav__mega__col {
  border-right: 1px solid var(--border-soft);
  padding-right: 24px;
}
.mega-panel-detached .nav__mega__col:last-child {
  border-right: none;
  padding-right: 0;
}

/* ── Footer strip ─────────────────────────────────────────────────────── */
.mega-panel-detached::after {
  content: 'All tools run 100% in your browser — files never leave your device';
  display: block;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  padding: 10px 32px 14px;
  border-top: 1px solid var(--border-soft);
  background: var(--surface);
}

/* ── Hide desktop mega/convert triggers on mobile ─────────────────────── */
@media (max-width: 1024px) {
  .nav__dropdown--all,
  .nav__dropdown-convert { display: none !important; }
}


/* ── Mega menu: pure open/close — no conflicting opacity rules ──────────── */
/* The panel uses display:none/block + animation for open, instant hide for close */
/* Hover safety gap: invisible overlay below the nav bar so the panel doesn't  */
/* vanish when the mouse crosses the 4px border gap between nav and panel     */
.nav__dropdown--all:not(.open) .nav__dropdown-trigger:hover ~ * { cursor: default; }

/* ── Hero landscape phone override ─────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-v15 { min-height: auto; padding: 2.5rem 0 2rem; }
}

/* ── App Download Buttons ──────────────────────────────────────────── */

/* ── App store button base ─────────────────────────────────────────── */
.app-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 12px;
  background: #000;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.12);
  text-decoration: none;
  transition: transform 0.18s cubic-bezier(.22,1,.36,1),
              box-shadow 0.18s cubic-bezier(.22,1,.36,1),
              background 0.18s;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.app-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  background: #1a1a1a;
}
.app-btn:active { transform: translateY(0) scale(0.99); }
.app-btn__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-btn__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.app-btn__sub {
  font-size: 0.62rem;
  font-weight: 400;
  opacity: 0.75;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.app-btn__name {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Light theme override */
[data-theme=light] .app-btn {
  background: #1a1a1a;
  border-color: rgba(0,0,0,0.08);
}
[data-theme=light] .app-btn:hover {
  background: #000;
  box-shadow: 0 8px 28px rgba(0,0,0,0.2);
}

/* ── Hero app row ───────────────────────────────────────────────────── */
.hero-app-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border-soft);
}
.hero-app-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* ── App promo strip (full-width section) ───────────────────────────── */
.app-strip {
  background: var(--surface);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: 3.5rem 0;
}
.app-strip__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.app-strip__copy { flex: 1; min-width: 260px; }
.app-strip__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.75rem;
}
.app-strip__title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 0.6rem;
}
.app-strip__sub {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 420px;
}
.app-strip__btns {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.app-strip__phones {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.app-strip__phone {
  width: 58px;
  height: 96px;
  border-radius: 12px;
  background: var(--surface-1);
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.app-strip__phone::before {
  content: '';
  position: absolute;
  top: 8px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 4px;
  background: var(--border);
  border-radius: 9999px;
}
.app-strip__phone-icon {
  color: var(--green);
  margin-top: 4px;
}

/* ── Footer app buttons ─────────────────────────────────────────────── */
.footer__app-btns {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 1.25rem;
}
.footer__app-btns .app-btn {
  padding: 9px 16px;
  border-radius: 10px;
}
.footer__app-btns .app-btn__name { font-size: 0.84rem; }
.footer__app-btns .app-btn__icon { width: 22px; height: 22px; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .app-strip__inner { flex-direction: column; align-items: flex-start; }
  .app-strip__phones { display: none; }
  .hero-app-row { gap: 10px; }
  .hero-app-label { width: 100%; text-align: center; }
  .hero-app-row .app-btn { flex: 1; min-width: 140px; justify-content: center; }
}
@media (max-width: 400px) {
  .hero-app-row { flex-direction: column; align-items: stretch; }
  .hero-app-row .app-btn { justify-content: center; }
}

/* ── How-To Section ────────────────────────────────────────────────── */

.howto-section{padding:4.5rem 0;background:var(--surface);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}
.howto-hd{text-align:center;margin-bottom:3rem}
.howto-hd h2{font-family:var(--font-display);font-size:clamp(1.4rem,2.5vw,2rem);font-weight:800;letter-spacing:-0.03em;color:var(--text);margin-top:.4rem}
.howto-hd p{font-size:.9375rem;color:var(--text-muted);margin-top:.6rem}
.howto-grid{display:grid;grid-template-columns:1fr 32px 1fr 32px 1fr;align-items:start;gap:0}
.howto-arrow{display:flex;align-items:flex-start;justify-content:center;padding-top:64px;color:var(--text-faint)}
.howto-step{display:flex;flex-direction:column}
.howto-step__num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--green);color:#fff;font-family:var(--font-display);font-size:.78rem;font-weight:800;border-radius:50%;margin-bottom:1rem;box-shadow:0 0 0 5px var(--green-glow);flex-shrink:0}
[data-theme=dark] .howto-step__num{color:#0D1117}
.howto-browser{background:var(--canvas);border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:var(--shadow-md);margin-bottom:1.1rem;transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s cubic-bezier(.22,1,.36,1)}
.howto-browser:hover{transform:translateY(-3px) scale(1.01);box-shadow:var(--shadow-lg)}
.howto-browser__bar{display:flex;align-items:center;gap:6px;padding:7px 11px;background:var(--surface-1);border-bottom:1px solid var(--border-soft)}
.howto-browser__dots{display:flex;gap:4px;flex-shrink:0}
.howto-browser__dot{width:8px;height:8px;border-radius:50%;background:var(--border)}
.howto-browser__dot:nth-child(1){background:#FF5F57}
.howto-browser__dot:nth-child(2){background:#FEBC2E}
.howto-browser__dot:nth-child(3){background:#28C840}
.howto-browser__url{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:3px 9px;font-size:.65rem;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.howto-browser__screen{aspect-ratio:16/9;background:var(--canvas);overflow:hidden}
.howto-browser__screen svg{width:100%;height:100%;display:block}
.howto-step__title{font-family:var(--font-display);font-size:.94rem;font-weight:700;color:var(--text);margin-bottom:.3rem}
.howto-step__desc{font-size:.84rem;color:var(--text-muted);line-height:1.6}
.howto-cta{text-align:center;margin-top:2.5rem}
@media(max-width:860px){
  .howto-grid{grid-template-columns:1fr;gap:2.2rem}
  .howto-arrow{display:none}
  .howto-step{display:grid;grid-template-columns:36px 1fr;grid-template-rows:auto auto auto;column-gap:1rem;row-gap:.35rem;align-items:start}
  .howto-step__num{grid-row:1;grid-column:1;margin-bottom:0}
  .howto-browser{grid-row:1/4;grid-column:2;margin-bottom:0}
  .howto-step__title{grid-column:2;font-size:.85rem;margin-bottom:.15rem}
  .howto-step__desc{grid-column:2;font-size:.78rem;line-height:1.5;color:var(--text-muted)}
}
@media(max-width:500px){
  .howto-step{display:flex;flex-direction:column;gap:.8rem}
  .howto-step__num{margin-bottom:0}
  .howto-step__title,.howto-step__desc{display:block}
  .howto-browser{margin-bottom:0}
}


/* ── Hero min-height — landscape phone fix ───────────────────────────── */
@media (max-width: 820px) and (orientation: landscape) {
  .hero-v15 { min-height: auto !important; padding: 2.5rem 0 2rem !important; }
}
@media (max-width: 768px) {
  .hero-v15 { min-height: auto !important; padding: 3rem 0 2.5rem; }
}

/* ── How-to step text — show on all sizes (was hidden 500-860px) ───── */
@media (max-width: 860px) and (min-width: 501px) {
  .howto-step__title,
  .howto-step__desc { display: block !important; }
}

/* ── Nav breakpoint — explicit 820px to align with critical CSS ───── */
@media (max-width: 820px) {
  .nav__links              { display: none !important; }
  .nav__actions .btn       { display: none !important; }
  .nav__burger             { display: flex !important; }
  .nav__dropdown--all      { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════
   V15 HERO SECTION — Variable aliases and animations
   ═══════════════════════════════════════════════════════════════════════ */
:root,[data-theme=light]{
  --accent:var(--green); --accent-d:var(--green-dark);
  --bg-3:var(--surface-1); --green-glow-strong:rgba(22,179,100,.3);
}
[data-theme=dark]{
  --accent:var(--green); --accent-d:var(--green-dark);
  --bg-3:var(--surface-1); --green-glow-strong:rgba(34,197,94,.3);
}
.hero-v15 {
  position:relative; overflow:hidden;
  padding:5.5rem 0 4.5rem;
  display:flex; align-items:center;
}
.hero-metric {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:1rem .75rem .85rem;
  text-align:center;
  transition:border-color .18s,transform .18s;
}
.hero-metric:hover { border-color:var(--green-mid); transform:translateY(-2px); }
.hm-num {
  font-family:var(--font-display); font-size:1.55rem; font-weight:800;
  color:var(--green); line-height:1.1; letter-spacing:-.04em; margin-bottom:.2rem;
}
.hm-label { font-size:.74rem; font-weight:600; color:var(--text); margin-bottom:.15rem; }
.hm-sub   { font-size:.68rem; color:var(--text-faint); }
.hero-v15 .trust-item { display:flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:500; color:var(--text-muted); }
.hero-v15 .trust-item svg { color:var(--green); width:14px; height:14px; flex-shrink:0; }
.hero-accent-underline { position:relative; display:inline-block; }
.hero-accent-underline svg { position:absolute; bottom:-6px; left:0; width:100%; height:6px; overflow:visible; }
@media(max-width:680px){
  .hero-metrics-grid { grid-template-columns:repeat(2,1fr) !important; }
  .hero-cta-row { flex-direction:column !important; align-items:stretch !important; }
  .hero-trust-row { gap:1rem !important; }
  .hero-app-row { gap:10px !important; }
  .hero-app-label { width:100%; text-align:center; }
  .hero-app-row .app-btn { flex:1; min-width:140px; justify-content:center; }
}
@media(max-width:480px){
  .hero-metrics-grid { grid-template-columns:repeat(2,1fr) !important; max-width:100% !important; }
  .hero-app-row { flex-direction:column; align-items:stretch; }
}

/* ═══════════════════════════════════════════════════════════════════════
   APP DOWNLOAD BUTTONS
   ═══════════════════════════════════════════════════════════════════════ */
.app-btn {
  display:inline-flex; align-items:center; gap:10px; padding:10px 20px;
  border-radius:12px; background:#000; color:#fff;
  border:1.5px solid rgba(255,255,255,.12); text-decoration:none;
  transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s cubic-bezier(.22,1,.36,1),background .18s;
  cursor:pointer; white-space:nowrap; flex-shrink:0;
}
.app-btn:hover { transform:translateY(-2px) scale(1.02); box-shadow:0 8px 28px rgba(0,0,0,.45); background:#1a1a1a; }
.app-btn:active { transform:translateY(0) scale(.99); }
.app-btn__icon { width:28px; height:28px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.app-btn__text { display:flex; flex-direction:column; line-height:1.2; }
.app-btn__sub  { font-size:.62rem; font-weight:400; opacity:.75; letter-spacing:.01em; text-transform:uppercase; }
.app-btn__name { font-family:var(--font-display); font-size:.92rem; font-weight:700; letter-spacing:-.01em; }
[data-theme=light] .app-btn { background:#1a1a1a; border-color:rgba(0,0,0,.08); }
[data-theme=light] .app-btn:hover { background:#000; box-shadow:0 8px 28px rgba(0,0,0,.2); }
.hero-app-row {
  display:flex; align-items:center; justify-content:center; gap:12px;
  flex-wrap:wrap; margin-top:2rem; padding-top:1.75rem;
  border-top:1px solid var(--border-soft);
}
.hero-app-label { font-size:.75rem; font-weight:600; color:var(--text-faint); letter-spacing:.06em; text-transform:uppercase; flex-shrink:0; }
.app-strip { background:var(--surface); border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); padding:3.5rem 0; }
.app-strip__inner { display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.app-strip__copy  { flex:1; min-width:260px; }
.app-strip__badge { display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--green); margin-bottom:.75rem; }
.app-strip__title { font-family:var(--font-display); font-size:clamp(1.35rem,2.5vw,1.85rem); font-weight:800; letter-spacing:-.03em; line-height:1.15; color:var(--text); margin-bottom:.6rem; }
.app-strip__sub   { font-size:.9rem; color:var(--text-muted); line-height:1.6; max-width:420px; }
.app-strip__btns  { display:flex; align-items:center; gap:12px; flex-wrap:wrap; flex-shrink:0; }
.app-strip__phones { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.app-strip__phone { width:58px; height:96px; border-radius:12px; background:var(--surface-1); border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.app-strip__phone::before { content:''; position:absolute; top:8px; left:50%; transform:translateX(-50%); width:20px; height:4px; background:var(--border); border-radius:9999px; }
.app-strip__phone-icon { color:var(--green); margin-top:4px; }
.footer__app-btns { display:flex; flex-direction:column; gap:9px; margin-top:1.25rem; }
.footer__app-btns .app-btn { padding:9px 16px; border-radius:10px; }
.footer__app-btns .app-btn__name { font-size:.84rem; }
.footer__app-btns .app-btn__icon { width:22px; height:22px; }
@media(max-width:640px){
  .app-strip__inner { flex-direction:column; align-items:flex-start; }
  .app-strip__phones { display:none; }
}
@media(max-width:400px){
  .hero-app-row { flex-direction:column; align-items:stretch; }
  .hero-app-row .app-btn { justify-content:center; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HOW-TO SECTION
   ═══════════════════════════════════════════════════════════════════════ */
.howto-section{padding:4.5rem 0;background:var(--surface);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}
.howto-hd{text-align:center;margin-bottom:3rem}
.howto-hd h2{font-family:var(--font-display);font-size:clamp(1.4rem,2.5vw,2rem);font-weight:800;letter-spacing:-0.03em;color:var(--text);margin-top:.4rem}
.howto-hd p{font-size:.9375rem;color:var(--text-muted);margin-top:.6rem}
.howto-grid{display:grid;grid-template-columns:1fr 32px 1fr 32px 1fr;align-items:start;gap:0}
.howto-arrow{display:flex;align-items:flex-start;justify-content:center;padding-top:64px;color:var(--text-faint)}
.howto-step{display:flex;flex-direction:column}
.howto-step__num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--green);color:#fff;font-family:var(--font-display);font-size:.78rem;font-weight:800;border-radius:50%;margin-bottom:1rem;box-shadow:0 0 0 5px var(--green-glow);flex-shrink:0}
[data-theme=dark] .howto-step__num{color:#0D1117}
.howto-browser{background:var(--canvas);border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:var(--shadow-md);margin-bottom:1.1rem;transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s cubic-bezier(.22,1,.36,1)}
.howto-browser:hover{transform:translateY(-3px) scale(1.01);box-shadow:var(--shadow-lg)}
.howto-browser__bar{display:flex;align-items:center;gap:6px;padding:7px 11px;background:var(--surface-1);border-bottom:1px solid var(--border-soft)}
.howto-browser__dots{display:flex;gap:4px;flex-shrink:0}
.howto-browser__dot{width:8px;height:8px;border-radius:50%;background:var(--border)}
.howto-browser__dot:nth-child(1){background:#FF5F57}
.howto-browser__dot:nth-child(2){background:#FEBC2E}
.howto-browser__dot:nth-child(3){background:#28C840}
.howto-browser__url{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:3px 9px;font-size:.65rem;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.howto-browser__screen{aspect-ratio:16/9;background:var(--canvas);overflow:hidden}
.howto-browser__screen svg{width:100%;height:100%;display:block}
.howto-step__title{font-family:var(--font-display);font-size:.94rem;font-weight:700;color:var(--text);margin-bottom:.3rem}
.howto-step__desc{font-size:.84rem;color:var(--text-muted);line-height:1.6}
.howto-cta{text-align:center;margin-top:2.5rem}
@media(max-width:860px){
  .howto-grid{grid-template-columns:1fr;gap:2.2rem}
  .howto-arrow{display:none}
  .howto-step{display:grid;grid-template-columns:36px 1fr;grid-template-rows:auto auto auto;column-gap:1rem;row-gap:.35rem;align-items:start}
  .howto-step__num{grid-row:1;grid-column:1;margin-bottom:0}
  .howto-browser{grid-row:1/4;grid-column:2;margin-bottom:0}
  .howto-step__title,.howto-step__desc{grid-column:2;display:block}
}
@media(max-width:500px){
  .howto-step{display:flex;flex-direction:column;gap:.8rem}
  .howto-step__num{margin-bottom:0}
  .howto-step__title,.howto-step__desc{display:block}
  .howto-browser{margin-bottom:0}
}


/* ═══════════════════════════════════════════════════════════════════════════
   NAV — DOWNLOAD APP DROPDOWN
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   NAV → DOWNLOAD APP DROPDOWN  — full redesign
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.nav-app-dropdown {
  position: relative;
  flex-shrink: 0;
}

/* ── Trigger button ──────────────────────────────────────────────────────── */
.nav-app-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px 0 13px;
  height: 36px;
  border-radius: 18px;             /* full pill */
  background: var(--green);
  color: #fff;
  font-size: 0.81rem;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(16,185,129,0.32);
  transition: box-shadow 0.2s, transform 0.18s;
}
/* Shimmer sweep */
.nav-app-trigger::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.22) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
  pointer-events: none;
}
.nav-app-trigger:hover::after { transform: translateX(100%); }
.nav-app-trigger:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(16,185,129,0.40);
  animation: none;
}
.nav-app-trigger:active { transform: translateY(0) scale(0.98); }
.nav-app-dropdown.open .nav-app-trigger {
  animation: none;
  box-shadow: 0 4px 16px rgba(16,185,129,0.42);
}

@keyframes dl-bounce {
  0%, 100% { transform: translateY(0); }
  20%      { transform: translateY(3px); }
  40%      { transform: translateY(-1px); }
}

/* Download arrow — bounces on idle */
.nav-app-trigger__arrow {
  display: flex;
  align-items: center;
  animation: dl-bounce 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
.nav-app-dropdown.open .nav-app-trigger__arrow { animation: none; }

/* Phone icon */
.nav-app-trigger__phone {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Chevron */
.nav-app-trigger__chevron {
  opacity: 0.7;
  transition: transform 0.22s cubic-bezier(.22,1,.36,1), opacity 0.2s;
  flex-shrink: 0;
}
.nav-app-dropdown.open .nav-app-trigger__chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* "NEW" pill badge on trigger */
.nav-app-trigger__badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: rgba(255,255,255,0.22);
  padding: 2px 5px;
  border-radius: 999px;
  line-height: 1;
}

/* ── Panel ───────────────────────────────────────────────────────────────── */
.nav-app-panel {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 296px;
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.16), 0 6px 20px rgba(0,0,0,0.09);
  overflow: hidden;
  z-index: 9999;
  transform-origin: top right;
}
[data-theme=dark] .nav-app-panel {
  border-color: rgba(255,255,255,0.1);
  box-shadow: 0 24px 64px rgba(0,0,0,0.55), 0 6px 20px rgba(0,0,0,0.35);
}
.nav-app-dropdown.open .nav-app-panel {
  display: block;
  animation: panel-pop 0.24s cubic-bezier(0.22,1,0.36,1) both;
}
  to   { opacity:1; transform:scale(1)    translateY(0);    }
}

/* ── Panel hero banner ───────────────────────────────────────────────────── */
.nav-app-hero {
  position: relative;
  overflow: hidden;
  padding: 18px 18px 16px;
  background: linear-gradient(135deg, #047857 0%, #10B981 45%, #34D399 100%);
}
/* Decorative circles in hero */
.nav-app-hero::before,
.nav-app-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  pointer-events: none;
}
.nav-app-hero::before { width:140px; height:140px; top:-40px; right:-30px; }
.nav-app-hero::after  { width:80px;  height:80px;  bottom:-30px; left:60px; }

.nav-app-hero__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}

/* App icon */
.nav-app-hero__icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: rgba(255,255,255,0.15);
  -webkit-backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}

.nav-app-hero__copy {}
.nav-app-hero__title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.nav-app-hero__sub {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.8);
  margin-top: 2px;
  line-height: 1.4;
}
/* Stars row */
.nav-app-hero__stars {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
}
.nav-app-hero__star-icons { color: #FCD34D; font-size: 0.7rem; letter-spacing: -1px; }
.nav-app-hero__rating      { font-size: 0.7rem; font-weight: 700; color: rgba(255,255,255,0.95); }
.nav-app-hero__sep         { color: rgba(255,255,255,0.4); font-size: 0.65rem; }
.nav-app-hero__tag {
  font-size: 0.62rem;
  font-weight: 700;
  color: #DCFCE7;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 2px 7px;
}

/* ── Trust strip (inside hero) ───────────────────────────────────────────── */
.nav-app-trust {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  position: relative;
  z-index: 1;
}
.nav-app-trust__item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.62rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  padding: 3px 8px 3px 6px;
  white-space: nowrap;
}
.nav-app-trust__item svg { opacity: 0.85; flex-shrink: 0; }

/* ── Panel body ──────────────────────────────────────────────────────────── */
.nav-app-body {
  padding: 14px 14px 6px;
}
.nav-app-body__label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 8px;
}

/* ── Store buttons ───────────────────────────────────────────────────────── */
.nav-store-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  background: #0b0b0b;
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  text-decoration: none;
  transition: background 0.16s, transform 0.18s, box-shadow 0.18s;
  margin-bottom: 7px;
  position: relative;
  overflow: hidden;
}
[data-theme=light] .nav-store-btn {
  background: #111;
  border-color: rgba(0,0,0,0.06);
}
.nav-store-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.08) 50%, transparent 65%);
  transform: translateX(-100%);
  transition: transform 0.4s ease;
}
.nav-store-btn:hover::before { transform: translateX(100%); }
.nav-store-btn:hover {
  background: #1c1c1c;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
[data-theme=light] .nav-store-btn:hover { background: #000; }
.nav-store-btn:active { transform: translateY(0) scale(0.99); }
.nav-store-btn--ios:hover  { box-shadow: 0 8px 24px rgba(0,120,215,0.35); }
.nav-store-btn--play:hover { box-shadow: 0 8px 24px rgba(66,133,244,0.30); }

.nav-store-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}
.nav-store-btn__icon svg { width: 24px; height: 24px; }

.nav-store-btn__text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-store-btn__sub  {
  font-size: 0.58rem;
  font-weight: 400;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}
.nav-store-btn__name {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}

/* Right arrow indicator on store btn */
.nav-store-btn__arrow {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.18s, transform 0.18s;
  flex-shrink: 0;
  color: rgba(255,255,255,0.5);
}
.nav-store-btn:hover .nav-store-btn__arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ── Panel footer ────────────────────────────────────────────────────────── */
.nav-app-footer {
  padding: 0 14px 14px;
  text-align: center;
}
.nav-app-footer__text {
  font-size: 0.65rem;
  color: var(--text-faint);
  line-height: 1.5;
}
.nav-app-footer__text span { color: var(--green); font-weight: 600; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .nav-app-trigger__badge  { display: none; }
  .nav-app-trigger__label  { display: none; }
  .nav-app-trigger { padding: 0 10px; border-radius: 10px; }
}
@media (max-width: 820px) {
  .nav-app-dropdown { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   NAV "DOWNLOAD APP" — Trigger + submenu dropdown
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.nav-app-dd {
  position: relative;
  flex-shrink: 0;
}

/* ── Trigger pill ────────────────────────────────────────────────────────── */
.nav-app-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px 0 11px;
  height: 36px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  border: 1.5px solid rgba(255,255,255,0.18);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s;
  box-shadow: 0 2px 12px rgba(16,185,129,0.38), inset 0 1px 0 rgba(255,255,255,0.2);
}
/* Shimmer sweep */
/* shimmer removed — simplified button */
.nav-app-trigger:hover {
  transform:translateY(-1px);
  box-shadow: 0 4px 16px rgba(16,185,129,0.42);
  animation:none;
}
.nav-app-trigger:active { transform:scale(0.97); }
/* animation removal rule no longer needed */

/* Phone icon — bounces gently */
.nap-trig__phone {
  display:flex; align-items:center;
  flex-shrink:0;
}


/* "NEW" badge */
.nap-trig__badge {
  font-size:0.5rem;
  font-weight:800;
  letter-spacing:0.07em;
  text-transform:uppercase;
  background:rgba(255,255,255,0.22);
  border:1px solid rgba(255,255,255,0.3);
  border-radius:999px;
  padding:1.5px 5px;
  line-height:1;
  flex-shrink:0;
}

/* Chevron — rotates on open */
.nap-trig__chev {
  opacity:0.75;
  transition:transform 0.22s cubic-bezier(.22,1,.36,1), opacity 0.18s;
  flex-shrink:0;
}
.nav-app-dd.open .nap-trig__chev {
  transform:rotate(180deg);
  opacity:1;
}

/* ── Panel ───────────────────────────────────────────────────────────────── */
.nap-panel {
  display: none;
  position: fixed;          /* escapes nav backdrop-filter stacking context */
  /* top + right set by JS based on nav.getBoundingClientRect() */
  top: 74px;               /* fallback: 64px nav + 10px gap */
  right: 16px;
  width: min(310px, calc(100vw - 32px));
  border-radius: 20px;
  overflow: hidden;
  z-index: 9999;
  box-shadow:
    0 4px  0 rgba(16,185,129,0.18),
    0 20px 60px rgba(0,0,0,0.18),
    0 6px  20px rgba(0,0,0,0.10);
  border: 1px solid var(--border);
  transform-origin: top right;
}
[data-theme=dark] .nap-panel {
  border-color: rgba(52,211,153,0.18);
  box-shadow: 0 4px 0 rgba(52,211,153,0.22),
              0 24px 70px rgba(0,0,0,0.55),
              0 6px 22px rgba(0,0,0,0.35);
}
.nav-app-dd.open .nap-panel,
.nap-panel.is-open {
  display: block;
  animation: nap-pop 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes nap-pop {
  from { opacity:0; transform:scale(0.92) translateY(-10px); }
  to   { opacity:1; transform:scale(1)    translateY(0);     }
}

/* ── Hero banner ─────────────────────────────────────────────────────────── */
.nap-hero {
  position: relative;
  padding: 18px 18px 16px;
  background: linear-gradient(135deg, #064e2e 0%, #0d7a47 40%, #10B981 100%);
  overflow: hidden;
}
/* Decorative blobs */
.nap-hero::before,
.nap-hero::after {
  content:''; position:absolute; border-radius:50%; pointer-events:none;
  background:rgba(255,255,255,0.06);
}
.nap-hero::before { width:160px; height:160px; top:-50px;  right:-40px; }
.nap-hero::after  { width: 90px; height: 90px; bottom:-30px; left:40px; }

/* App icon + identity row */
.nap-hero__row {
  display: flex;
  align-items: center;
  gap: 13px;
  position: relative;
  z-index: 1;
}
.nap-hero__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255,255,255,0.14);
  border: 1.5px solid rgba(255,255,255,0.25);
  -webkit-backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.nap-hero__name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.nap-hero__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.nap-hero__stars { color: #FDE68A; font-size: 0.72rem; letter-spacing:-0.5px; }
.nap-hero__rating {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
}
.nap-hero__dot { color: rgba(255,255,255,0.35); font-size: 0.65rem; }
.nap-hero__free {
  font-size: 0.62rem;
  font-weight: 700;
  color: #DCFCE7;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  padding: 1.5px 7px;
}

/* Downloads stat */
.nap-hero__downloads {
  margin-top: 10px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nap-hero__dl-bar {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  overflow: hidden;
}
.nap-hero__dl-bar-fill {
  height: 100%;
  width: 82%;
  background: linear-gradient(90deg, rgba(255,255,255,0.4), rgba(255,255,255,0.8));
  border-radius: 999px;
}
.nap-hero__dl-label {
  font-size: 0.62rem;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  white-space: nowrap;
}

/* Trust chips strip */
.nap-hero__chips {
  display: flex;
  gap: 5px;
  margin-top: 10px;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}
.nap-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 3px 8px 3px 5px;
  white-space: nowrap;
}
.nap-hero__chip svg { flex-shrink:0; opacity:0.85; }

/* ── Panel body ──────────────────────────────────────────────────────────── */
.nap-body {
  background: var(--canvas);
  padding: 14px 14px 12px;
}
.nap-body__eyebrow {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 9px;
}

/* ── Store buttons ───────────────────────────────────────────────────────── */
.nap-store-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  background: #0c0c0c;
  border: 1.5px solid rgba(255,255,255,0.08);
  color: #fff;
  text-decoration: none;
  transition: transform 0.18s, box-shadow 0.18s, background 0.16s;
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
}
[data-theme=light] .nap-store-btn {
  background: #111;
  border-color: rgba(0,0,0,0.06);
}
/* Shimmer */
.nap-store-btn::after {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,0.09) 50%,transparent 70%);
  transform:translateX(-110%);
  transition:transform 0.45s ease;
  pointer-events:none;
}
.nap-store-btn:hover::after { transform:translateX(110%); }
.nap-store-btn:hover { transform:translateY(-2px); background:#1a1a1a; }
[data-theme=light] .nap-store-btn:hover { background:#000; }
.nap-store-btn:active { transform:scale(0.98); }
/* Store-specific hover glow */
.nap-store-btn--ios:hover  {
  box-shadow: 0 8px 28px rgba(0,120,215,0.30);
  border-color: rgba(0,120,215,0.35);
}
.nap-store-btn--play:hover {
  box-shadow: 0 8px 28px rgba(66,133,244,0.28);
  border-color: rgba(66,133,244,0.30);
}

.nap-store-btn__icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nap-store-btn__icon svg { width: 22px; height: 22px; }

.nap-store-btn__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
}
.nap-store-btn__sub  {
  font-size: 0.56rem;
  font-weight: 400;
  opacity: 0.6;
  letter-spacing: 0.01em;
  line-height: 1;
}
.nap-store-btn__name {
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* Arrow on right side */
.nap-store-btn__arrow {
  opacity: 0.3;
  transition: opacity 0.18s, transform 0.18s;
  flex-shrink: 0;
}
.nap-store-btn:hover .nap-store-btn__arrow {
  opacity: 0.8;
  transform: translateX(3px);
}

/* ── Footer strip ─────────────────────────────────────────────────────────── */
.nap-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 9px 14px 13px;
  background: var(--canvas);
  border-top: 1px solid var(--border-soft);
}
.nap-footer__feat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--text-faint);
}
.nap-footer__feat svg { color: var(--green); flex-shrink: 0; }
.nap-footer__sep { color: var(--border); font-size: 0.6rem; }

/* ── MVC app extensions ─────────────────────────────────────────────────── */
.content-wrapper {
  background: var(--canvas);
  padding: var(--sp-8);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
}
.content-wrapper h1 { font-size: clamp(1.85rem, 4vw, 2.5rem); margin-bottom: var(--sp-4); }
.content-wrapper h2 { font-size: clamp(1.4rem, 2.8vw, 2rem); margin-top: var(--sp-8); margin-bottom: var(--sp-3); }
.content-wrapper h3 { font-size: 1.25rem; margin-top: var(--sp-6); margin-bottom: var(--sp-2); }
.content-wrapper p, .content-wrapper li { line-height: 1.75; color: var(--text-2); }
.content-wrapper ul, .content-wrapper ol { margin-bottom: var(--sp-4); padding-left: var(--sp-6); }

.auth-card {
  max-width: 440px;
  margin: var(--sp-12) auto;
  padding: var(--sp-8);
  background: var(--canvas);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}
.auth-card .form-label { display: block; font-weight: 600; font-size: .875rem; margin-bottom: var(--sp-2); color: var(--text); }
.auth-card .form-control,
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="text"] {
  width: 100%;
  padding: .65rem .9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  background: var(--canvas);
  margin-bottom: var(--sp-4);
}
.auth-card .form-control:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-glow); }
.auth-card .text-danger, .auth-card .field-validation-error { color: #dc2626; font-size: .8rem; }
.auth-card .alert { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); margin-bottom: var(--sp-4); font-size: .875rem; }
.auth-card .alert-danger { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

.form-label { display: block; font-weight: 600; font-size: .875rem; margin-bottom: var(--sp-2); color: var(--text); }
.form-control {
  width: 100%;
  padding: .65rem .9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  background: var(--canvas);
}
.form-control:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-glow); }
.text-danger { color: #dc2626; font-size: .8rem; }

.tool-workspace { margin-top: var(--sp-4); }
.tool-workspace .file-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-2);
}
.tool-workspace .file-name { font-weight: 600; font-size: .9rem; }
.tool-workspace .file-size { font-size: .8rem; color: var(--text-muted); }
.tool-workspace .remove-file { cursor: pointer; color: #dc2626; margin-left: auto; }

.upload-zone.drag-over { border-color: var(--green); background: var(--surface-2); }

body.admin-app .container-fluid { padding-top: var(--sp-6); }

.form-check { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.form-check-input { width: 1rem; height: 1rem; accent-color: var(--green); }
.form-check-label { font-size: .875rem; color: var(--text-2); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  /* Tablet: label hidden, icon-only trigger */
  .nap-trig__label,
  .nap-trig__badge { display: none; }
  /* Panel stays right-aligned on tablet — JS handles exact coordinates */
  .nav-app-trigger { padding: 0 10px; gap: 5px; border-radius: 9px; }
}
@media (max-width: 820px) {
  .nav-app-dd { display: none !important; }
}