/* metric-fallback */
@font-face{font-family:"Archivo Black Fallback";src:local("Arial Black");size-adjust:100%}
@charset "utf-8";
/* ============================================================================
   SpinPanda — style.css  ·  namespace: knx-
   Archetype: IRON STAMP — heavy poster grotesk display + mono metric cells,
   light instrument base, graphite ink, disciplined brand accent, sharp 0px
   corners, 1px hairlines, hard die-cut offset shadow as signature elevation.
   Parts (header/footer/hero/pagetitle/breadcrumbs/byline/faq/toc/authorcard/
   proscons/reviews/slots) ship their own inline CSS and adapt through the
   tokens declared here. This file owns tokens + shell + prose + tables +
   callout + CTA + cookie + doc/author pages.
   ========================================================================== */


/* ---- typed custom props (GPU-interpolated fx, no layout repaint) ---------- */
@property --knx-fx1{syntax:'<color>';inherits:false;initial-value:transparent}
@property --knx-fxang{syntax:'<angle>';inherits:false;initial-value:100deg}
@property --knx-ba{syntax:'<angle>';inherits:false;initial-value:0deg}

/* ============================ DESIGN TOKENS ================================ */
:root{
  /* layout system */
  --knx-wrap:1212px;
  --knx-pad:clamp(16px,4vw,34px);

  /* neutral tonal ladder — warm light instrument base */
  --knx-bg:#f2f1ec;
  --knx-surface:#ffffff;
  --knx-surface-2:#e7e5dd;
  --knx-ink:#15141a;
  --knx-ink-2:#43414b;
  --knx-ink-3:#5c5a64;
  --knx-hairline:color-mix(in srgb,var(--knx-ink) 16%,transparent);
  --knx-hair-soft:color-mix(in srgb,var(--knx-ink) 9%,transparent);

  /* brand palette (fixed HEX — do not swap) */
  --knx-accent:#b08f61;            /* dominant: links, kickers, active, icons */
  --knx-accent-2:#120947;          /* secondary highlights, badges */
  --knx-cta:#2c257a;               /* main action button fill */
  --knx-cta-ink:#ffffff;
  --knx-link:#7c5c30;              /* darkened accent for AA-readable prose links */

  /* dark stamp plate (frame #80c99d darkened) */
  --knx-dark:#10211a;
  --knx-dark-ink:#eef3ef;
  --knx-dark-hair:color-mix(in srgb,#ffffff 16%,transparent);

  /* component tokens read by parts */
  --knx-r:0px;
  --knx-r-sm:0px;
  --knx-tp-star:#0aa06e;
  --knx-dur:.18s;
  --knx-ease:cubic-bezier(.16,1,.3,1);

  /* type scale — ratio 1.25, fluid where it matters */
  --knx-step--1:.82rem;
  --knx-step-0:1rem;
  --knx-step-1:1.15rem;
  --knx-step-2:clamp(1.3rem,1.05rem + 1.1vw,1.62rem);
  --knx-step-3:clamp(1.62rem,1.25rem + 1.7vw,2.15rem);
  --knx-step-4:clamp(2.05rem,1.4rem + 2.9vw,3rem);

  /* die-cut offset (hard, no blur) — signature elevation */
  --knx-stamp:3px 3px 0 0 color-mix(in srgb,var(--knx-accent) 62%,transparent);
  --knx-stamp-ink:3px 3px 0 0 color-mix(in srgb,var(--knx-ink) 78%,transparent);

  --knx-font-display:'Archivo Black','Archivo Black Fallback','Red Hat Display',system-ui,-apple-system,'Segoe UI',sans-serif;
  --knx-font-text:'Red Hat Text',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --knx-font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  color-scheme:light;
  scrollbar-color:color-mix(in srgb,var(--knx-accent) 45%,transparent) transparent;
  scrollbar-width:thin;
  accent-color:var(--knx-accent);
}

/* ============================ RESET / BASE ================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body.knx-body{
  margin:0;
  background:var(--knx-bg);
  color:var(--knx-ink);
  font-family:var(--knx-font-text);
  font-size:clamp(1rem,.97rem + .12vw,1.06rem);
  line-height:1.62;
  font-weight:400;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"kern" 1,"liga" 1;
}
img,svg,video,canvas,iframe{max-width:100%;height:auto}
img{display:block}
strong,b{font-weight:700}
:where(h1,h2,h3,h4,h5,h6){font-family:var(--knx-font-display);font-weight:400;line-height:1.06;letter-spacing:-.015em;text-wrap:balance;color:var(--knx-ink)}
p{text-wrap:pretty}
hr{border:0;border-top:1px solid var(--knx-hairline);margin:1.9em 0}
a{color:var(--knx-link);text-underline-offset:2px}
a:hover{color:var(--knx-ink)}

::selection{background:color-mix(in srgb,var(--knx-accent) 34%,transparent);color:var(--knx-ink)}
:focus-visible{outline:2px solid var(--knx-accent);outline-offset:2px;border-radius:2px}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--knx-accent) 45%,transparent);border:3px solid var(--knx-bg)}
::-webkit-scrollbar-track{background:transparent}

/* skip link */
.knx-skip{position:absolute;left:-9999px;top:0;z-index:400;background:var(--knx-cta);color:#fff;padding:12px 18px;font-weight:700;text-decoration:none}
.knx-skip:focus{left:12px;top:12px}

/* ============================ CONTAINER =================================== */
.knx-wrap{width:100%;max-width:var(--knx-wrap);margin-inline:auto;padding-inline:var(--knx-pad);box-sizing:border-box}

.knx-main{
  max-width:var(--knx-wrap);
  margin-inline:auto;
  padding-inline:var(--knx-pad);
  padding-block:clamp(18px,2.4vw,30px) clamp(28px,4vw,54px);
  box-sizing:border-box;
}
:where(.knx-main,.knx-doc) [id],.knx-hero,.knx-slots,.knx-rv,.knx-faq{scroll-margin-top:84px}

/* ============================ HEADER SHELL (visual only) ================== */
.knx-head{
  background:var(--knx-dark);
  color:var(--knx-dark-ink);
  border-bottom:1px solid var(--knx-dark-hair);
  box-shadow:0 1px 0 color-mix(in srgb,var(--knx-accent) 40%,transparent);
}
.knx-head a{color:var(--knx-dark-ink)}
.knx-head .knx-nav__list a{color:var(--knx-dark-ink)}
.knx-head .knx-nav__list a[aria-current="page"]{color:var(--knx-accent)}
/* editorial accent tick riser on the stamp header */
.knx-head__bar::after{content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);width:56px;height:2px;background:var(--knx-accent)}
.knx-burger{color:var(--knx-dark-ink)!important}
@media(max-width:900px){
  .knx-head .knx-nav__list a{color:var(--knx-dark-ink)}
}

/* ============================ PROSE (money + doc bodies) ================== */
.knx-prose{color:var(--knx-ink);font-size:clamp(1rem,.97rem + .16vw,1.08rem)}
.knx-prose>*:first-child{margin-top:0}

/* vertical rhythm — headings & paragraphs never collapse together */
.knx-prose p,.knx-doc p{margin:1em 0 0;line-height:1.68;color:var(--knx-ink-2)}
.knx-prose p:first-child{margin-top:0}
.knx-prose>p:first-of-type,.knx-doc>p:first-of-type{color:var(--knx-ink)}

.knx-prose h2,.knx-doc h2{
  margin:1.75em 0 .45em;
  font-size:var(--knx-step-3);
  line-height:1.05;
  letter-spacing:-.02em;
  text-transform:uppercase;
  padding:.05em 0 .05em .62em;
  border-left:5px solid var(--knx-accent);
}
.knx-prose h3,.knx-doc h3{margin:1.35em 0 .35em;font-size:var(--knx-step-2);line-height:1.12;letter-spacing:-.015em;color:var(--knx-ink)}
.knx-prose h4,.knx-doc h4{margin:1.25em 0 .3em;font-size:var(--knx-step-1);letter-spacing:0;text-transform:uppercase;color:var(--knx-ink-2)}

/* stamp eyebrow riser under H2 for editorial cadence */
.knx-prose h2::before,.knx-doc h2::before{
  content:"";display:block;width:34px;height:6px;margin:0 0 .5em -.62em;
  background:repeating-linear-gradient(90deg,var(--knx-accent) 0 7px,transparent 7px 11px);
}

/* prose links — animated growing underline, AA readable */
.knx-prose a:not(.knx-cta),.knx-doc a:not(.knx-cta){
  color:var(--knx-link);
  font-weight:600;
  text-decoration:none;
  background-image:linear-gradient(var(--knx-accent),var(--knx-accent));
  background-size:0% 2px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .22s var(--knx-ease), color .18s ease;
}
.knx-prose a:not(.knx-cta):hover,.knx-doc a:not(.knx-cta):hover{color:var(--knx-ink);background-size:100% 2px}

/* premium finish — bold tabular numbers inside body copy */
.knx-prose strong,.knx-doc strong{font-weight:600;font-variant-numeric:tabular-nums lining-nums;color:var(--knx-ink)}
.knx-prose em,.knx-doc em{font-style:italic}

/* lists — IRON STAMP square markers in accent */
.knx-prose ul,.knx-prose ol,.knx-doc ul,.knx-doc ol{margin:1em 0 0;padding-left:0;list-style:none}
.knx-prose ul>li,.knx-doc ul>li{position:relative;margin:.5em 0;padding-left:1.55em;line-height:1.6;color:var(--knx-ink-2)}
.knx-prose ul>li::before,.knx-doc ul>li::before{
  content:"";position:absolute;left:0;top:.62em;width:.52em;height:.52em;
  background:var(--knx-accent);box-shadow:2px 2px 0 0 color-mix(in srgb,var(--knx-accent-2) 55%,transparent);
}
.knx-prose ol,.knx-doc ol{counter-reset:knxol}
.knx-prose ol>li,.knx-doc ol>li{position:relative;margin:.55em 0;padding-left:2.1em;line-height:1.6;color:var(--knx-ink-2);counter-increment:knxol}
.knx-prose ol>li::before,.knx-doc ol>li::before{
  content:counter(knxol,decimal-leading-zero);position:absolute;left:0;top:.05em;
  font-family:var(--knx-font-mono);font-weight:700;font-size:.82em;color:var(--knx-accent);
  font-variant-numeric:tabular-nums;
}
.knx-prose li>ul,.knx-prose li>ol{margin-top:.35em}

/* blockquote / pull-quote — thick accent rule */
.knx-prose blockquote,.knx-doc blockquote{
  margin:1.5em 0 0;padding:.6em 0 .6em 1.15em;
  border-left:5px solid var(--knx-accent);
  font-size:var(--knx-step-1);line-height:1.4;font-weight:500;color:var(--knx-ink);
  background:var(--knx-hair-soft);
}
.knx-prose blockquote p,.knx-doc blockquote p{margin:0;color:inherit}

/* figures / content images — full picture, centered, capped */
.knx-prose figcaption,.knx-doc figcaption,.knx-cimg figcaption{margin-top:.55em;text-align:center;font-size:.85em;color:var(--knx-ink-3)}
.knx-cimg{margin:2em auto;width:min(72%,760px);max-width:100%}
.knx-cimg img,.knx-figure img,.knx-img{width:100%;height:auto;display:block;border:1px solid var(--knx-hairline)}
@media(max-width:640px){.knx-cimg{width:100%}}

/* ============================ TABLES (bare + wrapped) ==================== */
.knx-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.6em 0 0;box-shadow:var(--knx-stamp)}
.knx-prose table,.knx-doc table,.knx-tablewrap table,table:not(.knx-table){
  width:100%;border-collapse:collapse;margin:1.6em 0 0;
  font-size:.95rem;background:var(--knx-surface);
  border:1px solid var(--knx-ink);
  font-variant-numeric:tabular-nums lining-nums;
}
.knx-tablewrap table{margin:0}
.knx-prose caption,.knx-doc caption,table caption{caption-side:top;text-align:left;font-family:var(--knx-font-display);font-size:.9rem;text-transform:uppercase;letter-spacing:.02em;color:var(--knx-ink-2);padding:0 0 .55em}
/* stamp header row — solid inverse plate */
.knx-prose thead th,.knx-doc thead th,.knx-tablewrap thead th,table:not(.knx-table) thead th{
  background:var(--knx-dark);color:var(--knx-dark-ink);
  font-family:var(--knx-font-display);font-weight:400;
  text-transform:uppercase;letter-spacing:.03em;font-size:.8rem;
  text-align:left;padding:11px 14px;border-right:1px solid var(--knx-dark-hair);
}
.knx-prose th,.knx-doc th,.knx-tablewrap th,table:not(.knx-table) th{text-align:left}
.knx-prose td,.knx-prose th,.knx-doc td,.knx-doc th,.knx-tablewrap td,.knx-tablewrap th,table:not(.knx-table) td,table:not(.knx-table) th{
  padding:10px 14px;border-top:1px solid var(--knx-hairline);vertical-align:top;line-height:1.5;
}
/* first column carries weight (IRON STAMP: label bold, values mono) */
.knx-prose tbody td:first-child,.knx-doc tbody td:first-child,.knx-tablewrap tbody td:first-child,table:not(.knx-table) tbody td:first-child{
  font-weight:600;color:var(--knx-ink);
}
.knx-prose tbody th[scope=row],.knx-doc tbody th[scope=row]{font-weight:700;color:var(--knx-ink);background:var(--knx-surface-2)}
.knx-prose tbody tr:nth-child(even) td,.knx-doc tbody tr:nth-child(even) td,.knx-tablewrap tbody tr:nth-child(even) td,table:not(.knx-table) tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--knx-ink) 3%,transparent)}
.knx-prose tbody tr:hover td,.knx-doc tbody tr:hover td,.knx-tablewrap tbody tr:hover td{background:color-mix(in srgb,var(--knx-accent) 12%,transparent)}
/* numeric-leaning cells align right, mono */
.knx-prose td[data-num],.knx-doc td[data-num],.knx-prose .knx-num,.knx-doc .knx-num{font-family:var(--knx-font-mono);text-align:right;font-variant-numeric:tabular-nums}

