/*
  TalentHub Intelligence — Custom CSS Layer
  Loaded after webbloom-base.css and style-components.css.
  Brand: THI Teal accent, THI Purple typographic core, white surface.
*/

/* ── THI BRAND PALETTE ── */
:root {
  /* Core */
  --th-teal: #69C0B1;
  --th-teal-deep: #4FA89A;
  --th-teal-darker: #3A8E81;
  --th-teal-soft: #A4D9CF;
  --th-teal-pale: #EAF5F2;

  --th-purple: #351F2F;
  --th-purple-deep: #220B1B;
  --th-purple-soft: #6A4F60;
  --th-purple-pale: #E9E4E7;

  --th-white: #FFFFFF;
  --th-off-white: #FBFAFA;

  /* Warm neutrals — used to lift sections without competing with brand colours */
  --th-cream: #FBF8F5;
  --th-cream-deep: #F5EFE7;
  --th-cream-warm: #FDF9F3;

  /* Aliases used throughout — purple takes the "dark" slot, teal the "accent" slot */
  --th-dark: var(--th-purple);
  --th-dark-deeper: var(--th-purple-deep);
  --th-navy: var(--th-purple);
  --th-navy-deep: var(--th-purple-deep);
  --th-navy-soft: var(--th-purple-soft);

  --th-surface: var(--th-white);
  --th-surface-2: var(--th-teal-pale);
  --th-border: #E2DDE0;
  --th-border-strong: #CFC6CC;
  --th-text: var(--th-purple);
  --th-text-muted: #5C4754;
  --th-text-soft: #8B7783;

  /* Section spacing */
  --th-section-pad: 7em;
  --th-section-pad-sm: 4.5em;

  /* Radius */
  --th-radius: 10px;
  --th-radius-lg: 14px;

  /* Shadows — tinted with brand purple */
  --th-shadow-sm: 0 1px 2px rgba(53, 31, 47, 0.06);
  --th-shadow-md: 0 2px 10px rgba(53, 31, 47, 0.09), 0 1px 2px rgba(53, 31, 47, 0.05);
  --th-shadow-lg: 0 18px 44px rgba(53, 31, 47, 0.14), 0 4px 12px rgba(53, 31, 47, 0.07);
}

/* ── TYPOGRAPHY ── */
body {
  font-family: var(--wb-font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--th-text);
  letter-spacing: 0;
  background: var(--th-white);
}

h1, .wb-h1 {
  font-family: var(--wb-font-heading);
  font-size: clamp(2.5rem, 6vw, 4.75rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: var(--th-purple);
}

h2, .wb-h2 {
  font-family: var(--wb-font-heading);
  font-size: clamp(1.875rem, 4vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: var(--th-purple);
}

h3, .wb-h3 {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--th-purple);
}

h4, .wb-h4 {
  font-family: 'Archivo', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--th-purple);
}

p { color: var(--th-text); }
a { color: var(--th-purple); text-decoration: none; }
a:hover { color: var(--th-teal-deep); }

.wb-subtitle,
.wb-lead {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: var(--th-text-muted);
  font-weight: 400;
  max-width: 42em;
  margin-left: auto;
  margin-right: auto;
}

.wb-lead {
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  color: var(--th-text-muted);
}

/* Divider — small teal accent */
.wb-divider {
  width: 56px;
  height: 3px;
  background: var(--th-teal);
  border: 0;
  border-radius: 2px;
  margin: 1.25em auto 1.5em;
  opacity: 1;
}

/* ── SECTION RHYTHM ── */
.wb-section {
  padding-top: var(--th-section-pad);
  padding-bottom: var(--th-section-pad);
}

.wb-section-sm {
  padding-top: var(--th-section-pad-sm);
  padding-bottom: var(--th-section-pad-sm);
}

.wb-section,
.wb-section.wb-white,
.wb-white {
  background: var(--th-white) !important;
}

.wb-section.wb-light,
.wb-light {
  background: var(--th-teal-pale) !important;
}

/* Warm cream — friendly light neutral used to lift sections that were previously
   dark. Sits between white and teal-pale in warmth, opposite the purple. */
.wb-section.wb-cream,
.wb-cream {
  background: linear-gradient(180deg, var(--th-cream) 0%, var(--th-cream-warm) 100%) !important;
}

.wb-section.wb-dark,
.wb-dark {
  background: var(--th-purple) !important;
  color: #fff;
}
.wb-section.wb-dark h1,
.wb-section.wb-dark h2,
.wb-section.wb-dark h3,
.wb-section.wb-dark h4,
.wb-section.wb-dark p,
.wb-section.wb-dark .wb-subtitle,
.wb-section.wb-dark .wb-lead,
.wb-section.wb-dark li { color: #fff !important; }
.wb-section.wb-dark .wb-divider { background: var(--th-teal); }

.wb-hero + .wb-section { padding-top: calc(var(--th-section-pad) - 1em); }

@media (max-width: 768px) {
  :root {
    --th-section-pad: 4.5em;
    --th-section-pad-sm: 3em;
  }
}

/* ── HERO — soft teal-tinted wash ── */
.wb-hero {
  min-height: 78vh;
  background: var(--th-white) !important;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6em 1.5em;
  border-bottom: 1px solid var(--th-border);
}
.wb-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 20% 30%, rgba(105, 192, 177, 0.18), transparent 60%),
    radial-gradient(ellipse 60% 55% at 85% 70%, rgba(53, 31, 47, 0.06), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.wb-hero > * { position: relative; z-index: 1; }

.wb-hero h1,
.wb-hero .hero-title,
.wb-hero .wb-h1 {
  color: var(--th-purple) !important;
}
.wb-hero .hero-subtitle,
.wb-hero p,
.wb-hero .wb-subtitle {
  color: var(--th-text-muted);
  font-size: clamp(1.0625rem, 1.8vw, 1.375rem);
  line-height: 1.55;
  max-width: 40em;
  margin-left: auto;
  margin-right: auto;
}

.wb-hero-sm {
  min-height: 48vh;
  padding: 7em 1.5em 4em;
}

/* ── THI HERO — brochure cover-style purple with faded mark behind ── */
.wb-hero.th-hero {
  background: var(--th-purple) !important;
  border-bottom: none;
  min-height: 82vh;
  padding: 5em 1.5em 4em;
}
.wb-hero.th-hero::before {
  background:
    radial-gradient(ellipse 70% 60% at 80% 70%, rgba(105, 192, 177, 0.10), transparent 65%),
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(105, 192, 177, 0.04), transparent 60%);
}
.wb-hero.th-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/images/brand/thi-icon-reverse.svg");
  background-repeat: no-repeat;
  background-position: center 18%;
  background-size: auto 95%;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
.wb-hero.th-hero > * { position: relative; z-index: 1; }

.wb-hero.th-hero .wb-inner {
  text-align: left !important;
  max-width: 1100px;
}
.wb-hero.th-hero .th-hero-title {
  color: #fff !important;
  font-family: var(--wb-font-heading);
  font-size: clamp(2.5rem, 6vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: none;
  text-align: left;
  max-width: 14em;
  margin: 0 0 0.6em;
  font-weight: 400;
}
.wb-hero.th-hero .th-hero-title .th-accent { color: var(--th-teal); }

.wb-hero.th-hero .th-hero-subtitle,
.wb-hero.th-hero p {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: clamp(1rem, 1.4vw, 1.1875rem);
  font-weight: 400;
  text-align: left;
  max-width: 50em;
  margin: 0.5em 0 0;
  line-height: 1.5;
}
.wb-hero.th-hero .th-hero-subtitle strong { color: #fff; font-weight: 700; }
.wb-hero.th-hero .th-hero-subtitle .th-accent { color: var(--th-teal); font-weight: 700; }

.wb-hero.th-hero .wb-btn-group { justify-content: flex-start !important; }
.wb-hero.th-hero .th-hero-secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
.wb-hero.th-hero .th-hero-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--th-teal);
  color: var(--th-teal);
}
.wb-hero.th-hero .wb-btn-primary {
  background: var(--th-teal);
  color: var(--th-purple);
  border: 1.5px solid var(--th-teal);
}
.wb-hero.th-hero .wb-btn-primary:hover {
  background: #fff;
  color: var(--th-purple);
  border-color: #fff;
}

@media (max-width: 700px) {
  .wb-hero.th-hero { min-height: 70vh; padding: 4em 1.25em 3em; }
  .wb-hero.th-hero .th-hero-title { font-size: clamp(2rem, 9vw, 3rem); }
  .wb-hero.th-hero::after { background-position: right -20% center; background-size: auto 80%; }
}

/* ── BUTTONS ── */
.wb-btn {
  font-family: var(--wb-font-body);
  font-weight: 600;
  letter-spacing: 0;
  border-radius: var(--th-radius);
  padding: 0.85em 1.5em;
  font-size: 0.9375rem;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease, color 0.15s ease;
  box-shadow: var(--th-shadow-sm);
}

/* Primary — THI Purple */
.wb-btn-primary {
  background: var(--th-purple);
  color: #fff;
  border: 1.5px solid var(--th-purple);
}
.wb-btn-primary:hover {
  background: var(--th-purple-deep);
  color: #fff;
  border-color: var(--th-purple-deep);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(53, 31, 47, 0.25);
}

/* Secondary — THI Teal */
.wb-btn-secondary {
  background: var(--th-teal);
  color: var(--th-purple);
  border: 1.5px solid var(--th-teal);
}
.wb-btn-secondary:hover {
  background: var(--th-teal-deep);
  color: var(--th-purple);
  border-color: var(--th-teal-deep);
  transform: translateY(-1px);
}

.wb-btn-outline {
  background: transparent;
  color: var(--th-purple);
  border: 1.5px solid var(--th-purple);
  box-shadow: none;
}
.wb-btn-outline:hover {
  background: var(--th-purple);
  color: #fff;
  border-color: var(--th-purple);
}

.wb-btn-white {
  background: #fff;
  color: var(--th-purple);
  border: 1.5px solid #fff;
}
.wb-btn-white:hover {
  background: var(--th-teal);
  color: var(--th-purple);
  border-color: var(--th-teal);
}

.wb-btn-lg { padding: 1em 1.75em; font-size: 1rem; }
.wb-btn-sm { padding: 0.6em 1.1em; font-size: 0.875rem; }

/* ── HEADER ── */
.wb-header {
  background: #fff;
  border-bottom: 1px solid var(--th-border);
  box-shadow: none;
}
/* Legacy single-img logo — superseded by .th-brand */
.wb-header-logo img:not(.th-brand-mark) {
  height: 44px;
  width: auto;
  border-radius: 6px;
  display: block;
}
.wb-header-brand { display: none; }

/* ── BRAND LOCKUP (icon + wordmark) ──
   Used in header (dark on light) and footer (teal on dark).
   Mark is SVG, wordmark is real text so it inherits webfonts. */
.th-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  text-decoration: none;
  line-height: 1;
}
.th-brand-mark {
  height: 44px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.th-brand-wordmark {
  display: inline-flex;
  flex-direction: column;
  gap: 0.12em;
  line-height: 1;
}
.th-brand-name {
  font-family: var(--wb-font-heading);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--th-purple);
  text-transform: lowercase; /* wordmark is intentionally lowercase per brand spec */
  line-height: 1;
}
.th-brand-suffix {
  font-family: var(--wb-font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--th-purple-soft);
  line-height: 1;
}
/* Footer variant: light on dark */
.th-brand-footer .th-brand-name { color: #fff; }
.th-brand-footer .th-brand-suffix { color: rgba(255, 255, 255, 0.55); }
.th-brand-footer .th-brand-mark { height: 40px; }

@media (max-width: 480px) {
  .th-brand-mark { height: 38px; }
  .th-brand-name { font-size: 1.25rem; }
  .th-brand-suffix { font-size: 0.625rem; letter-spacing: 0.2em; }
}
.wb-header-nav a {
  color: var(--th-purple);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0;
}
.wb-header-nav a:hover,
.wb-header-nav a.active {
  color: var(--th-teal-deep);
}
.wb-header-nav .nav-cta {
  background: var(--th-purple) !important;
  color: #fff !important;
  border: 1.5px solid var(--th-purple);
}
.wb-header-nav .nav-cta:hover {
  background: var(--th-teal) !important;
  color: var(--th-purple) !important;
  border-color: var(--th-teal);
}

/* ── CARDS ── */
.wb-card {
  background: #fff;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  padding: 2em;
  box-shadow: var(--th-shadow-sm);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.wb-card:hover {
  border-color: var(--th-teal);
  transform: translateY(-2px);
  box-shadow: var(--th-shadow-md);
}

.wb-card h3 {
  font-size: 1.1875rem;
  margin-bottom: 0.5em;
  color: var(--th-teal-deep);
}
.wb-card p {
  color: var(--th-text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0;
}

.wb-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--th-teal-pale);
  color: var(--th-purple);
  font-size: 1.25rem;
  margin-bottom: 1.25em;
  border: 1px solid var(--th-teal-soft);
}

/* ── FEATURE ROWS ── */
.wb-feature-row {
  gap: 4em;
  align-items: center;
  padding: 3em 0;
}
.wb-feature-image img {
  border-radius: var(--th-radius-lg);
  box-shadow: var(--th-shadow-lg);
}
.wb-feature-text h3 {
  margin-bottom: 0.5em;
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  letter-spacing: -0.02em;
}
.wb-feature-text p {
  color: var(--th-text-muted);
  font-size: 1.0625rem;
  line-height: 1.65;
}

@media (max-width: 768px) {
  .wb-feature-row { gap: 2em; padding: 1.5em 0; }
}

/* ── STATEMENT SECTION — purple ── */
.statement-section {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: none !important;
  background-color: var(--th-purple) !important;
  position: relative;
  padding: 5em 1.5em;
}
.statement-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 30% 40%, rgba(105, 192, 177, 0.18), transparent 70%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(105, 192, 177, 0.10), transparent 70%);
}
.statement-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 900px;
  color: #fff;
}
.statement-text {
  font-family: var(--wb-font-heading);
  font-size: clamp(1.75rem, 4.5vw, 3.25rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: #fff;
}
.statement-text em {
  font-style: normal;
  color: var(--th-teal);
  -webkit-text-fill-color: var(--th-teal);
}
.statement-sub {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

/* ── CTA BLOCK — purple with teal accents ── */
.cta-block {
  background: var(--th-purple) !important;
  position: relative;
  overflow: hidden;
  padding: 5em 2em;
  text-align: center;
  /* Constrain to the same page width as the other content cards, and
     round the corners so it doesn't look like a full-bleed sheet. */
  max-width: 1100px;
  margin: 4em auto 4em;
  border-radius: 18px;
  border: 1px solid rgba(105, 192, 177, 0.18);
  box-shadow: 0 20px 50px rgba(53, 31, 47, 0.25);
}
@media (max-width: 700px) {
  .cta-block { margin: 2.5em 1em; padding: 3.5em 1.5em; border-radius: 14px; }
}
.cta-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(105, 192, 177, 0.22), transparent 70%);
  pointer-events: none;
}
.cta-block::after { display: none; }
.cta-inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
.cta-title {
  color: #fff !important;
  font-family: var(--wb-font-heading);
  font-size: clamp(1.875rem, 4vw, 3rem);
  margin-bottom: 0.5em;
  letter-spacing: -0.02em;
  font-weight: 400;
  line-height: 1.05;
}
.cta-text {
  color: rgba(255, 255, 255, 0.82) !important;
  margin-bottom: 2em;
  font-size: clamp(1rem, 1.4vw, 1.0625rem);
  line-height: 1.65;
}
.cta-action { margin-top: 1em; position: relative; z-index: 3; }
.cta-action .cta-primary-btn,
.cta-action a.wb-btn-primary {
  background: var(--th-teal);
  color: var(--th-purple);
  border: 1.5px solid var(--th-teal);
  padding: 1em 2em;
  font-size: 1rem;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
.cta-action .cta-primary-btn:hover,
.cta-action a.wb-btn-primary:hover {
  background: #fff;
  color: var(--th-purple);
  border-color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}

/* ── DUAL-AUDIENCE TOGGLE ── */
.th-audience-toggle {
  display: inline-flex;
  background: var(--th-teal-pale);
  border: 1px solid var(--th-teal-soft);
  border-radius: 999px;
  padding: 4px;
  margin: 0 auto 2em;
  gap: 2px;
}
.th-audience-toggle button {
  background: transparent;
  border: 0;
  padding: 0.55em 1.4em;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--th-text-muted);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.th-audience-toggle button:hover { color: var(--th-purple); }
.th-audience-toggle button.is-active {
  background: #fff;
  color: var(--th-purple);
  box-shadow: var(--th-shadow-sm);
  font-weight: 600;
}

.th-audience-panel { display: none; }
.th-audience-panel.is-active {
  display: block;
  animation: thFadeIn 0.25s ease;
}
@keyframes thFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── AUDIENCE BAND (2 or 3 columns) ── */
.th-audience-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75em;
  max-width: 880px;
  margin: 0 auto;
}
.th-audience-band--3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1100px;
}
/* Numbered audience badge (brochure pages 8): teal circle with white number */
.th-audience-card .th-audience-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--th-teal);
  color: #fff;
  font-family: var(--wb-font-heading);
  font-size: 1.125rem;
  font-weight: 400;
  margin-bottom: 1em;
  line-height: 1;
}
.th-audience-card {
  padding: 2em;
  background: #fff;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  box-shadow: var(--th-shadow-sm);
}
.th-audience-card .th-audience-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--th-purple);
  background: var(--th-teal);
  padding: 0.3em 0.8em;
  border-radius: 999px;
  margin-bottom: 1em;
}
.th-audience-card h3 {
  font-size: 1.375rem;
  margin-bottom: 0.5em;
  color: var(--th-teal-deep);
}
.th-audience-card p {
  color: var(--th-text-muted);
  font-size: 1.0625rem;
  margin: 0;
}
.th-audience-card p + p { margin-top: 0.75em; }
/* Dark-section variant — re-skins the audience cards to match the glass / dark
   card family used elsewhere on the page (pillar cards, delivers cards, problem
   cards). Soft teal-tinted glass on dark purple, teal border, dot-grid texture,
   hover lift. */
.wb-section.wb-dark .th-audience-card {
  background: linear-gradient(155deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.015) 100%);
  border: 1px solid rgba(105, 192, 177, 0.22);
  border-radius: 18px;
  box-shadow: none;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 0.3s ease,
              box-shadow 0.3s ease,
              background 0.3s ease;
}
.wb-section.wb-dark .th-audience-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(105,192,177,0.25) 1px, transparent 1.3px);
  background-size: 16px 16px;
  opacity: 0.10;
  mask-image: linear-gradient(160deg, #000 20%, transparent 90%);
  -webkit-mask-image: linear-gradient(160deg, #000 20%, transparent 90%);
  pointer-events: none;
  z-index: 0;
}
.wb-section.wb-dark .th-audience-card:hover {
  transform: translateY(-4px);
  border-color: rgba(105, 192, 177, 0.55);
  background: linear-gradient(155deg, rgba(255,255,255,0.075) 0%, rgba(105,192,177,0.05) 100%);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28),
              inset 0 0 24px rgba(105, 192, 177, 0.06);
}
.wb-section.wb-dark .th-audience-card .th-audience-num {
  position: relative;
  z-index: 1;
  background: rgba(105, 192, 177, 0.18);
  border: 1px solid rgba(105, 192, 177, 0.45);
  color: var(--th-teal);
}
.wb-section.wb-dark .th-audience-card:hover .th-audience-num {
  background: rgba(105, 192, 177, 0.28);
  border-color: rgba(105, 192, 177, 0.7);
}
.wb-section.wb-dark .th-audience-card h3 {
  position: relative;
  z-index: 1;
  color: #fff !important;
}
.wb-section.wb-dark .th-audience-card p {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.78) !important;
}
@media (max-width: 900px) {
  .th-audience-band--3 { grid-template-columns: 1fr; gap: 1em; max-width: 540px; }
}
@media (max-width: 768px) {
  .th-audience-band { grid-template-columns: 1fr; gap: 1em; }
}

/* ── CALLOUT BOX ── brochure's rounded purple "in summary" tile.
   Usage: <div class="th-callout"><span class="th-callout-label">In summary</span>
            <p class="th-callout-body">One platform. <strong>Your brand throughout.</strong></p>
          </div> */
.th-callout {
  background: var(--th-purple);
  color: #fff;
  border-radius: var(--th-radius-lg);
  padding: 2.25em 2.5em;
  max-width: 1100px;
  margin: 2.75em auto 0;
  text-align: left;
}
.th-callout-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--th-teal);
  margin-bottom: 0.75em;
}
.th-callout-body {
  font-family: var(--wb-font-heading);
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 0;
  letter-spacing: -0.01em;
}
.th-callout-body strong {
  color: var(--th-teal);
  font-weight: inherit;
}

/* Variant: teal callout (the "THI changes that" block in brochure pg 3) */
.th-callout--teal {
  background: var(--th-teal);
  color: var(--th-purple);
}
.th-callout--teal .th-callout-label { color: var(--th-purple); }
.th-callout--teal .th-callout-body { color: var(--th-purple); text-transform: none; font-size: 1.125rem; font-family: var(--wb-font-body); font-weight: 600; line-height: 1.45; }

/* Variant: statement callout — single big sentence, no label.
   Used as a section closer ("Your brand. Throughout."). */
.th-callout--statement {
  text-align: center;
  padding: 2.75em 2em;
  background:
    radial-gradient(circle at 0% 0%, rgba(105,192,177,0.25), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(105,192,177,0.12), transparent 60%),
    linear-gradient(160deg, #3F2538 0%, var(--th-purple) 60%, var(--th-purple-deep) 100%);
  position: relative;
  overflow: hidden;
}
.th-callout--statement::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(105,192,177,0.25) 1px, transparent 1.4px);
  background-size: 18px 18px;
  opacity: 0.22;
  mask-image: linear-gradient(150deg, #000 20%, transparent 90%);
  -webkit-mask-image: linear-gradient(150deg, #000 20%, transparent 90%);
  pointer-events: none;
}
.th-callout--statement .th-callout-body {
  font-family: var(--wb-font-heading);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #fff;
  position: relative;
  z-index: 1;
}
.th-callout--statement .th-callout-body span { color: var(--th-teal); }

/* ── PLATFORM PILLARS LIST ── brochure pg 2 numbered list.
   Usage: <ol class="th-pillars">
            <li><span class="th-pillars-n">01</span>
                <strong>A branded public website</strong> — Your name, your logo, your colours.</li>
          </ol> */
.th-pillars {
  list-style: none;
  margin: 2em auto 0;
  padding: 0;
  max-width: 720px;
  text-align: left;
}
.th-pillars > li {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: baseline;
  gap: 1em;
  padding: 1em 0;
  border-top: 1px solid var(--th-border);
  font-size: 1rem;
  color: var(--th-text-muted);
  line-height: 1.55;
}
.th-pillars > li:last-child {
  border-bottom: 1px solid var(--th-border);
}
.th-pillars-n {
  font-family: var(--wb-font-heading);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--th-teal);
  letter-spacing: 0.05em;
}
.th-pillars strong {
  color: var(--th-purple);
  font-weight: 700;
}

