/* ==========================================================================
   Rajabets Login Guide - Dedicated Stylesheet
   Authoritative Reference: Design Pack (01-introduction to 07-final-words)
   Theme: Premium Emerald, Warm Ivory & Restrained Champagne Gold
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page-Specific Tokens & Baseline
   -------------------------------------------------------------------------- */
.login-guide-page {
  background-color: var(--guide-bg, #f8f5eb);
  color: var(--guide-ink, #182922);
}

:root {
  --guide-bg: #f8f5eb;
  --guide-surface: #fffdf7;
  --guide-surface-white: #ffffff;
  --guide-emerald: #073b2b;
  --guide-emerald-deep: #042d22;
  --guide-emerald-light: #0a6847;
  --guide-emerald-soft: rgba(7, 59, 43, 0.06);
  --guide-emerald-accent: #108759;
  --guide-gold: #c7a86a;
  --guide-gold-light: #ebd2a8;
  --guide-gold-border: rgba(199, 168, 106, 0.38);
  --guide-ink: #182922;
  --guide-body-ink: #43524c;
  --guide-line: #e2dccb;
  --guide-card-radius: 18px;
  --guide-card-shadow: 0 8px 24px -4px rgba(7, 59, 43, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.03);
  --guide-card-shadow-hover: 0 16px 32px -6px rgba(7, 59, 43, 0.1), 0 4px 10px -2px rgba(0, 0, 0, 0.05);
}

/* Ensure smooth anchor scrolling with header offset */
[id] {
  scroll-margin-top: calc(var(--header-height, 80px) + 24px);
}

/* --------------------------------------------------------------------------
   Header Customizations for Login Guide
   -------------------------------------------------------------------------- */
.btn-header-apk-guide {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: var(--radius-full, 9999px);
  border: 1.5px solid var(--color-brand-green, #0a6847);
  color: var(--color-brand-green, #0a6847);
  background-color: transparent;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--transition-fast, 0.18s ease);
}

.btn-header-apk-guide:hover {
  background-color: var(--color-brand-green, #0a6847);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(10, 104, 71, 0.2);
}

.btn-header-apk-guide svg {
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Guide Section Spacing & Common Eyebrow Lockup
   -------------------------------------------------------------------------- */
.guide-section {
  padding-top: clamp(48px, 5.5vw, 76px);
  padding-bottom: clamp(48px, 5.5vw, 76px);
  position: relative;
}

.guide-section + .guide-section {
  padding-top: 0;
}

.guide-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(14px, 1.6vw, 18px);
}

.guide-eyebrow {
  font-size: var(--font-size-eyebrow, 0.75rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--guide-emerald-light, #0a6847);
  white-space: nowrap;
}

.guide-eyebrow-line {
  height: 1.5px;
  width: clamp(40px, 8vw, 80px);
  background: linear-gradient(90deg, var(--guide-gold, #c7a86a) 0%, rgba(199, 168, 106, 0.15) 100%);
  border-radius: 2px;
}

.guide-eyebrow-centered {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: clamp(12px, 1.4vw, 16px);
}

.guide-eyebrow-centered .guide-eyebrow-line {
  width: 40px;
}

.guide-heading-h2 {
  font-size: var(--font-size-h2, clamp(1.6875rem, 1.35rem + 1.65vw, 2.375rem));
  font-weight: 800;
  line-height: var(--line-height-heading, 1.18);
  letter-spacing: var(--letter-spacing-heading, -0.02em);
  color: var(--guide-emerald-deep, #042d22);
  margin-bottom: var(--space-heading-to-intro, 16px);
  max-width: 820px;
}

.guide-heading-h2.centered {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.guide-lead-text {
  font-size: var(--font-size-lead, 1.0625rem);
  line-height: var(--line-height-body, 1.65);
  color: var(--guide-body-ink, #43524c);
  margin-bottom: var(--space-intro-to-content, 32px);
  max-width: 840px;
}

.guide-lead-text.centered {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.guide-heading-h3 {
  font-size: var(--font-size-h3, clamp(1.21875rem, 1.12rem + 0.45vw, 1.375rem));
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--guide-emerald-deep, #042d22);
  margin-bottom: 12px;
}

.guide-sub-desc {
  font-size: var(--font-size-body, 1rem);
  line-height: var(--line-height-body, 1.65);
  color: var(--guide-body-ink, #43524c);
  margin-bottom: 24px;
  max-width: 780px;
}

/* --------------------------------------------------------------------------
   Hero Section - Login Guide (Image 1 Composition)
   -------------------------------------------------------------------------- */
.login-hero-section {
  padding-top: clamp(20px, 2.5vw, 36px);
  padding-bottom: clamp(40px, 4.5vw, 60px);
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 85% 30%, rgba(10, 104, 71, 0.08) 0%, transparent 60%),
              radial-gradient(circle at 10% 80%, rgba(199, 168, 106, 0.06) 0%, transparent 50%),
              var(--guide-bg, #f8f5eb);
}

.login-hero-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 52px);
  align-items: center;
}

@media (min-width: 960px) {
  .login-hero-container {
    grid-template-columns: 1.08fr 0.92fr;
  }
}

.login-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--color-text-muted, #525a66);
  margin-bottom: clamp(14px, 1.8vw, 18px);
}

.login-breadcrumb a {
  color: var(--color-text-muted, #525a66);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-fast, 0.18s ease);
}

.login-breadcrumb a:hover {
  color: var(--guide-emerald-light, #0a6847);
}

.breadcrumb-sep {
  color: #9ca3af;
  font-size: 0.75rem;
}

.breadcrumb-current {
  color: var(--guide-emerald-deep, #042d22);
  font-weight: 600;
}

.login-hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--radius-full, 9999px);
  border: 1px solid rgba(10, 104, 71, 0.35);
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  color: var(--guide-emerald-deep, #042d22);
  font-size: var(--font-size-eyebrow, 0.75rem);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: clamp(16px, 2vw, 22px);
}

.login-hero-heading {
  font-size: var(--font-size-h1, clamp(2.25rem, 1.35rem + 3.3vw, 3.875rem));
  font-weight: 900;
  line-height: var(--line-height-heading, 1.14);
  letter-spacing: var(--letter-spacing-h1, -0.03em);
  color: var(--guide-ink, #182922);
  margin-bottom: clamp(16px, 2vw, 22px);
}

.login-hero-heading .hero-accent-text {
  color: var(--guide-emerald-light, #0a6847);
  display: inline;
}

.login-hero-desc {
  font-size: var(--font-size-lead, 1.0625rem);
  line-height: var(--line-height-body, 1.65);
  color: var(--guide-body-ink, #43524c);
  margin-bottom: clamp(24px, 2.8vw, 32px);
  max-width: 580px;
}

.login-hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(24px, 2.8vw, 30px);
}

.btn-hero-guide-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--radius-full, 9999px);
  background: linear-gradient(180deg, #0a6847 0%, #043825 100%);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 24px -4px rgba(4, 56, 37, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: all var(--transition-fast, 0.18s ease);
}

.btn-hero-guide-primary:hover {
  background: linear-gradient(180deg, #0e7d56 0%, #064931 100%);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -4px rgba(4, 56, 37, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

.btn-hero-guide-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: var(--radius-full, 9999px);
  background-color: var(--guide-surface, #fffdf7);
  color: var(--guide-emerald-deep, #042d22);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid var(--guide-gold-border, rgba(199, 168, 106, 0.38));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  transition: all var(--transition-fast, 0.18s ease);
}

.btn-hero-guide-secondary:hover {
  background-color: #ffffff;
  border-color: var(--guide-gold, #c7a86a);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(7, 59, 43, 0.08);
}

.btn-arrow {
  transition: transform var(--transition-fast, 0.18s ease);
}

.btn-hero-guide-primary:hover .btn-arrow {
  transform: translateX(4px);
}

/* Trust Badges Strip */
.login-hero-badges-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px clamp(12px, 1.8vw, 20px);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--guide-emerald-deep, #042d22);
  margin-bottom: clamp(16px, 2vw, 20px);
}

.login-badge-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.login-badge-sep {
  color: #cbd5e1;
  font-weight: 300;
}

/* Security Notice Bar */
.login-hero-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--guide-body-ink, #43524c);
  font-weight: 500;
  border-left: 3px solid var(--guide-gold, #c7a86a);
  padding-left: 10px;
}

/* Hero Right Visual */
.login-hero-visual-col {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.login-hero-img-wrap {
  width: 100%;
  max-width: 580px;
  position: relative;
  filter: drop-shadow(0 20px 40px rgba(7, 59, 43, 0.12));
}

.login-hero-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Quick Feature Strip (Bottom of Hero) */
.login-quick-strip {
  margin-top: clamp(28px, 3.5vw, 42px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.login-quick-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-radius: 14px;
  background-color: var(--guide-surface, #fffdf7);
  border: 1px solid var(--guide-gold-border, rgba(199, 168, 106, 0.38));
  color: var(--guide-emerald-deep, #042d22);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  transition: all var(--transition-fast, 0.18s ease);
  box-shadow: 0 4px 12px rgba(7, 59, 43, 0.03);
}

.login-quick-card:hover {
  background-color: #ffffff;
  border-color: var(--guide-gold, #c7a86a);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(7, 59, 43, 0.08);
}

.quick-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.quick-card-icon {
  width: 22px;
  height: 22px;
  color: var(--guide-emerald-light, #0a6847);
  flex-shrink: 0;
}

.quick-card-chevron {
  font-size: 1.15rem;
  color: var(--guide-gold, #c7a86a);
  font-weight: 700;
  transition: transform var(--transition-fast, 0.18s ease);
}

.login-quick-card:hover .quick-card-chevron {
  transform: translateX(4px);
  color: var(--guide-emerald-light, #0a6847);
}

/* --------------------------------------------------------------------------
   Section 1: Introduction Editorial Panel (Image 2)
   -------------------------------------------------------------------------- */
.editorial-panel {
  position: relative;
  background-color: var(--guide-surface, #fffdf7);
  border: 1px solid var(--guide-gold-border, rgba(199, 168, 106, 0.38));
  border-radius: var(--guide-card-radius, 18px);
  padding: clamp(24px, 3.2vw, 42px) clamp(22px, 3.5vw, 48px);
  box-shadow: var(--guide-card-shadow);
  overflow: hidden;
  margin-bottom: clamp(20px, 2.5vw, 28px);
}

.editorial-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 8px;
  background: linear-gradient(180deg, #0a6847 0%, #043825 100%);
  border-top-left-radius: var(--guide-card-radius, 18px);
  border-bottom-left-radius: var(--guide-card-radius, 18px);
}

.editorial-panel-text {
  font-size: var(--font-size-lead, 1.0625rem);
  line-height: var(--line-height-body, 1.7);
  color: var(--guide-body-ink, #43524c);
}

.editorial-panel-text p + p {
  margin-top: 18px;
}

/* Quick Jump Chips */
.guide-jump-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px clamp(12px, 1.5vw, 18px);
}

.guide-jump-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 12px;
  background-color: var(--guide-surface, #fffdf7);
  border: 1.5px solid var(--guide-gold-border, rgba(199, 168, 106, 0.38));
  color: var(--guide-emerald-deep, #042d22);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(7, 59, 43, 0.04);
  transition: all var(--transition-fast, 0.18s ease);
}

.guide-jump-chip:hover {
  background-color: #ffffff;
  border-color: var(--guide-gold, #c7a86a);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(7, 59, 43, 0.08);
}

.chip-arrow {
  color: var(--guide-emerald-deep, #042d22);
  font-size: 1rem;
  transition: transform var(--transition-fast, 0.18s ease);
}

.guide-jump-chip:hover .chip-arrow {
  transform: translateX(4px);
  color: var(--guide-emerald-light, #0a6847);
}

/* --------------------------------------------------------------------------
   Step Timeline Components (Mobile & Desktop Sign-In)
   -------------------------------------------------------------------------- */
.timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Vertical decorative gold line connecting medals */
.timeline-list::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 21px;
  width: 2px;
  background: linear-gradient(180deg, var(--guide-gold, #c7a86a) 0%, rgba(199, 168, 106, 0.4) 100%);
  z-index: 1;
}

.timeline-step-row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  position: relative;
  z-index: 2;
}

.step-medallion {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(180deg, #073b2b 0%, #03241a 100%);
  border: 2px solid var(--guide-gold, #c7a86a);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(7, 59, 43, 0.25);
}

.step-card {
  flex: 1;
  background-color: var(--guide-surface, #fffdf7);
  border: 1px solid var(--guide-gold-border, rgba(199, 168, 106, 0.38));
  border-radius: 14px;
  padding: 16px 22px;
  box-shadow: var(--guide-card-shadow);
  transition: all var(--transition-fast, 0.18s ease);
}

.step-card:hover {
  background-color: #ffffff;
  border-color: var(--guide-gold, #c7a86a);
  transform: translateY(-2px);
  box-shadow: var(--guide-card-shadow-hover);
}

.step-card-title {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--guide-emerald-deep, #042d22);
  margin-bottom: 4px;
}

.step-card-desc {
  font-size: var(--font-size-body, 0.98rem);
  line-height: var(--line-height-body, 1.62);
  color: var(--guide-body-ink, #43524c);
  margin: 0;
}

/* Two-Column Sign-In Layouts */
.mobile-signin-layout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 3.5vw, 48px);
  align-items: start;
}

@media (min-width: 960px) {
  .mobile-signin-layout-grid {
    grid-template-columns: 1.25fr 0.95fr;
  }
}

.mobile-signin-left-col {
  min-width: 0;
}

.mobile-signin-right-col {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: sticky;
  top: 96px;
}

@media (max-width: 959px) {
  .mobile-signin-right-col {
    position: static;
    margin-top: 12px;
    margin-bottom: 24px;
  }
}

.signin-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 3.5vw, 44px);
  align-items: center;
}

@media (min-width: 960px) {
  .signin-grid-desktop {
    grid-template-columns: 0.92fr 1.28fr;
  }
}

.signin-illustration-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.signin-img {
  width: 100%;
  max-width: 480px;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 16px 36px rgba(7, 59, 43, 0.1));
}

@media (max-width: 959px) {
  .signin-illustration-wrap {
    order: -1;
    margin-bottom: 8px;
  }
  .signin-img {
    max-width: 320px;
  }
}

/* --------------------------------------------------------------------------
   Section 4: Common Causes & Fixes Grid (Image 5)
   -------------------------------------------------------------------------- */
.common-issues-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 24px);
}

@media (min-width: 860px) {
  .common-issues-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.issue-card {
  background-color: var(--guide-surface, #fffdf7);
  border: 1px solid var(--guide-gold-border, rgba(199, 168, 106, 0.38));
  border-radius: var(--guide-card-radius, 18px);
  padding: clamp(20px, 2.4vw, 28px);
  box-shadow: var(--guide-card-shadow);
  transition: all var(--transition-fast, 0.18s ease);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.issue-card:hover {
  background-color: #ffffff;
  border-color: var(--guide-gold, #c7a86a);
  transform: translateY(-2px);
  box-shadow: var(--guide-card-shadow-hover);
}

.issue-card-accent-border {
  border-left: 5px solid var(--guide-emerald-light, #0a6847);
}

.issue-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.issue-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background-color: rgba(10, 104, 71, 0.08);
  border: 1px solid rgba(10, 104, 71, 0.18);
  color: var(--guide-emerald-light, #0a6847);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.issue-card-title {
  font-size: clamp(1.1rem, 1.05rem + 0.35vw, 1.25rem);
  font-weight: 800;
  color: var(--guide-emerald-deep, #042d22);
  margin: 0;
  line-height: 1.25;
}

.issue-card-desc {
  font-size: var(--font-size-body, 0.98rem);
  line-height: var(--line-height-body, 1.65);
  color: var(--guide-body-ink, #43524c);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Section 5: Account Recovery (Image 05)
   -------------------------------------------------------------------------- */
.recovery-upper-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3.2vw, 40px);
  align-items: center;
  margin-bottom: 16px;
}

@media (min-width: 960px) {
  .recovery-upper-grid {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.recovery-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.recovery-img {
  width: 100%;
  max-width: 460px;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 16px 36px rgba(7, 59, 43, 0.1));
}

@media (max-width: 959px) {
  .recovery-img-wrap {
    margin-bottom: 16px;
  }
  .recovery-img {
    max-width: 320px;
  }
}

/* Recovery Note Callout Box */
.recovery-note-callout {
  margin-top: clamp(24px, 3vw, 32px);
  position: relative;
  background-color: var(--guide-surface, #fffdf7);
  border: 1px solid var(--guide-gold-border, rgba(199, 168, 106, 0.38));
  border-left: 6px solid var(--guide-emerald-light, #0a6847);
  border-radius: 14px;
  padding: 18px 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  box-shadow: var(--guide-card-shadow);
}

.note-icon-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--guide-emerald-deep, #042d22);
  color: var(--guide-emerald-deep, #042d22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  font-style: italic;
  font-family: serif;
  flex-shrink: 0;
}

.recovery-note-content {
  font-size: var(--font-size-body, 0.98rem);
  line-height: var(--line-height-body, 1.65);
  color: var(--guide-body-ink, #43524c);
}

.recovery-note-content strong {
  color: var(--guide-emerald-deep, #042d22);
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   Section 6: FAQs (Image 06)
   -------------------------------------------------------------------------- */
.faq-accordion-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

.faq-guide-card {
  background-color: var(--guide-surface, #fffdf7);
  border: 1px solid var(--guide-gold-border, rgba(199, 168, 106, 0.38));
  border-radius: var(--guide-card-radius, 18px);
  padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.5vw, 32px);
  box-shadow: var(--guide-card-shadow);
  transition: all var(--transition-fast, 0.18s ease);
}

.faq-guide-card:hover {
  background-color: #ffffff;
  border-color: var(--guide-gold, #c7a86a);
}

.faq-guide-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.faq-guide-question {
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
  font-weight: 800;
  color: var(--guide-emerald-deep, #042d22);
  margin: 0;
  line-height: 1.28;
}

.faq-toggle-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(180deg, #073b2b 0%, #03241a 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-fast, 0.18s ease);
  box-shadow: 0 2px 6px rgba(7, 59, 43, 0.2);
}

.faq-icon-minus {
  display: block;
}

.faq-icon-plus {
  display: none;
}

/* Collapsed state */
.faq-guide-card:not(.is-expanded) .faq-icon-minus {
  display: none;
}

.faq-guide-card:not(.is-expanded) .faq-icon-plus {
  display: block;
}

.faq-guide-answer {
  font-size: var(--font-size-body, 1rem);
  line-height: var(--line-height-body, 1.68);
  color: var(--guide-body-ink, #43524c);
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(199, 168, 106, 0.2);
}

.faq-guide-card:not(.is-expanded) .faq-guide-answer {
  display: none;
}

/* --------------------------------------------------------------------------
   Section 7: Final Words (Image 07)
   -------------------------------------------------------------------------- */
.guide-final-words-panel {
  background: linear-gradient(135deg, #03241a 0%, #073b2b 45%, #0a4f3a 75%, #03241a 100%);
  border: 1px solid rgba(199, 168, 106, 0.45);
  border-radius: clamp(20px, 2.5vw, 26px);
  padding: clamp(32px, 4vw, 56px) clamp(24px, 4.5vw, 64px);
  box-shadow: 0 20px 48px -10px rgba(3, 36, 26, 0.35);
  position: relative;
  overflow: hidden;
  opacity: 1 !important;
  transform: none !important;
}

/* Ambient sheen decoration matching mockup 07 */
.guide-final-words-panel::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 60%;
  height: 180%;
  background: radial-gradient(circle, rgba(16, 135, 89, 0.28) 0%, transparent 70%);
  pointer-events: none;
}

.guide-final-words-eyebrow {
  font-size: var(--font-size-eyebrow, 0.75rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--guide-gold-light, #ebd2a8);
  margin-bottom: 12px;
  display: block;
}

.guide-final-words-heading {
  font-size: clamp(2rem, 1.6rem + 1.8vw, 2.85rem);
  font-weight: 800;
  line-height: 1.15;
  color: #fffdf7;
  letter-spacing: -0.02em;
  margin-bottom: clamp(16px, 2vw, 22px);
}

.guide-final-words-text {
  font-size: var(--font-size-lead, 1.0625rem);
  line-height: var(--line-height-body, 1.72);
  color: #e5ece8;
  max-width: 960px;
  margin-bottom: clamp(20px, 2.8vw, 28px);
}

.guide-final-words-line {
  height: 1.5px;
  width: 100%;
  background: linear-gradient(90deg, rgba(199, 168, 106, 0.6) 0%, rgba(199, 168, 106, 0.08) 100%);
  border-radius: 2px;
}

/* Ensure login-guide footer columns and sections remain readable without depending on complex scroll trigger */
html.js-motion .login-guide-page .footer-col {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Responsive Adjustments & Layout Hardening
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .login-quick-strip {
    grid-template-columns: 1fr;
  }
  .guide-jump-chips-row {
    flex-direction: column;
  }
  .guide-jump-chip {
    width: 100%;
    justify-content: space-between;
  }
  .timeline-step-row {
    gap: 12px;
  }
  .step-medallion {
    width: 38px;
    height: 38px;
    font-size: 0.88rem;
  }
  .timeline-list::before {
    left: 18px;
  }
  .step-card {
    padding: 14px 16px;
  }
  .editorial-panel {
    padding: 20px 18px 20px 22px;
  }
  .recovery-note-callout {
    padding: 16px 16px;
  }
}