/*
==================================================================
TIMETRAX — BEST HRMS SOFTWARE SYSTEM PAGE
Page-specific styles for best-hrms-software-system.html.
Loaded AFTER style.css and mega-menu.css. Reuses the shared design
tokens (flat brand-orange fills, glassmorphism) defined
in style.css :root — no new colors are introduced here.

All classes are prefixed .tt-hp- (HRMS Page) to stay isolated from the
landing-page component classes.
==================================================================
*/

/* --- REUSABLE DARK BAND ---
   Re-points the design tokens on the section itself (same technique as
   .tt-integrations-section in dark-sections.css), so every glass card and
   piece of text inside flips to the dark treatment for free. */
.tt-hp-dark {
  --tt-dark: #F2F3F6;
  --tt-dark-rgb: 242, 243, 246;
  --tt-dark-light: #C9CCD2;
  --tt-secondary: #E8E9EC;
  --tt-secondary-hover: #FFFFFF;
  --tt-muted: #A7ADB8;
  --tt-light: #22242A;
  --tt-border: rgba(255, 255, 255, 0.1);
  --tt-glass-bg: rgba(24, 25, 30, 0.55);
  --tt-glass-bg-soft: rgba(30, 32, 38, 0.72);
  --tt-glass-border: rgba(255, 255, 255, 0.09);
  --tt-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  background: #121317;
}

/* The Integrations band reuses the landing-page component, whose heading/copy
   carry hardcoded LIGHT-theme (dark) colors. dark-sections.css is not loaded on
   this page, so re-point them to light here for the dark band. */
.tt-hp-dark .tt-integrations-heading { color: #F0F1F4; }
.tt-hp-dark .tt-integrations-copy { color: #AEB4BE; }

/* --- SHARED SECTION FURNITURE --- */
.tt-hp-section {
  position: relative;
  overflow: hidden;
  padding-block: var(--tt-section-space);
}

.tt-hp-glow {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: none;
  pointer-events: none;
  z-index: 0;
}
.tt-hp-glow-a { top: -140px; left: -120px; }
.tt-hp-glow-b { bottom: -160px; right: -120px; background: none; }

.tt-hp-head {
  max-width: 780px;
  position: relative;
  z-index: 1;
}
.tt-hp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--tt-font-secondary);
  font-size: var(--tt-fs-body-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tt-primary);
  background: rgba(var(--tt-primary-rgb), 0.1);
  border: 1px solid rgba(var(--tt-primary-rgb), 0.22);
  padding: 0.4rem 0.95rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}
.tt-hp-title {
  font-family: var(--tt-font-secondary);
  font-weight: 700;
  font-size: var(--tt-fs-h2);
  line-height: 1.15;
  color: var(--tt-dark);
  margin-bottom: 0.9rem;
}
.tt-hp-title .tt-hp-accent {
  color: var(--tt-primary);
}
.tt-hp-lead {
  font-size: var(--tt-fs-body-lg);
  color: var(--tt-muted);
  line-height: 1.7;
  margin-bottom: 0;
}

/*==================================================================
  HERO
==================================================================*/
.tt-hp-hero {
  position: relative;
  overflow: hidden;
  /* 96px is the fixed header's clearance; --tt-fold-gap is the only breathing
     room on top of it. This was `--tt-section-space + 96px`, which put up to
     83px of empty band between the navbar and the h1 - see the token's note in
     style.css. padding-BOTTOM keeps the full section rhythm: that gap is
     between the hero and the section under it, which is a real separation. */
  padding-top: calc(96px + var(--tt-fold-gap));
  padding-bottom: var(--tt-section-space);
}
.tt-hp-hero-visual-wrap {
  position: relative;
}
.tt-hp-hero-visual {
  width: 100%;
  height: auto;
  border-radius: 20px;
  border: 1px solid var(--tt-glass-border);
  box-shadow: var(--tt-shadow-xl);
}
.tt-hp-hero-visual-glow {
  position: absolute;
  inset: -12% -8% -8% -8%;
  background: none;
  filter: blur(10px);
  z-index: 0;
  pointer-events: none;
}

