/* ──────────────────────────────────────────────────────────────
   Tools Hub — Skrooge design system (pixel-matched to Figma)
   Content area: 1152px (container 1200 - 2×24 padding)
   ────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* ── Reset ─────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: clip;
}

.th-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ══════════════════════════════════════════════════════════════
   Header — h64, white bg
   ══════════════════════════════════════════════════════════════ */
.th-header {
  font-family: 'Montserrat', sans-serif;
  background: #ffffff;
  border-bottom: 1px solid #E0E2E6;
}

.th-header-items {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.th-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.th-header-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.th-header-nav-link {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #051634;
  text-decoration: none;
  transition: color 0.2s ease;
}

.th-header-nav-link:hover {
  color: #6A2135;
}

.th-header-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  background: #6A2135;
  color: #ffffff !important;
  border-radius: 16px;
  font-weight: 600;
  transition: background 0.2s ease;
}

.th-header-nav-cta:hover {
  background: #8a3a50;
}

/* ══════════════════════════════════════════════════════════════
   Hero — centered text
   ══════════════════════════════════════════════════════════════ */
.th-hero {
  font-family: 'Montserrat', sans-serif;
  padding: 80px 0 60px;
  color: #051634;
}

.th-hero-inner {
  max-width: 680px;
  margin: 0 auto;
}

.th-hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.th-cc-trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}

.th-cc-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #F6EEE9;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: #697385;
}

.th-cc-trust-icon {
  font-size: 0.8rem;
}

.th-hero-title {
  font-family: 'Reaktif', 'Montserrat', sans-serif;
  font-size: 56px;
  line-height: 64px;
  font-weight: 700;
  margin: 0 0 20px;
}

.th-hero-subtitle {
  font-size: 18px;
  line-height: 28px;
  color: #697385;
  margin: 0;
  max-width: 700px;
}

.th-hero-subtitle strong {
  color: #051634;
}

/* ══════════════════════════════════════════════════════════════
   Sections
   ══════════════════════════════════════════════════════════════ */
.th-section {
  font-family: 'Montserrat', sans-serif;
  padding: 64px 0;
  color: #051634;
}

.th-section--dark {
  background: #6A2135;
  color: #ffffff;
  border-radius: 48px;
}

.th-section--dark .th-section-title {
  color: #ffffff;
}

.th-section--dark .th-section-desc {
  color: rgba(255, 255, 255, 0.8);
}

.th-section--light {
  background: #f5f6fa;
  border-radius: 48px;
}

.th-section--cta {
  background: #6A2135;
  padding: 28px 0;
}

.th-section--cta.th-section-light {
  background: #f5f6fa;
}

.th-section-label {
  display: inline-block;
  width: fit-content;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6A2135;
  background: #f6eee9;
  border-radius: 100px;
  padding: 4px 14px;
  margin-bottom: 16px;
  align-self: flex-start;
}

.th-section--dark .th-section-label,
.th-section-label--on-dark {
  background: #ffffff;
  color: #6A2135;
}

.th-section--light .th-section-label {
  background: #ffffff;
}

.th-section-title {
  font-family: 'Reaktif', 'Montserrat', sans-serif;
  font-size: 36px;
  line-height: 44px;
  font-weight: 700;
  margin: 0 0 12px;
}

.th-section-desc {
  font-size: 16px;
  line-height: 24px;
  color: #697385;
  margin: 0 0 40px;
  max-width: 520px;
}

/* ══════════════════════════════════════════════════════════════
   Cards — base
   ══════════════════════════════════════════════════════════════ */
.th-card {
  display: flex;
  text-decoration: none;
  color: #051634;
  border-radius: 24px;
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.th-card:hover {
  box-shadow: 0 4px 12px rgba(106, 33, 53, 0.08), 0 20px 48px rgba(5, 22, 52, 0.06);
  transform: translateY(-2px);
}

/* Backgrounds */
.th-card--white {
  background: #ffffff;
}

.th-card--beige {
  background: #F6EEE9;
}

.th-card--bordered {
  background: #ffffff;
  border: 1px solid #d2d2d2;
}

/* ── Horizontal card ──────────────────────────────────────── */
.th-card--horizontal {
  flex-direction: row;
  align-items: stretch;
  margin-bottom: 20px;
}

.th-card--h332 {
  height: 332px;
}

.th-card--h320 {
  height: 320px;
}

.th-card--horizontal .th-card-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 44px;
}

