/* ============================================================================
   Market Desk v2 — scoped stylesheet.
   Served ONLY to the Market Desk Dash app at /desk (its own assets_folder)
   and, as a file, to the site pages at /site-assets/. Nothing in here reaches
   the old dashboard at /legacy, which keeps its own assets/ folder.
   Every rule is namespaced under .v2 so even an accidental double-include is
   inert on production markup.
   ========================================================================= */

/* ── tokens ──────────────────────────────────────────────────────────────── */
.v2 {
  --paper:       #f4efe6;
  --surface:     #fcfaf5;
  --ink:         #1b1a17;
  --ink-soft:    #3d3a34;
  --mute:        #6b675e;
  --rule:        #d9d2c4;
  --rule-soft:   #e6dfd2;
  --hover:       #ede6d9;
  --slate:       #3b5878;
  --brick:       #a6412a;
  --series-2024: #c4bcab;
  --series-2025: #8a9bb0;
}

/* ── page shell ──────────────────────────────────────────────────────────── */
body.v2-body {
  margin: 0;
  background: #f4efe6;
  color: #1b1a17;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.v2, .v2 * { box-sizing: border-box; }
.v2 a { color: var(--slate); }
.v2 a:hover { color: var(--ink); }
.v2 button { font-family: inherit; }

.v2-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Tabular numerals come from DM Sans itself — there is no mono face anywhere. */
.v2-num { font-variant-numeric: tabular-nums; }

/* ── masthead ────────────────────────────────────────────────────────────── */
.v2-masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 32px 14px;
  border-bottom: 3px double var(--ink);
  flex-wrap: wrap;
}
.v2-masthead-left {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.v2-wordmark {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
}
.v2 a.v2-wordmark { color: var(--ink); }
.v2-wordmark:hover { color: var(--ink); }
.v2-section-label {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
  padding-left: 16px;
  border-left: 1px solid var(--ink);
}
.v2-masthead-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
/* The issue line sits next to Export, never in the tab bar. */
.v2-issue {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--mute);
}
.v2-btn-dark {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 0;
  padding: 10px 16px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background 140ms ease;
}
.v2 a.v2-btn-dark { color: var(--paper); }
.v2-btn-dark:hover, .v2 a.v2-btn-dark:hover { background: var(--slate); color: var(--paper); }
/* The desk's Sign in / Account link, beside Export: reads like the site nav. */
.v2 .v2-masthead-link {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  text-decoration: none;
}
.v2 .v2-masthead-link:hover { color: var(--ink); }

