/* ==========================================================================
   EZTagGenerator — Instagram Hashtag Generator Luxury Design
   Palette: Luxury White #FFFFFF, Warm Off-White #FAF9F6, Emerald Green #0F7A5C, Gold #C6A15B
   Headings: #14201C | Body: #3D4A44

   3-ROLE FONT SYSTEM:
   1. Main headings ONLY: 'Times New Roman', Times, serif (Bold 700)
   2. Sub-headings, card titles, buttons, chips, badges: 'Montserrat', sans-serif (Bold 700 / Semibold 600)
   3. Body & descriptions: 'Cabin', sans-serif (Regular 400, line-height 1.65)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');

:root {
  /* Core Colors */
  --eztg-white: #FFFFFF;
  --eztg-offwhite: #FAF9F6;
  --eztg-border: #E8E6DF;
  --eztg-border-subtle: #F0EEE9;
  
  /* Emerald Green Accents */
  --eztg-emerald: #0F7A5C;
  --eztg-emerald-hover: #0C6650;
  --eztg-emerald-dark: #0B3D2E;
  --eztg-emerald-light: rgba(15, 122, 92, 0.08);
  --eztg-emerald-glow: rgba(15, 122, 92, 0.2);
  
  /* Luxury Gold Accent (sparingly used) */
  --eztg-gold: #C6A15B;
  --eztg-gold-subtle: rgba(198, 161, 91, 0.12);
  --eztg-gold-border: rgba(198, 161, 91, 0.35);
  --eztg-gold-text: #8A651E;
  
  /* Typography Colors */
  --eztg-text-heading: #14201C;
  --eztg-text-body: #3D4A44;
  --eztg-text-muted: #6B7A72;
  
  /* Font Families */
  --eztg-font-display: 'Times New Roman', Times, serif;     /* Main H1 & Section H2s only */
  --eztg-font-subheading: 'Montserrat', sans-serif;          /* Sub-headings, card titles, buttons, chips */
  --eztg-font-body: 'Cabin', sans-serif;                    /* Body text & descriptions */
  
  /* Line Heights */
  --eztg-lh-h1: 1.15;
  --eztg-lh-h2: 1.24;
  --eztg-lh-subheading: 1.28;
  --eztg-lh-body: 1.65;
  
  /* Geometry & Shadows */
  --eztg-radius-card: 18px;
  --eztg-radius-btn: 12px;
  --eztg-radius-pill: 999px;
  --eztg-shadow-card: 0 8px 30px rgba(0, 0, 0, 0.06);
  --eztg-shadow-hover: 0 12px 36px rgba(0, 0, 0, 0.09);
  --eztg-container-max: 1120px;
}

