/* =========================================================================
   Investing Out Loud — global stylesheet

   All colours, spacing, and typography live here as CSS custom properties.
   Change a value in :root and it updates everywhere on the site.

   This single file consolidates the base theme plus the styles that used to
   live in the individual Astro components (header, footer, cards, article
   pages, etc.). Class names are unchanged so the design is preserved.
   ========================================================================= */

:root {
  /* --- Colour palette (edit these to re-theme the whole site) ----------- */
  --color-bg: #faf9f6;            /* warm white background */
  --color-surface: #ffffff;       /* cards, raised panels */
  --color-surface-alt: #f3f2ec;   /* subtle alternate panels */
  --color-text: #1e2a38;          /* dark navy / charcoal body text */
  --color-text-muted: #55606b;    /* secondary text */
  --color-heading: #172230;       /* headings */
  --color-accent: #3f7d5f;        /* muted green accent */
  --color-accent-strong: #2f6349; /* darker green for hover */
  --color-accent-soft: #e7f0ea;   /* green tint background */
  --color-border: #e4e2da;        /* light gray borders */
  --color-negative: #b23a3a;      /* red — ONLY for negative market moves */
  --color-focus: #1d6fb8;         /* visible keyboard focus ring */

  /* --- Typography ------------------------------------------------------- */
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
    "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --font-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

  --text-xs: 0.78rem;
  --text-sm: 0.88rem;
  --text-base: 1.05rem;
  --text-lg: 1.2rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.75rem;
  --text-4xl: 3.5rem;

  --leading-body: 1.7;
  --leading-tight: 1.2;

  /* --- Layout ----------------------------------------------------------- */
  --content-width: 1120px;   /* wide layouts */
  --prose-width: 720px;      /* comfortable article reading width */
  --radius: 10px;
  --radius-sm: 6px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --shadow-sm: 0 1px 2px rgba(23, 34, 48, 0.06);
  --shadow-md: 0 6px 24px rgba(23, 34, 48, 0.08);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--color-heading);
  line-height: var(--leading-tight);
  font-weight: 600;
  margin: 0 0 var(--space-4);
}

h1 { font-size: var(--text-3xl); letter-spacing: -0.02em; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }

p { margin: 0 0 var(--space-4); }

a {
  color: var(--color-accent-strong);
  text-decoration-color: var(--color-border);
  text-underline-offset: 3px;
}
a:hover { color: var(--color-accent); }

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

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-6) 0;
}

/* --- Accessibility: visible focus & skip link --------------------------- */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-heading);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  z-index: 100;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --- Layout helpers ----------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

main { flex: 1 0 auto; width: 100%; }

.section { padding: var(--space-8) 0; }
.section-tight { padding: var(--space-6) 0; }

.eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent-strong);
  margin: 0 0 var(--space-2);
}

.lead {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: var(--prose-width);
}

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-base);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-strong); color: #fff; }
.btn-secondary {
  background: transparent;
  color: var(--color-accent-strong);
  border-color: var(--color-border);
}
.btn-secondary:hover { border-color: var(--color-accent); }
.btn-lg { font-size: var(--text-lg); padding: var(--space-4) var(--space-7); }

/* --- Tags & badges ------------------------------------------------------ */
.badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent-strong);
  background: var(--color-accent-soft);
  padding: 3px 10px;
  border-radius: 999px;
  text-decoration: none;
}
a.badge:hover { background: var(--color-accent); color: #fff; }

.tag {
  display: inline-block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  padding: 2px 10px;
  border-radius: 999px;
  text-decoration: none;
}
a.tag:hover { border-color: var(--color-accent); color: var(--color-accent-strong); }

.meta {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.meta .dot { margin: 0 var(--space-2); opacity: 0.5; }

/* --- Grids -------------------------------------------------------------- */
.grid { display: grid; gap: var(--space-5); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  :root { --text-3xl: 2.2rem; --text-4xl: 2.6rem; --text-2xl: 1.6rem; }
}

/* --- Cards -------------------------------------------------------------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* --- Prose (article body) ---------------------------------------------- */
.prose {
  font-family: var(--font-serif);
  font-size: 1.18rem;
  line-height: 1.75;
  color: var(--color-text);
  max-width: var(--prose-width);
}
.prose > * { margin-inline: auto; }
.prose h2 { margin-top: var(--space-7); }
.prose h3 { margin-top: var(--space-6); }
.prose ul, .prose ol { padding-left: 1.4em; margin-bottom: var(--space-4); }
.prose li { margin-bottom: var(--space-2); }
.prose blockquote {
  border-left: 3px solid var(--color-accent);
  margin: var(--space-5) 0;
  padding: var(--space-1) var(--space-5);
  color: var(--color-text-muted);
  font-style: italic;
}
/* Inline quotation mark (Writer Portal ❝ button) — a styled span inside a
   paragraph, not a block. Pale accent background + small horizontal padding
   make it noticeably different from plain italic text without a vertical
   border, paragraph margin, or line break, so it stays inline. Separate from
   .prose blockquote above, which is the standalone Block quote tool. */
.prose .article-inline-quote {
  font-style: italic;
  color: var(--color-accent-strong);
  background: var(--color-accent-soft);
  padding: 0.05em 0.4em;
  border-radius: 4px;
}
.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-surface-alt);
  padding: 2px 6px;
  border-radius: 4px;
}
.prose pre {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  overflow-x: auto;
}
.prose pre code { background: none; padding: 0; }
.prose img {
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  margin: var(--space-5) auto;
}
.prose a { text-decoration: underline; }

/* --- Market colour utilities ------------------------------------------- */
.market-up { color: var(--color-accent-strong); }
.market-down { color: var(--color-negative); }

/* =========================================================================
   Header
   ========================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 90%, transparent);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 66px;
  gap: var(--space-4);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-heading);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}
.brand-mark { color: var(--color-accent); font-size: 1.1rem; letter-spacing: -0.15em; }
.primary-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-nav a {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
}
.primary-nav a:hover { color: var(--color-accent-strong); }
.primary-nav a.active {
  color: var(--color-accent-strong);
  border-bottom-color: var(--color-accent);
}
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  cursor: pointer;
}
.nav-toggle-bar { width: 22px; height: 2px; background: var(--color-heading); display: block; }

@media (max-width: 720px) {
  .nav-toggle { display: flex; }
  .primary-nav {
    position: absolute;
    top: 66px;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    display: none;
  }
  .primary-nav.open { display: block; }
  .primary-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-2) var(--space-5) var(--space-4);
  }
  .primary-nav li { border-bottom: 1px solid var(--color-border); }
  .primary-nav a { display: block; padding: var(--space-3) 0; }
}

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer {
  margin-top: var(--space-9);
  background: var(--color-surface-alt);
  border-top: 1px solid var(--color-border);
  padding: var(--space-8) 0 var(--space-6);
  font-family: var(--font-sans);
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-6); }
.footer-name {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-heading);
}
.footer-tagline {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  max-width: 32ch;
  margin-top: var(--space-2);
}
.footer-heading {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: var(--space-2); }
.footer-col a { color: var(--color-text); text-decoration: none; font-size: var(--text-sm); }
.footer-col a:hover { color: var(--color-accent-strong); }
.footer-legal {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.footer-disclaimer { font-size: var(--text-xs); color: var(--color-text-muted); max-width: 70ch; }
.footer-copy { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; }
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* =========================================================================
   Home hero
   ========================================================================= */
.hero { padding-top: var(--space-8); }
.hero-inner { max-width: 820px; }
.hero-title { font-size: var(--text-4xl); letter-spacing: -0.03em; margin-bottom: var(--space-2); }
.hero-tagline {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-style: italic;
  color: var(--color-accent-strong);
  margin-bottom: var(--space-5);
}
.hero-intro { margin-bottom: var(--space-7); }
.hero-chart {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-5) var(--space-3);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-8);
}
.hero-question {
  text-align: center;
  padding: var(--space-6) 0 var(--space-4);
  border-top: 1px solid var(--color-border);
}
.question {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  color: var(--color-heading);
  margin-bottom: var(--space-5);
  line-height: 1.3;
}
.hero-return { margin-top: var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); }
.hero-return a { font-weight: 600; }

/* =========================================================================
   Market illustration
   ========================================================================= */
.market-illus { margin: 0; }
.market-illus svg { width: 100%; height: auto; display: block; }
.market-illus__cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}
.market-illus__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
}
.market-illus__note { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--color-text-muted); }

/* =========================================================================
   Explore page
   ========================================================================= */
.explore-search { display: flex; gap: var(--space-3); margin-top: var(--space-6); max-width: 560px; }
.explore-search input {
  flex: 1;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
}
.explore-search input:focus { border-color: var(--color-accent); }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.section-heading { margin: 0; }
.section-link {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
}

/* =========================================================================
   Article card
   ========================================================================= */
.article-card { height: 100%; }
.card-media { display: block; }
.card-body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.card-title { font-size: var(--text-xl); margin: 0; line-height: 1.25; }
.card-title a { color: var(--color-heading); text-decoration: none; }
.card-title a:hover { color: var(--color-accent-strong); }
.card-summary { color: var(--color-text-muted); font-size: var(--text-base); margin: 0; flex: 1; }
.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}
.read-link {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  color: var(--color-accent-strong);
  display: inline-flex;
  gap: 4px;
}
.read-link:hover span { transform: translateX(2px); }
.read-link span { transition: transform 0.15s ease; }
.article-card-featured .card-title { font-size: var(--text-2xl); }
@media (min-width: 760px) {
  .article-card-featured { display: grid; grid-template-columns: 1.1fr 1fr; }
  .article-card-featured .card-media { height: 100%; }
  .article-card-featured .featured-img,
  .article-card-featured .featured-placeholder { height: 100%; }
}

/* --- Featured illustration --------------------------------------------- */
.featured-img { width: 100%; object-fit: cover; display: block; }
.featured-placeholder {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--color-accent-strong);
  position: relative;
  overflow: hidden;
}
.featured-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(transparent 95%, rgba(63,125,95,0.12) 95%),
    linear-gradient(90deg, transparent 95%, rgba(63,125,95,0.12) 95%);
  background-size: 26px 26px;
  opacity: 0.7;
}
.placeholder-icon { position: relative; }
.placeholder-label {
  position: relative;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}

/* --- Reading time ------------------------------------------------------- */
.reading-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
}

/* =========================================================================
   Category card & category page
   ========================================================================= */
.category-card {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  height: 100%;
}
.category-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.category-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}
.category-body { display: flex; flex-direction: column; gap: 4px; }
.category-name {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-heading);
}
.category-desc { font-size: var(--text-sm); color: var(--color-text-muted); }
.category-count {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent-strong);
  margin-top: var(--space-2);
}
.category-back { margin-bottom: var(--space-4); }
.category-back a {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
}
.category-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}
.category-header h1 { margin: 0; }
.category-hero-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}
.category-count { margin-top: var(--space-3); }

/* =========================================================================
   Disclaimer
   ========================================================================= */
.disclaimer {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}
.disclaimer-title { color: var(--color-heading); margin-right: 0.35em; }
.disclaimer-inline {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-6) 0;
  display: block;
}

/* =========================================================================
   Empty state
   ========================================================================= */
.empty-state {
  text-align: center;
  padding: var(--space-8) var(--space-5);
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.empty-state svg { color: var(--color-accent); margin: 0 auto var(--space-3); }
.empty-title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  color: var(--color-heading);
  margin: 0 0 var(--space-1);
}
.empty-message { font-size: var(--text-sm); margin: 0; }

/* =========================================================================
   Search / filter controls
   ========================================================================= */
.filters {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-4);
  align-items: end;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: var(--space-6);
}
.filter-field { display: flex; flex-direction: column; gap: 6px; }
.filter-field label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.filters input,
.filters select {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  width: 100%;
}
.filters input:focus,
.filters select:focus { border-color: var(--color-accent); }
.filter-count { grid-column: 1 / -1; margin: 0; }
@media (max-width: 820px) {
  .filters { grid-template-columns: 1fr 1fr; }
  .filter-search { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .filters { grid-template-columns: 1fr; }
}

/* =========================================================================
   Archive list
   ========================================================================= */
.archive-head {
  display: grid;
  grid-template-columns: 1fr 180px 150px 80px;
  gap: var(--space-4);
  padding: 0 var(--space-4) var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  border-bottom: 2px solid var(--color-border);
}
.archive-list { display: flex; flex-direction: column; }
.archive-row {
  display: grid;
  grid-template-columns: 1fr 180px 150px 80px;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-text);
  transition: background-color 0.12s ease;
}
.archive-row:hover { background: var(--color-surface); }
.row-title {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 2px;
}
.row-summary { display: block; font-size: var(--text-sm); color: var(--color-text-muted); }
.col-date, .col-read { white-space: nowrap; }
@media (max-width: 760px) {
  .archive-head { display: none; }
  .archive-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: var(--space-4);
    padding: var(--space-5);
  }
  .col-category, .col-date, .col-read { display: inline-flex; }
  .archive-row .col-date::before { content: "· "; margin: 0 4px; opacity: 0.5; }
}

/* =========================================================================
   Article detail
   ========================================================================= */
.post-head { max-width: var(--prose-width); }
.post-breadcrumb { margin-bottom: var(--space-3); }
.post-title { font-size: var(--text-3xl); margin-bottom: var(--space-3); }
.post-summary {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.post-figure { margin: var(--space-6) auto; }
.post-figure .featured-img,
.post-figure .featured-placeholder {
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}
.post-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-7); }
.post-main { min-width: 0; }
.post-main .prose { margin: 0 auto; }
@media (min-width: 1040px) {
  .post-grid {
    grid-template-columns: 220px minmax(0, var(--prose-width));
    justify-content: center;
    align-items: start;
  }
  .post-toc { position: sticky; top: 90px; }
}
.post-toc { font-family: var(--font-sans); }
.toc-title {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  font-weight: 700;
  margin-bottom: var(--space-3);
}
.post-toc ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--color-border); }
.post-toc li { margin: 0; }
.post-toc a {
  display: block;
  padding: 5px var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
}
.post-toc a:hover { color: var(--color-accent-strong); }
.toc-sub a { padding-left: var(--space-5); font-size: var(--text-xs); }
.post-sources {
  margin-top: var(--space-7);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.post-sources h2 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.post-sources ul { margin: 0; padding-left: 1.2em; }
.post-sources li { margin-bottom: var(--space-2); font-size: var(--text-base); }
.post-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.post-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.share-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-right: var(--space-2);
}
.share-btn {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
}
.share-btn:hover { border-color: var(--color-accent); color: var(--color-accent-strong); }
.post-back { margin-top: var(--space-6); }
.post-back a { font-family: var(--font-sans); font-weight: 600; text-decoration: none; }
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-7);
}
.post-nav-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-decoration: none;
  background: var(--color-surface);
}
.post-nav-item:hover { border-color: var(--color-accent); }
.post-nav-next { text-align: right; }
.post-nav-dir {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent-strong);
  font-weight: 700;
}
.post-nav-title { font-family: var(--font-serif); color: var(--color-heading); font-weight: 600; }
@media (max-width: 620px) {
  .post-nav { grid-template-columns: 1fr; }
  .post-nav-next { text-align: left; }
}
.related { margin-top: var(--space-8); }
.related-heading { font-size: var(--text-xl); margin-bottom: var(--space-5); }

/* =========================================================================
   About / writing guide
   ========================================================================= */
.about { max-width: var(--prose-width); }
.about .prose { margin-top: var(--space-5); }
.guide { max-width: var(--prose-width); }
.guide .prose { margin-top: var(--space-5); }

/* =========================================================================
   404
   ========================================================================= */
