/* ==========================================================================
   Vaia Recruiting v4 — Visual polish pass
   Editorial rhythm, projector legibility, intentional focus and safe zones.
   Loaded after styles.css so the original interaction system remains intact.
   ========================================================================== */

:root {
  --stone: #f6f4f1;
  --charcoal: #232323;
  --projector-copy: #4f4f4f;
  --safe-bottom: 72px;
}

/* 1. Quieter canvas and stronger presentation typography ----------------- */
.slide {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='52' height='52'><path d='M0 0.5H52M0.5 0V52' stroke='rgba(19,0,255,0.024)' fill='none'/></svg>");
}

.slide-inner {
  max-width: 1280px;
  padding-top: 72px;
  padding-bottom: var(--safe-bottom);
}

.h-2 { font-size: clamp(34px, 3.25vw, 50px); line-height: 1.02; }
.prod-body { font-size: clamp(16px, 1.34vw, 19px); line-height: 1.48; color: var(--projector-copy); }
.prod-stats span { font-size: 13.5px; line-height: 1.3; color: #5f5f70; }
.rail { color: #626274; font-size: 13.5px; }
.sfoot { color: #666678; font-size: 13px; margin-top: 10px; }
.sfoot:empty { display: none; }
.s-blue .rail b,
.s-blue .sfoot .tick { color: rgba(255,255,255,.74); }

/* Registration corners stay, but stop competing with the content. */
.slide.s-white::after { opacity: 0.42; }

/* 2. Quieter, auto-hiding controls --------------------------------------- */
.deck-meta {
  transition: opacity 240ms ease, transform 240ms var(--ease);
}

body.chrome-idle .deck-meta {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}
body.chrome-idle .deck-meta:focus-within {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

body.chrome-idle .brand { opacity: 0.72; }
.brand { transition: opacity 240ms ease; }

.thread {
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  pointer-events: none;
  opacity: 0.72;
}
.thread .th-line,
.thread .th-fill { top: auto; bottom: 0; height: 3px; }
.thread .th-line { background: rgba(19, 0, 255, 0.08); }
.thread .th-fill { background: var(--blue); }
.thread .th-tick,
.thread .th-dot { display: none; }
.scheme-blue .thread .th-line { background: rgba(255,255,255,.16); }
.scheme-blue .thread .th-fill { background: rgba(255,255,255,.72); }
.scheme-blue .deck-progress span { background: rgba(255,255,255,.72); }
.scheme-blue .wipe-edge { background: #fff; }

/* Give instructional hints a consistent, visible treatment. */
.rail .rail-hint {
  font-family: var(--f-body);
  font-size: 13px;
  letter-spacing: 0;
  color: var(--blue);
  opacity: 1;
}
.s-blue .rail .rail-hint { color: rgba(255,255,255,.72); }

/* 3. Layout rhythm: warm editorial sheets between technical sheets ------- */
.slide[id="eco"],
.slide[id="10"],
.slide[id="12"],
.slide[id="17"],
.slide[id="19"],
.slide[id="15"],
.slide[id="jobufo"] {
  background-color: var(--stone);
}

/* 4. Motion-led layouts ------------------------------------------------- */
.slide[id="1"] .hero-kick,
.slide[id="1"] .lead strong { color: #fff; }
.slide[id="1"] .hero-kick::before { background: rgba(255,255,255,.74); }
.slide[id="1"] .hero-h .mk-path { stroke: rgba(255,255,255,.78); }
.slide[id="1"] .hero-dot.lm,
.slide[id="1"] .hc-fig.lm { fill: rgba(255,255,255,.88); }
.slide[id="1"] .hub-ring { stroke: rgba(255,255,255,.68); }
.slide[id="1"] .hero-map .hm-cap b { color: var(--lime); }

.slide[id="2"] .zt:first-child .stat { color: var(--lime); }

.slide[id="20"] .slide-inner {
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  min-height: 100%;
  max-height: none;
  flex: 1 1 100%;
  padding-top: 62px;
  padding-bottom: var(--safe-bottom);
}
.slide[id="20"] .close-kick,
.slide[id="20"] .h-1,
.slide[id="20"] .lead,
.slide[id="20"] .recap,
.slide[id="20"] .cta-actions,
.slide[id="20"] .steps3 { width: min(100%, 960px); margin-left: auto; margin-right: auto; }
.slide[id="20"] .h-1 { font-size: clamp(40px, 4.35vw, 66px); max-width: 16ch; line-height: .98; }
.slide[id="20"] .lead { margin-top: 12px; color: rgba(255,255,255,.84); font-size: 18px; line-height: 1.38; max-width: 760px; }
.slide[id="20"] .recap { justify-content: center; gap: 28px; margin-top: 16px; margin-bottom: 14px; }
.slide[id="20"] .recap-i b { font-size: clamp(26px, 2.5vw, 38px); }
.slide[id="20"] .recap-i span { font-size: 14px; }
.slide[id="20"] .cta-actions { justify-content: center; }
.slide[id="20"] .steps3 { gap: 8px; margin-top: 18px; }
.slide[id="20"] .steps3 .st { flex: 1 1 0; padding: 9px 11px; gap: 8px; }
.slide[id="20"] .steps3 .st span { font-size: 13px; line-height: 1.28; }
.slide[id="20"] .close-path { opacity: .65; }
.slide[id="20"] .close-path path { stroke: var(--lime); }

/* 5. House of Brands: original animated interaction, restrained palette -- */
.slide[id="21"] .hob-cell.named.seg-on {
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.35) !important;
}
.slide[id="21"] .hob-cell.named.seg-on:hover,
.slide[id="21"] .hob-cell.named.seg-on:focus-visible {
  background: var(--lime) !important;
  color: var(--ink) !important;
}
.slide[id="21"] .hob-cell.named.seg-on:hover svg,
.slide[id="21"] .hob-cell.named.seg-on:focus-visible svg { stroke: var(--ink); }
.slide[id="21"] .hob-stage.segment-focused .hob-cell.named.seg-on {
  background: var(--lime) !important;
  border-color: var(--lime) !important;
  color: var(--ink) !important;
}
.slide[id="21"] .hob-stage.segment-focused .hob-cell.named.seg-on svg { stroke: var(--ink); }
.slide[id="21"] .hl-seg i { background: var(--blue-60, #2870ff) !important; }
.slide[id="21"] .hl-seg.on i { background: var(--lime) !important; }
.slide[id="21"] .hob-detail { min-height: 0; }
.slide[id="21"] .hob-detail .hd-mark { --a: var(--blue-60, #2870ff) !important; --a2: var(--blue) !important; }
.slide[id="21"] .rail-hint { color: rgba(255,255,255,.72); }
.slide[id="21"] .rail b,
.slide[id="21"] .sfoot .tick,
.slide[id="21"] .hob-note { color: rgba(255,255,255,.74); }

.slide[id="16"] .cvdb-step .cs-ic,
.slide[id="16"] .cv2-tag,
.slide[id="16"] .cvs-bar .ic,
.slide[id="16"] .cvs-score { color: rgba(255,255,255,.82); }
.slide[id="16"] .cvs-chips + .cvs-row .cvs-score { color: var(--lime); }

/* 6. Larger mockups without dead card space ------------------------------ */
.slide[id="15"] .as2 { align-items: center; gap: clamp(34px, 4vw, 64px); }
.slide[id="15"] .as-card {
  align-self: center;
  min-height: 0;
  border: 0;
  background: transparent;
  padding: 0;
  grid-template-columns: minmax(240px, .88fr) 1.12fr;
  align-items: center;
  gap: 24px;
}
.slide[id="15"] .as-mock { min-height: 390px; max-height: none; box-shadow: 6px 6px 0 rgba(19,0,255,.08); }
.slide[id="15"] .as-info { gap: 12px; }
.slide[id="15"] .as-body { font-size: 15px; }
.slide[id="15"] .as-bul li { font-size: 13.5px; }

.slide[id="22"] .aj { align-items: center; }
.slide[id="22"] .aj-publish,
.slide[id="22"] .aj-ats { justify-content: center; }
.slide[id="22"] .aj-board { flex: 0 0 auto; min-height: 0; align-items: stretch; }
.slide[id="22"] .aj-col { min-height: 228px; }
.slide[id="jobufo"] .phone { width: min(100%, 360px) !important; transform: scale(1.08); }

/* 7. Compact safe-zone rules --------------------------------------------- */
@media (max-height: 790px) {
  .slide-inner { padding-top: 64px; }
  .shead { margin-bottom: 14px; }
  .sfoot { margin-top: 6px; }
  .slide[id="20"] .recap { margin-top: 14px; margin-bottom: 12px; }
  .slide[id="20"] .steps3 { margin-top: 12px; }
  .slide[id="15"] .as-mock { min-height: 330px; }
}

@media (prefers-reduced-motion: reduce) {
  .deck-meta { transition: none; }
}

@media print {
  body { zoom: 1 !important; }
}