/* Home: the morning board and the sections under it. Page layout only; every component and colour is site.css.
   Scoped to [data-page="home"] so nothing here leaks. */

/* ---------------------------------------------------------------- the band: the name, then what it does in one sentence */
[data-page="home"] .band-id { min-width: 0; }
[data-page="home"] .band-lede { margin: var(--s3) 0 0; max-width: 46ch; font-size: var(--t0, 1rem); line-height: 1.45; color: var(--on-band); text-wrap: pretty; }
[data-page="home"] .tot-n { grid-column: 1 / -1; margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--t-1); }
[data-page="home"] .tot-n:empty { display: none; }
[data-page="home"] .tot-n a { color: var(--on-tint); text-decoration: none; }
/* on a wide desk the sentence stands beside the name, on the band's one line, so the board keeps its height and the strip stays in the
   first screen; a hairline in the band's own rule colour separates them. Narrower, it sits under the name. */
@media (min-width: 1281px) {
  [data-page="home"] .band-id { display: flex; align-items: center; gap: var(--s6); }
  [data-page="home"] .band-lede { margin: 0; padding-left: var(--s6); border-left: 1px solid var(--rule); max-width: 40ch; font-size: .9375rem; }
}
[data-page="home"] .band { padding-bottom: 26px; }   /* the ridge's 18px stays clear of the band's text */

/* the Black rows: one line of where and what is left, so the four rows and the totals keep the strip in the first screen */
@media (min-width: 821px) {
  [data-page="home"] .dmd-n small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
}

/* the strip: the address fills the room up to the button, so the ask reads as one line — sizes, address, Get dialed */
@media (min-width: 561px) {
  [data-page="home"] .stiles { flex-wrap: nowrap; }
  [data-page="home"] .strip .stile.mail { flex: 1 1 auto; max-width: none; }
  [data-page="home"] .strip { gap: var(--s2) var(--s3); }
  [data-page="home"] .strip-h { margin-right: var(--s3); }
}

/* ---------------------------------------------------------------- one product: the read and the consensus side by side, the stores under both */
[data-page="home"] .demo-stores { grid-column: 1 / -1; }
[data-page="home"] .demo-stores[hidden] { display: none; }
[data-page="home"] .demo-stores .panel-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--s4); padding-bottom: var(--s3); margin-bottom: 0; border-bottom: 2px solid var(--fg); }
[data-page="home"] .demo-stores .panel-h h3 { font-size: var(--t1); }
[data-page="home"] .demo-stores .table thead th { border-bottom-width: 1px; }
[data-page="home"] .demo-stores td small { display: block; }
[data-page="home"] .demo-more { margin: var(--s3) 0 0; font-size: var(--t-1); font-weight: 600; }
[data-page="home"] .demo { align-items: stretch; }
[data-page="home"] #demo-side > .panel { height: 100%; }

/* ---------------------------------------------------------------- free versus member: the member column is the panel, the free one its outline */
[data-page="home"] .plans { gap: var(--s5); align-items: stretch; }
[data-page="home"] .plan { padding: var(--s5) var(--s5) var(--s5); border-radius: 0 0 var(--radius) var(--radius); }
[data-page="home"] .plan-member { background: var(--panel); border: 1px solid var(--panel-rule); border-top: 2px solid var(--fg); }
[data-page="home"] .plan-member .btn { min-height: 56px; padding-inline: 28px; font-family: var(--font-semi); font-weight: 800; font-size: var(--t1); text-transform: uppercase; letter-spacing: .04em; }
[data-page="home"] .plan .fine b { color: var(--fg-2); font-weight: 700; }
@media (max-width: 560px) { [data-page="home"] .plan { padding-inline: var(--s4); } }

/* stacked (below 820px) the day's Black deals lead: they are the deals; the category conditions follow them */
@media (max-width: 820px) {
  [data-page="home"] .bcol { order: -1; border-bottom: 1px solid var(--rule); }
  [data-page="home"] .brows { border-bottom: 0; }
}