/* =========================================================================
   AFFISCOPE DESIGN SYSTEM — BASED ON DESIGN.MD
   Theme: User Interviews Style — Sunlit research field notes on warm paper
   Surfaces: Paper White (#f2f8f7) • Card Mint (#e4f0f1) • Blush Sand (#f2e8e2)
   Actions: Deep Teal (#1c5d5f) • Ink Navy (#16325a) • Pine Shadow (#0e4749)
   Typography: Source Serif 4 / Lora (Serif) + DM Sans / Inter (Sans) + IBM Plex Mono (Eyebrows)
   Shapes: 48px Pill Buttons • 12px Flat Cards • 88px Nav • 1000px Pill Banners
   Elevation: ZERO drop shadows — Pure Flat Color Layering & 1px Hairlines
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..700;1,9..40,400..700&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Lora:ital,wght@0,400..600;1,400..700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400..700;1,8..60,400..700&display=swap');

:root {
  /* Brand Palette from design.md */
  --color-deep-teal: #1c5d5f;
  --color-pine-shadow: #0e4749;
  --color-sage: #65b8a2;
  --color-lake-teal: #2a7779;
  --color-forest-floor: #156152;
  --color-ink-navy: #16325a;
  --color-dusty-rose: #d6aec1;
  --color-mint-mist: #a2cbcd;
  --color-sea-foam: #cae1e2;
  --color-paper-white: #f2f8f7;
  --color-card-mint: #e4f0f1;
  --color-blush-sand: #f2e8e2;
  --color-charcoal-navy: #283338;
  --color-slate: #333333;
  --color-soft-black: #1a1a1a;
  --color-illustration-ink: #231e21;

  /* Typography Families */
  --font-sans: 'DM Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: 'Source Serif 4', 'Lora', ui-serif, Georgia, Cambria, "Times New Roman", serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography Scale */
  --text-caption: 12px;
  --text-body-sm: 14px;
  --text-body: 16px;
  --text-subheading: 20px;
  --text-heading-sm: 24px;
  --text-heading: 44px;
  --text-heading-lg: 50px;
  --text-display: 64px;

  /* Line Heights */
  --leading-tight: 1.16;
  --leading-heading: 1.2;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-88: 88px;
  --spacing-112: 112px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 88px;
  --card-padding: 32px;

  /* Border Radii (Strictly from design.md) */
  --radius-buttons: 48px;
  --radius-nav: 88px;
  --radius-tags: 100px;
  --radius-cards: 12px;
  --radius-pills: 1000px;

  /* Transition Easing */
  --ease-smooth: cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

html {
  scroll-behavior: smooth;
  background-color: var(--color-paper-white);
  color: var(--color-charcoal-navy);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--color-paper-white);
  color: var(--color-charcoal-navy);
  font-family: var(--font-sans);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  line-height: var(--leading-body);
  letter-spacing: -0.01em;
}

/* Headings: Literary Serif (Source Serif 4 / Lora) */
h1, h2, h3, h4, h5, h6,
.font-serif,
.heading-editorial {
  font-family: var(--font-serif);
  color: var(--color-charcoal-navy);
  font-weight: 500;
  line-height: var(--leading-heading);
  letter-spacing: -0.02em;
  margin: 0;
}

/* Body & UI Sans */
p, span, div, a, button, input, textarea, label {
  font-family: var(--font-sans);
}

/* Monospace Annotation & Eyebrows */
code, pre, .font-mono, .eyebrow-mono, .stat-mono {
  font-family: var(--font-mono) !important;
}

/* Custom Paper Selection */
::selection {
  background-color: var(--color-mint-mist);
  color: var(--color-charcoal-navy);
}

/* Clean Editorial Scrollbar */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: var(--color-paper-white);
}
::-webkit-scrollbar-thumb {
  background: var(--color-mint-mist);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-sage);
}

/* =========================================================================
   BUTTONS (48px Pill Radius — The Strict design.md Geometry)
   ========================================================================= */

/* Primary Filled Action Button (Deep Teal #1c5d5f) */
.btn-primary,
.btn-deep-teal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-deep-teal);
  color: #ffffff !important;
  border: none;
  border-radius: var(--radius-buttons);
  padding: 12px 24px;
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.btn-primary:hover,
.btn-deep-teal:hover {
  background-color: var(--color-forest-floor);
  color: #ffffff !important;
  transform: translateY(-1px);
}
.btn-primary:active,
.btn-deep-teal:active {
  transform: translateY(0);
}

