@property --glint {
  syntax: '<percentage>';
  inherits: false;
  initial-value: -40%;
}

/* ══ KPDemo shared header + navigation ═══════════════════════════════
   Extracted from the home page's inline stylesheet so every page can use
   the same fixed header, hamburger and drawer. ═══════════════════════ */

/* --kp-h is the header's own height; --kp-safe is the iPhone notch inset.
   --kp-h-total (height + notch) is what page content must clear. */
:root{
  --kp-h:62px;
  --kp-safe:env(safe-area-inset-top, 0px);
  --kp-h-total:calc(var(--kp-h) + var(--kp-safe));
}
@media (max-width:760px){ :root{ --kp-h:54px; } }

/* ══ HEADER ══════════════════════════════════════════════════════════════ */

.kp-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  /* sit below the notch / Dynamic Island, and paint behind it.
     box-sizing:content-box so --kp-h is the CONTENT height and the notch
     padding is added on top of it. */
  box-sizing:content-box;
  height:var(--kp-h);
  padding-top:var(--kp-safe);
  background:linear-gradient(180deg, rgba(11,14,19,.96) 0%, rgba(13,17,23,.90) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.075);
  box-shadow:0 8px 28px rgba(0,0,0,.42);
  transition:height .28s ease, background .28s ease;
}

.kp-header-in{
  max-width:1280px; margin:0 auto;
  height:var(--kp-h);
  padding:0 24px;
  display:flex; align-items:center; gap:28px;
}

/* brand */
.kp-brand{
  display:inline-flex; align-items:center; gap:11px;
  text-decoration:none !important; flex:0 0 auto;
}

.kp-brand, .kp-brand *{
  text-decoration:none !important;
  text-decoration-line:none !important;
  border-bottom:0 !important;
}

.kp-brand img{
  width:30px; height:30px; display:block; object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(37,99,235,.4));
}

.kp-wordmark{
  font-size:19px; font-weight:900; letter-spacing:.10em;
  text-transform:uppercase; font-family:var(--sans); line-height:1;
  display:inline-flex;
}

