/* =====================================================================
   WINGFLOW — STYLESHEET
   ---------------------------------------------------------------------
   This file styles every part of the page, and it's organized top to
   bottom in the SAME ORDER the sections appear on the page (header
   first, hero next, and so on down to the footer and modal at the
   end). Each numbered block below has a short explanation of what it
   controls, so if you want to change how something looks, scroll to
   the matching numbered section and edit the values there (things
   like colors, spacing, and font sizes).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. DESIGN TOKENS (variables for colors, fonts, spacing, etc.)
   ---------------------------------------------------------------------
   Everything in here is a CSS "variable" (also called a custom
   property). Instead of typing a color code everywhere it's used,
   we define it once here (e.g. --gold: #c69a4a;) and then reuse it
   anywhere with var(--gold). This is the BEST place to change the
   site's overall colors/fonts, because editing one line here updates
   every element that uses that variable across the whole site.
   ------------------------------------------------------------------ */
:root {
  /* Background colors, from darkest to slightly lighter */
  --bg: #0b0a08;
  --bg-soft: #121009;
  --card: #17140d;
  --card-2: #1d1810;

  /* Thin border/divider line colors (very light, semi-transparent white) */
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.05);

  /* Text colors, from brightest (--text) to dimmest (--muted-2) */
  --text: #f6f2ea;
  --text-2: #cdc4b3;
  --muted: #9c9282;
  --muted-2: #695f4f;

  /* Brand accent color (the gold/brass color used for buttons, links,
     highlights, etc.) — change --gold and --gold-2 to re-brand the
     whole site to a different accent color */
  --gold: #c69a4a;
  --gold-2: #e2ba76;
  --gold-soft: rgba(198, 154, 74, 0.14);
  --gold-glow: rgba(198, 154, 74, 0.38);

  /* Status colors — green for "good/success", orange-red for "bad",
     yellow for "pending", each with a lighter transparent version
     for use as a background behind the solid color */
  --good: #8fb478;
  --good-soft: rgba(143, 180, 120, 0.13);
  --bad: #d97b5f;
  --bad-soft: rgba(217, 123, 95, 0.13);
  --pending: #e0b355;
  --pending-soft: rgba(224, 179, 85, 0.13);

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.65);
  --maxw: 1180px;

  /* The two fonts used across the site: --font-display (Fraunces, a
     serif font) for big headings, and --font (Inter, a sans-serif
     font) for regular body text and buttons */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  font-family: var(--font);
  line-height: 1.5;
  font-weight: 400;
  color: var(--text);
  background-color: var(--bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Stops the page from ever showing a horizontal scrollbar — some of
   the decorative glow shapes further down (like ".hero-glow") are
   wider than very narrow phone screens on purpose, and this line
   just makes sure their overflow is invisibly clipped instead of
   stretching the whole page sideways. It doesn't change how anything
   looks; it only hides that extra, already-invisible overflow. */
html, body { overflow-x: hidden; }

/* ---------------------------------------------------------------------
   2. BASE / RESET
   ---------------------------------------------------------------------
   General page-wide defaults that apply before any section-specific
   styling kicks in.
   ------------------------------------------------------------------ */
body {
  margin: 0;
  position: relative;
  /* A soft glowing gradient near the top of the page (behind the
     hero), layered on top of the plain background color */
  background:
    radial-gradient(1200px 600px at 50% -100px, rgba(198, 154, 74, 0.08), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: var(--font);
  min-width: 320px;
}

/* A very faint grainy texture laid over the entire page, drawn using
   an inline SVG "noise" filter instead of an image file. It's set to
   very low opacity so it's barely noticeable — just adds a bit of
   texture instead of a flat, plain background. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#app { width: 100%; }
a { color: inherit; text-decoration: none; }

/* All headings (h1, h2, h3) use the serif display font by default */
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.12;
}
p { margin: 0; }

/* Any word wrapped in <em> inside a heading (h1 or h2) is shown in
   italics instead of the normal upright style — this is how certain
   words in the big headlines (like "Automatically.") get their
   special look. */
h1 em, h2 em {
  font-style: italic;
  font-weight: 400;
}
/* Adds the gold accent color on top of italic text — used on a
   couple of headline words that need to stand out even more. */
.accent-gold { color: var(--gold-2); }

/* Wrapper used around every small SVG icon on the page, so all icons
   can be sized and colored consistently from one place instead of
   styling each individual <svg> tag separately. */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon svg { width: 100%; height: 100%; display: block; }

/* ---------------------------------------------------------------------
   3. HEADER / NAVIGATION BAR
   ---------------------------------------------------------------------
   The sticky bar at the top of the page (logo, nav links, button).
   ------------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 32px;
  max-width: var(--maxw);
  margin: 0 auto;
  background: rgba(11, 10, 8, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-2);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: 18px;
  letter-spacing: -0.01em;
}
/* Sizes and colors the small logo icon next to the "WingFlow" text */
.brand-mark {
  width: 30px;
  height: 30px;
  color: var(--gold-2);
}
.nav-links { display: flex; gap: 28px; }
.nav-links a {
  color: var(--text-2);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--text); }