/* Base Wrapper & Resets */
.eztg-wrapper {
  background-color: var(--eztg-white);
  color: var(--eztg-text-body);
  font-family: var(--eztg-font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: var(--eztg-lh-body);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  width: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.eztg-wrapper *,
.eztg-wrapper *::before,
.eztg-wrapper *::after {
  box-sizing: border-box;
}

/* Paragraphs & Descriptions */
.eztg-wrapper p,
.eztg-hero-subtitle,
.eztg-section-subtitle,
.eztg-step-desc,
.eztg-formula-intro,
.eztg-formula-desc,
.eztg-reels-text,
.eztg-tip-desc,
.eztg-faq-answer-inner,
.eztg-cta-desc {
  font-family: var(--eztg-font-body);
  font-weight: 400;
  line-height: var(--eztg-lh-body);
}

/* ==========================================================================
   ROLE 1: MAIN HEADINGS ONLY ('Times New Roman' — Bold 700)
   ========================================================================== */
.eztg-hero-title,
.eztg-section-h2,
.eztg-cta-title {
  font-family: var(--eztg-font-display);
  font-weight: 700;
  color: var(--eztg-text-heading);
  letter-spacing: -0.015em;
}

/* ==========================================================================
   ROLE 2: SUB-HEADINGS & CARD TITLES ('Montserrat' — Bold 700)
   ========================================================================== */
.eztg-results-title,
.eztg-step-title,
.eztg-formula-title,
.eztg-cat-title,
.eztg-tip-title,
.eztg-faq-question,
.eztg-step-num,
.eztg-reels-label {
  font-family: var(--eztg-font-subheading);
  font-weight: 700;
  color: var(--eztg-text-heading);
  line-height: var(--eztg-lh-subheading);
  letter-spacing: -0.01em;
}

/* Container */
.eztg-container {
  max-width: var(--eztg-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  width: 100%;
}

/* ==========================================================================
   HERO & TOOL SECTION
   ========================================================================== */
.eztg-hero-section {
  background-color: var(--eztg-white);
  position: relative;
  padding-top: 64px;
  padding-bottom: 72px;
  border-bottom: 1px solid var(--eztg-border);
}

.eztg-hero-content {
  text-align: center;
  position: relative;
}

/* Badge */
.eztg-badge-wrap {
  margin-bottom: 22px;
}

.eztg-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--eztg-offwhite);
  border: 1px solid var(--eztg-gold-border);
  color: var(--eztg-gold-text);
  font-family: var(--eztg-font-subheading);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 7px 18px;
  border-radius: var(--eztg-radius-pill);
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(198, 161, 91, 0.08);
}

.eztg-badge-dot {
  width: 7px;
  height: 7px;
  background-color: var(--eztg-gold);
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.eztg-hero-title {
  font-size: clamp(2.25rem, 5vw, 3.4rem);
  line-height: var(--eztg-lh-h1);
  margin: 0 auto 16px;
  max-width: 860px;
}

.eztg-hero-subtitle {
  font-size: 1.125rem;
  color: var(--eztg-text-muted);
  max-width: 680px;
  margin: 0 auto 38px;
  line-height: var(--eztg-lh-body);
}

/* Generator Card (Luxury White Card) */
.eztg-tool-card {
  background-color: var(--eztg-white);
  border: 1px solid var(--eztg-border);
  border-radius: var(--eztg-radius-card);
  padding: 32px;
  max-width: 860px;
  margin: 0 auto;
  box-shadow: var(--eztg-shadow-card);
  text-align: left;
}

/* Search Form Input Group */
.eztg-input-group {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.eztg-input-wrapper {
  position: relative;
  flex: 1;
}

.eztg-input {
  width: 100%;
  min-height: 52px;
  height: 54px;
  background-color: var(--eztg-offwhite);
  border: 1px solid var(--eztg-border);
  border-radius: var(--eztg-radius-btn);
  padding: 0 20px;
  font-size: 1.0625rem;
  color: var(--eztg-text-heading);
  font-family: var(--eztg-font-subheading);
  font-weight: 500;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.eztg-input::placeholder {
  color: var(--eztg-text-muted);
  opacity: 0.85;
  font-family: var(--eztg-font-body);
}

.eztg-input:focus {
  outline: none;
  background-color: var(--eztg-white);
  border-color: var(--eztg-emerald);
  box-shadow: 0 0 0 3px var(--eztg-emerald-glow);
}

/* Buttons */
.eztg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  height: auto;
  padding: 14px 28px;
  border-radius: var(--eztg-radius-btn);
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: var(--eztg-font-subheading);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid transparent;
  letter-spacing: 0.01em;
}

.eztg-btn-primary {
  background-color: var(--eztg-emerald);
  border-color: var(--eztg-emerald);
  color: var(--eztg-white);
  box-shadow: 0 4px 14px rgba(15, 122, 92, 0.2);
}

.eztg-btn-primary:hover:not(:disabled) {
  background-color: var(--eztg-emerald-hover);
  border-color: var(--eztg-emerald-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 122, 92, 0.28);
}

.eztg-btn-secondary {
  background-color: var(--eztg-offwhite);
  border: 1px solid var(--eztg-border);
  color: var(--eztg-text-heading);
}

.eztg-btn-secondary:hover:not(:disabled) {
  border-color: var(--eztg-emerald);
  color: var(--eztg-emerald);
  background-color: var(--eztg-emerald-light);
  transform: translateY(-1px);
}

.eztg-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

.eztg-btn-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--eztg-white);
  border-radius: 50%;
  animation: eztg-spin 0.75s linear infinite;
  display: none;
  flex-shrink: 0;
}

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

.eztg-btn.eztg-loading .eztg-btn-spinner {
  display: inline-block;
}

/* ==========================================================================
   QUICK TOPIC SUGGESTION PILLS — SIMPLE WRAPPING ROW (STRICTLY NO SLIDERS)
   ========================================================================== */
.eztg-quick-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
  overflow: visible;
}

