/* Claude Code's observation-first composition, scoped to the product LP. */
.monthly-landing { color: #1f2a44; background: #f4efe6; }
.monthly-landing .monthly-hero { min-height: 0; padding-block: 40px 52px; gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.monthly-landing .monthly-hero h1 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.5; margin-block: 12px 20px; }
.monthly-landing .monthly-lead { font-size: 16px; line-height: 1.95; max-width: 32em; }
.monthly-landing .monthly-section { padding-block: 48px; }
.monthly-landing .monthly-section h2 { font-size: clamp(26px, 3vw, 38px); }
.monthly-landing .ml-product-name { font-family: var(--monthly-sans); color: #80691f; letter-spacing: .16em; }
.monthly-landing .ml-proof { margin: 0; padding: 20px; border: 1px solid #d9cfbd; background: #fffdf8; box-shadow: 0 8px 28px #1f2a4409; min-width: 0; }
.monthly-landing .ml-proof figcaption { display: flex; flex-direction: column; gap: 4px; text-align: left; margin: 0 0 16px; }
.monthly-landing .ml-proof-copy time { font: 11px var(--monthly-sans); color: #6f6b63; }
.monthly-landing .ml-proof-copy h2 { font-size: 19px; line-height: 1.6; margin: 8px 0; }
.monthly-landing .ml-proof-copy p { font-size: 13px; line-height: 1.8; margin: 0 0 12px; }
.monthly-landing .monthly-daily-chart { margin: 0; border: 0; background: transparent; }
/* Reserve the completed 440px image plus its border so incoming #price/#try-sample
   links stay in place while the managed preview is loading. */
.monthly-landing .monthly-daily-chart-body { padding: 0; min-height: 442px; }
.monthly-landing .monthly-daily-chart [data-monthly-dignity-legend], .monthly-landing .monthly-daily-chart [data-monthly-dignity-summary] { font-size: 10px; }
.monthly-landing .monthly-daily-chart-reference, .monthly-landing .monthly-daily-chart-legend { font-size: 10px; }
.monthly-landing .monthly-daily-chart .chart-image-preview img { max-height: 440px; object-fit: contain; }
.monthly-landing .ml-proof-chart { margin: 12px 0; padding: 0; border: 0; }
.monthly-landing .ml-proof-chart > summary { padding: 8px 0; min-height: 44px; font-size: 12px; }
.monthly-landing .ml-section-lead { max-width: 48em; }
.monthly-landing .ml-proof-label { color: #80691f; font: 600 13px/1.7 var(--monthly-sans); margin: 0 0 12px; }
.monthly-landing .ml-common-proof { margin-top: 28px; padding: 24px 28px; background: #eae3d5; border-top: 2px solid #b8912f; }
.monthly-landing .ml-common-proof h3 { margin: 0 0 12px; font-size: 22px; line-height: 1.6; }
.monthly-landing .ml-common-proof p:last-child { margin-bottom: 0; }
.monthly-landing .ml-personal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin: 28px 0 20px; }
.monthly-landing .ml-personal-person { min-width: 0; padding: 0 4px; }
.monthly-landing .ml-personal-person h3 { font-size: 20px; margin: 0 0 16px; }
.monthly-landing .ml-personal-person blockquote { margin: 0; padding: 0 0 0 18px; border-left: 2px solid #b8912f; font-size: 15px; line-height: 1.95; }
.monthly-landing .ml-proof-facts { border-top: 1px solid #d9cfbd; margin-top: 20px; }
.monthly-landing .ml-proof-facts summary { cursor: pointer; min-height: 44px; padding-block: 12px; font: 13px/1.6 var(--monthly-sans); }
.monthly-landing .ml-proof-facts p { font: 13px/1.8 var(--monthly-sans); }
.monthly-landing .ml-experienced { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 36px; }
.monthly-landing .ml-experienced > div { min-width: 0; }
.monthly-landing .ml-experienced > div > p:first-child { margin-top: 0; }
.monthly-landing .ml-experienced .monthly-fake-note { margin-top: 20px; }
.monthly-landing .ml-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.monthly-landing .ml-service-grid article { min-width: 0; padding: 24px; border: 1px solid #d9cfbd; }
.monthly-landing .ml-service-grid article.is-highlight { background: #fffdf8; border-top: 3px solid #b8912f; }
.monthly-landing .ml-service-grid h3 { font-size: 22px; line-height: 1.5; margin: 0 0 16px; }
.monthly-landing .ml-service-grid p { font-size: 14px; line-height: 1.85; }
.monthly-landing .ml-service-price { padding-top: 16px; border-top: 1px solid #d9cfbd; font-weight: 600; }
.monthly-landing :is(#personal-example, #try-sample, #diary-readers, #price) { scroll-margin-top: 96px; }
.monthly-landing .ml-uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; text-align: left; margin: 28px 0; }
.monthly-landing .ml-uses > div { padding-top: 16px; border-top: 2px solid #b8912f; }
.monthly-landing .ml-uses span { font: 11px var(--monthly-sans); color: #80691f; letter-spacing: .12em; }
.monthly-landing .ml-uses h3 { font-size: 21px; margin: 10px 0; }
.monthly-landing .ml-uses p { font-size: 15px; }
.monthly-landing .monthly-fake-note { font-family: var(--monthly-sans); font-size: 12px; line-height: 1.8; color: #6f6b63; }
.monthly-landing .ml-sample-paths { display: flex; flex-direction: column; gap: 18px; border-left: 2px solid #b8912f; padding: 24px; }
.monthly-landing .monthly-sample-callout { gap: 36px; }
.monthly-landing .ml-terms-highlight { padding: 18px 22px; border-left: 2px solid #b8912f; background: #fffdf8; font: 15px/1.85 var(--monthly-sans); }
.monthly-landing .monthly-price-card strong { font-size: clamp(38px, 5vw, 60px); }
.monthly-landing .monthly-final-actions { align-items: center; }
.monthly-landing a:focus-visible { outline: 3px solid #80691f; outline-offset: 4px; }
@media (max-width: 768px) {
  .monthly-landing .monthly-hero { grid-template-columns: 1fr; gap: 26px; padding-block: 24px 36px; }
  .monthly-landing .monthly-section { padding-block: 34px; }
  .monthly-landing .monthly-lead { max-width: none; }
  .monthly-landing .ml-uses { grid-template-columns: 1fr; gap: 18px; }
  .monthly-landing .ml-uses > div { padding-top: 12px; }
  .monthly-landing .ml-uses h3 { font-size: 20px; }
  .monthly-landing .ml-sample-paths { padding: 18px; }
  .monthly-landing .monthly-sample-callout { grid-template-columns: 1fr; }
  .monthly-landing .ml-personal-grid, .monthly-landing .ml-experienced, .monthly-landing .ml-service-grid { grid-template-columns: 1fr; gap: 24px; }
  .monthly-landing .ml-common-proof { padding: 20px; }
  .monthly-landing .ml-personal-person + .ml-personal-person { border-top: 1px solid #d9cfbd; padding-top: 24px; }
  .monthly-landing .ml-service-grid article { padding: 20px; }
}
@media (max-width: 480px) {
  .monthly-landing .monthly-hero h1 { font-size: 30px; }
  .monthly-landing .ml-proof { padding: 14px; }
  .monthly-landing .monthly-hero-actions .monthly-button { width: 100%; text-align: center; }
}
@media print { .monthly-landing .monthly-mobile-cta { display: none; } }

/* Purpose first: the worked example is prose, the real chart remains optional. */
.monthly-landing .ml-hero-benefit { color: var(--ink-muted, #56656b); max-width: 40rem; line-height: 1.8; }
.monthly-landing .ml-first-example { margin: 0; padding: 28px; border: 1px solid #dce5df; border-radius: 22px; background: #f4f7f3; }
.monthly-landing .ml-first-example figcaption strong { display: block; font-size: 1.2rem; margin: 8px 0; }
.monthly-landing .ml-example-steps { list-style: none; padding: 0; margin: 20px 0 0; counter-reset: example; }
.monthly-landing .ml-example-steps li { position: relative; counter-increment: example; padding: 0 0 20px 36px; }
.monthly-landing .ml-example-steps li:before { content: counter(example); position: absolute; left: 0; top: 0; color: #3b6256; font-weight: 700; }
.monthly-landing .ml-example-steps li > span { font-size: .85rem; font-weight: 650; color: #456456; }
.monthly-landing .ml-example-steps p { margin: 6px 0 0; line-height: 1.75; }
.monthly-landing .ml-example-steps .ml-example-other { padding-top: 8px; border-top: 1px dashed #ccd8d0; }
.monthly-landing .ml-example-permission { margin: 0; padding-top: 16px; border-top: 1px solid #d7e1d9; font-size: .9rem; line-height: 1.75; }
.monthly-landing .ml-reading-map { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin: 24px 0; }
.monthly-landing .ml-reading-map > div { padding: 22px; border: 1px solid #e1e4e0; border-radius: 16px; }
.monthly-landing .ml-reading-map > .is-start { border-color: #8caa9e; background: #f4f7f3; }
.monthly-landing .ml-reading-map h3 { margin: 0 0 10px; font-size: 1.05rem; }
.monthly-landing .ml-reading-map p { margin: 0; line-height: 1.8; }
.monthly-landing .ml-real-example > summary { padding: 18px 0; cursor: pointer; font-weight: 650; color: #305d50; }
.monthly-landing .ml-proof-optional { margin: 24px auto 0; max-width: 620px; }
.monthly-landing .ml-audience-cards article + article { margin-top: 28px; }
.monthly-landing .ml-audience-cards h3 { font-size: 1.1rem; }
@media (max-width: 768px) {
  .monthly-landing .ml-reading-map { grid-template-columns: 1fr; }
  .monthly-landing .ml-first-example { padding: 22px; }
}

.monthly-landing .ml-title-phrase { display: inline-block; max-width: 100%; }

/* Match the site's navy/gold introduction pages; keep report imagery untouched. */
@media screen {
  body.hdsl-design-v2.monthly-landing {
    --ml-night: #0f1e3d;
    --ml-light: #fffcf7;
    --ml-accent: #c4a265;
    --monthly-gold-dark: #80602c;
    --monthly-muted: #526178;
  }
  body.hdsl-design-v2.monthly-landing .monthly-hero {
    width: 100%; max-width: none; padding: 48px max(28px, calc((100% - 1120px) / 2)) 56px;
    background: var(--ml-night); color: var(--ml-light); border-bottom: 4px solid var(--ml-accent);
  }
  body.hdsl-design-v2.monthly-landing .monthly-hero h1 { color: var(--ml-light); }
  body.hdsl-design-v2.monthly-landing .monthly-hero-copy .monthly-eyebrow,
  body.hdsl-design-v2.monthly-landing .monthly-hero-copy .ml-product-name { color: var(--ml-accent); }
  body.hdsl-design-v2.monthly-landing .monthly-hero-copy .monthly-lead,
  body.hdsl-design-v2.monthly-landing .monthly-hero-copy .ml-hero-benefit { color: #e0e7f0; }
  body.hdsl-design-v2.monthly-landing .monthly-now-note {
    padding: 12px 16px; color: #e0e7f0; background: #263b5b; border-left-color: var(--ml-accent);
  }
  body.hdsl-design-v2.monthly-landing .monthly-hero-actions .monthly-button-primary,
  body.hdsl-design-v2.monthly-landing .monthly-final-actions .monthly-button-primary {
    background: var(--ml-accent); border-color: var(--ml-accent); color: #1a2b4c !important;
  }
  body.hdsl-design-v2.monthly-landing .monthly-hero-actions .monthly-button-primary:hover,
  body.hdsl-design-v2.monthly-landing .monthly-final-actions .monthly-button-primary:hover { background: #dcc08c; border-color: #dcc08c; }
  body.hdsl-design-v2.monthly-landing .monthly-hero-actions .monthly-text-link,
  body.hdsl-design-v2.monthly-landing .monthly-final-actions .monthly-text-link { color: var(--ml-light); text-decoration-color: var(--ml-accent); }
  body.hdsl-design-v2.monthly-landing .ml-first-example {
    background: var(--ml-light); color: #1a2b4c; border: 1px solid #b0bfd3; border-top: 4px solid var(--ml-accent); box-shadow: none;
  }
  body.hdsl-design-v2.monthly-landing .ml-first-example figcaption strong { color: #1a2b4c; }
  body.hdsl-design-v2.monthly-landing .monthly-fake-note { color: #526178; }
  body.hdsl-design-v2.monthly-landing .ml-proof-label,
  body.hdsl-design-v2.monthly-landing .ml-uses span { color: #80602c; }
  body.hdsl-design-v2.monthly-landing .ml-uses > div { padding: 20px; background: var(--ml-light); border: 1px solid #c4cdd8; border-top: 3px solid #1a2b4c; }
  body.hdsl-design-v2.monthly-landing .ml-reading-map > div { background: var(--ml-light); border-color: #b0bfd3; border-radius: 4px; }
  body.hdsl-design-v2.monthly-landing .ml-reading-map > .is-start { background: #284d42; border-color: #284d42; border-top: 4px solid var(--ml-accent); }
  body.hdsl-design-v2.monthly-landing .ml-reading-map > .is-start h3,
  body.hdsl-design-v2.monthly-landing .ml-reading-map > .is-start p { color: var(--ml-light); }
  body.hdsl-design-v2.monthly-landing .ml-reading-map > .is-start .ml-proof-label { color: #edd4a2; }
  body.hdsl-design-v2.monthly-landing .ml-real-example > summary {
    padding: 16px 20px; color: #1a2b4c; background: #e5edf3; border: 1px solid #9eafc3; border-radius: 4px;
  }
  body.hdsl-design-v2.monthly-landing .monthly-sample-callout {
    padding: 36px; background: #e5edf3; border: 1px solid #b0bfd3; border-top: 4px solid #1a2b4c; border-radius: 4px;
  }
  body.hdsl-design-v2.monthly-landing .ml-sample-paths { background: var(--ml-light); border-left-color: #1a2b4c; }
  body.hdsl-design-v2.monthly-landing .ml-service-grid article { background: var(--ml-light); border-color: #b0bfd3; }
  body.hdsl-design-v2.monthly-landing .ml-service-grid article.is-highlight { background: #e5edf3; border-top-color: #1a2b4c; }
  body.hdsl-design-v2.monthly-landing .monthly-price-card { background: var(--ml-night); color: var(--ml-light); border-color: var(--ml-night); border-top: 4px solid var(--ml-accent); }
  body.hdsl-design-v2.monthly-landing .monthly-price-card strong { color: #edd4a2; }
  body.hdsl-design-v2.monthly-landing .monthly-price-card .monthly-fake-note { color: #e0e7f0; }
  body.hdsl-design-v2.monthly-landing .monthly-faq details { margin-bottom: 10px; padding: 0 20px; border: 1px solid #b0bfd3; background: var(--ml-light); border-radius: 4px; }
  body.hdsl-design-v2.monthly-landing .monthly-faq details[open] { background: #e5edf3; border-left: 4px solid #1a2b4c; }
  body.hdsl-design-v2.monthly-landing .monthly-faq summary { color: #1a2b4c; }
  body.hdsl-design-v2.monthly-landing .monthly-faq details p { color: #41526a; }
  body.hdsl-design-v2.monthly-landing .monthly-final { background: var(--ml-night); color: var(--ml-light); border-color: var(--ml-night); border-top: 4px solid var(--ml-accent); }
  body.hdsl-design-v2.monthly-landing .monthly-final h2 { color: var(--ml-light); }
  body.hdsl-design-v2.monthly-landing .monthly-final > .monthly-kicker { color: var(--ml-accent); }
  body.hdsl-design-v2.monthly-landing .monthly-final > .monthly-final-note { color: #e0e7f0; }
  body.hdsl-design-v2.monthly-landing .monthly-final-actions .monthly-button-secondary { color: var(--ml-light); border-color: #b0bfd3; }
  body.hdsl-design-v2.monthly-landing main :is(a, summary, button):focus-visible { outline: 3px solid #1a2b4c; outline-offset: 4px; }
  body.hdsl-design-v2.monthly-landing :is(.monthly-hero-actions, .monthly-final-actions) a:focus-visible { outline-color: #edd4a2; }
}
@media screen and (max-width: 800px) {
  body.hdsl-design-v2.monthly-landing .monthly-hero { width: 100%; padding: 32px 20px 40px; }
  body.hdsl-design-v2.monthly-landing .monthly-sample-callout { padding: 24px 20px; }
}