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

:root {
  --navy:          #1B3A52;
  --navy-mid:      #254E6E;
  --navy-soft:     #2F628A;
  --accent:        #2E8B57;
  --accent-light:  #3aab6d;
  --ink:           #1C2333;
  --ink-muted:     #4A5568;
  --ink-faint:     #718096;
  --surface:       #F8F9FB;
  --surface-alt:   #EEF1F5;
  --rule:          #E2E8F0;
  --white:         #FFFFFF;
  --subtitle-gray: #4A5568;
}

/* ═══════════════════════════════════════════════════════
   BASE + FLEX LAYOUT (footer flush)
   ═══════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html {
  height: 100%;
  margin: 0;
  padding: 0;
}

.quarto-title .description,
.quarto-title-meta-contents p,
#title-block-header .description {
  display: none !important;
}

body {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  /* Flex column so footer sticks to bottom */
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Quarto wraps everything in #quarto-content — make it grow */
#quarto-content {
  flex: 1 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* The main content area inside #quarto-content also grows */
main,
main.content,
#quarto-document-content {
  flex: 1 0 auto !important;
}

/* The custom footer div (from footer.html via body-footer) sits after main.
   Quarto renders body-footer INSIDE main — we can't move it via CSS alone,
   but we can make the whole thing look right by ensuring no extra space. */
body > #quarto-content > main > div[style*="background-color: #1B3A52"]:last-child,
div[style*="background-color: #1B3A52"][style*="100vw"] {
  /* Reset the -50vw centering trick and use a simpler full-bleed approach */
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  width: 100vw !important;
  flex-shrink: 0 !important;
  /* No bottom margin */
  margin-bottom: 0 !important;
}

/* Kill any Quarto-added bottom padding on body / wrappers */
body > #quarto-content > main {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Quarto adds a .page-footer / .nav-footer for its own footer — hide it
   since we're using a custom footer.html */
.nav-footer,
.page-footer {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--navy);
  border-bottom: none !important;
}
h1::after, h2::after, h3::after { display: none !important; }

p { margin-bottom: 1.25rem; }
strong { font-weight: 600; color: var(--navy); }
strong u { text-decoration: none !important; color: inherit !important; }

ul li, ol li { margin-bottom: 0.4rem; }

code {
  font-size: 0.88em;
  background: var(--surface-alt);
  border-radius: 3px;
  padding: 0.1em 0.35em;
  color: var(--navy-mid);
}

hr, .content-visible hr { display: none !important; margin: 0 !important; }

/* ═══════════════════════════════════════════════════════
   LINKS
   ═══════════════════════════════════════════════════════ */
a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--subtitle-gray);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 500;
  transition: color 0.15s, text-decoration-color 0.15s;
}
a:hover {
  color: var(--accent);
  text-decoration-color: var(--navy);
}
/* Navbar & footer links: no underline treatment */
.navbar a, .navbar-nav .nav-link,
a.navbar-brand, a.navbar-brand-logo,
div[style*="background-color: #1B3A52"] a {
  text-decoration: none !important;
  font-weight: 400 !important;
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════
   CONTENT WIDTH
   ═══════════════════════════════════════════════════════ */
#quarto-content,
.page-columns .page-body,
.page-body,
main.content {
  max-width: min(960px, 94vw) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(1rem, 4vw, 2.5rem) !important;
  padding-right: clamp(1rem, 4vw, 2.5rem) !important;
}

/* Exception: footer div needs full bleed — override content width */
div[style*="background-color: #1B3A52"][style*="100vw"] {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ═══════════════════════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════════════════════ */
/* Nav scrolls with page like normal content — headroom's slide-back-in
   on scroll-up is disabled by stripping its position:fixed entirely.
   The navbar sits in normal document flow: visible at the top, gone when
   scrolled past, and never reappears mid-page. */
.headroom,
#quarto-header,
header#quarto-header {
  position: static !important;
  transform: none !important;
  top: auto !important;
  will-change: unset !important;
}

.navbar {
  background-color: var(--navy) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 68px;
  overflow: visible !important;
}
.navbar > .container,
.navbar > .container-fluid,
.navbar-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
}
.navbar-collapse { justify-content: center !important; flex-grow: 0 !important; }

/* ── One logo only ── */
.navbar-logo.dark-content { display: none !important; }
.navbar-brand-container img.navbar-logo + img.navbar-logo { display: none !important; }
a.navbar-brand:not(.navbar-brand-logo) { display: none !important; }

.navbar-brand.navbar-brand-logo {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 clamp(0.5rem, 2vw, 1.25rem) 0 0 !important;
}
.navbar-brand.navbar-brand-logo img,
.navbar-logo {
  height: 48px !important;
  width: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  object-fit: contain !important;
  display: block !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
}

