/* 
 * PDFX Studio - Modern Slate & Sapphire Blue Premium Theme
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&family=Sora:wght@400;500;600;700;800&display=swap');

:root {
  /* Brand Primary & Palette */
  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-primary-light: #EFF6FF;
  --color-primary-gradient: linear-gradient(135deg, #2563EB 0%, #7C3AED 50%, #EC4899 100%);
  --color-accent-gradient: linear-gradient(135deg, #10B981 0%, #0EA5E9 100%);
  
  --color-surface-dark: #0F172A; /* Deep Midnight Slate */
  --color-surface-card: #FFFFFF;
  --color-text-main: #0F172A;
  --color-text-muted: #64748B;
  --color-text-light: #94A3B8;

  /* Bright & Vibrant Category Accent Palette */
  --color-organize: #10B981;    /* Bright Emerald Green */
  --color-optimize: #0EA5E9;    /* Electric Cyan Blue */
  --color-convert-to: #F59E0B;  /* Vibrant Amber Gold */
  --color-convert-from: #3B82F6;/* Vivid Sapphire Blue */
  --color-edit: #8B5CF6;        /* Vivid Electric Purple */
  --color-security: #EF4444;    /* Bright Crimson Red */
  --color-intelligence: #EC4899;/* Hot Pink / Magenta */

  /* Surface System */
  --bg-body: #F8FAFC;
  --bg-gradient: radial-gradient(120% 80% at 50% 0%, rgba(37, 99, 235, 0.06) 0%, rgba(248, 250, 252, 1) 100%);
  --border-color: #E2E8F0;
  --border-hover: #CBD5E1;
  --border-glow: rgba(37, 99, 235, 0.25);

  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Sora', 'Plus Jakarta Sans', sans-serif;
  
  /* Multi-layered Soft Shadows */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 10px 25px -5px rgba(15, 23, 42, 0.06), 0 4px 10px -3px rgba(15, 23, 42, 0.03);
  --shadow-lg: 0 20px 40px -10px rgba(15, 23, 42, 0.1);
  --shadow-primary: 0 8px 20px -4px rgba(37, 99, 235, 0.28);
  --shadow-glow: 0 0 20px rgba(37, 99, 235, 0.2);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 9999px;
}

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

body {
  font-family: var(--font-body);
  background: var(--bg-body);
  background-image: var(--bg-gradient);
  background-attachment: fixed;
  color: var(--color-text-main);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Header & Navbar */
.header {
  height: 74px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);
}

.header__nav {
  width: 100%;
  max-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px 0 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-surface-dark);
  letter-spacing: -0.5px;
  font-family: var(--font-display);
}

.brand-icon {
  width: 38px;
  height: 38px;
  background: var(--color-surface-dark);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
  transition: transform 0.25s ease;
}

.brand:hover .brand-icon {
  transform: scale(1.05);
}

.brand-text {
  display: flex;
  align-items: center;
  gap: 6px;
}

.brand-tag {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
  height: 100%;
}

.nav__item {
  height: 100%;
  display: flex;
  align-items: center;
}

.nav__item > a {
  font-weight: 600;
  font-size: 0.92rem;
  color: #475569;
  transition: all 0.2s ease;
  padding: 0;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

.nav__item > a:hover {
  color: var(--color-primary);
}

.nav__item > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--color-primary);
  transition: width 0.2s ease;
  border-radius: 2px 2px 0 0;
}

.nav__item > a:hover::after {
  width: 100%;
}

/* Navigation Dropdowns & Mega-Menu */
.nav__item.dropdown, .nav__item.mega-dropdown {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
  padding: 20px;
  gap: 24px;
  z-index: 1000;
  white-space: nowrap;
}

.dropdown-menu::before,
.mega-menu::before {
  content: '';
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  height: 15px;
  background: transparent;
}

.dropdown:hover .dropdown-menu {
  display: flex;
}

.dropdown-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dropdown-header {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--color-text-muted);
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.dropdown-col a {
  font-size: 0.88rem;
  color: #334155;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.dropdown-col a:hover {
  background: #F1F5F9;
  color: var(--color-primary);
}

/* Mega Menu */
.mega-menu {
  display: none;
  position: fixed;
  top: 74px;
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  max-width: 1240px;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.18);
  padding: 28px 32px;
  z-index: 1500;
}

.mega-dropdown:hover .mega-menu {
  display: block;
}

.mega-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 20px;
}

.mega-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mega-col__title {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.mega-col a {
  font-size: 0.84rem;
  color: #334155;
  font-weight: 600;
  padding: 4px 6px;
  border-radius: 6px;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.mega-col a:hover {
  background: #F1F5F9;
  color: var(--color-primary);
  transform: translateX(2px);
}


.nav__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Button System */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid transparent;
  outline: none;
}

.btn--primary {
  background: var(--color-primary);
  color: #ffffff;
  box-shadow: var(--shadow-primary);
}

.btn--primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -4px rgba(37, 99, 235, 0.35);
}

/* Flat variant: same fill, no drop shadow (rest and hover). */
.btn--flat,
.btn--flat:hover { box-shadow: none; }

.btn--secondary {
  background: #FFFFFF;
  color: #334155;
  border-color: var(--border-color);
  box-shadow: var(--shadow-sm);
}

.btn--secondary:hover {
  background: #F8FAFC;
  border-color: var(--border-hover);
  color: var(--color-surface-dark);
  transform: translateY(-1px);
}

.btn--dark {
  background: var(--color-surface-dark);
  color: #ffffff;
}

.btn--dark:hover {
  background: #1E293B;
  transform: translateY(-1px);
}

.btn--lg {
  padding: 14px 36px;
  font-size: 1.05rem;
  border-radius: var(--radius-md);
}

/* Main Container */
.main {
  flex: 1;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 48px 32px;
}

/* Hero Section */
.hero {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 40px auto;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}

.hero-badge span.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10B981;
}

.hero__title {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--color-surface-dark);
  margin-bottom: 16px;
  letter-spacing: -1px;
  line-height: 1.18;
  font-family: var(--font-display);
}

.hero__title span.highlight {
  color: var(--color-primary);
  background: linear-gradient(135deg, #1E40AF 0%, #2563EB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero__subtitle {
  font-size: 1.12rem;
  color: var(--color-text-muted);
  font-weight: 400;
  line-height: 1.6;
  max-width: 720px;
  margin: 0 auto;
}

/* Hero Quick Search Bar */
.hero-search-wrapper {
  max-width: 520px;
  margin: 28px auto 0 auto;
  position: relative;
}

.hero-search {
  width: 100%;
  padding: 14px 20px 14px 48px;
  font-size: 0.98rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  background: #ffffff;
  box-shadow: var(--shadow-md);
  outline: none;
  font-family: var(--font-body);
  transition: all 0.25s ease;
}

.hero-search:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12), var(--shadow-md);
}

.hero-search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-light);
  pointer-events: none;
}

/* Filter Tags */
.filter-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
}

.tag {
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  background: #ffffff;
  border: 1px solid var(--border-color);
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
}

.tag:hover {
  border-color: var(--border-hover);
  color: var(--color-surface-dark);
}

.tag.active {
  background: var(--color-surface-dark);
  color: #ffffff;
  border-color: var(--color-surface-dark);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
}

/* Tools Grid */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.tool-card {
  background: var(--color-surface-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-sm);
  position: relative;
}

.tool-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-hover);
}

.tool-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tool-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: var(--color-primary-light);
  color: var(--color-primary);
  transition: transform 0.25s ease;
}

.tool-card:hover .tool-card__icon {
  transform: scale(1.06);
}

