/* ============================================================
   Cast Iron Insights — marketing site
   Ported from the Claude Design prototype "Cast Iron Insights Site.dc.html".

   Structure:
     1. Design tokens (from the Cast Iron Insights design system)
     2. Base / reset
     3. Primitives (button, container, section, overline, stats)
     4. Sections, in document order
     5. Responsive
   ============================================================ */

/* DM Serif Display — display/headlines. Inter — body/UI. JetBrains Mono — data. */
@import url('fonts.css');

/* ============================================================
   1. Design tokens
   ============================================================ */
:root {
  /* Base palette: iron & grey */
  --ci-iron-deep: #1a1a2e;
  --ci-seasoned: #1c1c1e;
  --ci-raw-iron: #3a3a3c;
  --ci-steel: #6b6b7b;
  --ci-patina: #78756e;
  --ci-smoke: #a8a49c;
  --ci-ash: #f0ede8;

  /* Base palette: fire & forge */
  --ci-skillet: #8b4a3a;
  --ci-bronze: #6b4d35;
  --ci-copper: #8b5e3c;
  --ci-burnish: #c4a265;

  /* Derived darks */
  --ci-pitch: #141420;
  --ci-sunken: #16161f;
  --ci-raised: #232330;
  --ci-line-soft: #2a2a38;

  /* Surfaces */
  --surface-app: var(--ci-pitch);
  --surface-base: var(--ci-iron-deep);
  --surface-card: var(--ci-seasoned);
  --surface-raised: var(--ci-raised);
  --surface-sunken: var(--ci-sunken);
  --surface-inverse: var(--ci-ash);

  /* Text on dark */
  --text-strong: #ffffff;
  --text-body: #e4e1da;
  --text-muted: var(--ci-smoke);
  --text-subtle: var(--ci-patina);
  --text-faint: #8e8b83; /* lightened from --ci-steel for WCAG AA on --surface-app */
  --text-on-accent: #ffffff;

  /* Borders */
  --border: rgba(255, 255, 255, 0.08);
  --border-soft: rgba(255, 255, 255, 0.05);
  --border-strong: var(--ci-raw-iron);
  --border-accent: rgba(196, 162, 101, 0.4);

  /* Action / accent */
  --accent: var(--ci-copper);
  --accent-hover: #a06d45;
  --accent-press: #744c30;
  --accent-ring: rgba(196, 162, 101, 0.45);
  --gold: var(--ci-burnish);

  --negative: #c05746;

  /* Type */
  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Radii */
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45), 0 6px 18px rgba(0, 0, 0, 0.28);
  --glow-gold: 0 0 0 1px rgba(196, 162, 101, 0.3), 0 0 32px rgba(196, 162, 101, 0.1);
  --inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --focus-ring: var(--accent-ring);

  /* Layout */
  --page-max: 1180px;
  --page-pad: 28px;

  /* Light surfaces used only by the in-page Anvil mockup */
  --mock-paper: #f6f4ef;
  --mock-rail: #f1eee7;
  --mock-zebra: #faf8f3;
  --mock-line: #e4e0d6;
  --mock-line-soft: #f3f0e9;
  --mock-ink: #1c1c1e;
  --mock-ink-2: #57534a;
  --mock-ink-3: #6e6a60;
  --mock-dim: #9b968a;
}

/* ============================================================
   2. Base
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Sticky 64px header must not cover anchored section headings. */
  scroll-padding-top: 64px;
}

body {
  margin: 0;
  background: var(--surface-app);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--gold);
}

img {
  max-width: 100%;
}

h1,
h2,
h3 {
  font-weight: 400;
}

::selection {
  background: rgba(196, 162, 101, 0.28);
  color: var(--text-strong);
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — keyboard users shouldn't have to tab the whole header. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: 14px;
  font-weight: 600;
  transition: top 140ms ease;
}

