/* ============================================================================
   Zero kW design system
   ----------------------------------------------------------------------------
   One stylesheet for every page. Pages should not carry their own palette —
   if something needs a color, it takes a token from here so the whole product
   moves together.

   The look is deliberately document-like rather than dashboard-like: this tool
   produces numbers people put in front of a CFO, and heavy chrome undermines
   that. Dark ink header, quiet page, high-contrast figures.
   ========================================================================= */

:root {
  /* Surfaces */
  --zk-bg:        #f6f8fa;
  --zk-card:      #ffffff;
  --zk-card-alt:  #fbfefd;
  --zk-line:      #e3e7ec;
  --zk-line-soft: #eef1f4;

  /* Ink */
  --zk-ink:       #0d1117;
  --zk-ink-2:     #3d4754;
  --zk-ink-3:     #6b7684;
  --zk-on-dark:   #ffffff;
  --zk-on-dark-2: #9fb0c3;

  /* Brand */
  --zk-accent:       #0b6b5b;
  --zk-accent-hover: #0e8f79;
  --zk-mint:         #4ade9f;

  /* Status */
  --zk-good:      #0b6b5b;
  --zk-good-bg:   #e6f4f0;
  --zk-good-line: #b7ded4;
  --zk-warn:      #a8620a;
  --zk-warn-bg:   #fff8e8;
  --zk-warn-line: #f0dfb8;
  --zk-bad:       #a32020;
  --zk-bad-bg:    #fdecec;
  --zk-bad-line:  #f2c2c2;

  /* Chart series — distinguishable in order, and in greyscale print */
  --zk-s1: #0b6b5b;
  --zk-s2: #2f6fb5;
  --zk-s3: #a8620a;
  --zk-s4: #7b4ea8;
  --zk-s5: #0e8f79;
  --zk-s6: #a32020;

  --zk-radius:   10px;
  --zk-radius-s: 7px;
  --zk-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --zk-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--zk-bg);
  color: var(--zk-ink);
  font: 16px/1.55 var(--zk-font);
  -webkit-font-smoothing: antialiased;
  /* The full-bleed hero uses 100vw, which counts the vertical scrollbar and
     would otherwise push the page sideways by its width. */
  overflow-x: hidden;
}

/* ---------------------------------------------------------------- header */

