/* ============================================================================
   CONCEPT E — "THE BLUE EDGE"
   Sl8IQ's landing page and the product dashboard behind it.

   This file is the concept's whole visual system. It loads AFTER
   mockups/tokens.css and does two things only:

     1. RE-GROUNDS the product's surfaces. Tokens.css sits on a warm-neutral
        near-black (#0b0f14). This concept sits on the reference's near-black
        NAVY (#0B0F1A) under a deep-blue radial glow, and every ink is
        re-measured against those colder, slightly lighter surfaces. The
        semantic names (--surface, --text-2, --accent, ...) are kept, so
        tokens.css's components — .card, .kpi, .btn, table, .badge, .bar —
        come along unchanged in shape and correct in contrast.

     2. ADDS what the reference needs and tokens.css has no opinion about:
        the landing page, the icon rail and the bottom tab bar, the hero
        card, the provenance tag, sparklines, the two charts, and the AI
        panel.

   Contrast. Every ink below is measured, not guessed. Worst case per ink,
   across every surface it is allowed to sit on (page #0B0F1A, glow peak
   #101C33, panel #111A2B, raised #16203A, chip/hover #1B2747, hover-2
   #1F2C4F):
     --text      #EAF0FB  11.99:1
     --text-2    #A3B0C9   6.28:1
     --text-3    #94A1BA   5.27:1   (this ink carries every label and tick)
     --accent    #4C8DFF   4.28:1   -> links on a hovered surface use
                                     --accent-on-soft instead, as tokens.css
                                     already does for badges
     --accent-on-soft #8FBAFF 4.96:1 on its own 16% tint
     --positive  #3DDC97   7.76:1   --negative #FF5C6C 4.57:1
     --warn      #FFB020   7.50:1
   Fills: white on --accent-fill #2C66CC is 5.41:1, and 5.17:1 through the
   hover step (#2563EB) — both AA for the 13px button text. The outlined
   button's border is the full-strength --accent (5.98:1 against the page),
   because a 1px edge is non-text contrast and needs 3:1 to be a real edge.
   ========================================================================== */

:root {
  /* ---- ground ---- */
  --bg: #0b0f1a;              /* the page, and the reference's near-black navy */
  --glow-peak: #101c33;       /* what the radial glow lifts the page to */
  --surface: #111a2b;
  --surface-2: #16203a;
  --surface-3: #1b2747;
  --surface-4: #1f2c4f;       /* hover, one step past surface-3 */
  --border: #23305a;
  --border-strong: #33427a;
  --overlay: rgba(4, 7, 14, 0.74);

  /* ---- ink ---- */
  --text: #eaf0fb;
  --text-2: #a3b0c9;
  --text-3: #94a1ba;
  --text-inverse: #0b0f1a;

  /* ---- signal ---- */
  --accent: #4c8dff;
  --accent-soft: rgba(76, 141, 255, 0.16);
  --accent-on-soft: #8fbaff;
  --accent-fill: #2c66cc;
  --accent-fill-hover: #2563eb;
  --accent-glow: rgba(76, 141, 255, 0.28);

  /* ---- status, re-measured on the navy ground ---- */
  --positive: #3ddc97;
  --positive-soft: rgba(61, 220, 151, 0.16);
  --negative: #ff5c6c;
  --negative-soft: rgba(255, 92, 108, 0.16);
  --negative-on-soft: #ff8a96;
  --warn: #ffb020;
  --warn-soft: rgba(255, 176, 32, 0.16);
  --neutral-soft: rgba(148, 161, 186, 0.14);

  /* ---- concept-local: the landing page's own scale ----
     The product screens stop at 34px. A landing page needs a display step,
     so the concept adds one and leaves --fs-* alone. */
  --e-fs-display: clamp(38px, 6.2vw, 68px);
  --e-fs-title: clamp(26px, 3.4vw, 40px);
  --e-fs-stat: clamp(28px, 3vw, 38px);
  --e-line: rgba(120, 160, 255, 0.22);   /* the hero card's 1px edge */
  --e-measure: 68ch;
  --e-shell-w: 1240px;        /* the dashboard's own layout width */
  --e-shot-scale: 0.5;        /* JS overwrites; this is the no-JS fallback */
  --e-tilt: 7deg;
}