/*==================================================================
  TRUST INDICATORS STRIP
==================================================================*/
.tt-hp-trust {
  position: relative;
  padding-block: var(--tt-section-space-tight);
  background: rgba(243, 244, 246, 0.85);
}
.tt-hp-trust-lead {
  font-family: var(--tt-font-secondary);
  font-weight: 700;
  font-size: var(--tt-fs-h4);
  color: var(--tt-dark);
  text-align: center;
  margin-bottom: 2rem;
}
.tt-hp-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.tt-hp-trust-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: var(--tt-glass-bg-soft);
  backdrop-filter: var(--tt-glass-blur);
  -webkit-backdrop-filter: var(--tt-glass-blur);
  border: 1px solid var(--tt-glass-border);
  border-radius: 16px;
  box-shadow: var(--tt-glass-shadow);
  padding: 1.1rem 1.25rem;
  transition: var(--tt-transition-standard);
}
.tt-hp-trust-item:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--tt-primary-rgb), 0.35);
  box-shadow: 0 14px 30px -6px rgba(var(--tt-primary-rgb), 0.22), var(--tt-shadow-md);
}
.tt-hp-trust-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--tt-gradient-primary);
  color: #fff;
  font-size: 1.1rem;
  box-shadow: 0 6px 16px -4px rgba(var(--tt-primary-rgb), 0.5);
}
.tt-hp-trust-text {
  font-family: var(--tt-font-secondary);
  font-weight: 600;
  font-size: var(--tt-fs-body);
  color: var(--tt-dark);
  line-height: 1.35;
  margin: 0;
}

/*==================================================================
  PROSE / "WHAT IS HRMS"
==================================================================*/
.tt-hp-prose p {
  font-size: var(--tt-fs-body-lg);
  color: var(--tt-muted);
  line-height: 1.8;
}
.tt-hp-prose p:last-child { margin-bottom: 0; }

/* ==================================================================
   "WHAT IS ...?" - THE BASICS SECTION
   Applied by scripts/split-what-is-section.ps1 to the 37 module pages
   and both money pages. That section had a two-line heading in the
   left column against up to four paragraphs (156-298 words) in the
   right one, which read as a wall beside a mostly empty column.

   Three things fix it, and none of them changes a word of the copy:
   a promoted first paragraph, a second heading for the second
   question, and a heading column that follows you down.
   ================================================================== */

/* THE DIRECT ANSWER. An answer engine quotes a short, self-contained
   span sitting directly under the heading it answers - this paragraph
   already was one, it just had no claim to being the answer. Larger,
   darker and rule-marked so a reader skimming lands on it too. */
.tt-hp-answer {
  padding-left: 1.15rem;
  border-left: 3px solid var(--tt-primary);
  color: var(--tt-dark) !important;   /* beats .tt-hp-prose p's muted */
  font-size: 1.15rem !important;
  font-weight: 500;
}

/* The second question. h3 because it sits under the section's h2 - one
   heading, one answer, which is what both a skimming reader and an
   extracting model are looking for. */
.tt-hp-subhead {
  margin: 2rem 0 0.85rem;
  font-family: var(--tt-font-poppins, var(--tt-font-primary));
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--tt-dark);
}

/* ------------------------------------------------------------------
   "ON THIS PAGE" RAIL  (scripts/add-page-contents.ps1)
   The left column held a two-line heading against a tall block of
   prose, so most of it was white space. It now carries a jump list of
   the page's own sections - these pages run to 9-10 sections and
   several thousand words, so it is the navigation they always needed
   and it fills the column as a side effect.
   ------------------------------------------------------------------ */
.tt-hp-toc {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--tt-border);
}
.tt-hp-toc-title {
  margin: 0 0 0.85rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tt-muted);
}
.tt-hp-toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tt-hp-toc li + li { margin-top: 0.15rem; }
/* Padding-left plus a transparent left border, so the hover state slides a
   rule in without the text shifting sideways. */