/* ── PILLAR CARDS ── dark techy cards echoing the brochure cover.
   Deep-purple panel, teal dot-grid texture, diagonal corner cut that
   nods to the THI mark's geometry, glowing teal icon, animated edge.
   Usage: <div class="th-pillar-cards">
            <div class="th-pillar-card">
              <h3>Title</h3>
              <p>Body.</p>
              <i class="th-pillar-icon fa-solid fa-globe"></i>
            </div> … </div> */
.th-pillar-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25em;
  max-width: 1100px;
  margin: 2.75em auto 0;
  text-align: left;
}
.th-pillar-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 240px;
  padding: 1.75em 1.6em 1.75em;
  color: #fff;
  /* Diagonal chamfer top-right + bottom-left — echoes the logo's cuts */
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  background:
    radial-gradient(circle at 100% 0%, rgba(105,192,177,0.22), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(105,192,177,0.10), transparent 50%),
    linear-gradient(155deg, #3F2538 0%, var(--th-purple) 55%, var(--th-purple-deep) 100%);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.3s ease;
  isolation: isolate;
}
/* Dot-grid texture — the "techy" surface */
.th-pillar-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(105,192,177,0.30) 1px, transparent 1.4px);
  background-size: 14px 14px;
  background-position: 0 0;
  opacity: 0.35;
  mask-image: linear-gradient(150deg, #000 30%, transparent 90%);
  -webkit-mask-image: linear-gradient(150deg, #000 30%, transparent 90%);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.3s ease;
}
/* Glowing scan line along the bottom edge — animated on hover */
.th-pillar-card::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--th-teal) 50%,
    transparent 100%);
  box-shadow: 0 0 12px rgba(105,192,177,0.6);
  transform: scaleX(0.35);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 1;
}
.th-pillar-card:hover {
  transform: translateY(-5px);
  filter: drop-shadow(0 12px 20px rgba(53, 31, 47, 0.35));
}
.th-pillar-card:hover::before { opacity: 0.55; }
.th-pillar-card:hover::after { transform: scaleX(1); }

/* Monospace "code comment" tag at the top — gives each card a tech identity */
.th-pillar-tag {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--th-teal);
  margin: 0 0 1em;
  text-transform: uppercase;
  opacity: 0.85;
}
.th-pillar-tag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--th-teal);
  box-shadow: 0 0 8px rgba(105,192,177,0.7);
  animation: th-pulse 2.4s ease-in-out infinite;
}
@keyframes th-pulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.18); }
}

.th-pillar-card h3 {
  position: relative;
  z-index: 1;
  font-family: var(--wb-font-heading);
  font-size: clamp(1.375rem, 2.1vw, 1.625rem);
  font-weight: 400;
  margin: 0 0 0.6em;
  padding-bottom: 0.65em;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--th-teal);
}
/* Animated teal accent line under the title */
.th-pillar-card h3::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 32px;
  height: 2px;
  background: var(--th-teal);
  box-shadow: 0 0 8px rgba(105,192,177,0.6);
  transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.th-pillar-card:hover h3::after { width: 72px; }

.th-pillar-card p {
  position: relative;
  z-index: 1;
  font-size: 1.0625rem;
  color: rgba(255,255,255,0.72);
  margin: 0;
  line-height: 1.55;
  flex: 1 1 auto;
}

/* Big glowing icon anchored bottom-right — the techy signature element.
   Stays in natural flow (align-self pushes right) so it can't collide
   with long descriptions. */
.th-pillar-icon {
  align-self: flex-end;
  margin-top: 1.5em;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 1.5rem;
  color: var(--th-teal);
  background: rgba(105,192,177,0.10);
  border: 1px solid rgba(105,192,177,0.32);
  position: relative;
  z-index: 2;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
              background-color 0.3s ease,
              border-color 0.3s ease,
              color 0.25s ease,
              box-shadow 0.3s ease;
  box-shadow:
    inset 0 0 12px rgba(105,192,177,0.18),
    0 0 18px rgba(105,192,177,0.25);
}
.th-pillar-card:hover .th-pillar-icon {
  transform: translateY(-2px) rotate(-4deg);
  background: var(--th-teal);
  border-color: var(--th-teal);
  color: var(--th-purple);
  box-shadow:
    0 0 0 4px rgba(105,192,177,0.18),
    0 8px 24px rgba(105,192,177,0.35);
}

@media (max-width: 900px) {
  .th-pillar-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 580px) {
  .th-pillar-cards { grid-template-columns: 1fr; gap: 0.85em; }
  .th-pillar-card { min-height: 200px; padding: 1.4em 1.25em 1.4em; }
  .th-pillar-icon { width: 48px; height: 48px; font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .th-pillar-card,
  .th-pillar-card::after,
  .th-pillar-card::before,
  .th-pillar-icon { transition: none; }
}

/* ── DATA / GDPR BLOCK ── brochure pg 8 — teal banner + dark panel with 4 sub-points */
.th-data-block {
  max-width: 1000px;
  margin: 0 auto;
  border-radius: var(--th-radius-lg);
  overflow: hidden;
  box-shadow: var(--th-shadow-md);
}
.th-data-banner {
  background: var(--th-teal);
  color: var(--th-purple);
  text-align: center;
  padding: 0.95em 1.5em;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.th-data-panel {
  background: var(--th-purple);
  color: #fff;
  padding: 2.5em 2.5em 2.25em;
}
.th-data-panel .th-eyebrow { color: var(--th-teal); margin-bottom: 0.5em; }
.th-data-panel h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: #fff;
  margin: 0 0 1.5em;
  line-height: 1.1;
}
.th-data-panel h3 span { color: var(--th-teal); }
.th-data-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5em 2.5em;
}
.th-data-grid > div strong {
  display: block;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.25em;
  font-size: 1rem;
}
.th-data-grid > div p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9375rem;
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 700px) {
  .th-data-panel { padding: 2em 1.5em 1.75em; }
  .th-data-grid { grid-template-columns: 1fr; gap: 1.25em; }
}
/* Feature modifier — elevates the data block to feel like its own section.
   Light treatment so it doesn't visually compete with the dark CTA below it.
   Teal banner up top, soft tinted panel with dark text, deep shadow for lift. */
.th-data-block--feature {
  max-width: 1100px;
  border-radius: 22px;
  border: 1px solid var(--th-teal-soft, rgba(105,192,177,0.35));
  box-shadow:
    0 28px 60px rgba(53, 31, 47, 0.12),
    0 10px 24px rgba(53, 31, 47, 0.06);
}
.th-data-block--feature .th-data-banner {
  padding: 1.65em 2em;
  font-size: 1.25rem;
  letter-spacing: 0.18em;
  line-height: 1.3;
}
@media (max-width: 700px) {
  .th-data-block--feature .th-data-banner {
    padding: 1.35em 1.25em;
    font-size: 1rem;
    letter-spacing: 0.14em;
  }
}
.th-data-block--feature .th-data-panel {
  background: #fff;
  color: var(--th-purple);
  padding: 3.5em 3em 3em;
  position: relative;
}
.th-data-block--feature .th-data-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--th-teal) 0%, transparent 100%);
}
.th-data-block--feature .th-data-panel .th-eyebrow {
  color: var(--th-teal-deep);
  font-size: 1rem;
  letter-spacing: 0.18em;
  margin-bottom: 0.9em;
}
.th-data-block--feature .th-data-panel h3 {
  color: var(--th-purple);
  font-size: clamp(2rem, 4vw, 2.75rem);
  margin-bottom: 1.5em;
}
.th-data-block--feature .th-data-panel h3 span:first-child { color: var(--th-purple); }
.th-data-block--feature .th-data-panel h3 span + span { color: var(--th-teal-deep); }
.th-data-block--feature .th-data-grid { gap: 1.5em; }
.th-data-block--feature .th-data-grid > div {
  position: relative;
  padding: 1.6em 1.5em 1.4em;
  border-radius: 14px;
  background: var(--th-teal-pale);
  border: 1px solid rgba(105, 192, 177, 0.22);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  overflow: hidden;
}
.th-data-block--feature .th-data-grid > div::after {
  content: "";
  position: absolute;
  top: -25%;
  right: -25%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, rgba(105,192,177,0.25) 0%, transparent 65%);
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.th-data-block--feature .th-data-grid > div:hover {
  transform: translateY(-3px);
  border-color: var(--th-teal);
  box-shadow: 0 14px 28px rgba(53, 31, 47, 0.08);
}
.th-data-block--feature .th-data-grid > div:hover::after { opacity: 0.9; }
.th-data-block--feature .th-data-item-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  color: var(--th-teal-deep);
  font-size: 1.125rem;
  margin-bottom: 0.95em;
  box-shadow: 0 2px 8px rgba(53, 31, 47, 0.08);
}
.th-data-block--feature .th-data-grid > div strong {
  position: relative;
  z-index: 1;
  color: var(--th-purple);
  font-size: 1.0625rem;
  display: block;
  margin-bottom: 0.35em;
}
.th-data-block--feature .th-data-grid > div p {
  position: relative;
  z-index: 1;
  color: var(--th-text-muted);
  font-size: 1.0625rem;
}
@media (max-width: 700px) {
  .th-data-block--feature .th-data-panel { padding: 2.5em 1.75em 2em; }
  .th-data-block--feature .th-data-grid > div { padding: 1.4em 1.25em 1.2em; }
}

/* ── FEATURE GROUP TABLE ── brochure pg 6-7 — banner + 2-col bullet grid */
.th-feature-group {
  margin: 1.5em 0 2.5em;
}
.th-feature-group-banner {
  background: var(--th-purple);
  color: #fff;
  text-align: center;
  padding: 0.85em 1em;
  font-weight: 700;
  font-family: var(--wb-font-heading);
  font-size: 1.0625rem;
  letter-spacing: 0;
  border-radius: var(--th-radius);
  margin-bottom: 1.25em;
}
.th-feature-group-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25em 2.5em;
  padding: 0 0.5em;
}
.th-feature-group-items > div {
  position: relative;
  padding-left: 1.5em;
}
.th-feature-group-items > div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--th-teal);
}
.th-feature-group-items strong {
  display: block;
  color: var(--th-purple);
  font-weight: 700;
  font-size: 0.9375rem;
  margin-bottom: 0.15em;
  line-height: 1.3;
}
.th-feature-group-items p {
  color: var(--th-text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 700px) {
  .th-feature-group-items { grid-template-columns: 1fr; }
}

/* ── PRODUCT FRAME ── */
.th-product-frame {
  border-radius: var(--th-radius-lg);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--th-border);
  box-shadow: var(--th-shadow-lg);
  position: relative;
}
.th-product-frame::before {
  content: "";
  display: block;
  height: 28px;
  background: linear-gradient(180deg, #F9FAFB, #F3F4F6);
  border-bottom: 1px solid var(--th-border);
  background-image:
    radial-gradient(circle at 14px 14px, #FF5F57 0 5px, transparent 6px),
    radial-gradient(circle at 32px 14px, #FEBC2E 0 5px, transparent 6px),
    radial-gradient(circle at 50px 14px, #28C840 0 5px, transparent 6px),
    linear-gradient(180deg, #F9FAFB, #F3F4F6);
  background-repeat: no-repeat;
}
.th-product-frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── FORMS ── */
.wb-form .form-group { margin-bottom: 1.25em; }
.wb-form label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--th-purple);
  margin-bottom: 0.4em;
  letter-spacing: 0;
}
.wb-form input,
.wb-form textarea,
.wb-form select {
  width: 100%;
  font-family: inherit;
  font-size: 0.9375rem;
  padding: 0.75em 1em;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius);
  background: #fff;
  color: var(--th-purple);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wb-form input:focus,
.wb-form textarea:focus,
.wb-form select:focus {
  outline: none;
  border-color: var(--th-teal);
  box-shadow: 0 0 0 3px rgba(105, 192, 177, 0.25);
}
.wb-form-honeypot { position: absolute; left: -9999px; }

/* ── NARROW CONTAINER ── */
.wb-narrow { max-width: 760px; margin: 0 auto; }
.wb-narrow p { font-size: 1.0625rem; color: var(--th-text-muted); line-height: 1.75; }

/* ── BLOG CARDS ── */
.blog-card {
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  background: #fff;
}
.blog-card:hover {
  border-color: var(--th-teal);
  transform: translateY(-2px);
  box-shadow: var(--th-shadow-md);
}

/* ── FOOTER — purple ── */
.wb-footer {
  background: var(--th-purple);
  color: #fff;
  padding: 4em 0 2.5em;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.wb-footer h4 { color: #fff; }
.wb-footer p { color: rgba(255, 255, 255, 0.7); }
.wb-footer a { color: rgba(255, 255, 255, 0.7); }
.wb-footer a:hover { color: var(--th-teal); }
.wb-footer-logo img:not(.th-brand-mark) {
  height: 50px;
  width: auto;
  border-radius: 6px;
}
.wb-footer-brand { display: none; }
.wb-footer-description {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9375rem;
  max-width: 26em;
}
.wb-copyright {
  background: var(--th-purple-deep);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
  padding: 1.2em 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.wb-copyright a { color: rgba(255, 255, 255, 0.65); }
.wb-copyright a:hover { color: var(--th-teal); }

/* ── SCROLL REVEAL ── */
.wb-fade-in,
.wb-slide-up {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
.wb-fade-in.wb-visible,
.wb-slide-up.wb-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── UTILITIES ── */
.th-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--th-teal-deep);
  background: transparent;
  padding: 0;
  margin-bottom: 1em;
}
/* Numbered eyebrow — "01 — INTRODUCTION" pattern from the brochure.
   Usage: <span class="th-eyebrow th-eyebrow-num" data-n="01">Introduction</span> */
.th-eyebrow-num::before {
  content: attr(data-n) " — ";
  color: var(--th-teal);
  font-weight: 700;
  letter-spacing: 0.08em;
}
/* Prominent section-label eyebrow — bigger, bolder, used above the H2 of a section. */
.th-eyebrow--lead {
  font-size: 1.125rem;
  letter-spacing: 0.18em;
  color: var(--th-teal-deep);
  margin-bottom: 1.25em;
}
.wb-dark .th-eyebrow--lead { color: var(--th-teal); }
@media (max-width: 640px) {
  .th-eyebrow--lead { font-size: 1rem; letter-spacing: 0.14em; }
}

/* INTRO GRID — modern 2x2 numbered cards used to break up a long intro body
   into scannable panels. Used in the "What is Talent Hub Intelligence?" section. */
.th-intro-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5em;
  max-width: 1040px;
  margin: 2.5em auto 1em;
  text-align: left;
}
.th-intro-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(53, 31, 47, 0.08);
  border-radius: 16px;
  padding: 2em 1.9em 1.85em;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(53, 31, 47, 0.05);
}
.th-intro-card::after {
  content: "";
  position: absolute;
  top: -30%;
  right: -30%;
  width: 70%;
  height: 70%;
  background: radial-gradient(circle, var(--th-teal-pale) 0%, transparent 65%);
  opacity: 0.6;
  pointer-events: none;
}
.th-intro-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(53, 31, 47, 0.10);
  border-color: var(--th-teal-soft);
}
.th-intro-card-num {
  display: block;
  font-family: var(--wb-font-heading);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--th-teal);
  margin-bottom: 0.7em;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
}
.th-intro-card p {
  font-family: var(--wb-font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--th-purple);
  margin: 0;
  position: relative;
  z-index: 1;
}
@media (max-width: 720px) {
  .th-intro-grid { grid-template-columns: 1fr; gap: 1em; max-width: 100%; margin: 1.75em auto 0.5em; }
  .th-intro-card { padding: 1.6em 1.4em 1.4em; }
  .th-intro-card-num { font-size: 1.875rem; margin-bottom: 0.5em; }
}

/* Bare variant — strips card chrome for an editorial / step-list feel.
   Use above another card-grid section to avoid stacking two card walls. */
.th-intro-grid--bare { gap: 2.5em 3em; max-width: 980px; }
.th-intro-grid--bare .th-intro-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.th-intro-grid--bare .th-intro-card::after { display: none; }
.th-intro-grid--bare .th-intro-card:hover {
  transform: none;
  box-shadow: none;
  border-color: transparent;
}
.th-intro-grid--bare .th-intro-card-num {
  font-size: 2.75rem;
  margin-bottom: 0.55em;
  position: relative;
  padding-bottom: 0.4em;
}
.th-intro-grid--bare .th-intro-card-num::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 36px;
  height: 2px;
  background: var(--th-teal);
  border-radius: 2px;
}
.th-intro-grid--bare .th-intro-card p {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--th-text-muted);
}
@media (max-width: 720px) {
  .th-intro-grid--bare { gap: 1.75em; }
  .th-intro-grid--bare .th-intro-card-num { font-size: 2.25rem; }
}

/* DELIVERS GRID — 3-col × 2-row glass-card layout for the dark "What this
   delivers" section. Each card has an icon badge, a large ghosted watermark
   numeral in the corner (via data-num attribute), and a strong hover lift. */
.th-delivers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4em;
  max-width: 1100px;
  margin: 2.5em auto 0;
  text-align: left;
}
.th-delivers-item {
  position: relative;
  background: linear-gradient(155deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.015) 100%);
  border: 1px solid rgba(105, 192, 177, 0.18);
  border-radius: 18px;
  padding: 1.75em 1.6em 1.55em;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 0.3s ease,
              box-shadow 0.3s ease,
              background 0.3s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* Decorative ghosted watermark numeral from the data-num attribute */
.th-delivers-item::before {
  content: attr(data-num);
  position: absolute;
  top: -0.12em;
  right: 0.1em;
  font-family: var(--wb-font-heading);
  font-size: 5.25rem;
  line-height: 1;
  color: var(--th-teal);
  opacity: 0.07;
  pointer-events: none;
  letter-spacing: -0.04em;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 0;
}
/* Subtle teal dot-grid texture, matching the pillar-card DNA */
.th-delivers-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(105,192,177,0.25) 1px, transparent 1.3px);
  background-size: 16px 16px;
  opacity: 0.10;
  mask-image: linear-gradient(160deg, #000 20%, transparent 90%);
  -webkit-mask-image: linear-gradient(160deg, #000 20%, transparent 90%);
  pointer-events: none;
  z-index: 0;
}
.th-delivers-item:hover {
  transform: translateY(-4px);
  border-color: rgba(105, 192, 177, 0.55);
  background: linear-gradient(155deg, rgba(255,255,255,0.075) 0%, rgba(105,192,177,0.05) 100%);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28),
              inset 0 0 24px rgba(105, 192, 177, 0.06);
}
.th-delivers-item:hover::before {
  opacity: 0.13;
  transform: translateX(-3px);
}
.th-delivers-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: rgba(105, 192, 177, 0.12);
  border: 1px solid rgba(105, 192, 177, 0.32);
  color: var(--th-teal);
  font-size: 1.125rem;
  margin-bottom: 1em;
  position: relative;
  z-index: 1;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.th-delivers-item:hover .th-delivers-item-icon {
  background: rgba(105, 192, 177, 0.2);
  border-color: rgba(105, 192, 177, 0.55);
}
.th-delivers-item p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.0625rem;
  line-height: 1.55;
  margin: 0;
  font-family: var(--wb-font-body);
  position: relative;
  z-index: 1;
}
/* Legacy numeral span — kept for backwards compatibility but hidden now that
   the watermark numeral handles the sequencing visually. */
.th-delivers-item-num { display: none; }
.th-delivers-closer {
  position: relative;
  max-width: 760px;
  margin: 3.5em auto 0;
  text-align: center;
  padding-top: 2.5em;
}
.th-delivers-closer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: var(--th-teal);
  border-radius: 2px;
}
.th-delivers-closer p {
  font-family: var(--wb-font-heading);
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  line-height: 1.3;
  color: #fff;
  margin: 0;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.th-delivers-closer p .th-accent { color: var(--th-teal); }
@media (max-width: 900px) {
  .th-delivers-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25em; }
  .th-delivers-item::before { font-size: 5.5rem; }
}
@media (max-width: 600px) {
  .th-delivers-grid { grid-template-columns: 1fr; gap: 1em; margin-top: 2em; }
  .th-delivers-item { padding: 1.5em 1.4em 1.35em; }
  .th-delivers-item::before { font-size: 5rem; }
  .th-delivers-closer { margin-top: 2.5em; padding-top: 2em; }
}

/* Section slogan — a centred brand-resonance statement, sized between body
   and H2. Sits below content blocks and ahead of a sub-divider or next beat. */
.th-section-slogan {
  max-width: 760px;
  margin: 3em auto 0;
  text-align: center;
  font-family: var(--wb-font-heading);
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  line-height: 1.4;
  color: var(--th-purple);
  letter-spacing: -0.01em;
  font-weight: 400;
}
.th-section-slogan .th-accent { color: var(--th-teal-deep); }
.th-section-slogan strong { color: var(--th-purple); font-weight: 700; }
.wb-dark .th-section-slogan { color: #fff; }
.wb-dark .th-section-slogan .th-accent { color: var(--th-teal); }
@media (max-width: 640px) {
  .th-section-slogan { margin-top: 2em; font-size: 1.0625rem; }
}

/* Section sub-divider — quiet eyebrow flanked by fading hairlines, used
   to signal a new beat within a section. */
.th-section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25em;
  margin: 3em auto 2em;
  max-width: 640px;
}
.th-section-divider::before,
.th-section-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--th-teal-soft, rgba(105,192,177,0.4)), transparent);
}
.th-section-divider .th-eyebrow {
  margin: 0;
  white-space: nowrap;
  font-size: 0.875rem;
  letter-spacing: 0.16em;
}
@media (max-width: 640px) {
  .th-section-divider { gap: 0.85em; margin: 2.25em auto 1.5em; }
  .th-section-divider .th-eyebrow { font-size: 0.75rem; letter-spacing: 0.12em; }
}