/* ---------------------------------------------------------------------
   4. BUTTONS
   ---------------------------------------------------------------------
   ".button" is the main solid gold button style used everywhere
   (hero, pricing, final CTA). ".button-ghost" is a see-through/
   outline variant. ".button-small" makes a button more compact (used
   in the header). ".outline-button" is a separate outline-style
   button used specifically on the pricing cards.
   ------------------------------------------------------------------ */
.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--gold);
  color: #1a1408;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  box-shadow: 0 8px 24px -8px var(--gold-glow);
  font-family: var(--font);
}
.button:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -8px var(--gold-glow); background: var(--gold-2); }
.button .arrow { transition: transform 0.18s ease; }
.button:hover .arrow { transform: translateX(3px); }
.button-small { padding: 9px 18px; font-size: 14px; }
.button-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: none;
}
.button-ghost:hover { background: rgba(255, 255, 255, 0.04); box-shadow: none; }

/* ---------------------------------------------------------------------
   5. SECTION KICKERS (small italic label above some headings)
   ---------------------------------------------------------------------
   A ".kicker" is the small italic word/phrase that appears above a
   few section headings (like "the solution" or "the shift"). Not
   every section has one — some sections just start with the heading.
   ------------------------------------------------------------------ */
.kicker {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--muted);
  margin-bottom: 14px;
  font-style: italic;
  font-family: var(--font-display);
}

/* ---------------------------------------------------------------------
   6. SECTION SHELL (shared spacing/width used by every section)
   ---------------------------------------------------------------------
   Almost every <section> on the page has the class "section-shell" —
   it centers the content, caps its max width so text doesn't stretch
   too wide on big screens, adds top/bottom breathing room, and
   centers the text. Change the "padding" value here to adjust the
   spacing above/below ALL sections at once.
   ------------------------------------------------------------------ */
.section-shell {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 110px 32px;
  text-align: center;
  position: relative;
}
.section-copy {
  color: var(--text-2);
  font-size: 18px;
  max-width: 620px;
  margin: 18px auto 0;
  line-height: 1.6;
}
h2 { font-size: clamp(30px, 4vw, 46px); margin-top: 4px; }

/* Some sections have a slightly lighter background than others, to
   break up the page visually. Any section with the HTML attribute
   data-band="soft" gets this lighter background color automatically. */
[data-band="soft"] { background: var(--bg-soft); }

/* ---------------------------------------------------------------------
   7. HERO (the big intro section at the top of the page)
   ------------------------------------------------------------------ */