.tt-hp-toc a {
  display: block;
  padding: 0.32rem 0 0.32rem 0.85rem;
  border-left: 2px solid transparent;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--tt-muted);
  text-decoration: none;
  transition: var(--tt-transition-fast);
}
.tt-hp-toc a:hover,
.tt-hp-toc a:focus-visible {
  color: var(--tt-primary);
  border-left-color: var(--tt-primary);
}

@media (min-width: 992px) {
  /* The whole column sticks, not just the heading - the rail has to come
     with it or it scrolls away and the space is empty again. A flex child
     needs align-self:flex-start to stick inside a Bootstrap .row.
     Safe because no ancestor here uses overflow:hidden (hard rule 1). */
  .tt-hp-basics .col-lg-5 {
    position: sticky;
    top: calc(var(--tt-header-height, 96px) + 2rem);
    align-self: flex-start;
  }
}
@media (max-width: 991.98px) {
  /* Stacked, the rail would sit between the heading and the answer it
     introduces, which is the wrong order to read in. */
  .tt-hp-toc { display: none; }
}

/* The terminology section (scripts/compact-what-is-section.ps1). One question,
   one or two paragraphs, full container width - so the measure is capped for
   readability the way the two-column sections get it for free. */
.tt-hp-terms .tt-hp-prose { max-width: 52rem; }

/* Jumping to a section must not land it under the fixed header. */
.tt-hp-title[id],
.tt-faq-title[id] { scroll-margin-top: calc(var(--tt-header-height, 96px) + 1.5rem); }

/*==================================================================
  GENERIC GLASS CARD GRID (difference, reasons, industries)
==================================================================*/
.tt-hp-grid {
  display: grid;
  gap: 1.5rem;
  position: relative;
  z-index: 1;
}
.tt-hp-grid-3 { grid-template-columns: repeat(3, 1fr); }
.tt-hp-grid-4 { grid-template-columns: repeat(4, 1fr); }
.tt-hp-grid-2 { grid-template-columns: repeat(2, 1fr); }

.tt-hp-card {
  background: var(--tt-glass-bg-soft);
  backdrop-filter: var(--tt-glass-blur);
  -webkit-backdrop-filter: var(--tt-glass-blur);
  border: 1px solid var(--tt-glass-border);
  border-radius: 18px;
  box-shadow: var(--tt-glass-shadow);
  padding: 1.75rem;
  transition: var(--tt-transition-standard);
}
.tt-hp-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--tt-primary-rgb), 0.4);
  box-shadow: 0 16px 34px -8px rgba(var(--tt-primary-rgb), 0.24), var(--tt-shadow-md);
}
.tt-hp-card-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(var(--tt-primary-rgb), 0.12);
  border: 1px solid rgba(var(--tt-primary-rgb), 0.22);
  color: var(--tt-primary);
  font-size: 1.35rem;
  margin-bottom: 1.1rem;
}
.tt-hp-card-tag {
  font-family: var(--tt-font-secondary);
  font-size: var(--tt-fs-body-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tt-primary);
  margin-bottom: 0.4rem;
}
.tt-hp-card-title {
  font-family: var(--tt-font-secondary);
  font-weight: 700;
  font-size: var(--tt-fs-h4);
  color: var(--tt-dark);
  margin-bottom: 0.6rem;
}
.tt-hp-card-text {
  font-size: var(--tt-fs-body);
  color: var(--tt-muted);
  line-height: 1.65;
  margin: 0;
}

/* A card title that is itself a link - currently only the three agent cards
   on ai-agents.html, which are the page's route to the three agent pages.

   .tt-rel-link is written for running prose: `font: inherit` plus a permanent
   underline, so it reads as text that happens to be a link. At h3 size that
   underline is heavy, and the thing being clicked is the card rather than a
   phrase in a sentence. Keep the brand colour, which is what identifies it as
   a link, and move the underline to hover/focus. */
