/* ===========================================
   RealityCheck Master Stylesheet
   Theme: Warm Dark — designed for tired eyes
   and people in emotional distress.
   No cool blues. No harsh whites. No alarm red.
   Warm charcoal, parchment, terracotta.
=========================================== */

:root {
  --bg-color:          #0e0b09;
  --surface-color:     #181310;
  --surface-raised:    #221c17;
  --text-primary:      #ede0cc;
  --text-secondary:    #9a8a76;
  --text-muted:        #6b5d50;
  --accent-color:      #b87252;
  --accent-hover:      #ca8868;
  --accent-glow:       rgba(184, 114, 82, 0.10);
  --border-color:      #2d2218;
  --border-light:      #3d3025;
  --heading-color:     #f5ebe0;
  --nav-bg:            rgba(14, 11, 9, 0.96);
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.05rem;
  line-height: 1.9;
  letter-spacing: 0.01em;
  background-color: var(--bg-color);
  color: var(--text-primary);
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family: "Georgia", "Times New Roman", serif;
  font-weight: 400;
  color: var(--heading-color);
}

h1 { font-size: 3rem; letter-spacing: -0.5px; line-height: 1.2; }

h2 {
  font-size: 2rem;
  margin-top: 4.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.6rem;
}

h3 {
  font-size: 1.1rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 2.5rem;
  margin-bottom: 0.6rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
}

p { margin-bottom: 1.6rem; font-size: 1.1rem; }

ul, ol { margin-bottom: 1.5rem; padding-left: 2rem; }
li { font-size: 1.1rem; margin-bottom: 0.6rem; }

a { color: var(--accent-color); text-decoration: none; transition: color 0.3s ease; }
a:hover { color: var(--accent-hover); }
strong { color: var(--heading-color); font-weight: 600; }

/* Nav */
nav {
  position: sticky;
  top: 0;
  background-color: var(--nav-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.1rem 2rem;
  z-index: 100;
}

nav a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: color 0.3s ease;
  white-space: nowrap;
}

nav a:hover, nav a:active { color: var(--heading-color); }

/* Header */
header {
  padding: 4.5rem 0 2.5rem;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 3.5rem;
  text-align: center;
}

.hero { text-align: center; padding: 2rem 0; }
.subtitle { color: var(--text-secondary); font-size: 1.2rem; margin-top: 0.6rem; font-style: italic; }

/* Pull quote */
.highlight {
  border-left: 3px solid var(--accent-color);
  padding: 0.5rem 0 0.5rem 1.8rem;
  font-style: italic;
  color: var(--text-secondary);
  margin: 2.5rem 0;
  font-size: 1.25rem;
  line-height: 1.8;
  font-family: "Georgia", "Times New Roman", serif;
}

/* Script box / card */
.script-box {
  background: var(--surface-raised);
  border: 1px solid var(--border-color);
  padding: 2.5rem;
  margin-bottom: 2.5rem;
  border-radius: 10px;
  transition: border-color 0.3s ease;
}

.script-box:hover { border-color: var(--border-light); }

.script-box h3 {
  margin-top: 0;
  color: var(--heading-color);
  text-transform: none;
  letter-spacing: 0;
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 1.15rem;
}

/* Closing statement */
.closing-statement {
  margin-top: 6rem;
  margin-bottom: 6rem;
  padding: 4rem 0;
  border-top: 1px solid var(--border-color);
  text-align: center;
}

.closing-statement p {
  font-size: 1.35rem;
  color: var(--heading-color);
  font-family: "Georgia", "Times New Roman", serif;
  line-height: 2.1;
}

/* Analyzer */
.analyzer {
  background: var(--surface-raised);
  border: 1px solid var(--border-color);
  padding: 2.5rem;
  border-radius: 10px;
}

.analyzer textarea {
  width: 100%;
  min-height: 200px;
  background-color: var(--surface-color);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 1.4rem;
  font-family: inherit;
  font-size: 1.05rem;
  line-height: 1.8;
  border-radius: 8px;
  resize: vertical;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.analyzer textarea::placeholder { color: var(--text-muted); }
.analyzer textarea:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 3px var(--accent-glow); }

/* Fraud grid */
.fraud-categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.8rem; }

.card.script-box { margin-bottom: 0; display: flex; flex-direction: column; }

.card p { font-size: 0.97rem; color: var(--text-secondary); flex-grow: 1; margin-bottom: 1.4rem; line-height: 1.7; }

.category-link {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 600;
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.92rem;
  transition: color 0.3s ease, padding-left 0.3s ease;
}

.category-link:hover { color: var(--accent-hover); padding-left: 4px; }

/* Button */
.submit-btn {
  background-color: var(--accent-color);
  color: var(--heading-color);
  border: none;
  padding: 1rem 2.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  align-self: flex-start;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.3px;
}

