/* Recruitment uses the homepage's Lyra tokens, typography and component patterns. */
.recruitment-intro .ac-hero-copy { max-width: 35rem; }
.recruitment-intro .ac-headline { max-width: 14ch; font-size: clamp(2.3rem, 4.4vw, 3.65rem); }
.recruitment-intro .hero-sub { max-width: 47ch; }
.recruitment-intro .hero-ctas { gap: .7rem; }
.recruitment-intro .ac-feed-body { min-height: 0; }
.recruitment-intro .ac-call-event { align-items: flex-start; }
.recruitment-intro .ac-call-event > div { min-width: 0; }
.recruitment-intro .ac-call-time { white-space: nowrap; }
.recruitment-intro .ac-scene-sub { max-width: 34rem; }
.recruitment-intro .ac-hero, .recruitment-intro .model-providers, .recruitment-intro .powered { border: 0; }
.recruitment-intro .ac-approval { min-height: 2.6rem; }
.recruitment-intro .ac-event-icon,
.recruitment-intro .ac-feed.is-enhanced [data-reveal].is-current .ac-event-icon { color: var(--chart-3); }

/* The category headline and Bill markers carry the same hierarchy as the homepage. */
.recruitment-category-title { font-size: 1.65rem; line-height: 1.3; margin: .15rem 0 1.3rem; max-width: 27ch; }
#outcomes .section-head { max-width: 44rem; }
#outcomes .business-grid { border-top-color: var(--border); }

/* Align the workflow examples across columns. */
@media (min-width: 900px) {
  #how .node { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
  #how .node-head { align-items: flex-start; }
  #how .node-body { grid-template-rows: subgrid; grid-row: span 2; align-content: normal; }
  #how .chips { align-content: start; }
}


/* Shared logo-wall treatment, with explanatory columns for each integration type. */
.recruitment-integrations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.recruitment-integration { min-width: 0; padding: 1.5rem 1.5rem 1.5rem 0; }
.recruitment-integration + .recruitment-integration { border-left: 1px solid var(--border); padding-left: 1.5rem; }
.recruitment-integration h3 { font-size: 1.15rem; line-height: 1.35; margin-bottom: .8rem; }
.recruitment-integration > p { color: var(--muted-foreground); font-size: .8125rem; line-height: 1.8; }
#integrations .recruitment-logo-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 1.5rem; }
#integrations .logo-chip { min-height: 3rem; line-height: 1.5; }
#integrations .logo-chip img { object-fit: contain; }
#integrations .business-more { font-size: .75rem; }

/* The homepage's inverse customer band, adapted to the sourced Appco workflow. */
#case-study {
  --proof-line: color-mix(in oklch, var(--primary-foreground) 22%, transparent);
  --proof-muted: color-mix(in oklch, var(--primary-foreground) 75%, transparent);
  --proof-surface: color-mix(in oklch, var(--primary-foreground) 6%, transparent);
}
.recruitment-proof-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; margin-bottom: 3rem; }
#case-study .section-head { max-width: 43rem; margin-bottom: 0; }
#case-study .section-head h2 { font-size: 1.875rem; }
#case-study .section-head p { color: var(--proof-muted); }
.recruitment-customer-logo { flex: none; }
.recruitment-customer-logo img { width: 8.5rem; height: auto; }
.recruitment-proof { border: 1px solid var(--proof-line); background: var(--proof-surface); display: grid; grid-template-columns: .8fr 1.2fr; }
.recruitment-proof > div { min-width: 0; padding: 2rem; }
.recruitment-proof > div:first-child { display: flex; flex-direction: column; justify-content: center; }
.recruitment-proof > div + div { border-left: 1px solid var(--proof-line); }
.recruitment-proof-stat { font-family: var(--font-mono); font-weight: 600; color: var(--chart-2); font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: -.055em; line-height: 1.15; }
.recruitment-proof-label { color: var(--proof-muted); font-size: .8125rem; line-height: 1.8; max-width: 21rem; margin-top: 1rem; }
.recruitment-proof-volume { border-top: 1px solid var(--proof-line); margin-top: 1.5rem; padding-top: 1rem; font-family: var(--font-mono); font-size: .75rem; }
.recruitment-proof-steps { list-style: none; counter-reset: proof; margin: 0; padding: 0; }
.recruitment-proof-steps li { counter-increment: proof; display: grid; grid-template-columns: 1.5rem 1fr; column-gap: .75rem; padding: .2rem 0 1rem; }
.recruitment-proof-steps li + li { border-top: 1px solid var(--proof-line); padding-top: 1rem; }
.recruitment-proof-steps li::before { content: counter(proof, decimal-leading-zero); grid-row: 1 / span 2; font-family: var(--font-mono); color: var(--chart-2); font-size: .7rem; padding-top: .15rem; }
.recruitment-proof-steps strong { font-family: var(--font-heading); font-size: 1rem; }
.recruitment-proof-steps span { color: var(--proof-muted); font-size: .75rem; line-height: 1.7; margin-top: .35rem; }
.recruitment-proof .btn { margin-top: 1.25rem; max-width: 100%; white-space: normal; text-align: center; padding-block: .7rem; }
.recruitment-proof-note { color: var(--proof-muted); font-size: .6875rem; line-height: 1.75; margin-top: 1rem; }
.dark #case-study .recruitment-proof-stat,
.dark .recruitment-proof-steps li::before { color: var(--chart-4); }