.tt-hp-card-title .tt-rel-link {
  text-decoration: none;
}
.tt-hp-card-title .tt-rel-link:hover,
.tt-hp-card-title .tt-rel-link:focus-visible {
  text-decoration: underline;
}

/*==================================================================
  CHALLENGES CHECK-LIST
==================================================================*/
.tt-hp-challenge-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.5rem;
  position: relative;
  z-index: 1;
}
.tt-hp-challenge {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: var(--tt-glass-bg-soft);
  backdrop-filter: var(--tt-glass-blur);
  -webkit-backdrop-filter: var(--tt-glass-blur);
  border: 1px solid var(--tt-glass-border);
  border-radius: 14px;
  box-shadow: var(--tt-glass-shadow);
  padding: 1rem 1.25rem;
  transition: var(--tt-transition-standard);
}
.tt-hp-challenge:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--tt-primary-rgb), 0.3);
}
.tt-hp-challenge-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(var(--tt-primary-rgb), 0.12);
  color: var(--tt-primary);
  font-size: 0.85rem;
}
.tt-hp-challenge-text {
  font-size: var(--tt-fs-body);
  color: var(--tt-dark);
  font-weight: 500;
  line-height: 1.45;
  margin: 0;
}

/*==================================================================
  INTEGRATIONS LIST (paired with the reused integration artwork)
==================================================================*/
.tt-hp-int-list {
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
.tt-hp-int-list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--tt-fs-body);
  font-weight: 500;
  color: var(--tt-secondary);
}
.tt-hp-int-list i {
  color: var(--tt-primary);
  font-size: 0.9rem;
}

/*==================================================================
  IMPLEMENTATION STEPS
==================================================================*/
.tt-hp-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  position: relative;
  z-index: 1;
}
.tt-hp-step {
  position: relative;
  background: var(--tt-glass-bg-soft);
  backdrop-filter: var(--tt-glass-blur);
  -webkit-backdrop-filter: var(--tt-glass-blur);
  border: 1px solid var(--tt-glass-border);
  border-radius: 18px;
  box-shadow: var(--tt-glass-shadow);
  padding: 1.75rem 1.5rem;
  transition: var(--tt-transition-standard);
}
.tt-hp-step:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--tt-primary-rgb), 0.4);
  box-shadow: 0 16px 34px -8px rgba(var(--tt-primary-rgb), 0.24), var(--tt-shadow-md);
}
.tt-hp-step-num {
  font-family: var(--tt-font-secondary);
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--tt-primary);
  margin-bottom: 0.75rem;
}
.tt-hp-step-title {
  font-family: var(--tt-font-secondary);
  font-weight: 700;
  font-size: var(--tt-fs-h4);
  color: var(--tt-dark);
  margin-bottom: 0.5rem;
}
.tt-hp-step-text {
  font-size: var(--tt-fs-body-sm);
  color: var(--tt-muted);
  line-height: 1.6;
  margin: 0;
}

/*==================================================================
  STEPS - FLOW VARIANT  (.tt-hp-steps-flow)
==================================================================
  Added 2026-08-27 for the AI Agent pages. The base variant is three
  or four separate boxes, each opening with a large orange numeral -
  correct for an implementation checklist, wrong for an agent, where
  the whole point is that one stage feeds the next.

  This turns the same markup into a pipeline: the numeral becomes a
  filled node, and a dashed rail runs between consecutive nodes. No
  markup change - the modifier goes on the grid, and the rail is a
  pseudo-element on each step except the last.

  The dashes are a repeating hard-stop pattern, which hard rule 3
  exempts. There is no gradient here: every stop is opaque orange or
  fully transparent, with no interpolation between them.

  Opt-in via the modifier rather than applied to .tt-hp-steps, because
  the 37 module pages use this grid for an implementation checklist
  where four independent boxes are the honest picture.
==================================================================*/
.tt-hp-steps-flow .tt-hp-step {
  overflow: visible;
}

