/* KnackHook PoC environment. Palette and type follow knackhook.com.
   Contrast (WCAG 1.4.3): #e6edf3 on #0a0e14 16.4:1, #9aa6b4 on #0a0e14 7.9:1, #0a0e14 on #4cc9f0 10.2:1, #4cc9f0 on #0f151d 9.4:1. */
:root { --bg:#0a0e14; --panel:#0f151d; --panel2:#111923; --line:#1f2935; --line2:#2a3645; --text:#e6edf3; --muted:#9aa6b4; --cyan:#4cc9f0; --green:#2dd47f; --mono:var(--wp--preset--font-family--mono); }
html { scroll-behavior:smooth; scroll-padding-top:1rem; }
body { background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; }
.wp-site-blocks > * { margin-block-start:0!important; }
.screen-reader-text { border:0; clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute!important; width:1px; white-space:nowrap; }
.khp-skip { position:absolute; left:.75rem; top:-100px; z-index:100; background:var(--cyan); color:var(--bg); padding:.7rem 1rem; font-weight:600; border-radius:8px; }
.khp-skip:focus { top:.75rem; }
:where(a,button,input,summary,[tabindex]):focus-visible { outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } * { transition:none!important; animation:none!important; } }
.khp-ico { flex:none; }

/* Header */
.khp-header { position:relative; z-index:5; padding-top:1.1rem!important; padding-bottom:1.1rem!important; border-bottom:1px solid var(--line); background:rgba(10,14,20,.92); }
.khp-header__row { gap:1rem 2rem; }
.khp-brand { display:inline-flex; align-items:center; gap:.9rem; color:var(--text); text-decoration:none; }
.khp-brand__mark { display:grid; place-items:center; width:46px; height:46px; border:1px solid var(--line2); border-radius:10px; background:var(--panel); font-family:var(--mono); font-weight:700; color:var(--cyan); letter-spacing:-.04em; }
.khp-brand__text { display:flex; flex-direction:column; line-height:1.15; }
.khp-brand__name { font-family:var(--mono); font-weight:700; font-size:1.2rem; letter-spacing:.02em; }
.khp-brand__tag { font-family:var(--mono); font-weight:600; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); margin-top:.3rem; }
.khp-brand__tag i { font-style:normal; color:#ff6fb5; margin:0 .3em; }
.khp-nav ul { list-style:none; margin:0; padding:.3rem; display:flex; flex-wrap:wrap; gap:.25rem; border:1px solid var(--line2); border-radius:999px; background:var(--panel); }
.khp-nav a { display:inline-flex; align-items:center; min-height:40px; padding:0 1.15rem; border-radius:999px; color:var(--text); text-decoration:none; font-weight:500; font-size:.95rem; }
.khp-nav a:hover { background:#16202b; }
.khp-nav li:first-child a { background:var(--cyan); color:var(--bg); font-weight:600; }
.khp-status { display:flex; align-items:center; gap:.7rem; margin:0; padding:.5rem 1.1rem .5rem .9rem; border:1px solid var(--line2); border-radius:999px; background:var(--panel); }
.khp-status > span:last-child { display:flex; flex-direction:column; line-height:1.2; }
.khp-status__k { font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.khp-status__v { font-family:var(--mono); font-size:.84rem; }
.khp-dot { width:10px; height:10px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(45,212,127,.18); }

/* Hero with grid backdrop */
.khp-main { margin:0!important; }
.khp-hero { position:relative; overflow:hidden; padding-top:clamp(3rem,7vw,5.5rem)!important; padding-bottom:clamp(3rem,7vw,5.5rem)!important;
  background-color:var(--bg);
  background-image:radial-gradient(ellipse 60% 55% at 12% 10%, rgba(76,201,240,.12), transparent 70%), linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:auto, 44px 44px, 44px 44px; }
.khp-hero__grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:2.5rem 3.5rem; align-items:center; }
.khp-hero__text > * { margin-block:0!important; }
.khp-pill, .khp-eyebrow { font-family:var(--mono); font-size:.86rem; color:var(--muted); }
.khp-pill { display:inline-flex; align-items:center; gap:.6rem; padding:.45rem 1rem .45rem .8rem; border:1px solid var(--line2); border-radius:999px; background:rgba(15,21,29,.8); }
.khp-pill::before { content:""; width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(45,212,127,.18); }
.khp-hero__title { font-size:clamp(2.6rem,6.2vw,5.2rem)!important; letter-spacing:-.03em; margin-top:1.6rem!important; }
.khp-accent { color:var(--cyan); }
.khp-hero__lead { font-size:clamp(1.05rem,1.5vw,1.3rem); color:#b5c0cc; max-width:36rem; margin-top:1.4rem!important; }
.khp-hero__buttons { margin-top:2rem!important; gap:1rem!important; }

/* Buttons */
.khp-btn .wp-block-button__link { display:inline-flex; align-items:center; gap:.6rem; min-height:52px; padding:0 1.6rem; border-radius:6px; font-weight:600; font-size:1rem; text-decoration:none; transition:transform .15s, background .15s; }
.khp-btn--primary .wp-block-button__link { background:var(--cyan); color:var(--bg); }
.khp-btn--primary .wp-block-button__link::after { content:"→"; font-family:var(--mono); }
.khp-btn--primary .wp-block-button__link:hover { background:#7ad8f5; transform:translateY(-1px); }
.khp-btn--ghost .wp-block-button__link { background:transparent; color:var(--text); border:1px solid var(--line2); }
.khp-btn--ghost .wp-block-button__link::before { content:"▸"; color:var(--cyan); font-size:.8em; }
.khp-btn--ghost .wp-block-button__link:hover { border-color:var(--cyan); }

/* Snapshot panel */
.khp-snapshot { border:1px solid var(--line2); border-radius:16px; background:rgba(15,21,29,.88); padding:1.6rem; box-shadow:0 20px 60px rgba(0,0,0,.35); }
.khp-snapshot__h { font-family:var(--mono)!important; font-size:.8rem!important; font-weight:400!important; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)!important; margin:0 0 1.2rem!important; }
.khp-snapshot__grid { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.khp-tile { border:1px solid var(--line2); border-radius:10px; padding:1.1rem 1.1rem 1.2rem; background:var(--panel2); }
.khp-tile p { margin:0; }
.khp-tile__v { font-family:var(--mono); font-weight:700; font-size:1.35rem; }
.khp-tile__k { color:var(--muted); font-size:.88rem; margin-top:.35rem!important; }
.khp-snapshot__mail { margin:1.3rem 0 0; padding-top:1.1rem; border-top:1px dashed var(--line2); color:var(--muted); font-size:.95rem; }

/* Sections */
.khp-section { padding-top:clamp(3rem,6vw,5rem)!important; padding-bottom:clamp(3rem,6vw,5rem)!important; border-top:1px solid var(--line); }
.khp-section--alt { background:linear-gradient(180deg,#0c1118,var(--bg)); }
.khp-eyebrow { color:var(--cyan)!important; letter-spacing:.18em; text-transform:uppercase; font-size:.8rem!important; margin-bottom:.6rem!important; }
.khp-section__title { font-size:clamp(1.8rem,3.4vw,2.7rem)!important; letter-spacing:-.02em; margin-top:0!important; }
.khp-section__lead { color:var(--muted); max-width:44rem; }

/* Demo cards */
.khp-cards { list-style:none; margin:2rem 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr)); gap:1.2rem; }
.khp-card { position:relative; display:flex; flex-direction:column; border:1px solid var(--line2); border-top:2px solid var(--cyan); border-radius:14px; background:var(--panel); padding:1.5rem 1.5rem 1.4rem; transition:border-color .15s, transform .15s; }
.khp-card:hover { border-color:var(--cyan); transform:translateY(-2px); }
.khp-card:focus-within { outline:2px solid var(--cyan); outline-offset:3px; }
.khp-card p { margin:0; }
.khp-card__num { display:flex; justify-content:space-between; font-family:var(--mono); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.khp-card__title { font-size:1.35rem!important; margin:1.3rem 0 .6rem!important; line-height:1.25; }
.khp-card__title a { color:var(--text); text-decoration:none; }
.khp-card__title a::after { content:""; position:absolute; inset:0; border-radius:14px; }
.khp-card__title a:focus-visible { outline:none; }
.khp-card__desc { color:var(--muted); font-size:.97rem; flex:1; }
.khp-card__host { font-family:var(--mono); font-size:.82rem; color:#c9d3dd; margin-top:1.2rem!important; padding-top:1rem; border-top:1px solid var(--line); word-break:break-all; }
.khp-card__go { display:flex; align-items:center; gap:.5rem; color:var(--cyan); font-weight:600; margin-top:.6rem!important; }
.khp-empty { color:var(--muted); }

/* Steps and CTA */
.khp-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)); gap:1.2rem; margin-top:2rem!important; }
.khp-step { border:1px solid var(--line2); border-radius:14px; background:var(--panel); padding:1.5rem; }
.khp-step > * { margin-block:0!important; }
.khp-step__num { font-family:var(--mono); color:var(--cyan); font-size:.85rem; }
.khp-step h3 { font-size:1.15rem!important; margin-top:1rem!important; margin-bottom:.6rem!important; }
.khp-step p:last-child { color:var(--muted); font-size:.97rem; }
.khp-cta { margin-top:2.5rem!important; border:1px solid var(--line2); border-radius:14px; padding:1.4rem 1.6rem; background:rgba(76,201,240,.06); gap:1rem 2rem; }
.khp-cta__text { margin:0; font-family:var(--mono); font-size:1.05rem; }

/* Inner pages and footer */
.khp-page { padding-top:3rem!important; padding-bottom:4rem!important; }
.khp-footer { border-top:1px solid var(--line); padding-top:1.6rem!important; padding-bottom:1.6rem!important; }
.khp-footer__row { gap:.8rem 2rem; }
.khp-footer__row p { margin:0; font-size:.88rem; color:var(--muted); }
.khp-footer__links { display:flex; gap:1.4rem; }
.khp-footer__links a { color:var(--text); display:inline-flex; min-height:24px; align-items:center; }

@media (max-width:980px) {
  .khp-hero__grid { grid-template-columns:1fr; }
  .khp-status { display:none; }
}
@media (max-width:600px) {
  .khp-nav { width:100%; }
  .khp-nav ul { justify-content:space-between; }
  .khp-nav a { padding:0 .85rem; font-size:.9rem; }
  .khp-snapshot__grid { grid-template-columns:1fr 1fr; }
  .khp-hero__buttons .wp-block-button { width:100%; }
  .khp-hero__buttons .wp-block-button__link { width:100%; justify-content:center; }
}
.khp-section > .khp-section__lead { max-width:1280px!important; padding-right:max(0px, calc(100% - 44rem)); box-sizing:border-box; }
.khp-steps > * { margin:0!important; }
.khp-cards > li, .khp-hero__grid > * { margin:0!important; }
@media (max-width:600px) { .khp-nav ul { flex-wrap:nowrap; justify-content:flex-start; } }
@media (max-width:480px) { .khp-nav li:last-child { display:none; } }