@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

/* ------------------------------------------------------------------ *
 * Brand Chronicle — marketing site
 * Palette: Dusk violet. Swap the six values below to re-skin the page.
 * ------------------------------------------------------------------ */
:root{
  --k-paper:#F4F0E6;
  --k-dim:#E9E4D9;
  --k-ink:#211C2E;
  --k-line:#C9C3B8;
  --k-accent:#4B4A7A;
  --k-on-accent:#F7F5FF;
  --k-accent2:#D9451B;
  --k-tint:#E1DFF0;

  --k-ease:cubic-bezier(.2,0,0,1);
  --k-max:1320px;
  --k-gutter:clamp(24px,4vw,56px);
  --k-band:clamp(80px,9vw,152px);
  /* Three chamfer sizes and three radii. Everything picks one of these; the
     build had drifted to six and nine values respectively. */
  --k-cut-sm:10px;   /* chips, small controls */
  --k-cut-md:13px;   /* buttons, cards */
  --k-cut-lg:16px;   /* media and large surfaces */
  --k-r-sm:8px;      /* tags, small controls */
  --k-r-md:12px;     /* media frames */
  --k-r-lg:18px;     /* panels */
  --k-r-pill:999px;  /* fully round */
  --k-vault-top:#2A2440;
  --k-lift:0 26px 60px -30px rgba(20,17,13,.55);
  /* the same softness for chamfered surfaces, which clip a box-shadow away */
  --k-lift-filter:drop-shadow(0 22px 34px rgba(20,17,13,.24));
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:96px}
html,body{margin:0;padding:0;background:var(--k-paper);-webkit-font-smoothing:antialiased}
body{
  font-family:Archivo,"Helvetica Neue",sans-serif;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  overflow-wrap:break-word;
  color:var(--k-ink);
}
h1,h2,h3,h4{color:inherit}
img,video,svg,iframe{max-width:100%}
a{color:var(--k-accent);text-decoration:none}
a:hover{color:var(--k-ink)}
:focus-visible{outline:2px solid var(--k-accent2);outline-offset:3px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;text-align:inherit}

/* ---------- motifs ---------- */
.k-chamfer{clip-path:polygon(var(--k-cut-md) 0,calc(100% - var(--k-cut-md)) 0,100% var(--k-cut-md),100% calc(100% - var(--k-cut-md)),calc(100% - var(--k-cut-md)) 100%,var(--k-cut-md) 100%,0 calc(100% - var(--k-cut-md)),0 var(--k-cut-md))}
.k-chamfer-sm{clip-path:polygon(var(--k-cut-sm) 0,calc(100% - var(--k-cut-sm)) 0,100% var(--k-cut-sm),100% calc(100% - var(--k-cut-sm)),calc(100% - var(--k-cut-sm)) 100%,var(--k-cut-sm) 100%,0 calc(100% - var(--k-cut-sm)),0 var(--k-cut-sm))}
.k-chamfer-md{clip-path:polygon(var(--k-cut-md) 0,calc(100% - var(--k-cut-md)) 0,100% var(--k-cut-md),100% calc(100% - var(--k-cut-md)),calc(100% - var(--k-cut-md)) 100%,var(--k-cut-md) 100%,0 calc(100% - var(--k-cut-md)),0 var(--k-cut-md))}
.k-chamfer-lg{clip-path:polygon(var(--k-cut-md) 0,calc(100% - var(--k-cut-md)) 0,100% var(--k-cut-md),100% calc(100% - var(--k-cut-md)),calc(100% - var(--k-cut-md)) 100%,var(--k-cut-md) 100%,0 calc(100% - var(--k-cut-md)),0 var(--k-cut-md))}
.k-chamfer-xl{clip-path:polygon(var(--k-cut-lg) 0,calc(100% - var(--k-cut-lg)) 0,100% var(--k-cut-lg),100% calc(100% - var(--k-cut-lg)),calc(100% - var(--k-cut-lg)) 100%,var(--k-cut-lg) 100%,0 calc(100% - var(--k-cut-lg)),0 var(--k-cut-lg))}
.k-dotfield{background-image:radial-gradient(rgba(33,28,46,.14) 1px,transparent 1px);background-size:24px 24px}