.submit-btn:hover { background-color: var(--accent-hover); transform: translateY(-1px); }
.submit-btn:active { transform: translateY(0); }
.submit-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Feedback form */
.feedback-form-container {
  margin-top: 4rem;
  padding: 3rem;
  background: var(--surface-raised);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  text-align: left;
}

.feedback-form-container h3 {
  color: var(--heading-color);
  margin-top: 0;
  margin-bottom: 1rem;
  text-transform: none;
  letter-spacing: 0;
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 1.15rem;
}

.feedback-form-container p {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.7;
}

.trauma-form { display: flex; flex-direction: column; gap: 1.4rem; }

.trauma-form label {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.88rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.trauma-form textarea,
.trauma-form input[type="email"],
.trauma-form input[type="text"] {
  width: 100%;
  background-color: var(--surface-color);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 1rem 1.2rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.7;
  border-radius: 8px;
  resize: vertical;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.trauma-form textarea::placeholder,
.trauma-form input::placeholder { color: var(--text-muted); }

.trauma-form textarea:focus,
.trauma-form input:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 3px var(--accent-glow); }

/* Select — dark theme with custom chevron in accent colour */
.trauma-form select {
  width: 100%;
  background-color: var(--surface-color);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 1rem 2.8rem 1rem 1.2rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  border-radius: 8px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* Chevron SVG: accent colour #b87252, URL-encoded */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='9' viewBox='0 0 13 9'%3E%3Cpath d='M1 1l5.5 6L12 1' stroke='%23b87252' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  background-size: 13px 9px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.trauma-form select:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Option elements — background follows browser rendering; set surface for
   browsers that respect it (Chromium-based) */
.trauma-form select option {
  background-color: var(--surface-raised);
  color: var(--text-primary);
}

/* Field wrapper — label stacked above its control */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* Optional field hint (inside label) */
.field-optional {
  color: var(--text-muted);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.82rem;
}

/* Story form — 2-column grid for the six dropdowns */
.story-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  margin-bottom: 0.2rem; /* gap between grid and full-width fields below */
}

/* Share story section wrapper — matches the about-strip spacing rhythm */
.share-story-section {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 0 2rem;
}

@media (max-width: 640px) {
  .story-form-grid {
    grid-template-columns: 1fr;
  }
}

/* Unified analyzer input — textarea + file bar in one border */
.analyzer-input-wrap {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.analyzer-input-wrap:focus-within {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Drag-over state on the whole analyzer section */
.analyzer.drag-active .analyzer-input-wrap {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Remove individual textarea border — the wrap provides it */
.analyzer-input-wrap textarea {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Character counter — bottom-right beneath the textarea/file bar */
.analyzer-char-counter {
  text-align: right;
  font-size: 0.77rem;
  color: var(--text-muted);
  padding: 0.28rem 0.5rem 0;
  transition: color 0.2s;
  user-select: none;
}

.analyzer-char-counter.near-limit {
  color: var(--accent-color);
}

.analyzer-char-counter.at-limit {
  color: #e05050;
  font-weight: 600;
}

/* The attach/file bar below the textarea. The selector line for this rule
   was missing (a pre-existing bug — the declarations were orphaned after a
   blank line, so the bar rendered completely unstyled and an extra stray
   `}` unbalanced the stylesheet). Restored so the bar gets its intended
   flex layout, padding, and top border — this also contributes to the
   attach control finally matching the rest of the UI. */
.analyzer-file-bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.9rem;
  background: var(--surface-color);
  border-top: 1px solid var(--border-color);
  flex-wrap: wrap;
  min-height: 44px;
}

.attach-btn {
  /* Secondary-action styling — deliberately NOT a full accent fill (that's
     reserved for the primary Analyze button), but aligned to the same theme:
     matches --border-light, the 8px radius used by .submit-btn, a subtle
     elevated background so it reads as a real button rather than plain text,
     and an accent-tinted hover consistent with the rest of the UI. */
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background-color: var(--surface-raised);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  font-family: inherit;
  letter-spacing: 0.2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  flex-shrink: 0;
}

.attach-btn:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
  background-color: var(--accent-glow);
}

.attach-btn:active {
  transform: translateY(1px);
}

.attach-btn:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

.attach-hint {
  font-size: 0.76rem;
  color: var(--text-muted);
  flex: 1;
}

/* File preview items inside the bar — compact single-line */
#file-preview-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
}

.file-preview-item {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--surface-raised); border: 1px solid var(--border-color);
  border-radius: 5px; padding: 0.25rem 0.6rem; font-size: 0.82rem;
  /* Mobile-portrait fix: without max-width the item could grow wider than
     the viewport when the filename was long, pushing the remove (✕) — the
     last child — off the right edge and out of reach (worked in landscape
     only because there was enough width). Constrain the item to its
     container and let the filename shrink instead of the row overflowing. */
  max-width: 100%;
  box-sizing: border-box;
}

.file-icon { font-size: 0.95rem; flex-shrink: 0; }
.file-name {
  color: var(--text-primary);
  /* was a fixed 180px which forced overflow on narrow screens; now it
     shrinks within the row so the remove button always stays visible. */
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-size { color: var(--text-muted); font-size: 0.76rem; white-space: nowrap; flex-shrink: 0; }
.file-remove {
  color: var(--text-muted); cursor: pointer; font-size: 1rem;
  transition: color 0.2s;
  /* Larger, always-visible tap target — the old `padding: 0 0.15rem` was
     far below the ~44px touch-target guideline and, combined with the
     overflow above, was easy to miss or unreachable on phones. flex-shrink:0
     guarantees it's never the element that gets squeezed out. */
  flex-shrink: 0;
  min-width: 32px; min-height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 5px;
  margin: -0.15rem -0.3rem -0.15rem 0;
}
.file-remove:hover { color: var(--accent-color); background: var(--accent-glow); }

.file-preview-item .file-icon   { font-size: 0.95rem; }

#file-result-section .result-box {
  margin-top: 1.5rem; background: var(--surface-raised); border: 1px solid var(--border-color);
  border-radius: 10px; padding: 2rem; font-size: 1rem; color: var(--text-primary);
  line-height: 1.85; white-space: pre-wrap;
}

/* About strip */
.about-strip { margin-top: 5rem; padding: 3.5rem 0 2rem; border-top: 1px solid var(--border-color); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; }

.about-block h3 {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 1.15rem; color: var(--heading-color);
  text-transform: none; letter-spacing: 0;
  margin-bottom: 1.1rem; margin-top: 0;
}

.about-block p { font-size: 0.95rem; color: var(--text-secondary); margin-bottom: 1rem; line-height: 1.8; }

/* Location reporting */
#location-reporting { margin-top: 3rem; margin-bottom: 2rem; }

.location-header h3 {
  font-size: 0.82rem; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 1.5px; margin-bottom: 0.5rem; margin-top: 0;
  font-family: -apple-system, sans-serif; font-weight: 600;
}

.location-note { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1.5rem; font-style: italic; }

.emergency-banner {
  background: rgba(184, 114, 82, 0.08);
  border: 1px solid rgba(184, 114, 82, 0.30);
  border-radius: 8px; padding: 1rem 1.5rem;
  margin-bottom: 2rem; font-size: 1rem; color: var(--text-primary); line-height: 1.6;
}

.emergency-note { color: var(--text-secondary); font-size: 0.88rem; }

.reporting-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }

