/* components.css — component styles (REDESIGN_SPEC §2.4, §4).
   All 9 sections (Phase 2 complete). Colors/space/type ONLY via var(--token).
   Breakpoints: sm 640 / md 768 / lg 1024 / xl 1200 (min-width).
   Motion: every transition in this file is neutralized under
   prefers-reduced-motion by the global gate in base.css (transition-duration
   0.01ms !important) — no additional per-rule gating is required. */

/* =========================================================
   Primitives
   ========================================================= */

/* ----- .btn ----- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1.2;
  text-decoration: none;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-invert);
}

.btn-primary:hover {
  background: var(--color-primary-strong);
  color: var(--color-text-invert);
}

.btn-ghost {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-primary);
}

.btn-ghost:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-strong);
}

/* On the navy band (Stats/Calculator result panel, later phases). */
.btn-invert {
  background: var(--color-surface);
  color: var(--color-primary);
}

.btn-invert:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}

/* ----- .badge ----- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.badge-positive {
  background: var(--color-positive);
  color: var(--color-text-invert);
}

/* Amber badge — for use on the navy band ONLY (calculator savings %, §4.4);
   color-accent on light backgrounds is forbidden per REDESIGN_SPEC §2.1. */
.badge-accent {
  background: var(--color-accent);
  color: var(--color-band);
}

/* ----- .icon-tile ----- */

.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.icon-tile svg {
  width: 20px;
  height: 20px;
}

/* ----- .card ----- */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* ----- .section-head ----- */

.section-head {
  max-width: 44rem;
  margin-inline: auto;
  margin-bottom: var(--space-8);
  text-align: center;
}

