/* CYGNVS Resilience Benchmark (preview and production). Ported from Lilly's two mock-ups (Assessment Flow, Combined Email
   Report), scoped under .cri-app so nothing here reaches the rest of the site. Light only: the
   site has no dark mode. */

/* page.php wraps the_content in a max-w-4xl py-16 prose section. Widen it to the mock-up width and
   let the theme token own the top gap under the fixed nav (published in inc/enqueue.php). */
.prose:has(.cri-app){max-width:1212px;padding-top:0}
.cri-app{
  --navy:#112344; --navy-2:#253352; --navy-ink:#F1F3FA; --navy-ink-2:#A9B6D0;
  --accent:#3772CB; --accent-tint:#F1F3FA; --accent-line:#C4CEEE;
  --pos:#1BA37B; --pos-ink:#14795C; --pos-tint:#E9F5F0; --pos-line:#BFE3D5;
  --gap:#8A6A2E; --gap-tint:#FCF4E7; --gap-line:#EBDCC0;
  --below:#9C4032; --level:#55627A; --above:#186454;
  --ink:#0A0F1A; --ink-2:#4D5562; --ink-3:#6A707B;
  --surface:#FFFFFF; --surface-2:#F9FAFB; --line:#E5E7EC; --line-2:#F3F4F6; --peer:#6A707B;
  --b1:#C9CFD8; --b2:#A7D9C6; --b3:#4FBB95; --b4:#14795C;
  --shadow:0 1px 3px rgba(17,35,68,.06),0 8px 24px rgba(17,35,68,.06);
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px;
  max-width:1180px;margin:0 auto;color:var(--ink);font-size:17px;line-height:1.55;
  padding-top:var(--cyg-header-clear, 110px);-webkit-font-smoothing:antialiased;
}
@media (max-width:640px){.cri-app{padding-top:var(--cyg-header-clear-sm, 92px)}}
.cri-app *{box-sizing:border-box}
.cri-app :is(h1,h2,h3,p,img,ul,figure){margin:0}
.cri-app [hidden]{display:none!important}
.cri-app button:focus-visible,.cri-app input:focus-visible,.cri-app select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.cri-app .cri-note{font-size:14.5px;color:var(--ink-3);background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--pos);border-radius:var(--r-sm);padding:10px 14px;margin:0 0 14px}
.cri-app .cri-error{color:#9C4032;font-weight:600;margin:0 0 14px}
.cri-app .sheet{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}

/* ---------- LANDING ---------- */
.cri-app .lhero{background:var(--navy);color:#fff;padding:44px 44px 48px;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px;align-items:center}
.cri-app .lhero .eyebrow{font-size:12px;color:var(--navy-ink-2);font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.cri-app .lhero h1{font-weight:700;font-size:45.5px;line-height:1.1;letter-spacing:-.028em;margin:14px 0 0;max-width:18ch;text-wrap:balance;color:#fff}
.cri-app .lhero p{font-size:19px;color:var(--navy-ink-2);max-width:52ch;margin:18px 0 0;line-height:1.6}
.cri-app .lhero .shot{margin:-10px -24px -24px 0;min-width:0}
.cri-app .lhero .shot img{display:block;width:100%;height:auto;max-width:none}
.cri-app .capture{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 22px;margin-top:30px;max-width:520px}
.cri-app .capture .cf{flex:1 1 240px;min-width:0;display:flex;flex-direction:column}
.cri-app .capture label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cri-app .capture input{font:inherit;font-size:19.5px;color:#fff;background:transparent;border:0;border-bottom:2px solid rgba(255,255,255,.9);
  border-radius:0;padding:10px 2px 11px;width:100%;box-shadow:none}
.cri-app .capture input::placeholder{color:rgba(255,255,255,.6)}
.cri-app .capture input:focus-visible{outline:none;border-bottom-color:#fff;box-shadow:0 2px 0 0 #fff}
.cri-app .capture input[aria-invalid="true"]{border-bottom-color:#FFB4A8}
.cri-app .capture .err{font-size:14.5px;color:#FFCFC7;margin-top:7px;min-height:1em}
.cri-app .capture .err:empty{display:none}
.cri-app .btn-pill{font:inherit;font-weight:600;font-size:18px;color:#fff;background:transparent;border:2px solid #fff;
  border-radius:999px;padding:12px 28px;cursor:pointer;white-space:nowrap;flex:0 0 auto}
/* Hover only where there is a real pointer: on touch, :hover sticks after a tap and makes the next
   question look pre-answered. Each block sits where the plain rule was, so the cascade order holds. */
@media (hover:hover) and (pointer:fine){
  .cri-app .btn-pill:hover{background:#fff;color:var(--navy)}
  .cri-app .lcta .btn-pill:hover{color:var(--pos-ink)}
}
.cri-app .lband{padding:34px 44px;border-bottom:1px solid var(--line-2)}
.cri-app .lband h2,.cri-app .lget h2{font-weight:600;font-size:24px;letter-spacing:-.016em;margin:0 0 6px;color:var(--ink)}
.cri-app .lband .deck{font-size:16.5px;color:var(--ink-2);margin:0 0 24px}
.cri-app .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.cri-app .step b{display:inline-flex;align-items:baseline;gap:.32em;font-size:13.5px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-bottom:14px;padding:6px 15px;border-radius:999px;
  background:linear-gradient(100deg,#177A61 0%,#219A7C 100%);box-shadow:0 4px 10px -5px rgba(23,122,97,.55)}
.cri-app .step b strong{font-weight:700;color:#fff}
.cri-app .step h3{font-size:18.5px;margin:0 0 5px;font-weight:600;color:var(--ink)}
.cri-app .step p{margin:0;font-size:15.5px;color:var(--ink-2);line-height:1.55}
.cri-app .lget{padding:34px 44px;background:var(--surface-2);border-bottom:1px solid var(--line-2)}
.cri-app .getgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:18px}
.cri-app :is(.getgrid,.tick,.incl) div{display:flex;gap:11px;align-items:flex-start;font-size:16px;color:var(--ink-2);line-height:1.55}
.cri-app :is(.getgrid,.tick,.incl) i{flex:0 0 auto;width:18px;height:18px;border-radius:50%;background:var(--pos-tint);border:1px solid var(--pos-line);
  color:var(--pos-ink);font-style:normal;font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:2px}
.cri-app .lcta{background:var(--pos-ink);color:#fff;padding:34px 44px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.cri-app .lcta h2{font-size:26px;margin:0;color:#fff;letter-spacing:-.018em}
.cri-app .lcta p{margin:6px 0 0;color:#D6EEE4;font-size:16px}
.cri-app .lcta > div:first-child{flex:1 1 320px;min-width:0}
.cri-app .lcta .capture{margin-top:0;flex:1 1 420px}

/* ---------- ASSESSMENT ---------- */
.cri-app .abar{background:var(--navy);color:#fff;padding:18px 32px;display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;justify-content:space-between}
.cri-app .abar .brand{font-weight:700;letter-spacing:.14em;font-size:16px}
.cri-app .abar .count{font-size:14.5px;font-weight:600;color:var(--navy-ink-2);font-variant-numeric:tabular-nums}
.cri-app .prog{height:3px;background:var(--line-2)}
.cri-app .prog i{display:block;height:100%;background:var(--pos);transition:width .28s ease}
@media (prefers-reduced-motion:reduce){.cri-app .prog i{transition:none}}
.cri-app .apad{padding:40px 44px 34px;min-height:430px}
.cri-app .qeyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--pos-ink)}
.cri-app .qtext{font-weight:600;font-size:28px;line-height:1.28;letter-spacing:-.018em;margin:10px 0 6px;max-width:34ch;text-wrap:balance;color:var(--ink)}
.cri-app .qhelp{font-size:15.5px;color:var(--ink-3);margin:0 0 22px;max-width:60ch}
.cri-app .opts{display:flex;flex-direction:column;gap:9px;max-width:720px}
.cri-app .opt{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px 16px;cursor:pointer;background:var(--surface);text-align:left;font:inherit;line-height:1.5;width:100%}
@media (hover:hover) and (pointer:fine){.cri-app .opt:hover{border-color:var(--accent-line);background:var(--accent-tint)}}
.cri-app .opt .key{flex:0 0 auto;width:24px;height:24px;border-radius:var(--r-xs);border:1px solid var(--line);
  background:var(--surface-2);color:var(--ink-3);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}
.cri-app .opt .txt{font-size:16.5px;color:var(--ink)}
.cri-app .opt[aria-checked="true"]{border-color:var(--pos);background:var(--pos-tint);box-shadow:inset 0 0 0 1px var(--pos)}
.cri-app .opt[aria-checked="true"] .key{background:var(--pos);border-color:var(--pos);color:#fff}
.cri-app .fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:720px}
.cri-app .field{display:flex;flex-direction:column;gap:6px}
.cri-app .field label{font-size:14.5px;font-weight:600;color:var(--ink-2)}
.cri-app .field input,.cri-app .field select{font:inherit;font-size:16.5px;padding:11px 12px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);color:var(--ink);width:100%}
.cri-app .consent{grid-column:1/-1;font-size:14px;color:var(--ink-3);line-height:1.6;margin-top:2px}
.cri-app .anav{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:0 44px 36px}
.cri-app .btn{font:inherit;font-weight:600;font-size:17px;padding:14px 26px;border-radius:var(--r-sm);border:none;cursor:pointer;display:inline-block;text-decoration:none}
.cri-app .btn-primary{background:var(--pos);color:#fff}
@media (hover:hover) and (pointer:fine){.cri-app .btn-primary:hover{background:#17916D}}
.cri-app .btn-primary:disabled,.cri-app .btn-primary[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.cri-app .btn-back{font:inherit;font-size:17px;background:transparent;border:1px solid var(--line);color:var(--ink-2);font-weight:500;
  padding:12px 18px;border-radius:var(--r-sm);cursor:pointer;text-decoration:none;display:inline-block}
@media (hover:hover) and (pointer:fine){.cri-app .btn-back:hover{border-color:var(--ink-3)}}
.cri-app .navhint{font-size:14px;color:var(--ink-3)}
.cri-app .center{max-width:620px}
.cri-app .center h2{font-weight:600;font-size:32.5px;letter-spacing:-.022em;margin:0 0 12px;line-height:1.2;color:var(--ink)}
.cri-app .center p{font-size:17px;color:var(--ink-2);line-height:1.6;margin:0 0 14px}
.cri-app .tick{display:flex;flex-direction:column;gap:10px;margin:20px 0 26px}
.cri-app .cri-noscript{padding:20px;font-weight:600}

/* ---------- RESULT (from the email report mock-up) ---------- */
.cri-app #criResult{max-width:760px;margin:0 auto}
.cri-app .mtop{background:var(--navy);color:#fff;padding:26px 32px}
.cri-app .mtop .brand{font-weight:700;letter-spacing:.14em;font-size:13px;color:var(--navy-ink-2)}
.cri-app .mtop h1{font-weight:600;font-size:26px;letter-spacing:-.02em;line-height:1.2;margin:12px 0 0;color:#fff}
.cri-app .mtop .who{font-size:13.5px;color:var(--navy-ink-2);margin-top:8px}
.cri-app .mbody{padding:30px 32px}
.cri-app .mbody .intro{font-size:15.5px;color:var(--ink-2);line-height:1.65;margin:0 0 20px}
.cri-app .mscore{text-align:center;padding:6px 0 4px}
.cri-app .mscore .k{font-size:11px;color:var(--ink-3);font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.cri-app .mscore .num{font-weight:700;font-size:68px;line-height:.94;letter-spacing:-.042em;font-variant-numeric:tabular-nums;margin-top:6px;color:var(--ink)}
.cri-app .mscore .pill{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:6px 14px;border-radius:var(--r-sm);
  font-size:13px;font-weight:600;background:var(--pos-tint);color:var(--pos-ink);border:1px solid var(--pos-line)}
.cri-app .mscore .pill.gap{background:var(--gap-tint);color:var(--gap);border-color:var(--gap-line)}
.cri-app .mscore .pill .dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.cri-app .track{margin:26px 0 0;position:relative;height:54px}
.cri-app .track .bar{position:absolute;top:16px;left:0;right:0;height:12px;display:flex;border-radius:6px;overflow:hidden}
.cri-app .track .bar i{height:100%;display:block;border-right:1px solid var(--surface)}
.cri-app .track .bar i:last-child{border-right:none}
.cri-app .track .b1{background:var(--b1)} .cri-app .track .b2{background:var(--b2)}
.cri-app .track .b3{background:var(--b3)} .cri-app .track .b4{background:var(--b4)}
.cri-app .track .you{position:absolute;top:0;transform:translateX(-50%);width:3px;height:30px;background:var(--ink);border-radius:2px}
.cri-app .track .pr{position:absolute;top:0;transform:translateX(-50%);width:2px;height:30px;
  background-image:linear-gradient(var(--peer) 50%,transparent 0);background-size:2px 5px;background-repeat:repeat-y}
.cri-app .tracklab{display:flex;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}
.cri-app .tracklab span{text-align:center;border-top:1px solid var(--line);padding-top:6px}
.cri-app .trackkey{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px;font-size:12.5px;color:var(--ink-3);align-items:center}
.cri-app .trackkey i{display:inline-block;width:3px;height:12px;background:var(--ink);margin-right:6px;vertical-align:-2px}
.cri-app .trackkey .d i{width:2px;background-color:transparent;background-image:linear-gradient(var(--peer) 50%,transparent 0);background-size:2px 4px;background-repeat:repeat-y}
.cri-app .peerline{margin-top:28px;font-size:15.5px;color:var(--ink-2);line-height:1.6}
.cri-app .peerline b{color:var(--ink);font-weight:600}
.cri-app .msec{margin-top:30px;padding-top:26px;border-top:1px solid var(--line-2)}
.cri-app .msec h2{font-weight:600;font-size:19px;letter-spacing:-.014em;margin:0 0 14px;color:var(--ink)}
.cri-app .msec .deck{font-size:14px;color:var(--ink-2);margin:-8px 0 16px;line-height:1.55}
.cri-app .dims{display:flex;flex-direction:column;gap:1px;background:var(--line-2);border:1px solid var(--line-2);border-radius:var(--r-md);overflow:hidden}
.cri-app .drow{display:grid;grid-template-columns:170px minmax(0,1fr) 48px 96px;gap:12px;align-items:center;
  background:var(--surface);padding:12px 14px 12px 12px;border-left:3px solid var(--navy-2)}
.cri-app .drow .nm{font-size:14px;font-weight:600;line-height:1.3}
.cri-app .dbar{position:relative;height:18px;background:var(--surface-2);border-radius:var(--r-xs)}
.cri-app .dbar .fill{position:absolute;left:0;top:0;height:100%;border-radius:var(--r-xs);background:var(--navy)}
.cri-app .drow .fig{font-size:13.5px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
.cri-app .pp{display:inline-flex;align-items:center;gap:6px;justify-content:flex-end}
.cri-app .cmp{display:flex;justify-content:flex-end}
.cri-app .pptrack{position:relative;width:30px;height:12px;flex:0 0 auto}
.cri-app .pptrack::before{content:"";position:absolute;top:5px;left:0;right:0;height:1px;background:var(--line)}
.cri-app .pptrack::after{content:"";position:absolute;top:2px;left:50%;width:1px;height:8px;background:var(--line);transform:translateX(-50%)}
.cri-app .ppdot{position:absolute;top:2px;width:8px;height:8px;border-radius:50%;transform:translateX(-50%);box-shadow:0 0 0 2px var(--surface)}
.cri-app .ppword{font-size:11.5px;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.cri-app .p-below .ppdot{background:var(--below);left:10%} .cri-app .p-below .ppword{color:var(--below)}
.cri-app .p-level .ppdot{background:var(--level);left:50%} .cri-app .p-level .ppword{color:var(--level)}
.cri-app .p-above .ppdot{background:var(--above);left:90%} .cri-app .p-above .ppword{color:var(--above)}
.cri-app .legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;font-size:12.5px;color:var(--ink-3);align-items:center}
.cri-app .legend .lg-bar{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:6px;vertical-align:-1px;background:var(--navy)}
.cri-app .legend .lg-pp{display:inline-flex;align-items:center;gap:6px}
.cri-app .incl{display:flex;flex-direction:column;gap:11px}
.cri-app .incl div{font-size:15px}
.cri-app .mcta{background:var(--pos-ink);color:#fff;padding:30px 32px;text-align:center}
.cri-app .mcta h2{font-size:22px;margin:0 0 8px;color:#fff;letter-spacing:-.018em;line-height:1.25}
.cri-app .mcta p{margin:0 auto 20px;color:#D6EEE4;font-size:15px;max-width:44ch;line-height:1.55}
.cri-app .mcta .btn{background:#fff;color:var(--pos-ink);font-size:15px;cursor:default}
.cri-app .mfoot{background:var(--navy);color:var(--navy-ink-2);padding:18px 32px;font-size:12px;line-height:1.7}
.cri-app .cri-again{max-width:760px;margin:18px auto 0}
.cri-app .cri-details{max-width:760px;margin:18px auto 0;font-size:14px;color:var(--ink-2);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);padding:12px 16px}
.cri-app .cri-details summary{cursor:pointer;font-weight:600}
.cri-app .cri-details table{width:100%;border-collapse:collapse;margin:12px 0}
.cri-app .cri-details th,.cri-app .cri-details td{text-align:left;padding:5px 6px;border-bottom:1px solid var(--line-2)}
.cri-app .cri-details p{margin:8px 0 0}

/* ---------- PRODUCTION: contact-step errors and the "Check your inbox" screen ---------- */
.cri-app .field .err{font-size:14px;color:var(--below);line-height:1.45}
.cri-app .field .err:empty{display:none}
.cri-app .field input[aria-invalid="true"]{border-color:var(--below)}
.cri-app .send-err{grid-column:1/-1;margin:0;color:var(--below);font-weight:600;font-size:15px}
.cri-app .cri-done h2:focus{outline:none}
.cri-app .cri-done p b{color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.cri-app .apad:has(.cri-done){min-height:0}

@media (max-width:780px){
  .cri-app .lhero{padding:30px 20px 34px;grid-template-columns:1fr}
  .cri-app .lhero h1{font-size:33.5px}
  .cri-app .lhero .shot{margin:4px -8px -14px}
  .cri-app :is(.lband,.lget,.lcta){padding:26px 20px}
  .cri-app .steps{grid-template-columns:1fr}
  .cri-app .abar,.cri-app .apad{padding-left:20px;padding-right:20px}
  .cri-app .apad{padding-top:28px}
  .cri-app .anav{padding:0 20px 28px}
  .cri-app .qtext{font-size:22.5px}
  .cri-app .fields{grid-template-columns:1fr}
  .cri-app .mtop,.cri-app .mbody,.cri-app .mcta,.cri-app .mfoot{padding-left:20px;padding-right:20px}
  .cri-app .drow{grid-template-columns:1fr 48px;gap:6px}
  .cri-app .drow .nm{grid-column:1/-1}
  .cri-app .drow .cmp{grid-column:1/-1;justify-content:flex-start}
  .cri-app .tracklab{font-size:8.5px;letter-spacing:.03em}
}
/* Confidentiality note under the email capture (Sammi, 2026-10-02). */
.cri-app .capture p.capture-note{flex-basis:100%;margin:8px 0 0;font-size:13px;line-height:1.45;color:rgba(255,255,255,.75)}
/* Spam trap field: off-screen, never shown to people (Scott, 2026-10-05: simple trap only). */
.cri-app .hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- MOBILE (QA 2026-10-13) ---------- */
/* Touch screens: the "Press A-D" keyboard hint means nothing. The intro's saved-progress hint stays. */
@media (hover:none) and (pointer:coarse){.cri-app .keyhint{display:none}}
/* Phone landscape: little height, so drop the card's minimum height and tighten the bar. */
@media (max-height:500px){
  .cri-app .apad{min-height:0;padding-top:24px}
  .cri-app .abar{padding-top:12px;padding-bottom:12px}
}
/* 320px screens: narrower gutters so the Industry value is not cut off. Select text stays at
   16.5px (16px or more), so iOS does not zoom on focus. */
@media (max-width:360px){
  .prose:has(.cri-app){padding-left:12px;padding-right:12px}
  .cri-app .abar,.cri-app .apad{padding-left:16px;padding-right:16px}
  .cri-app .anav{padding:0 16px 24px}
  .cri-app .field select{padding-left:8px;padding-right:8px}
  .cri-app .abar .count{font-size:13px}
}