.zk-header { background: var(--zk-ink); color: var(--zk-on-dark); padding: 24px 20px; }
.zk-wrap   { max-width: 1080px; margin: 0 auto; }
.zk-hdr    { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.zk-brand  { font-size: 23px; font-weight: 700; letter-spacing: -0.02em; color: var(--zk-on-dark); text-decoration: none; display: inline-block; }
.zk-brand span { color: var(--zk-mint); }
.zk-tag    { color: var(--zk-on-dark-2); font-size: 14px; margin-top: 4px; }

.zk-nav    { display: flex; gap: 6px; flex-wrap: wrap; }
.zk-nav a  {
  color: var(--zk-on-dark-2); text-decoration: none; font-size: 14px; font-weight: 600;
  padding: 7px 13px; border-radius: var(--zk-radius-s); border: 1px solid #2a323c; white-space: nowrap;
}
.zk-nav a:hover { color: var(--zk-on-dark); border-color: #4a5563; }
.zk-nav a.on    { background: #1d252e; color: var(--zk-on-dark); border-color: #39424e; }

/*
 * The second nav row.
 *
 * Sits inside the dark header but reads as subordinate: no pill borders, a
 * lighter weight, and an underline rather than a filled chip for the current
 * page. The point is that a glance separates "which section am I in" from
 * "which page am I on" without reading either.
 */
.zk-subnav {
  display: flex; gap: 20px; flex-wrap: wrap;
  padding: 12px 0 2px; margin-top: 14px;
  border-top: 1px solid #2a323c;
}
.zk-subnav a {
  color: var(--zk-on-dark-2); text-decoration: none; font-size: 14px; font-weight: 500;
  padding: 4px 1px; border-bottom: 2px solid transparent; white-space: nowrap;
}
.zk-subnav a:hover  { color: var(--zk-on-dark); border-bottom-color: #4a5563; }
.zk-subnav a.on     { color: var(--zk-on-dark); border-bottom-color: var(--zk-mint); font-weight: 600; }

/* The header owns its own bottom padding once a sub-row is present. */
.zk-header:has(.zk-subnav) { padding-bottom: 0; }

.zk-main   { padding: 26px 20px 60px; }
.zk-footer { color: var(--zk-ink-3); font-size: 13px; text-align: center; padding: 0 20px 40px; }

/* ----------------------------------------------------------------- cards */

.zk-card { background: var(--zk-card); border: 1px solid var(--zk-line); border-radius: var(--zk-radius); padding: 22px; margin-bottom: 20px; }
.zk-card--accent { background: var(--zk-card-alt); border-color: var(--zk-good-line); }

h2.zk-h, .zk-card > h2 {
  font-size: 15px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--zk-ink-2); margin: 0 0 16px;
}
.zk-title { font-size: 19px; font-weight: 700; margin: 0 0 2px; }
.zk-meta  { font-size: 13px; color: var(--zk-ink-3); margin: -8px 0 16px; }

/* ----------------------------------------------------------------- forms */

.zk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.zk-row  { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }

label, .zk-label { display: block; font-size: 13px; font-weight: 600; color: var(--zk-ink-2); margin-bottom: 5px; }

input[type=text], input[type=email], input[type=tel], input[type=date],
input[type=number], input:not([type]), select, textarea {
  width: 100%; padding: 9px 10px; border: 1px solid var(--zk-line);
  border-radius: var(--zk-radius-s); font: inherit; font-size: 15px;
  background: #fff; color: var(--zk-ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--zk-accent); outline-offset: -1px; }
textarea { min-height: 92px; font-family: var(--zk-mono); font-size: 13px; }
input[type=file] {
  width: 100%; padding: 9px 10px; border: 1px dashed #b9c6cf;
  border-radius: var(--zk-radius-s); background: #fff; font: inherit; font-size: 14px;
}

.zk-btn {
  background: var(--zk-accent); color: #fff; border: 0; border-radius: var(--zk-radius-s);
  padding: 12px 22px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  display: inline-block;
}
.zk-btn:hover { background: var(--zk-accent-hover); }
.zk-btn--ghost { background: transparent; color: var(--zk-accent); border: 1px solid var(--zk-line); }
.zk-btn--ghost:hover { background: var(--zk-good-bg); }

/* The one irreversible control on the site. Outlined rather than filled: a
   solid red button competes for attention with the primary action next to it,
   and this is not something to invite a click on — it should look like what it
   is only once somebody has decided to look for it. */
.zk-btn--danger { background: transparent; color: var(--zk-bad);
                  border: 1px solid var(--zk-bad); }
.zk-btn--danger:hover { background: var(--zk-bad); color: #fff; }

.zk-hint { font-size: 12px; color: var(--zk-ink-3); margin-top: 4px; font-weight: 400; }

/* ---------------------------------------------------------------- tables */

.zk-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.zk-table th, .zk-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--zk-line); vertical-align: top; }
.zk-table th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--zk-ink-2); font-weight: 700; }
.zk-table .n, .zk-n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zk-table tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------- signals */

.zk-banner { padding: 15px 18px; border-radius: 9px; margin-bottom: 20px; font-weight: 600; }
.zk-ok   { background: var(--zk-good-bg); color: var(--zk-good); border: 1px solid var(--zk-good-line); }
.zk-warn { background: var(--zk-warn-bg); color: var(--zk-warn); border: 1px solid var(--zk-warn-line); }
.zk-bad  { background: var(--zk-bad-bg);  color: var(--zk-bad);  border: 1px solid var(--zk-bad-line); }
.zk-note { background: var(--zk-warn-bg); border: 1px solid var(--zk-warn-line); color: #6b5320; padding: 12px 15px; border-radius: 9px; margin-top: 14px; font-size: 14px; }

/* The affirmative variant. A completeness check that only ever speaks up when
   something is wrong teaches people to skim past it; saying plainly that a file
   IS good is what makes the warning mean something when it appears. */
.zk-note--ok { background: var(--zk-good-bg); border-color: var(--zk-good-line); }

.zk-pill {
  display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 8px; border-radius: 20px; background: var(--zk-line-soft);
  color: var(--zk-ink-2); font-weight: 700; margin-left: 6px;
}
.zk-pill--good { background: var(--zk-good-bg); color: var(--zk-good); }
.zk-pill--warn { background: var(--zk-warn-bg); color: var(--zk-warn); }

.zk-basis { font-size: 13px; color: var(--zk-ink-3); margin-top: 3px; font-weight: 400; }
.zk-amount { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--zk-accent); white-space: nowrap; }

.zk-items { margin: 10px 0 0; padding: 0; list-style: none; font-size: 14px; }
.zk-items li { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; border-bottom: 1px dashed var(--zk-line); }
.zk-items li:last-child { border-bottom: 0; }

/* Findings / callouts with a severity spine */
.zk-finding { border-left: 3px solid var(--zk-line); padding: 2px 0 2px 14px; margin-bottom: 18px; }
.zk-finding.opportunity { border-color: var(--zk-good); }
.zk-finding.warning     { border-color: var(--zk-warn); }
.zk-finding h3 { margin: 0 0 4px; font-size: 16px; }
.zk-finding p  { margin: 0; color: var(--zk-ink-2); font-size: 14px; }

/* ------------------------------------------------------- stats & charts */

/* Stat tiles. Proportional figures deliberately — tabular-nums makes a large
   standalone number look loose. Tabular figures belong in tables and axes. */
.zk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 20px; }
.zk-stat  { background: var(--zk-card); border: 1px solid var(--zk-line); border-radius: var(--zk-radius); padding: 18px 20px; }
.zk-stat-v { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.zk-stat-l { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--zk-ink-2); margin-top: 6px; font-weight: 600; }
.zk-stat-s { font-size: 12px; color: var(--zk-ink-3); margin-top: 3px; }

