/* Kestrel landing page. Own palette (primary #2563eb on white, slate neutrals), scoped to .k so the app keeps
   its theme; applies in light and dark system themes alike. #2563eb on white is 5.2:1 (WCAG AA). */

.k {
  color-scheme: light;
  --primary: #2563eb; --primary-hover: #1d4ed8; --primary-soft: #eef3ff; --on-primary: #fff;
  --ok: #059669; --ok-soft: #e7f7f0; --warn: #c2410c; --warn-soft: #fff1e7; --violet: #7c3aed;
  --bg: #ffffff; --bg-soft: #f6f8fc; --surface: #ffffff; --surface-2: #f8fafc;
  --border: #e3e8f0; --border-strong: #cbd5e1;
  --text: #0f172a; --text-2: #334155; --muted: #64748b; --faint: #94a3b8;
  --ring: 0 0 0 3px rgba(37, 99, 235, .3);
  --shadow-md: 0 4px 16px -4px rgba(15, 23, 42, .08), 0 2px 4px -2px rgba(15, 23, 42, .04);
  --shadow-lg: 0 40px 80px -40px rgba(30, 58, 138, .35), var(--shadow-md);
  --k-max: 1180px; --k-pad: max(16px, calc((100vw - var(--k-max)) / 2));
  position: relative; background: var(--bg); color: var(--text); overflow-x: clip; isolation: isolate; font-family: var(--font);
}
.k h1, .k h2, .k h3, .k p { margin: 0; }
.k .mono { font-family: var(--mono); letter-spacing: -.01em; }
.k-bgfx { position: absolute; inset: 0 0 auto; height: 900px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(700px 420px at 85% 0%, rgba(37, 99, 235, .10), transparent 70%),
    linear-gradient(var(--bg) 0, transparent 30%, var(--bg) 100%),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(15, 23, 42, .045) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(15, 23, 42, .045) 39px 40px); }

/* ---------------------------------------------------------------- buttons, pills */
.k-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 10px; font: 650 14px/1 var(--font);
  border: 1px solid transparent; background: transparent; color: var(--text); cursor: pointer; text-decoration: none !important; white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s, box-shadow .25s, transform .2s var(--ease); }
.k-btn:active { transform: scale(.98); }
.k-btn:focus-visible, .k a:focus-visible, .k summary:focus-visible, .k select:focus-visible, .k button:focus-visible { outline: none; box-shadow: var(--ring); }
.k-btn.sm { height: 36px; padding: 0 14px; font-size: 13px; }
.k-btn.xs { height: 30px; padding: 0 10px; font-size: 12px; border-radius: 8px; }
.k-btn.lg { height: 50px; padding: 0 22px; font-size: 15px; }
.k-btn.block { width: 100%; }
.k-btn.primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 10px 24px -12px var(--primary); }
.k-btn.primary:hover { background: var(--primary-hover); }
.k-btn.primary:disabled { opacity: .6; cursor: progress; }
.k-btn.line { background: var(--surface); border-color: var(--border-strong); }
.k-btn.line:hover { border-color: var(--primary); color: var(--primary); }
.k-btn.ghost:hover { background: var(--bg-soft); }
.k-btn.outline-light { color: #fff; border-color: rgba(255, 255, 255, .35); }
.k-btn.outline-light:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }
.k-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: var(--bg-soft); color: var(--muted); white-space: nowrap; }
.k-pill.ok { background: var(--ok-soft); color: var(--ok); }
.k-pill.warn { background: var(--warn-soft); color: var(--warn); }

/* ---------------------------------------------------------------- nav */
.k-nav { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 14px var(--k-pad); border-bottom: 1px solid transparent; transition: background .3s, border-color .3s; }
.k-nav.scrolled { background: rgba(255, 255, 255, .86); backdrop-filter: blur(12px) saturate(1.2); border-color: var(--border); }
.k-mark { display: inline-flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none !important; font: 750 18px/1 var(--font); letter-spacing: -.02em; }
.k-mark img { border-radius: 8px; }
.k-links { display: flex; gap: 2px; margin-left: 22px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.k-links a { color: var(--text-2); font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 7px; text-decoration: none !important; }
.k-links a:hover { background: var(--primary-soft); color: var(--primary); }
@media (max-width: 860px) { .k-links { display: none; } }

/* ---------------------------------------------------------------- hero */
.k-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; padding: 56px var(--k-pad) 72px; }
@media (max-width: 980px) { .k-hero { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 28px; } }
.k-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text-2); padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.k-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.k-tag.dark { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #cbd5e1; }
.k .k-title { margin: 22px 0 20px; font: 800 clamp(40px, 5.6vw, 68px)/1.02 var(--font); letter-spacing: -.045em; text-wrap: balance; }
.k-title .hl { color: var(--primary); }
.k-sub { max-width: 560px; font-size: clamp(16px, 1.35vw, 18px); line-height: 1.65; color: var(--text-2); }
.k-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.k-ctas.center { justify-content: center; }
.k-trust { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--muted); }
.k-trust.center { justify-content: center; }
.k-trust.light { color: #94a3b8; }
.k-trust li::before { content: "✓"; margin-right: 6px; color: var(--ok); font-weight: 700; }
@media (max-width: 520px) { .k-ctas .k-btn { flex: 1 1 100%; } }

/* app-window card (hero) */
.k-win { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; }
.k-win-bar { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); font-size: 11.5px; color: var(--muted); }
.k-win-bar .k-pill { margin-left: auto; }
.k-dots { display: flex; gap: 6px; } .k-dots i { width: 9px; height: 9px; border-radius: 50%; background: #f87171; } .k-dots i:nth-child(2) { background: #fbbf24; } .k-dots i:nth-child(3) { background: #34d399; }
.k-win-body { padding: 18px; display: grid; gap: 14px; }
.k-cand, .k-best { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.k-cand { padding-bottom: 14px; border-bottom: 1px dashed var(--border); }
.k-cand b, .k-best b { display: block; font-size: 16px; margin: 3px 0 2px; }
.k-best b { font-size: 17px; }
.k-lbl { display: block; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.k-small { font-size: 13px; color: var(--muted); line-height: 1.5; }
.k-win-f { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--muted); }
.k-win-f span { display: inline-flex; align-items: center; gap: 6px; }

/* score ring + bars */
.k-ring { --p: 80; flex: none; position: relative; display: grid; place-items: center; align-content: center; width: 52px; height: 52px; border-radius: 50%;
  background: conic-gradient(var(--primary) calc(var(--p) * 1%), var(--border) 0); }
.k-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--surface); }
.k-ring b, .k-ring small { position: relative; line-height: 1; }
.k-ring b { font: 800 15px/1 var(--font); color: var(--primary); }
.k-ring small { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.k-ring.lg { width: 64px; height: 64px; } .k-ring.lg b { font-size: 19px; }
.k-bar { display: grid; grid-template-columns: 110px 1fr 54px; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-2); }
.k-bar i { position: relative; height: 6px; border-radius: 99px; background: var(--bg-soft); overflow: hidden; }
.k-bar i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--primary), #60a5fa); }
.k-bar b { font-size: 11.5px; text-align: right; color: var(--text); }

/* ---------------------------------------------------------------- sections */
.k-sec { padding: 88px var(--k-pad) 0; }
@media (max-width: 700px) { .k-sec { padding-top: 64px; } }
.k-head { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.k-head.left { margin-left: 0; text-align: left; }
.k-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--primary); margin-bottom: 12px; }
.k-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.k-h2 { font: 800 clamp(28px, 3.6vw, 42px)/1.1 var(--font); letter-spacing: -.035em; text-wrap: balance; }
.k-lead { margin-top: 14px !important; font-size: 16.5px; line-height: 1.65; color: var(--text-2); }
.k-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); margin-bottom: 16px; }
.k-ic.sm { width: 34px; height: 34px; margin: 0; flex: none; }
.k-box { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px; box-shadow: var(--shadow-md); }
.k-box-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; font-weight: 700; font-size: 14px; }
.k-box-h > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.k-unavail { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 14px; }