@media (max-width: 480px) {
  .navbar-brand.navbar-brand-logo img,
  .navbar-logo {
    height: clamp(28px, 8vw, 44px) !important;
  }
}

.navbar-nav .nav-link {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55) !important;
  padding-top: 27px !important;
  padding-bottom: 21px !important;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
  line-height: 1 !important;
  border-bottom: none !important;
  transition: color 0.15s;
  text-decoration: none !important;
}
.navbar-nav .nav-link:hover { color: rgba(255,255,255,0.85) !important; }
.navbar-nav .nav-link.active {
  color: #fff !important;
  text-decoration: underline !important;
  text-decoration-color: #fff !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 5px !important;
}

/* ── Collapsed navbar: hamburger left, logo centered ──────────────────
   When the nav links collapse into a hamburger (≤991px), Bootstrap puts
   the toggler and brand side-by-side inside a flex container that is
   already justify-content:center. That pushes the logo off-center.
   Fix: pull the toggler out of flow with absolute positioning so the
   brand can center itself across the full container width.          */
@media (max-width: 991.98px) {
  .navbar > .container,
  .navbar > .container-fluid,
  .navbar-container {
    position: relative !important;
  }
  .navbar-toggler {
    position: absolute !important;
    left: 0.75rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
  }
  .navbar-brand.navbar-brand-logo {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════
   INDEX PAGE: TITLE BLOCK (logo + subtitle)
   ═══════════════════════════════════════════════════════ */

/* Remove ALL padding/margin from the title block wrapper */
#title-block-header,
.quarto-title-block.default {
  text-align: center;
  padding: 0 !important;
  margin: 0 0 1rem 0 !important;
}

/* Navy logo: index page only (body gets class "index-page" via include-in-header) */
body.index-page #title-block-header::before {
  content: "";
  display: block;
  width: clamp(260px, 50vw, 500px);
  height: clamp(73px, 14vw, 141px);
  background-image: url('images/Logo_navy.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin: 2rem auto 1.2rem;
}

/* Hide the H1 title "Home" — only shows in <title> tag */
#title-block-header h1.title,
h1.title.column-page {
  display: none !important;
}

/* Subtitle: light DM Sans, gray, centered */
#title-block-header .subtitle.lead,
p.subtitle.lead {
  all: unset;
  display: block !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: clamp(0.9rem, 2vw, 1.05rem) !important;
  font-weight: 300 !important;
  font-style: normal !important;
  color: var(--ink-muted) !important;
  max-width: 800px !important;
  margin: 0 auto 1.5rem !important;
  line-height: 1.7 !important;
  letter-spacing: 0.01em !important;
  text-align: center !important;
}

/* quarto-title-meta is an empty div — collapse it */
.quarto-title-meta { display: none !important; }


/* Non-index pages: more breathing room above the title */
/* Quarto injects padding-top on body = navbar height when nav is fixed.
   Our nav is static so we force that offset to zero. */
body {
  padding-top: 0 !important;
}

/* Non-index pages: collapse all space above the title block */
body:not(.index-page) #title-block-header {
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
}
body:not(.index-page) h1.title {
  margin-top: 0 !important;
}

/* Kill the default top padding Quarto adds to main on non-index pages */
body:not(.index-page) main,
body:not(.index-page) main.content,
body:not(.index-page) #quarto-document-content {
  padding-top: 0.5rem !important;
}
/* ═══════════════════════════════════════════════════════
   NON-INDEX PAGE TITLES
   ═══════════════════════════════════════════════════════ */
h1.title {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: clamp(2rem, 4vw, 2.6rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  color: var(--navy) !important;
  text-align: center !important;
  line-height: 1.2 !important;
  margin: 0.75rem 0 0.5rem !important;
  padding: 0 !important;
}

/* ═══════════════════════════════════════════════════════
   SECTION HEADINGS
   ═══════════════════════════════════════════════════════ */
h2, .h2 {
  font-size: clamp(1.2rem, 2.8vw, 1.55rem) !important;
  font-weight: 500;
  line-height: 1.25;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  text-align: center;
  letter-spacing: -0.01em;
}
h3, .h3 {
  font-size: clamp(1rem, 2vw, 1.2rem) !important;
  font-weight: 500;
  line-height: 1.3;
  margin-top: 1.75rem;
  letter-spacing: -0.005em;
}

/* ═══════════════════════════════════════════════════════
   STAT CARDS
   ═══════════════════════════════════════════════════════ */
/* Card container */
div[style*="padding:35px 45px"],
div[style*="padding: 35px 45px"] {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04) !important;
}