/* Product-style bento: model rows, evidence, agent identities and a connected flow. */
#tools .tile { padding: 1.25rem; }
#tools .mini-body { padding: .75rem; }
#tools .mini-bar { min-height: 2.5rem; }
#tools .recruitment-review { display: grid; gap: .65rem; }
#tools .recruitment-review-row { display: grid; gap: .4rem; border: 1px solid var(--border); background: var(--card); padding: .7rem; font-size: .7rem; }
#tools .recruitment-review-row > span { color: var(--muted-foreground); }
#tools .recruitment-review-row strong { display: flex; align-items: center; gap: .4rem; font-weight: 500; }
#tools .recruitment-review-row .icon { color: var(--chart-3); }
#tools .recruitment-review-note { border: 1px solid var(--border); background: var(--muted); padding: .75rem; }
#tools .recruitment-review-note p { font-size: .7rem; line-height: 1.7; }
#tools .al { min-height: 2.75rem; }
#tools .al .recruitment-agent-avatar { width: 21px; height: 21px; margin-left: 0; object-fit: contain; }
#tools .al .who { min-width: 0; }
#tools .flowmini .fm { min-width: 0; min-height: 2.6rem; }
#tools .flowmini .arr { color: var(--chart-3); }
#security .sc-foot > p { color: var(--muted-foreground); font-size: .75rem; line-height: 1.65; max-width: 34rem; }

@media (max-width: 960px) {
  #integrations .recruitment-logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .recruitment-intro .ac-headline { max-width: 16ch; }
  .recruitment-category-title { font-size: 1.35rem; }
  .recruitment-integrations { grid-template-columns: 1fr; }
  .recruitment-integration, .recruitment-integration + .recruitment-integration { padding: 1.25rem 0; border-left: 0; }
  .recruitment-integration + .recruitment-integration { border-top: 1px solid var(--border); }
  .recruitment-proof-header { flex-wrap: wrap; gap: 1.5rem; margin-bottom: 2rem; }
  #case-study .section-head h2 { font-size: 1.5rem; }
  .recruitment-customer-logo img { width: 7rem; }
  .recruitment-proof { grid-template-columns: minmax(0, 1fr); }
  .recruitment-proof > div { padding: 1.5rem; }
  .recruitment-proof > div + div { border-left: 0; border-top: 1px solid var(--proof-line); }
  .recruitment-proof-stat { font-size: 3rem; }
  .business-details-wrap { padding-inline: 0; }
  #tools .tile { padding: 1rem; }
  #integrations .logo-chip { padding: .65rem; gap: .5rem; font-size: .7rem; }
}
@media (max-width: 400px) {
  .recruitment-intro .ac-controls { gap: .25rem; }
  .recruitment-intro .ac-steps button { padding-inline: .35rem; }
  .recruitment-intro .ac-call-event { flex-wrap: wrap; }
  .recruitment-intro .ac-call-time { margin-left: 2rem; }
}