.notfound { max-width: 640px; }
.notfound-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-6) 0; }
.notfound-cats-label { margin-bottom: var(--space-3); }
.notfound-cats { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* =========================================================================
   Discover (animated intro)
   ========================================================================= */
.discover { min-height: 70vh; display: flex; align-items: center; padding: var(--space-8) 0; }
.discover-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.discover-heading { font-size: var(--text-2xl); }
.discover-explain {
  color: var(--color-text-muted);
  max-width: 46ch;
  margin: 0 auto var(--space-6);
  font-size: var(--text-base);
}
.scene {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  margin: 0 auto var(--space-5);
  max-width: 460px;
}
.scene svg { width: 100%; height: auto; }
.rotator {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  min-height: 1.4em;
  margin: 0 0 var(--space-5);
  color: var(--color-accent-strong);
}
.rotator-word { display: inline-block; transition: opacity 0.25s ease, transform 0.25s ease; }
.rotator-word.fade { opacity: 0; transform: translateY(6px); }
.writing-arm { transform-origin: 132px 188px; animation: write 1.1s ease-in-out infinite; }
.wall-line { stroke-dasharray: 160; stroke-dashoffset: 160; animation: draw 2s ease-out infinite alternate; }
.magnifier { transform-origin: 330px 52px; animation: search 2.4s ease-in-out infinite; }
.screen-line { stroke-dasharray: 120; stroke-dashoffset: 120; animation: draw 1.6s ease-out infinite alternate; }
@keyframes write { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-8deg); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes search { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-14px, 10px); } }
@media (prefers-reduced-motion: reduce) {
  .writing-arm, .wall-line, .magnifier, .screen-line, .rotator-word {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* --- Reduced motion (global) ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- Print -------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  .prose { max-width: none; font-size: 12pt; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* --- Writer-produced images (aligned / captioned figures) --------------- */
.prose .article-image,
.article-image { margin: var(--space-5) auto; max-width: 100%; }
.article-image img { width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--color-border); }
.article-image figcaption {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-2);
}
.article-image.align-left { margin-left: 0; margin-right: auto; }
.article-image.align-right { margin-left: auto; margin-right: 0; }
.article-image.align-center { margin-left: auto; margin-right: auto; }

/* Compact card footer: date left, read link right */
.article-card-compact .card-footer {
  margin-top: auto;
  justify-content: space-between;
}

.article-card-compact .read-link {
  margin-left: auto;
}

/* =========================================================================
   Explore Latest Posts - compact cards
   Tag + reading time + title + date + read link only
   ========================================================================= */

.explore-post-grid {
  align-items: start;
}

.explore-post-grid .article-card-compact {
  height: auto;
  min-height: 180px;
}

.explore-post-grid .article-card-compact .card-body {
  padding: var(--space-5);
  min-height: 180px;
}

.explore-post-grid .article-card-compact .card-title {
  margin: var(--space-2) 0;
}

.explore-post-grid .article-card-compact .card-footer {
  margin-top: auto;
  justify-content: space-between;
}

.explore-post-grid .article-card-compact .read-link {
  margin-left: auto;
}


/* =========================================================================
   FINAL Explore Latest Posts card design
   Equal-size image cards
   ========================================================================= */

.explore-post-grid {
  align-items: stretch;
  grid-auto-rows: 1fr;
}

/* Every Latest Post tile has exactly the same overall size */
.explore-post-grid .article-card-compact {
  height: 360px;
  min-height: 360px;
  max-height: 360px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Fixed image area */
.explore-post-grid .article-card-compact .card-media {
  display: block;
  height: 150px;
  min-height: 150px;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
}

/* Uploaded image */
.explore-post-grid .article-card-compact .featured-img {
  width: 100%;
  height: 150px !important;
  aspect-ratio: auto !important;
  object-fit: cover;
  display: block;
}

/* Placeholder when a post does not have an image */
.explore-post-grid .article-card-compact .featured-placeholder {
  width: 100%;
  height: 150px !important;
  aspect-ratio: auto !important;
}

/* Compact body */
.explore-post-grid .article-card-compact .card-body {
  flex: 1;
  min-height: 0;
  padding: 14px 16px;
  gap: 7px;
  display: flex;
  flex-direction: column;
}

/* Category + reading time */
.explore-post-grid .article-card-compact .card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: nowrap;
}

.explore-post-grid .article-card-compact .badge {
  font-size: 9px;
  line-height: 1.2;
  padding: 4px 8px;
  max-width: 65%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.explore-post-grid .article-card-compact .card-meta .meta {
  font-size: 10px;
  white-space: nowrap;
}

/* Normal-size title */
.explore-post-grid .article-card-compact .card-title {
  font-size: 16px;
  line-height: 1.28;
  font-weight: 600;
  margin: 4px 0 0;
}

/* Prevent long titles from stretching the card */
.explore-post-grid .article-card-compact .card-title a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

/* Date left, Read article right */
.explore-post-grid .article-card-compact .card-footer {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.explore-post-grid .article-card-compact .card-footer .meta {
  font-size: 10px;
  white-space: nowrap;
}

.explore-post-grid .article-card-compact .read-link {
  margin-left: auto;
  font-size: 10px;
  white-space: nowrap;
}

/* Tablet */
@media (max-width: 900px) {
  .explore-post-grid .article-card-compact {
    height: 350px;
    min-height: 350px;
    max-height: 350px;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .explore-post-grid .article-card-compact {
    height: auto;
    min-height: 340px;
    max-height: none;
  }
}

/* ============================================================
   Explore Latest Posts - compact final layout
   ============================================================ */

.explore-post-grid .article-card-compact {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: flex;
  flex-direction: column;
}

/* Image stays consistent across every card */
.explore-post-grid .article-card-compact .card-media {
  display: block;
  flex: none;
}

.explore-post-grid .article-card-compact .featured-img,
.explore-post-grid .article-card-compact .featured-placeholder {
  width: 100%;
  aspect-ratio: 16 / 7 !important;
  height: auto !important;
  object-fit: cover;
}

/* Compact content area */
.explore-post-grid .article-card-compact .card-body {
  padding: 16px 18px !important;
  display: flex;
  flex-direction: column;
  gap: 8px !important;
  flex: none !important;
}

/* Category + reading time */
.explore-post-grid .article-card-compact .card-meta {
  margin: 0 !important;
}

/* Title: maximum 3 lines */
.explore-post-grid .article-card-compact .card-title {
  font-size: 16px !important;
  line-height: 1.3 !important;
  margin: 4px 0 6px !important;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Remove the old flex behavior that created the huge empty space */
.explore-post-grid .article-card-compact .card-summary {
  display: none !important;
}

/* Date + Read article directly below title */
.explore-post-grid .article-card-compact .card-footer {
  margin-top: 4px !important;
  padding-top: 10px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Small date */
.explore-post-grid .article-card-compact .card-footer .meta {
  font-size: 11px !important;
  white-space: nowrap;
}

/* Small read link */
.explore-post-grid .article-card-compact .read-link {
  margin-left: auto;
  font-size: 11px !important;
  white-space: nowrap;
}

/* Keep cards aligned within each grid row */
.explore-post-grid {
  align-items: start;
}


/* ============================================================
   Featured card - balanced vertical spacing
   ============================================================ */

.article-card-featured .card-body {
  padding: 28px 30px !important;
  display: flex;
  flex-direction: column;
  gap: 16px !important;
  justify-content: flex-start;
}

/* Keep summary compact instead of stretching */
.article-card-featured .card-summary {
  flex: none !important;
  margin: 0 !important;
}

/* Give title consistent spacing */
.article-card-featured .card-title {
  margin: 0 !important;
}

/* Footer should sit naturally below the summary */
.article-card-featured .card-footer {
  margin-top: 6px !important;
  padding-top: 14px !important;
}

/* Keep top metadata tight and aligned */
.article-card-featured .card-meta {
  margin: 0 !important;
}

/* ============================================================
   Featured card - final balanced spacing
   ============================================================ */

.article-card-featured .card-body {
  padding: 32px 32px 26px !important;
  display: flex;
  flex-direction: column;
  gap: 18px !important;
}

/* Keep summary natural */
.article-card-featured .card-summary {
  flex: none !important;
  margin: 0 !important;
}

/* Title spacing */
.article-card-featured .card-title {
  margin: 0 !important;
}

/* Footer gets a little breathing room above it */
.article-card-featured .card-footer {
  margin-top: auto !important;
  padding-top: 16px !important;
  padding-bottom: 2px !important;
}

/* Keep metadata aligned */
.article-card-featured .card-meta {
  margin: 0 !important;
}


/* ============================================================
   Market ticker
   ============================================================ */

.market-ticker {
  width: 100%;
  position: relative;
  z-index: 1000;
  background: #000;
  overflow: hidden;
}

.market-ticker tv-ticker-tape {
  display: block;
  width: 100%;
}



/* =========================================================================
   Compact homepage
   ========================================================================= */

.home-hero {
  position: relative;
  overflow: hidden;
  padding-top: 34px !important;
  padding-bottom: 34px !important;
}

.home-hero .hero-inner {
  max-width: 760px;
  position: relative;
  z-index: 2;
}

.home-hero .hero-title {
  margin-bottom: 6px;
}

.home-hero .hero-tagline {
  margin-bottom: 16px;
}

.home-hero .hero-intro {
  margin-bottom: 24px !important;
  line-height: 1.6;
}

.home-hero .hero-question {
  padding: 22px 0 4px !important;
}

.home-hero .question {
  margin-bottom: 16px !important;
}

.home-hero .hero-return {
  margin-top: 14px !important;
}


/* =========================================================================
   Faint candlestick watermarks
   ========================================================================= */

.home-candles {
  position: absolute;
  top: 70px;
  width: 190px;
  height: 360px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 1;

  background-image:
    linear-gradient(to bottom, transparent 7%, currentColor 7%, currentColor 62%, transparent 62%),
    linear-gradient(to bottom, transparent 24%, currentColor 24%, currentColor 48%, transparent 48%),

    linear-gradient(to bottom, transparent 30%, currentColor 30%, currentColor 84%, transparent 84%),
    linear-gradient(to bottom, transparent 42%, currentColor 42%, currentColor 67%, transparent 67%),

    linear-gradient(to bottom, transparent 12%, currentColor 12%, currentColor 74%, transparent 74%),
    linear-gradient(to bottom, transparent 28%, currentColor 28%, currentColor 55%, transparent 55%),

    linear-gradient(to bottom, transparent 38%, currentColor 38%, currentColor 92%, transparent 92%),
    linear-gradient(to bottom, transparent 52%, currentColor 52%, currentColor 78%, transparent 78%);

  background-size:
    2px 100%,
    18px 100%,
    2px 100%,
    18px 100%,
    2px 100%,
    18px 100%,
    2px 100%,
    18px 100%;

  background-position:
    18px 0,
    10px 0,
    66px 0,
    58px 0,
    114px 0,
    106px 0,
    162px 0,
    154px 0;

  background-repeat: no-repeat;
  color: var(--color-heading);
}

.home-candles-left {
  left: 22px;
}

.home-candles-right {
  right: 22px;
  transform: scaleX(-1);
}


/* =========================================================================
   Compact footer
   ========================================================================= */

.site-footer {
  margin-top: 24px !important;
  padding: 22px 0 16px !important;
}

.footer-grid {
  gap: 28px !important;
}

.footer-name {
  font-size: 1.1rem !important;
}

.footer-tagline {
  font-size: 12px !important;
  margin-top: 5px !important;
}

.footer-heading {
  margin-bottom: 8px !important;
  font-size: 10px !important;
}

.footer-col li {
  margin-bottom: 4px !important;
}

.footer-col a {
  font-size: 12px !important;
}

.footer-legal {
  margin-top: 16px !important;
  padding-top: 12px !important;
}

.footer-disclaimer {
  font-size: 10px !important;
  margin-bottom: 6px !important;
  max-width: 90ch !important;
}

.footer-copy {
  font-size: 10px !important;
}


/* =========================================================================
   Responsive homepage
   ========================================================================= */

@media (max-width: 950px) {
  .home-candles {
    opacity: 0.035;
    width: 120px;
  }

  .home-candles-left {
    left: 5px;
  }

  .home-candles-right {
    right: 5px;
  }
}

@media (max-width: 700px) {
  .home-hero {
    padding-top: 26px !important;
    padding-bottom: 26px !important;
  }

  .home-candles {
    display: none;
  }
}


/* =========================================================================
   Simple footer
   ========================================================================= */

.site-footer {
  margin-top: var(--space-6);
  padding: 18px 0 16px;
}

.site-footer .footer-legal {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.site-footer .footer-disclaimer {
  margin: 0 0 8px;
  max-width: 90ch;
  line-height: 1.5;
}

.site-footer .footer-copy {
  margin: 0;
}


/* =========================================================================
   Final compact footer
   ========================================================================= */

.site-footer {
  margin-top: var(--space-5) !important;
  padding: 12px 0 10px !important;
}

.site-footer .footer-legal {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.site-footer .footer-disclaimer {
  margin: 0 0 4px !important;
  padding: 0 !important;
  max-width: none !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  white-space: nowrap;
}

.site-footer .footer-copy {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

@media (max-width: 900px) {
  .site-footer .footer-disclaimer {
    white-space: normal;
  }
}


/* Center final footer text */
.site-footer .footer-legal {
  text-align: center !important;
}

.site-footer .footer-disclaimer {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.site-footer .footer-copy {
  text-align: center !important;
}


/* Force footer content to true page center */
.site-footer .footer-legal {
  width: 100% !important;
  max-width: none !important;
  text-align: center !important;
  display: block !important;
}

.site-footer .footer-disclaimer {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

.site-footer .footer-copy {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}


/* Candle colors only */
.home-candles-left {
  color: #c94f4f !important;
}

.home-candles-right {
  color: #3f8f68 !important;
}


/* Final darker candlestick colors */
.home-candles-left {
  color: #9f1d2d !important;
}

.home-candles-right {
  color: #08783f !important;
}


/* Strong visible candlesticks */
.home-candles {
  opacity: 0.55 !important;
}

.home-candles-left {
  color: #b42332 !important;
}

.home-candles-right {
  color: #087a45 !important;
}

@media (max-width: 950px) {
  .home-candles {
    opacity: 0.45 !important;
  }
}


/* =========================================================================
   Home -> Discover transition
   ========================================================================= */

.home-hero,
.home-hero .hero-inner,
.home-candles,
.site-header,
.site-footer {
  transition:
    opacity 0.6s ease,
    transform 0.6s ease,
    filter 0.6s ease;
}

body.home-leaving .home-hero .hero-inner {
  opacity: 0;
  transform: translateY(-20px);
}

body.home-leaving .home-candles-left {
  transform: translateX(45px);
  opacity: 0.85 !important;
}

body.home-leaving .home-candles-right {
  transform: scaleX(-1) translateX(45px);
  opacity: 0.85 !important;
}

body.home-leaving .site-header {
  opacity: 0;
  transform: translateY(-10px);
}

body.home-leaving .site-footer {
  opacity: 0;
  transform: translateY(10px);
}

body.home-leaving .home-hero {
  filter: blur(2px);
}

@media (prefers-reduced-motion: reduce) {
  .home-hero,
  .home-hero .hero-inner,
  .home-candles,
  .site-header,
  .site-footer {
    transition: none !important;
  }
}



/* =========================================================================
   Investing diary transition
   ========================================================================= */

.diary-transition {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background:
    radial-gradient(circle at center, #faf7ee 0%, #eee8dc 70%, #ddd4c5 100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 180ms ease;
}

body.diary-transition-active {
  overflow: hidden;
}

body.diary-transition-active .diary-transition {
  opacity: 1;
  visibility: visible;
}

.diary-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1600px;
}


/* ---------------- Notebook ---------------- */

.investing-diary {
  position: relative;
  width: min(720px, 76vw);
  height: min(460px, 60vw);
  max-height: 70vh;

  opacity: 0;
  transform:
    translateY(75vh)
    scale(0.76)
    rotateX(16deg);

  transform-origin: center center;

  transition:
    transform 440ms cubic-bezier(.22,.8,.28,1),
    opacity 240ms ease;
}

body.diary-book-rising .investing-diary {
  opacity: 1;
  transform:
    translateY(0)
    scale(0.92)
    rotateX(8deg);
}


/* ---------------- Closed cover ---------------- */

.diary-cover {
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: 12px 18px 18px 12px;
  background:
    linear-gradient(135deg, #18362c, #0c241d);
  box-shadow:
    0 35px 80px rgba(0,0,0,.24),
    inset 0 0 0 2px rgba(255,255,255,.05);

  transform-origin: left center;

  transition:
    transform 650ms cubic-bezier(.2,.78,.25,1),
    opacity 300ms ease 320ms;
}

.diary-cover::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 24px;
  width: 2px;
  background: rgba(230,210,150,.34);
}

.diary-cover-inner {
  position: absolute;
  inset: 13%;
  border: 1px solid rgba(222,202,147,.50);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #e8d9a7;
  text-align: center;
  letter-spacing: .06em;
}

.diary-cover-inner strong {
  font-family: var(--font-serif);
  font-size: clamp(24px, 4vw, 44px);
  letter-spacing: .03em;
}

.cover-small {
  font-family: var(--font-sans);
  font-size: clamp(8px, 1vw, 11px);
  letter-spacing: .18em;
}

.cover-line {
  width: 55%;
  height: 1px;
  background: rgba(232,217,167,.55);
  margin: 18px 0;
}


/* ---------------- Open pages ---------------- */

.diary-pages {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #f8f1df;
  border-radius: 10px;
  box-shadow: 0 30px 70px rgba(0,0,0,.22);
  overflow: hidden;
}

body.diary-book-open .diary-cover {
  transform: rotateY(-112deg);
  opacity: 0;
}

.diary-page {
  position: relative;
  overflow: hidden;
  padding: 34px 34px;
  color: #27302c;
  background:
    linear-gradient(
      90deg,
      rgba(145,117,72,.04),
      transparent 12%,
      transparent 88%,
      rgba(145,117,72,.05)
    ),
    #fbf5e8;
}

.diary-page-left {
  border-right: 1px solid rgba(86,68,42,.14);
}

.diary-page-right {
  border-left: 1px solid rgba(255,255,255,.8);
}

.paper-lines {
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 27px,
      #8099a4 28px
    );
  pointer-events: none;
}

.diary-spine {
  position: absolute;
  width: 18px;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(82,61,35,.12),
      transparent
    );
}


/* ---------------- Notes ---------------- */

.note-heading,
.hand-note,
.mini-bars,
.diary-chart,
.hand-arrow,
.scribble-circle {
  opacity: 0;
  transition:
    opacity 250ms ease,
    transform 350ms ease;
}

.note-heading {
  position: relative;
  margin: 0 0 22px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(16px, 2vw, 22px);
  transform: translateY(6px);
}

.hand-note {
  position: absolute;
  margin: 0;
  font-family: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
  font-size: clamp(11px, 1.6vw, 17px);
  color: #2f4050;
  transform: rotate(-2deg) translateY(4px);
}

.note-a { top: 90px; left: 38px; }
.note-b { top: 132px; right: 28px; transform: rotate(3deg); }
.note-c { bottom: 110px; left: 42px; }
.note-d { bottom: 82px; left: 42px; }
.note-e { bottom: 54px; left: 42px; }

.right-note-a { top: 88px; right: 34px; transform: rotate(3deg); }
.right-note-b { bottom: 85px; left: 45px; transform: rotate(-4deg); }
.right-note-c { bottom: 45px; right: 30px; transform: rotate(2deg); }

body.diary-notes-visible .note-heading,
body.diary-notes-visible .hand-note,
body.diary-notes-visible .mini-bars,
body.diary-notes-visible .diary-chart,
body.diary-notes-visible .hand-arrow,
body.diary-notes-visible .scribble-circle {
  opacity: 1;
}

body.diary-notes-visible .note-heading,
body.diary-notes-visible .hand-note {
  transform: translateY(0);
}


/* ---------------- Mini bar chart ---------------- */

.mini-bars {
  position: absolute;
  left: 42px;
  top: 175px;
  width: 150px;
  height: 100px;
  display: flex;
  align-items: flex-end;
  gap: 9px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(52,63,58,.45);
  transform: translateY(8px);
}

.mini-bars span {
  flex: 1;
  background: #557a66;
  border-radius: 2px 2px 0 0;
}


/* ---------------- Main notebook chart ---------------- */

.diary-chart {
  position: absolute;
  left: 35px;
  right: 35px;
  top: 145px;
  height: 145px;
  border-left: 1px solid rgba(46,62,57,.35);
  border-bottom: 1px solid rgba(46,62,57,.35);
  transform: scale(.96);
  transform-origin: center;
  overflow: visible;
}

.chart-grid-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(70,90,82,.10);
}

.chart-grid-line.line-1 { top: 25%; }
.chart-grid-line.line-2 { top: 50%; }
.chart-grid-line.line-3 { top: 75%; }

.diary-chart-svg {
  position: absolute;
  inset: 7px;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  overflow: visible;
}

.diary-chart-line {
  fill: none;
  stroke: #1b7850;
  stroke-width: 4;
  stroke-linejoin: round;
  stroke-linecap: round;

  stroke-dasharray: 700;
  stroke-dashoffset: 700;

  transition: stroke-dashoffset 650ms ease 130ms;
}

body.diary-notes-visible .diary-chart-line {
  stroke-dashoffset: 0;
}

.chart-focus-point {
  position: absolute;
  right: 14%;
  top: 18%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #a52032;
  box-shadow: 0 0 0 6px rgba(165,32,50,.13);
}

.hand-arrow {
  position: absolute;
  right: 50px;
  bottom: 100px;
  font-family: var(--font-serif);
  font-size: 40px;
  color: #1b7850;
  transform: rotate(-8deg);
}

.scribble-circle {
  position: absolute;
  width: 100px;
  height: 48px;
  right: 33px;
  bottom: 45px;
  border: 2px solid rgba(158,34,50,.60);
  border-radius: 50%;
  transform: rotate(-8deg);
}


/* ---------------- Hands ---------------- */

.diary-hand {
  position: absolute;
  z-index: 12;
  width: 145px;
  height: 180px;
  opacity: 0;

  transition:
    opacity 200ms ease,
    transform 400ms cubic-bezier(.2,.8,.3,1);
}

.diary-hand-left {
  left: calc(50% - 430px);
  bottom: -190px;
  transform: rotate(22deg);
}

.diary-hand-right {
  right: calc(50% - 430px);
  bottom: -190px;
  transform: rotate(-22deg) scaleX(-1);
}

body.diary-hands-in .diary-hand {
  opacity: 1;
}

body.diary-hands-in .diary-hand-left {
  transform: translateY(-165px) rotate(12deg);
}

body.diary-hands-in .diary-hand-right {
  transform: translateY(-165px) rotate(-12deg) scaleX(-1);
}

.hand-palm {
  position: absolute;
  bottom: 0;
  left: 25px;
  width: 90px;
  height: 115px;
  border-radius: 45px 45px 25px 25px;
  background: #caa581;
  box-shadow:
    inset -8px -6px 16px rgba(92,56,29,.12),
    0 8px 20px rgba(0,0,0,.12);
}

.hand-finger {
  position: absolute;
  width: 21px;
  height: 83px;
  border-radius: 15px;
  background: #caa581;
  transform-origin: bottom center;
}

.finger-1 { left: 24px; top: 10px; transform: rotate(-12deg); }
.finger-2 { left: 50px; top: 0; }
.finger-3 { left: 76px; top: 8px; transform: rotate(7deg); }
.finger-4 { left: 99px; top: 24px; height: 67px; transform: rotate(18deg); }


/* ---------------- Camera zoom ---------------- */

body.diary-camera-zoom .investing-diary {
  transform:
    translate(-22%, 10%)
    scale(4.4)
    rotateX(0deg);

  transform-origin: 73% 46%;

  transition:
    transform 650ms cubic-bezier(.62,.02,.32,1);
}

body.diary-camera-zoom .diary-hand {
  opacity: 0;
  transition: opacity 180ms ease;
}


/* ---------------- Background fade ---------------- */

body.diary-transition-active .site-header,
body.diary-transition-active .home-hero,
body.diary-transition-active .site-footer {
  transition:
    opacity 250ms ease,
    filter 300ms ease;
}

body.diary-transition-active .site-header,
body.diary-transition-active .home-hero,
body.diary-transition-active .site-footer {
  opacity: .16;
  filter: blur(2px);
}


/* ---------------- Responsive ---------------- */

@media (max-width: 850px) {
  .investing-diary {
    width: 88vw;
    height: 58vw;
  }

  .diary-page {
    padding: 22px;
  }

  .diary-hand-left {
    left: -20px;
  }

  .diary-hand-right {
    right: -20px;
  }
}

@media (max-width: 620px) {
  .investing-diary {
    width: 94vw;
    height: 68vw;
  }

  .diary-page {
    padding: 16px;
  }

  .hand-note {
    font-size: 9px;
  }

  .diary-hand {
    transform: scale(.75);
  }

  .diary-chart {
    top: 105px;
    height: 100px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .diary-transition,
  .investing-diary,
  .diary-cover,
  .diary-hand,
  .hand-note,
  .diary-chart-line {
    transition: none !important;
    animation: none !important;
  }
}



/* =========================================================================
   Refined diary transition
   Remove cartoon hands and make the journal behave like a real hard-cover book
   ========================================================================= */

/* Completely disable old hand elements if any remain */
.diary-hand {
  display: none !important;
}


/* Journal proportions */
.investing-diary {
  width: min(760px, 78vw) !important;
  height: min(480px, 62vw) !important;
  perspective: 1800px;
}


/* The pages remain underneath the cover */
.diary-pages {
  z-index: 2 !important;
  background: #f7f0df !important;
  border-radius: 10px 14px 14px 10px !important;

  box-shadow:
    0 30px 70px rgba(20, 28, 23, 0.20),
    inset 0 0 0 1px rgba(78, 65, 44, 0.08);
}


/* Keep the open book visually connected to the green journal */
.diary-pages::before {
  content: "";
  position: absolute;
  inset: -7px;
  z-index: -1;
  border-radius: 13px 18px 18px 13px;
  background: #12392d;

  box-shadow:
    0 28px 60px rgba(0, 0, 0, 0.18);
}


/* Realistic hard cover */
.diary-cover {
  z-index: 8 !important;

  transform-origin: 3.5% center !important;

  backface-visibility: hidden;
  transform-style: preserve-3d;

  border-radius: 10px 16px 16px 10px !important;

  background:
    linear-gradient(
      100deg,
      #0d3025 0%,
      #123d30 50%,
      #0c2b22 100%
    ) !important;

  box-shadow:
    0 30px 70px rgba(0,0,0,.28),
    inset -12px 0 22px rgba(0,0,0,.12),
    inset 2px 0 0 rgba(230,210,150,.15);

  transition:
    transform 820ms cubic-bezier(.22,.68,.18,1),
    box-shadow 820ms ease !important;
}


/* Add subtle thickness to the hardcover */
.diary-cover::before {
  content: "";
  position: absolute;
  top: 5px;
  right: -8px;
  bottom: 5px;
  width: 9px;

  border-radius: 0 8px 8px 0;

  background:
    linear-gradient(
      to right,
      #0a241c,
      #173d31
    );

  opacity: .95;
}


/* Spine detail */
.diary-cover::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 25px;
  width: 1px;

  background: rgba(221, 201, 142, .42);

  box-shadow:
    4px 0 8px rgba(0,0,0,.08);
}


/* Correct opening motion */
body.diary-book-open .diary-cover {
  transform:
    translateX(0)
    rotateY(-158deg) !important;

  opacity: 1 !important;

  box-shadow:
    -20px 30px 50px rgba(0,0,0,.10) !important;
}


/* Keep the cover visible as the left flap */
body.diary-book-open .diary-cover-inner {
  opacity: .22;
  transition: opacity 300ms ease;
}


/* Pages should not appear ghosted */
.diary-page {
  background:
    linear-gradient(
      90deg,
      rgba(110, 90, 56, .035),
      transparent 10%,
      transparent 90%,
      rgba(110, 90, 56, .045)
    ),
    #fbf5e8 !important;

  color: #26332d !important;
}


/* Slight paper-edge depth */
.diary-page-left::after,
.diary-page-right::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  pointer-events: none;
}

.diary-page-left::after {
  right: 0;
  background:
    linear-gradient(
      to left,
      rgba(69, 53, 31, .08),
      transparent
    );
}

.diary-page-right::after {
  left: 0;
  background:
    linear-gradient(
      to right,
      rgba(69, 53, 31, .08),
      transparent
    );
}


/* Stronger readable notes */
body.diary-notes-visible .note-heading,
body.diary-notes-visible .hand-note,
body.diary-notes-visible .mini-bars,
body.diary-notes-visible .diary-chart,
body.diary-notes-visible .hand-arrow,
body.diary-notes-visible .scribble-circle {
  opacity: 1 !important;
}


/* Cleaner camera zoom */
body.diary-camera-zoom .investing-diary {
  transform:
    translate(-20%, 8%)
    scale(4.1)
    rotateX(0deg) !important;

  transform-origin: 73% 46% !important;

  transition:
    transform 650ms cubic-bezier(.65,.02,.25,1) !important;
}


/* =========================================================================
   Diary physical continuity
   Closed and open states now use the SAME physical book
   ========================================================================= */

.investing-diary {
  width: min(760px, 78vw) !important;
  aspect-ratio: 1.58 / 1;
  height: auto !important;
  max-height: 68vh;
  transform-style: preserve-3d;
  perspective: 2200px;
}

/* Permanent green back board: exists before, during and after opening */
.diary-back-cover {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 11px 17px 17px 11px;
  background:
    linear-gradient(105deg, #0a2b21 0%, #123a2d 48%, #0a291f 100%);
  box-shadow:
    0 34px 65px rgba(18, 24, 21, .25),
    inset 0 0 0 1px rgba(219, 199, 139, .17);
}

/* Visible cream page stack is ALWAYS inside the diary */
.diary-page-block {
  position: absolute;
  z-index: 1;
  top: 9px;
  right: 9px;
  bottom: 9px;
  left: 13px;
  border-radius: 7px 12px 12px 7px;
  background:
    repeating-linear-gradient(
      to bottom,
      #e9dfca 0px,
      #e9dfca 1px,
      #f8f1df 1px,
      #f8f1df 3px
    );
  box-shadow:
    5px 4px 0 #dfd3bd,
    8px 7px 0 #d8ccb6;
}

/*
Actual open pages sit inside the same physical dimensions.
They are initially hidden by the front cover, not created later.
*/
.diary-pages {
  z-index: 3 !important;
  inset: 10px 10px 10px 14px !important;
  border-radius: 7px 11px 11px 7px !important;
  overflow: hidden;
  opacity: 1 !important;
  transform: none !important;
}

/* Remove the previous pseudo-green shell because we now have a real back cover */
.diary-pages::before {
  display: none !important;
}

/* Front cover uses exactly the same outside dimensions as the closed diary */
.diary-cover {
  inset: 0 !important;
  z-index: 9 !important;
  transform-origin: 26px center !important;
  transform: rotateY(0deg) !important;
  opacity: 1 !important;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform;

  transition:
    transform 900ms cubic-bezier(.34,.05,.18,1),
    box-shadow 900ms ease !important;
}

/*
Instead of making the cover disappear,
keep it physically attached to the left spine.
*/
body.diary-book-open .diary-cover {
  transform: rotateY(-164deg) !important;
  opacity: 1 !important;
  box-shadow:
    -25px 25px 45px rgba(0,0,0,.14) !important;
}

/* Cover text naturally turns away with the cover */
body.diary-book-open .diary-cover-inner {
  opacity: 1 !important;
}

/* Center binding */
.diary-spine {
  z-index: 5 !important;
  width: 24px !important;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(54,44,29,.06) 15%,
      rgba(54,44,29,.15) 50%,
      rgba(255,255,255,.45) 55%,
      rgba(54,44,29,.08) 80%,
      transparent 100%
    ) !important;
}

/* Slight physical page curvature toward binding */
.diary-page-left {
  box-shadow: inset -13px 0 18px -17px rgba(52,43,30,.45);
}

.diary-page-right {
  box-shadow: inset 13px 0 18px -17px rgba(52,43,30,.45);
}


/* =========================================================================
   Dense personal research notes
   ========================================================================= */

.research-scribbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 420ms ease;
}

body.diary-notes-visible .research-scribbles {
  opacity: 1;
}

.research-scribbles .scribble,
.scribble-check,
.scribble-question,
.scribble-percent,
.scribble-star {
  position: absolute;
  font-family:
    "Bradley Hand",
    "Segoe Print",
    "Chalkboard SE",
    cursive;
  color: rgba(35, 51, 45, .78);
  line-height: 1.1;
}

.research-scribbles .scribble {
  font-size: clamp(9px, 1.15vw, 14px);
}

.research-scribbles-left .s1 {
  left: 10%;
  top: 29%;
  transform: rotate(-3deg);
}

.research-scribbles-left .s2 {
  right: 8%;
  top: 38%;
  transform: rotate(2deg);
}

.research-scribbles-left .s3 {
  left: 13%;
  top: 57%;
  transform: rotate(-2deg);
}

.research-scribbles-left .s4 {
  right: 10%;
  top: 67%;
  transform: rotate(4deg);
}

.research-scribbles-left .s5 {
  left: 28%;
  bottom: 9%;
  transform: rotate(-3deg);
  text-decoration: underline;
}

.research-scribbles-left .s6 {
  right: 13%;
  bottom: 25%;
  transform: rotate(8deg);
}

.research-scribbles-left .s7 {
  left: 9%;
  top: 47%;
  font-weight: 700;
  transform: rotate(-8deg);
}

.research-scribbles-left .c1 {
  left: 8%;
  bottom: 22%;
  font-size: 19px;
  color: rgba(12, 104, 64, .78);
}

.research-scribbles-left .c2 {
  left: 14%;
  bottom: 15%;
  font-size: 18px;
  color: rgba(12, 104, 64, .78);
}

.research-scribbles-left .scribble-question {
  right: 14%;
  top: 52%;
  font-size: 27px;
  color: rgba(153, 36, 45, .72);
  transform: rotate(11deg);
}


.research-scribbles-right .r1 {
  right: 10%;
  top: 15%;
  font-weight: 700;
  transform: rotate(3deg);
}

.research-scribbles-right .r2 {
  left: 10%;
  top: 30%;
  transform: rotate(-3deg);
}

.research-scribbles-right .r3 {
  right: 8%;
  top: 58%;
  transform: rotate(2deg);
  text-decoration: underline;
}

.research-scribbles-right .r4 {
  left: 10%;
  bottom: 21%;
  transform: rotate(-5deg);
}

.research-scribbles-right .r5 {
  right: 17%;
  bottom: 13%;
  font-weight: 700;
  transform: rotate(5deg);
}

.research-scribbles-right .r6 {
  left: 30%;
  bottom: 8%;
  transform: rotate(-2deg);
}

.research-scribbles-right .r7 {
  left: 9%;
  top: 53%;
  transform: rotate(-5deg);
}

.research-scribbles-right .scribble-percent {
  right: 12%;
  top: 43%;
  font-size: clamp(14px, 1.8vw, 21px);
  color: rgba(15, 107, 67, .75);
  transform: rotate(5deg);
}

.research-scribbles-right .scribble-star {
  left: 15%;
  top: 18%;
  font-size: 26px;
  color: rgba(153, 36, 45, .65);
  transform: rotate(-12deg);
}



/* =========================================================================
   FINAL NOTEBOOK IMAGE TRANSITION
   ========================================================================= */

.notebook-transition {
  position: fixed;
  inset: 0;

  z-index: 999999;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background:
    radial-gradient(
      circle at center,
      #f7f3e9 0%,
      #f2ede2 58%,
      #e9e1d4 100%
    );

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 420ms ease,
    visibility 0s linear 420ms;
}


/* Activated immediately after click */

body.notebook-transition-active {
  overflow: hidden;
}

body.notebook-transition-active .notebook-transition {
  opacity: 1;
  visibility: visible;

  transition:
    opacity 420ms ease,
    visibility 0s;
}


/* Main camera stage */

.notebook-scene {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  transform-origin: center center;

  will-change: transform;
}


/* Actual notebook image */

.notebook-transition-image {
  display: block;

  width: min(1080px, 84vw);
  height: auto;

  max-height: 82vh;

  object-fit: contain;

  opacity: 0;

  transform:
    translateY(28px)
    scale(0.92);

  filter:
    blur(3px)
    brightness(1.04);

  will-change:
    transform,
    opacity,
    filter;

  transition:
    opacity 650ms cubic-bezier(.22,.7,.2,1),
    transform 900ms cubic-bezier(.16,.82,.24,1),
    filter 750ms ease;
}


/* Notebook settles into the screen */

body.notebook-visible .notebook-transition-image {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);

  filter:
    blur(0)
    brightness(1);
}


/* =========================================================================
   CAMERA ZOOM

   The right page graph is roughly around:
   x = 69%
   y = 40%

   transform-origin tells the browser:
   "zoom toward THIS position"
   ========================================================================= */

body.notebook-zoom .notebook-transition-image {
  transform:
    scale(4.6);

  transform-origin:
    69% 40%;

  transition:
    transform 1100ms cubic-bezier(.65,.01,.22,1),
    filter 900ms ease;

  filter:
    brightness(1.03);
}


/* Fade homepage behind transition */

body.notebook-transition-active .home-hero,
body.notebook-transition-active .site-header,
body.notebook-transition-active .site-footer,
body.notebook-transition-active .market-ticker {
  transition:
    opacity 350ms ease,
    filter 350ms ease;

  opacity: 0 !important;
  filter: blur(3px);
}


/* Mobile */

@media (max-width: 700px) {

  .notebook-transition-image {
    width: 94vw;
    max-height: 78vh;
  }

  body.notebook-zoom .notebook-transition-image {
    transform: scale(5.4);
    transform-origin: 69% 40%;
  }

}


/* Accessibility */

@media (prefers-reduced-motion: reduce) {

  .notebook-transition,
  .notebook-transition-image,
  .home-hero,
  .site-header,
  .site-footer,
  .market-ticker {
    transition: none !important;
  }

}


.prose .article-reference {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  font-family: var(--font-sans);
}

.prose .article-reference-label {
  margin: 0 0 5px;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--color-accent-strong);
}

.prose .article-reference-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-heading);
}

.prose .article-reference-source {
  margin-top: 3px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.prose .article-reference-note {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}

.prose .article-reference-link {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent-strong);
}


.prose .article-plot {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-family: var(--font-sans);
}

.prose .article-plot-title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: var(--space-3);
}

.prose .article-plot-chart svg {
  width: 100%;
  height: auto;
  display: block;
}

.prose .plot-axis {
  stroke: var(--color-border);
  stroke-width: 1;
}

.prose .plot-line-mark {
  fill: none;
  stroke: var(--color-accent-strong);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.prose .plot-area-mark {
  fill: color-mix(in srgb, var(--color-accent) 15%, transparent);
}

.prose .plot-point-mark,
.prose .plot-bar-mark {
  fill: var(--color-accent-strong);
}

.prose .plot-axis-label,
.prose .plot-value-label {
  font-family: var(--font-sans);
  font-size: 11px;
  fill: var(--color-text-muted);
}

.prose .article-plot-source,
.prose .article-plot-note {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}


.prose .plot-axis-title {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  fill: var(--color-text);
}

/* =========================================================
   Published article image + text flow
   ========================================================= */

.prose figure.article-image.align-left {
  float: left;
  clear: none;
  margin: 8px var(--space-5) var(--space-4) 0;
}

.prose figure.article-image.align-right {
  float: right;
  clear: none;
  margin: 8px 0 var(--space-4) var(--space-5);
}

.prose figure.article-image.align-center {
  float: none;
  clear: both;
  margin-left: auto;
  margin-right: auto;
}

/* Keep floating media inside article */
.prose::after {
  content: "";
  display: block;
  clear: both;
}

/* New section = return to full page width */
.prose h2,
.prose h3,
.prose hr {
  clear: both;
}

@media (max-width: 700px) {
  .prose figure.article-image.align-left,
  .prose figure.article-image.align-right,
  .prose figure.article-image.align-center {
    float: none !important;
    clear: both;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* =========================================================================
   FINAL PUBLIC PLOT LAYOUT
   Match published plots to Writer Portal
   ========================================================================= */

.prose .article-plot {
  box-sizing: border-box;
}

/* Full */
.prose .article-plot.plot-width-full,
.prose .article-plot[data-width="full"] {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: both !important;
}

/* Medium */
.prose .article-plot.plot-width-medium,
.prose .article-plot[data-width="medium"] {
  width: 62% !important;
  max-width: 62% !important;
}

/* Small */
.prose .article-plot.plot-width-small,
.prose .article-plot[data-width="small"] {
  width: 42% !important;
  max-width: 42% !important;
}

/* Center */
.prose .article-plot.plot-align-center,
.prose .article-plot[data-align="center"] {
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Left */
.prose .article-plot.plot-align-left.plot-width-small,
.prose .article-plot.plot-align-left.plot-width-medium,
.prose .article-plot[data-align="left"][data-width="small"],
.prose .article-plot[data-align="left"][data-width="medium"] {
  float: left !important;
  clear: none !important;
  margin: 8px var(--space-5) var(--space-4) 0 !important;
}

/* Right */
.prose .article-plot.plot-align-right.plot-width-small,
.prose .article-plot.plot-align-right.plot-width-medium,
.prose .article-plot[data-align="right"][data-width="small"],
.prose .article-plot[data-align="right"][data-width="medium"] {
  float: right !important;
  clear: none !important;
  margin: 8px 0 var(--space-4) var(--space-5) !important;
}

/* Chart stays inside the selected width */
.prose .article-plot-chart {
  width: 100%;
  overflow: hidden;
}

.prose .article-plot-chart svg {
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* Axis captions */
.prose .plot-axis-title {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  fill: var(--color-text);
}

/* Prevent floats from escaping the article */
.prose::after {
  content: "";
  display: block;
  clear: both;
}

/* A heading or divider starts a fresh full-width section */
.prose h2,
.prose h3,
.prose hr {
  clear: both;
}

/* Mobile always full width */
@media (max-width: 700px) {
  .prose .article-plot {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* =========================================================================
   PLOT VISUAL PARITY
   Public article should match Writer Portal
   ========================================================================= */

.prose .article-plot {
  box-sizing: border-box;
  padding: 18px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 9px !important;
  background: var(--color-surface) !important;
  font-family: var(--font-sans) !important;
}

/* Title */
.prose .article-plot-title {
  font-family: var(--font-serif) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--color-heading) !important;
  margin: 0 0 12px !important;
}

/* Chart */
.prose .article-plot-chart {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

.prose .article-plot-chart svg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
}

/* Source + note */
.prose .article-plot-source,
.prose .article-plot-note {
  font-family: var(--font-sans) !important;
  font-size: .76rem !important;
  line-height: 1.45 !important;
  color: var(--color-text-muted) !important;
  margin: 7px 0 0 !important;
}

/* Axes */
.prose .plot-axis {
  stroke: var(--color-border) !important;
  stroke-width: 1;
}

.prose .plot-line-mark {
  fill: none !important;
  stroke: var(--color-accent-strong) !important;
  stroke-width: 3 !important;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.prose .plot-area-mark {
  fill: color-mix(in srgb, var(--color-accent) 15%, transparent) !important;
}

.prose .plot-point-mark,
.prose .plot-bar-mark {
  fill: var(--color-accent-strong) !important;
}

.prose .plot-axis-label,
.prose .plot-value-label {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  fill: var(--color-text-muted) !important;
}

.prose .plot-axis-title {
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  fill: var(--color-text) !important;
}

/* ---------------------------------------------------------
   Width
   --------------------------------------------------------- */

.prose .article-plot[data-width="full"] {
  width: 100% !important;
  max-width: 100% !important;
}

.prose .article-plot[data-width="medium"] {
  width: 62% !important;
  max-width: 62% !important;
}

.prose .article-plot[data-width="small"] {
  width: 42% !important;
  max-width: 42% !important;
}

/* ---------------------------------------------------------
   Alignment
   --------------------------------------------------------- */

.prose .article-plot[data-align="center"] {
  float: none !important;
  clear: both !important;
  margin: 1.6em auto !important;
}

.prose .article-plot[data-align="left"][data-width="small"],
.prose .article-plot[data-align="left"][data-width="medium"] {
  float: left !important;
  clear: none !important;
  margin: 8px 24px 18px 0 !important;
}

.prose .article-plot[data-align="right"][data-width="small"],
.prose .article-plot[data-align="right"][data-width="medium"] {
  float: right !important;
  clear: none !important;
  margin: 8px 0 18px 24px !important;
}

/* Full plots never float */
.prose .article-plot[data-width="full"] {
  float: none !important;
  clear: both !important;
  margin: 1.6em 0 !important;
}

/* Mobile */
@media (max-width: 700px) {
  .prose .article-plot {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    margin: 1.4em 0 !important;
  }
}



/* =========================================================================
   FINAL ARTICLE TEXT + FLOATING MEDIA LAYOUT
   ========================================================================= */

/* Never allow article content to force the page wider */
.post-main,
.post-main .prose {
  min-width: 0;
  max-width: 100%;
}

/* Normal article text must stay inside the reading column */
.prose p,
.prose li,
.prose blockquote,
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose a {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Particularly important for URLs / test strings / long identifiers */
.prose {
  overflow-wrap: anywhere;
  word-wrap: break-word;
  hyphens: auto;
}


/* =========================================================================
   BETTER FLOATING PLOT PROPORTIONS
   ========================================================================= */

/*
  Full = full article width
  Medium = enough room for readable text beside it
  Small = compact side graphic
*/

.prose .article-plot[data-width="full"] {
  width: 100% !important;
  max-width: 100% !important;
}

.prose .article-plot[data-width="medium"] {
  width: 54% !important;
  max-width: 54% !important;
}

.prose .article-plot[data-width="small"] {
  width: 38% !important;
  max-width: 38% !important;
}


/* LEFT */
.prose .article-plot[data-align="left"][data-width="medium"],
.prose .article-plot[data-align="left"][data-width="small"] {
  float: left !important;
  clear: none !important;
  margin: 8px 28px 20px 0 !important;
}

/* RIGHT */
.prose .article-plot[data-align="right"][data-width="medium"],
.prose .article-plot[data-align="right"][data-width="small"] {
  float: right !important;
  clear: none !important;
  margin: 8px 0 20px 28px !important;
}

/* CENTER */
.prose .article-plot[data-align="center"] {
  float: none !important;
  clear: both !important;
  margin: 24px auto !important;
}


/* =========================================================================
   POLISH THE CHART WHEN IT IS USED AS A SIDE GRAPH
   ========================================================================= */

.prose .article-plot {
  padding: 16px !important;
  overflow: hidden;
}

.prose .article-plot-title {
  font-size: 1rem !important;
  margin-bottom: 8px !important;
}

/* Give the actual graph as much room as possible */
.prose .article-plot-chart {
  width: 100% !important;
  margin: 0 !important;
}

.prose .article-plot-chart svg {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Make chart labels easier to read after SVG scaling */
.prose .plot-axis-label {
  font-size: 13px !important;
}

.prose .plot-value-label {
  font-size: 12px !important;
}

.prose .plot-axis-title {
  font-size: 14px !important;
  font-weight: 700 !important;
}


/* =========================================================================
   FLOAT SAFETY
   ========================================================================= */

/* Text naturally wraps beside side plots */
.prose p {
  position: relative;
}

/* Clear the float when a new major section begins */
.prose h2,
.prose h3,
.prose hr {
  clear: both !important;
}

/* Keep floats contained inside the article */
.prose::after {
  content: "";
  display: block;
  clear: both;
}


/* =========================================================================
   TABLET / MOBILE
   ========================================================================= */

@media (max-width: 780px) {
  .prose .article-plot[data-width="medium"],
  .prose .article-plot[data-width="small"],
  .prose .article-plot[data-width="full"] {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    margin: 22px 0 !important;
  }
}


/* =========================================================================
   FINAL ARTICLE IMAGE FIT
   Always show the full uploaded image without cropping
   ========================================================================= */

.prose figure.article-image {
  box-sizing: border-box;
  max-width: 100%;
  overflow: visible !important;
}

.prose figure.article-image img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;

  /* Important: preserve the full image */
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;

  border-radius: var(--radius-sm);
}

/* Full-width image */
.prose figure.article-image:not([style]),
.prose figure.article-image[style=""] {
  width: 100%;
  max-width: 100%;
}

/* Centered images */
.prose figure.article-image.align-center {
  float: none !important;
  clear: both !important;
  margin: var(--space-5) auto !important;
}

/* Left images */
.prose figure.article-image.align-left {
  float: left !important;
  clear: none !important;
  margin: 8px var(--space-5) var(--space-4) 0 !important;
}

/* Right images */
.prose figure.article-image.align-right {
  float: right !important;
  clear: none !important;
  margin: 8px 0 var(--space-4) var(--space-5) !important;
}

/* Caption */
.prose figure.article-image figcaption {
  margin-top: 8px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--color-text-muted);
}

/* Mobile: everything becomes full width */
@media (max-width: 700px) {
  .prose figure.article-image {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    margin: var(--space-5) 0 !important;
  }

  .prose figure.article-image img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}



/* =========================================================================
   ARTICLE FEATURED IMAGE - NATURAL ASPECT RATIO
   Full article shows the complete uploaded image without cropping.
   Card thumbnails keep their existing fixed ratios.
   ========================================================================= */

.post-figure {
  margin: var(--space-6) auto;
}

.post-figure .featured-img {
  display: block;

  width: 100% !important;
  max-width: 100% !important;

  /* Never force/crop the article's main image */
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;

  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

/* Keep very narrow images centered rather than distorted */
.post-figure img {
  margin-left: auto;
  margin-right: auto;
}


/* =========================================================================
   EXPLORE CARD IMAGE FIT
   Show full image inside fixed card media area without cropping
   ========================================================================= */

.explore-post-grid .article-card-compact .card-media {
  display: flex !important;
  align-items: center;
  justify-content: center;

  height: 150px !important;
  min-height: 150px !important;

  overflow: hidden !important;

  /* Soft background for unused space around contained images */
  background:
    linear-gradient(
      135deg,
      rgba(230, 239, 233, 0.95),
      rgba(244, 246, 242, 0.98)
    ) !important;

  border-bottom: 1px solid var(--color-border);
}

/* Uploaded image on Explore cards */
.explore-post-grid .article-card-compact .featured-img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 150px !important;

  /* Important: no cropping */
  object-fit: contain !important;
  object-position: center !important;

  aspect-ratio: auto !important;

  /* Avoid any leftover forced backgrounds */
  background: transparent !important;
}



/* Article layout when no table of contents is displayed */
@media (min-width: 1040px) {
  .post-grid.post-grid-no-toc {
    grid-template-columns: minmax(0, var(--prose-width));
    justify-content: center;
  }
}


/* =========================================================================
   ARTICLE HEADER HIERARCHY
   ========================================================================= */

/* Wider than the reading column, but still narrower than the feature image. */
.post-head {
  max-width: 900px;
}

.post-subtitle {
  max-width: 850px;
  margin: 0 0 var(--space-3);

  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1.28;
  font-weight: 600;

  color: var(--color-heading);
}

.post-summary {
  max-width: 760px;
}

/* Explore page intro width */
.explore-intro {
  max-width: 1080px;
}

/* Archive page intro width */
.archive-intro {
  max-width: 1100px;
}


/* =========================================================================
   INVESTMENT BOOK
   ========================================================================= */

.book-page {
  padding: 42px 0 72px;
  background:
    linear-gradient(180deg, rgba(246, 248, 245, 0.72), rgba(255, 255, 255, 0));
}

.book-container {
  max-width: 1160px;
}

.book-page-head,
.book-dashboard-head {
  margin-bottom: 36px;
}

.book-dashboard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}

.book-dashboard-head h1,
.book-page-head h1 {
  margin-bottom: 12px;
}

.book-page-intro {
  max-width: 720px;
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.book-add-button {
  flex: 0 0 auto;
  margin-top: 36px;
}


/* SUMMARY */

.book-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 30px 0 54px;
}

.book-summary-card {
  min-height: 132px;
  padding: 22px 24px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: #fff;
}

.book-summary-card span {
  display: block;
  margin-bottom: 10px;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--color-text-muted);
}

.book-summary-card strong {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-serif);
  font-size: 1.85rem;
  line-height: 1.1;
  color: var(--color-heading);
}

.book-summary-card small {
  color: var(--color-text-muted);
}


/* SECTION */

.book-section-header {
  margin-bottom: 18px;
}

.book-section-header h2 {
  margin: 0;
  font-size: 2rem;
}


/* EMPTY BOOK */

.book-empty-state {
  padding: 64px 28px;
  border: 1px dashed var(--color-border);
  border-radius: 16px;
  background: #fff;
  text-align: center;
}

.book-empty-state h2 {
  margin: 5px 0 12px;
}

.book-empty-state > p:not(.eyebrow) {
  max-width: 570px;
  margin: 0 auto 25px;
  color: var(--color-text-muted);
  line-height: 1.7;
}

.book-empty-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(47, 116, 85, .09);
  font-size: 1.45rem;
  color: var(--color-accent-strong);
}


/* INVESTMENT LIST */

.investment-book-list {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: #fff;
}

.investment-book-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(220px, .8fr) auto;
  align-items: center;
  gap: 24px;
  padding: 20px 22px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  transition: background .15s ease;
}

.investment-book-row:last-child {
  border-bottom: 0;
}

a.investment-book-row:hover {
  background: rgba(47, 116, 85, .035);
}

.investment-book-symbol {
  display: flex;
  align-items: center;
  gap: 14px;
}

.book-ticker-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(47, 116, 85, .10);
  font-weight: 800;
  color: var(--color-accent-strong);
}

.investment-book-symbol strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.15rem;
}

.investment-book-symbol span:not(.book-ticker-mark),
.investment-book-position span {
  display: block;
  color: var(--color-text-muted);
}

.investment-book-position {
  text-align: right;
}

.book-row-arrow {
  font-weight: 600;
  color: var(--color-accent-strong);
}


/* FORM */

.book-form-card {
  overflow: hidden;
  max-width: 980px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 35px rgba(18, 35, 27, .045);
}

.book-form-section {
  padding: 32px 34px;
  border-bottom: 1px solid var(--color-border);
}

.book-form-section-head {
  display: flex;
  gap: 16px;
  margin-bottom: 27px;
}

.book-form-section-head h2 {
  margin: 0 0 4px;
  font-size: 1.45rem;
}

.book-form-section-head p {
  margin: 0;
  color: var(--color-text-muted);
}

.book-step {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(47, 116, 85, .10);
  font-size: .73rem;
  font-weight: 800;
  color: var(--color-accent-strong);
}

.book-form-grid {
  display: grid;
  gap: 20px;
}

.book-form-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.book-form-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 20px;
}

