/* ============================================
   Castle App - Global Stylesheet
   Version: 1.0.0
   Theme: Light (with dark Hero sections)
   ============================================ */

/* ---------- CSS Reset & Base ---------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Brand Colors — sampled from the Castle App emblem (teal-to-blue
     gradient). --color-primary is one step darker than the logo's mid
     tone (#337A96) so body-size links clear WCAG AA 4.5:1 on both the
     white page background and the #F8FAFC alternate sections.
       #26657F on #FFFFFF = 6.46:1
       #26657F on #F8FAFC = 6.18:1
       #FFFFFF on #26657F = 6.46:1 (button labels) */
  --color-primary: #26657F;
  --color-primary-dark: #11516A;
  --color-accent: #F59E0B;
  --color-accent-light: #FCD34D;

  /* Background Colors — the hero and version bar dropped their indigo
     cast so the dark sections now sit on the same blue-teal axis as the
     rest of the brand. */
  --color-hero-bg: #0F1D24;
  --color-page-bg: #FFFFFF;
  --color-section-alt: #F8FAFC;
  --color-card-bg: #FFFFFF;
  --color-card-border: #E2E8F0;

  /* Text Colors */
  --color-text-primary: #1E293B;
  --color-text-secondary: #64748B;
  --color-text-on-dark: #F1F5F9;
  /* Muted text on dark surfaces. Raised from #94A3B8 to #B6C2D1 after the
     re-theme: #94A3B8 held 5.98:1 on the darkest hero pixel but decayed to
     3.45:1 against the gradient's right-hand end (#155066), because the
     gradient is angled — the light stop reaches the far edge, and 18px
     sub-headings really do run out to x=1040/1440. #B6C2D1 clears 4.5:1
     across the whole sweep (worst case 4.90:1) and clears 9.9:1 on the flat
     #0F1D24 footer. Note --color-slate-400 deliberately stays at #94A3B8:
     it is only ever used for 9-10px decorative text inside the phone-mock
     SVGs, which is artwork rather than readable copy. */
  --color-text-on-dark-muted: #B6C2D1;

  /* Functional Colors */
  --color-success: #16A34A;
  --color-warning: #F59E0B;
  --color-error: #DC2626;
  --color-info: #2563EB;

  /* Deep Slate Ramp — the dark end of the ramp used by the hero, the
     version bar, and the phone-mock SVG artwork. These were previously
     written as raw hex inside the SVGs; naming them here keeps a single
     source of truth and lets the artwork track any future re-theme. */
  --color-slate-950: #0B1120;
  --color-slate-900: #1E293B;
  --color-slate-800: #334155;
  --color-slate-700: #475569;
  --color-slate-400: #94A3B8;
  --color-slate-300: #CBD5E1;
  /* Deep Brand Ramp — second half of the hero gradient and the icon
     washes that used to be indigo. Names kept for compatibility with
     existing call sites; values now track the teal logo palette. */
  --color-indigo-950: #0E3A48;
  --color-indigo-900: #185A74;
  --color-blue-900: #11516A;
  --color-amber-800: #B45309;
  --color-amber-400: #FBBF24;
  --color-purple-600: #337A96;

  /* Tinted Surfaces — the wash tints behind tip boxes, highlighted table
     rows, and the "not requested" table body. */
  --color-tint-primary: #EAF6FB;
  --color-tint-primary-strong: #D6EDF6;
  --color-tint-primary-line: #9FD4E6;
  --color-tint-premium: #FFFBEB;
  --color-tint-danger: #FEF2F2;

  /* Gradients */
  --gradient-hero: linear-gradient(135deg, var(--color-hero-bg) 0%, var(--color-indigo-950) 50%, var(--color-indigo-900) 100%);
  --gradient-cta: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  --gradient-premium: linear-gradient(135deg, var(--color-accent) 0%, var(--color-amber-400) 100%);

  /* Typography */
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Spacing */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;

  /* Layout */
  --max-width: 1200px;
  --navbar-height: 64px;
  --navbar-height-scrolled: 56px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* Shadows — the CTA glow is tinted with --color-primary (#26657F) so the
     button lifts off the page in the brand hue rather than a neutral grey. */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-cta: 0 4px 14px rgba(38,101,127,0.3);
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: var(--navbar-height);
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-primary);
  background-color: var(--color-page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

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

/* Purple on slate body copy is only 2.07:1 against the surrounding text, so
   links inside running prose need a non-colour cue to stay distinguishable. */
p a,
.tip-box a,
.faq-answer a,
td a,
li a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

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

ul, ol {
  list-style: none;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text-primary);
}