/* Recruitment review: legibility, proof and deliberate exploration. Shared pages
   retain their existing styles; these overrides are loaded only by this page. */
.recruitment-intro .hero-ctas { flex-wrap: wrap; }
.recruitment-intro .ac-demo figcaption { position: static; padding: .75rem 1rem; border-top: 1px solid var(--border); font-size: .75rem; }
.recruitment-intro :is(.ac-scene-sub, .ac-events p, .ac-events strong, .ac-call-event, .ac-approval) { font-size: .875rem; }
.recruitment-intro :is(.ac-call-event div > span, .ac-example, .ac-call-time, .ac-controls button) { font-size: .75rem; }
.recruitment-intro .ac-controls button, .carousel-options button { min-height: 44px; min-width: 44px; }
.business-card p, .recruitment-integration > p, .recruitment-proof-label,
.recruitment-proof-steps span, #security .g-d, #security .sc-foot > p,
.agency-pilot .quote p, #tools .tile-head p { font-size: .875rem; line-height: 1.75; }
.recruitment-proof-steps strong { font-family: var(--font-mono); font-weight: 600; }
#tools .recruitment-review-row { border: 0; border-bottom: 1px solid var(--border); padding: .7rem 0; background: transparent; }
#tools .recruitment-review-note { color: var(--foreground); }
/* Main content must remain readable even if the reveal script fails to load. */
.reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
.news-form { flex-wrap: wrap; }
.news-label { flex-basis: 100%; font-size: .875rem; text-align: left; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Muted text on muted surfaces needs a little more contrast than on white. */
.carousel-options button:not([aria-selected="true"]),
#security .g-d, #security .sc-foot > p, .sec-well .section-head p {
  color: color-mix(in oklch, var(--muted-foreground) 90%, var(--foreground));
}

/* Platform illustrations: aligned cards with compact, contiguous content rows. */
#tools .bento { grid-auto-rows: auto; align-items: stretch; }
#tools .tile-head { min-height: 0; }
#tools .tile { gap: 1.25rem; }
#tools .mini { flex: 1; }
#tools .mini-body { flex: 1; align-content: stretch; }
#tools .t-model .mini-body { padding: 0; }
#tools .modelmini { width: 100%; height: auto; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(4, 1fr); justify-content: stretch; gap: 0; }
#tools .mm { min-height: 3.5rem; padding: 1rem; border: 0; border-bottom: 1px solid var(--border); font-size: .875rem; background: transparent; }
#tools .mm:last-child { border-bottom: 0; }
#tools .mm img { width: 20px; height: 20px; }
#tools .mm .tag { font-size: .75rem; color: var(--foreground); }
#tools .mini-bar { font-size: .75rem; padding: .75rem 1rem; line-height: 1.5; color: var(--foreground); }
#tools .t-iterate .mini-body { padding: 0 1rem 1rem; }
#tools .recruitment-review { gap: 0; grid-template-rows: auto auto 1fr; }
#tools .recruitment-review-row { display: grid; grid-template-columns: .8fr 1.2fr; align-items: start; gap: 1rem; padding-block: 1rem; font-size: .875rem; }
#tools .recruitment-review-row > span { color: var(--foreground); }
#tools .recruitment-review-row strong { align-items: baseline; }
#tools .recruitment-review-note { margin-top: .75rem; border: 0; padding: 1rem; background: var(--card); color: var(--card-foreground); }
.review-question { display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 600; margin-bottom: .5rem; }
#tools .recruitment-review-note p { font-size: .875rem; line-height: 1.75; }

/* Category tabs carry this heading once enhanced; headings remain in the static fallback. */
.agency-carousel.is-enhanced .recruitment-category-title { display: none; }