/* ── tabs ────────────────────────────────────────────────────────────────── */
.v2-tabs {
  display: flex;
  gap: 0;
  padding: 0 32px;
  border-bottom: 1px solid var(--ink);
  overflow-x: auto;
}
.v2-tab {
  font-size: 14px;
  font-weight: 400;
  color: var(--mute);
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  padding: 14px 18px 12px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: color 140ms ease, border-color 140ms ease;
}
.v2 a.v2-tab { color: var(--mute); }
.v2-tab:hover, .v2 a.v2-tab:hover { color: var(--ink); }
.v2-tab.is-active {
  font-weight: 600;
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ── body grid ───────────────────────────────────────────────────────────── */
.v2-body-grid {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  flex: 1;
}
.v2-main {
  padding: 28px 32px 48px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

/* A static tab (About) has nothing for the rail to filter, so it goes. */
.v2-body-grid.v2-no-rail { grid-template-columns: minmax(0, 1fr); }
.v2-body-grid.v2-no-rail .v2-sidebar { display: none; }

/* ── sidebar ─────────────────────────────────────────────────────────────── */
.v2-sidebar {
  border-right: 1px solid var(--rule);
  padding: 24px 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-width: 0;
}
.v2-eyebrow {
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}
.v2-eyebrow-page {
  letter-spacing: 0.18em;
  color: var(--brick);
  margin-bottom: 12px;
  display: block;
}
.v2-eyebrow-rail {
  letter-spacing: 0.18em;
  margin-bottom: 10px;
  display: block;
}

/* ── form controls ───────────────────────────────────────────────────────────
   dcc.RadioItems / dcc.Checklist render each option as

     label.dash-options-list-option[.selected]
       > span.dash-options-list-option-wrapper > input
       + span.dash-options-list-option-text.<labelClassName>

   so the rows below are styled on that text span, and the native input is
   visually hidden rather than replaced. Keyboard focus, checked state and the
   screen-reader announcement all survive; only the paint changes. */
.v2-opts .dash-options-list-option-wrapper {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: -1px; padding: 0; border: 0;
}
.v2-opts .dash-options-list-option {
  display: block;
  cursor: pointer;
  position: relative;
  min-width: 0;
}

/* Range — one boxed segmented control */
.v2-segmented { display: flex; border: 1px solid var(--ink); }
.v2-segmented .dash-options-list-option { flex: 1; }
.v2-seg {
  display: block;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  padding: 8px 0;
  color: var(--ink);
  transition: background 140ms ease, color 140ms ease;
}
.v2-seg:hover { background: var(--hover); }
.dash-options-list-option.selected .v2-seg { background: var(--ink); color: var(--paper); }
.dash-options-list-option.selected .v2-seg:hover { background: var(--slate); }
.v2-opts .dash-options-list-option:focus-within .v2-seg {
  outline: 2px solid var(--ink); outline-offset: -2px;
}

/* Grade — rows, radio semantics, no dots */
.v2-rows { display: flex; flex-direction: column; }
.v2-grade-row {
  display: block;
  font-size: 14px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink);
  transition: background 140ms ease;
}
.v2-grade-row > span {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.v2-grade-row:hover { background: var(--hover); }
.dash-options-list-option.selected .v2-grade-row { background: var(--hover); font-weight: 600; }
.v2-opts .dash-options-list-option:focus-within .v2-grade-row {
  outline: 2px solid var(--ink); outline-offset: -2px;
}
.v2-grade-price {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--mute);
  white-space: nowrap;
}
/* Marks a derived figure. On the grade rail it sits on the price, because it
   is the cutout composite that is derived, not the grade's cut prices. */
.v2-est { font-style: italic; opacity: 0.8; }

/* Cuts */
.v2-cuts { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
.v2-cuts-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.v2-linkbtn {
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  background: transparent;
  border: 0;
  color: var(--slate);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.v2-linkbtn:hover { color: var(--ink); }
.v2-search input,
.v2-search {
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--surface);
  outline: none;
  color: var(--ink);
}
.v2-search:focus { border-color: var(--ink); }
.v2-cut-list { display: flex; flex-direction: column; max-height: 46vh; overflow-y: auto; }
.v2-cut-row {
  display: block;
  font-size: 13px;
  padding: 8px 6px;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink);
  transition: background 140ms ease;
}
.v2-cut-row > span {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.v2-cut-row:hover { background: var(--hover); }
.v2-cut-box {
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--ink);
  background: transparent;
  display: block;
}
.dash-options-list-option.selected .v2-cut-row .v2-cut-box { background: var(--ink); }
.v2-cut-name { line-height: 1.25; }
.dash-options-list-option.selected .v2-cut-row .v2-cut-name { font-weight: 600; }
.v2-opts .dash-options-list-option:focus-within .v2-cut-row {
  outline: 2px solid var(--ink); outline-offset: -2px;
}
.v2-cut-imps {
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  color: var(--mute);
}

/* ── section furniture ───────────────────────────────────────────────────── */
.v2-screen { display: flex; flex-direction: column; gap: 32px; }
.v2-lede {
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: pretty;
}
.v2-lede-narrow { max-width: 22ch; }
.v2-lede .v2-figure { color: var(--slate); }
.v2-section-headline {
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
}
.v2-caption {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--mute);
}
.v2-footnote {
  font-size: 13px;
  color: var(--mute);
  margin: 0;
  font-style: italic;
}
/* A screen block and the numbered sources it ends with (v2/sources.py). The
   section keeps the screen's 32px rhythm between its own blocks; the source
   list is pulled up under the block it cites, so it reads as its footnote
   rather than as the next block. */
.v2-section { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.v2-section > .v2-sources { margin-top: -20px; }
.v2 .v2-sources {
  margin: 0;
  padding: 10px 0 0 20px;
  border-top: 1px solid var(--rule-soft);
  list-style: decimal;
  max-width: 110ch;
}
.v2 .v2-sources li {
  font-size: 11px;
  line-height: 1.55;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  max-width: none;
}
.v2 .v2-sources li::marker { color: var(--ink-soft); font-weight: 600; }
.v2 .v2-sources a { text-decoration: none; }
.v2 .v2-sources a:hover { text-decoration: underline; }
.v2 .v2-sources .v2-derived { color: var(--brick); }
.v2-brief .v2-sources { margin-top: 32px; }

.v2-body-copy {
  font-size: 14px;
  line-height: 1.5;
  text-wrap: pretty;
  max-width: 70ch;
}

/* Lede + sales angle */
.v2-lede-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(220px, 2fr);
  gap: 32px;
  align-items: end;
}
.v2-pullquote { border-left: 2px solid var(--ink); padding-left: 18px; }
.v2-pullquote p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  text-wrap: pretty;
  font-style: italic;
}