.section-eyebrow {
  margin-bottom: var(--space-2);
  color: var(--color-primary);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-title {
  font-size: var(--fs-h2);
  font-weight: 800;
}

.section-lead {
  margin-top: var(--space-3);
  font-size: var(--fs-lead);
  color: var(--color-text-muted);
}

.section-head-invert .section-title {
  color: var(--color-text-invert);
}

.section-head-invert .section-lead {
  color: var(--color-text-invert);
  opacity: 0.75;
}

.section-head-invert .section-eyebrow {
  color: var(--color-accent);
}

/* =========================================================
   Header (§4.0)
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition:
    box-shadow var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out);
}

/* subtle lift once the page is scrolled (site.js toggles .is-scrolled) */
.site-header.is-scrolled {
  border-bottom-color: var(--color-border);
  box-shadow: 0 6px 24px -12px rgba(15, 33, 55, 0.22);
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
}

/* Brand lockup (logo handoff): cube mark + Sora wordmark.
   Spec: flex lockup, gap ≈ 0.5× wordmark size, mark height ≈ 1.3× wordmark
   size, "HireStack" Sora 700 ink / "Solutions" Sora 400 muted. */
.wordmark {
  font-family: 'Sora Variable', var(--font-heading), sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  text-decoration: none;
}

.hs-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.hs-mark {
  height: 1.3em;
  aspect-ratio: 96 / 104;
  flex: none;
}

.wordmark:hover {
  color: var(--color-ink);
}

.wordmark-accent {
  font-weight: 400;
  color: var(--color-text-muted);
}

.wordmark-invert {
  color: var(--color-text-invert);
}

.wordmark-invert .wordmark-accent {
  color: color-mix(in srgb, var(--color-text-invert) 72%, transparent);
}

/* play-once assembly reveal (header, on page load) — timings per handoff:
   top drops 0.7s, left fades +0.35s, right +0.5s, wordmark slides +0.75s.
   fill-mode:both + the global reduced-motion duration gate means RM users
   simply see the finished lockup. */
@keyframes hs-reveal-top {
  from { transform: translateY(-16px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@keyframes hs-reveal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes hs-reveal-text {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.hs-reveal .hs-mark-top   { animation: hs-reveal-top  0.7s ease-out both; }
.hs-reveal .hs-mark-left  { animation: hs-reveal-fade 0.5s ease-out 0.35s both; }
.hs-reveal .hs-mark-right { animation: hs-reveal-fade 0.5s ease-out 0.5s both; }
.hs-reveal .hs-wordmark   { animation: hs-reveal-text 0.6s ease-out 0.75s both; }

/* hamburger (mobile only) */

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
}

.nav-toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: var(--color-ink);
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(4) {
  transform: translateY(-7px) rotate(-45deg);
}

/* nav panel — on mobile it's a dropdown that animates open (fade + slide);
   visibility keeps it out of the tab order while closed (no display:none, so
   the open/close can transition). The desktop media query makes it a static
   inline row. */

.site-nav {
  position: absolute;
  top: 100%;
  left: calc(-1 * var(--container-pad));
  right: calc(-1 * var(--container-pad));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  padding: var(--space-4) var(--container-pad) var(--space-5);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition:
    opacity var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out),
    visibility 0s linear var(--dur-med);
}

.nav-toggle[aria-expanded="true"] + .site-nav {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out),
    visibility 0s;
}

/* .nav-item (the <li>) and .footer-nav (the footer <nav>) are intentional
   structural hooks from the templates: they need no styling of their own
   today (list resets live in base.css; footer layout targets .footer-nav-list)
   but are part of the markup contract so styling can attach without a
   template change later. Do not remove them from the markup. */

.nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
}

.nav-link:hover {
  color: var(--color-primary);
}

/* scroll-spy active state — site.js toggles both the class and
   aria-current="location"; either alone renders correctly. The visual
   treatment differs by layout: a full-width pill in the mobile panel,
   an underline in the horizontal desktop bar (see the media queries). */
.nav-link.is-active,
.nav-link[aria-current="location"] {
  color: var(--color-primary);
}

/* header CTA — inline with the links on desktop, full-width row in the
   mobile panel (the panel is flex-column, so stretch is the default) */
.nav-cta {
  flex: none;
}

/* mobile panel: full-width tappable rows, active = soft pill */
@media (max-width: 1023.98px) {
  .site-nav .nav-list {
    gap: 2px;
  }

  .site-nav .nav-link {
    width: 100%;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--fs-body);
  }

  .site-nav .nav-link:hover {
    background: var(--color-surface-sunken);
  }

  .site-nav .nav-link.is-active,
  .site-nav .nav-link[aria-current="location"] {
    background: var(--color-primary-soft);
  }

  .nav-toggle[aria-expanded="true"] + .site-nav .nav-cta {
    width: 100%;
    margin-top: var(--space-2);
  }

  /* links fade + rise in a stagger as the panel opens */
  .site-nav .nav-item,
  .site-nav .nav-cta {
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity var(--dur-fast) var(--ease-out),
      transform var(--dur-fast) var(--ease-out);
  }
  .nav-toggle[aria-expanded="true"] + .site-nav .nav-item,
  .nav-toggle[aria-expanded="true"] + .site-nav .nav-cta {
    opacity: 1;
    transform: none;
  }
  .nav-toggle[aria-expanded="true"] + .site-nav .nav-item:nth-child(1) { transition-delay: 0.04s; }
  .nav-toggle[aria-expanded="true"] + .site-nav .nav-item:nth-child(2) { transition-delay: 0.09s; }
  .nav-toggle[aria-expanded="true"] + .site-nav .nav-item:nth-child(3) { transition-delay: 0.14s; }
  .nav-toggle[aria-expanded="true"] + .site-nav .nav-item:nth-child(4) { transition-delay: 0.19s; }
  .nav-toggle[aria-expanded="true"] + .site-nav .nav-item:nth-child(5) { transition-delay: 0.24s; }
  .nav-toggle[aria-expanded="true"] + .site-nav .nav-item:nth-child(6) { transition-delay: 0.29s; }
  .nav-toggle[aria-expanded="true"] + .site-nav .nav-cta { transition-delay: 0.32s; }
}

@media (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }

  .site-nav,
  .nav-toggle[aria-expanded="true"] + .site-nav {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-5);
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav-list {
    flex-direction: row;
    gap: var(--space-1);
  }

  .site-nav .nav-link:hover {
    background: var(--color-primary-soft);
  }

  /* animated underline that grows from the left on hover / active —
     slow, smooth glide so moving between items feels fluid */
  .site-nav .nav-link {
    position: relative;
    transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
  }
  .site-nav .nav-link::after {
    content: "";
    position: absolute;
    left: var(--space-3);
    right: var(--space-3);
    bottom: 5px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.55s var(--ease-out);
  }
  .site-nav .nav-link:hover::after,
  .site-nav .nav-link.is-active::after,
  .site-nav .nav-link[aria-current="location"]::after {
    transform: scaleX(1);
  }
}

/* =========================================================
   Hero (§4.1)
   ========================================================= */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--color-canvas);
}