.book-form-grid-small {
  margin-top: 24px;
}

.book-field {
  min-width: 0;
}

.book-field label {
  display: block;
  margin-bottom: 7px;
  font-size: .89rem;
  font-weight: 700;
  color: var(--color-heading);
}

.book-field-help {
  margin: -1px 0 9px;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.book-field input,
.book-field select,
.book-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 1px solid #d9ddd8;
  border-radius: 9px;
  background: #fff;
  font: inherit;
  color: var(--color-text);
  transition:
    border-color .15s ease,
    box-shadow .15s ease;
}

.book-field input:focus,
.book-field select:focus,
.book-field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(47, 116, 85, .10);
}

.book-field textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.55;
}

.book-money-field {
  position: relative;
}

.book-money-field > span {
  position: absolute;
  top: 50%;
  left: 13px;
  z-index: 1;
  transform: translateY(-50%);
  color: var(--color-text-muted);
}

.book-money-field input {
  padding-left: 27px;
}

.book-form-actions {
  display: flex;
  gap: 12px;
  padding: 24px 34px;
  background: rgba(247, 248, 246, .65);
}

.book-primary-action {
  min-width: 170px;
}

.book-field .errorlist {
  margin: 7px 0 0;
  padding: 0;
  list-style: none;
  font-size: .82rem;
  color: #a63737;
}


/* MOBILE */

@media (max-width: 760px) {
  .book-page {
    padding-top: 28px;
  }

  .book-dashboard-head {
    display: block;
  }

  .book-add-button {
    margin-top: 20px;
  }

  .book-summary-grid,
  .book-form-grid-2,
  .book-form-grid-3 {
    grid-template-columns: 1fr;
  }

  .book-summary-grid {
    gap: 10px;
    margin-bottom: 38px;
  }

  .book-summary-card {
    min-height: auto;
  }

  .book-form-section {
    padding: 25px 20px;
  }

  .book-form-actions {
    padding: 20px;
    flex-direction: column;
  }

  .book-form-actions .btn {
    justify-content: center;
    width: 100%;
  }

  .investment-book-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .investment-book-position {
    text-align: left;
  }

  .book-row-arrow {
    margin-top: 4px;
  }
}

/* Investment Book confidence + duration controls */

.book-confidence-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.book-confidence-head label {
  margin: 0;
}

.book-confidence-head strong {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--color-accent-strong);
}

.book-field input.book-confidence-range {
  width: 100%;
  padding: 0;
  border: 0;
  box-shadow: none;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.book-field input.book-confidence-range:focus {
  border: 0;
  box-shadow: none;
}

.book-range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: .76rem;
  color: var(--color-text-muted);
}

.book-duration-control {
  display: grid;
  grid-template-columns: minmax(90px, .7fr) minmax(130px, 1fr);
  gap: 10px;
}

@media (max-width: 520px) {
  .book-duration-control {
    grid-template-columns: 1fr 1fr;
  }
}


/* =========================================================================
   INVESTMENT BOOK — PRODUCT PREVIEW + AUTH
   ========================================================================= */

.book-preview-hero {
  padding: 82px 0 88px;
  background:
    linear-gradient(180deg, rgba(239, 246, 241, .8), rgba(255,255,255,0));
}

.book-preview-copy {
  max-width: 900px;
}

.book-preview-copy h1 {
  max-width: 850px;
  margin-bottom: 22px;
  font-size: clamp(2.6rem, 5vw, 4.8rem);
  line-height: 1.02;
}

.book-preview-lead {
  max-width: 760px;
  margin-bottom: 28px;
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.book-preview-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.book-preview-note {
  margin-top: 16px;
  font-size: .83rem;
  color: var(--color-text-muted);
}

.book-preview-section-head {
  max-width: 720px;
  margin-bottom: 30px;
}

.book-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.book-feature-card {
  min-height: 220px;
  padding: 28px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: #fff;
}

.book-feature-number {
  display: inline-block;
  margin-bottom: 32px;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--color-accent-strong);
}

.book-feature-card h3 {
  margin-bottom: 10px;
}

.book-feature-card p {
  margin: 0;
  line-height: 1.65;
  color: var(--color-text-muted);
}

.book-preview-philosophy {
  background: rgba(246, 248, 245, .8);
}

.book-preview-comparison {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
  max-width: 900px;
  margin: auto;
}

.book-preview-comparison > div:not(.book-preview-plus) {
  padding: 32px;
}

.book-preview-plus {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  color: var(--color-accent);
}

.book-preview-cta {
  max-width: 780px;
  padding: 56px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: #fff;
}

.book-preview-cta h2 {
  margin-bottom: 25px;
}


/* Investor authentication */

.book-auth-page {
  min-height: 70vh;
  padding: 70px 0 90px;
  background:
    linear-gradient(180deg, rgba(239, 246, 241, .7), rgba(255,255,255,0));
}

.book-auth-container {
  max-width: 540px;
}

.book-auth-card {
  padding: 38px 40px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 55px rgba(18, 35, 27, .06);
}

.book-auth-card h1 {
  margin-bottom: 8px;
}

.book-auth-intro {
  margin: 0 0 30px;
  color: var(--color-text-muted);
}

.book-auth-form {
  display: grid;
  gap: 20px;
}

.book-auth-help {
  margin-top: 6px;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.book-auth-submit {
  width: 100%;
  justify-content: center;
  margin-top: 6px;
}

.book-auth-switch {
  margin: 24px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-size: .9rem;
  color: var(--color-text-muted);
}

.book-auth-error {
  padding: 11px 13px;
  margin-bottom: 20px;
  border-radius: 8px;
  background: #fff1f1;
  color: #8e3030;
  font-size: .88rem;
}


@media (max-width: 760px) {
  .book-preview-hero {
    padding: 52px 0 58px;
  }

  .book-feature-grid {
    grid-template-columns: 1fr;
  }

  .book-preview-comparison {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .book-preview-plus {
    padding-left: 32px;
  }

  .book-preview-cta {
    padding: 35px 25px;
  }

  .book-auth-card {
    padding: 28px 22px;
  }
}

.book-inline-logout {
  display: inline-flex;
  margin: 0;
}

.book-dashboard-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.book-dashboard-actions form {
  margin: 0;
}

@media (max-width: 640px) {
  .book-dashboard-actions {
    width: 100%;
  }
}

.book-account-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 52px;
  padding-top: 22px;
  border-top: 1px solid var(--color-border);
  font-size: .84rem;
  color: var(--color-text-muted);
}

.book-account-footer form {
  margin: 0;
}

.book-signout-link {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  color: var(--color-accent-strong);
  cursor: pointer;
}

.book-signout-link:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .book-account-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Investment Book login remember-me checkbox */
.book-auth-form .book-field:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 9px;
}

.book-auth-form .book-field:has(input[type="checkbox"]) label {
  order: 2;
  margin: 0;
}

.book-auth-form .book-field:has(input[type="checkbox"]) input[type="checkbox"] {
  order: 1;
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--color-accent);
}


/* =========================================================================
   INVESTMENT BOOK — STOCK PICKER
   ========================================================================= */

.book-stock-picker {
  position: relative;
  margin-bottom: 28px;
}

.book-stock-search-control {
  position: relative;
}

.book-stock-search-icon {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: var(--color-text-muted);
  pointer-events: none;
}

.book-stock-search-control input {
  width: 100%;
  padding-left: 46px;
}

.book-stock-search-status {
  min-height: 20px;
  margin-top: 7px;
  font-size: .8rem;
  color: var(--color-text-muted);
}

.book-stock-results {
  position: absolute;
  z-index: 20;
  top: calc(100% - 6px);
  left: 0;
  right: 0;
  max-height: 390px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 20px 55px rgba(20, 32, 26, .13);
}

.book-stock-result {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.book-stock-result:last-child {
  border-bottom: 0;
}

.book-stock-result:hover,
.book-stock-result:focus {
  background: rgba(242, 247, 243, .9);
  outline: none;
}

.book-stock-result-mark,
.book-selected-stock-logo {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 11px;
  background: #f5f7f4;
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--color-accent-strong);
}

.book-stock-result-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 3px;
}

.book-stock-result-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.book-stock-result-top strong {
  color: var(--color-text);
}

.book-stock-result-top small {
  font-size: .72rem;
  color: var(--color-text-muted);
}