/* ==========================================================================
   LANDING — page furniture
   ========================================================================== */

body.e-landing {
  /* The glow is one element behind the whole hero, not a per-section wash: a
     single deep-blue source high on the page, falling off before the feature
     row. It is what the hero card's glass has to blur to earn its blur. */
  background: var(--bg);
}

.e-wrap { width: min(100% - 2 * var(--s5), 1180px); margin-inline: auto; }

.e-skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 60;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--accent); border-radius: var(--r-sm);
  padding: var(--s2) var(--s3); font-size: var(--fs-13);
}
.e-skip:focus { top: var(--s4); }

/* ---- top nav ---- */
.e-nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(11, 15, 26, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.e-nav .e-wrap { display: flex; align-items: center; gap: var(--s5); min-height: 60px; }

.wordmark {
  font-size: 19px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text); text-decoration: none; white-space: nowrap;
}
.wordmark:hover { text-decoration: none; }
.wordmark .iq { color: var(--accent); }

.e-nav-links { display: flex; align-items: center; gap: var(--s1); }
.e-nav-links a, .e-nav-links .e-soon {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px var(--s3); border-radius: var(--r-sm);
  font-size: var(--fs-13); color: var(--text-2); text-decoration: none;
  white-space: nowrap;
}
.e-nav-links a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
/* The three non-NFL sports are not live. They stay in the nav, dimmed and
   marked, rather than pretending to be product. */
.e-soon { color: var(--text-3); cursor: default; }
.e-soon .e-soon-tag {
  font-size: 9px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-3); border: 1px solid var(--border-strong);
  border-radius: var(--r-pill); padding: 0 5px; line-height: 15px;
}
.e-live { color: var(--text); font-weight: var(--fw-medium); }
.e-live .e-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.e-nav-actions { display: flex; align-items: center; gap: var(--s2); margin-left: auto; }
.e-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--r-sm);
  background: transparent; border: 1px solid transparent;
  color: var(--text-2); cursor: pointer;
}
.e-icon-btn:hover { background: var(--surface-2); color: var(--text); }
.e-icon-btn svg { width: 17px; height: 17px; display: block; }

.e-nav-burger { display: none; }

/* ---- hero ---- */
.e-hero { position: relative; isolation: isolate; overflow: clip; }

.e-hero::before {
  /* The one decorative surface in the page, and it is structural: it is the
     light source the hero card's glass refracts. */
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 150%;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(58% 46% at 50% 14%, rgba(59, 130, 246, 0.22), transparent 68%),
    radial-gradient(40% 34% at 82% 30%, rgba(76, 141, 255, 0.13), transparent 72%);
}
.e-hero::after {
  /* A single hairline horizon where the glow ends — the edge of the world. */
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px; z-index: -1;
  background: linear-gradient(90deg, transparent, var(--border-strong) 22%, var(--border-strong) 78%, transparent);
}

.e-hero-grid {
  display: grid; gap: var(--s10);
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  padding: clamp(var(--s12), 7vw, 96px) 0 clamp(var(--s10), 5vw, 72px);
}

.eyebrow {
  font-size: var(--fs-11); font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-3);
  margin: 0 0 var(--s5);
}

.e-h1 {
  font-size: var(--e-fs-display); font-weight: 700; letter-spacing: -0.035em;
  line-height: 1.03; color: var(--text); margin: 0 0 var(--s5);
  max-width: 15ch; text-wrap: balance;
}

.e-lede {
  font-size: var(--fs-16); line-height: 1.6; color: var(--text-2);
  max-width: var(--e-measure); margin: 0 0 var(--s6);
}