/* decorative aurora — a single blurred, slowly drifting multi-radial layer
   (2026 sleek pass). Pure CSS, no JS. Sits behind the hero grid (z-index 0)
   and is clipped by .hero's overflow:hidden. Colors are theme tokens, so it
   re-tints with any CMS palette. Animation is gated under reduced motion below. */
.hero-aurora {
  position: absolute;
  inset: -25% -15% auto -15%;
  height: 135%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 46% at 72% 22%, color-mix(in srgb, var(--color-primary) 22%, transparent), transparent 70%),
    radial-gradient(34% 42% at 20% 30%, color-mix(in srgb, var(--color-accent) 15%, transparent), transparent 72%),
    radial-gradient(46% 44% at 52% 68%, var(--color-primary-soft), transparent 70%);
  filter: blur(46px);
  opacity: 0.75;
  animation: hero-aurora 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes hero-aurora {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1);    }
  50%  { transform: translate3d(3%, 2%, 0)   scale(1.08); }
  100% { transform: translate3d(-1%, 3%, 0)  scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-aurora { animation: none; }
}

/* dotted-grid ambient layer over the aurora, faded in from the top-right —
   static, theme-tokened, sits under the content (z-index 0 vs grid's 1) */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--color-primary) 26%, transparent) 1px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(55% 65% at 76% 28%, #000, transparent 72%);
  mask-image: radial-gradient(55% 65% at 76% 28%, #000, transparent 72%);
  opacity: 0.5;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
  /* hero exit choreography — site.js publishes --hero-exit (0→1) as the hero
     scrolls away; without JS / under reduced motion it stays 0 (a no-op) */
  transform-origin: 50% 25%;
  transform: scale(calc(1 - var(--hero-exit, 0) * 0.06));
  opacity: calc(1 - var(--hero-exit, 0) * 0.55);
}

.hero-content > .badge {
  margin-bottom: var(--space-5);
}

.hero-title {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.08;
}

.hero-title-line {
  display: block;
}

/* kinetic headline — each line reveals on load, staggered (sleek pass).
   Gated to no-preference so reduced-motion users see the headline instantly. */
@media (prefers-reduced-motion: no-preference) {
  .hero-title-line {
    opacity: 0;
    transform: translateY(0.5em);
    animation: hero-line-in 0.7s var(--ease-out) forwards;
  }
  .hero-title-line:nth-child(1) { animation-delay: 0.10s; }
  .hero-title-line:nth-child(2) { animation-delay: 0.22s; }
  .hero-title-line:nth-child(3) { animation-delay: 0.34s; }
}
@keyframes hero-line-in {
  to { opacity: 1; transform: none; }
}

.hero-title-accent {
  color: var(--color-primary);
}

.hero-lead {
  max-width: 34rem;
  margin-top: var(--space-5);
  font-size: var(--fs-lead);
  color: var(--color-text);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* compact inline stat strip */

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--space-8);
}

.hero-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-inline: var(--space-5);
  border-left: 1px solid var(--color-border);
}

.hero-stat:first-child {
  padding-left: 0;
  border-left: 0;
}

.hero-stat-value {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 800;
  color: var(--color-ink);
}

.hero-stat-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* candidate-card collage — decorative, >= lg only */

.hero-visual {
  display: none;
}

@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .hero-visual {
    position: relative;
    display: block;
    min-height: 380px;
    transition: transform 0.4s var(--ease-out);
    will-change: transform;
  }

  .hero-card {
    position: absolute;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "avatar name"
      "avatar role"
      "avatar chip";
    column-gap: var(--space-3);
    align-content: center;
    width: min(19rem, 90%);
    padding: var(--space-4) var(--space-5);
    box-shadow: var(--shadow-lg);
  }

  .hero-card-1 {
    top: 6%;
    left: 4%;
    transform: rotate(-3deg);
    z-index: 3;
  }

  .hero-card-2 {
    top: 36%;
    right: 0;
    transform: rotate(2deg);
    z-index: 2;
  }

  .hero-card-3 {
    bottom: 4%;
    left: 10%;
    transform: rotate(-1deg);
    z-index: 1;
  }

  .hero-card-avatar {
    grid-area: avatar;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--fs-sm);
  }

  .hero-card-name {
    grid-area: name;
    color: var(--color-ink);
    font-weight: 600;
    font-size: var(--fs-sm);
  }

  .hero-card-role {
    grid-area: role;
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
  }

  .hero-card-chip {
    grid-area: chip;
    justify-self: start;
    margin-top: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-positive);
    color: var(--color-text-invert);
    font-size: var(--fs-xs);
    font-weight: 600;
  }
}

