/* ============================================================
   app.css — homepage-specific overrides only.
   ALL palette + fonts + shared components live in style.css.
   Keep this file SMALL — only what's unique to this page.
============================================================ */

body {
  min-height: 100vh;
  padding: 56px 24px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Soft halo behind the hero — uses theme accent via --accent-tint */
  background:
    radial-gradient(ellipse 900px 360px at 50% -120px, var(--accent-tint), transparent 70%),
    var(--bg);
  transition: background .25s;
}

/* ============================================================
   HERO + NATIVE SPLIT — equal 50/50 columns below the centered title.
============================================================ */
.hero-split {
  display: flex;
  align-items: flex-start;
  gap: 56px;
  width: 100%;
  max-width: 1180px;
  margin: 0 0 48px;
}
.hero        { flex: 1 1 0; min-width: 0; }
.native-aside { flex: 1 1 0; min-width: 0; }

/* Hero contents — manifesto + pills, left-aligned inside the split */
.hero .manifesto  { text-align: left; margin: 0 0 24px; max-width: 100%; }
.hero .manifesto .closer { text-align: left; }
.hero .pills      { justify-content: flex-start; margin-bottom: 0; }

/* Native aside — its sec-row, tabs, rows and legend */
.native-aside .sec-row { margin: 0 0 12px; max-width: none; }

/* Tab strip — segmented control under the section header */
.native-tabs {
  display: inline-flex;
  gap: 2px;
  background: var(--bg-strip);
  border-radius: var(--r-pill);
  padding: 3px;
  margin-bottom: 14px;
}
.native-tab {
  font: 600 11px/1 var(--font-body);
  letter-spacing: .04em;
  padding: 7px 14px;
  border: 0;
  background: transparent;
  color: var(--fg-4);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all var(--tr);
}
.native-tab:hover { color: var(--fg-2); }
.native-tab.is-active {
  background: var(--bg-card);
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(29, 25, 22, .08);
}

/* Rows hidden by default, shown when their tab is active */
.native-row { display: none; }
.native-row.is-visible { display: flex; }

@media (max-width: 980px) {
  .hero-split { flex-direction: column; gap: 32px; }
  .hero       { flex: 1 0 auto; width: 100%; max-width: 600px; margin: 0 auto; }
  .native-aside { width: 100%; }
}

/* hero layout */
.lockup-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 24px; }

.tagline {
  font-size: 11px; font-weight: 600;
  color: var(--fg-5);
  margin-bottom: 32px;
  text-align: center;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.pitch {
  font-size: 18px;
  line-height: 1.55;
  color: var(--fg-2);
  text-align: center;
  max-width: 600px;
  margin-bottom: 24px;
  letter-spacing: -.005em;
  text-wrap: pretty;
}
.pitch strong { color: var(--fg-1); font-weight: 600; }

/* Manifesto — the strong-opinion paragraph that replaces the old pitch.
   Centered, sober, punch line in bold, italic closer separated by a dashed rule. */
.manifesto {
  max-width: 580px;
  margin: 4px auto 32px;
  text-align: center;
}
.manifesto p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--fg-3);
  margin-bottom: 14px;
  text-wrap: pretty;
}
.manifesto strong { color: var(--fg-1); font-weight: 600; }
.manifesto em      { font-style: italic; color: var(--fg-2); }
.manifesto .punch  { font-size: 16px; font-weight: 500; color: var(--fg-1); margin-top: 22px; }
.manifesto .closer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
  font-style: italic;
  color: var(--fg-4);
  font-size: 13px;
}

/* Native-in-Snowflake — 12 capability rows.
   Inside .native-aside this is a single column (4 rows shown per tab).
   Row visibility is owned by the .is-visible toggle above; don't re-declare
   display here or the cascade will undo the tab filter. */
.native {
  width: 100%;
  margin: 0 0 14px;
}
.native-row {
  align-items: flex-start;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border-soft);
}
.native-row:last-child { border-bottom: 0; }
.native-role {
  font: 600 11px/1.2 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-4);
  flex-shrink: 0;
  width: 145px;
  padding-top: 6px;
}
.native-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}
.native-chip {
  font: 500 11px/1 var(--font-mono);
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--fg-2);
  white-space: nowrap;
}
.native-chip em {
  font-size: 9.5px;
  color: var(--fg-5);
  margin-left: 5px;
  font-style: italic;
  letter-spacing: .02em;
}

/* Color-coded chips for the multi-role techs — visually telegraph that
   investing in 3 specific Snowflake features covers half the stack. */
.native-chip.primary   { background: var(--primary-tint);   border-color: var(--primary);   color: var(--primary-strong); }
.native-chip.secondary { background: var(--secondary-tint); border-color: var(--secondary); color: var(--secondary-strong); }
.native-chip.tertiary  { background: var(--tertiary-tint);  border-color: var(--tertiary);  color: var(--tertiary-strong); }
.native-chip.storage   { background: #e6f6fc;               border-color: var(--snowflake-blue); color: #1a8db8; }
.native-chip.primary em,
.native-chip.secondary em,
.native-chip.tertiary em,
.native-chip.storage em { color: inherit; opacity: .7; }

/* Legend strip below the native grid — names the 3 strategic colors. */
.native-legend {
  margin: 0 0 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  font: 500 11px/1 var(--font-mono);
  color: var(--fg-5);
  letter-spacing: .04em;
}
.native-legend .item { display: inline-flex; align-items: center; gap: 7px; }
.native-legend .swatch {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.native-legend .swatch.primary   { background: var(--primary); }
.native-legend .swatch.secondary { background: var(--secondary); }
.native-legend .swatch.tertiary  { background: var(--tertiary); }
.native-legend .swatch.storage   { background: var(--snowflake-blue); }

.pills {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin-bottom: 36px;
}

/* Hub grids — wider on the home so 4 cards fit per row */
.sec-row, .grid { max-width: 1040px; }

/* theme-picker placement (top-right) */
.theme-picker.floating {
  position: fixed;
  top: 16px; right: 16px;
  z-index: 10;
}

/* footer */
footer {
  margin-top: 56px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
  width: 100%; max-width: 1040px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  font: 400 11px/1 var(--font-mono);
  color: var(--fg-5);
}
footer a {
  color: var(--fg-4);
  display: inline-flex; align-items: center; gap: 8px;
}
footer a:hover { color: var(--accent); }
footer img { border-radius: 50%; height: 22px; width: 22px; }

@media (max-width: 560px) {
  .pitch { font-size: 16px; }
  .wordmark { font-size: 16px; }
  .manifesto p { font-size: 13.5px; }
  .manifesto .punch { font-size: 15px; }
  .native-row { flex-direction: column; gap: 8px; }
  .native-role { width: auto; padding-top: 0; }
}