h1 { font-size: 3rem; font-weight: 700; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.125rem; }

p { margin-bottom: var(--space-sm); }

/* ---------- Layout Utilities ---------- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.container-narrow {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.section {
  padding: var(--space-xl) 0;
}

.section-lg {
  padding: var(--space-2xl) 0;
}

.section-alt {
  background-color: var(--color-section-alt);
}

.section-dark {
  background: var(--gradient-hero);
  color: var(--color-text-on-dark);
}

.section-dark h1,
.section-dark h2,
.section-dark h3 {
  color: var(--color-text-on-dark);
}

.text-center { text-align: center; }
.text-left { text-align: left; }

/* ---------- Navbar ---------- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--navbar-height);
  background-color: var(--color-page-bg);
  box-shadow: var(--shadow-sm);
  z-index: 1000;
  transition: height 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  align-items: center;
}

.navbar.scrolled {
  height: var(--navbar-height-scrolled);
  box-shadow: var(--shadow-md);
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.navbar-logo {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
}

.navbar-logo svg {
  width: 32px;
  height: 32px;
}

.navbar-logo img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.navbar-menu {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.navbar-menu a {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  font-weight: 500;
  transition: color 0.2s ease;
}

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

/* Current-page indicator. Driven by aria-current="page" so the visual state and
   the screen-reader state come from a single source — previously /faq/ was the
   only page that marked itself, using an inline style, which meant the other
   twelve pages had no active state and nothing was announced to assistive tech. */
.navbar-menu a[aria-current="page"] {
  color: var(--color-primary);
  font-weight: 600;
}

.navbar-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 10px 20px;
  font-size: 0.875rem;
}

.navbar-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xs);
}

.navbar-toggle svg {
  width: 24px;
  height: 24px;
  color: var(--color-text-primary);
}

/* Mobile Menu */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 280px;
  height: 100vh;
  background-color: var(--color-page-bg);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform 0.3s ease, visibility 0.3s ease;
  z-index: 1001;
  padding: var(--space-xl) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  /* Closed state: keep it out of layout, the accessibility tree and
     the horizontal scroll area until it is opened. */
  visibility: hidden;
  overflow-y: auto;
}

.mobile-menu.active {
  transform: translateX(0);
  visibility: visible;
}

.mobile-menu a {
  font-size: 1rem;
  color: var(--color-text-primary);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-card-border);
}

.mobile-menu-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xs);
}

.mobile-menu-close svg {
  width: 24px;
  height: 24px;
}

.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.4);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 16px 32px;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn svg {
  width: 20px;
  height: 20px;
}

.btn-primary {
  background: var(--gradient-cta);
  color: var(--color-page-bg);
  box-shadow: var(--shadow-cta);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(38,101,127,0.4);
  color: var(--color-page-bg);
}

.btn-secondary {
  background: var(--color-page-bg);
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.btn-secondary:hover {
  background: var(--color-primary);
  color: var(--color-page-bg);
  transform: translateY(-2px);
}

.btn-premium {
  background: var(--gradient-premium);
  color: var(--color-text-primary);
}

.btn-premium:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245,158,11,0.4);
  color: var(--color-text-primary);
}

.btn-sm {
  padding: 10px 20px;
  font-size: 0.875rem;
}

.btn-lg {
  padding: 18px 40px;
  font-size: 1.125rem;
}

.btn-block {
  width: 100%;
}