.skip-link:focus {
  top: 12px;
  color: var(--text-on-accent);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   3. Primitives
   ============================================================ */

.container {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

.section {
  border-bottom: 1px solid var(--border-soft);
}

.section--base {
  background: var(--surface-base);
}

.section__inner {
  padding-block: 80px;
}

/* Eyebrow / overline label */
.overline {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.overline--accent {
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 10px;
}

.overline--accent::before {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--ci-copper);
  display: inline-block;
}

.display {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--text-strong);
  letter-spacing: -0.02em;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.lede {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* --- Button (ported from design-system components/core/Button.jsx) --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.005em;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: background 140ms ease, border-color 140ms ease, transform 90ms ease,
    box-shadow 140ms ease;
}

.btn--sm {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  gap: 6px;
}

.btn--lg {
  height: 48px;
  padding: 0 22px;
  font-size: 15px;
  gap: 9px;
}

.btn--block {
  display: flex;
  width: 100%;
}

.btn--primary {
  background: var(--accent);
  color: var(--text-on-accent);
  box-shadow: var(--inset-top), var(--shadow-sm);
}

.btn--primary:hover {
  background: var(--accent-hover);
  color: var(--text-on-accent);
}

.btn--secondary {
  background: var(--surface-raised);
  color: var(--text-body);
  border-color: var(--border-strong);
}

.btn--secondary:hover {
  background: var(--ci-raw-iron);
  border-color: var(--ci-steel);
  color: var(--text-body);
}

.btn[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
}

/* --- Stat cluster --- */
.stats {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.stat__value {
  font-family: var(--font-mono);
  font-size: 26px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
}

/* Card surface */
.card {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}

/* ============================================================
   4. Sections
   ============================================================ */

/* --- Header --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(20, 20, 32, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}

.site-header__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
  height: 64px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.brand__mark {
  height: 30px;
  width: auto;
  display: block;
}

.brand__word {
  display: flex;
  align-items: baseline;
  gap: 2px;
  line-height: 1;
}

.brand__word-cast {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 21px;
  color: var(--gold);
}

.brand__word-iron {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.02em;
  color: var(--text-strong);
}

/* Product name set after the company wordmark in the header. */
.brand__rule {
  width: 1px;
  height: 20px;
  margin: 0 4px;
  background: var(--border-strong);
}

.brand__product {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--text-muted);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 13.5px;
  font-weight: 500;
}

.site-nav a {
  color: var(--text-muted);
  transition: color 140ms ease;
  /* Vertical padding brings the hit area to >=24px (WCAG 2.2 SC 2.5.8)
     without changing how the link looks. */
  padding: 6px 0;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--text-strong);
}

.site-header__spacer {
  flex: 1;
}

/* --- Hero --- */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border-soft);
}

.hero__glow,
.hero__glow--warm {
  position: absolute;
  pointer-events: none;
}

.hero__glow {
  inset: -30% 20% 40% -10%;
  background: radial-gradient(closest-side, rgba(196, 162, 101, 0.1), transparent 70%);
}

.hero__glow--warm {
  inset: 20% -10% -40% 40%;
  background: radial-gradient(closest-side, rgba(139, 94, 60, 0.14), transparent 70%);
}

.hero__map {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -6%;
  width: 64%;
  pointer-events: none;
  opacity: 0.85;
  mask-image: linear-gradient(to right, transparent, #000 42%);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 42%);
}

.hero__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.hero__inner {
  position: relative;
  padding-block: 96px 72px;
}

/* "Anvil by Cast Iron" lockup above the headline. */
.hero__lockup {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1;
}

.hero__lockup-product {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 22px;
  color: var(--text-strong);
}

.hero__lockup-by {
  font-size: 15px;
  color: var(--text-faint);
}

.hero__title {
  margin: 22px 0 0;
  max-width: 16ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(44px, 6.4vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  text-wrap: balance;
}

.hero__title em {
  font-style: normal;
  color: var(--gold);
}

.hero__sub {
  margin: 28px 0 0;
  max-width: 60ch;
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* Turnover stat, set against a rule above the CTAs. */
.hero__stat {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--border-soft);
  max-width: 62ch;
  display: flex;
  align-items: baseline;
  gap: 18px;
}

.hero__stat-value {
  flex: none;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(46px, 5vw, 64px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--gold);
}

.hero__stat-note {
  margin: 0;
  align-self: center;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-muted);
  text-wrap: pretty;
}

.hero__actions {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.hero__note {
  font-size: 13px;
  color: var(--text-faint);
  padding-left: 6px;
}

/* --- Product mockup --- */
.product {
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 40%);
}

.product__inner {
  padding-block: 64px 76px;
}

.product__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}