/* =========================================================
   Trust bar (§4.2) — slim band, NOT a .section
   ========================================================= */

.trust {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-6);
}

.trust-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-6);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.trust-item-text {
  display: flex;
  flex-direction: column;
}

.trust-value {
  color: var(--color-ink);
  font-weight: 600;
  font-size: var(--fs-sm);
}

.trust-caption {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

@media (min-width: 768px) {
  .trust-items {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* =========================================================
   Footer (§4.10)
   ========================================================= */

.site-footer {
  background: var(--color-band);
  color: var(--color-text-invert);
  padding-block: var(--space-10) var(--space-6);
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
}

.footer-brand .wordmark {
  font-size: 1.25rem;
}

.footer-tagline {
  max-width: 24rem;
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-invert);
  opacity: 0.75;
}

.footer-nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-nav-link,
.footer-email {
  color: var(--color-text-invert);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.footer-nav-link:hover,
.footer-email:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-location {
  font-size: var(--fs-sm);
  color: var(--color-text-invert);
  opacity: 0.75;
}

.footer-bottom {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-band-surface);
}

.footer-copyright {
  font-size: var(--fs-xs);
  color: var(--color-text-invert);
  opacity: 0.7;
}

@media (min-width: 768px) {
  .footer-main {
    grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
    align-items: start;
  }
}

/* =========================================================
   Section backgrounds — band rhythm per §4.3–§4.9
   ========================================================= */

/* alternating sunken bands per §4.4 / §4.7 / §4.9 */
.calculator,
.faq,
.contact {
  background: var(--color-surface-sunken);
}

.features,
.services,
.testimonials {
  background: var(--color-surface);
}

/* subtle atmospheric tint at the top of the two big card sections */
.features,
.services {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 4%, var(--color-surface)), var(--color-surface) 38%);
}

/* explicit opaque canvas — required by stacked sheet scrolling (a pinned
   sheet must never show through the one sliding over it) */
.calculator,
.faq {
  background: var(--color-canvas);
}

/* the one dark band (§4.5) */
.stats {
  background: var(--color-band);
}

/* a section reduced to just its head (e.g. all items disabled) keeps tidy */
.section .section-head:last-child {
  margin-bottom: 0;
}

/* =========================================================
   Features (§4.3)
   ========================================================= */

.features-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

/* bento layout (2026): the first feature is the emphasis tile, spanning both
   rows of a 2-col grid; the other two stack beside it. Its detail block is
   pushed to the bottom so the taller tile stays balanced. Stacks < 900px. */
@media (min-width: 900px) {
  .features-grid {
    grid-template-columns: 1.35fr 1fr;
    grid-auto-rows: 1fr;
  }
  .features-grid > .feature-card:first-child {
    grid-row: 1 / span 2;
  }
  .features-grid > .feature-card:first-child .feature-details {
    margin-top: auto;
  }
}

.feature-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

/* card hover per §3: border → primary, shadow-md, 2px lift — nothing else */
.feature-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.feature-card .icon-tile {
  margin-bottom: var(--space-4);
}

/* element-scoped so the rule holds whatever class Dev1 gives the <h3> */
.feature-card h3,
.feature-title {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-2);
}

.feature-description {
  color: var(--color-text);
  font-size: var(--fs-sm);
}