.e-actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* The two hero actions are the reference's two actions: one filled, one
   outlined in the signal colour. Both are rebuilt here rather than borrowed,
   because the landing page's buttons are a size larger than a product
   button and the outlined one needs a full-strength edge (5.98:1). */
.e-btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  font: inherit; font-size: var(--fs-14); font-weight: var(--fw-medium);
  padding: 11px var(--s5); border-radius: var(--r-sm);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 160ms ease;
}
.e-btn:hover { text-decoration: none; }
.e-btn-fill { background: var(--accent-fill); color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.e-btn-fill:hover { background: var(--accent-fill-hover); box-shadow: 0 6px 22px var(--accent-glow); }
.e-btn-line { background: transparent; color: var(--text); border-color: var(--accent); }
.e-btn-line:hover { background: var(--accent-soft); }
.e-btn-sm { font-size: var(--fs-13); padding: 7px var(--s4); }

/* ---- hero stat tiles ---- */
.e-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: var(--s4); margin-top: var(--s10);
  border-top: 1px solid var(--border); padding-top: var(--s5);
}
/* Each tile spans the strip's two rows (label, value) so a label that wraps
   to two lines pushes every value down together: the three numbers and their
   provenance tags share one baseline. */
.e-stat {
  min-width: 0; display: grid; grid-row: span 2; grid-template-rows: subgrid;
  row-gap: 2px; align-content: end;
}
.e-stat .e-stat-v {
  font-size: var(--fs-26); font-weight: 700; letter-spacing: -0.02em;
  color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1;
  margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  align-self: end;
}
.e-stat .e-stat-l { font-size: var(--fs-12); color: var(--text-3); align-self: end; }

/* ==========================================================================
   THE PROVENANCE TAG — this concept's one new device

   The reference's landing page fills its proof slots with numbers nobody can
   check. This product cannot: an unsourced figure is a refusal, not a
   rounding. So every number on this page carries a tag saying where it came
   from, and the tag has to be a designed object — legible at 10px, quiet
   enough to repeat thirty times, and never mistakable for a badge that means
   "good". It is a receipt, not a reward.
   ========================================================================== */

.prov {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: var(--fw-medium);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-on-soft);
  background: var(--accent-soft);
  border-radius: var(--r-pill); padding: 1px 7px 1px 6px;
  white-space: nowrap; vertical-align: 1px;
}
.prov::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex: none;
}
.prov-mute { color: var(--text-2); background: var(--neutral-soft); }
.prov-warn { color: var(--warn); background: var(--warn-soft); }

/* ==========================================================================
   THE HERO CARD — the dashboard, angled flat

   One authored moment lives here. The card sits at a shallow angle; it
   straightens as it comes into view and holds straight. That is the whole
   motion budget of the page, and it is the reason the card reads as a
   physical object rather than a screenshot.
   ========================================================================== */

.e-shot {
  position: relative;
  perspective: 1600px; perspective-origin: 30% 40%;
}
.e-shot-frame {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--e-line, rgba(120, 160, 255, 0.22));
  background: linear-gradient(180deg, rgba(22, 32, 58, 0.72), rgba(11, 15, 26, 0.86));
  backdrop-filter: blur(18px) saturate(130%);
  box-shadow:
    0 40px 80px -30px rgba(2, 4, 10, 0.9),
    0 0 0 1px rgba(76, 141, 255, 0.06),
    inset 0 1px 0 rgba(160, 197, 255, 0.14);
  transform: rotateY(calc(-1 * var(--e-tilt))) rotateX(1.6deg);
  transform-origin: 50% 50%;
  transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 620ms cubic-bezier(0.16, 1, 0.3, 1);
}
.e-shot.is-flat .e-shot-frame { transform: none; box-shadow: 0 40px 90px -30px rgba(2, 4, 10, 0.95), 0 0 0 1px rgba(76, 141, 255, 0.1), inset 0 1px 0 rgba(160, 197, 255, 0.18); }
@media (hover: hover) {
  .e-shot:hover .e-shot-frame, .e-shot:focus-within .e-shot-frame { transform: none; }
}
/* The inner glow: a single soft blue wash inside the top edge, the light
   source's reflection on the glass. */