/* ── snapshot strip ──────────────────────────────────────────────────────── */
.v2-strip {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.v2-strip-cell { padding: 14px 16px 16px; border-right: 1px solid var(--rule-soft); }
.v2-strip-head { display: flex; justify-content: space-between; gap: 6px; }
.v2-strip-value {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}
.v2-strip-sub { font-size: 12px; color: var(--mute); margin-top: 4px; }

/* ── chart panel ─────────────────────────────────────────────────────────── */
.v2-panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.v2-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}
.v2-chart-stats { display: flex; gap: 0; flex-wrap: wrap; }
.v2-chart-stat { padding: 0 18px; border-left: 1px solid var(--rule); }
.v2-chart-stat-value {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
/* The legend IS the series control — no separate toggle row, no readout bar. */
.v2-legend { display: flex; gap: 6px; flex-wrap: wrap; }
.v2-chip {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--mute);
  opacity: 0.5;
  transition: opacity 140ms ease, border-color 140ms ease, color 140ms ease;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* The line swatch. Fixed series, fixed order, so nth-child is a stable hook —
   and it keeps Dash components out of the options array. */
.v2-chip::before {
  content: "";
  width: 18px;
  height: 0;
  display: block;
  flex: none;
  border-top: 1.5px solid transparent;
}
.v2-legend .dash-options-list-option:nth-child(1) .v2-chip::before {
  border-top: 1.5px solid var(--series-2024);
}
.v2-legend .dash-options-list-option:nth-child(2) .v2-chip::before {
  border-top: 1.5px solid var(--series-2025);
}
.v2-legend .dash-options-list-option:nth-child(3) .v2-chip::before {
  border-top: 3px solid var(--slate);
}
.v2-legend .dash-options-list-option:nth-child(4) .v2-chip::before {
  border-top: 1.5px dashed var(--mute);
}
.v2-legend .dash-options-list-option:nth-child(5) .v2-chip::before {
  border-top: 2px dashed var(--brick);
}
.v2-chip:hover { border-color: var(--ink); }
.dash-options-list-option.selected .v2-chip {
  background: var(--surface); color: var(--ink); opacity: 1;
}
.v2-legend .dash-options-list-option:has(input:disabled) { cursor: not-allowed; }
.v2-legend .dash-options-list-option:has(input:disabled) .v2-chip { opacity: 0.28; }
.v2-opts .dash-options-list-option:focus-within .v2-chip {
  border-color: var(--ink); outline: 2px solid var(--ink); outline-offset: 2px;
}
/* The chart is the one fixed-format element: a 1000x340 viewBox in its own
   document so the SVG keeps DM Sans without a font dependency on the host. */
.v2-chart-frame {
  width: 100%;
  aspect-ratio: 1000 / 340;
  border: 0;
  display: block;
  background: transparent;
  color-scheme: light;
}

/* Per-cut charts — one panel per ticked cut, two-up where there is room. The
   iframe floor is lower than the cutout chart's because these sit in a grid;
   below it the SVG scrolls rather than shrinking out of legibility. */
.v2-cut-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 24px;
}
.v2-cut-panel { padding: 20px 20px 16px; gap: 14px; }
/* Its own aspect ratio: the cut canvas is 460x230, not the cutout's 1000x340.
   The height is the SVG's, which never draws narrower than its 440px floor
   (chart.CUT_MIN_WIDTH): half the frame's width, or 220px once the frame is
   under the floor and the SVG scrolls. A frame held to the aspect ratio there
   was shorter than its SVG and cut off the month labels. cqw is the panel's
   content width, which the frame fills; the aspect ratio is the fallback. */
.v2-cut-panel { container-type: inline-size; }
.v2-cut-chart-frame { aspect-ratio: 460 / 230; height: max(220px, 50cqw); }
.v2-cut-panel .v2-chart-stats { margin-left: auto; }
.v2-cut-panel .v2-chart-stat { padding: 0 12px; }
.v2-cut-panel .v2-chart-stat-value { font-size: 18px; }