/* The numeral becomes a node on the rail. inline-flex, not the inline
   default, so the width/height/margin below actually take effect. */
.tt-hp-steps-flow .tt-hp-step-num {
  align-items: center;
  background: var(--tt-primary);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(var(--tt-primary-rgb), 0.12);
  color: #fff;
  display: inline-flex;
  font-size: 1.2rem;
  height: 2.75rem;
  justify-content: center;
  margin-bottom: 1.1rem;
  transition: box-shadow 0.25s ease;
  width: 2.75rem;
}

.tt-hp-steps-flow .tt-hp-step:hover .tt-hp-step-num {
  box-shadow: 0 0 0 8px rgba(var(--tt-primary-rgb), 0.18);
}

/* No translateY here, unlike the base variant. The rail is a child of
   the card, so a lifting card drags its own rail segment off the line
   and visibly breaks the chain. Hover reads through the border, the
   shadow and the widening node ring instead. */
.tt-hp-steps-flow .tt-hp-step:hover {
  transform: none;
}

/* The rail. Spans the grid gap between this card and the next, at the
   vertical centre of the node: card padding-top (1.75rem) plus half
   the node (1.375rem). Both numbers are read off the rules above - if
   either changes, change this. */
.tt-hp-steps-flow .tt-hp-step::after {
  content: '';
  position: absolute;
  left: 100%;
  width: 1.5rem;                 /* == the .tt-hp-steps grid gap */
  top: calc(1.75rem + 1.375rem);
  height: 2px;
  background-image: repeating-linear-gradient(
    to right,
    rgba(var(--tt-primary-rgb), 0.55) 0 5px,
    transparent 5px 10px
  );
  pointer-events: none;
}

.tt-hp-steps-flow .tt-hp-step:last-child::after {
  content: none;
}

/* Stacked, the rail turns vertical and runs down the row gap from the
   node's centre line - so the pipeline survives on a phone instead of
   a horizontal stub pointing at nothing. The -1px centres the 2px rule
   on the node's axis. */
@media (max-width: 767.98px) {
  .tt-hp-steps-flow .tt-hp-step::after {
    left: calc(1.5rem + 1.375rem - 1px);
    top: 100%;
    width: 2px;
    height: 1.5rem;
    background-image: repeating-linear-gradient(
      to bottom,
      rgba(var(--tt-primary-rgb), 0.55) 0 5px,
      transparent 5px 10px
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .tt-hp-steps-flow .tt-hp-step-num { transition: none; }
}

/* Exceed-expectations pill list */
.tt-hp-pill-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
  position: relative;
  z-index: 1;
}
.tt-hp-pill {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--tt-glass-bg-soft);
  backdrop-filter: var(--tt-glass-blur);
  -webkit-backdrop-filter: var(--tt-glass-blur);
  border: 1px solid var(--tt-glass-border);
  border-radius: 999px;
  box-shadow: var(--tt-glass-shadow);
  padding: 0.85rem 1.35rem;
  font-weight: 600;
  font-size: var(--tt-fs-body);
  color: var(--tt-dark);
}
.tt-hp-pill i {
  color: var(--tt-success);
  font-size: 1rem;
}