.kp-wordmark{
  /* The glint position is driven by an animatable custom property, so the
     gradient itself blends smoothly across the whole wordmark instead of
     scrolling a background tile behind clipped text. */
  --glint: -40%;
  background-image:
    /* violet wash centred on --glint */
    linear-gradient(100deg,
      rgba(111,57,172,0)  calc(var(--glint) - 26%),
      rgba(155,95,220,1)  var(--glint),
      rgba(111,57,172,0)  calc(var(--glint) + 26%)),
    /* white specular core, tighter */
    linear-gradient(100deg,
      rgba(255,255,255,0)  calc(var(--glint) - 9%),
      rgba(255,255,255,.7) var(--glint),
      rgba(255,255,255,0)  calc(var(--glint) + 9%)),
    /* static blue base */
    linear-gradient(102deg,#2a63dd 0%,#2f6ae0 45%,#3a63d8 100%);
  background-size:100% 100%, 100% 100%, 100% 100%;
  background-repeat:no-repeat, no-repeat, no-repeat;
  background-position:0 0, 0 0, 0 0;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  animation:kpGlint 3.6s linear infinite;
  animation-delay:-1s;
  filter:drop-shadow(0 0 6px rgba(120,80,200,.28));
}

@media (prefers-reduced-motion: reduce){
  .kp-wordmark{ animation:none; --glint: 50%; }
}

/* both words are cut-outs of the ONE gradient painted on .kp-wordmark, so the
   glint sweeps the whole mark as a single progress bar rather than restarting
   on each word */
.kp-wordmark{ display:inline-block; width:max-content; }

.kp-wordmark .kp-a,
.kp-wordmark .kp-b{
  display:inline-block;
  background:none;
  -webkit-background-clip:border-box; background-clip:border-box;
  color:transparent; -webkit-text-fill-color:transparent;
}

.kp-wordmark .kp-b{ margin-left:.30em; }

/* centre nav */
.kp-nav{ display:flex; align-items:center; gap:4px; margin-left:6px; }

.kp-nav a{
  position:relative; color:#a9b6c4; text-decoration:none;
  font-size:13.5px; font-weight:600; padding:9px 13px; border-radius:8px;
  transition:color .16s, background .16s;
}

.kp-nav a:hover{ color:#fff; background:rgba(255,255,255,.055); }

.kp-nav a::after{
  content:""; position:absolute; left:13px; right:13px; bottom:4px; height:1.5px;
  background:linear-gradient(90deg,#3b82f6,#8b5cf6);
  transform:scaleX(0); transform-origin:left; transition:transform .22s ease;
  border-radius:2px;
}

.kp-nav a:hover::after{ transform:scaleX(1); }

/* right cluster */
.kp-right{ margin-left:auto; display:flex; align-items:center; gap:12px; }

.kp-chip{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.15em;
  text-transform:uppercase; color:#8fa4ba;
  border:1px solid rgba(255,255,255,.09); border-radius:999px;
  padding:6px 11px; background:rgba(255,255,255,.022); white-space:nowrap;
}

.kp-chip i{
  width:5px; height:5px; border-radius:50%; background:#34d399;
  box-shadow:0 0 0 3px rgba(52,211,153,.16);
}

.kp-signin{
  color:#b6c3d1; text-decoration:none; font-size:13.5px; font-weight:600;
  padding:9px 12px; border-radius:8px; transition:.16s;
}

.kp-signin:hover{ color:#fff; background:rgba(255,255,255,.055); }

.kp-cta{
  display:inline-flex; align-items:center; justify-content:center;
  height:38px; padding:0 18px; border-radius:9px;
  background:linear-gradient(135deg,#2563eb,#1d4ed8); color:#fff;
  font-size:13.5px; font-weight:700; text-decoration:none; letter-spacing:.01em;
  box-shadow:0 6px 18px rgba(37,99,235,.34);
  transition:filter .16s, transform .16s; white-space:nowrap;
}

.kp-cta:hover{ filter:brightness(1.12); transform:translateY(-1px); }

/* hamburger */
.kp-burger{
  width:44px; height:44px; flex:0 0 44px;
  display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; cursor:pointer; border-radius:10px;
  border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03);
  transition:.16s;
}

.kp-burger:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.22); }

.kp-burger span{
  display:block; width:18px; height:2px; border-radius:2px;
  background:#d6e0ea; transition:transform .22s ease, opacity .18s ease;
}

.kp-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }

.kp-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }

.kp-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* push page content below the fixed header */
body{ padding-top:calc(var(--kp-h-total) + var(--warn-h, 38px)); }

/* warning banner pinned right under the header */
.site-warning{
  position:fixed; top:var(--kp-h-total); left:0; right:0; z-index:190;
  margin:0; border-radius:0;
}

@media (max-width:900px){
  .kp-nav{ display:none; }
  .kp-burger{ display:flex; }
  .kp-chip{ display:none; }
  .kp-signin{ display:none; }
}

@media (max-width:520px){
  :root{ --kp-h:56px; }
  .kp-header-in{ padding:0 16px; gap:14px; }
  .kp-brand img{ width:26px; height:26px; }
  .kp-wordmark{ font-size:17px; }
  .kp-cta{ height:36px; padding:0 14px; font-size:12.5px; }
}

/* 2. TAP TARGETS: brand link and inline footer links were under 28px tall. */
/* header lives OUTSIDE #kp-page, so target it directly */
a.kp-brand,
.kp-header a.kp-brand{
  display:inline-flex !important; align-items:center;
  min-width:44px !important;
  min-height:44px !important;
  padding:7px 6px !important;
  box-sizing:content-box !important;
  align-self:center;
}

@media (max-width:520px){
  .kp-header a.kp-brand{ padding:7px 4px !important; min-height:42px !important; }
}

/* Interaction feedback inside the 100ms budget */
#kp-page .btn,
#kp-page .car-arrow,
#kp-page .car-dot,
#kp-page .store,
#kp-page .faq-item summary,
#kp-page .kp-cta,
.kp-header a{
  transition-duration: var(--t-feedback);
  transition-timing-function: var(--ease-out);
}

/* REDUCE, don't remove (WCAG 2.3.3 / MDN): swap transforms for dissolves */
@media (prefers-reduced-motion: reduce){
  #kp-page *, .kp-header, .kp-header *{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  #kp-page .cap,
  #kp-page .pg-card,
  #kp-page .proof-strip,
  #kp-page .promo,
  #kp-page .price-faq{
    opacity:1 !important; transform:none !important;
  }
}