/* sandbox */
.k-sandbox { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 940px) { .k-sandbox { grid-template-columns: minmax(0, 1fr); } }
.k-side { display: grid; gap: 16px; }
.k-side .k-lbl { margin: 14px 0 8px; }
.k-side .k-lbl:first-of-type { margin-top: 0; }
.k-chipset { display: flex; flex-wrap: wrap; gap: 6px; }
.k-opt { font: 600 12.5px/1 var(--font); padding: 8px 11px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.k-opt:hover { border-color: var(--primary); color: var(--primary); }
.k-opt[aria-checked="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.k-select { width: 100%; height: 40px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: 500 14px var(--font); }
.k-skills { margin: 4px 0 16px; }
.k-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.k-tags + .k-tags { margin-top: 6px; }
.k-tags span { font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 7px; background: var(--primary-soft); color: var(--primary); }
.k-tags.muted span { background: var(--bg-soft); color: var(--text-2); font-weight: 500; }
.k-tags span.hit { background: var(--ok-soft); color: var(--ok); }
.k-tags span.miss { background: var(--warn-soft); color: var(--warn); }
.k-note { margin-top: 10px !important; font-size: 11px; color: var(--muted); text-align: center; }
.k-out { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.k-out b { display: block; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.k-out span { font-size: 12px; color: var(--muted); }
.k-out em { flex: none; font-style: normal; font-size: 11px; font-weight: 600; color: var(--warn); background: var(--warn-soft); padding: 3px 8px; border-radius: 6px; }
.k-results-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.k-results-h b { color: var(--text); }
#kTop { display: grid; gap: 12px; }
.k-job { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px; box-shadow: var(--shadow-md); animation: k-in .45s var(--ease) both var(--d, 0ms); }
.k-job.sk { height: 150px; background: linear-gradient(90deg, var(--bg-soft), var(--surface-2), var(--bg-soft)); background-size: 200% 100%; animation: k-shimmer 1.2s linear infinite; box-shadow: none; }
.k-job-top { display: flex; justify-content: space-between; gap: 16px; }
.k-job-t { min-width: 0; }
.k-job h3 { font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.k-job p { font-size: 13px; color: var(--muted); margin-top: 3px; }
.k-src { font-size: 11px !important; color: var(--faint) !important; }
.k-job .k-tags { margin-top: 12px; }
.k-why { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 12.5px; color: var(--text-2); }
.k-why span { display: inline-flex; align-items: center; gap: 5px; }
.k-why svg { color: var(--primary); }
.k-job-f { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--muted); }

/* stats band */
.k-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 72px var(--k-pad) 0; }
@media (max-width: 860px) { .k-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.k-stat { padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.k-stat b { display: block; font: 800 30px/1 var(--font); letter-spacing: -.03em; color: var(--primary); }
.k-stat span { display: block; margin-top: 8px; font-size: 14px; font-weight: 700; }
.k-stat small { font-size: 12.5px; color: var(--muted); }

/* how it works */
.k-flowsteps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 860px) { .k-flowsteps { grid-template-columns: minmax(0, 1fr); } }
.k-flowsteps li { position: relative; padding: 24px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.k-n { position: absolute; top: 20px; right: 22px; font-size: 12px; color: var(--faint); }
.k-flowsteps h3, .k-fcard h3 { font-size: 16.5px; }
.k-flowsteps p, .k-fcard p { margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }

/* feature cards */
.k-cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.k-cards3.small { margin-top: 16px; }
@media (max-width: 900px) { .k-cards3 { grid-template-columns: minmax(0, 1fr); } }
.k-fcard { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); transition: border-color .2s, box-shadow .25s; }
.k-fcard:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); box-shadow: var(--shadow-lg); }
.k-fcard.row { flex-direction: row; gap: 14px; align-items: flex-start; padding: 18px; }
.k-fcard.row p { font-size: 13.5px; }
.k-mini { margin-top: auto; padding-top: 18px; display: grid; gap: 9px; font-size: 12px; }
.k-mini .k-bar { grid-template-columns: 82px 1fr 56px; font-size: 12px; }
.k-gap em { font-style: normal; color: var(--warn); }
.k-line { padding: 8px 10px; border-radius: 8px; background: var(--bg-soft); color: var(--text-2); }
.k-line.ok { background: var(--ok-soft); color: var(--ok); }
.k-line.warn { background: var(--warn-soft); color: var(--warn); }
.k-stage { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.k-stage span { text-align: center; padding: 8px 4px; border-radius: 7px; font-weight: 600; font-size: 11px; }
.k-stage .s1 { background: var(--bg-soft); color: var(--text-2); } .k-stage .s2 { background: var(--primary-soft); color: var(--primary); }
.k-stage .s3 { background: #f3edff; color: var(--violet); } .k-stage .s4 { background: var(--ok-soft); color: var(--ok); }

/* FAQ */
.k-faq-list { max-width: 820px; display: grid; gap: 8px; }
.k-faq details { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.k-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; cursor: pointer; list-style: none; font-weight: 700; font-size: 15px; border-radius: 12px; }
.k-faq summary::-webkit-details-marker { display: none; }
.k-faq summary span { font-size: 20px; font-weight: 400; color: var(--primary); transition: transform .2s; }
.k-faq details[open] summary span { transform: rotate(45deg); }
.k-faq details p { padding: 0 20px 18px; font-size: 14.5px; line-height: 1.65; color: var(--text-2); }

/* final CTA + footer */
.k-final { text-align: center; padding: clamp(44px, 6vw, 72px) 24px; border-radius: 20px; color: #e2e8f0;
  background: radial-gradient(520px 260px at 20% 0%, rgba(37, 99, 235, .45), transparent 70%), radial-gradient(460px 240px at 85% 100%, rgba(124, 58, 237, .3), transparent 70%), #0b1220; }
.k .k-final h2 { max-width: 760px; margin: 18px auto 0; font: 800 clamp(28px, 3.8vw, 44px)/1.1 var(--font); letter-spacing: -.035em; color: #fff; text-wrap: balance; }
.k .k-final p { max-width: 600px; margin: 14px auto 0; font-size: 16.5px; line-height: 1.6; color: #94a3b8; }
.k-foot { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 28px; padding: 44px var(--k-pad) 48px; margin-top: 72px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }
@media (max-width: 700px) { .k-foot { grid-template-columns: minmax(0, 1fr); } }
.k-foot p { margin-top: 10px !important; max-width: 380px; line-height: 1.6; }
.k-foot nav { display: grid; gap: 8px; align-content: start; }
.k-foot nav b { color: var(--text); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.k-foot nav a { color: var(--text-2); text-decoration: none; }
.k-foot nav a:hover { color: var(--primary); }
.k-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 11.5px; }
.k-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }

/* ---------------------------------------------------------------- motion */
@keyframes k-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes k-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .k *, .k *::before, .k *::after { animation: none !important; transition: none !important; } }

/* ================================================================ motion & graphics
   Everything animates transform/opacity (or a registered custom property), so it stays smooth. All of it is
   switched off by the prefers-reduced-motion rule at the end of this block. */

@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* scroll reveal */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--rd, 0ms); }
.rv.in { opacity: 1; transform: none; }
.k-cards3 > .rv:nth-child(2) { --rd: 100ms; } .k-cards3 > .rv:nth-child(3) { --rd: 200ms; }

/* hero entrance */
.k-hero-copy > * { animation: k-rise .9s var(--ease) both; }
.k-hero-copy > :nth-child(2) { animation-delay: .08s; } .k-hero-copy > :nth-child(3) { animation-delay: .18s; }
.k-hero-copy > :nth-child(4) { animation-delay: .28s; } .k-hero-copy > :nth-child(5) { animation-delay: .38s; }
.k-title .hl { background: linear-gradient(100deg, #2563eb 0%, #4f46e5 40%, #2563eb 60%, #0ea5e9 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: k-sheen 6s ease-in-out infinite; }
.k-tag i { animation: k-ping 2s infinite; }

/* hero art: orbs, floating chips, glowing card */
.k-hero-art { position: relative; padding: 64px 0 60px; animation: k-rise 1s var(--ease) both .2s; }
.k-orbs i { position: absolute; border-radius: 50%; filter: blur(50px); opacity: .55; z-index: -1; }
.k-orbs i:first-child { width: 280px; height: 280px; right: -40px; top: -30px; background: #93c5fd; animation: k-drift 14s ease-in-out infinite; }
.k-orbs i:last-child { width: 220px; height: 220px; left: -30px; bottom: -20px; background: #c4b5fd; animation: k-drift 18s ease-in-out infinite reverse; }
.k-hero-card { position: relative; z-index: 2; animation: k-float 7s ease-in-out infinite; }
.k-hero-card .k-win { position: relative; }
.k-hero-card .k-win::before { content: ""; position: absolute; inset: -1px; border-radius: 17px; padding: 1px; z-index: 3; pointer-events: none;
  background: conic-gradient(from var(--ang), transparent 0 65%, #60a5fa 78%, #2563eb 85%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: k-spin 5s linear infinite; }
.k-scan { position: absolute; left: 0; right: 0; top: 44px; height: 70px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(37, 99, 235, .07), transparent); animation: k-scan 4.5s ease-in-out infinite; }
.k-win-body { position: relative; z-index: 2; }
.k-stream { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.k-chip { position: absolute; display: inline-flex; align-items: center; gap: 7px; max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 12px; font-weight: 600; padding: 7px 11px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md);
  animation: k-chip-in .7s var(--ease) both calc(.6s + var(--i) * .18s), k-bob 6s ease-in-out infinite calc(var(--i) * -1.1s); }
.k-chip b { font-size: 11px; color: #fff; background: var(--primary); padding: 2px 6px; border-radius: 6px; }
.k-chip.ok { border-color: #bfd3fb; color: var(--text); }
.k-chip.no { color: var(--faint); text-decoration: line-through; text-decoration-color: rgba(194, 65, 12, .6);
  animation: k-chip-in .7s var(--ease) both calc(.6s + var(--i) * .18s), k-bob 6s ease-in-out infinite calc(var(--i) * -1.1s), k-fadeout 5s ease-in-out infinite calc(1.8s + var(--i) * .4s); }
.k-chip.no i { font-style: normal; color: var(--warn); text-decoration: none; }
@media (max-width: 1180px) { .k-stream { display: none; } }

/* rings + bars fill in */
.k-ring { animation: k-ring 1.3s var(--ease) both .3s; }
.k-bar i::after { animation: k-grow 1.2s var(--ease) both .5s; transform-origin: left; }
.k-mini .k-bar i::after { animation: none; transform: scaleX(0); transition: transform 1.2s var(--ease) .3s; }
.k-fcard.in .k-mini .k-bar i::after { transform: scaleX(1); }
.k-fcard.in .k-mini .k-bar:nth-child(2) i::after { transition-delay: .45s; } .k-fcard.in .k-mini .k-bar:nth-child(3) i::after { transition-delay: .6s; }

/* application stages light up in turn; ATS lines type in */
.k-stage span { animation: k-stage 4s ease-in-out infinite; }
.k-stage span:nth-child(2) { animation-delay: 1s; } .k-stage span:nth-child(3) { animation-delay: 2s; } .k-stage span:nth-child(4) { animation-delay: 3s; }
.k-fcard.in .k-line.ok, .k-fcard.in .k-line.warn { animation: k-type .9s steps(28) both .4s; }
.k-fcard.in .k-line.warn { animation-delay: 1.1s; }

/* sandbox */
.k-out { animation: k-in .5s var(--ease) both var(--d, 0ms); }
.k-out b { background: linear-gradient(currentColor, currentColor) no-repeat 0 55% / 0 1px; animation: k-strike .6s var(--ease) both calc(var(--d, 0ms) + 400ms); }
.k-opt { transition: background .15s, border-color .15s, color .15s, transform .15s; }
.k-opt:active { transform: scale(.95); }
.k-btn.primary { position: relative; overflow: hidden; }
.k-btn.primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-100%); }
.k-btn.primary:hover::after { transform: translateX(100%); transition: transform .7s var(--ease); }
.k-job { transition: border-color .2s, box-shadow .25s, transform .25s var(--ease); }
.k-job:hover { transform: translateY(-2px); border-color: #bfd3fb; box-shadow: var(--shadow-lg); }

/* cards lift */
.k-fcard, .k-flowsteps li, .k-stat { transition: border-color .2s, box-shadow .25s, transform .5s var(--ease), opacity .8s var(--ease); }
.k-fcard.in:hover, .k-flowsteps li.in:hover, .k-stat.in:hover { transform: translateY(-4px); transition-delay: 0ms; }
.k-flowsteps li .k-ic, .k-fcard .k-ic { transition: transform .4s var(--ease); }
.k-flowsteps li:hover .k-ic, .k-fcard:hover .k-ic { transform: rotate(-8deg) scale(1.08); }
.k-flowsteps li::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--primary), #60a5fa); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease) .4s; }
.k-flowsteps li.in::after { transform: scaleX(1); }

/* sources marquee */
.k-sources { padding: 22px 0 26px; border-block: 1px solid var(--border); background: var(--surface-2); text-align: center; }
.k .k-sources p { font-size: 11.5px; color: var(--muted); margin-bottom: 14px; text-transform: uppercase; letter-spacing: .08em; }
.k-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.k-track { display: flex; width: max-content; animation: k-marq 40s linear infinite; }
.k-marquee:hover .k-track { animation-play-state: paused; }
.k-track-set { display: flex; gap: 14px; padding-right: 14px; }
.k-track span { font-size: 14px; font-weight: 700; color: var(--text-2); padding: 8px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); white-space: nowrap; }

/* stats */
.k-stat { position: relative; overflow: hidden; }
.k-stat::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--primary), #60a5fa, #a78bfa); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) .2s; }
.k-stat.in::before { transform: scaleX(1); }

/* final CTA: slow aurora + fading grid */
.k-final { position: relative; overflow: hidden; isolation: isolate; }
.k-final::before { content: ""; position: absolute; inset: -40%; z-index: -1;
  background: conic-gradient(from 0deg at 50% 50%, rgba(37, 99, 235, .35), rgba(124, 58, 237, .25), rgba(14, 165, 233, .25), rgba(37, 99, 235, .35));
  filter: blur(60px); animation: k-spin2 22s linear infinite; }
.k-final::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background: repeating-linear-gradient(0deg, transparent 0 31px, rgba(255, 255, 255, .05) 31px 32px), repeating-linear-gradient(90deg, transparent 0 31px, rgba(255, 255, 255, .05) 31px 32px);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); }

@keyframes k-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes k-sheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes k-ping { 0% { box-shadow: 0 0 0 0 rgba(5, 150, 105, .5); } 80%, 100% { box-shadow: 0 0 0 7px rgba(5, 150, 105, 0); } }
@keyframes k-drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-30px, 24px) scale(1.12); } }
@keyframes k-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes k-spin { to { --ang: 360deg; } }
@keyframes k-spin2 { to { transform: rotate(360deg); } }
@keyframes k-scan { 0% { transform: translateY(0); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateY(330px); opacity: 0; } }
@keyframes k-chip-in { from { opacity: 0; transform: translateY(14px) scale(.92); } }
@keyframes k-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes k-fadeout { 0%, 55% { opacity: 1; } 75%, 90% { opacity: .25; } 100% { opacity: 1; } }
@keyframes k-ring { from { --p: 0; } }
@keyframes k-grow { from { transform: scaleX(0); } }
@keyframes k-stage { 0%, 30%, 100% { filter: none; transform: none; } 10% { filter: brightness(.94) saturate(1.4); transform: translateY(-2px); box-shadow: 0 6px 14px -8px rgba(15, 23, 42, .35); } }
@keyframes k-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes k-strike { to { background-size: 100% 1px; } }
@keyframes k-marq { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .k *, .k *::before, .k *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1; transform: none; }
  .k-mini .k-bar i::after { transform: none; }
  .k-chip.no { opacity: .6; }
  .k-out b { background-size: 100% 1px; }
}