.reporting-primary h4,
.reporting-secondary h4,
.reporting-global h4 {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--text-muted); margin-bottom: 1rem; margin-top: 0; font-family: -apple-system, sans-serif;
}

.reporting-global { border-top: 1px solid var(--border-color); padding-top: 1.5rem; }
.report-item { margin-bottom: 1.2rem; }

.report-item a {
  display: block; color: var(--text-primary); text-decoration: none;
  font-size: 0.95rem; font-weight: 600; transition: color 0.3s;
}

.report-item a:hover { color: var(--accent-color); }
.report-detail { display: block; font-size: 0.84rem; color: var(--text-secondary); margin-top: 0.25rem; }

#emergency-info {
  font-size: 0.88rem; color: var(--text-secondary); padding: 0.9rem 1.2rem;
  border: 1px solid var(--border-color); border-radius: 8px;
  margin-top: 1rem; line-height: 1.7; background: var(--surface-color);
}

#result-section { margin-top: 2rem; }

/* ─── Accessibility ──────────────────────── */

/* Skip nav — visible only on keyboard focus, hidden otherwise */
.skip-nav {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  background: var(--accent-color);
  color: var(--heading-color);
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 8px 8px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.skip-nav:focus {
  top: 0;
  outline: none;
}

/* Global focus-visible — keyboard users see a clear warm ring */
:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Remove outline for mouse users (only show for keyboard) */
:focus:not(:focus-visible) {
  outline: none;
}

/* Ensure nav links show focus ring */
nav a:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 4px;
  border-radius: 3px;
}

/* ─── Back to Top Button ─────────────────── */
#back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-raised);
  border: 1px solid var(--border-light);
  color: var(--accent-color);
  /* font-size omitted — button uses an SVG arrow (stroke-width 2.8, 20×20) */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.3s ease, visibility 0.3s ease,
              transform 0.3s ease, border-color 0.3s ease,
              background 0.3s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

#back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#back-to-top:hover {
  background: var(--accent-glow);
  border-color: var(--accent-color);
  transform: translateY(-2px);
}

#back-to-top:active {
  transform: translateY(0);
}

@media (max-width: 480px) {
  #back-to-top {
    bottom: 1.2rem;
    right: 1.2rem;
    width: 40px;
    height: 40px;
  }
}