.eztg-quick-label {
  font-family: var(--eztg-font-subheading);
  font-size: 0.8125rem;
  color: var(--eztg-text-muted);
  font-weight: 600;
  margin-right: 4px;
}

.eztg-quick-pill {
  background-color: var(--eztg-offwhite);
  border: 1px solid var(--eztg-border);
  color: var(--eztg-text-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: var(--eztg-font-subheading);
  padding: 6px 14px;
  min-height: 36px;
  border-radius: var(--eztg-radius-pill);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
  display: inline-flex;
  align-items: center;
}

.eztg-quick-pill:hover {
  border-color: var(--eztg-emerald);
  color: var(--eztg-emerald);
  background-color: var(--eztg-emerald-light);
  transform: translateY(-1px);
}

/* Error Message Box */
.eztg-error-msg {
  display: none;
  background-color: #FEF2F2;
  border: 1px solid #FCA5A5;
  color: #B91C1C;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 0.9375rem;
  margin-top: 18px;
  font-family: var(--eztg-font-body);
}

/* ==========================================================================
   RESULTS AREA (APPEARS IN PLACE — NO SLIDING ANIMATION)
   ========================================================================== */
.eztg-results-wrapper {
  display: none;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--eztg-border);
}

.eztg-results-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.eztg-results-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.eztg-results-title {
  font-size: 1.25rem;
  margin: 0;
}

/* Spam Filter Note */
.eztg-filter-note {
  font-family: var(--eztg-font-subheading);
  font-size: 0.75rem;
  color: var(--eztg-emerald);
  background-color: var(--eztg-emerald-light);
  border: 1px solid rgba(15, 122, 92, 0.25);
  padding: 4px 12px;
  border-radius: var(--eztg-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.eztg-selected-count {
  font-family: var(--eztg-font-subheading);
  font-size: 0.875rem;
  color: var(--eztg-text-muted);
  font-weight: 600;
}

.eztg-selected-count span {
  color: var(--eztg-emerald);
  font-weight: 700;
}

/* Results Actions Bar */
.eztg-results-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 22px;
}

.eztg-btn-sm {
  min-height: 44px;
  height: auto;
  padding: 10px 20px;
  font-size: 0.8125rem;
  border-radius: 10px;
}

/* Hashtag Chips Grid */
.eztg-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Chip Styling */
.eztg-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--eztg-radius-pill);
  padding: 9px 15px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--eztg-font-subheading);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
  background-color: var(--eztg-offwhite);
  border: 1px solid var(--eztg-border);
  color: var(--eztg-text-heading);
  line-height: 1.25;
  min-height: 44px;
}

.eztg-chip:hover {
  border-color: var(--eztg-emerald);
  color: var(--eztg-emerald);
  transform: translateY(-1px);
}

.eztg-chip.eztg-selected {
  background-color: var(--eztg-emerald);
  border-color: var(--eztg-emerald);
  color: var(--eztg-white);
  box-shadow: 0 3px 10px rgba(15, 122, 92, 0.25);
}

.eztg-chip-tag {
  pointer-events: none;
}