.k-wide-only{display:inline}
@media (max-width:860px){.k-wide-only{display:none}}
.k-mono{font-family:'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase}
.k-eyebrow{font-family:'Space Mono',monospace;font-size:10px;line-height:1.9;letter-spacing:.14em;text-transform:uppercase;color:var(--k-accent2)}
.k-rule{flex:1;border-bottom:1px solid var(--k-line);transform:translateY(-4px)}

/* ---------- layout ---------- */
.k-wrap{max-width:var(--k-max);margin:0 auto;padding-left:var(--k-gutter);padding-right:var(--k-gutter)}
.k-band{padding-top:var(--k-band);padding-bottom:var(--k-band)}
.k-cols{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:0 clamp(20px,3vw,56px)}
.k-emblem,.k-emblem-lg{display:block;color:var(--k-ink)}
.k-emblem-lg{width:clamp(120px,12vw,168px);height:clamp(120px,12vw,168px);margin-top:26px;opacity:.24}
.k-emblem-lg svg,.k-emblem svg{width:100%;height:100%;display:block}

/* element status dots */
.s-c{background:#3F7A4B}
.s-p{background:#C98A1E}
.s-n{background:#B4402E}
.s-s{background:#3A5DA8}
.s-e{background:#BFB6A4}

.k-h2{margin:0;font:800 clamp(30px,4.8vw,62px)/1.02 Archivo,sans-serif;letter-spacing:-.03em;text-wrap:pretty}
.k-lead{margin:26px 0 0;font:400 clamp(16px,1.6vw,20px)/1.55 Archivo,sans-serif;opacity:.72;max-width:60ch;text-wrap:pretty}
.k-body{margin:0;font:400 16px/1.6 Archivo,sans-serif;opacity:.72;max-width:60ch;text-wrap:pretty}

/* ---------- buttons ---------- */
.k-btn{
  display:inline-block;background:var(--k-accent);color:var(--k-on-accent);
  font:600 14px/1 Archivo,sans-serif;padding:14px 22px;
  clip-path:polygon(var(--k-cut-md) 0,calc(100% - var(--k-cut-md)) 0,100% var(--k-cut-md),100% calc(100% - var(--k-cut-md)),calc(100% - var(--k-cut-md)) 100%,var(--k-cut-md) 100%,0 calc(100% - var(--k-cut-md)),0 var(--k-cut-md));
  transition:transform 120ms var(--k-ease),background 140ms var(--k-ease);
}
.k-btn:hover{transform:translateY(-2px);background:var(--k-accent2);color:var(--k-on-accent)}
.k-btn--lg{
  font-size:17px;padding:20px 28px;background:var(--k-accent);color:var(--k-on-accent);
  clip-path:polygon(var(--k-cut-md) 0,calc(100% - var(--k-cut-md)) 0,100% var(--k-cut-md),100% calc(100% - var(--k-cut-md)),calc(100% - var(--k-cut-md)) 100%,var(--k-cut-md) 100%,0 calc(100% - var(--k-cut-md)),0 var(--k-cut-md));
}
.k-btn--lg:hover{background:var(--k-accent2);color:var(--k-on-accent)}
/* on the violet CTA band the button has to go the other way */
.k-btn--onaccent{background:var(--k-ink);color:var(--k-paper)}
.k-btn--onaccent:hover{background:var(--k-accent2);color:var(--k-on-accent)}

/* ---------- nav ---------- */
.k-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.k-skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--k-ink);color:var(--k-paper);padding:12px 18px;font:600 14px/1 Archivo,sans-serif}
.k-skip:focus{left:8px;top:8px;color:var(--k-paper)}
.k-nav{position:sticky;top:0;z-index:40;background:var(--k-paper);border-bottom:2px solid var(--k-ink)}
.k-nav__inner{max-width:var(--k-max);margin:0 auto;padding:0 var(--k-gutter);min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.k-logo{display:flex;align-items:baseline;gap:14px;flex:none}
.k-logo__word{font:800 22px/1 Archivo,sans-serif;letter-spacing:-.04em;text-transform:uppercase;color:var(--k-accent)}
/* The mark: frame in the accent, signal dot in accent2. This is the page's first
   sight of the orange, so the rest of the palette is introduced by the logo. */
.k-logo__mark{display:block;width:26px;height:26px;flex:none;align-self:center}
.k-logo__mark svg{width:100%;height:100%;display:block}
.k-mark__frame{stroke:var(--k-accent);fill:none}
.k-mark__dot{fill:var(--k-accent2)}
/* on the violet CTA the frame has to invert; the dot stays the signal */
.k-foot .k-mark__frame{stroke:var(--k-on-accent)}
.k-foot .k-logo__mark{width:22px;height:22px}
.k-nav__links{display:flex;align-items:center;gap:clamp(14px,2vw,28px);flex-wrap:wrap;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.k-nav__links a{color:var(--k-ink);opacity:.7;transition:opacity 120ms,color 120ms}
.k-nav__links a:hover{opacity:1;color:var(--k-accent)}
.k-nav__end{display:flex;align-items:center;gap:10px;flex:none}
/* A word, not a button. The nav should carry one button, and it isn't this one. */
.k-nav__login{display:inline-flex;align-items:center;gap:5px;padding:6px 4px;
  font:500 14px/1 Archivo,sans-serif;color:var(--k-ink);opacity:.62;
  transition:opacity 160ms var(--k-ease)}
.k-nav__login svg{width:13px;height:13px;transition:transform 160ms var(--k-ease)}
.k-nav__login:hover{opacity:1}
.k-nav__login:hover svg{transform:translate(1.5px,-1.5px)}
.k-nav__login-menu{display:none}
/* Bare bars. The chamfered frame made it read as a second button beside the CTA. */
.k-nav__toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;flex:none;border:0;background:transparent;padding:0}
.k-nav__bars,.k-nav__bars::before,.k-nav__bars::after{display:block;width:17px;height:1.8px;background:var(--k-ink);transition:transform 180ms var(--k-ease),opacity 120ms linear}
.k-nav__bars{position:relative}
.k-nav__bars::before,.k-nav__bars::after{content:"";position:absolute;left:0}
.k-nav__bars::before{top:-5.5px}
.k-nav__bars::after{top:5.5px}
.k-nav.is-open .k-nav__bars{background:transparent}
.k-nav.is-open .k-nav__bars::before{transform:translateY(5.5px) rotate(45deg)}
.k-nav.is-open .k-nav__bars::after{transform:translateY(-5.5px) rotate(-45deg)}

/* ---------- hero ---------- */
.k-hero{position:relative;overflow:hidden;background:var(--k-paper)}
.k-hero__field{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(33,28,46,.22) 1px,transparent 1px);background-size:24px 24px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 46%,transparent 82%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 46%,transparent 82%);
}
.k-hero__inner{position:relative;max-width:var(--k-max);margin:0 auto;padding:clamp(48px,6vw,96px) var(--k-gutter) clamp(56px,7vw,104px)}
.k-h1{margin:0;font:800 clamp(36px,5.4vw,76px)/.98 Archivo,sans-serif;letter-spacing:-.038em;max-width:26ch;text-transform:uppercase;text-wrap:balance}
/* the category line: outcome in the h1, then what the thing actually is */
.k-hero__what{margin:clamp(20px,2.6vw,32px) 0 0;font:500 clamp(19px,2.2vw,30px)/1.25 Archivo,sans-serif;letter-spacing:-.02em;color:var(--k-accent);max-width:44ch;text-wrap:balance}
/* the sentence ends on the signal dot rather than a full stop */
.k-bigdot{display:inline-block;width:.32em;height:.32em;border-radius:var(--k-r-pill);background:var(--k-accent2);margin-left:.14em;vertical-align:.02em}
.k-hero__split{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,64px);align-items:center;margin-top:clamp(24px,3vw,40px)}
.k-hero__lead{margin:0;font:400 clamp(16px,1.6vw,20px)/1.55 Archivo,sans-serif;opacity:.72;max-width:64ch;text-wrap:pretty}
.k-chips{position:relative;display:grid;grid-template-columns:repeat(2,minmax(146px,172px));gap:clamp(9px,1vw,12px)}
.k-chips::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:-38%;right:-38%;top:-28%;bottom:-28%;
  background:radial-gradient(50% 50% at 50% 50%,
    color-mix(in oklab, var(--k-accent) 22%, transparent) 0%, transparent 74%);
  filter:blur(46px);
}
.k-chip{position:relative;z-index:1}
.k-chip{
  display:flex;flex-direction:column;gap:14px;padding:16px 18px 15px;
  background:var(--k-dim);color:var(--k-ink);
  clip-path:polygon(var(--k-cut-md) 0,calc(100% - var(--k-cut-md)) 0,100% var(--k-cut-md),100% calc(100% - var(--k-cut-md)),calc(100% - var(--k-cut-md)) 100%,var(--k-cut-md) 100%,0 calc(100% - var(--k-cut-md)),0 var(--k-cut-md));
  transition:background 140ms var(--k-ease),color 140ms var(--k-ease),transform 140ms var(--k-ease);
}
.k-chip:hover{background:var(--k-accent);color:var(--k-on-accent);transform:translateY(-2px)}
.k-chip span{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;line-height:1.4}

.k-player{
  position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--k-ink);
  clip-path:polygon(var(--k-cut-lg) 0,calc(100% - var(--k-cut-lg)) 0,100% var(--k-cut-lg),100% calc(100% - var(--k-cut-lg)),calc(100% - var(--k-cut-lg)) 100%,var(--k-cut-lg) 100%,0 calc(100% - var(--k-cut-lg)),0 var(--k-cut-lg));
  cursor:pointer;display:block;width:100%;
}
/* box-shadow gets clipped away by clip-path, so chamfered surfaces use a
   drop-shadow filter instead: it follows the chamfer. */