/* ─── Final Words (r-recovery) ───────────── */
.final-words {
  text-align: left;
  max-width: 640px;
  margin: 0 auto 3.5rem;
  padding: 2.5rem 2.5rem 2rem;
  background: var(--surface-raised);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--accent-color);
  border-radius: 0 10px 10px 0;
  position: relative;
}

.final-words-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent-color);
  font-weight: 600;
  margin-bottom: 1.5rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.final-words-quote {
  border: none;
  padding: 0;
  margin: 0;
}

.final-words-quote p {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 1.15rem;
  line-height: 2;
  color: var(--text-primary);
  font-style: italic;
  margin-bottom: 1.3rem;
}

.final-words-quote p:last-of-type {
  margin-bottom: 0;
}

.final-words-close {
  font-weight: 600;
  color: var(--heading-color) !important;
  font-size: 1.2rem !important;
}

.final-words-attribution {
  display: block;
  margin-top: 1.8rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.3px;
}

/* ─── Anchor Navigation (r-playbook) ─────── */
.anchor-nav {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1rem 1.4rem;
  margin: 1.5rem 0 2.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

.anchor-nav-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
  padding-top: 0.15rem;
  flex-shrink: 0;
}

.anchor-nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.anchor-nav-links a {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--surface-raised);
  transition: color 0.3s, border-color 0.3s, background 0.3s;
  white-space: nowrap;
}

.anchor-nav-links a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
  background: var(--accent-glow);
}

/* ─── Page Navigation (Prev / Next) ─────── */
.page-nav {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 1rem;
  margin: 4rem 0 0;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border-color);
}

.page-nav-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.4rem;
  background: var(--surface-raised);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  transition: border-color 0.3s, background 0.3s, color 0.3s;
  max-width: 48%;
}

.page-nav-btn:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
  background: var(--accent-glow);
}

.page-nav-prev { flex-direction: row; }
.page-nav-next { flex-direction: row-reverse; margin-left: auto; }

.page-nav-arrow {
  color: var(--accent-color);
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: transform 0.3s;
}

.page-nav-prev:hover .page-nav-arrow { transform: translateX(-3px); }
.page-nav-next:hover .page-nav-arrow { transform: translateX(3px); }

.page-nav-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-nav-ghost {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

@media (max-width: 480px) {
  .page-nav { flex-direction: column; }
  .page-nav-btn { max-width: 100%; }
  .page-nav-next { margin-left: 0; }
}

/* ─── Auth Modal ─────────────────────────────── */
#auth-panel {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(14, 11, 9, 0.88);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

#auth-panel.open {
  display: flex;
}

.auth-modal {
  background: var(--surface-raised);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 2.5rem 2.5rem 2rem;
  width: 100%;
  max-width: 400px;
  position: relative;
}

.auth-close {
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  transition: color 0.2s;
}

.auth-close:hover { color: var(--text-primary); }

.auth-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 1.8rem;
}

.auth-tab {
  background: none;
  border: none;
  padding: 0.6rem 1.2rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s, border-color 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.auth-tab.active {
  color: var(--accent-color);
  border-bottom-color: var(--accent-color);
}

.auth-tab:hover:not(.active) { color: var(--text-secondary); }

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.auth-field label {
  font-size: 0.8rem;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.auth-field input {
  width: 100%;
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 0.85rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  border-radius: 8px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.auth-field input::placeholder { color: var(--text-muted); }
.auth-field input:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 3px var(--accent-glow); }

.auth-error {
  font-size: 0.85rem;
  color: var(--accent-color);
  min-height: 1.2em;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.auth-footer-note {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Nav auth links */
.nav-auth-link { color: var(--text-muted) !important; }
.nav-auth-link:hover { color: var(--accent-color) !important; }
.nav-signout { color: var(--accent-color) !important; }

/* Quota display — below analyze button */
.quota-display {
  text-align: center;
  margin-top: 0.65rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}

/* Mobile nav */
@media (max-width: 768px) {
  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.7rem; }
  p, li { font-size: 1.05rem; }
  .script-box { padding: 1.6rem; }
  .feedback-form-container { padding: 1.6rem; }
  .about-grid { grid-template-columns: 1fr; gap: 2rem; }
  .reporting-grid { grid-template-columns: 1fr; gap: 1.5rem; }

  nav {
    flex-direction: row; flex-wrap: nowrap;
    overflow-x: auto; overflow-y: hidden;
    justify-content: flex-start; gap: 0; padding: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
  }

  nav::-webkit-scrollbar { display: none; }

  nav a {
    flex-shrink: 0; padding: 0.9rem 1.1rem;
    font-size: 0.76rem; border-right: 1px solid var(--border-color);
  }

  nav a:last-child  { border-right: none; padding-right: 1.5rem; }
  nav a:first-child { padding-left: 1.5rem; }
}

@media (max-width: 480px) {
  body { padding: 0 1.2rem; }
  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.4rem; }
  .fraud-categories { grid-template-columns: 1fr; }
  .analyzer { padding: 1.5rem; }
  .closing-statement p { font-size: 1.15rem; }
}


/* ===========================================
   SITE FOOTER  (shared — pricing, account, privacy)
=========================================== */

.site-footer {
  text-align: center;
  margin: 4rem 0 2rem;
  color: var(--text-secondary);
  font-size: 0.85rem;
  border-top: 1px solid var(--border-color);
  padding-top: 2rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.site-footer p { font-size: 0.85rem; margin-bottom: 0.5rem; }
.site-footer p:last-child { font-size: 0.8rem; margin-bottom: 0; }

.site-footer a {
  color: var(--text-muted);
  text-decoration: underline;
}

.site-footer a:hover { color: var(--accent-hover); }


/* ===========================================
   PRICING PAGE
=========================================== */

/* ── Currency + cadence toggles ─────────── */

.pricing-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 2.5rem;
  margin: 2.5rem auto 3rem;
}

.toggle-group {
  display: flex;
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}

.toggle-btn {
  padding: 0.5rem 1.2rem;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  white-space: nowrap;
  letter-spacing: 0.03em;
}

.toggle-btn.active {
  background: var(--accent-color);
  color: var(--heading-color);
  font-weight: 600;
}

.toggle-btn:hover:not(.active) {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}

.save-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  padding: 0 0.35em;
  font-size: 0.72em;
  font-weight: 700;
  vertical-align: middle;
  margin-left: 0.3em;
  letter-spacing: 0.04em;
}

/* ── Pricing grid ────────────────────────── */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 960px;
  margin: 0 auto;
  align-items: start;
}