/* ── tables ──────────────────────────────────────────────────────────────── */
.v2-table-wrap { overflow-x: auto; }
.v2-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.v2-table thead tr {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.v2-table th {
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  text-align: left;
  padding: 10px 8px;
  white-space: nowrap;
}
.v2-table th.v2-r, .v2-table td.v2-r { text-align: right; }
.v2-table th:first-child, .v2-table td:first-child { padding-left: 0; }
.v2-table tbody tr { border-bottom: 1px solid var(--rule-soft); }
.v2-table tbody tr:hover { background: var(--hover); }
.v2-table td { padding: 12px 8px; }
.v2-table td.v2-name { font-weight: 500; }
.v2-table td.v2-num { font-variant-numeric: tabular-nums; }
.v2-up { color: var(--brick); }
.v2-down { color: var(--slate); }
.v2-flat { color: var(--mute); }

/* Position vs 3-yr range */
.v2-pos-cell { padding: 12px 0 12px 16px; }
.v2-pos-track { position: relative; height: 6px; background: var(--rule-soft); }
.v2-pos-tick {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 12px;
  background: var(--mute);
}
.v2-pos-dot {
  position: absolute;
  top: -3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translateX(-6px);
}

/* ── empty state ─────────────────────────────────────────────────────────── */
.v2-empty {
  border: 1px dashed var(--series-2024);
  padding: 28px;
  text-align: center;
  color: var(--mute);
  font-size: 14px;
}

/* ── market context columns ──────────────────────────────────────────────── */
.v2-context {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0;
  border-top: 1px solid var(--ink);
}
.v2-context-col {
  padding: 20px 20px 24px 0;
  border-right: 1px solid var(--rule-soft);
  margin-right: 20px;
}
.v2-context-value {
  font-weight: 700;
  font-size: 36px;
  line-height: 1.1;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}
.v2-context-sub {
  font-size: 13px;
  color: var(--mute);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.v2-context-col p { font-size: 14px; line-height: 1.5; margin: 14px 0 0; text-wrap: pretty; }

/* ── market intel list ───────────────────────────────────────────────────── */
.v2-intel { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.v2-intel-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule-soft);
  align-items: start;
}
.v2-intel-n {
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  color: var(--slate);
  font-variant-numeric: tabular-nums;
}
.v2-intel-title { font-size: 17px; font-weight: 600; line-height: 1.3; }
.v2-intel-item p {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
  max-width: 70ch;
}
.v2-tag {
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid var(--ink);
  white-space: nowrap;
}

/* ── newsroom ────────────────────────────────────────────────────────────── */
.v2-news {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  border-top: 1px solid var(--ink);
  padding-top: 24px;
}
.v2-article { display: flex; flex-direction: column; gap: 8px; }
.v2-article-title { font-weight: 700; font-size: 22px; line-height: 1.2; text-wrap: pretty; }
.v2-article p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
.v2-read {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  align-self: flex-start;
}

/* ── about (/desk/about) ─────────────────────────────────────────────────── */
.v2-about-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 78ch;
  min-width: 0;
}
.v2-about-block + .v2-about-block { border-top: 1px solid var(--rule); padding-top: 24px; }
.v2-about-block h2 { margin: 0; }
.v2-about-block p { margin: 0; }
.v2-about .v2-about-byline {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.v2-about-list { margin: 0; padding-left: 18px; color: var(--ink-soft); }
.v2-about-list li + li { margin-top: 8px; }
/* Here the sources are the section's content, not a footnote under it. */
.v2-about .v2-section > .v2-sources { margin-top: 0; border-top: 0; padding-top: 0; }
.v2-about .v2-sources li { font-size: 13px; }
.v2-about .v2-sources li + li { margin-top: 4px; }

/* ── weekly brief (/desk/brief) ──────────────────────────────────────────── */
.v2-brief { padding: 28px 32px 64px; max-width: 900px; }
.v2-brief h1 {
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
  text-wrap: pretty;
}
.v2-brief h2 {
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  margin: 32px 0 12px;
}
.v2-brief h3 { font-weight: 600; font-size: 17px; line-height: 1.3; margin: 20px 0 6px; }
.v2-brief p, .v2-brief li {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
  max-width: 70ch;
}
.v2-brief ul { padding-left: 18px; }
.v2-brief table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 16px 0; }
.v2-brief th {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  text-align: left;
  padding: 10px 8px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.v2-brief td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--rule-soft);
  font-variant-numeric: tabular-nums;
}
.v2-brief th.v2-r, .v2-brief td.v2-r { text-align: right; }
.v2-brief th:first-child, .v2-brief td:first-child { padding-left: 0; }
.v2-brief img { max-width: 100%; height: auto; border-radius: 0; }
.v2-brief hr { border: 0; border-top: 1px solid var(--rule); margin: 28px 0; }
.v2-brief blockquote {
  margin: 16px 0;
  border-left: 2px solid var(--ink);
  padding-left: 18px;
  font-style: italic;
  font-size: 15px;
}

/* ── site pages (/, /privacy, /terms, /register) ─────────────────────────── */
/* The main region grows so the footer sits at the foot of a short page. */
.v2 .v2-shell > main { flex: 1 0 auto; }
.v2-page { padding: 28px 32px 64px; max-width: 900px; }
.v2 .v2-site-nav { gap: 24px; }
.v2 .v2-site-nav a {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  text-decoration: none;
}
.v2 .v2-site-nav a:hover { color: var(--ink); }
.v2 .v2-wordmark-logo img { display: block; height: 30px; width: auto; }

.v2-legal { max-width: 70ch; }
.v2-legal h1 {
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
}
.v2-legal h2 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 28px 0 8px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
.v2-legal p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 10px;
  text-wrap: pretty;
}
.v2 .v2-legal-date {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--mute);
  margin-bottom: 8px;
}

/* ── account pages (/register, /login, /reset, /account) ─────────────────── */
/* One narrow column, the same inputs as the landing's sign-up form. */
.v2-auth { max-width: 440px; }
.v2-auth h1 {
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
}
.v2-auth p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 12px;
  text-wrap: pretty;
}
.v2 .v2-auth-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--ink);
  padding-top: 18px;
  margin: 18px 0 18px;
}
.v2 .v2-auth-form label { margin-top: 6px; }
.v2 .v2-auth-form input[type="email"],
.v2 .v2-auth-form input[type="password"],
.v2 .v2-auth-form input[type="text"],
.v2 .v2-auth-form textarea {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 9px 12px;
}
.v2 .v2-auth-form input:focus-visible,
.v2 .v2-auth-form textarea:focus-visible {
  outline: 2px solid var(--slate);
  outline-offset: 1px;
}
.v2 .v2-auth-form .v2-btn-dark { align-self: flex-start; margin-top: 10px; }
.v2 .v2-auth p.v2-auth-hint { font-size: 12px; color: var(--mute); margin: 0; }
.v2 .v2-auth p.v2-auth-msg {
  font-size: 14px;
  color: var(--ink);
  border-left: 3px solid var(--slate);
  background: var(--surface);
  padding: 10px 14px;
}
.v2 .v2-auth p.v2-auth-msg-error { border-left-color: var(--brick); }
.v2 .v2-auth-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 10px 20px;
  align-items: baseline;
  border-top: 1px solid var(--ink);
  padding-top: 16px;
  margin: 18px 0 0;
}
.v2 .v2-auth-facts dd { margin: 0; font-size: 15px; overflow-wrap: anywhere; }

