/* Keats — "How a Keats class works", variation 02 (HUD active card + scan)
   Needs keats-how-class.js to cycle the active step. Uses Inter + JetBrains Mono. */
.kc{--kc-navy:#1A2744;--kc-blue:#2F4FE6;--kc-deep:#0500A8;--kc-gold:#F5C451;--kc-muted:#4A5568;--kc-line:#E5E7EB;--kc-active:#C9D2F5;--kc-ease:cubic-bezier(.16,1,.3,1);
  color:var(--kc-navy);font-family:var(--font-sans,"Inter",system-ui,sans-serif)}
.kc__title{margin:0 0 12px;font-size:40px;font-weight:700;letter-spacing:-.025em;line-height:1.1}
.kc__sub{margin:0 0 40px;font-size:18px;line-height:1.5;color:var(--kc-muted)}
.kc__cards{list-style:none;margin:0;padding:12px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.kc__card{position:relative;border:1.5px solid var(--kc-line);border-radius:16px;padding:30px 30px 34px;background:#fff;
  background-image:linear-gradient(rgba(5,0,168,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(5,0,168,.04) 1px,transparent 1px);background-size:24px 24px;
  transition:border-color .4s}
.kc__card.is-on{border-color:var(--kc-active)}
.kc__icons{display:flex;gap:10px;align-items:center}
.kc__num{width:26px;height:26px;border-radius:50%;background:var(--kc-blue);color:#fff;font-size:12.5px;font-weight:700;display:grid;place-items:center;flex:none}
.kc__ring{width:26px;height:26px;transform:rotate(-90deg)}
.kc__ring circle{fill:none;stroke-width:3}.kc__ring-bg{stroke:#DDE3F3}
.kc__ring-fg{stroke:var(--kc-blue);stroke-linecap:round;stroke-dasharray:56.55;stroke-dashoffset:56.55;transition:stroke-dashoffset 1.2s var(--kc-ease)}
.kc__card.is-on .kc__ring-fg,.kc__card.is-done .kc__ring-fg{stroke-dashoffset:calc(56.55 * (1 - var(--p)))}
.kc__h{margin:22px 0 10px;font-size:19px;font-weight:700;letter-spacing:-.01em}
.kc__p{margin:0;font-size:15.5px;line-height:1.62;color:var(--kc-muted);text-wrap:pretty}
.kc__tag{position:absolute;top:30px;right:28px;display:flex;gap:8px;align-items:center;font:500 10.5px/1 var(--font-mono,"JetBrains Mono",monospace);letter-spacing:.12em;color:#9AA3B5;transition:color .3s}
.kc__dot{width:7px;height:7px;border-radius:50%;background:#D9DCE3;flex:none}
.kc__card.is-on .kc__tag{color:var(--kc-deep)}
.kc__card.is-on .kc__dot{background:var(--kc-gold);box-shadow:0 0 0 3px rgba(245,196,81,.3);animation:kc-blink 1.2s infinite}
@keyframes kc-blink{50%{opacity:.25}}
.kc__br{position:absolute;width:20px;height:20px;border:2px solid var(--kc-gold);opacity:0;pointer-events:none;transition:all .4s var(--kc-ease)}
.kc__br--tl{top:-4px;left:-4px;border-right:0;border-bottom:0}.kc__br--tr{top:-4px;right:-4px;border-left:0;border-bottom:0}
.kc__br--bl{bottom:-4px;left:-4px;border-right:0;border-top:0}.kc__br--br{bottom:-4px;right:-4px;border-left:0;border-top:0}
.kc__card.is-on .kc__br{opacity:1}
.kc__card.is-on .kc__br--tl{top:-10px;left:-10px}.kc__card.is-on .kc__br--tr{top:-10px;right:-10px}
.kc__card.is-on .kc__br--bl{bottom:-10px;left:-10px}.kc__card.is-on .kc__br--br{bottom:-10px;right:-10px}
.kc__scan{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.kc__scan::before{content:"";position:absolute;left:0;right:0;top:0;height:60px;background:linear-gradient(180deg,transparent,rgba(245,196,81,.22) 85%,rgba(245,196,81,.75));opacity:0}
.kc__card.is-on .kc__scan::before{animation:kc-scan var(--kc-step,3.2s) linear}
@keyframes kc-scan{0%{opacity:1;transform:translateY(-60px)}90%{opacity:1}100%{opacity:0;transform:translateY(var(--kc-h,360px))}}
@media (max-width:899px){
  .kc__title{font-size:30px}.kc__sub{font-size:16px;margin-bottom:28px}
  .kc__cards{grid-template-columns:1fr;gap:28px}
}
/* Keats change (Sam, 7 Nov 2026): the cycle keeps running under Reduce Motion, like the hero scan, the facts strip and the
   logo transition (Sam's Mac has Reduce Motion on and would otherwise see three static cards). */
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}