.book-stock-result-name {
  overflow: hidden;
  font-size: .87rem;
  color: var(--color-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-stock-no-results {
  padding: 18px;
  font-size: .88rem;
  color: var(--color-text-muted);
}

.book-selected-stock {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 15px 16px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: rgba(247, 250, 247, .8);
}

.book-selected-stock[hidden] {
  display: none;
}

.book-selected-stock-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.book-selected-stock-info {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 3px;
}

.book-selected-stock-info strong {
  font-size: .98rem;
}

.book-selected-stock-info span {
  overflow: hidden;
  font-size: .8rem;
  color: var(--color-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-stock-change {
  padding: 7px 9px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  color: var(--color-accent-strong);
  cursor: pointer;
}

.book-stock-change:hover {
  text-decoration: underline;
}

.book-manual-position {
  margin-top: 12px;
}

.book-manual-position-label {
  margin: 0 0 12px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}


@media (max-width: 640px) {
  .book-selected-stock {
    align-items: flex-start;
  }

  .book-stock-result-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
}

.book-selected-stock-logo img[hidden] {
  display: none !important;
}


/* Investment Book logos */

.book-ticker-mark {
  overflow: hidden;
}

.book-ticker-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.book-ticker-fallback {
  display: none;
  width: 100%;
  height: 100%;
  place-items: center;
}

.book-ticker-fallback.visible {
  display: grid;
}


.investment-detail-identity {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.investment-detail-logo {
  display: grid;
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: #f5f7f4;
}

.investment-detail-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.investment-detail-fallback {
  display: none;
  width: 100%;
  height: 100%;
  place-items: center;
  font-family: var(--font-serif);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--color-accent-strong);
}

.investment-detail-fallback.visible {
  display: grid;
}

@media (max-width: 640px) {
  .investment-detail-logo {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
  }
}

.book-dashboard-primary-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}


/* =========================================================================
   INVESTMENT BOOK — MARKET SCREENER
   ========================================================================= */

.screener-page {
  padding: 42px 0 80px;
}

.screener-container {
  max-width: 1500px;
}

.screener-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.screener-page-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.screener-layout {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  min-height: 620px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: #f8faf8;
}

.screener-sidebar {
  padding: 18px 12px;
  border-right: 1px solid var(--color-border);
  background: #fff;
}

.screener-sidebar-head {
  padding: 6px 10px 14px;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.screener-side-item {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.screener-side-item.active {
  background: #eff5f0;
  color: var(--color-accent-strong);
  font-weight: 700;
}

.screener-side-item small {
  color: var(--color-text-muted);
}

.screener-workspace {
  min-width: 0;
  padding: 14px;
}

.screener-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.screener-grid[data-count="2"],
.screener-grid[data-count="3"],
.screener-grid[data-count="4"],
.screener-grid[data-count="5"],
.screener-grid[data-count="6"] {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
}

.screener-grid[data-count="7"],
.screener-grid[data-count="8"],
.screener-grid[data-count="9"],
.screener-grid[data-count="10"],
.screener-grid[data-count="11"],
.screener-grid[data-count="12"],
.screener-grid[data-count="13"],
.screener-grid[data-count="14"],
.screener-grid[data-count="15"] {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
}

.screener-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 13px;
  background: #fff;
}

.screener-panel-toolbar {
  display: grid;
  grid-template-columns:
    minmax(100px, 1fr)
    minmax(125px, auto)
    34px;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid var(--color-border);
}

.screener-symbol-input,
.screener-chart-type {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  background: #fff;
  font: inherit;
}

.screener-remove {
  border: 0;
  border-radius: 7px;
  background: transparent;
  font-size: 1.25rem;
  cursor: pointer;
}

.screener-remove:hover {
  background: #f4f4f4;
}

.screener-chart-status {
  min-height: 22px;
  padding: 4px 11px 0;
  font-size: .75rem;
  color: var(--color-text-muted);
}

.screener-chart-shell {
  height: 380px;
}

.screener-chart {
  width: 100%;
  height: 100%;
}

.screener-table {
  height: 100%;
  overflow: auto;
}

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

.screener-table th,
.screener-table td {
  padding: 7px 9px;
  border-bottom: 1px solid var(--color-border);
  text-align: right;
  white-space: nowrap;
}

.screener-table th:first-child,
.screener-table td:first-child {
  text-align: left;
}

.screener-duration-row {
  display: flex;
  gap: 3px;
  padding: 8px 10px 10px;
  overflow-x: auto;
  border-top: 1px solid var(--color-border);
}

.screener-duration-row button {
  flex: 0 0 auto;
  padding: 5px 7px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: .7rem;
  color: var(--color-text-muted);
  cursor: pointer;
}

.screener-duration-row button:hover,
.screener-duration-row button.active {
  background: #edf4ef;
  color: var(--color-accent-strong);
  font-weight: 700;
}


@media (max-width: 1100px) {
  .screener-grid[data-count] {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .screener-grid[data-count="1"] {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 760px) {
  .screener-page-head {
    flex-direction: column;
  }

  .screener-layout {
    grid-template-columns: 1fr;
  }

  .screener-sidebar {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .screener-sidebar-head {
    display: none;
  }

  .screener-side-item {
    width: auto;
  }

  .screener-grid[data-count] {
    grid-template-columns: 1fr;
  }

  .screener-chart-shell {
    height: 330px;
  }
}

/* Investment Book dashboard primary actions */
.book-dashboard-head {
  align-items: flex-end;
}

.book-dashboard-primary-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 2px;
}

.book-dashboard-primary-actions .btn {
  min-height: 56px;
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.book-dashboard-primary-actions .btn-secondary {
  border: 1px solid var(--color-border);
  background: #ffffff;
  color: var(--color-accent-strong);
}

.book-dashboard-primary-actions .btn-secondary:hover {
  background: #f4f8f5;
  border-color: var(--color-accent);
}

.book-dashboard-primary-actions .btn-primary {
  min-width: 205px;
}

@media (max-width: 760px) {
  .book-dashboard-head {
    align-items: flex-start;
  }

  .book-dashboard-primary-actions {
    width: 100%;
    justify-content: flex-start;
    margin-top: 8px;
  }

  .book-dashboard-primary-actions .btn {
    min-height: 50px;
    padding: 0 20px;
  }
}

/* Final dashboard action alignment */
.book-dashboard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.book-dashboard-primary-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.book-dashboard-primary-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 56px;
  min-width: 180px;
  padding: 0 26px;

  border: 1px solid var(--color-accent);
  border-radius: 10px;

  background: var(--color-accent);
  color: #fff;

  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;

  box-sizing: border-box;
}

.book-dashboard-primary-actions .btn:hover {
  background: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
  color: #fff;
}

.book-dashboard-primary-actions .book-add-button {
  min-width: 205px;
}

@media (max-width: 760px) {
  .book-dashboard-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .book-dashboard-primary-actions {
    width: 100%;
  }

  .book-dashboard-primary-actions .btn {
    flex: 1;
    min-width: 0;
  }
}

/* Dashboard action buttons: exact alignment */
.book-dashboard-primary-actions .book-add-button {
  margin-top: 0;
}

.book-dashboard-primary-actions .btn {
  height: 56px;
  min-height: 56px;
  padding: 0 26px;
  margin-top: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 10px;
  color: #fff;

  font-weight: 700;
  line-height: 1;
  box-sizing: border-box;
}

.book-dashboard-primary-actions .btn:hover {
  background: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
  color: #fff;
}


/* =========================================================================
   SCREENER V2 — FIXED SINGLE-SCREEN WORKSPACE
   ========================================================================= */

.screener-page {
  height: calc(100vh - 74px);
  min-height: 0;
  padding: 14px 18px 16px;

  display: flex;
  flex-direction: column;

  overflow: hidden;
  background: #f7f8f6;
}

.screener-topbar {
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 0 4px 12px;
}

.screener-topbar .eyebrow {
  margin-bottom: 2px;
}

.screener-topbar h1 {
  margin: 0;
  font-size: 1.8rem;
}

.screener-page-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

#screener-chart-count {
  margin-right: 4px;

  font-size: .78rem;
  color: var(--color-text-muted);
}


/* Main fixed grid */

.screener-grid {
  --screener-columns: 1;
  --screener-rows: 1;

  flex: 1 1 auto;

  min-height: 0;
  min-width: 0;

  display: grid;

  grid-template-columns:
    repeat(
      var(--screener-columns),
      minmax(0, 1fr)
    );

  grid-template-rows:
    repeat(
      var(--screener-rows),
      minmax(0, 1fr)
    );

  gap: 8px;

  overflow: hidden;
}


/* Individual panel */

.screener-panel {
  min-width: 0;
  min-height: 0;

  height: 100%;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border: 1px solid var(--color-border);
  border-radius: 10px;

  background: #fff;
}


/* Top toolbar */

.screener-panel-toolbar {
  position: relative;

  flex: 0 0 auto;

  display: grid;

  grid-template-columns:
    minmax(90px, 1fr)
    105px
    30px;

  gap: 6px;

  padding: 7px;

  border-bottom:
    1px solid var(--color-border);
}


.screener-symbol-search {
  position: relative;
  min-width: 0;
}


.screener-symbol-input,
.screener-chart-type {
  width: 100%;
  height: 36px;

  padding: 0 9px;

  border:
    1px solid var(--color-border);

  border-radius: 6px;

  background: #fff;

  font: inherit;
  font-size: .82rem;

  box-sizing: border-box;
}


.screener-remove {
  width: 30px;
  height: 36px;

  padding: 0;

  display: grid;
  place-items: center;

  border: 0;
  border-radius: 6px;

  background: transparent;

  font-size: 1.15rem;

  cursor: pointer;
}


.screener-remove:hover {
  background: #f2f3f1;
}


/* Search dropdown */

.screener-symbol-results {
  position: absolute;

  z-index: 200;

  top: calc(100% + 4px);
  left: 0;
  right: 0;

  max-height: 220px;

  overflow-y: auto;

  border:
    1px solid var(--color-border);

  border-radius: 8px;

  background: #fff;

  box-shadow:
    0 12px 30px rgba(20, 30, 25, .13);
}


.screener-symbol-result {
  width: 100%;

  display: flex;
  flex-direction: column;

  gap: 2px;

  padding: 9px 10px;

  border: 0;
  border-bottom:
    1px solid var(--color-border);

  background: #fff;

  text-align: left;

  cursor: pointer;
}


.screener-symbol-result:hover {
  background: #f2f6f3;
}


.screener-symbol-result strong {
  font-size: .8rem;
}


.screener-symbol-result span {
  overflow: hidden;

  color: var(--color-text-muted);

  font-size: .71rem;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* Tiny status row */

.screener-chart-status {
  flex: 0 0 18px;

  min-height: 18px;

  padding:
    2px 8px 0;

  font-size: .68rem;

  color: var(--color-text-muted);
}


/* Chart takes all remaining space */

.screener-chart-shell {
  flex: 1 1 auto;

  min-height: 0;

  height: auto;

  overflow: hidden;
}


.screener-chart {
  width: 100%;
  height: 100%;
}


.screener-table {
  width: 100%;
  height: 100%;

  overflow: auto;
}


/* Duration row */

.screener-duration-row {
  flex: 0 0 auto;

  display: flex;

  gap: 1px;

  padding: 5px 6px;

  overflow: hidden;

  border-top:
    1px solid var(--color-border);
}


.screener-duration-row button {
  min-width: 0;

  flex: 1 1 auto;

  padding: 4px 2px;

  border: 0;
  border-radius: 4px;

  background: transparent;

  font-size: clamp(.52rem, .65vw, .68rem);

  color: var(--color-text-muted);

  cursor: pointer;
}


.screener-duration-row button.active {
  background: #e8f1eb;
  color: var(--color-accent-strong);

  font-weight: 700;
}


/* As panels become small, simplify them */

@media (max-height: 750px) {
  .screener-page {
    padding-top: 8px;
  }

  .screener-topbar {
    padding-bottom: 7px;
  }

  .screener-topbar h1 {
    font-size: 1.45rem;
  }
}


@media (max-width: 760px) {
  .screener-page {
    height: calc(100vh - 64px);

    padding:
      8px 8px 10px;
  }

  .screener-topbar {
    gap: 8px;
  }

  .screener-topbar h1 {
    font-size: 1.25rem;
  }

  .screener-topbar .eyebrow {
    display: none;
  }

  #screener-chart-count {
    display: none;
  }

  .screener-page-actions .btn {
    padding:
      8px 10px;

    font-size: .75rem;
  }
}

/* Screener compact toolbar */
.screener-topbar {
  min-height: 48px;
  padding: 0 4px 8px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;
}

.screener-topbar h1 {
  margin: 0;

  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;

  color: var(--color-text);
}

.screener-page-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.screener-chart-count {
  padding: 0 7px;

  font-size: .72rem;
  font-weight: 600;

  color: var(--color-text-muted);
  white-space: nowrap;
}

.screener-toolbar-icon {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 1px solid var(--color-border);
  border-radius: 7px;

  background: #fff;
  color: var(--color-text);

  font-size: 1rem;
  cursor: pointer;
}

.screener-toolbar-icon:hover {
  background: #f1f5f2;
}

.screener-toolbar-action {
  height: 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 12px;

  border: 1px solid var(--color-border);
  border-radius: 7px;

  background: #fff;
  color: var(--color-accent-strong);

  font-family: var(--font-sans);
  font-size: .76rem;
  font-weight: 700;

  text-decoration: none;
  white-space: nowrap;

  cursor: pointer;
}

.screener-toolbar-action:hover {
  background: #f1f5f2;
  color: var(--color-accent-strong);
}

.screener-add-action {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
}

.screener-add-action:hover {
  border-color: var(--color-accent-strong);
  background: var(--color-accent-strong);
  color: #fff;
}

@media (max-width: 600px) {
  .screener-toolbar-action {
    padding: 0 9px;
  }

  .screener-chart-count {
    display: none;
  }
}

/* Screener dark theme */
body.screener-dark .screener-page {
  background: #0d100f;
}

body.screener-dark .screener-topbar h1 {
  color: #f2f5f3;
}

body.screener-dark .screener-panel {
  background: #111514;
  border-color: #303733;
}

body.screener-dark .screener-panel-toolbar {
  border-color: #303733;
}

body.screener-dark .screener-symbol-input,
body.screener-dark .screener-chart-type {
  background: #181d1b;
  border-color: #343c38;
  color: #edf2ef;
}

body.screener-dark .screener-symbol-results,
body.screener-dark .screener-symbol-result {
  background: #181d1b;
  border-color: #343c38;
  color: #edf2ef;
}

body.screener-dark .screener-symbol-result:hover {
  background: #222925;
}

body.screener-dark .screener-symbol-result span,
body.screener-dark .screener-chart-status,
body.screener-dark .screener-chart-count {
  color: #9ca8a2;
}

body.screener-dark .screener-duration-row {
  border-color: #303733;
}

body.screener-dark .screener-duration-row button {
  color: #9ca8a2;
}

body.screener-dark .screener-duration-row button.active {
  background: #24352c;
  color: #d6ebe0;
}

body.screener-dark .screener-toolbar-icon,
body.screener-dark .screener-toolbar-action {
  background: #181d1b;
  border-color: #343c38;
  color: #e3ebe7;
}

body.screener-dark .screener-add-action {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}


/* =========================================================================
   INVESTMENT BOOK — ONE-SCREEN MARKETING PAGE
   ========================================================================= */

.book-marketing-page {
  min-height: calc(100vh - 74px);
  padding: 18px;

  display: flex;
  align-items: stretch;

  background:
    radial-gradient(
      circle at top right,
      rgba(53, 120, 82, .08),
      transparent 34%
    ),
    #f7f5ef;
}

.book-marketing-shell {
  width: min(1500px, 100%);
  min-height: calc(100vh - 110px);

  margin: 0 auto;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border: 1px solid rgba(36, 64, 48, .12);
  border-radius: 22px;

  background: rgba(255, 255, 255, .78);

  box-shadow:
    0 24px 70px rgba(28, 48, 36, .08);

  backdrop-filter: blur(12px);
}


.book-marketing-topbar {
  min-height: 54px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 24px;

  border-bottom: 1px solid rgba(36, 64, 48, .10);
}


.book-marketing-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  font-family: var(--font-sans);
  font-size: .82rem;
  font-weight: 800;

  letter-spacing: .02em;

  color: var(--color-text);
}


.book-marketing-brand-dot {
  width: 9px;
  height: 9px;

  border-radius: 50%;

  background: var(--color-accent);

  box-shadow:
    0 0 0 5px rgba(52, 115, 77, .10);
}


.book-marketing-top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}


.book-marketing-link {
  color: var(--color-accent-strong);

  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 700;

  text-decoration: none;
}


.book-marketing-link:hover {
  text-decoration: underline;
}


.book-marketing-main {
  flex: 1 1 auto;

  min-height: 0;

  display: grid;
  grid-template-columns:
    minmax(0, .95fr)
    minmax(460px, 1.05fr);

  gap: clamp(30px, 5vw, 76px);

  align-items: center;

  padding:
    clamp(34px, 5vw, 72px)
    clamp(30px, 5vw, 78px);
}


.book-marketing-copy {
  min-width: 0;
}


.book-marketing-kicker {
  margin: 0 0 14px;

  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 800;

  letter-spacing: .12em;
  text-transform: uppercase;

  color: var(--color-accent-strong);
}


.book-marketing-copy h1 {
  max-width: 760px;

  margin: 0;

  font-size:
    clamp(2.7rem, 4.8vw, 5.8rem);

  line-height: .98;
  letter-spacing: -.055em;

  color: var(--color-text);
}


.book-marketing-lead {
  max-width: 680px;

  margin:
    clamp(22px, 3vw, 34px)
    0
    0;

  font-size:
    clamp(.98rem, 1.4vw, 1.15rem);

  line-height: 1.7;

  color: var(--color-text-muted);
}


.book-marketing-actions {
  display: flex;
  align-items: center;
  gap: 10px;

  margin-top:
    clamp(22px, 3vw, 34px);

  flex-wrap: wrap;
}


.book-marketing-primary,
.book-marketing-secondary {
  min-height: 48px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 20px;

  border-radius: 9px;

  font-family: var(--font-sans);
  font-size: .82rem;
  font-weight: 800;

  text-decoration: none;

  white-space: nowrap;
}


.book-marketing-primary {
  border: 1px solid var(--color-accent);

  background: var(--color-accent);
  color: #fff;
}


.book-marketing-primary:hover {
  border-color: var(--color-accent-strong);

  background: var(--color-accent-strong);
  color: #fff;
}


.book-marketing-secondary {
  border: 1px solid var(--color-border);

  background: rgba(255, 255, 255, .72);
  color: var(--color-accent-strong);
}


.book-marketing-secondary:hover {
  border-color: var(--color-accent);

  background: #fff;
}


.book-marketing-capabilities {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 18px 22px;

  margin-top:
    clamp(28px, 4vw, 46px);
}


.book-marketing-capability {
  min-width: 0;
}


.book-marketing-capability strong {
  display: block;

  margin-bottom: 4px;

  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 800;

  color: var(--color-text);
}


.book-marketing-capability span {
  display: block;

  max-width: 250px;

  font-size: .78rem;
  line-height: 1.5;

  color: var(--color-text-muted);
}


/* Product preview */

.book-marketing-preview {
  min-width: 0;

  overflow: hidden;

  border: 1px solid rgba(31, 67, 46, .13);
  border-radius: 18px;

  background: #fff;

  box-shadow:
    0 26px 55px rgba(32, 55, 40, .12);
}


.book-marketing-preview-head {
  min-height: 62px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 20px;

  border-bottom: 1px solid #edf0ec;
}


.book-marketing-preview-head > div {
  display: flex;
  align-items: baseline;
  gap: 9px;
}


.book-marketing-symbol {
  font-family: var(--font-sans);
  font-size: .94rem;
  font-weight: 900;

  color: var(--color-text);
}


.book-marketing-company {
  font-size: .75rem;

  color: var(--color-text-muted);
}


.book-marketing-range {
  padding: 5px 8px;

  border-radius: 6px;

  background: #edf4ef;

  font-family: var(--font-sans);
  font-size: .68rem;
  font-weight: 800;

  color: var(--color-accent-strong);
}


.book-marketing-chart {
  height: clamp(210px, 27vh, 330px);

  padding: 18px 18px 8px;

  color: var(--color-accent);

  background:
    linear-gradient(
      to bottom,
      rgba(51, 112, 75, .025),
      transparent
    );
}


.book-marketing-chart svg {
  width: 100%;
  height: 100%;
}


.book-marketing-chart-line {
  fill: none;

  stroke: currentColor;
  stroke-width: 4;

  vector-effect: non-scaling-stroke;
}


.book-marketing-chart-fill {
  fill: url(#bookMarketingFill);
}


.book-marketing-preview-metrics {
  display: grid;
  grid-template-columns:
    1.3fr .7fr .8fr;

  gap: 1px;

  border-top: 1px solid #edf0ec;

  background: #edf0ec;
}


.book-marketing-preview-metrics > div {
  min-width: 0;

  padding: 14px 16px;

  background: #fff;
}


.book-marketing-preview-metrics span {
  display: block;

  margin-bottom: 5px;

  font-size: .66rem;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: .06em;

  color: var(--color-text-muted);
}


.book-marketing-preview-metrics strong {
  display: block;

  overflow: hidden;

  font-size: .8rem;
  font-weight: 800;

  color: var(--color-text);

  text-overflow: ellipsis;
  white-space: nowrap;
}


.book-marketing-preview-footer {
  min-height: 44px;

  display: flex;
  align-items: center;
  gap: 18px;

  padding: 0 16px;

  border-top: 1px solid #edf0ec;

  font-size: .68rem;
  font-weight: 700;

  color: var(--color-text-muted);
}


.book-marketing-bottom {
  min-height: 46px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  padding: 0 24px;

  border-top: 1px solid rgba(36, 64, 48, .10);

  font-size: .7rem;

  color: var(--color-text-muted);
}


.book-marketing-disclaimer {
  text-align: right;
}


/* Keep normal site footer compact on the Book marketing page */
.book-marketing-page + .site-footer {
  display: none;
}


/* Responsive */

@media (max-width: 1050px) {
  .book-marketing-main {
    grid-template-columns:
      minmax(0, .9fr)
      minmax(400px, 1.1fr);

    gap: 30px;

    padding:
      34px 32px;
  }

  .book-marketing-copy h1 {
    font-size:
      clamp(2.5rem, 5vw, 4.4rem);
  }
}


@media (max-width: 820px) {
  .book-marketing-page {
    min-height: auto;

    padding: 10px;
  }

  .book-marketing-shell {
    min-height: auto;
  }

  .book-marketing-main {
    grid-template-columns: 1fr;

    padding:
      30px 22px;

    gap: 30px;
  }

  .book-marketing-preview {
    max-width: 650px;
  }

  .book-marketing-bottom {
    align-items: flex-start;

    flex-direction: column;

    padding:
      12px 20px;
  }

  .book-marketing-disclaimer {
    text-align: left;
  }
}


@media (max-width: 560px) {
  .book-marketing-topbar {
    padding:
      0 16px;
  }

  .book-marketing-main {
    padding:
      26px 18px;
  }

  .book-marketing-copy h1 {
    font-size:
      clamp(2.3rem, 13vw, 3.5rem);
  }

  .book-marketing-capabilities {
    grid-template-columns: 1fr;
  }

  .book-marketing-preview-metrics {
    grid-template-columns: 1fr;
  }

  .book-marketing-preview-footer {
    gap: 10px;

    overflow-x: auto;

    white-space: nowrap;
  }
}


/* =========================================================================
   INVESTMENT BOOK — COMPACT PRODUCT MARKETING
   ========================================================================= */

.book-product-page {
  height: calc(100dvh - 64px);
  min-height: 0;

  padding: 14px 22px;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  box-sizing: border-box;

  background:
    radial-gradient(
      circle at 86% 18%,
      rgba(55, 122, 80, .09),
      transparent 29%
    ),
    #f7f5ef;
}


.book-product-shell {
  width: min(1240px, 100%);

  flex: 1 1 auto;
  min-height: 0;

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    minmax(0, .92fr)
    minmax(0, 1.08fr);

  gap: clamp(30px, 5vw, 68px);

  align-items: center;

  padding: 22px 28px;

  overflow: hidden;

  box-sizing: border-box;
}


.book-product-left,
.book-product-right {
  min-width: 0;
  min-height: 0;
}


.book-product-label {
  margin: 0 0 10px;

  font-family: var(--font-sans);
  font-size: .66rem;
  font-weight: 800;

  letter-spacing: .14em;

  color: var(--color-accent-strong);
}


.book-product-left h1 {
  margin: 0;

  max-width: 670px;

  font-size:
    clamp(2.5rem, 4.2vw, 4.65rem);

  line-height: .98;

  letter-spacing: -.05em;

  color: var(--color-text);
}


.book-product-description {
  max-width: 620px;

  margin: 18px 0 0;

  font-size:
    clamp(.88rem, 1.05vw, 1rem);

  line-height: 1.58;

  color: var(--color-text-muted);
}


.book-product-actions {
  display: flex;

  align-items: center;

  gap: 9px;

  margin-top: 20px;

  flex-wrap: wrap;
}


.book-product-primary,
.book-product-secondary {
  min-height: 43px;

  padding: 0 17px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius: 8px;

  font-family: var(--font-sans);

  font-size: .75rem;

  font-weight: 800;

  text-decoration: none;

  box-sizing: border-box;

  white-space: nowrap;
}


.book-product-primary {
  border: 1px solid var(--color-accent);

  background: var(--color-accent);

  color: #fff;
}


.book-product-primary:hover {
  background: var(--color-accent-strong);

  border-color: var(--color-accent-strong);

  color: #fff;
}


.book-product-secondary {
  border: 1px solid var(--color-border);

  background: rgba(255, 255, 255, .7);

  color: var(--color-accent-strong);
}


.book-product-secondary:hover {
  background: #fff;

  border-color: var(--color-accent);
}


.book-product-features {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 14px 22px;

  margin-top: 26px;
}


.book-product-features div {
  min-width: 0;
}


.book-product-features strong {
  display: block;

  margin-bottom: 3px;

  font-family: var(--font-sans);

  font-size: .72rem;

  font-weight: 800;

  color: var(--color-text);
}


.book-product-features span {
  display: block;

  max-width: 240px;

  font-size: .68rem;

  line-height: 1.42;

  color: var(--color-text-muted);
}


/* Right product preview */

.book-workspace-card {
  width: 100%;

  max-width: 620px;

  margin-left: auto;

  overflow: hidden;

  border: 1px solid rgba(39, 75, 52, .13);

  border-radius: 17px;

  background: #fff;

  box-shadow:
    0 25px 60px rgba(29, 54, 38, .13);
}


.book-workspace-head {
  height: 52px;

  padding: 0 15px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-bottom: 1px solid #edf0ed;
}


.book-workspace-head > div {
  display: flex;

  align-items: baseline;

  gap: 8px;
}


.book-workspace-title {
  font-size: .75rem;

  font-weight: 800;

  color: var(--color-text);
}


.book-workspace-subtitle {
  font-size: .61rem;

  color: var(--color-text-muted);
}


.book-workspace-status {
  padding: 4px 7px;

  border-radius: 5px;

  background: #edf5ef;

  font-size: .62rem;

  font-weight: 800;

  color: var(--color-accent-strong);
}


.book-workspace-grid {
  display: grid;

  grid-template-columns:
    1.6fr 1fr;

  grid-template-rows:
    1fr 1fr;

  gap: 1px;

  height: clamp(240px, 35vh, 350px);

  background: #edf0ed;
}


.book-mini-chart {
  min-width: 0;

  padding: 13px;

  overflow: hidden;

  background: #fff;
}


.book-mini-chart-main {
  grid-row: 1 / 3;
}


.book-mini-head {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;
}


.book-mini-head > div {
  display: flex;

  align-items: baseline;

  gap: 7px;
}


.book-mini-head strong {
  font-size: .68rem;

  font-weight: 800;

  color: var(--color-text);
}


.book-mini-head span {
  font-size: .58rem;

  color: var(--color-text-muted);
}


.book-mini-positive {
  color: #2f7b50 !important;

  font-weight: 800;
}


.book-mini-negative {
  color: #b75151 !important;

  font-weight: 800;
}


.book-mini-svg {
  width: 100%;

  height: calc(100% - 24px);

  margin-top: 5px;
}


/* Small abstract second chart */

.book-mini-bars {
  height: calc(100% - 24px);

  display: flex;

  align-items: flex-end;

  gap: 5px;

  padding-top: 12px;
}


.book-mini-bars i {
  flex: 1;

  display: block;

  border-radius: 2px 2px 0 0;

  background: #71a487;
}


.book-mini-bars i:nth-child(1) { height: 32%; }
.book-mini-bars i:nth-child(2) { height: 45%; }
.book-mini-bars i:nth-child(3) { height: 38%; }
.book-mini-bars i:nth-child(4) { height: 61%; }
.book-mini-bars i:nth-child(5) { height: 55%; }
.book-mini-bars i:nth-child(6) { height: 73%; }
.book-mini-bars i:nth-child(7) { height: 68%; }
.book-mini-bars i:nth-child(8) { height: 86%; }


.book-mini-line-down {
  position: relative;

  height: calc(100% - 24px);

  margin-top: 12px;

  overflow: hidden;
}


.book-mini-line-down::before {
  content: "";

  position: absolute;

  width: 130%;

  height: 2px;

  left: -10%;

  top: 42%;

  background: #c95a5a;

  transform: rotate(12deg);

  transform-origin: center;
}


/* Alert marketing */

.book-alert-preview {
  min-height: 58px;

  padding: 9px 13px;

  display: grid;

  grid-template-columns:
    32px minmax(0, 1fr) auto;

  gap: 9px;

  align-items: center;

  border-top: 1px solid #edf0ed;
}


.book-alert-icon {
  width: 30px;

  height: 30px;

  display: grid;

  place-items: center;

  border-radius: 8px;

  background: #eef5f0;

  color: var(--color-accent-strong);

  font-weight: 900;
}


.book-alert-preview strong {
  display: block;

  margin-bottom: 2px;

  font-size: .68rem;
}


.book-alert-preview div span {
  display: block;

  font-size: .61rem;

  color: var(--color-text-muted);
}


.book-alert-coming {
  padding: 4px 6px;

  border: 1px solid #dfe8e1;

  border-radius: 5px;

  font-size: .55rem;

  font-weight: 800;

  color: var(--color-accent-strong);

  white-space: nowrap;
}


.book-alert-demo {
  display: grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items: center;

  gap: 8px;

  padding: 0 13px 12px;
}


.book-alert-red,
.book-alert-green {
  min-height: 29px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 6px;

  font-size: .58rem;

  font-weight: 800;
}


.book-alert-red {
  background: #fbefef;

  color: #a54c4c;
}


.book-alert-green {
  background: #eaf5ed;

  color: #297447;
}


.book-alert-arrow {
  font-size: .72rem;

  color: var(--color-text-muted);
}


/* Trust strip */

.book-product-trust {
  width: min(1180px, calc(100% - 44px));

  flex: 0 0 auto;

  min-height: 44px;

  margin: 0 auto 4px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: clamp(18px, 4vw, 48px);

  padding: 8px 18px;

  border: 1px solid #dce9df;

  border-radius: 11px;

  background: #edf6ef;

  color: #286b43;

  box-sizing: border-box;
}


.book-product-trust span {
  font-family: var(--font-sans);

  font-size:
    clamp(.66rem, .8vw, .78rem);

  font-weight: 750;

  white-space: nowrap;
}


/*
 * Removed: the desktop scroll lock that used to live here
 * (@media (min-width: 821px) { html:has(.book-product-page),
 * body:has(.book-product-page) { overflow: hidden; } }).
 *
 * It belonged to the abandoned "lock /book/ to one viewport height"
 * design. That height lock is gone, but the scroll lock outlived it and
 * was making 125-253px of page content unreachable on desktop.
 * /book/ now uses normal document scrolling.
 */


/* Short desktop screens */

@media (min-width: 821px) and (max-height: 800px) {

  .book-product-page {
    padding-top: 8px;

    padding-bottom: 8px;
  }

  .book-product-shell {
    padding-top: 12px;

    padding-bottom: 12px;
  }

  .book-product-left h1 {
    font-size:
      clamp(2.25rem, 3.8vw, 3.8rem);
  }

  .book-product-description {
    margin-top: 12px;
  }

  .book-product-actions {
    margin-top: 14px;
  }

  .book-product-features {
    margin-top: 18px;

    gap: 10px 18px;
  }

  .book-workspace-grid {
    height: 245px;
  }

}


/* Mobile can naturally scroll */

@media (max-width: 820px) {

  .book-product-page {
    height: auto;

    min-height: calc(100dvh - 60px);

    overflow: visible;
  }

  .book-product-shell {
    grid-template-columns: 1fr;

    overflow: visible;

    padding: 25px 12px;

    gap: 28px;
  }

  .book-product-right {
    width: 100%;
  }

  .book-workspace-card {
    margin: 0 auto;
  }

  .book-product-trust {
    width: calc(100% - 16px);

    flex-direction: column;

    align-items: flex-start;

    gap: 6px;

    padding: 12px 14px;
  }

  .book-product-trust span {
    white-space: normal;
  }

}


@media (max-width: 540px) {

  .book-product-left h1 {
    font-size: 2.55rem;
  }

  .book-product-features {
    grid-template-columns: 1fr;
  }

  .book-workspace-grid {
    height: 300px;

    grid-template-columns: 1fr;
  }

  .book-mini-chart-main {
    grid-row: auto;
  }

  .book-mini-chart:not(.book-mini-chart-main) {
    display: none;
  }

}

/* Investment Book marketing page: larger desktop presentation */
@media (min-width: 821px) {

  .book-product-page {
    padding: 10px 18px 12px;
  }

  .book-product-shell {
    width: min(1380px, 100%);

    grid-template-columns:
      minmax(0, .96fr)
      minmax(0, 1.12fr);

    gap: clamp(42px, 5vw, 82px);

    padding:
      clamp(28px, 3.5vh, 48px)
      clamp(26px, 3vw, 48px);
  }

  .book-product-left h1 {
    max-width: 720px;

    font-size:
      clamp(3.15rem, 4.9vw, 5.35rem);

    line-height: .96;
  }

  .book-product-description {
    max-width: 680px;

    margin-top: 22px;

    font-size:
      clamp(.96rem, 1.15vw, 1.08rem);

    line-height: 1.62;
  }

  .book-product-actions {
    margin-top: 24px;
  }

  .book-product-primary,
  .book-product-secondary {
    min-height: 46px;

    padding: 0 20px;

    font-size: .8rem;
  }

  .book-product-features {
    margin-top: 30px;

    gap: 18px 28px;
  }

  .book-product-features strong {
    font-size: .77rem;
  }

  .book-product-features span {
    max-width: 270px;

    font-size: .72rem;
  }

  .book-workspace-card {
    max-width: 690px;
  }

  .book-workspace-head {
    height: 58px;

    padding: 0 18px;
  }

  .book-workspace-title {
    font-size: .82rem;
  }

  .book-workspace-subtitle {
    font-size: .66rem;
  }

  .book-workspace-status {
    font-size: .67rem;

    padding: 5px 8px;
  }

  .book-workspace-grid {
    height: clamp(300px, 39vh, 390px);
  }

  .book-mini-chart {
    padding: 15px;
  }

  .book-mini-head strong {
    font-size: .72rem;
  }

  .book-mini-head span {
    font-size: .62rem;
  }

  .book-alert-preview {
    min-height: 64px;

    padding: 10px 15px;
  }

  .book-alert-preview strong {
    font-size: .73rem;
  }

  .book-alert-preview div span {
    font-size: .65rem;
  }

  .book-alert-demo {
    padding:
      0 15px 14px;
  }

  .book-alert-red,
  .book-alert-green {
    min-height: 32px;

    font-size: .62rem;
  }

  .book-product-trust {
    width: min(1300px, calc(100% - 36px));

    min-height: 48px;

    margin-bottom: 2px;

    gap: clamp(28px, 5vw, 64px);
  }

  .book-product-trust span {
    font-size:
      clamp(.7rem, .85vw, .82rem);
  }
}


/* =========================================================
   Investment Book UI Polish - August 2026
   ========================================================= */


/* ---------- Investment logos ---------- */

.book-ticker-mark {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: #ffffff;
}

.book-ticker-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 5px;
  box-sizing: border-box;
}


/* ---------- Back navigation ---------- */

.book-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 24px;
  color: #5c6b63;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 650;
  text-decoration: none;
  transition:
    color 160ms ease,
    transform 160ms ease;
}

.book-back-link:hover {
  color: #1f6b45;
  transform: translateX(-2px);
}


/* ---------- Investment detail header ---------- */

.investment-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
}

.investment-detail-identity {
  display: flex;
  align-items: center;
  gap: 22px;
}

.investment-detail-logo {
  width: 86px;
  height: 86px;
  flex: 0 0 86px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #e2e8e4;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 6px 20px rgba(28, 50, 38, 0.06);
}

.investment-detail-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 10px;
  box-sizing: border-box;
}