.feature-details-heading,
.feature-card h4 {
  margin: var(--space-4) 0 var(--space-2);
  color: var(--color-ink);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.feature-points {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.feature-point {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--color-text);
  font-size: var(--fs-sm);
}

/* CSS-drawn check tick (color-positive) — only when the template did not
   already ship an inline check icon, so the mark never doubles up */
.feature-point:not(:has(svg))::before {
  content: "";
  flex: none;
  width: 7px;
  height: 12px;
  margin-top: 0.3em;
  border: solid var(--color-positive);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.feature-point svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 0.25em;
  color: var(--color-positive);
}

/* =========================================================
   Calculator (§4.4)
   ========================================================= */

.calculator-card {
  max-width: 56rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden; /* keeps the navy result panel inside the card radius */
}

@media (min-width: 768px) {
  .calculator-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.calculator-inputs {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
}

.calculator-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.calculator-inputs label {
  color: var(--color-ink);
  font-size: var(--fs-sm);
  font-weight: 500;
}

/* visible value chip next to the range label (an <output> element) */
.calculator-inputs output,
.calculator-value {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-2);
  margin-left: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* range input — 44px hit box; the 6px track is drawn centered inside it.
   Track: color-border, thumb: color-primary (§4.4). */
.calculator input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  margin: 0;
  background: linear-gradient(var(--color-border), var(--color-border)) 50% 50% / 100% 6px no-repeat;
  border-radius: var(--radius-pill);
}

.calculator input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.calculator input[type="range"]::-moz-range-track {
  height: 6px;
  background: transparent; /* track drawn by the input's own background */
}

.calculator input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

/* role dropdown — matches the field styling, 44px hit target (§5) */
.calculator-select {
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  font-size: var(--fs-body);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.calculator-select:focus {
  border-color: var(--color-focus);
}

/* result panel — navy, inverted (§4.4). Inner radius follows the card via
   the card's overflow:hidden. */
.calculator-results {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-band);
  color: var(--color-text-invert);
}

/* each result row: label on the left, figure on the right */
.calculator-result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--fs-sm);
}

.calculator-result-label {
  color: var(--color-text-invert);
  opacity: 0.75;
}

/* "Traditional hiring" figure — struck through, muted */
.calculator-result-traditional .calculator-result-figure {
  text-decoration: line-through;
  color: var(--color-text-invert);
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

/* "With HireStack" figure — the big number */
.calculator-result-ours .calculator-result-figure {
  font-family: var(--font-heading);
  font-size: var(--fs-stat);
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-text-invert);
  font-variant-numeric: tabular-nums;
}

/* savings line — amber on navy is AA (§2.1); percentage rides in a badge */
.calculator-savings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  color: var(--color-accent);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.calculator-savings-amount {
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

.calculator-savings-badge {
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   Stats (§4.5) — the dark band
   ========================================================= */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8) var(--space-5);
  text-align: center;
}

@media (min-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.stats-value {
  font-family: var(--font-heading);
  font-size: var(--fs-stat);
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-text-invert);
  font-variant-numeric: tabular-nums;
}

.stats-suffix {
  color: var(--color-accent);
}

.stats-label {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-text-invert);
  opacity: 0.85;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.stats-sublabel {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-text-invert);
  opacity: 0.6;
  font-size: var(--fs-xs);
}

/* =========================================================
   Services (§4.6)
   ========================================================= */

.services-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: stretch;
}

@media (min-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.services-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.services-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* muted 01/02/03 index — font-heading, fs-h3, color-primary (§4.6) */
.services-number {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 800;
  color: var(--color-primary);
  opacity: 0.55;
  margin-bottom: var(--space-3);
}

.services-card h3 {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-2);
}

.services-desc {
  color: var(--color-text);
  font-size: var(--fs-sm);
}

/* rendered bodyMarkdown — headings arrive demoted to h4 (markdown.js) */
.services-body {
  font-size: var(--fs-sm);
}

.services-body h4 {
  margin: var(--space-4) 0 var(--space-2);
  color: var(--color-ink);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.services-body ul {
  margin: 0;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.services-body li::marker {
  color: var(--color-primary);
}

/* pricing chip pinned to the card footer */
.services-pricing {
  margin-top: auto;
  padding-top: var(--space-5);
}

.services-pricing-chip,
.services-pricing .badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.services-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  margin-top: var(--space-2);
  color: var(--color-primary);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}

.services-link:hover {
  color: var(--color-primary-strong);
  text-decoration: underline;
}

/* =========================================================
   FAQ (§4.7) — semantic disclosure accordion
   ========================================================= */

.accordion {
  max-width: 46rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.accordion-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.accordion-item h3 {
  /* the trigger button inherits from here (font: inherit in base reset) */
  font-size: var(--fs-body);
  line-height: 1.4;
}

.accordion-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 44px; /* full-row touch target (§5) */
  padding: var(--space-4) var(--space-5);
  background: none;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--color-ink);
  font-weight: 600;
  text-align: left;
  transition: color var(--dur-fast) var(--ease-out);
}

.accordion-trigger:hover {
  color: var(--color-primary);
}

/* plus/minus icon, CSS-drawn: two gradient bars; the vertical bar collapses
   and the mark rotates when expanded (§4.7 "CSS rotate") */