/* ══ PHONE LAYOUT FIX ════════════════════════════════════════════════════
   Everything here is scoped to small screens; desktop is untouched. */

@media (max-width:760px){

  /* 2. TIGHTEN GLOBAL RHYTHM — 96px is a desktop rhythm.
        Also kill the divider that was adding 96px of dead space above/below. */
  #kp-page .section{ padding:56px 0 !important; }
  #kp-page .section--cta{ padding:56px 0 0 !important; }
  #kp-page .section + .section::before{
    margin:0 auto 56px !important;
    width:calc(100% - 64px) !important;
  }

  /* 3. ALIGN SECTION HEADERS — badge, h2 and lede all centred as a block,
        so there is one clean left edge instead of a jagged one. */
  #kp-page .section .wrap{
    display:flex; flex-direction:column; align-items:center; text-align:center;
  }
  #kp-page .section .wrap > .eyebrow{
    align-self:center; margin:0 0 12px !important; text-align:center;
  }
  #kp-page .section .wrap > h2.sec{
    margin:0 0 12px !important; text-align:center; max-width:100%;
  }
  #kp-page .section .wrap > p.sec-lede{
    margin:0 0 32px !important; text-align:center;
  }
  /* but the grids inside must not inherit the centred flex behaviour */
  #kp-page .cap-grid,
  #kp-page .work-grid,
  #kp-page .steps,
  #kp-page .price-faq,
  #kp-page .car,
  #kp-page .price-grid{
    width:100%; align-self:stretch; text-align:left;
  }

  /* 4. HERO — looser display leading, full-width stacked CTAs */
  #kp-page h1.display{
    font-size:clamp(34px,9.6vw,44px) !important;
    line-height:1.06 !important;
    letter-spacing:-.028em !important;
    margin:0 0 16px !important;
  }
  #kp-page .hero .lede{ font-size:15px !important; margin-bottom:24px !important; }
  #kp-page .hero-actions{
    flex-direction:column !important; align-items:stretch !important;
    gap:10px !important; width:100% !important; margin-bottom:28px !important;
  }
  #kp-page .hero-actions .btn{ width:100% !important; }

  /* 5. PROOF STRIP — 2x2, equal cells, no separators */
  #kp-page .proof-strip{
    display:grid !important; grid-template-columns:1fr 1fr !important;
    gap:1px !important; padding:0 !important; overflow:hidden;
    margin:0 0 22px !important; background:var(--line) !important;
    max-width:100% !important; width:100% !important;
    align-self:stretch !important; position:relative; z-index:1;
  }
  #kp-page .proof-strip .proof-item{
    background:rgba(10,13,18,.72); padding:11px 8px; gap:2px;
    min-height:0 !important; align-items:center !important; text-align:center !important;
  }
  #kp-page .proof-sep{ display:none !important; }
  #kp-page .proof-item b{ font-size:15px !important; line-height:1.15 !important; }
  #kp-page .proof-item span{ font-size:8.5px !important; letter-spacing:.07em !important;
    white-space:normal !important; line-height:1.25 !important; }

  /* 6. OFFER CARD — tighter, but keep it readable */
  #kp-page .offer{ padding:20px 18px 18px !important; max-width:100% !important; }
  #kp-page .offer-line{ font-size:15px !important; margin:2px 0 10px !important; }

  /* 7. WARNING BANNER — 3 lines of dense caps is unreadable. Give it room and
        drop the letter-spacing so it wraps better. */
  #kp-page .site-warning,
  .site-warning{
    font-size:10.5px !important;
    line-height:1.45 !important;
    letter-spacing:.02em !important;
    padding:8px 14px !important;
  }

  /* 8. STEPS — give the number room to breathe, and close the trailing void */
  #kp-page .steps{ gap:22px !important; }
  #kp-page .step{ grid-template-columns:38px 1fr !important; gap:0 14px !important; }
  #kp-page .step-n{ width:38px !important; height:38px !important; font-size:11px !important; }
  #kp-page .step h3{ font-size:14.5px !important; }
  #kp-page .step p{ font-size:13px !important; line-height:1.55 !important; }

  /* 9. WORK CARDS — single column, previews taller so they read as real sites */
  #kp-page .work-grid{ grid-template-columns:1fr !important; gap:14px !important; }
  #kp-page .work-thumb{ aspect-ratio:16/9 !important; }

  /* 10. CAPABILITY CARDS — one per row, comfortable padding */
  #kp-page .cap-grid{ grid-template-columns:1fr !important; gap:12px !important; }

  /* 11. PRICING CAROUSEL + FAQ */
  #kp-page .price-faq{ margin-top:32px !important; }
  #kp-page .faq-item{ padding:13px 0 !important; }

  /* 12. CTA band */
  #kp-page .cta-band{ padding:36px 20px !important; }
  #kp-page .cta-band .cta-row{ flex-direction:column !important; }
  #kp-page .cta-band .btn{ width:100% !important; }

  /* 13. FOOTER */
  #kp-page footer{ margin-top:56px !important; padding:26px 0 28px !important; }
}