.hero { padding-top: 90px; padding-bottom: 110px; }
/* The soft glowing blob positioned behind the hero headline */
.hero-glow {
  position: absolute;
  top: -40px; left: 50%;
  transform: translateX(-50%);
  width: 760px; height: 420px;
  background: radial-gradient(closest-side, rgba(198, 154, 74, 0.18), transparent 70%);
  filter: blur(20px);
  z-index: -1;
  pointer-events: none;
}
.hero-kicker {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.hero h1 {
  font-size: clamp(40px, 6vw, 66px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 18px;
}
.hero-copy {
  color: var(--text-2);
  font-size: 18px;
  max-width: 600px;
  margin: 22px auto 0;
  line-height: 1.6;
  font-family: var(--font);
}
.hero-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
  flex-wrap: wrap;
}
.hero-actions.compact { margin-top: 28px; }
.trust {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  color: var(--muted);
  font-size: 14px;
}
.stars { color: var(--gold-2); letter-spacing: 2px; }

/* The row of client/company names near the bottom of the hero */
.logo-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 44px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.logo-row span {
  color: var(--muted-2);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-family: var(--font-display);
  font-style: italic;
}

/* ---------------------------------------------------------------------
   8. PROBLEM SECTION (the "01/02/03/04" cards)
   ------------------------------------------------------------------ */
/* ".card-grid" lays the cards out in a row of 4 columns by default */
.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 50px;
  text-align: left;
}
/* ".two-by-two" overrides that to make a 2-column, 2-row grid instead
   (used specifically by the Problem section, which only has 4 cards) */
.two-by-two { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; }
.feature-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(198, 154, 74, 0.3);
  background: var(--card-2);
}
/* The large faint number (01, 02, 03, 04) in the corner of each card */
.feature-card .card-index {
  position: absolute;
  top: 6px;
  right: 16px;
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.05);
  line-height: 1;
}
.feature-card .icon {
  width: 26px;
  height: 26px;
  color: var(--gold-2);
  margin-bottom: 16px;
}
.feature-card h3 { font-family: var(--font); font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.feature-card p { color: var(--muted); font-size: 14px; line-height: 1.55; }

/* ---------------------------------------------------------------------
   9. SOLUTION SECTION (the fake chat + calendar preview cards)
   ------------------------------------------------------------------ */
.machine-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 54px;
  text-align: left;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
.interface-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--shadow);
}
.interface-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 14px;
}
.interface-heading strong { font-size: 14px; font-family: var(--font); }
.interface-heading small { color: var(--muted); font-size: 12px; display: block; }
.mini-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--gold-soft);
  color: var(--gold-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
}
.interface-heading .live {
  margin-left: auto;
  font-size: 11px;
  color: var(--good);
  background: var(--good-soft);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(143, 180, 120, 0.25);
}
.chat-line {
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 12px;
  margin-bottom: 8px;
  max-width: 84%;
  line-height: 1.5;
}
.chat-line.received {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-2);
  border-bottom-left-radius: 4px;
}
.chat-line.sent {
  background: var(--gold);
  color: #1a1408;
  margin-left: auto;
  border-bottom-right-radius: 4px;
}
.chat-line.active { position: relative; }
.chat-line.active::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  border: 1px solid rgba(198, 154, 74, 0.4);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(198, 154, 74, 0.3); }
  50% { box-shadow: 0 0 0 6px rgba(198, 154, 74, 0); }
}
/* The "•••" typing indicator shown below the chat bubbles */
.typing { color: var(--muted); font-size: 14px; letter-spacing: 2px; padding-left: 4px; }
.input-line {
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.input-line .icon { width: 15px; height: 15px; color: var(--gold-2); }

/* Styles for the mini calendar grid inside the "Automated Booking" card */
.calendar {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
}
.weekdays, .dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  text-align: center;
}
.weekdays span { color: var(--muted); font-size: 11px; font-weight: 600; margin-bottom: 8px; }
.dates span {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--text-2);
  border-radius: 8px;
}
.dates span.available { background: var(--gold-soft); color: var(--gold-2); }
.dates span.selected { background: var(--gold); color: #1a1408; font-weight: 600; }
.event {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 8px;
  font-size: 13px;
}
.event strong { font-size: 13px; font-family: var(--font); }
.event small { color: var(--muted); display: block; }
.event em {
  margin-left: auto;
  font-style: normal;
  font-size: 11px;
  color: var(--good);
  background: var(--good-soft);
  padding: 3px 8px;
  border-radius: 999px;
}
.event em.pending { color: var(--pending); background: var(--pending-soft); }

/* ---------------------------------------------------------------------
   10. FRAMEWORK SECTION — "4 Parts" (the numbered row list)
   ---------------------------------------------------------------------
   Each row (".system-card") is split into 3 columns: a big faint
   number, the title/description text, and a small preview box on the
   right (chat bubble, checklist, booking card, etc).
   ------------------------------------------------------------------ */
.timeline-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 60px;
  text-align: left;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
.system-card {
  display: grid;
  grid-template-columns: 110px 1fr 1.1fr;
  align-items: center;
  gap: 32px;
  padding: 36px 8px;
  border-top: 1px solid var(--line-2);
  transition: background 0.2s ease;
}
.timeline-grid .system-card:last-child { border-bottom: 1px solid var(--line-2); }
.system-card:hover { background: rgba(255, 255, 255, 0.015); }
.system-card .index-mark {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.07);
  line-height: 1;
}
.card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.card-top .icon { width: 20px; height: 20px; color: var(--gold-2); }
.card-top strong { font-size: 18px; font-family: var(--font-display); font-weight: 600; }
.system-card > .card-copy > p { color: var(--muted); font-size: 14px; line-height: 1.55; }