/* Category Specific Colors */
.tool-card[data-category="organize"] .tool-card__icon { background: #ECFDF5; color: var(--color-organize); }
.tool-card[data-category="optimize"] .tool-card__icon { background: #F0F9FF; color: var(--color-optimize); }
.tool-card[data-category="convert"] .tool-card__icon { background: #EEF2FF; color: var(--color-convert); }
.tool-card[data-category="edit"] .tool-card__icon { background: #F5F3FF; color: var(--color-edit); }
.tool-card[data-category="security"] .tool-card__icon { background: #FFFBEB; color: var(--color-security); }
.tool-card[data-category="intelligence"] .tool-card__icon { background: #FDF4FF; color: var(--color-intelligence); }

.tool-card__title {
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--color-surface-dark);
  letter-spacing: -0.3px;
  font-family: var(--font-display);
}

.tool-card__desc {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.badge-new {
  position: absolute;
  top: 20px;
  right: 20px;
  background: #FDF4FF;
  color: var(--color-intelligence);
  border: 1px solid rgba(192, 38, 211, 0.2);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Features / Trust Section */
.features-section {
  margin-top: 72px;
  padding-top: 48px;
  border-top: 1px solid var(--border-color);
}

.features-header {
  text-align: center;
  margin-bottom: 40px;
}

.features-header h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-surface-dark);
  margin-bottom: 8px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}

.feature-box {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-sm);
}

.feature-box__icon {
  width: 42px;
  height: 42px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-box h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-surface-dark);
}

.feature-box p {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}

/* Tool Interactive Workspace Layout */
.tool-page {
  max-width: 1080px;
  margin: 0 auto;
}

.dropzone {
  border: 2px dashed #CBD5E1;
  border-radius: var(--radius-lg);
  background: #ffffff;
  padding: 72px 36px;
  text-align: center;
  transition: all 0.25s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  box-shadow: var(--shadow-sm);
}

.dropzone:hover, .dropzone.dragover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  box-shadow: 0 0 25px rgba(37, 99, 235, 0.08);
}

.dropzone__icon {
  width: 80px;
  height: 80px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease;
}

.dropzone:hover .dropzone__icon {
  transform: scale(1.08);
}

.dropzone__text {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-surface-dark);
  font-family: var(--font-display);
}

/* Workspace Grid & Controls */
.workspace {
  display: none;
  flex-direction: column;
  gap: 28px;
}

.workspace.active {
  display: flex;
}

.workspace-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 18px;
}

.workspace-header h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-surface-dark);
}

.workspace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
  min-height: 320px;
  padding: 24px;
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

.thumb-card {
  background: #F8FAFC;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  transition: all 0.2s ease;
}

.thumb-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.thumb-card canvas, .thumb-card img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.action-btn {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s ease;
  color: var(--color-surface-dark);
}

.action-btn:hover {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
}

/* Tool Settings Panel */
.tool-settings {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: var(--shadow-sm);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-surface-dark);
}

.form-control {
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 0.94rem;
  font-family: var(--font-body);
  outline: none;
  transition: all 0.2s ease;
  background: #F8FAFC;
}

.form-control:focus {
  border-color: var(--color-primary);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Modal Progress Overlay */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2000;
  align-items: center;
  justify-content: center;
}

.modal.active {
  display: flex;
}

.modal-content {
  background: #ffffff;
  padding: 44px 36px;
  border-radius: var(--radius-lg);
  max-width: 480px;
  width: 90%;
  text-align: center;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  border: 1px solid var(--border-color);
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: #F1F5F9;
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--color-primary);
  transition: width 0.3s ease;
}

/* Footer */
.footer {
  background: #ffffff;
  border-top: 1px solid var(--border-color);
  padding: 48px 32px 32px 32px;
  margin-top: auto;
}

.footer__container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.footer__top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
}

.footer__brand {
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__brand p {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}

.footer__links {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}

.footer__column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__column h5 {
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--color-surface-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.footer__column a {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  transition: color 0.2s ease;
}

.footer__column a:hover {
  color: var(--color-primary);
}

.footer__bottom {
  border-top: 1px solid var(--border-color);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  color: var(--color-text-light);
  flex-wrap: wrap;
  gap: 16px;
}

@media (max-width: 768px) {
  .header__nav {
    padding: 0 16px;
  }
  .nav__menu {
    display: none;
  }
  .hero__title {
    font-size: 2rem;
  }
  .main {
    padding: 32px 16px;
  }
  .footer__links {
    gap: 24px;
  }
}

/* Markdown Rendered Content Styling */
.chat-md h1, .chat-md h2, .chat-md h3, .chat-md h4 {
  margin: 14px 0 8px 0;
  font-family: var(--font-display);
  font-weight: 700;
  color: #0F172A;
  line-height: 1.3;
}
.chat-md h1 { font-size: 1.3rem; }
.chat-md h2 { font-size: 1.15rem; }
.chat-md h3 { font-size: 1.05rem; border-bottom: 1px solid #E2E8F0; padding-bottom: 4px; }
.chat-md h4 { font-size: 0.95rem; }
.chat-md p { margin: 8px 0; line-height: 1.65; color: #334155; }
.chat-md ul, .chat-md ol { margin: 8px 0 8px 24px; padding: 0; }
.chat-md li { margin: 4px 0; line-height: 1.55; color: #334155; }
.chat-md strong { font-weight: 700; color: #0F172A; }
.chat-md em { font-style: italic; }
.chat-md code { background: #E2E8F0; color: #0F172A; padding: 2px 6px; border-radius: 4px; font-family: monospace; font-size: 0.88rem; }
.chat-md pre { background: #0F172A; color: #38BDF8; padding: 14px 18px; border-radius: 8px; overflow-x: auto; font-family: monospace; font-size: 0.88rem; margin: 12px 0; border: 1px solid #1E293B; }
.chat-md pre code { background: transparent; color: inherit; padding: 0; }
.chat-md blockquote { border-left: 4px solid #059669; margin: 10px 0; padding: 6px 14px; background: #F1F5F9; color: #475569; font-style: italic; border-radius: 0 6px 6px 0; }
.chat-md hr { border: none; border-top: 1px dashed #CBD5E1; margin: 16px 0; }

/* Header Left Group & Sidebar Toggle */
.nav-left {
  width: 290px;
  min-width: 290px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--border-color);
}

/* Drawer trigger. Hidden on desktop, where the sidebar is permanently open -
   it only earns its place once .app-sidebar goes off-canvas at 1024px. */
.sidebar-toggle-btn {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.86rem;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.2s ease;
}

.sidebar-toggle-btn:hover {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

/* Master Application Layout */
.app-layout {
  display: flex;
  min-height: calc(100vh - 74px);
  width: 100%;
  position: relative;
}

.app-main-content {
  flex: 1;
  min-width: 0;
  margin-left: 290px;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 74px);
}

/* Left Sidebar Menu Navigation */
.app-sidebar {
  width: 290px;
  min-width: 290px;
  background: #FFFFFF;
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 74px;
  left: 0;
  height: calc(100vh - 74px);
  overflow-y: auto;
  z-index: 100;
  box-shadow: 4px 0 20px rgba(15, 23, 42, 0.02);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom Scrollbar for Sidebar */
.app-sidebar::-webkit-scrollbar {
  width: 5px;
}
.app-sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.app-sidebar::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}
.app-sidebar::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* Sidebar Header & Search Box */
.sidebar__header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
  position: sticky;
  top: 0;
  z-index: 10;
}

.sidebar__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-surface-dark);
  margin-bottom: 12px;
}

.sidebar__title-badge {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #2563EB 0%, #EC4899 100%);
  color: #FFFFFF;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.sidebar__search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.sidebar__search-box svg {
  position: absolute;
  left: 12px;
  color: #94A3B8;
  pointer-events: none;
}

.sidebar__search-box input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: #F8FAFC;
  font-size: 0.85rem;
  font-family: var(--font-body);
  color: var(--color-text-main);
  outline: none;
  transition: all 0.2s ease;
}

.sidebar__search-box input:focus {
  background: #FFFFFF;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Sidebar Nav & Links */
.sidebar__nav {
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar__group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  color: #334155;
  transition: all 0.18s ease;
}

.sidebar__link:hover {
  background: #F1F5F9;
  color: var(--color-primary);
  transform: translateX(2px);
}

.sidebar__link.active {
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.sidebar__icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar__divider {
  height: 1px;
  background: var(--border-color);
  margin: 4px 0;
}

/* Categorized Accordions */
.sidebar__category {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-sm);
}

.sidebar__category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
  user-select: none;
}

.sidebar__category-header:hover {
  background: #F8FAFC;
}

.sidebar__category-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-surface-dark);
}

.sidebar__category-count {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 10px;
}

.sidebar__category-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 12px;
  margin-top: 4px;
}

.sidebar__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #475569;
  transition: all 0.15s ease;
  position: relative;
}

.sidebar__item-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transition: transform 0.2s ease, background 0.2s ease;
}

.sidebar__item:hover {
  background: #F1F5F9;
  color: var(--color-surface-dark);
  transform: translateX(3px);
}

.sidebar__item:hover .sidebar__item-dot {
  transform: scale(1.4);
}