.accordion-trigger::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--color-primary), var(--color-primary)) 50% 50% / 14px 2px no-repeat,
    linear-gradient(var(--color-primary), var(--color-primary)) 50% 50% / 2px 14px no-repeat;
  transition: transform var(--dur-fast) var(--ease-out);
}

.accordion-trigger[aria-expanded="true"]::after {
  transform: rotate(135deg);
  background:
    linear-gradient(var(--color-primary), var(--color-primary)) 50% 50% / 14px 2px no-repeat;
}

/* Collapse machinery — applied ONLY once site.js adds .faq-enhanced to the
   section (progressive enhancement: with JS disabled every answer stays
   visible). Open/closed state is driven purely by [aria-expanded] on the
   trigger. Height-safe animation: grid-template-rows 0fr→1fr; site.js
   guarantees a single .accordion-content wrapper inside the panel. */

.faq-enhanced .accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-med) var(--ease-out);
}

.faq-enhanced .accordion-panel > .accordion-content {
  min-height: 0;
  overflow: hidden;
  visibility: hidden; /* hides collapsed content from AT + tab order */
  transition: visibility 0s linear var(--dur-med);
}

.faq-enhanced .accordion-item:has(.accordion-trigger[aria-expanded="true"]) .accordion-panel,
.faq-enhanced h3:has(> .accordion-trigger[aria-expanded="true"]) + .accordion-panel {
  grid-template-rows: 1fr;
}

.faq-enhanced .accordion-item:has(.accordion-trigger[aria-expanded="true"]) .accordion-panel > .accordion-content,
.faq-enhanced h3:has(> .accordion-trigger[aria-expanded="true"]) + .accordion-panel > .accordion-content {
  visibility: visible;
  transition-delay: 0s;
}

.accordion-content {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--color-text);
  font-size: var(--fs-sm);
}

.accordion-content > * + * {
  margin-top: var(--space-3);
}

/* =========================================================
   Testimonials (§4.8)
   ========================================================= */

.testimonials-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

@media (min-width: 1024px) {
  .testimonials-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
}

/* star row — fractional ratings supported via a width mask: the base layer
   shows 5 muted stars, the absolutely-positioned fill layer shows accent
   stars clipped to calc(rating/5). --rating comes from an inline style or is
   set by site.js from data-rating; default 5. Decorative (aria-hidden) —
   the template carries the sr-only "Rated X out of 5" text. */
.testimonial-stars {
  position: relative;
  display: inline-block;
  color: var(--color-border);
  font-size: var(--fs-body);
  line-height: 1;
  letter-spacing: 2px;
  white-space: nowrap;
}

.testimonial-stars-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--rating, 5) / 5 * 100%);
  overflow: hidden;
  color: var(--color-accent);
  white-space: nowrap;
}

.testimonial-quote {
  flex-grow: 1;
  margin-block: var(--space-4);
  color: var(--color-text);
  font-size: var(--fs-body);
}

.testimonial-footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
}

.testimonial-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-sm);
}

.testimonial-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.testimonial-name {
  color: var(--color-ink);
  font-weight: 600;
  font-size: var(--fs-sm);
}

.testimonial-role {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

.testimonial-source {
  margin-left: auto;
  flex: none;
}

/* ---------- card hover motion polish (smooth lift, Circle-style) ---------- */
.feature-card,
.services-card,
.testimonial-card {
  transition:
    transform 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out),
    border-color 0.2s var(--ease-out);
}
.feature-card:hover,
.services-card:hover,
.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
}

/* ---------- spotlight hover (cursor-follow glow, sleek pass) ----------
   site.js sets --mx/--my (cursor position, %) per card on mousemove. The
   ::before paints a soft radial glow over the card surface but UNDER the
   content: it comes first in source and the direct children are made
   position:relative, so they paint above it. Fine-pointer only (JS-gated). */
.feature-card,
.services-card,
.testimonial-card {
  position: relative;
}
.feature-card > *,
.services-card > *,
.testimonial-card > * {
  position: relative;
}
.feature-card::before,
.services-card::before,
.testimonial-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--color-primary) 10%, transparent), transparent 62%);
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
  pointer-events: none;
}
.feature-card:hover::before,
.services-card:hover::before,
.testimonial-card:hover::before {
  opacity: 1;
}