.product__title {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1.1;
  color: var(--text-strong);
}

.product__aside {
  margin: 0;
  max-width: 38ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

.product__caption {
  margin-top: 12px;
  font-size: 11.5px;
  color: var(--text-faint);
}

/* Mockup chrome — a light-on-dark app screenshot rendered in DOM */
.mock {
  border-radius: 18px;
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
  background: var(--mock-paper);
}

.mock__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 52px;
  padding: 0 16px 0 18px;
  background: var(--mock-ink);
  color: #fff;
}

.mock__logo {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-display);
  font-size: 16px;
}

.mock__logo span {
  color: var(--ci-copper);
  font-family: var(--font-sans);
  font-weight: 800;
}

.mock__rule {
  width: 1px;
  height: 22px;
  background: var(--ci-raw-iron);
  flex: none;
}

.mock__tenant {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #c9c5bb;
  min-width: 0;
}

.mock__tenant-name {
  font-weight: 600;
  color: #edeae2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mock__pill {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ci-copper);
  background: rgba(139, 94, 60, 0.18);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

.mock__spacer {
  flex: 1;
}

.mock__search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 220px;
  max-width: 30vw;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--ci-raw-iron);
  background: #242426;
  font-size: 12px;
  color: #8e8a80;
}

.mock__search svg {
  flex: none;
}

.mock__search-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mock__kbd {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--mock-ink-3);
  border: 1px solid var(--ci-raw-iron);
  border-radius: 4px;
  padding: 1px 5px;
}

.mock__user {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mock__avatar {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  background: var(--ci-copper);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.mock__user-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.mock__user-name {
  font-size: 12px;
  font-weight: 600;
  color: #edeae2;
}

.mock__user-role {
  font-size: 10.5px;
  color: #8e8a80;
}

.mock__body {
  display: grid;
  grid-template-columns: 212px minmax(0, 1fr);
}

.mock__rail {
  background: var(--mock-rail);
  border-right: 1px solid var(--mock-line);
  padding: 18px 10px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mock__rail-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mock-dim);
  padding: 0 10px 8px;
}

.mock__rail-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12.5px;
  color: var(--mock-ink-2);
}

.mock__rail-item {
  padding: 7px 10px;
  border-radius: 8px;
}

.mock__rail-item.is-active {
  background: var(--mock-ink);
  color: #fff;
  font-weight: 600;
}

.mock__main {
  padding: 26px 32px 22px;
  min-width: 0;
}

.mock__crumb {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mock-dim);
}

.mock__h {
  margin: 8px 0 4px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 27px;
  color: var(--mock-ink);
}

.mock__sub {
  margin: 0 0 18px;
  font-size: 12.5px;
  color: var(--mock-ink-3);
}

.mock__filters {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.mock__filter {
  font-size: 11px;
  font-weight: 600;
  color: var(--mock-ink-2);
  background: #fff;
  border: 1px solid var(--mock-line);
  border-radius: 6px;
  padding: 5px 10px;
}

.mock__filter.is-active {
  color: var(--mock-ink);
  border-color: #d8d4c8;
}

.mock__filter.is-flag {
  color: #8a5c0a;
  background: #fdf3e7;
  border-color: #f0e2cc;
}

/* The ranked table. One shared grid template keeps header, rows and the
   full-width annotation strip in alignment while the table scrolls. */
.mock__table {
  background: #fff;
  border: 1px solid var(--mock-line);
  border-radius: 12px;
  overflow-x: auto;
  overflow-y: hidden;
}

.mock__grid {
  display: grid;
  grid-template-columns: 46px minmax(240px, 1fr) 140px 108px 120px;
  min-width: 860px;
  align-items: center;
}

.mock__thead {
  background: var(--mock-zebra);
  border-bottom: 1px solid #eeebe2;
  padding: 9px 18px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mock-dim);
}