/* ── Pricing card ────────────────────────── */

.pricing-card {
  position: relative;
  background: var(--surface-raised);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 2rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s ease;
}

.pricing-card--featured {
  border-color: var(--accent-color);
  box-shadow: 0 0 32px -10px rgba(184, 114, 82, 0.2);
}

/* ── Plan badge (Most Popular) ───────────── */

.plan-badge {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-color);
  color: var(--heading-color);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.25rem 1rem;
  border-radius: 0 0 6px 6px;
  white-space: nowrap;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Plan name label ─────────────────────── */

.plan-name {
  /* Override global p margin/size */
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.pricing-card--featured .plan-name {
  color: var(--accent-color);
}

/* ── Price display ───────────────────────── */

.plan-price-wrap {
  margin-bottom: 1.5rem;
}

.plan-price-main {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--heading-color);
  font-family: "Georgia", "Times New Roman", serif;
  line-height: 1.1;
}

.price-period {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-secondary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.plan-price-sub {
  /* Override global p margin/size */
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.3rem;
  margin-bottom: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-height: 1.1em;
}

.plan-price-free {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-secondary);
  font-family: "Georgia", "Times New Roman", serif;
  line-height: 1.1;
}

/* ── Feature list ────────────────────────── */

.plan-features {
  list-style: none;
  padding: 0;          /* override global ul padding-left: 2rem */
  margin: 0 0 1.75rem;
  flex: 1;
  border-top: 1px solid var(--border-color);
  padding-top: 1.25rem;
}