.sidebar__item.active {
  background: #EFF6FF;
  color: var(--color-primary);
  font-weight: 700;
}

.sidebar__item.active .sidebar__item-dot {
  transform: scale(1.5);
  box-shadow: 0 0 6px rgba(37, 99, 235, 0.6);
}

.sidebar__badge {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: auto;
  letter-spacing: 0.5px;
}

/* Premium crown - marks every paid AI tool wherever its name appears
   (sidebar, nav dropdowns, mega-menu, home page and catalogue cards). */
.premium-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 5px;
  color: #B87A12;
  vertical-align: middle;
  transition: transform 0.18s ease, color 0.18s ease;
}

.premium-mark svg {
  display: block;
}

a:hover > .premium-mark,
a:hover .premium-mark {
  color: #D9931A;
  transform: scale(1.12);
}

.sidebar__item .premium-mark {
  margin-left: 4px;
}

/* A badge follows the crown on some rows - keep the badge hard right */
.sidebar__item .premium-mark + .sidebar__badge {
  margin-left: auto;
}

.sidebar__badge--hot { background: rgba(239, 68, 68, 0.15); color: #EF4444; }
.sidebar__badge--ai { background: rgba(139, 92, 246, 0.15); color: #8B5CF6; }
.sidebar__badge--pro { background: rgba(16, 185, 129, 0.15); color: #10B981; }
.sidebar__badge--new { background: rgba(245, 158, 11, 0.15); color: #F59E0B; }

/* Responsive Mobile Drawer & Collapsed Sidebar */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1500;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Drawer close button and the repeated top-bar links: both belong to the drawer
   only, so they stay out of the way while the sidebar is a fixed column. */
.sidebar__close {
  display: none;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #FFFFFF;
  color: #475569;
  cursor: pointer;
  transition: all 0.18s ease;
}

.sidebar__close:hover {
  background: #F1F5F9;
  color: var(--color-surface-dark);
}

.sidebar__group--drawer {
  display: none;
}

.sidebar__link--feature {
  background: #F8FAFC;
  border: 1px solid var(--border-color);
}

.sidebar__link--feature:hover {
  background: #F1F5F9;
}

@media (max-width: 1024px) {
  .header__nav {
    padding: 0 16px;
    gap: 10px;
  }

  .nav-left {
    width: auto;
    min-width: auto;
    border-right: none;
    justify-content: flex-start;
    gap: 10px;
  }

  /* The top-bar dropdowns have nowhere to open on a narrow screen - the drawer
     carries the same links, so hand navigation over to it wholesale. */
  .nav__menu {
    display: none;
  }

  .sidebar-toggle-btn {
    display: inline-flex;
  }

  .sidebar__close,
  .sidebar__group--drawer {
    display: flex;
  }

  /* The close button eats into the title row - shrink the label and the
     count chip just enough to keep "PDF Suite Menu" on one line. */
  .sidebar__title {
    gap: 8px;
    font-size: 0.88rem;
    white-space: nowrap;
  }

  .sidebar__title-badge {
    font-size: 0.6rem;
    padding: 3px 7px;
  }

  .app-main-content {
    margin-left: 0;
  }

  /* Drawer sits below the sticky top bar, so the brand and the menu button
     stay visible and tappable while it is open. */
  .app-sidebar {
    position: fixed;
    top: 74px;
    left: 0;
    height: calc(100vh - 74px);
    max-width: 88vw;
    z-index: 2000;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    box-shadow: 10px 0 30px rgba(15, 23, 42, 0.15);
  }

  .sidebar-overlay {
    top: 74px;
    height: calc(100vh - 74px);
  }

  .app-layout.sidebar-open .app-sidebar {
    transform: translateX(0);
  }

  .app-layout.sidebar-open .sidebar-overlay {
    display: block;
    opacity: 1;
  }

  /* The drawer is open: stop the page behind it scrolling under the finger */
  body.sidebar-locked {
    overflow: hidden;
  }
}

@media (max-width: 560px) {
  /* Log in / the account button both live in the drawer at this width,
     so the top bar keeps only the brand, the menu and the primary action. */
  .nav__actions .btn--secondary,
  .nav__actions .user-badge {
    display: none;
  }

  .sidebar-toggle-btn {
    padding: 8px 10px;
  }

  .sidebar-toggle-btn__text {
    display: none;
  }

  .brand {
    font-size: 1.15rem;
  }

  .brand-icon {
    width: 32px;
    height: 32px;
  }
}

/* Bright Color UI Enhancements for Homepage & Tools */
.highlight {
  background: linear-gradient(135deg, #2563EB 0%, #8B5CF6 50%, #EC4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tool-card {
  border-top: 3px solid transparent;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.tool-card[data-category="organize"] { border-top-color: #10B981; }
.tool-card[data-category="optimize"] { border-top-color: #0EA5E9; }
.tool-card[data-category="edit"] { border-top-color: #8B5CF6; }
.tool-card[data-category="security"] { border-top-color: #EF4444; }
.tool-card[data-category="intelligence"] { border-top-color: #EC4899; }
.tool-card[data-category="convert"] { border-top-color: #F59E0B; }

.tool-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -8px rgba(15, 23, 42, 0.12), 0 0 15px rgba(37, 99, 235, 0.1);
}

.filter-tags .tag.active {
  background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
  border-color: transparent;
}


/* ==================================================================
   WARM PREMIUM RETHEME  (overrides the original slate/sapphire vars)
   Terracotta + plum + gold on warm ivory. No blue anywhere.
   Placed last so it re-skins the header, sidebar and every tool page
   without touching the 1,300 lines of layout above.
   ================================================================== */
:root {
  --color-primary: #C4502A;         /* terracotta */
  --color-primary-hover: #A63F20;
  --color-primary-light: #FCEFE7;
  --color-primary-gradient: linear-gradient(135deg, #C4502A 0%, #9B2C6F 55%, #B33A62 100%);
  --color-accent-gradient: linear-gradient(135deg, #2F6F4E 0%, #B87A12 100%);

  --color-surface-dark: #33222B;    /* deep plum-brown ink */
  --color-text-main: #33222B;
  --color-text-muted: #7A6A63;      /* warm grey-brown */
  --color-text-light: #A89A93;

  /* Category accents - warm jewel tones, zero blue */
  --color-organize: #2F6F4E;        /* forest green */
  --color-optimize: #B87A12;        /* amber gold */
  --color-convert-to: #C4502A;      /* terracotta */
  --color-convert-from: #6D4C8C;    /* aubergine */
  --color-edit: #B33A62;            /* raspberry */
  --color-security: #8E2B2B;        /* brick */
  --color-intelligence: #9B2C6F;    /* magenta plum */

  --bg-body: #FBF6EF;               /* warm ivory */
  --bg-gradient:
    radial-gradient(70% 48% at 12% 0%, rgba(196, 80, 42, 0.10) 0%, rgba(251, 246, 239, 0) 70%),
    radial-gradient(58% 42% at 88% 4%, rgba(155, 44, 111, 0.09) 0%, rgba(251, 246, 239, 0) 68%),
    radial-gradient(80% 55% at 50% 100%, rgba(184, 122, 18, 0.08) 0%, rgba(251, 246, 239, 0) 72%),
    linear-gradient(180deg, #FDF9F4 0%, #FBF6EF 45%, #F7EFE4 100%);

  --border-color: #EBDFD2;
  --border-hover: #D9C4AF;
  --border-glow: rgba(196, 80, 42, 0.25);

  --shadow-sm: 0 1px 3px rgba(74, 44, 32, 0.06);
  --shadow-md: 0 10px 26px -6px rgba(74, 44, 32, 0.10), 0 4px 10px -3px rgba(74, 44, 32, 0.05);
  --shadow-lg: 0 22px 46px -12px rgba(74, 44, 32, 0.16);
  --shadow-primary: 0 10px 22px -6px rgba(196, 80, 42, 0.38);
  --shadow-glow: 0 0 22px rgba(196, 80, 42, 0.18);

  /* Home page tokens */
  --hp-ink: #33222B;
  --hp-cream: #FBF6EF;
  --hp-terracotta: #C4502A;
  --hp-plum: #9B2C6F;
  --hp-gold: #B87A12;
  --hp-forest: #2F6F4E;
  --hp-raspberry: #B33A62;
}

/* Premium paper grain over the warm gradient */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

/* Lift page content above the fixed grain overlay (z-index 0).
   The header is deliberately NOT included: it already carries
   position:sticky + z-index:1000, and adding a lower z-index here
   would both kill the sticky behaviour and trap the mega-menu
   (z-index:1500) inside a stacking context below the page. */
.app-layout { position: relative; z-index: 1; }

/* Re-skin the chrome that hardcoded slate/blue */
.header { background: rgba(253, 249, 244, 0.9); }
.brand-icon { background: var(--hp-plum, #9B2C6F); }
.app-sidebar { background: #FDFAF6; }
.sidebar__header { background: linear-gradient(180deg, #F7EFE4 0%, #FDFAF6 100%); }
.sidebar-toggle-btn {
  background: rgba(196, 80, 42, 0.08);
  border-color: rgba(196, 80, 42, 0.22);
}
.dropdown-col a:hover, .mega-col a:hover { background: #F7EFE4; }
.highlight {
  background: linear-gradient(135deg, #C4502A 0%, #9B2C6F 55%, #B33A62 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nav-ai-link { color: #9B2C6F !important; font-weight: 800 !important; }

/* ==================================================================
   HOME PAGE v3  (hp-* namespace)
   Balanced: free tools and AI tools both lead. Warm premium palette.
   ================================================================== */

.hp { max-width: 1200px; }

.hp-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.hp-gradient {
  background: linear-gradient(120deg, #C4502A 0%, #B33A62 50%, #9B2C6F 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Hero: copy left, real photograph right ---------- */
.hp-hero {
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  align-items: center;
  gap: 42px;
  margin: 4px 0 20px;
}

.hp-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 16px 7px 12px;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.2px;
  color: #6B5A52;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}

.hp-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #2F6F4E;
  box-shadow: 0 0 0 4px rgba(47, 111, 78, 0.16);
}

.hp-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 800; line-height: 1.13; letter-spacing: -1.3px;
  color: var(--hp-ink);
  margin-bottom: 18px;
}

.hp-hero__sub {
  font-size: 1.05rem; line-height: 1.68;
  color: var(--color-text-muted);
  max-width: 540px;
}

.hp-hero__cta {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px;
}

.hp-hero__trust {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: 10px 22px; margin: 26px 0 0; padding: 0;
}

.hp-hero__trust li {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.85rem; font-weight: 600; color: #6B5A52;
}

.hp-hero__trust svg { color: var(--hp-forest); flex-shrink: 0; }

/* Photo frame with floating proof cards */
.hp-hero__media { position: relative; }

.hp-hero__photo {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 30px 60px -24px rgba(74, 44, 32, 0.45);
  border: 6px solid #ffffff;
  aspect-ratio: 4 / 3;
}

.hp-hero__photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Warm wash keeps any stock photo on-palette */
.hp-hero__photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(150deg, rgba(196, 80, 42, 0.22) 0%, rgba(155, 44, 111, 0.14) 55%, rgba(184, 122, 18, 0.20) 100%);
  mix-blend-mode: multiply;
}

.hp-float {
  position: absolute;
  display: flex; align-items: center; gap: 9px;
  padding: 10px 14px;
  max-width: 62%;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: 0 16px 34px -14px rgba(74, 44, 32, 0.4);
  backdrop-filter: blur(6px);
  animation: hpFloat 5.5s ease-in-out infinite;
}

.hp-float__icon {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tint); color: var(--accent);
}

.hp-float__text { min-width: 0; display: flex; flex-direction: column; }
.hp-float__label { font-size: 0.6rem; font-weight: 700; color: #9A8B83; letter-spacing: 0.5px; text-transform: uppercase; line-height: 1.5; }
.hp-float__value { font-family: var(--font-display); font-size: 0.82rem; font-weight: 800; color: var(--hp-ink); line-height: 1.3; }

/* Kept inside the photo's edges so they never crowd the viewport */
.hp-float--a { top: 9%; left: -20px; animation-delay: 0s; }
.hp-float--b { bottom: 9%; right: -20px; animation-delay: 1.8s; }

@keyframes hpFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

@media (prefers-reduced-motion: reduce) {
  .hp-float { animation: none; }
}

/* ---------- Buttons ---------- */
.hp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: 0.94rem; font-weight: 700;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.hp-btn--primary {
  background: linear-gradient(135deg, #C4502A 0%, #9B2C6F 100%);
  color: #ffffff;
  box-shadow: 0 12px 26px -10px rgba(196, 80, 42, 0.7);
}
.hp-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -12px rgba(155, 44, 111, 0.7); color: #fff; }

/* Flat variant: same gradient fill, no drop shadow (rest and hover). */
.hp-btn--flat,
.hp-btn--flat:hover { box-shadow: none; }

.hp-btn--ghost {
  background: #ffffff; color: var(--hp-ink);
  border-color: var(--border-color); box-shadow: var(--shadow-sm);
}
.hp-btn--ghost:hover { border-color: var(--hp-terracotta); color: var(--hp-terracotta); transform: translateY(-2px); }

.hp-btn--full { width: 100%; }

/* ---------- Section scaffolding ---------- */
.hp-section { margin-top: 84px; }
.hp-section--tight { margin-top: 64px; }

.hp-section__head { max-width: 730px; margin: 0 auto 36px; text-align: center; }

.hp-kicker {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 14px; border-radius: var(--radius-pill);
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--kicker, var(--hp-terracotta));
  background: #ffffff;
  border: 1px solid var(--border-color);
  margin-bottom: 14px;
}

.hp-section__head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
  font-weight: 800; letter-spacing: -0.9px; line-height: 1.16;
  color: var(--hp-ink); margin-bottom: 12px;
}

.hp-section__head p { font-size: 1rem; line-height: 1.68; color: var(--color-text-muted); }

/* ---------- Free tools band (sits directly under the hero) ---------- */
.hp-free {
  margin-top: 62px;
  padding: 40px 38px 36px;
  background: linear-gradient(135deg, #FFFDFA 0%, #F6F1E7 100%);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.hp-free::before {
  content: "";
  position: absolute; top: -70px; right: -70px;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 111, 78, 0.13) 0%, rgba(47, 111, 78, 0) 70%);
}

.hp-free__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 26px; position: relative;
}

.hp-free__head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.3vw, 1.85rem);
  font-weight: 800; letter-spacing: -0.7px; color: var(--hp-ink);
  margin-bottom: 8px;
}

.hp-free__head p { font-size: 0.96rem; color: var(--color-text-muted); max-width: 520px; }

.hp-free__badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: var(--radius-pill);
  background: rgba(47, 111, 78, 0.1);
  border: 1px solid rgba(47, 111, 78, 0.25);
  color: #2F6F4E; font-size: 0.74rem; font-weight: 800;
  letter-spacing: 0.6px; text-transform: uppercase;
  margin-bottom: 12px;
}

.hp-free__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 14px;
  position: relative;
}

.hp-free-tool {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 18px 16px;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}

.hp-free-tool:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 16px 30px -14px rgba(74, 44, 32, 0.4);
}

.hp-free-tool__icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tint); color: var(--accent);
  transition: transform 0.2s ease;
}

.hp-free-tool:hover .hp-free-tool__icon { transform: scale(1.08) rotate(-4deg); }

.hp-free-tool__name {
  font-family: var(--font-display); font-size: 0.93rem; font-weight: 700;
  color: var(--hp-ink); line-height: 1.3;
}

.hp-free__more {
  margin-top: 22px; text-align: center; position: relative;
  font-size: 0.92rem; color: var(--color-text-muted);
}
.hp-free__more a { color: var(--hp-terracotta); font-weight: 800; text-decoration: none; }
.hp-free__more a:hover { text-decoration: underline; }

/* ---------- AI showcase ---------- */
.hp-ai-hero {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 54px 40px 46px;
  text-align: center;
  margin-bottom: 30px;
  isolation: isolate;
}

.hp-ai-hero__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}

.hp-ai-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(135deg, rgba(51, 34, 43, 0.93) 0%, rgba(123, 33, 84, 0.88) 55%, rgba(155, 60, 26, 0.86) 100%);
}

.hp-ai-hero .hp-kicker {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
  color: #F7D9A8;
}

.hp-ai-hero h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 800; letter-spacing: -1.3px; line-height: 1.1;
  color: #ffffff; margin-bottom: 16px;
}

.hp-ai-hero h2 em {
  font-style: normal;
  background: linear-gradient(120deg, #F7C873 0%, #F09A6A 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hp-ai-hero p {
  font-size: 1.06rem; line-height: 1.7;
  color: rgba(255, 255, 255, 0.86);
  max-width: 660px; margin: 0 auto;
}

.hp-ai-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 20px;
}

.hp-ai-card {
  position: relative; display: flex; flex-direction: column; gap: 13px;
  padding: 30px 26px 26px;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}

.hp-ai-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent2, var(--accent)));
}

.hp-ai-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 26px 48px -20px rgba(74, 44, 32, 0.45);
}

.hp-ai-card__eyebrow {
  align-self: flex-start;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.9px; text-transform: uppercase;
  color: var(--accent); background: var(--tint);
  padding: 4px 11px; border-radius: var(--radius-pill);
}

.hp-ai-card__icon {
  width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tint); color: var(--accent);
  transition: transform 0.25s ease;
}
.hp-ai-card:hover .hp-ai-card__icon { transform: scale(1.07) rotate(-4deg); }

.hp-ai-card__title {
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 800;
  letter-spacing: -0.5px; line-height: 1.2;
}
.hp-ai-card__title a { color: var(--hp-ink); text-decoration: none; }
.hp-ai-card__title a::after { content: ""; position: absolute; inset: 0; }

.hp-ai-card__hook {
  font-size: 0.99rem; font-weight: 700; color: var(--accent);
  line-height: 1.45; margin-top: -5px;
}

.hp-ai-card__body { font-size: 0.92rem; line-height: 1.64; color: var(--color-text-muted); }

.hp-ai-card__points {
  list-style: none; padding: 18px 0 0; margin: 4px 0 0;
  display: flex; flex-direction: column; gap: 9px;
  border-top: 1px solid var(--border-color);
}

.hp-ai-card__points li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 0.87rem; line-height: 1.5; color: #5C4A44;
}
.hp-ai-card__points svg { color: var(--accent); flex-shrink: 0; margin-top: 3px; }

.hp-ai-card__cta {
  margin-top: auto; padding-top: 20px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.94rem; font-weight: 800; color: var(--accent); text-decoration: none;
}
.hp-ai-card__cta svg { transition: transform 0.2s ease; }
.hp-ai-card:hover .hp-ai-card__cta svg { transform: translateX(4px); }

/* Fourth AI tool - wide strip */
.hp-ai-strip {
  display: flex; align-items: center; gap: 22px;
  margin-top: 22px; padding: 24px 28px;
  background: linear-gradient(135deg, #FFF8EC 0%, #ffffff 60%);
  border: 1px solid #EBD5AE;
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hp-ai-strip:hover { transform: translateY(-3px); box-shadow: 0 20px 36px -20px rgba(184, 122, 18, 0.65); }

.hp-ai-strip__icon {
  width: 54px; height: 54px; flex-shrink: 0; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  background: #FBEDD2; color: #B87A12;
}

.hp-ai-strip__text { flex: 1; min-width: 0; }
.hp-ai-strip__text h3 {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-display); font-size: 1.14rem; font-weight: 800;
  color: var(--hp-ink); margin-bottom: 6px;
}
.hp-ai-strip__text p { font-size: 0.91rem; line-height: 1.6; color: var(--color-text-muted); }
.hp-ai-strip__cta { flex-shrink: 0; font-size: 0.91rem; font-weight: 800; color: #96620E; white-space: nowrap; }

/* ---------- How it works ---------- */
.hp-steps {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px;
}

.hp-step {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 26px 24px;
  background: #ffffff; border: 1px solid var(--border-color);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}

.hp-step__num {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 0.94rem;
  color: #ffffff; background: linear-gradient(135deg, #C4502A, #9B2C6F);
}

.hp-step h3 { font-family: var(--font-display); font-size: 1.04rem; font-weight: 700; color: var(--hp-ink); margin-bottom: 6px; }
.hp-step p { font-size: 0.89rem; line-height: 1.6; color: var(--color-text-muted); }

/* ---------- Tool finder (layout kept as-is, recoloured) ---------- */
.hp-finder { max-width: 900px; margin: 0 auto 36px; }
.hp-finder__search { position: relative; margin-bottom: 18px; }

.hp-finder__search input {
  width: 100%; padding: 15px 20px 15px 50px;
  font-family: var(--font-body); font-size: 0.97rem; color: var(--color-text-main);
  background: #ffffff; border: 1px solid var(--border-color);
  border-radius: var(--radius-pill); box-shadow: var(--shadow-md); outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.hp-finder__search input:focus {
  border-color: var(--hp-terracotta);
  box-shadow: 0 0 0 4px rgba(196, 80, 42, 0.13), var(--shadow-md);
}

.hp-finder__icon {
  position: absolute; left: 19px; top: 50%; transform: translateY(-50%);
  color: var(--color-text-light); pointer-events: none; display: flex;
}

.hp-finder__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }

.hp-chip {
  padding: 8px 17px;
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 700;
  color: var(--color-text-muted);
  background: #ffffff; border: 1px solid var(--border-color);
  border-radius: var(--radius-pill); cursor: pointer;
  transition: all 0.18s ease;
}
.hp-chip:hover { color: var(--hp-ink); border-color: var(--border-hover); }
.hp-chip.is-active {
  color: #ffffff;
  background: var(--chip, linear-gradient(135deg, #C4502A, #9B2C6F));
  border-color: transparent;
  box-shadow: 0 7px 16px -7px rgba(74, 44, 32, 0.6);
}

.hp-noresult { text-align: center; color: var(--color-text-muted); font-size: 0.95rem; padding: 30px 0; }

/* ---------- Tool categories ---------- */
.hp-cat { margin-bottom: 44px; }
.hp-cat[hidden] { display: none; }

.hp-cat__head {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 16px; margin-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
}

.hp-cat__icon {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cat-tint); color: var(--cat);
}

.hp-cat__title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; letter-spacing: -0.3px; color: var(--hp-ink); }
.hp-cat__tagline { font-size: 0.87rem; color: var(--color-text-muted); margin-top: 2px; }

.hp-cat__count {
  margin-left: auto; flex-shrink: 0;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--cat); background: var(--cat-tint);
  padding: 5px 12px; border-radius: var(--radius-pill);
}

.hp-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 14px; }

.hp-tool {
  display: flex; align-items: flex-start; gap: 14px; padding: 18px;
  background: #ffffff; border: 1px solid var(--border-color);
  border-radius: var(--radius-md); text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}
.hp-tool[hidden] { display: none; }
.hp-tool:hover {
  transform: translateY(-3px);
  border-color: var(--cat);
  box-shadow: 0 15px 28px -14px rgba(74, 44, 32, 0.42);
}

.hp-tool__icon {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cat-tint); color: var(--cat);
  transition: transform 0.2s ease;
}
.hp-tool:hover .hp-tool__icon { transform: scale(1.08) rotate(-4deg); }

.hp-tool__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hp-tool__name {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--font-display); font-size: 0.98rem; font-weight: 700; color: var(--hp-ink);
}
.hp-tool__desc { font-size: 0.85rem; line-height: 1.5; color: var(--color-text-muted); }

/* ---------- Tags ---------- */
.hp-tag {
  font-size: 0.61rem; font-weight: 800; letter-spacing: 0.7px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px; line-height: 1.4;
}
.hp-tag--ai   { background: linear-gradient(135deg, #9B2C6F, #C4502A); color: #ffffff; }
.hp-tag--pro  { background: #9B2C6F; color: #ffffff; }
.hp-tag--hot  { background: #FBE4DC; color: #B23F1E; }
.hp-tag--new  { background: #DCEDE2; color: #2F6F4E; }
.hp-tag--free { background: #E6F0E9; color: #2F6F4E; }

/* ---------- Use cases with photography ---------- */
.hp-usecases { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 20px; }

.hp-usecase {
  background: #ffffff; border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.hp-usecase:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.hp-usecase__photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.hp-usecase__photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.hp-usecase:hover .hp-usecase__photo img { transform: scale(1.06); }

.hp-usecase__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, color-mix(in srgb, var(--uc) 55%, transparent) 0%, rgba(51, 34, 43, 0.35) 100%);
  mix-blend-mode: multiply;
}

.hp-usecase__tag {
  position: absolute; left: 14px; bottom: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.95);
  color: var(--uc); font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.5px; text-transform: uppercase;
}

.hp-usecase__body { padding: 20px 22px 24px; }
.hp-usecase h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--hp-ink); margin-bottom: 8px; }
.hp-usecase p { font-size: 0.88rem; line-height: 1.62; color: var(--color-text-muted); }

/* ---------- Why / trust ---------- */
.hp-why { display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: 20px; }

.hp-why-card {
  padding: 28px 26px; background: #ffffff;
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.hp-why-card__icon {
  width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tint); color: var(--w); margin-bottom: 16px;
}

.hp-why-card h3 { font-family: var(--font-display); font-size: 1.06rem; font-weight: 700; color: var(--hp-ink); margin-bottom: 9px; }
.hp-why-card p { font-size: 0.89rem; line-height: 1.66; color: var(--color-text-muted); }

/* ---------- Pricing teaser ---------- */
.hp-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 20px; align-items: stretch; }

.hp-plan {
  position: relative; display: flex; flex-direction: column;
  padding: 30px 26px; background: #ffffff;
  border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.hp-plan--featured {
  border: 2px solid var(--hp-plum);
  box-shadow: 0 20px 44px -22px rgba(155, 44, 111, 0.65);
}

.hp-plan__flag {
  position: absolute; top: -13px; left: 26px;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.7px; text-transform: uppercase;
  color: #ffffff; background: linear-gradient(135deg, #C4502A, #9B2C6F);
  padding: 4px 13px; border-radius: var(--radius-pill);
}

.hp-plan h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; color: var(--hp-ink); margin-bottom: 6px; }
.hp-plan__price {
  font-family: var(--font-display); font-size: 2.1rem; font-weight: 800;
  letter-spacing: -1px; color: var(--hp-ink); margin-bottom: 20px;
}
.hp-plan__price span { font-family: var(--font-body); font-size: 0.84rem; font-weight: 500; color: var(--color-text-light); letter-spacing: 0; }

.hp-plan ul { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.hp-plan li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.88rem; line-height: 1.5; color: #5C4A44; }
.hp-plan li svg { color: var(--hp-forest); flex-shrink: 0; margin-top: 3px; }

/* ---------- FAQ ---------- */
.hp-faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }

.hp-faq__item {
  background: #ffffff; border: 1px solid var(--border-color);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden;
}

.hp-faq__item summary {
  padding: 18px 22px;
  font-family: var(--font-display); font-size: 0.99rem; font-weight: 700; color: var(--hp-ink);
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.hp-faq__item summary::-webkit-details-marker { display: none; }
.hp-faq__item summary::after {
  content: "+"; flex-shrink: 0; font-size: 1.3rem; font-weight: 400;
  color: var(--hp-terracotta); transition: transform 0.2s ease;
}
.hp-faq__item[open] summary::after { transform: rotate(45deg); }
.hp-faq__item p { padding: 0 22px 20px; font-size: 0.91rem; line-height: 1.7; color: var(--color-text-muted); }

/* ---------- Closing CTA ---------- */
.hp-final {
  margin-top: 84px; padding: 54px 32px; text-align: center;
  background: linear-gradient(135deg, #33222B 0%, #6B2348 52%, #A6431F 100%);
  border-radius: var(--radius-lg); color: #ffffff;
  position: relative; overflow: hidden;
}

.hp-final::before {
  content: ""; position: absolute; top: -120px; left: 50%; transform: translateX(-50%);
  width: 520px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 200, 115, 0.22) 0%, rgba(247, 200, 115, 0) 70%);
}

.hp-final h2 {
  position: relative;
  font-family: var(--font-display); font-size: clamp(1.55rem, 2.7vw, 2.1rem);
  font-weight: 800; letter-spacing: -0.7px; margin-bottom: 12px;
}
.hp-final p { position: relative; font-size: 1rem; line-height: 1.65; color: rgba(255,255,255,0.82); max-width: 570px; margin: 0 auto; }
.hp-final .hp-hero__cta { position: relative; justify-content: center; }
.hp-final .hp-btn--ghost {
  background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.26);
  color: #ffffff; box-shadow: none;
}
.hp-final .hp-btn--ghost:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255,255,255,0.45); color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .hp-hero { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .hp-hero__sub { margin-left: auto; margin-right: auto; }
  .hp-hero__cta, .hp-hero__trust { justify-content: center; }
  .hp-hero__media { max-width: 620px; margin: 0 auto; }
  .hp-float--a { left: -14px; }
  .hp-float--b { right: -10px; }
}