.zk-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.zk-chart-head h2 { margin: 0; }
.zk-toggle {
  background: none; border: 1px solid var(--zk-line); border-radius: var(--zk-radius-s);
  color: var(--zk-ink-2); font: inherit; font-size: 12px; font-weight: 600;
  padding: 4px 10px; cursor: pointer; white-space: nowrap;
}
.zk-toggle:hover { border-color: var(--zk-ink-3); color: var(--zk-ink); }

/* Sized to include the x-axis band, so the card never grows an inner scrollbar. */
.zk-plot { position: relative; height: 300px; margin: 10px 0 6px; }
.zk-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.zk-grid2 .zk-plot { height: 260px; }
.zk-tablewrap { margin-top: 14px; max-height: 340px; overflow: auto; border-top: 1px solid var(--zk-line); }
.zk-tablewrap .zk-table { font-size: 13px; }
.zk-tablewrap th { position: sticky; top: 0; background: var(--zk-card); }

@media (max-width: 860px) { .zk-grid2 { grid-template-columns: 1fr; } }

/* Rebate / program listings */
.zk-prog { border-top: 1px solid var(--zk-line); padding: 16px 0 4px; }
.zk-prog:first-of-type { border-top: 0; padding-top: 0; }
.zk-progtop { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; flex-wrap: wrap; }
.zk-progname { font-weight: 700; font-size: 16px; }
.zk-apply { display: inline-block; margin-top: 9px; font-size: 14px; font-weight: 600; color: var(--zk-accent); text-decoration: none; }
.zk-apply:hover { text-decoration: underline; }
.zk-impact { margin-top: 6px; font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .zk-grid { grid-template-columns: 1fr; }
  .zk-hdr  { align-items: flex-start; }
}