.plan-features li {
  /* Override global li size/margin */
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.875rem;
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  padding: 0.32rem 0;
  margin-bottom: 0;    /* override global li margin-bottom */
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.plan-features li:last-child {
  border-bottom: none;
}

.feat-icon {
  font-style: normal;
  font-size: 0.78rem;
  flex-shrink: 0;
  margin-top: 0.18rem;
  opacity: 0.8;
  color: var(--accent-color);
}

.feat-dim {
  color: var(--text-secondary);
  opacity: 0.55;
}

.feat-dim .feat-icon {
  color: var(--text-muted);
}

/* ── Plan buttons ────────────────────────── */

.plan-btn {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 7px;
  border: none;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease, background 0.2s ease,
              color 0.2s ease, border-color 0.2s ease;
  letter-spacing: 0.02em;
  align-self: auto; /* override .submit-btn align-self: flex-start */
}

.plan-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.plan-btn--primary {
  background: var(--accent-color);
  color: var(--heading-color);
}

.plan-btn--primary:hover:not(:disabled) {
  background: var(--accent-hover);
}

.plan-btn--secondary {
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
}

.plan-btn--secondary:hover:not(:disabled) {
  color: var(--text-primary);
  border-color: var(--text-secondary);
}

.plan-btn--current {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  cursor: default;
  font-weight: 500;
}

.plan-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Pricing footnote ────────────────────── */

.pricing-note {
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.82rem;
  margin: 2rem auto 0;
  max-width: 520px;
  line-height: 1.8;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Override global p margin inside .pricing-note */
.pricing-note p { margin-bottom: 0; font-size: 0.82rem; }
.pricing-note a  { color: var(--text-muted); text-decoration: underline; }

/* ── Checkout status message ─────────────── */

.checkout-status {
  text-align: center;
  font-size: 0.87rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin: 1.25rem auto 0;
  max-width: 500px;
  padding: 0.65rem 1rem;
  border-radius: 6px;
  display: none;
  line-height: 1.5;
}

.checkout-status.error {
  display: block;
  background: rgba(160, 60, 60, 0.12);
  border: 1px solid rgba(160, 60, 60, 0.28);
  color: #d07878;
}

.checkout-status.success {
  display: block;
  background: rgba(60, 130, 75, 0.12);
  border: 1px solid rgba(60, 130, 75, 0.28);
  color: #82c490;
}

.checkout-status.info {
  display: block;
  background: var(--accent-glow);
  border: 1px solid rgba(184, 114, 82, 0.3);
  color: var(--accent-hover);
}

/* ── Post-payment confirming overlay ─────── */

.confirming-overlay {
  display: none;       /* shown via .active class */
  position: fixed;
  inset: 0;
  background: rgba(14, 11, 9, 0.94);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.5rem;
  text-align: center;
  padding: 2rem;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.confirming-overlay.active {
  display: flex;
}

.confirming-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(184, 114, 82, 0.2);
  border-top-color: var(--accent-color);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  flex-shrink: 0;
}

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

.confirming-title {
  /* Override h2 global margin-top: 4.5rem */
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.4rem;
  font-family: "Georgia", "Times New Roman", serif;
  color: var(--heading-color);
  border: none;
  padding: 0;
}

.confirming-sub {
  /* Override global p */
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  max-width: 380px;
  line-height: 1.7;
  margin-bottom: 0;
}

.confirming-btn {
  padding: 0.65rem 2rem;
  border-radius: 7px;
  border: 1px solid var(--border-light);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.confirming-btn:hover {
  color: var(--text-primary);
  border-color: var(--text-secondary);
}

/* ── Refill credits callout ──────────────── */

.refill-callout {
  display: none;       /* shown via .visible class */
  max-width: 600px;
  margin: 2.5rem auto 0;
  background: var(--surface-raised);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 1.4rem 1.75rem;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.refill-callout.visible {
  display: flex;
}

.refill-callout-text {
  flex: 1;
  min-width: 180px;
}

/* Override h3 global inside callout */
.refill-callout-text h3 {
  font-size: 0.95rem;
  font-family: "Georgia", "Times New Roman", serif;
  color: var(--heading-color);
  margin: 0 0 0.3rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

/* Override p global inside callout */
.refill-callout-text p {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin: 0;
  line-height: 1.55;
}

.refill-price {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--heading-color);
  font-family: "Georgia", "Times New Roman", serif;
  white-space: nowrap;
}

.refill-price span {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-secondary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Pricing responsive ──────────────────── */

@media (max-width: 760px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
  }

  /* On mobile, featured card doesn't need vertical breathing room
     for the badge — it's inline with the other cards */
  .pricing-card--featured {
    padding-top: 2.5rem;
  }
}

@media (max-width: 480px) {
  .refill-callout {
    flex-direction: column;
    align-items: flex-start;
  }

  .refill-callout .plan-btn {
    width: 100%;
  }
}


/* ===========================================
   ACCOUNT PAGE
=========================================== */

/* ── Loading skeleton ────────────────────── */

.account-loading {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-muted);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.9rem;
}

.account-loading .confirming-spinner {
  margin: 0 auto 1.5rem;
}

/* ── Account page grid ───────────────────── */

.account-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

/* ── Account card — extends .script-box ─── */
/* Use class="script-box account-card" in HTML */

.account-card {
  /* .script-box provides bg, border, border-radius, padding.
     This class refines spacing and removes hover border shift. */
  margin-bottom: 0;
  padding: 2rem;
}

/* Override script-box h3 inside account cards */
.account-card h3 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 1.25rem;
}

/* ── Tier badge ──────────────────────────── */

.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.85rem;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  border: 1px solid transparent;
}

.tier-badge--free {
  background: rgba(107, 93, 80, 0.15);
  border-color: var(--border-light);
  color: var(--text-secondary);
}

.tier-badge--personal {
  background: var(--accent-glow);
  border-color: rgba(184, 114, 82, 0.35);
  color: var(--accent-hover);
}

.tier-badge--professional {
  background: rgba(184, 114, 82, 0.18);
  border-color: rgba(184, 114, 82, 0.5);
  color: var(--heading-color);
}

/* ── Account meta rows (label / value pairs) */

.account-meta {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.account-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border-color);
}

.account-meta-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.account-meta-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  white-space: nowrap;
}

.account-meta-value {
  font-size: 0.9rem;
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  text-align: right;
  word-break: break-all;
}

/* ── Usage meters ────────────────────────── */