/* Two-line heading with teal second line — brochure's headline motif.
   Usage: <h2 class="th-headline"><span>First line.</span><span>Second line.</span></h2> */
.th-headline {
  display: block;
}
.th-headline > span {
  display: block;
}
.th-headline > span + span {
  color: var(--th-teal);
}
/* On dark surfaces the second line stays teal but first line is white. */
.wb-dark .th-headline > span:first-child,
.wb-dark .th-headline > span:only-child {
  color: #fff;
}

.th-muted { color: var(--th-text-muted); }
.th-surface { background: var(--th-teal-pale); }

/* Teal accent utility — works inside any heading or text block.
   Uses !important to override scoped colour rules like .cta-title's white. */
.th-accent { color: var(--th-teal) !important; }

/* Teal-accent words inside headlines (brochure's recurring teal-tail motif).
   Works on light and dark surfaces. */
.th-accent { color: var(--th-teal); }
.wb-section.wb-dark .th-accent { color: var(--th-teal); }

/* ── THREE-FLOW BLOCK ── brochure pg 4–5 — numbered teal circle + body */
.th-flow {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 2em;
  align-items: start;
  max-width: 1000px;
  margin: 0 auto 3.5em;
  padding: 0 1em;
}
.th-flow:last-child { margin-bottom: 0; }
.th-flow-num {
  width: 80px;
  height: 80px;
  border-radius: 999px;
  background: var(--th-teal);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wb-font-heading);
  font-size: 1.875rem;
  font-weight: 400;
  line-height: 1;
}
.wb-dark .th-flow-num { background: var(--th-teal); color: var(--th-purple); }
.th-flow-body { min-width: 0; }
.th-flow-body .th-eyebrow { margin-bottom: 0.4em; }
.th-flow-body h3 {
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  margin: 0 0 0.75em;
  line-height: 1.15;
  color: var(--th-purple);
}
.th-flow-body p { font-size: 1rem; line-height: 1.65; color: var(--th-text-muted); margin: 0 0 1em; }
.th-flow-body ul, .th-flow-body ol { margin: 0 0 1em; padding-left: 1.25em; }
.th-flow-body li { font-size: 1rem; line-height: 1.65; color: var(--th-text-muted); margin: 0 0 0.5em; }
.th-flow-body strong { color: var(--th-purple); font-weight: 700; }
.th-flow-quote {
  border-left: 3px solid var(--th-teal);
  background: var(--th-teal-pale);
  padding: 0.85em 1.1em;
  margin: 1.25em 0 0;
  font-style: italic;
  color: var(--th-purple);
  font-weight: 500;
  border-radius: 0 var(--th-radius) var(--th-radius) 0;
}
@media (max-width: 700px) {
  .th-flow { grid-template-columns: 1fr; gap: 1em; }
  .th-flow-num { width: 64px; height: 64px; font-size: 1.5rem; }
}

/* Bridge: also support .th-eyebrow inside callouts (alternative markup form) */
.th-callout .th-eyebrow { color: var(--th-teal); margin-bottom: 0.5em; }
.th-callout--teal .th-eyebrow { color: var(--th-purple); opacity: 0.7; }
.th-callout p { font-family: var(--wb-font-heading); font-size: 1.375rem; line-height: 1.3; margin: 0; text-transform: none; letter-spacing: -0.01em; }
.th-callout p span { color: var(--th-teal); }
.th-callout--teal p { text-transform: none; font-family: var(--wb-font-body); font-weight: 600; font-size: 1.125rem; }
.th-callout--teal p span { color: #fff; }

/* ── TRINITY MOTIF ── "Your brand. Your colours. Your domain." rhythm line */
.th-trinity {
  font-family: var(--wb-font-heading);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--th-purple);
}
.wb-dark .th-trinity { color: #fff; }
.th-trinity span { color: var(--th-teal); }

/* ── STEP CARDS ── techy 3-card row used as a teaser on the homepage.
   Same DNA as the pillar cards: dark purple panel, dot grid, corner
   chamfer, glowing accent. Adds a big serial number per card. */
.th-step-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25em;
  max-width: 1100px;
  margin: 2.75em auto 0;
  text-align: left;
}
.th-step-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 240px;
  padding: 1.75em 1.6em;
  color: #fff;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  background:
    radial-gradient(circle at 100% 0%, rgba(105,192,177,0.22), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(105,192,177,0.10), transparent 50%),
    linear-gradient(155deg, #3F2538 0%, var(--th-purple) 55%, var(--th-purple-deep) 100%);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.3s ease;
  isolation: isolate;
}
.th-step-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(105,192,177,0.30) 1px, transparent 1.4px);
  background-size: 14px 14px;
  opacity: 0.32;
  mask-image: linear-gradient(150deg, #000 30%, transparent 90%);
  -webkit-mask-image: linear-gradient(150deg, #000 30%, transparent 90%);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.3s ease;
}
.th-step-card::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--th-teal) 50%, transparent 100%);
  box-shadow: 0 0 12px rgba(105,192,177,0.6);
  transform: scaleX(0.35);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 1;
}
.th-step-card:hover { transform: translateY(-5px); filter: drop-shadow(0 12px 20px rgba(53,31,47,0.35)); }
.th-step-card:hover::before { opacity: 0.55; }
.th-step-card:hover::after { transform: scaleX(1); }

/* Big serial number (01/02/03) floats top-right behind content */
.th-step-card-num {
  position: absolute;
  top: 0.4em;
  right: 0.7em;
  font-family: var(--wb-font-heading);
  font-size: 3rem;
  font-weight: 400;
  line-height: 1;
  color: var(--th-teal);
  opacity: 0.18;
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.th-step-card:hover .th-step-card-num { opacity: 0.4; transform: translateY(-2px); }

.th-step-card-tag {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--th-teal);
  margin-bottom: 0.85em;
  text-transform: uppercase;
  opacity: 0.85;
}
.th-step-card h3 {
  position: relative;
  z-index: 1;
  font-family: var(--wb-font-heading);
  font-size: clamp(1.375rem, 2.1vw, 1.625rem);
  font-weight: 400;
  margin: 0 0 0.55em;
  padding-bottom: 0.55em;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--th-teal);
}
.th-step-card h3::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 32px;
  height: 2px;
  background: var(--th-teal);
  box-shadow: 0 0 8px rgba(105,192,177,0.6);
  transition: width 0.4s cubic-bezier(0.22,0.61,0.36,1);
}
.th-step-card:hover h3::after { width: 72px; }
.th-step-card p {
  position: relative;
  z-index: 1;
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.66);
  margin: 0;
  line-height: 1.55;
  flex: 1 1 auto;
}
.th-step-card-icon {
  align-self: flex-end;
  margin-top: 1.25em;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 1.25rem;
  color: var(--th-teal);
  background: rgba(105,192,177,0.10);
  border: 1px solid rgba(105,192,177,0.32);
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
  box-shadow: inset 0 0 12px rgba(105,192,177,0.18), 0 0 16px rgba(105,192,177,0.22);
}
.th-step-card:hover .th-step-card-icon {
  background: var(--th-teal);
  border-color: var(--th-teal);
  color: var(--th-purple);
  transform: translateY(-2px) rotate(-4deg);
}
@media (max-width: 900px) { .th-step-cards { grid-template-columns: 1fr; gap: 1em; } }

/* ── HIGHLIGHT GRID ── light techy chips for the homepage "what's included"
   teaser. 3×3 grid of small icon + label tiles, opening into the full
   feature list on /features/. */
.th-highlight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85em;
  max-width: 980px;
  margin: 2.5em auto 0;
}
.th-highlight-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85em;
  padding: 1.1em 1.25em;
  background: #fff;
  border: 1px solid var(--th-border);
  border-radius: 12px;
  text-align: left;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  overflow: hidden;
}
.th-highlight-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 100%, rgba(105,192,177,0.10), transparent 50%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.th-highlight-card:hover {
  border-color: var(--th-teal);
  transform: translateY(-2px);
  box-shadow: var(--th-shadow-sm);
}
.th-highlight-card:hover::before { opacity: 1; }
.th-highlight-card i {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--th-teal-deep);
  background: var(--th-teal-pale);
  border-radius: 9px;
  flex-shrink: 0;
  transition: background-color 0.2s ease, color 0.2s ease;
  position: relative;
  z-index: 1;
}
.th-highlight-card:hover i { background: var(--th-teal); color: #fff; }
.th-highlight-card h4 {
  margin: 0;
  font-family: var(--wb-font-heading);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--th-purple);
  letter-spacing: -0.005em;
  line-height: 1.2;
  position: relative;
  z-index: 1;
}
@media (max-width: 900px) { .th-highlight-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .th-highlight-grid { grid-template-columns: 1fr; } }

/* Feature highlight card — the 10th GDPR card sits below the 3x3 grid as a
   distinctive full-width row, signalling "module 10 is a foundation that runs
   through the others". */
.th-highlight-feature-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25em;
  padding: 1.4em 1.75em;
  background: linear-gradient(120deg, #fff 0%, var(--th-teal-pale) 100%);
  border: 1px solid var(--th-teal-soft, rgba(105,192,177,0.4));
  border-radius: 14px;
  max-width: 980px;
  margin: 0.85em auto 0;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(53, 31, 47, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.th-highlight-feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--th-teal) 0%, var(--th-teal-deep) 100%);
}
.th-highlight-feature-card:hover {
  transform: translateY(-2px);
  border-color: var(--th-teal);
  box-shadow: 0 14px 32px rgba(53, 31, 47, 0.10);
}
.th-highlight-feature-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(105, 192, 177, 0.35);
  color: var(--th-teal-deep);
  font-size: 1.5rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(53, 31, 47, 0.06);
}
.th-highlight-feature-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  flex: 1;
  min-width: 0;
}
.th-highlight-feature-card-tag {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--th-teal-deep);
}
.th-highlight-feature-card-name {
  margin: 0;
  font-family: var(--wb-font-heading);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--th-purple);
  line-height: 1.2;
}
.th-highlight-feature-card-desc {
  margin: 0.15em 0 0;
  font-size: 0.9375rem;
  color: var(--th-text-muted);
  line-height: 1.5;
}
@media (max-width: 700px) {
  .th-highlight-feature-card { flex-direction: column; align-items: flex-start; padding: 1.25em 1.4em; gap: 0.75em; }
  .th-highlight-feature-card-icon { width: 48px; height: 48px; font-size: 1.25rem; }
  .th-highlight-feature-card-name { font-size: 1.125rem; }
}

/* ── ARROW LINK BUTTON ── outline button with hover slide on the arrow */
.th-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-weight: 600;
}
.th-arrow-link i { transition: transform 0.25s ease; }
.th-arrow-link:hover i { transform: translateX(4px); }

/* ── DARK SECTION HELPERS ── give cards & callouts contrast on .wb-dark */
.wb-section.wb-dark .th-callout--teal { box-shadow: 0 12px 32px rgba(0,0,0,0.25); }
.wb-section.wb-dark .wb-divider { background: var(--th-teal); }

/* ── PROBLEM CARDS ── dramatic dark-surface cards with hero icon,
   big watermark number, and bold typographic hierarchy. */
.th-problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5em;
  max-width: 1100px;
  margin: 3em auto 0;
  text-align: left;
}
.th-problem-card {
  position: relative;
  padding: 2.5em 1.8em 2em;
  background: linear-gradient(160deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  isolation: isolate;
}
.th-problem-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(105,192,177,0.22) 1px, transparent 1.4px);
  background-size: 16px 16px;
  opacity: 0.20;
  mask-image: linear-gradient(160deg, #000 20%, transparent 90%);
  -webkit-mask-image: linear-gradient(160deg, #000 20%, transparent 90%);
  pointer-events: none;
}
/* Giant watermark number filling the bottom-right */
.th-problem-card::after {
  content: attr(data-n);
  position: absolute;
  right: -0.05em;
  bottom: -0.32em;
  font-family: var(--wb-font-heading);
  font-size: 12rem;
  font-weight: 400;
  line-height: 0.85;
  color: var(--th-teal);
  opacity: 0.08;
  letter-spacing: -0.05em;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.3s ease, transform 0.4s ease;
  z-index: 0;
}
.th-problem-card:hover {
  border-color: rgba(105,192,177,0.45);
  transform: translateY(-5px);
  background: linear-gradient(160deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
  box-shadow: 0 16px 32px rgba(0,0,0,0.35), 0 0 0 1px rgba(105,192,177,0.18);
}
.th-problem-card:hover::after { opacity: 0.18; transform: translateY(-4px); }

/* Big glowing icon "glyph" at the top */
.th-problem-card-glyph {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(105,192,177,0.12);
  border: 1px solid rgba(105,192,177,0.35);
  color: var(--th-teal);
  font-size: 1.625rem;
  margin-bottom: 1.5em;
  box-shadow: inset 0 0 14px rgba(105,192,177,0.20), 0 0 18px rgba(105,192,177,0.25);
  transition: transform 0.3s cubic-bezier(0.22,0.61,0.36,1), background-color 0.3s ease, color 0.3s ease;
}
.th-problem-card:hover .th-problem-card-glyph {
  transform: translateY(-2px) rotate(-4deg);
  background: var(--th-teal);
  color: var(--th-purple);
}

.th-problem-card-kicker {
  position: relative;
  z-index: 2;
  display: block;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--th-teal);
  text-transform: uppercase;
  margin-bottom: 0.7em;
  opacity: 0.9;
}
.th-problem-card h3 {
  position: relative;
  z-index: 2;
  font-family: var(--wb-font-heading);
  font-size: clamp(1.375rem, 2.2vw, 1.625rem);
  font-weight: 400;
  margin: 0 0 0.6em;
  padding-bottom: 0.55em;
  color: var(--th-teal) !important;
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.th-problem-card h3::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 32px;
  height: 2px;
  background: var(--th-teal);
  box-shadow: 0 0 8px rgba(105,192,177,0.6);
  transition: width 0.4s cubic-bezier(0.22,0.61,0.36,1);
}
.th-problem-card:hover h3::after { width: 72px; }
.th-problem-card p {
  position: relative;
  z-index: 2;
  font-size: 1.0625rem;
  color: rgba(255,255,255,0.78) !important;
  margin: 0;
  line-height: 1.55;
}
@media (max-width: 900px) { .th-problem-grid { grid-template-columns: 1fr; } }

/* ── FLOWLINE ── connected horizontal step diagram for "How it works".
   Three cards joined by a teal track that flows between numbered badges. */
.th-flowline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25em;
  max-width: 1100px;
  margin: 3em auto 0;
  text-align: left;
  padding-top: 1em;
}
/* The horizontal teal line connecting the badges */
.th-flowline-track {
  position: absolute;
  top: 36px;
  left: 18%;
  right: 18%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--th-teal) 8%,
    var(--th-teal-deep) 50%,
    var(--th-teal) 92%,
    transparent 100%);
  opacity: 0.45;
  border-radius: 2px;
  pointer-events: none;
}
.th-flowline-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.th-flowline-badge {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: var(--th-purple);
  color: var(--th-teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.5em;
  border: 2px solid var(--th-teal);
  box-shadow:
    0 0 0 6px #fff,
    0 0 0 7px rgba(105,192,177,0.25),
    inset 0 0 18px rgba(105,192,177,0.25),
    0 0 22px rgba(105,192,177,0.3);
  transition: transform 0.3s cubic-bezier(0.22,0.61,0.36,1), box-shadow 0.3s ease;
}
.th-flowline-num {
  position: absolute;
  top: -8px;
  right: -10px;
  font-family: var(--wb-font-heading);
  font-size: 0.75rem;
  background: var(--th-teal);
  color: var(--th-purple);
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  border: 2px solid #fff;
}
.th-flowline-step:hover .th-flowline-badge {
  transform: scale(1.08) translateY(-3px);
  box-shadow:
    0 0 0 6px #fff,
    0 0 0 7px rgba(105,192,177,0.45),
    inset 0 0 22px rgba(105,192,177,0.35),
    0 8px 28px rgba(105,192,177,0.4);
}
.th-flowline-card {
  position: relative;
  width: 100%;
  background: #fff;
  border: 1px solid var(--th-border);
  border-radius: 14px;
  padding: 1.5em 1.4em 1.4em;
  text-align: center;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  flex: 1;
}
.th-flowline-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--th-teal), var(--th-teal-deep));
  transform: scaleX(0.35);
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.22,0.61,0.36,1);
  border-radius: 14px 14px 0 0;
}
.th-flowline-step:hover .th-flowline-card {
  border-color: var(--th-teal);
  transform: translateY(-2px);
  box-shadow: var(--th-shadow-md);
}
.th-flowline-step:hover .th-flowline-card::before { transform: scaleX(1); }
.th-flowline-kicker {
  display: block;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--th-teal-deep);
  text-transform: uppercase;
  margin-bottom: 0.6em;
}
.th-flowline-card h3 {
  font-family: var(--wb-font-heading);
  font-size: 1.25rem;
  font-weight: 400;
  margin: 0 0 0.55em;
  color: var(--th-purple);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.th-flowline-card p {
  font-size: 0.9rem;
  color: var(--th-text-muted);
  margin: 0;
  line-height: 1.55;
}
@media (max-width: 900px) {
  .th-flowline { grid-template-columns: 1fr; gap: 2em; }
  .th-flowline-track { display: none; }
}

/* ── CONVERGE DIAGRAM ── two inputs → AI engine → one output.
   Used in homepage section 03 to honestly visualise the dual-entry
   nature of the matching process: jobs feed candidates in via
   applications; candidates can also self-register direct to the community.
   Both routes hit the same AI engine, which produces one shortlist. */
.th-converge {
  position: relative;
  max-width: 1100px;
  margin: 3em auto 0;
  text-align: left;
}
.th-converge-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.th-flow-path {
  fill: none;
  stroke: var(--th-teal);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 6 8;
  vector-effect: non-scaling-stroke;
  opacity: 0.7;
  animation: th-flow-data 1.6s linear infinite;
  filter: drop-shadow(0 0 4px rgba(105,192,177,0.45));
}
.th-flow-path--out {
  stroke-dasharray: 8 6;
  opacity: 0.9;
}
@keyframes th-flow-data {
  to { stroke-dashoffset: -14; }
}

.th-converge-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.3fr 1.25fr;
  gap: 1.5em;
  align-items: stretch;
}
.th-converge-output p + p { margin-top: 0.6em; font-size: 0.95rem; line-height: 1.5; }
.th-converge-col { display: flex; flex-direction: column; }
.th-converge-col--inputs { gap: 1em; justify-content: space-between; }
.th-converge-col--engine,
.th-converge-col--output { justify-content: center; }

/* Shared card styling for input & output */
.th-converge-card {
  position: relative;
  border-radius: 14px;
  padding: 1.4em 1.4em 1.25em;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* INPUT CARDS — small purple panels matching the techy pillar DNA */
.th-converge-input {
  background:
    radial-gradient(circle at 100% 0%, rgba(105,192,177,0.15), transparent 65%),
    linear-gradient(160deg, #3F2538 0%, var(--th-purple) 60%, var(--th-purple-deep) 100%);
  border: 1px solid rgba(105,192,177,0.22);
  color: #fff;
  box-shadow: inset 0 0 24px rgba(105,192,177,0.05);
}
.th-converge-input::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(105,192,177,0.25) 1px, transparent 1.4px);
  background-size: 14px 14px;
  opacity: 0.20;
  mask-image: linear-gradient(150deg, #000 30%, transparent 90%);
  -webkit-mask-image: linear-gradient(150deg, #000 30%, transparent 90%);
  pointer-events: none;
}
.th-converge-input:hover {
  border-color: var(--th-teal);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.25), inset 0 0 30px rgba(105,192,177,0.10);
}

/* OUTPUT CARD — bright teal-tinged success panel */
.th-converge-output {
  background: linear-gradient(160deg, #fff 0%, var(--th-teal-pale) 100%);
  border: 1px solid var(--th-teal-soft);
  color: var(--th-purple);
}
.th-converge-output::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--th-teal), var(--th-teal-deep));
  border-radius: 14px 14px 0 0;
}
.th-converge-output:hover {
  border-color: var(--th-teal);
  transform: translateY(-2px);
  box-shadow: var(--th-shadow-md);
}

/* Kicker labels (monospace techy labels on every card) */
.th-converge-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.55em;
  position: relative;
  z-index: 1;
}
.th-converge-input .th-converge-kicker { color: var(--th-teal); opacity: 0.9; }
.th-converge-output .th-converge-kicker { color: var(--th-teal-deep); }

/* Card titles + body */
.th-converge-card h3 {
  font-family: var(--wb-font-heading);
  font-weight: 400;
  font-size: 1.25rem;
  margin: 0 0 0.4em;
  line-height: 1.2;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}
.th-converge-input h3 { color: var(--th-teal) !important; }
.th-converge-output h3 { color: var(--th-teal-deep) !important; }
.th-converge-card p {
  font-size: 1rem;
  margin: 0;
  line-height: 1.55;
  position: relative;
  z-index: 1;
}
.th-converge-input p { color: rgba(255,255,255,0.66) !important; }
.th-converge-output p { color: var(--th-text-muted) !important; }

