/* The SEO set's pages (RELAUNCH.md section 7, IntentPagesController):
   the intent pages, their hubs, and the company pages, on the relaunch
   tokens and the homepage's rl- rules (home.css). Prefixed it-. */

.it-page { padding-bottom: 6rem; }

.it-crumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-mute);
  margin-bottom: var(--space-6);
}

.it-crumb a { color: var(--ink-soft); transition: color 200ms; }
.it-crumb a:hover { color: var(--accent); }

/* ---------- the hero: copy left, the pair right ---------- */
.it-hero { padding-top: var(--space-7); }

.it-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 7fr);
  gap: var(--space-8);
  align-items: center;
}

.it-hero-copy h1 { max-width: 12ch; }
.it-hero-copy .rl-lead { margin-top: var(--space-5); }

.it-cta { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }

.it-preview {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  max-width: 34rem;
  text-wrap: pretty;
}

.it-facts {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.it-facts li { display: flex; align-items: center; gap: 8px; }
.it-facts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.it-ba { aspect-ratio: 4 / 3; border: 0; box-shadow: var(--shadow-deep); }
.it-ba .ba-label { font-family: var(--font-body); font-weight: 500; font-size: 0.8125rem; }

.it-caption {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-mute);
  text-wrap: pretty;
}

.it-lead-figure { margin: 0; }
.it-lead-figure img { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-deep); }
.it-lead-figure figcaption { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--ink-mute); }

/* ---------- three steps ---------- */
.it-steps h2 { max-width: 20ch; }

.it-steps-list {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  border-top: 2px solid var(--ink);
}

.it-steps-list li { padding-top: var(--space-5); border-top: 1px solid transparent; }

.it-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 3.5rem;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--accent);
  margin-bottom: var(--space-4);
}

.it-steps-list p { font-size: var(--text-base); color: var(--ink-soft); max-width: 30rem; text-wrap: pretty; }

/* ---------- proof: the video and the styles, the gallery, the tools ---------- */
.it-proof-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-8);
  align-items: start;
}

.it-video .rl-lead, .it-styles .rl-lead { margin: var(--space-3) 0 var(--space-5); font-size: 1.0625rem; }

.it-video-clip {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--paper-deep) center / cover no-repeat;
  box-shadow: var(--shadow-deep);
}

.it-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.it-chip { display: block; }
.it-chip img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); transition: transform 700ms var(--ease-out); }
.it-chip:hover img { transform: scale(1.04); }
.it-chip span { display: block; margin-top: 8px; font-size: var(--text-sm); font-weight: 500; transition: color 200ms; }
.it-chip:hover span { color: var(--accent); }

.it-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.it-gallery-tile { display: block; position: relative; border-radius: var(--radius-md); overflow: hidden; }
.it-gallery-tile img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 900ms var(--ease-out); }
.it-gallery-tile:hover img { transform: scale(1.03); }
.it-gallery-tile span {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 7px 11px;
  border-radius: var(--radius-pill);
  background: rgba(15, 20, 23, 0.72);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.it-tools-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); }
.it-tool-card { display: block; }
.it-tool-card .rl-cmp { display: block; }
.it-tool-card .rl-nm { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-3); font-weight: 500; transition: color 200ms; }
.it-tool-card:hover .rl-nm { color: var(--accent); }
.it-tool-hint { display: block; margin-top: 4px; font-size: var(--text-sm); color: var(--ink-soft); }

/* ---------- related pages ---------- */
.it-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  border-top: 2px solid var(--ink);
  padding-top: var(--space-5);
}

.it-related-grid h3 { font-size: var(--text-sm); font-weight: 500; color: var(--ink-mute); margin-bottom: var(--space-3); }
.it-related-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.it-related-grid li a { font-size: var(--text-base); transition: color 200ms; }
.it-related-grid li a:hover { color: var(--accent); }

/* ---------- the close ---------- */
.it-close .rl-dark { align-items: center; }
.it-close-h {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #fff;
  max-width: 12ch;
}
.it-close .rl-dark p { margin-bottom: var(--space-5); }

/* ---------- hubs ---------- */
.it-hub-head { padding-top: var(--space-7); }
.it-hub-head h1 { max-width: 16ch; }
.it-hub-head .rl-lead { margin-top: var(--space-5); }
.it-hub-body { padding-top: var(--space-7); }

.it-tools-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); }
.it-rooms-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); }
.it-room-card { display: block; }
.it-room-im { display: block; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper-deep); }
.it-room-im img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.it-room-card:hover .it-room-im img { transform: scale(1.03); }
.it-room-card .rl-nm { display: block; margin-top: var(--space-3); font-weight: 500; transition: color 200ms; }
.it-room-card:hover .rl-nm { color: var(--accent); }
.it-hub-note { margin-top: var(--space-7); font-size: var(--text-sm); color: var(--ink-soft); }

/* ---------- company pages ---------- */
.it-company { padding-top: var(--space-7); }
.it-company .rl-wrap { max-width: 48rem; }
.it-company h1 { max-width: 16ch; }
.it-company .rl-lead { margin-top: var(--space-5); }
.it-company h2 { font-size: 1.5rem; margin-top: var(--space-7); margin-bottom: var(--space-3); }
.it-company p { color: var(--ink-soft); text-wrap: pretty; }
.it-company p + p { margin-top: var(--space-3); }

@media (max-width: 1100px) {
  .it-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .it-hero-copy h1 { max-width: 16ch; }
  .it-proof-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .it-tools-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .it-page { padding-bottom: 4rem; }
  .it-steps-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .it-num { font-size: 2.75rem; }
  .it-chips, .it-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .it-tools-row, .it-tools-grid, .it-rooms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
  .it-related-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .it-close .rl-dark { grid-template-columns: minmax(0, 1fr); padding: var(--space-6) var(--space-5); gap: var(--space-5); }
  .it-close-h { max-width: none; }
  .it-cta .btn-lg { width: 100%; }
}