/* Secondary Filled Action Button (Ink Navy #16325a) */
.btn-secondary,
.btn-ink-navy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-ink-navy);
  color: #ffffff !important;
  border: none;
  border-radius: var(--radius-buttons);
  padding: 12px 24px;
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.btn-secondary:hover,
.btn-ink-navy:hover {
  background-color: #0f2240;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* Ghost Outline Button (Pine Shadow #0e4749) */
.btn-ghost,
.btn-ghost-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: var(--color-pine-shadow) !important;
  border: 1px solid var(--color-pine-shadow);
  border-radius: var(--radius-buttons);
  padding: 12px 24px;
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.btn-ghost:hover,
.btn-ghost-pill:hover {
  background-color: var(--color-card-mint);
  color: var(--color-pine-shadow) !important;
  transform: translateY(-1px);
}

/* Header Compact CTA Button */
.btn-header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-deep-teal);
  color: #ffffff !important;
  border: none;
  border-radius: var(--radius-buttons);
  padding: 8px 18px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}
.btn-header-cta:hover {
  background-color: var(--color-forest-floor);
}

/* Header Ghost Button */
.btn-header-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: var(--color-charcoal-navy) !important;
  border: 1px solid var(--color-mint-mist);
  border-radius: var(--radius-buttons);
  padding: 8px 18px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.btn-header-ghost:hover {
  background-color: var(--color-card-mint);
  border-color: var(--color-sage);
}

/* =========================================================================
   TAGS, PILLS & SECTION EYEBROWS (design.md Specifications)
   ========================================================================= */

/* Section Eyebrow: IBM Plex Mono 13-14px uppercase, tracking 0.04em, with colored dot */
.section-eyebrow,
.eyebrow-mono {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono) !important;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-pine-shadow);
  margin-bottom: 8px;
}
.eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-deep-teal);
  display: inline-block;
  flex-shrink: 0;
}
.eyebrow-dot-sage {
  background-color: var(--color-sage);
}
.eyebrow-dot-rose {
  background-color: var(--color-dusty-rose);
}
.eyebrow-dot-navy {
  background-color: var(--color-ink-navy);
}

/* AI / Top Announcement Pill Banner (1000px Radius) */
.announcement-banner-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--color-card-mint);
  border: 1px solid var(--color-mint-mist);
  border-radius: var(--radius-pills);
  padding: 8px 20px;
  font-size: 13px;
  color: var(--color-charcoal-navy);
  transition: border-color 0.2s ease;
}
.announcement-banner-pill:hover {
  border-color: var(--color-sage);
}

/* Filter Chip / Tag Pill (100px Radius) */
.filter-chip,
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--color-card-mint);
  color: var(--color-charcoal-navy);
  border: 1px solid var(--color-mint-mist);
  border-radius: var(--radius-tags);
  padding: 6px 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  transition: all 0.2s ease;
}
.filter-chip.active {
  background-color: var(--color-deep-teal);
  color: #ffffff;
  border-color: var(--color-deep-teal);
}

/* =========================================================================
   SURFACES & CARDS (Strict Rule: 12px Radius, Flat Layering, NO Drop Shadows)
   ========================================================================= */

/* Mint Card Surface (#e4f0f1) */
.card-mint {
  background-color: var(--color-card-mint);
  border: 1px solid #d4e7e8;
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
  box-shadow: none !important;
  position: relative;
  transition: border-color 0.2s ease;
}
.card-mint:hover {
  border-color: var(--color-mint-mist);
}

/* Blush Sand Card Surface (#f2e8e2) */
.card-blush {
  background-color: var(--color-blush-sand);
  border: 1px solid #e7ded7;
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
  box-shadow: none !important;
  position: relative;
  transition: border-color 0.2s ease;
}
.card-blush:hover {
  border-color: var(--color-dusty-rose);
}

/* Canvas / White Card Surface (#ffffff with mint border) */
.card-canvas,
.card-white {
  background-color: #ffffff;
  border: 1px solid var(--color-card-mint);
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
  box-shadow: none !important;
  position: relative;
  transition: border-color 0.2s ease;
}
.card-canvas:hover,
.card-white:hover {
  border-color: var(--color-mint-mist);
}

/* Dark Extension HUD Card (Simulating the Live Chrome Extension Window) */
.hud-window-dark {
  background-color: #121721;
  border: 1px solid #232d3f;
  border-radius: 20px;
  color: #e4f0f1;
  box-shadow: none !important;
  overflow: hidden;
}