/* ENGINE — the hero centre panel, larger and dramatic */
.th-converge-engine {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.25em 1.5em;
  min-height: 100%;
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 0%, rgba(105,192,177,0.32), transparent 55%),
    radial-gradient(circle at 50% 100%, rgba(105,192,177,0.18), transparent 55%),
    linear-gradient(160deg, #4A2C42 0%, var(--th-purple) 50%, var(--th-purple-deep) 100%);
  border: 1px solid rgba(105,192,177,0.45);
  box-shadow:
    0 0 0 1px rgba(105,192,177,0.15),
    0 20px 50px rgba(53,31,47,0.30),
    inset 0 0 50px rgba(105,192,177,0.10);
  overflow: hidden;
  justify-content: center;
}
.th-converge-engine::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(105,192,177,0.30) 1px, transparent 1.5px);
  background-size: 16px 16px;
  opacity: 0.30;
  mask-image: radial-gradient(circle at 50% 50%, #000 25%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 25%, transparent 80%);
  pointer-events: none;
}
.th-converge-engine-icon {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: var(--th-teal);
  color: var(--th-purple);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 1.25em;
  position: relative;
  z-index: 1;
  box-shadow:
    0 0 0 6px rgba(105,192,177,0.18),
    0 8px 30px rgba(105,192,177,0.40),
    inset 0 0 20px rgba(255,255,255,0.15);
  animation: th-engine-pulse 2.6s ease-in-out infinite;
}
@keyframes th-engine-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 6px rgba(105,192,177,0.18),
      0 8px 30px rgba(105,192,177,0.40),
      inset 0 0 20px rgba(255,255,255,0.15);
  }
  50% {
    box-shadow:
      0 0 0 12px rgba(105,192,177,0.08),
      0 10px 42px rgba(105,192,177,0.55),
      inset 0 0 22px rgba(255,255,255,0.22);
  }
}
.th-converge-engine .th-converge-kicker--engine {
  color: var(--th-teal);
  margin-bottom: 0.6em;
}
.th-converge-pulse {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--th-teal);
  box-shadow: 0 0 8px rgba(105,192,177,0.8);
  animation: th-pulse 2s ease-in-out infinite;
  display: inline-block;
}
.th-converge-engine h3 {
  font-family: var(--wb-font-heading);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  margin: 0 0 0.6em;
  color: var(--th-teal) !important;
  line-height: 1.15;
  letter-spacing: -0.015em;
  position: relative;
  z-index: 1;
}
.th-converge-engine p {
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.72) !important;
  margin: 0;
  line-height: 1.55;
  max-width: 24em;
  position: relative;
  z-index: 1;
}
.th-converge-engine p em {
  font-style: normal;
  color: var(--th-teal);
  font-weight: 600;
}

/* Mobile: stack vertically, hide the SVG connectors and replace with
   vertical arrow indicators so the flow still reads correctly. */
@media (max-width: 900px) {
  .th-converge-grid { grid-template-columns: 1fr; gap: 1em; }
  .th-converge-lines { display: none; }
  .th-converge-engine { padding: 2em 1.25em; }
  .th-converge-col--inputs > * + *::before,
  .th-converge-col--engine::before,
  .th-converge-col--output::before {
    /* no-op — keeps existing layout, mobile just stacks */
  }
}

/* ── AUDIENCE CARDS — refresh to the techy DNA on light surfaces ── */
.th-audience-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--th-border);
  border-radius: 14px;
  padding: 2em 1.75em 1.75em;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.th-audience-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--th-teal), var(--th-teal-deep));
  transform: scaleX(0.3);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.22,0.61,0.36,1);
}
.th-audience-card:hover {
  border-color: var(--th-teal);
  transform: translateY(-3px);
  box-shadow: var(--th-shadow-md);
}
.th-audience-card:hover::before { transform: scaleX(1); }
.th-audience-card .th-audience-num {
  background: var(--th-teal);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(105,192,177,0.18), 0 4px 12px rgba(105,192,177,0.25);
}

/* ── FEATURE SECTIONS (new) ── disclosure-pattern per-group treatment for
   /features/. Each module is a <details>; the <summary> is the techy hero
   panel and the items grid only renders when expanded. Smooth height
   transition is wired in talenthubi.js (CSS handles the visual state). */
.th-feature-section {
  max-width: 1100px;
  margin: 0 auto 1em;
  padding: 0 1em;
  list-style: none;
}
.th-feature-section[open] { margin-bottom: 2em; }
.th-feature-section:last-child { margin-bottom: 1em; }

/* ── PILLAR TRIO — three product cards each containing a mini-mockup of one
   of the three customer touchpoints (public careers · candidate portal ·
   recruiter portal). Used on the Features page top section. */
.th-pillar-trio {
  display: flex;
  flex-direction: column;
  gap: 2em;
  max-width: 1100px;
  margin: 3em auto 0;
  text-align: left;
}
.th-pillar {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 2em;
  align-items: flex-start;
  background: #fff;
  border: 1px solid rgba(53, 31, 47, 0.10);
  border-radius: 18px;
  padding: 1.75em 1.75em 1.75em;
  box-shadow: 0 6px 20px rgba(53, 31, 47, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  overflow: hidden;
}
.th-pillar-meta { display: flex; flex-direction: column; }
.th-pillar:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(53, 31, 47, 0.10);
  border-color: var(--th-teal-soft, rgba(105,192,177,0.4));
}
.th-pillar-tag {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--th-teal-deep);
  margin-bottom: 0.6em;
}
.th-pillar-title {
  font-family: var(--wb-font-heading);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--th-purple);
  margin: 0 0 0.5em;
  line-height: 1.2;
}
.th-pillar-desc {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--th-text-muted);
  margin: 0 0 1.25em;
}
.th-pillar-shot {
  background: #FAF8F9;
  border: 1px solid rgba(53, 31, 47, 0.08);
  border-radius: 10px;
  overflow: hidden;
  font-size: 0.6875rem;
  line-height: 1.35;
  min-width: 0;
}
.th-pillar-shot--narrow {
  max-width: 260px;
  margin: 0 auto;
}
.th-pillar-shot > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 9px;
}
@media (max-width: 860px) {
  .th-pillar { grid-template-columns: 1fr; gap: 1.5em; }
  .th-pillar-shot--narrow { max-width: 320px; }
}

/* ── MINI CAREERS — public jobs board (filter sidebar + listing) */
.th-mini-nav {
  display: flex;
  gap: 0.9em;
  padding: 0.6em 1em;
  background: #fff;
  border-bottom: 1px solid rgba(53, 31, 47, 0.08);
  font-weight: 600;
  color: var(--th-purple);
  font-size: 0.7rem;
  align-items: center;
}
.th-mini-nav span:first-child { font-weight: 700; color: var(--th-teal-deep); }
.th-mini-nav span { white-space: nowrap; }
.th-mini-careers-layout {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 0.85em;
  padding: 0.85em;
}
.th-mini-filters {
  background: #fff;
  border: 1px solid rgba(53, 31, 47, 0.08);
  border-radius: 6px;
  padding: 0.65em 0.65em;
  font-size: 0.6rem;
  color: var(--th-text-muted);
  line-height: 1.5;
}
.th-mini-filters strong {
  display: block;
  color: var(--th-purple);
  font-size: 0.65rem;
  margin-bottom: 0.3em;
}
.th-mini-filters input {
  width: 100%;
  background: #FAFAFA;
  border: 1px solid rgba(53, 31, 47, 0.10);
  border-radius: 4px;
  padding: 0.3em 0.4em;
  font-size: 0.55rem;
  color: var(--th-purple);
  margin-bottom: 0.55em;
  pointer-events: none;
}
.th-mini-filters .th-mini-filter-group { margin-bottom: 0.55em; }
.th-mini-filters .th-mini-filter-group span { display: block; padding: 0.1em 0; }
.th-mini-filters .th-mini-filter-btn {
  display: block;
  text-align: center;
  background: var(--th-teal);
  color: var(--th-purple);
  font-weight: 700;
  font-size: 0.6rem;
  padding: 0.35em 0.5em;
  border-radius: 4px;
  margin-top: 0.4em;
}
.th-mini-careers-jobs { display: flex; flex-direction: column; gap: 0.55em; }
.th-mini-tc {
  background: linear-gradient(135deg, #fff 0%, var(--th-teal-pale) 100%);
  border: 1px dashed var(--th-teal-soft, rgba(105,192,177,0.5));
  border-radius: 6px;
  padding: 0.55em 0.7em;
}
.th-mini-tc-tag {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--th-teal-deep);
  display: block;
  margin-bottom: 0.2em;
}
.th-mini-tc h6 {
  margin: 0 0 0.2em;
  font-family: var(--wb-font-body);
  font-weight: 700;
  font-size: 0.7rem;
  color: var(--th-purple);
}
.th-mini-tc p {
  margin: 0 0 0.35em;
  font-size: 0.6rem;
  color: var(--th-text-muted);
  line-height: 1.4;
}
.th-mini-tc-cta {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--th-teal-deep);
}
.th-mini-careers-head-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.25em;
}
.th-mini-careers-head-row strong { color: var(--th-purple); font-size: 0.8rem; }
.th-mini-careers-head-row span { color: var(--th-text-muted); font-size: 0.6rem; }
.th-mini-careers-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.6em;
}
.th-mini-careers-head strong { color: var(--th-purple); font-size: 0.85rem; }
.th-mini-careers-head span { color: var(--th-text-muted); font-size: 0.65rem; }
.th-mini-job {
  background: #fff;
  border: 1px solid rgba(53, 31, 47, 0.08);
  border-radius: 8px;
  padding: 0.65em 0.75em;
  margin-bottom: 0.5em;
}
.th-mini-job:last-child { margin-bottom: 0; }
.th-mini-job-row { display: flex; gap: 0.35em; margin-bottom: 0.25em; align-items: center; }
.th-mini-job-pill {
  font-size: 0.55rem;
  font-weight: 600;
  background: rgba(105,192,177,0.15);
  color: var(--th-teal-deep);
  padding: 0.15em 0.45em;
  border-radius: 999px;
}
.th-mini-job h5 {
  margin: 0.2em 0 0.2em;
  font-family: var(--wb-font-body);
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--th-purple);
}
.th-mini-job p {
  margin: 0;
  font-size: 0.65rem;
  color: var(--th-text-muted);
  line-height: 1.4;
}
.th-mini-job-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4em;
  font-size: 0.6rem;
}
.th-mini-job-foot span { color: var(--th-text-muted); }
.th-mini-job-foot strong { color: var(--th-purple); font-weight: 600; }

/* ── MINI CANDIDATE PORTAL — sidebar + dashboard preview */
.th-mini-portal {
  display: grid;
  grid-template-columns: 140px 1fr;
  min-height: 280px;
}
.th-mini-portal-side {
  background: #fff;
  border-right: 1px solid rgba(53, 31, 47, 0.08);
  padding: 0.85em 0.55em;
}
.th-mini-portal-user {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(53, 31, 47, 0.08);
  margin: 0 auto 0.45em;
}
.th-mini-portal-name {
  text-align: center;
  font-weight: 700;
  font-size: 0.7rem;
  color: var(--th-purple);
  margin-bottom: 0.7em;
}
.th-mini-portal-nav { display: flex; flex-direction: column; gap: 0.18em; }
.th-mini-portal-nav span {
  font-size: 0.65rem;
  color: var(--th-text-muted);
  padding: 0.3em 0.5em;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 0.4em;
}
.th-mini-portal-nav span.is-active {
  background: var(--th-purple);
  color: #fff;
  font-weight: 600;
}
.th-mini-portal-nav i { width: 11px; text-align: center; font-size: 0.6rem; }
.th-mini-portal-main { padding: 0.9em 0.95em; }
.th-mini-portal-welcome {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--th-purple);
  margin: 0 0 0.7em;
}
.th-mini-portal-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; margin-bottom: 0.85em; }
.th-mini-portal-stat {
  background: #fff;
  border: 1px solid rgba(53, 31, 47, 0.08);
  border-radius: 6px;
  padding: 0.5em 0.65em;
}
.th-mini-portal-stat span {
  display: block;
  font-size: 0.6rem;
  color: var(--th-text-muted);
}
.th-mini-portal-stat strong {
  display: block;
  font-size: 1.2rem;
  color: var(--th-purple);
  font-weight: 700;
  line-height: 1.1;
}
.th-mini-portal-section-title {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--th-purple);
  margin: 0.6em 0 0.35em;
}
.th-mini-portal-list {
  background: #fff;
  border: 1px solid rgba(53, 31, 47, 0.08);
  border-radius: 6px;
  padding: 0.45em 0.6em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.6rem;
}
.th-mini-portal-list strong { color: var(--th-purple); font-weight: 600; }
.th-mini-portal-list .th-mini-pill {
  font-size: 0.5rem;
  font-weight: 700;
  background: rgba(105,192,177,0.15);
  color: var(--th-teal-deep);
  padding: 0.1em 0.4em;
  border-radius: 999px;
}
.th-mini-portal-recommended {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5em;
  margin-top: 0.4em;
}
.th-mini-portal-rec {
  background: #fff;
  border: 1px solid rgba(53, 31, 47, 0.08);
  border-radius: 6px;
  padding: 0.5em 0.55em;
}
.th-mini-portal-rec strong {
  display: block;
  font-size: 0.6rem;
  color: var(--th-purple);
  margin-bottom: 0.15em;
}
.th-mini-portal-rec span {
  display: block;
  font-size: 0.55rem;
  color: var(--th-text-muted);
  line-height: 1.3;
}

/* ── MINI RECRUITER — dark sidebar nav list */
.th-mini-recruiter {
  background: #1F1A24;
  color: #fff;
  padding: 0.85em 0;
  min-height: 270px;
}
.th-mini-recruiter-brand {
  padding: 0.4em 0.85em 0.7em;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-weight: 700;
  font-size: 0.7rem;
  color: var(--th-teal);
  margin-bottom: 0.45em;
}
.th-mini-recruiter-list { list-style: none; margin: 0; padding: 0; }
.th-mini-recruiter-list li {
  padding: 0.32em 0.85em;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.72);
  display: flex;
  align-items: center;
  gap: 0.55em;
}
.th-mini-recruiter-list li.is-active {
  background: var(--th-teal);
  color: var(--th-purple);
  font-weight: 600;
}
.th-mini-recruiter-list li i { width: 12px; text-align: center; font-size: 0.6rem; }

@media (max-width: 980px) {
  .th-pillar-trio { grid-template-columns: 1fr; gap: 1.25em; max-width: 540px; }
}

/* Grid wrapper for showing two product shots side-by-side (A/B view of, e.g.,
   a "good fit" candidate vs a "poor fit" candidate). Stacks at narrow widths. */
.th-product-shot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5em;
  max-width: 1240px;
  margin: 3em auto 0;
  align-items: start;
}
.th-product-shot-grid .th-product-shot { margin: 0; max-width: none; }
@media (max-width: 980px) {
  .th-product-shot-grid { grid-template-columns: 1fr; gap: 2em; max-width: 700px; }
}

/* ── PRODUCT SHOT — "real screen" mockup component used to drop a styled
   HTML recreation of a platform screen inline with the marketing copy. Macros
   the browser chrome so it reads as a screenshot without being a raster image. */
.th-product-shot {
  position: relative;
  max-width: 980px;
  margin: 3em auto 0;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(53, 31, 47, 0.10);
  box-shadow:
    0 30px 60px rgba(53, 31, 47, 0.14),
    0 12px 24px rgba(53, 31, 47, 0.08);
  text-align: left;
}
.th-product-shot-chrome {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0.7em 1em;
  background: #F4F1F3;
  border-bottom: 1px solid rgba(53, 31, 47, 0.08);
}
.th-product-shot-dots {
  display: inline-flex;
  gap: 0.4em;
  flex-shrink: 0;
}
.th-product-shot-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(53, 31, 47, 0.15);
}
.th-product-shot-dots span:nth-child(1) { background: #FF5F57; }
.th-product-shot-dots span:nth-child(2) { background: #FEBC2E; }
.th-product-shot-dots span:nth-child(3) { background: #28C840; }
.th-product-shot-url {
  flex: 1;
  text-align: center;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.8125rem;
  color: var(--th-text-muted);
  background: #fff;
  border: 1px solid rgba(53, 31, 47, 0.08);
  border-radius: 6px;
  padding: 0.35em 1em;
  max-width: 360px;
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.th-product-shot-body { padding: 1.6em 1.75em 1.5em; color: var(--th-purple); }

/* Caption beneath the product shot */
.th-product-shot-caption {
  max-width: 980px;
  margin: 1em auto 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--th-text-muted);
  font-style: italic;
}

/* ── CANDIDATE CARD — the recreated candidate analysis view */
.th-candidate-header {
  display: flex;
  align-items: flex-start;
  gap: 1em;
  margin-bottom: 0.85em;
}
.th-candidate-score {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #22A06B;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.th-candidate-score--sm {
  width: 38px;
  height: 38px;
  font-size: 0.875rem;
}
.th-candidate-score--poor { background: #D14343; }
.th-candidate-id h4 {
  margin: 0 0 0.1em;
  font-family: var(--wb-font-body);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--th-purple);
}
.th-candidate-id p {
  margin: 0 0 0.45em;
  font-size: 0.9375rem;
  color: var(--th-text-muted);
}
.th-candidate-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  background: #E6F4F1;
  color: #1F7A66;
  border-radius: 5px;
  padding: 0.25em 0.7em;
}
.th-candidate-tag--poor { background: #FBE2E2; color: #B23838; }
.th-candidate-meta {
  font-size: 0.8125rem;
  color: var(--th-text-muted);
  margin-bottom: 1em;
}
.th-candidate-pill {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  background: #FFE5DD;
  color: #C05A30;
  border-radius: 999px;
  padding: 0.25em 0.75em;
  margin-bottom: 1em;
}
.th-candidate-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  margin: 0 0 1em;
  align-items: center;
}
.th-candidate-skill {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  background: #EFEDEF;
  color: var(--th-purple);
  border-radius: 999px;
  padding: 0.3em 0.75em;
}
.th-candidate-skills-more {
  font-size: 0.75rem;
  color: var(--th-text-muted);
  font-weight: 500;
  margin-left: 0.25em;
}
.th-candidate-bullets {
  list-style: none;
  margin: 0 0 0.5em;
  padding: 0;
  font-size: 0.875rem;
  line-height: 1.5;
}
.th-candidate-bullets li {
  padding: 0.1em 0;
  display: flex;
  gap: 0.5em;
}
.th-candidate-bullets li::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  margin-top: 0.35em;
}
.th-candidate-bullets--ok { color: #22A06B; }
.th-candidate-bullets--ok li::before {
  content: "✓";
  color: #22A06B;
  font-weight: 700;
  margin-top: 0;
}
.th-candidate-bullets--warn { color: #C97E2D; }
.th-candidate-bullets--warn li::before {
  content: "⚠";
  color: #C97E2D;
  margin-top: 0;
}
.th-candidate-divider {
  border: none;
  border-top: 1px solid rgba(53, 31, 47, 0.08);
  margin: 1.5em 0 1.25em;
}
.th-candidate-analysis-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--th-text-muted);
  margin-bottom: 0.4em;
}
.th-candidate-analysis-head {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-bottom: 0.85em;
}
.th-candidate-analysis-summary {
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: 0 0 1em;
  color: var(--th-purple);
}
.th-candidate-section-label {
  display: block;
  font-weight: 700;
  margin: 0.85em 0 0.35em;
  font-size: 0.9375rem;
  color: var(--th-purple);
}
.th-candidate-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  line-height: 1.55;
}
.th-candidate-list--ok li { color: #22A06B; }
.th-candidate-list--warn li { color: #C97E2D; }
.th-candidate-salary {
  margin: 1em 0 0;
  font-size: 0.9375rem;
  color: var(--th-purple);
}
.th-candidate-salary strong { color: var(--th-purple); }
.th-candidate-salary-value { color: #22A06B; font-weight: 600; }
.th-candidate-actions {
  display: flex;
  gap: 0.6em;
  flex-wrap: wrap;
  margin-top: 1.5em;
  padding-top: 1.25em;
  border-top: 1px solid rgba(53, 31, 47, 0.08);
}
.th-candidate-actions button {
  border: 1px solid rgba(53, 31, 47, 0.18);
  background: #fff;
  border-radius: 6px;
  padding: 0.5em 1em;
  font-size: 0.8125rem;
  color: var(--th-purple);
  font-family: inherit;
  cursor: default;
  pointer-events: none;
}
.th-candidate-actions button.is-primary {
  background: var(--th-teal);
  border-color: var(--th-teal);
  color: var(--th-purple);
  font-weight: 600;
}
@media (max-width: 700px) {
  .th-product-shot { margin-left: 0.5em; margin-right: 0.5em; }
  .th-product-shot-body { padding: 1.25em 1.1em; }
  .th-product-shot-url { font-size: 0.7rem; max-width: 200px; }
  .th-candidate-score { width: 44px; height: 44px; font-size: 0.875rem; }
  .th-candidate-actions button { font-size: 0.75rem; padding: 0.45em 0.85em; }
}

/* Foundation modifier — used on the GDPR accordion to signal it's a layer
   running across every other feature, not another peer module. Adds a vertical
   teal accent stripe and a soft teal-pale tint to the hero. */
.th-feature-section--foundation {
  position: relative;
  margin-top: 2em;
}
.th-feature-section--foundation > summary.th-feature-hero {
  background: linear-gradient(120deg, #fff 0%, var(--th-teal-pale) 100%);
  border-left: 4px solid var(--th-teal);
}
.th-feature-section--foundation .th-feature-hero-tag {
  color: var(--th-teal-deep);
}

/* Hide the default <details> marker triangle */
.th-feature-section > summary { list-style: none; cursor: pointer; }
.th-feature-section > summary::-webkit-details-marker { display: none; }
.th-feature-section > summary::marker { content: ""; }

/* HERO PANEL — group banner with big icon, number, name, tagline.
   Now acts as the clickable disclosure trigger. */
.th-feature-hero {
  position: relative;
  display: grid;
  grid-template-columns: 92px 1fr auto;
  align-items: center;
  gap: 1.75em;
  padding: 1.6em 1.85em;
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(105,192,177,0.22), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(105,192,177,0.10), transparent 50%),
    linear-gradient(155deg, #3F2538 0%, var(--th-purple) 55%, var(--th-purple-deep) 100%);
  color: #fff;
  overflow: hidden;
  margin-bottom: 1em;
  isolation: isolate;
  transition: transform 0.3s cubic-bezier(0.22,0.61,0.36,1), box-shadow 0.3s ease;
}
.th-feature-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(105,192,177,0.30) 1px, transparent 1.4px);
  background-size: 16px 16px;
  opacity: 0.30;
  mask-image: linear-gradient(150deg, #000 20%, transparent 90%);
  -webkit-mask-image: linear-gradient(150deg, #000 20%, transparent 90%);
  pointer-events: none;
}
.th-feature-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--th-teal) 50%, transparent 100%);
  box-shadow: 0 0 12px rgba(105,192,177,0.6);
  opacity: 0.75;
}
.th-feature-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(53,31,47,0.35);
}
.th-feature-hero:hover::before { opacity: 0.45; }
/* When section is open, round only the top so the items grid attaches cleanly */
.th-feature-section[open] .th-feature-hero {
  border-radius: 18px 18px 6px 6px;
}