/* ---------- Cards ---------- */
.card {
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.card-icon {
  width: 32px;
  height: 32px;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.card-icon-lg {
  width: 48px;
  height: 48px;
}

.card h3 {
  margin-bottom: var(--space-xs);
}

.card p {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

/* Feature Card Grid */
.card-grid {
  display: grid;
  gap: var(--space-md);
}

.card-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.card-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.card-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

/* Platform Card */
.platform-card {
  background-color: var(--color-card-bg);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.platform-card .card-icon-lg {
  margin: 0 auto var(--space-sm);
}

/* ---------- Badges & Tags ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
}

/* Amber #F59E0B only reaches 2.14:1 against white, so the label uses the
   dark slate ink instead — 6.9:1, comfortably past WCAG AA. */
.badge-free {
  background-color: var(--color-accent);
  color: var(--color-text-primary);
}

.badge-premium {
  background: var(--gradient-premium);
  color: var(--color-text-primary);
}

.badge-new {
  background-color: var(--color-success);
  color: var(--color-page-bg);
}

.badge-version {
  background-color: var(--color-text-on-dark);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
}

/* ---------- Version Info Bar ---------- */
.version-bar {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 8px 20px;
  background-color: var(--color-slate-900);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  /* The pill sits on the dark hero gradient, whose lightest stop is now
     #185A74 (was #312E81 before the re-theme). Slate-100 holds 13.4:1 on the
     pill's own fill, and still clears 4.5:1 where the gradient blends through
     the rounded ends (#6C737F worst case). The earlier slate-300 cleared the
     flat fill but landed at 4.48:1 on the blend — a 0.02 miss that only
     surfaced at 1440px, where the pill is narrow enough for the gradient to
     dominate the anti-aliased edge pixels axe samples. */
  color: var(--color-text-on-dark);
}

.version-bar span {
  display: flex;
  align-items: center;
  gap: 6px;
  /* Pin the colour on the flex items too: they are the nodes axe measures,
     and inheritance through the icon SVGs made the result unstable. */
  color: inherit;
}

.version-bar .sep {
  /* Decorative only, but still a text node — so it needs a passing ratio. */
  color: var(--color-text-on-dark-muted);
}

/* ---------- Tables ---------- */
.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-card-border);
  /* A scroll container must not feed its content's min-content width back
     up to the grid track that holds it. */
  min-width: 0;
  max-width: 100%;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.table th {
  background-color: var(--color-primary);
  color: var(--color-page-bg);
  font-weight: 600;
  padding: 12px 16px;
  text-align: left;
}

.table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-card-border);
}

.table tbody tr:nth-child(even) {
  background-color: var(--color-section-alt);
}

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

/* Premium table highlight */
.table-premium .table td:last-child {
  background-color: var(--color-tint-premium);
}

/* ---------- FAQ Accordion ---------- */
.faq-item {
  border-bottom: 1px solid var(--color-card-border);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-sans);
  transition: color 0.2s ease;
}

.faq-question:hover {
  color: var(--color-primary);
}

.faq-question .faq-icon {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.faq-item.active .faq-question .faq-icon {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 var(--space-md);
}

.faq-item.active .faq-answer {
  max-height: 500px;
  padding-bottom: var(--space-md);
}

.faq-answer p {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* Star rating row.

   The markup ships five inline <svg viewBox="0 0 24 24"> per card. Without an
   explicit width/height an SVG with only a viewBox stretches to the width of
   its container, which previously blew each row up to ~978px tall and dragged
   every card to 1330px. Sizing is therefore pinned here, not left to the
   intrinsic ratio. The handful of svgs carrying .empty render in a lighter
   tone so a 4-of-5 quote reads as such. */
.stars {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.stars svg {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
  fill: var(--color-accent);
}

.stars svg.empty {
  fill: var(--color-slate-300);
}

/* ---------- Review Card ----------
   Used by the "What Indian Users Are Saying" block on the homepage.

   A previous cleanup removed .review-card / .stars / .avatar after the
   /reviews/ page was rewritten (it dropped per-user star ratings we could not
   substantiate). That removal assumed nothing else on the site used the
   classes, but the homepage kept its 8 testimonial cards, so they rendered
   unstyled. The component is restored below WITHOUT the star rating, because
   the quotes are anecdotes rather than scored reviews.

   Each card is drawn as an outlined box: 1px tinted border plus a very soft
   shadow. The parent section uses --color-section-alt, so a white card on a
   near-white field needs the border to read as a distinct object. */
.review-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(15, 29, 36, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.review-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 6px 18px rgba(38, 101, 127, 0.12);
}

.review-card p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

/* Reviewer identity row: initials badge + name + city. */
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1;
}

.review-author {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  line-height: 1.3;
}

.review-location {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.3;
}

/* ---------- Language Pills ---------- */
.lang-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}

.lang-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-lg);
  background-color: var(--color-page-bg);
  transition: background 0.2s ease;
  cursor: default;
}

.lang-pill:hover {
  background-color: var(--color-tint-primary);
}