.usage-items {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.usage-item-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.45rem;
}

.usage-label {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.usage-value {
  font-size: 0.82rem;
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  white-space: nowrap;
}

.usage-bar {
  height: 6px;
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  overflow: hidden;
}

.usage-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--accent-color);
  opacity: 0.5;
  transition: width 0.5s ease, opacity 0.3s ease, background 0.3s ease;
}

.usage-bar-fill--warning {
  opacity: 0.75;
}

.usage-bar-fill--critical {
  opacity: 1;
  background: var(--accent-color);
}

.usage-caption {
  font-size: 0.76rem;
  color: var(--text-muted);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin-top: 0.35rem;
}

/* Refill row — no bar, just a summary line */
.usage-item--refill {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.usage-item--refill .usage-label { color: var(--text-secondary); }
.usage-item--refill .usage-value { color: var(--accent-hover); }

/* ── Account actions ─────────────────────── */

.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}

.account-action-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.3rem;
  border-radius: 7px;
  border: 1px solid var(--accent-color);
  background: var(--accent-glow);
  color: var(--accent-hover);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  white-space: nowrap;
}

.account-action-link:hover {
  background: rgba(184, 114, 82, 0.18);
  color: var(--heading-color);
}

.account-action-link--secondary {
  border-color: var(--border-light);
  background: transparent;
  color: var(--text-secondary);
}

.account-action-link--secondary:hover {
  border-color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
}

.account-signout-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
  padding: 0.65rem 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
  margin-left: auto;
}

.account-signout-btn:hover { color: var(--text-secondary); }

/* ── Account upgrade callout ─────────────── */

.account-upgrade-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--accent-glow);
  border: 1px solid rgba(184, 114, 82, 0.25);
  border-radius: 8px;
}

.account-upgrade-callout p {
  font-size: 0.875rem;
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin: 0;
  line-height: 1.55;
}

/* ── Error state ─────────────────────────── */

.account-error {
  text-align: center;
  padding: 3rem 1rem;
}

.account-error p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin-bottom: 1.2rem;
}

/* ── Account responsive ──────────────────── */