.e-shot-frame::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: radial-gradient(120% 60% at 18% -8%, rgba(96, 165, 250, 0.16), transparent 62%);
  border-radius: inherit;
}

.e-shot-bar {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s3); border-bottom: 1px solid var(--border);
  background: rgba(17, 26, 43, 0.7);
}
.e-shot-dots { display: flex; gap: 5px; }
.e-shot-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--surface-3); display: block; }
.e-shot-url {
  font-family: var(--font-mono); font-size: var(--fs-11); color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.e-shot-bar .prov { margin-left: auto; }
/* The way into the real screen lives in the card's title bar, beside the
   provenance tag: never over the picture, always in tab order. */
.e-shot-bar .e-shot-open { flex: none; background: rgba(17, 26, 43, 0.92); border-color: var(--border-strong); }

/* The clip box. Its height is the scaled dashboard's own height, set by the
   script: a fixed aspect-ratio would have to guess the dashboard's height, and
   guessing wrong either crops the card or leaves it overflowing the hero. */
.e-shot-view {
  position: relative; overflow: hidden; background: var(--bg);
}
.e-shot-canvas {
  position: absolute; top: 0; left: 0;
  width: var(--e-shell-w);
  transform: scale(var(--e-shot-scale)); transform-origin: 0 0;
}
/* Inside the card the rail is part of the picture: full height, no sticking. */
.e-shot-canvas .rail { position: static; min-height: 0; max-height: none; align-self: stretch; overflow: visible; }
/* Below the rail's breakpoint the card stops being a screenshot and becomes
   the phone view: the dashboard reflows to one column with its rail as a
   bottom tab bar, at its own size. It is clipped, not shrunk — a phone
   preview you can read the top of. */

/* ==========================================================================
   THE RAIL — shared by the hero card and dashboard.html
   Eight icon-and-word entries, the signal blue on the one you are on.
   ========================================================================== */

.rail {
  grid-area: rail;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: var(--s4) var(--s3) var(--s5);
  display: flex; flex-direction: column; gap: var(--s5);
  /* Stays put while the body scrolls; the phone tab bar below overrides. */
  position: sticky; top: 0; align-self: start; min-height: 100vh; max-height: 100vh; overflow-y: auto;
}
.rail-brand {
  display: flex; align-items: center; gap: var(--s2);
  padding: 0 var(--s2); font-size: 17px; font-weight: 700; letter-spacing: -0.02em;
}
.rail-brand .iq { color: var(--accent); }
.rail-nav { display: flex; flex-direction: column; gap: 1px; }
.rail-nav a, .rail-nav span {
  display: flex; align-items: center; gap: var(--s3);
  padding: 8px var(--s2); border-radius: var(--r-sm);
  color: var(--text-2); font-size: var(--fs-13); text-decoration: none;
}
.rail-nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.rail-nav [aria-current="page"] {
  background: var(--accent-soft); color: var(--text-2); font-weight: var(--fw-medium);
}
/* The active entry is the only place the rail uses the signal ink for a
   word, so "where am I" is answered in colour and in weight at once. */
.rail-nav [aria-current="page"] .rail-ico { color: var(--accent); }
.rail-nav [aria-current="page"] .rail-word { color: var(--text); }
.rail-ico { width: 17px; height: 17px; flex: none; color: var(--text-3); }
.rail-nav a:hover .rail-ico { color: var(--text-2); }
.rail-note {
  margin-top: auto; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: var(--s3);
}
.rail-note .label { display: block; margin-bottom: var(--s2); }

/* ==========================================================================
   DASHBOARD SHELL — tokens.css's .app is 232px + content. This concept's rail
   is wider and carries a topbar with controls, so the shell is re-declared.
   ========================================================================== */

.shell { display: grid; grid-template-areas: "rail main"; grid-template-columns: 214px minmax(0, 1fr); background: var(--bg); min-height: 100%; }
.shell-main { grid-area: main; min-width: 0; display: flex; flex-direction: column; }

.shell-top {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s5); border-bottom: 1px solid var(--border);
  background: var(--bg); position: sticky; top: 0; z-index: 10;
}
.shell-search {
  display: flex; align-items: center; gap: var(--s2);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 6px var(--s3); min-width: 200px; color: var(--text-3); font-size: var(--fs-13);
}
.shell-search svg { width: 15px; height: 15px; flex: none; }
.shell-search kbd {
  margin-left: auto; font-family: var(--font-mono); font-size: 10px;
  color: var(--text-3); border: 1px solid var(--border-strong); border-radius: 4px; padding: 0 4px;
}
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 5px var(--s3); font-size: var(--fs-12); color: var(--text-2); white-space: nowrap;
}
.pill b { color: var(--text); font-weight: var(--fw-medium); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: linear-gradient(140deg, var(--accent), #9b8cff);
  color: #0b0f1a; font-size: var(--fs-11); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

.shell-body { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4); }

.shell-tabs { display: flex; gap: var(--s1); border-bottom: 1px solid var(--border); }
.shell-tabs .tab { background: none; border: 0; border-bottom: 2px solid transparent; font: inherit; font-size: var(--fs-13); }
.shell-tabs .tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); font-weight: var(--fw-medium); }