.lang-pill .lang-code {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
}

.lang-pill .lang-name {
  font-size: 0.6875rem;
  color: var(--color-text-secondary);
  text-align: center;
}

/* ---------- Step Number Circle ---------- */
.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gradient-cta);
  color: var(--color-page-bg);
  font-size: 1.25rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* ---------- Install Steps ---------- */
.steps-container {
  background-color: var(--color-section-alt);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
}

.step-item {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px dashed var(--color-card-border);
}

.step-item:last-child {
  border-bottom: none;
}

.step-item-content h3 {
  margin-bottom: var(--space-xs);
}

.step-item-content p {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

.step-item-content .btn {
  margin-top: var(--space-sm);
}

/* ---------- Tip Box ---------- */
.tip-box {
  background-color: var(--color-tint-primary);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 0.875rem;
  color: var(--color-text-primary);
  margin: var(--space-sm) 0;
}

/* ---------- Safety Badge ---------- */
.safety-badge {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 12px 16px;
  background-color: var(--color-slate-900);
  border-left: 3px solid var(--color-success);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  /* Slate-100, not the muted slate-400 used elsewhere on dark: the pill's own
     #1E293B repaints to ~#464F5E once the hero gradient blends through its
     rounded corners, and slate-400 drops to 3.93:1 against that blend — which
     is why this node failed on narrow viewports where the copy wraps. Slate-100
     holds 7.55:1 in the worst case and 13.35:1 on the flat pill fill. */
  color: var(--color-text-on-dark);
}

.safety-badge svg {
  width: 20px;
  height: 20px;
  color: var(--color-success);
  flex-shrink: 0;
}

/* ---------- Trust Icons ---------- */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  text-align: center;
}

.trust-item svg {
  width: 24px;
  height: 24px;
  color: var(--color-success);
}

.trust-item span {
  font-size: 0.875rem;
  color: var(--color-text-on-dark);
}

/* ---------- Anchor Nav ---------- */
.anchor-nav {
  position: sticky;
  top: var(--navbar-height);
  background-color: var(--color-page-bg);
  border-bottom: 1px solid var(--color-card-border);
  z-index: 900;
  overflow-x: auto;
  white-space: nowrap;
}

.anchor-nav .container {
  display: flex;
  gap: var(--space-lg);
  padding: 12px var(--space-md);
}