/* Residential / commercial fork. One control, always visible, above the search. */
.zk-seg { display: inline-flex; background: var(--zk-line-soft); border-radius: 9px; padding: 3px; margin-bottom: 18px; }
.zk-seg a {
  padding: 8px 20px; border-radius: 7px; text-decoration: none; font-weight: 600;
  font-size: 14px; color: var(--zk-ink-2);
}
.zk-seg a.on { background: var(--zk-card); color: var(--zk-ink); box-shadow: 0 1px 2px rgba(13,17,23,.08); }
.zk-seg a:hover:not(.on) { color: var(--zk-ink); }

/* ------------------------------------------------------------------ home */

/* The hero continues the header's dark band rather than sitting on the page,
   so the fold reads as one surface instead of two stacked bars. */
.zk-hero {
  background: var(--zk-ink); color: var(--zk-on-dark);
  /* Full-bleed out of the 1080px column, while keeping the text on that column. */
  margin: -26px calc(50% - 50vw) 34px;
  padding: 44px max(20px, calc(50vw - 540px)) 52px;
}
.zk-hero h1 {
  font-size: clamp(28px, 4.4vw, 44px); line-height: 1.15; letter-spacing: -0.025em;
  font-weight: 700; margin: 0 0 16px; max-width: 26ch;
}
.zk-hero-sub { color: var(--zk-on-dark-2); font-size: 17px; line-height: 1.6; max-width: 62ch; margin: 0 0 30px; }
.zk-hero-label { color: var(--zk-on-dark-2); font-size: 13px; font-weight: 600; margin-bottom: 8px; display: block; }
.zk-hero-row { display: flex; gap: 10px; flex-wrap: wrap; }
.zk-hero-row input { width: 170px; font-size: 17px; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }

.zk-proof {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px; background: var(--zk-line); border: 1px solid var(--zk-line);
  border-radius: var(--zk-radius); overflow: hidden; margin: 0 0 34px;
}
.zk-proof div { background: var(--zk-card); padding: 18px 20px; }
.zk-proof strong { display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.zk-proof span { display: block; font-size: 12px; color: var(--zk-ink-3); margin-top: 4px; }

.zk-center { text-align: center; margin-bottom: 18px; }

.zk-fork { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.zk-forkcard { display: flex; flex-direction: column; }
.zk-forkcard .zk-btn { margin-top: 6px; margin-right: 8px; align-self: flex-start; }
.zk-forkkicker {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 700; color: var(--zk-accent); margin-bottom: 6px;
}

.zk-check { list-style: none; padding: 0; margin: 14px 0 20px; font-size: 14px; color: var(--zk-ink-2); }
.zk-check li { position: relative; padding-left: 22px; margin-bottom: 9px; line-height: 1.5; }
.zk-check li::before {
  content: ''; position: absolute; left: 2px; top: 7px; width: 9px; height: 5px;
  border-left: 2px solid var(--zk-accent); border-bottom: 2px solid var(--zk-accent);
  transform: rotate(-45deg);
}
.zk-check--tight li { margin-bottom: 6px; }
.zk-check--muted li::before { border-color: var(--zk-ink-3); }

@media (max-width: 780px) { .zk-fork { grid-template-columns: 1fr; } }

.zk-hero-note { color: var(--zk-on-dark-2); font-size: 12px; margin: 10px 0 0; opacity: .8; }

/* Numbered how-it-works strip */
.zk-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 34px; }
.zk-step {
  background: var(--zk-card); border: 1px solid var(--zk-line);
  border-radius: var(--zk-radius); padding: 20px;
}
.zk-step span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; background: var(--zk-good-bg);
  color: var(--zk-accent); font-size: 13px; font-weight: 700; margin-bottom: 10px;
}
.zk-step strong { display: block; font-size: 16px; margin-bottom: 5px; }
.zk-step p { margin: 0; font-size: 13.5px; color: var(--zk-ink-2); line-height: 1.5; }