/* ==========================================================================
   KPI TILES WITH SPARKLINES
   ========================================================================== */

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }

.kpi-e {
  position: relative; display: flex; flex-direction: column; gap: var(--s2);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: var(--s4); min-width: 0; overflow: hidden;
}
.kpi-e .label { display: block; }
.kpi-e .kpi-e-v {
  font-size: var(--fs-26); font-weight: var(--fw-bold); letter-spacing: -0.02em;
  color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.kpi-e .kpi-e-sub { font-size: var(--fs-12); color: var(--text-3); }
.kpi-e .spark { display: block; width: 100%; height: 34px; margin-top: auto; }

/* The withheld tile. It is the reference's "Simulated ROI" KPI drawn as what
   this product can actually show: the refusal, the reason, and the three
   figures that do not depend on the payout ladder. */
.kpi-e.withheld {
  border-style: dashed; border-color: var(--border-strong);
  background:
    repeating-linear-gradient(135deg, transparent 0 7px, rgba(255, 176, 32, 0.05) 7px 14px),
    var(--surface);
}
.kpi-e.withheld .kpi-e-v { color: var(--warn); font-size: var(--fs-20); }
.kpi-e-why { font-size: var(--fs-12); color: var(--text-2); line-height: 1.45; }
/* Three rows, label left and value right: a KPI tile is ~235px wide at 1280
   and narrower in the hero card, so three side-by-side columns broke
   "1,792nd of 32,679" and "3 of 3" mid-phrase. Rows never wrap. */
.kpi-e-under { display: grid; gap: 3px; margin: auto 0 0; padding-top: var(--s3); border-top: 1px solid var(--border); }
.kpi-e-under div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); min-width: 0; }
.kpi-e-under dt { font-size: var(--fs-11); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.kpi-e-under dd { margin: 0; font-size: var(--fs-16); font-weight: var(--fw-medium); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ==========================================================================
   CHARTS — grouped bars and a line, both inline SVG over fixture values
   ========================================================================== */

.panel-e {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  display: flex; flex-direction: column; min-width: 0;
}
.panel-e-head {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s4); border-bottom: 1px solid var(--border);
}
.panel-e-head h3 { font-size: var(--fs-16); }
.panel-e-head .prov { margin-left: auto; }
.panel-e-body { padding: var(--s4); }
.panel-e-foot {
  padding: var(--s3) var(--s4); border-top: 1px solid var(--border);
  font-size: var(--fs-12); color: var(--text-3);
}

.legend { display: flex; gap: var(--s4); flex-wrap: wrap; font-size: var(--fs-12); color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 2px; display: block; }

.chart { display: block; width: 100%; height: auto; overflow: visible; }
/* SVG text inherits the page's type; ticks never shrink below 11px. */
.chart text { font-family: var(--font); font-size: 11px; fill: var(--text-3); }
.chart .axis { stroke: var(--border); }
.chart .grid { stroke: var(--border); }
.chart .tick-strong { fill: var(--text-2); }
.chart .sub { font-size: 10px; }

.callout-line { stroke: var(--accent-on-soft); stroke-width: 1; stroke-dasharray: 3 3; }
.callout-box { fill: var(--surface-2); stroke: var(--border-strong); }
.callout-text { fill: var(--text); font-size: 11px; font-weight: var(--fw-medium); }

/* ==========================================================================
   EXPOSURE TABLE — tokens.css's table, plus a name cell that carries the
   position tag, and the same .bar the product screens use for a share.
   ========================================================================== */

.pcell { display: flex; align-items: center; gap: var(--s2); }
.pname { color: var(--text); font-weight: var(--fw-medium); }
.pteam { color: var(--text-3); font-size: var(--fs-12); }
.bar-cell { display: flex; align-items: center; gap: var(--s3); }
.bar-cell .bar { flex: 1; }
.bar-cell .num { min-width: 42px; text-align: right; color: var(--text-2); font-size: var(--fs-12); }

/* ==========================================================================
   AI PANEL — the answer cites the fixture rows it names
   ========================================================================== */

.ai { display: flex; flex-direction: column; gap: var(--s3); }
.ai-turn { display: flex; flex-direction: column; gap: var(--s2); }
.ai-ask {
  align-self: flex-end; max-width: 92%;
  background: var(--accent-soft); border: 1px solid rgba(76, 141, 255, 0.3);
  border-radius: var(--r) var(--r) 3px var(--r);
  padding: var(--s2) var(--s3); font-size: var(--fs-13); color: var(--text);
}
.ai-say {
  max-width: 96%;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 3px var(--r) var(--r) var(--r);
  padding: var(--s3); font-size: var(--fs-13); color: var(--text-2); line-height: 1.55;
}
.ai-say strong { color: var(--text); font-weight: var(--fw-medium); }
.ai-say .cite {
  display: block; margin-top: var(--s2); padding-top: var(--s2);
  border-top: 1px solid var(--border); font-size: var(--fs-12); color: var(--text-3);
}
.ai-input { display: flex; gap: var(--s2); align-items: center; }
.ai-input .input { flex: 1; }
.ai-hint { font-size: var(--fs-11); color: var(--text-3); }

/* ==========================================================================
   TRUST STRIP / FEATURES / COMPETE / FOOTER
   ========================================================================== */

.e-section { padding: clamp(var(--s10), 6vw, 84px) 0; }
.e-section + .e-section { border-top: 1px solid var(--border); }

.e-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--border); border-block: 1px solid var(--border); }
.e-trust-item { background: var(--bg); padding: var(--s5) var(--s4); display: flex; gap: var(--s3); align-items: flex-start; }
.e-trust-item svg { width: 20px; height: 20px; flex: none; color: var(--accent); margin-top: 2px; }
.e-trust-v {
  font-size: var(--fs-20); font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.e-trust-l { font-size: var(--fs-12); color: var(--text-3); }

.e-sec-head { max-width: 62ch; margin-bottom: var(--s8); }
.e-sec-head h2 { font-size: var(--e-fs-title); letter-spacing: -0.028em; margin-bottom: var(--s3); text-wrap: balance; }
.e-sec-head p { font-size: var(--fs-14); color: var(--text-2); margin: 0; }

.e-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s8) var(--s6); }
.e-feature { display: flex; flex-direction: column; gap: var(--s3); border-top: 1px solid var(--border-strong); padding-top: var(--s4); }
.e-feature svg { width: 22px; height: 22px; color: var(--accent); }
.e-feature h3 { font-size: var(--fs-16); }
.e-feature p { font-size: var(--fs-13); color: var(--text-2); margin: 0; }
.e-feature .e-more { font-size: var(--fs-13); color: var(--accent); margin-top: auto; }