/* /account: the same column, wider for the cut checklist. Each block is a
   section under a small ruled head, like the legal pages. */
.v2 .v2-account { max-width: 760px; }
.v2 .v2-account > .v2-auth-form,
.v2 .v2-account > p { max-width: 440px; }
.v2 .v2-account-section { margin-top: 36px; }
.v2 .v2-account-section h2 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 10px;
}
.v2 .v2-account-section > p,
.v2 .v2-account-section > .v2-auth-form { max-width: 440px; }
.v2 .v2-account-section > .v2-account-cuts { max-width: none; }
.v2 .v2-account-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px 28px;
}
.v2 .v2-account-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.v2 .v2-account-group legend {
  display: block;
  padding: 0 0 6px;
  margin-bottom: 4px;
  width: 100%;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}
.v2 .v2-account-cut,
.v2 .v2-account-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 4px 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-soft);
  cursor: pointer;
}
.v2 .v2-auth-form label.v2-account-cut,
.v2 .v2-auth-form label.v2-account-check { margin-top: 0; }
.v2 .v2-account-check { font-size: 14px; margin-top: 6px; }
.v2 .v2-account-cut input,
.v2 .v2-account-check input {
  flex: none;
  margin: 2px 0 0;
  width: 14px;
  height: 14px;
  accent-color: var(--ink);
}
.v2 .v2-account-cut:hover { color: var(--ink); }
.v2 .v2-account-section#delete { padding-bottom: 8px; }
.v2 .v2-btn-danger { background: var(--brick); }
.v2 .v2-btn-danger:hover { background: var(--ink); }

/* The contact form: /contact, and the same form on the desk's About tab. */
.v2 .v2-contact { max-width: 560px; }
.v2 .v2-contact-form textarea {
  resize: vertical;
  min-height: 150px;
  line-height: 1.5;
}
/* On About, dcc.Input wraps its <input> in a bordered 34px box of its own;
   unwrap it so the field is drawn once, by the rule above. */
.v2 .v2-contact-form .dash-input-container {
  display: block;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
  outline: none;
}
.v2 .v2-contact-form .dash-input-element { height: auto; }
.v2 .v2-about .v2-contact-form { max-width: 560px; margin: 4px 0 0; }
.v2 .v2-about .v2-contact-alt,
.v2 .v2-contact .v2-contact-alt { font-size: 13px; color: var(--mute); }
/* The honeypot: off-screen, not display:none, which some bots read as "skip
   this field". tabindex=-1 and aria-hidden keep people out of it. */
.v2 .v2-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The masthead's sign-out is a POST form that reads as one of the links. */
.v2 .v2-nav-form { display: inline; margin: 0; }
.v2 .v2-nav-button {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.v2 .v2-nav-button:hover { color: var(--ink); }

/* The unconfirmed-email banner: a rust rule under the masthead, on every
   site page, until the address is confirmed. */
.v2 .v2-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 10px 32px;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  border-left: 4px solid var(--brick);
}
.v2 .v2-banner p { margin: 0; font-size: 14px; color: var(--ink); }
.v2 .v2-banner form { margin: 0; }
.v2 .v2-banner-button {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brick);
  background: none;
  border: 1px solid var(--brick);
  padding: 6px 10px;
  cursor: pointer;
}
.v2 .v2-banner-button:hover { background: var(--brick); color: var(--paper); }
@media (max-width: 560px) {
  .v2 .v2-banner { padding: 10px 16px; }
}

/* ── landing (/) ─────────────────────────────────────────────────────────── */
.v2-landing { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.v2 .v2-landing-head { max-width: 20ch; margin: 0 0 18px; }
.v2 .v2-landing-abstract {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 64ch;
  margin: 0 0 22px;
  text-wrap: pretty;
}
.v2 .v2-landing-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin-bottom: 36px;
}
.v2 .v2-landing-actions a:not(.v2-btn-dark) {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  text-decoration: none;
}
.v2 .v2-landing-actions a:not(.v2-btn-dark):hover { color: var(--ink); }
.v2 .v2-landing-strip { margin-bottom: 36px; }
.v2 .v2-landing-strip .v2-strip-cell:last-child { border-right: 0; }
.v2 .v2-landing-strip .v2-strip-value { overflow-wrap: anywhere; }
/* On a phone the three numbers stack: two-up leaves "$374.26/cwt" about
   140px, which breaks it mid-unit. */