/* ---------------------------------------------------------------- plans */
.zk-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 24px; align-items: start; }
.zk-plan { display: flex; flex-direction: column; position: relative; }
.zk-plan--feature { border-color: var(--zk-accent); box-shadow: 0 0 0 1px var(--zk-accent); }
.zk-plan-tag {
  position: absolute; top: -10px; right: 18px; background: var(--zk-accent); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 20px;
}
.zk-plan-name { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--zk-ink-2); }
.zk-plan-price { font-size: 32px; font-weight: 700; letter-spacing: -.02em; margin: 6px 0 4px; }
.zk-plan-price span { font-size: 14px; font-weight: 500; color: var(--zk-ink-3); letter-spacing: 0; }
.zk-plan .zk-btn { margin-top: auto; align-self: flex-start; }

.zk-signup { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 780px) { .zk-signup { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- reports */
.zk-rep-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.zk-rep-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--zk-accent); }
.zk-rep-title { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin: 4px 0 4px; }
.zk-rep-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.zk-subject th { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--zk-ink-3); font-weight: 600; }
.zk-rep-foot { border-top: 1px solid var(--zk-line); padding-top: 14px; margin-top: 4px; }

/* Print: drop the app chrome, keep the document. A report is a thing people
   hand to a finance team, so it has to survive Ctrl-P without a PDF library. */
