/* ============================================================
   LIVING DASHBOARD — the proof. Feels like a real operating
   system: always alive, reacts to ASORA and to exploration.
   ============================================================ */
/* THE SECOND HERO.
   This section is the proof the whole page rests on, so it is scaled like a
   headline act rather than a supporting one. It used to shrink its own heading
   to clamp(24px,3vw,34px) — 41% smaller than every other section — to fit more
   board above the fold. That bought screen space and cost the section its
   authority. It now inherits the site's full section-head scale; the only
   override left is the width, because this head is centred over a full-bleed
   band rather than a 760px column. */
#dashboard{padding-top:var(--s-9);padding-bottom:var(--s-9)}
#dashboard .sec-head{margin-bottom:var(--s-6);max-width:none}
#dashboard .sec-head h2{margin-top:16px}
/* left-aligned, above the board — a quiet "this is tuned to you" signal */
.dash-head{display:flex;align-items:center;justify-content:flex-start;gap:24px;
  flex-wrap:wrap;margin-bottom:11px}
/* Presented like the "Meet ASORA" eyebrow — a small dot + mono label, no pill
   box around it. */
.dash-tuned{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ember-soft);font-weight:600}
.dash-tuned .dt-dot{width:7px;height:7px;border-radius:50%;background:var(--ember-soft);flex:none;
  box-shadow:0 0 10px var(--glow);animation:ledPulse 2.4s var(--ease) infinite}

/* Full-bleed product-canvas band — same soft gradient the hero and Businesses
   use, spanning viewport edge to edge, with the board's glass cards floating
   on it. The board grid itself stays constrained + centred inside the band. */
.dash-band{
  width:100vw; margin-left:50%; transform:translateX(-50%);
  margin-top:14px; margin-bottom:6px;
  /* Generous on all sides — a set-piece needs room around it to read as one
     object. Tight padding made the board look like a widget dropped into the
     page rather than the page's centrepiece. */
  padding:clamp(34px,4.4vw,64px) var(--gutter) clamp(44px,5.4vw,76px);
  background:var(--product-canvas);
}
/* The board floats on the canvas rather than sitting flat on it. Deliberately a
   per-card box-shadow, NOT filter:drop-shadow on .dash — a filter on the grid
   would rasterize the whole board into one layer, and this board animates
   constantly (pulsing LEDs, transitioning bars, the live feed), so every tick
   would repaint all of it. Same look, none of the jank. */
.dash .card{box-shadow:0 26px 54px -30px rgba(28,20,14,.26),
  inset 0 1px 0 rgba(255,255,255,.75)}
#dashboard{overflow-x:clip}
/* align-items:start — every card sizes to its own content. Stretching the
   columns to equal height (and growing the last card to fill) was tried and
   pulled: the right column's Follow-ups card only holds three rows, so filling
   the slack left a slab of empty space inside it that read as broken. Uneven
   column bottoms are how real dashboards look; an empty card is not. */
.dash{display:grid;grid-template-columns:1.15fr .85fr;gap:12px;align-items:start;
  max-width:var(--maxw);margin:0 auto}
.dash-col{display:flex;flex-direction:column;gap:12px}
.card{border-radius:var(--r);padding:16px 18px;position:relative;overflow:hidden;
  transition:box-shadow .5s var(--ease),border-color .5s var(--ease)}
.card.hot{border-color:var(--ember)!important;box-shadow:0 26px 60px -34px var(--glow)}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}
.card-h h4{font-size:13px;font-weight:600;letter-spacing:.02em;display:flex;align-items:center;gap:9px}
.card-h .badge{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint)}
.card-h .badge.live{color:var(--green-soft)}
.card-h .badge .led{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green-soft);
  margin-right:5px;animation:ledPulse 2.4s var(--ease) infinite;vertical-align:middle}

/* ASORA's read card */
.read{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.read .full{grid-column:1/-1}
.read .lbl{font-size:10.5px;color:var(--ink-faint);font-family:var(--font-mono);
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px}
.read .val{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.read .val.em{color:var(--ember-soft)}
.read .val.big{font-family:var(--font-serif);font-weight:400;font-size:26px}
.conf-bar{height:7px;border-radius:4px;background:var(--track);overflow:hidden;margin-top:8px}
.conf-bar i{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--ember-deep),var(--ember-soft));
  width:0;transition:width 1s var(--ease)}
.pill-status{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;
  padding:6px 12px;border-radius:var(--r-pill);background:var(--accent-fill);color:var(--green-soft);
  border:1px solid var(--accent-line)}

/* Activity feed */
.feed{display:flex;flex-direction:column;gap:0;max-height:176px;overflow:hidden;position:relative}
.feed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44px;
  background:linear-gradient(transparent,var(--bg-2));pointer-events:none}
.ev{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);animation:rise .5s var(--ease) both}
.ev:last-child{border-bottom:none}
.ev .dot{width:9px;height:9px;border-radius:50%;flex:none;margin-top:5px;
  background:var(--ember-soft);box-shadow:0 0 8px var(--glow)}