.investment-detail-fallback {
  display: none;
  place-items: center;
  width: 100%;
  height: 100%;
  background: #edf5ef;
  color: #276c45;
  font-family: var(--font-sans);
  font-size: 1.8rem;
  font-weight: 800;
}

.investment-detail-fallback.visible {
  display: grid;
}

.investment-detail-heading .eyebrow {
  margin-bottom: 5px;
}

.investment-detail-heading h1 {
  margin: 0;
}

.investment-detail-company {
  margin: 5px 0;
  color: #47584f;
  font-size: 1.08rem;
}

.investment-detail-position {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 13px;
  color: #66736c;
  font-family: var(--font-sans);
  font-size: 0.9rem;
}

.investment-detail-position strong {
  color: #26362e;
}


/* ---------- Thesis ---------- */

.investment-thesis-card {
  min-width: 0;
}

.investment-thesis-metrics {
  display: grid;
  gap: 24px;
}

.investment-confidence-value {
  font-size: 1.25rem;
}


/* ---------- Section headings ---------- */

.investment-section-head {
  margin-bottom: 18px;
}


/* ---------- Decision history ---------- */

.decision-history {
  overflow: hidden;
  border: 1px solid #e0e7e2;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 6px 22px rgba(25, 46, 34, 0.04);
}

.decision-history-header,
.decision-history-row {
  display: grid;
  grid-template-columns:
    minmax(90px, 0.65fr)
    minmax(110px, 0.85fr)
    minmax(145px, 1fr)
    minmax(220px, 2.2fr)
    minmax(90px, 0.65fr);
  align-items: center;
  gap: 18px;
}

.decision-history-header {
  padding: 12px 20px;
  border-bottom: 1px solid #e4e9e6;
  background: #f7f9f7;
  color: #7a867f;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.decision-history-row {
  min-height: 82px;
  padding: 16px 20px;
  border-bottom: 1px solid #edf0ee;
}

.decision-history-row:last-child {
  border-bottom: 0;
}

.decision-history-date,
.decision-history-position,
.decision-history-reason,
.decision-history-confidence {
  min-width: 0;
  color: #536159;
  font-family: var(--font-sans);
  font-size: 0.87rem;
}

.decision-history-position {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.decision-history-position strong {
  color: #26362e;
}

.decision-history-reason {
  overflow-wrap: anywhere;
  line-height: 1.45;
}

.decision-history-confidence {
  font-weight: 700;
  color: #34493d;
}


/* ---------- Decision action colors ---------- */

.decision-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  padding: 6px 10px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.045em;
}

.decision-action-buy {
  color: #17683b;
  background: #e4f5ea;
}

.decision-action-add {
  color: #0e7067;
  background: #e0f5f1;
}

.decision-action-sell {
  color: #a42d2d;
  background: #fde9e9;
}

.decision-action-reduce {
  color: #a65020;
  background: #fff0e5;
}


/* ---------- Empty inline state ---------- */

.book-empty-inline {
  padding: 22px;
  border: 1px dashed #d4ddd7;
  border-radius: 12px;
  background: #fafbfa;
  color: #738078;
  font-family: var(--font-sans);
  font-size: 0.9rem;
}


/* =========================================================
   Add Decision page
   ========================================================= */

.book-decision-page {
  background:
    linear-gradient(
      180deg,
      rgba(246, 249, 247, 0.78),
      rgba(255, 255, 255, 0)
    );
}

.book-decision-container {
  max-width: 920px;
}

.book-decision-heading {
  max-width: 720px;
  margin-bottom: 28px;
}

.book-decision-heading h1 {
  margin-bottom: 8px;
}

.book-decision-heading .lead {
  max-width: 680px;
  margin-bottom: 0;
}


/* ---------- Decision form card ---------- */

.book-decision-form {
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid #dde5df;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 36px rgba(28, 48, 36, 0.06);
}

.book-decision-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 24px;
}

.book-decision-form .book-form-field {
  min-width: 0;
}

.book-decision-form .book-form-field > label,
.book-confidence-heading label {
  display: block;
  margin-bottom: 8px;
  color: #24372d;
  font-family: var(--font-sans);
  font-size: 0.83rem;
  font-weight: 750;
}

.book-decision-form input:not([type="range"]),
.book-decision-form select,
.book-decision-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #cfd9d2;
  border-radius: 10px;
  background: #ffffff;
  color: #26362e;
  font: inherit;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
}

.book-decision-form input:not([type="range"]),
.book-decision-form select {
  min-height: 48px;
  padding: 10px 13px;
}

.book-decision-form textarea {
  padding: 13px 14px;
  line-height: 1.5;
  resize: vertical;
}

.book-decision-form input:focus,
.book-decision-form select:focus,
.book-decision-form textarea:focus {
  outline: none;
  border-color: #4d8867;
  box-shadow: 0 0 0 3px rgba(56, 123, 82, 0.11);
}

.book-decision-wide-field {
  margin-top: 25px;
}

.book-field-help {
  margin: 7px 0 0;
  color: #859087;
  font-family: var(--font-sans);
  font-size: 0.78rem;
}

.book-field-error,
.book-form-error {
  margin-top: 7px;
  color: #a83232;
  font-family: var(--font-sans);
  font-size: 0.8rem;
}


/* ---------- Price ---------- */

.book-price-field {
  position: relative;
}

.book-price-field > span {
  position: absolute;
  z-index: 1;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #718078;
  font-family: var(--font-sans);
  font-weight: 700;
  pointer-events: none;
}

.book-price-field input {
  padding-left: 30px !important;
}


/* ---------- Confidence ---------- */

.book-confidence-card {
  margin-top: 28px;
  padding: 20px 22px 17px;
  border: 1px solid #dce5df;
  border-radius: 13px;
  background: #f8faf8;
}

.book-confidence-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
}

.book-confidence-heading label {
  margin-bottom: 3px;
}

.book-confidence-heading p {
  margin: 0;
  color: #748178;
  font-family: var(--font-sans);
  font-size: 0.8rem;
}

.book-confidence-heading strong {
  flex: 0 0 auto;
  color: #266b44;
  font-family: var(--font-sans);
  font-size: 1.15rem;
}

.book-confidence-range {
  width: 100%;
  accent-color: #2f7b4e;
  cursor: pointer;
}

.book-confidence-scale {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 8px;
  color: #707e75;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  text-align: center;
}

.book-confidence-scale span:first-child {
  text-align: left;
}

.book-confidence-scale span:last-child {
  text-align: right;
}

.book-confidence-scale small {
  color: #99a29c;
  font-size: 0.65rem;
}


/* ---------- Form actions ---------- */

.book-decision-actions {
  display: flex;
  gap: 12px;
  margin-top: 30px;
  padding-top: 25px;
  border-top: 1px solid #e5eae7;
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 820px) {

  .investment-detail-header {
    flex-direction: column;
  }

  .investment-detail-identity {
    align-items: flex-start;
  }

  .investment-detail-logo {
    width: 68px;
    height: 68px;
    flex-basis: 68px;
    border-radius: 14px;
  }

  .decision-history-header {
    display: none;
  }

  .decision-history-row {
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
    padding: 18px;
  }

  .decision-history-action {
    grid-column: 1;
  }

  .decision-history-date {
    grid-column: 2;
    text-align: right;
  }

  .decision-history-position {
    grid-column: 1;
  }

  .decision-history-confidence {
    grid-column: 2;
    align-self: center;
    text-align: right;
  }

  .decision-history-reason {
    grid-column: 1 / -1;
    padding-top: 10px;
    border-top: 1px solid #eef1ef;
  }

  .book-decision-grid {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 520px) {

  .investment-detail-identity {
    gap: 14px;
  }

  .investment-detail-position {
    flex-direction: column;
    gap: 3px;
  }

  .book-decision-form {
    padding: 20px 16px;
    border-radius: 14px;
  }

  .book-confidence-heading {
    gap: 12px;
  }

  .book-decision-actions {
    flex-direction: column;
  }

  .book-decision-actions .btn {
    width: 100%;
    justify-content: center;
  }

}


/* =========================================================
   Investment Book portfolio row polish
   ========================================================= */

.investment-book-list {
  overflow: hidden;
  border: 1px solid #dfe5e1;
  border-radius: 16px;
  background: #fff;
}

.investment-book-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 90px;
  align-items: center;
  gap: 28px;

  min-height: 112px;
  padding: 22px 28px;

  border-bottom: 1px solid #e4e9e6;
  background: #fff;

  color: inherit;
  text-decoration: none;
}

.investment-book-row:last-child {
  border-bottom: 0;
}

.investment-book-row:hover {
  background: #fafcfb;
}

.investment-book-symbol {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}


/* Logo/fallback box */

.book-ticker-mark {
  width: 66px;
  height: 66px;
  flex: 0 0 66px;

  display: grid;
  place-items: center;

  overflow: hidden;
  border-radius: 13px;

  background: #f7f9f8;
}

.book-ticker-mark img {
  display: block;
  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center;

  padding: 8px;
  box-sizing: border-box;
}

.book-ticker-fallback {
  display: none;

  width: 100%;
  height: 100%;

  place-items: center;

  color: #53645b;
  background: #f7f9f8;

  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 800;
}

.book-ticker-fallback.visible {
  display: grid;
}


/* Ticker/company */

.investment-book-symbol > div {
  min-width: 0;
}

.investment-book-symbol > div > strong {
  display: block;

  margin-bottom: 6px;

  color: #1f2c36;
  font-size: 1.18rem;
  line-height: 1.2;
}

.investment-book-symbol > div > span {
  display: block;

  color: #606e78;
  font-family: var(--font-sans);
  font-size: 0.94rem;
  line-height: 1.35;
}


/* Position */

.investment-book-position {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;

  min-width: 140px;

  color: #626f78;
  font-family: var(--font-sans);
  font-size: 0.94rem;
  text-align: right;
}


/* View */

.book-row-arrow {
  color: #246c45;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 750;
  white-space: nowrap;
  text-align: right;
}


@media (max-width: 700px) {

  .investment-book-row {
    grid-template-columns: 1fr auto;
    gap: 15px;
    min-height: 94px;
    padding: 17px;
  }

  .investment-book-symbol {
    gap: 14px;
  }

  .book-ticker-mark {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
  }

  .investment-book-position {
    grid-column: 1;
    align-items: flex-start;
    padding-left: 68px;
    text-align: left;
  }

  .book-row-arrow {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }

}


/* =========================================================
   Investment Book small UI corrections
   ========================================================= */

/* No unnecessary space when a company has no logo */
.investment-book-symbol {
  gap: 20px;
}


/* Confidence slider labels */

.book-confidence-scale {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;

  margin-top: 9px;
  padding: 0 2px;

  color: #68766d;
  font-family: var(--font-sans);
  font-size: 0.72rem;
}

.book-confidence-scale span {
  display: block;
  text-align: center;
}

.book-confidence-scale span:first-child {
  text-align: left;
}

.book-confidence-scale span:last-child {
  text-align: right;
}

.book-confidence-scale-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-top: 3px;
  padding: 0 1px;

  color: #9aa39d;
  font-family: var(--font-sans);
  font-size: 0.66rem;
}


/* =========================================================
   Exact confidence slider tick alignment
   ========================================================= */

.book-confidence-range {
  display: block;
  width: 100%;
  margin: 0;
}

/*
  Native range thumb is approximately 16px wide.
  Its center travels from ~8px inside the left edge
  to ~8px inside the right edge.
*/
.book-confidence-scale {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-top: 10px;

  /* Match the actual range-thumb travel area */
  padding-left: 8px;
  padding-right: 8px;

  color: #68766d;
  font-family: var(--font-sans);
  font-size: 0.72rem;
}

.book-confidence-scale span,
.book-confidence-scale span:first-child,
.book-confidence-scale span:last-child {
  display: block;
  width: auto;
  text-align: center;
}

.book-confidence-scale-labels {
  display: flex;
  justify-content: space-between;

  margin-top: 3px;

  /* Same alignment as slider positions 1 and 5 */
  padding-left: 8px;
  padding-right: 8px;

  color: #9aa39d;
  font-family: var(--font-sans);
  font-size: 0.66rem;
}


/* Final confidence slider labeling */

.book-confidence-scale {
  display: none;
}

.book-confidence-scale-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-top: 7px;
  padding: 0 4px;

  color: #929d96;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  line-height: 1;
}


/* =========================================================================
   SCREENER — PER-CHART CONFIGURATION
   ========================================================================= */

.screener-panel-toolbar {
  grid-template-columns:
    minmax(90px, 1fr)
    105px
    30px
    30px;
}


.screener-configure,
.screener-remove {
  width: 30px;
  height: 36px;

  padding: 0;

  display: grid;
  place-items: center;

  border: 0;
  border-radius: 6px;

  background: transparent;
  color: var(--color-text-muted);

  cursor: pointer;
}


.screener-configure {
  font-size: .9rem;
}


.screener-configure:hover,
.screener-remove:hover {
  background: #f2f3f1;
  color: var(--color-text);
}


/* Settings popover */

.screener-config-popover {
  position: absolute;

  z-index: 500;

  top: 49px;
  right: 7px;

  width: min(310px, calc(100% - 14px));

  padding: 14px;

  border: 1px solid #dce3de;
  border-radius: 11px;

  background: #fff;

  box-shadow:
    0 16px 40px
    rgba(24, 38, 30, .18);
}


.screener-config-popover[hidden] {
  display: none;
}


.screener-config-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 15px;

  padding-bottom: 11px;

  border-bottom:
    1px solid #e8ece9;
}


.screener-config-head > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}


.screener-config-head strong {
  font-family: var(--font-sans);
  font-size: .84rem;
}


.screener-config-head span {
  color: var(--color-text-muted);

  font-size: .68rem;
}


.screener-config-close {
  width: 25px;
  height: 25px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 0;
  border-radius: 5px;

  background: transparent;

  color: var(--color-text-muted);
  font-size: 1rem;

  cursor: pointer;
}


.screener-config-close:hover {
  background: #f1f3f1;
}


.screener-config-section {
  padding: 12px 0;

  border-bottom:
    1px solid #edf0ee;
}


.screener-config-option {
  display: flex;
  align-items: center;

  gap: 10px;

  cursor: pointer;
}


.screener-config-option input,
.screener-ma-grid input {
  accent-color:
    var(--color-accent);
}


.screener-config-option > span {
  display: flex;
  flex-direction: column;

  gap: 1px;
}


.screener-config-option strong {
  font-family: var(--font-sans);
  font-size: .78rem;
}


.screener-config-option small {
  color: var(--color-text-muted);

  font-size: .65rem;
}


.screener-config-label {
  margin: 0 0 9px;

  color: var(--color-text-muted);

  font-family: var(--font-sans);
  font-size: .66rem;
  font-weight: 750;

  letter-spacing: .04em;
  text-transform: uppercase;
}


.screener-ma-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 8px 12px;
}


.screener-ma-grid label {
  display: flex;
  align-items: center;

  gap: 7px;

  font-family: var(--font-sans);
  font-size: .74rem;

  cursor: pointer;
}


.screener-config-coming {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 10px 0;

  color: var(--color-text-muted);

  font-size: .68rem;
}


.screener-config-coming span {
  padding: 3px 6px;

  border-radius: 999px;

  background: #f0f3f1;

  font-size: .6rem;
  font-weight: 700;
}


.screener-config-actions {
  display: grid;
  grid-template-columns:
    1fr 1fr;

  gap: 7px;

  padding-top: 4px;
}


.screener-config-actions button {
  min-height: 32px;

  border: 1px solid
    var(--color-border);

  border-radius: 6px;

  background: #fff;

  color:
    var(--color-accent-strong);

  font-family: var(--font-sans);
  font-size: .69rem;
  font-weight: 750;

  cursor: pointer;
}


.screener-config-actions button:first-child {
  border-color:
    var(--color-accent);

  background:
    var(--color-accent);

  color: #fff;
}


/* Dark mode */

body.screener-dark
.screener-configure {
  color: #aab5af;
}


body.screener-dark
.screener-configure:hover,
body.screener-dark
.screener-remove:hover {
  background: #222925;
  color: #eef2f0;
}


body.screener-dark
.screener-config-popover {
  border-color: #343c38;

  background: #181d1b;

  color: #edf2ef;

  box-shadow:
    0 18px 42px
    rgba(0, 0, 0, .42);
}


body.screener-dark
.screener-config-head,
body.screener-dark
.screener-config-section {
  border-color: #303733;
}


body.screener-dark
.screener-config-close:hover {
  background: #252c28;
}


body.screener-dark
.screener-config-coming span {
  background: #252c28;
}


body.screener-dark
.screener-config-actions button {
  border-color: #3c4540;

  background: #222825;

  color: #dce8e1;
}


