/* ============================================================
   Homepage-only components.

   Loaded after `static/site/site.css`, which carries the tokens, reset, type
   scale, buttons, nav, section rhythm, card shells and CTA band. Everything
   here is specific to the homepage's illustrations and product mockups —
   if a rule starts being useful on a second landing page, promote it to
   site.css rather than copying it.

   Rebuilt from Figma "Elton DataUltils" › Page 1 › Homepage:
   https://www.figma.com/design/XBEQV3zTJDC2ZEgg2o9veX/Elton-DataUltils
   ============================================================ */

/* ---------- Hero: data sources converging on the platform ---------- */

.hero { padding: 72px 0 0; background: var(--white); position: relative; overflow: hidden; }
.hero-copy { text-align: center; max-width: 1140px; margin-inline: auto; }
.hero h1 { margin-bottom: 22px; }
.hero .lead { margin-inline: auto; text-align: center; max-width: 58ch; }

/* The illustration is cropped to its own edges, so it is capped near the page
   width rather than run full-bleed to the section. */
/* The old traced fan carried ~90px of empty space above the art, which this
   pulled back; the exported illustration is cropped to its own edges, so the
   same negative margin would ride up over the last line of the subtitle. */
.hero-graphic { margin-top: 24px; }
.hero-graphic img {
  display: block;
  width: 100%;
  max-width: 1200px;
  height: auto;
  margin-inline: auto;
}

/* ---------- Feature media: photo with floating AI panel ---------- */

.media-photo {
  position: relative;
  border-radius: 24px;
  aspect-ratio: 4 / 3.4;
  overflow: hidden;
  background: var(--surface);   /* shows while the photo loads */
}
/* The frame is fixed by the AI card that overlaps it, so the photo crops to
   fill rather than driving the height itself. */
.media-photo > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ai-card {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  background: var(--white);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 18px 40px rgba(10,14,40,.22);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ai-card-head { display: flex; align-items: center; gap: 10px; }
.ai-card-head strong { font-family: var(--font-display); font-size: 16px; }
.ai-card p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.ai-card p b { font-weight: 700; color: var(--ink); }

/* ---------- Knowledge Base card ---------- */

.kb-stats { display: flex; gap: 48px; margin-bottom: 16px; }
.kb-stats div span { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.2; }
.kb-stats div small { font-size: 12px; color: var(--muted); }

.kb-bar { display: flex; height: 7px; border-radius: 999px; overflow: hidden; }
.kb-bar i { display: block; height: 100%; }
/* gap is load-bearing: with space-between alone the three labels butt together
   into "IntroductionCRMDocumentation" as soon as the card narrows. */
.kb-legend {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
  margin-bottom: 20px;
}

.kb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.kb-list li { display: flex; gap: 10px; align-items: flex-start; }
.kb-list i { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; }
.kb-list b { display: block; font-size: 14px; font-weight: 600; }
.kb-list small { font-size: 12px; color: var(--muted-soft); }

/* ---------- Data Hub metric table ---------- */

.metric-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.metric-table th {
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  padding: 0 0 14px;
}
.metric-table td {
  padding: 16px 0;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  vertical-align: top;
  line-height: 1.5;
}
.metric-table td:first-child { color: var(--ink); font-weight: 600; width: 34%; }
.metric-table code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--blue);
}

/* ---------- Chart tiles ---------- */

.chart-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px; }
.chart-card {
  background: var(--white);
  border-radius: 18px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 1px 2px rgba(10,10,10,.04);
}
.chart-card h3 { text-align: center; font-size: 16px; }
.chart-card .sub { text-align: center; font-size: 12px; color: var(--muted); margin: -12px 0 0; }
.chart-card svg { display: block; width: 100%; height: auto; }

.chart-rows { display: flex; flex-direction: column; gap: 12px; font-size: 13px; }
.chart-rows div { display: flex; justify-content: space-between; }
.chart-rows span:first-child { color: var(--muted); }
.chart-rows span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }

.chart-note { display: flex; align-items: center; gap: 12px; }
.chart-note b { font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1; }
.chart-note span { font-size: 12px; line-height: 1.4; color: var(--muted); }

/* ---------- Agent Workspace: screenshot above centred copy ---------- */

/* The one section in the design that leads with its media instead of setting
   it beside a copy column, so the caption — not the image — is the landmark:
   <figure> with the heading and body in its <figcaption>. */
.shot-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.shot {
  display: block;
  width: 100%;
  max-width: 1140px;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(10,14,40,.10);
}