.k-player__frame{margin-top:clamp(44px,5vw,72px);filter:var(--k-lift-filter)}
.k-player img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.88) contrast(1.04);transition:opacity 400ms var(--k-ease)}
.k-player__wash{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(33,28,46,.28) 0%,rgba(20,17,13,.06) 42%,rgba(20,17,13,.46) 100%);mix-blend-mode:multiply;transition:opacity 400ms var(--k-ease)}
.k-player__grain{position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:radial-gradient(rgba(246,241,232,.5) .5px,transparent .5px),radial-gradient(rgba(20,17,13,.42) .5px,transparent .5px);background-size:3px 3px,4px 4px;background-position:0 0,1px 2px;mix-blend-mode:overlay;transition:opacity 400ms var(--k-ease)}
.k-player iframe{position:absolute;top:-1%;left:-1%;width:102%;height:102%;border:0;display:none}
.k-player__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.k-player__play span{width:clamp(66px,7vw,86px);height:clamp(66px,7vw,86px);border-radius:var(--k-r-pill);background:var(--k-accent);color:var(--k-on-accent);display:flex;align-items:center;justify-content:center;box-shadow:0 16px 40px -12px rgba(20,17,13,.6);transition:transform 160ms var(--k-ease)}
.k-player:hover .k-player__play span{transform:scale(1.06)}
.k-player__caption{position:absolute;left:clamp(16px,2vw,26px);bottom:clamp(14px,1.8vw,22px);display:flex;align-items:center;gap:10px;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#F6F1E8}
.k-player__caption i{width:6px;height:6px;border-radius:var(--k-r-pill);background:var(--k-accent2);display:block}
.k-player.is-playing img,.k-player.is-playing .k-player__wash,.k-player.is-playing .k-player__grain{opacity:0}
.k-player.is-playing .k-player__play,.k-player.is-playing .k-player__caption{display:none}
.k-player.is-playing iframe{display:block}
.k-player.is-playing{cursor:default}

/* ---------- the stakes ---------- */
.k-stakes{background:var(--k-dim)}
.k-stakes__pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:clamp(28px,4vw,64px);margin-top:56px;padding-top:36px;border-top:1px solid var(--k-line)}
.k-stakes__open{margin:26px 0 0;font:500 clamp(19px,2vw,26px)/1.35 Archivo,sans-serif;letter-spacing:-.02em;max-width:40ch;text-wrap:pretty}
.k-stakes__kicker{margin:clamp(56px,7vw,92px) 0 0;font:500 clamp(25px,3.4vw,44px)/1.14 Archivo,sans-serif;letter-spacing:-.03em;max-width:32ch}
.k-stakes__kicker em{display:block;font-style:normal;color:var(--k-accent)}

/* ---------- features ---------- */
/* The active tab has to read as the mouth of the panel below it, so the strip
   starts past the panel's corner radius and the tab overlaps the seam by 1px. */
