/* HireKeyz V7 — public website (Figma page 18:2)
   Source of truth: Desktop / Home 23:2 + public frames 22:* / 23:*
   Do NOT implement internal SaaS frames (5:*). */
@import url("hirekeyz-v7-tokens.css");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap");

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--hk-font);color:var(--hk-navy);background:var(--hk-surface);line-height:var(--hk-lh);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:none;box-shadow:var(--hk-focus);border-radius:4px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--hk-navy);color:#fff;padding:10px 16px;z-index:10000}
.skip-link:focus{left:12px;top:12px}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.staging-badge{position:fixed;right:12px;bottom:12px;z-index:9999;background:var(--hk-navy-deep);color:#fff;font-size:11px;padding:6px 10px;border-radius:6px;opacity:.85;pointer-events:none}

.container{width:min(100% - 48px,var(--hk-max));margin-inline:auto}
.hk-shell{max-width:var(--hk-desktop);margin:0 auto;background:var(--hk-surface)}

/* Header — 23:3 */
.site-header{background:#fff;border-bottom:1px solid transparent}
.nav-shell{display:flex;align-items:center;justify-content:space-between;min-height:var(--hk-header-h);padding:0 var(--hk-header-pad);gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:var(--hk-fw-bold);font-size:var(--hk-fs-brand);color:var(--hk-navy);text-decoration:none;letter-spacing:.02em}
.brand img{height:28px;width:auto}
.brand-word{text-transform:uppercase}
.nav-primary{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.nav-primary .nav-link,.nav-trigger{font-size:var(--hk-fs-nav);color:var(--hk-text);font-weight:400;background:none;border:0;cursor:pointer;padding:8px 6px;font-family:inherit}
.nav-sep{color:var(--hk-text);font-size:var(--hk-fs-nav);padding:0 2px;user-select:none}
.nav-item{position:relative}
.mega{display:none;position:absolute;top:100%;right:0;min-width:280px;background:var(--hk-hero-bg);border:1px solid var(--hk-border);border-radius:var(--hk-card-radius);padding:14px;z-index:100;box-shadow:0 12px 32px rgba(6,27,92,.08)}
.mega.open{display:flex;flex-direction:column;gap:8px}
.mega a{display:block;padding:12px 13px;border:1px solid var(--hk-border);border-radius:var(--hk-option-radius);background:#fff;font-size:var(--hk-fs-body-sm);color:var(--hk-navy);text-decoration:none}
.mega a:hover,.mega a:focus{background:var(--hk-soft);border-color:var(--hk-accent);border-width:2px;padding:11px 12px}
.mega .mega-hint{font-size:10px;color:var(--hk-text);margin:4px 0 0}
.nav-cta{display:none}
.menu-toggle{display:none;width:44px;height:44px;border:1px solid var(--hk-border);background:#fff;color:var(--hk-navy);font-size:17px;font-weight:700;cursor:pointer;border-radius:4px;font-family:inherit}
.mobile-panel{display:none;flex-direction:column;gap:8px;padding:16px 18px 24px;background:var(--hk-hero-bg);border-top:1px solid var(--hk-border)}
.mobile-panel.open{display:flex}
.mobile-panel a,.mobile-panel .btn{display:block;padding:14px 13px;border:1px solid var(--hk-border);border-radius:var(--hk-option-radius);background:#fff;font-size:var(--hk-fs-body-sm);color:var(--hk-navy);text-decoration:none}
.mobile-panel .btn-primary{background:var(--hk-navy);color:#fff;border-color:var(--hk-navy);text-align:center}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:41px;padding:11px 16px;border-radius:var(--hk-btn-radius);border:1px solid transparent;font-family:inherit;font-weight:var(--hk-fw-semibold);font-size:var(--hk-fs-body-sm);cursor:pointer;text-decoration:none;transition:background var(--hk-ease),border-color var(--hk-ease),color var(--hk-ease)}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--hk-navy);color:#fff;border-color:var(--hk-navy)}
.btn-primary:hover{background:#0a2470;color:#fff}
.btn-outline,.btn-outline-dark{background:#fff;color:var(--hk-navy);border-color:var(--hk-border)}
.btn-outline:hover,.btn-outline-dark:hover{border-color:var(--hk-accent);color:var(--hk-navy)}
.btn-ghost-light{background:#fff;color:var(--hk-navy);border-color:var(--hk-border)}
.btn-on-dark{background:transparent;color:#fff;border-color:rgba(221,230,240,.7)}
.btn-on-dark:hover{background:rgba(255,255,255,.08);color:#fff}

/* Hero — 23:6 cinematic full-bleed */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:min(72vh,640px);padding:clamp(48px,8vw,96px) var(--hk-hero-pad);text-align:left;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:14px;background:linear-gradient(135deg,var(--hk-navy-deep) 0%,var(--hk-navy) 55%,#0b6fb3 140%);color:#fff}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover;opacity:.42}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(3,17,61,.88) 0%,rgba(6,27,92,.72) 48%,rgba(11,111,179,.45) 100%)}
.hero > *:not(.hero-media){position:relative;z-index:1}
.hero.hero-federal{background:var(--hk-navy-deep)}
.hero.hero-federal .eyebrow{color:var(--hk-federal-eyebrow)}
.hero.hero-federal h1{color:#fff}
.hero.hero-federal .lead{color:var(--hk-federal-lead)}
.eyebrow{margin:0;font-size:var(--hk-fs-eyebrow);font-weight:var(--hk-fw-bold);letter-spacing:.08em;text-transform:uppercase;color:var(--hk-federal-eyebrow)}
.brand-signal{margin:0;font-size:var(--hk-fs-brand);font-weight:var(--hk-fw-bold);letter-spacing:.04em;color:#fff}
.hero h1{margin:0;font-size:clamp(1.75rem,3.6vw,2.65rem);font-weight:var(--hk-fw-bold);color:#fff;line-height:1.2;max-width:18ch}
.hero .lead{margin:0;font-size:var(--hk-fs-body);color:rgba(255,255,255,.88);max-width:var(--hk-hero-copy-max)}
.hero-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start}
.hero .btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.hero .btn-outline:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff}
.hero .btn-primary{background:#fff;color:var(--hk-navy);border-color:#fff}
.hero .btn-primary:hover{background:var(--hk-soft);color:var(--hk-navy)}
@media (prefers-reduced-motion:reduce){.hero-media video{display:none}}

/* Pillars / cards */
.section{padding:var(--hk-content-pad)}
.section-title{margin:0 0 22px;font-size:clamp(1.35rem,2.4vw,var(--hk-fs-section));font-weight:var(--hk-fw-bold);color:var(--hk-navy);text-align:left}
.pillar-grid,.card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--hk-card-gap)}
.hk-card{position:relative;border:1px solid var(--hk-border);border-radius:var(--hk-card-radius);padding:var(--hk-card-pad);padding-left:calc(var(--hk-card-pad) + 8px);display:flex;flex-direction:column;gap:9px;background:#fff;min-height:190px}
.hk-card::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:4px;border-radius:0 2px 2px 0;background:var(--hk-accent)}
.hk-card[data-pillar="talent"]::before{background:#f26b25}
.hk-card[data-pillar="technology"]::before{background:var(--hk-accent)}
.hk-card[data-pillar="federal"]::before{background:#1e3a73}
.hk-card[data-pillar="training"]::before{background:#268c73}
.hk-card[data-pillar="public"]::before{background:#1e3a73}
.hk-card[data-pillar="finance"]::before{background:var(--hk-accent)}
.hk-card[data-pillar="healthcare"]::before{background:#268c73}
.hk-card[data-pillar="enterprise"]::before{background:#f26b25}
.hk-card .idx{margin:0;font-size:var(--hk-fs-eyebrow-sm);font-weight:var(--hk-fw-bold);color:var(--hk-accent)}
.hk-card h3{margin:0;font-size:var(--hk-fs-card-title);font-weight:var(--hk-fw-bold);color:var(--hk-navy)}
.hk-card p{margin:0;font-size:var(--hk-fs-card-body);color:var(--hk-text);flex:1}
.hk-card .btn{align-self:flex-start;margin-top:auto}
.evidence-gate{padding:var(--hk-content-pad);background:var(--hk-soft)}
.evidence-gate .section-title{margin-bottom:10px}
.evidence-lead{margin:0 0 22px;max-width:70ch;color:var(--hk-text);font-size:var(--hk-fs-body)}
.evidence-note{margin:18px 0 0;font-size:12px;color:var(--hk-text);max-width:70ch}

/* CTA band — 23:42 */
.cta-band{margin:0 var(--hk-content-pad) var(--hk-content-pad);background:var(--hk-navy);border-radius:var(--hk-cta-radius);padding:22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cta-band p{margin:0;font-size:var(--hk-fs-cta-band);font-weight:var(--hk-fw-bold);color:#fff}

/* Architect + Explorer */
.tool-section{background:var(--hk-hero-bg);padding:28px;margin:0 var(--hk-content-pad) var(--hk-content-pad);border-radius:var(--hk-cta-radius)}
.tool-section h2{margin:0 0 15px;font-size:var(--hk-fs-architect-h);font-weight:var(--hk-fw-bold);color:var(--hk-navy)}
.pill{display:inline-flex;align-items:center;background:var(--hk-soft);color:var(--hk-accent);font-size:var(--hk-fs-eyebrow-sm);font-weight:var(--hk-fw-semibold);padding:5px 9px;border-radius:var(--hk-pill-radius);margin-bottom:15px}
.pill-success{background:var(--hk-success-bg);color:var(--hk-success-text)}
.option-list{display:flex;flex-direction:column;gap:15px;margin:0 0 15px}
.option-btn{display:block;width:100%;text-align:left;min-height:48px;padding:13px;border:1px solid var(--hk-border);border-radius:var(--hk-option-radius);background:#fff;font-family:inherit;font-size:var(--hk-fs-body-sm);color:var(--hk-navy);cursor:pointer}
.option-btn[aria-pressed="true"],.option-btn[aria-checked="true"],.option-btn.is-selected{background:var(--hk-soft);border:2px solid var(--hk-accent);padding:12px;font-weight:var(--hk-fw-semibold)}
.option-btn:hover{border-color:var(--hk-accent)}
.architect-panel[hidden],.architect-error[hidden],.architect-summary[hidden]{display:none!important}
.architect-error{color:#9b1c1c;font-size:var(--hk-fs-body-sm);margin:0 0 12px;padding:13px;border:1px solid #fecaca;border-radius:var(--hk-option-radius);background:#fff5f5}
.field-row{display:grid;gap:12px;margin-bottom:12px}
.field-row label{display:block;font-size:10px;font-weight:600;color:var(--hk-text);margin-bottom:4px}
.field-row input{width:100%;min-height:48px;padding:13px;border:1px solid var(--hk-border);border-radius:var(--hk-option-radius);font:inherit;font-size:var(--hk-fs-body-sm);color:var(--hk-navy);background:#fff}
.field-row input[aria-invalid="true"]{border-color:#9b1c1c}
.tool-note{font-size:10px;color:var(--hk-text);margin:12px 0 0}
.summary-rows{display:flex;flex-direction:column;gap:15px;margin:0 0 15px}
.summary-dl{margin:0;display:flex;flex-direction:column;gap:15px}
.summary-row{padding:13px;border:1px solid var(--hk-border);border-radius:var(--hk-option-radius);background:#fff;font-size:var(--hk-fs-body-sm);color:var(--hk-navy)}
.summary-row dt{display:inline;font-weight:var(--hk-fw-semibold);margin:0}
.summary-row dt::after{content:"  —  "}
.summary-row dd{display:inline;margin:0}

/* Motion poster strip — 22:270 states (optional, not in home hero) */
.motion-strip{margin:0 var(--hk-content-pad) var(--hk-content-pad)}
.motion-region{background:var(--hk-soft);border-radius:var(--hk-cta-radius);min-height:200px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.motion-region video,.motion-region img{width:100%;height:100%;object-fit:cover;max-height:360px}
.motion-region.reduced-motion video{display:none}
.motion-caption{font-size:10px;color:var(--hk-text);margin:8px 0 0}

/* Footer — 23:46 */
.site-footer{background:var(--hk-navy-deep);color:#fff;padding:30px;display:flex;flex-direction:column;gap:10px}
.site-footer .footer-brand{font-size:var(--hk-fs-brand);font-weight:var(--hk-fw-bold);margin:0;text-transform:uppercase}
.site-footer .footer-links{margin:0;font-size:var(--hk-fs-nav);color:var(--hk-footer-link)}
.site-footer .footer-links a{color:var(--hk-footer-link);text-decoration:none}
.site-footer .footer-links a:hover{text-decoration:underline}
.site-footer .footer-secondary{margin:0;font-size:10px;color:var(--hk-footer-muted)}
.site-footer .footer-secondary a{color:var(--hk-footer-muted)}
.site-footer .footer-legal{margin:0;font-size:9px;color:var(--hk-footer-legal)}
.site-footer .footer-legal a{color:var(--hk-footer-legal)}
.fraud-banner{margin:0 0 8px;padding:10px 12px;border:1px solid rgba(175,192,226,.35);border-radius:6px;font-size:11px;color:var(--hk-footer-link);max-width:72ch}

/* Umbrella */
.umbrella-page{padding:0 0 24px}
.breadcrumb{padding:16px var(--hk-content-pad);font-size:12px;color:var(--hk-text)}
.breadcrumb a{color:var(--hk-accent)}

@media (max-width:1100px){
  .pillar-grid,.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .nav-primary,.nav-cta{display:none}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center}
  .nav-shell{padding:0 18px}
  .hero{padding:24px;align-items:flex-start;text-align:left;gap:12px}
  .hero h1{font-size:var(--hk-fs-h1-mobile);max-width:none}
  .hero .lead{font-size:12px}
  .pillar-grid,.card-grid{grid-template-columns:1fr}
  .section{padding:22px}
  .hk-card{min-height:90px;padding:15px;gap:5px}
  .hk-card h3{font-size:14px}
  .hk-card p{font-size:10px}
  .cta-band{margin:0 22px 22px;flex-direction:column;align-items:flex-start}
  .tool-section,.motion-strip{margin:0 22px 22px;padding:22px}
  .site-footer{padding:22px}
}

/* V7 launch — workforce support + explorer panel */
.support-steps .support-lead { max-width: 46rem; margin: 0 0 1.5rem; }
.explorer-panel { margin: 1.25rem 0; padding: 1.25rem 0; }
.explorer-panel .explorer-summary { margin: 0.5rem 0 1rem; }
.explorer-facts { display: grid; gap: 0.75rem; margin: 0 0 1.25rem; }
.explorer-facts dt { font-weight: 600; margin: 0; }
.explorer-facts dd { margin: 0.15rem 0 0; }
.option-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