/* ============================ CALLOUT / FACT CARD ======================== */
.knx-callout{
  position:relative;margin:1.8em 0 0;padding:18px 20px 18px 22px;
  background:var(--knx-surface);
  border:1px solid var(--knx-ink);
  border-left:6px solid var(--knx-accent);
  box-shadow:var(--knx-stamp);
  color:var(--knx-ink-2);
}
.knx-callout>*:first-child{margin-top:0}
.knx-callout>*:last-child{margin-bottom:0}
.knx-callout .knx-callout__title,.knx-callout>strong:first-child{
  display:block;font-family:var(--knx-font-display);text-transform:uppercase;
  letter-spacing:.02em;font-size:.88rem;color:var(--knx-ink);margin-bottom:.4em;
}
.knx-callout--warn{border-left-color:var(--knx-accent-2)}
.knx-callout--dark{background:var(--knx-dark);color:var(--knx-dark-ink);border-color:var(--knx-dark)}
.knx-callout--dark .knx-callout__title{color:#fff}
.knx-callout--dark a{color:var(--knx-accent)}

/* ============================ CTA BUTTONS ================================= */
/* Base geometry mostly set by header inline CSS; this owns colour + fx.       */
.knx-cta{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:48px;padding:14px 26px;
  font-family:var(--knx-font-display);font-weight:400;
  text-transform:uppercase;letter-spacing:.05em;font-size:.86rem;
  text-decoration:none;line-height:1;cursor:pointer;
  border:2px solid transparent;
  transition:background-color .2s var(--knx-ease), color .2s var(--knx-ease), border-color .2s var(--knx-ease), transform .16s var(--knx-ease), --knx-fx1 .5s, --knx-fxang .5s;
}
.knx-cta,.knx-cta--solid{
  background:linear-gradient(var(--knx-fxang),var(--knx-cta),var(--knx-fx1)),var(--knx-cta);
  color:var(--knx-cta-ink);border-color:var(--knx-cta);
}
.knx-cta--ghost{
  background:transparent;color:var(--knx-cta);border-color:var(--knx-cta);
}
/* die-cut offset lift on hover — accent tone, no blur */
.knx-cta::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,color-mix(in srgb,#fff 30%,transparent) 50%,transparent 68%);
  transform:translateX(-130%);transition:transform .6s var(--knx-ease);
}
.knx-cta>*{position:relative;z-index:2}
.knx-cta:hover{
  transform:translateY(-2px);
  --knx-fx1:color-mix(in oklch,var(--knx-accent) 72%,white);
  --knx-fxang:135deg;
}
.knx-cta--solid:hover,.knx-cta:hover{color:#fff;border-color:color-mix(in srgb,var(--knx-cta) 80%,var(--knx-accent))}
.knx-cta--ghost:hover{background:var(--knx-cta);color:#fff}
.knx-cta:hover::after{transform:translateX(130%)}
.knx-cta:active{transform:translateY(1px)}
.knx-cta:focus-visible{outline:2px solid var(--knx-accent);outline-offset:3px}

/* animated conic spin-border on the main solid CTA (progressive, dosed) */
@supports (background-clip:border-box){
  @media(prefers-reduced-motion:no-preference){
    .knx-ctarow .knx-cta--solid{
      border-color:transparent;
      background:
        linear-gradient(var(--knx-cta),var(--knx-cta)) padding-box,
        conic-gradient(from var(--knx-ba),var(--knx-accent),transparent 70deg,var(--knx-accent) 150deg,transparent 210deg,var(--knx-accent) 300deg) border-box;
      animation:knx-ckyee 5s linear infinite;
    }
    @keyframes knx-ckyee{to{--knx-ba:360deg}}
  }
}

/* body CTA is always centred, at any nesting depth */
.knx-ctarow{display:flex;justify-content:center;margin:1.6em 0}
.knx-main>.knx-cta,
.knx-main :not(.knx-hero__cta):not(.knx-nav__cta)>.knx-cta{display:flex;width:fit-content;margin:1.5em auto}

/* ============================ DOC / AUTHOR PAGES ========================= */
/* Trust/legal + author bodies fill the container full width (no narrow col) */
.knx-doc{max-width:none}
.knx-doc p,.knx-doc li,.knx-doc h2,.knx-doc h3{max-width:none}
.knx-authorpage p{max-width:none}
.knx-authorpage__photo{
  width:clamp(180px,26vw,240px);aspect-ratio:3/4;height:auto;
  object-fit:cover;float:left;margin:.2em 26px 14px 0;
  border:1px solid var(--knx-ink);box-shadow:var(--knx-stamp);
}
.knx-authorpage__meta{overflow:hidden}
@media(max-width:560px){.knx-authorpage__photo{float:none;margin:0 0 16px;width:200px}}

/* ============================ ADVANTAGE CHIPS ============================= */
/* short advantage lists laid out as inline stamp-chips (opt-in class) */
.knx-chips{display:flex;flex-wrap:wrap;gap:.55em;list-style:none;margin:1.2em 0 0;padding:0}
.knx-chips>li{
  margin:0;padding:.5em .85em;list-style:none;
  background:var(--knx-surface);border:1px solid var(--knx-ink);
  box-shadow:2px 2px 0 0 color-mix(in srgb,var(--knx-accent) 55%,transparent);
  font-weight:600;font-size:.86rem;line-height:1.2;color:var(--knx-ink);
}
.knx-chips>li::before{content:none}
@media(max-width:640px){.knx-chips{flex-direction:column}.knx-chips>li{width:100%}}

/* ============================ COOKIE BANNER ============================== */
.knx-cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:300;
  background:var(--knx-dark);color:var(--knx-dark-ink);
  border-top:2px solid var(--knx-accent);
  box-shadow:0 -8px 30px rgba(0,0,0,.28);
}
.knx-cookie[hidden]{display:none}
.knx-cookie__inner{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-block:14px}
.knx-cookie__txt{margin:0;flex:1 1 320px;min-width:0;font-size:.86rem;line-height:1.5;color:color-mix(in srgb,var(--knx-dark-ink) 88%,transparent)}
.knx-cookie__btns{display:flex;gap:10px;flex:0 0 auto}
.knx-cookie__btn{
  min-height:44px;padding:9px 18px;cursor:pointer;
  font-family:var(--knx-font-display);font-weight:400;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.04em;
  background:transparent;color:var(--knx-dark-ink);
  border:1px solid var(--knx-dark-hair);
  transition:background-color .18s ease, color .18s ease, transform .16s var(--knx-ease);
}
.knx-cookie__btn:hover{transform:translateY(-2px);border-color:var(--knx-accent)}
.knx-cookie__btn--ok{background:var(--knx-cta);color:var(--knx-cta-ink);border-color:var(--knx-cta)}
.knx-cookie__btn--ok:hover{background:color-mix(in srgb,var(--knx-cta) 84%,#fff)}

/* ============================ 404 fallback =============================== */
.knx-404__code{font-family:var(--knx-font-display);font-size:clamp(3rem,12vw,6rem);color:var(--knx-accent);line-height:1}

/* ============================ SIGNATURE MOTION =========================== */
/* scroll-driven reveal for prose blocks — from reserved space, CLS=0.
   [data-knx-reveal] is JS-driven by the framework; this adds a CSS-only
   enhancement for headings/callouts/tables that the framework does not tag. */
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    html.knx-js .knx-prose>h2,
    html.knx-js .knx-callout,
    html.knx-js .knx-tablewrap,
    html.knx-js .knx-cimg{
      animation:knx-wncdu linear both;
      animation-timeline:view();
      animation-range:entry 2% cover 26%;
    }
    @keyframes knx-wncdu{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  }
}

/* progressive page-transition polish */
@supports (view-transition-name:root){
  @view-transition{navigation:auto}
}

/* view transitions inherit reduced-motion below */

/* ============================ RESPONSIVE ================================= */
/* Desktop-first tokens are compact already; refine at tablet & phone.       */
@media(max-width:900px){
  .knx-main{padding-block:clamp(14px,3vw,22px) clamp(24px,5vw,40px)}
  .knx-prose h2,.knx-doc h2{font-size:clamp(1.45rem,4.5vw,1.9rem)}
}
@media(max-width:640px){
  body.knx-body{font-size:16px}
  .knx-prose,.knx-doc{font-size:16px}
  .knx-prose h2,.knx-doc h2{margin-top:1.5em;border-left-width:4px;padding-left:.5em}
  .knx-prose p,.knx-doc p{line-height:1.62}
  .knx-callout{padding:15px 16px}
  .knx-cta{width:100%;max-width:360px}
  .knx-ctarow{margin:1.3em 0}
  .knx-main :not(.knx-hero__cta):not(.knx-nav__cta)>.knx-cta{width:100%;max-width:360px}
  .knx-cookie__inner{flex-direction:column;align-items:stretch}
  .knx-cookie__btns{width:100%}
  .knx-cookie__btn{flex:1 1 auto}
  .knx-prose table,.knx-doc table{font-size:.9rem}
  .knx-prose td,.knx-prose th,.knx-doc td,.knx-doc th{padding:8px 10px}
}
@media(max-width:400px){
  .knx-cta{letter-spacing:.03em;padding:13px 18px}
}

/* ============================ REDUCED MOTION ============================= */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .knx-cta::after{display:none}
}
html,body{overflow-x:hidden}

/* container-guarantee */
.knx-prose{max-width:var(--knx-wrap,1200px);margin-inline:auto;padding-inline:clamp(16px,4vw,32px);box-sizing:border-box}
.knx-main .knx-prose,.knx-main>.knx-wrap{max-width:none;padding-inline:0;margin-inline:0}

/* premium-motion */
@media (prefers-reduced-motion: no-preference){
.knx-slot,.knx-pc__col,.knx-rv,[class*="knx-"][class*="card"]{transition:transform .2s cubic-bezier(.19,1,.22,1)}
.knx-slot:hover,.knx-pc__col:hover,.knx-rv:hover,[class*="knx-"][class*="card"]:hover{transform:translateY(-7px) scale(1.008)}
.knx-cta{transition:transform .16s cubic-bezier(.19,1,.22,1)}
.knx-cta:hover{transform:translateY(-2px) scale(1.02)}
.knx-cta:active{transform:translateY(0) scale(.99)}
.knx-prose a:not([class]){position:relative;text-decoration:none}
.knx-prose a:not([class])::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:currentColor;opacity:.6;transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.19,1,.22,1)}
.knx-prose a:not([class]):hover::after{transform:scaleX(1)}
.knx-hero figure,.knx-hero picture{animation:knx-fxrdj 9s cubic-bezier(.19,1,.22,1) infinite}
@keyframes knx-fxrdj{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@supports (animation-timeline:view()){
.knx-prose>*,.knx-toc,.knx-pc,.knx-proscons,.knx-slots,.knx-reviews,.knx-faq,.knx-authorcard,.knx-author,.knx-disc,.knx-byline{animation:knx-upnuy linear both;animation-timeline:view();animation-range:entry 4% cover 33%}
@keyframes knx-upnuy{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:none}}
}
}