.anchor-nav a {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.anchor-nav a:hover,
.anchor-nav a.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.anchor-nav a svg {
  width: 20px;
  height: 20px;
}

/* ---------- Footer ---------- */
.footer {
  background-color: var(--color-hero-bg);
  color: var(--color-text-on-dark-muted);
  padding: var(--space-xl) 0 var(--space-md);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.footer-col h3 {
  color: var(--color-text-on-dark);
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.footer-col a {
  font-size: 0.875rem;
  color: var(--color-text-on-dark-muted);
}

.footer-col a:hover {
  color: var(--color-text-on-dark);
}

.footer-divider {
  height: 1px;
  background-color: var(--color-slate-900);
  margin-bottom: var(--space-md);
}

.footer-bottom {
  text-align: center;
  font-size: 0.75rem;
  /* 12px text on the flat #0F1D24 footer background needs 4.5:1. slate-500
     (#64748B) only manages 3.75:1 there, and #94A3B8 managed 6.6:1; the
     current #B6C2D1 sits at 9.9:1. This is the flat footer only — the same
     variable is reused on the hero gradient, where it has to clear the
     light end of the sweep, which is the tighter constraint. */
  color: var(--color-text-on-dark-muted);
}

/* ---------- Scroll Animation ---------- */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Blog ---------- */
.blog-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.blog-card {
  background-color: var(--color-card-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.blog-card-img {
  width: 100%;
  height: 200px;
  background: var(--gradient-hero);
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-card-body {
  padding: var(--space-md);
}

.blog-card-body h3 {
  font-size: 1.125rem;
  margin-bottom: var(--space-xs);
}

.blog-card-body p {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.blog-card-meta {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xs);
}

/* Article Page */
.article-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.article-body {
  max-width: 720px;
  margin: 0 auto;
}

.article-body h2 {
  font-size: 1.5rem;
  margin: var(--space-lg) 0 var(--space-sm);
}

.article-body h3 {
  font-size: 1.25rem;
  margin: var(--space-md) 0 var(--space-sm);
}

.article-body p {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: var(--space-sm);
}

.article-body ul {
  list-style: disc;
  padding-left: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.article-body li {
  margin-bottom: var(--space-xs);
}

/* ---------- Avatar: removed ----------
   .avatar existed only to render initials for the fabricated reviewer cards on
   /reviews/. With that page rewritten to theme summaries, no markup references
   it. Re-add here if a future page needs an initial-badge component. */

/* ---------- Flex & grid shrink guards ----------
   Flex/grid items default to min-width:auto, so long unbreakable words
   can push a column past its track and cause horizontal page scroll. */
.card,
.step-item-content,
.overview-split > *,
.tv-method-grid > *,
.card-grid-2 > *,
.card-grid-3 > *,
.card-grid-4 > *,
.trust-grid > *,
.blog-list > *,
.footer-grid > * {
  min-width: 0;
}

/* Long URLs / storage paths inside body copy must wrap, not overflow */
.step-item-content p,
.overview-split p,
.card p,
.blog-card p {
  overflow-wrap: break-word;
}

/* A nowrap button whose label is longer than the column cannot shrink.
   Let it wrap and stay inside its container instead of forcing page scroll. */
.btn {
  max-width: 100%;
}

.step-item-content .btn,
.overview-split .btn,
.card .btn {
  white-space: normal;
  text-align: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }

  .navbar-menu {
    display: none;
  }

  .navbar-toggle {
    display: flex;
  }

  .card-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .card-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.625rem; }
  h3 { font-size: 1.25rem; }

  .section {
    padding: var(--space-lg) 0;
  }

  .section-lg {
    padding: var(--space-xl) 0;
  }

  .container {
    padding: 0 var(--space-sm);
  }

  /* Inline two-column grids collapse to a single column below 768px */
  .overview-split,
  .tv-method-grid {
    grid-template-columns: 1fr !important;
  }

  .card-grid-3,
  .card-grid-4,
  .card-grid-2 {
    grid-template-columns: 1fr;
  }

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

  .blog-list {
    grid-template-columns: 1fr;
  }

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

  .btn {
    width: 100%;
  }

  .btn-sm {
    width: auto;
  }

  .navbar-cta {
    display: none;
  }

  .lang-pill {
    width: 75px;
    height: 75px;
  }

  .version-bar {
    font-size: 0.6875rem;
    padding: 6px 12px;
    gap: var(--space-xs);
    flex-wrap: wrap;
    justify-content: center;
  }

  .step-item {
    flex-direction: column;
  }
}

/* ---------- Device Illustration (hero mockup) ---------- */
.device-figure {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Legacy: the hero mockup used to be an inline SVG. Kept so older cached
   markup with an inline <svg> still renders correctly. */
.device-figure svg {
  width: 100%;
  max-width: 360px;
  height: auto;
  display: block;
  filter: drop-shadow(0 24px 48px rgba(30, 41, 59, 0.22));
}

/* Cut-out PNG of the phone. Do NOT round the corners here: the source
   artwork is a device silhouette on a transparent canvas, so a radius
   would clip the outline and leave the drop shadow tracing a rectangle
   instead of the phone body. */
.device-figure img {
  width: 100%;
  max-width: 360px;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 40px rgba(15, 29, 36, 0.28));
}

@media (max-width: 767px) {
  .device-figure svg,
  .device-figure img {
    max-width: 260px;
  }
}

/* ---------- Step Diagram (install flow wireframes) ---------- */
.step-figure {
  margin-top: var(--space-sm);
  background: var(--color-section-alt);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.step-figure svg {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-sm);
}

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

/* ---------- Accessibility ---------- */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Available to screen readers, removed from the visual flow. Used for the
   section heading that keeps the document outline unbroken. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Horizontally scrollable regions are reachable with the keyboard, so the
   focus ring has to be obvious. */
.table-wrapper:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary);
  color: var(--color-page-bg);
  padding: var(--space-xs) var(--space-md);
  z-index: 1100;
  border-radius: 0 0 var(--radius-md) 0;
}

.skip-link:focus {
  top: 0;
  color: var(--color-page-bg);
}

/* ---------- Print ---------- */
@media print {
  .navbar,
  .anchor-nav,
  .footer,
  .btn,
  .mobile-menu,
  .mobile-menu-overlay {
    display: none !important;
  }
}