body.screener-dark
.screener-config-actions button:first-child {
  border-color:
    var(--color-accent);

  background:
    var(--color-accent);

  color: #fff;
}


@media (max-width: 600px) {
  .screener-panel-toolbar {
    grid-template-columns:
      minmax(70px, 1fr)
      82px
      30px
      30px;
  }

  .screener-config-popover {
    right: 5px;

    width:
      calc(100% - 10px);
  }
}


/* =========================================================================
   SCREENER — LAYOUT CONTROLS V2
   ========================================================================= */

.screener-panel {
  position: relative;
}


/* Settings popover belongs to its individual chart */
.screener-config-popover {
  position: absolute;

  top: 50px;
  right: 7px;
  left: auto;

  z-index: 1000;

  max-height: calc(100% - 58px);
  overflow-y: auto;
}


/* =========================================================================
   SCREENER — POLISHED PANEL TOOLBAR
   ========================================================================= */

.screener-panel-toolbar {
  grid-template-columns:
    28px
    minmax(90px, 1fr)
    100px
    auto
    30px
    30px;

  align-items: center;
}


/* Drag handle */

.screener-drag-handle {
  width: 28px;
  height: 36px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 0;
  border-radius: 6px;

  background: transparent;
  color: #98a29c;

  font-size: .9rem;
  letter-spacing: -2px;

  cursor: grab;
}

.screener-drag-handle:active {
  cursor: grabbing;
}

.screener-drag-handle:hover {
  background: #f1f4f2;
  color: #56635c;
}


/* Settings button */

.screener-configure {
  width: auto;
  min-width: 78px;
  height: 36px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  padding: 0 10px;

  border: 1px solid #dce4df;
  border-radius: 7px;

  background: #f8faf8;
  color: #42634f;

  font-family: var(--font-sans);
  font-size: .71rem;
  font-weight: 750;

  cursor: pointer;

  transition:
    background 140ms ease,
    border-color 140ms ease,
    color 140ms ease;
}

.screener-configure:hover {
  border-color: #bfcfc5;
  background: #eef5f0;
  color: #245f3d;
}

.screener-configure-icon {
  font-size: .84rem;
}

.screener-configure-label {
  white-space: nowrap;
}


/* Focus */

.screener-focus {
  width: 30px;
  height: 36px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 0;
  border-radius: 6px;

  background: transparent;
  color: #75827b;

  font-size: .9rem;

  cursor: pointer;
}

.screener-focus:hover {
  background: #f1f4f2;
  color: #34473d;
}


/* 5+ charts: automatically compact the toolbar */

.screener-grid-compact
.screener-panel-toolbar {
  grid-template-columns:
    24px
    minmax(58px, 1fr)
    78px
    30px
    30px
    30px;

  gap: 4px;
}

.screener-grid-compact
.screener-configure {
  width: 30px;
  min-width: 30px;
  padding: 0;
}

.screener-grid-compact
.screener-configure-label {
  display: none;
}

.screener-grid-compact
.screener-symbol-input {
  padding-left: 7px;
  padding-right: 7px;
}


/* Drag feedback */

.screener-panel-dragging {
  opacity: .55;
}

.screener-panel-drag-over {
  outline: 2px solid var(--color-accent);
  outline-offset: -3px;
}


/* Focus mode */

.screener-grid-focused {
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
}

.screener-panel-hidden-by-focus {
  display: none !important;
}

.screener-panel-focused {
  grid-column: 1 !important;
  grid-row: 1 !important;

  width: 100%;
  height: 100%;
}


/* Dark mode */

body.screener-dark
.screener-drag-handle,
body.screener-dark
.screener-focus {
  color: #9ba8a1;
}

body.screener-dark
.screener-drag-handle:hover,
body.screener-dark
.screener-focus:hover {
  background: #222925;
  color: #edf2ef;
}

body.screener-dark
.screener-configure {
  border-color: #37403b;
  background: #1b211e;
  color: #d5e3db;
}

body.screener-dark
.screener-configure:hover {
  border-color: #49564f;
  background: #252d29;
}


/* Very dense grids */

@media (max-width: 900px) {
  .screener-panel-toolbar {
    grid-template-columns:
      24px
      minmax(60px, 1fr)
      78px
      30px
      30px
      30px;

    gap: 4px;
  }

  .screener-configure {
    width: 30px;
    min-width: 30px;
    padding: 0;
  }

  .screener-configure-label {
    display: none;
  }
}


/* Keep settings attached to the chart that opened them */

.screener-panel > .screener-config-popover {
  top: 50px;
  right: 7px;

  width: min(310px, calc(100% - 14px));

  transform: none;
}

.screener-panel-focused
.screener-config-popover {
  width: 310px;
}


/* =========================================================================
   SCREENER — FLEXIBLE PANEL SIZING
   ========================================================================= */

.screener-grid {
  grid-auto-flow: dense;

  /*
   * Explicit rows remain the baseline.
   * Additional rows can be created when a
   * user chooses Wide/Tall/Large combinations.
   */
  grid-auto-rows:
    minmax(180px, 1fr);

  overflow: auto;
}


/* Default */
.screener-panel-size-small {
  grid-column: span 1;
  grid-row: span 1;
}


/* Twice as wide */
.screener-panel-size-wide {
  grid-column: span 2;
  grid-row: span 1;
}


/* Twice as tall */
.screener-panel-size-tall {
  grid-column: span 1;
  grid-row: span 2;
}


/* Large dashboard panel */
.screener-panel-size-large {
  grid-column: span 2;
  grid-row: span 2;
}


/*
 * A single chart always gets the whole
 * available workspace regardless of its
 * persisted size selection.
 */



/* Don't allow a 2-column span on tiny screens. */
@media (max-width: 760px) {
  .screener-panel-size-wide,
  .screener-panel-size-large {
    grid-column: span 1;
  }
}


/* Screener size picker */

.screener-size-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 7px;
}


.screener-size-grid label {
  position: relative;

  min-width: 0;

  cursor: pointer;
}


.screener-size-grid input {
  position: absolute;

  opacity: 0;
  pointer-events: none;
}


.screener-size-grid label > span {
  min-height: 48px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  gap: 2px;

  padding: 7px 9px;

  border: 1px solid
    var(--color-border);

  border-radius: 7px;

  background: #fff;
}


.screener-size-grid strong {
  font-family: var(--font-sans);

  font-size: .72rem;
}


.screener-size-grid small {
  color: var(--color-text-muted);

  font-size: .61rem;
}


.screener-size-grid
input:checked + span {
  border-color:
    var(--color-accent);

  background: #edf5ef;

  color:
    var(--color-accent-strong);
}


body.screener-dark
.screener-size-grid label > span {
  border-color: #39413d;

  background: #1e2421;
}


body.screener-dark
.screener-size-grid
input:checked + span {
  border-color:
    var(--color-accent);

  background: #26392f;

  color: #deeee5;
}


/* Match Focus styling to Settings */

.screener-focus {
  width: auto;
  min-width: 36px;

  padding: 0 9px;

  border:
    1px solid #dce4df;

  border-radius: 7px;

  background: #f8faf8;

  color: #53675b;
}


.screener-focus:hover {
  border-color: #bfcfc5;

  background: #eef5f0;

  color: #245f3d;
}


body.screener-dark
.screener-focus {
  border-color: #37403b;

  background: #1b211e;

  color: #d5e3db;
}


body.screener-dark
.screener-focus:hover {
  border-color: #49564f;

  background: #252d29;
}


/* Dense grid */
.screener-grid-compact
.screener-focus {
  width: 30px;
  min-width: 30px;

  padding: 0;
}


/* Final toolbar geometry */

.screener-panel-toolbar {
  grid-template-columns:
    28px
    minmax(80px, 1fr)
    105px
    auto
    auto
    30px;
}


.screener-grid-compact
.screener-panel-toolbar {
  grid-template-columns:
    24px
    minmax(54px, 1fr)
    70px
    30px
    30px
    30px;
}


@media (max-width: 900px) {
  .screener-panel-toolbar {
    grid-template-columns:
      24px
      minmax(54px, 1fr)
      70px
      30px
      30px
      30px;
  }
}


/* =========================================================================
   SCREENER — DIRECT PANEL RESIZING
   ========================================================================= */

.screener-panel {
  resize: both;

  min-width: 240px;
  min-height: 180px;
}


/*
 * Keep resizing inside the workspace.
 * The chart panel itself remains grid-managed,
 * but the browser gives the user a visible
 * lower-right resize handle.
 */
.screener-panel:not(.screener-panel-focused) {
  overflow: hidden;
}


/*
 * Make the native resize corner easier to target.
 */
.screener-panel::after {
  content: "";

  position: absolute;

  right: 2px;
  bottom: 2px;

  width: 11px;
  height: 11px;

  pointer-events: none;

  border-right: 2px solid rgba(90, 110, 99, .55);
  border-bottom: 2px solid rgba(90, 110, 99, .55);

  border-radius: 0 0 3px 0;
}


body.screener-dark
.screener-panel::after {
  border-color: rgba(190, 205, 197, .55);
}


/*
 * Focused chart should fill the workspace,
 * not expose a resize corner.
 */
.screener-panel-focused {
  resize: none;
}


/* =========================================================================
   SCREENER — GRID-AWARE RESIZING
   ========================================================================= */

/*
 * Do not let the browser assign arbitrary pixel width/height.
 * Chart sizing is controlled by CSS Grid spans instead.
 */
.screener-panel {
  resize: none !important;
  width: auto !important;
  height: auto !important;
}


/* Disable the old fake native-corner marker. */
.screener-panel::after {
  display: none !important;
}


/* Our own resize handle */

.screener-resize-handle {
  position: absolute;

  right: 3px;
  bottom: 3px;

  z-index: 50;

  width: 18px;
  height: 18px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 0;
  border-radius: 5px;

  background: rgba(255, 255, 255, .88);
  color: #718078;

  cursor: nwse-resize;

  opacity: .45;

  transition:
    opacity 140ms ease,
    background 140ms ease,
    color 140ms ease;
}


.screener-panel:hover
.screener-resize-handle {
  opacity: 1;
}


.screener-resize-handle::before {
  content: "";

  width: 8px;
  height: 8px;

  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}


.screener-resize-handle:hover {
  background: #edf4ef;
  color: var(--color-accent-strong);
}


.screener-panel-resizing {
  z-index: 80;

  box-shadow:
    0 8px 28px rgba(20, 40, 28, .16);
}


/* Smooth movement while CSS Grid repacks charts. */

.screener-panel-grid-animating {
  will-change: transform;
}


body.screener-dark
.screener-resize-handle {
  background: rgba(28, 34, 31, .92);
  color: #a6b3ac;
}


body.screener-dark
.screener-resize-handle:hover {
  background: #27302b;
  color: #d8ebe0;
}


/*
 * Allow Grid to fill holes left by Wide / Tall / Large charts.
 */
.screener-grid {
  grid-auto-flow: dense;
}


/* =========================================================================
   SCREENER — 48-COLUMN PRECISE LAYOUT
   ========================================================================= */

.screener-grid {
  /*
   * Fine horizontal control.
   * One panel can occupy 6–48 columns.
   */
  grid-template-columns:
    repeat(
      48,
      minmax(0, 1fr)
    ) !important;

  /*
   * Fine vertical control.
   * 4px row + 4px gap ≈ 8px height resolution.
   */
  grid-template-rows: none !important;
  grid-auto-rows: 4px;
  grid-auto-flow: dense;

  column-gap: 8px;
  row-gap: 4px;

  align-content: start;

  overflow: auto;
}


.screener-panel {
  /*
   * Precise layout is now set through
   * grid-column/grid-row inline values.
   */
  min-width: 0;
  min-height: 0;

  transition:
    box-shadow 140ms ease;
}


/*
 * Old size classes no longer control
 * Grid spans. They remain only for
 * backward compatibility / preset state.
 */
.screener-panel-size-small,
.screener-panel-size-wide,
.screener-panel-size-tall,
.screener-panel-size-large {
  grid-column: auto;
  grid-row: auto;
}


/* Right-edge width handle */

.screener-resize-right {
  position: absolute;

  z-index: 45;

  top: 48px;
  right: -2px;
  bottom: 20px;

  width: 7px;

  cursor: ew-resize;

  touch-action: none;
}


/* Bottom-edge height handle */

.screener-resize-bottom {
  position: absolute;

  z-index: 45;

  left: 12px;
  right: 20px;
  bottom: -2px;

  height: 7px;

  cursor: ns-resize;

  touch-action: none;
}


/* Corner width + height handle */

.screener-resize-handle {
  position: absolute;

  z-index: 55;

  right: 2px;
  bottom: 2px;

  width: 18px;
  height: 18px;

  padding: 0;

  border: 0;
  border-radius: 5px;

  background: transparent;

  cursor: nwse-resize;

  touch-action: none;
}


.screener-resize-handle::before {
  content: "";

  position: absolute;

  right: 3px;
  bottom: 3px;

  width: 8px;
  height: 8px;

  border-right:
    2px solid rgba(82, 104, 91, .62);

  border-bottom:
    2px solid rgba(82, 104, 91, .62);
}


.screener-panel:hover
.screener-resize-handle::before {
  border-color:
    var(--color-accent-strong);
}


/* Live size readout */

.screener-resize-size-badge {
  position: absolute;

  z-index: 1200;

  right: 12px;
  bottom: 28px;

  padding: 5px 8px;

  border:
    1px solid rgba(30, 55, 40, .12);

  border-radius: 6px;

  background:
    rgba(22, 31, 26, .88);

  color: #fff;

  font-family: var(--font-sans);
  font-size: .66rem;
  font-weight: 700;

  pointer-events: none;

  box-shadow:
    0 5px 15px
    rgba(0, 0, 0, .13);
}


.screener-resize-size-badge[hidden] {
  display: none;
}


.screener-panel-resizing {
  z-index: 80;

  box-shadow:
    0 10px 32px
    rgba(25, 48, 35, .18);
}


/* On small screens use larger minimum useful width. */

@media (max-width: 760px) {
  .screener-grid {
    grid-template-columns:
      repeat(
        24,
        minmax(0, 1fr)
      ) !important;
  }

}


body.screener-dark
.screener-resize-handle::before {
  border-color:
    rgba(198, 215, 205, .65);
}


body.screener-dark
.screener-resize-size-badge {
  border-color: #3a453f;
  background: rgba(12, 16, 14, .94);
}


/* =========================================================================
   SCREENER — ULTRA-PRECISE 360-UNIT GRID
   ========================================================================= */

.screener-grid {
  grid-template-columns:
    repeat(
      360,
      minmax(0, 1fr)
    ) !important;

  column-gap: 0 !important;

  grid-auto-rows: 2px;

  row-gap: 0 !important;

  padding: 2px;

  align-content: start;

  overflow: auto;
}


.screener-panel {
  /*
   * Creates visible spacing without destroying
   * the 360-unit precision grid.
   */
  margin: 3px;

  min-width: 0;
  min-height: 0;
}


/* Precise resize interaction */

.screener-resize-handle {
  width: 14px;
  height: 14px;

  right: 3px;
  bottom: 3px;
}


.screener-resize-handle::before {
  width: 6px;
  height: 6px;

  right: 2px;
  bottom: 2px;
}


/*
 * Resize handles do not change anything from hover.
 * This is only visual feedback.
 */

.screener-resize-right:hover {
  background:
    rgba(53, 107, 73, .08);
}

.screener-resize-bottom:hover {
  background:
    rgba(53, 107, 73, .08);
}


/* =========================================================================
   SCREENER — STABLE CONTINUOUS REFLOW
   ========================================================================= */

/*
 * Fine reflow without fighting active pointer resizing.
 */
.screener-panel:not(.screener-panel-resizing) {
  transition:
    box-shadow 140ms ease;
}


/*
 * During active resizing, never animate the panel dimensions.
 */
.screener-panel-resizing {
  transition: none !important;
}


/* =========================================================================
   SCREENER — POLISHED TOOLBAR + DYNAMIC FOCUS
   ========================================================================= */

/*
 * Focus must override every earlier 48/360-column grid rule.
 */
.screener-grid.screener-grid-focused {
  grid-template-columns:
    minmax(0, 1fr) !important;

  grid-template-rows:
    none !important;

  grid-auto-rows: 2px !important;

  grid-auto-flow: row !important;

  align-content: start;
}


.screener-grid.screener-grid-focused
.screener-panel-focused {
  grid-column:
    1 / -1 !important;

  grid-row:
    span var(
      --screener-focus-row-span,
      300
    ) !important;

  margin: 3px;

  min-width: 0;
  min-height: 0;

  width: auto !important;
  height: auto !important;
}


.screener-grid.screener-grid-focused
.screener-resize-edge,
.screener-grid.screener-grid-focused
.screener-resize-handle {
  display: none !important;
}


/* Toolbar */
.screener-panel-toolbar {
  grid-template-columns:
    24px
    minmax(96px, 1fr)
    112px
    34px
    34px
    34px !important;

  gap: 5px;

  min-height: 42px;

  align-items: center;
}


/* Ticker identity */
.screener-symbol-search {
  position: relative;

  display: flex;
  align-items: center;

  min-width: 0;
}


.screener-symbol-badge {
  flex: 0 0 26px;

  width: 26px;
  height: 26px;

  display: grid;
  place-items: center;

  margin-right: 5px;

  border:
    1px solid #d8e2dc;

  border-radius: 50%;

  background: #edf4ef;

  color: #315d43;

  font-family: var(--font-sans);
  font-size: .68rem;
  font-weight: 800;
}


.screener-symbol-input {
  min-width: 0;

  height: 30px;

  padding:
    0 8px !important;

  font-weight: 650;
}


/* Chart type */
.screener-chart-type-control {
  display: flex;
  align-items: center;

  min-width: 0;

  height: 32px;

  padding-left: 7px;

  border:
    1px solid #dce4df;

  border-radius: 7px;

  background: #f8faf8;

  overflow: hidden;
}


.screener-chart-type-icon {
  flex: 0 0 18px;

  width: 18px;
  height: 18px;

  display: grid;
  place-items: center;

  color: #526a5b;
}


.screener-chart-type-icon svg {
  width: 18px;
  height: 18px;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.screener-chart-type {
  width: 100%;
  height: 30px;

  padding:
    0 20px
    0 5px;

  border: 0 !important;

  background: transparent !important;

  color: inherit;

  font-size: .7rem;
  font-weight: 700;

  cursor: pointer;
}


/* Action buttons */
.screener-configure,
.screener-focus,
.screener-remove {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;

  display: grid !important;
  place-items: center;

  padding: 0 !important;

  border:
    1px solid #dce4df;

  border-radius: 7px;

  background: #f8faf8;

  color: #53675b;
}


.screener-configure svg,
.screener-focus svg,
.screener-remove svg {
  width: 18px;
  height: 18px;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.screener-configure:hover,
.screener-focus:hover {
  border-color: #bfcfc5;

  background: #eef5f0;

  color: #245f3d;
}


.screener-remove:hover {
  border-color: #e3c4c4;

  background: #fff2f2;

  color: #9d3535;
}


/* No old Settings text label in the compact toolbar. */
.screener-configure-label,
.screener-configure-icon {
  display: none !important;
}


/* Dark toolbar */
body.screener-dark
.screener-symbol-badge {
  border-color: #39443e;

  background: #202923;

  color: #d7e8de;
}


body.screener-dark
.screener-chart-type-control,
body.screener-dark
.screener-configure,
body.screener-dark
.screener-focus,
body.screener-dark
.screener-remove {
  border-color: #37403b;

  background: #1b211e;

  color: #d5e3db;
}


@media (max-width: 900px) {
  .screener-panel-toolbar {
    grid-template-columns:
      20px
      minmax(75px, 1fr)
      96px
      32px
      32px
      32px !important;

    gap: 4px;
  }

  .screener-symbol-badge {
    width: 22px;
    height: 22px;

    flex-basis: 22px;
  }
}


/* =========================================================================
   SCREENER — INDICATOR VALUE LEGEND
   ========================================================================= */

.screener-chart-shell {
  position: relative;
}


.screener-indicator-legend {
  position: absolute;

  z-index: 35;

  top: 7px;
  left: 9px;

  max-width:
    calc(100% - 70px);

  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap:
    4px 12px;

  padding:
    5px 7px;

  border-radius: 6px;

  background:
    rgba(255, 255, 255, .86);

  backdrop-filter:
    blur(4px);

  -webkit-backdrop-filter:
    blur(4px);

  font-family:
    var(--font-sans);

  font-size: .67rem;

  line-height: 1.2;

  pointer-events: none;
}


.screener-indicator-legend[hidden] {
  display: none !important;
}


.screener-legend-price,
.screener-legend-indicator,
.screener-legend-ohlc {
  display: flex;
  align-items: center;

  gap: 5px;

  white-space: nowrap;
}


.screener-legend-price > span,
.screener-legend-ohlc > span {
  color:
    var(--color-text-muted);
}


.screener-legend-price strong,
.screener-legend-ohlc strong {
  color:
    var(--color-text);

  font-weight: 700;
}


.screener-legend-indicator {
  color:
    var(--indicator-color);
}


.screener-legend-indicator > span {
  display: inline-flex;
  align-items: center;

  gap: 4px;

  font-weight: 650;
}


.screener-legend-indicator i {
  width: 11px;
  height: 2px;

  display: inline-block;

  border-radius: 2px;

  background:
    var(--indicator-color);
}


.screener-legend-indicator strong {
  color:
    var(--indicator-color);

  font-variant-numeric:
    tabular-nums;

  font-weight: 750;
}


.screener-legend-ohlc {
  gap: 8px;
}


.screener-legend-ohlc > span {
  display: inline-flex;

  gap: 3px;
}


/* Dense multi-chart dashboard */
.screener-grid-compact
.screener-indicator-legend {
  top: 5px;
  left: 6px;

  gap:
    3px 8px;

  padding:
    4px 6px;

  font-size: .60rem;
}


/* Dark mode */
body.screener-dark
.screener-indicator-legend {
  background:
    rgba(17, 21, 20, .84);

  color: #d5dfda;
}


body.screener-dark
.screener-legend-price strong,
body.screener-dark
.screener-legend-ohlc strong {
  color: #e3ebe7;
}


/* =========================================================================
   EXPLORE — RESPONSIVE DESKTOP COMPOSITION
   ========================================================================= */

.explore-intro-container {
  width:
    min(
      calc(100% - 48px),
      920px
    );

  max-width: none !important;

  margin-left: auto;
  margin-right: auto;
}


.explore-intro {
  max-width: 72ch !important;
}


.explore-wide-container {
  width:
    min(
      calc(100% - 64px),
      1320px
    );

  max-width: none !important;

  margin-left: auto;
  margin-right: auto;
}


/* -------------------------------------------------------------------------
   FEATURED
   ------------------------------------------------------------------------- */

.explore-page-featured
.article-card-featured {
  overflow: hidden;
}


@media (min-width: 900px) {

  .explore-page-featured
  .article-card-featured {
    grid-template-columns:
      minmax(0, 1.08fr)
      minmax(360px, .92fr);

    min-height:
      clamp(
        330px,
        29vw,
        430px
      );
  }


  .explore-page-featured
  .article-card-featured
  .card-media {
    min-height: 100%;
  }


  .explore-page-featured
  .article-card-featured
  .featured-img,
  .explore-page-featured
  .article-card-featured
  .featured-placeholder {
    width: 100%;
    height: 100% !important;

    aspect-ratio: auto !important;
  }


  /*
   * Preserve uploaded artwork rather than
   * aggressively cropping educational graphics.
   */
  .explore-page-featured
  .article-card-featured
  .featured-img {
    object-fit: contain !important;

    background:
      var(--color-surface-alt);
  }


  .explore-page-featured
  .article-card-featured
  .card-body {
    padding:
      clamp(
        26px,
        2.6vw,
        42px
      );
  }


  .explore-page-featured
  .article-card-featured
  .card-title {
    font-size:
      clamp(
        1.8rem,
        1.25rem + 1vw,
        2.55rem
      );

    line-height: 1.08;
  }


  .explore-page-featured
  .article-card-featured
  .card-summary {
    font-size:
      clamp(
        .95rem,
        .86rem + .2vw,
        1.08rem
      );

    line-height: 1.6;
  }
}


/* -------------------------------------------------------------------------
   LATEST POSTS
   ------------------------------------------------------------------------- */

.explore-post-grid {
  align-items: stretch;

  gap:
    clamp(
      20px,
      2vw,
      28px
    );
}


.explore-post-grid
.article-card-compact {
  height: 100% !important;

  min-height: 0 !important;
  max-height: none !important;

  display: flex;
  flex-direction: column;
}


.explore-post-grid
.article-card-compact
.card-media {
  display: block;

  flex: 0 0 auto;

  overflow: hidden;

  border-bottom:
    1px solid
    var(--color-border);
}


.explore-post-grid
.article-card-compact
.featured-img,
.explore-post-grid
.article-card-compact
.featured-placeholder {
  width: 100%;

  aspect-ratio:
    16 / 9 !important;

  height: auto !important;
}


/*
 * Uploaded screenshots / diagrams should remain visible.
 */
.explore-post-grid
.article-card-compact
.featured-img {
  object-fit: contain !important;

  background:
    var(--color-surface-alt);
}


/*
 * Generated placeholders can still visually fill the card.
 */
.explore-post-grid
.article-card-compact
.featured-placeholder {
  object-fit: cover;
}


.explore-post-grid
.article-card-compact
.card-body {
  flex: 1 1 auto !important;

  min-height: 0;

  display: flex;
  flex-direction: column;

  gap: 9px !important;

  padding:
    clamp(
      16px,
      1.5vw,
      22px
    ) !important;
}


.explore-post-grid
.article-card-compact
.card-title {
  margin:
    3px 0 5px !important;

  font-size:
    clamp(
      1rem,
      .9rem + .25vw,
      1.2rem
    ) !important;

  line-height:
    1.28 !important;
}


.explore-post-grid
.article-card-compact
.card-title a {
  display: -webkit-box;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;

  overflow: hidden;
}


.explore-post-grid
.article-card-compact
.card-footer {
  margin-top: auto !important;

  padding-top:
    12px !important;
}


.explore-post-grid
.article-card-compact
.card-footer .meta,
.explore-post-grid
.article-card-compact
.read-link {
  font-size:
    .72rem !important;
}


/* -------------------------------------------------------------------------
   DESKTOP GRID
   ------------------------------------------------------------------------- */

@media (min-width: 1050px) {

  .explore-post-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }
}


/* -------------------------------------------------------------------------
   LARGE DESKTOPS
   ------------------------------------------------------------------------- */

@media (min-width: 1500px) {

  .explore-wide-container {
    width:
      min(
        calc(100% - 120px),
        1420px
      );
  }


  .explore-intro-container {
    width:
      min(
        calc(100% - 120px),
        980px
      );
  }
}


/* -------------------------------------------------------------------------
   TABLET
   ------------------------------------------------------------------------- */

@media (max-width: 900px) {

  .explore-wide-container,
  .explore-intro-container {
    width:
      calc(100% - 36px);
  }


  .explore-page-featured
  .article-card-featured {
    display: block;
  }


  .explore-post-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}


/* -------------------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------------------- */

@media (max-width: 620px) {

  .explore-wide-container,
  .explore-intro-container {
    width: 100%;

    padding-left: 18px;
    padding-right: 18px;
  }


  .explore-post-grid {
    grid-template-columns: 1fr;
  }


  .explore-search {
    max-width: none;

    flex-direction: column;
  }


  .explore-search .btn {
    width: 100%;

    justify-content: center;
  }
}


/* =========================================================================
   ABOUT — WIDER READING COLUMN
   ========================================================================= */

.about {
  width:
    min(
      calc(100% - 48px),
      960px
    );

  max-width: 960px !important;

  margin-left: auto;
  margin-right: auto;
}


/*
 * Keep the text using the full About-page width
 * instead of falling back to the narrow prose width.
 */
.about .prose {
  width: 100%;

  max-width: none !important;
}


/*
 * Prevent individual prose children from being
 * restricted by older centered prose rules.
 */
.about .prose > * {
  max-width: none;
}


/* Large desktop */
@media (min-width: 1600px) {

  .about {
    width:
      min(
        calc(100% - 160px),
        1020px
      );

    max-width: 1020px !important;
  }
}


/* Tablet */
@media (max-width: 900px) {

  .about {
    width:
      calc(100% - 40px);

    max-width: none !important;
  }
}


/* Mobile */
@media (max-width: 620px) {

  .about {
    width: 100%;

    padding-left: 18px;
    padding-right: 18px;
  }
}


/* =========================================================================
   SITE — FLUID RESPONSIVE LAYOUT SYSTEM
   ========================================================================= */

:root {
  /*
   * These values continuously adapt instead of jumping
   * between fixed laptop / desktop breakpoints.
   */
  --fluid-gutter:
    clamp(
      18px,
      4vw,
      84px
    );

  --fluid-page-width:
    min(
      calc(100vw - (var(--fluid-gutter) * 2)),
      1480px
    );

  --fluid-reading-width:
    min(
      78vw,
      980px
    );

  --fluid-wide-reading-width:
    min(
      82vw,
      1080px
    );

  --fluid-section-gap:
    clamp(
      30px,
      4vh,
      64px
    );
}


/* =========================================================================
   EXPLORE
   ========================================================================= */

/*
 * Intro remains narrower than the card layout.
 */
.explore-intro-container {
  width:
    min(
      calc(100vw - (var(--fluid-gutter) * 2)),
      1000px
    ) !important;

  max-width:
    none !important;

  margin-left:
    auto !important;

  margin-right:
    auto !important;
}


.explore-intro {
  max-width:
    75ch !important;

  font-size:
    clamp(
      .98rem,
      .88rem + .25vw,
      1.14rem
    );
}


/*
 * Cards use much more of large monitors.
 */
.explore-wide-container {
  width:
    var(--fluid-page-width) !important;

  max-width:
    1480px !important;

  margin-left:
    auto !important;

  margin-right:
    auto !important;

  padding-left:
    0 !important;

  padding-right:
    0 !important;
}


/* Featured card proportions */
@media (min-width: 850px) {

  .explore-page-featured
  .article-card-featured {
    grid-template-columns:
      minmax(0, 1.12fr)
      minmax(350px, .88fr)
      !important;

    min-height:
      clamp(
        315px,
        25vw,
        430px
      );
  }


  .explore-page-featured
  .article-card-featured
  .card-body {
    padding:
      clamp(
        24px,
        2.4vw,
        42px
      ) !important;
  }


  .explore-page-featured
  .article-card-featured
  .card-title {
    font-size:
      clamp(
        1.65rem,
        1.05rem + 1vw,
        2.55rem
      ) !important;
  }
}


/* Latest posts */
.explore-post-grid {
  gap:
    clamp(
      16px,
      1.8vw,
      30px
    ) !important;
}


@media (min-width: 1050px) {

  .explore-post-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      )
      !important;
  }
}