@media (max-width: 900px) {
  .hp-ai-strip { flex-wrap: wrap; }
  .hp-ai-strip__cta { width: 100%; }
}

@media (max-width: 768px) {
  .hp-section { margin-top: 60px; }
  .hp-section--tight { margin-top: 50px; }
  .hp-hero__cta .hp-btn { width: 100%; }
  .hp-free { padding: 28px 20px 26px; }
  .hp-free__grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .hp-ai-hero { padding: 38px 22px 34px; }
  .hp-cat__head { flex-wrap: wrap; }
  .hp-cat__count { margin-left: 0; }
  .hp-float { display: none; }
  .hp-final { margin-top: 60px; padding: 40px 22px; }
}

/* Sidebar badges - warm palette (overrides the original slate/violet set) */
.sidebar__badge--hot { background: rgba(196, 80, 42, 0.14); color: #C4502A; }
.sidebar__badge--ai  { background: rgba(155, 44, 111, 0.14); color: #9B2C6F; }
.sidebar__badge--pro { background: rgba(47, 111, 78, 0.14);  color: #2F6F4E; }
.sidebar__badge--new { background: rgba(184, 122, 18, 0.16); color: #96620E; }

/* ---------- Hero: AI tool shortcut pills ---------- */
.hp-hero__ai {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px dashed var(--border-hover);
}

.hp-hero__ai-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--hp-plum);
  margin-bottom: 12px;
}

.hp-hero__ai-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.hp-ai-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px 5px 5px;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s ease, border-color 0.18s ease;
}

.hp-ai-pill:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 12px 22px -12px color-mix(in srgb, var(--accent) 75%, transparent);
}