.assistant-preview, .qualifier-preview, .booking-preview {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
}
.assistant-preview strong { font-size: 12px; color: var(--text-2); display: block; margin-bottom: 8px; font-family: var(--font); }
.assistant-preview div {
  font-size: 13px;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.04);
  padding: 10px 12px;
  border-radius: 10px;
  border-bottom-left-radius: 4px;
}
.qualifier-preview > div {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-2);
}
.qualifier-preview > div span { color: var(--muted); }
.qualifier-preview > div b { color: var(--text); font-weight: 600; }
.qualifier-preview .score { border-bottom: none; padding-top: 12px; }
.qualifier-preview .score b { color: var(--good); }
.booking-preview {
  display: flex;
  align-items: center;
  gap: 12px;
}
.booking-preview .icon { width: 22px; height: 22px; color: var(--gold-2); }
.booking-preview > div { flex: 1; }
.booking-preview b { font-size: 13px; display: block; font-family: var(--font); }
.booking-preview small { color: var(--muted); font-size: 12px; }
.confirm-button {
  background: var(--gold);
  color: #1a1408;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: transform 0.18s ease;
}
.confirm-button:hover { transform: translateY(-2px); }
.followup-preview { display: flex; flex-direction: column; gap: 8px; }
.followup-preview > div {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text-2);
}
.followup-preview > div small {
  display: block;
  color: var(--gold-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

/* ---------------------------------------------------------------------
   11. STEPS SECTION — "4 Simple Steps" (the numbered circles in a row)
   ------------------------------------------------------------------ */
.flow-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 60px;
  text-align: left;
  position: relative;
}
/* Draws the thin horizontal line that runs behind/through the step
   circles, connecting them visually like a timeline */
.flow-row::before {
  content: '';
  position: absolute;
  top: 23px;
  left: 5%;
  right: 5%;
  height: 1px;
  background: var(--line);
  z-index: 0;
}
.step-card { position: relative; z-index: 1; padding-right: 12px; }
.step-index {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--gold);
  color: var(--gold-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 18px;
}
.step-card h3 { font-size: 19px; margin: 6px 0 8px; font-family: var(--font-display); }
.step-card p { color: var(--muted); font-size: 14px; line-height: 1.55; }

/* ---------------------------------------------------------------------
   12. "OLD WAY VS NEW WAY" SECTION (two comparison cards)
   ------------------------------------------------------------------ */
.shift { padding-top: 100px; padding-bottom: 110px; }
.shift h2 { font-size: clamp(30px, 4.5vw, 48px); max-width: 660px; margin: 4px auto 0; }
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 50px;
  text-align: left;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.compare-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
}
.compare-card.new-way {
  border-color: rgba(198, 154, 74, 0.3);
  background: linear-gradient(180deg, rgba(198, 154, 74, 0.06), var(--card));
}
.compare-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
}
.compare-card ul { list-style: none; padding: 0; margin: 0; }
.compare-card ul li {
  font-size: 14px;
  color: var(--muted);
  padding: 9px 0 9px 24px;
  border-bottom: 1px solid var(--line-2);
  position: relative;
  line-height: 1.5;
}
.compare-card ul li:last-child { border-bottom: none; }
.compare-card.old-way ul li::before {
  content: '✕';
  position: absolute; left: 0;
  color: var(--bad);
  font-size: 13px; font-weight: 700;
}
.compare-card.new-way ul li::before {
  content: '✓';
  position: absolute; left: 0;
  color: var(--good);
  font-size: 14px; font-weight: 700;
}
.status-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 999px;
}
.status-badge.bad { color: var(--bad); background: var(--bad-soft); border: 1px solid rgba(217, 123, 95, 0.25); }
.status-badge.good { color: var(--gold-2); background: var(--gold-soft); border: 1px solid rgba(198, 154, 74, 0.25); }