@media (max-width: 560px) {
  .v2 .v2-landing-strip { grid-template-columns: minmax(0, 1fr); }
  .v2 .v2-landing-strip .v2-strip-cell { border-right: 0; border-bottom: 1px solid var(--rule-soft); }
  .v2 .v2-landing-strip .v2-strip-cell:last-child { border-bottom: 0; }
}

.v2 .v2-landing-form {
  border-top: 1px solid var(--rule);
  padding-top: 18px;
  max-width: 560px;
}
.v2 .v2-landing-form label { display: block; margin-bottom: 8px; }
.v2 .v2-landing-form-row { display: flex; flex-wrap: wrap; gap: 8px; }
.v2 .v2-landing-form input[type="email"] {
  flex: 1 1 240px;
  min-width: 0;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 9px 12px;
}
.v2 .v2-landing-form input[type="email"]:focus-visible {
  outline: 2px solid var(--slate);
  outline-offset: 1px;
}
.v2 .v2-landing-form-note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--mute);
  margin: 8px 0 0;
}

/* ── landing: hero + this week's read ────────────────────────────────────
   The front page reads like a trade paper's: the pitch and the sign-up side
   by side, then the week's read under a heavy rule. Same tokens and type as
   the desk, a different arrangement, so it is not a second copy of /desk. */
.v2-page.v2-page-landing { max-width: 1240px; width: 100%; }
.v2 .v2-landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(280px, 4fr);
  gap: 40px 56px;
  align-items: end;
  margin-bottom: 40px;
}
.v2 .v2-landing-hero .v2-landing-actions { margin-bottom: 0; }
.v2 .v2-landing-hero .v2-landing-form {
  border-top: 0;
  border-left: 1px solid var(--ink);
  padding: 4px 0 4px 28px;
  max-width: none;
}
.v2 .v2-landing-form-lede {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 16px;
  text-wrap: pretty;
}
/* The sign-up box for a signed-in reader, or with accounts off: where the
   brief stands, and the way to it, in place of the form. */
.v2 .v2-landing-form-status {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 16px;
}
.v2 .v2-landing-signed .v2-landing-actions { margin-bottom: 0; }
.v2 .v2-landing-hero + .v2-landing-kicker { margin-top: 0; }