/* =========================================================================
   STAT STRIP & LOGO TRUST BAR (Components from design.md)
   ========================================================================= */

/* Full-Width Stat Banner Strip */
.stat-banner-strip {
  width: 100%;
  border-top: 1px solid var(--color-card-mint);
  border-bottom: 1px solid var(--color-card-mint);
  background-color: #ffffff;
  padding: 20px 24px;
}

.stat-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.038em;
  color: var(--color-charcoal-navy);
}
.stat-item strong {
  font-weight: 700;
  color: var(--color-deep-teal);
}
.stat-divider {
  color: var(--color-mint-mist);
  margin: 0 16px;
  font-weight: 300;
}

/* Desaturated Logo Trust Bar */
.trust-bar {
  border-top: 1px solid var(--color-card-mint);
  border-bottom: 1px solid var(--color-card-mint);
  padding: 24px 0;
  background-color: var(--color-paper-white);
}
.trust-logo-item {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6c7c82;
  transition: color 0.2s ease;
}
.trust-logo-item:hover {
  color: var(--color-deep-teal);
}

/* =========================================================================
   CHECKLIST FEATURE LIST (Custom Teal Checkmarks from design.md)
   ========================================================================= */

.checklist-feature {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--color-charcoal-navy);
  line-height: 1.45;
}
.check-bullet {
  color: var(--color-deep-teal);
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1.2;
}

/* =========================================================================
   NAVIGATION BAR (88px Radius Pill Layout from design.md)
   ========================================================================= */

.nav-paper {
  background-color: rgba(242, 248, 247, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-card-mint);
}

.nav-link {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-charcoal-navy);
  text-decoration: none;
  border-radius: var(--radius-nav);
  padding: 6px 14px;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.nav-link:hover {
  color: var(--color-deep-teal);
  background-color: var(--color-card-mint);
}

/* =========================================================================
   ACCORDIONS & FAQ ROWS
   ========================================================================= */

.faq-card {
  background-color: #ffffff;
  border: 1px solid var(--color-card-mint);
  border-radius: var(--radius-cards);
  padding: 20px 24px;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.faq-card:hover {
  border-color: var(--color-mint-mist);
  background-color: #fafdfd;
}
.faq-card-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--color-charcoal-navy);
  font-weight: 500;
}
.faq-card-answer {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-card-mint);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: #4a585e;
}

/* =========================================================================
   TABLE MATRIX (Flat Bordered Grid)
   ========================================================================= */

.matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 14px;
}
.matrix-table th {
  padding: 18px 24px;
  text-align: left;
  border-bottom: 1px solid var(--color-card-mint);
  background-color: var(--color-card-mint);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-charcoal-navy);
}
.matrix-table td {
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-card-mint);
  color: var(--color-charcoal-navy);
}
.matrix-table tr:hover td {
  background-color: #f7fbfa;
}

/* =========================================================================
   HAND-DRAWN ILLUSTRATION ACCENTS & BROWSER MOCKUPS
   ========================================================================= */

.browser-frame-illustration {
  border: 2px solid var(--color-illustration-ink);
  border-radius: 10px;
  background-color: #ffffff;
  position: relative;
  overflow: hidden;
}
.browser-frame-header {
  height: 24px;
  border-bottom: 2px solid var(--color-illustration-ink);
  background-color: var(--color-card-mint);
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 5px;
}
.browser-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-illustration-ink);
}

/* Clean Custom Scroll for Live Simulator */
.custom-popup-scroll::-webkit-scrollbar {
  width: 4px;
}
.custom-popup-scroll::-webkit-scrollbar-track {
  background: #121721;
}
.custom-popup-scroll::-webkit-scrollbar-thumb {
  background: #232d3f;
  border-radius: 4px;
}

/* =========================================================================
   COMPATIBILITY ALIASES (For subpages: support.html, privacy.html, terms.html)
   ========================================================================= */
.nav-parchment {
  background-color: rgba(242, 248, 247, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-card-mint);
}
.card-parchment {
  background-color: #ffffff;
  border: 1px solid var(--color-card-mint);
  border-radius: var(--radius-cards);
  padding: 28px;
  box-shadow: none !important;
}
.btn-lake-blue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-deep-teal) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--radius-buttons) !important;
  padding: 12px 24px;
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.btn-lake-blue:hover {
  background-color: var(--color-forest-floor) !important;
}
.btn-off-black {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-ink-navy) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--radius-buttons) !important;
  padding: 12px 24px;
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.btn-off-black:hover {
  background-color: #0f2240 !important;
}