/* premium-polish */
:root{scrollbar-color:color-mix(in srgb,var(--knx-accent,#c9a227) 40%,transparent) transparent;scrollbar-width:thin}
::selection{background:color-mix(in srgb,var(--knx-accent,#c9a227) 30%,transparent);color:var(--knx-ink,#fff)}
:focus-visible{outline:2px solid var(--knx-accent,#c9a227);outline-offset:2px;border-radius:inherit}
@media (prefers-reduced-motion:no-preference){a:focus-visible,button:focus-visible,.knx-cta:focus-visible,[class*="knx-"][class*="btn"]:focus-visible{transition:outline-offset .15s ease,outline-color .15s ease;outline-offset:8px}}
html::before{content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:0.04;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='pn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch' seed='684'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pn)'/%3E%3C/svg%3E");background-size:220px 220px}
@supports (animation-timeline:scroll()){@media (prefers-reduced-motion:no-preference){html::after{content:"";position:fixed;top:0;left:0;width:100%;height:2px;z-index:9999;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);background:color-mix(in srgb,var(--knx-accent,#c9a227) 88%,transparent);animation:knx-dhrtt auto linear;animation-timeline:scroll(root block)}
@keyframes knx-dhrtt{to{transform:scaleX(1)}}}}

/* kf-uniq */

/* related overflow guard 2026 */
.knx-related{max-width:100%;box-sizing:border-box}
.knx-related a{overflow-wrap:anywhere;max-width:100%}