/* Type scale shared by the three columns and the interactive demos. */
body :is(p, li, dt, dd, summary, button, a, label, input, select, small, figcaption,
  span, div, legend, strong, b, em, mark, code, time) { font-size: 14px !important; }
body :is(.kicker, .serial, .tag, .badge, .vcard__no, .vcard__co, .ea-demo__head span,
  .ea-demo__note, .ea-chart-disclaimer, small, .calendar-day strong, .calendar-weekday,
  .discovery-demo__progress span, .discovery-demo__index, .product-enrollment__scale span,
  .footer p, .report-metrics dt, .report-metrics dd em) { font-size: 12px !important; }
body :is(.wordmark, .wordmark em, .rail-case > b, .rail-guide > b, .promise-panel__number,
  .report-metrics dd, .product-announcement__flag, .product-announcement__headline span,
  .product-announcement__headline strong) { font-size: 24px !important; }
body :is(.flow-brand, .koma__cap, .br-terminal, .discovery-demo__header) :is(.wordmark, .wordmark em) {
  font-size: 14px !important;
}
body h2, body h2 :is(span, em) { font-size: 28px !important; }
body #product-name, body #product-name mark { font-size: 40px !important; }
body h3, body h3 > :is(span, strong) { font-size: 16px !important; }
body :is(h3.vcard__h, .promise-panel__heading h3, #product-enrollment-title) {
  font-size: 24px !important;
}
body .hero h1 > span, body .hero h1 mark { font-size: inherit !important; }
body .product-enrollment__count > strong { font-size: 40px !important; }
body .product-announcement__headline strong { color: var(--red); }

/* A single tinted paper surface lets the nine accent colors identify each card. */
.ea-types .vcard { --demo-bg: var(--paper); }
.ea-types .ea-chart text {
  font-size: 15px !important;
  fill: var(--ink);
}
.ea-types .ea-chart .ea-order-label { fill: var(--white); stroke: var(--ink); }
.ea-types .ea-chart .ea-mark text { fill: var(--ink); }
.ea-types .ea-chart-disclaimer {
  padding: 3px 9px 9px;
  background: var(--white);
  color: var(--muted);
  text-align: center;
  line-height: 1.55;
}
.ea-types .vcard__body + .vcard__body { margin-top: 7px; }

/* The crop belongs to the illustration, so its box stops at the sheet edge. */
.discovery-demo__finish { container-type: inline-size; }
.discovery-demo .discovery-character {
  height: calc(clamp(140px, 58cqw, 210px) * 1421 / 1107 - 93px);
  bottom: 0;
  overflow: clip;
  transform-origin: 50% calc(90% + 83.7px);
}
.discovery-demo .discovery-character > .lens {
  height: auto;
  aspect-ratio: 1107 / 1421;
}
.product .product-announcement :is(.product-announcement__headline, .product-kind) {
  margin-inline: 8px;
}
.promise-panel { border-color: var(--line); }
.discovery-demo__header { background-color: var(--white); }
.ha-demo .ha-chart text { font-size: 14px !important; fill: var(--ink); }