.v2 .v2-week {
  border-top: 3px double var(--ink);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.v2 .v2-week-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.v2 .v2-week-kicker { color: var(--brick); letter-spacing: 0.18em; }
.v2 .v2-week-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 32px 48px;
  align-items: start;
}
.v2 .v2-week-head {
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 20px;
  text-wrap: pretty;
}
.v2 .v2-week-head .v2-figure { color: var(--slate); white-space: nowrap; }
.v2 .v2-week-angle { border-left: 2px solid var(--brick); padding-left: 16px; }
.v2 .v2-week-angle p {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.5;
  font-style: italic;
  text-wrap: pretty;
  max-width: 56ch;
}
.v2 .v2-week-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
}
.v2 .v2-week-tile {
  padding: 12px 14px 14px 0;
  border-bottom: 1px solid var(--rule-soft);
  min-width: 0;
}
.v2 .v2-week-tile:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--rule-soft); }
.v2 .v2-week-tile-head { display: flex; justify-content: space-between; gap: 6px; }
.v2 .v2-week-tile-value {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.1;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.v2 .v2-week-tile-sub { font-size: 12px; color: var(--mute); margin-top: 3px; }

.v2 .v2-week-chart {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 22px 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.v2 .v2-week-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px 24px;
  flex-wrap: wrap;
}
.v2 .v2-week-chart-title { font-weight: 700; font-size: 22px; line-height: 1.1; margin-bottom: 6px; }
.v2 .v2-week-keys { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; }
.v2 .v2-week-key {
  font-size: 12px;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.v2 .v2-week-key::before { content: ""; width: 18px; border-top: 1.5px solid var(--series-2024); }
.v2 .v2-week-key-y1::before { border-top-color: var(--series-2025); }
.v2 .v2-week-key-cur::before { border-top: 3px solid var(--slate); }
.v2 .v2-week-key-avg::before { border-top: 1.5px dashed var(--mute); }
.v2 .v2-week-key-proj::before { border-top: 2px dashed var(--brick); }
.v2 .v2-week-stats { display: flex; flex-wrap: wrap; }
.v2 .v2-week-stat { padding: 0 16px; border-left: 1px solid var(--rule); }
.v2 .v2-week-stat-value {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.v2 .v2-week-frame {
  width: 100%;
  border: 0;
  display: block;
  background: transparent;
  color-scheme: light;
}
.v2 .v2-week-frame-wide { aspect-ratio: 1000 / 340; }
.v2 .v2-week-frame-narrow { display: none; aspect-ratio: 320 / 240; }
.v2 .v2-week-source {
  font-size: 11px;
  line-height: 1.55;
  color: var(--mute);
  margin: -10px 0 0;
}
.v2 .v2-week-more {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin: 28px 0 0;
}
.v2 .v2-week-next { font-size: 12px; color: var(--mute); }

@media (max-width: 900px) {
  .v2 .v2-landing-hero { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .v2 .v2-landing-hero .v2-landing-form {
    border-left: 0;
    border-top: 1px solid var(--ink);
    padding: 18px 0 0;
  }
  .v2 .v2-week-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
/* The phone swaps to its own chart canvas rather than scrolling the desk's
   1000-wide one sideways: the landing must never scroll horizontally. */
@media (max-width: 640px) {
  .v2 .v2-week-frame-wide { display: none; }
  .v2 .v2-week-frame-narrow { display: block; }
  .v2 .v2-week-chart { padding: 16px 12px 12px; }
  .v2 .v2-week-stats { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 0; }
  .v2 .v2-week-stat { padding: 0 12px 0 0; border-left: 0; }
  .v2 .v2-week-stat:nth-child(even) { padding-left: 12px; border-left: 1px solid var(--rule); }
  .v2 .v2-week-tile-value { font-size: 21px; }
  /* Two-up tiles leave no room for the group tag beside a two-word label. */
  .v2 .v2-week-tile-head span + span { display: none; }
}

/* ── legal footer (every page) ───────────────────────────────────────────── */
.v2-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 32px;
  flex-wrap: wrap;
  padding: 20px 32px 28px;
  border-top: 3px double var(--ink);
  background: var(--paper);
}
.v2-footer-legal { max-width: 78ch; }
.v2 a.v2-footer-mark {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.v2 .v2-footer-copy,
.v2 .v2-footer-notice {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--mute);
}
.v2 .v2-footer-copy { color: var(--ink-soft); }
.v2 .v2-footer-links { display: flex; gap: 20px; }
.v2 .v2-footer-links a {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  text-decoration: none;
}
.v2 .v2-footer-links a:hover { color: var(--ink); }

/* ── live region (screen-reader announcements) ───────────────────────────── */
.v2-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── loading ─────────────────────────────────────────────────────────────── */
.v2-loading {
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}
/* No skeleton shimmer, no spinner — Dash's default overlay is neutralised. */
.v2 ._dash-loading, .v2 ._dash-loading-callback { display: none; }

/* ── responsive: sidebar becomes a horizontal filter bar ─────────────────── */
@media (max-width: 900px) {
  .v2-body-grid { grid-template-columns: minmax(0, 1fr); }
  .v2-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
    padding: 18px 24px 20px;
  }
  .v2-sidebar > * { flex: 1 1 220px; min-width: 0; }
  .v2-cut-list { max-height: 240px; }
  .v2-main { padding: 18px 24px 36px; gap: 20px; }
  .v2-screen { gap: 20px; }
  .v2-lede-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .v2-masthead { padding: 18px 24px 12px; }
  .v2-tabs { padding: 0 24px; }
  .v2-context-col { padding-right: 0; border-right: 0; margin-right: 0; border-bottom: 1px solid var(--rule-soft); }
  .v2-intel-item { grid-template-columns: 40px minmax(0, 1fr); }
  .v2-intel-item .v2-tag { grid-column: 2; justify-self: start; }
  .v2-brief { padding: 18px 24px 48px; }
  .v2-page { padding: 18px 24px 48px; }
  .v2-footer { padding: 18px 24px 24px; }
}

/* Narrow screens: the chart stops scaling and starts scrolling. Held to the
   panel width it shrinks to ~100px tall, which puts the axis labels below
   3px — a legible chart that scrolls sideways beats a chart nobody can read.
   The SVG's own min-width does the work; this just gives the frame a height
   to match it. */
@media (max-width: 700px) {
  .v2-chart-frame { aspect-ratio: auto; height: 224px; }
  .v2-cut-chart-frame { aspect-ratio: auto; height: max(220px, 50cqw); }
  .v2-cut-charts { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 560px) {
  .v2-cut-panel .v2-chart-stat { padding: 0 10px 0 0; border-left: 0; }
  .v2-cut-panel .v2-chart-stats { margin-left: 0; }
}

/* ── the BLUF landing (spec 2026-09-27 §5) ───────────────────────────────── */
.v2 .v2-landing-bluf .v2-week-source { margin: 8px 0 0; }
.v2 .v2-call { padding: 8px 0 28px; border-bottom: 2px solid var(--ink); margin-bottom: 28px; }
.v2 .v2-call-action {
  font-size: clamp(22px, 3vw, 32px); line-height: 1.2; letter-spacing: -0.01em;
  margin: 10px 0 14px; max-width: 40ch; text-transform: none; text-wrap: balance;
}
.v2 .v2-call-price { font-size: 18px; line-height: 1.5; margin: 0 0 16px; max-width: 60ch; }
.v2 .v2-call-next { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 0 0 22px; }
.v2 .v2-call-next dd { margin: 4px 0 0; font-size: 17px; font-weight: 600; }
.v2 .v2-why-rows { list-style: none; padding: 0; margin: 8px 0 0; }
.v2 .v2-why-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 7.5em;
  gap: 4px 16px; padding: 10px 0; border-top: 1px solid var(--rule-soft); font-size: 15px;
}
.v2 .v2-why-cause { font-weight: 600; }
.v2 .v2-why-metric { font-weight: 400; color: var(--mute); }
.v2 .v2-why-asof { font-size: 12px; color: var(--mute); white-space: nowrap; }
@media (max-width: 560px) { .v2 .v2-why-asof:empty { display: none; } }
.v2 .v2-call-news { margin: 16px 0 0; font-size: 15px; }
.v2 .v2-call-news a, .v2 .v2-heads a { color: var(--ink); }
.v2 .v2-news-date { color: var(--mute); font-size: 13px; margin-right: 6px; }
.v2 .v2-news-src { color: var(--mute); font-size: 12px; }
.v2 .v2-cards-wrap { margin: 32px 0; }
.v2 .v2-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 10px; }
/* A column, so each chart sits at its card's foot and the charts in a row line
   up (grid items already stretch to the row's height). */
.v2 .v2-card { background: var(--surface); border: 1px solid var(--rule); padding: 14px 14px 8px; min-width: 0; display: flex; flex-direction: column; }
.v2 .v2-card-head .v2-eyebrow { display: block; }
.v2 .v2-card-tag { margin: 0 0 6px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); }
.v2 .v2-card-tag-lock { color: var(--brick); }
.v2 .v2-card-tag-book { color: var(--slate); }
.v2 .v2-nowrap { white-space: nowrap; }
.v2 .v2-notes { margin: 22px 0 0; }
.v2 .v2-note { margin: 8px 0 0; font-size: 16px; line-height: 1.5; max-width: 70ch; }
.v2 .v2-note-lock b { color: var(--brick); }
.v2 .v2-note-book b { color: var(--slate); }
.v2 .v2-notes-all { margin: 14px 0 0; }
.v2 .v2-notes-all summary { cursor: pointer; color: var(--mute); font-size: 14px; }
.v2 .v2-notes-group { margin: 16px 0 0; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.v2 .v2-card-name { font-size: 14px; font-weight: 600; margin: 6px 0 4px; line-height: 1.3; }
.v2 .v2-card-price { margin: 0 0 6px; font-variant-numeric: tabular-nums; }
.v2 .v2-card-price span { color: var(--mute); font-size: 13px; margin-left: 6px; }
.v2 .v2-card-svg { display: block; width: 100%; height: auto; margin-top: auto; }
.v2 .v2-heads ul { list-style: none; padding: 0; margin: 8px 0 0; }
.v2 .v2-heads li { padding: 8px 0; border-top: 1px solid var(--rule-soft); }
.v2 .v2-landing-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 28px 0 36px; }
.v2 .v2-landing-bluf .v2-landing-about { border-top: 1px solid var(--rule); padding-top: 24px; }
@media (max-width: 900px) {
  .v2 .v2-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .v2 .v2-why-row { grid-template-columns: minmax(0, 1fr); }
  .v2 .v2-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .v2 .v2-card { padding: 10px 10px 6px; }
  .v2 .v2-card-price span { display: block; margin-left: 0; }
}
@media (max-width: 340px) {
  .v2 .v2-cards { grid-template-columns: minmax(0, 1fr); }
}
/* The card charts' month labels. Each chart is a 300-wide viewBox drawn at its
   card's width, so 9 units read ~10px three across a desktop but ~4px two
   across a phone. These sizes (in viewBox units) hold them near 8-12px at every
   width; one card across, at 340px and under, is nearly full size again. */
@media (max-width: 700px) { .v2 .v2-card-tick { font-size: 13px; } }
@media (max-width: 480px) { .v2 .v2-card-tick { font-size: 20px; } }
@media (max-width: 340px) { .v2 .v2-card-tick { font-size: 11px; } }

.v2 .v2-masthead-menu { display: flex; gap: 18px; align-items: center; margin-right: 12px; }
@media (max-width: 700px) { .v2 .v2-masthead-menu { gap: 12px; flex-wrap: wrap; } }
/* A phone: Sign in / Account joins the menu's row, as on the site pages, and
   the issue line and Export PDF take the next, so the account link never sits
   alone on a line. Under 560px the section label stacks under the wordmark
   and drops the rule that divided them side by side. */
@media (max-width: 700px) {
  .v2-masthead-right { gap: 10px 12px; }
  .v2-masthead-right > .v2-masthead-link { order: 1; }
  .v2-masthead-right > .v2-issue, .v2-masthead-right > .v2-btn-dark { order: 2; }
}
@media (max-width: 560px) {
  .v2-masthead-left { flex-direction: column; align-items: flex-start; gap: 6px; }
  .v2-masthead-left .v2-section-label { border-left: 0; padding-left: 0; }
}