/* Shared first-screen system. Every selector stays within navigation or a hero. */
.k-nav{position:absolute;top:20px;left:22px;right:22px;z-index:100;padding:0;display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:start;gap:22px;pointer-events:none}.k-nav>*{pointer-events:auto}.k-logo--icon{width:72px;height:72px;padding:9px!important;border-radius:20px;background:rgba(248,245,235,.94);box-shadow:0 12px 34px rgba(7,61,40,.1);backdrop-filter:blur(18px)}.k-logo--icon img{width:54px!important;height:54px!important;border-radius:15px!important}.k-nav-links{justify-self:center;padding:8px;gap:2px;border:1px solid rgba(7,61,40,.13);border-radius:999px;background:rgba(248,245,235,.95);box-shadow:0 12px 34px rgba(7,61,40,.1);backdrop-filter:blur(18px)}.k-nav-links>a,.k-nav-links .drop-label{min-height:48px;padding:0 17px;display:flex;align-items:center;border-radius:999px;color:var(--k-ink);font-weight:750;cursor:pointer}.k-nav-links>a:hover,.k-nav-links .has-drop:hover .drop-label,.k-nav-links .has-drop:focus-within .drop-label{background:#c9f0d8;color:var(--k-ink)}.k-nav-cta{padding-top:5px}.k-nav-cta .btn{min-height:62px;padding:0 24px;border:0;border-radius:16px;box-shadow:0 12px 30px rgba(7,61,40,.13)}.k-nav-links .drop{top:calc(100% + 12px)}
.k-mobile-nav{display:none}
.p-hero,.seo-hero,.wf-hero,.legal-hero{min-height:min(820px,100svh);padding-top:150px!important;padding-bottom:72px!important;background:#f8f5eb}.p-hero::before,.p-hero::after,.seo-hero::before,.seo-hero::after,.wf-hero::before,.wf-hero::after,.legal-hero::before,.legal-hero::after{display:none!important}.p-hero-inner,.seo-hero-inner,.wf-hero-inner,.legal-hero-inner{width:min(1320px,calc(100% - 48px));max-width:1320px!important;margin-inline:auto}.p-hero-copy .breadcrumbs,.seo-hero .breadcrumbs,.wf-hero .breadcrumbs,.legal-hero .breadcrumbs,.p-hero-actions .free-note,.seo-hero-cta .free-note,.cp-hero-sticker{display:none!important}.p-hero h1,.seo-hero h1,.wf-hero h1,.legal-hero h1{max-width:900px;font-family:var(--font-display);font-size:clamp(58px,7vw,108px)!important;line-height:.88!important;letter-spacing:-.065em!important;color:var(--k-ink)}.p-hero .lead,.seo-hero .seo-sub,.seo-hero .seo-direct-answer,.wf-hero .wf-lead,.legal-hero p{max-width:650px;font-size:18px;line-height:1.55}.p-hero-actions,.seo-hero-cta{margin-top:30px}.p-hero-figma-wide{border-radius:28px!important;box-shadow:0 28px 65px rgba(7,61,40,.16)!important}
@media(max-width:900px){.k-nav{top:10px;left:12px;right:12px;grid-template-columns:58px 1fr;gap:10px}.k-logo--icon{width:58px;height:58px;padding:7px!important;border-radius:16px}.k-logo--icon img{width:44px!important;height:44px!important;border-radius:12px!important}.k-nav-links{display:none}.k-nav-cta{justify-self:end;padding:0}.k-nav-cta .btn{min-height:58px;padding:0 18px}.p-hero,.seo-hero,.wf-hero,.legal-hero{min-height:auto;padding:112px 18px 54px!important;align-items:flex-start!important;justify-content:flex-start!important}.p-hero-inner,.seo-hero-inner,.wf-hero-inner,.legal-hero-inner{width:100%;display:block!important;padding-top:0!important;padding-bottom:0!important}.p-hero-inner>*+*,.seo-hero-inner>*+*{margin-top:32px}.p-hero h1,.seo-hero h1,.wf-hero h1,.legal-hero h1{font-size:clamp(44px,13vw,70px)!important}}
@media(max-width:900px){.k-nav{grid-template-columns:58px 1fr 58px}.k-nav-cta{display:none!important}.k-mobile-nav{position:relative;display:block;grid-column:3}.k-mobile-nav summary{width:58px;height:58px;display:grid;place-content:center;gap:7px;border-radius:16px;background:var(--k-ink);cursor:pointer;list-style:none}.k-mobile-nav summary::-webkit-details-marker{display:none}.k-mobile-nav summary span{display:block;width:22px;height:2px;background:#fff;transition:transform .2s}.k-mobile-nav[open] summary span:first-child{transform:translateY(4.5px) rotate(45deg)}.k-mobile-nav[open] summary span:last-child{transform:translateY(-4.5px) rotate(-45deg)}.k-mobile-nav-panel{position:absolute;top:68px;right:0;width:min(290px,calc(100vw - 24px));padding:10px;display:grid;gap:4px;border:1px solid rgba(7,61,40,.13);border-radius:18px;background:#f8f5eb;box-shadow:0 24px 50px rgba(7,61,40,.16)}.k-mobile-nav-panel a{padding:14px 16px;border-radius:11px;font-weight:750;color:var(--k-ink)}.k-mobile-nav-panel a:hover{background:#c9f0d8}}

/* Remove hero-only micro decoration; primary copy, CTAs and imagery stay intact. */
.p-hero .p-eyebrow,.p-hero .p-hero-perks,.seo-hero .seo-crumbs,.seo-hero .mv-sticker{display:none!important}

.k-nav{grid-template-columns:auto minmax(0,1fr) auto}.k-logo--icon{width:auto;min-width:184px;padding:9px 16px 9px 9px!important}.k-logo--icon span{font-size:24px;font-weight:850;letter-spacing:-.045em;color:var(--k-ink)}
@media(max-width:900px){.k-nav{grid-template-columns:auto 1fr 58px}.k-logo--icon{width:auto;min-width:148px;height:58px;padding:7px 12px 7px 7px!important}.k-logo--icon span{font-size:20px}}

/* Borderless nav chrome and a calmer brand lockup. */
.k-nav{--brand-nav-border:0;--brand-gap:18px;border:var(--brand-nav-border)!important}.k-nav-links{border:var(--brand-nav-border)!important}.k-logo--icon{gap:var(--brand-gap)!important;background:transparent;box-shadow:none;border:var(--brand-nav-border)!important;padding-left:0!important}

/* Linktree-inspired shared pill navigation without an outline. */
.k-nav{--shared-nav-radius:999px;--shared-nav-cta:#06150e;min-height:82px;padding:5px 7px 5px 20px;align-items:center;border-radius:var(--shared-nav-radius);background:rgba(248,245,235,.96);box-shadow:0 14px 40px rgba(7,61,40,.12);backdrop-filter:blur(18px)}.k-logo--icon{height:72px}.k-nav-links{background:transparent;box-shadow:none;backdrop-filter:none}.k-nav-cta{padding-top:0}.k-nav-cta .btn{min-height:68px;padding:0 28px;border-radius:999px!important;background:var(--shared-nav-cta)!important;color:#fff!important;box-shadow:none}.k-nav-cta .btn:hover{background:#173328!important;transform:translateY(-1px)}
@media(max-width:900px){.k-nav{min-height:68px;padding:5px 5px 5px 12px;border-radius:34px}.k-logo--icon{height:58px}}

/* Keep the supplied dark logo mark, but remove any nested brand surface. */
.k-logo--icon{--brand-surface:transparent;background:var(--brand-surface)!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important}.k-logo--icon::before,.k-logo--icon::after{content:none!important;display:none!important}

/* Increase shared navigation legibility without changing its pill geometry. */
.k-nav{--shared-nav-font-size:16px}.k-nav-links>a,.k-nav-links .drop-label,.k-nav-cta .btn,.k-mobile-nav-panel a{font-size:var(--shared-nav-font-size)}

/* Shared nav CTA — always black rounded-pill (all pages). Higher specificity than
   .products-refresh .btn-lemon / .solutions-refresh .btn-lemon so page-scoped
   button repaints never leak into the nav. */
.k-nav .btn.btn-lemon,
.k-nav-cta .btn.btn-lemon,
.k-nav .btn.btn-ink,
.k-nav-cta .btn.btn-ink{
  background:#06150e!important;color:#fff!important;
  border:2px solid #06150e!important;border-radius:999px!important;
  box-shadow:none!important;
}
.k-nav .btn.btn-lemon:hover,
.k-nav-cta .btn.btn-lemon:hover,
.k-nav .btn.btn-ink:hover,
.k-nav-cta .btn.btn-ink:hover{
  background:#173328!important;color:#fff!important;
  border-color:#173328!important;
  transform:translateY(-1px)!important;box-shadow:none!important;
}
.k-nav .btn.btn-arrow::after,
.k-nav-cta .btn.btn-arrow::after{
  content:'↗'!important;color:inherit!important;background:transparent!important;
  border:0!important;border-radius:0!important;
  width:auto!important;height:auto!important;
  margin-left:2px!important;font-size:inherit!important;font-weight:400!important;
}

/* Shared nav logo wordmark — must render identically on every page.
   Higher specificity than .products-refresh span / .solutions-refresh span
   so page-scoped `span { font-family: sans !important }` sweeps can't downgrade
   the "Knocket" wordmark on product/solution pages. */
.k-nav .k-logo--icon span,
.k-nav .k-logo span{
  font-family:var(--font-display)!important;
  font-weight:850!important;
  font-size:24px!important;
  letter-spacing:-.045em!important;
  color:var(--k-ink)!important;
}
@media(max-width:900px){
  .k-nav .k-logo--icon span,
  .k-nav .k-logo span{font-size:20px!important}
}

/* Keep the shared navigation visible while scrolling. */
.k-nav{position:fixed!important;top:20px;left:22px;right:22px;z-index:1000}
@media(max-width:900px){.k-nav{top:10px;left:12px;right:12px}}

/* ============================================================
   Mobile secondary navigation (≤900px)
   Turns the flat hamburger list into an accordion that mirrors
   the desktop Products / Solutions / Tutorials dropdowns, plus a
   Start-Free CTA. Uses native <details> — no JS.
   ============================================================ */
@media(max-width:900px){
  .k-mobile-nav-panel{
    top:66px;right:0;
    width:min(320px,calc(100vw - 20px));
    max-height:calc(100svh - 96px);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:10px;display:grid;gap:2px;
    border:1px solid rgba(7,61,40,.13);border-radius:20px;
    background:#f8f5eb;box-shadow:0 24px 50px rgba(7,61,40,.18);
  }
  /* Expandable group */
  .k-mnav-group{border-radius:13px;overflow:hidden}
  .k-mnav-group>summary{
    list-style:none;cursor:pointer;
    /* Reset the hamburger-button styles that the broad
       `.k-mobile-nav summary` rule (line 6) leaks onto these group
       toggles — otherwise unopened groups render as 58x58 dark squares. */
    width:auto;height:auto;place-content:initial;gap:0;background:transparent;
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 15px;border-radius:13px;
    font-weight:800;font-size:16px;color:var(--k-ink);
  }
  .k-mnav-group>summary::-webkit-details-marker{display:none}
  .k-mnav-group>summary:hover{background:#eaf3ec}
  .k-mnav-caret{font-size:13px;opacity:.5;transition:transform .2s ease}
  .k-mnav-group[open]>summary{background:#e7f3ea}
  .k-mnav-group[open]>summary .k-mnav-caret{transform:rotate(180deg);opacity:.9}
  /* Sub-links */
  .k-mnav-sub{display:grid;gap:1px;padding:2px 4px 8px}
  .k-mnav-sub a{
    display:flex;flex-direction:column;gap:1px;
    padding:10px 13px;border-radius:10px;
    color:var(--k-ink);font-weight:650;font-size:15px;line-height:1.25;
  }
  .k-mnav-sub a b{font-weight:750}
  .k-mnav-sub a span{font-size:12.5px;color:#5c7568;font-weight:500}
  .k-mnav-sub a:hover{background:#dff0e4}
  .k-mnav-subhead{
    padding:9px 13px 4px;font-size:10.5px;font-weight:850;
    letter-spacing:.14em;text-transform:uppercase;color:#7c9488;
  }
  /* Top-level links */
  .k-mnav-top{
    padding:14px 15px;border-radius:13px;
    font-weight:800;font-size:16px;color:var(--k-ink);
  }
  .k-mnav-top:hover{background:#eaf3ec}
  /* CTA */
  .k-mnav-cta{
    margin-top:8px;display:flex;align-items:center;justify-content:center;gap:10px;
    padding:15px 18px;border-radius:14px;
    background:#06150e;color:#fff!important;font-weight:800;font-size:16px;
  }
  .k-mnav-cta span{transition:transform .2s ease}
  .k-mnav-cta:hover{background:#173328}
  .k-mnav-cta:hover span{transform:translateX(3px)}
}
@media(prefers-reduced-motion:reduce){
  .k-mnav-caret,.k-mnav-cta span{transition:none!important}
}

/* A dropdown label that is also a real link (e.g. Tutorials → /tutorials/).
   Keep it visually identical to the <span> drop-labels: same pill hover,
   no dark inversion from the generic .k-nav-links a:hover rule. */
.k-nav-links a.drop-label{color:var(--k-ink);text-decoration:none}
.k-nav-links a.drop-label:hover,
.k-nav-links .has-drop:hover a.drop-label,
.k-nav-links .has-drop:focus-within a.drop-label{
  background:#c9f0d8!important;color:var(--k-ink)!important;
}
.k-nav-links a.drop-label .caret{opacity:.55}
.k-nav-links .has-drop:hover a.drop-label .caret{transform:rotate(180deg);opacity:1}