/* The analysis diagrams use the same readable labels as the type charts. */
.ha-demo .ha-chart text { font-size: 15px !important; }
#ea-analysis-demo .ha-chart { background-color: var(--white); }
#ea-analysis-demo .ha-chart :is(.ha-axis, .ha-flownum) { fill: var(--ink); }
#ea-analysis-demo #ha-panel-0 .ha-axis { fill: var(--muted); }
#ea-analysis-demo .ha-tab { border-color: var(--ink); color: var(--ink); }
#ea-analysis-demo .ha-tab[aria-selected="true"] { background: #f4d4e7; border-color: var(--red); }
#ea-analysis-demo .ha-readout { background: var(--paper); color: var(--data); }
#broker-research-demo { color: var(--ink); border-color: var(--ink); }
#broker-research-demo :is(.br-card, .br-progress) { border-color: var(--ink); }
#broker-research-demo .br-card { color: var(--ink); }
#broker-research-demo .br-card .br-check { color: var(--muted); }
#broker-research-demo .br-card.is-done .br-check { color: var(--white); }
#broker-research-demo .char, .profit-demo .char { overflow: clip; }
.profit-demo .profit-demo__track { border-color: var(--ink); }
.profit-demo .profit-demo__value, .profit-demo .profit-demo__note { background: var(--white); }
.profit-demo .profit-demo__goal { border-color: var(--white); }
.profit-demo .profit-demo__row--total { --profit-ink: #21794e; }
.profit-demo .profit-demo__row--cashback { --profit-ink: var(--data); }
.profit-demo .profit-demo__label { color: var(--ink); }
.profit-demo .profit-demo__row { --profit-ink: var(--data); }
.profit-demo .profit-demo__row--total { --profit-ink: #21794e; }
.profit-demo .profit-demo__row--total .profit-demo__label { color: var(--ink); }
@media (max-width: 420px) {
  #ea-analysis-demo .ha-chart text { font-size: 19px !important; }
}
#broker-research-demo .br-card > span {
  font-size: 12px !important;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
#broker-research-demo .br-card.is-checked .br-check {
  background: #21794e;
  color: var(--white);
}

/* Compact daily totals share one line and drawdown always sits at the foot. */
.calendar-day > strong {
  white-space: nowrap;
  overflow-wrap: normal;
  font-variant-numeric: tabular-nums;
}
.calendar-day > .calendar-dd { margin-top: auto; }

.calendar-scroll-toolbar {
  display: flex;
  justify-content: flex-end;
}
.calendar-scroll-control {
  min-height: 36px;
  margin-bottom: 4px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--data);
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
}
.calendar-scroll[hidden], .calendar-scroll-control[hidden] { display: none; }
.calendar-scroll {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  scroll-snap-type: x proximity;
}
.calendar-scroll:focus-visible, .calendar-scroll-control:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.calendar-scroll .calendar-grid {
  --calendar-gap: 3px;
  /* Four gaps and five equal columns fill the viewport at its start. */
  grid-template-columns: repeat(8, calc((100% - 4 * var(--calendar-gap)) / 5));
  gap: var(--calendar-gap);
}
.calendar-weekday:first-child, .calendar-weekday:nth-child(4) { scroll-snap-align: start; }
.report-calendar .calendar-day > strong { font-size: 14px !important; }

.calendar-total-header, .calendar-week-total { background: var(--sand); }
.calendar-week-total { padding-top: 26px; }
.calendar-week-total.is-loss strong { color: var(--red); }

/* One underline per section title. On an intentional two-line title, mark
   the last line; wrap with the text on narrower screens. */
.heading-marker {
  background: url("./crayon-marker.svg") 0 100% / 100% 20% no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.signup h2 .heading-marker { color: inherit; }
.product-enrollment__fill { transform-origin: left center; }

body .summary-counter,
body .summary-counter > span { font-size: inherit !important; }
.summary-counter {
  display: inline-grid;
  max-width: 100%;
  vertical-align: baseline;
  font-variant-numeric: tabular-nums;
}
.summary-counter > span { grid-area: 1 / 1; min-width: 0; }
.summary-counter__final { opacity: 0; }

/* Keep the full USD value together even in the narrow two-column layout. */
.report-metrics > div:first-child { container-type: inline-size; }
body .report-metrics > div:first-child > dd {
  font-size: clamp(16px, 15cqi, 24px) !important;
  white-space: nowrap;
}

/* Keep the full EA type title and underline on one line in the main column. */
.ea-types .voice__head { container-type: inline-size; }
body #ea-types-title {
  font-size: clamp(16px, 7.6cqi, 28px) !important;
  white-space: nowrap;
}
body #ea-types-title .heading-marker { font-size: inherit !important; }