.hp-ai-pill__icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tint);
  color: var(--accent);
  transition: transform 0.18s ease;
}

.hp-ai-pill:hover .hp-ai-pill__icon { transform: scale(1.1) rotate(-6deg); }

.hp-ai-pill__name {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--hp-ink);
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .hp-hero__ai { display: inline-block; text-align: center; }
  .hp-hero__ai-row { justify-content: center; }
}

@media (max-width: 768px) {
  .hp-hero__ai { display: block; }
  .hp-ai-pill { padding: 6px 13px 6px 6px; }
  .hp-ai-pill__name { font-size: 0.8rem; }
}

/* The hero copy column grew with the AI pills. Widen the photo column a
   little rather than squaring the image off - a 1:1 crop cuts the mug out
   of frame and loses the composition, and a centred landscape shot with
   its two floating cards reads as deliberate breathing room. */
@media (min-width: 1181px) {
  .hp-hero { grid-template-columns: 1fr 0.98fr; }
  .hp-hero__photo { aspect-ratio: 5 / 4; }
}

/* ==================================================================
   HERO ACTION BAR
   The AI pills were stacking at the bottom of the narrow copy column
   and falling below the fold. Giving the action zone its own full-width
   grid row puts all five in one line, higher up the page.
   ================================================================== */