.mock__row {
  padding: 11px 18px;
  border-bottom: 1px solid var(--mock-line-soft);
  font-size: 12.5px;
}

.mock__row--zebra {
  background: var(--mock-zebra);
}

.mock__rank {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--gold);
}

.mock__op {
  min-width: 0;
}

.mock__op-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--mock-ink);
}

.mock__op-meta {
  font-size: 11.5px;
  color: var(--mock-dim);
}

.mock__territory {
  font-size: 12px;
  color: var(--mock-ink-2);
}

.mock__prize {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12px;
  color: #403d36;
  font-variant-numeric: tabular-nums;
}

.mock__prize--none {
  color: var(--mock-dim);
}

.mock__score {
  text-align: right;
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--mock-ink);
  font-variant-numeric: tabular-nums;
}

/* "Why this rank" expansion + footnote: full-bleed strips inside the same
   scroll box, so they must match the grid's min-width, not exceed it. */
.mock__why,
.mock__foot {
  min-width: 860px;
}

.mock__why {
  padding: 14px 18px;
  border-bottom: 1px solid var(--mock-line-soft);
  background: var(--mock-zebra);
  border-left: 2px solid var(--ci-copper);
}

.mock__why-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mock-dim);
  margin-bottom: 8px;
}

.mock__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mock__tag {
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  padding: 4px 10px;
}

.mock__tag--menu {
  color: #1a4878;
  background: #e8f0f8;
}

.mock__tag--price {
  color: #4a3891;
  background: #edeaf8;
}

.mock__tag--growth {
  color: #2e6b42;
  background: #eaf2ec;
}

.mock__tag--gap {
  color: #8a5c0a;
  background: #fdf3e7;
}

.mock__foot {
  padding: 11px 18px;
  border-top: 1px solid #eeebe2;
  font-size: 11px;
  color: var(--mock-dim);
  line-height: 1.5;
}

/* --- Problem --- */
.problem__title {
  margin: 12px 0 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  color: var(--text-strong);
}

.problem__lede {
  margin: 16px 0 0;
  max-width: 56ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-muted);
}

.problem__grid {
  margin-top: 46px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  overflow: hidden;
}

.problem__cell {
  background: var(--surface-card);
  padding: 26px 24px 28px;
}

.problem__num {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ci-copper);
  letter-spacing: 0.14em;
}

.problem__cell h3 {
  margin: 14px 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-strong);
}

.problem__cell p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* min() keeps the track from forcing a width wider than its container on
   narrow screens — a bare minmax(320px,1fr) overflows below ~360px. */
.compare {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 20px;
}

.compare__card {
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 28px 26px;
  background: rgba(255, 255, 255, 0.015);
}

.compare__card--good {
  border-color: var(--border-accent);
  background: linear-gradient(180deg, rgba(196, 162, 101, 0.07), rgba(196, 162, 101, 0));
  position: relative;
  overflow: hidden;
}

.compare__card--good::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--gold));
}

.compare__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.compare__card--good .compare__label {
  color: var(--gold);
}

.compare__card p {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
}

.compare__card--good p {
  color: var(--text-body);
}

.problem__kicker {
  margin: 48px auto 0;
  max-width: 34ch;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.2;
  color: var(--text-strong);
}

/* --- Platform / persona selector --- */
.platform {
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  min-height: 100vh;
}

.platform__inner {
  width: 100%;
  padding-block: 56px;
}