.k-ftabs{margin-top:clamp(34px,4vw,54px);display:flex;flex-wrap:wrap;gap:2px;padding:0 0 0 18px}
.k-ftab{
  cursor:pointer;position:relative;display:flex;align-items:baseline;gap:9px;padding:13px 18px 15px;
  background:transparent;color:var(--k-ink);
  clip-path:polygon(var(--k-cut-md) 0,calc(100% - var(--k-cut-md)) 0,100% var(--k-cut-md),100% 100%,0 100%,0 var(--k-cut-md));
  transition:background 220ms var(--k-ease),color 220ms var(--k-ease);
}
.k-ftab__no{font-family:'Space Mono',monospace;font-size:8px;letter-spacing:.14em;opacity:.6}
.k-ftab__name{font:600 clamp(13px,1.15vw,15px)/1.1 Archivo,sans-serif;letter-spacing:-.014em;white-space:nowrap}
.k-ftab[aria-selected="true"]{background:var(--k-vault-top);color:#F6F1E8;position:relative;z-index:1;margin-bottom:-1px;padding-bottom:16px}

.k-vault{background:linear-gradient(180deg,var(--k-vault-top) 0%,#14110D 100%);color:#F6F1E8;border-radius:var(--k-r-lg);padding:clamp(26px,3.2vw,52px);box-shadow:var(--k-lift)}
.k-vault__head{display:flex;align-items:center;gap:14px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,241,232,.62)}
.k-vault__head i{color:var(--k-accent2);font-style:normal}
.k-vault__dots{flex:1;border-bottom:1px dotted rgba(246,241,232,.28);transform:translateY(-3px)}
.k-vault__body{margin-top:clamp(24px,2.8vw,38px);display:flex;flex-wrap:wrap;gap:clamp(28px,3.6vw,56px);align-items:start}
.k-vault__copy{flex:1 1 260px;min-width:0}
.k-vault__copy h3{margin:0;font:700 clamp(24px,2.6vw,36px)/1.1 Archivo,sans-serif;letter-spacing:-.028em;max-width:20ch;text-wrap:pretty}
.k-vault__copy p{margin:20px 0 0;font:400 clamp(15px,1.5vw,17px)/1.6 Archivo,sans-serif;color:rgba(246,241,232,.82);max-width:46ch;text-wrap:pretty}
.k-vault__stage{position:relative;flex:2.2 1 340px;min-width:0}
/* Every variant sits in the same grid cell and stays laid out, hidden only by
   visibility. The container is therefore always as tall as its tallest variant,
   so the panel never resizes when you switch feature. */
.k-vault__panes,.k-fcopies{display:grid}
.k-vault__panes > *,.k-fcopies > *{grid-area:1/1;align-self:center}
.k-pane,.k-fcopy{visibility:hidden;opacity:0;transition:opacity 200ms var(--k-ease)}
.k-pane.is-on,.k-fcopy.is-on{visibility:visible;opacity:1}
/* outputs keeps its space so the copy column height is constant too */
.k-outputs{visibility:hidden}
.k-outputs.is-on{visibility:visible}
.k-outputs{display:flex;margin-top:clamp(22px,2.4vw,30px);padding-top:clamp(18px,2vw,24px);border-top:1px solid rgba(246,241,232,.18);flex-direction:column;align-items:flex-start;gap:13px}
.k-outputs__label{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,241,232,.6)}
.k-outputs__row{display:flex;gap:9px;flex-wrap:wrap}
.k-outbtn{
  font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  display:flex;align-items:center;gap:9px;padding:11px 15px;border:1px solid rgba(246,241,232,.34);
  color:#F6F1E8;cursor:pointer;border-radius:var(--k-r-sm);
  transition:background 140ms var(--k-ease),color 140ms var(--k-ease),border-color 140ms var(--k-ease);
}
.k-outbtn:hover{background:#F6F1E8;color:#14110D;border-color:#F6F1E8}
.k-outbtn span{opacity:.55}

.k-shot{position:relative;overflow:hidden;background:var(--k-paper);border-radius:var(--k-r-md)}
.k-shot video{width:100%;height:auto;display:block}

/* benny pane */
.k-benny{background:#fff;overflow:hidden;clip-path:polygon(var(--k-cut-md) 0,calc(100% - var(--k-cut-md)) 0,100% var(--k-cut-md),100% calc(100% - var(--k-cut-md)),calc(100% - var(--k-cut-md)) 100%,var(--k-cut-md) 100%,0 calc(100% - var(--k-cut-md)),0 var(--k-cut-md))}
.k-benny__bar{display:flex;align-items:center;gap:10px;padding:12px 15px;border-bottom:1px solid rgba(36,28,20,.12);font-family:'Space Mono',monospace;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:rgba(36,28,20,.6)}
.k-benny__mark{width:18px;height:18px;border-radius:var(--k-r-sm);background:var(--k-accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px}
.k-benny__flex{flex:1}
.k-benny__log{padding:15px;display:flex;flex-direction:column;gap:11px;min-height:264px}
.k-benny__prompt{display:none;flex-direction:column;gap:9px}
.k-benny__prompt.is-on{display:flex}
.k-benny__hint{font-family:'Space Mono',monospace;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:rgba(36,28,20,.5)}
.k-benny__chips{display:flex;gap:7px;flex-wrap:wrap}
.k-benny__chips span{font-family:'Space Mono',monospace;font-size:8px;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border:1px solid rgba(36,28,20,.2);color:#241C14}
.k-benny__ask{display:none;align-self:flex-end;max-width:82%;background:#F6F1E8;padding:11px 13px;position:relative;clip-path:polygon(var(--k-cut-sm) 0,calc(100% - var(--k-cut-sm)) 0,100% var(--k-cut-sm),100% calc(100% - var(--k-cut-sm)),calc(100% - var(--k-cut-sm)) 100%,var(--k-cut-sm) 100%,0 calc(100% - var(--k-cut-sm)),0 var(--k-cut-sm))}
.k-benny__ask.is-on{display:block}
.k-benny__ask p{margin:0;font:400 12.5px/1.5 Archivo,sans-serif;color:#241C14}
.k-benny__ask i{position:absolute;left:0;top:0;right:0;bottom:0;background:#F6F1E8;width:100%;animation:k-typewipe 1.51s steps(54,end) .3s forwards}
.k-benny__think{display:none;align-items:center;gap:7px}
.k-benny__think.is-on{display:flex}
.k-benny__think b{width:5px;height:5px;border-radius:var(--k-r-pill);background:var(--k-accent);animation:k-blink 1.1s ease-in-out infinite}
.k-benny__think b:nth-child(2){animation-delay:.18s}
.k-benny__think b:nth-child(3){animation-delay:.36s}
.k-benny__think span{font-family:'Space Mono',monospace;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:rgba(36,28,20,.55);margin-left:5px}
.k-benny__reply{display:none;max-width:92%;background:var(--k-tint);padding:13px 14px;clip-path:polygon(var(--k-cut-sm) 0,calc(100% - var(--k-cut-sm)) 0,100% var(--k-cut-sm),100% calc(100% - var(--k-cut-sm)),calc(100% - var(--k-cut-sm)) 100%,var(--k-cut-sm) 100%,0 calc(100% - var(--k-cut-sm)),0 var(--k-cut-sm))}
.k-benny__reply.is-on{display:block}
.k-benny__src{font-family:'Space Mono',monospace;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--k-accent)}
.k-benny__reply p{margin:9px 0 0;font:400 12.5px/1.55 Archivo,sans-serif;color:#241C14}
.k-benny__acts{margin-top:11px;padding-top:10px;border-top:1px solid rgba(36,28,20,.14);display:flex;gap:7px;flex-wrap:wrap}
.k-benny__acts span{font-family:'Space Mono',monospace;font-size:8px;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border:1px solid rgba(36,28,20,.2);color:#241C14}
.k-benny__acts span:first-child{background:#241C14;color:#F6F1E8;border-color:#241C14}

/* mcp pane */
.k-mcp{position:relative;width:100%;aspect-ratio:16/10;background:#fff;overflow:hidden;background-image:radial-gradient(rgba(33,28,46,.13) 1px,transparent 1px);background-size:18px 18px;clip-path:polygon(var(--k-cut-md) 0,calc(100% - var(--k-cut-md)) 0,100% var(--k-cut-md),100% calc(100% - var(--k-cut-md)),calc(100% - var(--k-cut-md)) 100%,var(--k-cut-md) 100%,0 calc(100% - var(--k-cut-md)),0 var(--k-cut-md))}
.k-mcp svg{position:absolute;inset:0;width:100%;height:100%}
.k-mcp__hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--k-ink);color:var(--k-paper);padding:14px 18px;box-shadow:0 10px 26px -10px rgba(20,17,13,.5);display:flex;flex-direction:column;gap:6px;align-items:center;clip-path:polygon(var(--k-cut-md) 0,calc(100% - var(--k-cut-md)) 0,100% var(--k-cut-md),100% calc(100% - var(--k-cut-md)),calc(100% - var(--k-cut-md)) 100%,var(--k-cut-md) 100%,0 calc(100% - var(--k-cut-md)),0 var(--k-cut-md))}
.k-mcp__hub em{font-style:normal;font-family:'Space Mono',monospace;font-size:7px;letter-spacing:.14em;text-transform:uppercase;color:var(--k-accent2)}
.k-mcp__hub strong{font:800 17px/1 Archivo,sans-serif;letter-spacing:-.03em}
.k-mcp__hub small{font-family:'Space Mono',monospace;font-size:7px;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,241,232,.6);white-space:nowrap}
.k-mcp__node{position:absolute;transform:translate(-50%,-50%);background:#fff;padding:9px 12px;box-shadow:0 2px 0 rgba(20,17,13,.14);display:flex;flex-direction:column;gap:4px;min-width:74px;animation:k-pop .5s var(--k-ease) both;clip-path:polygon(var(--k-cut-sm) 0,calc(100% - var(--k-cut-sm)) 0,100% var(--k-cut-sm),100% calc(100% - var(--k-cut-sm)),calc(100% - var(--k-cut-sm)) 100%,var(--k-cut-sm) 100%,0 calc(100% - var(--k-cut-sm)),0 var(--k-cut-sm))}
.k-mcp__node b{font:700 11.5px/1.15 Archivo,sans-serif;letter-spacing:-.01em;color:#241C14;white-space:nowrap}
.k-mcp__node small{font-family:'Space Mono',monospace;font-size:7px;letter-spacing:.14em;text-transform:uppercase;color:rgba(36,28,20,.5);white-space:nowrap}

/* measure pane */
.k-measure{position:relative;width:100%;aspect-ratio:2794/2056;overflow:hidden;background:var(--k-paper);border-radius:var(--k-r-md);container-type:size}
.k-measure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.k-measure__mask{position:absolute;height:.86%;background:rgb(236,230,220);border-radius:var(--k-r-pill)}
.k-measure__num{position:absolute;height:2.1%;background:#fff;color:#2F7D4E;font:700 1.28cqw/2.1cqh Archivo,sans-serif;text-align:right;display:block}

/* ---------- the framework ---------- */
.k-framework{position:relative;background-color:var(--k-dim);overflow:hidden}
.k-pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(max(108px,15.4%),100%),1fr));gap:clamp(10px,1.1vw,14px)}
.k-pillar{
  position:relative;padding:18px 20px 16px;background:#fff;color:var(--k-ink);cursor:pointer;
  display:flex;flex-direction:column;gap:14px;min-height:196px;width:100%;
  clip-path:polygon(var(--k-cut-md) 0,calc(100% - var(--k-cut-md)) 0,100% var(--k-cut-md),100% calc(100% - var(--k-cut-md)),calc(100% - var(--k-cut-md)) 100%,var(--k-cut-md) 100%,0 calc(100% - var(--k-cut-md)),0 var(--k-cut-md));
  transition:background 200ms var(--k-ease),color 200ms var(--k-ease),transform 200ms var(--k-ease);
}
.k-pillar__head{display:block}
.k-pillar__no{display:block;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;opacity:.7}
.k-pillar__name{display:block;margin-top:6px;font:700 clamp(16px,1.5vw,20px)/1.1 Archivo,sans-serif;letter-spacing:-.024em;text-wrap:balance}
.k-pillar__field{position:relative;flex:1;display:flex;align-items:center;justify-content:center;background-image:radial-gradient(rgba(36,28,20,.18) 1px,transparent 1px);background-size:7px 7px}
.k-pillar__field i{position:absolute;width:14px;height:14px;border:0 solid var(--k-accent2)}
.k-pillar__field i:nth-child(1){left:0;top:0;border-left-width:1.5px;border-top-width:1.5px}
.k-pillar__field i:nth-child(2){right:0;top:0;border-right-width:1.5px;border-top-width:1.5px}
.k-pillar__field i:nth-child(3){left:0;bottom:0;border-left-width:1.5px;border-bottom-width:1.5px}
.k-pillar__field i:nth-child(4){right:0;bottom:0;border-right-width:1.5px;border-bottom-width:1.5px}
.k-pillar__mark{display:block;width:clamp(76px,7vw,104px);height:clamp(76px,7vw,104px);transition:transform 260ms var(--k-ease)}
.k-pillar__mark svg{width:100%;height:100%;display:block}
.k-pillar__count{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;opacity:.78}
.k-pillar[aria-selected="true"]{background:var(--k-accent);color:var(--k-on-accent);transform:translateY(-6px)}
.k-pillar[aria-selected="true"] .k-pillar__field{background-image:radial-gradient(rgba(255,255,255,.32) 1px,transparent 1px)}
.k-pillar[aria-selected="true"] .k-pillar__mark{transform:scale(1.06)}

.k-detail{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(28px,4vw,72px);padding:clamp(32px,4vw,56px) 0 0;align-items:start}
.k-detail__pane{display:contents}
.k-detail__pane[hidden]{display:none}
.k-detail__tag{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--k-accent)}
.k-detail__blurb{margin:18px 0 0;font:500 clamp(19px,1.9vw,25px)/1.32 Archivo,sans-serif;letter-spacing:-.02em;max-width:34ch;text-wrap:pretty}
.k-detail__write{margin:20px 0 0;font:400 16px/1.6 Archivo,sans-serif;opacity:.7;max-width:46ch;text-wrap:pretty}
.k-detail__count{display:flex;align-items:baseline;gap:16px}
.k-detail__count span{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.62;white-space:nowrap}
.k-elements{margin-top:22px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));gap:14px 28px;list-style:none;padding:0}
.k-elements li{display:flex;align-items:center;gap:11px}
.k-elements i{width:7px;height:7px;border-radius:var(--k-r-pill);flex:none}
.k-elements span{font:500 16px/1.3 Archivo,sans-serif;letter-spacing:-.012em}

/* ---------- who ---------- */
.k-who{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:clamp(32px,5vw,72px);align-items:start}
.k-portrait{position:relative}
.k-portrait i{position:absolute;width:18px;height:18px;border:0 solid var(--k-line)}
.k-portrait i:first-of-type{left:-13px;top:-13px;border-left-width:1px;border-top-width:1px}
.k-portrait i:last-of-type{right:-13px;bottom:-13px;border-right-width:1px;border-bottom-width:1px}
.k-portrait__crop{filter:var(--k-lift-filter);background:var(--k-dim);clip-path:polygon(var(--k-cut-md) 0,calc(100% - var(--k-cut-md)) 0,100% var(--k-cut-md),100% calc(100% - var(--k-cut-md)),calc(100% - var(--k-cut-md)) 100%,var(--k-cut-md) 100%,0 calc(100% - var(--k-cut-md)),0 var(--k-cut-md))}
.k-portrait__crop div{position:relative;width:100%;aspect-ratio:4/5}
.k-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.k-portrait figcaption{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;opacity:.62;margin-top:13px}

/* ---------- how it works ---------- */
.k-how__top{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:clamp(32px,5vw,72px);align-items:start}
.k-how__tags{display:flex;flex-direction:column;gap:14px}
.k-how__tag{display:flex;align-items:center;gap:14px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.k-how__tag .k-emblem{width:34px;height:34px;flex:none;opacity:.75}
.k-steps{margin-top:64px;border-top:1px solid var(--k-line)}
.k-step{display:grid;grid-template-columns:minmax(0,64px) minmax(0,300px) minmax(0,1fr);gap:32px;align-items:baseline;padding:36px 0;border-bottom:1px solid var(--k-line)}
.k-step__no{font-family:'Space Mono',monospace;font-size:clamp(20px,2.2vw,29px);line-height:1;color:var(--k-accent)}
.k-step__title{font:700 clamp(22px,2.3vw,30px)/1.15 Archivo,sans-serif;letter-spacing:-.025em}
.k-step p{margin:0;font:400 16px/1.55 Archivo,sans-serif;opacity:.6;max-width:56ch;text-wrap:pretty}

/* ---------- explore ---------- */
.k-explore__head{display:flex;align-items:baseline;gap:24px;flex-wrap:wrap}
.k-explore__head span:first-child{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--k-accent2)}
.k-explore__head span:last-child{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.k-slot{
  position:relative;width:100%;aspect-ratio:16/9;background:var(--k-dim);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:32px;
  border:1px dashed var(--k-line);
}
.k-slot span{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.55;max-width:34ch;line-height:1.8}

/* ---------- pricing ---------- */
.k-price{margin-top:56px;background:linear-gradient(180deg,var(--k-vault-top) 0%,#14110D 100%);border-radius:var(--k-r-lg);padding:clamp(18px,2.2vw,30px);box-shadow:var(--k-lift)}
.k-price__head{display:flex;align-items:center;gap:14px;padding:8px 10px 20px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,241,232,.62)}
.k-price__head i{color:var(--k-accent2);font-style:normal}
.k-price__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:clamp(14px,1.6vw,22px)}
.k-pcard{background:#fff;color:var(--k-ink);padding:clamp(24px,3vw,40px);clip-path:polygon(var(--k-cut-md) 0,calc(100% - var(--k-cut-md)) 0,100% var(--k-cut-md),100% calc(100% - var(--k-cut-md)),calc(100% - var(--k-cut-md)) 100%,var(--k-cut-md) 100%,0 calc(100% - var(--k-cut-md)),0 var(--k-cut-md))}
.k-pcard--accent{background:var(--k-accent);color:var(--k-on-accent)}
.k-pcard__fig{font:800 clamp(34px,4.6vw,62px)/1 Archivo,sans-serif;letter-spacing:-.04em}
.k-pcard__lab{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.62;margin-top:24px}
.k-pcard--accent .k-pcard__lab{opacity:.84}
.k-pcard p{margin:11px 0 0;font:400 16px/1.55 Archivo,sans-serif;opacity:.66}
.k-pcard--accent p{opacity:.9}
/* what each price actually includes. No orange here: ten signal dots would blow
   the one-accent rule, so the marker follows the card's own colour. */
.k-pcard__list{margin:20px 0 0;padding:0;list-style:none;border-top:1px solid rgba(33,28,46,.14)}
.k-pcard__list li{position:relative;padding:10px 0 10px 010px;padding-left:19px;
  font:400 14.5px/1.5 Archivo,sans-serif;opacity:.74;text-wrap:pretty;
  border-bottom:1px solid rgba(33,28,46,.14)}
.k-pcard__list li:last-child{border-bottom:0;padding-bottom:0}
.k-pcard__list li::before{content:"";position:absolute;left:0;top:17px;width:6px;height:6px;
  border-radius:var(--k-r-pill);background:var(--k-accent)}
.k-pcard--accent .k-pcard__list{border-top-color:rgba(247,245,255,.24)}
.k-pcard--accent .k-pcard__list li{border-bottom-color:rgba(247,245,255,.24);opacity:.9}
.k-pcard--accent .k-pcard__list li::before{background:var(--k-on-accent)}
.k-compare{margin-top:clamp(20px,2.4vw,32px);padding:0 clamp(6px,1vw,14px)}
.k-compare__head{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,241,232,.62);padding:6px 0 14px}
.k-compare div{display:flex;align-items:baseline;gap:20px;padding:17px 0;border-bottom:1px solid rgba(246,241,232,.16)}
.k-compare span:first-child{font:400 clamp(15px,1.5vw,19px)/1.35 Archivo,sans-serif;color:rgba(246,241,232,.88)}
.k-compare i{flex:1;border-bottom:1px dotted rgba(246,241,232,.28);transform:translateY(-5px)}
.k-compare span:last-child{font-family:'Space Mono',monospace;font-size:16px;white-space:nowrap;color:#F6F1E8}
.k-price__kicker{margin:72px 0 0;font:400 clamp(21px,2.3vw,30px)/1.3 Archivo,sans-serif;letter-spacing:-.02em;max-width:44ch;text-wrap:pretty}
.k-price__kicker em{font-style:normal;opacity:.62}
.k-price__cta{margin-top:48px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.k-price__cta span{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;opacity:.58;max-width:44ch;line-height:1.7}

/* ---------- faq ---------- */
.k-faq{background-color:var(--k-dim)}
.k-faq__list{border-top:1px solid var(--k-line)}
.k-faq__row{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:clamp(24px,4vw,60px);padding:32px 0;border-bottom:1px solid var(--k-line)}
.k-faq__q{font:600 clamp(19px,1.9vw,25px)/1.25 Archivo,sans-serif;letter-spacing:-.02em}
.k-faq__row p{margin:0;font:400 16px/1.6 Archivo,sans-serif;opacity:.64;max-width:62ch;text-wrap:pretty}

/* ---------- brands ---------- */

/* ---------- final cta + footer ---------- */
.k-cta{background:var(--k-accent);color:var(--k-on-accent);overflow:hidden}
.k-cta__inner{max-width:var(--k-max);margin:0 auto;padding:clamp(88px,10vw,164px) var(--k-gutter) 0}
.k-cta h2{margin:0;font:800 clamp(42px,7.6vw,108px)/.96 Archivo,sans-serif;letter-spacing:-.035em;max-width:13ch;text-transform:uppercase;text-wrap:pretty}
.k-cta__split{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,5vw,72px);align-items:end;margin-top:56px}
.k-cta__split p{margin:0;font:400 clamp(16px,1.6vw,20px)/1.55 Archivo,sans-serif;opacity:.9;max-width:58ch;text-wrap:pretty}
.k-cta__act{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.k-cta__act .k-btn--lg{white-space:nowrap}
.k-cta__act span{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.86;white-space:nowrap}
.k-foot{margin-top:120px;padding:28px 0 36px;border-top:1px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.k-foot__id{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.k-foot__id strong{font:800 18px/1 Archivo,sans-serif;letter-spacing:-.04em;text-transform:uppercase}
.k-foot__id span,.k-foot>span{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.86}
.k-foot a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.k-foot a:hover{color:var(--k-ink)}

/* ---------- lightbox ---------- */
.k-lb{display:none;position:fixed;inset:0;z-index:90}
.k-lb.is-on{display:block}
.k-lb__scrim{position:absolute;inset:0;background:rgba(20,17,13,.52);backdrop-filter:blur(14px) saturate(.9);-webkit-backdrop-filter:blur(14px) saturate(.9);width:100%;cursor:pointer}
.k-lb__panel{position:absolute;inset:clamp(16px,3vw,48px);display:flex;flex-direction:column;background:var(--k-paper);border-radius:var(--k-r-lg);box-shadow:0 40px 90px -30px rgba(20,17,13,.6);overflow:hidden}
.k-lb__bar{display:flex;align-items:center;gap:clamp(12px,2vw,22px);padding:clamp(14px,1.6vw,20px) clamp(16px,2vw,26px);border-bottom:1px solid var(--k-line);flex-wrap:wrap}
.k-lb__tabs{display:flex;gap:8px;flex-wrap:wrap}
.k-lbtab{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;padding:10px 15px;border-radius:var(--k-r-sm);background:transparent;color:var(--k-ink);cursor:pointer;transition:background 140ms var(--k-ease),color 140ms var(--k-ease)}
.k-lbtab[aria-selected="true"]{background:var(--k-ink);color:var(--k-paper)}
.k-lb__cap{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.k-lb__spacer{flex:1;min-width:20px}
.k-lb__close{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--k-line);border-radius:var(--k-r-sm);cursor:pointer;transition:background 140ms,color 140ms}
.k-lb__close:hover{background:var(--k-ink);color:var(--k-paper)}
.k-lb__body{flex:1;min-height:0;background:var(--k-dim);padding:clamp(12px,1.4vw,18px)}
.k-lb__doc{display:none;height:100%}
.k-lb__doc.is-on{display:block}
.k-lb__scroll{height:100%;overflow-y:auto;display:flex;flex-direction:column;align-items:center;gap:14px}
.k-lb__status{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.6;padding:24px}
.k-lb__slot{display:none;height:100%;align-items:center;justify-content:center}
.k-lb__slot.is-on{display:flex}
.k-lb__slot > div{height:100%;max-height:100%;width:min(1100px,100%);background:#fff;border-radius:var(--k-r-md);padding:clamp(16px,2vw,28px);display:flex}
.k-lb__slot .k-slot{height:100%;width:100%;aspect-ratio:auto}

/* ---------- motion ---------- */
@keyframes k-part{from{opacity:0;transform:translate(var(--tx,0px),var(--ty,26px)) scale(var(--ts,.94)) rotate(var(--tr,0deg))}to{opacity:1;transform:none}}
@keyframes k-blink{0%,100%{opacity:1}50%{opacity:.28}}
@keyframes k-typewipe{from{width:100%}to{width:0}}
@keyframes k-pop{from{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes k-flow{from{stroke-dashoffset:247}to{stroke-dashoffset:0}}

[data-part]{animation:k-part 620ms var(--k-ease) both}
/* a half-degree is enough to feel alive without looking broken */
[data-reveal]{--tr:-0.6deg}
@supports (animation-timeline: view()){
  [data-reveal]{animation:k-part 1ms linear both;animation-timeline:view();animation-range:entry 2% entry 36%}
}
@supports not (animation-timeline: view()){
  html.k-io [data-reveal]{opacity:0}
  html.k-io [data-reveal].is-in{animation:k-part 620ms var(--k-ease) both}
}
.k-detail.is-flip{animation:k-part 420ms var(--k-ease) both}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  [data-part],[data-reveal],.k-detail,.k-mcp__node,.k-benny__ask i{animation:none!important;opacity:1!important;transform:none!important}
  .k-benny__ask i{display:none}
  .k-mcp svg g:last-child path{animation:none!important}
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .k-hero__split{grid-template-columns:minmax(0,1fr);align-items:start}
  .k-chips{grid-template-columns:repeat(3,minmax(0,1fr))}
  .k-cta__split{grid-template-columns:minmax(0,1fr);align-items:start}
  .k-detail{grid-template-columns:minmax(0,1fr)}
}

/* ---- tablet and phone: one column, collapsed nav ---- */
@media (max-width:860px){
  :root{--k-band:clamp(56px,10vw,96px)}
  [id]{scroll-margin-top:76px}

  /* nav collapses to logo + call + toggle; links drop into a panel */
  .k-nav__inner{min-height:62px;gap:12px}
  .k-nav__toggle{display:flex}
  .k-nav__links{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--k-paper);border-bottom:2px solid var(--k-ink);
    padding:6px var(--k-gutter) 18px;box-shadow:0 18px 30px -22px rgba(20,17,13,.5);
  }
  .k-nav.is-open .k-nav__links{display:flex}
  .k-nav__links a{padding:15px 0;opacity:.82;border-bottom:1px solid var(--k-line)}
  .k-nav__links a:last-child{border-bottom:0}
  /* four items plus a toggle will not fit a phone, so login moves into the panel */
  .k-nav__end .k-nav__login{display:none}
  .k-nav__login-menu{display:flex;align-items:center;gap:6px}
  .k-nav__login-menu svg{width:12px;height:12px}
  .k-btn{font-size:13px;padding:16px 17px}
  .k-logo{padding:12px 0;gap:10px}
  .k-logo__mark{width:23px;height:23px}
  .k-foot a{display:inline-block;padding:6px 0}

  /* section label column becomes a header row */
  .k-cols{grid-template-columns:minmax(0,1fr);gap:20px}
  .k-cols > .k-eyebrow{display:flex;align-items:center;gap:16px}
  .k-emblem-lg{width:52px;height:52px;margin-top:0;flex:none}

  .k-step{grid-template-columns:minmax(0,44px) minmax(0,1fr);gap:10px 18px;padding:28px 0}
  .k-step p{grid-column:2}
  .k-faq__row{grid-template-columns:minmax(0,1fr);gap:12px}
  .k-how__top{gap:32px}
  .k-steps{margin-top:40px}

  /* feature rail scrolls sideways instead of stacking into three rows */
  /* no snap: it re-snaps on load and leaves the rail scrolled by the padding */
  .k-ftabs{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:0 0 0 18px}
  .k-ftabs::-webkit-scrollbar{display:none}
  .k-ftab{flex:none;padding:16px 16px 17px}

  /* stacked, the flex-basis on these would be read as a height and stretch them */
  .k-vault__body{flex-direction:column;gap:26px}
  .k-vault__stage,.k-vault__copy{flex:none;width:100%}
  .k-vault__copy h3,.k-vault__copy p{max-width:none}

  /* the Benny pane is readable content, not a screenshot — keep it legible */
  .k-benny__log{min-height:0;gap:12px;padding:14px}
  .k-benny__ask{max-width:92%}
  .k-benny__ask p,.k-benny__reply p{font-size:13.5px;line-height:1.55}
  .k-benny__reply{max-width:100%}
  .k-benny__hint,.k-benny__src,.k-benny__chips span,.k-benny__acts span{font-size:9px}
  .k-benny__think span{font-size:8.5px;margin-left:3px;white-space:normal;line-height:1.5}

  /* bigger labels crowd the hub, so give the graph more room to spread */
  .k-mcp{aspect-ratio:4/3}
  .k-mcp__hub{padding:11px 14px}
  .k-mcp__hub em,.k-mcp__hub small{font-size:8px}
  .k-mcp__hub strong{font-size:15px}
  .k-mcp__node{padding:7px 9px;min-width:0;gap:2px}
  .k-mcp__node b{font-size:10px}
  .k-mcp__node small{font-size:7.5px}

  .k-explore__head span:last-child{display:none}

  .k-price{padding:16px}
  .k-price__kicker{margin-top:48px}
  .k-price__cta{margin-top:36px;gap:18px}
  .k-foot{margin-top:72px}
  .k-outbtn{padding:15px 16px}

  .k-lb__panel{inset:8px}
  .k-lb__bar{gap:10px;padding:12px 14px}
  .k-lb__cap{display:none}
  .k-lbtab{padding:12px 15px}
}

/* ---- phone ---- */
@media (max-width:640px){
  :root{--k-gutter:20px}
  .k-chips{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .k-chip{padding:14px 15px 13px;gap:11px}
  .k-elements{grid-template-columns:minmax(0,1fr);gap:12px}
  .k-pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
  .k-pillar{min-height:168px;padding:15px 16px 14px}
  .k-pillar__mark{width:64px;height:64px}

  /* the dark panels run to the page edge so the product has room to breathe */
  .k-vault,.k-price{
    margin-left:calc(var(--k-gutter) * -1);
    margin-right:calc(var(--k-gutter) * -1);
    border-radius:0;
  }
  .k-vault{padding:24px var(--k-gutter) 28px}
  .k-price{padding:14px var(--k-gutter) 18px}
  /* the price is nowrap and won't fit beside the label — drop it to its own
     line, keeping the dotted leader that carries it */
  .k-compare div{flex-wrap:wrap;gap:4px 16px;padding:14px 0}
  .k-compare span:first-child{flex:1 1 100%;font-size:16px}
  .k-compare span:last-child{font-size:15px}
  .k-ftabs{margin-left:calc(var(--k-gutter) * -1);margin-right:calc(var(--k-gutter) * -1);padding-left:0;padding-right:var(--k-gutter)}
  .k-player__frame{margin-left:calc(var(--k-gutter) * -1);margin-right:calc(var(--k-gutter) * -1)}
  .k-player{clip-path:none}

  .k-stakes__pair{grid-template-columns:minmax(0,1fr);gap:22px;margin-top:34px;padding-top:26px}
  .k-stakes__kicker{margin-top:48px}
  .k-hero__inner{padding-bottom:clamp(40px,9vw,56px)}
  .k-hero__split{gap:26px;margin-top:26px}
  .k-cta__split{margin-top:36px;gap:28px}
  .k-cta__act{align-self:stretch}
  .k-cta__act .k-btn--lg{width:100%;text-align:center}
  .k-price__cta .k-btn--lg{width:100%;text-align:center}
  .k-btn--lg{font-size:16px;padding:18px 24px}
  .k-foot{gap:14px}
  .k-detail__count span{white-space:normal}
}

@media (max-width:400px){
  .k-nav__inner{gap:8px}
  .k-logo__word{font-size:20px}
}

/* coarse pointers get no hover-only affordances */
@media (hover:none){
  .k-btn:hover,.k-chip:hover{transform:none}
}


/* ---------- element ticker ---------- */
.k-ticker{background:var(--k-accent);color:var(--k-on-accent);overflow:hidden;padding:13px 0;white-space:nowrap}
.k-ticker__track{display:inline-flex;gap:48px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;animation:k-marquee var(--k-ticker-dur,170s) linear infinite;will-change:transform}
@keyframes k-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.k-ticker__track{animation:none}.k-ticker{white-space:normal}}

/* The client ribbon. Same component, set as names rather than elements: heavier,
   a size up, and an orange dot on each join instead of the diamond prefix. */
.k-ribbon__lead{padding-bottom:14px}
.k-ribbon__lead span{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--k-accent2)}
.k-ticker--brands .k-ticker__track{gap:0;font-size:12px;font-weight:700;letter-spacing:.16em}
.k-ticker__set{display:contents}
.k-ticker--brands .k-ticker__set > span{position:relative;padding:0 30px}
.k-ticker--brands .k-ticker__set > span::after{content:"";position:absolute;right:-2.5px;top:50%;
  width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--k-accent2)}

/* ---------- Ben's credentials ---------- */
.k-cv{margin:32px 0 0;padding:0;list-style:none;max-width:52ch;border-top:1px solid var(--k-line)}
.k-cv li{position:relative;padding:15px 0 15px 26px;border-bottom:1px solid var(--k-line);font:400 clamp(15px,1.5vw,17px)/1.5 Archivo,sans-serif;opacity:.78;text-wrap:pretty}
.k-cv li::before{content:"";position:absolute;left:0;top:23px;width:7px;height:7px;background:var(--k-accent);border-radius:var(--k-r-pill)}

/* ---------- process track ---------- */
.k-track{background:linear-gradient(180deg,var(--k-vault-top) 0%,#14110D 100%);color:#F6F1E8;border-radius:var(--k-r-lg);padding:clamp(22px,2.4vw,30px);box-shadow:var(--k-lift)}
.k-track__head{display:flex;align-items:center;gap:12px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,241,232,.62)}
.k-track__head i{color:var(--k-accent2);font-style:normal}
.k-track__list{list-style:none;margin:22px 0 0;padding:0;position:relative}
.k-track__list::before{content:"";position:absolute;left:5.5px;top:10px;bottom:10px;width:1px;background:rgba(246,241,232,.2)}
.k-track__list li{position:relative;display:flex;align-items:center;gap:15px;padding:9px 0}
.k-track__dot{position:relative;z-index:1;width:12px;height:12px;border-radius:var(--k-r-pill);flex:none;background:#14110D;box-shadow:inset 0 0 0 1.5px rgba(246,241,232,.32)}
.k-track__name{font:400 15px/1.35 Archivo,sans-serif;color:rgba(246,241,232,.56)}
.k-track__list .is-done .k-track__dot{background:#3F7A4B;box-shadow:inset 0 0 0 1.5px #3F7A4B}
.k-track__list .is-done .k-track__name{color:rgba(246,241,232,.82)}
.k-track__list .is-now .k-track__dot{background:var(--k-accent2);box-shadow:0 0 0 4px color-mix(in oklab,var(--k-accent2) 26%,transparent)}
.k-track__list .is-now .k-track__name{color:#F6F1E8;font-weight:600}
.k-track__note{margin:22px 0 0;padding-top:18px;border-top:1px solid rgba(246,241,232,.18);font:400 14px/1.6 Archivo,sans-serif;color:rgba(246,241,232,.7);text-wrap:pretty}


/* the signal dot again, as the full stop on the closing line */
.k-stop{color:var(--k-accent2)}


/* ---------- sequenced reveal ---------- */
[data-seq] > *{opacity:0;transform:translateY(16px) rotate(-.5deg)}
[data-seq].is-in > *{
  opacity:1;transform:none;
  transition:opacity 700ms var(--k-ease) calc(var(--i,0) * 260ms),
             transform 700ms var(--k-ease) calc(var(--i,0) * 260ms);
}

/* The tabs are physically joined to the panel, so they can't arrive ahead of
   it. One sequence: the panel lands, then the tabs rise out of its top edge.
   Matched to the [data-reveal] motion so this section moves like the rest. */
.k-stage:not(.is-in) > *{transform:translateY(26px) scale(.94) rotate(-.6deg);transform-origin:50% 100%}
.k-stage:not(.is-in) > .k-ftabs{transform:translateY(30px)}
.k-stage > .k-ftabs{--i:2}   /* two beats behind the panel, so it lands first */

/* the progress track lights up in order rather than arriving finished */
.k-track__list:not(.is-in) .k-track__dot{background:#14110D;box-shadow:inset 0 0 0 1.5px rgba(246,241,232,.32)}
.k-track__list:not(.is-in) .k-track__name{color:rgba(246,241,232,.56)}
.k-track__list.is-in .k-track__dot,
.k-track__list.is-in .k-track__name{transition:background 420ms var(--k-ease) calc(var(--i,0) * 380ms),
  box-shadow 420ms var(--k-ease) calc(var(--i,0) * 380ms),
  color 420ms var(--k-ease) calc(var(--i,0) * 380ms)}


@media (prefers-reduced-motion: reduce){
  [data-seq] > *{opacity:1;transform:none}
  .k-track__list:not(.is-in) .k-track__dot,
  .k-track__list:not(.is-in) .k-track__name{background:revert;box-shadow:revert;color:revert}
}


/* ---------- walkthrough ---------- */
.k-walk{margin-top:22px}
.k-walk .k-player{position:relative;filter:var(--k-lift-filter)}
.k-walk--empty{
  display:flex;flex-direction:column;gap:10px;justify-content:center;
  min-height:clamp(220px,26vw,340px);padding:clamp(28px,4vw,48px);
  background:var(--k-dim);border:1px dashed var(--k-line);
  clip-path:polygon(var(--k-cut-lg) 0,calc(100% - var(--k-cut-lg)) 0,100% var(--k-cut-lg),100% calc(100% - var(--k-cut-lg)),calc(100% - var(--k-cut-lg)) 100%,var(--k-cut-lg) 100%,0 calc(100% - var(--k-cut-lg)),0 var(--k-cut-lg));
}
.k-walk__tag{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--k-accent2)}
.k-walk--empty strong{font:700 clamp(22px,2.4vw,30px)/1.1 Archivo,sans-serif;letter-spacing:-.025em}
.k-walk__note{font:400 15px/1.6 Archivo,sans-serif;opacity:.6;max-width:44ch;text-wrap:pretty}