/* ---------------------------------------------------------------------
   13. DASHBOARD PREVIEW SECTION (the fake app screenshot)
   ------------------------------------------------------------------ */
.dashboard-window {
  max-width: 920px;
  margin: 50px auto 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  text-align: left;
  box-shadow: var(--shadow);
}
.window-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
/* The 3 small colored dots that mimic a browser window's control buttons */
.traffic-lights { display: flex; gap: 6px; }
.traffic-lights i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); }
.window-bar small { margin-left: auto; font-size: 12px; }
.dashboard-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line-2);
}
.dashboard-heading strong { font-size: 18px; font-family: var(--font-display); }
.dashboard-heading div { display: flex; gap: 8px; }
.dashboard-heading button {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-2);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  cursor: pointer;
  font-family: var(--font);
}
.primary-mini {
  background: var(--gold) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #1a1408 !important;
  font-weight: 600;
}
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-2); }
.metric-grid > div { background: var(--card); padding: 18px 22px; }
.metric-grid small { display: block; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.metric-grid b { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; font-family: var(--font-display); }
.metric-grid em { display: block; font-style: normal; font-size: 12px; color: var(--good); margin-top: 4px; }
.metric-grid em.down { color: var(--bad); }
.metric-highlight { background: rgba(198, 154, 74, 0.05) !important; }
.dashboard-panels { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1px; background: var(--line-2); }
.chart-panel, .recent-panel { background: var(--card); padding: 20px 22px; }
.chart-panel small { color: var(--muted); font-size: 12px; display: block; margin-bottom: 4px; }
.chart-panel strong { display: flex; align-items: center; gap: 10px; font-size: 15px; margin-bottom: 18px; font-family: var(--font); }
.chart-panel strong em {
  font-style: normal; font-size: 12px; color: var(--good);
  background: var(--good-soft); padding: 2px 8px; border-radius: 999px;
}
/* The bar chart is just a row of <i> elements, each one's height set
   individually with an inline "style" attribute in the HTML */
.bars { display: flex; align-items: flex-end; gap: 8px; height: 140px; }
.bars i { flex: 1; background: rgba(198, 154, 74, 0.25); border-radius: 4px 4px 0 0; transition: background 0.2s; }
.bars i.current { background: var(--gold); }
.bars i:hover { background: var(--gold-2); }
.months { display: flex; gap: 8px; margin-top: 8px; }
.months span { flex: 1; text-align: center; color: var(--muted-2); font-size: 11px; }
.recent-panel strong { display: flex; align-items: center; justify-content: space-between; font-size: 15px; margin-bottom: 14px; font-family: var(--font); }
.recent-panel strong span { color: var(--muted-2); font-size: 18px; letter-spacing: 2px; }
.lead-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.lead-row:last-child { border-bottom: none; }
.lead-row b { flex: 1; font-size: 13px; font-weight: 600; }
.lead-row b small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; }
.lead-row > small { color: var(--muted-2); font-size: 11px; }
.lead-row em { font-style: normal; font-size: 11px; padding: 3px 8px; border-radius: 999px; font-weight: 600; }
.tag-booked { color: var(--good); background: var(--good-soft); }
.tag-qualified { color: var(--gold-2); background: var(--gold-soft); }
.tag-followup { color: var(--pending); background: var(--pending-soft); }