.eztg-chip-copy-btn {
  background: transparent;
  border: none;
  padding: 0;
  margin-left: 2px;
  color: inherit;
  opacity: 0.75;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.eztg-chip-copy-btn:hover {
  opacity: 1;
  transform: scale(1.15);
}

/* Subtle Source Indicator Under Results */
.eztg-results-meta {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--eztg-border-subtle);
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.eztg-source-note {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-family: var(--eztg-font-subheading);
  font-size: 0.75rem;
  color: var(--eztg-text-muted);
  font-weight: 500;
  line-height: 1;
}

.eztg-source-dot {
  width: 9px !important;
  height: 9px !important;
  min-width: 9px !important;
  min-height: 9px !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
  color: var(--eztg-emerald);
  fill: var(--eztg-emerald);
  transition: color 0.2s ease, fill 0.2s ease;
}

.eztg-source-note strong {
  font-weight: 700;
  color: var(--eztg-emerald);
  transition: color 0.2s ease;
}

/* Fallback tags: Gold dot + Gold text */
.eztg-source-note.eztg-source-fallback .eztg-source-dot {
  color: #C6A15B !important;
  fill: #C6A15B !important;
}

.eztg-source-note.eztg-source-fallback strong,
.eztg-source-note.eztg-source-fallback #eztg-source-label {
  color: #C6A15B !important;
}

/* AI-generated: Emerald dot + Emerald text */
.eztg-source-note.eztg-source-ai .eztg-source-dot {
  color: #0F7A5C !important;
  fill: #0F7A5C !important;
}

.eztg-source-note.eztg-source-ai strong,
.eztg-source-note.eztg-source-ai #eztg-source-label {
  color: #0F7A5C !important;
}

/* ==========================================================================
   CONTENT SECTIONS (ALTERNATING WHITE / WARM OFF-WHITE)
   ========================================================================== */
.eztg-light-section {
  padding-top: 76px;
  padding-bottom: 76px;
  border-bottom: 1px solid var(--eztg-border);
}

#eztg-how-to-use,
#eztg-categories,
#eztg-best-practices {
  background-color: var(--eztg-offwhite);
}

#eztg-formula,
#eztg-reels,
#eztg-faq {
  background-color: var(--eztg-white);
}

.eztg-section-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 48px;
}

.eztg-section-h2 {
  font-size: clamp(1.85rem, 3.5vw, 2.35rem);
  line-height: var(--eztg-lh-h2);
  margin-top: 0;
  margin-bottom: 14px;
}

.eztg-section-subtitle {
  font-size: 1.0625rem;
  color: var(--eztg-text-muted);
  margin: 0;
  line-height: var(--eztg-lh-body);
}

/* 3-Step Guide Grid */
.eztg-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.eztg-step-card {
  background: var(--eztg-white);
  border: 1px solid var(--eztg-border);
  border-radius: var(--eztg-radius-card);
  padding: 30px 28px;
  box-shadow: var(--eztg-shadow-card);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}

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

.eztg-step-num {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background-color: var(--eztg-emerald-light);
  color: var(--eztg-emerald);
  font-size: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border: 1px solid rgba(15, 122, 92, 0.2);
}

.eztg-step-title {
  font-size: 1.1875rem;
  margin: 0 0 10px;
}

.eztg-step-desc {
  font-size: 0.984375rem;
  color: var(--eztg-text-body);
  margin: 0;
  line-height: var(--eztg-lh-body);
}

/* Formula & Mix Section */
.eztg-formula-card {
  background: var(--eztg-white);
  border: 1px solid var(--eztg-border);
  border-radius: var(--eztg-radius-card);
  padding: 34px;
  box-shadow: var(--eztg-shadow-card);
}

.eztg-formula-intro {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 1.0625rem;
  color: var(--eztg-text-body);
}

.eztg-formula-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 24px;
}