/* CHEVRON — disclosure indicator on the right of the hero.
   Solid teal fill + bold white chevron so it reads clearly as a "click to
   expand" affordance. Inverts to white-fill + teal-chevron on hover so
   the open state still feels distinct from the closed one. */
.th-feature-chevron {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--th-teal);
  border: 1px solid var(--th-teal);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.0625rem;
  font-weight: 900;
  box-shadow:
    0 0 0 4px rgba(105,192,177,0.18),
    0 4px 12px rgba(105,192,177,0.30);
  transition: transform 0.4s cubic-bezier(0.22,0.61,0.36,1),
              background-color 0.25s ease,
              color 0.25s ease,
              box-shadow 0.25s ease;
}
.th-feature-chevron i { font-weight: 900; }
/* Hover on the summary lifts the chevron a touch */
.th-feature-section > summary:hover .th-feature-chevron {
  box-shadow:
    0 0 0 6px rgba(105,192,177,0.22),
    0 6px 16px rgba(105,192,177,0.40);
}
.th-feature-section[open] .th-feature-chevron {
  transform: rotate(180deg);
  background: #fff;
  border-color: #fff;
  color: var(--th-teal);
  box-shadow:
    0 0 0 4px rgba(255,255,255,0.18),
    0 4px 12px rgba(0,0,0,0.20);
}
/* When closed, the items area collapses to 0 height. The JS smoothly
   animates the height attribute on toggle. Without JS, the native
   <details> behaviour still works — just snaps open/close. */
.th-feature-items-wrap {
  overflow: hidden;
  transition: height 0.35s cubic-bezier(0.22,0.61,0.36,1);
}

.th-feature-hero-icon {
  position: relative;
  z-index: 1;
  width: 92px;
  height: 92px;
  border-radius: 22px;
  background: var(--th-teal);
  color: var(--th-purple);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.25rem;
  box-shadow:
    0 0 0 6px rgba(105,192,177,0.18),
    0 8px 24px rgba(105,192,177,0.30),
    inset 0 0 18px rgba(255,255,255,0.15);
}
.th-feature-hero-meta {
  position: relative;
  z-index: 1;
}
.th-feature-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--th-teal);
  text-transform: uppercase;
  margin-bottom: 0.55em;
  opacity: 0.95;
}
.th-feature-hero-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--th-teal);
  box-shadow: 0 0 8px rgba(105,192,177,0.7);
  animation: th-pulse 2.4s ease-in-out infinite;
}
.th-feature-hero-name {
  font-family: var(--wb-font-heading);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0 0 0.3em;
  color: var(--th-teal) !important;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.th-feature-hero-summary {
  font-size: clamp(0.95rem, 1.2vw, 1.0625rem);
  color: rgba(255,255,255,0.72) !important;
  margin: 0;
  line-height: 1.5;
  max-width: 42em;
}

/* ITEMS GRID — 2 or 3 columns of compact feature cards */
.th-feature-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.85em;
  padding: 1em 0.5em 0.5em;
}
.th-feature-item {
  position: relative;
  background: #fff;
  border: 1px solid var(--th-border);
  border-radius: 12px;
  padding: 1.1em 1.25em 1em;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
  overflow: hidden;
}
.th-feature-item::before {
  content: "";
  position: absolute;
  top: 1.15em;
  left: 0;
  width: 3px;
  height: 1.5em;
  background: var(--th-teal);
  border-radius: 0 2px 2px 0;
  transform: scaleY(0.55);
  transform-origin: left center;
  transition: transform 0.25s cubic-bezier(0.22,0.61,0.36,1);
}
.th-feature-item:hover {
  border-color: var(--th-teal);
  transform: translateY(-2px);
  box-shadow: var(--th-shadow-sm);
  background: linear-gradient(160deg, #fff 0%, var(--th-teal-pale) 100%);
}
.th-feature-item:hover::before { transform: scaleY(1); }
.th-feature-item-num {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--th-teal-deep);
  letter-spacing: 0.08em;
  margin-bottom: 0.35em;
}
.th-feature-item-name {
  display: block;
  font-family: var(--wb-font-heading);
  font-weight: 400;
  font-size: 1rem;
  color: var(--th-teal-deep);
  margin: 0 0 0.35em;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.th-feature-item-desc {
  font-size: 0.875rem;
  color: var(--th-text-muted);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 700px) {
  .th-feature-hero {
    grid-template-columns: 64px 1fr;
    grid-template-rows: auto auto;
    gap: 1em;
    padding: 1.25em 1.25em;
  }
  .th-feature-hero-icon { width: 64px; height: 64px; font-size: 1.5rem; border-radius: 16px; }
  .th-feature-chevron { grid-column: 1 / -1; justify-self: end; }
  .th-feature-items { grid-template-columns: 1fr; }
}

/* ── FLOW BLOCK ── used on /how-it-works/ to walk through each of the three
   core flows in detail. Pairs a dark hero panel (reuses .th-feature-hero
   styling) with a vertical numbered timeline of steps beneath it. */
.th-flow-block {
  max-width: 1100px;
  margin: 0 auto 4em;
  padding: 0 1em;
}
.th-flow-block:last-of-type { margin-bottom: 2em; }
.th-flow-block .th-feature-hero { margin-bottom: 2em; }

/* TIMELINE STEPS — vertical track of numbered cards */
.th-flow-steps {
  position: relative;
  padding-left: 70px;
  margin-top: 1em;
}
.th-flow-steps::before {
  content: "";
  position: absolute;
  top: 30px;
  bottom: 30px;
  left: 25px;
  width: 2px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--th-teal) 8%,
    var(--th-teal-deep) 50%,
    var(--th-teal) 92%,
    transparent 100%);
  opacity: 0.5;
  border-radius: 2px;
}
.th-flow-step {
  position: relative;
  background: #fff;
  border: 1px solid var(--th-border);
  border-radius: 12px;
  padding: 1.25em 1.5em;
  margin-bottom: 1em;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
  overflow: hidden;
}
.th-flow-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--th-teal) 0%, var(--th-teal-deep) 100%);
  transform: scaleY(0.3);
  transform-origin: top center;
  transition: transform 0.35s cubic-bezier(0.22,0.61,0.36,1);
}
.th-flow-step:hover {
  border-color: var(--th-teal);
  transform: translateY(-2px);
  box-shadow: var(--th-shadow-md);
  background: linear-gradient(160deg, #fff 0%, var(--th-teal-pale) 100%);
}
.th-flow-step:hover::before { transform: scaleY(1); }

.th-flow-step-badge {
  position: absolute;
  left: -56px;
  top: 1em;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--th-teal);
  color: var(--th-purple);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wb-font-heading);
  font-weight: 400;
  font-size: 0.9375rem;
  border: 3px solid #fff;
  box-shadow:
    0 0 0 2px var(--th-teal),
    0 4px 12px rgba(105,192,177,0.35);
  z-index: 2;
}
.th-flow-step h4 {
  font-family: var(--wb-font-heading);
  font-weight: 400;
  font-size: 1.125rem;
  margin: 0 0 0.4em;
  color: var(--th-teal-deep);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.th-flow-step p {
  font-size: 0.9375rem;
  color: var(--th-text-muted);
  margin: 0;
  line-height: 1.55;
}
.th-flow-step p strong { color: var(--th-purple); font-weight: 700; }
.th-flow-step + .th-flow-step { margin-top: 0; }

/* Dark-section variant — when the timeline lives inside a .wb-dark
   section (e.g. the pricing page's "How We Quote") the cards need to
   read as dark tinted panels, not stark white. */
.wb-dark .th-flow-step {
  background: linear-gradient(160deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.01) 100%);
  border-color: rgba(255,255,255,0.10);
}
.wb-dark .th-flow-step:hover {
  background: linear-gradient(160deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
  border-color: rgba(105,192,177,0.45);
  box-shadow: 0 10px 22px rgba(0,0,0,0.30);
}
.wb-dark .th-flow-step h4 {
  color: var(--th-teal) !important;
}
.wb-dark .th-flow-step p {
  color: rgba(255,255,255,0.72) !important;
}
.wb-dark .th-flow-step p strong { color: #fff !important; }
.wb-dark .th-flow-step-badge {
  border-color: var(--th-purple-deep);
  box-shadow:
    0 0 0 2px var(--th-teal),
    0 4px 14px rgba(105,192,177,0.45);
}

@media (max-width: 700px) {
  .th-flow-steps { padding-left: 56px; }
  .th-flow-steps::before { left: 18px; }
  .th-flow-step-badge { left: -50px; width: 38px; height: 38px; font-size: 0.8125rem; }
}

/* ── AI SPOTLIGHT ── dedicated section explaining the matching engine.
   Big centred dark panel similar to converge-engine but as a hero
   section in its own right, with surrounding context cards below. */
.th-ai-spotlight {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1em;
}
.th-ai-spotlight-panel {
  position: relative;
  text-align: center;
  padding: 3em 2em;
  border-radius: 22px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 0%, rgba(105,192,177,0.30), transparent 60%),
    radial-gradient(circle at 50% 100%, rgba(105,192,177,0.18), transparent 55%),
    linear-gradient(160deg, #4A2C42 0%, var(--th-purple) 55%, var(--th-purple-deep) 100%);
  border: 1px solid rgba(105,192,177,0.40);
  box-shadow:
    0 0 0 1px rgba(105,192,177,0.15),
    0 24px 60px rgba(53,31,47,0.32),
    inset 0 0 80px rgba(105,192,177,0.10);
  overflow: hidden;
}
.th-ai-spotlight-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(105,192,177,0.32) 1px, transparent 1.5px);
  background-size: 16px 16px;
  opacity: 0.30;
  mask-image: radial-gradient(circle at 50% 50%, #000 25%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 25%, transparent 80%);
  pointer-events: none;
}
.th-ai-spotlight-icon {
  width: 92px;
  height: 92px;
  border-radius: 22px;
  background: var(--th-teal);
  color: var(--th-purple);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.25rem;
  margin: 0 auto 1.25em;
  position: relative;
  z-index: 1;
  box-shadow:
    0 0 0 6px rgba(105,192,177,0.18),
    0 10px 32px rgba(105,192,177,0.45),
    inset 0 0 20px rgba(255,255,255,0.18);
  animation: th-engine-pulse 2.6s ease-in-out infinite;
}
.th-ai-spotlight-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--th-teal);
  text-transform: uppercase;
  margin-bottom: 0.6em;
  position: relative;
  z-index: 1;
}
.th-ai-spotlight-tag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--th-teal);
  box-shadow: 0 0 8px rgba(105,192,177,0.7);
  animation: th-pulse 2.4s ease-in-out infinite;
}
.th-ai-spotlight-panel h3 {
  font-family: var(--wb-font-heading);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0 0 0.65em;
  color: var(--th-teal);
  line-height: 1.1;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
}
.th-ai-spotlight-panel > p {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  color: rgba(255,255,255,0.78);
  margin: 0 auto;
  line-height: 1.55;
  max-width: 36em;
  position: relative;
  z-index: 1;
}
.th-ai-spotlight-panel > p em {
  font-style: normal;
  color: var(--th-teal);
  font-weight: 600;
}
/* Three small "what it does" pills beneath the main copy */
.th-ai-spotlight-pills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85em;
  max-width: 720px;
  margin: 2em auto 0;
  position: relative;
  z-index: 1;
}
.th-ai-spotlight-pill {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(105,192,177,0.30);
  border-radius: 12px;
  padding: 0.85em 0.75em;
  font-family: var(--wb-font-heading);
  font-weight: 400;
  font-size: 0.9375rem;
  color: #fff;
  text-align: center;
  letter-spacing: -0.005em;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.th-ai-spotlight-pill:hover {
  background: rgba(105,192,177,0.15);
  border-color: var(--th-teal);
}
.th-ai-spotlight-pill span {
  display: block;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.65rem;
  color: var(--th-teal);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.3em;
}
@media (max-width: 700px) {
  .th-ai-spotlight-pills { grid-template-columns: 1fr; max-width: 360px; }
  .th-ai-spotlight-panel { padding: 2.25em 1.5em; }
}

/* ── INFRA CARDS ── techy treatment for the "behind the scenes" grid on
   /how-it-works/. Smaller than feature cards but visually consistent. */
.th-infra-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1em;
  max-width: 1100px;
  margin: 2.5em auto 0;
}
.th-infra-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--th-border);
  border-radius: 12px;
  padding: 1.5em 1.25em 1.4em;
  text-align: left;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}
.th-infra-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--th-teal), var(--th-teal-deep));
  transform: scaleX(0.35);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.22,0.61,0.36,1);
}
.th-infra-card:hover {
  border-color: var(--th-teal);
  transform: translateY(-2px);
  box-shadow: var(--th-shadow-md);
}
.th-infra-card:hover::before { transform: scaleX(1); }
.th-infra-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--th-teal-pale);
  color: var(--th-teal-deep);
  font-size: 1.125rem;
  margin-bottom: 0.85em;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.th-infra-card:hover .th-infra-card-icon {
  background: var(--th-teal);
  color: #fff;
}
.th-infra-card h3 {
  font-family: var(--wb-font-heading);
  font-weight: 400;
  font-size: 1rem;
  color: var(--th-teal-deep);
  margin: 0 0 0.35em;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.th-infra-card p {
  font-size: 0.875rem;
  color: var(--th-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* ── HOSTING SPOTLIGHT ── used on /compliance/ to introduce the OVHcloud
   hosting provider as a hero band, with logo-style mark + 1-line claim. */
.th-hosting-spotlight {
  position: relative;
  max-width: 1100px;
  margin: 2.5em auto 0;
  border-radius: 18px;
  padding: 2em 2.25em;
  color: #fff;
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: center;
  gap: 1.75em;
  background:
    radial-gradient(circle at 100% 0%, rgba(105,192,177,0.24), transparent 55%),
    linear-gradient(155deg, #3F2538 0%, var(--th-purple) 55%, var(--th-purple-deep) 100%);
  border: 1px solid rgba(105,192,177,0.32);
  overflow: hidden;
  isolation: isolate;
}
.th-hosting-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(105,192,177,0.30) 1px, transparent 1.4px);
  background-size: 14px 14px;
  opacity: 0.30;
  mask-image: linear-gradient(150deg, #000 30%, transparent 90%);
  -webkit-mask-image: linear-gradient(150deg, #000 30%, transparent 90%);
  pointer-events: none;
}
.th-hosting-mark {
  position: relative;
  z-index: 1;
  width: 96px;
  height: 96px;
  border-radius: 22px;
  background: var(--th-teal);
  color: var(--th-purple);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  box-shadow:
    0 0 0 6px rgba(105,192,177,0.18),
    0 8px 24px rgba(105,192,177,0.30);
}
.th-hosting-meta { position: relative; z-index: 1; }
.th-hosting-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--th-teal);
  text-transform: uppercase;
  margin-bottom: 0.55em;
}
.th-hosting-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--th-teal);
  box-shadow: 0 0 8px rgba(105,192,177,0.7);
  animation: th-pulse 2.4s ease-in-out infinite;
}
.th-hosting-name {
  font-family: var(--wb-font-heading);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  margin: 0 0 0.3em;
  color: var(--th-teal);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.th-hosting-claim {
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.75);
  margin: 0;
  line-height: 1.5;
  max-width: 42em;
}
.th-hosting-region {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25em;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.th-hosting-region strong {
  color: var(--th-teal);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0;
  font-family: var(--wb-font-heading);
}
@media (max-width: 700px) {
  .th-hosting-spotlight {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 1.75em 1.5em;
  }
  .th-hosting-mark { margin: 0 auto; width: 72px; height: 72px; font-size: 1.875rem; border-radius: 18px; }
  .th-hosting-tag { justify-content: center; }
  .th-hosting-region { align-items: center; }
}

/* ── CERT GRID ── ISO / SOC / HDS certifications grid */
.th-cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85em;
  max-width: 1100px;
  margin: 1.75em auto 0;
}
.th-cert-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--th-border);
  border-radius: 12px;
  padding: 1.25em 1.1em 1.1em;
  text-align: center;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.th-cert-card:hover {
  border-color: var(--th-teal);
  transform: translateY(-2px);
  box-shadow: var(--th-shadow-md);
}
.th-cert-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--th-teal-pale);
  color: var(--th-teal-deep);
  font-size: 1.25rem;
  margin: 0 auto 0.85em;
  border: 2px solid var(--th-teal-soft);
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.th-cert-card:hover .th-cert-card-badge {
  background: var(--th-teal);
  color: #fff;
  border-color: var(--th-teal);
}
.th-cert-card-name {
  display: block;
  font-family: var(--wb-font-heading);
  font-weight: 400;
  font-size: 1rem;
  color: var(--th-teal-deep);
  margin: 0 0 0.25em;
  letter-spacing: -0.005em;
}
.th-cert-card-desc {
  font-size: 0.8125rem;
  color: var(--th-text-muted);
  margin: 0;
  line-height: 1.4;
}

/* ── PRICING TIERS ── three-card pricing grid for /pricing/. The middle
   tier is highlighted as "most popular" with a brighter teal accent and a
   slight lift in elevation. */
.th-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25em;
  max-width: 1100px;
  margin: 3em auto 0;
  align-items: stretch;
}
.th-pricing-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--th-border);
  border-radius: 18px;
  padding: 2em 1.75em 1.75em;
  text-align: left;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}
.th-pricing-tier::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--th-teal), var(--th-teal-deep));
  transform: scaleX(0.3);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.22,0.61,0.36,1);
}
.th-pricing-tier:hover {
  border-color: var(--th-teal);
  transform: translateY(-3px);
  box-shadow: var(--th-shadow-md);
}
.th-pricing-tier:hover::before { transform: scaleX(1); }

.th-pricing-tier--featured {
  background: linear-gradient(160deg, var(--th-teal-pale) 0%, #fff 100%);
  border: 2px solid var(--th-teal);
  transform: translateY(-6px);
  box-shadow: var(--th-shadow-lg);
}
.th-pricing-tier--featured::before { transform: scaleX(1); height: 4px; }
.th-pricing-tier--featured:hover { transform: translateY(-9px); }

.th-pricing-badge {
  position: absolute;
  top: 1em;
  right: 1em;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--th-purple);
  background: var(--th-teal);
  padding: 0.4em 0.7em;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(105,192,177,0.35);
}

.th-pricing-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--th-teal-deep);
  text-transform: uppercase;
  margin-bottom: 0.65em;
}
.th-pricing-tier h3 {
  font-family: var(--wb-font-heading);
  font-weight: 400;
  font-size: 1.625rem;
  margin: 0 0 0.4em;
  color: var(--th-teal-deep);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.th-pricing-tier .th-pricing-price {
  font-family: var(--wb-font-heading);
  font-weight: 400;
  font-size: 2.5rem;
  color: var(--th-purple);
  margin: 0.2em 0 0.1em;
  line-height: 1;
  letter-spacing: -0.02em;
}
.th-pricing-tier .th-pricing-price span {
  font-size: 0.9375rem;
  color: var(--th-text-muted);
  font-family: var(--wb-font-body);
  font-weight: 400;
  margin-left: 0.25em;
}
.th-pricing-tier .th-pricing-summary {
  font-size: 0.9375rem;
  color: var(--th-text-muted);
  line-height: 1.55;
  margin: 0.4em 0 1.5em;
}
.th-pricing-tier ul {
  list-style: none;
  margin: 0 0 1.75em;
  padding: 0;
  flex: 1 1 auto;
}
.th-pricing-tier li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 0.65em;
  padding: 0.55em 0;
  font-size: 0.9375rem;
  color: var(--th-text-muted);
  line-height: 1.4;
  border-top: 1px solid rgba(105,192,177,0.20);
}
.th-pricing-tier li:first-child { border-top: none; padding-top: 0; }
.th-pricing-tier li::before {
  content: "\f00c"; /* fa-check */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--th-teal-deep);
  font-size: 0.8125rem;
  line-height: 1.4;
}
.th-pricing-tier .wb-btn {
  width: 100%;
  text-align: center;
  justify-content: center;
  margin-top: auto;
}
@media (max-width: 900px) {
  .th-pricing-grid { grid-template-columns: 1fr; }
  .th-pricing-tier--featured { transform: none; }
  .th-pricing-tier--featured:hover { transform: translateY(-3px); }
}

/* ── ASK THI ASSISTANT ── chat-style FAQ search at the bottom of /faq/.
   Client-side keyword search dressed up as a conversation. */
.th-ask {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  background:
    radial-gradient(circle at 100% 0%, rgba(105,192,177,0.22), transparent 60%),
    linear-gradient(160deg, #3F2538 0%, var(--th-purple) 55%, var(--th-purple-deep) 100%);
  border: 1px solid rgba(105,192,177,0.32);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(53,31,47,0.30);
  isolation: isolate;
}
.th-ask::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(105,192,177,0.30) 1px, transparent 1.4px);
  background-size: 16px 16px;
  opacity: 0.18;
  mask-image: linear-gradient(160deg, #000 30%, transparent 90%);
  -webkit-mask-image: linear-gradient(160deg, #000 30%, transparent 90%);
  pointer-events: none;
}
.th-ask-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.85em;
  padding: 1.1em 1.4em;
  border-bottom: 1px solid rgba(105,192,177,0.20);
  position: relative;
  z-index: 1;
}
.th-ask-header-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--th-teal);
  color: var(--th-purple);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: 0 0 0 4px rgba(105,192,177,0.18);
}
.th-ask-title {
  margin: 0;
  font-family: var(--wb-font-heading);
  font-weight: 400;
  font-size: 1.0625rem;
  color: #fff;
  letter-spacing: -0.005em;
}
.th-ask-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--th-teal);
  text-transform: uppercase;
}
.th-ask-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--th-teal);
  box-shadow: 0 0 8px rgba(105,192,177,0.7);
  animation: th-pulse 2.4s ease-in-out infinite;
}

