/* ══════════════════════════════════════════════════════════════════════
   HERO — the tagline, and the system it promises.

   Option A from the hero-options page, built for the home page. Left: the
   three-line tagline, a one-line lede, two buttons. Right: a cluster of
   four notifications around a collections console, drawn in CSS rather
   than screenshotted, so the type is the brand's own and the content
   stays editable.

   Two sides of the same system on purpose. The member gets a bill and a
   reconnection notice; the office gets a request and a finished report.
   The console carries no figures: an invented collections total on a live
   page is a number someone quotes back, and the shape of four bars makes
   the point anyway.

   Everything is scoped to #intro. The names are short and a couple of
   them (.ni, .display) exist elsewhere in the site's CSS and its scripts,
   so nothing here is allowed out of the section.
   ────────────────────────────────────────────────────────────────────── */

#intro {
  --am-deep: #936910;          /* amber at 4.7:1 on cream. #D79A18 was 2.4:1,
                                  which failed even the 3:1 large-text floor */
  --hair: rgba(16,64,59,0.12);
  --hair-soft: rgba(16,64,59,0.07);
  /* one screenful, as the hero it replaces was, so the bar's travel is
     measured against the same runway */
  min-height: calc(100dvh - var(--navh, 79px));
  display: grid; align-items: center;
  padding: 40px 0 64px;
}

#intro .hero-grid {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,0.9fr);
  gap: 54px; align-items: center;
}
#intro .hero-copy { max-width: 620px; min-width: 0; }

/* ── the tagline ─────────────────────────────────────────────────────── */
/* Sized so the longest line never has to break. "Work That Gets Easier."
   is 9.13x its font size wide, and the column it sits in is not a fixed
   fraction of the screen: the wrap caps at 1120, then the grid takes the
   54px gap and splits the rest 1 to 0.9, so the copy gets (wrap - 54)/1.9.
   That makes the widest safe size (wrap - 54) / 1.9 / 9.13, which is the
   divisor below. 61px is where it lands once the wrap stops growing.

   Container units would say this more directly, but cqw is being dropped
   here and the fallback was what actually rendered — so the arithmetic is
   written out instead of relying on it. */
#intro .display {
  margin: 0; font-weight: 500; letter-spacing: -0.045em; line-height: 1.02;
  color: var(--ink);
  font-size: min(61px, calc((100vw - 140px) / 17.6));
}
/* and never broken, whatever the arithmetic says */
#intro .display span { display: block; white-space: nowrap; }
/* the third line is the promise, and carries the accent */
#intro .display .l3 { color: var(--am-deep); }

#intro .lede {
  font-size: 17px; font-weight: 400; line-height: 1.6;
  color: rgba(16,64,59,0.72); margin: 22px 0 0; max-width: 46ch;
}
#intro .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
#intro .btn-ghost {
  background: transparent; color: var(--ink);
  border: 1px solid rgba(16,64,59,0.26); padding: 13px 22px; font-size: 15px;
}
#intro .btn-ghost:hover { border-color: var(--ink); }

#intro .mono-label {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-muted);
}

/* ── the cluster ─────────────────────────────────────────────────────── */
#intro .hero-vis { position: relative; display: flex; flex-direction: column; padding: 10px 0; }
/* The graph-paper grid that sat behind these cards is gone. Masked
   gridlines are the default "technical product" backdrop: it said nothing
   about cooperatives, utilities or the Ko idea, and the cards carry the
   hero on their own. Decoration where a decision belongs. */

#intro .card-admin {
  position: relative; z-index: 1;
  background: #fff; border: 1px solid var(--hair); border-radius: 18px;
  padding: 18px 22px 20px; margin: 0 14px;
}
#intro .ca-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* Koko is the console's mark, in the slot a product puts its own. He has a
   reason to be here, which he did not when he floated beside the cards. */
#intro .ca-app {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 400; letter-spacing: -.015em; color: var(--ink);
}
#intro .ca-app img { width: 26px; height: 26px; flex: none; }

#intro .ca-bars {
  display: flex; align-items: flex-end; gap: 10px;
  height: 76px; margin-top: 20px; padding-bottom: 20px;
}
#intro .ca-bars i {
  position: relative; flex: 1; height: var(--h);
  background: rgba(16,64,59,.1); border-radius: 6px 6px 0 0;
}
#intro .ca-bars i.on { background: var(--signal); }
#intro .ca-bars b {
  position: absolute; left: 0; right: 0; bottom: -19px; text-align: center;
  font-family: 'DM Mono', ui-monospace, monospace; font-weight: 400;
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted);
}

/* four of them, alternating sides and overlapping the console's corners:
   read down, it is one feed rather than a row of features */
#intro .card-note {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 11px;
  background: #fff; border: 1px solid var(--hair); border-radius: 14px;
  padding: 10px 15px 10px 11px; max-width: 320px;
}
#intro .card-note + .card-note { margin-top: 8px; }
#intro .n1 { align-self: flex-start; margin-left: -14px; }
#intro .n2 { align-self: flex-end; margin-right: -10px; margin-bottom: -14px; }
#intro .n3 { align-self: flex-start; margin-left: -10px; margin-top: -14px; }
#intro .n4 { align-self: flex-end; margin-right: -14px; }

#intro .ni { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; }
#intro .ni svg { width: 15px; height: 15px; }
#intro .ni-amber  { background: var(--midday); }
#intro .ni-signal { background: var(--signal); }
#intro .ni-air    { background: var(--air); }

#intro .nt {
  font-size: 13px; font-weight: 400; letter-spacing: -.015em;
  color: var(--ink); line-height: 1.2;
}
#intro .nt em {
  display: block; font-style: normal; font-size: 11.5px; font-weight: 400;
  color: var(--text-muted); margin-top: 3px;
}

/* ── narrow ──────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  #intro { min-height: 0; padding: 44px 0 56px; }
  /* minmax(0,1fr), not 1fr: a bare 1fr takes its minimum from the item's
     min-content width, and a nowrap line has no smaller size — so the
     track, the wrap and the page all grew to fit it, 22px past a 375
     screen. The explicit 0 lets the track shrink and the type answer for
     fitting instead. */
  #intro .hero-grid { grid-template-columns: minmax(0,1fr); gap: 38px; }
  #intro .hero-copy { max-width: none; min-width: 0; }
  /* One column, so the line has the wrap less its 20px gutters. The margin
     is wider than the arithmetic needs because 100vw counts the scrollbar
     and clientWidth does not. */
  #intro .display { font-size: min(44px, calc((100vw - 72px) / 9.3)); }
  /* the toasts hang off the console by a negative margin, which on a phone
     hangs them off the page instead */
  #intro .n1, #intro .n3 { margin-left: 0; }
  #intro .n2, #intro .n4 { margin-right: 0; }
  #intro .card-admin { margin: 0; }
}