.e-compete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(var(--s6), 5vw, 72px); align-items: start; }

.e-quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.e-quad-cell { background: var(--surface); padding: var(--s5); }
.e-quad-cell .e-quad-v { font-size: var(--e-fs-stat); font-weight: 700; letter-spacing: -0.025em; color: var(--text); font-variant-numeric: tabular-nums; }
.e-quad-cell .e-quad-l { font-size: var(--fs-12); color: var(--text-2); margin-top: 2px; }
.e-quad-cell .e-quad-n { font-size: var(--fs-11); color: var(--text-3); margin-top: var(--s2); }

.e-quote { border-left: 0; }
.e-quote blockquote {
  margin: 0; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic;
  font-size: clamp(20px, 2.2vw, 27px); line-height: 1.42; color: var(--text);
  letter-spacing: -0.005em; text-wrap: pretty;
}
.e-quote figcaption { margin-top: var(--s5); font-size: var(--fs-13); color: var(--text-3); }
.e-quote figcaption b { display: block; color: var(--text-2); font-weight: var(--fw-medium); font-size: var(--fs-14); }

.e-foot { border-top: 1px solid var(--border); background: var(--surface); padding: var(--s10) 0 var(--s6); }
.e-foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--s8) var(--s6); }
.e-foot-tag { font-size: var(--fs-13); color: var(--text-2); max-width: 34ch; margin: var(--s3) 0 var(--s4); }
.e-foot h4 { font-size: var(--fs-11); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); font-weight: var(--fw-medium); margin-bottom: var(--s3); }
.e-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.e-foot ul a { font-size: var(--fs-13); color: var(--text-2); }
.e-foot ul a:hover { color: var(--text); }
.e-social { display: flex; gap: var(--s2); }
.e-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--r-sm);
  border: 1px solid var(--border); color: var(--text-3);
}
.e-social a:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); text-decoration: none; }
.e-social svg { width: 15px; height: 15px; }
.e-foot-legal {
  margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--border);
  display: flex; gap: var(--s5); flex-wrap: wrap; align-items: baseline;
  font-size: var(--fs-12); color: var(--text-3);
}
.e-foot-legal p { margin: 0; max-width: 76ch; color: var(--text-3); font-size: var(--fs-12); }