.ev.ok .dot{background:var(--green-soft);box-shadow:0 0 8px var(--glow)}
.ev.info .dot{background:var(--ink-faint);box-shadow:none}
.ev .body{flex:1}
.ev .t{font-size:13.5px;color:var(--ink);line-height:1.4}
.ev .t b{color:var(--ember-soft);font-weight:600}
.ev .meta{font-size:10.5px;color:var(--ink-faint);font-family:var(--font-mono);
  letter-spacing:.04em;margin-top:3px}

/* Snapshot counters */
.snap{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.snap .s{border-radius:12px;border:1px solid var(--line);background:var(--track);padding:12px 14px}
/* DEPTH WITHOUT ROTATION — every other card on this board is labelled
   "example". This one holds the only real figures, so it's the one that comes
   forward: a brighter edge and a deeper shadow lift it off the band while the
   rest stay flush. Depth used to point at what matters, rather than sprayed
   over the whole board as a 3D tilt would. */
#cardSnap{background:var(--panel);border-color:var(--accent-line);
  box-shadow:0 26px 58px -30px rgba(28,20,14,.42),0 0 0 1px var(--accent-fill),
    inset 0 1px 0 rgba(255,255,255,.85)}
#cardSnap .card-h h4{color:var(--ink)}

/* These two are the only REAL numbers on the board, so they carry the weight
   the subhead used to: bigger than the example figures around them, lit by the
   lamp, with the claim stated plainly underneath. */
.snap .s b{font-family:var(--font-serif);font-size:29px;font-weight:400;line-height:1;display:block;
  color:var(--ink);text-shadow:0 0 34px var(--glow)}
.snap .s span{font-size:10.5px;color:var(--ink-soft);margin-top:5px;display:block;line-height:1.3}
.snap .s.bumped{animation:flash 1.1s var(--ease)}
.snap-note{font-size:12px;color:var(--ink-soft);margin-top:12px;line-height:1.45}
.snap-note b{color:var(--ink);font-weight:600}

/* Pipeline */
.pipe{display:flex;flex-direction:column;gap:9px}
.pipe .row{display:flex;align-items:center;gap:12px}
.pipe .row .name{font-size:12.5px;color:var(--ink-soft);width:96px;flex:none}
.pipe .row .track{flex:1;height:8px;border-radius:4px;background:var(--track);overflow:hidden}
.pipe .row .track i{display:block;height:100%;border-radius:4px;width:0;transition:width 1.1s var(--ease);
  background:linear-gradient(90deg,var(--ember-deep),var(--ember-soft))}
.pipe .row .num{font-family:var(--font-mono);font-size:12px;color:var(--ink);width:26px;text-align:right}

/* Automation ticker */
.autorow{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-soft);padding:7px 0;
  border-bottom:1px solid var(--line)}
.autorow:last-child{border-bottom:none}
.autorow .spin{width:15px;height:15px;flex:none;border:2px solid var(--line-2);
  border-top-color:var(--ember-soft);border-radius:50%;animation:spinSlow 1.1s linear infinite}
.autorow.done .spin{border-color:var(--green-soft);border-top-color:var(--green-soft);animation:none;
  position:relative}
.autorow.done .spin::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--green-soft);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3.5'/%3E%3C/svg%3E") center/11px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3.5'/%3E%3C/svg%3E") center/11px no-repeat}
.autorow .when{margin-left:auto;font-family:var(--font-mono);font-size:10px;color:var(--ink-faint)}


/* Trending services this month — insights that react to the visitor */
.trend{display:flex;flex-direction:column;gap:9px}
.trend-row{display:flex;align-items:center;gap:12px;border-radius:8px;padding:3px 6px;margin:-3px -6px;
  transition:background .4s var(--ease)}
.trend-row.hot{background:var(--glow)}
.trend-row .trend-name{font-size:12.5px;color:var(--ink-soft);width:150px;flex:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trend-row.hot .trend-name{color:var(--ink)}
.trend-row .trend-track{flex:1;height:8px;border-radius:4px;background:var(--track);overflow:hidden}
.trend-row .trend-track i{display:block;height:100%;border-radius:4px;width:0;
  transition:width 1s var(--ease);background:linear-gradient(90deg,var(--ember-deep),var(--ember-soft))}
.trend-row .trend-n{font-family:var(--font-mono);font-size:12px;color:var(--ink);width:30px;text-align:right}

/* Connection back to the hero live bar */
.dash-synced{display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:7px 14px;transition:var(--t-fast)}
.dash-synced:hover{color:var(--ink-soft);border-color:var(--line-2)}
.dash-synced .led{width:6px;height:6px;border-radius:50%;background:var(--green-soft);
  box-shadow:0 0 0 0 var(--glow);animation:ledPulse 2.4s var(--ease) infinite}