/* ---------------------------------------------------------------------
   14. PRICING SECTION (the 3 plan cards)
   ---------------------------------------------------------------------
   Each plan card has a colored left-edge stripe. The middle "Growth"
   plan is marked ".popular" and gets extra gold styling + a "Most
   popular" badge to make it stand out from the other two.
   ------------------------------------------------------------------ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 50px;
  text-align: left;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.price-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.price-card:hover { transform: translateY(-4px); }
.price-card.tier-starter { border-left-color: var(--muted-2); }
.price-card.popular.tier-growth {
  border-left-color: var(--gold);
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(198, 154, 74, 0.08), var(--card));
  box-shadow: 0 0 40px -10px var(--gold-glow);
}
.price-card.tier-scale {
  border-left-color: var(--text-2);
  background: transparent;
}
.popular-badge {
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: #1a1408;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.price-title { margin-bottom: 16px; }
.price-title strong { font-size: 19px; display: block; font-family: var(--font-display); }
.price-title small { color: var(--muted); font-size: 13px; }
.price {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.price small { font-size: 15px; color: var(--muted); font-weight: 400; font-family: var(--font); }
.custom-price { font-size: 30px; }
.price-card ul { list-style: none; padding: 0; margin: 0 0 26px; flex: 1; }
.price-card ul li { font-size: 14px; color: var(--text-2); padding: 8px 0 8px 22px; position: relative; line-height: 1.5; }
.price-card ul li::before { content: '✓'; position: absolute; left: 0; color: var(--gold-2); font-size: 13px; font-weight: 700; }
.outline-button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--text); font-weight: 600; font-size: 14px; cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
  text-align: center; justify-content: center;
}
.outline-button:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(198, 154, 74, 0.3); }
.outline-button span { transition: transform 0.18s ease; }
.outline-button:hover span { transform: translateX(3px); }

/* ---------------------------------------------------------------------
   15. AUDIENCE SECTION ("who it's for" / "not for" cards)
   ------------------------------------------------------------------ */
.audience-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin-top: 50px; text-align: left; max-width: 880px;
  margin-left: auto; margin-right: auto;
}
.fit-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.fit-card.fit { border-color: rgba(143, 180, 120, 0.2); background: linear-gradient(180deg, rgba(143, 180, 120, 0.04), var(--card)); }
.fit-card.not-fit { border-color: rgba(217, 123, 95, 0.15); background: linear-gradient(180deg, rgba(217, 123, 95, 0.03), var(--card)); }
.fit-label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 18px; color: var(--muted); }
.fit-card.fit .fit-label { color: var(--good); }
.fit-card.not-fit .fit-label { color: var(--bad); }
.fit-card ul { list-style: none; padding: 0; margin: 0; }
.fit-card ul li { font-size: 14px; color: var(--text-2); padding: 10px 0 10px 26px; border-bottom: 1px solid var(--line-2); position: relative; line-height: 1.5; }
.fit-card ul li:last-child { border-bottom: none; }
.fit-card.fit ul li::before { content: '✓'; position: absolute; left: 0; color: var(--good); font-weight: 700; }
.fit-card.not-fit ul li::before { content: '✕'; position: absolute; left: 0; color: var(--bad); font-weight: 700; }

/* ---------------------------------------------------------------------
   16. FAQ SECTION (the expandable question list)
   ---------------------------------------------------------------------
   Uses a plain list style with underlines between questions (no boxed
   cards). The +/− sign on the right of each question is flipped by
   main.js whenever that question is opened or closed.
   ------------------------------------------------------------------ */
.faq-list {
  max-width: 720px;
  margin: 50px auto 0;
  text-align: left;
}
.faq-list details {
  border-bottom: 1px solid var(--line);
  padding: 0;
}
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 4px; cursor: pointer; font-size: 16px; font-weight: 600;
  font-family: var(--font-display);
  list-style: none; user-select: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span {
  font-size: 20px; color: var(--gold-2); font-weight: 400;
  min-width: 20px; text-align: center; flex-shrink: 0;
}
.faq-list details p { padding: 0 4px 22px; color: var(--muted); font-size: 14px; line-height: 1.6; max-width: 90%; }