.platform__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.platform__title {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.05;
  color: var(--text-strong);
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tab {
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 9px 18px;
  font: 600 13px/1 var(--font-sans);
  color: var(--text-muted);
  background: transparent;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.tab:hover {
  color: var(--text-body);
  border-color: var(--border-strong);
}

.tab[aria-selected='true'] {
  border-color: var(--border-accent);
  color: var(--text-strong);
  background: var(--accent);
}

.platform__panels {
  margin-top: 34px;
}

.platform__panel[hidden] {
  display: none;
}

.platform__layout {
  display: grid;
  grid-template-columns:
    minmax(min(280px, 100%), 1.05fr)
    minmax(min(240px, 100%), 1fr)
    minmax(min(240px, 100%), 1fr);
  gap: 28px;
  align-items: start;
}

.platform__body {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--text-body);
  text-wrap: pretty;
}

.checklist {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.checklist li {
  padding: 12px 0;
  border-top: 1px solid var(--border-soft);
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.checklist li::before {
  content: '✓';
  color: var(--accent);
}

.track {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-card);
  padding: 24px 22px 26px;
  box-shadow: var(--shadow-card);
}

.track__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.track__num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.12em;
}

.track__tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ci-copper);
}

.track__title {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.15;
  color: var(--text-strong);
}

.track__points {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.track__points li {
  display: flex;
  gap: 9px;
}

.track__points li::before {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--ci-copper);
}

.platform__foot {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.platform__lists {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
}

.platform__list-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.platform__list-body {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-body);
}

.platform__list-body--muted {
  color: var(--text-muted);
}

/* --- Menus --- */
.split {
  display: grid;
  grid-template-columns: minmax(min(300px, 100%), 1fr) minmax(min(300px, 100%), 1fr);
  gap: 48px;
  align-items: center;
}

.section__title {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.06;
  color: var(--text-strong);
}

.menus__card {
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.menus__map {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) 28px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.menus__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.menus__pane-label {
  margin-bottom: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.menus__spellings {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.menus__spellings li {
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface-sunken);
  padding: 10px 12px;
}

.menus__spelling {
  display: block;
  font-size: 13.5px;
  font-style: italic;
  color: var(--text-body);
}

.menus__where {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-faint);
}

/* One arrow per spelling, spread down the height of the list. */
.menus__arrows {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding-top: 22px;
  color: var(--accent);
  font-size: 16px;
}

.menus__target {
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: var(--surface-sunken);
  padding: 16px;
  box-shadow: 0 0 0 3px rgba(139, 94, 60, 0.14);
}

.menus__path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-faint);
}

.menus__sep {
  color: var(--accent);
}

.menus__line {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-strong);
}

.menus__count {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.menus__score {
  border-top: 1px solid var(--border-soft);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.menus__score-value {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.menus__score-note {
  font-size: 12.5px;
  color: var(--text-faint);
}

/* --- Markets / coverage --- */
.markets {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border-soft);
}

.markets__glow {
  position: absolute;
  inset: -20% 30% 30% -15%;
  background: radial-gradient(closest-side, rgba(139, 94, 60, 0.16), transparent 70%);
  pointer-events: none;
}

.markets__inner {
  position: relative;
  padding-block: 80px;
}

.markets__layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 48px;
  align-items: center;
}

.markets__copy {
  max-width: 46ch;
}

.markets__title {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.05;
  color: var(--text-strong);
}

.markets__actions {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.markets__note {
  font-size: 13px;
  color: var(--text-faint);
}

/* Map panel bleeds to the right viewport edge on wide screens. */
.markets__map {
  position: relative;
  min-height: 520px;
  border: 1px solid var(--border);
  border-right: 0;
  border-radius: 18px 0 0 18px;
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-right: calc(-1 * max(0px, (100vw - var(--page-max)) / 2 + var(--page-pad)));
}

.markets__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.markets__map-label {
  position: absolute;
  left: 18px;
  top: 18px;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --- Refresh --- */
.refresh__layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 48px;
  align-items: center;
}

.refresh__copy {
  max-width: 46ch;
}

.refresh__card {
  padding: 26px;
}

.refresh__card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.refresh__card-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.refresh__stamp {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--gold);
}

.refresh__rows {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.refresh__rows li {
  padding: 14px 0;
  border-top: 1px solid var(--border-soft);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  color: var(--text-body);
}

.refresh__val {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.refresh__val--up {
  color: var(--gold);
}

.refresh__caption {
  margin: 16px 0 0;
  font-size: 12px;
  color: var(--text-faint);
}

/* --- Team --- */
.team__title {
  margin: 12px 0 0;
  max-width: 26ch;
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  color: var(--text-strong);
}

.team__layout {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 44px;
  align-items: start;
}

.team__statement {
  margin: 0;
  font-size: 20px;
  line-height: 1.55;
  color: var(--text-strong);
  text-wrap: pretty;
}

.team__proprietary {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* "Anvil is built and supported by Cast Iron Insights." */
.team__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border-soft);
}

.team__brand-mark {
  display: block;
  height: 34px;
  width: auto;
}

.team__brand p {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-body);
}

.team__brand .brand__word-cast {
  font-size: 19px;
}

.team__brand .brand__word-iron {
  font-size: inherit;
  letter-spacing: 0;
}

.team__quote {
  margin: 30px 0 0;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  background: var(--surface-card);
}

/* Type sits on the paragraph, not the blockquote, so the attribution
   below it does not inherit the pull-quote size and color. */
.team__quote p {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--gold);
}