/*==================================================================
  CTA BANDS
==================================================================*/
.tt-hp-cta {
  position: relative;
  overflow: hidden;
  padding-block: var(--tt-section-space);
  /* Same dark background approach as the Integrations band. */
  background: #121317;
  text-align: center;
}
.tt-hp-cta::before,
.tt-hp-cta::after {
  content: '';
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: none;
  pointer-events: none;
}
.tt-hp-cta::before { top: -180px; left: -100px; }
.tt-hp-cta::after { bottom: -200px; right: -80px; background: none; }
.tt-hp-cta-inner { position: relative; z-index: 1; max-width: 760px; }
.tt-hp-cta-title {
  font-family: var(--tt-font-secondary);
  font-weight: 800;
  font-size: var(--tt-fs-h2);
  color: #fff;
  margin-bottom: 0.85rem;
}
.tt-hp-cta-text {
  font-size: var(--tt-fs-body-lg);
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.7;
  margin-bottom: 1.75rem;
}
.tt-hp-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
/* White outline button for use on the orange CTA band */
.tt-hp-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--tt-font-secondary);
  font-weight: 600;
  font-size: var(--tt-fs-body);
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.65);
  border-radius: 999px;
  padding: 0.85rem 1.75rem;
  text-decoration: none;
  transition: var(--tt-transition-standard);
}
.tt-hp-btn-ghost:hover {
  background: #fff;
  color: var(--tt-primary);
  transform: translateY(-2px);
}
/* Solid white button for use on the orange CTA band */
.tt-hp-btn-solid {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--tt-font-secondary);
  font-weight: 700;
  font-size: var(--tt-fs-body);
  color: var(--tt-primary);
  background: #fff;
  border: 1.5px solid #fff;
  border-radius: 999px;
  padding: 0.85rem 1.75rem;
  text-decoration: none;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.35);
  transition: var(--tt-transition-standard);
}
.tt-hp-btn-solid:hover {
  transform: translateY(-2px);
  filter: brightness(0.98);
  color: var(--tt-primary-hover);
}

/*==================================================================
  FINAL "WHY CHOOSE" BAND
==================================================================*/
.tt-hp-final-copy {
  max-width: 820px;
  position: relative;
  z-index: 1;
}
.tt-hp-final-copy p {
  font-size: var(--tt-fs-body-lg);
  color: var(--tt-muted);
  line-height: 1.8;
}