/* ---------------------------------------------------------------------
   17. FINAL CALL-TO-ACTION SECTION (the boxed section near the bottom)
   ------------------------------------------------------------------ */
.final-cta {
  max-width: 920px;
  margin-top: 10px;
  margin-bottom: 78px;
  padding: 68px 32px;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(40, 32, 15, 0.9), rgba(11, 10, 8, 0.96) 70%);
}
.final-cta-glow {
  position: absolute; width: 620px; height: 320px; top: -120px; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(198, 154, 74, 0.2), transparent 72%);
  pointer-events: none;
}
.final-cta h2 { position: relative; font-size: clamp(34px, 5vw, 52px); }
.final-cta p { position: relative; color: var(--text-2); font-size: 15px; line-height: 1.6; margin: 18px auto 0; max-width: 520px; }
.final-cta .hero-actions { position: relative; }

/* ---------------------------------------------------------------------
   18. FOOTER
   ---------------------------------------------------------------------
   ".footer-inner" lays out the 4 columns (brand+newsletter, then 3
   link columns) using CSS Grid. ".footer-bottom" is the thin strip
   below it with the copyright text, legal links, and social icons.
   ------------------------------------------------------------------ */
.site-footer { border-top: 1px solid var(--line-2); background: #080705; text-align: left; }
.footer-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 54px 32px 46px;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 70px;
}
.footer-brand .brand { margin-bottom: 18px; }
.footer-brand p { color: var(--muted); font-size: 13px; line-height: 1.65; max-width: 300px; margin-bottom: 26px; }
.footer-brand label { display: block; color: var(--muted-2); font-size: 10px; letter-spacing: 0.1em; font-weight: 700; margin-bottom: 10px; }
.subscribe { display: flex; max-width: 300px; }
.subscribe input {
  min-width: 0; flex: 1; background: var(--card); color: var(--text);
  border: 1px solid var(--line); border-right: none; border-radius: 8px 0 0 8px;
  padding: 10px 12px; font: inherit; font-size: 12px; outline: none;
}
.subscribe input:focus { border-color: rgba(198, 154, 74, 0.5); }
.subscribe button {
  border: 1px solid var(--gold); background: var(--gold); color: #1a1408;
  border-radius: 0 8px 8px 0; padding: 0 14px; font: inherit; font-size: 12px;
  font-weight: 600; cursor: pointer;
}
.subscribe button:hover { background: var(--gold-2); }
.footer-column { display: flex; flex-direction: column; gap: 14px; }
.footer-column strong { color: var(--text); font-size: 13px; margin-bottom: 4px; font-family: var(--font-display); }
.footer-column a { color: var(--muted); font-size: 13px; transition: color 0.18s ease; }
.footer-column a:hover { color: var(--gold-2); }
.footer-bottom {
  max-width: var(--maxw); margin: 0 auto; padding: 22px 32px 28px;
  border-top: 1px solid var(--line-2); display: flex; align-items: center;
  gap: 26px; color: var(--muted-2); font-size: 12px;
}
.footer-bottom > div:not(.socials) { display: flex; gap: 20px; }
.footer-bottom a { transition: color 0.18s ease; }
.footer-bottom a:hover { color: var(--text-2); }
.socials { display: flex; gap: 12px; margin-left: auto; }
.socials a {
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%; color: var(--muted); padding: 6px;
}

/* ---------------------------------------------------------------------
   19. MODAL (the "Watch a 60s Demo" popup window)
   ---------------------------------------------------------------------
   ".modal" is hidden (display: none) until JavaScript adds the
   "is-open" class to it (see main.js) — then it becomes visible and
   fades in, covering the screen with a dark, blurred backdrop.
   ------------------------------------------------------------------ */