@media (max-width: 700px) {
  .account-grid {
    grid-template-columns: 1fr;
  }

  .account-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .account-signout-btn {
    margin-left: 0;
    text-align: center;
  }

  .account-upgrade-callout {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ── Auth submit button (full-width in modal context) ────────────────── */
/* Avoids inline style="width:100%" on submit buttons inside .auth-modal  */
.auth-submit-btn { width: 100%; }


/* ===========================================
   CHECKOUT SUCCESS & CANCEL PAGES
=========================================== */

/* ── Shared: centered single-card layout ─── */

.checkout-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 3rem 1rem 5rem;
  min-height: 60vh;
}

.checkout-card {
  width: 100%;
  max-width: 520px;
  background: var(--surface-raised);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 3rem 2.5rem 2.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* ── State blocks inside the card ───────── */
/* Each state is shown/hidden via the hidden attribute */

.checkout-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* ── Status icon circle ──────────────────── */

.checkout-icon-circle {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.75rem;
  font-size: 1.7rem;
  flex-shrink: 0;
}

.checkout-icon-circle--spinning {
  /* Reuses the confirming-spinner style but larger */
  border: 3px solid rgba(184, 114, 82, 0.18);
  border-top-color: var(--accent-color);
  animation: spin 0.9s linear infinite;
  font-size: 0;   /* hide any text inside */
}

.checkout-icon-circle--success {
  border: 2px solid var(--accent-color);
  color: var(--accent-color);
  animation: checkout-pop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.checkout-icon-circle--neutral {
  border: 2px solid var(--border-light);
  color: var(--text-muted);
}

.checkout-icon-circle--cancel {
  border: 2px solid var(--border-light);
  color: var(--text-muted);
}

@keyframes checkout-pop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ── Headings & body copy inside card ───── */
/* Override global h2 (margin-top: 4.5rem, border-bottom) and p (font-size: 1.1rem) */

.checkout-heading {
  font-size: 1.5rem;
  font-family: "Georgia", "Times New Roman", serif;
  color: var(--heading-color);
  font-weight: 400;
  margin: 0 0 0.85rem;
  line-height: 1.3;
  border: none;
  padding: 0;
}

.checkout-body {
  font-size: 0.95rem;
  color: var(--text-secondary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.7;
  margin: 0 0 0.5rem;
  max-width: 380px;
}

.checkout-body:last-of-type { margin-bottom: 0; }

/* ── Polling progress bar ────────────────── */

.poll-progress {
  width: 100%;
  max-width: 320px;
  height: 3px;
  background: var(--surface-color);
  border-radius: 2px;
  overflow: hidden;
  margin: 1.75rem auto 0;
}

.poll-progress-fill {
  height: 100%;
  background: var(--accent-color);
  border-radius: 2px;
  opacity: 0.6;
  /* Fills over 90 seconds — matches the JS poll timeout */
  animation: poll-fill 90s linear forwards;
}

@keyframes poll-fill {
  from { width: 0%; }
  to   { width: 100%; }
}

/* ── Tier reveal chip (shown in success state) */

.checkout-tier-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 1rem;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--accent-glow);
  border: 1px solid rgba(184, 114, 82, 0.35);
  color: var(--accent-hover);
  margin-bottom: 1.5rem;
  animation: checkout-pop 0.5s 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

/* ── Action buttons / links inside card ──── */

.checkout-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
  width: 100%;
}

.checkout-primary-btn {
  display: inline-block;
  padding: 0.8rem 2.2rem;
  background: var(--accent-color);
  color: var(--heading-color);
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease;
  width: 100%;
  text-align: center;
  max-width: 280px;
}

.checkout-primary-btn:hover { background: var(--accent-hover); color: var(--heading-color); }

.checkout-secondary-link {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.checkout-secondary-link:hover { color: var(--text-secondary); }

/* ── Divider line between actions ───────── */

.checkout-divider {
  width: 100%;
  max-width: 280px;
  height: 1px;
  background: var(--border-color);
  margin: 0.25rem 0;
}

/* ── Cancel page — "no charge" callout ──── */

.no-charge-note {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 0.4rem 0.9rem;
  margin-bottom: 1.75rem;
  letter-spacing: 0.02em;
}

/* ── Responsive ──────────────────────────── */

@media (max-width: 560px) {
  .checkout-card {
    padding: 2.25rem 1.5rem 2rem;
  }

  .checkout-heading { font-size: 1.3rem; }
}


/* ===========================================
   QUOTA DISPLAY & UPGRADE NUDGE  (Phase 6)
=========================================== */

/* Link shown inside the quota-display paragraph when remaining is low */
.quota-upgrade-link {
  color: var(--accent-color);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: inherit;
  transition: color 0.2s;
}

.quota-upgrade-link:hover { color: var(--accent-hover); }

/* Link shown inside .result-box error messages — e.g. "View plans →" */
.result-link {
  color: var(--accent-color);
  text-decoration: underline;
  text-underline-offset: 2px;
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.9rem;
  transition: color 0.2s;
}

.result-link:hover { color: var(--accent-hover); }

/* ── Post-upgrade flash banner ─────────────
   Injected by checkUpgradeParam() when index.html
   is loaded with ?upgraded=1 from checkout-success. */

.upgrade-success-banner {
  background: rgba(60, 130, 75, 0.10);
  border: 1px solid rgba(60, 130, 75, 0.28);
  border-radius: 8px;
  padding: 0.85rem 1.2rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  color: #82c490;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  animation: banner-slide-in 0.3s ease both;
}

.upgrade-success-banner a {
  color: #82c490;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.upgrade-success-banner a:hover { color: #a5d6b0; }

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


/* ===========================================
   PRIVACY / POLICY PAGES
=========================================== */

/* Active nav link on the current page */
.nav-current { color: var(--heading-color); }

/* "Last updated" meta line below the subtitle */
.policy-meta {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 2rem;
}


/* ─────────────────────────────────────────────────────────────────────────────
   OTP AUTH MODAL — Phase 7 rework
   Two-step flow (email → code) replaces the old tab-based login/register.
   The tab styles remain in the file for any future use; they are simply not
   rendered because .auth-tabs is no longer in the HTML.
   ───────────────────────────────────────────────────────────────────────── */

/* Step headings ─────────────────────────────────────────────────────────── */
.auth-heading {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.45rem;
  line-height: 1.3;
  padding-right: 1.8rem; /* clear the × close button */
}

.auth-subheading {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 1.6rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.auth-subheading strong {
  color: var(--text-primary);
  font-weight: 600;
  word-break: break-all;
}

/* Code input — large, centred, monospaced ─────────────────────────────── */
#otp-code {
  text-align: center;
  font-size: 1.7rem;
  letter-spacing: 0.35em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600;
  color: var(--text-primary);
  padding: 0.85rem 1rem;
  /* slightly taller than standard inputs to give the digits space */
}

#otp-code::placeholder {
  letter-spacing: 0.2em;
  font-size: 1.4rem;
  color: var(--text-muted);
  opacity: 0.5;
}

/* Footer links inside the OTP form ──────────────────────────────────────── */
.auth-footer-note a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.auth-footer-note a:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

/* Referral code section ─────────────────────────────────────────────────── */
#otp-referral-wrap {
  margin-top: 0;
  animation: otp-fade-in 0.18s ease;
}

@keyframes otp-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── PRICING: auto-detected currency note (replaces the manual INR/USD toggle) ─ */
.currency-note {
  width: 100%;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin: 0 0 0.2rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  order: -1;           /* always renders above the toggle group */
}