/* the strike-through follows the text itself, across wrapped lines */
.k-out b { display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.k-out span { display: block; margin-top: 3px; }

/* ================================================================ site footer (site.js) */
.k-footer { margin-top: 88px; padding: 56px var(--k-pad) 28px; background: #0b1220; color: #94a3b8; font-size: 14px; position: relative; overflow: hidden; isolation: isolate; }
.k-footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(96, 165, 250, .6), transparent); }
.k-footer::after { content: ""; position: absolute; z-index: -1; width: 520px; height: 320px; right: -120px; top: -160px; border-radius: 50%; background: rgba(37, 99, 235, .22); filter: blur(80px); }
.k-footer h3 { margin: 0 0 14px; font: 700 12px/1.2 var(--font); text-transform: uppercase; letter-spacing: .08em; color: #e2e8f0; }
.k-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.k-footer a { color: #cbd5e1; text-decoration: none; border-radius: 6px; transition: color .15s; }
.k-footer a:hover { color: #fff; }
.k-footer a:focus-visible, .k-footer input:focus-visible, .k-footer button:focus-visible { outline: 2px solid #60a5fa; outline-offset: 3px; box-shadow: none; }
.k-footer .k-mark { color: #fff; font-size: 20px; }

.k-f-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: start; padding-bottom: 40px; border-bottom: 1px solid rgba(148, 163, 184, .16); }
.k-f-tag { margin: 16px 0 6px !important; font-size: 17px; font-weight: 700; color: #fff; }
.k-f-desc { max-width: 460px; line-height: 1.65; }
.k-f-social { display: flex !important; flex-wrap: wrap; gap: 8px !important; margin-top: 20px !important; }
.k-f-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(148, 163, 184, .22); background: rgba(255, 255, 255, .03); color: #cbd5e1;
  transition: background .2s, border-color .2s, color .2s, transform .2s var(--ease); }
.k-f-social a:hover { background: var(--primary); border-color: var(--primary); color: #fff; transform: translateY(-2px); }

.k-f-news { padding: 22px; border-radius: 14px; border: 1px solid rgba(148, 163, 184, .18); background: rgba(255, 255, 255, .03); }
.k-f-news h3 { text-transform: none; letter-spacing: -.01em; font-size: 17px; margin-bottom: 6px; }
.k-f-news > p { line-height: 1.55; font-size: 13.5px; }
.k-f-news-row { display: flex; gap: 8px; margin-top: 14px; }
.k-f-news input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(148, 163, 184, .3); background: rgba(15, 23, 42, .6); color: #fff; font: 500 14px var(--font); }
.k-f-news input::placeholder { color: #64748b; }
.k-f-news .k-btn { height: 44px; }
.k-f-news-msg { min-height: 18px; margin-top: 8px !important; font-size: 13px; }
.k-f-news-msg.ok { color: #6ee7b7; } .k-f-news-msg.err { color: #fca5a5; }
.k-f-fine { font-size: 12px; color: #64748b; }
.k-f-fine a { color: #94a3b8; text-decoration: underline; text-underline-offset: 2px; }

.k-f-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding: 40px 0; }
.k-f-contact a, .k-f-addr { display: inline-flex; align-items: flex-start; gap: 8px; overflow-wrap: anywhere; }
.k-f-contact svg { flex: none; margin-top: 2px; color: #60a5fa; }

.k-f-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-top: 22px; border-top: 1px solid rgba(148, 163, 184, .16); font-size: 13px; color: #64748b; }
.k-f-bottom p { margin: 0; }
.k-f-bottom-links { display: flex; gap: 18px; }
.k-f-bottom-links a { color: #94a3b8; }

@media (max-width: 960px) {
  .k-f-top { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .k-f-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .k-footer { padding-top: 44px; }
  .k-f-cols { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .k-f-news-row { flex-direction: column; }
  .k-f-bottom { flex-direction: column; }
  .k-footer ul a { display: inline-block; padding: 3px 0; } /* bigger touch targets */
}

/* ================================================================ info & legal pages (pages/info.js) */
.k-info { max-width: 820px; margin: 0 auto; padding: 32px 16px 0; }
.k-crumbs { display: flex; gap: 8px; font-size: 12px; color: var(--muted); }
.k-crumbs a { color: var(--primary); text-decoration: none; }
.k-crumbs a:hover { text-decoration: underline; }
.k-info-h { padding: 26px 0 28px; border-bottom: 1px solid var(--border); margin-bottom: 28px; }
.k .k-info-h h1 { font: 800 clamp(32px, 4.5vw, 48px)/1.08 var(--font); letter-spacing: -.035em; }
.k-info-date { margin-top: 14px !important; font-size: 12px; color: var(--muted); }
.k-prose { color: var(--text-2); font-size: 16px; line-height: 1.75; }
.k .k-prose h2 { margin: 34px 0 10px; font: 750 20px/1.3 var(--font); color: var(--text); letter-spacing: -.015em; }
.k .k-prose h2:first-child { margin-top: 0; }
.k .k-prose p { margin: 0 0 14px; }
.k-prose ul { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 8px; }
.k-prose li::marker { color: var(--primary); }
.k-prose b { color: var(--text); }
.k-prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.k-prose code { font-family: var(--mono); font-size: .88em; padding: 1px 6px; border-radius: 5px; background: var(--bg-soft); border: 1px solid var(--border); }
.k-info-note { padding: 16px 18px; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--border); }
.k-info-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 32px; padding: 22px; border-radius: 14px; background: var(--primary-soft); }
.k .k-info-cta p { margin: 0; font-weight: 700; color: var(--text); }
.k-info-cta .k-btn, .k-prose .k-btn { text-decoration: none; }
.k-info-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 8px; }
.k-info-card { padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.k-info-card .k-ic { margin-bottom: 12px; }
.k .k-info-card h3 { font-size: 15px; color: var(--text); }
.k .k-info-card p { margin: 4px 0 0; font-size: 14px; }
.k-info-card p.v { font-weight: 700; overflow-wrap: anywhere; }
.k-info-social { display: inline-flex; align-items: center; gap: 6px; margin: 0 14px 8px 0; }
.k-table-wrap { overflow-x: auto; margin-bottom: 16px; border: 1px solid var(--border); border-radius: 12px; }
.k-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.k-table th, .k-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.k-table th { background: var(--surface-2); color: var(--text); font-weight: 700; }
.k-table tr:last-child td { border-bottom: 0; }
.k-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.k-cat { padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); transition: border-color .2s, transform .25s var(--ease); }
.k-cat:hover { border-color: #bfd3fb; transform: translateY(-2px); }
.k-cat-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.k .k-cat-h h3 { font-size: 15.5px; color: var(--text); }
.k .k-cat-ind { margin: 2px 0 10px; font-size: 12.5px; color: var(--muted); }
.k-cat ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13.5px; }
.k-cat li { display: flex; justify-content: space-between; gap: 8px; }
.k-cat li span { color: var(--muted); font-family: var(--mono); font-size: 12px; }
.k-infopage .k-footer { margin-top: 72px; }

/* ================================================================ extra landing sections */
.k-more { margin-top: 18px !important; }
.k-more a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--primary); text-decoration: none; }
.k-more a:hover { gap: 10px; }
.k-more a, .k-more a svg { transition: gap .2s var(--ease); }

/* browse by category */
.k-catgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 960px) { .k-catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .k-catgrid { grid-template-columns: minmax(0, 1fr); } }
.k-catcard { position: relative; display: grid; gap: 4px; padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); text-decoration: none;
  transition: border-color .2s, box-shadow .25s, transform .3s var(--ease), opacity .8s var(--ease); overflow: hidden; }
.k-catcard::after { content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%; background: var(--primary-soft); transition: transform .4s var(--ease); z-index: 0; }
.k-catcard > * { position: relative; z-index: 1; }
.k-catcard.in:hover { transform: translateY(-3px); border-color: #bfd3fb; box-shadow: var(--shadow-lg); transition-delay: 0ms; }
.k-catcard:hover::after { transform: scale(1.5); }
.k-cat-n { font-size: 22px; font-weight: 700; color: var(--primary); }
.k-catcard b { font-size: 15px; }
.k-cat-roles { font-size: 12.5px; color: var(--muted); line-height: 1.45; }

/* who it's for */
.k-aud { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1060px) { .k-aud { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .k-aud { grid-template-columns: minmax(0, 1fr); } }
.k-aud-card { display: flex; flex-direction: column; gap: 6px; padding: 22px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  transition: border-color .2s, box-shadow .25s, transform .3s var(--ease), opacity .8s var(--ease); }
.k-aud-card.in:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: #bfd3fb; transition-delay: 0ms; }
.k-aud-card .k-ic { margin-bottom: 8px; }
.k-aud-card:nth-child(2) .k-ic { background: #f3edff; color: var(--violet); }
.k-aud-card:nth-child(3) .k-ic { background: var(--ok-soft); color: var(--ok); }
.k-aud-card:nth-child(4) .k-ic { background: var(--warn-soft); color: var(--warn); }
.k-aud-card h3 { font-size: 16px; }
.k .k-aud-card p { font-size: 14px; line-height: 1.6; color: var(--text-2); }
.k-aud-card .k-tags { margin-top: auto; padding-top: 12px; }

/* comparison table */
.k-cmp-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-md); }
.k-cmp { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14.5px; }
.k-cmp th, .k-cmp td { padding: 15px 18px; border-bottom: 1px solid var(--border); text-align: center; }
.k-cmp tbody tr:last-child th, .k-cmp tbody tr:last-child td { border-bottom: 0; }
.k-cmp thead th { font-size: 13px; font-weight: 700; color: var(--muted); background: var(--surface-2); }
.k-cmp thead th.us { color: #fff; background: var(--primary); }
.k-cmp tbody th { text-align: left; font-weight: 600; color: var(--text); }
.k-cmp td.us { background: var(--primary-soft); }
.k-cmp tbody tr { transition: background .15s; }
.k-cmp tbody tr:hover { background: var(--surface-2); }
.k-mark-yes, .k-mark-no, .k-mark-part { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-weight: 800; font-size: 14px; }
.k-mark-yes { background: var(--primary); color: #fff; }
.k-mark-no { color: var(--faint); }
.k-mark-part { background: var(--bg-soft); color: var(--muted); }
.k-cmp-wrap.in .k-mark-yes { animation: k-pop .45s var(--ease) both; }
.k-cmp-wrap.in tr:nth-child(2) .k-mark-yes { animation-delay: .06s; } .k-cmp-wrap.in tr:nth-child(3) .k-mark-yes { animation-delay: .12s; }
.k-cmp-wrap.in tr:nth-child(4) .k-mark-yes { animation-delay: .18s; } .k-cmp-wrap.in tr:nth-child(5) .k-mark-yes { animation-delay: .24s; }
.k-cmp-wrap.in tr:nth-child(6) .k-mark-yes { animation-delay: .3s; } .k-cmp-wrap.in tr:nth-child(7) .k-mark-yes { animation-delay: .36s; }

/* where the jobs come from */
.k-src3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .k-src3 { grid-template-columns: minmax(0, 1fr); } }
.k-srccard { display: flex; flex-direction: column; gap: 6px; padding: 24px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  transition: border-color .2s, box-shadow .25s, transform .3s var(--ease), opacity .8s var(--ease); }
.k-srccard.in:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); transition-delay: 0ms; }
.k .k-srccard p { font-size: 14px; line-height: 1.6; color: var(--text-2); }
.k-srccard .k-tags { margin-top: auto; padding-top: 12px; }

/* privacy & trust band */
.k-trustband { padding: clamp(24px, 4vw, 40px); border-radius: 20px; border: 1px solid #d6e2fb; background: linear-gradient(135deg, #f4f8ff, #ffffff 60%, #f6f2ff); }
.k-trust-h { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.k-trust-h .k-ic { width: 52px; height: 52px; border-radius: 14px; margin: 0; flex: none; }
.k-trust-h .k-eyebrow { margin-bottom: 4px; }
.k-trust-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 960px) { .k-trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .k-trust-list { grid-template-columns: minmax(0, 1fr); } }
.k-trust-list li { display: flex; gap: 12px; align-items: flex-start; }
.k-trust-list b { display: block; font-size: 14.5px; margin-bottom: 3px; }
.k .k-trust-list p { font-size: 13.5px; line-height: 1.55; color: var(--text-2); }

@keyframes k-pop { from { transform: scale(0); } 70% { transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .k-cmp-wrap .k-mark-yes { animation: none !important; } }

/* "Built for people tired of irrelevant job feeds": three coloured step cards with a preview each */
.k-steps3 { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 900px) { .k-steps3 { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.k-step3 { --c: #2563eb; --c2: #60a5fa; --soft: #eef3ff; --ink: #1e3a8a;
  position: relative; display: flex; flex-direction: column; padding: 26px 24px 22px; border-radius: 20px; overflow: hidden; isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
  background: linear-gradient(160deg, var(--soft) 0%, #fff 55%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 40px -26px color-mix(in srgb, var(--c) 60%, transparent);
  transition: transform .35s var(--ease), box-shadow .35s, border-color .25s, opacity .8s var(--ease); }
.k-step3.violet { --c: #7c3aed; --c2: #a78bfa; --soft: #f4efff; --ink: #4c1d95; }
.k-step3.green { --c: #059669; --c2: #34d399; --soft: #e9f8f1; --ink: #065f46; }
.k-step3::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--c), var(--c2)); }
.k-step3::after { content: ""; position: absolute; z-index: -1; width: 200px; height: 200px; right: -70px; top: -70px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c2) 35%, transparent), transparent 70%); transition: transform .5s var(--ease); }
.k-step3.in:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--c) 75%, transparent); transition-delay: 0ms; }
.k-step3:hover::after { transform: scale(1.3); }

.k-step3-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.k-step3 .k-ic { width: 52px; height: 52px; border-radius: 14px; margin: 0; color: #fff; background: linear-gradient(135deg, var(--c), var(--c2));
  box-shadow: 0 10px 20px -10px var(--c); transition: transform .4s var(--ease); }
.k-step3 .k-ic svg { width: 24px; height: 24px; }
.k-step3:hover .k-ic { transform: rotate(-8deg) scale(1.06); }
.k-step3-n { font-size: 44px; font-weight: 700; line-height: .9; letter-spacing: -.04em; color: color-mix(in srgb, var(--c) 18%, transparent); }
.k-step3-k { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--c); }
.k .k-step3 h3 { margin: 6px 0 8px; font-size: 19px; color: var(--ink); }
.k .k-step3 p { font-size: 14.5px; line-height: 1.6; color: var(--text-2); }

/* previews */
.k-step3-prev { margin-top: auto; padding-top: 18px; }
.k-step3-prev > div { padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .85); border: 1px solid color-mix(in srgb, var(--c) 16%, transparent); backdrop-filter: blur(4px); }
.k-sv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.k-sv-chips span { font-size: 12px; font-weight: 650; padding: 5px 10px; border-radius: 8px; background: var(--soft); color: var(--ink); }
.k-sv-chips span:first-child { background: var(--c); color: #fff; }
.k-sv-src { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.k-sv-src span { font-size: 12px; font-weight: 650; padding: 5px 10px; border-radius: 8px; background: var(--soft); color: var(--ink); }
.k-sv-src b { margin-left: auto; font-size: 12.5px; color: var(--c); }
.k-sv-score { display: grid; gap: 6px; }
.k-sv-score div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; background: var(--soft); font-size: 13px; font-weight: 600; color: var(--ink); }
.k-sv-score b { font-size: 12px; color: #fff; background: var(--c); padding: 2px 8px; border-radius: 6px; }
.k-sv-score .out { background: #f8fafc; color: var(--faint); }
.k-sv-score .out span { text-decoration: line-through; }
.k-sv-score .out b { background: #fee2e2; color: #dc2626; }

/* entrance: previews slide up, chips stagger */
.k-step3.in .k-step3-prev > div { animation: k-in .6s var(--ease) both calc(var(--rd, 0ms) + 350ms); }
.k-step3.in .k-sv-chips span, .k-step3.in .k-sv-src span, .k-step3.in .k-sv-score div { animation: k-in .45s var(--ease) both; }
.k-step3.in :is(.k-sv-chips, .k-sv-src) span:nth-child(2), .k-step3.in .k-sv-score div:nth-child(2) { animation-delay: .55s; }
.k-step3.in :is(.k-sv-chips, .k-sv-src) span:nth-child(3), .k-step3.in .k-sv-score div:nth-child(3) { animation-delay: .65s; }
.k-step3.in :is(.k-sv-chips, .k-sv-src) span:nth-child(4) { animation-delay: .75s; }
.k-step3.in .k-sv-chips span:nth-child(5) { animation-delay: .85s; }

/* arrows between the cards (desktop) */
@media (min-width: 901px) {
  .k-step3:not(:last-child) .k-step3-top::after { content: "→"; position: absolute; right: -19px; top: 50%; z-index: 3; display: grid; place-items: center; width: 34px; height: 34px;
    border-radius: 50%; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-md); color: var(--c); font-weight: 800; transform: translateY(-50%); }
  .k-step3 { overflow: visible; }
  .k-step3::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .k-step3 *, .k-step3 { animation: none !important; } }

/* the accent strip follows the card's rounded top corners */
.k-step3::before { border-radius: 20px 20px 0 0; inset: -1px -1px auto; }

/* ================================================================ header & menu (site.js siteNav) */
.k-nav { gap: 8px; }
.k-nav .k-mark { margin-right: 18px; }
.k-menu { display: flex; align-items: center; gap: 2px; margin: 0; padding: 4px; list-style: none; border: 1px solid var(--border); border-radius: 12px; background: rgba(255, 255, 255, .7); backdrop-filter: blur(8px); }
.k-dd { position: relative; }
.k-dd-btn, .k-menu-link { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; border: 0; border-radius: 9px; background: transparent; color: var(--text-2);
  font: 650 13.5px/1 var(--font); cursor: pointer; text-decoration: none !important; transition: background .15s, color .15s; }
.k-dd-btn:hover, .k-menu-link:hover, .k-dd.open .k-dd-btn { background: var(--primary-soft); color: var(--primary); }
.k-dd-btn.current, .k-menu-link.current { color: var(--primary); }
.k-dd-btn.current::after, .k-menu-link.current::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--primary); transform: translateX(-50%); }
.k-dd-btn, .k-menu-link { position: relative; }
.k-dd-btn:focus-visible, .k-menu-link:focus-visible, .k-burger:focus-visible { outline: none; box-shadow: var(--ring); }
.k-caret { width: 12px; height: 12px; transition: transform .2s var(--ease); }
.k-dd.open .k-caret { transform: rotate(180deg); }

.k-dd-panel { position: absolute; top: calc(100% + 10px); left: -8px; z-index: 40; width: 320px; padding: 8px; display: grid; gap: 2px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface);
  box-shadow: 0 30px 60px -20px rgba(15, 23, 42, .35), 0 0 0 1px rgba(15, 23, 42, .02); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top left;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s .18s; }
.k-dd-panel::before { content: ""; position: absolute; inset: -12px 0 auto; height: 12px; } /* hover bridge between button and panel */
.k-dd.open .k-dd-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.k-dd-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 11px; color: var(--text) !important; text-decoration: none !important; transition: background .15s; }
.k-dd-item:hover, .k-dd-item:focus-visible { background: var(--surface-2); outline: none; }
.k-dd-item:hover .k-dd-ic, .k-dd-item:focus-visible .k-dd-ic, .k-dd-item.current .k-dd-ic { background: var(--primary); color: #fff; }
.k-dd-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); transition: background .15s, color .15s; }
.k-dd-item b { display: block; font-size: 14px; font-weight: 700; }
.k-dd-item small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.k-dd-item.current b { color: var(--primary); }