.explore-post-grid
.article-card-compact {
  height:
    100% !important;
}


.explore-post-grid
.article-card-compact
.featured-img,
.explore-post-grid
.article-card-compact
.featured-placeholder {
  aspect-ratio:
    16 / 9 !important;
}


.explore-post-grid
.article-card-compact
.card-body {
  padding:
    clamp(
      14px,
      1.4vw,
      22px
    ) !important;
}


.explore-post-grid
.article-card-compact
.card-title {
  font-size:
    clamp(
      .98rem,
      .85rem + .35vw,
      1.22rem
    ) !important;
}


/* =========================================================================
   ABOUT
   ========================================================================= */

.about {
  width:
    min(
      calc(100vw - (var(--fluid-gutter) * 2)),
      1050px
    ) !important;

  max-width:
    none !important;

  margin-left:
    auto !important;

  margin-right:
    auto !important;
}


.about .prose {
  width:
    100% !important;

  max-width:
    none !important;
}


/* =========================================================================
   MEDIUM LAPTOPS / TABLETS
   ========================================================================= */

@media (max-width: 1050px) {

  :root {
    --fluid-gutter:
      clamp(
        20px,
        4vw,
        42px
      );

    --fluid-reading-width:
      min(
        78vw,
        820px
      );
  }


  .home-candles {
    width:
      clamp(
        95px,
        11vw,
        145px
      ) !important;
  }
}


/* =========================================================================
   MOBILE
   ========================================================================= */

@media (max-width: 700px) {

  :root {
    --fluid-gutter:
      clamp(
        16px,
        5vw,
        24px
      );

    --fluid-reading-width:
      100%;
  }


  .home-hero {
    min-height:
      auto !important;

    display:
      block;

    padding:
      30px
      var(--fluid-gutter)
      38px
      !important;
  }


  .home-hero .hero-inner {
    width:
      100% !important;
  }


  .home-hero .eyebrow,
  .home-hero .hero-title,
  .home-hero .hero-tagline,
  .home-hero .hero-intro,
  .home-hero .hero-question {
    width:
      100% !important;
  }


  .home-candles {
    display:
      none !important;
  }


  .explore-wide-container,
  .explore-intro-container,
  .about {
    width:
      calc(
        100% -
        (var(--fluid-gutter) * 2)
      ) !important;
  }


  .explore-post-grid {
    grid-template-columns:
      1fr !important;
  }
}


/* =========================================================================
   SHORT SCREENS - REMOVED

   This block contained only obsolete Home declarations:

     @media (max-height: 720px) and (min-width: 701px) {
       .home-hero   { min-height: auto !important; padding: 24px 0 !important; }
       .home-candles { height: 290px !important; }
     }

   Its padding and candle-height were already dead (superseded by the
   canonical Home system below). Its min-height: auto !important was still
   winning, because the canonical .home-hero min-height was declared without
   !important - so on any viewport <= 720px tall (i.e. 13"/14" laptops) the
   hero silently lost its vertical floor. The canonical min-height
   declarations are now !important instead.
   ========================================================================= */


/* =========================================================================
   INVESTMENT BOOK — TRUE FLUID RESPONSIVE LANDING PAGE
   ========================================================================= */

/*
 * IMPORTANT:
 * Do not lock this page to one viewport height.
 * The old height + overflow:hidden combination
 * was clipping the lower content.
 */
.book-product-page {
  width: 100%;

  height: auto !important;

  min-height:
    calc(100svh - 105px) !important;

  overflow:
    visible !important;

  padding:
    clamp(26px, 4vh, 64px)
    clamp(20px, 4vw, 76px)
    !important;

  box-sizing:
    border-box;
}


/*
 * Fluid overall composition.
 *
 * Small/normal laptops naturally get a smaller shell.
 * Large monitors progressively use more width.
 */
.book-product-shell {
  width:
    min(
      calc(100vw - clamp(40px, 8vw, 180px)),
      1560px
    ) !important;

  max-width:
    none !important;

  min-height:
    auto !important;

  margin:
    0 auto !important;

  padding:
    clamp(12px, 2vw, 32px)
    !important;

  display:
    grid;

  grid-template-columns:
    minmax(380px, .92fr)
    minmax(500px, 1.08fr)
    !important;

  gap:
    clamp(
      42px,
      5vw,
      96px
    ) !important;

  align-items:
    center;

  overflow:
    visible !important;
}


/* =========================================================================
   LEFT SIDE
   ========================================================================= */

.book-product-left {
  width: 100%;

  max-width:
    690px;
}


.book-product-label {
  font-size:
    clamp(
      .66rem,
      .58rem + .12vw,
      .8rem
    ) !important;
}


.book-product-left h1 {
  width: 100%;

  max-width:
    690px !important;

  font-size:
    clamp(
      3rem,
      2rem + 3.1vw,
      5.7rem
    ) !important;

  line-height:
    .98 !important;
}


.book-product-description {
  width: 100%;

  max-width:
    660px !important;

  font-size:
    clamp(
      .95rem,
      .83rem + .3vw,
      1.18rem
    ) !important;

  line-height:
    1.6;
}


.book-product-actions {
  margin-top:
    clamp(
      20px,
      2.3vh,
      30px
    ) !important;

  gap:
    clamp(
      8px,
      1vw,
      14px
    );
}


.book-product-primary,
.book-product-secondary {
  min-height:
    clamp(
      43px,
      4.5vh,
      50px
    ) !important;

  padding:
    0
    clamp(
      17px,
      1.5vw,
      24px
    ) !important;

  font-size:
    clamp(
      .75rem,
      .68rem + .13vw,
      .88rem
    ) !important;
}


/* Feature descriptions */
.book-product-features {
  margin-top:
    clamp(
      24px,
      3vh,
      38px
    ) !important;

  gap:
    clamp(
      14px,
      1.6vw,
      24px
    )
    clamp(
      22px,
      2vw,
      38px
    )
    !important;
}


.book-product-features strong {
  font-size:
    clamp(
      .72rem,
      .65rem + .14vw,
      .86rem
    ) !important;
}


.book-product-features span {
  max-width:
    290px !important;

  font-size:
    clamp(
      .68rem,
      .61rem + .13vw,
      .8rem
    ) !important;
}


/* =========================================================================
   RIGHT SIDE
   ========================================================================= */

.book-product-right {
  width:
    100%;

  display:
    flex;

  justify-content:
    flex-end;
}


/*
 * This was previously max-width: 620px.
 * It can now grow continuously with the screen.
 */
.book-workspace-card {
  width:
    min(
      100%,
      clamp(
        570px,
        43vw,
        790px
      )
    ) !important;

  max-width:
    790px !important;

  margin:
    0 !important;

  border-radius:
    clamp(
      15px,
      1.1vw,
      20px
    );
}


/*
 * Let the workspace preview itself grow,
 * not merely the outside white card.
 */
.book-workspace-head {
  height:
    clamp(
      52px,
      5vh,
      64px
    ) !important;

  padding:
    0
    clamp(
      15px,
      1.4vw,
      23px
    ) !important;
}


.book-workspace-title {
  font-size:
    clamp(
      .75rem,
      .67rem + .15vw,
      .9rem
    ) !important;
}


.book-workspace-subtitle {
  font-size:
    clamp(
      .61rem,
      .56rem + .1vw,
      .72rem
    ) !important;
}


.book-workspace-grid {
  height:
    clamp(
      300px,
      31vw,
      430px
    ) !important;

  min-height:
    300px;
}


.book-mini-chart {
  padding:
    clamp(
      13px,
      1.2vw,
      20px
    ) !important;
}


.book-mini-head strong {
  font-size:
    clamp(
      .68rem,
      .61rem + .12vw,
      .8rem
    ) !important;
}


.book-mini-head span {
  font-size:
    clamp(
      .58rem,
      .53rem + .09vw,
      .68rem
    ) !important;
}


/* Price alert section */
.book-alert-preview {
  min-height:
    clamp(
      58px,
      6vh,
      72px
    ) !important;

  padding:
    clamp(
      9px,
      1vw,
      14px
    )
    clamp(
      13px,
      1.2vw,
      20px
    )
    !important;
}


.book-alert-demo {
  padding:
    0
    clamp(
      13px,
      1.2vw,
      20px
    )
    clamp(
      12px,
      1.2vw,
      18px
    )
    !important;
}


/* =========================================================================
   NORMAL LAPTOPS
   ========================================================================= */

@media
  (min-width: 900px)
  and
  (max-width: 1250px) {

  .book-product-page {
    padding:
      28px
      28px
      42px
      !important;
  }


  .book-product-shell {
    width:
      min(
        calc(100vw - 56px),
        1180px
      ) !important;

    grid-template-columns:
      minmax(330px, .9fr)
      minmax(430px, 1.1fr)
      !important;

    gap:
      clamp(
        30px,
        4vw,
        54px
      ) !important;

    padding:
      12px !important;
  }


  .book-product-left h1 {
    font-size:
      clamp(
        2.8rem,
        4.7vw,
        4.4rem
      ) !important;
  }


  .book-workspace-card {
    width:
      min(
        100%,
        620px
      ) !important;
  }


  .book-workspace-grid {
    height:
      clamp(
        270px,
        32vw,
        350px
      ) !important;
  }
}


/* =========================================================================
   TABLET / SMALL LAPTOP
   ========================================================================= */

@media (max-width: 899px) {

  .book-product-page {
    min-height:
      auto !important;

    padding:
      34px
      22px
      48px
      !important;
  }


  .book-product-shell {
    width:
      min(
        100%,
        760px
      ) !important;

    grid-template-columns:
      1fr !important;

    gap:
      38px !important;

    padding:
      0 !important;
  }


  .book-product-left {
    max-width:
      650px;
  }


  .book-product-left h1 {
    max-width:
      620px !important;
  }


  .book-product-right {
    justify-content:
      flex-start;
  }


  .book-workspace-card {
    width:
      min(
        100%,
        680px
      ) !important;
  }


  .book-workspace-grid {
    height:
      clamp(
        290px,
        55vw,
        390px
      ) !important;
  }
}


/* =========================================================================
   MOBILE
   ========================================================================= */

@media (max-width: 600px) {

  .book-product-page {
    padding:
      28px
      18px
      40px
      !important;
  }


  .book-product-left h1 {
    font-size:
      clamp(
        2.55rem,
        12vw,
        3.6rem
      ) !important;
  }


  .book-product-actions {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .book-product-primary,
  .book-product-secondary {
    width:
      100%;

    justify-content:
      center;
  }


  .book-product-features {
    grid-template-columns:
      1fr !important;
  }


  .book-workspace-grid {
    grid-template-columns:
      1fr !important;

    grid-template-rows:
      auto !important;

    height:
      auto !important;
  }


  .book-mini-chart-main {
    grid-row:
      auto !important;

    min-height:
      260px;
  }


  .book-mini-chart:not(
    .book-mini-chart-main
  ) {
    min-height:
      160px;
  }


  .book-alert-demo {
    grid-template-columns:
      1fr;
  }


  .book-alert-arrow {
    display:
      none;
  }
}


/* =========================================================================
   INVESTMENT BOOK — LARGE SCREEN FLUID CORRECTION
   ========================================================================= */

/*
 * The previous responsive version was technically fluid,
 * but capped too early at 1560px.
 *
 * This only affects large desktop displays.
 * Laptop sizing remains unchanged.
 */

@media (min-width: 1600px) {

  .book-product-page {
    min-height:
      calc(100svh - 105px) !important;

    padding:
      clamp(34px, 4vh, 58px)
      clamp(48px, 5vw, 100px)
      !important;
  }


  .book-product-shell {
    /*
     * Use about 90% of the viewport.
     *
     * At your current 2005px browser width:
     * this becomes roughly 1800px instead of 1560px.
     */
    width:
      min(
        90vw,
        1840px
      ) !important;

    max-width:
      none !important;

    /*
     * Stop the old flex rule from artificially
     * stretching the shell vertically.
     */
    flex:
      0 0 auto !important;

    min-height:
      0 !important;

    grid-template-columns:
      minmax(0, .88fr)
      minmax(0, 1.12fr)
      !important;

    gap:
      clamp(
        60px,
        5vw,
        105px
      ) !important;

    padding:
      clamp(
        24px,
        2vw,
        38px
      ) !important;

    align-items:
      center;
  }


  /* -------------------------------------------------------------
     LEFT
     ------------------------------------------------------------- */

  .book-product-left {
    width:
      100%;

    max-width:
      760px !important;
  }


  .book-product-left h1 {
    max-width:
      760px !important;

    font-size:
      clamp(
        4.7rem,
        4vw,
        6rem
      ) !important;
  }


  .book-product-description {
    max-width:
      710px !important;

    font-size:
      clamp(
        1.04rem,
        .82rem + .28vw,
        1.22rem
      ) !important;
  }


  .book-product-features span {
    max-width:
      310px !important;
  }


  /* -------------------------------------------------------------
     RIGHT
     ------------------------------------------------------------- */

  .book-product-right {
    width:
      100%;

    justify-content:
      stretch !important;
  }


  .book-workspace-card {
    /*
     * Remove the previous 790px ceiling.
     */
    width:
      100% !important;

    max-width:
      900px !important;

    margin:
      0 auto !important;
  }


  .book-workspace-grid {
    height:
      clamp(
        380px,
        24vw,
        470px
      ) !important;
  }


  .book-workspace-head {
    height:
      clamp(
        60px,
        4vw,
        68px
      ) !important;
  }


  .book-alert-preview {
    min-height:
      72px !important;
  }


  /* -------------------------------------------------------------
     TRUST STRIP
     ------------------------------------------------------------- */

  .book-product-trust {
    width:
      min(
        82vw,
        1550px
      ) !important;

    margin-top:
      clamp(
        28px,
        4vh,
        52px
      ) !important;

    min-height:
      52px;
  }
}


/* =========================================================================
   Home market animals
   Decorative transparent video accents. Hero content remains above them.
   ========================================================================= */

.home-market-animal {
  position: absolute;
  bottom: 18px;
  height: auto;
  z-index: 1;

  pointer-events: none;
  user-select: none;

  filter:
    brightness(1.08)
    contrast(1.06)
    saturate(1.05);
}

.home-market-animal--bear {
  left: clamp(24px, 3.75vw, 72px);
  width: clamp(220px, 27vw, 430px);
}

.home-market-animal--bull {
  right: clamp(24px, 3.75vw, 72px);
  width: clamp(250px, 31vw, 495px);
}

/* Keep the animals decorative and away from the text on smaller screens. */
@media (max-width: 900px) {
  .home-market-animal--bear {
    left: 12px;
    width: clamp(170px, 29vw, 240px);
  }

  .home-market-animal--bull {
    right: 12px;
    width: clamp(190px, 33vw, 275px);
  }
}

/* The existing Home content has priority on narrow/mobile screens. */
@media (max-width: 700px) {
  .home-market-animal {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-market-animal {
    display: none;
  }
}


/* =========================================================================
   HOME — CANONICAL FLUID LAYOUT
   One responsive system only.
   ========================================================================= */


/* -------------------------------------------------------------------------
   Main hero
   ------------------------------------------------------------------------- */

.home-hero {
  position: relative;

  width: 100%;

  min-height:
    clamp(
      560px,
      calc(100svh - 210px),
      840px
    )
    !important;

  display: flex;

  align-items: center;

  overflow: hidden;

  padding:
    clamp(42px, 5vh, 76px)
    0
    clamp(46px, 6vh, 84px)
    !important;
}


/*
 * This is the overall composition width.
 *
 * It grows continuously:
 *
 * 13" laptop  -> smaller composition
 * normal desktop -> medium composition
 * 24" desktop -> much wider composition
 */
.home-hero .hero-inner {
  width:
    clamp(
      900px,
      72vw,
      1320px
    ) !important;

  max-width:
    none !important;

  margin:
    0 auto !important;

  padding:
    0
    clamp(24px, 2.2vw, 42px)
    !important;

  position: relative;

  z-index: 2;
}


/* -------------------------------------------------------------------------
   Text column
   ------------------------------------------------------------------------- */

.home-hero .eyebrow,
.home-hero .hero-title,
.home-hero .hero-tagline,
.home-hero .hero-intro,
.home-hero .hero-question {
  width:
    clamp(
      690px,
      56vw,
      1050px
    ) !important;

  max-width:
    none !important;

  margin-left:
    auto !important;

  margin-right:
    auto !important;
}


.home-hero .eyebrow {
  margin-bottom:
    clamp(
      8px,
      .8vh,
      13px
    )
    !important;
}


/* -------------------------------------------------------------------------
   Title
   ------------------------------------------------------------------------- */

.home-hero .hero-title {
  margin-top:
    0 !important;

  /*
   * Gap between the title and the tagline.
   * Width-based, not height-based: the old 1vh tied this gap to viewport
   * height, so a tall phone got a larger gap than a laptop.
   * Resolves to 12px on mobile/tablet, 16px from ~1280px upward.
   */
  margin-bottom:
    clamp(
      12px,
      1.25vw,
      16px
    )
    !important;

  font-size:
    clamp(
      3.4rem,
      3.25vw,
      5.6rem
    )
    !important;

  line-height:
    .96
    !important;

  letter-spacing:
    -.045em;
}


/* -------------------------------------------------------------------------
   Tagline
   ------------------------------------------------------------------------- */

.home-hero .hero-tagline {
  margin-top:
    0 !important;

  margin-bottom:
    clamp(
      24px,
      2.8vh,
      36px
    )
    !important;

  font-size:
    clamp(
      1.08rem,
      .75rem + .55vw,
      1.55rem
    )
    !important;

  line-height:
    1.35;
}


/* -------------------------------------------------------------------------
   Intro
   ------------------------------------------------------------------------- */

.home-hero .hero-intro {
  width:
    clamp(
      650px,
      52vw,
      960px
    )
    !important;

  margin-top:
    0 !important;

  margin-bottom:
    0 !important;

  font-size:
    clamp(
      .98rem,
      .78rem + .32vw,
      1.18rem
    )
    !important;

  line-height:
    1.62
    !important;
}


/* -------------------------------------------------------------------------
   Question / CTA
   ------------------------------------------------------------------------- */

.home-hero .hero-question {
  width:
    clamp(
      650px,
      52vw,
      960px
    )
    !important;

  margin-top:
    clamp(
      30px,
      4vh,
      50px
    )
    !important;

  padding:
    clamp(
      25px,
      3vh,
      36px
    )
    0
    0
    !important;

  border-top:
    1px solid
    var(--color-border);
}


.home-hero .question {
  margin:
    0
    0
    clamp(
      18px,
      2vh,
      25px
    )
    !important;

  font-size:
    clamp(
      1.6rem,
      1.15rem + .8vw,
      2.35rem
    )
    !important;

  line-height:
    1.15;
}


/* -------------------------------------------------------------------------
   Candlesticks
   ------------------------------------------------------------------------- */

.home-candles {
  position: absolute;

  top:
    50% !important;

  width:
    clamp(
      115px,
      10.5vw,
      245px
    )
    !important;

  height:
    clamp(
      290px,
      42vh,
      510px
    )
    !important;

  opacity:
    .50
    !important;

  pointer-events:
    none;
}


.home-candles-left {
  left:
    clamp(
      18px,
      3.8vw,
      90px
    )
    !important;

  transform:
    translateY(-50%)
    !important;
}


.home-candles-right {
  right:
    clamp(
      18px,
      3.8vw,
      90px
    )
    !important;

  transform:
    translateY(-50%)
    scaleX(-1)
    !important;
}


/* =========================================================================
   LAPTOP
   Roughly 13" / 14" browser widths
   ========================================================================= */

@media
  (min-width: 901px)
  and
  (max-width: 1450px) {

  .home-hero {
    min-height:
      clamp(
        540px,
        calc(100svh - 210px),
        720px
      )
      !important;

    padding:
      clamp(38px, 4.5vh, 58px)
      0
      clamp(40px, 5vh, 64px)
      !important;
  }


  .home-hero .hero-inner {
    width:
      min(
        calc(100vw - 120px),
        1120px
      )
      !important;
  }


  .home-hero .eyebrow,
  .home-hero .hero-title,
  .home-hero .hero-tagline,
  .home-hero .hero-intro,
  .home-hero .hero-question {
    width:
      min(
        72vw,
        820px
      )
      !important;
  }


  .home-hero .hero-title {
    font-size:
      clamp(
        3.25rem,
        4.5vw,
        4.45rem
      )
      !important;
  }


  .home-hero .hero-intro {
    width:
      min(
        68vw,
        760px
      )
      !important;
  }


  .home-hero .hero-question {
    width:
      min(
        68vw,
        760px
      )
      !important;
  }


  .home-candles {
    width:
      clamp(
        100px,
        9vw,
        145px
      )
      !important;

    height:
      clamp(
        270px,
        38vh,
        390px
      )
      !important;
  }
}


/* =========================================================================
   LARGE DESKTOP
   ========================================================================= */

@media (min-width: 1700px) {

  .home-hero .hero-inner {
    width:
      min(
        82vw,
        1550px
      )
      !important;
  }


  .home-hero .eyebrow,
  .home-hero .hero-title,
  .home-hero .hero-tagline {
    width:
      min(
        64vw,
        1160px
      )
      !important;
  }


  .home-hero .hero-intro,
  .home-hero .hero-question {
    width:
      min(
        60vw,
        1080px
      )
      !important;
  }


  .home-hero .hero-title {
    font-size:
      clamp(
        4.8rem,
        4.1vw,
        6.3rem
      )
      !important;
  }


  .home-candles {
    width:
      clamp(
        190px,
        12vw,
        285px
      )
      !important;

    height:
      clamp(
        390px,
        48vh,
        570px
      )
      !important;
  }
}


/* =========================================================================
   TABLET
   ========================================================================= */

@media
  (min-width: 701px)
  and
  (max-width: 900px) {

  .home-hero {
    min-height:
      auto
      !important;

    padding:
      44px
      28px
      54px
      !important;
  }


  .home-hero .hero-inner,
  .home-hero .eyebrow,
  .home-hero .hero-title,
  .home-hero .hero-tagline,
  .home-hero .hero-intro,
  .home-hero .hero-question {
    width:
      100%
      !important;
  }


  .home-candles {
    opacity:
      .24 !important;
  }
}


/* =========================================================================
   MOBILE
   ========================================================================= */

@media (max-width: 700px) {

  .home-hero {
    min-height:
      auto
      !important;

    display:
      block;

    padding:
      34px
      20px
      46px
      !important;
  }


  .home-hero .hero-inner,
  .home-hero .eyebrow,
  .home-hero .hero-title,
  .home-hero .hero-tagline,
  .home-hero .hero-intro,
  .home-hero .hero-question {
    width:
      100%
      !important;

    max-width:
      none
      !important;
  }


  .home-hero .hero-title {
    font-size:
      clamp(
        2.7rem,
        12vw,
        4rem
      )
      !important;
  }


  .home-candles {
    display:
      none
      !important;
  }
}
/* =========================================================================
   PUBLISHED ARTICLE — FINAL RESPONSIVE LAYOUT
   Writer Portal image parity + wider reading column
   ========================================================================= */


/* -------------------------------------------------------------------------
   ARTICLE WIDTH
   ------------------------------------------------------------------------- */

.post-main {
  width: 100% !important;
  min-width: 0 !important;
}


.post-main .prose {
  width:
    min(
      100%,
      960px
    )
    !important;

  max-width:
    960px
    !important;

  margin-left:
    auto
    !important;

  margin-right:
    auto
    !important;
}


/*
 * No table of contents.
 */
@media (min-width: 1200px) {

  .post-grid.post-grid-no-toc {
    width:
      min(
        calc(100% - 48px),
        1040px
      )
      !important;

    max-width:
      1040px
      !important;

    grid-template-columns:
      minmax(
        0,
        960px
      )
      !important;

    justify-content:
      center
      !important;

    margin-left:
      auto
      !important;

    margin-right:
      auto
      !important;
  }


  /*
   * Article with table of contents.
   */
  .post-grid:not(.post-grid-no-toc) {
    width:
      min(
        calc(100% - 48px),
        1260px
      )
      !important;

    max-width:
      1260px
      !important;

    grid-template-columns:
      220px
      minmax(
        0,
        960px
      )
      !important;

    justify-content:
      center
      !important;
  }
}


/*
 * Normal laptop.
 */
@media
  (min-width: 900px)
  and
  (max-width: 1199px) {

  .post-main .prose {
    width:
      min(
        100%,
        860px
      )
      !important;

    max-width:
      860px
      !important;
  }
}


/*
 * Small laptop / tablet.
 */
@media
  (min-width: 701px)
  and
  (max-width: 899px) {

  .post-main .prose {
    width:
      100%
      !important;

    max-width:
      100%
      !important;
  }
}


/* -------------------------------------------------------------------------
   WRITER IMAGE SIZE PARITY
   ------------------------------------------------------------------------- */

.prose figure.article-image {
  box-sizing:
    border-box
    !important;

  max-width:
    100%
    !important;
}


/*
 * Writer-selected Small / Medium / manually resized
 * images retain the width serialized onto the figure.
 *
 * Do NOT force them back to 100%.
 */
.prose figure.article-image[data-width]:not([data-width="full"]) {
  max-width:
    100%
    !important;
}


/*
 * Full image.
 */
.prose figure.article-image[data-width="full"] {
  width:
    100%
    !important;

  max-width:
    100%
    !important;

  float:
    none
    !important;

  clear:
    both
    !important;

  margin:
    var(--space-5)
    0
    !important;
}


/*
 * The actual image fills only its selected figure.
 */
.prose figure.article-image > img {
  display:
    block
    !important;

  width:
    100%
    !important;

  max-width:
    100%
    !important;

  height:
    auto
    !important;

  max-height:
    none
    !important;

  object-fit:
    contain
    !important;

  object-position:
    center
    !important;
}


/* -------------------------------------------------------------------------
   ALIGNMENT
   ------------------------------------------------------------------------- */


/* Center */
.prose figure.article-image[data-align="center"],
.prose figure.article-image.align-center {
  float:
    none
    !important;

  clear:
    both
    !important;

  margin:
    var(--space-5)
    auto
    !important;
}


/*
 * Small / medium image on LEFT.
 *
 * Text naturally wraps around its right side.
 */
.prose figure.article-image[data-align="left"]:not([data-width="full"]),
.prose figure.article-image.align-left[data-width]:not([data-width="full"]) {
  float:
    left
    !important;

  clear:
    none
    !important;

  margin:
    8px
    30px
    20px
    0
    !important;
}


/*
 * Small / medium image on RIGHT.
 *
 * Text naturally wraps around its left side.
 */
.prose figure.article-image[data-align="right"]:not([data-width="full"]),
.prose figure.article-image.align-right[data-width]:not([data-width="full"]) {
  float:
    right
    !important;

  clear:
    none
    !important;

  margin:
    8px
    0
    20px
    30px
    !important;
}


/*
 * Backward compatibility for old published figures
 * that have style width but no data-width yet.
 */
.prose figure.article-image.align-left[style]:not([data-width]) {
  float:
    left
    !important;

  clear:
    none
    !important;

  margin:
    8px
    30px
    20px
    0
    !important;
}


.prose figure.article-image.align-right[style]:not([data-width]) {
  float:
    right
    !important;

  clear:
    none
    !important;

  margin:
    8px
    0
    20px
    30px
    !important;
}


/*
 * Old unsized figure means Full.
 */
.prose figure.article-image:not([style]):not([data-width]) {
  width:
    100%
    !important;

  max-width:
    100%
    !important;

  float:
    none
    !important;

  clear:
    both
    !important;

  margin:
    var(--space-5)
    0
    !important;
}


/* Caption stays attached to the selected image. */
.prose figure.article-image figcaption {
  width:
    100%;

  margin-top:
    8px;

  text-align:
    center;
}


/*
 * Text wrapping safety.
 */
.prose p,
.prose li,
.prose blockquote {
  overflow-wrap:
    anywhere;
}


/*
 * New section begins beneath a floating image.
 */
.prose h1,
.prose h2,
.prose h3,
.prose hr {
  clear:
    both
    !important;
}


/*
 * Contain floated images inside the article.
 */
.prose::after {
  content:
    "";

  display:
    block;

  clear:
    both;
}


/* -------------------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------------------- */

@media (max-width: 700px) {

  .post-main .prose {
    width:
      100%
      !important;

    max-width:
      100%
      !important;
  }


  /*
   * On phones, intentionally stack all images.
   */
  .prose figure.article-image,
  .prose figure.article-image[data-align],
  .prose figure.article-image[data-width] {
    width:
      100%
      !important;

    max-width:
      100%
      !important;

    float:
      none
      !important;

    clear:
      both
      !important;

    margin:
      var(--space-5)
      0
      !important;
  }
}


/* =========================================================================
   INVESTMENT BOOK — TRUST STRIP POLISH
   ========================================================================= */

.book-product-trust {
  width:
    min(
      calc(100% - 40px),
      1180px
    )
    !important;

  margin:
    clamp(26px, 4vh, 46px)
    auto
    0
    !important;

  padding:
    0
    !important;

  display:
    grid
    !important;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    )
    !important;

  gap:
    clamp(
      12px,
      1.5vw,
      20px
    )
    !important;
}


.book-product-trust span {
  min-height:
    76px;

  display:
    flex
    !important;

  align-items:
    center
    !important;

  justify-content:
    center
    !important;

  gap:
    10px;

  padding:
    16px
    20px
    !important;

  border:
    1px solid
    rgba(39, 75, 52, .12);

  border-radius:
    12px;

  background:
    rgba(
      255,
      255,
      255,
      .72
    );

  box-shadow:
    0 6px 20px
    rgba(
      29,
      54,
      38,
      .05
    );

  color:
    var(--color-text)
    !important;

  font-family:
    var(--font-sans);

  font-size:
    clamp(
      .86rem,
      .75rem + .25vw,
      1.05rem
    )
    !important;

  font-weight:
    700;

  line-height:
    1.35;

  text-align:
    center;
}


/* Larger visual icon without changing the HTML */
.book-product-trust span::first-letter {
  font-size:
    1.25em;
}


/* Tablet */
@media (max-width: 850px) {

  .book-product-trust {
    grid-template-columns:
      1fr
      !important;

    width:
      min(
        100%,
        680px
      )
      !important;
  }


  .book-product-trust span {
    min-height:
      64px;

    justify-content:
      flex-start
      !important;

    text-align:
      left;
  }
}


/* Mobile */
@media (max-width: 600px) {

  .book-product-trust {
    width:
      100%
      !important;

    margin-top:
      24px
      !important;

    gap:
      10px
      !important;
  }


  .book-product-trust span {
    padding:
      14px
      16px
      !important;

    font-size:
      .9rem
      !important;
  }
}


/* =========================================================================
   INVESTMENT BOOK — FEATURE TEXT SIZE
   Only affects the four marketing features on /book/
   ========================================================================= */

.book-product-features {
  gap:
    clamp(
      18px,
      2vw,
      28px
    )
    !important;
}


.book-product-features > div {
  min-width: 0;
}


/* Feature heading */
.book-product-features strong {
  display:
    block;

  margin-bottom:
    7px;

  font-size:
    clamp(
      .95rem,
      .82rem + .28vw,
      1.18rem
    )
    !important;

  line-height:
    1.25
    !important;

  font-weight:
    750
    !important;

  color:
    var(--color-heading)
    !important;
}


/* Feature description */
.book-product-features span {
  display:
    block;

  max-width:
    34ch;

  font-size:
    clamp(
      .82rem,
      .74rem + .18vw,
      1rem
    )
    !important;

  line-height:
    1.5
    !important;

  color:
    var(--color-text-muted)
    !important;
}


/* Larger screens */
@media (min-width: 1400px) {

  .book-product-features strong {
    font-size:
      1.16rem
      !important;
  }


  .book-product-features span {
    font-size:
      .98rem
      !important;
  }
}


/* Small screens */
@media (max-width: 700px) {

  .book-product-features strong {
    font-size:
      1rem
      !important;
  }


  .book-product-features span {
    max-width:
      none;

    font-size:
      .88rem
      !important;
  }
}


/* =========================================================================
   INVESTMENT BOOK — FINAL FLUID RESPONSIVE LAYOUT
   Prevent oversized/cropped hero on laptop screens while allowing the
   composition to grow naturally on larger displays.
   ========================================================================= */


/* -------------------------------------------------------------------------
   BASE DESKTOP
   ------------------------------------------------------------------------- */

.book-product-page {
  overflow-x: clip !important;
}

.book-product-shell {
  width:
    min(
      calc(100% - 48px),
      1440px
    )
    !important;

  max-width:
    1440px
    !important;

  margin-left:
    auto
    !important;

  margin-right:
    auto
    !important;

  padding:
    clamp(42px, 5vh, 72px)
    0
    clamp(48px, 6vh, 84px)
    !important;

  display:
    grid
    !important;

  grid-template-columns:
    minmax(0, .88fr)
    minmax(0, 1.12fr)
    !important;

  gap:
    clamp(
      44px,
      5vw,
      96px
    )
    !important;

  align-items:
    center
    !important;
}


.book-product-left,
.book-product-right {
  min-width:
    0
    !important;
}


/* Main heading must scale from the actual available screen width */
.book-product-left > h1 {
  /* max-width: 9.8ch removed - the ch cap forced the heading to 5 lines at
     every desktop width. Width now comes from .book-product-left. */

  margin-top:
    0
    !important;

  font-size:
    clamp(
      3.25rem,
      4.6vw,
      5.5rem
    )
    !important;

  line-height:
    .95
    !important;

  letter-spacing:
    -.04em
    !important;
}


.book-product-description {
  width:
    100%
    !important;

  max-width:
    610px
    !important;

  font-size:
    clamp(
      .98rem,
      .82rem + .25vw,
      1.1rem
    )
    !important;

  line-height:
    1.62
    !important;
}


/* The marketing feature grid remains readable without forcing the hero wide */
.book-product-features {
  width:
    100%
    !important;

  display:
    grid
    !important;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    )
    !important;

  column-gap:
    clamp(
      24px,
      3vw,
      46px
    )
    !important;

  row-gap:
    clamp(
      20px,
      2.4vw,
      30px
    )
    !important;
}