/* Customer proof follows the hero, separate from its primary actions. */
.recruitment-proof-strip { background: var(--muted); border-block: 1px solid var(--border); scroll-margin-top: 5rem; }
.recruitment-proof-strip > .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-block: 1.25rem; }
.recruitment-proof-strip p { font-size: .875rem; line-height: 1.75; }
.recruitment-proof-strip strong { font-weight: 600; }
.recruitment-proof-logo { display: inline-block; height: 1.2em; width: auto; max-width: 100%; margin-left: .75rem; vertical-align: middle; object-fit: contain; }
.dark .recruitment-proof-logo { background: var(--primary); padding: 2px; }
.recruitment-proof-strip a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; flex-shrink: 0; font-size: .875rem; text-underline-offset: .25em; }
.recruitment-proof-strip a:focus-visible { outline: 2px solid var(--foreground); outline-offset: 4px; }
@media (max-width: 719px) { .recruitment-proof-strip > .container { align-items: flex-start; flex-direction: column; gap: .25rem; } }

/* Match the preview's open columns. Two shared rows replace its four rows
   because the secondary labels and result taglines have been removed. */
@media (min-width: 720px) {
  :is(#outcomes, #services) .business-grid { row-gap: 1rem; }
  :is(#outcomes, #services) .business-card { display: grid; grid-template-rows: subgrid; grid-row: span 2; }
}

/* Four equal cards at multi-column widths, natural height when stacked. */
@media (min-width: 640px) {
  #tools .bento { grid-auto-rows: 1fr; }
  #tools .tile-head { min-height: 4.75rem; }
}
#tools .agentmini { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(4, 1fr); justify-content: stretch; }
#tools .flowmini { justify-content: flex-start; }
#tools .flowmini .fm { flex: 1; }
#tools .al, #tools .flowmini .fm { font-size: .8125rem; }

/* Outcomes retain the open-column layout and readable body contrast. */
#outcomes .business-card > p { color: color-mix(in oklch, var(--muted-foreground) 65%, var(--foreground)); }

/* Small, static product illustrations. No extra script or image assets. */
#outcomes .outcome-preview {
  margin: 0 0 .5rem; padding: 1rem; min-width: 0; min-height: 12rem;
  background: var(--card); color: var(--card-foreground); border: 1px solid var(--border);
  font: .75rem/1.5 var(--font-mono); display: flex; flex-direction: column;
}
.outcome-preview-header { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border); }
.outcome-preview-header strong { font-weight: 500; }
.outcome-preview-header > span { font-size: .625rem; color: color-mix(in oklch, var(--muted-foreground) 75%, var(--foreground)); }
.outcome-evidence blockquote { margin: .375rem -.5rem; padding: .5rem; background: var(--muted); color: var(--foreground); font-size: .8125rem; line-height: 1.6; }
.outcome-evidence-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: auto; }
.outcome-evidence-fields > div { display: grid; gap: .25rem; }
.outcome-evidence-fields span, .outcome-account-entry > span, .outcome-signal-result > span { font-size: .6875rem; color: color-mix(in oklch, var(--muted-foreground) 75%, var(--foreground)); }
.outcome-evidence-fields strong { font-weight: 500; color: var(--chart-4); }
.dark .outcome-evidence-fields strong { color: var(--chart-2); }
.outcome-account-entry { display: grid; gap: .25rem; padding-top: .75rem; }
.outcome-account-entry + .outcome-account-entry { border-top: 1px solid var(--border); margin-top: .75rem; }
.outcome-account-entry strong, .outcome-signal-result strong { font-weight: 500; }
.outcome-signal-sources { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; text-align: center; padding-top: .875rem; }
.outcome-signal-sources > span { padding: .35rem 0; font-size: .6875rem; }
.outcome-signal-connector { position: relative; height: .75rem; margin: 0 22% .75rem; border: 1px solid var(--border); border-top: 0; }
.outcome-signal-connector::after { content: ''; position: absolute; top: 100%; left: 50%; height: .75rem; border-left: 1px solid var(--border); }
.outcome-signal-result { display: grid; gap: .25rem; text-align: center; padding-top: .5rem; margin-top: auto; }
@media (min-width: 720px) { #outcomes .business-card { grid-row: span 3; } }

#services .business-card > p { color: color-mix(in oklch, var(--muted-foreground) 65%, var(--foreground)); }