.eztg-formula-item {
  background-color: var(--eztg-offwhite);
  border: 1px solid var(--eztg-border);
  border-radius: 14px;
  padding: 22px 18px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.eztg-formula-item:hover {
  border-color: var(--eztg-emerald);
  transform: translateY(-2px);
}

.eztg-formula-badge {
  display: inline-block;
  background-color: var(--eztg-emerald);
  color: var(--eztg-white);
  font-family: var(--eztg-font-subheading);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.eztg-formula-title {
  font-size: 1.0625rem;
  margin: 0 0 6px;
}

.eztg-formula-range {
  font-family: var(--eztg-font-subheading);
  font-size: 0.8125rem;
  color: var(--eztg-emerald);
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}

.eztg-formula-desc {
  font-size: 0.875rem;
  color: var(--eztg-text-body);
  margin: 0;
  line-height: 1.55;
}

/* Category Grid */
.eztg-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.eztg-cat-card {
  background: var(--eztg-white);
  border: 1px solid var(--eztg-border);
  border-radius: var(--eztg-radius-card);
  padding: 28px;
  box-shadow: var(--eztg-shadow-card);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

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

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

.eztg-cat-title {
  font-size: 1.1875rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.eztg-cat-title svg {
  stroke: var(--eztg-emerald) !important;
}

.eztg-cat-copy-all {
  background: var(--eztg-offwhite);
  border: 1px solid var(--eztg-border);
  color: var(--eztg-emerald);
  font-family: var(--eztg-font-subheading);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 8px;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  letter-spacing: 0.01em;
}

.eztg-cat-copy-all:hover {
  background-color: var(--eztg-emerald);
  border-color: var(--eztg-emerald);
  color: var(--eztg-white);
}

.eztg-cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.eztg-cat-chip {
  background-color: var(--eztg-offwhite);
  border: 1px solid var(--eztg-border);
  color: var(--eztg-text-heading);
  font-family: var(--eztg-font-subheading);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--eztg-radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  transition: all 0.2s ease;
}

.eztg-cat-chip:hover {
  background-color: var(--eztg-emerald);
  border-color: var(--eztg-emerald);
  color: var(--eztg-white);
  transform: translateY(-1px);
}

/* Reels Section Card */
.eztg-reels-card {
  background: var(--eztg-white);
  border: 1px solid var(--eztg-border);
  border-radius: var(--eztg-radius-card);
  padding: 34px;
  box-shadow: var(--eztg-shadow-card);
}

.eztg-reels-text {
  font-size: 1.0625rem;
  color: var(--eztg-text-body);
  margin-bottom: 24px;
  line-height: var(--eztg-lh-body);
}

.eztg-reels-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}

.eztg-reels-label {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--eztg-text-heading);
}

/* Best Practices Grid */
.eztg-tips-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.eztg-tip-card {
  background: var(--eztg-white);
  border: 1px solid var(--eztg-border);
  border-radius: var(--eztg-radius-card);
  padding: 28px;
  box-shadow: var(--eztg-shadow-card);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

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

.eztg-tip-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background-color: var(--eztg-emerald-light);
  color: var(--eztg-emerald);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border: 1px solid rgba(15, 122, 92, 0.2);
}

.eztg-tip-title {
  font-size: 1.125rem;
  margin: 0 0 10px;
}

.eztg-tip-desc {
  font-size: 0.9375rem;
  color: var(--eztg-text-body);
  margin: 0;
  line-height: var(--eztg-lh-body);
}

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */
.eztg-faq-container {
  max-width: 820px;
  margin: 0 auto;
}

.eztg-faq-item {
  background: var(--eztg-white);
  border: 1px solid var(--eztg-border);
  border-radius: 14px;
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.eztg-faq-item.eztg-open {
  border-color: var(--eztg-emerald);
  box-shadow: 0 6px 20px rgba(15, 122, 92, 0.08);
}

.eztg-faq-trigger {
  width: 100%;
  padding: 22px 26px;
  min-height: 52px;
  text-align: left;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: background-color 0.15s ease;
}

.eztg-faq-trigger:hover {
  background-color: var(--eztg-offwhite);
}

.eztg-faq-question {
  font-size: 1.0625rem;
  margin: 0;
}

/* Gold chevron accent */
.eztg-faq-chevron {
  width: 22px;
  height: 22px;
  color: var(--eztg-gold);
  flex-shrink: 0;
  transition: transform 0.25s ease, color 0.2s ease;
}

.eztg-faq-item.eztg-open .eztg-faq-chevron {
  transform: rotate(180deg);
  color: var(--eztg-emerald);
}

.eztg-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  padding: 0 26px;
}

.eztg-faq-answer-inner {
  padding-bottom: 22px;
  color: var(--eztg-text-body);
  font-size: 1rem;
  line-height: var(--eztg-lh-body);
  border-top: 1px solid var(--eztg-border-subtle);
  padding-top: 14px;
}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.eztg-cta-band {
  background: linear-gradient(135deg, #0B3D2E 0%, #0F7A5C 100%);
  color: var(--eztg-white);
  padding: 72px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.eztg-cta-gold-accent {
  width: 48px;
  height: 3px;
  background-color: var(--eztg-gold);
  border-radius: 2px;
  margin: 0 auto 20px;
}

.eztg-cta-title {
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  line-height: var(--eztg-lh-h1);
  color: var(--eztg-white) !important;
  margin: 0 auto 16px;
  max-width: 720px;
}

.eztg-cta-desc {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 620px;
  margin: 0 auto 34px;
  line-height: var(--eztg-lh-body);
}

.eztg-btn-white {
  background-color: var(--eztg-white);
  border: 1px solid var(--eztg-white);
  color: var(--eztg-emerald-dark);
  font-weight: 600;
  border-radius: var(--eztg-radius-btn);
  padding: 14px 28px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.eztg-btn-white:hover {
  background-color: var(--eztg-offwhite);
  color: #05261C;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

/* ==========================================================================
   TOAST FEEDBACK NOTIFICATION
   ========================================================================== */
.eztg-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background-color: #14201C;
  border: 1px solid rgba(198, 161, 91, 0.35);
  color: var(--eztg-white);
  padding: 14px 22px;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
  font-family: var(--eztg-font-subheading);
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 999999;
  transform: translateY(30px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.eztg-toast.eztg-toast-visible {
  transform: translateY(0);
  opacity: 1;
}

.eztg-toast-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #34D399;
}

/* ==========================================================================
   RESPONSIVE DESIGN (390PX MOBILE AUDIT & BREAKPOINTS)
   ========================================================================== */
@media (max-width: 1024px) {
  .eztg-formula-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .eztg-cat-grid,
  .eztg-tips-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .eztg-hero-section {
    padding-top: 48px;
    padding-bottom: 52px;
  }
  
  .eztg-light-section {
    padding-top: 52px;
    padding-bottom: 52px;
  }
  
  .eztg-tool-card {
    padding: 22px;
  }
  
  .eztg-input-group {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .eztg-input {
    min-height: 48px;
    height: 52px;
    font-size: 1rem;
  }
  
  .eztg-btn {
    width: 100%;
    min-height: 48px;
  }
  
  .eztg-steps-grid,
  .eztg-formula-grid,
  .eztg-cat-grid,
  .eztg-tips-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  
  .eztg-results-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .eztg-results-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  
  .eztg-results-actions .eztg-btn {
    width: 100%;
  }
  
  .eztg-section-h2 {
    font-size: 1.6rem;
  }
  
  .eztg-faq-trigger {
    padding: 18px 20px;
  }
  
  .eztg-faq-question {
    font-size: 1.0625rem;
  }
  
  .eztg-faq-answer {
    padding: 0 20px;
  }
  
  .eztg-toast {
    left: 20px;
    right: 20px;
    bottom: 20px;
    justify-content: center;
  }
}

@media (max-width: 390px) {
  .eztg-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .eztg-badge {
    font-size: 0.75rem;
    padding: 6px 14px;
  }
  
  .eztg-hero-title {
    font-size: 1.95rem;
  }
  
  .eztg-hero-subtitle {
    font-size: 1rem;
    margin-bottom: 28px;
  }
  
  .eztg-tool-card {
    padding: 16px;
    border-radius: 14px;
  }
  
  .eztg-chip {
    padding: 8px 12px;
    font-size: 0.8125rem;
    min-height: 44px;
    word-break: break-word;
  }
  
  .eztg-cat-card,
  .eztg-reels-card,
  .eztg-formula-card,
  .eztg-step-card,
  .eztg-tip-card {
    padding: 20px 16px;
  }
}