.th-ask-conversation {
  position: relative;
  z-index: 1;
  min-height: 220px;
  max-height: 420px;
  overflow-y: auto;
  padding: 1.25em 1.4em;
  display: flex;
  flex-direction: column;
  gap: 0.9em;
}
.th-ask-msg { display: flex; max-width: 90%; }
.th-ask-msg--bot { align-self: flex-start; }
.th-ask-msg--user { align-self: flex-end; }
.th-ask-msg-bubble {
  padding: 0.85em 1.05em;
  border-radius: 14px;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.th-ask-msg--bot .th-ask-msg-bubble {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(105,192,177,0.25);
  color: rgba(255,255,255,0.92);
  border-bottom-left-radius: 4px;
}
.th-ask-msg--user .th-ask-msg-bubble {
  background: var(--th-teal);
  color: var(--th-purple);
  font-weight: 600;
  border-bottom-right-radius: 4px;
}
.th-ask-msg-bubble strong { color: var(--th-teal); font-weight: 600; }
.th-ask-msg--user .th-ask-msg-bubble strong { color: var(--th-purple); }
.th-ask-msg-bubble a {
  color: var(--th-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.th-ask-msg-bubble a:hover { color: #fff; }
.th-ask-msg-suggestions {
  display: flex;
  gap: 0.4em;
  flex-wrap: wrap;
  margin-top: 0.75em;
}
.th-ask-suggestion {
  background: rgba(105,192,177,0.12);
  color: var(--th-teal);
  border: 1px solid rgba(105,192,177,0.30);
  border-radius: 999px;
  padding: 0.35em 0.85em;
  font-size: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.th-ask-suggestion:hover {
  background: var(--th-teal);
  color: var(--th-purple);
}

.th-ask-form {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5em;
  padding: 1em 1.4em 1.25em;
  border-top: 1px solid rgba(105,192,177,0.20);
}
.th-ask-form input {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(105,192,177,0.30);
  border-radius: 10px;
  padding: 0.75em 1em;
  color: #fff;
  font-family: inherit;
  font-size: 0.9375rem;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.th-ask-form input::placeholder { color: rgba(255,255,255,0.45); }
.th-ask-form input:focus {
  outline: none;
  border-color: var(--th-teal);
  background: rgba(255,255,255,0.10);
}
.th-ask-form button {
  background: var(--th-teal);
  color: var(--th-purple);
  border: 0;
  border-radius: 10px;
  padding: 0 1.1em;
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, transform 0.2s ease;
  box-shadow: 0 4px 12px rgba(105,192,177,0.30);
}
.th-ask-form button:hover {
  background: #fff;
  transform: translateY(-1px);
}

/* ── CAROUSEL CONTROLS HIDDEN ── */
.wb-hero-dots,
.wb-hero-arrows { display: none; }

/* ─────────────────────────────────────────────────────────────────
   FEATURES — restructured 3-product layout (2026-07-13 restructure)
   ───────────────────────────────────────────────────────────────── */

/* Jump-anchor offset for pillars linking down to product sections.
   Scroll-margin-top compensates for the fixed header height. */
.th-anchor-offset {
  display: block;
  height: 0;
  visibility: hidden;
  scroll-margin-top: 120px;
}

/* Pillars-as-links: make the whole card clickable without introducing
   default anchor styling. Layout inherits from .th-pillar. */
.th-pillar--link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.th-pillar--link:hover,
.th-pillar--link:focus {
  text-decoration: none;
  color: inherit;
}
.th-pillar--link:focus-visible {
  outline: 3px solid var(--th-teal);
  outline-offset: 3px;
}
.th-pillar-jump {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--th-teal-deep);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: auto;
  padding-top: 0.4em;
  transition: gap 0.25s ease, color 0.25s ease;
}
.th-pillar--link:hover .th-pillar-jump {
  gap: 0.8em;
  color: var(--th-teal-darker);
}
.th-pillar--link:hover .th-pillar-jump i { transform: translateY(2px); }
.th-pillar-jump i { transition: transform 0.25s ease; }

/* Feature-stack — the vertical list of expandable feature-sections
   inside each product section on the features page. */
.th-feature-stack {
  max-width: 960px;
  margin: 0 auto;
  text-align: left;
}

/* Product hero image — large screenshot at the top of each product
   section on the features page. */
.th-product-hero {
  max-width: 1100px;
  margin: 2.5em auto 3.5em;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(53, 31, 47, 0.14),
              0 2px 6px rgba(53, 31, 47, 0.06);
  border: 1px solid rgba(53, 31, 47, 0.08);
  background: #fff;
}
.th-product-hero img {
  display: block;
  width: 100%;
  height: auto;
}

/* Screenshot placeholder — a branded box that clearly marks where a
   real product screenshot should be dropped in. Sized to match
   .th-product-hero so the swap is a straight replacement. */
.th-screenshot-placeholder {
  max-width: 1100px;
  margin: 2.5em auto 3.5em;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(105, 192, 177, 0.05) 0 12px,
      rgba(105, 192, 177, 0.09) 12px 24px
    ),
    linear-gradient(155deg, #F7FBFA 0%, #EAF5F2 100%);
  border: 2px dashed rgba(105, 192, 177, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2em;
  position: relative;
  overflow: hidden;
}
.th-screenshot-placeholder::before,
.th-screenshot-placeholder::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(105, 192, 177, 0.35);
  border-radius: 4px;
  pointer-events: none;
}
.th-screenshot-placeholder::before {
  top: 1.25em;
  left: 1.25em;
  width: 60px;
  height: 8px;
  background: rgba(105, 192, 177, 0.15);
  border-color: rgba(105, 192, 177, 0.25);
}
.th-screenshot-placeholder::after {
  bottom: 1.25em;
  right: 1.25em;
  width: 80px;
  height: 12px;
  background: rgba(105, 192, 177, 0.08);
  border-color: rgba(105, 192, 177, 0.25);
}
.th-screenshot-placeholder-inner {
  text-align: center;
  max-width: 480px;
  position: relative;
  z-index: 1;
}
.th-screenshot-placeholder-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--wb-font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--th-teal-darker);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(105, 192, 177, 0.4);
  border-radius: 999px;
  padding: 0.55em 1em;
  margin-bottom: 1.2em;
}
.th-screenshot-placeholder-inner strong {
  display: block;
  font-family: var(--wb-font-heading);
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  color: var(--th-purple);
  line-height: 1.15;
  margin-bottom: 0.5em;
  letter-spacing: -0.01em;
}
.th-screenshot-placeholder-inner p {
  font-size: 0.9375rem;
  color: var(--th-purple-soft);
  line-height: 1.5;
  margin: 0;
}

/* GDPR-callout — dark-theme trust panel used on the homepage and at
   the foot of the features page. Bridges to the /compliance/ page. */
.th-gdpr-callout {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2em;
  align-items: center;
  padding: 2.25em 2.5em;
  background:
    linear-gradient(155deg,
      rgba(105, 192, 177, 0.10) 0%,
      rgba(255, 255, 255, 0.02) 60%);
  border: 1px solid rgba(105, 192, 177, 0.32);
  border-radius: 22px;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.th-gdpr-callout::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(105, 192, 177, 0.35) 1px, transparent 1.3px);
  background-size: 18px 18px;
  opacity: 0.09;
  mask-image: linear-gradient(160deg, #000 10%, transparent 80%);
  -webkit-mask-image: linear-gradient(160deg, #000 10%, transparent 80%);
  pointer-events: none;
}
.th-gdpr-callout-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 18px;
  background: rgba(105, 192, 177, 0.16);
  border: 1px solid rgba(105, 192, 177, 0.45);
  color: var(--th-teal);
  font-size: 1.75rem;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.th-gdpr-callout-body {
  position: relative;
  z-index: 1;
}
.th-gdpr-callout-body .th-eyebrow {
  display: block;
  margin-bottom: 0.6em;
}
.th-gdpr-callout-body .th-headline {
  font-family: var(--wb-font-heading);
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  color: #fff;
  line-height: 1.2;
  margin: 0 0 0.7em;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.th-gdpr-callout-body .th-headline .th-accent { color: var(--th-teal); }
.th-gdpr-callout-body p {
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--wb-font-body);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 0 1.4em;
}
.th-gdpr-callout-body .wb-btn-outline {
  color: #fff;
  border-color: rgba(105, 192, 177, 0.5);
}
.th-gdpr-callout-body .wb-btn-outline:hover {
  color: var(--th-purple);
  background: var(--th-teal);
  border-color: var(--th-teal);
}

@media (max-width: 720px) {
  .th-gdpr-callout {
    grid-template-columns: 1fr;
    gap: 1.25em;
    padding: 1.75em 1.5em;
    text-align: center;
  }
  .th-gdpr-callout-icon { margin: 0 auto; }
  .th-screenshot-placeholder {
    margin: 2em auto 2.5em;
    padding: 1.5em;
    aspect-ratio: 4 / 3;
  }
  .th-product-hero { margin: 2em auto 2.5em; border-radius: 14px; }
}

/* ═════════════════════════════════════════════════════════════════
   PRODUCT SUB-PAGES — full premium build (2026-07-13 v2)
   /features/ hub + 3 sub-pages (TMS / Careers Page / Candidate Portal)
   ═════════════════════════════════════════════════════════════════ */

/* ─── HUB: Product Trio (three big product cards) ─────────────── */
.th-product-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75em;
  max-width: 1300px;
  margin: 3.5em auto 0;
  text-align: left;
}
.th-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  background: linear-gradient(155deg, #fff 0%, #FBFCFC 100%);
  border: 1px solid rgba(53, 31, 47, 0.08);
  border-radius: 22px;
  padding: 1.5em 1.5em 1.75em;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.4s ease,
              border-color 0.4s ease;
  box-shadow: 0 6px 24px rgba(53, 31, 47, 0.06);
}
.th-product-card:hover,
.th-product-card:focus-visible {
  transform: translateY(-6px);
  border-color: var(--th-teal-soft);
  box-shadow: 0 24px 60px rgba(53, 31, 47, 0.14);
  color: inherit;
  text-decoration: none;
}
.th-product-card-visual {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: 14px;
  background: linear-gradient(155deg, var(--th-teal-pale) 0%, #F7FBFA 60%, #FFFFFF 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 1em;
  border: 1px solid rgba(53, 31, 47, 0.06);
}
.th-product-card-halo {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 30% 30%,
    rgba(105, 192, 177, 0.22) 0%,
    rgba(105, 192, 177, 0) 55%);
  pointer-events: none;
  transition: opacity 0.4s ease;
  opacity: 0.7;
}
.th-product-card:hover .th-product-card-halo { opacity: 1; }
.th-product-card-tag {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--th-teal-darker);
}
.th-product-card-title {
  font-family: var(--wb-font-heading);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--th-purple);
  margin: 0.4em 0 0.5em;
  line-height: 1.15;
  letter-spacing: -0.005em;
}
.th-product-card-desc {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--th-text-muted);
  margin: 0 0 1.1em;
}
.th-product-card-jump {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  color: var(--th-teal-darker);
  font-family: var(--wb-font-body);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: gap 0.25s ease;
  margin-top: auto;
}
.th-product-card:hover .th-product-card-jump { gap: 0.9em; }

/* Product card visuals — mini components */
.th-mini-recruiter--card {
  transform: scale(0.85);
  transform-origin: center;
  box-shadow: 0 16px 40px rgba(53, 31, 47, 0.12);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  width: 78%;
  max-width: 240px;
  border: 1px solid rgba(53, 31, 47, 0.06);
  position: relative;
  z-index: 1;
}
.th-mini-browser {
  width: 92%;
  max-width: 340px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 16px 44px rgba(53, 31, 47, 0.14);
  border: 1px solid rgba(53, 31, 47, 0.08);
  position: relative;
  z-index: 1;
}
.th-mini-browser-chrome {
  display: flex;
  align-items: center;
  gap: 0.65em;
  background: linear-gradient(180deg, #F7F6F7 0%, #EEEDEF 100%);
  padding: 0.55em 0.85em;
  border-bottom: 1px solid rgba(53, 31, 47, 0.08);
}
.th-mini-browser-dots {
  display: inline-flex;
  gap: 0.35em;
}
.th-mini-browser-dots span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #D9D6D9;
}
.th-mini-browser-dots span:nth-child(1) { background: #F98978; }
.th-mini-browser-dots span:nth-child(2) { background: #FFC940; }
.th-mini-browser-dots span:nth-child(3) { background: #4FD474; }
.th-mini-browser-url {
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-size: 0.6875rem;
  color: var(--th-purple-soft);
  letter-spacing: 0.02em;
}
.th-mini-browser img {
  display: block;
  width: 100%;
  height: auto;
}
.th-mini-phone {
  width: 42%;
  max-width: 170px;
  aspect-ratio: 9 / 19;
  background: #1a1220;
  border-radius: 22px;
  padding: 5px;
  box-shadow: 0 20px 44px rgba(53, 31, 47, 0.24),
              0 0 0 2px rgba(255, 255, 255, 0.04) inset;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.th-mini-phone-notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 12px;
  background: #1a1220;
  border-radius: 999px;
  z-index: 2;
}
.th-mini-phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 17px;
}

@media (max-width: 1080px) {
  .th-product-trio { grid-template-columns: 1fr; gap: 1.5em; max-width: 640px; }
  .th-product-card { flex-direction: row; align-items: stretch; padding: 1.25em; gap: 1.25em; }
  .th-product-card-visual { aspect-ratio: 1 / 1; flex-shrink: 0; width: 220px; }
  .th-product-card-body { flex: 1; display: flex; flex-direction: column; }
}
@media (max-width: 640px) {
  .th-product-card { flex-direction: column; }
  .th-product-card-visual { width: 100%; aspect-ratio: 16 / 10; }
}

/* ─── HUB: How they connect (horizontal flow) ─────────────────── */
.th-connect-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  max-width: 1200px;
  margin: 3em auto 0;
  flex-wrap: nowrap;
}
.th-connect-node {
  flex: 1;
  min-width: 0;
  padding: 1.5em 1em;
  background: linear-gradient(155deg,
    rgba(255, 255, 255, 0.055) 0%,
    rgba(255, 255, 255, 0.015) 100%);
  border: 1px solid rgba(105, 192, 177, 0.28);
  border-radius: 16px;
  text-align: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  position: relative;
  overflow: hidden;
}
.th-connect-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(105, 192, 177, 0.16);
  border: 1px solid rgba(105, 192, 177, 0.4);
  color: var(--th-teal);
  font-size: 1.25rem;
  margin-bottom: 0.9em;
}
.th-connect-label {
  display: block;
  font-family: var(--wb-font-heading);
  font-size: 0.875rem;
  color: #fff;
  letter-spacing: 0.04em;
  margin-bottom: 0.4em;
}
.th-connect-node p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8125rem;
  margin: 0;
  font-family: var(--wb-font-body);
  line-height: 1.4;
}
.th-connect-arrow {
  color: var(--th-teal);
  font-size: 1rem;
  flex-shrink: 0;
  opacity: 0.7;
}
.th-connect-arrow--back { color: var(--th-teal-soft); }
.th-connect-node--terminal {
  border-color: rgba(105, 192, 177, 0.55);
  background: linear-gradient(155deg,
    rgba(105, 192, 177, 0.09) 0%,
    rgba(105, 192, 177, 0.02) 100%);
}
@media (max-width: 1000px) {
  .th-connect-flow { flex-wrap: wrap; gap: 0.6em; }
  .th-connect-node { flex: 1 1 45%; padding: 1.25em 0.85em; }
  .th-connect-arrow { flex: 1 1 100%; text-align: center; padding: 0.25em 0; }
}
@media (max-width: 560px) {
  .th-connect-node { flex: 1 1 100%; }
}

/* ─── SUB-PAGE HERO — shared frame ─────────────────────────────── */
.th-product-hero-block {
  position: relative;
  padding: clamp(4em, 8vw, 7em) 1.5em clamp(4em, 7vw, 6em);
  overflow: hidden;
  background: var(--th-purple);
  color: #fff;
}
.th-product-hero-block--dark {
  background: linear-gradient(155deg, #2A1626 0%, var(--th-purple) 55%, #1c0e17 100%);
}
.th-product-hero-block--portal {
  background: linear-gradient(155deg, #2E1A29 0%, var(--th-purple) 45%, #1c0e17 100%);
}
.th-product-hero-block--careers {
  background: linear-gradient(160deg, #EAF5F2 0%, #F7FBFA 45%, #FFFFFF 100%);
  color: var(--th-purple);
}
.th-product-hero-bg-glow {
  position: absolute;
  top: -20%;
  right: -15%;
  width: 80%;
  height: 130%;
  background: radial-gradient(ellipse at center,
    rgba(105, 192, 177, 0.24) 0%,
    rgba(105, 192, 177, 0.10) 30%,
    rgba(105, 192, 177, 0) 65%);
  pointer-events: none;
  filter: blur(20px);
}
.th-product-hero-bg-glow--portal {
  top: -10%;
  right: -10%;
  width: 65%;
  height: 90%;
}
.th-product-hero-bg-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(105, 192, 177, 0.25) 1px, transparent 1.3px);
  background-size: 22px 22px;
  opacity: 0.10;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 80%);
  pointer-events: none;
}
.th-product-hero-bg-wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(105, 192, 177, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 85% 70%, rgba(53, 31, 47, 0.08) 0%, transparent 40%);
  pointer-events: none;
}
.th-product-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 3em;
  align-items: center;
}
.th-product-hero-inner--stack {
  grid-template-columns: 1fr;
  gap: 3em;
  max-width: 1100px;
}
.th-product-hero-copy--centred {
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}
.th-product-hero-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--th-teal);
  background: rgba(105, 192, 177, 0.10);
  border: 1px solid rgba(105, 192, 177, 0.35);
  border-radius: 999px;
  padding: 0.5em 1.1em;
  margin-bottom: 1.5em;
}
.th-product-hero-eyebrow--dark {
  color: var(--th-teal-darker);
  background: rgba(105, 192, 177, 0.14);
  border-color: rgba(105, 192, 177, 0.4);
}
.th-product-hero-title {
  font-family: var(--wb-font-heading);
  font-size: clamp(2.5rem, 5.5vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 0.7em;
  color: #fff;
  font-weight: 400;
}
.th-product-hero-title--dark { color: var(--th-purple); }
.th-product-hero-title .th-accent { color: var(--th-teal); }
.th-product-hero-lead {
  font-family: var(--wb-font-body);
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.84);
  margin: 0 0 2em;
  max-width: 620px;
}
.th-product-hero-lead--dark { color: var(--th-purple-soft); }
.th-product-hero-copy--centred .th-product-hero-lead {
  margin-left: auto;
  margin-right: auto;
}
.th-product-hero-cta {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
}
.th-product-hero-copy--centred .th-product-hero-cta { justify-content: center; }
.th-product-hero-bullets {
  list-style: none;
  padding: 0;
  margin: 2.25em 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}