@media print {
  .zk-header, .zk-footer, .zk-rep-actions, .zk-toggle, .zk-seg { display: none !important; }
  body { background: #fff; }
  .zk-main { padding: 0; }
  .zk-card { border: 1px solid #d5dae0; break-inside: avoid; box-shadow: none; margin-bottom: 12px; }
  .zk-stats { break-inside: avoid; }
  .zk-finding, .zk-step { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
  .zk-rep-title { font-size: 22px; }
  @page { margin: 14mm; }
}

/* ---------------------------------------------------- event verification chart */
/*
 * The empty state is a first-class case, not an afterthought. A new asset has no
 * telemetry, and that is where this chart will spend most of its first months —
 * so "nothing to draw" gets a designed box rather than an axis with no line in it.
 */
.zk-ev         { position: relative; margin: 10px 0 4px; }
.zk-ev-chart   { display: block; width: 100%; height: auto; overflow: visible; }
.zk-ev-hit     { cursor: crosshair; }

/* The tooltip: values lead, labels follow — the legend's hierarchy inverted,
   because here the reader already has the series and wants the number. */
.zk-ev-tip     { position: absolute; z-index: 4; pointer-events: none; min-width: 132px;
                 background: var(--zk-card); border: 1px solid var(--zk-line);
                 border-radius: 8px; box-shadow: 0 6px 20px rgba(13, 17, 23, .12);
                 padding: 8px 10px; font-size: 12.5px; }
.zk-ev-tip-t   { font-size: 11px; letter-spacing: .05em; color: var(--zk-ink-3);
                 text-transform: uppercase; margin-bottom: 5px; }
.zk-ev-tip-row { display: flex; align-items: center; gap: 7px; line-height: 1.75; }
.zk-ev-tip-row strong { color: var(--zk-ink); font-variant-numeric: tabular-nums; }
.zk-ev-tip-row span   { color: var(--zk-ink-3); }

/* Headline numbers as tiles. One line of six facts separated by dots is six
   facts read as none. */
.zk-ev-stats   { display: grid; grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
                 gap: 14px; margin: 2px 0 16px; align-items: start; }
.zk-ev-stat-v  { font-size: 19px; font-weight: 700; letter-spacing: -.01em;
                 font-variant-numeric: tabular-nums; }
.zk-ev-stat--lead .zk-ev-stat-v { font-size: 27px; }
.zk-ev-stat-l  { font-size: 11.5px; color: var(--zk-ink-2); text-transform: uppercase;
                 letter-spacing: .06em; margin-top: 2px; }
.zk-ev-empty   { padding: 22px 18px; border: 1px dashed var(--zk-line); border-radius: 8px;
                 color: var(--zk-ink-2); font-size: 14px; background: var(--zk-card-alt); }
.zk-ev-legend  { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 8px;
                 font-size: 12.5px; color: var(--zk-ink-2); }
.zk-ev-key     { display: inline-flex; align-items: center; gap: 7px; }
.zk-ev-key strong { color: var(--zk-ink); font-weight: 600; }

/* ---------------------------------------------------------- the launch list
   Shown on the public lookups and the holding page while the gate is up. It is
   the only ask on an otherwise free page, so it is given a visible edge rather
   than blending into the cards around it. */
.zk-join-card { border-color: var(--zk-accent, #2dd4a7); }
.zk-join { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; align-items: stretch; }
.zk-join input[type=email] { flex: 1 1 240px; min-width: 0; }
.zk-join .zk-btn { flex: 0 0 auto; }
/* The honeypot: out of view for a person, in the DOM for anything that fills
   in every field it can find. Not type=hidden, which a bot skips. */
.zk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.zk-hint { font-size: 13px; color: var(--zk-ink-3, #6b7684); margin: 6px 0 0; }

/* ---------------------------------------------------------------- bill gaps
 *
 * A missing figure is rendered as a task, not an error. Deliberately NOT styled
 * like .zk-finding: a finding is something we discovered about the account, and
 * a gap is something we are asking the customer for. Making them look the same
 * was how the first report read as five problems with her bill when four of them
 * were requests.
 */
.zk-gap-have { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 16px; }
.zk-gap-chip {
  font-size: 12.5px; padding: 4px 9px; border-radius: 3px;
  background: rgba(45, 212, 167, .1); border: 1px solid rgba(45, 212, 167, .35);
  color: var(--zk-ink-2, #46584f);
}
.zk-gap-chip b { color: var(--zk-ink, #12201b); font-weight: 600; margin-left: 4px; }

.zk-gap {
  border: 1px solid var(--zk-line, #e2e9e5); border-left: 3px solid #c9a227;
  border-radius: 3px; padding: 13px 16px; margin: 0 0 9px;
}
.zk-gap--blocking { border-left-color: #c2410c; }
.zk-gap-hd { display: flex; align-items: baseline; gap: 9px; margin-bottom: 5px; flex-wrap: wrap; }
.zk-gap-tag {
  font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 2px; border: 1px solid currentColor; color: #96690b;
}
.zk-gap--blocking .zk-gap-tag { color: #c2410c; }
.zk-gap-why, .zk-gap-where, .zk-gap-blocks {
  margin: 0 0 4px; font-size: 13.5px; line-height: 1.5; color: var(--zk-ink-2, #46584f);
}
.zk-gap-blocks { color: var(--zk-ink-3, #7b8d84); font-size: 13px; }

/* An estimated amount must never look like a computed one. */
.zk-est { color: #96690b; font-weight: 600; }
.zk-est-tag {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: #96690b; margin-left: 5px;
}

/* ═══════════════════════════════════════════════════════ tariff explainer
 *
 * THE DESIGN INTENT, since it governs everything added below and should govern
 * what is added next: calm, generous, and quiet enough that the numbers are the
 * loudest thing on the page. Concretely that means four rules, applied
 * consistently rather than case by case —
 *
 *   1. ONE ACCENT, SPENT SPARINGLY. The teal marks what is computed and nothing
 *      else. A page where four things are colored has no emphasis at all.
 *   2. DEPTH FROM LIGHT, NOT FROM LINES. A soft shadow and a near-white surface
 *      separate a card from its ground more gently than a border, and stack
 *      without turning the page into a grid of boxes.
 *   3. TYPE DOES THE HIERARCHY. Size, weight and letter-spacing, not rules and
 *      fills. Headings tighten (-0.02em) as they grow; small uppercase labels
 *      open up (+0.06em) so they stay legible.
 *   4. NUMBERS ALIGN. tabular-nums everywhere a figure sits near another figure.
 *
 * The existing palette is reused rather than replaced — these build on the
 * tokens at the top of this file.
 */

.zk-tar {
  background: var(--zk-card);
  border-radius: 16px;
  padding: 30px 30px 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 2px rgba(13, 17, 23, .04), 0 12px 32px -16px rgba(13, 17, 23, .14);
}

.zk-tar-hd { margin-bottom: 26px; }

.zk-eyebrow {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--zk-ink-3); margin: 0 0 8px; font-weight: 600;
}

.zk-tar-title {
  font-size: clamp(21px, 3vw, 27px); line-height: 1.2; letter-spacing: -.021em;
  margin: 0 0 10px; font-weight: 650; text-wrap: balance;
}

.zk-tar-lede {
  font-size: 16.5px; line-height: 1.5; color: var(--zk-ink-2);
  margin: 0 0 16px; max-width: 62ch;
}

.zk-tar-facts { display: flex; flex-wrap: wrap; gap: 7px; }

.zk-chip {
  font-size: 12.5px; padding: 5px 11px; border-radius: 999px;
  background: var(--zk-line-soft); color: var(--zk-ink-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* The one chip that changes what a customer should DO gets the accent. */
.zk-chip--on { background: var(--zk-good-bg); color: var(--zk-accent); font-weight: 600; }

/* ------------------------------------------------------------ the arithmetic */

.zk-flow { display: flex; flex-direction: column; gap: 2px; }

.zk-flow-row {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 0; border-top: 1px solid var(--zk-line-soft);
}
.zk-flow-row:first-child { border-top: 0; padding-top: 0; }

.zk-flow-ic {
  flex: none; width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--zk-line-soft); color: var(--zk-ink-3);
}
/* Demand is the component people misunderstand, so it is the one that is lit. */
.zk-flow-row--demand .zk-flow-ic { background: var(--zk-good-bg); color: var(--zk-accent); }

.zk-ic { width: 19px; height: 19px; }

.zk-flow-main { min-width: 0; flex: 1; }
.zk-flow-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.zk-flow-top h3 { margin: 0; font-size: 16px; font-weight: 640; letter-spacing: -.008em; }

.zk-tag {
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--zk-ink-3); border: 1px solid var(--zk-line); padding: 2px 7px; border-radius: 999px;
}

.zk-calc {
  display: inline-flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  background: var(--zk-card-alt); border: 1px solid var(--zk-line-soft);
  border-radius: 9px; padding: 8px 13px; margin-bottom: 9px;
}
.zk-calc-q { font-size: 13.5px; color: var(--zk-ink-2); }
.zk-calc-x { color: var(--zk-ink-3); font-size: 13px; }
.zk-calc-r {
  font-size: 15.5px; font-weight: 650; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; color: var(--zk-ink);
}
.zk-calc-r em { font-style: normal; font-size: 12.5px; font-weight: 500; color: var(--zk-ink-3); margin-left: 3px; }

.zk-flow-how { margin: 0; font-size: 14px; line-height: 1.55; color: var(--zk-ink-2); max-width: 68ch; }

.zk-tar-age {
  margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--zk-line-soft);
  font-size: 12.5px; color: var(--zk-ink-3); max-width: 70ch;
}

/* ═══════════════════════════════════════════════════════════ analysis boxes */

.zk-vgroup { margin: 30px 0 0; }
.zk-vgroup-h {
  font-size: 12px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--zk-ink-3); font-weight: 650; margin: 0 0 12px;
}

/*
 * auto-fit rather than a fixed count, so a group of two does not leave a gap and
 * a group of five does not orphan one on its own row.
 */
.zk-vgrid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
}

.zk-vbox {
  background: var(--zk-card); border-radius: 13px; padding: 18px 19px;
  box-shadow: 0 1px 2px rgba(13, 17, 23, .04), 0 8px 22px -14px rgba(13, 17, 23, .13);
  display: flex; flex-direction: column; gap: 7px;
}

.zk-vbox-hd { display: flex; flex-direction: column; gap: 7px; }

.zk-vbox-state {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 650;
  padding: 3px 8px 3px 6px; border-radius: 999px;
  background: var(--zk-line-soft); color: var(--zk-ink-3);
}
.zk-vbox-state .zk-ic { width: 13px; height: 13px; }

.zk-vbox-hd h3 { margin: 0; font-size: 15.5px; font-weight: 640; letter-spacing: -.008em; }

/* Only a computed view gets the accent. Everything else stays neutral, so the
   eye lands on what the bill actually answered. */
.zk-vbox--ok  .zk-vbox-state { background: var(--zk-good-bg); color: var(--zk-accent); }
.zk-vbox--est .zk-vbox-state { background: #fdf4e3; color: #96690b; }

/* A view that does not apply recedes rather than alarming: it is a complete
   answer, not a gap. */
.zk-vbox--off { opacity: .72; }

.zk-vbox-sum { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--zk-ink); }
.zk-vbox-why { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--zk-ink-2); }

.zk-vbox-unlock {
  margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--zk-ink-2);
  padding-left: 11px; border-left: 2px solid var(--zk-mint);
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

@media (max-width: 560px) {
  .zk-tar { padding: 22px 18px 18px; border-radius: 13px; }
  .zk-flow-row { gap: 12px; }
}

/* ═══════════════════════════════════════════ one feel across every page
 *
 * WHY THIS IS AN OVERRIDE BLOCK AND NOT AN EDIT IN PLACE. The rules above have
 * been tuned over many pages and some carry reasoning worth keeping (the note on
 * why stat figures are proportional, not tabular). Rewriting them risks
 * re-breaking decisions nobody remembers making. This block restates only the
 * four properties that carry the visual identity — radius, border, shadow,
 * heading weight — so every page inherits the treatment the tariff explainer
 * introduced without any page being restyled individually.
 *
 * The change in one sentence: separation comes from LIGHT rather than from LINES.
 * A hairline border around every block turns a page into a grid of boxes and
 * flattens the hierarchy; a soft shadow over a near-white surface lets blocks sit
 * at different depths, so the eye finds the important one.
 *
 * Specificity is deliberately matched, not escalated — these are single-class
 * selectors appearing later in the file, so they win on order alone and can be
 * removed by deleting this block.
 */

.zk-card {
  border: 0;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(13, 17, 23, .04), 0 10px 28px -16px rgba(13, 17, 23, .13);
}

/* The accent card keeps its tint but gains a left rail instead of a full border:
   a box outlined in green competes with the content it is meant to introduce. */
.zk-card--accent {
  border: 0;
  border-left: 3px solid var(--zk-mint);
  border-radius: 14px;
}

.zk-stat {
  border: 0;
  border-radius: 13px;
  padding: 19px 21px;
  box-shadow: 0 1px 2px rgba(13, 17, 23, .04), 0 8px 22px -15px rgba(13, 17, 23, .12);
}

/*
 * Section headings were uppercase at 15px, which at that size reads as a label
 * rather than a heading and made every card look like a form fieldset. Sentence
 * case at a slightly smaller size, with the weight doing the work, lets a card
 * title sit under the page title instead of competing with it.
 */
h2.zk-h, .zk-card > h2 {
  font-size: 12px;
  letter-spacing: 0.085em;
  font-weight: 650;
  color: var(--zk-ink-3);
  margin: 0 0 14px;
}

.zk-title { font-size: 18.5px; font-weight: 650; letter-spacing: -0.012em; }

/* Row separation inside a table softens for the same reason cards lost theirs:
   the lines were as strong as the type. */
.zk-table th, .zk-table td { border-bottom-color: var(--zk-line-soft); padding: 11px 8px; }
.zk-table th {
  font-size: 11.5px; letter-spacing: 0.06em; font-weight: 650; color: var(--zk-ink-3);
}

.zk-banner { border-radius: 11px; font-weight: 600; }

/*
 * Focus stays visible and gets the accent, because the previous default was the
 * browser's and it disappeared against the darker surfaces.
 */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--zk-accent-hover);
  outline-offset: 2px;
  border-radius: 4px;
}