.team__quote footer {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-faint);
}

.team__points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.team__points li {
  padding: 20px 0;
  border-top: 1px solid var(--border-soft);
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 16px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-muted);
  text-wrap: pretty;
}

.team__points li:last-child {
  border-bottom: 1px solid var(--border-soft);
}

.team__points-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  padding-top: 3px;
}

.team__stats {
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}

.team__stats .stat__value {
  font-size: 30px;
}

.team__stats .stat__label {
  margin-top: 6px;
  font-size: 13px;
}

/* --- FAQ --- */
.faq__layout {
  display: grid;
  grid-template-columns: minmax(min(240px, 100%), 0.7fr) minmax(min(320px, 100%), 1.3fr);
  gap: 48px;
}

.faq__title {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.08;
  color: var(--text-strong);
}

.faq__list {
  border-top: 1px solid var(--border-soft);
}

.faq__item {
  padding: 24px 0;
  border-bottom: 1px solid var(--border-soft);
}

.faq__item h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-strong);
}

.faq__item p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-muted);
}

/* --- Contact --- */
.contact__inner {
  padding-block: 80px 88px;
}

.contact__layout {
  display: grid;
  grid-template-columns: minmax(min(300px, 100%), 1fr) minmax(min(320px, 100%), 1fr);
  gap: 56px;
  align-items: start;
}

.contact__title {
  margin: 12px 0 0;
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  color: var(--text-strong);
}

.contact__title em {
  color: var(--gold);
}

.contact__lede {
  margin: 20px 0 0;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-muted);
}

.contact__email {
  display: inline-block;
  margin-top: 20px;
  padding: 5px 0;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--gold);
}

.contact__tag {
  margin: 28px 0 0;
  font-size: 13px;
  color: var(--text-faint);
}

.form {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-card);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-card);
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Odd field out (Role / title) spans the row rather than leaving a gap. */
.field--wide {
  grid-column: 1 / -1;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* The label text and its required marker must be ONE flex item — as separate
   children of the column flexbox the asterisk stacks onto its own line, which
   also made required and optional fields in the same row misalign by 20px. */
.field__label {
  display: block;
}

.field input,
.field textarea {
  /* Pins controls to the bottom of a stretched grid row, so inputs stay
     aligned even if one label in the row wraps. */
  margin-top: auto;
  padding: 0 12px;
  height: 42px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--surface-sunken);
  color: var(--text-body);
  font-size: 14px;
  font-family: inherit;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  transition: border-color 140ms ease;
}

.field textarea {
  height: auto;
  padding: 12px;
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  border-color: var(--gold);
  outline: none;
}

.field input:user-invalid,
.field textarea:user-invalid {
  border-color: var(--negative);
}

.field__req {
  color: var(--ci-copper);
}

.form__note {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--text-faint);
}

.form__note--error {
  color: #db8073;
}

.form__note--ok {
  color: var(--gold);
}

/* --- Footer --- */
.site-footer {
  border-top: 1px solid var(--border-soft);
  background: var(--surface-app);
}