.hp-hero {
  grid-template-areas:
    "copy media"
    "actions actions";
  align-items: center;
  row-gap: 30px;
}

.hp-hero__copy    { grid-area: copy; }
.hp-hero__media   { grid-area: media; }
.hp-hero__actions { grid-area: actions; }

.hp-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 30px;
  padding: 20px 26px;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 252, 247, 0.78) 100%);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hp-hero__actions-free {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex-shrink: 0;
  padding-right: 30px;
  border-right: 1px dashed var(--border-hover);
}

/* The trust list is compact now that it sits beside the button */
.hp-hero__actions .hp-hero__trust {
  margin: 0;
  gap: 6px 16px;
}

.hp-hero__actions .hp-hero__trust li { font-size: 0.78rem; }

/* Inside the bar the AI block is a sibling column, not a stacked block */
.hp-hero__actions .hp-hero__ai {
  flex: 1;
  min-width: 0;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.hp-hero__actions .hp-hero__ai-label { margin-bottom: 10px; }

@media (max-width: 1180px) {
  .hp-hero {
    grid-template-areas:
      "copy"
      "media"
      "actions";
  }
  .hp-hero__actions { justify-content: center; }
  .hp-hero__actions-free {
    align-items: center;
    padding-right: 0;
    border-right: none;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--border-hover);
    width: 100%;
  }
  .hp-hero__actions .hp-hero__trust { justify-content: center; }
  .hp-hero__actions .hp-hero__ai { flex: 1 1 100%; text-align: center; }
}