/* -------------------------------------------------------------------------
   MARKET WORKSPACE PREVIEW
   ------------------------------------------------------------------------- */

.book-product-right {
  display:
    flex
    !important;

  align-items:
    center
    !important;

  justify-content:
    center
    !important;
}


.book-workspace-card {
  width:
    100%
    !important;

  max-width:
    760px
    !important;

  min-width:
    0
    !important;

  overflow:
    hidden
    !important;
}


.book-workspace-grid {
  min-width:
    0
    !important;
}


.book-mini-chart,
.book-mini-chart-main {
  min-width:
    0
    !important;

  overflow:
    hidden
    !important;
}


.book-mini-svg {
  display:
    block
    !important;

  width:
    100%
    !important;

  max-width:
    100%
    !important;

  /*
   * Was height: auto, which gave the SVG its intrinsic 500:170 ratio and
   * left it filling only ~28% of the chart cell. The markup carries
   * preserveAspectRatio="none" precisely so the path can stretch to fit.
   */
  height:
    calc(100% - 24px)
    !important;

  overflow:
    hidden
    !important;
}


/*
 * Prevent the final bar / line point from touching or being clipped by
 * the visual edge of the mini chart.
 */
.book-mini-chart {
  padding-left:
    clamp(14px, 1.3vw, 22px)
    !important;

  padding-right:
    clamp(18px, 1.5vw, 28px)
    !important;

  box-sizing:
    border-box
    !important;
}


/* -------------------------------------------------------------------------
   13" / 14" LAPTOP
   ------------------------------------------------------------------------- */

@media
  (min-width: 901px)
  and
  (max-width: 1450px) {

  .book-product-shell {
    width:
      min(
        calc(100% - 52px),
        1180px
      )
      !important;

    grid-template-columns:
      minmax(0, .9fr)
      minmax(0, 1.1fr)
      !important;

    gap:
      clamp(
        34px,
        4vw,
        58px
      )
      !important;

    padding:
      clamp(38px, 4.5vh, 56px)
      0
      clamp(44px, 5vh, 62px)
      !important;
  }


  .book-product-left > h1 {
    font-size:
      clamp(
        3.15rem,
        4.55vw,
        4.65rem
      )
      !important;

    /* max-width: 9.5ch removed - see base rule. */
  }


  .book-product-description {
    max-width:
      540px
      !important;
  }


  .book-product-actions {
    flex-wrap:
      wrap
      !important;
  }


  .book-product-features strong {
    font-size:
      1rem
      !important;
  }


  .book-product-features span {
    font-size:
      .88rem
      !important;

    line-height:
      1.45
      !important;
  }


  .book-workspace-card {
    max-width:
      650px
      !important;
  }
}


/* -------------------------------------------------------------------------
   SMALL LAPTOP / TABLET
   ------------------------------------------------------------------------- */

@media
  (min-width: 701px)
  and
  (max-width: 1000px) {

  .book-product-shell {
    width:
      min(
        calc(100% - 40px),
        820px
      )
      !important;

    grid-template-columns:
      1fr
      !important;

    gap:
      44px
      !important;

    padding:
      42px
      0
      54px
      !important;
  }


  .book-product-left > h1 {
    /* max-width: 10ch removed - see base rule. */

    font-size:
      clamp(
        3rem,
        7vw,
        4.25rem
      )
      !important;
  }


  .book-product-description {
    max-width:
      680px
      !important;
  }


  .book-product-right {
    width:
      100%
      !important;
  }


  .book-workspace-card {
    width:
      100%
      !important;

    max-width:
      760px
      !important;
  }
}


/* -------------------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------------------- */

@media (max-width: 700px) {

  .book-product-shell {
    width:
      calc(100% - 32px)
      !important;

    grid-template-columns:
      1fr
      !important;

    gap:
      36px
      !important;

    padding:
      34px
      0
      46px
      !important;
  }


  .book-product-left > h1 {
    max-width:
      none
      !important;

    font-size:
      clamp(
        2.7rem,
        12vw,
        3.8rem
      )
      !important;

    line-height:
      .98
      !important;
  }


  .book-product-description {
    max-width:
      none
      !important;
  }


  .book-product-actions {
    display:
      grid
      !important;

    grid-template-columns:
      1fr
      !important;

    width:
      100%
      !important;
  }


  .book-product-actions a {
    width:
      100%
      !important;

    justify-content:
      center
      !important;
  }


  .book-product-features {
    grid-template-columns:
      1fr
      !important;

    row-gap:
      20px
      !important;
  }


  .book-workspace-card {
    width:
      100%
      !important;

    max-width:
      100%
      !important;
  }


  .book-product-trust {
    width:
      100%
      !important;
  }
}


/* -------------------------------------------------------------------------
   LARGE DESKTOP
   ------------------------------------------------------------------------- */

@media (min-width: 1700px) {

  .book-product-shell {
    width:
      min(
        82vw,
        1540px
      )
      !important;

    max-width:
      1540px
      !important;

    grid-template-columns:
      minmax(0, .9fr)
      minmax(0, 1.1fr)
      !important;

    gap:
      clamp(
        72px,
        6vw,
        120px
      )
      !important;
  }


  .book-product-left > h1 {
    font-size:
      clamp(
        5rem,
        4.3vw,
        6.2rem
      )
      !important;
  }


  .book-workspace-card {
    max-width:
      820px
      !important;
  }
}



/* =========================================================================
   FINAL INVESTMENT BOOK FLUID RESPONSIVE FIX
   ========================================================================= */


/* -------------------------------------------------------------------------
   PAGE
   ------------------------------------------------------------------------- */

.book-product-page {
  width: 100% !important;
  min-height: auto !important;
  overflow-x: clip !important;
}


/*
 * Main composition.
 *
 * Do not size the page from viewport height.
 * Let the content determine its natural height.
 */
.book-product-shell {
  width: min(calc(100% - 48px), 1320px) !important;
  max-width: 1320px !important;

  margin: 0 auto !important;

  display: grid !important;
  grid-template-columns:
    minmax(0, 0.92fr)
    minmax(0, 1.08fr) !important;

  gap: clamp(42px, 5vw, 82px) !important;

  align-items: center !important;

  padding:
    clamp(54px, 6vw, 92px)
    0
    clamp(36px, 4vw, 64px)
    !important;

  min-height: 0 !important;
  height: auto !important;
}


/* -------------------------------------------------------------------------
   LEFT COLUMN
   ------------------------------------------------------------------------- */

.book-product-left {
  width: 100% !important;
  max-width: 560px !important;
  min-width: 0 !important;
}


.book-product-left h1 {
  margin:
    0
    0
    clamp(22px, 2.5vw, 34px)
    !important;

  font-size:
    clamp(
      3.35rem,
      4.35vw,
      5.1rem
    )
    !important;

  line-height:
    .97
    !important;

  letter-spacing:
    -.045em
    !important;
}


.book-product-description {
  max-width: 570px !important;

  font-size:
    clamp(
      1rem,
      .91rem + .16vw,
      1.12rem
    )
    !important;

  line-height:
    1.65
    !important;
}


/* -------------------------------------------------------------------------
   ACTIONS
   ------------------------------------------------------------------------- */

.book-product-actions {
  display: flex !important;
  flex-wrap: wrap !important;

  gap: 12px !important;

  margin-top:
    24px
    !important;
}


/* -------------------------------------------------------------------------
   FOUR FEATURES
   ------------------------------------------------------------------------- */

.book-product-features {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr))
    !important;

  gap:
    24px
    34px
    !important;

  margin-top:
    30px
    !important;
}


.book-product-features > div {
  min-width: 0 !important;
}


.book-product-features strong {
  font-size:
    clamp(
      1rem,
      .92rem + .18vw,
      1.13rem
    )
    !important;

  line-height:
    1.25
    !important;

  margin-bottom:
    6px
    !important;
}


.book-product-features span {
  max-width:
    32ch
    !important;

  font-size:
    clamp(
      .86rem,
      .81rem + .1vw,
      .96rem
    )
    !important;

  line-height:
    1.48
    !important;
}


/* -------------------------------------------------------------------------
   RIGHT WORKSPACE PREVIEW
   ------------------------------------------------------------------------- */

.book-product-right {
  width: 100% !important;
  min-width: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}


.book-workspace-card {
  width: 100% !important;
  max-width: 650px !important;

  min-width: 0 !important;

  margin:
    0 auto
    !important;

  transform: none !important;
}


/*
 * Prevent SVG/chart content from forcing the preview
 * wider than its grid cell.
 */
.book-workspace-card,
.book-workspace-card *,
.book-mini-chart,
.book-mini-svg {
  box-sizing: border-box;
}


.book-mini-svg {
  width: 100% !important;
  max-width: 100% !important;
}


/* -------------------------------------------------------------------------
   TRUST STRIP
   ONE QUIET STRIP, NOT THREE WHITE CARDS
   ------------------------------------------------------------------------- */

.book-product-trust {
  width:
    min(
      calc(100% - 48px),
      1180px
    )
    !important;

  max-width:
    1180px
    !important;

  margin:
    clamp(28px, 4vw, 46px)
    auto
    clamp(36px, 5vw, 62px)
    !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;

  gap:
    0
    !important;

  overflow:
    hidden
    !important;

  border:
    1px solid
    rgba(47, 116, 85, .15)
    !important;

  border-radius:
    10px
    !important;

  background:
    rgba(237, 246, 240, .72)
    !important;

  box-shadow:
    none
    !important;

  padding:
    0
    !important;
}


.book-product-trust span {
  flex:
    1 1 0
    !important;

  min-width:
    220px
    !important;

  min-height:
    54px
    !important;

  display:
    flex
    !important;

  align-items:
    center
    !important;

  justify-content:
    center
    !important;

  padding:
    14px
    20px
    !important;

  margin:
    0
    !important;

  border:
    0
    !important;

  border-radius:
    0
    !important;

  background:
    transparent
    !important;

  box-shadow:
    none
    !important;

  color:
    var(--color-accent-strong)
    !important;

  font-family:
    var(--font-sans)
    !important;

  font-size:
    clamp(
      .84rem,
      .78rem + .12vw,
      .96rem
    )
    !important;

  font-weight:
    700
    !important;

  line-height:
    1.3
    !important;

  text-align:
    center
    !important;
}


.book-product-trust span + span {
  border-left:
    1px solid
    rgba(47, 116, 85, .13)
    !important;
}


/* =========================================================================
   MACBOOK / NORMAL LAPTOP
   ========================================================================= */

@media
  (min-width: 1000px)
  and
  (max-width: 1450px) {

  .book-product-shell {
    width:
      min(
        calc(100% - 56px),
        1180px
      )
      !important;

    grid-template-columns:
      minmax(0, .9fr)
      minmax(0, 1.1fr)
      !important;

    gap:
      clamp(
        34px,
        4vw,
        58px
      )
      !important;

    padding:
      54px
      0
      36px
      !important;
  }


  .book-product-left {
    max-width:
      500px
      !important;
  }


  .book-product-left h1 {
    font-size:
      clamp(
        3.15rem,
        4.1vw,
        4.35rem
      )
      !important;
  }


  .book-workspace-card {
    max-width:
      590px
      !important;
  }


  .book-product-features {
    gap:
      20px
      28px
      !important;
  }


  .book-product-trust {
    margin-top:
      28px
      !important;

    margin-bottom:
      34px
      !important;
  }
}


/* =========================================================================
   SMALL LAPTOP / TABLET LANDSCAPE
   ========================================================================= */

@media
  (min-width: 760px)
  and
  (max-width: 999px) {

  .book-product-shell {
    width:
      min(
        calc(100% - 48px),
        860px
      )
      !important;

    grid-template-columns:
      1fr
      !important;

    gap:
      44px
      !important;

    padding:
      50px
      0
      32px
      !important;
  }


  .book-product-left {
    width:
      min(
        100%,
        650px
      )
      !important;

    max-width:
      650px
      !important;

    margin:
      0 auto
      !important;
  }


  .book-product-left h1 {
    font-size:
      clamp(
        3.2rem,
        7vw,
        4.7rem
      )
      !important;
  }


  .book-product-right {
    width:
      min(
        100%,
        720px
      )
      !important;

    margin:
      0 auto
      !important;
  }


  .book-workspace-card {
    max-width:
      720px
      !important;
  }


  .book-product-trust {
    width:
      min(
        calc(100% - 48px),
        860px
      )
      !important;
  }
}


/* =========================================================================
   MOBILE
   ========================================================================= */

@media (max-width: 759px) {

  .book-product-shell {
    width:
      calc(100% - 32px)
      !important;

    grid-template-columns:
      1fr
      !important;

    gap:
      34px
      !important;

    padding:
      38px
      0
      26px
      !important;
  }


  .book-product-left {
    max-width:
      none
      !important;
  }


  .book-product-left h1 {
    font-size:
      clamp(
        2.7rem,
        12vw,
        4rem
      )
      !important;
  }


  .book-product-description {
    max-width:
      none
      !important;
  }


  .book-product-actions {
    display:
      grid
      !important;

    grid-template-columns:
      1fr
      !important;
  }


  .book-product-actions a {
    width:
      100%
      !important;

    text-align:
      center
      !important;
  }


  .book-product-features {
    grid-template-columns:
      1fr
      !important;

    gap:
      20px
      !important;
  }


  .book-product-features span {
    max-width:
      none
      !important;
  }


  .book-product-right {
    width:
      100%
      !important;
  }


  .book-workspace-card {
    width:
      100%
      !important;

    max-width:
      100%
      !important;
  }


  .book-product-trust {
    width:
      calc(100% - 32px)
      !important;

    display:
      block
      !important;

    margin-top:
      24px
      !important;

    margin-bottom:
      30px
      !important;
  }


  .book-product-trust span {
    width:
      100%
      !important;

    min-width:
      0
      !important;

    min-height:
      50px
      !important;

    justify-content:
      flex-start
      !important;

    text-align:
      left
      !important;
  }


  .book-product-trust span + span {
    border-left:
      0
      !important;

    border-top:
      1px solid
      rgba(47, 116, 85, .13)
      !important;
  }
}


/* =========================================================================
   VERY LARGE DESKTOP
   ========================================================================= */

@media (min-width: 1700px) {

  .book-product-shell {
    max-width:
      1460px
      !important;

    grid-template-columns:
      minmax(0, .9fr)
      minmax(0, 1.1fr)
      !important;

    gap:
      90px
      !important;
  }


  .book-product-left {
    max-width:
      610px
      !important;
  }


  .book-product-left h1 {
    font-size:
      5.4rem
      !important;
  }


  .book-workspace-card {
    max-width:
      720px
      !important;
  }
}