.th-product-hero-bullets li {
  display: flex;
  align-items: center;
  gap: 0.75em;
  font-family: var(--wb-font-body);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.9375rem;
}
.th-product-hero-bullets li i {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(105, 192, 177, 0.14);
  border: 1px solid rgba(105, 192, 177, 0.35);
  color: var(--th-teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  flex-shrink: 0;
}

@media (max-width: 960px) {
  .th-product-hero-inner {
    grid-template-columns: 1fr;
    gap: 3em;
  }
  .th-product-hero-lead { max-width: 100%; }
}

/* ─── TMS Dashboard Mock ──────────────────────────────────────── */
.th-tms-mock {
  position: relative;
  background: linear-gradient(160deg, #F9FAFB 0%, #F0F4F6 100%);
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 148px 1fr;
  min-height: 480px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4),
              0 8px 24px rgba(105, 192, 177, 0.15),
              0 0 0 1px rgba(105, 192, 177, 0.15);
  transform: perspective(1600px) rotateY(-3deg) rotateX(1deg);
  transform-origin: left center;
  color: #1a1220;
  font-size: 12px;
}
.th-tms-mock-sidebar {
  background: linear-gradient(180deg, #351F2F 0%, #220B1B 100%);
  color: #fff;
  padding: 1em 0.85em;
}
.th-tms-mock-sidebar .th-mini-recruiter-brand {
  color: #fff;
  font-family: var(--wb-font-heading);
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
  padding: 0.5em 0.4em 0.85em;
  margin-bottom: 0.85em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  line-height: 1.15;
}
.th-tms-mock-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15em;
}
.th-tms-mock-nav li {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.55em 0.65em;
  border-radius: 7px;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--wb-font-body);
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: default;
}
.th-tms-mock-nav li i {
  width: 12px;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.45);
}
.th-tms-mock-nav li.is-active {
  background: rgba(105, 192, 177, 0.18);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--th-teal);
}
.th-tms-mock-nav li.is-active i { color: var(--th-teal); }
.th-tms-mock-body { padding: 1em 1.15em; display: flex; flex-direction: column; gap: 0.9em; }
.th-tms-mock-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.65em;
  border-bottom: 1px solid rgba(53, 31, 47, 0.08);
  font-size: 0.7rem;
}
.th-tms-mock-crumb {
  color: var(--th-purple-soft);
  font-family: var(--wb-font-body);
  font-weight: 500;
}
.th-tms-mock-crumb i {
  font-size: 0.6rem;
  margin: 0 0.4em;
  color: rgba(53, 31, 47, 0.3);
}
.th-tms-mock-user {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  color: var(--th-purple-soft);
}
.th-tms-mock-user i { font-size: 0.75rem; }
.th-tms-mock-avatar {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--th-teal);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.th-tms-mock-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6em;
}
.th-tms-mock-kpi {
  background: #fff;
  border: 1px solid rgba(53, 31, 47, 0.06);
  border-radius: 9px;
  padding: 0.65em 0.75em;
  box-shadow: 0 2px 6px rgba(53, 31, 47, 0.03);
  min-width: 0;
}
.th-tms-mock-kpi-label {
  display: block;
  font-size: 0.6rem;
  color: var(--th-purple-soft);
  font-family: var(--wb-font-body);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 0.3em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.th-tms-mock-kpi-value {
  display: block;
  font-family: var(--wb-font-heading);
  font-size: 1.5rem;
  color: var(--th-purple);
  line-height: 1;
  letter-spacing: -0.02em;
}
.th-tms-mock-kpi-delta {
  display: inline-block;
  margin-top: 0.35em;
  font-size: 0.55rem;
  color: var(--th-purple-soft);
  font-family: var(--wb-font-body);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.th-tms-mock-kpi-delta--up { color: var(--th-teal-darker); }
.th-tms-mock-split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0.65em;
  flex: 1;
}
.th-tms-mock-list,
.th-tms-mock-spotlight {
  background: #fff;
  border: 1px solid rgba(53, 31, 47, 0.06);
  border-radius: 9px;
  box-shadow: 0 2px 6px rgba(53, 31, 47, 0.03);
  overflow: hidden;
  min-width: 0;
}
.th-tms-mock-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65em 0.8em;
  border-bottom: 1px solid rgba(53, 31, 47, 0.05);
  font-family: var(--wb-font-body);
  color: var(--th-purple);
  font-weight: 600;
  font-size: 0.7rem;
}
.th-tms-mock-list-count {
  color: var(--th-purple-soft);
  font-weight: 500;
  font-size: 0.6rem;
}
.th-tms-mock-list-items {
  list-style: none;
  padding: 0;
  margin: 0;
}
.th-tms-mock-list-items li {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 0.55em;
  align-items: center;
  padding: 0.55em 0.8em;
  border-bottom: 1px solid rgba(53, 31, 47, 0.04);
  font-size: 0.6875rem;
}
.th-tms-mock-list-items li:last-child { border-bottom: none; }
.th-tms-mock-list-items li.is-selected {
  background: rgba(105, 192, 177, 0.06);
  box-shadow: inset 2px 0 0 var(--th-teal);
}
.th-tms-mock-score {
  width: 30px;
  height: 24px;
  background: rgba(105, 192, 177, 0.14);
  color: var(--th-teal-darker);
  font-family: var(--wb-font-heading);
  font-size: 0.75rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.02em;
}
.th-tms-mock-score--strong {
  background: rgba(79, 168, 154, 0.22);
  color: #2E6A5F;
}
.th-tms-mock-score--weak {
  background: rgba(220, 92, 92, 0.12);
  color: #B44646;
}
.th-tms-mock-cand {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  min-width: 0;
  color: var(--th-purple);
  font-weight: 600;
  font-size: 0.6875rem;
}
.th-tms-mock-cand em {
  font-style: normal;
  color: var(--th-purple-soft);
  font-weight: 400;
  font-size: 0.5875rem;
}
.th-tms-mock-tag {
  padding: 0.15em 0.55em;
  background: rgba(105, 192, 177, 0.14);
  color: var(--th-teal-darker);
  border-radius: 999px;
  font-family: var(--wb-font-body);
  font-weight: 600;
  font-size: 0.55rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.th-tms-mock-tag--weak {
  background: rgba(220, 92, 92, 0.12);
  color: #B44646;
}
.th-tms-mock-spotlight { padding: 0.8em; display: flex; flex-direction: column; gap: 0.6em; }
.th-tms-mock-spotlight-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65em;
  align-items: center;
}
.th-tms-mock-spotlight-score {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(105, 192, 177, 0.16);
  color: var(--th-teal-darker);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wb-font-heading);
  font-size: 0.9375rem;
  letter-spacing: -0.02em;
}
.th-tms-mock-spotlight-head strong {
  display: block;
  color: var(--th-purple);
  font-family: var(--wb-font-body);
  font-weight: 700;
  font-size: 0.75rem;
}
.th-tms-mock-spotlight-head em {
  display: block;
  font-style: normal;
  color: var(--th-purple-soft);
  font-size: 0.5875rem;
}
.th-tms-mock-spotlight-label {
  display: block;
  font-family: var(--wb-font-body);
  font-weight: 700;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--th-teal-darker);
  margin-top: 0.2em;
}
.th-tms-mock-spotlight-body p {
  font-family: var(--wb-font-body);
  color: var(--th-purple-soft);
  font-size: 0.6875rem;
  line-height: 1.4;
  margin: 0.35em 0 0.65em;
}
.th-tms-mock-spotlight-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
}
.th-tms-mock-spotlight-skills span {
  padding: 0.2em 0.55em;
  background: rgba(53, 31, 47, 0.06);
  color: var(--th-purple);
  border-radius: 6px;
  font-family: var(--wb-font-body);
  font-size: 0.5875rem;
  font-weight: 500;
}
.th-tms-mock-spotlight-actions {
  display: flex;
  gap: 0.35em;
  margin-top: auto;
  padding-top: 0.5em;
  border-top: 1px solid rgba(53, 31, 47, 0.05);
  flex-wrap: wrap;
}
.th-tms-mock-spotlight-actions span {
  padding: 0.35em 0.6em;
  border: 1px solid rgba(53, 31, 47, 0.15);
  color: var(--th-purple-soft);
  border-radius: 6px;
  font-family: var(--wb-font-body);
  font-size: 0.5875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.th-tms-mock-spotlight-actions span.is-primary {
  background: var(--th-purple);
  color: #fff;
  border-color: var(--th-purple);
}

@media (max-width: 960px) {
  .th-tms-mock {
    transform: none;
    min-height: auto;
  }
}
@media (max-width: 640px) {
  .th-tms-mock {
    grid-template-columns: 1fr;
    font-size: 11px;
  }
  .th-tms-mock-sidebar {
    display: none;
  }
  .th-tms-mock-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
  .th-tms-mock-split {
    grid-template-columns: 1fr;
  }
}

/* ─── HERO Browser (careers hero) ─────────────────────────────── */
.th-product-hero-visual--float { position: relative; }
.th-hero-browser {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(53, 31, 47, 0.22),
              0 8px 20px rgba(53, 31, 47, 0.08),
              0 0 0 1px rgba(53, 31, 47, 0.06);
  max-width: 1080px;
  margin: 0 auto;
  transform: perspective(2000px) rotateX(2deg);
  transform-origin: center top;
}
.th-hero-browser-chrome {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0.85em 1.15em;
  background: linear-gradient(180deg, #F7F6F7 0%, #EEEDEF 100%);
  border-bottom: 1px solid rgba(53, 31, 47, 0.08);
}
.th-hero-browser-nav {
  display: inline-flex;
  gap: 0.8em;
  color: rgba(53, 31, 47, 0.3);
  font-size: 0.75rem;
}
.th-hero-browser-dots {
  display: inline-flex;
  gap: 0.5em;
}
.th-hero-browser-dots span {
  width: 12px;
  height: 12px;
  border-radius: 999px;
}
.th-hero-browser-dots span:nth-child(1) { background: #F98978; }
.th-hero-browser-dots span:nth-child(2) { background: #FFC940; }
.th-hero-browser-dots span:nth-child(3) { background: #4FD474; }
.th-hero-browser-url {
  flex: 1;
  padding: 0.35em 0.85em;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(53, 31, 47, 0.08);
  border-radius: 999px;
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-size: 0.8125rem;
  color: var(--th-purple-soft);
  letter-spacing: 0.01em;
  text-align: center;
  max-width: 380px;
}
.th-hero-browser-url i {
  color: var(--th-teal-darker);
  margin-right: 0.4em;
  font-size: 0.75em;
}
.th-hero-browser-body img {
  display: block;
  width: 100%;
  height: auto;
}
.th-hero-annotation {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  padding: 0.65em 1.1em;
  background: #fff;
  color: var(--th-purple);
  border: 1px solid rgba(105, 192, 177, 0.35);
  border-radius: 999px;
  font-family: var(--wb-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  box-shadow: 0 12px 28px rgba(53, 31, 47, 0.14);
  z-index: 3;
}
.th-hero-annotation-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--th-teal);
  box-shadow: 0 0 0 4px rgba(105, 192, 177, 0.28);
  flex-shrink: 0;
}
.th-hero-annotation--tl { top: -0.9em; left: 4%; }
.th-hero-annotation--br { bottom: -0.9em; right: 4%; }

@media (max-width: 720px) {
  .th-hero-browser { transform: none; border-radius: 12px; }
  .th-hero-annotation { display: none; }
  .th-hero-browser-nav { display: none; }
}

/* ─── HERO Phones (portal hero) ───────────────────────────────── */
.th-product-hero-visual--phones {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 540px;
}
.th-hero-phone {
  position: absolute;
  width: 260px;
  aspect-ratio: 9 / 19;
  background: linear-gradient(160deg, #241521 0%, #150913 100%);
  border-radius: 34px;
  padding: 8px;
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.5),
    0 0 0 2px rgba(255, 255, 255, 0.04) inset,
    0 -2px 6px rgba(105, 192, 177, 0.12) inset;
  overflow: hidden;
}
.th-hero-phone-notch {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 20px;
  background: #150913;
  border-radius: 999px;
  z-index: 3;
}
.th-hero-phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 26px;
  overflow: hidden;
  background: #1a1220;
  position: relative;
}
.th-hero-phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.th-hero-phone--back {
  transform: translate(-24%, -8%) rotate(-8deg);
  opacity: 0.85;
  filter: saturate(0.85);
}
.th-hero-phone--front {
  transform: translate(24%, 6%) rotate(6deg);
  z-index: 2;
}

@media (max-width: 960px) {
  .th-product-hero-visual--phones { min-height: 500px; }
  .th-hero-phone { width: 220px; }
}
@media (max-width: 600px) {
  .th-product-hero-visual--phones { min-height: 440px; }
  .th-hero-phone { width: 190px; }
  .th-hero-phone--back {
    transform: translate(-18%, -6%) rotate(-6deg);
  }
  .th-hero-phone--front {
    transform: translate(18%, 4%) rotate(4deg);
  }
}

/* ─── Value Grid — "What it does" 3-up ─────────────────────────── */
.th-value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5em;
  max-width: 1200px;
  margin: 3em auto 0;
  text-align: left;
}
.th-value-card {
  background: linear-gradient(155deg, #FBFCFC 0%, #F5F9F8 100%);
  border: 1px solid rgba(53, 31, 47, 0.06);
  border-radius: 18px;
  padding: 2em 1.75em;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  position: relative;
  overflow: hidden;
}
.th-value-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(105, 192, 177, 0.25) 1px, transparent 1.3px);
  background-size: 18px 18px;
  opacity: 0.08;
  mask-image: linear-gradient(160deg, #000 10%, transparent 70%);
  -webkit-mask-image: linear-gradient(160deg, #000 10%, transparent 70%);
  pointer-events: none;
}
.th-value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(53, 31, 47, 0.08);
  border-color: var(--th-teal-soft);
}
.th-value-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(105, 192, 177, 0.14);
  border: 1px solid rgba(105, 192, 177, 0.4);
  color: var(--th-teal-darker);
  font-size: 1.25rem;
  margin-bottom: 1.25em;
  position: relative;
  z-index: 1;
}
.th-value-card h3 {
  font-family: var(--wb-font-heading);
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--th-purple);
  line-height: 1.2;
  margin: 0 0 0.65em;
  letter-spacing: -0.005em;
  position: relative;
  z-index: 1;
}
.th-value-card p {
  color: var(--th-text-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: 0;
  position: relative;
  z-index: 1;
}
@media (max-width: 960px) {
  .th-value-grid { grid-template-columns: 1fr; gap: 1.25em; max-width: 620px; }
}

/* ─── Cross-Nav — bottom two-card panel ────────────────────────── */
.th-cross-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5em;
  max-width: 1100px;
  margin: 3em auto 0;
  text-align: left;
}
.th-cross-nav-card {
  display: flex;
  flex-direction: column;
  gap: 1.25em;
  padding: 1.75em 1.75em 2em;
  background: linear-gradient(155deg, #fff 0%, #FBFCFC 100%);
  border: 1px solid rgba(53, 31, 47, 0.08);
  border-radius: 20px;
  color: inherit;
  text-decoration: none;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  box-shadow: 0 6px 20px rgba(53, 31, 47, 0.06);
  position: relative;
  overflow: hidden;
}
.th-cross-nav-card:hover,
.th-cross-nav-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--th-teal-soft);
  box-shadow: 0 22px 50px rgba(53, 31, 47, 0.14);
  color: inherit;
  text-decoration: none;
}
.th-cross-nav-card-visual {
  aspect-ratio: 16 / 9;
  background: linear-gradient(155deg, var(--th-teal-pale) 0%, #F7FBFA 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em;
  border: 1px solid rgba(53, 31, 47, 0.04);
  overflow: hidden;
}
.th-cross-nav-card-tag {
  font-family: var(--wb-font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--th-teal-darker);
}
.th-cross-nav-card h3 {
  font-family: var(--wb-font-heading);
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--th-purple);
  margin: 0.35em 0 0.5em;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.th-cross-nav-card p {
  color: var(--th-text-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0 0 1em;
}
.th-cross-nav-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  color: var(--th-teal-darker);
  font-family: var(--wb-font-body);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: gap 0.25s ease;
  margin-top: auto;
}
.th-cross-nav-card:hover .th-cross-nav-card-cta { gap: 0.9em; }
@media (max-width: 800px) {
  .th-cross-nav { grid-template-columns: 1fr; max-width: 500px; }
}

/* Live-deployment badge — floats over the two-phones hero on the Candidate
   Portal sub-page, calls out that the screenshots are a real Right Fit
   Recruitment deployment of Talent Hub Intelligence. */
.th-hero-live-badge {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  padding: 0.75em 1.15em;
  background: #fff;
  border: 1px solid rgba(105, 192, 177, 0.35);
  border-radius: 999px;
  box-shadow: 0 16px 36px rgba(53, 31, 47, 0.16);
  z-index: 5;
  white-space: nowrap;
}
.th-hero-live-badge-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #4FD474;
  box-shadow: 0 0 0 4px rgba(79, 212, 116, 0.24);
  animation: th-live-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes th-live-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(79, 212, 116, 0.24); }
  50% { box-shadow: 0 0 0 8px rgba(79, 212, 116, 0.08); }
}
.th-hero-live-badge-body {
  display: flex;
  flex-direction: column;
  gap: 0.05em;
  text-align: left;
}
.th-hero-live-badge-body strong {
  font-family: var(--wb-font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--th-teal-darker);
}
.th-hero-live-badge-body em {
  font-style: normal;
  font-size: 0.8125rem;
  color: var(--th-purple-soft);
  font-weight: 500;
}
@media (max-width: 720px) {
  .th-hero-live-badge {
    position: static;
    transform: none;
    margin: 1.5em auto 0;
    white-space: normal;
    max-width: 92%;
  }
}

/* ═════════════════════════════════════════════════════════════════
   LIGHTER + WARMER — cream section variants (2026-07-13 v3)
   Lifts sections that were dark to a friendlier warm-neutral, without
   changing the brand palette. Includes light-mode variants for the
   components that lived on dark backgrounds.
   ═════════════════════════════════════════════════════════════════ */

/* Text colours on cream sections default to purple; no override needed
   since the dark-theme overrides are scoped to .wb-dark. */
.wb-cream .th-headline,
.wb-cream .wb-h1, .wb-cream .wb-h2,
.wb-cream h1, .wb-cream h2 { color: var(--th-purple); }
.wb-cream p, .wb-cream .wb-lead, .wb-cream .wb-subtitle { color: var(--th-purple-soft); }
.wb-cream .wb-lead strong { color: var(--th-purple); }
.wb-cream .th-eyebrow--lead { color: var(--th-teal-darker); }
.wb-cream .wb-divider { background: var(--th-teal); }

/* Delivers grid — cream variant. Turns the glass cards white with a
   soft teal-tinted border and a warm shadow. */
.th-delivers-grid--cream .th-delivers-item {
  background: linear-gradient(155deg, #FFFFFF 0%, #FDFBF7 100%);
  border: 1px solid rgba(105, 192, 177, 0.20);
  box-shadow: 0 8px 24px rgba(53, 31, 47, 0.05);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.th-delivers-grid--cream .th-delivers-item::before {
  color: var(--th-teal);
  opacity: 0.11;
}
.th-delivers-grid--cream .th-delivers-item::after {
  background-image: radial-gradient(rgba(105, 192, 177, 0.35) 1px, transparent 1.3px);
  opacity: 0.14;
}
.th-delivers-grid--cream .th-delivers-item:hover {
  transform: translateY(-4px);
  border-color: var(--th-teal-soft);
  background: linear-gradient(155deg, #FFFFFF 0%, #FBFBF7 100%);
  box-shadow: 0 22px 42px rgba(53, 31, 47, 0.09);
}
.th-delivers-grid--cream .th-delivers-item:hover::before {
  opacity: 0.18;
}
.th-delivers-grid--cream .th-delivers-item-icon {
  background: rgba(105, 192, 177, 0.14);
  border: 1px solid rgba(105, 192, 177, 0.35);
  color: var(--th-teal-darker);
}
.th-delivers-grid--cream .th-delivers-item:hover .th-delivers-item-icon {
  background: rgba(105, 192, 177, 0.22);
  border-color: var(--th-teal);
}
.th-delivers-grid--cream .th-delivers-item p {
  color: var(--th-text-muted);
}

/* Connect-flow — cream variant. Nodes become white with teal accent,
   arrows deepened to teal. */
.th-connect-flow--cream .th-connect-node {
  background: linear-gradient(155deg, #FFFFFF 0%, #FDFBF7 100%);
  border: 1px solid rgba(105, 192, 177, 0.22);
  box-shadow: 0 8px 22px rgba(53, 31, 47, 0.06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.th-connect-flow--cream .th-connect-icon {
  background: rgba(105, 192, 177, 0.16);
  border: 1px solid rgba(105, 192, 177, 0.4);
  color: var(--th-teal-darker);
}
.th-connect-flow--cream .th-connect-label {
  color: var(--th-purple);
}
.th-connect-flow--cream .th-connect-node p {
  color: var(--th-text-muted);
}
.th-connect-flow--cream .th-connect-arrow {
  color: var(--th-teal-darker);
  opacity: 0.85;
}
.th-connect-flow--cream .th-connect-arrow--back {
  color: var(--th-teal-deep);
}
.th-connect-flow--cream .th-connect-node--terminal {
  border-color: var(--th-teal-soft);
  background: linear-gradient(155deg, var(--th-teal-pale) 0%, #F5FBF9 100%);
}

/* Product hero — light portal variant. Same layered composition as the
   dark variant but on a warm-teal wash so the phones float rather than
   loom out of a dark chamber. */
.th-product-hero-block--portal-light {
  background:
    radial-gradient(circle at 12% 20%, rgba(105, 192, 177, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 82% 78%, rgba(105, 192, 177, 0.10) 0%, transparent 40%),
    linear-gradient(160deg, var(--th-teal-pale) 0%, #F7FBFA 40%, #FBF8F5 100%);
  color: var(--th-purple);
}
/* Bullet list — dark-text variant on light background. */
.th-product-hero-bullets--dark li {
  color: var(--th-purple);
}
.th-product-hero-bullets--dark li i {
  background: rgba(105, 192, 177, 0.16);
  border: 1px solid rgba(105, 192, 177, 0.42);
  color: var(--th-teal-darker);
}
/* When the outline button appears on a light hero, invert its colours
   to remain visible (default outline is white for dark heroes). */
.th-product-hero-block--portal-light .wb-btn-outline,
.th-product-hero-block--careers .wb-btn-outline {
  color: var(--th-purple);
  border-color: rgba(53, 31, 47, 0.35);
}
.th-product-hero-block--portal-light .wb-btn-outline:hover,
.th-product-hero-block--careers .wb-btn-outline:hover {
  color: var(--th-purple);
  background: rgba(105, 192, 177, 0.15);
  border-color: var(--th-teal);
}

/* Slightly warmer, rounder rhythm across friendly cards.
   Small radius bump + softer shadows — no colour change. */
.th-value-card,
.th-cross-nav-card,
.th-product-card,
.th-callout,
.th-audience-card { border-radius: 22px; }
.th-gdpr-callout { border-radius: 24px; }
.th-value-card { box-shadow: 0 4px 14px rgba(53, 31, 47, 0.04); }
.th-cross-nav-card { box-shadow: 0 4px 18px rgba(53, 31, 47, 0.05); }
.th-product-card { box-shadow: 0 4px 20px rgba(53, 31, 47, 0.05); }

/* ═════════════════════════════════════════════════════════════════
   HOMEPAGE v3 — split hero + bento + annotated screenshot
   (2026-07-13 warm/modern pass)
   ═════════════════════════════════════════════════════════════════ */

/* ─── Homepage Hero — split with floating product visuals ───────── */
.th-home-hero {
  position: relative;
  padding: clamp(4.5em, 8vw, 7em) 1.5em clamp(5em, 9vw, 8em);
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, rgba(105, 192, 177, 0.14) 0%, transparent 45%),
    radial-gradient(circle at 0% 100%, rgba(105, 192, 177, 0.08) 0%, transparent 40%),
    linear-gradient(160deg, #FDFBF7 0%, #FFFFFF 50%, var(--th-teal-pale) 100%);
  color: var(--th-purple);
}
.th-home-hero-bg-wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 25%, rgba(105, 192, 177, 0.18) 0%, transparent 40%),
    radial-gradient(circle at 15% 75%, rgba(105, 192, 177, 0.08) 0%, transparent 50%);
  pointer-events: none;
}
.th-home-hero-bg-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(105, 192, 177, 0.35) 1px, transparent 1.3px);
  background-size: 24px 24px;
  opacity: 0.14;
  mask-image: radial-gradient(circle at 75% 30%, #000 20%, transparent 65%);
  -webkit-mask-image: radial-gradient(circle at 75% 30%, #000 20%, transparent 65%);
  pointer-events: none;
}
.th-home-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 3.5em;
  align-items: center;
}
.th-home-hero-copy {
  max-width: 620px;
}
.th-home-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--th-teal-darker);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(105, 192, 177, 0.35);
  border-radius: 999px;
  padding: 0.55em 1.15em;
  margin-bottom: 1.75em;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 14px rgba(105, 192, 177, 0.12);
}
.th-home-hero-eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--th-teal);
  box-shadow: 0 0 0 4px rgba(105, 192, 177, 0.24);
  animation: th-pulse 2.4s ease-in-out infinite;
}
@keyframes th-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(105, 192, 177, 0.24); }
  50% { box-shadow: 0 0 0 6px rgba(105, 192, 177, 0.14); }
}
.th-home-hero-title {
  font-family: var(--wb-font-heading);
  font-size: clamp(2.5rem, 5.5vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--th-purple);
  margin: 0 0 0.9em;
  font-weight: 400;
}
.th-home-hero-title .th-accent { color: var(--th-teal); }
.th-home-hero-lead {
  font-family: var(--wb-font-body);
  font-size: clamp(1.0625rem, 1.55vw, 1.25rem);
  line-height: 1.55;
  color: var(--th-purple-soft);
  margin: 0 0 2em;
}
.th-home-hero-lead-accent { color: var(--th-teal-darker); font-weight: 600; }
.th-home-hero-cta {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
}
.th-home-hero-bullets {
  list-style: none;
  padding: 0;
  margin: 2em 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.4em;
}
.th-home-hero-bullets li {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  color: var(--th-purple);
  font-family: var(--wb-font-body);
  font-weight: 600;
  font-size: 0.9375rem;
}
.th-home-hero-bullets li i {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--th-teal);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  flex-shrink: 0;
}