@media (max-width: 768px) {
  .hp-hero__actions { padding: 18px 16px; gap: 14px; }
  .hp-hero__actions-free .hp-btn { width: 100%; }
}

/* Trust list lives back in the copy column, so the action bar's free
   column stays button-width and the five AI pills get one clean row. */
.hp-hero__copy .hp-hero__trust { margin-top: 22px; gap: 8px 20px; }
.hp-hero__copy .hp-hero__trust li { font-size: 0.82rem; }

.hp-hero__actions-free {
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

/* Between 1181-1399px the sidebar leaves the action bar too narrow for a
   button column AND five pills side by side. Stack the bar internally so
   the pills always keep a single, full-width row rather than orphaning one. */
@media (max-width: 1399px) {
  .hp-hero__actions-free {
    flex: 1 1 100%;
    padding-right: 0;
    border-right: none;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--border-hover);
  }
  .hp-hero__actions .hp-hero__ai { flex: 1 1 100%; }
}

/* ==================================================================
   BRAND MARK
   A flat plum tile (no gradient, gloss, bevel or drop shadow) beside the
   two-tone wordmark: "The PDF" in ink and "Lab" in gradient type, both
   set at the same display size so the name reads as one word.
   ================================================================== */
.brand {
  gap: 11px;
}

.brand-icon {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--hp-plum, #9B2C6F);
  box-shadow: none;
  transition: background-color 0.22s ease;
  overflow: hidden;
}

/* No sheen: the mark is deliberately flat */
.brand-icon::after { content: none; }

.brand-icon svg {
  position: relative;
  filter: none;
}

.brand:hover .brand-icon {
  transform: none;
  background: #33222B;
  box-shadow: none;
}

.brand-text {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 1.34rem;
  font-weight: 800;
  letter-spacing: -0.7px;
  color: var(--hp-ink, #33222B);
  line-height: 1;
}

/* "Lab" as gradient type rather than a chip - matched to "The PDF" in
   size and weight so only the colour separates the two halves. */
.brand-tag {
  font-family: var(--font-display);
  font-size: 1.34rem;
  font-weight: 800;
  letter-spacing: -0.7px;
  text-transform: none;
  padding: 0;
  border-radius: 0;
  line-height: 1;
  background: linear-gradient(135deg, #C4502A 0%, #9B2C6F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #9B2C6F;
}

/* Footer sits on a tinted panel - keep the wordmark readable there */
.footer .brand-name,
.footer .brand-tag { font-size: 1.2rem; }

/* The two halves are one name - never let them break onto two lines */
.brand-name, .brand-tag { white-space: nowrap; }
.brand { flex-shrink: 0; }

@media (max-width: 768px) {
  .brand-icon { width: 36px; height: 36px; border-radius: 10px; }
  .brand-name, .brand-tag { font-size: 1.16rem; letter-spacing: -0.6px; }
}

/* Phones: the auth buttons crowd the header, so the lockup steps down and
   the buttons give back some of their padding. */
@media (max-width: 520px) {
  .brand { gap: 8px; }
  .brand-text { gap: 4px; }
  .brand-icon { width: 32px; height: 32px; border-radius: 9px; }
  .brand-name, .brand-tag { font-size: 0.94rem; letter-spacing: -0.4px; }
  .nav__actions { gap: 8px; }
  .nav__actions .btn { padding: 8px 12px; font-size: 0.82rem; white-space: nowrap; }
}

/* ==================================================================
   PRICING PAGE (pr-* namespace) - reuses the home page tokens
   ================================================================== */
.pr { max-width: 1120px; }

.pr-crumbs {
  font-size: 0.83rem;
  color: var(--color-text-light);
  margin-bottom: 26px;
}
.pr-crumbs a { color: var(--color-text-muted); font-weight: 600; }
.pr-crumbs a:hover { color: var(--hp-terracotta); }
.pr-crumbs span[aria-hidden] { margin: 0 6px; }

.pr-hero {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 46px;
}

.pr-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -1.1px;
  line-height: 1.15;
  color: var(--hp-ink);
  margin-bottom: 16px;
}

.pr-hero p {
  font-size: 1.04rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* ---------- Plan cards ---------- */
.pr-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  align-items: stretch;
}

.pr-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px 28px;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.pr-plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.pr-plan--featured {
  border: 2px solid var(--hp-plum);
  box-shadow: 0 22px 46px -22px rgba(155, 44, 111, 0.6);
}

.pr-plan__flag {
  position: absolute;
  top: -13px;
  left: 28px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(135deg, #C4502A, #9B2C6F);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
}

.pr-plan__name {
  font-family: var(--font-display);
  font-size: 1.24rem;
  font-weight: 800;
  color: var(--hp-ink);
  margin-bottom: 7px;
}

.pr-plan__pitch {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: 20px;
  min-height: 2.9em;
}

.pr-plan__price {
  font-family: var(--font-display);
  font-size: 2.7rem;
  font-weight: 800;
  letter-spacing: -1.6px;
  color: var(--hp-ink);
  line-height: 1;
  margin-bottom: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border-color);
}

.pr-plan__currency { font-size: 1.4rem; vertical-align: super; margin-right: 2px; }

.pr-plan__period {
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-text-light);
}

.pr-plan__features {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex-grow: 1;
}

.pr-plan__features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.89rem;
  line-height: 1.5;
  color: #5C4A44;
}

.pr-plan__features li.is-out { color: var(--color-text-light); }

/* ---------- Tick / cross ---------- */
.pr-yes, .pr-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-top: 1px;
}

.pr-yes { background: rgba(47, 111, 78, 0.13); color: var(--hp-forest); }
.pr-no  { background: rgba(122, 106, 99, 0.11); color: #A89A93; }

.pr-val { font-size: 0.87rem; font-weight: 700; color: var(--hp-ink); }

.pr-note {
  text-align: center;
  font-size: 0.86rem;
  color: var(--color-text-light);
  margin-top: 22px;
}

/* ---------- Comparison table ---------- */
.pr-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

.pr-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}

.pr-table th, .pr-table td {
  padding: 14px 18px;
  text-align: center;
  border-bottom: 1px solid var(--border-color);
}

.pr-table thead th {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--hp-ink);
  background: #FBF6EF;
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
}

.pr-table thead th span {
  display: block;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--color-text-light);
  margin-top: 3px;
}

.pr-table tbody th {
  text-align: left;
  font-size: 0.88rem;
  font-weight: 600;
  color: #5C4A44;
  white-space: normal;
}

.pr-table tbody tr:last-child th,
.pr-table tbody tr:last-child td { border-bottom: none; }

.pr-table tbody tr:hover { background: #FDFAF6; }

.pr-table .is-featured { background: rgba(155, 44, 111, 0.045); }
.pr-table thead th.is-featured { background: rgba(155, 44, 111, 0.09); }

/* ---------- Free vs paid split ---------- */
.pr-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}

.pr-split__card {
  padding: 30px 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

.pr-split__card--free { border-left: 4px solid var(--hp-forest); }
.pr-split__card--paid { border-left: 4px solid var(--hp-plum); }

.pr-split__card h3 {
  font-family: var(--font-display);
  font-size: 1.14rem;
  font-weight: 800;
  color: var(--hp-ink);
  margin-bottom: 12px;
}

.pr-split__card p {
  font-size: 0.92rem;
  line-height: 1.72;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}

.pr-split__link {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--hp-terracotta);
  text-decoration: none;
}
.pr-split__card--paid .pr-split__link { color: var(--hp-plum); }
.pr-split__link:hover { text-decoration: underline; }

/* ---------- Nav pricing link ---------- */
.nav-price-link {
  color: var(--hp-gold) !important;
  font-weight: 800 !important;
}
.nav-price-link.is-current { color: var(--hp-terracotta) !important; }

@media (max-width: 768px) {
  .pr-plan__pitch { min-height: 0; }
  .pr-plan { padding: 26px 22px 24px; }
}