.site-footer__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 36px var(--page-pad);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.site-footer .brand__mark {
  height: 26px;
}

.site-footer .brand__word-cast {
  font-size: 19px;
}

.site-footer .brand__word-iron {
  font-size: 17px;
}

.site-footer__tag,
.site-footer__legal {
  font-size: 12.5px;
  color: var(--text-faint);
}

.site-footer__legal {
  font-size: 12px;
}

.site-footer__spacer {
  flex: 1;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-size: 13px;
}

.site-footer nav a {
  color: var(--text-muted);
  transition: color 140ms ease;
  display: inline-block;
  padding: 5px 0;
}

.site-footer nav a:hover,
.site-footer nav a:focus-visible {
  color: var(--text-strong);
}

.site-footer nav a.is-cta {
  color: var(--gold);
}

/* ============================================================
   5. Responsive
   The prototype was authored desktop-only; these are the
   breakpoints needed to keep it intact down to 320px.
   ============================================================ */

@media (max-width: 1000px) {
  .platform__layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Copy spans the full width, tracks sit side by side beneath it. */
  .platform__layout > .platform__col {
    grid-column: 1 / -1;
  }

  /* Height is content-driven once the layout stacks. */
  .platform {
    min-height: 0;
  }

  .faq__layout,
  .contact__layout,
  .split {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .markets__map {
    margin-right: 0;
    border-right: 1px solid var(--border);
    border-radius: 18px;
    min-height: 420px;
  }
}

@media (max-width: 760px) {
  :root {
    --page-pad: 20px;
  }

  .section__inner,
  .markets__inner {
    padding-block: 56px;
  }

  .contact__inner {
    padding-block: 56px 64px;
  }

  .product__inner {
    padding-block: 48px 56px;
  }

  .hero__inner {
    padding-block: 64px 56px;
  }

  /* The animated map is decorative; behind body copy it hurts legibility. */
  .hero__map {
    width: 100%;
    right: 0;
    opacity: 0.28;
    mask-image: linear-gradient(to bottom, transparent, #000 60%);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 60%);
  }

  .hero__title {
    max-width: none;
  }

  .hero__sub {
    font-size: 17px;
  }

  .site-nav {
    gap: 18px;
    font-size: 13px;
  }

  .problem__grid,
  .platform__layout,
  .form__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .platform__lists {
    gap: 20px;
  }

  .team__stats {
    gap: 28px;
  }

  /* Rail duplicates context already in the heading — drop it on small screens
     rather than squeezing the table into ~100px. */
  .mock__rail {
    display: none;
  }

  .mock__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .mock__main {
    padding: 20px 18px 18px;
  }

  .mock__h {
    font-size: 22px;
  }

  /* The bar can't hold a search field next to the tenant name here. */
  .mock__search {
    display: none;
  }
}

@media (max-width: 560px) {
  .site-header__inner {
    gap: 16px;
  }

  /* Logo + demo CTA are the load-bearing header elements at this width. */
  .site-nav {
    display: none;
  }

  .brand__mark {
    height: 26px;
  }

  .mock__user-meta {
    display: none;
  }

  .menus__map {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .menus__arrows {
    flex-direction: row;
    justify-content: center;
    padding-top: 0;
  }

  .menus__arrows span {
    transform: rotate(90deg);
  }

  .menus__arrows span + span {
    display: none;
  }

  /* Side by side the number leaves too little room for the sentence. */
  .hero__stat {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .hero__stat-note {
    align-self: flex-start;
  }

  .hero__actions .btn {
    flex: 1 1 auto;
  }

  .hero__note {
    padding-left: 0;
  }

  .platform__foot {
    align-items: flex-start;
  }

  .platform__foot .btn {
    width: 100%;
  }

  .site-footer__spacer {
    display: none;
  }
}

/* Below ~380px the header can't fit logo, wordmark, product name and the
   demo button on one row. The hero lockup right underneath already reads
   "Anvil by Cast Iron", so the header's product name is the one to drop. */
@media (max-width: 380px) {
  .brand__rule,
  .brand__product {
    display: none;
  }
}