/* ---------- SQL Assist screenshot mock ---------- */

.app-shot {
  margin-top: 56px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: 0 24px 60px rgba(10,14,40,.10);
}
.app-bar {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--white);
}
.app-bar i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.app-body { display: grid; grid-template-columns: 52px 210px 1fr; min-height: 420px; }
.app-rail { border-right: 1px solid var(--line-soft); padding: 14px 0; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.app-rail i { width: 18px; height: 18px; border-radius: 5px; background: var(--blue-100); display: block; }
.app-rail i.on { background: var(--blue); }
.app-side { border-right: 1px solid var(--line-soft); padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.skel { height: 10px; border-radius: 4px; background: var(--surface); }
.skel.w70 { width: 70%; } .skel.w50 { width: 50%; } .skel.w85 { width: 85%; }
.skel.tall { height: 26px; border-radius: 8px; }
.skel.on { background: var(--blue-050); }

/* min-width: 0 is load-bearing. Without it the `1fr` track refuses to shrink
   below the SQL block's min-content width, so the whole grid pushes past the
   card's rounded edge and `.app-shot { overflow: hidden }` clips it. With it,
   the track shrinks and the <pre> below becomes the scroll container instead. */
.app-main { display: flex; flex-direction: column; min-width: 0; }
.app-tabs { display: flex; gap: 22px; padding: 14px 22px; border-bottom: 1px solid var(--line-soft); font-size: 13px; color: var(--muted); }
.app-tabs b { color: var(--blue); font-weight: 600; border-bottom: 2px solid var(--blue); padding-bottom: 12px; margin-bottom: -14px; }
.app-msg { display: flex; gap: 12px; padding: 20px 22px; font-size: 13px; line-height: 1.55; color: var(--ink-soft); }
.app-msg .avatar { width: 26px; height: 26px; border-radius: 8px; background: var(--blue); flex: none; }

.sql-block {
  margin: 0 22px 22px;
  border-radius: 12px;
  background: #10131C;
  overflow: hidden;
  min-width: 0;
}
.sql-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sql-head > span { font-size: 11px; letter-spacing: .08em; color: #8A93AD; text-transform: uppercase; }
.sql-actions { display: flex; gap: 8px; }
/* Without nowrap these break mid-label into tall blocks ("DRY / RUN") and
   swallow the toolbar. */
.pill {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 6px;
  background: rgba(255,255,255,.10);
  color: #D6DBEA;
  white-space: nowrap;
}
.pill.run { background: var(--blue); color: var(--white); }
/* The SQL is a fixed block of ~78-character lines, so it is sized off the
   viewport rather than a fixed px: it shrinks to keep whole lines visible as
   the shot narrows, down to a floor that stays readable. Below that floor the
   block scrolls on its own axis — with a visible scrollbar, so residual
   overflow reads as "there is more" rather than as a broken crop. */
.sql-block pre {
  margin: 0;
  padding: 16px 18px 20px;
  font-family: var(--font-mono);
  font-size: clamp(8.5px, 1.55vw, 12.5px);
  line-height: 1.7;
  color: #C9D1E4;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #39415C transparent;
}
.sql-block pre::-webkit-scrollbar { height: 8px; }
.sql-block pre::-webkit-scrollbar-track { background: transparent; }
.sql-block pre::-webkit-scrollbar-thumb {
  background: #39415C;
  border-radius: 999px;
}
.sql-block pre::-webkit-scrollbar-thumb:hover { background: #4A5372; }
.sql-block .c { color: #6F7A96; }
.sql-block .k { color: #FF7BB0; }
.sql-block .s { color: #86E39A; }
.sql-block .f { color: #7FD3F5; }

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .chart-grid { grid-template-columns: 1fr; gap: 40px; }
  .media-photo, .chart-card { max-width: 520px; margin-inline: auto; }
  .app-body { grid-template-columns: 44px 1fr; }
  .app-side { display: none; }
}

@media (max-width: 620px) {
  /* The icon rail is pure decoration; below this it is just width taken from
     the SQL. Same for the fixed Name column — "AOV" and "GMV" need ~34px, not
     a third of the card, and the formulas are what people actually read. */
  .app-rail { display: none; }
  .app-body { grid-template-columns: 1fr; }
  .sql-block { margin-inline: 12px; }

  .metric-table td:first-child { width: 1%; white-space: nowrap; padding-right: 14px; }
}

@media (max-width: 860px) {
  .hero-graphic { margin-top: 16px; }
}