/* ==========================================================================
   RESPONSIVE — mobile-first is a product rule (M11). Two breaks.
   880px: the rail becomes a bottom tab bar, the hero stacks, grids collapse.
   620px: the hero's stat strip goes to one column of label-over-value.
   ========================================================================== */

@media (max-width: 1080px) {
  .e-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s10); }
  .e-h1 { max-width: 20ch; }
  .e-shot { perspective: none; }
  .e-shot-frame { transform: none; }
  .e-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .e-compete { grid-template-columns: minmax(0, 1fr); }
  .e-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 880px) {
  .e-nav-links { display: none; }
  .e-nav-burger { display: inline-flex; }
  .e-nav-actions .e-signin { display: none; }

  /* The hero card stops being a scaled screenshot and becomes the phone
     view: the dashboard's own markup reflows, the rail moves to the bottom
     of the frame with its tab bar stuck to the card's bottom edge. The
     "Open the dashboard" link stays in the title bar; the url text gives
     way to it on narrow cards. */
  .e-shot-view { aspect-ratio: auto; max-height: 460px; }
  .e-shot-canvas { position: static; width: 100%; transform: none; }
  .e-shot-url { display: none; }

  .e-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
  .e-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .e-wrap { width: min(100% - 2 * var(--s4), 1180px); }

  /* --- the rail becomes a bottom tab bar --- */
  .shell { grid-template-areas: "main" "rail"; grid-template-columns: minmax(0, 1fr); }
  .rail {
    position: sticky; top: auto; bottom: 0; align-self: stretch; min-height: 0; max-height: none;
    border-right: 0; border-top: 1px solid var(--border);
    flex-direction: row; align-items: stretch; gap: 0;
    padding: 0; z-index: 20; overflow-x: auto; overflow-y: hidden;
  }
  /* The phone preview's tab bar sticks to the bottom of the card's clip box. */
  .e-shot-canvas .rail { position: sticky; overflow-x: auto; overflow-y: hidden; }
  .rail-brand, .rail-note { display: none; }
  .rail-nav { flex-direction: row; gap: 0; width: 100%; }
  .rail-nav a, .rail-nav span {
    flex: 1 0 auto; min-width: 62px; flex-direction: column; gap: 3px;
    justify-content: center; padding: var(--s2) var(--s2);
    font-size: 10px; letter-spacing: 0.02em;
  }
  .rail-nav .rail-ico { width: 19px; height: 19px; }
  .rail-nav [aria-current="page"] { background: none; }
  .rail-nav [aria-current="page"] .rail-word { color: var(--accent-on-soft); }
  .rail-nav [aria-current="page"] .rail-ico { color: var(--accent); }

  .shell-top { flex-wrap: wrap; padding: var(--s3) var(--s4); }
  .shell-search { min-width: 0; flex: 1 1 140px; }
  .shell-body { padding: var(--s4); }
}