/* ==================================================================
   NAV DROPDOWN ALIGNMENT
   The base rule anchors the panel with `left: 0`, so a wide two-column
   menu (Edit & Sign, Convert PDF) sprawls off to the right of its
   trigger. Centre it on the nav item instead, and keep it inside the
   viewport if centring would push it past an edge.
   ================================================================== */
.nav__item.dropdown { position: relative; }

.dropdown-menu {
  left: 50%;
  transform: translateX(-50%);
  max-width: min(92vw, 640px);
}

/* The invisible hover bridge must span the panel, not the old left edge */
.dropdown-menu::before {
  left: 0;
  right: 0;
}

/* Columns keep their natural content width (the original flex behaviour).
   Forcing equal tracks fights the panel's shrink-to-fit width: equal
   tracks with a zero minimum collapse the columns to nothing, and a
   max-content minimum just restores the uneven widths anyway. */

/* No edge exceptions are needed: the nav starts 290px in (past the sidebar
   rail), so half of even the widest panel still clears the viewport edge. */

/* ==================================================================
   COLOURED ICONS ON EVERY MENU OPTION
   Nav dropdowns, mega-menu and sidebar all render a tinted icon chip
   via toolMenuLink() / toolMeta(); --ico carries the category hue.
   ================================================================== */
.dropdown-col a,
.mega-col a,
.sidebar__item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.menu-ico {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ico, var(--color-text-muted));
  background: color-mix(in srgb, var(--ico, #7A6A63) 13%, #ffffff);
  transition: transform 0.18s ease, background 0.18s ease;
}

/* Fallback for engines without color-mix (Safari < 16.2) */
@supports not (background: color-mix(in srgb, red 10%, white)) {
  .menu-ico { background: #F5EDE4; }
}

.menu-label {
  min-width: 0;
  white-space: nowrap;
}

.dropdown-col a:hover .menu-ico,
.mega-col a:hover .menu-ico {
  transform: scale(1.1) rotate(-5deg);
  background: color-mix(in srgb, var(--ico, #7A6A63) 22%, #ffffff);
}

/* The mega-menu is dense - a slightly smaller chip keeps 7 columns tidy */
.mega-col .menu-ico { width: 24px; height: 24px; border-radius: 7px; }
.mega-col a { padding: 5px 6px; }

/* ---------- Sidebar ---------- */
.sidebar__item-ico {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ico, var(--color-text-muted));
  background: color-mix(in srgb, var(--ico, #7A6A63) 12%, #ffffff);
  transition: transform 0.18s ease;
}

@supports not (background: color-mix(in srgb, red 10%, white)) {
  .sidebar__item-ico { background: #F5EDE4; }
}

.sidebar__item:hover .sidebar__item-ico { transform: scale(1.08); }

.sidebar__item.active .sidebar__item-ico {
  background: var(--ico);
  color: #ffffff;
}

.sidebar__item-name { flex: 1; min-width: 0; }

/* The mega-menu packs 7 columns into a fixed panel. The icon chips add
   ~36px per row, which pushed the last column past the panel edge, so the
   labels here must be free to wrap and the columns free to shrink to their
   1fr track (the base rule sets white-space: nowrap for the narrow menus). */
.mega-col { min-width: 0; }

.mega-col a {
  white-space: normal;
  align-items: flex-start;
  line-height: 1.35;
  gap: 8px;
}

.mega-col .menu-ico {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  margin-top: 1px;
}

.mega-col .menu-label { white-space: normal; }

/* ==================================================================
   ALL TOOLS PAGE (tp-* namespace) - tools.php
   Only the page-specific furniture lives here: the hero, the stat row,
   the sticky finder and the free-vs-AI split. The catalogue itself
   reuses the home page's .hp-cat / .hp-tool cards so a card looks the
   same wherever it is rendered.
   ================================================================== */
.tp { max-width: 1200px; }

/* ---------- Hero ---------- */
.tp-hero {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 8px;
}

.tp-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -1.4px;
  line-height: 1.1;
  color: var(--hp-ink);
  margin-bottom: 16px;
}

.tp-hero__sub {
  font-size: 1.04rem;
  line-height: 1.72;
  color: var(--color-text-muted);
  max-width: 640px;
  margin: 0 auto;
}

/* ---------- Stat row ---------- */
.tp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 34px auto 0;
  max-width: 660px;
}

.tp-stat {
  padding: 16px 12px 14px;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.tp-stat dt {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: 6px;
}

.tp-stat dd {
  font-family: var(--font-display);
  font-size: 1.72rem;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--accent, var(--hp-ink));
}

/* ---------- Most used band ---------- */
.tp-popular {
  margin-top: 46px;
  padding: 30px 30px 28px;
  background: linear-gradient(135deg, #FFFDFA 0%, #F6F1E7 100%);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.tp-popular__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--hp-terracotta);
  margin-bottom: 18px;
}

/* ---------- Finder ---------- */
.tp-catalogue { scroll-margin-top: 90px; }

/* Stays put. A sticky version rode over the cards on the way down - the
   translucent panel let the tool titles show through it and there is already
   a search box in the sidebar for anyone deep in the list. */
.tp-finder {
  padding: 16px 18px 12px;
  margin-bottom: 30px;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.tp-count {
  margin-top: 12px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-text-light);
}
.tp-count span { font-weight: 700; color: var(--color-text-muted); }

/* ---------- Free vs AI split ---------- */
.tp-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.tp-split__card {
  padding: 28px 26px 26px;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.tp-split__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--tint);
  color: var(--accent);
  margin-bottom: 14px;
}

.tp-split__card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--hp-ink);
  margin-bottom: 9px;
}

.tp-split__card p {
  font-size: 0.93rem;
  line-height: 1.68;
  color: var(--color-text-muted);
  margin-bottom: 18px;
}

/* ---------- Responsive ---------- */
@media (max-width: 700px) {
  .tp-stats { grid-template-columns: repeat(2, 1fr); }
  .tp-popular { padding: 24px 20px 22px; }

  /* On a phone the panel around the search box is just chrome - drop it and
     give the width back to the input and the chips. */
  .tp-finder { padding: 0; border: 0; background: none; box-shadow: none; }
}

/* The "ALL PDF TOOLS" nav item is now a link to tools.php as well as a
   mega-menu trigger - mark it when you are on that page. */
.mega-toggle.is-current {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

/* ==================================================================
   AI access gate - the unlock screen the paid AI tools show until the
   session has been unlocked (includes/ai-gate.php)
   ================================================================== */
.ai-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px 72px;
}

.ai-gate__card {
  width: 100%;
  max-width: 520px;
  text-align: center;
  padding: 40px 34px 34px;
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

.ai-gate__crest {
  display: flex;              /* own line, above the pill */
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 16px;
  border-radius: 16px;
  background: rgba(155, 44, 111, 0.12);
  color: #9B2C6F;
}

.ai-gate__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  margin-bottom: 14px;
  border-radius: var(--radius-pill);
  background: rgba(184, 122, 18, 0.13);
  border: 1px solid rgba(184, 122, 18, 0.28);
  color: #8A5A0C;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.ai-gate__pill .premium-mark {
  margin-left: 0;
}

.ai-gate__title {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--color-surface-dark);
  margin-bottom: 10px;
}

.ai-gate__lede {
  font-size: 0.95rem;
  line-height: 1.68;
  color: var(--color-text-muted);
  margin-bottom: 22px;
}

.ai-gate__error {
  padding: 10px 14px;
  margin-bottom: 16px;
  border-radius: var(--radius-sm);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #B91C1C;
  font-size: 0.88rem;
  font-weight: 600;
}

.ai-gate__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.ai-gate__input {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: #F8FAFC;
  font-size: 0.98rem;
  font-family: var(--font-body);
  color: var(--color-text-main);
  outline: none;
  text-align: center;
  letter-spacing: 1px;
  transition: all 0.2s ease;
}

.ai-gate__input:focus {
  background: #FFFFFF;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.ai-gate__submit {
  justify-content: center;
  padding: 13px 20px;
  font-size: 0.98rem;
}

.ai-gate__foot {
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--color-text-light);
}

.ai-gate__foot a {
  color: var(--color-primary);
  font-weight: 600;
}

@media (max-width: 560px) {
  .ai-gate { padding: 28px 14px 52px; }
  .ai-gate__card { padding: 30px 20px 26px; }
  .ai-gate__title { font-size: 1.4rem; }
}