.th-card--horizontal .th-card-visual {
  width: 44%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* ── Visual backgrounds ───────────────────────────────────── */
.th-card-visual--beige {
  background: #f6eee9;
  border-radius: 16px;
}

.th-card-visual--beige-flat {
  background: #f6eee9;
}

/* ── Illustrations ─────────────────────────────────────────── */
.th-card-illustration {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ── Horizontal small (text-only pair cards) ─────────────── */
.th-card--horizontal-sm {
  flex-direction: column;
  border-radius: 24px;
}

.th-card--horizontal-sm .th-card-text {
  padding: 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* ── Vertical card ────────────────────────────────────────── */
.th-card--vertical {
  flex-direction: column;
  border-radius: 24px;
}

/* ── Card body — fixed height 194px ───────────────────────── */
.th-card-body {
  padding: 28px;
  display: flex;
  flex-direction: column;
}

.th-card-body--h194 {
  height: auto;
  flex-shrink: 0;
}

/* ── Card visual small (top area of vertical cards) ───────── */
.th-card-visual-sm {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 288px;
  flex-shrink: 0;
  overflow: hidden;
}

.th-card-visual-sm.th-card-visual--beige {
  background: #f6eee9;
  border-radius: 16px;
}

.th-card-visual-sm .th-card-illustration {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Per-card illustration scale overrides */
.th-card-illustration--scale-69 {
  transform: scale(0.69);
}

.th-card-illustration--scale-80 {
  transform: scale(0.80);
}

.th-card-illustration--scale-115 {
  transform: scale(1.15);
}

.th-card-illustration--scale-125 {
  transform: scale(1.25);
}

.th-card-illustration--scale-130 {
  transform: scale(1.30);
}

.th-section-label--white {
  background: #ffffff;
}

/* ── Card pair ────────────────────────────────────────────── */
.th-card-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.th-card-pair--h482 {
  height: auto;
}

.th-card-pair--h482 .th-card {
  height: auto;
}

.th-card-pair--h198 {
  height: 198px;
}

.th-card-pair--h198 .th-card {
  height: 198px;
}

/* ── Card elements ────────────────────────────────────────── */
.th-card-title {
  font-family: 'Reaktif', 'Montserrat', sans-serif;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  margin: 0 0 12px;
}

.th-card-desc {
  font-size: 16px;
  line-height: 24px;
  color: #697385;
  margin: 0;
  flex: 1;
}

.th-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 16px;
  font-weight: 600;
  color: #6A2135;
  transition: gap 0.2s ease;
}

.th-card:hover .th-card-cta {
  gap: 12px;
}

/* ══════════════════════════════════════════════════════════════
   Bento Grid — Finance & HR
   h440 total: tall card left (220 visual + 194 text + 26 flex),
   top-right 198, bottom-right 222, gap 20
   ══════════════════════════════════════════════════════════════ */
.th-bento-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
  margin-bottom: 20px;
}

.th-bento-grid--h440 {
  grid-template-rows: 1fr 1fr;
  height: 480px;
}

.th-bento-tall {
  grid-row: 1 / 3;
}

.th-bento-tall-visual {
  flex: 1;
  min-height: 0;
}

.th-bento-top-right,
.th-bento-bottom-right {
  grid-column: 2;
  min-height: 0;
}

.th-bento-top-right {
  grid-row: 1;
}

.th-bento-bottom-right {
  grid-row: 2;
}

/* ══════════════════════════════════════════════════════════════
   CTA — maroon bg, cream button
   ══════════════════════════════════════════════════════════════ */
.th-cta-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.th-cta-text {
  max-width: 700px;
}

.th-cta-title {
  font-family: 'Reaktif', 'Montserrat', sans-serif;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #ffffff;
}

.th-cta-desc {
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.th-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 48px;
  padding: 0 28px;
  background: #F6EEE9;
  color: #6A2135;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 600;
  border-radius: 16px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.th-cta-btn:hover {
  background: #ffffff;
}

.th-section--cta.th-section-light .th-cta-btn:hover {
  background: #9c3b56;
}

/* ══════════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 999px) {
  .th-hero-title {
    font-size: 40px;
    line-height: 48px;
  }

  .th-section-title {
    font-size: 28px;
    line-height: 36px;
  }

  .th-card--horizontal .th-card-text {
    padding: 32px;
  }

  .th-card--horizontal .th-card-visual {
    width: 40%;
  }

  .th-card--h332,
  .th-card--h320 {
    height: auto;
    min-height: 280px;
  }
}

@media (max-width: 768px) {
  .th-hero {
    padding: 90px 0 40px;
  }

  .th-hero-title {
    font-size: 36px;
    line-height: 44px;
  }

  .th-section {
    padding: 48px 0;
  }

  .th-section--dark,
  .th-section--light {
    padding: 24px !important;
  }

  .th-section--dark>.th-container,
  .th-section--light>.th-container {
    padding-left: 0;
    padding-right: 0;
  }

  .th-section--dark>.th-container> :last-child,
  .th-section--light>.th-container> :last-child {
    margin-bottom: 0;
  }

  .th-section-title {
    font-size: 24px;
    line-height: 32px;
  }

  .th-section-desc {
    margin-bottom: 28px;
  }

  .th-card--horizontal {
    flex-direction: column-reverse;
  }

  .th-card--h332,
  .th-card--h320 {
    height: auto;
  }

  .th-card--horizontal .th-card-visual {
    width: 100%;
    min-height: 200px;
  }

  .th-card--horizontal .th-card-text {
    padding: 28px;
  }

  .th-card-pair {
    grid-template-columns: 1fr;
  }

  .th-card-pair--h482,
  .th-card-pair--h198 {
    height: auto;
  }

  .th-card-pair--h482 .th-card,
  .th-card-pair--h198 .th-card {
    height: auto;
  }

  .th-card-body--h194 {
    height: auto;
  }

  .th-bento-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .th-bento-grid--h440 {
    height: auto;
    grid-template-rows: auto;
  }

  .th-bento-tall {
    grid-row: auto;
    height: auto;
  }

  .th-bento-tall-visual {
    height: 200px;
  }

  .th-bento-top-right,
  .th-bento-bottom-right {
    grid-column: 1;
    grid-row: auto;
    height: auto;
  }

  .th-card-title {
    font-size: 20px;
    line-height: 28px;
  }

  .th-cta-card {
    flex-direction: column;
    text-align: center;
  }

  .th-header-nav {
    gap: 16px;
  }

  .th-header-items {
    height: 56px;
  }
}

@media (max-width: 480px) {
  .th-hero-title {
    font-size: 28px;
    line-height: 36px;
  }

  .th-card--horizontal .th-card-text,
  .th-card--horizontal-sm .th-card-text {
    padding: 24px;
  }
}