/* Hero visual side — floating browser + phone + badge */
.th-home-hero-visual {
  position: relative;
  min-height: 480px;
  perspective: 1600px;
}
.th-home-hero-browser {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 40px 100px rgba(53, 31, 47, 0.20),
    0 8px 20px rgba(53, 31, 47, 0.08),
    0 0 0 1px rgba(53, 31, 47, 0.06);
  transform: rotateY(-4deg) rotateX(2deg) translateZ(0);
  transform-origin: right center;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 620px;
}
.th-home-hero-browser-chrome {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0.7em 1em;
  background: linear-gradient(180deg, #F7F6F7 0%, #EEEDEF 100%);
  border-bottom: 1px solid rgba(53, 31, 47, 0.08);
}
.th-home-hero-browser-dots {
  display: inline-flex;
  gap: 0.4em;
}
.th-home-hero-browser-dots span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}
.th-home-hero-browser-dots span:nth-child(1) { background: #F98978; }
.th-home-hero-browser-dots span:nth-child(2) { background: #FFC940; }
.th-home-hero-browser-dots span:nth-child(3) { background: #4FD474; }
.th-home-hero-browser-url {
  flex: 1;
  padding: 0.3em 0.85em;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(53, 31, 47, 0.08);
  border-radius: 999px;
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--th-purple-soft);
  text-align: center;
  max-width: 320px;
}
.th-home-hero-browser-url i {
  color: var(--th-teal-darker);
  margin-right: 0.35em;
  font-size: 0.7em;
}
.th-home-hero-browser img {
  display: block;
  width: 100%;
  height: auto;
}
.th-home-hero-phone {
  position: absolute;
  bottom: -3.5em;
  left: -3em;
  width: 175px;
  aspect-ratio: 9 / 19;
  background: linear-gradient(160deg, #241521 0%, #150913 100%);
  border-radius: 28px;
  padding: 7px;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.35),
    0 0 0 2px rgba(255, 255, 255, 0.04) inset;
  z-index: 3;
  transform: rotate(-6deg);
}
.th-home-hero-phone-notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 15px;
  background: #150913;
  border-radius: 999px;
  z-index: 2;
}
.th-home-hero-phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: #1a1220;
}
.th-home-hero-phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.th-home-hero-badge {
  position: absolute;
  top: -1.75em;
  right: -1em;
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  padding: 0.85em 1.15em;
  background: #fff;
  border-radius: 18px;
  box-shadow:
    0 20px 44px rgba(53, 31, 47, 0.16),
    0 0 0 1px rgba(105, 192, 177, 0.25);
  z-index: 4;
  transform: rotate(3deg);
}
.th-home-hero-badge-num {
  font-family: var(--wb-font-heading);
  font-size: 2rem;
  color: var(--th-teal-darker);
  line-height: 1;
  letter-spacing: -0.02em;
}
.th-home-hero-badge-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
}
.th-home-hero-badge-meta strong {
  font-family: var(--wb-font-body);
  font-size: 0.75rem;
  color: var(--th-purple);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.th-home-hero-badge-meta em {
  font-style: normal;
  font-size: 0.8125rem;
  color: var(--th-purple-soft);
}

@media (max-width: 960px) {
  .th-home-hero-inner { grid-template-columns: 1fr; gap: 3em; }
  .th-home-hero-visual { min-height: 380px; margin-top: 1em; }
  .th-home-hero-browser { transform: none; max-width: 100%; }
  .th-home-hero-phone { width: 130px; left: 8%; bottom: -2em; }
  .th-home-hero-badge { top: -1em; right: 6%; }
  .th-home-hero-badge-num { font-size: 1.5rem; }
}
@media (max-width: 560px) {
  .th-home-hero-phone { display: none; }
  .th-home-hero-badge { padding: 0.6em 0.9em; }
  .th-home-hero-badge-num { font-size: 1.35rem; }
}

/* ─── BENTO — "At a glance" section ────────────────────────────── */
.th-bento {
  display: grid;
  grid-template-columns: 1fr 1fr 0.9fr 0.75fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "brand   brand   phone stat1"
    "browser browser phone stat2";
  gap: 1.1em;
  max-width: 1300px;
  margin: 3.5em auto 0;
  text-align: left;
}
.th-bento-tile {
  background: #fff;
  border: 1px solid rgba(53, 31, 47, 0.07);
  border-radius: 22px;
  padding: 1.75em 1.5em;
  overflow: hidden;
  position: relative;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  box-shadow: 0 6px 22px rgba(53, 31, 47, 0.05);
}
.th-bento-tile[data-area="brand"]   { grid-area: brand; }
.th-bento-tile[data-area="phone"]   { grid-area: phone; }
.th-bento-tile[data-area="stat1"]   { grid-area: stat1; }
.th-bento-tile[data-area="stat2"]   { grid-area: stat2; }
.th-bento-tile[data-area="browser"] { grid-area: browser; }

/* Brand tile — big teal-tinted statement */
.th-bento-tile--brand {
  background:
    radial-gradient(circle at 100% 0%, rgba(105, 192, 177, 0.16) 0%, transparent 55%),
    linear-gradient(155deg, var(--th-teal-pale) 0%, #F7FBFA 55%, #FFFFFF 100%);
  border-color: rgba(105, 192, 177, 0.30);
  padding: 2.25em 2em;
  display: flex;
  flex-direction: column;
  gap: 0.85em;
}
.th-bento-tile--brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(105, 192, 177, 0.28) 1px, transparent 1.3px);
  background-size: 22px 22px;
  opacity: 0.14;
  mask-image: radial-gradient(circle at 100% 0%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 30%, transparent 75%);
  pointer-events: none;
}
.th-bento-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--th-teal-darker);
  position: relative;
  z-index: 1;
}
.th-bento-headline {
  font-family: var(--wb-font-heading);
  font-size: clamp(1.6rem, 3.2vw, 2.35rem);
  font-weight: 400;
  color: var(--th-purple);
  line-height: 1.05;
  margin: 0.15em 0 0.35em;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
}
.th-bento-desc {
  color: var(--th-purple-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: 0 0 0.85em;
  position: relative;
  z-index: 1;
}
.th-bento-taglist {
  list-style: none;
  padding: 0;
  margin: auto 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55em;
  position: relative;
  z-index: 1;
}
.th-bento-taglist li {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.4em 0.85em;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(105, 192, 177, 0.35);
  border-radius: 999px;
  color: var(--th-purple);
  font-family: var(--wb-font-body);
  font-weight: 600;
  font-size: 0.75rem;
}
.th-bento-taglist li i {
  color: var(--th-teal-darker);
  font-size: 0.75em;
}

/* Phone tile (tall) */
.th-bento-tile--phone {
  background: linear-gradient(160deg, #351F2F 0%, #220B1B 100%);
  border-color: rgba(53, 31, 47, 0.4);
  padding: 1.75em 1.25em 1.5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  color: #fff;
}
.th-bento-tile--phone::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(105, 192, 177, 0.18) 0%, transparent 55%);
  pointer-events: none;
}
.th-bento-phone {
  position: relative;
  z-index: 1;
  width: 175px;
  aspect-ratio: 9 / 19;
  background: linear-gradient(160deg, #241521 0%, #150913 100%);
  border-radius: 28px;
  padding: 7px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35), 0 0 0 2px rgba(255, 255, 255, 0.04) inset;
  margin-top: 0.5em;
}
.th-bento-phone-notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 15px;
  background: #150913;
  border-radius: 999px;
  z-index: 2;
}
.th-bento-phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: #1a1220;
}
.th-bento-phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.th-bento-phone-caption {
  text-align: center;
  color: #fff;
  position: relative;
  z-index: 1;
  margin-top: auto;
}
.th-bento-mini-tag {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--th-teal);
  margin-bottom: 0.3em;
}
.th-bento-phone-caption strong,
.th-bento-browser-caption strong {
  display: block;
  font-family: var(--wb-font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  margin-bottom: 0.15em;
}
.th-bento-phone-caption em,
.th-bento-browser-caption em {
  font-style: normal;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.72);
}

/* Stat tiles */
.th-bento-tile--stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(160deg, #FBFCFC 0%, #F5F9F8 100%);
  border-color: rgba(105, 192, 177, 0.22);
  padding: 1.75em;
}
.th-bento-tile--stat::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(105, 192, 177, 0.35) 1px, transparent 1.3px);
  background-size: 18px 18px;
  opacity: 0.1;
  mask-image: linear-gradient(160deg, #000 20%, transparent 80%);
  -webkit-mask-image: linear-gradient(160deg, #000 20%, transparent 80%);
  pointer-events: none;
}
.th-bento-stat-num {
  font-family: var(--wb-font-heading);
  font-size: clamp(3rem, 6vw, 4.5rem);
  color: var(--th-teal-darker);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: 0.15em;
  position: relative;
  z-index: 1;
}
.th-bento-stat-label {
  display: block;
  font-family: var(--wb-font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--th-purple);
  margin-bottom: 0.75em;
  position: relative;
  z-index: 1;
}
.th-bento-stat-desc {
  font-size: 0.8125rem;
  color: var(--th-text-muted);
  line-height: 1.5;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Browser tile */
.th-bento-tile--browser {
  background: linear-gradient(160deg, #FBFCFC 0%, #F5F9F8 100%);
  padding: 1.5em;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.th-bento-browser {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(53, 31, 47, 0.12);
  border: 1px solid rgba(53, 31, 47, 0.08);
  background: #fff;
}
.th-bento-browser-chrome {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.55em 0.85em;
  background: linear-gradient(180deg, #F7F6F7 0%, #EEEDEF 100%);
  border-bottom: 1px solid rgba(53, 31, 47, 0.08);
}
.th-bento-browser-dots { display: inline-flex; gap: 0.35em; }
.th-bento-browser-dots span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}
.th-bento-browser-dots span:nth-child(1) { background: #F98978; }
.th-bento-browser-dots span:nth-child(2) { background: #FFC940; }
.th-bento-browser-dots span:nth-child(3) { background: #4FD474; }
.th-bento-browser-url {
  flex: 1;
  padding: 0.2em 0.75em;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(53, 31, 47, 0.08);
  border-radius: 999px;
  font-family: ui-monospace, monospace;
  font-size: 0.6875rem;
  color: var(--th-purple-soft);
  text-align: center;
}
.th-bento-browser-url i {
  color: var(--th-teal-darker);
  margin-right: 0.3em;
  font-size: 0.85em;
}
.th-bento-browser img {
  display: block;
  width: 100%;
  height: auto;
}
.th-bento-browser-caption {
  color: var(--th-purple);
  padding: 0 0.25em;
}
.th-bento-browser-caption .th-bento-mini-tag {
  color: var(--th-teal-darker);
}
.th-bento-browser-caption em {
  color: var(--th-purple-soft);
}

/* Bento hover — subtle lift */
.th-bento-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(53, 31, 47, 0.08);
  border-color: var(--th-teal-soft);
}
.th-bento-tile--phone:hover { border-color: rgba(105, 192, 177, 0.55); }

@media (max-width: 1080px) {
  .th-bento {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand brand"
      "phone stat1"
      "browser browser"
      "stat2 phone";
  }
}
@media (max-width: 720px) {
  .th-bento {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "browser"
      "phone"
      "stat1"
      "stat2";
  }
  .th-bento-tile--phone { padding: 2em 1em 1.5em; }
}

/* ─── ANNOTATED SHOT — big screenshot with floating callout pills ── */
.th-annotated-shot {
  position: relative;
  max-width: 1200px;
  margin: 3em auto 0;
  padding: 3.5em 6em;
}
.th-annotated-shot-frame {
  position: relative;
}
.th-annotated-shot-browser {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 40px 100px rgba(53, 31, 47, 0.20),
    0 8px 20px rgba(53, 31, 47, 0.08),
    0 0 0 1px rgba(53, 31, 47, 0.06);
}
.th-annotated-shot-chrome {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0.85em 1.15em;
  background: linear-gradient(180deg, #F7F6F7 0%, #EEEDEF 100%);
  border-bottom: 1px solid rgba(53, 31, 47, 0.08);
}
.th-annotated-shot-dots { display: inline-flex; gap: 0.5em; }
.th-annotated-shot-dots span {
  width: 12px;
  height: 12px;
  border-radius: 999px;
}
.th-annotated-shot-dots span:nth-child(1) { background: #F98978; }
.th-annotated-shot-dots span:nth-child(2) { background: #FFC940; }
.th-annotated-shot-dots span:nth-child(3) { background: #4FD474; }
.th-annotated-shot-url {
  flex: 1;
  padding: 0.35em 0.85em;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(53, 31, 47, 0.08);
  border-radius: 999px;
  font-family: ui-monospace, monospace;
  font-size: 0.8125rem;
  color: var(--th-purple-soft);
  text-align: center;
  max-width: 320px;
}
.th-annotated-shot-url i {
  color: var(--th-teal-darker);
  margin-right: 0.4em;
  font-size: 0.75em;
}
.th-annotated-shot img {
  display: block;
  width: 100%;
  height: auto;
}
/* Callout pills — 4 positions around the browser */
.th-annotated-callout {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: 0.85em;
  background: #fff;
  border: 1px solid rgba(105, 192, 177, 0.32);
  border-radius: 16px;
  padding: 0.85em 1.1em 0.85em 0.85em;
  box-shadow: 0 16px 36px rgba(53, 31, 47, 0.14);
  max-width: 260px;
  z-index: 3;
  animation: th-callout-float 6s ease-in-out infinite;
}
@keyframes th-callout-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.th-annotated-callout--tl { top: -1.5em; left: -3em; animation-delay: 0s; }
.th-annotated-callout--tr { top: -1.5em; right: -3em; animation-delay: 1.5s; }
.th-annotated-callout--bl { bottom: -1.5em; left: -3em; animation-delay: 3s; }
.th-annotated-callout--br { bottom: -1.5em; right: -3em; animation-delay: 4.5s; }

.th-annotated-callout-num {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(105, 192, 177, 0.16);
  color: var(--th-teal-darker);
  font-family: var(--wb-font-heading);
  font-size: 0.9375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.th-annotated-callout-body {
  min-width: 0;
}
.th-annotated-callout-body strong {
  display: block;
  font-family: var(--wb-font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--th-purple);
  margin-bottom: 0.2em;
  line-height: 1.25;
}
.th-annotated-callout-body span {
  display: block;
  font-size: 0.75rem;
  color: var(--th-purple-soft);
  line-height: 1.35;
}

@media (max-width: 1080px) {
  .th-annotated-shot { padding: 3em 3em; }
  .th-annotated-callout { max-width: 220px; }
  .th-annotated-callout--tl { left: -1.5em; }
  .th-annotated-callout--tr { right: -1.5em; }
  .th-annotated-callout--bl { left: -1.5em; }
  .th-annotated-callout--br { right: -1.5em; }
}
@media (max-width: 720px) {
  .th-annotated-shot { padding: 1em 0; }
  .th-annotated-callout {
    position: static;
    max-width: 100%;
    margin-top: 0.75em;
    animation: none;
  }
  .th-annotated-shot-frame {
    display: flex;
    flex-direction: column;
  }
}

/* ─── AI Analysis Claim — small teal callout row above the two shots ──── */
.th-analysis-claim {
  display: flex;
  align-items: center;
  gap: 1em;
  max-width: 820px;
  margin: 2em auto 0.5em;
  padding: 1em 1.4em;
  background: linear-gradient(90deg, rgba(105, 192, 177, 0.14), rgba(105, 192, 177, 0.04));
  border-left: 3px solid var(--th-teal);
  border-radius: 12px;
  text-align: left;
}
.th-analysis-claim-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--th-teal);
  color: #fff;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.th-analysis-claim p {
  margin: 0;
  color: var(--th-purple);
  font-family: var(--wb-font-body);
  font-size: 1.0625rem;
  line-height: 1.5;
}
.th-analysis-claim p strong { color: var(--th-teal); font-weight: 700; }
@media (max-width: 720px) {
  .th-analysis-claim { flex-direction: column; align-items: flex-start; text-align: left; padding: 1em 1.2em; }
}

/* ─── Collapsed candidate card — for the "poor fit" summary strip ─────── */
.th-product-shot--collapsed .th-product-shot-body {
  padding-bottom: 1.75em;
}
.th-candidate-collapsed-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-top: 1em;
}
.th-candidate-collapsed-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35em 0.75em;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  background: rgba(53, 31, 47, 0.06);
  color: var(--th-purple);
}
.th-candidate-collapsed-tag--warn {
  background: rgba(220, 100, 80, 0.10);
  color: #B04A38;
}
.th-candidate-collapsed-note {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 1.25em 0 0;
  padding: 0.75em 1em;
  background: rgba(53, 31, 47, 0.035);
  border-radius: 8px;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--th-text-muted);
}
.th-candidate-collapsed-note i { color: var(--th-teal); font-style: normal; }

/* ─── Bento stat sampler — 18 modules chip list ───────────────────────── */
.th-bento-stat-sampler {
  list-style: none;
  padding: 0;
  margin: 1em 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
}
.th-bento-stat-sampler li {
  display: inline-flex;
  align-items: center;
  padding: 0.3em 0.7em;
  background: rgba(105, 192, 177, 0.12);
  color: var(--th-purple);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.th-bento-stat-sampler-more a {
  color: var(--th-teal);
  text-decoration: none;
  font-weight: 700;
}
.th-bento-stat-sampler-more { background: transparent; padding-left: 0.25em; padding-right: 0.25em; }
.th-bento-tile--stat-modules .th-bento-stat-desc { margin-bottom: 0.25em; }

/* ─── Portal Spotlight — dedicated homepage moment for the candidate portal ── */
.th-portal-spotlight {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 4em;
  align-items: center;
  max-width: 1220px;
  margin: 0 auto;
}
.th-portal-spotlight-copy .th-headline { margin-bottom: 0.5em; }
.th-portal-spotlight-copy .wb-divider { margin-left: 0; }
.th-portal-spotlight-copy .wb-lead { max-width: 560px; }
.th-portal-spotlight-copy > p { max-width: 560px; }
.th-portal-spotlight-tags {
  list-style: none;
  padding: 0;
  margin: 1.6em 0 2em;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6em 1.5em;
  max-width: 560px;
}
.th-portal-spotlight-tags li {
  display: flex;
  align-items: center;
  gap: 0.55em;
  color: var(--th-purple);
  font-family: var(--wb-font-body);
  font-weight: 600;
  font-size: 0.9375rem;
}
.th-portal-spotlight-tags li i { color: var(--th-teal); width: 1.2em; }
.th-portal-spotlight-visual {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.th-portal-spotlight-phone {
  position: absolute;
  width: 250px;
  aspect-ratio: 9 / 19;
  background: linear-gradient(160deg, #241521 0%, #150913 100%);
  border-radius: 32px;
  padding: 8px;
  box-shadow:
    0 40px 90px rgba(53, 31, 47, 0.28),
    0 0 0 2px rgba(255, 255, 255, 0.04) inset;
  overflow: hidden;
}
.th-portal-spotlight-phone-notch {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 68px;
  height: 20px;
  background: #150913;
  border-radius: 999px;
  z-index: 3;
}
.th-portal-spotlight-phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 26px;
  overflow: hidden;
  background: #1a1220;
  position: relative;
}
.th-portal-spotlight-phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.th-portal-spotlight-phone--back {
  transform: translate(-30%, -6%) rotate(-8deg);
  opacity: 0.9;
  filter: saturate(0.9);
}
.th-portal-spotlight-phone--front {
  transform: translate(28%, 8%) rotate(6deg);
  z-index: 2;
}
.th-portal-spotlight-badge {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  padding: 0.6em 1em;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(53, 31, 47, 0.18);
  z-index: 3;
}
.th-portal-spotlight-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2FCC71;
  box-shadow: 0 0 0 4px rgba(47, 204, 113, 0.18);
  flex-shrink: 0;
}
.th-portal-spotlight-badge-body { display: flex; flex-direction: column; line-height: 1.15; }
.th-portal-spotlight-badge-body strong {
  font-size: 0.75rem;
  color: var(--th-purple);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.th-portal-spotlight-badge-body em {
  font-style: normal;
  font-size: 0.75rem;
  color: var(--th-text-muted);
  font-weight: 500;
}
@media (max-width: 960px) {
  .th-portal-spotlight { grid-template-columns: 1fr; gap: 2em; }
  .th-portal-spotlight-visual { min-height: 480px; margin-top: 1em; }
  .th-portal-spotlight-phone { width: 210px; }
}
@media (max-width: 600px) {
  .th-portal-spotlight-visual { min-height: 420px; }
  .th-portal-spotlight-phone { width: 180px; }
  .th-portal-spotlight-phone--back { transform: translate(-24%, -4%) rotate(-6deg); }
  .th-portal-spotlight-phone--front { transform: translate(22%, 6%) rotate(5deg); }
  .th-portal-spotlight-tags { grid-template-columns: 1fr; }
}

/* ─── "Live example" attribution captions ─────────────────────────────── */
.th-home-hero-live-tag {
  position: absolute;
  bottom: -1.5em;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.5em 1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--wb-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--th-text-muted);
  letter-spacing: 0.01em;
  text-align: center;
}
.th-home-hero-live-tag-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2FCC71;
  box-shadow: 0 0 0 3px rgba(47, 204, 113, 0.18);
}
@media (max-width: 720px) {
  .th-home-hero-live-tag { position: static; margin-top: 1.5em; }
}

.th-annotated-shot-caption {
  max-width: 780px;
  margin: 1.5em auto 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--th-text-muted);
  font-style: italic;
}