/* Column labels (CAGR SINCE 2000, YEARS IN THE RED, etc.) */
.stat-label {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: clamp(0.68rem, 1.4vw, 0.78rem) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #6B7280 !important;
  margin-bottom: 6px !important;
}

/* Date range note */
.stat-date-note {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: clamp(0.68rem, 1.4vw, 0.78rem) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #6B7280 !important;
}

/* Column title (S&P 500, AnyMarket Algorithm) */
.stat-title {
  font-family: 'DM Sans', system-ui, sans-serif !important;
}

/* Big performance numbers: Source Serif 4 */
div[style*="font-size:30px"],
div[style*="font-size: 30px"] {
  font-family: 'Source Serif 4', Georgia, serif !important;
}

/* Mobile responsive cards */
@media (max-width: 768px) {
  div[style*="width:340px"], div[style*="width: 340px"] {
    width: 100% !important;
    max-width: 340px !important;
    padding: 25px 30px !important;
  }
  div[style*="gap:60px"], div[style*="gap: 60px"] {
    gap: 20px !important;
  }
}

/* ═══════════════════════════════════════════════════════
   PLOTLY — BASE
   ═══════════════════════════════════════════════════════ */
.html-widget-output,
.plotly.html-widget,
.js-plotly-plot,
.js-plotly-plot .main-svg,
.js-plotly-plot .main-svg > *,
.html-widget-output,
.cell,
.cell-output,
.quarto-figure {
  overflow: visible !important;
}

.js-plotly-plot,
.plotly,
.plotly-graph-div {
  width: 100% !important;
  max-width: 100% !important;
}

.html-widget.plotly { height: auto !important; }

div[style*="height:"][class*="plotly"],
div[style*="height: "][class*="plotly"] {
  height: auto !important;
  min-height: 300px;
}

/* ═══════════════════════════════════════════════════════
   PLOTLY — MOBILE FULL-BLEED BREAKOUT
   On small screens, plots break out of the content
   max-width and use the full viewport width, giving
   them maximum room without sacrificing body text margins.
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* The Quarto cell wrapper that contains each plot */
  .cell:has(.js-plotly-plot),
  .html-widget-output:has(.js-plotly-plot) {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Ensure the plotly div itself fills the full width */
  .js-plotly-plot,
  .plotly-graph-div,
  .html-widget.plotly {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* Plotly ignores CSS height — JS relayout() handles that.
     These rules prevent wrapper collapse while JS loads. */
  div[style*="height:"][class*="plotly"],
  div[style*="height: "][class*="plotly"],
  .html-widget.plotly,
  .js-plotly-plot {
    min-height: 200px !important;
    height: auto !important;
  }

  .js-plotly-plot { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════
   PLOTLY — ANNOTATION TITLE RESPONSIVE SIZE
   Titles sized dynamically by JS relayout(); this is a
   fallback floor so raw SVG text never overflows.
   ═══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .js-plotly-plot .annotation-text {
    font-size: 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════
   SUPPORT PAGE — TIER CARDS
   ═══════════════════════════════════════════════════════ */

.tier-grid {
  display: flex;
  gap: 24px;
  margin: 2rem 0 1rem;
  flex-wrap: wrap;
}

.tier-card {
  flex: 1 1 200px;
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  padding: 28px 26px 24px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.tier-card:hover {
  border-color: var(--navy-soft);
  box-shadow: 0 4px 18px rgba(27,58,82,0.08);
}

/* Middle card gets a subtle navy accent */
.tier-card--mid {
  border-color: var(--navy-mid);
  background: #f3f7fa;
}

.tier-price {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 4px;
}

.tier-period {
  font-size: 1rem;
  font-weight: 400;
  color: var(--ink-muted);
}

.tier-label {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
  margin-bottom: 18px;
}

.tier-features {
  list-style: none;
  padding: 0;
  margin: 0 0 auto;
  font-size: 0.92rem;
  color: var(--ink-muted);
  line-height: 1.6;
}

.tier-features li {
  padding: 4px 0;
  border-bottom: none;
}

.tier-features li::before {
  content: "✓";
  color: var(--accent);
  font-weight: 600;
  margin-right: 8px;
}

.tier-features li.tier-impact::before {
  content: "♥";
  color: #C0392B;
}

.tier-btn {
  display: block;
  margin-top: 22px;
  padding: 10px 0;
  text-align: center;
  background: var(--navy);
  color: var(--white) !important;
  border-radius: 6px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none !important;
  transition: background 0.2s;
}

.tier-btn:hover {
  background: var(--navy-soft);
  color: var(--white) !important;
  text-decoration: none !important;
}

.tier-note {
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin-top: 0.5rem;
}

@media (max-width: 640px) {
  .tier-grid {
    flex-direction: column;
    gap: 16px;
  }
}