/* ── TABLET RANGE FIX (720-1024) ────────────────────────────────────────
   iPad portrait (820) was getting the phone layout: 1-col capability cards,
   a carousel instead of the pricing grid, and the burger menu. Tablets have
   room for a real layout, so give them one. */
@media (min-width:721px) and (max-width:1024px){
  #kp-page .price-grid{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:14px !important;
  }
  #kp-page .car{ display:none !important; }
  #kp-page .cap-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  #kp-page .work-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  #kp-page .style-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  #kp-page .steps{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:30px 20px !important; }
  #kp-page .steps::before{ display:none; }
  #kp-page .section{ padding:72px 0 !important; }
  #kp-page .offer{ max-width:560px; }
  #kp-page .kp-nav{ display:flex !important; }
  #kp-page .kp-burger{ display:none !important; }
  #kp-page .kp-chip{ display:none !important; }
}

/* drawer entries that are gated by auth */
.nav-drawer a.hidden{ display:none !important; }
/* ══ Shared site footer ═══════════════════════════════════════════════ */
.kp-footer{
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:64px; padding:26px 20px 34px;
  background:rgba(255,255,255,.012);
}
.kp-footer-in{
  max-width:1120px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.kp-footer .f-links{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.kp-footer .f-links a{
  font-size:13px; font-weight:600; color:#8e9dad;
  transition:color .18s ease;
}
.kp-footer .f-links a:hover{ color:#cfe0f2; }
.kp-footer .sep{ color:#39424e; font-size:12px; }
.kp-footer .f-copy{ margin:0; font-size:12.5px; color:#5f6b78; }
@media (max-width:560px){
  .kp-footer{ margin-top:44px; padding:22px 16px 30px; }
  .kp-footer-in{ flex-direction:column; align-items:center; text-align:center; gap:12px; }
}


@keyframes kpGlint{
  from { --glint: -40%; }
  to   { --glint: 140%; }
}

/* ══ wordmark safety net ═══════════════════════════════════════════════
   The glint layers are transparent away from the band, so if the band sits
   off-canvas the mark could paint nothing. Append an OPAQUE blue layer at the
   END of the stack (it paints first) so the letters are always filled. Do NOT
   use background-color here - on a background-clip:text element that fills the
   glyph BOX and turns the wordmark into solid rectangles. */
.kp-wordmark{
  background-image:
    linear-gradient(100deg,
      transparent calc(var(--glint) - 26%),
      rgba(155,95,220,.92) var(--glint),
      transparent calc(var(--glint) + 26%)),
    linear-gradient(100deg,
      transparent calc(var(--glint) - 13%),
      rgba(255,255,255,.7) calc(var(--glint) - 4%),
      transparent calc(var(--glint) + 5%)),
    linear-gradient(102deg, #2a63dd 0%, #2f6ae0 45%, #3a63d8 100%),
    linear-gradient(#2a63dd, #2a63dd);
  background-color:transparent;
}
/* kp-wordmark-fallback */

/* ══ notch / home-indicator safe areas ══════════════════════════════════ */
/* drawer: start below the notch, clear the home indicator at the bottom */
.nav-drawer{
  padding-top:calc(var(--kp-safe, env(safe-area-inset-top, 0px)) + 20px);
  padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 20px);
}
/* footer: don't sit under the home indicator */
.kp-footer{
  padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 34px);
}
@media (max-width:560px){
  .kp-footer{ padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 30px); }
}