@media (max-width: 620px) {
  .e-stats { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .e-trust { grid-template-columns: minmax(0, 1fr); }
  .e-features { grid-template-columns: minmax(0, 1fr); }
  .e-quad { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: minmax(0, 1fr); }
  .e-foot-grid { grid-template-columns: minmax(0, 1fr); }
  .e-actions { flex-direction: column; align-items: stretch; }
  .e-btn { justify-content: center; }
  /* Phone-width card: the title bar is ~260px, so the link takes its own row. */
  .e-shot-bar { flex-wrap: wrap; row-gap: var(--s2); }
  .e-shot-bar .e-shot-open { flex: 1 1 100%; }
  .e-h1 { letter-spacing: -0.025em; }
  /* Phone width: the search takes its own row so its placeholder stays on
     one line; the tab bar snaps so a half-cut tab is a scroll cue, not a
     mistake. */
  .shell-search { flex-basis: 100%; }
  .rail { scroll-snap-type: x proximity; scrollbar-width: none; }
  .rail-nav a, .rail-nav span { scroll-snap-align: start; }
  /* The charts are 720 viewBox units wide; at ~340px that is 0.47 scale, so
     11-unit type would render at 5px. 20 units renders at 9-10px. */
  .chart text { font-size: 20px; }
  .chart .sub { font-size: 17px; transform: translateY(9px); }
  /* The callout pill cannot grow with its text; the panel's footer carries
     the same sentence, so the pill goes at phone width. */
  .callout-box, .callout-text, .callout-line { display: none; }
}

/* ==========================================================================
   MOTION — one authored moment (the card settling), plus the sparkline draw.
   Base state is fully visible; both are opt-in on a real preference.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .e-shot-frame { transform: none !important; transition: none !important; }
  .spark-line, .chart-line, .chart-bar { animation: none !important; stroke-dashoffset: 0 !important; }
}

@media (prefers-reduced-motion: no-preference) {
  .spark-line {
    stroke-dasharray: var(--len, 200); stroke-dashoffset: var(--len, 200);
    animation: e-draw 900ms cubic-bezier(0.16, 1, 0.3, 1) 240ms forwards;
  }
  .chart-line {
    stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600);
    animation: e-draw 1100ms cubic-bezier(0.16, 1, 0.3, 1) 320ms forwards;
  }
  .chart-bar {
    transform-box: fill-box; transform-origin: bottom;
    animation: e-rise 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  @keyframes e-draw { to { stroke-dashoffset: 0; } }
  @keyframes e-rise { from { transform: scaleY(0.02); } to { transform: scaleY(1); } }
}