/* ---------- scroll progress bar (native CSS scroll-driven animation) ----------
   Only runs where animation-timeline is supported; elsewhere it stays
   scaleX(0) (invisible), so there is no broken/full-width fallback. Gated
   under reduced motion. Sits above the sticky header. */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 60;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .scroll-progress {
      animation: scroll-progress-grow linear;
      animation-timeline: scroll(root);
    }
  }
}
@keyframes scroll-progress-grow {
  to { transform: scaleX(1); }
}

/* ---------- stacked sheet scrolling (immersive pass) ----------
   site.js adds .stack-on to <main> (desktop, motion-ok only) and sets a
   per-section --stick-top of min(0, 100vh - height): a section pins only
   once it has been fully read, then the next slides over it like a sheet.
   Without the class nothing here applies — normal document scrolling. */
main.stack-on > section {
  position: sticky;
  top: var(--stick-top, 0px);
}

/* every incoming sheet gets rounded top corners + a soft shadow above it,
   so the overlap reads as physical layers */
main.stack-on > section + section {
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -22px 44px -18px rgba(15, 33, 55, 0.28);
}

/* the footer must paint over the last pinned sheet (positioned elements
   otherwise paint above it regardless of DOM order) */
.site-footer {
  position: relative;
}

/* ---------- conic beam border (card hover, immersive pass) ----------
   A thin gradient ring that sweeps around the card while hovered. Drawn by
   a masked ::after (the two-layer mask keeps only the 1.5px rim), so it
   needs no markup and coexists with the ::before spotlight. Browsers
   without @property/mask support simply never show it. */
@property --beam-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@media (prefers-reduced-motion: no-preference) {
  .feature-card::after,
  .services-card::after,
  .testimonial-card::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(
      from var(--beam-angle),
      transparent 0deg 285deg,
      color-mix(in srgb, var(--color-primary) 85%, transparent) 325deg,
      color-mix(in srgb, var(--color-accent) 55%, var(--color-primary)) 342deg,
      transparent 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s var(--ease-out);
    pointer-events: none;
  }
  .feature-card:hover::after,
  .services-card:hover::after,
  .testimonial-card:hover::after {
    opacity: 1;
    animation: beam-spin 3.2s linear infinite;
  }
}

@keyframes beam-spin {
  to { --beam-angle: 360deg; }
}

/* ---------- primary CTA shimmer (immersive pass) ---------- */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-130%) skewX(-18deg);
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .btn-primary:hover::after {
    animation: btn-shimmer 0.9s var(--ease-out);
  }
}
@keyframes btn-shimmer {
  to { transform: translateX(130%) skewX(-18deg); }
}

/* =========================================================
   Contact (§4.9)
   ========================================================= */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

/* left column — the section head sits inside the column, left-aligned */
.contact-intro .section-head,
.contact-info .section-head {
  margin-inline: 0;
  margin-bottom: var(--space-5);
  text-align: left;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.contact-item-text {
  display: flex;
  flex-direction: column;
}

.contact-item-label {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

.contact-item-value,
.contact-item a {
  color: var(--color-ink);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.contact-note {
  margin-top: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.contact-proof {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

/* right column — the form card */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

@media (min-width: 640px) {
  .form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }
}

/* labels always visible (§5) */
.contact form label {
  color: var(--color-ink);
  font-size: var(--fs-sm);
  font-weight: 500;
}

/* fields — element-scoped so the rules hold whatever classes Dev1 uses;
   44px min touch target (§5) */
.contact form input:not([type="checkbox"], [type="radio"], [type="range"]),
.contact form select,
.contact form textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  font-size: var(--fs-body);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.contact form textarea {
  min-height: 8rem;
  resize: vertical;
}

.contact form input:focus,
.contact form select:focus,
.contact form textarea:focus {
  border-color: var(--color-focus);
}

/* error state — JS sets aria-invalid + fills the aria-describedby slot */
.contact form [aria-invalid="true"] {
  border-color: var(--color-danger);
}

.field-error {
  color: var(--color-danger);
  font-size: var(--fs-sm);
}

.field-error:empty {
  display: none;
}

/* submit-level status line (role="alert" on failure, §5) */
.form-status {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
}

.form-status:empty {
  display: none;
}

.form-status.is-error {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.form-status.is-error a {
  color: var(--color-danger);
  font-weight: 600;
}

.form-status.is-success {
  border-color: var(--color-positive);
  color: var(--color-positive);
}

/* success confirmation panel (replaces the form, role="status") */
.contact-success {
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

.contact-success h3 {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-3);
}

.contact-success p {
  color: var(--color-text);
  font-size: var(--fs-sm);
}