/*==================================================================
  DARK SECONDARY BUTTON
  Same geometry as .btn-primary-custom / .btn-hero-cta (the "Book a
  Free Demo" button) — only the color changes to the dark brand
  fill. Pair with .btn-hero-cta for the larger hero sizing so it
  sits identically beside the primary CTA.
==================================================================*/
.btn-dark-custom {
  font-family: var(--tt-font-primary);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  background: var(--tt-gradient-dark);
  border: 1px solid #262A2F;
  padding: 0.75rem 1.75rem;
  border-radius: 10px;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.35);
  transition: var(--tt-transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.btn-dark-custom:hover {
  color: #FFFFFF;
  filter: brightness(1.15);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -8px rgba(0, 0, 0, 0.45);
}
.btn-dark-custom:active {
  transform: translateY(0);
}
/* Matching diagonal shine sweep, identical to the primary button: a FLAT
   translucent bar softened by filter: blur() - a gleam with no gradient.
   Keep these values in step with the shared rule in style.css section 17. */
.btn-dark-custom::after {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 30%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  filter: blur(6px);
  transform: skewX(-25deg);
  pointer-events: none;
  z-index: 1;
}
.btn-dark-custom:hover::after {
  left: 150%;
  transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .btn-dark-custom::after { display: none; }
}

/*==================================================================
  RESPONSIVE
==================================================================*/
@media (max-width: 991.98px) {
  .tt-hp-grid-3,
  .tt-hp-grid-4,
  .tt-hp-steps { grid-template-columns: repeat(2, 1fr); }
  .tt-hp-trust-grid { grid-template-columns: repeat(2, 1fr); }
  .tt-hp-pill-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
  .tt-hp-grid-2,
  .tt-hp-grid-3,
  .tt-hp-grid-4,
  .tt-hp-steps,
  .tt-hp-challenge-grid,
  .tt-hp-trust-grid,
  .tt-hp-int-list,
  .tt-hp-pill-grid { grid-template-columns: 1fr; }
  /* 84px, not 96px: the header is shorter once the contact strip condenses. */
  .tt-hp-hero { padding-top: calc(84px + var(--tt-fold-gap)); }
}

@media (prefers-reduced-motion: reduce) {
  .tt-hp-card,
  .tt-hp-step,
  .tt-hp-trust-item,
  .tt-hp-challenge,
  .tt-hp-btn-ghost,
  .tt-hp-btn-solid { transition: none; }
}

/*==================================================================
  THREE-UP MODIFIER
==================================================================
  Every grid above is sized for the module pages, which run four
  implementation steps and an even number of cards and challenges. The
  four AI Agent pages run THREE of each, and three items in a two- or
  four-column grid leaves a visible empty cell - which is most of why
  those pages looked unfinished. Added 2026-08-27.

  A modifier rather than switching the base grids to
  repeat(auto-fit, minmax(...)): the module pages' column counts are
  deliberate (four steps read as a process, two-up cards give long copy
  room) and auto-fit would let them reflow on their own.

  Specificity is (0,2,0) on purpose - it has to beat the (0,1,0) rules
  in the RESPONSIVE block above, which would otherwise drag these back
  to two columns at 992px and re-create the orphan. The matching media
  query below therefore repeats the double-class form.
==================================================================*/
.tt-hp-grid.tt-hp-3up,
.tt-hp-steps.tt-hp-3up,
.tt-hp-challenge-grid.tt-hp-3up {
  grid-template-columns: repeat(3, 1fr);
}

/* Straight to one column, never via two - two columns is exactly the
   orphan this modifier exists to remove. */
@media (max-width: 767.98px) {
  .tt-hp-grid.tt-hp-3up,
  .tt-hp-steps.tt-hp-3up,
  .tt-hp-challenge-grid.tt-hp-3up {
    grid-template-columns: 1fr;
  }
}

/*==================================================================
  MODULE WORKFLOW (dedicated per-module diagram)
==================================================================*/
.tt-hp-workflow {
  position: relative; z-index: 1;
  margin: 0 auto; max-width: 1040px;
  background: var(--tt-glass-bg-soft);
  -webkit-backdrop-filter: var(--tt-glass-blur);
  backdrop-filter: var(--tt-glass-blur);
  border: 1px solid var(--tt-glass-border);
  border-radius: 20px;
  box-shadow: var(--tt-glass-shadow);
  padding: 1.25rem;
}
.tt-hp-workflow-img { display: block; width: 100%; height: auto; border-radius: 12px; }
@media (max-width: 575.98px) {
  .tt-hp-workflow { padding: 0.7rem; border-radius: 16px; }
}

/* ==================================================================
   AMBIENT GRADIENT DAMPING ON SMALL SCREENS
   Companion to the same block in style.css. These live here because
   hrms-page.css loads after style.css - a media query adds no
   specificity, so damping .tt-hp-glow from style.css would lose to the
   base rule above.

   Reason: the glows are sized in fixed px (480px), which is well over
   the width of a phone viewport, so the "corner glow" filled the whole
   screen and stacked with the page mesh.
   ================================================================== */
@media (max-width: 767.98px) {
  .tt-hp-glow {
    --g: min(360px, 75vw);
    width: var(--g);
    height: var(--g);
    opacity: 0.5;
  }
  /* The size was damped above but the corner offsets below were left at their
     desktop px values, so on a 375px viewport a 281px blob pulled -140px sat
     half off-screen and the glow read as a hard edge rather than a corner
     wash. Scale the offsets by the same `--g` the size uses. */
  .tt-hp-glow-a { top: calc(var(--g) * -0.29); left: calc(var(--g) * -0.25); }
  .tt-hp-glow-b { bottom: calc(var(--g) * -0.33); right: calc(var(--g) * -0.25); }
  .tt-hp-hero-visual-glow { opacity: 0.5; }
}

/* A .tt-hp-card used as a link (the biometric device cards) still needs to
   read as a card, not a hyperlink. */
a.tt-hp-card { display: block; text-decoration: none; }
a.tt-hp-card .tt-hp-card-title { transition: color 0.2s ease; }
a.tt-hp-card:hover .tt-hp-card-title { color: var(--tt-primary); }