.modal {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px); display: none; align-items: center;
  justify-content: center; z-index: 100; padding: 24px;
}
.modal.is-open { display: flex; animation: fadeIn 0.2s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-panel {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 40px; max-width: 420px; text-align: center; position: relative; box-shadow: var(--shadow);
}
.modal-close {
  position: absolute; top: 14px; right: 14px; background: transparent;
  border: 1px solid var(--line); color: var(--text-2); width: 32px; height: 32px;
  border-radius: 50%; cursor: pointer; font-size: 18px; font-family: inherit;
}
.modal-close:hover { background: rgba(255, 255, 255, 0.06); }
.play-large {
  width: 64px; height: 64px; border-radius: 50%; background: var(--gold); color: #1a1408;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;
  box-shadow: 0 0 30px var(--gold-glow); padding: 18px;
}
.modal-panel h2 { font-size: 22px; margin-bottom: 10px; }
.modal-panel p { color: var(--muted); font-size: 15px; margin-bottom: 24px; font-family: var(--font); }

/* ---------------------------------------------------------------------
   20. SCROLL REVEAL ANIMATION
   ---------------------------------------------------------------------
   Elements with the "reveal" class start invisible and shifted down
   by 24px. main.js adds the "is-visible" class the moment each one
   scrolls into view, which triggers the fade/slide-in transition below.
   ------------------------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------------------------------------------------------------------
   21. RESPONSIVE (adjustments for tablets and phones)
   ---------------------------------------------------------------------
   Everything above this point is the "default" layout, built for
   wide desktop screens. The @media blocks below only kick in once the
   screen gets narrower than the width listed (e.g. "max-width: 900px"
   means "only apply this on screens 900px wide or narrower"), and
   they simply override a few properties — mostly turning multi-column
   grids into fewer columns, or a single column, so content stacks
   nicely instead of getting squeezed. The blocks are ordered widest
   screen first, then narrower and narrower.
   ------------------------------------------------------------------ */
.desktop-only { display: inline; }

/* Tablets and small laptops */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .card-grid, .flow-row { grid-template-columns: repeat(2, 1fr); }
  .flow-row::before { display: none; }
  .machine-grid { grid-template-columns: 1fr; }
  .system-card { grid-template-columns: 60px 1fr; grid-template-areas: "num title" "num copy" "num preview"; }
  .compare-grid, .audience-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 420px; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-panels { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; }
}

/* Phones */
@media (max-width: 600px) {
  .site-header { padding: 14px 18px; }
  .section-shell { padding: 70px 20px; }
  .hero { padding-top: 60px; }
  .card-grid, .flow-row, .two-by-two { grid-template-columns: 1fr; }
  .system-card { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .button { justify-content: center; }
  .logo-row { gap: 24px; }
  .desktop-only { display: none; }
  .final-cta { margin: 10px 20px 58px; padding: 54px 22px; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 36px 24px; padding: 42px 20px 34px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { padding: 20px; flex-wrap: wrap; gap: 16px; }
  .footer-bottom > div:not(.socials) { order: 3; width: 100%; }
  .socials { margin-left: auto; }
}

/* Small/older phones (roughly 480px and narrower, e.g. an iPhone SE).
   This block was added so nothing feels cramped or gets cut off on
   the smallest common phone screens — it only adjusts a few spots
   that have a lot of content packed close together (the dashboard
   preview's top bar and stat boxes). Nothing here changes how the
   site looks on tablets or desktop; it only applies below 480px. */
@media (max-width: 480px) {
  /* Stack the 4 dashboard stat boxes (Total Leads, Qualified, etc.)
     into a single column instead of 2, so each number has room */
  .metric-grid { grid-template-columns: 1fr; }
  /* Let the "Export" / "New Campaign" buttons wrap onto their own
     line under the "Dashboard" title instead of overlapping it */
  .dashboard-heading { flex-wrap: wrap; row-gap: 10px; }
  /* Let the dashboard's fake browser bar wrap onto two lines, and
     stop its long URL text from overflowing off the edge */
  .window-bar { flex-wrap: wrap; row-gap: 6px; }
  .window-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
}