/* scroll progress */
.k-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.k-progress i { display: block; height: 100%; background: linear-gradient(90deg, #2563eb, #60a5fa, #a78bfa); transform-origin: left; transform: scaleX(0); }
.k-nav { position: sticky; }

/* sections land below the sticky header */
.k [id] { scroll-margin-top: 84px; }

/* mobile menu */
.k-burger { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 42px; height: 42px; padding: 0 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; }
.k-burger span { display: block; height: 2px; border-radius: 2px; background: var(--text); transition: transform .25s var(--ease), opacity .2s; }
.drawer-open .k-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.drawer-open .k-burger span:nth-child(2) { opacity: 0; }
.drawer-open .k-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.k-drawer { position: fixed; inset: 0; z-index: 29; padding-top: 68px; background: rgba(15, 23, 42, .4); backdrop-filter: blur(4px); animation: k-fade-in .2s ease; }
.k-drawer[hidden] { display: none; }
.k-drawer-in { max-height: calc(100dvh - 68px); overflow-y: auto; padding: 16px 16px 24px; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: 0 30px 60px -30px rgba(15, 23, 42, .5); animation: k-drop .25s var(--ease); }
.k-drawer section { padding: 8px 0 12px; border-bottom: 1px solid var(--border); }
.k-drawer h3 { margin: 4px 4px 6px; font: 700 11.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.k-dr-item { display: flex; align-items: center; gap: 12px; padding: 12px 8px; border-radius: 10px; color: var(--text) !important; font-weight: 650; font-size: 15px; text-decoration: none !important; }
.k-dr-item svg { color: var(--primary); }
.k-dr-item:hover, .k-dr-item:focus-visible { background: var(--surface-2); outline: none; }
.k-drawer-cta { display: grid; gap: 10px; padding-top: 16px; }
.k-drawer-cta .k-btn { width: 100%; }
html.k-noscroll { overflow: hidden; }
@keyframes k-fade-in { from { opacity: 0; } }
@keyframes k-drop { from { transform: translateY(-12px); opacity: 0; } }

@media (max-width: 1060px) {
  .k-menu { display: none; }
  .k-burger { display: inline-flex; }
}
@media (max-width: 520px) { .k-hide-sm { display: none !important; } .k-nav .k-btn.sm { padding: 0 12px; } }
@media (prefers-reduced-motion: reduce) { .k-dd-panel, .k-drawer, .k-drawer-in, .k-caret, .k-burger span { transition: none !important; animation: none !important; } }

/* ================================================================ "Get in touch" header button (animated) */
.k-touch { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 6px; border-radius: 999px; border: 1px solid #bfd3fb; overflow: hidden; isolation: isolate;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, #2563eb, #a78bfa, #60a5fa) border-box; border-color: transparent;
  color: #1d4ed8; font: 700 13.5px/1 var(--font); cursor: pointer; transition: transform .2s var(--ease), box-shadow .25s; }
.k-touch-ic { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #2563eb, #7c3aed); }
.k-touch-ic::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(37, 99, 235, .55); animation: k-touch-ping 2.4s ease-out infinite; }
.k-touch-ic svg { animation: k-touch-wiggle 4.8s ease-in-out infinite; }
.k-touch::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(96, 165, 250, .25) 50%, transparent 70%); transform: translateX(-120%); animation: k-touch-sheen 4.8s ease-in-out infinite 1.2s; }
.k-touch:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(37, 99, 235, .7); }
.k-touch:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, .3); }
@keyframes k-touch-ping { 0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(37, 99, 235, 0); } }
@keyframes k-touch-wiggle { 0%, 84%, 100% { transform: none; } 88% { transform: rotate(-14deg); } 92% { transform: rotate(12deg); } 96% { transform: rotate(-6deg); } }
@keyframes k-touch-sheen { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@media (max-width: 640px) { .k-touch { padding: 0 5px; width: 40px; justify-content: center; } .k-touch-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.k-f-msg { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: #93c5fd; font: 700 14px var(--font); cursor: pointer; }
.k-f-msg:hover { color: #fff; }
.k-f-msg svg { color: #60a5fa; }

/* ================================================================ enquiry dialog (site.js openEnquiry) */
.k-enq-wrap { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; font-family: var(--font); }
.k-enq-backdrop { position: absolute; inset: 0; background: rgba(11, 18, 32, .62); backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s; }
.k-enq { position: relative; display: grid; grid-template-columns: 300px minmax(0, 1fr); width: min(940px, 100%); max-height: calc(100dvh - 32px); overflow: auto; border-radius: 24px;
  background: var(--surface); color: var(--text); box-shadow: 0 60px 120px -30px rgba(0, 0, 0, .6); opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .22s var(--ease), transform .22s var(--ease); }
.k-enq-wrap.open .k-enq-backdrop { opacity: 1; }
.k-enq-wrap.open .k-enq { opacity: 1; transform: none; }
.k-enq-wrap.closing .k-enq { opacity: 0; transform: translateY(10px) scale(.98); }
.k-enq-wrap.closing .k-enq-backdrop { opacity: 0; }
.k-enq-x { position: absolute; top: 14px; right: 14px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 15px; cursor: pointer; }
.k-enq-x:hover { color: var(--text); border-color: var(--border-strong); }
.k-enq-side { position: relative; overflow: hidden; padding: 32px 26px; color: #e2e8f0; border-radius: 24px 0 0 24px;
  background: radial-gradient(420px 260px at 0% 0%, rgba(37, 99, 235, .6), transparent 70%), radial-gradient(360px 240px at 100% 100%, rgba(124, 58, 237, .45), transparent 70%), #0b1220; }
.k-enq-badge { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(255, 255, 255, .1); color: #93c5fd; margin-bottom: 20px; }
.k-enq-side h3 { margin: 0 0 18px; font: 750 20px/1.3 var(--font); color: #fff; letter-spacing: -.02em; }
.k-enq-side ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; font-size: 14px; color: #cbd5e1; }
.k-enq-side li { position: relative; padding-left: 26px; }
.k-enq-side li::before { content: "✓"; position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: rgba(96, 165, 250, .2); color: #93c5fd; font-size: 11px; font-weight: 800; }
.k-enq-form { display: grid; gap: 16px; padding: 34px 32px 28px; }
.k-enq-head h2 { margin: 0; font: 800 28px/1.15 var(--font); letter-spacing: -.03em; }
.k-enq-head p { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
.k-enq-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.k-enq-f { display: grid; gap: 6px; align-content: start; }
.k-enq-f label { font-size: 14px; font-weight: 650; }
.k-enq-f label span { color: var(--muted); font-weight: 500; }
.k-enq-f input, .k-enq-f select, .k-enq-f textarea { width: 100%; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); color: var(--text); font: 500 15px var(--font); transition: border-color .15s, box-shadow .15s; }
.k-enq-f input, .k-enq-f select { height: 50px; padding: 0 14px; }
.k-enq-f textarea { padding: 12px 14px; resize: vertical; min-height: 120px; line-height: 1.5; }
.k-enq-f input:focus, .k-enq-f select:focus, .k-enq-f textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(37, 99, 235, .15); }
.k-enq-f.bad input, .k-enq-f.bad select, .k-enq-f.bad textarea { border-color: var(--danger); }
.k-enq-f .err { color: var(--danger); font-size: 12.5px; font-weight: 600; }
.k-enq-f .err:empty { display: none; }
.k-enq-meta { display: flex; justify-content: space-between; gap: 10px; }
.k-enq-count { margin-left: auto; color: var(--faint); font-size: 12px; }
.k-enq-check { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 500 !important; font-size: 13.5px !important; color: var(--text-2); cursor: pointer; }
.k-enq-check input { width: 18px !important; height: 18px !important; margin-top: 2px; accent-color: var(--primary); flex: none; }
.k-enq-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.k-enq-msg { margin: 0; font-size: 14px; font-weight: 600; }
.k-enq-msg:empty { display: none; }
.k-enq-msg.err { color: var(--danger); }
.k-enq-actions { display: flex; justify-content: flex-end; gap: 10px; }
.k-enq-send { min-width: 170px; }
.k-enq-send.busy { color: transparent !important; position: relative; }
.k-enq-send.busy::before { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: spin .7s linear infinite; }
.k-enq-done { display: grid; justify-items: center; gap: 10px; padding: 30px 10px; text-align: center; }
.k-enq-done h2 { margin: 6px 0 0; font: 800 26px/1.2 var(--font); }
.k-enq-done p { margin: 0; color: var(--text-2); max-width: 400px; }
.k-enq-ref { font-family: var(--mono); font-size: 13px; color: var(--muted) !important; padding: 6px 12px; border-radius: 8px; background: var(--bg-soft); }
.k-enq-done .k-btn { margin-top: 10px; }
.k-enq-tick { width: 72px; height: 72px; }
.k-enq-tick circle { fill: #e7f7f0; stroke: #059669; stroke-width: 2; stroke-dasharray: 152; stroke-dashoffset: 152; animation: k-draw .6s ease forwards; }
.k-enq-tick path { fill: none; stroke: #059669; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: k-draw .4s ease forwards .45s; }
@keyframes k-draw { to { stroke-dashoffset: 0; } }

@media (max-width: 820px) {
  .k-enq { grid-template-columns: minmax(0, 1fr); }
  .k-enq-side { display: none; }
  .k-enq-form { padding: 28px 20px 22px; }
}
@media (max-width: 520px) { .k-enq-row { grid-template-columns: minmax(0, 1fr); } .k-enq-actions .k-btn { flex: 1; } .k-enq-wrap { padding: 0; align-items: end; } .k-enq { border-radius: 22px 22px 0 0; max-height: 92dvh; } }
@media (prefers-reduced-motion: reduce) { .k-touch *, .k-touch::before, .k-enq, .k-enq-backdrop, .k-enq-tick * { animation: none !important; transition: none !important; } .k-enq-tick * { stroke-dashoffset: 0 !important; } }

/* hero card rotation (landing.js startHero): role counter, timer bar and a soft crossfade between roles */
.k-win-bar { position: relative; }
.k-rot { margin-left: auto; font-size: 11px; color: var(--faint); }
.k-rot + .k-pill { margin-left: 8px; }
.k-rot-bar { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: linear-gradient(90deg, #2563eb, #60a5fa); transform-origin: left; transform: scaleX(0);
  animation: k-rot var(--ms, 5200ms) linear forwards; }
.k-hero-card.paused .k-rot-bar { animation-play-state: paused; }
.k-swap { animation: k-swap .55s var(--ease) both; }
.k-swap > * { animation: k-swap-item .5s var(--ease) both; }
.k-swap > :nth-child(2) { animation-delay: .06s; } .k-swap > :nth-child(3) { animation-delay: .12s; } .k-swap > :nth-child(4) { animation-delay: .16s; }
.k-swap > :nth-child(5) { animation-delay: .2s; } .k-swap > :nth-child(6) { animation-delay: .24s; }
@keyframes k-rot { to { transform: scaleX(1); } }
@keyframes k-swap { from { opacity: .4; } }
@keyframes k-swap-item { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .k-rot-bar, .k-swap, .k-swap > * { animation: none !important; } .k-rot-bar { display: none; } }

/* ================================================================ hero card stack: front card goes to the back, the next comes forward */
.k-deck { position: relative; display: grid; perspective: 1400px; padding-bottom: 26px; }
.k-deck > * { grid-area: 1 / 1; }
.k-hcard { position: relative; z-index: 3; transform-origin: 50% 100%; }
/* two faint cards behind the front one give the stack depth */
.k-ghost { position: relative; z-index: 1; align-self: stretch; border-radius: 16px; border: 1px solid var(--border); background: var(--surface);
  box-shadow: 0 30px 60px -40px rgba(30, 58, 138, .35); transform-origin: 50% 100%; pointer-events: none; }
.k-ghost.g1 { transform: translateY(14px) scale(.955); opacity: .85; z-index: 2; }
.k-ghost.g2 { transform: translateY(28px) scale(.91); opacity: .55; }
.k-deck::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 26px; border-radius: 50%; background: radial-gradient(closest-side, rgba(30, 58, 138, .18), transparent); z-index: 0; pointer-events: none; }

/* the outgoing card lifts, tilts and drops behind the stack */
.k-hcard.leaving { z-index: 4; animation: k-to-back .8s cubic-bezier(.55, 0, .25, 1) forwards; pointer-events: none; }
/* the incoming card rises from the back of the stack to the front */
.k-hcard.entering { z-index: 3; animation: k-to-front .8s cubic-bezier(.2, .8, .2, 1) both; }
.k-hcard.entering .k-swap, .k-hcard.entering .k-swap > * { animation: none; }
@keyframes k-to-back {
  0%   { transform: none; opacity: 1; z-index: 4; }
  40%  { transform: translate(8%, -16%) rotate(5deg) scale(.97); opacity: 1; z-index: 4; }
  55%  { z-index: 0; }
  100% { transform: translateY(28px) scale(.9); opacity: 0; z-index: 0; }
}
@keyframes k-to-front {
  0%   { transform: translateY(28px) scale(.9); opacity: .4; filter: blur(1px); }
  45%  { transform: translateY(22px) scale(.92); opacity: .75; }
  100% { transform: none; opacity: 1; filter: none; }
}
/* the ghosts give a small nudge as the stack shuffles */
.k-hcard.entering ~ .k-ghost, .k-deck:has(.k-hcard.entering) .k-ghost.g1 { animation: k-ghost-nudge .8s var(--ease); }
@keyframes k-ghost-nudge { 50% { transform: translateY(20px) scale(.94); } }

@media (prefers-reduced-motion: reduce) {
  .k-hcard.leaving { display: none; }
  .k-hcard.entering, .k-ghost { animation: none !important; }
}

/* ================================================================ hero headline: rotating second line, one message at a time */
.k-title > span[aria-hidden]:first-of-type { display: block; }
.k-rotator { position: relative; display: block; min-height: 2.06em; } /* room for two lines: no layout jump between messages */
.k-rot-line { display: inline; }
.k-rot-line .w { display: inline-block; white-space: nowrap;
  background: linear-gradient(100deg, #2563eb 0%, #4f46e5 45%, #7c3aed 70%, #0ea5e9 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: k-word-in .6s cubic-bezier(.2, .8, .2, 1) both, k-sheen 5s ease-in-out infinite; animation-delay: calc(var(--wi) * 75ms), 0s; padding-bottom: .06em; }
.k-rot-line.out .w { animation: k-word-out .38s cubic-bezier(.6, 0, .8, .4) both; animation-delay: calc(var(--wi) * 35ms); }
@keyframes k-word-in { from { opacity: 0; transform: translateY(.45em) rotateX(-40deg); filter: blur(8px); } }
@keyframes k-word-out { to { opacity: 0; transform: translateY(-.4em); filter: blur(6px); } }
/* scoped to the headline: the nav dropdown arrows (site.js) share the .k-caret class and must stay arrows */
.k-rotator .k-caret { display: inline-block; width: .08em; height: .82em; margin-left: .08em; vertical-align: -.04em; border-radius: 2px; background: linear-gradient(#2563eb, #7c3aed); animation: k-blink 1s steps(1) infinite; }
@keyframes k-blink { 50% { opacity: 0; } }
.k-rot-dots { display: flex; gap: 6px; margin: -6px 0 18px; }
.k-rot-dots i { width: 6px; height: 6px; border-radius: 99px; background: var(--border-strong); transition: width .35s var(--ease), background .35s; }
.k-rot-dots i.on { width: 22px; background: linear-gradient(90deg, #2563eb, #7c3aed); }
.k-title .hl { animation: none; background: none; color: inherit; } /* the words carry the gradient now */
@media (prefers-reduced-motion: reduce) { .k-rot-line .w, .k-rotator .k-caret { animation: none !important; } .k-rotator .k-caret { display: none; } }

/* keep the hero still while cards of different heights swap: the deck reserves the tallest card's height */
@media (min-width: 1001px) { .k-hero-card { min-height: 470px; } } /* the deck itself still fits the current card, so the ghost cards match it */

/* ================================================================ "Why Kestrel": first-to-apply timeline, before/after, comparison */
.k-grad { background: linear-gradient(100deg, #2563eb, #7c3aed 55%, #0ea5e9); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 1. timeline */
.k-race { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 28px; padding: 22px; border-radius: 20px;
  background: linear-gradient(135deg, #f4f8ff, #fff 50%, #f7f3ff); border: 1px solid #dbe6fb; }
.k-race-step { position: relative; display: grid; gap: 6px; justify-items: start; padding: 4px 10px 4px 0; }
.k-race-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #fff; color: #94a3b8; border: 1px solid var(--border); box-shadow: var(--shadow-md);
  transition: background .4s, color .4s, border-color .4s, transform .4s var(--ease); }
.k-race-step b { font-size: 15px; color: var(--text); }
.k-race-step small { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.k-race-line { position: absolute; left: 52px; right: 4px; top: 22px; height: 2px; background: repeating-linear-gradient(90deg, #c7d7f8 0 5px, transparent 5px 10px); overflow: hidden; }
.k-race-line::after { content: ""; position: absolute; top: -2px; left: -30%; width: 30%; height: 6px; border-radius: 6px; background: linear-gradient(90deg, transparent, #2563eb, transparent); opacity: 0; }
/* the steps light up in order, then repeat */
.k-race.in .k-race-ic { animation: k-race-on 5s ease-in-out infinite; animation-delay: calc(var(--i) * .7s); }
.k-race.in .k-race-line::after { animation: k-race-run 5s ease-in-out infinite; animation-delay: calc(var(--i) * .7s + .25s); }
.k-race-step:last-child .k-race-ic { background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; border-color: transparent; }
@keyframes k-race-on { 0%, 100% { background: #fff; color: #94a3b8; transform: none; } 8%, 40% { background: #2563eb; color: #fff; border-color: #2563eb; transform: translateY(-3px); } }
@keyframes k-race-run { 0% { left: -30%; opacity: 0; } 5% { opacity: 1; } 18% { left: 100%; opacity: 1; } 19%, 100% { left: 100%; opacity: 0; } }
@media (max-width: 960px) {
  .k-race { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .k-race-step { grid-template-columns: 44px 1fr; column-gap: 14px; padding: 8px 0 18px; }
  .k-race-step .k-race-ic { grid-row: span 2; }
  .k-race-line { left: 21px; right: auto; top: 50px; bottom: -4px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, #c7d7f8 0 5px, transparent 5px 10px); }
  .k-race-line::after { display: none; }
}

/* 2. before / after */
.k-vs { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); align-items: stretch; margin-bottom: 28px; }
@media (max-width: 860px) { .k-vs { grid-template-columns: minmax(0, 1fr); gap: 12px; } .k-vs-mid { height: 30px; } }
.k-vs-card { position: relative; padding: 28px; border-radius: 22px; display: flex; flex-direction: column; gap: 8px; }
.k-vs-tag { align-self: flex-start; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 8px; }
.k .k-vs-card h3 { font-size: 22px; letter-spacing: -.02em; margin: 6px 0 6px; }
.k-vs-card ul { margin: 0 0 6px; padding: 0; list-style: none; display: grid; gap: 11px; }
.k-vs-card li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.5; }
.k-vs-card li::before { position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; font-size: 12px; font-weight: 800; }
.k-vs-card.old { background: #f8fafc; border: 1px dashed #cbd5e1; color: var(--muted); }
.k-vs-card.old .k-vs-tag { background: #eef2f7; color: #64748b; }
.k .k-vs-card.old h3 { color: #475569; }
.k-vs-card.old li::before { content: "✕"; background: #fee2e2; color: #dc2626; }
.k-vs-card.old li { text-decoration: line-through; text-decoration-color: rgba(100, 116, 139, .35); }
.k-vs-card.new { color: #e2e8f0; overflow: hidden; isolation: isolate;
  background: radial-gradient(420px 260px at 100% 0%, rgba(124, 58, 237, .55), transparent 70%), radial-gradient(420px 260px at 0% 100%, rgba(37, 99, 235, .6), transparent 70%), #0b1220;
  box-shadow: 0 40px 80px -36px rgba(37, 99, 235, .65); }
.k-vs-card.new::after { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: 23px; padding: 1px;
  background: linear-gradient(135deg, #60a5fa, #a78bfa, transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.k-vs-card.new .k-vs-tag { background: rgba(96, 165, 250, .18); color: #93c5fd; }
.k .k-vs-card.new h3 { color: #fff; }
.k-vs-card.new li::before { content: "✓"; background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; }
.k-vs-card.new .k-btn { align-self: flex-start; margin-top: auto; }
.k-vs-card.new.in li { animation: k-in .45s var(--ease) both; }
.k-vs-card.new.in li:nth-child(2) { animation-delay: .1s; } .k-vs-card.new.in li:nth-child(3) { animation-delay: .2s; } .k-vs-card.new.in li:nth-child(4) { animation-delay: .3s; } .k-vs-card.new.in li:nth-child(5) { animation-delay: .4s; }
.k-vs-mid { display: grid; place-items: center; }
.k-vs-mid span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-md);
  font: 800 13px/1 var(--font); color: var(--primary); text-transform: uppercase; }

/* 3. comparison table */
.k-cmp2 { min-width: 720px; font-size: 14.5px; }
.k-cmp2 th, .k-cmp2 td { padding: 14px 18px; }
.k-cmp-f { display: flex; align-items: center; gap: 12px; }
.k-cmp2 tbody th b { display: block; font-size: 14.5px; }
.k-cmp2 tbody th small { display: block; font-weight: 500; color: var(--muted); font-size: 12.5px; margin-top: 1px; }
.k-cmp-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); }
.k-cmp2 thead th.us { position: relative; padding-top: 26px; font-size: 15px; background: linear-gradient(135deg, #2563eb, #7c3aed); box-shadow: 0 -10px 30px -12px rgba(37, 99, 235, .7); }
.k-cmp-best { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; background: rgba(255, 255, 255, .2); white-space: nowrap; }
.k-cmp2 td.us { background: linear-gradient(180deg, #eef3ff, #f5f0ff); box-shadow: inset 1px 0 0 #c9d8fb, inset -1px 0 0 #c9d8fb; }
.k-cmp2 .k-mark-no { color: #f87171; font-size: 13px; }
.k-cmp2 .k-mark-yes { background: linear-gradient(135deg, #2563eb, #7c3aed); box-shadow: 0 6px 14px -6px rgba(37, 99, 235, .8); }
.k-cmp2 tbody tr:hover th b { color: var(--primary); }
.k-cmp-wrap.in .k-cmp2 .k-mark-yes { animation: k-pop .45s var(--ease) both; animation-delay: calc(var(--r, 0) * 70ms + .2s); }
.k-cmp-note { margin-top: 10px !important; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { .k-race *, .k-vs-card li, .k-cmp2 .k-mark-yes { animation: none !important; } }

/* white button on dark cards (e.g. "Get my matches now") */
.k-btn.light { background: #fff; color: #1d4ed8; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5); }
.k-btn.light:hover { background: #eff6ff; transform: translateY(-1px); }

/* comparison table on phones: each row becomes a card with three labelled verdict chips */
@media (max-width: 640px) {
  .k-cmp-wrap:has(.k-cmp2) { overflow: visible; border: 0; background: none; box-shadow: none; }
  .k-cmp2 { min-width: 0; display: block; }
  .k-cmp2 thead { display: none; }
  .k-cmp2 tbody { display: grid; gap: 10px; }
  .k-cmp2 tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-md); }
  .k-cmp2 tbody th { grid-column: 1 / -1; padding: 0 0 6px; border: 0; }
  .k-cmp2 tbody td { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 4px; border: 0; border-radius: 10px; background: var(--surface-2); box-shadow: none; }
  .k-cmp2 tbody td::before { content: attr(data-l); font-size: 11px; font-weight: 650; color: var(--muted); }
  .k-cmp2 tbody td.us { background: linear-gradient(135deg, #eef3ff, #f3edff); box-shadow: inset 0 0 0 1px #c9d8fb; }
  .k-cmp2 tbody td.us::before { color: var(--primary); }
}

/* ================================================================ pricing page (pages/pricing.js) */
.k-pricing .k-head { margin-bottom: 26px; }
.pr-filter { display: flex; justify-content: center; gap: 4px; margin: 0 auto 26px; padding: 4px; width: max-content; max-width: 100%; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.pr-filter:empty { display: none; }
.pr-filter button { height: 38px; padding: 0 16px; border: 0; border-radius: 9px; background: none; font: 650 14px var(--font); color: var(--text-2); cursor: pointer; }
.pr-filter button[aria-selected="true"] { background: var(--primary); color: #fff; }
.pr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; align-items: stretch; }
.pr-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 28px 24px; border-radius: 22px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-md);
  transition: transform .3s var(--ease), box-shadow .3s; }
.pr-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.pr-card.sk { min-height: 420px; background: linear-gradient(90deg, var(--bg-soft), var(--surface-2), var(--bg-soft)); background-size: 200% 100%; animation: k-shimmer 1.2s linear infinite; box-shadow: none; }
.pr-card.hl { border: 2px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, #2563eb, #7c3aed) border-box; box-shadow: 0 30px 60px -30px rgba(37, 99, 235, .55); }
.pr-card.cur { outline: 2px dashed var(--ok); outline-offset: 3px; }
.pr-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 5px 14px; border-radius: 99px; background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; font: 700 12px/1 var(--font); white-space: nowrap; }
.k .pr-card h3 { font-size: 20px; }
.k .pr-desc { font-size: 14px; color: var(--muted); }
.pr-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pr-price b { font: 800 38px/1 var(--font); letter-spacing: -.03em; color: var(--text); }
.pr-price s { color: var(--faint); font-size: 17px; }
.pr-price span { color: var(--muted); font-size: 14px; }
.k .pr-save { font-size: 13px; font-weight: 650; color: var(--ok); margin-bottom: 10px; }
.k .pr-save.muted { color: var(--muted); font-weight: 500; }
.pr-feat { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--border); display: grid; gap: 9px; font-size: 14px; }
.pr-feat li { display: flex; gap: 10px; color: var(--text-2); }
.pr-feat li > span:first-child { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; font-size: 11px; font-weight: 800; background: var(--ok-soft); color: var(--ok); }
.pr-feat li.no { color: var(--faint); }
.pr-feat li.no > span:first-child { background: var(--bg-soft); color: var(--faint); }
.pr-state { grid-column: 1 / -1; display: grid; justify-items: center; gap: 8px; padding: 48px 20px; text-align: center; border: 1px dashed var(--border-strong); border-radius: 18px; }
.pr-mine { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 24px; align-items: center; margin-bottom: 26px; padding: 22px; border-radius: 18px; border: 1px solid #d6e2fb; background: linear-gradient(135deg, #f4f8ff, #fff); }
@media (max-width: 700px) { .pr-mine { grid-template-columns: minmax(0, 1fr); } }
.k .pr-mine h2 { margin: 2px 0 4px; font-size: 22px; }
.pr-mine .k-btn { margin-top: 8px; }
.pr-usage { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pr-usage li { display: grid; grid-template-columns: minmax(0, 1fr) 120px 70px; align-items: center; gap: 10px; font-size: 13px; }
.pr-usage i { height: 6px; border-radius: 6px; background: var(--bg-soft); position: relative; overflow: hidden; }
.pr-usage i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--primary); border-radius: inherit; }
.pr-usage i.hot::after { background: var(--warn); }
.pr-usage b { text-align: right; font-family: var(--mono); font-size: 12px; }
.k .pr-note { margin-top: 18px; text-align: center; color: var(--muted); }

/* ================================================================ responsive scale: 13-15" laptops (1280-1536) to 24" (1920+)
   One fluid layer over the rules above: the content width, type and spacing grow smoothly with the viewport
   (clamp), so a 24" screen gets a proportionally larger page instead of a 1180px column with wide empty margins,
   and a 15" laptop keeps the same proportions. Phone and tablet rules above still apply below 1000px. */
.k {
  --k-max: clamp(1120px, 72vw, 1380px);
  --k-pad: max(clamp(16px, 4vw, 32px), calc((100vw - var(--k-max)) / 2));
  --k-nav-h: 74px;        /* sticky nav */
  --k-src-h: 124px;       /* "collecting from" sources strip under the hero */
  --k-gap: clamp(16px, 1.25vw, 24px);
  --k-card-pad: clamp(20px, 1.5vw, 28px);
  font-size: clamp(15px, .2vw + 12.2px, 16.5px);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11";
}

/* typography hierarchy: display > h2 > lead > body > label */
.k .k-title { font-size: clamp(42px, 2.6vw + 30px, 82px); line-height: 1.03; letter-spacing: -.042em; margin: 20px 0 18px; }
.k-sub { max-width: 34em; font-size: clamp(16px, .35vw + 12.5px, 19.5px); line-height: 1.62; color: var(--text-2); }
.k-h2 { font-size: clamp(30px, 1.5vw + 16px, 48px); line-height: 1.08; letter-spacing: -.035em; }
.k-lead { font-size: clamp(16px, .3vw + 13px, 18.5px); line-height: 1.62; max-width: 40em; }
.k-head { max-width: clamp(720px, 48vw, 880px); margin-bottom: clamp(32px, 2.6vw, 52px); }
.k-head.left .k-lead { margin-left: 0; }
.k-head:not(.left) .k-lead { margin-inline: auto; }
.k-flowsteps h3, .k-fcard h3 { font-size: clamp(16.5px, .25vw + 13.5px, 18.5px); letter-spacing: -.01em; }
.k-flowsteps p, .k-fcard p { font-size: clamp(14.5px, .15vw + 12.5px, 15.5px); line-height: 1.6; }
.k-stat b { font-size: clamp(30px, 1vw + 18px, 40px); }
.k-stat span { font-size: clamp(14px, .15vw + 12px, 15px); }
.k-faq summary { font-size: clamp(15px, .15vw + 13px, 16.5px); }
.k-faq details p { font-size: clamp(14.5px, .15vw + 12.5px, 15.5px); }
.k .k-final h2 { font-size: clamp(30px, 1.6vw + 16px, 50px); }
.k .k-final p { font-size: clamp(16px, .3vw + 13px, 18.5px); }

/* labels that read as words use the text face; data (scores, pills, the demo window) keeps the monospace */
.k-tag.mono, .k-trust.mono, .k-eyebrow.mono, .k .k-sources p { font-family: var(--font); letter-spacing: .01em; }
.k-eyebrow.mono, .k .k-sources p { font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.k-tag.mono { font-size: 12.5px; }
.k-trust.mono { font-size: 13px; font-weight: 500; gap: 8px 22px; }

/* nav: sized with the content width; links scale a step on large screens */
.k-dd-btn, .k-menu-link { font-size: clamp(13.5px, .12vw + 12px, 14.5px); }
.k-nav .k-btn { height: clamp(38px, .3vw + 34px, 42px); }

/* buttons */
.k-btn { height: clamp(42px, .4vw + 37px, 46px); font-size: clamp(14px, .12vw + 12.5px, 15px); padding: 0 clamp(18px, 1.2vw, 22px); }
.k-btn.lg { height: clamp(48px, .45vw + 43px, 54px); font-size: clamp(15px, .15vw + 13px, 16px); }
.k-btn.sm { height: 36px; font-size: 13px; padding: 0 14px; }
.k-btn.xs { height: 30px; font-size: 12px; padding: 0 10px; }

/* hero: on desktop it fills the first screen together with the sources strip, content centred, no half-empty
   fold on tall 24" screens and nothing pushed under the fold on 15" laptops */
.k-hero { gap: clamp(40px, 4vw, 88px); padding-block: clamp(24px, 4vh, 56px); }
@media (min-width: 1001px) and (min-height: 700px) {
  /* capped, so a portrait or very tall monitor doesn't get a screen-high hero with the content floating in it */
  .k-hero { min-height: min(calc(100svh - var(--k-nav-h) - var(--k-src-h)), 960px); align-content: center; }
}
@media (min-width: 1001px) and (max-height: 820px) {
  /* 15" laptops with browser chrome (~760-820px tall): tighten the art so the strip still shows */
  .k-hero-art { padding-block: 44px 40px; }
  .k .k-title { margin-block: 16px 14px; }
  .k-ctas { margin-top: 24px; }
}

/* section rhythm */
.k-sec { padding-top: clamp(72px, 6.5vw, 128px); }
.k-stats { margin-top: clamp(56px, 4.5vw, 88px); gap: var(--k-gap); }
.k-cards3, .k-flowsteps { gap: var(--k-gap); }
.k-cards3.small { margin-top: var(--k-gap); }
.k-sandbox { grid-template-columns: minmax(0, clamp(340px, 24vw, 420px)) minmax(0, 1fr); gap: var(--k-gap); }
@media (max-width: 940px) { .k-sandbox { grid-template-columns: minmax(0, 1fr); } }
.k-flowsteps li, .k-fcard, .k-stat { padding: var(--k-card-pad); }
.k-fcard.row { padding: clamp(18px, 1.2vw, 22px); }
.k-faq-list { max-width: clamp(820px, 52vw, 960px); }
.k-footer { margin-top: clamp(72px, 6.5vw, 128px); }

/* no sideways scrolling from decorative layers on any width */
.k-hero-art, .k-final { max-width: 100%; }
html:has(.k), body:has(.k) { overflow-x: clip; }